@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
/*
* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess
 */
@font-face { font-family: 'Noto Sans KR'; font-weight: 100; font-style: normal; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 300; font-style: normal; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 400; font-style: normal; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 500; font-style: normal; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 700; font-style: normal; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 900; font-style: normal; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); }

body {
    -webkit-text-size-adjust: none;
    font-size: 12px;
    color: #515151;
    line-height: 1;
    margin: 0;
}

#wrap { display: table; position: absolute; width: 100%; height: 100%; background-color: #f6f7fb; }
#loginBoxArea{ display: table-cell; vertical-align: middle; width:100%; margin:0 auto; font-family:"Noto Sans KR"; }
#loginBoxArea .loginBox { width: 94%; max-width: 470px; background-color: #fff; padding: 40px; margin: 0 auto; border: 1px solid #d6d6d6; box-sizing: border-box; border-radius: 5px;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15);
}
#loginBoxArea h1 { margin-top: 0;  margin-bottom:40px; font-size:20px; color:#666; text-align:center; font-weight:normal; letter-spacing: 4px; }
#loginBoxArea h1 > strong{font-weight:700;}
#loginBoxArea h1 img { max-width: 100%; display: block; margin: 0 auto; margin-bottom: 20px; width: 350px; }
#loginBoxArea .inputBox{ width: 100%; max-width:360px; margin:0 auto 30px auto; text-align:center; /* box-shadow:5px 5px 5px #e0e0e0; */  /* background-color:#348fe2; */}
#loginBoxArea .inputBox > p {margin-bottom:150px; font-size:22px; color:#333; text-align:center; font-weight:400; display: block; }
#loginBoxArea .inputBox button{ width:100%; height:60px;padding-bottom:4px; background-color:#000000; color:#fff;  border-radius:60px; font-size:18px; font-weight:400; border: 0; cursor: pointer; line-height: 60px; letter-spacing: 1px; outline: none;}
#loginBoxArea .inputBox a { font-size: 15px; color: #62148f; margin-top: 20px; text-decoration: none; display: inline-block; }
#loginBoxArea .chk_box { text-align: left; color: #333; }
#loginBoxArea .flid {  }
#loginBoxArea .flid > * { margin-bottom:15px; }
#loginBoxArea .flid > *:last-child { margin-bottom:40px; }
#loginBoxArea .flid .id_box{width:100%; height:46px; overflow:hidden; background:url(../images/login/ico_id.png) 18px center no-repeat; border:1px solid #c6c6c6; border-radius: 3px; }
#loginBoxArea .flid .id_box > input{width:100%; height:100%; padding-left:50px; font-weight:700; border: 0; background-color: transparent; box-sizing: border-box; outline: none; }
#loginBoxArea .flid .id_box > input:focus { border-color: #0adbb8; }
#loginBoxArea .flid .pw_box{width:100%; height:46px; overflow:hidden; background:url(../images/login/ico_pw.png) 19px center no-repeat; border:1px solid #c6c6c6; border-radius: 3px; }
#loginBoxArea .flid .pw_box > input{width:100%; height:100%; padding-left:50px; font-weight:700; border: 0; background-color: transparent; box-sizing: border-box; outline: none; }
#loginBoxArea .flid .pw_box > input:focus { border-color: #0adbb8; }
#loginBoxArea .flid2 {margin-bottom: 40px; padding-left: 0; }
#loginBoxArea .flid2 > li { list-style: none; position: relative; /* padding-left:80px; */ }
#loginBoxArea .flid2 > li + li { margin-top: 15px; }
#loginBoxArea .flid2 > li label { position: absolute; left: 0; width: 70px; line-height: 35px; text-align: right;  }
#loginBoxArea .flid2 > li input { width:100%; height:36px; padding:5px; font-weight:700; border:1px solid #d6d6d6; background-color: transparent; box-sizing: border-box; border-radius: 3px; }

