@charset "utf-8";

@font-face {
  font-family: 'Godo';
  font-style: normal;
  font-weight: 100;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff') format('woff');
}

/* 서브레이아웃 — 좌측 들여쓰기는 media_Query.css #container margin으로만 처리 (이중 여백·겹침 방지) */
#wrapper #container.sub_width { padding-left: 0; min-height: 0; }
#wrapper .sub_width .sub_lnb { display: none; }

/* 초기화 */
html {overflow-y:scroll; scroll-behavior: smooth;}
body {margin:0;padding:0;font-size:100%; font-family:'Malgun Gothic', 'Apple SD Gothic Neo', dotum, sans-serif; _font-family: 'Gowun Dodum', sans-serif; _font-family: 'Godo'; background:#fff; font-weight:300; overflow-x:hidden; overflow-y:auto;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0; word-break: keep-all;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
.msg_sound_only, .sound_only {opacity:0;}
a.btn_b01, .btn_b01 {display: flex !important;}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
ol, ul, li, a {text-decoration: none; color:#000;}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Malgun Gothic', dotum, sans-serif;font-size:1rem;}
input[type="submit"] {cursor:pointer;}
button {cursor:pointer;}

textarea, select {font-family:'Malgun Gothic', dotum, sans-serif;font-size:1rem;}
select {margin:0}
p {margin:0;padding:0; word-break: keep-all;}
pre {overflow-x:scroll;font-size:1.1rem;}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

/* Clear */
.cb {clear: both; display: block; content: '';}

/* Float */
.fl {float: left;}
.fr {float: right;}

/* flex */
.flex {display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox;}

/* display */
.ib {display: inline-block;}
.bl {display: block;}

/* 말 줄임 (1줄~3줄) 가로크기 꼭 지정할 것 */
.ell_1 {overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.ell_2 {overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.ell_3 {overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

/* //////////////////////////// Padding //////////////////////////// */
/* Padding Top */
.pdt_10{padding-top: 10px;}
.pdt_20{padding-top: 20px;}
.pdt_30{padding-top: 30px;}
.pdt_40{padding-top: 40px;}
.pdt_50{padding-top: 50px;}
.pdt_60{padding-top: 60px;}
.pdt_70{padding-top: 70px;}
.pdt_80{padding-top: 80px;}
.pdt_90{padding-top: 90px;}
.pdt_100{padding-top: 100px;}

/* Padding Left */
.pdl_10{padding-left: 10px;}
.pdl_20{padding-left: 20px;}
.pdl_30{padding-left: 30px;}
.pdl_40{padding-left: 40px;}
.pdl_50{padding-left: 50px;}
.pdl_60{padding-left: 60px;}
.pdl_70{padding-left: 70px;}
.pdl_80{padding-left: 80px;}
.pdl_90{padding-left: 90px;}
.pdl_100{padding-left: 100px;}

/* Padding right */
.pdr_10{padding-right: 10px;}
.pdr_20{padding-right: 20px;}
.pdr_30{padding-right: 30px;}
.pdr_40{padding-right: 40px;}
.pdr_50{padding-right: 50px;}
.pdr_60{padding-right: 60px;}
.pdr_70{padding-right: 70px;}
.pdr_80{padding-right: 80px;}
.pdr_90{padding-right: 90px;}
.pdr_100{padding-right: 100px;}

/* Padding bottom */
.pdb_10{padding-bottom: 10px;}
.pdb_20{padding-bottom: 20px;}
.pdb_30{padding-bottom: 30px;}
.pdb_40{padding-bottom: 40px;}
.pdb_50{padding-bottom: 50px;}
.pdb_60{padding-bottom: 60px;}
.pdb_70{padding-bottom: 70px;}
.pdb_80{padding-bottom: 80px;}
.pdb_90{padding-bottom: 90px;}
.pdb_100{padding-bottom: 100px;}


/* //////////////////////////// Margin //////////////////////////// */

/* Margin Top */
.mgt_10{margin-top: 10px;}
.mgt_20{margin-top: 20px;}
.mgt_30{margin-top: 30px;}
.mgt_40{margin-top: 40px;}
.mgt_50{margin-top: 50px;}
.mgt_60{margin-top: 60px;}
.mgt_70{margin-top: 70px;}
.mgt_80{margin-top: 80px;}
.mgt_90{margin-top: 90px;}
.mgt_100{margin-top: 100px;}

/* Margin Left */
.mgl_10{margin-left: 10px;}
.mgl_20{margin-left: 20px;}
.mgl_30{margin-left: 30px;}
.mgl_40{margin-left: 40px;}
.mgl_50{margin-left: 50px;}
.mgl_60{margin-left: 60px;}
.mgl_70{margin-left: 70px;}
.mgl_80{margin-left: 80px;}
.mgl_90{margin-left: 90px;}
.mgl_100{margin-left: 100px;}

/* Margin right */
.mgr_10{margin-right: 10px;}
.mgr_20{margin-right: 20px;}
.mgr_30{margin-right: 30px;}
.mgr_40{margin-right: 40px;}
.mgr_50{margin-right: 50px;}
.mgr_60{margin-right: 60px;}
.mgr_70{margin-right: 70px;}
.mgr_80{margin-right: 80px;}
.mgr_90{margin-right: 90px;}
.mgr_100{margin-right: 100px;}

/* Margin bottom */
.mgb_10{margin-bottom: 10px;}
.mgb_20{margin-bottom: 20px;}
.mgb_30{margin-bottom: 30px;}
.mgb_40{margin-bottom: 40px;}
.mgb_50{margin-bottom: 50px;}
.mgb_60{margin-bottom: 60px;}
.mgb_70{margin-bottom: 70px;}
.mgb_80{margin-bottom: 80px;}
.mgb_90{margin-bottom: 90px;}
.mgb_100{margin-bottom: 100px;}

/* //////////////////////////// Width (%) //////////////////////////// */
.col_10{width:10%;}
.col_20{width:20%;}
.col_30{width:30%;}
.col_40{width:40%;}
.col_50{width:50%;}
.col_60{width:60%;}
.col_70{width:70%;}
.col_80{width:80%;}
.col_90{width:90%;}
.col_100{width:100%;}

.col_15{width:15%;}
.col_25{width:25%;}
.col_45{width:45%;}
.col_75{width:75%;}
.col_85{width:85%;}


/* //////////////////////////// Height (px) //////////////////////////// */
.ht_10 {height: 10px;}
.ht_20 {height: 20px;}
.ht_30 {height: 30px;}
.ht_40 {height: 40px;}
.ht_50 {height: 50px;}
.ht_60 {height: 60px;}
.ht_70 {height: 70px;}
.ht_80 {height: 80px;}
.ht_90 {height: 90px;}
.ht_100 {height: 100px;}

/* //////////////////////////// Top //////////////////////////// */
.t_10 {top: 10px;}
.t_20 {top: 20px;}
.t_30 {top: 30px;}
.t_40 {top: 40px;}
.t_50 {top: 50px;}
.t_60 {top: 60px;}
.t_70 {top: 70px;}
.t_80 {top: 80px;}
.t_90 {top: 90px;}
.t_100 {top: 100px;}
.t_110 {top: 110px;}


/* //////////////////////////// Font //////////////////////////// */
.fw_100 {font-weight: 100;}
.fw_200 {font-weight: 200;}
.fw_300 {font-weight: 300;}
.fw_400 {font-weight: 400;}
.fw_bold {font-weight: bold;}

.fs_36{font-size:36px;}
.fs_24{font-size:24px;}
.fs_18{font-size:18px;}
.fs_16{font-size:14px;}

/* 제목·본문 크기: typography.css (#wrapper)에서 통일. 예외 히어로는 .typo-hero 사용 */
.typo-hero {
  font-size: clamp(2.5rem, 5vw + 1rem, 6rem);
  line-height: 1.05;
  font-weight: 600;
  margin: 0;
}

#wrapper strong {
  font-weight: 600;
}

/* //////////////////////////// Opacity //////////////////////////// */
.opa_1 {opacity: 0.1;}
.opa_2 {opacity: 0.2;}
.opa_3 {opacity: 0.3;}
.opa_4 {opacity: 0.4;}
.opa_5 {opacity: 0.5;}
.opa_6 {opacity: 0.6;}
.opa_7 {opacity: 0.7;}
.opa_8 {opacity: 0.8;}
.opa_9 {opacity: 0.9;}

/* //////////////////////////// Color //////////////////////////// */
.bc_W {background-color: #fff;}
.bc_B {background-color: #000;}

.color_W {color: #fff;}
.color_B {color: #000;}

/* 메인 푸터: 좌측 고정 LNB(#lnb, z-index:9)에 가리지 않도록 위로 표시 */
.shop-footer-holder {
  position: relative;
  z-index: 20;
  clear: both;
  width: 100%;
}

.shop-footer-holder footer.footer {
  display: block;
  visibility: visible;
  position: relative;
}

.footer .sec01 .box2 .footer-bank-account {
  width: 100%;
  line-height: 1.55;
  box-sizing: border-box;
}

/* 푸터 sec01: absolute 아이콘 제거 → flex로 정렬, 라벨·값 한 줄(행 단위) */
.footer .sec01 .footer-sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-weight: 600;
  font-family: var(--font-g, 'Malgun Gothic', sans-serif);
  color: var(--black-color, #212121);
}
.footer .sec01 .footer-sec-title__icon {
  flex-shrink: 0;
  width: 36px;
  height: auto;
  opacity: 0.35;
  position: static !important;
  left: auto !important;
  top: auto !important;
}
.footer .sec01 .footer-note {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  color: #444;
  line-height: 1.45;
}
.footer .sec01 ul.footer-kv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer .sec01 ul.footer-kv li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  line-height: 1.5;
}
.footer .sec01 .footer-kv__k {
  flex: 0 0 auto;
  min-width: 4.5em;
  font-weight: 500;
}
.footer .sec01 .footer-kv__v {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-all;
}

/* ---- 반응형 보강: 레이어 팝업·푸터 ---- */
#hd_pop .hd_pops,
#hd_pop .hd_pops_con {
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box;
}
#hd_pop .hd_pops_footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
#hd_pop .hd_pops_footer button {
  white-space: normal;
  text-align: left;
  line-height: 1.35;
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .footer .wrap1 .sec01 {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 20px 16px !important;
    box-sizing: border-box;
    gap: 24px !important;
  }
  .footer .sec01 .box1,
  .footer .sec01 .box2,
  .footer .sec01 .box3 {
    width: 100% !important;
    float: none !important;
    clear: both;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
  }
  .footer .sec01 .box1 > p,
  .footer .sec01 .box2 > p,
  .footer .sec01 .box3 > p {
    flex: 1 0 100%;
  }
  .footer .sec01 .left,
  .footer .sec01 .right {
    float: none !important;
    width: auto !important;
    flex: 1 1 42%;
    min-width: 0;
    padding-right: 0 !important;
    box-sizing: border-box;
  }
  .footer .sec01 .right {
    text-align: right;
  }
  .footer .wrap2 .sec02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    text-align: center;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }
  .footer .wrap2 .sec02 a.fr {
    flex-basis: 100%;
    text-align: center;
    margin-top: 4px;
    float: none !important;
  }
  .footer .wrap3 .sec03 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 16px !important;
    box-sizing: border-box;
  }
  .main .sec04 .swiper-container,
  .main .sec04 .swiper-wrapper {
    max-width: 100%;
    overflow: hidden;
  }
  .main .sec04 .swiper-wrapper.sec04_swiper_wrapper {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* --- 레이어 팝업: 좁은 화면에서 DB(px) 좌표 무시·중앙 정렬 --- */
@media screen and (max-width: 1023px) {
  #hd_pop {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
  }
  #hd_pop .hd_pops {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-width: calc(100vw - 24px) !important;
    width: min(100%, 420px) !important;
    z-index: 10001 !important;
  }
  #hd_pop .hd_pops_con {
    width: 100% !important;
    height: auto !important;
    max-height: min(78vh, 580px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #hd_pop .hd_pops_footer {
    flex-direction: column;
    align-items: stretch;
  }
  #hd_pop .hd_pops_footer .hd_pops_reject,
  #hd_pop .hd_pops_footer .hd_pops_close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100%;
    max-width: none;
  }
}

/* 이달의 기획: 태블릿 좌측 과다 패딩 완화 */
@media screen and (max-width: 1080px) {
  #thisMonth .wrap {
    padding-left: 4.83vw !important;
    padding-right: 4.83vw !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* 메인 sec04 추천상품: 슬라이드·이미지 반응형 */
.main .sec04 .swiper-slide {
  min-width: 0;
  box-sizing: border-box;
}
.main .sec04 .swiper-slide .item_img {
  max-width: 100%;
}
.main .sec04 .swiper-slide .item_img img {
  max-width: 100%;
  height: auto;
}
.main .sec04 .swiper-slide .item_title a {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.main .sec04 .swiper-wrapper.sec04_swiper_wrapper {
  height: auto !important;
  min-height: 0 !important;
}

/* 메인 히어로: 모바일에서 #container 좌우 패딩(20px) 제거만큼 풀폭 — 이미지는 슬라이드 내 가로 100% + cover */
@media screen and (max-width: 768px) {
  .shop-content.is_index .main.wrap .sec01 {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    max-width: 100vw;
    box-sizing: border-box;
  }
  .shop-content.is_index .main.wrap .sec01 .sec01_slide {
    border-radius: 0;
  }
}