/* BASIC css start */
:root{
  --page-max: 850px;
  --hero-max: 700px;
}

/* =========================
   공통 (Global / Base)
   ========================= */
.section{ width:100%; }
.section > .sec_inner{ width:100%; max-width: var(--page-max); margin:0 auto; padding: 0 5%; overflow:hidden; box-sizing:border-box;}

.section, .section :is(*){ box-sizing:border-box; letter-spacing:.2px; }
.section:not(#sec1){ margin-bottom:40px; }
.section h2{ font-size:25px; color:#111; font-weight:600; margin-bottom:25px; }

.section .txt_area p.sub{ color:#000; line-height:1.6; font-weight:500; font-size:14px; transition:.4s; }
.section .txt_area p.big{ color:#000; line-height:1.3; font-weight:500; font-size:20px; transition:.4s; }
.section .txt_area a.more{ display:inline-block; font-size:13px; margin-top:8px; padding:5px 15px; border:1px solid #000; color:#000; font-weight:600; transition:transform .4s,opacity .4s; }

.section :is(.sec_next,.sec_prev){
  position:unset; width:30px; height:30px; border-radius:50%;
  background:#ddd; color:#000; margin-top:0; transition:.1s;
}
.section :is(.sec_next,.sec_prev)::after{ font-size:11px; font-weight:700; }
.section :is(.sec_next,.sec_prev):not(.swiper-button-disabled):hover{ background:var(--main-color); color:#fff; }

.section .swiper{ width:100%; overflow:hidden;
--pagi-size: 20px;
--pagi-gap: 12px;
padding-bottom: calc(var(--pagi-size) + var(--pagi-gap));}
.section .swiper-pagination { bottom: var(--pagi-gap);
  min-height: var(--pagi-size);
  display: flex;
  align-items: center;
  justify-content: center;
}
.section .swiper-pagination-bullet-active{ background:var(--main-color); }
.section img{ max-width:100%; height:auto; display:block; }

.section .prd_more_btn{ text-align:center; margin-top:40px; }
.section .prd_more_btn>a{ display:inline-block; width:100%; border:1px solid #e8e9ed; padding:4px 0; }
.section .prd_more_btn>a button.btn_moreGray{
  width:100%; background:#fff!important; color:#000; font-size:13px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.section .prd_more_btn>a button span{ display:flex; align-items:center; justify-content:center; color:#000; }
.section .prd_more_btn>a button span img{ transform:scale(.66); transform-origin:center; }

/* =========================
   sec1 - 모바일 (pc sec1 비율/구조 반영)
   ========================= */
#sec1{
  position:relative;
  width:100%;
  overflow:hidden;
  padding-top:18px;
  margin-top:0;
  margin-bottom:40px;
}

@media (min-width:480px){
  #sec1{ padding-top:20px; }
}

@media (min-width:768px){
  #sec1{ padding-top:22px; }
}

#sec1 .sec_inner{
  max-width:700px;
  margin:0 auto;
}

#sec1 .swiper{
  --sec1-pad:18px;
  --side-gap:24px;
  --nav-inset:12px;
  position:relative;
  width:100%;
  max-width:700px;
  margin:0 auto;
  height:clamp(240px,62vw,320px);
  overflow:visible;
  padding:0 var(--sec1-pad);
  padding-bottom:0;
}

#sec1 .swiper .swiper-wrapper{
  display:flex !important;
  align-items:stretch;
  height:100%;
  padding:0;
  margin:0;
  list-style:none;
}

#sec1 .swiper .swiper-slide{
  flex:0 0 auto !important;
  width:calc(100% - var(--side-gap));
  height:100%;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:#f6f6f6;
  outline:1px solid rgba(0,0,0,.10);
  outline-offset:-1px;
  transition:transform .35s ease, opacity .35s ease, box-shadow .35s ease;
}

#sec1 .swiper .swiper-slide > a{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  z-index:0;
}

#sec1 .swiper .swiper-slide > a > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:1px solid #e5e5e5;
  border-radius:20px;
}

#sec1 .swiper .swiper-slide::before{
  content:none !important;
}

#sec1 .swiper .swiper-slide::after{
  content:none !important;
}

#sec1 .swiper .swiper-slide-prev{
  box-shadow:none !important;
}

