/*------------------------------------------------------------------
    1. import fonts
-------------------------------------------------------------------*/
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=chinese-traditional&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');



/*------------------------------------------------------------------
     comm
-------------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    outline: none !important;
}

html,
body {   
    width: 100%;
    -webkit-text-size-adjust: 100%;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    outline: 0;
    font-size: 100%;
    display: block;
    vertical-align: baseline;
    min-height: 100%;
    top: 0;
    min-height: 100vh;
    line-height: normal;
/*    overflow-x: hidden !important;*/
    font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'Apple LiGothic Medium', sans-serif;
}

html * {
    max-height: 1000000px;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}
:before,
:after {
    font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'Apple LiGothic Medium', sans-serif, 'FontAwesome';
}

body.demos .section-title img {
    max-width: 280px;
    display: block;
    margin: 10px auto;
}

body.demos .service-widget h3 {
    border-bottom: 1px solid #ededed;
    font-size: 18px;
    padding: 20px 0;
    background-color: #ffffff;
}

body.demos .service-widget {
    margin: 0 0 30px;
    padding: 30px;
    background-color: #fff
}

body.demos .container-fluid {
    max-width: 1080px
}

a {
    color: #1f1f1f;
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0;
    font-weight: normal;
    position: relative;
    padding: 0;
    font-weight: normal;
    line-height: normal;
    color: #1f1f1f;
    margin: 0
}

h1 {
    font-size: 24px
}

.small_heading.main-heading h2 {
    font-size: 21px;
}

.small_heading.main-heading::after {
    top: 18px;
}

.small_heading.main-heading {
    margin-bottom: 20px;
    width: 100%;
}

.img-responsive {
    max-width: 100%;
}


a {
  
    text-decoration: none;
    outline: none;
}

a,
.btn {
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.btn-custom {
    margin-top: 20px;
    background-color: transparent;
    border: 2px solid #ddd;
    padding: 12px 40px;
    font-size: 16px;
}


ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}




.padding_top_10 {
    padding-top: 10px !important;
}

.padding_top_20 {
    padding-top: 20px !important;
}

.padding-bottom_0 {
    padding-bottom: 0 !important;
}

.padding-bottom_1 {
    padding-bottom: 10px !important;
}

.padding-bottom_2 {
    padding-bottom: 20px !important;
}

.padding-bottom_3 {
    padding-bottom: 30px !important;
}

.padding-bottom_4 {
    padding-bottom: 40px !important;
}

.padding-bottom_5 {
    padding-bottom: 50px !important;
}



.color_black p,
.color_black ul,
.color_black ul li {
    color: #000;
}



h2 {
    font-size: 30px;
    color: #000;
    line-height: 20px;
    font-weight: 700;
    position: relative;
}

h3 {
    font-size: 24px;
    color: #000;
    line-height: normal;
    font-weight: 700;
    text-transform: uppercase;
}

h4 {
    font-size: 18px;
    color: #000;
    line-height: 21px;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 15px;
}

h5 {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    line-height: normal;
    color: #000;
}






a:hover,
a:focus {
    color: #2a3a4b;
    text-decoration: none;
}
div, p, a, span {
    word-wrap: break-word;
  }
.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10 {
    padding: 0 15px;
    float: left;
    min-height: 25px;
}

.border_radius_0 {
    border-radius: 0 !important;
}

.span1 {
    width: 10%;
}

.span2 {
    width: 20%;
}

.span3 {
    width: 30%;
}

.span4 {
    width: 40%;
}

.span5 {
    width: 50%;
}

.span6 {
    width: 60%;
}

.span7 {
    width: 70%;
}

.span8 {
    width: 80%;
}

.span9 {
    width: 90%;
}

.span10 {
    width: 100%;
}

.container {
    width: 1200px;
}

.section_padding {
    padding: 80px 0 100px;
}

.layout_2_padding {
    padding: 100px 0 80px;
}

.full {
    width: 100%;
    float: left;
}
.full_height {
    min-height: 100vh;
}


.hidden {
    visibility: hidden;
}



.brown_color {
    color: #795548 !important;
}

.brown_bg {
    background: #795548 !important;
}



.blue_bg {
    background: #36a9e2;
}

.yellow_bg {
    background: #fabb3d;
}

.green_bg {
    background: #79c347;
}

.green_bg2 {
    background: #1ed085;
}

.purple_bg {
    background: #8e68ef;
}
.blue1_color {
    color: #2196f3 !important;
}


.blue1_bg {
    background: #2196f3 !important;
}


.orange_color {
    color: #ff5722 !important;
}

.orange_bg {
    background: #ff5722 !important;
}

.purple_color {
    color: #673ab7 !important;
}

.purple_bg {
    background: #673ab7 !important;
}

.purple_color2 {
    color: #3f51b5 !important;
}

.purple_bg2 {
    background: #3f51b5 !important;
}

.blue2_color {
    color: #03a9f4 !important;
}

.blue2_bg {
    background: #03a9f4 !important;
}

.rred_color {
    color: #e91e63 !important;
}

.rred_bg {
    background: #e91e63 !important;
}

.yellow_color {
    color: #ff9800 !important;
}

.yellow_bg {
    background: #ff9800 !important;
}

.purple_color2 {
    color: #9c27b0 !important;
}

.purple_bg2 {
    background: #9c27b0 !important;
}

.orange_color2 {
    color: #f44336 !important;
}

.orange_bg2 {
    background: #f44336 !important;
}

.green_color {
    color: #009688 !important;
}

.green_bg {
    background: #009688 !important;
}


.mainblue_bg {
    background: #313643 !important;
    position: relative;
    max-width:100%;
    width: 100%;

}

.mainblue_bg::before {
    content: "";
    background-image: url(../images/bg_page/top_bgline.svg);
    position: absolute;
    display: block;
    right: 0;
    top:65px;
    max-width: 480px;
    width: 480px;
    height: 30px;
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
     z-index: 1;
}


.mainblue_bg::after{
    background-color: #292d38;
    content: "";
    clip-path: polygon(100% 0, 100% 100%, 40% 100%, 0 35%, 0 0);
    position: absolute;
    display: block;
    right: 0px;
    top: 0px;
    max-width: 100%;
    min-width: 100%;
    min-height:680px;

}

    .topBg {
        position: relative;
        display: flex;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding: 0;
        margin: 0 auto;
        min-height:550px;
        /* max-height: 600px; */
        flex-wrap: wrap;
      
    }

  
