.p-home .section-news .item,
.p-contact .form .textbox-area,
.p-portfolio-details .page,
.p-portfolio .project,
.p-team .person,
.news-list {
    --row-gap: var(--gap, 0px);
    --column-gap: var(--gap, 0px);
    --total: 12;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, var(--row-gap, 0px)) var(--gap, var(--column-gap, 0px))
}

.p-home .section-news .image,
.p-home .section-news .link,
.p-contact .form .textbox-wrapper,
.p-portfolio-details .side,
.p-portfolio-details .main,
.p-portfolio .project .info,
.p-portfolio .project .image-wrapper,
.p-team .person .image-wrapper,
.p-team .person .info,
.f-carousel-gallery .f-carousel__slide,
.news-list .item {
    --size: 12;

    --width: calc((100% - var(--column-gap) * (var(--column) - 1)) / var(--column));
    width: var(--width)
}

.container {
    --padding-x: calc((100% - (1760 / 1920 * 100vw)) / 2);
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
    margin-left: auto;
    margin-right: auto
}

.news-list .underline {
    --size: 1px;
    --color: currentColor;
    text-decoration: none;
    background-image: linear-gradient(var(--color), var(--color));
    background-size: 0% var(--size);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition-property: color, background-size;
    transition-duration: var(--default-duration);
    transition-timing-function: var(--default-timing-function)
}

.news-list .underline:hover {
    background-size: 100% var(--size);
    background-position-x: 0%
}

.news-list .image {
    transition-property: transform;
    transition-duration: var(--duration-3);
    transition-timing-function: var(--default-timing-function);
    transform: scale(1.005)
}

.news-list .news:hover .image {
    transform: scale(1.075)
}

.p-team .person .richtext:not(.active) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp, 1);
    -webkit-box-orient: vertical
}


*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: solid
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    touch-action: manipulation;
    font-family: Poppins, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: .8333333333vw
}

@media(max-width: 767px) {
    html {
        font-size: 4.2666666667vw
    }
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    outline: 0;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0)
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word
}

a {
    text-decoration: none;
    color: inherit
}

ul,
ol {
    list-style: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit
}

sup,
sub {
    font-size: .5em
}

button {
    cursor: pointer
}

