/**=======================
	로그인

	1. 작성자: pub1
	2. 생성일자: 2023-09-13
	3. 수정일자: 2023-10-30

======================== */

#n_login {
	width: 100%;
	min-height: 100%;
	position:absolute;
	left:0;
	top:0;
	background: #0e1017 url('../../img/login/loginSpot60.png');
}

.login_block {
	position:relative;
	width: 1140px;
	height:880px;
	padding-top:82px;
	margin: 0 auto;
	background-image: url('../../img/login/loginBg60.png');
	background-repeat: no-repeat;
	background-position: center bottom;
}


.login_box {
	position:absolute;
	top:250px;
	right:34px;
	width: 360px;
	height: 400px;
	text-align: center;
	font-family: Malgun Gothic, "맑은고딕;"
}

/*로고 위치 이동*/
.login_logo {
	position:absolute;
	top:-60px;
	left:50px;
}

.inputBox2 {
	width:360px;
	height:400px;
	padding:46px 30px;
	box-sizing: border-box;
}

.inputBox2  .login_form {margin-bottom: 30px;}

.inputBox2  .login_form > div {
	position: relative;
	padding-bottom: 14px;
}

.inputBox2  .login_form > div:last-child {
	padding-bottom: 0;
	position:relative;
	text-align: left;
	font-size:12px;
}

.inputBox2  .login_form > div:last-child > label {
	position:absolute;
	top:0px;
	left:22px;
	color: #b8bac0;
}

.inputBox2  .login_form > div > img {
	position:absolute;
	top:15px;
	right:15px;
}

.inputBox2  .login_form > div > input {
	width: 280px;
	height: 50px;
	padding-left: 20px;
	border: 1px solid #cfdefc;
	border-radius: 5px;
	color: #cfdefc;
	font-size: 16px;
	background: #656c88;
}
.inputBox2  .login_form > div > input::placeholder {
	font-family: '맑은고딕', sans-serif;
	color: #eee!important;
	font-size:16px;
	opacity: 1;

}
::placeholder{
	color: #eee;
}
input[type="password"]::placeholder {
	color: #eee;

}
input::-webkit-input-placeholder {
	color: #eee;
	font-style: normal;
}
input:-ms-input-placeholder {
	color: #eee;
	font-style: normal;
}
input::-webkit-input-placeholder {
	color: #eee;
	font-style: normal;
}
input:-ms-input-placeholder {
	color: #eee;
	font-style: normal;
}


.login_btn {width:300px;height:50px;margin-bottom:20px;line-height:50px;background: #2353ae;color:#fff;font-size:16px;border-radius:25px;cursor: pointer;letter-spacing: -1px}
.login_sub {width:300px;height:50px;line-height:50px;background: #b1bfdb;color:#000;font-size:16px;border-radius:25px;cursor: pointer;letter-spacing: -1px}

.login_copy {
	position: absolute;
	right:50%;
	margin-right: -140px;
	bottom:40px;
	font-size: 15px;
	color: #747ea5;
}
/**=======================
	로그인

	1. 작성자: 최지영
	2. 생성일자: 2020-04-23
	3. 수정일자: 2020-04-23
	   -로그인페이지 애니메이션

======================== */



.imgAni{
	position: relative;
	width:740px;
	height: 608px;
}
.imgAni img{margin:0}
.imgAni .icoLock{
	position: absolute;
	top:305px;
	left:193px;
	margin: 0;
	-webkit-animation: LockCircle 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
	animation: LockCircle 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
	background:url("/img/login/icoLock60.png") no-repeat;
	width:160px;
	height:160px;
}

@-webkit-keyframes LockCircle {
	0% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes LockCircle {
	0% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.imgAni .icoWheel1{
	position: absolute;
	top:85px;
	left:208px;
	margin: 0;
	animation: 6s linear infinite rotate;
	background:url("/img/login/icoWheel160.svg") no-repeat;
	width:60px;
	height:60px;
}

.imgAni .icoWheel2{
	position: absolute;
	top:73px;
	left:167px;
	margin: 0;
	animation: 6s linear infinite rotate2;
	background:url("/img/login/icoWheel260.svg") no-repeat;
	width:41px;height:41px;
}

@keyframes rotate {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg)
	}
}
@-webkit-keyframes rotate {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg)
	}
}

