.callout-inner {
    display: grid;
    gap: 2rem 0;
}

.callout-row {
    display: flex;
    gap: max(4vw, 3rem);
    justify-content: center;
    align-items: center;
}

.callout-text {
    font-size: max(5.5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--TextColorPrimary);
    line-height: 1.3;
    background: linear-gradient(to right bottom, #e0e0e0, #707070, #a9a9a9);
    background: linear-gradient(to right bottom, #e0e0e0, #707070, #a9a9a9);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.callout-img {
    border-radius: 1em;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

.callout-row:is(.num01, .num02) img {
    width: max(12vw, 200px);
    height: max(5.5vw, 3rem);
    object-fit: cover;
}

.callout-row.num02 {
    padding-right: max(12vw, calc(3rem * 3));
}

.callout-row.num03 {
    padding-left: calc(max(12vw, 200px) + max(10vw, 6rem));
}

.callout-slogan {
    font-size: calc(var(--FontSizeItemTitle) * 1.2);
    line-height: 1.3;
    color: var(--TextColorPrimary);
    font-weight: 500;
}

.callout-desc {
    line-height: 1.3;
    letter-spacing: 0;
    font-size: var(--FontSizeItemTitle);
    color: var(--ColorPrimary);
}

.callout-change-inner .main-title br {
    display: none;
}

.zoom-sequence-container {
    height: 200vh;
    /* 2個螢幕高度的滾動距離 */
}

/* 動畫的"舞台"，它會被固定在螢幕上 */
.sticky-stage {
    position: sticky;
    top: var(--NaviHeight);
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* 隱藏所有超出舞台的元素 */
}


.callout-change {
    background: #d6d9d9;
    position: relative;
    width: 100%;
    height: 100%;
}

callout-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 10%;
}

.callout-change-inner {
    height: 100%;
    display: flex;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.callout-change .callout-img {
    display: flex;
    align-items: flex-end;
    flex-grow: 1;
    border-radius: 0;
    object-fit: initial;
    height: 100%;
    transform-origin: bottom;
    width: 55%;
}

.callout-change .callout-img img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    object-position: top;
}

.callout-bg {
    position: absolute;
    top: 0;
    height: 100%;
    left: 5%;
    width: 90%;
}

.callout-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}



.callout-change-inner .main-title {
    font-size: calc(var(--FontSizePrimary) * 0.8);
    margin-bottom: 1.5rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.callout-change-inner p {
    line-height: 1.8;
}


.callout-change-inner .btn-outter {
    margin-top: max(2.5vw, 3rem);
}

.callout-change-txt {
    visibility: hidden;
    width: 45%;
    padding-left: 15%;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--SectionPadding) * 1.5);
}


/* #zoom-container 現在只是一個定位標記 */
#zoom-container {
    width: max(12vw, 200px);
    height: max(5.5vw, 3rem);
    position: relative;
    border-radius: 1em;
}

#clip-wrapper {
    position: absolute;
    z-index: 2;
    border-radius: 1em;
    overflow: hidden;
    /* 動畫裁切才會漂亮 */
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, clip-path, width, height, border-radius;
    contain: layout style paint;
}

.zoom-sequence-container,
.pin-spacer,
.sticky-stage {
    position: relative;
    min-height: 100vh;
    /* 或指定大一點的固定高度 */
    /* 千萬不要讓這層高度被內容 fadeOut 時拖動 */
}

.callout-change-inner,
.callout-change-txt {
    backface-visibility: hidden;
    transform: translateZ(0);
}

.callout-deco {
    position: absolute;
    top: 0;
    left: 25%;
    height: 100%;
    transform: scale(1);
    opacity: 1;
    animation: decoBreath 7s cubic-bezier(.77, 0, .175, 1) infinite;
    animation-delay: 0s;
    will-change: transform, opacity;
}

.callout-deco img {
    height: 100%;
    width: 100%;
    object-position: center bottom;
    object-fit: contain;
}

@keyframes decoBreath {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: scale(1.6);
        opacity: 0;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.callout-text.animated {
    animation: 1500ms ease normal forwards 1 fadeInLeft;
    animation-delay: 0.3s;
}

.bg-pola {
    position: absolute;
    inset: 0;
    right: 0;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(to bottom, #fff 0%, #e7f3f3 40%, hsl(0deg 0% 100% / 0%) 80%);
}

.bg-pola-glow {
    right: 10%;
    position: absolute;
}

.bg-pola img {
    width: 60vw;
    height: 45vw;
    object-fit: contain;
    object-position: bottom;
}

@media (max-width: 1920px) {
    .callout-change-txt {
        padding-left: 13%;
    }

    .callout-bg {
        width: 100%;
    }
}

@media (max-width: 1850px) {
    .callout-change-inner .main-title br {
        display: block;
    }

    .callout-change-inner .main-title {
        -webkit-line-clamp: 2;
    }

    .callout-change-txt {
        padding-top: calc(var(--SectionPadding) * 1.2);
    }
}

@media (max-width: 1680px) {
    .callout-change-txt {
        padding-top: calc(var(--SectionPadding) * .9);
    }

    .callout-change-inner .btn-outter {
        margin-top: max(2.5vw, 2rem);
    }

    .callout-bg img {
        object-position: left center;
    }

    .callout-change-txt {
        padding-left: 10%;
    }
}

@media (max-width: 1536px) {

    .callout-row:is(.num01, .num02) img,
    #zoom-container {
        height: max(7.5vw, 3rem);
    }

    .callout-change-txt {
        width: 50%;
    }

    .callout-change .callout-img img {
        object-position: left top;
    }

    .callout-change .callout-img img {
        width: 100%;
    }

    .callout-row {
        gap: 3rem;
    }
}

@media (max-width: 1199px) {
    .callout-slogan {
        font-size: var(--FontSizeItemTitle);
    }

    .callout-desc {
        font-size: var(--FontSizeBody);
        margin-top: .5rem;
    }

    .callout-row:is(.num01, .num02) img,
    #zoom-container {
        height: max(7.5vw, 6rem);
    }

    .callout-bg {
        left: 0;
    }

    .callout-deco {
        left: 30%;
    }

}