#sec1 .swiper .swiper-slide-next{
  box-shadow:none !important;
}

#sec1 .swiper .swiper-slide-duplicate-prev{
  box-shadow:none !important;
}

#sec1 .swiper .swiper-slide-duplicate-next{
  box-shadow:none !important;
}

#sec1 .swiper .swiper-slide-active{
  box-shadow:none !important;
}

#sec1 .swiper .swiper-slide-duplicate-active{
  box-shadow:none !important;
}

#sec1 .swiper .swiper-slide-prev::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05),
    inset 0 14px 20px rgba(0,0,0,.12),
    inset 0 -14px 24px rgba(0,0,0,.09),
    inset 16px 0 24px rgba(0,0,0,.07),
    inset -16px 0 24px rgba(0,0,0,.07);
  background:radial-gradient(
    120% 120% at 50% 50%,
    rgba(255,255,255,0) 48%,
    rgba(0,0,0,.06) 100%
  );
}

#sec1 .swiper .swiper-slide-next::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05),
    inset 0 14px 20px rgba(0,0,0,.12),
    inset 0 -14px 24px rgba(0,0,0,.09),
    inset 16px 0 24px rgba(0,0,0,.07),
    inset -16px 0 24px rgba(0,0,0,.07);
  background:radial-gradient(
    120% 120% at 50% 50%,
    rgba(255,255,255,0) 48%,
    rgba(0,0,0,.06) 100%
  );
}

#sec1 .swiper .swiper-slide-duplicate-prev::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05),
    inset 0 14px 20px rgba(0,0,0,.12),
    inset 0 -14px 24px rgba(0,0,0,.09),
    inset 16px 0 24px rgba(0,0,0,.07),
    inset -16px 0 24px rgba(0,0,0,.07);
  background:radial-gradient(
    120% 120% at 50% 50%,
    rgba(255,255,255,0) 48%,
    rgba(0,0,0,.06) 100%
  );
}

#sec1 .swiper .swiper-slide-duplicate-next::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05),
    inset 0 14px 20px rgba(0,0,0,.12),
    inset 0 -14px 24px rgba(0,0,0,.09),
    inset 16px 0 24px rgba(0,0,0,.07),
    inset -16px 0 24px rgba(0,0,0,.07);
  background:radial-gradient(
    120% 120% at 50% 50%,
    rgba(255,255,255,0) 48%,
    rgba(0,0,0,.06) 100%
  );
}

#sec1 .swiper .swiper-slide-active::after{
  content:none !important;
}

#sec1 .swiper .swiper-slide-duplicate-active::after{
  content:none !important;
}

#sec1 .swiper .txt_area{
  position:absolute;
  top:50%;
  left:14px;
  right:14px;
  width:calc(100% - 28px);
  max-width:none;
  padding:14px 14px;
  transform:translateY(-50%) translateY(10px);
  z-index:2;
  text-align:left;
  opacity:0;
  transition:opacity .35s, transform .35s;
}

#sec1 .swiper .swiper-slide-active .txt_area{
  opacity:1;
  transform:translateY(-50%) translateY(0);
}

#sec1 .swiper .swiper-slide-duplicate-active .txt_area{
  opacity:1;
  transform:translateY(-50%) translateY(0);
}

#sec1 .swiper .txt_area > *{
  pointer-events:none;
}

#sec1 .swiper .txt_area p.big{
  font-size:20px;
  font-weight:800;
  line-height:1.2;
  margin:0 0 10px;
  color:#111;
  text-shadow:none;
}

#sec1 .swiper .txt_area p.sub{
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  margin:0;
  color:#333;
  text-shadow:none;
}

#sec1 .swiper .txt_area a.more{
  display:none !important;
  color:#111;
  text-shadow:none;
}

#sec1 .swiper .swiper-slide-active::before,
#sec1 .swiper .swiper-slide-duplicate-active::before{
  content:"" !important;
  position:absolute;
  inset:1px;
  border-radius:calc(20px - 1px);
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.82) 28%,
    rgba(255,255,255,.78) 55%,
    rgba(255,255,255,.40) 75%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
}

