.btn-scroll-hint{
    position: absolute;
    right: 0;
    bottom: calc(80 * var(--rpx));
}

section{
    width: 100%;
    overflow: hidden;
    height: 100vh;
    min-height: 600px;
    color: #fff;
    background-color: #000;
}

body{
    background-color: #000;
}

.sec1{
    text-align: center;
    overflow: hidden;
    position: relative;
}

.sec1 video{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 190;
    transform-origin: center top;
}

.sec1::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 195;
    background: url("../images/vignette.webp") center/cover no-repeat;
}

.sec1 .wrapper{
    position: relative;
    z-index: 200;
    height: 100%;
    padding-bottom: calc(140 * var(--rpx));
    padding-top: var(--header-height-max);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.sec1 .logo-ai{
    width: calc(228em / 16);
    height: auto;
}

.sec1 .colored{
    font-size: calc(68 * var(--rpx));
    font-weight: bold;
    margin-top: calc(36 * var(--rpx));
}

.sec1 .desc{
    font-size: calc(24 * var(--rpx));
    line-height: 2em;
    margin-top: calc(32 * var(--rpx));
    width: calc(12.5vw + 720px); /* 960px @1920 → 840px @960 */

    word-break: keep-all;
    overflow-wrap: anywhere; /* 防止极端溢出 */
    line-break: strict;
}

.sec2-sec3-union{
    position: relative;
    overflow: hidden;
}

.sec2,.sec3{
    position: absolute;
    left: 0;
    top: 0;
}

.sec2{
    overflow: hidden;
    z-index: 180;
    background: transparent;
}

.sec3{
    z-index: 150;
}
.sec3.active{
    z-index: 200;
}

.sec2 .grad-back{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*background:
            radial-gradient(80vw 80vw at 75% 50%, #B4E6F4 50%, #53A5BC 60%, #326692 70%, #234773 80%, #122C5A 90%, #081C55 100%) #000;*/
    z-index: 185;
    overflow: hidden;
}

.sec2 .grad-back::after{
    content: "";
    position: absolute;
    width: 40%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 190;
    background: linear-gradient(to right, #000c, #0000);
}

.sec2 .grad-ring{
    width: calc(3182vw / 19.2);
    height: calc(3182vw / 19.2);
    top: calc((100vh - 3182vw / 19.2) / 2);
    left: calc(-149vw / 19.2);
    position: absolute;
    animation: spin 24s reverse linear infinite;
    z-index: 188;
    background: url("../images/ai_grad_ring.webp") center/cover no-repeat;
}

@keyframes spin {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.sec2 .circle-back{
    position: absolute;
    z-index: 190;
    left: 0;
    width: 100vw;
    height: 100vw;
    border-radius: 50%;
    top: calc((100vh - 100vw) / 2);
    box-shadow: inset 0 0 calc(45vw / 19.2) #BEF0FF7f, 0 0 calc(240vw / 19.2) #BEF0FF;
}

.sec2 .circle-inner{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../images/ai_sec2_back_inner.webp") center/contain no-repeat;
    animation: spin 60s reverse linear infinite;
}

.sec2 .left{
    position: absolute;
    left: calc(160vw / 19.2);
    top: 0;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(400vw / 19.2);
    z-index: 200;
}

.sec2 .line1{
    font-size: calc(48 * var(--rpx-50));
    width: calc(420 * var(--rpx-50));
    line-height: calc(58em / 48);
    font-weight: bold;
}

.sec2 .line2{
    margin-top: calc(40 * var(--rpx));
    font-size: calc(24 * var(--rpx));
    line-height: 2em;
}

.sec2 .right{
    width: calc(912 * var(--rpx));
    height: calc(577 * var(--rpx));
    position: absolute;
    right: 0;
    left: 35vw;
    margin: auto;
    top: var(--header-height-min);
    bottom: 0;
    z-index: 200;
}

.pin-spacer{
    max-width: 100%;
}

.sec2 .top-line,
.sec2 .bottom-line{
    font-size: calc(38 * var(--rpx));
    font-weight: bold;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

.sec2 .top-line{
    top: calc(-32vw / 19.2);
}

.sec2 .bottom-line{
    bottom: calc(-40vw / 19.2);
}

.sec2 .right .figure-lines{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 290;
    pointer-events: none;
}

.figure-boxes{
    position: absolute;
    left: 0;
    top: calc(179% / 5.77);
    width: 100%;
    height: calc(220% / 5.77);
    z-index: 240;

    --column: 4;
    --gap: calc(10% / 9.12);
}

.figure-boxes .flex-item{
    position: relative;
    border-radius: calc(32 * var(--rpx));
    background: radial-gradient(calc(220 * var(--rpx)) circle,
        #6AFFF4 0%,
        #CFFAFF 30%,
        #2751FF 54%,
        #E32A7A 80%,
        #E32A7A00 100%
    ) center/calc(440 * var(--rpx)) calc(440 * var(--rpx)) no-repeat #5C6CB4;

    transition: .3s background-color;
}

.figure-boxes .flex-item:hover{
    background-color: #4F5063;
}

.figure-boxes img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
    z-index: 260;
    opacity: 1;
    transition: .2s;
}

.figure-boxes .flex-item:hover img{
    opacity: 0;
}

.figure-boxes .flex-item .inner-fill{
    position: absolute;
    width: calc(100% - 4 * var(--rpx));
    height: calc(100% - 4 * var(--rpx));
    top: calc(2 * var(--rpx));
    left: calc(2 * var(--rpx));
    background-color: #000011dd;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    z-index: 250;
    border-radius: calc(30 * var(--rpx));
    box-shadow: inset 0 0 calc(30 * var(--rpx)) #2751FF;
    transition: .3s;
    overflow: hidden;
    mask-image: none;
    mask-size: calc(100% + 2 * var(--rpx)) auto;
    mask-position: center;
}

.figure-boxes .flex-item:nth-of-type(1):hover .inner-fill{
    mask-image: url("../images/ai_sec2_item1_mask.webp");
}

.figure-boxes .flex-item:nth-of-type(2):hover .inner-fill{
    mask-image: url("../images/ai_sec2_item2_mask.webp");
}

.figure-boxes .flex-item:nth-of-type(3):hover .inner-fill{
    mask-image: url("../images/ai_sec2_item3_mask.webp");
}

.figure-boxes .flex-item:nth-of-type(4):hover .inner-fill{
    mask-image: url("../images/ai_sec2_item4_mask.webp");
}

.figure-boxes .flex-item:hover .inner-fill{
    box-shadow: none;
}

.figure-boxes .flex-item .inner-fill::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to top, #2751FF80 0%, #2751FF00 65%);
    opacity: 0;
    transition: .3s;
}

.figure-boxes .flex-item:hover .inner-fill::after{
    opacity: 1;
}

.sec3{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(var(--header-height-min) + 60 * var(--rpx-50));
    position: relative;
}

.sec3 .section-title{
    font-size: calc(48 * var(--rpx-50));
}

.sec3 .desc{
    font-size: calc(28 * var(--rpx));
    font-weight: bold;
}

.sec3 .section-title,
.sec3 .desc{
    position: relative;
    z-index: 200;
}

.sec3 .vid-ctn,
.sec5 .vid-ctn{
    width: calc(800vw / 19.2);
    aspect-ratio: 1/1;
    position: absolute;
    top: calc(145vw / 19.2);
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 190;
}

.sec5 .vid-ctn{
    top: calc(240vw / 19.2);
    opacity: .5;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 200;
}

.sec3 .vid-ctn video,
.sec5 .vid-ctn video{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sec5 .ai-logo,
.sec3 .ai-logo{
    width: calc(240 * var(--rpx));
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.sec3 .point{
    position: absolute;
    width: 0;
    height: 0;
}

.sec3 .point-glass{
    position: absolute;
    width: calc(40 * var(--rpx));
    height: calc(40 * var(--rpx));
    left: calc(-20 * var(--rpx));
    top: calc(-20 * var(--rpx));
    border-radius: 50%;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    background: rgba(0, 0, 0, 0.3);
}

.sec3 .p1 .point-glass{
    box-shadow: 4px 0 0 -2px rgba(255, 255, 255, .15), 2px 0 0 rgba(255, 255, 255, .15);
}

.sec3 .p2 .point-glass{
    box-shadow: -4px 0 0 -2px rgba(255, 255, 255, .15), -2px 0 0 rgba(255, 255, 255, .15);
}

.sec3 .p3 .point-glass{
    box-shadow: 0 -4px 0 -2px rgba(255, 255, 255, .25), 0 -2px 0 rgba(255, 255, 255, .15);
}

.sec3 .point-center{
    position: absolute;
    z-index: 210;
    background-color: rgba(108, 145, 255, 1);
    width: calc(8 * var(--rpx));
    height: calc(8 * var(--rpx));
    border-radius: 50%;
    left: calc(-4 * var(--rpx));
    top: calc(-4 * var(--rpx));
}

.sec3 .line{
    position: absolute;
}

.sec3 .p1 .line{
    right: 0;
    bottom: 0;
    width: calc(216vw / 19.2);
    height: calc(67vw / 19.2);
    background: url("../images/ai_sec3_line1.svg") right bottom/cover no-repeat;
}

.sec3 .p2 .line{
    left: 0;
    bottom: 0;
    width: calc(216vw / 19.2);
    height: calc(67vw / 19.2);
    background: url("../images/ai_sec3_line2.svg") left bottom/cover no-repeat;
}

.sec3 .p3 .line{
    top: 0;
    left: 0;
    width: 1px;
    height: calc(67vw / 19.2);
    background: url("../images/ai_sec3_line3.svg") top/cover no-repeat;
}

.sec3 .btn-detail{
    height: calc(80 * var(--rpx));
    position: absolute;
    width: calc(370 * var(--rpx));
    border-radius: calc(40 * var(--rpx));
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(106, 255, 244, 1) 0%,
        rgba(207, 250, 255, 1) 12%,
        rgba(39, 81, 255, 1) 24%,
        rgba(227, 42, 122, 1) 36%,
        rgba(255, 255, 255, 0.3) 50%
    ) 100% 100%/200% 200%;
    cursor: pointer;
}
.sec3 .btn-detail:hover{
    animation: gradient_flash .4s ;
    background-position: -200% -200%;
}

@keyframes gradient_flash{
    0%{
        background-position: 100% 100%
    }
    70%{
        background-position: -100% -100%
    }
    100%{
        background-position: -200% -200%;
    }
}

.p1 .btn-detail{
    right: 100%;
    transform: translateY(-50%);
}

.p2 .btn-detail{
    left: 100%;
    transform: translateY(-50%);
}

.p3 .btn-detail{
    left: 0;
    top: 100%;
    transform: translateX(-50%);
}

.sec3 .btn-detail::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: inset 0 0 calc(30 * var(--rpx)) #2751FF;
    z-index: 240;
    opacity: 1;
    transition: .3s;
}

.sec3 .btn-detail:hover::before{
    opacity: 0;
}

.sec3 .btn-detail::after{
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: calc(40 * var(--rpx) - 2px);
    background: linear-gradient(to top, #2751FF66 0%, #2751FF00 30%) 100% 0/200% 200% #000;
    transition: .3s;
}

.sec3 .btn-detail:hover::after{
    background-position-y: 100%;
}

.btn-detail .text{
    position: relative;
    z-index: 260;
    height: 100%;
    padding-left: calc(30 * var(--rpx));
    display: flex;
    align-items: center;
    font-size: calc(24 * var(--rpx));
}

.btn-detail .colored{
    --bg-size: calc(120 * var(--rpx));
    font-weight: bold;
}

.btn-expand{
    position: absolute;
    z-index: 270;
    right: calc(10 * var(--rpx));
    top: 0;
    bottom: 0;
    margin: auto;
    width: calc(60 * var(--rpx));
    height: calc(60 * var(--rpx));
    border-radius: 50%;
    box-shadow: inset calc(-1 * var(--rpx)) 0 0 #fff3, inset calc(-2 * var(--rpx)) 0 0 calc(-1 * var(--rpx)) #fff3;
    transition: .3s;
}

.btn-expand::before{
    content: "";
    position: absolute;
    z-index: 270;
    left: 0;
    top: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(to right, #fff5, #fff0);
    transition: .3s;
    opacity: 1;
}

.btn-expand::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: calc(28 * var(--rpx));
    height: calc(28 * var(--rpx));
    background: url("../images/icon_plus_hollow.svg") center/contain no-repeat;
    z-index: 280;
}

.btn-detail:hover .btn-expand{
    transform: scale(1.05);
}
.btn-detail:hover .btn-expand::before{
    opacity: .4;
}

.sec4{
    padding-top: calc(var(--header-height-min) + 80 * var(--rpx));
    text-align: center;
    border-top: 1px solid #fff8;
    margin-bottom: 0;
    height: auto;
    padding-bottom: calc(480 * var(--rpx));
    position: relative;
    z-index: 201;
    overflow: visible;
    background: linear-gradient(to bottom, #000 90%, #0000 90%);
}

.sec4::after{
    content: "";
    background: url("../images/ai_sec4_circle.webp") center bottom/100% auto no-repeat transparent;
    width: 100%;
    height: calc(600vw / 19.2);
    position: absolute;
    left: 0;
    bottom:0;
}

.sec4 .wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sec4 .line2{
    font-size: calc(28 * var(--rpx));
    font-weight: bold;
    margin-top: calc(18 * var(--rpx));
}

.sec4 .line3{
    width: calc(800 * var(--rpx));
    line-height: calc(38em / 24);
    font-size: calc(24 * var(--rpx));
    margin-top: calc(40 * var(--rpx));
}

.sec4 .vid-ctn{
    width: calc(1160 * var(--rpx));
    aspect-ratio: 1728/1080;
    height: auto;
    margin-top: calc(200 * var(--rpx));
    display: block;
    position: relative;
    z-index: 290;
    margin-bottom: 100vh;
}

.sec4 .vid-ctn video{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.sec4 .figure-ctn{
    position: absolute;
    width: calc(1135 * var(--rpx));
    height: calc(942 * var(--rpx));
    left: calc((100% - 1135 * var(--rpx)) / 2);
    top: calc((100% - 942 * var(--rpx)) / 2);
    z-index: 240;
}

.sec4 .figure-ctn img{
    display: block;
    width: 100%;
    height: auto;
}

.sec4 .clickable{
    position: absolute;
    z-index: 260;
    height: 20%;
    border-radius: calc(20 * var(--rpx));
    bottom: 0;
    transition: .3s;
    cursor: pointer;
}

.sec4 .c1{
    width: 36%;
    left: 0%;
}

.sec4 .c2{
    width: 30%;
    right: 4.5%;
}

.sec4 .clickable:hover{
    background-color: #fff1;
}

.sec5{
    position: relative;
    z-index: 200;
    background: url("../images/ai_sec5_back.webp") center top/100% auto no-repeat;
    padding-top: calc(var(--header-height-min) + 40 * var(--rpx));
    padding-bottom: calc(120 * var(--rpx));

    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    height: auto;
}

@media(min-width: 961px) and (min-height: 741px){

}

.sec5 .section-title{
    margin-bottom: .5em;
}


.timeline-ctn{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.timeline{
    padding: 0 3.25%;
    margin-top: calc(100 * var(--rpx));
    width: 100%;
    height: calc(50 * var(--rpx));
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.timeline-stripe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 210;
}

.timeline-stripe .stripe-col{
    height: calc(36 * var(--rpx));
    flex-basis: calc(3 * var(--rpx));
    border-radius: calc(1.5 * var(--rpx));
    background: rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-stripe .stripe-col i{
    display: block;
    width: 1px;
    opacity: 0;
    height: calc(34 * var(--rpx));
    transition: .3s;
}

.timeline-stripe .stripe-col.active i{
    opacity: 1;
}

.timeline-stripe .stripe-col.stretched i{
    height: calc(50 * var(--rpx));
}

.timepoint{
    width: 0;
    height: 0;
    position: relative;
    z-index: 260;
}

.timepoint .active-area{
    position: absolute;
    width: calc(320 * var(--rpx));
    height: calc(180 * var(--rpx));
    bottom: calc(-50 * var(--rpx));
    left: calc(-160 * var(--rpx));
    border-radius: calc(30 * var(--rpx));
    transition: .3s;
}

.timepoint>*{
    pointer-events: none;
}

.timepoint>.active-area{
    pointer-events: all;
    cursor: pointer;
}

.timepoint>.active-area:hover{
    background-color: #fff1;
}

.timepoint .point{
    position: absolute;
    left: calc(-5 * var(--rpx));
    top: calc(-5 * var(--rpx));
    width: calc(10 * var(--rpx));
    height: calc(10 * var(--rpx));
    border-radius: 50px;
    background: rgba(196, 196, 196, 1);
    z-index: 210;
    transition: .3s;
}

.timepoint .circle{
    position: absolute;
    width: calc(58 * var(--rpx));
    height: calc(58 * var(--rpx));
    left: calc(-29 * var(--rpx));
    top: calc(-29 * var(--rpx));
    border: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 209;
    transition: .3s;
    opacity: 0;
}

.timepoint .line{
    position: absolute;
    width: calc(2 * var(--rpx));
    left: calc(-1 * var(--rpx));
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    height: calc(60 * var(--rpx));
}

.timepoint .pill{
    width: calc(280 * var(--rpx));
    height: calc(40 * var(--rpx));
    border-radius: calc(20 * var(--rpx));
    position: absolute;
    left: calc(-140 * var(--rpx));
    bottom: calc(60 * var(--rpx));
    background: linear-gradient(135deg,
            rgba(106, 255, 244, 1) 0%,
            rgba(207, 250, 255, 1) 12.5%,
            rgba(39, 81, 255, 1) 25%,
            rgba(227, 42, 122, 1) 37.5%,
            rgba(255, 255, 255, .3) 50%
    ) 100% 100%/200% 200% no-repeat;
    transition: .3s;
}

.timepoint .text{
    background: linear-gradient(90.00deg, rgba(25, 25, 25, 1),rgba(0, 0, 0, 1) 100%);
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border-radius: calc(18 * var(--rpx));

    display: flex;
    align-items: center;
    justify-content: center;
}

.timepoint.active .circle{
    opacity: 1;
}

.timepoint.active .point{
    background: radial-gradient(107.00% 113.00% at 51% 0%,
        rgba(200, 255, 251, 1) 1%,
        rgba(106, 255, 244, 1) 17%,
        rgba(39, 81, 255, 1) 61%,
        rgba(227, 42, 122, 1) 100%);
    transform: scale(2);
}

.timepoint.active .pill{
    background-position: 0 0;
}

.swiper-events{
    width: var(--wrapper-width);
    height: calc(380 * var(--rpx));
    margin: calc(50 * var(--rpx)) auto calc(80 * var(--rpx));
    overflow: visible;
}

.swiper-events .swiper-slide{
    opacity: .5;
    width: calc(var(--wrapper-width) - 180 * var(--rpx));
}

.swiper-events .swiper-slide.swiper-slide-active{
    opacity: 1;
}

.swiper-events .event{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(510 * var(--rpx));
}

.swiper-events .cover{
    width: 100%;
    aspect-ratio: 960/540;
    position: relative;
}

.swiper-events .cover img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 240;
}

.swiper-events .tag{
    background-color: #fff2;
    /*margin-bottom: calc(-5 * var(--rpx));*/
    border-top-left-radius: calc(30 * var(--rpx));
    margin-left: calc(12 * var(--rpx));
    width: calc(180 * var(--rpx));
    height: calc(60 * var(--rpx));
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 100%;
}

.swiper-events .tag::before{
    content: "";
    position: absolute;
    left: calc(-10 * var(--rpx));
    bottom: 0;
    top: 0;
    margin: auto;
    width: calc(20 * var(--rpx));
    height: calc(20 * var(--rpx));
    border-radius: 50%;
    background: radial-gradient(107.00% 113.00% at 51% 0%,
        rgba(200, 255, 251, 1) 1%,
        rgba(106, 255, 244, 1) 17%,
        rgba(39, 81, 255, 1) 61%,
        rgba(227, 42, 122, 1) 100%);
}

.swiper-events .desc{
    padding: calc(12 * var(--rpx));
    font-size: calc(24 * var(--rpx));
    line-height: calc(38em / 24);
}

.swiper-events .event{
    position: relative;
    z-index: 220;
}

.swiper-events .keyword{
    font-size: calc(168vw / 19.2);
    opacity: .3;
    filter: blur(18px);
    position: absolute;
    z-index: 210;
    left: calc(-110vw / 19.2);
    top: calc(-120vw / 19.2);
}

.site-footer{
    border-top: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

.location-tabs .tab.active{
    color: #fff;
}

.social-media-icons img{
    filter:invert(100%);
}

.sec5>*{
    z-index: 205;
}

.sec5>.vid-ctn{
    z-index: 200;
}

.location-content i{
    filter: url(#white-overlay);
}

.site-footer{
    background-color: #000;
}

.dialog3-1 .dialog-content{
    aspect-ratio: 1918/1280;
    width: calc(959 * var(--rpx));
    height: auto;
}

.dialog3-1 .dialog-desc{
    width: calc(820 * var(--rpx));
    margin-top: calc(360 * var(--rpx));
}

.dialog3-2 .dialog-content,
.dialog3-3 .dialog-content{
    aspect-ratio: 1920/1440;
    width: calc(960 * var(--rpx));
    height: auto;
}

.dialog3-2 .dialog-desc,
.dialog3-3 .dialog-desc{
    width: calc(820 * var(--rpx));
    margin-top: calc(360 * var(--rpx));
}

.dialog3-3 .dialog-desc{
    margin-top: calc(550 * var(--rpx));
}

.dialog4-1 .dialog-content{
    aspect-ratio: 1440/800;
    width: calc(1080 * var(--rpx));
    height: auto;
}

.swiper-dialog4-1{
    width: 100%;
    height: 100%;
}

.swiper-horizontal.swiper-dialog4-1>.swiper-pagination-bullets{
    width: auto;
    height: 100%;
    left: auto;
    top: 0;
    bottom: 0;
    right: calc(40 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(12 * var(--rpx));
}

.swiper-horizontal.swiper-dialog4-1>.swiper-pagination-bullets .swiper-pagination-bullet{
    width: calc(6 * var(--rpx));
    height: calc(30 * var(--rpx));
    border-radius: calc(3 * var(--rpx));
    background-color: #fff;
    transition: .2s;
    margin-left: 0;
    margin-right: 0;
}

.swiper-horizontal.swiper-dialog4-1>.swiper-pagination-bullets .swiper-pagination-bullet-active{
    height: calc(90 * var(--rpx));
}

.swiper-dialog4-1 .swiper-slide{
    overflow: hidden;
}

.swiper-dialog4-1 .slide1 svg,
.swiper-dialog4-1 .slide1 .content{
    position: absolute;
    width: calc(921% / 14.4);
    height: auto;
    top: calc(270% / 8);
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1200;
}

.swiper-dialog4-1 .slide2 svg{
    position: absolute;
    width: calc(1560.51% / 14.4);
    height: auto;
    top: calc(137 * var(--rpx));
    left: calc(-12 * var(--rpx));
    z-index: 1200;
}

.dialog4-2 .dialog-content{
    aspect-ratio: 1440/800;
    width: calc(1200 * var(--rpx-50));
    height: calc(666.67 * var(--rpx-50))
}


.dialog4-2 .dialog-light-trace {
    position: absolute;
    width: calc(100% + 40 * var(--rpx-50));
    height: calc(100% + 40 * var(--rpx-50));
    top: calc(-20 * var(--rpx-50));
    left: calc(-20 * var(--rpx-50));
}

.dialog4-2 .text1{
    position: absolute;
    left: calc(209% / 14.4);
    top: calc(150% / 8);
    width: calc(201% / 14.4);
    height: auto;
    z-index: 205;
    opacity: 0;
    transition: opacity .3s .2s, transform 1s .2s cubic-bezier(0.15, 1, 0.336, 1);
    transform: translateY(-20%);
}

.dialog4-2 .text2{
    position: absolute;
    left: calc(180% / 14.4);
    top: calc(458% / 8);
    width: calc(275% / 14.4);
    height: auto;
    z-index: 205;
    opacity: 0;
    transition: opacity .3s .2s, transform 1s .2s cubic-bezier(0.15, 1, 0.336, 1);
    transform: translateY(50%);
}

.dialog4-2.active .text1,
.dialog4-2.active .text2{
    opacity: 1;
    transform: none;
}

.circle-ctn{
    position: absolute;
    width: calc(581% / 14.4);
    height: calc(581% / 8);
    top: 0;
    bottom: 0;
    margin: auto;
    right: calc(161% / 14.4);
}

.circle-ctn>*{
    position: absolute;
}

.black-mask{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    border-radius: 50%;
    z-index: 201;
    transform: scale(.6);
    opacity: 0;
    transition: 0s .6s;
}
.active .black-mask{
    transform: none;
    opacity: 1;
    transition: opacity .6s .3s, transform .8s .3s cubic-bezier(0.15, 1, 0.336, 1);
}

.spiral-svg{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 210;
    transform: scale(.6) rotate(-30deg);
    opacity: 0;
    transition: 0s .6s;
}
.active .spiral-svg{
    transform: none;
    opacity: 1;
    transition: opacity .3s .35s, transform .8s .35s cubic-bezier(0.15, 1, 0.336, 1);
}

.big-circle{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 215;
    transform: scale(0.8);
    opacity: 0;
    transition: 0s .6s;
}
.active .big-circle{
    transform: none;
    opacity: 1;
    transition: opacity .3s .4s, transform .6s .4s cubic-bezier(0.15, 1, 0.336, 1);
}

.circle-halo{
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
    z-index: 205;
    transform: scale(0.5);
    opacity: 0;
    transition: 0s .6s;
}
.active .circle-halo{
    transform: none;
    opacity: 1;
    transition: opacity .3s .45s, transform .8s .45s cubic-bezier(0.15, 1, 0.336, 1);
}

.center-halo{
    width: calc(1200% / 5.81);
    height: calc(1200% / 5.81);
    left: calc(-309.5% / 5.81);
    top: calc(-309.5% / 5.81);
    z-index: 208;
    transform: scale(0.6);
    opacity: 0;
    transition: 0s .6s;
}
.active .center-halo{
    transform: none;
    opacity: 1;
    transition: opacity .3s .5s, transform .8s .5s cubic-bezier(0.15, 1, 0.336, 1);
}

.circle-center{
    width: calc(363% / 5.81);
    height: calc(363% / 5.81);
    left: calc(109% / 5.81);
    top: calc(109% / 5.81);
    z-index: 220;
    transform: scale(0.2);
    opacity: 0;
    transition: 0s .6s;
}

.active .circle-center{
    transform: none;
    opacity: 1;
    transition: opacity .3s .6s, transform 1s .6s cubic-bezier(0.15, 1, 0.336, 1);
}

.float-points{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 225;
    transform: scale(.4) rotate(-60deg);
    opacity: 0;
    transition: 0s .6s;
}
.active .float-points{
    transform: none;
    opacity: 1;
    transition: opacity .3s .6s, transform 1s .6s cubic-bezier(0.15, 1, 0.336, 1);
}

.float-point{
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}

.float-point.light{
    width: calc(5.44% / 5.81);
    height: calc(5.44% / 5.81);
    background-color: #fff;
    box-shadow: 0 0 calc(12 * var(--rpx-50)) calc(2 * var(--rpx)) rgba(255, 255, 255, 1);
}

.float-point.point-colored{
    background: radial-gradient(107.00% 113.00% at 51% 0%,
        rgba(200, 255, 251, 1) 1%,
        rgba(106, 255, 244, 1) 17%,
        rgba(39, 81, 255, 1) 61%,
        rgba(227, 42, 122, 1) 100%);

    width: calc(18.13% / 5.81);
    height: calc(18.13% / 5.81);
    box-shadow: 0 0 calc(24 * var(--rpx-50)) rgba(200, 255, 251, .8);
}

.float-point.point-normal{
    background-color: #548AFF;
}

.float-point.p1{
    left: calc(225.5% / 5.81);
    top: calc(98.8% / 5.81);
}

.float-point.p2{
    left: calc(410% / 5.81);
    top: calc(138% / 5.81);
}

.float-point.p3{
    left: calc(421% / 5.81);
    top: calc(268% / 5.81);
}

.float-point.p4{
    left: calc(410% / 5.81);
    top: calc(437% / 5.81);
}

.float-point.p5{
    left: calc(227% / 5.81);
    top: calc(465% / 5.81);
}

.float-point.p6{
    left: calc(129% / 5.81);
    top: calc(320% / 5.81);
}

.specials{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 230;
    transform: scale(0.8);
    opacity: 0;
    transition: 0s .6s;
    perspective: 10000px;
}

.active .specials{
    transform: none;
    opacity: 1;
    transition: opacity .3s .7s, transform 1s .7s cubic-bezier(0.15, 1, 0.336, 1);
}

.special{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: calc(160% / 5.81);
    height: calc(80% / 5.81);
    border-radius: calc(40 * var(--rpx-50));
    background-color: #000;
    font-size: calc(24 * var(--rpx));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.special:nth-of-type(2n){
    border: 2px solid #796081;
    background-color: #100033;
    box-shadow: 0 0 calc(30 * var(--rpx-50)) rgba(200, 255, 251, .2), inset 0 0 calc(30 * var(--rpx-50)) #E32ADB7F;
}

.special:nth-of-type(2n+1){
    border: 2px solid #5D70AD;
    background-color: #00113A;
    box-shadow: 0 0 calc(30 * var(--rpx-50)) rgba(200, 255, 251, .2), inset 0 0 calc(30 * var(--rpx-50)) #2751FFCC;
}

.flow-points{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 50%;
    z-index: 201;
    height: 30%;
}

.flow-points .float-point{
    position: absolute;
    width: calc(8 * var(--rpx-50));
    height: calc(8 * var(--rpx-50));
    border-radius: 50%;
    left: calc(-4 * var(--rpx-50));
    top: 0;
    bottom: 0;
    margin: auto;
}

/*.logo-row img:nth-of-type(1),
.logo-row img:nth-of-type(2){
    opacity: 1;
}*/

.logo-row img:nth-of-type(1){
    filter: invert(1);
}

.figure-lines-mobile{
    display: none;
}

@media (max-width: 960px) {
    .sec1 .desc{
        width: 100%;
    }

    .sec4 .vid-ctn{
        max-width: 75%;
        height: auto;
        margin-bottom: calc(240 * var(--rpx));
    }

    .specials{
        font-size: calc(24vw / 19.2);
    }

    .sec4 .figure-ctn{
        aspect-ratio: 1135/942;
        height: auto;
        width: 100%;
        left: 0;
        top: -20%;
    }

    .dialog-light-trace{
        width: calc(100% + 40px);
        height: calc(100% + 40px);
        top: calc(-20px);
        left: calc(-20px);
    }

    .sec5 .ai-logo, .sec3 .ai-logo{
        width: calc(180 * var(--rpx));
    }

    .sec2 .left{
        width: 100%;
        left: 0;
        top: calc(120 * var(--rpx));
        text-align: center;
        height: auto;
    }

    .sec2 .line1{
        width: 100%;
    }

    .sec2 .line2{
        margin-top: calc(30 * var(--rpx));
    }

    .sec2 .right{
        width: 80%;
        left: 10%;
        top: 35vh;
        bottom: 0;
        margin: 0;
    }

    .sec2 .circle-back{
        width: 120vw;
        height: 120vw;
        left: -10vw;
        top: 24vh;
    }

    .sec2, .sec3{
        position: relative;
    }

    .sec2 .grad-back::after{
        width: 100%;
        top: 0;
        background: linear-gradient(to bottom, #1C3D6480, #1C3D6400);
    }

    .sec2 .grad-ring{
        width: calc(5400vw / 19.2);
        height: calc(5400vw / 19.2);
        left: calc(-140.6vw + 50vw);
        top: calc(24vh + 60vw - 140.6vw);
    }

    .sec2-sec3-union{
        height: auto;
    }

    .p1 .btn-detail{
        right: 50%;
    }

    .p2 .btn-detail{
        left: 50%;
    }

    .sec3{
        height: 80vw;
    }

    .sec4{
        background-color: transparent;
    }

    .sec5{
        margin-top: calc(-120 * var(--rpx));
        padding-bottom: calc(240 * var(--rpx));
    }


    .dialog-layer .btn-close{
        left: calc(50% - 40 * var(--rpx));
        top: calc(100% - 40 * var(--rpx));
        bottom: unset;
        background-color: #0008;
    }


    .timepoint .pill {
        width: calc(320 * var(--rpx));
        left: calc(-160 * var(--rpx));
    }

    .swiper-events .tag{
        width: calc(240 * var(--rpx));
    }

    .figure-boxes .flex-item .inner-fill{
        mask-size: contain;
    }

}

@media (max-width: 960px) and (min-width: 751px) {
    .timepoint:nth-of-type(2n) .pill{
        bottom: unset;
        top: calc(60 * var(--rpx));
    }
    .timepoint:nth-of-type(2n) .line{
        top: 0;
        bottom: unset;
    }

    .timepoint:nth-of-type(2n) .active-area{
        bottom: unset;
        top: calc(-50 * var(--rpx));
    }
}

.sec2 .mobile{
    display: none;
}

.sec4 .figure-ctn .mobile{
    display: none;
}

.dialog4-1 .mobile{
    display: none;
}

@media (max-width: 750px) {

    section{
        min-height: unset;
    }

    .sec1 .wrapper{
        padding-bottom: 8vh;

    }

    .btn-scroll-hint{
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: calc(60 * var(--rpx));
        bottom: 0;
    }

    .sec1 .logo-ai{
        width: calc(228 * var(--rpx));
    }

    .sec1 .colored{
        font-size: calc(68 * var(--rpx));
        margin-top: calc(50 * var(--rpx));
    }

    .sec1 .desc{
        margin-top: calc(50 * var(--rpx));
        font-size: calc(28 * var(--rpx));
        line-height: calc(58 * var(--rpx));
    }

    .sec2 .pc{
        display: none;
    }

    .sec2 .mobile{
        display: inline;
    }

    /*.sec2 .grad-back::after{
        display: none;
    }*/

    .sec2 .line2{
        font-size: calc(32 * var(--rpx));
        height: calc(58 * var(--rpx));
        max-width: calc(550 * var(--rpx));
    }
    .sec2 .left{
        align-items: center;
    }

    .sec2 .circle-back{
        width: calc(1600 * var(--rpx));
        height: calc(1600 * var(--rpx));
        left: calc(50% - 800 * var(--rpx));
        top: calc(470 * var(--rpx));
    }

    .sec2 .top-line, .sec2 .bottom-line{
        font-size: calc(44 * var(--rpx));
    }

    .figure-boxes{
        --column: 2;
        --gap: calc(20 * var(--rpx));
        height: calc(580 * var(--rpx));
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .figure-boxes .flex-item{
        height: calc(280 * var(--rpx));
        background-position: -2000px -2000px;
    }

    .sec2{
        height: calc(1800 * var(--rpx));
    }

    .sec2 .right{
        width: calc(580 * var(--rpx));
        left: 0;
        right: 0;
        margin: auto;
        height: calc(1090 * var(--rpx));
        top: calc(500 * var(--rpx));
    }

    .sec2 .right .figure-lines{
        display: none;
    }

    .sec2 .top-line{
        top: 0;
    }

    .sec2 .bottom-line{
        bottom: 0;
    }

    .sec3{
        height: auto;
        padding-top: calc(140 * var(--rpx));
        padding-bottom: calc(160 * var(--rpx));
    }

    .sec3 .vid-ctn{
        height: calc(734 * .75 * var(--rpx));
        width: calc(748 * .75 * var(--rpx));
        position: relative;
        margin-top: calc(203.5 * var(--rpx));
        top: 0;
        margin-bottom: calc(100 * var(--rpx));
    }

    .sec3 .btn-detail{
        width: calc(350 * var(--rpx));
        height: calc(120 * var(--rpx));
        border-radius: calc(60 * var(--rpx));
    }

    .sec3 .btn-detail::after{
        border-radius: calc(60 * var(--rpx));
    }

    .btn-expand{
        width: calc(80 * var(--rpx));
        height: calc(80 * var(--rpx));
        right: calc(20 * var(--rpx));
    }

    .btn-detail .text{
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        font-size: calc(32 * var(--rpx));
        line-height: calc(43em / 32);
        padding-left: calc(35 * var(--rpx));
    }

    .btn-detail .text .rest .comma{
        display: none;
    }

    .p1 .btn-detail{
        bottom: 100%;
        right: unset;
        left: 0;
        transform: translateX(-50%);
    }

    .sec3 .p1 .line{
        width: calc(124 * var(--rpx));
        height: calc(184 * var(--rpx));
        background: url("../images/mobile_line_1.png") center/contain no-repeat;
    }

    .p2 .btn-detail{
        bottom: 100%;
        left: unset;
        right: 0;
        transform: translateX(50%);
    }

    .sec3 .p2 .line{
        width: calc(124 * var(--rpx));
        height: calc(184 * var(--rpx));
        background: url("../images/mobile_line_2.png") center/contain no-repeat;
    }


    .sec3 .p3 .line{
        height: calc(117 * var(--rpx));
    }

    .sec3 .section-title{
        font-size: calc(48 * var(--rpx));
    }

    .sec3 .desc{
        font-size: calc(38 * var(--rpx));
    }

    .p3 .btn-detail{
        width: calc(390 * var(--rpx));
    }

    .sec4{
        border-top: 1px solid #fff2;
        overflow: hidden;
        padding-bottom: 0;
    }

    .sec4 .section-title{
        font-size: calc(48 * var(--rpx));
    }

    .sec4 .line2{
        font-size: calc(38 * var(--rpx));
    }

    .sec4 .line3{
        width: var(--wrapper-width);
        margin: calc(40 * var(--rpx)) auto 0;
        font-size: calc(32 * var(--rpx));
    }


    .sec4 .line3 br{
        display: none;
    }

    .sec4 .figure-ctn .mobile{
        display: block;
    }
    .sec4 .figure-ctn .pc{
        display: none;
    }

    .sec4 .vid-ctn{
        width: 100vw;
        margin-left: calc(var(--wrapper-margin) * -1);
        margin-right: calc(var(--wrapper-margin) * -1);
        max-width: unset;
        margin-bottom: calc(240 * var(--rpx));
    }

    .sec4 .figure-ctn{
        width: 100%;
        height: calc(603 * var(--rpx));
    }

    .sec4 .c1,
    .sec4 .c2{
        width: 50%;
        height: calc(160 * var(--rpx));
        bottom: calc(-20 * var(--rpx));
    }
    .sec4 .c1{
        left: 0;
    }
    .sec4 .c2{
        right: 0;
    }

    .sec5{
        padding-top: calc(320 * var(--rpx));
    }

    .sec5 .section-title{
        margin-bottom: calc(80 * var(--rpx));
    }

    .swiper-events .tag{
        height: calc(60 * var(--rpx));
        padding-left: calc(38 * var(--rpx));
        padding-right: calc(38 * var(--rpx));
        width: auto;
        font-size: calc(24 * var(--rpx));
    }

    .swiper-events .cover{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .swiper-events .event{
        width: calc(540 * var(--rpx));
    }

    .timepoint .pill{
        min-width: calc(320 * var(--rpx));
        left: calc(-160 * var(--rpx));
        width: auto;
        white-space: nowrap;
        height: calc(50 * var(--rpx));
        color: #fff;
        font-size: calc(24 * var(--rpx));
        display: flex;
        padding-left: calc(30 * var(--rpx));
        padding-right: calc(30 * var(--rpx));
        opacity: 0;
    }

    .timepoint.first .pill{
        transform: translateX(25%);
    }

    .timepoint.last .pill{
        transform: translateX(-25%);
    }

    .timepoint .line{
        opacity: 0;
    }

    .timepoint.last-active .pill,
    .timepoint.last-active .line{
        opacity: 1;
    }


    .timepoint .active-area{
        width: calc(100 * var(--rpx));
        left: calc(-50 * var(--rpx));
        height: calc(120 * var(--rpx));
    }


    .timeline-stripe .stripe-col.pc{
        display: none;
    }

    .swiper-events{
        height: calc(480 * var(--rpx));
    }

    .sec5 .vid-ctn{
        width: calc(600 * var(--rpx));
        height: calc(600 * var(--rpx));
    }

    .dialog3-1 .dialog-content{
        width: calc(708 * var(--rpx));
        height: calc(820 * var(--rpx));
    }
    .dialog3-2 .dialog-content{
        width: calc(708 * var(--rpx));
        height: calc(1180 * var(--rpx));
    }
    .dialog3-3 .dialog-content{
        width: calc(708 * var(--rpx));
        height: calc(840 * var(--rpx));
    }

    .dialog-layer .btn-close{
        top: calc(100% + 40 * var(--rpx))
    }

    .dialog3-1 .dialog-desc,
    .dialog3-2 .dialog-desc,
    .dialog3-3 .dialog-desc{
        width: calc(628 * var(--rpx));
        margin-top: calc(306 * var(--rpx));
        font-size: calc(28 * var(--rpx));
        line-height: calc(58em / 28);
    }

    .dialog3-3 .dialog-desc{
        margin-top: calc(468 * var(--rpx));
    }

    .dialog4-1 .dialog-content{
        width: calc(708 * var(--rpx));
        height: calc(1160 * var(--rpx));
    }

    .dialog4-1 .dialog-back,
    .dialog4-1 .content,
    .dialog4-1 svg{
        display: none;
    }

    .dialog4-1 .mobile{
        display: block;
        width: 100%;
        height: auto;
    }

    .swiper-dialog4-1 .slide2{
        overflow: auto;
    }

    .swiper-horizontal.swiper-dialog4-1>.swiper-pagination-bullets{
        width: 100%;
        height: auto;
        bottom: calc(30 * var(--rpx));
        top: unset;
        left: 0;
        right: unset;
        flex-direction: row;
    }


    .swiper-horizontal.swiper-dialog4-1>.swiper-pagination-bullets .swiper-pagination-bullet{
        width: calc(30 * var(--rpx));
        height: calc(6 * var(--rpx));
    }
    .swiper-horizontal.swiper-dialog4-1>.swiper-pagination-bullets .swiper-pagination-bullet-active{
        width: calc(90 * var(--rpx));
        height: calc(6 * var(--rpx));
    }

    .dialog4-2  .dialog-content{
        width: calc(1160 * var(--rpx));
        height: calc(708 * var(--rpx));
        overflow: hidden;
    }

    .dialog4-2.active .dialog-body{
        opacity: 0;
        animation: fadeIn .3s forwards;
    }


    .dialog4-2 .dialog-body{
        animation: dialog42BodyOutMobile .6s cubic-bezier(0.15, 1, 0.336, 1) forwards;
    }

    .dialog-layer.dialog4-2.active .dialog-body{
        animation: dialog42BodyInMobile .8s cubic-bezier(0.15, 1, 0.336, 1) forwards;
    }

    @keyframes dialog42BodyInMobile {
        0%{
            opacity: 0;
            transform: scale(1.1) rotate(90deg);
        }
        100%{
            opacity: 1;
            transform: scale(1) rotate(90deg);
        }
    }

    @keyframes dialog42BodyOutMobile {
        0%{
            opacity: 1;
            transform: scale(1) rotate(90deg);
        }
        100%{
            opacity: 0;
            transform: scale(.75) rotate(90deg);
        }
    }

    .dialog4-2  .dialog-body{
        transform: rotate(90deg);
    }

    .dialog4-2 .circle-ctn{
        width: calc(508% / 11.6);
        height: calc(508% / 7.08);
        transform: rotate(-90deg);
    }

    .dialog4-2 .text1,
    .dialog4-2.active .text1{
        transform: rotate(-90deg) translate(-48%, -50%);
        width: calc(201% / 11.6);
    }

    .dialog4-2 .text2,
    .dialog4-2.active .text2{
        transform: rotate(-90deg) translate(25%, 10%);
        width: calc(347% / 11.6);
    }

    /*.dialog4-2-svg{
        transform: translateX(2%);
    }*/

    .dialog4-2 .btn-close{
        top: 0;
        bottom: 0;
        margin: auto;
        left: calc(100% + 30 * var(--rpx));
    }

    .dialog4-2 .dialog-light-trace{
        width: calc(100% + 40px);
        height: calc(100% + 40px);
        top: -20px;
        left: -20px;
    }

    .figure-lines{
        display: none;
    }

    .figure-lines-mobile{
        display: block;
        width: calc(686 * var(--rpx));
        height: calc(992 * var(--rpx));
        position: absolute;
        z-index: 290;
        pointer-events: none;
        left: calc((100% - 686 * var(--rpx)) / 2);
        top: calc((100% - 992 * var(--rpx)) / 2);
    }

    .figure-boxes{
        top: calc(-54 * var(--rpx));
        pointer-events: none;
    }

    .sec4::after{
        top: calc(100% - 260 * var(--rpx))
    }

    .sec5{
        margin-top: calc(-160 * var(--rpx));
    }

    section .clickable:hover{
        background-color: transparent;
    }

}