@charset "utf-8";

@import url(AgsBiz_base.css);
@import url(AgsBiz_login_ani.css);

html, body {
	font-size: 12px;
	margin: 0;
	padding: 0;
	min-height: 100vh;
    overflow-y: auto;
    overflow-x:hidden;
	background: #f2f2f2;
}

* {letter-spacing: -0.55px;   box-sizing: border-box;

}	

html {*min-width: 1024px;}
  body {

    color: #818181;  
	animation: showhide .7s ease-out none;
    -webkit-animation: showhide .7s ease-out none;
}


#login_warp {width: 100%; background: #fafafa; min-height: 100vh; position: relative; padding: 30px 0 0;}



/* 우측 고정 버튼 */

.textBtn {position: absolute;right: 10px;top: 40%;width: 220px;z-index: 10;padding: 10px;background: #252525; }
.textBtn b {font-size: 20px;color: #fff;margin-bottom: 10px;display: block;text-align: center;}


/* 로그인 영역 */
.logo {margin: 20px auto 50px;display: flex;width: 700px;flex-direction: column;justify-content: center;}
.logo svg {width: 200px;margin: 10px auto 25px;}
.logo .st0 {fill: #164b78;}
.logo p {font-size: 23px;color: #252525;text-align: center;font-weight: bold}

.login_content {width: calc(100% - 40px);max-width: 500px;position: relative;height: 450px;margin: 0 auto;}
.login_box {background: #fff;border-radius: 50px;width: 100%;box-shadow: 0 0 15px rgba(22,22,22,0.1);padding: 50px 30px;border-top: 10px solid #278b44;border-bottom: 5px solid #278b44;}
.login_box .main_text {width: 100%;font-size: 32px;text-align: center;color: #353535;line-height: 170%;font-weight: 600;display: block;margin-bottom: 10px;}
.login_box h2 {width: 100%; text-align: center; padding-top: 10px; display: block;}
.login_box h2 img {height: 70px;}
.login_box p {text-align: left;padding: 5px 0 0;color: #252525;font-size: 15px;line-height: 24px;font-weight: normal;display: flex;flex-direction: column;width: 400px;margin: 0 auto;}
.login_box p b {color: #164b78; display: block; line-height: 40px; font-size: 22px; text-align: center; margin-bottom: 10px;}

/* 로그인 영역 */
.login_box .login_input {width: 100%; margin: 0 auto 10px; display: block; max-width: 400px;}
.login_box .login_input ul {width: 100%;}
.login_box .login_input ul li {display: block; margin: 0 auto 25px; position: relative; height: 50px;}
.login_box .login_input ul li:nth-child(2) {margin-bottom: 15px;}
.login_box .login_input ul li:nth-child(3) {height: auto;}
.login_box .login_input ul li:last-child {margin: 50px auto 0;;}
.login_box .login_input ul li:last-child a {padding: 15px 0; height: 60px;}
.login_box .login_input ul li > input {position:relative;height: 100%;padding: 10px 15px 10px 55px;font-size: 15px;line-height: 27px;width: 100%;color: #656565;display: block;border: 0;border-bottom: 1px solid #d7d7d7;outline: none;transition:  0.5s all;background-color: #fff;font-size: 17px;border-radius: 0;}
.login_box .login_input ul li > input + label:before {position: absolute;left: 0;bottom: 0;width: 0;height: 2px;content: "";background: #278b44;}
.login_box .login_input ul li > input#loginId + label {width: 50px; height: 50px; background: url(../images/edu/id_icon.png) no-repeat 0 0 ; color: transparent; text-indent: 9999px; display: block; position: absolute; top: 0; left: 0; transition: all 0.3s;}
.login_box .login_input ul li > input.pw_icon + label,
.login_box .login_input ul li > input#loginPw + label {width: 50px; height: 50px; background: url(../images/edu/pw_icon.png) no-repeat 0 0 ; color: transparent; text-indent: 9999px; display: block; position: absolute; top: 0; left: 0; transition: all 0.3s;}

.login_box .login_input ul li > input.pw_icon:focus + label,.login_box .login_input ul li > input.pw_icon:hover + label,
.login_box .login_input ul li > input#loginPw:focus + label,.login_box .login_input ul li > input#loginPw:hover + label,
.login_box .login_input ul li > input#loginId:focus + label,.login_box .login_input ul li > input#loginId:hover + label {background-position: 0 -50px;}
.login_box .login_input ul li > input:focus + label:before,
.login_box .login_input ul li > input:hover + label:before{width: 1000%; transition: all 0.3s;  max-width: 400px;}

.login_box .login_input ul li .n_login_btn {width: 100%; padding: 20px 0; text-align: center; display: block; height: 20px; font-size: 18px; font-weight: 600; background: #6ad1df; line-height: 18px; color: #fff; margin: 40px 0 10px;}
.login_box .login_input ul li p {display: inline-block; height: 25px; width: 100%; line-height: 22px; font-size: 20px; font-weight: 600; margin-top: 10px;}
.login_box .login_input ul li.pw_change {margin-top: 40px;}
.login_box .login_input ul li.pw_change a {width: calc(50% - 10px); font-size: 20px; height: 50px; padding: 10px 0;}
.login_box .login_input ul li.pw_change a:first-child {float: left;}
.login_box .login_input ul li.pw_change a:last-child {float: right;}
.login_box .login_input ul li.other_btn_box {padding: 30px 0; border-top: 1px solid #c2c2c2; display: inline-block;}

/* 로그인 정보 입력 영역 (비밀번호 변경, 찾기, 휴면계정) */
.login_box.pd2530 {padding: 25px 30px;}
.login_box .login_info_input {width: 100%; margin: 0 auto 10px; display: block; max-width: 400px;}
.login_box .login_info_input ul {width: 100%;}
.login_box .login_info_input ul li {display: block; margin: 0 auto 5px; position: relative; height: 55px;}
.login_box .login_info_input ul li:last-child {margin: 25px auto 0;}
.login_box .login_info_input ul li:last-child a {padding: 15px 0; height: 60px; width: 50%; margin: 0 auto;}
.login_box .login_info_input ul li > input {position:relative;height: 100%;padding: 15px 15px 5px 85px;font-size: 15px;line-height: 27px;width: 100%;display: block;border: 0;border-bottom: 1px solid #d7d7d7;outline: none;transition:  0.5s all;background-color: #fff;font-size: 17px;border-radius: 0;}
.login_box .login_info_input ul li > input + label {width: 70px; height: 100%; display: flex; position: absolute; top: 0; left: 0; align-items: center; font-size: 16px; font-weight: 600; color: #252525; transition: all 0.3s;}
.login_box .login_info_input ul li > input + label span {display: block; transition: all 0.5s; padding: 15px 0 5px; background: #fff;}
.login_box .login_info_input ul li > input + label:before {position: absolute; left: 0; bottom: 0; width: 0; height: 2px; content: ""; background: #164b78; }
.login_box .login_info_input ul li > input:focus + label:before,
.login_box .login_info_input ul li > input:hover + label:before{width: 1000%; transition: all 0.3s; max-width: 400px;}
.login_box .login_info_input ul li > input:hover + label {color: #164b78}
.login_box .login_info_input ul li > input:focus + label span {transition: all 0.3s; position: absolute; top: 0; left: 0; font-size: 12px; padding: 0;} 

.login_box .login_info_input ul li > input:focus {padding: 15px 0 5px; }
.login_box .login_info_input ul li > input#userId, 
.login_box .login_info_input ul li > input#phoneNum {width: calc(100% - 115px); float: left;}
.login_box .login_info_input ul li > input#userId:focus + label:before,
.login_box .login_info_input ul li > input#userId:hover + label:before,
.login_box .login_info_input ul li > input#phoneNum:focus + label:before,
.login_box .login_info_input ul li > input#phoneNum:hover + label:before {width: 407%; transition: all 0.3s; }

.login_box .login_info_input ul li .basic_btn {width: 105px;margin-left: 10px;float: left;height: 40px;font-size: 15px;max-height: 40px; padding: 5px 10px; justify-content: center; margin-top: 15px;}

.login_box .login_info_input ul li .n_login_btn {width: 100%; padding: 20px 0; text-align: center; display: block; height: 20px; font-size: 18px; font-weight: 600; background: #6ad1df; line-height: 18px; color: #fff; margin: 40px 0 10px;}
.login_box .login_info_input ul li p {display: inline-block; height: 25px; width: 100%; line-height: 22px; font-size: 20px; font-weight: 600; margin-top: 10px;}
.login_box .login_info_input ul li.other_btn_box {padding: 30px 0; border-top: 1px solid #c2c2c2; display: inline-block;}



.foot_box {width: 100%;padding: 10px; margin-top: 40px;}

.foot_box > div {max-width: 600px;  margin: 0 auto; padding: 10px; }
.foot_box > div  a.txt_btn {margin: 0 15px; color: #757575; position: relative;}

.foot_box > .user_box {display: flex; flex-direction: row; justify-content: center; max-width: 600px; margin: 0 auto; font-size: 18px;}

.foot_box > .footer {margin-top: 30px; font-size: 14px; }
.foot_box > .footer > .foot_link  {font-size: 14px;  padding: 10px; }
.foot_box > .footer > .foot_info {height: 70px;padding: 10px 25px;display: flex;flex-direction: column;justify-content: center;}
.foot_box > .footer > .foot_info .foot_logo {width: 220px;margin: 0 auto 10px;} 
.foot_box > .footer > .foot_info p {text-align: center;font-size: 14px;}
.foot_box > .footer > .foot_info p span {display: block;}
.foot_box > .footer > .foot_isms {text-align: center; padding: 5px; border-top: 1px solid #d8d8d8;}



input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  background-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 0.5s ease-in-out 0s;
}


/* 로그인 영역 체 스타일 */
.login_check {display: block;height: 24px;position: relative; }
.login_check input[type=checkbox] {opacity: 0; position: absolute; left: 0; top: 0;}
.login_check input[type=checkbox] + label {display: flex; height: 100%; position: relative; cursor: pointer; padding-left: 30px; align-items: center; font-size: 16px; color: #252525;}
.login_check input[type=checkbox] + label:before {content: "";position: absolute;height: 22px;width: 22px;display: block;top: 50%;transform: translateY(-50%);left: 0;border: 1px solid #dfdfdf; background: #fff; transition: all 0.2s;}
.login_check input[type=checkbox] + label span {position: absolute;height: 8px;width: 13px;left: 6px;top: 5px;transform: rotate(-45deg);z-index: 3;}
.login_check input[type=checkbox] + label span:before {left: 0;top: 0;width: 2px;height: 0;transition: all 0.2s  linear 0.2s; position: absolute;background: #fff;content:"";}
.login_check input[type=checkbox] + label span:after {left: 0;bottom: 0;width: 0;height: 2px;transition: all 0.2s;position: absolute;background: #fff;content:"";}
.login_check input[type=checkbox] + label:hover {color: #164b78}
.login_check input[type=checkbox]:focus + label {color: #164b78}
.login_check input[type=checkbox]:focus + label:before { border-color: #164b78}
.login_check input[type=checkbox]:checked + label {color: #278b44;}
.login_check input[type=checkbox]:checked + label span {}
.login_check input[type=checkbox]:checked + label:before {background: #278b44;border-color: #278b44;}
.login_check input[type=checkbox]:checked + label:after {border-color: #fff; -webkit-transform: rotate(-405deg) translateY(-50%); -ms-transform: rotate(-405deg)  translateY(-50%); transform: rotate(-405deg)  translateY(-50%);}
.login_check input[type=checkbox]:checked + label span:before {height: 100%; transition: all 0.2s; }
.login_check input[type=checkbox]:checked + label span:after {width: 100%; transition: all 0.2s linear 0.2s;}




/* 버튼 기본 스타일 */
.login_btn {display: block; height: 70px; line-height: 28px; padding: 10px 30px; font-size: 24px; font-weight: 600; text-align: center; min-width: 120px; cursor: pointer; position: relative; overflow: hidden; border-radius: 7px; font-family: "IBMPlexSansKR_BB";}
.middle_btn {display: block; height: 40px; line-height: 20px; padding: 10px 25px; font-size: 16px; font-weight: 600; text-align: center; cursor: pointer; position: relative; overflow: hidden; border-radius: 7px;}
.small_btn {display: block; height: 35px; line-height: 20px; padding: 7px 15px; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; position: relative; overflow: hidden; border-radius: 7px;}


.login_color {background: #278b44;color: #fff;border: 1px solid #278b44;}
.login_color:before
	{
		content:"";
		width: 50%;
		height: 350%;
		transform: rotate(30deg);
		background: rgba(255,255,255,0.15);
		left: -100%;
		top: -100%;
		position: absolute;
		-webkit-transition: -webkit-transform 0.6s;
		transition: all 0.6s;
	}
.login_color:hover:before {left: 130%;}

/* 타이틀 텍스트 효과 */
.text_show {position: relative; display: inline-block; color: transparent; max-width: 100%; white-space: pre; text-transform: uppercase; }
.text_show:after {content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    color: #252525;
    white-space: pre;
    animation-name: txt_tshow;
    overflow: hidden;
    animation-duration: 2.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;}
.text_r_show {position: relative; display: inline-block; color: transparent; max-width: 100%; white-space: pre; text-transform: uppercase; }
.text_r_show:after {
	content: attr(data-text);
    font-family: "IBMPlexSansKR_R";

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	color: #252525;
	white-space: pre;
	animation-name: txt_tshow;
	overflow: hidden;
	animation-duration: 4.2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	}
	
@keyframes txt_tshow {
	0% {right: 100%;}
	20% {right: 100%;}
	50% {right: 0%;}
}

.text_show2 {position: relative; display: inline-block; color: transparent; max-width: 100%; text-transform: uppercase;}
.text_show2:after {content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    color: #fff;
    white-space: pre;
    animation-name: txt_tshow2;
    overflow: hidden;
    animation-duration:3.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;}
.text_r_show2 {position: relative; display: inline-block; color: transparent; max-width: 100%; text-transform: uppercase;}
.text_r_show2:after {content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    color: #fff;
    white-space: pre;
    animation-name: txt_tshow2;
    overflow: hidden;
    animation-duration: 5.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;}
	
@keyframes txt_tshow2 {
	0% {right: 100%;}
	20% {right: 100%;}
	50% {right: 0%;}
}


@media (max-width: 1199px) {
	.best_buss {/* padding: 0 2rem; */}
}

::-moz-selection {
   background: #3c3c3c;
   color: #fff;
}
::selection {
   background: #3c3c3c;
   color: #fff;
}