#sec1 .swiper .btn_wrap{
  position:absolute;
  z-index:20;
  bottom:12px;
  left:auto;
  right:calc(var(--sec1-pad) + 10px);
  transform:none;
  display:flex;
  align-items:center;
  gap:10px;
}

#sec1 .swiper .btn_wrap > ul{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  margin-right:10px;
  border:0;
  background:transparent;
  box-shadow:none;
}

#sec1 .swiper .btn_wrap > ul::before{
  display:none;
}

#sec1 .swiper .btn_wrap > ul li{
  display:flex;
  align-items:center;
  position:relative;
  z-index:1;
}

#sec1 .swiper .btn_wrap > ul li .swiper-pagination{
  display:flex;
  align-items:center;
  gap:6px;
  position:static;
  width:auto;
  min-height:auto;
  line-height:0;
  justify-content:center;
  transform:none;
}

#sec1 .swiper .btn_wrap .swiper-pagination-bullet{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  opacity:1;
  margin:0 !important;
  transition:width .2s, background .2s, transform .2s;
}

#sec1 .swiper .btn_wrap .swiper-pagination-bullet-active{
  width:18px;
  height:6px;
  background:var(--main-color);
  transform:none;
}

#sec1 .swiper .btn_wrap > ul li:first-child,
#sec1 .swiper .btn_wrap > ul li:last-child{
  display:none;
}

#sec1 .swiper .btn_wrap .swiper_prev{
  width:20px;
  height:20px;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, transform .15s, opacity .15s;
}

#sec1 .swiper .btn_wrap .swiper_next{
  width:20px;
  height:20px;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, transform .15s, opacity .15s;
}

#sec1 .swiper .btn_wrap .swiper_prev:hover{
  background:rgba(0,0,0,.04);
  transform:none;
}

#sec1 .swiper .btn_wrap .swiper_next:hover{
  background:rgba(0,0,0,.04);
  transform:none;
}

#sec1 .swiper .btn_wrap .swiper_prev img{
  width:12px;
  height:12px;
  filter:brightness(0);
  opacity:.75;
}

#sec1 .swiper .btn_wrap .swiper_next img{
  width:12px;
  height:12px;
  filter:brightness(0);
  opacity:.75;
}

#sec1 .swiper .btn_wrap .play_btn{
  display:none !important;
}

#sec1 .swiper .btn_wrap .pause_btn{
  display:none !important;
}

@media (max-width:520px){
  #sec1{
    overflow:hidden;
  }

  #sec1 .swiper{
    --sec1-pad:18px;
    --side-gap:24px;
    --nav-inset:12px;
    height:clamp(240px,62vw,320px);
    padding:0 var(--sec1-pad);
  }

  #sec1 .swiper .swiper-slide{
    width:calc(100% - var(--side-gap));
    border-radius:20px;
  }

  #sec1 .swiper .txt_area{
    left:14px;
    right:14px;
    width:calc(100% - 28px);
    max-width:none;
    padding:14px 14px;
    top:50%;
    position:absolute;
    z-index:2;
  }

  #sec1 .swiper .txt_area p.big{
    font-size:20px;
    line-height:1.2;
    margin:0 0 10px;
  }

  #sec1 .swiper .txt_area p.sub{
    font-size:13px;
    line-height:1.5;
    margin:0 0 0;
    color:#333;
  }

  #sec1 .swiper .btn_wrap{
    right:calc(var(--sec1-pad) + 10px);
    bottom:12px;
  }

  #sec1 .swiper .btn_wrap > ul{
    margin-right:10px;
  }

  #sec1 .swiper .btn_wrap .swiper_prev{
    width:20px;
    height:20px;
  }

  #sec1 .swiper .btn_wrap .swiper_next{
    width:20px;
    height:20px;
  }
}

@media (max-width:380px){
  #sec1 .swiper{
    --sec1-pad:14px;
    --side-gap:20px;
    --nav-inset:10px;
    height:clamp(220px,64vw,280px);
  }

  #sec1 .swiper .txt_area{
    left:12px;
    right:12px;
    width:calc(100% - 24px);
    padding:12px 12px;
  }

  #sec1 .swiper .txt_area p.big{
    font-size:18px;
    margin:0 0 8px;
  }

  #sec1 .swiper .txt_area p.sub{
    font-size:12px;
    line-height:1.45;
  }

  #sec1 .swiper .btn_wrap{
    bottom:10px;
    right:calc(var(--sec1-pad) + 8px);
  }
}

