:root {
    --color-000: #000000;
    --color-222: #222222;
    --color-272931: #272931;
    --color-333D4B: #333d4b;
    --color-3F4147: #3f4147;
    --color-4E4E56: #4e4e56;
    --color-5B6270: #5b6270;
    --color-62667C: #62667c;
    --color-8E8E8E: #8e8e8e;
    --color-858E9F: #858e9f;
    --color-9798A7: #9798a7;
    --color-919299: #919299;
    --color-D9DCE4: #d9dce4;
    --color-A2A3A7: #a2a3a7;
    --color-B4B5BA: #b4b5ba;
    --color-D9D9D9: #d9d9d9;
    --color-DFDFDF: #dfdfdf;
    --color-D0D2D6: #d0d2d6;
    --color-F0F1F4: #f0f1f4;
    --color-F7F8F9: #f7f8f9;
    --color-FFF6F6: #fff6f6;
    --color-EAEAEA: #eaeaea;
    --color-E9E9E9: #e9e9e9;
    --color-E5E5E5: #e5e5e5;
    --color-EFF8FF: #eff8ff;

    --color-FFF: #ffffff;

    --color-C2850: #1c2850;
    --color-3266C5: #3266c5;
    --color-3E7FF6: #3e7ff6;
    --color-3A5EFF: #3a5eff;
    --color-43A5FF: #43a5ff;

    --color-high-202020: #202020;
    --color-high-2A2A2A: #2a2a2a;
    --color-high-393939: #393939;
    --color-high-666666: #666666;
    --color-high-FD0: #fd0;

    --color-F44C4C: #f44c4c;
}

.base_header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 6rem;
    height: 7.408vw;
    width: 100%;
    min-height: 3.6rem;
    background-color: var(--color-C2850);
}

.high-contrast-mode header {
    background-color: var(--color-high-202020) !important;
    color: var(--color-FFF) !important;
}

.logo {
    display: flex;
    align-items: center;
}
.logo img {
    width: 100%;
    max-width: 20rem;
    height: 5.394vw;
}

.logo h1 {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--color-FFF);
    margin-left: 1rem;
}
.today {
    color: var(--color-FFF);
    font-size: 2rem;
    font-weight: 500;
}

.setting {
    position: absolute;
    right: 1.8rem;
    top: 50%;
    transform: translateY(-50%);
    outline: none;
    width: 3.6rem;
    height: 3.6rem;
}

.setting img {
    width: 100%;
    height: 100%;
}

.barrier_top .barrier_header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 13.122vw;
    max-height: 13.122vw;
    min-height: 8rem;
    border-bottom: 0.1rem solid var(--color-DFDFDF);
    padding: 1.6rem 3.6rem;
}
.barrier_top .barrier_header .arrow_icon {
    width: 7.408vw;
    height: 7.408vw;
    min-height: 4rem;
    min-width: 4rem;
}
.barrier_top .barrier_header h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--color-222);
}
.barrier_top .barrier_header button {
    display: flex !important;
}

.base_header .btn_back {
    position: absolute;
    left: 0;
    top: 0;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.7rem;
    outline: none;
}
.base_header .btn_back img {
    display: block;
    width: 4.2rem;
    height: 4.2rem;
}

/*  */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7.4rem;
    height: 16.667vw;
    background-color: var(--color-FFF);
    filter: drop-shadow(0px -10px 18px rgba(0, 0, 0, 0.06));
}
.high-contrast-mode footer {
    background-color: var(--color-high-393939) !important;
}

.back_button,
.high_del_button,
.barrier_prev,
.barrier_next,
.barrier_home {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 3vw; */
    border: 1px solid var(--color-EAEAEA);
    font-size: 3.2rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    background-color: var(--color-FFF);
    border-radius: 10rem;
    width: 26.9vw;
    height: 9.3vw;
    max-width: 29rem;
    max-height: 10rem;
    min-width: 6rem;
    min-height: 3.6rem;
    white-space: nowrap;
}

.high-contrast-mode .back_button,
.high-contrast-mode .high_del_button {
    background-color: var(--color-high-202020) !important;
    border: 0.3rem solid var(--color-high-666666) !important;
    color: var(--color-FFF) !important;
}
.high-contrast-mode .action_home_button {
    background-color: var(--color-000) !important;
    border: 0.3rem solid var(--color-high-FD0) !important;
    color: var(--color-high-FD0) !important;
}