.topBg::before{
    content: "";
    background-image: url(../images/bg_page/sec_bgline.svg);
    position: absolute;
    display: block;
    right: -35px;
   top:100%;
    width: 66vw;
    height: 20px;
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    z-index: 1;
}




.top_Bgright{
    display: block;
    position: relative;
    margin-top:50px;
    z-index: 1;
}



.heading_section {
    border-top: solid #b6b6b6 2px;
    color: #FFF;
    width: 100%;
    max-width: 100%;
    display: block;
    padding:5px;
}

/*----------------
main_area
-------------------*/



.margin_top_50 {
    margin-top: 50px!important;
}
.margin_top_40 {
    margin-top: 40px!important;
}
.margin_top_30 {
    margin-top: 30px!important;
}
.margin_top_20 {
    margin-top: 20px!important;
}
.margin_0 {
    margin: 0 !important;
}

.margin_bottom_20 {
    margin-bottom: 20px!important;
}
.margin_bottom_30 {
    margin-bottom: 30px!important;
}
.margin_bottom_50 {
    margin-bottom: 50px!important;
}
.center {
    display: flex;
    justify-content: center;
}

.verticle_center {
    display: flex;
    align-items: center;
}

.dropdown-item {
    font-size: 13px;
}

.column img {
    width: 100%;
}

.max_w-50 {
    max-width: 50px;
}

.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.mobile_open{display: none !important}




.graph_revenue {
    padding: 0;
    margin-top: 0;
    min-height: auto;
}



/*------------------------------------------------------------------
     container 
-------------------------------------------------------------------*/

.full_container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.inner_container {
    padding: 0;
    margin: 0;
    display: flex;
}

.galleryinner {
    padding: 0 15px
  }
.galleryinner .column {
    background: #fff;
    display: block;
    box-shadow: 0 0 13px -10px #000;
    overflow: hidden;
    border: #ddd solid 1px;
  }

/*==============
    - topbar 
==============*/

.topbar {
    position: fixed;
    width: 100%;
    padding-left: 240px;
    z-index: 10;
    background: #313643;
    top: 0;
    transition: ease all 0.3s;
    left: 0;
    z-index: 3;
}

#sidebar.active+#content .topbar {
    padding-left: 90px;
}

.topbar .navbar {
    margin: 0;
}

.right_topbar {
    float: right;
    padding: 0;
    position: relative; 
    margin-right: 10px;
}

.icon_info {
    float: left;
    width: 100%;
}

.icon_info ul {
    float: left;
    width: auto;
    list-style: none;
    margin: 0;
}

.icon_info ul li {
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 0;
    text-align: center;
    position: relative;
    margin:7px 0 0 5px;
    display: block;
    cursor: pointer; 

}


.icon_info ul li a {
    color: #fff;
    display: block;
    cursor: pointer; 
    text-align: center;
   
}

.icon_info ul li a img {
       border: none;
    display: block;
    width: 100%;
    max-width:100%;
    height:100%;
    -o-object-fit: contain;
    object-fit:contain;

}



/*-----hamburger----*/
.sidebar_toggle {
    padding:10px 10px;
    margin-top: 5px;
    font-size: 0;
    background:transparent;
    margin-right: 0;
    cursor: pointer;
    float: left;
    border:none
}
.sidebar_toggle > i {
    width: 30px;
    height: 2px;
    background-color: #a5a5a5;
    position: relative;
    display: block;
    left: 0px;
    top: 2px;
    margin-bottom: 5px;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), width 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), width 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}





.icon_info ul.user_profile_dd li div a {
    font-size: 15px;
    color: #15283c;
    padding: 4px 15px;
    border-bottom: none;
    line-height: normal;
}

.icon_info ul.user_profile_dd li div a span {
    font-size: 13px;
    color: #15283c;
    font-weight: normal;
    padding: 0;
    transition: all .3s ease-in-out;
    line-height: normal;
}

.icon_info ul.user_profile_dd li div a:hover,
.icon_info ul.user_profile_dd li div a:focus {
    background: #243147;
    color: #fff;
}

.icon_info ul.user_profile_dd li div a:hover span,
.icon_info ul.user_profile_dd li div a:focus span {
    color: #fff;
}

.user_profile_dd .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    float: left;
    padding: 10px 6px;
    margin: 0;
    font-size: 15px;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 0;
    width: 100%;
    box-shadow: -1px 1px 4px -2px rgba(0, 0, 0, 0.2);
    border: none;
}


/**-- sidebar --**/

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

i,
span {
    display: inline-block;
}

#sidebar {
    min-width: 240px;
    max-width: 240px;
    background-color: #edefef;
    transition: all 0.3s;
    position: relative;
    z-index: 11;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
    float: left;
    width: 100%;
    position: fixed;
    height: 100%;
    clip-path:polygon(80% 0, 100% 5%, 100% 100%, 0 100%, 0 0) !important 
  
}

.sidebar_blog_1,
.sidebar_blog_2,
.sidebar_blog_3{
    float: left;
    width: 100%;
}
.sidebar_blog_1{
   background-color: #fff;
   width:95%;
   min-height: 100%;
   position: relative;
   display: block;
   clip-path:polygon(83% 0, 100% 3%, 100% 100%, 0 100%, 0 0) !important
}

#sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

#sidebar ul.components {
    padding: 0 0 15px 0;
    margin: 0;
    float: left;
    width: 100%;
}

#sidebar ul li a {
    padding: 10px 25px;
    display: block;
    font-size:1.125rem;
    color: rgba(0, 0, 0, 1);
    font-weight: 400;
     text-align: left;
     cursor: pointer;
}
 .homebtn{
    text-align: center!important;
    }
#sidebar ul li a:hover,
#sidebar ul li a:focus {
    color:#ff483b;
}

#sidebar ul.components li {
    position: relative;
    display: block; 
    cursor: pointer;
}
#sidebar ul.components li span{
    position: relative;
    display: inline-block; 
    cursor: pointer;
}


#sidebar ul.components li span.ps{
    position: relative;
    display: inline-block; 
    cursor: pointer;
    background-color: #aaaaaa;
    padding:5px 10px;
    margin: 6px auto 0px 7px;
    font-size: 0.875rem;
    color: #f7f5f5;
    letter-spacing: 1.5px;

}
#sidebar ul.components ul {
    background: #214162;
    padding: 20px 0;
}

