@charset "utf-8";

:root {
    --animate-delay: 0.25s;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--color-bg-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    overflow: auto;
}

.backtoschool_ .course-card-date_time,
.course-card-date_time>* {
    font-size: 12px;
}

.kongfixed {
    z-index: 100;
    position: fixed;
    bottom: 20px;
    right: 30px;
    left: auto;
    top: auto;
}

.kongfixed span {
    padding: 12px 18px;
    font-size: 14px;
    color: #fff;
    background-color: #e94941;
    border-radius: 100px;
    margin-bottom: 9px;
}

.kongfixed span:hover {
    background-color: #CB2219;
}

.kongfixed3 {
    z-index: 100;
    position: fixed;
    bottom: 20px;
    right: 30px;
    left: auto;
    top: auto;
}

.kongfixed3 span {
    padding: 12px 18px;
    font-size: 14px;
    color: #fff;
    background-color: #e94941;
    border-radius: 100px;
    margin-bottom: 9px;
}

.under_Sticky {
    display: flex;
    align-items: center;
    height: 66px;
    background-color: #000;
    border-top: 1px solid #454545;
}

.link-button_buy {
    opacity: 1;
    border-radius: .25rem;
    padding: 6px 36px;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    font-size: 18px;
    border: 1px solid rgba(255, 255, 255, .38);
    color: #000;
    font-weight: 500;
    transition: all ease-in-out .2s;
}

.link-button_buy:hover {
    transform: unset;
    opacity: .8;
}

.Wrapper-toeic-c_r {
    position: relative;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.Wrapper-toeic-c .swiper {
    position: unset;
}

.Wrapper-toeic-c .swiper-button-prev,
.Wrapper-toeic-c .swiper-container-rtl .swiper-button-next {
    left: calc(50% - 690px);
    top: 60%;
    right: auto;
}

.Wrapper-toeic-c .swiper-button-prev:after,
.Wrapper-toeic-c .swiper-container-rtl .swiper-button-next:after {
    content: "\f137";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: rgba(255, 255, 255, .7);
    padding-left: 0px;
    font-size: 27px;
    width: auto;
    height: auto;
}

.Wrapper-toeic-c .swiper-button-next,
.Wrapper-toeic-c .swiper-container-rtl .swiper-button-prev {
    right: calc(50% - 690px);
    top: 60%;
    left: auto;
}

.Wrapper-toeic-c .swiper-button-next:after,
.Wrapper-toeic-c .swiper-container-rtl .swiper-button-prev:after {
    content: '\f138';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: rgba(255, 255, 255, .7);
    padding-right: 0px;
    font-size: 27px;
    width: auto;
    height: auto;
}

/* ---------------------------------------- */
.content {
    background-image: url(../img/top_bg.gif);
}

.Wrapper-backtoschool-topbanner {
    height: 100vh;
    position: relative;
}

.Wrapper-backtoschool-topbanner .backtoschool_bg {
    position: absolute;
    top: .3vw;
    left: calc(50% - 661.5px);
}

.Wrapper-backtoschool-topbanner .backtoschool_bg_pencil_left {
    position: absolute;
    top: .5vw;
    left: -1vw;
    opacity: .54;

}

.Wrapper-backtoschool-topbanner .backtoschool_bg_pencil_right {
    position: absolute;
    top: .5vw;
    right: 0vw;
    opacity: .54;

}

.Wrapper-backtoschool-topbanner .backtoschool_board {
    position: absolute;
    top: 178px;
    left: calc(50% - 357px);
}

.Wrapper-backtoschool-topbanner .backtoschool_blackzone_1 {
    position: absolute;
    top: 95px;
    left: calc(50% - 188.5px);
    width: 377px;
    background-color: #090909;
    text-align: center;
    padding: 7px 3px 7px 15px;
    letter-spacing: 9px;
}

.Wrapper-backtoschool-topbanner .backtoschool_blackzone_2 {
    position: absolute;
    top: 600px;
    left: calc(50% - 450px);
    width: 900px;
    background-color: none;
    text-align: center;
    padding: 14px 50px 14px;
}

.Wrapper-backtoschool-topbanner .backtoschool_blackzone_2 img {
    width: 520px;
}

.Wrapper-backtoschool-topbanner .explain_ {
    margin-top: 0px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .87);
    font-size: 16px;
}

