.btnbox .left{float:left;}
 @media screen and (max-width:900px) {

	.btnbox .list_btn{padding:0 20px;}
 }


.datepicker {width:49%; background-color:#f9f9f9}
.date_skip {display:flex; gap:20px; justify-content:center;  align-items:center; border-bottom:2px solid #ccc; font-size:1.3em; font-weight:600; line-height:60px; padding-bottom:10px; box-sizing:border-box;}
.date_skip a.s_t  {display:flex; align-items:center; margin:0 10px}
.date_skip a.s_t i {margin:0 10px}
.date_skip a.s_t span {font-size:16px; font-weight:500; }

.calendar {
    position: relative;
    width: 100%;
 }

 

.calendar th {
    font-size: 18px;
    font-weight: 500;
    line-height: 57px;
	background-color:#fff;
}

.calendar th:first-child {
    color: #ff0000; border-left:2px solid #ccc;
}

.calendar th:last-child {
    color: #017cc9; border-right:2px solid #ccc;
}

.calendar td {
    position: relative;
    border: 2px solid #ccc;
    background-color: white;
	line-height:0
}

.calendar .date button {
    width: 100%;
    height: 66px;
    cursor: unset;
}

.calendar .date[data-state="holiday"] button {
    background-color: white;
}

.calendar .date[data-state="hold"] button {
    background-color: #f1f1f1;
}

.calendar .date[data-state="available"] button {
    background-color: #fffbcf;
    cursor: pointer;
}

.calendar .date.today button:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #e66600;
    box-sizing: border-box;
    content: "";
}

.calendar .date button span {
    position: absolute;
    top: 7px;
    left: 10px;
    color: #848484;
    font-size: 12px;
    line-height: 16px;
}

.calendar .date button em {
    position: absolute;
    bottom: 15px;
    left:0; 
    color: #8c8c8c;
    font-size: 14px;
    font-weight: 500;
	width:100%;
}

.calendar .date[data-state="available"] button em {
    color: #e14a00;
}

.calendar .date[data-state="available"] button:hover, .calendar .date[data-state="available"].active button {
    background: #e66600;
}

.calendar .date[data-state="available"]:hover button span, .calendar .date[data-state="available"].active button span {
    color: white;
}

.calendar .date[data-state="available"]:hover button em, .calendar .date[data-state="available"].active button em {
    color: white;
}

.calendar_list {width:49%; height:450px; margin-left:auto; background-color:#f9f9f9; border-bottom:1px solid #ddd}
.calendar_list h4 {text-align:center; font-size:1.3em; line-height:60px }
.calendar_list .table_wrap {width:100%; height:calc(100% - 60px); overflow-y:auto; background-color:#fff}
.calendar_list table {width:100%;  }
.calendar_list table th {padding:10px; border:1px solid #ddd }
.calendar_list table td {padding:10px; border:1px solid #ddd }

@media all and (max-width:900px) {
		.datepicker {width:100%; }
		.calendar_list {width:100%; margin-top:30px}
		.date_skip a.s_t span {display:none }


}


		.calendar td {width:14%; text-align:left; vertical-align:top}
		.calendar .date button {height:135px; padding-top:40px; display:flex; align-content:flex-start;   flex-wrap:Wrap;   }
 		.calendar .date[data-state="available"] button {background:none}
		.calendar .date[data-state="available"] button:hover, .calendar .date[data-state="available"].active button { background:none}
 		.calendar .date button span {color:#333; font-size:15px; top:10px}
 		.calendar .date:nth-child(1) button span {color:#ff0000;}
 		.calendar .date:nth-child(7) button span {color:#017cc9;}
		.calendar .date[data-state="available"]:hover button span, .calendar .date[data-state="available"].active button span { color: #333;}
		.holidays{color:#ff0000;}
		.date_span {width:100%;  
		display:inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		line-height:1.6; text-align:left;
		border-bottom:1px solid rgba(0,0,0,.2); padding:3px 10px; box-sizing:border-box;  
		font-size:1.05em;

		}
 		.calendar .date button p:last-child {border-bottom:none}

		.calendar .date button .day_no {position:absolute; font-weight:400; top:0; right:0; width:50px; display:block; line-height:30px; background-color:var(--main_c); color:#fff; font-size:14px }
 
@media all and (max-width:900px) {

		.calendar .date button .day_no {position:static;  width:100%; display:none; }
		.calendar .date button .day_no:first-of-type{display:block;}
		.date_span {display:none}
		.calendar .date button {height:60px; padding-top:30px;   }


}

/* 일정관리 팝업 */
.edu03 .popup {
    display: none; 
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.edu03 .popup-content {
    position: relative;
    padding: 40px;
	box-sizing:border-box;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	border:4px solid var(--main_c);
	max-height: 500px;
    overflow: auto;
}

.edu03 .close {
    position: absolute;
    cursor: pointer;
	top: 0;
    right: 10px;
    font-size: 2.5em;
	line-height:1;
}

.edu03 .popup-content li{list-style: square; padding-left:5px; margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid #ccc; box-sizing:border-box;}
.edu03 .popup-content li:last-child{margin-bottom:0;}
.edu03 .popup-content li::marker{ color: var(--main_c);}


 @media screen and (max-width:900px) {
	.edu03 .popup-content{max-width:90%;}
 }


.edu01 .view_title{margin-top:30px; font-size:1.2em; font-weight:600;background:#d1e7e1; padding:10px; box-sizing:border-box; text-align: center;}
.edu01 div.view_content{padding-top:0;}


.business section{margin-bottom:40px;}
.business h4{font-size:1.5em; position: relative; display: inline-flex;  align-items: center; gap: 15px; margin-bottom:15px;}
.business h4::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--main_c, #0d6a51);
	box-shadow: 0 0 0 6px rgba(13, 106, 81, .12);
}
.business h5{font-size:1.2em; margin-bottom:7px; font-weight:600;}
.business table{width:100%;}
.business th{background:#e7e7e7;}
.business th, .business02 td{padding:10px; box-sizing:border-box; border:1px solid #ddd; text-align:center;}	 	
.business .bg_list{background:var(--green-bg); padding:20px 30px; box-sizing:border-box; }
.business .bg_list li{position:relative; padding-left:10px; font-weight:300;}
.business .bg_list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    background: var(--main_c);
}



.business02 .section02 .bg_list{background:#f0f0f0;}
.business02 .section02 .bg_list p{margin-top:10px; font-weight:300;}
.business02 .wrap {
  display: flex;
  gap: 24px;
}

.business02 .wrap dl {
  width: 50%;
  margin: 0;
  overflow: hidden;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #e1e1e1;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.business02 .wrap dt {
  padding: 15px;
  box-sizing:border-box;
  background: #0d6a51;
  color: #fff;
  text-align: center;
  font-size:1.1em;
}

.business02 .wrap dd {
  margin: 0;
  min-height: 260px;
  background: #f5f7f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.business02 .wrap dd img {
  display: block;
  width: 100%;
  height: auto;
}

.business01 .section02 i{background:#f8f8f8; padding:15px; box-sizing:border-box; font-size:2em; display: inline-block; border-radius: 10px; color:var(--main_c)}
.business01 .section02 .wrap{display:flex; gap:10px;}
.business01 .section02 .wrap > div{background:var(--green-bg); padding:40px 20px; box-sizing:border-box; flex:1;  border-radius: 5px; display:flex; align-items:center; gap:20px;}
.business01 .section02 .wrap h6{font-size:1.2em; font-weight: 600;}
.business01 .section02 .wrap p{}

.business01 .section03 .wrap{display:flex; gap:20px;}
.business01 .section03 .wrap div{background:#fff; padding:30px; box-sizing:border-box; flex:1; box-shadow: 2px 2px 8px 0px #0000000f;}
.business01 .section03 .bg_list{background:#fff; padding:0;}
.business01 .section03 .wrap > div {
  position: relative;
  background: #fff;
  padding: 30px 25px;
  box-sizing: border-box;
  flex: 1;
  border-top: 3px solid var(--main_c);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: all .3s ease;
}



.business01 .section03 .wrap > div::before {
  content: "과제 01";
  position: absolute;
  top: -14px;
  right: 10px;
  background: var(--main_c);
  color: #fff;
  font-size: .9em;
  padding: 5px 20px;
  border-radius: 20px;
}

.business01 .section03 .wrap > div:nth-child(2)::before {
  content: "과제 02";
}

.business01 .section03 .wrap > div:nth-child(3)::before {
  content: "과제 03";
}


.business01 .section03 h6 {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--main_c);
}


.business01 .section03 .bg_list {
  background: #f7faf8;
  padding: 15px 18px;
  border-radius: 5px;
}

.business01 .section03 .bg_list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 8px;
  font-size: 0.95em;
}

.business01 .section03 .bg_list li:last-child {
  margin-bottom: 0;
}

.business01 .section03 .bg_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  background: var(--main_c);
}


@media (max-width: 900px) {
	.business01 .section02 .wrap{flex-direction: column;}
	.business01 .section02 .wrap > div{flex-direction:column;}
	.business01 .section02 .txtbox{text-align:center;}
	.business01 .section03 .wrap {flex-direction: column;}

	.business02 .wrap{flex-direction: column;}
	.business02 .wrap dl{width:100%;}
}