@charset "uft-8";

/* reset for mobile */
.pc {display: none !important;}
.hidden {display: none !important;}


/* common (include, layout) */
body {font-family: 'NotoSansKR', '나눔고딕', 'NanumGothic', '맑은 고딕', 'malgun gothic', '돋움', Dotum, 'Apple SD Gothic Neo', Helvetica, sans-serif; font-weight: 400; font-size: 13px; color: #222222; background: #ffffff;}
#wrapper {overflow: hidden; position: relative; min-height: 100vh; padding-top: 60px;}
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.7); transition: top 0.3s; z-index: 10000;}
#skip-nav:focus {top: 0;}

#header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background-color: #ffffff; z-index: 1000;}
#header h1 {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); width: 120px;}
#header h1 a.prev {width: 32px; height: 32px; display: none;}
#wrapper.top-padding a.logo {display: none;}
#wrapper.top-padding a.prev {display: block;}

#header a.menu {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); width: 24px; height: 24px;}
#gnb {position: fixed; left: -105%; top: 0; width: 100%; height: 100%; background-color: #ffffff; padding: 150px 30px 50px 30px; transition: left 0.3s; z-index: 2000; display: none;}
#gnb.open {left: 0;}
#gnb.show {display: block;}
#gnb a.close {position: absolute; left: 30px; top: 60px; width: 24px; height: 24px;}
#gnb > ul {font-size: 24px; font-weight: 700;}
#gnb > ul > li + li {margin-top: 40px;}
#gnb > ul > li > a {display: block;}

#header-stage {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background-color: #ffffff; z-index: 1000;}
/*
#header-stage a.prev {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); width: 32px; height: 32px;}
#header-stage a.close {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); width: 32px; height: 32px;}
*/

#main {position: relative; padding: 60px 20px 100px 20px;}
#main-start {position: absolute; left: 0; top: 0; transform: translateX(-110%); width: 160px; line-height: 30px; text-align: center; font-size: 14px; background-color: rgba(0, 0, 0, 0.5); color: #ffffff; transition: all 0.3s; z-index: 1000;}
#main-start:focus {transform: translateX(0%);}


/* sub common */
#main > h2 {font-size: 20px; margin-bottom: 60px;}
#main > h2 span.before {display: block; margin-bottom: 10px; font-size: 14px; font-weight: 500;}
#main > h2 span.after {display: block; margin-top: 20px; font-size: 14px; font-weight: 500;}
#main h3.title {font-size: 16px; font-weight: 500; margin-top: 50px; margin-bottom: 20px;}
#main h3.title.big {font-size: 20px; font-weight: 700; margin: 50px 0 20px 0;}
#main h3.title span {display: block; color: #6d829f; margin-top: 3px;}
#main h4.title {font-size: 16px; font-weight: 500; margin-top: 50px; margin-bottom: 15px;}

section.content.hidden {display: none;}
section.content + section.content {margin-top: 50px;}
section + div.button-box {margin-top: 50px;}
p + div.button-box {margin-top: 50px;}
section.page {margin-top: 50px; display: none;}
section.page.on {display: block;}
section.repeat + section.repeat {margin-top: 50px;}
section.repeat h4.name {font-size: 20px; margin-bottom: 20px;}
section.repeat div.header {position: relative; margin-bottom: 30px;}
section.repeat div.header .title {font-size: 20px !important; font-weight: 700 !important;}
section.repeat div.header a.btn {position: absolute; right: 0; top: 50%; transform: translate(0, -50%);}

