@charset "utf-8";
.slider img{ display: block; width: 100%;}
.slider p{ margin-top: 20px; font-size: 16px; color: #666; text-align: center;}

.recommend{ margin-top: 70px;}
.slickslider{ margin-top: 50px;}
.slickslider .slick-slide{ position: relative; float: left; margin: 0 8px;  width: 282px; height: 298px; border: 1px solid #ababab; text-align: center; overflow: hidden;}
.slickslider .slick-slide a{ display: block;}
.slickslider .slick-slide .cover{ display: none; position: absolute; padding: 10px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); left: 0; top: 0; box-sizing: border-box;}
.slickslider .slick-slide a:hover .cover{ display: block;}
.slickslider .slick-slide .titbox{ display: table; width: 100%; height: 100%; border: 1px solid #f5f5f5;}
.slickslider .slick-slide .cover h3{ display: table-cell; width: 100%; height: 100%; color: #fff; font-size: 24px; text-align: center; vertical-align: middle;}
.slickslider .slick-dots{ bottom: -30px;}
.slickslider .slick-dots li{ background-color: #707070;}
.slickslider .slick-dots li.slick-active{ background-color: #eb580b;}
.slickslider .slick-prev{ margin-left: -650px;}
.slickslider .slick-next{ margin-right: -650px;}

.aboutbox{ margin-top: 120px;}
.aboutbox .about{ width: 40%;}
.aboutbox .about h2{ line-height: 46px; font-size: 32px; font-weight: bold; color: #eb580b;}
.aboutbox .about h3{ position: relative; line-height: 58px; font-size: 20px;}
.aboutbox .about h3:after{ content: ''; position: absolute; display: inline-block; width: 40px; height: 2px; background-color: #a3a3a3; bottom: 0; left: 0;}
.aboutbox .companyintro{ margin-top: 20px; line-height: 30px; color: #666;}
.aboutbox .more{ margin-top: 30px;}

.prolist{ margin-top: 40px;}
.prolist .proslide{ margin-top: 40px;}
.prolist li.clearfix{ height: 726px;}
.prolist .item{ position: relative; float: left; margin: 20px 8px;  width: 282px; text-align: center; border: 1px solid #ababab;}
.prolist .item.firstItem{ width: 574px;}
.prolist .item a{ display: block; font-size: 16px;}
.prolist .item img{ display: block; width: 282px; height: 298px;}
.prolist .item.firstItem img{ width: 574px;}
.prolist .slick-dots{ bottom: 0;}
.prolist .slick-dots li{ background-color: #707070;}
.prolist .slick-dots li.slick-active{ background-color: #eb580b;}
.prolist .slick-prev{ margin-left: -650px;}
.prolist .slick-next{ margin-right: -650px;}
.prolist .item .cover{ display: none; position: absolute; padding: 10px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); left: 0; top: 0; box-sizing: border-box;}
.prolist .item a:hover .cover{ display: block;}
.prolist .item .cover .titbox{ display: table; width: 100%; height: 100%; border: 1px solid #f5f5f5;}
.prolist .item .cover h3{ display: table-cell; width: 100%; height: 100%; color: #fff; font-size: 24px; text-align: center; vertical-align: middle;}

.advance{ margin-top: 115px; padding-top: 70px; height: 230px; background-color: #9b9b9b;}
.advance li{ position: relative; float: left; width: 16.66%; text-align: center; color: #fff;}
.advance li:before{ content: ''; position: absolute; display: block; margin-top: -40px; width: 1px; height: 80px; left: 0; top: 50%; background-color: #919090;}
.advance li.first:before{ display: none;}
.advance li h3{ font-size: 16px;}
.advance li p{ margin-top: 20px;}

.newsbox{ margin-top: 50px; overflow: hidden;}
.newsbox ul{ margin-top: 50px; width: 110%;}
.newsbox li{ float: left; margin-right: 18px; width: 386px; height: 380px; border: 1px solid #b1b1b1;}
.newsbox li img{ width: 100%; height: 240px;}
.newsbox li h2{ line-height: 52px; font-size: 16px; text-align: center;}
.newsbox li p{ padding: 0 10px; line-height: 28px; color: #666;}
.newsbox li a:hover h2{ color: #eb580b;}
.newsbox .more{ display: block; margin: 50px auto;}

@media screen and (max-width: 1200px) {
	.recommend{ margin-top: 20px;}
	.slickslider{ margin-top: 30px;}
	.slickslider .slick-slide{ height: auto;}
	.slick-slide img{ max-width: 100%; height: auto;}

	.aboutbox{ margin-top: 60px;}
	.aboutbox .about{ margin-top: 15px; width: 100%;}
	.aboutbox .about h2{ font-size: 26px; line-height: 32px;}
	.aboutbox .about h3{ line-height: 48px; font-size: 18px;}
	.aboutbox .more{ display: block; margin: 10px auto 0;}
	
	.prolist{ margin-top: 20px;}
	.proslide li{ display: none;}
	.proslide li:nth-child(1){ display: block; border: 1px solid #ababab}
	.prolist li.clearfix{ height: auto; padding: 0 8px;}
	.prolist .item{ margin: 10px 0; width: 100%; border: 0;}
	.prolist .item img{ width: 100%; height: auto;}

	.advance{ margin-top: 30px; padding: 30px 0; height: auto;}
	.advance li{ margin: 10px 0; width: 33.33%;}
	.advance li:nth-child(4):before{ display: none;}
	.advance li p{ display: none;}

	.newsbox{ margin-top: 20px;}
	.newsbox ul{ margin-top: 20px; width: 100%;}
	.newsbox li{ margin: 10px 0; width: 100%; height: auto;}
	.newsbox li img{ height: auto;}
	.newsbox .more{ margin: 20px auto;}
}