#sidebar ul.components ul li a {
    font-size:1rem;
    color: rgba(255, 255, 255, .7);
    padding: 7px 35px;
    cursor: pointer;
}
/*---預/下拉--*/
#sidebar ul.components ul li a:hover {
    color: #fff;
    background: transparent;
    padding-left: 45px;
}

#sidebar ul li a i {
    margin-right: 20px;
    width: 15px;
    font-size: 20px;
    float: left;
}

.bottom_sidebar ul li {
    float: left;
    width: 50%;
    list-style: none;
}

a[data-toggle="collapse"] {
    position: relative;
}

#content {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    transition: ease all 0.3s;
    position: relative;
    padding: 40px 20px 0px 260px;
   overflow: hidden;
}



#sidebar.active+#content {
    padding-left: 85px;
    display: block;
 
}


/*--------------
ttl
----------------*/
.page_title {
    display: flex;
    margin-top:0px;
    margin-bottom: 10px;
    padding:10px 35px 10px 38px;
    margin-left: 20px;
    margin-right: auto;
    position: relative;
    z-index: 2;

}

.page_title::before {
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 20px;
border-color: transparent transparent transparent #fff;
position: absolute;
left:0;
top: 5px;
}


.page_title::after {
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    left:28px;
    top: 5px;
}


.page_title h2 {
    font-size: 2em;
    font-weight: 500;
    color: #fff;
    padding-bottom: 10px;
    position: relative;
   padding-left: 38px;
    display: inline-block;
    line-height: 30px;
 }


.page_title h2::before {
        content:"";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 0 12px 20px;
        border-color: transparent transparent transparent #fff;
        position: absolute;
        left: 18px;
        bottom: 20px;
        display: inline-block;
        }

.page_title span {

    position: relative;
    display: inline-block;
    margin-right:3px;
    padding: 0 10px;
    bottom: 10px;
}
    
    

.page_title span::before {
    content: "";
    width: 1px;
    height: 25px;
    background-color: rgb(255, 255, 255);
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    top: 5px;
    left: 0px;
    z-index: 1;
}

.page_title span:first-child:before {
   content:none; 
opacity: 0;
}


/*----------------
top Social
-------------*/
.topbar .navbar {
    padding: 0;
    background: #313643;
    border: none;
    border-radius: 0; 
   height: 45px;
}

.user_profle_side {
    display: flex;
}

.sidebar_user_info {
    padding: 15px 10px 0 10px;
    background:transparent;
    display: block;
}



/* Safari 4.0 - 8.0 */

@-webkit-keyframes online {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes online {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}





/*-----------------
Logo  section
----------------------*/

.logo_section {
    padding: 0;
    width: auto;
    text-align: center;
    background: transparent;
    float: left;
}

.logo_section img {
    height:45px;
    padding: 0;
    margin:8px 9px 8px;
}

#sidebar.active .logo_section a {
    width: 100%;
    display: flex;
    justify-content: center;
}

.logo_section img.logo_icon {
    margin: 0;
    text-align: center;
    padding: 8px 8px;
    height: 50px;
}

.top_logo_section{display:none;}



.siderbarlogo_img {
    max-width:235px;
    width:235px;
    height:75px;
    float: left;
    position: relative;
    display: block;
    margin-top:40px;
   
}

/*------------------------------------------------------------------
    .login siderbar
-------------------------------------------------------------------*/


/*-----siderbarlogin ---*/
.siderBar_login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 0px solid #e7e7e7;
    padding: 7px 0 10px 0;
    max-width:75%;
    width: 75%;
    justify-content: center;
    align-content: center;
    margin:25px auto 15px auto;
    clip-path:polygon(100% 0, 100% 100%, 5% 100%, 0 70%, 0 0);
   
  position: relative;
  cursor: pointer;
  background-color:#313643 !important
}

.siderBar_login a{
    color:#fff !important ;
    font-size: 1rem!important;
    padding: 0 !important;
    text-align: center!important;
    cursor: pointer;
}
.siderBar_login a:hover{
   color:#e1d06a !important
}

.number_txt {
    justify-content: center;
    align-items: center;
    padding: 0;
    float: left;
    color:#fff !important ;
     border-right: solid rgba(255, 255, 255, 0.3) 1px;
    padding-right: 12px;    width: max-content;
}


.register {  

    padding-left: 12px;
    align-content: center;
    align-items: center;
    float: left;
    line-height: normal;
    text-align: center;
    font-weight: 400;
    width: max-content;
}

#sidebar.active .number_txt {
    padding-right: 8px;
}

#sidebar.active .register {  
    padding-left:8px;
}

#sidebar.active .siderBar_login {
    max-width:88%;
    width: 88%;
    left: 7px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#sidebar.activ .siderBar_login a{
    font-size: .938rem!important
}


/*------------------------------------------------------------------
    .qrcode
-------------------------------------------------------------------*/

.sidebar_blog_3{
    margin:0px auto 30px auto;
    min-height: 1px;
    cursor: pointer;
    max-width: 100%;
    width: 100%;
    display: block;
     position: relative;

}


.siderdvttImg{
    width: 100px;
    max-width: 100px;
    height: 100px;
    position: relative;
    display: block;
    text-align: center;
    margin: auto;
}




.siderdvttImg img{
    width: 100%;
    border: none;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 1;
}




/*------------------------------------------------------------------
    7. bg style
-------------------------------------------------------------------*/




.white_shd {
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    margin-top: 0;
    
     display: block;
    width: 100%;
    position: relative;
    min-height: 600px;
    padding:0 10px;
}

