@charset "utf-8";
@import url(//cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css);
@import url(//cdn.jsdelivr.net/font-nanum/1.0/nanummyeongjo/nanummyeongjo.css);

body{
	font-family: 'Nanum Gothic',Arial, sans-serif;
	font-size:14px;
}
html, body, div, span, applet, embed, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,tr, th, td {
	margin:0;
	padding:0;
	border:0;
	line-height:normal;
}
ul,li{
	list-style: none;
	margin:0;
	padding:0;
}
input,i{
	vertical-align:middle;
}

.login_area {
	width:100%;
	border-radius:10px 10px;
	background-color:#ffffff;
	height:534px;
}
.login_area.step1 {
	height:591px;
}
img{
	/*width:100%;*/
}
.login_area .social{
	width:100%;
	margin:20px 0;
	text-align:center;
}
.login_area .social .title , .login_area .member .title{
	font-size:14px;
	margin:10px 0;
	text-align:center;
}
.login_area .social ul{
	width:100%;
	margin:auto;
}
.login_area .social ul > li{
	display:inline-block;
	width:24%;
	text-align:center;
}
.login_area .social.reg_gate ul > li{
	display:inline-block;
	width:45%;
	text-align:center;
	line-height: 40px;
}
.login_area .logo{
	width:100%;
	text-align:center;
	padding:20px 0px;
}
.login_area .title{
	font-family: 'Nanum Myeongjo';
	font-size:20px;
	color:#828282;
	margin:5px 0;
}
.member{
	margin:20px 0;
}
.member .input_icon {
	position:relative;
	width:80%;
	margin: 10px auto;
}
.member input {
	display: block;
	width: 100%;
	height: 39px;
	/*margin: 5px auto;*/
	padding: 11px 0 11px 20px;
	border: 1px solid #a9acad;
	border-radius: 5px;
	text-indent: 33px;
	font-size: 20px;
	color: #a9acad;
	-ms-ime-mode: disabled;
	
}
.member .input_icon .icon{
	position:absolute;
	top:0;
	left:10px;
	font-size:40px;
	line-height:65px;
	color:#828282;
}

.member .find_member{
	text-align:right;
	padding-right:10%;
	font-size:14px;
}
.member .find_member a{
	text-decoration:none;
	color:#828282;
}
.member .login_button_area , .user_info .login_button_area{
	width:100%;
	text-align:center;
	margin:10px 0;
}
.member .login_button_area i, .user_info .login_button_area i{
	vertical-align:baseline;

}
.login_area .term_area{
	width:100%;
	text-align:center;
	height:auto;
}
.login_area .term_area .term_box{
	text-align:left;
	width:45%;
	height:auto;
	display:inline-block;
	margin:0 5px;
}
.login_area .term_area .term_box .term_title{
	margin-bottom:5px;
}

.login_area .term_area .term_box .term{
	color:#828282;
	font-size:11px;
	width:100%;
	height:100px;
	display:inline-block;
	overflow:hidden;
	overflow-x: hidden;
	overflow-y: scroll;
	border:1px solid #828282;
	padding:4px 4px;
}
.login_area .term_area .term_box .term strong{
	font-size:11px;
}

.user_info{
	width:100%;
	text-align:center;
}

.user_info input[type=text] {
	display: inline-block;
	width: 100%;
	height: 25px;
	/*margin: 5px auto;*/
	padding: 5px 0 5px 20px;
	border: 1px solid #a9acad;
	border-radius: 5px;
	text-indent: 33px;
	font-size: 15px;
	color: #a9acad;
	-ms-ime-mode: disabled;
}
.user_info input[readonly]{
	color:#ffffff;
	background-color:#adadad;
}

.user_info .input_icon .icon{
	position:absolute;
	top:0;
	left:10px;
	font-size:20px;
	line-height:37px;
	color:#828282;
}
.user_info .input_icon {
	position:relative;
	display:inline-block;
	width:37%;
	margin: 10px 0 5px 0;
}
.user_info .label{
	color:#00addf;
}
.user_info .marketing_agree{
	display:inline-block;
	width:42%;
	margin:0 30px;
}
.agree_ment{
	font-size:12px;
	color:#828282;
	padding-left:10%;
	margin-bottom:20px;
}

.reg_gate_title > p{
	text-align:center;
	font-size:20px;
	font-weight:bold;
	margin:10px 0;
}
/* Shared */
.loginBtn {
  box-sizing: border-box;
  position: relative;
  /* width: 13em;  - apply for fixed size */
  /*margin: 0.2em;*/
  padding: 0 15px 0 46px;
  border: none;
  text-align: center;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 14px;
  color: #FFF;
  width:90%;
}
.loginBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}
.loginBtn:focus {
  outline: none;
}
.loginBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}
.loginBtn:hover {
	cursor: pointer;
}

.loginBtn[disabled]{
	opacity: 0.4;
	filter: alpha(opacity=40);
	cursor:not-allowed;
}

/* naver */
.loginBtn--naver {
  background-color: #1EC800;
  /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
  /*text-shadow: 0 -1px 0 #354C8C;*/
  font-weight:bold;
}
.loginBtn--naver:before {
  border-right: #2db620 1px solid;
  background: url('/social/icon_naver.png') 6px 6px no-repeat;
}
.loginBtn--naver:hover,
.loginBtn--naver:focus {
  background-color: #20d600;
}

/* Facebook */
.loginBtn--facebook {
  background-color: #3d5b9c;
  background-image: linear-gradient(#3d5b9c, #3B55A0);
  /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
  text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
  border-right: #364e92 1px solid;
  background: url('/social/icon_facebook_new.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
  background-color: #5B7BD5;
  background-image: linear-gradient(#5B7BD5, #4864B1);
}

/* 카카오 */
.loginBtn--kakao {
  /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  background: #ffeb00;
  color:#3c1e1e;
  text-shadow: 0 -1px 0 #4a3535;
}
.loginBtn--kakao:before {
  border-right: #e0d52e 1px solid;
  background: url('/social/icon_kakao.png') 6px 6px no-repeat;
}
.loginBtn--kakao:hover,
.loginBtn--kakao:focus {
  background: #ffde00;
}

/* Google */
.loginBtn--google {
  /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  background: #DD4B39;
}
.loginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('/social/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
  background: #E74B37;
}

/* 회원로그인 */
.loginBtn--member {
  /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  background: #00addf;
  padding: 15px 15px;
  font-size:20px;
  width:80%;
  margin:auto;
}
.loginBtn--member:hover,
.loginBtn--member:focus {
  background: #34bbe2;
}

.loading-bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1042;
	overflow: hidden;
	position: fixed;
	background: #0b0b0b;
	opacity: 0.8;
	filter: alpha(opacity=80);
}