.Wrapper-backtoschool-topbanner .backtoschool_blackzone_1 p {
    font-size: 18px;
}

.Wrapper-backtoschool-topbanner .backtoschool_shiny_1 {
    position: absolute;
    top: 27px;
    left: calc(50% - 36px);
    mix-blend-mode: screen;
    width: 340px;
}

.Wrapper-backtoschool-topbanner .backtoschool_shiny_2 {
    position: absolute;
    top: 218px;
    left: calc(50% - 473px);
    mix-blend-mode: screen;
    width: 270px;
}

.Wrapper-backtoschool-topbanner .backtoschool_shiny_3 {
    position: absolute;
    top: 340px;
    left: calc(50% - -161px);
    mix-blend-mode: screen;
    width: 150px;
}

.Wrapper-backtoschool-topbanner .backtoschool_object01 {
    position: absolute;
    top: 190px;
    left: calc(50% - 355px);
}

.Wrapper-backtoschool-topbanner .backtoschool_object02 {
    position: absolute;
    top: 478px;
    left: calc(50% - 247.5px);
}

.Wrapper-backtoschool-topbanner .backtoschool_object03 {
    display: none;
    position: absolute;
    bottom: calc(50% - 40vh);
    left: calc(50% - 68.5px);
}

@keyframes float {
    from {
        top: 1.9vw;
    }

    to {
        top: 2vw;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }

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

@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scale(0.95);
    }

    50% {
        -webkit-transform: scale3d(1.20, 1.20, 1.20);
        transform: scale3d(1.20, 1.20, 1.20);
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scale(0.95);
    }
}


.Wrapper-backtoschool-topbanner .toeic_downarrow {
    width: 24px;
}

.Wrapper-backtoschool-topbanner .toeic_downarrow {
    position: absolute;
    animation-name: float;
    animation-duration: .3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate-reverse;
}


.Wrapper-toeic-b {
    position: relative;
    width: 100%;
}
.Wrapper-toeic-b h2 {
    border-radius: 5px 5px 0 0;
}

.Wrapper-toeic-b img {
    width: 100%;
    border-radius: 10px 0 0 10px;
    ;
}

.Wrapper-toeic-b .mark_pic {
    position: absolute;
    top: 3vw;
    left: calc(50% - 92.5px);
}

.Wrapper-toeic-b .finger_ {
    /* bottom: -8px;
    right: 4.8vw; */
    width: 79px;
    animation-name: finger_;
    animation-duration: .25s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate-reverse;
}

@keyframes finger_ {
    from {
        bottom: 0px;
        right: 81px;
    }

    to {
        bottom: 4px;
        right: 85px;
    }
}

.Wrapper-toeic-c {
    margin-top: 4vw;

}

.Wrapper-toeic-c .title_ {
    font-weight: 600;
    font-size: 27px;
    color: #f7e572;
    position: relative;
    margin-bottom: 24px;
}

/* .Wrapper-toeic-c .title_::before {
    content: "";
    position: absolute;
    background-color: #f7e572;
    background-position: center;
    height: 1px;
    width: 900px;
    bottom: -3px;
}

.Wrapper-toeic-c .title_::after {
    content: "";
    border: solid #e2cc65;
    border-width: 0 1px 1px 0;
    position: absolute;
    padding: 6px;
    background-color: #3b0303;
    transform: rotate(45deg);
    bottom: -9px;
    left: calc(50% - 9px);
} */

.Wrapper-toeic-c .subtitle_ {
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    position: relative;
    padding-left: 57px;
    margin-bottom: 0;
}

.Wrapper-toeic-c .subtitle_a,
.Wrapper-toeic-c .subtitle_b,
.Wrapper-toeic-c .subtitle_c,
.Wrapper-toeic-c .subtitle_d,
.Wrapper-toeic-c .subtitle_e,
.Wrapper-toeic-c .subtitle_f,
.Wrapper-toeic-c .subtitle_g {
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    position: relative;
    padding-left: 57px;
    margin-bottom: 0;
}