:root {
    --duration-1: 0.15s;
    --duration-2: 0.25s;
    --duration-3: 0.5s;
    --duration-4: 0.75s;
    --duration-5: 1s;
    --default-duration: var(--duration-2);
    --default-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.popup {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 999
}

.popup-container {
    max-height: 100%;
    overflow: auto;
    padding: 4rem
}

.popup-content {
    max-width: 80rem;
    margin: 0 auto;
    background-color: #fff;
    position: relative
}

.popup-close {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    top: 2rem;
    right: 2rem
}

.popup-enter-active,
.popup-leave-active {
    transition-property: background-color;
    transition-duration: var(--default-duration);
    transition-timing-function: var(--default-timing-function)
}

.popup-enter-from,
.popup-leave-to {
    background-color: rgba(0, 0, 0, 0)
}

.popup-enter-active .popup-content,
.popup-leave-active .popup-content {
    transition-property: transform, opacity;
    transition-duration: var(--default-duration);
    transition-timing-function: var(--default-timing-function)
}

.popup-enter-from .popup-content,
.popup-leave-to .popup-content {
    opacity: 0;
    transform: scale(0.9)
}

@keyframes spinner-loading {
    to {
        transform: rotate(360deg)
    }
}

.spinner {
    --spinner-size: 3rem;
    --spinner-border-width: 2;
    inset: 0;
    background-color: rgba(255, 255, 255, .5);
    padding: 2rem;
    z-index: 8;
    position: fixed;
    color: var(--brand-color, #000)
}

.spinner::after {
    content: "";
    width: var(--spinner-size);
    height: var(--spinner-size);
    position: absolute;
    left: 50%;
    margin-left: calc(-0.5*var(--spinner-size));
    top: 50%;
    margin-top: calc(-0.5*var(--spinner-size));
    animation: spinner-loading .75s linear 0s infinite normal none running;
    border-style: solid;
    border-width: var(--spinner-border-width);
    border-color: currentColor currentColor rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-radius: 9999
}

.toast {
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 4px;
    padding: .5rem 1rem;
    position: fixed;
    inset: auto 0 1.5rem;
    width: fit-content;
    max-width: 95%;
    text-align: center;
    margin: auto
}

.toast-enter-active,
.toast-leave-active {
    transition-property: opacity, transform;
    transition-duration: var(--duration-2);
    transition-timing-function: var(--ease-in-out-cubic)
}

.toast-enter-from,
.toast-leave-to {
    opacity: 0
}

.toast-enter-from {
    transform: translateY(10px)
}

.slide-in {
    opacity: 0
}

@keyframes slide-in {
    0% {
        transform: translateY(16px)
    }

    100% {
        opacity: 1;
        transform: translate(0)
    }
}

.slide-in.enter {
    animation: slide-in .5s calc(var(--index, 0)*75ms) forwards
}

.p-home .section-news,
.p-contact .footer,
.p-contact .form,
.p-career .mailto,
.p-news-details .header2,
.p-news-list,
.p-portfolio-details .header2,
.p-portfolio,
.p-team .team,
.menu-mobile,
:is(.p-team, .p-home) .footer,
.footer :is(.lang, .top),
.header2.black {
    background-color: #000;
    color: #fff
}

.p-home .section-news .pointer,
.p-home .section-news .image,
.p-home .industry,
.p-home .carousel .slide,
.p-contact .form .submit,
.p-news-list .category a,
.p-portfolio .project .arrow~.text,
.p-portfolio .project .arrow,
.p-portfolio .project .image,
.p-portfolio .project .bg,
.p-portfolio .project,
.icon-play,
.dialog-enter-active,
.dialog-leave-active,
.dialog-enter-active .content,
.dialog-leave-active .content,
.arrow-btn,
.p-team .person .pointer,
.dialog .button .pointer,
.header .pointer {
    transition-duration: .5s;
    transition-timing-function: var(--default-timing-function)
}

.p-team .person .pointer,
.dialog .button .pointer,
.header .pointer {
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    right: 100%;
    margin-top: -0.5rem;
    margin-right: 1rem;
    transition-property: opacity, transform;
    opacity: 0;
    transform: translateX(-0.5rem)
}

.p-team .person .toggle:hover .pointer,
.p-team .person.active .pointer,
.dialog .button:hover .pointer,
.header .btn-menu:hover .pointer,
.header .link:hover .pointer {
    opacity: 1;
    transform: none
}

body {
    background-color: #fff
}

.header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 10;
    color: #fff;
    padding-top: 2rem;
    padding-bottom: 2rem;
    mix-blend-mode: difference
}

.header .content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header :is(.btn-menu, .link) {
    font-size: 1.25rem;
    line-height: 1.5rem
}

.header .menu {
    display: flex;
    align-items: center;
}

.header .menu .item {
    margin: .625rem 0;
    padding-left: 1rem;
    display: inline-block;
    margin-left: 1rem
}

@media(min-width: 768px) {
    .header .menu {
        display: flex;
    }
    
    .header .content {
        justify-content: space-between;
    }
}

.header .btn-menu {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    letter-spacing: .05em;
    background: transparent;
    color: #fff;
    z-index: 100;
    display: none;
    padding: 0.5rem;
    border: none;
    outline: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

.header .btn-menu .icon-menu,
.header .btn-menu .icon-close {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .btn-menu .icon-menu,
.header .btn-menu .icon-close {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .btn-menu .icon-close {
    display: none;
}

.header .link {
    position: relative
}

.header .pointer {
    margin-right: .5rem
}

/* 移除这些样式，因为我们现在通过JavaScript控制图标的显示和隐藏 */

@media(min-width: 768px) {
    .header .menu {
        display: flex;
    }
    
    .header .content {
        justify-content: space-between;
    }
    
    .header .btn-menu {
        display: none !important;
    }
    
    .opened-menu .header .btn-menu {
        display: none !important;
    }
    
    .icon-menu {
        display: none !important;
    }
    
    .header .icon-menu {
        display: none !important;
    }
}

@media(max-width: 767px) {
    .header {
        padding-top: 1rem;
        padding-bottom: 1rem
    }

    .header .logo {
        width: 6.25rem;
        height: 2.5rem
    }

    .header :is(.btn-menu, .link) {
        font-size: .875rem;
        line-height: 1.5rem
    }
    
    .header .menu {
        display: none
    }
    
    .header .btn-menu {
        display: flex;
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        margin-left: auto;
        letter-spacing: .05em;
        z-index: 200
    }
    
    .header .content {
        position: relative;
        z-index: 15
    }
    
    .icon-menu {
        display: block !important;
    }
    
    .header .icon-menu {
        display: block !important;
    }
}

.header2 {
    position: relative;
    padding-top: 14rem;
    padding-bottom: 8rem;
    z-index: 1
}

.header2 .content {
    width: 70%
}

.header2 .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1
}

.header2 .heading {
    font-size: 6.875rem;
    line-height: 1;
    font-weight: 500
}

.header2 .richtext {
    margin-top: 2rem;
    font-weight: 300;
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: .01em
}

:is(.p-portfolio-details, .p-news-details) .header2 .richtext {
    position: relative;
    padding-left: 1.25rem;
    font-size: 1.75rem
}

:is(.p-portfolio-details, .p-news-details) .header2 .richtext::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    margin-top: .5rem;
    margin-bottom: .5rem;
    background-color: currentColor
}

@media(max-width: 767px) {
    .header2 {
        padding-top: 8rem;
        padding-bottom: 4rem
    }

    .header2 .content {
        width: 100%
    }

    .header2 .heading {
        font-size: 3rem;
        line-height: 3rem
    }

    .header2 .richtext {
        font-size: 1.25rem;
        line-height: 1.75rem;
        margin-top: 1rem
    }

    :is(.p-portfolio-details, .p-news-details) .header2 .richtext {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.richtext {
    --heading-margin-top: 5rem;
    --image-margin: 4rem;
    font-size: var(--font-size);
    line-height: var(--line-height)
}

.richtext img {
    height: auto;
    margin: auto
}

.richtext iframe {
    display: block;
    margin: auto;
    width: 100%;
    height: auto
}

.richtext img:not(:first-child),
.richtext :not(:first-child) img {
    margin-top: var(--image-margin)
}

.richtext img:not(:last-child),
.richtext :not(:last-child) img {
    margin-bottom: var(--image-margin)
}

.richtext a {
    text-decoration: underline
}

.richtext a:hover {
    text-decoration-thickness: 2px
}

.richtext h1 {
    font-size: 2em
}

.richtext h2 {
    font-size: 1.5em
}

.richtext h3 {
    font-size: 1.25em
}

.richtext h4 {
    font-size: 1em
}

.richtext :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 500
}

.richtext :is(h1, h2, h3) {
    line-height: 1.25;
    font-weight: 500
}

.richtext :is(h1, h2, h3):not(:first-child) {
    margin-top: var(--heading-margin-top)
}

.richtext :is(h1, h2, h3):not(:last-child) {
    margin-bottom: var(--heading-margin-bottom)
}

.richtext b,
.richtext strong {
    font-weight: 600
}

.richtext :is(ul, ol) {
    padding-left: 2em
}

.richtext ul {
    list-style: disc
}

.richtext ol {
    list-style: decimal
}

.richtext u {
    text-decoration: underline
}

.richtext iframe {
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cstyle%3E@keyframes rotate%7B0%25%7Btransform:rotate(0deg)%7Dto%7Btransform:rotate(360deg)%7D%7D@keyframes fillunfill%7B0%25%7Bstroke-dashoffset:32.3%7D50%25%7Bstroke-dashoffset:0%7Dto%7Bstroke-dashoffset:-31.9%7D%7D@keyframes rot%7B0%25%7Btransform:rotate(0deg)%7Dto%7Btransform:rotate(-360deg)%7D%7D@keyframes colors%7B0%25,to%7Bstroke:%23000000%7D%7D%3C/style%3E%3Cg style='animation-duration:1568.63ms;animation-iteration-count:infinite;animation-name:rotate;animation-timing-function:linear;transform-origin:50%25 50%25;width:16px;height:16px'%3E%3Cpath fill='none' d='M8 1.125A6.875 6.875 0 1 1 1.125 8' stroke-width='1' stroke-linecap='round' style='animation-duration:1333ms,5332ms,5332ms;animation-fill-mode:forwards;animation-iteration-count:infinite,infinite,infinite;animation-name:fillunfill,rot,colors;animation-play-state:running,running,running;animation-timing-function:cubic-bezier(.4,0,.2,1),steps(4),linear;transform-origin:50%25 50%25' stroke-dasharray='32.4' stroke-dashoffset='32.4'/%3E%3C/g%3E%3C/svg%3E")
}

.footer {
    display: flex;
    align-items: center;
    gap: 6rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    margin-top: 12rem
}

.footer .logo {
    margin-right: auto
}

.footer .item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem
}

.footer a:hover {
    text-decoration: underline
}

.footer .follow {
    display: flex;
    flex-wrap: wrap;
    padding-top: .75rem
}

.footer .media {
    display: flex;
    flex-wrap: wrap
}

.footer .social {
    margin-left: 1rem
}

.footer .social svg {
    width: 1.25rem;
    height: 1.25rem
}

.footer .media {
    display: flex
}

.footer .langtop {
    display: flex;
    gap: .5rem
}

.footer :is(.lang, .top) {
    border-radius: 9999px;
    flex-grow: 1;
    padding: 4px 16px;
    text-align: center
}

.footer .top:hover {
    text-decoration: underline
}

:is(.p-home, .p-team, .p-portfolio, .p-news-list, .p-contact) .footer :is(.lang, .top) {
    background-color: #1e1e1e
}

@media(max-width: 767px) {
    .footer {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 3rem;
        padding-bottom: 3rem;
        gap: 2rem;
        margin-top: 4rem
    }

    .footer .title {
        width: 100%
    }

    .footer .icp {
        display: flex;
        flex-wrap: wrap
    }

    .footer .social {
        margin-left: 0;
        margin-right: 1rem;
        margin-top: .5rem
    }

    .footer .follow {
        margin-bottom: 2rem
    }

    .footer .logo {
        margin-bottom: 1.25rem
    }

    :is(.p-home, .p-team, .p-portfolio, .p-news-list, .p-contact) .footer .copy {
        color: rgba(255, 255, 255, .4)
    }
}

.logo {
    width: 10rem;
    height: 3.25rem;
    background-size: contain;
    background-image: url(../image/logo-black.png);
    background-repeat: no-repeat;
    background-position: center
}

:is(.header, .p-portfolio, .p-news-list, .p-contact) .logo {
    background-image: url(../image/logo-white.png)
}

:is(.p-team, .p-home) .footer {
    border-color: rgba(255, 255, 255, .32);
    border-top-width: 1px
}

:is(.p-team, .p-home) .footer .logo {
    background-image: url(../image/logo-white.png)
}

.news-list {
    --row-gap: 8rem;
    --column-gap: 0.75rem;
    --columns: 3
}

.news-list .news {
    position: relative;
    display: flex;
    flex-direction: column
}

.news-list .image-wrapper {
    position: relative;
    overflow: hidden
}

.news-list .image {
    display: block;
    width: 100%;
    aspect-ratio: 580/406;
    object-fit: cover
}

.news-list .subtitle {
    font-weight: 500;
    color: rgba(255, 255, 255, .8);
    margin-top: .5rem
}

.news-list .underline {
    --size: 2px
}

.news-list .title {
    font-weight: 500;
    margin-top: .75rem;
    font-size: 1.5rem;
    line-height: 2rem
}

.news-list .desc {
    font-size: 1.125rem;
    line-height: 1.5rem;
    margin-top: 1.5rem
}

.news-list a::before {
    content: "";
    position: absolute;
    inset: 0
}

@media(max-width: 767px) {
    .news-list {
        --columns: 1;
        --row-gap: 4rem
    }

    .news .icon-play {
        width: 3rem;
        height: 3rem
    }

    .news .icon-play svg {
        width: 1rem;
        height: 1rem
    }

    .news .title {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .news :is(.subtitle, .desc) {
        font-size: .875rem;
        line-height: 1.5rem
    }

    .news .desc {
        margin-top: .5rem
    }
}

.article-pagination {
    padding-top: .75rem;
    padding-bottom: .75rem;
    display: flex;
    justify-content: space-between;
    border-top-width: 1px;
    border-color: rgba(112, 112, 112, .1);
    font-size: 1.25rem
}

.article-pagination .prev::before {
    content: "<"
}

.article-pagination .next::after {
    content: ">"
}

.article-pagination svg {
    display: inline-block;
    width: .875rem;
    height: .875rem
}

.article-pagination a:hover span {
    text-decoration: underline
}

.article-pagination .svg {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle
}

@media(max-width: 767px) {
    .article-pagination {
        font-size: 1rem
    }
}

:root {
    --f-carousel-dots-width: 16px;
    --f-carousel-dots-height: 24px
}

.f-carousel-gallery {
    --total: 12;
    --column-gap: 40px;
    --f-carousel-spacing: var(--column-gap)
}

.f-carousel-white-dots .f-carousel__dots {
    color: #fff
}

@media(max-width: 767px) {
    .f-carousel-gallery {
        --column-gap: 16px
    }
}

.arrow-btn {
    --opacity: 1;
    --color: 255, 255, 255;
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    border-width: 1px;
    color: rgba(var(--color), var(--opacity));
    border-color: currentColor;
    border-radius: 9999px;
    transition-duration: .25s;
    transition-property: background-color, color, border-color
}

.arrow-btn svg {
    position: absolute;
    inset: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: auto
}

.arrow-btn:disabled {
    --opacity: 0.4;
    cursor: not-allowed
}

.arrow-btn:not(:disabled):hover {
    background-color: #fff;
    border-color: #fff;
    color: #000
}

.arrow-btn.prev svg {
    transform: rotate(-180deg)
}

@media(max-width: 1279px) {
    .arrow-btn {
        width: 2.5rem;
        height: 2.5rem
    }

    .arrow-btn svg {
        width: 1rem;
        height: 1rem
    }
}

.menu-mobile {
    position: fixed;
    inset: 0;
    padding: 3rem;
    padding-left: 5rem;
    padding-top: 5rem;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem
}

.menu-mobile .item {
    opacity: 0
}

.menu-mobile .item:nth-child(1) {
    animation: slide-in .5s 50ms forwards
}

.menu-mobile .item:nth-child(2) {
    animation: slide-in .5s 100ms forwards
}

.menu-mobile .item:nth-child(3) {
    animation: slide-in .5s 150ms forwards
}

.menu-mobile .item:nth-child(4) {
    animation: slide-in .5s 200ms forwards
}

.menu-mobile .item:nth-child(5) {
    animation: slide-in .5s 250ms forwards
}

.menu-mobile .item:nth-child(6) {
    animation: slide-in .5s 300ms forwards
}

.menu-mobile .item:nth-child(7) {
    animation: slide-in .5s 350ms forwards
}

.menu-mobile .item:nth-child(8) {
    animation: slide-in .5s 400ms forwards
}

.menu-mobile .item:nth-child(9) {
    animation: slide-in .5s 450ms forwards
}

.menu-mobile .link {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 500
}

.dialog {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 11;
    display: flex;
    flex-direction: column;
    justify-content: center;
    display: none
}

.dialog .wrapper {
    max-height: 100%;
    overflow: auto;
    padding: 2rem
}

.dialog .content {
    max-width: 60rem;
    background-color: #000;
    color: #fff;
    margin: auto;
    padding: 4rem 8rem
}

.dialog .richtext {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 300
}

.dialog .bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 3.125rem
}

.dialog .button {
    border-radius: 9999px;
    border-width: 1px;
    border-color: currentColor;
    font-size: 1.25rem;
    font-weight: 300;
    padding: .5rem 1.5rem;
    text-align: center;
    min-width: 14rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.dialog .button .pointer {
    position: static;
    margin-top: 0;
    margin-right: .5rem;
    margin-left: -1.5rem
}

.dialog-enter-active,
.dialog-leave-active,
.dialog-enter-active .content,
.dialog-leave-active .content {
    transition-duration: .35s
}

.dialog-enter-from,
.dialog-leave-to {
    background-color: rgba(0, 0, 0, 0)
}

.dialog-enter-from .content,
.dialog-leave-to .content {
    transform: scale(0.98);
    opacity: 0
}

@media(max-width: 767px) {
    .dialog .content {
        padding: 2rem
    }

    .dialog .richtext {
        font-size: 1.25rem;
        line-height: 2rem
    }

    .dialog .button {
        font-size: 1rem
    }

    .dialog .bottom {
        flex-direction: column;
        margin-top: 2rem;
        gap: .5rem
    }
}

.icon-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    background-color: #fff;
    color: #000;
    z-index: 1;
    transition-property: box-shadow;
    transition-duration: .25s
}

.icon-play svg {
    fill: currentColor;
    stroke-linecap: initial;
    stroke-linejoin: initial;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    inset: 0;
    margin: auto
}

.icon-play:hover {
    box-shadow: inset 0px 0px 0px 2px #000
}

.p-team ._banner {
    object-fit: cover;
    width: 100%;
    min-height: 16rem
}

.p-team .team {
    overflow: hidden
}

.p-team .team .group {
    display: flex;
    margin-top: 9rem;
    margin-bottom: 9rem
}

.p-team .team .group:last-child .person:last-child::before {
    display: none
}

.p-team .team .side {
    width: 22.25rem;
    padding-right: 2rem
}

.p-team .team .title2 {
    font-size: 1.5rem;
    margin-top: .5rem
}

.p-team .team .main {
    flex: 1 1 0%
}

.p-team .person {
    --padding-y: 2.5rem;
    --linear-gradient-end: 66.666667%;
    position: relative;
    padding-right: 6rem
}

.p-team .person::before {
    content: "";
    position: absolute;
    height: 1px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) var(--linear-gradient-end));
    inset: auto 0 0
}

