@charset "utf-8";
/*************/
/* 가로 1310 */
/*************/
@media (max-width: 1310px) {
}
/*************/
/* 가로 1210 */
/*************/
@media (max-width: 1210px) {
}
/*************/
/* 가로 1010 */
/*************/
@media (max-width: 1010px) {
}
/*************/
/* 가로 810 */
/*************/
@media (max-width: 810px) {
    /*************/
    /* Common */
    /*************/
    /* center zone */
    .center-zone {
        padding-left: var(--size-smaller);
        padding-right: var(--size-smaller);
        width: 100%;
    }
    /* list */
    .list-zone.four > li {
        width: calc(50% - var(--size-smallest));
    }
}
/*************/
/* 가로 600 */
/*************/
@media (max-width: 600px) {
    :root {
        /* font */
        --font-smaller: 10px;
        --font-small: 11px;
        --font-medium: 12px;
        --font-large: 13px;
        --font-larger: 15px;
        --font-largest: 17px;
        --font-big: 19px;
        --font-bigger: 21px;
        --font-biggest: 25px;
        --font-great: 27px;
        --font-greater: 29px;
        --font-greatest: 31px;
        --font-huge: 35px;
        /* size */
        --size-smaller: 14px;
        --size-small: 18px;
        --size-medium: 20px;
        --size-large: 30px;
        --size-larger: 40px;
        --size-largest: 50px;
        --size-big: 100px;
        --size-bigger: 150px;
        --size-biggest: 200px;
        --size-huge: 300px;
        --size-calc: 100px;
    }
    /* 설명을 위한 컨텐트 박스 */
    .content-box > div {
        flex-flow: column;
        align-items: flex-start;
    }
    /* button */
    /* button zone */
    .button-zone {
        margin-top: var(--size-medium);
    }
    /* form zone */
    .form-zone > ul > li .button-box:not(.address) {
        flex-flow: column;
    }
    .form-zone > ul > li .button-box:not(.address) .button {
        margin-top: var(--size-tiny);
        margin-left: 0px;
    }
    /* popup */
    .popup-wrap .popup {
        top: 0px;
        left: 0px;
        width: 100%;
        max-height: 100%;
        transform: none;
        overflow-y: auto;
    }
    .popup-wrap .popup .contents {
        width: 100%;
    }
    /* phone box */
    .phone-box {
        flex-flow: column;
        justify-content: flex-start;
    }
    .phone-box .select-box {
        margin-right: 0px;
        margin-bottom: var(--size-smallest);
    }
    /* pagination */
    .pagination {
        margin: calc(var(--size-small) + (-1 * var(--size-tiny))) calc(-1 * var(--size-tiny)) calc(-1 * var(--size-tiny)) calc(-1 * var(--size-tiny))
    }
    /* list */
    .list-zone {
        margin: calc(-1 * var(--size-tiny) / 2);
    }
    .list-zone > li {
        margin: calc(var(--size-tiny) / 2);
    }
    .list-zone.two > li {
        width: calc(50% - var(--size-tiny));
    }
    .list-zone.three > li,
    .list-zone.four > li {
        width: calc(100% - var(--size-tiny));
    }
    /* tab menu */
    .tab-menu {
        margin: calc(-1 * var(--size-tiny)) calc(-1 * (1.5 * var(--size-tiny)));
    }
    .tab-menu.box {
        padding: calc(0.8 * var(--size-smallest));
    }
    .tab-menu > li {
        margin: var(--size-tiny) calc(1.5 * var(--size-tiny));
    }
    .tab-menu.box > li > a {
        padding-top: calc(0.8 * var(--size-smallest));
        padding-bottom: calc(0.8 * var(--size-smallest));
    }
}