@charset "utf-8";

@import url('basic.css');

body {overflow-x: hidden;}

#wrap ::-webkit-scrollbar {width: 5px; height: 5px;}
#wrap ::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,0.5); border-radius: 5px;}
#wrap ::-webkit-scrollbar-track {background-color: #ddd; border-radius: 5px;}

/* slick slide common */
.slick-slider {transition: all ease-in-out 0.3s; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-slide {display: none; height: 100%; min-height: 1px; vertical-align: middle;}
.slick-list {overflow: hidden;}
.slick-list.dragging {cursor: pointer;}
.slick-initialized .slick-slide {display: inline-block;}
.slick-arrow.slick-hidden {display: none;}
.slick-current {opacity: 1; display: block;}
.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}

/* slick arrow show */
.arwShow .slick-arrow.slick-hidden {display: inline-block;}

.container {position: relative; width: 100%; max-width: 72rem; padding: 0 1rem; margin: 0 auto;}

/* header */
#header {height: 4.5rem;}
#header .container {display: flex; justify-content: space-between; align-items: center; height: 100%; position: relative;}
/* header - 로고 */
#header h1 a {display: block;}
#header h1 a img {vertical-align: middle; max-height: 100%;}
/* header - 유틸리티 */
#header .topUtil ul {display: flex; align-items: center;}
#header .topUtil li ~ li {margin-left: 0.75rem;}
#header .topUtil li a {display: block; width: 2.2rem; height: 2.2rem; line-height: 2.2rem; text-align: center; border-radius: 50%; background: #F9F9F9; border: 1px solid #ccc; font-size: 1.1rem; color: #5A728E;}
/* header - 유틸리티 : active */
#header .topUtil li a:hover,
#header .topUtil li a:focus {border-color: #5A728E; background: #5A728E; color: #fff;}

/* footer */
#footer {position: relative; border-top: 1px solid #D9D9D9; padding: 0 0 1.7rem;}
#footer::before {content: ""; position: absolute; top: 2.75rem; left: 0; width: 100%; height: 1px; background: #CDD1D5;}
#footer .ft_logo {margin-bottom: 0.85rem;}
#footer .ft_logo img {vertical-align: middle; max-height: 100%;}
#footer address {margin-bottom: 0.65rem; color: #333; font-style: normal; line-height: 1.3;}
#footer .tel {display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; color: #333;}
#footer .tel span {display: inline-block;}
#footer .tel span em {margin-right: 0.25rem;     font-weight: bold;}

.depth {
  padding-left: 16px;   /* 또는 margin-left */
}

/* site link */
#footer .ftBtn_wrap { display: flex; width: 100%; margin-bottom: 0.75rem; border-left: 1px solid #CDD1D5; border-right: 1px solid #CDD1D5;} 
#footer .ftBtn_wrap .ftBtn { width: 33.3%; position: relative;} 
#footer .ftBtn_wrap .ftBtn + .ftBtn { border-left: 1px solid #CDD1D5;}
#footer .ftBtn_wrap .ftBtn > button { width: 100%; text-align: left; height: 2.8rem; line-height: 2.8rem; padding: 0 1rem; border-bottom: 1px solid #CDD1D5; color: #1E2124; font-size: 0.85rem; } 
#footer .ftBtn_wrap .ftBtn > button i { float: right; line-height: 1.7rem; margin: 0.5rem 0; font-size: 1rem; color: #33363D; } 
#footer .ftBtn_wrap .ftBtn > button:hover,
#footer .ftBtn_wrap .ftBtn > button:focus { background: #efefef; } 
#footer .ftBtn_wrap .ftBtn.on button { background: #efefef; } 
#footer .ftBtn_wrap .ftBtn > div { display: none; position: absolute; left: -1px; right: -1px; bottom: 2.8rem; width: auto; max-height: 7.5rem; padding: 0.25rem 0; overflow: auto; background: #fff; border: 1px solid #888; z-index: 3;} 
#footer .ftBtn_wrap .ftBtn > div ul { margin-left: 0.5rem; overflow: hidden; } 
#footer .ftBtn_wrap .ftBtn > div a { display: block; position: relative; padding-left: 1rem; margin: 0.5rem 0; color: #333; } 
#footer .ftBtn_wrap .ftBtn > div a:before {  position: absolute; left: 0.5rem; top: 0.4rem; width: 3px; height: 3px; border-radius: 50%; background: #333; } 
#footer .ftBtn_wrap .ftBtn.on i { transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); }