.Wrapper-toeic-c .subtitle_a::before {
    content: "";
    top: -6px;
    left: 12px;
    background-image: url(../img/icon_01.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 36px;
    height: 36px;
}

.Wrapper-toeic-c .subtitle_b::before {
    content: "";
    top: -6px;
    left: 12px;
    background-image: url(../img/icon_02.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 36px;
    height: 36px;
}

.Wrapper-toeic-c .subtitle_c::before {
    content: "";
    top: -6px;
    left: 12px;
    background-image: url(../img/icon_03.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 36px;
    height: 36px;
}

.Wrapper-toeic-c .subtitle_d::before {
    content: "";
    top: -6px;
    left: 12px;
    background-image: url(../img/icon_04.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 36px;
    height: 36px;
}

.Wrapper-toeic-c .subtitle_e::before {
    content: "";
    top: -6px;
    left: 12px;
    background-image: url(../img/icon_05.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 36px;
    height: 36px;
}

.Wrapper-toeic-c .subtitle_f::before {
    content: "";
    top: -6px;
    left: 12px;
    background-image: url(../img/icon_06.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 36px;
    height: 36px;
}

.Wrapper-toeic-c .subtitle_g::before {
    content: "";
    top: -6px;
    left: 12px;
    background-image: url(../img/icon_07.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 36px;
    height: 36px;
}

.Wrapper-toeic-d {
    background-color: #ededed;
}

.Wrapper-toeic-d .title_ {
    font-weight: 600;
    font-size: 24px;
    color: #061023;
}

.Wrapper-toeic-d li {
    font-size: 13px;
    color: #061023;
}

.Wrapper-toeic-d p {
    font-size: 16px;
    color: #061023;
}

/*-----------------影音課程----------*/
.col-group-video-card_2 {
    border: 1px solid #e2e2e2;
    padding: 9px;
    border-radius: .25rem;
    background-color: #fafafa;
}

.col-group-video-card a {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    align-items: stretch;
    word-wrap: break-word;
    background-clip: border-box;
    border-radius: 0.25rem;
    height: auto;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    transition: .15s;
}

.col-group-video-card_2 a {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    align-items: stretch;
    word-wrap: break-word;
    background-color: unset;
    background-clip: border-box;
    border: 0px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    height: auto;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    transition: .15s;
}

.col-group-video-card_2 a[class*="_bg_gray"] {
    background-color: #f8f8f8;
}

.col-group-video-card-img {
    height: 169px;
    overflow: hidden;
    border-radius: 3px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    transition: .25s;
    background-color: var(--color-bg-secondary-3);
}

.col-group-video-card-img_2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 161px;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    transition: .25s;
    background-color: var(--color-bg-secondary-3);
}

.col-group-video-card-fico {
    color: #9b9b9b;
    font-size: 18px;
    transition: color .2s ease-in-out;
    padding-right: 6px;
}

.col-group-video-card-score {
    font-size: 12px;
    color: #a1a1a1;
}

.col-group-video-card-head {
    position: relative;
}

.col-group-video-card-body {
    -ms-flex: 1;
    flex: 1;
    height: 100%;
}

/*-----------------影音課程↑↑↑↑----------*/
.link-button {
    display: block;
    opacity: 1;
    border-radius: 50rem;
    padding: 12px 18px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    transition: all ease-in-out .2s;
}

.link-button[class*="red_"] {
    background-color: #c23046;
}

.link-button[class*="orange_"] {
    background-color: #ed803f;
}

.link-button[class*="yellow_"] {
    background-color: #e5b237;
}

.link-button[class*="green_"] {
    background-color: #6b9d49;
}

.link-button[class*="blue_"] {
    background-color: #499a9d;
}

.link-button[class*="indigo_"] {
    background-color: #497e9d;
}

.link-button[class*="purple_"] {
    background-color: #78499d;
}

.link-button:hover {
    color: #fff;
    opacity: .8;
}

.col-group-video-card_2 .link-button_w {
    opacity: 1;
    margin: 6px 0 0;
    border-radius: .25rem;
    padding: 15px 0px;
    background-color: #2b2b2b;
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    transition: all ease-in-out .2s;
}

.col-group-video-card_2 .link-button_w.click_ {
    opacity: .8;
    background-color: #c2c2c2;
    ;
    color: #000;
}

.col-group-video-card_2 .link-button_w:hover {
    transform: unset;
    opacity: .8;
}

.Wrapper-toeic-c .link-button_more {
    opacity: 1;
    border-radius: 50rem;
    padding: 9px 20px;
    background-color: #939393;
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    transition: all ease-in-out .2s;
}

.Wrapper-toeic-c .link-button_more:hover {
    opacity: .87;
}

.link-button_ok {
    opacity: 1;
    width: 100%;
    border-radius: 25rem;
    padding: 9px 20px;
    background-color: #112c61;
    text-align: center;
    font-size: 16px;
    border: 1px solid #112c61;
    color: #fff;
    font-weight: 500;
    transition: all ease-in-out .2s;
}

.link-button_ok:hover {
    opacity: .87;
    color: #fff;
}

/* -------------------------- */
.modal-header.kong {
    background-color: #fd4b6e;
}

.modal-header.kong p {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.modal-body.kong .h3 {
    color: #fd4b6e;
    font-weight: 600;
    font-size: 24px;
}

.modal-body.kong p {
    color: #fd4b6e;
    font-size: 16px;
}

.modal-body.kong li {
    color: #061023;
    font-size: 15px;
}

.modal-body.kong .coupon_ {
    font-size: 18px;
    padding: 0 3px;
}

@media (max-width: 1399.98px) {
    .col-group-video-card-img_2 {
        height: 137px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_blackzone_2 {
        position: absolute;
        top: 550px;
        left: calc(50% - 450px);
        width: 900px;
        text-align: center;
        padding: 14px 50px 14px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_bg_pencil_right,
    .Wrapper-backtoschool-topbanner .backtoschool_bg_pencil_left {
        display: none;
    }

    .Wrapper-toeic-c .swiper-button-next,
    .Wrapper-toeic-c .swiper-container-rtl .swiper-button-prev {
        right: calc(50% - 615px);
        top: 60%;
        left: auto;
    }

    .Wrapper-toeic-c .swiper-button-prev,
    .Wrapper-toeic-c .swiper-container-rtl .swiper-button-next {
        left: calc(50% - 615px);
        top: 60%;
        right: auto;
    }

}

@media (max-width: 1199.98px) {
    .Wrapper-backtoschool-topbanner {
        height: 100vh;
    }

    .Wrapper-toeic-b .mark_pic {
        position: absolute;
        top: 4vw;
        left: calc(50% - 7vw);
        width: 16vw;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_blackzone_2 {
        position: absolute;
        top: 550px;
        left: calc(50% - 355px);
        width: 710px;
        text-align: center;
        padding: 14px 20px 14px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_blackzone_2 img {
        width: 420px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_object03 {
        position: absolute;
        top: calc(100vh - 180px);
        left: calc(50% - 68.5px);
    }

    .Wrapper-backtoschool-topbanner .backtoschool_bg {
        position: absolute;
        top: 1vw;
        left: calc(50% - 50vw);
        width: 99vw;
    }

    .Wrapper-toeic-c .swiper-button-next,
    .Wrapper-toeic-c .swiper-container-rtl .swiper-button-prev {
        right: calc(50% - 505px);
        top: 60%;
        left: auto;
    }

    .Wrapper-toeic-c .swiper-button-prev,
    .Wrapper-toeic-c .swiper-container-rtl .swiper-button-next {
        left: calc(50% - 505px);
        top: 60%;
        right: auto;
    }

    .col-group-video-card-img_2 {
        height: 110px;
    }

    .Wrapper-toeic-b .h5 {
        font-size: 16px;
    }

}

@media (min-width: 992px) {

    .col-group-video-card_2 a:hover {
        /* box-shadow: 0 2px 2px rgba(41, 47, 56, 0.1), 0 4px 4px rgba(41, 47, 56, 0.1), 0 8px 8px rgba(41, 47, 56, 0.1), 0 16px 16px rgba(41, 47, 56, 0.1), 0 32px 32px rgba(41, 47, 56, 0.1); */
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        text-decoration: none;
    }

    .col-group-video-card_2 a:hover>.col-group-video-card-head .col-group-video-card-img_2::after {
        content: "";
        opacity: 0;
    }

    .col-group-video-card_2 a:hover>.col-group-video-card-head .col-group-video-card-img_2 {
        background-size: 105%;
        filter: brightness(.8);
        -webkit-filter: brightness(.8);
    }
}

@media (max-width: 991.98px) {
    .Wrapper-backtoschool-topbanner .backtoschool_object03 {
        position: absolute;
        top: none;
        bottom: calc(50vw - -285px);
        left: calc(50% - 68.5px);
    }

    .Wrapper-backtoschool-topbanner {
        min-height: 750px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_object01 {
        position: absolute;
        top: 190px;
        left: calc(50% - 332.5px);
        width: 665px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_object02 {
        position: absolute;
        top: 460px;
        left: calc(50% - 247.5px);
        width: 495px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_shiny_1 {
        position: absolute;
        top: 51px;
        left: calc(50% - 20px);
        mix-blend-mode: screen;
        width: 290px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_shiny_2 {
        position: absolute;
        top: 253px;
        left: calc(50% - 405px);
        mix-blend-mode: screen;
        width: 178px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_shiny_3 {
        position: absolute;
        top: 347px;
        left: calc(50% + 162px);
        mix-blend-mode: screen;
        width: 120px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_blackzone_2 {
        position: absolute;
        top: 560px;
        left: calc(50% - 210px);
        width: 420px;
        text-align: center;
        padding: 0;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_blackzone_2 img {
        width: 420px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_board {
        position: absolute;
        top: 188px;
        left: calc(50% - 320px);
        width: 180px;
    }

    .Wrapper-toeic-c .swiper-button-next,
    .Wrapper-toeic-c .swiper-container-rtl .swiper-button-prev,
    .Wrapper-toeic-c .swiper-button-prev,
    .Wrapper-toeic-c .swiper-container-rtl .swiper-button-next {
        display: none;
    }

    .Wrapper-toeic-c {
        margin-top: 5vw;
    }

    .Wrapper-toeic-b p.subtitle_ {
        font-size: 14px;
        color: #061023;
    }

    .Wrapper-toeic-b .title_ {
        font-size: 20px;
        margin-bottom: 18px;
    }

    .Wrapper-toeic-c .title_ {
        font-size: 20px;
        font-weight: 500;
    }

    .Wrapper-toeic-b .title_::before {
        width: 260px;
    }

    .Wrapper-toeic-c .title_::before {
        width: 325px;
    }

    .col-group-video-card-img_2 {
        height: 178px;
    }

    @keyframes float {
        from {
            top: 4vw;
        }

        to {
            top: 4.3vw;
        }
    }

}

@media (max-width: 767.98px) {

    .col-group-video-card-img_2 {
        height: 128px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_object01 {
        position: absolute;
        top: 190px;
        left: calc(50% - 250px);
        width: 500px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_object02 {
        position: absolute;
        top: 400px;
        left: calc(50% - 200px);
        width: 400px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_shiny_1 {
        position: absolute;
        top: 86px;
        left: calc(50% - 20px);
        mix-blend-mode: screen;
        width: 220px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_shiny_2 {
        position: absolute;
        top: 240px;
        left: calc(50% - 305px);
        mix-blend-mode: screen;
        width: 130px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_shiny_3 {
        position: absolute;
        top: 300px;
        left: calc(50% + 106px);
        mix-blend-mode: screen;
        width: 120px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_board {
        position: absolute;
        top: 175px;
        left: calc(50% - 259px);
        width: 162px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_blackzone_2 {
        position: absolute;
        top: 463px;
        left: calc(50% - 160px);
        width: 320px;
        text-align: center;
        font-size: 20px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_blackzone_2 img {
        width: 320px;
    }

    .Wrapper-backtoschool-topbanner .explain_ {
        margin-top: 0px;
        margin-bottom: 0;
        color: rgba(255, 255, 255, .87);
        font-size: 18px;
        line-height: 1.8;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_object03 {
        position: absolute;
        top: 635px;
        left: calc(50% - 68.5px);
    }

    .Wrapper-toeic-b .mark_pic {
        position: absolute;
        top: calc(50% - 6.4vw);
        left: calc(50% - 10vw);
        width: 20vw;
    }

    .Wrapper-toeic-b img {
        width: 100%;
        border-radius: 9px 9px 0px 0px;
    }

    .Wrapper-toeic-c .title_ {
        font-size: 27px;
        font-weight: 500;

    }

    .link-button_buy {
        padding: 9px 30px;
        width: 100px;
    }
}

@media (max-width:575.98px) {
    .Wrapper-toeic-b h2 {
        border-radius: 0 0 0 0;
    }

    .Wrapper-toeic-b .h5 {
        font-size: 1.2rem;
    }

    .kongfixed {
        z-index: 100;
        position: fixed;
        bottom: 20px;
        right: 6px;
        left: auto;
        top: auto;
    }

    .kongfixed span {
        padding: 9px 12px;
        font-size: 14px;
        color: #fff;
        background-color: #e94941;
        border-radius: 100px;
        margin-bottom: 9px;
    }

    .Wrapper-backtoschool-topbanner {
        height: calc(100vh - 60px);
        min-height: 660px;
    }

    .link-button_buy {
        padding: 5px 30px;
        line-height: 2;
    }

    .modal-header.kong p {
        color: #fff;
        font-size: 24px;
        font-weight: 600;
    }

    .modal-body.kong .h3 {
        font-size: 24px;
    }

    .modal-body.kong p {
        font-size: 20px;
    }

    .col-group-video-card-img_2 {
        height: 100%;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_blackzone_1 p {
        font-size: 15px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_blackzone_1 {
        position: absolute;
        top: 36px;
        left: calc(50% - 150px);
        width: 300px;
        background-color: #090909;
        text-align: center;
        padding: 7px 3px 7px 15px;
        letter-spacing: 7px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_object01 {
        position: absolute;
        top: 120px;
        left: calc(50% - 175px);
        width: 350px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_object02 {
        position: absolute;
        top: 270px;
        left: calc(50% - 170px);
        width: 340px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_board {
        position: absolute;
        top: 106px;
        left: calc(50% - 178px);
        width: 120px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_blackzone_2 {
        position: absolute;
        top: 324px;
        left: calc(50% - 160px);
        width: 320px;
        text-align: left;
        padding: 0;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_shiny_1 {
        position: absolute;
        top: 33px;
        left: calc(50% - 25px);
        mix-blend-mode: screen;
        width: 180px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_shiny_2 {
        position: absolute;
        top: 146px;
        left: calc(50% - 195px);
        mix-blend-mode: screen;
        width: 110px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_shiny_3 {
        position: absolute;
        top: 195px;
        left: calc(50% + 71px);
        mix-blend-mode: screen;
        width: 90px;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_object03 {
        position: absolute;
        top: 555px;
        bottom: unset;
        left: calc(50% - 68.5px);
        display: block;
    }

    .Wrapper-backtoschool-topbanner .explain_ {
        font-size: 16px;
        line-height: 1.8;
    }

    .Wrapper-toeic-b .mark_pic {
        position: absolute;
        top: calc(50% - 10.4vw);
        left: calc(50% - 15vw);
        width: 30vw;
    }

    .Wrapper-toeic-c .title_ {
        font-size: 24px;
    }

    @keyframes float {
        from {
            top: 5vw;
        }

        to {
            top: 5.3vw;
        }
    }

}

@media (max-width:360px) {
    .Wrapper-backtoschool-topbanner .explain_ {
        margin-top: 0px;
        color: #061023;
        font-size: 13px;
        font-weight: 500;
    }

    .Wrapper-toeic-b {
        padding-top: 54px;
        margin-top: -40px;
        background: url(../img/bg_2.webp) scroll no-repeat -81px 0px / 330%;
    }

    .Wrapper-backtoschool-topbanner .backtoschool_object02 {
        width: 300px;
        left: calc(50% - 150px);
    }

    .Wrapper-toeic-b .title_::before,
    .Wrapper-toeic-c .title_::before,
    .Wrapper-toeic-b .title_::after,
    .Wrapper-toeic-c .title_::after {
        content: none;
    }
}