ul,p,div,html,body{padding:0;}

.cfff{color: #fff!important;}
.mt100{ margin-top: 100px;}
.mt80{ margin-top: 80px;}
.mt60{ margin-top: 60px!important;}
.about-main .banner{ background: url(images/banner.jpg) no-repeat center; height: 901px; padding-top: 200px;}
.about-main .banner img{ display: block; margin: 0 auto}
.about-main .banner .txt{ margin: 170px auto auto auto; background: url(images/banner-txt.png) no-repeat center top; width: 497px; height: 110px;}
.about-main .banner .mouse{ width: 24px; height: 30px; background: url(images/mouse.png) no-repeat center top; margin:80px auto 0 auto; animation: upper 3s linear infinite;}
@keyframes upper {
	10%{ transform: translateY(-20px);}
	20%{ transform: translateY(0px);}
	30%{ transform: translateY(-10px);}
	50%{ transform: translateY(0);}
}
@keyframes heart {
	10%{transform: scale(1.1, 1.1); opacity: 0.9;}
	20%{transform: scale(1.3, 1.3); opacity: 0.3;}
	30%{transform: scale(1.2, 1.2); opacity: 0.9;}
	50%{transform: scale(1, 1); opacity: 1;}
	
}
.w{ width: 1200px; margin: 0 auto;}
.div{padding-top: 100px;}
.div .t-1 h1{ font-size: 60px; font-weight: 300; color: #333333;}
.div .t-1 h1 span{ font-weight: 550; color: #9c7548;}
.div .t-1 .bor{ width: 242px; height: 1px; background-color: #ffffff; margin: 50px auto;}
.div .t-1 .bor::after{ content: ""; display: block; margin:0 auto; transform: translate(0,-3px); width: 66px;	height: 7px; background-color: #9c7548;}
.div .t-1 .bor.bor2{ background-color: #333333;}
.div-1{ background: url(images/1-bg.jpg) no-repeat center top; font-size: 24px; color: #333; font-weight: 300;}
.div-1 .tit{ font-size: 28px; font-weight: 500; margin-bottom: 30px;}
.div-1 .tit .bor{ display: inline-block; position: relative; width: 30px; height: 30px; margin-left: -10px; }
.div-1 .tit .bor span{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 14px; height: 14px; border:4px solid #ca2b2f}
.div-1 li .txt .tit .bor span::after{ content: ""; position: absolute; width: 10px; height: 10px; left: -8px; top:-8px;  border:6px solid rgba(202, 43, 47, 0.2); animation: heart 3s linear infinite;}
.div-1 .tit .txt{ display: inline-block; vertical-align: top; line-height: 1.2;}
.div-1 .txt p{ padding-left: 30px; line-height: 1.6;}
.div-1 .hid{ visibility: hidden; opacity: 0; padding: 60px 10px 30px 45px; background: url(images/1-bg-1.jpg) no-repeat center/100% 100%;	box-shadow: 0px 10px 30px 0px rgba(51, 51, 51, 0.2); border: solid 1px #ffffff; height: auto; width: 510px; position: absolute; left: 80%; top: -70px; z-index: 1;}
.div-1 li:nth-child(n + 3) .hid{left: auto; right: 98%;}
.div-1 .hid .ul{ max-height: 550px; padding-right: 50px;}
.div-1 .hid .item{ line-height: 1.2; margin-bottom: 40px;}
.div-1 .item .tit{padding-left: 5px;}
.div-1 .hid .item p{ font-size: 20px; font-weight: 500; padding-left: 35px; line-height: 1.4;}
.div-1 .hid .tit{ margin-bottom: 15px;}
.div-1 .hid p{ font-weight: 500;}
.div-1 .hid .close{ position: absolute; top: 30px; right: 35px; display: block; width: 20px; height: 20px; background: url(images/1-close.png) no-repeat center; cursor: pointer;}
.div-1 .his-swiper{ padding-bottom: 170px; }
.div-1 .his-swiper ul{ padding-top: 50px;}
.div-1 .his-swiper ul::before{content: ""; position: absolute; left: 0; top: 0;  width: 120%; height: 100%;  background: url(images/1-line.png) no-repeat 364px 41px;}

.div-1 .swiper-slide{ padding-left: 10px; width: 384px; margin-top: 90px;}
.div-1 .his-swiper ul .first{ width: calc((100vw - 1240px)/2 ) !important;}
.div-1 .swiper-slide:nth-child(3){ margin-top: 135px; width: 465px;}
.div-1 .swiper-slide:nth-child(4){ margin-top: 5px; width: 460px;}
.div-1 .swiper-slide:nth-child(5){ margin-top: 70px; width: 460px;}
.div-1 .swiper-slide.cur .hid{ visibility: visible; opacity: 1;}
.div-1 .swiper-slide .img{ border:1px solid #ffffff;; width: 272px; height: 170px; overflow: hidden; margin-bottom: 30px;}
.div-1 .swiper-slide:nth-child(odd) .img{ margin-left: 25px;}
.div-1 .swiper-slide:hover .img{box-shadow: 0px 10px 30px 0px rgba(51, 51, 51, 0.2);border: solid 1px #ca2b2f;}
.div-1 .swiper-button-prev,.div-1 .swiper-button-next{ position: absolute; bottom: 0; top: auto; left: 0;  width: 120px; color: #333;  text-align: center;	height: 48px; line-height: 48px; cursor: pointer; background: rgba(51,51,51,0.3);}
.div-1 .swiper-button-next::after,.div-1 .swiper-button-prev::after { font-size: 20px; font-weight: 600;}
.div-1 .swiper-button-next{ left: 120px;}
.div-1 .swiper-button-prev:hover,.div-1 .swiper-button-next:hover{ background-color: #ca2b2f; color: #fff;}
.div-1 .his-swiper img{vertical-align: middle;}


.div-2{ background: url(images/2-bg.jpg) no-repeat center top; padding-bottom: 120px;}
.div-2 .div-21 { font-size: 0; width: 100%; max-width: 1550px; min-width: 1200px;}
.div-2 .div-21 .left{ width: 56.3%; display: inline-block; position: relative; vertical-align: top; height: 496px; }
.div-2 .div-21 .left video{width: 100%; height: 100%;    object-fit:fill;  }
.div-2 .div-21 .left .play{position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 70px; height: 70px; background: url(images/2-play.png) no-repeat center; cursor: pointer;}
.div-2 .div-21 .right{ width: 43.7%; display: inline-block; background: url(images/2-bg-1.jpg) no-repeat center/100% 100%; font-size: 22px; line-height: 34px; color: #333333; text-indent: 2em; font-weight: 300; padding: 48px 10px 47px 50px;  vertical-align: top; border: solid 1px #ffffff;}
.div-2 .div-21 .right .txt{ height: 400px; padding-right: 10px; overflow: auto;}
.div-2 .div-21 .right p{ margin-bottom: 30px;}

.div-2 .div-22 { margin-top: 70px;}
.div-2 .div-22 li{ position: relative; text-align: center;background-color: #333333;	box-shadow: 0px 10px 30px 0px rgba(51, 51, 51, 0.2); border: solid 1px #ffffff;}
.div-2 .div-22 li:hover{ box-shadow: 10px 0px 30px 0px 	rgba(51, 51, 51, 0.2);  margin-top: -20px;}
.div-2 .div-22 li .bg{position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0)); }
.div-2 .div-22 li .txt{position: absolute; bottom: 20px; left: 0; width: 100%; padding: 50px 22px; font-size: 24px; color: #fff;}
.div-2 .div-22 li .txt .tit{font-weight: 550; font-size: 30px; margin-bottom: 10px; position: relative;}
.div-2 .div-22 li .num{ position: absolute; bottom: -30px; width: 100%; color: #fafafa; text-align: center; font-size: 90px; opacity: 0.1; font-weight: 600;}

.div-3{ background: url(images/3-bg.jpg) no-repeat center; padding-bottom: 120px;}
.div-3 .tit{ background: rgba(156,117,72,0.3); margin-bottom: 30px;}
.div-3 .tit li{position: relative; width: 25%; font-size: 30px; color: #fff; text-align: center; padding: 25px 0; line-height: 1.4; font-weight: 300; }
.div-3 .tit li span{ display: block; font-size: 12px; text-transform: uppercase;}
.div-3 .tit li.cur{ background-color: #9c7548;}
.div-3 .tit li.cur p{ font-weight: 550;}
.div-3 .tit li::after{ display: block; content: ""; opacity: 0; position: absolute; left: 50%; bottom: -10px; transform: translate(-50%, 3px); width: 0px; border-top: 13px solid #9c7548; border-left: 15px solid transparent;  border-right: 15px solid transparent;}
.div-3 .tit li.cur::after{ opacity: 1;}
.div-3 .reson-swiper .mt{ margin-top: 48px;}
.div-3 .reson-swiper .right{ vertical-align: bottom; font-size: 24px; color: #333; width: 468px; height: 552px; margin-top: 47px; line-height: 1.3; position:relative;}
.div-3 .reson-swiper .right .item::before{ display: block; content: "";position: absolute; width: 10px;	height: 10px; left: 0; top:22px; background-color: #9c7548;}
.div-3 .reson-swiper .right .item{ position: relative; padding-left: 40px;}
.div-3 .reson-swiper .right > img{ width: 100%; height: 100%;}
.div-3 .reson-swiper .right span{ font-size: 48px; color: #ca2b2f; font-weight: 600; margin-bottom: 5px; vertical-align: middle; padding-bottom: 16px;}
.div-3 .reson-swiper .right a{ color: #9c7548; display: block; position:absolute; bottom: 50px; left: 60px;}
.div-3 .reson-swiper .swiper-slide:nth-child(2) .right a,.div-3 .reson-swiper .swiper-slide:nth-child(3) .right a{ bottom: 130px;}
.div-3 .reson-swiper .swiper-slide:nth-child(4) .right a{ bottom: 90px;}
.div-3 .reson-swiper .right a img{ vertical-align: middle; margin-left: 5px;} 

.div-4{ background: url(images/4-bg.jpg) no-repeat center; padding-bottom: 120px;}
.div-4 ul{ flex-wrap: wrap;}
.div-4 ul li{position: relative; color: #333; font-size: 24px; border: 1px solid rgba(156,117,72 ,.2); width: 33.3%; text-align: center; padding-top: 62px; height: 274px;}
.div-4 ul li:nth-child(1),.div-4 ul li:nth-child(2){ border-right: 0; border-bottom: 0;}
.div-4 ul li:nth-child(3){border-bottom: 0;}
.div-4 ul li:nth-child(4), .div-4 ul li:nth-child(5){border-right: 0;}
.div-4 ul li h4{ font-size: 30px; margin-top: 20px;}
.div-4 ul li .hid{ visibility: hidden; opacity: 0; position: absolute; left: 0; top: 0; background: url(images/4-bg-1.jpg) no-repeat center/100% 100%; font-size: 18px; color: #fff; padding: 40px;  text-align: left; width: 100%; height: 100%; line-height: 30px; font-weight: 300; display: flex; align-items: center;}
.div-4 ul li:hover .hid{ box-shadow: 0px 10px 30px 0px rgba(51, 51, 51, 0.2); border: solid 1px #ffffff; visibility: visible; opacity: 1; transform: scale(1.01);}
.div-4 ul li > p{ margin-top: 20px; font-weight: 300;}

.div-5{ background: url(images/5-bg.jpg) no-repeat center top; min-width: 1200px;}
.div-5 .con{ margin-top: 70px;}
.div-5 .honor-swiper{ width: 52.9%; height: 780px;}
.div-5 .honor-swiper li.swiper-slide{ margin-top: 0; height: 780px; padding-left: 0;}
.div-5 .swiper-button-prev,.div-5 .swiper-button-next{ left: auto; right: 120px;}
.div-5 .swiper-button-next{  right: 0;}
.div-5 .right{ width: 47.1%; background: url(images/5-bg-2.jpg) no-repeat center top/100% 100%; padding:60px 20px 60px 90px; margin-top: 70px; height: 709px; line-height: 1.3;}
.div-5 .right li{ margin-bottom: 70px;}
.div-5 .right h4{ color: #333333; font-size: 30px; position: relative; padding-bottom: 20px; margin-bottom: 20px;}
.div-5 .right h4::before{ position: absolute; left: 0;bottom: 0; content: ""; width: 205px;	height: 2px; background-image: linear-gradient(
	#9c7548, 	#9c7548), linear-gradient(	#876640, 	#876640);}
.div-5 .right h4::after{position: absolute; left: 0;bottom: 0; content: "";  left: 0;bottom: -1px; width: 62px; height: 6px; background-color: #9c7548;}
.div-5 .right a{ color: #9c7548; font-weight: 500;}