/* BASIC css start */
/* 섹션 공통 */
section{margin-bottom:100px; width:100%; max-width: 850px; min-width: 320px; margin: 0 auto; margin-bottom: 60px;}
section .sec_inner{width:100%; margin: 0 auto; padding:0 3%}
section h2{font-family: 'Montserrat', serif;font-size: 26px; font-weight: 400;text-align: center;margin-bottom: 25px;}


/* sec1 */
#sec1{position: relative;}
#sec1 .swiper{width: 100%;}
#sec1 .swiper-wrapper{width: 100%; }
#sec1 .swiper-slide{ width: 100%; }
#sec1 .swiper-slide img{width:100%;}

#sec1 .swiper-pagination-bullet{background-color:#fff !important; opacity:1 !important}
#sec1 .swiper-pagination-bullet-active{background-color:#000 !important; }


/* sec2 */
#sec2{}
#sec2 h2{font-size:23px !important;}
#sec2 .sec2_cont{width: 100%;}
#sec2 .sec2_cont ul{width: 100%;}
#sec2 .sec2_cont ul li{ height: auto; width: 75%;}
#sec2 .sec2_cont ul li>div{width: 100%;}
#sec2 .sec2_cont ul li .img_sec{}
#sec2 .sec2_cont ul li .img_sec a{display: block; width: 100%;}
#sec2 .sec2_cont ul li .img_sec a img{width: 100%;}
#sec2 .sec2_cont ul li .info_sec{padding:25px 0px 10px; text-align: center; opacity: 0;transition:  opacity 1.3s,margin-top .5s; margin-top: 10px;}
#sec2 .sec2_cont ul li .info_sec.show{opacity: 1; margin-top: 0px;}
#sec2 .sec2_cont ul li .info_sec h3{font-family: 'Montserrat', serif; font-size: 17px; color: #000; margin-bottom: 10px;font-weight: 700;}
#sec2 .sec2_cont ul li .info_sec p{font-family: 'Noto Sans KR', sans-serif;font-weight: 400; font-size: 12px;color: #606060; line-height: 1.4; letter-spacing:-.3s}



/* sec4 */
#sec4 .swiper-pagination-bullet{background-color:#000 !important;}


/* sec5 */
#sec5{}
#sec5 h2{}
#sec5 .sec5_cont{width: 100%;}
#sec5 .sec5_cont .swiper{}
#sec5 .sec5_cont .swiper ul{width: 100%;}
#sec5 .sec5_cont .swiper ul li{ }
#sec5 .swiper_btn_prev{position: absolute; top: 50%; transform: translateY(-50%); left: 3%;z-index: 9;cursor: pointer;}
#sec5 .swiper_btn_prev img,#sec5 .swiper_btn_next img{transform: scale(.66)}
#sec5 .swiper_btn_next{position: absolute; top: 50%; transform: translateY(-50%); right: 3%;z-index: 9; cursor: pointer;}

/* (추가) sec5 유튜브 반응형 래퍼 */
#sec5 .swiper-slide .yt-wrap{
  width: 100%;
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
}

#sec5 .swiper-slide .yt-wrap iframe{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

#sec5{
  margin-bottom: 80px;
}


/* =========================
   sec6: 2열(한줄 2개) × 3줄(6개)
   대상: #sec6 .item_cont > li.item_list
   ========================= */

/* ul을 grid로 고정 */
#sec6 .item_cont{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px 18px !important; /* 세로, 가로 간격 */

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 혹시 clear_fix가 after로 빈칸을 만들면 제거(안전) */
#sec6 .item_cont::after{
  content: none !important;
  display: none !important;
}

/* li에 남아있는 float/width/margin을 무력화 */
#sec6 .item_cont > li{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* 썸네일 영역 높이 통일(정렬 핵심) */
#sec6 .item_cont > li .tumb{
  width: 100%;
  aspect-ratio: 1 / 1;   /* 정사각 썸네일 (가장 안정적) */
  overflow: hidden;
  background: #f5f5f5;
}

