/* reset */
@charset "utf-8";
body, button, input, textarea, a, label, select {font-size:17px; font-weight:700; color:#fff;font-family:'Nanumsquare', '³ª´®½ºÄù¾î'}
body, h1, h2, h3, h4, ul, dl, dd, p, th, td, form, button, input, textarea, fieldset {margin:0; padding:0;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
li {list-style:none;}
button {border:0; background:none;}
button::-moz-focus-inner {padding: 0 !important; border:0;}
input {outline-style:none;}
textarea {resize:none; outline-style:none;}
table {border-collapse:collapse;}
th, td {vertical-align:middle;}
th {font-weight:normal;}
button, label {cursor:pointer;}
em {font-style:normal;}
fieldset {border:none;}
legend {display:none;}
img {border:none;}
caption {display:none;}
body {-webkit-text-size-adjust:100%;background:#191919 url('./images/bg.jpg') center top fixed;}
/* body {-webkit-text-size-adjust:100%; background-color:#000000;background:url('./img/login_bg.png');background-repeat:no-repeat;background-position:top center;background-size:cover;}
*/
html,body {height:100%;}
input,button {outline-style:none;}

/* login wrap */
#wrap {width:100%; height:100%;}
.login_wrap {position:absolute; top:40%; left:50%; margin:-220px 0 0 -210px; width:380px; height:500px; min-width:380px;background:rgba(0,0,0,0.5); outset rgba(255,255,255,0.25);border-radius:9px;}
.login_wrap .inner {position:relative; margin:0 auto; width:300px;}
.login_wrap .spot {margin-bottom:40px; }
.login_wrap .spot .logo {margin:30px 0 0 -6px; width:300px; height:120px;text-align:center;font-size:0px;background:url('./images/login/logo-du.png') center top no-repeat;background-size:300px}
.login_wrap .spot .slogan {margin:10px 0 0 -6px; width:300px; height:30px;text-align:center;color:#999}

@-moz-keyframes spin {100% {-moz-transform: rotate(360deg);}}
@-webkit-keyframes spin {100% {-webkit-transform: rotate(360deg);}}
@keyframes spin {100% {-webkit-transform: rotate(360deg); transform:rotate(360deg);}}

.login_form {position:relative;}
.login_form .btn_login {margin-bottom:5px; width:100%; height:40px; line-height:40px; border:1px solid #444444; border-radius:9px; text-align:center; background-color:#0404B4; transition:border, background .5s;z-index:1;}
.login_form .btn_login:hover {border:1px solid #fff;}
/* .login_form .btn_login:hover {background-color:#05063E;border:#616161; transition:border, background .5s;} */
.login_form .btn_register {position:relative; width:100%; height:40px; line-height:40px; border:1px solid #444444; border-radius:9px; text-align:center; background-color:#8A0808; transition:border, background .5s; z-index:1;}
.login_form .btn_register:hover {border:1px solid #fff;}
.login_form .btn_kakao {position:relative; width:100%; height:40px; line-height:40px; border:1px solid #444444; border-radius:0px; text-align:center; background-color:#088A08; transition:border, background .5s; z-index:1;}
/*.login_form .btn_kakao:hover {border:1px solid #fff;}*/
.input_area {margin-bottom:10px; border:1px solid #333; border-radius:9px; overflow:hidden; transition:border .5s;}
.input_area dt {display:none;}
.input_area dd {position:relative;}
.input_area dd:after {position:absolute; top:10px; left:14px; content:''; width:21px; height:27px; background:url('./img/sprite_login.png') no-repeat 0 -9999px;}
.input_area .input_box {width:100%; height:40px; line-height:40px; border: 5px outset #FAFAFA; text-align:center; background-color:#F5FBEF; color:#000000; }
.input_area .input_box:-ms-input-placeholder,
.input_area .input_box::-webkit-input-placeholder,
.input_area .input_box::-moz-placeholder,
.input_area .input_box::-moz-placeholder {color:#999;font-weight:normal;}
.input_area .dd_id {border-bottom:2px solid #333;}
.input_area .dd_id .input_box {border-radius:9px 9px 0 0;font-family:'nanumgothic', '³ª´®°íµñ';font-weight:normal;letter-spacing:-1px;}
.input_area .dd_id:after {background-position:-70px -160px;}
.input_area .dd_pw .input_box {border-radius:0 0 9px 9px;font-family:'nanumgothic', '³ª´®°íµñ';font-weight:normal;letter-spacing:-1px;}
.input_area .dd_pw:after {background-position:-70px -190px;}
.input_area .dd_pw .input_box {}
.input_area.selected {border:2px solid #f26522;}
.input_area.selected .input_box {background-color:#F5FBEF;}
.input_area.selected .dd_id:after {background-position:-100px -160px;}
.input_area.selected .dd_pw:after {background-position:-100px -190px;}

.recommend_code {position:absolute; top:107px; width:300px; border:1px solid #f26522; border-radius:9px; text-align:center; background-color:#101010; font-size:0; z-index:2;}
.recommend_code fieldset {height:101px;}
.recommend_code label {display:block; margin-top:6px; height:45px; line-height:45px; color:#fff;}
.recommend_code .input_box {display:inline-block; padding-right:40px; width:194px; height:40px; line-height:40px; border:none; border-radius:20px; text-align:center; background-color:#333;}
.recommend_code .btn_recommend {display:inline-block; margin-left:-64px; width:64px; height:40px; line-height:40px; border-radius:20px; text-align:center; background-color:#f26522;}

.sns_service {position:absolute; bottom:30px; left:50%; margin-left:-270px; padding:9px 9px 0 9px; width:530px; height:44px; border:1px solid #055555; border-radius:27px; background-color:#222; z-index:1; font-weight:normal;}
.sns_service .list {display:table; width:100%;}
.sns_service .list li {display:table-cell; width:200px; height:35px; line-height:36px;}
.sns_service .list .ic {float:left; margin-right:10px; width:35px; height:35px; vertical-align:middle; background:url('./img/sprite_login.png') no-repeat 0 -9999px;}
.sns_service .list .kakaotalk .ic {background-position:-130px -160px;}
.sns_service .list .telegram .ic {background-position:-170px -160px;}
.sns_service .list .facebook .ic {background-position:-210px -160px;}