@media (min-width:768px){
  #sec1 .swiper{
    --sec1-pad:22px;
    --side-gap:32px;
    --nav-inset:14px;
    max-width:760px;
    height:clamp(260px,42vw,360px);
  }

  #sec1 .swiper .txt_area{
    left:18px;
    right:18px;
    width:min(420px, calc(100% - 36px));
    padding:18px 18px;
  }

  #sec1 .swiper .txt_area p.big{
    font-size:22px;
  }

  #sec1 .swiper .txt_area p.sub{
    font-size:14px;
  }

  #sec1 .swiper .btn_wrap{
    right:calc(var(--sec1-pad) + 12px);
    bottom:14px;
  }
}

/* =========================
   sec2
   ========================= */
#sec2 { margin-top: 10px; }
#sec2 .sec_inner { }

#sec2 .sec_inner .sec2_tit{ display: none; }
#sec2 .sec_inner .sec2_tit h2{ font-size: 18px; font-weight: 600; }
#sec2 .sec_inner .sec2_tit .nav_wrap{ display: none; }
#sec2 .swiper{ overflow: hidden; padding: 0 14px 8px; }

#sec2 .swiper-slide{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
#sec2 .sec_inner .swiper-slide:nth-child(5n){ margin-right: 0; }

#sec2 .swiper-slide > a{
  width:56px; height:56px; border-radius:50%; overflow:hidden;
  background:#f5f6f8; border:1px solid #eef0f3; display:block;
}
#sec2 .swiper-slide > a > img{ width:100%; height:100%; object-fit:cover; transition:transform .15s ease; }
#sec2 .swiper-slide > a:hover img{ transform: scale(1.03); }

#sec2 .swiper-slide > p{
  margin-top: 8px; font-size: 12px; line-height: 1.2; color: #222; white-space: nowrap;
}

@media (min-width:390px){ #sec2 .swiper-slide > a{ width:60px; height:60px; } }
@media (min-width:768px){ #sec2 .swiper-slide > a{ width:64px; height:64px; } }
@media (max-width:360px){ #sec2 .swiper-slide > p{ font-size:11px; } }

/* =========================
   sec3
   ========================= */
#sec3 { }
#sec3 .sec_inner { position:relative; }
#sec3 .sec_header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
#sec3 .sec_inner h2{ font-size: 18px; font-weight: 700; margin-bottom: 20px; }
#sec3 .more-button{ font-size:14px; text-decoration:none; align-self:center; line-height:1; }
#sec3 .more-button:hover{ background:#f5f6f8; }

#sec3 .sec_inner .swiper-button-prev{ position: absolute; top: 50%; left: 0; transform: translate(-80px, -50%); z-index: 2; }
#sec3 .sec_inner .swiper-button-next{ position: absolute; top: 50%; right: 0; transform: translate(80px, -50%); z-index: 2; }
#sec3 .sec_inner .sec3_cont .swiper{ padding-bottom:30px; }

#sec3 .swiper-wrapper{ display: flex; flex-wrap: nowrap; }
#sec3 .swiper-slide{ display: flex; height:auto; flex-wrap: wrap; width: 100%; }

#sec3 .item_list{ width: 33.3%; box-sizing: border-box; }
#sec3 .item_list .thumb{
  position: relative; width: 100%; padding-top: 100%; overflow: hidden;
  display: flex; justify-content: center; align-items: center;
}
#sec3 .item_list .thumb img{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
#sec3 .item_list .thumb .cart_icon{ position: absolute; display: flex; align-items: center; justify-content: center; }
#sec3 .item_list .thumb .cart_icon img{ transform: scale(0.5); }

#sec3 .info{ text-align: left; padding: 20px 0; }
#sec3 .prd-info{ display: flex; flex-direction: column; height: 100%; }
#sec3 .prdbtn{ width:100%; height: 20px; margin-top:10px; margin-bottom: 5px; }

#sec3 .prdname{
  font-size: 14px; font-weight: 500; line-height: 1.2em; height: 2.4em;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word;
}

#sec3 .prdprice{ font-size: 16px; display:flex; flex-direction:column; gap:4px; margin-top:6px; }
#sec3 .prdprice .origin-row{ font-size:12px; color:#9aa0a6; line-height:1; }
#sec3 .prdprice .origin-row s{ position:relative; text-decoration:none; display:inline-block; padding:0 1px; }
#sec3 .prdprice .origin-row s::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#cfd4da; transform:translateY(-50%); }

#sec3 .prdprice .deal-row{ display:flex; align-items:baseline; gap:6px; line-height:1; }
#sec3 .prdprice .dc_per{ color:#ff4d4f; font-weight:700; font-size:13px; }
#sec3 .prdprice .price{ font-weight:800; font-size:16px; color:#111; }
#sec3 .prdprice .replace{ color:#111; font-weight:600; }
#sec3 .prdprice .soldout{ color:#e74c3c; font-weight:700; }

#sec3 .prd-wish{ margin-top: 10px; }
#sec3 .prdprice strike{ color:#9aa0a6; font-size:12px; }
#sec3 .item_list .info{
  display: flex; flex-direction: column; height: 100%; width: 100%;
  padding: 0 10px; box-sizing: border-box;
}
#sec3 .item_list .info .prd-wish{ display: none; margin-left: auto; }
#sec3 .item_list .info .prd-wish a{ display:flex; }
#sec3 .item_list .info .prd-wish a > span{ display: flex; }
#sec3 .item_list .info .prd-wish .my-wish-count{ display: none; }

