@charset "utf-8";
/* CSS Document */

/**********************************************
 * Infomation : 토양지하수 종합정보 시스템 : 외부입력 : Login
 * FileName   : login.css
 * Update     : 2025.11.24.
**********************************************/

html, body{ height: 100%; overflow: hidden;}

#eXloginWrap{ height: 100%;}

.field_set{ display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 24px;}
.form_group{ display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; gap: 8px; width: 100%;}
.form_group .form_tit{ line-height: 1;}
.form_group .form_tit label{ font-size: 15px;}
.form_group .form_conts{}
.form_group .form_conts input{ width: 100%;}

.form_group { display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; gap: 8px; width: 100%;}

.form_inp.lg{ height: 44px; font-size: 17px; padding: 0 17px;
    font-size: inherit;
    box-sizing: border-box;
    border: 1px solid #717171;
    border-radius: 5px;
}

.form_inp::placeholder{ color: #8e8e8e;}

.btn_m {
    position: relative;
    padding: 0 16px;
    height: 40px;
    color: #fff;
    border-radius: 6px;
    white-space: nowrap;
    background-color: #7b7b7f;
    display: inline-flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
}

.btn_m.type1{ background-color: #005aab; border: none; color: #fff;}
.btn_m.type2{ background-color: #eff5ff; border: 1px solid #005aab; color: #005aab;}
.btn_m.type3{ background-color: var(--ce-white); border: 1px solid var(--ce-gray-90); color: var(--ce-secondary-90);}

.btn_m.lg { height: 44px; font-size: 15px;}

.mem_login_wrap{background-color: #fff; border-radius: 10px; padding: 60px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2)  ; }
.mem_join_tit{ width: 100%; height: 80px; text-align: center; padding-top: 40px; background: url("../images/login/icon_mem_user.png") no-repeat center top 0; position: relative; font-size: 30px; font-weight: 700; line-height: 1; }

.idpw_search_wrap{ width: 100%; }
.idpw_search{ display: flex; justify-content: flex-end; gap: 25px;}
.idpw_search li{ position: relative;}
.idpw_search li:not(:first-child)::before{ content: ""; background-color: #5f5f5f; width: 1px; height: 16px; position: absolute; left: -13px; top: 4px;}

.btn_id_search{ border-bottom: 1px solid #1d1d1d; line-height: 1; font-size: 15px;}

/* 동영상 BG */
.ex_login_wrap{ width: 520px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 668px; z-index: 999;}

.ex_login_top{ text-align: center;}
.logo_exlogin{ margin-bottom: 12px; opacity: .5;}
.exlogin_tit{ font-size: 30px; font-weight: bold; color: #fff; margin-bottom: 70px;}

.ex_login_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;}
.ex_login_bg::before{ content: ""; position: absolute; width: 100%; height: 200px; z-index: 3; background: linear-gradient(180deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.0) 100%);}
.ex_login_bg::after{ content: ""; position: absolute; background-color: rgba(4, 23, 47, .8); width: 100%; height: 100%; left: 0; top: 0;}
.ex_login_bg video{ width: 100%; height: 100%; object-fit: cover;}