@charset "utf-8";


.GNS_MAIN_03{width: 100%;  overflow-x:hidden;padding-bottom: clamp(30px, calc(4.605vw + 11.579px), 100px)}
.GNS_MAIN_03 .contents-container{ }

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.GNS_MAIN_03 .contents-container .grid_box{width: 100%; float: left;  display: grid; grid-template-columns: repeat(2, 1fr); gap:3%; }
.GNS_MAIN_03 .contents-container .grid_box .fl{width:100% ; float: left; position: relative ;  
padding: clamp(10px, calc(1.316vw + 4.737px), 30px)!important ;
border-radius: 20px; background-color: #f9fafc!important;}
	
	
.GNS_MAIN_03 .contents-container .grid_box .fr{width:100%; float: left;position: relative ; }


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {


}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.GNS_MAIN_03 .contents-container .grid_box{width: 100%; float: left; display: grid; grid-template-columns:100%; gap:3%;}
.GNS_MAIN_03 .contents-container .grid_box .fl{width:100%; float: left; position: relative }
.GNS_MAIN_03 .contents-container .grid_box .fr{width: 100%; float: left;position: relative }


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




.calendar-wrapper { display: flex; font-family: 'Segoe UI', sans-serif; max-width: 700px;  overflow: hidden;  }

.calendar-left { padding: 50px; width: 60%;  background-color: #fff; border-radius: 25px; }
.calendar-header { display: flex; justify-content: center; align-items: center; font-weight: bold; margin-bottom: 10px; }
.calendar-header .nav-btn { background: none; border: none; font-size: 18px; margin: 0 20px; cursor: pointer; }
.weekdays, .days { display: grid; grid-template-columns: repeat(7, 1fr); list-style: none; padding: 0; margin: 5px 0; text-align: center;  font-weight: 700}

.weekdays li {font-weight: 800; color: #4CAF50; }
.days li { margin: 6px 0; padding: 10px; color: #333; position: relative; cursor: pointer; }
.days li .day { color: #333; }
.days li:before { width: 100%; aspect-ratio:2/ 2; background: rgba(204,204,204,0.00); color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }
.days li.dayon::after { content: ""; width: 6px; height: 6px; background: #4CAF50; border-radius: 50%; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); }
.days li.active { color: #fff; }
.days li.active:before { width: 100%; aspect-ratio:2/ 2; background: #4CAF50; color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }

.days li.today { color: #fff; }
.days li.today:before { width: 100%; aspect-ratio:2/ 2; background: #4CAF50; color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }
.days li.other-month { color: #ccc; }

.calendar-right { width: 40%; padding: 20px; }
.selected-date { background: #4CAF50; color: white; padding: 10px 40px; border-radius: 50px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; margin-bottom: 20px; }
.schedule { list-style: none; padding-left: 10px; color: #555; }


/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	
	
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.calendar-wrapper { display: flex;   flex-direction:column;  font-family: 'Segoe UI', sans-serif; max-width:100%!important; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }	
.calendar-left { padding: 20px; width: 100%!important; }
.calendar-right { width: 100%!important; background: #f7f7f7; padding: 20px; border-left: none; border-top: 1px solid #ddd; }
	
.days li { margin: 6px 0; padding:10px; color: #333; position: relative; cursor: pointer; }	
.days li:before { width: 50px;   aspect-ratio:2/ 2; background: rgba(204,204,204,0.00); color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }
.days li.active:before { width:50px; aspect-ratio:2/ 2; background: #4CAF50; color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }
.days li.today { color: #fff; }
.days li.today:before { width:50px; aspect-ratio:2/ 2; background: #4CAF50; color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }	
	
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
	
}
/* 구분 //end -----------------------------------*/