/* 重設--------------------------------------------------- */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,figure { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,th { font-size: 1em; font-weight: normal; font-style: normal; }
abbr,acronym { border: 0; }
ul,ol { list-style: none; }
fieldset,img { border: none; } 
/* 基本--------------------------------------------------- */
a {	color:#222;cursor:pointer; } 
a:link, a:visited, a:active { text-decoration: none; }
a,a:hover,a img,a:hover img,img , li,li:hover,.ad li:before
{-webkit-transition:all 0.2s ease-in-out;	-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}
h1 { font-size: 30px ; font-weight: bold;}  
hr{height:1px;border:none;border-top:1px solid #ddd;margin:15px 0}
abbr,acronym { border-bottom: 1px dotted black; }  
acronym:after { content: " (" attr(title) ")"; }  
pre,code,address,caption,cite,code,em,strong {}
body {font-family:'Prompt',Arial, sans-serif;overflow-x:hidden;font-size:1; color:#5c5c5c;   }	
html,body{height:100%;height:100%; }
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}  
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
a, area, button, input, label, select, summary, textarea { -ms-touch-action: manipulation;touch-action: manipulation;}
:after,:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} 
/* LAYOUT CLASS--------------------------------------------------- */
.clear,.row ,section,.container{ clear: both; } 
.left,.ad li{ float: left; }
.right { float: right; }
.flex { display:flex; display:-webkit-box;display:-moz-box;	display:-ms-flexbox; display: -webkit-flex; flex-wrap: wrap;}
.flex-md{ -webkit-align-items: center;align-items: center;-webkit-justify-content: center; justify-content: center;} 
.flex-md-row-reverse { flex-direction: row-reverse ;}
.center,.ad,.tt, .btn { text-align: center; }
.small {font-size: 14px;}
.hidden,.visible-xs{display: none;}
.relate,.banner, .block,.thumimg{position:relative;}
.flow ,.mask,.tt ,.banner-link {position:absolute}
.row, .thumimg {overflow:hidden}  
.mask {-webkit-transition:transform 0.2s;-webkit-transition:-webkit-transform 0.2s;transition:-webkit-transform 0.2s;transition:transform 0.2s;transition:transform 0.2s, -webkit-transform 0.2s;-webkit-transform:scale(1);transform:scale(1);} 
 .thumimg:hover img{-webkit-transform:scale(1.08);transform:scale(1.08);} 
 {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .mb-2{margin-bottom: 2em;}
 
/*============共用============*/   
.wrapper{ margin:0 auto; width:1200px }   
.contain{ padding-top:50px ;padding-bottom:50px  } 
.fleximg{display:block;max-width:100%;margin:0 auto;}
.thumimg img,.allimg{width: 100%}
.inimg {display: inline-block;vertical-align: middle}
.col-6 ,.promolist li{width:50%; }
.col-4,.bt li{width:25%; }
.col-8{width:75%; }
.col-5{width:20%; }
.col-3  {width:33.333%; }  
.col-9{width:66.666%; } 
.col-45{width:45%; }  
.col-55{width:55%; } 
/*============header============*/  
header{background:#25aae1;padding:10px 20px;font-size:1.2em; } 
.banner-link{ text-align: center;bottom:30%;left:16%;}
header a,.num{color: #fff;}
/*--index--*/ 
section::after,section::after{content:'';clear:both; }
.link{background:#fff;padding:30px 10%;margin-top:-80px;position: relative;z-index: 3}
 .home-bg{background:url(../images/bg.jpg) no-repeat  center top;background-size: cover;padding:3% 0 0 0; }
.about{background:url(../images/promobg.jpg) no-repeat  center top;background-size: cover;padding:3% 0;margin-top: 50px;}
.about p{margin-top:15px;} 
.col-L {padding-right: 20px;}
/*--按鈕--*/  
.btn,.btn-w {display: inline-block;background:#25aae1;  padding: 10px 0; margin:5px; width:200px;text-align: center; } 
.btn:hover{background: #666;}
.btn-w{background: #fff;color:#25aae1;border: 1px solid #25aae1; }
.btn-w:hover{background:#25aae1; color: #fff}
.btn-w2{color:#33c85d;border: 1px solid #33c85d;}
.btn-w3{color:#f0ba38;border: 1px solid #f0ba38;}
.btn-w4{color:#f35177;border: 1px solid #f35177;}
.btn2,.btn-w2:hover{background:#33c85d;}
.btn3,.btn-w3:hover{background:#f0ba38;}
.btn4,.btn-w4:hover{background:#f35177;}
.link .btn,.link .btn-w{width: 24%;margin:0.5%; }
.promolist{margin:20px 0;}
.promolist a{display: block;margin:10px;}
.tt{background: rgba(35,175,227,0.8);left:0;right: 0;bottom: 0;padding: 10px;}
footer{background:#444; padding:15px 0;font-size: 15px;} 
footer a:hover,footer a{  text-decoration:underline;color: #fff  } 
.ft-list a{padding: 5px ;margin: 10px;}

.num{background:#25aae1;border-radius: 50%;width: 30px;height: 30px;text-align: center;display: inline-block;line-height: 30px;}
.spot li{list-style: disc outside ;margin: 10px 0;margin-left: 30px;}
.bg-b{background:#25aae1;}
.tabs li{border-right: 1px solid #fff;}
.tabs li.active{background: #eee;}
.tabs a{color: #fff;font-size: 1.2rem; padding: 20px 0;display: block;font-weight: bold;}
.tabs li.active a{color:#333 ;}
/*pagetop*/
.pagetop{padding:5% 0 10% 0; background-image:url(../images/pagetop.jpg) ;background-position: center ; background-size:cover;background-repeat: no-repeat;}
.pagetop h2{font-size: 2.8rem;}
.p{margin: 15px 0;}
ol>li{margin: 5px 0;}
.block{padding:0 20px 40px 20px;}
 /*--word--*/   
 .bg{background: #eee}
.w1{ font-size:2em;  clear:both ;color:#25aae1 }	
.w2 { font-size:1.5em;}
.w3,header,.about,.btn,.mask,footer,.promolist a{color:#fff;} 
.w4,.btn,.btn-w{font-weight: bold;}
 .w5{color: #25aae1;}
@media screen and (max-width:1280px) {  
.wrapper {width:900px; }	
.logo{width: 150px} .link{padding:20px;} 
} 
 
 @media screen and (max-width:1024px) {  
 .link{margin-top:-30px;}
.banner-link{bottom:50px;}
.pagetop h2{font-size: 2rem;}
} 
@media screen and (max-width:970px) { 
.wrapper {width:730px; } 
.w1{font-size:1.5em;}

} 

@media screen and (max-width:768px) {  
.col-md-12 {width:100%; } 
.wrapper {width:100%; }
.col-L{padding-right:0;margin: 20px 0;} 
 
.link .btn,.link .btn-w{width: 48%;  margin: 1%;padding: 10px;}
.banner-link{bottom:40px;}
}  
@media screen and (min-width:560px) and (max-width:768px) {
.wrapper {padding:0 40px; } 
}  

@media screen and  (max-width:559px) {
.col-sm-12 ,.promolist li{width:100%; }	 
.logo{width: 120px} 
.contain{padding-top: 20px;padding-bottom: 20px;}
.wrapper {width:100%;padding:0 20px;font-size:0.9em;}
.about{background-position: 20% top; padding: 30px 0;}
.link {margin-top:0;padding:20px 0;}
 .banner-link a{width:45%;}
 .banner-link{bottom:10px;width: 100%;left:0;right: 0;padding:0 15px;}
.banner img{max-width: 130%;margin-left:-5%; }
.tabs a{font-size: 1rem;}
}