@charset "UTF-8";
/*  메인 페이지 스타일 파일입니다. */
.main {
  position: relative;
  min-width: 1200px;
}
.main__row {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: row;
  max-width: 1200px;
  width: 100%;
  height: 100%;
  margin: auto;
}
.main__row-display {
  width: 100%;
}
.main__row--full {
  min-width: 1200px;
  max-width: 100%;
  display: block;
  margin-block-end: 120px;
}
.main__row--full .swiper {
  min-width: 1200px;
}
.main__row--full .skin-banner__skeleton {
  height: 500px;
}
.main__row--banner-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 440px 200px;
  gap: 20px 24px;
  margin-block-end: 120px;
}
.main__row--banner-single {
  width: 100%;
  display: block;
  margin-block-end: 120px;
}

.skin-banner--main-left ~ .main__row-display {
  flex: 1;
  min-width: calc(816px - 24px);
}


/*========================================================================
메인
========================================================================*/
/* 메인 카테고리 */
.main-nav { display:block; }

/* 비주얼 배너 */
.main__row--full { margin-bottom:0; }
.main__row--full .swiper { min-width:var(--pc-width); padding:0 0 50px; }
.main__row .skin-banner__img { max-width:none; }
.main__row .skin-banner .swiper-slide { display: flex; justify-content: center; }
.main__row .skin-banner .swiper-slide.swiper-slide-active { z-index:1; }

/* 페이져 */
.main__row .skin-banner .swiper-pagination { display:flex; bottom:12px; left: 50%; transform: translateX(-50%); width:450px; background:var(--default-color); }
.main__row .skin-banner .swiper-pagination span { position:relative; flex:1; width:auto; height:2px; margin:0; font-size:0; background:var(--black-color); opacity:1; }
.main__row .skin-banner .swiper-pagination span.swiper-pagination-bullet-active,
.main__row .skin-banner .swiper-pagination span.swiper-pagination-bullet-active + span,
.main__row .skin-banner .swiper-pagination span.swiper-pagination-bullet-active ~ span { background:none; }
.main__row .skin-banner .swiper-pagination span::after { content:''; position:absolute; top:0; left:0; width:0; height:100%; background:var(--black-color); }
.main__row .skin-banner .swiper-pagination span.swiper-pagination-bullet-active::after { width:100%; transition:width .3s; }
/* 버튼 */
.main__row .skin-banner__slider-nav-warp { top:auto; bottom:0; width:500px; }
.main__row .skin-banner__slider-nav-warp :is(.swiper-button-prev, .swiper-button-next) { width:25px; height:25px; }
.main__row .swiper-button-prev:after,
.main__row .swiper-button-next:after { font-size:14px; font-weight:700; color:var(--gray-font-color); }

/* 퀵메뉴 */
.quickmenu-wrap { margin: 75px 0 140px; } 
.quickmenu { display: flex; justify-content: center; align-items: center; gap: 80px; } 
.quickmenu li a { display: flex; flex-direction: column; gap: 20px; font-size: 17px; font-weight: 600; color: var(--black-color); text-align: center; transition: .4s; } 
.quickmenu li a img { max-width: 80px; } 
.quickmenu li a:hover { opacity: .8; } 

/* 메인 상품 공통 */
.main__row:not(.main__row--full) { max-width:var(--pc-width); }
.product-section__title-wrap { display:flex; align-items: center; gap: 20px; padding-bottom:20px; } 
.display-product__title,
.product-section__title { margin: 0; padding: 0; font-size: 30px; font-weight: 700; line-height: 37px; white-space: normal; } 
.product-section__description { font-size: 18px; font-weight: 500; color: var(--gray-color); line-height: 30px; } 
.display-product__more { display:none; font-size: 18px; color: var(--gray-color); }
.display-product__more::after { content:'+'; display:inline-block; vertical-align: top; line-height: 1.3;}
.display-product__more .ico { display:none; }

.main-best-product .display-product__contents > .thumb-item { position:relative; }
.main-best-product .display-product__contents > .thumb-item::before { content: attr(data-index); display:block; position: absolute; top: 0; left: 0; width: 35px; background: var(--gray-color); font-size: 16px; font-weight: 700; color: var(--whole-color); line-height: 35px; text-align: center; z-index:1; }
.main-best-product .display-product__contents > .thumb-item:nth-child(-n+4)::before { background: var(--point-background-color); }