/* index */
body.index #wrapper {padding-top: 0;}
body.index h1 {font-size: 20px; text-align: center; margin-bottom: 20px;}
body.index #main {padding: 20px 10px 60px 10px;}
table.page-list {width: 100%; font-size: 12px; border-top: 2px solid #093968;}
table.page-list thead {background-color: #f9f9f9;}
table.page-list th,
table.page-list td {padding: 6px 8px; border: 1px solid #e0e0e0;}
table.page-list tbody {border-top: 2px solid #093968; border-bottom: 2px solid #093968;}
table.page-list tbody tr > td:first-child {text-align: center; width: 40px;}
table.page-list tbody a {display: block; transition: color 0.3s;}

/* error page */
section.error-404 {position: fixed; width: min(100%, 688px); left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; overflow: hidden;}
section.error-404 p.image {width: 150px; display: inline-block;}
section.error-404 p.title {font-size: 24px; font-weight: 700; margin-top: 50px;}
section.error-404 p.para {font-size: 18px; font-weight: 700; color: #666666; margin-top: 25px;}

/* main-page */
div.main-intro {padding: 0 40px; text-align: center;}
div.main-intro > div {position: relative;}
div.main-intro > div + div {position: relative; margin-top: 40px;}
div.main-intro > div h3 {font-size: 20px; margin-bottom: 10px;}
div.main-intro > div h3 + p {font-size: 14px; font-weight: 500; white-space: nowrap;}
div.main-intro div.card {position: relative; display: inline-block; width: 250px; height: 245px; border: 1px solid #b6c0cf; border-radius: 4px; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); margin-top: 30px; margin-bottom: 10px; padding: 45px 0 20px 0; overflow: hidden; text-align: center; background-color: #ffffff; display: none;}
div.main-intro div.card.on {display: inline-block;}
div.main-intro div.card::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background-color: #093968;}
div.main-intro div.card > * {display: block;}
div.main-intro div.card span.image img {height: 90px;}
div.main-intro div.card em.title {font-size: 20px; font-weight: 700; margin-top: 10px;}
div.main-intro div.card span.status {position: absolute; left: 25px; top: 15px; font-size: 16px; font-weight: 500; padding-left: 18px; color: #093968;}
div.main-intro div.card span.status::after {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 8px; height: 8px; border-radius: 20px; background-color: #093968;}
div.main-intro div.card span.status.green {color: #43a047;}
div.main-intro div.card span.status.green::after {background-color: #43a047;}
div.main-intro div.card span.status.yellow {color: #ffb90b;}
div.main-intro div.card span.status.yellow::after {background-color: #ffb90b;}
div.main-intro div.card span.status.gray {color: #666666;}
div.main-intro div.card span.status.gray::after {background-color: #666666;}
div.main-intro div.card span.status.pink {color: #ff008e;}
div.main-intro div.card span.status.pink::after {background-color: #ff008e;}
div.main-intro div.card span.status.red {color: #ff0000;}
div.main-intro div.card span.status.red::after {background-color: #ff0000;}
div.main-intro div.card p.company {font-size: 16px; font-weight: 500; margin-top: 40px;}
div.main-intro div.card p.company em {display: block; font-size: 20px; font-weight: 700; margin-bottom: 10px;}
div.main-intro div.card p.button {position: absolute; left: 0; bottom: 20px; width: 100%;}
div.main-intro div.card p.button a.btn + a.btn {margin-left: 16px;}
div.main-intro div.card a.red-line {min-width: 75px;}


/* section.fold */
section.fold h3 a {position: relative; display: block; line-height: 45px; font-size: 16px; font-weight: 500; background-color: #093968; color: #ffffff; padding-left: 20px; border-radius: 4px;}
section.fold h3 a::after {content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); font-size: 20px; transition: transform 0.3s;}
section.fold + section.fold {margin-top: 50px;}
section.fold > ul {overflow: hidden; height: 0;}
section.fold.open h3 a::after {transform: translate(0, -50%) rotate(180deg);}
section.fold.open h3 + ul {overflow: visible; height: auto; margin-top: 30px;}
section.fold + div.button-box {margin-top: 50px;}



/* form */
ul.form {position: relative; font-size: 14px;}
ul.form > li {position: relative;}
ul.form > li::after {content: ''; display: block; clear: both;}
ul.form > li + li {margin-top: 30px;}
ul.form > li.center {text-align: center;}
ul.form > li.center a.btn + a.btn {margin-left: 30px;}
ul.form > li.hidden > * {display: none !important;}
ul.form > li > label,
ul.form > li > span.label {display: block; font-size: 16px; font-weight: 500; margin-bottom: 20px;}
ul.form > li > label span,
ul.form > li > span.label span {display: block; font-size: 14px; font-weight: 400; color: #6d829f; margin-top: 6px;}
ul.form.tall > li + li {margin-top: 50px;}
ul.form > li.address > div.form-box + div.form-box {margin-top: 10px;}
ul.form + div.button-box {margin-top: 50px;}
ul.form > li p.checkbox {font-size: 14px; font-weight: 400;}
ul.form + ul.form {margin-top: 50px;}

div.form-box {position: relative; font-size: 14px;}
div.form-box > label {display: block; margin-bottom: 8px;}
div.form-box > span.message {display: none; color: #ff008e; font-size: 12px; font-weight: 500; margin-top: 5px;}
div.form-box > span.guide {display: none; color: #6d829f; font-size: 12px; margin-top: 5px;}
div.form-box > span.timer {display: none; position: relative; font-size: 14px; margin-top: 5px; text-align: right;}
div.form-box > span.timer em {color: #ff008e;}
div.form-box > span.timer span {position: absolute; left: 0;}
div.form-box.error > span.message {display: block;}
div.form-box.guide > span.guide {display: block;}
div.form-box.guide.error > span.guide {display: none;}
div.form-box.timer > span.timer {display: block;}
div.form-box.button > input.text {float: left; width: calc(100% - 120px); margin-right: 10px;}
div.form-box.button > a.btn {width: 110px;}
div.form-box.button > span.timer {margin-right: 120px;}

div.form-box.date-range input {width: 47%; float: left;}
div.form-box.date-range span.text {width: 6%; float: left; line-height: 48px; text-align: center; font-size: 20px;}


span.help {position: relative; display: inline-block; width: 20px; height: 20px; margin-left: 6px; vertical-align: top;}
span.help > a {position: relative; display: block; height: 100%; overflow: hidden; z-index: 10;}
span.help > a span {position: absolute; left: -999px;}
span.help > a::before {content: '\f059'; font-family: 'Font Awesome 6 Free'; font-weight: 500; font-size: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
span.help span.popup {position: absolute; left: -20px; top: calc(100% + 6px); width: 230px; min-height: 40px; font-size: 11px; font-weight: 400; line-height: 1.3em; background-color: #f1f4f6; border: 1px solid #b6c0cf; border-radius: 4px; padding: 6px 10px; box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.2); display: none;}
span.help span.popup em {display: block; font-weight: 500; margin-bottom: 4px;}
span.help span.popup::before {content: ''; position: absolute; left: 20px; top: -20px; border: 10px solid transparent; border-bottom-color: #b6c0cf;}
span.help span.popup::after {content: ''; position: absolute; left: 20px; top: -18px; border: 10px solid transparent; border-bottom-color: #f1f4f6;}
span.help.on {z-index: 100;}
span.help.on span.popup {display: block;}

div.layer-help {position: fixed; left: 0; bottom: 0; width: 100%; background-color: #ffffff; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3); font-size: 12px; font-weight: 400; transform: translate(0, 105%); transition: transform 0.3s; z-index: 2000;}
div.layer-help.on {transform: translate(0, 0);}
div.layer-help div.content {margin-bottom: 20px;}
div.layer-help div.content em {display: block; font-size: 16px; font-weight: 700; color: #093968; margin-bottom: 15px;}
div.layer-help div.content span {display: block;}
div.layer-help div.content span + span {margin-top: 10px;}


input.text {display: block; width: 100%; height: 48px; border: 1px solid #b6c0cf; border-radius: 4px; padding: 0 14px; font-size: 14px; font-weight: 500; font: inherit; background-color: #ffffff;}
input.text:focus {border: 2px solid #093968; outline: none; box-shadow: 0 3px 3px 3px rgba(9, 57, 104, 0.12); padding: 0 13px;}
input.text::placeholder {color: #6d829f;}
.error input.text {border: 2px solid #ff008e; padding: 0 13px;}
.error input.text:focus {box-shadow: 0 3px 3px 3px rgba(255, 0, 142, 0.12); outline: none;}
.error input.text ~ span.message {display: block;}
input.text.long {width: 80% !important;}

input.text.date {background: #ffffff url(/img/icon-calendar.png) right 10px center no-repeat; background-size: 24px auto; padding-right: 44px;}
input.text.percent {background: #ffffff url(/img/icon-percent.png) right 10px center no-repeat; background-size: 24px auto; padding-right: 44px; text-align: right;}
input.text + input.text {margin-top: 10px;}
input.text:read-only,
input.text:disabled {box-shadow: none !important;}

select {display: block; width: 100%; height: 48px; border: 1px solid #b6c0cf; border-radius: 4px; padding: 0 40px 0 14px; font-size: 14px; font-weight: 500; font: inherit; background: #ffffff url(/img/icon-select-arrow.png) right 10px center no-repeat; appearance: none; background-size: 24px auto;}
select:focus {border: 2px solid #093968; outline: none; box-shadow: 0 3px 3px 3px rgba(9, 57, 104, 0.12); padding: 0 13px;}
select.not-selected {color: #6d829f;}
textarea {display: block; width: 100%; height: 80px; border: 1px solid #b6c0cf; border-radius: 4px; padding: 14px; font-size: 14px; font-weight: 500; font: inherit; background-color: #ffffff;}

input.text:not(.date):read-only,
textarea:read-only {background-color: #edebf1; color: #6d829f; border-color: transparent;}



ul.input-list {position: relative; font-size: 14px;}
ul.input-list > li {position: relative;}
ul.input-list > li + li {margin-top: 14px;}
ul.input-list > li.title {font-size: 16px; font-weight: 500;}
ul.input-list > li.title ~ li {margin-left: 34px;}
ul.input-list > li > input[type="radio"],
ul.input-list > li > input[type="checkbox"] {position: absolute; opacity: 0;}
ul.input-list > li > label {position: relative; display: inline-block; padding-left: 30px; line-height: 24px; z-index: 1;}
ul.input-list > li > label::before {content: ''; position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: url(/img/icon-radio.png) center center no-repeat; background-size: contain;}
ul.input-list > li > input:not(.mousedown):focus + label::before {outline: 2px solid #093968; outline-offset: 1px;}
ul.input-list > li > input[type="radio"] + label::before {border-radius: 100px; background-image: url(/img/icon-radio.png);}
ul.input-list > li > input[type="radio"]:checked + label::before {background-image: url(/img/icon-radio-checked.png);}
ul.input-list > li > input[type="checkbox"] + label::before {border-radius: 2px; background-image: url(/img/icon-checkbox.png);}
ul.input-list > li > input[type="checkbox"]:checked + label::before {background-image: url(/img/icon-checkbox-checked.png);}
ul.input-list.small > li > label {padding-left: 24px;}
ul.input-list.small > li > label::before {width: 16px; height: 16px;}
ul.input-list > li input.text {display: inline-block; width: 200px; margin-left: 30px;}

ul.input-box {position: relative; font-size: 14px; font-weight: 500; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
ul.input-box > li input {position: absolute; opacity: 0;}
ul.input-box > li label {display: block; line-height: 44px; border: 2px solid transparent; text-align: center; border-radius: 4px; background-color: #ebedf1; color: #6d829f;}
ul.input-box > li input:focus + label {outline: 2px solid rgba(9, 57, 104, 0.3);}
ul.input-box > li input:checked + label {border-color: #093968; color: #093968;}

p.checkbox {position: relative; font-size: 16px; font-weight: 500;}
p.checkbox > input {position: absolute; opacity: 0;}
p.checkbox > label {position: relative; display: block; padding-left: 32px; line-height: 24px;}
p.checkbox > label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 24px; height: 24px; border-radius: 2px; background: url(/img/icon-checkbox.png) center center no-repeat; background-size: contain;}
p.checkbox.lines > label::before {top: 4px; transform: translate(0, 0);}
p.checkbox > input:focus + label::before {outline: 2px solid #093968; outline-offset: 1px;}
p.checkbox > input[type="checkbox"]:checked + label::before {background-image: url(/img/icon-checkbox-checked.png);}

ul.file-download {position: relative; font-size: 14px; font-weight: 400;}
ul.file-download > li {position: relative;}
ul.file-download > li + li {margin-top: 30px;}
ul.file-download > li > span.label {position: relative; display: block; padding-left: 16px; margin-bottom: 6px;}
ul.file-download > li > span.label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0, -54%); width: 8px; height: 8px; border-radius: 10px; background-color: #ff008e;}
ul.file-download > li > ul > li {position: relative; border: 1px solid #ebedf1; border-radius: 4px; padding: 14px 10px; padding-right: 100px;}
ul.file-download > li > ul > li + li {margin-top: 10px;}
ul.file-download > li > ul > li span {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.file-download > li > ul > li > a {position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); color: #093968; background: url(/img/icon-download.png) right center no-repeat; background-size: 24px 24px; padding-right: 30px; line-height: 24px;}

ul.file-upload {position: relative; font-size: 14px; font-weight: 400;}
ul.file-upload > li {position: relative;}
ul.file-upload > li + li {margin-top: 30px;}
ul.file-upload > li span.label {position: relative; display: inline-block; padding: 0 30px 0 16px; line-height: 24px;}
ul.file-upload > li span.required.label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 8px; height: 8px; border-radius: 10px; background-color: #ff008e;}
ul.file-upload > li span.label span.desc {display: block; font-size: 11px; color: #ff008e; margin-top: -8px;}
ul.file-upload > li ul {margin-top: 6px;}
ul.file-upload > li ul > li {position: relative; min-height: 48px; border: 1px solid #b6c0cf; border-radius: 4px; padding: 14px 60px 14px 10px;}
ul.file-upload > li ul > li + li {margin-top: 10px;}
ul.file-upload > li ul > li a.btn {position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); font-size: 13px; line-height: 24px; min-width: 40px;}
ul.file-upload > li a.down {position: absolute; right: 70px; top: 3px; padding-right: 20px; color: #093968; background: url(/img/icon-download.png) right center no-repeat; background-size: auto 90%;}
ul.file-upload > li > p {position: absolute; right: 0; top: 0;}
ul.file-upload > li > p a.btn {font-size: 13px; line-height: 24px; min-width: 60px;}
ul.file-upload span.help {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); margin: 0;  white-space: wrap;}
ul.file-upload + div.button-box {margin-top: 50px;}


p.add-section {margin: 30px 0 50px 0; text-align: center; font-size: 16px; font-weight: 700; color: #093968;}
p.add-section a {display: block; position: relative; line-height: 46px; border: 1px dashed #b6c0cf; background-color: #f5f6ff; border-radius: 4px;}
p.add-section a::before {content: '\2b'; font-family: 'Font Awesome 6 Free'; font-weight: 700; margin-right: 10px;}


/* button */
div.button-box {text-align: right;}
div.button-box::after {content: ''; display: block; clear: both;}
div.button-box a.btn {min-width: 130px; width: 100%;}

a.btn {position: relative; display: inline-block; min-width: 110px; padding: 0 10px; vertical-align: middle; line-height: 46px; font-size: 16px; font-weight: 500; text-align: center; border: 1px solid transparent; border-radius: 4px; background-color: #093968; color: #ffffff;}
a.btn.left {float: left; margin-right: 3px;}
a.btn.regular {min-width: 110px; line-height: 46px; font-size: 16px; padding: 0 10px;}
a.btn.small {min-width: 80px; line-height: 30px; font-size: 14px; padding: 0 8px;}
a.btn.blue {background-color: #093968; color: #ffffff;}
a.btn.gray {background-color: #94A3b8; color: #ffffff;}
a.btn.blue-line {background-color: #ffffff; border-color: #b6c0cf; color: #093968;}
a.btn.blue-dash {background-color: #ffffff; border-color: #093968; color: #093968; border-style: dashed;}
a.btn.red-line {background-color: #ffffff; border-color: #b6c0cf; color: #ff008e;}
a.btn.red-dash {background-color: #ffffff; border-color: #ff008e; color: #ff008e; border-style: dashed;}
a.btn.disabled {background-color: #ebedf1 !important; color: #6d829f !important; cursor: not-allowed;}
a.btn.full {width: 100%;}
a.btn.half {width: calc(50% - 15px); float: left;}
a.btn.half + a.btn.half {margin-left: 30px;}

a.btn.arrow {text-align: left; border-radius: 8px; line-height: 62px; padding: 0 16px; font-weight: 700;}
a.btn.arrow::after {content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: 16px; top: 50%; transform: translate(0, -50%);}

p.page-button {font-size: 14px; color: #666666; text-align: center; margin-top: 50px;}
p.page-button a {display: block;}



/* table */
table.data-list {width: 100%; background-color: #ffffff; font-size: 14px; font-weight: 500; table-layout: fixed; margin-top: 40px;}
table.data-list th,
table.data-list td {padding: 6px 8px; line-height: 32px; border: 1px solid #b6c0cf; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
table.data-list thead {border-bottom: 1px solid #093968; color: #093968; font-size: 14px; font-weight: 700; background-color: #f1f4f6;}
table.data-list td.left {text-align: left;}
table.data-list td.right {text-align: right;}
table.data-list a.button {display: block; max-width: 100%; line-height: 30px; border: 1px solid #b6c0cf; border-radius: 4px; text-align: center; padding: 0 10px; font-size: 14px; font-weight: 500; color: #093968; background-color: #ffffff;}
table.data-list a.button.green {color: #43a047;}
table.data-list a.button.yellow {color: #ffb90b;}
table.data-list a.button.gray {color: #666666;}
table.data-list a.button.pink {color: #ff008e;}
table.data-list a.button.red {color: #ff0000;}


/* pupup */
#layer-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(34, 34, 34, 0.7); z-index: 2000;}
div.layer-popup {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70%; padding: 20px 30px; border-radius: 8px; background-color: #ffffff; font-size: 14px; text-align: center; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); z-index: 2100;}
div.layer-popup p.icon span {display: inline-block; width: 32px; height: 32px; background: url(/img/icon-popup-check.png) center center no-repeat; background-size: contain;}
div.layer-popup p.title {font-size: 18px; font-weight: 700; color: #093968; margin-top: 20px;}
div.layer-popup p.content {font-size: 14px; margin-top: 20px;}
div.layer-popup p.content em.red {color: #ff008e;}
div.layer-popup p.button {margin-top: 20px;}
div.layer-popup p.button a + a {margin-left: 30px;}
div.layer-popup p.button a.close {display: inline-block; vertical-align: top; width: 74px; line-height: 30px; border: 1px solid #b6c0cf; border-radius: 4px; text-align: center;}
div.layer-popup.success p.icon span {background-image: url(/img/icon-popup-check.png);}
div.layer-popup.fail p.icon span {background-image: url(/img/icon-popup-alert.png);}

#layer-regulation {position: fixed; left: 0; bottom: 0; transform: translate(0, 105%); width: 100%; height: 80%; padding: 40px 30px 110px 30px; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #ffffff; font-size: 14px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); z-index: 2100; transition: transform 0.3s; overflow: hidden;}
#layer-regulation.on {transform: translate(0, 0);}
#layer-regulation div.container {position: relative; height: 100%; overflow: auto;}
#layer-regulation h3 {font-size: 16px; margin-bottom: 30px; color: #093968;}
#layer-regulation h4 {margin: 20px 0 5px 0; font-size: 15px; font-weight: 500;}
#layer-regulation p.button {position: absolute; left: 0; bottom: 30px; width: 100%; padding: 0 30px;}
#layer-regulation p.button a.close {display: block; line-height: 48px; border-radius: 4px; text-align: center; font-size: 16px; font-weight: 700; background-color: #093968; color: #ffffff;}

div.layer-window {position: fixed; left: 0; bottom: 0; transform: translate(0, 105%); width: 100%; padding: 30px 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #ffffff; font-size: 14px; z-index: 2100; transition: transform 0.3s;}
div.layer-window.on {transform: translate(0, 0);}
div.layer-window h3 {text-align: center; font-size: 18px; margin-bottom: 30px; color: #093968;}
div.layer-window p.desc {font-size: 12px; color: #666666; margin-top: 30px; text-align: center;}
div.layer-window a.btn {line-height: 46px; font-size: 16px; font-weight: 700; float: left; width: calc(50% - 10px);}
div.layer-window a.btn + a.btn {margin-left: 20px !important;}

#layer-payment {position: fixed; left: 0; bottom: 0; transform: translate(0, 105%); width: 100%; max-height: 80%; padding-bottom: 100px; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #ffffff; font-size: 14px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); z-index: 2100; transition: transform 0.3s; overflow: hidden;}
#layer-payment.on {transform: translate(0, 0);}
#layer-payment div.container {position: relative; height: 100%; overflow: auto;}
#layer-payment table {width: 100%; table-layout: fixed; font-size: 14px; font-weight: 400; text-align: center;}
#layer-payment table th,
#layer-payment table td {border-bottom: 1px solid #ebedf1; padding: 12px 10px; line-height: 20px;}
#layer-payment table th {background-color: #ebedf1; font-weight: 500;}
#layer-payment table th:first-child {width: 45%;}
#layer-payment div.button-box {position: absolute; left: 0; bottom: 30px; width: 100%; padding: 0 30px;}
#layer-payment div.button-box a.close {display: block; line-height: 48px; border-radius: 4px; text-align: center; font-size: 16px; font-weight: 700; background-color: #093968; color: #ffffff;}

#layer-category {position: fixed; left: 0; bottom: 0; transform: translate(0, 105%); width: 100%; height: 80vh; padding: 30px 0 100px 0; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #ffffff; font-size: 14px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); z-index: 2100; transition: transform 0.3s; overflow: hidden;}
#layer-category.on {transform: translate(0, 0);}
#layer-category h3 {font-size: 20px; margin-bottom: 30px; padding: 0 20px;}
#layer-category > a.close {position: absolute; right: 20px; top: 30px; width: 32px;}
#layer-category > div.container {position: relative; height: calc(80vh - 80px); overflow: auto;}
#layer-category div.search-box {display: none;}
#layer-category div.search-box.on {display: block;}
#layer-category ul.tab {display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-bottom: 20px; padding: 0 20px;}
#layer-category ul.tab > li {position: relative; border-bottom: 1px solid #6d829f;}
#layer-category ul.tab > li.on {border-bottom: 3px solid #093968;}
#layer-category ul.tab > li > a {display: block; position: relative; line-height: 46px; font-size: 16px; font-weight: 500; color: #6d829f;}
#layer-category ul.tab > li.on > a {color: #093968;}
#layer-category ul.form {padding: 0 20px;}
#layer-category ul.form > li + li {margin-top: 20px;}
#layer-category ul.form + div.button-box {margin-top: 20px; padding: 20px;}
#layer-category ul.form + div.button-box a.btn {width: calc(50% - 10px); float: left;}
#layer-category ul.form + div.button-box a.btn + a.btn {margin-left: 20px;}
#layer-category div.code-list {border-top: 1px solid #f1f4f6; border-bottom: 1px solid #f1f4f6; margin: 20px 0 60px 0;}
ul.category-list {position: relative; font-size: 14px; font-weight: 500;}
ul.category-list > li {position: relative;}
ul.category-list > li + li {border-top: 1px solid #f1f4f6;}
ul.category-list > li > input[type="radio"],
ul.category-list > li > input[type="checkbox"] {position: absolute; opacity: 0;}
ul.category-list > li > label {position: relative; display: block; padding: 10px 50px 10px 70px; z-index: 1;}
ul.category-list > li > input:checked + label {background-color: #f5f6ff;}
ul.category-list > li > label em.code {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); color: #093968; font-size: 12px;}
ul.category-list > li > label > p * {display: block; line-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.category-list > li > label > p > span {display: block; font-size: 12px; font-weight: 400;}
ul.category-list > li > label::after {content: ''; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); width: 16px; height: 16px; background: url(/img/icon-radio.png) center center no-repeat; background-size: contain;}
ul.category-list > li > input:not(.mousedown):focus + label::after {outline: 2px solid #093968; outline-offset: 1px;}
ul.category-list > li > input[type="radio"] + label::after {border-radius: 100px; background-image: url(/img/icon-radio.png);}
ul.category-list > li > input[type="radio"]:checked + label::after {background-image: url(/img/icon-radio-checked.png);}
ul.category-list > li > input[type="checkbox"] + label::after {border-radius: 2px; background-image: url(/img/icon-checkbox.png);}
ul.category-list > li > input[type="checkbox"]:checked + label::after {background-image: url(/img/icon-checkbox-checked.png);}


/* 팝업창 내용 페이지 */
body.popup #wrapper {padding-top: 0px;}
body.popup #main h2 {margin-bottom: 40px;}
body.popup p.desc {font-size: 12px; color: #666666; margin-top: 30px; text-align: center;}
body.popup ul.input-list.inline > li {float: left; margin-top: 0; margin-right: 30px; margin-bottom: 10px; padding-left: 0;}
body.popup ul.input-list.inline > li label::before {top: 4px;}


/* 기타 내용 */
p.page-option {font-size: 14px; margin-top: 30px; text-align: center; color: #999999; font-style: italic; display: none;}

#test-button {position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1000; text-align: center; padding: 20px 0;}