@media (max-width:991px) {

    .callout-row:is(.num01, .num02) img, #zoom-container {
        height: max(9.5vw, 3rem);
        width: max(25vw, 170px);
    }

    .callout-row.num01 {
        flex-wrap: wrap;
        gap: 0.5rem 2rem;
    }

    .callout-row.num01 .callout-img {
        order: 3;
    }

    .callout-row.num01 .callout-text {
        order: 2;
    }

    .callout-slogan {
        font-size: var(--FontSizePrimary);
    }

    .callout-wrapper {
        padding: 0 2rem;
    }

    .callout-row.num01 .callout-side {
        width: 100%;
        order: 1;
        border-bottom: 1px solid rgb(0 0 0 / 10%);
        padding-bottom: max(3vw,2.5rem);
        margin-bottom: max(3vw,2.5rem);
        text-align: center;
    }

    .callout-text {
        font-size: max(7.5vw, 3.5rem);
    }


    .callout-row {
        gap: 2rem;
    }

    .callout-row.num03 {
        padding-left: calc(max(7vw, 120px) + max(10vw, 6rem));
    }

    .callout-row.num02 {
        padding-right: max(22vw, calc(3rem * 3));
    }

    .bg-pola img {
        width: 80vw;
        height: 70vw;
    }

    .bg-pola-glow {
        right: 0%;
    }

    .callout-change .callout-img img {
        width: 72%;
        margin: 0 0% 0 auto;
        height: auto;
        object-fit: cover;
        max-height: 120%;
    }

    .callout-change-txt {
        width: 100%;
        position: absolute;
        padding: calc(var(--SectionPadding) * 2) 15% 0;
        text-align: center;
        z-index: 1;
    }

    .callout-change-inner p {
        text-align: left;
    }

    .callout-change .callout-img {
        width: 100%;
    }

    .callout-change .btn-outter a {
        margin: 0 auto;
    }

    .callout-change-inner .main-title br {
        display: none;
    }

    .callout-change-inner .main-title {
        font-size: var(--FontSizePrimary);
    }

    .callout-deco {
        left: 5%;
        top: auto;
        bottom: 0;
        width: 90%;
        height: 70%;
    }

}

@media (max-width:767px) {
    .callout-change-txt {
        padding: calc(var(--SectionPadding) * 2) 10% 0;
    }

    .callout-text {
        font-size: max(6vw, 2rem);
    }
}

@media (max-width:700px) {
    .callout-change-txt {
        padding: calc(var(--SectionPadding) * 1.3) 10% 0;
    }
}

@media (max-width:650px) {

    .callout-row:is(.num01, .num02) img,
    #zoom-container {
        height: max(10.5vw, 3.5rem);
        width: max(30vw, 120px);
    }

    .callout-row.num03 {
        padding-left: calc(max(7vw, 55px) + max(10vw, 6rem));
    }

    .callout-row.num02 {
        padding-right: 0;
        justify-content: flex-start;
    }

    .callout-row.num03 {
        padding-left: 0;
        justify-content: flex-end;
    }

    .callout-change-inner .main-title br {
        display: block;
    }

    .callout-change-txt {
        padding: calc(var(--SectionPadding) * 1.5) 10% 0;
    }

    .callout-img {
        border-radius: 0.5em;
    }
}

@media (max-width:480px) {

    .callout-change-txt {
        padding: calc(var(--SectionPadding)*0.8) 2rem 0;
    }

    .callout-row.num01 {
        gap: 0.5rem 1.5rem;
    }

    .callout-row {
        gap: 1.5rem;
    }

    .callout-row:is(.num01, .num02) img,
    #zoom-container {
        height: max(10.5vw, 3.5rem);
        width: max(28vw, 100px);
    }
        .callout-row {
        gap: 1rem;
    }

    .callout-row.num01 {
        gap: 1rem;
    }
        .callout-inner {
        gap: 1.5rem 0;
    }
}

@media (max-width:380px) {
    .callout-wrapper {
        padding: 0 1rem;
    }

    .callout-text {
        font-size: max(6vw, 1.66rem);
    }

    .callout-change-txt {
        padding: calc(var(--SectionPadding) * .65) 2rem 0;
    }

    .callout-change-inner .main-title {
        margin-bottom: .5rem;
    }

    .callout-change-inner p {
        line-height: 1.6;
    }

    .callout-change-inner .btn-outter {
        margin-top: 1.5rem;
    }


}