@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: 1080px;
    --layoutwidthMini : 900px;

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

    --pointcolor: #ab75c9;
    --subcolor: #614d6c;
    --sub2color: #eee1f6;
    --sub3color: #493652;

    --backcolor: #ddccf0;
    --textcolor: #2d2d2d;
    --graycolor: #4f4f4f;
    --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; }

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

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

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

.chklists .chklist { position: relative; z-index: 5; }
.chklists .chklist ul { padding: 0 2.5rem 3rem; }
.chklists .chklist ul > li { position: relative; }
.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: 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(--subcolor); }
.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; }
@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:500px){
    .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: 3rem; height: 3rem; }
    .chklists .chklist ol { margin-top: 2rem; }
}

.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: #8d64a6; border: none; outline: none; padding: 2rem 0; }
@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 { color: #463351; }
.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; }
}