/* BASIC css start */
/*메인 공통*/
.section,.section :is(*){box-sizing: border-box;font-family: "Pretendard Variable", Pretendard, sans-serif;}
.section:not(#sec1){margin-bottom: 50px;}
.section .sec_inner{padding:0 5%}
.section h2{font-size:25px; font-family: "Pretendard Variable", Pretendard, sans-serif; color: #111111; font-weight: 600; margin-bottom: 25px;}
.section .txt_area p.sub{color: #000; line-height: 1.6;font-weight: 500;transition: all .4s;font-size: 14px; }
.section .txt_area p.big{ color: #000; font-weight: 500;line-height: 1.3; transition: all .4s;font-size: 27px; }
.section .txt_area a.more{ width:auto; display: inline-block; font-size: 13px; transition: transform .4s, opacity .4s;border: 1px solid #000;color: #000; margin-top: 8px;font-weight: 600;padding:5px 15px; }
.section :is(.sec_next,.sec_prev){position: unset;color: #000;width: 30px; background-color: #ddd; height:30px; border-radius: 50%; margin-top: 0; transition:all .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-color:var(--main-color);color:#fff}
.section .swiper-pagination-bullet-active{background-color:var(--main-color)}
.section .prd_more_btn{text-align:center; margin-top:40px;}
.section .prd_more_btn>a {display:inline-block;font-family: 'Noto Sans KR', sans-serif;display:inline-block; border:1px solid #e8e9ed; padding:4px 0px; width:100%  }
.section .prd_more_btn>a button.btn_moreGray{background-color:#fff !important; color:#000; font-size:13px; font-weight:500; width:100%; 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{display:inline-block;  transform:scale(.66); transform-origin:center center}

/* ---------------------------------
   [모바일 리뉴얼] 메인 카드 배너 
--------------------------------- */
#sec1 { margin-bottom: 50px; padding-top: 20px; overflow: hidden; }
#sec1 .swiper { padding-bottom: 35px; } /* 도트 페이징 여백 */

/* 가려지는 양옆 카드 75% 비율 및 원근감 효과 */
#sec1 .swiper-slide { width: 75% !important; transition: transform 0.4s ease, opacity 0.4s ease; }
#sec1 .swiper-slide:not(.swiper-slide-active) { transform: scale(0.9); opacity: 0.6; }
#sec1 .swiper-slide a { display: block; width: 100%; text-decoration: none; }

/* 이미지 박스 세팅 및 하단 딤(Dim) 처리 */
#sec1 .img_box { position: relative; width: 100%; aspect-ratio: 38 / 48; border-radius: 15px; overflow: hidden; background: #e9e9e9; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
#sec1 .img_box::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0) 100%); z-index: 1; pointer-events: none; }
#sec1 .img_box img { width: 100%; height: 100%; object-fit: cover; }

/* 텍스트 박스 절대 위치 및 강제 한 줄 처리 */
#sec1 .txt_box { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 15px 22px; text-align: left; box-sizing: border-box; z-index: 2; }
#sec1 .txt_box .tit { font-size: 18px; font-weight: 700; color: #ffffff; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sec1 .txt_box .desc { font-size: 14px; color: rgba(255,255,255,0.85); font-weight: 400; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 중앙 정렬 페이징 도트 */
#sec1 .swiper-pagination { bottom: 0 !important; }
#sec1 .swiper-pagination-bullet { width: 6px; height: 6px; background: #ccc; opacity: 1; margin: 0 3px !important; transition: all 0.3s; }
#sec1 .swiper-pagination-bullet-active { width: 18px; border-radius: 10px; background: #111; }

/* ---------------------------------
   [모바일 리뉴얼] 하단 혜택 배너 
--------------------------------- */
#top_benefit { width: 100% !important; background: transparent !important; padding: 20px 0 10px !important; text-align: center !important; }

/* 가로 90% 라운드 바 세팅 */
#top_benefit .tb_inner { display: flex !important; align-items: center !important; justify-content: center !important; width: 90% !important; margin: 0 auto !important; background-color: #ed4747 !important; border-radius: 999px !important; padding: 6px 0 !important; }
#top_benefit .tb_inner ul { display: flex !important; list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; justify-content: center !important; }

/* 메이크샵 중복 태그 숨김 처리 (버그 방어) */
#top_benefit .tb_inner ul li { display: none !important; }
#top_benefit .tb_inner ul li:first-child { display: block !important; }

/* 텍스트 및 아이콘 폰트 디자인 */
#top_benefit .tb_inner ul li a { text-decoration: none !important; font-size: 13px !important; color: #ffffff !important; letter-spacing: -0.5px !important; display: flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; line-height: 1 !important; }
#top_benefit .tb_inner ul li a b { color: #ffffff !important; font-weight: 700 !important; }
#top_benefit .tb_inner ul li a::before { content: '✨' !important; font-size: 14px !important; margin-right: 6px !important; display: inline-block !important; }



/*sec2*/
#sec2{}
#sec2 .sec_inner{}
#sec2 .sec_inner{}
#sec2 .sec_inner .sec2_tit{display: flex; align-items: center; justify-content: space-between;margin-bottom: 20px;}
#sec2 .sec_inner .sec2_tit h2{margin-bottom: 0;}
#sec2 .sec_inner .sec2_tit .nav_wrap{display: flex; align-items: center;gap: 8px;}
#sec2 .sec_inner .sec2_tit .nav_wrap>*{}
#sec2 .sec_inner .sec2_tit .nav_wrap .swiper-button-next{}
#sec2 .sec_inner .sec2_tit .nav_wrap .swiper-button-prev{}
#sec2 .sec_inner .swiper{}
#sec2 .sec_inner .swiper>ul{}
#sec2 .sec_inner .swiper>ul>li{display: flex; flex-direction: column; gap: 10px; align-items: center;}
#sec2 .sec_inner .swiper>ul>li>a{display: flex;width: 100%;transition: all .1s; overflow: hidden;border-radius: 50%; }
#sec2 .sec_inner .swiper>ul>li>a>img{width: 100%;transition: all .1s;}
#sec2 .sec_inner .swiper>ul>li>p{text-align: center;color: #000;font-size: 14px; font-weight: 600;}


/*sec3*/
#sec3 .sec_inner{position:relative;}
#sec3 .sec_inner .sec3_cont .swiper{padding-bottom:20px;}


/*sec4*/
#sec4{}
#sec4 .sec_inner{}
#sec4 .sec_inner ul{display: flex; flex-wrap: wrap; gap: 15px;}
#sec4 .sec_inner ul li{position: relative;width:100%}
#sec4 .sec_inner ul li>a{display: block;width: 100%;}
#sec4 .sec_inner ul li>a>img{width: 100%;}
#sec4 .sec_inner ul li .txt_area{position: absolute; top: 50%;transform: translateY(-50%);  left: 30px;  max-width: 80%  }
#sec4 .sec_inner ul li .txt_area p{}
#sec4 .sec_inner ul li .txt_area p.big{font-size: 22px; font-weight: 600; margin-bottom: 6px;transition-delay: .1s; color:#212121}
#sec4 .sec_inner ul li .txt_area p.sub{font-size: 13px;line-height:1.4;transition-delay: .27s; color:#383838}
#sec4.act .sec_inner ul li .txt_area p{transform: translateY(-15px); opacity: 1;}

/*sec6*/
#sec6{}
#sec6 h2{padding-left:5%}
#sec6 .sec_inner{position:relative; padding:0}
#sec6 .sec_inner .sec6_cont{padding-left:5%}
#sec6 .sec_inner .sec6_cont .swiper{}
#sec6 .sec_inner .sec6_cont .swiper ul{}
#sec6 .sec_inner .sec6_cont .swiper ul li{width:57%}
#sec6 .sec_inner .sec6_cont .swiper ul li a{display: block; width: 100%;overflow:hidden;}
#sec6 .sec_inner .sec6_cont .swiper ul li a img{width: 100%; transition:transform .3s}
#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:17px; margin-bottom:6px}
#sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.sub{color: #555555; font-size: 14px;line-height:1.4}

/*sec7*/
#sec7{}
#sec7 .sec_inner{}
#sec7 .sec_inner .sec7_cont{}
#sec7 .sec_inner .sec7_cont>div{}
#sec7 .sec_inner .sec7_cont .banner_area{position:relative;flex-grow:1;}
#sec7 .sec_inner .sec7_cont .banner_area>a{display: block;width: 100%;}
#sec7 .sec_inner .sec7_cont .banner_area>a img{width: 100%;}
#sec7 .sec_inner .sec7_cont .banner_area .txt_area{position: absolute; top: 50%;transform:translateY(-50%); left:20px;  max-width: 80%  }
#sec7 .sec_inner .sec7_cont .banner_area .txt_area>*{color: #fff;}
#sec7 .sec_inner .sec7_cont .banner_area .txt_area p.big{font-size: 21px; font-weight: 600; margin-bottom: 7px;}
#sec7 .sec_inner .sec7_cont .banner_area .txt_area p.sub{font-size: 12px;line-height:1.3; transition-delay: .27s;}

#sec7 .sec_inner .sec7_cont .item_area{height:auto; overflow-y:auto; margin-top:12px;}
#sec7 .sec_inner .sec7_cont .item_area .swiper{height:100%}
#sec7 .sec_inner .sec7_cont .item_area ul{}
#sec7 .sec_inner .sec7_cont .item_area ul>li{display: flex; flex-wrap: nowrap; align-items: center; width:100%; height:fit-content; padding:6px 0}
#sec7 .sec_inner .sec7_cont .item_area ul>li .thumb{width:30%}
#sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a{display:block; width:100%}
#sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a>img{object-fit: cover;}
#sec7 .sec_inner .sec7_cont .item_area ul>li .info{width:70%; padding:0 20px 0 20px; max-height:100%; }
#sec7 .swiper-vertical>.swiper-scrollbar{height:100%; width:2px; top:0; right:0}


/* sec8 */
#sec8 {margin-bottom:40px !important;}
#sec8 .sec_inner{padding:0}
#sec8 .sec_inner h2{padding:0 5%}
#sec8 .sec_inner .sec8_cate{margin-bottom: 35px;}
#sec8 .sec_inner .sec8_cate ul{}
#sec8 .sec_inner .sec8_cate ul li{width:auto;}
#sec8 .sec_inner .sec8_cate ul li:first-child{margin-left:5%}
#sec8 .sec_inner .sec8_cate ul li a{overflow:hidden; display:block; width:100%;background-color: #f4f4f4; border-radius: 40px; padding: 8px 20px; text-align:center; color:#000;position:relative; font-size: 13px; font-weight: 500; display:block; transition:all .1s}
#sec8 .sec_inner .sec8_cate ul li.on>a{ color: #fff;background-color: var(--main-color);}
#sec8 .sec8_prd{padding:0 5%}
#sec8 .sec8_prd>div{display: none; position:relative;opacity:0; transition:opacity .5s}
#sec8 .sec8_prd>div.show{display: block;}
#sec8 .sec8_prd>div.act{opacity:1}

/*sec9*/
#sec9 {margin-bottom:70px !important;}
#sec9 .sec_inner h2{display: flex; align-items: center; gap: 16px;}
#sec9 .sec_inner h2 span{display: inline-block;color: #999999; font-size: 13px; font-weight: 500;}

/*sec10*/
#sec10 {margin-bottom:40px !important;}
#sec10 .sec_inner li>img{width: 100%; }

#footer{margin-top:0 !important}


/*sec4_1*/
#sec4_1{width:100%;}
#sec4_1 .sec_inner ul{display: flex; flex-wrap: wrap; gap: 15px;}
#sec4_1 img{width:100%; padding-top:0px}


/*sec11*/
#sec11{padding-top: 15px;}
#sec11 .sec_inner{}
#sec11 .sec_inner ul{display: flex; flex-wrap: wrap; gap: 15px;}
#sec11 .sec_inner ul li{position: relative;width:100%}
#sec11 .sec_inner ul li>a{display: block;width: 100%;}
#sec11 .sec_inner ul li>a>img{width: 100%;}


/*sec12*/
#sec12{margin-bottom:20px !important;}
#sec12 .sec_inner{}
#sec12 .sec_inner ul{display: flex; flex-wrap: nowrap; gap: 0px; justify-content: center; background-color: #ed4747;}
#sec12 .sec_inner ul li{position: relative; }
#sec12 .sec_inner ul li>a{display: block;width: 100%;}
#sec12 .sec_inner ul li>a>img{width: 100%;}




#top_benefit{background-color: #ed4747;}
#top_benefit .tb_inner{margin-top : 8px;}
#top_benefit .tb_inner ul{display: flex; align-items: center; justify-content: space-evenly;}
#top_benefit .tb_inner ul li{}
#top_benefit .tb_inner ul li a{color: #fff; padding: 12px 0; display: block;font-size: 14px; font-weight: 400;}




/* ===== 리뷰 영역 전체 배경 (모바일) ===== */
#m_sec4_5_reviews{
  width:100%;
  background:#f7f7f7;
  padding:40px 0 28px;
  margin-bottom:50px;
  box-sizing:border-box;
}
#m_sec4_5_reviews .m-sec_inner{
  width:100%;
  max-width:100%;
  padding:0 16px;
  box-sizing:border-box;
}
#m_sec4_5_reviews h2{
  font-size:20px; line-height:1.3; font-weight:700; color:#111; margin:0 0 14px;
}

/* ===== 스와이퍼 컨테이너 ===== */
#m_sec4_5_reviews .swiper{
  position:relative;
  overflow:hidden;
  padding-bottom:36px; /* 점 네비 공간 */
}

/* 슬라이드/카드: 2-up에 맞게 자동폭 */
#m_sec4_5_reviews .swiper-slide{
  height:auto; /* 카드 높이 자동 */
}
#m_sec4_5_reviews .m-gf-review-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:12px;
  width:100%;               /* <- 고정폭 제거 */
  display:flex; flex-direction:column;
  box-sizing:border-box;
}

/* 썸네일: 2-up에 맞게 살짝 축소, 정사각형 채우기 */
#m_sec4_5_reviews .m-gf-review-thumb{
  width:140px;              /* 160 → 140 */
  height:140px;
  margin:0 auto 10px;
  border-radius:8px; overflow:hidden; background:#fafafa;
  display:flex; align-items:center; justify-content:center;
}
#m_sec4_5_reviews .m-gf-review-thumb img{
  width:100%; height:100%; object-fit:cover;
}

