@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: #007d7a;} p{ line-height:35px;} * { 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:#007d7a; 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:#007d7a;} #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:#007d7a; 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:#007d7a; content:''; transition:all .35s;} #head .menu>ul>li>div .con>.nav>a:hover{ color:#007d7a;} #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:180px; 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: 18px; 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:#007d7a; font-size:16px; border:1px solid #007d7a; border-radius:100%; transition: all .2s; background: #007d7a; color: #fff;} #head .language>a:hover{background: #007d7a; 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:#007d7a; 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:#007d7a url("../images/icon-search.png") no-repeat; background-size:24px auto; background-position:50% 50%; border:1px solid #007d7a; 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: #007d7a;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:#007d7a;} #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:#007d7a;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:#007d7a;box-sizing:border-box;overflow:hidden;} #headwap>.search>form input::-webkit-input-placeholder{ color:#007d7a;} #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: 18px; 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;background: #fff; } #banner .swiper-pagination-bullet-active { width:80px !important; opacity: 1;background: #df0024;} #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:#007d7a; 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:#007d7a 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; padding-top:40px;} #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 10px; 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:100%;margin:20px auto; border-radius:0 0px 0 0; padding:10px 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; 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:#007d7a;} #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:3px;} #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:#007d7a;} #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:#007d7a;} #main>.news>.container>.list>ul>li>a:hover .tit{color:#007d7a;} #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:#007d7a;} #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 #007d7a;} #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:#007d7a; 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:#007d7a; 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:400px; 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:80px; font-size:16px; color:#fff;line-height:35px;} #main>.brand>.container>.txt{ padding:40px 0; font-size:16px; font-weight:200; color:#fff; line-height:35px;} #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%;} #main>.brand>.container>.txt{padding:30px 0; font-size:16px; line-height:35px; font-weight:200;} } @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%;} #main>.brand>.container>.txt{padding:30px 0; font-size:16px; line-height:35px; font-weight:200;} } @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:16px; line-height:25px; font-weight:200;} } @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{padding:20px 0; font-size:16px; line-height:25px; font-weight:200;} } @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;} #main>.brand>.container>.txt{padding:20px 0; font-size:16px; line-height:35px; font-weight:200;} } @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%;} #main>.brand>.container>.txt{padding:20px 0; font-size:16px; line-height:25px; font-weight:200;} } @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:16px; line-height:25px; font-weight:200;} #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;} #main>.brand>.container>.txt{padding:20px 0; font-size:16px; line-height:25px; font-weight:200;} } /*END*/ /*kefu TOP*/ #kefu{position:fixed;z-index:1001;right:0;bottom:85px;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(237,112,32,.9);margin-bottom:4px;cursor:pointer;outline:none;} #kefu .a.active, #kefu .a:hover{background:rgba(177,69,0,.9);} #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-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:#007d7a;} #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:290px;} #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;} @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:#007d7a;} #path a.A{ color:#007d7a !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(237,112,32,1); color:rgba(237,112,32,1);} #navpart a.A{ background:rgba(237,112,32,1); border:1px solid rgba(237,112,32,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(237,112,32,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:#ed7020 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:#007d7a 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:#f7f7f7; 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:#007d7a; 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:#007d7a 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:#007d7a; 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:#007d7a;} #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 #007d7a;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(237,112,32,.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:#007d7a;} @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:#007d7a; 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:#007d7a; 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:#007d7a; 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: #007d7a;} #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: #007d7a;} #history>.container ul>li:hover .con{ color:#007d7a;} #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:#007d7a; border:1px solid #007d7a; border-radius:30px;transition:all .35s;} #news>.list>ul>li>a .time{ width:10%; color:#007d7a; 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:#007d7a;} #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:#007d7a; border:1px solid #007d7a; 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:#007d7a;} #jobs>.nav>ul>li.A>a{ color:#ffffff !important;} #jobs>.nav>ul>li>a:hover{ color:#007d7a;} #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:#007d7a; 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:#007d7a; 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:#007d7a; border:1px solid #007d7a; 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:#007d7a;} #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:#007d7a; 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:#007d7a; border:1px solid #007d7a; 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:#007d7a; 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:#007d7a; 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:#007d7a; content:''; transition:all .35s;} #product>.catalog>.item .con>.list>a:hover{ color:#007d7a; padding-left:12px;} #product>.catalog>.item .con>.list>a:hover:after{height:50%;} #product>.catalog>.item:hover .tit>a{ color:#007d7a;} #product>.solution{width:90%;max-width:1360px; margin:30px auto;overflow:hidden;} #product>.solution .swiper-container a{position:relative; display:block; background:#007d7a; 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:#007d7a; 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:#007d7a; 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:#007d7a; border:1px solid #007d7a; border-radius:50px; color:#fff;padding:6px 20px; font-size:14px; transition:all .35s;} #product>.product>.container>.back>a:hover{ background:none; color:#007d7a;} #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:#007d7a;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:#007d7a; border:1px solid #007d7a; 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:#007d7a;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:#007d7a;} #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:#007d7a; 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:#007d7a;content:''; } #product>.view>.tag_nav_ac{ top:100px; background:rgba(237,112,32,.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:#007d7a; 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:#007d7a; border:1px solid #007d7a; 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:#007d7a; 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:#007d7a; transition:all .35s;} #search>.container>.path>a:hover{opacity:.5;} #search>.container>.back{width:20%; text-align:right;} #search>.container>.back>a{background:#007d7a; border:1px solid #007d7a; border-radius:50px; color:#fff;padding:6px 20px; font-size:14px; transition:all .35s;} #search>.container>.back>a:hover{ background:none; color:#007d7a;} #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:#007d7a;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:#007d7a; border:1px solid #007d7a; 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*/ #jjfa{ margin:0 auto; transition:all .35s; } #jjfa.active {transform: translateX(-220px);} #jjfa>.solution{margin:0 auto; padding:10px 0 30px 0; } #jjfa>.solution>.container{ width:90%;max-width:1360px; margin:0 auto;padding:10px 0;} #jjfa>.solution>.container>ul{margin:0 auto;} #jjfa>.solution>.container>ul>li{width:32%; margin-right:2%; float:left;} #jjfa>.solution>.container>ul>li:nth-child(3n){margin-right:0 !important;} #jjfa>.solution>.container>ul>li>a{ position:relative; display:block;padding:2% 0;} #jjfa>.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;} #jjfa>.solution>.container>ul>li .con>.icon{ margin:0 auto;} #jjfa>.solution>.container>ul>li .con>.icon>img{height:100px; width:auto;} #jjfa>.solution>.container>ul>li .con>.tit{ padding:16px 0; font-size:18px; color:#fff;} #jjfa>.solution>.container>ul>li .img{ position:relative; overflow:hidden;} #jjfa>.solution>.container>ul>li .img:after{position:absolute;z-index:3;left:0;top:0; width:100%;height:100%;opacity:0; background:#007d7a; content:''; transition:all .35s;} #jjfa>.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;} #jjfa>.solution>.container>ul>li .img>img{ width:100%;height:auto; transition:all 1s;} #jjfa>.solution>.container>ul>li>a:hover .con{transform:translateY(-10px);} #jjfa>.solution>.container>ul>li>a:hover .img:after{opacity:.8;} #jjfa>.solution>.container>ul>li>a:hover .img:before{opacity:0;} #jjfa>.solution>.container>ul>li>a:hover .img>img{transform:scale(1.1);} @media only screen and (max-width: 1460px){ } @media only screen and (max-width: 1280px){ } @media only screen and (max-width: 1080px){ #jjfa>.solution>.container>ul>li .con{ margin-top:-60px; height:120px;} #jjfa>.solution>.container>ul>li .con>.icon>img{height:72px;} } @media only screen and (max-width: 960px){ #jjfa>.solution>.container>ul>li .con{ margin-top:-50px; height:100px;} #jjfa>.solution>.container>ul>li .con>.icon>img{height:56px;} #jjfa>.solution>.container>ul>li .con>.tit{ padding:12px 0; font-size:16px;} } @media only screen and (max-width: 820px){ #jjfa>.solution>.container>ul>li .con>.tit{ font-size:14px;} } @media only screen and (max-width: 760px){ } @media only screen and (max-width: 650px){ #jjfa>.solution>.container>ul>li{width:49%; margin-right:0 !important; float:left;} #jjfa>.solution>.container>ul>li:nth-child(3n){margin-right:0 !important;} #jjfa>.solution>.container>ul>li:nth-child(even){ float:right;} #jjfa>.solution>.container>ul>li .con>.icon>img{height:64px;} #jjfa>.solution>.container>ul>li .con>.tit{ font-size:16px;} } @media only screen and (max-width: 460px){ #jjfa>.solution>.container>ul>li .con{ margin-top:-40px; height:80px;} #jjfa>.solution>.container>ul>li .con>.icon>img{height:46px;} #jjfa>.solution>.container>ul>li .con>.tit{ padding:10px 0; font-size:12px;} } /* #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:#007d7a;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 #007d7a;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:#007d7a; 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:#007d7a; 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:#007d7a;}*/ #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:#007d7a;} #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:#007d7a;} #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 #007d7a;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:#007d7a!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:#007d7a;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:#007d7a;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:16px; 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:#007d7a; border:1px solid #007d7a; 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:1400px; margin:0 auto; padding:40px 0; } #quality>.txt{ display:block;font-size:18px; color:#444; text-align:center;} #quality>.con{ margin:0 auto; padding:50px 0;} #quality>.con>.item{float:left; width:31.33%; margin-right:3%; margin-bottom:0%; background:#ededed; 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 .tit{margin:0 auto; text-align:center; font-size:24px; font-weight:700;} #quality>.con>.item .img>img{ width:100%; height:auto; transition:all 1s;} #quality>.con>.item .txt{ min-height:100px; padding:20px 40px; 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,.3);} #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:#007d7a; 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:#007d7a;} #aftersale>.container>.slogan{padding:40px 0; font-size:20px; color:#007d7a; 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:#007d7a; 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 #007d7a; 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:#007d7a; 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:#007d7a;} #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:#007d7a;} #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 #007d7a;background:#007d7a; 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:#007d7a; 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:#007d7a; 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:#007d7a;} #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:#007d7a; border-radius:5px;} #service>.feedback .tagnav>.nav>a>span{display:block; float:left; padding:0 20px; line-height:64px; font-size:18px; color:#007d7a;} #service>.feedback .tagnav>.nav>a.A{ background:#f7f7f7;color:#007d7a;} #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 #007d7a;} #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 #007d7a;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:#007d7a;} } /*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:#007d7a;} #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:#007d7a; 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:#007d7a;} #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:#007d7a; 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:#007d7a;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:#007d7a;} #agent>.step3 .item .layui-form-radio>i:hover, #agent>.step3 .item .layui-form-radioed>i {color:#007d7a;} #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:#007d7a; 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:#007d7a;} #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:#007d7a;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:#007d7a; 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:#007d7a; border:1px solid #007d7a; 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:#007d7a;} #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>.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:#007d7a;} #contact>.contact>.container>.item:hover .icon{ background:#007d7a; border:1px solid #fff;} #contact>.contact>.container>.item:hover .con>.tit{color:#fff;} #contact>.contact>.container>.item:hover .con>.txt{color:#fff;}*/ #contact>.feedback{margin:0 auto; padding:20px 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:#007d7a;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;} } @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;} } /*END*/ /*quickmenu TOP*/ #quickmenu{ position:fixed; width:160px; right:0; top:40%; _position:absolute; 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:150px; overflow:hidden; cursor:pointer; right:-120px; font-style:normal;} #quickmenu a>em{ display:block; float:left; width:40px; background:#007d7a; 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;} } /* page -----------------------------------------------------------------*/ #pageNN{ width:100%; max-width:1140px; margin:0px auto; padding:40px 0;font-size:16px; color:#999; text-align:center;} #pageNN a{ display:inline-block; width:48px; height:48px; line-height:48px; margin:0 5px; border:1px solid #ccc; border-radius:50%; color:#999;} #pageNN a:hover, #pageNN .A{color:#007d7a;border:1px solid #007d7a;} @media only screen and (max-width: 1280px){ #pageNN{ width:93.75%;} } @media only screen and (max-width: 780px){ #pageNN{ text-align:center;} } /* end*/ /*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 .qrcode{width:20%; text-align:right;} #foot .qrcode>.qr{ display:inline-block; width:43%;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:14px;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:#007d7a; 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:#007d7a;} @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:#007d7a; 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; } }