@charset "utf-8";
/* -----------------------------------------------
	* 로그인 화면 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : SSAL
	- 최종 수정일 : 
	- 최종 수정자 : 
--------------------------------------------------*/

/****************************************************
	Login Style
****************************************************/

html,body {height:100%;}
.log_frame {
    display: flex;
    width: 100%;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.log_container {    
    display: flex;
    position: relative;
    max-width: 300px;
    min-width: 180px;
    min-height: 200px;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: var(--default-border-line) var(--point-color1);
    border-radius: 0 0 var(--default-border) var(--default-border);
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
.log_header{
    position: absolute;
    top: var(--default-before-top);
    right: 0;
    width: 100%; 
    text-align: right; 
    padding-right: 8px;
}
.log_header>a, .log_container:before{
    line-height: var(--default-before-ht);
    color: var(--base-color);
    text-shadow: -1px 0px var(--point-color1), 0px 1px var(--point-color1), 1px 0px var(--point-color1), 0px -1px var(--point-color1);
}

.log_container:before {   
    content: "VILIVE";
    text-align: center;
    font-size: 16px;
    font-family: var(--display-font-eng);   
    height: var(--default-before-ht);
    width: 100%;     
    display: block;
    position: absolute;
    top: var(--default-before-top);
    right: 0px;
    z-index: -1;
    background: linear-gradient(to right, var(--point-color1) 40%, var(--point-color2));
    border-radius: var(--default-border) var(--default-border) 0 0;
    border: var(--default-border-line) var(--point-color1);
}
.log_logo { margin: 5px 0 15px; }
.log_logo > img { max-width: 100px; }

.log_form {
}
.log_form .log_input,.log_form .log_btn {
    display: block;
    width:100%;    
    height: var(--default-before-ht);
    line-height: var(--default-before-ht);
    border-radius: var(--default-border);
    border: none;    
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
}
.log_form .log_input {
    color: var(--point-color1);
    outline-color: var(--point-color1);
    background: var(--base-color);
    font-family: var(--base-font-ko);
}
.log_form .log_input::placeholder {
    color: var(--point-color1);    
}
.log_form .log_btn {
    color: var(--base-color);
    outline-color: var(--point-color1);
    background: var(--point-color1);  
    cursor: pointer;
    font-size: 22px;
    font-family: 'Material Symbols Rounded';    
    font-variation-settings: 'FILL' 1,'wght' 200; /*마테리얼 가변 설정*/
}
.log_form .log_btn:hover { background: var(--point-color2); }
.log_form input + input,.log_form input + button { margin-top:7px; }