/* footer_menu */
#footer .footer_menu {position: absolute; top: 4.25rem; right: 1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 1.25rem; margin-bottom: 0.75rem; }
#footer .footer_menu a { color: #000; }
#footer .footer_menu a strong { color: #1F5AA0; }

/* 탑버튼 */
.btn_top {position: absolute; right: 0; bottom: 2rem; z-index: 998; transition: all 0.6s ease;}
.btn_top i {position: relative; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center; font-size: 24px; color: #464d5d; background: #fff; border-radius: 50%;}
.btn_top:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ecedee; border-radius: 50%; animation: pulse 1.25s infinite ease-in-out alternate; content: "";}

/* sub_container */
#sub_container {margin: 0.5rem 0 2rem;}
#sub_container .container {display: flex; justify-content: space-between; align-items: start;}
#sub_container #sub_content {width: calc(100% - 15rem);}

/*** left ***/
/* user_info */
#left {position: sticky; top: 1.5rem; width: 13rem; transition: all 0.3s ease;}
#left .user_info {margin-bottom: 1.25rem; padding: 1.5rem; border-radius: 1rem; background: #F2F4FF; text-align: center;}
#left .user_nm {display: flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 1.1rem; color: #333;}
#left .user_img {display: flex; align-items: end; justify-content: center; width: 6.5rem; height: 6.5rem; border-radius: 50%; background: #fff; overflow: hidden; margin: 1.1rem auto;}
#left .user_index {font-size: 0.9rem; font-weight: 700; color: #333; margin-bottom: 1.25rem;}
#left .user_index span {display: inline-block; line-height: 1.4rem; border-radius: 0.75rem; padding: 0 0.9rem; font-size: 0.75rem; font-weight: 400; margin-right: 0.3rem; background: #fff; border: 1px solid transparent;}
#left .user_index span.student {color: #2C8A94; border-color: #3CB3C1;}
#left .user_index span.teacher {color: #3A19CA; border-color: #3A19CA;}
#left .user_index span.parent {color: #147E4D; border-color: #147E4D;}
#left .user_btns a {position: relative; display: block; line-height: 2.1rem; padding: 0 0.5rem; border-radius: 1.05rem; font-weight: 600; color: #fff; text-align: left;}
#left .user_btns a::after {content: '\EA6C'; font-family: 'remixicon'; font-size: 1rem; position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); font-weight: 300;}
#left .user_btns a:nth-child(1) {background: #3E67F9;}
#left .user_btns a:nth-child(2) {background: #1F5AA0;}
#left .user_btns a span {display: inline-block; border-radius: 50%; background: #fff; line-height: 1.3rem; width: 1.3rem; height: 1.3rem; text-align: center; font-size: 0.9rem; font-weight: 400; margin-right: 0.5rem;}
#left .user_btns a:nth-child(1) span {color: #3E67F9;}
#left .user_btns a:nth-child(2) span {color: #1F5AA0;}
#left .user_btns a ~ a {margin-top: 0.6rem;}
/* user_info - active */
#left .user_btns a:hover::after,
#left .user_btns a:focus::after {animation: pulse infinite 0.75s;}

