@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    src: url(/font/Pretendard/Pretendard-Thin.woff2);
    src: local('☺'), url(/font/Pretendard/Pretendard-Thin.otf) format('otf'), url(/font/Pretendard/Pretendard-Thin.woff) format('woff'), url(/font/Pretendard/Pretendard-Thin.ttf) format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    src: url(/font/Pretendard/Pretendard-ExtraLight.woff2);
    src: local('☺'), url(/font/Pretendard/Pretendard-ExtraLight.otf) format('otf'), url(/font/Pretendard/Pretendard-ExtraLight.woff) format('woff'), url(/font/Pretendard/Pretendard-ExtraLight.ttf) format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    src: url(/font/Pretendard/Pretendard-Light.woff2);
    src: local('☺'), url(/font/Pretendard/Pretendard-Light.otf) format('otf'), url(/font/Pretendard/Pretendard-Light.woff) format('woff'), url(/font/Pretendard/Pretendard-Light.ttf) format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    src: url(/font/Pretendard/Pretendard-Regular.woff2);
    src: local('☺'), url(/font/Pretendard/Pretendard-Regular.otf) format('otf'), url(/font/Pretendard/Pretendard-Regular.woff) format('woff'), url(/font/Pretendard/Pretendard-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    src: url(/font/Pretendard/Pretendard-Medium.woff2);
    src: local('☺'), url(/font/Pretendard/Pretendard-Medium.otf) format('otf'), url(/font/Pretendard/Pretendard-Medium.woff) format('woff'), url(/font/Pretendard/Pretendard-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    src: url(/font/Pretendard/Pretendard-SemiBold.woff2);
    src: local('☺'), url(/font/Pretendard/Pretendard-SemiBold.otf) format('otf'), url(/font/Pretendard/Pretendard-SemiBold.woff) format('woff'), url(/font/Pretendard/Pretendard-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    src: url(/font/Pretendard/Pretendard-Bold.woff2);
    src: local('☺'), url(/font/Pretendard/Pretendard-Bold.otf) format('otf'), url(/font/Pretendard/Pretendard-Bold.woff) format('woff'), url(/font/Pretendard/Pretendard-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    src: url(/font/Pretendard/Pretendard-ExtraBold.woff2);
    src: local('☺'), url(/font/Pretendard/Pretendard-ExtraBold.otf) format('otf'), url(/font/Pretendard/Pretendard-ExtraBold.woff) format('woff'), url(/font/Pretendard/Pretendard-ExtraBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    src: url(/font/Pretendard/Pretendard-Black.woff2);
    src: local('☺'), url(/font/Pretendard/Pretendard-Black.otf) format('otf'), url(/font/Pretendard/Pretendard-Black.woff) format('woff'), url(/font/Pretendard/Pretendard-Black.ttf) format('truetype');
}



.login_area {font-family:'Pretendard', "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif; width:100%; height:100vh; background:#eff7fd url("../images/login/etc_page_bg.png") no-repeat center; background-size:cover; position:relative;
    display:flex; justify-content:center; align-items:center;}
.login_area .login_box {background:#fff; width:100%; max-width:600px; padding:60px 100px 50px; position:relative; border-radius:30px; box-sizing:border-box;}
.login_area .login_logo {text-align:center;}
.login_area .login_logo h1 {font-size:0; text-indent:-9999px; background:url(../images/login/logo_login.png) no-repeat center; width:327px; height:23px; margin:auto;}
.login_area .inner_title {text-align:left; font-size:48px; line-height:1; font-weight:200; letter-spacing:2px; color:#000; margin:0 0 45px; letter-spacing:-4px;}
.login_area .title_info {font-size:18px; color:#2935ad; margin-top:35px; display:block; letter-spacing:-0.5px; word-break:keep-all;}
.login_area .form_list {list-style:none; margin:0; padding:0; margin-top:45px;}
.login_area .form_list li {position:relative; list-style:none; padding:0; margin:0 0 30px;}
.login_area .form_list li + li {margin-bottom:60px;}
.login_area .form_list li label {display:block; font-size:18px; line-height:25px; color:#000; font-weight:500; margin-bottom:6px;}
.login_area .form_list li .form_control#inp_loginPwd {padding-right:45px;}
.login_area .form_list > li input:-webkit-autofill {transition:background-color 10000s ease-in-out 0s;}
.login_area .form_list li .form_control::placeholder {color:#c1c1c1;}
.login_area .form_list li .btn_show_pwd {display:block; width:45px; height:45px; border:0; position:absolute; right:0; top:31px; background:url("../images/login/icon_pw1.png") no-repeat center;}
.login_area .form_list li input[type=text] + button.btn_show_pwd {background: url("../images/login/icon_pw2.png") no-repeat center;}
.login_area .form_list li .error_info {font-size:14px; color:#e20055; margin:0; position: relative; padding-left: 10px; line-height: 18px; margin-top: 10px;}
.login_area .form_list li .error_info + .error_info {margin-top:3px;}
.login_area .form_list li .error_info:before {content:"*"; display: block; width:10px; height: 18px; line-height: 18px; text-align: left; position: absolute; left: 0; top:0;}
.login_area .btn_area {}

.login_area .btn_area .etc_btn {width:100%; height:60px; border-radius: 30px; background: #2935ad; display: block; border: none; transition:0.2s; padding:0; color:#fff; font-size:20px; font-weight:300;}
.login_area .btn_area .etc_btn:hover {background-color: #232a5f;}
.login_area .btn_area .link_join {font-size:18px; text-align:center; color:#000; text-decoration:none; display:block; margin-top:35px;}

.form_control {border:0; border:1px solid #cecece; color:#000; font-size:16px; width:100%; height:45px; line-height:43px; padding:0 14px; transition:0.2s; border-radius:10px;
	font-family:'Pretendard', "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif !important;}
.form_control:hover, .form_control:focus {border-color:#2935ad; outline: 0;}
.form_control.disabled, .form_control[disabled], .form_control[readonly] {background-color:#e5e5e5; color:#000; border-color:#cecece;}


@media all and (max-width: 768px) {
    .login_area {display:block;}
    .login_area .login_box {min-width: auto; display: block; position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 30px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1); max-width: 460px; padding:60px;}
    .login_area .login_box:after {display: none;}
    .login_area .login_inner {width: 100%;}
    .login_area .login_inner .inner_title {font-size: 38px;}
    .login_area .login_inner .login_list {margin-top: 25px;}
    .login_area .login_inner .login_list li {margin-bottom: 15px;}
    .login_area .login_inner .login_list li label {font-size: 16px;}
    .login_area .login_inner .btn_area .login_btn {height: 50px; border-radius: 25px; font-size: 18px;}
    .login_area .login_bg {position: absolute; left: 0; top: 0; width: 100%; height: 100vh;}
    .login_area .inner_title {font-size: 38px; margin: 0 0 38px;}
    .login_area .title_info {font-size: 16px; line-height: 20px; margin-bottom: 70px;}
    .login_area .form_list {margin-top: 35px;}
    .login_area .form_list li {margin: 0 0 35px;}
    .login_area .form_list li label {font-size: 16px;}
    .login_area .btn_area .etc_btn {height: 50px;border-radius: 25px; font-size: 18px;}
}

@media all and (max-width: 500px) {
    .login_area .login_inner .inner_title {font-size: 30px;}
    .login_area .login_inner .login_list {margin-top: 20px;}
    .login_area .login_inner .login_list li {margin-bottom: 12px;}
    .login_area .login_inner .login_list li label {font-size: 15px;}
    .login_area .login_inner .btn_area .login_btn {font-size: 18px;}

    .login_area .login_box {max-width: calc(100% - 60px); padding:50px 40px;}
    .login_area .login_logo h1 {width:100%; background-size:100%;}
    .login_area .inner_title {font-size: 30px; margin: 0 0 30px;}
    .login_area .title_info {font-size: 15px; line-height: 18px; margin-bottom: 50px;}
    .login_area .form_list {margin-top: 30px;}
    .login_area .form_list li {margin: 0 0 30px;}
    .login_area .form_list li label {font-size: 15px;}
}

@media all and (max-width: 380px) {
    .login_area .login_inner .btn_area .login_btn {font-size: 16px;}
    .login_area .login_box {max-width: calc(100% - 40px); padding: 45px 30px 30px;}
	.login_area .title_info {font-size: 14px;line-height: 18px; margin-bottom: 40px;}
    .login_area .form_list {margin-top: 25px;}
    .login_area .form_list li {margin: 0 0 25px;}
    .login_area .btn_area .etc_btn {font-size: 16px;}
}

@media all and (max-width: 320px) {
    .login_area .login_box {width:calc(100% - 20px); padding:40px 25px 25px;}
    .login_area .login_inner .inner_title {font-size: 25px;}
    .login_area .title_info {font-size: 14px;}
}


/* 로그인 - 모바일 */
.login_area_mobile {font-family:'Pretendard', "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif; width:100%; height:100vh; position:relative;  
	background:#eff7fd url("../images/login/etc_page_bg.png") no-repeat center left 35%; background-size:cover; display:flex; justify-content:center; align-items:center;}
.login_area_mobile .login_box {width:100%; max-width:315px; position:relative; box-sizing:border-box; padding:0 20px;}
.login_area_mobile .login_logo {text-align:center;}
.login_area_mobile .login_logo h1 {font-size:0; text-indent:-9999px; background:url("../images/login/logo_login.png") no-repeat center; background-size:100%; height:23px; margin:auto;}
.login_area_mobile .inner_title {text-align:left; font-size:48px; line-height:1; font-weight:200; letter-spacing:2px; color:#000; margin:0 0 45px; letter-spacing:-4px;}
.login_area_mobile .title_info {font-size:18px; color:#2935ad; margin-top:35px; display:block; letter-spacing:-0.5px; word-break:keep-all; line-height:24px;}
.login_area_mobile .form_list {list-style:none; margin:0; padding:0; margin-top:45px;}
.login_area_mobile .form_list li {position:relative; list-style:none; padding:0; margin:0 0 30px;}
.login_area_mobile .form_list li label {display:block; font-size:18px; line-height:25px; color:#000; font-weight:500; margin-bottom:6px;}
.login_area_mobile .form_list li .form_control#inp_loginPwd {padding-right:45px;}
.login_area_mobile .form_list > li input:-webkit-autofill {transition:background-color 10000s ease-in-out 0s;}
.login_area_mobile .form_list li .form_control::placeholder {color:#c1c1c1;}
.login_area_mobile .form_list li .btn_show_pwd {display:block; width:45px; height:45px; border:0; position:absolute; right:0; top:31px; background:url("../images/login/icon_pw1.png") no-repeat center;}
.login_area_mobile .form_list li input[type=text] + button.btn_show_pwd {background: url("../images/login/icon_pw2.png") no-repeat center;}
.login_area_mobile .form_list li .error_info {font-size:14px; color:#e20055; margin:0; position: relative; padding-left: 10px; line-height: 18px; display: none; margin-top: 10px;}
.login_area_mobile .form_list li .error_info + .error_info {margin-top:3px;}
.login_area_mobile .form_list li .error_info:before {content:"*"; display: block; width:10px; height: 18px; line-height: 18px; text-align: left; position: absolute; left: 0; top:0;}
.login_area_mobile .btn_area {}

.login_area_mobile .btn_area .etc_btn {width:100%; height:60px; border-radius: 30px; background: #2935ad; display: block; border: none; transition:0.2s; padding:0; color:#fff; font-size:20px; font-weight:300;}
.login_area_mobile .btn_area .etc_btn:hover {background-color: #232a5f;}


.modal-content {border-radius:15px; border:0; box-shadow:none; padding:0 10px;}
.modal-content .layerCon .msg {padding:30px 0 20px;}
.modal-content .layerCon .msg p {font-size:16px; font-weight:500;}
.modal-content .layerCon .btnArea {margin-bottom:18px; display:flex; justify-content:space-between; font-size:0;}
.modal-content .layerCon .btnArea .btn {font-size:16px; border-radius:12px; padding:14px 0; background:#e5e5e5; flex:1 1 auto; color:#333; border:0;}
.modal-content .layerCon .btnArea .btn:hover {border:0;}
.modal-content .layerCon .btnArea #btn_confirmOk {width:60%; color:#fff; background:#272aac; order:2; margin-left:9px;}
.modal-content .layerCon .btnArea #btn_confirmCancel {width:40%; order:1;}