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

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
} 
 
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
 
body, html { font-family:'Pretendard-Regular', 'Malgun Gothic', 'Droid Sans', 'Apple-Gothic', '애플고딕', 'Tahoma', dotum, '돋움', gulim, '굴림', sans-serif; margin: 0; padding: 0; margin: 0; padding: 0; color: #000; font-size: 14px; width: 100%;height: 100%;  overflow-x: hidden; position: relative; }
	h1, h2, p { margin: 0; padding: 0;}
	input, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
	 
	.body_login { background-color: #d8eee1;display: flex;align-items: center;justify-content: center;  background-size: cover}
	.login_outer { width: 800px; height: 70vh; background-color: #fff;box-shadow: 0px 0px 30px 5px #bbbbbb; margin: 0 auto}
	.login_area { width: 50%; height: 100%; float: left; overflow: auto; position: relative}
	.login_img { background: url("./image/login_bg_green1.png") center center no-repeat; background-size: cover;}
	.login_img h1 { color: #FFF; position: absolute; left: 20PX; top: 20px; font-size: 16px;}
	.login_img h1 img { width: 150px; height: auto}
	.txt_wrap { text-align: center; color: #fff; width: 90%; margin-left: auto;margin-right: auto; margin-top: calc(25vh + 30px);}
	.txt_wrap p {line-height: 1.4}
	.txt_wrap .txt_1 { font-size: 45px; font-family: 'GMarketSans'; margin-top: 10px;}
	.txt_wrap .txt_1:after { content: ''; display: block; width: 30px; height: 5px; border-radius: 3px; background-color: #fff; margin: 10px auto 15px auto;}
	.txt_2 { font-size: 20px;}
	.txt_3 { font-size: 14px;}
	.txt_4 { font-size: 16px; letter-spacing: 5px}
	.login_img .l_h2 { font-size: 26px; margin:  0 0 10px 0; text-align: center; color:#f2f2f2; font-family: 'GMarketSans';}
	.login_img .l_h2 span { color:#fff}
	.login_img .l_h2 img { width: 300px;}
	.login_img .l_txt1 {font-size: 18px; margin:  0; font-family: 'GMarketSans'; text-align: center; color: #fff}
	.l_txt_foot { color: #FFF; position: absolute; right: 20PX; bottom: 20px; font-size: 12px; opacity: 0.5;}
	.login_form {display: flex;align-items: center;justify-content: center;}
	.login_form h1 { font-size:30px;font-family: 'GMarketSans'; color: #0a7ef5; text-align: center; padding-bottom: 15px; letter-spacing: 0; display: none}
	img {}
	.login_form h2 { font-size:19px; font-family: 'GMarketSans'; color: #4cc486; text-align: center; padding-bottom: 15px; letter-spacing: 2px;}
	.login_form p { color: #999; font-size: 12px; padding-bottom: 20px; text-align: center}
	.login_inner { width: 250px; margin: 0 auto}
	.login_inner .login_input_wrap { background: #f5f5f5; border-left: 3px solid #4cc486; margin: 15px 0;}
	.login_input_wrap input { width: 100%; padding: 10px; border:0; background-color: transparent; font-size: 14px; box-sizing: border-box; outline: none;}
	.form-control::-ms-expand {
background-color:transparent;
border:0
}
.form-control:focus { color: #495057; background-color: transparent; border-color: transparent; outline: 0; box-shadow:none;
}
.form-control::-webkit-input-placeholder {
color:#999;
opacity:1
}
.form-control:-ms-input-placeholder {
color:#999;
opacity:1
}
.form-control::-ms-input-placeholder {
color:#999;
opacity:1
}
.form-control::placeholder {
color:#999;
opacity:1
}
.form-control:disabled, .form-control[readonly] { background-color: #e7e7e7; opacity: 1 }
select.form-control:not([size]):not([multiple]) {  }
select.form-control:focus::-ms-value {
color:#495057;
background-color:#fff
}
 
.login_btn_wrap { margin-top: 10px;}
.login_btn_wrap .login_btn { width: 100%; background-color: #4cc486; color: #fff; padding: 7px 10px; text-align: center; display: inline-block; border: 0; border-radius: 20px;  font-size:16px; font-weight: bold}
.login_txt_wrap { padding-bottom: 10px;}
.check_txt { margin-left: 5px; vertical-align:top; color: #666; font-size: 14px;}
.login_copy { text-align: center; color: #999; margin-top: 20px; font-family: 'Arial'}
	
@media (max-width: 800px) {
	.body_login { background: url("./image/login_ex1.png") center center no-repeat; background-size: cover;}
	.login_outer { width: 80%; height: 80vh; background-color: #fff;box-shadow: 0px 0px 10px 3px #192a3d; margin: 0 auto}
    .login_area { width: 100%; }
	.login_img { display: none}
	.login_form h1 { display: block}
	.login_form h2 { color: #666}
}