@charset "utf-8";

ul, li {list-style:none outside;}
A {text-decoration:none;}

/* date */
#date_layer {text-align:left;}

/* 20240326 style ΌφΑ€ */

/* #date_layer #box {width:120px;}
#date_layer #box .top {width:20px; float:left;}
#date_layer #box .day {width:80px; float:left;}

#date_layer .w {font-weight:bold; line-height:20px; color:white; font-size:16px; }
#date_layer .title {color:white; font-size:12px;  padding:0 0 0 0; background:url(./img/bg_01.gif) repeat-x;}
#date_layer .title1 {color:white; font-size:12px;  padding:0 0 0 0; background:url(./img/bg_01.gif) repeat-x;}
#date_layer .title2 {color:white; font-size:12px;  padding:0 0 0 0; background:url(./img/bg_01.gif) repeat-x;}

#date_layer .sun1 {color:red; font-size:12px; float:left;}
#date_layer .sat1 {color:#82D4FF; font-size:12px; float:left;}
#date_layer .day1 {color:white; font-size:12px; float:left;}

#date_layer .sun2 {font-weight:bold; line-height:20px; color:white; font-size:12px; float:left;}
#date_layer .sat2 {font-weight:bold; line-height:20px; color:#82D4FF; font-size:12px; float:left;}
#date_layer .day2 {font-weight:bold; line-height:20px; color:#FF9933; font-size:12px; float:left;} */

#date_layer .dot {color:#000000;}

#date_layer .check {color:#126420; font-size:11px; }
#date_layer .check2 {color:#999999; font-size:11px; }

#date_layer .sun1 {color:#e00032;}
#date_layer .sat1 {color:#515bc1;}
#date_layer .day1 {color:#000;}

#date_layer .sun2 {font-weight:500; color:#fff; background: #e51c23;}
#date_layer .sat2 {font-weight:500; color:#fff; background: #4a52b3;}
#date_layer .day2 {font-weight:500; color:#fff; background: #6170e4;}

#date_layer .sun3 {color:#ffbebe; background: #3D3F4B;}
#date_layer .sat3 {color:#b8b8ff; background: #3D3F4B;}
#date_layer .day3 {color:#999999; background: #3D3F4B;}

#date_layer .day4 {color:#fff; background: #3D3F4B;}

/* list */
/* #list_layer .input {width:600px; height:22px; background-color:#f3f3f3; border:0px; padding:5px 2px 2px 2px; font-weight:bold; color:#333333;  font-size:12px;}

#list_layer .msg {padding:6px 0 0 3px; float:left;}
#list_layer .sub {padding:5px 0 0 3px; float:left;}
#list_layer .submit {padding:3px 0 0 5px; float:left;}

#list_layer #info li {line-height:18px; color:white;  font-size:11px;}

#list_layer .title {font-weight:bold; color:white;  font-size:12px;}
#list_layer .list {line-height:20px; color:white;  font-size:11px;}

#list_layer .no {line-height:25px; font-size:12px; color:white;}

#list_layer .bgcolor0 {background-color:#ffffff;}
#list_layer .bgcolor1 {background-color:#f1f1f1;}
#list_layer .bgcolor2 {background-color:#ffffff;} */