/* =========================
   sec8
   ========================= */
#sec8 {display:none; }
#sec8 .sec_inner { position:relative; }
#sec8 .sec_header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
#sec8 .sec_inner h2{ font-size: 18px; font-weight: 700; margin-bottom: 20px; }
#sec8 .more-button{ font-size:14px; text-decoration:none; align-self:center; line-height:1; }
#sec8 .more-button:hover{ background:#f5f6f8; }

#sec8 .sec_inner .swiper-button-prev{ position: absolute; top: 50%; left: 0; transform: translate(-80px, -50%); z-index: 2; }
#sec8 .sec_inner .swiper-button-next{ position: absolute; top: 50%; right: 0; transform: translate(80px, -50%); z-index: 2; }
#sec8 .sec_inner .sec8_cont .swiper{ padding-bottom:30px; }

#sec8 .swiper-wrapper{ display: flex;  }
#sec8 .swiper-slide{ display: flex; height:auto; flex-wrap: wrap; }

#sec8 .item_list{ width:auto; box-sizing: border-box; }
#sec8 .item_list .thumb{
  position: relative; width: 100%; padding-top: 100%; overflow: hidden;
  display: flex; justify-content: center; align-items: center;
}
#sec8 .item_list .thumb img{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
#sec8 .item_list .thumb .cart_icon{ position: absolute; display: flex; align-items: center; justify-content: center; }
#sec8 .item_list .thumb .cart_icon img{ transform: scale(0.5); }

#sec8 .info{ text-align: left; padding: 20px 0; }
#sec8 .prd-info{ display: flex; flex-direction: column; height: 100%; }
#sec8 .prdbtn{ width:100%; height: 20px; margin-top:10px; margin-bottom: 5px; }

#sec8 .prdname{
  font-size: 14px; font-weight: 500; line-height: 1.2em; height: 2.4em;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word;
}

#sec8 .prdprice{ font-size: 16px; display:flex; flex-direction:column; gap:4px; margin-top:6px; }
#sec8 .prdprice .origin-row{ font-size:12px; color:#9aa0a6; line-height:1; }
#sec8 .prdprice .origin-row s{ position:relative; text-decoration:none; display:inline-block; padding:0 1px; }
#sec8 .prdprice .origin-row s::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#cfd4da; transform:translateY(-50%); }

#sec8 .prdprice .deal-row{ display:flex; align-items:baseline; gap:6px; line-height:1; }
#sec8 .prdprice .dc_per{ color:#ff4d4f; font-weight:700; font-size:13px; }
#sec8 .prdprice .price{ font-weight:800; font-size:16px; color:#111; }
#sec8 .prdprice .replace{ color:#111; font-weight:600; }
#sec8 .prdprice .soldout{ color:#e74c3c; font-weight:700; }

