@charset "utf-8";
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

.app_dwld {}
body {background: #fff !important;}
html, body { width: 100%; height: 100% }
#wrap {position: fixed; width: 100%; overflow: hidden;}

/***** main *****/
.scroll_off {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
.vrt_center {display: table-cell; height: inherit; vertical-align: middle;}
.area {padding-left: 20px; padding-right: 20px;}
section {text-align: center;}

.fp_section {height: 100% !important;}
.fp_section:not(:first-child){display: none;}
.fp_section p {font-size: 30px;}
.fp_section .ani_text {position: relative;}
.fp_section .ani_text.left {text-align: left;}
.fp_section .ani_text.right {text-align: right;}
.fp_section .ani_text.sub_text {font-size: 16px;} 

.fp_section.active .ani_text {transition: animation 1.8s linear;}
.fp_section .ani_text.ani_center {width: 100%; right: 50%; transform: translateX(50%); left: inherit;}
.fp_section.active .ani_text.left {animation: ani-left 1.4s; animation-fill-mode: forwards;}
.fp_section.active .ani_text.bottom {animation: ani-bottom 1.4s; animation-fill-mode: forwards;}
.fp_section.active .ani_text.right {animation: ani-right 1.4s; animation-fill-mode: forwards;}
.fp_section.active .ani_text.right_bottom {animation: ani-right-bottom 1.4s; animation-fill-mode: forwards;}

.fp_section .fp_img img {max-width: 100%;}

#bodyClass #fp-nav.right {right: -2px;}
#bodyClass #fp-nav ul li a span, 
#bodyClass .fp-slidesNav ul li a span {width: 6px; height: 6px; opacity: 0.5;}
#bodyClass #fp-nav ul li a.active {right: -2px;}
#bodyClass #fp-nav ul li a.active span {width: 10px; height: 10px; opacity: 0.8;}
.fp_section .section_title {position: absolute; width: 100%; bottom: 13%; color:#fff;}
.fp_section .section_title.tl {left:20px; text-align: left;}
.fp_section .section_title.tr {right: 20px; text-align: right;}
.fp_section .section_title a {color:inherit;}
.fp_section .section_title a strong {display: block; font-size: 31px; line-height: 40px; letter-spacing: 0.2px; font-family: "Ivy Mode"; color:inherit; margin-bottom: 12px;}
.fp_section .section_title a span {display: inline-block; font-size: 15px; color:inherit; letter-spacing: -0.1px; font-family: "Noto Sans Kr", sans-serif; font-weight: 400;}
.fp_section .swiper-scrollbar {height: 2px; bottom: 2%; overflow: hidden;}
.fp_section .more_w {background:url(/resources/images/common/more_w.svg) no-repeat 100%; background-size: 8px;}
.fp_section .more_b {background:url(/resources/images/common/more_b.svg) no-repeat 100%; background-size: 8px;}

.fp_section.black .section_title {color:#333;}
.fp_section.black .more_w {background:url(/resources/images/common/more_b.svg) no-repeat 100%; background-size: 8px;}
@keyframes ani-left {
	from {
		left: -40px;
	}
	to {
		left: 0;
	}
}

@keyframes ani-right {
	from {
		right: -40px;
	}
	to {
		right: 0;
	}
}

@keyframes ani-bottom {
	from {
		bottom: -40px;
	}
	to {
		bottom: 0;
	}
}

@keyframes ani-right-bottom {
	from {
		right: 0;
		bottom: -40px;
	}
	to {
		right: 0;
		bottom: 0;
	}
}

/* section01 신제품 & 웨딩스테이셔너리 */
.section01 {z-index: 100;}
.section01 .section_banner01,
.section01 .swiper-container {height: 100%;}
.section01 .scb01 {background: url(/resources/images/main/scb01_1.jpg) no-repeat center; background-size: cover;}
.section01 .scb02 {background: url(/resources/images/main/scb01_2.jpg) no-repeat center; background-size: cover;}
.section01 .scb02 .section_title a span {display: block; text-align: right;}
.section01 .swiper-pagination.sc01 {width: calc(100% - 40px); right: 50%; transform: translateX(50%); bottom: 5%;}
.section01 .swiper-pagination-bullet {float: left; height: 1px; border-radius: 0; opacity: 1; background:#7f7f7a;}
.section01 .swiper-pagination-bullet.swiper-pagination-bullet-active {background:#fff;}

.section01 .section_title span {padding-right: 14px;}

/* section02 신제품리스트 */
.section_banner02 {margin: 30px 20px 0;}
.section_banner02 .swiper-slide {max-height:500px;}
.section_banner02 .swiper-slide img {max-width: 100%;}
.section_banner02 .new_banner_bottom {max-width: 560px; margin: 14px auto 0;}
.section_banner02 .new_banner_bottom::after {content:""; display: block; clear: both;}
.section_banner02 .new_banner_bottom .swiper-pagination.sc02 {position: static; width: 40px; float: left; text-align: left;}
.section_banner02 .new_banner_bottom .swiper-pagination.sc02 span {font-family: "나눔명조";}
.section_banner02 .swiper-scrollbar.sc02 {float: right; top:9px; width: calc(100% - 50px); height: 1px;}

/* section03 무료샘플 */
.section03 .fp_img {max-height: 816px; height: 100%; background: url(/resources/images/main/scb03_2.jpg) no-repeat center; background-size:cover;}
.section03 .fp-tableCell {vertical-align: top;}
.section03 .section_title {bottom: 10%; color:#333;}
.section03.fp_section .section_title strong {font-size: 34px;}
.section03 .section_title span {padding-right: 14px;}

/* section04 큐레이션 */
.section04 {background: #fff;}
.section04 .section_title {position: static; margin-top: 15%; color:#333;}
.section04 .section_title span {padding-right: 14px;}

/* section05 브랜드스토리 */
/* .section05 {min-height: 100vh; height: 100%; background: url(/resources/images/main/scb05.jpg) no-repeat center; background-size:cover;} */
.section05 {}
.section05 .area {width: 100%; height: 100%; overflow: hidden; padding:0; margin: 0px auto; position: relative;}
.section05 video {width: 100vw; height: 100%; object-fit: cover;}
.section05 .video_bg {position:absolute; top:0; width: 100%; height: 100%; background:rgba(0,0,0,0.35);}
.section05.fp_section .section_title a strong {font-size: 34px; margin-bottom: 8px;}
.section05 .section_title {}
.section05 .section_title span {line-height: 22px;}

/* 샘플후기, 구매후기 독려 팝업 */
.review_pop * {font-family: "Noto Sans Kr", sans-serif;}
.review_pop {display: none; position: fixed; width: 100%; height: 100%; top:0; right:0; bottom:0; left:0;  background:rgba(0,0,0,0.6); z-index: 1000;} 
.review_pop .review_pop_contents { position: absolute; max-width: 380px; background: transparent; width: 90%; top:50%; right:50%; transform:translate(50%, -50%); background: transparent; }
.review_pop .layer_contents {position: relative; height: 340px; padding:36px 30px; background: #fff;}
.review_pop .layer_contents button {position: absolute; top:12px; right:12px; background: none; border:0;}
.review_pop .main_text {font-size: 21px; line-height: 30px; letter-spacing: -0.53px; color:#333;}
.review_pop .main_text strong {display: block; font-weight: bold;}
.review_pop .sub_text {font-size: 16px; color:#757575; letter-spacing: -0.4px; margin: 14px 0 30px; word-break: keep-all;}
.review_pop .sub_text strong {font-weight: bold; color:#333;}
.review_pop .review_img {max-width: 100%;}
.review_pop .review_bottom { position: relative;} 
.review_pop .review_bottom:after { content:""; display: block; clear: both; } 
.review_pop .review_bottom a { display: block; height:60px; line-height:60px; font-size:16px; color:#333; text-align: center; border:1px solid #333; box-sizing: border-box; } 
.review_pop .review_bottom a.type01 {background:#333; color:#fff;}
.review_pop .review_bottom a.type02 {background: #fff;}
.review_pop .review_bottom.type02 .btn {float: left; width: calc(100% / 2); padding: 0; } 
.review_pop .today_check {margin-top: 18px; text-align: center;}
.review_pop .today_check input[type="checkbox"] {appearance : auto;}
.review_pop .today_check label {font-size: 14px; color:#fff; margin-left: 4px;}

#reviewPop01,
#reviewPop01 .review_pop_contents {z-index: 1002;}

#reviewPop02,
#reviewPop02 .review_pop_contents {z-index: 1001;}