/************************* 
공통 
*************************/
.com-box { border-radius: 20px; overflow: hidden; border: 1px solid #E3EAF0; background-color: #fff; }
.main-wrap { padding: 2.125em 0 4.8em; }
.grid { display: flex; flex-wrap: wrap; justify-content: space-between; }
.main-section + .main-section { margin-top: 2.5em; }

/************************* 
Main 
*************************/
.main-section-summary .left_area { width: 37%; }
.main-section-summary .left_area > .com-box { overflow: hidden; }
.main-section-summary .right_area { width: 63%; padding-left: 1.25em; }
.main-section-summary .center-area { display: flex; justify-content: center; min-height: 18.75em; padding: 0.8em 0.6em; }
.main-section-summary .center-area .center-list { display: flex; flex-wrap: wrap; align-items: center; position: relative;}
.main-section-summary .center-area .center-list .center { width: 33.3%; text-align: center; padding: 0.5em; border-right:1px dashed #CBD2D9;}
.main-section-summary .center-area .center-list::after {content: ''; position: absolute; height:1px; width:calc(100% - 40px); border-bottom:1px dashed #CBD2D9; margin:0 20px;}
.main-section-summary .center-area .center-list .center:nth-child(3n) {border-right:0;}
.main-section-summary .center-area .center-list .center a { display: block; transition: all .3s;}
.main-section-summary .center-area .center-list .center a:hover {color:#449FF9;}
.main-section-summary .center-area .center-list .icon img {transition: all .3s;}
.main-section-summary .center-area .center-list .icon:hover img {transform: scaleX(-1); }
.main-section-summary .center-area .center-list .title { font-size: 1.125em; font-weight: 600; margin-top: 0.31em;  line-height:1.2; height:2.4em; display: flex; align-items: center; justify-content: center;}
.main-section-summary .calendar-area { position: relative; height: 20em; padding: 1.625em 1.625em 0; margin-top: 1.25em; }

.calendar-area .calendar-head {display: flex; align-items: center; justify-content: space-between; padding: 0 0 1em  0;}
.calendar-area .calendar-head .calendar-title {  font-size: 1.25em; font-weight: bold; }
.calendar-area .calendar-head .calendar-title span {font-size: 14px;color: #449FF9;}
.calendar-area .calendar-head .calendar-control .month-control {display: flex;  align-items: center; }
.calendar-area .calendar-head .date_control { font-weight: bold; color: #449FF9; padding: 0 0.7em; line-height: 1.6em; margin:0 0.3em;  border: none; text-align: center;  transition: all 0.3s; }
.calendar-area .calendar-head .month-btn { color: #484B52; padding: 0 0.3em; color: #449FF9; }

.calendar-area .calendar .sun { color: #FF4444 !important; }
.calendar-area .calendar .sat { color: #4D5AE1 !important; }
.calendar-area .calendar .calendar-week,
.calendar-area .calendar .calendar-date { display: flex; flex-wrap: wrap; text-align: center; }
.calendar-area .calendar .calendar-week > div,
.calendar-area .calendar .calendar-date > div { width: 14.285%; color: #222; font-weight: 400;}
.calendar-area .calendar .calendar-week {background-color: #EFF3F6; border-radius: 5px;}
.calendar-area .calendar .calendar-week > div { line-height: 1.875em; }
.calendar-area .calendar .calendar-date > div { line-height: 2.2em; margin: 0.15em 0; }
.calendar-area .calendar .calendar-date > div > span {color:#444;}
.calendar-area .calendar .calendar-date .check-schedule { display: flex; align-items: center; justify-content: center; }
.calendar-area .calendar .calendar-date .check-schedule > span { background-color: #449FF9; color: #fff; width: 2.5em; border-radius: 5px; cursor: pointer; }

.calendar_month_container { display: none; position: absolute; width: 100%; height: 15.6em; left: 0; bottom: 0; padding: 0 1.625em 1em; border-radius: 1em; background-color: #fff; z-index: 10; }
.calendar_month_container .year_control { width: 10em; height: 2.5em; background-color: #fff; border-radius: 0.3em; border: 1px solid #d6d6d6; display: flex; align-items: center; justify-content: space-between; margin: 0 auto 0.875em; }
.calendar_month_container .year_control .year_btn { height: 100%; padding: 0 0.5em; display: flex; align-items: center; padding-top: 0.1em; }
.calendar_month_container .year_control .year_btn i { font-size: 1.25em; color: #222; display: flex; align-items: center; }
.calendar_month_container .year_control .year { font-size: 1.25em; font-weight: bold; color: #a60a13; }
.calendar_month_container .month_box_wrap { display: flex; align-items: center; flex-wrap: wrap; margin: -2px; }
.calendar_month_container .month_box_wrap .month_box { position: relative; width: calc(20% - 4px); height: 3.5em; border-radius: 0.3em; border: 1px solid #d6d6d6; background-color: #fff; cursor: pointer; margin: 2px; white-space: nowrap; }
.calendar_month_container .month_box_wrap .month_box .txt { font-size: 1.25em; font-weight: bold; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.calendar_month_container .month_box_wrap .month_box.selected { background-color: #ffe4e2; color: #a60a13; }


.main-section-summary .main-banner { position: relative; height: calc(100%);}
.main-section-summary .main-banner .com-box { height: 100%; }
.main-section-summary .main-banner .swiper-container { border-radius: 1em; }
.main-section-summary .main-banner .item { background-repeat: no-repeat; background-position: right center;}
.main-section-summary .main-banner .item img { border-radius: 0.9em; }
.main-section-summary .main-banner .txt_box { width: 100%; height: 100%; display: flex; padding: 5em 3.75em 0; flex-direction: column; box-sizing: border-box; }
.main-section-summary .main-banner .title { font-size:2.13em; line-height: 1.2; font-weight: bold; color:#002E6D}
.main-section-summary .main-banner .info { font-size: 1.25em; line-height: 1.5em; margin-top: 0.7em; color:#002E6D; opacity: .7; font-weight: 600; }


/*swiper*/

.main-section-summary .main-banner .swiper-container { height: 100%; }
.main-section-summary .main-banner .swiper-pagination,
.main-section-summary .main-banner .swiper-button-prev, 
.main-section-summary .main-banner .swiper-button-next { position: static; transform: none; width: auto; }


.main-banner-pagination { position: absolute; bottom: 0; right: 0; z-index: 10; display: flex; align-items: center; color: #fff; width: 10em; height: 3.13em; background-color: rgba(0,0,0,0.5); border-radius: 20px 0 20px 0; justify-content: center;}
.main-section-summary .main-banner .swiper-button-prev { margin-left: 1em;}
.main-banner-pagination .btn_autoplay { display: flex; }
.main-banner-pagination .btn_autoplay_play { display: none; }
.main-banner-pagination .btn_autoplay_pause { width: 1em; height: 1em; align-items: center; justify-content: center; }
.main-banner-pagination .btn_autoplay_pause img { width: 0.33em; }
.main-banner-pagination.pause .btn_autoplay_pause { display: none; }
.main-banner-pagination.pause .btn_autoplay_play { display: flex; }
.main-banner-pagination .btn_autoplay,
.main-banner-pagination .swiper-button-prev::after, 
.main-banner-pagination .swiper-button-next::after { font-size: 1.5em; color: #fff;  }
.main-banner-pagination .swiper-button-prev::after, 
.main-banner-pagination .swiper-button-next::after { padding: 0 0.2em; }

.swiper-tool button {position: absolute; z-index: 12;}
.swiper-tool .btn-swiper-play {display: none;}
.swiper-util { height: 50px; text-align: center; display: flex; justify-content: center; align-items: center; }
.swiper-util .bullet {display: inline-block;  width: 4px; height: 4px; background: #000; border-radius: 50%; margin: 0 2px; }
.swiper-util button {margin:0 10px;}
.swiper-util .btn-swiper-play {display: none;}  

.swiper-control {display: flex;}
.swiper-control i {coloR:#fff;}

.main-section-summary .about_link .com-box { display: flex; height: 5.3em; }
.main-section-summary .about_link .box { width: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 1.875em 0 2.5em; }
.main-section-summary .about_link .box + .box::before { content: ''; display: block; width: 1px; height: 60%; background-color: #d8d8d9; left: 0; top: 50%; transform: translateY(-50%); position: absolute; }
.main-section-summary .about_link .title { font-size: 1.5em; font-weight: bold;  }
.main-section-summary .about_link .view_txt { font-size: 1.125em; }
.main-section-summary .about_link button { display: block; padding: 0.5em; font-weight: 300; }

@media (max-width: 1520px) {
	.main-section-summary .left_area,
	.main-section-summary .right_area { width: 100%; }
	.main-section-summary .right_area { padding-left: 0; }
	.main-section-summary .grid {flex-direction: column-reverse;}
	.main-section-summary .main-banner { height: 32em; /*padding-top: 1.25em;*/ padding-bottom: 1.25em; }
	.main-section-summary .main-banner .big_txt { margin-top: 0.7em; }
	.main-section-summary .main-banner .view_btn { margin-top: 2em; }
}
@media (min-width: 951px) and (max-width: 1520px) {
	.main-section-summary .left_area { display: flex; justify-content: space-between; }
	.main-section-summary .left_area > .com-box { width: calc(50% - 0.625em); }
	.main-section-summary .calendar-area { margin-top: 0; }
}
@media (max-width: 950px) {
	.main-section-summary .center-area,
	.main-section-summary .center-area .center-list { width: 100%; }
	.main-section-summary .main-banner { font-size: 0.75em; }
	.main-section-summary .main-banner .item { background-size: cover; }
	.main-section-summary .main-banner .txt_box { padding:  6%; }
    .main-section-summary .main-banner .txt_box .title {font-size:1.88em}
    .main-section-summary .main-banner .txt_box .info {font-size: 1em;}
    .main-section-summary .about_link .com-box { display: block; background-color: #f9f9f9; border: none; height: auto; overflow: visible; }
	.main-section-summary .about_link .box { border-radius: 0.625em; border: 1px solid #d6d6d6; padding: 0.4em 1.5em; }
	.main-section-summary .about_link .box + .box { margin-top: 1em; }
	.main-section-summary .about_link .box + .box::before { display: none; }
}
@media (max-width: 420px) {
	.main-section-summary .center-area { height: 25em; }
	.main-section-summary .center-area .center-list .center { width: 50%; }
    .main-section-summary .center-area .center-list .center:nth-child(3n) {border-right: 1px dashed #CBD2D9;}
    .main-section-summary .center-area .center-list .center:nth-child(2n) {border-right: 0;}
    .main-section-summary .center-area .center-list::before {content: ''; position: absolute; height: 1px;        width: calc(100% - 40px); border-bottom: 1px dashed #CBD2D9; margin: 0 20px; top:33.3%}
    .main-section-summary .center-area .center-list::after {top:66.6%}
}
@media (max-width: 375px) {
	.main-section-summary .calendar-area { height: auto; }
	.calendar-area .calendar-head { display: block; text-align: center; }
	.calendar-area .calendar-head .calendar-control { justify-content: center; margin-top: 0.5em; }
	.calendar_month_container { top: 5.5em; }
	.calendar-container .schedule .schedule_head { height: auto; }
	.calendar-container .schedule .schedule_head .current_area { position: static; transform: none; width: 100%; }
	.calendar-container .schedule .schedule_head .current_day { margin: 0 auto; } 
	.calendar-container .schedule .schedule_list { height: calc(100% - 5em); }
}

/* 게시판 */
.main-section-board > .grid { display: flex; flex-wrap: wrap; justify-content: space-between; }
.main-section-board .board-area {width: 48%; position:  relative}

.main-section-board .board-con li {width:48%; float:left;}
.main-section-board .board-con li:not(:last-child) {margin-right:2%;}
.main-section-board .board-con li a h5, .main-section-board .board-con li a p {display: inline-block; width: 100%; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; white-space: normal;  text-align: left; word-wrap: break-word; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical;} 
.main-section-board .board-con li a h5 {font-size: 1.25em; margin-bottom:0.94em; line-height: 1.4em; height: 2.8em;}
.main-section-board .board-con li a p {color:#666; margin-bottom:1.25em; line-height: 1.5em; height: 3em;}
.main-section-board .board-con li a span.date { color:#999}
.main-section-board .board-con .btn-more {position: absolute; top:1.25em; right:1.6%;}
.main-section-board .board-con .btn-more:hover {transform: rotate(360deg); transition: all .3s ease;}


.main-section-board .banner-area {width:24%; background: #164194 url('/img/renew/bn-number-bg.png') left top no-repeat; border-radius: 20px; padding:1.88em 2.19em; box-shadow: 0 10px 30px rgba(22, 54, 148, 0.3);}
.main-section-board .banner-area h4 {color:#fff; font-size:1.25em; font-weight: bold; padding-bottom: 0.75em;}
.main-section-board .banner-area dl {line-height:1.88em}
.main-section-board .banner-area dt {float:left; width:40%; color:#fff;}
.main-section-board .banner-area dd {color:#fff;}

.main-section-board .youtube-area {width:24%; background: #454C5B; border-radius: 20px; padding:5px; box-shadow: 0 10px 30px rgba(22, 54, 148, 0.3);}
.main-section-board .youtube-area iframe {border-radius: 1rem;}

ul#tabs-nav {list-style: none; margin-bottom:1.25em; }
ul#tabs-nav li {float: left; font-weight: bold; margin-right: 2px;  padding: 0.8em 2.19em; border-radius:10px;
cursor: pointer;}
#tabs-nav li a {text-decoration: none; color:#8995AC; font-size: 1.25em;}
ul#tabs-nav li:hover,
ul#tabs-nav li.active {background: rgb(73,168,255); background: linear-gradient(129deg, rgba(73,168,255,1) 0%, gba(27,84,194,1) 100%); box-shadow: 0 10px 10px rgba(86, 143, 209, 0.3); transition: all .5s ease;}
ul#tabs-nav li.active a, ul#tabs-nav li:hover a {color:#fff;}




@media (max-width: 1520px) {
	.main-section-board .board-con .btn-more {top:.5em}

}
@media (max-width: 950px) {
	.main-section-board .board-area,
	.main-section-board .banner-area { width: 100%; }
	.main-section-board .board-con li {width:100%; margin-right:0; float:left; margin-bottom:1.88em}
	.main-section-board .board-con li a h5 {height:auto; margin-bottom:.3em}
	.main-section-board .board-con li a p {height:auto; margin-bottom:.5em}

	.main-section-board .youtube-area {
		width:100%;
		margin-bottom: 1.88em;
	}

	ul#tabs-nav li {padding: 0.8em 1.18em;}
	#tabs-nav li a {font-size:1em}
}
@media (max-width: 540px) {

}
@media (max-width: 380px) {

}


/**
	20231115 추가
 */
.main-section-summary .calendar-area {
	height: auto;
	padding: 1.625em;
}
.calendar-area .calendar-head .calendar-control .month-control.off {
	display: none;
}
.calendar-area .calendar-head .calendar-control .calendar-date.off {
	display: none;
}
.calendar-area .calendar-head .calendar-control .calendar-date {
	display: flex;
	align-items: center;
}
.calendar-container .calendar {
	position: relative;
}
.calendar-container .calendar-schedule {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #eee;
	border-radius: 5px;
	padding: 10px;
	overflow-y: scroll;
}
.calendar-container .calendar-schedule.off {
	display: none;
}
.calendar-container .calendar-schedule::-webkit-scrollbar-thumb {
	background-color: #449FF9;
}
.calendar-container .calendar-schedule ul {
}
.calendar-container .calendar-schedule li {
	height: 60px;
	border: 1px solid #d6d6d6;
	border-radius: 5px;
	background-color: white;
	padding: 8px 10px;
	cursor: pointer;
}
.calendar-container .calendar-schedule li:not(:last-child) {
	margin-bottom: 10px;
}
.calendar-container .calendar-schedule li p {
	font-family: 'Pretendard', Arial, sans-serif;
	font-weight: bold;
}
.calendar-container .calendar-schedule li p:first-child {
	margin-bottom: 4px;
	line-height: 16px;
	color: #449FF9;
}
.calendar-container .calendar-schedule li p:last-child {
	line-height: 24px;
}
.calendar-container .calendar-schedule li p span.course-kind {
	display: inline-block;
	width: 62px;
	height: 24px;
	text-align: center;
	border-radius: 3px;
	padding: 0 3px;
	color: white;
	font-size: 14px;
	overflow: hidden;
	vertical-align: middle;
}
.calendar-container .calendar-schedule li p span.course-kind[data-kind="10"] {
	background-color: #1a619f;
}
.calendar-container .calendar-schedule li p span.course-kind[data-kind="20"] {
	background-color: #c31a7d;
}
.calendar-container .calendar-schedule li p span.course-kind[data-kind="30"] {
	background-color: #77a430;
}
.calendar-container .calendar-schedule li p span.course-kind[data-kind="40"] {
	background-color: #ffcc00;
}
.calendar-container .calendar-schedule li p span.course-kind[data-kind="50"] {
	background-color: #c31a7d;
}
@media (max-width: 540px) {
	.calendar-container .calendar-schedule {
		padding: 6px;
	}
	.calendar-container .calendar-schedule li {
		height: 52px;
		padding: 8px;
	}
	.calendar-container .calendar-schedule li p:first-child {
		margin-bottom: 2px;
	}
	.calendar-container .calendar-schedule li p:first-child span {
		font-size: 12px;
	}
	.calendar-container .calendar-schedule li p:last-child {
		line-height: 18px;
		font-size: 10px;
	}
	.calendar-container .calendar-schedule li p span.course-kind {
		height: 18px;
		font-size: 10px;
		width: 50px;
	}
}