/*======================================
				Login
========================================*/
.login_area {width:100%; height:100vh; position:relative; background-color:#f0f4f9;}
.login_area .login_form {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.login_area .login_main_title {text-align:left; color:#000; position:relative; z-index:-1;}
.login_area .login_main_title h1 {font-size:98px; font-weight:700; color:#c8d3e1; margin-left:24px; letter-spacing:2px;}
/* .login_area .login_inner {background:#fff; border-radius:30px; width:1040px; padding:70px; padding-bottom:40px; display:flex; margin-top:-68px; opacity:0.8; height:400px; position:relative;} */
.login_area .login_inner {padding:70px; padding-bottom:40px; display:flex; position:relative; width:1040px;}
.login_area .login_inner:before {content:""; background:#fff; border-radius:30px; width:100%; height:400px; opacity:0.8; position:absolute; display:block; top:0; left:0; z-index:-1;}
.login_area .login_inner .login_title {flex-basis:55%;}
.login_area .login_inner .login_title h1 {margin:0; font-weight:700; font-size:40px;}
.login_area .login_inner .login_title p {font-size:18px; font-weight:500; margin-top:25px; margin-bottom:0; line-height:30px; color:#4f4f4f;}
.login_area .login_inner .form_login {flex-basis:45%;}
.login_area .login_inner .form_login.logout {position:relative; bottom:-33px; right:-35px;}
.login_area .login_inner .login_list {margin:0; padding:0; margin-top:30px;}
.login_area .login_inner .login_list li {list-style:none;}
.login_area .login_inner .login_list li label {font-size:0; visibility:hidden;}
.login_area .login_inner .login_list li input {border:1px solid #8f8f8f; background:#fff; border-radius:0; height:35px; width:100%; transition:0.2s; padding:0 10px;}
.login_area .login_inner .login_list li input:focus {border:1px solid #26a1ff; background:#fff; outline:none;}
.login_area .login_inner .login_list li input::placeholder {font-size:18px; color:#000;}

.login_area .login_inner .btn_area {text-align:right; margin-top:20px;}
.login_area .login_inner .btn_area .btn_m i {font-size:18px;}

.login_area .login_inner .txt_error {color:#ec2222; position:relative; padding-left:22px; margin:0; margin-top:20px;}
.login_area .login_inner .txt_error:before {content:"\ef4e"; font-family:"Icofont"; position:absolute; left:0; top:-2px; color:#ec2222; font-size:18px;}

/* 로그인 */
.login_area.login {width:100%; height:100vh; position:relative; background-color:#fff; font-family:'Noto Sans KR', "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif;}
.login_area.login .login_form {top:50%;}
.login_area.login .login_main_title {text-align:left; color:#000; position:relative; z-index:-1;}
.login_area.login .login_title h2 {background:url(../images/login/login_logo1.png) no-repeat center; text-indent:-9999px; width:299px; height:54px;}
.login_area.login .login_title h2:after {content:""; background:url(../images/login/login_logo2.png) no-repeat center; width:95px; height:95px; display:block;
	position:absolute; right:60px; top:45px;}
.login_area.login .login_inner {padding:50px 60px 35px 60px; display:block; position:relative; width:550px; border-radius:20px; background:#72aebb; margin-top:0;
	box-shadow:0 10px 15px rgba(0,0,0,0.2);}
.login_area.login .login_inner:before {content:""; background:#fff; border-radius:30px; width:100%; height:400px; opacity:0.8; position:absolute; display:block; top:0; left:0; z-index:-1;}
.login_area.login .login_inner .login_title {}
.login_area.login .login_inner .login_title p {font-size:16px; font-weight:400; margin:20px 0; margin-bottom:50px; color:#0d4c78; line-height:1.3em;}
.login_area.login .login_inner .form_login {width:350px; margin:auto;}
.login_area.login .login_inner .form_login.logout {position:relative; bottom:-33px; right:-35px;}
.login_area.login .login_inner .login_list {margin:0; padding:0;}
.login_area.login .login_inner .login_list li {list-style:none; margin-top:30px;}
.login_area.login .login_inner .login_list li label {visibility:visible; float:left; font-size:16px; color:#fff; font-weight:300; width:35px; padding-right:10px; 
	line-height:35px; text-align:right;}
.login_area.login .login_inner .login_list li input {border:0; border-bottom:1px solid #fff; background:transparent; border-radius:0; height:35px; 
	width:calc(100% - 35px); transition:0.2s; padding:0 10px; color:#0d4c78;}
.login_area.login .login_inner .login_list li input:focus {outline:none; border-color:#55f000; color:#0d4c78; font-size:18px;}
.login_area.login .login_inner .login_list li input::placeholder {font-size:16px; color:#0d4c78;}

.login_area.login .login_function {margin:25px 0 5px 0;}
.login_area.login .login_function .m_check {margin:0; margin-left:35px;}
.login_area.login .m_check > input[type=checkbox] + label {color:#fff; font-size:14px; font-weight:400;}
.login_area.login .m_check > input[type=checkbox]:checked + label {color:#0d4c78;}
.login_area.login .m_check > input[type=checkbox] + label:before {background:transparent; border:1px solid #fff;}
.login_area.login .m_check > input[type=checkbox]:checked + label:before {background:#0d4c78; border-color:#0d4c78;}
.login_area.login .m_check > input[type=checkbox] + label:after {border:0;}
.login_area.login .m_check > input[type=checkbox]:checked + label:after {width:12px; height:7px; position:absolute; top:4px; left:3px; border-left:2px solid #55f000; 
	border-bottom:2px solid #55f000; opacity:1; transform:rotate(-45deg); transition:all 0.1s ease;}

.login_area.login .login_inner .login_btn {background:#4b8f9e; border-radius:30px; font-size:18px; color:#fff; padding:17px 0; width:100%; display:block; margin-top:30px;}
.login_area.login .login_inner .login_btn:hover {background:#0d4c78;}

.login_area.login .login_inner .txt_error {color:#ff0006; font-size:16px; margin-top:30px; text-align:center; padding:0;}
.login_area.login .login_inner .txt_error:before {display:none; } 

.login_area.login .link_join {color:#fff; font-size:16px; display:block; text-align:right; margin-top:20px; transition:0.2s;}
.login_area.login .link_join i {padding-left:10px;}
.login_area.login .link_join:hover {color:#0d4c78;}

.login_area .txt_forgot {text-align:right; color:#96959d; margin-top:45px;}

.login_area .login_footer {background:#030c39; text-align:center; position:absolute; bottom:0; width:100%; padding:5px 0;}
.login_area .login_footer .footer_inner {max-width:1280px; margin:0 auto; text-align:left;}
.login_area .login_footer span, .login_area .login_footer a {color:#fff; font-weight:300;}
.login_area .login_footer span:nth-of-type(1) {position:relative; padding-left:18px;}
.login_area .login_footer a {margin-left:30px;}
.login_area .login_footer .privacy_policy {color:#29c481;}
.login_area .login_footer span:nth-of-type(1):before {content:"\f059"; font-family:"Font Awesome 5 Free"; font-weight:300; color:#fff; display:block; position:absolute; 
	left:0; top:0; font-size:13px;}
.login_area .login_footer span:nth-of-type(2) {margin-left:35px; margin-right:20px;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color:#000;
    -webkit-box-shadow:0 0 0px 1000px #fff inset;
    box-shadow:0 0 0px 1000px #fff inset;
    transition:background-color 5000s ease-in-out 0s;
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
	-webkit-text-fill-color:#000;
    -webkit-box-shadow:0 0 0px 1000px #fff inset;
    box-shadow:0 0 0px 1000px #fff inset;
    transition:background-color 5000s ease-in-out 0s;
}

.login_area.login input:-webkit-autofill,
.login_area.login input:-webkit-autofill:hover,
.login_area.login input:-webkit-autofill:focus,
.login_area.login input:-webkit-autofill:active {
	-webkit-text-fill-color:#0d4c78;
    -webkit-box-shadow:0 0 0px 1000px transparent inset;
    box-shadow:0 0 0px 1000px transparent inset;
    transition:transparent 5000s ease-in-out 0s;
}

.login_area.login input:autofill,
.login_area.login input:autofill:hover,
.login_area.login input:autofill:focus,
.login_area.login input:autofill:active {
	-webkit-text-fill-color:#0d4c78;
    -webkit-box-shadow:0 0 0px 1000px transparent inset;
    box-shadow:0 0 0px 1000px transparent inset;
    transition:transparent 5000s ease-in-out 0s;
}
.login_area.login .login_list > li input:-webkit-autofill {transition:background-color 10000s ease-in-out 0s;}

/* response - mobile */
@media all and (max-width:480px){
}



/* 에러페이지 */
.login_area .error-page {text-align:right; margin-bottom:35px; font-family:'Arial';}
.login_area .error-page h1 {font-size:155px; font-weight:700; position:relative;}
.login_area .error-page h1:after {content:attr(data-h1);  position:absolute; top:0; left:0; right:0; color:transparent;
      /* webkit only for graceful degradation to IE */
      background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6); -webkit-background-clip: text;
      -webkit-text-fill-color:transparent; background-size:400%; text-shadow:#0038801px 1px 2px transparentize(#fff, .75); animation:animateTextBackground 10s ease-in-out infinite;}

.login_area #particles-js {position:fixed; top:50%; left:50%; width:400px; height:150px; margin:-95px 0 0 120px;}

@keyframes animateTextBackground {
  	0% {background-position:0 0;}
	25% {background-position:100% 0;}
	50% {background-position:100% 100%;}
	75% {background-position:0 100%;}
	100% {background-position:0 0;}
}