/* 이미지 안 잘리게(요청 B 스타일) */
#sec6 .item_cont > li .tumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 텍스트 높이 통일(줄바꿈 때문에 카드 높이 달라지는 것 방지) */
#sec6 .item_cont > li .info{
  min-height: 78px;   /* 필요하면 70~90 사이로 조절 */
}

/* 상품명 2줄 제한 (3줄 넘어가면 ... 처리) */
#sec6 .item_cont > li .prdname{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* sec7 */
#sec7{}
#sec7 h2{}
#sec7 .sec7_ban{width: 100%;}
#sec7 .sec7_ban ul{width: 100%;}
#sec7 .sec7_ban ul li{width: 100%;}
#sec7 .sec7_ban ul li a{display: block;width: 100%;}
#sec7 .sec7_ban ul li a img{width: 100%;}
#sec7 .swiper-pagination-bullet{background-color:#000 !important}


/* sec8 */
#sec8{}
#sec8 .sec_inner{}
#sec8 .sec_inner h2{}
#sec8 .sec8_cont{ width: 100%;}
#sec8 .sec8_cont>div{ width: 100%;}
#sec8 .sec8_cont .sec8_L{}
#sec8 .sec8_cont .sec8_L .swiper{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul li{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul li a{display: block;width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul li a img{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper .swiper_btn_prev{ position:absolute; top:50%; left: 3%;transform: translateY(-50%); z-index:4; cursor:pointer}
#sec8 .sec8_cont .sec8_L .swiper .swiper_btn_next{position:absolute; top:50%; right: 3%;transform: translateY(-50%); z-index:4; cursor:pointer}
#sec8 .swiper_btn_prev img,#sec8 .swiper_btn_next img{transform: scale(.66)}
#sec8 .sec8_cont .sec8_L .swiper .swiper-pagination{}
#sec8 .sec8_cont .sec8_L .swiper .swiper-pagination-bullet{background-color:#fff !important;}
#sec8 .sec8_cont .sec8_R{margin-top:50px}
#sec8 .sec8_cont .sec8_R ul{display:flex; flex-wrap:wrap; width:100%}
#sec8 .sec8_cont .sec8_R ul li{}



/* sec9*/
#sec9{}
#sec9 .sec9_ban{width: 100%;}
#sec9 .sec9_ban ul{width: 100%;}
#sec9 .sec9_ban ul li{width: 100%;}
#sec9 .sec9_ban ul li a{display: block;width: 100%;}
#sec9 .sec9_ban ul li a img{width: 100%;}
#sec9 .swiper .swiper-pagination-bullet{background-color:#fff !important;}


/* sec10 */
#sec10 .swiper-pagination-bullet{background-color:#000 !important;}


/* sec11 */
#sec11{background-color:#FFFF00; padding:40px 0 50px}
#sec11 ul{width:100%;}
#sec11 ul li{width:75%}
#sec11 ul li .photo{width:100%}
#sec11 ul li .photo a{display:block; width:100%}
#sec11 ul li .photo a img{width:100%; display:block;}
#sec11 ul li .text{padding-top:17px; opacity:1;}
#sec11 ul li .text.show{padding-top:17px; opacity:1;}
#sec11 ul li .text h3{font-family:'Montserrat', sans-serif; font-size:12px; font-weight:700; color:#000;}
#sec11 ul li .text p{margin:4px 0 16px; font-family:'Noto Sans KR', sans-serif; font-size:9px; color:#333; line-height:1.5;}
#sec11 ul li .text .view{font-family:'Montserrat', sans-serif; font-size:9px; font-weight:500; color:#000; text-decoration:underline;}


/* sec12 */
#sec12{}
#sec12 .sec_inner{}
#sec12 .sec_inner>div{margin-bottom:30px}
#sec12 .sec_inner>div h2{text-align: left;position: relative;margin-bottom:20px !important}
#sec12 .sec_inner>div h2 a{font-size: 11px; position: absolute; right: 0; top: 50%;font-family: 'Montserrat', sans-serif; transform: translateY(-50%);font-weight:500}
#sec12 .sec_inner>div h2 a span{display:inline-block;)}
#sec12 .sec_inner>div h2 a span img{transform:scale(.7) translateY(3.6px); transform-origin:bottom; }
#sec12 .sec_inner>div ul{}


