/*2732*/
@charset "utf-8";
html, body{font:normal 15px/28px "Open Sans",Helvetica,Arial,Verdana,sans-serif;color:#626262;}
a{color:#163c55;}
a:hover{color:#cb1023;}
h1, h2, h3, h4, h5, h6{ margin: 0; }
header-mid:after,
#nav-box:after{clear: both;display: table; content: " ";}
.fl{float:left;}
.fr{float:right;}
.clearfix{zoom:1;}
.clearfix:after{content: ""; height: 0; visibility: hidden; display: block; clear: both;}

@-moz-keyframes headerSlideDown{
0%{
margin-top:-150px
}
100%{
margin-top:0
}}
@-ms-keyframes headerSlideDown{0%{margin-top:-150px}100%{margin-top:0}}
@-webkit-keyframes headerSlideDown{0%{margin-top:-150px}100%{margin-top:0}}
@keyframes headerSlideDown{0%{margin-top:-150px}100%{margin-top:0}}
*{    -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}
/*多次点击出现蓝色*/
body{-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select: none;
 user-select: none;}

.language{float:none;display:inline-block;vertical-align:top;}
.language-box{padding:0;}
.language-con{height:60px;line-height:60px;color:#fff;font-size:0;padding:0;}
.language-con i{font-size:0;}
.language-list{top:100%;right:-15px;left:auto;overflow:hidden;overflow-y:auto;}
.language-con span img{width:30px;margin:0;}


.header-box{ transition:all .3s ease-out;position:relative;z-index:99;width:100%;position:absolute;top:0;left:0;right:0;}
.header-box.other_header_box{position:static;background:#202022; }
.header-box.posFixed{box-shadow:0 2px 5px 0 rgba(0,0,0,0.1);background:#ffffff; opacity:0.97; animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; position: fixed; top: 0;  left: 0; right: 0;}


.header-box .header{height:80px;line-height:50px;position:relative;}
.header-box .header-mid{position:relative;display: flex; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; align-items: center;}

.header-box .logo{display: flex; align-items: center;width:15%;height:100%;padding:15px 15px 15px 0;box-sizing:border-box;}
.header-box .logo a{display:block;}
.header-box .logo img{max-height:50px;max-width:100%;display:inline-block;vertical-align:middle;}
.header-box .header-rt{ box-sizing:border-box;}
.header-box .header-rt{display:inline-block;float:right;}
.header-box .header-rt .sns{ display: flex;}
.header-box .header-rt .sns li{ width:26px; height:26px; text-align:center; display:inline-block; margin: 0 2px; line-height: 26px; border-radius:50%; transition:all .15s linear}
.header-box .header-rt .sns li a{ color:#fff;}
.header-box .header-rt .sns li:hover{ background:#cb1023;}


.header-box .search-btn{display:inline-block;vertical-align:top;cursor:pointer;padding:15px; line-height:26px;}
.header-box .search-btn > .icon{fill:#fff;width:20px;height:20px;vertical-align:middle;}
.header-box .search-btn .icon.search-close{display:none;}
.header-box .search-box{position:absolute;right:0;top:80px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);background:#7eced5;padding:20px;line-height:normal;display:none;left:0; border-radius:8px;}
.header-box .search-box:before{position:absolute;content:'';bottom:-8px;height:8px;left:0;right:0;box-shadow: 0 0 0 0 rgba(0,0,0,0) inset;background: rgba(0,0,0,0.03);z-index:2;}

.header-box .search-txt{height: 32px; width: calc(100% - 58px);padding-left:10px;background:none;color:#fff;border:0;float:left;box-sizing:border-box;display:inline-block;}
.header-box .searc_btn{display:inline-block;height:32px;width:48px;border:none;background:none;cursor:pointer;-webkit-transition: all 700ms; transition: all 700ms;border-radius:0 ;box-sizing:border-box;}
.header-box .searc_btn .icon{fill:#fff;-webkit-transition: all 700ms; transition: all 700ms;}
.header-box .searc_btn:hover .icon{fill:#fff;}

body.search-show .header-box .search-box{display:block;}
body.search-show .header-box .search-btn>.icon{fill:#fff;display:none;}
body.search-show .header-box .search-btn>.icon.search-close{display:inline-block;fill:#7eced5;}
.header-box .search-box form{position:relative;border-bottom:1px solid rgba(255,255,255,0.2);width:60%;margin:0 auto;}
.header-box .searc_btn:hover{}


.header-box .header-nav{display:inline-block;vertical-align:middle;text-align:left;float:right;}
.header-box #nav-box .nav>li{position:relative;z-index:999;float:left;}
.header-box #nav-box .nav>li>a{padding: 6px 0; margin:0 20px; display:block;font-size:15px; color:#fff;transition:all 0.3s ease-in-out; font:normal bold 16px/20px "Roboto",Helvetica,Arial,Verdana,sans-serif; position:relative;}
.header-box #nav-box .nav>li:first-child>a{ margin-left:0;}
.header-box #nav-box .nav>li>a:before{ bottom: -8px; background-color: #cb1023; background: #cb1023; background: #7eced5;position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; content: ''; opacity: 0; -ms-transition: opacity .3s,-webkit-transform .3s; -webkit-transition: opacity .3s,-webkit-transform .3s; transition: opacity .3s,transform .3s; -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px);}
.header-box #nav-box .nav>li.home>a:before,
.header-box #nav-box .nav>li.on>a:before{opacity: 1; -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);}
.header-box #nav-box .nav-sub{display:none;position:absolute;right:0;top:100%;background:#fff;box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);min-width:160px;border-right:2px solid #7eced5;}
.header-box #nav-box .nav-sub dd a{padding:8px 12px;font-size:13px;line-height:16px;display:block;color:#333;border-bottom:1px solid #ededed;transition:all 0.3s ease-in-out;}
.header-box #nav-box .nav>li.home>a,
.header-box #nav-box .nav>li.on>a{color:#7eced5;}
.header-box #nav-box .nav>li.on .nav-sub{display:block;}
.header-box #nav-box .nav-sub dd a:hover{color:#fff;background:#7eced5;}



.wrap { transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; position:relative;}
.right-nav { bottom: 0; position: fixed; right: -250px;  top: 0;box-sizing:border-box; width: 250px; z-index: 9999; background: #202022; text-align:right; overflow-y: auto;}
.right-nav .mobile-menu-close{fill:#a6a6a6;width:25px;height:60px;padding:0 20px;}
.right-nav .mobile-menu-close:hover{fill:#fff;}
body.nav-show  .right-nav{ transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none;}

.topcategoriesbg { background:rgba(0,0,0,.6); width: 100%; height: 100%; position: fixed; left: 0; top: 0; display:none; z-index: 1001;}

.header-box .mobile-nav{display:none;line-height:normal;}
.header-box .mobile-nav .mobile-nav-icon{height:32px;width:42px;position:relative;cursor:pointer;background:none;margin-top:13px;}
.header-box .mobile-nav .mobile-nav-icon:before,
.header-box .mobile-nav .mobile-nav-icon span,
.header-box .mobile-nav .mobile-nav-icon:after{position:absolute;left:10px;top:9px;width:22px;height:2px;background:#fff;content:'';transition:all 0.3s;border-radius:1px;}
.header-box .mobile-nav .mobile-nav-icon span{top:16px;}
.header-box .mobile-nav .mobile-nav-icon:after{top:23px;}


#mobile-nav-box{text-align:left;}
#mobile-nav-box li{}
#mobile-nav-box li .mobile-nav-box__link{position:relative;}
#mobile-nav-box li .icon{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:40px;text-align:center;height:40px;line-height:40px;font-size:25px;color:#a6a6a6;}
#mobile-nav-box li .mobile-menu-on .icon{color:#fff;}
#mobile-nav-box li a{padding:11px 20px;display:block;font-size:14px;color:#a6a6a6;text-transform:capitalize;border-bottom:1px solid rgba(255,255,255,.03);}
#mobile-nav-box li:first-child .mobile-nav-box__link a{color:#fff;}
#mobile-nav-box li .mobile-nav-box__link.mobile-menu-on>a{color:#fff;}
#mobile-nav-box .mobile-nav-sub{ display: none;}
#mobile-nav-box .mobile-nav-sub a{font-size:12px;color:#fff;transition:all 0.3s ease-in-out;padding-left:40px;}
#mobile-nav-box .mobile-nav-sub a:hover{color:#00a6d0;}
body.nav-show{position:fixed;top:0;left:0;right:0;z-index:0;}
body.nav-show .topcategoriesbg {opacity: 0.6;visibility: visible;}
.right-nav .feedback { color: #0095eb; padding: 11px 20px; display:block;text-align:left;border-bottom:1px solid rgba(255,255,255,.03);}
.right-nav .feedback:hover{color:#fff;}
.right-nav .feedback:before { content: "";  position: absolute; left: 0; top: 0;  height: 100%; width: 0;  background: rgba(0,0,0,.05); z-index: 1; transition: all .3s;}
.right-nav .feedback:hover:before{width:100%;}

.right-nav .sns{ text-align:left; padding:20px 10px;}
.right-nav .sns li{ display:inline-block; padding:0 10px;}
.right-nav .sns li a{ color:#fff;}


.wrap .index-btn{background:#e6f3fb;color:#163c55;display:inline-block;padding:11px 20px;border-radius:5px;font-size:14px;line-height:24px;position:relative;}
.wrap .index-btn:after{    content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: rgba(0,0,0,.05); z-index: 1; transition: all .3s;}
.wrap .index-btn:hover:after{width:100%;}


#main{margin-top:0 !important;}
#main .button-prev,
#main .button-next{position:absolute;top:40%;width:40px;text-align:center;padding:16px 0 12px;cursor:pointer;z-index:9;outline:none;background:#fff;border-radius:3px;}
#main .button-prev .icon,
#main .button-next .icon{width:100%;height:20px;fill:#616161;}
#main .button-next:hover,#main .button-prev:hover{background:#3e4142;}
#main .button-prev:hover .icon,
#main .button-next:hover .icon{fill:#fff;}
#main .button-prev{left:5px;transform:rotate3d(0,90,0,180deg);}
#main .button-next{right:5px;}



#main .banner-box{ height:auto; width:100%; float:none;position:relative;} 
#main .banner-box .li{display:block;position:relative; height:100vh;background-size:cover;background-position:center;background-repeat:no-repeat;}
#main .banner-box .li .text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;}
#main .banner-box .li .text .row{display: flex; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; padding:0 15px;}
#main .banner-box h3{font-size:150px;text-transform:uppercase;line-height:164px;font-weight:600;}
#main .banner-box .banner-detail{font-size:31px;line-height:1.3;font-weight:100;color:#fff;}
#main .banner-box .banner-btn{cursor:pointer;display:inline-block;padding:10px 16px 10px 17px;font-size:14px;line-height:14px;background:#7eced5;border-radius:5px;font-family:Lato;text-transform:capitalize;color:#fff;border-radius: 30px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition:all 0.5s;}
#main .banner-box .banner-btn:hover{background:linear-gradient(rgb(250, 28, 65) 0%, rgb(203, 16, 35) 100%) rgb(245, 84, 77); transform: matrix3d(1.07, 0, 0, 0, 0, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}

#main .banner-box .banner-bg{ background:rgba(0, 0, 0, 0.6); position:absolute; left:0; top:0; height:100%; width:100%;}
#main .banner-box .swiper-pagination-bullet{width:10px;height:10px;}
#main .banner-box .swiper-pagination-bullet-active{background:#00a6d0;}




#main .home-ad1 ul{ display: flex; flex-wrap: wrap;}
#main .home-ad1 ul li{ width:33%; border-top:1px solid rgba(0,0,0,0.1); -webkit-transition:all .3s ease-out; transition:all .3s ease-out;} 
#main .home-ad1 ul li:nth-child(3n-1),#main .home-ad1 ul li:nth-child(3n-2){ box-shadow:1px 0 0 rgba(0,0,0,0.1);}
#main .home-ad1 ul li[data-columns="3"] .#main .home-ad1 ul li:nth-child(-n+3){ border-top:0;}
#main .home-ad1 ul li .item{ position:relative;  min-height:320px; -webkit-transition:all .3s ease-out; transition:all .3s ease-out;}
#main .home-ad1 ul li svg{ width:50px; height:50px;}
#main .home-ad1 ul li .ad-txt{ position:absolute; left:0; top:0; padding:15px; width:100%; height:100%; display: flex;    justify-content: center; align-items: center; text-align:center; box-sizing:border-box;}
#main .home-ad1 ul li .item .ad-descript,
#main .home-ad1 ul li .item h5,
#main .home-ad1 ul li .item:hover svg path,
#main .home-ad1 ul li .item .line{ -webkit-transition: all 500ms cubic-bezier(1.000,0,.6,1); transition: all 500ms cubic-bezier(1.000,0,.6,1)}
#main .home-ad1 ul li .item .line{ width: 0; max-width: 80%; height: 2px; margin: 0; display: inline-block; background:#7eced5;}
#main .home-ad1 ul li .item h5{ font-size:18px; line-height:28px;}

#main .home-ad1 ul li .item:hover{ background:rgba(0,0,0,0.05);}
#main .home-ad1 ul li .item:hover .ad-descript{ -webkit-transform: translateY(-35px); transform: translateY(-35px); opacity: .8;}
#main .home-ad1 ul li .item:hover svg path{ stroke:#7eced5;}
#main .home-ad1 ul li .item:hover h5,#main .home-ad1 ul li .item:hover .ad-descript{ color:#7eced5;}
#main .home-ad1 ul li .item:hover h5{ -webkit-transform: translateY(35px); transform: translateY(35px);}
#main .home-ad1 ul li .item:hover .line{ width:150px;}

#main .swiper-btn{ position:absolute; top:50%; width:32px; height:32px; border-radius:50%; background:#eaeaea; z-index:10; display: flex; align-items: center; justify-content: center; cursor:pointer;}
#main .swiper-btn svg{ width:15px; height:15px;}

#main .cate-box{ padding:80px 0 60px; background:#333; }
#main .cate-box .tit a{ color:#fff;}
#main .cate-box .swiper-prev{ left:100px;}
#main .cate-box .swiper-next{ right:100px;}

#main .cate-box ul li{ border-radius:4px;}
#main .cate-box ul li:after{content: " "; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.5; z-index:5;}
#main .cate-box .cate-text{ position:absolute; left:0; top:50%; width:100%; -webkit-transform:translateY(-50%); transform:translateY(-50%); padding:0 30px; box-sizing:border-box; text-align:center;}
#main .cate-box .svg{ font-size: 24px; line-height: 70px; height: 70px; width: 70px; margin-left: -35px; left: 50%; border-radius: 50%; position: relative; margin-top: 0; margin-bottom: 15px; display: flex; align-items: center; justify-content: center;     background-color: #fff; color: #7eced5; transition-duration: 500ms; transition-property: transform; transform: translate(0,-40px);}
#main .cate-box .svg svg path{stroke: #7eced5; stroke-dasharray: 55; stroke-dashoffset: 56;     -webkit-transform-origin: 100%; transform-origin: 100%; -webkit-transition: all 1s .3s cubic-bezier(0.25,.45,.43,.97) !important; transition: all 1s .3s cubic-bezier(0.25,.45,.43,.97) !important;}
#main .cate-box .cate-name{ color:#fff; font-weight:700; font-size:16px; transition-duration: 500ms; transition-property: transform; transform: translate(0,20px);}
#main .cate-box .cate-bg{background: -webkit-gradient(linear,left top,left bottom,color-stop(25%,rgba(126,206,213,0.60)),to(rgba(126,206,213,1.0))); background: -webkit-linear-gradient(top,rgba(126,206,213,0.60) 25%,rgba(126,206,213,1.0) 100%); background: linear-gradient(to bottom,rgba(126,206,213,0.60) 25%,rgba(126,206,213,1.0) 100%);     -webkit-transition: all .4s; transition: all .4s; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; text-align: center; overflow: hidden; border-radius: inherit;}

#main .cate-box .cate-con:hover svg path{  stroke-dashoffset: 0; -webkit-transition: all 1.5s .3s cubic-bezier(0.25,.45,.43,.97) !important; transition: all 1.5s .3s cubic-bezier(0.25,.45,.43,.97) !important;}
#main .cate-box .cate-con:hover .cate-bg{opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100);}
#main .cate-box .cate-con:hover .svg,#main .cate-box .cate-con:hover .cate-name{ -webkit-transform:translate(0,0); transform:translate(0,0);}

#main .cate-box ul li.swiper-slide-prev:after,
#main .cate-box ul li.swiper-slide-active:after,
#main .cate-box ul li.swiper-slide-next:after{ opacity:0; z-index:1;}


#main .service-box{background:none !important;padding:60px 0 0;}
#main .service-box li{text-align:left; padding:0 1%; width:33.3333%; margin-bottom:0;}
#main .service-box .service-list__con{position:relative; margin:0 1% 40px;}
#main .service-icon { position: absolute; left: 0; top: 10px; margin-bottom: 0; width: 126px; height: 126px; overflow: hidden; text-align:center;}
#main .service-icon i{color:#7eced5;font-size:60px; line-height:1;}
#main .service-list__con .service-info{ padding:10px 0; padding-left:145px;}
#main .service-list__con h4{font-size:21px;color:#171d70;line-height:25px;margin:10px 0 20px;transition:all 0.3s ease-out;font-weight:500;}
#main .service-list__con p{line-height:25px;font-size:14px;color:#171d70;}



#main .index-title{ position:relative;}
#main .tit{ font-size: 18px; line-height: 30px; font-weight: 700; color:#fff; text-align:center; margin-bottom:30px;}

#main .single-tag{ background:#eee; display:inline-block; width:100%;}
#main .tag-box{ margin-top:-260px;}
#main .single-tag .tit{ text-align:left;}
#main .single-tag .swiper-btn{ background:none; border:1px solid #eaeaea; top:0;}
#main .single-tag .swiper-prev{ right:40px; }
#main .single-tag .swiper-next{ right:0; }


#main .swiper-tag{ box-sizing:border-box;}
#main .common-index-list{font-size:0;}
#main .common-index-list li{ margin-bottom:30px;}
#main .common-index-list li .product-pic{ position:relative;}
#main .common-index-list li .project-links-container{    position: absolute; top: 0; left: 0; width: 100%; height: 100%;    display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center;  -ms-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; -ms-justify-content: center; justify-content: center;  opacity:0; -webkit-transition: all .4s; transition: all .4s;}
#main .common-index-list li .project-links-container a{ width: 70px; height: 70px; border-radius: 100px; background:#fff; display:inline-block; text-align: center; transform: translate(0,40px); transition-duration: 500ms; transition-property: transform; box-sizing:border-box; display: flex; align-items: center; justify-content: center; }
#main .common-index-list li .project-links-container a svg path{ stroke: #7eced5; stroke-dasharray: 40; stroke-dashoffset: 44; transform-origin: 100%;
    -webkit-transition: all 1s .3s cubic-bezier(0.25,.45,.43,.97) !important;}
#main .common-index-list li .product-img{ display:block; text-align:center; position:relative;}
#main .common-index-list li .product-img:after { position: absolute; top: 0; left: 0; width: 100%; content: ""; height: 100%; opacity: 0; -webkit-transition: opacity .35s linear; transition: opacity .35s linear; background-color: rgba(203,16,35,.85); background: rgba(203,16,35,.85); background: -webkit-linear-gradient(to bottom,rgba(126,206,213,0.60) 25%,rgba(126,206,213,1.0) 100%); background: linear-gradient(to bottom,rgba(126,206,213,0.60) 25%,rgba(126,206,213,1.0) 100%);}
#main .common-index-list li img{max-width:100%; display:block;}
#main .common-index-list li .product-txt{ text-align:center; border:1px solid #e3e3e3; background:#fff;}
#main .common-index-list li .product-name{font-size: 16px; line-height: 26px; font-weight: bold;color:#3b3f4a;text-transform:capitalize;display:inline-block;margin:15px;}

#main .common-index-list li .product-pic:hover .product-img:after,#main .common-index-list li .product-pic:hover .project-links-container{ opacity:1;}

#main .common-index-list li .product-pic:hover .project-links-container a{ transform: translate(0,0);}
#main .common-index-list li .product-pic:hover .project-links-container svg path{ stroke-dashoffset: 0; transition: all .6s .3s cubic-bezier(0.25,.45,.43,.97) !important;}
#main .common-index-list li .product-pic:hover svg path.delay-1{ transition-delay: .3s !important;}
#main .common-index-list li .product-pic:hover svg path.delay-2 { transition-delay: .4s !important;}


#main .tag-btn{ position:absolute; top:50%; transform:translateY(-50%); display:block; cursor:pointer;}
#main .tag-btn svg{ fill:rgba(0,0,0,0.2);}
#main .tag-btn:hover svg{ fill:rgba(0,0,0,0.4);}
#main .tag-btn.swiper-prev{ left:0;}
#main .tag-btn.swiper-next{ right:0;transform:translateY(-50%) rotate(180deg);}
 


#main img{ display:block; max-width:100%;}
#main .news{position:relative;overflow:hidden;text-align:center; background:#eee; padding:50px 0;}
#main .news .tit{ position:relative; margin-bottom:30px; padding-bottom:5px; margin-bottom:20px;}
#main .news .tit a{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:0 15px; background:#eee;}
#main .news .swiper-news{position:relative;overflow:hidden;}
#main .news li{box-sizing:border-box;position:relative; padding:15px 0 25px;}
#main .news li .news-item{ box-shadow:0 0 20px 0px rgba(0,0,0,0.1); background:#fff; margin-bottom: 10px;}
#main .news li .news-img{background-size:cover;background-repeat:no-repeat;background-position:center;height:250px;display:block;position:relative;}
#main .news li .text{padding:25px;text-align:left;}
#main .news li .title{display:block;margin-bottom:10px;margin-top:15px;line-height:1.1;text-transform:uppercase;color:#7eced5;font-size:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;}

#main .news li .time{ border-bottom:1px solid #EBEBEB; position:relative; padding-bottom:10px; font-size:14px;}
#main .news li .time svg{ fill:#7eced5; width:18px; height:18px; margin:0 5px -5px 0}
#main .news li .time:after{ content: ""; position: absolute; bottom: -1px; width: 40px; height: 2px; background: #7eced5; left: 0;}
#main .news li .descript{font-size:14px;color:#888989;line-height:24px;margin-top:20px;margin-bottom:20px;}
#main .news li .more{ position: absolute; bottom: -60px; left: 50%; opacity: 0; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
#main .news li  .more a{color: #fff;font-size: 14px;text-transform: uppercase;border-radius:30px;display:inline-block;padding:12px 20px; background:#7eced5; position:relative; overflow:hidden;}
#main .news li .news-item:hover .more{ bottom: 5px; opacity: 1;}
#main .news .swiper-btn{ background:rgba(255,255,255,0.8);}
#main .news .swiper-next{ right:0;}
#main .news .swiper-prev{ left:0;}


#footer{background:#222;color:#555;font-size:14px;padding-top:0;}
#footer .help-center{padding:70px 0;}

#footer .help-center dt{margin-bottom:15px;font-size:21px;padding:0;line-height:25px;text-transform:capitalize;font-weight:100;}
#footer .help-center .subscribe{padding:0;text-align:left;}
#footer .help-center .newsletter_txt{border-radius:0;background:none;color:#999;border:0;border-bottom:1px solid rgba(255,255,255,.1);height:40px;padding:0 0 3px;margin-bottom:3px;}
#footer .help-center .newsletter_btn{background:#7eced5;color:#fff;transition:all 300ms linear 0ms;line-height:25px;padding: 5px 20px;margin: 10px 0;border-radius: 3px;position:relative;}
#footer .help-center .newsletter_btn:hover{opacity:0.8;}


#footer .help-center dd{font-size:13px;}
#footer .help-center dd a{ padding:5px 0; display:inline-block; color:#555;}
#footer .help-center dd a:hover{ color:#7eced5;}

#footer .foot{padding:30px 0; border-top:1px solid rgba(255,255,255,.1);}

#footer .copyright{border-top:0;height:30px;line-height:30px;text-align:center;text-transform:uppercase;margin-top:0;float:left;}
#footer .sns{float:right;margin:0;}
#footer .sns li a{line-height:30px;color:#6f7070;border:0;display:block;transition:all 0.3s ease-in-out;font-size:16px;}
#footer .sns li a:hover{color:#00a6d0;}
#footer .sns li{margin:0 0 0 15px;width:auto;height:30px;}

/*内页*/
#product-detail .relevant-list li img{display:block;width:100%;}
#product-detail .relevant-list li.other{display:none;}
#product-detail .relevant-list li .product-name .icon{display:none;}
#product-detail .relevant-list li .product-name{height:auto;}



/*橙色 #ff9832*/
.home_common_style_orange .header-box #nav-box .nav>li.on>a,
.home_common_style_orange .header-box #nav-box .nav>li.home>a,
.home_common_style_orange .header-box #nav-box .nav>li.on>a,
.home_common_style_orange #main .service-icon i,
.home_common_style_orange #footer .sns li a:hover{color:#ff9832;}

.home_common_style_orange #main .news li .time .icon,
.home_common_style_orange #main .news li .more .icon{ fill:#ff9832;}

.home_common_style_orange #main .banner-box .banner-btn,
.home_common_style_orange .header-box #nav-box .nav-sub dd a:hover,
.home_common_style_orange .header-box #nav-box .nav>li>a:before,
.home_common_style_orange .header-box .header-rt .sns li:hover,
.home_common_style_orange #footer .help-center .newsletter_btn{background:#ff9832;}

.home_common_style_orange #main .common-index-list li .product-img:after{background:-webkit-linear-gradient(180deg,rgba(255,152,50,0.85) 0%,rgba(255,180,80,0.85) 100%); background:linear-gradient(180deg,rgba(255,152,50,0.85) 0%,rgba(255,180,80,0.85) 100%)}

.home_common_style_orange .header-box #nav-box .nav-sub{border-color:#ff9832;}


/*蓝色#0080da*/
.home_common_style_blue .header-box #nav-box .nav>li.on>a,
.home_common_style_blue .header-box #nav-box .nav>li.home>a,
.home_common_style_blue .header-box #nav-box .nav>li.on>a,
.home_common_style_blue #main .service-icon i,
.home_common_style_blue #footer .sns li a:hover{color:#0080da;}

.home_common_style_blue #main .news li .time .icon,
.home_common_style_blue #main .news li .more .icon{ fill:#0080da;}

.home_common_style_blue #main .banner-box .banner-btn,
.home_common_style_blue .header-box #nav-box .nav-sub dd a:hover,
.home_common_style_blue .header-box #nav-box .nav>li>a:before,
.home_common_style_blue .header-box .header-rt .sns li:hover,
.home_common_style_blue #footer .help-center .newsletter_btn{background:#0080da;}

.home_common_style_blue #main .common-index-list li .product-img:after{background:-webkit-linear-gradient(180deg,rgba(0,128,218,0.85) 0%,rgba(50,200,255,0.85) 100%); background:linear-gradient(180deg,rgba(0,128,218,0.85) 0%,rgba(50,200,255,0.85) 100%)}

.home_common_style_blue  .header-box #nav-box .nav-sub{border-color:#0080da;}


/*绿色#21a421*/

.home_common_style_green .header-box #nav-box .nav>li.on>a,
.home_common_style_green .header-box #nav-box .nav>li.home>a,
.home_common_style_green .header-box #nav-box .nav>li.on>a,
.home_common_style_green #main .service-icon i,
.home_common_style_green #footer .sns li a:hover{color:#2cd32c;}

.home_common_style_green #main .news li .time .icon,
.home_common_style_green #main .news li .more .icon{ fill:#2cd32c;}

.home_common_style_green #main .banner-box .banner-btn,
.home_common_style_green .header-box #nav-box .nav-sub dd a:hover,
.home_common_style_green .header-box #nav-box .nav>li>a:before,
.home_common_style_green .header-box .header-rt .sns li:hover,
.home_common_style_green #footer .help-center .newsletter_btn{background:#2cd32c;}

.home_common_style_green #main .common-index-list li .product-img:after{background:-webkit-linear-gradient(180deg,rgba(44,211,44,0.85) 0%,rgba(100,255,100,0.85) 100%); background:linear-gradient(180deg,rgba(44,211,44,0.85) 0%,rgba(100,255,100,0.85) 100%)}

.home_common_style_green  .header-box #nav-box .nav-sub{border-color:#2cd32c;}


/*青色#21b5b5*/
.home_common_style_cyan .header-box #nav-box .nav>li.on>a,
.home_common_style_cyan .header-box #nav-box .nav>li.home>a,
.home_common_style_cyan .header-box #nav-box .nav>li.on>a,
.home_common_style_cyan #main .service-icon i,
.home_common_style_cyan #footer .sns li a:hover{color:#27d3d3;}

.home_common_style_cyan #main .news li .time .icon,
.home_common_style_cyan #main .news li .more .icon{ fill:#27d3d3;}

.home_common_style_cyan #main .banner-box .banner-btn,
.home_common_style_cyan .header-box #nav-box .nav-sub dd a:hover,
.home_common_style_cyan .header-box #nav-box .nav>li>a:before,
.home_common_style_cyan .header-box .header-rt .sns li:hover,
.home_common_style_cyan #footer .help-center .newsletter_btn{background:#27d3d3;}

.home_common_style_cyan #main .common-index-list li .product-img:after{background:-webkit-linear-gradient(180deg,rgba(39,211,211,0.85) 0%,rgba(90,255,255,0.85) 100%); background:linear-gradient(180deg,rgba(39,211,211,0.85) 0%,rgba(90,255,255,0.85) 100%)}

.home_common_style_cyan  .header-box #nav-box .nav-sub{border-color:#27d3d3;}

/*紫色#36012d*/
.home_common_style_purple .header-box #nav-box .nav>li.on>a,
.home_common_style_purple .header-box #nav-box .nav>li.home>a,
.home_common_style_purple .header-box #nav-box .nav>li.on>a,
.home_common_style_purple #main .service-icon i,
.home_common_style_purple #footer .sns li a:hover{color:#bb2297;}

.home_common_style_purple #main .news li .time .icon,
.home_common_style_purple #main .news li .more .icon{ fill:#bb2297;}

.home_common_style_purple #main .banner-box .banner-btn,
.home_common_style_purple .header-box #nav-box .nav-sub dd a:hover,
.home_common_style_purple .header-box #nav-box .nav>li>a:before,
.home_common_style_purple .header-box .header-rt .sns li:hover,
.home_common_style_purple #footer .help-center .newsletter_btn{background:#bb2297;}

.home_common_style_purple #main .common-index-list li .product-img:after{background:-webkit-linear-gradient(180deg,rgba(187,34,151,0.85) 0%,rgba(190,50,200,0.85) 100%); background:linear-gradient(180deg,rgba(187,34,151,0.85) 0%,rgba(190,50,200,0.85) 100%)}

.home_common_style_purple  .header-box #nav-box .nav-sub{border-color:#bb2297;}


/*粉色#ea0073*/
.home_common_style_pink .header-box #nav-box .nav>li.on>a,
.home_common_style_pink .header-box #nav-box .nav>li.home>a,
.home_common_style_pink .header-box #nav-box .nav>li.on>a,
.home_common_style_pink #main .service-icon i,
.home_common_style_pink #footer .sns li a:hover{color:#f84c96;}

.home_common_style_pink #main .news li .time .icon,
.home_common_style_pink #main .news li .more .icon{ fill:#f84c96;}

.home_common_style_pink #main .banner-box .banner-btn,
.home_common_style_pink .header-box #nav-box .nav-sub dd a:hover,
.home_common_style_pink .header-box #nav-box .nav>li>a:before,
.home_common_style_pink .header-box .header-rt .sns li:hover,
.home_common_style_pink #footer .help-center .newsletter_btn{background:#f84c96;}

.home_common_style_pink #main .common-index-list li .product-img:after{background:-webkit-linear-gradient(180deg,rgba(245,76,150,0.85) 0%,rgba(255,100,200,0.85) 100%); background:linear-gradient(180deg,rgba(255,100,200,0.85) 0%,rgba(190,50,200,0.85) 100%)}

.home_common_style_pink  .header-box #nav-box .nav-sub{border-color:#f84c96;}




@media screen and (max-width:1366px){
	.wrapper{width:100%;box-sizing:border-box;padding:0 50px;}
    #main .banner-box .li .text{width:100%;left:0;padding:0 50px;box-sizing:border-box;transform:translate(0,-50%);}
	#main .home-ad2 .ad-con{left:50px;}
	#main .home-ad4 .index-title-box{width:60%;}
	#main .home-ad3 .ad-txt{left:50px;right:50px;}
	#main .common-index-list li .product-name{font-size:22px;}
	#main .banner-box h3{font-size:110px;}
	
	}
@media screen and (max-width:1200px){
	.header-box .header{height:60px;}
	.header-box .header-rt{height:60px;line-height:30px;}
	.header-box .logo{height:60px;line-height:30px;width:50%;}
	.header-box .search-btn > .icon{fill:#fff;}
	.header-box .header-nav .nav-box,
	.header-box .header-rt .sns{display:none;}
	.header-box .mobile-nav{display:inline-block;}
	.header-box .header-nav{line-height:normal;}
	.header-box .feedback{display:none;}
	.header-box .search-box{top:60px;}
	#main{margin:0 auto;}
	#main .service-box{{padding:0;}
	#main .service-box li{width:50%;}
	#main .common-index-list li .product-name{font-size:20px;}
	#main .home-ad4 .index-title-box{width:70%;}
	#main .home-ad4 .ad-con{padding-top:100px;}
	#main .news li .tit{font-size:24px;}
	#main .news li{width:33.33%;}
	#main .news li .news-img{width:100%;height:180px;}
	#main .news li .text{width:100%;padding:20px 0 0;}

	
	
	#inquiry-box, #feedback-box, #search-error404, #error404, #sitemap-box, #module-login, #brands-box, #notice-box{margin:0 auto;}
	#page-products-list, #navpage, #page-news, #news-detail, #product-detail .product-detail__wrapper{margin-top:50px;}
	}
@media (max-width: 1199px){

	
}
@media screen and (max-width:1024px){
	#main .service-bg{padding:75px 0;}
	#main .service-icon i{padding:15px 0;}
	#main .index-title-box{margin-bottom:20px;}
	#main .index-title-box .index-title{font-size:36px;}
	#main .common-index-list li{ width:50%;}
	#main .common-index-list li .product-name{ font-size:18px;}
	#main .news li{width:50%;}
	#main .news li .news-img{ width:100%; height:240px;}
	#main .news li .text{ width:100%; padding:15px; display:block; box-sizing:border-box;}
	#main .news li .news-item .more{opacity:1;bottom:5px;}
	#main .news li .more a{font-size:13px;padding:6px 20px;}
	}
@media screen and (max-width:992px){
  	#product-detail .bigimgbox:before{z-index:9;}
	#main .home-ad4 .index-title-box{width:100%;}
	#main .home-ad3{height:400px;}
	
	
	#footer .help-center{padding:50px 0;font-size:0;}
	#footer .help-center dl.contact-us{width:50%;}
	#footer .help-center dl{width:25%;display:inline-block;float:none;vertical-align:top;}
	#footer .help-center dl:nth-child(3){padding:0;}
	#footer .help-center dl.subscribe{width:100%;padding-right:0;margin-top:20px;}
	#footer .help-center dt{font-size:16px;}
	}
@media screen and (max-width:768px){
	.header-box .search-box form{width:90%;}

	#footer .sns{text-align:center;float:none;}
	#footer .sns li{margin:5px 2.5px;}
	
	#footer .copyright{float:none;height:auto;}
	#footer .foot{padding:10px 0;}
	
	#main .banner-box .li{height:400px;}
	#main .banner-box .banner-detail{font-size:22px;margin-bottom:10px;}
	#main .banner-box h3{font-size:40px; line-height:80px;margin-top:20px;}
	
	#main .index-title-box .index-title{font-size:30px;}
	#main .service-box li{width:100%;}
	#main .home-ad1 ul li{ width:50%;}
	#main .home-ad1 ul li:nth-child(3n-1),
	#main .home-ad1 ul li:nth-child(3n-2){ box-shadow:none;}
	#main .home-ad1 ul li:nth-child(odd){ box-shadow:1px 0 0 rgba(0,0,0,0.1) !important;}
	#main .service-box .wrapper{ padding-bottom:40% !important;}
	}
@media screen and (max-width:767px){
	.wrapper{padding:0 20px;}

	#footer .sns li a{font-size:14px;}
	#footer .help-center dl dd{padding:0;}
	#footer .help-center dl.subscribe{padding-right:0;margin:0;}
	#footer .help-center dl dt{border-bottom:0;}
	#footer .help-center dd a{margin:0;padding:0;}
	
	#main .home-ad2 .ad-con{position:static;transform:none;width:100%;margin-bottom:40px;}
	#main .home-ad2 .ad-img{width:100%;}
	#main .common-index-list li{width:50%;}
	#main .common-index-list li .product-name{font-size:18px;line-height:20px;height:40px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}
	#main .news li{width:100%;font-size:0;}
	#main .news li .tit{text-overflow: unset;
    white-space: normal;}
	#main .news li .tit{font-size:22px;}
	#main .home-ad3 .ad-tit{font-size:25px;margin-top:20px;}
	#main .home-ad3 .ad-txt{left:20px;right:20px;}
	#main .cate-box ul li{ width:33.3333%;}
	#main .home-ad1 .ad .ad-con,#main .home-ad1 .img{ margin-top:0;}
	#main .service-box .wrapper{ padding-bottom:50% !important;}
	#main .news li .news-img{ width:100%; height:220px;}
	#main .news li .text{ width:100%;}
	#main .news li .news-item .more{position:static;transform:none;opacity:1;}
	#main .home-ad1 ul li:nth-child(odd){ box-shadow: none;}
	#main .news .swiper-btn{top:120px;}
	}
@media screen and (max-width:480px){

	#page-products-list, #navpage, #page-news, #news-detail{margin-top:40px;}
    #main .banner-box .li{height:350px;}
	#main .banner-box .banner-detail{font-size:18px;}
	#main .banner-box h3{font-size:30px; line-height:50px;}
	#main .banner-box .li .text{ padding:0 30px; top:55%;}
	#main .banner-box .li .text .row{ padding:0;}
	#main .common-index-list li,
	#main .service-box .service,
	#main .service-box .rt-ad,
	#main .news li .news-img,
	#main .news li .text,
	#footer .help-center dl{ width:100% !important;}
	#main .cate-box ul li{ width:50%;}
	#main .home-ad1 .img{ margin-top:0;}
	#main .home-ad1 ul li{ width:100%;}
	#main .home-ad1 ul li:nth-child(odd){ box-shadow:none !important;}
	#main .home-ad1 ul li .item{ min-height:240px;}
	#main .cate-box .swiper-prev{ left:10px;}
	#main .cate-box .swiper-next{ right:10px;}
	#main .cate-box{ padding:50px 0 30px;}
	#main .service-box .wrapper{ padding-bottom:100% !important;}
	
	.language-list{height:auto;max-height:calc(100vh - 60px);right:0;}
	.language{position:static;}
	
}
@media screen and (max-width:320px){
	
	
	}