@charset "UTF-8";
/* import module */
/* mod_swiper 開始 */
.section-swiper > .cont {
    gap: round(down, 0.75em, 2px);
}

    .section-swiper > .cont:not([class^=w-], [class*=" w-"]) {
        width: 90%;
        max-width: 1440px;
    }

.swiper-row {
    width: calc(100% + 1.5em);
}

.swiper {
    width: 100%;
    transform-style: preserve-3d;
}

.swiper-wrapper {
    transform-style: preserve-3d;
}

    .swiper-wrapper .card, .swiper-wrapper .card-story, .swiper-wrapper .card-plan {
        margin: round(down, 0.75em, 2px);
    }

.sw-btn, [class^=sw-btn-], [class*=" sw-btn-"] {
    position: absolute;
    top: calc(50% - 2.5em);
    box-shadow: 0 1px 4px #00000022;
    z-index: 10;
}

@media screen and (max-width: 960px) {
    .sw-btn, [class^=sw-btn-], [class*=" sw-btn-"] {
        font-size: round(down, 0.75em, 2px);
    }
}

.sw-btn-prev {
    left: round(down, -3.5em, 2px);
}

    .sw-btn-prev.inside {
        left: 1em;
    }

.sw-btn-next {
    right: round(down, -3.5em, 2px);
}

    .sw-btn-next.inside {
        right: 1em;
    }

.sw-btn-disabled {
    background-color: #99A1AD;
    opacity: 0.6;
    cursor: default;
}

    .sw-btn-disabled [class^=icon-], .sw-btn-disabled [class*=" icon-"] {
        background-color: #FFFFFF;
    }

    .sw-btn-disabled:hover {
        background-color: #99A1AD;
    }

        .sw-btn-disabled:hover [class^=icon-], .sw-btn-disabled:hover [class*=" icon-"] {
            background-color: #FFFFFF;
        }

/* sw-page-dot(overwrite) */
.sw-page-dot, .sw-page-dot.swiper-pagination-bullets {
    bottom: unset;
    display: flex;
    flex-flow: row nowrap;
    gap: 0.75em;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

    .sw-page-dot.inside, .sw-page-dot.swiper-pagination-bullets.inside {
        position: absolute;
        bottom: 1em;
    }

    .sw-page-dot .swiper-pagination-bullet, .sw-page-dot.swiper-pagination-bullets .swiper-pagination-bullet {
        background-color: #FFFFFF;
        width: 1em;
        height: 1em;
        margin: 0;
        border: 2px solid #FFFFFF;
        opacity: 1;
        border-radius: 50%;
        box-shadow: 0 1px 4px #00000022;
    }

    .sw-page-dot .swiper-pagination-bullet-active, .sw-page-dot.swiper-pagination-bullets .swiper-pagination-bullet-active {
        background-color: #088EED;
    }

@media screen and (max-width: 1600px) {
    .section-swiper .cont {
        max-width: 1360px;
    }
}

@media screen and (max-width: 1440px) {
    .sw-btn-prev {
        left: -3em;
    }

        .sw-btn-prev.inside {
            left: 0.5em;
        }

    .sw-btn-next {
        right: -3em;
    }

        .sw-btn-next.inside {
            right: 0.5em;
        }
}

@media screen and (max-width: 1024px) {
    .sw-btn-prev {
        left: -1.5em;
    }

    .sw-btn-next {
        right: -1.5em;
    }
}

@media screen and (max-width: 800px) {
    .section-swiper .sw-page-dot {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .section-swiper > .cont:not([class^=w-], [class*=" w-"]) {
        width: 100%;
    }

    .swiper-row {
        width: 100vw;
    }

    .swiper-wrapper .card, .swiper-wrapper .card-story {
        width: round(up, 100vw - 3.5em, 2px);
        margin: round(down, 0.5em, 2px) auto;
    }

    .sw-btn, [class^=sw-btn-], [class*=" sw-btn-"] {
        display: none;
    }

    .sw-page-dot .swiper-pagination-bullet, .sw-page-dot.swiper-pagination-bullets .swiper-pagination-bullet {
        width: round(down, 0.75em, 2px);
        height: round(down, 0.75em, 2px);
    }
}
/* mod_swiper 結束 */
/* mod_lesson_card 開始 */
.lesson-card {
    display: flex;
    flex-flow: column;
    gap: 0.75em;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 3/4;
    padding: 1em;
    border-radius: 8px;
    transition: 0.2s;
    overflow: hidden;
}

    .lesson-card .bg-img {
        position: absolute;
        left: 0;
        top: 0;
        background: no-repeat center/cover;
        background-image: url(../images/lesson_card/bg_gradient.svg);
        width: 112%;
        height: auto;
        transition: 0.2s;
        aspect-ratio: 1/1;
    }

    .lesson-card .deco-cont {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100%;
        transition: 0.2s;
    }

    .lesson-card .subject {
        position: absolute;
        left: 0;
        bottom: 0;
        justify-content: center;
        align-items: center;
        background-color: #000D1A66;
        width: 100%;
        padding: round(down, 0.25em, 2px) 0;
        font-size: round(down, 1.75em, 2px);
        font-weight: 500;
        z-index: 100;
    }

    .lesson-card .text {
        flex-flow: column;
        justify-content: center;
        align-items: center;
        display: none;
        font-size: round(down, 1.25em, 2px);
    }

    .lesson-card .item {
        position: absolute;
        width: 54%;
        height: auto;
        aspect-ratio: 1/1;
        transition: 0.2s;
        transform: scale(1) rotate(-9deg);
        animation: scale-item 5s ease infinite alternate;
    }

    .lesson-card .item-a01 {
        left: -40%;
        bottom: 0;
        width: 140%;
        aspect-ratio: 42/22;
    }

    .lesson-card .item-a02 {
        top: 0;
        right: 0;
        width: 50%;
        aspect-ratio: 20/25;
        animation-delay: 2.7s;
    }

    .lesson-card .item-b01 {
        top: 2%;
        left: 0;
        aspect-ratio: 16/9;
        animation-delay: 2.1s;
    }

    .lesson-card .item-b02 {
        top: 0;
        right: 0;
        aspect-ratio: 16/9;
    }

    .lesson-card .item-c01 {
        top: -4%;
        right: -4%;
        animation-delay: 1.7s;
    }

    .lesson-card .item-c02 {
        top: 10%;
        left: -5%;
        animation-delay: 0.9s;
    }

    .lesson-card .item-c03 {
        top: 40%;
        right: 0;
        z-index: 50;
    }

    .lesson-card .item-d01 {
        top: -4%;
        left: -4%;
        animation-delay: 1.6s;
    }

    .lesson-card .item-d02 {
        top: 6%;
        right: -6%;
    }

    .lesson-card .item-d03 {
        top: 40%;
        left: -5%;
        animation-delay: 1.3s;
    }

    .lesson-card .item-e01 {
        top: 0;
        left: -4%;
    }

    .lesson-card .item-e02 {
        top: 20%;
        right: -10%;
        animation-delay: 2.8s;
    }

    .lesson-card .item-e03 {
        top: 40%;
        left: 1%;
        z-index: 50;
        animation-delay: 1.3s;
    }

    .lesson-card .item-f01 {
        top: -6%;
        left: -8%;
        animation-delay: 1.9s;
    }

    .lesson-card .item-f02 {
        top: 2%;
        right: -8%;
        z-index: 50;
        animation-delay: 2.4s;
    }

    .lesson-card .item-f03 {
        top: 40%;
        left: 0;
        z-index: 50;
    }

    .lesson-card .item-g01 {
        top: 0;
        left: -6%;
        animation-delay: 0.7s;
    }

    .lesson-card .item-g02 {
        top: 2%;
        right: -8%;
    }

    .lesson-card .item-g03 {
        top: 50%;
        right: 0;
        animation-delay: 1.1s;
    }

    .lesson-card .kid {
        position: absolute;
        left: 50%;
        bottom: 15%;
        width: 64%;
        height: auto;
        aspect-ratio: 20/28;
        transition: 0.2s;
        transform: translateX(-50%);
    }

    .lesson-card .kid-01 {
        left: 32%;
    }

    .lesson-card .kid-03 {
        display: none;
    }

    .lesson-card.wide {
        max-width: unset;
        aspect-ratio: 2/1;
    }

        .lesson-card.wide .bg-img {
            top: -100%;
            left: 0;
            background: no-repeat center/cover;
            background-image: url(../images/lesson_card/bg_wave.svg);
            width: 200%;
            height: 200%;
            aspect-ratio: 2/1;
            animation: wave-move 24s linear infinite;
        }

        .lesson-card.wide .deco-cont {
            display: block;
        }

        .lesson-card.wide .deco {
            position: absolute;
            width: 3%;
            height: auto;
            aspect-ratio: 1/1;
            opacity: 0;
            animation: star-rotate 4s ease infinite, star-shine 5s ease infinite alternate;
        }

        .lesson-card.wide .deco-01 {
            top: 12%;
            left: 8%;
        }

        .lesson-card.wide .deco-02 {
            top: 40%;
            right: 30%;
            animation-delay: 1.2s, 2.1s;
        }

        .lesson-card.wide .deco-03 {
            left: 6%;
            bottom: 20%;
            animation-delay: 1.9s, 3.5s;
        }

        .lesson-card.wide .deco-04 {
            top: 8%;
            right: 8%;
            animation-delay: 2.3s, 3.8s;
        }

        .lesson-card.wide .deco-05 {
            top: 2%;
            left: 24%;
            animation-delay: 2.9s, 4.5s;
        }

        .lesson-card.wide .deco-06 {
            right: 8%;
            bottom: 16%;
            animation-delay: 3.4s, 5.7s;
        }

        .lesson-card.wide .subject {
            position: relative;
            left: unset;
            bottom: unset;
            background-color: unset;
            padding: 0;
        }

        .lesson-card.wide .text {
            display: flex;
        }

        .lesson-card.wide .item {
            width: 22%;
        }

        .lesson-card.wide .item-a01 {
            left: -10%;
            bottom: -4%;
            width: 60%;
        }

        .lesson-card.wide .item-a02 {
            top: unset;
            bottom: -4%;
            width: 28%;
        }

        .lesson-card.wide .item-b01 {
            left: 8%;
        }

        .lesson-card.wide .item-b02 {
            right: 9%;
        }

        .lesson-card.wide .item-b01, .lesson-card.wide .item-b02 {
            top: 32%;
        }

        .lesson-card.wide .kid {
            width: 28%;
            transform: unset;
        }

        .lesson-card.wide .kid-01 {
            left: 2%;
            bottom: 8%;
        }

        .lesson-card.wide .kid-02 {
            left: 24%;
        }

        .lesson-card.wide .kid-03 {
            right: 24%;
            display: block;
        }

        .lesson-card.wide .kid-02, .lesson-card.wide .kid-03 {
            bottom: -18%;
        }

        .lesson-card.wide:hover .kid {
            transform: scale(1.15);
        }

    .lesson-card:hover {
        transform: scale(1.02);
    }

        .lesson-card:hover:not(.wide) {
            transform: scale(1.05);
        }

            .lesson-card:hover:not(.wide) .kid {
                width: 70%;
            }

        .lesson-card:hover .item {
            padding: 0.25em;
        }

@media screen and (max-width: 640px) {
    .lesson-card .subject {
        font-size: round(down, 1.75em, 2px);
    }

    .lesson-card .text {
        font-size: round(down, 1.25em, 2px);
    }
}

@media screen and (max-width: 480px) {
    .lesson-card {
        height: calc(100% - 4em);
    }

        .lesson-card.wide {
            aspect-ratio: 3/2;
        }

            .lesson-card.wide .item-a01 {
                width: 50%;
            }

            .lesson-card.wide .item-a02 {
                width: 22%;
            }

            .lesson-card.wide .item-b01, .lesson-card.wide .item-b02 {
                top: 54%;
            }

            .lesson-card.wide .item-b01 {
                left: 4%;
            }

            .lesson-card.wide .item-b02 {
                right: 5%;
            }

            .lesson-card.wide .kid {
                width: 24%;
            }

            .lesson-card.wide .kid-01 {
                left: 0;
                bottom: 4%;
            }

            .lesson-card.wide .kid-02, .lesson-card.wide .kid-03 {
                bottom: -8%;
            }
}

@media screen and (max-width: 360px) {
    .lesson-card {
        font-size: 12px;
    }
}

.lesson-a {
    background-color: #0A522B;
}

    .lesson-a:hover {
        background-color: rgb(15.5434782609, 127.4565217391, 66.8369565217);
    }

.lesson-b {
    background-color: #1E0482;
}

    .lesson-b:hover {
        background-color: rgb(43.7014925373, 5.8268656716, 189.3731343284);
    }

.lesson-c {
    background-color: #FF9325;
}

    .lesson-c:hover {
        background-color: rgb(255, 159.6330275229, 62.5);
    }

.lesson-d {
    background-color: #E54363;
}

    .lesson-d:hover {
        background-color: rgb(232.0981308411, 89.4018691589, 117.5887850467);
    }

.lesson-e {
    background-color: #3784E6;
}

    .lesson-e:hover {
        background-color: rgb(77.6666666667, 145.94, 232.8333333333);
    }

.lesson-f {
    background-color: #0EBA68;
}

    .lesson-f:hover {
        background-color: rgb(15.785, 209.715, 117.26);
    }

.lesson-g {
    background-color: #7747B3;
}

    .lesson-g:hover {
        background-color: rgb(140.1392, 98.0528, 192.7472);
    }

@keyframes scale-item {
    0% {
        transform: scale(1) rotate(-9deg);
    }

    100% {
        transform: scale(1.15) rotate(0deg);
    }
}

@keyframes wave-move {
    0% {
        top: -100%;
        left: 0;
    }

    100% {
        top: 0;
        left: -100%;
    }
}

@keyframes star-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes star-shine {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 0.6;
    }
}

@media screen and (max-width: 800px) {
    .lesson-card {
        flex: 0 1 calc(50% - 0.75em);
        max-width: 320px;
    }

        .lesson-card.wide {
            width: 100%;
            max-width: 640px;
        }

        .lesson-card:hover {
            transform: scale(1);
        }

            .lesson-card:hover:not(.wide) {
                transform: scale(1);
            }

    .learning-literacy {
        flex-flow: column !important;
    }

    .learning-branch {
        flex-flow: row wrap !important;
        justify-content: flex-start;
        max-width: 640px;
    }
}
/* mod_lesson_card 結束 */
/* mod_advisory 開始 */
.advisory-cont {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #667284;
    max-width: 1440px;
    padding: round(down, 2.25em, 2px);
    border-radius: 20px;
}

    .advisory-cont::before, .advisory-cont::after {
        position: absolute;
        content: "";
        display: block;
        width: auto;
        height: 100%;
        aspect-ratio: 200/360;
    }

    .advisory-cont::before {
        left: 0;
        bottom: 0;
        background: no-repeat bottom/cover;
        background-image: url(../images/advisory_shape_01_200x420.svg);
        border-radius: 12px 0 0 12px;
    }

    .advisory-cont::after {
        top: 0;
        right: 0;
        background: no-repeat top/cover;
        background-image: url(../images/advisory_shape_02_200x420.svg);
        border-radius: 0 12px 12px 0;
    }

    .advisory-cont .col {
        left: 35%;
        gap: 0.5em;
        z-index: 20;
    }

    .advisory-cont .row {
        justify-content: space-between;
        margin-top: round(down, 0.75em, 2px);
    }

    .advisory-cont .advisory-model {
        position: absolute;
        left: 12%;
        bottom: 0;
        width: 32%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 32/40;
    }

    .advisory-cont .title {
        line-height: 1;
    }

    .advisory-cont .text {
        font-size: round(down, 1.5em, 2px);
    }

    .advisory-cont .text-cont {
        display: flex;
        flex-flow: row wrap;
        gap: 0;
        justify-content: flex-start;
        align-items: center;
    }

    .advisory-cont .form-cont {
        max-width: 540px;
    }

        .advisory-cont .form-cont .input-cont:not(.w-full), .advisory-cont .form-cont .select-cont:not(.w-full) {
            flex: 0 1 calc(50% - var(--gap-x, 1em) / 2);
        }

        .advisory-cont .form-cont .input-cont .input-label, .advisory-cont .form-cont .select-cont .input-label {
            border-color: #FFC299;
        }

            .advisory-cont .form-cont .input-cont .input-label:hover, .advisory-cont .form-cont .select-cont .input-label:hover {
                border-color: #FF6600;
            }

            .advisory-cont .form-cont .input-cont .input-label:focus-within, .advisory-cont .form-cont .select-cont .input-label:focus-within {
                background-color: #FFEFE5;
                border-color: #FF6600;
            }

        .advisory-cont .form-cont .input-cont .text, .advisory-cont .form-cont .select-cont .text {
            color: #FF6600;
        }

        .advisory-cont .form-cont .select-cont .input-label::before {
            background-color: #FF6600;
        }

    .advisory-cont .item-cont {
        position: absolute;
        right: 7%;
        bottom: 6%;
        width: 20%;
        max-width: 164px;
        height: auto;
        aspect-ratio: 164/220;
        z-index: 10;
    }

        .advisory-cont .item-cont .item-01 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            max-width: 64px;
            height: auto;
            aspect-ratio: 1/1;
        }

        .advisory-cont .item-cont .item-02 {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            max-width: 132px;
            height: auto;
            aspect-ratio: 1/1;
        }

    .advisory-cont .statement .input-label {
        background-color: #FFEFE5;
        border-color: #FF6600;
    }

    .advisory-cont .statement:has(input:checked) .input-label {
        background-color: #FF6600;
    }

    .advisory-cont .text-link {
        color: #FFFF00;
    }

