/* ip_check layer */
@-webkit-keyframes ip_check_dim_move {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ip_check_dim_move {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@-webkit-keyframes ip_check_move {
	from {
		-webkit-transform: translate3d(0,-50%,0);
		opacity: 0;
	}
	to   {
		-webkit-transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@keyframes ip_check_move {
	from {
		transform: translate3d(0,-50%,0);
		opacity: 0;
	}
	to   {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}
#ip_check_dim.dim {
	opacity: 1;
	display: none;
}
#ip_check_dim.dim.active {
	animation: ip_check_dim_move 0.3s linear;
	display: block;
}
#ip_check_box {
	position: absolute;
	width: 340px;
	top: 50%; margin-top: -60px;
	left: 50%; margin-left: -170px;
	background-color: #111;
	border: 2px solid #810185;
	text-align: center;
	padding: 20px 0;
	z-index: 200;
	box-sizing: border-box;
	transform: translate3d(0,0,0);
	opacity: 1;
	display: none;
}
#ip_check_box.active {
	animation: ip_check_move 0.3s linear;
	display: block;
}
#ip_check { margin-bottom: 15px; font-size: 1.4rem; line-height: 2rem; }


.move_ground { z-index: 5; }
.login_dim.active {
	position: fixed; z-index: 11;
	top: 0; right: 0; left: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}
.login_box {
	display: block; width: 570px;
	position: fixed; top: 60%; left: 50%;
	margin-top: -222px; margin-left: -285px;
	background: #000; z-index: 0;
	border-radius: 10px;
	overflow: hidden; opacity: 0;
	border: 5px solid #ffcc00;
}
.login_box.active {
	opacity: 1; top: 50%; z-index: 12;
}
.login_tit {
	text-align: center;
	width: 100%; height: 120px; position: relative; margin: 0;
	background-image: url('/s/front/images/hd/login_tit.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top left; 
}
.btn.round.login_close {
	background-color: #000;
	color: #fff;
}
.login_tit p { line-height: 120px; z-index: 4; position: relative; font-weight: bold; font-size: 1.6rem; color: #fff; }
.login_tit .btn {
	position: absolute; top: 50%; right: 20px; margin-top: -20px; z-index: 4;
}
.login_form_box {
	padding: 40px 0;
}
.login_input_box {
	width: 60%; position: relative; margin: 0 auto 10px auto;
	font-size: 0; word-break: break-all; word-spacing: 0;
}
.login_input_box label {
	display: inline-block; color: #fff;
	width: 60px; height: 46px; position: absolute;
	top: 0; left: 0; text-align: center;
	height: 46px; line-height: 46px;
	font-size: 12px; font-size: 1.2rem;
}
.login_input_box input {
	outline: none;
	display: inline-block;
	width: 100%; height: 46px; line-height: 42px;
	padding-left: 70px;
	color: #fff;
	font-size: 16px; font-size: 1.6rem;
	border: double 2px transparent;
	background-color: #1f1f1f;
	border-radius: 4px;
}
.login_input_box input:focus {
	border: 2px solid #ffcc00;

}
.login_input_box input:focus + label {
	color: #fff;
}

.login_input_box img { vertical-align: middle; overflow: hidden; display: inline-block; width: 42%; height: 46px; border-radius: 4px; }
.capcha-refresh { text-align: center; font-size: 1.6rem; display: inline-block; width: 16%; vertical-align: middle; }
.login_input_box input.w-42 { padding: 0 5px; width: 42%; vertical-align: middle; }

.login_btn_box {
	width: 60%; position: relative; margin: 0 auto 10px auto;
	text-align: center; font-size: 1.4rem;
}
.login_btn_box span { line-height: 50px; color: #999; }
.login_btn_box a.signup { line-height: 50px; color: #09b9ff; }
.login_btn_box a.signup:hover { text-decoration: underline; }
.login_btn_box .btn {
	font-family: 'NanumSquareExtraBold';
	display: inline-block;
	width: 100%; height: 50px; line-height: 50px; text-align: center;
	position: relative;
	overflow:hidden;
	background-color: #ffcc00;
	border-radius: 4px;
}
.login_btn_box .btn:hover {
	background-color: #62ca1d;
}

.login_btn_box .btn span {
	display: block; width: 100%; height: 100%;
	position: absolute;
	top: 0; left: 0;
	text-align: center; line-height: 50px;
	color: #000; font-size: 18px; font-size: 1.8rem;
	transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
}
.login_btn_box .btn:hover span { color: #fff; }



.main_recomCodeD { z-index: 100; display:none; width: 100%; height: 100%; position:fixed; top:0; left:0; background:rgba(0, 0, 0, 0.5); }
.recomCodeW {
	text-align: left;
	z-index: 50; box-sizing: border-box;
	width: 340px; height: 240px; padding: 15px 15px;
	position: fixed; top: 50%; left: 50%; margin-top: -120px; margin-left: -170px;
	color:#666; border-radius: 10px;
	background: #111;
}
.recomCodeW h2 { color: #fff; font-size: 18px; font-size: 1.8rem; font-weight: bold; margin-bottom: 10px; }
.recomCodeW input {
	color: #fff; outline: none; display: block; box-sizing: border-box;
	width: 100%; height: 50px; line-height: 50px; font-size: 30px; font-size: 3.0rem;
	padding: 0 14px; border: none; border-radius: 5px;
	background: #000; text-align: center;
}
.recomCodeW input:focus {
	border: 2px solid #ffcc00;
}
.recomCodeW p { font-size: 14px; padding: 15px 0; }

.recomBtnW { text-align: center; width: 100%; padding:15px 0; overflow:hidden; }
.recomBtnW a { font-size: 16px; font-size: 1.6rem; border-radius: 5px; display: inline-block; width: 110px; height: 36px; line-height: 36px; text-align: center;}
.recomBtnW a.recomBtn {
	background: #ffcc00; color: #000;
}
.recomBtnW a.recomClose { background: #222; color: #fff;}
.recomBtnW a.recomBtn:hover { 
	background: #62ca1d;
	color: #fff; 
}
.recomBtnW a.recomClose:hover { background: #2f2f2f; color: #fff; }

@media all and (max-width:640px){
	.move_ground { padding-top: 0; }
	.login_box {
		width: 94%; margin-left: -47%;
	}
	.login_input_box,
	.login_btn_box {
		width: 90%;
	}
	.login_tit { height: 80px; }
	.login_tit:before { height: 80px; }
	.login_tit p { line-height: 80px; }
	.login_tit .btn { right: 10px; }
	.login_form_box { padding: 20px 0; }
}