/*-- banner --*/
.banner{position: relative; overflow: hidden;}
.banner .item{position: relative;}
.banner .item .bg{overflow: hidden;}
.banner .item .bg img{display: block; width: 100%; transition: all 1s;}
.banner .item .text{position: absolute; z-index: 3; left: 11.46%; right: 11.46%; top: 28%; display: flex; flex-direction: column; justify-content: space-between; }
.banner .item .text .text-hd{position: absolute;padding-bottom: 4rem;position: relative; transform: translateY(100%); opacity: 0; transition: all 3s .25s cubic-bezier(0.075, 0.82, 0.165, 1);}
.banner .item .text .text-hd h3{display: flex; align-items: center; font-family: "fangsong";font-size: 6.8rem; line-height: 1.75; font-weight: 700; color: #d9ab73;}
.banner .item .text .text-hd h3 small{display: block; margin-left: 1rem; font-family: "fangsong"; font-size: 4.8rem; font-weight: 600; color: #fff; transform: translateY(4px);}
.banner .item .text .text-hd p{font-family: "fangsong"; font-weight: 600; font-size: 4rem; color: #fff;}
.banner .item .text .text-hd::after{display: block; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; content: ""; background-color: rgba(255, 255, 255, 0.6);}
.banner .item .text .text-bd{position: relative; margin-top: 3.8rem; height: 17rem;transform: translateY(100%); opacity: 0; transition: all 3s .25s cubic-bezier(0.075, 0.82, 0.165, 1);}
.banner .item .text .text-bd p{font-size: 2.6rem; line-height: 2; height: calc(2.6rem * 6); color: rgba(255, 255, 255, 0.8);}
.banner .item .text .text-bd a{display: flex; align-items: center; justify-content: space-between; position: relative; width: 20rem; height: 8rem; font-size: 2.2rem; color: rgba(255, 255, 255, 0.8);}
.banner .item .text .text-bd a::after{display: block; font-family: "iconfont"; content: "\ea66";}
.banner .item .text .text-bd a::before{display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; content: ""; background-color: #fff;}
.banner .item:hover .bg img{transform: scale(1.05);}
.banner .item.swiper-slide-active .text .text-hd,.banner .item.swiper-slide-active .text .text-bd{transform: translateX(0); opacity: 1;}
.banner .item[data-swiper-slide-index="0"] .text .text-hd h3{color: rgba(255, 255, 255, 0.8);}
.banner .item[data-swiper-slide-index="0"] .text .text-hd p{font-size: 5rem; color: rgba(255, 255, 255, 0.8);}
.banner .item[data-swiper-slide-index="1"] .text .text-hd small{color: #d9ab73;}
.banner .item[data-swiper-slide-index="1"] .text .text-hd p{color: #4e4e4e;}
.banner .item[data-swiper-slide-index="1"] .text .text-hd::after{background-color: #124633;}
.banner .item[data-swiper-slide-index="1"] .text .text-bd a{filter: brightness(0);}
.banner .swiper-pagination{position: absolute; z-index: 9; left: 0; right: 0; bottom: 7.8%; padding: 0 6.5%; display: flex; align-items: center; justify-content: flex-end;gap: 2rem;}
.banner .swiper-pagination .swiper-pagination-bullet{display: block; margin: 0; width: 1.2rem; height: 1.2rem; border: #fff solid 1px; cursor: pointer; background-color: transparent; opacity: 1;}
.banner .swiper-pagination .swiper-pagination-bullet-active{background-color: #fff;}
/*-- end banner --*/

/*-- feature --*/
.feature{padding: 10rem 0; overflow: hidden; background-color: #f5f5f5;}
.feature-inner{overflow: hidden;}
.feature-list{display: flex; flex-wrap: wrap; align-items: center;}
.feature-list .item{display: flex;}
.feature-list .item .icon{width: 8rem; height: 8rem;}
.feature-list .item .icon img{display: block; width: 100%;}
.feature-list .item .text{display: flex; flex-direction: column; justify-content: center; padding-left: 2rem;}
.feature-list .item .text h3{font-size: 2.2rem; color: var(--vi-color);}
.feature-list .item .text p{font-size: 1.6rem; color: var(--vi-color);}
.feature-list .line{margin: 0 auto;width: 1px; height: 7rem; background-color: #d5d5d5;}
/*-- end feature --*/

/*-- aboutus --*/
.aboutus{padding: 20rem 0 24rem; background: url('../images/index/about_us_bg.png') no-repeat 0 100% / 53.65%, url('../images/index/about_us_bg.png') no-repeat 115% 0 / 53.65%; background-color: #fff;}
.aboutus-inner{position: relative; overflow: hidden;}
.aboutus-inner .title{display: flex; flex-direction: column; align-items: center; padding-right: 2rem; width: 50%; height: 25rem; background-color: #fff; text-align: center;}
.aboutus-inner .title h2{position: absolute; right: 0; top: 70%; font-weight: 600; font-size: 4.8rem; color: #000;}
.aboutus-inner .title h3{font-weight: 600; font-size: 5.6rem; color: var(--vi-color);}
.aboutus-inner .title h3::after{display: block; margin-top: 1rem; font-family: "iconfont"; content: "\e60d"; font-size: 3rem;}
.aboutus-inner .pic{position: absolute; z-index: 3; top: 0; right: 0; width: 55.26%; overflow: hidden; clip-path: inset(0 0 100% 0);  opacity: 0; transition:all 1s cubic-bezier(1, 0.885, 0.32, 1.275);}
.aboutus-inner .pic .player-btn{position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: rgba(0, 0, 0, 0.6); opacity: 0; clip-path: circle(10%); transition: all 1s;}
.aboutus-inner .pic .player-btn i{display: block; font-size: 10rem; color: #fff;}
.aboutus-inner .pic .player-btn:hover{opacity: 1; clip-path: circle(100%);}
.aboutus-inner .pic img{display: block; width: 100%; transition: all 1s;}
.aboutus-inner .pic:hover img{transform: scale(1.1);}
.aboutus-inner .text{padding: 11rem 43rem 12rem 12rem; width: 66.45%; overflow: hidden; background-color: #f5f5f5; clip-path: inset(100% 0 0 0);  opacity: 0; transition:all 1s cubic-bezier(1, 0.885, 0.32, 1.275);}
.aboutus-inner .text p{font-size: 1.8rem; color: #222; line-height: 1.5;}
.aboutus.active .aboutus-inner .pic,
.aboutus.active .aboutus-inner .text{clip-path: inset(0 0 0 0);  opacity: 1;}
/*-- end aboutus --*/

/*-- case --*/
.case{padding: 20rem 0; overflow: hidden; background-color: #f5f5f5;}
.case-inner{margin-top: 12rem; overflow: hidden; clip-path: inset(0 100% 0 0); opacity: 0; transition:all 1s cubic-bezier(1, 0.885, 0.32, 1.275);}
.case-list .item{display: block; overflow: hidden;}
.case-list .item .pic{overflow: hidden;}
.case-list .item .pic img{display: block; width: 100%; transition: all 1s;}
.case-list .item .tit{position: absolute; z-index: 3; left: 0; bottom: 0;padding: 4.5rem 5rem; width: 100%; font-size: 2.4rem; color: #fff;}
.case-pagination{opacity: 0; position: absolute; left: 200%;}
.case .more{display: flex; align-items: center; justify-content: flex-end; margin-top: 5rem;}
.case .more a{display: flex; align-items: center; gap: 12px; font-size: 2.2rem; color: var(--vi-color);}
.case .more a::after{display: block; font-family: "iconfont"; content: "\ea66";}
.case.active .case-inner{clip-path: inset(0 0 0 0); opacity: 1;}
/*-- end case --*/

/*-- news --*/
.news{padding: 20rem 0; overflow: hidden; background-color: #fff;}
.news-inner{margin-top: 12rem; overflow: hidden; clip-path: inset(0 100% 0 0); opacity: 0; transition:all 1s cubic-bezier(1, 0.885, 0.32, 1.275);}
.news-list .item{display: block; overflow: hidden;}
.news-list .item .pic{overflow: hidden;}
.news-list .item .pic img{display: block; width: 100%; transition: all 1s;}
.news-list .item .text{padding: 2.5rem 0; overflow: hidden;}
.news-list .item .text h3{font-size: 2.4rem; color: #222;}
.news-list .item .text p{margin-top: 1rem; font-size: 1.8rem; color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.news-list .item:hover .pic img{transform: scale(1.1);}
.news-list .item:hover .text *{ color: var(--vi-color);}
.news-pagination{opacity: 0; position: absolute; left: 200%;}
.news .more{display: flex; align-items: center; justify-content: flex-end; margin-top: 5rem;}
.news .more a{display: flex; align-items: center; gap: 12px; font-size: 2.2rem; color: var(--vi-color);}
.news .more a::after{display: block; font-family: "iconfont"; content: "\ea66";}
.news.active .news-inner{clip-path: inset(0 0 0 0); opacity: 1;}
/*-- end news --*/

@media(max-width:768px){
.banner .item .bg img{height: 68vh; min-height: 48rem; object-fit: cover;}
.banner .item .text{left: 6%; right: 6%; top: 20%;}
.banner .item .text .text-hd{padding-bottom: 2rem;}
.banner .item .text .text-hd h3{font-size: 3.4rem; line-height: 1.35;}
.banner .item .text .text-hd h3 small{display: block; margin: .8rem 0 0; font-size: 2.4rem; transform: none;}
.banner .item .text .text-hd p,
.banner .item[data-swiper-slide-index="0"] .text .text-hd p{font-size: 2.2rem; line-height: 1.5;}
.banner .item .text .text-bd{margin-top: 2.2rem; height: auto;}
.banner .item .text .text-bd p{height: auto; max-height: 11rem; font-size: 1.6rem; line-height: 1.8; overflow: hidden;}
.banner .item .text .text-bd a{width: 13rem; height: 5rem; font-size: 1.6rem;}
.banner .swiper-pagination{bottom: 4rem; justify-content: center;}

.feature{padding: 5rem 0;}
.feature-list{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 1.6rem;}
.feature-list .line{display: none;}
.feature-list .item{flex-direction: column; align-items: center; justify-content: center;}
.feature-list .item .icon{width: 5.6rem; height: 5.6rem;}
.feature-list .item .text{padding-left: 0; padding-top: 1.2rem; text-align: center;}
.feature-list .item .text h3{font-size: 1.7rem;}
.feature-list .item .text p{font-size: 1.2rem; line-height: 1.35;}

.aboutus{padding: 7rem 0; background-size: 90%; background-position: -40% 100%, 140% 0;}
.aboutus-inner .title{display: block; width: 100%; height: auto; padding-right: 0; text-align: left; background: transparent;}
.aboutus-inner .title h2{position: static; margin-top: 1rem; font-size: 2.8rem;}
.aboutus-inner .title h3{font-size: 3.2rem;}
.aboutus-inner .pic{position: relative; top: auto; right: auto; width: 100%; margin-top: 3rem;}
.aboutus-inner .pic .player-btn{opacity: 1; clip-path: circle(100%); background-color: rgba(0,0,0,.25);}
.aboutus-inner .pic .player-btn i{font-size: 6rem;}
.aboutus-inner .text{width: 100%; padding: 2.4rem; margin-top: 2rem;}
.aboutus-inner .text p{font-size: 1.5rem; line-height: 1.75;}

.case,.news{padding: 7rem 0;}
.case-inner,.news-inner{margin-top: 4rem;}
.case-list .item .tit{padding: 2rem; font-size: 1.8rem;}
.news-list .item .text{padding: 1.8rem 0;}
.news-list .item .text h3{font-size: 1.8rem;}
.news-list .item .text p{font-size: 1.4rem;}
.case .more,.news .more{justify-content: flex-start; margin-top: 3rem;}
.case .more a,.news .more a{font-size: 1.6rem;}
}

@media(max-width:480px){
.banner .item .text .text-hd h3{font-size: 3rem;}
}