.banner img{width: 100%;}

.products{ margin-top: 50px;}

.products ul {display: flex;justify-content: flex-start; align-items: flex-start; flex-flow: wrap;}
.products ul li { width:calc(100%/2 - 20px) ; margin-right: 20px; position: relative; margin-bottom: 50px;overflow: hidden;}
.products ul li a{display: block;}
.products ul li img{width: 100%;}
.products ul li .bg{display: none; position: absolute;top: 0px; bottom: 0px; right: 0px; left: 0px;background: rgba(0,0,0,0.5); }
.products ul li .text{ position: absolute; top: 60px;left: 0px;  z-index: 3; color: #FFFFFF; padding: 0px 50px;}
.products ul li .text h2{font-size: 30px; font-weight: bold;transition: all 0.3s; color: #fff;}
.products ul li .text p{display: none; font-size: 16px; line-height: 2; margin-top: 30px;}
.products ul li:nth-child(2) h2{color: #333;}
.products ul li:hover h2{color: #E22529;transform: translateX(8px);}
.products ul li:hover p{display: block;}
 .products ul li:hover .bg{display: block;}
 /*  */

.main-nav{border-bottom: 1px solid #C0BFC4; padding: 20px 0px; width: 100%;}
.main-nav ul{display: flex;justify-content: center; align-items: center; flex-flow: wrap;}
.main-nav  li{border-radius: 40px;   margin-right: 20px;}
.main-nav li a{display: block; font-size: 16px;padding: 5px 35px;color: #333333; }
.main-nav li.active{background: #E22529;}
.main-nav li.active a{color: #FFFFFF;}
.main-nav li:hover{background: #E22529;} 
.main-nav li:hover a{color: #FFFFFF;}

.about{position: relative; margin-top: 75px; height: 650px;}
.about .left {position: absolute; width: 50%; z-index: 2;}
.about .right{position: absolute; right: 0px; top: 0;}

.about  h2{font-size: 33px; font-weight: bolder; color: #e63e3e; border-left: 3px solid #E63E3E; padding-left: 10px;}

.about  .text-en{font-size: 24px; color: #d5d5d5;font-variant: small-caps;}
.about .text{background: #f3f3f3; border-radius: 5px; padding: 40px; margin-top: 68px;}
.about .text h3{font-size: 30px; font-weight: bold;margin-bottom: 30px;}
.about .text p{font-size: 14px; line-height: 2.5;}
.danye{min-height: inherit;margin-top: 75px;    margin-bottom: 75px;}
.danye ul{display: flex; width: 60%;margin: 0px auto;}
.danye ul li{width: 45%;}
.case-nav{ background: #f4f4f0; border-bottom: 1px solid #CCCCCC; padding: 20px 0px;}
.case-nav ul {display: flex;justify-content: center; align-items: center; flex-flow: wrap;}
.case-nav ul li{margin-right: 50px;}
.case-nav ul li.active a{font-size: 18px; font-weight: bold;color: #E22529;}
.case-nav ul li:hover a{color: #E22529;}
.case{margin-top: 50px; margin-bottom: 50px;}
.case ul{display: flex;justify-content: flex-start; align-items: flex-start;flex-flow: wrap;}
.case ul li{width:calc(100%/4 - 20px);position: relative;overflow: hidden; margin-right: 20px; margin-bottom: 30px;}
.case ul li a{display: block; }
.case ul li .img{border: 1px solid #CCCCCC;margin-bottom: 50px;}
.case ul li img{width: 100%;}
.case ul li .text{height: 50px;overflow: hidden;position: absolute; bottom: 0px; background: #4b5e79; color: #FFFFFF;transition: all 0.3s;width: 100%;}
.case ul li .text h2{font-size: 16px;/*font-weight: bold; */text-align: center; height: 50px; line-height: 50px; }
.case ul li:hover .img{}
.case ul li:hover .text{position: absolute;  bottom: 0; height: 100%; width: 100%; padding-top: 30px;background: rgba(75,94,121,0.7); }
.case ul li:hover p{padding: 0px 20px; font-size: 14px; line-height: 2;}

.video{margin-top: 50px;margin-bottom: 50px;}
.video ul{display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: wrap;}
.video ul li{width:calc(100%/4 - 20px);position: relative;overflow: hidden; margin-right: 20px; margin-bottom: 30px; background: #f0f0f0; padding: 10px;}
.video ul li .img{text-align: center;}
.video ul li img{width: 100%;}
.video ul li .text{text-align: center; font-size: 18px; color: #333333; padding: 10px 0px;}
.video ul li:hover{background: #3ba1f6;}
.video ul li:hover .text{color: #FFFFFF;}


.horor{margin: 50px auto;}
.horor ul{display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: wrap;}
.horor ul li{width:calc(100%/4 - 20px);position: relative;overflow: hidden; margin-right: 20px; margin-bottom: 30px; border: 1px solid #CCCCCC;   padding: 10px;}
.horor ul li .img{text-align: center; overflow: hidden;}
.horor ul li img{width: 100%;}
.horor ul li .text{text-align: center; font-size: 16px; color: #333333; padding: 10px 0px;}
.horor ul li:hover img{transform: scale(1.1);}
.horor ul li:hover .text{color: #E22529;}


.news{ margin-top: 50px;}
.news ul li{margin-bottom: 30px; border-bottom: 1px solid #CCCCCC;}
.news ul li a{display: flex;justify-content: flex-start; align-items: center;flex-wrap: wrap;color: #333333;}
.news ul li .img{width: 30%; margin-right: 65px;overflow: hidden;}
.news ul li img{width: 100%;}
.news ul li .right {display: flex; align-items: center;}
.news ul li .right .iconfont{font-size: 46px; font-weight: bold;color: #999999;}
.news ul li .text{flex:1;}
.news ul li .text div{font-size: 14px;}
.news ul li .text div span{margin-right: 20px; color: #9a9a9a;}
.news ul li .text h2{font-size: 18px; font-weight: bold; margin-top: 10px; position: relative; }
.news ul li .text h2::after{content: ''; height: 3px; width: 50px; background: #E22529;position: absolute; left: 0px; bottom: -20px;}
.news ul li .text p{font-size: 16px; color: #666666; margin-top: 35px; line-height: 2;}
.news ul li:hover{background: #f9f9f9;}
.news ul li:hover .text h2{color: #E22529;transform: translateX(8px);}
.news ul li:hover img{transform: scale(1.1);}
.news ul li:hover .iconfont{color: #E22529;}
.newshow{margin-top: 80px;}
.newshow h2{text-align: center;font-size: 30px;font-weight: bold;}
.newshow .timer{text-align: center; border-bottom: 1px solid #CCCCCC; padding-bottom: 10px;font-size: 14px;}
.newshow .timer span{margin-right: 20px; color: #666;}
.showmain{padding: 15px 0px;border-bottom: 1px solid #CCCCCC; }
.showmain img{max-width: 100%;}
.showmain ul {display: flex;justify-content: flex-start;align-items: flex-start;flex-flow: wrap;}
.showmain ul li { width: calc(100%/3 - 20px); margin-right: 20px; position: relative; margin-bottom: 50px; overflow: hidden;}

.back{display: table;cursor: pointer; justify-content: center; text-align: center; margin: 30px auto; background: #E22529;font-size: 16px;color: #FFFFFF; padding: 8px 30px;}

.videoshow{text-align: center;}

.contact{display: flex; justify-content: space-between; align-items: center; flex-flow: row-reverse; margin-top: 50px; margin-bottom: 50px;}
.contact .left{width: 55%; margin-right: 5%;}
.contact .right{width: 40%;}
.contact .right h2{font-size: 18px; font-weight: bold;}
.contact .right p{font-size: 16px; color: #555555;background-image: url(../images/cntact_05.jpg) ; background-repeat: no-repeat; padding-left: 25px; margin-top: 30px;}
.contact .right p:nth-child(2){background-position: 0px 5px;}
.contact .right p:nth-child(3){background-position: 0px -42px;}
.contact .right p:nth-child(4){background-position: 0px -90px;}
.contact .right p:nth-child(5){background-position: 0px -137px;}
.contact .right p:nth-child(6){background-position: 0px -187px;}


#map{width: 100%; height: 400px;}
.msg{background: url(../images/cntact_04.jpg) center center no-repeat; padding: 50px 0px;}
.msg h2{text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 40px;}
.layui-form-item{display: flex; justify-content: space-between; align-items: center;}
.layui-form-item>.layui-input{width:23%; border: 1px solid #CCCCCC; line-height: 35px; padding-left: 10px;}
::-webkit-input-placeholder{color: #999;}
 .layui-textarea{width: 100%; margin-top: 30px ; height: 100px; border-color: #CCCCCC; color: #999999; padding: 1%;}
 .layui-form-input{display: flex; justify-content: flex-start; align-items: center;line-height: 35px; margin-top: 30px;}
  .layui-form-input  .layui-input{border: 1px solid #CCCCCC; line-height: 35px; padding-left: 10px; }
	
	.validateImg{height: 39px; margin-right: 30px;}
 .layui-btn{background: #2a3046; color: #FFFFFF; width: 280px; border: 0;  font-size: 16px;}
 
@media screen and (max-width:1080px) {
	 .main-nav li{margin: 0;}
	 .main-nav li a{padding: 0.5vw 3vw; font-size: 4vw;}
	 .wap-nav{display: flex; justify-content:space-between; align-items: center;border-bottom: 1px solid #C0BFC4; padding:3vw 5vw ;position: relative;}
	 .wap-nav .left a{font-weight: 6vw; font-weight: bold;}
	 .wap-nav .midd{}
	 .wap-nav .midd .midd-nav{position: absolute;z-index: 9;left:40%; background: #FFFFFF; padding: 5vw;display: none;}
	 .wap-nav .midd .midd-nav li{line-height: 8vw; border-bottom: 1px solid #CCCCCC;}
	 .news{margin-top: 6vw;}
	 .news ul li{ margin: 1%; border: 1px solid #CCCCCC; margin-bottom: 5vw;}
   .news ul li a{flex-flow: column;align-items:flex-start;}
	 .news ul li .img{width: 100%; margin: 0;}
	 .news ul li .text{margin-top: 5vw; padding: 2% 5%;}
	 .newshow{margin-top: 5vw;}
	 .newshow h2{font-size: 6vw;}
	 .newshow .timer{font-size: 12px;}
	 .back{font-size: 14px;}
	 .case{ margin: 6vw 0px;}
	 .case ul li{width: 48%;  margin: 1%; margin-bottom: 3%;}
	 .case ul li .img{margin-bottom: 40px;}
	 .case ul li .text{height: 40px;}
	 .case ul li .text h2{font-size: 14px; height: 40px; line-height: 40px;}
	 .products{margin-top: 6vw; margin-bottom: 6vw;}
	 .products ul li{width: 100%; margin: 0; margin-top: 6vw;}
	 .products ul li .text{padding: 0px 5vw; top: 8vw;}
	 .products ul li .text h2{font-size: 6vw;}
	 .products ul li .text p{margin-top: 4vw; font-size: 14px;}
	 .video ul li{width: 48%;  margin: 1%; margin-bottom: 3%;}
	 .video ul li .text{font-size: 14px; padding-bottom: 0;}
	 
	 .horor ul li{width: 48%;  margin: 1%; margin-bottom: 3%;}
	 .horor ul li .text{font-size: 14px; padding-bottom: 0;}
	 .horor{margin-top: 6vw;}
	 .about{height: auto;margin-top: 10vw; margin-bottom: 7vw;}
	 .about .left{position: relative;width: 100%; margin-bottom: 8vw;}
	 .about h2{font-size: 6vw;}
	 .about .text-en{font-size: 3vw;}
	 .about .right{position: relative; width: 100%;}
	 .about .text{padding:5% 3%; margin-top: 10vw;}
	 .about .text h3{font-size: 18px; margin-bottom: 3vw;}
	 .about .text p{font-size: 16px; line-height: 2;}
	 .about .right img{width: 100%;}
	 .msg{background-size: cover;}
	 .contact{flex-flow: column; }
	 .contact .left{width: 100%; margin: 0;}
	 .contact .right{width: 100%;}
	 .layui-form-item{flex-flow: column;}
	 .layui-form-item>.layui-input{width: 100%; margin-bottom: 6vw;}
	 .layui-textarea{margin-top: 0;}
	 .layui-form-input{margin-top: 6vw; flex-flow: column; justify-content: flex-start; align-items: flex-start;}
	 .layui-form-input .layui-input-inline{margin-bottom: 6vw;}
	
	 .showmain ul li {width: 100%; margin: 0; margin-top: 6vw;}
	
	.danye ul{width: 100%; display: block; padding:  0 20px;}
	.danye ul li{width: 100%;}
	.danye ul li img{width: 100%;}
}