.p-team .person:first-child {
    margin-top: calc(var(--padding-y)*-1)
}

.p-team .person .info {
    --size: 8;
    padding-top: var(--padding-y);
    padding-bottom: var(--padding-y)
}

.p-team .person .toggle {
    display: block;
    width: 100%;
    text-align: left
}

.p-team .person .name {
    position: relative;
    font-size: 3.75rem;
    line-height: 4.375rem
}

.p-team .person .toggle:hover .name,
.p-team .person.active .name {
    text-decoration: underline
}

.p-team .person .title {
    font-size: 1.25rem;
    margin-top: 1rem;
    font-weight: 300
}

.p-team .person .content {
    padding-top: 2.25rem;
    width: 66.666667%
}

.p-team .person .richtext {
    font-size: 1.25rem;
    line-height: 2.25rem;
    font-weight: 300;
    overflow: hidden;
    height: 6.75rem
}

.p-team .person .richtext p:not(:first-child) {
    margin-top: 1em
}

.p-team .person .richtext:not(.active) {
    --line-clamp: 3
}

.p-team .person .collapse {
    display: none
}

.p-team .person .social-bottom {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
    gap: 1rem;
    align-items: center
}

.p-team .person :is(.expand, .social-link) {
    border-radius: 9999px;
    border-width: 1px;
    border-color: currentColor
}