#sec8 .prd-wish{ margin-top: 10px; }
#sec8 .prdprice strike{ color:#9aa0a6; font-size:12px; }
#sec8 .item_list .info{
  display: flex; flex-direction: column; height: 100%; width: 100%;
  padding: 0 10px; box-sizing: border-box;
}
#sec8 .item_list .info .prd-wish{ display: none; margin-left: auto; }
#sec8 .item_list .info .prd-wish a{ display:flex; }
#sec8 .item_list .info .prd-wish a > span{ display: flex; }
#sec8 .item_list .info .prd-wish .my-wish-count{ display: none; }

/* =========================
   sec4
   ========================= */
#sec4 { }
#sec4 .sec_inner { position:relative; }

#sec4 .sec_inner ul{ display: flex; flex-wrap: wrap; gap: 14px; }
#sec4 .sec_inner ul li{
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 100px;
  border-radius: 12px; overflow: hidden;
}
#sec4 .sec_inner ul li>a{ display: block; width: 100%; }
#sec4 .sec_inner ul li>a>img{ width: 100%; border-radius: 15px; }

#sec4 .sec_inner ul li > a,
#sec4 .sec_inner ul li > a > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block;
}
#sec4 .sec_inner ul li .txt_area{
  position: absolute; top: 50%; transform: translateY(-50%); left: 16px; right:16px; max-width: 100%;
}
#sec4 .sec_inner ul li .txt_area p.big{
  font-size: 16px; font-weight: 700; margin-bottom: 4px; transition-delay: .1s; color: #212121;
}
#sec4 .sec_inner ul li .txt_area p.sub{
  font-size: 12px; font-weight: 400; line-height: 1.35; transition-delay: .27s; color: #212121;
}
#sec4.act .sec_inner ul li .txt_area p{ transform: translateY(-15px); opacity: 1; }

@media (min-width:480px){
  #sec4 .sec_inner ul li{ max-height: 190px; aspect-ratio: 16/8.5; }
  #sec4 .sec_inner ul li .txt_area p.big{ font-size:18px; }
}
@media (min-width:768px){
  #sec4 .sec_inner ul li{ max-height: 240px; aspect-ratio: 16/8; }
  #sec4 .sec_inner ul li .txt_area p.big{ font-size:22px; }
  #sec4 .sec_inner ul li .txt_area p.sub{ font-size:14px; }
}

/* =========================
   sec5
   ========================= */
#sec5 {  }
#sec5 .sec_inner {padding: 0 5%;  }
#sec5 .sec_header{ display:flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
#sec5 h2{ font-size: 18px; margin: 0; font-weight: 700; margin-bottom: 20px; }
#sec5 .more-button{ font-size: 14px; text-decoration: none; align-self: center; }
#sec5 .sec_subtitle{ font-size: 14px; color: #555; margin-bottom: 10px; margin-top: 5px; font-weight: 300; }

#sec5 .sec5_cont{ position: relative; width: 100%; overflow: hidden; }
#sec5 .swiper-wrapper{ display: flex; flex-wrap: wrap; }
#sec5 .swiper-slide{ }


#sec5 .shopbrand_item_wrap{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
#sec5 .item_list{ max-width: 260px; box-sizing: border-box; display: flex; flex-direction: column; }
#sec5 .item_list.empty{ height: 0; }

#sec5 .item_list .thumb{
  position: relative; width: 100%; padding-top: 100%; overflow: hidden;
  display: flex; justify-content: center; align-items: center;
}
#sec5 .item_list .thumb img{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
#sec5 .item_list .thumb .cart_icon{
  position: absolute; display: flex; align-items: center; justify-content: center;
  bottom: 0; right: 0; width: 40px; height: 40px;
}
#sec5 .item_list .thumb .cart_icon img{ transform: scale(0.52); }

#sec5 .item_list .info{
  text-align: left; padding: 10px 0; display: flex; flex-direction: column; justify-content: flex-start; flex-grow: 1;
}
#sec5 .prd-info{ display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
#sec5 .prdname{
  font-size: 14px; font-weight: 500; word-wrap: break-word; line-height: 1.3em;
  height: 2.6em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

