@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://cdn.jsdelivr.net/gh/leetaewook/gmarket-sans-dynamic-subset/GmarketSans.css');
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24ClassicType/subsets/Cafe24ClassicType-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
    --layoutwidth: 100%;
    --layoutwidthMini : 1080px;

    --mainfont: 'Pretendard Variable';
    --pointfont: 'Poppins';
    --subfont: 'Gmarket Sans';

    --pointcolor: #46a1d5;
    --subcolor: #fefdba;
    --sub2color: #9ada12;
    --sub3color: #493652;

    --backcolor: #e6e6e8;
    --textcolor: #1c1c1c;
    --darkgraycolor: #414141;
    --graycolor: #767676;
    --lightgraycolor: #2e2e2eb3;
}

/* Fonts */
.main-font { font-family: var(--mainfont), sans-serif !important; }
.point-font { font-family: var(--pointfont), serif !important; }
.sub-font { font-family: var(--subfont), serif !important; }
.titIcon {font-family: var(--subfont), serif !important;}

/* Colors */
.point-color { color: var(--pointcolor) !important; }
.sub-color { color: var(--subcolor) !important; }
.sub2-color { color: var(--sub2color) !important; }
.sub3-color { color: var(--sub3color) !important; }
.back-color { color: var(--backcolor) !important; }
.text-color { color: var(--textcolor) !important; }
.dark-gray-color { color: var(--darkgraycolor) !important; }
.gray-color { color: var(--graycolor) !important; }
.light-gray-color { color: var(--lightgraycolor) !important; }
.white-color { color: #fff; }

.point-bg { background-color: var(--pointcolor) !important; }
.sub-bg { background-color: var(--subcolor) !important; }
.sub2-bg { background-color: var(--sub2color) !important; }
.sub3-bg { background-color: var(--sub3color) !important; }
.back-bg { background-color: var(--backcolor) !important; }
.text-bg { background-color: var(--textcolor) !important; }
.dark-gray-bg { background-color: var(--darkgraycolor) !important; }
.gray-bg { background-color: var(--graycolor) !important; }
.light-gray-bg { background-color: var(--lightgraycolor) !important; }
.white-bg { background-color: #fff; }
.ls-20 {letter-spacing: 2.5px;}
.li-radius-md {border-radius: 1rem;}
.mt-40 {margin-top: 2.5rem !important;}

h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; padding: 0; font-family: var(--mainfont) !important; }

section.section { position: relative; font-size: 16px; font-family: var(--mainfont), -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif; letter-spacing: -1px; font-weight: 500; }
article.container { width: var(--layoutwidth); margin: auto; }
article.container_mini { width: var(--layoutwidthMini); margin: auto; }
article.container img, article.container_mini img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; }

@media (max-width:1410px){
    article.container { width: 85%; }
    article.container img { width: 100%; }
    article.container img.width90 { width: 90%; }
    article.container img.width75 { width: 75%; }
    article.container img.fitimg { width: fit-content; }
}
@media (max-width:1080px){
    article.container { width: 100%; }
    article.container_mini { width: 85%; }
    article.chklist {width: 90%;}
}
@media (max-width:990px){
    html, body { font-size: 14px; }
}
@media (max-width:768px){
    html, body { font-size: 12px; }
    article.container img.fitimg { max-width: 10%;}
}
@media (max-width:500px){
    html, body { font-size: 10px; }
    .ls-20 {letter-spacing: 1px;}
    section.section {letter-spacing: -.5px;}
}

/* ==================================================================
    기본 box style Layout
===================================================================== */
.flexList { --x-gap:1.500rem; --y-gap:1.500rem;   display:flex;  flex-wrap:wrap;  gap:var(--y-gap) var(--x-gap);}
.flexList > .box{width:calc(100% / var(--count) - (var(--x-gap) * (var(--count) - 1)) / var(--count)); }
.flexList[layoutStyle="fullbox"] {--x-gap:0; --y-gap:10px; }
.flexList[layoutStyle="fullbox"] > .box{  width:calc(100% / var(--count)) }
/* boxCout */
[boxCount="2"]{ --count:2; }
[boxCount="3"]{ --count:3; }
[boxCount="4"]{ --count:4; }
[boxCount="5"]{ --count:5; }
[boxCount="6"]{ --count:6; }