.dark_bg {
    background: #214162;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    clip-path: polygon(100% 0, 100% 100%, 12% 100%, 0 82%, 0 0);
    display: block;
    width: 100%;
    padding: 0;
    margin: 50px auto 30px auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.red_bg {
    background:#e0002a;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    clip-path: polygon(100% 0, 100% 100%, 12% 100%, 0 82%, 0 0);
    display: block;
    width: 100%;
    padding: 0;
    margin:15px auto 30px auto;
    text-align: center;
    position: relative;
    max-height:480px;
}


/*------------------------------------------------------------------
    10. Testimonial slider
-------------------------------------------------------------------*/
.zero_section {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: visible;
  }


.slider_section {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    background-color:transparent;
    z-index: 2;
   
  }
  
  .slider_section .row {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  .slider_section #customCarousel {
    width: 100%;
    max-width:100%;
    z-index: 3;
  }





  .img-box {
    text-align: center;
    display: block;
    position: relative;
    overflow: hidden; 
       max-width: 100%;
    height: 450px;
    margin: 0 auto;
    text-align: center;   
     margin: 0px auto 0 auto;
    

}
  
  .slider_section .img-box img {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      min-height: 100%;
      max-height: 100%;
      object-fit: cover;
      object-position: center center;
      border: none;
      padding: 0px;
      vertical-align: middle;
      box-sizing: border-box;
      margin: auto;
      display: block;
  }
  .slider_section .carousel-indicators {
    position: absolute;
    right: 15px;
   
    margin: 0 auto 15px 0;
    -webkit-box-pack:end;
        -ms-flex-pack: end;
            justify-content:flex-end;
    -webkit-box-align:flex-end;
        -ms-flex-align: flex-end;
            align-items:flex-end;
  
  }
  
  .slider_section .carousel-indicators li {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    opacity: 1;
  }
  
  .slider_section .carousel-indicators li.active {
    width: 20px;
    height: 20px;
    background-color: #373c3f;
    position: relative;
    top: 2px;
  }
  
  .slider_section .carousel-indicators li.active::before {
    position:absolute;
    content: "";
    background-color: #e0002a;
    width: 9px;
    height: 9px;
    display: block;
    top:6px;
    left:6px;
     border-radius: 100%;
  }
  


/*-----------------------------
    
      影音
    -------------------------*/


    .youtube_gallery_inner{
        margin:0 auto;
        display: block;
        text-align: center;
        padding:20px 20px;
         height: 100%;
    }



    .youtube_gallery_inner .column {
        clip-path: polygon(100% 0, 100% 100%, 12% 100%, 0 81%, 0 0);
        overflow: hidden;
        max-height: 97%;
        min-height: 97%;
        width: 100%;
       display: block;
       position: relative;
        margin: auto;
    }


    .iVideo_Box {
       
        text-align: center;
        min-height:100%;
        max-width:100%;
       

    }

    .iVideo_Col{
        position: relative;
        padding: 0px;
        display: block;
        max-height: 400px;
        overflow: hidden;   
    }



    
    .iv-box {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        opacity: 0;
        display: block;
        
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        color: #fff;
        filter: alpha(opacity=0);
        opacity: 1;
    
     position: absolute;
        top:0;
      
    }
       

    .iv-box .youtubetuk{
       display: block;
       position: absolute;
        top:40%;
        width:45px;
        left: 45%;
      
    }
       

    .iVideo_Box .is-using-mouse .fancybox__content .plyr :focus {
        outline: none;
    }
    
    
    .fancybox__iframe {
    
        min-height: 60vh !important;
    }
    
    
/*----------toggle vedio----*/
    
    .svideo-container {
        margin: auto;
        background:#e0002a;
    
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden; 
        padding: 10px;
        display: block;
        width: 100%;
        max-width:  100%;
        z-index: 3;
    }
    
    .svideo-item {
        border-bottom: 1px solid #ddd;
    }
    
    .svideo-question {
        padding:10px;
        cursor: pointer;
        font-size: 1.063rem;
        font-weight: 600;
        transition: background 0.3s;
        border: none;
        width: 100%;
        text-align: left;
        outline: none;
        display: block;
        position: relative;
        color: #FFF;   
         background:#e0002a;
         letter-spacing: 2px;
    }
    
    .svideo-question:focus {
        background:#e0002a;
        } 
    
    
   

    .svideo-answer { 
           display: none; /* 確保初始狀態隱藏 */
        font-size: 1em;
        padding: 10px;
        overflow: hidden; /* 防止動畫過程中溢出 */
        max-height: none !important; /* 確保高度無上限 */
    }
    .svideo-answer.open {
        padding: 10px;
    }
    
    .svideo-question[aria-expanded="true"] {
       background:#6b6b6b;
       color: #fff;
    }
    
    /* FAQ Open/Close Button */
    .svideo_arrow {
        font-size:22px;
        font-weight: 400;
        color: #fff;
        position: absolute;
        top: 20px;
        right: 10px;
        transform: translateY(-50%);
        width: 1.5em;
        height: 1.5em;
        text-align: center;
        cursor: pointer;
        background-color: #000;
        border-radius: 0%;
        line-height:28px;
    }

    .s-videoArea {        
        position: relative;
        max-width: 100%;
        width: 100%;
        height: 100%;
        display: block;
        text-align: center;
        margin: auto;
    }
    .video-container {
        min-height: auto;
        height: auto;
        padding: 0;
        max-width: 100%;
        width: 100%;
        position: relative;
        margin: 0px auto 15px auto;
        justify-content: center;
        display: flex
    
    }
    


    .media-txt{
        position: relative;
        bottom: 0; 
         max-width: 100%;
        width: 100%;
        display: block;
        padding: 8px;    background: #fff;
    }
  
    
    .media-body  a {
        font-size: 1em;
    }
    .media-body  a:active,.media-body  a:hover {
      color: #36a9e2;
    }

/*------------------------------------------------------------------
    . select Section
-------------------------------------------------------------------*/
.progress_bar_inner {
    padding: 10px 15px;
    float: right;
    width: 100%;
   display: flex;
    position: relative;
    right: 0;
    top: 0;
    float: right;
    justify-content: right;
    z-index: 3; 
    margin-right: 28px;
    margin-left: auto;
  }

  .dropdown_section {
    float: left;
    margin: 5px;
}


/*------------------------------------------------------------------
    . txt table Section
-------------------------------------------------------------------*/


    .TxtArea {
        clear: both;
        width: 100%;
        max-width: 100%;
        padding:30px 15px;    
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-weight: normal;
        word-break: break-all;


      }




      .RtableArea {
        display: block;
      background-color: #FFF;
        padding:0;
        max-width: 92%;
        -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        border: #dfdfdf solid 1px;
        position: relative;
        margin-left:85px;
        margin-right: auto;
        z-index: 2;
      
      }

      .RtableArea::before{      
            position: absolute;          
            content: "";                
            clip-path: polygon(0 0, 20% 4%, 19% 95%, 0% 100%);
            background-color: #ddd;         
            bottom: 0;         
            width: 100px;          
            height: 100%;         
            display: block;         
            margin-left: auto;         
           margin-right: 0;        
            top: 0;   
            left:100%;
        }
        .itableArea {
            display: block;
          background-color: #FFF;
            padding:0;
            max-width:100%;
            -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
            border: #dfdfdf solid 1px;
            position: relative;
            margin-left:auto;
            margin-right: auto;
            z-index: 2;
           padding:0 15px;
          }

.lag-blue {
    text-align: center;
    display: inline-block;
    align-items: center;
    justify-content: center;
    background-color: #2d6ea3;
    color: #fff;
    padding: 5px 10px;
    line-height: 1.3;
    font-size: 0.875rem;
    border-radius: 5px;
    margin-top: 5px;
    letter-spacing: 1px;
   
}

.lag-orange {
    text-align: center;
    display: inline-block;
    align-items: center;
    justify-content: center;
    background-color: #fc7f54;
    color: #fff;
    padding: 5px 10px;
    line-height: 1.3;
    font-size: 0.875rem ;
    border-radius: 5px; 
    letter-spacing: 1px;
   
}
.lag-pink {
    text-align: center;
    display: inline-block;
    align-items: center;
    justify-content: center;
    background: #e91e63;
    color: #fff;
    padding: 5px 10px;
    line-height: 1.3;
    font-size: 0.875rem ;
    border-radius: 5px; 
    letter-spacing: 1px;
   
}

.lag-gary {
    text-align: center;
    display: inline-block;
    align-items: center;
    justify-content: center;
    background-color: #aaaaaa;
    color: #fff;
    padding: 5px 10px;
    line-height: 1.3;
    font-size: 0.875rem;
    border-radius: 5px;
    margin-top: 5px;
    letter-spacing: 1px;
   
}
/*--------------
table表單
-----------------------*/

.listTable {
    font-size: 1.063rem;
    line-height: 2.5rem;
    width: 100% !important;
    max-width: 100%;
    min-width: 100% !important;
    border-collapse: collapse;
    border-spacing: 0;
    z-index: 1;
    background-color: #fff;
}


.listTable thead .listTable tbody,
.listTable tfoot {
    color: #000;
    vertical-align: middle;
    width: 100%;
    min-width: 100%;
    text-align: center;
    border-color: inherit;
	border: 1px solid #d7d4ce;
}


.listTable thead tr th {
    background-color: #1f1f1f !important;
    color: #fff;
    font-weight: normal;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    line-height: 1.6rem;
    display: table-cell;
	border: 1px solid #d7d4ce;
    font-size: 1rem;
}

.listTable tr {
    display: table-row
}

.listTable td {
    font-size: 1.063rem;
    padding: 5px 10px;
    border: 1px solid #d7d4ce;
    text-align: center;
    display: table-cell;
    vertical-align:middle;
}

    .listTable td div[data-toggle=toggle] {
        float:left;
    }

.listTable td a {
    color: #000;
}
.listTable td a:hover{
    color:#ff483b;
}
.listTable th a:hover{
    color:#ff483b;
}
.listTable tr:nth-child(odd) {
    background-color: #fff;
}

.listTable tr:nth-child(even) {
    /* border-bottom:1px solid #dcdcdc;*/
    background: #fff;
}

.listTable tr:last-child td {
    border-bottom: 1px solid #dcdcdc;
}

.listTable tbody>tr:nth-child(odd) {
    background-color: #e9ebed;
}




.listTable tbody tr th {
    display: table-cell;
	border: 1px solid #d7d4ce;
    text-align: center;

}


.listTable tfoot th {
    border: 1px solid #d7d4ce;

}


.listTable tbody {
    display: table-row-group
}

.listTable thead {
    display: table-header-group;
   
}

.listTable tfoot {
    display: table-footer-group;
}

    /* 欄位多的列表：縮小字級與行高 */
    .listTable.listTable-sm thead tr th,
    .listTable.listTable-sm td {
        font-size: .875rem;
        line-height: 1.5rem;
        padding: 4px 6px;
    }


/*------------------------------------------------------------------
    .  Section02 bg
-------------------------------------------------------------------*/

.show-container{
    position: relative;
    padding: 30px 0;
    display: block;
   width: 100%;
  
   }
 
   .show-container::before{
     content: "";
     background-image: url(../images/bg_page/index_showBg.png);
     position: absolute;
     display: block;
     left: 0;
    bottom:-100px;
    min-width: 585px;
    min-height:690px;
     background-position:left;
     background-size: cover;
     background-repeat: no-repeat;
 }
  
    
/* .show-container::after{
     content: "";
     background-image: url(../images/bg_page/index_showlogoBg.png);
     position: absolute;
     display: block;
     left: -15px;
    bottom:0px;
    min-width: 100px;
    min-height:200px;
     background-position:left;
     background-size: cover;
     background-repeat: no-repeat;
 }*/
 



 
/*------------------------------------------------------------------
    .  Section footer
-------------------------------------------------------------------*/

.footer {   
   display: block;    
    position: relative;
    max-width: 100%;  
    width: 100%;  
    margin-right: auto;
    margin-left: auto;
    padding: 0px 15px 0 15px;
    min-height:95px;
   z-index: 1
}
   

.footer::before {  
    content: "";
  position:absolute ;
 background-image:url(../images/bg_page/ftbgdot.svg);
  background-position: center;
  background-repeat: no-repeat;
  height: 11px;
  min-width: 180px;
  left: 37%;
  bottom: 35px;
}



.footer::after {  
    content: "";
  position:absolute ;
 background-image:url(../images/bg_page/ft_rBg.png);
  background-position: center;
  background-repeat: no-repeat;
  height: 92px;
  min-width:328px;
  right:32px;
  bottom: 0px;
  background-size: contain;
}

  

.footer-inner{
    display: flex;
    padding: 0 0 10px 95px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
   margin: 0;}


    .footer-info {
        line-height: normal;
        text-align: left;
        font-size: 0.875em;
        font-weight: 300;
        color: #e4e4e4;
        line-height: 20px;      
        position: relative;
        z-index: 1;
        margin-top: 40px
  
    }


.footer-info a{
   color: #e4e4e4;

}


.footer a :hover{
    color:#ff483b;
 }



   /*--------------------------------------------------------------------------------
    	pagetop
    --------------------------------------------------------------------------------*/
    
    .pageTop {
        position: fixed;
        bottom: 0px;
        right: 0px;
        width: 40px;
        height: 40px;
        z-index: 9;
      }
  
      .pageTop>a {
        display: block;
        width: 40px;
        height: 40px;
        background: #dedede;
        border-radius: none;
        transition: all 0.3s;
        font-size: 0;/*---20240407--*/
        color: transparent;
      }
  
      .pageTop>a>span {
        display: block;
        width: 40px;
        height: 40px;
        position: relative;
      }
  
      .pageTop>a>span:before {
        position: absolute;
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        transform: translate(-50%, -50%);
        top: 20px;
        left: 15px;
        line-height: 1;
        text-align: center;
        border-top: 2px solid #9d928c;
        border-left: 2px solid #9d928c;
        transform: rotate(45deg);
      }
  
  
  /*-----------------------------
   content txt
  ---------------------------*/
  .Text-container {
    position: relative;
    padding: 30px 0;
    display: block;
    width: 100%;
   max-width:100%;
  
   overflow: hidden;
   margin: 15px auto;
   z-index: 2;
}


    .graph_head {
        padding: 18px 20px 10px 10px;
        float: left;
        width: 100%;
        display: block;
        margin-bottom: 10px;
        background-image: linear-gradient(to right, #e60027 0 2rem,#DDD  1rem 100%);
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 100% 2px;        align-items: center;
        justify-content: space-between;
     
    }
    
    .heading{
        font-weight: 700;
        line-height: 1.45;
        letter-spacing:2px;
        font-size: 2rem;
    }
.Text{
    font-weight: 400;
    line-height: 1.8;
    word-break: break-word;
    box-sizing: border-box;
    font-size: 1rem;
    display: block;
}


/** tabbar style 3 **/

.tab_style #v-pills-tab {
    float: left;
    width: auto;
    min-width: 120px;
    margin-top: 15px;
}

.tab_style #v-pills-tabContent {
    float: left;
    width: 80%;
    padding: 15px;
}

