@charset "utf-8";
@import url(fonts.css);

/* common reset */
*{margin: 0; padding: 0; box-sizing: border-box;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,form,fieldset,a,p,button,header,footer,table,caption,thead,tr,th,tbody,td,span,legend{margin: 0; padding: 0;}
body,input,select,textarea,header,footer,button {
    font-family: "Noto Sans KR","Nanum Gothic","나눔고딕","돋움",Dotum,Arial,sans-serif;
    font-weight: normal;
    color: #222;
    font-size: 14px;
	line-height: 1.2;
}
body{background-color: #f6f8f9; -wekit-text-size-adjust:none; height: 100%; width: 100%;}
ol, ul{list-style:none}
table{table-layout:fixed; width:100%; border-spacing:0; font-size:inherit;}
caption{overflow:hidden;width:0;visibility:hidden;font-size:0;line-height:0;height:0;text-indent:-9999px;}
button{border:0; cursor:pointer; display: inline-block; background-color: inherit; text-align: center; white-space: nowrap; vertical-align: top; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent;}
img{vertical-align:top; border:0;}
input,select,textarea {border-radius: 0;}
h1, h2, h3, h4, h5, h6{font-weight:600;}
a{text-decoration:none; color: inherit;}
select {-webkit-appearance: none; -moz-appearance: none;appearance: none;}
select::-ms-expand {display:none;}
select {background: #fff url(../images/select.png) 95% center no-repeat; padding-right: 20px;}
em {font-style: normal;}

.text-right {text-align: right !important;}
.text-left {text-align: left !important;}
.text-center {text-align: center !important;}
.float-left {float: left;}
.float-right {float: right;}
.align-top {vertical-align: top;}
.overflow-h {overflow: hidden;}
.mt-5 {margin-top: -5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mr20 {margin-right: 20px;}
.ml20 {margin-left: 20px;}
.mb5 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mtb20 {margin: 20px 0;}
.bold {font-weight: bold;}
.normal {font-weight: normal !important;}
.f13 {font-size: 13px;}
.f14 {font-size: 14px;}
.f15 {font-size: 15px;}
.f16 {font-size: 16px;}
.f17 {font-size: 17px;}
.green {color: #687b84;}
.gray {color: #7e878b;}
.navy {color: #393695;}
.blue {color: #5185db;}
.red{ color: #ff0000} /* 20230517 */
.w70 {width: 70px !important;}
.w80 {width: 80px !important;}
.w100 {width: 100px !important;}
.w130 {width: 130px !important;}
.w200 {width: 200px !important;}

/* list width */ 
.two>ul>li {width:50%;}
.three>ul>li {width:33.33%;}
.four>ul>li {width:25%;}
.five>ul>li {width:20%;}
.six>ul>li {width:16.66%;}
.seven>ul>li {width:14.28%;}
.nine>ul>li {width:11.11%;}
.ten>ul>li {width:10%;}
.fifteen>ul>li {width:6.66%;}

.header {background-color: #33316c; color: #fff; font-size: 17px;}
.header .inner {display: flex; max-width: 1200px; margin: 0 auto; padding: 0 25px;}
.header .logo {line-height: 76px; font-size: 17px; display: inline-block;}
.header .menu {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;text-align: center;}
.header .menu > li { height: 100%;}
.header .menu > li + li {margin-left: 20px;}
.header .menu > li > a {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    padding: 0 10px;
}
.header .menu > li.on a::before {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background-color: #fff;}
.header .menu > li.on > a {font-weight: 600;}
.header .menu > li .depth2 {display: none; background-color: #fff; text-align: center; position: absolute; left: 0; right: 0; z-index: 5; border-bottom: 1px solid #f6f8f9; box-shadow: 0 10px 20px 0 rgb(0 0 0 / 6%);}
.header .menu > li .depth2 > li {display: inline-block;}
.header .menu > li .depth2 > li + li {margin-left: 45px;}
.header .menu > li .depth2 > li > a {display: block; color: #222; padding: 20px 0; font-size: 16px;}
.header .menu > li .depth2 > li.on > a,
.header .menu > li .depth2 > li > a:focus,
.header .menu > li .depth2 > li > a:hover {color: #393695; font-weight: 600;}
.header .login {flex: 0 0 auto; line-height: 76px; position: relative;}
.header .login img {vertical-align: middle; margin-left: 25px;}
.header .login .dir {position: relative; top: -15px; font-size: 15px;}
.header .login .select {position: absolute; top: 35px; right: 42px;}
.header .login .select p {line-height: 1.2; width: 95px;}
@media screen and (max-width:900px) {
    .header {
        font-size: 2vw;
    }
    .header .menu > li + li { margin-left: 1vw;}
    .header .menu > li > a {
        padding: 0 0.5em;
    }
    .header .menu > li .depth2 > li > a {
        font-size: 14px;
    }
}
@media screen and (max-width:770px) {
    .header {
        font-size: 14px;
    }
    .header .menu > li + li { margin-left: 0vw;}
}

.contents {padding: 25px; max-width: 1200px; margin: 0 auto; min-height: 600px;}
.search_container {width: 100%; margin: 0 auto 35px; padding: 5px 20px; border-radius: 10px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.06); background-color: #ffffff;}
.search_container > div {padding: 15px 0;}
.search_container > div + div {border-top: 1px solid #ebebeb;}
.search_container .label {font-size: 17px; display: inline-block; width: 100px;}
.search_container span.label + div {display: inline-block;}
.search_container .btn_container {border-top: none;}

.total {font-size: 17px; margin-bottom: 15px;}
.total b {color: #33316c; margin-left: 10px;}

.select {display: inline-block; position: relative; color: #222; font-size: 14px; text-align: left;}
.select p {position: relative; width: 120px; height: 30px; padding: 5px 15px; border-radius: 6px; border: solid 1px #687b84; background-color: #fff;}
.select p::before {content: ''; width: 10px; height: 6px; background: url(../images/arr_select.png) center no-repeat; position: absolute; right: 15px; top: 50%; margin-top: -3px;}
.select.on p::before {transform: rotate(180deg);}
.select ul {display: none; max-height: 187px; overflow-y: auto; border-radius: 6px; box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.1); border: solid 1px #687b84; background-color: #ffffff; position: absolute; left: 0; right: 0; margin-top: 10px; z-index: 2;}
.select ul li {line-height: 30px;}
.select ul li + li {border-top: 1px solid #d9d9d9;}
.select ul li a {display: block; padding: 0 15px;}
.select ul li a:hover {background-color: #ebebeb;}
.datepicker {width: 110px; height: 30px; padding: 0 10px; border-radius: 6px; border: solid 1px #687b84;background: #ebebeb url(../images/calendar.png) 97% center no-repeat;}
input {width: 320px; height: 40px; padding: 0 15px; border-radius: 6px; border: solid 1px #687b84; background-color: #ffffff;}
input.sm_input {width: 200px; height: 28px; width: auto; text-align: center; border: 1px solid #8d9caf;}
input.sm_input:disabled {background-color: #f1f1f1;}

.btn-green {display: inline-block; text-align: center; min-width: 96px; height: 25px; line-height: 23px; border-radius: 12px; border: solid 1px #687b84; color: #687b84; background-color: #fff;}
.btn-green.on, .btn-green:focus {background-color: #687b84; color: #fff;}
.btn-green.list {height: 30px; line-height: 28px; border-radius: 6px; padding: 0 15px; margin-top: -5px; font-weight: 500;}
.btn-navy {width: 135px; height: 30px; border-radius: 6px; background-color: #33316c; color: #fff;}
.btn-red {width: 58px; height: 30px; border-radius: 6px; background-color: #b92e2e; color: #fff; font-weight: 500;}
.btn-default {width: 58px; height: 30px; border-radius: 6px; background-color: #cccccc; color: #fff; font-weight: 500;}
.bg-blue {background-color: #393695;}
.bg-sky {background-color: #5185db;}
.bg-green {background-color: #79b77d;}
.bg-black {background-color: #444;}
.btn-gray { height: 30px; border-radius: 6px; background-color: #33316c; color: #fff; font-weight: 500;width:auto;padding:0 5px;}
.btn-gray.disabled{background:#667080;cursor:text;}
.btn-sm {height: 28px; font-size: 12px; font-weight: normal; width: auto; padding: 0 8px;}
.border-sky {border: solid 1px #687b84; background-color: #ffffff; color: #5185db;}
.border-green {border: solid 1px #687b84; background-color: #ffffff; color: #158e47;}
.border-black {border: solid 1px #687b84; background-color: #ffffff; color: #222;}
.btn-more {width: 270px; height: 54px; margin: 25px 0; border-radius: 10px; border: solid 1px #687b84; background-color: #fff; font-size: 17px;}
.btn-pass {color: #fff; font-size: 10px; padding: 5px; border: 1px solid #fff; border-radius: 3px; margin-top: 20px; margin-right: 10px; background-color: rgba(0, 0, 0, 0.1);}

.ui-widget.ui-widget-content {clip: auto !important;}
.ui-widget.ui-widget-content {border: 2px solid #687b84; border-radius: 5px; margin: 2px 0 0;}
.ui-datepicker th { background: #687b84; border: 1px solid #687b84;}
.ui-datepicker th:first-child { background: #d07171; border: 1px solid #687b84;}
.ui-datepicker tr td:first-child a { color: #d40000;}
.ui-datepicker tr td:last-child a {color: #1d47bf;}
.ui-datepicker td { border: 1px solid #687b84;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {color: #687b84;}

.table_container {overflow: hidden; border-radius: 10px; margin-top: 15px;}
.table_container tr th {background-color: #e7ecef; font-weight: normal; padding: 7px 10px;}
.table_container thead tr th span {margin-top: 3px; display: block;}
.table_container .num {position: absolute; top: 5px; left: 10px;}
.table_container tbody tr:first-child td {border-top: 0;}
.table_container td {background-color: #fff; padding: 10px 5px; position: relative; border-top: 1px solid #ebebeb;}
.table_container td > span, .table_container td > a > span {display: block;word-break: break-word;}
.table_container td > span > b {display: inline-block;vertical-align: top;}
.table_container td > span + span {margin-top: 5px;}
.table_container td.no-search {background-color: inherit;}
.info_table {border: 1px solid #e7ecef; font-size: 14px; margin-top: 0;}
.info_table tr:first-child th {border-top: 0;}
.info_table tr th {border-top: 1px solid #ebebeb; text-align: left; background-color: #f1f1f1; font-weight: 500; color: #333;}
.info_table tr th,
.info_table tr td {padding: 8px 12px;}
.info_table tr td {color: #555;}
.info_table.text-center tr th {text-align: center;}
.no-search p {padding: 90px 0; font-size: 17px; color: #7e878b;}

.pagination {display: inline-block; margin: 25px 0;}
.pagination li {display: inline;}
.pagination>li>a {width: 30px; height: 30px; line-height: 28px; margin: 0 2px; border-radius: 6px; border: solid 1px #687b84; background-color: #ffffff; float: left;}
.pagination>li>a:hover, .pagination>li>a:focus, .pagination>li>a:active, .pagination>li.on>a {font-weight: bold;}
.pagination img {margin-top: 5px;}

.tab {border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; background-color: #ebebeb;}
.tab ul li {float: left; text-align: center;}
.tab li a {display: block; border: solid 1px #ebebeb; border-bottom: 4px solid #e2e2e2; padding: 13px 0; color: #7c7c7c;}
.tab ul li + li a {border-left: solid 2px #e2e2e2;}
.tab ul li a:hover, 
.tab ul li a:focus, 
.tab ul li a:active, 
.tab ul li.on a {color: #222; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; border: solid 1px #d1d7da; border-bottom: 4px solid #393695;}

.contents.error {display: table;}
.contents.error .inner {width: 600px; margin: 0 auto; display: table-cell; vertical-align: middle; line-height: 1.5;}
.contents.error button {height: 40px; width: 150px;}

.contents h2 {font-size: 17px; color: #33316c;}
.bul_list {font-size: 13px; color: #8d9caf;}
.bul_list li::before {content: '·'; margin-right: 5px;}

.gray_box {border: 1px solid #cdcdcd; background-color: #f9f9f9; border-radius: 8px; padding: 20px;}

.txt_info{margin-left:10px;}
/* icon */
i {background-repeat: no-repeat; background-position: center; display: inline-block;}
.i-list {background-image: url(../images/icon_list.png); width: 17px; height: 17px; position: relative; top: 3px;}
.border-sky i {background-image: url(../images/icon_down_s.png); width: 17px; height: 17px; vertical-align: top;}
.border-green i {background-image: url(../images/icon_down_g.png); width: 17px; height: 17px; vertical-align: top;}
.border-black i {background-image: url(../images/icon_down_b.png); width: 17px; height: 17px; vertical-align: top;}
.i-prev {background-image: url(../images/ico_prev_w.png); width: 8px; height: 15px; vertical-align: top; margin-top: 17px; margin-right: 8px;}
.i-next {background-image: url(../images/ico_next_w.png); width: 8px; height: 15px; vertical-align: top; margin-top: 17px; margin-left: 8px;}

/* popup */
.orange {color: #ff6600;}
.dim { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 11; background-color: rgba(0, 0, 0, 0.5);}
.popup {display: none;}
.popup_container {position: fixed; top: 20%; left: 50%; width: 700px; margin-left: -350px; background-color: #fff; z-index: 15; border-radius: 10px; overflow: hidden;}
.popup_header {background-color: #33316c; color: #fff; font-weight: bold; padding: 0 20px;}
.popup_header h2 { font-size: 18px; line-height: 45px;}
.popup_header h2 a img {padding-top: 14px;}
.popup_body {margin: 20px;}
.popup_body h3 {margin-bottom: 10px; font-size: 16px;}
.popup_body h3::before {content: ''; width: 8px; height: 8px; border-radius: 8px; background-color: #333; margin-right: 5px; display: inline-block; position: relative; top: -2px;}
.popup_footer {text-align: center; margin: 20px 0;}
.alert_pop .popup_container {margin-top: 200px; width: 350px; margin-left: -175px; border: 1px solid #888;}
.alert_pop .popup_header {text-align: center; background-color: #6d6d6d;}
.alert_pop .popup_header h2 {font-size: 16px; font-weight: 500; line-height: 35px;}
.alert_pop .popup_footer {height: 35px; margin: 0; border-top: 1px solid #cdcdcd; background-color: #f1f1f1;}
.alert_pop .popup_footer button {width: 100%; height: 100%; font-size: 15px;}
.popup_footer.half {overflow: hidden;}
.popup_footer.half button {width: 50%; float: left;}
.alert_pop .popup_footer.half button + button {border-left: 1px solid #cdcdcd;}

/* layer popup */
div.layer_bg {
    display:none;
    width:100%; height:100%;
    background:rgba(0,0,0,0.4);
    position:fixed; left:0px; top:0px; z-index:999;
}
div.layer {
    display:none;
    width:calc(100% - 110px);
    max-width:750px;
    padding:0 30px;
    background:white;
    border-radius:10px;
    position:fixed; left:50%; top:50%; z-index:1000;
    transform:translate(-50%, -50%);
    font-weight: 300;
    text-align: center;
    word-break: break-all;
    font-family: "Noto Sans KR","dotum","arial",sans-serif;
}
#layer_quesDcKor{
    max-height: calc(100% - 50px);
    overflow-y: auto;
}

div.layer_depth_cover {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 999;
}
div.layer div.layer_head {
    padding:20px 0;
    border-bottom:2px solid #33316c;
    position:relative;
}
div.layer div.layer_head > p:nth-child(1) {
    font-size:20px; 
    color:#343638; 
    line-height:20px; 
    font-weight:600;
    text-align:center;
}
div.layer div.layer_head > p:nth-child(2) {
    margin-top:15px;
    font-size:16px; color:#343638; line-height:16px;
    text-align:center;
}
div.msg {
    padding:50px 0 20px 0;
    font-size:20px; color:#222; line-height:28px;
}
div.use_guide {
    padding-bottom: 50px;
    font-size: 14px;
    color: #555;
    line-height: 24px;
}
div.use_guide b {
    color: #222;
    font-weight: 600;
}
div.layer div.layer_head b {
    color:#393695;
}
div.layer div.layer_head > [icon=close] {
    position:absolute; right:0px; top:50%;
    transform:translate(0%, -50%);
}
div.layer > button[icon=close] {
    position:absolute; right:30px; top:30px;
}
div.layer div.only_msg {
    padding:50px 0;
    font-size:20px; color:#222;
}
div.action_set {
    padding:30px 0;
    font-size:0px;
    text-align:center;
}
div.action_set button+button {
    margin-left:30px;
}

div.notice {
    padding:25px;
    font-size:17px; color:white; line-height:25px;
    text-align:center; font-weight:400;
    background:rgba(0,0,0,0.6);
    border-radius:10px;
    box-shadow:5px 5px 6px rgba(0, 0, 0, 0.2);
    position:fixed; left:50%; top:50%; z-index:10000;
    transform:translate(-50%, -50%);
}
[icon="active"] {
    display:inline-block;
    width:calc(50% - 15px); height:60px;
    font-size:20px; color:white; line-height:60px;
    vertical-align:middle;
    background:#33316c;
    border-radius:10px;
}
[icon="close"] {
    display: block;
    width: 20px;
    height: 20px;
    background: url(../images/ui_layer_close.svg) no-repeat center center;
    background-size: 100% 100%;
}
.logout_container {
    width: calc(100% - 110px);
    max-width: 750px;
    padding: 0 30px;
    background: white;
    border-radius: 10px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    text-align: center;
}


/* 20230223 */
[icon="btn-close"] {
    display:inline-block;
    width:calc(50% - 15px); height:60px;
    font-size:20px; color:white; line-height:60px;
    vertical-align:middle;
    background: #7a7a7a;
    border-radius:10px;
}
.layer_body div.msg2 {
    padding: 30px 0;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4em;
}
.layer_table tr:first-child th,
.layer_table tr:first-child td {
    border-top: 1px solid #8b8b8b;
}
.layer_table th, .layer_table td {
    border-right: 1px solid #8b8b8b;
    border-bottom: 1px solid #8b8b8b;
}
.layer_table tr td:last-child {
    border-right: 0;
}
.layer_table th, .layer_table td {
    padding: 0.65em 1.2em;
    text-align: left;
    font-size: 16px;
}
.layer_table th {
    background-color: #e7ecef;
    font-weight: bold;
}
.layer_table .w-150p {
    width: 150px;
}
.inline_radiobox {
    display: inline-block;
    margin-right: 1em;
    vertical-align: middle;
}
input[type="radio"] {
    visibility: hidden;
    display: none;
}
.inline_radiobox > label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-left: 1.8em;
    line-height: 1.4em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.inline_radiobox input[type="radio"]:checked + label:before {
    border-color: #33316c;
}
.inline_radiobox > label:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -0.05em;
    left: 0;
    width: 1.25em;
    height: 1.25em;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.2em;
}
.inline_radiobox input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    top: 0.7em;
    left: 0.35em;
    margin-top: -0.4rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: #33316c;
}
/* //20230223 */