@charset "utf-8";
/* CSS Document */
html, body {font-size: 12px;margin: 0px;padding: 0px;text-decoration: none;font-family: "微软雅黑";background: #fff;text-align: center;-webkit-text-size-adjust: none;}
a {	color: #666666;text-decoration: none;outline: 0px none; star:expression(this.onFocus=this.blur());}
a:hover, a:active { color: #02a156;}
* { margin: 0px;padding: 0px;list-style: none;}
table {	border-collapse: collapse;}
ul, li {list-style: none;border: 0 none;padding: 0px;}
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;background: none;width: inherit !important;	height: inherit !important;}
#noData, .noData {color: #ccc;font-size: 14px;text-align: left;padding: 50px 0px;}
.fl-left{ float:left;}
.fl-right{ float:right;}

/*   

头部

-----------------------------------------------------------------*/
#head { position:fixed; z-index:999; width:100%;height: 80px;background: #fff;box-shadow:0px 3px 5px rgba(0,0,0,.3);margin: 0px auto;}
#head .logo{ position:absolute; left:65px; top:15px; text-align:left;}
#head .menu{ position:absolute; right:240px; height:80px; line-height:80px;}
#head .menu>li{float:left; position:relative; text-align:center; padding:0px 30px; background:url("../images/menu-bar.png") no-repeat; background-position:center right;}
#head .menu>li:last-child{ background:none !important;}
#head .menu>li:after{position:absolute; left:20%; width:0; height:2px; bottom:10px; font-size:0; background:#20bb72; content:''; display:block; transition:all .18s;}
#head .menu>li.A:after{width:60%;}
#head .menu>li>a{font-size:16px; color:#333; line-height:60px; display:inline-block; transition:line-height .35s,height .35s,color .25s;}
#head .menu>li.A>a{color:#20bb72;}
#head .menu>li>div{min-width:160px; background:#20bb72; box-shadow:0px 2px 3px rgba(0,0,0,.2); position:absolute; left:0; top:80px; display:none; transition:top .35s;}
#head .menu>li>div>a{display:block; height:45px; line-height:44px; text-align:left; border-bottom:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.8); padding:0 50px 0 20px; font-size:13px; transition:all .35s; white-space:nowrap; position:relative; overflow:hidden;}
#head .menu>li>div>a:after{content:''; display:block; width:20px; height:20px; position:absolute; background:url(../images/arrow.png?6) no-repeat center center; right:35px; top:12px; filter:alpha(opacity=0); opacity:0; transition:all .5s;}
#head .menu>li>div>a:last-child{border-bottom:0px none;}
#head .menu>li>div>a:hover{background:#ebc431; color:rgba(255,255,255,1);}
#head .menu>li>div>a:hover:after{right:20px; filter:alpha(opacity=60); opacity:.6;}
#head .menu>li>div>a:last-child:hover{border-bottom:0px none;}
#head .btn{ position:absolute; right:65px; top:22px; text-align:right;}
#head .btn a{ display:inline-block; float:right; width:66px; height:34px; line-height:34px; margin-left:1px; text-align: center; transition:all .35s;}
#head .btn .btn-search{ background:#a9a9a9;}
#head .btn .btn-search img{ width:auto; height:16px;}
#head .btn .language{ background:#20bb72; color:#fff; font-size:14px;}
#head .btn a:hover{ opacity:.8;}
#head .btnWap{ display:none;}
#menuWap{ display:none;}
#search{ display:none; position:fixed; z-index:99; top:80px; right:132px; width:400px; padding:20px 0px; background:#20bb72;}
#search form{ width:80%; margin:0px auto;}
#search input[type="text"]{float:left;height:40px;line-height:40px;padding-left:30px;width:80%;border:0px; font-family:微软雅黑; background:#fff;color:#666;box-sizing:border-box;overflow:hidden;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666;}
#search button{	float:left;width:20%;height:40px;border:none;background: #f4c900 url(../images/go.png) no-repeat center center;background-size:auto 100%;color:#fff;cursor:pointer;box-sizing:border-box;overflow:hidden;}

@media (min-width:960px) and (max-width:1480px){
  #head .menu>li{padding:0px 20px;}
}

@media only screen and (max-width: 1380px) {
  #head .logo img{ height:32px;}
  #head .menu>li{padding:0px 16px;}
  #head .menu>li>a{font-size:15px;}
}

@media only screen and (max-width: 1200px) {
  #head{ height:60px;}
  #head .logo{ left:20px; top:12px;}
  #head .logo img{  height:30px; width:auto;}
  #head .menu{ display:none;}
  #head .btn{ display:none;}
  #head .btnWap{ display:block; position:absolute; right:0; top:0; z-index:99; text-align:right;}
  #head .btnWap a{ display:inline-block; padding:0px 3px; height:60px; line-height:60px;}
  #head .btnWap a img{ height:20px; width:auto;}
  #head .btnWap .btn-menu{ background:#666; width:60px; text-align:center;}
  #head .btnWap .btn-menu img{ height:35px;}
  #menuWap {display:block;position:fixed;z-index: 1000;right: -100%;top: 0px;width: 100%;height: 100%;background: rgba(0,0,0,.4);}
  #menuWap .close {position: absolute;z-index: 99;right: 20px;top: 20px;cursor: pointer;}
  #menuWap .close img { width: 20px; height: auto;}
  #menuWap ul {position: absolute;z-index: 1;right: 0px;top: 0px;width: 70%;height: 100%; padding: 15% 0px;background: #fff; box-shadow: 0px 2px 8px rgba(0,0,0,.3); overflow: hidden;}
  #menuWap ul>li { position:relative;display: block;width: 78%;padding: 15px 0px;text-align: left;margin: 0px auto;border-bottom: 1px solid #eee;}
  #menuWap ul>li img{position:absolute;z-index:9;right:10px;top:18px;width:18px;height:auto;}
  #menuWap ul>li>a {display:block; font-size: 14px;padding:0px 5px;}
  #menuWap ul>li.A>a{ color:#20bb72 !important;}
  #menuWap ul>li>div{ display:none; padding:10px 0px;}
  #menuWap ul>li>div a{display:block;padding:5px;font-size:12px; color:#999;}
  #menuWap .tel{ border-bottom:0px; color:#02a156; font-size:18px; font-weight:bold; padding-left:55px;}
  #menuWap .tel img{ left:20px;top:12px; width:30px; right:auto;}
  #search{ top:60px; right:0; width:100%;}
}

@media only screen and (max-width: 360px) {
  #head{ height:50px;}
  #head .logo{ top:12px;}
  #head .logo img{  height:25px;}
  #head .btnWap a{ height:50px; line-height:50px;}
  #head .btnWap .btn-menu{ width:50px;}
  #head .btnWap .btn-menu img{ height:32px;}
  #search{ top:50px;}

}

/* end*/







/*

banner

-----------------------------------------------------------------*/
#banner { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; margin: 0px auto;}
#banner .swiper-pagination-bullet{ width:50px; height:3px; border-radius:0px; background:rgba(0,0,0,.5);}
#banner .swiper-pagination-bullet-active{ background:rgba(236,0,0,1);}
#banner{height:auto; overflow:hidden;}
#banner .swiper-container{width:100%; height:100%;}
#banner .swiper-slide{width:100%; height:100%; overflow:hidden; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
#banner .swiper-slide img{max-width:none;}
#banner .mc-box{ position:absolute; z-index:99; left:50%; width:1200px; margin-left:-600px; text-align:right;}
#banner .mc-box .wrap{ width:400px; float:right; text-align:left; position:relative;}
#banner .mc-box .ad-shape{ position:absolute; z-index:1; left:0; top:0; width:70px; height:70px; background:#02a156;}
#banner .mc-box .ad-letter{ position:absolute; z-index:2; left:16px; top:-10px;font-size:95px; font-weight:bold; font-family:Arial; color:#fff;}
#banner .mc-box .ad-title{position:absolute; z-index:3; left:100px; top:0; font-size:22px; font-weight:bold; color:#02a156;}
#banner .mc-box .ad-slogan{position:absolute; z-index:4; left:100px; top:36px; font-size:27px; color:#fff;}
#banner .mc-box1{ position:absolute; z-index:99; left:50%; width:1200px; height:800px; margin-left:-600px;}
#banner .mc-box1 .pro{ position:absolute; z-index:9; left:0; top:220px;}
#banner .mc-box1 .probg{ position:absolute; z-index:2; left:0; top:0;}
#banner .mc-box1 .titCN{ position:absolute; z-index:9; right:0; top:350px; width:400px; text-align:left; font-size:36px; font-weight:bold; color:rgba(2,161,86,1);}
#banner .mc-box1 .titEN{ position:absolute; z-index:9; right:0; top:410px; width:400px; text-align:left; font-size:28px; color:rgba(0,0,0,.3);}
#banner .mc-box1 .view{position:absolute; z-index:9; right:0; top:470px; width:400px; text-align:left;}
#banner .mc-box1 .view a{ display:inline-block; padding:8px 32px; background:rgba(2,161,86,1); border:2px solid rgba(2,161,86,1); border-radius:5px; text-align:center; color:#fff; font-size:14px; transition:all .35s;}
#banner .mc-box1 .view a:hover{ background:rgba(255,255,255,.2); color:rgba(2,161,86,1);transform: translateY(-5px);}
#banner .mc-box2{ position:absolute; z-index:99; left:50%; width:1200px; height:800px; margin-left:-600px;}
#banner .mc-box2 .slogan{ position:absolute; z-index:9; left:0; top:320px; width:400px; font-size:36px; font-weight:bold; color:rgba(2,161,86,1); text-align:left;}
#banner .mc-box2 .slogan span{ display:inline-block; margin-right:20px;}
#banner .mc-box2 .explain{ position:absolute; z-index:9; left:0; top:380px; width:450px; font-size:14px; line-height:25px; color:rgba(0,0,0,.5); text-align:left;}
#banner .mc-box2 .lightningbig{ position:absolute; z-index:2; left:-200px; top:0;}
#banner .mc-box2 .lightningsmall{ position:absolute; z-index:2; left:100px; top:0;}
#banner .mc-box3{ position:absolute; z-index:99; left:50%; width:1200px; height:800px; margin-left:-600px;}
#banner .mc-box3 .hornleft{ position:absolute; z-index:9; left:-50px; top:300px;}
#banner .mc-box3 .hornright{ position:absolute; z-index:9; left:500px; top:420px;}
#banner .mc-box3 .titCN{ position:absolute; z-index:4; left:0; top:350px; width:500px; text-align:left; font-size:36px; font-weight:bold; color:rgba(2,161,86,1);}
#banner .mc-box3 .titEN{ position:absolute; z-index:5; left:0; top:410px; width:500px; text-align:left; font-size:18px; color:rgba(0,0,0,.5);}


@media only screen and (max-width: 900px) {
  #banner .swiper-pagination{ width:100%; bottom:0px; padding:0px 0px 5px 0px; background:rgba(236,0,0,1);}
  #banner .swiper-pagination-bullet{ width:20px; background:rgba(255,255,255,1); opacity:.5;}
  #banner .swiper-pagination-bullet-active{ background:rgba(255,255,255,1); opacity:1;}
  #banner .swiper-button-next, #banner .swiper-button-prev {width: 16px;height: 26px;margin-top: 10px;-moz-background-size: 16px 26px;-webkit-background-size: 16px 26px; background-size: 16px 26px; opacity:.3;}
  #banner{height:250px;}
  #banner .swiper-slide img{flex:none; height:100%;}

  #banner .mc-box1{ width:90%; height:250px; margin-left:-45%;}
  #banner .mc-box1 .pro{ top:100px; text-align:left;}
  #banner .mc-box1 .pro img{ width:50%; height:auto;}
  #banner .mc-box1 .titCN{ top:120px; width:160px;font-size:16px;}
  #banner .mc-box1 .titEN{ top:150px; width:160px; font-size:12px;}
  #banner .mc-box1 .view{ top:180px; width:160px;}
  #banner .mc-box1 .view a{ padding:4px 20px; border-radius:3px; font-size:12px;}

  #banner .mc-box2{ width:90%; height:250px; margin-left:-45%;}
  #banner .mc-box2 .slogan{ left:20px; top:120px; width:240px; font-size:18px;}
  #banner .mc-box2 .slogan span{ margin-right:10px;}
  #banner .mc-box2 .explain{ left:20px; top:150px; width:240px; font-size:12px; line-height:20px;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
  #banner .mc-box2 .lightningbig{ position:absolute; z-index:2; left:-200px; top:0;}
  #banner .mc-box2 .lightningsmall{ position:absolute; z-index:2; left:100px; top:0;}
  #banner .mc-box2 .lightningbig img, #banner .mc-box2 .lightningsmall img{ width:60%; height:auto;}

  #banner .mc-box3{ width:90%; height:250px; margin-left:-45%;}
  #banner .mc-box3 .hornleft{ left:0px; top:140px;}
  #banner .mc-box3 .hornright{ left:200px; top:190px;}
  #banner .mc-box3 .hornleft img, #banner .mc-box3 .hornright img{ width:40%; height:auto;}
  #banner .mc-box3 .titCN{ left:30px; top:160px; width:240px; font-size:16px;}
  #banner .mc-box3 .titEN{ left:30px; top:180px; width:240px;font-size:12px; line-height:16px;}

}

/* end*/




/*

main

-----------------------------------------------------------------*/


#main{ width:100%; margin:0px auto;}
#main .title{ margin:0px auto; text-align:center; padding:60px 0px; border-bottom:1px solid #ebebeb;}
#main .title h2{ display:block; color:#4e4e4e; font-size:24px; font-weight:normal;}
#main .title h3{ display:block; padding:8px 0px; color:#4e4e4e; font-size:14px; font-family:"Arial"; font-weight:normal; text-transform:uppercase; opacity:.5;}
#main .wrap{width:1200px; margin:0px auto;}
#main .url a{ position:relative; display:inline-block; background:#02a156 url("../images/arrow-right.png") no-repeat; background-position: 50% 50%; border:1px solid #02a156; border-radius:5px; width:128px; height:33px; line-height:33px; transition:all .35s;}
#main .url a:after{position:absolute; left:0; top:0; color:#fff; font-size:12px; opacity:0; content:'MORE'; transition:all .35s;}
#main .url a:hover{ border:1px solid #f4c900;background:#f4c900 url("../images/arrow-right.png") no-repeat; background-position: 76% 50%;}
#main .url a:hover:after{ opacity:1; left:25%;}
#main .products{ margin:0px auto;}
#main .products .box-wrap{ width:1200px; margin:0px auto;}
#main .products .box-wrap .swiper-container{ padding:90px 0px;}
#main .products .box-wrap .swiper-slide{ position:relative; height:320px; overflow:hidden;}
#main .products .box-wrap .swiper-slide a:after{ position:absolute; z-index:3; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.6) url("../images/icon-products-arrow.png") no-repeat; background-position:50% 20px; content:''; opacity:0; transition:all .35s;}
#main .products .box-wrap .swiper-slide .name{ position:absolute; z-index:9; left:0; bottom:10px; width:100%; padding-bottom:15px; text-align:center; color:#818181; font-size:16px; transition:all .35s;}
#main .products .box-wrap .swiper-slide .name span{ padding:5px 0px; color:rgba(255,255,255,.5); display:none; font-size:14px; transition:all .35s;}
#main .products .box-wrap .swiper-slide .bg{position:absolute; z-index:6; left:0; bottom:0px; width:100%; height:0; transition:all .35s;}
#main .products .box-wrap .swiper-slide a:hover:after{ background-position:90% 20px;opacity:1;}
#main .products .box-wrap .swiper-slide:hover .name{ padding-bottom:0px; color:#fff;}
#main .products .box-wrap .swiper-slide:hover .name span{ display:block;}
#main .products .box-wrap .swiper-slide:hover .bg{ height:75px;background:#02a156;}
#main .products .box-wrap .btn{ margin:0px auto; padding-bottom:130px; text-align:center;}
#main .products .box-wrap .button-prev{position:relative; display:inline-block;margin-right:2px;cursor:pointer; background:#02a156 url("../images/arrow-left.png") no-repeat; background-position: 50% 50%; border:1px solid #02a156; border-radius:5px; width:128px; height:33px; line-height:33px; transition:all .35s;}
#main .products .box-wrap .button-prev:after{position:absolute; right:0; top:0; color:#fff; font-size:12px; opacity:0; content:'PREV'; transition:all .35s;}
#main .products .box-wrap .button-prev:hover{ border:1px solid #f4c900;background:#f4c900 url("../images/arrow-left.png") no-repeat; background-position: 26% 50%;}
#main .products .box-wrap .button-prev:hover:after{ opacity:1; right:25%;}
#main .products .box-wrap .button-next{position:relative; display:inline-block;margin-left:2px; cursor:pointer; background:#02a156 url("../images/arrow-right.png") no-repeat; background-position: 50% 50%; border:1px solid #02a156; border-radius:5px; width:128px; height:33px; line-height:33px; transition:all .35s;}
#main .products .box-wrap .button-next:after{position:absolute; left:0; top:0; color:#fff; font-size:12px; opacity:0; content:'NEXT'; transition:all .35s;}
#main .products .box-wrap .button-next:hover{ border:1px solid #f4c900;background:#f4c900 url("../images/arrow-right.png") no-repeat; background-position: 76% 50%;}
#main .products .box-wrap .button-next:hover:after{ opacity:1; left:25%;}
#main .lightning{ width:100%; height:680px; margin:0px auto; background:url("../images/lightning-bg.jpg") no-repeat; background-position:top center; background-size:cover cover; overflow:hidden;}
#main .lightning .container { width:580px; margin:0px auto; padding-top:180px;}
#main .lightning .container .title{ position:relative; text-align:left; border:0px !important;}
#main .lightning .container .title:after{ position:absolute; bottom:30px; width:30px; height:1px; background:#bcbcbc; content:'';}
#main .lightning .container .title h2{ color:#02a156;}
#main .lightning .container .title h3{ text-transform:none;}
#main .lightning .container .text{ font-size:14px; color:#666; line-height:24px; text-align:left;}
#main .lightning .container .url{ padding-top:50px;text-align:left;}
#main .lightning .img{ position:relative;width:560px;}
#main .lightning .img .pro{ position:absolute; z-index:6; left:0; top:184px;}
#main .lightning .img .electric{ position:absolute; z-index:3; right:40px; top:87px;}
#main .lightning .img .frame{ position:absolute; z-index:1; right:0; top:236px;}
#main .about{ width:100%; height:560px; background:url("../images/about-bg.jpg") no-repeat; background-position:50% 50%; background-size:cover cover; background-attachment:fixed; margin:0px auto;}
#main .about .title{ border:0px !important;}
#main .about .title h2{ color:#fff;}
#main .about .title h3{ color:#fff;}
#main .about .wrap{ background:#fff; width:1000px; padding:60px 100px;}
#main .about .logo{ width:400px; text-align:center;}
#main .about .container{ width:560px; text-align:left;}
#main .about .container .text{ font-size:14px; color:#999; line-height:25px;}
#main .about .container .url{ padding-top:50px;}
#main .news{ margin:60px auto;}
#main .news .container{ width:1200px; margin:0px auto; padding:100px 0px;}
#main .news .container a{ position:relative; display:block; float:left; width:33%; text-align:left; padding:30px 0px; transition:all .35s;}
#main .news .container a:after{position:absolute; left:20px; bottom:0; width:100px; height:0; background:#02a156; content:''; transition:all .35s;}
#main .news .container a .name{ width:90%; margin:0px auto; font-size:16px; color:#555; padding:5px 0px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#main .news .container a .time{ width:90%; margin:0px auto; padding:5px 0px;color:#aeaeae; font-size:14px;}
#main .news .container a .text{ width:90%; margin:20px auto; font-size:14px; color:#969696; line-height:25px; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
#main .news .container a .img{ width:90%; margin:0px auto;}
#main .news .container a .img img{ width:100%; height:auto;}
#main .news .container a:hover{ box-shadow:0px 0px 8px rgba(0,0,0,.2);transform: translateY(-10px); background:#f9f9f9;}
#main .news .container a:hover .name{ color:#02a156;}
#main .news .container a:hover:after{ height:3px; bottom:-2px;}
#main .news .url{ padding-bottom:60px;}
#main .news .url a{ background:#fff url("../images/arrow-right-gray.png") no-repeat; background-position: 50% 50%; border:1px solid #cdcdcd;}
#main .news .url a:hover{ border:1px solid #f4c900;background:#f4c900 url("../images/arrow-right.png") no-repeat;background-position: 76% 50%;}
#main .partner{ margin:0px auto; background:#f7f7f7; padding:20px 0px 100px 0px;}
#main .partner .title{ border:0px !important;}
#main .partner .box-wrap{ position:relative; width:1200px; padding:10px 0px; margin:0px auto;}
#main .partner .box-wrap .swiper-container{ width:1100px; margin:0px auto;}
#main .partner .box-wrap .swiper-slide img{ width:100%; height:auto;}
#main .partner .box-wrap .swiper-button-next, #main .partner .box-wrap .swiper-button-prev {position: absolute;top: 50%;width: 10px;height: 16px;margin-top: -8px;-moz-background-size: 10px 16px;-webkit-background-size: 10px 16px;background-size: 10px 16px;}





@media only screen and (max-width: 900px) {
  #main .title{ padding:40px 0px;}
  #main .title h2{ font-size:20px;}
  #main .title h3{ padding:5px 0px; font-size:12px;}
  #main .wrap{width:90%;}
  #main .products .box-wrap{ width:90%;}
  #main .products .box-wrap .swiper-container{ padding:50px 0px;}
  #main .products .box-wrap .swiper-slide{ height:auto;}
  #main .products .box-wrap .swiper-slide img{ width:100%; height:auto;}
  #main .products .box-wrap .swiper-slide .name{ bottom:5px; padding-bottom:0px; font-size:14px;}
  #main .products .box-wrap .swiper-slide .name span{ display:none;}
  #main .products .box-wrap .swiper-slide .bg{ display:none;}
  #main .products .box-wrap .btn{ padding-bottom:90px;}
  #main .lightning .container { float:none; width:100%; padding-top:300px;}
  #main .lightning .container .url{ padding-top:20px;text-align:center;}
  #main .lightning .img{ float:none;width:100%;}
  #main .lightning .img .pro{ position:absolute; z-index:6; left:0; top:60px; width:70%; height:auto;}
  #main .lightning .img .electric{ position:absolute; z-index:3; left:50px; right:auto; top:120px;width:70%; height:auto;}
  #main .lightning .img .frame{ position:absolute; z-index:1; right:10px; top:100px;width:70%; height:auto;}

  #main .about{ width:100%; padding-bottom:10px;}
  #main .about .wrap{ background:#eee; width:90%; padding:40px 0px;}
  #main .about .logo{ width:90%; float:none; margin:0px auto 20px auto;}
  #main .about .logo img{ width:80%; height:auto; border-bottom:1px solid #ddd; padding-bottom:20px;}
  #main .about .container{ width:90%; float:none; margin:0px auto;}
  #main .about .container .text{ font-size:14px; line-height:25px;}
  #main .about .container .url{ padding-top:30px; text-align:center;}

  #main .news{ margin:50px auto;}
  #main .news .container{ width:90%; padding:50px 0px;}
  #main .news .container a{ display:block; float:none; width:100%; padding:20px 0px; border-bottom:1px dotted #ddd;}
  #main .news .container a .name{ font-size:14px; color:#02a156;}
  #main .news .container a .time{ font-size:12px;}
  #main .news .container a .img{ display:none;}

  #main .partner .box-wrap{ width:90%;}
  #main .partner .box-wrap .swiper-container{ width:85%; margin:0px auto;}
}


@media only screen and (max-width: 320px){
  #main .products .box-wrap .swiper-slide .name{ bottom:15px;}
  #main .lightning .container .text{ font-size:12px; line-height:20px;}
  #main .about .container .text{ font-size:12px; line-height:20px;}
  #main .news .container a .text{ margin:0px auto; font-size:12px; line-height:20px;}

}



/* end*/










/*

navpart

-----------------------------------------------------------------*/

#navpart{ position:relative; z-index:99; width:100%; margin:0px auto; background:#eee;}
#navpart .btn{ display:none;}
#navpart ul{ position:relative; width:100%; max-width:1200px; height:65px;margin:0px auto; padding:0px;}
#navpart ul li{ display:block; float:left; height:65px; line-height:65px; text-align:center;}
#navpart ul li a{ display:block; padding:0px 15px; color:#666; font-size:16px; transition:all .35s;}
#navpart ul li a:hover{ color:#02a156; background:#f7f7f7;}
#navpart ul li .A{ position:relative; background:#fff !important; color:#02a156 !important;}
#navpart ul li .A:after{ position:absolute; z-index:9; left:0; top:-8px; width:100%; height:8px; background:#02a156; content:'';}
#navpart .w20 li{ width:20%;}


@media only screen and (max-width: 900px){
  #navpart{ width:90%; margin:10px auto; padding:10px 0px; background:#eee;text-align:left; color:#666; font-size:14px;}
  #navpart .btn{ display:block; padding:0px 10px;}
  #navpart .btn img{ position:absolute; right:10px; top:12px; height:16px; width:auto;}
  #navpart ul{ display:none; position:absolute; width:89.4%; left:50%; margin-left:-50%; margin-top:10px; height:auto; padding:5%;background:rgba(255,255,255,.9); border:1px solid #ddd; border-top:0px; box-shadow:0px 3px 3px rgba(0,0,0,.2);}
  #navpart ul li{ height:35px; line-height:35px; background:#eee;}
  #navpart ul li a{ padding:0px !important; font-size:14px;}
  #navpart ul li .A{ position:relative; background:#02a156 !important; color:#fff !important;}
  #navpart ul li .A:after{ display:none;}
  #navpart .w20 li{ width:46%; margin:5px 2%;}

}


/* end*/


/*

location

-----------------------------------------------------------------*/

#location{ width:100%;max-width:1200px; margin:30px auto; padding:30px 0px; color:#999; border-bottom:1px solid #eee;}
#location .title{ width:30%; font-size:25px; font-weight:bold; color:#02a156; text-align:left;}
#location .title img{ height:40px; width:auto; margin-right:3px;}
#location .path{ width:60%; text-align:right; font-size:14px; color:#999;}
#location .path a{ color:#999;}
#location .path a:hover{ color:#02a156;}


@media only screen and (max-width: 900px){
  #location { width:90%;margin:10px auto;padding:10px 0px;}
  #location .title{ width:100%; font-size:18px;}
  #location .title img{ height:25px;}
  #location .path{ display:none;}
}

/* end*/






/*

about

-----------------------------------------------------------------*/

#about{ width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#about .text{ font-size:16px; color:#666; line-height:32px; text-align:left;}
#about .text p{ text-indent:2em;margin-bottom:20px;}

#about .img{ width:auto; margin:0px auto; padding:30px 0px; text-align:left;}
#about .img .l-img{ width:80%; text-align:left;}
#about .img .r-img{ width:19%; text-align:right;}
#about .img .f-img{ margin-bottom:10px;}
#about .img img{ width:100%; height:auto;}


@media only screen and (max-width: 900px){
  #about{ width:90%;padding:30px 0px 100px 0px;}
  #about .text{ font-size:14px; line-height:24px;}
  #about .img .l-img{ float:none; width:98%; margin:0px auto 1% auto;}
  #about .img .r-img{ float:none; width:100%; margin:0px auto;}
  #about .img .f-img { float:left; width:48%; margin:1%;}
}
/* end*/




/*

boss

-----------------------------------------------------------------*/

#boss{ width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#boss .text{  width:65%; font-size:16px; color:#666; line-height:32px; text-align:left;}
#boss .text p{ text-indent:2em;margin-bottom:20px;}

#boss .img{ width:auto; margin:0px auto; text-align:left;}
#boss .img img{ width:auto;}
#boss .pc{ display:block;}
#boss .wap{ display:none;}


@media only screen and (max-width: 900px){
  #boss{ width:90%;padding:30px 0px 100px 0px;}
  #boss .text{ float:none; width:100%; font-size:14px; line-height:24px;}
  #boss .img img{ width:100%;}
  #boss .pc{ display:none;}
  #boss .wap{ display:block;}
}
/* end*/



/*

culture

-----------------------------------------------------------------*/

#culture{ width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#culture .text{  font-size:16px; color:#666; line-height:32px; text-align:left;}
#culture .text p{ text-indent:2em;margin-bottom:20px;}
#culture .img{ margin:30px auto; text-align:left;}
#culture .img img{ width:auto;}


@media only screen and (max-width: 900px){
  #culture{ width:90%;padding:30px 0px 100px 0px;}
  #culture .text{ font-size:14px; line-height:24px;}
  #culture .img img{ width:100%;}
}
/* end*/




/*

honor

-----------------------------------------------------------------*/


#honor {width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#honor .title {color: #02a156;font-size: 16px;font-weight: bold;padding:0px 10px;margin: 0px auto;text-align: left;}
#honor .list {margin: 0px auto; padding: 30px 0px;}
#honor .list a {position: relative;display:inline-block; float:left;width: 18%; height:auto; margin:1%;text-align: center;}
#honor .list a .img { position: relative; display: block;margin: 0px auto;width: 99%;height: auto;overflow: hidden;border: 1px solid rgba(0,0,0,0.1);background: rgba(255,255,255,1);text-align: center;}
#honor .list a .img:after{ position:absolute; left:0; top:0; width:100%; height:100%; content:''; background:rgba(0,0,0,0) url("../images/icon-zoom.png") no-repeat; background-position: top center; background-size:56px auto; opacity:0; transition:all .35s;}
#honor .list a .img img {display: inline-block;width: auto; max-height:130px; margin: 5px auto;}
#honor .list a .name { display: block;width: 90%;font-size: 14px;line-height: 20px;padding: 10px 0px;margin: 0px auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#honor .list a:hover .img:after{background:rgba(0,0,0,.5) url("../images/icon-zoom.png") no-repeat; background-position: center center;background-size:56px auto; opacity:1;}


@media only screen and (max-width: 900px){
  #honor{width:90%;padding:30px 0px 100px 0px;}
  #honor .title{ font-size:14px; padding:0px;}
  #honor .list a {width: 31%;margin:1%;}
}

@media only screen and (max-width: 380px){
  #honor .list a {width: 46%;margin:2%;}
  #honor .list a .name{ font-size:12px;}
  #honor .list a .img img {width:auto;max-width:140px;height:130px;}
}


/* end*/


/*

rd

-----------------------------------------------------------------*/

#rd{ width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#rd .container-fluid {padding: 20px; text-align:left;}
#rd .box {position:relative;margin-bottom: 20px;float: left;width: 285px; overflow:hidden;}
#rd .box img {max-width: 100%; transition: all .35s;}
#rd .box .name{ position:absolute; left:0; bottom:-40px; width:100%; height:40px; line-height:40px; text-align:center; font-size:14px; color:#fff; background:rgba(2,161,86,.8); transition: all .35s;}
#rd .box:hover .name{ bottom:0;}
#rd .box:hover img{ opacity:.9;}


@media only screen and (max-width: 900px){
  #rd{ width:90%; padding:30px 0px 100px 0px;}
  #rd .container-fluid {padding: 10px;}
  #rd .box {margin-bottom: 10px;width:46%;}
  #rd .box .name{ bottom:0px; height:20px; line-height:20px; font-size:12px;}
}

/* end*/




/*

news

-----------------------------------------------------------------*/

#news{ width:100%; max-width:1200px; margin:0px auto; padding:50px 0px;}
#news a{ position:relative; display:block; text-align:left; margin-bottom:50px; transition:all 1s;}
#news a:nth-child(2n){ background:#f3f3f3;}
#news a .time{ position:absolute;width:80px; height:80px; left:300px; top:50%; margin-top:-40px; background:rgba(2,161,86,1); text-align:center; color:#fff; transition:all .35s;}
#news a .time h2{ display:block; padding-top:16px; font-size:24px; font-weight:normal;}
#news a .time h3{ font-size:14px; font-weight:normal;}
#news a .img{ display:block; float:left; width:30%; max-width:360px; overflow:hidden; transition:all .35s;}
#news a .img img{ width:100%; height:auto;}
#news a .text{ float:left; width:60%; max-width:800px; padding-left:5%; transition:all .35s;}
#news a .text .timeWap{ display:none;}
#news a .text .title{ display:block; padding:30px 0px 10px 0px; color:#333; font-size:18px; overflow: hidden; text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#news a .text .describe{ display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; padding:8px 0px; color:#999; font-size:14px; line-height:25px;}
#news a:hover .title{ color:#fff;}
#news a:hover{ transform: translateY(-10px); background:#02a156;background:-moz-linear-gradient(top, #02a156, #2ad453);background:-webkit-gradient(linear, 0 0, 0 bottom, from(#02a156), to(#2ad453));}
#news a:hover .time{ right:310px; left:auto; background:rgba(255,255,255,1); color:#02a156;}
#news a:hover .img{ float:right;}
#news a:hover .text .describe{ color:rgba(255,255,255,.6);}


@media only screen and (max-width: 900px){
  #news{ width:90%;padding:30px 0px;}
  #news a{margin-bottom:10px; padding:0px 8px;}
  #news a .time{ display:none;}
  #news a .img{ display:none;}
  #news a .text{width:100%; float:none; padding:10px 0px;}
  #news a .text .title{ font-size:16px; padding:10px 0px;}
  #news a .text .timeWap{ display:block; color:#02a156; font-size:12px;}
}


@media only screen and (max-width: 380px){
  #news a .text .title{ font-size:14px;}
  #news a .text .describe{ font-size:12px; line-height:20px;}
}


/* end*/



/*

video

-----------------------------------------------------------------*/

#video{ width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#video .media{ width:800px; height:600px; margin:50px auto;}


@media only screen and (max-width: 900px){
  #video{ width:90%;padding:30px 0px 100px 0px;}
  #video .media{ width:90%; height:350px;}
}
/* end*/










/*

products

-----------------------------------------------------------------*/



#products{width:100%; max-width:1200px; padding:50px 0px 100px 0px; margin:0px auto;}
#products .catalog{ margin:0px auto;}
#products .catalog li{ position:relative; display:block; float:left; width:31%; height:700px; margin-bottom:30px; margin-right:3%; border:1px solid #ddd;}
#products .catalog li:nth-child(3n){ margin-right:0px;}
#products .catalog li>a{ display:block;position:relative; }
#products .catalog .img{ width:100%;height: 320px;}
#products .catalog .img img{ width:100%; height:100%;}
#products .catalog .name{ position:relative;font-size:20px; color:#fff; text-align:left; padding:15px 30px; background:#02a156;}
#products .catalog .name img{ position:absolute; right:20px; bottom:15px; display:inline-block; width:70px; height:auto; margin-right:10px; border-radius:100%; box-shadow:0px 2px 5px rgba(0,0,0,.2); background:#fff; transition:all .35s;}
#products .catalog .list{ width:84%; height:200px; padding:20px 0px; text-align:left; font-size:14px; margin:0px auto;}
#products .catalog .list a{ display:block; padding:5px 0px;}
#products .catalog .list a img{ margin-right:5px; width:20px; height:auto; opacity:.3;}
#products .catalog .view{ width:84%; margin:0px auto;padding-top:20px; text-align:left; border-top:1px dotted #ddd;}
#products .catalog .view a{ display:inline-block; width:100px; height:32px; line-height:32px; text-align:center; color:#999; border:1px solid #ddd;border-radius:30px; transition:all .35s;}
#products .catalog .view a:hover{ border:1px solid #02a156; color:#02a156; background:rgba(2,161,86,.1);}
#products .catalog li:hover .name img{ transform:scale(1.2) rotate(360deg);}
#products .products{ margin:0px auto;}
#products .products li {position: relative;display:inline-block; float:left;width: 23%; height:auto; margin:1%;text-align: center;}
#products .products li .img { position: relative; display: block;margin: 0px auto;width: 99%;height: auto; overflow: hidden;border: 1px solid rgba(0,0,0,0.1);background: rgba(255,255,255,1);text-align: center; transition:all .35s;}
#products .products li .img:after{ position:absolute; left:0; top:0; width:100%; height:100%; content:''; background:rgba(0,0,0,0) url("../images/icon-zoom.png") no-repeat; background-position: top center; background-size:56px auto; opacity:0; transition:all .35s;}
#products .products li .img img {display: inline-block;width: 94%;height: auto;max-width:257px; max-height:257px;margin: 3% auto;}
#products .products li .name { display: block;width: 90%;font-size: 14px;line-height: 20px;padding: 10px 0px;margin: 0px auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#products .products li:hover .img{ background:#02a156; border:1px solid #02a156;}



@media only screen and (max-width: 900px){
  #products{width:90%; padding:30px 0px 100px 0px;}
  #products .catalog li{ width:100%; height:auto; margin:0px auto 30px auto; float:none;}
  #products .catalog .list{ display:none;}
  #products .catalog .view{ padding:20px 0px; text-align:left; border-top:0px;}

  #products .products li {width: 31%;margin:1%;}
}



/* end*/


@media only screen and (max-width: 380px){
  #products .products li {width: 46%;margin:2%;}
  #products .products li .name { font-size: 12px;line-height: 20px;}
}





/*

service

-----------------------------------------------------------------*/

#service{ width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#service .text{ width:55%; font-size:16px; color:#666; line-height:32px; text-align:left;}
#service .text p{ text-indent:2em;margin-bottom:20px;}
#service .img{ width:40%; margin:10px auto; text-align:right;}
#service .img img{ width:100%; height:auto;}


@media only screen and (max-width: 900px){
  #service{ width:90%;padding:30px 0px 100px 0px;}
  #service .text{ float:none; width:100%; font-size:14px; line-height:24px;}
  #service .img{ width:100%;float:none;}
  #service .img img{ width:100%; height:auto;}
}
/* end*/




/*

knowledge

-----------------------------------------------------------------*/

#knowledge{ width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#knowledge a{ position:relative; display:block; float:left; width:47.8%; height:130px; margin:1%; border:1px solid #ddd; text-align:left; transition:all .35s;}
#knowledge a .name{ width:90%; margin:10px auto; padding-top:10px;font-size:16px; color:#02a156;}
#knowledge a .text{ width:90%; height:40px; margin:0px auto;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; font-size:14px; line-height:21px; color:#999;}
#knowledge a .time{ position:absolute; right:30px; bottom:0; background:#02a156; color:#fff; font-size:0; width:100px; height:4px; text-align:center; transition:all .35s;}
#knowledge a:hover{ background:#ffffee;transform: translateY(-5px); box-shadow:0px 2px 8px rgba(0,0,0,.1);}
#knowledge a:hover .time{ height:24px; line-height:24px; font-size:12px;}

@media only screen and (max-width: 900px){
  #knowledge{ width:90%;padding:30px 0px 100px 0px;}
  #knowledge a{ float:none; width:100%; height:auto; padding-bottom:20px; margin:0px auto; border:0px; border-bottom:1px dotted #ddd;}
  #knowledge a .name{width:100%;}
  #knowledge a .text{ width:100%;}
  #knowledge a .time{ display:none;}
}

@media only screen and (max-width: 380px){
  #knowledge a .name{ font-size:14px;}
  #knowledge a .text{  font-size:12px; line-height:20px;}
}
/* end*/




/*

complaint

-----------------------------------------------------------------*/

#complaint{position:relative;width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#complaint .text{ color:#666; font-size:14px; line-height:25px; text-align:left;}
#complaint .text strong{ color:#02a156; font-size:16px;}
#complaint .img{ position:absolute; right:0; top:20px;}
#complaint form{ margin:0px auto; text-align:left; width:750px; float:left;}
#complaint form { margin: 0px auto; padding: 20px 0px; text-align: left;}
#complaint form dl { width: 100%; text-align: left; padding: 0px;}
#complaint form dl dt { width: 90px; font-size: 14px; line-height: 30px; color: #666;  text-align: left;}
#complaint form dl dt, #complaint form dl dd { padding: 8px 0px;}
#complaint form dl dt span { color: #ff0000; padding-left: 6px;}
#complaint form dl dd { padding-left: 90px;  margin-top: -40px;}
#complaint form dl dd select { width: auto; font-size: 14px;  font-family: "微软雅黑", Arial, "Arial Narrow";  color: #666;  padding: 5px 20px;  border: 1px solid #ddd;  cursor: pointer;  margin-right: 10px;}
#complaint form dl input, #feedback form dl textarea {padding: 5px 20px;  border: 1px solid #ddd; color: #888;  font-size: 14px; font-family: "微软雅黑";  margin-right: 20px;}
#complaint form dl input { width: 45%; height: 30px;}
#complaint form dl textarea {width: 96%; height: 120px; border: 1px solid #ddd; overflow: auto;  padding: 20px 2%;}
#complaint form dl #checksn { width: 10%;}
#complaint form dl .button input { width: auto; height: 45px; line-height: 45px; border: none; color: #fff; padding: 0px 35px; cursor: pointer; font-weight: bold; background: #666; font-family: "微软雅黑"; font-size: 16px; margin: 15px auto;}
#complaint form dl .button input:hover { background:#02a156;}

@media only screen and (max-width: 900px){
  #complaint{ width:90%;padding:30px 0px 100px 0px;}
  #complaint .text strong{ font-size:14px;}
  #complaint .img{ display:none;}
  #complaint form{ width:100%; float:none;}
  #complaint form dl dt {display: block;width: 100%;}
  #complaint form dl dd { display: block; padding-left: 0px;margin-top: 0px;}
  #complaint form dl dd select { display: block; width: 100%;padding: 10px 2%;margin-bottom: 2%; font-size: 12px;}
  #complaint form dl input, #complaint form dl textarea {width: auto;padding: 10px 2%;border: 1px solid #ddd;color: #888; font-size: 14px;font-family: "微软雅黑";margin-right: 20px;}
  #complaint form dl input { width: 96%; height: 20px;}
  #complaint form dl textarea {width: 96%; height: 120px;overflow: auto; padding: 20px 2%; }
  #complaint form dl #checksn { width: 96%; }
  #complaint form dl .button input{ width:100%;}

}

@media only screen and (max-width: 380px){
  #complaint .text{font-size:12px; line-height:20px;}
  #complaint .text strong{ font-size:12px;}
}
/* end*/





/*

download

-----------------------------------------------------------------*/

#download{ width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#download .item{ position:relative; display:block; padding:0px 20px; border:1px solid #ddd; margin-bottom:2%; text-align:left; transition:all .35s;}
#download .item .ac{ display:block; height:90px;}
#download .item .name{ font-size:16px; color:#02a156; padding-top:20px; width:70%; overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
#download .item .time{ color:#bbb; font-size:12px; padding:5px 0px;}
#download .item .btn{ position:absolute; right:20px; top:14px; background:#02a156; width:60px; height:60px; text-align:center; transition:all .35s;}
#download .item .dowlist{ display:none; padding:20px 0px; border-top:1px dotted #ddd;}
#download .item .dowlist a{ display:inline-block; margin-right:20px;}
#download .item .dowlist a img{ margin-right:5px;}
#download .item .dowlist a:hover{ text-decoration:underline;}
#download .item:hover{ background:#ffffee;transform: translateY(-5px); box-shadow:0px 2px 8px rgba(0,0,0,.1);}
#download .item:hover .btn{ background:#f4c900;}

@media only screen and (max-width: 900px){
  #download{ width:90%;padding:30px 0px 100px 0px;}
  #download .item{ padding:0px 10px; margin-bottom:5%;}
  #download .item .ac{ height:60px;}
  #download .item .name{ font-size:14px;padding-top:10px;}
  #download .item .btn{ right:15px; top:15px; background:#02a156; width:30px; height:30px;}
  #download .item .btn img{ width:100%; height:auto;}
  #download .item .dowlist{ padding:10px 0px;}
  #download .item .dowlist a{ display:block; margin-right:0px; margin-bottom:5px;}
}

@media only screen and (max-width: 380px){
  #download a .name{ font-size:14px;}
  #download a .text{  font-size:12px; line-height:20px;}
}
/* end*/




/*

marketing

-----------------------------------------------------------------*/

#marketing {  width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#marketing .text { font-size: 14px;line-height: 25px;color: #999;padding: 20px 0px; text-align:left;}
#marketing .maps {margin: 0px auto;}
#marketing .maps img{ width:100%; height:auto;}

@media only screen and (max-width: 900px){
  #marketing {  width:90%; padding:30px 0px 100px 0px;}
}

@media only screen and (max-width: 380px){
  #marketing .text { font-size: 12px;line-height: 20px;}
}

/* end*/



/*

case

-----------------------------------------------------------------*/

#case {  width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#case .img{ width:350px; text-align:left;}
#case .list{ width:820px; text-align:left;}
#case .list p{ display:block; float:left; width:33%; padding:10px 0px; text-align:left; color:#666; font-size:14px;}


@media only screen and (max-width: 900px){
  #case{width:90%; padding:30px 0px 100px 0px;}
  #case .img{ display:none;}
  #case .list{ width:100%; float:none;}
  #case .list p{ width:50%;}
}

@media only screen and (max-width: 380px){
  #case .list p{ float:none; width:100%; font-size:12px; padding:8px 0px;}
}

/* end*/





/*

human

-----------------------------------------------------------------*/

#human {  width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#human .text { font-size: 14px;line-height: 25px;color: #666;text-align:left; margin-bottom:30px;}
#human .text p{ margin-bottom:20px;}
#human .img {margin: 0px auto; text-align:left}

@media only screen and (max-width: 900px){
  #human {  width:90%; padding:30px 0px 100px 0px;}
  #human .img img{ width:100%; height:auto;}
}

@media only screen and (max-width: 380px){
  #human .text { font-size: 12px;line-height: 20px;}
}

/* end*/



/*

train

-----------------------------------------------------------------*/

#train {  width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#train .text { width:60%; font-size: 14px;line-height: 25px;color: #666; text-align:left;}
#train .text p{ margin-bottom:20px;}
#train .img { width:35%;text-align:left}
#train .img img{ width:100%; height:auto;}

@media only screen and (max-width: 900px){
  #train {  width:90%; padding:30px 0px 100px 0px;}

}

@media only screen and (max-width: 380px){
  #train .text { font-size: 12px;line-height: 20px;}
}

/* end*/






/*

jobs

-----------------------------------------------------------------*/
#jobs {width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#jobs .list-tr {margin: 0px auto;height: 35px;padding: 5px 0px;background: url(../images/bt-bg.png) repeat-x;background-position: left bottom;border: 1px solid #eee;}
#jobs .list-tr div {display: block;float: left;font-size: 14px;font-weight: bold;color: #333;height: 35px;line-height: 35px;text-align: center;}
#jobs .list-tr .td1 {width: 500px;padding: 0px 30px;text-align: left;border-right: 1px solid #eee;}
#jobs .list-tr .td2 {width: 120px;padding: 0px 20px;border-right: 1px solid #eee;}
#jobs .list-tr .td3 {width: 120px;padding: 0px 20px;border-right: 1px solid #eee;}
#jobs .list-tr .td4 {width: 120px;padding: 0px 20px;border-right: 1px solid #eee;}
#jobs .list-tr .td5 {width: 100px;padding: 0px 20px;}
#jobs .list-td {margin: 0px auto;height: 35px;padding: 5px 0px;color: #666;border-bottom: 1px solid #eee;}
#jobs .list-td.A {background: #02a156;color: #fff;}
#jobs .list-td.A .td1, #jobs .list-td.A .td2, #jobs .list-td.A .td3, #jobs .list-td.A .td4 {border-right: 1px solid rgba(255,255,255,0.3);}
#jobs .list-td.A .td5 .btn {border: 1px solid rgba(255,255,255,0.2) !important;background: rgba(255,255,255,0.1) !important;color: rgba(255,255,255,1) !important;}
#jobs .list-td div {display: block;float: left;font-size: 12px;height: 35px;line-height: 35px;text-align: center;}
#jobs .list-td .td1 {width: 500px;padding: 0px 30px;text-align: left;border-right: 1px solid #fff;}
#jobs .list-td .td2 {width: 120px;padding: 0px 20px;border-right: 1px solid #fff;}
#jobs .list-td .td3 {width: 120px;padding: 0px 20px;border-right: 1px solid #fff;}
#jobs .list-td .td4 {width: 120px;padding: 0px 20px;border-right: 1px solid #fff;}
#jobs .list-td .td5 {width: 100px;padding: 0px 20px;}
#jobs .list-td .td5 .btn {border: 1px solid #eee;display: inline-block;padding: 0px 10px;height: 24px;line-height: 24px;color: rgba(16,159,66,1);cursor: pointer;}
#jobs .list-td .td5 .btn:hover {border: 1px solid rgba(16,159,66,1);background: rgba(16,159,66,1);color: #fff;}
#jobs .list-son {display: none;background: #fffff0;border-bottom: 1px dotted #ddd;padding: 30px;text-align: left;color: #666;}
#jobs .list-son .text{ padding-bottom:20px;}
#jobs .list-son .tag {padding-bottom: 20px;line-height: 21px;}
#jobs .list-son .tag h4 {display: block;padding: 5px 0px;color: #333;}




@media only screen and (max-width: 900px){
  #jobs {width:90%; padding:30px 0px 100px 0px;}
  #jobs .list-tr .td1{ width:65%; padding:0px 5%;}
  #jobs .list-tr .td2,#jobs .list-tr .td3,#jobs .list-tr .td4{ display:none;}
  #jobs .list-tr .td5 {width: 24%;padding: 0px; color:#999; font-size:12px; font-weight:normal;}

  #jobs .list-td .td1 {width:65%; padding:0px 5%;}
  #jobs .list-td .td2,#jobs .list-td .td3,#jobs .list-td .td4{ display:none;}
  #jobs .list-td .td5 {width: 24%;padding: 0px;}
  #jobs .list-td .td5 .btn {padding: 0px 5px;height: 20px;line-height: 20px; background:#02a156; border:1px solid #02a156;color:#fff;}
  #jobs .list-son {padding: 20px;}
}





/* end*/








/*

contact

-----------------------------------------------------------------*/
#contact {width:100%; max-width:1200px; margin:0px auto; padding:50px 0px 100px 0px;}
#contact .container{ margin:0px auto; text-align:left;}
#contact .container .text{ width:650px; text-align:left; line-height:25px; font-size:14px; color:#666;}
#contact .container .text h2{ display:block; font-size:30px; color:#333; padding:10px 0px 30px 0px;}
#contact .container .text p{ margin-bottom:20px;}
#contact .container .img{ width:480px; text-align:left;}
#contact .container .img img{ width:100%; height:auto;}
#contact .maps{ border-top:1px dotted #ddd; margin:20px auto; padding-top:20px;}

@media only screen and (max-width: 900px){
  #contact {width:90%; padding:30px 0px 100px 0px;}
  #contact .container .text{ width:100%; float:none;}
  #contact .container .text h2{ font-size:24px;}
  #contact .container .img{width:100%; float:none;}
}

@media only screen and (max-width: 380px){
  #contact .container .text{ line-height:20px; font-size:12px;}
}


/* end*/









/*

view

-----------------------------------------------------------------*/



#view{width:100%; max-width:1200px; padding:50px 0px 100px 0px; margin:0px auto;}
#view .title{color:#444; font-size:34px; padding:20px 0px;  margin:0px auto; text-align:center;}
#view .time{ color:#ccc; font-size:12px; text-align:center; margin:0px auto;}
#view .text{ margin:0px auto; padding:40px 0px; text-align:left; line-height:25px; color:#666; font-size:14px; border-bottom:1px solid #ddd;}
#view .text p{ margin-bottom:20px;}
#view .text table{ border-left:1px solid #ddd; border-top:1px solid #ddd; max-width:99%; width:auto;}
#view .text table td{ border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:8px;}
#view .text img{ max-width:100%; width:auto;}
#view .showbox{ margin:0px auto; position:relative;}
#view .showbox .swiper-container {width: 600px;height:600px;margin: 20px auto;}
#view .showbox .swiper-slide {text-align: center;font-size: 18px;background: #fff;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;}
#view .showbox .swiper-slide img{ width:100%; height:auto;}
#view .tags{ margin:0px auto; padding:20px 0px; text-align:left;}
#view .tags .tags_title{ text-align:left; color:#02a156; font-size:16px; padding:10px 0px;}
#view .tags .tags_content{ padding:10px 0px; text-align:left; color:#666; font-size:14px; line-height:24px;}
#view .tags .tags_content table{ width:99%; border-left:1px solid #ddd;border-top:1px solid #ddd;}
#view .tags .tags_content td{ border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:10px;}
#view .tags .tags_content img{ max-width:100%; width:auto;}
#view .tags .tags_content tr:first-child{ font-weight:bold;}



#view .btn{ position:relative; padding:30px 0px; text-align:center; margin:0px auto;}
#view .btn a{ display:inline-block; border:1px solid #ddd; border-radius:5px; padding:10px; text-align:center; margin:0px 5px;}
#view .btn a>img{ height:20px; width:auto;}
#view .btn .no{ opacity:.3; background:#eee;}
#view .btn .no img{ -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}
#view .btn .prev_img{ width:350px; float:left; border:0px; border-radius:0px; padding:0px; height:60px; line-height:60px; text-align:left; background:#eee; padding-right:20px;overflow:hidden; transition:all .35s;}
#view .btn .prev_img img{ width:60px; height:60px; margin-right:20px; float:left;}
#view .btn .prev_img:hover{ background:#02a156; color:#fff;}
#view .btn .next_img{ width:350px; float:right; border:0px; border-radius:0px; padding:0px; height:60px; line-height:60px; text-align:right; background:#eee; padding-left:20px;overflow:hidden; transition:all .35s;}
#view .btn .next_img img{ width:60px; height:60px; margin-left:20px; float:right;}
#view .btn .next_img:hover{ background:#02a156; color:#fff;}
#view .btn .back_img{ width:60px; height:60px; line-height:60px; background:#eee; border:0px;border-radius:0px; padding:0px; text-align:center;}
#view .btn .back_img img{ width:30px; height:auto;}
#view .wap{ display:none;}

@media only screen and (max-width: 900px){
  #view{ width:90%;padding:30px 0px 100px 0px;}
  #view .title{font-size:18px;}
  #view .showbox .swiper-container {width: 100%;height:auto;}
  #view .tags .tags_content{ overflow:hidden; overflow-x:auto;}
  #view .tags .tags_content td{ padding:5px;}
  #view .pc{ display:none;}
  #view .wap{ display:block;}
}

@media only screen and (max-width: 380px){
  #view .text{ padding:30px 0px; line-height:20px; font-size:12px;}
  #view .tags .tags_title{ font-size:14px;}
  #view .tags .tags_content{font-size:12px; line-height:20px;}

}

/* end*/






/*

page

-----------------------------------------------------------------*/

#page{ width:100%; max-width:1200px; margin:0px auto; color:#999; padding:0px 0px 100px 0px;}
#page .wap{ display:none;}

@media only screen and (max-width: 900px){
  #page{ width:90%;}
  #page .pc{ display:none;}
  #page .wap{ display:block; font-size:12px;}
}
/* end*/


















/*

foot

-----------------------------------------------------------------*/

#foot{ width:100%; background:#20bb72; margin:0px auto;}
#foot .wrap{ width:100%; max-width:1200px; overflow:hidden; padding:80px 0px; margin:0px auto; background:url("../images/foot-map-bg.png") no-repeat; background-position:right bottom;}
#foot .share{ width:240px; text-align:left;}
#foot .share .bshare-custom a{ padding:0px; width:35px; height:35px; border:1px solid #fff; opacity:.5; transition:all .35s;}
#foot .share .bshare-custom .bshare-sinaminiblog{ background:url("../images/icon-weibo.png") no-repeat; background-size:20px auto;background-position:center center;}
#foot .share .bshare-custom .bshare-qqim{ background:url("../images/icon-qq.png") no-repeat; background-size:20px auto;background-position:center center;}
#foot .share .bshare-custom .bshare-weixin{ background:url("../images/icon-wechat.png") no-repeat; background-size:20px auto;background-position:center center;}
#foot .share .bshare-more{ display:none !important;}
#foot .share .bshare-custom a:hover{ opacity:1; transform: translateY(-3px);}
#foot h3{ display:block; padding:20px 0px; color:#fff; font-size:16px; font-weight:normal;}
#foot .contact{ width:960px; text-align:left;}
#foot .contact .text{ padding-right:55px;}
#foot .contact p{ color:rgba(255,255,255,.5); font-size:12px; padding:3px 0px;}
#copyright{ width:100%; max-width:1200px; padding:30px 0px; position:relative; margin:0px auto;}
#copyright .text{ color:#8d8d8d; font-size:12px; text-align:left;}
#copyright .text a{ color:#8d8d8d;}
#copyright .text a:hover{ color:#02a156; text-decoration:underline;}
#copyright .gotop{ position:absolute; right:0px; bottom:20px;}
#copyright .gotop a{ position:relative; display:block; width:38px; height:38px; overflow:hidden; padding:0px; background:#dcdcdc; border:1px solid #dcdcdc; border-radius:5px; transition:all .35s;}
#copyright .gotop a>img{ position:absolute; top:0; left:0; transition:all .35s;}
#copyright .gotop a:hover{ background:#03a157;border:1px solid #02a156;}
#copyright .gotop a:hover img{ top:-38px;}
#copyright .qrcode{ position:absolute; right:50px; bottom:20px;}
#copyright .qrcode a{ position:relative; display:block; width:38px; height:38px; overflow:hidden; padding:0px; border:1px solid #dcdcdc; border-radius:5px; transition:all .35s;}
#copyright .qrcode a img{ position:absolute; top:0; left:0; transition:all .35s;}
#copyright .qrcode a:hover{ border:1px solid #02a156;}
#copyright .qrcode a:hover img{ top:-38px;}
#copyright .qrcode .qrcode_con{ display:none; position:absolute; right:0;bottom:50px; padding:20px; width:310px; height:170px; text-align:right; background:#fff;box-shadow:0px 3px 5px rgba(0,0,0,.2);}
#copyright .qrcode .qrcode_con p{ display:inline-block; text-align:center; font-size:12px; line-height:18px; color:#888;margin:0px; padding:0px;}
#copyright .qrcode .qrcode_con img{width:150px; height:150px; display:block; margin-bottom:5px;}




@media only screen and (max-width: 900px){
  #foot .wrap{ width:90%; padding:50px 0px;background-size:80% auto;}
  #foot .share{ width:100%;}
  #foot .contact{ width:100%;}
  #foot .contact .text{ padding-right:0px; padding-bottom:15px;}
  #copyright{ width:90%;}
  #copyright .text a{display:block;}
  #copyright .qrcode{ display:none;}
  #copyright .gotop{ bottom:30px;}
}

/* end*/