/***********
 * pretendard
 ***********/


 @font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root{
    
    --point_color:#5a5ece;
    --sub_color:#2a3042;
    --point_tlt:'Pretendard', sans-serif;
    --point_txt:'Pretendard', sans-serif;
    --base_txt:'Pretendard', sans-serif;
}

*{font-family:var(--base_txt);}

ul{padding-left:0; list-style:none;}

.layout-wrapper, .layout-container, .layout-page, .content-wrapper{display:block;}

/* header 영역 */

/* 헤더 */
header{position:fixed; width:200px; background:none; z-index: 10; min-height:100vh; height:100%;}
header .head_top{background:var(--point_color); padding:20px 10px; text-align:center; transition:0.3s;}
header .head_top .logo_wrap{margin-bottom:0; position:relative;}
header .head_top .logo_wrap .t_menu_tgbtn{display:none;}
header .head_top .logo{display:block; width:80px; height:80px; border-radius:50%; background:#fff; position:relative; margin:0 auto; overflow:hidden;}
header .head_top .logo > img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:100%; object-fit:contain; max-width:50px;}
header .head_top .logo + a{display:block; margin-top:10px; width:100%; font-size:16px; color:#fff; line-height:100%;}

header .top_menu{margin-top:10px;}
header .top_menu .hello_user{color:#fff; font-size:14px; margin-bottom:10px;}
header .top_menu .top_btns{display:flex; flex-direction:column; margin-bottom:0;}
header .top_menu .top_btns a{display:block; width:100%; height:28px; line-height:28px; background:#fff; color:#333; border:1px solid #ededed; border-radius:3px; font-size:13px;}
header .top_menu .top_btns * + *{margin-top:5px;}
header .top_menu .top_btns select{display:block; width:100%; height:28px; line-height:28px; background:var(--point_color); color:#fff; border:1px solid #ededed; border-radius:3px; font-size:13px; text-align:center;}
header .top_menu .top_btns select:focus{outline:none !important;}
header .top_menu .top_btns select option{padding:3px; background:#fff; color:#333; font-size:14px;}

/* aside */
aside{background:var(--sub_color); height:calc(100% - 250px); transition:all .3s; overflow-y:scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
aside::-webkit-scrollbar{display:none;}
aside nav > ul{list-style:none; padding-left:0;}
aside nav > ul > li > a{display:block; color:#fff; border-top:1px solid rgba(255,255,255,.2); padding-left:28px; font-size:15px; color:rgba(255,255,255,.7); padding:10px 20px 10px 10px; position:relative;}
aside nav > ul > li > a:hover{color:#fff;}
aside nav > ul > li > a:after{opacity: .7; content:""; display: block; position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; background:url(/images/cms/icon_arw_down_white.svg) no-repeat 50% 50%; background-size:auto 28px; -webkit-transition: transform .3s; -moz-transition: transform .3s; -ms-transition: transform .3s; -o-transition: transform .3s; transition: transform .3s;}
aside nav > ul > li > a > .sign_new_cnt{opacity:0.9;}

aside nav .tgl_menu{display:none; background:rgba(105, 108, 255, 0.16); border-top:1px solid rgba(255,255,255,.2); padding-left:0; list-style:none;}
aside nav .tgl_menu li{width:100%;}
aside nav .tgl_menu li a{display:block; padding-left:28px; font-size:15px; color:rgba(255,255,255,.7); padding:10px;}
aside nav .tgl_menu li a:before{content: '→'; display: inline-block; position: relative; margin-right: .625rem; color: #6c757d; transition: all .1s ease; transform: translateX(0);}

aside nav .tgl_menu li.on{background:rgba(79,115,233,0.1);}
aside nav .tgl_menu li.on a:before,
aside nav .tgl_menu li a:hover:before{transform: translateX(4px);}
aside nav .tgl_menu li a:hover,
aside nav .tgl_menu li.on a{background:var(--point_color); color:#fff;}
aside nav .tgl_menu li:hover a:before,
aside nav .tgl_menu li.on a:before {color: #fff;}

aside nav li.active > a {color:#fff;}
aside nav li.active .tgl_menu{display:block;}

.menu_tgl_btn{display:none;}

/* container */
.gds_container{width:calc(100% - 200px); margin-left:200px; transition:.3s;}

/* 정렬용 추가 클래스 */
.flex_row_center{display:flex; align-items: center;}

/* 타이틀 요소 관련 */
.content-wrapper > div.container-xxl{padding:20px !important; }
.container-p-y:not([class^=pt-]):not([class*=" pt-"]){padding-top:20px !important;}
.container-p-y:not([class^=pb-]):not([class*=" pb-"]){padding-bottom:20px !important;}
.content-wrapper > div.container-xxl > nav.navbar{padding:0;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid{padding:0;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > h5.fw-bold{font-size:20px; font-weight:600; color:#333; position:relative; padding-left:10px;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > h5.fw-bold:before{content: ''; position: absolute; top: 50%; left: 0; width: 4px; height: 80%; display: block; background: var(--point_color); transform: translateY(-50%);}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > h5.fw-bold > i{display:none;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > ul.navbar-nav{flex-direction:row; align-items: center;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > ul.navbar-nav > li{position:relative; font-size: 14px; padding:0 10px; color:#666;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > ul.navbar-nav > div + li:before{opacity:.3; content:''; display:block; position:absolute; top:50%; left:0; width:1px; height:10px; margin-top:-5px; background-color:#6c757d;}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > ul.navbar-nav > li:last-child{color:var(--point_color);}
.content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > ul.navbar-nav > li.nav-item > a.nav-link{font-size:inherit; color:inherit;}

/* 테이블 관련 */
.table{
    --bs-table-striped-bg:transparent;
    --bs-table-striped-color:#666;
    --bs-table-active-color:#666;
    --bs-table-hover-color:#666;
    --bs-table-active-bg:transparent;
    --bs-table-hover-bg:transparent;
}

thead, tbody, tfoot, tr, td, th{border-color:#ededed;}
.card .table{border-top:2px solid var(--point_color);}
.table td, .table th{border:none; border-bottom:1px solid #ededed; font-size:15px; color:#666; white-space:nowrap;}
.table:not(.table-dark) th{color:var(--point_color);}
.table th{position: relative;}
.table thead th + th:before{content:""; display:block;  position:absolute; top:50%; left:0; width:1px; height:17px; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); background-color:#ddd;}
.table thead th{ background:#F8F9FC; padding:17px; font-weight:500;}
.table > :not(:first-child){border-top:none;}
.table th > b{font-weight:400;}
.table .nav-link:hover, .nav-link:focus{color:#333;}

.table .tb_noline{margin:20px 0 !important;}
.table .tb_noline th, .table .tb_noline td {border-bottom:none;}

/* table-responsive 커스텀 */
.table-responsive thead th{white-space: nowrap;}

/* 버튼 관련 */
.tb_top_btn{display:block; padding:0.5rem 1.25rem; border-radius: 0.375rem; background:#fff; transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; color:#999; border:1px solid #ccc;}
.tb_top_btn + .tb_top_btn{margin-left:5px;}
.tb_top_btn.active{background:#696cff; color:#fff; box-shadow:0 2px 4px 0 rgba(105,108,255,0.4);}

.btn{font-size:13px; padding:6px 10px; min-width:80px; border-radius:3px;}
.btn-group > .btn, .btn-group-vertical > .btn{word-break:keep-all;}
.btn-primary{background:var(--point_color); border-color:var(--point_color); box-shadow: none; min-width:80px;}
.btn-secondary{box-shadow: none;}
.btn-outline-primary{color:var(--point_color); border-color:var(--point_color);}
.btn-outline-primary:hover{color:#fff; background-color:var(--point_color); border-color:var(--point_color);}
.btn-outline-secondary{border-color:#ededed; color:#333;}
.btn-danger{box-shadow: none;}

/* 셀렉트 관련 */
.form-select{color:#333;}

/* 인풋 관련 */
.form-control{color:#333;}
.input-group-text{color:#333;}
.readonly{background: #f9f9f9}
.nav-link{color:#666;}

/* 라벨 관련 */
.form-label, .col-form-label{font-size:15px; color:#333; font-weight:400;}

.sign_new{width:15px; height:15px; line-height:15px; text-align:center; font-size:11px; display:inline-block; border-radius:50%; background:orange; color:#fff; font-weight:500;}
.sign_new_cnt{width:20px; height:20px; line-height:20px; text-align:center; font-size:13px; display:inline-block; border-radius:50%; background:var(--point_color); color:#fff; font-weight:400; opacity:0.4}

/* 요소 사이즈 관련 */
.col-sm-1{min-width:95px;}
.starRadio{height:20px;}
.starRadio__box{width:20px; height:20px;}
.starRadio:after{height:20px;}
.starRadio__box input[type="radio"]:checked + .starRadio__img {background-color: #ffce00;}

/* 랩핑 태그 */
.card{box-shadow: 0 4px 8px 0 rgba(0,0,0,.075); border-radius:15px; padding:20px;}
.card-header:first-child{padding:0;}
.card-header .card-text{height:fit-content;}
.card-body{padding:0;}
.card .card-body > div{width:100%;}

/* 페이징 */
.page-item .page-link{width:32px; height:32px; line-height:32px; background:#fff; border:1px solid #CED4DA; color:#6c757d; padding:0; margin:3px;}
.page-item.active .page-link{margin:3px;}
.page-link:hover{background:#fff; border:1px solid var(--point_color);}
.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus, .pagination li.active > a:not(.page-link), .pagination li.active > a:not(.page-link):hover, .pagination li.active > a:not(.page-link):focus{background:#fff; border:1px solid var(--point_color); color:var(--point_color); box-shadow: none;}

/* 메인 타이틀류 */
.top_row{margin-bottom:10px !important;}
.top_row h5{height:34px; line-height:34px; margin-bottom:0;}

/* 메인 상단 4분할 영역 */
.splx4{display:flex; justify-content:space-between;}
.splx4 > p{display:flex; justify-content:space-between; align-items:center; width:calc(25% - 15px); background:#fff; box-shadow: 0 4px 8px 0 rgba(0,0,0,.075);border-radius: 15px; padding:30px;}
.splx4 > p > b{font-weight:500; font-size:1.125rem; line-height:1.1; color:#566a7f;}
.splx4 > p > span{font-size:1.8rem; font-weight:600; line-height:1.1; color:#666;}


.sending_sms{display:flex; justify-content:space-between; flex-direction: row-reverse;}
.phone_wrap {float:right; width: 400px; margin-top: 0;}
.phone_wrap .phone{position: relative; height:570px; background:url(/images/cms/phone.png) no-repeat 50% 50%;text-align:center;background-size: 290px auto; background-position:50px 0;}
.phone_wrap .phone_box {position: absolute; top: 45%; width:210px; left: 45%; transform: translate(-50%, -50%);}
.phone .phone_box p {text-align:right; color: #666;}
.phone .phone_box textarea {width:100%; height:300px;}
.phone .phone_box div.telNo > input {width:110px}

.phone_tb{width:calc(100% - 400px);}


.login_box .sns_btn_wrap {margin-top: 40px;}
.login_box .sns_btn_wrap .tit {position: relative; display: block; text-align: center; margin-bottom: 25px;}
.login_box .sns_btn_wrap .tit:after {content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #ddd;}
.login_box .sns_btn_wrap .tit strong {position: relative; font-size: 18px; font-weight: 800; background-color: #f8f8f8; padding: 0 20px; z-index: 1;}
.login_box .sns_btn_wrap > div {text-align: center; margin-bottom: 25px;}
.login_box .sns_btn_wrap a {display: block; width: 100%; height: 60px; border-radius: 10px; margin-bottom: 10px; text-align: center;}
.login_box .sns_btn_wrap a span {font-weight: 600; line-height: 60px;}
.login_box .sns_btn_wrap a span:before {content: ''; display: inline-block; width: 30px; height: 30px; background: no-repeat 50% 50%; background-size: 30px auto; vertical-align: middle; margin-left: 5px;}
.login_box .sns_btn_wrap a.kakao_btn {background-color: #fee500; color: #191919;}
.login_box .sns_btn_wrap a.kakao_btn span:before {background-image: url('/images/contents/kakao_btn_icon.svg');}
.login_box .sns_btn_wrap a.naver_btn {background-color: #03c75a; color: #fff;}
.login_box .sns_btn_wrap a.naver_btn span:before {background-image: url('/images/contents/naver_btn_icon.svg');}
.login_box .sns_btn_wrap a.google_btn {background-color: #fff; border: 1px solid #E2E2E2;}
.login_box .sns_btn_wrap a.google_btn span:before {background-image: url('/images/contents/google_btn_icon.svg');}

.modal .row > *{padding-left:0;}

/* 레이어 팝업 */
.layer_pop_wrap{display:none; width:100%; height:100%; overflow:hidden; position:fixed; background:rgba(0,0,0,0.4); left:0; top:0; z-index:99;}
.layer_pop_wrap.active{display:block;}
.layer_pop_wrap > .layer_pop_box{background:#fff; border-radius: 15px; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; overflow:hidden;}
.layer_pop_wrap > .adm_sys_list{width:640px; height:fit-content;}
.layer_pop_wrap > .adm_sys_list h4{font-size:24px; padding-bottom:15px; border-bottom:1px solid #ddd; padding:30px; background:var(--point_color); color:#fff; margin-bottom:0;}
.layer_pop_wrap > .adm_sys_list ul{padding:15px 30px; overflow-y: scroll; list-style:none;}
.layer_pop_wrap > .adm_sys_list ul li{}
.layer_pop_wrap > .adm_sys_list ul li + li{border-top:1px dashed #eee;}
.layer_pop_wrap > .adm_sys_list ul li a{font-size:18px; display:block; padding:15px 0; color:#333;}
.layer_pop_wrap > .adm_sys_list ul li a:hover{color:#222}
.layer_pop_wrap .layer_pop_close{position:absolute; right:30px; top:25px; border:none; background:none; font-size:30px; color:#fff;}
.layer_pop_wrap .layer_pop_close .bx{font-size:inherit;}

/*.row{margin-left:0; margin-right:0;}*/

@media (min-width: 1200px){

    .layout-container > .layout-page{margin-left:200px;}
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page, .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page{
        padding-left:0;
    }
    .layout-menu-fixed .layout-navbar-full .layout-menu, .layout-page{padding-top:0 !important;}
}

@media (max-width: 1440px){
    /* 추가 수정분 (대시 - 기간 검색 창) - 20231020 */
    .period_slt{flex-wrap:wrap; border:1px solid #ededed; border-width:1px 0 0 1px;}
    .period_slt button{width:33.3333%; border-width:0 1px 1px 0;}
    .period_slt button:first-child,
    .period_slt button:last-child{border-radius:0;}
    .search_btn{width:30%;}
}
@media (max-width: 1280px){
    .sending_sms{flex-direction: column-reverse;}
    .phone_wrap{width:100%;}
    .phone_wrap .phone{background-position:auto 100%;}
    .phone_tb{width:100%;}
}

@media (max-width: 1200px){
    #layout-navbar{z-index:1110;}
    .layout-menu{transform:translate3d(0,0,0);}

    .layout-container > .layout-page{margin-left:200px;}
}

@media (max-width: 1024px){

    .table-responsive{overflow-x:scroll;}
    .table-responsive > table{white-space: nowrap;}

    .card .table{*display:block; white-space:nowrap;}

    /*헤더영역*/
    header{width:100%; height:60px; min-height:auto;}
    header .head_top{height:42px; padding:10px; position:relative;}
    header .head_top .logo{display:none;}
    header .head_top .logo + a{margin-top:0; font-size:18px;}

    header .head_top .logo_wrap .t_menu_tgbtn{display:block; position:absolute; top:0; bottom:0; right:10px; z-index:10; margin:auto; cursor: pointer;}
    header .head_top .logo_wrap .t_menu_tgbtn i{color:#fff; font-size:26px;}

    header .top_menu{display:none; position:absolute; top:32px; right:0; border:1px solid #ddd; padding:10px;background:#fff; z-index:10;}
    header .top_menu .hello_user{color:#333;}

    .menu_tgl_btn{display:block; width:42px; height:42px; position:absolute; border-radius:3px; transition:all .3s; overflow:hidden; top:0;left:10px; right:auto; margin:auto;}
    .menu_tgl_btn span{font-size:0; color:transparent; width:16px; height:2px; background:#fff; text-indent: -9999px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; clip:auto; transition:all .3s;}
    .menu_tgl_btn:before{content:''; display:block; width:16px; height:2px; background:#fff; position:absolute; top:15px; left:0; right:0; margin:auto; opacity:1;}
    .menu_tgl_btn:after{content:''; display:block; width:16px; height:2px; background:#fff;position:absolute; bottom:15px; left:0; right:0; margin:auto;}

    aside{position:fixed; left:0; top:42px; width:200px; height:100%; transform:translateX(-100%); padding-bottom:80px}

    /* 메뉴토글시 */
    .menu_toggle aside{transform:translateX(0);}
    .menu_toggle .menu_tgl_btn{background:var(--point_color);}
    .menu_toggle .menu_tgl_btn span{display:none;}
    .menu_toggle .menu_tgl_btn:before{transform:rotate(45deg); top:20px;}
    .menu_toggle .menu_tgl_btn:after{transform: rotate(-45deg); bottom:20px;}

    /* container */
    .gds_container{width:100%; margin-left:0;}
    .container-p-y:not([class^=pt-]):not([class*=" pt-"]){padding-top:60px !important;}

    /* 메인 타이틀류 */
    :root{
        --bs-root-font-size: 14px;
    }
    .content-wrapper > div.container-xxl > nav.navbar > div.container-fluid > h5.fw-bold{font-size:16px;}

    /* 메인 상단 4분할 영역 */
    .splx4 > p{display:block; padding:20px;}
    .splx4 > p >*{display:block;}
    .splx4 span{text-align:right;}

    /* 메인 - 신청내역*/
    .dash_con > div{width:100% !important;}
    .dash_con > div + div{padding-top:1rem; padding-left:0;}
    .dash_con:first-child{padding-left:0;}
    .dash_con > div .card{position:relative; padding-bottom:60px;}
    .dash_con > div .top_row button{position:absolute; bottom:20px; left:0; right:0; margin:auto; width:calc(100% - 40px);}

    .top_row{margin-bottom:10px !important;}
    .top_row h5{height:34px; line-height:34px; margin-bottom:0;}
    /* 기간 검색 창 - 좌우형 >> 세로형 */
    .search_date{flex-direction: column; align-items: flex-start;}
    .search_date .date_slt{width:100%;}
    .search_date .period_slt{margin-top:10px; width:100%;}
    .search_date .datepicker{min-width:auto;}
}

@media (min-width: 992px){

    .d-lg-block{display:none !important;}
}

@media (max-width: 767px){

    header .head_top .logo + a{font-size:18px; letter-spacing:-1px;}

    /* 메인 상단 4분할 영역 */
    .splx4{flex-wrap:wrap;}
    .splx4 > p{width:calc(50% - 10px);}
    .splx4 > p > span{text-align:center;}
    .splx4 > p > b{text-align:center; margin-bottom:10px;}

    /* 상단 로케이션 - 20231020 */
    .loca_wrap > div{flex-direction: column-reverse; align-items: flex-start !important; }
    .loca_wrap > div > ul{justify-content: flex-end; width:100%;}
    .loca_wrap > div > ul > li:first-child{padding-left:0 !important;}

    /* 레이어 팝업 */
    .layer_pop_wrap .layer_pop_box{max-width:640px; width:92%;}
    .layer_pop_wrap > .adm_sys_list h4{padding:15px; font-size:20px;}
    .layer_pop_wrap > .adm_sys_list ul{max-height:50vh; padding:15px;}
    .layer_pop_wrap > .adm_sys_list ul li a{font-size:16px;}
    .layer_pop_wrap .layer_pop_close{right:10px; top:15px;}
}

@media (max-width: 640px){


    html, body, header{min-width:360px;}
}


@media (max-width: 425px){

    .menu_toggle #container{margin-left:0; width:100%;}

}