@charset "UTF-8";

/* =================================================================================================
 * 파일명: login_mobile_style.css (경량화 버전)
 * 설명: 모바일 로그인 페이지에 필수적인 스타일만 포함하도록 최적화된 CSS 파일입니다.
 * 원본에서 로그인과 직접적으로 관련 없는 스타일(헤더, 네비게이션, 게시판, 메인 콘텐츠 등)은 제거되었습니다.
 ================================================================================================= */

/* 구글 폰트 */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700,300");
@import url("https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css");

/* NotoSans 로컬 폰트 */
@font-face {
	font-family: 'NotoSans';
	font-style: normal;
	font-weight: 100;
	src: url('../font/NotoSans-Thin.eot');
	src: url('../font/NotoSans-Thin.eot?#iefix') format('embedded-opentype'),
		 url('../font/NotoSans-Thin.woff2') format('woff2'),
		 url('../font/NotoSans-Thin.woff') format('woff');
}
 
@font-face {
	font-family: 'NotoSans';
	font-style: normal;
	font-weight: 300;
	src: url('../font/notokr-regular.eot');
	src: url('../font/notokr-regular.eot?#iefix') format('embedded-opentype'),
		 url('../font/notokr-regular.woff2') format('woff2'),
		 url('../font/notokr-regular.woff') format('woff');
}

/* ==========================================================
 * 공통 스타일 (필수 리셋 및 유틸리티)
 ========================================================== */

html,body{width:100%;height:100%;margin: 0; padding: 0;}
body, ul, ol, li, dl, dt, dd, form, table, th, td, fieldset, input, textarea, select, button, h1, h2, h3, h4, h5, h6, pre, form, legend { margin: 0; padding: 0;  font-family:'NotoSans', 'NanumSquare', 'Roboto', '맑은 고딕', 'Malgun Gothic', Dotum, Arial, sans-serif;vertical-align: middle; }
ul, ol { list-style: none outside none;}
li { list-style: none;}
legend { 
  width: 0;
}
table { border-collapse: collapse; border-spacing:0;}
label { display: inline-block; cursor:pointer;}
input, select, button, label { vertical-align: middle; outline-width: 0;}
button { border:none 0; background:none; cursor:pointer;}
a { text-decoration: none; display: inline-block;}
a img { border: none;}
img {vertical-align:top; font-size: 1px;vertical-align: middle; border: 0; }
caption { overflow: hidden; visibility: hidden; height: 0; font-size: 0;}

.hide { display: none !important; }
.ir  { display: block; text-indent: -99999px; overflow: hidden; z-index: -1; font-size: 1px; height:1; width: 1; line-height: 0;}
*, *::before, *::after { box-sizing: border-box;}

/* placeholder 공통 스타일 */
input::placeholder { color: #999;}
.login_area input::placeholder { color: #999;}

::-webkit-input-placeholder { color: #d5e6ee; }
::-moz-placeholder { color: #d5e6ee; }
:-ms-input-placeholder { color: #d5e6ee; }
:-moz-placeholder { color: #d5e6ee; }


/* ==========================================================
 * 웹토스트 알림 (mobile_login_jscss_core.jsp 에서 사용)
 ========================================================== */
#com_snackbar {
    visibility: hidden;
    width: 290px;
    margin-left: -145px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1999;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

#com_snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}


/* ==========================================================
 * 로그인 페이지 전용 스타일
 ========================================================== */
.login_bg { 
    width: 100%; 
    height: 100vh; 
    background:url(../images/mobile_login_bg.jpg) no-repeat center center; 
    background-size: cover; 
    -webkit-animation: bgScale 8000ms 1 ease-out; 
    -o-animation: bgScale 8000ms 1 ease-out; 
    animation: bgScale 8000ms 1 ease-out;
	-webkit-transform: scale(1); 
    -o-transform: scale(1); 
    transform: scale(1); 
}

@keyframes bgScale {
	0% { transform: scale(1.2); }
	100% { transform: scale(1) rotate(0.02deg); }
}

.bg_area { 
    width: 100%; 
    height: 100vh; 
    overflow: hidden; 
    display: inline-block; 
    float: left;
}

.login_con { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 50; 
    width: 100%; 
    right:0; 
    bottom:0; 
    text-align: center;
}

.login_con h1 { 
    position: absolute; 
    left: 20px; 
    top: 10px;
}

.login_con p { 
    position: relative;
    top: calc(50% - 220px);
}

.web_v { display:block;}
.mo_v { display: none;}

.wrap_login { 
    max-width: 600px; 
    width: calc(100% - 60px); 
    margin: 0 auto; 
    position: absolute; 
    left:0; 
    right:0; 
    bottom:30px;
}

.login_area { 
    margin-top: 100px; 
    width: 100%; 
    display: inline-block; 
}

.login_area li { 
    width: 100%; 
    border-bottom: 1px solid #5d9fbd; 
    height: 39px; 
    margin-bottom: 8px; 
}

.login_area li div { 
    padding-left: 25px; 
    text-align: left; 
    line-height: 39px; 
    position: relative;
}

.login_area li input { 
    width: 100%; 
    background: none; 
    color: #d5e6ee; 
    font-size: 14px; 
    border: none; 
    height: 38px; 
    line-height: 38px;
}

.login_area li input::placeholder { 
    color: #fff; 
}

.login_area label {
    width: 17px; 
    position: absolute; 
    left:0; 
    top: 0; 
    display: inline-block; 
    height: 17px;
}

.id { 
    background: url(../images/icon_id.png) no-repeat left center; 
    background-size: 13px 17px; 
}

.pw { 
    background: url(../images/icon_pw.png) no-repeat left center; 
    background-size: 13px 17px ; 
}

.btn_login { 
    width:100%; 
    height: 40px; 
    background-color: #41aeff; 
    line-height: 40px; 
    color: #fff; 
    font-size: 14px; 
    font-weight: bold; 
    margin-top: 3px; 
    margin-bottom: 17px;
    -webkit-transition-delay: 0.03s; 
    transition-delay: 0.03s;
    transition: 0.3s ease; 
    -moz-transition: 0.3s ease; 
    -webkit-transition: 0.3s ease; 
    -o-transition: 0.3s ease;
}

a:active.btn_login,
a:hover.btn_login { 
    background-color: #fff; 
    color: #096bd0;
}

.login_option { 
    text-align: left;  
    margin: 0 auto; 
}

.login_option label { 
    color: #fff; 
    font-size: 13px; 
    margin-right: 20px;
}

.login_option input { 
    width: 16px; 
    height: 16px; 
    margin-right: 5px; 
    border: 1px solid #fff;
}

.login_con .comment { 
    font-size: 12px; 
    color: #8bdaf5; 
    margin:0; 
    padding: 0; 
    margin-top: 15px !important; 
    top: auto !important; 
    text-align: center;
}

/* ==========================================================
 * 반응형 스타일 (로그인 페이지)
 ========================================================== */

@media only screen and (max-width:1024px){
    .login_con h1 img { width: 150px;}
    .login_con p { position: relative; top: calc(50% - 230px);}
    .login_con p img { width: 80%; max-width: 500px;}
}

@media only screen and (max-width:479px){
    .login_con h1 img { width: 120px;}
    .login_con p { margin-top: 30%;}
    .login_con p img { width: 85%; max-width: 240px; }
    .web_v { display: none;}
    .mo_v { display: block; width: calc(100% - 140px); margin: auto 70px; margin-top:0 !important;}
}