#sec5 .prdprice{ font-size: 16px; display:flex; flex-direction:column; gap:4px; margin-top:6px; }
#sec5 .prdprice .origin-row{ font-size:12px; color:#9aa0a6; line-height:1; }
#sec5 .prdprice .origin-row s{ position:relative; text-decoration:none; display:inline-block; padding:0 1px; }
#sec5 .prdprice .origin-row s::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#cfd4da; transform:translateY(-50%); }

#sec5 .prdprice .deal-row{ display:flex; align-items:baseline; gap:6px; line-height:1; }
#sec5 .prdprice .dc_per{ color:#ff4d4f; font-weight:700; font-size:13px; }
#sec5 .prdprice .price{ color:#111; font-weight:800; font-size:16px; }
#sec5 .prdprice .replace{ color:#111; font-weight:600; }
#sec5 .prdprice .soldout{ color:#e74c3c; font-weight:700; }

#sec5 .prd-wish{ display: none; position: absolute; right: 0; top: 10px; }
#sec5 .item_list .info .prd-wish{ margin-left: auto; }
#sec5 .item_list .info .prd-wish a{ display: flex; }
#sec5 .item_list .info .prd-wish a > span{ display: flex; }
#sec5 .item_list .info .prd-wish .my-wish-count{ display: none; }

#sec5 .prdbtn{ width: 100%; height: 20px; margin-bottom: 5px; }
#sec5 .prdbtn span{ display: inline-flex; font-size: 12px; }
#sec5 .prd-preview{ display: none; }

#sec5 .swiper-pagination{ bottom: 10px; }
#sec5 .swiper-button-next, #sec5 .swiper-button-prev{ color: rgba(0,0,0,0.3); }
#sec5 .swiper-button-next:after, #sec5 .swiper-button-prev:after{ font-size: 20px; }

/* =========================
   sec6
   ========================= */
#sec6 h2{ font-size: 20px; margin-top: -40px; font-weight: 500; }
#sec6 .sec_inner{ position:relative; padding: 0 5%; }
#sec6 .sec_inner .sec6_cont{  }

#sec6 .sec_inner .sec6_cont .swiper ul li{  width: clamp(240px, 44%, 360px);  /* 이전 57% → 축소 */ }
#sec6 .sec_inner .sec6_cont .swiper ul li a{ display: block; width: 100%; overflow: hidden; aspect-ratio: 16 / 9;  border-radius: 15px;  }
#sec6 .sec_inner .sec6_cont .swiper ul li a img{ width: 100%; transition: transform .3s; object-fit:cover; }
#sec6 .sec_inner .sec6_cont .swiper ul li .txt_area{ padding: 12px 0; }
#sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p{ transition: all .3s; }
#sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.big{ color: #161616; font-size: 16px; margin-bottom: 6px; font-weight: 500; }
#sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.sub{ color: #555555; font-size: 13px; line-height: 1.4; font-weight: 300; }
@media (min-width:768px){
  #sec6 .sec_inner .sec6_cont .swiper ul li{ width: clamp(260px, 40%, 420px); }
}
/* =========================
   sec7
   ========================= */
#sec7 .sec_inner{ padding: 0 5%; }
#sec7 .title_area{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
#sec7 h2{ font-size: 18px; font-weight: 700; margin: 0; }
#sec7 .more_btn{ font-size: 14px; text-decoration: none; }

#sec7 .sec7_cont .banner_area{ position: relative; width: 100%; height: 125px; margin-bottom: 20px; }
#sec7 .sec7_cont .banner_area > a{ display: block; width: 100%; height: 100%; }
#sec7 .sec7_cont .banner_area > a img{ border-radius: 15px; width: 100%; height: 100%; object-fit: cover; }
#sec7 .sec7_cont .banner_area .txt_area{
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 30px; max-width: 80%;
}
#sec7 .sec7_cont .banner_area .txt_area > *{ color: #fff; }
#sec7 .sec7_cont .banner_area .txt_area p.big{ font-size: 14px; font-weight: 600; margin-bottom: 5px; }
#sec7 .sec7_cont .banner_area .txt_area p.sub{ font-size: 12px; font-weight: 300; line-height: 1.2; transition-delay: .27s; }

