/*------------로그인_main  Start-----------*/
.main_body_bg { position: relative; background: url(/s/front/images/login_img.jpg) center top no-repeat fixed; background-size: cover; }
.main_login_tit {
	z-index: 60; width: 350px; height: 351px; position: fixed; top: 50%; left: 50%; margin-top: -455px; margin-left: -175px; background: #000 url('/s/front/images/main_logo.gif') center no-repeat;
}
.main_loginW {
	z-index: 50; overflow: hidden; width: 350px; height: 350px; position: fixed; top: 54%; left: 50%; margin-top: -175px; margin-left: -175px;
}

.main_login_bg {
	width: 430px; height: 430px; position: fixed; top: 58%; left: 50%;
	margin-top: -215px; margin-left: -215px;
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
}
.main_login_bg.box {
	width: 600px; height: 600px;
	top: 50%; left: 50%;
	margin-top: -225px; margin-left: -300px;
	background-image: url(/s/front/images/login_box.png);
	-webkit-animation: login_box_move 30s linear infinite;
    animation: login_box_move 30s linear infinite;
}
@-webkit-keyframes login_box_move {
	100% {
		-ms-transform: rotate(360deg); /* IE 9 */
		-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
		transform: rotate(360deg);
	}
}
@keyframes login_box_move {
	100% {
		-ms-transform: rotate(360deg); /* IE 9 */
		-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
		transform: rotate(360deg);
	}
}
.main_login_bg.left {
	background-image: url(/s/front/images/main_login_bg_01.png);
	-webkit-animation: two_login_bg_left_move 6s infinite;
    animation: two_login_bg_left_move 6s infinite;
}
.main_login_bg.right {
	background-image: url(/s/front/images/main_login_bg_02.png);
	-webkit-animation: two_login_bg_right_move 6s infinite;
    animation: two_login_bg_right_move 6s infinite;
}

.main_loginW .main_loginW_bg {
	transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s;
	z-index: 10; position: absolute; top: 0; left: 0; box-sizing: border-box;
	width: 500px; height: 500px;
	border: 3px solid #000; background: rgba(0, 0, 0, 0.8);
	opacity: 0.5; border-radius: 50%; overflow: hidden;
}
.main_loginW:hover .main_loginW_bg { opacity: 1; animation: rota 120s infinite linear; -webkit-animation: rota 120s infinite linear; }

.main_loginW .loginInpW { box-sizing: border-box; width: 300px; height: 300px; margin: 25px auto; padding: 75px 0; overflow: hidden; transition: all 0.3s;}

.main_loginW .loginInpW .loginInp { width: 100%; height: 50px; margin-bottom: 5px; }
.main_loginW .loginInpW .loginInp .capcha-refresh {
    margin: 1px 0 0 5px;
    float: left;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
}

.main_loginW .loginInpW .loginInp .capcha-refresh i {
    margin-top: 3px;
    vertical-align: middle;
    font-size: 18px;
    font-size: 1.8rem;
}

.main_loginW .loginInpW .loginInp img {
    margin: 1px 0 0 0;
    float: left;
    display: block;
    width: 100px;
}

.main_loginW .loginInpW .loginInp input.capcha {
    box-sizing: border-box;
    float: right;
    display: block;
    width: calc(100% - 150px);
    height: 38px;
}