.tab_style .tabbar {
    display: flex;
}

.tab_style div.tabbar div.nav-pills .nav-link.active {
    background: #ff5722;
    color: #fff;
    border-color: #ff5722;
    font-size : 1.063em

}



.tab-content .txtB {
    margin: 0;
    line-height: normal;
   display: block;
   
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.8;
    word-break: break-all;
    padding: 0;
    background: #fff;
    z-index: 10;
  
    padding: 15px;
    position: relative;
}
 




.tab_style #v-pills-tab {
    float: left;
    width: auto;
    min-width: 120px;
}


.tab_style #v-pills-tabContent {
    float: left;
    width: 80%;
    padding: 0 20px;
}

 
.tab-content>.active {
    display: block;
}



/*-----------------

login
---------------*/
 .login_section {
     max-width: 640px;
     background: #fff;
     min-height: 540px;
     width: 100%;
     box-shadow: 0px 0 10px -8px #000;
     margin: 20px auto;
     padding: 0;
     border-radius: 10px;
     overflow: hidden;
 }
 
 .logo_login{
    background: url(../images/bg_page/login_image.jpg);
    background-position-x: 0%;
    background-position-y: 0%;
  padding: 50px 0;
  background-position: center center;
  position: relative; 
  display: block;
}
.logo_login::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(21, 40, 60, .8);
    top: 0px;
    left: 0;overflow: hidden;
}
 .login_section  em {
    color: #cf2828;
    font-style: normal;
    font-weight: normal;
    padding-right: 8px;
    display: inline-block;
    font-size: 1em;
  }

 
 .logo_login div {
     position: relative;
     z-index: 1;
 }
 
 .login_form {
     padding: 50px 50px;
     float: left;
     width: 100%;
 }
 
 .login_form form {
     float: left;
     width: 100%;
 }
 
 .field {  
      display: flex;
      margin: 10px 0px 0px 0;
      width: 100%;
      max-width: 100%;
      justify-content: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }
 .login_form form .field label.label_field {
    margin: 0 auto 0 0px;
  width: 115px;
  line-height: 45px;
  text-align: left;
  height: 45px;
  font-weight: 600;
  font-size: 1.145em;
 }
 

 
    .login_form form .field-block {
        display:block;
        margin: 30px 0px 0px 0;
        width: 100%;
        max-width: 100%;
        justify-content: center;
   
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
      }
 .login_form form .field input {
     border-top: none;
     border-left: none;
     border-right: none;
     border-bottom: solid #ddd 2px;
     max-width:100%;width:100%;
     float: right;
     padding: 10px;
     line-height: normal;
     font-weight: 300;
     margin-left:8px;
     transition: ease all 0.5s;
 }
 
 .login_form form .field input:hover,
 .login_form form .field input:focus {
     box-shadow: none;
 }
 
 .login_form .field label.form-check-label .form-check-input {
     width: auto;
 }
 

 
 .login_form .field label.form-check-label {
     margin-left: 20px;
     position: relative;
     top: 0;
 }
 
 .forgot {
     float: right;
     margin: 12px 8px 0 auto;
     position: relative;
     left: 0;
     padding: 8px 12px;
     color: #ff5722;
     display: block;
     border: #ff5722 solid 1px;
     cursor: pointer;
 }
 .main_bt {
    position: relative;
    min-width: 125px;
    max-width:125px;
    text-align: center;
    color: #fff;
    padding: 10px 25px;
    font-size: 1em;
    border-radius: 5px;
    border: none;
    transition: easeall 0.5s;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e7e7e7;
    justify-content: center;
    align-content: center;
    margin:30px auto 15px auto;
    clip-path: polygon(100% 0, 100% 100%, 5% 100%, 0 70%, 0 0);

    background-color: #313643}

.main_bt:hover {
    color:#e1d06a ;
    background-color: #000
}
/*----置中處理頁籤-------*/

.pagination_center {
	max-width: 100%;
	display: block;
    position: relative;
    clear: both;
	width: 100%;
	margin:20px auto 30px auto;
  }

  .pagination_center ul{
	left: 0;
	padding: 0;
	margin:0;
	list-style: none;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack:center;
	justify-content: center;
}

  
.pagination_center li {
	text-decoration: none;
	font-size: 0.938em;
	font-weight: 600;
	cursor: pointer;
	display: inline-block;
	text-align: center; 
	cursor: pointer;
  }

.pagination_r li a {
	text-decoration: none;
	color: #555;
	cursor: pointer;
	display: block;
	width: 100%;
	height: 100%;
}
.pagination_center label  {
	font-size: 1em;
}
.pagination_center input  {
	font-size: 1em;
	width: 1em;
	height: 1em;
}

 .pagination_center .form-select{
    margin: 0.625em 0.3125em 0 0.1875em;
	font-size: 1em;
    text-align: center;
    min-width: 85px;
  }

.pagination_center .arrow{
  border-radius: 0.1875em; 
  display: block;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  background-color: rgba(209, 209, 209, 1);
  opacity: 1;
  margin:0 0.25em;
}

.pagination_center .arrow >a{
    display:inline-block;
    width:100%;
    height:100%;
}

    .pagination_center .arrow.active {
        background-color: rgb(49 54 67);
        color:#fff;
    }

.pagination_r .arrow:hover,
.pagination_r .arrow:focus,
.pagination_center .arrow:hover,
.pagination_center .arrow:focus {
	-webkit-box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.3);
	-webkit-transform: scale(1.02);
	-moz-transform: scale(1.02);
	transform: scale(1.02);	
}
 
  .pagination_r li a.arrow img ,.pagination_center .arrow img{
    width: 0.5em;
    max-width: 0.5em;
   
   }

   .pagination_center  .lastarrow img{
    width:0.6875em;
    max-width: 0.6875em;
    height: 100%;

  }
  

  @media screen and (max-width:667px) {
  .pagination_center .arrow {
    width: 1.875em;
    height: 1.875em;
    line-height:1.75em;}
  }