.p-team .person .social-link {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    padding: .25rem 2rem
}

.p-team .person .social-link svg {
    width: 1rem;
    height: 1rem;
    margin-right: .5rem;
    margin-left: -0.5rem
}

.p-team .person .expand {
    position: relative;
    height: 2.5rem;
    width: 3.5rem
}

.p-team .person .expand svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: .75rem;
    height: .75rem
}

.p-team .person .expand.active svg {
    transform: rotate(180deg)
}

.p-team .person .image-wrapper {
    --size: 4;
    display: none
}

.p-team .person .image2 {
    display: none;
    width: 100%;
    margin-bottom: 2rem
}

.p-team .footer {
    margin-top: 0
}

:lang(en) .p-team .person .content {
    width: 75%
}

@media(max-width: 767px) {
    .p-team .team .group {
        flex-direction: column;
        margin: 5rem 0
    }

    .p-team .team .side {
        width: auto
    }

    .p-team .team .title2 {
        margin-top: 0;
        margin-bottom: 1.25rem
    }

    .p-team .person {
        --padding-y: 2rem;
        --linear-gradient-end: 100%;
        padding-right: 0
    }

    .p-team .person .info {
        --size: 12
    }

    .p-team .person .name {
        font-size: 2rem;
        line-height: 2.25rem
    }

    .p-team .person .title {
        font-size: 1rem;
        margin-top: .5rem
    }

    .p-team .person .image {
        display: none
    }

    .p-team .person .content {
        width: auto;
        padding-top: 2rem
    }

    .p-team .person .richtext {
        font-size: 1rem;
        line-height: 1.5rem;
        height: 4.5rem
    }

    .p-team .person .social-link {
        font-size: .875rem;
        line-height: 1.5rem;
        padding: .25rem 1.5rem
    }

    .p-team .person .expand {
        width: 3rem;
        height: 2rem
    }

    .p-team .person .image2 {
        display: block
    }
}