.main_loginW .loginInpW .loginInp label { float: left; height: 50px; line-height: 50px; text-align: left; color: #6e47e3; display: block; width: 15%;  }
.main_loginW .loginInpW input { box-sizing: border-box; border: 1px solid #6e47e3; color: #fff; display: block; float: left; width: 85%; height: 48px; line-height: 48px; padding: 0 5px; background: rgba(255, 255, 255, 0.1);; ime-mode: inactive; outline:none; }
.main_loginW .loginInpW input:focus { background: #6e47e3; color: #fff; }

.main_loginW .loginInpW .loginBtn_wrap { width: 100%; text-align: center; padding: 10px 0 0 0; }
.main_loginW .loginInpW .loginBtn_wrap a {
    color: #000;
}
.main_loginW .loginInpW a {
    float: right;
    text-align: center;
    width: 49%;
    height: 60px;
    line-height: 60px;
    display: inline-block;
    width: 48%;
    height: 50px;
    line-height: 50px;
}
.main_loginW .loginInpW a.loginBtnL { color: #fff; background: url('/s/front/images/button.png') center no-repeat; float:left; }
.main_loginW .loginInpW a.loginBtnL_2 { background: url('/s/front/images/button_2.jpg') center no-repeat; float:left; }
.main_loginW .loginInpW a.loginBtnJ { color: #fff; background: url('/s/front/images/button.png') center no-repeat; float:right;}
.main_loginW .loginInpW a.loginBtnL:hover { font-weight: bold; background: url('/s/front/images/button_on.png') center no-repeat;}
.main_loginW .loginInpW a.loginBtnL_2:hover { font-weight: bold;}
.main_loginW .loginInpW a.loginBtnJ:hover { font-weight: bold; background: url('/s/front/images/button_on.png') center no-repeat;}

.main_recomCodeD { z-index: 100; display:none; width: 100%; height: 100%; position:fixed; top:0; left:0; background:rgba(0, 0, 0, 0.7); }
.main_recomCodeD .recomCodeW {position: absolute; top:50%; left:50%; margin-top: -60px; margin-left: -220px; width: 380px; height: 60px; padding: 20px 40px 44px; background-color: #1b1b1b; color:#b4b4b4; }
.main_recomCodeD .recomCodeW .loginInp { float: left; width: 235px; height: 36px; overflow: hidden; padding: 15px 0; }
.main_recomCodeD .recomCodeW .loginInp p { float: left; width: 65px; display: inline-block; height: 36px; line-height: 36px; text-align: left; padding-right: 10px; }
.main_recomCodeD .recomCodeW .loginInp input {color: #000; outline: none; display: block; float: left; width: 130px; height: 34px; line-height: 34px; padding: 0 14px; border: none; background: #eee; }
.main_recomCodeD .recomCodeW .loginInp input:focus { border: 1px solid #000; }

.main_recomCodeD .recomCodeW .loginBtnW { float: right; width: 145px; height: 36px; padding:15px 0; text-align: center; overflow:hidden; }
.main_recomCodeD .recomCodeW .loginBtnW a { color: #000; margin-left: 5px; float: left; display: inline-block; width: 65px; height: 36px; line-height: 36px; text-align: center;}
.main_recomCodeD .recomCodeW .loginBtnW a.recomBtn {
	box-sizing: border-box; border: 1px solid #078fff; 
	color: #fff; border-radius: 10px;
	background-image: -webkit-linear-gradient(left, #3270ff 0, #a407ff 100%);
}
.main_recomCodeD .recomCodeW .loginBtnW a.recomClose {
	box-sizing: border-box; border: 1px solid #078fff; 
	color: #fff; border-radius: 10px;
	background-image: -webkit-linear-gradient(left, #3270ff 0, #a407ff 100%);
}
.main_recomCodeD .recomCodeW .loginBtnW a.recomBtn:hover { font-weight: bold; }
.main_recomCodeD .recomCodeW .loginBtnW a.recomClose:hover { font-weight: bold; }
/*------------로그인_main  end-----------*/

/*------------로그인_two  Start-----------*/
.two_loginW .loginInpW input::-webkit-input-placeholder { /* Webkit browsers */
color: #000;
}
.two_loginW .loginInpW input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000;
opacity: 1;
}
.two_loginW .loginInpW input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000;
opacity: 1;
}
.two_loginW .loginInpW input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #000;
}
.two_body_bg { position: relative; background: url(/s/front/images/two_img.jpg) center center no-repeat fixed; background-size: cover; }
.two_login_bg {
	width: 550px; height: 550px; position: fixed; top: 50%; left: 50%; margin-top: -275px; margin-left: -275px;
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
}
.two_login_bg.left {
	background-image: url(/s/front/images/two_login_bg_01.png);
	-webkit-animation: two_login_bg_left_move 6s infinite;
    animation: two_login_bg_left_move 6s infinite;
}
.two_login_bg.right {
	background-image: url(/s/front/images/two_login_bg_02.png);
	-webkit-animation: two_login_bg_right_move 6s infinite;
    animation: two_login_bg_right_move 6s infinite;
}
@-webkit-keyframes two_login_bg_left_move {
    0% {
		-ms-transform: rotate(0deg); /* IE 9 */
		-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
		transform: rotate(0deg);
	}
    50% {
		-ms-transform: rotate(180deg); /* IE 9 */
		-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
		transform: rotate(180deg);
	}
	100% {
		-ms-transform: rotate(360deg); /* IE 9 */
		-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
		transform: rotate(360deg);
	}
}
@keyframes two_login_bg_left_move {
	0% {
		-ms-transform: rotate(0deg); /* IE 9 */
		-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
		transform: rotate(0deg);
	}
    50% {
		-ms-transform: rotate(180deg); /* IE 9 */
		-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
		transform: rotate(180deg);
	}
	100% {
		-ms-transform: rotate(360deg); /* IE 9 */
		-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
		transform: rotate(360deg);
	}
}
@-webkit-keyframes two_login_bg_right_move {
    0% {
		-ms-transform: rotate(0deg); /* IE 9 */
		-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
		transform: rotate(0deg);
	}
    50% {
		-ms-transform: rotate(-180deg); /* IE 9 */
		-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
		transform: rotate(-180deg);
	}
	100% {
		-ms-transform: rotate(-360deg); /* IE 9 */
		-webkit-transform: rotate(-360deg); /* Chrome, Safari, Opera */
		transform: rotate(-360deg);
	}
}
@keyframes two_login_bg_right_move {
	0% {
		-ms-transform: rotate(0deg); /* IE 9 */
		-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
		transform: rotate(0deg);
	}
    50% {
		-ms-transform: rotate(-180deg); /* IE 9 */
		-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
		transform: rotate(-180deg);
	}
	100% {
		-ms-transform: rotate(-360deg); /* IE 9 */
		-webkit-transform: rotate(-360deg); /* Chrome, Safari, Opera */
		transform: rotate(-360deg);
	}
}

.two_login_tit { display: none; z-index: 60; width: 350px; height: 180px; position: fixed; top: 50%; left: 50%; margin-top: -300px; margin-left: -175px; background: #000 url('/s/front/images/main_logo.gif') center no-repeat; }
.two_loginW {
	border: 2px solid #fff; background: rgba(0, 0, 0, 0.5); border-radius: 50%; z-index: 50; overflow: hidden; width: 500px; height: 500px; position: fixed; top: 50%; left: 50%; margin-top: -252px; margin-left: -252px;
	-webkit-animation: two_loginW_move .7s;
    animation: two_loginW_move .7s;
}

@-webkit-keyframes two_loginW_move {
    from {top: 60%;}
    to {top: 50%;}
}
@keyframes two_loginW_move {
    from {top: 60%;}
    to {top: 50%;}
}
.two_loginW .loginInpW { position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; box-sizing: border-box; width: 300px; padding: 0; overflow: hidden; transition: all 0.3s;}

.two_loginW .loginInpW .loginInp .capcha-refresh {
    margin: 1px 0 0 5px;
    float: left;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
}

.two_loginW .loginInpW .loginInp .capcha-refresh i {
    margin-top: 3px;
    vertical-align: middle;
    font-size: 18px;
    font-size: 1.8rem;
}

.two_loginW .loginInpW .loginInp img {
    margin: 1px 0 0 0;
    float: left;
    display: block;
    width: 100px;
}

.two_loginW .loginInpW .loginInp input.capcha {
    box-sizing: border-box;
    float: right;
    display: block;
    width: calc(100% - 150px);
    height: 38px;
}
.two_loginW .loginInpW .loginInp { width: 100%; height: 50px; margin-bottom: 5px; }
.two_loginW .loginInpW .loginInp label { float: left; height: 50px; line-height: 50px; text-align: left; color: #fbc964; display: block; width: 15%;  }
.two_loginW .loginInpW input { border-radius: 5px; background: rgba(255, 255, 255, 0.7); box-sizing: border-box; border: 1px solid #fff; color: #222; display: block; float: left; width: 100%; height: 50px; line-height: 48px; padding: 0 15px; ime-mode: inactive; outline:none; }
.two_loginW .loginInpW input:focus { border: 1px solid #75e1f9; background: rgba(255, 255, 255, 1); color: #000; }

.two_loginW .loginInpW .loginBtn_wrap { width: 100%; text-align: center; padding: 10px 0 0 0; }
.two_loginW .loginInpW a { position: relative; display: inline-block; border-radius: 5px; width: 48%; line-height: 50px; }
.two_loginW .loginInpW a.loginBtnL { color: #000; border: 1px solid #fff; background: rgba(255, 255, 255, 1); float: left; }
.two_loginW .loginInpW a.loginBtnJ { color: #000; border: 1px solid #fff; background: rgba(255, 255, 255, 1); float: right; }
.two_loginW .loginInpW a.loginBtnL:hover { color: #fff; background: #f80b5e; border: 1px solid #f80b5e; }
.two_loginW .loginInpW a.loginBtnJ:hover { color: #fff; background: #0b7af8; border: 1px solid #0b7af8; }

.two_recomCodeD { z-index: 100; display:none; width: 100%; height: 100%; position:fixed; top:0; left:0; background:rgba(0, 0, 0, 0.7); }
.two_recomCodeD .recomCodeW {box-sizing: border-box; position: absolute; top:50%; left:50%; margin-top: -150px; margin-left: -250px; width: 500px; height: 300px; padding: 40px 70px 44px; background-color: #1b1b1b; color:#b4b4b4; }
.two_recomCodeD .recomCodeW .loginInp { width: 100%; overflow: hidden; padding: 15px 0; }
.two_recomCodeD .recomCodeW .loginInp p { width: 100%; display: inline-block; height: 36px; line-height: 36px; text-align: center; }
.two_recomCodeD .recomCodeW .loginInp input {box-sizing: border-box; color: #000; outline: none; display: block; float: left; width: 100%; height: 50px; line-height: 48px; padding: 0 14px; border: none; background: #eee; border-radius: 5px;}
.two_recomCodeD .recomCodeW .loginInp input:focus { border: 1px solid #000; }

.two_recomCodeD .recomCodeW .loginBtnW { width: 100%; height: 36px; padding:15px 0; text-align: center; overflow:hidden; }
.two_recomCodeD .recomCodeW .loginBtnW a { border-radius: 5px; display: inline-block; width: 100px; height: 40px; line-height: 40px; text-align: center;}
.two_recomCodeD .recomCodeW .loginBtnW a.recomBtn { background: #f80b5e; }
.two_recomCodeD .recomCodeW .loginBtnW a.recomClose { background: #0b7af8;}
.two_recomCodeD .recomCodeW .loginBtnW a.recomBtn:hover { background: #ff2a74; }
.two_recomCodeD .recomCodeW .loginBtnW a.recomClose:hover { background: #3091ff; }
/*------------로그인_two  end-----------*/