@charset "utf-8";

/**************************************************
login
***************************************************/

.login_wrap { min-width: 1280px; min-height: 700px; width: 100%; height: 100vh; background: url("../images/login/login_bg_img.jpg") no-repeat; background-size: cover; background-attachment: fixed; } 
.login_inner { display: flex; max-width: 1920px; min-width: 1280px; height: 100%; margin: 0 auto; } 
.login_inner .login_slogan_area { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; position: relative; width: calc(100% - 624px); padding-right: 112px; text-align: right; } 
.login_inner .login_slogan_area .slogan { color: #fff; font-size: 72px; font-weight: 700; } 
.login_inner .login_slogan_area .txt { position: relative; margin-top: 77px; padding-top: 77px; color: #dde3e8; font-size: 24px; font-weight: 400; line-height: 32px; } 
.login_inner .login_slogan_area .txt::after { content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 6px; background-color: #e49f15; } 
.login_inner .login_slogan_area .copy { position: absolute; bottom: 40px; left: 60px; color: #dde3e8; font-size: 13px; font-weight: 400; } 
.login_inner .login_input_area { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 67px; width: 624px; padding: 0 112px; background-color: #21248E; } 
.login_inner .login_input_area .logo { width: 272px; height: 48px; font-size: 0; background: url("../images/login/login_logo.svg") no-repeat center; background-size: contain; } 
.login_inner .login_input_area .login_language { margin-top: 65px; text-align: right; } 
.login_inner .login_input_area .login_language select { width: 120px; height: 48px; padding: 0 20px; border: 2px solid #fff; border-radius: 48px; color: #fff; font-size: 16px; background: inherit; background: url("../images/login/login_select_ico.svg") no-repeat right 20px top 50%; outline: none; } 
.login_inner .login_input_area .login_language select:focus { border: 2px solid #00b5d5; color: #00b5d5; background: #fff url("../images/login/login_select_ico_on.svg") no-repeat right 20px top 50%; } 
.login_inner .login_input_area .login_language select { -moz-appearance: none; -webkit-appearance: none; } 
.login_inner .login_input_area .login_language select::-ms-expand { display: none; } 
.login_inner .login_input_area .login_language select option { color: #000; } 
.login_form { display: flex; flex-direction: column; width: 100%; }
.login_form input[type="text"],
.login_form input[type="password"] { width: 100%; height: 70px; padding: 0 10px 0 65px; border: 3px solid #fff; border-radius: 70px; color: #333e63; font-size: 20px; outline: none; } 
.login_form input[type="text"]::placeholder,
.login_form input[type="password"]::placeholder { color: #aebecb; } 
.login_form input[type="text"]:focus,
.login_form input[type="password"]:focus { border: 3px solid #00b5d5; } 
.login_form input[type="text"] { margin-top: 40px; background: #fff url("../images/login/login_id_ico.svg") no-repeat 30px 50%; } 
.login_form input[type="password"] { margin-top: 20px; background: #fff url("../images/login/login_pw_ico.svg") no-repeat 30px 50%; } 

.login_checkbox { display: inline-block; margin-top: 20px; margin-right: 5px; vertical-align: middle; } 
.login_checkbox input[type="checkbox"] { display: none; } 
.login_checkbox input[type="checkbox"] + label { display: inline-block; min-width: 20px; min-height: 20px; padding-left: 30px; box-sizing: border-box; vertical-align: middle; color: #fff; font-size: 18px; font-weight: 500; background: url("../images/login/login_checkbox.svg") no-repeat 0 50%; cursor: pointer; } 
.login_checkbox input[type="checkbox"] + label.not-txt { margin: 0; padding: 0; } 
.login_checkbox input[type="checkbox"]:checked + label { background: url("../images/login/login_checkbox_on.svg") no-repeat 0 50%; } 
.login_checkbox + .login_btn { margin-top: 60px; }
.validation_txt { margin-top: 30px; color: #FF5454; font-size: 18px; font-weight: 400; text-align: center; } 
.login_btn { width: 100%; height: 68px; margin-top: 22px; border-radius: 68px; color: #fff; font-size: 22px; font-weight: 600; background-color: #E49F15; } 
.login_btn:hover { background-color: #E9B244; } 
.login_link_txt { margin-top: 30px; color: #738db2; font-size: 16px; font-weight: 500; text-align: center; } 
.login_link_txt a { padding-left: 5px; color: #fff; font-weight: 600; }
.login_link_txt a:hover { text-decoration: underline; }

.lang_select .lang_name { display: block; color: #000; font-weight: 700; line-height: 22px; font-size: 18px; padding-right: 24px; }
.lang_select.on .lang_name { background-image: url(../images/common/ico_lang_select_login_on.svg); }
.lang_select .lang_list { width: 120px; }
.lang_select .lang_list li a { text-align: center; }

.lang_select { align-self: flex-end; position: relative; display: inline-flex; align-items: center; width: 120px; height: 48px; border: 2px solid #fff; border-radius: 100px; }
.lang_select.on { border: 3px solid #00B5D5; background-color: #fff; }
.lang_select.on .lang_name { color: #00B5D5; background-image: url(../images/login/login_select_ico_on.svg); }
.lang_select .lang_name { display: inline-flex; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 16px; line-height: 19px; font-weight: 500; background: url('../images/login/login_select_ico.svg') no-repeat center right 20px; background-size: 18px auto; padding: 0 20px; }
.lang_select .lang_list { display: none; position: absolute; top: calc(100% + 11px); left: 50%; transform: translateX(-50%); padding: 11px 9px; border-radius: 16px; border: 1px solid #eee; background-color: #fff; box-shadow: 0 6px 16px rgba(0 ,0 ,0, 0.08); border: 3px solid #00B5D5; box-shadow: 0 10px 20px rgba(51, 62, 99, 0.1); }
.lang_select .lang_list li a { display: block; text-align-last: left; padding: 6.5px 10px; color: #222; font-weight: 600; font-size: 14px; line-height: 17px; border-radius: 8px; transition: all .3s; }
.lang_select .lang_list li + li { position: relative; margin-top: 6px; padding-top: 6px; }
.lang_select .lang_list li + li::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 20px); height: 1px; background-color: #eee; }
.lang_select .lang_list li:hover a { color: #009AB6; background-color: #CCF0F7; }