@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 {
    --layoutwidthLND: 1230px;
    --layoutwidthMiniLND : 900px;

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

    --pointcolor: #3bbee8;
    --subcolor: #3f4342;
    --sub2color: #eef4f0;
    --sub3color: #493652;
    --sub4color: #e3ece8;

    --backcolor: #f5f5f5;
    --textcolor: #2b2b2b;
    --graycolor: #888888;
    --darkgraycolor : #737373;
    --lightgraycolor: #dddddd;
}

/* 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; }
.dark-gray-color { color: var(--darkgraycolor) !important; }
.light-gray-color { color: var(--lightgraycolor) !important; }
.white-color { color: #fff; }
.black-color { color: #000; }

.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; }
.dark-gray-bg { background-color: var(--darkgraycolor) !important; }
.light-gray-bg { background-color: var(--lightgraycolor) !important; }
.white-bg { background-color: #fff; }
.black-bg { background-color: #000; }

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; }
.containerLND { width: var(--layoutwidthLND); margin: auto; }
.containerLND img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; }
@media (max-width:1230px){
    .containerLND { width: 85%; }
    .containerLND img { width: 100%; }
    .containerLND img.width90 { width: 90%; }
}
@media (max-width:1080px){
    .containerLND { width: 90%; }
}
@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-line2 { display: inline-block; position: relative; z-index: 2; }
.text-line2::before { position: absolute; content: ''; width: 110%; height: 40%; left: -5%; bottom: -2px; background: var(--sub2color); z-index: -1; }

.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(--sub4color); z-index: -1; }
.text-line-sm::before { width: 105%; left: -2.5%; }

.box.img.shadow { box-shadow: 0 .125rem .5rem rgba(0,0,0,.15); }

#promotion .flexList { --x-gap: 3rem; }

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

.chklists .chklist { position: relative; z-index: 5; }
.chklists .chklist ul { padding: 1.5rem 0; }
.chklists .chklist ul > li { position: relative; background-color: #fff; padding: 0 1rem; margin-bottom: 1rem; border: 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: 28px; height: 28px; border: 1px solid var(--graycolor); box-sizing: border-box; background-color: #fff; margin-right: 1rem; transition: .3s; }
.chklists .chklist ul > li input[type='checkbox'] ~ label { font-family: var(--mainfont) !important; padding: 1.5rem 0; cursor: pointer; -webkit-user-drag: none; user-select: none; }
.chklists .chklist ul > li input[type='checkbox']:checked ~ label .chkbox { background-color: #000; border-color: #000; }
.chklists .chklist ul > li input[type='checkbox'] ~ label .content > p { min-width: 27.5%; margin-right: 3%; font-family: var(--mainfont) !important; }
.chklists .chklist ul > li input[type='checkbox'] ~ label .content > p:nth-child(n+4) { margin-top: .25rem; }
.chklists .chklist ul > li input[type='checkbox'] ~ label .tit h4 { line-height: 1.2; }
.chklists .chklist ul > li input[type='checkbox'] ~ label .subtit { position: absolute; top: -1rem; left: 2rem; min-width: 120px; padding: .5rem 1.25rem; text-align: center; }
.chklists .chklist ul > li input[type='checkbox'] ~ label .pricetit { min-width: 60px; text-align: center; padding: .125rem; background-color: #000; }
@media (max-width:990px){
    .chklists { margin-top: 4rem; }
    .chklists .chklist ul > li { padding: 0 1rem; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label { padding: 1.5rem 0; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label .chkbox { width: 25px; height: 25px; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label .chkbox svg { width: 18px; height: 18px; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label .subtit { min-width: 100px; }
    .chklists .chklist ul > li input[type='checkbox'] ~ label .pricetit { min-width: 40px; padding: .0625rem .125rem 0; margin-right: .75rem; }
}
@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: 2rem; height: 2rem; }
    .chklists .chklist ol { margin-top: 2rem; padding-left: .5rem; }
}

.inputform label { font-family: var(--mainfont) !important; }
.inputform input[type=text], .inputform input[type=tel], .inputform select { width: 100%; font-size: 1.25rem; font-family: var(--mainfont) !important; color: var(--graycolor); border: 1px solid var(--lightgraycolor); outline: none; padding: 1rem .75rem; background-color: #fff; }
.inputform input[type=text]::placeholder, .inputform input[type=tel]::placeholder { color: var(--graycolor); }
.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: 1rem; transform: translateY(-50%); transition: .3s; }
.inputform select ~ .select-arrow img { width: .5rem; filter: brightness(0) invert(.5); }
.inputform select:focus ~ .select-arrow { transform: translateY(-50%) rotate(180deg); }
.inputform input[type=checkbox] { accent-color: #9b9b9b; transform: scale(1.25); }
.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: 1rem 0; letter-spacing: .5px; }
@media (max-width:990px){
    .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(.75); }
    .inputform select:focus ~ .select-arrow { transform: translateY(-50%) rotate(180deg) scale(.75); }
    .inputform input[type=checkbox] { transform: scale(1); }
    .inputform input[type=checkbox] ~ label { margin-bottom: 0; }
}

.programList h6 { padding: .75rem 0; text-align: center; background-color: #edeae5; }
.programList .viewmore { position: absolute; padding: .25rem 2rem; right: -1rem; bottom: 1rem; border-radius: 2rem; }
@media (max-width:990px){
    .programList { --x-gap: 4rem; --y-gap: 4rem; } 
}