.barrier_next {
    background-color: var(--color-C2850);
    color: var(--color-FFF);
}
.high-contrast-mode .barrier_prev {
    background-color: var(--color-high-2A2A2A) !important;
    border: 0.3rem solid var(--color-high-666666) !important;
    color: var(--color-FFF) !important;
}
.high-contrast-mode .barrier_prev img,
.high-contrast-mode .barrier_next img {
    filter: brightness(0) invert(1) !important;
}
.high-contrast-mode .barrier_next {
    background-color: var(--color-high-666666) !important;
    border: 0.3rem solid var(--color-FFF) !important;
    color: var(--color-FFF) !important;
}
.barrier_home {
    color: var(--color-222);
    border: 0.1rem solid var(--color-E5E5E5);
    max-width: 27.6rem;
}
.high-contrast-mode .barrier_home {
    background-color: var(--color-high-202020) !important;
    border: 0.3rem solid var(--color-high-FD0) !important;
    color: var(--color-high-FD0) !important;
}

.barrier_action {
    max-width: 27.6rem;
}
.back_button img,
.barrier_prev img,
.barrier_next img {
    width: 3.4rem;
    height: 3rem;
    margin-right: 3vw;
}
.barrier_prev img {
    margin-right: 1.4815vw;
}
.barrier_next img {
    margin-right: 0;
    margin-left: 1.4815vw;
}
.high-contrast-mode .back_button img {
    filter: brightness(0) invert(1) !important;
}

.action_button,
.action_home_button,
.payment-button,
.action_select,
.barrier_del,
.barrier_del_high {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 2.3vw; */
    border: none;
    font-size: 3.2rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.06);
    background-color: var(--color-3E7FF6);
    color: var(--color-FFF);
    border-radius: 10rem;
    width: 26.9vw;
    height: 9.3vw;
    /* max-width: 29rem; */
    padding: 0 4rem;
    max-height: 10rem;
    min-width: 6rem;
    min-height: 3.6rem;
    white-space: nowrap;
}
.high-contrast-mode .action_button,
.high-contrast-barrier-mode .barrier_del {
    background-color: var(--color-high-FD0) !important;
    color: var(--color-000) !important;
}
.barrier_del_high {
    background-color: var(--color-000);
    border: 0.3rem solid var(--color-000);
}
.high-contrast-barrier-mode .barrier_del_high {
    background-color: var(--color-000);
    border: 0.3rem solid var(--color-high-666666);
}
.payment-button,
.action_select {
    flex: 1;
    margin-left: 1.4rem;
    font-family: Pretendard;
}
.high-contrast-mode .payment-button {
    background-color: var(--color-high-FD0);
    color: var(--color-000);
}
.barrier_free_wrap .payment-button {
    width: 100% !important;
}

.footer_icon {
    width: 4rem;
    height: 4rem;
    margin-right: 2.037vw;
}

.bannel {
    position: relative;
    width: 100%;
    padding-bottom: calc((260 / 1080) * 100%);
    outline: none;
}
.bannel_txt {
    position: absolute;
    top: 50%;
    left: 0;
    margin-left: 13.4357vw;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    color: var(--color-FFF);
}
.bannel_txt span {
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 2.2161vw;
}
.bannel_txt p {
    font-size: 5.2rem;
    font-weight: 700;
}

.error_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 37.1vw;
    text-align: center;
}
.error_box img {
    width: 11.2vw;
    height: 11.2vw;
    max-width: 12rem;
    max-height: 12rem;
    min-width: 6rem;
    min-height: 6rem;
    margin-bottom: 3.75vw;
}
.error_box h3 {
    color: var(--color-222);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4.7vw;
}
.error_box span {
    color: var(--color-8E8E8E);
    font-size: 2.4rem;
    font-weight: 500;
}
/* 
@media (max-width: 1080px) {
    header {
        padding: 1.6rem 6rem;
    }

    .logo h1 {
        font-size: 2.4rem;
        font-weight: 600;
        color: var(--color-FFF);
        margin-left: 1rem;
    }
    footer {
        padding: 0 4rem;
    }
    .bannel_txt span {
        font-size: 1.8rem;
    }
    .bannel_txt p {
        font-size: 4.6rem;
    }
} */