/* sec13 */
#sec13{}
#sec13 h2{}
#sec13 .sec13_cate{}
#sec13 .sec13_cate ul{text-align: center;display:flex; justify-content:space-between; padding:0 3%}
#sec13 .sec13_cate ul li{display: inline-block;}
#sec13 .sec13_cate ul li a{border-bottom: 2px solid #fff;  font-family: 'Montserrat', sans-serif; color:#bfbfbf; font-size: 11.6px; font-weight: 700; letter-spacing: -.3px; transition: color .5s, border-color .3s}
#sec13 .sec13_cate ul li.on>a{border-color:#000 !important; color: #000 !important;}
#sec13 .sec13_prd{margin-top:25px;}
#sec13 .sec13_prd>div{display: none;}
#sec13 .sec13_prd>div.show{display: block;}
#sec13 .sec13_prd>div .swiper{}
#sec13 .sec13_prd>div .swiper ul{}
#sec13 .sec13_prd>div .swiper ul li{height:350px}
#sec13 .sec13_prd>div .swiper ul li a{display: block;width: 100%;height:100%; overflow:hidden}
#sec13 .sec13_prd>div .swiper ul li a img{width: 100%; }
#sec13 .swiper_btn_prev img,#sec13 .swiper_btn_next img{transform: scale(.66)}
#sec13 .swiper_btn_prev{position: absolute; top: 50%; transform: translateY(-50%); left: 3%;z-index: 10;cursor: pointer;}
#sec13 .swiper_btn_next{position: absolute; top: 50%; transform: translateY(-50%); right: 3%;z-index: 10; cursor: pointer;}



/* sec14 */
#sec14{margin-bottom:100px}
#sec14 .sec_inner{}
#sec14 .sec14_L{}
#sec14 .sec14_L h2{text-align: left !important;line-height:1.1; margin-bottom:0 !important}
#sec14 .sec14_L p{font-family: 'Montserrat', sans-serif; font-size: 12px;color: #000; font-weight: 400; margin-top: 10px;}
#sec14 .sec14_R{margin-top:30px}

/* =========================
   sec6 밀림 해결: clearfix 가상요소/float/clear 완전 제거 + grid 강제
   반드시 CSS 파일 '맨 아래'에 붙여넣기
   ========================= */

#sec6 .sec_inner > ul.item_cont.clear_fix{
  /* grid 강제 */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;

  /* 정렬 강제 */
  justify-content: start !important;
  justify-items: stretch !important;
  align-items: start !important;

  /* 여백/리스트 기본 제거 */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  /* 혹시 상속/겹침 방지 */
  width: 100% !important;
  box-sizing: border-box !important;

  gap: 26px 18px !important;
}

/* ✅ clear_fix가 만드는 가상요소가 첫 칸을 차지하는 경우가 많아서 완전 제거 */
#sec6 .sec_inner > ul.item_cont.clear_fix::before,
#sec6 .sec_inner > ul.item_cont.clear_fix::after{
  content: none !important;
  display: none !important;
}

/* li 쪽에 남아있는 float/clear/inline-block/width 강제 제거 */
#sec6 .sec_inner > ul.item_cont.clear_fix > li.item_list{
  float: none !important;
  clear: none !important;
  display: block !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 썸네일 높이 통일(정렬 깨짐 방지) */
#sec6 .sec_inner > ul.item_cont.clear_fix > li.item_list .tumb{
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
}

/* B안: 이미지 안 잘리게 */
#sec6 .sec_inner > ul.item_cont.clear_fix > li.item_list .tumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* 텍스트 높이 통일 */
#sec6 .sec_inner > ul.item_cont.clear_fix > li.item_list .info{
  min-height: 78px !important;
}

/* 상품명 2줄 제한 */
#sec6 .sec_inner > ul.item_cont.clear_fix > li.item_list .prdname{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

















/* BASIC css end */