@charset "utf-8";

/* 쇼핑몰 PC 스킨을 화면 너비에 맞춰 줄인다. */

img {max-width:100%;height:auto}

@media (max-width:1200px) {
    #hd, #wrapper, #ft {min-width:0}
    #hd_pop,
    #hd_wrapper,
    #tnb .inner,
    #gnb .gnb_wrap,
    #container_wr,
    #ft_wr,
    #hd_menu,
    #container,
    #ft_copy,
    #sit_ov_wrap {
        width:100%;
        max-width:1200px
    }
    #container {padding:0 15px}
    #hd_wrapper, #tnb .inner, #ft_copy {padding-left:15px;padding-right:15px}
    #ft_wr {display:block;box-sizing:border-box;padding:40px 15px}
    .hd_sch_wr {width:auto;max-width:445px}
    #hd_sch #sch_str {width:calc(100% - 60px)}
    #hd_menu button#menu_open {width:28%}
    .hd_menu {width:72%}
    #category .cate_li_1 {width:33.333%}
    #sit_pvi_big img {width:100%;max-width:500px}
    .tbl_head01, .tbl_frm01, #sod_bsk_list, #sod_fin_list {overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:1024px) {
    #aside {display:none}
    #container .is_index {margin-left:0}
    #sit_pvi, #sit_pvi_big, #sit_pvi_thumb, #sit_ov {float:none;width:100%}
    #sit_ov {min-height:0;padding-top:20px}
    #sit_ov_wrap {padding:25px 15px}
    #sit_ov_btn button, #sit_btn_alm {width:calc(50% - 5px);margin-right:5px}
    .sod_left, .sod_right, #smb_my_ov, #smb_my_list {float:none;width:100%;margin:0 0 20px}
    #sod_frm #od_name,
    #sod_frm #od_tel,
    #sod_frm #od_hp,
    #sod_frm #od_pwd,
    #sod_frm #od_b_name,
    #sod_frm #od_b_tel,
    #sod_frm #od_b_hp,
    #sod_frm #ad_subject,
    #sod_frm #od_hope_date {width:100%}
    .lists-row .col-row-4,
    .lists-row .col-row-5,
    .lists-row .col-row-6,
    .lists-row .col-row-7,
    .lists-row .col-row-8,
    .lists-row .col-row-9,
    .lists-row .col-row-10 {width:33.333%}
    .smt_10 .sct_li, .smt_20 .sct_li {width:calc(33.333% - 15px)}
    .smt_40 .sct_img img, .sct_10 .sct_img img, .smt_10 .sct_img img {width:100%;height:auto}
    #main_bn .owl_pager li {width:33.333%;font-size:1em}
}

@media (max-width:768px) {
    #tnb .inner {height:auto}
    #hd_qnb {float:none;text-align:left}
    #hd_qnb li {float:none;display:inline-block;margin:8px 8px 8px 0;padding-right:8px;font-size:1em}
    #logo {float:none;padding:15px 0 0;text-align:center}
    #logo img {max-height:48px;width:auto}
    .hd_sch_wr {float:none;width:100%;max-width:none;margin:10px 0 0;padding:10px 0}
    .hd_login {position:static;text-align:center;margin:0 0 15px}
    .hd_login>li {float:none;display:inline-block;vertical-align:middle}
    .hd_login>li.shop_login {margin-top:0}
    #hd_menu button#menu_open, .hd_menu {float:none;width:100%}
    .hd_menu li {width:33.333%;padding:8px 0}
    #category .cate_li_1 {width:50%;min-height:0}
    #ft_wr .ft_cnt {width:100%;float:none;padding:0 0 20px}
    #ft_copy {padding:15px}
    .lists-row .col-row-3,
    .lists-row .col-row-4,
    .lists-row .col-row-5,
    .lists-row .col-row-6,
    .lists-row .col-row-7,
    .lists-row .col-row-8,
    .lists-row .col-row-9,
    .lists-row .col-row-10 {width:50%}
    .smt_10 .sct_li, .smt_20 .sct_li {width:calc(50% - 15px)}
    #sod_bsk #sod_bsk_tot li, #sod_frm #sod_bsk_tot li {float:none;width:100%;text-align:left}
    #sod_bsk_list #mod_option_frm,
    #sod_list #cp_frm,
    #sod_frm_pay #sc_coupon_frm,
    #sod_frm_pay #od_coupon_frm {
        width:calc(100% - 30px);
        left:15px;
        right:auto;
        margin-left:0
    }
    #od_pay_sl .lb_icon {width:100%;float:none}
    #mb_login_od_wr, #mb_login_notmb, #validation_check {width:auto;max-width:360px}
    #wrapper_title {font-size:1.5em;padding:15px 0}
    #side_menu {
        top:auto;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        height:calc(56px + env(safe-area-inset-bottom));
        padding:0 0 env(safe-area-inset-bottom);
        border-left:0;
        border-top:1px solid #e5e7ea;
        box-shadow:0 -1px 8px rgba(0,0,0,0.08);
        z-index:200
    }
    #quick {
        position:static;
        top:auto;
        left:auto;
        display:flex;
        width:100%;
        height:56px;
        margin:0
    }
    #quick li {flex:1}
    #quick li button {
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        width:100%;
        height:56px;
        font-size:1.15em;
        gap:2px
    }
    #quick .qk_tit {
        display:block;
        position:static;
        padding:0;
        background:none;
        color:#666;
        font-size:10px;
        line-height:1.2;
        white-space:nowrap;
        border-radius:0
    }
    #quick .qk_tit:after {display:none}
    #tabs_con {position:absolute;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom));height:auto}
    .side_mn_wr1, .side_mn_wr2, .side_mn_wr3, .side_mn_wr4,
    .qk_con {
        width:100%;
        height:auto;
        max-height:70vh;
        border-left:0;
        border-top:1px solid #e5e7ea;
        box-shadow:0 -4px 16px rgba(0,0,0,0.12)
    }
    .qk_con_wr {position:relative;height:auto;max-height:70vh}
    .qk_con_wr .con_close {position:absolute;top:0;right:0;width:44px;height:44px}
    #stv_pg {position:static;width:100%}
    #top_btn {
        position:fixed;
        top:auto;
        bottom:calc(68px + env(safe-area-inset-bottom));
        left:auto;
        right:12px;
        width:42px;
        height:42px;
        margin:0;
        border:1px solid #e5e7ea;
        border-radius:50%;
        background:#fff;
        color:#333;
        z-index:201
    }
    #ft {padding-bottom:calc(72px + env(safe-area-inset-bottom))}
    .sanchor li {width:33.333%}
    #sit_inf_open th, #sit_inf_open td {display:block;width:100%}
}

@media (max-width:480px) {
    .hd_menu li {width:50%}
    #category .cate_li_1 {width:100%}
    #main_bn .owl_pager {display:none}
    #sit_ov_btn button, #sit_btn_alm {width:100%;margin:0 0 8px}
    .lists-row .col-row-2 {width:50%}
    #sod_frm .tbl_frm01 td .addr input,
    #sod_frm_taker .tbl_frm01 td .addr input {width:100%;margin-bottom:6px}
    #sod_frm .tbl_frm01 td .addr button,
    #sod_frm_taker .tbl_frm01 td .addr button,
    #sod_frm .tbl_frm01 td .btn_address {width:100%}
}