﻿

html {height:100%;}
body {margin:0; min-height:820px; height:100%; background: radial-gradient(#657783, #55646d); color:#ddd; font-family:nanum gothic;}
a {text-decoration:none; color:#ddd; font-size:12px;; font-weight:bold;}
a:hover {text-decoration:underline;}
form {height:100%; display:table; table-layout:fixed; margin:0 auto; border:;}
img {width:30px;}
input[type=text] {width:96.8%; height:45px; padding:0 0 0 10px; margin:15px 0; background:#6f7d8b; color:#ddd; border-radius:5px; vertical-align:middle; border:none; display:block; font-size:16px; caret-color:#fff; cursor:default;}
input[type=password] {width:300px; height:45px; padding:0 0 0 10px; margin:15px 0; background:#6f7d8b; color:#ddd; border-radius:5px; vertical-align:middle; border:none; display:block; font-size:16px; caret-color:#fff; cursor:default;}
input[type=checkbox] {width:16px; height:16px; vertical-align:middle; border-radius:5px; color:#ddd; display:inline-block; }
label {color:#ddd; vertical-align:middle; font-size:14px; font-weight:bold; margin:0 0 2px 5px; display:inline-block;}
input:-webkit-autofill {-webkit-box-shadow:0 0 0 30px #6f7d8b inset ; -webkit-text-fill-color:#ddd; } 
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {transition:background-color 5000s ease-in-out 0s; }
input::-webkit-input-placeholder {color: #aaa; z-index:99999}
input:-moz-placeholder {color: #aaa; z-index:999999}

.wrap {margin:0 auto; width:310px; border:; display:table-cell; vertical-align:middle; text-align:center; }
.wrap img {width:90px; opacity:0.7;}
.wrap .logotxt {margin:10px 0 60px 0;}

.wrap .login {width:100%; padding:15px 0; margin:3px 0 60px 0; vertical-align:middle; border-radius:5px; display:block; color:#eee; background:linear-gradient(#4db5fe, #0396fc); font-size:16px;}
.wrap .login:hover {background:linear-gradient(#396dc5, #4f87cd); text-decoration:none;}
.wrap .login:active {opacity:0.5;}
.wrap .line {position:relative; width:100%; height:1px; margin:13px 0; background:linear-gradient(to right, rgba(204,204,204,0), rgba(204,204,204,0.5), rgba(204,204,204,0)); }
.wrap .bottom {height:200px;}
.wrap .bottom100 {height:100px;}
.wrap .height50 {height:50px;}

/* absolute */
.footer_tl {position:fixed; left:10px; top:10px; font-size:17px; font-weight:bold;}
.footer_tr {position:fixed; right:15px; top:10px; font-size:16px; opacity:0.5;}
.footer_tr:hover {opacity:1;}
.footer_tr a {font-size:16px; font-weight:normal; vertical-align:middle;}
.footer_tr img {width:18px; vertical-align:middle;; margin-bottom:3px;}
.footer {position:fixed; right:15px; bottom:15px; font-size:13px;}
.footer_l {position:fixed; left:15px; bottom:10px; opacity:0.8;}
.footer_l:hover {opacity:1;}

#lblResult2 {position:absolute; top:58px; left:320px; display:table; border-radius:5px; padding:5px; font-size:13px; background:#f00; color:#fff;}
#lblResult1 {position:absolute; top:269px; left:320px; display:table; border-radius:5px; padding:5px; font-size:13px; background:#f00; color:#fff;}


/* 아이디, 비밀번호 찾기 */
.wrap .tab {margin-bottom:60px;}
.wrap .tab a {width:36.2%; background:#6f7d8b; border-radius:5px; padding:15px 20px; display:inline-block; text-decoration:none; font-size:16px;}
.wrap .tab a:hover {opacity:0.7;}
.wrap .tab .on {background:linear-gradient(#4db5fe, #0396fc);}
.wrap .name input[type=text] {margin-bottom:px;}
.wrap .phoneN input[type=text] {width:100px; display:inline-block; text-align:center; padding:0;}
.wrap .phoneN select {width:80px; height:45px; padding:0 0 0 10px; background:#6f7d8b; border:none; border-radius:5px; color:#ddd; font-size:16px;}
.wrap .hmargin30 {height:30px;}
.wrap .btn2 {margin-bottom:30px;}
.wrap .btn2 a {width:36.2%; background:#6f7d8b; border-radius:5px; padding:15px 20px; display:inline-block; text-decoration:none; font-size:16px;}
.wrap .btn2 a:hover {opacity:0.7;}
.wrap .btn2 .on {background:linear-gradient(#4db5fe, #0396fc);}
.wrap .result {width:100%; padding:30px 0; margin:30px 0 10px 0; border-radius:5px; background:#6f7d8b;}

/* 회원가입 */
.input2 input[type=password] {width:44%; display:inline-block;}

/* 독립클래스 */
.wrap .btn {width:36.2%; background:#6f7d8b; border-radius:5px; padding:15px 20px; display:inline-block; text-decoration:none; font-size:16px;}
.wrap .btn:hover {opacity:0.7;}
.wrap .btn_blue {width:36.2%; background:linear-gradient(#4db5fe, #0396fc); border-radius:5px; padding:15px 20px; display:inline-block; text-decoration:none; font-size:16px;}
.wrap .btn_blue:hover {opacity:0.7;}
.wrap .btn1 {width:100%; padding:15px 0; margin:3px 0 30px 0; vertical-align:middle; border-radius:5px; display:block; color:#eee; background:linear-gradient(#4db5fe, #0396fc); font-size:16px;}
.wrap .btn1:hover {background:linear-gradient(#396dc5, #4f87cd); text-decoration:none;}
.wrap .btn1:active {opacity:0.5;}

.wrap .t_center {text-align:center;}
.wrap .t_bold {font-weight:bold;}
.wrap .t_yellow {color:Yellow;}
.wrap .t_space {letter-spacing:3px;}


/*나눔 다시 되게 181017*/

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf) format('truetype');
}