@media (max-width:1550px){
    .lg-direction{flex-direction: column;}
    .lg-w100{width:100%}
    .lg-w90{width:90%}
    .lg-w80{width:80%}
    .lg-order{order: 1}
    .lg-cont_box {margin-top: 4.68rem;}

    .lg-wrap3{--count:3}
    .lg-wrap2{--count:2}
    .lg-wrap1{--count:1}
}
@media (max-width:1240px){
    .md-direction{flex-direction: column;}
    .md-w100{width:100%}
    .md-w90{width:90%}
    .md-w80{width:80%}
    .md-order{order: 1}
    .md-cont_box {margin-top: 4.68rem;}

    .md-wrap3{--count:3}
    .md-wrap2{--count:2}
    .md-wrap1{--count:1}
}
@media (max-width:990px){
    .sm-direction{flex-direction: column;}
    .sm-w100{width:100%}
    .sm-w90{width:90%}
    .sm-w80{width:80%}
    .sm-order{order: 1}
    .sm-cont_box {margin-top: 4.68rem;}

    .sm-wrap3{--count:3}
    .sm-wrap2{--count:2}
    .sm-wrap1{--count:1}
}
@media (max-width:768px){
    .xs-direction{flex-direction: column;}
    .xs-w100{width:100%}
    .xs-w90{width:90%}
    .xs-w80{width:80%}
    .xs-order{order: 1}
    .lg-cont_box,.md-cont_box,.sm-cont_box,.xs-cont_box {margin-top: 3.5rem;}

    .xs-wrap3{--count:3}
    .xs-wrap2{--count:2}
    .xs-wrap1{--count:1}
}
@media (max-width:500px){
    .xxs-direction{flex-direction: column;}
    .xxs-w100{width:100%}
    .xxs-w90{width:90%}
    .xxs-w80{width:80%}
    .xxs-order{order: 1}
    .xxs-cont_box {margin-top: 3.5rem}

    .xxs-wrap2{--count:2}
    .xxs-wrap1{--count:1}
}

.font-55 {line-height: 1.2;}

.text-line { display: inline-block; position: relative; z-index: 2; }
.text-line::before { position: absolute; content: ''; width: 110%; height: 40%; left: -5%; bottom: -2px; background: var(--sub2color); z-index: -1; }
.text-line-sm::before { width: 105%; left: -2.5%; }

.highlight {background: var(--subcolor); padding: 0 3px; width: fit-content;}

