﻿@media (max-width:1024px) {
.wrap { width: 92%; }


/* header & footer */
#w_header .top .wrap { height: 60px; }
/* 스크롤 고정 — 모바일 헤더 높이 = 상단 60px + 카테고리바(nav.mob) 44px = 104px
   (nav.pc는 모바일에서 전체화면 오버레이라 흐름 높이에 포함되지 않음) */
body.hdr-fixed { padding-top: 104px; }
#w_header .top h1 img { height: 40px; }
#w_header .top .search_box #searchs { width: 135px; font-size:17px; color:#fff; height: 25px; margin: 0; padding: 0; background: transparent; border:none; padding-left: 3px;  }

/* fix_order */
.fix_order { background: rgba(165, 0, 52, 0.9); position: fixed; left: 0; bottom: 0; z-index: 98; width: 100%; }
.fix_order .dc { position: absolute; left: 30px; top: -140px; width: 120px; }
.fix_order .wrap { background-position: left center; background: none; }
.fix_order form { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.fix_order form .name, .fix_order form .tel, .fix_order form .agree, .fix_order form .submit { position: static; }
.main_quick_order input[type=text], .main_quick_order .tel input[type=text] { width: 180px; }

aside.quick_menu { display: none; }
/* Stage 1: 오버레이 슬라이드인 */
#w_header nav.pc { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; display: flex !important; background: rgba(0,0,0,0); backdrop-filter: blur(0px); padding-right: calc(100% - 360px); box-sizing: border-box; align-items: start; justify-content: center; padding-top: 60px; pointer-events: none; transition: background 0.35s ease, backdrop-filter 0.35s ease; }
#w_header nav.pc.on { background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); pointer-events: auto; }

/* Stage 2: 메뉴 패널 슬라이드 애니메이션 (딜레이 0.3s) */
#w_header nav.pc .nav-bar { height:60px; right: calc(100% - 360px); position: absolute; left: 0; top: 0; background:#333 url(/images/logo_pc_color.png) no-repeat 4vw center/auto 40px; transform: translateX(-400px); transition: transform 0.3s cubic-bezier(0.55, 0, 1, 0.45); }
#w_header nav.pc.on .nav-bar { transform: translateX(0); transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; }
#w_header nav.pc .xi-close { position: absolute; top: 0; right: calc(100% - 360px); font-size:30px; color:#fff; width: 50px; height: 60px; display: flex; align-items: center; justify-content: center; transform: translateX(-400px); transition: transform 0.3s cubic-bezier(0.55, 0, 1, 0.45); }
#w_header nav.pc.on .xi-close { transform: translateX(0); transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; }
/* gnb-wrap: 좌측 레드 패널 (50%) */
#w_header nav .gnb-wrap { width:50%; height: calc(100vh - 60px); display: block !important; overflow-y: auto; margin:0; background: rgba(165, 0, 52, 0.9); font-size:16px; transform: translateX(-400px); transition: transform 0.3s cubic-bezier(0.55, 0, 1, 0.45); }
#w_header nav.pc.on .gnb-wrap { transform: translateX(0); transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; }
/* wrap 클래스의 width:1200px/margin:auto 덮어쓰기 */
#w_header nav.pc .gnb-wrap.wrap { width: 100%; margin: 0; }

/* 각 컬럼: 세로 리스트 아이템 */
#w_header nav .gnb-col { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.2); }

/* 메인 메뉴 링크 */
#w_header nav .gnb-top { height: 50px; line-height: 50px; padding: 0 16px; justify-content: flex-start; white-space: nowrap; width: 100%; box-sizing: border-box; }

/* 서브 메뉴: 우측 흰 패널 (50%) */
#w_header nav .gnb-sub { position: fixed !important; left: 50% !important; top: 0px !important; width: 50% !important; height: calc(100vh - 60px); background: #fff; display: none; padding: 0; margin: 0; overflow-y: auto; z-index: 200; }
#w_header nav .gnb-sub li { line-height: 50px; border-bottom: 1px solid rgba(0,0,0,0.1); justify-content: flex-start; padding-left: 16px; }
#w_header nav .gnb-sub li a { color: #222; font-size:1.8rem; }

/* 데스크탑 sub-open 효과 모바일에서 차단 */
#w_header nav.pc::after { display: none; }
#w_header nav.pc.sub-open .gnb-sub { display: none; }

/* nav.mob 배경 */
#w_header nav.mob { background: rgba(165, 0, 52, 0.9); }

#w_header nav.mob ul { width: max-content; justify-content: start; line-height:44px; font-size:16px; padding:0 4vw; white-space: nowrap; }
#w_header nav.mob ul li { margin-right: 20px; }
#w_header nav.mob ul li:last-child { margin-right: 0; }

#w_footer { color:#555; }
#w_footer .bmenu { background: #333; line-height:45px; font-size:14px; }
#w_footer .bmenu a { margin:0 10px 0 10px; color:#949494; }
#w_footer .bmenu a strong { color:#fff; }
#w_footer .addr { margin:60px auto 145px; font-size:13px; line-height:1.8; }
#w_footer .addr .blogo { margin-bottom: 18px; line-height:100%; }
#w_footer .addr .escrow { position: absolute; top:50px; right: 0; opacity: 0.6; }
#w_footer .addr .verify { text-decoration: underline !important; }



/* index */
#main .swiper-slide img { height: auto; min-height:180px; width: 100%; }
#main .swiper-pagination-bullet { width: 10px; height: 10px; }
#main .swiper-pagination-bullet-active { background: #fff; }
#main .swiper-button-next, #main .swiper-button-prev { color:#Fff; opacity: 0; transition:0.5s; }
#main:hover .swiper-button-next, #main:hover .swiper-button-prev { opacity: 1; }

.custom-radio-wrap label.custom-radio { padding:0 10px; }

#prdLine ul.cate li { padding:0 10px; }


#customer .box_1_3, #customer .main_customer { width:25%; }
#customer .cu { width:50%; background-position:0 10px; }
#customer .cu h3, #customer .cu p, #customer .cu span { margin-left: 144px; }



/* product/list */
#product_list .product_list_title { font-size: 28px; margin: 8px 0 30px; }
#product_list .navi select { font-size: 13px; }
#product_list .roll { width: 100%; }

/* product_list_best_products */
.product_list_best_products {
    padding: 40px 4vw;
    width: 100%; 
    box-sizing: border-box;
    margin-top: 0; 
}

/* PC의 560px 고정폭이 그대로 내려오면 폭이 넘치므로 여기서부터는 비율로 */
#product_detail .detail_info .info_left  { width:calc(52% - 20px); }
#product_detail .detail_info .info_right { width:calc(48% - 20px); }
#product_detail .detail_info .info_right .info { width:100%; }
/* 제휴카드/통신결합 — 좁은 폭에서는 선택박스를 한 줄 통째로 쓰고
   "사용 시 월 최대 N원 할인" 안내는 그 아래 줄로. (PC의 37px 줄높이는 옆줄 정렬용이라 여기선 해제) */
#product_detail .card_sale_cal .cc-select { width: 100%; }
#product_detail .card_sale_cal .card_btn_label { margin: 6px 0 0; line-height: 1.6; }
#product_detail .card_sale_cal .fb.card_sale { line-height: 1.6; }
#product_detail .card_sale_cal .fb.card_sale .card_tel { margin-top: 0; }

#product_detail .detail_info .info_right .pk_combine { width: 100%; }

#product_detail .detail_info .info_right .detail_check img { width: 100%; }
 
.pk_combine .shop_btns { width: 100%; box-sizing: border-box; }
.pk_combine .shop_btns li.order { width: 100%; }
.pk_combine .shop_btns li:last-child { margin-right: 0; }

/* 怨듯넻?뺣낫 ?대?吏 ?덈퉬 */
.wrap > div[align="center"] img { width: 100%; height: auto; }

.row { max-width: 100%; }

.event_list .item_right { width:calc(100% - 400px); box-sizing: border-box; }
/* 게시판 카테고리 가로 스크롤 */
#bo_cate { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; cursor: grab; }
#bo_cate::-webkit-scrollbar { display: none; }
#bo_cate ul { display: flex; flex-wrap: nowrap; margin-bottom: 10px; padding-left: 1px; }
#bo_cate ul:after { display: none; }
#bo_cate li { flex: 0 0 auto; }
#bo_cate a { white-space: nowrap; }

.privacy_page h1 { font-size:28px; }

/* 모바일 검색 모달 */
#mob_search_modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; align-items: flex-start; justify-content: center; }
#mob_search_modal.on { display: flex; }
.mob_search_inner { width: 100%; background: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.mob_search_inner form { flex: 1; display: flex; align-items: center; border: 2px solid #333; border-radius: 4px; overflow: hidden; }
.mob_search_inner form input[type="text"] { flex: 1; height: 44px; padding: 0 14px; border: none; outline: none; font-size: 16px; color: #333; }
.mob_search_inner form button[type="submit"] { width: 44px; height: 44px; background: #333; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mob_search_inner form button[type="submit"] img { width: 20px; height: 20px; }
.mob_search_close { width: 36px; height: 36px; background: none; border: none; cursor: pointer; font-size: 22px; color: #555; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }

}

@media (max-width:768px) {

#w_footer .addr .blogo img { height: 60px; }
#w_footer .addr .verify { display: none; }
#w_footer .addr .escrow { top:auto; bottom:0; width: 60px;  }

.fix_order .dc { left:10px;  width: 80px; top:-90px; }
.main_quick_order input[type=text] { width: 80px; }
.main_quick_order .tel input[type=text] { width: 120px; }
.main_quick_order .aggree { width: 180px; }

.prdList li { width: calc((100% - 10px) / 2); }

#prdLine ul.cate { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; gap:4px; }
#prdLine ul.cate::-webkit-scrollbar { display: none; }
#prdLine ul.cate.dragging { cursor: grabbing; user-select: none; }
#prdLine ul.cate li { flex-shrink: 0; }

#customer .wrap { display:flex; flex-wrap:wrap; }
#customer .notice { order:1; padding-right: 20px; box-sizing: border-box; }
#customer .main_customer { order:2; padding-left: 20px; box-sizing: border-box; }
#customer .box_1_3 { width:50%; }
#customer .cu { width:100%; order:3; background-position: 40px 10px;}
#customer .cu h3, #customer .cu p, #customer .cu span { margin-left: 310px; }

/* product/list */
#product_list .product_list_title { font-size: 24px; letter-spacing: -1px; }
#product_list .navi { font-size: 13px; margin-top: 10px; padding-bottom: 10px; }
#product_list .navi select { height: 26px !important; }
#product_list .product_top_rolling li img { width: 100%; height: auto; }

.product_list_best_products h3 { font-size:20px; }

.filter_wrap .filter_first ul li, .filter_wrap .filter_wrap_inner ul li { margin-right: 14px; }
.filter_wrap:after { content:"* 필터 선택 시 해당 조건으로 상품이 검색됩니다."; display: block; margin-top: 10px; font-size:13px; color:#999; }

.main_item ul li.item_wrap { width: calc((100% - 10px) / 2); }

/* s_ad override */
.s_ad h2 { font-size: 28px; line-height: 1.6; }
.s_ad .h2_below { font-size: 18px; }
.s_ad h3 { font-size:24px; }

#product_detail .detail_info .info_left { width:calc(50% - 20px); }
/* big_photo는 style.css에서 width:100% + aspect-ratio + object-fit 으로 이미 반응형.
   여기서 img에 width:100%를 강제하면 세로로 늘어나므로 비율 유지만 시킨다. */
#product_detail .photo .big_photo img { width: auto; max-width: 100%; }
#product_detail .scroller ul li { width:calc(20% - 5px);  }
#product_detail .scroller ul li img { width: 100%; }

#product_detail .detail_info .info_right { width:calc(50% - 20px); }

.event_list .item_left { width:40%; }
.event_list .item_right { width:60%; padding:10px 0 10px 20px;  }
#bo_list .td_name { width: 80px; }

.search_list li { width: 33.3333%; padding:0 10px;}

.privacy_page { font-size: 14px; }
.privacy_page h1 { font-size:24px; padding-top: 40px;  }
.privacy_page .privacy_text h5 { font-size:18px; }



}


@media (max-width:480px) {

    #w_header h1 img { height: 38px; }
    #w_header nav.mob { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; }
    #w_header nav.mob::-webkit-scrollbar { display: none; }
    #w_header nav.mob.dragging { cursor: grabbing; user-select: none; }

    #w_footer .addr .blogo img { height: auto; width: 100%; }
    #w_footer .addr i { display: block; font-size:0; }
    #w_footer .addr .verify { display: inline-block; }
    #w_footer .addr .escrow { top:auto; bottom:0; width: 60px;  }

    .fix_order .dc { width: 50px; top:-60px; }
    .fix_order .wrap { height: 60px; }
    .main_quick_order input[type=text] { font-size:14px; margin-left: 0; }
    .main_quick_order input[type=text]::placeholder { color:#999; }
    .main_quick_order .name input[type=text] { width: 50px; }
    .main_quick_order .tel input[type=text] { width: 90px; }
    .main_quick_order .name label, .main_quick_order .tel label { display: none; }
    .main_quick_order .agree { width: auto; }
    .main_quick_order .agree input { width: 24px; height: 24px; transform: translateY(2px);}
    .main_quick_order .agree label span { display: none; }
    .main_quick_order .submit { width:auto; }
    .main_quick_order input[type=submit] { width: 20px; height:20px; border-radius: 100px; background-position: calc(50% - -2px) -45px; border:10px solid #cc043c; box-sizing: content-box; }

    #dongview_bottom { width:92vw; box-sizing: border-box; }

    #best h2 { font-size:22px; }
    #best h2 span { display: block; }
    .prdList li { width: 100%; } 
    .prdList li h3.title { height:auto !important; }

    #instagram #instafeed li { width: calc((100% - 20px) / 3); margin-right: 10px; margin-bottom: 10px;  }
    #instagram #instafeed li:nth-child(3n) { margin-right:0; }
    #instagram .li2, #instagram .li3 { display: none; }

    #customer .wrap { flex-direction: column; }
    #customer h3 { font-size:24px; }
    #customer .notice { padding-right: 0; }
    #customer .main_customer { padding-left: 0; }
    #customer .box_1_3 { width:100%; }
    #customer .cu { background-position: -40px 10px;}
    #customer .cu h3, #customer .cu p, #customer .cu span { margin-left: 116px; }
    #customer .cu p { font-size:44px; }
    #customer .cu span { margin-top:10px; margin-left: 125px;  }

    /* product/list */
    .wrap.navi { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; }
    .navi select { min-width: 0; width: calc(50vw - 60px); font-size: 12px; height: 26px !important; }
    #product_list .product_list_title { font-size: 24px; letter-spacing: -0.5px; }
    #product_list .product_top_rolling { margin-bottom: 16px; }

    
    .filter_wrap .filter_first p, .filter_wrap .filter_list p { width: 80px; }
    .filter_wrap .filter_first ul, .filter_wrap .filter_list ul { margin-left: 80px; padding-left: 20px; }
    .filter_wrap .filter_submit_wrap li:first-child { margin-left: 110px; }
    .filter_wrap .filter_submit_wrap .btn_reset::after { margin-left: 13px; }

    .main_item ul li.item_wrap { width: 100%; }

    .sort_radio .left_text, .sort_radio .right_sort_radio { float:none; }
    .sort_radio .right_sort_radio  { margin-top: 10px; }
    .sort_radio .right_sort_radio.design_radio_checkbox li { margin-left: 3px; }
    .sort_radio .design_radio_checkbox ul { display: flex; align-items: center; justify-content: end;}
    .sort_radio .design_radio_checkbox li { float:none; }
    .sort_radio .design_radio_checkbox li:first-child { margin-left: 0 !important; }
    .sort_radio .design_radio_checkbox li:after { margin-left: 3px !important; }

    /* s_ad override */
.s_ad h2 { font-size: 20px; }
.s_ad .h2_below { font-size: 14px; }
.s_ad h3 { font-size:24px; width: 300px; left: 0; margin-left: auto;  }

#product_detail .detail_info { flex-direction: column; gap:40px; }
#product_detail .detail_info .info_left { width:100%; }

#product_detail .detail_info .info_right { width:100%; }

/* 怨듯넻?뺣낫 ?대?吏 ?덈퉬 */
.wrap > div[align="center"] img { width: 100%; height: auto; }

.product_tab li a, .product_tab li.on { font-size:14px; }

/* ===== buy.php 諛섏쓳??===== */
.row { max-width: 100%; }
.apply_form_wrap { margin: 15px 0 30px; }
.tbl_wrap_new dt { float: none; width: 100%; padding: 10px 10px 4px; font-size: 14px; border-bottom: none; }
.tbl_wrap_new dd { float: none; width: 100%; padding: 8px 10px 12px; box-sizing: border-box; }
.tbl_wrap_new .pimg { float: none; width: 100%; text-align: center; margin: 0 0 12px 0; }
.tbl_wrap_new .pimg img { width: 180px; margin: 0 auto; }
.tbl_wrap_new .ptt { float: none; width: 100%; margin: 0; font-size: 15px; }
.tbl_wrap_new .ptt strong { font-size: 22px; }
.apply_form_wrap input[type="text"] { width: 100% !important; box-sizing: border-box; }
.apply_form_wrap textarea { width: 100% !important; box-sizing: border-box; }
.tbl_wrap_new .input { width: 100%; }
.tbl_wrap_new textarea.short { width: 100%; }
.giftbx_wrap ul { height: 220px; }
.giftbx_wrap li { margin: 12px 14px; }

.check_tt { padding: 0 4%;}
.buy_bnr h2 { font-size:28px; }


.event_list .bx-wrapper .bx-pager { bottom: 10px; }
.event_list .item_left { width:100%; }
.event_list .item_right { width:100%; padding:10px 0 40px;  }

/* review_list 게시판 모바일 */
#bo_list .tbl_wrap thead th:nth-child(1),
#bo_list .tbl_wrap thead th:nth-child(4),
#bo_list .tbl_wrap thead th:nth-child(5) { display: none; }
#bo_list .tbl_wrap .td_num { display: none; }
#bo_list .tbl_wrap .td_name { display: none; }
#bo_list .tbl_wrap .td_thumb { width: 90px; padding: 8px 6px !important; }
#bo_list .tbl_wrap .td_thumb img { width: 78px; height: 78px; object-fit: cover; display: block; }
#bo_list .tbl_wrap .td_subject { padding: 8px; vertical-align: middle; }
#bo_list .tbl_wrap .td_subject div { padding: 0; line-height: 1.6; }
#bo_list .tbl_wrap .td_subject a:not(.bo_cate_link) { font-size: 14px; }
#bo_list .tbl_wrap .bo_cate_link { font-size: 12px; }
#bo_list .tbl_wrap .td_subject img { width: 60px; }
#bo_list .tbl_wrap .td_meta { display: flex; gap: 10px; margin-top: 4px; font-size: 12px; color: #999; }


.search_list li { width: 50%;  padding:0; }

}