#loginBoxArea .footer {text-align:center;}
#loginBoxArea .footer h1{margin-bottom:15px;}
#loginBoxArea .footer h1 img { max-width: 100px; }
#loginBoxArea .footer .copyright{font-size:12px; color:#505c6a; margin: 0; line-height: 1.5; margin: 0 -10px; }
#loginBoxArea .footer .copyright span{display:inline-block; padding: 0 10px;}

/* Radio Checkbox */
/* Radio Checkbox */
input[type="checkbox"].custom, input[type="radio"].custom { box-sizing: border-box; padding: 0; }
[type="radio"].custom:not(:checked), [type="radio"].custom:checked, [type="checkbox"].custom:not(:checked), [type="checkbox"].custom:checked { position: absolute; left: -9999px; opacity: 0; }
[type="radio"].custom:not(:checked)+label, [type="radio"].custom:checked+label {
  position: relative; padding-left: 25px; cursor: pointer; display: inline-block; min-width: 30px; height: 30px; line-height: 30px; font-size: 1em; margin-right: 20px;
    transition: .28s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
[type="radio"].custom+label.text-none { min-width: auto; padding-left: 20px; }
[type="radio"].custom+label:before, [type="radio"].custom+label:after {
  content: ''; position: absolute; left: 0; top: 0; margin: 5px 5px 5px 0; width: 20px; height: 20px; z-index: 0; transition: .28s ease; box-sizing: border-box;
}
[type="radio"].custom:not(:checked)+label:before, [type="radio"].custom:not(:checked)+label:after, [type="radio"].custom:checked+label:before, [type="radio"].custom:checked+label:after { border-radius: 50%; }
[type="radio"].custom:not(:checked)+label:before, [type="radio"].custom:not(:checked)+label:after { border: 1px solid #ced9ee; }
[type="radio"].custom:checked+label:after, [type="radio"].custom:checked+label:before { border: 1px solid #ced9ee; }
[type="radio"].custom:checked+label:after { background-color: #566170; -webkit-transform: scale(0.5); transform: scale(0.5); }

[type="checkbox"].custom+label {
    position: relative; cursor: pointer; display: inline-block; padding-left: 35px; height: 25px; line-height: 25px; font-size: 1em; vertical-align: top;
    -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none;
}
[type="radio"].custom+label:last-child,
[type="checkbox"].custom+label:last-child { margin-right: 0; }
[type="checkbox"].custom+label:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    z-index: 0;
    border: 1px solid #c6c6c6;
    border-radius: 1px;
    background-color: transparent;
    transition: .2s;
    box-sizing: border-box;
}
[type="checkbox"].custom:checked+label:before{
    border: 1px solid #000000;
    background-color: #000000;
}
[type="checkbox"].custom:checked+label:after{
    content: '';
    position: absolute;
    top: 2px;
    left: 8px;
    z-index: 1;
    width: 4px;
    height: 10px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
}
.filled-in[type="checkbox"].custom:checked+label:before{
    border: 1px solid #56d48f;
    background-color: #56d48f;
}
.filled-in[type="checkbox"].custom:checked+label:after{
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
[type="checkbox"].custom.right+label { padding-left: 0; padding-right: 30px; }
[type="checkbox"].custom.right+label:before{ left: auto; right: 0; margin: 5px 0 5px 5px; }
[type="checkbox"].custom.right:checked+label:after{ left: auto; right: 5px; }
[type="checkbox"].custom:disabled+label, [type="radio"].custom:disabled+label { color: #bfbfbf; }
[type="checkbox"].custom:disabled+label:before, [type="radio"].custom:disabled+label:before{ border-color: #bfbfbf; background-color: #ddd; }
[type="checkbox"].custom+label+.txt { display: inline-block; vertical-align: middle; line-height: 25px; padding-left: 8px; font-size: 15px; color: #666; }
[type="checkbox"].custom+label+.txt a { font-weight: bold; color: #333; border-bottom: 1px solid #333; }