@charset "utf-8";
/* CSS Document */
html, body {font-size: 12px;margin: 0px;padding: 0px;text-decoration: none;font-family:"寰蒋闆呴粦",Arial,Helvetica,sans-serif;background: #fff;text-align: left;-webkit-text-size-adjust: none;}
a { color: #666666;text-decoration: none;outline: 0px none; star:expression(this.onFocus=this.blur());}
a:hover, a:active { color: #d82128;}
* { margin: 0px;padding: 0px;list-style: none;}
table { border-collapse: collapse;}
ul, li {list-style: none;border: 0 none;padding: 0px;margin:0;}
form {margin: 0px;}
img {border: 0px none;text-align-last: center;vertical-align: middle;_azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")', ''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true);}
center {text-align: left; color: #999;height: 50px;}
#clear, .clear {clear: both;float: none!important;background: none;width: 0 !important; height: 0 !important; margin:0 !important; padding:0 !important;}
#noData, .noData {color: #ccc;font-size: 14px;text-align: left;padding: 50px 0px;}
.fl-left, .fl{ float:left;}
.fl-right, .fr{ float:right;}
input, textarea, input:focus, textarea:focus, button{outline: none;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/*head TOP*/
#head{ position:fixed; z-index:1000; left:0; top:-1px; width:100%; height:110px; background:#fff; border-bottom:1px solid #eee; transition:all .35s;}
#head.active {transform: translateX(-220px);}
#head .wrap{ position:relative; width:94%; max-width:1600px; margin:0 auto; }
#head .logo{ position:relative; width:20%; line-height:110px;overflow:hidden; transition:all .35s;}
#head .logo>a{display:block;}
#head .logo>a>img{ width:100%; height:auto; max-width:240px;}
#head .menu{ width:50%; height:110px; padding:0 2% 0 8%; text-align:left; transition:all .35s;}
#head .menu>.wap{ display:none;}
#head .menu>ul{margin:0 auto;}
#head .menu>ul>li{display:block; float:left; width:16.6%; text-align:center;}
#head .menu>ul>li>a{ position:relative; display:block; padding:0 16px; font-size:18px; color:#666; line-height:110px; transition:all .35s;}
#head .menu>ul>li>a>span{ position:relative;z-index:100;}
#head .menu>ul>li>a:after{ position:absolute;z-index:99; left:0; bottom:0; width:100%;height:0; opacity:0; background:#d0021c; content:''; transition:all .35s;}
#head .menu>ul>li>div{display:none; position:fixed;z-index:96; left:0; top:109px; width:100%; height:auto; text-align:left; background:rgba(0,0,0,.8);}
#head .menu>ul>li>div>.box{ width:60%;margin:0 auto;padding:50px 0;}
#head .menu>ul>li>div .con{ width:70%;}
#head .menu>ul>li>div .con>.tit{ padding:20px 0; font-size:28px; font-weight:normal; color:#d0021c;}
#head .menu>ul>li>div .con>.txt{ font-size:14px; color:rgba(255,255,255,.7); line-height:24px;}
#head .menu>ul>li>div .con>.more{padding:10px 0;text-align:left;}
#head .menu>ul>li>div .con>.more>a{display:inline-block; color:#d0021c; font-size:14px;}
#head .menu>ul>li>div .con>.nav{ padding:20px 0; text-align:left;}
#head .menu>ul>li>div .con>.nav>a{ position:relative; display:inline-block; padding:2px 0; font-size:16px; color:rgba(255,255,255,.8); margin-bottom:5px; margin-right:30px; transition:all .35s;}
#head .menu>ul>li>div .con>.nav>a:after{ position:absolute;z-index:1;left:0;bottom:0; width:0;height:1px; background:#d0021c; content:''; transition:all .35s;}
#head .menu>ul>li>div .con>.nav>a:hover{ color:#d0021c;}
#head .menu>ul>li>div .con>.nav>a:hover:after{ width:100%;}
#head .menu>ul>li>div .img{ display:none; width:24%; padding:20px 0; text-align:right;}
#head .menu>ul>li>div .img>img{width:100%;height:auto;}
#head .menu>ul>li.A>a{ color:#fff;}
#head .menu>ul>li.A>a:after{ height:100%;opacity:1;}
#head .mall{width:120px; line-height:110px; text-align:center; transition:all .35s; margin-right: 16px;}
#head .mall img{height: 24px; margin-top: -3px; margin-right: 3px;}
#head .mall span{font-size: 16px; display: inline-block;}
#head .language{width:48px; line-height:110px; text-align:center; transition:all .35s; margin-right: 16px;}
#head .language>a{display:inline-block; width:46px; height:46px; line-height:46px; color:#d0021c; font-size:16px; border:1px solid #d0021c; border-radius:100%; transition: all .2s; background: #d0021c; color: #fff;}
#head .language>a:hover{background: #d0021c; color: #fff;}
#head .language>a.wap{display:none;}
#head .search{width:48px; line-height:110px; text-align:center; transition:all .35s;}
#head .search>a{display:inline-block; width:46px; height:46px; line-height:46px; color:#d0021c; font-size:16px; border:1px solid #ccc; border-radius:100%; transition: all .2s; text-align: center; background: #ccc;}
#head .search>a>img{height: 24px; margin-top: -3px;}
#head .search>.wap{display:none;}
#head .search>form{display:block; box-sizing:border-box; width:100%; max-width:300px; padding:0 20px; border:1px solid #ddd; height:50px; border-radius:50px;}
#head .search>form input[type="text"]{outline: medium; float:left; height:50px; line-height:50px; width:70%; padding:0 5%;border:none; font-size:14px; background:none; color:#666; box-sizing:border-box; overflow:hidden;}
#head .search>form input::-webkit-input-placeholder{ color:#ccc;}
#head .search>form button{float:right; width:20%; height:50px; border:none; outline: none; opacity:1; background:url(../images/icon-go-red.png) no-repeat center center; background-size:auto 30px; cursor:pointer; box-sizing:border-box;overflow:hidden;}
#search-wrapper{
position: fixed;
width: 100%; height: 100%;
z-index: 9999;
display: none;
}
#search-wrapper>.bg{
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
background: rgba(0,0,0,.8);
}
#search-wrapper .box{
width: 50%;
height: 50px;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
margin: auto;
}
#search-wrapper .box input{
background: #fff;
width:100%; height: 50px; line-height: 50px;
font-size: 16px;
box-sizing: border-box;
padding: 0 20px;
border: 0px none;
border-radius: 8px;
}
#search-wrapper .box button{
display: block;
width: 50px; height: 50px;
position: absolute; right: 0; top: 0;
background: url('../images/icon-go-red.png') no-repeat center/24px;
border: 0px none;
cursor: pointer;
}
#search-wrapper .close{
display: block;
position: absolute;
right: 0; top: -50px;
}
@media only screen and (max-width: 1460px){
#head .wrap{ max-width:1360px;}
#head .menu>ul>li>a{ padding:0 16px; font-size:17px;}
#head .language{ max-width:60px;}
#head .language>a{font-size:15px;}
}
@media only screen and (max-width: 1360px){
#head .menu{ padding:0 2% 0 6%; }
#head .language{ max-width:50px;}
#head .language>a{font-size:14px;}
}
@media only screen and (max-width: 1300px){
#head .logo{ width:19%; padding-right:1%;}
#head .menu{ width:56%; padding:0 1%; }
}
@media only screen and (max-width: 1180px){
#head .menu>ul>li>a{ padding:0 12px; font-size:16px;}
#head .language{margin-right: 5px;}
#head .language>a, #head .search>a{width: 38px; height: 38px; line-height: 38px;}
#head .search>a{line-height: 36px;}
#head .mall{width: 95px;}
#head .mall img{height: 22px;}
#head .mall span{font-size: 15px;}
#head .search>form{ height:40px;}
#head .search>form input[type="text"]{height:40px;line-height:40px;}
#head .search>form button{height:40px;background-size:auto 24px;}
}
@media only screen and (max-width: 1080px){
#head{ height:80px; border-bottom:0 !important; box-shadow:0 2px 4px rgba(0,0,0,.1);}
#head .logo{ padding-right:3%; line-height:80px;}
#head .menu{ width:62%; height:80px;}
#head .menu>ul>li>a{ line-height:80px;}
#head .menu>ul>li>div{top:80px;}
#head .mall{display: none;}
#head .language{line-height:80px;}
#head .search{text-align:center; line-height:80px;}
#head .search>.wap{ position:relative; display:block; width:100%; height:100%;}
#head .search>.wap>a{display:inline-block; width:40px;height:40px; line-height:40px; background:#d0021c url("../images/icon-search.png") no-repeat; background-size:24px auto; background-position:50% 50%; border:1px solid #d0021c; border-radius:100%;}
#head .search>form{display:none;}
}
@media only screen and (max-width: 960px){
#head{ padding-top:36px;}
#head .wrap{ width:100%; max-width:none;overflow:hidden;}
#head .logo{ padding-left:3%;}
#head .menu{ position:relative; padding:0 !important; width:50%; float:right;}
#head .menu>.wap{ display:block; position:absolute; right:0;top:0; width:80px; height:100%; cursor:pointer;}
#head .menu>.wap>.btn {position: absolute;top:50%; left:50%; z-index: 9; margin-top:-16px; margin-left:-16px; display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width:32px;height:32px;-webkit-tap-highlight-color: transparent;-ms-touch-action: manipulation;touch-action: manipulation;}
#head .menu>.wap>.btn>span { position: relative; display:block; margin-top:16px;}
#head .menu>.wap>.btn>span,#head .menu>.wap>.btn>span:after,#head .menu>.wap>.btn>span:before { display: block;width:32px;height: 2px;background-color: #d0021c;transition-duration: .4s;-webkit-transition-property: background-color,-webkit-transform;-moz-transition-property: background-color,-moz-transform; -o-transition-property: background-color,-o-transform; transition-property: background-color,transform;}
#head .menu>.wap>.btn>span:after,.menu>.wap>.btn>span:before { position: absolute; content: "";}
#head .menu>.wap>.btn>span:before {top: -10px;}
#head .menu>.wap>.btn>span:after {top: 10px;}
#head .menu>.wap>.btn.active span { background-color: transparent;}
#head .menu>.wap>.btn.active span:after,#head .menu>.wap>.btn.active span:before {background-color:#d0021c;}
#head .menu>.wap>.btn.active span:before {-webkit-transform: translateY(10px)rotate(45deg);-moz-transform: translateY(10px)rotate(45deg);transform: translateY(10px)rotate(45deg);-ms-transform: translateY(10px)rotate(45deg);}
#head .menu>.wap>.btn.active span:after {-webkit-transform: translateY(-10px)rotate(-45deg);-moz-transform: translateY(-10px)rotate(-45deg);transform: translateY(-10px)rotate(-45deg);-ms-transform: translateY(-10px)rotate(-45deg);}
#head .menu>ul{display:none;}
#head .language{position:fixed;z-index:2;left:0;top:0; width:100%; height:36px; line-height:36px; background:#fff; border-bottom:1px solid #eee; text-align:center; float:none; max-width: none;}
#head .language>a{display:none; background: #fff;}
#head .language>a.wap{display:block!important; width:100%;height:36px; line-height:36px; color:#999; font-family:Arial; font-size:14px; border:0 !important; border-radius:0;}
#head .search{display:none;}
}
@media only screen and (max-width: 780px){
#head{height:60px;}
#head .logo{width:42%; line-height:60px;}
#head .logo>a>img{max-width:200px;}
#head .menu{height:60px;}
#head .menu>.wap{width:60px;}
}
/*END*/
#headwap {background:#d0021c;color: #fff;position: fixed;right: -300px;top: 0px;width: 220px;height: 100%;z-index: 9999;transition: all 0.35s;transform-origin: left center;transform: perspective(800px) rotateY(90deg);}
#headwap.active {right:0px;transform: rotateY(0deg);}
#headwap>.menu{padding:20% 0 10px 0;}
#headwap>.menu>ul{display:block;}
#headwap>.menu>ul>li{display:block;}
#headwap>.menu>ul>li>a{display:block; font-size:16px; color:#fff;padding:8px 20px; transition:all .35s;}
#headwap>.menu>ul>li.A>a{ background:rgba(0,0,0,.2);}
#headwap>.menu>ul>li>div{display:none;padding:0 20px;}
#headwap>.menu>ul>li>div>a{display:block;padding:8px 0; font-size:13px; color:rgba(255,255,255,.9); border-bottom:1px solid rgba(255,255,255,.2);}
#headwap>.language{ padding:10px 20px; text-align:left;}
#headwap>.language>a{display:inline-block; padding:2px 20px; background:rgba(255,255,255,.2); border-radius:5px; color:rgba(255,255,255,.8); font-size:13px;}
#headwap>.language>a img{height:34px; width:auto; margin-right:4px; opacity:.8;}
#headwap>.search{ padding:20px; transition:all .35s;}
#headwap>.search>form{ display:block; box-sizing:border-box; width:100%; background:rgba(255,255,255,.5); height:30px; border-radius:30px;}
#headwap>.search>form input[type="text"]{outline: medium;float:left;height:30px;line-height:30px;width:80%;padding-left:16px;border:none; font-size:14px; background:none;color:#d0021c;box-sizing:border-box;overflow:hidden;}
#headwap>.search>form input::-webkit-input-placeholder{ color:#d0021c;}
#headwap>.search>form button{float:right;width:20%;height:30px;border:none; opacity:1;background:url(../images/icon-go-red.png) no-repeat center center;background-size:auto 20px;cursor:pointer;box-sizing:border-box;overflow:hidden;}
#headwap>.mall{margin-top: 10px; padding-left: 20px;}
#headwap>.mall a>img{height: 22px; vertical-align: middle; margin-top: -2px; margin-right: 3px;}
#headwap>.mall a>span{font-size: 15px; color: #fff;}
/*banner TOP*/
#banner{background:#fff; height:auto; overflow:hidden; padding-top:110px; transition:all .35s;}
#banner.active {transform: translateX(-220px);}
#banner .swiper-container{ position:relative; width:100%; height:100%;}
#banner .swiper-slide{ width:100%; height:100%; overflow:hidden; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
#banner .swiper-slide img{width:100%; height:auto;}
#banner .swiper-container-horizontal>.swiper-pagination-bullets, #banner .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 20px!important;}
#banner .swiper-pagination-bullet {width:40px !important;height:4px !important;border-radius:0!important; transition:all .35s;}
#banner .swiper-pagination-bullet-active { width:80px !important; opacity: 1;background: #d0021c;}
#banner .inside-container{ position:relative; margin:0 auto;}
#banner .inside-container>.wrap{ display:none; position:absolute;z-index:9; left:50%; bottom:40%; width:80%; margin-left:-40%;}
#banner .inside-container .txt{ text-align:left;}
#banner .inside-container .txt>h3{ display:block; font-size:40px; font-weight:700; color:#333;}
#banner .inside-container .txt>span{display:block;padding:10px 0; font-size:22px; font-family:Arial; color:rgba(0,0,0,.5);}
#banner .inside-container img{width:100%; height:auto; margin:0 auto;}
#banner .mob{display:none;}
@media only screen and (max-width: 1080px){
#banner{padding-top:80px;}
}
@media only screen and (max-width: 960px){
#banner{padding-top:96px;}
#banner .inside-container .txt>h3{font-size:28px;}
#banner .inside-container .txt>span{padding:0; font-size:17px;}
}
@media only screen and (max-width: 780px){
#banner .pc{display:none;}
#banner .mob{display:block;}
}
@media only screen and (max-width: 540px){
#banner .inside-container .txt>h3{font-size:20px;}
#banner .inside-container .txt>span{padding:0; font-size:14px;}
}
@media only screen and (max-width: 420px){
#banner .inside-container .txt>h3{font-size:14px;}
#banner .inside-container .txt>span{padding:0; font-size:12px;}
}
/*END*/
/*main TOP*/
#main{ margin:0 auto; transition:all .35s; }
#main.active {transform: translateX(-220px);}
#main .title{ position:relative; margin:10px auto;padding:10px 0; text-align:center;font-size:30px; color:#333;}
#main .title:after{ position:absolute;z-index:12;left:50%; bottom:0; margin-left:-20px; width:40px;height:1px; background:#d0021c; content:'';}
#main .more>a{ display:block;width:50px;height:50px;border:1px solid #fff;text-align: center;line-height: 50px;overflow: hidden;position:relative;transition:all .3s ease-out 0s;}
#main .more span{transform:translateX(-66px);display:inline-block;transition:all .3s ease-out 0s;font-size:16px;color:#fff;}
#main .more a img{ position:absolute; top:50%; left:50%; margin-top:-10px; margin-left:-6px;}
#main .more a:hover{ width:120px;text-align: right;padding-right:10px;}
#main .more a:hover span{transform: translateX(-50%);}
#main .more a:hover img{left:85%;}
#main>.search{ background:#f7f8f9;margin:0 auto;padding:20px 0;}
#main>.search>form{ display:block; margin:0 auto; box-sizing:border-box; width:80%; max-width:800px; background:#fff;overflow:hidden; border:1px solid #ddd; height:45px;}
#main>.search>form input[type="text"]{outline: medium;float:left;height:45px;line-height:45px;width:70%; padding:0 5%;border:none; font-size:14px; background:none;color:#666;box-sizing:border-box;overflow:hidden;}
#main>.search>form input::-webkit-input-placeholder{ color:#ccc;}
#main>.search>form button{ float:right;width:20%;height:41px; margin:1px 1px 0 0; border:none; opacity:1;background:#d0021c url(../images/icon-go-white.png) no-repeat center center;background-size:auto 25px;cursor:pointer;box-sizing:border-box;overflow:hidden; transition:all .35s;}
#main>.search>form button:hover{ background-color:#333;}
#main>.product{position:relative; margin:0 auto;}
#main>.product>.container{ position:relative; width:90%;max-width:1360px;margin:0 auto; padding:20px 0;}
#main>.product>.container .swiper-container{ margin:0 auto;}
#main>.product>.container .swiper-slide{padding:20px 0;}
#main>.product>.container .swiper-slide>a{ position:relative; display:block;padding:10px 20px; transition:all .35s;}
#main>.product>.container .swiper-slide>a>.img{ position:relative; text-align:center;overflow:hidden; transition:all .35s;}
#main>.product>.container .swiper-slide>a>.img>img{ width:100%;height:auto;}
#main>.product>.container .swiper-slide>a>.tit{ position:relative; width:80%;margin:20px auto; border-radius:0 30px 0 0; padding:5px 0; text-align:center;font-size:16px; color:#666; transition:all .35s;}
#main>.product>.container .swiper-slide>a>.tit:after{ position:absolute;z-index:1; left:0; bottom:0; width:100%; height:100%; opacity:0; background:#d0021c; border-radius:0 30px 0 0; content:''; transition:all .35s;}
#main>.product>.container .swiper-slide>a>.tit>span{ position:relative;z-index:9; transition:all .35s;}
#main>.product>.container .swiper-slide>a:hover .tit>span{ color:#fff;}
#main>.product>.container .button-next{ position:absolute;z-index:12; left:-5%; top:50%; margin-top:-30px; width:40px; height:40px; cursor:pointer;opacity:.2; background:url("../images/icon-arrow-left-circle-black.png") no-repeat; background-position:50% 50%; background-size:100% auto; transition:all .35s;}
#main>.product>.container .button-prev{ position:absolute;z-index:12; right:-5%; top:50%; margin-top:-30px; width:40px; height:40px; cursor:pointer;opacity:.2; background:url("../images/icon-arrow-right-circle-black.png") no-repeat; background-position:50% 50%; background-size:100% auto; transition:all .35s;}
#main>.product>.container .swiper-slide>a:hover .img{transform:scale(1.1) translateY(-10px);}
#main>.product>.container .swiper-slide>a:hover .tit:after{ opacity:1; left:10px;}
#main>.news{ margin:0 auto;}
#main>.news>.container{width:90%;max-width:1400px;margin:0 auto;}
#main>.news>.container>.isnew{margin:0 auto;}
#main>.news>.container>.isnew>ul{ text-align:center;margin:0 auto;}
#main>.news>.container>.isnew>ul>li{display:block; float:left; width:48%; padding:35px 0; border-bottom:1px solid #eee;}
#main>.news>.container>.isnew>ul>li:nth-child(2){float:right;}
#main>.news>.container>.isnew>ul>li>a{display:block;}
#main>.news>.container>.isnew>ul>li .img{width:216px; background:#666; text-align: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center; overflow:hidden;}
#main>.news>.container>.isnew>ul>li .img>img{width:100%;height:auto; transition:all 1s;}
#main>.news>.container>.isnew>ul>li .con{ width:58%; padding:0 4%; text-align:left;}
#main>.news>.container>.isnew>ul>li .con>.tit{ font-size:24px; font-weight:normal; color:#444;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#main>.news>.container>.isnew>ul>li .con>.txt{ height:70px; margin:15px 0; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden; font-size:15px; font-weight:normal; color:#999; line-height:25px;transition:all .35s;}
#main>.news>.container>.isnew>ul>li .con>.time{color:#999; font-size:15px;}
#main>.news>.container>.isnew>ul>li>a:hover .tit{color:#d0021c;}
#main>.news>.container>.isnew>ul>li>a:hover .img>img{transform:scale(1.2);}
#main>.news>.container>.list{margin:0 auto; padding:10px 0;}
#main>.news>.container>.list>ul{ text-align:center;margin:0 auto; padding:10px 0;}
#main>.news>.container>.list>ul>li{display:block; float:left; width:48%; padding:10px 0;}
#main>.news>.container>.list>ul>li:nth-child(2n){float:right;}
#main>.news>.container>.list>ul>li>a{ position:relative; display:block;}
#main>.news>.container>.list>ul>li>a:after{ position:absolute;z-index:1;left:0; top:50%; margin-top:-2px; width:5px;height:5px; background:#555; border-radius:100%; content:''; transition:all .35s;}
#main>.news>.container>.list>ul>li .tit{ padding-left:20px; text-align:left; width:70%; font-size:16px; font-weight:normal; color:#555;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#main>.news>.container>.list>ul>li .time{color:#555; font-size:16px; font-weight:normal;}
#main>.news>.container>.list>ul>li>a:hover:after{ background:#d0021c;}
#main>.news>.container>.list>ul>li>a:hover .tit{color:#d0021c;}
#main>.news .more{text-align:center; padding:30px 0;}
#main>.news .more>a{width:120px; border:1px solid #ddd;padding-right:10px; text-align:right; margin:0 auto;}
#main>.news .more span{color:#666;transform: translateX(-50%) !important;}
#main>.news .more a img{ left:85%; opacity:.8; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}
#main>.news .more a:hover span{color:#d0021c;}
#main>.news .more a:hover img{left:85%; opacity:1; -webkit-filter: grayscale(0);-moz-filter: grayscale(0);-ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0);}
#main>.news .more a:hover{ border:1px solid #d0021c;}
#main>.solution{margin:0 auto; padding:20px 0; background:#f7f8f9;}
#main>.solution>.container{ width:90%;max-width:1400px; margin:0 auto;padding:10px 0;}
#main>.solution>.container>ul{margin:0 auto;}
#main>.solution>.container>ul>li{width:32%; margin-right:2%; float:left;}
#main>.solution>.container>ul>li:nth-child(3n){margin-right:0 !important;}
#main>.solution>.container>ul>li>a{ position:relative; display:block;padding:2% 0;}
#main>.solution>.container>ul>li .con{ position:absolute;z-index:99; left:50%; top:50%; margin-left:-40%; margin-top:-70px; width:80%; height:140px; text-align:center; transition:all .35s;}
#main>.solution>.container>ul>li .con>.icon{ margin:0 auto;}
#main>.solution>.container>ul>li .con>.icon>img{height:100px; width:auto;}
#main>.solution>.container>ul>li .con>.tit{ padding:16px 0; font-size:18px; color:#fff;}
#main>.solution>.container>ul>li .img{ position:relative; overflow:hidden;}
#main>.solution>.container>ul>li .img:after{position:absolute;z-index:3;left:0;top:0; width:100%;height:100%;opacity:0; background:#d0021c; content:''; transition:all .35s;}
#main>.solution>.container>ul>li .img:before{ position:absolute;z-index:1;left:0;top:0; width:100%;height:100%;opacity:.6; background:#000; content:''; transition:all .35s;}
#main>.solution>.container>ul>li .img>img{ width:100%;height:auto; transition:all 1s;}
#main>.solution>.container>ul>li>a:hover .con{transform:translateY(-10px);}
#main>.solution>.container>ul>li>a:hover .img:after{opacity:.8;}
#main>.solution>.container>ul>li>a:hover .img:before{opacity:0;}
#main>.solution>.container>ul>li>a:hover .img>img{transform:scale(1.1);}
#main>.advantage{margin:0 auto; padding:20px 0; background:#f7f8f9; display:none;}
#main>.advantage>.container{ width:90%;max-width:1400px; margin:0 auto;}
#main>.advantage>.container>ul{margin:0 auto;}
#main>.advantage>.container>ul>li{width:49%; float:left;}
#main>.advantage>.container>ul>li:nth-child(2n){ float:right;}
#main>.advantage>.container>ul>li>a{ position:relative; display:block;padding:2% 0;}
#main>.advantage>.container>ul>li .con{ position:absolute;z-index:99; left:50%; top:50%; margin-left:-40%; margin-top:-50px; width:80%; height:100px; text-align:center; transition:all .35s;}
#main>.advantage>.container>ul>li .con>.icon{ margin:0 auto;}
#main>.advantage>.container>ul>li .con>.tit{ padding:20px 0; font-size:24px; color:#fff;}
#main>.advantage>.container>ul>li .img{ position:relative; overflow:hidden;}
#main>.advantage>.container>ul>li .img:after{position:absolute;z-index:1;left:0;top:0; width:100%;height:100%;opacity:0; background:#d0021c; content:''; transition:all .35s;}
#main>.advantage>.container>ul>li .img>img{ width:100%;height:auto; transition:all 1s;}
#main>.advantage>.container>ul>li>a:hover .con{transform:translateY(-10px);}
#main>.advantage>.container>ul>li>a:hover .img:after{opacity:.5;}
#main>.advantage>.container>ul>li>a:hover .img>img{transform:scale(1.1);}
#main>.brand{ width:100%; height:530px; background:url("../images/brand-bg.jpg") no-repeat; background-position:0 0; background-attachment:fixed; background-size:cover; overflow:hidden; margin:0 auto;}
#main>.brand>.container{ position:relative; width:90%;max-width:1360px; text-align:left; margin:0 auto;}
#main>.brand>.container>.year{padding-top:100px; font-size:14px; color:#fff;line-height:30px;}
#main>.brand>.container>.txt{ padding:40px 0; font-size:30px; font-weight:bold; color:#fff;}
#main>.brand>.container>.logo{ padding:50px 0; text-align:left;}
#main>.brand>.container>.logo>img{max-width:100%;height:auto;}
#main>.brand .more{ position:absolute;z-index:1; right:0;bottom:24%;}
@media only screen and (max-width: 1460px){
#main>.news>.container>.isnew>ul>li .con{ width:52%;}
}
@media only screen and (max-width: 1280px){
#main>.news>.container>.isnew>ul>li .img{width:200px;}
#main>.news>.container>.isnew>ul>li .con{ width:50%; padding:0 2%;}
}
@media only screen and (max-width: 1080px){
#main>.news>.container>.isnew>ul>li .img{width:180px;}
#main>.news>.container>.isnew>ul>li .con>.tit{ font-size:20px;}
#main>.solution>.container>ul>li .con{ margin-top:-60px; height:120px;}
#main>.solution>.container>ul>li .con>.icon>img{height:72px;}
#main>.advantage>.container>ul>li .con{margin-top:-80px;}
#main>.advantage>.container>ul>li .con>.tit{ font-size:22px;}
#main>.brand>.container>.txt{ padding:30px 0; font-size:28px;}
}
@media only screen and (max-width: 960px){
#main>.news>.container>.isnew>ul>li .img{width:160px;}
#main>.news>.container>.isnew>ul>li .con{ width:46%;}
#main>.news>.container>.isnew>ul>li .con>.tit{ font-size:22px;}
#main>.news>.container>.isnew>ul>li .con>.txt{ height:70px; font-size:14px;}
#main>.news>.container>.isnew>ul>li .con>.time{font-size:14px;}
#main>.news>.container>.list>ul>li .tit{ font-size:14px;}
#main>.news>.container>.list>ul>li .time{font-size:14px;}
#main>.solution>.container>ul>li .con{ margin-top:-50px; height:100px;}
#main>.solution>.container>ul>li .con>.icon>img{height:56px;}
#main>.solution>.container>ul>li .con>.tit{ padding:12px 0; font-size:16px;}
#main>.advantage>.container>ul>li .con>.tit{ font-size:20px;}
#main>.brand>.container>.txt{ font-size:25px;}
}
@media only screen and (max-width: 820px){
#main>.advantage>.container>ul>li .con{margin-top:-60px;}
#main>.advantage>.container>ul>li .con>.icon>img{ width:90px; height:auto;}
#main>.advantage>.container>ul>li .con>.tit{ font-size:18px;}
#main>.solution>.container>ul>li .con>.tit{ font-size:14px;}
}
@media only screen and (max-width: 760px){
#main .more>a{ width:40px;height:40px;line-height:40px;}
#main>.news>.container>.isnew>ul>li{display:block; float:none; width:100%; padding:15px 0;}
#main>.news>.container>.isnew>ul>li .img{width:200px;}
#main>.news>.container>.isnew>ul>li .con{ width:60%;}
#main>.news>.container>.list>ul>li{ float:none!important; width:100%;}
}
@media only screen and (max-width: 650px){
#main .title{ font-size:20px;}
#main>.product>.container{padding:10px 0;}
#main>.product>.container .swiper-container{ width:90%;}
#main>.product>.container .swiper-slide>a{padding:0;}
#main>.product>.container .swiper-slide>a>.tit{ font-size:14px;}
#main>.product>.container .button-next{ width:30px; height:30px;}
#main>.product>.container .button-prev{ width:30px; height:30px;}
#main>.news>.container>.isnew>ul>li .img{width:100%; float:none;}
#main>.news>.container>.isnew>ul>li .con{ width:100%; float:none;}
#main>.news>.container>.isnew>ul>li .con>.tit{ padding-top:10px; font-size:18px;}
#main>.solution>.container>ul>li{width:49%; margin-right:0 !important; float:left;}
#main>.solution>.container>ul>li:nth-child(3n){margin-right:0 !important;}
#main>.solution>.container>ul>li:nth-child(even){ float:right;}
#main>.solution>.container>ul>li .con>.icon>img{height:64px;}
#main>.solution>.container>ul>li .con>.tit{ font-size:16px;}
#main>.advantage>.container>ul>li{width:100%; float:none!important;}
#main>.brand{ height:420px;}
#main>.brand>.container>.year{padding-top:60px;}
#main>.brand>.container>.txt{ padding:20px 0;font-size:18px;}
#main>.brand>.container>.logo{ padding:20px 0 40px 0; }
#main>.brand .more{ position:relative; left:0; right:auto;bottom:auto;}
}
@media only screen and (max-width: 460px){
#main>.solution>.container>ul>li .con{ margin-top:-40px; height:80px;}
#main>.solution>.container>ul>li .con>.icon>img{height:46px;}
#main>.solution>.container>ul>li .con>.tit{ padding:10px 0; font-size:12px;}
}
/*END*/
/*kefu TOP*/
#kefu{position:fixed;z-index:1001;right:0;bottom:105px;width:70px;height:240px;}
#kefu .kefu-box{position:relative;float:right;}
#kefu .clearfix:after{content:""; display:block; clear:both;}
#kefu .a{display:block;width:44px;height:44px;background:rgba(208,2,28,.8);margin-bottom:4px;cursor:pointer;outline:none;}
#kefu .a.active, #kefu .a:hover{background:rgba(208,8,28,.8);}
#kefu .a .i{float:left;width:44px;height:44px;background-image:url(../images/kefu_icon.png);background-repeat:no-repeat;}
#kefu .a-service .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url(../images/kefu-bg.png);background-repeat:no-repeat;background-position:0 0;}
#kefu .a-service-phone .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url(../images/kefu-bg.png);background-repeat:no-repeat;background-position:-27px 0;}
#kefu .a-mall .i{width:20px; height:20px; margin-top:12px; margin-left:12px; background-image:url(../images/ico.kf.taobao.png); background-repeat:no-repeat; background-size:100%;}
#kefu .a-qrcode .i{background-position:-44px 0;}
#kefu .a-cart .i{background-position:-88px 0;}
#kefu .a-top .i{background-position:-132px 0;}
#kefu .a-top{background:rgba(0,0,0,.8);display:none;}
#kefu .a-top:hover{background:rgba(0,0,0,.4);}
#kefu .d{display:none;width:223px;background:#fff;position:absolute;right:67px;min-height:90px;border:1px solid #E0E1E5;border-radius:3px;box-shadow:0px 2px 5px 0px rgba(161, 163, 175, 0.11);}
#kefu .d .arrow{position:absolute;width:8px;height:12px;background:url(../images/kefu_bg_arrow.png) no-repeat;right:-8px;top:31px;}
#kefu .d-service{top:0;}
#kefu .d-service-phone{top:34px;}
#kefu .d-qrcode{top:78px;}
#kefu .d .inner-box{padding:8px 22px 12px;}
#kefu .d-service-item{border-bottom:1px solid #eee;padding:14px 0;}
#kefu .d-service .d-service-item{border-bottom:none;}
#kefu .d-service-item .circle{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#F1F1F3;display:block;float:left;}
#kefu .d-service-item .i-qq{width:44px;height:44px;background:url(../images/kefu_con_icon03.png) no-repeat center 15px;display:block;transition:all .2s;border-radius:50%;overflow:hidden;}
#kefu .d-service-item:hover .i-qq{background-position:center 3px;}
#kefu .d-service-item .i-tel{width:44px;height:44px;background:url(../images/kefu_con_icon02.png) no-repeat center center;display:block;}
#kefu .d-service-item h3{float:left;width:112px;line-height:44px;font-size:15px;margin-left:12px;}
#kefu .d-service-item .text{float:left;width:112px;line-height:22px;font-size:15px;margin-left:12px;}
#kefu .d-service-item .text .number{font-family:Arial; color:#d0021c;}
#kefu .d-service-intro{padding-top:10px;}
#kefu .d-service-intro p{float:left;line-height:27px;font-size:12px;width:50%;white-space:nowrap;color:#888;}
#kefu .d-service-intro i{background:url(../images/kefu_con_icon01.png) no-repeat center center;height:27px;width:14px;margin-right:5px;vertical-align:top;display:inline-block;}
#kefu .d-qrcode{text-align:center; width:430px;}
#kefu .d-qrcode .inner-box{padding:20px 0;}
#kefu .d-qrcode .qrcode{ display:inline-block; width:110px;padding:0 9px; border-left:1px solid #eee;}
#kefu .d-qrcode .qrcode:first-child{ border:0 !important;}
#kefu .d-qrcode .qrcode>img{ width:100%; height:auto;}
#kefu .d-qrcode p{font-size:12px;color:#93959c;}
#kefu .d-mall{text-align:center; width:145px; top: 128px;}
#kefu .d-mall .inner-box{padding:20px 0;}
#kefu .d-mall .qrcode{ display:inline-block; width:110px; padding:0 9px; border-left:1px solid #eee;}
#kefu .d-mall .qrcode:first-child{ border:0 !important;}
#kefu .d-mall .qrcode img{ width:100%; height:auto;}
#kefu .d-mall p{font-size:12px;color:#93959c;}
@media only screen and (max-width: 960px){
#kefu{display:none;}
}
/*END*/
/*path TOP*/
#path{ position:relative;z-index:99; width:100%;height:60px; line-height:60px; background:#f7f7f7; border-bottom:1px solid #e6e6e6;}
#path>.wrap{width:90%;max-width:1360px; margin:0 auto; font-size:14px; color:#999;}
#path a{display:inline-block; color:#999; transition:all .35s;}
#path a:hover{ color:#d0021c;}
#path a.A{ color:#d0021c !important;}
#path.active {transform: translateX(-200px);}
@media only screen and (max-width: 960px){
#path{display:none;}
}
/*END*/
/*
#navpart{background:#f9f9f9;margin:0 auto;}
#navpart>.wrap{ width:90%;max-width:1360px; padding:30px 0; text-align:center; margin:0 auto;}
#navpart a{ position:relative; display:inline-block; padding:10px 40px; font-size:16px; color:#444; margin:0 5px; border:1px solid #ddd; background:#fff; transition:all .35s;}
#navpart a:hover{ border:1px solid rgba(208,2,28,1); color:rgba(208,2,28,1);}
#navpart a.A{ background:rgba(208,2,28,1); border:1px solid rgba(208,2,28,1); color:#fff;}
#navpart a.A:after{ position:absolute;z-index:8; left:50%; bottom:-11px; margin-left:-12px; width:0;height:0;border-right:12px solid transparent;border-left:12px solid transparent;border-top:10px solid rgba(208,2,28,1); content:'';}
*/
#navpart{ position:fixed;z-index:999; right:20px;top:30%; width:100px; background:#666;}
#navpart>.gotop{margin:0 auto; position:relative; width:100%; height:80px;}
#navpart>.gotop>a{display:block; height:100%; background:#e33b50 url("../images/icon-gotop-navpart.png") no-repeat; background-position:50% 50%; background-size:auto 40px;}
#navpart>.kefu{margin:0 auto; position:relative; z-index:55; width:100%;height:80px;}
#navpart>.kefu>.btn{ position:relative;z-index:55; display:block; height:80px; text-align:center; cursor:pointer; background:#d0021c url("../images/icon-kefu.png") no-repeat; background-position:50% 50%; background-size:34px auto; transition:all .35s;}
#navpart>.kefu>.container{position:absolute; display:none; z-index:4; right:100px;top:0; height:310px;padding-top:20px; background:#fff; box-shadow:0 7px 5px rgba(0,0,0,.1);}
#navpart>.kefu>.container>.qrcode{display:block; width:280px; background:#fef9f9; padding:20px 0; text-align:center;}
#navpart>.kefu>.container>.qrcode .qr{ display:inline-block; width:110px;padding:0 6px; border-left:1px solid #e6e6e6;}
#navpart>.kefu>.container>.qrcode .qr:first-child{ border:0 !important;}
#navpart>.kefu>.container>.qrcode .qr>img{ width:100%; height:auto;}
#navpart>.kefu>.container>.qrcode p{font-size:12px; padding-top:5px; color:#93959c;}
#navpart>.kefu>.container>.service{ display:block; width:80%;margin:0 auto; text-align:center; border-bottom:1px dotted #eee;}
#navpart>.kefu>.container>.service>.tit{font-size:14px; color:#333;}
#navpart>.kefu>.container>.service>.tit>img{margin-right:10px;}
#navpart>.kefu>.container>.service>.con{ padding:6px 0 10px 0; color:#d0021c; font-size:20px; font-weight:bold;}
#navpart>.kefu>.container>.order{ display:block; padding:20px 0; text-align:center; border-bottom:1px solid #eee;}
#navpart>.kefu>.container>.order>a{display:inline-block; color:#01AAED; font-size:14px; transition:all .35s;}
#navpart>.kefu>.container>.order img{height:36px; width:auto; margin-right:10px;}
#navpart>.kefu>.container>.order>a:hover{transform:scale(1.1)}
#navpart>.btn{display:none;}
#navpart>.nav{ position:relative; z-index:88; margin:0 auto;}
#navpart>.nav>.close{ display:none;}
#navpart>.nav>.container{padding:6px 0;}
#navpart>.nav>.container>a{ position:relative; display:block;padding:15px 0; text-align:center; font-size:14px; color:#fff; transition:all .35s;}
#navpart>.nav>.container>a:hover{ background:rgba(255,255,255,.1);}
#navpart>.nav>.container>a.A{background:rgba(255,255,255,.2);}
#navpart>.nav>.container>a.A:after{ display:none; position:absolute;z-index:8; left:-10px; top:50%; margin-top:-20px; width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-right:10px solid rgba(255,255,255,.4); content:'';}
@media only screen and (max-width: 960px){
#navpart{ top:auto; right:30px; bottom:30px;width:60px; background:none;}
#navpart>.btn{ display:block; margin:10px auto; position:relative; width:100%; height:60px;}
#navpart>.btn>a{display:block; height:100%; background:#d0021c url("../images/icon-navpart.png") no-repeat; background-position:50% 50%; background-size:auto 40px;border-radius:100%;}
#navpart>.kefu{display:none;}
#navpart>.gotop{height:60px;}
#navpart>.gotop>a{background-color:rgba(0,0,0,.3); border-radius:100%;}
#navpart>.nav{display:none; position:fixed;z-index:99; left:0;bottom:0; width:100%;height:40%; background:#666;}
#navpart>.nav>.close{ display:block;padding:10px; text-align:right;}
#navpart>.nav>.close>a{display:inline-block; width:20px; height:20px; cursor:pointer; background:url("../images/icon-close.png") no-repeat; background-size:100% auto; background-position:50% 50%;}
#navpart>.nav>.container{ height:70%;overflow-x:hidden; overflow-y:auto;}
}
@media only screen and (max-width: 420px){
#navpart{ right:20px; bottom:20px;width:50px;}
#navpart>.btn{ width:50px; height:50px; line-height:50px;}
#navpart>.btn>a{background-size:auto 32px;}
#navpart>.gotop{width:50px; height:50px; line-height:50px;}
#navpart>.gotop>a{background-size:auto 32px;}
}
/*title TOP*/
#title{margin:0 auto; transition:all .35s;}
#title>.wrap{ width:90%;max-width:1360px; padding:20px 0; text-align:left; font-size:24px; font-family:'寰蒋闆呴粦'; font-weight:bold; color:#333; margin:0 auto;}
#title.active {transform: translateX(-220px);}
@media only screen and (max-width: 960px){
#title>.wrap{padding-bottom:0 !important;}
}
@media only screen and (max-width: 780px){
#title>.wrap{ font-size:24px;}
}
@media only screen and (max-width: 520px){
#title>.wrap{ font-size:24px;}
}
/*END*/
/*inside TOP*/
#inside{margin:0 auto; transition:all .35s;}
#inside.active {transform: translateX(-220px);}
/*END*/
/*about TOP*/
#about{ margin:0 auto; padding:20px 0;overflow:hidden;}
#about>.img{width:50%; text-align:left;}
#about>.img>img{width:100%;height:auto;}
#about>.container{ width:35%;padding:2% 10% 2% 5%; text-align:left;}
#about>.container>.slogan{ display:none; position:relative; margin:20px 0;font-family:"Arial Black"; font-size:60px; text-transform:uppercase; color:#f9f9f9;}
#about>.container>.slogan>span{ position:absolute;z-index:9; left:0;top:0; width:100%; text-align:left; font-size:30px; font-weight:600; color:#222;}
#about>.container>.text{ font-size:16px; line-height:28px; color:#666;}
#about>.container>.text>p{margin-bottom:20px;}
#about>.container>.stress{ display:none; padding:30px 0; text-align:left;}
#about>.container>.stress>.item{ position:relative; display:inline-block; width:140px;height:140px; margin-right:30px; color:#d0021c; text-align:center;}
#about>.container>.stress>.item>.num{ position:relative;z-index:9; font-size:20px; font-weight:bold; padding-top:28px;transition:all .35s;}
#about>.container>.stress>.item>.num>span{ display:inline-block; font-size:45px;letter-spacing:-2px;}
#about>.container>.stress>.item>.txt{position:relative;z-index:9; font-size:16px; font-weight:bold; transition:all .35s;}
#about>.container>.stress>.item>.br{ position:absolute;z-index:1;left:0;top:0; width:100%;height:100%; background:#f7f7f7; border-radius:100%; box-shadow: 0 0 0 4px #f7f7f7; box-sizing:border-box;animation: fadeInUp .3s; animation-timing-function: ease-in; transition:all .35s;}
#about>.container>.stress>.item:nth-child(1)>.br{ animation-duration:.3s;}
#about>.container>.stress>.item:nth-child(2)>.br{ animation-duration:.8s;}
#about>.container>.stress>.item:nth-child(3)>.br{animation-duration:1s;}
#about>.container>.stress>.item:hover{ color:#d0021c;}
#about>.container>.stress>.item:hover .br:after {pointer-events: none;position: absolute;width: 100%;height: 100%;border-radius: 50%;top: -5px;left: -5px;padding: 0;z-index: 10;border: 5px dashed #d0021c;content:'';box-sizing: content-box;-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite; animation: spinAround 9s linear infinite;}
#about>.container>.stress>.item:hover .br {box-shadow: 0 0 0 0 transparent;background:#fff;-webkit-transition: box-shadow .2s;-moz-transition: box-shadow .2s; transition: box-shadow .2s;}
#about>.container>.stress>.item:hover .num{transform:scale(0.9);}
@-webkit-keyframes spinAround {
from {
-webkit-transform:rotate(0deg)
}
to {
-webkit-transform:rotate(360deg)
}
}
@-moz-keyframes spinAround {
from {
-moz-transform:rotate(0deg)
}
to {
-moz-transform:rotate(360deg)
}
}
@keyframes spinAround {
from {
transform:rotate(0deg)
}
to {
transform:rotate(360deg)
}
}
@media only screen and (max-width: 1500px){
#about>.container>.stress>.item{ width:130px;height:130px; margin-right:20px;}
#about>.container>.stress>.item>.num>span{ font-size:42px;}
}
@media only screen and (max-width: 1340px){
#about>.container>.stress>.item{ width:120px;height:120px;}
#about>.container>.stress>.item>.num>span{ font-size:38px;}
}
@media only screen and (max-width: 1280px){
#about>.container>.stress>.item{ width:116px;height:116px; margin-right:15px;}
#about>.container>.stress>.item>.num>span{ font-size:36px;}
}
@media only screen and (max-width: 1160px){
#about>.container>.stress>.item{ width:110px;height:110px; margin-bottom:15px;}
#about>.container>.stress>.item>.num{padding-top:22px;}
#about>.container>.stress>.item>.num>span{ font-size:32px;}
#about>.container>.stress>.item>.txt{font-size:15px;}
}
@media only screen and (max-width: 960px){
#about>.img{ float:none; width:100%;}
#about>.container{ float:none; width:86%;padding:2% 0!important; margin:0 auto;}
#about>.container>.slogan{ text-align:center;}
#about>.container>.slogan>span{ text-align:center;}
#about>.container>.stress{ text-align:center;}
#about>.container>.stress>.item{ width:130px;height:130px; margin-right:20px;}
#about>.container>.stress>.item>.num>span{ font-size:42px;}
}
@media only screen and (max-width: 780px){
#about{ padding:20px 0 50px 0;}
}
@media only screen and (max-width: 560px){
#about>.container>.stress>.item{ width:110px;height:110px; margin-bottom:15px;}
#about>.container>.stress>.item>.num>span{ font-size:32px;}
}
@media only screen and (max-width: 420px){
#about>.container>.slogan{ font-size:36px;}
#about>.container>.slogan>span{ font-size:20px;}
#about>.container>.stress>.item{ width:80px;height:80px; margin-bottom:15px;}
#about>.container>.stress>.item>.num{padding-top:16px;}
#about>.container>.stress>.item>.num>span{ font-size:26px;}
#about>.container>.stress>.item>.txt{font-size:13px;}
}
/*END*/
/*brand TOP*/
#brand{ width:90%; max-width:1200px;text-align:center;padding:20px 0 100px 0; margin:0 auto;}
#brand>.title{ padding-bottom:30px; text-align:left; font-size:20px; font-family:寰蒋闆呴粦; color:#333; font-weight:bold; margin:0 auto;}
#brand>.title>span{ letter-spacing:-4px;}
#brand>.container{ position:relative; border:1px solid #eee;padding:80px 60px;}
#brand>.container>.text{width:50%; text-align:left;}
#brand>.container>.text>h2{display:block;padding:20px 0;}
#brand>.container>.text>p{ display:block;padding:6px 0; color:#555; font-size:15px;}
#brand>.container>.text>p>img{ height:15px; width:auto;}
#brand>.container>.logo{ position:absolute; z-index:2; right:0; top:0; width:40%; height:100%; text-align:center; background:rgba(208,2,28,.06);}
#brand>.container>.logo:after{ position:absolute;z-index:8; left:0; top:50%; margin-top:-12px; width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:10px solid rgba(255,255,255,1); content:'';}
#brand>.container>.logo>img{ position:absolute;z-index:3; left:50%; top:50%; margin-left:-100px; margin-top:-100px; height:200px; width:auto;}
@media only screen and (max-width: 960px){
#brand>.container{ padding:40px;}
#brand>.container>.text>h2>img{ height:30px; width:auto;}
#brand>.container>.text>p{ font-size:14px;}
#brand>.container>.text>p>img{ height:12px;}
#brand>.container>.logo>img{ margin-left:-60px; margin-top:-60px; height:120px;}
}
@media only screen and (max-width: 640px){
#brand{ padding:20px 0 50px 0;}
#brand>.container{ padding:0;}
#brand>.container>.text{float:none; width:100%;padding:20px 0;}
#brand>.container>.text>h2{padding:20px 30px;}
#brand>.container>.text>p{ padding:6px 30px;}
#brand>.container>.logo{float:none; position:relative; width:100%;padding:50px 0;}
#brand>.container>.logo:after{ left:50%; top:12px; margin-left:-12px; width:0;height:0;border-right:12px solid transparent;border-left:12px solid transparent; border-top:12px solid rgba(255,255,255,1);content:'';}
#brand>.container>.logo>img{ position:relative; left:0;top:0;margin-left:0; margin-top:0;}
}
@media only screen and (max-width: 420px){
#brand>.container>.text>p{ font-size:13px;}
}
/*END*/
/*organization TOP*/
#organization{width:90%; max-width:1200px;margin:0 auto; padding:20px 0;overflow:hidden;}
#organization>.container{ text-align:center;}
#organization>.container img{max-width:100%;height:auto;}
/*END*/
/*culture TOP*/
#culture{width:90%; max-width:1360px; margin:0 auto; padding:20px 0;overflow:hidden;}
#culture>.mission{ text-align:left; padding-bottom:30px;}
#culture>.mission>.tit{ width:12%; font-size:30px; font-weight:bold; color:#333;}
#culture>.mission>.con{ width:45%; padding-left:8%;}
#culture>.mission>.con>p{ display:block;padding:10px 0; font-size:18px; color:#444;}
#culture>.mission>.con>p:first-child{padding-top:0 !important;}
#culture>.mission>.con>p>strong{ font-weight:normal; font-size:24px;}
#culture>.mission>.img{ width:30%;}
#culture>.mission>.img>img{width:100%;height:auto;}
#culture>.idea{padding:20px 0;}
#culture>.idea>.tit{ padding:20px 0; font-size:30px; font-weight:bold; color:#333;}
#culture>.idea>.con{ text-align:left;margin:0 auto;}
#culture>.idea>.con>.item{display:block; float:left; width:33.33%; padding-bottom:8%; text-align:left;}
#culture>.idea>.con>.item .icon{ padding:10px 0;}
#culture>.idea>.con>.item .tit{ padding:10px 0; font-size:20px;font-weight:bold; color:#333;}
#culture>.idea>.con>.item .txt{ display:block;padding:10px 30% 10px 0; font-size:18px; color:#444;}
@media only screen and (max-width: 1080px){
#culture>.mission>.tit{ width:16%;font-size:28px; }
#culture>.mission>.con>p>strong{ font-size:20px;}
#culture>.mission>.con>p{font-size:17px;}
#culture .con img{max-width:100% !important;}
}
@media only screen and (max-width: 960px){
#culture{padding:0;}
#culture>.mission>.tit{ float:none; width:100%;padding:30px 0;}
#culture>.mission>.con{ float:none; width:100%; padding-left:0;}
#culture>.mission>.img{float:none; width:60%; text-align:left;}
#culture>.idea>.con>.item{display:block; float:left; width:50%; padding-bottom:8%; text-align:left;}
}
@media only screen and (max-width: 640px){
#culture>.mission>.tit{ font-size:20px; padding:30px 0 10px 0;}
#culture>.mission>.con>p>strong{ font-size:16px;}
#culture>.mission>.con>p{ font-size:14px;}
#culture>.mission>.img{width:100%; text-align: center;}
#culture>.idea{padding:20px 0; text-align:center;}
#culture>.idea>.tit{ padding:20px 0; font-size:20px; background:#f7f7f7;}
#culture>.idea>.con>.item{ float:none; padding:20px 0; width:100%; text-align:center; border-bottom:1px solid #eee;}
#culture>.idea>.con>.item:nth-child(5){ border-bottom:0 !important;}
#culture>.idea>.con>.item .tit{ font-size:16px;}
#culture>.idea>.con>.item .txt{padding:0; font-size:14px;}
}
/*END*/
/*honor TOP*/
#honor{width:100%; margin:0 auto; padding-bottom:20px;}
#honor>.item{margin:0 auto; padding:20px 0; border-bottom:1px solid #eee;}
#honor>.item:first-child{padding-top:0 !important;}
#honor>.item:last-child{ border-bottom:0 !important;}
#honor>.item>.title{padding-bottom:20px; text-align:center; font-size:30px; color:#333;}
#honor>.item>.container{margin:0 auto; max-width:1380px;}
#honor>.item>.container .list{margin:0 auto;padding:10px;overflow:hidden;}
#honor>.item>.container .list>ul{display:block;margin:0 auto;padding:0;}
#honor>.item>.container .list>ul>li{width: 23.5%;float: left;margin-right: 2%;}
#honor>.item>.container .list>ul>li:nth-child(4n){margin-right:0 !important;}
#honor>.item>.container .list>ul>li .img{width: 100%;height: 230px; background:#fff; box-shadow: 0 0 5px rgba(6, 0, 1, 0.23);padding:6px 0; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; overflow: hidden; line-height: 230px;}
#honor>.item>.container .list>ul>li .img>img{ width:auto;height:100%;}
#honor>.item>.container .list>ul>li .tit{font-size:16px;line-height:24px;padding:30px 0 70px 0;color:#666;text-align:center; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#honor>.item>.container .list>ul>li>a:hover .tit{ color:#d0021c;}
@media only screen and (max-width: 960px){
#honor>.item{ padding:20px 5%;}
#honor>.item>.container .list>ul>li{width:48%;margin-right: 0;}
#honor>.item>.container .list>ul>li:nth-child(even){ float:right;}
#honor>.item>.container .list>ul>li:nth-child(4n){margin-right:2% !important;}
#honor>.item>.container .list>ul>li:nth-child(2n){margin-right:0 !important;}
#honor>.item>.container .list>ul>li .tit{padding:20px 10px;}
}
@media only screen and (max-width: 420px){
#honor>.item>.title{padding-bottom:30px; font-size:20px;}
#honor>.item>.container .list>ul>li .img{ height:110px; line-height:110px;}
#honor>.item>.container .list>ul>li .tit{ padding:10px; font-size:14px;}
}
/*END*/
/*history TOP*/
#history{width:90%; max-width:1360px; margin:0 auto; padding:20px 0;overflow:hidden;}
#history>.title{ width:20%;}
#history>.title>.load{ text-align:center;margin:0 auto;}
#history>.title>.load i {width: 12px;margin: 0 3px;height: 12px;border-raiuds: 50%;display: inline-block;background: #cccccc;border-radius: 50%; animation: move2 1.2s linear forwards infinite;}
#history>.title>.load i:nth-child(2) {animation: move2 1.2s 0.2s linear forwards infinite;}
#history>.title>.load i:nth-child(3) {animation: move2 1.2s 0.4s linear forwards infinite;}
#history>.title>.load i:nth-child(4) {animation: move2 1.2s 0.6s linear forwards infinite;}
#history>.title>.load i:nth-child(5) {animation: move2 1.2s 1s linear forwards infinite;}
#history>.title>.year { font-size: 50px;line-height: 50px;display: block; padding:40px 0; color:#d0021c; text-align:center; margin:0 auto;}
#history>.title>.year span {font-size: 20px;line-height: 30px;display: inline-block;vertical-align: bottom;}
#history>.title>.box{ text-align:center;}
#history>.title>.box>.icon{ width:200px; height:200px; line-height:200px; background:#d0021c; border-radius:100%;overflow:hidden; margin:0 auto;}
#history>.title>.box>.cn{ padding-top:20px; font-size:14px; color:#ccc;}
#history>.container{ position:relative; width:75%; margin-bottom:50px; text-align:left;}
#history>.container .line {position: absolute;left:240px;width: 6px;height: 100%;background: #ccc; border-radius: 6px;}
#history>.container ul{padding:40px 0;}
#history>.container ul>li{ position:relative; display:block; width:100%; padding:50px 0;}
#history>.container ul>li>.tit {position: absolute;left: 0;top: 30px;width:250px; line-height:36px; text-align:right; transition: all .5s;}
#history>.container ul>li>.tit>.txt{ color:#d0021c; font-size:24px; padding-right:50px; transition:all .35s;}
#history>.container ul>li>.tit>.year{ color:#666; font-weight:bold; font-size:18px; font-family:Arial; padding-right:50px;}
#history>.container ul>li>.tit>.spot { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 5px solid #ccc; transition: all 0.5s; box-sizing: border-box; position: absolute; right: 0; top: 50%; margin-top: -7px;}
#history>.container ul>li>.tit>.spot i { width: 6px; height: 6px; transition: all 0.5s; position: absolute; left: 50%; margin-left: -3px; top: 50%; margin-top: -3px; background: #fff; border-radius: 50%; display: block;}
#history>.container ul>li>.con { width: 100%;box-sizing: border-box; color: #666;padding-left: 290px;transition: all 0.5s;}
#history>.container ul>li>.con p {font-size: 16px;line-height: 36px;}
#history>.container ul>li:hover .tit {color: #d0021c;}
#history>.container ul>li:hover .tit>.spot {transform: scale(3); background: #fff; border: 1px solid #e9e8e8;}
#history>.container ul>li:hover .tit>.spot i {background: #d0021c;}
#history>.container ul>li:hover .con{ color:#d0021c;}
#history>.container ul>li:hover .tit>.txt{transform: scale(1.1); }
@media only screen and (max-width: 1080px){
#history>.container ul>li>.tit>.txt{ font-size:20px;}
}
@media only screen and (max-width: 960px){
#history>.title{ float:none; width:100%;}
#history>.title>.load{padding-left:10px; text-align:left;}
#history>.title>.box{ display:none;}
#history>.title>.year{ text-align:left;padding:20px 0;}
#history>.container .line {left:20px;}
#history>.container{ float:none; width:100%; margin-top:30px;}
#history>.container ul{padding:10px 0;}
#history>.container ul>li{padding:30px 0;}
#history>.container ul>li>.tit{text-align:left;}
#history>.container ul>li>.tit>.spot{ left:16px;right:auto;}
#history>.container ul>li>.tit>.txt{ padding-left:60px; padding-right:0;}
#history>.container ul>li>.tit>.year{ padding-left:60px; padding-right:0;}
#history>.container ul>li>.con{ padding-left:260px;}
#history>.container ul>li:hover .tit>.txt{transform: scale(1); }
}
@media only screen and (max-width: 640px){
#history>.title>.year { font-size: 30px;}
#history>.title>.year span {font-size: 14px;}
#history>.container ul>li{padding:15px 0;}
#history>.container ul>li>.tit>.txt{ font-size:18px;}
#history>.container ul>li>.tit>.year{ font-weight:normal; font-size:16px; color:#ccc;}
#history>.container ul>li>.con{ padding-left:60px; padding-top:90px;}
#history>.container ul>li>.con p{ font-size:14px; line-height:20px;}
}
/*END*/
/*news TOP*/
#news{width:100%; margin:0 auto; padding-bottom:20px;}
#news>.list{ margin:0 auto;overflow:hidden;}
#news>.list>ul{margin:0 auto;}
#news>.list>ul>li{display:block;margin:0 auto; transition:all .35s;}
#news>.list>ul>li>a{ position:relative; display:block; width:90%; max-width:1360px;padding:50px 0; margin:0 auto; transition:all .35s;}
#news>.list>ul>li>a:after{ position:absolute;z-index:3;left:0;bottom:0; width:100%;height:1px; background:#eee;content:''; transition:all .35s;}
#news>.list>ul>li:last-child a:after{opacity:0;}
#news>.list>ul>li>a .img{ width:30%; text-align:left; overflow:hidden;}
#news>.list>ul>li>a .img>img{width:100%; height:auto; transition:all 1s;}
#news>.list>ul>li>a .con{width:50%;text-align:left; padding:0 5%;}
#news>.list>ul>li>a .con>.tit{ font-size:24px; color:#333;overflow: hidden;text-overflow:ellipsis; white-space: nowrap; transition:all .35s;}
#news>.list>ul>li>a .con>.txt{ margin:20px 0; height:75px; line-height:26px; font-size:16px; color:#999;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
#news>.list>ul>li>a .con>.more{ text-align:left;}
#news>.list>ul>li>a .con>.more>span{ display:inline-block;padding:8px 30px; font-size:16px; color:#d0021c; border:1px solid #d0021c; border-radius:30px;transition:all .35s;}
#news>.list>ul>li>a .time{ width:10%; color:#d0021c; text-align:right;}
#news>.list>ul>li>a .time>.dm{ font-size:32px;}
#news>.list>ul>li>a .time>.yy{ font-size:18px;}
#news>.list>ul>li:hover{ background:#eee;}
#news>.list>ul>li:hover a:after{ background:none;}
#news>.list>ul>li:hover .con>.more>span{ margin-left:6px; color:#fff; background:#d0021c;}
#news>.list>ul>li>a .img:hover img{transform:scale(1.1);}
#news>.loadmore{ width:90%;max-width:1360px; padding:50px 0;margin:0 auto; border-top:1px solid #eee; text-align:center;}
#news>.loadmore>a{display:inline-block; padding:10px 90px; font-size:18px; color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#news>.loadmore>a:hover{ background:#d0021c; border:1px solid #d0021c; color:#fff;}
#news>.view{ width:90%;max-width:1360px;margin:0 auto;}
#news>.view>.title{ font-size:32px;font-weight:normal;padding:20px; text-align:center;}
#news>.view>.time{text-align:right; font-size:16px; color:#999;padding:0 20px 20px 20px; border-bottom:1px solid #eee;}
#news>.view>.content{margin:0 auto; width:80%; max-width:1200px;padding:50px 0;}
#news>.view>.content{ font-size:16px; line-height:28px; color:#666;}
#news>.view>.content>p{margin-bottom:20px;}
#news>.view>.content img{max-width:100%;height:auto;}
#news>.view>.content table{ border-top:1px solid #ddd; border-left:1px solid #ddd;margin:0px auto; width:99.6%;}
#news>.view>.content table td{ color:#666; font-size:14px; padding:8px; text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
#news>.view>.content .tableWap{ overflow:hidden; overflow-x:auto;}
#news>.view>.share{ text-align:center;margin:0 auto; padding:50px; }
#news>.view>.share .bshare-custom a{ padding:0px;margin:0 12px!important; width:50px; height:50px; opacity:1; transition:all .35s;}
#news>.view>.share .bshare-custom .bshare-sinaminiblog{ background:url("../images/icon-weibo.png") no-repeat; background-size:100% auto;background-position:center center;}
#news>.view>.share .bshare-custom .bshare-weixin{ background:url("../images/icon-wechat.png") no-repeat; background-size:100% auto;background-position:center center;}
#news>.view>.share .bshare-more{background:url("../images/icon-share.png") no-repeat; padding:0 !important; margin:0 !important; background-size:100% auto;background-position:center center;}
#news>.view>.share .bshare-custom a:hover{ opacity:1; transform: translateY(-3px);}
#news>.view>.pageurl{margin:0 auto;padding:50px;font-size:14px;}
#news>.view>.pageurl>.prev, #news>.view>.pageurl>.next{ width:40%; padding:5px; text-align:left; border-bottom:1px solid #aaa;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;}
#news>.view>.pageurl strong{font-weight:normal; font-size:16px;color:#999;}
@media only screen and (max-width: 960px){
#news>.list>ul>li>a .con>.tit{ font-size:22px;}
#news>.list>ul>li>a .con>.txt{ height:40px; line-height:21px; font-size:14px;-webkit-line-clamp:2;}
#news>.list>ul>li>a .con>.more>span{ padding:6px 26px; font-size:13px;}
#news>.list>ul>li>a .time>.dm{ font-size:28px;}
#news>.list>ul>li>a .time>.yy{ font-size:16px;}
#news>.view>.title{ font-size:28px;}
}
@media only screen and (max-width: 780px){
#news>.list>ul>li>a .con>.tit{ font-size:20px;}
#news>.list>ul>li>a .con>.txt{ margin:10px 0;}
#news>.list>ul>li>a .con>.more>span{font-size:12px;}
#news>.list>ul>li>a .time>.dm{ font-size:24px;}
#news>.list>ul>li>a .time>.yy{ font-size:14px;}
}
@media only screen and (max-width: 640px){
#news>.list>ul>li>a .img{ float:none; width:100%;}
#news>.list>ul>li>a .con{ float:none; width:100%;padding:20px 0;}
#news>.list>ul>li>a .con>.tit{ font-size:22px;}
#news>.list>ul>li>a .con>.txt{ margin:20px 0;}
#news>.list>ul>li>a .con>.more>span{font-size:14px;}
#news>.list>ul>li>a .time{ float:none; width:100%;}
#news>.list>ul>li>a .time>.dm{ font-size:28px;}
#news>.list>ul>li>a .time>.yy{ font-size:16px;}
#news>.view>.title{ font-size:20px; padding-top:50px;}
#news>.view>.time{font-size:13px;}
#news>.view>.content{ font-size:14px; line-height:24px; color:#666;}
#news>.view>.content table td{font-size:12px; padding:5px; }
#news>.view>.share{ padding:30px; }
#news>.view>.share .bshare-custom a{ margin:0 10px!important; width:40px; height:40px;}
#news>.view>.pageurl{padding:30px 15px;font-size:12px;}
#news>.view>.pageurl>.prev, #news>.view>.pageurl>.next{ float:none; width:100%; padding:5px; box-sizing:border-box;}
}
/*END*/
/*jobs TOP*/
#jobs{width:90%; max-width:1360px; margin:0 auto; padding:20px 0; position:relative; overflow:hidden;}
#jobs>.nav{margin:0 auto; padding-bottom:20px;}
#jobs>.nav>ul{margin:0 auto;}
#jobs>.nav>ul>li{ display:block; float:left; width:50%; text-align:center; font-size:16px; background:#eee;}
#jobs>.nav>ul>li>a{display:block; color:#666;padding:20px 0; transition:all .35s;}
#jobs>.nav>ul>li.A{ background:#d0021c;}
#jobs>.nav>ul>li.A>a{ color:#ffffff !important;}
#jobs>.nav>ul>li>a:hover{ color:#d0021c;}
#jobs>.list{margin:0 auto; border:1px solid #e8e8e8;}
#jobs>.list>.list_tr{margin:0 auto;overflow:hidden; border-bottom:1px solid #e8e8e8;}
#jobs>.list>.list_tr>li{ position:relative; float:left; width:15%; padding:20px 0; text-align:center; color:#666; font-size:16px; font-weight:bold; overflow:hidden;}
#jobs>.list>.list_tr>li:after{ position:absolute;z-index:1; left:0; bottom:0; width:1px; height:40%; opacity:.4; background:#fff; content:'';}
#jobs>.list>.list_tr>li:first-child:after, #jobs>.list>.list_tr>li:last-of-type:after{opacity:0;}
#jobs>.list>.list_tr>li.td1{ width:20%; text-align:left;padding-left:20px; box-sizing:border-box;}
#jobs>.list>.list_tr>li.td7{ width:5%;}
#jobs>.list>.list_td>li{ display:block; transition:all .35s;}
#jobs>.list>.list_td>li>.akey{position:relative;}
#jobs>.list>.list_td>li>.akey:after{ position:absolute;z-index:1;left:50%; bottom:0; width:98%; height:1px; margin-left:-49%; border-bottom:1px dotted #ddd; content:'';}
#jobs>.list>.list_td>li:last-child .akey:after{ border-bottom:0 !important;}
#jobs>.list>.list_td>li>.akey>div{ float:left; width:15%; padding:15px 0; text-align:center; color:#666; font-size:14px;}
#jobs>.list>.list_td>li>.akey>div.td1{ width:20%;text-align:left;padding-left:20px; box-sizing:border-box; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#jobs>.list>.list_td>li>.akey>div.td7{ position:relative; opacity:.2; width:5%; height:20px; background:url("../images/icon-arrow-down-circle-black.png") no-repeat; background-size:24px auto; background-position:50% 50%; transition:all .35s;}
#jobs>.list>.list_td>li>.akey>div>a{display:inline-block; background:url("../images/icon-delivery.png") no-repeat; background-size:20px; background-position:left center; padding-left:25px; color:#d0021c; transition:all .35s;}
#jobs>.list>.list_td>li>.akey>div>a:hover{ text-decoration:underline;}
#jobs>.list>.list_td>li>.akey:hover{ background:#fef9fa;}
#jobs>.list>.list_td>li>.det{ position:relative; display:none; width:100%; padding:20px 0;float:none; margin:0 auto; text-align:left;}
#jobs>.list>.list_td>li>.det:after{ position:absolute;z-index:1;left:50%; bottom:0; width:98%; height:1px; margin-left:-49%; border-bottom:1px dotted #ddd; content:'';}
#jobs>.list>.list_td>li:last-child .det:after{ border-bottom:0 !important;}
#jobs>.list>.list_td>li>.det .con{ text-align:left; padding:0 20px 10px 20px;}
#jobs>.list>.list_td>li>.det .mob{display:none;}
#jobs>.list>.list_td>li>.det .con>div{ width:30%; float:left; font-size:14px; color:#666;padding:5px 0;}
#jobs>.list>.list_td>li>.det .tag{padding:0 20px; text-align:left;}
#jobs>.list>.list_td>li>.det .tag>.tit{ font-size:14px; color:#666;padding:5px 0;}
#jobs>.list>.list_td>li>.det .tag>.txt{ font-size:14px; color:#666; line-height:21px; padding:10px 0;}
#jobs>.list>.list_td>li>.det .url{ text-align:left;padding:20px;}
#jobs>.list>.list_td>li>.det .url>a{display:inline-block; background:#d0021c; padding:8px 40px; color:#fff; font-size:16px; transition:all .35s;}
#jobs>.list>.list_td>li>.det .url>a:hover{ background:#e31832;}
#jobs>.list>.list_td>li>.det .url>.tip{ display:inline-block; color:#bbb; font-size:14px; padding-left:20px;}
#jobs>.list>.list_td>li.A>.akey>div.td7{transform:rotate(180deg);}
#jobs>.loadmore{ width:90%;max-width:1360px; padding:50px 0;margin:0 auto; text-align:center;}
#jobs>.loadmore>a{display:inline-block; padding:10px 90px; font-size:18px; color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#jobs>.loadmore>a:hover{ background:#d0021c; border:1px solid #d0021c; color:#fff;}
@media only screen and (max-width: 960px){
#jobs>.list>.list_tr>li{ font-size:15px;}
}
@media only screen and (max-width: 780px){
#jobs>.list>.list_tr{ background:#666;}
#jobs>.list>.list_tr>li{ font-weight:normal; color:#fff;}
#jobs>.list>.list_tr>li:after{ height:100%;}
#jobs>.list>.list_tr>li.td1{ width:45%;}
#jobs>.list>.list_tr>li.td2{display:none;}
#jobs>.list>.list_tr>li.td3{display:none;}
#jobs>.list>.list_tr>li.td4{width:25%;}
#jobs>.list>.list_tr>li.td5{display:none;}
#jobs>.list>.list_tr>li.td6{ width:20%;}
#jobs>.list>.list_tr>li.td7{ width:10%;}
#jobs>.list>.list_td>li>.akey>div.td1{ width:45%;}
#jobs>.list>.list_td>li>.akey>div.td2{display:none;}
#jobs>.list>.list_td>li>.akey>div.td3{display:none;}
#jobs>.list>.list_td>li>.akey>div.td4{width:25%;}
#jobs>.list>.list_td>li>.akey>div.td5{display:none;}
#jobs>.list>.list_td>li>.akey>div.td6{ width:20%;}
#jobs>.list>.list_td>li>.akey>div.td7{ width:10%;}
#jobs>.list>.list_td>li>.det .mob{display:inline-block;}
}
@media only screen and (max-width: 420px){
#jobs>.list>.list_tr>li{ font-size:14px;}
#jobs>.list>.list_td>li>.akey>div.td7{ background-size:20px auto;}
#jobs>.list>.list_td>li>.det .con>div{ display:block; width:50%; font-size:12px;}
#jobs>.list>.list_td>li>.det .url>.tip{ display:block; padding-left:0px;}
}
/*END*/
#delivery{ position:fixed;z-index:1001; right:-100%; top:0; width:100%;height:100%; background:rgba(0,0,0,.8);}
#delivery>.close{ position:absolute;z-index:99;right:50%; top:0; width:80px; height:80px; line-height:80px; cursor:pointer; text-align:center; background:#ff9900;overflow:hidden;}
#delivery>.close>img{ width:42px; height:auto; transition:all .35s;}
#delivery>.close:hover img{transform:rotate(180deg);}
#delivery>.container{ position:absolute; z-index:9; right:0; bottom:0; width:50%; height:100%; background:#d0021c;}
#delivery>.container>.tit{ padding:50px 0; font-size:32px; color:#fff; width:80%;margin:0 auto;}
#delivery>.container>.tit>img{ height:56px; width:auto; margin-right:10px;}
#delivery>.container>.form{ width:80%;margin:0 auto;}
#delivery .layui-form-label{ color:#fff; background:rgba(0,0,0,.3); text-align:center; width:76px;}
#delivery .layui-input-block{ color:#fff;}
#delivery .layui-input, #delivery .layui-select, #delivery .layui-textarea {border-radius: 0; border:0; background-color:rgba(0,0,0,.3); color:#fff;}
#delivery .layui-form-radio>i {color: rgba(255,255,255,.5);}
#delivery .layui-form-radio>i:hover, #delivery .layui-form-radioed>i {color:rgba(255,255,255,1);}
#delivery input::-webkit-input-placeholder, #delivery textarea::-webkit-input-placeholder{ color:rgba(255,255,255,.3);}
#delivery .layui-btn {padding: 0 30px;background-color: #333;font-size: 16px;border-radius:0px;}
#delivery .layui-btn-primary {border: 0px;background-color: #999;color: #fff;}
@media only screen and (max-width: 1360px){
#delivery>.close{ right:70%;}
#delivery>.container{ width:70%;}
}
@media only screen and (max-width: 1100px){
#delivery>.close{ right:80%;}
#delivery>.container{ width:80%;}
}
@media only screen and (max-width: 960px){
#delivery>.close{ right:0;}
#delivery>.container{ width:100%;}
}
@media only screen and (max-width: 780px){
#delivery>.close{ width:50px; height:50px; line-height:50px; }
#delivery>.close>img{ width:30px;}
#delivery>.container{ overflow-y:auto;}
#delivery>.container>.tit{ padding:20px 0; font-size:24px;}
#delivery>.container>.tit>img{ height:36px;}
#delivery .layui-form-item .layui-inline { margin-bottom:5px; }
#delivery .layui-form-item {margin-bottom: 5px;}
}
@media only screen and (max-width: 420px){
#delivery .layui-btn { padding:0 18px; }
}
/*hr TOP*/
#hr{width:100%; margin:0 auto; padding:30px 0; position:relative; overflow:hidden;}
#hr>.container{ width:90%; max-width:1360px; margin:0 auto; text-align:left;}
#hr>.container>.item{ width:60%; padding-bottom:4%; text-align:left;}
#hr>.container>.item>.tit{ font-size:30px; font-weight:bold; color:#333;}
#hr>.container>.item>.txt{ padding:10px 0; font-size:16px; line-height:28px; color:#444;}
#hr>.img{ position:absolute;z-index:8; right:0; top:0; width:36%; text-align:right;}
#hr>.img>img{ width:100%;height:auto;}
@media only screen and (max-width: 960px){
#hr{ width:90%; max-width:1360px;}
#hr>.container{ width:100%; max-width:none; padding-top:50px;}
#hr>.container>.item{ width:100%;}
#hr>.img{position:relative; width:100%; text-align:left;}
}
@media only screen and (max-width: 640px){
#hr>.container>.item>.tit{ font-size:20px;}
#hr>.container>.item>.txt{ font-size:14px;}
}
/*END*/
/*care TOP*/
#care{ position:relative; width:90%; max-width:1360px; margin:0 auto; padding:20px 0; }
#care>.list{ margin:0 auto;}
#care>.list>ul{ margin:0 auto;}
#care>.list>ul>li{position:relative;display:block; float:left; width:32%; overflow:hidden; margin-right:2%; margin-bottom:2%;text-align:left;}
#care>.list>ul>li:nth-of-type(3n){ margin-right:0 !important;}
#care>.list>ul>li>a>.img{ position:relative; margin:0 auto; overflow:hidden;}
#care>.list>ul>li>a>.img>img{ width:100%; height:auto; transition:all 1s;}
#care>.list>ul>li>a>.tit{ padding:15px 10px; font-size:16px; text-align:left; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#care>.list>ul>li>a:hover .img>img{transform:scale(1.1);}
#care>.list>ul>li>a:hover .tit{ background:#d0021c; color:#fff; padding:15px 20px;}
#care>.loadmore{ width:90%;max-width:1360px; padding:50px 0;margin:0 auto; text-align:center;}
#care>.loadmore>a{display:inline-block; padding:10px 90px; font-size:18px; color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#care>.loadmore>a:hover{ background:#d0021c; border:1px solid #d0021c; color:#fff;}
@media only screen and (max-width: 1080px){
#care>.list>ul>li{width:29.7%;}
}
@media only screen and (max-width: 780px){
#care>.list>ul>li{width:29.6%;}
#care>.list>ul>li>a>.tit{ font-size:14px;}
}
@media only screen and (max-width: 580px){
#care>.list>ul>li{ width:46.5%; margin-right:0 !important;}
#care>.list>ul>li:nth-of-type(even){ float:right;}
#care>.list>ul>li:nth-of-type(4n){ margin-right:0 !important;}
#care>.list>ul>li:nth-of-type(3n){ margin-right:0 !important;}
}
/*END*/
/*product TOP*/
#product{ margin:0 auto; }
/*
#product>.catalog{margin:0 auto;}
#product #catalogue{padding:0;margin:0 auto;}
#product #catalogue>.item{ position:relative; z-index:2; display:block;float:left; border:1px solid #ddd; width:28.6%; padding:1%; margin:0 2% 2% 0;}
#product #catalogue>.item:nth-child(3n){margin-right:0 !important;}
#product #catalogue>.item .tit{padding:20px 0; text-align:left;}
#product #catalogue>.item>a{display:block; font-size:20px; font-weight:700; color:#333;}
#product #catalogue>.item .img{ text-align:left;margin:0 auto;}
#product #catalogue>.item .img img{ width:100%;height:auto;}
#product #catalogue>.item .list{padding:20px 0; text-align:left;height:138px; overflow:hidden;}
#product #catalogue>.item .list>a{display:block; padding:4px 0; font-size:16px; color:#555; transition:all .35s;}
#product #catalogue>.item .list>a:hover{ color:#d0021c; padding-left:10px;}*/
#product>.isnew{width:90%;max-width:1360px;margin:30px auto;}
#product>.isnew>.item{ width:49%; float:left; margin-bottom:2%;}
#product>.isnew>.item:nth-child(2n){float:right;}
#product>.isnew>.item>a{position:relative; display:block;}
#product>.isnew>.item img{width:100%;height:auto;}
#product>.isnew>.item>a:after{position:absolute;z-index:9;left:50%; top:50%; margin-left:-50px;margin-top:-40px; width:100px;height:100px; opacity:0; content:''; background:url("../images/icon-play.png") no-repeat; background-size:100% auto; transition:all .35s; }
#product>.isnew>.item>a:before{position:absolute;z-index:1;left:0;top:0; width:100%;height:100%; background:rgba(0,0,0,1);opacity:.1; content:''; transition:all .35s;}
#product>.isnew>.item>a:hover:before{opacity:.8;}
#product>.isnew>.item>a:hover:after{opacity:1;margin-top:-50px;}
#product>.catalog{width:90%;max-width:1360px; clear:both; margin:0 auto;}
#product>.catalog>.item{position:relative; z-index:1; display:block;float:left; width:32%; margin:0 2% 2% 0;}
#product>.catalog>.item:nth-child(3n){margin-right:0 !important;}
#product>.catalog>.item .tit{padding:15px; text-align:left;border:1px solid #eee; border-bottom:0 !important;}
#product>.catalog>.item .tit>a{ position:relative; display:block; font-size:20px; font-weight:700; color:#333; transition:all .35s;}
#product>.catalog>.item .tit>a>span{ display:inline-block; width:30px;height:30px; line-height:30px; overflow:hidden; float:left; text-align:center; margin-right:10px; background:#d0021c; color:#fff; transition:all .35s;}
#product>.catalog>.item .img{ text-align:left;margin:0 auto;padding:0 15px;border-left:1px solid #eee;border-right:1px solid #ddd;}
#product>.catalog>.item .img img{width:100%; height:auto;}
#product>.catalog>.item .con{position:relative; width:100%; height:168px;}
#product>.catalog>.item .con>.list{padding:15px; background:#fff; border:1px solid #eee; border-top:0 !important; text-align:left;height:135px; overflow:hidden;}
#product>.catalog>.item .con>.list>a{ position:relative; display:block; padding:4px 0; font-size:16px; color:#555; transition:all .35s;}
#product>.catalog>.item .con>.list>a:after{position:absolute;z-index:1;left:0;top:7px; width:2px;height:0; background:#d0021c; content:''; transition:all .35s;}
#product>.catalog>.item .con>.list>a:hover{ color:#d0021c; padding-left:12px;}
#product>.catalog>.item .con>.list>a:hover:after{height:50%;}
#product>.catalog>.item:hover .tit>a{ color:#d0021c;}
#product>.solution{width:90%;max-width:1360px; margin:30px auto;overflow:hidden;}
#product>.solution .swiper-container a{position:relative; display:block; background:#d0021c; padding:20px 0;font-size:16px; color:#fff; text-align:center;transition:all .35s;}
#product>.solution .swiper-container a>span{ display:block; margin:10px auto;}
#product>.solution .swiper-container a>span>img{height:50px; width:auto;}
#product>.solution .swiper-container a:hover{ background:#b10016;}
#product>.solution .tips{text-align:right;padding:20px 0; color:#ccc;font-size:14px;}
#product>.solution .tips>img{opacity:.2; height:28px; width:auto;}
#product>.product{width:90%;max-width:1360px; margin:0 auto;}
#product>.product>.container{margin:0 auto; padding:20px 0;}
#product>.product>.container>.path{ width:60%; text-align:left;color:#d0021c; font-size:20px;}
#product>.product>.container>.path>img{height:36px; width:auto; margin-right:5px;}
#product>.product>.container>.path>a{ position:relative; display:inline-block;padding:0 3px; font-weight:bold; color:#d0021c; transition:all .35s;}
#product>.product>.container>.path>a:hover{opacity:.5;}
#product>.product>.container>.back{width:20%; text-align:right;}
#product>.product>.container>.back>a{background:#d0021c; border:1px solid #d0021c; border-radius:50px; color:#fff;padding:6px 20px; font-size:14px; transition:all .35s;}
#product>.product>.container>.back>a:hover{ background:none; color:#d0021c;}
#product>.product>.list{margin:0 auto;}
#product>.product>.list>ul{margin:0 auto;}
#product>.product>.list>ul>li{position:relative;display:block; float:left; width:21.2%; overflow:hidden; padding:1%; margin-right:2%; margin-bottom:2%; border:1px solid #eee; transition:all .35s;}
#product>.product>.list>ul>li:nth-of-type(4n){ margin-right:0 !important;}
#product>.product>.list>ul>li>a{display:block;}
#product>.product>.list>ul>li>a .img{ text-align:center; transition:all .35s;}
#product>.product>.list>ul>li>a .img>img{ width:100%;height:auto;}
#product>.product>.list>ul>li>a .tit{ padding:0 50px; text-align:left;font-size:18px; color:#666;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#product>.product>.list>ul>li>a .more{ padding:10px 50px 20px 50px; color:#d0021c;font-size:14px;}
#product>.product>.list>ul>li>a .more>img{display:inline-block; margin-left:6px; height:18px; width:auto; transition:all .35s;}
#product>.product>.list>ul>li>a:hover .more>img{ padding-left:4px;}
#product>.product>.list>ul>li>a:hover .img{transform:translateY(-6px)}
#product>.product>.list>ul>li:hover{ box-shadow:0 3px 8px rgba(0,0,0,.1);}
#product>.product>.loadmore{ width:90%;max-width:1360px; padding:50px 0;margin:0 auto; text-align:center;}
#product>.product>.loadmore>a{display:inline-block; padding:10px 90px; font-size:18px; color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#product>.product>.loadmore>a:hover{ background:#d0021c; border:1px solid #d0021c; color:#fff;}
#product>.view{margin:0 auto; position:relative;}
#product>.view .title{ position:relative;z-index:3; bottom:-100px; width:90%;max-width:1360px; margin:0 auto; font-size:36px; font-weight:bold; color:#333;}
#product>.view>.wrap{ width:90%;max-width:1360px;margin:0 auto;overflow:hidden;}
#product>.view .focus{ position:relative; width:40%; text-align:center;}
#product>.view .focus img{ width:100%;height:auto;}
#product>.view .focus .swiper-container{ margin:0 auto;}
#product>.view .focus .swiper-pagination{ position:relative; text-align:center;margin:0 auto;}
#product>.view .focus .swiper-pagination .swiper-pagination-bullet{width:10px;height:10px; margin:5px; display: inline-block;border-radius: 100%;background: #000;opacity: .2;}
#product>.view .focus .swiper-pagination .swiper-pagination-bullet-active{ background:#d0021c;opacity:1;}
#product>.view .focus .button-prev{ position:absolute;z-index:4; top:50%; left:0; margin-top:-30px; cursor:pointer;opacity:.3; width:50px; height:50px; background:url("../images/icon-arrow-left-circle-black.png") no-repeat;background-size:100% auto; background-position:50% 50%; transition:all .35s;}
#product>.view .focus .button-next{ position:absolute;z-index:4; top:50%; right:0; margin-top:-30px; cursor:pointer;opacity:.3; width:50px; height:50px; background:url("../images/icon-arrow-right-circle-black.png") no-repeat;background-size:100% auto; background-position:50% 50%; transition:all .35s;}
#product>.view .focus .button-prev:hover,#product>.view .focus .button-next:hover{ opacity:.6;}
#product>.view .container{ width:50%; padding:150px 20px 0 20px; text-align:left;}
#product>.view .container>.con>.tit{ font-size:20px; color:#d0021c;}
#product>.view .container>.con>.txt{ padding:20px 0; width:80%; font-size:16px; color:#666; line-height:25px;}
#product>.view .container>.con>.txt>p{ margin-bottom:20px;}
#product>.view>.tag_nav{ position:relative;z-index:999; left:0; width:100%;margin:0 auto; padding-top:20px; border-bottom:1px solid #eee;}
#product>.view>.tag_nav>ul{width:90%;max-width:1360px;margin:0 auto; text-align:center;}
#product>.view>.tag_nav>ul>li{ position:relative; display:inline-block; font-size:16px;}
#product>.view>.tag_nav>ul>li>a{display:block;padding:10px 20px 20px 20px; color:#666;}
#product>.view>.tag_nav>ul>li.A>a{color:#d0021c; font-weight:bold;}
#product>.view>.tag_nav>ul>li.A:after{ position:absolute;z-index:1;left:0; bottom:0; width:100%;height:3px; background:#d0021c;content:''; }
#product>.view>.tag_nav_ac{ top:100px; background:rgba(208,2,28,.8); padding-top:0 !important; border-bottom:0 !important;}
#product>.view>.tag_nav_ac>ul>li>a{padding:30px 20px 20px 20px; color:#fff; font-size:16px;}
#product>.view>.tag_nav_ac>ul>li.A>a{ color:#fff;}
#product>.view>.tag_nav_ac>ul>li.A:after{ position:absolute;z-index:9; background:none; left:50%; bottom:0; margin-left:-8px; width:0;height:0;border-right:8px solid transparent;border-left:8px solid transparent; border-bottom:8px solid rgba(255,255,255,1);content:'';}
#product>.view>.tag_video{ text-align:center;margin:0 auto; padding-top:50px;}
#product>.view>.tag_video>iframe{margin:0 auto;}
#product>.view>.tag_con{width:90%;max-width:1360px;margin:0 auto; padding-top:50px;}
#product>.view>.tag_con>.item{margin-bottom:40px;}
#product>.view>.tag_con .tit{ position:relative; padding:10px 10px 10px 30px; font-size:20px; color:#d0021c; text-align:left;}
#product>.view>.tag_con .tit:after{position:absolute;z-index:3;left:0;top:50%; margin-top:-8px; width:16px; height:16px; background:url("../images/icon-arrow-right-red.png") no-repeat; background-size:auto 100%; background-position:50% 50%; content:'';}
#product>.view>.tag_con .con{ padding:10px 30px; font-size:14px; line-height:24px; color:#444;}
#product>.view>.tag_con .con>p{margin-bottom:10px;}
#product>.view>.tag_con .con img{max-width:100%;}
#product>.view>.tag_con .con table{ border-top:1px solid #ddd; border-left:1px solid #ddd;margin:0px auto; width:99.6%;}
#product>.view>.tag_con .con table td{ color:#666; font-size:14px; padding:8px; text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
#product>.view>.tag_con .con .tableWap{ overflow:hidden; overflow-x:auto;}
#product>.view>.tag_con .list{padding:10px 30px; text-align:left;}
#product>.view>.tag_con .list>a{display:block; float:left; width:33.3%;padding:5px 0;font-size:16px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s; }
#product>.view>.tag_con .list>a:hover{ text-decoration:underline;}
#product>.view>.tag_con .list>a img{ height:40px; width:auto; margin-right:5px;}
#product>.view>.pageurl{ width:90%;max-width:1360px; padding:50px 0;margin:0 auto; border-top:1px solid #eee; text-align:center;}
#product>.view>.pageurl>a{display:inline-block; padding:10px 90px; font-size:18px; color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#product>.view>.pageurl>a:hover{ background:#d0021c; border:1px solid #d0021c; color:#fff;}
@media only screen and (max-width: 1080px){
#product>.catalog>.item .tit>a{ font-size:18px;}
#product>.catalog>.item .con>.list>a{ font-size:14px;}
#product>.solution .swiper-container a{font-size:14px;}
#product>.view .title{ bottom:-60px;}
#product>.view .container{ padding-top:100px;}
#product>.view .container>.con>.txt{ width:90%; font-size:14px; line-height:20px;}
#product>.view .focus .button-prev{ margin-top:-25px; width:40px; height:40px;}
#product>.view .focus .button-next{ margin-top:-25px; width:40px; height:40px;}
#product>.view>.tag_nav>ul>li{ font-size:16px;}
#product>.view>.tag_nav_ac{ top:80px; }
#product>.view>.tag_nav_ac>ul>li>a{font-size:14px;}
#product>.view>.tag_con .list>a{width:50%;}
}
@media only screen and (max-width: 960px){
#product>.catalog>.item .tit>a{ font-size:16px;}
#product>.catalog>.item .tit>a>span{ width:25px;height:25px; line-height:25px;}
#product>.catalog>.item .con>.list>a{ font-size:13px;}
#product>.product>.list>ul>li{width:29.4%;}
#product>.product>.list>ul>li:nth-of-type(4n){ margin-right:2% !important;}
#product>.product>.list>ul>li:nth-of-type(3n){ margin-right:0 !important;}
#product>.view .title{ font-size:25px; bottom:-60px;}
#product>.view .focus .button-prev{ margin-top:-20px; width:30px; height:30px;}
#product>.view .focus .button-next{ margin-top:-20px; width:30px; height:30px;}
#product>.view .container{ padding-top:80px;}
#product>.view>.tag_nav_ac{ top:115px; }
#product>.view>.tag_nav_ac>ul>li>a{padding:20px;}
}
@media only screen and (max-width: 780px){
#product>.catalog>.item{width:49%; float:left; margin-bottom:2%;margin-right:0 !important;}
#product>.catalog>.item:nth-child(3n){margin-right:0 !important;}
#product>.catalog>.item:nth-child(2n){float:right;}
#product>.product>.container>.path{font-size:16px;}
#product>.product>.container>.path>img{height:30px; }
#product>.product>.container>.back>a{ border-radius:30px;padding:6px 20px; font-size:12px;}
#product>.product>.list>ul>li>a .tit{ padding:0 20px; text-align:center;font-size:16px;}
#product>.product>.list>ul>li>a .more{ padding:10px 20px 20px 20px; text-align:center;}
#product>.view .title{ font-size:25px; bottom:0; text-align:center;}
#product>.view .container{ float:none; width:100%; padding-top:0;}
#product>.view .focus{ float:none; width:100%;}
#product>.view .focus .button-prev{ margin-top:-30px; width:40px; height:40px;}
#product>.view .focus .button-next{ margin-top:-30px; width:40px; height:40px;}
#product>.view>.tag_nav_ac{ top:95px;}
#product>.view>.tag_nav_ac>ul>li>a{ padding:20px 10px;}
#product>.view>.tag_nav_ac>ul>li.A:after{ margin-left:-6px; border-right:6px solid transparent;border-left:6px solid transparent; border-bottom:6px solid rgba(255,255,255,1);}
#product>.view>.tag_video{ padding-top:30px;}
#product>.view>.tag_video>iframe{width:80%; height:320px;}
#product>.view>.tag_con .tit{padding-left:20px; font-size:16px;}
#product>.view>.tag_con .tit:after{margin-top:-6px; width:12px; height:12px;}
#product>.view>.tag_con .con{padding:10px 20px;}
#product>.view>.tag_con .list{ padding-left:20px;}
#product>.view>.tag_con .list>a{width:100%; float:none; font-size:14px;}
}
@media only screen and (max-width: 640px){
#product>.isnew>.item{ width:100%; float:none; margin-bottom:2%;}
#product>.isnew>.item:nth-child(2n){float:none;}
#product>.catalog>.item{float:none; width:100%; margin:0 0 2% 0;}
#product>.catalog>.item:nth-child(3n){margin-right:0 !important;}
#product>.catalog>.item:nth-child(2n){float:none;}
#product>.catalog>.item .con{ height:auto!important;}
#product>.catalog>.item .con>.list{height:auto!important;}
#product>.product>.container>.path{ width:100%;}
#product>.product>.container>.path{font-size:14px;}
#product>.product>.container>.path>img{height:25px; }
#product>.product>.container>.back{ float:none; width:30%; padding-top:50px; text-align:left;}
#product>.product>.container>.back>a{padding:6px 12px;}
#product>.product>.list>ul>li{width:46.4%; margin-right:0 !important;}
#product>.product>.list>ul>li:nth-of-type(4n){ margin-right:0 !important;}
#product>.product>.list>ul>li:nth-of-type(3n){ margin-right:0 !important;}
#product>.product>.list>ul>li:nth-of-type(2n){ float:right;}
#product>.view>.tag_nav_ac>ul>li>a{ padding:15px 10px; font-size:12px;}
#quickmenu{ display:none;}
}
@media only screen and (max-width: 560px){
#product>.view>.tag_nav_ac>ul{padding:10px 0 30px 0;}
#product>.view>.tag_nav_ac>ul>li{ float:left; width:33.33%;}
#product>.view>.tag_nav_ac>ul>li>a{padding:10px;}
#product>.view>.tag_nav_ac>ul>li.A:after{display:none;}
#product>.view>.tag_nav_ac>ul>li.A:before{ position:absolute;z-index:1;left:0;top:0; width:99%; height:99%; border:1px solid #fff;content:'';}
}
@media only screen and (max-width: 420px){
#product>.product>.list>ul>li>a .tit{ font-size:14px;}
#product>.product>.list>ul>li>a .more{ font-size:12px;}
#product>.product>.list>ul>li>a .more>img{ margin-left:3px; height:14px;}
#product>.product>.list>ul>li{ float:none!important; width:100%; margin-right:0 !important;}
}
/*END*/
/*search TOP*/
#search{width:90%;max-width:1360px; margin:0 auto; padding:50px 0; }
#search>.container{margin:0 auto; padding-bottom:30px;}
#search>.container>.path{ width:60%; text-align:left;color:#d0021c; font-size:20px;}
#search>.container>.path>img{height:36px; width:auto; margin-right:5px;}
#search>.container>.path>a{ position:relative; display:inline-block;padding:0 3px; font-weight:bold; color:#d0021c; transition:all .35s;}
#search>.container>.path>a:hover{opacity:.5;}
#search>.container>.back{width:20%; text-align:right;}
#search>.container>.back>a{background:#d0021c; border:1px solid #d0021c; border-radius:50px; color:#fff;padding:6px 20px; font-size:14px; transition:all .35s;}
#search>.container>.back>a:hover{ background:none; color:#d0021c;}
#search>.list{margin:0 auto;}
#search>.list>ul{margin:0 auto;}
#search>.list>ul>li{position:relative;display:block; float:left; width:21.2%; overflow:hidden; padding:1%; margin-right:2%; margin-bottom:2%; border:1px solid #eee; transition:all .35s;}
#search>.list>ul>li:nth-of-type(4n){ margin-right:0 !important;}
#search>.list>ul>li>a{display:block;}
#search>.list>ul>li>a .img{ text-align:center; transition:all .35s;}
#search>.list>ul>li>a .img>img{ width:100%;height:auto;}
#search>.list>ul>li>a .tit{ padding:0 50px; text-align:left;font-size:18px; color:#666;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#search>.list>ul>li>a .more{ padding:10px 50px 20px 50px; color:#d0021c;font-size:14px;}
#search>.list>ul>li>a .more>img{display:inline-block; margin-left:6px; height:18px; width:auto; transition:all .35s;}
#search>.list>ul>li>a:hover .more>img{ padding-left:4px;}
#search>.list>ul>li>a:hover .img{transform:translateY(-6px)}
#search>.list>ul>li:hover{ box-shadow:0 3px 8px rgba(0,0,0,.1);}
#search>.loadmore{ width:90%;max-width:1360px; padding:50px 0;margin:0 auto; text-align:center;}
#search>.loadmore>a{display:inline-block; padding:10px 90px; font-size:18px; color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#search>.loadmore>a:hover{ background:#d0021c; border:1px solid #d0021c; color:#fff;}
@media only screen and (max-width: 960px){
#search>.list>ul>li{width:29.4%;}
#search>.list>ul>li:nth-of-type(4n){ margin-right:2% !important;}
#search>.list>ul>li:nth-of-type(3n){ margin-right:0 !important;}
}
@media only screen and (max-width: 780px){
#search>.container>.path{font-size:16px;}
#search>.container>.path>img{height:30px; }
#search>.container>.back>a{ border-radius:30px;padding:6px 20px; font-size:12px;}
#search>.list>ul>li>a .tit{ padding:0 20px; text-align:center;font-size:16px;}
#search>.list>ul>li>a .more{ padding:10px 20px 20px 20px; text-align:center;}
}
@media only screen and (max-width: 640px){
#search>.container>.path{ width:100%;}
#search>.container>.path{font-size:14px;}
#search>.container>.path>img{height:25px; }
#search>.container>.back{ float:none; width:30%; padding-top:50px; text-align:left;}
#search>.container>.back>a{padding:6px 12px;}
#search>.list>ul>li{width:46.4%; margin-right:0 !important;}
#search>.list>ul>li:nth-of-type(4n){ margin-right:0 !important;}
#search>.list>ul>li:nth-of-type(3n){ margin-right:0 !important;}
#search>.list>ul>li:nth-of-type(2n){ float:right;}
}
@media only screen and (max-width: 420px){
#search>.list>ul>li>a .tit{ font-size:14px;}
#search>.list>ul>li>a .more{ font-size:12px;}
#search>.list>ul>li>a .more>img{ margin-left:3px; height:14px;}
#search>.list>ul>li{ float:none!important; width:100%; margin-right:0 !important;}
}
/*END*/
/*solution TOP*/
#solution{ position:relative; margin:0 auto;overflow:hidden;}
#solution>.container{ position:relative;z-index:1;margin:0 auto;}
#solution>.container>.item{ position:absolute;z-index:96;}
#solution>.container>.item>a{display:block; position:relative;}
#solution>.container>.item>a .con{ position:relative;display:inline-block; background:#d0021c;padding:10px 25px; border-radius:5px;animation: fadeInUp .5s; animation-timing-function: ease-in; transition:all .35s;}
#solution>.container>.item>a .con:after{ position:absolute;z-index:5; left:50%; bottom:-6px; margin-left:-6px; width:0;height:0;border-right:6px solid transparent;border-left:6px solid transparent; border-top:6px solid #d0021c;content:'';transition:all .35s;}
#solution>.container>.item>a .con>.icon{display:none;}
#solution>.container>.item>a .con>.tit{ font-size:16px; color:#fff; text-align:center;}
#solution>.container>.item>a .spot{ position:absolute;z-index:6; left:50%;bottom:-25px; margin-left:-5px; width:10px; height:10px; background:#d0021c; border-radius:10px; animation: scaled-rect 1s infinite; animation-timing-function: ease-in-out;}
#solution>.container>.item>a .spot:before {content: "";box-sizing: border-box;width: 40px; height: 40px;position: absolute; left: 50%; top: 50%; margin-top: -20px; margin-left: -20px; border-radius: 50%; box-shadow: 0 0 6px 1px #ce1b2e; transform: scale(0); opacity: 1; will-change: transform, opacity;}
#solution>.container>.item>a:hover .con{background:#444;}
#solution>.container>.item>a:hover .con:after{border-top:6px solid #444;}
#solution>.container>.item>a:hover .spot:before{animation: out-circle 1s infinite;animation-timing-function: ease-in;}
#solution>.container>.city{ text-align:left;margin:0 auto;}
#solution>.container>.city>img{width:100%;height:auto;}
#solution>.container>.loc1{ left:8%; top:13%;}
#solution>.container>.loc2{ left:53%; top:20%;}
#solution>.container>.loc2>a .con{animation-duration:.8s;}
#solution>.container>.loc3{ left:30%; top:40%;}
#solution>.container>.loc3>a .con{animation-duration:1s;}
#solution>.container>.loc4{ left:24%; top:65%;}
#solution>.container>.loc4>a .con{animation-duration:1.2s;}
#solution>.container>.loc5{ left:46%; bottom:28%;}
#solution>.container>.loc5>a .con{animation-duration:1.5s;}
#solution>.container>.loc6{ left:42%; top:33%;}
#solution>.container>.loc6>a .con{animation-duration:.6s;}
#solution>.container>.loc7{ left:15%; top:56%;}
#solution>.container>.loc7>a .con{animation-duration:.7s;}
#solution>.container>.loc8{ left:38%; top:78%;}
#solution>.container>.loc8>a .con{animation-duration:1s;}
#solution>.container>.loc9{ left:66%; bottom:56%;}
#solution>.container>.loc9>a .con{animation-duration:1.2s;}
#solution>.container>.loc10{ left:45%; bottom:50%;}
#solution>.container>.loc10>a .con{animation-duration:1.1s;}
/*
#solution>.list{margin:0 auto;}
#solution>.list>ul{margin:0 auto;}
#solution>.list>ul>li{ float:left; width:32%; margin-right:1.5%; margin-bottom:4%;}
#solution>.list>ul>li:nth-child(3n){margin-right:0 !important;}
#solution>.list>ul>li>a{display:block; position:relative;padding:20px; border:1px solid #eee;}
#solution>.list>ul>li>a .con{ position:relative; padding:20px; text-align:left;}
#solution>.list>ul>li>a .con>.icon{ position:absolute;z-index:9; left:20px; top:-60px; background:#d0021c; width:80px; height:80px; line-height:80px; text-align:center;}
#solution>.list>ul>li>a .con>.icon>img{ width:90%;height:auto;}
#solution>.list>ul>li>a .con>.tit{ font-size:18px; color:#666;padding-top:20px; transition:all .35s;}
#solution>.list>ul>li>a .img{ text-align:left;}
#solution>.list>ul>li>a .img>img{ width:100%; height:auto;}
#solution>.list>ul>li>a:hover .tit{color:#d0021c;}*/
#solution>.view{ position:relative; width:90%;max-width:1360px; padding-top:50px; margin:0 auto;}
#solution>.view>.nav{ position:relative;z-index:99; top:0; padding-top:50px; width:160px; text-align:right;}
#solution>.view>.nav>ul{display:block;margin:0 auto;}
#solution>.view>.nav>ul>li{display:block; font-size:16px;}
#solution>.view>.nav>ul>li a{display:block; padding:10px;}
#solution>.view>.nav>ul>li.A{ background:#d0021c;}
#solution>.view>.nav>ul>li.A a{ color:#fff;}
#solution>.view>.container{width:84.8%; text-align:left; border-left:1px solid #eee;}
#solution>.view>.container .title{font-size:30px; color:#d0021c;}
#solution>.view>.container .content{margin:0 auto;padding:50px 0;}
#solution>.view>.container>.plan{padding-left:5%;}
#solution>.view>.container>.plan .tag{ margin-bottom:30px;}
#solution>.view>.container>.plan .tag>.tit{ position:relative; font-size:18px; color:#444; background:#f9f9f9; padding:15px 30px;}
#solution>.view>.container>.plan .tag>.tit:after{position:absolute;z-index:2; left:0;top:0; width: 0;height: 0;border-top: 25px solid #d0021c;border-right: 25px solid transparent;content:'';}
#solution>.view>.container>.plan .tag>.con{padding:20px; text-align:left; font-size:14px; line-height:25px; color:#666;}
#solution>.view>.container>.plan .tag>.con img{max-width:100%;height:auto;}
#solution>.view>.container>.related{ padding:5% 0 0 5%; border-top:1px solid #eee;}
#solution>.view>.container>.related .swiper-slide{border-right:1px dashed #eee;}
#solution>.view>.container>.related .swiper-pagination{ position:relative!important; padding:20px 0;}
#solution>.view>.container>.related .swiper-container-horizontal>.swiper-pagination-bullets, #solution>.view>.container>.related .swiper-pagination-custom, #solution>.view>.container>.related .swiper-pagination-fraction {bottom: 0px!important;}
#solution>.view>.container>.related .swiper-pagination-bullet-active {background:#d0021c!important;}
#solution>.view>.container>.related .img{padding:50px; text-align:center;}
#solution>.view>.container>.related .img>img{ width:100%;height:auto;}
#solution>.view>.container>.related .tit{ padding:0 50px; text-align:left;font-size:18px; color:#666;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#solution>.view>.container>.related .more{ padding:10px 50px; color:#d0021c;font-size:14px;}
#solution>.view>.container>.related .more>img{display:inline-block; margin-left:6px; height:12px; width:auto; transition:all .35s;}
#solution>.view>.container>.related a:hover .more>img{ padding-left:10px;}
#solution>.gotop{ display:none; position:fixed;z-index:99; right:30px; bottom:10%;}
#solution>.gotop>a{display:block; width:60px;height:60px; line-height:60px; text-align:center; background:rgba(0,0,0,.3);border-radius:100%; transition:all .35s;}
#solution>.gotop>a>img{ height:35px; width:auto;}
#solution>.gotop>a:hover{background:rgba(208,0,28,1);}
@media only screen and (max-width: 960px){
#solution>.container>.item>a .con{ padding:8px 20px;}
#solution>.container>.item>a .con>.tit{ font-size:14px;}
#solution>.container>.item>a .spot{ bottom:-18px; margin-left:-4px; width:8px; height:8px;}
#solution>.container>.loc1{ left:4%;top:10%;}
#solution>.view>.nav{ left:0;top:0; width:100%; padding-top:0 !important; padding-bottom:20px; text-align:left;}
#solution>.view>.nav>ul{display:block;margin:0 auto; background:#eee;}
#solution>.view>.nav>ul>li{position:relative;float:left;text-align:center;}
#solution>.view>.nav>ul>li:after{position:absolute;z-index:1;left:0;top:0; width:1px; height:100%;background:#ddd;content:'';}
#solution>.view>.nav>ul>li:first-child:after{opacity:0;}
#solution>.view>.nav>ul.n2>li{ width:50%;}
#solution>.view>.nav>ul.n3>li{ width:33.33%;}
#solution>.view>.nav>ul.n4>li{ width:25%; }
#solution>.view>.nav>ul.n5>li{ width:20%; font-size:15px;}
#solution>.view>.nav>ul.n6>li{ width:16.6%; font-size:14px; }
#solution>.view>.container{ float:none; width:100%; border-left:0px;}
#solution>.view>.container>.plan{padding-left:0;}
#solution>.view>.container .title{font-size:24px;}
#solution>.view>.container>.plan .tag>.tit{ font-size:16px;}
}
@media only screen and (max-width: 640px){
#solution>.container>.item>a .con{ padding:6px 16px;}
#solution>.container>.item>a .con>.tit{ font-size:12px;}
#solution>.container>.loc1{ left:3%;}
#solution>.view>.container .title{font-size:20px;}
}
@media only screen and (max-width: 420px){
#solution>.container{padding-top:50px}
#solution>.container>.item{ position:relative; margin:0 auto 5px auto; left:0 !important; top:0 !important; width:90%;}
#solution>.container>.item>a .con{ position:relative;display:block; background:#d0021c;padding:10px;}
#solution>.container>.item>a .con:after{ display:none;}
#solution>.container>.item>a .con>.icon{display:block; width:20%; border-right:1px solid rgba(255,255,255,.2); text-align:left;}
#solution>.container>.item>a .con>.icon>img{width:80%;height:auto;}
#solution>.container>.item>a .con>.tit{ width:75%; padding-top:10px; font-size:14px; color:#fff; text-align:left;}
#solution>.container>.item>a .spot{ display:none;}
#solution>.container>.item>a .spot:before { display:none;}
#solution>.container>.city{opacity:.4; transform:scale(1.6);}
#solution>.view>.nav>ul>li{ font-size:12px;}
#solution>.view>.nav>ul.n5>li{ font-size:12px;}
#solution>.view>.nav>ul.n6>li{ font-size:12px; }
#solution>.gotop>a{width:50px;height:50px; line-height:50px;}
#solution>.gotop>a>img{ height:32px; width:auto;}
}
/*END*/
/*rd TOP*/
#rd{width:90%; max-width:1360px; margin:0 auto; padding:50px 0; position:relative; overflow:hidden;}
#rd>.item{ text-align:left; padding-bottom:30px;}
#rd>.item>.tit{ font-size:30px; font-weight:bold; color:#333;}
#rd>.item>.con{ padding:20px 0;}
#rd>.item>.con .txt{ display:block;padding:10px 0; font-size:18px; color:#444;}
#rd>.item>.con .txt>p{ margin-bottom:20px;}
#rd>.item>.con .txt img{max-width:100%; height:auto;}
@media only screen and (max-width: 640px){
#rd>.item>.tit{ font-size:20px;}
#rd>.item>.con .txt{ font-size:14px;}
}
/*END*/
/*production TOP*/
#production{ position:relative; width:90%; max-width:1360px; margin:0 auto; padding:50px 0; }
#production>.list{ margin:0 auto;}
#production>.list>ul{ margin:0 auto;}
#production>.list>ul>li{position:relative;display:block; float:left; width:21.2%; overflow:hidden; padding:1%; margin-right:2%; margin-bottom:2%; border:1px solid #eee;text-align:center;}
#production>.list>ul>li:nth-of-type(4n){ margin-right:0 !important;}
#production>.list>ul>li>a>.img{ position:relative; margin:0 auto; overflow:hidden;}
#production>.list>ul>li>a>.img>img{ width:100%; height:auto; transition:all 1s;}
#production>.list>ul>li>a>.tit{ padding:15px 10px; font-size:16px; text-align:center; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#production>.list>ul>li>a:hover .img>img{transform:scale(1.1);}
#production>.loadmore{ width:90%;max-width:1360px; padding:50px 0;margin:0 auto; text-align:center;}
#production>.loadmore>a{display:inline-block; padding:10px 90px; font-size:18px; color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#production>.loadmore>a:hover{ background:#d0021c; border:1px solid #d0021c; color:#fff;}
@media only screen and (max-width: 1080px){
#production>.list>ul>li{width:29.7%;}
#production>.list>ul>li:nth-of-type(4n){ margin-right:2% !important;}
#production>.list>ul>li:nth-of-type(3n){ margin-right:0 !important;}
}
@media only screen and (max-width: 780px){
#production>.list>ul>li{width:29.6%;}
#production>.list>ul>li>a>.tit{ font-size:14px;}
}
@media only screen and (max-width: 580px){
#production>.list>ul>li{ width:46.5%; margin-right:0 !important;}
#production>.list>ul>li:nth-of-type(even){ float:right;}
#production>.list>ul>li:nth-of-type(4n){ margin-right:0 !important;}
#production>.list>ul>li:nth-of-type(3n){ margin-right:0 !important;}
}
/*END*/
/*quality TOP*/
#quality{ width:90%;max-width:1360px; margin:0 auto; padding:50px 0; }
#quality>.txt{ display:block;font-size:18px; color:#444;}
#quality>.con{ margin:0 auto; padding:50px 0;}
#quality>.con>.item{float:left; width:31.33%; margin-right:3%; margin-bottom:3%; background:#eee; transition:all .35s;}
#quality>.con>.item:nth-child(3n){margin-right:0 !important;}
#quality>.con>.item .icon{ text-align:center; margin:0 auto; padding:40px 0 20px 0;}
#quality>.con>.item .icon>img{ width:90px; height:auto; transition:all .35s;}
#quality>.con>.item .img{margin:0 auto; text-align:center;overflow:hidden;}
#quality>.con>.item .img>img{ width:100%; height:auto; transition:all 1s;}
#quality>.con>.item .txt{ min-height:140px; padding:20px 50px; font-size:16px; color:#555; text-align:center; line-height:25px;}
#quality>.con>.item:hover{ background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);}
#quality>.con>.item:hover .icon>img{transform:scale(1.3) rotateY(360deg); }
@media only screen and (max-width: 960px){
#quality>.txt{ font-size:16px;}
#quality>.con>.item .icon>img{ width:70px;}
#quality>.con>.item .txt{ min-height:100px; padding:20px 30px; font-size:14px; line-height:20px;}
}
@media only screen and (max-width: 780px){
#quality>.con>.item .icon{ padding:20px 0;}
#quality>.con>.item .icon>img{ width:60px;}
#quality>.con>.item .txt{ padding:20px;}
}
@media only screen and (max-width: 640px){
#quality>.con>.item{float:none; width:100%; margin-right:0 !important;}
#quality>.con>.item .txt{ min-height:inherit; padding-bottom:50px; font-size:14px; line-height:20px;}
}
/*END*/
/*aftersale TOP*/
#aftersale{ width:90%;max-width:1360px; margin:0 auto; padding:20px 0; }
#aftersale>.container{ width:52%;}
#aftersale>.container>.tag{ padding-bottom:20px;}
#aftersale>.container>.tag>.tit{padding:10px 0;}
#aftersale>.container>.tag>.tit>h3{display:inline-block; background:#d0021c; color:#fff;padding:8px 25px;}
#aftersale>.container>.tag>.txt{ text-align:left; font-size:16px; color:#555; line-height:25px;}
#aftersale>.container>.tag>.txt>p{ margin-bottom:20px;}
#aftersale>.container>.tag>.txt>p>strong{ font-size:20px; font-family:Arial; color:#d0021c;}
#aftersale>.container>.slogan{padding:40px 0; font-size:20px; color:#d0021c; font-weight:bold; font-family:寰蒋闆呴粦;}
#aftersale>.img{ width:48%; text-align:right;}
#aftersale>.img>img{width:100%;height:auto;}
@media only screen and (max-width: 960px){
#aftersale>.container>.tag>.txt{ font-size:14px;line-height:20px;}
}
@media only screen and (max-width: 780px){
#aftersale>.container{ float:none; width:100%;}
#aftersale>.img{ float:none; width:100%; text-align:left;}
}
@media only screen and (max-width: 420px){
#aftersale>.container>.slogan{padding:20px 0; font-size:18px; }
#aftersale>.container>.slogan h1{ font-size:30px;}
}
/*END*/
/*service TOP*/
#service{ position:relative; width:90%;max-width:1360px; margin:0 auto; padding:20px 0; }
#service>.contact{ position:relative;z-index:3; top:-360px; left:-11%;}
#service>.contact>.subtit{font-size:14px; color:#555; line-height:40px;}
#service>.contact>.tit{font-size: 24px;line-height: 38px;margin-bottom: 11px;}
#service>.contact>.con .txt{display:block; line-height:27px; font-size:15px; color:#666;}
#service>.contact>.con .txt>.tips{ position:relative; display:inline-block;zoom:1; clear:both;}
#service>.contact>.con .txt>.tips>.tip_tit{ display:inline-block; float:left; color:#999;padding:0 10px;}
#service>.contact>.con .txt>.tips>.tip_con{ position:relative; display:inline-block;}
#service>.contact>.con .txt>.tips>.tip_con>i{ display:inline-block; width:14px; height:14px; background:url("../images/icon-tip.png") no-repeat; background-position:50% 50%; background-size:100% auto;}
#service>.contact>.con .txt>.tips>.tip_con>span{display:none; position:absolute;z-index:4;left:30px;top:-30px; min-width:140px; width:auto; background:#d0021c; border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,.2); font-size:14px; font-weight:bold; color:#fff;padding:10px;}
#service>.contact>.con .txt>.tips>.tip_con>span:after{position:absolute;z-index:8; left:-8px; top:32px; width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:8px solid #d0021c; content:'';}
#service>.contact>.con .txt>.tips>.tip_con>span>img{width:100%;height:auto;}
#service>.feedback{ margin-top:-200px; margin-bottom:50px; border:1px solid #eee;}
#service>.feedback .tagnav{margin:0 auto;}
#service>.feedback .tagnav>.mob_select{display:none;}
#service>.feedback .tagnav>.nav{padding:0;margin:0 auto;}
#service>.feedback .tagnav>.nav>a{ position:relative; display:block; float:left; width:16.66%; color:#fff; background:#d0021c; text-align:center;padding:20px 0; box-sizing:border-box;}
#service>.feedback .tagnav>.nav>a:after{ position:absolute;z-index:1;left:0; top:0; width:1px; height:100%;opacity:.3; background:#fff;content:'';}
#service>.feedback .tagnav>.nav>a:first-child:after{ width:0;}
#service>.feedback .tagnav>.nav>a>i{ position:relative; display:block; width:64px;height:64px;overflow:hidden;margin:0 auto;}
#service>.feedback .tagnav>.nav>a>i>img{ position:relative;z-index:2;left:0;top:0; width:100%; height:auto;}
#service>.feedback .tagnav>.nav>a>span{display:block;padding:10px 0; font-size:18px;}
#service>.feedback .tagnav>.nav>a.A{ background:#fff;color:#d0021c;}
#service>.feedback .tagnav>.nav>a.A>i>img{ top:-64px;}
#service>.feedback .tagcon{display:none;padding:50px;}
#service>.feedback .tagcon>.text{color: #666;font-size: 15px;line-height: 34px;margin-bottom: 20px;}
#service>.feedback .tagcon>.text h3{display:block; font-weight:bold;}
#service>.feedback .tagcon>.badging{color: #666;font-size: 15px;line-height: 34px; text-align:right;}
#service>.feedback .tagcon>.title { padding:10px 0; font-size: 18px; font-weight:bold; color: #666;}
#service>.feedback .tagcon>.form{padding:0; margin:0 auto;}
#service>.feedback .tagcon>.form .w50{ float:left; width:40%; margin-right:10%;}
#service>.feedback .tagcon>.form .w50:nth-child(even){ float:right;}
#service>.feedback .tagcon>.form .w100{ float:none!important; width:90%; margin-right:10%;clear:both;}
#service>.feedback .tagcon>.form .item{ position:relative; padding:10px 0 10px 130px; box-sizing:border-box; text-align:left;}
#service>.feedback .tagcon>.form .item>.tit{display:block; margin-left:-130px; float:left; width:130px;line-height:36px; font-size:16px; color:#666;}
#service>.feedback .tagcon>.form .item>.tit .ast{display:inline-block; float:left; width:20px; height:36px; line-height:36px; font-size:16px; color:#d0021c;}
#service>.feedback .tagcon>.form .item>.inputtext { float:left; width:100%; box-sizing:border-box; border: 1px solid #e6e6e6;padding-left: 10px;height: 36px;line-height: 36px;font-size: 15px;}
#service>.feedback .tagcon>.form .item>.textareatext { float:left; width:100%; box-sizing:border-box; border: 1px solid #e6e6e6;padding:10px;line-height: 30px;font-size: 15px;}
#service>.feedback .tagcon>.form .item .select{ position:relative;margin:0 auto;}
#service>.feedback .tagcon>.form .item .select>.in{ position:relative; display:block; cursor:pointer; height:36px;line-height:36px; padding:0 10px; border:1px solid #d0021c;background:#d0021c; font-size:15px; color:#fff;}
#service>.feedback .tagcon>.form .item .select>.in:after{ position:absolute;z-index:1; right:20px;top:50%; margin-top:-8px; width:16px; height:16px; background:url("../images/icon-arrow-down-white.png") no-repeat; background-position:50% 50%; background-size:100% auto;content:''; transition:all .35s; }
#service>.feedback .tagcon>.form .item .select>.active:after{transform:rotate(180deg)}
#service>.feedback .tagcon>.form .item .select>.con{display:none; position:absolute;z-index:3;left:0;top:36px; padding:5px 0; width:100%; max-height:170px; overflow-y:auto; box-sizing:border-box; background:#fff; border:1px solid #ddd;}
#service>.feedback .tagcon>.form .item .select>.con>a{display:block;padding:10px; color:#666; font-size:14px;transition:all .35s;}
#service>.feedback .tagcon>.form .item .select>.con>a:hover{background:#f7f7f7;}
#service>.feedback .tagcon>.form .code .inputtext{ width:50%; }
#service>.feedback .tagcon>.form .code .chk{position:relative;top:6px; margin-left:10px;}
#service>.feedback .tagcon>.form .btn{ text-align:center;margin:0 auto;padding:30px 0;}
#service>.feedback .tagcon>.form .btn>input{ position:relative; display:inline-block; background:#d0021c; border:0; cursor:pointer; overflow:hidden; box-sizing:border-box;padding:10px 40px; font-size:14px; color:#fff; transition:all .35s;}
@media only screen and (max-width: 1640px){
#service>.contact{ left:-5%;}
}
@media only screen and (max-width: 1560px){
#service>.contact{ left:-3%; top:-330px;}
}
@media only screen and (max-width: 1280px){
#service>.contact{ left:-2%; top:-320px;}
}
@media only screen and (max-width: 1160px){
#service>.contact{ top:-310px;}
}
@media only screen and (max-width: 1080px){
#service>.contact{ top:-300px;}
}
@media only screen and (max-width: 960px){
#service>.contact{ top:0; left:0; padding-bottom:30px;}
#service>.feedback{ margin-top:0;}
#service>.feedback .tagnav{ position:relative;width:90%;margin:0 auto;}
#service>.feedback .tagnav>.mob_select{ display:block; position:relative; border-bottom:1px solid #eee;padding:20px; cursor:pointer;}
#service>.feedback .tagnav>.mob_select:after{ position:absolute;z-index:1; right:20px;top:50%; margin-top:-10px; width:21px; height:21px; opacity:.3; background:url("../images/icon-arrow-down-grey.png") no-repeat; background-position:50% 50%; background-size:100% auto;content:''; transition:all .35s; }
#service>.feedback .tagnav>.mob_select>.in>i{ position:relative; display:block; float:left; width:64px;height:64px; background:#d0021c; border-radius:5px; overflow:hidden;margin:0 auto;}
#service>.feedback .tagnav>.mob_select>.in>i>img{ position:relative;z-index:2;left:0;top:0; width:100%; height:auto;}
#service>.feedback .tagnav>.mob_select>.in>span{display:block; float:left; padding:0 20px; line-height:64px; font-size:20px; color:#d0021c;}
#service>.feedback .tagnav>.nav{ display:none; position:absolute;z-index:9;left:0;top:104px; width:100%;}
#service>.feedback .tagnav>.nav>a{ float:none; width:100%; box-sizing:border-box; padding:10px 20px; background:#f7f7f7; border-bottom:1px solid #eee;}
#service>.feedback .tagnav>.nav>a:after{ display:none;}
#service>.feedback .tagnav>.nav>a>i{ float:left; background:#d0021c; border-radius:5px;}
#service>.feedback .tagnav>.nav>a>span{display:block; float:left; padding:0 20px; line-height:64px; font-size:18px; color:#d0021c;}
#service>.feedback .tagnav>.nav>a.A{ background:#f7f7f7;color:#d0021c;}
#service>.feedback .tagnav>.nav>a.A>i>img{ top:0;}
/*
#service>.feedback .tagnav>.nav>a{ width:33.33%; padding:10px 0;}
#service>.feedback .tagnav>.nav>a:before{ position:absolute;z-index:1;left:0; top:0; width:100%; height:1px;opacity:.3; background:#fff;content:'';}
#service>.feedback .tagnav>.nav>a>i{ width:48px;height:48px;}
#service>.feedback .tagnav>.nav>a>span{font-size:16px;}
#service>.feedback .tagnav>.nav>a.A>i>img{ top:-48px;}*/
}
@media only screen and (max-width: 780px){
#service>.feedback .tagcon{padding:20px;}
#service>.feedback .tagcon>.text{font-size:13px;line-height:28px;}
#service>.feedback .tagcon>.badging{font-size: 13px;line-height: 28px;}
#service>.feedback .tagcon>.title { font-size: 16px;}
#service>.feedback .tagcon>.form .w50{ float:none; width:100%; margin-right:0;clear:both;}
#service>.feedback .tagcon>.form .w50:nth-child(even){ float:none;}
#service>.feedback .tagcon>.form .w100{ float:none!important; width:100%; margin-right:0;clear:both;}
#service>.feedback .tagcon>.form .item>.tit{font-size:14px;}
#service>.feedback .tagcon>.form .item>.inputtext { font-size: 14px;}
#service>.feedback .tagcon>.form .item>.textareatext {font-size: 14px;}
#service>.feedback .tagcon>.form .item .select>.in{ font-size:14px;}
}
@media only screen and (max-width: 640px){
#service>.contact>.subtit{font-size:12px; line-height:36px;}
#service>.contact>.tit{font-size: 18px;line-height: 32px;}
#service>.contact>.con .txt{ line-height:21px; font-size:13px;}
#service>.feedback{border:0;}
#service>.feedback .tagnav{ width:100%; padding:10px 0}
#service>.feedback .tagnav>.mob_select{padding:10px 20px;}
#service>.feedback .tagnav>.mob_select>.in>i{ width:38px;height:38px; border:6px solid #d0021c;}
#service>.feedback .tagnav>.mob_select>.in>span{ font-size:16px; line-height:50px;}
#service>.feedback .tagnav>.nav{ top:78px;}
#service>.feedback .tagnav>.nav>a>i{ width:38px;height:38px;border:6px solid #d0021c;overflow:hidden;}
#service>.feedback .tagnav>.nav>a>span{font-size:16px; line-height:50px;}
#service>.feedback .tagcon{padding:0;}
}
@media only screen and (max-width: 420px){
#service>.contact>.tit{font-size: 16px;}
#service>.feedback .tagnav>.nav>a>span{font-size:14px;}
#service>.feedback .tagcon>.text{padding-top:20px;}
#service>.feedback .tagcon>.form .item{padding:10px 0 10px 105px;}
#service>.feedback .tagcon>.form .item>.tit{ margin-left:-105px; width:105px; font-size:13px;}
#service>.feedback .tagcon>.form .item>.tit .ast{ width:20px; font-size:13px; color:#d0021c;}
}
/*END*/
/*network TOP*/
#network{padding-top:110px;}
#network #map{ width:100%; height:auto;margin:0 auto;}
#network .dealer{ position:absolute; z-index:999; top:200px; right:6%; width:310px;height:70%; background:rgba(255,255,255,1); box-shadow:0 4px 10px rgba(0,0,0,.2);}
#network .dealer>.title{ text-align:left; background:#d0021c;}
#network .dealer>.search{padding:10px; background:#f7f7f7; border-bottom:1px solid #e8e8e8;}
#network .dealer>.search>input{ display:block;padding:4%; width:100%;color:#666; box-sizing:border-box; background:#fff url("../images/icon-go-grey.png") no-repeat; background-size:20px auto; background-position:96% 50%; border:1px solid #ddd; border-radius:3px;}
#network .dealer>.search>input::-webkit-input-placeholder{ color:#ccc;}
#network .dealer>.list{ position:relative;left:0; height:74%;}
#network .dealer>.list>ul{margin:0 auto;}
#network .dealer>.list>ul>li{ position:relative; display:block; padding:10px 20px; border-bottom:1px solid #eee; transition:all .35s;}
#network .dealer>.list>ul>li:after{ position:absolute;z-index:1;left:0;bottom:-1px; width:0;height:1px;background:#d0021c; opacity:0; content:''; transition:all .35s;}
#network .dealer>.list>ul>li>.tit{color:#333;font-size:16px;}
#network .dealer>.list>ul>li>.txt{padding:5px 0; text-align:left;}
#network .dealer>.list>ul>li>.txt>p{ font-size:14px;color:#666;}
#network .dealer>.list>ul>li:hover:after{ width:100%; opacity:1;}
#network .dealer>.list>ul>li:hover .tit, #network .dealer>.list>ul>li:hover .txt>p{color:#d0021c;}
#network .info {border: solid 1px silver;padding:18px 20px; background:#FFF;}
#network div.info-top {position: relative;background: none repeat scroll 0 0;}
#network div.info-top div { display: inline-block;color: #222;font-size: 16px;font-weight: bold;padding:5px 0 10px 0;;}
#network div.info-top img { position: absolute;top: 0;right: 0;transition-duration: 0.35s;}
#network div.info-top img:hover { box-shadow: 0px 0px 5px #000;}
#network div.info-top-tit {position: relative;background: none repeat scroll 0 0;border-bottom: 2px solid #555; text-align:left;}
#network div.info-top-tit div { display: inline-block;color: #222;font-size: 16px;font-weight: bold;padding:5px 0 10px 0;text-align:left;}
#network div.info-top-tit img { position: absolute;top: 0;right: 0;transition-duration: 0.35s;}
#network div.info-top-tit img:hover { box-shadow: 0px 0px 5px #000;}
#network div.info-middle {font-size: 13px;padding:10px 0;line-height: 20px;color:#333; text-align:left}
#network div.info-middle>.info-img{ width:20%; float:left;}
#network div.info-middle>.info-img img{width:100%; height:auto;}
#network div.info-middle>.info-text{ float:right; text-align:left; width:75%;}
#network div.info-middle>.info-text .tel{ display:inline-block; line-height:30px;font-size:20px; font-weight:bold; color:#d82128; padding:0; margin:0;}
#network div.info-bottom { height: 0px; width: 100%; clear: both; text-align: center;}
#network div.info-bottom img {position: relative;z-index: 104; margin-top:18px;}
@media only screen and (max-width: 1080px){
#network{padding-top:90px;}
#network .dealer{ position:relative; right:0; top:0; width:100%;height:auto; box-shadow:0 0 0 rgba(0,0,0,0);}
#network .dealer>.search>input{ padding:10px;}
}
/*END*/
/*agent TOP*/
#agent{ margin:0 auto; padding-top:20px;overflow:hidden;}
#agent>.step1>.img{width:40%; text-align:left;}
#agent>.step1>.img>img{width:100%;height:auto;}
#agent>.step1>.container{ width:45%;padding:2% 10% 2% 5%; text-align:left;}
#agent>.step1 .item{ margin-bottom:40px;}
#agent>.step1 .tit{font-size:22px; color:#333;}
#agent>.step1 .tit>img{margin-right:10px; opacity:.6; width:50px; height:auto;}
#agent>.step1 .txt{ padding:20px 0; font-size:16px; line-height:28px; color:#666;}
#agent>.step1 .txt>p{margin-bottom:20px;}
#agent>.step1 .txt img{ max-width:100%; height:auto;}
#agent>.step1 .url{ padding:30px 0; text-align:left;}
#agent>.step1 .url>a{ position:relative; display:inline-block; background:#d0021c; border-radius:3px;overflow:hidden; box-sizing:border-box;padding:12px 40px; font-size:14px; color:#fff; transition:all .35s;}
#agent>.step1 .url>a:after{ position:absolute;z-index:3;left:0;top:0; width:0; height:100%;background:rgba(255,255,255,.2); content:''; transition:all .35s;}
#agent>.step1 .url>a:hover:after{ width:100%;}
#agent>.step2{ width:90%;max-width:1360px;margin:0 auto; text-align:left;}
#agent>.step2 .tit{font-size:22px; color:#333;}
#agent>.step2 .tit>img{margin-right:10px; opacity:.6; width:50px; height:auto;}
#agent>.step2 .tag{ margin:0 auto;padding:20px 0;}
#agent>.step2 .tag>.tagtit{ text-align:left;}
#agent>.step2 .tag>.tagtit>a{display:inline-block; box-sizing:border-box; width:25%; float:left; padding:20px 0; font-size:16px; background:#fff; margin-left:-1px; border:1px solid #eee; text-align:center; transition:all .35s;}
#agent>.step2 .tag>.tagtit>a.A{ background:#d82128; color:#fff;border:1px solid #d82128;}
#agent>.step2 .tag>.tagcon{ display:none; padding:20px 0; text-align:left;}
#agent>.step2 .tag>.tagcon table{width:100%;border:1px solid #eee;}
#agent>.step2 .tag>.tagcon th{height:59px;background:#fef9fa;font-size:17px;color:#333;border-bottom:1px solid #eee;font-weight:normal;text-align:center;}
#agent>.step2 .tag>.tagcon td{padding:13px 20px;font-size:14px;color:#666;border-bottom:1px solid #eee;line-height:30px;}
#agent>.step2 .tag>.tagcon td.name{width:95px;border-right:1px solid #f0f0f0;text-align:center;}
#agent>.step2 .url{ padding-bottom:60px; text-align:right;}
#agent>.step2 .url>a{ position:relative; display:inline-block; background:#d0021c;overflow:hidden; box-sizing:border-box;padding:12px 80px; font-size:14px; color:#fff; transition:all .35s;}
#agent>.step2 .url>a:after{ position:absolute;z-index:3;left:0;top:0; width:0; height:100%;background:rgba(255,255,255,.2); content:''; transition:all .35s;}
#agent>.step2 .url>a:hover:after{ width:100%;}
#agent>.step3{ width:90%;max-width:1360px;margin:0 auto; text-align:left;}
#agent>.step3 .tit{font-size:22px; color:#333;}
#agent>.step3 .tit>img{margin-right:10px; opacity:.6; width:50px; height:auto;}
#agent>.step3 .form{ padding-top:20px; margin:0 auto;}
#agent>.step3 .item{ position:relative; background:#fff; border:1px solid #eee; overflow:hidden; margin-top:-1px;}
#agent>.step3 .item>.tit{ height:65px; line-height:65px; float:left; width:14.8%; text-align:center; border-right:1px solid #eee; background:#fef9fa; font-size:14px;}
#agent>.step3 .item>.sel{ text-align:left; width:83%; padding-left:2%; background:#fff; float:left;height:65px; line-height:65px;}
#agent>.step3 .item .layui-form-radio>i, #agent>.step3 .item .layui-form-radio>div {color:#999;}
#agent>.step3 .item .layui-form-radioed div{color:#d0021c;}
#agent>.step3 .item .layui-form-radio>i:hover, #agent>.step3 .item .layui-form-radioed>i {color:#d0021c;}
#agent>.step3 .item a{ display:inline-block; margin-left:20px; height:30px; line-height:30px; padding:0 20px; font-size:14px;}
#agent>.step3 .item>.inputtext{height:65px; line-height:65px; outline:none; border:0 !important; font-family:'寰蒋闆呴粦'; padding:0 2%; width:81%; float:left;}
#agent>.step3 .item>.inputtext::-webkit-input-placeholder{ color:#ccc;}
#agent>.step3 .item>.inputtext:hover -webkit-input-placeholder{ display:none;}
#agent>.step3 .item .A::-webkit-input-placeholder{ color:#d82128 !important;}
#agent>.step3 .item img{position:absolute; left:24%; top:20px;}
#agent>.step3 .btn{ padding:20px 0 60px 0; text-align:right;}
#agent>.step3 .btn>#reset{ position:relative; display:inline-block; background:#999; border:0; cursor:pointer; overflow:hidden; box-sizing:border-box;padding:12px 80px; font-size:14px; color:#fff; transition:all .35s;}
#agent>.step3 .btn>#button{ position:relative; display:inline-block; background:#d0021c; border:0; cursor:pointer; overflow:hidden; box-sizing:border-box;padding:12px 80px; font-size:14px; color:#fff; transition:all .35s;}
@media only screen and (max-width: 1080px){
#agent>.step1 .item{ margin-bottom:20px;}
#agent>.step1 .txt{ font-size:14px; line-height:24px;}
#agent>.step1 .tit{font-size:20px;}
#agent>.step1 .tit>img{width:40px;}
#agent>.step2 .tit{font-size:20px;}
#agent>.step2 .tit>img{width:40px;}
#agent>.step3 .tit{font-size:20px;}
#agent>.step3 .tit>img{width:40px;}
}
@media only screen and (max-width: 960px){
#agent>.step1>.img{ display:none; float:none; width:100%;}
#agent>.step1>.container{ float:none; width:90%;padding:0; margin:0 auto;}
#agent>.step2 .tag>.tagtit>a{ width:50%; margin-top:-1px;}
}
@media only screen and (max-width: 780px){
#agent>.step1 .tit{font-size:16px;}
#agent>.step2 .tit{font-size:16px;}
#agent>.step3 .tit{font-size:16px;}
#agent>.step2 .tag>.tagcon th {height: 40px;font-size: 13px;}
#agent>.step2 .tag>.tagcon td.name {width: auto;padding: 6px 12px; font-size: 13px; line-height: 15px;}
#agent>.step2 .tag>.tagcon td {padding: 6px 10px;font-size: 12px;line-height: 23px;}
#agent>.step2 .url{ text-align:center;}
#agent>.step2 .url>a{ padding:8px 50px; font-size:13px;}
#agent>.step3 .item>.tit{ height:50px; line-height:50px; width:25%;}
#agent>.step3 .item>.sel{ padding-left:1.6%; width:70%;height:50px; line-height:50px;}
#agent>.step3 .item>.inputtext{height:50px; line-height:50px; width:70%;}
#agent>.step3 .item img{position:absolute; left:auto; right:20px; top:12px;}
#agent>.step3 .btn{ text-align:center;}
#agent>.step3 .btn>#reset{ padding:8px 50px; font-size:13px;}
#agent>.step3 .btn>#button{ padding:8px 50px; font-size:13px;}
}
@media only screen and (max-width: 420px){
#agent>.step2 .tag>.tagtit>a{ padding:12px 0; font-size:12px;}
}
/*END*/
/*download TOP*/
#download{width:90%; max-width:1360px; margin:0 auto; padding:20px 0; position:relative; overflow:hidden;}
#download>.sou{ margin:0 auto; padding-bottom:20px;}
#download>.sou>.select{width:49%; text-align:left;}
#download>.sou>.select .layui-input{ color:#666;}
#download>.sou>.select .layui-this{ background:#e3e3e3; color:#d0021c;}
#download>.sou>.search{ width:49%;}
#download>.sou>.search>form{ display:block; margin:0 auto; box-sizing:border-box; width:100%; background:#fff;overflow:hidden; border:1px solid #e3e3e3; border-radius:3px; height:38px;}
#download>.sou>.search>form input[type="text"]{outline: medium;float:left;height:38px;line-height:38px;width:75%; padding:0 5%;border:none; font-size:14px; background:none;color:#666;box-sizing:border-box;overflow:hidden;}
#download>.sou>.search>form input::-webkit-input-placeholder{ color:#ccc;}
#download>.sou>.search>form button{ float:right;width:12%;height:38px; margin:1px 1px 0 0; border:none; opacity:1;background:url(../images/icon-go-red.png) no-repeat center center;background-size:auto 25px;cursor:pointer;box-sizing:border-box;overflow:hidden; transition:all .35s;}
#download>.sou>.search>form button:hover{ background-color:#eee;}
#download>.list{margin:0 auto;}
#download>.list>.item_TR{margin:0 auto;background:#d0021c;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.1);overflow:hidden;}
#download>.list>.item_TR>div{ position:relative; float:left; width:15%; padding:10px 0; text-align:center; color:#fff; font-size:16px; overflow:hidden;}
#download>.list>.item_TR>div:after{ position:absolute;z-index:1; left:0; bottom:0; width:1px; height:40%; opacity:.4; background:#fff; content:'';}
#download>.list>.item_TR>div:first-child:after{opacity:0;}
#download>.list>.item_TR>div.td1{ width:40%; }
#download>.list>ul.item_SON>li{display:block; border-bottom:1px solid #eee; transition:all .35s;}
#download>.list>ul.item_SON div{ float:left; width:15%; padding:15px 0; text-align:center; color:#666; font-size:14px;}
#download>.list>ul.item_SON div.td1{ width:40%;text-align:left;padding-left:20px; box-sizing:border-box; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#download>.list>ul.item_SON div>a{display:inline-block; background:url("../images/icon-download.png") no-repeat; background-size:20px; background-position:left center; padding-left:25px; color:#d0021c; transition:all .35s;}
#download>.list>ul.item_SON div>a:hover{ text-decoration:underline;}
#download>.list>ul.item_SON>li:hover{ background:#fef9fa;}
#download>.loadmore{ width:90%;max-width:1360px; padding:50px 0;margin:0 auto; text-align:center;}
#download>.loadmore>a{display:inline-block; padding:10px 90px; font-size:18px; color:#666; border:1px solid #ddd; border-radius:50px; transition:all .35s;}
#download>.loadmore>a:hover{ background:#d0021c; border:1px solid #d0021c; color:#fff;}
@media only screen and (max-width: 960px){
#download>.list>.item_TR>div{ font-size:15px;}
}
@media only screen and (max-width: 780px){
#download>.sou>.select{ float:none; width:100%;}
#download>.sou>.search{ float:none; width:100%; padding-top:10px;}
#download>.list>.item_TR>div.td1{ width:70%;}
#download>.list>.item_TR>div.td2{display:none;}
#download>.list>.item_TR>div.td3{display:none;}
#download>.list>.item_TR>div.td4{display:none;}
#download>.list>.item_TR>div.td5{ width:30%;}
#download>.list>ul.item_SON div.td1{ width:70%;}
#download>.list>ul.item_SON div.td2{display:none;}
#download>.list>ul.item_SON div.td3{display:none;}
#download>.list>ul.item_SON div.td4{display:none;}
#download>.list>ul.item_SON div.td5{ width:30%;}
}
/*END*/
/*contact TOP*/
#contact{ position:relative; margin:0 auto; padding:20px 0; }
#contact>.contactus{width:90%;max-width:1360px;margin:0 auto 40px auto; padding:30px 0; border:1px solid #eee;border-radius:3px;}
#contact>.contactus .tit{ font-size:14px; color:#444;}
#contact>.contactus .tel{ padding-bottom:10px; font-size:24px; color:#d0021c;}
#contact>.contactus .tips{ font-size:12px; color:#ccc;}
#contact>.contactus .con{ font-size:16px; color:#666;}
#contact>.contactus>.hotline{ width:36%; text-align:center;}
#contact>.contactus>.hotline>.icon{ text-align:center;}
#contact>.contactus>.hotline>.icon>img{width:128px;height:auto;}
#contact>.contactus>.contact{ width:28.3%; padding:20px 5%; text-align:left; border-left:1px solid #eee; border-right:1px solid #eee;}
#contact>.contactus>.contact>.con>p{ position:relative; display:block;padding:8px 0 8px 38px;}
#contact>.contactus>.contact>.con>p img{ position:absolute;z-index:1; left:0;top:6px; height:28px; width:auto;}
#contact>.contactus>.voice{ width:25%; padding-top:20px;}
#contact>.contactus>.voice>.tit{ width:40%;text-align:center;}
#contact>.contactus>.voice>.con{ width:60%; color:#e7808d; text-align:left; font-size:14px;}
#contact>.contactus>.voice>.con>p{padding:5px 0;}
#contact>.invite{margin: 0 auto; background: #d0021c url("../images/invite_bg.jpg") no-repeat; background-position: top right; padding: 100px 0;}
#contact>.invite>.title{text-align:center;margin:0 auto; font-size:30px; color: #fff; }
#contact>.invite>.container{ width:90%;max-width:1200px;margin:0 auto; text-align: center; padding:50px 0;}
#contact>.invite>.container p{display: inline-block; font-size: 25px; margin: 0 30px; color: #fff;}
#contact>.invite>.container p>b{font-weight: normal;}
#contact>.invite>.container p>img{margin-right: 10px;}
/*#contact>.contact>.container{ width:90%;max-width:1360px;margin:0 auto; padding:50px 0;}
#contact>.contact>.container>.item{ position:relative; float:left; width:25%; padding:40px 0; text-align:center; transition:all .35s;}
#contact>.contact>.container>.item>.icon{ width:144px;height:144px; line-height:144px; margin:0 auto; border:1px solid #f19ba6; background:#f19ba6; border-radius:100%;overflow:hidden; transition:all .35s;}
#contact>.contact>.container>.item>.icon img{ height:56%; width:auto;margin:0 auto;}
#contact>.contact>.container>.item>.con{ text-align:center;padding:20px 0;}
#contact>.contact>.container>.item>.con>.tit{padding:10px 0; font-size:20px; font-weight:bold; color:#333;}
#contact>.contact>.container>.item>.con>.txt{ font-size:16px; color:#666;}
#contact>.contact>.container>.item:hover{ background:#d0021c;}
#contact>.contact>.container>.item:hover .icon{ background:#d0021c; border:1px solid #fff;}
#contact>.contact>.container>.item:hover .con>.tit{color:#fff;}
#contact>.contact>.container>.item:hover .con>.txt{color:#fff;}*/
#contact>.feedback{border-top:1px solid #eee;margin:0 auto; padding:50px 0; }
#contact>.feedback>.title{text-align:center;margin:0 auto;}
#contact>.feedback>.title>.tit{ font-size:30px;}
#contact>.feedback>.title>.tip{ padding:20px 0; font-size:16px; color:#999;}
#contact>.feedback>.container{ width:90%;max-width:1200px;margin:0 auto; padding:50px 0;}
#contact>.feedback>.container .item{ display:block; padding:12px 0;}
#contact>.feedback>.container .code{ position:relative;}
#contact>.feedback>.container input{ display:inline-block; box-sizing:border-box; width:100%;height:auto;padding:15px;-webkit-appearance:none; border:1px solid #ccc; color:#666;text-align:left;}
#contact>.feedback>.container input::-webkit-input-placeholder{ color:#999;}
#contact>.feedback>.container textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:15px;-webkit-appearance:none; font-family:"寰蒋闆呴粦"; line-height:20px; border:1px solid #ccc; color:#666;text-align:left;}
#contact>.feedback>.container textarea::-webkit-input-placeholder{ color:#999;}
#contact>.feedback>.container .w30{width:30%;}
#contact>.feedback>.container .w50{width:48%;}
#contact>.feedback>.container .w100{width:100%; clear:both}
#contact>.feedback>.container #checkimg{display:inline-block; position:absolute;z-index:3; top:50%; right:10px; margin-top:-13px; cursor:pointer;}
#contact>.feedback>.container .submit{ float:right; display:inline-block; box-sizing:border-box; width:46%!important; background:#d0021c;padding:12px 10px; font-size:16px; color:#fff; text-align:center; border:0; cursor:pointer; width:50%;}
#contact>.feedback>.container .reset{ float:left;display:inline-block; box-sizing:border-box;width:46%!important; background:#666;padding:12px 10px;font-size:16px; color:#fff; text-align:center; border:0; cursor:pointer; width:50%;}
#contact>.partner{margin:0 auto; padding:50px 0; display:none; }
#contact>.partner>.title{text-align:center;margin:0 auto;}
#contact>.partner>.title>.tit{ font-size:30px;}
#contact>.partner>.container{ width:90%;max-width:1100px;margin:0 auto; padding:50px 0;}
#contact>.partner>.container img{max-width:100%;height:auto;}
@media only screen and (max-width: 1100px){
/*#contact>.contact>.container>.item>.icon{ width:130px;height:130px; line-height:130px;}
#contact>.contact>.container>.item>.con>.txt{ font-size:14px;}*/
#contact>.contactus .con{ font-size:15px;}
}
@media only screen and (max-width: 960px){
#contact>.contactus{padding:0;}
#contact>.contactus>.hotline{ float:none; padding:20px 0; width:100%; border-bottom:1px solid #eee;}
#contact>.contactus>.contact{ width:39%; padding:5%; border-left:0px;}
#contact>.contactus>.voice{ width:40%; padding:5%;}
}
@media only screen and (max-width: 780px){
/*#contact>.contact>.container>.item{ width:50%;}*/
#contact>.contactus .con{ font-size:14px;}
}
@media only screen and (max-width: 640px){
#contact>.feedback>.title>.tip{ font-size:14px;padding:20px;}
#contact>.feedback>.container{ padding:20px 0;}
#contact>.feedback>.container .w30{width:100%;}
#contact>.feedback>.container .w50{width:100%;clear:both;}
#contact>.feedback>.container .btn{ padding-top:20px;}
#contact>.invite{padding: 30px 0;}
#contact>.invite>.container p{display: block; font-size: 18px; margin: 0; padding-bottom: 30px;}
#contact>.invite>.container p>b{display: block;}
}
@media only screen and (max-width: 420px){
#contact>.contactus>.contact{ float:none; width:70%; padding:5% 15%; text-align:left; border-bottom:1px solid #eee; border-right:0; border-left:0px;}
#contact>.contactus>.voice{ float:none; width:90%;}
#contact>.feedback>.title>.tit{ font-size:20px;}
#contact>.feedback>.title>.tip{ font-size:12px;}
#contact>.feedback>.container{padding:0;}
#contact>.feedback>.container .item{ padding:8px 0;}
#contact>.feedback>.container input{ padding:10px 15px;}
#contact>.partner>.title>.tit{ font-size:20px;}
#contact>.partner>.container{ padding:20px 0;}
#contact>.invite>.title{ font-size:20px;}
}
/*END*/
/*quickmenu TOP*/
#quickmenu{ position:fixed; width:160px; right:-120px; top:40%;text-align:left; cursor:pointer; z-index:999;}
#quickmenu a{ display:block; position:relative; height:40px; line-height:40px; margin-bottom:2px; background:#eee; font-size:15px; padding-right:10px; width:160px; overflow:hidden; cursor:pointer; right:0; font-style:normal;}
#quickmenu a>em{ display:block; float:left; width:40px; background:#d0021c; color:#fff; font-size:16px; text-align:center; margin-right:10px;; font-style:normal;}
#quickmenu a:hover{ text-decoration:none; color:#000000; }
#quickmenu a:hover em{ background:#333; font-style:normal; }
/*END*/
.page{margin:0 auto; text-align:center;}
.page>a{display:inline-block; cursor:pointer; font-family:寰蒋闆呴粦; font-size: 14px;line-height: 20px;color: #666;padding: 5px 11px;border: 1px solid #4b4b4b;box-sizing: border-box;transition: all 0.3s; margin: 5px;}
.page>a:hover, .page a.jp-current, .page a.jp-current:hover{ background:#666;color:#fff;}
.page a.jp-disabled, .page a.jp-disabled:hover { display:none;}
@media only screen and (max-width: 420px){
.page>a{font-size: 12px; line-height:18px;padding:4px 10px;}
}
/*foot TOP*/
#foot{margin:0 auto; padding:50px 0; background:#f3f3f3; transition:all .35s;}
#foot.active {transform: translateX(-220px);}
#foot>.wrap{ width:90%; max-width:1360px; margin:0 auto;}
#foot .nav{ width:50%;}
#foot .nav>a{display:block; position:relative; float:left; width:25%; box-sizing:border-box; padding:15px 5px; background:url("../images/icon-arrow-right-grey.png") no-repeat; background-size:auto 10px; background-position:90% 50%; margin-right:8%; font-size:15px; font-weight:bold; border-bottom:1px solid #ddd;}
#foot .webgroup{ width:20%;padding:0 5%;text-align:left;}
#foot .webgroup>.tit{ font-size:15px; font-weight:bold; color:#666;}
#foot .webgroup>.select{ position:relative;margin:10px auto;}
#foot .webgroup>.select>.in{ position:relative; display:block; cursor:pointer; height:40px;line-height:40px; padding:0 10px; border:1px solid #ddd;background:#fff; font-size:14px; color:#666;}
#foot .webgroup>.select>.in:after{ position:absolute;z-index:1; right:10px;top:50%; margin-top:-8px; width:16px; height:16px; opacity:.5; background:url("../images/icon-arrow-down-grey.png") no-repeat; background-position:50% 50%; background-size:100% auto;content:''; transition:all .35s; }
#foot .webgroup>.select>.active:after{transform:rotate(180deg)}
#foot .webgroup>.select>.con{display:none; position:absolute;z-index:3;left:0;bottom:40px; padding:5px 0; width:100%; max-height:160px; overflow-y:auto; box-sizing:border-box; background:#fff; border:1px solid #ddd;}
#foot .webgroup>.select>.con>a{display:block;padding:10px; color:#666; font-size:14px;transition:all .35s;}
#foot .webgroup>.select>.con>a:hover{background:#f7f7f7;}
#foot .share{ text-align:left;}
#foot .share .bshare-custom a{padding:0px; margin:0 6px!important; width:20px; height:20px; opacity:1; transition:all .35s;}
#foot .share .bshare-custom .bshare-sinaminiblog{background:url("../images/icon-weibo-grey.png") no-repeat; background-size:20px auto;background-position:center center;}
#foot .share .bshare-custom .bshare-qqim{background:url("../images/icon-qq-grey.png") no-repeat; background-size:20px auto;background-position:center center;}
#foot .share .bshare-custom .bshare-weixin{background:url("../images/icon-wechat-grey.png") no-repeat; background-size:20px auto;background-position:center center;}
#foot .share .bshare-more{background:url("../images/icon-share-grey.png") no-repeat; padding:0 !important; margin:0 !important; background-size:20px auto;background-position:center center;}
#foot .share .bshare-custom .bshare-sinaminiblog:hover{background-image:url("../images/icon-weibo-red.png");}
#foot .share .bshare-custom .bshare-qqim:hover{background-image:url("../images/icon-qq-red.png");}
#foot .share .bshare-custom .bshare-weixin:hover{background-image:url("../images/icon-wechat-red.png");}
#foot .share .bshare-more:hover{background-image:url("../images/icon-share-red.png");}
#foot .share .bshare-custom a:hover{ opacity:1;}
#foot .mall{margin-top: 20px; font-size: 14px;}
#foot .mall img{height: 18px; margin-top: -2px; margin-right: 2px; margin-left: 5px;}
#foot .qrcode{width:20%; text-align:right;}
#foot .qrcode>.qr{ display:inline-block; width:28%;padding:0 2%;}
#foot .qrcode>.qr>img{ width:100%; height:auto;box-sizing:border-box; background:#fff;padding:6px;}
#foot .qrcode>.qr p{ display:block;padding:5px 0; font-size:12px;color:#666; text-align:center;}
#foot .copy{ padding-top:40px; text-align:left;color:#888; line-height:22px; font-size:13px; text-transform:uppercase;}
#foot .copy>a{display:inline-block;padding:0 10px; color:#888;}
#foot .copy>a.by{color:#ccc;}
@media only screen and (max-width: 960px){
#foot .nav{display:none;}
#foot .webgroup{ float:none; width:100%;padding:0;margin:0 auto;}
#foot .qrcode{ float:none; width:100%; text-align:center; margin:20px auto;}
#foot .qrcode>.qr{width:48%; float:left; padding:0;}
#foot .qrcode>.qr:nth-child(even){float:right;}
#foot .copy{ border-top:1px solid #dcdcdc; padding-top:20px;}
}
@media only screen and (max-width: 780px){
#foot .copy>a.by{ padding:0; color:#ccc;}
}
/*
#foot{margin:0 auto; background:#ddd url("../images/foot-bg.png") repeat-x; background-position:0 0; border-top:1px solid #f7f7f7; transition:all .35s;}
#foot.active {transform: translateX(-220px);}
#foot>.wrap{ width:90%; max-width:1360px; margin:0 auto; padding:100px 0;}
#foot .gotop{ width:18%;text-align:left;}
#foot .gotop>a{display:block;}
#foot .gotop>a>img{height:36px; width:auto; opacity:.5; transition:all .35s;}
#foot .gotop>a:hover img{opacity:.8;}
#foot .nav{ width:12%; padding-right:5%; text-align:left;}
#foot .nav>.tit{ font-size:16px; color:#333;}
#foot .nav>.con{padding:20px 0;}
#foot .nav>.con>a{display:block;padding:6px 0; color:#666; font-size:14px; transition:all .35s;}
#foot .nav>.con>a:hover{ color:#d0021c; padding-left:5px;}
#foot .qrcode{ width:20%; }
#foot .qrcode>.tit{ font-size:16px; color:#333;}
#foot .qrcode>.con{padding:20px 0;}
#foot .qrcode>.con>img{width:140px; height:auto;}
#foot .service{ width:20%; text-align:right;}
#foot .service>.mark{ text-align:right;}
#foot .service>.mark>img{ width:auto;height:70px; transition:all .35s;}
#foot .service>.tel{padding:20px 0;}
#foot .service>.tel>.tit{ font-size:16px; color:#333;}
#foot .service>.tel>.con{padding:5px 0;}
#foot .service>.tel>.con>a{display:block; font-size:26px; color:#666; transition:all .35s;}
#foot .service>.tel>.con>a:hover{ color:#d0021c;}
@media only screen and (max-width: 780px){
#foot>.wrap{ padding:60px 0;}
#foot .gotop{display:none;}
#foot .nav{ width:35%;padding:0;}
#foot .qrcode{ display:none; width:40%; text-align:left;}
#foot .service{ width:30%;}
}
@media only screen and (max-width: 620px){
#foot .nav{display:none;}
#foot .service{ width:100%;}
#foot .service>.mark{ float:left; text-align:left;}
#foot .service>.tel{ float:left; padding:3px 20px 0 20px; text-align:left;}
#foot .service>.tel>.con>a{color:#d0021c; font-size:30px; font-weight:bold;}
}
*/
/*END*/
/*copyright TOP*/
#copyright{margin:0 auto; background:#ddd; border-top:1px solid #ccc; transition:all .35s;}
#copyright.active {transform: translateX(-200px);}
#copyright>.wrap{width:90%; max-width:1360px; margin:0 auto; padding:30px 0;}
#copyright .share{text-align:left;}
#copyright .share .bshare-custom a{padding:0px; margin:0 6px!important; width:20px; height:20px; opacity:1; transition:all .35s;}
#copyright .share .bshare-custom .bshare-sinaminiblog{background:url("../images/icon-weibo-grey.png") no-repeat; background-size:20px auto; background-position:center center;}
#copyright .share .bshare-custom .bshare-qqim{background:url("../images/icon-qq-grey.png") no-repeat; background-size:20px auto; background-position:center center;}
#copyright .share .bshare-custom .bshare-weixin{background:url("../images/icon-wechat-grey.png") no-repeat; background-size:20px auto;background-position:center center;}
#copyright .share .bshare-more{background:url("../images/icon-share-grey.png") no-repeat; padding:0 !important; margin:0 !important; background-size:20px auto;background-position:center center;}
#copyright .share .bshare-custom a:hover{ opacity:1; transform: translateY(-3px);}
#copyright .copy{padding:0 20px; color:#666; font-size:14px;}
#copyright .beian{padding:0 20px; font-size:14px;}
#copyright .beian>a{display:block; color:#666;}
#copyright .by{ text-align:right;}
#copyright .by>a{display:inline-block; color:#ccc;}
@media only screen and (max-width: 780px){
#copyright .share{ float:none; width:100%;}
#copyright .copy{float:none;padding:10px 0; width:100%;}
#copyright .beian{ float:none; padding:5px 0; width:100%;}
#copyright .by{ float:none; width:100%; text-align:left;}
}
/*END*/
@keyframes scaled-rect {
0%, to {
transform:translateZ(0) scale(1.2) rotate(0);
-moz-transform:translateZ(0) scale(1.2) rotate(.02deg)
}
50% {
transform:translateZ(0) scale(.8) rotate(0);
-moz-transform:translateZ(0) scale(.8) rotate(.02deg)
}
}
@keyframes out-circle {
0% {
transform:scale(0);
-moz-transform:scale(0) rotate(.02deg);
opacity:1
}
70% {
opacity:1
}
to {
transform:scale(1);
-moz-transform:scale(1) rotate(.02deg);
opacity:0
}
}
@keyframes move2 {
0% {
opacity: 1;
transform: translateX(-5px);
}
100% {
opacity: 0;
transform: translateX(0px);
}
}
@keyframes pound {
from {
transform: none; }
50% {
transform: scale(1.1);
}
to {
transform: none;
}
}