@charset "uft-8";

/* reset for mobile */
.mobile {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: 14px; color: #222222; background: #ffffff;}
#wrapper {position: relative; max-width: 688px; min-height: 100vh; margin: 0 auto; padding-top: 80px; padding-bottom: 100px;}
#wrapper.top-padding {padding-top: 200px;}
#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: 80px; z-index: 1000; background-color: #ffffff;}
#header div.container {position: relative; max-width: 1440px; height: 100%; margin: 0 auto;}
#header h1 {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); width: 140px;}
#gnb > ul {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); font-size: 14px; color: #093968;}
#gnb > ul > li {float: left;}
#gnb > ul > li + li {margin-left: 20px;}
#gnb > ul > li > a {display: block; line-height: 30px; border: 1px solid transparent;}
#gnb > ul > li.status > a {border-color: #093968; border-radius: 4px; padding: 0 24px;}

#header-stage {position: fixed; left: 0; top: 80px; width: 100%; height: 60px; z-index: 1000; background-color: #ffffff;}
#header-stage div.container {position: relative; max-width: 688px; height: 100%; margin: 0 auto;}
#header-stage ul {display: flex; gap: 0 10px; font-size: 14px; font-weight: 500; color: #b6c0cf; letter-spacing: -0.5px;}
#header-stage ul > li {position: relative; flex: 1; padding-top: 10px; text-align: center;}
#header-stage ul > li > span.bar {position: relative; display: block; height: 5px; background-color: #b6c0cf;}
#header-stage ul > li > span.bar span {position: absolute; left: 0; top: 0; height: 100%; width: 0%; background-color: #093968; transition: width 0.5s;}
#header-stage ul > li > em {display: block; margin-top: 10px;}
#header-stage ul > li.full > span.bar span {width: 100%;}
#header-stage ul > li.on > em {color: #093968;}
@media (max-width: 800px) {
  #header-stage div.container {padding: 0 40px;}
}

#main {position: relative; min-height: calc(100vh - 180px);}
@media (max-width: 800px) {
  #main {padding: 0 40px;}
}
#main-start {position: absolute; left: 0; top: 0; width: 160px; height: 0; overflow: hidden; 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 {height: 30px;}




/* sub common */
#main > h2 {font-size: 32px; margin-bottom: 60px;}
#main > h2 span.before {display: block; margin-bottom: 10px; font-size: 16px; font-weight: 500;}
#main > h2 span.after {display: block; margin-top: 20px; font-size: 16px; font-weight: 500;}
#main h3.title {font-size: 16px; font-weight: 500; margin-top: 50px; margin-bottom: 20px;}
#main h3.title.big {font-size: 32px; 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-center {position: fixed; width: min(100%, 688px); left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; overflow: hidden;}
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: 32px; margin-bottom: 20px;}
section.repeat div.header {position: relative; margin-bottom: 30px;}
section.repeat div.header .title {font-size: 32px !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: 8px 10px; 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;}
table.page-list tbody a:hover {color: #093968;}


/* error-page */
section.error-404 p.image {width: 200px; display: inline-block;}
section.error-404 p.title {font-size: 32px; font-weight: 700; margin-top: 60px;}
section.error-404 p.para {font-size: 24px; font-weight: 700; color: #666666; margin-top: 30px;}



/* main-page */
div.main-intro {display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px; text-align: left;}
div.main-intro > div {position: relative;}
div.main-intro > div h3 {font-size: 32px; margin-bottom: 20px;}
div.main-intro > div h3 + p {font-size: 16px; 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: 80px; 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 + li.btn {margin-top: 50px;}
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.two-column {display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}
ul.form.two-column > li + li {margin-top: 0;}
ul.form.two-column > li.full {grid-column: span 2;}
ul.form.two-column > li.btn {padding-top: 20px;}
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 {font-size: 14px; font-weight: 400; color: #6d829f; margin-left: 20px;}
ul.form.tall > li + li {margin-top: 50px;}
ul.form > li.address > div.form-box:first-child {width: calc(50% - 15px);}
ul.form > li.address > div.form-box:nth-child(2) {width: calc(50% - 15px);}
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; height: 20px; line-height: 20px;}
div.form-box > label.hidden {text-indent: -9999px;}
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: 6px;}
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 span.popup > span {display: block;}
span.help span.popup > span + span {margin-top: 4px;}
span.help.on {z-index: 100;}
span.help.on span.popup {display: block;}


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.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.short {width: 200px;}
input.text.long {width: 50% !important;}
input.text + input.text {margin-top: 10px;}
input.text:read-only,
input.text:disabled {box-shadow: none;}

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: 180px; border: 1px solid #b6c0cf; border-radius: 4px; padding: 14px; font-size: 14px; font-weight: 500; font: inherit; background-color: #ffffff;}
textarea:focus {border: 2px solid #093968; outline: none; box-shadow: 0 3px 3px 3px rgba(9, 57, 104, 0.12); padding: 0 13px;}

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: 34px; 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.column2 {display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px;}
ul.input-list.column2 > li + li {margin-top: 0;}
ul.input-list.inline {display: flex; gap: 0 20px;}
ul.input-list.inline > li + li {margin-top: 0;}
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 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; line-height: 30px;}
ul.file-download > li {position: relative; border: 1px solid #b6c0cf; border-radius: 4px; padding: 14px 20px 14px 200px; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);}
ul.file-download > li + li {margin-top: 10px;}
ul.file-download > li > span.label {position: absolute; left: 20px; width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.file-download > li > ul > li {position: relative; padding-right: 100px;}
ul.file-download > li > ul > li + li {margin-top: 2px;}
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; width: 83px; right: 0; top: 50%; transform: translate(0, -50%); color: #093968; background: url(/img/icon-download.png) right center no-repeat; background-size: 24px 24px;}

ul.file-upload {position: relative; font-size: 14px; font-weight: 400; line-height: 30px;}
ul.file-upload > li {position: relative;}
ul.file-upload > li > div {position: relative; border: 1px solid #b6c0cf; border-radius: 4px; padding: 14px 20px 14px 220px; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);}
ul.file-upload > li + li {margin-top: 20px;}
ul.file-upload > li span.label {position: absolute; left: 18px; top: 16px; width: 180px; padding: 0 30px 0 15px; line-height: 24px; letter-spacing: -0.6px; white-space: nowrap;}
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 > li {position: relative; padding-right: 100px; min-height: 30px;}
ul.file-upload > li ul > li + li {margin-top: 2px;}
ul.file-upload > li ul > li span {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.file-upload > li ul > li a.btn {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); font-size: 13px; line-height: 24px; min-width: 60px;}
ul.file-upload > li a.down {position: absolute; width: 83px; right: 100px; bottom: 0; color: #093968; background: url(/img/icon-download.png) right center no-repeat; background-size: 20px 20px;}
ul.file-upload > li > p {text-align: right; margin-top: 4px; padding: 0 20px;}
ul.file-upload > li > p a.add {font-size: 13px; line-height: 24px; min-width: 60px;}
ul.file-upload span.help {position: absolute; right: 0; top: 1px; 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.center {text-align: center;}
div.button-box::after {content: ''; display: block; clear: both;}
div.button-box a.btn {min-width: 130px;}

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.red-line {background-color: #ffffff; border-color: #ff008e; 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 {position: absolute; left: 0; bottom: 30px; width: 100%; font-size: 14px; color: #666666; text-align: center;}
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; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
table.data-list thead {border-bottom: 1px solid #093968; color: #093968; font-size: 16px; font-weight: 700;}
table.data-list tbody > tr:nth-of-type(even) {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: 96px; 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%); min-width: 200px; 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.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: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; max-width: 80%; padding: 20px 30px; border-radius: 8px; background-color: #ffffff; font-size: 14px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); z-index: 2100; display: none;}
#layer-regulation.on {display: block;}
#layer-regulation div.container {position: relative; max-height: 70vh; overflow: auto;}
#layer-regulation h3 {font-size: 18px; margin-bottom: 40px;}
#layer-regulation h4 {margin: 20px 0 5px 0; font-size: 16px; font-weight: 500;}
#layer-regulation p.button {margin-top: 40px; text-align: center;}
#layer-regulation 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-window {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; padding: 40px 30px; border-radius: 8px; background-color: #ffffff; font-size: 14px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); z-index: 2100; display: none;}
div.layer-window.on {display: block;}
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;}

#layer-payment {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; max-width: 80%; border-radius: 8px; background-color: #ffffff; font-size: 14px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); z-index: 2100; display: none;}
#layer-payment.on {display: block;}
#layer-payment div.container {position: relative; max-height: 80vh; overflow: auto;}
#layer-payment div.header {padding: 20px 30px;}
#layer-payment div.header div.info {border: 1px solid #b6c0cf; border-radius: 4px; padding: 15px 20px 15px 70px; background: url(/img/icon-info.png) 20px center no-repeat; background-size: 24px auto;}
#layer-payment div.header div.info em {display: block; font-weight: 700; font-size: 16px; color: #093968; margin-bottom: 10px;}
#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: 10px; line-height: 26px;}
#layer-payment table th {background-color: #ebedf1; font-weight: 500;}
#layer-payment div.button-box {padding: 20px 0;}
#layer-payment div.button-box a.btn {min-width: 80px;}

#layer-category {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; max-width: 80%; padding: 20px 30px; border-radius: 8px; background-color: #ffffff; font-size: 14px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); z-index: 2100; display: none;}
#layer-category.on {display: block;}
#layer-category h3 {font-size: 18px; font-weight: 700; margin-bottom: 20px; color: #093968;}
#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: 30px;}
#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 {gap: 20px;}
#layer-category ul.form + div.button-box {margin-top: 20px;}
#layer-category div.code-list {max-height: 350px; overflow: auto; border-top: 1px solid #f1f4f6; border-bottom: 1px solid #f1f4f6; margin: 30px 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: 14px 60px 14px 80px; z-index: 1;}
ul.category-list > li > input:checked + label {background-color: #f5f6ff;}
ul.category-list > li > input:checked + label::before {content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background-color: #093968;}
ul.category-list > li > label em.code {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); color: #093968;}
ul.category-list > li > label > p > em {display: block;}
ul.category-list > li > label > p > em > span + span::before {content: '|'; margin: 0 10px;}
ul.category-list > li > label > p > span {display: block; font-size: 12px; font-weight: 400; margin-top: 6px;}
ul.category-list > li > label::after {content: ''; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); width: 24px; height: 24px; 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);}
#layer-category a.btn {min-width: 90px;}


/* 팝업창 내용 페이지 */
body.popup #wrapper {padding-top: 60px;}





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

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