main { overflow: hidden; zoom: 1 }

/*slide*/
.slide { position: relative; width: 100%; height: 100vh }
.slide .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover }
.slide .swiper-slide video { width: 100%; height: 100%; object-fit: cover }
.slide .slide-title { display: none; position: absolute; top: 50%; left: 50%; max-width: 1400px; margin-left: -685px; z-index: 8; color: #fff; transform: translateY(-50%) }
.slide .slide-title span { font-size: 30px; line-height: 1; letter-spacing: 2px; opacity: 0; visibility: hidden; transform: translateY(100%) }
.slide .slide-title .btitle { margin-top: 24px; margin-bottom: 36px; line-height: 1; font-size: 42px }
.slide .slide-title .btitle h3 { font-weight: normal; opacity: 0; visibility: hidden; transform: translateY(60%); font-weight: 600 }
.slide .slide-title .btitle h3 b { color: var(--hover-color) }
.slide .slide-title p { font-size: 16px; line-height: 1; letter-spacing: 2px; opacity: 0; visibility: hidden; transform: translateY(200%) }
.slide .slide-title a { display: flex; justify-content: space-between; width: 180px; height: 46px; margin-top: 50px; background: var(--hover-color); border-radius: 23px; font-size: 14px; color: #fff; line-height: 46px; padding-left: 30px; padding-right: 30px; cursor: pointer; box-sizing: border-box; opacity: 0; visibility: hidden; transform: translateY(100%) }
.slide .slide-title-black { color: rgba(0, 0, 0, .85) }
.slide .swiper-slide.swiper-slide-active .slide-title p, .slide .swiper-slide.swiper-slide-active .slide-title .btitle h3, .slide .swiper-slide.swiper-slide-active .slide-title span, .slide .swiper-slide.swiper-slide-active .slide-title a { opacity: 1; visibility: visible; transform: translateY(0); transition: 1s 0.6s cubic-bezier(0.15, 1, 0.35, 1) }
.slide .swiper-slide.swiper-slide-active .slide-title .btitle p { transition: all 3s cubic-bezier(0.15, 1, 0.35, 1) 0.75s }
.slide .swiper-slide.swiper-slide-active .slide-title .btitle h3 { transition: all 1.5s cubic-bezier(0.15, 1, 0.35, 1) 0.75s }
.slide .swiper-slide.swiper-slide-active .slide-title a { transition: all 2s cubic-bezier(0.15, 1, 0.35, 1) 0.75s }
.slide-prev, .slide-next { position: absolute; top: 50%; z-index: 9; width: 56px; height: 56px; padding: 0; transform: translateY(-50%); border: 2px solid rgba(255, 255, 255, .1); border-radius: 50%; cursor: pointer; transition: 0.3s; background: transparent }
.slide-prev::after, .slide-next::after { content: ''; position: absolute; left: 50%; top: 50%; width: 33%; height: 33%; border-top: 2px solid rgba(255, 255, 255, 1) }
.slide-prev { left: 0; transform: translateX(-100%) }
.slide-prev::after { border-left: 2px solid rgba(255, 255, 255, 1); transform: translate(-30%, -50%) rotate(-45deg) }
.slide-next { right: 0; transform: translateX(70px) }
.slide-next::after { border-right: 2px solid rgba(255, 255, 255, 1); transform: translate(-70%, -50%) rotate(45deg) }
.slide-prev:hover, .slide-next:hover { background-color: var(--hover-color); border-color: transparent }
.slide-prev:hover::after, .slide-next:hover::after { border-color: #fff }
.slide:hover .slide-prev { transform: translateX(70px) }
.slide:hover .slide-next { transform: translateX(-70px) }
.slide-page { display: block; width: 200px; height: 10px; line-height: 10px; text-align: center; position: absolute; left: 50%; right: 0; bottom: 190px; z-index: 2; transform: translateX(-50%) }
.slide-page .page-bullet { display: inline-block; width: 10px; height: 10px; margin: 0 7px; cursor: pointer; border-radius: 100%; background: rgba(var(--white-rgb), var(--opacity, .25)) }
.slide-page .page-bullet.page-active { background: var(--hover-color) }

.volume { position: absolute; right: 79px; bottom: 180px; z-index: 11; cursor: pointer }
.volume svg { display: block; color: rgba(255, 255, 255, .8); transition: 0s }
.volume.muted svg.volume-mute { visibility: hidden }
.volume.muted svg.volume-up { visibility: visible }
.volume svg { display: block; transition: 0s }
.volume svg.volume-up { position: absolute; left: 0; bottom: 0; top: 0; visibility: hidden }

.video-modal { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0, 0, 0, .1) }
.video-modal .video-btn { cursor: pointer; border: none; background-color: transparent }

@media (min-width:768px){
	.video-modal { display: none }
}

/*product*/
.product-list { max-width: 1426px; margin: 0 auto; padding-bottom: 15px; overflow: hidden; transition: all .4s ease }
.product-list .swiper-wrapper { -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important }
.product-list li { max-width: 191px; float: left; _display: inline; overflow: hidden; text-align: center }
.product-list li:hover img { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05) }
.product-list li:hover .defaul { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2) }
.product-list img { display: block; width: 100%; -webkit-transition: ease 1.5s; transition: ease 1.5s }
.product-list figure { margin: 0; border-radius: 16px; overflow: hidden }
.product-list.product-list2 figure { height: 25vw }
@media screen and (max-width:980px) {
	.product-list.product-list2 figure { height: 50vw }
}

