/* BASIC css start */
#header .mh_sec01 {position:absolute !important; width: 100%; z-index:10;}


/* 메인이미지 영역 */
/* iOS only (메인비주얼 100vh 아이폰 호환 관련) */ 
@supports (-webkit-touch-callout: none) {height: -webkit-fill-available;}

.swiper0 {margin-bottom:64px;}
.swiper0 .swiper-slide {width:100%; height:calc(var(--vh, 1vh) * 96); position:relative;}
.swiper0 .swiper-slide-active .bg {transform: scale(1);}
.swiper0 .bg {transform: scale(1.12); transition: 5s ease;}
.swiper0 .bg01 {width:100%; height:100%;}
.swiper0 .bg02 {width:100%; height:100%;}
.swiper0 .bg03 {width:100%; height:100%;}
.swiper0 .bg04 {width:100%; height:100%;}

.swiper0 .main_bg_text {position:absolute; bottom:16%; left:24px; letter-spacing:-0.030em;}
.swiper0 .main_bg_text .t01 {margin:0 0 16px; font-size:24px; font-weight:700; color:#231815; line-height:1.3; }
.swiper0 .main_bg_text .t02 {font-size:14px; font-weight:400; color:#231815; line-height:1.4;}
.swiper0 .main_bg_text .t03 {margin-top:32px;}
.swiper0 .main_bg_text .t03 a {display:inline-block; border:2px solid #231815; padding:8px 16px; font-size:13px; line-height:1.2; font-weight:700;}

.swiper0 .swiper-button-prev {width:32px; height:32px; margin:auto; padding:0; top:auto; bottom:30px; right:64px; left:auto; }
.swiper0 .swiper-button-next {width:32px; height:32px; margin:auto; padding:0; top:auto; bottom:30px; right:12px;}

.swiper0 .swiper-button-prev:after {font-size:24px; color: #231815;}
.swiper0 .swiper-button-next:after {font-size:24px; color: #231815;}


.swiper0 .swiper-pagination0 {display: flex; align-items: center; width:auto !important; bottom:40px !important; left:calc(24px + 4px) !important; text-align:left;}
.swiper0 .swiper-pagination0 .swiper-pagination-bullet {width:4px; height:4px; margin-right:24px !important; background:#231815;-webkit-transition: opacity 0.3s;-moz-transition: opacity 0.3s;-ms-transition: opacity 0.3s;-o-transition: opacity 0.3s;transition: opacity 0.3s;}
.swiper0 .swiper-pagination0 .swiper-pagination-bullet:after {content:""; width:0px; height:0px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#231815; border-radius:50%; opacity:0; -webkit-transition: width 0.3s , height 0.3s;-moz-transition: width 0.3s , height 0.3s;-ms-transition: width 0.3s , height 0.3s;-o-transition: width 0.3s , height 0.3s;transition: width 0.3s , height 0.3s;}
.swiper0 .swiper-pagination0 .swiper-pagination-bullet-active {width:8px; height:8px; position:relative; background:#231815; opacity:1;}
.swiper0 .swiper-pagination0 .swiper-pagination-bullet-active:after {content:""; width:20px; height:20px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#231815; border-radius:50%; opacity:0.4;}


.swiper0 .swiper-slide-active .t01 {-webkit-animation-name: fadeInUp1; animation-name: fadeInUp1; -webkit-animation-duration:1.5s !important; animation-duration:1.5s !important;
-webkit-backface-visibility: hidden; backface-visibility: hidden;}
.swiper0 .swiper-slide-active .t02 {-webkit-animation-name: fadeInUp2; animation-name: fadeInUp2; -webkit-animation-duration: 1.5s !important; animation-duration:1.5s !important;
-webkit-backface-visibility: hidden; backface-visibility: hidden;}
.swiper0 .swiper-slide-active .t03 {-webkit-animation-name: fadeInUp2; animation-name: fadeInUp2; -webkit-animation-duration: 1.5s !important; animation-duration:1.5s !important;
-webkit-backface-visibility: hidden; backface-visibility: hidden;}


@-webkit-keyframes fadeInUp1 {
  0% {opacity:0; -webkit-transform: translateY(40px); transform:translateY(40px);}
  100% {opacity:1; -webkit-transform: translateY(0); transform:translateY(0);}
}
@keyframes fadeInUp1 {
  0% {opacity:0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px);}
  100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}
@-webkit-keyframes fadeInUp2 {
  0% {opacity: 0;-webkit-transform: translateY(-40px);transform: translateY(-40px);}
  100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
}
@keyframes fadeInUp2 {
  0% {opacity: 0;-webkit-transform: translateY(-40px);-ms-transform: translateY(-40px);transform: translateY(-40px);}
  100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}
@-webkit-keyframes fadeInUp3 {
  0% {opacity: 0;-webkit-transform: translateY(0px);transform: translateY(0px);}
  100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
}
@keyframes fadeInUp3 {
  0% {opacity: 0;-webkit-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);}
  100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}


/* 메인 타이틀 */
.main_title {text-align:center; margin:0px auto 32px; font-size:0px; position:relative; letter-spacing:-0.020em;}
.main_title .title_t01 {color:#231815; font-size:16px; font-weight:700; text-align:center; line-height:1.2; }
.main_title .title_t02 {width:15px; height:1px; background-color:#231815; margin:12px auto;}
.main_title .title_t03 {color:#8a8a8a; font-size:13px; font-weight:300; text-align:center; line-height:1.5; }

/* 이벤트 배너 01  */
.event01 {margin: 64px auto 64px;}
.swiper-container.swiper02_txt .swiper-slide > a {display: block; width: 83%; margin: 0 auto;}
.swiper-container.swiper02_txt .swiper-slide > a img {width:100%; border-radius:40px 0px 40px 0px;}
.swiper-container.swiper02_txt .swiper-slide .slide_txt {padding: 39% 0 20%; margin-top: -27%; text-align: center; background-color: #f7f7f7;}
.swiper-container.swiper02_txt .swiper-slide .slide_txt .txt01 {margin-bottom: 16px; font-size:13px; font-weight:700; color:#231815; line-height:1.2; word-break:keep-all;}
.swiper-container.swiper02_txt .swiper-slide .slide_txt .txt02 {margin-bottom: 8px; font-size:22px; font-weight:700; color:#231815; line-height:1.5; word-break:keep-all; letter-spacing:-0.020em;}
.swiper-container.swiper02_txt .swiper-slide .slide_txt .txt03 {font-size:13px; font-weight:lighter; color:#fff; line-height:1.3; margin-top:0; padding-bottom:0; word-break:keep-all;}

.swiper-pagination2.swiper-pagination-bullets {bottom:27px !important;}
.swiper-pagination2 .swiper-pagination-bullet {width:9px; height:9px; border:1px solid #fff; background-color:#231815; border-radius:50%; box-sizing:border-box; vertical-align:middle; opacity:1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.swiper-pagination2 .swiper-pagination-bullet-active {width:9px; height:9px; background-color: #f7f7f7; border: 1px solid #231815; opacity:1;}


/* 탭 상품진열 */
.tab_title {margin-bottom: 32px; margin-left:24px;}
.tab_title .txt01 {font-size: 24px; font-weight: 400; color: #231815; line-height: 1.3;}
.tab_title .txt02 {margin-top: 10px; font-size: 13px; font-weight: 300; color: #8a8a8a;}

.m_tab01 {padding:0 24px;}
.m_tab01 li {display:inline-block; margin-right:4px; margin-bottom:8px; padding:8px 16px; color:#9a9a9a; font-size:13px; text-align:center; line-height:1; background-color: #f3f3f3; border-radius:16px; border: 1px solid #f3f3f3; box-sizing: border-box;}
.m_tab01 li {-webkit-transition: .3s ease-in-out; transition:.3s ease-in-out;}
.m_tab01 li.current {color:#231815; background-color: #fff; border: 1px solid #231815;}
.tabcontent01 {display:none; margin-top:24px; padding:0px;}
.tabcontent01.current {display:block;}

/* 상품진열 */
div.swiper_roll {margin:0 0 64px 24px;}
div.swiper_roll.ec-base-product > ul {padding:0 !important;}
div.swiper_roll.ec-base-product > ul > li {margin: 0 8px 40px 8px; width: 212px !important;}
div.swiper_roll.ec-base-product > ul > li:first-child {margin-left: 0;}
div.swiper-container-horizontal > .swiper-scrollbar {left:6px; width:calc(100% - 24px); height:2px; background-color:#eaeaea;}
div.swiper-scrollbar-drag {background:#231815;}


/* 배너상품진열 */
.swiper03 {width: 90%; border:1px solid #e8e8e8; box-sizing:border-box; }
.swiper03 .swiper-slide.grid_area {width:100%; float:left; margin:0; background-color: #fff; font-size:0px;}
.swiper03 .swiper-slide.grid_area .ban img {width:100%;}
.swiper03 .swiper-slide:first-child {margin-left:0px;}
.swiper03 .swiper-slide.grid_area .txt {padding: 26px; padding-bottom: 0;}
.swiper03 .swiper-slide.grid_area .txt span {display:block;}
.swiper03 .swiper-slide.grid_area .txt span.name {font-size:16px; font-weight:700; color:#231815; line-height:1.2; padding-right:10px;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.swiper03 .swiper-slide.grid_area .txt span.desc {font-size:13px; font-weight:300; color:#8a8a8a;  padding-right:10px; padding-top:12px; overflow:hidden; text-overflow:ellipsis; white-space: normal; line-height:1.6; word-wrap: break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical;}
.swiper03 .swiper-slide.grid_area .txt span.bg {margin:20px 0px; width:100%; height:14px; background:url('/design/gelcandle/mobile_nordichaus/mp_ban_bg.png') center center;}

.swiper03 .grid_area .prdList {padding: 0 23px 3px !important;}
.swiper03 .grid_area .prdList li {margin-bottom: 20px;}
.swiper03 .grid_area .thumbnail {float: left; width: 94px; margin: 0 15px 0 0;}
.swiper03 .grid_area .thumbnail .salebox {bottom: -3px; right: 6px;}
.swiper03 .grid_area .list_shoppingInfo {float: left; display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; width: calc(100% - 128px); height:96px; text-align: left;}
.swiper03 .grid_area .list_shoppingInfo p {overflow:hidden; text-overflow:ellipsis; white-space: normal; line-height:1.4; word-wrap: break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.swiper03 .grid_area .list_shoppingInfo .color span {margin-bottom: 0;}

.swiper03 .swiper-pagination-03 {top: unset; bottom: 422px; left: 50%; transform:translateX(-50%); width: 43px; height: 17px; padding-top:0px; background-color: #b4b4b4; border-radius: 17px; box-sizing: border-box; font-size: 11px; color: #cbcbcb;}

.swiper03 .swiper-pagination-03 span.swiper-pagination-current {color: #fff;}


/* 이벤트배너 02 */
.event02 {margin: 64px 0;}
.swiper04 {width: 90%; }
.swiper04 img {width: 100%; border-radius:40px 0px 40px 0px;}
.swiper04 .slide_txt {position: absolute; bottom: 18%; width: 100%; text-align: center;} 
.swiper04 .slide_txt .txt02 {margin-bottom: 15px; font-size: 22px; font-weight: 300; color: #231815;}
.swiper04 .slide_txt .txt03 {font-size: 13px; font-weight: 300; color: #5a5a5a; line-height:1.5;}
.swiper04 .swiper-pagination-04 {bottom: 24px !important;}
.swiper-pagination-04 .swiper-pagination-bullet {width:9px; height:9px; border:1px solid #9c9c9c; background-color: transparent; border-radius:50%; box-sizing:border-box; vertical-align:middle; opacity:1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.swiper-pagination-04 .swiper-pagination-bullet-active {width:9px; height:9px; background-color: #231815; border: 1px solid #231815; opacity:1;}


/* 베스트구매후기 */
.review_area {margin-top:64px;}
.swiper_r {margin-bottom: 64px;}
.swiper_r .swiper-slide {width: 212px; height: 360px; background-color: #fff; border: 1px solid #e6e6e6; box-sizing: border-box;}
.swiper_r .re_thumb img {width: 100%;}
.swiper_r .re_info {margin-top: 20px; padding: 0 17px; text-align: center;}
.swiper_r .re_info .re_name {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:8px; font-size: 12px; color: #231815;}
.swiper_r .re_info .re_desc {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; overflow:hidden; text-overflow:ellipsis; font-size: 12px !important; font-weight: 300 !important; color: #8a8a8a !important; line-height:1.3; max-height:32px;}
.swiper_r .re_info .re_line {margin: 30px auto 15px; width:100%; height:1px; background-color:#e8e8e8;}
.swiper_r .re_info .re_count {font-size:0px; text-align: left; line-height:1;}
.swiper_r .re_info .re_count span {display:inline-block; font-size:10px; line-height:1; color:#5a5a5a; font-weight:300; }
.swiper_r .re_info .re_count span:first-child {background:url('/design/gelcandle/mobile_nordichaus/re_bg_line.png') top right; background-repeat:no-repeat; padding-left:0px; padding-right:6px; margin-right: 6px;}
.swiper_r .re_info .re_count .score {float:right;}

.swiper_r .re_info .re_thumb img {width: 100%;}

.swiper_r .review_more {margin: 43px auto 0; width: 167px; height: 38px; border: 1px solid #eaeaea; font-size: 12px; color: #231815; text-align: center;}
.swiper_r .review_more a {display: block; height: 100%; padding-top: 14px; box-sizing: border-box; line-height:1; }

/* BASIC css end */