@charset "utf-8";
/* CSS Document */
html, body {font-size: 12px;margin: 0px;padding: 0px;text-decoration: none;font-family:"Arial";background: #f2f2f2;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: #c90a22;}
* { 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 { width:100%;max-width:1200px;color: #ccc;font-size: 14px;text-align: left;padding: 50px 0px; margin:0px auto;}
html::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #ddd;}
html::-webkit-scrollbar {width: 8px;background-color: #ddd;}
html::-webkit-scrollbar-thumb {background-color:#999;}
.fl-left{ float:left;}
.fl-right{ float:right;}


/*

head

-----------------------------------------------------------------*/
#head{ position:fixed; z-index:1001; width:100%; height:100px; background:#fff; transition:all .35s;}
#head .logo{ position:absolute; background:#c90a22;top:0; left:90px; width:145px; height:140px;text-align:center; border-radius:0px 0px 30px 0px;transition:all .8s;}
#head .logo img{display:block; margin:0px auto 10px auto; width:100px; height:auto;transition:all .35s;}
#head .logo a{ display:block;color:#fff; font-size:16px; font-weight:600; padding-top:20px;}
#head .menu{ position:absolute; right:180px; height:100px; line-height:120px; transition:all .05s;}
#head .menu>li{float:left; position:relative; text-align:center;}
#head .menu>li:after{position:absolute; left:0;top:-3px; width:100%; height:3px; border-radius:30px; font-size:0; background:#c90a22; content:''; display:block; transition:all .18s;}
#head .menu>li.A:after{ top:20px;}
#head .menu>li>a{ display:block;font-size:16px; color:#333; height:100px; padding:0px 25px; transition:line-height .35s,height .35s,color .25s;}
#head .menu>li.A>a{color:#c90a22;}
#head .menu>li>div{min-width:160px; background:#c90a22; border-radius:0px 0px 15px 0px; position:absolute; left:0; top:100px; display:none; overflow:hidden; transition:top .35s;}
#head .menu>li>div.multigang{width:1080px; height:350px; background:#eee; margin-left:-500px; text-align:left;}
#head .menu>li>div.multigang .wrap{ width:960px; margin:55px auto 0px auto; transition:all .35s;}
#head .menu>li>div.multigang .c1{ width:510px; float:left;}
#head .menu>li>div.multigang .c2{ width:240px; float:left;}
#head .menu>li>div.multigang .pcls{ padding:10px 0px 20px 0px; height:50px; cursor:pointer; overflow:hidden;}
#head .menu>li>div.multigang .pcls>img{ float:left; height:50px; width:auto; margin-right:10px;}
#head .menu>li>div.multigang .pcls>.text{ float:left; height:50px; line-height:20px; color:#999; font-size:12px;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;}
#head .menu>li>div.multigang .pcls>.text strong{ display:block; padding:5px 0px; font-size:16px; font-family:"Arial Narrow"; color:#c90a22; font-weight:normal;}
#head .menu>li>div.multigang .plist{ margin:0px auto; line-height:20px;}
#head .menu>li>div.multigang .plist>li{  display:block;float:left; width:20%;}
#head .menu>li>div.multigang .plist>li a{ display:block; padding:2px 5px; font-size:13px; transition:all .35s;}
#head .menu>li>div.multigang .plist>li a.model{ background:#c90a22; color:#fff; font-size:15px; padding:5px; margin-bottom:5px;}
#head .menu>li>div.multigang .c2 .plist>li{width:50%;}
#head .menu>li>div.multigang .c2 .plist>li a.model{ background:#666 !important; color:#666;}
#head .menu>li>div.multigang .c3 .plist>li{width:20%;}
#head .menu>li>div.multigang .c3 .plist>li a.model{ background:#999 !important; color:#999;}
#head .menu>li>div.multigang .plist>li:hover .model{background:#e34558;}
#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:#666; 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 .language{ position:absolute; line-height:120px; right:90px; top:0; transition:all .35s;}
#head .language a{ display:inline-block; background:#ddd; color:#666; font-size:12px; text-align:center; width:30px; height:30px; line-height:30px; border-radius:100%;}
#head .language a:hover{ color:#c90a22;}
#head .language .A{ background:#c90a22; color:#fff !important;}

#head.small{height:80px; box-shadow:0px 2px 2px rgba(0,0,0,.1);}
#head.small .logo{ background:none; width:200px; line-height:80px;}
#head.small .logo img{display:inline-block; margin:0px 10px 0px auto; width:80px;}
#head.small .logo a{ display:inline-block;font-size:16px; padding-top:0px; color:#c90a22;}
#head.small .menu{ height:80px; line-height:80px;}
#head.small .menu>li.A:after{ top:0px;}
#head.small .menu>li>a{ height:80px;}
#head.small .menu>li>div{top:80px;}
#head.small .language{ line-height:80px;}



/* end*/



/*

banner

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

#banner{position:relative;background:#eee; height:auto; overflow:hidden; padding-top:100px; transition:all .35s;}
#banner.small{padding-top:80px;}
#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:999; width:700px; height:380px; margin-top:50px; text-align:left;}
#banner .ml240{margin-left:240px;}
#banner .ml50{margin-left:-240px;}
#banner .mc-box .t-name{ display:block; padding:10px 0px; font-size:16px;font-style: italic; text-transform:uppercase; color:#009b4c; opacity:.8;}
#banner .mc-box .t-ad{ display:block; padding:5px 0px; font-size:36px; font-weight:bold; text-transform:uppercase; color:#009b4c;}
#banner .mc-box .t-view{ padding:20px 0px;}
#banner .mc-box .t-view a{ display:inline-block; padding:13px 25px; background:rgba(255,255,255,.5); border:2px solid rgba(255,255,255,.3); color:#009b4c; font-size:14px;font-style: italic;transform: skew(-10deg); transition:all .35s;}
#banner .mc-box .t-view a:hover{ border:2px solid #009b4c; background:none;}
#banner .swiper-container-horizontal>.swiper-pagination-bullets{bottom:25px;}
#banner .swiper-pagination-bullet{width:13px; height:13px; background:#fff; opacity:1; transition:all .2s;}
#banner .swiper-pagination-bullet:hover{opacity:.5;}
#banner .swiper-pagination-bullet-active{background:#4db23f; opacity:1 !important;}
#banner .swiper-button-prev,#banner .swiper-button-next{width:50px; height:50px; background-size:50px 50px; transition:all .2s;}
#banner .swiper-button-prev,#banner .swiper-container-rtl .swiper-button-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAx0lEQVRoge3aMQrCQBRF0Y+4DxuX4VKzB7fgCrKBVDa2dilzLaKFiYIzIP85vlMGAu9CijBJhBCgYzYCh+w9VYCeZ33J/dtvDSsBDBGxX1w+Z2ypBgysDdm7ijhChSNUOEKFI1Q4QsWbiKKXwFTADri+iOiyt33sHjE6IpsjVDhChSOUsD6ykYnYZA9I0cyjFeEYXY5R5RhVLcZcmoiJaOQE5cExqhyjyjGqHKPKMar+IeaYvasKcFqE/M4XriXmH88mKn48uwHHhY37FtUzgAAAAABJRU5ErkJggg==');}
#banner .swiper-button-next,#banner .swiper-container-rtl .swiper-button-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAvklEQVRoge3aMQrCQBCF4cWLeAZ7j5o7eAVPkAuksrG1S+mfQkSM2WJEnLfL+7pAAvNDijDZUgKAIzDzMESelQKMvBuzZ3raBe+/rK4PwPSrYf4KmPjkmHSOUeUYVY5R5RhVvcWsPzKbjhk2Ym7APnu2sErM7JhsjlHlGFWOUVWJCa2aousgq+ni1XKECkeocISKniOurUW0v0lxhApHqHCECkeocISKXiJOzUeUsvkH6pw901d4HTy7I3bwbAFEQY4GwbRw2gAAAABJRU5ErkJggg==');}
#banner .swiper-button-prev:hover,#banner .swiper-button-next:hover{opacity:.6;}
#banner>.bg,#b-sub>.bg{width:100%; height:100%; position:absolute; left:0; top:0; background:#000; filter:alpha(opacity=50); opacity:.5; z-index:2; display:none;}

@media (max-width:768px){
  #banner{ height:360px; }
  #banner .swiper-slide img{ flex:none; height:100%; width:auto; }
  #banner .swiper-button-prev,
  #banner .swiper-button-next{ display:none;}
  #banner .swiper-container-horizontal > .swiper-pagination-bullets{ bottom:16px; }
  #banner .swiper-pagination-bullet{ width:10px; height:10px; }
  #banner .mc-box{ width:70%; height:200px; margin-top:60px;}
  #banner .ml240, #banner .ml50{margin-left:0px;}
  #banner .mc-box .t-name{ display:none;}
  #banner .mc-box .t-ad{ font-size:20px;}
  #banner .mc-box .t-view{ padding:5px 0px;}
  #banner .mc-box .t-view a{ padding:5px 15px; border:1px solid rgba(255,255,255,.3); font-size:12px;}

}

@media (max-width:380px){
  #banner{ height:250px;}
  #banner .mc-box{ width:80%;}
  #banner .mc-box .t-ad{ font-size:16px;}
}
/* end*/







/*

main

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

#main{ width:100%; margin:0px auto;}
#main .title{ margin:0px auto; text-align:center;}
#main .title h2{ position:relative; display:block; font-size:30px; font-family:Arial; font-weight:normal; padding:5px 0px;}
#main .title h2:after{ position:absolute; z-index:2; left:50%; top:-25px; width:50px; height:50px; margin-left:-20px; background:url("../images/icon-dec-red.png") no-repeat; background-position:top center;overflow:hidden; content:''; transition:all .35s; }
#main .title h3{ display:block;font-size:24px; font-weight:normal;}
#main .advantage{ width:100%; margin:0px auto; padding:70px 0px; background:#fff;}
#main .advantage .wrap{ width:100%; max-width:1200px; margin:0px auto; padding:70px 0px;}
#main .advantage .wrap li{ display:block; width:25%; padding:25px 0px; float:left; text-align:center; background:url("../images/advantage-bar.png") repeat-y; background-position:top right;}
#main .advantage .wrap li:last-of-type{ background:none!important;}
#main .advantage .wrap li .icon{ position:relative; width:130px; height:130px; margin:0px auto;}
#main .advantage .wrap li .icon img{ transition:all .35s;}
#main .advantage .wrap li .icon .fd{ position:absolute; left:0; top:0;}
#main .advantage .wrap li .text{ width:55%; margin:0px auto;}
#main .advantage .wrap li .text h3{ display:block; padding:25px 0px; font-weight:normal; color:#333; font-size:16px;}
#main .advantage .wrap li .text span{ color:#999; line-height:21px;}
#main .advantage .wrap li:hover .fd{transform:scale(1.2); opacity:0;}
#main .about{ width:100%; margin:0px auto;padding:70px 0px;}
#main .about .wrap{ width:100%; max-width:1200px; margin:0px auto; padding:70px 0px;}
#main .about .img{ position:relative; width:470px; height:400px;}
#main .about .img .img1{ position:absolute; z-index:9; bottom:20px; left:0;}
#main .about .img .img2{ position:absolute; z-index:1; bottom:0px; right:0;}
#main .about .bg{ width:370px; height:auto;}
#main .about .container{ width:680px; text-align:left;}
#main .about .container .name{ position:relative; height:100px; font-size:18px; color:#333;}
#main .about .container .name:after{ position:absolute; left:0; bottom:50px; width:40px; height:5px; background:#c90a22; content:'';}
#main .about .container .text{  height:100px;color:#666; font-size:14px; line-height:25px; width:630px;}
#main .about .container .more{ padding-bottom:30px;text-align:left;}
#main .about .container .more a{ display:inline-block; width:180px; height:45px; line-height:45px; background:#ff9900; text-align:center; border-radius:50px; color:#fff; font-size:16px; transition:all .35s;}
#main .about .container .more a:hover{ background:#c90a22;}
#main .about .container .item{ text-align:left;}
#main .about .container .item a{ display:inline-block; margin-right:15px; width:206px; height:136px; border:1px solid #ccc; text-align:center; transition:all 1s;}
#main .about .container .item a .icon{ position:relative; width:64px; height:64px; margin:20px auto 0px auto; overflow:hidden;}
#main .about .container .item a .icon img{ position:absolute; left:0; top:0;}
#main .about .container .item a span{ display:block; padding:5px 0px; font-size:14px; margin:0px auto; color:#c90a22; transition:all .35s;}
#main .about .container .item a:hover{ background:#c90a22; border:1px solid #c90a22;transform:rotateY(360deg);}
#main .about .container .item a:hover span{ color:#fff;}
#main .about .container .item a:hover .icon img{ top:-64px;}
#main .product{ width:100%; margin:0px auto;padding:70px 0px;background:#fff url("../images/product-bg.jpg") no-repeat; background-position:left top;}
#main .product .title{ color:#fff;}
#main .product .title h2:after{ background:url("../images/icon-dec.png") no-repeat;}
#main .product .box-wrap{ position:relative;width:100%; max-width:1200px; margin:0px auto; padding:70px 0px;}
#main .product .box-wrap .button-next{ position:absolute; z-index:999; right:-60px; top:45%; cursor:pointer; width:40px; height:40px; overflow:hidden; background:url("../images/icon-page-next.png") no-repeat; background-position:0px 0px; background-size:40px 80px; border:1px solid rgba(255,255,255,.3); border-radius:100%; text-align:center; transition:all .35s;}
#main .product .box-wrap .button-prev{ position:absolute; z-index:999; left:-60px; top:45%; cursor:pointer; width:40px; height:40px; overflow:hidden; background:url("../images/icon-page-prev.png") no-repeat; background-position:0px 0px; background-size:40px 80px; border:1px solid rgba(255,255,255,.3); border-radius:100%; text-align:center; transition:all .35s;}
#main .product .box-wrap .button-prev:hover{ left:-70px; background-color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.8);}
#main .product .box-wrap .button-next:hover{ right:-70px; background-color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.8);}
#main .product .box-wrap  .swiper-container {width: 100%; margin:0px auto;}
#main .product .box-wrap .swiper-slide {float:left; width:24%; height:380px;}
#main .product .box-wrap a{ position:relative; display:block; width:100%; height:100%; background:#fff url("../images/product-img-bg.jpg") no-repeat top center;overflow:hidden; transition:all .5s;}
#main .product .box-wrap a:last-of-type{ margin:0px !important;}
#main .product .box-wrap a .img{ position:relative; width:100%; height:310px; line-height:310px; text-align:center;}
#main .product .box-wrap a .img img{ width:100%; height:auto; margin:0px auto;}
#main .product .box-wrap a .img:after{ position:absolute; z-index:2; left:50%; bottom:-25px; width:50px; height:50px; margin-left:-25px; background:#ececec url("../images/icon-plus-red.png") no-repeat; background-position:center center; border-radius:100%; overflow:hidden; font-size:20px; font-weight:bold; content:''; transition:all .35s;}
#main .product .box-wrap a .name{position:absolute; left:0; bottom:0; width:100%;background:#ececec; height:70px; margin:0px auto; transition:all .35s;}
#main .product .box-wrap a .name h3{ position:relative; z-index:999; height:70px; line-height:70px; color:#666; font-size:16px; font-weight:normal; transition:all .35s;}
#main .product .box-wrap a .name h4{ position:absolute; left:0; bottom:-20px; width:100%; color:rgba(255,255,255,.7); text-align:center; font-size:13px; font-weight:normal; transition:all .35s;}
#main .product .box-wrap a:hover .name{ background:#c90a22;}
#main .product .box-wrap a:hover .name h3{ color:#fff; line-height:50px;}
#main .product .box-wrap a:hover .name h4{ bottom:15px;}
#main .product .box-wrap a:hover .img:after{ background:#c90a22 url("../images/icon-plus.png") no-repeat; background-position:center center;}
#main .product .box-wrap a:hover{transform:translate(0,-10px);}
#main .news{ width:100%; margin:0px auto;padding:0px 0px 70px 0px; background:#fff;}
#main .news .wrap{ width:100%; max-width:1200px; margin:0px auto; padding:70px 0px;}
#main .news .img{ width:580px; text-align:left;}
#main .news .container{ width:580px; text-align:left;}
#main .news .container a{ display:block; padding:26px 0px; border-bottom:1px dotted #ccc; font-size:14px;}
#main .news .container a img{ width:auto; height:23px; margin:0px 5px;}
#main .news .container a span{float:right; color:#c90a22; font-size:13px;}




/* end*/






/*

navigation

-----------------------------------------------------------------*/
#navigation{ position:absolute; z-index:99; left:0; width:100%; height:160px; margin-top:-160px; background:rgba(0,0,0,.5);}
#navigation .path{ width:1200px; margin:0px auto; height:70px; padding-top:20px; text-align:left; color:#fff; overflow:hidden;}
#navigation .path img{ height:20px; width:auto; margin-right:6px;}
#navigation .path a{ color:#fff !important;}
#navigation .path .A{ color:#fff;}
#navigation .navpart{ width:1200px; height:70px; margin:0px auto;}
#navigation .navpart a{ display:block; float:left; height:70px; line-height:70px; text-align:center; color:#fff; font-size:16px; transition:all .35s;}
#navigation .navpart .w2 a{ width:50%;}
#navigation .navpart .w3 a{ width:33.3%;}
#navigation .navpart .w4 a{ width:25%;}
#navigation .navpart .w5 a{ width:20%;}
#navigation .navpart a:hover, #navigation .navpart .A{ background:#fff !important; color:#c90a22; box-shadow: inset 0px 2px 3px rgba(0,0,0,.1);}

/* end*/





/*

about

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

#about{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#about .text{ width:100%; max-width:1200px; margin:0px auto; text-align:left;}
#about .text p{ font-size:14px; color:#666; line-height:25px; display:block; margin-bottom:20px;}
#about .img{ width:100%; max-width:1200px; margin:0px auto; padding:30px 0px; text-align:left;}






/* end*/


/*

culture

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

#culture{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#culture .wrap{ width:100%; max-width:1200px; margin:0px auto;}
#culture .text{ width:100%; max-width:700px; margin:0px auto; text-align:left;}
#culture .text .tags_title{ position:relative; margin:6px 0; font-size:16px;font-weight:normal; color:#444; padding:0px 15px;border-bottom:0!important;}
#culture .text .tags_title:after{position:absolute; z-index:9; left:0; width:4px; height:100%; background:#c90b23; content:'';}
#culture .text .tags_content{ font-size:14px; line-height:21px; color:#666; padding:10px 0 50px 0;}
#culture .img{  width:400px; text-align:left;}






/* end*/






/*

honor

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

#honor{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#honor .wrap {width:100%; max-width:1200px; margin:0px auto;}
#honor .wrap a {position: relative;display:inline-block; float:left;width: 23%; height:auto; margin:1%;text-align: center;}
#honor .wrap 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 .wrap 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 .wrap a .img img {display: inline-block;width: auto; max-height:270px; margin: 5px auto;}
#honor .wrap 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 .wrap 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;}





/* end*/




/*

production

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

#production{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#production .text{ width:1200px; margin:0px auto; padding:50px 0; color:#999; font-size:14px; text-align:left; line-height:21px;}
#production .wrap{ width:1200px; margin:0px auto;}
#production .container-fluid {padding: 20px; text-align:left;}
#production .box {position:relative;margin-bottom: 20px;float: left;width: 285px; overflow:hidden;}
#production .box img {max-width: 100%; transition: all .35s;}
#production .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(0,0,0,.8); transition: all .35s;}
#production .box:hover .name{ bottom:0;}
#production .box:hover img{ opacity:.9;}





/* end*/





/*

news

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

#news{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0 50px 0;}
#news a{ display:block; width:100%; max-width:1200px; margin:0px auto 30px auto; padding:20px 0;transition:all .35s;}
#news a .time{ position:relative; width:140px; text-align:left;transition:all .35s;}
#news a .time:after{ position:absolute; left:90px; top:50px; background:#c90a22; width:0; height:3px; content:''; transition:all .35s;}
#news a .time h2{ display:block; padding:10px 0; font-size:60px; font-weight:normal; font-family:"Arial Narrow"; color:rgba(201,10,34,1);}
#news a .time h3{ display:block;font-size:18px; font-weight:normal; font-family:"Arial Narrow"; color:rgba(201,10,34,.6);}
#news a .container{ width:980px; padding:0px 20px; text-align:left;}
#news a .container .title{ display:block; padding:10px 0; font-size:16px;}
#news a .container .text{ font-size:14px; color:#999; line-height:25px;}

#news a:hover .time{ padding-left:20px;}
#news a:hover .time:after{ width:60px;}
#news a:hover{ background:#f7f7f7; }
/* end*/




/*

products

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

#products{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#products .catalog{ width:100%; max-width:1200px; margin:0px auto;}
#products .catalog li{ display:block; float:left; width:28%; margin-left:-1px;}
#products .catalog li:nth-child(1){ width:44%;}
#products .catalog .cls{ width:100%; height:80px; margin:0px auto; text-align:left; background:#c90a22;}
#products .catalog .cls img{float:left; height:100%; width:auto; margin:0px 10px;}
#products .catalog .cls .name{ float:left; height:80px; padding:0px 20px;}
#products .catalog .cls .name h2{ display:block; padding:10px 0px 0px 0px; font-size:28px; color:#fff;}
#products .catalog .cls .name h3{ display:block; font-size:14px;font-weight:normal; color:rgba(255,255,255,.6);}
#products .catalog .plist{ border:1px solid #ddd; border-top:0px; padding:50px; min-height:200px; text-align:left;}
#products .catalog .plist a{ display:inline-block; font-size:15px; color:#666; margin-right:10px;}
#products .catalog .plist a:hover{ text-decoration:underline; color:#c90a22;}




#catalog{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#catalog .wrap{ width:1200px; margin:0px auto;}
#catalog .img{ position:relative; width:295px; text-align:left;}
#catalog .img .name{position:absolute; left:0; bottom:-70px; background:rgba(0,0,0,.7); width:90%; padding:10px 5%; color:rgba(255,255,255,.4); text-align:left; height:50px;}
#catalog .img .name h2{ color:#fff;}
#catalog .container{ width:800px; text-align:left;}
#catalog .container .sList{padding:50px 0px; border-bottom:1px dotted #ddd;}
#catalog .container .sList:first-child{ padding-top:0px;}
#catalog .container .sList:last-of-type{ border-bottom:0px;}
#catalog .container .sList .sName{float:left;font-size:16px;font-weight:normal;color:#c90a22;width:130px;}
#catalog .container .sList .spid{ float:none !important; width:100%; padding-bottom:20px; margin-bottom:40px; border-bottom:1px solid #ddd;}
#catalog .container .sList .pList{float:left;width:100%;text-align:left; padding:3% 0;}
#catalog .container .sList .pList a{text-align:left;width:33%;display:block;float:left;color:#848590;font-size:14px;padding-bottom:2%;}
#catalog .container .sList .pList a img{ width:60px; height:auto;border:1px solid #ddd; margin-right:10px;}
#catalog .container .sList .pList a:hover{color:#c90a22;text-decoration:underline;}
#catalog .container .sList .back{ margin:0px auto; text-align:left;}
#catalog .container .sList .back a{ display:inline-block;border:1px solid #ddd; font-size:14px; padding:6px 25px; color:#999; transition:all .35s;}
#catalog .container .sList .back a:hover{ background:#c90a22; border:1px solid #c90a22; color:#fff;}

/* end*/











/*

service

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

#service{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#service .text{ width:100%; max-width:1200px; margin:0px auto; text-align:left;}
#service .text p{ font-size:14px; color:#666; line-height:25px; display:block; margin-bottom:20px;}
#service .img{ width:100%; max-width:1200px; margin:0px auto; padding:30px 0px; text-align:left;}






/* end*/


/*

marketing

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

#marketing{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#marketing .text{ width:100%; max-width:1200px; margin:0px auto; text-align:left;}
#marketing .text p{ font-size:14px; color:#666; line-height:25px; display:block; margin-bottom:20px;}
#marketing .img{ width:100%; max-width:1200px; margin:0px auto; padding:30px 0px; text-align:left;}






/* end*/



/*

download

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

#download{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#download .wrap{ width:100%; max-width:1200px; margin:0px auto;}
#download a{ display:block; float:left; width:20.9%;border:1px solid #ddd; margin-left:-1px; margin-top:-1px; padding:2%; transition:all .35s;}
#download a .img{ position:relative; width:100%; height:auto; overflow:hidden;}
#download a .img:after{ position:absolute; z-index:9; left:0; top:0; width:100%; height:100%; opacity:0; background:rgba(0,0,0,.7) url("../images/icon-download.png") no-repeat; background-position:50% 10%; content:''; transition:all .35s;}
#download a .img>img{ width:100%; height:auto;}
#download a .name{ width:100%; margin:0px auto; padding:15px 0; height:25px; line-height:20px; text-align:left; font-size:16px; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
#download a .time{ padding:10px 0px; color:#ccc; font-size:14px;text-align:left;}
#download a:hover{ box-shadow:0px 2px 5px rgba(0,0,0,.5); background:#c90a22;border:1px solid #c90a22; }
#download a:hover .img:after{ opacity:1; background-position:50% 50%;}
#download a:hover .time{ color:rgba(255,255,255,.5);}
#download a:hover .name{ color:rgba(255,255,255,.9);}

/* end*/




/*

marketing

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

#contact{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#contact .wrap{ width:100%; max-width:1200px; margin:0px auto;}
#contact .text{  text-align:left;}
#contact .text h2{ display:block; margin-bottom:10px; font-size:32px;}
#contact .text h3{ display:block; margin-bottom:10px; font-size:20px;}
#contact .text p{ font-size:14px; color:#666; line-height:25px; display:block; margin-bottom:30px;}
#contact .map{ display:inline-block; background:#ff9900; color:#fff; padding:10px 30px; border-radius:10px; font-size:16px;}
#contact .img{  width:480px; height:auto;}
#contact .img img{ width:100%; height:auto;}





/* end*/



/*

view

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

#view{ width:100%; background:#fff; min-height:500px; margin:0px auto; padding:100px 0;}
#view .title{ width:100%; max-width:1200px; padding:30px 0px; font-size:20px;font-weight:bold; color:#333; margin:0px auto;}
#view .time{ width:100%; max-width:1200px; padding:30px 0px; font-size:14px;color:#999; margin:0px auto;}
#view .text{ width:100%; max-width:1200px; min-height:360px; padding:30px 0px; font-size:14px;color:#666; text-align:left;line-height:25px; margin:0px auto;}
#view .text p{ margin-bottom:20px; text-align:left;}
#view .text table{ width:99%; margin:0px auto; border-top:1px solid #ddd; border-left:1px solid #ddd;}
#view .text td{ border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px;}

#view .product{ width:100%;max-width:1200px; padding:30px 0px; margin:0px auto;}
#view .product .title{ text-align:left; font-size:32px; font-weight:normal; padding:0px 0px 30px 0px;}
#view .product .img-box{ position:relative; width:302px;text-align:right;}
#view .product .img-box .swiper-container{ float:left; width:300px; height:300px; margin-bottom:10px; overflow:hidden; border:1px solid #ddd;}
#view .product .img-box .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;}
#view .product .img-box .swiper-slide img{max-width:100%;}
#view .product .img-box .button-prev, #view .product .img-box .button-next{ display:inline-block; width:40px; height:40px; overflow:hidden; cursor:pointer; background:#eee; transition:all .35s;}
#view .product .img-box .button-prev img ,#view .product .img-box .button-next img{ width:100%; height:auto;}
#view .product .img-box .button-prev:hover img, #view .product .img-box .button-next:hover img{ margin-top:-40px;}
#view .product .img-box .button-prev:hover, #view .product .img-box .button-next:hover{ background:#c90a22;}
#view .product .container{width:800px; text-align:left;}
#view .product .tags{ width:100%; margin:0px auto;}
#view .product .tags .tags_title{ font-size:16px;font-weight:normal;color:#c90a22; padding:10px 5px;}
#view .product .tags .tags_content{ padding:10px 5px; font-size:14px; color:#666; line-height:25px; text-align:left;}
#view .product .tags .tags_content p{ margin-bottom:10px;}
#view .product .tags .tags_content table{ border-top:1px solid #ddd;border-left:1px solid #ddd;}
#view .product .tags .tags_content td{ border-right:1px solid #ddd;border-bottom:1px solid #ddd; padding:10px;}
#view .product .tags img{ max-width:100%;}
#view .product .url{ border-top:1px solid #ddd; padding:40px 0px; text-align:left;}
#view .product .url a{ display:inline-block; padding:8px 25px; margin-right:5px; font-size:14px; background:#c90a22; color:#fff; border:1px solid #c90a22; transition:all .35s;}
#view .product .url a:hover{ background:#666; border:1px solid #666;}

#view .file{ width:100%;max-width:1200px; padding:30px 0px; margin:0px auto; text-align:left; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
#view .file a{ display:inline-block; border:1px solid #ddd; padding:8px 25px; font-size:14px; color:#666; text-align:left; margin-right:20px; transition:all .35s;}
#view .file a img{ background:#666; height:35px; width:auto; margin-right:10px; transition:all .35s;}
#view .file a:hover{ background:#c90a22; color:#fff; border:1px solid #c90a22;}
#view .file a:hover img{ background:#c90a22;}




#view .btn{ width:100%; max-width:1200px; padding:30px 0; margin:0px auto; text-align:center;}
#view .btn a{ display:inline-block; border:1px solid #ddd; border-radius:100%; width:70px; height:70px; line-height:70px; margin:0px 15px; text-align:center; overflow:hidden; transition:all .35s}
#view .btn a:hover{ background:#c90a22; border:1px solid #c90a22;}
#view .btn a:hover img{ margin-top:-70px;}
/* end*/








/*

page

-----------------------------------------------------------------*/
#page{ width:100%; background:#fff; margin:0px auto;}
#page .pageshow{ width:100%; max-width:1200px; margin:0px auto; padding:50px 0 100px 0; border-top:1px solid #ddd;}
#page .pageshow{ font-size:12px; color:#999;}



/* end*/









/*

foot

-----------------------------------------------------------------*/
#foot{ width:100%; margin:0px auto; background:#e5e6e9;}
#foot .contact{ width:100%; margin:0px auto; background:#c90a22 url("../images/contact-bg.jpg") no-repeat;}
#foot .contact .wrap{ width:100%; max-width:1200px; margin:0px auto; padding:70px 0px;}
#foot .contact .wrap div{ display:inline-block; width:32%; font-size:16px; color:#fff; border-right:1px solid rgba(255,255,255,.2);}
#foot .contact .wrap div img{ margin:0px 10px; display:inline-block;}
#foot .contact .wrap div:last-of-type{ border:0px !important;}
#foot .contact .wrap span{ display:inline-block; height:60px; line-height:18px; text-align:left;}
#foot .wrap{ position:relative; width:1200px; margin:0px auto; padding:65px 0px;}
#foot .navigation{ width:580px;}
#foot .navigation a{ font-size:16px; float:left; text-align:center; width:190px; height:40px; line-height:40px; border-right:1px solid #c8c8c8;}
#foot .share{ width:200px; padding-left:50px; text-align:left;}
#foot .share h3{ display:block; padding:5px 0px 10px 0px; color:#c90a22; font-size:16px; font-weight:normal;}
#foot .share .bshare-custom a{ display:inline-block; padding:0px; margin-right:5px; width:30px; height:30px; border:1px solid #c90a22;border-radius:100%;transition:all .35s;}
#foot .bshare-custom .bshare-sinaminiblog{ background:url("../images/icon-weibo.png") no-repeat; background-size:18px auto;background-position:center center;}
#foot .bshare-custom .bshare-qqim{ background:url("../images/icon-qq.png") no-repeat; background-size:18px auto;background-position:center center;}
#foot .bshare-custom .bshare-weixin{ background:url("../images/icon-wechat.png") no-repeat; background-size:18px auto;background-position:center center;}
#foot .bshare-more{ display:none !important;}
#foot .qrcode{ position:absolute; right:0; top:35px; text-align:right;}
#foot .qrcode p{ display:inline-block; text-align:center; color:#888; font-size:12px;}
#foot .qrcode img{ display:block; width:120px; height:auto; border:1px solid #ccc; margin-bottom:2px;}
#foot .copyright{ width:100%; margin:0px auto; border-top:1px solid #c8c8c8; padding:20px 0px; font-size:13px; color:#666;}
#foot .copyright a{ display:inline-block; margin-left:15px; color:#888;}
#foot .copyright a:hover{ color:#c90a22;}


/* end*/