.p-portfolio .project {
    position: relative;
    display: flex;
    align-items: center;
    border-top-width: 1px;
    border-color: rgba(255, 255, 255, .2);
    transition-property: border-color
}

.p-portfolio .project:hover,
.p-portfolio .project:hover+.project {
    border-color: rgba(255, 255, 255, 0)
}

.p-portfolio .project:last-child {
    border-bottom-width: 1px
}

.p-portfolio .project .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0;
    transition-property: opacity
}

.p-portfolio .project:hover .bg {
    opacity: 1
}

.p-portfolio .project .image-wrapper {
    --size: 4
}

.p-portfolio .project .image {
    filter: grayscale(1);
    transition-property: filter;
    margin: auto;
    height: 5rem;
    max-width: 100%;
    object-fit: contain
}

.p-portfolio .project:hover .image {
    filter: none
}

.p-portfolio .project .info {
    --size: 8;
    max-width: 56.25rem;
    padding: 8.75rem 4rem
}

.p-portfolio .project .title {
    position: relative;
    font-size: 3.125rem
}

.p-portfolio .project .arrow {
    width: 1rem;
    height: 1rem;
    top: 50%;
    margin-top: -0.5rem;
    position: absolute;
    opacity: 0;
    transform: translateX(-100%);
    transition-property: opacity, transform
}

.p-portfolio .project:hover .arrow {
    transform: initial;
    opacity: initial
}

.p-portfolio .project .arrow~.text {
    display: inline-block;
    transition-property: transform
}

.p-portfolio .project:hover .arrow~.text {
    transform: translateX(1.5rem);
    transition-property: transform;
    text-decoration: underline
}

.p-portfolio .project .content {
    font-size: 1.125rem;
    margin-top: 2rem
}

@media(max-width: 767px) {
    .p-portfolio .project .image-wrapper {
        --size: 12;
        padding: 4rem 2rem
    }

    .p-portfolio .project .info {
        --size: 12;
        padding: 0 2rem 4rem
    }

    .p-portfolio .project .title {
        font-size: 1.5rem
    }

    .p-portfolio .project .content {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-top: 1rem
    }
}

.p-portfolio-details .header2 .bottom {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-top: 5rem;
    font-weight: 500
}

.p-portfolio-details .header2 svg {
    display: inline-block;
    vertical-align: middle;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .5rem
}

.p-portfolio-details .header2 a {
    text-decoration: underline
}

.p-portfolio-details .page {
    --column-gap: 2rem;
    --row-gap: 4rem;
    padding-top: 5rem
}

.p-portfolio-details .page .richtext {
    font-size: 1.5rem;
    line-height: 2.25rem
}

.p-portfolio-details .main {
    --size: 8
}

.p-portfolio-details .side {
    --size: 4;
    padding-left: 8rem
}

.p-portfolio-details .side img {
    margin-left: auto
}

.p-portfolio-details .article-pagination {
    margin-top: 11rem
}

@media(max-width: 767px) {
    .p-portfolio-details .header2 .bottom {
        font-size: 1rem;
        margin-top: 2.5rem
    }

    .p-portfolio-details .page {
        flex-wrap: wrap-reverse
    }

    .p-portfolio-details .main {
        --size: 12
    }

    .p-portfolio-details .main .richtext {
        --heading-margin-top: 4rem;
        font-size: 1rem;
        line-height: 1.5rem
    }

    .p-portfolio-details .side {
        --size: 12
    }

    .p-portfolio-details .side img {
        margin-left: 0
    }

    .p-portfolio-details .article-pagination {
        margin-top: 4rem
    }
}

.p-news-list .category {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem
}

.p-news-list .category a {
    border-radius: 9999px;
    padding: .625rem 1.25rem;
    border-width: 1px;
    transition-duration: .25s;
    transition-property: color, background-color
}

.p-news-list .category a:not(:hover, .active) {
    background-color: #fff;
    color: #000
}



@media(max-width: 767px) {
    .p-news-list .category {
        gap: .5rem
    }

    .p-news-list .category a {
        font-size: 1rem;
        line-height: 1.5rem;
        padding: .125rem 1rem
    }
}

.p-news-details .header2 .heading {
    font-size: 3.75rem;
    line-height: 4.375rem
}

.p-news-details .header2 .subtitle {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center
}

.p-news-details .header2 .share {
    margin-left: 4rem
}

.p-news-details .header2 :is(.facebook, .twitter) {
    margin-left: .75rem
}

.p-news-details .header2 svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem
}

.p-news-details .main {
    width: 70%
}

.p-news-details .main .richtext {
    font-size: 1.5rem;
    line-height: 2.25rem;
    margin-top: 6rem;
    margin-bottom: 6rem
}

