@charset "utf-8";
.about-story-left{width: 50%; padding-left: 8%; padding-right: 160px;}
  .about-story-right{width: 50%; align-items: center;}
  
  .about-story-content p{margin-bottom:10px;}

.about-story-select{width: 486px; transform: translateX(-50px);}
.about-story-select ul li{ position: relative; padding: 50px; background-color: aliceblue; border-top: 1px solid #C4E6E3;}
.about-story-select ul li:first-child{border-top: 0;}

.about-story-select ul li h3 i{font-size: 24px; margin-right: 10px;}
.about-story-select ul li span{ position: absolute; bottom: 74px; right: 50px; display: block; width: 24px; height: 2px; background-color: #808080;}
.about-story-select ul li span::before{position: absolute; bottom: 0; right: 0; content: ''; width: 24px; height: 2px; background-color: #808080; transform: rotate(90deg); transition: .3s;}
.about-story-select ul li .about-story-ver{ margin-top: 16px; height: 160px; display: none;}
.about-story-select ul li.active{background-color: rgba(0, 131, 117,.7);}
.about-story-select ul li.active h3,
.about-story-select ul li.active .about-story-ver p{color: #fff;}
.about-story-select ul li.active span{bottom: 50px;}
.about-story-select ul li.active span::before{transform: rotate(0); background-color: #fff;}

@media (max-width:1440px) {
	.about-story-left{padding-right: 100px;}
	
	.about-story-select{width: 450px;}
	.about-story-select ul li{ padding: 30px;}
	.about-story-select ul li span{ bottom: 50px; right: 30px;}
}

@media (max-width:1200px) {
	.about-story-left,
	.about-story-right{padding-left: 15px; padding-right: 15px;}
	.about-story-select{width: 100%;  transform: translateX(0);}
	.about-story-select ul li{ padding: 30px;}
}

@media (max-width: 768px) {
	.about-story-left,
	.about-story-right{width: 100%;}
	.about-story-right{padding-top: 72px; padding-bottom: 127px;}
}

/*  */
.about-events-section{ position: relative; overflow: hidden;  }
.about-events-bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100vh;}
.about-events-title{position: absolute; top: 0; left: 0;}
/* timeline */
.about-events-timeline{position: absolute; top: 0; left: 50%; width: 1px; height: 100%; border-right: 2px dashed #808080;}
.about-events-timeline::before{position: absolute; top: 0; left: -7px; content: ''; width: 16px; height: 16px; border: 1px solid #808080; border-radius: 2px; background-color: #FFF;}
.about-events-timeline .about-events-tips{ position: absolute; top: 0; left: 50%; z-index: 3; margin-left: -75px; width: 150px; height: 48px; text-align: center;line-height: 48px; background-color: var(--yf-green-light); border-radius: 6px; color: #fff; }

.about-events-lists{position: relative; padding: 120px 0 0;}
.about-events-lists ul li{justify-content: flex-end;}
.about-events-item{ position: relative; width: 50%; align-items: center; justify-content: flex-start; padding-left: 150px; min-height: 175px;}
.about-events-item h3{display: none;}
.about-events-item::before{ position: absolute; top: 50%; left: -7px; margin-top: -8px; content: ''; width: 16px; height: 16px; background-color: #808080; border-radius: 2px; }
/*  */
.about-events-lists ul li:nth-child(2n){justify-content: flex-start;}
.about-events-lists ul li:nth-child(2n) .about-events-item{ padding-left: 0; padding-right: 150px;justify-content: flex-end; }
.about-events-lists ul li:nth-child(2n) .about-events-item::before{ left: inherit; right: -9px;}
/*  */
.about-events-active .about-events-item {}
.about-events-active .about-events-item p{ display: inline-block; color: #fff;background-color:  var(--yf-green-default);}
@media (max-width:1200px) {
	.about-events-title{ left: 15px;}
}

@media (max-width: 860px) {
	.about-events-timeline .about-events-tips{ margin-left: -50px; width: 100px;}
	.about-events-item{ padding-left: 100px; min-height: 125px;}
	/*  */
	.about-events-lists ul li:nth-child(2n) .about-events-item{ padding-right: 100px;}
}


@media (max-width: 768px) {
	
	.about-events-title{position: static; top: 0; left: 0;}
	.about-events-lists{position: relative; padding: 40px 0 0;}
	.about-events-timeline{position: absolute; top: 0; left: 0; width: 1px;}
	.about-events-timeline .about-events-tips{ display: none;}
	.about-events-lists{margin-top: 60px;}
	.about-events-lists ul li{justify-content: flex-start;}
	.about-events-item{ padding-left: 30px; min-height: auto; flex-direction: column; align-items: flex-start; padding-bottom: 36px; width: 100%;}
	.about-events-item::before{ top: 12px;}
	.about-events-item h3{display: block; color: var(--yf-green-light); font-size: 24px;}
	
	.about-events-lists ul li:nth-child(2n) .about-events-item{ padding-left: 30px; padding-right: 0; justify-content: flex-start;}
	.about-events-lists ul li:nth-child(2n) .about-events-item::before{ left: -7px; right: 0inherit;}
	.about-events-active .about-events-item p{color: var(--yf-black-v2);}

	.about-events-bg{width: 100%; height: 100%;opacity: .7;}

}

/*  */

.about-honor-section{padding-top: 100px; padding-bottom: 180px;}
.about-honor-swiper{position: relative; margin-top: 60px; padding: 0 70px; }
.about-honor-swiper .swiper-button-next,
.about-honor-swiper .swiper-button-prev{margin-top: -75px;}
.about-honor-swiper .swiper-button-next:after,
.about-honor-swiper .swiper-button-prev:after{color:var(--yf-green-default);}

.about-honor-pic{position: relative; overflow: hidden;}
.about-honor-pic img{width: 100%;}
.about-honor-title{ margin-top: 32px; padding: 10px 36px; min-height: 64px; align-items: center; background-color: rgba(0, 131, 117,.8);border-radius:8px;}
.about-honor-title p{color: #fff; font-size: 14px; text-align: center;}

@media (max-width: 768px) {
	.about-honor-section{padding-top: 50px; padding-bottom: 80px;}
	.about-honor-swiper{position: relative; margin-top: 60px; padding: 0 40px; }
	.about-honor-swiper .swiper-button-next{right: 0;}
	.about-honor-swiper .swiper-button-prev{left: 0;}
	.about-honor-swiper .swiper-button-next:after,
	.about-honor-swiper .swiper-button-prev:after{font-size: 24px;}
	.about-honor-title{ margin-top: 32px; padding: 10px 16px;}
	
}