/* 20240326 style Γί°‘ */
.attendance_wrap { padding:15px; border:1px solid #ddd; border-radius:10px; background:#fff; }
.attendance_wrap > * { line-height:1;}
.attendance_wrap button { outline:none; border:0; background:transparent;}
.attendance_wrap .btn_stl01 { position:absolute; right:0; top:50%; transform:translateY(-50%); padding:0 20px; height:32px; border-radius:6px; background-color:#4D5360; font-size:13px; color:#fff;}
.attendance_wrap .btn_stl02 { display:flex; justify-content:center; align-items:center; gap:0 4px; height:36px; border-radius: 6px; border: 1px solid transparent; background-color:#f4f6fa; font-size:13px; color:#000; font-weight:300;}
.attendance_wrap .btn_stl02.color01 { width:120px; border:1px solid #85b943; }
.attendance_wrap .btn_stl02.color02 { width:164px; border:1px solid #fec230; }

.attendance_wrap .attendance_tit { padding:45px 0 55px; text-align:center;}
.attendance_wrap .attendance_tit h2 { display:inline-flex; align-items:center; gap:0 12px; font-size:28px; color:#000; font-weight:600;}
.attendance_wrap .attendance_tit h2 span { color:#515bc1;}
.attendance_wrap .calendar_top_box { display:flex; align-items:center; justify-content:center; gap:0 24px; position:relative; margin-bottom:18px;}
.attendance_wrap .calendar_top_box .day { font-size:22px; font-family:'EsaManru' !important; color:#000; font-weight:500;}
.attendance_wrap .calendar_notice { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:20px; border-radius: 8px; background: #f3f4fe;}
.attendance_wrap .calendar_notice .left_txt { display:flex; align-items:center; gap:0 8px;}
.attendance_wrap .calendar_notice .left_txt span { color:#fff; font-size:12px; padding: 4px 6px; border-radius:4px; background:#6170e4;}
.attendance_wrap .calendar_notice .left_txt p { font-size:14px; color:#000; font-weight:500; margin-bottom: 0px; }
@media (max-width:576px) { .attendance_wrap .calendar_notice .left_txt p { font-size:13px; } }
.attendance_wrap .calendar_notice .right_txt { display:flex; align-items:center; gap:0 8px;}
.attendance_wrap .calendar_notice .right_txt span { color:#fff; font-size:12px; padding: 4px 6px; border-radius:4px; background:#e51c23; }
.attendance_wrap .calendar_notice .right_txt p { font-size:14px; color:#000; font-weight:500; margin-bottom: 0px;}
@media (max-width:576px) { .attendance_wrap .calendar_notice .right_txt p { font-size:13px;} }

#date_layer { margin:12px 0 24px;}
.attendance_wrap table.line {border-collapse: initial;}
.attendance_wrap table.line th { height:50px; font-size:13px; color:#fff; font-weight:200; text-align:center; background:#515bc1;}
.attendance_wrap .date_tbl th:first-child { border-radius:8px 0 0 0;}
.attendance_wrap .date_tbl th:last-child { border-radius:0 8px 0 0;}
.attendance_wrap .date_tbl tr:last-child td:first-child { border-radius:0 0 0 8px;}
.attendance_wrap .date_tbl tr:last-child td:last-child { border-radius:0 0 8px 0;}
.attendance_wrap .date_tbl td { overflow:hidden; position:relative; padding:10px; height:80px; font-size:14px; color:#000; font-weight:200; border:1px solid #ebebeb;}
.attendance_wrap .date_tbl td .td_flex { display:flex; align-items:flex-end; justify-content: flex-end; height:100%;}
.attendance_wrap .date_tbl td .td_flex .in_box { position:absolute; left:0; right:0; top:0; bottom:0;}
.attendance_wrap .date_tbl td .td_flex .in_box.day1,
.attendance_wrap .date_tbl td .td_flex .in_box.day2,
.attendance_wrap .date_tbl td .td_flex .in_box.day3,
.attendance_wrap .date_tbl td .td_flex .in_box.day4 { background: #f4f6fa;}
.attendance_wrap .date_tbl td .td_flex .in_box a { display:block; width:100; height:100%; padding:10px;}
.attendance_wrap .date_tbl td .num { position:relative; z-index:2; font-size:13px; font-weight:200; text-align:right;}

.attendance_wrap .board_top_box { display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; margin-bottom:50px;}
.attendance_wrap .board_top_box .time_txt { display:flex; align-items:center; gap:0 16px;}
.attendance_wrap .board_top_box .time_txt span { font-size:14px; color:#515bc1; font-weight:600;}
.attendance_wrap .board_top_box .time_txt p { font-size:14px; color:#000; font-weight:200; margin-bottom: 0px}
.attendance_wrap .board_top_box .btn_box { display:flex; align-items:center; gap:0 8px;}

.attendance_wrap .board_form { margin-bottom:20px;}
.attendance_wrap .board_form .input_wrap { display:flex; align-items:center; gap:0 10px;}
.attendance_wrap .board_form .input_wrap .sub { width:calc(100% - 182px);}
.attendance_wrap .board_form .input_wrap .sub input { outline:none; padding:0 20px; width:100%; height:36px; border-radius: 6px; border: 1px solid #e3e5e8; background: #f4f6fa;}
.attendance_wrap .board_form .input_wrap .sub input::placeholoder { font-size:14px; color:#000 !important; font-weight:500;}
.attendance_wrap .board_form .input_wrap .sub input::placeholder {color:#000;} .attendance_wrap .board_form .input_wrap .sub input::-webkit-input-placeholder {color:#000;} .attendance_wrap .board_form .input_wrap .sub input:-ms-input-placeholder {color:#000;}
.attendance_wrap .board_form .input_wrap .btn_stl03 { display:flex; align-items:center; justify-content:center; width:172px; height:36px; border-radius: 6px; background: #4e59bd; text-align:center;}
.attendance_wrap .board_form .input_wrap .btn_stl03 span {display:inline-block; padding-left:30px; font-size:14px; color:#fff; font-weight:500; background:url(img/btn_img03.png) left center no-repeat; line-height:36px;}
.attendance_wrap .board_form .input_wrap .btn_stl03 .mob { display:none;}

.attendance_wrap .list_tbl { overflow:hidden; border-radius:8px; border:1px solid #e3e5e8;}
.attendance_wrap .list_tbl td {font-size:13px; color:#444; font-weight:300; background:#f4f6fa; border-bottom:1px solid #e3e5e8; line-height:1.5;}
.attendance_wrap .list_tbl td:not(.nodata) {height:40px;}
.attendance_wrap .list_tbl td.nodata { height:320px;}
.attendance_wrap .list_tbl tr:last-child td { border-bottom:0;}
.attendance_wrap .list_tbl .point { color:#515bc1;}

@media (max-width:768px){
	.attendance_wrap .btn_stl01 { padding:0 12px; font-size:12px;}

	.attendance_wrap .attendance_tit { padding:30px 0 40px; text-align:center;}
	.attendance_wrap .attendance_tit img { width:24px;}
	.attendance_wrap .attendance_tit h2 { display:inline-flex; align-items:center; gap:0 10px; font-size:22px; color:#000; font-weight:500;}

	.attendance_wrap .calendar_notice { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; padding:8px 16px; border-radius: 8px; background: #e9ecef;}
	.attendance_wrap .date_tbl { table-layout: fixed;}
	.attendance_wrap .date_tbl td { overflow:hidden; position:relative; padding:2px; height:45px; font-size:10px; color:#000; font-weight:200; border:1px solid #e3e5e8;}
	.attendance_wrap .date_tbl td .td_flex .in_box a { display:block; width:100; height:100%; padding:2px;}
	.attendance_wrap .date_tbl td .num { position:relative; z-index:2; font-size:10px; font-weight:200; text-align:right;}
	
	.attendance_wrap .board_top_box { display: table; margin-left: auto; margin-right: auto; margin-bottom:20px;}
	.attendance_wrap .board_top_box .time_txt { flex-wrap:wrap; gap:8px; margin-bottom: 20px; }
	.attendance_wrap .board_top_box .time_txt span { font-size:12px; color:#4e59bd; font-weight:600;}
	.attendance_wrap .board_top_box .time_txt p { font-size:12px; color:#000; font-weight:200;}
	
	.attendance_wrap .board_form .input_wrap .sub { width:calc(100% - 94px);}
	.attendance_wrap .board_form .input_wrap .sub input { padding:0 10px;}
	.attendance_wrap .board_form .input_wrap .sub input::placeholoder { font-size:12px;}
	.attendance_wrap .board_form .input_wrap .btn_stl03 { width:84px;}
	.attendance_wrap .board_form .input_wrap .btn_stl03 .mob {display:inline-block; padding-left:0; font-size:12px; color:#fff; font-weight:500; background:none; line-height:36px;}
	.attendance_wrap .board_form .input_wrap .btn_stl03 .pc { display:none;}
	
	.attendance_wrap .list_tbl td {font-size:12px; color:#e00032; font-weight:300; background:#f4f6fa; border-bottom:1px solid #e3e5e8; line-height:1.5;}
	.attendance_wrap .list_tbl td.nodata { height:180px;}
}

/* pop_up css */
.pop_up { display:none; position: fixed; left:0; right:0; top:0; bottom:0; z-index:99999;}
.pop_up .pop_inner { display:flex; align-items:center; justify-content:center; padding:16px; position:absolute; left:0; right:0; top:0; bottom:0;}
.pop_up .layer_wrap { position:relative; padding:32px 20px; min-width:342px; max-width:100%; border:3px solid #515bc1; border-radius: 12px; background: #fff; box-shadow: 0px 4px 37.8px 0px rgba(0, 0, 0, 0.30);}
.pop_up .layer_wrap .btn_close { position:absolute; right:-25px; top:-20px;}
.pop_up .layer_wrap .btn_close img { padding:10px; border-radius:50%; border:3px solid #4750af; background:#f3f4fe; }
.pop_up .layer_wrap .layer_tit { text-align:center;}
.pop_up .layer_wrap .layer_tit strong { font-size:20px; font-weight:500; color:#000;}
.pop_up .layer_wrap .layer_tit p { margin-top:16px; font-size:12px; color:#97999E; line-height:1.3;}
.pop_up .layer_con {overflow-y:auto; max-height:60vh;}
.pop_up .layer_con::-webkit-scrollbar { width: 5px;}
.pop_up .layer_con::-webkit-scrollbar-track { background-color: transparent;}
.pop_up .layer_con::-webkit-scrollbar-thumb { border-radius: 3px; background-color: rgba(255,255,255,0.6);}
.pop_up .layer_con::-webkit-scrollbar-button { width: 0; height: 0;}

.pop_up .tab_wrap { margin-top:12px; text-align:center;}
.pop_up .tab_menu { display:inline-flex; align-items:center; padding:3px; border-radius: 55px; background: #f3f4fe;}
.pop_up .tab_menu li { display:flex; align-items:center; justify-content:center; border-radius:55px; width:90px; height:28px;}
.pop_up .tab_menu li a { font-size:12px; color:#97999E;}
.pop_up .tab_menu li.active { background-color:#4750af;}
.pop_up .tab_menu li.active a { color:#fff;}
.pop_up .tbl_wrap { margin-top:18px;}

.tbl_stl01 { border-spacing:0; border-collapse: initial; width:100%;}
.tbl_stl01 thead tr { background:#515bc1;}
.tbl_stl01 tbody tr { background-color:#f3f4fe;}
.tbl_stl01 th { height:36px; font-size:12px; color:#fff; font-weight:200; text-align:center;}
.tbl_stl01 th:first-child { border-radius:8px 0 0 0;}
.tbl_stl01 th:last-child { border-radius:0 8px 0 0;}
.tbl_stl01 tr:last-child td:first-child { border-radius:0 0 0 8px;}
.tbl_stl01 tr:last-child td:last-child { border-radius:0 0 8px 0;}
.tbl_stl01 tr:first-child td { border-top:0;}
.tbl_stl01 td { padding:10px 0; border-top:1px solid #e3e5e8; font-size:12px; color:#000; text-align:center;}
.tbl_stl01 td.top_rank { color:#5C79FB;}

@media (max-width:768px){
.pop_up .pop_inner { display:flex; align-items:center; justify-content:center; padding:24px; position:absolute; left:0; right:0; top:0; bottom:0;}
.pop_up .layer_wrap { position:relative; padding:24px 16px; min-width:342px; max-width:100%; max-height:80vh; border-radius: 12px;}

}