@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; /* font: inherit; */ vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul, li {list-style: none;}
a, address {text-decoration: none;color: inherit; font-style: normal;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* 폰트 */
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: local('Pretendard Variable'), url('') format('woff2-variations');
}

/* 공통 */
html {scroll-behavior: smooth;}
html, body {height: 100%; font-family: 'Pretendard Variable', sans-serif;}
/* body {overflow-y: scroll;} */
.wrap {height: 100%;}
table tr td {vertical-align: middle;}
table tr td a {width: 100%; display: block;}
input:active, input:focus, a:active, a:focus, button:focus, button:active, select:active, select:focus, textarea:active, textarea:focus {outline: none;}
input, button, textarea, pre, select {font-family: 'Pretendard Variable';}

/* 숨기기 */
.hidden {display: none!important; opacity: 0!important;}

/* 정렬 */
.con {max-width: 1200px; margin: 0 auto;}
.align-left {text-align: left!important;}
.align-right {text-align: right!important;}
.align-center {text-align: center!important;}

.f-left {float: left!important;}
.f-right {float: right!important;}
.clear::after {content: ''; display: block; clear: both;}

.v-top {vertical-align: top!important;}
.v-mid {vertical-align: middle!important;}
.v-bot {vertical-align: bottom!important;}

.pr {position: relative!important;}
.pa {position: absolute!important;}
.pf {position: fixed!important}

.overflow-hid {overflow: hidden!important;}
.overflow-auto {overflow: auto!important;}
.ovfx-hid {overflow-x: hidden!important;}

.flexbox {display: flex;}
.jc-between {justify-content: space-between;}
.jc-around {justify-content: space-around;}
.jc-center {justify-content: center;}
.jc-start {justify-content: flex-start;}
.jc-end {justify-content: flex-end;}
.ai-center {align-items: center;}
.fd-column {flex-direction: column;}

/* 텍스트 굵기 */
.bold {font-weight: bold!important;}
.normal {font-weight: normal;}
.fw3 {font-weight: 300!important;}
.fw5 {font-weight: 500!important;}

/* 텍스트 색 */
.red {color: #ef4036;}
.blue {color: #186ce9}
.gray {color: #999;}
.white {color: #fff;}
.mint {color: #02ad96;}

/* 버튼 */
.btn-wrap {width: 100%; text-align: center; margin: 0 auto; display: flex; justify-content: center; margin-top: 20px;}
.btn-wrap button {margin-right: 10px;}
.btn-wrap button:last-child {margin-right: 0;}
.btn-normal {background-color: #02ad96; border-radius: 5px; color: #fff; width: 150px; height: 50px; line-height: 50px; vertical-align: middle; box-sizing: border-box; border: 1px solid #02ad96; padding: 0 15px; cursor: pointer; font-size: 16px; font-weight: 500; font-family: 'Pretendard Variable';}

.btn-white {background-color: #fff!important; border: 1px solid #02ad96!important; color: #02ad96!important;}
.btn-grey {background-color: #fff!important; border: 1px solid #c1c1c1!important; color: #666!important; cursor: pointer;}

.btn-file {margin-left: 10px; margin-top: -5px; display: inline-block;}

/* 테이블 */
.tbl {width: 100%; font-size: 13px; text-align: center; border-collapse: separate; border-spacing: 0px; border-left: 1px solid #ccc;}
.tbl th, .tbl td, .tbl thead tr th, .tbl tbody tr td {vertical-align: middle; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}
.tbl tbody tr td {padding: 5px;}
.tbl thead tr th {position: sticky; top: 0; padding: 11px; border-top: 1px solid #ccc;}

/* 팝업 */
.popup-layer {display: block; position: absolute; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.4); top: 0; left: 0; z-index: 9998;}
.popup-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-sizing: border-box; padding: 20px;}
.popup-box.msg-box .popup-body {min-height: auto; padding: 30px 0; overflow: hidden; min-width: 300px; line-height: 140%;}
.popup-box.msg-box .popup-body p {text-align: center; font-size: 14px;}

.popup-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ccc; font-size: 16px;}
.popup-header .close {position: relative; width: 16px; height: 16px;}
.popup-header .close .bar {width: 16px; height: 1.5px; background-color: #000; display: inline-block; position: absolute; top: 4px; left: 0; cursor: pointer;}
.popup-header .close .bar:nth-child(1) {transform: rotate(45deg);}
.popup-header .close .bar:nth-child(2) {transform: rotate(-45deg);}

.popup-body {font-size: 13px; overflow-y: hidden; position: relative}

.popup-footer {margin-top: 20px; position: sticky;}
.popup-footer .btn-wrap {display: flex; justify-content: center;}
.popup-footer .btn-wrap button {margin-right: 5px;}
.popup-footer .btn-wrap button:last-child {margin-right: 0;}

.unit {float: right; color: #aaa; font-weight: 400;}
.star {color: #ef4036;}

/* 로딩 */
.loading {display: none; position: absolute; min-height: 300px; max-height: 600px; width: calc(100% - 40px); height: calc(100% - 40px); overflow: hidden; z-index: 9999; text-align: center; align-items: center; justify-content: center;}
.loading .loading-bg {width: 100%; height: 100%; box-sizing: border-box; position: relative; background-color: rgba(256,256,256,0.7);}
.loading .loading-img {position: absolute;}
.loading .loading-img img {width: 2rem; height: 2rem;}

/* 로딩 팝업 */
.popup-body.loading-body {margin-bottom: 0;}
.popup-loading {display: inline-block; width: 16px; height: 16px;}
.loading-msg {display: flex; justify-content: center; align-items: center; font-size: 14px;}
.loading-msg img {margin-right: 5px; width: 16px; height: 16px;}

@media all and (max-width:1024px) {
    .con {padding-left: 25px; padding-right: 25px;}
}

@media all and (max-width:768px) {
    .con {padding-left: 20px; padding-right: 20px;}
}

@media all and (max-width:568px) {
    .con {padding-left: 12px; padding-right: 12px;}
}

@media all and (max-width:320px) {
}