﻿body,div,dd,dl,dt,h1,h2,h3,h4,h5,html,img,li,p,ul,em,i,input,textarea,form{margin:0; padding:0;-webkit-tap-highlight-color: transparent;}
body{ color:#333;font:14px Microsoft YaHei,Arial;overflow-x:hidden; background:#fff}
img{border:none; vertical-align: bottom;}
em,i{ font-style:normal}
ul,li{list-style: none}
a{ color:#333; text-decoration:none;}
a:hover,.product ul li .desc h4 a:hover{ text-decoration:none; cursor: pointer;color:#2f6b8f;}
.clearfix:after,.wrap:after,.guide:after,.contact .bd .info ul li:after,.ny:after,a.more:after,.product ul:after{content: ""; display: block;clear: both;}
.clearfix{zoom:1; clear:both;}
h2{ font-weight:normal; font-size:36px;}
h3{ font-weight:normal; font-size:20px; }
h4{ font-weight:normal; font-size:16px;}
.fl{ float:left}
.fr{ float: right}
@font-face {
    font-family: 'HelveticaNeue-ThinExt';
    src: url('../fonts/HelveticaNeue-ThinExt.eot');
    src:url('../fonts/HelveticaNeue-ThinExt.woff') format('woff'), url('../fonts/HelveticaNeue-ThinExt.ttf') format('truetype'), url('../fonts/HelveticaNeue-ThinExt.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.wrap{ margin:0 auto;padding:96px 0}
.ny{ margin:0 auto;padding:60px 0 90px; position:relative}
.head{height:90px;position:fixed;top:0;left:0;right:0;z-index:999;color:#fff;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s;}
.head .wrap,.mhead.wrap{padding:0}
.head.on,.head:hover{background-color:#36e4c6}
.head.fixed{height:70px;background-color:#36e4c6;-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);-moz-box-shadow:0 0 10px rgba(0,0,0,.2);-ms-box-shadow:0 0 10px rgba(0,0,0,.2);-o-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2)}
.head a{color:#fff}
.head.fixed a,.head.on a,.head:hover a{/*color:#333*/}
.logo{float:left;height:90px;line-height:90px;overflow:hidden}
.head.fixed .logo{height:70px;line-height:70px}
.logo a{display:block}
.logo img{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}
.head.fixed .logo img{ width:183px; height:48px}
.head.on .logo .img1,.head:hover .logo .img1,.logo .img2{display:none}
.head.on .logo .img2,.head:hover .logo .img2{display:inline-block}
.head.fixed .logo .img1{display:none}
.head.fixed .logo .img2{display:inline-block}
.head.fixed .nav{margin-top:10px}
.head .nav{float:right;margin-top:20px}
.head .nav ul{float:left; list-style:none; margin:0; padding:0}
.head .nav li{float:left;margin:0 32px;list-style:none; padding:0; position:relative}
.head .nav li a{ text-decoration:none}
.head .nav .v1{display:block;font-size:16px;line-height:50px;padding-bottom:10px;overflow:hidden;position:relative}
.head:hover .nav li.on .v1,.head:hover .nav li:hover .v1,.nav li.on .v1,.nav li:hover .v1{color:#2f6b8f}
.head .nav .box{position:absolute;top:70px;background-color:rgba(250,250,250,1);padding:20px 0 30px;display:none;border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.head.fixed .nav .box{top:100%;}
.head .nav .box1{ width:670px;left:-260px;}
.head .nav .box2{ width:142px;left:-30px;}
.head .nav dl{ float:left; box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box}
.head .nav dl dt{ border-bottom:1px solid #e4e4e4; color:#333; font-size:17px; line-height:54px; margin-bottom:12px}
.head .nav dl dd{ line-height:36px; margin:0; padding:0; font-size:15px}
.head .nav dl dd a{ color:#666}
.head .nav .dl-e dt a:hover{ color:#2f6b8f}
.head .nav .dl-d{ width:33.3333%;padding:0 34px;}
.head .nav .dl-e{ width:100%; text-align:center}
.mhead{ height:50px; background:#fff; z-index:40;zoom: 1; display:none}
.mhead .logo{display:block;height:50px;line-height:50px; float:left}
.mhead a{ display:block}
.mhead .logo a img{display:inline-block;vertical-align:middle;width:110px;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}
.mhead .right{float:right;width:55%;height:50px;}
.mhead .right .lines{position:relative;float:right;margin:16px 0 0 3px;width:26px;height:22px;cursor:pointer}
.mhead .right .lines p{position:absolute;left:0;width:24px;height:3px; line-height:2px;border-radius:2px;background-color:#9e9e9e;-webkit-transition:all .8s;transition:all .8s; overflow:hidden; margin:0; padding:0}
.mhead .right .lines p:nth-child(1){top:0;-webkit-transition:all .5s;transition:all .5s;-webkit-transform:rotateZ(0);transform:rotateZ(0);-webkit-transform-origin:left top;transform-origin:left top;-ms-transform-origin:left top;-ms-transform:rotateZ(0);-ms-transition:all .5s}
.mhead .right .lines.cur p:nth-child(1){-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
.mhead .right .lines p:nth-child(2){top:8px;-webkit-transition:all .5s;transition:all .5s}
.mhead .right .lines.cur p:nth-child(2){opacity:0}
.mhead .right .lines p:nth-child(3){top:16px;-webkit-transition:all .5s;transition:all .5s;-webkit-transform:rotateZ(0);transform:rotateZ(0);-webkit-transform-origin:left bottom;transform-origin:left bottom;-ms-transform-origin:left bottom;-ms-transform:rotateZ(0);-ms-transition:all .5s}
.mhead .right .lines.cur p:nth-child(3){-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}
.mhead .nav{position:absolute;top:50px;left:0;z-index:1000;display:none;box-sizing:border-box;padding:15px;width:100%;background-color:#fff; height:100%; border-top:1px solid #e7e7e7}
.mhead .nav ul{ list-style:none; margin:0; padding:0}
.mhead .nav ul li{border-bottom:1px solid hsla(0,0%,81%,.5);list-style:none;margin:0; padding:0}
.mhead .nav ul li a{ text-decoration:none}
.mhead .nav ul li .tit{display:block;padding:10px 10px; color:#333;font-size:16px;line-height:2; position:relative}
.mhead .nav ul li .tit i{position: absolute;right: 6px;top:18px;background: url(../images/nav-jia.png) no-repeat center;width: 16px;height:16px;  -webkit-transition: .5s;  -moz-transition: .5s;  -ms-transition: .5s;  -o-transition: .5s;  transition: .5s;}
.mhead .nav ul li.on .tit{color:#2f6b8f}
.mhead .nav ul li.on .tit i{background:url(../images/nav-jian.png) no-repeat center}
.mhead .nav ul li.on li .tit{ color:#333}
.mhead .nav ul li.on li .tit i{background:url(../images/nav-jia2.png) no-repeat center}
.mhead .nav ul li li .tit{ padding: 8px 20px;}
.mhead .nav ul li.on li.on .tit{ color:#2285ed}
.mhead .nav ul li.on li.on .tit i{background:url(../images/nav-jian2.png) no-repeat center}
.mhead .nav ul li ul li li{ padding:6px 30px; font-size:13px}
.mhead .nav ul li .box{display:none;padding:10px 0;border-top:1px solid hsla(0,0%,81%,.5)}
.mhead .nav ul li .box a{display:block;color:#666;font-size:14px;line-height:2}
.mhead .nav ul li:last-child{border-bottom:0}
.hover-img{display: block; position: relative; overflow: hidden;  text-align: center;}
.hover-img i{position: absolute;left: 50%; margin-left: -19px; top: 50%; margin-top: -19px;opacity: 0; -webkit-transform: scale(1.2);transform: scale(1.2); -webkit-transition: all .5s ease-out;
transition: all .5s ease-out;z-index: 3;width:38px; height:38px; background:url(../images/more.png) no-repeat;}
.hover-img:hover i{opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
.hover-img:after{content: "";display: block;position: absolute;left: 0;top: 0; width: 100%;height: 100%; opacity: 0;-webkit-transform: scale(1.2); transform: scale(1.2);-webkit-transition: all .5s ease-out; transition: all .5s ease-out;background: rgba(0,0,0,.3);}
.hover-img:hover:after{opacity: 1;-webkit-transform: scale(1); transform: scale(1);}
.hd{ text-align:center; margin-bottom:44px}
.hd p{ color:#666; padding-top:5px; font-family:HelveticaNeue-ThinExt}
.foot{ padding:44px 0 34px; line-height:24px}
.link{ padding:1px 0 1px; line-height:24px}
.pcBanner{ height:700px;}
.pcBanner .swiper-slide {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;}
.pcBanner .swiper-slide img{ width:100%}
.pcBanner .page1 { position: absolute; bottom: 20px;text-align: center;z-index: 10;}
.pcBanner .page1 .swiper-pagination-bullet {width: 6px; height: 6px; margin: 0 8px 3px; background:#fff;opacity:1;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%; filter: alpha(opacity=100);box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.pcBanner .swiper-pagination-bullet.swiper-pagination-bullet-active {opacity: 1; filter: alpha(opacity=100); width:12px; height:12px; border:1px solid #fff; background: none; margin-bottom:0}
.mBanner{ display:none; width:100%; height:409px}
.mBanner .page3 .swiper-pagination-bullet{ width: 6px; height: 6px; margin: 0 6px 1px; background:#fff;opacity:1;-moz-border-radius: 100%;-webkit-border-radius:100%;border-radius: 100%; filter: alpha(opacity=100);box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.mBanner .swiper-pagination-bullet.swiper-pagination-bullet-active {opacity: 1; filter: alpha(opacity=100);width:8px; height:8px; border:1px solid #fff; background: none; margin-bottom:0}
.about{ padding:116px 0}
.about .tx{ width:50%; float:left;}
.about .tit{ margin-bottom:60px; padding-top:80px}
.about p{ font-size:16px; line-height:36px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;}
.about .pic{ float:right; width:45%}
.about .pic img{ width:100%}
.contact{ background:url(../images/index_27.jpg) center 0 no-repeat; font-size:16px; height:682px; overflow:hidden}
.contact .hd{ margin-top:-20px}
.contact .bd .info{ width:46%; float:left}
.contact .bd .message{ width:46%; float: right}
.contact .bd .info .area_l{ width:200px; float:left;}
.contact .bd .info .area_r{ float:right}
.contact .wx{ text-align:center; margin-bottom:46px; padding-top:30px}
.contact .wx .pic{ border:1px solid #a4a4a4; width:135px; height:135px; margin:0 auto 14px}
.contact .wx .pic img{ width:100%}
.contact .share{ text-align:center}
.contact .share p{ margin-bottom:17px}
.contact .share a{ width:54px; height:54px; border:1px solid #36e4c6; margin:0 5px; display:inline-block;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;}
.contact .share a i{ width:30px; height:26px; background:url(../images/index_03.png) no-repeat; display:inline-block; margin-top:14px}
.contact .share a:hover{border:1px solid #36e4c6;}
.contact .share a:nth-child(2) i{ background-position:0px 0}
.contact .share a:nth-child(3) i{ background-position:-30px 0}
.contact .share a:last-child i{background-position:-60px 0}
.contact .share a:hover:nth-child(2) i{background-position:0px -26px}
.contact .share a:hover:nth-child(3) i{ background-position:-30px -26px}
.contact .share a:hover:last-child i{background-position:-60px -26px}
.contact .bd .info ul li{ margin-bottom:30px}
.contact .bd .info ul li .icon{ background:url(../images/index_25.png) no-repeat; width:99px; height:101px; text-align:center; float:left; margin-right:26px}
.contact .bd .info ul li .icon i{ background:url(../images/index_07.png) no-repeat; width:36px; height:38px; display:inline-block; margin-top:31px}
.contact .bd .info ul li:nth-child(2) .icon i{ background-position:0 -38px}
.contact .bd .info ul li:last-child .icon i{background-position:0 -76px}
.contact .bd .info ul li .tx{ float:left}
.contact .bd .info ul li .tx h3{ font-family:Arial; margin-bottom:14px; padding-top:22px}
.contact .message ul li{ margin-bottom:26px}
.contact .message ul li:last-child{ margin:0}
.contact .message ul li input[type=number], .contact .message ul li input[type=text], .contact .message ul li textarea{width: 100%;padding: 12px 20px; border: none; border-bottom: #949494 solid 1px; background: none; font-size: 16px;outline: 0; font-family:Microsoft YaHei}
.contact .message ul li textarea{ height:84px}
.contact .message ul li input[type=submit]{ width:152px; height:46px; color:#fff; font-size:18px; font-family:Microsoft YaHei; border:0; background:#2f6b8f; cursor:pointer}
.search{ height:571px; background:url(../images/index_06.jpg) center 0 no-repeat}
.search .wrap{ padding:70px 0}
.guide{ width:1010px; margin:0 auto 46px}
.guide p{text-align: left; padding-left: 90px; min-height: 20px; margin-bottom: 15px;}
.guide p span{float: left; margin-left: -90px;}
.guide p a { margin-right: 28px;display: inline-block;line-height: 25px;}
.guide p a:hover{ text-decoration:underline}
.search .box{ width:771px; height:53px; margin:0 auto 66px;border:1px solid #636363;}
.search .inp{  background:#fff; border:0; padding:13px 13px; float:left; line-height:27px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box; width:83%}
.search .btn{ width:17%; height:53px; background:#2f6b8f; border:0; font-size:18px; color:#fff; cursor:pointer}
.search ul{width:1200px; margin:0 auto}
.search ul li{ width:24%; float:left;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box; padding-left:6%}
.search ul li img{ float:left; margin-right:12px}
.search ul li .tx{ float:left}
.search ul li .tx h4{ padding-top:10px}
.search ul li .tx p{ color:#888}
.product.wrap{ padding-bottom:54px}
.product ul{margin-left:-3%}
.product ul li{ width:30.333%; float:left; margin:0 0 36px 3%}
.product ul li .pic{ width:100%; overflow:hidden}
.product ul li .pic img{ width:100%; display:block}
.product ul li .desc{ padding:24px 18px}
.product ul li .desc h4{ margin-bottom:10px}
.product ul li .desc h4 a{ font-weight:bold; color:#36e4c6}
.product ul li .desc p{ line-height:21px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden; color:#727171}
.artist{ background:#fafafa}
.artist .swiper-container{ width:100%;}	
.artist .swiper-slide,.teamList ul li{ text-align:center;}
.artist .pic,.teamList ul li .pic{ width:150px; height:150px;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%; overflow:hidden; }
.artist .pic{margin:0 auto 36px}
.teamList ul li .pic{margin:0 auto 20px}
.artist .pic img,.teamList ul li .pic img{ width:100%; display:block}
.artist h3,.teamList ul li h3{ margin-bottom:8px}
.artist .post,.teamList ul li .post{ color:#999; position:relative;}
.artist .post:after,.teamList ul li .post:after{content: ''; position: absolute;  left: 50%;width: 30px; height: 1px;background: #878787; margin-left: -15px;}
.artist .post:after{bottom: -25px;}
.teamList ul li .post:after{bottom: -16px;}
.artist .desc,.teamList ul li .desc{ line-height:24px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; color:#666; padding:42px 42px 0}
.artist .desc{padding-top:42px;}
.teamList ul li .desc{padding-top:30px;}
.artist .swiper-button-next{right:0;background:url(../images/index_09.png) no-repeat}
.artist .swiper-button-prev{left: 0; background:url(../images/index_08.png) no-repeat}
.teamList ul li{ width:33.3333%; float:left; margin-bottom:50px}
.head .nav dl dd a,.artist h3 a,.teamList ul li h3 a,.product ul li .desc h4 a,.leftBar dl dd a,.newsList ul li h4 a{-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}
.head .nav dl dd a:hover,.artist h3 a:hover,.teamList ul li h3 a:hover,.product ul li .desc h4 a:hover,.leftBar dl dd a:hover,.newsList ul li h4 a:hover{ margin-left:4px; color:#2f6b8f}
@media screen and (min-width:1560px){
.wrap,.ny{width:1500px;min-width:1500px;}
.artist .swiper-container{ width:1400px; margin:0 auto}	
}
@media (max-width: 1559px){
.wrap,.ny{width:1200px;min-width:1200px;}
.contact .bd .info{ width:50%;}
.contact .bd .message{ width:44%;}
.about .tit{ padding-top:40px}
}
@media handheld, only screen and (max-width: 1140px){
.wrap{width:96%;min-width:96%;overflow:hidden; padding:60px 0}
.ny{width:96%;min-width:96%;overflow:hidden; padding:40px 0 60px}
.head{ display:none}
.mhead{ display:block}
.hd{ text-align:center; margin-bottom:24px}
.hd p{ font-size:12px;padding-top:0px;}
.foot{ padding:20px 0 14px; line-height:24px}
.contact{ height:auto}
.contact .hd{ margin-top:0}
.contact .bd .info .area_l{ display:none}
.contact .bd .info {width: 51%;}
.contact .bd .info ul li .icon{ margin-right:14px;}
.search{ height:390px;}
.search .wrap{ padding:50px 0}
.guide{ width:100%; margin:0 auto 26px}
.search .box{ width:100%; height:44px; margin:0 auto 0;}
.search .inp{ line-height:18px;width:78%}
.search .btn{ width:22%; height:44px; font-size:16px}
.search ul{width:100%; display:none}
.product ul li{ margin:0 0 16px 3%}
.product.wrap{ padding-bottom:20px}
.pcBanner{ display:none}
.mBanner{ display:block; height:940px}
.about{ padding:70px 0 60px}
.about .tx{ width:100%}
.about .tit{margin-bottom:30px; padding-top:0px}
.about .tit img{ width:55%}
.about p{ margin-bottom:30px}
.about .pic{ width:100%}
}
@media screen and (max-width:480px){
body{ width:100%;}	
.wrap{width:92%;min-width:92%;overflow:hidden;padding:50px 0}
.ny{width:92%;min-width:92%;overflow:hidden;padding:40px 0 50px}
h2{ font-weight:normal; font-size:26px;}
h3{ font-weight:normal; font-size:20px; }
h4{ font-weight:normal; font-size:16px;}
.contact{ font-size:14px; background-size:650%}
.contact .bd .message{ width:100%}
.contact .bd .info {width: 100%;}
.contact .bd .info .area_l{ display:none}
.contact .bd .info .area_r { width:100%}
.contact .bd .info ul li{ margin-bottom:10px}
.contact .bd .info ul li .icon{ width:70px; height:71px; margin-right:14px; background-size:70px 71px}
.contact .bd .info ul li .icon i{ width:26px; height:27px;margin-top:22px; background-size:26px 82px}
.contact .bd .info ul li:nth-child(2) .icon i{ background-position:0 -28px}
.contact .bd .info ul li:last-child .icon i{background-position:0 -56px}
.contact .bd .info ul li .tx{ width:calc(100% - 93px)}
.contact .bd .info ul li .tx h3{ margin-bottom:4px; padding-top:14px}
.contact .message ul{ padding-top:10px}
.contact .message ul li{ margin-bottom:3px}
.contact .message ul li input[type=number], .contact .message ul li input[type=text], .contact .message ul li textarea{font-size: 14px;}
.contact .message ul li textarea{ height:56px}
.contact .message ul li input[type=button]{ width:100%; height:40px;font-size:16px; margin-top:10px}
.foot{ padding:20px 0 14px; line-height:24px}
.foot .fr{ width:100%}
.search{ height:auto}
.product ul{margin-left:0%}
.product ul li{ width:100%; margin:0 0 10px 0%}
.artist .pic{ margin:0 auto 26px}
.teamList ul li{ width:100%;margin-bottom:40px}
.pcBanner{ display:none}
.mBanner{ display:block;height:392px}
.about{ padding:60px 0 50px} 
.about .tit img{ width:85%}
.about p{ font-size:14px; line-height:32px; margin-bottom:30px}
}