/*-------------------
     message
  ----------------*/
.profile_contant {
    float: left;
    padding: 20px 20px;
    width: 100%;
    background-color: #f7f5f5;
    border-radius: 10px;
    border: #212529 solid 2px;
    margin: 20px auto 0 auto;
}

.profile_inner {
    margin: 0px auto 10px auto;
}

    .profile_inner h3 {
        font-weight: 600;
        text-transform: none;
        font-size: 1.45rem;
        margin-bottom: 10px;
        color: #000;
        font-weight: 700;
    }

    .profile_inner .time {
        color: #3397cf;
        margin-bottom: 5px;
        font-size: 0.938rem;
        font-weight: 500;
    }

    .profile_inner .name {
        color: #ff5722;
        margin-bottom: 5px;
        font-size: 0.938rem;
        font-weight: 500;
    }


.profile_contant .list-unstyled {
    list-style: none;
    list-style-type: none;
    max-width: 100%;
    margin-top: 10px
}

    .profile_contant .list-unstyled li {
        float: left;
        font-size: 0.938rem;
        color: #58718a;
        padding-bottom: 10px;
        width: 100%
    }

.ontact_inner span {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.938rem;
}

.msg_list_main {
    float: left;
    width: 100%;
    max-width: 100%;
}

    .msg_list_main ul {
        list-style: none;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
    }


        .msg_list_main ul li {
            padding: 10px 15px;
            border-bottom: solid #eee 1px;
            line-height: normal;
            font-size: 14px;
            border-left: solid 5px #666;
            position: relative;
            max-width: 100%;
            width: 100%;
        }