.gradient-line { width: 100%; height: 4px; background-image: linear-gradient(116deg, #d1c3fc 18%, #bbf7f0 39%, #fff2fe 60%, #9bc4fc 89%); }

.path-through { 
    filter:
    drop-shadow(1px 2px 4px rgba(0, 150, 244, .8))
    drop-shadow(2px 4px 8px rgba(0, 150, 244, .4))
    drop-shadow(3px 6px 12px rgba(0, 150, 244, .125));
}
.path-through-sm { 
    filter:
    drop-shadow(.5px 1px 2px rgba(0, 150, 244, .6))
    drop-shadow(1px 2px 4px rgba(0, 150, 244, .3))
    drop-shadow(1.5px 3px 6px rgba(0, 150, 244, .0625));
}
@media (max-width:990px){
    .Tit.path-through { max-width: 50%; margin-left: auto; margin-right: auto; }
}
@media (max-width:550px){
    .Tit.path-through { max-width: 75%; }
}

#promotion { background-color: #e5f3ff; color: #1c1c1c;}

@media (max-width:990px){
    /* #promotion { background-image: url(../26March/img/promo_bg_m.jpg); } */
    #promotion { background-image: none; }
    #promotion .bg { position: relative; }
    #promotion .bg > img { position: absolute; max-width: 30%; }
    #promotion .bg .flw1 { top: 0; left: 0; }
    #promotion .bg .flw2 { top: 35rem; right: 0; }
}

.logosection { padding: 2rem 4rem; }
.logosection img { width: fit-content !important; opacity: 0; visibility: hidden; }
@media (max-width:768px){
    .logosection img { max-width: 25% !important; }
}

/* .visualsection { padding: 7.5rem 0; } */
.visualsection {position: relative; z-index: 1;}
@media (max-width:990px){
    .visualsection { padding: 0 0 2.5rem; }
    .visualsection img { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%); }
}

.benefits_section { padding: 10rem 0 0; }

.chktit h2 { position: relative; letter-spacing: 0; font-style: oblique; padding: 0 3.5rem; }
.chktit h2 > span.bold100 { font-style: normal; }
.chktit h3 { font-weight: 600; }
.chktit h3 span { font-weight: 700; }
.chktit .chkinnertit { position: relative; display: inline-block; }
.chktit .chkinnertit .ico { position: absolute; }
.chktit .chkinnertit .heart { content: url(./img/ico_heart.png); left: 50%; top: -3.5rem; transform: translateX(-50%); }
.chktit .chkinnertit .twinkle { content: url(./img/ico_twinkle.png); top: 50%; transform: translateY(-50%); }
.chktit .chkinnertit .twinkle { left: 0; }
.chktit .chkinnertit .twinkle:last-child { left: auto; right: 0; }
@media (max-width:990px){
    .chktit h2 { line-height: 1; padding: 0 3rem; }
    .chktit .visible-sm.chkinnertit { display: inline-block !important; }
}
@media (max-width:550px){
    .chktit .chkinnertit .heart { top: -4.5rem; }
}

.chklists { width: var(--layoutwidthMini); margin: auto; }
.chklists .chklist { position: relative; z-index: 5; }
.chklists .chklist ul { padding: 4rem 0 0 !important; }
.chklists .chklist ul > li { position: relative; padding: 0 2.5rem !important; filter: drop-shadow(5px 0 15px rgba(32,32,32,0.2));}
.chklists .chklist ul > li:not(:first-child) { margin-top: 2rem; }
.chklists .chklist ul > li input[type='checkbox'] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.chklists .chklist ul > li input[type='checkbox'] ~ label .chkbox { width: 45px; height: 45px; border: 1px solid var(--graycolor); box-sizing: border-box; background-color: #fff; margin-right: 1.5rem; transition: .3s; }
.chklists .chklist ul > li input[type='checkbox'] ~ label { position: relative; font-family: var(--mainfont) !important; padding: 2.5rem 0; cursor: pointer; -webkit-user-drag: none; user-select: none; }
.chklists .chklist ul > li input[type='checkbox']:checked ~ label .chkbox { background-color: var(--pointcolor); border-color: var(--pointcolor); }
.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h4 { line-height: 1.3; }
.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h4 span.credit {width: fit-content; padding: .25rem .5rem; background: var(--pointcolor); color: #fff; border-radius: 6px; letter-spacing: 0 !important; display: inline-block; transform: translateY(-2px);}


.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 { position: absolute; left: 0; top: -1.25rem; display: inline-flex; align-items: center; }
.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 span { display: inline-block; padding: .75rem 1.25rem; border-radius: .5rem; letter-spacing: -0.5px; font-weight: 600; position: relative; line-height: 1;}
#promotion.ios .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 span  {padding: 2rem 1.25rem 1rem;}
.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5.best span {color: #000; background: var(--sub2color);}
.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5.premium span {background: #000; color: var(--sub2color);}

.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 span:not(:first-child) { margin-left: .5rem; }

.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 span samp { font-family: var(--mainfont); }
.chklists .chklist ul > li input[type='checkbox'] ~ label .subtit { min-width: 120px; padding: .25rem 1.25rem; text-align: center;  }
.chklists .chklist ul > li input[type='checkbox'] ~ label .pricetit { min-width: 75px; text-align: center; padding: 0 .125rem .125rem; background-color: #000; }
@media (max-width:990px){
}
@media (max-width:768px){
    .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 {font-size: 1.1rem; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 span { padding:  .5rem .75rem; }
    #promotion.ios .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 span  {padding: .75rem .75rem .375rem;}
    .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 span:not(:first-child) { margin-left: .25rem; }

    .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5.pl-100 {padding-left: 4.5rem;}
}
@media (max-width:550px){
}

.chklists .chklist ul > li.sub_tit {height: 8rem; display: inline-flex; align-items: center; justify-content: center; width: 100%;}
.chklists .chklist ul > li.sub_tit.time_icon {padding-right: 6rem !important;}
.chklists .chklist ul > li.sub_tit.time_icon_flex p {display: flex; align-items: center; justify-content: center; gap: 1rem;}
.chklists .chklist ul > li.sub_tit.time_icon_flex img {margin-right: 0;}
.chklists .chklist ul > li.sub_tit img {width: 5rem; margin-right: 1rem;}

.chklists .chklist ul > li .infomsg { position: absolute; right: 2rem; bottom: 2rem; }

@media(max-width:1240px) {
    .chklists { width: 100%; }
    .font-75 {font-size: 4rem;}
    .font-40 {font-size: 2rem;}
}

@media (max-width:990px){
    .chklists .chklist ul > li input[type='checkbox'] ~ label .chkbox { width: 40px; height: 40px; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label .subtit { min-width: 100px; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label .pricetit { min-width: 50px;/*  padding: .125rem .25rem 0; */ }
    .chklists .chklist ul > li .infomsg { position: static; text-align: right; font-size: 1.25rem; padding-bottom: 1.5rem; }
}

@media(max-width:768px) {
    .chklists .chklist ul > li input[type='checkbox'] ~ label .chkbox { width: 2.5rem; height: 2.5rem; margin-right: 1rem; }
    .chklists .chklist ul > li.sub_tit p {font-size: 1.95rem;}
    .chklists .chklist ul > li.sub_tit.time_icon {padding-right: 5rem !important;}
    .chklists .chklist ul > li.sub_tit img {width: 4rem; margin-right: 1rem;}
    .font-75 {font-size: 2.95rem;}
    .font-40 {font-size: 2rem;}
    .font-22 {font-size: 1.25rem;}
}

@media (max-width:550px){
    .chklists .chklist .chktit { padding: 7.5rem 2rem 2.5rem; }
    /* .chklists .chklist ul > li input[type='checkbox'] ~ label { flex-wrap: wrap; } */
    /* .chklists .chklist ul > li input[type='checkbox'] ~ label .left, .chklists .chklist ul > li input[type='checkbox'] ~ label .right { width: 100%; } */
    /* .chklists .chklist ul > li input[type='checkbox'] ~ label .right { text-align: right; } */
    .chklists .chklist ul > li input[type='checkbox'] ~ label .chkbox { width: 1.5rem; height: 1.5rem; }
    .chklists .chklist .price { margin-top: 0; }

    /* .font-30 {font-size: 1.5rem;} */
    .chklists .chklist ul > li { padding: 0 1.5rem !important; }
    .chklists .chklist ul > li.sub_tit {height: auto; padding: 1.5rem 2rem !important; }
    .chklists .chklist ul > li.sub_tit.time_icon {padding-right: 4rem !important;}
    .chklists .chklist ul > li.sub_tit img {width: 3rem; margin-right: 1rem;}
    .chklists .chklist ul > li.sub_tit p {font-size: 1.5rem;}
    .chklists .chklist ul > li input[type='checkbox'] ~ label { padding: 2.5rem 0; }

    .chklists .chklist ol { margin-top: 0; padding-left: .5rem; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label .pricetit { margin-right: 1.5rem; min-width: 35px; font-size: 1rem; padding: .25rem 1.25rem;}

    .font-40 {font-size: 1.5rem;}
    .font-75 {font-size: 2.25rem;}
    .font-50 {font-size: 2rem;}
}


.inputform  { width: calc( var(--layoutwidthMini) - 6rem); }
.inputform label { font-family: var(--mainfont) !important; }
.inputform input[type=text], .inputform input[type=tel], .inputform select { width: 100%; font-size: 1.875rem; font-family: var(--mainfont) !important; color: var(--graycolor); border: 1px solid #cecece; outline: none; padding: 1.5rem 1rem; }
.inputform input[type=text]::placeholder, .inputform input[type=tel]::placeholder { color: #cecece; }
.inputform select { -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */ appearance: none; position: relative; }
.inputform select ~ .select-arrow { position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); transition: .3s; }
.inputform select:focus ~ .select-arrow { transform: translateY(-50%) rotate(180deg); }
.inputform input[type=checkbox] { accent-color: #737373; transform: scale(1.5); }
.inputform input[type=checkbox] ~ label { font-family: var(--mainfont) !important; color: #737373; margin-left: 1rem; line-height: 1; }
.inputform button[type=submit] { display: block; width: 100%; background-color: var(--pointcolor); border: none; outline: none; padding: 2rem 0; }
@media (max-width:1080px){
    .inputform { width: calc( 100% - 4rem ); }
}
@media (max-width:990px){
    .inputform { padding: 3rem; }
    .inputform label, .inputform .input-wrap, .inputform .select-wrap { width: 100%; }
    .inputform label { margin-bottom: 1rem; }
    .inputform select ~ .select-arrow { right: 1rem; transform: translateY(-50%) scale(.5); }
    .inputform select:focus ~ .select-arrow { transform: translateY(-50%) rotate(180deg) scale(.5); }
    .inputform input[type=checkbox] ~ label { font-size: 1.5rem; margin-bottom: 0; }
}

.vat { visibility: hidden; }
.juvelook { position: relative; margin-top: -600px; z-index: 2; }
@media (max-width:990px){
    .juvelook { margin-top: -400px; }
}
@media (max-width:768px){
    .juvelook { margin-top: -200px; }
}

#promotion.ios .price div {padding-top: 0.5rem;}
#promotion.ios .chklists .chklist ul > li input[type='checkbox'] ~ label .pricetit {padding: .25rem .125rem .125rem;}

.inbodySwiperWrap { padding: 0 4rem; max-width: 500px; width: 90%; margin: auto;}
.inbodySwiperWrap .inbodySwiper ~ .swiper-navigation { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.inbodySwiperWrap .inbodySwiper ~ .swiper-navigation > * { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: auto; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background-color: var(--textcolor); border-radius: 50%; z-index: 5; cursor: pointer; }
.inbodySwiperWrap .inbodySwiper ~ .swiper-navigation .swiper-prev { left: 0; }
.inbodySwiperWrap .inbodySwiper ~ .swiper-navigation .swiper-next { right: 0; }
@media (max-width:768px){
    .inbodySwiperWrap { padding: 0 5rem; }
    .inbodySwiperWrap .inbodySwiper ~ .swiper-navigation > * { width: 4rem; }
    .inbodySwiperWrap .inbodySwiper ~ .swiper-navigation > * > svg { width: 3rem; height: 3rem; }
}

.infobox { width: 60%; color: #fff !important; margin: 2.5rem auto; padding: 2rem; background-color: var(--pointcolor); border-radius: 1rem; }
@media (max-width:990px){
    .infobox { width: 80%; }
}

#promotion {letter-spacing: -.05em;}

.cont_box {margin-top: 4rem;}

.benefits_section .cont {max-width: 51.5rem; width: 100%; margin: 10rem auto 0;}
.benefits_section .imgbox {margin-top: -14%;}
.benefits_section .imgbox p {margin-top: -10%;}
.benefits_section .listTit {width: 100%; background: #fff; padding: 2.5rem; border-radius: 2.875rem; position: relative; transform: translateY(-.75rem) rotate(-2deg);}
.benefits_section .listTit:after {position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 90%; border-top: 2px dashed #52aeff; content: ""; opacity: .5;}
.benefits_section .listTit > .boxIcon {position: absolute; right: 0; top: -45%; width: 18.25rem; z-index: 2;}
.benefits_section .listTit > .boxIcon img {width: 100%;}
.benefits_section .list {background: #fff; border-radius: 2.875rem; position: relative;}
.benefits_section .list:after {position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 90%; border-top: 2px dashed #52aeff; content: ""; opacity: .5;}
.benefits_section .list > div {padding: 3.125rem 0; margin: 0 2.5rem; border-bottom: 0.25rem solid #e5e5e5;}
.benefits_section .list > div:last-child {border-bottom: none;}

@media(max-width:768px) {
    .benefits_section .listTit {transform: translateY(-.25rem) rotate(-2deg);}
    .benefits_section .listTit:after,
    .benefits_section .list:after {width: 85%;}
}

@media(max-width:500px) {
    .benefits_section .list > div {padding: 2.5rem 0;}
    .benefits_section .listTit > .boxIcon  {width: 14rem;}
    .benefits_section .listTit > .boxIcon {top: -30%;}
}

.bottomCont {--sub2color : #dbff8f !important;}
.bottomCont .flexList .box {background: var(--pointcolor); border-radius: 1.25rem; display: flex; align-items: center; justify-content: center; padding: 2.5rem .5rem; color: #fff; text-align: center;}
.bottomCont .flexList .box:nth-child(1),
.bottomCont .flexList .box:nth-child(2) {background-image: url("./img/arrow.png"); background-repeat: no-repeat; background-size: auto; background-position: 80% 75%;}

@media(max-width:1240px) {
    .bottomCont .flexList .box:nth-child(1),
    .bottomCont .flexList .box:nth-child(2) {background-position: 59% 75%}
}

@media(max-width:768px) {
    .bottomCont .flexList .box:nth-child(1),
    .bottomCont .flexList .box:nth-child(2) {background-position: 60% 75%; background-size: 8%;}
}

@media(max-width:500px) {
    .bottomCont .flexList .box:nth-child(1),
    .bottomCont .flexList .box:nth-child(2) {background-position: 65% 75%; background-size: 11%;}
}

@media(max-width:375px) {
    .bottomCont .flexList .box:nth-child(1),
    .bottomCont .flexList .box:nth-child(2) {background-position: 70% 75%;}
}