@charset "utf-8";

* {
    margin:0; padding:0;box-sizing:border-box;font-family:'Noto Sans KR', sans-serif;font-weight: 400;
}


ul, li, a { border:0; }
ul, li { margin:0; padding:0; list-style: none; }
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, select, abbr, address, big, cite, code, del, dfn, img, ins, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, table,  th, td, textarea, input, button { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

a, a:link, a:hover, a:active, a:visited { color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }


.wrap {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;background: #0082e6;background: -webkit-linear-gradient(left,#8274f8,#0082e6);background: -o-linear-gradient(left,#8274f8,#0082e6);background: -moz-linear-gradient(left,#8274f8,#0082e6);background: linear-gradient(left,#8274f8,#0082e6);flex-direction: column;}

.wrap .login {background:#fff;width:450px;height: 630px;border-radius: 20px;padding: 40px 30px;box-shadow:0 5px 10px 0 rgba(0,0,0,.1);-moz-box-shadow:0 5px 10px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 5px 10px 0 rgba(0,0,0,.1);-o-box-shadow:0 5px 10px 0 rgba(0,0,0,.1);-ms-box-shadow:0 5px 10px 0 rgba(0,0,0,.1);text-align:center;display: flex;flex-direction: column; justify-content: center;}

.wrap .login h2 {font-size: 30px;}
.wrap .login .title {color: #303030;margin: 10px 0;}

.wrap .login .list {margin-top:50px;}
.wrap .login .list li {padding:10px 0px;margin-bottom:15px;cursor:pointer;border: 1px solid #d0d0d0;background: #f7f7f7;position: relative;}
.wrap .login .list li span {position: absolute; top: 0;right: 0;padding-right: 8px;display: flex;align-items: center;height: 100%;font-size: 18px;}

.wrap .login .list li:hover {border: 1px solid #0082e6;}
.wrap .login .list li:hover span {color: #0082e6;}

.btn_wrap {margin-top:35px;}
.btn_wrap .btn {width: 48%;display: inline-block;background: #e3e3e3;border-radius: 30px;padding: 8px 0;margin-right:2%;cursor:pointer;color: #7a7a7a;font-weight: 300;}
.btn_wrap .btn:last-child {margin-right:0;}

.btn_wrap .btn.on {background: #0082e6;color: #eaeaea;font-weight: 400;}




/* 페이지 로딩중 */
.load-wrapp {position:fixed; z-index: 9999999; text-align: center; width:100%; top:calc(50% - 50px); left:0;}
.load-wrapp p {position:relative; color:#fff; z-index: 99999999;font-size:25px;margin-bottom: 10px;}
.load-3 .line:nth-last-child(1) {
  animation: loadingC 0.6s 0.1s linear infinite;
}
.load-3 .line:nth-last-child(2) {
  animation: loadingC 0.6s 0.2s linear infinite;
}
.load-3 .line:nth-last-child(3) {
  animation: loadingC 0.6s 0.3s linear infinite;
}
@keyframes loadingC {
  0 {transform: translate(0, 0);}
  50% {transform: translate(0, 15px);}
  100% {transform: translate(0, 0);}
}
.line {position:relative; z-index: 99999999; display: inline-block; width: 15px; height: 15px; border-radius: 15px; background-color: #8cefff;margin-right: 5px;}
.load_bg {background:rgba(0,0,0,0.6); z-index: 9999999; position:fixed; left:0; top:0; width:100vw; height:100vh;}


.wrap .tel {margin-top: 20px; color: #fff; font-size: 20px;}
.wrap .tel a {color: #fff;text-decoration: none;}


/* 문자인증 */
.tip_pop.sms .write_form {margin-top:20px;}
.tip_pop.sms .write_form .form_line {position:relative; margin:10px 0;}
.tip_pop.sms .write_form .form_line label {color: #0082e6; font-size: 14px;font-weight: 400; margin-bottom: 3px;display:inline-block;}
.tip_pop.sms .write_form .form_line input {height:53px; line-height: 53px; padding:0 10px; margin:0; font-size:17px; letter-spacing: 0em;border: 1px solid #dfe3e9;width: 100%;}
.tip_pop.sms .write_form .form_line input:hover, input:focus { outline: none !important; border: 1px solid #0082e6; }
.tip_pop.sms .write_form .form_line input::placeholder {font-size:16px; color:#9a9a9a;}

.tip_pop.sms .btn { background: #fff;border:1px solid #0082e6;padding: 5px 0; width:100%;display: inline-block;border-radius:0;}
.tip_pop.sms .btn a { display: block;font-size: 15px;border: 0;padding: 5px 0;color: #0082e6;text-align:center;}

.tip_pop.sms .title {background-color:#fff;color:#000;}
.tip_pop.sms .close_btn {top: 12px;}
.tip_pop.sms .close_btn > i {color:#000;}

.tip_pop.sms .write_form .form_line .tel_line {display:flex;position: relative;}
.tip_pop.sms .write_form .form_line .tel_line .btn,
.tip_pop.sms .write_form .form_line.chk_line .btn {width: 160px;padding: 10px 0;background: #5db4f7;border:1px solid #5db4f7;margin-left:3px;}
.tip_pop.sms .write_form .form_line .tel_line .btn a,
.tip_pop.sms .write_form .form_line.chk_line .btn a {color: #fff;}

.tip_pop.sms .write_form .form_line.chk_line {display:flex;position: relative;}
.tip_pop.sms .write_form .form_line.chk_line em {position: absolute;right: 115px;top: 15px;font-style: normal;color: #f32525;font-weight: 600;}

.tip_pop.sms .write_form .msg {color:#f32525}
.tip_pop.sms .write_form .msg.ok {color:#000}

.tip_pop.sms .write_form .info {margin-bottom:20px;}

@media screen and (max-width: 515px) {
	.wrap .login {width:80%;}
	.tip_pop.sms {width:80%;}
}


@media screen and (max-width: 450px) {
	.wrap .login {width:90%;}
	.tip_pop.sms {width:90%;}
}

@media screen and (max-width: 400px) {
	.wrap .login {height:90vh;padding: 20px 30px;}
	.wrap .login .list {margin-top:30px;}
	.wrap .login .list li {padding:7px 0px;}

}