.p-news-details .main .richtext :is(h1, h2, h3, h4) {
    font-weight: 600
}

.p-news-details .original {
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    text-decoration: underline
}

.p-news-details .original svg {
    width: 1.5rem;
    height: 1.5rem
}

.p-news-details .article-pagination {
    margin-top: .5rem
}
.p-news-details .iframe-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.p-news-details .iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 10px; /* 添加圆角，可以根据需要调整数值 */
}

.p-news-details .iframe-wrapper .poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    background-color: #fff;
}

.p-news-details .iframe-wrapper.played :is(.poster, .icon-play) {
    display: none;
}

@media(min-width: 768px) {
    .p-news-details .header2 .richtext {
        margin-top: 4rem
    }
}

@media(max-width: 767px) {
    .p-news-details .header2 .heading {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .p-news-details .header2 .subtitle {
        font-size: 1rem
    }

    .p-news-details .header2 .share {
        margin-left: 1.25rem
    }

    .p-news-details .main {
        width: 100%
    }

    .p-news-details .main .richtext {
        font-size: 1rem;
        line-height: 1.5rem;
        margin: 3rem 0
    }

    .p-news-details .original {
        font-size: 1rem
    }
}

.p-career .heading2 {
    font-size: 6.875rem;
    line-height: 6.25rem;
    font-weight: 500;
    margin: 6rem 0
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(var(--marquee-width, 100%) * -1))
    }
}

.p-career .marquee {
    display: flex;
    overflow: hidden;
    margin-top: 12rem
}

.p-career .marquee .list {
    display: flex;
    min-width: 100%;
    flex-shrink: 0;
    animation: marquee-scroll var(--marquee-duration, 20s) linear infinite
}

.p-career .marquee .list.container {
    padding-right: 0
}

.p-career .marquee .list.container~.list.container {
    padding-left: 0
}

.p-career .marquee .image {
    width: 40rem;
    aspect-ratio: 640/384;
    object-fit: cover;
    margin-right: 2.5rem
}

.p-career .list .item {
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-color: rgba(0, 0, 0, .1);
    border-top-width: 1px
}

.p-career .list .item:last-child {
    border-bottom-width: 1px
}

.p-career .list .action {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    font-size: 2rem;
    font-weight: 500
}

.p-career .list .title {
    flex: 1 1 0%;
    margin-right: 1rem
}

.p-career .list .action:hover .title,
.p-career .list .item.active .title {
    text-decoration: underline
}

.p-career .list .collapse {
    display: none
}

.p-career .list .richtext {
    width: 68%;
    font-size: 1.25rem;
    line-height: 2rem;
    padding-top: 6rem;
    padding-bottom: 3rem
}

.p-career .list .arrow {
    position: relative;
    border-radius: 9999px;
    width: 3.5rem;
    height: 2.5rem;
    border-width: 1px;
    border-color: #cbcbcb
}

.p-career .list .arrow svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem
}

.p-career .list .item.active .arrow {
    transform: rotate(180deg)
}

.p-career .mailto {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: .75rem 1rem;
    line-height: 1.5rem;
    max-width: 56rem;
    margin-top: 6rem
}

.p-career .mailto .icon {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-color: #fff;
    color: #000;
    margin-right: 1rem
}

.p-career .mailto svg {
    position: absolute;
    inset: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: auto
}

.p-career .mailto .content {
    flex: 1 1 0%
}

@media(max-width: 767px) {
    .p-career .heading2 {
        font-size: 2.25rem;
        line-height: 3rem;
        margin: 3rem 0
    }

    .p-career .marquee {
        margin-top: 4rem
    }

    .p-career .marquee .list {
        animation-duration: 16s
    }

    .p-career .marquee .image {
        width: 20rem
    }

    .p-career .list .item {
        padding-top: 2rem;
        padding-bottom: 2rem
    }

    .p-career .list .richtext {
        --heading-margin-top: 2rem;
        width: 100%;
        font-size: 1rem;
        line-height: 1.5rem;
        padding-top: 2rem;
        padding-bottom: 2rem
    }

    .p-career .list .title {
        font-size: 1.25rem;
        line-height: 1.5rem
    }

    .p-career .list .arrow {
        width: 2.25rem;
        height: 1.5rem
    }

    .p-career .list .arrow svg {
        width: .5rem;
        height: .5rem
    }

    .p-career .list .action {
        font-size: 1.5rem
    }

    .p-career .mailto {
        margin-top: 2rem;
        font-size: .875rem;
        line-height: 1.25rem
    }
}

.p-contact .contact {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6rem;
    gap: 2rem
}

.p-contact .contact .item {
    flex: 1 1 0%
}

.p-contact .contact .title {
    font-size: 2rem;
    font-weight: 500
}

.p-contact .contact .content {
    font-size: 1.5rem;
    margin-top: .5rem
}

.p-contact .contact .follow .content {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem
}

.p-contact .contact svg {
    width: 1.5rem;
    height: 1.5rem
}

.p-contact .form {
    padding-top: 5rem;
    padding-bottom: 8rem;
    font-size: 1.5rem
}

.p-contact .form .heading {
    font-size: 2.5rem;
    font-weight: 500
}

.p-contact .form form {
    margin-top: 4.5rem;
    display: flex;
    flex-direction: column
}

.p-contact .form .textbox-area {
    --columns: 4;
    --column-gap: 2rem;
    --row-gap: 1rem
}

.p-contact .form .field-title {
    margin-top: 6rem;
    margin-bottom: 1.5rem
}

.p-contact .form .checkbox-area {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 4rem
}

.p-contact .form .textarea {
    margin-top: 6rem
}

.p-contact .form .submit {
    margin: 5rem auto 0px;
    display: flex;
    border-radius: 9999px;
    border-width: 2px;
    border-color: #fff;
    align-items: center;
    padding: .125rem 1rem .125rem 1.5rem;
    transition-property: color, background-color
}

.p-contact .form .submit svg {
    width: 1rem;
    height: 1rem;
    margin-left: .5rem
}

