/* member -----------------------------------------------------------------------------------------*/


/*로그인*/
.login_wrap{width:100%; /*height: calc(100vh - 50px);*/ background: #eaeeff; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 50px 0}
.login_box{display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 40px; background: #fff; border: 1px solid #c1c5e1; border-radius: 10px; width: 540px}
.login_box h2{width: 100%; text-align: center; font-size: 32px; margin: 35px 0 25px 0; color: #333}
.login_box h2 span{display: block; font-size: 18px; color: #666; font-weight: normal; line-height: 20px; word-break: keep-all}
.login_box .text{width: 100%; padding:4px 10px; line-height: 45px; height: 45px; border: 1px solid #cecece; border-radius: 5px; margin-bottom: 10px; font-size: 15px}
.login_box .btn_login{width: 100%; height: 50px; line-height: 55px; border-radius: 5px; background: #5743cb; color: #fff; font-size: 18px; text-align: center}

.login_box .input_code{margin: 30px 0 60px}
.login_box .btn_school_login{display: flex; flex-flow: row nowrap; justify-content: center}
.login_box .btn_school_login a{margin: 0 10px}
.login_box .btn_school_login .btn_reenter{height: 50px; line-height: 55px; border-radius: 5px; background: #599e00; color: #fff; font-size: 18px; text-align: center; padding: 0 30px}
.login_box .btn_school_login .btn_next{height: 50px; line-height: 55px; border-radius: 5px; background: #dfdfdf; color: #fff; font-size: 18px; text-align: center; padding: 0 30px}
.login_box .btn_school_login .on{background: #0095da}


/* 로그인 탭 */
.tab_login{width: 100%; display: flex; flex-flow: row nowrap; color: #333}
.tab_login li{width:50%}
.tab_login 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; text-align: center; word-break: keep-all}
.tab_login li:last-of-type a{border-right: 1px solid #ddd}
.tab_login li a.on{color: #fff; background: #322192 ; position: relative; z-index: 10}

.tab_login li a.on:after {
	content: "";
	display: block;
	position: absolute;
	bottom: -19px;
	z-index: 1;
	left: 50%;
	width: 25px;
	height: 25px;
	transform: rotate(45deg) translateX(-50%);
	background: #322192
}


/*아이디비번찾기 및 회원가입*/
.find_btn{display: flex; flex-flow: row nowrap; justify-content: space-between; margin: 10px 0; width: 100%; padding-bottom: 10px; border-bottom: 1px solid #d7d7d7}
.find_btn a{display: block; width: 32%; font-size: 14px; text-align: center;line-height: 35px; height: 30px; position: relative; padding: 0 15px}
.find_btn a:nth-child(2){width: 38%}
.find_btn a:nth-child(1):before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 0;
	height: 0
}
.find_btn a:before {
	content: '';
	position: absolute;
	top: 10px;
	left: 0;
	display: inline-block;
	width: 1px;
	height: 10px;
	background: #dbdbdb
}
.find_btn a:hover{color: #5743cb}


/*소셜 로그인(3개)*/
.social_wrap3{width: 100%; background: #f5f5f5; border-radius: 5px; padding: 10px 0 15px 0}
.social_wrap3 p{text-align: center; font-size: 15px; color: #333; margin: 15px 0}
.social_wrap3 div{display: flex; width: 60%; flex-flow: row nowrap; justify-content: space-between; margin: 10px auto}
.social_wrap3 div a{display: block; width: 33.3%; text-align: center; position: relative}
.social_wrap3 div a:nth-child(1):before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 0;
	height: 0
}
.social_wrap3 div a:before {
	content: '';
	position: absolute;
	top: 14px;
	left: 0;
	display: inline-block;
	width: 1px;
	height: 15px;
	background: #d5d4d4
}
.social_wrap3 div a img{width: 40px}

/*소셜 로그인(2개)*/
.social_wrap2{width: 100%; background: #f5f5f5; border-radius: 5px; padding: 10px 0 15px 0}
.social_wrap2 p{text-align: center; font-size: 15px; color: #333; margin: 15px 0}
.social_wrap2 div{display: flex; width: 60%; flex-flow: row nowrap; justify-content: space-between; margin: 10px auto}
.social_wrap2 div a{display: block; width: 50%; text-align: center; position: relative}
.social_wrap2 div a:nth-child(1):before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 0;
	height: 0
}
.social_wrap2 div a:before {
	content: '';
	position: absolute;
	top: 14px;
	left: 0;
	display: inline-block;
	width: 1px;
	height: 15px;
	background: #d5d4d4
}
.social_wrap2 div a img{width: 40px}

/*소셜 로그인(1개)*/
.social_wrap1 {width: 100%; background: #f5f5f5; border-radius: 5px; padding: 10px 0 15px 0}
.social_wrap1 p{text-align: center; font-size: 15px; color: #333; margin: 15px 0}
.social_wrap1 div{display: flex; width: 60%; flex-flow: row nowrap; justify-content: space-between; margin: 10px auto}
.social_wrap1 div a{display: block; width: 100%; text-align: center; position: relative}
.social_wrap1 div a:nth-child(1):before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 0;
	height: 0
}
.social_wrap1 div a:before {
	content: '';
	position: absolute;
	top: 14px;
	left: 0;
	display: inline-block;
	width: 1px;
	height: 15px;
	background: #d5d4d4
}
.social_wrap1 div a img{width: 40px}


/*회원가입*/
.join_wrap{width:100%; /*height: calc(100vh - 170px);*/ background: #eaeeff; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 50px 0}
.join_box{width: 100%; max-width: 1400px; min-height: 600px; margin: 0 auto; background: #fff; border: 1px solid #c1c5e1; border-radius: 10px}

/*회원가입유형 선택*/
.join_tit{width: 100%; background: #322192; color: #fff; font-size: 30px; font-weight: 700; height: 70px; border-radius: 10px 10px 0 0; text-align: center; line-height: 75px}
.join_txt{font-size: 23px; text-align: center; padding: 30px; word-break: keep-all}

.join_type {display: flex; width: 100%; max-width: 900px; user-select: none; justify-content: space-around; position: relative;
margin: 30px auto}
.join_type a {display: flex; align-items: center; width: 100%; cursor: pointer; flex-direction: column; position: relative}
.join_type a .icon {background: #f5f5f5; border-radius: 50%; position: relative; transition: all .3s; display: flex}
.join_type a .icon >img {width: 250px;	height: 250px; /*flex: 1*/}
.join_type a .name {color: #2c2c2c; font-size: 30px; font-weight: 700; margin-top: 25px; margin-bottom: 15px}
.join_type a .desc {color: #8f8f8f; font-size: 17px; text-align: center; word-break: keep-all}
.join_type a:hover .icon {background: #5743cb}
.join_type a:hover .name,  .join_type a:hover .desc {color: #5743cb}


/*회원가입 프로그레스바*/
.join_process_top{max-width:800px; width:100%; display: flex; position: relative; margin: 50px auto 50px auto}
.join_process_top .line{height:2px; background: #dcdcdc; position: absolute; top: 16px; left: 50%; width: 75%; transform: translateX(-50%)}
.join_process_top .item{flex: 1; position: relative; display: flex; align-items: center; flex-direction: column}
.join_process_top .item.on .circle{background: #5743cb}
.join_process_top .item .circle{width:30px; height: 30px; border-radius: 50%; position: relative}
.join_process_top .item .circle::after{content:''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%)}
.join_process_top .item.active .process-text{color: #f90}
.join_process_top .item .circle{width:30px; height:30px; border-radius: 50%; background: #dcdcdc; position: relative}
.join_process_top .item .txt{font-size: 15px; color: #c4c4c4; text-align: center; word-break: keep-all; margin-top: 10px}
.join_process_top .item.on .txt{color: #5743cb}


/* 스크롤커스텀, 이용약관, 개인정보처리방침 */
.scroll_area::-webkit-scrollbar { width: 8px;  /* 스크롤바의 너비 */}
.scroll_area::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #5743cb; /* 스크롤바의 색상 */
    border-radius: 20px;}
.scroll_area::-webkit-scrollbar-track {background: #e5e5e5;  /*스크롤바 뒷 배경 색상*/}
.sub_content.pt30{padding-top: 30px;}
.fb-between{display: flex;align-items: center;justify-content: space-between;}
.fb-between h3{margin-bottom: 0;}
.fb-between .select_wrap{padding: 0;margin-bottom: 10px;}
.label{display: inline-block;vertical-align: middle;font-size: 15px;color: #666;}
.box .scroll_area{width: 100%;height: 100%;height: 500px;overflow:hidden;overflow-y: scroll;padding: 20px;}
.terms-text *{color: #333;}
.terms-text > h4{text-align: left;border-radius: 0;background-color: transparent;line-height: normal;height: auto;font-size: 22px;color: #333;}
.terms-text h5{font-size: 20px;line-height: 2;margin-top: 15px;}
.terms-text h5 img{margin-right: 6px;}
.terms-text h6{font-size: 18px;line-height: 2;margin-top: 10px;}
.terms-text p{font-size: 15px;line-height: 2;margin-top: 10px;font-family: 'Gsans';}
.terms-text pre{white-space-collapse:collapse;}
.terms-text strong{font-size: 18px;}
.terms-text table{margin: 20px auto;width: 100%;}
.img_table{margin:20px auto;}
.img_table>tbody>tr>td{border: 1px dashed black;padding: 5px 15px 5px 15px;text-align: center;width: 180px!important;}
.privacy_policy_table_rest_tr>td{font-size: 15px;text-align: left;width: 50%;padding: 1px!important; border-top: none!important;cursor: text;}
.privacy_policy_table_rest_tr>td>img, .privacy_policy_table_last_tr>td>img{max-width: 5%;vertical-align: middle;}
.privacy_policy_table_first_tr>td{text-align: center;padding: 1px!important;border-bottom: 1px dashed #ccc!important;border-top: none!important;cursor: text;}
.privacy_policy_table_last_tr>td{font-size: 15px;text-align: left;width: 50%;padding: 1px!important;border-bottom: 1px dashed #ccc!important;border-top: none!important;cursor: text;}

/*테이블*/
.tbl_area{width: 100%; border-top: 2px solid #5743cb; border-bottom:1px solid #958ebf; text-align: center}
.tbl_area th{font-size: 18px; background: #eef1fe; color: #4d399c; border: 1px solid #b4bad6; line-height: 17px; padding: 8px 5px 3px 5px; height: 50px}
.tbl_area td{padding: 7px 14px 5px; height: 40px; font-size: 15px; border: 1px solid #ddd; color: #666}


/*약관동의*/
.agree_wrapper{padding: 30px}
.agree_wrap {width: 100%; padding: 20px}
.agree_title{font-size: 25px; font-weight: 700; color: #5743cb; line-height: 35px; display: flex; flex-flow: row nowrap}
.agree_title div{font-size: 14px; font-weight: normal; display: inline-block}
.agree_box {
    overflow: hidden;
    overflow-y: auto;
    height: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.agree_check {margin: 15px 0 0; padding-left: 10px}
.agree_check.bg{background: #efefef; padding: 20px 10px; margin-top: 30px}
.agree_check input[type=checkbox] {width: 20px; height: 20px}
.agree_check input[type=checkbox] + label {font-size: 18px; font-weight: 500; line-height: 20px; color: #333}

.agree_info{display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; background: #eaeeff; font-size: 22px; color: #333; padding: 20px; font-weight: 700; margin-bottom: 30px}
.agree_info span{color: #5743cb}
.agree_info span.finish_date{display: block; font-size: 16px; margin-top: 15px; color: #666; font-weight: normal}
.agree_info button{width:150px!important; height: 45px!important; line-height: 49px!important; font-size: 22px!important; margin: 0 0 0 10px!important}


/* 체크박스 */
input[type='checkbox'] {display:inline-block;width:22px;height:22px;margin:0;padding:0;vertical-align:top;}
input[type='checkbox'] + label {padding:0 0 0 8px;font-size:1.6rem;font-weight:300;line-height:22px;vertical-align:top;color:#222;}

.agree_txt{padding-top: 15px; font-size: 15px}
.agree_wrapper button{width: 250px; height: 55px; line-height: 60px; font-size: 25px; margin: 0 10px}
.agree_wrapper button.mail{width: auto;font-size: 18px;height: 40px;line-height: 43px;}


/*인증*/
.certify_box {text-align: center; border: 1px solid #ddd; border-radius: 5px; padding: 30px}
.certify_box .info_desc01{font-size: 20px; padding:20px 10px; border-bottom: 1px solid #ddd; margin-bottom: 30px; word-break: keep-all}
.certify_box .info_desc02{font-size: 32px; font-weight: 700; color: #333; padding: 10px 0; word-break: keep-all}
.certify_box .info_desc02 span{color: #2457FF; line-height: 1.6}
.certify_box .info_desc03{font-size: 18px; padding: 10px 0; line-height: 25px; word-break: keep-all}
.certify_box .info_desc04{font-size: 18px; padding: 10px 0 30px 0; line-height: 25px; word-break: keep-all; color: #0E5DC9}
.certify_box ul{max-width: 500px; margin: 20px auto}
.certify_box ul.top_line{padding-top: 40px;border-top:1px dashed #e5e5e5;}
.certify_box ul li{text-align: left; font-size: 14px; line-height: 25px}
.certify_box .phone{display: flex; flex-flow: row; justify-content: center; align-items: center; border-radius: 50%; width: 150px; height: 150px; background: #efefef; margin: 20px auto}
.certify_box .phone img{max-width: 100%; max-height: 100%; vertical-align: middle}
.certify_box button{margin: 30px 0px}
.certify_box button:nth-of-type(2){margin-left: 5px;}
.certify_box .img_send_mail{margin: 50px 0;width: 90%;max-width: 400px;}
.certify_box .info-important{font-weight: 700}


/* 회원정보입력 */
.tbl_wrap{margin-bottom: 30px;}
.tbl_form{margin: 10px auto 0px;width: 100%;border-top: 2px solid #5743cb;}
.tbl_form colgroup col:first-of-type{width: 220px;}
.tbl_form td, .tbl_form th{padding: 12px 20px;font-size: 16px;}
.tbl_form th{background-color: #eaeeff;color: #4d399c;font-weight: 500;text-align: left;}
.tbl_form th .essential{color: #e40000;margin-right: 4px;;}
.tbl_form tr{border-bottom: 1px solid #ddd;}
.tbl_form button{height: 40px;font-size: 17px;line-height: 42px;min-width: 100px;width: auto;margin: 0 0 0 10px;}
input[type='text'], input[type='password'], input[type='number'], input[type='tel']{display: inline-block;vertical-align: middle;height: 40px; line-height: 41px;color: #333;border: 1px solid #ddd;border-radius: 5px;padding: 0 10px;letter-spacing: -0.5px;font-family: 'Gsans';font-size: 15px;}
input[type='radio']{display: inline-block;width: 20px;height: 20px;margin: 0;padding: 0;vertical-align: middle;margin-right: 8px;}
input[type='radio'] ~ label{display: inline-block;vertical-align: middle;margin-right: 10px;}
.tbl_form td .wfull{width: 100%;}
.tbl_form td .whalf{width: 50%;}
input[type='text']:read-only{background-color: #f5f5f5;color: #666;}
.tbl_form .summary{position: relative;margin-top: 10px;color: #999;line-height: 1.5;padding-left: 20px;}
.tbl_form .summary::before{content: '※';display: block;position: absolute;top: 0;left: 0;}
.tbl_form .summary .point_color{color: #4d399c}
.agree_title:last-of-type{margin-top: 30px;}
.email_wrap > span{margin: 0 6px;}
.tbl_form textarea{width: 100%;height: 80px;resize: none;border: 1px solid #ddd;border-radius: 5px;padding: 10px;font-family: 'Gsans';line-height: 1.4;}


/* 오류개선의견 등록 게시판 */
.tbl_form2{margin: 10px auto 0px;width: 100%;border-top: 2px solid #5743cb;}
.tbl_form2 td, .tbl_form2 th{padding: 12px 20px;font-size: 16px;}
.tbl_form2 th{background-color: #eaeeff;color: #4d399c;font-weight: 500;text-align: left; width:140px}
.tbl_form2 th .essential{color: #e40000;margin-right: 4px;;}
.tbl_form2 tr{border-bottom: 1px solid #ddd;}
.tbl_form2 button{height: 40px;font-size: 17px;line-height: 42px;min-width: 100px;width: auto;margin: 0 0 0 10px;}
.tbl_form2 td .wfull{width: 100%;}
.tbl_form2 td .whalf{width: 50%;}
.tbl_form2 .summary{position: relative;margin-top: 10px;color: #999;line-height: 1.5;padding-left: 20px;}
.tbl_form2 .summary::before{content: '※';display: block;position: absolute;top: 0;left: 0;}
.tbl_form2 .summary .point_color{color: #4d399c}
.tbl_form2 textarea{width: 100%;height: 80px;resize: none;border: 1px solid #ddd;border-radius: 5px;padding: 10px;font-family: 'Gsans';line-height: 1.4;}


.social_txt{font-size: 16px;display: inline-block;width: auto;line-height: 40px;}
.profile_input{position: relative;width: 100px;height: 100px;border-radius: 100px;overflow: hidden;border: 1px solid #e5e5e5;}
.profile_input img{height: 100%; width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.profile_input label{cursor: pointer;;position: absolute;width: 100px;height: 100px;top: 0;left: 0;border-radius: 100px;}
.profile_input input{position: absolute;display: block;width: 1px;height: 0px;top: 0;left: 0;}
.profile_input label span{position: absolute;bottom: 0;right: 0;left: 0;width: 100%;height: auto;padding: 8px 0;background-color: rgba(0,0,0,0.5);color: #fff;text-align: center;}
.resign{margin: 20px 0 50px;text-align: right;}
.resign a{color: #e40000;}



/*국제학교 선생님 회원가입*/
.down{background: #5743cb; font-size: 17px; padding:15px; border-radius: 7px; line-height: 20px; color: #fff; display: inline-block; margin-top: 20px; word-break: keep-all}
.down span{color: yellow}

.box_keris{background: #efefef; padding: 20px; display: flex; flex-flow: row nowrap; justify-content: center; margin-top: 30px; border-radius: 5px}
.box_keris p{font-size: 14px; text-align: left; padding: 8px 0 0 20px; word-break: keep-all}
.box_keris .box_keris_desc {display: flex; flex-direction: column}


/*비밀번호 찾기*/
.find_wrap {position: relative; max-width: 500px; margin: 0 auto}

.find_wrap > input{
	padding: 15px 10px 15px 45px;
	border-radius: 8px;
	border: 2px solid #ECECEC;
	display: flex;
	align-items: center;
	outline: none;
	background-color: #FFFFFF;
	font-family: NanumGothic;
	font-size: 16px;
	color: #000;
	margin-bottom: 14px;
	width: 100%;	
	height: 55px
}
.find_wrap > input:not(.readonly):focus {border-color: #9d93da;}
.find_wrap > input::placeholder{font-size:15px; color: #c3c3c3; font-family: 'Gsans'; letter-spacing: -1px}

.find_wrap span{
	content: "";
	display: block;
	left: 13px;
	top: 48%;
	transform: translateY(-40%);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
}

.find_wrap.email span{background-image: url('/resources/toctocmath/userImages/member/email-e40fc6c7c17202c1867f6e5ed86117a1.svg'); width: 28px;	height:20px;}
.find_wrap.email >input:not(.readonly):focus + span{background-image: url('/resources/toctocmath/userImages/member/email-active-b4db262a3357c296e5a2ef66cf714af1.svg');}

.find_wrap.password span{background-image: url('/resources/toctocmath/userImages/member/password-09e549dc66c9ace0e2d761b2cf9ba855.svg'); width: 22px; height:28px;}
.find_wrap.password >input:not(.readonly):focus + span {background-image: url('/resources/toctocmath/userImages/member/password-active-0b18817ed1c1f9c0671a83585f5d2e04.svg');}



.txt_email{font-size: 25px; font-weight: 700; color: #ff7200; padding:20px 10px; background: #efefef; max-width: 500px; margin: 0 auto; border-radius: 5px}

input::placeholder{color:#666!important}

/*회원 정보 수정 후 노출되는 로딩중 UI*/
/*rgba(0, 0, 0, 0.56) = #0000008f*/
.loading-container {position: fixed; left: 0; bottom: 0; display: flex; user-select: none; z-index: 9999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.56); justify-content: center; align-items: center;}
.loading-container-state-hidden {display : none;}
.loading-components {background-color: rgba(87, 67, 203, 1); border-radius: 10px; font-size: 20px; color: white;}
.loading-container > .loading-components > .loading-img {width : 30px; height : 30px; margin : 0 0 20px 0;}

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

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

	/*회원가입*/
	.join_wrap{padding:20px}
	
}


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

	/*로그인*/
	.login_wrap{padding:20px; height:auto}
	
	
	/*회원가입*/
	.join_wrap{height: auto; padding: 20px}
	.join_box{min-height: auto}
	
	
	/*회원가입유형 선택*/
	.join_tit{font-size: 27px; height: 60px; line-height: 65px}
	
	.join_type {padding: 20px}
	.join_type a .icon >img {width: 190px;	height: 190px}
	.join_type a .name {font-size: 27px}
	.join_type a .desc {font-size: 15px}
	
	/*인증*/
	.certify_box {padding: 20px}


}

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

.agree_info{flex-direction: column;}
.agree_info div{text-align: center}
.agree_info button{margin-top: 15px!important}
}


/* 770 */
@media (max-width: 770px) {
	
	/*로그인*/
	.login_wrap{padding:20px}
	.login_box{width: 100%}
	
	
	/*회원가입유형 선택*/
	.join_type {margin: 0 auto 30px auto}
	.join_type a .icon >img {width: 120px;	height: 120px}
	.join_type a .name {font-size: 20px}
	.join_type a .desc {font-size: 13px}
	
	
	/* 스크롤커스텀, 이용약관, 개인정보처리방침 */
	.fb-between{flex-flow: column;align-items: flex-start;}
	.fb-between .select_wrap{width: 100%;text-align: left;}
	.fb-between .select_wrap .label{margin-left: 0;}
	.scroll_box_x{width: 100%;overflow-x: scroll;}
	.scroll_box_x .tbl_notice{width: 800px;}
	.scroll_box_x .tbl_notice tbody tr{display: table-row;}
	
	/*약관동의*/
	.agree_wrapper{padding: 15px}
	.agree_wrap {padding: 10px}	
	.agree_title{flex-direction: column; line-height: 25px}
	.agree_wrapper button{width: 150px; height: 45px; line-height: 50px; font-size: 22px; margin: 0 5px}
	
	
	/*인증*/
	.certify_box .info_desc01{font-size: 17px}
	.certify_box .info_desc02{font-size: 29px}
	.certify_box .info_desc03{font-size: 16px}
	.certify_box ul li{line-height: 16px; padding-bottom: 10px}
	.certify_box button{margin: 20px 0px;}

	/* 회원정보입력 */
	.tbl_form tbody tr th, .tbl_form tbody tr td{display: block;width: 100%}
	.tbl_form button{width: auto}
	.email_wrap{display: flex;flex-flow: wrap;justify-content: flex-start;align-items: center}
	.tbl_form input[type='text'], input[type='password']{width: 100%;}
	.tbl_form .email_wrap input[type='text']{width: calc((100% / 2) - 16px);}
	.tbl_form .email_wrap button{width: 100%;margin: 10px 0 0 0 ;height: 40px;line-height: 42px;font-size: 17px;}
	.tbl_form .search_wrap input[type='text']{width: calc(100% - 135px);}
	.tbl_form .search_wrap button{width: auto;min-width: 120px;height: 40px;line-height: 42px;font-size: 17px;margin: 0 0 0 5px;}

	/* 오류개선의견 등록 게시판 */
	.tbl_form2 tbody tr th, .tbl_form2 tbody tr td{display: block;width: 100%}
	.tbl_form2 button{width: auto}
	.email_wrap{display: flex;flex-flow: wrap;justify-content: flex-start;align-items: center}
	.tbl_form2 input[type='text'], input[type='password']{width: 100%;}
	.tbl_form2 .email_wrap input[type='text']{width: calc((100% / 2) - 16px);}
	.tbl_form2 .email_wrap button{width: 100%;margin: 10px 0 0 0 ;height: 40px;line-height: 42px;font-size: 17px;}
	.tbl_form2 .search_wrap input[type='text']{width: calc(100% - 135px);}
	.tbl_form2 .search_wrap button{width: auto;min-width: 120px;height: 40px;line-height: 42px;font-size: 17px;margin: 0 0 0 5px;}
	
	
	/*국제학교 선생님 회원가입*/
	.down{margin-top: 10px}

	.box_keris{flex-direction: column; margin-top: 30px; padding: 10px}
	.box_keris p{padding:15px 5px 10px 5px; text-align: center; font-size: 13px}
}
   

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

	/*로그인*/
	.login_box{padding:15px}
	.login_box h2{font-size: 24px; margin: 30px 0 20px 0}
	.login_box h2 span{font-size: 15px}
	.login_box .text{line-height: 34px; font-size: 13px}
	
	.login_box .btn_school_login{width: 100%;  flex-direction: column}	
	.login_box .btn_school_login a{ margin-bottom: 10px}

	
	/* 로그인 탭 */
	.tab_login li a{font-size: 16px}
	
	
	/*아이디비번찾기 및 회원가입*/
	.find_btn a{font-size: 13px; padding: 0 3px}

	
	/*소셜 로그인*/
	.social_wrap div{width: 80%}
	
	
	/*회원가입유형 선택*/
	.join_tit{font-size: 25px; height: 50px; line-height: 55px}
	.join_txt{font-size: 20px; padding-bottom:10px}
	
	.join_type {flex-direction: column; padding: 15px; margin-bottom:10px}	
	.join_type a {height:100px;  border-bottom:1px solid #ddd}
	.join_type a:last-child{border-bottom:none}
	.join_type a .icon {left: 0; top: 10px; position: absolute}
	.join_type a .icon >img {width: 80px; height: 80px}
	.join_type a .name {padding-left: 100px; width: 100%; text-align: left; margin: 27px 0 5px 0}
	.join_type a .desc {padding-left: 100px; width: 100%; text-align: left}
		
	
	/* 개인정보처리방침 */
	.img_table>tbody>tr>td{padding: 8px;}
	.img_table>tbody>tr>td img{width: 50%;margin-bottom: 10px;}
	
	
	
	/*약관동의*/
	.agree_wrapper{padding: 10px}
	.agree_wrap {padding: 5px}
	.agree_title{font-size: 18px; margin-bottom: 5px}	
	.agree_check input[type=checkbox] + label {font-size: 15px}
	.agree_wrapper button{width: auto; padding: 0 30px}
	
	.agree_wrapper button.mail{font-size: 16px}
	

	.agree_info{font-size: 18px}
	.agree_info span.finish_date{font-size: 13px}
	.agree_info button{width: 100%!important; margin: 10px 0 0 0!important; font-size: 18px!important; height: 40px!important; line-height: 44px!important;}
	
	
	/*인증*/
	.certify_box {padding: 15px}
	.certify_box .info_desc01{font-size: 14px; padding:10px 5px}
	.certify_box .info_desc02{font-size: 22px}
	.certify_box .info_desc03{font-size: 14px; line-height: 17px}
	.certify_box .phone{width: 100px; height: 100px; margin: 10px auto}
	.certify_box .phone img{max-width: 80%; max-height: 80%}
	.certify_box ul{margin: 10px auto}
	.certify_box ul li{font-size: 13px; line-height: 16px}
	.certify_box button{margin: 15px 0px}
	.certify_box button.m_full{width: 100%;margin: 5px 0;}

	/* 회원정보입력 */
	.tbl_form .search_wrap input[type='text']{width: 100%;}
	.tbl_form .search_wrap button{width: 100%;margin: 10px 0 0 0; padding:0}
	

	
	/*비밀번호 찾기*/
	.find_wrap > input::placeholder{font-size:13px;}
}

.btn_edupass_login{width: 100%; height: 50px; line-height: 55px; border-radius: 5px; background: #071f63 url('/resources/toctocmath/userImages/member/edupass-1c405a721f008d94784ed7e067a108da.png') 50% center no-repeat; margin-bottom: 10px}