@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');
:root {
    --layoutwidth: 100%;
    --layoutwidthMini : 1080px;

    --mainfont: 'Pretendard Variable';
    --pointfont: 'Cafe24 Classic Type';
    --subfont: 'Gmarket Sans';

    --pointcolor: #0096f4;
    --subcolor: #fefdba;
    --sub2color: #8c2f37;
    --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; }

/* 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: -1.5px; 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%; }
}
@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;}
}

.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: #87cafe; color: #1c1c1c; background-image: url(../26April/img/promo_bg.jpg); background-repeat: no-repeat; background-size: 100% auto; background-position: center 0; }
@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; } */
@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; border: 2px solid var(--pointcolor);  }
.chklists .chklist ul > li:not(:first-child) { margin-top: 3rem; }
.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 h5 { position: absolute; left: calc( 45px + 1.5rem ); top: -1.25rem; display: inline-flex; align-items: center; }
.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 span { display: inline-block; padding: .5rem 1.25rem; border-radius: .5rem; color: #fff; background-color: #000; letter-spacing: -0.5px; font-weight: 500; }
.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.point { background-color: var(--subcolor); color: var(--textcolor); font-weight: 600; }
.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){
    .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 { left: calc( 40px + 1.5rem ); }
}
@media (max-width:768px){
    .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 { left: calc( 2.5rem + 1rem ); font-size: 1.1rem; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 span { padding: .25rem .75rem .35rem; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 span:not(:first-child) { margin-left: .25rem; }
}
@media (max-width:550px){
    .chklists .chklist ul > li input[type='checkbox'] ~ label .tit h5 { left: calc( 2rem + 1rem ); }
}

.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: 2.125rem;}
}

@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: 2rem; height: 2rem; }
    .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; }
}

.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; }
.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%; margin: 2.5rem auto; padding: 2rem; background-color: var(--subcolor); border-radius: 1rem; }
@media (max-width:990px){
    .infobox { width: 80%; }
}