.p-contact .form .submit:hover {
    background-color: #fff;
    color: #000
}

.p-contact .form .submit:disabled {
    opacity: .5;
    cursor: not-allowed
}

.p-contact .form .feedback {
    border-width: 1px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    padding: .75rem 1rem
}

.p-contact .form .feedback .close {
    margin-left: auto
}

.p-contact .form .feedback.success {
    background-color: #009000
}

.p-contact .form .feedback.error {
    background-color: #dd2020
}

.p-contact .textbox-input,
.p-contact .textarea {
    display: block;
    width: 100%;
    border-bottom-width: 1px;
    border-color: inherit
}

.p-contact .textbox-input::placeholder,
.p-contact .textarea::placeholder {
    color: inherit
}

.p-contact .textbox-input {
    padding: .5rem 0
}

.p-contact .textarea {
    min-height: 6.75rem;
    box-sizing: content-box
}

.p-contact .checkbox-wrapper {
    display: flex;
    align-items: center
}

.p-contact .checkbox-wrapper input {
    display: none
}

.p-contact .checkbox-wrapper .icon-check {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    border-width: 1px;
    margin-right: .5rem
}

.p-contact .checkbox-wrapper svg {
    position: absolute;
    width: 1rem;
    height: 1rem;
    inset: 0;
    margin: auto;
    display: none
}

.p-contact .checkbox-wrapper input:checked~.icon-check svg {
    display: block
}

.p-contact .form-error {
    margin-top: .5rem;
    color: #ff4040
}

.p-contact .moon {
    width: 100%;
    background-color: #000;
    min-height: 16rem;
    object-fit: cover
}

.p-contact .footer {
    margin-top: 0
}

@media(max-width: 767px) {
    .p-contact .contact {
        flex-direction: column;
        margin-top: 2rem
    }

    .p-contact .contact .title {
        font-size: 1.25rem
    }

    .p-contact .contact .content {
        font-size: 1rem
    }

    .p-contact .form {
        padding-top: 4rem;
        padding-bottom: 4rem;
        font-size: 1rem
    }

    .p-contact .form .field-title {
        font-size: 1.25rem;
        margin-top: 2rem
    }

    .p-contact .form .submit {
        font-size: 1.25rem;
        margin-top: 4rem
    }

    .p-contact .form .textarea {
        margin-top: 2rem
    }

    .p-contact .form form {
        margin-top: 2rem
    }

    .p-contact .form .textbox-area {
        --columns: 1
    }
}

.p-home .header {
    mix-blend-mode: initial
}

.scroll-start .p-home .header {
    mix-blend-mode: difference
}

.p-home .richtext {
    font-weight: 300;
    letter-spacing: .01em
}

.p-home .hero {
    position: relative;
    height: 100vh
}

.p-home .hero picture {
    height: 100%
}

.p-home .hero .media {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.p-home .hero .overlay {
    position: absolute;
    inset: auto 0 0;
    color: #eee;
    padding: 3.125rem 4.375rem 9rem
}

.p-home .hero>picture {
    filter: brightness(0.8) contrast(1.1)
}

.p-home .hero .heading {
    font-size: 6.875rem;
    line-height: .9;
    font-weight: 500
}

.p-home .hero .content {
    max-width: 60rem
}

.p-home .f-carousel-hero {
    --f-transition-duration: 0.5s;
    --f-transition-easing: cubic-bizier(0.4, 0, 0.2, 1);
    margin-bottom: 0;
    background-color: #000
}

.p-home .f-carousel-hero .f-carousel__dots {
    position: absolute;
    bottom: 4.375rem;
    right: 4.375rem;
    left: auto
}

.p-home .carousel {
    position: relative;
    height: 50vw;
    color: #fff;
    background-color: #000
}

.p-home .carousel .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    background-color: #000;
    transition-duration: .5s
}

.p-home .carousel .slide.active {
    opacity: 1;
    visibility: visible
}

.p-home .carousel picture {
    height: 100%
}

.p-home .carousel .image {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.p-home .carousel .overlay {
    position: absolute;
    inset: 0;
    padding: 11.25rem 4.375rem
}

.p-home .carousel .richtext {
    font-size: 2.5rem;
    width: 50vw
}

.p-home .carousel .marquee {
    position: absolute;
    bottom: 11.25rem;
    left: 0;
    right: 2rem;
    display: flex;
    overflow: hidden
}

.p-home .carousel .track {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-weight: 500
}

.p-home .carousel .slash {
    font-size: 4.375rem;
    margin: auto;
    padding: 0 3.125rem
}

.p-home .carousel .action {
    position: relative;
    font-size: 7rem;
    line-height: 8rem;
    padding-left: 4.375rem;
    padding-right: 5.625rem
}

.p-home .carousel .action::after {
    content: "/";
    font-size: 4.375rem;
    line-height: 6.75rem;
    position: absolute;
    right: 0
}

.p-home .carousel :is(.slash, .action) {
    --opacity: 0.5;
    color: rgba(255, 255, 255, var(--opacity))
}

.p-home .carousel :is(.slash, .action).active {
    --opacity: 1
}

.p-home .f-carousel3 {
    --f-transition-duration: 0.5s;
    --f-transition-easing: cubic-bizier(0.4, 0, 0.2, 1);
    position: relative;
    height: 50vw;
    color: #fff;
    margin-bottom: 0
}

.p-home .f-carousel3 .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.p-home .f-carousel3 .f-carousel__dots {
    position: absolute;
    bottom: 3.125rem;
    left: auto;
    right: 5rem
}

.p-home .f-carousel3 .bottom {
    position: absolute;
    bottom: 3.125rem;
    left: 5rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 3.125rem;
    gap: .75rem
}

.p-home .f-carousel3 .slide {
    position: relative;
    height: 100%
}

.p-home .f-carousel3 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    padding: 6.25rem 5rem;
    color: #fff;
    width: 66.666667%
}

.p-home .f-carousel3 .heading {
    font-size: 6.875rem;
    line-height: 1;
    font-weight: 500
}

