.main-home .s-btn { min-width: 12.5rem; min-height: 3.625rem; padding: 0 2rem; font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-20); font-weight: 400; line-height: 1; } .section-banner { position: relative; height: 100vh; overflow: hidden; } .section-banner__swiper { width: 100%; height: 100%; } .section-banner__swiper .swiper-wrapper, .section-banner__swiper .swiper-slide { height: 100%; } .section-banner__slide { display: flex; align-items: center; position: relative; } .section-banner__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .section-banner__bg video { width: 100%; height: 100%; object-fit: cover; display: block; } .section-banner__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 28, 36, 0.45) 0%, rgba(20, 28, 36, 0.12) 48%, rgba(20, 28, 36, 0.08) 100%); } .section-banner__content { position: relative; z-index: 1; } .section-banner .section__eyebrow, .section-banner .section__title { color: var(--color-white); } .section-banner .section__desc { margin-bottom: 3rem; color: var(--color-white); font-size: var(--font-24); line-height: var(--font-32); } .section-banner__award { position: absolute; right: 4.375rem; bottom: 6.25rem; z-index: 2; display: flex; align-items: stretch; height: 13.125rem; max-width: 36.875rem; } .section-banner__award-card { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 1.75rem; background-color: rgba(255, 255, 255, 0.16); backdrop-filter: blur(1rem); color: var(--color-white); } .section-banner__award-text { margin-bottom: 0; font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-20); line-height: var(--font-27); /* 4行 */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .section-banner__award-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-white); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-16); font-weight: 400; line-height: var(--font-21); transition: color var(--duration-fast) var(--easing); } .section-banner__award-link svg, .section-banner__award-link path { fill: currentColor; } .section-banner__award-link:hover { color: var(--color-primary); } .section-banner__award-img { width: 9.375rem; height: 13.125rem; flex-shrink: 0; object-fit: cover; object-position: center; } .section-1 { position: relative; padding-top: 6.875rem; padding-bottom: 12.5rem; overflow: hidden; background: url("../images/section-1-bg-D1TW0yZ1.png") no-repeat right bottom; } .section-1 .section__inner { position: relative; z-index: 1; } .section-1__header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 5rem; } .section-1__header .section__title { margin-bottom: 0; } .section-1__swiper { margin-bottom: 5rem; } .section-1__item { display: flex; flex-direction: column; min-width: 0; cursor: default; } .section-1__head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; } .section-1__icon { width: 2.75rem; height: 2.75rem; flex-shrink: 0; color: var(--color-text); transition: color var(--duration-fast) var(--easing); } .section-1__icon svg { display: block; width: 100%; height: 100%; } .section-1__icon [stroke] { stroke: currentColor; } .section-1__icon [fill]:not([fill=none]) { fill: currentColor; } .section-1__item.is-active .section-1__icon, .section-1__item:hover .section-1__icon { color: var(--color-primary); } .section-1__copy { flex: 1; min-width: 0; } .section-1__item-title { margin-bottom: 0.5rem; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-22); font-weight: 500; line-height: var(--font-29); } .section-1__item-desc { margin-bottom: 0; color: var(--color-text-muted); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-16); font-weight: 400; line-height: var(--font-21); min-height: 2.625rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .section-1__line { position: relative; width: 100%; height: 1px; margin-bottom: 1.75rem; background: rgba(46, 53, 58, 0.1); } .section-1__line::after { content: ""; position: absolute; inset: 0; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-slow) var(--easing); } .section-1__item.is-active .section-1__line::after, .section-1__item:hover .section-1__line::after { transform: scaleX(1); } .section-1__img { width: 100%; height: 16.25rem; border-radius: 0.75rem; overflow: hidden; } .section-1__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-slow) var(--easing); } .section-1__item:hover .section-1__img img { transform: scale(1.1); } .section-1__more { display: flex; justify-content: center; } .section-1__more.mobile { display: none; } .section-2 { position: relative; height: 100vh; min-height: 50rem; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 3rem; overflow: hidden; color: var(--color-white); } .section-2__swiper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .section-2__swiper .swiper-wrapper, .section-2__swiper .swiper-slide { height: 100%; } .section-2__slide { position: relative; } .section-2__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .section-2__bg video { width: 100%; height: 100%; object-fit: cover; display: block; } .section-2__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.58) 100%); } .section-2__mask { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; } .section-2__content { position: relative; z-index: 2; padding-top: 13.75rem; } .section-2 .section__eyebrow, .section-2 .section__title, .section-2 .section__desc { color: var(--color-white); } .section-2 .section__desc { max-width: 36.25rem; margin-bottom: 2.0625rem; } .section-2__tags { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 36.25rem; margin-bottom: 3.5rem; } .section-2__tags li { padding: 0.3125rem 1.125rem; border-radius: 1.875rem; color: var(--color-white); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-18); font-weight: 400; line-height: var(--font-24); white-space: nowrap; } .section-2__nav { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 0; } .section-2__nav > button:not(.section-2__nav-arrow) { flex: 1; min-width: 0; padding: 0 0.75rem 0.75rem 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.55); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-15); font-weight: 400; line-height: var(--font-22); text-align: left; cursor: pointer; position: relative; transition: color var(--duration-fast) var(--easing); } .section-2__nav > button:not(.section-2__nav-arrow)::after { content: ""; position: absolute; left: 0; right: 0.5rem; bottom: 0; height: 0.125rem; background: rgba(255, 255, 255, 0.28); transition: background var(--duration-fast) var(--easing); } .section-2__nav > button:not(.section-2__nav-arrow):hover, .section-2__nav > button:not(.section-2__nav-arrow).is-active { color: var(--color-white); } .section-2__nav > button:not(.section-2__nav-arrow).is-active::after, .section-2__nav > button:not(.section-2__nav-arrow):hover::after { background: var(--color-white); } .section-2__nav-index { margin-right: 0.5rem; } .section-2__nav-arrow { width: 4.625rem; height: 2.5rem; flex-shrink: 0; margin-left: 1rem; margin-bottom: 0.125rem; padding: 0; border: 0; background: transparent; cursor: pointer; } .section-2__nav-arrow img { display: block; width: 100%; height: 100%; object-fit: contain; } .section-3 { padding-top: 6.875rem; padding-bottom: 7.5rem; background: var(--color-white); position: relative; z-index: 1; } .section-3__header { display: flex; margin-bottom: 1.5rem; } .section-3 .section__desc { max-width: 40.0625rem; } .section-3__grid { margin-top: 7.5rem; display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid rgba(46, 53, 58, 0.1); border-right: 1px solid rgba(46, 53, 58, 0.1); } .section-3__card { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; min-height: 13.75rem; padding: 0 2.9375rem; border-right: 1px solid rgba(46, 53, 58, 0.1); transition: transform var(--duration-normal) var(--easing); } .section-3__card:last-child { border-right: 0; } .section-3__icon { width: 4.5rem; height: 4.5rem; flex-shrink: 0; object-fit: contain; } .section-3__card-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .section-3__card-title { margin-bottom: 0.5rem; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-24); font-weight: 400; line-height: var(--font-32); } .section-3__card-desc { flex: 1; margin-bottom: 3rem; color: var(--color-text-muted); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-20); font-weight: 400; line-height: var(--font-28); /* 3行 */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .section-3__link { display: inline-flex; align-items: center; gap: 0.625rem; width: fit-content; color: var(--color-text-muted); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-18); font-weight: 400; line-height: var(--font-24); transition: color var(--duration-fast) var(--easing); } .section-3__link svg { width: 1.0625rem; height: 0.4375rem; } .section-3__link path { fill: currentColor; } .section-3__link:hover { color: var(--color-primary); } .section-4 { position: relative; padding-top: 6.875rem; padding-bottom: 8.75rem; background: var(--color-white); } .section-4__bg { position: absolute; inset: -20% -10%; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: translate(10%, 10%); pointer-events: none; width: 100%; } .section-4__inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; } .section-4__visual { position: relative; width: 42.1875rem; height: 42.1875rem; flex-shrink: 0; display: flex; justify-content: center; align-items: center; } .section-4__earth { width: 100%; height: 100%; display: block; } .section-4__content { flex: 1; max-width: 45rem; margin-top: 4.25rem; } .section-4 .section__eyebrow { margin-bottom: 1.125rem; font-weight: 500; } .section-4 .section__title { margin-bottom: 1.5rem; } .section-4 .section__desc { margin-bottom: 3rem; line-height: var(--font-30); } .section-4__stats { display: flex; flex-direction: column; border-top: 1px solid rgba(46, 53, 58, 0.1); } .section-4__stat { display: flex; align-items: center; justify-content: space-between; padding: 3rem 0; border-bottom: 1px solid rgba(46, 53, 58, 0.1); } .section-4__stat-num { flex-shrink: 0; font-family: "Aldrich", "MiSans VF", sans-serif; font-size: 5.25rem; font-weight: 400; line-height: 6.25rem; } .section-4__stat-label { color: var(--color-text-muted); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-18); font-weight: 400; line-height: var(--font-23); text-align: left; } @media (min-width: 1440px) { .section-4__visual { position: sticky; top: calc(110Px + var(--header-h)); } } .section-5 { padding-top: 8.125rem; padding-bottom: 7.5rem; background: var(--color-white); position: relative; z-index: 1; } .section-5__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.125rem; } .section-5__body { display: flex; gap: 5.4375rem; } .section-5__line { width: 1px; flex-shrink: 0; align-self: stretch; background: rgba(46, 53, 58, 0.1); } .section-5__featured { width: 48.125rem; display: flex; flex-direction: column; cursor: pointer; } .section-5__featured-media { display: block; width: 100%; height: 32.5rem; margin-bottom: 1.5rem; border-radius: 1.5rem; overflow: hidden; } .section-5__featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-normal) var(--easing); } .section-5__featured:hover .section-5__featured-media img { transform: scale(1.1); } .section-5__featured-title { margin-bottom: 1rem; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-28); font-weight: 400; line-height: var(--font-37); transition: color var(--duration-fast) var(--easing); /* 3行 */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .section-5__featured:hover .section-5__featured-title { color: var(--color-primary); } .section-5__date { color: var(--color-text-muted); font-family: "D-DIN-PRO", "PingFang SC", sans-serif; font-size: var(--font-18); font-weight: 400; line-height: var(--font-24); } .section-5__list { flex: 1; display: flex; flex-direction: column; min-width: 0; } .section-5__list > li { flex: 1; min-height: 0; display: flex; } .section-5__item { display: flex; align-items: center; justify-content: space-between; gap: 1.875rem; flex: 1; min-height: 0; width: 100%; padding: 2.5rem 0; border-bottom: 1px solid rgba(46, 53, 58, 0.1); color: inherit; text-decoration: none; cursor: pointer; } .section-5__list > li:first-child .section-5__item { padding-top: 0; } .section-5__list > li:last-child .section-5__item { border-bottom: 0; padding-bottom: 0; } .section-5__item:hover .section-5__item-title { color: var(--color-primary); } .section-5__item:hover .section-5__item-media img { transform: scale(1.1); } .section-5__item-body { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; } .section-5__item-title { color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-20); font-weight: 400; line-height: var(--font-30); transition: color var(--duration-fast) var(--easing); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .section-5__item-media { display: block; flex-shrink: 0; width: 14.625rem; height: 9.375rem; border-radius: 0.75rem; overflow: hidden; } .section-5__item-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-normal) var(--easing); } @media (max-width: 1439px) { .main-home .s-btn { min-width: 160Px; min-height: 48Px; font-size: 16Px; } .section-banner { height: 100svh; } .section-banner .section__desc { margin-bottom: 32Px; font-size: 18Px; line-height: 26Px; } .section-banner__award { right: var(--p-x); left: var(--p-x); bottom: 40Px; max-width: none; height: 140Px; } .section-banner__award-card { padding: 16Px 20Px; } .section-banner__award-text { font-size: 16Px; line-height: 22Px; } .section-banner__award-img { width: 100Px; height: 140Px; } .section-1 { padding-top: 80Px; padding-bottom: 80Px; } .section-1__header { margin-bottom: 40Px; } .section-1__header .s-arrows { display: none; } .section-1__swiper { margin-bottom: 48Px; } .section-1__more { display: none; } .section-1__more.mobile { display: flex; } .section-2 { height: auto; min-height: 100svh; min-height: 100dvh; padding-bottom: 32Px; } .section-2__content { padding-top: 120Px; } .section-2__nav { flex-wrap: wrap; gap: 16Px; } .section-2__nav > button:not(.section-2__nav-arrow) { flex: 1 1 30%; font-size: 13Px; } .section-2__nav-arrow { width: 48Px; height: 28Px; } .section-3 { padding-top: 72Px; padding-bottom: 72Px; } .section-3__header { flex-direction: column; gap: 12Px; margin-bottom: 16Px; } .section-3 .section__desc { max-width: none; } .section-3__grid { margin-top: 48Px; grid-template-columns: 1fr; border: 0; } .section-3__card { min-height: 0; padding: 28Px 0; border-right: 0; border-bottom: 1Px solid rgba(46, 53, 58, 0.1); } .section-3__card:last-child { border-bottom: 0; } .section-4 { padding-top: 72Px; padding-bottom: 80Px; } .section-4__inner { flex-direction: column-reverse; gap: 40Px; } .section-4__visual { width: 100%; max-width: 420Px; height: 420Px; margin: 0 auto; } .section-4__content { max-width: none; margin-top: 0; } .section-4__stat { padding: 28Px 0; } .section-4__stat-num { font-size: 56Px; line-height: 68Px; } .section-5 { padding-top: 72Px; padding-bottom: 72Px; } .section-5__header { margin-bottom: 32Px; } .section-5__body { flex-direction: column; gap: 32Px; } .section-5__line { display: none; } .section-5__featured { width: 100%; padding-bottom: 20Px; border-bottom: 1Px solid rgba(46, 53, 58, 0.1); } .section-5__featured-media { height: 320Px; } .section-5__item-media { width: 160Px; height: 104Px; } } @media (max-width: 576px) { .section-banner { height: 100svh; min-height: 100svh; min-height: 100dvh; } .section-banner__slide { padding-top: var(--header-m-h); padding-bottom: 160Px; align-items: center; } .section-banner__content { width: 100%; } .section-banner .section__title--hero br { display: none; } .section-banner .section__desc { margin-bottom: 24Px; font-size: 16Px; line-height: 24Px; } .section-banner__award { height: auto; min-height: 0; bottom: 20Px; flex-direction: row; align-items: stretch; } .section-banner__award-card { padding: 12Px 16Px; } .section-banner__award-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14Px; line-height: 20Px; } .section-banner__award-img { width: 72Px; height: 100%; min-height: 96Px; } .section-1 { padding-top: 56Px; padding-bottom: 56Px; background-size: 80% auto; } .section-1__header { margin-bottom: 28Px; } .section-1__swiper { margin-bottom: 32Px; } .section-1__head { margin-bottom: 16Px; } .section-1__img { height: 200Px; } .section-2 { min-height: 100svh; min-height: 100dvh; padding-bottom: 24Px; } .section-2__content { padding-top: 64Px; } .section-2 .section__desc { margin-bottom: 20Px; } .section-2__tags { max-width: none; margin-bottom: 28Px; } .section-2__tags li { font-size: 14Px; padding: 4Px 12Px; } .section-2__nav > button:not(.section-2__nav-arrow) { flex: 1 1 45%; padding-bottom: 8Px; font-size: 16Px; line-height: 18Px; } .section-2__nav-arrow { display: none; } .section-3 { padding-top: 48Px; padding-bottom: 48Px; } .section-3__grid { margin-top: 32Px; } .section-3__icon { width: 48Px; height: 48Px; } .section-3__card-title { font-size: 20Px; line-height: 28Px; } .section-3__card-desc { margin-bottom: 20Px; font-size: 16Px; line-height: 24Px; } .section-3__link { font-size: 16Px; } .section-4 { padding-top: 48Px; padding-bottom: 56Px; } .section-4__visual { max-width: 280Px; height: 280Px; } .section-4 .section__desc { margin-bottom: 28Px; } .section-4__stat { padding: 20Px 0; gap: 12Px; } .section-4__stat-num { font-size: 40Px; line-height: 48Px; } .section-4__stat-label { font-size: 14Px; line-height: 20Px; } .section-5 { padding-top: 48Px; padding-bottom: 48Px; } .section-5__header { flex-direction: row; align-items: center; justify-content: space-between; gap: 12Px; margin-bottom: 24Px; } .section-5__featured-media { height: 200Px; border-radius: 12Px; margin-bottom: 16Px; } .section-5__featured-title { font-size: 20Px; line-height: 28Px; } .section-5__item { padding: 20Px 0; gap: 16Px; } .section-5__item-title { font-size: 16Px; line-height: 24Px; } .section-5__item-media { width: 108Px; height: 72Px; } .section-5__date { font-size: 14Px; } }