/* 텍스트 */
#m_sec4_5_reviews .m-gf-review-link{
  text-decoration:none; color:#111;
  display:flex; flex-direction:column; height:100%;
}
#m_sec4_5_reviews .m-gf-review-title{
  font-size:14px; font-weight:700; margin:0 0 6px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
/* 3줄로 확장 */
#m_sec4_5_reviews .m-gf-review-excerpt{
  font-size:13px; color:#555; line-height:1.55; margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
#m_sec4_5_reviews .m-gf-review-meta{
  margin-top:auto; font-size:12px; color:#777;
  display:flex; align-items:center; gap:6px;
}
#m_sec4_5_reviews .m-gf-review-author::before{
  content:"NAME"; margin-right:6px; padding:2px 6px 1px 6px;
  background:#ed4747; color:#fff; font-size:11px; border-radius:4px;
}

/* 점 페이지네이션 (가운데 정렬) */
#m_sec4_5_reviews .swiper-pagination{
  position:absolute; bottom:8px; left:0; width:100%; text-align:center;
}
#m_sec4_5_reviews .swiper-pagination-bullet{
  width:7px; height:7px; background:#bbb; opacity:1;
  margin:0 3px !important; border-radius:50%; transition:background .25s;
}
#m_sec4_5_reviews .swiper-pagination-bullet-active{ background:#ed4747; }

/* BASIC css end */