/* tablet - min */
@media(min-width: 768px) {
    /* setting */
    .osm {display: none;}
    .osp {display: block;}
    .ofp {display: block;}
    .ohp {display: none;}

    /* box */
    .box_item.hz {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
    .box_item.hz_at {
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: 0;
    }
    .box_item.hz_at > .txt_box {text-align: left;}

    /* footer */
    footer .gnb {
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
    }
    footer .gnb > li {
        flex-direction: column;
        row-gap: 16px;
    }
    footer .info > p > span:nth-of-type(4)::after {display: none;}
}

/* tablet - max */
@media(min-width: 1024px) {}

/* desktop */
@media(min-width: 1200px) {
    /* setting */
    .osp {display: none;}
    .osd {display: block;}
    .oup {display: none;}
    .ohp {display: block;}

    /* spacing - padding */
    .pt_sp {padding-top: 60px !important;}
    .pb_sp {padding-bottom: 180px !important;}

    /* box */
    .box_wrap {padding-top: 80px;}
    .box_item {
        padding: 120px 0;
        row-gap: 55px;
    }
    .box_item.lg,
    .box_full.lg {
        padding: 150px 0;
    }
    .box_item.xl {
        row-gap: 60px;
        padding: 200px 0;
    }
    .box_item.md {padding: 100px 0;}
    .box_item.hz {grid-template-columns: 1fr 600px;}
    .box_item.hz_at > .txt_box {justify-self: center;}

    /* header */
    header {
        height: 80px;
        border-bottom: 1px solid #D9DBE0;
    }
    header.no_bb {border-bottom: 0;}
    header > nav {padding: 0;}
    header .menu {display: none;}
    header .gnb,
    header .etc {
        display: grid;
    }
    header > nav > h1 > a {width: 140px;}
    header .gnb > li > a:hover > span {color: #3AB3FF;}
    header .etc > a:hover {
        color: #1A1C21;
        background-color: #F5F6F9;
    }
    header .etc > a:nth-of-type(2):hover {
        border-color: #0EA2FF;
        color: #FFF;
        background-color: #0EA2FF;
    }

    /* footer */
    footer > nav {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 90px;
        padding: 80px 0;
    }
    footer .gnb {column-gap: 30px;}
    footer .gnb > li {row-gap: 16px;}
    footer .etc {display: block;}
    footer .info {padding: 80px 0 100px;}
    footer .info > ul {margin-bottom: 16px;}
    footer .info > p > span {font-size: 14px;}
    footer .gnb > li > a:hover,
    footer .gnb > li > a:first-of-type:hover,
    footer .info > ul > li > a:hover {
        color: #3AB3FF;
    }

    /* ieumpay - popup */
    .pay_popup > article {
        max-width: 950px;
        height: 90%;
    }
    .pay_popup > span {
        right: 16px;
        top: 16px;
        background-size: 40px;
    }
}