/*
** Spin
*/
.spin {position:fixed; top:0; left:0; width:0; height:0; overflow:hidden;}
.spin .load {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100px; height:100px;}
.spin .load div {position:absolute; margin:0; width:40%; height:40%; font-size:0; color:transparent; border:0; border-radius:50%;}
.spin .load div:first-child {background:#19A68C;}
.spin .load div:nth-child(2) {background:#F63D3A;}
.spin .load div:nth-child(3) {background:#FDA543;}
.spin .load div:last-child {background:#193B48}

/* Spin[Active] */
.spin.Active {z-index:300; width:100%; height:100%; background:rgba(255, 255, 255, .6);}
.spin.Active .load div {animation:spin 2s ease infinite;}
.spin.Active .load div:first-child {animation-delay:-1.5s;}
.spin.Active .load div:nth-child(2) {animation-delay:-1s;}
.spin.Active .load div:nth-child(3) {animation-delay:-0.5s;}

@keyframes spin {
	0%, 100% {transform:translate(0);}
	25% {transform:translate(160%);}
	50% {transform:translate(160%, 160%);}
	75% {transform:translate(0, 160%);}
}

/* 
** ***** * ***** 로그인 ***** * ******
*/
.login {position:relative; width:100%; height:100%; font-size:12px;}
.login .loginBox {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:440px; padding:36px 40px; background:#fff; box-sizing:border-box; border-width:5px 1px 1px; border-style:solid; border-color:#ffcc00 #ddd #ddd;}

.loginBox .logo {height:38px; line-height:35px; margin:20px 0 40px; text-align:center; font-family:"Oswald", sans-serif; font-size:40px; font-weight:bold; color:#000; text-shadow:0 3px 0 #ddd; letter-spacing:-2px;}
.loginBox .tit {font-size:28px; font-weight:700; line-height:28px; text-align:center; margin:20px 0 60px;}
.loginBox .tit > a.btnBack {display:none;}
.loginBox .line_Or {position:relative; text-align:center; padding:16px 0;}
.loginBox .line_Or:before {content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:-1; width:100%; height:1px; background:#EEE;}
.loginBox .line_Or label {display:inline-block; font-size:12px; line-height:18px; color:#999; padding:0 8px; background:#FFF;}
.loginBox .btnLogin {text-align:center; font-size:14px; font-weight:700; line-height:50px; margin:40px 0 0; background:#ffcc00; border-radius:5px; cursor:pointer;}
.loginBox .btnLogin.KAKAO {position:relative; background:#f6f6f6; margin:0 0 20px;}
.loginBox .btnLogin.KAKAO:after {content:''; position:absolute; top:50%; left:50%; width:24px; height:100%; transform:translate(-310%, -50%); background:url(/img/icon/i_KAKAO.svg) no-repeat 50% 50%; background-size:24px;}
.loginBox .subLoginMenu {overflow:hidden;}
.loginBox .subLoginMenu > a {line-height:14px; color:#555;}

.login_info > li {position:relative; margin:8px 0 0;}
.login_info > li:nth-child(1) {margin:0;}
.login_info input {width:100%; height:40px; line-height:40px;}
.login_info input.loginPhone {width:calc(100% - 92px); border-right:none;}
.login_info input:read-only {background:#f8f8f8;}
.login_info .btnConfirm {position:absolute; right:0; top:0; width:90px; line-height:38px; font-weight:700; border:1px solid #ffcc00; text-align:center; cursor:pointer;}
.login_info .txtHelp {display:none; position:relative; line-height:14px; color:#2ec819; padding:0 0 0 20px; margin:8px 0 0;}
.login_info .txtHelp::before {content:''; position:absolute; left:0; top:0; width:14px; height:14px; background:url(/img/icon/i_chk.png) no-repeat;}
.login_info .txtHelp.no {color:#ff7979;}
.login_info .txtHelp.no::before {background-position:0 -14px;}
.login_info .txtHelp > span {color:inherit;}

.subLoginMenu .btnJoin {float:left;}
.subLoginMenu .btnError {float:right;}

/* 
** ***** * ***** 회원가입 요청 ***** * ******
*/
.loginBox .join_info > li {margin:8px 0 0;}
.loginBox .join_info > li:nth-child(1) {margin:0;}
.loginBox .join_info input,
.loginBox .join_info select {width:100%; height:40px; line-height:40px;}
.loginBox .join_info select {background:#f8f8f8 url(/img/icon/i_select.png) no-repeat 92% 50%;}
.loginBox .copyright {height:128px; font-size:11px; line-height:16px; overflow:auto; word-break:keep-all; margin:10px 0 0; padding:0 10px; white-space:pre-line;}
.loginBox .copyright.main {height:80px; padding:10px; margin:24px 0 0; color:#acacac; border:1px solid #f7f7f7; background:#fcfcfc;}
.loginBox .copyright::-webkit-scrollbar {width:3px; background:none;}
.loginBox .copyright::-webkit-scrollbar-thumb {background:#ccc;}
.loginBox .copyright::-webkit-scrollbar-track {background:none;}
.loginBox .btnAddJoin {line-height:50px; margin:20px 0 0; font-size:14px; font-weight:700; text-align:center; border-radius:5px; background:#ffcc00; cursor: pointer;}

/* 
** ***** * ***** 로그인 제한 해제 입력 ***** * ******
*/
.loginBox .clear_info > li {margin:8px 0 0;}
.loginBox .clear_info > li:nth-child(1) {margin:0;}
.loginBox .clear_info input {width:100%; height:40px; line-height:40px;}
.loginBox .clear_info textarea {width:100%; height:202px; padding:15px;}
.loginBox .btnClear {line-height:50px; margin:20px 0 30px; font-size:14px; font-weight:700; text-align:center; border-radius:5px; background:#ffcc00; cursor:pointer;}

/*
** ***** * ***** 모바일 반응형 ***** * *****
*/
@media screen and (max-width: 920px) {
	/*
	** ***** * ***** 로그인 ***** * ******
	*/
	.login {font-size:12px;}
	.login .loginBox {position:relative; top:0; left:0; transform:translate(0, 0); width:100%; padding:20px 24px; border-width:0;}
	.login .loginBox.P {padding:0;}
	.loginBox .logo {height:28px; line-height:28px; margin:40px 0; font-size:28px; letter-spacing:-1px; text-shadow: 0 1px 0 #ddd;}
	.loginBox .tit {position:relative; font-size:15px; line-height:45px; text-align:center; border-bottom:1px solid #ddd; margin:0; padding:45px 0 0;}
	.loginBox .tit::before {content:'MEDU TV'; position:absolute; top:0; left:0; width:100%; height:45px; font-family:"Oswald", sans-serif; font-size:20px; font-weight:bold; letter-spacing:-1px; text-shadow:0 1px 0 #fff; background:#ffcc00;}
	.loginBox .tit > a.btnBack {display:block; position:absolute; left:0; top:45px; width:45px; height:45px; background:url(/img/btn/btn_back.png) no-repeat 50% 50% / 21px; cursor:pointer; z-index:10; font-size:0; color:transparent;}
	.loginBox .subLoginMenu {padding:0 10px;}

	.login_info .txtHelp {padding:0 0 0 15px;}
	.login_info .txtHelp::before {top:2px; width:10px; height:10px; padding:0 0 0 15px; background-size:10px;}
	.login_info .txtHelp.no::before {background-position:0 -10px;}

	/*
	** ***** * ***** 회원가입 요청 ***** * ******
	*/
	.loginBox .join_info {padding:30px 15px 15px;}
	.loginBox .join_info select {background-position:95% 50%; background-size:5px;}
	.loginBox .copyright {padding:0; margin:0 15px 25px;}
	.loginBox .copyright.main {height:64px; padding:8px}
	.loginBox .btnAddJoin {width:calc(100% - 30px); line-height:45px; margin:0 auto 20px;}

	/*
	** ***** * ***** 로그인 제한 해제 입력 ***** * ******
	*/
	.loginBox .clear_info {padding:30px 15px 45px;}
	.loginBox .clear_info textarea {width:100%; height:130px; padding:15px;}
	.loginBox .btnClear {width:calc(100% - 30px); line-height:45px; margin:0 auto 30px; cursor:pointer;}
}