@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/fonts-archive/Paperlogy/Paperlogy.css');
@import url('https://cdn.jsdelivr.net/gh/leetaewook/gmarket-sans-dynamic-subset/GmarketSans.css');
:root {
    --layoutwidth: 100%;
    --layoutwidthMini : 1080px;

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

    --pointcolor: #6779aa;
    --subcolor: #ffffd7;
    --sub2color: #cfd5e5;
    --sub3color: #493652;

    --backcolor: #e6e6e8;
    --textcolor: #393939;
    --graycolor: #808080;
    --lightgraycolor: #cecece;
}

/* 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; }
.sub2-color { color: var(--sub3color) !important; }
.back-color { color: var(--backcolor) !important; }
.text-color { color: var(--textcolor) !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; }
.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: 10px;}
.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: 400; }
article.container { width: var(--layoutwidth); margin: auto; }
article.container 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%; }
}
@media (max-width:1080px){
    article.container { width: 100%; }
}
@media (max-width:990px){
    html, body { font-size: 14px; }
}
@media (max-width:768px){
    html, body { font-size: 12px; }
}
@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;}

/* #promotion {background: var(--backcolor);} */

.chktit h2 { position: relative; }
.chktit h2 i { position: absolute; right: 0; }

.chklists { width: var(--layoutwidthMini); margin: auto; }
.chklists .chklist { position: relative; z-index: 5; }
.chklists .chklist ul { padding: 0 !important; }
.chklists .chklist ul > li { position: relative; padding: 0 3rem !important; margin-top: 10px;}
/* .chklists .chklist ul > li:not(:last-child) { border-bottom: 1px solid var(--lightgraycolor); } */
.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 { font-family: var(--mainfont) !important; padding: 3rem 0; cursor: pointer; -webkit-user-drag: none; user-select: none; }
.chklists .chklist ul > li input[type='checkbox']:checked ~ label .chkbox { background-color: var(--pointcolor); }
.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h4 { line-height: 1.2; }
.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; }

.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;}

@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; */ }
}

@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: 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; }
}

.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 var(--lightgraycolor); outline: none; padding: 1.5rem 1rem; }
.inputform input[type=text]::placeholder, .inputform input[type=tel]::placeholder { color: var(--lightgraycolor); }
.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 { text-align: center;}
.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;}