/* 서브(게시판) -----------------------------------------------------------------------------------------------*/

/*게시판 공지사항*/
.txt_list_count{display: block;margin-bottom: 5px;font-size: 15px;color: #666;}
.txt_list_count i{color: #ff6c00;font-style: normal;font-weight: bold;margin: 0 3px;}
.tbl_notice{width: 100%; border-top: 2px solid #5743cb; border-bottom:1px solid #958ebf; text-align: center}
.tbl_notice th{font-size: 18px; background: #eef1fe; color: #4d399c; font-family: 'Gsans'; font-weight: normal;  border-bottom: 1px solid #b4bad6; line-height: 17px; padding: 8px 5px 3px 5px; height: 50px}
.tbl_notice th:first-child, .tbl_list td:first-child{border-left:none}
.tbl_notice td{padding: 7px 14px 5px; height: 50px; font-size: 15px; border-bottom: 1px solid #ddd; color: #666;text-align: center;}
.tbl_notice td.title{text-align: left;}
.tbl_notice td.title a{word-break: break-all;display: block;line-height: 16px;font-size: 16px;}
.tbl_notice td.title .icon_file{display: inline-block;margin-left: 10px;}
.tbl_notice td a:hover{color: #0081d8; text-decoration: underline}
.tbl_notice .mob_th,.tbl_notice .mob_state{display:none}
.tbl_notice .state{display: inline-block;font-size: 14px;min-width: 50px;height:26px;line-height: 28px;border-radius: 30px;background-color: #5743cb;color: #fff;}


/* 자주묻는질문 탭 */
/*
.tab_faq{width: 100%; display: flex; flex-flow: row wrap; color: #333;margin: 10px 0 32px;}
.tab_faq li{width:calc(100% /9)}
.tab_faq 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: 17px; word-break: keep-all; text-align: center}
.tab_faq li:last-of-type a{border-right: 1px solid #ddd}
.tab_faq li a.on{background: #5743cb; border: 1px solid #5743cb; color: #fff}
*/
.tab_faq{width: 100%; display: flex; flex-flow: row wrap; color: #333; margin: 10px 0 32px; border-top: 1px solid #ddd}
.tab_faq li{width:calc(100% /4); border: 1px solid #ddd; border-right: 0; border-top:0}
.tab_faq li a{padding:10px 0; height: 60px; padding-bottom: 6px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; transition: .2s; font-size: 17px; word-break: keep-all; text-align: center}
.tab_faq li:nth-child(4n+4){border-right: 1px solid #ddd}
.tab_faq li:last-of-type{border-right: 1px solid #ddd; width:calc(25% + 1px)}
.tab_faq li:last-of-type:nth-child(4n+4){width:25%}
.tab_faq li a.on{background: #5743cb; color: #fff}



/* 자주묻는질문 리스트 */
.faq_list{width: 100%;border-top: 2px solid #5743cb; }
.faq_list li dl dt{border-bottom:1px solid #d5d5d5;padding: 20px 10px;}
.faq_list li dl .icon {position: absolute;left: 0px;top: 0px;display: inline-block;width:34px;height:34px;font-size:18px;line-height:34px;text-align:center;color:#fff;background:#5743cb;border-radius:5px;}
.faq_list li dl dt a {position:relative;display:block;padding:0 40px 0 50px;font-size:18px;color:#222;line-height: 34px;}
.faq_list li dl dt a span{color: #5743cb;}
.faq_list li dl dt a:after {content:'';position:absolute;right:15px;top:10px;width:19px;height:20px;background:url(/resources/toctocmath/userImages/sub/icon_faq_list-9b2088a9a3c4cf16eff91dad25357632.png) no-repeat left top;}
.faq_list li dl dd {display:none;position:relative;padding:18px 10px;font-size:18px;line-height:28px;color:#666;border-bottom:1px solid #d5d5d5;background:#f5f5f5;}
.faq_list li dl dd p {display: inline-block;padding: 0 40px 0 50px ;font-size:18px;line-height:30px;color:#666;}
.faq_list li dl dd .icon {top:17px;left: 10px;background:#666;}
.faq_list li dl dt a.active:after {background-image:url(/resources/toctocmath/userImages/sub/icon_faq_list_on-3183f792b4d3f0b7a990f94fd2cd2084.png);}



/* 상세페이지 */
.detail_content{border-top: 2px solid #5743cb;border-bottom: 1px solid #e5e5e5;}
.detail_content .title_box{padding: 15px 35px 22px;background-color: #eef1fe;border-bottom: 1px solid #e5e5e5;}
.detail_content .title_box .title{color:#4d399c;font-size: 18px; line-height: 30px;}
.detail_content .title_box ul{margin-top: 6px;}
.detail_content .title_box ul li{position: relative;display: inline-block;font-size: 15px;margin-right: 10px;font-weight: 500;color:#333;}
.detail_content .title_box ul li::after{content: '';display: inline-block;width: 1px;height: 10px;background-color: #958ebf;margin-left: 15px;}
.detail_content .title_box ul li:last-of-type::after{display: none;}
.detail_content .file_box{padding: 15px 35px 16px;border-bottom: 1px solid #e5e5e5;font-size: 15px;}
.detail_content .file_box a{display: block;padding-left: 25px;background: url(/resources/toctocmath/userImages/sub/icon_file-d890b31d82aa8fa3d271d5e2f7296b18.gif) left 0 top 2px no-repeat;color: #333;line-height: 1.6;}
.detail_content .file_box a:hover{text-decoration: underline;color: #4d399c;}
.detail_content .con{padding: 32px 35px;font-size: 16px;line-height: 1.6;color: #666;}
.minw60{min-width: 60px;}


/*  에러페이지 */
.error_wrap{width: 100%;height: auto;padding: 30px  50px 150px;background-color: #eef1fe;}
.error_wrap h1{width: 305px}
.error_wrap .warning_l{display: block;margin: 50px auto 50px;}
.error_wrap h2{display: block;margin: 0 auto;text-align: center;font-size: 40px;color: #333;line-height: 1.4;}
.error_wrap h2 i{font-style: normal;color: #4d399c;}
.error_wrap .txt{display: block;margin: 0 auto;text-align: center;margin-top: 20px;line-height: 1.6;font-size: 17px;}

/* 학급관리 */
.class_member2>div>div{padding: 20px;}
.class_search{width: 100%;margin-bottom: 20px;;padding: 0 10px 15px;border-bottom: 1px solid #e5e5e5}
.class_search ul{display: flex;justify-content: flex-start;align-items: center;}
.class_search ul li{margin-right: 16px;}
.class_search ul li:last-of-type{margin-right: 0px;}
.class_search ul li label{margin-right: 10px;position: relative;padding-left: 10px;font-size: 15px;}
.class_search 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;}

.scroll_box::-webkit-scrollbar { width: 8px; height: 8px;}
.scroll_box::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #5743cb; /* 스크롤바의 색상 */ border-radius: 20px;}
.scroll_box::-webkit-scrollbar-track {background: #e5e5e5;  /*스크롤바 뒷 배경 색상*/}
.scroll_box{width: 100%;height: 240px;overflow: auto;border: 1px solid #e5e5e5;border-top: 2px solid #5743cb;border-bottom: 1px solid #958ebf;}
.scroll_box table{width: 100%;;text-align: center;}
.scroll_box table th{font-size: 18px;background: #eef1fe;color: #4d399c;font-family: 'Gsans';font-weight: normal;border-left: 1px solid #b4bad6; border-bottom: 1px solid #b4bad6;line-height: 17px;padding: 8px 5px 3px 5px;height: 50px;}
.scroll_box table th:first-of-type{border-left: 0;}
.scroll_box table 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;}
.scroll_box table td:first-of-type{border-left: 0;}
.scroll_box table td a{text-decoration: underline;color: #0081d8;}

/* td .profile_img{display: flex;align-items: center;width: 50px;height: 50px;border-radius: 100px;border: 1px solid #e5e5e5;overflow: hidden;} */
/* td .profile_img img{width: 100%} */
td .profile1{box-sizing:border-box!important; display: flex; width: 50px; height: 50px}
td .profile_img{box-sizing:border-box!important; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ddd; display: flex; justify-content: center; align-items: center; padding: 5px; position: relative}
td .profile_img img{max-width: 102%; max-height: 100%}


/* 학습지원센터 */
.support_box{width: 100%;border-radius: 10px;padding: 35px 45px;background-color: #eaeeff;margin-bottom: 20px;}
.support_box.topbox{min-height: 200px;display: flex;flex-flow: column wrap;justify-content: space-between;background: url(/resources/toctocmath/userImages/sub/support_top_img-153bf356ec19e5c746e8c24196c54e5f.png) #5743cb no-repeat right 20px top 50%;background-size: contain;}
.support_box.lastbox{background-color: transparent;}
.support_wrap button{font-size: 22px;height: 50px;line-height: 55px;}
.support_box.topbox h2{font-size: 28px;color: #fff;}
.support_box.topbox p{font-size: 16px;color: #fff;width: 50%;line-height: 30px;opacity: .9;font-weight: 500;padding-left: 0;}
.support_box.topbox p::before{display: none;;}
.support_box h3{font-size: 24px;height: auto;font-weight: bold;display: flex;margin-bottom: 30px;color: #4d399c;padding-left: 35px;background-repeat: no-repeat;background-position: left 0 top 3px;background-size: 24px;}
.support_box h3.tit_01{background-image: url(/resources/toctocmath/userImages/sub/support_tit_01-14c772b12d8d381613fbb1503818511d.svg);background-position: left 0 top 6px;}
.support_box h3.tit_02{background-image: url(/resources/toctocmath/userImages/sub/support_tit_02-d7aad12481dda8077f4655bd28ac5434.svg);background-position: left 0 top 8px;}
.support_box h3.tit_03{background-image: url(/resources/toctocmath/userImages/sub/support_tit_03-d4140b7b71354c8164dfe2ae360e7ef8.svg);}
.support_box h3.tit_04{background-image: url(/resources/toctocmath/userImages/sub/support_tit_04-7ad49345ca5f4eb8da0c7a5c18a3019c.svg);}
.support_box .call_txt{font-size: 16px;font-weight: 500;color: #666;margin-left: auto;padding-left: 0;}
.support_box .call_txt i{font-style: normal;margin-right: 4px;}
.support_box p{font-size: 18px;line-height: 30px;font-weight: 500;color: #333;position: relative;padding-left: 16px;}
.support_box p::before{position: absolute;top: 0px;left: 0;content:'■ ';height: 3px;color: inherit;font-size: 8px;margin-right:6px;line-height: 30px;}
.support_wrap .process_list{display: flex;flex-flow: row wrap;justify-content: space-between;margin: 50px auto 10px;}
.support_wrap .process_list .process_con{display: flex;flex-flow: column nowrap;width: 19%;text-align: center;}
.support_wrap .process_list .process_next{width: auto;align-self: center;margin-top: -20px;}
.support_wrap .process_list .process_con span{font-size: 16px;font-weight: bold;color: #4d399c;}
.support_wrap .process_list .process_con .img_box{margin: 20px auto;width: 80%;border-radius: 200px;overflow: hidden;padding: 20px;background-color: #eef1fe;display: flex;justify-content: center;align-items: center;}
.support_wrap .process_list .process_con .img_box::after{content: '';display: block;padding-bottom: 100%;}
.support_wrap .process_list .process_con .img_box img{width: 100%;}
.support_wrap .process_list .process_con p{font-size: 16px;width: 90%;margin: 0 auto;word-break: keep-all;padding-left: 0;}
.support_wrap .process_list .process_con p::before{display: none;}

/* 비밀번호변경(사용자 관리자 공통) */
.welcome_wrap{width: 100%;height: auto;min-height: calc(100% - 270px);padding: 0  0px 100px;background-color: #eef1fe;}
.welcome_top_banner{position: relative;width: 100%; padding: 20px 50px;margin-bottom: 100px;display: flex;align-items: center;background: url(/resources/toctocmath/userImages/sub/sub_visual_welcome-9b0d29ac8645e107fbe8360e55f47fd3.png) #4d399c no-repeat 50% 50%;}
.welcome_top_banner.gradient {background: url(/resources/toctocmath/userImages/sub/sub_visual_welcome-9b0d29ac8645e107fbe8360e55f47fd3.png), linear-gradient(to right, #4d399c, #2e47a3);background-repeat: no-repeat;background-position: 50% 50%;}
.welcome_top_banner h1{width: 128px}
.welcome_top_banner p{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);margin: 0 auto;color: #fff;font-size: 26px;letter-spacing: 0px;font-weight: bold;}
.welcome_wrap h2{display: block;margin: 0 auto;text-align: center;font-size: 32px;color: #333;line-height: 1.3;}
.welcome_wrap h2 i{font-style: normal;color: #4d399c;}
.welcome_wrap .txt{display: block;margin: 0 auto;text-align: center;margin-top: 10px;line-height: 1.6;font-size: 17px;}
.welcome_wrap .login_box{margin: 0 auto;}
.welcome_wrap .login_box .warning_img{margin-bottom: 20px;}
.welcome_wrap .form_box{margin: 50px auto 0;display: flex;flex-flow: row nowrap;justify-content: space-between;}
.welcome_wrap .form_box .lbox{width: calc(80% - 10px);}
.welcome_wrap .form_box button{width: 20%;align-self: stretch;height: auto;}
.welcome_wrap .form_box .lbox .text:last-of-type{margin-bottom: 0;}


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

/* 1400 */
@media (max-width: 1400px) {
	
	/* 학급관리 */
	.scroll_box table td, .scroll_box table th{white-space: nowrap;}
	
}

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

	
	/* 에러페이지 */
	.error_wrap h1 img{width: 285px; margin-left: 10px}	
	
	/* 학습지원센터 */
	.support_box{padding: 30px;}
	.support_box.topbox p{width: 60%;margin-top: 30px;line-height: 1.6;font-size: 14px;word-break: keep-all;}
	.support_box .call_txt{font-size: 14px;}
	.support_wrap .process_list .process_con{width: calc(50% - 30px);}
	.support_wrap .process_list .process_next.tab_next{display: none;}
	.support_wrap .process_list .process_con p{margin-bottom: 30px;width: 95%;}
	.support_wrap .process_list .process_con .img_box{width: 50%;}

	/* 비밀번호변경(사용자 관리자 공통) */
	.welcome_top_banner h1{width: 100px;}
	.welcome_top_banner h1 img{width: 100%;}
	.welcome_top_banner{padding: 20px;flex-flow: column;}
	.welcome_top_banner p{position: static;transform: none;margin-top: 20px;}
}



/* 770 */
@media (max-width: 770px) {
	
	/* 자주묻는질문 탭 */
	.tab_faq li{width: calc(100% /2);}
	.tab_faq li:nth-child(2n+2){border-right: 1px solid #ddd}
	.tab_faq li:last-of-type{width:calc(50% + 1px)}
	.tab_faq li:last-of-type:nth-child(4n+4){width:50%}
	
	/* 에러페이지 */
	.error_wrap{padding: 50px 30px 150px;}
	
	/* 학습지원센터 */
	.support_box h3{margin-bottom: 20px;}
	.support_box.topbox{background-image: none;min-height: auto;}
	.support_box.topbox p{width: 95%;margin-top: 30px;}
	.support_box h3{background-image: none!important;padding-left: 0;flex-flow: column;;}
	.support_box .call_txt{margin-left: 0;line-height: 1.6;font-size: 12px;}
	.support_box .call_txt i{display: none;}
	.support_wrap .process_list .process_con .img_box{width: 70%;}

	/* 비밀번호변경(사용자 관리자 공통) */
	.welcome_wrap .login_box{width: 90%;}
	.welcome_top_banner p{font-size: 24px; letter-spacing: -1px}
}


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

	/*게시판 공지사항*/
	.tbl_notice{width: 100%; border-top: 2px solid #5743cb; border-bottom:1px solid #958ebf; text-align: center}
	.tbl_notice thead{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0)}	
	.tbl_notice tbody tr{display: flex; position:relative; flex-flow: row wrap; justify-content: flex-start; padding: 10px 0; border-bottom: 1px solid #ddd}
	.tbl_notice tbody tr:last-child{border-bottom: none}
	.tbl_notice tbody tr .num{display: none;}
	.tbl_notice tbody td{border:none; width: auto; text-align: left; padding: 0 10px; line-height: 20px; height: auto; font-size: 14px}
	.tbl_notice tbody td.title{font-size: 16px;width: 100%;}
	.tbl_notice tbody td.title a{display: inline; color: #333}
	.tbl_notice .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_notice .mob_state{display: inline-block;padding: 0 10px;font-size: 13px;height: 22px;line-height: 26px;background-color: #4d399c;color: #fff;margin-right: 6px;border-radius: 30px;}
	.scroll_box_x .tbl_notice th{font-size: 16px;}
	
	/* 자주묻는질문 탭 */
	.tab_faq li a{height: 45px; font-size: 14px}
	.faq_list li dl dt a:after{right: 10px;}

	/* 자주묻는질문 리스트 */
	.faq_list li dl dt{padding: 10px;}
	.faq_list li dl dt a {font-size:16px; line-height: 25px}
	.faq_list li dl dd p {font-size:14px; line-height:20px}
	
	
	/* 상세페이지 */
	.detail_content .title_box{padding: 10px}
	.detail_content .title_box .title{font-size: 16px; line-height: 20px;}
	.detail_content .title_box ul li{font-size: 13px}
	.detail_content .file_box{font-size: 14px; padding: 15px}
	.detail_content .con{padding: 15px;font-size: 14px;}

	
	/* 에러페이지 */
	.error_wrap{padding: 30px 20px 100px;}
	.error_wrap h1 img{width: 220px; margin-top: 4px}
	.error_wrap h2{font-size: 26px;}
	.error_wrap .txt{font-size: 15px;}
	

	/* 학급관리 */
	.class_search ul li{display: block;width: 100%;}
	.class_search ul li label{display: block;line-height: normal;margin-bottom: 6px;padding-left: 0;}
	.class_search ul li label::before{display: none}
	.class_search ul li.txtbtn_wrap input{width: calc(100% - 80px);}
	.class_search ul li.txtbtn_wrap button{min-width: 70px;}

	.table_top.ty_02 > span{display: flex;justify-content: space-between;margin-bottom: 10px;}
	.table_top.ty_02 > span > span{margin-top: 0;line-height: normal;align-self: center;}
	.scroll_box table th{font-size: 15px;}
	
	
	/* 학습지원센터 */
	.support_box{padding: 20px;}
	.support_box.topbox h2{font-size: 22px;}
	.support_box.topbox p{font-size: 13px;}
	.support_box h3{font-size: 20px;}
	.support_box p{font-size: 16px;}
	.support_wrap .process_list .process_con p{font-size: 15px;line-height: 1.6;}
	.support_wrap .process_list .process_next{display: none;}
	.support_wrap .process_list .process_con{width: 50%;}
	.support_box p{padding-left: 0;}
	.support_box p::before{display: none;}
	.support_wrap button{font-size: 16px;}

	/* 비밀번호변경(사용자 관리자 공통) */
	.welcome_wrap{padding-bottom: 50px;}
	.welcome_top_banner p{font-size: 20px;text-align: center;}
	.welcome_top_banner{margin-bottom: 30px;}
	.welcome_wrap h2{font-size: 20px;}
	.welcome_wrap .txt{font-size: 14px;}
	.welcome_wrap .form_box{margin-top: 30px;flex-flow: column;}
	.welcome_wrap .form_box .lbox{width: 100%;}
	.welcome_wrap .form_box button{width: 100%;margin-top: 10px;}

}

	
/* 320 */
@media (max-width: 320px) {
	
	/* 학습지원센터 */
	.support_box p{font-size: 14px;}
}