You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1017 lines
21 KiB
1017 lines
21 KiB
.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);
|
|
}
|
|
.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);
|
|
}
|
|
.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);
|
|
}
|
|
.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: 2;
|
|
-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;
|
|
}
|
|
}
|