.box-advisory .box-cont {
    max-width: 1024px;
}

.box-advisory .cont.advisory-cont {
    background-color: #667284;
    overflow: unset;
}

    .box-advisory .cont.advisory-cont .col {
        left: 8%;
    }

    .box-advisory .cont.advisory-cont .advisory-model {
        left: -2%;
    }

    .box-advisory .cont.advisory-cont .item-cont {
        top: -8%;
        right: 2%;
        bottom: unset;
        max-width: 204px;
        height: auto;
        aspect-ratio: 204/152;
    }

@media screen and (max-width: 1280px) {
    .advisory-cont .advisory-model {
        left: 4%;
    }

    .advisory-cont .col {
        left: 30%;
    }

    .advisory-cont .item-cont {
        right: 4%;
    }
}

@media screen and (max-width: 1024px) {
    .advisory-cont {
        align-items: center;
    }

        .advisory-cont .advisory-model {
            left: -2%;
        }

        .advisory-cont .col {
            left: 8%;
        }

        .advisory-cont .item-cont {
            top: -8%;
            right: 2%;
            bottom: unset;
            max-width: 204px;
            height: auto;
            aspect-ratio: 204/152;
        }
}

@media screen and (max-width: 800px) {
    .advisory-cont::before, .advisory-cont::after {
        width: 32%;
        max-width: 120px;
        height: auto;
        aspect-ratio: 200/420;
    }

    .advisory-cont .col {
        left: unset;
    }

    .advisory-cont .advisory-model, .advisory-cont .item-cont {
        display: none;
    }

    .box-advisory .cont.advisory-cont .col {
        left: unset;
    }
}