.p-home .f-carousel3 .richtext {
    font-size: 1.875rem;
    line-height: 2.5rem;
    margin-top: 2rem
}

.p-home .f-carousel-industry {
    --columns: 4;
    --column-gap: 1rem
}

.p-home .f-carousel-industry .container {
    margin: 6.25rem auto
}

.p-home .f-carousel-industry .rel {
    position: relative
}

.p-home .f-carousel-industry .header2 {
    padding-top: 0;
    padding-bottom: 0
}

.p-home .f-carousel-industry .aside {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem
}

.p-home .f-carousel-industry .arrow-btn {
    --color: 0, 0, 0
}

.p-home .f-carousel-industry .arrow-btn:not(:disabled):hover {
    background-color: #000;
    border-color: #000;
    color: #fff
}

.p-home .industry {
    position: relative;
    color: #fff;
    transition-property: filter;
    filter: grayscale(1)
}

.p-home .industry .image {
    width: 100%;
    aspect-ratio: 5/7;
    object-fit: cover
}

.p-home .industry .title {
    font-size: 1.5rem;
    letter-spacing: .05em;
    position: absolute;
    inset: 0;
    padding: .5rem 1.5rem
}

.p-home .industry:hover {
    filter: initial
}

.p-home .section-news {
    padding-top: 6rem;
    padding-bottom: 12rem
}

.p-home .section-news .heading {
    font-size: 6.875rem;
    line-height: .9;
    font-weight: 500;
    margin-bottom: 6rem
}

.p-home .section-news .list {
    position: relative
}

.p-home .section-news .link {
    --size: 7;
    display: flex;
    flex-wrap: wrap;
    font-weight: 500
}

.p-home .section-news .item:not(:first-child) .link {
    border-top-width: 1px;
    border-top-color: rgba(255, 255, 255, .2);
    padding-top: 2.5rem
}

.p-home .section-news .item:not(:last-child) .link {
    padding-bottom: 2.5rem
}

.p-home .section-news .image {
    --size: 3;
    position: absolute;
    right: 0;
    top: 0;
    transition-property: opacity;
    opacity: 0;
    height: 100%;
    object-fit: cover
}

.p-home .section-news .list:not(:hover) .item:first-child .image,
.p-home .section-news .item:hover .image {
    opacity: 1
}

.p-home .section-news .meta {
    width: 14rem
}

.p-home .section-news .content {
    flex: 1 1 0%
}

.p-home .section-news .title {
    position: relative;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .03em
}

.p-home .section-news .link:hover .title {
    text-decoration: underline
}

.p-home .section-news .pointer {
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    right: 100%;
    margin-top: -0.5rem;
    margin-right: 1.25rem;
    transition-property: opacity, transform;
    opacity: 0;
    transform: translateX(-0.5rem)
}

.p-home .section-news .link:hover .pointer {
    opacity: initial;
    transform: initial
}

.p-home .footer {
    margin-top: 0
}

:lang(zh) .p-home .carousel .marquee {
    right: 39.5rem
}

@media(max-width: 767px) {
    .p-home .hero .overlay {
        padding: 4rem 1.5rem
    }

    .p-home .hero .heading {
        font-size: 4rem;
        line-height: 4.5rem
    }

    .p-home .f-carousel-hero .f-carousel__dots {
        bottom: 1.5rem;
        left: 1.5rem;
        right: auto
    }

    .p-home .f-carousel3 .bottom {
        margin-top: 2rem
    }

    .p-home .f-carousel-industry .aside {
        position: static;
        margin-top: 2rem
    }

    .p-home .industry .title {
        font-size: 1rem
    }

    .p-home .section-news {
        padding-bottom: 6rem
    }

    .p-home .section-news .link {
        --size: 12
    }

    .p-home .section-news .heading {
        font-size: 4rem;
        line-height: 4.5rem;
        margin-bottom: 3rem
    }

    .p-home .section-news .link {
        flex-direction: column;
        padding: 2rem 0
    }

    .p-home .section-news .image {
        display: none
    }

    .p-home .section-news .title {
        font-size: 1.25rem;
        line-height: 1.5rem;
        margin-top: .5rem
    }

    .p-home .section-news .meta {
        font-size: .875rem;
        line-height: 1.5rem
    }
}

@media(max-width: 767px) {
    .p-home .hero .heading {
        font-size: 3rem;
        line-height: 3.75rem
    }

    .p-home .carousel {
        height: 37.5rem
    }

    .p-home .carousel .overlay {
        padding: 4rem 2rem
    }

    .p-home .carousel .richtext {
        width: 100%;
        font-size: 1.5rem;
        line-height: 1.75rem
    }

    .p-home .carousel .marquee {
        bottom: 4rem;
        right: 0
    }

    .p-home .carousel .action {
        font-size: 3.125rem;
        line-height: 1;
        padding-left: 2rem;
        padding-right: 2.5rem
    }

    .p-home .carousel .action::after {
        font-size: 1.75rem;
        line-height: 3.125rem
    }

    .p-home .f-carousel3 {
        height: 45rem
    }

    .p-home .f-carousel3 .f-carousel__dots {
        right: 1.5rem;
        bottom: 1.5rem
    }

    .p-home .f-carousel3 .overlay {
        width: 100%;
        padding: 2rem 1.5rem
    }

    .p-home .f-carousel3 .heading {
        font-size: 3rem;
        line-height: 3.75rem
    }

    .p-home .f-carousel3 .richtext {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .p-home .f-carousel3 .bottom {
        left: 1.5rem;
        bottom: 1.5rem
    }

    .p-home .f-carousel-industry {
        --columns: 1.2
    }

    .p-home .f-carousel-industry .container {
        margin: 4rem 0
    }

    .p-home .section-news {
        padding-top: 3rem
    }

    .p-home .section-news .heading {
        font-size: 3rem;
        line-height: 3rem;
        margin-bottom: 0
    }

    :lang(zh) .p-home .carousel .marquee {
        right: 0
    }

    :lang(zh) .p-home :is(.hero .heading, .f-carousel3 .heading) {
        padding-right: 6rem
    }
}