@charset "utf-8";

/*========================================================================
메인 레이아웃
========================================================================*/
.body-main #contents .sub_content { padding:0;}
.body-main #header { z-index:1; }
.body-main #header .header-wrap { border:0; }

body #wrap::before { content:''; position:absolute; top:0; left:0; width:100%; height:clamp(270px,75vw,360px); background:var(--point-color, #F2FAD8); transition-duration: 1s; transition-property: all; transition-timing-function: cubic-bezier(0.71, 0, 0.46, 0.99); clip-path:circle(1% at clamp(19px,5.2vw,25px) clamp(20px,5.4vw,26px)); z-index:1; }
body #wrap.on::before { clip-path:circle(100%) !important; }
body #wrap #header .top-account .basket a .count { color:#fff; }
body #wrap.on #header .top-account .basket a .count { color:var(--point-color); transition-delay:0.6s; }

/* 텍스트 모션 */
.mask-txt { display:inline-block; mask-image: linear-gradient(90deg, #fff 33.33%, transparent 66.66%); mask-position: 100% 0; mask-size: 300% 100%; }
.motion .mask-txt { -webkit-mask-position: 0 0; mask-position: 0 0;  transition: mask-position 1s ease; }

.w100 img { width:100%; }

/*========================================================================
메인
========================================================================*/
/* 메인 비주얼 */
.main-visual { position:relative; text-align:center; }
.main-visual .swiper-container { width:100%; padding:0 clamp(26px,7.3vw,35px) clamp(28px,7.7vw,37px); box-sizing:border-box; }
.main-visual .swiper-slide { border-radius:clamp(8px,1.7vw,10px); overflow:hidden; }
.main-visual .swiper-slide a { display:block; position:relative; }
.main-visual .swiper-slide a::before { content:''; position:absolute; bottom:0; left:0; width:100%; height:100%; background: linear-gradient(0deg, var(--point-color) 0%, rgba(248, 252, 234, 0.40) 33%, rgba(255, 255, 255, 0.00) 49.5%); pointer-events:none; }
.main-visual .swiper-slide img { width:100%; }
.main-visual .swiper-container .swiper-pagination { bottom:0; font-size:0; line-height:1; }
.main-visual .swiper-container .swiper-pagination .swiper-pagination-bullet { width:8px; height:8px; margin:0 3px; opacity:1; }

/* 비주얼 타이틀 */
.visual-title { position:absolute; bottom:clamp(60px,16.3vw,78px); left:0; width:100%; padding:0 clamp(23px,6.3vw,30px); text-align:left; box-sizing:border-box; pointer-events:none; z-index:1; }
.visual-title strong { display:block; color:#fff; font-size:1.6rem; font-weight:400; overflow:hidden; }
.visual-title h3 { margin:clamp(10px,2.7vw,13px) 0 0; font-size:0; }
.visual-title h3 span { min-width:0.6rem; color:#fff; font-size:2.8rem; font-weight:600; line-height:3.1rem; letter-spacing:-0.56px; }

/* 비주얼 타이틀 모션 */
.main-visual .swiper-slide { position:relative; }
.main-visual .swiper-slide .visual-title h3 span { display:inline-block; opacity:0; }
.main-visual .swiper-slide-active .visual-title h3 span { animation:fadeInUp .3s ease-in-out forwards;}
.main-visual .visual-title strong em { display:inline-block; transform:translateY(-1.6rem); opacity:0; }
.main-visual .swiper-slide-active .visual-title strong em { display:inline-block; transform:translateY(0); opacity:1; transition:.5s ease-in-out .2s; }

/* 원형 텍스트 */
.spin-circle { position:absolute; bottom:clamp(-23px,-4.8vw,-21px); right:clamp(42px,11.5vw,55px); width:clamp(90px,25vw,120px); z-index:1; pointer-events:none; }
.spin-circle img { max-width:100%; animation:Rotate 5s linear infinite; }
 
@keyframes fadeInUp { 
	0% { opacity:0; transform:translateY(1.8rem) } 
	100% { opacity:1; transform:translateY(0) } 
}

.main-wrap { width:100%; margin:0 auto; overflow:hidden; box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }

/* 메인 타이틀 */
.main-wrap .goods_list_tit { display:none; }
#main .main-title { position:relative; margin:0 0 clamp(21px,5.8vw,28px); line-height:1.2; text-align:left; letter-spacing:-0.084rem; }
#main .main-title h2 { color:#000; font-size:2.8rem; font-weight:500; line-height:1; }
#main .main-title span { display:block; margin:16px 0 0; color:#9e9e9e; font-size:1.6rem; font-weight:300; line-height:1; letter-spacing:-0.048rem; }
#main .main-title a { display:block; position:relative; background:url("../img/main_more_btn.png") no-repeat top 50% right 0; background-size:clamp(8px,1.7vw,10px) auto; }

/* 더보기 */
.main-more-btn { display:inline-block; position:relative; width:115px; height:37px; line-height:35px; margin:20px 0 0; background:var(--point-color); border-radius:20px; color:#fff; font-size:14px; text-align:center; border:1px solid var(--point-color); box-sizing:border-box; overflow:hidden; transition:all .3s; vertical-align:top; }

/* 메인 간격 */
.main-box { margin:clamp(34px,9vw,43px) 0 clamp(62px,16.7vw,80px); }
.main-box2 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box3 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box4 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box5 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box6 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box7 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box8 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box8-2 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box8-3 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box9 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box10 { margin:clamp(62px,16.7vw,80px) 0; }
.main-box11 { margin:clamp(62px,16.7vw,80px) 0; }

/* main-box */
.main-hot-keyword { padding:0 clamp(20px,5.4vw,26px); }
.hot-keyword-cont dl { display:flex; align-items:center; justify-content:space-between; padding:clamp(8px,3.3vw,10px) 0; border-bottom:1px solid #eee;  }
.hot-keyword-cont dl:first-child { padding-top:0; }
.hot-keyword-cont dl:last-child { padding-bottom:0; border-bottom:0; }
.hot-keyword-cont dt { width: calc(100% - 100px); box-sizing:border-box; padding-right:10%; }
.hot-keyword-cont dd ul { display:flex; justify-content:space-between; gap:clamp(9px,2.7vw,13px); }
.hot-keyword-cont dd ul li { border-radius:50%; overflow:hidden; }
.hot-keyword-cont dd ul li img { max-width:100%; }
.hot-keyword-cont dl dt a img { width:100%; }
.hot-keyword-cont dl:nth-child(1) dt a img { max-width:130px; }
.hot-keyword-cont dl:nth-child(2) dt a img { max-width:223px; }
.hot-keyword-cont dl:nth-child(3) dt a img { max-width:246px; }

/* main-box2 */
.main-event-bn img { width:100%; } 

/* main-prd */
.main-prd { padding:0 clamp(20px,5.4vw,26px); }
.main-prd .main-prd-bn { border-radius:clamp(8px,1.7vw,10px); overflow:hidden; }
.main-prd .main-prd-bn span { display:block; }
.main-prd .goods_list_cont > div > ul { display:flex; gap:13px; padding:13px 0 0; }
.main-prd .goods_list_cont > div > ul > li { flex:1; }
.main-prd .item_cont { padding:0; }

/* main-box5 */
.main-event .main-title { padding:0 clamp(20px,5.4vw,26px); }
.main-event .swiper-container { padding:0 clamp(20px,5.4vw,26px); }
/* .main-event img { width: 100%;}  */

/* 베스트 상품 */
#main .best-prd .main-title { margin:0 0 clamp(9px,3.8vw,14px); padding:0 clamp(20px,5.4vw,26px); }
.best-prd .tab-template {  overflow:visible; padding:0 clamp(20px,5.4vw,26px); box-sizing:border-box;  }
.best-prd .tab-template ul { width:auto; margin:0 0 26px;  }
.best-prd .tab-template li { width:auto; height:auto; padding:10px 20px; margin:0; color:#424242; font-size:20px; font-weight:600; line-height:1; border-radius:50px; background:none; border:solid 1px #d8d8d8; cursor:pointer; }
.best-prd .tab-template li.swiper-slide-thumb-active { color:#fff; font-weight:600; background:var(--point-color); }
.best-prd .tab-contents > div > .swiper-slide { background:#fff; }
/* 상품  */
.best-prd .item_gallery_type ul li { position:relative; margin:0 0 15px; }
.best-prd .item_gallery_type ul li::after { content:attr(data-index); display:block; position:absolute; top:0; left:7px;  width:24px; height:24px; line-height:24px; color:#fff; font-size:12px; font-weight:500; background: rgba(70, 70, 70, 0.8); border-radius:10px 0 0 0; } 


/* main-box7 */
.main-slide-bn .main-title { padding:0 clamp(20px,5.4vw,26px); }
.main-slide-bn .swiper-slide { position:relative; } 
.main-slide-bn .swiper-slide span { display:block; }
.main-slide-bn .swiper-slide span img { width:100%; }
.main-slide-bn .swiper-slide .desc { display:flex; flex-direction:column; justify-content:end; gap:clamp(15px,3.8vw,18px); position:absolute; top:0; left:0; width:100%; height:100%; padding:clamp(89px,24.6vw,118px) clamp(27px,7.5vw,36px); box-sizing:border-box; animation-delay:1s; pointer-events:none; }
.main-slide-bn .swiper-slide .desc h3 { color:#fff; font-size:2.8rem; font-weight:500; line-height:3.5rem; letter-spacing:-.078rem; font-family:pretendard; }
.main-slide-bn .swiper-slide .desc .tag { display:flex; gap:12px; }
.main-slide-bn .swiper-slide .desc .tag span { padding:clamp(9px,2.3vw,11px) clamp(15px,4vw,19px); color:#fff; font-size:1.5rem; line-height:1; letter-spacing:.075rem; background:rgba(256, 256, 256, 0.20); border:1px solid rgba(255,255,255,.5); border-radius:25px; box-sizing:border-box; }
.main-slide-bn .swiper-container .swiper-controller { display:flex; flex-direction:column; gap:clamp(16px,4.2vw,20px); position:absolute; bottom:clamp(32px,8.3vw,40px); left:0; width:100%; padding:0 clamp(20px,5.4vw,26px); box-sizing:border-box; animation-delay:1s; z-index:1; }
.main-slide-bn .swiper-controller .swiper-scrollbar { height:2px; background:rgba(255,255,255,.45); border-radius:0; }
.main-slide-bn .swiper-controller .swiper-scrollbar-drag { background:#fff; border-radius:0; }
.main-slide-bn .swiper-controller .swiper-nav-btn { display:flex; justify-content:end; gap:clamp(25px,6.3vw,30px); }
.main-slide-bn .swiper-controller .swiper-nav-btn :is(.swiper-button-next, .swiper-button-prev) { position:static; width:clamp(11px,2.9vw,14px); height:clamp(21px,5.8vw,28px); margin:0; }
.main-slide-bn .swiper-controller .swiper-nav-btn .swiper-button-next { background:url("/_dbook/img/main_next_btn.png") no-repeat; background-size:100%; }
.main-slide-bn .swiper-controller .swiper-nav-btn .swiper-button-prev { background:url("/_dbook/img/main_prev_btn.png") no-repeat; background-size:100%; }

/* main-box8-1 */
/* 공통 */
#main .extra-prd .main-title { margin:25px 0 28px ; }
#main .extra-prd .main-title h2 { font-size:3rem; font-weight:600; line-height:1.4; }
#main .extra-prd .main-title span { font-size:2rem; font-family:pretendard; }
#main .extra-prd .prd-box > a { display:flex; align-items: center; justify-content: center; width:100%; padding:4.86% 0; font-size:22px; border:solid 1px #c8c8c8; border-radius:12px; box-sizing:border-box; }
#main .extra-prd .prd-box > a span {  width:10px; height:16px; margin-left:10px;  background:url("../img/prd_link_btn.png") no-repeat; background-size:contain; }

/* main-box8 
.main-prd3 .main-title { padding:0 clamp(20px,5.4vw,26px); }
*/
/* main-box9 */
.main-mid-bn a { display:block; position:relative; }
.main-mid-bn .mid-bn { display:block; position:relative; padding:0 clamp(44px,12.1vw,58px) 0 clamp(104px,28.8vw,138px); z-index:1; }
.main-mid-bn .mid-bn img { width:100%; vertical-align:top; }
.main-mid-bn .desc { display:flex; flex-direction:column; justify-content:center; align-items:start; position:absolute; top:0; left:0; width:100%; height:100%; padding:0 clamp(20px,5.4vw,26px); box-sizing:border-box; }
.main-mid-bn .desc h3 { padding:0 0 clamp(9px,2.5vw,12px); color:#fff; font-size:2.4rem; font-weight:700; line-height:1; letter-spacing:.072rem; border-bottom:clamp(1px,0.4vw,2px) solid #fff; }
.main-mid-bn .desc p { margin:clamp(16px,4.2vw,20px) 0 0; color:#fff; font-size:2.2rem; font-weight:500; line-height:2.5rem; letter-spacing:.066rem; }
.main-mid-bn .slide-line { position:absolute; left:clamp(-109px,-22.7vw,-82px); top:50%; transform:translateY(-50%); width:0; height:clamp(164px,45.4vw,218px); background:#000; }
.motion .main-mid-bn .slide-line { width:calc(100% - clamp(20px,5.4vw,26px)); transition:width 1s cubic-bezier(.76,0,.24,1); }
.main-mid-bn .slide-line .slide-ball { position:absolute; top:0; right:clamp(-109px,-22.7vw,-82px); width:clamp(164px,45.4vw,218px); height:100%; border-radius:50%; background:#000; }

/* main-box10 */
.main-mid2-bn { padding:0 clamp(20px,5.4vw,26px); }
.main-mid2-bn ul { display:flex; flex-direction:column; gap:20px; }
.main-mid2-bn ul li { position:relative; width:clamp(165px,45.8vw,220px); height:clamp(165px,45.8vw,220px); margin:0 auto; background:#EBEBED; border-radius:50%; overflow:hidden; text-align:right; }
.motion .main-mid2-bn ul li { width:100%; border-radius:clamp(12px,3.1vw,15px); transition:all .5s 1s cubic-bezier(.76,0,.24,1); }
.main-mid2-bn ul li a { display:block; }
.main-mid2-bn ul li img { width:clamp(165px,45.8vw,220px); }
.main-mid2-bn ul li .desc { display:flex; justify-content:center; flex-direction:column; gap:clamp(12px,2.9vw,14px); position:absolute; top:0; left:0; width:100%; height:100%; padding:clamp(16px,4.2vw,20px) clamp(27px,7.5vw,36px); text-align:left; box-sizing:border-box; pointer-events:none; }
.main-mid2-bn ul li .desc h2 { color:#000; font-size:1.8rem; font-weight:700; line-height:1; letter-spacing:-.054rem; }
.main-mid2-bn ul li .desc p { color:#000; font-size:2rem; font-weight:600; line-height:2.3rem; letter-spacing:-.06rem; }
.main-mid2-bn ul li .desc i { width:clamp(24px,6.5vw,31px); height:clamp(24px,6.5vw,31px); margin:clamp(6px,1.5vw,7px) 0 0; background:url("../img/main_mid2_arr.png") no-repeat; background-size:100%; }
.main-mid2-bn ul li .desc i span { font-size:0; }

/* main-box11 */
.main-review .main-title { padding:0 clamp(20px,5.4vw,26px); }
.main-review .swiper-container { padding:0 clamp(20px,5.4vw,26px); box-sizing:border-box; }
.main-review .review-box { position:relative; border-radius:clamp(8px,1.7vw,10px); box-sizing:border-box; }
.main-review .review-box .review-wrap { position:absolute; bottom:0; width:100%; height:clamp(80px,21.7vw,104px); padding:clamp(12px,3.1vw,15px); box-sizing:border-box; transition:.2s cubic-bezier(.76,0,.24,1);; }
.main-review .review-box .review-wrap-inner { display:flex; gap:12px; height:100%; padding:clamp(8px,2.1vw,10px); background:rgba(255,255,255,.74); border-radius:clamp(8px,1.7vw,10px); overflow:hidden; box-sizing:border-box; }
.main-review .review-box .prd-img img { width:100%; height:100%; object-fit:cover; }
.main-review .review-box .review-wrap-inner .prd-img { width:clamp(40px,11.3vw,54px); height:clamp(40px,11.3vw,54px); }
.main-review .review-box .review-wrap-inner .prd-img span { display:block; }
.main-review .review-box .review-wrap-inner .review-cont { flex:1; }
.main-review .review-box .review-wrap-inner .review-cont a { display:block; height:100%; }  
.main-review .review-box .review-wrap-inner .star { width:clamp(48px,13.1vw,63px); height:clamp(9px,2.5vw,12px); background: url("../img/star_bg.png") no-repeat left top; background-size:100%; font-size:0; margin:0 0 clamp(6.5px,1.7vw,8px); }
.main-review .review-box .review-wrap-inner .star span { display:block; height:clamp(9px,2.5vw,12px); background: url("../../_dbook/img/star_fill.png") no-repeat left top; background-size:auto 100%; }
.main-review .review-box .review-wrap-inner .review-content { height:3.2rem; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#424242; font-size:1.4rem; font-weight:200; line-height:1.6rem; }
/* hover - pc에서만 */
body.pc .main-review .review-box:hover .review-wrap { height:100%; transition:.4s cubic-bezier(.76,0,.24,1); }
body.pc .main-review .review-box:hover .review-wrap .review-wrap-inner .review-content { height:calc(10 * 1.6rem); -webkit-line-clamp:10; transition:.4s cubic-bezier(.76,0,.24,1); }
.main-review .prd-name { margin:clamp(13px,3.5vw,17px) 0 0; padding:clamp(11px,2.9vw,14px) 0 0; border-top:1px solid #EEEEEE; }
.main-review .prd-name a { color:#616161; font-size:1.4rem; font-weight:300; line-height:1; }

/* main-box12 */
.main-insta { padding:0 clamp(20px,5.4vw,26px); }
.main-insta .main-title i { display:inline-block; font-size:0; vertical-align:top; }
.main-insta .main-title i img { width:2rem; margin-top:.4rem; vertical-align:top; }