.time_ago {
    position: absolute;
    right: 0px;
    top: 20px;
    color: #99abb4;
    display: inline-block;
}

.time_ago_f {
    color: #99abb4;
    display: inline-block;
    font-style: normal;
    font-weight: 700;
}

    .time_ago_f:after {
        content: "．";
    }

.msg_list_main ul li span p {
    margin: 0;
}

.messageBox {
    display: inline-block;
}

    .messageBox .name_user {
        font-size: 1rem;
        font-weight: 500;
        color: #99abb4;
        float: left;
        width: 100%;
        margin-bottom: 0;
        margin-top: 5px;
        position: relative;
    }

        .messageBox .name_user::before {
            content: "留言者：";
            font-size: 0.738rem;
            left: 0;
            top: 0;
        }

    .messageBox .msg_user {
        font-size: 1em;
        font-weight: 400;
        color: #455a64;
        padding: 10px 0;
        letter-spacing: 0.5px;
    }

.msg_list_main ul li > span:nth-child(1) {
    margin-right: 20px;
}

.msgCol {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    border-bottom: #ddd solid 1px;
    padding: 5px;
}

    .msgCol:last-child {
        border-bottom: none
    }

.name_card {
    width: 60px;
    height: 60px;
    background-color: #3397cf;
    color: #fff;
    font-weight: 700;
    border-radius: 100%;
    float: left;
    margin-right: 10px;
    position: relative;
    padding: 5px;
    display: inline-block;
}

.admin_card {
    width: 160px;
    float: left;
    margin-right: 5px;
    color: #ff5722;
    display: inline-block;
    overflow: hidden;
    height: 50px;
    padding: 5px;
}

.replyBtn {
    background: #ff5722;
    color: #fff;
    cursor: pointer;
}

.name_txtBlock {
    font-style: normal;
    font-size: 1.5rem;
    text-align: center;
    margin: auto;
    position: relative;
    top: 50%;
    line-height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 1.5rem;
    transform: translateY(-0.75rem);
}

.msg_list li:nth-child(4) {
    border-bottom: none;
}

.message_head {
    float: left;
    width: 100%;
    padding: 10px;
    display: block;
    color: #1c1e21;
    background-color: #f7f5f5;
    line-height: 1.358;
    word-break: break-word;
    word-wrap: break-word;
    border-bottom: 2px solid #cfcfcf;
    margin-bottom: 15px;
    font-size: 1.35rem;
}


.messageNum {
    padding-left: 8px;
    padding-right: 8px;
    display: block;
    unicode-bidi: isolate;
    color: #1c1e21;
    font-size: 15px;
    line-height: 1.358;
    word-break: break-word;
    word-wrap: break-word;
}

.replyBox {
    display: flex;
    flex-wrap: wrap;
}


.messageItem {
    background: #fff;
    padding: 10px 0;
    margin: 10px 0;
    border-radius: 5px;
    position: relative;
    width: 100%;
    display: block;
}

.user_replyBox {
    background: #fff;
    box-sizing: border-box;
    cursor: text;
    padding: 3px;
}

