@charset "utf-8";

.about-banner,.about-value,.about-intro,.about-history{ text-align:center; overflow:hidden}

.about-tit{ padding:50px 0; font-size:30px !important; position:relative}
.about-tit:after{ content:''; width:22px; height:12px; background:url(/template/default/images/about-tit-bg.png) no-repeat center center; position:absolute; bottom:30px; left:0; right:0; margin:auto}

/* 快捷 */
.about-banner{ height:570px; color:#fff;/* background:url(/template/default/images/about-banner.jpg) no-repeat center top #c99951;*/ background:#c99951; position:relative}
.about-banner-b{
	background: #c99951 url(/template/default/images/0833.png)  no-repeat center top #c99951;
	    height: 570px;
	    color: #fff;
	  
	    position: relative;
	
}
.about-banner>*{ z-index:1}
.about-banner img{ max-width:1920px; width:1920px; height:calc(100% - 70px); position:absolute; left:50%; top:0; margin-left:-960px; z-index:0;object-fit: contain;}
.about-banner h3{ display:inline-block; margin-top:260px; font-size:30px; font-weight:bolder; font-weight:bolder; position:relative}
.about-banner h3:before,
.about-banner h3:after{ content:''; width:78px; height:2px; background:#fff; position:absolute; top:0; bottom:0; margin:auto}
.about-banner h3:before{ left:-100px}
.about-banner h3:after{ right:-100px}
.about-banner span{ display:inline-block; width:100%; font-size:20px; position:relative}
.about-banner ul{ height:70px; line-height:70px; position:absolute; bottom:0; left:0; right:0; margin:0 auto; text-align:left}
.about-banner li{ display:inline-block; font-size:18px; text-align:center}
.about-banner li a{ display:block; padding:0 50px; color:#fff; position:relative}
.about-banner li a:hover,
.about-banner li.on a{ background:#b58949; color:#fff}
.about-banner li a:hover:after,
.about-banner li.on a:after{ content:''; display:inline-block; width:0; position:absolute; bottom:0; left:0; right:0; margin:auto; border-bottom:10px solid #fff; border-left:10px solid rgba(0,0,0,0); border-right:10px solid rgba(0,0,0,0); z-index:1}
.about-banner li.hover a{ background:#b58949; color:#fff}
.about-banner li a:hover:after,
.about-banner li.hover a:after{ content:''; display:inline-block; width:0; position:absolute; bottom:0; left:0; right:0; margin:auto; border-bottom:10px solid #fff; border-left:10px solid rgba(0,0,0,0); border-right:10px solid rgba(0,0,0,0); z-index:1}

/* 价值 */
.about-value{ height:718px; background:url(/template/default/images/about-value-bg.jpg) no-repeat center top}
.about-value ul{ font-size:0}
.about-value li{ display:inline-block; height:460px; width:33.33333333333%; max-width:400px; background:#fff; position:relative; overflow:hidden}
.about-value li:after{ content:''; display:inline-block; width:0; position:absolute; top:230px; left:0; right:0; margin:auto; border-top:20px solid #fff; border-left:20px solid rgba(0,0,0,0); border-right:20px solid rgba(0,0,0,0); z-index:1}
.about-value li h5{ margin-top:75px; font-size:30px; color:#c99951}
.about-value li span{ display:inline-block; padding-bottom:20px; font-size:14px; color:#8d8d8d; position:relative}
.about-value li span:after{ content:''; width:72px; height:3px; background:#c99951; position:absolute; left:0; right:0; bottom:0; margin:auto}
.about-value li img{ max-width:400px; width:400px; height:230px; position:absolute; bottom:0; left:50%; margin-left:-200px}
.about-value li:nth-child(2) img{ top:0}
.about-value li:nth-child(2) h5{ margin-top:326px}
.about-value li:nth-child(2) span:after{ top:-180px}
.about-value li:nth-child(2):after{ top:210px; border-top:0; border-bottom:20px solid #fff; border-left:20px solid rgba(0,0,0,0); border-right:20px solid rgba(0,0,0,0); z-index:1}

/* 价值 */
.about-intro{ height:700px; background:url(/template/default/images/about-intro-bg.jpg) no-repeat center top; color:#fff}
.about-intro .yio{ 
	
	padding-top:45px;
	 
	 font-size:18px; 
	 
	 line-height:45px;
	 
	 }


/* 历程 */
.about-history{ height:794px; background:url(/template/default/images/about-history-bg.jpg) no-repeat center top; color:#fff}
.about-history .center:after{ content:''; width:1200px; height:10px; background:rgba(255,255,255,.2); position:absolute; left:0; right:0; top:398px; margin:0 auto; border-radius:999px}
.about-history .con{ margin:0 110px; padding-top:70px; position:relative}
.about-history li{ width:33.3333333%; height:210px; position:relative}
.about-history li span{ display:inline-block; width:88px; height:88px; line-height:88px; font-size:16px; position:absolute; left:0; background:url(/template/default/images/about-history-img.png) no-repeat center center}
.about-history li span:before,
.about-history li span:after{ content:''; background:#c99951; position:absolute; left:0; right:0; margin:auto}
.about-history li span:before{  width:2px; height:92px}
.about-history li span:after{ width:16px; height:16px; transform:rotate(45deg)}
.about-history li div{height: 75px; padding-left:78px; line-height:25px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3}
.about-history .swiper-button-next,
.about-history .swiper-button-prev{ width:64px; height:64px; background-repeat:no-repeat; background-position:center center; background-size:100%; top:394px}
.about-history .swiper-button-next{ background-image:url(/template/default/images/history-btn-r.png); right:0}
.about-history .swiper-button-prev{ background-image:url(/template/default/images/history-btn-l.png); left:0}


@media only screen and (min-width:750px) {

.about-history li:nth-child(even){ padding-top:94px}
.about-history li:nth-child(even) span{ top:0}
.about-history li:nth-child(even) span:before{ top:90px}
.about-history li:nth-child(even) span:after{ top:182px}

.about-history li:nth-child(odd){ margin-top:170px; padding-bottom:94px}
.about-history li:nth-child(odd) span{ bottom:0}
.about-history li:nth-child(odd) span:before{ bottom:94px}
.about-history li:nth-child(odd) span:after{ bottom:182px}
.about-history li:nth-child(odd) div{margin-top: 45px;}

}

@media only screen and (max-width:1200px) {
	
.about-history li{ width:50%}

}

@media only screen and (max-width:1000px) {
	
.about-intro p{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:9}
}

@media only screen and (max-width:750px) {

.about-tit{ padding:.5rem 0; font-size:.32rem !important}
.about-tit:after{ content:''; width:.3rem; height:.1rem; bottom:.3rem; background-size:auto .1rem}

/* 快捷 */
.about-banner{ height:6.8rem; background-size:auto 6.1rem}
.about-banner img{ height:6.1rem}
.about-banner h3{ margin-top:40%; font-size:.4rem}
.about-banner h3:before,
.about-banner h3:after{ width:.8rem}
.about-banner h3:before{ left:-1rem}
.about-banner h3:after{ right:-1rem}
.about-banner span{ font-size:.26rem}

.about-banner ul{   background:#c99951;text-align: center;}

.about-banner li{ font-size:.26rem;}
.about-banner li a{ padding:1px}
.about-banner li a:hover:after,
.about-banner li.on a:after{ border-width:.15rem}

/* 价值 */
.about-value{ height:10rem; background-size:auto 100%}
.about-value ul{ font-size:0}
.about-value li{ height:2.3rem; width:7rem; max-width:7rem; padding-left:3rem; margin-bottom:.15rem; overflow:hidden}
.about-value li:after,.about-value li:nth-child(2):after{ display:none}

.about-value li h5{ width:4rem; margin-top:.7rem; font-size:.36rem; float:right}
.about-value li span{ width:4rem; padding-bottom:.2rem; font-size:.24rem; float:right}
.about-value li span:after{ width:.8rem}
.about-value li img{ max-width:4rem; width:44rem; height:2.3rem; left:-1rem; margin:0}
.about-value li:nth-child(2) img{ top:0}
.about-value li:nth-child(2) h5{ margin-top:.7rem}
.about-value li:nth-child(2) span:after{ top:auto; bottom:0}

/* 价值 */
.about-intro{ height:8.5rem; background-size:auuto 100%}
.about-intro .yio{ padding:.45rem .25rem 0; font-size:.26rem; line-height:2}

/* 历程 */
.about-history{ height:7rem; background-size:auto 7rem}
.about-history .center:after{ content:''; width:7.5rem; height:.1rem; top:50%; margin-top:.75rem}
.about-history .con{ margin:0 .25rem; padding-top:.7rem}
.about-history li{ width:100%; height:auto; padding-top:2.4rem; padding-bottom:1rem}
.about-history li span{ width:1.2rem; height:1.2rem; line-height:1.2rem; font-size:.18rem; left:0; right:0; top:0; margin:auto; background-size:100%}
.about-history li span:before{ height:.8rem; top:1.2rem}
.about-history li span:after{ width:.2rem; height:.2rem; top:2rem}
.about-history li div{ padding:0 .8rem; line-height:1.6}
.about-history .swiper-button-next,
.about-history .swiper-button-prev{ width:.7rem; height:.7rem; background-size:100%; top:50%; margin-top:.45rem}



}
