/* Css Flash */
.swiper-container{ width:100%; height:735px;}
.swiper-container .swiper-slide{ background-repeat:no-repeat; background-position:center; background-size:cover;}
.flash01{ background-image:url(../Images/flash01.jpg);}
.flash02{ background-image:url(../Images/flash02.jpg);}
.flash03{ background-image:url(../Images/flash03.jpg);}
@media screen and (max-width:1680px){.swiper-container{ height:645px;}}
@media screen and (max-width:1440px){.swiper-container{ height:550px;}}
@media screen and (max-width:1366px){.swiper-container{ height:525px;}}
@media screen and (max-width:1280px){.swiper-container{ height:490px;}}
@media screen and (max-width:1024px){ 
.swiper-container{ height:500px;}
.flash01{ background-image:url(../Images/mobile01.jpg);}
.flash02{ background-image:url(../Images/mobile02.jpg);}
.flash03{ background-image:url(../Images/mobile03.jpg);}
}
@media screen and (max-width:800px){.swiper-container{ height:400px;}}
@media screen and (max-width:640px){.swiper-container{ height:320px;}}
@media screen and (max-width:480px){.swiper-container{ height:240px;}}
@media screen and (max-width:414px){.swiper-container{ height:210px;}}
@media screen and (max-width:375px){.swiper-container{ height:190px;}}
@media screen and (max-width:320px){.swiper-container{ height:175px;}}