@media (max-width: 850px) {
    .base_header {
        padding: 1.6rem 5.4rem 1.6rem 2rem;
        height: 8.642vw;
    }
    .setting {
        right: 1.6rem;
        width: 3.2rem;
        height: 3.2rem;
    }

    .barrier_top .barrier_header {
        padding: 1.6rem 4rem;
    }
    .barrier_top .barrier_header h3 {
        font-size: 3rem;
    }

    .logo h1 {
        font-size: 1.8rem;
    }
    .today {
        font-size: 1.6rem;
    }
    .bannel_txt span {
        font-size: 1.6rem;
    }
    .bannel_txt p {
        font-size: 4.2rem;
    }
    footer {
        padding: 0 2rem;
    }
    .back_button,
    .high_del_button,
    .barrier_prev,
    .barrier_next,
    .barrier_home {
        font-size: 2.8rem;
    }

    .back_button img,
    .barrier_prev img,
    .barrier_next img {
        width: 3rem;
        height: 2.6rem;
    }

    .action_button,
    .action_home_button,
    .payment-button,
    .action_select,
    .barrier_del,
    .barrier_del_high {
        font-size: 2.8rem;
    }

    .footer_icon {
        width: 3.6rem;
        height: 3.6rem;
    }
    .error_box h3 {
        font-size: 4.2rem;
    }
    .error_box span {
        font-size: 2rem;
    }
}

@media (max-width: 770px) {
    .back_button,
    .high_del_button,
    .barrier_prev,
    .barrier_next,
    .barrier_home {
        font-size: 2.4rem;
    }

    .back_button img,
    .barrier_prev img,
    .barrier_next img {
        width: 2.6rem;
        height: 2.2rem;
    }

    .action_button,
    .action_home_button,
    .payment-button,
    .action_select,
    .barrier_del,
    .barrier_del_high {
        font-size: 2.4rem;
    }

    .footer_icon {
        width: 3.2rem;
        height: 3.2rem;
    }
}
@media (max-width: 700px) {
    .base_header {
        padding: 1.6rem 4.8rem 1.6rem 2rem;
    }
    .setting {
        right: 1.4rem;
        width: 2.8rem;
        height: 2.8rem;
    }

    .logo h1 {
        font-size: 1.8rem;
        font-weight: 500;
    }
    .today {
        font-size: 1.4rem;
    }

    .bannel_txt span {
        font-size: 1.2rem;
    }
    .bannel_txt p {
        font-size: 3.4rem;
        font-weight: 600;
    }
    .back_button,
    .high_del_button,
    .barrier_prev,
    .barrier_next,
    .barrier_home {
        font-size: 2rem;
    }

    .back_button img,
    .barrier_prev img,
    .barrier_next img {
        width: 2.2rem;
        height: 1.8rem;
    }

    .action_button,
    .action_home_button,
    .payment-button,
    .action_select,
    .barrier_del,
    .barrier_del_high {
        font-size: 2rem;
    }

    .footer_icon {
        width: 2.8rem;
        height: 2.8rem;
    }
    .error_box h3 {
        font-size: 3.6rem;
    }
    .error_box span {
        font-size: 1.8rem;
    }
}

