/* CSS Document */
html, body {font-size: 12px;margin: 0px;padding: 0px;text-decoration: none;font-family:"微软雅黑";
/*background: #f5f5f5;*/
background: #fff;
text-align: center;-webkit-text-size-adjust: none;}
a { color: #666666;text-decoration: none;outline:none; star:expression(this.onFocus=this.blur());outline:none;}
a:hover, a:active { color: #27999f;}
* { margin: 0px;padding: 0px;list-style: none;outline:none;}
table { border-collapse: collapse;}
ul, li {list-style: none;border: 0 none;padding: 0px;outline:none;}
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;}
#dhtmltooltip {z-index: 100;visibility: hidden; position: absolute;text-align: left;border: 1px solid #ccc;}
#clear, .clear {clear: both;float: none!important;background: none;width: 0 !important; height: 0 !important;}
#noData, .noData {color: #ccc;font-size: 14px;text-align: left;padding: 50px 0;}
::-webkit-scrollbar {width:3px;height: 1px;}
::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background:#27999f;}
::-webkit-scrollbar-track {background: #eee;}
.fl{ float:left;}
.fr{ float:right;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* head TOP*/
#head{position:fixed;z-index:1001; left:0;top:0; width:100%; height:90px; background:rgba(255,255,255,1); box-shadow:0 1px 7px rgba(0,0,0,.1); box-sizing:border-box;}
#head:after{ position:absolute;z-index:1;left:0; top:0; width:100%;height:3px; background:url("../img/head-line.jpg") repeat-x; background-position:0 0; background-size:100% 100%; content:'';}
#head .logo{ position:relative; width:20%; line-height:90px; float:left; padding:0 5%; box-sizing:border-box; text-align:left;}
#head .logo>a{display:block;}
#head .logo>a img{
/*height:80px;*/
height: 50px;
width:auto;}
#head .menu{width:80%;float:right; padding:0 10% 0 12%; box-sizing:border-box;}
#head .menu>ul{display:block;margin:0 auto;}
#head .menu>ul>li{ position:relative; display:block;float:left; padding:0 30px;}
#head .menu>ul>li:hover{ color:#27999f;}
#head .menu>ul>li>a{ position:relative; display:block; line-height:90px; color:#333; font-size:17px; transition:all .35s;}
#head .menu>ul>li>a:after{ position:absolute;z-index:3;left:0; bottom:10px; width:100%;height:0;opacity:0; background:#27999f; content:''; transition:all .35s;}
#head .menu>ul>li>a:hover{ color:#27999f;}
#head .menu>ul>li>div{ display:none; position:absolute;z-index:80;left:0;top:90px; width:100%; text-align:left;}
#head .menu>ul>li>div>a{text-align: center;display:block; position:relative; font-size:14px; color:#fff;padding:15px; box-sizing:border-box; background:rgb(39 153 159); margin-bottom:1px; transition:all .35s;}
#head .menu>ul>li>div>a:hover{padding-left:20px; background:#27999f9c;}
#head .menu>ul>li>a:hover:after{ height:2px;opacity:1;}
#head .menu>ul>li.pro{ position:inherit;}
#head .menu>ul>li.pro>div{ box-sizing:border-box; background:rgba(0,0,0,.5);}
#head .menu>ul>li.pro>div>.wrap{ width:80%; margin:0 auto;padding:50px 0;}
#head .menu>ul>li.pro>div .box{
/*width:65%;*/
width:100%;
}
#head .menu>ul>li.pro>div .box>a{ position:relative; display:block;float:left; width:22%; margin-left:2%;}
#head .menu>ul>li.pro>div .box>a:after{ position:absolute;z-index:2;left:-14px;top:-13px; width:100%;height:100%; box-sizing:border-box; box-shadow: inset 0 0 0 2px rgba(255,255,255,0), 0 1px 2px rgba(255,255,255,0);content:''; transition:all .35s;}
#head .menu>ul>li.pro>div .box>a img{ position:relative;z-index:8; width:100%; height:auto; transition:all .8s;}
#head .menu>ul>li.pro>div .box>a:first-child{margin-left:0 !important;}
#head .menu>ul>li.pro>div .box>a:hover:after{box-shadow: inset 0 0 0 8px rgba(255,255,255,.2), 0 1px 2px rgba(255,255,255,0);}
#head .menu>ul>li.pro>div .box>a:hover img{transform:scale(1.02) translateX(5px);}
#head .menu>ul>li.pro>div .list{ width:30%;}
#head .menu>ul>li.pro>div .list>a{ position:relative; display:block; padding:5px 0; font-size:16px; color:#fff; transition:all .5s;}
#head .menu>ul>li.pro>div .list>a:after{ position:absolute;z-index:3;left:0;top:50%; margin-top:-3px; width:6px; height:6px; opacity:0; border-radius:100%; background:rgba(255,255,255,.4);content:''; transition:all .35s;}
#head .menu>ul>li.pro>div .list>a:hover{padding-left:20px; text-decoration:underline;}
#head .menu>ul>li.pro>div .list>a:hover:after{opacity:1; left:5px;}
#head .search{ position:absolute;z-index:8; top:50%; right:180px; margin-top:-35px; width:70px; height:70px;}
#head .search>a{display:block; width:100%;height:100%; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); background:url("../img/icon-search.png") no-repeat; background-position:50% 50%; background-size:32px auto;opacity:.5; transition:all .35s;}
#head .search>a:hover{opacity:.6;}
#head .search>a.active{background:url("../img/icon-search-close.png") no-repeat; background-position:50% 50%; background-size:32px auto;opacity:.2;}
#head .language{ position:absolute;z-index:99; right:0;top:0; width:120px; height:100%;}
#head .language>a{display:block; position:absolute;z-index:9; left:50%; top:50%; font-family:Arial; opacity:.5; margin-left:-30px; margin-top:-30px; color:#fff; width:60px; height:60px; text-align:center; font-size:14px; transition:all .35s;}
#head .language>a>img{display:block;width:40px;height:auto; margin:0 auto;}
#head .language>.bg{ background:#27999f; width:180px;height:100%;transform:skewX(-10deg); transition:all .35s;}
#head .language:hover a{opacity:.7;}
#head .language:hover .bg{transform: skewX(-28deg);background: #1868af;}
#head .mob{ display:none; position:absolute;z-index:99; right:0;top:0; width:auto; height:60px;}
#head .mob>.lang{ display:inline-block; width:80px;height:80px; line-height:80px; cursor:pointer;}
#head .mob>.lang>a{display:block; width:100%;height:100%; background:url("../img/icon-language-en-mob.png") no-repeat; background-position:50% 50%; background-size:36px auto;opacity:.5; transition:all .35s;}
#head .mob>.lang>a:hover{opacity:.6;}
#head .mob>.nav{ position:relative; display:inline-block; width:80px;height:80px; line-height:80px; cursor:pointer; background:#27999f;}
#head .mob>.nav>.icon { position: absolute;top:50%;left:50%;z-index: 999; margin-left:-40px; margin-top:-40px; box-sizing: border-box;padding:16px;width:80px;height:80px;-webkit-tap-highlight-color: transparent;-ms-touch-action: manipulation;touch-action: manipulation;}
#head .mob>.nav>.icon>span { position: relative; display:block; margin-top:18px;}
#head .mob>.nav>.icon>span,#head .mob>.nav>.icon>span:after,#head .mob>.nav>.icon>span:before { display: block;width:100%;height: 3px;background:#fff; border-radius:3px; transition-duration: .4s;transition-property: background-color,transform;}
#head .mob>.nav>.icon>span:after,#head .mob>.nav>.icon>span:before { position: absolute; content: "";}
#head .mob>.nav>.icon>span:before {top: -11px;}
#head .mob>.nav>.icon>span:after {top: 11px;}
#head .mob>.nav>.icon.active{ background:#333;}
#head .mob>.nav>.icon.active span { background-color: transparent;}
#head .mob>.nav>.icon.active span:after,#head>.nav>.icon.active span:before {background-color: #fff;}
#head .mob>.nav>.icon.active span:before {transform: translateY(11px)rotate(45deg);}
#head .mob>.nav>.icon.active span:after {transform: translateY(-11px)rotate(-45deg);}
@media only screen and (max-width: 1680px){
#head .menu>ul>li{ padding:0 25px;}
}
@media only screen and (max-width: 1520px){
#head .menu{ padding-left:8%;}
}
@media only screen and (max-width: 1440px){
#head .menu{ padding-left:6%;}
#head .menu>ul>li{ padding:0 22px;}
}
@media only screen and (max-width: 1380px){
#head .menu>ul>li{ padding:0 20px;}
}
@media only screen and (max-width: 1280px){
#head .search{ right:140px;}
#head .menu>ul>li{ padding:0 18px;}
}
@media only screen and (max-width: 1200px){
#head{height:80px}
#head .logo{ width:20%; line-height:80px;}
#head .logo>a img{height:40px;}
#head .search{display:none;}
#head .menu{display:none;}
#head .language{display:none;}
#head .mob{display:block;}
}
@media only screen and (max-width: 980px){
#head{height:60px}
#head .logo{ line-height:60px;}
#head .logo>a img{height:40px;}
#head .mob>.lang{ width:60px;height:60px; line-height:60px;}
#head .mob>.lang>a{background-size:24px auto;}
#head .mob>.nav{ width:60px;height:60px; line-height:60px;}
#head .mob>.nav>.icon { margin-left:-30px; margin-top:-30px; width: 60px;height: 60px;}
#head .mob>.nav>.icon>span { margin-top:13px;}
#head .mob>.nav>.icon>span:before {top: -9px;}
#head .mob>.nav>.icon>span:after {top: 9px;}
#head .mob>.nav>.icon.active span:before {transform: translateY(9px)rotate(45deg);}
#head .mob>.nav>.icon.active span:after {transform: translateY(-9px)rotate(-45deg);}
}
/* end*/
/* menu TOP*/
#menu{ display:none; position:fixed;z-index:999;left:0;top:0; width:100%;height:100%; box-sizing:border-box; background:rgba(0,0,0,.8); }
#menu .nav{ position:relative;z-index:99; width:80%; margin:0 auto;}
#menu .nav>ul{padding:80px 0 40px 0; height:100%; box-sizing:border-box; margin:0 auto;}
#menu .nav>ul>li{ position:relative; display:block; padding:15px 3px; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,.1); text-align:left;}
#menu .nav>ul>li>a{ position:relative; display:block; font-size:16px; color:#fff;}
#menu .nav>ul>li.on>a:after{ position:absolute;z-index:3; right:6px;top:50%; margin-top:-8px; width:16px; height:16px;opacity:.7; background:url("../img/icon-arrow-down-white.png") no-repeat; background-position:50% 50%; background-size:100% auto; content:''; transition:all .35s;}
#menu .nav>ul>li.active>a:after{transform:rotate(180deg);}
#menu .nav>ul>li>div{ display:none; padding:10px 0; margin-top:10px; text-align:left; box-sizing:border-box; border-left:2px solid rgba(255,255,255,.2);}
#menu .nav>ul>li>div>a{ position:relative; display:block; padding:5px 20px;font-size:14px; color:rgba(255,255,255,.8); transition:all .35s;}
#menu .search{ position:relative;z-index:66; width:80%;margin:0 auto;box-sizing:border-box;}
#menu .search>form{ display:block; box-sizing:border-box; width:100%; background:rgba(255,255,255,.4); padding:0 10px; height:40px; border-radius:40px; box-shadow:0 0 10px rgba(0,0,0,.2);}
#menu .search>form input[type="text"]{outline: medium;float:left;height:40px;line-height:40px;width:84%; padding:0 5%;border:none; font-size:14px; background:none;color:rgba(255,255,255,1);box-sizing:border-box;overflow:hidden;}
#menu .search>form input::-webkit-input-placeholder{ color:rgba(255,255,255,.5);}
#menu .search>form button{float:right;width:16%;height:40px;border:none;outline: none; opacity:1;background:url(../img/icon-search.png) no-repeat center center;background-size:auto 22px;cursor:pointer;box-sizing:border-box;overflow:hidden;}
/* end*/
/* search TOP*/
#search{ display:none; position:fixed;z-index:999; left:0;top:110px;width:100%; background:rgba(0,0,0,.8);overflow:hidden; box-sizing:border-box;}
#search>form{ width:60%; border:1px solid rgba(255,255,255,.2); margin:20px auto;}
#search>form input[type="text"]{outline: medium;float:left;height:60px;line-height:60px;width:70%; padding:0 5%;border:none; font-size:16px; background:none;color:#fff;box-sizing:border-box;overflow:hidden;}
#search>form input::-webkit-input-placeholder{ color:#ccc;}
#search>form button{float:right;width:20%;height:60px;border:none; opacity:.8;background:url(../img/icon-go-white.png) no-repeat center center;background-size:auto 25px;cursor:pointer;box-sizing:border-box;overflow:hidden;}
@media only screen and (max-width: 1200px){
#search{display:none!important;}
}
/* end*/
/* banner TOP*/
#banner{ position:relative; width:100%;overflow:hidden; margin:0 auto; box-sizing:border-box;background:#000;
/*margin-top: 110px;*/
}
#banner>.swiper-container{width:100%;margin:0 auto;}
#banner .swiper-slide{ position:relative; background:#fff;}
#banner img{ width:100%;height:auto;margin:0 auto;}
#banner .swiper-container-horizontal>.swiper-pagination-bullets, #banner .swiper-pagination-custom, #banner .swiper-pagination-fraction {bottom: 30px;}
#banner .swiper-pagination-bullet {width:40px;height:4px;border-radius:0;background: #fff;opacity:1;transform:skewX(-13deg);}
#banner .swiper-pagination-bullet-active{ background:#27999f;}
#banner .box{position:absolute;z-index:99; left:50%;top:50%; margin-left:-250px;width:500px; height:100px; text-align:center;}
#banner .box>.tit{ position:relative; padding:10px 0; font-size:28px; font-weight:bold; color:#ffffff;}
#banner .box>.tit:after{ position:absolute;z-index:3;left:50%; bottom:0;
margin-left: -35px;
width: 77px;
height:2px; background:#ffffff; content:'';}
#banner .box>.txt{ padding:5px 0; font-size:34px; text-transform:uppercase; color:rgba(255,255,255,.6);}
#banner .bg{ position:relative; margin:0 auto;}
#banner .bg:after{ position:absolute;z-index:1;left:0;top:0; width:100%; height:100%; background:rgba(0,0,0,.3); content:'';}
#banner .mob{ display:none;}
@media only screen and (max-width: 1280px){
#banner .box{margin-top:-20px;}
#banner .box>.txt{ font-size:28px;}
}
@media only screen and (max-width: 980px){
#banner{ margin-top:60px;}
#banner .box>.tit{ font-size:16px;}
#banner .box>.txt{ font-size:24px;}
#banner .bg{max-height:250px;overflow:hidden;}
#banner .pc{ display:none;}
#banner .mob{ display:block;}
}
@media only screen and (max-width: 640px){
#banner .box > .tit{ font-size: 25px;}
#banner .box > .txt{ font-size:20px;}
}
/* end*/
#main{margin:0 auto;}
#main>.catalog{ width:100%; margin:0 auto; background:#f7f7f7;padding:30px; box-sizing:border-box;}
#main>.catalog .wrap{ position:relative; width:90%;max-width:1460px; margin:0 auto;}
#main>.catalog .swiper-container{ width:100%; max-width:1360px;margin:0 auto;}
#main>.catalog .swiper-slide{ background-image: linear-gradient(120deg , #ffffff, #ffffff); padding:30px 0;}
#main>.catalog .swiper-slide .icon{position:relative; width:60px; height:60px; margin:10px auto 0 auto;overflow:hidden;}
#main>.catalog .swiper-slide .icon>img{ position:absolute;z-index:1;left:0;top:0; width:100%;height:auto;}
#main>.catalog .swiper-slide .tit{ position:relative; padding:20px 0; box-sizing:border-box; text-align:center; font-size:16px; color:#666; transition:all .1s;}
#main>.catalog .swiper-slide .tit:after{position:absolute;z-index:1;left:50%; bottom:0; margin-left:-12px; width:24px;height:2px; background:#ccc;content:''; transition:all .35s;}
#main>.catalog .swiper-slide:hover{
background-image: linear-gradient(120deg , #27999f, #3498db);
box-shadow:0 0 8px rgba(0,0,0,.1);
}
#main>.catalog .swiper-slide:hover .tit{ color:#fff;}
#main>.catalog .swiper-slide:hover .tit:after{background:#fff;}
#main>.catalog .swiper-slide:hover .icon>img{top:-60px;}
#main>.catalog .button-prev{ display:none; position:absolute;z-index:1;left:0;top:50%; margin-top:-15px; width:30px; height:30px; cursor:pointer; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);background:url("../img/icon-arrow-left-line-orange.png") no-repeat; background-position:50% 50%; background-size:100% auto; transition:all .35s;}
#main>.catalog .button-next{ display:none; position:absolute;z-index:1;right:0;top:50%; margin-top:-15px; width:30px; height:30px; cursor:pointer; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); background:url("../img/icon-arrow-right-line-orange.png") no-repeat; background-position:50% 50%; background-size:100% auto; transition:all .35s;}
#main>.catalog .button-prev:hover, #main>.catalog .button-next:hover{ -webkit-filter: grayscale(0);-moz-filter: grayscale(0);-ms-filter: grayscale(0%);-o-filter: grayscale(0);filter: grayscale(0);}
#main>.catalog .swiper-pagination { display:none; position: relative; bottom:0;padding:10px 0;}
#main>.catalog .swiper-pagination .swiper-pagination-bullet {margin:0 6px;}
#main>.catalog .swiper-pagination .swiper-pagination-bullet-active { background:#27999f;}
#main>.search{ display:none; width:100%; margin:0 auto; background:#fff url("../img/search-bg.jpg") no-repeat; background-position:50% 50%; background-size:cover;padding:100px; box-sizing:border-box;}
#main>.search .wrap{ position:relative; width:90%;max-width:1460px; margin:0 auto;}
#main>.search .con{ text-align:center;margin:0 auto;}
#main>.search .con>.tit{ position:relative;z-index:9; padding:10px; font-size:18px; font-weight:bold; color:#27999f;}
#main>.search .con>.tit:after{ position:absolute;z-index:1; left:50%; bottom:0; margin-left:-20px; width:40px; height:2px; background:#27999f; content:'';}
#main>.search .con>.txt{ position:relative; padding:20px 0; font-size:28px; color:#333; text-align:center;}
#main>.search .img{ padding:20px; text-align:center;}
#main>.search .img>img{opacity:.5; height:36px; width:auto; transition:all .35s;}
#main>.search .img>img:hover{opacity:.8;}
#main>.search .form{ width:50%; height:50px; margin:20px auto; background:#fff; border-radius:50px; border:1px solid #ddd; transition:all .35s;}
#main>.search .form:hover{border:1px solid #ccc;}
#main>.search .form input[type="text"]{outline: medium;float:left;height:50px;line-height:50px;width:85%; padding:0 5%;border:none; background:none; font-size:16px;color:#666;box-sizing:border-box;overflow:hidden;}
#main>.search .form input::-webkit-input-placeholder{ color:#ccc;}
#main>.search .form button{float:right;width:15%;height:50px;border:none; opacity:1;background:url(../img/icon-search.png) no-repeat center center;background-size:auto 30px;cursor:pointer;box-sizing:border-box;overflow:hidden;}
#main>.product{ width:100%; margin:0 auto; padding:50px 0; border-top:1px solid #e6e6e6;}
#main>.product>.wrap{ width:90%; max-width:1360px; margin:0 auto;}
#main>.product .title{ position:relative; margin:0 auto;box-sizing:border-box;}
#main>.product .title>.txt{ position:relative; padding:30px 0 10px; text-align:left; color:#333; font-size:28px;}
#main>.product .title>.txt:after{ position:absolute;z-index:1;left:0; bottom:0; width:60px;height:3px; background:#27999f; content:'';}
#main>.product .title>.more{ position:absolute;z-index:5; top:50%; right:0; margin-top:-20px; width:auto; height:40px; line-height:40px;}
#main>.product .title>.more>a{display:block;padding:0 20px; background:rgba(0,0,0,.2); color:#fff; font-size:16px; font-family:Arial; transition:all .35s;}
#main>.product .title>.more>a:hover{background:#27999f}
#main>.product .container{ position:relative; margin:0 auto;padding:50px 0;}
#main>.product .container .swiper-slide{background: #fff;}
#main>.product .container .button-prev{ position:absolute;z-index:1;left:-50px;top:50%; margin-top:-15px; width:30px; height:30px; cursor:pointer; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);background:url("../img/icon-arrow-left-line-orange.png") no-repeat; background-position:50% 50%; background-size:100% auto; transition:all .35s;}
#main>.product .container .button-next{ position:absolute;z-index:1;right:-50px;top:50%; margin-top:-15px; width:30px; height:30px; cursor:pointer; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); background:url("../img/icon-arrow-right-line-orange.png") no-repeat; background-position:50% 50%; background-size:100% auto; transition:all .35s;}
#main>.product .container .button-prev:hover, #main>.product .button-next:hover{ -webkit-filter: grayscale(0);-moz-filter: grayscale(0);-ms-filter: grayscale(0%);-o-filter: grayscale(0);filter: grayscale(0);}
#main>.product .container .swiper-container{ width:100%; max-width:1360px;margin:0 auto;}
#main>.product .container .img{ position:relative;
/*background: #efefef; */
text-align:center;overflow:hidden;border: 1px solid #eee;
border-bottom: none;}
#main>.product .container .img>img{width:100%;height:auto; transition:all 1s;transform: scale(0.8);border-top: none;transform: scale(0.9);}
#main>.product .container .con{ position:relative; text-align:left; border:1px solid #eee; box-sizing:border-box;padding:10px 20px;border-top: none;}
#main>.product .container .con:after{ position:absolute;z-index:1;left:0;bottom:0; width:0;height:2px;opacity:0; background:url("../img/head-line.jpg") repeat-x; background-position:0 0; background-size:cover; content:''; transition:all .35s;}
#main>.product .container .con>.tit{
color:#555;
font-size: 21px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
#main>.product .container .con>.txt{ padding:10px 0; font-size: 14px;color: #27999f;}
#main>.product .container .con>.view{ position:absolute;z-index:4; right:10px; bottom:10px; width:26px; height:26px; background:url("../img/icon-arrow-right-line-orange.png") no-repeat; background-position:50% 50%; background-size:100% auto;}
#main>.product .container a:hover{box-shadow:0 0 10px rgba(0,0,0,.2);}
#main>.product .container a:hover .img>img{transform:scale(1);opacity:1;}
#main>.product .container a:hover .con:after{ width:100%;opacity:1;}
#main>.application{ width:100%; margin:0 auto;
/*background:url("../img/application-bg.jpg") no-repeat; background-position:50% 50%; background-size:cover; background-attachment:fixed;*/
}
#main>.application>.wrap{ width:90%;max-width:1360px; margin:0 auto;padding:90px 0 0;}
#main>.application .title{ position:relative; margin:0 auto;box-sizing:border-box;}
#main>.application .title>.txt{ position:relative; padding:30px 0 10px; text-align:left; color:#333; font-size:28px;}
#main>.application .title>.txt:after{ position:absolute;z-index:1;left:0; bottom:0; width:60px;height:3px; background:#27999f; content:'';}
#main>.application .title>.more{ position:absolute;z-index:5; top:50%; right:0; margin-top:-20px; width:auto; height:40px; line-height:40px;}
#main>.application .title>.more>a{display:block;padding:0 20px; background:rgba(255,255,255,.2); color:#fff; font-size:16px; font-family:Arial; transition:all .35s;}
#main>.application .title>.more>a:hover{background:#27999f}
#main>.application .container{padding:50px 0; margin:0 auto;}
#main>.application .container>.item>a{display:block; float:left; width:50%;overflow:hidden;}
#main>.application .container>.item>a .img{width:50%; float:left; height:300px; box-sizing:border-box; position:relative;background-repeat:none; background-position:center center; background-size:cover;}
#main>.application .container>.item>a .con{width:50%; float:left; height:300px; text-align:left; box-sizing:border-box; position:relative; transition:all .35s;}
#main>.application .container>.item:nth-child(1) .con{background:#27999fab; padding:20px; color:#fff;}
#main>.application .container>.item:nth-child(2) .con{background:#27999fab;padding:20px; color:#fff;}
#main>.application .container>.item:nth-child(2) .img{ float:left;}
#main>.application .container>.item:nth-child(2) .con{float:right;}
#main>.application .container>.item>a .con>.tit{font-size:24px; transition:all .35s;}
#main>.application .container>.item>a .con>.txt{ padding:20px; padding-left:0;font-size: 16px;
line-height: 29px;color:rgba(255,255,255,.8); transition:all .35s;}
#main>.application .container>.item>a .more{position:absolute; right:20px; bottom:20px; font-size:16px;}
#main>.application .container>.item>a .more>span{display:inline-block; width:18px; height:18px; content:''; background:url('../img/icon-more-white.png') no-repeat center center; background-size:100% auto; vertical-align:middle; margin:-5px 0 0 16px; transition:margin .3s;}
#main>.application .container>.item>a .img:after{content:''; display:block; width:0; height:0; background:#000; position:absolute; left:50%; top:50%; opacity:0.4; transition:all .35s;}
#main>.application .container>.item>a:hover .img:after{width:100%; height:100%; left:0; top:0;}
#main>.application .container>.item>a:hover .con>.tit, #main>.application .container>.item>a:hover .con>.txt{padding-left:10px}
#main>.quick{ width:100%; margin:0 auto; padding:90px 0; background:#fff;}
#main>.quick>.wrap{ width:90%; max-width:1360px; margin:0 auto;}
#main>.quick ul>li {position: relative;overflow: hidden;float: left;width:25%;}
#main>.quick ul>li:after{ position:absolute;z-index:3; left:0; top:0; width:100%;height:100%; background:rgba(0,0,0,.6); content:''; transition:all .35s}
#main>.quick ul>li img{ width:100%;height:auto; transition:all .8s;}
#main>.quick ul>li .con {position: absolute;z-index:9; top:50%;text-align: center;width: 100%;margin-top: -25px;transition: all 0.3s;}
#main>.quick ul>li .con>.tit {font-size: 28px;color: #fff;line-height:50px;text-transform: uppercase; transition: all 0.1s;}
#main>.quick ul>li .con>.more {opacity: 0;margin-top: 22px;border: 1px solid rgba(255,255,255,0.28);padding: 0 26px;line-height: 36px;border-radius: 30px; display: inline-block;font-size: 14px;color: #fff; transition:all .35s;}
#main>.quick ul>li:hover:after{ background:#27999fa6;}
#main>.quick ul>li:hover img{transform:scale(1.1);}
#main>.quick ul>li:hover .con{margin-top:-77px;}
#main>.quick ul>li:hover .con>.tit{transform: scale(1.08);}
#main>.quick ul>li:hover .con>.more{opacity:1;}
#main>.quick ul>li .con>.more:hover{color:#27999f;background:#fff;}
@media only screen and (max-width: 1380px){
#main>.catalog .button-prev{ left:-40px;}
#main>.catalog .button-next{ right:-40px;}
}
@media only screen and (max-width: 1280px){
#main>.quick ul>li .con>.tit {font-size: 24px;}
#main>.application .container>.item>a .img{height:240px;}
#main>.application .container>.item>a .con{height:240px;}
}
@media only screen and (max-width: 1080px){
#main>.catalog .swiper-pagination{display:block;}
#main>.quick ul>li {width:50%;}
#main>.application .container>.item:nth-child(1) .con{padding:40px 20px;}
#main>.application .container>.item:nth-child(2) .con{padding:40px 20px;}
}
@media only screen and (max-width: 780px){
#main>.product .title>.txt{ padding:20px 0;font-size:24px;}
#main>.application .title>.txt{ padding:20px 0;font-size:24px;}
#main>.application .container>.item>a .img{height:160px;}
#main>.application .container>.item>a .con{height:160px;}
#main>.application .container>.item>a .con>.tit{font-size:20px;}
#main>.application .container>.item>a .con>.txt{display:none;}
#main>.application .container>.item>a .more{font-size:0;}
#main>.product .container .button-prev{ left:-30px;}
#main>.product .container .button-next{ right:-30px;}
}
@media only screen and (max-width: 640px){
#main>.catalog{ padding:30px 0;}
#main>.catalog .swiper-slide .tit{ padding:16px 0; font-size:13px;}
#main>.product{ padding:30px 0;}
#main>.product .title>.txt{ font-size:20px;}
#main>.product .title>.more>a{font-size:14px;}
#main>.product .container{padding-bottom:20px;}
#main>.product .container .con{ padding:10px 10px;}
#main>.product .container .button-prev{ display:inline-block; position:relative;left:0;top:0; margin-top:20px;}
#main>.product .container .button-next{ display:inline-block; position:relative;right:0;top:0; margin-top:20px;}
#main>.application>.wrap{padding:0px 0 30px;}
#main>.application .title>.txt{ font-size:20px;}
#main>.application .title>.more>a{font-size:14px;}
#main>.application .container>.item>a .con>.tit{font-size:18px;}
#main>.quick{ padding:40px 0;}
#main>.quick ul>li .con>.tit {font-size: 20px;}
}
@media only screen and (max-width: 520px){
#main>.application .container>.item>a{float:none; width:100%;}
#main>.application .container>.item>a:nth-child(1) .img{float:left;}
#main>.application .container>.item>a:nth-child(1) .con{float:right;}
#main>.application .container>.item>a:nth-child(2) .img{float:right;}
#main>.application .container>.item>a:nth-child(2) .con{float:left;}
}
/* prolist TOP*/
#prolist{position:relative; width:100%;height:auto;margin:0 auto; background:#fff; padding:30px; box-sizing:border-box; border-bottom:1px solid #eee;}
#prolist>.wrap{ width:90%;max-width:1360px;margin:0 auto;}
#prolist .tit{ text-align: center;padding-bottom:20px; font-size:20px; font-weight:bold;color:#27999f; text-align:left;}
#prolist .tit img{height:36px;width:auto; margin:0 6px;}
#prolist .nav{ position:relative;z-index:9;text-align:left; margin:0 auto;}
#prolist .nav>ul>li{display:block; float:left; border:1px solid #ddd; box-sizing:border-box; border-radius:50px; height:40px; line-height:40px; margin-right:20px; margin-bottom:20px; transition:all .35s;}
#prolist .nav>ul>li.A{ color:#fff;
background-image: linear-gradient(120deg , #27999f, #27999f);
border:1px solid transparent;
}
#prolist .nav>ul>li.A a{color:#ffffff !important;}
#prolist .nav>ul>li>a{
display:block;
font-size:16px;
color:#555;
transition:all .35s;
padding: 0 30px;
}
#prolist .nav>ul>li:hover{ border:1px solid #81bff7;}
#prolist .nav>ul>li>a:hover{ color:#27999f;}
@media only screen and (max-width: 640px){
#prolist{padding:30px 0 20px 0;}
#prolist .nav>ul>li{
width:46%;
margin-right:10px;
margin-bottom:10px;
}
#prolist .nav>ul>li>a{
padding:0 16px;
font-size:14px;
text-align:center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* end*/
/* navpart TOP*/
#navpart{position:relative; width:100%;height:auto;margin:0 auto; background:#fff; box-sizing:border-box; border-bottom:1px solid #eee;}
#navpart>.wrap{ width:100%;max-width:1200px;margin:0 auto;}
#navpart .nav{display: flex;
position:relative;z-index:88; top:-40px; margin:0 auto;}
#navpart .nav>a{flex: 1;display:block; width:30%; float:left; margin:0 1%;padding:10px 0; box-sizing:border-box; background-image: linear-gradient(120deg , #666, #999); transition:all .35s;}
#navpart .nav>a>.ico{display:inline-block; box-sizing:border-box; width:60px;height:60px;overflow:hidden;}
#navpart .nav>a>.ico>img{ position:relative; top:-60px; width:100%;height:auto;}
#navpart .nav>a>.txt{ display:inline-block;vertical-align: top; line-height:60px; padding-left:10px; box-sizing:border-box; font-size:18px; color:#fff;}
#navpart .nav>a:hover{background-image: linear-gradient(120deg , #27999f, #27999f);
}
#navpart .nav>a.A{ background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.1);}
#navpart .nav>a.A>.ico>img{top:0;}
#navpart .nav>a.A>.txt{
color: #27999f;
font-weight: 600;
}
@media only screen and (max-width: 1280px){
#navpart>.wrap{max-width:auto;}
#navpart .nav{ top:0;}
#navpart .nav>a{width:33.33%; margin:0;}
}
@media only screen and (max-width: 640px){
#navpart .nav>a{ float:none; width:100%; margin:0 auto;}
}
/* end*/
/* product TOP*/
#product{ position:relative; padding:40px 0; margin:0 auto;}
#product .wrap{width:90%; max-width:1360px;margin:0 auto;}
#product .search{ position:relative; width:100%; margin:0 auto; padding-bottom:50px;}
#product .search .keys{ width:40%; float:left; box-sizing:border-box; text-align:left; font-size:16px; color:#666;}
#product .search .keys>strong{display:inline-block; color:#27999f; text-decoration:underline;}
#product .search form{ position:absolute;z-index:40; right:0;top:0; width:30%; height:42px; margin:0 auto; background:#eee; border:0; border-radius:50px; transition:all .35s;}
#product .search form input[type="text"]{outline: medium;float:left;height:42px;line-height:42px;width:85%; padding:0 5%;border:none; background:none; font-size:14px;color:#333;box-sizing:border-box;overflow:hidden;}
#product .search form input::-webkit-input-placeholder{ color:#ccc;}
#product .search form button{float:right;width:15%;height:42px;border:none; opacity:1;background:url(../img/icon-search.png) no-repeat center center;background-size:auto 24px;cursor:pointer;box-sizing:border-box;overflow:hidden;}
#product .list{margin:0 auto;padding:50px 0;}
#product .list>ul{margin:0 auto;padding:0;}
#product .list>ul>li{ position:relative; display:block; float:left; width: 23%;margin-right:2%; margin-bottom:2%;overflow:hidden; transition:all .35s;}
/*#product .list>ul>li:nth-child(3n){ margin-right:0 !important;}*/
#product .list>ul>li .img{ position:relative;
/*background: #c3c0c0;*/
text-align:center;overflow:hidden;
border: 1px solid #a9a8a8;
border-bottom: none;
}
#product .list>ul>li .img>a:after{ position:absolute;z-index:5;left:0;bottom:0; width:100%;height:100%; opacity:0;transform:scale(1.2); background:url("../img/logo2.png") no-repeat; background-size:200px auto; background-position:50% 50%; content:''; transition:all .35s;}
#product .list>ul>li .img img{width:100%;height:auto; transition:all 1s;transform: scale(0.8);}
#product .list>ul>li .nav{ position:absolute;z-index:6;left:0;bottom:120px;width:100%;height:120px;opacity:0; transition:all .35s;}
#product .list>ul>li .nav>a{ position:relative; display:block; float:left; width:25%; height:100%; background:rgba(0,0,0,.3); box-sizing:border-box; text-align:center; font-size:14px; color:#fff; transition:all .35s;}
#product .list>ul>li .nav>a:after{ position:absolute;z-index:1;left:0;top:0;width:1px;height:100%; background:rgba(255,255,255,.1); content:'';}
#product .list>ul>li .nav>a>img{display:block;margin:22px auto 0 auto; width:56px; height:auto;}
#product .list>ul>li .nav>a:first-child:after{opacity:0;}
#product .list>ul>li .con{ position:relative; text-align:left; height:120px; box-sizing:border-box;padding:30px 20px; border:1px solid #a9a8a8;border-top: none;}
#product .list>ul>li .con:after{ position:absolute;z-index:1;left:0;bottom:0; width:0;height:5px;opacity:0; background:url("../img/head-line.jpg") repeat-x; background-position:0 0; background-size:cover; content:''; transition:all .35s;}
#product .list>ul>li .con>.tit{
color:#555;
font-size:16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#product .list>ul>li .con>.txt{
padding:10px 0;
font-size:13px;
color:#ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#product .list>ul>li .con>.view{ position:absolute;z-index:4; right:10px; bottom:10px; width:26px; height:26px; background:url("../img/icon-arrow-right-line-orange.png") no-repeat; background-position:50% 50%; background-size:100% auto;}
#product .list>ul>li:hover{box-shadow:0 0 10px rgba(0,0,0,.2);}
#product .list>ul>li:hover .img img{transform:scale(1);opacity:1;}
#product .list>ul>li:hover .img>a:after{opacity:.5;transform:scale(1);}
#product .list>ul>li:hover .con:after{ width:100%;opacity:1;}
#product .list>ul>li:hover .con>.tit{color:#27999f;}
#product .list>ul>li:hover .nav{ opacity:1;}
#product .list>ul>li .nav>a:hover{background:rgba(231,120,23,.7);}
#proview{ display:none; position:fixed;z-index:1001; left:0; top:0; width:100%;height:100%; background:rgba(0,0,0,.7);}
#proview>.close{ position:absolute;z-index:99;right:50px; top:20px; width:80px; height:80px; line-height:80px; cursor:pointer; text-align:center;overflow:hidden;}
#proview>.close>img{ width:56px; height:auto;opacity:.4; transition:all .35s;}
#proview>.close:hover img{transform:rotate(180deg);opacity:.8;}
#proview>.container{ position:absolute; z-index:9; left:0; bottom:0; width:100%; height:100%; background:#fff;}
#proiframe{ position:relative; margin:0 auto; width:100%; height:100%;}
#proiframe>.box{ position:fixed;z-index:99;left:0;top:0; width:100%; height:20%; box-sizing:border-box; box-shadow:0 -5px 10px rgba(0,0,0,.06) inset; background-image: linear-gradient( #fff, #eee);}
#proiframe>.box>.wrap{ position:relative; width:80%; height:100%; margin:0 auto;}
#proiframe>.box .img{ width:500px; float:left; box-shadow:0 5px 15px rgba(0,0,0,.1);}
#proiframe>.box .img>img{width:100%;height:auto;}
#proiframe>.box .logo{ position:absolute; left:0; bottom:50px; padding:10px; width:30%; box-sizing:border-box; color:#fff; text-align:left;}
#proiframe>.box .logo>a{display:block;}
#proiframe>.box .logo>a>img{height:60px; width:auto;}
#proiframe>.box .nav{ position:absolute;z-index:1; right:0; bottom:0; width:70%;box-sizing:border-box; padding:0 5%; text-align:left; transition:all .35s;}
#proiframe>.box .nav>a{ position:relative; display:block; float:left; text-align:center; margin-right:50px;padding:30px 0; font-size:16px; color:#666; transition:all .35s;}
#proiframe>.box .nav>a:after{ position:absolute;z-index:1; left:50%; bottom:0; opacity:0; margin-left:-10px; border-width:10px;border-style:solid;border-color:transparent transparent #fff transparent; content:''; transition:all .35s;}
#proiframe>.box .nav>a>img{display:block;opacity:.4; margin:0 auto;}
#proiframe>.box .nav>a.A:after{opacity:1;}
#proiframe>.content{ position:absolute;z-index:5;left:0;bottom:0; width:100%; height:80%;padding:100px 0; box-sizing:border-box; text-align:left;}
#proiframe>.content>.wrap{ position:relative; width:80%;margin:0 auto;}
#proiframe>.content .box{ position:fixed;z-index:4; max-width:460px; width:30%;text-align:left;}
#proiframe>.content .box .focus{box-sizing:border-box;}
#proiframe>.content .box .focus img{width:100%;height:auto;}
#proiframe>.content .box .focus .swiper-pagination-bullet-active {opacity: 1;background:#27999f;}
#proiframe>.content .box .title{padding:20px;}
#proiframe>.content .box .title>.model{ position:relative; display:inline-block; font-size:30px;padding:10px 0;color:#27999f; font-weight:bold;}
#proiframe>.content .box .title>.model:after{ position:absolute;z-index:1;left:0;bottom:0; width:70%; height:2px; background:#27999f; content:''; transition:all .35s;}
#proiframe>.content .box .title>.name{ display:inline-block; padding:0 10px; font-size:24px; letter-spacing:2px; color:#888;}
#proiframe>.content .box .btn{ text-align:left;padding:30px 20px;}
#proiframe>.content .box .btn>a{background:#fb9b38;display:inline-block; border-radius:5px; box-sizing:border-box; padding:15px 100px;text-align: center;color: #fff;font-size: 16px;position: relative; overflow: hidden;border: 1px solid transparent;}
#proiframe>.content .box .btn>a:after {position:absolute;z-index:0;background:#fb9b38;left: 0;top: 0;width: 100%; height: 100%;content: "";}
#proiframe>.content .box .btn>a:before {display: block;position: absolute;left: -148%;top: 0;z-index: 1; width: 124%;height: 100%; content: ""; background:#fff;transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;transform: skewX(45deg);-webkit-transform: skewX(45deg);-moz-transform: skewX(45deg); }
#proiframe>.content .box .btn>a span{position: relative;z-index: 2; display:block; width:100px; box-sizing:border-box; background:url("../img/icon-qq.png") no-repeat; background-position:0 0; background-size:20px auto; padding-left:30px; transition: .3s ease-in-out; }
#proiframe>.content .box .btn>a:hover {border-color:#fb9b38;color:#fb9b38; }
#proiframe>.content .box .btn>a:hover span{ background-position:0 -20px;}
#proiframe>.content .box .btn>a:hover:before {left: -13%;}
#proiframe>.content .tag{ width:70%;box-sizing:border-box;padding:0 5%; text-align:left;}
#proiframe>.content .tag .hide{display:block;}
#proiframe>.content .tag .tit{ font-size:20px; font-weight:bold; color:#27999f;padding:10px 0;}
#proiframe>.content .tag .con{ padding:20px 0; text-align:left; line-height:26px; color:#666; font-size:15px;}
#proiframe>.content .tag .con h3{ display:block; font-size:18px; font-weight:normal; color:#444; margin-bottom:10px;}
#proiframe>.content .tag .con>p{margin-bottom:5px;}
#proiframe>.content .tag .con img{max-width:100%;height:auto;}
#proiframe>.content .tag .con table{ border-top:1px solid #ddd; box-sizing:border-box; border-left:1px solid #ddd;margin:0 auto; width:100%;}
#proiframe>.content .tag .con table tr:first-child td{ font-weight:bold; padding:10px 8px; font-size:16px; color:#333; background:#eee;}
#proiframe>.content .tag .con table td{ color:#666; font-size:14px; padding:8px; text-align:left; border-right:1px solid #ddd; border-bottom:1px solid #ddd; transition:all .35s;}
#proiframe>.content .tag .con table td:hover{ color:#27999f; background:#fff7f1;}
#proiframe>.content .tag .con .tableWap{ overflow:hidden; overflow-x:auto;}
#proiframe>.content .tag .con .tableWap{ overflow:hidden; overflow-x:auto;}
#proiframe>.content .tag .pdf{ padding:20px 0; text-align:left; line-height:26px; color:#666; font-size:15px;}
#proiframe>.content .tag .pdf>a{ display:inline-block; float:left; width:33%; margin-bottom:10px; padding:12px 50px; border:1px solid #ddd; box-sizing:border-box;background:url("../img/icon-pdf.png") no-repeat; background-size:28px auto; background-position:12px 50%;}
#proiframe>.content .tag .pdf>a:hover{text-decoration:underline; color:#27999f;}
@media only screen and (max-width: 1680px){
#proiframe > .content .box{ max-width:440px;}
}
@media only screen and (max-width: 1620px){
#proiframe > .content .box{ max-width:420px;}
}
@media only screen and (max-width: 1520px){
#proiframe > .content .box{ max-width:380px;}
}
@media only screen and (max-width: 1480px){
#proiframe > .content .box{ max-width:350px;}
}
@media only screen and (max-width: 1280px){
#proiframe > .content .box{ max-width:320px;}
}
@media only screen and (max-width: 1180px){
#product .list>ul>li{ width:49%;}
#product .list>ul>li:nth-child(3n){ margin-right:2% !important;}
#product .list>ul>li:nth-child(2n){ margin-right:0 !important;}
#proview>.close{ right:30px; width:60px; height:60px; line-height:60px;}
#proview>.close>img{ width:40px;}
#proiframe>.box .logo{ bottom:30px; padding:10px 0;}
#proiframe>.box .logo>a>img{height:50px;}
#proiframe>.box .nav{ padding:0;}
#proiframe>.box .nav>a{padding:30px 0; font-size:14px;}
#proiframe>.box .nav>a>img{ width:50px; height:auto; }
#proiframe>.content .box{ max-width:280px;}
#proiframe>.content .box .btn>a{padding:15px 26%;}
}
@media only screen and (max-width: 1040px){
#proiframe>.content .box{ max-width:250px;}
#proiframe>.content .box .title>.model{ font-size:26px;}
#proiframe>.content .box .title>.name{ font-size:18px;}
}
@media only screen and (max-width: 980px){
#proiframe>.box{ height:16%;}
#proiframe>.box .nav{ padding:0 5%;}
#proiframe>.content{ padding:0; height:84%;}
#proiframe>.content>.wrap{ width:100%;margin:0 auto;}
#proiframe>.content .box{ position:relative; max-width:none; float:none;width:100%;}
#proiframe>.content .box .focus{padding:30px; border-bottom:1px solid #eee;}
#proiframe>.content .tag{ float:none; width:90%;padding:0;margin:0 auto;}
}
@media only screen and (max-width: 920px){
#proiframe>.box .nav>a{ padding:20px 0; margin-right:30px;}
}
@media only screen and (max-width: 780px){
#product .search form{ width:50%;}
#proiframe>.box>.wrap{ width:90%;}
#proiframe>.box .logo{ top:10px; bottom:auto;}
#proiframe>.box .logo>a>img{height:46px;}
#proiframe>.box .nav{ float:none; width:100%;padding:0;}
#proiframe>.box .nav>a{ padding:20px 0; margin-right:40px;}
}
@media only screen and (max-width: 640px){
#main>.product .container .con>.view{
bottom: 5px;
}
#product .list>ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#product .search{padding-bottom:20px;}
#product .search .keys{ width:100%; float:none;font-size:14px; padding:10px;}
#product .search form{ position:relative; width:100%;}
#product .list{padding:20px 0;}
#product .list>ul>li{ float:none; width:48%; margin-bottom:4%;}
#product .list>ul>li:nth-child(3n){ margin-right:2%!important;}
#product .list>ul>li:nth-child(2n){ margin-right:2% !important;}
#proview>.close{ top:4px; right:4px; width:40px; height:40px; line-height:40px;}
#proview>.close>img{ width:26px;}
#proiframe>.box .logo>a>img{height:32px;}
#proiframe>.box .nav>a{ padding:10px 0; margin-right:0; width:25%; font-size:14px;}
#proiframe>.box .nav>a>img{width:30px;}
#proiframe>.content .box .title{padding:20px;}
#proiframe>.content .box .title>.model{font-size:24px;}
#proiframe>.content .box .title>.name{ font-size:18px;}
#proiframe>.content .box .btn{ padding:0 20px;}
#proiframe>.content .tag .tit{ font-size:18px;}
#proiframe>.content .tag .pdf>a{ display:block; float:none; width:100%; margin-bottom:10px;}
}
/* end*/
/* service TOP*/
#service{ position:relative; width:100%; margin:0 auto;padding:90px 0;}
#service>.customized{width:90%; max-width:1360px;margin:0 auto;}
#service>.customized>.title{margin:0 auto; padding:20px 0; font-size:24px; font-weight:bold; color:#27999f; text-align:left;}
#service>.customized>.container{margin:0 auto; padding-bottom:120px;}
#service>.customized>.container>.content{width:64%; box-sizing:border-box;padding-right:50px; text-align:left;}
#service>.customized>.container>.content>.txt>p{font-size:16px; padding:10px 0; color:#666; line-height:26px;}
#service>.customized>.container>.content>.btn{ text-align:left;padding:20px 0;}
#service>.customized>.container>.content>.btn>a{background:#27999f;display:inline-block; border-radius:5px; box-sizing:border-box; padding:10px 30px;text-align: center;color: #fff;font-size: 16px;position: relative; overflow: hidden;border: 1px solid transparent;}
#service>.customized>.container>.content>.btn>a:after {position:absolute;z-index:0;background:#27999f;left: 0;top: 0;width: 100%; height: 100%;content: "";}
#service>.customized>.container>.content>.btn>a:before {display: block;position: absolute;left: -148%;top: 0;z-index: 1; width: 124%;height: 100%; content: ""; background:#fff;transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;transform: skewX(45deg);-webkit-transform: skewX(45deg);-moz-transform: skewX(45deg); }
#service>.customized>.container>.content>.btn>a span{position: relative;z-index: 2; display:block; width:130px; box-sizing:border-box; background:url("../img/icon-process.png") no-repeat; background-position:0 0; background-size:20px auto; padding-left:30px; transition: .3s ease-in-out; }
#service>.customized>.container>.content>.btn>a:hover {border-color:#27999f;color:#27999f; }
#service>.customized>.container>.content>.btn>a:hover span{ background-position:0 -20px;}
#service>.customized>.container>.content>.btn>a:hover:before {left: -13%;}
#service>.customized>.container>.img{width:36%; text-align:right;}
#service>.customized>.container>.img>img{max-width:100%;height:auto;}
#service>.question{ background:url("../img/question-bg.jpg") no-repeat; background-position:0 0;background-size: cover;padding:120px 0; margin:0 auto;}
#service>.question>.title{width:90%; max-width:1360px;margin:0 auto; padding:20px 0; font-size:24px; font-weight:bold; color:#27999f; text-align:left;}
#service>.question>.container{ position:relative; width:90%; max-width:1360px;margin:20px auto;}
#service>.question>.container>.content{width:88%;}
#service>.question>.container>.content .swiper-pagination{ position:relative; bottom:0;padding:20px;}
#service>.question>.container>.content .swiper-pagination-bullet-active {opacity: 1; background: #fb9b38;}
#service>.question>.container>.content a{display:block; background:#fff;box-sizing:border-box;padding:50px; text-align:left;transition:all .35s;}
#service>.question>.container>.content a .time{ color:#27999f; font-size:14px;}
#service>.question>.container>.content a .con{text-align:left;padding:5px 0;}
#service>.question>.container>.content a .con>.tit{ padding:5px 0; font-size:16px; color:#333; overflow: hidden;text-overflow:ellipsis; white-space: nowrap; transition:all .35s;}
#service>.question>.container>.content a .con>.txt{ font-size:14px; color:#999; line-height:24px; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;}
#service>.question>.container>.content a:hover{ box-shadow: 0 0 20px rgba(0, 0, 0, .2);}
#service>.question>.container>.content a:hover .tit{color:#27999f;}
#service>.question>.container>.more{position: absolute;z-index: 6;right: 0;top: 0;width:120px;height: 205px; background:#999; box-sizing: border-box;transition: all .35s;}
#service>.question>.container>.more>a{ position:absolute;z-index:3; left:0; top:0; width:100%; height:100%;display:block; line-height:0; text-align:center; font-size:16px; color:#fff;}
#service>.question>.container>.more>a>span{display:block; position:absolute;z-index:3;left:0;top:50%; margin-top:-30px; width:100%; height:60px; line-height:40px; transition:all .3s;}
#service>.question>.container>.more>a img{display:block; width:auto; height:40px; margin:0 auto;}
#service>.question>.container>.more>a:hover span{transform:translateY(-3px);}
#service>.question>.container>.more:hover{ background:rgba(0,0,0,.5);}
#service>.feedback{ width:100%; padding:120px 0; margin:0 auto;}
#service>.feedback>.container{width:90%;max-width:1360px;margin:0 auto;}
#service .feedback .img{width:30%; text-align:left;}
#service .feedback .img>img{width:100%;height:auto;}
#service .feedback .content{width:60%; text-align:left;}
#service .feedback .content>.title{margin:0 auto; padding:20px 0; font-size:24px; font-weight:bold; color:#27999f; text-align:left;}
#service .feedback .content>.pic{ display:none;}
#service .feedback .content>.pic>img{width:100%;height:auto;}
#service .feedback .content>.form{ text-align:left; }
#service .feedback .content>.form .item{ position:relative; display:block; padding:12px 0;}
#service .feedback .content>.form .item .ast{ position:absolute; z-index:9; top:26px; left:10px; color:#c80021; font-size:14px;}
#service .feedback .content>.form .code{ position:relative;}
#service .feedback .content>.form input{ display:inline-block; box-sizing:border-box; width:100%;height:auto;padding:15px 20px;-webkit-appearance:none; outline: none; border:1px solid #ddd; color:#666;text-align:left; transition:all .35s;}
#service .feedback .content>.form input::-webkit-input-placeholder{ color:#999;}
#service .feedback .content>.form textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:15px 20px;-webkit-appearance:none; outline: none; font-family:"微软雅黑"; line-height:24px; border:1px solid #ddd; color:#666;text-align:left;transition:all .35s;}
#service .feedback .content>.form textarea::-webkit-input-placeholder{ color:#999;}
#service .feedback .content>.form input:hover, #service .form textarea:hover{box-shadow:0 2px 5px rgba(0,0,0,.1);}
#service .feedback .content>.form .w30{width:30%;}
#service .feedback .content>.form .w50{width:49%;}
#service .feedback .content>.form .w100{width:100%; clear:both;}
#service .feedback .content>.form #checkimg{display:inline-block; position:absolute;z-index:3; top:50%; right:10px; margin-top:-13px; cursor:pointer;}
#service .feedback .content>.form .submit{ float:right; display:inline-block; box-sizing:border-box; width:46%!important; background:#27999f;padding:12px 10px; font-size:16px; color:#fff; text-align:center; border:0; cursor:pointer;}
#service .feedback .content>.form .reset{ float:left;display:inline-block; box-sizing:border-box;width:46%!important; background:#fab381;padding:12px 10px;font-size:16px; color:#fff; text-align:center; border:0; cursor:pointer;}
@media only screen and (max-width: 1280px){
#service>.question>.container>.more{width:10%;}
}
@media only screen and (max-width: 980px){
#service>.customized>.container>.content{ float:none; width:100%;padding-right:0;}
#service>.customized>.container>.img{ float:none; width:100%; text-align:center;}
#service>.question>.container>.content{width:82%;}
#service>.question>.container>.content a{padding:50px;}
#service>.question>.container>.more{width:16%;}
#service>.feedback{ padding:0;}
#service .feedback .img{ display:none;}
#service .feedback .content{ float:none; width:100%;}
#service .feedback .content>.pic{ display:block;}
}
@media only screen and (max-width: 640px){
#service>.customized>.title{padding:10px 0; font-size:20px;}
#service>.question{padding:60px 0;}
#service>.question>.title{padding:10px 0; font-size:20px;}
#service>.question>.container>.content{width:80%;}
#service>.question>.container>.more{width:20%;}
#service>.question>.container>.more>a{ font-size:13px;}
#service .feedback .content>.title{padding:10px 0; font-size:20px;}
#service .feedback .content>.form .item{ float:none!important;}
#service .feedback .content>.form .w30{ width:100%; clear:both;}
#service .feedback .content>.form .w50{ width:100%; clear:both;}
#service .feedback .content>.form .w100{width:100%; clear:both;}
#service .feedback .content>.form .code, #service .feedback .content>.form .btn{float:none; padding:12px 0;}
}
@media only screen and (max-width: 420px){
#service .feedback .content>.form .submit{ float:none; display:block; width:100%!important; margin-bottom:4%;}
#service .feedback .content>.form .reset{ float:none;display:block; width:100%!important;}
}
/* end*/
/* application TOP*/
#application{ position:relative; width:100%; margin:0 auto;padding:90px 0;}
#application>.title{width:90%; max-width:1360px;margin:0 auto; padding:20px 0; font-size:24px; font-weight:bold; color:#27999f; text-align:left;}
#application>.container{width:90%; max-width:1360px;margin:0 auto;padding:10px 0;}
#application>.container .list, #application>.container .list>ul{margin:0 auto;padding:0;}
#application>.container .list>ul>li{ position:relative; display:block; float:left; width:23.5%; margin-right:2%; margin-bottom:2%; box-sizing:border-box;background:#fff;overflow:hidden; transition:all .35s;}
#application>.container .list>ul>li:nth-child(4n){ margin-right:2% !important;}
#application>.container .list>ul>li>a{display:block; text-align:left;}
#application>.container .list>ul>li .img{ position:relative; text-align:left;overflow:hidden;margin:0 auto;}
#application>.container .list>ul>li .img:after{ position:absolute;z-index:2;left:0;top:0; width:100%;height:100%; background:rgba(0,0,0,.6); opacity:0; content:''; transition:all .35s;}
#application>.container .list>ul>li .img>img{ width:100%; height:auto; max-height:360px; transition:all .35s;}
#application>.container .list>ul>li .con{ width:100%; padding:30px; background:#eee; text-align:left; box-sizing:border-box; transition:all .35s;}
#application>.container .list>ul>li .con>.tit{ font-size:20px; color:#333;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;}
#application>.container .list>ul>li .con>.txt{ margin-top:10px; height:40px; font-size:14px; color:#999; line-height:20px; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2; overflow: hidden;}
#application>.container .list>ul>li:hover{ box-shadow:0 2px 10px rgba(0,0,0,.1);}
#application>.container .list>ul>li:hover .con{background:#fff;}
#application>.container .list>ul>li:hover .con>.tit{color:#27999f;}
#application>.container .list>ul>li:hover .img:after{opacity:1;}
#application>.container .list>ul>li:hover .img>img{transform:scale(1.1);}
#application>.container .view{width:90%;margin:0 auto;}
#application>.container .view>.tit{ font-size:32px; text-align:center; color:#333; margin:0 auto; padding-bottom:40px;}
#application>.container .view>.img{ background:#f7f7f7; text-align:center;margin:0 auto;}
#application>.container .view>.img>img{max-width:100%; height:auto;margin:0 auto;}
#application>.container .view>.content{margin:0 auto; box-sizing:border-box; padding:50px 30px;font-size:16px; line-height:28px; color:#666; text-align:left;}
#application>.container .view>.content>p{margin-bottom:20px;}
#application>.container .view>.content img{max-width:100%;height:auto;}
#application>.container .view>.content table{ border-top:1px solid #ddd; border-left:1px solid #ddd;margin:0 auto; width:100%;box-sizing:border-box; }
#application>.container .view>.content table td{ color:#666; font-size:14px; padding:8px; text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
#application>.container .view>.content .tableWap{ overflow:hidden; overflow-x:auto;}
#application>.container .view>.pageurl{margin:0 auto;padding:50px 0;font-size:14px;}
#application>.container .view>.pageurl>a{display:inline-block;margin:0 15px; box-sizing:border-box;padding:10px 60px; font-size:14px; color:#666; border:1px solid #eee; background:#f7f7f7; transition:all .35s;}
#application>.container .view>.pageurl>a:hover{background:#fff; color:#27999f;}
#application>.container .view>.pageurl>a.back{background:#27999f; border:1px solid #27999f; color:#ffffff !important;}
#application>.container .view>.pageurl>a.back:hover{background:#fab381; border:1px solid #fab381; }
@media only screen and (max-width: 1200px){
#application>.container .list>ul>li{ width:31.33%;}
#application>.container .list>ul>li:nth-child(4n){ margin-right:2% !important;}
#application>.container .list>ul>li:nth-child(3n){ margin-right:0 !important;}
}
@media only screen and (max-width: 980px){
#application>.container .list>ul>li{ width:49%;}
#application>.container .list>ul>li:nth-child(4n){ margin-right:2% !important;}
#application>.container .list>ul>li:nth-child(3n){ margin-right:2% !important;}
#application>.container .list>ul>li:nth-child(2n){ margin-right:0 !important;}
#application>.container .view>.img>img{width:100%;}
#application>.container .view>.pageurl>a{;margin:0 10px; padding:10px 60px;}
}
@media only screen and (max-width: 640px){
#application{padding:50px 0;}
#application>.title{ padding:10px 0; font-size:20px;}
#application>.container .list>ul>li{ float:none; width:100%; margin-bottom:4%;}
#application>.container .list>ul>li:nth-child(4n){ margin-right:0 !important;}
#application>.container .list>ul>li:nth-child(3n){ margin-right:0 !important;}
#application>.container .list>ul>li:nth-child(2n){ margin-right:0 !important;}
#application>.container .view{width:100%;}
#application>.container .view>.tit{ font-size:25px;}
#application>.container .view>.content{padding:30px 0;}
#application>.container .view>.pageurl>a{display:block;margin:0 auto 10px auto;}
}
/* end*/
/* customized TOP*/
#customized{ position:relative; width:100%; margin:0 auto;padding:90px 0;}
#customized>.title{width:90%; max-width:1360px;margin:0 auto; padding:20px 0; font-size:24px; font-weight:bold; color:#27999f; text-align:left;}
#customized>.container{width:90%; max-width:1360px;margin:0 auto;padding:10px 0;}
#customized>.container>.text{text-align:left; padding-bottom:30px;}
#customized>.container>.text>p{font-size:16px; padding:10px 0; color:#666; line-height:26px;}
#customized>.container>.process{margin:0 auto; border:1px solid #eee;padding:50px; box-sizing:border-box;}
#customized>.container>.process>.tit{ font-size:24px;color:#333;padding:20px 0;}
#customized>.container>.process>.img{ text-align:center;margin:0 auto;}
#customized>.container>.process>.img>img{ max-width:100%;height:auto;}
@media only screen and (max-width: 640px){
#customized>.container>.process>.tit{ font-size:20px;}
#customized>.container>.process{padding:30px 20px;}
}
/* end*/
/* question TOP*/
#question{
position:relative;
width:100%;
margin:0 auto;
/*padding:90px 0;*/
padding: 30px 0;
}
#question>.title{width:90%; max-width:1360px;margin:0 auto; padding:20px 0; font-size:24px; font-weight:bold; color:#27999f; text-align:left;}
#question>.container{width:90%; max-width:1360px;margin:0 auto;padding:10px 0;}
#question>.container .list, #question>.container .list>ul{margin:0 auto;padding:0;}
#question>.container .list>ul>li{ display:block; background:#fff; border-bottom:1px solid #eee; transition:all .35s;}
#question>.container .list>ul>li>.akey{position:relative; cursor:pointer; color:#666; font-size:16px;}
#question>.container .list>ul>li>.akey>div{ position:relative; float:left; padding:20px; text-align:center; box-sizing:border-box;}
#question>.container .list>ul>li>.akey>div.tit{ width:80%;text-align:left;padding-left:60px; background-size:25px auto; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#question>.container .list>ul>li>.akey>div.tit:after{ position:absolute;z-index:12;left: 15px;top:50%; margin-top:-13px; width:26px; height:26px; background:url("../img/icon-question-Q.png") no-repeat; background-position:0 -26px; background-size:100% auto; content:''; transform:all .35s;}
#question>.container .list>ul>li>.akey>div.time{ width:20%; color:#ccc; text-align:left;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#question>.container .list>ul>li>.det{ position:relative; display:none; width:100%; box-sizing:border-box; padding:20px 60px;float:none; background:#f7f7f7; margin:0 auto; text-align:left;}
#question>.container .list>ul>li>.det .con{ text-align:left;}
#question>.container .list>ul>li>.det .con{
font-size:16px;
color:#666;
line-height: 40px;
/*line-height:26px; */
padding:10px 0;}
#question>.container .list>ul>li>.det .btn{ text-align:left;padding:20px 0;}
#question>.container .list>ul>li>.det .btn>a{display:inline-block; background:#27999f; padding:8px 40px; color:#fff; font-size:16px; transition:all .35s;}
#question>.container .list>ul>li>.det .btn>a:hover{ background:#444;}
#question>.container .list>ul>li>.det .btn>.tip{ display:inline-block; color:#bbb; font-size:14px; padding-left:20px;}
#question>.container .list>ul>li.A>.akey>div.tit:after{background-position:0 0;}
#question>.container .list>ul>li.A>.akey>div, #question>.container .list>ul>.akey:hover{ color:#27999f; font-weight:bold; background-color:#f7f7f7;}
#question>.container .list>ul>li.A>.akey>div{
font-size: 23px;
}
@media only screen and (max-width: 980px){
#question>.container .list>ul>li>.akey>div.tit{ float:none; width:100%;padding-bottom:5px;}
#question>.container .list>ul>li>.akey>div.tit:after{ margin-top:-3px;}
#question>.container .list>ul>li>.akey>div.time{ float:none; width:100%;padding:0 0 20px 60px; font-size:14px;}
}
@media only screen and (max-width: 640px){
#question>.title{padding:10px 0; font-size:20px;}
#question>.container .list>ul>li>.det{ padding:0 20px;}
#question>.container .list>ul>li>.det .con{
font-size: 16px;
line-height: 27px;
}
#question>.container .list>ul>li>.det .btn{ text-align:center;}
#question>.container .list>ul>li>.det .btn>a{display:block;}
#question>.container .list>ul>li>.det .btn>.tip{ display:block; padding:6px 0;}
}
/* end*/
/* about TOP*/
#about{ position:relative; width:100%; margin:0 auto;
/*padding:90px 0;*/
/*padding: 90px 0px 0px; */
padding: 0 0px 0px;
}
#about>.profile{width:100%; margin:0 auto;}
#about>.profile>.title{
text-indent: 2em;
width:90%; max-width:1360px;margin:0 auto; padding:20px 0; font-size: 35px;font-weight:bold; color:#27999f; text-align:left;}
#about>.profile>.container{ width:90%; max-width:1360px;margin:0 auto;}
#about>.profile>.container>.img{ width:44%;text-align:right;}
#about>.profile>.container>.img>img{max-width:100%;height:auto;}
#about>.profile>.container>.content{ width:50%; text-align:left;}
#about>.profile>.container>.content>p{font-size:16px; padding:10px 0; color:#666;
/*line-height:27px;*/
line-height: 34px;
}
#about>.culture{width:100%; margin:0 auto; padding-top:150px;}
#about>.culture ul{ width:90%; max-width:1360px; margin:0 auto;}
#about>.culture ul>li{ position:relative; display:block; float:left; width:25%; height:280px; margin-bottom:4%; margin-left:-1px; border:1px solid #eee; box-sizing:border-box;padding:40px; text-align:left;}
#about>.culture ul>li .icon{ position:absolute;z-index:4; left:20px;top:-60px; background:#fff;padding:30px; display:inline-block;}
#about>.culture ul>li .icon>img{ width:80px; height:auto;}
#about>.culture ul>li .tit{ padding-top:60px; font-size:20px; font-weight:bold; color:#333;}
#about>.culture ul>li .txt{ padding-top:10px; font-size:15px; color:#999; line-height:26px;}
@media only screen and (max-width: 1200px){
#about>.culture ul>li .txt{ font-size:14px; line-height:24px;}
}
@media only screen and (max-width: 980px){
#about>.profile>.container>.img{ float:none; width:100%;text-align:center; padding-top:30px;}
#about>.profile>.container>.content{ float:none; width:100%;}
#about>.culture ul>li .tit{ padding-top:20px; font-size:18px;}
}
@media only screen and (max-width: 860px){
#about>.culture{padding-top:100px;}
#about>.culture ul>li{ width:50%; height:280px; margin-bottom:0; margin-top:-1px;}
#about>.culture ul>li .icon{ position:relative;left:0;top:0;padding:0;}
}
@media only screen and (max-width: 640px){
#about{padding: 0px 0px 10px;}
#about>.profile>.title{ padding:10px 0; font-size:20px;}
#about>.culture{padding-top:50px;}
#about>.culture ul>li{ float:none; width:100%; height:auto;}
}
/* end*/
/* reality TOP*/
#reality{ position:relative; width:100%; margin:0 auto;padding: 0px 0 90px;}
#reality>.title{width:90%; max-width:1360px;margin:0 auto; padding:20px 0; font-size:24px; font-weight:bold; color:#27999f; text-align:left;}
#reality>.container{width:90%; max-width:1360px;margin:0 auto;}
#reality>.container .swiper-container{ width:100%; max-width:1360px;margin:0 auto;}
#reality>.container .swiper-slide { height:500px;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; transition: 300ms; transform: scale(0.5);opacity:.4;}
#reality>.container .swiper-slide .img{ position:relative; display:block; margin:0 auto;}
#reality>.container .swiper-slide .img>img{width:100%;height:auto;}
#reality>.container .swiper-slide .img>p{position:absolute;z-index:999;left:0; bottom:-30px; width:100%; color:#999; display:block; text-align:center; font-size:20px;}
#reality>.container .swiper-slide-active, #reality>.container .swiper-slide-duplicate-active{ position:relative;z-index:99; transform: scale(1.4);opacity:1;}
#reality>.container .swiper-slide-active .img>p, #reality>.container .swiper-slide-duplicate-active .img>p{ color:#27999f;}
#reality>.container .swiper-pagination { display:none; position: relative; bottom:0;}
#reality>.container .swiper-pagination .swiper-pagination-bullet-active {background: #27999f;}
#reality>.container .button-prev{ position:absolute;z-index:1;left:0;top:50%; margin-top:-30px; width:60px; height:60px; cursor:pointer; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);background:url("../img/icon-arrow-left-orange.png") no-repeat; background-position:50% 50%; background-size:100% auto; transition:all .35s;}
#reality>.container .button-next{ position:absolute;z-index:1;right:0;top:50%; margin-top:-30px; width:60px; height:60px; cursor:pointer; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); background:url("../img/icon-arrow-right-orange.png") no-repeat; background-position:50% 50%; background-size:100% auto; transition:all .35s;}
#reality>.container .button-prev:hover, #reality>.container .button-next:hover{ -webkit-filter: grayscale(0);-moz-filter: grayscale(0);-ms-filter: grayscale(0%);-o-filter: grayscale(0);filter: grayscale(0);}
@media only screen and (max-width: 1200px){
#reality>.container .swiper-slide { height:450px;}
#reality>.container .swiper-slide .img>p{ font-size:16px;}
#reality>.container .swiper-slide-active, #reality>.container .swiper-slide-duplicate-active{ transform: scale(1.6);}
}
.rongyu{width:100%;}
.ry-honor-ul{display: flex;flex-wrap: wrap;}
.ry-honor-ul .ry-honor-li{
width: 22%;
display: flex;
flex-direction: column;
margin: 0px 20px;
}
.ry-honor-ul .ry-honor-li a{
margin-bottom: 20px;
}
.ry-honor-ul .ry-honor-li a .honorIco{
max-width: 100%;
width: 100%;
}
.ry-honor-ul .ry-honor-li a .ry-honor-span {
font-size: 19px;
font-weight: 600;
margin-top: 13px;
display: inline-block;
color: #000;
}
@media only screen and (max-width: 767px){
.ry-honor-ul .ry-honor-li{width: 44%;margin: 0px 10px;}
.ry-honor-ul .ry-honor-li a .ry-honor-span{font-size: 15px;}
}
@media only screen and (max-width: 640px){
#reality{padding: 0px 0 50px;}
#reality>.title{ padding:10px 0; font-size:20px;}
#reality>.container{padding:20px 0;}
#reality>.container .swiper-slide{ height:auto;}
#reality>.container .swiper-slide-active, #reality>.container .swiper-slide-duplicate-active{ transform: scale(1);}
#reality>.container .swiper-slide .img>p{position:relative; bottom:0;padding:10px;}
#reality>.container .swiper-pagination { display:block;}
#reality>.container .button-prev, #reality>.container .button-next{display:none;}
#service{padding: 10px 0 90px;}
}
/* end*/
/* quality TOP*/
#quality{ position:relative; width:100%; margin:0 auto;padding:90px 0;}
#quality>.title{width:90%; max-width:1360px;margin:0 auto; padding:20px 0; font-size: 35px; font-weight:bold; color:#27999f; text-align:left;}
#quality>.container{width:90%; max-width:1360px;margin:0 auto;}
#quality>.container>.text{padding: 0px 0 30px; text-align:left;}
#quality>.container>.text>h3{font-size:18px; font-weight:bold; color:#333;}
#quality>.container>.text>p{font-size:16px; padding:10px 0; color:#666; line-height:27px;}
#quality>.container>.text img{width: 30%;}
#quality>.container>.imgs{margin:0 auto; padding-top:50px;}
#quality>.container>.imgs .swiper-slide span{ position:absolute;z-index:99; display:block; text-align:center; opacity:0; left:50%;top:50%; margin-left:-30%; margin-top:0; width:60%; height:50px; line-height:50px; font-size:16px; color:#fff; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); transition:all .3s;}
#quality>.container>.imgs .swiper-slide img{width:100%;height:auto;}
#quality>.container>.imgs .swiper-slide:after{ position:absolute;z-index:2;left:0;bottom:0; width:100%;height:0; background:rgba(0,0,0,.6); content:''; transition:all .35s;}
#quality>.container>.imgs .swiper-slide:hover:after{height:100%;}
#quality>.container>.imgs .swiper-slide:hover span{opacity:1;margin-top:-26px;}
#quality>.container>.imgs .button-prev{ position:absolute;z-index:1;left:0;top:50%; margin-top:-30px; width:40px; height:60px; cursor:pointer;background:rgba(0,0,0,.8) url("../img/icon-arrow-left-white.png") no-repeat; background-position:50% 50%; background-size:30px auto; transition:all .35s;}
#quality>.container>.imgs .button-next{ position:absolute;z-index:1;right:0;top:50%; margin-top:-30px; width:40px; height:60px; cursor:pointer; background:rgba(0,0,0,.8) url("../img/icon-arrow-right-white.png") no-repeat; background-position:50% 50%; background-size:30px auto; transition:all .35s;}
#quality>.container>.imgs .button-prev:hover, #quality>.container>.imgs .button-next:hover{ background-color:rgba(231,120,23,.8);}
@media only screen and (max-width: 640px){
#quality{padding:50px 0;}
#quality>.title{ padding:10px 0; font-size:20px;}
#quality>.container>.text{padding:10px 0;}
#quality>.container>.imgs{padding-top:30px;}
#quality>.container>.imgs .swiper-slide span{ opacity:1;margin-top:-26px;}
#quality>.container>.imgs .swiper-slide:after{height:100%;}
}
/* end*/
/* vr TOP*/
#vr{ position:relative; width:100%; margin:0 auto;padding:90px 0;}
#vr>.title{width:90%; max-width:1360px;margin:0 auto; padding:20px 0; font-size:24px; font-weight:bold; color:#27999f; text-align:left;}
#vr>.container{width:90%; max-width:1360px;margin:0 auto;padding:10px 0;}
#vr>.container ul{display:block;margin:0 auto;}
#vr>.container ul>li{ position:relative; display:block;float:left; width:48%; margin-bottom:4%;}
#vr>.container ul>li:nth-child(even){ float:right;}
#vr>.container ul>li iframe{width:100%; min-height:360px; height:auto; cursor:pointer;}
#vr>.container ul>li .tit{ width:100%; text-align:center;padding:20px; box-sizing:border-box; color:#333; font-size:16px; font-weight:bold; transition:all .35s;}
#vr>.container ul>li:hover .tit{ color:#27999f;}
@media only screen and (max-width: 1360px){
#vr>.container ul>li iframe{min-height:350px;}
}
@media only screen and (max-width: 1200px){
#vr>.container ul>li iframe{min-height:300px;}
}
@media only screen and (max-width: 1180px){
#vr>.container ul>li iframe{min-height:260px;}
}
@media only screen and (max-width: 980px){
#vr>.container ul>li iframe{min-height:230px;}
}
@media only screen and (max-width: 980px){
#vr>.container ul>li iframe{min-height:200px;}
}
@media only screen and (max-width: 640px){
#vr{ padding:50px 0;}
#vr>.title{padding:10px 0; font-size:20px;}
#vr>.container ul>li{ float:none; width:100%; margin-bottom:4%;}
#vr>.container ul>li iframe{min-height:200px;}
#vr>.container ul>li .tit{ padding:10px 20px;}
}
/* end*/
/* contact*/
#contact{ position:relative; width:100%; margin:0 auto;}
#contact>.container{ position:absolute; z-index:60; left:14%;top:50%; margin-top:-200px; width:650px;height:400px; box-sizing:border-box;padding:50px; text-align:left; background:rgba(255,255,255,.9);}
#contact>.container>.tit{ position:relative; font-size:32px; color:#27999f; font-weight:bold;}
#contact>.container>.tit:after{ position:absolute;z-index:1;left:0; bottom:-15px; width:60px;height:2px; background:#ddd;content:'';}
#contact>.container>.con{padding:40px 0;}
#contact>.container>.con>p{ display:block;
/*padding:5px 0; */
/*font-size:16px;*/
padding: 12px 0;
font-size: 18px;
color:#333;}
#contact>.map{ width:100%;height:100%;margin:0 auto;}
#contact>.map .BMap_bubble_title{ font-size:16px; font-weight:bold; color:#333;}
#contact>.map .BMap_bubble_content{ font-size:14px; color:#333; line-height:24px;}
#contact>.map .BMap_bubble_content .url{ display:inline-block; margin-top:6px; font-size:14px;color:#27999f;padding-left:30px; box-sizing:border-box; background:url("../img/icon-navigation.png") no-repeat; background-position:0 0; background-size:auto 100%;}
@media only screen and (max-width: 1280px){
#contact>.container{ left:12%; margin-top:-175px; width:550px;height:350px;}
}
@media only screen and (max-width: 980px){
#contact{ padding-top:60px;}
#contact>.container{ position:relative;left:auto;top:auto; margin-top:0; width:100%;height:auto; background:#fff;}
#contact>.container>.tit:after{ background:#27999f;opacity:.5;}
}
@media only screen and (max-width: 480px){
#contact>.container{padding:50px 30px;}
#contact>.container>.tit{ font-size:24px;}
}
/* end*/
/* page*/
#page, .page{ margin:0 auto; padding:40px 0;text-align:center;}
#page>a, .page>a{display:inline-block; width:36px; height:36px; line-height:36px; margin:0 5px; font-size:14px; text-align:center; background:#f7f7f7; border-radius:100%; border:1px solid #eee; transition:all .35s;}
#page>a:hover, .page>a:hover{ background:#fff; color:#27999f;}
#page>a.A, .page>a.A{ background:#27999f; border:1px solid #27999f; color:#fff;}
@media only screen and (max-width: 640px){
#page>a, .page>a{width:30px; height:30px; line-height:30px; margin:0 2px;}
}
/* end*/
/*pc鼠标经过样式*/
#navpart .nav>a:hover .ico>img{
top: -60px;
}
#navpart .nav>a:hover .txt{
color: #fff;
}
/*A默认样式*/
#navpart .nav>a{
border: 1px solid #ebeaea;
background-color: #fff;
background-image: unset;
}
/*#navpart .nav>a:last-child{*/
/* border:none;*/
/*}*/
#navpart .nav>a>.txt{
color: #27999f;
}
#navpart .nav>a>.ico>img{
top: 0px;
}
/*A选中样式*/
#navpart .nav>a.A{
box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
background-image: linear-gradient(120deg , #27999f, #27999f);
/*background:#27999f; */
/*border:1px solid #27999f; */
/*color:#fff;*/
}
#navpart .nav>a.A>.ico>img{top:-60px;}
#navpart .nav>a.A>.txt{
color: #fff;
}
#foot{ position:relative; width:100%; background:#27999f; background-position:right top; margin:0px auto;}
#foot:after{position:absolute; z-index:1; right:0; top:0; width:0; height:100%; background:#2e1805; content:'';}
#foot .container{ width:90%; max-width:1360px; margin:0 auto; padding:50px 0;}
#foot .container .logo{ float:left; text-align:left; padding:10px 0px 20px 0;}
#foot .container .logo img{display:block; width:260px; height:auto;opacity:.7;}
#foot .container .logo img.logo{ width:250px;opacity:1;}
#foot .container .contact{ float:left; padding:20px 40px; text-align:left;}
#foot .container .contact p{ display:block; padding:3px 0; font-size:16px; color:rgba(255,255,255,1);}
#foot .container .contact a{ color:#ccc;}
#foot .container .qrcode{
position:relative;
z-index:99;
float:right;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#foot .container .qrcode .text{ display:inline-block; text-align:right; color:rgba(255,255,255,.6); font-size:12px; line-height:18px;}
#foot .container .qrcode .text span{
display:block;
font-size: 17px;
font-weight: 500;
margin-top: 10px;
}
#foot .container .qrcode img{
width: 100px;
height: auto;
background: #fff;
/* padding: 8px;*/
}
#foot .copyright{ position:relative; width:90%; max-width:1360px; margin:0 auto; border-top:1px solid rgba(255,255,255,.2); padding:15px 0px;
font-size: 15px;
text-align:left; color:rgba(255,255,255,.8);}
#foot .copyright a{ color:rgba(255,255,255,.8);}
@media only screen and (max-width: 980px){
#foot .container .logo{ float:none; padding:10px 60px 0 0;}
#foot .container .logo img{width:200px;}
#foot .container .logo img.logo{ width:160px;}
#foot .container .contact{ float:none;
/*padding:20px 0;*/
padding: 0px 0px 20px;
}
#foot .container .qrcode{ position:absolute;float:none;right:50px;top:10px;}
}
@media only screen and (max-width: 780px){
#foot .copyright{
padding: 10px 0px 25px;
}
#foot .container{ padding:50px 0 0 0;}
#quality>.container>.text img{
width: 100%;
}
/*A默认样式*/
#navpart .nav>a{
border-right: 1px solid #ebeaea;
background-color: #fff;
background-image: unset;
}
#navpart .nav>a:last-child{
border-right:none;
}
#navpart .nav>a>.txt{
color: #27999f;
}
#navpart .nav>a>.ico>img{
top: 0px;
}
/*A选中样式*/
#navpart .nav>a.A{
box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
background-image: linear-gradient(120deg , #27999f, #3d98e9);
/*background:#27999f; */
/*border:1px solid #27999f; */
/*color:#fff;*/
}
#navpart .nav>a.A>.ico>img{top:-60px;}
#navpart .nav>a.A>.txt{
color: #fff;
}
}
@media only screen and (max-width: 520px){
#foot .container{ padding-top:20px;}
#foot .container .logo img{width: 160px;}
#foot .container .logo img.logo{
/*width:100px;*/
width: 160px;
}
#foot .container .qrcode .text span{
color: #fff;
}
#foot .container .contact p{ padding:2px 0; font-size:15px;display: flex;}
#foot .container .qrcode{display:flex;}
#foot .copyright a{ display:block;}
}
@media only screen and (max-width: 640px){
#foot .container .qrcode{right: 8px;}
}
.application .news-box{
display: flex;
flex-wrap: wrap;
}
.application .news-box .news-box-item{
width: 47.5%;
background: #fff;
padding: 20px 10px;
box-shadow: 0 0 5px 1px #ccc;
margin-right: 2%;
margin-bottom: 2%;
}
.application .news-box .news-box-item:nth-child(2n){margin-right:0;}
.application .news-box .news-box-item>a{
display: flex;
}
.application .news-box .news-box-item>a>.img{width:50%;display: flex;}
.application .news-box .news-box-item>a>.img>img{max-width:100%;width:100%;object-fit: contain;}
.application .news-box .news-box-item>a>.text{width: 50%;padding-left: 3%;text-align: left;}
.application .news-box .news-box-item>a>.text>p{
margin: 10px 0;
line-height: 32px;
font-size: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (max-width: 767px) {
.application .news-box .news-box-item{width:100%;}
.application .news-box .news-box-item>a>.img{width:100%;}
.application .news-box .news-box-item>a{flex-direction: column;}
.application .news-box .news-box-item>a>.text{padding-top: 5%;width:100%;}
.application .news-box .news-box-item:nth-child(2n){margin-right:0}
.application .news-box .news-box-item{margin-right:0}
.application .news-box .news-box-item>a>.text>h2{text-align:center;}
}