/*빅배너*/

.main_topban {width: auto;}
body .main_ban .container {animation: none; display: block;}
header .gnb_wrap nav.gnb_box h1.logo a {top: 18px !important;}

/* 최상위 부모 클래스 */
.main_ban {
    width: 100%;
    position: relative;
    /* [수정] 가로 스크롤 방지를 위해 추가 */
    overflow: hidden; 
}

/* 컨테이너 */
.main_ban .swiper-container {
    /* [수정] visible로 두면 박스 밖 슬라이드가 보이지만, 
       부모인 .main_ban에서 잘라주므로 가로 스크롤이 생기지 않습니다. */
    overflow: visible; 
    position: relative;
    width: 100%;
    margin: 20px auto;
}

/* [추가] 슬라이드 크기 최적화 */
.main_ban .swiper-slide {
    position: relative;
    height: 280px;
    background-color: #eee;
    cursor: pointer;
    box-sizing: border-box; 
    border-radius: 12px;
    background-position: right top !important;
    background-repeat: no-repeat !important;
    background-size: auto 125% !important;
}





/* 텍스트 박스: absolute로 고정하여 스와이프 시 흔들림 방지 */
.main_ban .tit_wrap {
    left: 50px;
    top: 23%;
    position: absolute;
    display: table;
    width: 360px;
    height: 100px;
    text-align: left;
    padding: 0;

}

.main_ban .tit_box {
        display: table-cell;
    vertical-align: top;
}

/* 타이틀 텍스트 스타일 */
.main_ban .tit_box p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    font-weight: bold;
}

.main_ban .tit_box h2 {
    font-family: 'Montserrat', 'YoonGothicPro760', sans-serif;
    font-size: 38px;
    color: #000;
    line-height: 45px;
    margin: 0;
}

.main_ban .tit_box h3 {
    font-family: 'Montserrat', 'YoonGothicPro740', sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-top: 20px;
}