@media (max-width: 570px) {
    .base_header {
        padding: 0.6rem 4.2rem 0.6rem 2rem;
    }
    .setting {
        right: 1.2rem;
        width: 2.4rem;
        height: 2.4rem;
    }

    .logo h1 {
        font-size: 1.6rem;
    }
    .today {
        font-size: 1.2rem;
    }

    .bannel_txt span {
        font-size: 1.2rem;
    }
    .bannel_txt p {
        font-size: 2.8rem;
    }

    .back_button,
    .high_del_button,
    .barrier_prev,
    .barrier_next,
    .barrier_home {
        font-size: 1.6rem;
    }

    .back_button img,
    .barrier_prev img,
    .barrier_next img {
        width: 1.8rem;
        height: 1.4rem;
    }

    .action_button,
    .action_home_button,
    .payment-button,
    .action_select,
    .barrier_del,
    .barrier_del_high {
        font-size: 1.6rem;
    }

    .footer_icon {
        width: 2.4rem;
        height: 2.4rem;
    }
    .error_box h3 {
        font-size: 3rem;
    }
    .error_box span {
        font-size: 1.2rem;
    }
}
@media (max-width: 500px) {
    .setting {
        width: 2.2rem;
        height: 2.2rem;
    }
    .today {
        font-size: 1.1rem;
    }
    .barrier_top .barrier_header {
        padding: 1.6rem 2rem;
    }
    .barrier_top .barrier_header h3 {
        font-size: 2.4rem;
    }
}
@media (max-width: 410px) {
    .base_header {
        padding: 0.6rem 3.4rem 0.6rem 2rem;
    }
    .setting {
        right: 1rem;
        width: 1.8rem;
        height: 1.8rem;
    }

    .logo h1 {
        font-size: 1.4rem;
    }
    .today {
        font-size: 1rem;
    }

    .bannel_txt span {
        font-size: 1.1rem;
    }
    .bannel_txt p {
        font-size: 2rem;
    }
    .back_button,
    .high_del_button,
    .barrier_prev,
    .barrier_next,
    .barrier_home {
        font-size: 1.3rem;
    }

    .back_button img,
    .barrier_prev img,
    .barrier_next img {
        width: 1.4rem;
        height: 1rem;
    }

    .action_button,
    .action_home_button,
    .payment-button,
    .action_select,
    .barrier_del,
    .barrier_del_high {
        font-size: 1.3rem;
    }

    .footer_icon {
        width: 1.6rem;
        height: 1.6rem;
    }
    .error_box h3 {
        font-size: 2.6rem;
    }
}

/* shop */

.shop_header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.shop_footer {
    border-top: 2px dotted #3e7ff6;
    padding: 1.6rem;
    font-size: 1.2rem;
}
.shop_footer div {
    padding-top: 0.6rem;
}
.shop_header.line {
    border-bottom: 0.1rem solid #eee;
}
.shop_header .header_inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6.3rem;
    background: var(--color-FFF);
}
.shop_header .header_inner .btn_back,
.shop_header .header_inner .logo {
    position: absolute;
    left: 0;
    top: 0;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.7rem;
}
.shop_header .header_inner .btn_back img {
    display: block;
    width: 4.2rem;
    height: 4.2rem;
}
.shop_header .header_inner .logo img {
    display: block;
    width: 22.8rem;
    height: 4.8rem;
}
.shop_header .header_inner h1 {
    font-size: 3rem;
    font-weight: 600;
    color: var(--color-4E4E56);
}
.shop_header .header_inner .btn_basket,
.shop_header .header_inner .btn_home {
    position: absolute;
    right: 0;
    top: 0;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.7rem;
}
.shop_header .header_inner .btn_basket .count {
    display: none;
    position: absolute;
    right: 1.65rem;
    top: 2.7rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #fa5656;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: -0.05rem;
    color: var(--color-FFF);
}
/* .shop_header .header_inner .btn_basket.counts .count {
    display: flex;
} */
.shop_header .header_inner .btn_basket img,
.shop_header .header_inner .btn_home img {
    display: block;
    width: 5.7rem;
    height: 5.7rem;
}
.shop_header .header_inner .lang {
    position: absolute;
    right: 1.35rem;
    top: 0;
    height: inherit;
    display: flex;
    align-items: center;
}

.shop_header .header_inner .lang button {
    height: inherit;
    display: flex;
    align-items: center;
    padding: 0 1.35rem;
    opacity: 0.4;
}
.shop_header .header_inner .lang button.active {
    opacity: 1;
}
.shop_header .header_inner .lang button img {
    display: block;
    width: 5.4rem;
    height: 5.4rem;
}
.shop_header .header_inner .lang button:first-child {
    margin-right: -0.675rem;
}

@media screen and (min-height: 1400px) {
    /* .shop html {
        font-size: 15px !important;
    }

    .shop .header .header_inner {
        height: 8rem;
    }
    .shop .header .header_inner .btn_basket img {
        width: 3.8rem;
        height: 3.8rem;
    }
    .shop .header .header_inner .btn_basket .count {
        top: 1.8rem;
    } */
}