/* Css Flash */
.swiper-container{ width:100%; height:650px;}
.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);}
@media screen and (max-width:1680px){.swiper-container{ height:575px;}}
@media screen and (max-width:1440px){.swiper-container{ height:485px;}}
@media screen and (max-width:1280px){.swiper-container{ height:435px;}}
@media screen and (max-width:1024px){.swiper-container{ height:350px;}}
@media screen and (max-width:800px){ 
.swiper-container{ height:420px;}
.flash01{ background-image:url(../Images/mobile01.jpg);}
.flash02{ background-image:url(../Images/mobile02.jpg);}
}
@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 Products */
.ig-bg{ width:100%; padding:65px 0 80px;}
.big{ font-size:30px; font-weight:500; color:#333; text-align:center;}
.small{ font-size:18px; font-weight:normal; color:#888; text-align:center; margin-top:4px;}
.ig-bg .ig-ls{ margin-top:33px;}
.ig-bg .ig-ls a{ display:block; float:left; width:19.264%; margin-right:0.92%; margin-bottom:0.92%; overflow:hidden; position:relative;}
.ig-bg .ig-ls a:nth-of-type(5n){ margin-right:0;}
.ig-bg .ig-ls a:nth-of-type(6), .ig-bg .ig-ls a:nth-of-type(7), .ig-bg .ig-ls a:nth-of-type(8), .ig-bg .ig-ls a:nth-of-type(9), .ig-bg .ig-ls a:nth-of-type(10){ margin-bottom:0;}
.ig-bg .ig-ls a img{ width:100%;}
.ig-bg .ig-ls a div{ position:absolute; left:0; bottom:0; z-index:2; width:100%; height:30px; background-color:rgba(18,64,152,.8); -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;}
.ig-bg .ig-ls a:hover div{ height:100%; background-color:rgba(18,64,152,.9);}
.ig-bg .ig-ls a dl{ position:absolute; left:0; bottom:0; z-index:3; width:100%; height:30px; line-height:30px; font-size:18px; color:#fff; text-align:center; padding:0 10px; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ig-bg .ig-ls a:hover dl{ opacity:0;}
.ig-bg .ig-ls a p{ position:absolute; left:0; bottom:-100%; z-index:4; width:100%; height:100%; line-height:24px; font-size:18px; color:#fff; text-align:center; padding:0 10px; display:flex; justify-content:center; flex-direction:column; -webkit-transition:all .8s ease-in-out; transition:all .8s ease-in-out;}
.ig-bg .ig-ls a:hover p{ bottom:0;}
.ig-bg .ig-ls a p span{ display:block; width:100px; height:24px; font-size:14px; text-align:center; margin:11px auto 2px; background-color:#e37a1f; -webkit-border-radius:12px; border-radius:12px;}
@media screen and (max-width:1024px){
.ig-bg{ padding:45px 0 50px;}
.big{ font-size:24px; line-height:26px;}
.small{ font-size:16px;}
.ig-bg .ig-ls{ margin-top:22px;}
.ig-bg .ig-ls a div{ height:24px;}
.ig-bg .ig-ls a dl{ height:24px; line-height:24px; font-size:14px;}
.ig-bg .ig-ls a p{ line-height:20px; font-size:14px;}
}
@media screen and (max-width:640px){
.ig-bg{ padding:35px 0 40px;}
.ig-bg .ig-ls{ margin-top:17px;}
.ig-bg .ig-ls a{ width:48.5%; margin-right:3%; margin-bottom:3%;}
.ig-bg .ig-ls a:nth-of-type(5n){ margin-right:3%;}
.ig-bg .ig-ls a:nth-of-type(2n){ margin-right:0;}
.ig-bg .ig-ls a:nth-of-type(6), .ig-bg .ig-ls a:nth-of-type(7), .ig-bg .ig-ls a:nth-of-type(8){ margin-bottom:3%;}
}

/* Css About */
.ab-bg{ width:100%; height:600px;}
.ab-bg .ab-zb{ float:left; width:50%; height:100%; background:url(../Images/company.jpg) no-repeat center; background-size:cover;}
.ab-bg .ab-zb a{ display:block; width:100%; height:100%;}
.ab-bg .ab-yb{ float:left; width:50%; height:100%; color:#fff; background-color:#124098; padding:0 10% 0 75px; display:flex; justify-content:center; flex-direction:column;}
.ab-bg .ab-yb h1{ font-size:30px; font-weight:500;}
.ab-bg .ab-yb h3{ font-size:16px; font-weight:normal; margin-top:7px;}
.ab-bg .ab-yb p{ margin-top:26px;}
.ab-bg .ab-yb .ab-ls a{ display:block; float:left; font-size:18px; color:#fff; text-align:center; margin:42px 80px 0 0; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ab-bg .ab-yb .ab-ls a:hover{ margin-top:25px;}
.ab-bg .ab-yb .ab-ls a img{ display:block; width:50px; margin:0 auto 9px;}
@media screen and (max-width:1440px){
.ab-bg{ height:450px;}
.ab-bg .ab-yb{ padding:0 5% 0 50px;}
.ab-bg .ab-yb p{ margin-top:10px;}
.ab-bg .ab-yb .ab-ls a{ margin:32px 65px 0 0;}
.ab-bg .ab-yb .ab-ls a:hover{ margin-top:15px;}
}
@media screen and (max-width:1280px){
.ab-bg{ height:400px;}
.ab-bg .ab-yb p{ margin-top:8px; line-height:24px;}
.ab-bg .ab-yb .ab-ls a{ font-size:16px; margin:25px 65px 0 0;}
.ab-bg .ab-yb .ab-ls a:hover{ margin-top:10px;}
.ab-bg .ab-yb .ab-ls a img{ width:35px; margin:0 auto 4px;}
}
@media screen and (max-width:1024px){
.ab-bg{ height:320px;}
.ab-bg .ab-yb{ padding:0 3.5% 0 25px;}
.ab-bg .ab-yb h1{ font-size:24px;}
.ab-bg .ab-yb h3{ margin-top:2px;}
.ab-bg .ab-yb p span{ display:none;}
.ab-bg .ab-yb .ab-ls a{ margin:20px 50px 0 0;}
.ab-bg .ab-yb .ab-ls a:hover{ margin-top:5px;}
}
@media screen and (max-width:800px){
.ab-bg{ height:auto;}
.ab-bg .ab-zb{ width:100%; height:500px;}
.ab-bg .ab-yb{ width:100%; height:auto; padding:20px;}
.ab-bg .ab-yb h1{ text-align:center;}
.ab-bg .ab-yb h3{ text-align:center;}
.ab-bg .ab-yb p{ margin-top:12px;}
.ab-bg .ab-yb .ab-ls{ display:table; margin:auto;}
.ab-bg .ab-yb .ab-ls a{ margin:25px 25px 0;}
.ab-bg .ab-yb .ab-ls a:hover{ margin-top:10px;}
}
@media screen and (max-width:640px){
.ab-bg .ab-zb{ height:400px;}
}
@media screen and (max-width:480px){
.ab-bg .ab-zb{ height:300px;}
.ab-bg .ab-yb h3{ font-size:14px; margin-top:0;}
.ab-bg .ab-yb p{ margin-top:8px;}
.ab-bg .ab-yb .ab-ls a{ font-size:14px;}
.ab-bg .ab-yb .ab-ls a img{ width:25px; margin:0 auto 4px;}
}
@media screen and (max-width:414px){
.ab-bg .ab-zb{ height:260px;}
}
@media screen and (max-width:375px){
.ab-bg .ab-zb{ height:235px;}
.ab-bg .ab-yb .ab-ls a{ margin:25px 20px 0;}
}
@media screen and (max-width:320px){
.ab-bg .ab-zb{ height:200px;}
.ab-bg .ab-yb .ab-ls a{ margin:25px 15px 0;}
}

/* Css Strength */
.sl-bg{ width:100%; padding:65px 0;}
.swiper2{ height:auto; margin-top:33px;}
.swiper2 a{ display:block; width:100%; height:350px;}
.swiper2 a div{ float:left; width:65%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover;}
.swiper2 a dl{ float:left; width:35%; height:100%; background-color:#f5f5f5; padding:30px; position:relative; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.swiper2 a dl h2{ font-size:22px; font-weight:500; color:#333; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.swiper2 a dl p{ color:#555; line-height:24px; margin-top:6px; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.swiper2 a dl span{ position:absolute; left:30px; bottom:35px; display:block; width:80px; height:24px; line-height:24px; border:1px solid #e0e0e0; font-size:12px; color:#888; text-align:center; -webkit-border-radius:12px; border-radius:12px; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.swiper2 a:hover dl{ background-color:#124098;}
.swiper2 a:hover dl h2, .swiper2 a:hover dl p{ color:#fff;}
.swiper2 a:hover dl span{ color:#fff; border-color:#e37a1f; background-color:#e37a1f;}
.swiper-pagination2{ position:relative; line-height:0; margin-top:35px;}
.swiper-pagination2 .swiper-pagination-bullet{ margin:0 5px; background-color:#e0e0e0; opacity:1;}
.swiper-pagination2 .swiper-pagination-bullet-active{ background:#e37a1f;}
@media screen and (max-width:1024px){
.sl-bg{ padding:45px 0;}
.swiper2{ margin-top:22px;}
.swiper2 a{ height:250px;}
.swiper2 a dl{ padding:15px;}
.swiper2 a dl h2{ font-size:18px;}
.swiper2 a dl p{ margin-top:4px;}
.swiper2 a dl span{ left:15px; bottom:20px;}
.swiper-pagination2{ margin-top:25px;}
}
@media screen and (max-width:800px){
.swiper2 a{ height:auto;}
.swiper2 a div{ width:100%; height:265px;}
.swiper2 a dl{ width:100%; height:auto; padding:15px 20px 20px;}
.swiper2 a dl p{ height:48px; overflow:hidden;}
.swiper2 a dl span{ position:relative; left:0; bottom:0; width:70px; margin-top:12px;}
}
@media screen and (max-width:640px){
.sl-bg{ padding:35px 0;}
.swiper2 a div{ height:205px;}
}
@media screen and (max-width:480px){
.swiper2 a div{ height:320px;}
}
@media screen and (max-width:414px){
.swiper2 a div{ height:275px;}
}
@media screen and (max-width:375px){
.swiper2 a div{ height:250px;}
}
@media screen and (max-width:320px){
.swiper2 a div{ height:215px;}
}

/* Css News */
.ns-bg{ width:100%; padding:65px 0 75px; background-color:#f5f5f5;}
.ns-bg .ns-ls{ margin-top:33px;}
.ns-bg .ns-ls a{ display:block; float:left; width:23.44%; margin-right:2.08%; background-color:#fff; padding:20px 20px 15px; position:relative; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ns-bg .ns-ls a:nth-of-type(4){ margin-right:0;}
.ns-bg .ns-ls a h2{ font-size:18px; font-weight:500; color:#333; height:30px; line-height:30px; overflow:hidden; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ns-bg .ns-ls a div{ height:202px; background-repeat:no-repeat; background-position:center; background-size:cover; margin-top:13px;}
.ns-bg .ns-ls a p{ color:#555; line-height:24px; margin:15px 0; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ns-bg .ns-ls a span{ color:#888; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.ns-bg .ns-ls a dl{ position:absolute; right:35px; bottom:25px; width:20px; height:20px; background:url(../Images/jt.png) no-repeat center; background-size:20px 20px; opacity:0; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;}
.ns-bg .ns-ls a:hover{ background-color:#124098;}
.ns-bg .ns-ls a:hover h2, .ns-bg .ns-ls a:hover p, .ns-bg .ns-ls a:hover span{ color:#fff;}
.ns-bg .ns-ls a:hover dl{ right:20px; opacity:1;}
@media screen and (max-width:1280px){
.ns-bg .ns-ls a div{ height:150px;}
}
@media screen and (max-width:1024px){
.ns-bg{ padding:45px 0 55px;}
.ns-bg .ns-ls{ margin-top:22px;}
.ns-bg .ns-ls a{ padding:15px 15px 10px;}
.ns-bg .ns-ls a h2{ font-size:16px; height:48px; line-height:24px;}
.ns-bg .ns-ls a div{ height:120px; margin-top:10px;}
.ns-bg .ns-ls a p{ margin:10px 0 5px;}
.ns-bg .ns-ls a dl{ right:15px; bottom:20px;}
}
@media screen and (max-width:800px){
.ns-bg .ns-ls a div{ height:95px;}
}
@media screen and (max-width:640px){
.ns-bg{ padding:35px 0 45px;}
.ns-bg .ns-ls{ margin-top:17px;}
.ns-bg .ns-ls a{ width:48.5%; margin-right:3%; margin-bottom:3%;}
.ns-bg .ns-ls a:nth-of-type(2n){ margin-right:0;}
.ns-bg .ns-ls a:nth-of-type(3), .ns-bg .ns-ls a:nth-of-type(4){ margin-bottom:0;}
.ns-bg .ns-ls a div{ height:165px;}
.ns-bg .ns-ls a h2{ height:24px;}
}
@media screen and (max-width:480px){
.ns-bg .ns-ls a h2{ height:48px;}
.ns-bg .ns-ls a div{ height:120px;}
}
@media screen and (max-width:414px){
.ns-bg .ns-ls a div{ height:100px;}
}
@media screen and (max-width:375px){
.ns-bg .ns-ls a div{ height:88px;}
}
@media screen and (max-width:320px){
.ns-bg .ns-ls a div{ height:75px;}
}

/* Css Service */
.sv-bg{ width:100%; padding:75px 0 80px;}
.sv-bg .sv-ls a{ float:left; width:49%; margin-right:2%; position:relative;}
.sv-bg .sv-ls a:nth-of-type(2){ margin-right:0;}
.sv-bg .sv-ls a img{ width:100%;}
.sv-bg .sv-ls a div{ position:absolute; left:0; top:0; width:100%; height:100%; font-size:18px; color:#fff; text-align:center; background-color:rgba(18,64,152,.8); display:flex; justify-content:center; flex-direction:column; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;}
.sv-bg .sv-ls a:hover div{ background-color:rgba(18,64,152,.9);}
.sv-bg .sv-ls a div h1{ font-size:30px; font-weight:500; margin-bottom:9px;}
@media screen and (max-width:1024px){
.sv-bg{ padding:45px 0 50px;}
.sv-bg .sv-ls a div{ font-size:16px;}
.sv-bg .sv-ls a div h1{ font-size:24px; margin-bottom:5px;}
}
@media screen and (max-width:640px){
.sv-bg{ padding:35px 0 40px;}
.sv-bg .sv-ls a{ width:100%; margin-right:0;}
.sv-bg .sv-ls a:nth-of-type(2){ margin-top:3.5%;}
}