@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

.font12 { font-size:13px; letter-spacing:-0.1px; line-height:20px; word-break:keep-all;}
.font12_bot { font-size:13px; letter-spacing:-0.2px; line-height:22px; word-break:keep-all;}
.font14_k { font-size:15px; letter-spacing:-0.4px; line-height:24px; word-break:keep-all;}
.font14_e { font-size:15px; letter-spacing:-0.1px; line-height:24px; word-break:keep-all;}
.font18_d { font-size:19px; letter-spacing:-0.3px; line-height:30px; word-break:keep-all;}
.font18_m { font-size:19px; letter-spacing:-0.3px; line-height:28px; word-break:keep-all;}
.font19 { font-size:20px; letter-spacing:-0.1px; line-height:30px; word-break:keep-all;}
.font20 { font-size:21px; letter-spacing:-0.1px; line-height:1.45; word-break:keep-all;}
.font26_d { font-size:28px; letter-spacing:-0.39px; line-height:44px; word-break:keep-all;}
.font26_m { font-size:28px; letter-spacing:-0.1px; line-height:36px; word-break:keep-all;}
.font32_d { font-size:34px; letter-spacing:-0.72px; line-height:44px; word-break:keep-all;}
.font32_b { font-size:34px; line-height:44px; word-break:keep-all; }
.font42 { font-size:44px; letter-spacing:-0.9px; line-height:50px; word-break:keep-all;}



.font12 { font-size:13px; letter-spacing:-0.1px; line-height:20px; word-break:keep-all;}
.font13 { font-size:13px; letter-spacing:-0.1px; line-height:20px; word-break:keep-all;}
.font14 { font-size:15px; letter-spacing:-0.4px; line-height:24px; word-break:keep-all;}
.font16 { font-size:17px; letter-spacing:-0.4px; line-height:26px; word-break:keep-all;}
.font17 { font-size:17px; letter-spacing:-0.4px; line-height:26px; word-break:keep-all;}
.font18 { font-size:19px !important; letter-spacing:-0.3px; line-height:30px; word-break:keep-all;}
.font26 { font-size:28px; letter-spacing:-0.1px; line-height:36px; word-break:keep-all;}
.font32 { font-size:34px; letter-spacing:-0.72px; line-height:44px; word-break:keep-all;}
.font42 { font-size:44px; letter-spacing:-0.9px; line-height:50px; word-break:keep-all;}
.font20 {font-size:21px; letter-spacing: -0.1px;line-height: 1.45;word-break: keep-all;}
.default-ls { letter-spacing:0; }


.SDGR {
    font-family: 'Pretendard Variable';
    font-weight: 400;
}

.SDGM {
    font-family: 'Pretendard Variable';
    font-weight: 500;
}

.SDGS {
    font-family: 'Pretendard Variable';
    font-weight: 600;
}

.IL { font-family:Inter; }
.IR { font-family:Inter; }
.IM { font-family:Inter-Medium; }
.IS { font-family:Inter-SemiBold; }




.mainTitle { font-size:32px; letter-spacing:-0.72px; line-height:44px; word-break:keep-all;}
.mainContent { font-size:14px; letter-spacing:-0.4px; line-height:24px; word-break:keep-all;}


.slideup-default-left{
  opacity:0;
  transform:translateX(100px);
}

.slideup-default-right{
  opacity:0;
  transform:translateX(-100px);
}

.slideup-coupon{
  opacity:0;
  transform:translateY(15px);
}

.slideup-default, .slideup-etc, .slideup-default-title, .slideup-brand{
  opacity:0;
  transform:translateY(70px);
}

.slideup-arrow1, .slideup-arrow2, .slideup-opacity{
  opacity:0;
}

.bottom-to-up-eng-title{
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.bottom-to-up-kor-title{
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) .15s, opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) .15s
}

.bottom-to-up-coupon{
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) .15s, opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) .15s
}

