@charset "utf-8";
/* CSS Document */
/* com2zoa design KJH 251114 */

/********************** 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}
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}
select {width:100%; height:36px; padding:5px 26px 5px 10px; cursor: pointer ; appearance:none; background:#fff url(../../images/app/bg_selarr.png) no-repeat right 10px 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: 35px; 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}

/** 보기검색 **/
.view_half {display: flex; justify-content: space-between; margin:10px 0}
.view_half.view_topline {padding:12px; background:#f2f2f2}
.view_half .view_topwrap {min-width:300px; margin: 0; border: none}
.view_half .view_topwrap.long_type {min-width:800px}
.view_topwrap .view_bx {display: flex; gap:5px; width: 100%; box-sizing: border-box}
.view_topwrap .view_sel {display: flex; flex-wrap: wrap; width: 100%; gap:7px}
.view_topwrap .view_sel > div {display: block; position: relative; flex: 1; width: 100%}
.view_topwrap .view_sel > div.sel_box .sel_base{min-width:120px}
.view_topwrap .view_sel > div.input_box{min-width:100px} 
.view_topwrap .view_sel > div.input_box.wth_fix{min-width: 170px}

/** 버튼지정영역 **/
button{border-radius: 3px; transition: all .5s; box-sizing: border-box; cursor: pointer}
button:disabled {color:#000; cursor: not-allowed; pointer-events: none} /*버튼 비 활성화*/

/** 보기검색 버튼 **/ 
p.view_btn button{display: block; width: 100%; height: 100%; color:#fff; background: none; border-radius: 3px; font-size: 14px; font-weight:500; text-align: center; box-sizing: border-box}
/*보기,검색*/
p.btn_view button{width: 60px; background:#fd715a} 
p.btn_view button:hover{background-color: #d7553f}
/*보기,검색2*/
p.btn_view2 button{width: 60px; background:#5a5a5a} 
p.btn_view2 button:hover{background-color: #2078a5}

/** 교육장 예약신청 **/
/*월간 표시*/
.month_view{position: relative; margin:35px 0 30px; font-weight: 600}
.month_view .date {font-size: 26px; font-weight: 700; text-align: center}
.month_view .date span{display: inline-block; margin-left: 3px}
.month_view .date_btn li{position: absolute; top:-4px}
.month_view li.btn_dtprev{left:50%; margin-left: -135px}
.month_view li.btn_dtnext{right:50%; margin-right: -135px}
.month_view .date_btn button{width: 40px; height: 26px; background-color: #fff; background-position: center; background-repeat: no-repeat; border-radius: 5px; border:1px solid #d6d6d6; font-size: 0; text-indent: -9999px}
.month_view .date_btn button:hover{background-color:#e2e2e2}
.month_view .date_btn button.darr_prev{background-image:url(../../images/app/btn_date_leftarr.png)}
.month_view .date_btn button.darr_next{background-image:url(../../images/app/btn_date_rightarr.png)}
/*예약표시 예시리스트*/
.reserv_exlst{align-content: center}
.reserv_exlst ul{display: flex; gap:20px; margin-left:10px}
.reserv_exlst ul li span{position: relative; display: block; padding-left: 25px; font-size: 15px}
.reserv_exlst ul li span::after{display: block; clear:both; content: ''; position: absolute; top:1px; left:0; width:16px; height: 16px; border-radius:50%}
.reserv_exlst ul li.titem1 span::after{background:#26afad}
.reserv_exlst ul li.titem2 span::after{background:#1183da}
.reserv_exlst ul li.titem3 span::after{background:#656565}
.reserv_exlst ul li.titem4 span::after{background:#ff5d42}
.reserv_exlst ul li.titem5 span::after{background:#a9a9a9}
/** 신청달력 */
.calendar_wrap {width: 100%;display: flex;flex-direction: column; border: 1px solid #dadada; border-right: none; border-bottom:none; overflow: hidden}
.calendar_wrap.cal_scroll .calendar_bx{min-width: 765px}
/* 상단 요일 헤더 */
.calendar_wrap .cal_header, .calendar_wrap .week_data {display: grid; grid-template-columns: 60px repeat(5, 1fr)}
.calendar_wrap .cal_header {background:#617383; font-weight: bold; color:#fff}
.calendar_wrap .cal_header li {padding: 12px 5px; border-right: 1px solid #dadada; font-size: 15px; font-weight: 600; text-align: center}
.calendar_wrap .cal_header li.sunday{color:#ef3636}
.calendar_wrap .cal_header li.saturday{color:#007cb2}
/* 오전/오후 라벨 */
.calendar_wrap .time_label {display: flex; flex-direction: column; border-right: 1px solid #dadada; font-weight:500}
.calendar_wrap .time_label > div {position: relative; display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box}
.calendar_wrap .time_label .am{position:relative; color:#fd715a}  
.calendar_wrap .time_label .pm{color:#3c8ee1}  
.calendar_wrap .time_label .day_num{border-bottom: 1px dashed #dadada; text-align: center; color:#868686; padding:0}
/* 각 날짜 셀 */
.calendar_wrap .day_cell {position: relative; border-right: 1px solid #dadada; border-bottom: 1px solid #dadada}
.calendar_wrap .day_num {height:32px; line-height:32px; padding:0 12px; font-size: 14px; font-weight:400; color: #444}
.calendar_wrap .time_bx {overflow: hidden;  padding:5px; margin: 0; box-sizing: border-box}
.calendar_wrap .am {padding: 5px; border-bottom: 1px dashed #e2e2e2;/* 오전/오후 구분선 */}
.calendar_wrap .day_cell.today .day_num {background:#fff0c4; text-align:center; width:32px; padding:0; font-weight:600}

/* 예약 블록 */
.calendar_wrap .time_link {display: flex; flex-wrap:wrap; gap:3px}
.calendar_wrap .time_link a {display: flex; flex-wrap:wrap; gap:3px; height:100%}
.calendar_wrap .time_link .time_item {overflow:hidden; width:100%; display: flex; justify-content: space-between; border-radius: 3px; background:#555; color: #fff; font-size: 14px; transition: all .3s}
.calendar_wrap .time_link .time_item.time_item1 {background: #26afad; pointer-events:none; color:#fff} /* 예정 */
.calendar_wrap .time_link .time_item.time_item2 {background: #1183da; pointer-events:none; color:#fff} /* 신청 */
.calendar_wrap .time_link .time_item.time_item3 {background: #656565; pointer-events:none; color:#cecece} /* 마감 */
.calendar_wrap .time_link .time_item.time_item4 {background: #ff5d42; pointer-events:none; color:#fff} /* 신청완료 */
.calendar_wrap .time_link .time_item.time_item5 {background: #b7b7b7; pointer-events:none; color:#000} /* 신청불가 */
.calendar_wrap .time_link .time_item.time_item5 .ti_txt {color:#fff}
.calendar_wrap .time_link .time_item.time_item1:hover {background: #7236a6}
.calendar_wrap .time_link .time_item.time_item2:hover {background: #0488ad}
.calendar_wrap .time_link .time_item.time_item3:hover {background: #464646}
.calendar_wrap .time_link .time_item.time_item4:hover {background: #12258d}
.calendar_wrap .time_link .time_item.time_item5:hover {background: #c93017}
.calendar_wrap .time_link .time_item .ti_tit {padding:6px 5px 6px 10px; max-width:130px; overflow: hidden; display:block; white-space: nowrap; text-overflow: ellipsis}
.calendar_wrap .time_link .time_item .ti_txt {display:flex; justify-content: center; align-items: center; min-width:52px; text-align: center; background:rgba(0,0,0,0.3); flex-shrink:0; letter-spacing:-1px}
.calendar_wrap .time_link .time_item.time_admin {display:flex; justify-content:flex-end; background:none; color:#000; font-size:15px; padding:5px 0 5px 5px; font-weight:600}
/*.calendar_wrap .time_link .time_item.time_admin .ti_go {width:48px; height:20px; line-height:20px; background:#a8a8a8 url(../../images/app/btn_arr_go.png) no-repeat right 5px top 5px; border-radius:5px; color:#fff; padding-left:5px; box-sizing: border-box; transition:.3s; font-weight:400}*/
/*.calendar_wrap .time_link a:hover .time_item.time_admin .ti_go {background-color:#fd715a}*/

/* 시각적으로 구분이 잘 되도록 hover 효과 */
.calendar_wrap .cell:hover {background: #f9f9f9}
/* 부드러운 높이 조정 */
.calendar_wrap .time_bx {transition: height 0.2s ease}
/*휴일표기*/
.calendar_wrap .holiday {position: relative}
.calendar_wrap .holiday .day_num{color:#ef3636}
.calendar_wrap .holiday .event_item{padding-top: 5px; border-top: 1px solid #dadada; color:#ef3636}
.holiday_bx {position:absolute; top:37px; left:10px; display:flex; align-items: center; justify-content: center; height:calc(100% - 47px); width:calc(100% - 20px); background: #fdf1f1; border-radius:5px; font-size:14px; color:#f85353; font-weight:500; text-align: center; padding:5px 15px; box-sizing: border-box; word-break: keep-all}

.calendar_wrap .holiday2 .day_num{color:#267dd5}
.holiday2 .holiday_bx {background:#e2f2ff; color:#267dd5}

/*지난달,다음달 날짜 표기*/
/*.calendar_wrap .blur.holiday{background:#fffaff}*/
.calendar_wrap .blur.holiday .day_num{color:#ffafaf}
.calendar_wrap .blur.holiday::after{color:#ffafaf}
.calendar_wrap .blur .day_num{color:#b6b6b6}
.calendar_wrap .blur .time_bx{opacity: 0.4}
.calendar_wrap .blur .time_bx a{pointer-events:none}

/* 프로그램 목록 */
.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:70px; background:#5a5a5a; border-radius:3px; color:#fff}
.pro_lstbox .top_right .srchform .btn_view {width:70px; background:#5a5a5a; border-radius:3px; color:#fff}
.input_box {display: flex; gap:5px}
.sel_box {display: flex; gap:5px}
.pro_lstbox .top_right .input_base {width:calc(100% - 77px)}
.pro_lstbox .top_right button {flex-shrink:0}
.input_area {display: flex; align-items: center; gap:5px}

.date_box {flex:1; display: flex; align-items: center; gap:5px; position: relative; width:100%}
.date_box input[type="date"] {color: transparent; appearance: none; -webkit-appearance: none; text-indent: -9999px;   caret-color: #8a8681}
.date_box input[type="date"].has-value {color:#8a8681; text-indent:inherit}
.date_box label.placeholder {position: absolute; left:5px ;top: 50%;transform: translateY(-50%) ;color:#8a8681; pointer-events: none;transition: 0.2s ease}
.date_box .input_date.has-value + .placeholder {opacity: 0}
input[type="date"].has-value {color:#8a8681}
input[type="date"]:not(:placeholder-shown) {color:#8a8681}

/* 프로그램 목록-테이블영역 */
.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:#2492d4; 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}

/* 프로그램 폼 영역 */
.pform_wrap {border-top:1px solid #314354; border-bottom:1px solid #314354; margin-top:10px; margin-bottom:30px}
.essent_txt {display: flex; justify-content: flex-end; margin-top:-25px}
.pform_box {display:flex; border-top:1px solid #d8d8d8}
.pform_box:first-child {border-top:0}
.pform_box .pform_tit {display:flex; justify-content: center; align-items: center; width:196px; padding:10px 15px; box-sizing: border-box; font-weight:600; color:#000; background:#f0f0f0; flex-shrink:0; text-align: center; font-size:1.231em}
.pform_box .pform_txt {display:flex; align-items:center; width:calc(100% - 196px);  min-height:56px; gap:5px; padding:10px 15px; flex-wrap:wrap; box-sizing: border-box; font-size:1.154em; font-weight:400; color:#3b3b3b; word-break:keep-all}
.pform_etcbox {display: block; width:100%; box-sizing: border-box; font-size:1em; padding:5px 0}
.pform_etcbox ul li {position:relative; line-height:130%; padding-left:12px; margin-top:5px; color:#555}
.pform_etcbox ul li:first-child {margin-top:0}
.pform_etcbox ul li:after {content:"-"; display: block; position: absolute; top:-1px; left:0; width:10px; height:100%; font-weight:700}
.ibox_area {display:flex; gap:5px; align-items:center; padding:5px 0; position:relative}
.ibox_form {position: relative}
.ibox_form .ibox_ftit {position: absolute; top:50%; left:0; height:24px; line-height:24px; width:60px; margin-top:-12px; border-right:1px solid #d6d6d6; text-align: center; font-weight:600; color:#919191; font-size:0.935em}
.ibox_form input {padding-left:65px !important}
.ibox_form2 .ibox_ftit  {width:80px}
.ibox_form2 input {padding-left:85px !important}
/* 프로그램 폼-테이블영역 */
.pform_table  {width:100%; clear:both; padding:0; margin:10px 0; font-weight:400}
.pform_table table {width:100%}
.pform_table table thead th {background:#eeeaff; color:#000; padding:8px 6px ; border:1px solid #d8d8d8; vertical-align:middle; line-height:110%; font-weight:500}
.pform_table table tbody th {padding:5px 6px; color:#2a2a2a; border:1px solid #d7d7d7; vertical-align:middle; line-height:130%; text-align: center; font-size:14px}
.pform_table table tbody td {padding:6px 8px; color:#2a2a2a; border:1px solid #d7d7d7; vertical-align:middle; line-height:130%; text-align: center; font-size:14px; word-break:keep-all}
.pform_table table tbody td .mtit {display:none}
.pform_table td.txtleft {text-align: left}
.pform_table .sel_base {height:28px}
.pform_table .input_base {height:28px}
.alink {font-weight:700; transition:.3s}
.alink:hover {text-decoration: underline; transition:.3s}

.pform_essent span {position:relative; padding:4px 8px 0 0}
.pform_essent span:after {content:"*"; display: block; position: absolute; top:0; right:0; width:5px; height:5px; color:#f00}
.pform_box.pform_bold .pform_tit {background:#2751a8; color:#fff}
.pform_box.pform_bold .pform_txt {background:#f0f3f9}

.ibox_radio {margin-right:15px}
.pform_txt button {min-width:70px; height:36px; box-sizing: border-box; border-radius:3px; font-size:15px; color:#fff}
.pform_txt button span {padding-left:20px}
button.btn_schsrch {background:#314354}

/* 폼 영역 버튼  */
.pform_btnbox {margin:5px 0}
.pform_btnbox a {position:relative; overflow: hidden; display:flex; min-width:200px; padding:0 45px 0 0; border-radius:5px; color:#fff; transition:.3s}
.pform_btnbox a:before {content:url(../../images/app/btn_pform_ico.png); display: block; position:absolute; top:0; right:0; width:45px; height:100%; padding:11px 0; background:rgba(0,0,0,0.2); text-align: center; align-content:center; box-sizing: border-box}
.pform_btnbox a .pform_btntit {display:block; padding:9px 0 8px 34px}
.pform_btnbox.btn_buscheck a {background:#149cb9}
.pform_btnbox.btn_buscheck a:hover {background:#05829d}
.pform_btnbox.btn_buscheck a .pform_btntit  {background:url(../../images/app/blt_pform_bus.png) no-repeat 7px 50%}
.pform_btnbox.btn_filedw a {background:#8e77e3}
.pform_btnbox.btn_filedw a:hover {background:#6a51c5}
.pform_btnbox.btn_filedw  a .pform_btntit  {background:url(../../images/app/blt_pform_file.png) no-repeat 8px 50%}

/* 동의체크 박스 */
.pform_chkbox {margin-top:5px; font-size:1.154em}
.pform_txtarea {overflow-y:auto; max-height:200px; border:1px solid #b7b7b7; padding:20px 30px; line-height:150%; box-sizing: border-box}
.pform_check {padding:15px 0}

/* 주말 등 프로그램 */
.brline {display: block; line-height:14px}
.pro_tbwrap table tbody td .actdays {display:block; margin-bottom:3px}
.pro_tbwrap table tbody td .actyoil {padding-top:3px; border-top:1px dashed #ccc}

/* 프로그램 진행상태 */
.pstate {display:inline-block; margin:0 auto; min-width:38px; text-align: center; padding:1px 10px; box-sizing:  border-box; background:#eee; border-radius:3px; font-weight:400; font-size:14px; color:#fff}
.pstate1 {background:#83af50}
.pstate2 {background:#fe5a5a}
/*.pstate3 {background:#83af50}*/
.pstate3 {background:#6d6d6d}

/* 프로그램 목록 버튼 */
.btn_app {display:inline-block; min-width:72px; line-height:130%; border-radius:3px; background:#fff; font-size:14px}
.btn_app button {display:block; width:100%; padding:4px 5px; background: none; color:#fff; box-sizing: border-box; cursor:auto}
.btn_app1 {border:1px solid #ccc; color:#5a5a5a} /* 예정 */
.btn_app1 button {color:#5a5a5a}
.btn_app2 {background:#ff6156; transition:.3s} /* 신청하기 */
.btn_app2:hover {background:#c72f25}
.btn_app2 button {cursor:pointer}
/*.btn_app3 {background:#113683}  */
/*.btn_app4 {background:#7cbc44; transition:.3s}  */
/*.btn_app4:hover {background:#548925}*/
/*.btn_app4 button {cursor:pointer}*/
/*.btn_app5 {background:#1bb1ac} */
/*.btn_app6 {background:#919191}  */

.btn_app3 {background:#7cbc44; transition:.3s} /* 대기신청 */
.btn_app3:hover {background:#548925}
.btn_app3 button {cursor:pointer}
.btn_app4 {background:#a6281e} /* 신청완료*/
.btn_app5 {background:#1bb1ac} /* 대기완료 */
.btn_app6 {background:#919191} /* 마감 */
.btn_app7 {background:#4a4a4a} /* 신청불가 */
.btn_app8 {border:1px solid #ccc; color:#5a5a5a}  /* 학년제한 등 */
.btn_app8 button {color:#5a5a5a}

/* 상세보기 */
.pform_vwrap {border-top:1px solid #314354; margin-top:10px; margin-bottom:30px}
.pform_vbox {display:flex; border-bottom:1px solid #d8d8d8; padding:7px 0}
.pform_vbox .pform_vtit {display:flex; justify-content: center; align-items: center; width:200px; padding:10px 15px; box-sizing: border-box; font-weight:600; color:#000; background:#f0f0f0; flex-shrink:0; text-align: center; font-size:1.231em; border-radius:5px}
.pform_vbox .pform_vtxt {display:flex; align-items:center; width:calc(100% - 196px);  min-height:50px; gap:5px; padding:10px 15px; flex-wrap:wrap; box-sizing: border-box; font-size:1.154em; font-weight:400; color:#3b3b3b}
.pform_vbox.pform_vbold .pform_vtit {background:#2751a8; color:#fff}
.pform_vbox .pform_vtxt .actdays {display:flex; align-items:center; width:100%; margin-bottom:3px}
.pform_vbox .pform_vtxt .actyoil {display:block; width:100%; border-top:1px dashed #ccc; padding-top:4px}

/* 다운로드 버튼 */
.btn_download {margin:5px 0}
.btn_download a {position:relative; overflow: hidden; display:flex; min-width:80px; padding:10px 45px 9px 13px; border-radius:5px; color:#fff; transition:.3s; background:#6f4def}
.btn_download a:before {content:url(../../images/app/btn_pform_ico.png); display: block; position:absolute; top:0; right:0; width:45px; height:100%; padding:11px 0; background:rgba(0,0,0,0.2); text-align: center; align-content:center; box-sizing: border-box}
.btn_download:hover a {background:#593ebf}

/* 개인정보 수집 이용 동의 */
.pf_agreebox {padding:15px; height:220px; overflow-y: auto; box-sizing: border-box; border:1px solid #d8d8d8; border-top:0; box-sizing: border-box}
.pf_agreebox dl {margin-bottom:10px}
.pf_agreebox dl dt {font-weight:600; margin:5px 0; font-size:1.071em}
.pf_agreebox dl dd {padding:5px 10px}
.pf_atit {display:block; background:#dfe7f5; padding:10px; text-align:center; font-size:1.071em; border:1px solid #d8d8d8; font-weight:600}
.pf_agreebox ul li {line-height:140%}
.pf_agreebox .pf_agrcon {display: block; width:100%; margin:5px 0; padding:5px 10px; background:#eee; border-radius:0; box-sizing: border-box}
.pform_appoint {text-align: center}
.pf_aptxt {font-size:1.133em}
.pf_aptxt2 {padding:30px 0 0}
.pf_apdate {font-size:1.071em; color:#737373; font-weight:400}
.pf_principal {padding-top:25px; font-size:1.467em; font-weight:600; color:#000}

/* 표 프로그램 상세보기  */
.proapp_view {position:relative}
table tbody td a.btn_proapp_open {display:flex; justify-content: space-between; padding:3px 10px; background:#2eabd1; border-radius:5px; text-align:left; width:100%; box-sizing: border-box; margin-top:5px; color:#fff; transition:.3s}
.pro_tbwrap table tbody td a.btn_proapp_open span {position: relative; display: block; width:100%}
.pro_tbwrap table tbody td a.btn_proapp_open span:after {content:""; display: block; position: absolute; top:50%; right:0; width:9px; height:9px; margin-top:-5px; background:url(../../images/app/btn_detailview_plus.png) no-repeat 50% 50%}
.proapp_new { display: none; position: absolute; top: 50%; left:135px; margin-top:-106px; width:300px; min-height:200px; background: #fff; border:3px solid #2eabd1; box-shadow: 0 3px 10px rgba(0,0,0,0.2); z-index: 50; box-sizing: border-box; border-radius:12px; opacity: 0; transform: translateY(10px); transition: all .25s ease; text-align: left}
.proapp_new .proapp_newtit {background:#2eabd1; padding:12px; font-weight:700; color:#fff; font-size:16px; text-shadow:0 1px 4px rgba(0,0,0,0.3); border-radius:7px 7px 0 0}
.proapp_new.on { display: block; opacity: 1; transform: translateY(0)}
.proapp_newclose {position:absolute; top:4px; right:4px}
.proapp_newclose button {display:block; width:32px; height:32px;background: url(../../images/app/btn_newclose.png) no-repeat 50% 50%;  box-sizing: border-box; cursor: pointer; font-size:0}
.btn_proapp_open:hover {background:#0c84a9}
.proapp_newlst {padding:10px}
.proapp_newlst ul {overflow-y:auto; height:148px}
.proapp_newlst ul li {display: flex; justify-content: space-between; align-items:center; border-top:1px solid #d4d4d4; padding:4px 0}
.proapp_newlst ul li:first-child {border-top:0}
.pa_name {margin-left:5px}
.pa_class {min-width:46px; padding:5px 3px; text-align:center; background:#eee; flex-shrink:0; box-sizing: border-box; border-radius: 3px}
.col_gray {color:#7a7a7a}
.btn_partimem span {display:inline-block; padding:30px 0 5px; background:url(../../images/super/btn_partimem.png) no-repeat 50% 0}
.btn_partimem:hover span {text-decoration: underline}

/* 신청확인 - 버튼 및 상태 표시 */
.astate1 {color:#57ac24}
.astate2 {color:#0e8ad0}
.astate3 {color:#4d4d4d}

.btn_dwlink a {display: block; width:32px; height:32px; margin:0 auto; background:#0e85cd url(../../images/app/btn_dwico.png) no-repeat 50% 50%; border-radius:50%; text-align: center; font-size:0; transition:.3s}
.btn_dwlink a:hover {background-color:#005a91}
.btn_dwlink2 a {background-color:#b76ef5}
.btn_dwlink2 a:hover {background-color:#843cc1}
.btn_appcancel button {display:block; ; min-width:75px; min-height:25px; font-size:1em; font-weight:600; color:#fff; transition:.3s; border-radius:3px; background:#ff8f4c; transition:.3s}
.btn_appcancel button:hover {background-color:#db590b}

/* 상세 조건검색 */
.detail_topwrap {overflow: hidden;padding:10px; border:1px solid #d7d7d7; border-radius:5px; font-size:1.077em; margin:20px 0}
.detail_topwrap .detail_boxwrap {display: flex; gap:5px}
.detail_topwrap .detail_tit {display: none}
div.detail_topwrap button {color:#fff; border-radius:3px; text-align: center}
button.btn_search {min-width:60px; background:#32587c}
button.btn_reset {min-width:80px; background:#565656}

.detail_datewrap {display:flex; align-items:center; gap:5px; width:100%}
.detail_datewrap span.col_bk {flex-shrink: 0}
.detail_datewrap .date_box input[type="date"] {color: transparent; appearance: none; -webkit-appearance: none; text-indent: -9999px;   caret-color: #8a8681}
.detail_datewrap .date_box input[type="date"].has-value {color:#8a8681; text-indent:inherit}
.detail_datewrap .date_box label.placeholder {position: absolute; left:5px ;top: 50%;transform: translateY(-50%) ;color:#8a8681; pointer-events: none;transition: 0.2s ease}
.detail_datewrap .date_box .input_date.has-value + .placeholder {opacity: 0}
.detail_topwrap .sel_box {width:100%}


/* ======================================= MOBILE LAYOUT ======================================= */
@media only screen and (max-width:1024px) {
/** select공통사항 지정영역 **/
select.sel_base{height:30px; font-size: 13px}
.input_base.date_cal{min-height: 30px}

/** input 공통사항 지정영역 **/ 
input::placeholder, textarea::placeholder {font-size: 13px}
.input_base{ width: 100%; flex:1; min-height:30px}
.input_area {width:100%}
.input_area input {min-height:30px}

/** 파일첨부 추가 스타일 (개별업로드) **/
.file_upload{padding-right: 95px} 
.file_upload .newfileup{width: 90px}

/*보기검색*/
.view_half{display: block; margin:5px 0} 
.view_half .view_topwrap.long_type {min-width:auto}
.view_half .view_topwrap {min-width:100%; margin:10px 0 0}

/*상세보기타입*/
.regist_viewbx{margin-bottom: 25px}
.regist_viewbx > ul > li dl{display: block; flex: 1; gap:25px}
.regist_viewbx > ul > li dl dt{padding:10px; font-size: 14px}
.regist_viewbx > ul > li dl dd{padding:10px 10px 0; font-size: 14px}
.regist_viewbx > ul > li dl dd ul{padding:0}

/** 교육장 예약신청 **/
/*월간 표시*/
.month_view{ margin:15px 0 20px}
.month_view .date{font-size:22px}

/*예약표시 예시리스트*/ 
.reserv_exlst ul{display: flex; gap:10px; justify-content: center}

/*  달력 */
.month_view li {top:-3px}    
.month_view li.btn_dtprev {margin-left:-120px}
.month_view li.btn_dtnext {margin-right:-120px}

.reserv_exlst ul li span {font-size:13px; padding-left:18px}
.reserv_exlst ul li span::after {width:12px; height:12px; top:3px}
.calendar_wrap .day_num {font-size:13px}
.calendar_wrap .cal_header, .calendar_wrap .week_data {grid-template-columns:40px repeat(5, 1fr)}
.calendar_wrap .time_link .time_item {font-size:13px}
.calendar_wrap .time_link .time_item .ti_tit {padding:3px 4px 3px 8px; line-height:130%; white-space: inherit}
.calendar_wrap .time_link .time_item .ti_txt {width:38px}
.calendar_wrap .time_link .time_item .ti_tit {flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding:3px 4px 3px 8px; line-height:130%; white-space: inherit; height: 20px; line-height: 20px; display: block}
.holiday_bx {font-size:13px}
.calendar_wrap .time_link .time_item.time_admin {font-size:13px; padding:3px 0}

/* 폼 버튼 영역 */
.pro_bott {margin:15px 0; flex-wrap:wrap; gap:5px}
.pro_bott > p {width:calc(100% / 2 - 4px)}
.pro_bott > p button {width:100%; min-height:32px; font-size:1.077em; min-width:inherit}

.pform_wrap {margin-bottom:20px}
.pform_box {display:block}
.pform_box .pform_tit {padding:2px 10px; width:100%; line-height:26px; font-size:1.077em}
.pform_box .pform_txt {width:100%; min-height:30px; padding:10px 0; font-size:1.077em}
.inputbox {flex-wrap:wrap}
.ibox_area {width:100%; padding:0}
.ibox_radio {flex-wrap: wrap}
.pform_etcbox {padding:2px 0}
.pform_btnbox {width:100%}
/* 동의체크 박스 */
.pform_chkbox {font-size:1.077em}
.pform_txtarea {padding:10px}

/* 프로그램 폼-테이블영역 */
.pform_table {margin:5px 0; font-size:1em; border-top:1px solid #806fca}
.pform_table table thead {display:none}
.pform_table table tbody tr {display:flex; flex-wrap:wrap; align-items:center;box-sizing: border-box; width:100%}
.pform_table table tbody td {position:relative; display:block; width:100%; line-height:120%; padding:5px 6px; border-top:0; text-align:left; padding-left:85px; min-height:16px}
.pform_table table tbody td .mtit {display:block; position:absolute; top:0; left:0; width:78px; height:100%; line-height:110%; padding:6px 5px; background:#eeeaff; font-size:13px; text-align: center; box-sizing: border-box; align-content: space-around}
.pform_table table tbody tr td:first-child {background:#f3f2f6}
.pform_table table tbody tr td:first-child .mtit  {background:#d9d2f6}
.pform_table table tbody td.mline {min-height:30px; align-content: space-around}
    
 /* 프로그램 목록 */
.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}
.pro_toptime {margin:10px auto}

/* 프로그램 목록-테이블영역 */
.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:#2492d4; 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:#1d75aa}
.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}

.pstate {font-size:13px}
.btn_app {min-width:48px; text-align: center; font-size:13px}
.btn_app button {padding:2px 10px}

/* 상세보기 */
.pform_vwrap {margin-bottom:20px}
.pform_vbox {display:block}
.pform_vbox .pform_vtit {padding:2px 10px; width:100%; line-height:26px; font-size:1.077em}
.pform_vbox .pform_vtxt {width:100%; min-height:30px; padding:10px 0; font-size:1.077em}
.btn_download a {min-width:60px; padding:5px 40px 4px 10px}
.btn_download a:before {padding:7px 0; width:38px}

/* 신청확인 */
.pro_wrap .pro_tbwrap.pro_tb02 {border-color:#5b5b5b}
.pro_wrap .pro_tbwrap.pro_tb02 table tbody td .mtit {background:#888888}
.pro_wrap .pro_tbwrap.pro_tb02 table tbody tr td:first-child .mtit {background:#5b5b5b}

.proapp_new {left:50%; margin-left:-192px}
.proapp_newclose {top:2px; right:2px}
.btn_dwlink a {text-align: left; margin:0}
.btn_appcancel button {min-height:22px}

.detail_topwrap .detail_boxwrap {flex-wrap:wrap}
.detail_datewrap {width:100%}
.detail_datewrap .input_date {min-height:30px}
    
}
 



/* ======================================= PC LAYOUT ======================================= */
@media only screen and (min-width:1025px) {
/********************** COMMON **********************/
.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:798px) {
/** 교육장 예약신청 **/
/* 신청달력 */
.calendar_wrap.cal_scroll{overflow-x:scroll}  
.calendar_wrap.cal_scroll::-webkit-scrollbar {height: 10px}
.calendar_wrap.cal_scroll::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0.05); border-radius:0 0 5px 5px; box-shadow: inset 0px 0px 0px white}
.calendar_wrap.cal_scroll::-webkit-scrollbar-thumb {background-color: #a7a7a7; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent}
/*스크롤상단문구*/
.scroll_txt{display: block; padding:3px 5px !important; margin: 15px 0 5px !important; border-radius: 5px; background:#eaeaea !important; text-align: center; color:#000; font-size: 13px}
}

@media only screen and (max-width:700px) {
/*조건검색-모바일에서는 기본으로 닫아져 있음*/
/* 상세검색 영역 */
.detail_topwrap {margin:10px 0; padding:0}
.detail_topwrap .detail_tit {position:relative; display: block; cursor: pointer; font-weight:600;  padding:10px 10px 10px 30px; background:url(../../images/app/blt_detailtit.png) no-repeat 12px 50%}
.detail_topwrap .detail_tit.on {background-color:#eee}
.detail_topwrap .detail_tit:before {content:""; display:block; position: absolute; top:15px; right:15px; width:9px; height:6px; background:url(../../images/app/bg_selarr.png) no-repeat 0 0; transition:.3s}
.detail_topwrap .detail_tit.on:before {transform: rotate(180deg)}
.detail_topwrap .detail_boxwrap {display:none; padding:10px; gap:5px}
.detail_datewrap {margin-bottom:5px}
.detail_topwrap .sel_box {margin-bottom:5px}
}