/* BASIC css start */
.main {overflow:hidden;}

/* pc 메인 배너 */
#main_bnr_swiper_pc { margin-bottom:100px; --main-content-left:max(24px, calc((100% - 1416px) / 2)); --main-progress-width:min(440px, 30vw); } 
#main_bnr_swiper_pc .swiper-slide { position:relative; } 
#main_bnr_swiper_pc .swiper-slide a { display:block; position:relative; height:clamp(560px, 41.67vw, 800px); overflow:hidden; background:#f2f2f2; }
#main_bnr_swiper_pc .swiper-slide a:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.08) 52%, rgba(0,0,0,0) 100%); pointer-events:none; }
#main_bnr_swiper_pc .swiper-slide a .txt_wrap { z-index:1; } 
#main_bnr_swiper_pc .swiper-slide a img { display:block; width:100%; height:100%; object-fit:cover; } 
#main_bnr_swiper_pc .swiper-slide a .txt_wrap {position:absolute; top:17%; left:var(--main-content-left);} 
#main_bnr_swiper_pc .swiper-slide a .txt_wrap p { color:#fff; } 
#main_bnr_swiper_pc .swiper-slide a .txt_wrap .txt_01 { font-size: 1.25vw; font-weight: 600; line-height: 29.95px; margin-bottom: 40px; } 
#main_bnr_swiper_pc .swiper-slide a .txt_wrap .txt_02 { font-size: 3.3vw; font-weight: 800; line-height: 4.1vw; margin-bottom: 20px; } 
#main_bnr_swiper_pc .swiper-slide a .txt_wrap .txt_03 { font-size: 1.25vw; font-weight: 600; line-height: 29.95px; } 
#main_bnr_swiper_pc .swiper-button-prev { left:30px; } 
#main_bnr_swiper_pc .swiper-button-next { right:30px; } 
#main_bnr_swiper_pc .swiper-pagination { position:absolute; bottom:23% !important; left:var(--main-content-left); width:var(--main-progress-width); height:4px; background:rgb(129 129 129 / 50%); z-index:2; } 
#main_bnr_swiper_pc .swiper-pagination .swiper-pagination-progressbar-fill { background: #000; } 
#main_bnr_swiper_pc .btn_wrap { position:absolute; bottom:25%; left:calc(var(--main-content-left) + var(--main-progress-width) + 18px); z-index:2; } 
.control_btn { position:relative; } 
.control_btn .control { position:absolute; left:0; top:0; display:none; } 
.control_btn .control.on { display:block; } 
.control_btn .control a { cursor: pointer; display: flex; transition: all .1s; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: #757575; } 
.control_btn .control a img { width:10px; } 
.control_btn .pause_btn.control a img { width:8px; } 

/* mo 메인 배너 */
#main_bnr_swiper_mo { position: relative; margin: 0; overflow: hidden; } 
#main_bnr_swiper_mo .swiper-slide { position:relative; }
#main_bnr_swiper_mo .swiper-slide a { display:block; position:relative; height:112vw; max-height:500px; overflow:hidden; background:#f2f2f2; } 
#main_bnr_swiper_mo .swiper-slide a:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.12) 54%, rgba(0,0,0,0) 78%); pointer-events:none; }
#main_bnr_swiper_mo .swiper-slide a img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } 
#main_bnr_swiper_mo .swiper-slide a .txt_wrap { position:absolute; z-index:1; left:24px; right:24px; bottom:42px; text-align:left; } 
#main_bnr_swiper_mo .swiper-slide a .txt_wrap p { color:#fff; } 
#main_bnr_swiper_mo .swiper-slide a .txt_wrap .txt_01 { font-size:13px; font-weight:650; line-height:1.4; margin-bottom:14px; letter-spacing:.04em; } 
#main_bnr_swiper_mo .swiper-slide a .txt_wrap .txt_02 { font-size:30px; font-weight:800; line-height:1.25; margin-bottom:14px; letter-spacing:-.045em; word-break:keep-all; } 
#main_bnr_swiper_mo .swiper-slide a .txt_wrap .txt_03 { font-size:14px; font-weight:500; line-height:1.55; word-break:keep-all; } 
#main_bnr_swiper_mo .swiper-button-prev { left: 0; } 
#main_bnr_swiper_mo .swiper-button-next { right: 0; } 


/* 모바일 주요 카테고리 */
.ico_wrap { position:relative; padding:22px 16px 30px; overflow:hidden; background:#fff; }
.ico_wrap ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ico_wrap ul li { width:auto; text-align:center; }
.ico_wrap ul li a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 6px; border:1px solid #e4e4e4; border-radius:4px; background:#fff; box-sizing:border-box; }
.ico_wrap ul li a p { margin:0; text-align:center; font-size:12px; line-height:1.3; font-weight:600; color:#333; word-break:keep-all; }


/* 상품 롤링 */
#pd_swiper{padding: 0;}
#pd_swiper .swiper-slide {font-size:0;}
#pd_swiper .pd_bnr {position: relative;width: 49.5% !important;display:inline-block;vertical-align:top;margin-right:1.5%;aspect-ratio:1 / 1;background:#f5f5f5;overflow:hidden;}
#pd_swiper .pd_bnr a {display:block;width:100%;height:100%;}
#pd_swiper .pd_bnr img { display:block;width:100%;height:100%;object-fit:cover; } 
#pd_swiper .txt_wrap {position:absolute; bottom:25px; left:32px;} 
#pd_swiper .txt_wrap p { color:#fff; } 
#pd_swiper .txt_wrap .txt_01 { font-size:16px; font-weight:400; line-height:1.45; text-align:left; margin-bottom:10px; } 
#pd_swiper .txt_wrap .txt_02 { font-size:22px; font-weight:700; line-height:1.38; margin-bottom:10px; word-break:keep-all; } 
#pd_swiper .txt_wrap .txt_03 { font-size:16px; font-weight:400; line-height:1.5; } 
#pd_swiper .item-list { width: 24% !important; margin-right:1%; display:inline-block; position:relative; vertical-align:top;} 
#pd_swiper .item-list:last-child {margin-right:0;}
#pd_swiper .item-list.flexed { display: inline-block; align-items: center; gap: 8px; } 
#pd_swiper .item-list.flexed .thumb {}
#pd_swiper .item-list.flexed .thumb img{}
#pd_swiper .item-list.flexed .prd-info {padding: 16px 8px 0;width: 100%;box-sizing:border-box;}
#pd_swiper .item-list.flexed .prd-info .prd-wish .my-wish-list{position:absolute; top:0; right:0;}
#pd_swiper .item-list.flexed .prd-info .prd-brand a {font-size: 16px;font-weight: bolder;margin-bottom: 8px;} 
#pd_swiper .item-list.flexed .prd-info .prd-name { margin-bottom: 10px; } 
#pd_swiper .item-list.flexed .prd-info .prd-name a { font-size: 14px; } 
#pd_swiper .item-list.flexed .prd-info .dc_per { font-size: 16px; margin-right: 10px; } 
#pd_swiper .item-list.flexed .prd-info .consumer { font-size: 13px; margin-right: 10px; } 
#pd_swiper .item-list.flexed .prd-info .normal { font-size: 18px; } 
#pd_swiper .item-list.flexed .prd-info .normal b { font-size:13px; } 
#pd_swiper .item-list.flexed .prd-info .prd-color { display:none; } 
#pd_swiper .item-list.flexed .prd-info .prd-ico { display:none; } 
#pd_swiper .swiper-pagination { background: rgba(0, 0, 0, .3); width: 49%; top: auto; right:0; bottom:37px !important; height:4px;}
#pd_swiper .swiper-pagination .swiper-pagination-progressbar-fill { background: #000; } 
#pd_swiper .item-list.flexed .thumb a.soldout { font-size: 12px;}

/* 탭 롤링 */
#tab_swiper { margin: 0 0 25px; } 
#tab_swiper .swiper-slide { width: auto !important; } 
#tab_swiper .swiper-slide a {display: inline-block;font-size: 15px;font-weight: 400;color: #000;padding: 12px 13.5px;white-space: pre;border: 1px solid #ddd;border-radius: 30px;line-height: 1;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;} 
#tab_swiper .swiper-slide.swiper-slide-thumb-active a { color: #fff; background: var(--point-color2); } 
.tab_cont .item-wrap { width: 100%; }

/* 티슈도리 바로가기 - 이미지 없이 텍스트 카드로 구성 */
.sub_bnr_wrap { position:relative; padding-bottom:0; margin-bottom:72px; }
.sub_bnr_wrap .cont_tit { width:min(1416px, calc(100% - 48px)); margin:0 auto 18px; }
.sub_bnr_wrap #sub_bnr_swiper { width:min(1416px, calc(100% - 48px)); margin:0 auto; padding:0; position:static; overflow:hidden; }
.sub_bnr_wrap #sub_bnr_swiper .swiper-wrapper { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; width:100% !important; transform:none !important; }
.sub_bnr_wrap #sub_bnr_swiper .swiper-slide { width:auto !important; height:auto; margin-right:0 !important; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-card { min-height:160px; border:1px solid #e2e2df; background:#f5f5f3; box-sizing:border-box; transition:background-color .25s ease, border-color .25s ease; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-contact { background:#efefec; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-zerodot { background:#e9e9e5; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-esg { background:#edf2ee; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-mobile-only { display:none; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-card a { display:flex; flex-direction:column; justify-content:space-between; min-height:160px; padding:24px 28px; box-sizing:border-box; color:#111; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-no { font-size:12px; line-height:1.4; font-weight:700; letter-spacing:.08em; color:#777; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-arrow { font-size:23px; line-height:1; font-weight:400; transition:transform .25s ease; }
.sub_bnr_wrap #sub_bnr_swiper .bnr_txt { margin:0; color:#111; }
.sub_bnr_wrap #sub_bnr_swiper .bnr_txt p { margin:0 0 8px; font-size:22px; line-height:1.25; font-weight:750; letter-spacing:-.04em; word-break:keep-all; }
.sub_bnr_wrap #sub_bnr_swiper .bnr_txt span { display:block; max-width:320px; font-size:14px; line-height:1.65; font-weight:400; color:#666; word-break:keep-all; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-card:hover { background:#151515; border-color:#151515; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-card:hover a,
.sub_bnr_wrap #sub_bnr_swiper .shortcut-card:hover .bnr_txt,
.sub_bnr_wrap #sub_bnr_swiper .shortcut-card:hover .bnr_txt p { color:#fff; }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-card:hover .shortcut-no,
.sub_bnr_wrap #sub_bnr_swiper .shortcut-card:hover .bnr_txt span { color:rgba(255,255,255,.64); }
.sub_bnr_wrap #sub_bnr_swiper .shortcut-card:hover .shortcut-arrow { transform:translate(4px,-4px); }
body .sub_bnr_wrap #sub_bnr_swiper .swiper-pagination { background:rgba(0,0,0,.3); width:88%; top:auto; left:50%; transform:translateX(-50%); height:4px; display:none; }
body .sub_bnr_wrap #sub_bnr_swiper .swiper-pagination .swiper-pagination-progressbar-fill { background:#000; }
.sub_bnr_wrap .arrow_wrap { display:none; }
.sub_bnr_wrap .arrow_wrap div { width:42px; height:42px; border-radius:50%; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.08); pointer-events:auto; }
.sub_bnr_wrap .arrow_wrap .swiper-button-prev { left:0; }
.sub_bnr_wrap .arrow_wrap .swiper-button-next { right:0; }
.sub_bnr_wrap .arrow_wrap .swiper-button-prev img,
.sub_bnr_wrap .arrow_wrap .swiper-button-next img { width:100%; height:100%; object-fit:contain; }



@media (max-width: 1024px) {
    #main_bnr_swiper_pc .swiper-slide a .txt_wrap .txt_01 { font-size: 24px; } 
    #main_bnr_swiper_pc .swiper-slide a .txt_wrap .txt_02 { font-size: 30px; line-height:1.5; } 
    #main_bnr_swiper_pc .swiper-slide a .txt_wrap .txt_03 { font-size: 24px; }
}

/* 태블릿 모바일 */
@media (max-width: 768px) {
    /* 헤더 */
    body #header {position: fixed; width: 100%; top: 0; z-index: 10;}
    /* 메인 첫 화면에서도 모바일 헤더는 블랙 로고/아이콘을 고정 사용 */
    #header .headerTnb .tnbLeft a img,
    #header .headerBottomRight a img {display:inline-block;}
    #header .headerTnb .tnbLeft a img.main-icon,
    #header .headerBottomRight a img.main-icon {display:none;}
    #header.fixed {background:#fff;}

    /* 상품 롤링 */
    #pd_swiper {padding:0 6px 13px;}
    #pd_swiper .txt_wrap {left:20px; right:20px; bottom:22px;}
    #pd_swiper .txt_wrap .txt_01 {font-size:13px; margin-bottom:8px;}
    #pd_swiper .txt_wrap .txt_02 {font-size:22px; line-height:1.42; margin-bottom:8px;}
    #pd_swiper .txt_wrap .txt_03 {font-size:14px; line-height:1.5;}
    #pd_swiper .pd_bnr {width: 100% !important; display:block; margin-bottom:25px;}

    /* 모바일 프로모션 배너 가독성 보정: 업소용(01)은 원본 유지, 홍보용/압축티슈만 아주 약한 블랙 딤드 */
    #pd_swiper .pd_bnr a { position:relative; }
    #pd_swiper .pd_bnr a[data-category-name="홍보용물티슈"]::after,
    #pd_swiper .pd_bnr a[data-category-name="압축티슈"]::after {
        content:"";
        position:absolute;
        inset:0;
        background:rgba(0,0,0,.12);
        z-index:1;
        pointer-events:none;
    }
    #pd_swiper .pd_bnr .txt_wrap { z-index:2; }
    #pd_swiper .item-list { width: 100% !important; margin-bottom: 12px; display:block; }
    #pd_swiper .item-list.flexed { display:flex; align-items: center; gap: 8px; }
    #pd_swiper .item-list.flexed .thumb {width:80px;flex-shrink: 1;} 
    #pd_swiper .item-list.flexed .thumb img{height:100px;}
    #pd_swiper .item-list.flexed .prd-info {position: relative;padding: 0;width: calc(100% - 80px);}
    #pd_swiper .item-list.flexed .prd-info .prd-brand a {font-size:14px;}
    #pd_swiper .swiper-pagination { background: rgba(0, 0, 0, .3); width: 88%; top: auto; left: 50%; right:auto; bottom:0 !important; transform: translateX(-50%); height:4px;}
    #pd_swiper .swiper-button-prev, 
    #pd_swiper .swiper-button-next {display:none;}
    
    /* 탭 롤링 */
    #tab_swiper { margin: 0 15px 25px; } 
    #tab_swiper .swiper-slide a {font-size:14px;}
    #tab_swiper .swiper-slide.swiper-slide-thumb-active a { font-weight: 800;}
    
    /* 티슈도리 바로가기 */
    .sub_bnr_wrap { margin-bottom:18px; padding-bottom:0; }
    .sub_bnr_wrap .cont_tit { width:auto; margin:0 24px 14px; }
    .sub_bnr_wrap #sub_bnr_swiper { width:calc(100% - 48px); margin:0 24px; overflow:visible; }
    .sub_bnr_wrap #sub_bnr_swiper .swiper-wrapper { grid-template-columns:1fr; gap:10px; }
    .sub_bnr_wrap #sub_bnr_swiper .shortcut-mobile-only { display:block; }
    .sub_bnr_wrap #sub_bnr_swiper .shortcut-card,
    .sub_bnr_wrap #sub_bnr_swiper .shortcut-card a { min-height:136px; }
    .sub_bnr_wrap #sub_bnr_swiper .shortcut-card a { padding:18px 20px; }
    .sub_bnr_wrap #sub_bnr_swiper .bnr_txt p { font-size:20px; margin-bottom:6px; }
    .sub_bnr_wrap #sub_bnr_swiper .bnr_txt span { font-size:13px; line-height:1.5; }
    .sub_bnr_wrap #sub_bnr_swiper .shortcut-no { font-size:11px; }
    .sub_bnr_wrap #sub_bnr_swiper .shortcut-arrow { font-size:21px; }
    .sub_bnr_wrap .arrow_wrap { display:none; }
    body .sub_bnr_wrap #sub_bnr_swiper .swiper-pagination { display:none; }
    
}
/* BASIC css end */