/* 메인 후기 */
.board-reviews-list__list { display:flex; align-items: center; margin:var(--gap) 0 140px; }
.board-reviews-list__list > li { width:calc((100% - 160px)/ 5); border:1px solid #ddd; box-sizing:border-box; }
.board-reviews-list__list > li:nth-child(n+2) { margin-left:40px; }
.board-reviews-list__list > li:nth-child(n+6) { display:none; }
.board-reviews-list__list > li a { display:block; position:relative; width:100%; height:0; padding-top:100%; }
.board-reviews-list__list > li .board-reviews-item__product-info img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.board-reviews-list__list > li .board-reviews-item__top { padding:18px 20px; }
.board-reviews-list__list > li .board-reviews-item__content-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 62px; line-height: 1.3; margin-bottom: 20px; }
.board-reviews-item__write-info { display: flex; align-items: center; justify-content: space-between; }
.board-reviews-item__writer { font-size: 13px; color: var(--gray-color); }
/* 별점 */
.rating-star::before, .rating-star__progress { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/assets/_dbook/img/ic_rating_sprite.png'); background-repeat:no-repeat; } 
.rating-star { display:flex; position:relative; width: 147px; } 
.rating-star::before { background-position: -10px -141px; } 
.rating-star .rating-star__progress { background-position: -10px -89px; } 
.rating-star--sm { width: 94px; height:21px; font-size:0; } 
.rating-star--sm::before { content:''; background-position: -10px -47px; } 
.rating-star--sm .rating-star__progress { background-position: -10px -6px; } 

/* 시군몰 연계 메뉴 */
[class*="dis-flex"] { display: flex; align-items: center; }
.dis-flex-jsb { justify-content: space-between; }
.dis-flex-fdc { align-items: unset; flex-direction: column; } 

.related-wrap { padding: 100px 0; background: #F7F9E6; letter-spacing: -.03em; } 
.related-wrap .pc-content-width { align-items: end; width: var(--pc-width); margin: 0 auto; } 
.related-wrap .related-left { width: 50.138%; } 
.related-mall { width: 39.242%; padding: 30px; border-radius: 20px; background: var(--whole-color); box-shadow: 0 0 10px rgba(0,0,0,0.1); } 
.related-mall > div > div:not(:last-child) { margin: 0 0 30px; padding: 0 0 30px; border-bottom: 1px dashed var(--default-color); } 
.related-mall > div.hidden { display:none; }
.related-mall .related-title { gap: 20px; font-weight: 500; color: var(--gray-font-color); white-space: nowrap; } 
.related-mall .related-title a { transition: opacity .4s; } 
.related-mall .related-title a:hover { opacity: .8; } 
.related-mall .related-title .related-info { gap: 20px; white-space: initial; } 
.related-mall .related-title .related-info img { max-width: 110px; } 
.related-mall .related-title .related-info h3 { margin: 0 0 10px; font-size: 20px; color: var(--dark-gray-color); line-height: 24px; word-break: keep-all; } 
.related-mall .related-title .related-info a { display:inline-block; max-width:240px; padding: 0 0 0 22px; background: url('/assets/_dbook/img/ic_link.png') no-repeat 0 50%; background-size:14px auto; font-size: 16px; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.related-mall .related-title .btn-goto { padding: 8px 44px 8px 20px; border-radius: 5px; background: #f5f5f5 url('/assets/_dbook/img/ic_link_arr.png') no-repeat calc(100% - 20px) 50%; background-size:18px auto; font-size: 15px; line-height: 18px; } 
.related-mall .related-introduce { font-size: 16px; font-weight: 500; color: var(--gray-font-color); } 
.related-mall .related-introduce h4 { margin: 0 0 15px; font-size: 18px; color: var(--dark-gray-color); } 
.related-mall .related-introduce > p { line-height: 24px; word-break: keep-all; } 
.related-mall .related-introduce ul { gap: 30px 15px; align-items:start; } 
.related-mall .related-introduce ul li { gap: 8px; width: 70px; line-height: 19px; text-align: center; } 
.related-mall .related-introduce ul li img { width: 100%; } 
.related-map { position: relative; padding: 37.002%; background: url('/assets/_dbook/img/img_map.png') no-repeat 100% 100%; background-size:auto 482px; } 
.related-map button { position: absolute; padding: 0; border: 0; background: transparent url('/assets/_dbook/img/ic_map_off.png') no-repeat 0 0; background-size:30px auto; font-size: 0; transition: opacity .4s; } 
.related-map button.selected { background-image: url('/assets/_dbook/img/ic_map_on.png'); } 
.related-map button.btn-mall-iksan { top: 82px; left: 278px; width: 82px; height: 108px; background-position: 50% 18px; } 
.related-map button.btn-mall-muju { top: 120px; right: 34px; width: 125px; height: 108px; background-position: 50% 24px; } 
.related-map button.btn-mall-jinan { top: 197px; right: 171px; width: 98px; height: 91px; background-position: 50% 46px; } 
.related-map button.btn-mall-jangsu { top: 299px; right: 110px; width: 102px; height: 106px; background-position: 50%; } 
.related-map button.btn-mall-imsil { top: 321px; right: 234px; width: 131px; height: 95px; background-position: 12px 50%; } 
.related-map button.btn-mall-gochang { top: 399px; left: 82px; width: 125px; height: 108px; background-position: 75px 50%; } 
.related-map button.btn-mall-gimje { top: 201px; left: 221px; width: 118px; height: 87px; background-position: 3px 50%; } 
.related-map button.btn-mall-wanju { top: 125px; left: 370px; width: 97px; height: 80px; background-position: 50% 46px; } 
.related-map button.btn-mall-sunchang { top: 435px; right: 301px; width: 97px; height: 90px; background-position: 50% 46px; } 
.related-map button.btn-mall-jeongeup { top: 315px; left: 221px; width: 118px; height: 87px; background-position: 50% 52px; } 
.related-map button:hover { opacity: .8; }