@keyframes rotate2 {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(-360deg)
	}
}
@-webkit-keyframes rotate2 {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(-360deg)
	}
}

.icoComputer {
	top:70px;
	left:493px;
	position: relative;
	margin:0;
	animation-name: icoComputer;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	z-index:3;
	animation-timing-function:linear;
	width: 82px;
	height: 71px;
	background:url("/img/login/icoComputer60.svg") no-repeat;
}

@keyframes icoComputer {
	0% {
		transform: translate(-3px, -3px);
	}
	25% {
		transform: translate(3px,-3px);
	}
	50% {
		transform: translate(3px, 3px);
	}
	75% {
		transform: translate(-3px,3px);
	}
	100% {
		transform: translate(-3px, -3px);
	}
}

@-webkit-keyframes icoComputer {
	0% {
		transform: translate(-3px, -3px);
	}
	25% {
		transform: translate(3px,-3px);
	}
	50% {
		transform: translate(3px, 3px);
	}
	75% {
		transform: translate(-3px,3px);
	}
	100% {
		transform: translate(-3px, -3px);
	}
}

.icoGraph{
	position: absolute;
	top:267px;
	left:572px;
	margin: 0;
	width:76px;height:80px;

}
.icoGraph > p:first-child{width:76px;height:52px;background:url("/img/login/icoGraph360.svg") no-repeat}
.icoGraph > p:last-child{width:76px;height:62px;background:url("/img/login/icoGraph260.svg") no-repeat}

.icoGraph2{
	position: absolute;
	left: 0;
	top: 24px;
	margin: 0; width:76px;
	-webkit-animation: icoGraph 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
	animation: icoGraph 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
}
.icoGraph3{
	margin: 0;
	width:76px;
}


@-webkit-keyframes icoGraph {
	0% {
		-webkit-transform: scaleY(0.4);
		transform: scaleY(0.4);
		-webkit-transform-origin: 0% 100%;
		transform-origin: 0% 100%;
	}
	100% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
		-webkit-transform-origin: 0% 100%;
		transform-origin: 0% 100%;
	}
}
@keyframes icoGraph {
	0% {
		-webkit-transform: scaleY(0.4);
		transform: scaleY(0.4);
		-webkit-transform-origin: 0% 100%;
		transform-origin: 0% 100%;
	}
	100% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
		-webkit-transform-origin: 0% 100%;
		transform-origin: 0% 100%;
	}
}


.icoGraphGroup{position: absolute;width:70px;height:79px;bottom: 61px;right: 238px;}
.icoGraphGroup .graphBottom{width:70px;height: 2px;background:#ddd;position: absolute;bottom: 0px;margin: 0;}
.icoGraphGroup .graphBar1{width:15px;height:75px;background: #5174a1;margin: 0;position: absolute;bottom:5px;left:6px;-webkit-animation: icoGraph 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;animation: icoGraph 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate-reverse;}
.icoGraphGroup .graphBar2{width:15px;height:54px;background: #5174a1;margin: 0;position: absolute;bottom:5px;left:27px;-webkit-animation: icoGraph 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;animation: icoGraph 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;}
.icoGraphGroup .graphBar3{width:15px;height:32px;background: #5174a1;margin: 0;position: absolute;bottom:5px;left:48px;-webkit-animation: icoGraph 5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;animation: icoGraph 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate-reverse;}

.icoRing{position:absolute;right: 158px;bottom: 58px;-webkit-animation: icoRing 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;animation: icoRing 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
}

@keyframes icoRing {
	0%{
		transform:rotate(-0.05turn);
		-webkit-transform: rotate(-0.05turn);
	}

	100%{
		transform:rotate(0turn);
		-webkit-transform: rotate(0turn);
	}
}