@media screen and (max-width: 640px) {
    .advisory-cont .text-cont {
        justify-content: center;
    }

    .advisory-cont .col {
        align-items: center;
    }

    .advisory-cont .row {
        flex-flow: column;
        justify-content: center;
    }

    .advisory-cont .form-cont .input-cont:not(.w-full), .advisory-cont .form-cont .select-cont:not(.w-full) {
        flex: 1 1 auto;
        width: 100%;
    }
}
/* mod_advisory 結束 */
/* mod_card 開始 */
/* card-story 學員分享, card-plan 訂閱專區, card-platform 數位學習專區 */
.card, .card-horiz, .card-line, .card-story, .card-plan, .card-platform {
    display: flex;
    flex-flow: column;
    border-radius: 20px;
    box-shadow: 0 1px 4px #00000016;
    transition: 0.2s;
    overflow: hidden;
    cursor: pointer;
    /* .text {
      &:not([class^='fs-'], [class*=' fs-']) {
          font-size: round(down, 1.25em, 2px) ;
      }
  } */
}

    .card:not([class^=bg-], [class*=" bg-"]), .card-horiz:not([class^=bg-], [class*=" bg-"]), .card-line:not([class^=bg-], [class*=" bg-"]), .card-story:not([class^=bg-], [class*=" bg-"]), .card-plan:not([class^=bg-], [class*=" bg-"]), .card-platform:not([class^=bg-], [class*=" bg-"]) {
        background-color: #FFFFFF;
    }

    .card[data-showbox], .card-horiz[data-showbox], .card-line[data-showbox], .card-story[data-showbox], .card-plan[data-showbox], .card-platform[data-showbox] {
        cursor: default;
    }

    .card .card-header, .card .card-footer, .card-horiz .card-header, .card-horiz .card-footer, .card-line .card-header, .card-line .card-footer, .card-story .card-header, .card-story .card-footer, .card-plan .card-header, .card-plan .card-footer, .card-platform .card-header, .card-platform .card-footer {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        padding: round(down, 1.25em, 2px);
    }

        .card .card-header:not([class^=gap-], [class*=" gap-"]), .card .card-footer:not([class^=gap-], [class*=" gap-"]), .card-horiz .card-header:not([class^=gap-], [class*=" gap-"]), .card-horiz .card-footer:not([class^=gap-], [class*=" gap-"]), .card-line .card-header:not([class^=gap-], [class*=" gap-"]), .card-line .card-footer:not([class^=gap-], [class*=" gap-"]), .card-story .card-header:not([class^=gap-], [class*=" gap-"]), .card-story .card-footer:not([class^=gap-], [class*=" gap-"]), .card-plan .card-header:not([class^=gap-], [class*=" gap-"]), .card-plan .card-footer:not([class^=gap-], [class*=" gap-"]), .card-platform .card-header:not([class^=gap-], [class*=" gap-"]), .card-platform .card-footer:not([class^=gap-], [class*=" gap-"]) {
            gap: var(--gap-y, 0.5em) var(--gap-x, 0.5em);
        }

    .card .card-header, .card-horiz .card-header, .card-line .card-header, .card-story .card-header, .card-plan .card-header, .card-platform .card-header {
        background-color: #F2F2F2;
        border-bottom: 1px solid #E5E7EA;
    }

    .card .card-footer, .card-horiz .card-footer, .card-line .card-footer, .card-story .card-footer, .card-plan .card-footer, .card-platform .card-footer {
        border-top: 1px solid #E5E7EA;
    }

    .card .cont, .card-horiz .cont, .card-line .cont, .card-story .cont, .card-plan .cont, .card-platform .cont {
        align-items: flex-start;
        padding: round(down, 1.25em, 2px);
    }

        .card .cont:not([class^=gap-], [class*=" gap-"]), .card-horiz .cont:not([class^=gap-], [class*=" gap-"]), .card-line .cont:not([class^=gap-], [class*=" gap-"]), .card-story .cont:not([class^=gap-], [class*=" gap-"]), .card-plan .cont:not([class^=gap-], [class*=" gap-"]), .card-platform .cont:not([class^=gap-], [class*=" gap-"]) {
            --gap-x: initial;
            --gap-y: initial;
            gap: var(--gap-y, 0.5em) var(--gap-x, 0.5em);
        }

    .card .title:not([class^=fs-], [class*=" fs-"]), .card-horiz .title:not([class^=fs-], [class*=" fs-"]), .card-line .title:not([class^=fs-], [class*=" fs-"]), .card-story .title:not([class^=fs-], [class*=" fs-"]), .card-plan .title:not([class^=fs-], [class*=" fs-"]), .card-platform .title:not([class^=fs-], [class*=" fs-"]) {
        font-size: round(down, 1.75em, 2px);
    }

    .card .subject:not([class^=fs-], [class*=" fs-"]), .card-horiz .subject:not([class^=fs-], [class*=" fs-"]), .card-line .subject:not([class^=fs-], [class*=" fs-"]), .card-story .subject:not([class^=fs-], [class*=" fs-"]), .card-plan .subject:not([class^=fs-], [class*=" fs-"]), .card-platform .subject:not([class^=fs-], [class*=" fs-"]) {
        font-size: round(down, 1.5em, 2px);
    }

    .card .row, .card-horiz .row, .card-line .row, .card-story .row, .card-plan .row, .card-platform .row {
        justify-content: flex-start;
    }

        .card .row:not([class^=gap-], [class*=" gap-"]), .card-horiz .row:not([class^=gap-], [class*=" gap-"]), .card-line .row:not([class^=gap-], [class*=" gap-"]), .card-story .row:not([class^=gap-], [class*=" gap-"]), .card-plan .row:not([class^=gap-], [class*=" gap-"]), .card-platform .row:not([class^=gap-], [class*=" gap-"]) {
            gap: var(--gap-y, 0.5em) var(--gap-x, 0.5em);
        }

    .card .col, .card [class^=col-], .card [class*=" col-"], .card-horiz .col, .card-horiz [class^=col-], .card-horiz [class*=" col-"], .card-line .col, .card-line [class^=col-], .card-line [class*=" col-"], .card-story .col, .card-story [class^=col-], .card-story [class*=" col-"], .card-plan .col, .card-plan [class^=col-], .card-plan [class*=" col-"], .card-platform .col, .card-platform [class^=col-], .card-platform [class*=" col-"] {
        width: 100%;
    }

        .card .col:not([class^=gap-], [class*=" gap-"]), .card [class^=col-]:not([class^=gap-], [class*=" gap-"]), .card [class*=" col-"]:not([class^=gap-], [class*=" gap-"]), .card-horiz .col:not([class^=gap-], [class*=" gap-"]), .card-horiz [class^=col-]:not([class^=gap-], [class*=" gap-"]), .card-horiz [class*=" col-"]:not([class^=gap-], [class*=" gap-"]), .card-line .col:not([class^=gap-], [class*=" gap-"]), .card-line [class^=col-]:not([class^=gap-], [class*=" gap-"]), .card-line [class*=" col-"]:not([class^=gap-], [class*=" gap-"]), .card-story .col:not([class^=gap-], [class*=" gap-"]), .card-story [class^=col-]:not([class^=gap-], [class*=" gap-"]), .card-story [class*=" col-"]:not([class^=gap-], [class*=" gap-"]), .card-plan .col:not([class^=gap-], [class*=" gap-"]), .card-plan [class^=col-]:not([class^=gap-], [class*=" gap-"]), .card-plan [class*=" col-"]:not([class^=gap-], [class*=" gap-"]), .card-platform .col:not([class^=gap-], [class*=" gap-"]), .card-platform [class^=col-]:not([class^=gap-], [class*=" gap-"]), .card-platform [class*=" col-"]:not([class^=gap-], [class*=" gap-"]) {
            gap: var(--gap-y, 0.5em) var(--gap-x, 0.5em);
        }

    .card .card-form, .card-horiz .card-form, .card-line .card-form, .card-story .card-form, .card-plan .card-form, .card-platform .card-form {
        display: table;
        width: 100%;
    }

        .card .card-form .tb-row, .card-horiz .card-form .tb-row, .card-line .card-form .tb-row, .card-story .card-form .tb-row, .card-plan .card-form .tb-row, .card-platform .card-form .tb-row {
            display: table-row;
        }

        .card .card-form .tb-th, .card .card-form [class^=tb-th-], .card .card-form [class*=" tb-th-"], .card .card-form .tb-cell, .card .card-form [class^=tb-cell-], .card .card-form [class*=" tb-cell-"], .card-horiz .card-form .tb-th, .card-horiz .card-form [class^=tb-th-], .card-horiz .card-form [class*=" tb-th-"], .card-horiz .card-form .tb-cell, .card-horiz .card-form [class^=tb-cell-], .card-horiz .card-form [class*=" tb-cell-"], .card-line .card-form .tb-th, .card-line .card-form [class^=tb-th-], .card-line .card-form [class*=" tb-th-"], .card-line .card-form .tb-cell, .card-line .card-form [class^=tb-cell-], .card-line .card-form [class*=" tb-cell-"], .card-story .card-form .tb-th, .card-story .card-form [class^=tb-th-], .card-story .card-form [class*=" tb-th-"], .card-story .card-form .tb-cell, .card-story .card-form [class^=tb-cell-], .card-story .card-form [class*=" tb-cell-"], .card-plan .card-form .tb-th, .card-plan .card-form [class^=tb-th-], .card-plan .card-form [class*=" tb-th-"], .card-plan .card-form .tb-cell, .card-plan .card-form [class^=tb-cell-], .card-plan .card-form [class*=" tb-cell-"], .card-platform .card-form .tb-th, .card-platform .card-form [class^=tb-th-], .card-platform .card-form [class*=" tb-th-"], .card-platform .card-form .tb-cell, .card-platform .card-form [class^=tb-cell-], .card-platform .card-form [class*=" tb-cell-"] {
            display: table-cell;
            vertical-align: middle;
        }

        .card .card-form .tb-th, .card .card-form .tb-cell, .card-horiz .card-form .tb-th, .card-horiz .card-form .tb-cell, .card-line .card-form .tb-th, .card-line .card-form .tb-cell, .card-story .card-form .tb-th, .card-story .card-form .tb-cell, .card-plan .card-form .tb-th, .card-plan .card-form .tb-cell, .card-platform .card-form .tb-th, .card-platform .card-form .tb-cell {
            display: table-cell;
            vertical-align: middle;
        }

        .card .card-form .tb-th-1, .card .card-form .tb-cell-1, .card-horiz .card-form .tb-th-1, .card-horiz .card-form .tb-cell-1, .card-line .card-form .tb-th-1, .card-line .card-form .tb-cell-1, .card-story .card-form .tb-th-1, .card-story .card-form .tb-cell-1, .card-plan .card-form .tb-th-1, .card-plan .card-form .tb-cell-1, .card-platform .card-form .tb-th-1, .card-platform .card-form .tb-cell-1 {
            width: calc(1 / 12 * 100%);
        }

        .card .card-form .tb-th-2, .card .card-form .tb-cell-2, .card-horiz .card-form .tb-th-2, .card-horiz .card-form .tb-cell-2, .card-line .card-form .tb-th-2, .card-line .card-form .tb-cell-2, .card-story .card-form .tb-th-2, .card-story .card-form .tb-cell-2, .card-plan .card-form .tb-th-2, .card-plan .card-form .tb-cell-2, .card-platform .card-form .tb-th-2, .card-platform .card-form .tb-cell-2 {
            width: calc(2 / 12 * 100%);
        }

        .card .card-form .tb-th-3, .card .card-form .tb-cell-3, .card-horiz .card-form .tb-th-3, .card-horiz .card-form .tb-cell-3, .card-line .card-form .tb-th-3, .card-line .card-form .tb-cell-3, .card-story .card-form .tb-th-3, .card-story .card-form .tb-cell-3, .card-plan .card-form .tb-th-3, .card-plan .card-form .tb-cell-3, .card-platform .card-form .tb-th-3, .card-platform .card-form .tb-cell-3 {
            width: calc(3 / 12 * 100%);
        }

        .card .card-form .tb-th-4, .card .card-form .tb-cell-4, .card-horiz .card-form .tb-th-4, .card-horiz .card-form .tb-cell-4, .card-line .card-form .tb-th-4, .card-line .card-form .tb-cell-4, .card-story .card-form .tb-th-4, .card-story .card-form .tb-cell-4, .card-plan .card-form .tb-th-4, .card-plan .card-form .tb-cell-4, .card-platform .card-form .tb-th-4, .card-platform .card-form .tb-cell-4 {
            width: calc(4 / 12 * 100%);
        }

        .card .card-form .tb-th-5, .card .card-form .tb-cell-5, .card-horiz .card-form .tb-th-5, .card-horiz .card-form .tb-cell-5, .card-line .card-form .tb-th-5, .card-line .card-form .tb-cell-5, .card-story .card-form .tb-th-5, .card-story .card-form .tb-cell-5, .card-plan .card-form .tb-th-5, .card-plan .card-form .tb-cell-5, .card-platform .card-form .tb-th-5, .card-platform .card-form .tb-cell-5 {
            width: calc(5 / 12 * 100%);
        }

        .card .card-form .tb-th-6, .card .card-form .tb-cell-6, .card-horiz .card-form .tb-th-6, .card-horiz .card-form .tb-cell-6, .card-line .card-form .tb-th-6, .card-line .card-form .tb-cell-6, .card-story .card-form .tb-th-6, .card-story .card-form .tb-cell-6, .card-plan .card-form .tb-th-6, .card-plan .card-form .tb-cell-6, .card-platform .card-form .tb-th-6, .card-platform .card-form .tb-cell-6 {
            width: calc(6 / 12 * 100%);
        }

        .card .card-form .tb-th-7, .card .card-form .tb-cell-7, .card-horiz .card-form .tb-th-7, .card-horiz .card-form .tb-cell-7, .card-line .card-form .tb-th-7, .card-line .card-form .tb-cell-7, .card-story .card-form .tb-th-7, .card-story .card-form .tb-cell-7, .card-plan .card-form .tb-th-7, .card-plan .card-form .tb-cell-7, .card-platform .card-form .tb-th-7, .card-platform .card-form .tb-cell-7 {
            width: calc(7 / 12 * 100%);
        }

        .card .card-form .tb-th-8, .card .card-form .tb-cell-8, .card-horiz .card-form .tb-th-8, .card-horiz .card-form .tb-cell-8, .card-line .card-form .tb-th-8, .card-line .card-form .tb-cell-8, .card-story .card-form .tb-th-8, .card-story .card-form .tb-cell-8, .card-plan .card-form .tb-th-8, .card-plan .card-form .tb-cell-8, .card-platform .card-form .tb-th-8, .card-platform .card-form .tb-cell-8 {
            width: calc(8 / 12 * 100%);
        }

        .card .card-form .tb-th-9, .card .card-form .tb-cell-9, .card-horiz .card-form .tb-th-9, .card-horiz .card-form .tb-cell-9, .card-line .card-form .tb-th-9, .card-line .card-form .tb-cell-9, .card-story .card-form .tb-th-9, .card-story .card-form .tb-cell-9, .card-plan .card-form .tb-th-9, .card-plan .card-form .tb-cell-9, .card-platform .card-form .tb-th-9, .card-platform .card-form .tb-cell-9 {
            width: calc(9 / 12 * 100%);
        }

        .card .card-form .tb-th-10, .card .card-form .tb-cell-10, .card-horiz .card-form .tb-th-10, .card-horiz .card-form .tb-cell-10, .card-line .card-form .tb-th-10, .card-line .card-form .tb-cell-10, .card-story .card-form .tb-th-10, .card-story .card-form .tb-cell-10, .card-plan .card-form .tb-th-10, .card-plan .card-form .tb-cell-10, .card-platform .card-form .tb-th-10, .card-platform .card-form .tb-cell-10 {
            width: calc(10 / 12 * 100%);
        }

        .card .card-form .tb-th-11, .card .card-form .tb-cell-11, .card-horiz .card-form .tb-th-11, .card-horiz .card-form .tb-cell-11, .card-line .card-form .tb-th-11, .card-line .card-form .tb-cell-11, .card-story .card-form .tb-th-11, .card-story .card-form .tb-cell-11, .card-plan .card-form .tb-th-11, .card-plan .card-form .tb-cell-11, .card-platform .card-form .tb-th-11, .card-platform .card-form .tb-cell-11 {
            width: calc(11 / 12 * 100%);
        }

        .card .card-form .tb-th-12, .card .card-form .tb-cell-12, .card-horiz .card-form .tb-th-12, .card-horiz .card-form .tb-cell-12, .card-line .card-form .tb-th-12, .card-line .card-form .tb-cell-12, .card-story .card-form .tb-th-12, .card-story .card-form .tb-cell-12, .card-plan .card-form .tb-th-12, .card-plan .card-form .tb-cell-12, .card-platform .card-form .tb-th-12, .card-platform .card-form .tb-cell-12 {
            width: calc(12 / 12 * 100%);
        }

        .card .card-form .tb-th, .card .card-form [class^=tb-th-], .card .card-form [class*=" tb-th-"], .card-horiz .card-form .tb-th, .card-horiz .card-form [class^=tb-th-], .card-horiz .card-form [class*=" tb-th-"], .card-line .card-form .tb-th, .card-line .card-form [class^=tb-th-], .card-line .card-form [class*=" tb-th-"], .card-story .card-form .tb-th, .card-story .card-form [class^=tb-th-], .card-story .card-form [class*=" tb-th-"], .card-plan .card-form .tb-th, .card-plan .card-form [class^=tb-th-], .card-plan .card-form [class*=" tb-th-"], .card-platform .card-form .tb-th, .card-platform .card-form [class^=tb-th-], .card-platform .card-form [class*=" tb-th-"] {
            padding: round(down, 0.25em, 2px) round(down, 0.75em, 2px);
            background-color: #E5E7EA;
        }

            .card .card-form .tb-th:first-of-type, .card .card-form [class^=tb-th-]:first-of-type, .card .card-form [class*=" tb-th-"]:first-of-type, .card-horiz .card-form .tb-th:first-of-type, .card-horiz .card-form [class^=tb-th-]:first-of-type, .card-horiz .card-form [class*=" tb-th-"]:first-of-type, .card-line .card-form .tb-th:first-of-type, .card-line .card-form [class^=tb-th-]:first-of-type, .card-line .card-form [class*=" tb-th-"]:first-of-type, .card-story .card-form .tb-th:first-of-type, .card-story .card-form [class^=tb-th-]:first-of-type, .card-story .card-form [class*=" tb-th-"]:first-of-type, .card-plan .card-form .tb-th:first-of-type, .card-plan .card-form [class^=tb-th-]:first-of-type, .card-plan .card-form [class*=" tb-th-"]:first-of-type, .card-platform .card-form .tb-th:first-of-type, .card-platform .card-form [class^=tb-th-]:first-of-type, .card-platform .card-form [class*=" tb-th-"]:first-of-type {
                border-radius: 4px 0 0 4px;
            }

            .card .card-form .tb-th:last-of-type, .card .card-form [class^=tb-th-]:last-of-type, .card .card-form [class*=" tb-th-"]:last-of-type, .card-horiz .card-form .tb-th:last-of-type, .card-horiz .card-form [class^=tb-th-]:last-of-type, .card-horiz .card-form [class*=" tb-th-"]:last-of-type, .card-line .card-form .tb-th:last-of-type, .card-line .card-form [class^=tb-th-]:last-of-type, .card-line .card-form [class*=" tb-th-"]:last-of-type, .card-story .card-form .tb-th:last-of-type, .card-story .card-form [class^=tb-th-]:last-of-type, .card-story .card-form [class*=" tb-th-"]:last-of-type, .card-plan .card-form .tb-th:last-of-type, .card-plan .card-form [class^=tb-th-]:last-of-type, .card-plan .card-form [class*=" tb-th-"]:last-of-type, .card-platform .card-form .tb-th:last-of-type, .card-platform .card-form [class^=tb-th-]:last-of-type, .card-platform .card-form [class*=" tb-th-"]:last-of-type {
                border-radius: 0 4px 4px 0;
            }

            .card .card-form .tb-th .text, .card .card-form .tb-th [class^=text-], .card .card-form .tb-th [class*=" text-"], .card .card-form [class^=tb-th-] .text, .card .card-form [class^=tb-th-] [class^=text-], .card .card-form [class^=tb-th-] [class*=" text-"], .card .card-form [class*=" tb-th-"] .text, .card .card-form [class*=" tb-th-"] [class^=text-], .card .card-form [class*=" tb-th-"] [class*=" text-"], .card-horiz .card-form .tb-th .text, .card-horiz .card-form .tb-th [class^=text-], .card-horiz .card-form .tb-th [class*=" text-"], .card-horiz .card-form [class^=tb-th-] .text, .card-horiz .card-form [class^=tb-th-] [class^=text-], .card-horiz .card-form [class^=tb-th-] [class*=" text-"], .card-horiz .card-form [class*=" tb-th-"] .text, .card-horiz .card-form [class*=" tb-th-"] [class^=text-], .card-horiz .card-form [class*=" tb-th-"] [class*=" text-"], .card-line .card-form .tb-th .text, .card-line .card-form .tb-th [class^=text-], .card-line .card-form .tb-th [class*=" text-"], .card-line .card-form [class^=tb-th-] .text, .card-line .card-form [class^=tb-th-] [class^=text-], .card-line .card-form [class^=tb-th-] [class*=" text-"], .card-line .card-form [class*=" tb-th-"] .text, .card-line .card-form [class*=" tb-th-"] [class^=text-], .card-line .card-form [class*=" tb-th-"] [class*=" text-"], .card-story .card-form .tb-th .text, .card-story .card-form .tb-th [class^=text-], .card-story .card-form .tb-th [class*=" text-"], .card-story .card-form [class^=tb-th-] .text, .card-story .card-form [class^=tb-th-] [class^=text-], .card-story .card-form [class^=tb-th-] [class*=" text-"], .card-story .card-form [class*=" tb-th-"] .text, .card-story .card-form [class*=" tb-th-"] [class^=text-], .card-story .card-form [class*=" tb-th-"] [class*=" text-"], .card-plan .card-form .tb-th .text, .card-plan .card-form .tb-th [class^=text-], .card-plan .card-form .tb-th [class*=" text-"], .card-plan .card-form [class^=tb-th-] .text, .card-plan .card-form [class^=tb-th-] [class^=text-], .card-plan .card-form [class^=tb-th-] [class*=" text-"], .card-plan .card-form [class*=" tb-th-"] .text, .card-plan .card-form [class*=" tb-th-"] [class^=text-], .card-plan .card-form [class*=" tb-th-"] [class*=" text-"], .card-platform .card-form .tb-th .text, .card-platform .card-form .tb-th [class^=text-], .card-platform .card-form .tb-th [class*=" text-"], .card-platform .card-form [class^=tb-th-] .text, .card-platform .card-form [class^=tb-th-] [class^=text-], .card-platform .card-form [class^=tb-th-] [class*=" text-"], .card-platform .card-form [class*=" tb-th-"] .text, .card-platform .card-form [class*=" tb-th-"] [class^=text-], .card-platform .card-form [class*=" tb-th-"] [class*=" text-"] {
                transform: translateY(-1px);
            }

        .card .card-form .tb-cell, .card .card-form [class^=tb-cell-], .card .card-form [class*=" tb-cell-"], .card-horiz .card-form .tb-cell, .card-horiz .card-form [class^=tb-cell-], .card-horiz .card-form [class*=" tb-cell-"], .card-line .card-form .tb-cell, .card-line .card-form [class^=tb-cell-], .card-line .card-form [class*=" tb-cell-"], .card-story .card-form .tb-cell, .card-story .card-form [class^=tb-cell-], .card-story .card-form [class*=" tb-cell-"], .card-plan .card-form .tb-cell, .card-plan .card-form [class^=tb-cell-], .card-plan .card-form [class*=" tb-cell-"], .card-platform .card-form .tb-cell, .card-platform .card-form [class^=tb-cell-], .card-platform .card-form [class*=" tb-cell-"] {
            padding: round(down, 0.75em, 2px);
            border-bottom: 1px solid #E5E7EA;
        }

    .card .button-cont, .card-horiz .button-cont, .card-line .button-cont, .card-story .button-cont, .card-plan .button-cont, .card-platform .button-cont {
        margin-top: 0.5em;
    }

    .card .btn, .card [class^=btn-], .card [class*=" btn-"], .card-horiz .btn, .card-horiz [class^=btn-], .card-horiz [class*=" btn-"], .card-line .btn, .card-line [class^=btn-], .card-line [class*=" btn-"], .card-story .btn, .card-story [class^=btn-], .card-story [class*=" btn-"], .card-plan .btn, .card-plan [class^=btn-], .card-plan [class*=" btn-"], .card-platform .btn, .card-platform [class^=btn-], .card-platform [class*=" btn-"] {
        width: 100%;
        padding: 0.5em 1em;
    }

    .card .play-btn, .card-horiz .play-btn, .card-line .play-btn, .card-story .play-btn, .card-plan .play-btn, .card-platform .play-btn {
        position: absolute;
        top: calc(50% - 1.5em);
        left: calc(50% - 1.5em);
        width: 3em;
        height: auto;
        aspect-ratio: 1/1;
        opacity: 0.8;
        filter: drop-shadow(0 4px 8px #00000033);
    }

    .card:hover:not(.unhover), .card-horiz:hover:not(.unhover), .card-line:hover:not(.unhover), .card-story:hover:not(.unhover), .card-plan:hover:not(.unhover), .card-platform:hover:not(.unhover) {
        transform: translateY(round(down, -0.25em, 2px));
        box-shadow: 0 1px 4px #00000022;
    }

        .card:hover:not(.unhover) .card-img img:not(.play-btn), .card-horiz:hover:not(.unhover) .card-img img:not(.play-btn), .card-line:hover:not(.unhover) .card-img img:not(.play-btn), .card-story:hover:not(.unhover) .card-img img:not(.play-btn), .card-plan:hover:not(.unhover) .card-img img:not(.play-btn), .card-platform:hover:not(.unhover) .card-img img:not(.play-btn) {
            transform: scale(1.05);
        }

        .card:hover:not(.unhover) .play-btn, .card-horiz:hover:not(.unhover) .play-btn, .card-line:hover:not(.unhover) .play-btn, .card-story:hover:not(.unhover) .play-btn, .card-plan:hover:not(.unhover) .play-btn, .card-platform:hover:not(.unhover) .play-btn {
            transform: scale(1.2);
        }

    .card.unhover, .card-horiz.unhover, .card-line.unhover, .card-story.unhover, .card-plan.unhover, .card-platform.unhover {
        cursor: default;
    }

.card-horiz {
    flex-flow: row nowrap;
    border-radius: 12px;
}

    .card-horiz .card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card-horiz .cont {
        padding: 1em;
    }

    .card-horiz.row-reverse {
        flex-direction: row-reverse;
    }

        .card-horiz.row-reverse .cont {
            align-items: flex-end;
        }

.card-line {
    border: 1px solid #E5E7EA;
    border-radius: 12px;
    box-shadow: unset;
    /* .text {
      font-size: 1em;
  } */
}

    .card-line .card-header {
        padding: 1em;
    }

    .card-line .card-footer {
        padding: 1em;
    }

    .card-line .cont {
        gap: 1em;
        padding: 1em;
    }

    .card-line .title {
        font-size: round(down, 1.5em, 2px);
    }

    .card-line .subject {
        font-size: round(down, 1.25em, 2px);
    }

.card-story {
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    padding: round(down, 1.25em, 2px);
    /* .text {
      font-size: round(down, 1.125em, 2px);
  } */
}

    .card-story .card-img {
        max-width: round(down, 9.5em, 2px);
        border-radius: 20px;
    }

    .card-story .subject {
        width: 100%;
        padding-bottom: round(down, 0.25em, 2px);
        font-size: round(down, 1.25em, 2px);
        border-bottom: 1px solid #088EED;
    }

.card-plan {
    cursor: default;
}

    .card-plan .card-img .plan-title {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        padding: unset;
        border-bottom: unset;
        transform: translate(-50%, -50%);
    }

        .card-plan .card-img .plan-title .title, .card-plan .card-img .plan-title .text {
            justify-content: center;
        }

            .card-plan .card-img .plan-title .title::before, .card-plan .card-img .plan-title .text::before {
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                transform: skewX(-10deg);
                z-index: -1;
            }

        .card-plan .card-img .plan-title .title {
            min-width: 6em;
            padding: round(down, 0.25em, 2px) 0.75em;
            color: #FF5381;
        }

            .card-plan .card-img .plan-title .title::before {
                background-color: #FFFFFF;
            }

        .card-plan .card-img .plan-title .text {
            min-width: 4em;
            position: absolute;
            top: -1.25em;
            left: -0.25em;
            padding: 0 0.5em;
            color: #FFFFFF;
            z-index: 10;
        }

            .card-plan .card-img .plan-title .text::before {
                background-color: #FF5381;
            }

    .card-plan .plan-title {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0 0 round(down, 1.5em, 2px);
        border-bottom: 1px solid #CCD0D6;
    }

        .card-plan .plan-title .title {
            line-height: 1;
        }

    .card-plan .cont {
        justify-content: flex-start;
        padding: round(down, 1.5em, 2px) 2em;
    }

        .card-plan .cont:not([class^=gap-], [class*=" gap-"]) {
            --gap-x: round(down, 0.75em, 2px);
            --gap-y: round(down, 0.75em, 2px);
        }

    .card-plan .row {
        align-items: flex-start;
        flex-wrap: nowrap;
    }

.card-platform {
    justify-content: center;
    align-items: center;
    aspect-ratio: 16/9;
    background: no-repeat center/cover;
    background-image: url(../images/bg_platform.svg);
    box-shadow: unset;
}

    .card-platform:not([class^=bg-], [class*=" bg-"]) {
        background-color: #CDE8FC;
    }

    .card-platform .title {
        align-self: center;
        height: 100%;
        margin-top: 1em;
    }

    .card-platform .card-footer {
        align-self: flex-end;
        padding: 1em;
        border: unset;
    }

    .card-platform .btn, .card-platform [class^=btn-], .card-platform [class*=" btn-"] {
        width: 100%;
        padding: 0.5em;
    }

.card-img {
    transition: 0.2s;
    overflow: hidden;
}

    .card-img img {
        transition: 0.2s;
    }

    .card-img .mark, .card-img [class^=mark-], .card-img [class*=" mark-"] {
        position: absolute;
        right: 1em;
        bottom: 1em;
    }

@media screen and (max-width: 800px) {
    .card:hover, .card-story:hover {
        transform: translateY(0);
    }

    .card-story {
        gap: 0.75em;
        padding: 1em;
    }

        .card-story .card-img {
            max-width: round(down, 7.5em, 2px);
        }

        .card-story .title {
            font-size: round(down, 1.5em, 2px);
        }

    .card-plan .plan-title {
        padding: 0 0 round(down, 1.5em, 2px);
    }

    .card-plan .cont {
        padding: round(down, 1.5em, 2px);
    }

    .card-plan .text {
        font-size: round(down, 1.125em, 2px);
    }
}
/* mod_card 結束 */
.course-guide {
    display: flex;
    flex-flow: row wrap;
    --gap-x: round(down, 2.5em, 1px);
    --gap-y: round(down, 2.5em, 1px);
    gap: var(--gap-y) var(--gap-x);
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

    .course-guide .list-card, .course-guide .win-card {
        display: flex;
        flex-flow: column;
        background-color: #088EED;
        width: calc(50% - 1.25em);
        height: auto;
        aspect-ratio: 2/1;
        border-radius: 20px;
        overflow: hidden;
    }

        .course-guide .list-card .title, .course-guide .win-card .title {
            font-size: 2em;
        }

        .course-guide .list-card .text, .course-guide .win-card .text {
            display: flex;
            flex-flow: column;
            font-size: round(down, 1.5em, 2px);
        }

            .course-guide .list-card .text span, .course-guide .win-card .text span {
                color: inherit;
            }

    .course-guide .list-card {
        justify-content: flex-start;
        align-items: center;
        padding: 2em;
    }

        .course-guide .list-card::before, .course-guide .list-card::after {
            position: absolute;
            content: "";
            display: block;
            background: no-repeat center/cover;
            width: 34%;
            max-width: 240px;
            height: auto;
            aspect-ratio: 2/1;
            transition: 0.2s;
        }

        .course-guide .list-card::before {
            left: 0;
            bottom: 0;
            background-image: url(../images/course_guide/shape_01.svg);
            transform-origin: left bottom;
        }

        .course-guide .list-card::after {
            top: 0;
            right: 0;
            background-image: url(../images/course_guide/shape_02.svg);
            transform-origin: top right;
        }

        .course-guide .list-card .kid {
            position: absolute;
            left: 0;
            bottom: -24%;
            width: 32%;
            max-width: 250px;
            height: auto;
            aspect-ratio: 25/45;
            transform-origin: left bottom;
            transition: 0.2s;
        }

        .course-guide .list-card .item {
            position: absolute;
            right: -0.5em;
            bottom: -0.5em;
            width: 35%;
            max-width: 250px;
            height: auto;
            aspect-ratio: 25/18;
            transform-origin: right bottom;
            transition: 0.2s;
        }

        .course-guide .list-card .main-title {
            display: flex;
            flex-flow: row nowrap;
            gap: 0.5em;
            justify-content: center;
            align-items: center;
        }

            .course-guide .list-card .main-title .course-icon {
                width: 3em;
                height: auto;
                aspect-ratio: 1/1;
            }

        .course-guide .list-card .title {
            color: #FFFFFF;
        }

        .course-guide .list-card .text {
            justify-content: center;
            align-items: center;
            margin-top: 8%;
            color: #FFFFFF;
        }

    .course-guide .win-card {
        gap: 1em;
        justify-content: center;
        align-items: flex-start;
        background-color: #FFFFFF;
        border: round(down, 0.5em, 2px) solid #F6AC00;
        padding: 2em 2em 2em round(down, 3.5em, 2px);
    }

        .course-guide .win-card .item {
            position: absolute;
            top: 50%;
            right: 0;
            width: 50%;
            max-width: 350px;
            height: auto;
            aspect-ratio: 1/1;
            transform: translateY(-50%);
        }

        .course-guide .win-card:hover {
            background-color: #FFFFEA;
        }

@media screen and (max-width: 1024px) {
    .course-guide .win-card {
        padding: round(down, 1.5em, 2px);
    }
}

@media screen and (max-width: 480px) {
    .course-guide .win-card {
        aspect-ratio: unset;
        padding: 1em;
        border-width: round(up, 0.25em, 2px);
    }

        .course-guide .win-card .title {
            font-size: round(down, 1.75em, 2px);
        }

        .course-guide .win-card .text {
            font-size: round(down, 1.25em, 2px);
        }
}

.course-guide .list-guide {
    display: flex;
    flex-flow: row nowrap;
    gap: round(down, 1.5em, 2px);
    justify-content: flex-start;
    align-items: center;
}

    .course-guide .list-guide .guide-icon {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        width: 6.25em;
        height: 6.25em;
        aspect-ratio: 1/1;
        border-radius: 50%;
    }

        .course-guide .list-guide .guide-icon:not([class^=bg-], [class*=" bg-"]) {
            background-color: #088EED;
        }

        .course-guide .list-guide .guide-icon [class^=icon-], .course-guide .list-guide .guide-icon [class*=" icon-"] {
            background-color: #FFFFFF;
            width: round(down, 4.5em, 2px);
        }

    .course-guide .list-guide .guide-info {
        display: flex;
        flex-flow: column;
        gap: round(down, 0.5em, 2px);
        justify-content: center;
        align-items: flex-start;
    }

    .course-guide .list-guide .title {
        font-size: round(down, 1.5em, 2px);
        line-height: 1.25;
    }

    .course-guide .list-guide .text {
        flex-flow: column;
        font-size: round(down, 1.25em, 2px);
    }

/* mod_course_guide 結束 */
.banner {
    background-color: #00A7AE;
    width: 100%;
    height: auto;
    aspect-ratio: 1920/800;
    overflow: hidden;
}

    .banner:before, .banner::after {
        position: absolute;
        content: "";
        background: no-repeat right/cover;
        z-index: 1;
    }

    .banner:before {
        left: 0;
        bottom: 0;
        background-image: url(../images/win_learning/banner/shape_01_520x640.svg);
        width: 28%;
        height: auto;
        max-width: 520px;
        aspect-ratio: 520/640;
    }

    .banner::after {
        right: 0;
        bottom: 0;
        background-image: url(../images/win_learning/banner/shape_02_640x800.svg);
        width: auto;
        height: 100%;
        aspect-ratio: 640/800;
    }

    .banner .bn-info {
        position: absolute;
        top: 50%;
        left: 0;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        width: 48%;
        height: auto;
        transform: translateY(-50%);
        z-index: 50;
    }

        .banner .bn-info .bn-title {
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 450px;
        }

        .banner .bn-info h1, .banner .bn-info h2 {
            justify-content: center;
            width: 100%;
            white-space: nowrap;
        }

        .banner .bn-info h1 {
            font-size: round(down, 4.5em, 2px);
            letter-spacing: round(down, 0.3em, 2px);
            text-indent: round(down, 0.3em, 2px);
        }

        .banner .bn-info h2 {
            font-size: round(down, 2.5em, 2px);
            letter-spacing: round(down, 0.2em, 2px);
            text-indent: round(down, 0.2em, 2px);
        }

        .banner .bn-info .button-cont {
            margin-top: 1em;
        }

            .banner .bn-info .button-cont [class^=btn-], .banner .bn-info .button-cont [class*=" btn-"] {
                font-weight: 500;
            }

    .banner .bn-visual {
        position: absolute;
        top: 0;
        right: 0;
        width: 56%;
        max-width: 1080px;
        height: 100%;
        z-index: 20;
    }

    .banner .item-cont {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 20;
    }

        .banner .item-cont .cloud {
            position: absolute;
            width: 40%;
            max-width: 420px;
            aspect-ratio: 42/24;
            transition: 0.2s;
            scale: 1;
            animation: item-scale 3s ease-in-out infinite alternate;
        }

        .banner .item-cont .cloud-01 {
            top: -9%;
            right: -10%;
            transform: rotate(-135deg);
        }

        .banner .item-cont .cloud-02 {
            top: -14%;
            right: 8%;
            transform: rotate(-180deg);
            animation-delay: 1.5s;
        }

        .banner .item-cont .cloud-03 {
            right: -5%;
            bottom: 4%;
            transform: scaleX(-1);
            animation-delay: 1.3s;
        }

        .banner .item-cont .cloud-04 {
            right: 10%;
            bottom: -8%;
            animation-delay: 0.7s;
        }

        .banner .item-cont .cloud-05 {
            right: -12%;
            bottom: -10%;
            animation-delay: 1.9s;
        }

        .banner .item-cont .note, .banner .item-cont .pen {
            position: absolute;
            height: auto;
            filter: drop-shadow(0 2px 4px #00000033);
        }

        .banner .item-cont .note {
            bottom: 30%;
            right: 2%;
            width: 24%;
            max-width: 240px;
            height: auto;
            aspect-ratio: 240/188;
            transform: rotate(8deg);
        }

        .banner .item-cont .pen-01 {
            right: 18%;
            bottom: 15%;
            width: 3%;
            max-width: 32px;
            aspect-ratio: 32/128;
            transform: rotate(-35deg);
        }

        .banner .item-cont .pen-02 {
            right: 13%;
            bottom: 18%;
            width: 1.3%;
            max-width: 14px;
            aspect-ratio: 14/180;
            transform: rotate(-15deg);
        }

        .banner .item-cont .pen-03 {
            right: 3%;
            bottom: 18%;
            width: 2%;
            max-width: 20px;
            aspect-ratio: 20/176;
            transform: rotate(24deg);
        }

    .banner .model-cont {
        position: absolute;
        left: 0;
        bottom: 10%;
        width: 74%;
        max-width: 800px;
        height: auto;
        aspect-ratio: 80/72;
        z-index: 20;
    }

        .banner .model-cont .light-cont {
            position: absolute;
            left: -6%;
            bottom: 10%;
            background: no-repeat center/cover;
            background-image: url(../images/win_learning/banner/light_660x600.svg);
            width: 82.5%;
            max-width: 660px;
            height: auto;
            aspect-ratio: 66/60;
        }

        .banner .model-cont .spark-cont {
            position: absolute;
            left: 36%;
            bottom: 6%;
            width: 20%;
            height: 80%;
        }

            .banner .model-cont .spark-cont .spark {
                position: absolute;
                bottom: 0;
                width: 16%;
                max-width: 12px;
                height: 100%;
                filter: blur(1px);
                transform-origin: bottom;
                mix-blend-mode: luminosity;
            }

                .banner .model-cont .spark-cont .spark:before {
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    content: "";
                    display: block;
                    background-color: #FFFFFF;
                    background: radial-gradient(circle, #FFFFFF 0%, #00000011 60%);
                    width: 100%;
                    height: auto;
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    opacity: 0;
                    animation: spark-show 6s ease infinite, spark-move 6s ease infinite;
                }

            .banner .model-cont .spark-cont .spark-01 {
                left: 24%;
                transform: rotate(-15deg);
            }

                .banner .model-cont .spark-cont .spark-01:before {
                    animation-delay: 0s, 0s;
                }

            .banner .model-cont .spark-cont .spark-02 {
                left: 28%;
                transform: rotate(-12.5deg);
            }

                .banner .model-cont .spark-cont .spark-02:before {
                    animation-delay: 1.5s, 1.5s;
                }

            .banner .model-cont .spark-cont .spark-03 {
                left: 32%;
                transform: rotate(-10deg);
            }

                .banner .model-cont .spark-cont .spark-03:before {
                    animation-delay: 2.8s, 2.8s;
                }

            .banner .model-cont .spark-cont .spark-04 {
                left: 36%;
                transform: rotate(-7.5deg);
            }

                .banner .model-cont .spark-cont .spark-04:before {
                    animation-delay: 3.4s, 3.4s;
                }

            .banner .model-cont .spark-cont .spark-05 {
                left: 40%;
                transform: rotate(-5deg);
            }

                .banner .model-cont .spark-cont .spark-05:before {
                    animation-delay: 4.7s, 4.7s;
                }

            .banner .model-cont .spark-cont .spark-06 {
                left: 44%;
                transform: rotate(-2.5deg);
            }

                .banner .model-cont .spark-cont .spark-06:before {
                    animation-delay: 5.1s, 5.1s;
                }

            .banner .model-cont .spark-cont .spark-07 {
                left: 48%;
                transform: rotate(0deg);
            }

                .banner .model-cont .spark-cont .spark-07:before {
                    animation-delay: 6.7s, 6.7s;
                }

            .banner .model-cont .spark-cont .spark-08 {
                left: 52%;
                transform: rotate(2.5deg);
            }

                .banner .model-cont .spark-cont .spark-08:before {
                    animation-delay: 1.1s, 1.1s;
                }

            .banner .model-cont .spark-cont .spark-09 {
                left: 56%;
                transform: rotate(5deg);
            }

                .banner .model-cont .spark-cont .spark-09:before {
                    animation-delay: 2.3s, 2.3s;
                }

            .banner .model-cont .spark-cont .spark-10 {
                left: 60%;
                transform: rotate(7.5deg);
            }

                .banner .model-cont .spark-cont .spark-10:before {
                    animation-delay: 3.7s, 3.7s;
                }

            .banner .model-cont .spark-cont .spark-11 {
                left: 64%;
                transform: rotate(10deg);
            }

                .banner .model-cont .spark-cont .spark-11:before {
                    animation-delay: 4.3s, 4.3s;
                }

            .banner .model-cont .spark-cont .spark-12 {
                left: 68%;
                transform: rotate(12.5deg);
            }

                .banner .model-cont .spark-cont .spark-12:before {
                    animation-delay: 5.9s, 5.9s;
                }

            .banner .model-cont .spark-cont .spark-13 {
                left: 72%;
                transform: rotate(15deg);
            }

                .banner .model-cont .spark-cont .spark-13:before {
                    animation-delay: 6.3s, 6.3s;
                }

        .banner .model-cont .deco-cont {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

            .banner .model-cont .deco-cont .item {
                position: absolute;
                width: 8%;
                max-width: 48px;
                height: auto;
                aspect-ratio: 48/40;
                animation: item-scale 5s ease-in-out infinite alternate, item-rotate 8s ease-in-out infinite alternate;
            }

            .banner .model-cont .deco-cont .item-01 {
                left: 26%;
                bottom: 78%;
            }

            .banner .model-cont .deco-cont .item-02 {
                left: 46%;
                bottom: 68%;
                animation-delay: 0.3s, 0.3s;
                animation-direction: alternate-reverse;
            }

            .banner .model-cont .deco-cont .item-03 {
                right: 26%;
                bottom: 82%;
                animation-delay: 0.7s, 0.7s;
            }

            .banner .model-cont .deco-cont .item-04 {
                right: 34%;
                bottom: 54%;
                animation-delay: 1.5s, 1.5s;
                animation-direction: alternate-reverse;
            }

            .banner .model-cont .deco-cont .item-05 {
                left: 28%;
                bottom: 42%;
                animation-delay: 1.8s, 1.8s;
            }

            .banner .model-cont .deco-cont .item-06 {
                left: 45%;
                bottom: 20%;
                animation-delay: 2.3s, 2.3s;
                animation-direction: alternate-reverse;
            }

        .banner .model-cont .wincloud {
            position: absolute;
            width: 25%;
            max-width: 200px;
            aspect-ratio: 400/232;
            opacity: 0.8;
            filter: drop-shadow(0 2px 4px #00000033);
            animation: item-scale 3s ease-in-out infinite alternate;
        }

        .banner .model-cont .wincloud-01 {
            left: 5%;
            bottom: 56%;
        }

        .banner .model-cont .wincloud-02 {
            right: 4%;
            bottom: 48%;
            animation-delay: 0.7s;
        }

        .banner .model-cont .wincloud-03 {
            left: 28%;
            bottom: 35%;
            animation-delay: 1.5s;
        }

        .banner .model-cont .wincloud-04 {
            left: -2%;
            bottom: 22%;
            animation-delay: 1.9s;
        }

        .banner .model-cont .wincloud-05 {
            right: 8%;
            bottom: -2%;
            z-index: 10;
            animation-delay: 2.3s;
        }

        .banner .model-cont .bn-model {
            position: absolute;
            right: 12%;
            bottom: 4%;
            width: 75%;
            max-width: 600px;
            aspect-ratio: 60/52;
        }

.section .deco-cont {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .section .deco-cont .deco {
        position: absolute;
        width: 8%;
        max-width: 100px;
        height: auto;
        aspect-ratio: 1/1;
    }

    .section .deco-cont .deco-01 {
        top: 10%;
        left: 8%;
    }

    .section .deco-cont .deco-02 {
        top: 9%;
        right: 10%;
    }

    .section .deco-cont .deco-03 {
        left: 10%;
        bottom: 10%;
    }

    .section .deco-cont .deco-04 {
        right: 9%;
        bottom: 9%;
    }

.section .loop-cont {
    width: 100%;
    max-width: calc(1440px + 2em);
}

    .section .loop-cont .swiper-slide.swiper-slide-active .loop-item {
        aspect-ratio: 10/11;
        margin: 0 1em;
    }

        .section .loop-cont .swiper-slide.swiper-slide-active .loop-item .item-img {
            animation: loop-img-scale 0.8s ease infinite alternate;
        }

    .section .loop-cont .swiper-slide.swiper-slide-active .loop-item-01 {
        background-color: #E5F3FD;
        border-color: #45A9F1;
    }

    .section .loop-cont .swiper-slide.swiper-slide-active .loop-item-02 {
        background-color: #E6F6EA;
        border-color: #49BD66;
    }

    .section .loop-cont .swiper-slide.swiper-slide-active .loop-item-03 {
        background-color: #FFEFE5;
        border-color: #FFA366;
    }

    .section .loop-cont .swiper-slide.swiper-slide-active .loop-item-04 {
        background-color: #FFEDF2;
        border-color: #FF91AE;
    }

    .section .loop-cont .loop-item {
        display: flex;
        flex-flow: column;
        gap: 1em;
        justify-content: center;
        align-items: center;
        background-color: #FFFFFF;
        width: calc(100% - 2em);
        height: auto;
        aspect-ratio: 1/1;
        margin: 1em;
        border: 2px solid transparent;
        border-radius: 20px;
        transition: 0.2s;
    }

        .section .loop-cont .loop-item .item-img {
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            background-color: #F6AC00;
            width: round(down, 7.5em, 2px);
            height: auto;
            aspect-ratio: 1/1;
            border-radius: 50%;
        }

            .section .loop-cont .loop-item .item-img [class^=icon-], .section .loop-cont .loop-item .item-img [class*=" icon-"] {
                background-color: #FFFFFF;
                width: round(down, 5em, 2px);
            }

        .section .loop-cont .loop-item .text {
            font-size: round(down, 1.5em, 2px);
        }

    .section .loop-cont .loop-item-01 .item-img {
        background-color: #45A9F1;
    }

    .section .loop-cont .loop-item-02 .item-img {
        background-color: #49BD66;
    }

    .section .loop-cont .loop-item-03 .item-img {
        background-color: #FFA366;
    }

    .section .loop-cont .loop-item-04 .item-img {
        background-color: #FF91AE;
    }

    .section .loop-cont .arrow-cont {
        position: absolute;
        top: 0;
        right: 2.5em;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
        align-items: center;
        width: calc(100% - 5em);
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }

        .section .loop-cont .arrow-cont .loop-arrow {
            top: 2.5em;
            display: block;
            background-color: #CCD0D6;
            background-image: url(../images/icons/right.svg);
            background-size: 0 0;
            width: 5em;
            height: 5em;
            aspect-ratio: 1/1;
            mask: no-repeat center/cover;
            mask-image: url(../images/icons/right.svg);
            transform: translateY(-50%);
        }

    .section .loop-cont.loop-cont-mb {
        display: none;
        flex-flow: row wrap;
        gap: round(down, 2.5em, 2px);
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 520px;
    }

        .section .loop-cont.loop-cont-mb .loop-item {
            gap: 1em;
            width: calc(50% - 1.25em);
            margin: 0;
        }

        .section .loop-cont.loop-cont-mb .loop-arrow {
            position: absolute;
            background-color: #CCD0D6;
            background-size: 0 0;
            mask: no-repeat center/cover;
            z-index: 10;
        }

        .section .loop-cont.loop-cont-mb .loop-arrow-01, .section .loop-cont.loop-cont-mb .loop-arrow-03 {
            left: 50%;
            background-image: url(../images/loop_01_124x24.svg);
            width: 24%;
            max-width: 124px;
            height: auto;
            aspect-ratio: 124/24;
            mask-image: url(../images/loop_01_124x24.svg);
        }

        .section .loop-cont.loop-cont-mb .loop-arrow-02, .section .loop-cont.loop-cont-mb .loop-arrow-04 {
            top: 50%;
            background-image: url(../images/loop_02_24x100.svg);
            width: 5%;
            max-width: 124px;
            height: auto;
            aspect-ratio: 24/100;
            mask-image: url(../images/loop_02_24x100.svg);
        }

        .section .loop-cont.loop-cont-mb .loop-arrow-01 {
            top: 20%;
            transform: translateX(-50%);
        }

        .section .loop-cont.loop-cont-mb .loop-arrow-02 {
            right: 20%;
            transform: translateY(-50%);
        }

        .section .loop-cont.loop-cont-mb .loop-arrow-03 {
            bottom: 20%;
            transform: translateX(-50%) rotate(180deg);
        }

        .section .loop-cont.loop-cont-mb .loop-arrow-04 {
            left: 20%;
            transform: translateY(-50%) rotate(180deg);
        }

.section .win-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border-radius: 20px;
    box-shadow: 0 1px 4px #00000016;
    overflow: hidden;
}

    .section .win-table .tb-row-group {
        display: table-row-group;
        background-color: #FFFFFF;
        width: 100%;
    }

    .section .win-table .tb-row {
        display: table-row;
    }

        .section .win-table .tb-row.th-group {
            display: none;
        }

    .section .win-table .tb-th, .section .win-table .tb-cell {
        display: table-cell;
        width: 25%;
        min-width: 5em;
        height: 5em;
        padding: round(down, 0.75em, 2px);
        font-size: round(down, 1.25em, 2px);
        text-align: var(--text-align, center);
        vertical-align: middle;
        border: 1px solid #E5E7EA;
    }

    .section .win-table .tb-th {
        background-color: #F2F2F299;
        font-weight: 500;
    }

    .section .win-table .title {
        justify-content: center;
        font-size: round(down, 1.25em, 2px);
        text-align: center;
    }

    .section .win-table .text {
        font-size: round(down, 0.8em, 2px);
        text-align: center;
    }

.win-a-cont .card .text, .win-b1-cont .card .text {
    font-size: round(down, 1.25em, 2px);
}

.b1-product-show {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    background: no-repeat center/cover;
    background-image: url(../images/win_learning/view_slide_product_bg.png);
    width: 80%;
    max-width: 960px;
    height: auto;
    aspect-ratio: 1200/640;
}

    .b1-product-show .show-item {
        position: absolute;
        top: 6%;
        display: flex;
        width: 77%;
        border-radius: 8px;
        opacity: 0;
        overflow: hidden;
    }

        .b1-product-show .show-item.active {
            opacity: 1;
        }

@media screen and (max-width: 800px) {
    .b1-product-show {
        width: 100%;
    }

        .b1-product-show .show-item {
            border-radius: 4px;
        }
}

.b1-product-list {
    display: flex;
    flex-flow: row wrap;
    gap: 1em;
    justify-content: center;
    align-items: center;
}

    .b1-product-list .list-item {
        align-self: stretch;
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        align-items: center;
        background-color: var(--item-bg-color, transparent);
        width: calc(33.3333333333% - 0.6666666667em);
        max-width: 400px;
        padding: round(down, 0.75em, 2px);
        border: 2px solid;
        border-color: var(--check-border-color, transparent);
        border-radius: 12px;
        transition: 0.2s;
        cursor: pointer;
    }

        .b1-product-list .list-item:before {
            content: var(--check-icon, "");
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            width: 0;
            height: 0;
            margin-bottom: 4px;
            border-style: solid;
            border-width: round(down, 0.75em, 2px) round(down, 0.625em, 2px) 0;
            border-color: var(--check-color, transparent) transparent transparent;
            transition: 0.2s;
        }

        .b1-product-list .list-item .item-title {
            color: var(--title-color, #F6AC00);
            font-size: round(down, 1.5em, 2px);
            font-weight: 500;
        }

        .b1-product-list .list-item .item-text {
            display: flex;
            flex-flow: row wrap;
            justify-content: start;
            align-items: center;
            color: var(--text-color, #000D1A);
            font-size: 1em;
            text-align: center;
        }

        .b1-product-list .list-item:hover:not(.active) {
            --item-bg-color: #FFFFFF99;
            --check-color: #FFD744;
        }

        .b1-product-list .list-item.active {
            --item-bg-color: #FFFFFF;
            --check-color: #F6AC00;
            --check-border-color: #F6AC00;
        }

@media screen and (max-width: 800px) {
    .b1-product-list .list-item {
        align-items: center;
        width: calc(50% - 0.5em);
        padding: round(down, 0.5em, 2px);
    }

        .b1-product-list .list-item .item-title {
            font-size: round(down, 1.25em, 2px);
        }

        .b1-product-list .list-item .item-text {
            justify-content: center;
            width: 100%;
        }

        .b1-product-list .list-item:hover:not(.active) {
            --item-bg-color: transparent;
        }
}

@media screen and (min-width: 1921px) {
    .banner .bn-info {
        width: 50%;
    }

        .banner .bn-info .bn-title {
            left: unset;
            right: 0;
        }

    .banner .bn-visual {
        width: 50%;
        max-width: unset;
    }
}

@media screen and (max-width: 1280px) {
    .banner .bn-info .bn-title {
        font-size: 13px;
    }

    .section .deco-cont {
        display: none;
    }

    .section .win-a-cont .card.w-33\%, .section .win-b1-cont .card.w-33\% {
        flex: calc(33.3333333333% - var(--gap-x, 1em) * 2 / 3);
        width: calc(33.3333333333% - var(--gap-x, 1em) * 2 / 3);
    }

    .section .list-guide.w-33\% {
        flex: calc(33.3333333333% - var(--gap-x, 1em) * 2 / 3);
        width: calc(33.3333333333% - var(--gap-x, 1em) * 2 / 3);
    }
}

@media screen and (max-width: 1024px) {
    .banner {
        aspect-ratio: 2/1;
    }

    .section .win-b1-cont .card.w-33\% {
        flex: calc(50% - var(--gap-x, 1em) / 2);
        width: calc(50% - var(--gap-x, 1em) / 2);
    }

    .section .list-guide.w-33\% {
        flex: calc(50% - var(--gap-x, 1em) / 2);
        width: calc(50% - var(--gap-x, 1em) / 2);
    }

    .section .loop-cont.loop-cont-web {
        display: none;
    }

        .section .loop-cont.loop-cont-web .arrow-cont .loop-arrow {
            top: 2em;
            width: 4em;
            height: 4em;
        }

            .section .loop-cont.loop-cont-web .arrow-cont .loop-arrow:first-of-type, .section .loop-cont.loop-cont-web .arrow-cont .loop-arrow:last-of-type {
                display: none;
            }

    .section .loop-cont.loop-cont-mb {
        display: flex;
    }
}

@media screen and (max-width: 800px) {
    .banner .bn-info {
        width: 52%;
    }

        .banner .bn-info h1 {
            font-size: 4em;
        }

        .banner .bn-info h2 {
            font-size: round(down, 2.25em, 2px);
            letter-spacing: round(down, 0.275em, 2px);
            text-indent: round(down, 0.275em, 2px);
        }

    .banner .bn-visual {
        width: 48%;
    }

    .banner .item-cont {
        background-size: cover;
    }

        .banner .item-cont .note, .banner .item-cont .pen {
            display: none;
        }

        .banner .item-cont .cloud {
            width: 48%;
        }

    .banner .model-cont {
        width: 94%;
    }

    .section .win-a-cont .row, .section .win-b1-cont .row {
        flex-flow: column;
        align-items: center !important;
    }

    .section .win-a-cont .card.w-33\%, .section .win-b1-cont .card.w-33\% {
        flex: 100%;
        width: 100%;
        max-width: 480px;
    }

    .section .course-guide {
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    .section .win-card {
        width: 100%;
        max-width: 480px;
    }

    .section .list-guide.w-33\% {
        flex: 100%;
        width: 100%;
        max-width: 360px;
    }
}

@media screen and (max-width: 640px) {
    .banner {
        aspect-ratio: 7/8;
    }

        .banner:before {
            content: none;
        }

        .banner .bn-info {
            width: 90%;
            top: 25%;
            left: 5%;
        }

        .banner .bn-visual {
            width: 100%;
        }

        .banner .model-cont {
            left: 6%;
            right: 0;
            bottom: 5%;
        }

    .section {
        /* .win-card {
        aspect-ratio: 5/4;
    } */
    }

        .section .loop-cont.loop-cont-mb {
            gap: 1.5em;
        }

            .section .loop-cont.loop-cont-mb .loop-item {
                aspect-ratio: 9/11;
                width: calc(50% - 0.75em);
            }

            .section .loop-cont.loop-cont-mb .item-img {
                font-size: 12px;
            }

            .section .loop-cont.loop-cont-mb .loop-arrow-01 {
                top: 25%;
            }

            .section .loop-cont.loop-cont-mb .loop-arrow-03 {
                bottom: 25%;
            }

        .section .list-guide {
            font-size: 13px;
        }

        .section .win-table {
            display: flex;
            flex-flow: column;
            gap: round(down, 1.25em, 2px);
            justify-content: center;
            align-items: center;
            box-shadow: unset;
        }

            .section .win-table .th-main, .section .win-table .null-cell {
                display: none;
            }

            .section .win-table .tb-row-group {
                display: table;
                border-radius: 20px;
                box-shadow: 0 1px 4px #00000016;
                overflow: hidden;
            }

            .section .win-table .tb-row.th-group {
                display: table-row;
            }

            .section .win-table .tb-th.cell-32\% {
                width: 32%;
            }

            .section .win-table .tb-th.cell-34\% {
                width: 34%;
            }

            .section .win-table .tb-th.cell-68\% {
                width: 68%;
            }

            .section .win-table .tb-th, .section .win-table .tb-cell, .section .win-table .text {
                font-size: 1em;
            }
}

@media screen and (max-width: 480px) {
    .banner {
        aspect-ratio: 2/3;
    }

        .banner .bn-info {
            top: 28%;
        }
}

@keyframes item-scale {
    0% {
        scale: 1;
    }

    100% {
        scale: 1.05;
    }
}

@keyframes item-rotate {
    0% {
        transform: rotate(0deg);
    }

    33% {
        transform: rotate(60deg);
    }

    33% {
        transform: rotate(-24deg);
    }

    33% {
        transform: rotate(32deg);
    }
}

@keyframes spark-show {
    0% {
        bottom: 0;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        bottom: 100%;
        opacity: 0;
    }
}

@keyframes spark-move {
    0% {
        transform: translateX(-1em);
    }

    33% {
        transform: translateX(1em);
    }

    66% {
        transform: translateX(-1em);
    }

    100% {
        transform: translateX(1em);
    }
}

@keyframes loop-img-scale {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}
/*# sourceMappingURL=win_learning.css.map */