@charset "utf-8";

.login_Wrap{text-align:center;margin:0 auto;}
.login_Wrapjoin{}
.loginBox1{margin: 0 auto;border:10px solid #ddd; padding-top:50px; padding-bottom:50px;}
.loginBox2{background-color:#def1d6;width:375px;height:400px;float:left;margin:0 10px;padding:60px;}
.login_Wrap h3{font-size:1.5em; color:#000; padding-top:130px;}
.login_Wrap p{margin:15px 0 50px 0;line-height:1.6;}
.phone{background:url('../imgs/member/mobileIco.png') no-repeat 50% 0;}
.sns{background:url('../imgs/member/snsIco.png') no-repeat 50% 0;}
.certified_btn{background-color:#106fa5;border:1px solid #115a83;width:224px;height:55px;border-radius:0px;color:#fff !important;font-size:0.9em;display:block;margin:0 auto;}
.certified_btn1{background-color:#3c454a;border:1px solid #2a3034;width:224px;height:40px;border-radius:7px;color:#fff !important;font-size:1.1em;display:block;margin:0 auto;font-weight:300;padding:15px 0 0 0;}
.naverBtn{width:224px;height:55px;border-radius:7px;}
.teacherB{background-color:#e8ecf0;width:715px;height:400px;padding:60px;margin:0 auto;text-align:center;}
.teacherB div{background:url('../imgs/member/teacherIco.png') no-repeat 50% 0;}
.teacherB h3{font-size:1.9em;padding-top:150px;color:#000;}
.teacherB p{margin:15px 0 50px 0;line-height:1.6;font-size:1.17em;font-weight:300;color:#000;}
.loginC{padding:60px 60px 90px 60px;margin:0 auto;text-align:center; border: 10px solid #ddd;}
.loginC h3{position:relative; padding-top:100px; font-size:2.5em; font-family:'SCDream';color:#000;margin-bottom:30px;}
.loginC h3:before {position:absolute; top:-30px; left:47%; content:""; width:54px; height:163px; background:url('/home/imgs/contents/point.png') no-repeat; transform: scale(0.6);}
.loginC dl {position:relative; width:50%;margin:0 auto;}
.loginC dt {position:absolute; left:0; top:0; width:1px; height:1px; line-height:1px; font-size:1px; text-indent:-9999px;}
.loginC dd {float:left;width:100%;}
.loginC dd input {border:1px solid #707c8d;padding:13px 5%;width:100%;height:55px;box-sizing:border-box;}
.loginC dd input#info1{margin:0 0 8px;}
.loginC dd input.inpline {border-radius:0;}
.loginC button{background-color:#e83436; font-weight:600; border:1px solid #d61818;width:50%;height:55px;color:#fff !important; vertical-align:middle; font-size:0.9em;display:block;margin:10px auto;}
.loginC button:hover{text-decoration:underline;}
.loginC .join a {background-color:#5299a3;border:1px solid #47858d; font-weight:400; line-height:55px; width:50%;height:55px;color:#fff !important; vertical-align:middle; font-size:0.9em;display:block;margin:5px auto;}
.loginCbox{position:relative;background-color:#e8ecf0;width:835px;margin:0 auto;}
.loginCbox:before{position:absolute;top:20px;left:30px;width:83px;height:83px;content:'';display:block;background:url('../imgs/member/loginIco.png') no-repeat 50% 0;}
.loginCbox .c_list{margin-top:20px;padding:20px 20px 20px 135px;}
.loginCbox .c_list li{position:relative;text-align:left;font-size:0.9em;padding-left:8px;}
.loginCbox .c_list li:before{position:absolute;top:11px;left:0;width:3px;height:3px;content:'';display:block;background-color:#3c454a;}

@media all and (max-width:1060px) {
	.login_Wrap{width:100%;}
	.loginBox2{width:36%;margin:0 1%;padding:6%;}
	.teacherB{width:88%;margin:0 1%;padding:6%;}
	.loginCbox{width:100%;}
}
@media all and (max-width:768px) {
	.phone{background-size:100px;}
	.sns{background-size:100px;}
	.teacherB div{background-size:100px;}
	.login_Wrap h3{padding-top:120px;}
	.teacherB h3{padding-top:120px;}
	.loginBox1{width:88%;height:350px;}
	.loginBox2{width:88%;height:350px;}
	.loginC dl{width:70%;}
	.loginC button, .loginC .join a {width:70%;}
}
@media all and (max-width:640px) {
	.loginCbox .c_list{padding:20px;}
	.loginCbox:before{display:none;}
}
@media all and (max-width:480px) {
	.teacherB{height:320px;}
	.login_Wrap h3{font-size:1.2em;padding-top:100px;}
	.teacherB h3{font-size:1.45em;padding-top:100px;}
	.loginC h3{font-size:1.2em;margin-bottom:15px;}
	.phone{background-size:80px;}
	.sns{background-size:80px;}
	.teacherB div{background-size:80px;}
	.login_Wrap p{margin:10px 0 15px 0;font-size:0.95em;}
	.teacherB p{margin:10px 0 15px 0;font-size:1.1em;}
	.teacherB p br{display:none;}
	.certified_btn{width:214px;height:45px;}
	.certified_btn1{width:214px;height:33px;font-size:1em;padding:10px 0 0 0;}
	.naverBtn{width:214px;height:45px;}
	.loginC dl{width:80%;}
	.loginC button, .loginC .join a {width:80%;}
	.loginC dd input{}
	.loginC h3:before {top:0px; left:42%; background-size:50%;}
}
/* 회원가입 */
.join_wrap {width:70%; margin:0 auto; padding-top:50px;}
.join_wrap.w100{width:100%; padding-top:0px;}
.join_step{width:100%; font-size:0; position:relative; height:auto; }
.join_step::before{content:""; display:block; width:100%; height:7px; border-radius:10px; background-color:#dbdee1; position:absolute; left:0; top:34px; z-index:0;}
.join_step li{width:25%; text-align:center; font-size:0; display:inline-block; vertical-align:top; position:relative; z-index:1;}
.join_step li span{width:70px; height:70px; 
    font-family: 'Roboto',sans-serif; display:block; margin:0 auto; border-radius:50%; -webkit-border-radius:50%; border:3px solid #dbdee1; box-sizing:border-box; background-color:#fff; text-align:center; font-size:22px; font-weight:600; color:#95979d; text-align:center; line-height:64px;}
.join_step li b{font-size:22px; font-weight:500; color:#8a8b90; text-align: center; display: block; line-height:1em; margin-top:12px;}
.join_step li.on span{color:#fff; background-color:#00589e; border-color:#00589e;}
.join_step li.on b{color:#000;}

.join_in {margin-top:50px; border:1px solid #ddd; padding:0px 100px 80px 100px;}
.join_wrap input[type=checkbox] + label {font-size:1.2rem; vertical-align:text-top; line-height: 1.0;}
.join_wrap input[type="checkbox"] {width:25px; height:25px; border:1px solid #999; border-radius:2px; margin:0 10px 0 0;}

@media all and (max-width:1024px) {
	.join_wrap {width:100%;}
	.join_in {padding:0px 70px 80px 70px;}
	.loginC {padding:60px 30px 90px 30px;}
}
@media all and (max-width:480px) {
	.join_in {padding:0px 40px 50px 40px;}
	.join_in .conH3 {font-size:19px;}
	.join_step li b {font-size:18px;}
}