@charset "UTF-8";

body{overflow:hidden}

/* loading-wrap */
.loading-wrap {position:fixed; z-index:99999; width:100vw; height:100vh; background-color:rgba(255, 255, 255, 0.5); display:flex; display:-ms-flexbox; -ms-flex-pack: center !important; justify-content: center !important; -ms-flex-align: center !important; align-items: center !important;}
.loading-wrap .loading-img {display:inline-block; width:64px; height:64px; background:url('../images/loading2.gif') no-repeat center center;}

/*로그인 설정*/
.login_page {min-width:1200px; min-height:100%; box-sizing:border-box; background-image:url('../images/bg.png'); background-repeat:no-repeat; background-position:50% 50%; overflow:hidden;}
.login_form {display:inline-block; width:1000px; box-sizing:border-box; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 10px 30px rgba(25,25,25,0.5); overflow:hidden; border-radius:10px;}
.login_form:after {content:""; display:block; float:none; clear:both;}
.login_form #particles-js {width:350px; height:600px; float:left; background-color:#007ec1; background-image:url(''); background-size:cover; background-position:50% 50%; background-repeat:no-repeat; position:relative;}
.login_form #particles-js h1 {position:absolute; top:50%; left:0; text-align:center; transform:translateY(-50%); width:100%;}
.login_form #particles-js h1 strong {display:block; color:#ffffff; font-weight:700; font-size:34px; line-height:34px;}
.login_form #particles-js h1 .st {font-size:42px; line-height:42px;}
.login_form #particles-js h1 .nd {position:relative; box-sizing:border-box; padding-bottom:44px; margin:15px 0 40px;}
.login_form #particles-js h1 .nd:after {content:""; display:block; width:60px; height:4px; background-color:#FFFFFF; position:absolute; bottom:0; left:50%; transform:translateX(-50%);}
.login_form #particles-js h1 span {display:block;color:rgba(255,255,255,1); font-size:15px; line-height:25px; font-weight:300;}

.log-box {width:650px; height:600px; float:left; box-sizing:border-box; position:relative; background-color:rgba(255,255,255,0.9);}
.form-box {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.form-box > strong {display:block; font-size:46px; color:#007ec1; text-align:center; line-height:46px; margin-bottom:35px;}

.input-box {text-align:right;}
.input-box button {width:400px; height:50px; font-size:16px; font-weight:500; color:#fff; background-color:#007ec1; border:0; border-radius:3px; margin-top:30px; cursor:pointer}
.input-type {position:relative; font-size:0; margin-bottom:10px; text-align:left;}
.input-type label {position:absolute; width:50px; text-align:center; top:50%; left:0; transform:translateY(-50%); font-size:0; color:#888888;}
#savecheck+label{left:auto;right:72px;overflow:visible}
#savecheck+label:after{content:'아이디저장';position:absolute;right:-72px;font-size:12px;line-height:20px}
#savecheck:focus+label{outline:1px dashed #333}
.input-type label i {font-size:18px; transition:0.25s;}
.input-type input {width:400px; height:50px; border:none; background-color:rgba(25,25,25,0.05); padding:0 48px; box-sizing:border-box; transition:0.25s; outline:none; border:2px solid transparent; font-size:17px; color:#333333;}
.input-type input:focus {border:2px solid #007ec1; background-color:#FFFFFF;}
.input-type input:focus + label i {color:#007ec1;}

.check-type {display:inline-block; height:20px; padding-left:25px; box-sizing:border-box; position:relative; white-space:nowrap;}
.check-type label {display:inline-block; vertical-align:top; font-size:14px; font-weight:500; color:#666;}
.check-type input {position:absolute; top:0; left:0; width:20px; height:20px; opacity:0; z-index:2;}
.check-type .icon-type {width:20px; height:20px; position:absolute; top:0; left:0; text-align:center; font-size:0; border:1px solid #e3e3e3; border-radius:3px; box-sizing:border-box; z-index:1; transition:0.25s; overflow:hidden;}
.check-type .icon-type i {font-size:14px; line-height:18px; opacity:0; transition:0.25s; position:relative; top:-5px;}
.check-type input:checked + .icon-type {border-color:#007ec1;}
.check-type input:checked + .icon-type i {opacity:1; top:0;}
.check-type input:checked + .icon-type + label {color:#007ec1;}

.anker-box {width:100%; text-align:center; margin-top:70px; font-size:0;}
.anker-box a {display:inline-block; font-size:15px; line-height:20px; font-weight:400; box-sizing:border-box; position:relative; padding:14px 20px; color:#666; border-radius:3px; text-align:center; border:1px solid #999999; transition:0.25s; text-decoration: none;}
.anker-box a:hover {background-color:#666; color:#FFFFFF;}
.anker-box a.forgot {width:60%; margin-right:2%;}
/* .anker-box a.join {width:38%;} */

.copy {margin-top:50px; text-align:center; font-size:15px; color:#333333; font-weight:500;}
.anker-box{overflow:hidden}
.anker-box .fl{float:left}
.anker-box .fr{float:right}
.anker-box a.forgot {border:0; width:auto; margin-right:0; padding-left:10px; padding-top:20px; padding-right:10px; font-size:14px}
.anker-box a.forgot:hover,.anker-box a.forgot:focus{background:none;text-decoration:underline;color:#333}