.main-investment { background: var(--color-white); overflow: hidden; } .iv-hero__title { padding-top: calc(var(--header-h) + 7.5rem); padding-bottom: 2.5rem; } .iv-hero__title h1 { display: flex; flex-direction: column; margin: 0; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-48); font-weight: 400; line-height: var(--font-64); } .iv-hero__media { width: 100%; height: 45rem; overflow: hidden; } .iv-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .iv-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 67.5rem); gap: 2.5rem; padding-top: 6.25rem; padding-bottom: 0; } .iv-info__title { margin: 0; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-48); font-weight: 400; line-height: var(--font-64); } .iv-info__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; } .iv-info__item { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid rgb(223, 224, 226); } .iv-info__item--full { grid-column: 1/-1; } .iv-info__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-24); } .iv-info__value { margin: 0; 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); } .iv-announce { padding-top: 6.25rem; padding-bottom: 0; } .iv-announce__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 3.125rem; } .iv-announce__head .s-arrows { display: flex; } .iv-announce__arrows-mobile { display: none; } .iv-announce__title { margin: 0; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-48); font-weight: 400; line-height: var(--font-64); } .iv-announce__swiper { overflow: hidden; } .iv-announce__card { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; width: auto; height: auto; min-height: 20rem; padding: 2.5rem; border-radius: 1.5rem; background: rgb(241, 241, 241); color: var(--color-text); box-sizing: border-box; transition: background 0.3s ease, color 0.3s ease; } .iv-announce__card:hover { background: var(--color-primary); color: var(--color-white); } .iv-announce__card:hover .iv-announce__date { color: var(--color-white); } .iv-announce__card:hover .iv-announce__link { color: var(--color-white); border-color: rgba(255, 255, 255, 0.15); } .iv-announce__card:hover .iv-announce__link path { fill: currentColor; } .iv-announce__date { display: block; color: var(--color-text-muted); font-family: "D-DIN-PRO", "MiSans VF", sans-serif; font-size: var(--font-16); font-weight: 400; line-height: var(--font-16); opacity: 0.8; } .iv-announce__name { margin: 0; flex: 1; font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-24); font-weight: 400; line-height: var(--font-32); /* 3行 */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .iv-announce__link { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.625rem; width: 100%; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid rgb(223, 224, 226); color: var(--color-text-muted); text-decoration: none; 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), border-color var(--duration-fast) var(--easing); } .iv-announce__link svg { width: 1rem; height: 0.875rem; display: block; flex-shrink: 0; } .iv-announce__link path { fill: currentColor; } .iv-announce__link.is-disabled { pointer-events: none; cursor: default; opacity: 0.55; } .iv-stock { padding-top: 6.25rem; padding-bottom: 0; } .iv-stock__title { margin: 0 0 6rem; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-48); font-weight: 400; line-height: var(--font-64); } .iv-stock__body { display: grid; grid-template-columns: minmax(0, 50rem) minmax(0, 45rem); gap: 6.875rem; align-items: start; } .iv-stock__code { margin: 0 0 1.125rem; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-18); font-weight: 500; line-height: var(--font-24); } .iv-stock__quote { display: flex; align-items: baseline; margin-bottom: 5rem; /*color: var(--color-primary);*/ } .iv-stock__price { font-family: "D-DIN-PRO", "MiSans VF", sans-serif; font-size: var(--font-60); font-weight: 500; line-height: var(--font-60); } .iv-stock__unit { font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-18); font-weight: 500; line-height: var(--font-30); } .iv-stock__change { margin-left: 1.75rem; font-family: "D-DIN-PRO", "MiSans VF", sans-serif; font-size: var(--font-18); font-weight: 500; line-height: var(--font-18); } .iv-stock__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 4rem; margin: 0 0 5.625rem; padding: 0; list-style: none; } .iv-stock__metric-label { display: block; margin-bottom: 1rem; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-16); font-weight: 500; line-height: var(--font-26); } .iv-stock__metric-value { display: block; color: var(--color-text); font-family: "D-DIN-PRO", "MiSans VF", sans-serif; font-size: var(--font-32); font-weight: 500; line-height: var(--font-38); } .iv-stock__note { margin: 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-26); } .iv-stock__chart { overflow: hidden; border-radius: 1.875rem; padding: 1.75rem; border: 1px solid rgb(223, 224, 226); } .iv-stock__chart img { display: block; width: 100%; height: auto; } .iv-learn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 67.5rem); gap: 2.5rem; padding-top: 6.25rem; padding-bottom:6.25rem; } .iv-learn__title { margin: 0; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-48); font-weight: 400; line-height: var(--font-64); } .iv-learn__list { margin: 0; padding: 0; list-style: none; } .iv-learn__list:not(.is-expanded) .iv-learn__item:nth-child(n+7) { display: none; } .iv-learn__item { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr) auto; align-items: center; min-height: 6.25rem; padding: 2.125rem 0; border-bottom: 1px solid rgb(223, 224, 226); cursor: pointer; text-decoration: none; transition: border-color var(--duration-fast) var(--easing); } .iv-learn__item:hover { border-bottom-color: var(--color-primary); } .iv-learn__item:hover .iv-learn__name { color: var(--color-primary); } .iv-learn__item:hover .iv-learn__link { color: var(--color-primary); } .iv-learn__date { color: var(--color-text-muted); font-family: "D-DIN-PRO", "MiSans VF", sans-serif; font-size: var(--font-16); font-weight: 400; line-height: var(--font-16); } .iv-learn__name { margin: 0; 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); transition: color var(--duration-fast) var(--easing); } .iv-learn__link { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--color-text-muted); text-decoration: none; font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-16); font-weight: 400; line-height: var(--font-21); white-space: nowrap; transition: color var(--duration-fast) var(--easing); } .iv-learn__link svg { width: 1rem; height: 0.875rem; display: block; } .iv-learn__link path { fill: currentColor; } .iv-learn__more { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 2rem; padding: 0; border: 0; background: transparent; color: rgba(46, 53, 58, 0.6); cursor: pointer; transition: color var(--duration-fast) var(--easing); } .iv-learn__more:hover { color: var(--color-primary); } .iv-learn__more-icon { display: block; line-height: 0; } .iv-learn__more-icon svg { display: block; width: 0.75rem; height: auto; } .iv-learn__more-icon--up { opacity: 0.35; transform: scaleY(-1); transition: opacity var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing); } .iv-learn__more-icon--down { opacity: 1; transition: opacity var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing); } .iv-learn__more.is-expanded .iv-learn__more-icon--up { opacity: 1; transform: scaleY(1); } .iv-learn__more.is-expanded .iv-learn__more-icon--down { opacity: 0.35; transform: scaleY(-1); } .iv-hotline { position: relative; min-height: 50rem; color: var(--color-white); } .iv-hotline__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .iv-hotline__bg img { display: block; width: 100%; height: 100%; object-fit: cover; } .iv-hotline__bg::after { content: ""; position: absolute; inset: 0; background: rgba(46, 53, 58, 0.3); } .iv-hotline__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34.25rem); gap: 2.5rem; padding-top: 6.25rem; padding-bottom: 7.5rem; } .iv-hotline__title { margin: 0; font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-48); font-weight: 400; line-height: var(--font-64); } .iv-hotline__list { margin: 0; padding: 0; list-style: none; } .iv-hotline__item { padding: 2rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .iv-hotline__row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .iv-hotline__icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .iv-hotline__label { font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-18); font-weight: 400; line-height: var(--font-24); } .iv-hotline__value { margin: 0; font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-24); font-weight: 400; line-height: var(--font-27); padding-left: 2.5rem; } .iv-hotline__value a { color: inherit; text-decoration: none; } .iv-hotline__value a:hover { text-decoration: underline; } @media (max-width: 1439px) { .iv-hero__title h1 { font-size: 40Px; line-height: 54Px; } .iv-hero__media { height: 520Px; } .iv-info, .iv-learn, .iv-hotline__inner { grid-template-columns: 1fr; gap: 32Px; } .iv-info, .iv-announce, .iv-stock, .iv-learn { padding-top: 80Px; padding-bottom: 80Px; } .iv-stock__body { grid-template-columns: 1fr; gap: 40Px; } .iv-stock__title { margin-bottom: 48Px; } .iv-stock__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24Px 40Px; } } @media (max-width: 992px) { .iv-info__grid { grid-template-columns: 1fr; } .iv-announce__card { min-height: 280Px; padding: 28Px; } .iv-learn__item { grid-template-columns: 1fr; gap: 12Px; align-items: flex-start; } } @media (max-width: 576px) { .iv-hero__title { padding-top: calc(var(--header-h) + 5rem); padding-bottom: 24Px; } .iv-hero__title h1 { font-size: 28Px; line-height: 40Px; } .iv-hero__media { height: 280Px; } .iv-info__title, .iv-announce__title, .iv-stock__title, .iv-learn__title, .iv-hotline__title { font-size: 32Px; line-height: 44Px; } .iv-info__value, .iv-announce__name, .iv-learn__name, .iv-hotline__value { font-size: 18Px; line-height: 26Px; } .iv-stock__price { font-size: 44Px; line-height: 44Px; } .iv-stock__metrics { grid-template-columns: 1fr 1fr; } .iv-info, .iv-announce, .iv-stock, .iv-learn { padding-top: 4rem; } .iv-info, .iv-announce, .iv-stock, .iv-hotline { padding-bottom: 0; } .iv-learn { padding-bottom: 4rem; } .iv-hotline { padding-bottom: 0; } .iv-announce__head .s-arrows { display: none; } .iv-announce__arrows-mobile { display: flex; justify-content: flex-start; margin-top: 24Px; } .iv-announce__arrows-mobile .s-arrows { display: flex; gap: 16Px; } }