#sec7 .sec7_cont .item_area{ width: 100%; height:auto; }
#sec7 .swiper{ }
#sec7 .swiper-slide{ height: auto; width: calc(33.33% - 20px); margin-right: 10px; }

#sec7 .item_list{ height: 100%; display: flex; flex-direction: column; }
#sec7 .item_list .thumb{
  position: relative; width: 100%; padding-top: 100%; overflow: hidden;
  display: flex; justify-content: center; align-items: center;
}
#sec7 .item_list .thumb > a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#sec7 .item_list .thumb > a > img{ width: 100%; height: 100%; object-fit: cover; }
#sec7 .item_list .thumb .cart_icon{
  position: absolute; display: flex; align-items: center; justify-content: center;
  bottom: 0; right: 0; width: 40px; height: 40px;
}
#sec7 .item_list .thumb .cart_icon img{ transform: scale(0.7); }

#sec7 .item_list .info{
  text-align: left; padding: 10px 0; display: flex; flex-direction: column; justify-content: flex-start; flex-grow: 1;
}
#sec7 .prd-info{ display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
#sec7 .prdbtn{ width: 100%; height: 15px; margin-bottom: 5px; justify-content: flex-start; }
#sec7 .prdbtn span{ display: inline-flex; margin-right: 5px; font-size: 12px; }

#sec7 .prdname{
  font-size: 14px; font-weight: 500; word-wrap: break-word; line-height: 1.3em;
  height: 2.6em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

#sec7 .prdprice{ font-size: 16px; height: 1.2em; display:flex; flex-direction:column; gap:4px; margin-top:6px; }
#sec7 .prdprice .origin-row{ font-size:12px; color:#9aa0a6; line-height:1; }
#sec7 .prdprice .origin-row s{ position:relative; text-decoration:none; display:inline-block; padding:0 1px; }
#sec7 .prdprice .origin-row s::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#cfd4da; transform:translateY(-50%); }

#sec7 .prdprice .deal-row{ display:flex; align-items:baseline; gap:6px; line-height:1; }
#sec7 .prdprice .dc_per{ color:#ff4d4f; font-weight:700; font-size:13px; }
#sec7 .prdprice .price{ color:#111; font-weight:800; font-size:16px; }
#sec7 .prdprice .replace{ color:#111; font-weight:600; }
#sec7 .prdprice .soldout{ color:#e74c3c; font-weight:700; }

#sec7 .swiper-pagination{ bottom: 10px; }
#sec7 .swiper-button-next, #sec7 .swiper-button-prev{ color: rgba(0,0,0,0.3); }
#sec7 .swiper-button-next:after, #sec7 .swiper-button-prev:after{ font-size: 20px; }

/* =========================
   sec10
   ========================= */
#sec10 { position: relative; margin-top: -40px; }
#sec10 h2 { font-size: 20px; font-weight: 500; }
#sec10 .sec_inner { position: relative; }
#sec10 .sec_inner h2 { display: flex; align-items: center; gap: 16px; }
#sec10 .sec_inner img {
width: 100%; height: auto; object-fit: cover; border-radius: 15px; display: block;
}
#sec10 a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#sec10 a > img { width: 60px; height: 60px; transition: filter .3s, transform .3s; }
#sec10 a:hover > img { filter: brightness(.9); transform: scale(1.1); }

/* =========================
   Floating Buttons
   ========================= */
.floating-buttons{
  position: fixed; bottom: 50px; right: 20px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.floating-buttons.show{ opacity: 1; visibility: visible; }
.floating-buttons a{
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: all 0.3s ease;
}
.floating-buttons a:first-child{ overflow: hidden; }
.floating-buttons a:first-child img{ width: 100%; height: 100%; object-fit: cover; }
.floating-buttons .btn-top{ background-color: var(--main-color); }
.floating-buttons .btn-top img{ width: 24px; height: 24px; }

#footer { margin-top: 0 !important; }

/* =========================
   공통: 더보기(노란 버튼)
   ========================= */
.more-button--yellow{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:12px; color:#111; border:0;
  font-size:14px; font-weight:600; line-height:1; text-decoration:none;
}
.more-button--yellow:hover{ filter:brightness(.97); }
.more-button--yellow:active{ transform:translateY(1px); }

/* BASIC css end */