@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

    /*CSS Document*/
    /*import font style*/
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Thin.otf) format('opentype');
        font-weight: 100;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Light.otf) format('opentype');
        font-weight: 300;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Regular.otf) format('opentype');
        font-weight: 400;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Medium.otf) format('opentype');
        font-weight: 500;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Bold.otf) format('opentype');
        font-weight: 700;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans SC;
        src: url(../fonts/NotoSansSC-Black.otf) format('opentype');
        font-weight: 900;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Thin.otf) format('opentype');
        font-weight: 100;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Light.otf) format('opentype');
        font-weight: 300;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Regular.otf) format('opentype');
        font-weight: 400;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Medium.otf) format('opentype');
        font-weight: 500;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Bold.otf) format('opentype');
        font-weight: 700;
        font-style: normal;
    }
    
    @font-face {
        font-family: Noto Sans TC;
        src: url(../fonts/NotoSansTC-Black.otf) format('opentype');
        font-weight: 900;
        font-style: normal;
    }
    
    @font-face {
        font-family: Ropa Sans;
        src: url(../fonts/RopaSans-Regular.ttf) format('opentype');
        font-weight: 300;
        font-style: normal;
    }
    /*common*/
 
    
    html:lang(zh-Hant) body {
        font-family: Noto Sans Tc;
    }
    
    html:lang(zh-Hans) body {
        font-family: Noto Sans Sc;
    }
    
	#swiper .big-num2,
	#swiper .big-num {
  font-family: 'Ropa Sans', sans-serif;
}
	
    

a{ text-decoration: none;}
*, button{ outline:0;}

a:focus, button:focus{
    outline: none;
}

*, button{ outline:0;}

.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}
button:focus {outline:0;}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color:0;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0) inset;
  outline: 0 none;
}
.form-select,
.form-check-input,
.form-control:focus { 
  outline: none !important;
  box-shadow: none !important;
}  

.p0{ padding:0; }
.m0{ margin:0;}
.m5{ margin:5px;}
.m10{ margin:10px;} 
.p5{ padding:5px}
.p10{ padding:10px}
.p15{ padding:15px}
.p20{ padding:20px}

 .pb5{ padding-bottom:5px;}
 .pb10{ padding-bottom:10px;}
 .pb20{ padding-bottom:20px;}

 .mb5{ margin-bottom:5px;}
 .mb10{ margin-bottom:10px;}
 .mb20{ margin-bottom:20px;}

 .mt5{ margin-top:5px;}
 .mt10{ margin-top:10px;}
 .mt20{ margin-top:20px;}
 .ma0{ margin:0 auto;}
 
 .pt0{ padding-top:0;}
 .pb0{ padding-bottom:0;}
 