/* 공통 컨테이너 */
.main_ban .container {
    width: 1200px;
    margin: 0 auto;
}


    
/*플레이버튼*/
 
    /* Small Play */
    .main_ban .play_small {
        display: flex;
        justify-content: space-between;
        z-index: 9;
        position: absolute;
        height: 30px;
        width: 121px;
        right: 0;
        box-sizing: border-box;
        bottom: -50px;
        align-items: center;
    }

    .main_ban .play_small .swiper-pause_top {
        opacity: 0.5;
        position: absolute;
        z-index: 999;
        width: 17px;
        height: 17px;
        top: 2px;
        left: 80px;
        background: url(https://stay10.publog.co.kr/re_181207/images/icon_stop.png?t=1);
        background-size: cover;
        cursor: pointer;
        transition: 0.3s
    }

    .main_ban .play_small .swiper-play_top {
        opacity: 0.5;
        position: absolute;
        z-index: 999;
        width: 17px;
        height: 17px;
        top: 2px;
        left: 80px;
        background: url(https://stay10.publog.co.kr/re_181207/images/icon_play.png?t=1);
        background-size: cover;
        cursor: pointer;
        transition: 0.3s
    }

    .main_ban .play_small .swiper-button-prev_top {
        opacity: 0.5;
        right: 50px;
        position: absolute;
        width: 17px;
        height: 17px;
        background: url(https://stay10.publog.co.kr/re_181207/images/icon_play_p.png?t=1);
        background-size: cover;
        cursor: pointer;
        transition: 0.3s;
        margin-top: -9px !important;
    }

    .main_ban .play_small .swiper-button-next_top {
        opacity: 0.5;
        right: 0px;
        position: absolute;
        width: 17px;
        height: 17px;
        background: url(https://stay10.publog.co.kr/re_181207/images/icon_play_n.png?t=1);
        background-size: cover;
        cursor: pointer;
        transition: 0.3s;
        margin-top: -9px !important;
    }

    .main_ban .play_small .swiper-button-prev_top:hover,
    .main_ban .play_small .swiper-button-next_top:hover {
        opacity: 1;
        transition: .3s;
    }

    .main_ban .play_small .swiper-play_top,
    .main_ban .play_small .swiper-pause_top {
        display: none;
    }

    .main_ban .play_small .swiper-play_top:hover,
    .main_ban .play_small .swiper-pause_top:hover {
        opacity: 1;
        transition: .3s;
    }

    .main_ban .play_small .swiper-play_top.active,
    .main_ban .play_small .swiper-pause_top.active {
        display: block;
    }

    .main_ban .play_small p {
        letter-spacing: 4;
        font-family: 'Montserrat', 'YoonGothicPro720', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #1a1a1a;
        position: absolute;
        width: 50px;
        margin-left: 30px;
        line-height: 30px;
    }
    
    .main_ban .swiper-pagination {
    z-index: 9;
    width: 90% !important;
    right: 0;
    bottom: 0px;
    background: rgb(0 0 0 / 8%) !important;
    }
    .main_ban .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #159fda !important;}


/* 부모 컨테이너에 여백을 주어 하단 요소가 잘리지 않게 함 */
.main_ban .swiper-container {
    padding-bottom: 60px; /* 컨트롤러가 들어갈 공간 확보 */
}

.main_ban .play_small {
    display: flex;
    justify-content: space-between;
    z-index: 9;
    position: absolute;
    height: 30px;
    width: 121px;
    right: 0;
    bottom: 0px; /* -50px에서 0px로 수정 (안 보이면 더 위로 조절) */
    align-items: center;
}

/* 페이지네이션 위치 조정 */
.main_ban .swiper-pagination {
    top: 320px;
    display: flex;
    z-index: 9;
    position: absolute;
    bottom: 0px;
}


@media (max-width: 1240px) {
    .main_ban .container {
        width: 90%;
    }
}


/*//빅배너*/




/* 빅배너 아래 라인배너*/

  .line_banner {width:1200px; margin: auto;     padding: 0; overflow: hidden; position: relative;}
  .line_banner > article {margin:0; padding:0px 0px 40px; background:#fff; border-radius: 15px; box-sizing: border-box;}
  .line_banner > article.main_hot {height:auto;}
  .line_banner > article.main_hot ul {    display: flex;    margin-top: 0px;   justify-content: space-evenly; z-index: 999;}
  .line_banner > article.main_hot ul li  {text-align: left;  margin: 0px 13px;  display: flex;  align-items: center;  font-size: 12px;    width: 180px;    flex-direction: column;}
  .line_banner > article.main_hot ul li a {    line-height: 22px;    font-size: 12px;    color: #1a1a1a;    display: flex;    flex-direction: column;    align-items: center;} 
  .line_banner > article.main_hot ul li a h2 {font-size: 15px; }
  .line_banner > article.main_hot .img_wrap {padding:8px; border-radius: 50px; background:#cbe5f1; transition: .3s; height:40px; margin:15px; } 
  .line_banner > article.main_hot a:hover .img_wrap {background:#159fda; transition: .3s}
  .line_banner > article.main_hot .img_wrap img {width:40px;} /* 6개 */
  .line_banner .main_hot {    margin: 0 auto;    width: 1200px;    overflow: hidden;}

/* 플레이버튼 */
  .line_banner .top_play { z-index: 99;    margin: 0 auto;    position: absolute;    top: -72px;    height: 200px;    width: 1200px;    box-sizing: border-box; right: 0;}
  .line_banner .top_play:before {display: none;}    
/* 화살표 */
  .line_banner .top_play .biz_swiper-button-prev {opacity:0.5; top:20px; left: 17px; position:absolute; width:20px; height:20px; background: url(/include/img/main/icon_play_p.png?t=1); background-size: cover; cursor: pointer; transition:0.3s; margin-top: -10px!important;}
  .line_banner .top_play .biz_swiper-button-next {opacity:0.5; top:20px; left: 39px; position:absolute; width:20px; height:20px; background: url(/include/img/main/icon_play_n.png?t=1); background-size: cover; cursor: pointer; transition:0.3s;margin-top: -10px!important;}
  .line_banner .top_play .biz_swiper-button-prev:hover, .top_play .biz_swiper-button-next:hover {transition:.3s; opacity:1; }
/* 재생 */
  .line_banner .top_play .swiper-pause {opacity:0.5; position:absolute;  z-index:999; width:20px; height:20px; top: 26%; left: 28px; background: url(/include/img/main/icon_stop.png?t=1); background-size: cover; cursor: pointer; transition:0.3s}
  .line_banner .top_play .swiper-play {opacity:0.5; position:absolute;  z-index:999; width:20px; height:20px; top: 26%; left: 29px; background: url(/include/img/main/icon_play.png?t=1); background-size: cover; cursor: pointer; transition:0.3s}

  .line_banner .top_play .swiper-play, .top_play .swiper-pause {display: none;}
  .line_banner .top_play .swiper-play:hover, .top_play .swiper-pause:hover {display: none; opacity:1; transition:.3s}
  .line_banner .top_play .swiper-play.active, .top_play .swiper-pause.active {display:block;}
/*.top_play .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {width:auto; right:18px; left:25px!important; bottom:7px !important; font-size:14px;}*/
  .line_banner .top_play .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction .line {margin:0 4px; font-size:10px; opacity:0.5;}
  .line_banner .top_play .swiper-pagination-current {font-weight:700; color:#1a1a1a;}
  .line_banner .top_play .swiper-pagination-total {opacity:0.5;}
  .line_banner .top_play .swiper-button-next, .line_banner .top_play .swiper-container-rtl .swiper-button-prev {background-size: 8px;}
  .line_banner .top_play .swiper-button-prev, .line_banner .top_play .swiper-container-rtl .swiper-button-next {background-size: 8px;}


/*// 빅배너 아래 라인배너*/




/*베스트셀러*/
    .bestseller_wrap { max-width: var(--max); margin: 0 auto; box-sizing: border-box; }
    .bestseller_wrap .dual { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; }
    .bestseller_wrap .dual::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--line); transform: translateX(-1px); pointer-events: none; }
    .bestseller_wrap .panel:first-child {padding-right:10px; }
    .bestseller_wrap .panel:last-child {padding-left:10px; }
    .bestseller_wrap .panel {  box-sizing: border-box; }

    /* 헤더 및 타이틀 */
    .bestseller_wrap .panel__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 14px; }
    .bestseller_wrap .panel__title { font-size: 28px; letter-spacing: .5px; font-weight: 800; color: #747474; }
    .bestseller_wrap .nav { display: flex; gap: 8px; }
    .bestseller_wrap .nav button { width: 30px; height: 30px; border: none; border-radius: 6px; color: #159fda; cursor: pointer; display: flex; align-items: center; justify-content: center;  }
    .bestseller_wrap .nav svg { width: 16px; height: 16px; pointer-events: none; }

    /* 그리드 설정 */
    .bestseller_wrap .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      padding: 0; /* 모든 패딩 초기화 */
      margin: 0;
      min-height: 600px;
    }

    /* 🔥 핵심 수정: a 태그를 직접 숨기고 보여줍니다 */
    .grid > a {
      display: none; 
      text-decoration: none;
      color: inherit;
    }

    .grid > a.active {
      display: block; /* 탭 2 시작 시 여백 없이 바로 붙음 */
    }

    /* :root 대신 클래스명을 사용합니다 */
  .bestseller_wrap {
    --max: 1200px;
    --bg: #ffffff;
    --card: #f5f6f8;
    --line: #f3f3f3;
    --text: #111827;
    --muted: #6b7280;
    --brand: #1da1f2;
    --radius: 14px;

    /* 변수를 선언한 클래스 내부에서 바로 사용 가능 */
    max-width: var(--max);
    margin: 0 auto;
    color: var(--text);
  }


    .bestseller_wrap .card__thumb {
      position: relative;
      background: var(--card);
      border-radius: 12px;
      margin-bottom: 14px;
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .bestseller_wrap .card__thumb img { width: 100%; height: 100%; object-fit: cover; }
    .bestseller_wrap .card__thumb .gnb_label_p {position: absolute; display: inline-block; top:10px; right:7px; height: 16px;  font-size: 10px !important; color: #da15ae !important; font-weight: 500; line-height: 15px; text-align: center; border: 1px solid #da15ae !important; box-sizing: border-box; vertical-align: middle; border-radius: 3px; background: #fff; padding: 0px 3px;}
    .bestseller_wrap .card__thumb .gnb_label_b {position: absolute; display: inline-block; top:10px; right:7px; height: 16px;  font-size: 10px !important; color: #159fda !important; font-weight: 500; line-height: 15px; text-align: center; border: 1px solid #159fda !important; box-sizing: border-box; vertical-align: middle; border-radius: 3px; background: #fff; padding: 0px 3px;}
    .bestseller_wrap .card__thumb .gnb_label_b:nth-child(2) {top:30px;}
    .bestseller_wrap .card__thumb .gnb_label_b:nth-child(3) {top:50px;}



    .bestseller_wrap .card__body { padding: 0 5px 0px; }
    .bestseller_wrap .name { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #374151; line-height: 1.35; margin-top: 2px; min-height: 20px; justify-content: space-between; }
    .bestseller_wrap .badge { padding: 0 4px; height: 16px; border-radius: 4px; background: #159fda; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; flex: 0 0 auto; }
    .bestseller_wrap .price { margin-top: 6px; font-size: 16px; font-weight: 800; color: #333; display:flex; justify-content:space-between; }

    @media (max-width: 980px) {
      .bestseller_wrap .dual { grid-template-columns: 1fr; gap: 40px; }
      .bestseller_wrap .dual::after { display: none; }
      .bestseller_wrap .grid { grid-template-columns: repeat(2, 1fr); min-height: auto; }
    }
    @media (max-width: 560px) {
      .bestseller_wrap .grid { grid-template-columns: 1fr; }
    }

/*//베스트셀러*/





 /* 대량구매 페이지 */  
  main.bulk_main {background: url('/include/img/main/ban/footer/img_01_bg.jpg?t=1') center no-repeat;  width: 100%; height: 400px;}
  main.bulk_main .footer_ban {width: 1200px; display: flex; margin: 0 auto;}
  main.bulk_main .footer_ban .bulk_top01 {text-align: left; padding-top: 85px; margin-left: 65px;}
  main.bulk_main .footer_ban .bulk_top01 span.sub_tit {background: none; height: 19px; margin-bottom: 25px; display: inline-block; padding: 0 5px; font-size: 14px; font-weight: 700; color: #111;}
  main.bulk_main .footer_ban .bulk_top01 h5 {font-size: 40px; color: #333; margin-bottom: 20px; font-weight: 300; line-height: 55px;}
  main.bulk_main .footer_ban .bulk_top01 h5 em {font-style: normal; font-weight: 600;}
  main.bulk_main .footer_ban .bulk_top01 p {font-size: 12px; line-height: 20px;}
  main.bulk_main .footer_ban .bulk_top01 .btn_inquires {    margin-left: 180px;    height: 40px;    position: absolute;    width: 40px;    padding: 10px;    border-radius: 50px;    font-size: 12px;    margin-top: -55px;    line-height: 17px;    display: flex;    align-items: center;    justify-content: center;}
  main.bulk_main .footer_ban .bulk_top01 .btn_checked {background: #767676;}

  main.bulk_main .footer_ban .bulk_top02 {text-align: left; padding-top: 85px; margin-left: 90px;}
  main.bulk_main .footer_ban .bulk_top02 span.sub_tit {background: none; height: 19px; margin-bottom: 25px; display: inline-block; padding: 0 5px; font-size: 14px; font-weight: 700; color: #111;}
  main.bulk_main .footer_ban .bulk_top02 h5 {font-size: 40px; color: #333; margin-bottom: 20px; font-weight: 300; line-height: 55px;}
  main.bulk_main .footer_ban .bulk_top02 h5 em {font-style: normal; font-weight: 600;}
  main.bulk_main .footer_ban .bulk_top02 p {font-size: 12px; line-height: 20px;}
  main.bulk_main .footer_ban .bulk_top02 .btn_inquires {     margin-left: 160px;
    height: 40px;
    position: absolute;
    width: 40px;
    padding: 10px;
    border-radius: 50px;
    font-size: 12px;
    margin-top: -55px;
    line-height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;}
  main.bulk_main .footer_ban .bulk_top02 .btn_checked {background: #639ad7;}

 /* //대량구매 페이지 */  




/*납품사례*/

    /* 전체 1200px 컨테이너 */
    .deliverycase_warp {
      max-width: var(--max);
      margin: 0 auto;
      padding: 100px 0px 0px;
      box-sizing: border-box;
      position: relative;
      --max:1200px;
      --text:#111827;
      --muted:#6b7280;
      --line:#e5e7eb;
      --bg:#ffffff;
      --shadow: 0 8px 24px rgba(0,0,0,.08);
      --radius:14px;
      --btn:#111111;
      --btnText:#ffffff;

      /* ✅ 카드 스와이프 관련 토큰 */
      --gap:22px;      /* 기존 gap 유지 */
      --pad:0px;       /* 기존 layout 유지(원본은 0px) */
      --accent:#159fda;

    }

    .deliverycase_warp .delivery__head{
      display:flex;
      align-items:baseline;
      gap:16px;
      margin-bottom: 30px;
    }
    .deliverycase_warp .delivery__title{
      font-family: 'Montserrat', 'YoonGothicPro740', sans-serif;
      font-weight: 800;
      font-size: 26px;
      line-height: 26px;
      color: #1a1a1a;
    }
    .deliverycase_warp .delivery__desc{
      font-size: 14px;
      color: var(--muted);
    }

    /* ✅ 카드 4개까지만 보이고, 5번째부터 스와이프 되도록 래퍼 추가 */
    .deliverycase_warp .cardsWrap{
      position: relative;
      overflow: hidden; /* 그라데이션/버튼 영역 정리 */
    }

    /* 카드 리스트(기존 .cards를 "가로 스와이프 트랙"으로 변경) */
    .deliverycase_warp .cards{
      display:flex;
      gap: var(--gap);
      align-items: stretch;

      overflow-x: hidden;               /* ✅ 핵심 */
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;

      scroll-snap-type: x mandatory;  /* ✅ 카드 단위 스냅 */
      scroll-padding-left: 0px;
      padding-bottom: 10px;           /* 스크롤바 자리 */
      box-sizing: border-box;
      touch-action: pan-y;
    }

    /* ✅ 스크롤바 보이게(스와이프 힌트) */
    .deliverycase_warp .cards::-webkit-scrollbar{ height: 10px; }
    .deliverycase_warp .cards::-webkit-scrollbar-thumb{
      background: rgba(17,24,39,.22);
      border-radius: 999px;
    }
    .deliverycase_warp .cards::-webkit-scrollbar-track{
      background: rgba(17,24,39,.06);
      border-radius: 999px;
    }

    .deliverycase_warp .card{
      /* ✅ 한 화면에 4개 */
      flex: 0 0 calc((100% - var(--gap) * 3) / 4);
      min-width: 0;

      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      box-sizing: border-box;
      background:#fff;
      padding-top: 15px !important;

      scroll-snap-align: start;
    }

    /* ✅ "더 있음" 표시(그라데이션) */
    .deliverycase_warp .fade{
      position:absolute;
      top: 0;
      bottom: 10px;
      width: 46px;
      pointer-events:none;
      opacity:0;
      transition: opacity .2s ease;
      z-index: 3;
    }
    .deliverycase_warp .fade.left{
      left: 0;
      background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
    }
    .deliverycase_warp .fade.right{
      right: 0;
      background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
    }
    .deliverycase_warp .cardsWrap.can-left .fade.left{ opacity:1; }
    .deliverycase_warp .cardsWrap.can-right .fade.right{ opacity:1; }

    /* ✅ 좌/우 버튼 */
    .deliverycase_warp .navBtn{
      position:absolute;
      top: 55%;
      transform: translateY(-50%);
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(17,24,39,.14);
      background: rgba(255,255,255,.92);
      box-shadow: 0 8px 22px rgba(0,0,0,.08);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      z-index: 4;
    }
    .deliverycase_warp .navBtn:active{ transform: translateY(-50%) scale(.98); }
    .deliverycase_warp .navBtn.left{ left: -13px; }
    .deliverycase_warp .navBtn.right{ right: -13px; }
    .deliverycase_warp .navBtn[disabled]{ opacity:.25; cursor: default; }
    .deliverycase_warp .navBtn svg{ width: 18px; height:18px; }

    /* 카드 내부 이미지 슬라이더 */
    .deliverycase_warp .card__mock[data-slider]{
      position: relative;
      overflow: hidden;
      background: #f3f4f6;
      border-radius: 12px;
      aspect-ratio: 4 / 3;
      box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
    }
    .deliverycase_warp .mock__viewport{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .deliverycase_warp .mock__track{
      display: flex;
      width: 100%;
      height: 100%;
      transform: translate3d(0,0,0);
      transition: transform .28s ease;
      will-change: transform;
      touch-action: pan-y;
    }
    .deliverycase_warp .mock__slide{
      flex: 0 0 100%;
      margin: 0;
      height: 100%;
    }
    .deliverycase_warp .mock__slide img{
      width: 100%;
      height: 100%;
      display:block;
      object-fit: cover;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    /* 카드 내부 도트 */
    .deliverycase_warp .mock__dots{
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      display: flex;
      gap: 7px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.75);
      backdrop-filter: blur(6px);
    }
    .deliverycase_warp .mock__dot{
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 2px solid #939393;
      opacity: .25;
      box-sizing: border-box;
      background: transparent;
      cursor: pointer;
    }
    .deliverycase_warp .mock__dot.is-active{
      background:#159fda;
      opacity: 1;
      border: none;
    }

    .deliverycase_warp .meta{
      display: flex;
      gap: 10px;
      margin-top: 12px;
      margin-bottom: 12px;
      flex-direction: column;
    }
    .deliverycase_warp .meta__name{
      font-weight: 700;
      letter-spacing:-0.01em;
    }
    .deliverycase_warp .meta__org{
      text-align: right;
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
    }

    .deliverycase_warp .btn{
      width: 100%;
      padding: 12px 14px;
      border: 0;
      border-radius: 10px;
      background: #159fda;
      color: var(--btnText);
      font-weight: 700;
      letter-spacing:-0.01em;
      cursor:pointer;
    }
    .deliverycase_warp .btn:active{ transform: translateY(1px); }

    .deliverycase_warp .footer-note{
      margin-top: 18px;
      font-weight: 800;
      letter-spacing:-0.02em;
      color:#111;
    }

    /* ✅ 반응형: 태블릿 2개, 모바일 1개 (스와이프 유지) */
    @media (max-width: 980px){
      .card{ flex: 0 0 calc((100% - var(--gap) * 1) / 2); }
    }
    @media (max-width: 560px){
      .card{ flex: 0 0 100%; }
      .delivery__head{ flex-direction: column; gap:6px; }
      .navBtn{ display:none; }
    }


/*     스와이프 2번째   */
      .deliverycase_warp .cards .mock__slide .txt_info { padding:20px; }
      .deliverycase_warp .cards .mock__slide .txt_info h3 { font-size:15px; }

      /* ✅ 리스트 점 나오게 */
      .deliverycase_warp .cards .mock__slide .txt_info ul{
        list-style: disc;
        list-style-position: outside;
        padding-left: 18px;  /* 점이 들어갈 공간 */
        margin: 8px 0 0;
      }
      .deliverycase_warp .cards .mock__slide .txt_info li{     list-style: disc;
        margin: 4px 0;
      }

      /* (필요하면) span 스타일은 따로 정상 선언 */
      .deliverycase_warp .cards .mock__slide .txt_info span{ }
   
/*// 납품사례*/





/*쉬운주문 템플릿*/

    /* 1. 특정 클래스 내부에서만 사용하는 전용 변수 설정 */
    .template_v2 {
      --max: 1200px;
      --bg-light: #f5f6f8;
      --text-main: #111827;
      --text-sub: #6b7280;
      --brand: #2aa8ff;
      margin: 80px auto 0px;
      max-width: var(--max);
      box-sizing: border-box;
      padding: 30px;
      border-radius: 20px;
      border: 2px solid #159fda;
    }

    /* 2. 헤더 레이아웃 */
    .template_v2 .template_head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end; /* 제목과 탭 하단 라인 정렬 */
      margin-bottom: 40px;
      gap: 20px;
      align-items: flex-end;
    }

    .template_v2 .title_area h2 {
      font-size: 24px;
      font-weight: 800;
      margin: 0 0 8px 0;
      color: var(--text-main);
    }

    .template_v2 .title_area p {
      font-size: 14px;
      color: var(--text-sub);
      margin: 0;
      line-height: 30px;
    }

    /* 3. 카테고리 탭 버튼 */
    .template_v2 .category_nav {
      display: flex;
      gap: 8px;
    }

    .template_v2 .category_nav button {
      padding: 10px 22px;
      border-radius: 30px;
      border: 1px solid #e5e7eb;
      background: #fff;
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .template_v2 .category_nav button.active {
      background: #159fda;
      color: #fff;
      border-color: #159fda;
    }

    /* 4. 그리드 레이아웃 (5열) */
    .template_v2 .grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      min-height: 400px; /* 탭 전환 시 높이 튀는 현상 방지 */
      justify-content: space-between;
    }

    /* 5. 카드 및 원형 스티커 스타일 */
    .template_v2 .card {
      background: var(--bg-light);
      border-radius: 12px;
      aspect-ratio: 1 / 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
      animation: fadeIn 0.4s ease forwards; /* 탭 클릭 시 부드럽게 등장 */
      overflow: hidden;
      width: auto;
      height: auto;
      width: 210px;
      height: 190px;
      overflow: hidden;

    }

    .template_v2 .card:hover {
      transform: translateY(-8px);
    }

    .template_v2 .sticker_circle {
      overflow: hidden;
    }

    .template_v2 .sticker_circle img {
        width: 70%;
        height: auto;
        object-fit: cover;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 90%;
        max-height: 150%;
    }

    /* 등장 애니메이션 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(15px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 6. 반응형 대응 */
    @media (max-width: 1024px) {
      .template_v2 .grid { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 768px) {
      .template_v2 .template_head { flex-direction: column; align-items: flex-start; }
      .template_v2 .category_nav { width: 100%; overflow-x: auto; padding-bottom: 10px; }
      .template_v2 .category_nav button { flex: 0 0 auto; }
    }

    @media (max-width: 480px) {
      .template_v2 .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } 
      .template_v2 .title_area h2 { font-size: 22px; }
    }

    .template_v2 .h150 { height: 150px !important; }


    /* 배너 영역 */
    #grid-banner {
      flex-direction: row;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
    }

    #grid-banner .card {
      flex: 0 0 auto;
      width: 130px;
      height: 400px;
    }

    #grid-banner .sticker_circle {
      width: 120px;
      height: 340px;
      border-radius: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #grid-banner .sticker_circle img {
        width: 100%;
        height: 350px !important;
        object-fit: cover;
        display: block;
    }

    .card-preview {

      position: relative;
      overflow: hidden;
      background-color: #f5f6f8;
          border-radius: 20px;
    }

    .card-preview img {
      position: absolute;
      width: 132px;
      height: 76px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    }

    .card-preview .card-back {
    left: 25px;
        top: 27px;
        z-index: 1;
    }

    .card-preview .card-front {
      left: 50px;
      top: 88px;
      z-index: 2;
    }

/*// 쉬운주문 템플릿*/






/*메인 하단 리뷰*/

  .review_warp {width: 1200px; margin: 0 auto; padding: 100px 0;}

    .review_warp .head{
      display:flex;
      align-items:baseline;
      gap:16px;
      margin-bottom: 30px;
    }
    .review_warp .title{
      font-family: 'Montserrat', 'YoonGothicPro780', sans-serif;
      font-weight: 800;
      font-size: 26px;
      line-height: 26px;
      color: #1a1a1a;
    }
    .review_warp.desc{
      font-size: 14px;
      color: var(--muted);
    }

    /* 3. 리스트 레이아웃 (Grid를 사용하여 4열 배치) */
    .review_warp .review_box {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    /* 4. 썸네일 이미지 영역 */
    .review_warp .review_box .cover {
        width: 100%;
        aspect-ratio: 1 / 1; /* 정사각형 비율 */
        border-radius: 12px; /* 둥근 모서리 */
        overflow: hidden;
        margin-bottom: 16px;
        background-color: #f0f0f0; /* 이미지가 없을 때를 대비한 배경색 */
    }

    .review_warp .review_box .cover img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 이미지가 찌그러지지 않고 꽉 차게 */
        display: block;
        transition: transform 0.3s ease; /* (선택사항) 마우스 오버 애니메이션 준비 */
    }

    /* (선택사항) 마우스 오버 시 이미지 살짝 확대 */
    .review_warp .review_box a:hover .cover img {
        transform: scale(1.05);
    }

    /* 5. 좋아요 (파란색 하트) 영역 */
    .review_warp .like_wrap {
        display: flex;
        gap: 2px;
        margin-bottom: 12px;
    }

    /* HTML에 있는 텍스트는 숨기고 CSS 가상요소(::before)로 파란색 하트 출력 */
    .review_warp .ir_pm {
        background: transparent;
        border: none;
        font-size: 0; 
        cursor: pointer;
    }

    .review_warp .ir_pm.active::before {
        content: '♥';
        font-size: 16px;
        color: #00a2ed; /* 이미지와 동일한 밝은 파란색 */
    }

    /* 6. 리뷰 제목 및 내용 텍스트 */
    .review_warp .review_box h4 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #222;
        line-height: 1.3;
    }

    .review_warp .review_box p {
        font-size: 14px;
        color: #888;
        line-height: 1.5;
        word-break: keep-all; /* 단어 단위로 줄바꿈 처리 */
    }

  .review_warp .review_box span {
    width: max-content;
    margin: 15px 0;
    border: 1px solid #888;
    font-size: 10px;
    color: #888;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 15px;
    padding: 3px 6px;
  }



    /* 7. 반응형 디자인 (화면이 작아질 때를 대비) */
    @media (max-width: 992px) {
        .review_box {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
    }
    
    @media (max-width: 576px) {
        .review_box {
            grid-template-columns: 1fr;
        }
        #review h3 {
            font-size: 22px;
        }
    }

.review_warp ul.list_box li div.info .like_wrap button {
    width: 15px;
    height: 14px;
    margin: 0 5px 0 0;
    background: url(https://www.bizfactory.co.kr/include/img/my/like.png) no-repeat;
    background-size: 100%;
}

.review_warp ul.list_box li div.info .like_wrap button.active
{    background-position: 0 -14px;


/*// 메인 하단 리뷰*/


/*메인 이벤트 배너*/

.evt_banner {width: 1200px;
    margin: auto;
    padding: 0;
    overflow: hidden;
    position: relative;}
.evt_banner > article.main_hot ul {
    display: flex;
    margin-top: 0px;
    justify-content: space-evenly;
    z-index: 999;
}
.evt_banner > article.main_hot ul li {
    border-radius: 10px;
    background: #fbfbfb;
    text-align: left;
    display: flex;
    align-items: center;
    font-size: 12px;
    width: 240px;
    flex-direction: column;
    padding: 20px;
    margin: 10px 0;
}
.evt_banner > article.main_hot ul li a {    
    font-size: 14px;
    font-weight: bold;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    color: #333;
}
.evt_banner > article.main_hot ul li a img {width: 50%}


/*//메인 이벤트 배너*/