/*module*/
.module-box { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: 144px; overflow: hidden }
.module-box::before { content: ""; display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.module-list { width: calc(100% - 500px); height: 144px; cursor: url(../images/shubiao_white.png), auto }
.module-list li { position: relative; padding-top: 20px; padding-bottom: 20px; box-sizing: border-box }
.module-list li a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; color: #fff; background: #fff }
.module-list li a figure { position: relative; margin: 0; overflow: hidden }
.module-list li a figure::before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 85.5% }
.module-list li a figure::after { content: ""; display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, .65) }
.module-list li a figure img { display: inline-block; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; position: absolute; top: 0; object-fit: cover }
.module-list li a:hover figure img { transform: scale3d(1.1, 1.1, 1) }
.module-list li a h3 { position: absolute; left: 0; bottom: 0; right: 0; z-index: 2; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0 5px; line-height: 20px; font-size: 14px }
.module-list li a h3 span { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; -webkit-line-clamp: 4; text-overflow: ellipsis; text-align: center }
.module-prev, .module-next { position: absolute; top: 50%; z-index: 1; width: 56px; height: 56px; transform: translateY(-50%); border: 2px solid rgba(255, 255, 255, .1); border-radius: 50%; cursor: pointer; outline: none }
.module-prev::after, .module-next::after { content: ''; position: absolute; left: 50%; top: 50%; width: 33%; height: 33%; border-top: 2px solid rgba(255, 255, 255, 1) }
.module-prev { left: 70px }
.module-prev::after { border-left: 2px solid rgba(255, 255, 255, 1); transform: translate(-30%, -50%) rotate(-45deg) }
.module-next { right: 70px }
.module-next::after { border-right: 2px solid rgba(255, 255, 255, 1); transform: translate(-70%, -50%) rotate(45deg) }
.module-prev:hover, .module-next:hover { background-color: var(--hover-color); border-color: transparent }
.module-prev:hover::after, .module-next:hover::after { border-color: #fff }

/*function*/
.function { position: relative; width: 100%; height: 100vh; padding-top: 138px; background: url(../images/function_bg.jpg) no-repeat center / cover }
.function::before { content: ""; display: block; position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(2, 3, 5, .75) }
.function ul.function-ul { position: relative; z-index: 1; flex: 0 0 calc(100% - 700px); max-width: calc(100% - 700px); height: 100%; margin: 0 auto }
.function ul.function-ul li { flex: 0 0 33.333%; max-width: 33.333%; margin: 36px 0; padding: 0 15px }
.function ul.function-ul li a { display: flex; align-items: center; width: 100%; color: #fff; font-size: 20px }
.function ul.function-ul li a img { display: block; width: 124px; height: 124px }
.function ul.function-ul li a span { display: block; width: calc(100% - 124px); max-height: 124px; padding-left: 30px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; -webkit-line-clamp: 4; text-overflow: ellipsis }
.function-box { flex: 0 0 700px; max-width: 700px; padding: 38px 0 }
.function-slide { position: relative; width: 515px; height: 720px }
.function-slide .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover }
.function-slide .slide-page { bottom: 120px }

/*grid*/
@media (max-width:1600px) {
	/*slide*/
	.slide { position: relative; width: 100% }
	.slide .slide-title { left: 15px; margin: 0 }

	/*module*/
	.module-list { width: calc(100% - 300px) }

	/*function*/
	.function ul.function-ul { flex: 0 0 calc(100% - 615px); max-width: calc(100% - 615px) }
	.function ul.function-ul li a img { width: 100px; height: 100px }
	.function ul.function-ul li a span { width: calc(100% - 100px); max-height: 100px; -webkit-line-clamp: 3 }
	.function-box { flex: 0 0 615px; max-width: 615px }
	.function-slide { width: 415px; height: 620px }
}
@media (max-width:1400px) {
	/*module*/
	.module-list { width: calc(100% - 200px) }

	/*function*/
	.function ul.function-ul { flex: 0 0 calc(100% - 515px); max-width: calc(100% - 515px) }
	.function ul.function-ul li a img { width: 80px; height: 80px }
	.function ul.function-ul li a span { width: calc(100% - 80px); max-height: 80px; padding-left: 20px; -webkit-line-clamp: 2 }
	.function-box { flex: 0 0 515px; max-width: 515px }
	.function-slide { width: 415px; height: 540px }
}
@media (max-width:1024px) {
	/*slide*/
	.volume { position: absolute; right: 20px }

	/*module*/
	.module-prev, .module-next { width: 42px; height: 42px }
	.module-list li a h3 span { font-size: 12px }

	/*function*/
	.function ul.function-ul { flex: 0 0 calc(100% - 315px); max-width: calc(100% - 315px) }
	.function ul.function-ul li a img { width: 60px; height: 60px }
	.function ul.function-ul li a span { width: calc(100% - 60px); max-height: 60px; padding-left: 15px; -webkit-line-clamp: 2; font-size: 14px }
	.function-box { flex: 0 0 315px; max-width: 315px }
	.function-slide { width: 265px; height: 460px }
}
@media (max-width:768px){
	/*slide*/
	.slide-prev, .slide-next { display: none }

	/*module*/
	.module-list { width: calc(100% - 100px) }

	/*function*/
	.function ul.function-ul { flex: 0 0 100%; max-width: 100% }
	.function ul.function-ul li a img { width: 80px; height: 80px }
	.function ul.function-ul li a span { width: calc(100% - 80px); max-height: 80px; padding-left: 15px; -webkit-line-clamp: 2; font-size: 14px }
	.function-box { display: none }
}
@media (max-width:576px){
	/*slide*/
	.slide-page { bottom: 140px }
	.volume { position: absolute; right: 28px; bottom: 130px }
	.volume svg { width: 30px; height: 30px }

	/*module*/
	.module-box, .module-list { height: 120px }
	.module-list { width: calc(100% - 200px); height: 120px }
	.module-list li { padding-top: 15px; padding-bottom: 15px }
	.module-list li a h3 span { -webkit-line-clamp: 2 }
	.module-prev { left: 25px }
	.module-next { right: 25px }

	/*function*/
	.function { padding-top: 80px }
	.function ul.function-ul li { flex: 0 0 50%; max-width: 50%; margin: 20px 0; padding: 0 15px }
	.function ul.function-ul li a img { width: 66px; height: 66px }
	.function ul.function-ul li a span { width: calc(100% - 66px); max-height: 66px; padding-left: 15px; -webkit-line-clamp: 2; font-size: 14px }
	.function-box { display: none }
}