@charset "utf-8";
/* CSS Document */
/* com2zoa design kjh 꿈드리미 260210 */

/** 공통 **/
/********************** COMMON **********************/ 
.clear_fix::after{content: ""; display: block; clear: both}
.hide{display: none}
.hidden{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
a{text-underline-offset:4px}  
fieldset {min-width: 100%}
span.ico_dash{display:block; margin: 0 auto; align-content: space-around; text-align: center}

/** 여백 조정 **/
.mrbt7{margin-bottom: 7px}

/* 폰트에서 span사용시 색지정 */
/* span에 단독으로 스타일을 주면 모든 span 태그에 font-weight가 지정되므로 bold는 각각 지정함)_더 두껍게 할 시에는 고유클래스 아래에 지정  */
span.col_re{font-weight: 500; color:#ee361d} /*빨간색*/
span.col_or{font-weight: 500; color:#ff9f17} /*주황색,노란색*/
span.col_gr{font-weight: 500; color:#70b305} /*초록색*/
span.col_lbl{font-weight: 500; color:#3ca3d3} /*밝은파란색*/
span.col_bl{font-weight: 500; color:#076fc2} /*파란색*/
span.col_na{font-weight: 500; color:#335c7f} /*남색*/
span.col_pu{font-weight: 500; color:#9644f3} /*보라색*/
span.col_pk{font-weight: 500; color:#ff6f7d} /*분홍색*/
span.col_bk{font-weight: 500; color:#000} /*검정색(bold)*/
span.col_bold {font-weight:600 !important}
span.underline{font-weight: 500; text-decoration:underline; text-underline-offset:3px} /*밑줄*/

/** 테이블 관련 공통 스타일 **/
/* 모바일에서 표 가로 스크롤스타일 */
.scroll_st{overflow-x: scroll}
.scroll_st::-webkit-scrollbar {height: 10px}
.scroll_st::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0.05); border-radius:0 0 5px 5px; box-shadow: inset 0px 0px 0px white}
.scroll_st::-webkit-scrollbar-thumb {background-color: #a7a7a7; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent}
/*지정된 해상도에서만 나오는 테이블 스크롤 안내텍스트*/
.scroll_txt{display: none}

/** 스크롤스타일 **/
/*높이값은 고유스타일 조정*/
.scroll_type{overflow-y: scroll; height:100px; padding:20px 10px}
.scroll_type::-webkit-scrollbar {width: 8px}
.scroll_type::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0.08); box-shadow: inset 0px 0px 0px white}
.scroll_type::-webkit-scrollbar-thumb {background-color: #bababa; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent}

/* 왼쪽정렬 폰트 */
.cz_table tbody td.txleft{text-align: left}
/*모바일 아래에서 표 내용이 너무많을때 사이즈 고정후 스크롤 하기 테이블 감싸고 있는 div한테 scroll_sty 클래스 주면됨*/	
@media only screen and (max-width:710px) {
.scroll_sty{overflow-x: auto; position: relative}
.scroll_sty > table {min-width:710px}
}

/* col class 스타일 */
.wdtfix{width:40px}
.wdt1{width: 1%}
.wdt2{width: 2%}
.wdt3{width: 3%}
.wdt4{width: 4%}
.wdt5{width: 5%}
.wdt6{width: 6%}
.wdt7{width: 7%}
.wdt8{width: 8%}
.wdt9{width: 9%}
.wdt10{width: 10%}
.wdt11{width: 11%}
.wdt12{width: 12%}
.wdt13{width: 13%}
.wdt13_5{width: 13.5%}
.wdt14{width: 14%}
.wdt15{width: 15%}
.wdt16{width: 16%}
.wdt17{width: 17%}
.wdt18{width: 18%}
.wdt19{width: 19%}
.wdt20{width: 20%}
.wdt25{width: 25%}
.wdt30{width: 30%}
.wdt35{width: 35%}
.wdt40{width: 40%}
.wdt45{width: 45%}
.wdt50{width: 50%}
.wdt55{width: 55%}
.wdt60{width: 60%}
.wdt65{width: 65%}
.wdt70{width: 70%}
.wdt75{width: 75%}
.wdt80{width: 80%}
.wdt90{width: 90%}
.wdtauto{width: auto}

/** 스크롤스타일 **/
/*높이값은 고유스타일 조정*/
.scroll_type{overflow-y: scroll; height:100px; padding:20px 10px; border-radius: 5px}
.scroll_type::-webkit-scrollbar {width: 8px}
.scroll_type::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0.15); border-radius:0 5px 5px 0; box-shadow: inset 0px 0px 0px white}
.scroll_type::-webkit-scrollbar-thumb {background-color: #a7a7a7; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent}

input, button, label, select {font-size:1em; border-radius:0}
input::placeholder {color:#b9b9b9}
.button {vertical-align:-1px; margin:0 4px}
#list_page .button {vertical-align:middle; margin:0}

/* 기본 app */ 
input[type="date"] {position:relative; background-image:url(../../images/app/ico_cal.png); background-repeat: no-repeat; background-position: right 5px top 50%; cursor: pointer; -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important}
input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent;  cursor: pointer}
.inputbox {display:flex; gap:5px; width:100%}
.sel_base {width:100%; border:1px solid #d4d4d4; padding-left:5px}
select {width:100%; height:36px; padding:5px 22px 5px 10px; cursor: pointer ; appearance:none; background:#fff url(../../images/app/sel_arr.png) no-repeat right 8px top 50% ;  border:0; box-sizing:border-box; font-size:1em}
select::-ms-expand {display:none; /*for IE10,11*/}

/** textarea공통사항 지정영역 **/
textarea.area_write{display: block; width: 100%; min-height: 100px; padding: 5px; border:1px solid #d4d4d4; box-sizing: border-box}

/** radio공통사항 지정영역 **/ 
.radio_box .radio_item{margin: -2px 8px 0 2px }
.radio_box label{font-family:NSQ}
.regist_form .radio_box label{font-family:NSQ}
.radio_box.radio_center{text-align: center}
.radio_box.radio_center > p{float: none; display: inline-block}

/** 파일첨부 추가 스타일 (개별업로드) **/
.file_upload{position: relative; padding-right: 120px; box-sizing: border-box}
#file_box_{width: 100%; height: 35px} 
#_upload_file {position:absolute; top:0;left:0; width: 100%; height: 35px; opacity:0; filter:alpha(opacity=0); z-index:1; cursor: pointer}
.file_upload .newfileup{position:absolute; top:0; right:0; display:block; width: 115px; height:35px; line-height: 35px; background:#535353; border-radius: 3px; color:#fff; text-align: center; font-size: 13px; box-sizing: border-box; transition: all .3s}
.file_upload:hover .newfileup{background: #1c66b2}

/** checkbox 스타일 변경 **/ 
input[type="checkbox"] {height: 12px; width: 12px; margin: 0; border:1px solid #c5c5c5; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; cursor: pointer}
input[type="checkbox"]::after {display: none; content: ''; position: relative; width: 15%; height: 40%; left: 40%; top: 20%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg)}
input[type="checkbox"]:checked {background: #449cf5; border:none}
input[type="checkbox"]:checked::after {display: block}
input.lst_check[type="checkbox"]{margin: -1px 0 0}

/** input 공통사항 지정영역 **/
input::placeholder, textarea::placeholder {color: #939393; font-weight: 400; font-size: 14px}
input[type="radio"]{margin: -4px 5px 0 0; border-color:#fff}
input[type='date'] {position: relative}
input[type='date']::-webkit-calendar-picker-indicator {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer}
input[type='date']::before {content: attr(data-placeholder); font-size: 10px; color:#b1b1b1; width: 100%}
input[type='date']:focus::before,
input[type='date']:valid::before {display: none}
input[type='time'] {position: relative}
input[type='time']::-webkit-calendar-picker-indicator {background: transparent; color: transparent; cursor: pointer}
.input_base { width: 100%; height: 100%; min-height: 34px; padding: 3px; border:1px solid #d4d4d4; box-sizing: border-box}
.input_base.input_long{width:100%}
.input_date {width:100%; min-height:35px; padding: 2px 25px 2px 5px; background: url(../../images/app/ico_cal.png) no-repeat right 8px center #fff; -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; padding: 3px; border:1px solid #d4d4d4; box-sizing: border-box}
.input_time {width:100%; min-height:35px; padding: 3px 0 3px 5px; background: url(../../images/app/ico_time.png) no-repeat right 8px center #fff; -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; padding: 3px; border:1px solid #d4d4d4; box-sizing: border-box}

/* 프로그램 목록 */
.pro_lstbox {display:flex; justify-content: space-between; align-items:flex-end; margin-bottom:10px; font-size:1.077em}
.pro_lstbox .top_right .srchform {display: flex; gap:5px}
.pro_lstbox .top_right .srchform .btn_search {width:55px; background:#3d4e69 url(../../images/app/btn_srch_ico.png) no-repeat 50% 50%; border-radius:3px; color:#fff; font-size:0}
.pro_lstbox .top_right .srchform .btn_view {width:55px; background:#3d4e69 url(../../images/app/btn_srch_ico.png) no-repeat 50% 50%; border-radius:3px; color:#fff; font-size:0}
.input_box {display: flex; gap:5px}
.sel_box {display: flex; gap:5px}
.pro_lstbox .top_right button {flex-shrink:0}
.input_area {display: flex; align-items: center; gap:5px}
.app_num {font-weight:500}

/* 프로그램 목록-테이블영역 */
.pro_tbwrap  {width:100%; clear:both; padding:0; margin:0; font-size:1.077em; font-weight:400}
.pro_tbwrap table {width:100%}
.pro_tbwrap table thead th {background:#186cbc; color:#fff; padding:10px 6px ; border:1px solid #d8d8d8; vertical-align:middle; line-height:110%; font-size:1.071em; font-weight:500}
.pro_tbwrap table tbody th {padding:10px 6px; color:#2a2a2a; border:1px solid #d8d8d8; vertical-align:middle; line-height:130%; text-align: center}
.pro_tbwrap table tbody td {padding:10px 6px; color:#2a2a2a; border:1px solid #d8d8d8; vertical-align:middle; line-height:130%; text-align: center; word-break: keep-all}
.pro_tbwrap table tbody td .mtit {display:none}
.alink {font-weight:700; transition:.3s}
.alink:hover {text-decoration: underline; transition:.3s}
.pro_tb02 table thead th {background:#888888}

/* 프로그램 폼 하단 버튼 영역 */
.pro_bott {display:flex; justify-content: center; align-items: center; gap:10px; margin:20px 0}
.pro_bott > p {display:block; border-radius:0}
.pro_bott > p button {display:block; ; min-width:140px; min-height:46px; font-size:1.231em; font-weight:600; color:#fff; transition:.3s; border-radius:0}
.pro_bott > p:hover button {transition:.3s}
.pro_bott > p.btn_submit button {background:#fb7253}
.pro_bott > p.btn_confirm button {background:#2751a8}
.pro_bott > p.btn_cancel button {background:#8d8d8d}
.pro_bott > p.btn_submit button:hover {background:#e14825}
.pro_bott > p.btn_confirm button:hover {background:#133780}
.pro_bott > p.btn_cancel button:hover {background:#666}

/* 사이트 관리자 하단 버튼 영역 */
.pro_bott > p.btn_cancel button {background:#737373}
.pro_bott > p.btn_submit button {background:#2c85f3}
.pro_bott > p.btn_apply button {background:#457ef4}
.pro_bott > p.btn_alllist button {background:#314354}
.pro_bott > p.btn_alllist:hover button {background:#111921}
.pro_bott > p.btn_app {font-size:1em}
.pro_bott > p.btn_app1 button {color:#5a5a5a}



/* ============================= MOBILE LAYOUT ============================= */
@media only screen and (max-width:1024px) {
/*  프로그램 상단 검색영역 */
.pro_lstbox {font-size:1em}
    
/* 프로그램 목록-테이블영역 */
.pro_tbwrap {font-size:1em; border-top:1px solid #1d75aa}
.pro_wrap .pro_tbwrap table thead {display:none}
.pro_wrap .pro_tbwrap table tbody tr {display:flex; flex-wrap:wrap; align-items:center;box-sizing: border-box; width:100%}
.pro_wrap .pro_tbwrap table tbody td {position:relative; display:block; width:100%; line-height:120%; padding:5px 6px; border-top:0; text-align:left; padding-left:90px; min-height:16px}
.pro_wrap .pro_tbwrap table tbody td .mtit {display:flex; justify-content: center; align-items: center; position:absolute; top:0; left:0; width:78px; height:100%; line-height:110%; padding:6px 5px; background:#186cbc; font-size:13px; text-align: center; color:#fff; box-sizing: border-box}
.pro_wrap .pro_tbwrap table tbody tr td:first-child {background:#f2f2f2}
.pro_wrap .pro_tbwrap table tbody tr td:first-child .mtit {background:#12487b}
.pro_tbwrap table tbody td.mline {min-height:30px; align-content: space-around}
.brline {line-height: 10px}
.pro_wrap .pro_tbwrap table tbody tr td.td_nodata {padding:10px; text-align:center}
    
 /* 프로그램 목록 */
.pro_lstbox {font-size:1em; flex-wrap: wrap; gap:5px}
.top_right {width:100%}
.pro_lstbox .top_right .srchform {flex-wrap:wrap}
.pro_lstbox .top_right .srchform .btn_search {width:50px}
.input_box {width:100%}
.sel_box {width:100%}
.pro_topbox .pro_toptit {text-align: center}
.pro_topbox .pro_toptit p {display:inline-block; padding:12px 20px 12px 60px; background-size:34px auto; font-size:1.308em}
.pro_topbox .pro_topdate {flex-wrap:wrap; justify-content: center; padding:10px; text-align: center; font-size:1.308em}
    
}




/* ============================= PC LAYOUT ============================= */
@media only screen and (min-width:1025px) {
.skip_navi .mb_skip{display:none}
    
/* 위드값(px) */
.wdt100 {width:100%}
.wid50 {width:50px !important}
.wid60 {width:60px !important}
.wid70 {width:70px !important}
.wid80 {width:80px !important}
.wid90 {width:90px !important}
.wid100 {width:100px !important}
.wid110 {width:110px !important}
.wid120 {width:120px !important}
.wid130 {width:130px !important}
.wid140 {width:140px !important}
.wid150 {width:150px !important}
.wid160 {width:160px !important}
.wid180 {width:180px !important}
.wid200 {width:200px !important}
.wid210 {width:210px !important}
.wid220 {width:220px !important}
.wid240 {width:240px !important}
.wid250 {width:250px !important}
.wid280 {width:280px !important}
.wid300 {width:300px !important}
.wid350 {width:350px !important}
.wid400 {width:400px !important}
.wid450 {width:450px !important}
.wid500 {width:500px !important}
    
}



/* ============================= LOWSET FIX ============================= */
@media only screen and (max-width:900px) {
}

@media only screen and (max-width:650px){


}