/* Css Icon */
.in-bg{ margin:75px 10% 0; background-color:#f5f5f5;}
.in-bg ul li{ float:left; width:25%; height:150px; padding-top:33px; border-right:1px solid #e8e8e8;}
.in-bg ul li:nth-of-type(4){ border-right:none;}
.in-bg ul li a{ display:block; width:80%; margin:auto;}
.in-bg ul li a .in-tb{ float:left; width:84px; height:84px; background:url(../Images/tb01.png) no-repeat; padding:5px 0; position:relative; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.in-bg ul li a .in-tb div{ width:74px; height:74px; background-repeat:no-repeat; background-position:center; background-size:36px 36px; margin:auto; -webkit-border-radius:50%; border-radius:50%; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.in-bg ul li:nth-of-type(1) a .in-tb div{ background-image:url(../Images/tb02.png);}
.in-bg ul li:nth-of-type(2) a .in-tb div{ background-image:url(../Images/tb03.png);}
.in-bg ul li:nth-of-type(3) a .in-tb div{ background-image:url(../Images/tb04.png);}
.in-bg ul li:nth-of-type(4) a .in-tb div{ background-image:url(../Images/tb05.png);}
.in-bg ul li a .in-tb dl{ position:absolute; left:0; top:0; width:84px; height:84px; background:url(../Images/tb1.png) no-repeat center; background-size:contain; clip:rect(0 0 42px 0); -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.in-bg ul li a:hover .in-tb{ padding:10px 0;}
.in-bg ul li a:hover .in-tb div{ width:64px; height:64px; background-color:#cf0010; background-size:30px 30px;}
.in-bg ul li:nth-of-type(1) a:hover .in-tb div{ background-image:url(../Images/tb2.png);}
.in-bg ul li:nth-of-type(2) a:hover .in-tb div{ background-image:url(../Images/tb3.png);}
.in-bg ul li:nth-of-type(3) a:hover .in-tb div{ background-image:url(../Images/tb4.png);}
.in-bg ul li:nth-of-type(4) a:hover .in-tb div{ background-image:url(../Images/tb5.png);}
.in-bg ul li a:hover .in-tb dl{ clip:rect(0 42px 42px 0);}
.in-bg ul li a p{ margin-left:104px; height:84px; display:flex; justify-content:center; flex-direction:column;}
.in-bg ul li a p strong{ display:block; font-size:18px; color:#333; margin-bottom:6px;}
.in-bg ul li a p font{ color:#888;}
@media screen and (max-width:1440px){ 
.in-bg{ margin:65px 5% 0;}
.in-bg ul li a{ width:75%;}
}
@media screen and (max-width:1280px){ 
.in-bg ul li a{ width:80%;}
.in-bg ul li a p{ margin-left:94px;}
}
@media screen and (max-width:1024px){ 
.in-bg{ margin:50px 5% 0;}
.in-bg ul li{ height:180px; padding-top:30px;}
.in-bg ul li a{ width:90%;}
.in-bg ul li a .in-tb{ float:inherit; margin:auto; width:68px; height:68px; background-size:68px 68px;}
.in-bg ul li a .in-tb div{ width:58px; height:58px; background-size:30px 30px;}
.in-bg ul li a .in-tb dl{ width:68px; height:68px; background-size:68px 68px; clip:rect(0 0 34px 0);}
.in-bg ul li a:hover .in-tb div{ width:48px; height:48px; background-size:24px 24px;}
.in-bg ul li a:hover .in-tb dl{ clip:rect(0 34px 34px 0);}
.in-bg ul li a p{ margin-left:0; height:auto; text-align:center;}
.in-bg ul li a p strong{ font-size:15px; margin:11px 0 4px;}
.in-bg ul li a p font{ font-size:12px;}
}
@media screen and (max-width:640px){ 
.in-bg{ margin:35px 5% 0;}
}
@media screen and (max-width:480px){ 
.in-bg{ margin:25px 3.5% 0;}
.in-bg ul li{ width:50%; height:auto; padding:25px 0;}
.in-bg ul li:nth-of-type(2){ border-right:none;}
.in-bg ul li:nth-of-type(1), .in-bg ul li:nth-of-type(2){ border-bottom:1px solid #e8e8e8;}
.in-bg ul li a .in-tb{ width:50px; height:50px; background-size:50px 50px;}
.in-bg ul li a .in-tb div{ width:40px; height:40px; background-size:24px 24px;}
.in-bg ul li a .in-tb dl{ width:50px; height:50px; background-size:50px 50px; clip:rect(0 0 25px 0);}
.in-bg ul li a:hover .in-tb div{ width:30px; height:30px; background-size:20px 20px;}
.in-bg ul li a:hover .in-tb dl{ clip:rect(0 25px 25px 0);}
.in-bg ul li a p strong{ font-size:14px;}
}

/* Css About */
.ab-bg{ margin:0 10%; height:525px;}
.ab-tx, .ab-ig{ float:left; width:50%; height:100%;}
.ab-tx{ background:url(../Images/gsBg.jpg) no-repeat center; background-size:cover; color:#fff; padding:65px; position:relative;}
.ab-tx dl h2{ font-size:24px; margin-bottom:10px;}
.ab-tx dl em{ font-size:16px; text-transform:uppercase;}
.ab-tx p{ line-height:30px; margin-top:30px;}
.ab-tx p span{ font-family:Microsoft YaHei;}
.ab-tx a{ display:block; position:absolute; left:65px; bottom:75px; width:44px; height:44px; border:1px solid #fff; background-image:url(../Images/jt.png); background-repeat:no-repeat; background-position:center; background-size:15px 8px; -webkit-border-radius:50%; border-radius:50%; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ab-tx a:hover{ background-color:#fff; background-image:url(../Images/at.png);}
.ab-ig{ overflow:hidden;}
.ab-ig a{ display:block; width:100%; height:100%; background:url(../Images/gs.jpg) no-repeat center; background-size:cover; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ab-ig a:hover{ -webkit-transform:scale(1.05,1.05); transform:scale(1.05,1.05);}
@media screen and (max-width:1440px){ 
.ab-bg{ margin:0 5%; height:445px;}
.ab-tx{ padding:45px;}
.ab-tx a{ left:45px; bottom:50px;}
}
@media screen and (max-width:1366px){ 
.ab-bg{ height:420px;}
.ab-tx p{ margin-top:20px;}
}
@media screen and (max-width:1280px){ 
.ab-bg{ height:395px;}
.ab-tx{ padding:35px;}
.ab-tx p{ line-height:28px; margin-top:15px;}
.ab-tx a{ left:35px; bottom:40px;}
}
@media screen and (max-width:1024px){ 
.ab-bg{ height:315px;}
.ab-tx dl h2{ font-size:18px; margin-bottom:5px;}
.ab-tx dl em{ font-size:14px;}
.ab-tx p{ line-height:24px; margin-top:15px;}
.ab-tx a{ display:none;}
}
@media screen and (max-width:880px){ 
.ab-tx{ padding:25px;}
}
@media screen and (max-width:800px){ 
.ab-bg{ height:auto;}
.ab-tx, .ab-ig{ width:100%;}
.ab-tx p{ margin-top:10px;}
.ab-tx a{ display:block; position:relative; left:0; bottom:0; width:30px; height:30px; background-size:8px 4px; margin-top:20px;}
.ab-ig{ height:492px;}
}
@media screen and (max-width:640px){ 
.ab-ig{ height:394px;}
}
@media screen and (max-width:480px){ 
.ab-bg{ margin:0 3.5%;}
.ab-tx dl h2{ font-size:16px;}
.ab-tx a{ margin-top:15px;}
.ab-ig{ height:305px;}
}
@media screen and (max-width:414px){ 
.ab-tx{ padding:20px;}
.ab-ig{ height:264px;}
}
@media screen and (max-width:375px){ 
.ab-ig{ height:239px;}
}
@media screen and (max-width:320px){ 
.ab-ig{ height:204px;}
}

/* Css Products */
.ig-bg{ width:100%; margin-top:85px; padding:70px 10% 85px; background:url(../Images/igBg.jpg) no-repeat center; background-size:cover;}
.ig-bg h2{ font-size:24px; color:#fff; text-align:center; margin-bottom:10px;}
.ig-bg em{ display:block; font-size:16px; color:#fff; text-transform:uppercase; text-align:center;}
.ig-lb{ margin-top:35px;}
.ig-lb a{ display:block; float:left; width:23.5%; margin-right:2%; overflow:hidden; position:relative;}
.ig-lb a:nth-of-type(4n){ margin-right:0;}
.ig-lb a:nth-of-type(5), .ig-lb a:nth-of-type(6), .ig-lb a:nth-of-type(7), .ig-lb a:nth-of-type(8){ margin-top:2%;}
.ig-lb a img{ width:100%;}
.ig-lb a dl{ position:absolute; left:0; bottom:-60px; width:100%; height:60px; line-height:60px; font-size:16px; font-weight:bold; color:#fff; text-align:center; padding:0 10px; background-color:rgba(0,0,0,.65); -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ig-lb a:hover dl{ bottom:0;}
@media screen and (max-width:1440px){ 
.ig-bg{ margin-top:75px; padding:60px 5% 75px;}
}
@media screen and (max-width:1024px){ 
.ig-bg{ margin-top:60px; padding:45px 5% 55px;}
.ig-bg h2{ font-size:18px; margin-bottom:5px;}
.ig-bg em{ font-size:14px;}
.ig-lb{ margin-top:25px;}
.ig-lb a dl{ bottom:-40px; height:40px; line-height:40px; font-size:12px;}
}
@media screen and (max-width:640px){ 
.ig-bg{ margin-top:45px; padding:35px 5% 45px;}
}
@media screen and (max-width:480px){ 
.ig-bg{ margin-top:30px; padding:25px 3.5% 30px;}
.ig-lb{ margin-top:20px;}
.ig-lb a{ width:48.25%; margin-right:3.5%;}
.ig-lb a:nth-of-type(2n){ margin-right:0;}
.ig-lb a:nth-of-type(3), .ig-lb a:nth-of-type(4), .ig-lb a:nth-of-type(5), .ig-lb a:nth-of-type(6), .ig-lb a:nth-of-type(7), .ig-lb a:nth-of-type(8){ margin-top:3.5%;}
}

/* Css News */
.ns-bg{ margin:75px 10% 0; height:525px;}
.ns-al, .ns-lb{ float:left; width:50%; height:100%; background-color:#717171;}
.ns-al a{ display:block; width:100%; height:100%; overflow:hidden; position:relative;}
.ns-al a dl{ background:url(../Images/zcBg.jpg) no-repeat center; background-size:cover; width:100%; height:100%; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ns-al a:hover dl{ -webkit-transform:scale(1.05,1.05); transform:scale(1.05,1.05);}
.ns-al a div{ position:absolute; left:0; top:0; width:100%; color:#fff; padding:65px;}
.ns-al a div h2{ font-size:24px; margin-bottom:10px;}
.ns-al a div em{ font-size:16px; text-transform:uppercase;}
.ns-al a div p{ line-height:30px; margin-top:20px;}
.ns-al a div span{ display:block; width:44px; height:44px; border:1px solid #fff; margin-top:40px; background-image:url(../Images/jt.png); background-repeat:no-repeat; background-position:center; background-size:15px 8px; -webkit-border-radius:50%; border-radius:50%; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ns-al a:hover div span{ background-color:#fff; background-image:url(../Images/at.png);}
.ns-lb{ background:url(../Images/gsBg.jpg) no-repeat center; background-size:cover; color:#fff; padding:65px;}
.ns-lb h2{ font-size:24px; margin-bottom:10px;}
.ns-lb em{ display:block; font-size:16px; text-transform:uppercase; margin-bottom:20px;}
.ns-lb a{ display:block; height:40px; line-height:39px; color:#fff; border-top:1px solid rgba(255,255,255,.08); -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ns-lb a:hover{ font-weight:bold; padding:0 10px;}
.ns-lb a span{ float:right; font-style:italic;}
@media screen and (max-width:1440px){ 
.ns-bg{ margin:65px 5% 0; height:445px;}
.ns-al a div{ padding:45px;}
.ns-lb{ padding:45px;}
.ns-lb a{ height:35px; line-height:34px;}
}
@media screen and (max-width:1024px){ 
.ns-bg{ margin:50px 5% 0; height:405px;}
.ns-al a div{ padding:35px;}
.ns-al a div h2{ font-size:18px; margin-bottom:5px;}
.ns-al a div em{ font-size:14px;}
.ns-al a div p{ line-height:24px; margin-top:15px;}
.ns-al a div span{ width:30px; height:30px; background-size:8px 4px; margin-top:30px;}
.ns-lb{ padding:35px;}
.ns-lb h2{ font-size:18px; margin-bottom:5px;}
.ns-lb em{ font-size:14px; margin-bottom:15px;}
}
@media screen and (max-width:800px){ 
.ns-bg{ height:auto;}
.ns-al, .ns-lb{ width:100%;}
.ns-al{ height:492px;}
.ns-al a div{ padding:25px;}
.ns-al a div p{ margin-top:10px;}
.ns-al a div span{ margin-top:20px;}
.ns-lb{ padding:25px;}
}
@media screen and (max-width:640px){ 
.ns-bg{ margin:35px 5% 0;}
.ns-al{ height:394px;}
}
@media screen and (max-width:480px){ 
.ns-bg{ margin:25px 3.5% 0;}
.ns-al{ height:305px;}
.ns-lb{ padding:25px 25px 15px;}
.ns-lb a{ height:auto; line-height:20px; padding:10px 0;}
.ns-lb a span{ float:inherit; display:block;}
}
@media screen and (max-width:414px){ 
.ns-al a div{ padding:20px;}
.ns-lb{ padding:20px 20px 10px;}
}