.IndAbout{ padding:130px 0; background:#f3f4f8;}
.IndAbout .container0{ display:flex; justify-content:space-between; align-items:center;}
.IndAbout .IndAboutL, .IndAbout .IndAboutR{ width:45%;}
.IndAbout .IndAboutL .img{ position:relative;}
.IndAbout .IndAboutL .img::after{
	content: "";
	position: absolute;
	right: -120px;
	bottom: -20px;
	width: 168px;
	height: 156px; background:url(../images/sanjiao.png) no-repeat;
}
.IndAbout .img img{ width:100%;}
.IndAbout .txt{ color:#2b2b2b; margin-top:3em; font-family: 'poppins-light', sans-serif; font-size:1.1em; line-height:2;}
.IndAbout .IndAboutR span{ position:relative; }
.IndAbout .IndAboutR span::before{
	content: "";
	position: absolute;
	left: -110px;
	top: 8px;
	width: 80px;
	height: 2px;
	background-color: #ccc; 
}
.IndAbout .IndAboutR h2{ font-family:'DIDOT'; color:#000; font-size:4em; margin-top:0.5em;}
.IndAbout .IndAboutR .txt{ background:url(../images/GLP.png) center no-repeat; background-size: 90% 90%; padding-top:20px; padding-bottom:50px; margin-top:2em;}
.IndAbout .IndAboutR .img{ margin-top:4em;}
.IndAbout .IndAboutR .img video{ width:100%; height:auto;}

.IndProduct{ background:#222423; padding:130px 0;}
.IndProductBody{ position:relative;}
.IndProductBox{ margin-top:50px; width:100%; overflow:hidden;}
.IndProductLi{ position:relative;}
.IndProductLi h2{ position:absolute; bottom:0; width:100%; height:80px; margin:0; background:rgba(0,0,0,0.8); padding:0 10%; line-height:80px; color:#fff; font-size:2em; font-family:bahnschrift;}
.zhezhao {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;	
	transition: all .3s;
}
.IndProductLi:hover .zhezhao{ background: rgba(0,0,0,0); }
.IndProductLi:hover h2{ color:#ef171a;}
.IndProductBody .button_Next, .IndProductBody .button_Prev{ position:absolute; top:50%; width:33px; height:25px;}
.IndProductBody .button_Next{ right:-50px; background:url(../images/right.png) no-repeat;}
.IndProductBody .button_Prev{ left:-50px; background:url(../images/left.png) no-repeat;}

.IndDesign{ padding:130px 0;}
.IndDesign .IndTitle{ position:relative;}
.IndDesign .IndTitle h2{ color:#000; text-align:left;}
.IndDesign .IndTitle a.more{ position:absolute; right:0; top:0; display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #000; width:120px; height:55px; transition: all .3s;}
.IndDesign .IndTitle a.more span{ font-weight:bold; letter-spacing:2px; transition: all .3s;}
.IndDesign .IndTitle a.more .jiantou{ width:14px; height:10px; background:url(../images/jiantou.png); transition: all .3s;}
.IndDesign .IndTitle a.more:hover{ border-bottom:2px solid #ef171a;}
.IndDesign .IndTitle a.more:hover span{ color:#ef171a;}
.IndDesign .IndTitle a.more:hover .jiantou{ background:url(../images/jiantou_on.png);}
.IndDesignBody{ position:relative;}
.IndDesignBox{ margin-top:50px; width:100%; overflow:hidden;}
.IndDesignLi{}
.IndDesignLi h2{ color:#999; font-size:16px; font-family: 'poppins-light'; font-weight:100; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.IndDesignLi h2 b{ font-size:18px; color:#000; font-weight:bold;}
.IndDesignLi:hover h2 b{ color:#ef171a;}


.IndNews{ padding-bottom:130px;}
.IndNews .IndTitle h2{ color:#000; }
.IndNewsBody{ position:relative;}
.IndNewsBox{ margin-top:50px; width:100%; overflow:hidden;}
.IndNewsLi{}
.IndNewsLi h2{ font-size:1.2em; color:#000; font-weight:bold; text-align:center;}
.IndNewsLi:hover h2{ color:#ef171a;}
.IndNewsBody .swiper-pagination{ position:absolute; bottom:-50px;}

.IndContact{ padding:130px 0; background:url(../images/BgContact.jpg); background-size:100%;}
.IndContact .container0{ display:flex; justify-content:space-between; align-items:flex-start;}
.IndContact .IndContactL{ width:40%;}
.IndContact .IndContactL .IndTitle{ margin-bottom:60px;}
.IndContact .IndContactL .IndTitle h2{ text-align:left; color:#000; margin-bottom:0; margin-top:0;}
.IndContact .IndContactL .IndTitle p{ color:#999; font-family: 'poppins-light'; font-size:1.1em;}
.IndContact .IndContactL .contactLi{ border-top:1px solid #ccc; width:50%; float:left; padding:25px 0;}
.IndContact .IndContactL .contactLi:last-child{ width:100%;}
.IndContact .IndContactL .contactLi img{ display:block; margin-bottom:10px;}
.IndContact .IndContactL .contactLi span{ color:#000; font-weight:bold;}
.IndContact .IndContactR{ width:50%;}


@media screen and (max-width:1400px) {
	.IndAbout, .IndProduct, .IndDesign, .IndContact{ padding:100px 0;}
	.IndNews{ padding-bottom:100px;}
	.IndAbout .txt{ font-size:1em;}
	.IndAbout .IndAboutR span, .IndAbout .IndAboutL .img::after{ zoom:0.85;}
	.IndAbout .IndAboutR h2{ font-size:3em;}
	.IndProductLi h2{ font-size:1.5em;}
}
@media screen and (max-width:1200px) {
	.tel span{ font-size:1.5em;}
	.head .nav ul li .f_a{ padding:0 15px;}
	.IndAbout, .IndProduct, .IndDesign, .IndContact{ padding:80px 0;}
	.IndNews{ padding-bottom:80px;}
	.IndAbout .IndAboutR span, .IndAbout .IndAboutL .img::after{ zoom:0.7;}
	.IndAbout .IndAboutR .txt{ padding-top:0; padding-bottom:30px;}
	.IndDesign .IndTitle a.more{ height:45px;}
}
@media screen and (max-width:1024px) {
	.IndAbout{ width:100%; overflow-x:hidden;}
	.IndAbout .txt{ font-size:14px;}
	.IndProductLi h2{ font-size:18px; height:60px; line-height:60px;}
	.IndDesign .IndTitle a.more{ width:100px; height:36px;}
	.IndNewsLi h2{ font-size:18px;}
	.IndNewsBody .swiper-pagination{ bottom:-30px;}
	.IndContact .IndContactL .IndTitle p{ font-size:16px;}
	.IndContact .IndContactL .IndTitle{ margin-bottom:40px;}
}
@media screen and (max-width:768px) {
	.IndAbout, .IndProduct, .IndDesign, .IndContact{ padding:60px 0;}
	.IndNews{ padding-bottom:60px;}
	.IndAbout .IndAboutR span, .IndAbout .IndAboutL .img::after{ zoom:0.5;}
	.IndAbout .IndAboutR h2{ font-size:32px;}
	.IndAbout .txt{ margin-top:20px;}
	.IndAbout .IndAboutR .txt{ padding-bottom:0;}
	.IndAbout .IndAboutR .img{ margin-top:20px;}
	.IndProductBody .button_Next, .IndProductBody .button_Prev{ width:25px; height:20px; background-size:100%;}
	.IndProductBody .button_Next{ right:-30px;}
	.IndProductBody .button_Prev{ left:-30px;}
	.IndProductBox, .IndDesignBox, .IndNewsBox{ margin-top:40px;}
	.IndContact .container0{ flex-wrap:wrap;}
	.IndContact .IndContactL, .IndContact .IndContactR{ width:100%;}
	.IndContact .IndContactR{ margin-top:20px;}
}
@media screen and (max-width:600px) {
	.IndAbout, .IndProduct, .IndDesign, .IndContact{ padding:40px 0;}
	.IndNews{ padding-bottom:40px;}
	.IndProductBox, .IndDesignBox, .IndNewsBox{ margin-top:30px;}
	.IndAbout .container0{ flex-wrap:wrap-reverse;}
	.IndAbout .IndAboutL, .IndAbout .IndAboutR{ width:100%;}
	.IndAbout .IndAboutL, .IndAbout .IndAboutR .txt{ margin-top:20px;}
	.IndProductBody .button_Next, .IndProductBody .button_Prev{ display:none;}
	.IndDesign .IndTitle a.more{ width:55px; height:26px; }
	.IndDesign .IndTitle a.more span{ font-size:12px; letter-spacing:1px;}
	.IndContact .IndContactL .IndTitle, .itextarea{ margin-bottom:20px;}
	.IndContact .IndContactL .contactLi{ padding:20px 0;}
	.IndContact .IndContactL .contactLi span{ font-size:14px;}
}