/* 서브 -----------------------------------------------------------------------------------------------*/

/*서브콘텐츠영역*/
.sub_wrap{margin-top: 70px; padding-bottom: 30px}


/*서브비주얼*/
.sub_visual{height: 200px; background: url('/resources/toctocmath/userImages/sub/sub_visual-6aa9fad75205796499c4c89eed3ece46.jpg') no-repeat; background-size:cover}
.sub_visual ul{display: flex; flex-flow: row nowrap; justify-content: space-between; max-width: 1400px; margin: 0 auto; height: 100%}
.sub_visual ul li:first-child {max-width: 415px; position: relative}
.sub_visual ul li:first-child button{width: 150px; background: #da3d24; font-size: 15px; line-height: 33px; height: 30px; padding: 0 10px; border-radius: 20px; font-family: 'Gsans'; color: #fff; margin-bottom: 10px; cursor: pointer; position: absolute; top:20px; left: 20px}

.sub_visual ul li:last-child{display: flex; flex-flow: column nowrap; align-self: center; font-size: 30px; color: #fff; letter-spacing: -1px; text-shadow:0 0 3px #1d0e6f; text-align: right}
.sub_visual ul li:last-child .class_name{order: 2}
.sub_visual ul li:last-child .class_bg{background: rgba(0, 0, 0, 75%); display: inline-block; padding: 5px 10px 0 10px; border-radius: 5px; margin-bottom: 3px}
.sub_visual ul li:last-child .class_name_btn{order: 1}
.sub_visual ul li:last-child .class_name_btn button{background: #da3d24; font-size: 12px; line-height: 29px; height: 25px; padding: 0 10px; border-radius: 20px; font-family: 'Gsans'; color: #fff; margin-bottom: 10px; cursor: pointer}
.sub_visual ul li:last-child p{order: 3; font-size: 13px; line-height: 25px; letter-spacing: -0.5px}
.sub_visual ul li:last-child p>span.home_bg{background: rgba(0, 0, 0, 75%); padding: 5px 10px 2px 10px; border-radius: 5px}
.sub_visual ul li:last-child p.class{order: 3; font-size: 16px; line-height: 22px; letter-spacing: -0.5px; margin-top: 10px}
.sub_visual ul li:last-child p img{margin: -2px 5px 0 0}




/*서브비주얼-진단하기*/
.sub_visual2{height: 280px; background: url('/resources/toctocmath/userImages/sub/sub_visual-6aa9fad75205796499c4c89eed3ece46.jpg') no-repeat; background-size:cover}
.sub_visual2 ul{height: 280px; display: flex; flex-flow: row nowrap; justify-content: center}
.sub_visual2 ul li:first-child{width: auto; display: flex; align-items: flex-end}

.sub_visual2 ul li:last-child{width: auto; display: flex; flex-flow: column nowrap;  align-items:flex-start; padding-top: 80px}
.sub_visual2 ul li:last-child p{color: #fff; display: block}
.sub_visual2 ul li:last-child p:nth-child(1){font-size: 26px; font-weight: 700}
.sub_visual2 ul li:last-child p:nth-child(2){font-size: 20px; letter-spacing: -1px}
.sub_visual2 ul li:last-child p:nth-child(3){font-size: 16px; margin-top: 20px}
.sub_visual2 ul li:last-child p:nth-child(3) span{background: #322192; color: #feef00; display: inline-block; padding: 2px 5px 0 5px}

.line_break{display: none}


/*서브내용 영역*/
.sub_content{max-width: 1400px; margin: 30px auto 0 auto}

h3{color: #333; font-weight: 700; font-size: 30px; height: 35px; line-height: 37px; margin-bottom: 10px}
h4{width: 100%; background: #eaeeff; color: #4d399c; font-size: 25px; height: 60px; border-radius: 10px 10px 0 0; text-align: center; line-height: 65px}

h4.h4_type2{border-top: 1px solid #c1c5e1; border-bottom: 1px solid #c1c5e1; margin-bottom: 20px; border-radius: 0; padding: 0 20px; box-sizing: content-box; margin-left:-20px; margin-top: 20px}
h5{font-size: 17px; color: #333; line-height: 25px}
h5 span{color: #004cca}

/*박스 스타일*/
.box{border: 1px solid #c1c5e1; border-radius: 10px}


/*수업하기-우리학급구성원*/
.class_member{display: flex; flex-flow: row nowrap}
.class_member>div{width: 100%; min-height: 500px}
.class_member .class_member_top{display: flex; flex-flow: row nowrap; justify-content: space-between; border-bottom: 1px solid #ddd; line-height: 50px; margin:20px 30px 30px 30px}
.class_member .class_member_top p{font-size: 18px; color: #333}
.class_member .class_member_top p span{ font-weight: 700; margin: 0 3px 0 10px}
.class_member .class_member_top p span.count_t{color: #23a600}
.class_member .class_member_top p span.count_s{color: #0081d8}


.class_member_profile{display: flex; flex-flow: row wrap; margin: 0 30px 30px 30px}
.class_member_profile .title_t{width: 85px; padding-right:10px; font-size: 20px; color: #23a600; text-align: left; padding-top: 50px}
.class_member_profile .title_s{width: 85px; padding-right:10px; font-size: 20px; color: #0081d8; text-align: left; padding-top: 50px}


/*학급관리*/
.class_member2{display: flex; flex-flow: row nowrap}
.class_member2>div{width: 100%; min-height: 500px}
.class_member2>div>div{padding: 20px}



/*프로필사진*/
.profile_list {flex: 1; display: flex; flex-flow: row wrap}
.profile {display: flex; flex-flow: column; align-items: center; width: 100px; margin: 0 10px 20px 10px; position: relative}
.profile > .profile_img {
	margin-bottom: 8px;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	border: 1px solid #749fe1;
	display: flex;
	justify-content: center;
	align-items: center;
	/*padding: 10px;*/
	/*position: relative;*/
	background: #fff;
	overflow: hidden
}
.profile.teacher > .profile_img {border-color: #71c75a}
.profile > .profile_img .mine {
	position: absolute;
    right: 0;
    bottom: 30px;
    display: inline-flex;
    font-size: 14px;
    width: 25px;
    height: 25px;
	padding-top: 2px;
	box-sizing: border-box;
    background: #23a600;
    color: #fff;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
	z-index: 10000
}
.profile > .profile_img > img {width: 100%; height: 100%}
.profile > .name {font-size: 15px; color: #333; text-align: center}




/*진단하기*/
.diagnose{display: flex; flex-flow: row nowrap; justify-content: space-between}
.diagnose>div:first-child{flex-basis: 905px; margin-right: 30px}
.diagnose>div:last-child{flex-basis: 465px}
.diagnose>div>div{padding: 20px}


/* 진단하기 탭 */
.tab_diagnose{width: 100%; display: flex; flex-flow: row nowrap; color: #333}
.tab_diagnose li{width:33.3%}
.tab_diagnose li a{padding:10px 0; height: 60px; padding-bottom: 6px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; border: 1px solid #ddd; border-right: 0; transition: .2s; font-size: 18px}
.tab_diagnose li:last-of-type a{border-right: 1px solid #ddd}
.tab_diagnose li:nth-child(1) a.on{background: #5743cb; border: 1px solid #5743cb; color: #fff}
.tab_diagnose li:nth-child(2) a.on{background: #0080d1; border: 1px solid #0080d1; color: #fff}
.tab_diagnose li:nth-child(3) a.on{background: #599e00; border: 1px solid #599e00; color: #fff}



/*진단활동 셀렉트박스 영역*/
.select_wrap{padding: 20px 0 5px 0}
.select_wrap select{margin-right: 5px}



/*진단활동 박스내용*/
.diagnose_box{display: flex; flex-flow: row wrap; justify-content: space-between}
.diagnose_box>li{width:49%; margin-top: 15px; border: 1px solid #ddd; min-height: 50px; background: #f4f4f4}
.diagnose_box>li.full{width: 100%}
.diagnose_box>li>div{display: flex; flex-flow: row nowrap}
.diagnose_box>li>div>p{display: flex; font-size: 12px; color: #fff; width: 75px; height: auto; line-height: 35px; padding-top:2px;  text-align: center; align-items: center; justify-content: center}
.diagnose_box>li>div>p.bg_purple{background: #5743cb}
.diagnose_box>li>div>p.bg_green{background: #599e00}
.diagnose_box>li>div>p.bg_blue{background: #0080d1}
.diagnose_box>li>div>span{display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; font-size: 15px; color: #333; min-height: 30px; padding: 3px 10px; border-bottom: 1px solid #ddd; background: #fff; width:calc(100% - 75px)}
.diagnose_box>li>div>span>span{color: #0048ff; display: inline-block}

.diagnose_box>li>ul{display: flex; flex-flow:row nowrap; justify-content: space-between; align-items: center; min-height: 95px}
.diagnose_box>li>ul li:first-child{color: #333; font-size: 18px; font-weight: 700; padding: 15px}
.diagnose_box>li>ul li:last-child{display: flex; flex-flow: column nowrap; padding: 13px 15px 13px 0}
.diagnose_box>li>ul li:last-child button{width: 110px; margin: 2px 0}




/*평가종료*/
.finish{background: #eaeeff; padding: 20px; text-align: center; color: #333; font-size: 15px; line-height: 20px}



/*학생관리*/
.student_manage{display: flex; flex-flow: row nowrap; justify-content: space-between}
.student_manage>div:first-child{flex-basis: 970px; margin-right: 30px}
.student_manage>div:last-child{flex-basis: 400px}
.student_manage>div>div{padding: 20px}


/*학생관리- 학급초대장*/
.invitation_txt{text-align: center; font-size: 16px; color: #333; padding:30px 20px 20px; background: #efefef; margin-bottom: 10px; word-break: keep-all}
.invitation_txt span{color: #5743cb; font-size: 20px}

.invitation_btn{display: flex; flex-flow: row nowrap; justify-content: space-between}
/*.invitation_btn button{min-width: 170px}*/

.invite_url {display: flex;	padding: 5px 10px; height: auto; line-height: 20px; width: 100%; border: 2px solid #8270c8; background: #fff;
font-size: 14px; margin: 10px 0; border-radius: 8px; user-select: all; overflow-wrap: anywhere}



/*학습 활동 현황*/
.activity_record{display: flex; flex-flow: row nowrap; justify-content: space-between}/*선생님*/
.activity_record>div:first-child{flex-basis: 250px; margin-right: 30px; background: #fff}
.activity_record>div:first-child .scroll_area{height:auto}
.activity_record>div:last-child{flex-basis: 1120px}
.activity_record>div>div:nth-child(2){padding: 20px}
.activity_record>div>div.area{padding: 20px}

.activity_record2{display: flex; flex-flow: row nowrap}/*학생*/
.activity_record2>div{width: 100%!important}
.activity_record2>div>div{padding: 20px}

/*학습 활동 현황-학급리스트*/
.activity_record .class_list li{margin-bottom: 5px}
.activity_record .class_list li a{display: block; height: 30px; line-height: 32px; font-size: 14px; color: #333;  border-radius: 30px; background: #f6f6ff; border: 1px solid #dbdef1; padding: 0 15px}
.activity_record .class_list li a:hover{background: #d5d5f0; border: 1px solid #c5c5e6}
.activity_record .class_list li a.on{ color: #fff; background: #5743cb; border: 1px solid #5743cb}
.activity_record .class_list li a:hover.on{ color: #fff600; background: #5743cb; border: 1px solid #5743cb}
.activity_record .class_list a{margin-bottom: 5px}
.activity_record .class_list a li{display: block; height: 30px; line-height: 32px; font-size: 14px; color: #333;  border-radius: 30px; background: #f6f6ff; border: 1px solid #dbdef1; padding: 0 15px}
.activity_record .class_list a li:hover{background: #d5d5f0; border: 1px solid #c5c5e6}
.activity_record .class_list a li.on{ color: #fff; background: #5743cb; border: 1px solid #5743cb}
.activity_record .class_list a li:hover.on{ color: #fff600; background: #5743cb; border: 1px solid #5743cb}


/*학습 활동 현황-출석현황*/
.calendar_wrap{display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center}
.calendar_wrap li{width: 50%; margin: 0 20px}
.calendar_wrap {position: relative; animation: show-up-play-time 2s ease}
@keyframes show-up-play-time {from{ top: 50px; opacity: 0; } to {top: 0; opacity: 1}
}

/*학습 활동 현황-기간선택*/
.date_choice_box{display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin-bottom: 10px}
.date_choice_box span{margin: 0 5px}


/*학습 활동 현황-달력*/
.calendar{width: 100%; table-layout: fixed; border-top:2px solid #5743cb}
.calendar th{font-size: 14px; background: #eef1fe; color: #333; border: 1px solid #b4bad6; padding:2px 2px 0 2px; line-height: 28px; text-align: center}
.calendar th:first-child, .calendar td:first-child a{color: #d92223}
.calendar th:last-child, .calendar td:last-child a{color: #165cdb}
.calendar tr:first-child td{border-top:none}
.calendar td{border: 1px solid #c4c4c4; position: relative}
.calendar td a{display: block; padding:5px 2px; height: 25px; font-size: 12px; color: #666; text-align: center}
.calendar td a.today{border: 2px solid #5743cb; color: #5743cb; font-weight: 700 /* width:20px; height:20px; border-radius: 10px; background: #5743cb; color: #fff;  margin: 0 auto*/}
.calendar td a:hover{background: #efefef!important}
.calendar td a.attend_5{background: #f5df93}
.calendar td a.attend_3{background: #bad9f4}
.calendar td a.attend_1{background: #b7e2ba}
.calendar td a.next_prev_month{color: #c3c3c3!important; background: #f9f9f9}
.calendar td:first-child a.next_prev_month{color: #f8ada7!important}
.calendar td:last-child a.next_prev_month{color: #a7c6f8!important}

.calendar td.highlight a{background: #5743cb!important; color: #fff!important}
.calendar td.highlight a:hover {background: #5743cb!important}



/*학습 활동 현황-출석횟수*/
.calendar_attendance{display: flex; flex-flow: row nowrap; justify-content: center; margin-top: 10px}
.calendar_attendance li{width: auto; font-size: 12px; color: #666; height: 30px; line-height: 33px;  position: relative; padding: 0 0 0 25px}
.calendar_attendance li:nth-child(1)::before{content: ''; width: 20px; height: 20px; background: #f5df93; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 4px}
.calendar_attendance li:nth-child(2)::before{content: ''; width: 20px; height: 20px; background: #bad9f4; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 4px}
.calendar_attendance li:nth-child(3)::before{content: ''; width: 20px; height: 20px; background: #b7e2ba; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 4px}



/*학습 활동 현황-총 학습시간*/
.total_play_time {position: relative; display: flex; align-items: center; justify-content: center}

.total_play_time .bg {
	width: 330px;
	height: 330px;
	border-radius: 50%;
	background: transparent linear-gradient(90deg, #72D472 0%, #41A745 100%) 10% 0% no-repeat padding-box;
	position: relative;
	top: 0;
	left: 0;
	opacity: 1;
	animation: show-up-play-time 2s ease
}

.total_play_time .text_wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
    height: 80%;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.total_play_time .txt_total {color: #333; font-size: 18px;	display: flex;	flex-direction: column;	align-items: center}
.total_play_time .txt_total > span {color: #43A947;	font-size: 36px; font-weight: bold; margin: 15px 0}

/* 학습활동현황 학습패턴 그래프 */
.area .graph-wrap {
	/* flex: 1; */
	/* align-self: stretch; */
	/* margin-top: auto; */
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: center; */
	margin: 100px 10%;
	margin-bottom: 140px;
	position: relative;
    --offset-left: 80px;
	user-select: none;
	min-height: 290px;
	opacity: 1;
	animation: show-up 2s ease;
}

@keyframes show-up {
	from {opacity: 0; top: 50px;} to {opacity: 1; top: 0;}
}
.area .graph-wrap ul {
	position: absolute;
}

.graph-wrap ul.percentage {
	top: 0;
    left: 0;
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.graph-wrap ul.percentage > li {
	width: var(--offset-left);
	color: #8B8B8B;
	font-size: 15px;
	font-family: NanumGothic;
	display: flex;
	align-items: center;
}
.graph-wrap ul.percentage > li::after {
	content: '';
	position: absolute;
	right: 0;
	width: calc(100% - var(--offset-left));
	height: 2px;
	background-color: #F5F5F5;
}

.area .graph-wrap ul.chapters {
	left: var(--offset-left);
	bottom: 0;
	width: calc(100% - var(--offset-left));
	height: 100%;
	display: flex;
	justify-content: space-around;
}
.area .graph-wrap ul.chapters > li {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	--color: #819FFF;
	--value: 0;
}

.area .graph-wrap ul.chapters > li:nth-child(1),
.overall-results ul.chapters > li:nth-child(1) { --color: #819FFF; }
.area .graph-wrap ul.chapters > li:nth-child(2),
.overall-results ul.chapters > li:nth-child(2) { --color: #5ADC66; }
.area .graph-wrap ul.chapters > li:nth-child(3),
.overall-results ul.chapters > li:nth-child(3) { --color: #31D6DC; }
.area .graph-wrap ul.chapters > li:nth-child(4),
.overall-results ul.chapters > li:nth-child(4) { --color: #FFC72E; }
.area .graph-wrap ul.chapters > li:nth-child(5),
.overall-results ul.chapters > li:nth-child(5) { --color: #FF94C9; }
.area .graph-wrap ul.chapters > li:nth-child(6),
.overall-results ul.chapters > li:nth-child(6) { --color: #9AC239; }
.area .graph-wrap ul.chapters > li:nth-child(7),
.overall-results ul.chapters > li:nth-child(7) { --color: #FF8B93; }
.area .graph-wrap ul.chapters > li:nth-child(8),
.overall-results ul.chapters > li:nth-child(8) { --color: #C078F1; }

.area .graph-wrap ul.chapters > li .bar-wrap {
	flex: 1;
	width: 30px;
	background-color: transparent;
	position: relative;
	margin: 8px 0;
}
.area .graph-wrap ul.chapters > li.active .bar-wrap {
	background-color: #F5F5F5;
}
.area .graph-wrap ul.chapters > li .bar-wrap::after {
	content: '';
	width: 50%;
	height: calc(1% * var(--value));
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateX(50%);
	background-color: var(--color);
	border-radius: 20px 20px 0 0;
	transition: height 2s ease;
}

.area .graph-wrap ul.chapters > li .bar-wrap::before {
    content: '';
	position: absolute;
	top: -30px;
	left: 0;
	color: var(--color);
	font-size: 15px;
	font-family: NanumGothic;
	font-weight: bold;
	white-space: nowrap;
}
.area .graph-wrap ul.chapters > li.active .bar-wrap::before {
	counter-reset: value var(--value);
    content: counter(value) '%';
}

.area .graph-wrap ul.chapters > li .chapter {
	position: absolute;
	bottom: -50px;
	background-color: var(--color);
	width: 79px;
	height: 34px;
	color: #fff;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-family: NanumGothic;
}

.area .graph-wrap ul.chapters > li .chapter::after {
	content: attr(data-title);
	position: absolute;
	bottom: -30px;
	color: #2C2C2C;
	font-size: 16px;
	font-weight: bold;
	font-family: NanumGothic;
	white-space: nowrap;
}

/*검색박스*/
.search_box{padding: 20px; background: #f0f0f0; text-align: center; border-radius: 5px}
.search_box ul{display: flex; flex-flow: row nowrap; margin: 0 auto}
.search_box ul li:first-child{width: 80%; padding-right: 10px; box-sizing: border-box}
.search_box ul li:last-child{width: 20%}

.search_box2{padding: 20px; background: #f0f0f0;; text-align: center; border-radius: 5px}
.search_box2 ul{display: flex; flex-flow: row nowrap; justify-content: center}
.search_box2 ul li{margin-right: 5px}

.search_box3{padding: 20px; background: #f0f0f0; text-align: center; border-radius: 5px}
.search_box3 ul{display: flex; flex-flow: column nowrap}
.search_box3 ul li{text-align: left; margin: 4px 0}
.search_box3 ul li label{width: 90px; margin-right: 10px;position: relative;padding-left: 10px;font-size: 15px}
.search_box3 ul li label::before{content: '';position: absolute;top: 5px;left: 0;display: inline-block;width: 4px;height: 4px;background-color: #4d399c;border-radius: 10px;margin-right: 5px;}
.search_box3 ul li input{width: calc(60% - 140px);}
.search_box3 ul li button.upload{width:120px}
.search_box3 .search_txt{margin:15px 0 0 110px}
.search_box3 .search_txt li{font-size: 13px}
.search_box3 .search_txt li span{color: #ff0000; font-size: 15px}
.search_box3 .search_txt li a{color: #0072c9; font-size: 15px; text-decoration: underline}

.search_box4{padding: 15px; background: #f0f0f0;; text-align: center; border-radius: 5px}
.search_box4 ul{display: flex; flex-flow: row wrap; justify-content: center}
.search_box4 ul li{margin: 5px 5px 5px 0}
.search_box4 ul li input{width: 150px}
.search_box4 ul li input.m_mgb5{margin-bottom: 0}

/*부가설명*/
.txt_note{display: flex; flex-flow: row nowrap; justify-content: space-between; margin-bottom: 5px}


/*달력선택*/
.month_selector{display: flex; flex-flow: row nowrap; justify-content: center; padding: 20px 20px 16px 20px; background: #f0f0f0; border-radius: 5px}
.month_selector a{display: inline-block; min-width: 80px; height: 40px; line-height: 43px; color: #666; font-size: 20px; font-weight: 700; border: 1px solid #ddd; border-radius: 5px; margin: 0 10px; text-align: center}
.month_selector a.prev{background: #fff url('/resources/toctocmath/userImages/sub/arrow_left-275d6fd943dcebbc793cd1f1c5fbf62d.png') 10px 53% no-repeat; padding: 0 10px 0 20px; background-size: 10px}
.month_selector a.next{background: #fff url('/resources/toctocmath/userImages/sub/arrow_right-a27417ef09841a61d6981edaccb48ef6.png') 59px 53% no-repeat;padding: 0 20px 0 10px; background-size: 10px}
.month_selector .current{font-size: 25px; font-weight: 700; color: #333; line-height: 45px; padding: 0 20px}


/* 표 상단 영역 */
.table_top{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 5px; gap: 5px;}
.table_top span{font-size: 16px; color: #666;  display: flex; align-items: center;}
.table_top span i{color: #d04000; font-style: normal; font-weight: 800; margin: 0 5px}
/* .table_top > div{text-align: right; flex-grow: 1; margin-bottom: 5px}
.table_top > div button{margin-left: 5px} */
.table_top > div {
    text-align: right;
    display: flex;
    gap: 5px;
}
.table_top > div button{text-align: center;}

.table_top2{width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between}
.table_top2 span{font-size: 16px; color: #666;  display: inline-block; line-height: 45px}
.table_top2 > div{text-align: right; flex-grow: 1; margin-bottom: 5px}
.table_top2 > div button{margin-left: 5px}



/*표 리스트*/
.tbl_list{width: 100%; border-top: 2px solid #5743cb; border-bottom:1px solid #958ebf; text-align: center}
.tbl_list th{font-size: 18px; background: #eef1fe; color: #4d399c; font-weight: normal; border-left: 1px solid #b4bad6; border-bottom: 1px solid #b4bad6; line-height: 20px; padding: 8px 5px 3px 5px; height: 50px}
.tbl_list th:first-child, .tbl_list td:first-child{border-left:none}
.tbl_list td{line-height: 16px; padding: 7px 10px 5px 10px; height: 40px; font-size: 15px; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666}
.tbl_list td a{color: #0081d8; text-decoration: underline}
.tbl_list .mob_th{display:none}


.tbl_list2{width: 100%; text-align: center}
.tbl_list2 th{font-size: 18px; background: #eef1fe; color: #4d399c; font-weight: normal; border-left: 1px solid #b4bad6; border-bottom: 1px solid #b4bad6; line-height: 20px; padding: 8px 5px 3px 5px; height: 50px}
.tbl_list2 th:first-child{border-left:1px solid #eef1fe}
.tbl_list2 td:first-child{border-left:none}
.tbl_list2 td{line-height: 16px; padding: 7px 10px 5px 10px; height: 40px; font-size: 15px; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666}
.tbl_list2 td a{color: #0081d8; text-decoration: underline}
.tbl_list2 .mob_th{display:none}


.tbl_list3{width: 100%; border-top: 2px solid #5743cb; border-bottom:1px solid #958ebf; text-align: center}
.tbl_list3 th{font-size: 18px; background: #eef1fe; color: #4d399c; font-weight: normal; border-left: 1px solid #b4bad6; border-bottom: 1px solid #b4bad6; line-height: 20px; padding: 8px 5px 3px 5px; height: 50px}
.tbl_list3 th:first-child, .tbl_list3 td:first-child{border-left:none}
.tbl_list3 td{line-height: 16px; padding: 7px 10px 5px 10px; height: 40px; font-size: 15px; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666}
.tbl_list3 td a{color: #0081d8; text-decoration: underline}
.tbl_list3 .mob_th{display:none}
.tbl_list3 td p.icon_box{display: inline-block; height: 25px; line-height: 28px; font-size: 14px; color: #fff; border-radius: 5px; text-align: center; width: 50px}

.tbl_list3 td p.icon_box.curriculum{background: #278be2}/*교과*/
.tbl_list3 td p.icon_box.adventure{background: #aab905}/*탐험*/
.tbl_list3 td p.icon_box.recommend{background: #d94597}/*추천*/
.tbl_list3 td p.icon_box.webexam{background: #0CB2B9}/*단원*/
.tbl_list3 td p.icon_box.exam{background: #9349A1}/*수시*/
.tbl_list3 td p.icon_box.occasion{background: #368d40}/*차시*/
.tbl_list3 td p.icon_box.basiccalculate{background: #ea7400}/*진단*/
.tbl_list3 td p.icon_box.numbersense{background: #ea7400}/*진단*/
.tbl_list3 td p.icon_box.diagnosis{background: #ea7400}/*진단*/
.tbl_list3 td p.icon_box.achievement{background: #d92223}/*핵심*/


.tbl_list4{width: 100%; border-top: 2px solid #5743cb; border-bottom:1px solid #958ebf; text-align: center}
.tbl_list4 th{font-size: 18px; background: #eef1fe; color: #4d399c; font-weight: normal; border-left: 1px solid #b4bad6; border-bottom: 1px solid #b4bad6; line-height: 20px; padding: 8px 5px 3px 5px; height: 50px}
.tbl_list4 th:first-child, .tbl_list4 td:first-child{border-left:none}
.tbl_list4 td{line-height: 16px; padding: 7px 10px 5px 10px; height: 40px; font-size: 15px; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666}
.tbl_list4 td:nth-child(1) input{width: 80px; text-align: center}
.tbl_list4 td:nth-child(2) input{width: 100px; text-align: center}
.tbl_list4 td:nth-child(3) input{width: 100%}
.tbl_list4 td:nth-child(4) input{width: calc(100% - 80px); margin-right: 5px}
.tbl_list4 td:nth-child(4) p button{width: 70px}
.tbl_list4 td:nth-child(4) p{display: inline}
.tbl_list4 .mob_th{display:none}


/*게시물없음*/
.no_content{height: 200px!important; text-align: center!important; padding: 0!important}


/*필수&중요항목*/
.essential {font-size:17px; color:#ea5210; display: inline-block; padding: 0 5px}
.essential:before{ content:'*'; position: relative; top:4px}
.essential span {overflow:hidden;width:0;height:0;font-size:0;text-indent:-9999em;visibility:hidden}


/*줄바꿈*/
br.break_m{display:none}


/*진단분석_평가결과 검색바*/
.class_selector{display: flex; flex-flow: row nowrap; justify-content: space-between; line-height: 40px; margin-top: 20px; background: #efefef; border-radius: 5px; padding: 10px}
.class_selector>h5{font-size: 19px; color: #333; height: 40px; line-height: 45px}
.class_selector>div>select{margin-right: 5px}


/*진단분석_평가결과 리스트*/
.examination {margin-top: 10px; border-top:1px solid #5743cb; border-bottom:1px solid #5743cb}

.exam_list>li:first-child{display: flex; flex-flow: row nowrap ;border-top:1px solid #5743cb}
.exam_list li div.txt01{width: 100px; background: #8387ff; color: #fff; font-size: 17px; text-align: left; padding: 7px 10px 5px 10px; display: flex; align-items: center; justify-content: center}
.exam_list li ul.list_progres{width: calc(100% - 100px)}
.exam_list li ul.list_progres>li{width: 100%; display: flex; flex-flow: row nowrap}

.exam_list li div.txt02{width: 250px; height: auto; background: #eef1fe; color: #4d399c; font-size: 15px; padding: 10px; display: flex; flex-flow: column nowrap; justify-content:center; border-bottom: 1px solid #c4c5f0}
.exam_list li div.txt02>p{display: inline-block; color: #fff; font-size: 12px; background: #333; padding: 2px 5px 0 5px; width: 90px; text-align: center; border-radius: 10px; margin-bottom: 5px}
.exam_list li div.total{width: 250px; height: auto; background: #5743cb; color: #fff; font-size: 15px; padding: 10px; display: flex; flex-flow: column nowrap; justify-content:center; border-bottom: 1px solid #c4c5f0}
.exam_list li div.progres{width: calc(100% - 250px); display: flex; flex-flow: column nowrap; justify-content: center; padding: 5px 10px; border-bottom:1px solid #ddd; font-size: 13px; color: #888}
.no_bor{border: none}


.exam_list li div.progres.bg{background: #d9e0fd} 

.list_progres>li:last-child>div{border-bottom: none}


/*신호등*/
.light{border-bottom: 1px solid #ddd}
.light_wrap{background: #333; border-radius: 10px; padding: 10px; height: 50px; width: 150px; margin: 5px 10px; display: flex; flex-flow: row nowrap; justify-content: center}
.light_wrap li{width: 30px; height: 30px; border-radius: 50%; background: #ddd; margin: 0 5px}
.light_wrap li.green{background: #00be0a}
.light_wrap li.yellow{background: #ffa800}
.light_wrap li.red{background: #E42626}
.exam_list li div.progres.green{color: #00be0a!important; font-size: 16px}
.exam_list li div.progres.yellow{color: #ffa800!important; font-size: 16px}
.exam_list li div.progres.red{color: #E42626!important; font-size: 16px}
.exam_list li div.progres.gray{color: #666!important; font-size: 16px}


/* 차트 아이콘:기본_보통_심화*/
.chart_icon01{display: flex; flex-flow: row nowrap; margin-top: 15px}
.chart_icon01 li{width: auto; font-size: 12px; color: #666; height: 30px; line-height: 33px;  position: relative; padding: 0 10px 0 25px}
.chart_icon01 li:nth-child(1)::before{content: ''; width: 20px; height: 20px; background: #3092dd; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 4px}
.chart_icon01 li:nth-child(2)::before{content: ''; width: 20px; height: 20px; background: #5CCF5C; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 4px}
.chart_icon01 li:nth-child(3)::before{content: ''; width: 20px; height: 20px; background: #FFBC20; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 4px}


/* 차트 아이콘:정답_오답*/
.chart_icon02{display: flex; flex-flow: row nowrap; margin-top: 15px}
.chart_icon02 li{width: auto; font-size: 12px; color: #666; height: 30px; line-height: 33px;  padding: 0 10px 0 0; display: flex; flex-flow: row nowrap}
.chart_icon02 li>div{margin-right: 5px}



/* 차트 아이콘:잘해요~보충이필요해요*/
.chart_icon03{display: flex; flex-flow: row nowrap; margin-top: 15px}
.chart_icon03 li{width: auto; font-size: 12px; color: #666; height: 30px; line-height: 33px;  position: relative; padding: 0 10px 0 25px}
.chart_icon03 li:nth-child(1)::before{content: ''; width: 20px; height: 20px; background: #3092dd; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 4px}
.chart_icon03 li:nth-child(2)::before{content: ''; width: 20px; height: 20px; background: #5CCF5C; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 4px}
.chart_icon03 li:nth-child(3)::before{content: ''; width: 20px; height: 20px; background: #FFBC20; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 4px}
.chart_icon03 li:nth-child(4)::before{content: ''; width: 20px; height: 20px; background: #FF6889; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 4px}

/* 테이블 태그 안에 정렬, 학급전체 그래프 크기 반영을 위한 display: inline-block 삭제 */
.chart_step01{width: 140px; height: 30px; line-height: 33px; font-size: 15px; color: #fff; text-align: center; background: #3092dd; border-radius: 15px}
.chart_step02{width: 140px; height: 30px; line-height: 33px; font-size: 15px; color: #fff; text-align: center; background: #5CCF5C; border-radius: 15px}
.chart_step03{width: 140px; height: 30px; line-height: 33px; font-size: 15px; color: #fff; text-align: center; background: #FFBC20; border-radius: 15px}
.chart_step04{width: 140px; height: 30px; line-height: 33px; font-size: 15px; color: #fff; text-align: center; background: #FF6889; border-radius: 15px}


/*정답 프로그레스바*/
.answer_progressbar{display: flex; flex-flow: row nowrap}
.progress_bar{width: 100%; max-width: 800px; height: 10px; border-radius: 10px; background: #efefef; margin-right: 10px; margin: auto 10px auto 0}
.progress_bar>p{height:10px; color: #fff; text-align: center; border-radius: 10px}
.progress_bar>p.bg_blue{background: #3092dd}
.progress_bar>p.bg_yellow{background: #FFBC20}
.progress_bar>p.bg_green{background: #5CCF5C}
.progress_bar>p.bg_red{background: #FF6889}
.answer_txt{color: #333; min-width: 120px; height: 30px; line-height: 32px; text-align: right}
.answer_txt>b{font-weight: 700}


/* 정답&오답 아이콘*/
.answer{display: flex; flex-flow: row wrap}
.x{
	width: 25px;
    height: 25px;
    background-image: url('/resources/toctocmath/userImages/sub/x-b344c24292f09588ad1124bd41c3ce7e.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    align-self: center;
	margin: 2px
}

.o{
	width: 25px;
    height: 25px;
    background-image: url('/resources/toctocmath/userImages/sub/o-fdc2ef0b0618a4261787329e8251c5cc.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    align-self: center;
	margin: 2px
}
.size_50{width: 50px; height: 50px}


/*진단분석_평가결과 종합진단*/
.synthesis{padding: 10px 0}
.synthesis ul{display: flex; flex-flow: row nowrap}
.synthesis ul li:last-child{display: inline-block; font-size: 15px; padding: 2px 0 0 10px}
.synthesis ul li span.step01{font-size: 25px; color: #3092dd}
.synthesis ul li span.step02{font-size: 25px; color: #03ac03}
.synthesis ul li span.step03{font-size: 25px; color: #ee8100}
.synthesis ul li span.step04{font-size: 25px; color: #FF6889}
.synthesis ul li span.step04{font-size: 25px; color: #FF6889}


/*진단분석(선생님) - 출력*/
.print_wrap{width: 100%; background: #5743cb; border-radius: 10px 10px 0 0; padding: 20px}
.print_wrap ul{display: flex; flex-flow: row nowrap; justify-content: space-between}
.print_wrap ul li:first-child{text-align: left; color: #fff; font-size: 28px;  font-weight: 700; padding-top: 5px}
.print_wrap ul li:first-child span{display: block; font-size: 16px; font-weight: normal;  letter-spacing: -1px}
.print_wrap ul li:last-child{padding-top: 9px; display: flex; flex-flow: row nowrap; justify-content: flex-end}
.print_wrap ul li:last-child a{display: inline-block; width: 40px; height: 40px; border:1px solid ddd; background: #fff url(/resources/toctocmath/userImages/sub/print-607af6edfe16c0b62c8b2d406f995931.svg) 50% 50% no-repeat; background-size: 30px; border-radius: 5px; margin-right: 10px}


/* 탭 */
.tab{width: 100%; display: flex; flex-flow: row nowrap; justify-content: flex-start; margin-bottom: 40px; border-bottom: 1px solid #ddd; color: #333}
.tab li{flex: 0 1 50%; height: 60px}
.tab li a{padding:10px 5px; width: 100%; height: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; border: 1px solid #ddd; border-right: 0; border-bottom: 0; transition: .2s; font-size: 18px; text-align: center}
.tab li:last-of-type a{border-right: 1px solid #ddd}
.tab li a.on{background: #5743cb; color: #fff; border-color: #5743cb}


/*그래프*/
.graph_wrap::-webkit-scrollbar { width: 8px; height: 8px;}
.graph_wrap::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #5743cb; /* 스크롤바의 색상 */ border-radius: 20px;}
.graph_wrap::-webkit-scrollbar-track {background: #e5e5e5;  /*스크롤바 뒷 배경 색상*/}
.graph_wrap{border: 1px solid #ddd; border-radius: 5px; padding: 20px; margin-top: 20px; text-align: center}


/*그래프*/
.graph_wrap2::-webkit-scrollbar { width: 8px; height: 8px;}
.graph_wrap2::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #5743cb; /* 스크롤바의 색상 */ border-radius: 20px;}
.graph_wrap2::-webkit-scrollbar-track {background: #e5e5e5;  /*스크롤바 뒷 배경 색상*/}


.graph_wrap3::-webkit-scrollbar { width: 8px; height: 8px;}
.graph_wrap3::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #5743cb; /* 스크롤바의 색상 */ border-radius: 20px;}
.graph_wrap3::-webkit-scrollbar-track {background: #e5e5e5;  /*스크롤바 뒷 배경 색상*/}
.graph_wrap3{border: 1px solid #ddd; border-radius: 5px; padding: 20px 0; margin-top: 20px; text-align: center}
.aaa{padding: 0 20px}


.txt_etc{font-size: 13px; padding: 10px 0; line-height: 17px}


/*AI진단하기(학생)*/
.ai_top{width: 100%; padding: 20px; margin-bottom: 30px; display: flex;flex-flow: row nowrap;align-items: center; justify-content: center; background: #4d399c url(/resources/toctocmath/userImages/sub/sub_visual_welcome-9b0d29ac8645e107fbe8360e55f47fd3.png) 50% 50% no-repeat; border-radius: 10px; color: #fff;font-size: 30px;letter-spacing: -1px; font-weight: 700; text-align: center}
.ai_top span{color: #ffd800}
.ai_top img{margin-right: 10px} 

.tit_ai{color: #333; font-size: 22px; margin: 20px 0 5px 0; padding-left: 25px; background: url('/resources/toctocmath/userImages/sub/icon_dot01-02174a553343c8b686549240df7bb5e9.png') 0 50% no-repeat; /*임시 주석처리 height: 35px; */ line-height: 38px; font-weight: 700}

.ai_box{border: 1px solid #ddd; padding: 20px; border-radius: 5px;  font-size: 16px; line-height: 25px}
.ai_box div{color: #fff; font-size: 20px; background: #8387ff; border-radius: 5px; margin-bottom: 20px; line-height: 20px; padding: 15px 20px 10px 20px}
.ai_box.bor2px{border: 2px solid #8e7ecc}

.ai_recommend_wrap{display: flex; flex-flow: row nowrap; justify-content: space-between}
.ai_recommend_wrap>li{width:calc(50% - 20px)}
.ai_recommend_wrap>li.total{width:100%}
.ai_recommend_wrap>li>div{color: #fff; font-size: 20px; background: #8387ff; border-radius: 5px; margin-bottom: 20px; line-height: 20px; padding: 15px 20px 10px 20px}

.ai_recommend{display: flex; flex-flow: row wrap; justify-content: space-between}
.ai_recommend>li{width:calc(50% - 10px); border: 1px solid #ddd; border-radius: 5px; padding: 20px; margin-bottom: 15px}
.concept_movie{display: flex; flex-flow: row wrap; justify-content: space-between}
.concept_movie>li{width:calc(50% - 10px); border: 1px solid #ddd; border-radius: 5px; padding: 20px; margin-bottom: 15px}


.ai_list li:nth-child(1){color: #333; font-size: 17px; font-weight: 700; line-height: 30px; border-bottom: 1px solid #ddd; margin-bottom: 10px}
.ai_list li:nth-child(2){font-size: 15px; line-height: 25px; margin-bottom: 5px}
.ai_list li:nth-child(3) p{display: inline-block; padding: 0 8px; color: #333; background: #efefef; height: 20px; line-height: 23px; border-radius: 10px}

.ai_list2 li:nth-child(1){color: #4d399c; font-size: 14px}
.ai_list2 li:nth-child(2){font-size: 16px; color: #333; line-height: 25px; margin-bottom: 5px}
.ai_list2 li:nth-child(3) img{width: 100%}

.grader01{color:#e96e00!important}
.grader02{color:#5a9a0e!important}
.grader03{color:#00976b!important}
.grader04{color:#008ca5!important}
.grader05{color:#374bb2!important}
.grader06{color:#be2799!important}


/*학급가입하기*/
.class_join{background: #eaeeff; height: 100vh}
.box2{border: 1px solid #c1c5e1; border-radius: 10px; background: #fff; min-height: 0!important; padding-top:30px}
.txt_class_join{margin-top: 30px; font-size: 22px; text-align: center; color: #333}



/* 미디어쿼리 -----------------------------------------------------------------------------------------*/

/* 1400 */
@media (max-width: 1400px) {
	
	/*서브내용 영역*/
	.sub_content{margin: 30px 15px}
	
	/*서브비주얼*/
	.sub_visual ul{padding: 0 20px}

}

/* 1200 */
@media (max-width: 1200px) {
	
	body.scroll_lock{overflow: hidden}
	
	/*서브콘텐츠영역*/
	.sub_wrap{margin-top: 0}
	
	
	/*서브비주얼-진단하기*/
	.sub_visual2{height: 220px}
	.sub_visual2 ul{height: 220px}
	.sub_visual2 ul li:first-child img{width:400px}
	
	.sub_visual2 ul li:last-child{padding-top: 68px}
	.sub_visual2 ul li:last-child p:nth-child(1){font-size: 20px}
	.sub_visual2 ul li:last-child p:nth-child(2){font-size: 16px}
	.sub_visual2 ul li:last-child p:nth-child(3){font-size: 13px; margin-top: 15px}
	

	
	/*서브내용 영역*/
	.sub_content{margin-top: 20px}
	h3{font-size: 26px}
	h4{font-size: 23px; height: 50px; line-height: 55px}

	/*진단하기*/
	.diagnose>div:first-child{flex-basis: 50%}
	.diagnose>div:last-child{flex-basis: 50%}
	
	
	/*진단활동 박스내용*/
	.diagnose_box{flex-flow: column nowrap; }
	.diagnose_box>li{width:100%;}
	
	
	/*학생관리- 학급초대장*/
	.invitation_txt span br{display:inline}

	.invitation_btn{flex-flow: column nowrap}
	.invitation_btn button{margin-bottom:5px; width: 100%}
		
	
	/*학습 활동 현황*/	
	.activity_record{display: flex; flex-flow: row nowrap; justify-content: space-between}
	.activity_record>div:first-child{position: fixed; top: 0; left: 0; margin-right: 0;  height: 100%; min-width: 150px; border-radius: 0; z-index: 15; transform:translateX(-100%); transition: transform .3s ease}
	.activity_record>div:first-child .scroll_area{padding: 10px; height:100%}
	.activity_record>div:last-child{flex-basis: 100%}
	
	.btn_show{position:absolute; display:flex; z-index:3; top:40%; right:0; transform:translateX(100%); width:15px; height:100px; padding: 0!important; background:#322192 url('/resources/toctocmath/userImages/sub/icon_arrow01-52d8ca413945da15bea5744d36739d41.gif') 50% 50% no-repeat; border-top-right-radius:15px; border-bottom-right-radius:15px; cursor:pointer}
	
	.btn_hidden{position:absolute; display:flex; z-index:3; top:40%; right:0; transform:translateX(100%); width:15px; height:100px; padding: 0!important; background:#322192 url('/resources/toctocmath/userImages/sub/icon_arrow02-154a9a19eccd8c61f40f6a56cfb18b2b.gif') 50% 50% no-repeat; border-top-right-radius:15px; border-bottom-right-radius:15px; cursor:pointer}
	

	/*학습 활동 현황-출석현황*/
	.calendar_wrap>li{margin: 0 10px}
	.calendar_wrap>li:first-child{width: 60%}
	.calendar_wrap>li:last-child{width: 40%}
	

	/*학습 활동 현황-총 학습시간*/
	.total_play_time .bg {width: 280px;	height: 280px}
	
	
	/*표 리스트*/
	.tbl_list3 thead{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0)}	
	.tbl_list3 tbody tr{display: flex; width: 100%; position:relative; flex-flow: row wrap; justify-content: flex-start; padding: 10px 0; border-bottom: 1px solid #ddd}
	.tbl_list3 tbody tr:last-child{border-bottom: none}	
	.tbl_list3 tbody td{border:none; width: 50%; text-align: left; padding: 0 0 0 80px; line-height: 20px; height: auto; font-size: 14px}
	.tbl_list3 tbody tr .icon{position: absolute; height: auto; top:0; bottom:0; left: 0; width: 70px; display: flex; align-items: center; justify-content: center; background: #f4f7fd; text-align: center; padding: 0; font-size: 13px}
	.tbl_list3 .mob_th{display: inline-block; vertical-align: middle; padding: 4px 5px 0 0; line-height: 20px; font-size: 14px; color: #4d399c; font-weight: 700}

	/*게시물없음*/
	.no_content{width: 100%!important; height: 150px!important; line-height: 150px!important}

}


/* 1000 */
@media (max-width: 1000px) {

	
	/*서브비주얼-진단하기*/
	.sub_visual2{height: 150px}
	.sub_visual2 ul{height: 150px}
	.sub_visual2 ul li:first-child img{width:250px}
	
	.sub_visual2 ul li:last-child{padding-top: 33px}
	.sub_visual2 ul li:last-child p:nth-child(1){font-size: 20px}
	.sub_visual2 ul li:last-child p:nth-child(2){font-size: 16px}
	.sub_visual2 ul li:last-child p:nth-child(3){font-size: 13px; margin-top: 15px}
	
	/*학생관리*/
	.student_manage{flex-flow: column-reverse nowrap}
	.student_manage>div:first-child{flex-basis: auto; margin-right: 0}
	.student_manage>div:last-child{flex-basis: auto; margin-bottom: 20px}
	
	/*학생관리- 학급초대장*/
	.invitation_txt br{display: none}
	
	.invitation_btn{flex-flow: row nowrap}
	.invitation_btn button{margin-bottom:0; width: auto}
	
	
	/*진단분석_평가결과 리스트*/
	.exam_list li div.txt02{width: 200px}
	.exam_list li div.progres{width: calc(100% - 200px)}
	.exam_list li div.total{width: 200px}
	
	
	/* 탭 */
	.tab{display: flex;flex-flow: row wrap;border-bottom: 0;}
	.tab li{flex: 0 0 50%;}
	.tab li a{border-top: 0;border-right: 1px solid #ddd;border-left: 0;border-bottom: 1px solid #ddd;}
	.tab li:nth-of-type(2n-1) a{border-left: 1px solid #ddd;}
	.tab li:nth-of-type(1) a, .tab li:nth-of-type(2) a{border-top: 1px solid #ddd;}
	
	
	/*AI진단하기(학생)*/
	.ai_top {font-size: 22px}
	.ai_top img{width: 170px}
	

	.ai_recommend_wrap{flex-direction: column}
	.ai_recommend_wrap>li{width:100%}
	
	.ai_recommend>li{width:calc(50% - 10px)}
	.concept_movie>li{width:calc(50% - 10px)}
}


/* 770 */
@media (max-width: 770px) {
	
	/*서브비주얼*/
	.sub_visual{height: 150px}
	.sub_visual ul li:first-child img{width: 260px; margin-top: 25px}
	.sub_visual ul li:last-child{font-size: 25px}
	.sub_visual ul li:last-child p{font-size: 11px}
	.sub_visual ul li:last-child p img{width: 10px}
	
	/*서브비주얼-진단하기*/
	.sub_visual2{height: 150px}
	.sub_visual2 ul{height: 150px}
	.sub_visual2 ul li:first-child img{display: none}
	
	.sub_visual2 ul li:last-child p:nth-child(1){font-size: 18px}
	.sub_visual2 ul li:last-child p:nth-child(2){font-size: 14px}
	.sub_visual2 ul li:last-child p:nth-child(3){font-size: 12px; margin-top: 15px}
	

	/*진단하기*/
	.diagnose{flex-flow: column nowrap}
	.diagnose>div:first-child{margin-right: 0}
	.diagnose>div:last-child{margin-top: 20px}

	
	/*학습 활동 현황-출석현황*/
	.calendar_wrap{flex-direction: column}
	.calendar_wrap li{width: 100%!important; margin: 10px 0}
	
	
	/*진단분석(선생님) - 출력*/
	.print_wrap{padding: 15px}
	.print_wrap ul{flex-direction: column}
	.print_wrap ul li:first-child{text-align: center; font-size: 26px;}
	.print_wrap ul li:first-child span{ font-size: 14px}
	.print_wrap ul li:last-child{flex-direction: column; align-items: center}
	.print_wrap ul li:last-child a{display:none}
	.print_wrap ul li:last-child select{width: 200px}
	
	
	/*검색박스*/
	.search_box ul{flex-direction: column}
	.search_box ul li:first-child{width: 80%; padding-right: 10px; box-sizing: border-box}
	.search_box ul li:last-child{width: 20%}
	
	.search_box2 ul{flex-direction: column; text-align: left}
	.search_box2 ul li{width: 100%; margin: 0 0 5px 0}
	.search_box2 ul li select{width: 100%}
	.search_box2 ul li input{width: 100%}
	.search_box2 ul li button{width: 100%}	
	.search_box2 .m_hidden{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0)}
		

	.search_box3 ul li label{width: 100%; margin: 5px 0}
	.search_box3 ul li input{width: calc(100% - 140px);}
	.search_box3 ul li button.upload{width:120px}
	.search_box3 .search_txt{margin:15px 0 0 0}
	
	
	/*부가설명*/
	.txt_note{flex-direction:column; margin-bottom: 10px}
	.txt_note ul{margin-bottom: 10px}
	
	
	/*달력선택*/
	.month_selector{ padding: 15px 5px 10px 15px}
	.month_selector a{min-width: 65px; font-size: 16px}
	.month_selector a.prev{background: #fff url('/resources/toctocmath/userImages/sub/arrow_left-275d6fd943dcebbc793cd1f1c5fbf62d.png') 10px 53% no-repeat; padding: 0 10px 0 15px; background-size: 7px}
	.month_selector a.next{background: #fff url('/resources/toctocmath/userImages/sub/arrow_right-a27417ef09841a61d6981edaccb48ef6.png') 47px 53% no-repeat; padding: 0 10px 0 0; background-size: 7px}
	.month_selector .current{font-size: 22px; padding: 0 10px}
	
	
	/* 표 상단 영역 */
	.table_top > div button{font-size: 14px; letter-spacing: -0.7px; padding: 0 7px}
	
	
	.align_r button{font-size: 14px; letter-spacing: -0.7px; padding: 0 7px}

		
	/*표 리스트*/
	.tbl_list3 tbody td{width: 100%; padding: 0 0 0 70px;}
	.tbl_list3 tbody tr .icon{width: 60px}
	.tbl_list3 .mob_th{display: inline-block; vertical-align: middle; padding: 4px 5px 0 0; line-height: 20px; font-size: 14px; color: #4d399c; font-weight: 700}

	
	.tbl_list4 thead{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0)}	
	.tbl_list4 tbody tr{display: flex; position:relative; flex-flow: row wrap; justify-content: flex-start; padding: 10px 0; border-bottom: 1px solid #ddd}
	.tbl_list4 tbody tr:last-child{border-bottom: none}
	.tbl_list4 tbody td{border:none; width: 100%; text-align: left; padding: 5px 0; line-height: 20px; height: auto; font-size: 14px}
	.tbl_list4 td input{width: calc(100% - 80px)!important; text-align: left!important}
	.tbl_list4 td:nth-child(4) input{ width: 100%!important}
	.tbl_list4 td:nth-child(4) input{width: calc(100% - 80px)!important; margin-right: 0!important}
	.tbl_list4 td:nth-child(4) p{display: block; width: 100%; margin: 10px 0 0 0; text-align: right}
	.tbl_list4 .mob_th{width: 75px; display: inline-block; vertical-align: middle; padding: 4px 5px 0 10px; line-height: 20px; font-size: 14px; color: #4d399c; font-weight: 700}
	

	
	/*진단분석_평가결과_활동성취 검색바*/
	.class_selector{flex-direction: column; height: auto}
	.class_selector>h5{font-size: 17px; height: auto; line-height: 20px; margin: 5px 0 10px 0; padding-bottom: 5px; border-bottom: 1px solid #d2d2d2}
	.class_selector>h5.no_select{font-size: 17px; height: auto; line-height: 20px; margin: 5px 0 0 0; padding-bottom: 0; border-bottom: none}

	
	/*진단분석_평가결과 리스트*/
	.exam_list li ul.list_progres{width:100%}
	.exam_list li ul.list_progres>li{flex-direction: column}

	.exam_list li div.txt02{width: 100%}
	.exam_list li div.total{width: 100%}
	
	.exam_list li div.progres{width: 100%; min-height: 50px}


	/*신호등*/
	.box_exam{border: 1px solid #ddd; border-radius: 5px; padding: 20px}
	
	.light{border-bottom: none; margin: 0 auto}
	.light_wrap{margin: 10px 10px 0 10px}
	.exam_list li div.progres.green{text-align: center}
	.exam_list li div.progres.yellow{text-align: center}
	.exam_list li div.progres.red{text-align: center}
	.exam_list li div.progres.gray{text-align: center}
	
	/*AI진단하기(학생)*/
	.ai_top {font-size: 20px; flex-direction: column; padding: 10px}
	.ai_top img{width: 150px}
	
	.ai_box{padding: 15px; font-size: 14px; line-height: 19px}
	.ai_box div{color: #fff; font-size: 16px; background: #8387ff; border-radius: 5px; margin-bottom: 20px; line-height: 17px; padding: 15px 20px 10px 20px}
	
	
	/*그래프*/
	.graph_wrap2{overflow:auto}
	
	.graph_wrap3{overflow:auto; }
	.aaa{padding: 20px 5% 20px 12%}
	
}

/* 550 */
@media (max-width: 550px) {

	.search_box4 ul{flex-direction: column; text-align: left}
	.search_box4 ul li{width: 100%; margin: 0 0 5px 0}
	.search_box4 ul li label{display: inline-block; width: 60px; margin: 5px 0}
	.search_box4 ul li select{width: 100%}
	.search_box4 ul li input{width: 100%}
	.search_box4 ul li button{width: 100%}	
	.search_box4 ul li input.m_mgb5{margin-bottom: 5px}

}
	
/* 500 */
@media (max-width: 500px) {
	
	/*서브비주얼*/
	.sub_visual{height:110px; background: url('/resources/toctocmath/userImages/sub/sub_visual-6aa9fad75205796499c4c89eed3ece46.jpg') no-repeat; background-size:cover}
	.sub_visual ul{height: 110px}
	.sub_visual ul li:first-child {display: none}
	.sub_visual ul li:last-child{font-size: 23px; text-align: left}

	
	/*서브비주얼-진단하기*/
	.sub_visual2{height: 180px}
	.sub_visual2 ul{height: 180px}
	
	.sub_visual2 ul li:last-child{padding-top: 25px}
	.line_break{display: inline-block}
	
	/*서브내용 영역*/
	h3{font-size: 23px; margin-bottom: 5px}
	h4{font-size: 20px; height: 40px; line-height: 45px}
	h4.h4_type2{ padding: 0 10px; margin-left:-10px}
	
	/*수업하기-우리학급구성원*/
	.class_member>div{min-height: 300px}
	.class_member .class_member_top{flex-direction: column; padding-bottom: 15px; line-height: 30px; margin-top: 15px}
	.class_member .class_member_top p{text-align: center}
	
	.class_member_profile{flex-direction: column; margin-bottom: 10px}
	.class_member_profile .title_t{width: 100%; padding:0 0 10px 0; font-size: 20px; color: #23a600; text-align: left; padding-top: 10px}
	.class_member_profile .title_s{width: 100%; padding:0 0 10px 0; font-size: 20px; color: #0081d8; text-align: left; padding-top: 10px}

	
	/*진단하기*/
	.diagnose>div:last-child{margin-top: 15px}
	.diagnose>div>div{padding: 15px}
	
	
	/* 진단활동 탭 */
	.tab_diagnose li a{height: 50px; font-size: 15px}
	
	
	/*진단활동 셀렉트박스 영역*/
	.select_wrap{padding: 15px 0 0 0}
	.select_wrap select{margin-right: 5px}

	
	/*진단활동 박스내용*/
	.diagnose_box>li>div>span{font-size: 13px}
	.diagnose_box>li>ul li:first-child{font-size: 15px; padding: 10px}
	.diagnose_box>li>ul li:last-child button{width: 100px; font-size: 14px}
	
	
	/*학생관리*/
	.student_manage>div>div{padding: 15px}
	
	/*학생관리- 학급초대장*/
	.invitation_btn{flex-flow: column nowrap}
	.invitation_btn button{margin-bottom:5px; width: 100%!important}
	
	
	/*학습 활동 현황*/
	.activity_record>div>div:nth-child(2){padding: 10px}
	.activity_record2>div>div{padding: 10px}
	

	/*학습 활동 현황-기간선택*/
	.date_choice_box{flex-direction: column}
	.date_choice_box label{display: block; width: 100%; text-align: left; line-height: 25px; padding-left: 5px}
	.date_choice_box input{width: 100%; margin-bottom: 5px}
	.date_choice_box .m_hidden{display: none}
	
	
	/*학습 활동 현황-총 학습시간*/
	.total_play_time .bg {width: 260px;	height: 260px}
	.total_play_time .txt_total {font-size: 16px}
	.total_play_time .txt_total > span {font-size: 33px}
	
	
	/*진단분석(선생님) - 출력*/
	.print_wrap{padding: 10px}
	.print_wrap ul li:first-child{font-size: 20px;}
	.print_wrap ul li:first-child span{ font-size: 13px}
	.print_wrap ul li:last-child select{width: 100%}
	
	
	/*검색박스*/
	.search_box ul{flex-direction: column}
	.search_box ul li:first-child{width: 100%; padding: 0; margin-bottom: 5px}
	.search_box ul li:last-child{width: 100%}
		

	.search_box3 ul li input{width: 100%}
	.search_box3 ul li button.upload{width:100%; margin-top: 5px}
	
	
	/*달력선택*/
	.month_selector{padding: 10px 0 7px 0}
	.month_selector a{min-width: 30px; height: 30px; margin: 0 5px}
	.month_selector a.prev{background: #fff url('/resources/toctocmath/userImages/sub/arrow_left-275d6fd943dcebbc793cd1f1c5fbf62d.png') 50% 53% no-repeat; background-size: 10px}
	.month_selector a.next{background: #fff url('/resources/toctocmath/userImages/sub/arrow_right-a27417ef09841a61d6981edaccb48ef6.png') 50% 53% no-repeat; background-size: 10px}
	.month_selector .current{font-size: 16px; padding: 0 10px; line-height: 33px}
	.month_selector a span{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0)}
	.month_selector button{height:30px; line-height: 33px; font-size: 14px}
	
	
	/* 표 상단 영역 */
	/*.table_top{flex-flow: column-reverse nowrap; justify-content: flex-start } */
	.table_top{align-items: center;}
	.table_top span{margin-top: 10px;}
	.table_top > div{text-align: center; display: flex;}
	.table_top > div button{font-size: 10px; white-space: normal; line-height: 1.2; }
	.table_top > div button.lh4{line-height: 4px;}
    /* .table_top > div button:first-child{margin-left: 0} */
	
	
	/*표 리스트*/
	.tbl_list thead{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0)}	
	.tbl_list tbody tr{display: flex; position:relative; flex-flow: row wrap; justify-content: flex-start; padding: 10px 0; border-bottom: 1px solid #ddd}
	.tbl_list tbody tr:last-child{border-bottom: none}
	.tbl_list tbody tr .num{position: absolute; height: auto; top:0; bottom:0; left: 0; width: 40px; min-width: auto; display: flex; align-items: center; justify-content: center; background: #f4f7fd; text-align: center; padding: 0; font-size: 13px}
	.tbl_list tbody td{border:none; width: 100%; text-align: left; padding: 0 0 0 50px; line-height: 20px; height: auto; font-size: 14px}
	.tbl_list .mob_th{display: inline-block; vertical-align: middle; padding: 4px 5px 0 0; line-height: 20px; font-size: 14px; color: #4d399c; font-weight: 700}

	
	.tbl_list2 thead{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0)}	
	.tbl_list2 tbody tr{display: flex; position:relative; flex-flow: row wrap; justify-content: flex-start; padding: 10px 0; border-bottom: 1px solid #ddd}
	.tbl_list2 tbody tr:last-child{border-bottom: none}
	.tbl_list2 tbody td{border:none; width: 100%; text-align: left; padding: 0 0 0 10px; line-height: 20px; height: auto; font-size: 14px}
	.tbl_list2 .mob_th{display: inline-block; vertical-align: middle; min-width: 55px; padding: 4px 5px 0 0; line-height: 20px; font-size: 14px; color: #4d399c; font-weight: 700}

	

	.tbl_list4 tbody td{padding: 2px 0}
	
	
	/*줄바꿈*/
	br.break_m{display:block}
	
	
	/*페이징*/
	.paging_wrap ul li {margin:0 1px}
	.paging_wrap ul li button {width:25px; height:25px; font-size:13px; line-height:27px}

	
	/*진단분석_평가결과 리스트*/
	.exam_list li div.txt01{width: 80px; padding: 5px}
	
	
	/*진단분석_평가결과_활동성취 검색바*/
	.class_selector>h5{text-align: center}
	.class_selector>div>select{width: 100%; margin: 2px 0}
	
	
	/* 차트 아이콘:잘해요~보충이필요해요*/
	.chart_icon03{flex-flow: row wrap}
	.chart_icon03 li{width: 50%}
	
	/*정답 프로그레스바*/
	.answer_txt{min-width: 100px}
	
	/* 탭 */
	.tab li a{font-size: 15px}
	
	/*그래프*/
	.graph_wrap{overflow: auto}
	
	
	/*AI진단하기(학생)*/
	.ai_top img{margin: 0 0 10px 0}
	
	.ai_box{padding: 10px}
	.ai_box div{font-size: 18px; margin-bottom: 15px; line-height: 17px; padding: 10px 10px 7px 10px}

	.ai_recommend{flex-direction: column}
	.ai_recommend>li{width:100%; padding: 10px; margin-bottom: 10px}
	.concept_movie{flex-direction: column}
	.concept_movie>li{width:100%; padding: 10px; margin-bottom: 10px}
	
	/*신호등*/
	.box_exam{padding: 10px}
	
	.aaa{padding: 20px 15% 20px 20%}
	
	

}

/* 340 */
@media (max-width: 340px) {
	h4{letter-spacing: -1.5px}
}