@charset "UTF-8";

.login{border:1px solid #ccc;padding:35px 0;}
.login ul li{width:33.3%;text-align:center;border-right:1px solid #e5e5e5;padding:2.5%;float:left;box-sizing:border-box;}
 
.login ul li p{background:url('/base/imgs/cmmn/loginIco1.png') no-repeat center top;padding:150px 0 30px 0;font-size:1rem;line-height:1.6;}
.login ul li:nth-child(2) p{background:url('/base/imgs/cmmn/loginIco2.png') no-repeat center top;}
.login ul li:nth-child(3){border-right:0;}
.login ul li:nth-child(3) p{background:url('/base/imgs/cmmn/loginIco3.png') no-repeat center top;}
.login ul li:nth-child(4) p{background:url('/base/imgs/cmmn/loginIco4.png') no-repeat center top;}

.login h3{font-size:1.5rem;margin:0 0 40px 0;color:#033ea0;}
.login .phoneBtn{margin:0 auto;background:#145a9c url('/base/imgs/cmmn/loginCheck.png') no-repeat 30px center;border-radius:5px;border:0;cursor:pointer;color:#fff;height:60px;width:80%;font-size:1rem;}
.login .epkiBtn{margin:0 auto;background:#3e454c url('/base/imgs/cmmn/loginCheck.png') no-repeat 30px center;border-radius:5px;border:0;cursor:pointer;color:#fff;height:30px;width:80%;font-size:1rem;display:block;padding:15px 0;}
.login .faceBtn{background:#335191 url('/base/imgs/cmmn/loginCheck.png') no-repeat 30px center;border-radius:5px;border:0;cursor:pointer;color:#fff;height:30px;width:80%;font-size:1rem;display:block;padding:15px 0;}

.login_box{padding:60px 0;}
.ContainerIn{border:1px solid #ccc;}
.inner_wrap{width:30%;margin:0 auto;}
.loginText{background:url('/base/imgs/cmmn/loginIco5.png') no-repeat center top;padding:120px 0 0 0;text-align:center;font-size:1.4rem;font-weight:bold;margin-bottom:2rem;}
.login_type li{margin-bottom:0.3rem;}
.login_type label{display:none;}
.login_type input{height:3rem;width:100%;font-size:1rem;box-sizing:border-box;padding:5px;}
.inner_wrap .submit{background:#282828;color:#fff;font-size:1.2rem;font-weight:bold;width:100%;border:0px;height:60px;margin-top:2rem;cursor:pointer;}

.inner_wrap .submit:hover, .inner_wrap .submit:focus {background-color:#fff;color:#282828;border:2px solid #282828;}
.warning{margin-top:3rem;font-size:1rem;}

.agreecheck{margin:20px auto;width:355px;}
.agreecheck li{float:left;margin:0 20px;}
.agreecheck input{float:left;width:30px;height:30px;margin:0 -30px 0 5px;}
.agreecheck label.agreeOn {display:inline-block;font-size:1rem;overflow:hidden;min-height:30px;padding:0 0 0 35px;background:url("/base/imgs/contents/joinCheck_on.png") no-repeat;line-height:26px;text-align:left;cursor:pointer;}
.agreecheck label.agreeOff {display:inline-block;font-size:1rem;overflow:hidden;min-height:30px;padding:0 0 0 35px;background:url("/base/imgs/contents/joinCheck_off.png") no-repeat;line-height:26px;text-align:left;cursor:pointer;}
.btn_bbig strong{padding:10px;width:100px;font-size:1rem;text-align:center;}
 
.ContainerIn_join{position:relative;border:1px solid #ccc;padding:50px 100px;}
.ContainerIn_join:after{position:absolute;right:-1px;top:-1px;content:'';display:block;background:url('/edu/imgs/contents/paperBg.png') no-repeat right top;width:94px;height:94px;}
.ContainerIn_join .join_type li{padding:20px 0;border-bottom:1px solid #ddd}
.ContainerIn_join .join_type li:last-child{border-bottom:0;}
.ContainerIn_join .join_type li input{border:1px solid #ddd;height:30px;padding:5px;width:200px;float:left;margin:8px 0;}
.ContainerIn_join .join_type .txt p{float:left;width:20%;padding:15px 0 15px 20px;margin-right:20px;}
.ContainerIn_join .join_type li div a{padding:2px 20px;margin:8px 0 0 5px;}

.joinBox{border:1px solid #e2e2e2;height:200px;overflow-y:scroll;font-size:1rem;padding:20px;color:#666;}
.joinBox:focus{outline:1px dotted;}

.pass{float:left;margin-left:10px;font-size:0.9rem;padding:10px 0 0 0;}

.mypageBox{position:relative;border:1px solid #ccc;padding:100px;}
.mypageBox:after{position:absolute;right:-1px;top:-1px;content:'';display:block;background:url('/edu/imgs/contents/paperBg.png') no-repeat right top;width:94px;height:94px;}
.mypageBox table tr td{height:60px;}

@media all and (max-width:1300px){
	.login{border:0;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0;}
	.login ul li{padding:50px 10px;border-right:1px solid #ccc;border-top:1px solid #ccc;}
	.login .phoneBtn, .login .epkiBtn, .login .faceBtn{width:60%;margin:0 auto;}
	 
	.login ul li:nth-child(3){border-right:1px solid #ccc;}
	.inner_wrap{width:45%;}
	.login .epkiBtn{background:#3e454c;}
	.login .phoneBtn{background:#145a9c;}
	
}
 

@media all and (max-width:930px){
	.login .phoneBtn, .login .epkiBtn, .login .faceBtn{background-image:none;}
	.inner_wrap{width:60%;}
	.loginText{font-size:1.2rem;}
	.login ul li{width:100%;}
	.mypageBox{padding:50px;}
	.mypageBox:after{background-size:60%;}
	
}

@media all and (max-width:768px){
	
	.inner_wrap{width:90%;}
	.ContainerIn_join{padding:20px;}
	.ContainerIn_join .join_type li{padding:10px 0;}
	.ContainerIn_join .join_type .txt p{padding:8px 0 8px 10px;} 
	.mypageBox table tr td{height:auto;text-align:center;}	
	.mypageBox{padding:30px;}
}

@media all and (max-width:552px){
	
	.ContainerIn_join .join_type .txt p{float:none;margin-right:0;background:#fff;width:100%}
	.ContainerIn_join .join_type li input{float:none;display:block;}
	.ContainerIn_join .join_type li div a{margin:0;}
	.joinBtn{text-align:center;}
	.ContainerIn_join:after{background-size:60%;}
	
}


@media all and (max-width:480px){
	.loginText{font-size:1.1rem;}
	.inner_wrap .submit{font-size:1rem;}
}

@media all and (max-width:375px){
	.agreecheck li {width:100%; margin-bottom:5px;}

	}