@charset "UTF-8";
body { background-color: #f1f1f1; min-width: var(--min-width); font-size: 12rem; }

.banner { width: 100%; overflow: hidden; position: relative; min-width: var(--min-width); }
.banner .arrow { position: absolute; top: 50%; width: 36rem; height: 36rem; border-radius: 50%; transform: translateY(-50%); transition: all 0.2s; color: #000; opacity: 0.5; }
.banner .arrow.left { left: -40rem; }
.banner .arrow.right { right: -40rem; }
.banner:hover .arrow.left { left: 40rem; }
.banner:hover .arrow.right { right: 40rem; }
.banner .arrow:hover { opacity: 1; }

.banner-img { display: flex; width: calc(100% * var(--product-count,5)); transform: translateX(var(--swiper-left, 0)); transition: transform cubic-bezier(0.49, 0, 0.36, 1) .8s; }

.banner-img a { width: 100%; aspect-ratio: var(--banner-aspect-ratio); transition: all 0.2s; }
.banner-img a:hover { transform: scale(1.02); }

.banner img { width: 100%; height: 100%; display: block; object-fit: cover; }

main { margin: 0 auto; width: 80vw; padding: 80rem 0; box-sizing: border-box; }

/* 公司介绍 */
main .intro { margin: 0 auto; padding: 60rem; box-sizing: border-box; width: 800rem; position: relative; }
main .intro::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; background: #fff; height: 300rem; z-index: -1; }
main .intro > i { position: absolute; left: 60rem; top: 293rem; width: 14rem; height: 14rem; display: block; color: #999; }
main .intro > div { display: flex; justify-content: space-between; }

main .intro > div > div { width: 310rem; }

main .intro > div > div > img { display: block; width: 100%; }

main .intro-text { color: #333; font-size: 14rem; line-height: 24rem; padding: 10rem 0; display: flex; flex-direction: column; justify-content: space-between; }
main .intro-text > p { margin: 0; }

/* 公司理念 */
main .brand { margin: 100rem auto 0 auto; padding: 60rem; box-sizing: border-box; width: 800rem; position: relative; background: #fff; }

main .brand > h2 { font-size: 18rem; }
main .brand > img { position: absolute; top: -60rem; right: -40rem; width: 480rem; height: 240rem; }
main .brand > p { font-size: 14rem; width: 240rem; line-height: 24rem; }
main .brand > dl { background: #f1f1f1; padding: 40rem; margin: 60rem 0 0 0; font-size: 14rem; display: flex; gap: 20rem; }

main .brand > dl > div:first-child { flex-basis: 70%; }

main .brand dt { font-weight: bold; margin-bottom: 3rem; }
main .brand dt::before { content: '·'; display: inline-block; width: 20rem; }

main .brand dd { margin: 0; line-height: 24rem; padding-left: 20rem; color: #444; margin-bottom: 20rem; }
main .brand dd:last-child { margin-bottom: 0; }

main .hot-product { margin-top: 80rem; min-width: var(--min-width); margin-bottom: -10vw; }
main .hot-product > div:nth-of-type(1) { aspect-ratio: 16/4; overflow: hidden; }
main .hot-product .hot-product-banner { width: calc(100% * var(--hot-product-count,3)); display: flex; transform: translateX(var(--hot-product-left, 0)); transition: transform .6s; height: 100%; }
main .hot-product .hot-product-banner > img { width: 100%; height: 100%; display: block; object-fit: cover; }

main .hot-product > div:nth-of-type(2) { transform: translateY(-10vw); }
main .hot-product > div:nth-of-type(2) > div { width: 60vw; min-width: 800rem; position: relative; overflow: hidden; margin: 0 auto; }
main .hot-product .hot-product-box { width: calc(100% * var(--hot-product-count,3)); display: flex; transform: translateX(var(--hot-product-left, 0)); transition: transform .6s; }
main .hot-product .hot-product-box > div { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 40rem; }
main .hot-product .hot-product-box > div > a { flex: 1; aspect-ratio: 16/9; }
main .hot-product .hot-product-box > div > a > img { display: block; width: 100%; height: 100%; object-fit: cover; }
main .hot-product .hot-product-box > div > div { width: 240rem; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; }
main .hot-product .hot-product-box > div > div::after { content: ''; display: block; height: 80rem; }
main .hot-product .hot-product-box > div > div h3 { font-size: 18rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 0 0 20rem 0; }
main .hot-product .hot-product-box > div > div p { font-size: 14rem; color: #666; line-height: 24rem; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 50rem; white-space: pre-wrap; }

main .hot-product .hot-product-btns { position: absolute; right: 240rem; bottom: 20rem; display: flex; gap: 10rem; transform: translateX(100%); }
main .hot-product-btns a { color: #000; opacity: 0.7; }
main .hot-product-btns a:hover { opacity: 1; }
main .hot-product-btns a.disabled { opacity: 0.2; pointer-events: none; }


.product-grid { margin-top: 80rem; }
.product-grid > div { display: grid; grid-template-columns: repeat(4, 200rem); grid-template-rows: repeat(3, 200rem); justify-content: center; align-items: center; align-content: center; grid-gap: 15rem; grid-template-areas:
        'a b b c'
        'd b b c'
        'd e f g'; justify-items: center; }
.product-grid > div > div { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.product-grid > div > div:nth-of-type(1) { grid-area: a; }
.product-grid > div > div:nth-of-type(2) { grid-area: b; }
.product-grid > div > div:nth-of-type(3) { grid-area: c; }
.product-grid > div > div:nth-of-type(4) { grid-area: d; }
.product-grid > div > div:nth-of-type(5) { grid-area: e; }
.product-grid > div > div:nth-of-type(6) { grid-area: f; }
.product-grid > div > div:nth-of-type(7) { grid-area: g; }

.product-grid > div > div > a { width: 100%; height: 100%; position: relative; }
.product-grid > div > div > a > img { width: 100%; height: 100%; object-fit: cover; }

.product-grid > div > div > a > span { position: absolute; font-size: 14rem; color: #000; box-sizing: border-box; display: flex; gap: 10rem; align-items: center; width: 100%; height: 100%; bottom: 0; left: 0; background: linear-gradient(to bottom, transparent 40%, #fff); flex-direction: column; justify-content: flex-end; opacity: 0; transition: opacity 0.2s; }


.product-grid > div > div > a:hover > span { opacity: 1; }

.product-grid > div > div > a > span > i { font-style: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; text-align: center; padding: 0 5rem; display: block; box-sizing: border-box; min-width: 0; }

.product-grid > div > div > a > span > em { font-style: normal; margin-bottom: 20rem; background: #000; color: #fff; padding: 2rem 12rem; border-radius: 20rem; }


.product-grid > div > div > img { width: 100%; height: 100%; object-fit: cover; }

.md-fnxt { margin-top: 80rem; display: flex; gap: 60rem; align-items: center; justify-content: center; min-width: var(--min-width); }
.md-fnxt > img { width: 400rem; }
.md-fnxt > div { width: 400rem; background: #fff; padding: 40rem; box-sizing: border-box; position: relative; }
.md-fnxt > div::after { content: ''; position: absolute; left: 400rem; top: 0; width: calc(50vw - 480rem); height: 100%; background: #fff; box-shadow: 80rem 0px 0px 0px #fff; }
.md-fnxt > div > h3 { font-size: 18rem; width: 200rem; background: #f1f1f1; text-align: center; margin: 0 auto; }
.md-fnxt > div > ul { list-style-type: none; margin: 40rem 0 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,auto); grid-row-gap: 40rem; }

.md-fnxt > div > ul > li { display: flex; flex-direction: column; align-items: center; gap: 12rem; font-size: 14rem; }
.md-fnxt > div > ul > li > img { height: 48rem; }

.md-pics { margin-top: 80rem; position: relative; min-width: var(--min-width); aspect-ratio: 16/7; overflow: hidden; }

.md-pics > img { position: absolute; left: 0; top: 0; width: calc(100% - 160rem); height: 100%; object-fit: cover; transition: all 0.6s; }
.md-pics > div { position: absolute; bottom: 20rem; right: 180rem; z-index: 10; display: flex; gap: 10rem; }
.md-pics > div > a { opacity: 0.7; color: #000; transition: all 0.2s; }
.md-pics > div > a:hover { opacity: 1; }

.md-pics > div > a.disabled { opacity: 0.3; pointer-events: none; }

.md-pics > img:nth-of-type(1) { z-index: 5; }
.md-pics > img:nth-of-type(2) { z-index: 4; left: 40rem; }
.md-pics > img:nth-of-type(3) { z-index: 3; left: 80rem; }
.md-pics > img:nth-of-type(4) { z-index: 2; left: 120rem; }
.md-pics > img:nth-of-type(5) { z-index: 1; left: 160rem; }
.md-pics > img.collapse { transform: translateX(calc((100% - 40rem) * -1)); }