/* sch_sche */
#left .sch_sche {margin-top: 1.25rem;}
#left .sch_sche .tit_wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;}
#left .sch_sche h2 {font-size: 0.95rem; font-weight: 700; color: #111;}
#left .sch_sche .control {display: flex; align-items: center; gap: 5px;}
#left .sch_sche .control a {display: block; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; text-align: center; color: #666; font-size: 0.7rem; font-weight: 700; border-radius: 50%; border: 1px solid #D9D9D9;}
#left .sch_sche .page {font-size: 0.7rem; font-weight: 700; color: #888; margin-right: 5px;}
#left .sch_sche .page strong {position: relative; margin-right: 1rem; color: #3E67F9;}
#left .sch_sche .page strong::after {content: '/'; position: absolute; right: -0.65rem; top: 50%; transform: translateY(-50%); font-size: 0.6rem; font-weight: 400; color: #888;}
#left .sch_sche .sche_list a {display: block; padding: 1rem; border-radius: 0.75rem; background: #F8F8F8;}
#left .sch_sche .sche_list a .sche_index {display: inline-block; line-height: 1.5rem; border-radius: 0.75rem; background: #00575e; padding: 0 0.75rem; font-size: 0.75rem; font-weight: 600; color: #fff; margin-bottom: 0.6rem;}
#left .sch_sche .sche_list a .tit {display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600; line-height: 150%; color: #333; height: 2.4rem;}
#left .sch_sche .sche_list a .date {display: flex; align-items: center; font-size: 0.75rem; color: #666; gap: 0.3rem; margin-top: 0.5rem;}
#left .sch_sche .sche_list a .date i {font-size: 0.7rem;}
/* sch_sche - active */
#left .sch_sche .control a:hover,
#left .sch_sche .control a:focus {color: #3E67F9; border-color: #3E67F9;}
#left .sch_sche .sche_list a:hover .tit,
#left .sch_sche .sche_list a:focus .tit {color: #00575e;}

@keyframes pulse {
  0% {transform: translate(0, -50%);}
  50% {transform: translate(0.25rem, -50%);}
	100% {transform: translate(0, -50%);}
}


/* 탭 : 공통 */
div[class^="tab_st"] {position: relative;}
div[class^="tab_st"] > .select {display: none;}
div[class^="tab_st"] a {position: relative; display: block; line-height: 1rem;}
div[class^="tab_st"] a[target='_blank'].down:after {content: "\eb7c";}
div[class^="tab_st"] a,
div[class^="tab_st"] ::before { transition: all 0.3s ease;}
div[class^="tab_st"] li.w100 {width: 100% !important;}

