body{ position: relative; padding-top: 1000px; padding-bottom: 140px; width: 100%; overflow-x: hidden;}
.clearfix { clear: both; }
.clearfix::after { content: ' '; height: 0; overflow: hidden; display: block; clear: both; }
#head{ position: fixed; bottom:0; left: 0; z-index: 2000;}

#banner{ width: 100%; position: relative; overflow: hidden;}
#banner .bannerswiper{ position: absolute; left:0; top:0; width: 100%; height: 100%;}
#banner .bncon{ width: 587px; height: 327px; text-align: center; background: rgba(0,0,0,0.7); position: absolute; left: 50%; top:50%; margin-left: -294px; margin-top: -164px; z-index: 20; opacity: 0; }
#banner .bncon .logo{ padding:40px 0 20px;}
#banner .bncon .con{ font-size: 22px; line-height: 36px; color: #fff;}
#banner .bannerswiper .swiper-slide{ text-align: center; vertical-align: middle;}
#banner .bannerswiper .swiper-slide img{ max-width: 100%; max-height: 100%;}
#banner .wrapper{ width:100%; height: 100%; position: absolute; left: 0; top:0; }
#banner .wrapper .slide{ width: 100%; height: 100%; position: absolute; left: 0; top:0; z-index: 2; opacity: 0;}
#banner .wrapper .slide.active{ z-index: 3;}
#banner .wrapper .slide img{ /* width: 100%; height: 100%; */}
#banner .pagination{ width: 100%; text-align: center; position: absolute; bottom: 20px; z-index: 30;}
#banner .pagination span{ cursor: pointer; display: inline-block; background: url(../images/circle.png) no-repeat -19px center; width: 12px; height: 12px; margin-left: 12px;}
#banner .pagination span.active{background: url(../images/circle.png) no-repeat 0 center;}

/* about */
#about{ margin-top: 70px; padding-top: 100px; margin-bottom: 65px; width: 1000px; overflow: hidden;}
#about h2,#product h2,#news h2,#join h2,#contact h2{ font-size: 26px; line-height: 1em; text-align: center; font-weight: normal; padding-bottom: 25px; background: url(../images/title_line.png) no-repeat center bottom; color: #333;}
#about .jj,#join .jj{width: 830px; margin:50px auto; color: #333; overflow: hidden;}
#about .jj .jjleft,#join .jj .jjleft{ width: 47px; height: 104px; background: url(../images/left_yin.jpg) no-repeat left 30px;}
#about .jj .jjright,#join .jj .jjright{ width: 47px; height: 104px; background: url(../images/right_yin.jpg) no-repeat right 30px;}
#about .jj p,#join .jj .con{ width: 728px; text-indent: 2em; font-size: 16px; line-height: 2em; position: relative; top:-150px; }
#about .content{ width: 1000px; overflow: hidden;}
#about .content .pic{ width: 465px; /* opacity: 0; filter:alpha(opacity=0); position: relative; left:-50%; */}
#about .content .con{ width: 502px; padding-top: 10px; color: #666; font-size: 14px; line-height: 32px; text-indent: 2em;/*  opacity: 0; filter:alpha(opacity=0); position: relative; left:50%; */}


/* product */
#product .content{ margin-top: 60px; margin-bottom: 100px;}
#product .content ul li{ width: 33%; float: left; display: inline; border:1px solid #d9d9d9; height: 0; border-right: none; padding-bottom: 26%; cursor: pointer;}
#product .content ul li.yemet{ border-right: 1px solid #d9d9d9;}
#product .content ul li .logo{ width: 100%; height: 120px; }
#product .content ul li h3{ font-size: 16px; line-height: 2em; color: #333; text-align: center;}
#product .content ul li p{ font-size: 14px; line-height: 2em; color: #666; padding:0 15px;}
#product .content ul li:hover{ background: #f3f3f3;}
/* #product .content ul li:hover h3{ color: #fff; }
#product .content ul li:hover p{ f color: #999;} */
#product .content ul li:nth-child(3n+0) { border-right: 1px solid #d9d9d9;}
#product .content ul li .logo.hetdo { background: url(../images/black_hetdo.png) no-repeat center;}
#product .content ul li .logo.sqt { background: url(../images/black_sqt.png) no-repeat center;}
#product .content ul li .logo.yemet { background: url(../images/black_yemet.png) no-repeat center;}
#product .content ul li .logo.sfsales { background: url(../images/icon-sfsales.png) no-repeat center; object-fit: cover;}


