@charset "utf-8";

body {background-color:#f3f7f8; width:100%;}
body.bg_color {background:#fff;}
.body_wrap {position:relative; width:100%;}

/* 로그인 */
.login_bg {max-width:680px; margin:0 auto; margin-top:180px; background-color:#fff; border-radius:20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);}
.login_area {position:relative; margin:0 auto; max-width:470px; padding:80px 0}
.login_area .title {width:200px; margin:0 auto;}
.login_area .title  img {width:100%;}
.login_area .login_tt {text-align:center; margin-bottom:20px}
.login_area .login_form {clear:both; margin-top:40px;}
.login_area .input_row {position:relative; margin-bottom:20px; padding:10px; border-bottom:solid 1px #e5e5e5; background-color:#fff;}
.login_area .input_box {display:block; overflow:hidden;}
.login_area .input_box i {position:absolute; margin-top:0}
.login_area .input_box input {margin-left:34px; width:90%;}
a.btn_login {display:block; width:100%; height:60px; line-height:60px; margin-top:60px; border-radius:8px; border:solid 0; background-color:#0064ff; color:#fff; font-size:20px; font-weight:500; letter-spacing:-.5px; cursor:pointer; text-align:center; -webkit-appearance:none;}
.login_form .menu_link {margin:0 auto; margin-top:20px; text-align:center;}
.login_form .menu_link li {display:inline-block; position:relative; margin:0 0 0 30px;}
.login_form .menu_link li:first-child:before {display: none;}
.login_form .menu_link li:before {content: " "; display:block; position:absolute; top:45%; left:-16px; width:4px; height:4px; background-color:#D4D6D4;}
.login_form .loing_info {text-align:center; font-size:24px; margin-top:40px;}
.login_form .loing_info strong {color:#000;}
.login_form .loing_info span {color:#0064ff; font-weight:600;}
.login_form .loing_info i {color:#999; font-size:80px;}
.block {display:block !important;}

/* 회원가입 */
.sub_top_wrap {position:relative; width:100%; border-bottom: 1px solid #E0E0E0; text-align:center;}
.inner {max-width:640px; margin:0 auto;}
.inner p.tit {padding:30px 0; font-size:36px; font-weight:600; color:#000;}

.join_area {position:relative; width:100%;}
.join_area .join_tit {font-weight:600; font-size:20px; line-height:30px; display:block; padding:40px 0 15px; color:#000; border-bottom: 1px solid #000; margin-bottom:20px;}
.join_area dl {width:100%; margin-bottom:30px;}
.join_area dt,.join_area dt label {margin-bottom:1px; font-weight:500; color:#000; font-size:16px}
.join_area dd {display:flex; flex-direction:row; }
.join_area dt span {font-size:14px; color:#9e9e9e; margin-left:4px; font-weight:normal;}
.join_area .button_submit {width:85px; color:#fff; text-align:center; background-color:#0064ff; border:1px solid #0064ff; margin-left:5px; font-size:14px; letter-spacing:-1px; border-radius:4px; }
.join_area .join_input {width:100%; display:inline-block; font-size:15px; height:46px; padding:0 10px; border:1px solid #ccc; border-radius:4px; background-color:#fff; box-sizing:border-box;}
.join_area input.join_input {opacity:0.6;}
.join_area .join_input.btn_search {border:1px solid #0064ff; color:#0064ff;}
.join_area .form_ip {background-color:#f7f7f7;}
.join_area .col {display:flex; flex-wrap:wrap; gap:10px;}
.join_area .col dl {flex: 1 1 40%; }

.agreebox_all {position:relative; display:block; background-color:#f4f4f4; padding:12px 20px; border-radius:4px;}
.agreebox_list {padding:17px 0 17px 5px;}
.agreebox_list li {position:relative; padding-bottom:14px;}
.agreebox_list .link_view {position:absolute; right:0; top:0; color:#595959; vertical-align:middle;}
.agreebox_list .link_view span {font-size:12px;}
.ico-required {width:0; padding:0 0 0 15px; position:relative; display:inline-block; white-space:nowrap; vertical-align:top}
.ico-required::before {content:"*"; float:left; margin:0 0 0 -15px; width:15px; color:#aa2d29; text-align:center}

/** 레이어팝업 **/
/* 클릭시 레이어팝업 뛰우기 버튼 : 버튼의 class에 OpenPop 추가 하고 rel에 고유의 문자 입력 */
/* 클릭시 레이어팝업 뛰우기 팝업 : 팝업 영역의 최상위 태그 class에 layerPopup_wrap 추가 하고 id에 고유의 문자 입력 */
.layerPopup_wrap {position:fixed; top:0; left:0; height:100%; width:100%; z-index:99997; display:none;}
.layerPop_btn {position:absolute; top:18px; right:15px; font-size:20px; color:#fff; z-index:1000;}
.layerPopup_bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.7!important;z-index:1;}
.layerPopup_box {position:absolute; top:0; left:0; display:block; padding:0 0; background:#fff; border-radius:15px; z-index:2; overflow-y:auto; height:auto; margin:0 20px;}
.layerPopup_box .con_area {position:relative; width:520px; height:600px; margin:0 auto; text-align:center;}
.layerPopup_box .con_area div.title {color:#fff; background:#c20f2f; padding: 0 15px; font-size:20px; line-height:66px; font-weight:600;}
.layerPopup_box .con_area p.tt {padding:10px 10px; color:#453b3d; font-size:12px; text-align:left; line-height:1.8; letter-spacing:-0.5px; height:calc(100% - 100px); overflow-y:auto;}
.subject_list {padding:40px 40px; text-align:left; display:flex; flex-wrap:wrap; width:100%;}
.subject_list li {flex: 1 1 40%; margin-bottom:10px;}
.layerPopup_box .join_area {position:relative; width:360px; height:240px; margin:0 auto; text-align:center; padding:60px 0;}
.layerPopup_box .join_area i {font-size:80px}
.layerPopup_box .join_area p {margin-top:10px; font-size:20px;}

/* 탭 */
.tabGroupSet .tabContSet {position:relative;  display:none;}
.tabGroupSet .tabContSet.on {position:relative;  display:block;}
.tabMenu {display:flex; background:#f8f8f8; margin-top:40px; padding:6px 6px; border-radius:8px;}
.tabMenu a {width:50%; text-align:center; font-size:18px; padding:6px 0;}
.tabMenu a.on {color:#000; background:#fff; border-radius:6px; font-weight:600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16)}

.int {display:inline-block; font-size:16px; color:#999; height:30px; line-height:30px; z-index:9; font-weight:300; background-color:#fff; -webkit-appearance:none;}
.blind {overflow:hidden; position:absolute; top:-99999px; width:0; height:0; line-height:0; text-indent:-99999px;}
.filebox {width:100%; margin-bottom:6px;}
.filebox input[type="file"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.filebox label {display:inline-block; padding:14px 12px; color:#fff; font-size:inherit; line-height:normal; vertical-align:middle; background-color:#0064ff; cursor:pointer; border-radius:4px;}
.filebox .upload-name {width:86%; display:inline-block; font-size:15px; padding:14px 16px; vertical-align:middle; background-color:#f7f7f7; border:1px solid #ebebeb; border-bottom-color:#e2e2e2; border-radius:4px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.inp_refer {position:relative; width:100%; padding-left:10px; color:#717171; font-size:12px;}
.inp_refer::before {content:'*'; position:absolute; top:0; left:0; color:#000;}
.inp_refer b {font-weight:500; color:#000;}

/* 하단 */
.footer {position:fixed; bottom:40px; width:100%; text-align:center;}
.footer a {padding:0 10px;}
.footer2 {position:relative; width:100%; text-align:center;}
.footer2 a {padding:40px 10px;}

strong {font-weight:600;}
.m_t_5 {margin-top:8px !important}

.invalid-feedback {margin-top: 5px;color: #ff3366;}
.swal2-container {z-index: 99999 !important;}

/* LOADING */
.page-loading { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(17, 17, 17, .2); z-index: 9999;}
.page-loading svg { width: 67px; height: 67px; display: flex; justify-content: center; animation: rotating 2s linear infinite; }
@keyframes rotating {
  from {
      -webkit-transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(360deg);
  }
}

/* 자동완성 (jquery-autocomplete) */
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

.cont { position:relative; width:100%; max-width:1020px; margin:0 auto; font-size:16px; margin-top:40px;}
.cont strong { margin-top:16px; font-size:18px; font-weight:700; color #171A19; line-height:1.5; letter-spacing:-0.25px;}
.cont .label_list {display:flex; -webkit-box-pack: justify; justify-content:space-between; margin-top:16px;}
.cont .label_list li {width:100%; text-align:center;}
.cont .label_list li .box_item {display:block; height:133px; padding:20px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; background-color:#F7FAF9; border:1px solid #F0F5F4; color: #171A19; line-height:1.4; letter-spacing:-0.25px;}
.cont .label_list li .box_item img {display:block; width:57px; margin:0 auto 12px;}
.cont .label_list li:not(:first-child) {margin-left: 8px;}
.use_list {margin-left:14px;}

.paragraph:not(:first-child) {margin-top:64px;}
.clause_contents {background:#fff; padding:30px 46px 40px; border:1px solid #efefef;}
.clause_contents .title {margin-top:16px; color:#000; text-align:center; padding-bottom:25px; font-size:18px; font-weight:700; border-bottom:1px solid #EAEBEA; margin-bottom:20px;}
.clause_contents .menu_wrap {display:flex; gap:20px;}
.clause_contents .menu_list {flex:1; min-width:0;}
.clause_contents .menu_list li {margin-bottom:10px;}
.clause_contents .menu_list li a {display:inline-flex; gap:5px; line-height:1.4; text-decoration: underline; color:#000;}

.table_wrap .bold {font-weight:700;}
.table_wrap {
    border-top: 1px solid #171A19;
}
.table_wrap table {
    width: 100%;
    border-collapse: collapse;
}
.table_wrap table thead th {
    padding: 14px 0;
    background-color: #F0F5F4;
    border-left: 1px solid #FFFFFF;
    text-align: center;
}
.table_wrap table thead th:first-child {
    border-left: none;
}
.table_wrap table thead th.bd_l {
    border-left: 1px solid #FFFFFF;
}
.table_wrap table thead th.bd_t {
    border-top: 1px solid #FFFFFF;
}
.table_wrap table thead th.bd_b {
    border-bottom: 1px solid #FFFFFF;
}
.table_wrap table tbody th {
    border-bottom: 1px solid #eaebea;
    border-left: 1px solid #eaebea;
    font-weight: normal;
}
.table_wrap table tbody th.first {
    border-left: none !important;
}
.table_wrap table tbody th.al_center {
    text-align: center;
}
.table_wrap table tbody th.al_right {
    text-align: right;
}
.table_wrap table tbody td {
    padding: 16px;
    border-bottom: 1px solid #eaebea;
    border-left: 1px solid #eaebea;
    background-color: #FFFFFF;
	vertical-align:middle;
}
.table_wrap table tbody td.first {
    border-left: none;
}