.bottom-to-up{
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .8s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.bottom-to-up-delay1{
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.bottom-to-up-delay2{
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s, opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1) .5s
}

.bottom-to-up-delay3{
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s, opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1s
}

.color-change{
  transition: all 1s ease-in-out
}

.fade-in{
  transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.fade-in2{
  transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1) .5s
}

.active span.on:after{
  position: relative;
  right: 0px;
  top: 6px;
  content: '';
  display: inline-block;
  width: 2px;
  height: 32px;
  background: #fff;
}

.layerPopupArea {overflow:auto; position:fixed; left:0; top:0; z-index:3000; display:none; width:100%; height:100%; padding:25px; background:rgba(0,0,0,.4); box-sizing:border-box;}
.layerPopupArea .layerPopup {position:relative; width:100%;}
.layerPopupArea.floating .layerPopup {height:100%;}
.layerPopupArea .layerPopup .layerGround {width:100%; background:#fff; box-shadow:10px 10px 20px rgba(0,0,0,.2); opacity:0; transition:opacity .6s;}
.layerPopupArea.on .layerGround {opacity:1;}
.layerPopupArea.floating .layerGround {position:absolute; left:calc(50% - 390px); margin:0; top:50%; width:780px;}
.layerPopupArea .layerPopup .layerGround .layerClose {position:absolute; right:10px; top:10px; width:14px; height:14px; padding:10px; font-size:0;}
.layerPopupArea .layerPopup .layerGround .layerBody {position:relative; padding:20px 67px 40px;}
.layerPopupArea .layerPopup .layerGround .titleArea {position:relative; display:inline-block; padding:75px 0 0 67px; margin-right:50px; font-size:17px; color:#222;}

.checkbox-deco{position:relative;display:inline-block;width:11px;height:11px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #a1a1a1; margin-bottom:-3px; margin-left:2px; display:inline-block !important;}
.checkbox-deco .after,
.checkbox-deco .before{position:absolute;width:1.5px;background-color:currentColor;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;opacity:0;}
.checkbox-deco .before{top:7px;left:5px;height:14px;-webkit-transform:rotate(-150deg);-ms-transform:rotate(-150deg);transform:rotate(-150deg);display:visible;opacity:0;}
.checkbox-deco .after{top:2px;left:0px;height:7px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);display:visible;opacity:0;}

/* .checkbox-deco .after,
.checkbox-deco .before{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease;animation-timing-function:ease; animation-delay:2s; -webkit-animation-delay:2s;}
.checkbox-deco .before{-webkit-animation-name:checkmark-check-up;animation-name:checkmark-check-up;}
.checkbox-deco .after{-webkit-animation-name:checkmark-check-down;animation-name:checkmark-check-down;} */

@-webkit-keyframes checkmark-check-down{
0%{height:0; opacity:1}
100%,
20%{height:7px; opacity:1}
}
@keyframes checkmark-check-down{
0%{height:0; opacity:1}
100%,
20%{height:7px; opacity:1}
}
@-webkit-keyframes checkmark-check-up{
0%,
20%{height:0; opacity:1}
100%,
40%{height:14px; opacity:1}
}
@keyframes checkmark-check-up{
0%,
20%{height:0; opacity:1}
100%,
40%{height:14px; opacity:1}
}

.product-color{color:#cb6b6b;}


.detailSection1{margin-top:124px; padding:5% 0 15% 9%; background-position:center; background-size:cover; background-repeat:no-repeat;}
.detailSection2{padding:270px 0 76px; background-color:#fff; text-align:center;}
.detailSection3{padding:10% 0 10% 9%; background-position:center; background-size:cover;}
.detailSection4{padding:10% 0 10% 59%; background-position:center; background-size:cover;}
.detailSection5{padding:10% 0 7.5% 9%; background-position:center; background-size:cover;}
.detailSection6{padding:10% 9% 7.5% 9%; background-color:#f2f5f7;}
.detailSection7{padding:149px 0 76px; background-position:center; background-size:cover; text-align:center;}
.detailSection8{background-color:#fff; position:relative;}
.detailSection8-1{padding-top:140px; text-align:center; background-color:#fafbfc; position:relative; height:620px;}
.detailSection8-2{margin:0 auto; width:1103px; position:absolute; top:175px; left:calc(50% - 551px);}
.detailSection9{padding:6.7% 0 9% 9%; background-color:#fafbfc; width:41%; float:left;}
.detailSection9-1{height:280px;}
.detailSection9-2{width:50%; float:left; background-color:#fafbfc; padding:7.85% 0;}
.detailSection10, .detailSection10-1, .detailSection10-2, .detailSection10-3, .detailSection10-4, .detailSection10-5, .detailSection10-6, .detailSection10-7, .detailSection10-8, .detailSection10-9, .detailSection10-10{float:left; padding:6.7% 0 16% 9%; background-color:#fff; width:41%;}
.detailSection11{padding:8% 0 6%; background-color:#fafbfc; text-align:center;}
.detailSection11-1{width:50%; margin:70px auto 0;}
.detailSection11-2{padding:7.5% 0; text-align:center; background-position:center; background-size:cover;}
.detailSection12, .detailSection12-1, .detailSection12-2, .detailSection12-3{float:left; padding:6.7% 0 16% 9%; background-color:#fff; width:41%;}
.detailSection13{padding:6.7% 0 150px 9%; background-color:#d9dce2; width:41%; float:left;}
.detailSection13-1{width:41%; float:left; background-color:#d9dce2; padding:6.7% 0 150px 9%;}
.detailSection14{padding: 128px 120px 100px 19%; background-position:left; background-size:cover; text-align:center;}

.whiteBack{width:100%; height:250px; background-color:#fff;}

.checklistSection{width:1137px; margin:52px auto 0;}
.checklistBox{width:341px; height:329px; padding:54px 15px 0; background-color:rgba(255,255,255,0.55); float:left; margin-right:8px;}
.checklistSubTitle{border-bottom:1px solid #000; padding-bottom:12px; font-family:'Pretendard Variable'; font-weight: 500; margin:0 14px;}

.devLink{margin-top:104px; border-bottom:1px solid #fff; padding-bottom:2px; float:left;}

.history1{margin-top:56px; width:31%; float:left;}
.history2{margin:56px 0 0 3%; width:31%; float:left;}
.historyImgBox{float:left; width:41%;}
.historyContentBox{float:left; margin-top:15%; width:50%;}
.historySubTitle{border-bottom:1px solid #000; margin:0; padding:0 0 4px 4px; font-family:'Pretendard Variable'; font-weight: 500;}
.arrowImg{margin:-20% -35% 0 0; width:10%; float:right;}
.checkContent{margin:4px 0 0; color:#767676; padding-left:4px;}
.checkImg{width:15px; display:inline-block; margin-top:1px;}
.checkIcon1{margin:42px 0 0 75px; text-align:left;}
.checkIcon2{margin:10px 0 0 75px; text-align:left;}
.checkIconImg{width:45px; display:inline-block; margin-top:-12px;}
.ingredientLink{padding-bottom:2px; border-bottom:1px solid #1a1a1a; margin:0; width:70px; position:absolute; left:calc(50% - 35px); bottom:24px;}
.hwahaeTitle{color:#4bbdbd; font-family:'Pretendard Variable'; font-weight: 400;}
.hwahaeSource{margin:2px 0 0; color:#b0b0b0;}
.device-img{width:100%; position:relative; z-index:9;}
#device_image, #device_image2{width:653px; float:left; margin-top:20px; z-index:99;}
#device_naver, #device_naver2{width:235px; float:left; margin-top:430px; z-index:9;}
#device_hwahae, #device_hwahae2{width:215px; float:left; margin-top:360px; text-align:right;}


.naverTitle{text-align:left; color:#65bd7b; font-family:'Pretendard Variable'; font-weight: 400;}
.naverSource{text-align:left; color:#b0b0b0; margin:6px 0 0;}

.numbering{float:left; margin-right:16px;}

.etcIngredient{margin-top:8px; color:#b7b7b7;}

.pointImgSection{width:100%; text-align:center;}
.pointImg{height:280px;}

.pointRightSection{float:left; width:50%;}

.inline-block{display:inline-block;}
.ingredientSection{display:inline-block; margin:0 20px;}

#block, #block2, #block7, #block8, #block9, #block10, #block13 {float:left; width:100%; background-position:center; background-size:cover;}
#block1, #block4, #block5, #block6, #block11, #block12 {float:left; width:50%; background-position:center; background-size:cover;}

/* .useContentBox{margin:0 0 0 24px;} */
.howToUseSection{margin:0; font-family: 'Pretendard Variable'; font-weight: 400;}
.howToUseSection2{margin:8px 0 0; width:550px; height:48px;}

.storyHeight{height:309px;}
.typingSection{margin-top:36px; color:#fff; height:44px;}
.storyLink{margin-top:138px; padding-bottom:2px; border-bottom:1px solid #fff; color:#fff; display:inline-block; width:80px;}

.fixImg { z-index:-2; position:fixed; bottom:0; left:0; right:0; margin:auto; width:100%; height:100%; background-repeat: no-repeat; background-size:100%; background-position:center;}
.fixImg img { position:absolute; margin:auto; left:0; right:0; bottom:0; width:100%; height:auto; }

.fixImg2 { z-index:-2; position:fixed; bottom:0; left:0; right:0; margin:auto; width:100%; height:100%; background-repeat: no-repeat; background-size:100%; background-position:center;}
.fixImg2 img { position:absolute; margin:auto; left:0; right:0; bottom:0; width:100%; height:auto; }

.fixImg3 { z-index:-2; position:fixed; bottom:0; left:0; right:0; margin:auto; width:100%; height:100%; background-repeat: no-repeat; background-size:100%; background-position:center;}
.fixImg3 img { position:absolute; margin:auto; left:0; right:0; bottom:0; width:100%; height:auto; }

.font-w{color:#fff;}

.leftRange{float:left; width:90%;}

.t-margin6{margin-top:6px;}
.t-margin8{margin-top:8px;}
.t-margin10{margin-top:10px;}
.t-margin12{margin-top:12px;}
.t-margin13{margin-top:13px;}
.t-margin14{margin-top:14px;}
.t-margin16{margin-top:16px;}
.t-margin20{margin-top:20px;}
.t-margin28{margin-top:28px;}
.t-margin32{margin-top:32px;}
.t-margin36{margin-top:36px;}
.t-margin37{margin-top:37px;}
.t-margin42{margin-top:42px;}
.t-margin40{margin-top:40px;}
.t-margin44{margin-top:44px;}
.t-margin60{margin-top:60px;}

.l-padding4{padding-left:4px;}

.relative{position:relative;}

.fullWidth{width:100%;}
.clear{clear:both;}

.list_faq {width:550px; margin:28px auto 0; font-family: 'Pretendard Variable'; font-weight: 400; display:inline-block; vertical-align: top;}
.list_faq dt:first-child{ border-top:1px solid #1a1a1a; }
.list_faq dt { text-align: left; font-size:15px; border-bottom:1px solid #e8e8e8; }
.list_faq dd { text-align: left; font-size:12px;}
.list_faq dt a {padding:23px 4px; display:block; line-height:26px; text-decoration:none;}
.list_faq dd {padding:19px 12px 65px; display:none; }
.list_faq dt.on {border-bottom:none; display:block; text-decoration: none}
.list_faq dd.on {display:block; position:relative; z-index:2; text-decoration: none; }
.list_faq dt.select {border-bottom:none; display:block; text-decoration: none}
.list_faq dd.select {display:block; position:relative; z-index:2; text-decoration: none; }
.list_faq dt a img {display:none; width:19px; float:right;}
.list_faq dt a img {display:none;}
.list_faq dt a img.on {display:block;}
.list_faq dt a img.select {display:block;}
.list_faq dd .btn_close {text-align:right;}
.list_faq dd .btn_close a {color:#fff; font-size:11px; width:30px; padding:2px 0; display:inline-block; text-align:center;}

.question {width:calc(100% - 70px); float:left; }
.answer {color:#b6b7b8; }


.detail_list_faq {width:830px; margin:28px auto 0; font-family:'Pretendard Variable'; font-weight: 400; display:inline-block; vertical-align: top;}
.detail_list_faq dt:first-child{ border-top:1px solid #1a1a1a; }
.detail_list_faq dt { text-align: left; font-size:15px; border-bottom:1px solid #e8e8e8; }
.detail_list_faq dd { text-align: left; font-size:12px;}
.detail_list_faq dt a {padding:20px 4px; display:block; line-height:26px; text-decoration:none;}
.detail_list_faq dd {padding:26px 20px 50px; display:none; border-bottom: 1px solid #ffffff; }
.detail_list_faq dt.on {border-bottom:none; display:block; text-decoration: none}
.detail_list_faq dd.on {display:block; position:relative; z-index:2; text-decoration: none; background: #f7f8f9; }
.detail_list_faq dt a img {display:none; width:11px; float:right;}
.detail_list_faq dt a img {display:none;}
.detail_list_faq dt a img.on {display:block;}
.detail_list_faq dd .btn_close {text-align:right;}
.detail_list_faq dd .btn_close a {color:#fff; font-size:11px; width:30px; padding:2px 0; display:inline-block; text-align:center;}


.img_open {margin-top:9px !important; margin-right: 10px; opacity:0.6;}
.img_close {margin-top:9px !important; margin-right: 10px;}

.detail_question {width:calc(100% - 60px); float:left; }
.detail_answer {color:#8a8a8b; }

.product_info_title{
	width:65px;
	display:inline-block;
	vertical-align:top;
	margin-top:17px;
	color:#1a1a1a;
}

.product_info_title:first-child{
  margin:0;
}

.product_info_content{
	width:calc(100% - 99px);
	display:inline-block;
	word-break:keep-all;
	margin:17px 0 0 30px;
	color:#b6b7b8;
}

.product_info_content:nth-child(2){
  margin:0 0 0 30px;
}

.qna_information_wrap{ margin:160px auto 0; width:830px; }
.qna_wrap{ width:830px; display:inline-block; float:left;}
.information_wrap{ width:830px; display:inline-block; margin:80px auto 120px; }

.compensation_wrap{
  background-color:#f2f5f7;
  text-align: center;
  margin-top:120px;
  padding:80px 0 57px;
}

.compensation_contents{
  margin-top:10px;
}

.compensation_link{
  border-bottom:1px solid #1a1a1a;
  padding-bottom:2px;
  display:inline-block;
  margin-top:76px;
}

#myProgress {
  width: 100%;
  background-color: #fff;
}

#myBar1, #myBar2, #myBar3, #myBar4, #myBar5, #myBar6 {
  width: 1%;
  height: 10px;
  background-color: #23d2d4;
}

.hwahae .review{
  margin:71px 0;
  padding:0 40px;
  border-right:1px solid #e8e8e8;
  width:calc(25% - 81px);
}
.review:nth-last-child(1){
  border:none;
}

.right_bubble::after{
	content:'';
	border-top:8px solid #fff;
	border-bottom:8px solid transparent;
	border-left:8px solid transparent;
	border-right:8px solid #fff;

	position:absolute;
	bottom:-16px;
	right:14px;
}

.left_bubble::after{
	content:'';
	border-top:8px solid #fff;
	border-bottom:8px solid transparent;
	border-left:8px solid #fff;
	border-right:8px solid transparent;

	position:absolute;
	bottom:-16px;
	left:14px;
}

.event_banner { text-align:center; background-color:#f2f3f5; max-width:830px; margin:0 auto; }
.event_banner .tit { padding:64px 0 10px; }
.event_banner .des { color:#515151; }
.event_banner .img { padding:28px 0 12px; margin:0 auto; }
.event_banner .price_info { width:fit-content; margin:20px auto 0; padding-bottom:40px; }
.event_banner .price_info .each_price { color:#515151; width:fit-content; border:1px solid #8a8a8b; border-radius:2px; padding:1px 5px 0; float:right; position:relative; top:8px; margin-right:1px; }
.event_banner .price_info .dc_rate { display:inline-block; }
.event_banner .price_info .fixed_price { display:inline-block; margin-left:8px; color:#bebebe; text-decoration:line-through; }
.event_banner .price_info .dc_price { display:inline-block; margin-left:4px; color:#1a1a1a; font-size:26px !important; }

.option_banner_wrap { background-color:#f0f1f3; width:830px; margin:0 auto;}
.option_banner { border-bottom:24px solid #f0f1f3; max-width:560px; margin:0 auto; background-color:#fff; position:relative;}
.option_banner_end { width:830px; height:24px; background-color:#f0f1f3; margin:0 auto; }
.option_banner .dc_rate { width:48px; height:48px; background-color:#515151; border-radius:50%; color:#fff; text-align:center; line-height:48px; position:absolute; top:16px; left:16px; }
.option_banner .option_img { width:32%; float:left; }
.option_banner .option_info { width:calc(68% - 36px); float:left; padding:24px 20px 40px 16px; position:relative; height:154px;}
.option_banner .option_info .option_price { position:absolute; bottom:24px; }
.option_banner .option_info .option_des { padding-bottom:4px; }
.option_banner .option_info .fixed_price { color:#bebebe; text-decoration:line-through; }
.option_banner .option_info .dc_price { margin-top:-3px; float:left; }
.option_banner .option_info .each_price { color:#515151; width:fit-content; border:1px solid; border-radius:3px; padding:0 4px; line-height:20px; margin:4px 0 0 10px; float:left; }
.option_banner .option_img2 { width:32%; float:left; }
.option_banner .option_info2 { width:calc(68% - 36px);  float:left; padding:24px 20px 16px 16px; position:relative; height:128px;}
.option_banner .option_info2 .option_price { position:absolute; bottom:28px; }
.option_banner .option_info2 .dc_price { margin-top:-3px; }
.option_banner .option_info2 .each_price { color:#ef3a50; width:fit-content; border:1px solid; border-radius:3px; padding:2px 5px; line-height:20px; margin-top:2px; }