@charset "utf-8";

/*= 메인공통
------------------------------------------------------------------------------------------------------------------------- */

/* 메인 페이지 내용 전체 Wrap */
#Main_wrap {position:relative; width:100%; height:100%; background-color:#fff; min-width:1250px; padding-top:94px;} /* 최소 화면 넓이(메인내용) */


/* 메인 페이지 콘텐츠 내용 박스 */
#Main_contA {position: relative; display: flex; margin:0 auto; width:90%; margin-top:3.5%; padding-bottom:40px; transition: all 0.2s linear;}
#Main_contB {position: relative; display: flex; margin:0 auto; width:90%; padding-bottom:40px; transition: all 0.2s linear;}


/* 타이틀 박스 */
.Mtitlebox {position:relative; display:flex; align-items:center; justify-content: space-between; width:100%; height:50px; border-radius: 4px 4px 0 0;}
.Mtitlebox h2{font-size:18px; font-family:'NanumSquare'; font-weight:700; color:#FFF; margin-left:5.5%;}
.Mtitlebox a.btnbox {padding:4px 14px 5px; font-size:12px; font-weight:bold; background:#FFF; margin-right:2%; border-radius:3px; box-shadow: 0px 1px 1px 0px rgb(0,0,0, 0.1);  transition: all 0.2s linear;}
.Mtitlebox a.btnbox:hover {box-shadow: 0px 2px 2px 0px rgb(0,0,0, 0.4);  transition: all 0.2s linear;}

.MtitleboxB {position:relative; display:flex; align-items:center; justify-content: space-between; width:100%; height:50px;}
.MtitleboxB h2{font-size:18px; font-family:'NanumSquare'; font-weight:700; color:#000; margin-left:5.5%;}
.MtitleboxB h2.mlper0{margin-left:4px !important;}
.MtitleboxB a.btnbox {padding:4px 14px 5px; font-size:12px; font-weight:bold; background:#FFF; margin-right:2%; border-radius:3px; border:1px solid #e9e9e9; box-shadow: 0px 1px 1px 0px rgb(0,0,0, 0.1);  transition: all 0.2s linear;}
.MtitleboxB a.btnbox:hover {box-shadow: 0px 2px 2px 0px rgb(0,0,0, 0.4);  transition: all 0.2s linear;}
.MtitleboxB .Tline{position:absolute; width: 100%; height:2px; top:0; /*background: linear-gradient(to right, #f9cc23, #00cbb7);*/}


/* 작은 탭 메뉴 */
.msTabBox {position:absolute; display:flex; right:2%; top:10px;}
.msTabBox ul {display: flex; justify-content: space-evenly; align-items: center; margin: 0 auto; background-color: #f4f5f7;}
.msTabBox ul li {width: 100%; border:1px solid #CCC;}
.msTabBox ul li a {display:flex;  justify-content:  center; align-items:center;  height:24px; color: #666; font-size:13px; letter-spacing: -0.5px; text-decoration: none; padding:0px 14px; line-height:1.8;}
.msTabBox ul li.on {background: #30465e; margin: 0 -1px; border:1px solid #333 !important; z-index:1;}
.msTabBox ul li.on a {font-weight: 700; color:#FFF;}
.msTabBox ul li:first-child{border-radius:3px 0 0 3px;}
.msTabBox ul li:last-child{border-radius:0 3px 3px 0;}
.msTabBox ul li.onechild{border-radius:3px !important;}


/* 박스 그림자 */
.Mbsw{box-shadow: 0px 4px 4px 0px rgb(250,250,250, 1);}


/*= 메인 콘텐츠
------------------------------------------------------------------------------------------------------------------------- */

/* 학생현황 */
.Mstudent {position: relative; width:31.343%; height:320px; background:#FFF; margin-right:2.985%; border:1px solid #ffd400; border-radius:6px;}
.Mstudent .Swrap {position: relative; width:100%; height:84.375%; border:1px solid rgba(0,0,0,0);}
.Mstudent .Swrap .stutypeBox {width:92.5925%; height:40%; background-color:#f7f9fb; margin:0 auto;  margin-top:3.5%; border-radius:6px;}
.Mstudent .Swrap .stutype {position: relative; display:flex; align-items:center; height:100%;}
.Mstudent .Swrap .stutype > li {position: relative; width:33.333%; text-align:center; height:50%;}
.Mstudent .Swrap .stutype > li .title { display:block; margin-bottom:6px;}
.Mstudent .Swrap .stutype > li .number {font-size:24px; font-family:'NanumSquare'; font-weight:800;}
.Mstudent .Swrap .stutype > li:after {display:block; content:''; position:absolute; width:1px; height:100%;  top:50%; right:0; background:#e2e2e2;  transform: translate(0%, -50%);}
.Mstudent .Swrap .stutype > li:last-child:after{display:none;}
.Mstudent .Swrap .btnBox  {width:92.5925%; height:22%; margin:0 auto;  margin-top:3.5%;}
.Mstudent .Swrap .btntype {display:flex; align-items:center; height:100%;}
.Mstudent .Swrap .btntype > li {display:flex; align-items:center; justify-content:  center;  width:33.333%; height:100%; border:1px solid #111; margin-right:2%; border-radius:6px; font-weight:bold; font-size:13px;}
.Mstudent .Swrap .btntype > li.btnA {border:1px solid #ffc600; transition: all 0.1s linear;}
.Mstudent .Swrap .btntype > li.btnA:hover {border:1px solid #ff9000; background:#ff9000; color:#FFF; transition: all 0.1s linear;}
.Mstudent .Swrap .btntype > li.btnB {border:1px solid #00ab9a; transition: all 0.1s linear;}
.Mstudent .Swrap .btntype > li.btnB:hover {background:#00ab9a; color:#FFF; transition: all 0.1s linear;}
.Mstudent .Swrap .btntype > li.btnC {border:1px solid #13b1f4; transition: all 0.1s linear;}
.Mstudent .Swrap .btntype > li.btnC:hover {background:#13b1f4; color:#FFF; transition: all 0.1s linear;}
.Mstudent .Swrap .btntype > li > a {display:inline-block; width:100%; height:100%; display:flex; align-items:center; justify-content:  center; }
.Mstudent .Swrap .btntype > li:last-child {margin-right:0;}
.Mstudent .Swrap .etcBox {position:absolute; width:auto; height:30px; right:3.5%; bottom:4%;}
.Mstudent .Swrap  .etcBox > ul {position: relative; display:flex;  width:auto; font-size:13px;}
.Mstudent .Swrap  .etcBox > ul li {position: relative;  display:flex; width:auto; padding-right:10px; margin-right:10px;}
.Mstudent .Swrap  .etcBox > ul li:after {display:block; content:''; position:absolute; width:1px; height:10px;  top:5px; right:0; background:#6a717e;}
.Mstudent .Swrap  .etcBox > ul li:last-child { margin-right:0; padding-right:0;}
.Mstudent .Swrap  .etcBox > ul li:last-child:after { display:none;}

/* 출결현황 */
.Mattend {position: relative; width:31.343%; height:320px; background:#FFF; margin-right:2.985%; border:1px solid #00b3a1; border-radius:6px;}
.Mattend .Gwrap {position: relative;  display:flex; width:100%; height:84.375%; }
.Mattend .Gwrap .graphbox {position: relative; display:flex; align-items:center;  justify-content: center; flex-wrap: wrap; width:60%; height:100%;}
.Mattend .Gwrap .graphbox .graph {padding:10px; margin-top:20px; text-align:center; /* border:1px solid #e9e9e9; border-radius:6px; */} /* 출결 그래프 */
.Mattend .Gwrap .graphbox .rate {position:absolute; top:47%; left:50%; transform: translate(-47%, -50%); color:#646464;}
.Mattend .Gwrap .graphbox .rate span{font-family:'NanumSquare'; font-size:28px; font-weight:800;}
.Mattend .Gwrap .graphbox .rate p{width:100%; text-align:center; font-size:14px; font-weight:bold;}
.Mattend .Gwrap .graphbox .date {width:100%; height:50px; text-align:center; font-size:14px;}
.Mattend .Gwrap .numbox {display:flex; align-items:center; justify-content:center; width:40%; height:100%;}
.Mattend .Gwrap .numbox .Numw {width:100px;}
.Mattend .Gwrap .numbox .Numw > li { position:relative; display:flex; align-items:center; width:100%; height:60px;}
.Mattend .Gwrap .numbox .Numw > li .cpdot {position: relative; width:28px; height:28px; border-radius:4px; margin-right:10px;}
.Mattend .Gwrap .numbox .Numw > li .cpdot .light {position:absolute; top:3px; left:3px; width:22px; height:4px; border-radius:2px; background:rgba(255,255,255,0.2);}
.Mattend .Gwrap .numbox .Numw > li .number p {font-family:'Noto Sans KR'; font-size:14px; font-weight:400; margin-bottom:4px;}
.Mattend .Gwrap .numbox .Numw > li .number span {font-family:'NanumSquare'; font-size:20px; font-weight:800; letter-spacing:-1px;}

/* 수납현황 */
.Mreceipt {position: relative; width:31.343%; height:320px; background:#FFF; border:1px solid #13b1f4; border-radius:6px;}
.Mreceipt .Rwrap {position: relative; width:100%; height:84.375%;}
.Mreceipt .Rwrap .ListBox {width:92.5925%; height:48%; margin:0 auto;  margin-top:3.5%;  border-bottom:1px solid #ededed;}
.Mreceipt .Rwrap .ListBox .List {display:flex; width:100%; }
.Mreceipt .Rwrap .ListBox .List li {position: relative; text-align:center; height:28px;}
.Mreceipt .Rwrap .ListBox .List li:after {display:block; content:''; position:absolute; width:1px; height:16px;  top:2px; right:0; background:#e9e9e9;}
.Mreceipt .Rwrap .ListBox .List li:last-child:after {display:none;}
.Mreceipt .Rwrap .RateBox {width:92.5925%; height:38%; margin:0 auto;}
.Mreceipt .Rwrap .RateBox .date_rate {display:flex; align-items:center; font-weight:bold; height:50px;}
.Mreceipt .Rwrap .RateBox .date_rate span {display:inline-block; font-size:20px; font-weight:800; font-family:'NanumSquare';  line-height:50px; padding-top:3px; padding-left:10px;}
.Mreceipt .Rwrap .RateBox .ratewrap {position: relative; width:100%; height:10px; background:#f3f5f6; border-radius:5px;}
.Mreceipt .Rwrap .RateBox .ratewrap .grap {position: absolute; width:50%; height:10px; border-radius:5px; left:0; top:0; background: linear-gradient(to right, #f9cc23, #00cbb7);}
.Mreceipt .Rwrap .RateBox .moneywrap {display:flex; align-items:center; justify-content: space-between; letter-spacing:-0.5px; margin-top:10px;}

/* 상담관리 */
.Mcounsel {position: relative; width:31.343%; height:320px; background:#FFF; margin-right:2.985%; border-top:none;}
.Mcounsel .Cwrap {position: relative; width:100%; height:84.375%;}
.Mcounsel .Cwrap .counBox {width:100%; height:100%; margin-top:10px;}
.Mcounsel .Cwrap .counBox > li {position: relative;  display:flex; align-items:center; width:100%; height:100%; border:1px solid #dfdfdf; height:29%; border-radius:6px; margin-bottom:2%;}
.Mcounsel .Cwrap .counBox > li:last-child {margin-bottom:0;}
.Mcounsel .Cwrap .counBox > li .list_photo {display:flex; align-items:center; width:80px; height:100%;}
.Mcounsel .Cwrap .counBox > li .list_photo .photo { width:60px; height:60px; overflow:hidden; border-radius:30px; margin-left:20px;}
.Mcounsel .Cwrap .counBox > li .name {width:80px; text-align:center; font-size:14px;}
.Mcounsel .Cwrap .counBox > li .name .stu_name {font-weight:600;}
.Mcounsel .Cwrap .counBox > li .sbuject {display:flex; align-items:center; width:45%; height:100%; white-space: normal; line-height:1.5; max-height:3em; word-wrap: break-word; overflow:hidden;
	 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* 텍스트 자르기 */}
.Mcounsel .Cwrap .counBox > li .dtype {position: absolute; display:flex; align-items:center; flex-wrap: wrap; right:1%; top:50%; width:110px; text-align:center; transform: translate(-0%, -50%);}
.Mcounsel .Cwrap .counBox > li .dtype .typeA {width:84%; padding:4px 0; background:#13b1f4;  font-size:13px; color:#FFF; font-weight:bold; border-radius:14px; margin:0 auto;}
.Mcounsel .Cwrap .counBox > li .dtype .typeB {width:84%; padding:4px 0; background:#00ab9a;  font-size:13px; color:#FFF; font-weight:bold; border-radius:14px; margin:0 auto;}
.Mcounsel .Cwrap .counBox > li .dtype .typeC {width:84%; padding:4px 0; background:#ff9000;  font-size:13px; color:#FFF; font-weight:bold; border-radius:14px; margin:0 auto;}
.Mcounsel .Cwrap .counBox > li .dtype .date {width:84%; padding:4px 0; font-size:13px; margin:0 auto;}

/* 수입지출 */
.Mrevex {position: relative; width:31.343%; height:320px; background:#FFF; margin-right:2.985%; border-top:none; border-radius:0 0 10px 10px; overflow:hidden;}
.Mrevex .Ewrap {position: relative; width:100%; height:84.375%; }
.Mrevex .Ewrap .graphbox {position: relative; display:flex; align-items:center;  justify-content: center;  width:100%; height:230px;}
.Mrevex .Ewrap .legend {width:30%; margin:0 auto; margin-top:8px; }
.Mrevex .Ewrap .legend > ul {position: relative; display:flex;  width:auto;}
.Mrevex .Ewrap .legend >  ul > li {display:flex; align-items:center; justify-content: flex-end; font-size:13px;}
.Mrevex .Ewrap .legend >  ul > li > span {width:10px; height:10px; margin-right:4px;}

/* 메인 일정관리 */
.Mcalendar {position: relative; width:31.343%; height:320px; background:#FFF; border-radius:6px;}
.Mcalendar #calendar {width:100%; border-collapse:collapse; height:320px; }
.Mcalendar #calendar table {width:100%;}
.Mcalendar #calendar th.Tdate {text-align:center; vertical-align : bottom; background-color: #FFF; padding:6px 0 8px 0; border-radius:6px 6px 0 0; border-bottom:none; color:#333; font-size:16px;}
.Mcalendar #calendar th {text-align: center; background-color: #f7f9fb; padding:10px; border-bottom:2px solid #FFF; color:#666;}
.Mcalendar #calendar th.left{border-radius:20px 0 0 20px;}
.Mcalendar #calendar th.right{border-radius:0 20px 20px 0;}
.Mcalendar #calendar td {height:20px; text-align:center; padding:10px;}
.Mcalendar #calendar td:hover { background-color: #f9f9f9; border-radius:20px;}
.Mcalendar #calendar .current-month {font-weight: bold;}
.Mcalendar #calendar .today {background-color: #f9f9f9; border-radius:20px; }
.Mcalendar #calendar .prev-month {color: #a9a9a9;}
.Mcalendar #calendar .next-month { color: #a9a9a9;}
.Mcalendar #calendar .saturday { color: #1a9bfe;}
.Mcalendar #calendar .sunday { color: #ff2a00;}



/*= 메인 풋터 (아카데미업 알림 공지, 고객지원 정보)
------------------------------------------------------------------------------------------------------------------------- */

.Mfooter {position:fixed; width:100%; height:40px; display:flex; align-items:center; background:#e7ecef; padding:0 30px; color:#b0b9c3; bottom:0;  font-size:14px;  min-width:1024px; } /* 최소 화면 넓이 */
.Mfooter .Notice {width:50%; padding-left:30px !important; overflow:hidden; background:url("../images/icon/footer_icon01.png")no-repeat left top 2px; padding:2px 0; text-align:left;}
.Mfooter .Notice .teo {width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; letter-spacing:-0.5px;}
.Mfooter .Notice a {font-family:'Noto Sans KR'; color:#333;}
.Mfooter .Notice a:hover {color:#ff6600;}
.Mfooter .Support {display:flex; align-items:center; height:100%; position:absolute; right:0px; background:#192a3c; padding:0 50px 0 40px; border-top-left-radius:14px;}
.Mfooter .Support .PhoneNum {padding:2px 8px 2px 24px; font-weight:bold; letter-spacing:-0.5px;  background:url("../images/icon/footer_icon02.png")no-repeat left center;}
.Mfooter .Support .PhoneTime {position:relative; display:block; padding-left:8px;}
.Mfooter .Support .PhoneTime::after {display:block; content:''; position:absolute; width:1px; height:10px;  top:5px; left:0; background:#6a717e;}


/*= 가변형 미디어쿼리
------------------------------------------------------------------------------------------------------------------------- */

/* *********** 미디어쿼리 2560~ *********** */
@media only screen and (max-width:2560px) and
(min-width:2400px) {

    /* 메인 페이지 콘텐츠 내용 박스 */
    #Main_contA {width:80%; margin-top:4%; padding-bottom:60px; transition: all 0.2s linear;}
    #Main_contB {width:80%; padding-bottom:40px; transition: all 0.2s linear;}

}

/* *********** 미디어쿼리 1440 *********** */
@media all and (max-width:1440px){
   
    /* 메인 페이지 콘텐츠 내용 박스 */
    #Main_contA {width:94%; margin-top:3%; padding-bottom:30px; transition: all 0.2s linear;}
    #Main_contB {width:94%; padding-bottom:40px; transition: all 0.2s linear;}

	/* 박스 사이즈 */
    .Mstudent {width:32%;margin-right:2%;} /* 학생현황 */
    .Mattend {width:32%; margin-right:2%;} /* 출결현황 */
    .Mreceipt {width:32%;}  /* 수납현황 */
    .Mcounsel {width:32%; margin-right:2%;} /* 상담관리 */
    .Mcounsel .Cwrap .counBox > li .list_photo .photo {margin-left:14px;}
    .Mcounsel .Cwrap .counBox > li .name {width:60px;}
    .Mcounsel .Cwrap .counBox > li .sbuject {width:40%;}
    .Mcounsel .Cwrap .counBox > li .dtype {width:100px;}
	.Mrevex {width:32%; margin-right:2%;} /* 수입지출 */
	.Mschedule {width:32%;} /* 일정관리 */

}

/* *********** 미디어쿼리 1280 *********** */
@media all and (max-width:1280px){

    /* 수납현황 */
    .Mreceipt .Rwrap .ListBox .List > li {font-size:13px;}

    /* 상담관리 */
    .Mcounsel .Cwrap .counBox > li .list_photo .photo {margin-left:12px;}
    .Mcounsel .Cwrap .counBox > li .dtype {width:90px;}

}