/* 
#product .content ul li.hetdo:hover .logo{ background: url(../images/white_hetdo.png) no-repeat center;}
#product .content ul li.sqt:hover .logo{ background: url(../images/white_sqt.png) no-repeat center;}
#product .content ul li.yemet:hover .logo{ background: url(../images/white_yemet.png) no-repeat center;} */

/* news */
#news{ width: 100%;  background: #049eea; padding:80px 0 100px; position: relative;}
#news h2{ background: url(../images/title_line2.png) no-repeat center bottom; color: #fff; margin-bottom: 60px;}
#news .newsprev,#news .newsnext{ position: absolute; width: 60px; height: 120px; top:50%; margin-top: -60px; cursor: pointer; }
#news .newsnext{ background: url(../images/next.png) no-repeat center; right:0;}
#news .newsprev{ background: url(../images/prev.png) no-repeat center; left:0;}

/* sgslider css begin */
	#sgSlider{ width: 1000px; overflow: hidden;}
	#sgSlider ul { display: none;}
	#sgSlider ul li{ width: 214px; margin-right: 48px; float: left; display: inline;}
	#sgSlider ul li a{ color: #fff;}
	#sgSlider ul li img{ width: 205px; height: 205px; border:3px solid #fff;}
	#sgSlider ul li h4{ font-weight: normal; font-size: 16px; line-height: 30px; color: #fff; margin-top: 5px; width: 200px; padding:0 7px;}
	#sgSlider ul li p{ font-size: 12px; line-height: 30px; color: #fff; width: 200px; padding:0 7px;}
/* sgslider css end */


/* join */
#join{ padding-top: 100px;}
#join .tabtitle{ width: 100%; height: 35px; border-bottom: 1px solid #d9d9d9;}
#join .tabtitle ul{ padding-left: 55px;}
#join .tabtitle ul li{ float: left; width: 170px; height: 35px; line-height: 35px; background: #333333; color: #fff; text-align: center; font-size: 14px; margin-right: 10px; cursor: pointer;}
#join .tabtitle ul li.active,#join .tabtitle ul li:hover{ background: #04a1ec;}
#join .tabcontent{ width: 100%; position: relative;}
#join .tabcontent ul{ width: 470px; padding:0 42px;}
#join .tabcontent ul li{ font-size: 14px; line-height: 32px; display: none;}
#join .tabcontent ul li.active{ display: block;}
#join .tabcontent ul li h4{ font-weight: normal; color: #333; padding-top: 40px;}
#join .tabcontent ul li p{ color: #666; padding-left:32px; font-size: 14px;}
#join .hr_email{ width: 280px; padding:110px 60px 20px; color: #666; font-size: 16px; line-height: 2em; text-align: center; background: #f3f3f3 url(../images/email.png) no-repeat center 30px; position: absolute; right:40px; top:130px; }
#join .hr_email p{ font-size: 12px;}


/* contact */
#contact{ padding-top: 100px;}
#contact .contactway{ width: 920px; margin:0 auto; padding:45px 0 90px;}
#contact .contactway h3{ font-weight: normal; font-size: 20px; line-height: 32px; color: #000; margin-bottom: 10px;}
#contact .contactway p{ width: 50%; float: left; display: inline; line-height: 32px; font-size: 16px; color: #666;}
#contact .contactmap{ width: 100%; height: 476px; overflow: hidden; padding-top: 60px;}
#map{ width: 100%; height: 100%;}


/* 返回顶部 */
#scrollt{ width: 45px; height: 45px; position: fixed; right: 2%; bottom: 10%; cursor: pointer; background: url(../images/top.png) no-repeat center; display: none;}


/* right nav dot */
#navdot{ width:20px; position: fixed; right: 5%; top:50%; margin-top: -100px; z-index: 3000;}
#navdot p{ cursor: pointer; background: url(../images/circle2.png) no-repeat -19px center; width: 12px; height: 12px; margin-bottom: 12px;}
#navdot p.active{background: url(../images/circle2.png) no-repeat 0 center;}