.text-white {    color: #fff ;}
.text-red {    color: #f00;}
.text-btn {
    color: #0089b8;
} 

 .text-blue{ color:#0d31a2}
 .text-dblue{ color:#009dcd}
 .text-dred{ color:#a30d14}
 .text-og{ color:#fb9839}
 .text-grey{ color:#444}
 .text-lgrey{ color:#999}
 .text-dgrey{ color:#222}
 .text-black{ color:#000;}
 
 .text-orange{ color:#ff9b1a;}
 .text-orange.lock:hover{ color: #ff9b1a;}
 .text-green{ color:#0ed5aa;}
 .text-dgreen{ color:#227a45;}
 
 
 .btn-primary{ background-color:#0d31a2 !important;}
  .fs32{
    font-size: 32px;
}

 .fs24{
    font-size: 24px;
}

.fs22{
    font-size: 22px;
}
.fs20{
    font-size: 20px;
}
.fs18{
    font-size: 18px;
}


.fs12{
    font-size: 12px;
}
.fs14{
    font-size: 14px;
}

.fs16 {   font-size: 16px;}
.bold{ font-weight:bold}

  a:hover{ text-decoration:none}
  
.mbtn,
.ani{

 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}
	
.mbtn.hover{ opacity:0.7;}


html:lang(zh-hant) body {
  font-family:Noto Sans Tc
}
html:lang(zh-hans) body {
  font-family:Noto Sans Sc
}
html,
body {
  width:auto!important;
  overflow-x:hidden!important;
}
body {
  overflow-x:hidden;
  font-size:.875rem
}
.container {
  max-width:1230px
}
h2,
h3 {
  font-weight:400
}
h2 {
  font-size:2rem;
  font-weight:600
}
h3 {
  font-size:1.5rem
}
h4 {
  font-size:1.125rem
}
p {
  font-size:1rem
}
span {
  display:block
}
.opacity-0 {
  opacity:0!important
}


.text-primary { 
  color:#3a9aa2 !important;
}

.text-secondary {
    color: #659b2c;
}

.text-warning {
    color: #E76908;
}

.text-success {
    color: #1E98C8;
}

.text-info {
    color: #155098;
}

.bg-primary {
    background-color: #F7FAFF;
}

.bg-secondary {
    background-color: #F2F8EB;
}

.bg-warning {
    background-color: #FFF8EA;
}

.bg-success {
    background-color: #EBFBFF;
}

.bg-info {
    background-color: #EBEFF8;
}

.green,
.green::after,
.green::before {
    background-color: #659b2c;
}

.message {
    background-color: #ccd363;
}

.message::before {
    background-color: #7ac44b;
}

.message::after {
    background-color: #74d6ef;
}

.orange,
.orange::after,
.orange::before {
    background-color: #ffcb4a;
}

.orange .box {
    background-color: #fff2d5;
}

.blue,
.blue::after,
.blue::before {
    background-color: #20a8e2;
}

.blue .box {
    background-color: #bdedfb;
}

.dblue,
.dblue::after,
.dblue::before {
    background-color: #0E55AD;
}

.dblue .box {
    background-color: #E2EAF5;
}

.purple,
.purple::after,
.purple::before {
    background-color: #8965ad;
}

.purple .box {
    background-color: #d9e5f3;
}

.grey {
    background-color: #e2eaf5;
}

.green .box {
    background: #daecc4;
}


.cross{ text-decoration: line-through}
.noupp{ text-transform:none}
.hide{ display:none !important} 
.itc{ font-style:italic}

.pos-rel{ position:relative}

table.vd td,
table.vd th{ vertical-align: middle}
.covImg { 
 -moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat: no-repeat;
display:block;
background-position: 50% 50%;
position:relative; 
} 

.cntImg { 
 -moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;
background-repeat: no-repeat;
display:block;
background-position: 50% 50%;
position:relative; 
} 
.cntImg.bps_bottom,
.covImg.bps_bottom{background-position: 50% 100%;}
 
 .lodingDiv{     
 	width:100%; height:100%;
  position:absolute; top:0; left:0;
  background:rgba(255,255,255,0.95) url(../images/loading.gif) no-repeat 50% 45%;
  z-index:700;
}
.fulodingDiv{     
 	width:100%; height:100%;
  position:fixed; top:0; left:0;
  background:rgba(255,255,255,0.95) url(../images/loading.gif) no-repeat 50% 45%;
  z-index:8000;
}


.admin_box{ position:fixed; left:5px; top:5px; display:block; z-index:50000000;
background:rgba(0,0,0,.8);
padding:3px 5px 3px 14px; 
border-radius:8px;
color:#fff; line-height:30px;
font-size:12px;
}
.admin_box .btn{border-radius:8px; color:#fff; background:#217500; margin:0 0 0 5px; padding:2px 5px 2px 5px; font-size:12px;}
.admin_box .btn:hover{ color:#fff !important; opacity:0.7}


#fixArea{ position:fixed; z-index:5000; bottom:0; right:0px; display:block; height:80px; width:40px; border:0px solid #f0f;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 -moz-opacity:0;
 -khtml-opacity: 0;
 opacity:0;
}
#fixArea.on{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 -moz-opacity:1;
 -khtml-opacity: 1;
 opacity:1;
}
#fixArea a{background: rgba(44,44,44,.2); padding:0; } 

#fixArea a i{ color:#fff; width:40px; height:50px; text-align:center; line-height:50px; font-size:32px; }

#fixArea{ 
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;	
 transition: all .2s ease-in-out;}
 
  
#ck_pop{ position:fixed; width:100%; bottom:0; left:0; height:auto; display:block; z-index:14000; border:1px solid #ccc; background:rgba(0,0,0,0.7);}
#ck_pop p{ padding:10px 30px 10px 10px; font-size:16px; color:#fff;}
#ck_pop #ckbtn{ position:absolute; top:5px; right:10px; color:#fff; cursor:pointer}

.last_item{ visibility:hidden}


.cusModal{}

.cusModal.nohead .modal-header{ border:0; padding:15px 15px 0 0}
.cusModal.nohead .modal-body{  padding:0 15px 25px 25px} 
.cusModal .modal-content{ 
border-radius:0; border:4px solid rgba(255,255,255,.3) }