/* CSS Document */

.banner{ height:500px; background-color: #eee;/*background-image: url("../images/banner.jpg");*/}
.banner a{ height: 500px; display: block; background-position: center; background-repeat: no-repeat; background-size: cover;}
@media only screen and (max-width:480px) {
	.banner{ height:140px;}
	.banner a{ height:140px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
	.banner{ height:500px;}
}




.module{ position: relative;}
.module .titleBar{ text-align: center; padding-top: 60px;padding-bottom: 40px;}
.module .titleBar p{ color: #999; font-size: 16px; padding-top: 20px;}
.module .titleBar strong{ font-size: 32px; color: #00adbc;}
.module .content{}


#product{ background-image: url("../image/product.jpg"); height: 510px; background-position: center top; background-repeat: no-repeat;}

.cateList{ display: flex; margin: auto; }
.cateList li{ width: 200px;}
.cateList li p{ text-align: center; font-size: 18px; line-height: 50px;}
.cateList li .preview{ width: 180px; height: 180px; background-color: #eee;}


.itemList{ display: flex; margin: auto; width: 500%; position: absolute; left: 0; top: 0; transition: all 0.5s; flex-wrap:wrap;}
.itemList li{ width: 5%;}
.itemList li p{ text-align: center; font-size: 18px; line-height: 30px;}
.itemList li .preview{ width: 240px; height: 240px; display: block; background-color: #eee; margin-bottom: 10px; margin: auto;}
.itemList li .preview img{ width: 100%;height:100%;object-fit: cover;}
.itemList .name{ font-size: 18px; padding-top: 10px; color: #00adbc;}
.itemList .codeName{ font-size: 18px; padding-top: 10px; color: #00adbc;}
.itemList .categoryName{ font-size: 14px;}
















#product .content{ width: 1260px; height: 320px; display: flex; margin: auto;}
#product .container{ width: 1200px; height:320px;background-position: center;background-repeat: no-repeat;display: block; overflow: hidden; position: relative;;}
.leftArrow{ width: 30px; height: 50px; background-image: url(../image/leftArrow.png); background-position: center;background-repeat: no-repeat; margin-top: 100px; cursor: pointer;}
.rightArrow{ width: 30px; height: 50px; background-image: url(../image/rightArrow.png);background-position: center;background-repeat: no-repeat; margin-top: 100px; cursor: pointer;}

.itemList.focusNum_0{left:-0%}
.itemList.focusNum_-1{left:-100%}
.itemList.focusNum_-2{left:-200%}
.itemList.focusNum_-3{left:-300%}
.itemList.focusNum_-4{left:-400%}

@media only screen and (max-width:480px) {
	#product{ height: 650px;}
	.itemList li{ width: 10%; padding-bottom: 10px;}
	.itemList li .preview{ width: 150px; height: 150px;}
	#product .content{ width: 100%; height: 600px;}
	#product .container{ width: 90%; height:600px;}
	.leftArrow{ margin-top: 170px;}
	.rightArrow{ margin-top: 170px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
}










#service{ background-image: url("../image/service.jpg"); height: 750px; background-position: center top; background-repeat: no-repeat;}
#service .content{ display: flex; flex-wrap:wrap;}
#service .service{ width:50%; height: 550px; background-color: #fff; position: relative; overflow: hidden;}
#service .service .bg{width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 100; transition: all 0.5s; transform: scale(1.0);}
#service .service:hover .bg{ transform: scale(1.05);}

#service .service .bg2{width: 100%; height: 100%; background-color: rgba(0,0,0,1); position: absolute; left: 0px; top: 0px; z-index: 200; transition: all 0.5s; opacity: 0.3;}
#service .service:hover .bg2{ opacity: 0.5;}

#service .service .info{ height: 550px; max-width: 500px; position:absolute; padding-left: 30px; padding-right: 30px; z-index: 300; }



#service .service:nth-child(1) .info{right: 0;}

#service .service:nth-child(1) .bg{ background-image: url("../image/1.jpg");}
#service .service:nth-child(2) .bg{ background-image: url("../image/2.jpg");}



#service .service .title{ font-size: 32px; color: #fff; font-weight: normal;}
#service .service .intro{ color: #fff;}
#service .service .more{ display: block; color: #fff; text-align: center; font-size: 16px;}






@media only screen and (max-width:480px) {
	#service .service{ width:100%; height: 275px;}
	#service .service:nth-child(1) .info{right: auto;}
	#service .service .title{ padding-top: 50px;padding-bottom: 20px;}
	#service .service .intro{ line-height: 20px; height: 100px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	#service .service .info{ padding-left: 100px;padding-right: 100px;}
	#service .service .title{ padding-top: 120px;padding-bottom: 30px;}
	#service .service .intro{ line-height: 30px; height: 140px;}
}
@media only screen and (min-width:1025px) {
	#service .service .info{ padding-left: 100px;padding-right: 100px;}
	#service .service .title{ padding-top: 120px;padding-bottom: 30px;}
	#service .service .intro{ line-height: 30px; height: 140px;}
}















#news{ background-image: url("../image/news.jpg"); height: 660px; background-position: center top;background-repeat: no-repeat;}
#news .tabList{ justify-content: center;}
#news .tabList li{ width: 120px; height:40px; line-height: 40px; cursor: pointer; margin: 0;}
#news .tabList li.active{ background-color: #00adbc;}

#news .tabContent.active{ display: flex; flex-wrap: wrap;}
#news .tabContent div{}

#news .articleList{ padding: 40px 0; padding-left: 60px;}
#news .articleList .title{ font-size: 16px; line-height: 25px; padding: 10px 0; height: 50px;}
#news .articleList .createDate{ line-height: 30px; color: #666;}
#news .articleList .preview{ display: none;}


#news .recommend{ padding-top: 20px;}
#news .recommend .articleList{ padding: 40px 0;}
#news .recommend .articleList li{background-image: url(../image/newsBg.png); width: 430px; height: 360px; background-repeat: no-repeat; padding-left: 10px; padding-top:10px; background-size: cover; margin: auto; background-size:contain; border: none;}
#news .recommend .articleList .title{ font-size: 16px; line-height: 25px;color: #fff; padding: 10px 10px; max-width: 320px;}
#news .recommend .articleList .title a{ color: #fff;}
#news .recommend .articleList .createDate{ line-height: 30px; color: #666; position: absolute; right: 00px; bottom: 10px; color: #fff; opacity: 1;; width: 85px; height:65px; text-align: center;}
#news .recommend .articleList .createDate .day{ font-size: 32px; display: block;}
#news .recommend .articleList .createDate .yearAndMonth{ font-size: 12px; display: block;}
#news .recommend .articleList .preview{ display: block; width: 420px; height:280px; border: none;}


/*#news .normal li:nth-child(1){ display: none;}*/


@media only screen and (max-width:480px) {
	#news{height: auto; background: none;}
	#news .tabContent div{ width: 100%;}
	#news .recommend .articleList li{ width: 350px; height: 300px;}
	#news .recommend .articleList .preview{width: 320px; height:210px; }
	#news .recommend .articleList .createDate{ bottom: 15px; width: 70px;}
	#news .recommend .articleList .title{ max-width: 280px;}
	#news .recommend .articleList{ padding: 20px 0;}
	#news .articleList{ padding: 20px 0;padding-left: 0px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	#news{height: 660px;}
	#news .tabContent div{ width: 50%;}
}
@media only screen and (min-width:1025px) {
	#news{height: 660px;}
	#news .tabContent div{ width: 50%;}
}





#company{ background-image: url("../image/company.jpg"); background-position: center top; background-repeat: no-repeat; background-color: #fff;}
#company .image{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#company img{}

#company .intro{ font-size: 16px; line-height: 30px; text-align: center; padding:50px 0;}
#company .more{ width: 145px; height: 43px; display: block; color: #fff; line-height: 43px; text-align: center; font-size: 16px; margin:auto; background-image: url(../image/moreBg.png);}

.more{ width: 145px; height: 43px;background-image: url(../image/moreBg.png); line-height: 43px;}


@media only screen and (max-width:480px) {
	#company{ background:none;}
	#company .image{justify-content:space-around;}
	#company img{ width:150px; height: 100px; margin-bottom: 20px;}
	#company{ height: 1050px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	#company img{ width:300px; height: 200px;}
	#company{ height: 650px;}
}
@media only screen and (min-width:1025px) {
	#company img{ width:300px; height: 200px;}
	#company{ height: 650px;}
}