@CHARSET "UTF-8";
/*---------------------------------------------------------------*/
/*교과연계-사용자-추가정보입력 css파일
/*author:조윤주
/*update:2017.04.06
/*---------------------------------------------------------------*/	


body{width:100%;}
.content_inner {
    margin:0 auto; width: 1200px;
    min-height: 880px; height:100%;
    border-right: 1px solid rgba(220, 220, 220, 0.5);
    border-left: 1px solid rgba(220, 220, 220, 0.5);
    font-family:'Nanum Gothic', sans-serif;
}
/*로그인*/
/*회원가입 부분  */
.join_body{width:1200px;margin-left:auto; margin-right:auto;}

.join_wrap{
	width:900px;padding-top:66px;
	font-size:26px;font-weight:bold;
	color:#323232;
	}
.width_left{float:left;width:400px;text-align:center;margin-right:50px}
.width_right{float:left;width:400px;text-align:center; border-left: 1px solid rgba(220, 220, 220, 0.5); box-sizing:border-box; padding-left:50px}
.width_mid{margin:0 auto;width:400px;text-align:center;}
.h4_wrap{padding-bottom:40px; width:400px; margin: 0 auto;}
.h4_font{font-size:24px;color:#323232;font-weight:bold;}
.join_email_address{
	position:relative; top:-2px;width:188px;height:40px;
	color:#b4b4b4;border:1px solid rgba(220, 220, 220, 0.5);font-weight:bold;
	text-indent:5px; box-sizing:border-box;
	}
.join_domain{
	width:182px;height:40px;
	border:1px solid rgba(220, 220, 220, 0.5);font-weight:bold;
	color:#b4b4b4;text-indent:5px;
	}
.join_pw{padding-top:15px;}
.join_input_400{
	width:400px;height:40px;
	border:1px solid rgba(220, 220, 220, 0.5);color:#b4b4b4;font-weight:bold;
	text-indent:5px;box-sizing:border-box;
	}
.join_input_400:ms-input-placeholder,
.join_email_address:ms-input-placeholder,
.join_input_400:ms-input-placeholder,
.login_email_address:ms-input-placeholder,
.login_input_400:ms-input-placeholder,
.login_password:ms-input-placeholder
{color:#c8c8c8;}
.join_input_400::-webkit-input-placeholder,
.join_email_address::-webkit-input-placeholder,
.join_domain::-webkit-input-placeholder,
.login_email_address::-webkit-input-placeholder,
.login_domain::-webkit-input-placeholder,
.login_password::-webkit-input-placeholder
{color:#c8c8c8;}
	
/* .join_check{height:35px;} */
.join_check{height:35px;width: 400px; margin: 0 auto;}
.join_ok_button{width:400px;height:40px;border-radius: 6px; background-color:#3c96d2;padding:auto;}
.join_font_2{font-family: 'Nanum Gothic', sans-serif; font-weight:bold; font-size:14px; color:#323232;}
.passwordview{float:right; margin-top:10px; margin-right:3px;}


.login_body{width:1200px;margin-left:auto; margin-right:auto;}
.h2_login{
	float:left;margin-top:50px;width:100%;	
	font-size: 26px;font-weight:bold;color: #323232;text-align:center;	
	}
.login_wrap{
	width:900px;padding-top:66px;
	font-size:26px;font-weight:bold;
	color:#323232;
	}
.login_font{font-size:26px;font-weight:bold;font-family: 'Nanum Gothic', sans-serif;color:#323232;}
.login_email_address{
	position:relative; top:-2px;
	width:188px;height:40px;color:#b4b4b4;font-weight:bold;
	border:1px solid rgba(220, 220, 220, 0.5);text-indent:5px; box-sizing:border-box;
	}

.login_domain{
	width:182px;height:40px;font-weight:bold;
	/*border:1px solid rgba(220, 220, 220, 0.5);*/ color:#b4b4b4;text-indent:5px;
	}
.login_pw{padding-top:15px;}
.login_password{
	width:400px;height:40px; border:1px solid rgba(220, 220, 220, 0.5);font-weight:bold;
	color:#b4b4b4;text-indent:5px;box-sizing:border-box;
	}
.login_check{height:45px;}
.login_checkbox{width:20px;height:20px; border:1px solid rgba(220, 220, 220, 0.5);}
.login_check>span{font-family: 'Nanum Gothic', sans-serif;font-weight:bold; font-size:12px; color:black;} 
.login_button{width:400px;height:40px;border-radius: 6px; background:#3c96d2;}
.login_ok{font-family: 'Nanum Gothic', sans-serif;font-weight:bold; font-size:15px; color:white;line-height:40px;}
.join_button{position:relative; right:-11px;border-radius: 6px;background-color:#232837; padding-top:6px; padding-bottom:10px;text-align:center;}
.join_ok{width:140px;height:40px;  font-family: 'Nanum Gothic', sans-serif;font-weight:bold; font-size:12px; color:white; }
.social_wrap{margin-bottom:28px;height:42px}

/*다시*/
.content_logo {
	position:relative; width: 1200px;height: 130px;
	border-bottom:;
	}
.img_x{float: right; margin-top: 15px;margin-right:15px;}
.img_x:active{opacity:0.7}
.img_center_logo{padding-top: 50px;}
/*3.*/
.content_all {width:900px;margin:0 auto;}
.content_nav{
	width:900px;height:90px; 	
	text-align: center; border-bottom: 1px solid rgba(220, 220, 220, 0.5);
	}
.h2_add{
	padding-left: 5px;	float:left;margin-top:50px;	
	font-size: 26px;font-weight:bold;color: #323232;	
	}
.nav_wrap{float: right;	padding-top:62px;}
.nav_inner{float:left; height:28px;}
.nav01{
	display:inline-block;width:100px;height:27px;
	font-size: 14px;font-weight:bold; color: #323232; }

.nav01:hover, .nav01_on{
	box-sizing:border-box;
	color:#3c96d2;border-bottom:2px solid #3c96d2;cursor: default;
	}/*클릭했을 때에도 이 스타일 적용*/


/*position 설정.  */
.position_absolute{position:absolute;}
.position_relative{position:relative;}
/*블럭설정.  */
 .block { display: block; }
.inline { display: inline; } 
.inline_block { display: inline-block; }
/*텍스트설정.  */
.t_l, .txt_left, .txt_l { text-align: left !important; }
.t_c, .txt_center, .txt_c { text-align: center !important; }
.t_r, .txt_right, .txt_r { text-align: right !important; }
/*margin  */
.m_0 { margin: 0 !important; }
.m_1 { margin: 1px !important; }
.m_2 { margin: 2px !important; }
.m_3 { margin: 3px !important; }
.m_4 { margin: 4px !important; }
.m_5 { margin: 5px !important; }
.m_6 { margin: 6px !important; }
.m_7 { margin: 7px !important; }
.m_8 { margin: 8px !important; }
.m_9 { margin: 9px !important; }
.m_10 { margin: 10px !important; }
.mt_0 { margin-top: 0 !important; }
.mt_1 { margin-top: 1px !important; }
.mt_2 { margin-top: 2px !important; }
.mt_3 { margin-top: 3px !important; }
.mt_4 { margin-top: 4px !important; }
.mt_5 { margin-top: 5px !important; }
.mt_6 { margin-top: 6px !important; }
.mt_7 { margin-top: 7px !important; }
.mt_8 { margin-top: 8px !important; }
.mt_9 { margin-top: 9px !important; }
.mr_0 { margin-right: 0 !important; }
.mr_1 { margin-right: 1px !important; }
.mr_2 { margin-right: 2px !important; }
.mr_3 { margin-right: 3px !important; }
.mr_4 { margin-right: 4px !important; }
.mr_5 { margin-right: 5px !important; }
.mr_6 { margin-right: 6px !important; }
.mr_7 { margin-right: 7px !important; }
.mr_8 { margin-right: 8px !important; }
.mr_9 { margin-right: 9px !important; }
.mr_20 { margin-right: 20px !important; }
.mb_0 { margin-bottom: 0 !important; }
.mb_1 { margin-bottom: 1px !important; }
.mb_2 { margin-bottom: 2px !important; }
.mb_3 { margin-bottom: 3px !important; }
.mb_4 { margin-bottom: 4px !important; }
.mb_5 { margin-bottom: 5px !important; }
.mb_6 { margin-bottom: 6px !important; }
.mb_7 { margin-bottom: 7px !important; }
.mb_8 { margin-bottom: 8px !important; }
.mb_9 { margin-bottom: 9px !important; } 
.mb_auto{	margin-bottom:auto;	}
.ml_0{margin-left:0px;}
.ml_20{margin-left:20px;}
.ml_50{margin-left:10%;}
.ml_auto{margin-left:auto;}
.mr_auto{margin-right:auto;}
.mr_10{margin-right:10px;}
.mr_60{margin-right:10%;}
.mr_80{margin-right:80px;}
.mr_100{margin-right:100px;}
.mt_auto{margin-top:auto;}
.mr_50{margin-right:55px;}
.mt_40{margin-top:40px;}
.mb_30{margin-bottom:30px;}
.mr_40{margin-right:40px;}
.pt_13{margin-top:13px;}
.pt_10{margin-top:30px;}
.mb_10{margin-bottom:10px;}
.mt_10{margin-top:10px;}
.mr_30{margin-right:20px;}
.t_m10{top:-5px;}
.t_m5{bottom:-5px;}
.h_30{height:30px;}
.h_40{height:40px;}
.font_size_12{font-size:12px;}
/*float  */
.fr{	float:right;	}
.fl{	float:left;	}
/*top  */
.t_290{top:285px;}
/*right  */
.r_0{right:0;}
.width_100{width:100px;}
.height_2{height:2px;}
.t_10{bottom:10px;}
.width_500{width:500px;}
.width_500_sns{margin:0 auto; width:700px;}
.pl_100{padding-right:100px;}
.pr_100{padding-right:100px;}

.font_family{font-weight:normal;font-size:16px;}


@media screen and (max-width: 1200px){
  .join_body{width: 100%}
  .join_wrap {
      width: 90%;
      margin:0 auto;}
.content_inner{width: 100%;border: none;}
.content_logo {width: 100%;}
.content_all{width: 100%;}
.content_nav{margin: 0 auto;width: 90%;}
.login_wrap{width: 100%;height: 100%}
.width_left, .width_right{
    width: 49%;
    text-align: center;
    margin-right: 0;
}
.width_right{
  width: 49%;
  text-align: center;
  padding-left:0
}
.h4_wrap{width: 96%}
.pr_100{padding-right: 0;}
}
@media screen and (max-width: 960px){
.width_left,.width_right{float: none;width: 100%;border: none;}
.width_right{margin: 65px 0;}
.width_right .h4_wrap{padding-top: 50px;border-top:1px solid rgba(220, 220, 220, 0.5); width: 420px}
.content_logo {display:none;}
.mr_60{margin-right:2%}
}
@media screen and (max-width: 768px){
}
@media screen and (max-width: 450px){
	.content{margin-top:50px;}
  .width_right .h4_wrap{width: 97%}
  .h4_wrap{padding-top: 27px;}
  .login_wrap{padding-top: 26px;}
  .join_wrap{padding-top: 30px;width: 100%}
  .login_domain,.login_email_address,.join_email_address,.join_domain{
    width: 140px;
  }
  .login_password,.join_input_400{width:308px;}
  .login_button,.join_ok_button{width:308px}
  .social_wrap img{width: 90%}
  .social_wrap{margin-bottom: 10px;}
  .join_button{right:0; padding-top: 0; margin-top: 5px;}
  .ml_50{margin-left: 0}
  .mr_60{margin-right: 3%}
  .width_mid{min-width: 320px;width:auto;}
  .join_check{width:300px;}
/*-----단계------------*/
.h2_add,.h2_login{margin-top: 20px;font-size: 22px}
.content_nav{height: 60px;border-bottom: none;}
.nav_wrap{float: none;}
.nav_inner{
  width: 100%;
  height: 22px;
  margin-top: 5px;
  border-bottom:1px solid rgba(220, 220, 220, 0.5)
}
.nav01{width: 32%;font-size: 13px}
.nav01:hover, .nav01_on{border-bottom:none;}
.h4_font{font-size:20px}
.login_wrap{padding-top: 27px;}
.font_size_12{line-height: 22px;padding: 10px 0;display: block}
.content_all .border{border-bottom:1px solid rgba(220, 220, 220, 0.5)}
}