@charset "UTF-8";
* { margin: 0; padding: 0}
li{ list-style: none}
input,textarea{outline:0}
img{ display: block; max-width: 100%; margin: 0 auto;}
.ztbanner{ width: 100%; background: #000; padding-top: 68px;}
h3.title{font-size: 60px; margin-bottom: 0; font-weight: bold;}
.ztsection{ width: 100%;}
.container{ width: 1200px; padding-left: 0; padding-right:0 ; position: relative;}
.introduction{ width:62.5%; margin-top: 40px}
.introduction .desc{ font-size: 22px}
.introduction .desc a{ background: #e60012; display: inline-block; color: #fff; padding:4px 12px; /*font-weight: bold;*/ margin-top: 5px}
.introduction li{float: left;}
.introduction li.col-xs-4{ padding-right: 0; padding-left: 0;}
.introduction li .border{display: block; margin-right: 6%; border:1px solid #ddd;}
.introduction li a{ }
.introduction li a:hover{ text-decoration: none}
.introduction li .param{background:#e5e5e5; color: #000; margin-bottom: 0; padding: 15px 0}
.introduction li .param b{ font-size: 18px; color: #e60012}
.introduction li .param span{ display: block;}
.form-title{ position: absolute; bottom: 100%; right: 0; width: 35%; background: #e60012; padding: 10px 1%; color: #fff; border-radius: 4px 4px 0 0;}
.form-title h4{ font-size: 24px;}
.form-body{ position: absolute; top:0; right: 0;width: 35%;height: 100%; border:1px solid #ccc; background: #e5e5e5;}
.form-body .form-group{ padding:4% 3% 0 3%; margin-bottom: 0; }
.form-body .form-control{ font-size: 16px; height: auto; line-height: 28px; background: #ccc;}
.form-body select.form-control{ height: 40px;}
.form-body .order .lead{margin-bottom: 10px; margin-top: 15px;}
.form-body .tjbtn{ width: 60%; font-size: 20px; color: #fff; background: #e60012; line-height: 30px;}
.form-body .tjbtn.uclk{ background: #aaa;}
.user-list{ width: 100%; background: #000;padding: 5.4% 0 10%; margin-top: 5%}
.user-list .container{ border:1px solid #fff; }
.user-list .container .left{ width: 48.9%; float: left; position: relative;}
.user-list .container .textbox{padding: 12% 5% ;position: relative; z-index: 2}
.user-list .container .textbox .text1{  font-size: 22px; color: #ffcd2e;  line-height: 22px}
.user-list .container .textbox .text1 b{ display: block; font-size: 42px;line-height: 36px}
.user-list .container .textbox .text2{ font-size: 30px; color: #fff; font-weight: bold;line-height: 30px;z-index: 1}
.user-list .container .textbox .text2 span{ font-size: 110%; display: inline-block; padding-right: 70%;}
.user-list .container .fimgbox{position: absolute; right: 0; bottom:0; width: 58.56%}
.user-list .container .right{ width: 48%; float: right; position: absolute; right: 0; top: 8%; height: 89%;  overflow: hidden; color: #fff}
.user-list .container .right li{ font-size: 20px; padding-bottom: 1%; }
.user-list .container .right li span{display: inline-block; margin-right: 0; overflow: hidden; white-space: nowrap; text-overflow:ellipsis}
.user-list .container .right li .text1{ width: 35%;}
.user-list .container .right li .text2{ width: 24%; text-indent: 5px;}
.user-list .container .right li .text3{ width: 28%; text-indent: 5px;}
.user-list .container .right li .text4{ width: 33%; text-indent: 5px;}
.intro{ position: relative;  margin-top: -56px;}
.intro .left{ width: 39%; padding-bottom:30px; position: absolute; left: 0; top: 0; }
.intro .right{ width: 61%;  position: relative; margin-left: 39%;}
.intro .right h3{ font-size: 22px; background: #000;margin: 0 auto; color: #fff; padding:16px 2%; line-height: 24px;}
.intro .right li{ font-size: 18px; display: block; padding:1.85% 2% 1.85% 50px;  border-bottom: 1px solid #ccc; position: relative;}
.intro .right li span{ width: 30px; height: 30px; border-radius: 30px; position: absolute; top: 50%; left: 10px; margin-top: -15px; background: #e60012;}
.features{ margin-top: 50px;z-index: 3; position: relative;}
.features .title{ width: 30%; margin-left:50px;}
.features .pro-features-list{ position: relative; padding: 0 50px;}
.features .pro-features-list .pro-item{position: relative; display: none;opacity: 0; animation: fadeIn 1s;animation-fill-mode: forwards;}
.features .pro-features-list .textbox{ width: 52.7%; position: relative; z-index: 2;}
.features .pro-features-list h4{ font-size: 32px;   white-space: nowrap; color: #fff;}
.features .pro-features-list .sy35 h4{ font-size: 30px;}
.features .pro-features-list h4 span{ display: inline-block;padding:10px; background: #e60012;}
.features .pro-features-list .textbox b{ font-size: 22px; white-space: nowrap;}
.features .pro-features-list .textbox p.desc{font-size: 18px; color: #626262; line-height: 24px; min-height: 72px;}
.features .pro-features-list .imgbox{width:47.3%; position: absolute; bottom: 0; right: 0; z-index: 1;}
.features .arrow{ position: absolute; top: 50%; width: 54px; margin-top: -60px; cursor: pointer}
.features .arrow.previous{ left: -20px;}
.features .arrow.next{ right: -20px;}
.features .thumb-list{ margin-top: 4%;}
.features .thumb-list li{  margin:0 15px; position: relative; width: 31.5%; background: #e60012; /*border: 5px solid #fff; */display: inline-block;}
.features .thumb-list li .masks{ background: rgba(0,0,0,.7); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.features .thumb-list li .text{ font-size: 28px; color: #fff;line-height: 1; position: absolute; top: 50%; margin-top: -55px; width: 100%;}
.features .thumb-list li .text img{ display: block; margin: 0 auto; }
.features .thumb-list li .text .t1{font-size: 48px; display: block; padding: 10px 0;}
.features .thumb-list li.cur .imgbox{ padding: 5px;}
.features .thumb-list li.cur .masks{ display: none;}
.specification{ background: #333; color: #fff; padding-top: 10%; position: relative; margin-top: -6.5%; z-index: 2; padding-bottom: 80px;}
.specification .specbox{ width: 100%; overflow-y: scroll; height: 540px; background: #fff;margin-top: 35px;}
.specification .specbox img{ display: block;width:100%; }
.articles{background: #333; color: #fff; padding-bottom: 80px;}
.article-list{ width: 92%; margin: 0 auto; margin-top: 30px; padding-bottom:40px; position: relative;}
.article-list .himg{  width: 38.9%;;}
.article-list a.article-link{ background: #fff; display: block; color: #000; position: relative;}
.article-list a.article-link img{ width: 38.9%; float: left;}
.article-list a.article-link .text{float: right; width: 57.1%; margin:1% 2%;}
.article-list a.article-link h4{ font-size: 22px;}
.article-list a.article-link .more{ position: absolute; bottom: 6% ; font-size: 20px; color: #e60012; right: 4%; color: #e60012;}
.intro .left .swiper-container,.article-list .swiper-container{ position: absolute; top: 0; left:0; width: 100%; height:100%; z-index: 1;}
.pagination{position: absolute;bottom: -8px;left: 0;height: 20px;width: 100%; text-align: center; z-index: 2; cursor: pointer;}
.swiper-pagination-switch{width: 60px;height: 5px;background: #ccc;display: inline-block; margin:0 10px;}
.swiper-visible-switch {background: #e60012;}
.pictures{padding-top: 80px;padding-bottom: 70px; font-size: 18px; line-height: 40px;}
.pictures .row{ margin-left: 0; margin-right: 0;}
.pictures h3{  padding-bottom: 40px;}
.piclist{ cursor: pointer}
.piclist:hover{color: #e60012;}

.poupout.mask{ display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: .8; z-index: 999;}
.myvideo{ display: none; width: 640px; height: 360px; position: fixed; top: 50%; left: 50%; margin-top: -180px; margin-left: -320px; z-index: 1999; }
.myvideo .close{ font-size: 36px; width: 30px; color: #fff; position: absolute; right: 5px; top:-5px; z-index: 2;}
.myvideo .video-wrap{ position: relative;z-index: 1;width: 100%; height:100%; margin: 0 auto;}
.myvideo .video-wrap iframe{ height: 100%}
.img-show{display: none; position: fixed; left: 0 ; top: 0; width: 100%; height: 100%;z-index: 19999; }
.img-show-table{ display: table; width: 70%; margin: 0 auto; height: 100%;}
.img-show-row{display: table-row; }
.img-show-container{ display: table-cell; position: relative;  vertical-align: middle; text-align: center; position: relative;}
.img-show-container img{ max-height:80%;}
.img-show-container .img-arr{ position: absolute; width: 55px; top:50%; margin-top:  -60px; cursor: pointer;}
.img-show-container .img-arr.left{ left: -90px}
.img-show-container .img-arr.right{ right: -90px}
.img-show .close{ font-size: 80px; width: 30px; color: #fff; position: absolute; right: 35px; top:-15px; z-index: 2;}
.nomore{ display: none; line-height: 400px; font-size: 40px; color: #fff;}
.red{ color: #E60012;}

.go-top{position: fixed;bottom: 40px;right: 1px;width: 46px;z-index: 999;}
.go-top li{ position: relative;margin-bottom:1px;}
.go-top a{display: block;width: 46px;height: 46px;background-image: url(/skin/activity/ww/images/go-top.png);position: relative; z-index: 2}
.go-top a:last-child{margin-bottom: 0;}
.go-top .go a{background-position: 0 -150px;}
.go-top .go.cur a{background-position: 0 -250px;}
.go-top .feedback a{background-position: 0 -100px;}
.go-top .feedback.cur a{background-position: 0 -300px;}
.go-top .uc-2vm a{background-position: 0 0; position: relative;}
.go-top .uc-2vm.cur a{background-position: 0 -350px;}
.go-top .share a{background-position: 0 -50px;}
.go-top .share.cur a{background-position: 0 -200px;}
.go-top .uc-2vm-pop{
	position: absolute;right: 46px; top: -100px;opacity: 0;
	width: 240px;box-shadow: 0px 1px 4px rgba(0,0,0,.1);
	background: #fff;
}
.go-top .uc-2vm-pop .title-2wm{font-size: 12px; margin: 5px;}
.go-top .uc-2vm-pop .logo-2wm-box{position: relative;}
.go-top .uc-2vm-po2{position: absolute;right:-244px; top:-7px; padding: 6px 3px; width: 244px;opacity: 0; z-index: 1;box-shadow: 0px 1px 4px rgba(0,0,0,.1); background: #fff; border:1px solid #ccc;}
#st-1.st-hidden{ opacity: 1!important;}
.go-top .logo-2wm-box a{ width: 240px}
.dn{display: none;}

.swt-mobile{
	display: none;
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
}
.swt-mobile-body{
    border-top: 1px solid #e6e6e6;
    background: #fff;
}
.swt-mobile-body .icon{
    display: inline-block;
    font-size: 16px;
    margin-right: 2vw;
}
.swt-mobile-body .swt-zx-txt{
    display: inline-block;
    font-size: 14px;
}
.swt-mobile-body a{
    display: inline-block;
    width: 100%;
    height:46px;
    color: #cb0909;
    line-height: 46px; text-align:center;
}
.swt-mobile .swt-zx{
    border-right: 1px solid #e6e6e6;
}
.swt-mobile .swt-ly{

}
 @media screen and (max-width: 1200px) { 
 	.container{ width: 100%;}
 	.features .pro-features-list .textbox b{ font-size: 20px;}
 	.features .pro-features-list .sy35 h4{ font-size: 28px;}
 	.features .arrow{ width: 38px; margin-top: -42px;}
	.features .arrow.previous{ left: 0;}
	.features .arrow.next{ right: 0;}
 }
  @media screen and (max-width: 1100px) {
  	.intro .left{  top: auto; bottom: 0; }
  	.intro .right h3{font-size: 20px;}
 	.intro .right li{font-size: 16px;}
 	h3.title{ font-size: 50px; width: 100%;}
 	.article-list{ width: 100%;}
 	.features .pro-features-list h4{ font-size: 28px;}
 	.features .pro-features-list .sy35 h4{ font-size: 26px;}
 	.features .pro-features-list .textbox b{ font-size:18px;}
 	.form-title h4{ font-size: 20px;}
 	.form-body .form-group{ padding-top:3%; }
 }
  @media screen and (max-width: 991px) {
  	.ztbanner{padding-top: 44px;}
  	.user-list .container .right li{ font-size: 18px;}
  	.intro .right h3{font-size: 20px;}
 	.intro .right li{font-size: 14px;}
 	.features .pro-features-list h4{ font-size: 26px;}
 	.features .pro-features-list .sy35 h4{ font-size: 22px;}
 	.features .pro-features-list .textbox p.desc{ font-size: 16px;}
	.features .thumb-list li .text{ font-size: 22px;margin-top: -50px; }
	.features .thumb-list li .text .t1{font-size: 36px;padding: 5px 0;}
 }
  @media screen and (max-width: 900px) {
  	.intro .right h3{font-size: 18px;}
 	.intro .right li{font-size: 12px;}
 	.features .pro-features-list h4{ font-size: 22px;}
 	.features .pro-features-list .sy35 h4{ font-size: 20px;}
 	.features .pro-features-list .textbox p{ margin-bottom: 5px;}
 	.features .pro-features-list .textbox p.desc{ font-size: 13px;}
 	.article-list a.article-link h4{ font-size: 18px;}
 	.article-list a.article-link p{margin-bottom: 0; }
 	.article-list a.article-link p{ font-size: 13px;}
 	.article-list a.article-link .more{display: none; }
	.introduction{ width: 100%;}
	.form{ clear: both; padding-top:30px;}
	.form,.form-title,.form-body{ position: static; width: 100%;}
	.form-body{ padding-bottom: 20px}
 	.form-body .order .lead{ font-size: 18px;}
 	.form-title h4{ font-size: 18px;}
	 .form-body .tjbtn{ font-size: 18px; }
	 .btn-spec{ display: inline-block; margin-top: 8px; font-size: 16px;/* background: #626262;*/ line-height: 36px; padding-bottom: 3px; text-decoration: underline; color: #e70012}
	 .piclist{ padding-top: 10px; white-space: nowrap; }
}
 @media screen and (max-width: 800px) {
	.article-list a.article-link h4{ font-size: 16px;}
 }
  @media screen and (max-width: 750px) {
  	.introduction li .param span{ display: none;}
  	.user-list{ padding-top: 120px; padding-bottom: 35px;}
  	.user-list .container .left{position: static;}
  	.user-list .container .left .textbox{ position: absolute; top:-82px; left: 0; width: 100%;padding:0;}
  	.user-list .container .textbox p{ margin: 0;}
  	.user-list .container .textbox .text1 b{ display: inline-block; padding-right: 5px; line-height: 1;}
  	.user-list .container .textbox .text2{  line-height: 1;}
  	.user-list .container .textbox .text2 span{ padding-right: 3px; color: #e60012;}
  	.user-list .container .left .fimgbox{ position: static; visibility: hidden;}
  	.user-list .container .right{ width: 96%; }
  	.intro{ margin-top: 40px; }
  	.intro .left{ position: relative; width: 100%;}
  	.intro .right{ width: 100%; margin-left: 0; margin-top: 20px;}
  	.intro .right h3{ font-size: 22px;}
  	.intro .right li{ font-size: 16px;padding-left: 35px;}
  	.intro .right li span{width: 15px; height: 15px;  border-radius: 15px;margin-top:-7px}
  	.features{ margin-top: 30px;}
  	.features .title{ width: 100%; margin-left: 0;}
  	.features .pro-features-list .imgbox{ display: none;}
  	.features .pro-features-list .textbox{ width: 100%;}
  	.features .pro-features-list .textbox p.desc{ min-height: 0;}
  	.article-list a.article-link p{ font-size: 12px;}
  }
  @media screen and (max-width: 640px){
  	.introduction,.user-list{margin-top: 30px}
  	.container{ width: 96%; }
  	 h3.title{ font-size: 16px; margin-top: 10px;}
  	.introduction .desc{ font-size: 14px;}
  	.introduction .desc.lead{ margin-bottom: 10px;}
  	.introduction li .param b{ font-size: 12px;}
  	.user-list{ padding-top: 75px; padding-bottom: 30px;}
  	.user-list .container .left .textbox{top:-48px;}
  	.user-list .container .textbox .text1{font-size: 14px; }
  	.user-list .container .textbox .text1 b{font-size: 16px;line-height: 1;}
  	.user-list .container .textbox .text2{ font-size: 14px; line-height: 1;}
  	.user-list .container .right li{font-size: 12px;}
	.intro .right h3{ font-size:16px;}
  	.intro .right li{ font-size: 12px;}
  	.features .pro-features-list{ padding: 0;}
  	.features .arrow{ display: none;}
  	.features .pro-features-list h4 span{ font-size: 14px; padding: 5px;}
  	.features .pro-features-list .textbox b,.features .pro-features-list .textbox p.desc{ font-size: 12px;line-height:1.2}
  	.features .thumb-list li .text img{ visibility: hidden;}
  	.features .thumb-list li .text .t1{font-size: 16px; font-weight: bold;}
  	.features .thumb-list li .text .t2{visibility: hidden; }
  	.specification{padding-bottom:25px}
  	.specification .specbox{ margin-top: 12px; height: 240px;}
  	.article-list{ margin-top: 15px;}
  	.article-list a.article-link h4{ font-size: 14px; font-weight: bold;max-height: 30px;overflow: hidden;}
  	.article-list a.article-link p{ max-height: 54px; overflow: hidden;}
  	.myvideo{ width: 480px; height: 270px;  margin-top: -135px; margin-left: -240px; }
  	.img-show-table{ width: 100%;}
  	.img-show-container .img-arr.left{ left: 0;}
  	.img-show-container .img-arr.right{ right: 0;}
  	.article-list a.article-link .text{  position: absolute; right:0; top: 0; height: 100%; overflow: hidden;}
  	.articles{ padding-bottom:10px;}
  	.pictures{ padding-bottom: 50px; padding-top: 30px; font-size: 12px; line-height: 1.2;}
  	.pictures h3{ padding-bottom: 10px;}
  	.col-xs-3.piclist{ padding-left: 5px; padding-right: 5px;}
  	.go-top{display: none;}
  }
@media screen and (max-width: 420px){
  	.article-list a.article-link .text p{ visibility: hidden;}
  	.features .thumb-list li{ width: 48%; margin: 0;}
  }
@media screen and (max-width: 500px){
 	.myvideo{ width: 320px; height: 180px;  margin-top: -90px; margin-left: -160px; }
 }
@media screen and (max-width: 340px){
	.article-list a.article-link h4{ margin-top: 0;margin-bottom: 0;}
}
@media screen and (max-width: 319px){
	body{ display: none;}
}
@keyframes fadeIn{
	from{ opacity: 0;}
	to{ opacity: 1;}
}
@-webkit-keyframes fadeIn{
	from{ opacity: 0;}
	to{ opacity: 1;}
}