/* 탭 : 1차 탭 */
.tab_st1 ul {display: flex; flex-wrap: wrap; margin-left: -0.5rem; width: calc(100% + 1rem); margin-bottom: 0.75rem; margin-top: -0.375rem; overflow: hidden;}
.tab_st1 li {margin: 0.375rem 0.5rem; width: calc(25% - 1rem);}
.tab_st1 li a,
.tab_st1 > .select {display: flex; align-items: center; padding: 0.5rem 1.5rem 0.5rem 0.7rem; height: 3rem; font-size: 0.95rem; color: #666; background: #fff; border: 1px solid #D9D9D9; border-radius: 0.75rem;}
.tab_st1 li a:before,
.tab_st1 > .select:before {content: "\EA4E"; font-family: 'remixicon'; position: absolute; top: 50%; transform: translateY(-50%); right: 1.25rem; width: 1.2rem; height: 1.2rem; line-height: 1.2rem; text-align: center; font-size: 1rem; background:#CFCFCF; color: #fff; border-radius: 50%;}
.tab_st1 li.on a,
.tab_st1 > .select { font-weight: 700; color: #fff; background: #3E67F9; border-color: #007dda;}
.tab_st1 li.on a:before,
.tab_st1 > .select:before {background: #fff; color: #436CFF; }
.tab_st1 li:not(.on) a:focus,
.tab_st1 li:not(.on) a:hover {color: #375fa3; background: #dfebff; border-color: #a9c1e8;}
.tab_st1 li:not(.on) a:hover:before,
.tab_st1 li:not(.on) a:focus:before {background: #81a3dc;}
.tab_st1 li a[target='_blank']:after {font-size: 0.7rem;}

/* 탭 : 리스트 */
.tab_list {display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.75rem 1.25rem; background: #F4F4F4; border-radius: 0.75rem; overflow: hidden;}
.tab_list li {width: calc(20% - calc((1rem * 4) / 5));}
.tab_list li a {position: relative; display: block; padding: 0.5rem 0 0.5rem 1.5rem; line-height: 1rem; font-size: 0.9rem; color: #666;  transition: all 0.3s ease;}
.tab_list li a:after {content: "\EB80"; font-family: 'remixicon'; position: absolute; top: 50%; left: 0; font-size: 1rem; color: #666; transform: translateY(-50%); transition: color 0.3s;}
.tab_list li a:hover,
.tab_list li a:focus {color: #436CFF;}
.tab_list li a:hover:after,
.tab_list li a:focus:after {color: #436CFF;}
.tab_list li.on a,
.tab_list li#current a {font-weight: 700; color: #436CFF;}
.tab_list li.on a:after,
.tab_list li#current a:after {color: #436CFF; font-weight: 400;}

/* 반응형 */
@media (max-width: 1660px) {

	/* footer */
	#footer .btn_top {top: auto; bottom: 1rem; opacity: 1; visibility: visible;}
}

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

@media (max-width: 1440px) {
	/* 탑버튼 */
	.btn_top {right: 0.5rem;}

	/* 탭 : 리스트 */
	.tab_list li {width: calc(25% - calc((1rem * 3) / 4));}

}

@media (max-width: 1240px) {

  /*** left ***/
	#left {display: none;}

	/* 탑버튼 */
	.btn_top {position: absolute; right: 0; bottom: 2rem; z-index: 998; transition: all 0.6s ease;}
	.btn_top i {position: relative; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center; font-size: 1.2rem; color: #464d5d; background: #fff; border-radius: 50%;}
	.btn_top:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ecedee; border-radius: 50%; animation: pulse 1.25s infinite ease-in-out alternate; content: "";}

	#sub_container #sub_content {width: 100%;}

	/* 탭 : 1차 탭 */
	.tab_st1 ul {margin-left: -0.25rem; width: calc(100% + 0.5rem); margin-top: -0.25rem;}
	.tab_st1 li {margin: 0.25rem 0.25rem; width: calc(25% - 0.5rem);}
	.tab_st1 li a,
	.tab_st1 > .select {height: 2.5rem; font-size: 0.85rem; border-radius: 0.5rem;}
	.tab_st1 li a:before,
	.tab_st1 > .select:before {right: 1rem; width: 1rem; height: 1rem; line-height: 1rem; font-size: 0.9rem;}	

	/* 탭 : 리스트 */
	.tab_list {padding: 0.5rem 1rem; gap: 0 0.5rem;}
	.tab_list li {width: calc(25% - calc((0.5rem * 3) / 4));}
	.tab_list li a {font-size: 0.8rem;}
}

@media screen and (max-width: 1024px) {
	/* header */
	#header {height: 3.25rem;}
	/* header - 로고 */
	#header h1 a {height: 2.5rem;}
	/* header - 유틸리티 */
	#header .topUtil li a {width: 2rem; height: 2rem; line-height: 2rem; font-size: 1rem;}

	/* 탑버튼 */
	.btn_top {right: 0.5rem;}

	/* 탭 : 1차 탭 */
	.tab_st1 li a,
	.tab_st1 > .select {height: 2.25rem;}

	/* 탭 : 리스트 */
	.tab_list {padding: 0.25rem 1rem;}
}

@media (max-width: 950px) {

	/* footer */
	#footer .ftBtn_wrap { width:100%; top:-2.9rem;} 
	#footer .ftBtn_wrap .ftBtn { width: 50%; float: left; position: relative;}
    
}

@media (max-width: 850px) {

	/* 탭 : 리스트 */
	.tab_list li {width: calc(33.3% - calc((0.5rem * 2) / 3));}
    
}

@media screen and (max-width: 768px) {
	/* footer */
	#footer {padding: 0 0 1.5rem;}
	#footer .container {padding: 0;}
	#footer::before {display: none;}
	#footer .ft_logo {margin-bottom: 0.5rem; height: 2.5rem; padding: 0 1rem;}
	#footer address {margin-bottom: 0.5rem; font-size: 0.75rem; padding: 0 1rem;}
	#footer .tel {gap: 0.35rem 1rem; font-size: 0.75rem; padding: 0 1rem;}

	/* site link */
	#footer .ftBtn_wrap { flex-wrap: wrap;} 
	#footer .ftBtn_wrap .ftBtn { width: 100%;} 
	#footer .ftBtn_wrap .ftBtn + .ftBtn { border-left: none;}
	#footer .ftBtn_wrap .ftBtn > button { height: 2.25rem; line-height: 2.25rem; padding: 0 0.75rem; font-size: 0.8rem; } 
	#footer .ftBtn_wrap .ftBtn > button i { margin: 0.25rem 0; font-size: 0.95rem; } 
	#footer .ftBtn_wrap .ftBtn > div { bottom: 2.25rem;} 

	/* footer_menu */
	#footer .footer_menu {position: relative; top: auto; right: auto; justify-content: start; align-items: center; gap: 0.5rem 1rem; padding: 0 1rem; }

	/* 탭 : 공통 */
	.reactTab[class^="tab_st"] > .select {display: block; height: auto; font-size: 0.8rem; padding: 0.65rem 1.5rem 0.65rem 0.7rem;}
	.reactTab[class^="tab_st"] ul {display: none; margin-bottom: 0; margin-left: 0; width: 100%; text-align: left;}
	.reactTab[class^="tab_st"] li {display: block; width: 100% !important;}
	.reactTab[class^="tab_st"] li a:before {display: none;}
	
	/* 탭 : 1차 탭 */
	.tab_st1 > .select {border-radius: 0.5rem 0.5rem 0 0;}
	.tab_st1:not(.notJS) {margin-bottom: 0.75rem;}
	.tab_st1:not(.notJS) ul {width: 100%; margin: 0; border: 1px solid #ccc; border-radius: 0 0 0.5rem 0.5rem; overflow: hidden;}
	.tab_st1:not(.notJS) li {margin: 0;}
	.tab_st1:not(.notJS) li + li {border-top: 1px dashed #ddd;}
	.tab_st1:not(.notJS) li a {display: block; height: auto; border: 0;}
	.tab_st1:not(.notJS) li.on a {color: #333; background: #fff;}
	.tab_st1 li:not(.on) a:focus,
	.tab_st1 li:not(.on) a:hover {color: #375fa3; font-weight: 700; background: none;}

	/* 탭 : 1차 탭 */
	.tab_st1 > li {width: 100%;}
	.tab_st1 > li a {padding: 0.75rem 1rem 0.75rem 0.5rem;}
}

@media screen and (max-width: 640px) {

	/* 탭 : 리스트 */
	.tab_list li {width: calc(50% - 0.25rem);}
}	

@media screen and (max-width: 580px) {

}

@media screen and (max-width: 480px) {
	
}

@media screen and (max-width: 440px) {

}

@media screen and (max-width: 380px) {
	/* 탭 */
	.tab_list li {width: 100%;}
	.tab_list li a {padding: 0.4rem 0 0.4rem 1.25rem;}
}	

@media (max-width: 320px) { 
  /* header */
	#header {height: 3rem;}
	/* header - 로고 */
	#header h1 a {height: 2rem;}
	
	/* footer */ 
    #footer .ft_wrap {padding-top:5.4rem; }
    #footer .ftBtn_wrap { top:-5.4rem;} 
    #footer .ftBtn_wrap .ftBtn { width: 100%; }
}