.replyBtn {
    background: #ebebeb;
    color: #6c757d;
    font-weight: 600;
    border-radius: 10px;
    font-size: 1rem;
    padding: 5px 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    max-height: 35px;
    display: block;
    width: 120px;
    border: none;
    border-radius: 5px;
    border: #b6b6b6 solid 1px;
}

.replyInput {
    padding: 10px;
    margin-top: 5px;
    width: 100%;
    border: none;
    border-radius: 5px;
    border: #a5a5a5 solid 1px;
    margin-bottom: 10px;
}

.replyItem {
    background: #ebf7ff;
    margin: 10px auto;
    border-radius: 8px;
    padding: 10px;
    position: relative;
    width: 100%;
    display: block;
}


.replyBox {
    display: none;
    margin-top: 5px;
}

.deleteBtn {
    max-width: 150px;
    text-align: center;
    margin: 10px auto;
    display: block;
    color: #585858;
    padding: 5px 12px;
    font-size: 0.938rem;
    letter-spacing: 2px;
    border: #a5a5a5 solid 1px;
}


/*-----------
social icon 

---------*/
.share {
    float: right;
    position: absolute;
    margin-top: 15px;
    margin-left: auto;
    z-index: 3;
    top: 5px;
    right: 10px;
}

.social {
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0;
    visibility: hidden;
    min-width: 100%;
    width: 100%;
    transform: translateZ(0);
    transform: translateX(0px);
    transition: transform 0.35s ease;
}


.social--active {
    visibility: visible;
    transform: translateZ(0);
    transform: translateX(-48px);
    transition: transform 0.35s ease;
}

.share-icon {
    display: inline-block;
    margin-left: 2px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
    margin-bottom: 7px;
    transition: all 0.3s ease;
    outline: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

    .share-icon img {
        max-width: 95%;
        width: 95%;
        border: none;
        height: 100%;
        display: block;
        object-fit: contain;
        opacity: 1;
        margin: auto;
        text-align: center;
        padding: 5px;
    }



    .share-icon:hover, .share-icon:focus {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.24);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

.facebook {
    background-color: #3b5998;
}

.googleplus {
    background-color: #dc4335;
}

.lineplus {
    background-color: #03bd02;
}

.linkplus {
    background-color: #ef8943
}

.linkprint {
    background-color: #65b1ea
}


.share-svg-icon-fb {
    position: relative;
    fill: #fff;
    stroke-width: 0.2px;
    FONT-WEIGHT: 200;
    width: 25px;
    height: 25px;
    color: #fff;
    margin-bottom: 2px;
    margin: 7px auto 0 auto;
}

.share-svg-icon-line {
    position: relative;
    fill: #fff;
    stroke-width: 0.2px;
    FONT-WEIGHT: 200;
    width: 29px;
    height: 29px;
    color: #fff;
    margin-bottom: 2px;
    margin: 5px auto 0 3px;
}

.share-svg-icon-share {
    position: relative;
    fill: #666;
    stroke-width: 0.2px;
    FONT-WEIGHT: 200;
    width: 24px;
    height: 24px;
    color: #666;
    margin-bottom: 2px;
    margin: 7px auto 0 0;
}
/*----title----*/
.ir_title_tw {
    margin-top: 5px;
    color: #fff;
    -webkit-transform: translateX(-0.1em);
    transform: translateX(-0.1em);
    font-size: 2rem;
    font-family: 'Noto Serif TC', serif;
    padding-bottom: 10px;
}

.ir_title_en::after {
    content: "";
    background-color: #cbaa95;
    width: 8px;
    height: 8px;
    position: absolute;
    left: 0px;
    top: 0.8em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    border-radius: 50%;
}

.ir_title_en {
    position: relative;
    line-height: 1.6;
    font-size: 19px;
    padding-left: 15px;
    font-family: 'Noto Serif TC', serif;
    color: #cbaa95;
    display: inline-block;
}

.ir_title_sec {
    margin-bottom: 30px;
    padding-top: 30px;
    position: relative;
    max-width: 100%;
    border-bottom: 1px solid #E2E1E0;
}

.hash-tag-il {
    font-family: 'Noto Serif TC', serif;
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out;
    display: inline-block;
    font-size: 1em;
    line-height: 1.4;
    letter-spacing: 1px;
    color: #c9deff;
    display: inline;
    text-align: right;
    float: right;
    padding-top: 3px;
}


.warning_Txt {
    color: #cf2828;
}

.Mar_Left_auto {
    margin-left: auto;
}

.Mar_Right_auto {
    margin-right: auto;
}

.Mar-Top5px {
    margin-top: 5px;
}

.Mar-Top10px {
    margin-top: 10px;
}

.Mar-Bom10px {
    margin-bottom: 10px;
}

.Mar-R10px {
    margin-right: 10px;
}

.w5p {
    width: 5% !important;
}

.w10p {
    width: 10% !important;
}

.w15p {
    width: 15% !important;
}

.w20p {
    width: 20% !important;
}

.w25p {
    width: 25% !important;
}

.w30p {
    width: 30% !important;
}

.w35p {
    width: 35% !important;
}

.w40p {
    width: 40% !important;
}

.w45p {
    width: 45% !important;
}

.w50p {
    width: 50% !important;
}

.w55p {
    width: 55% !important;
}

.w60p {
    width: 60% !important;
}

.w70p {
    width: 70% !important;
}

.w75p {
    width: 75% !important;
}

.w80p {
    width: 80% !important;
}

.w85p {
    width: 85% !important;
}

.w90p {
    width: 90% !important;
}

.w95p {
    width: 95% !important;
}

.w100p {
    width: 100% !important;
}

.w170px {
    width: 170px !important;
}

.w160px {
    width: 160px !important;
}

.w125px {
    width: 125px !important;
}

.Min-w400px {
    min-width: 400px;
}

.Pad10px {
    padding: 10px;
}

.BK_A7CAD7 {
    background: #A7CAD7;
}

.numeric-list {
    list-style: none;
    counter-reset: li;
    padding-left: 0;
    margin-left: .625rem;
    color: #262626;
}

    .numeric-list > li {
        padding: 4px 12px 4px 18px;
    }

.WhiteContent {
    background: #fff;
    padding: 6px;
    line-height: 1.65;
    border-radius: 8px;
}

.Mar_0 {
    margin: 0;
}