body{padding:0;overflow-x:hidden;font-size:16px; color: #444444;line-height: 1.5; }
.container{width:1170px;margin:0 auto; }
img,a,p,ul,li,div,input,h1,h2,h3,h4,h5,h6,span,textarea,table,tr,td{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding: 0}
body {font-family: Arial, Helvetica, sans-serif; }
a{text-decoration:none; color:#333;  }
select,textarea,input,a:hover,a:focus,button{outline:none}
.img-fluid{max-width:100%; display:block;}
ul{padding-left:0;list-style-type:none;}
body,p,ul{margin:0;}
.clr{clear:both}
.scroll_fix{overflow-y:hidden} 
table{border-collapse: collapse;width: 100%}
.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-center{-webkit-align-items: center;align-items: center;}
.flex-bt{  -webkit-align-items: flex-end; align-items: flex-end;}
.flex-space-between{ justify-content: space-between;}
.flex-md-row-reverse { flex-direction: row-reverse ;}
.flex-container { align-content:stretch;} 
.flex-1 { flex: 1 0 0%;}
.col-auto { flex: 0 0 auto; width: auto;}
.mr-l{margin-left:auto;}
.col-6 {width: 50%;}
.col-3  {width: 33.33%;}  .col-9{width: 66.66%;}  
.col-4 {width: 25%;}  .col-8 {width: 75%;}
.col-45 {width: 45%;}  .col-55 {width: 55%;}
.col-1{width: 16.66%} .col-5 {width: 20%;} 
.col-80 {width: 80%;} 
.col-12 {width: 100%;} .col-10{width:90%;}
.col-R{padding-left: 5rem;} .col-L{padding-right: 20px;}
a,.mask,li:hover, .btn,nav li>a:after, .thumbimg img,.block {transition: all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition: all 0.3s ease;}
.thumbimg:hover img.col-12 {-webkit-transform:scale(1.1);transform:scale(1.1);}
.row{margin: 0 -10px;}
.row>li{padding:10px;} 
hr{border: 0;border-top:1px solid #bfbfbf ;background: none;}
.center-img{margin: 0 auto;}
img{height: auto;}
/*---------------------------------------------------------*/  
header{position: absolute;top: 0;left: 0;right:0 ;background: rgba(255,255,255,0.6); z-index: 9;backdrop-filter:blur(8px);}
.logo {display: inline-block;margin-right: auto;padding: 5px 0; font-size: 30px;color: #000;} 
.topnav li>a{padding:24px  1.5rem; position: relative; display:block; color: #000; border-bottom: 2px  solid transparent;  }   
.topnav li>a:hover{color: var(--primary-color); } 
.topnav ,.topnav li>a{height: 100%; }
.topnav li.active>a,.topnav li.active>a:hover{color:  var(--primary-color); border-bottom: 2px  solid  var(--primary-color);}
 
#nav-icon{ z-index:1000;position:absolute;right:0;top:0; height:50px;width:50px; 
  -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer}
#nav-icon span{ background-color: #000; height:2px;width:80%;border-radius: 9px; opacity: 1; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#nav-icon span:nth-child(1) {top:20px;}#nav-icon span:nth-child(2) {top:30px;}#nav-icon span:nth-child(3) {top:40px;}
#nav-icon.open span:nth-child(1) {top:30px;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);}
#nav-icon.open span:nth-child(2) {opacity: 0;left: -60px;}
#nav-icon.open span:nth-child(3) {top:30px;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}
 
.all-height{height:100%;}
.btn{padding:10px 15px;text-align: center;margin: 2px auto;  display:inline-block;background: var(--primary-color);  color: #fff;}   
.banner{ color: #fff; background-image: url(../images/banner.webp);background-repeat:  no-repeat;background-position:  center  bottom;
 position: relative; background-size: cover;padding:9em 0  ; overflow: hidden; font-size: 1.1em; text-align: center; font-size: 2rem;} 

 .banner-title{font-size: 3rem; text-shadow: 0 10px 20px rgba(0, 0, 0 ,0.2);}
.section-title{ margin-bottom: 1.5em}
.section-title .sec-tt{ font-size: 2em;line-height: 1;color: #c8c8c8;}

.section-title::after{content:'';width: 1px ;height: 40px;background: var(--primary-color); display: block;margin: 8px 0;}
.center.section-title::after {margin: 8px auto;}
 .title{font-size: 1.5em;}
 .sec-tt{text-transform:uppercase; line-height: 1.2;}
.sec-title{font-size: 1.2rem ;font-weight: bold;}

 .about{background: url(../images/about-bg.webp) no-repeat center;}
 .about-acontain{width: 60%;margin:0 auto; text-align: center;  }

 
 .section-title  img{vertical-align: middle;display: inline-block;}
.title-block{border-right:1px solid  #333;padding-right: 1em;display: inline-block;vertical-align: middle;}
.banner .title-block{border-right:1px solid  #fff; }

/*產品品牌*/
.brand-list li{margin-left:-1px ;margin-top: -1px;  }
.brand{border: 1px solid #aaa;position: relative;padding: 16px;height: 100%; }
.brand:hover{border: 1px solid var(--primary-color); z-index: 2; }


 .pagetop{background: url(../images/pagetop.webp) no-repeat center;padding:10rem 0 7rem 0  ;  text-align: center;} 
 .pagetop-title{font-size: 3rem;}

 

/*404*/
.not-found{margin-top: 8rem; text-align: center; line-height: 1.2;}
.en{font-size: 144px; font-weight: 900;}
 


.btn:hover {background-color: #333;}
.box{box-shadow: 0 0 15px rgba(0, 0, 0 ,0.2);}

 footer { padding: 5rem 0 ; background-color: #f2f6f7;}  
 .footer-title{font-size: 1.2em;font-weight: bold;margin-bottom: 16px; border-bottom: 1px solid var(--primary-color); display: inline-block;}
 .footer-menu a, .sns-list a{ margin: 8px 8px 8px 0;display: inline-block; color: #555;}
 .footer-menu a:hover{color: #000;}
 .sns-list svg {width: 45px;height: 45px;fill:#555 }
 .sns-list a:hover svg{fill:#000  }
 .copyright{border-top: 1px solid #aaa; padding-top: 2rem;margin-top: 2rem; font-size: 0.9em;}


.content{padding: 15px;}   
  
.main{padding-top:4rem;padding-bottom:4rem; }
.mask{ left: 0;right:0; bottom: 0;position: absolute;color:var(--white); padding:10px 15px;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } 
 
.title { line-height: 1.2; font-size: 2rem;font-weight: bold;}     
  
.border{border-radius: 8px; }
.p {margin-bottom:0.5em ;}   
.spot li{background: url(../images/spot.png) no-repeat left 5px ; padding-left:25px;margin:5px 0;} 
.spot {margin: 10px 0;}  
 

/*--------------------------------------------------------*/  
:root {
  --primary-color: #f08300;
  --secondary-color:#5bb5ae; 
  --white:#fff;
  --h2: 2rem;
}
.h2{font-size:2rem;}
.bg-w{background-color: #fff;}   
.w1{color: #ffea00;}
.w-white{color:#fff;} 
.bg{background: url(../images/bg.jpg) no-repeat center #000000; background-attachment: fixed;}   
 .w-b{color: #0068b7;}
 .w-grey{color: #c8c8c8;}
 
.hidden,.thumbimg{overflow:hidden;}
 nav a,.center {text-align:center;}
.inline,.pagenav a{display:inline-block;}
#nav-icon span,.thumbimg {display: block;}
#nav-icon,.down,.hidden-md,.hidden-lg{display:none}
nav>a, .inline{vertical-align: middle;}
 .relate, .thumbimg {position:relative;}
#nav-icon span,.topnav li>a:after , .mask {position:absolute;}
.bg, .bg-cover{background-position:center;background-size:cover;background-repeat: no-repeat;}
a {cursor: pointer;}
.btn, .w-bold,.tt{font-weight: bold;} 
.w2, .tt {font-size:1.8rem;line-height: 1.2;}
.w3 {font-size:1.2rem;}
.num{font-size: 3.5rem;line-height: 1 ; display: inline-block;}
 
.mb-3{margin-bottom:2rem ;}  .mb-2{margin-bottom:1.2rem ;} 
.mt-3{margin-top:2rem ;}  .mt-2{margin-top:1.2rem ;}
.py-3{padding:2rem 0;}   
.l1{line-height: 1.1;}
.pb-0{padding-bottom: 0;}   .pt-0{padding-top: 0;}  
.pb-3{padding-bottom: 2rem;} .pt-3{padding-top: 2rem;}
.pr-2{padding-right: 1.2rem;}
.py-2{padding: 20px 0;} .p-2{padding: 20px ;}
.pt-0{padding-top: 0;}


/*--------------------------------------------------------*/  
 
@media screen and (min-width:900px) and (max-width:1200px){ 
.container{width:850px;}    
 } 
/*---------------------------------------------------------*/
@media screen and (max-width:1200px){ 
  .logo {max-width:180px;} 
 .col-xl-9{ width:66%;}
 .col-xl-6{ width:50%;}
 .col-xl-12{ width:100%;}  
 .topnav li>a{padding: 15px; }
}
 
@media screen and (max-width:899px){
  .container{width:670px;} 
.col-lg-12 { width:100%; padding: 0}	
.col-lg-6 { width:50%; padding: 0}	
.col-lg-9 { width:66.66%; padding: 0}	
.col-lg-3{width:33.33%; padding: 0} 
#nav-icon ,.visible-lg{display:block;}  

.scroll_fix nav{height: 100vh;}
#nav-icon ,.hidden-lg{display:block;}    
.topnav li>a{padding: 10px 0;border-bottom: 1px dashed rgba(0,0,0,0.2);}
.topnav, .down,.topnav li>a::after{display:none}  
.topnav{ position: fixed;left:0; right:0;bottom: 0; z-index:999; padding-top:50px ; background: rgba(255,255,255,0.9);height: 100vh; } 
/*

.topnav li>a{padding: 10px 0;border-bottom: 1px dashed rgba(0,0,0,0.2); color: #fff;} 
.topnav, .down,.topnav li>a::after,.hidden-lg{display:none} 
.topnav{overflow: auto;}
.topnav{height: 100%;position: fixed;left:0;top:0;right:0;z-index:999; padding-top:60px ; background: rgba( 0,0,0,0.9) ; }
.topnav li {position: relative;}  
.topnav>li{border-top: 1px dashed #2b3849;} 
*/
.banner {padding:200px 0 150px 0 ;}  
.about-acontain { width: 100%;  }
.col-lg-12 .footer-title{margin-top: 2rem;} 
}
 
@media screen and (max-width:699px){
.container{width:100%;padding: 0 20px;}	
.main{padding-top:40px;padding-bottom: 40px;  }
header{padding-right: 50px;} 
 nav a,.col-md-12  {width:100% !important} 
 .col-md-6{width: 50%;}
 .col-md-3{width: 33.33%;}  
.col-R.col-md-12,.col-L.col-md-12{padding: 0} 
.hidden-md{display:block;} 
.visible-md,.side_nav .a2a_kit{display:none;}  
.title {font-size: 1.5rem;line-height: 1.3;} 
 .w2, .tt {font-size:1.5rem; }
 .footer-title{margin-top: 2rem;} 
 .mask{padding: 10px;}
 .pb-md-0{padding-bottom: 0;}   
.side_nav{bottom: 0;} 
.banner-title{font-size:2rem;}
.pagetop-title{font-size: 2em;}
.pagetop{padding: 140px 0 70px 0;}
.banner{font-size: 1.2rem;}
 } 

@media screen and (max-width:479px){
.col-sm-12{width: 100%}	  
.col-sm-12.col-R{padding: 0;}
.col-sm-6{width: 50%;}
 .col-sm-9{width: 66.66%;}     
 .security { padding: 60px 0 50vh 0;}
}