main { overflow: hidden; zoom: 1 }

/*slide*/
.slide { position: relative; width: 100%; height: initial }
.slide .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover }
.slide-page { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 20px; left: 0; z-index: 1; width: 100%; height: 2px }
.slide-page .page-bullet { display: block; width: 40px; height: 2px; background: rgba(0, 0, 0, .45); margin-left: 10px; cursor: pointer }
.slide-page .page-bullet:first-child { margin-left: 0 }
.slide-page .page-bullet.page-active { background: linear-gradient(90deg, #fd7e01, #fd7e01) }

/*title*/
.title { justify-content: space-between; align-items: flex-end }
.title h2 { font-weight: 600; font-size: 36px; color: #0d0103 }
.title a.more { font-size: 18px; color: #fd7e01 }

/*video*/
.videobox { position: relative; width: 100%; height: 880px }
.videobox .video { display: block; width: 100%; height: 100%; object-fit: cover }
.videobox .video-modal { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5) }
.videobox .video-modal .video-btn { color: #f0f1ef; cursor: pointer; border: none; background-color: transparent }

/*product*/
.productbox { padding-top: 70px; background-color: #fff7f0 }
.product-wrap { position: relative; margin-top: 70px; padding-bottom: 70px }
.product-pagination { text-align: center }
.product-pagination.home-pagination { bottom: -33px !important; left: 0; right: 0; text-align: center }
.product-pagination .swiper-pagination-bullet { margin: 0 4px; width: 10px; height: 10px; opacity: 1; background-color: transparent; border: 2px solid #697c64 }
.product-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #697c64 }
.product-swiper .swiper-slide { max-width: 292px; padding: 12px; box-sizing: border-box }
.product-swiper .product-item { background-color: #fff; padding: 15px 15px 30px; text-align: center; -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, .2); box-shadow: 0 0 12px rgba(0, 0, 0, .2) }
.product-swiper .product-item::after { display: block; content: ''; width: 37px; height: 3px; background-color: #ada9a9; margin: 28px auto 0 }
.product-swiper .product-item .p-pic img { display: block; width: 100% }
.product-swiper .product-item .p-title { font-size: 18px; margin-top: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #0d0103 }
.product-swiper .product-item .p-title a { color: #0d0103 }
.product-swiper .product-item .item_price { margin-top: 10px }

/*series*/
.seriesbox { padding-top: 60px; padding-bottom: 60px; background-color: #fff }
.seriesbox .title { }
.seriesbox .title h2 { display: flex; align-items: center }
.seriesbox .title h2::after { content: ''; width: 0; height: 0; margin-left: 45px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 20px solid #fd7e01 }
.series-l { padding-top: 82px }
.series-a { position: relative; display: block; width: 100%; height: 100%; color: #656464; background-color: #fff; transition: all .1s ease; overflow: hidden }
.series-a figure { position: relative; width: 100%; height: calc(100% - 44px); margin: 0; overflow: hidden }
.series-a figure i { display: flex; justify-content: center; align-items: center; position: absolute; right: 40px; bottom: 22px; z-index: 2; width: 42px; height: 42px; color: #444; border-radius: 100%; background: rgba(255, 255, 255, .6) }
.series-a figure img { display: 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: relative; z-index: 2 }
.series-a:hover figure i { color: #fff; background: #fd7e01 }
.series-a:hover figure img { transform: scale3d(1.1, 1.1, 1.1) }
.series-a span { display: block; text-align: right; padding: 12px 15px; line-height: 20px }
.series-item:nth-child(n+3) { margin-top: 16px }
.series-item>a { position: relative; display: block; width: 100%; height: 100%; padding-top: 8px; padding-left: 7px }
.series-item:nth-child(2n)>a { padding-left: 0; padding-right: 7px }
.series-item>a::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 94%; height: 78%; background: #656464 }
.series-item:nth-child(2n)>a::before { left: inherit; right: 0 }
.series-item>a figure { position: relative; width: 100%; height: calc(100% - 44px); margin: 0; overflow: hidden }
.series-item>a figure img { display: 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: relative; z-index: 2; object-fit: cover }
.series-item>a:hover figure img { transform: scale3d(1.1, 1.1, 1.1) }
.series-item>a span { display: block; text-align: center; padding: 12px 15px; line-height: 20px }

/*newsbox*/
.newsbox { padding-top: 70px; background-color: #efefef }
.news-wrap { margin-left: -5px; margin-right: -5px; padding-top: 70px }
.news-l, .news-r { height: 558px; padding-left: 5px; padding-right: 5px }
.news-item { position: relative; display: block; width: 100%; height: 100%; color: var(--text-color); background-color: #fff; transition: all .1s ease; overflow: hidden }
.news-item figure { position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden }
.news-item figure::after { content: ""; display: block; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; background: rgba(0, 0, 0, .4) }
.news-item figure img { display: 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: relative; z-index: 2; object-fit: cover }
.news-item:hover figure img { transform: scale3d(1.1, 1.1, 1.1) }
.news-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; justify-content: space-between; align-items: flex-end; padding: 22px 50px; color: #fff }
.news-info h3 { max-width: 60%; flex: 0 0 60%; line-height: 40px }
.news-info a { display: block; padding: 5px 10px; font-size: 12px; color: #fff; border: 1px solid #fff }
.news-info a:hover { color: #fd7e01; border-color: #fd7e01 }
.news-l .news-item:first-child { height: 200px }
.news-l .news-item:last-child { height: 348px; margin-top: 10px }

/*aboutbox*/
.aboutbox { width: 100%; height: 758px; align-items: center }
.about-l { max-width: calc(100% - 1190px); flex: 0 0 calc(100% - 1190px) }
.about-l img { display: block; margin-top: 120px; margin-left: 80px }
.about-l span { display: block; margin-top: 20px; padding-left: 80px; font-weight: 600; font-size: 20px; color: #0d0103 }
.about-l a.more { display: block; margin-top: 80px; margin-left: 80px; font-size: 18px; color: #fd7e01 }
.about-info { position: relative; width: 100%; height: 293px; margin-top: 20px; padding-left: 80px; padding-right: 25px; display: flex; align-items: center }
.about-info::before { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 283px; background: #fd7e01 }
.about-info p { position: relative; z-index: 3; width: 100%; height: 160px; line-height: 40px; font-size: 19px; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; -webkit-line-clamp: 5; text-overflow: ellipsis }
.about-info::after { content: ""; position: absolute; top: 14px; left: 0; z-index: 2; display: block; width: calc(100% + 125px); height: 283px; background: rgba(134, 132, 132, .9); -webkit-clip-path: polygon(0 0, 100% 0%, 88% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 88% 100%, 0% 100%) }
.about-r { max-width: 1190px; flex: 0 0 1190px }
.about-r img { display: block; width: 100%; height: 100%; object-fit: cover }

/*fasabox*/
.bundlebox { padding-top: 100px; padding-bottom: 120px; background-color: #fff7f0 }
.bundle-title { flex-direction: column; align-items: center; color: #fd7e01 }
.bundle-title h2 { color: #fd7e01 }
.bundle-title p { margin-top: 20px; line-height: 36px; text-align: center }
#fasa-module-2 .swiper-wrapper { justify-content: center }
.fasabox { padding-top: 120px; padding-bottom: 160px; background-color: #efefef }
.fasa-title { flex-direction: column; align-items: center; color: #0d0103 }
.fasa-title h2 { color: #0d0103 }
.fasa-title p { margin-top: 20px; line-height: 36px; text-align: center }
.fasa-wrap { position: relative }
.fasa-module { margin-top: 70px }
.fasa-module .w-item { text-align: center }
.fasa-module .w-item .p-pic { height: 150px; display: flex; align-content: center }
.fasa-module .w-item .p-pic img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto }
.fasa-module .w-item .p-text { margin-top: 10px }
.fasa-prev, .fasa-next { position: absolute; top: 50%; z-index: 1; width: 50px; height: 50px; transform: translateY(-50%); cursor: pointer; transition: 0.3s; background: transparent }
.fasa-prev::after, .fasa-next::after { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 0 }
.fasa-prev { left: -50px }
.fasa-prev::after { border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 35px solid #0d0103 }
.fasa-next { right: -50px }
.fasa-next::after { border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 35px solid #0d0103 }
.fasa-prev:hover::after { border-right-color: #fd7e01 }
.fasa-next:hover::after { border-left-color: #fd7e01 }

/*grid*/
@media (max-width:1600px) {
	/*aboutbox*/
	.aboutbox { width: 100%; height: initial; align-items: center }
	.about-l { max-width: 38%; flex: 0 0 38% }
	.about-l img { margin-top: 40px; margin-left: 40px }
	.about-l span { margin-top: 20px; padding-left: 40px; font-weight: 600; font-size: 24px }
	.about-l a.more { display: block; margin-top: 30px; margin-left: 40px; font-size: 18px }
	.about-info { width: 100%; height: 243px; margin-top: 20px; padding-left: 40px; padding-right: 25px }
	.about-info::before { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 233px; background: #fd7e01 }
	.about-info p { width: 100%; height: 180px; line-height: 30px; font-size: 18px; -webkit-line-clamp: 6 }
	.about-info::after { height: 233px }
	.about-r { max-width: 62%; flex: 0 0 62% }
}
@media (max-width:1440px) {
	/*video*/
	.videobox { height: initial }

}
@media (max-width:1280px) {
	/*aboutbox*/
	.about-l { max-width: 44%; flex: 0 0 44% }
	.about-r { max-width: 56%; flex: 0 0 56%; height: 500px }
	.about-l span { margin-top: 20px; padding-left: 40px; font-size: 20px }
	.about-info { width: 100%; height: 203px; margin-top: 20px; padding-left: 40px; padding-right: 25px }
	.about-info::before { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 193px }
	.about-info p { position: relative; z-index: 3; width: 100%; height: 150px; line-height: 30px; font-size: 16px; -webkit-line-clamp: 5 }
	.about-info::after { height: 193px }
}
@media (max-width:1024px) {  }
@media screen and (min-width:767px) and (max-width:992px) {

}
@media (max-width:768px) {
	/*title*/
	.title h2 { font-size: 26px }
	.title a.more { font-size: 16px }

	/*video*/
	.videobox .video-modal .video-btn svg { width: 10vw; height: 10vw }

	/*series*/
	.series-l, .series-r { max-width: 100%; flex: 0 0 100% }
	.series-r { margin-top: 16px }
	.series-l { padding-top: 16px }

	/*aboutbox*/
	.aboutbox { flex-direction: column; align-content: center; height: initial }
	.about-l, .about-r { max-width: 100%; flex: 0 0 100% }
	.about-l img { margin-top: 60px; margin-left: 25px; padding-right: 25px }
	.about-l span { margin-top: 20px; padding-left: 25px; padding-right: 25px }
	.about-l a.more { margin-top: 30px; margin-left: 25px; margin-bottom: 30px }
	.about-info { width: 100%; height: 253px; margin-top: 20px; padding-left: 25px; padding-right: 85px }
	.about-info::before { width: 100%; height: 243px }
	.about-info p { width: 100%; height: 150px; line-height: 30px; font-size: 18px; -webkit-line-clamp: 5 }
	.about-info::after { width: 100%; height: 243px }
}
@media (max-width:576px) {
	/*slide*/
	.slide { height: 600px }
	.slide-page .page-bullet { width: 30px }

	/*product*/
	.productbox { padding-top: 50px; background-color: #fff7f0 }
	.product-wrap { position: relative; margin-top: 50px; padding-bottom: 50px }
	.product-swiper .product-item .p-title { font-size: 14px }
	.product-swiper .product-item .item_price { font-size: 12px }

	/*series*/
	.seriesbox { padding-top: 50px; padding-bottom: 40px }
	.series-item { margin-top: 16px }

	/*newsbox*/
	.newsbox { padding-top: 50px }
	.news-wrap { padding-top: 50px }
	.news-l, .news-r { height: initial }
	.news-r { margin-top: 10px }
	.news-info { padding: 20px 25px }
	.news-info h3 { max-width: 70%; flex: 0 0 70%; line-height: 28px; font-size: 14px }
	.news-info a { font-size: 10px }
	.news-l .news-item:first-child, .news-l .news-item:last-child { height: initial }

	/*aboutbox*/
	.aboutbox { flex-direction: column; align-content: center; height: initial }
	.about-l, .about-r { max-width: 100%; flex: 0 0 100% }
	.about-l img { margin-top: 60px; margin-left: 25px; padding-right: 25px }
	.about-l span { margin-top: 20px; padding-left: 25px; padding-right: 25px; font-size: 20px }
	.about-l a.more { margin-top: 30px; margin-left: 25px; margin-bottom: 30px; font-size: 16px }
	.about-info { width: 100%; height: 253px; margin-top: 20px; padding-left: 25px; padding-right: 35px }
	.about-info::before { width: 100%; height: 243px }
	.about-info p { width: 100%; height: 210px; line-height: 30px; font-size: 14px; -webkit-line-clamp: 7 }
	.about-info::after { width: 100%; height: 243px }

	/*fasabox*/
	.bundlebox { padding-top: 50px; padding-bottom: 60px }
	.fasabox { padding-top: 50px; padding-bottom: 60px }
	.fasa-module { margin-top: 50px }

	.fasa-prev, .fasa-next { width: 15px; height: 15px }
	.fasa-prev { left: -15px }
	.fasa-prev::after { border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid #0d0103 }
	.fasa-next { right: -15px }
	.fasa-next::after { border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #0d0103 }
}