@charset "utf-8";

header, footer, nav, section, article, aside { display: block; }
* { padding: 0; margin: 0; box-sizing: border-box; }

h1,h2,h3,h4,h5,h6,ol,ul,li,form,fieldset,input,textarea,p,th,td,dt,dd,dl { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-size: 12px; }
li { list-style: none; }
img,fieldset { border: 0; vertical-align: top;}
em { font-style: normal; }
input.radio { width: 13px; height: 13px; vertical-align: middle; }
address,em,i { font-style: normal; }
.hdn, legend,table caption{ font-size: 0; height: 0; overflow: hidden; position: absolute; visibility: hidden; width: 0; line-height: 0; }
table caption{ font-size: 0; height: 0; overflow: hidden; position: static; visibility: hidden; width: 0; line-height: 0; }
a { text-decoration: none; color: inherit; }
select:focus { outline: none; }
button { border: 0; padding: 0; background: transparent; transition: all 0.3s ease; cursor: pointer; }
button:focus { outline: none;  }
input { border: 0; padding: 0; background: transparent; }
input:focus { outline: none; }

html { height: 100%; }

body {
	font-family: 'Noto Sans KR',sans-serif,'Nanum Gothic','NanumGothic','나눔고딕','돋움','Apple SD Gothic Neo',Dotum,helvetica,arial,sans-serif;
	font-size: 12px;
	letter-spacing: -0.05em;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
	line-height: 1.2;
	background-color:#000;
}

.wrap { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }

.bg-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 1; }
.bg-video_content { height: 100%; width: 100%; object-fit: cover; }

.login-wrap { width: 400px; min-height: 400px; margin: 0 auto; position: absolute; top: 50%; left: 50%; margin-left: -200px; }
.login-innerwrap { padding: 0; letter-spacing: 0; }
.login-innerwrap h1 { text-align: center; display:block; font-size: 80px; font-weight: bold; color: #fff; }
.login-innerwrap h2 { font-size:15px; text-align:left; display:block; color:#fff; font-weight:100; position:relative; margin: 30px 5px 0; }

.login-box-area { display:block; margin:0; }
.login-box-area .input-boxsize { display:block; margin:10px 0 0; height:50px; position:relative; left:-2px; }
.login-box-area .input-boxsize label { position:absolute; top:18px; right:20px; }

.input-style { background: rgba(255,255,255, 0.5); border-radius: 20px; border:1px #fff solid; width:100%; height:50px; color: #000; font-size: 20px; text-align: center; box-shadow: 0 0 20px 5px #fff;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}
.input-style:hover { background:#fff; }
.input-style:focus { background:#fff; outline: none; }
.login-box-area .input-boxsize input::placeholder { color: #222; font-size: 15px; }
.login-box-area .input-boxsize input::-webkit-input-placeholder { color: #222; font-size: 15px; }
.login-box-area .input-boxsize input:-ms-input-placeholder { color: #222; font-size: 15px; }

.login-button-area { display:block; margin:10px 0 0; position:relative;}
.login-button-area:after { content:"."; visibility:hidden; display:block; height:0; clear:both; }

.lgb-type { margin: 0; height: 50px; width: 100%; font-size:20px; color:#fff; cursor:pointer; background: #b52d2d; outline:none; display: block; text-align:center; border-radius:20px; border: 1px #ff6e6e solid; line-height:48px; box-shadow: 0 0 20px 2px #b52d2d;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}
.lgb-type:hover { background:#fff; color:#b52d2d; }

.rgst-type { margin: 10px 0 0; height: 50px; width: 100%; font-size:20px; color:#fff; cursor:pointer; background: #16a157; outline:none; display: block; text-align:center; border-radius:20px; border: 1px #4fe193 solid; line-height:48px; box-shadow: 0 0 20px 2px #16a157;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}
.rgst-type:hover { background:#fff; color:#16a157; }

#fade{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index:1001;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=50);
	-webkit-transition: all 1.0s ease-out;
	-moz-transition: all 1.0s ease-out;
	-ms-transition: all 1.0s ease-out;
	-o-transition: all 1.0s ease-out;
	transition: all 1.0s ease-out;
}

#light {
    display: none;
    position: absolute;
    top: 30%;
    left: 50%;
    width: 500px;
    height: 260px;
    margin-left: -250px;
    padding: 0;
    z-index:1002;
    overflow:visible;
	background: rgba(255,255,255, 0.6);
	-webkit-transition: all 1.0s ease-out;
	-moz-transition: all 1.0s ease-out;
	-ms-transition: all 1.0s ease-out;
	-o-transition: all 1.0s ease-out;
	transition: all 1.0s ease-out;
	box-shadow:rgba(0, 0, 0, 0.2) 0 10px 30px;
	border-radius:20px;
}

.light-box-innerwrap { position:relative; margin:40px 40px 0; padding:0; }
.light-box-innerwrap h1 { text-align:center; padding:0; margin:0; font-size:20px; font-weight:400; color:#0066ff; }
.light-box-innerwrap h2 { text-align:center; padding:0; margin:0; font-size:14px; font-weight:300; color:#333; }
.light-box-innerwrap .input-posistion { margin:10px 50px 0 }
.recommend-input { width:100%; height:50px; border:1px #ddd solid; background-color:#fff; text-indent:10px; font-size:15px; color:#000; border-radius:20px; text-align: center; }
.recommend-input:focus { outline:none; }

.light-box-innerwrap .agree-button { position:relative; margin:10px 50px 0; padding:12px 0 16px 0; text-align:center; font-size:14px; color:#fff; background:#aaa; cursor:pointer; display:block; border-radius:20px;
	-webkit-transition: background-color 0.30s linear;
	-moz-transition: background-color 0.30s linear;
	-o-transition: background-color 0.30s linear;
	transition: background-color 0.30s linear;
}
.light-box-innerwrap .agree-button:hover { background:#0066ff; color:#fff; }

.light-box-innerwrap .close-button { position:absolute; top:-15px; right:-15px; cursor:pointer; }







.btm-button { display: block; padding: 13px 0; cursor: pointer; text-align: center; color: #fff; font-size: 15px; background: #0066ff; border-radius: 6px; margin: 15px 0 0;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}
.btm-button:hover { background: #fff; color: #0066ff; }

.callcenter-box { display: block; position: absolute; width: 400px; height: 240px; background: #111; border-radius: 6px; top: 17%; left: 50%; margin-left: -225px; padding: 40px 25px 25px; box-shadow:rgba(0, 0, 0, 0.9) 0 10px 30px; }
.callcenter-box .cctr-wrap { position: relative; display: block; padding: 0; margin: 0; }
.callcenter-box .cctr-wrap .toptitle { display: block; text-align: center; font-size: 20px; color: #eee; font-weight: bold; }
.callcenter-box .cctr-wrap .subtitle { display: block; text-align: center; font-size: 12px; color: #aaa; }

.input-box-area { display:block; margin:20px 0 0; }
.input-box-area .input-boxsize { display:block; margin:10px 0 0; height:50px; position:relative; border-radius:6px; left:-2px; }
.input-box-area .input-boxsize label { padding:0 8px; background:#111; color:#fc0; position:absolute; top:-10px; left:10px; }

.input-box-area .input-boxsize .input-style { background:#111; border-radius:6px; border:1px #333 solid; width:100%; height:50px; text-indent:15px; color:#fff; font-size:12px;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}
.callcenter-box .cctr-wrap .agree-button { display: block; text-align: center; font-size: 16px; background: #0066ff; border-radius: 10px; margin: 10px 0 0; padding: 15px 0; cursor: pointer; color: #fff;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
	-o-transition: all .15s ease;
	transition: all .15s ease;
}
.callcenter-box .cctr-wrap .agree-button:hover { background: #fff; color: #000; }

.bx-close-button { position: absolute; top: -20px; right: 0; cursor: pointer; }

.sns-bnr-div { display: block; }
.sns-bnr-div .bnr-cont { position: relative; border: 2px #999 solid; padding: 10px 10px 10px 20px; border-radius: 6px; color: #fff; margin: 5px 0; background: #000; }
.sns-bnr-div .bnr-cont i { display: inline-block; }
.sns-bnr-div .bnr-cont i img { width: 60px; }
.sns-bnr-div .bnr-cont .hlabel { position: absolute; top: 10px; left: 115px; font-size: 20px; }
.sns-bnr-div .bnr-cont h5 { position: absolute; top: 34px; left: 115px; font-size: 25px; color: #fff; font-weight: bold; }
.sns-bnr-div .kakao { border: 2px #ffd800 solid; color: #ffd800; }
.sns-bnr-div .telegram { border: 2px #00a8ff solid; color: #00a8ff; }
.sns-bnr-div .connect h5 { top: 36px; font-size: 24px; }
.sns-bnr-div .marker { padding: 0; border: 0; }
.sns-bnr-div .marker img { width: 100%; }

.register-wrap { width: 600px; min-height: 400px; margin: 0 auto; position: absolute; top: 10%; left: 50%; margin-left: -300px; }
.register-innerwrap { padding: 30px 30px 50px; letter-spacing: 0; background: rgba(255,255,255, 0.6); border-radius: 20px; position: relative; }

.rst-inwrap {  }
.rst-inwrap h1 { display: block; text-align: center; color: #222; font-size: 14px; }

.rst-inwrap .form-liner { display: block; margin: 10px 0 0; }
.rst-inwrap .form-liner .namelabel { display: block; padding: 20px 10px 5px; color: #666; font-size: 12px; text-align: left; }
.rst-inwrap .form-liner .input-box { display: block; position: relative; }
.rst-inwrap .form-liner .input-box .dup-button { display: inline; color: #3289db; font-size: 12px; position: absolute; top: 20px; right: 15px; cursor: pointer; }
.rst-inwrap .form-liner .pds { margin: 10px 0 0; }
.rst-inwrap .form-liner input { width: 100%; height: 55px; border: 2px #aaa solid; border-radius: 20px; background: #fff; text-indent: 15px; font-size: 14px; color: #000; transition: all 150ms ease-in-out; position: relative; left: -2px; }
.rst-inwrap .form-liner input::placeholder { color: #777; font-size: 12px; }
.rst-inwrap .form-liner select { width: 100%; height: 55px; border: 2px #aaa solid; border-radius: 20px; background: #fff; text-indent: 10px; font-size: 14px; color: #000; transition: all 150ms ease-in-out; position: relative; left: -2px; }
.rst-inwrap .form-liner select:hover { border: 2px #3289db solid; }
.rst-inwrap .form-liner select option { }

.ddlog .form-liner input { width: 100%; height: 55px; border-radius: 10px; background: #000; text-indent: 15px; font-size: 14px; color: #fff; transition: all 150ms ease-in-out; position: relative; left: 0; }
.ddlog .form-liner input:focus { outline: none; background: #000; }
.ddlog .form-liner input:hover { background: #000; }
.ddlog .form-liner input::placeholder { color: #777; font-size: 12px; }
.ddlog .form-liner select { width: 100%; height: 55px; border: 1px #303740 solid; border-radius: 10px; background: #000; text-indent: 10px; font-size: 14px; color: #fff; transition: all 150ms ease-in-out; position: relative; left: 0; }
.ddlog .form-liner select option { background: #000; }

.agreement-button { display: block; height: 50px; border-radius: 20px; background: #3289db; cursor: pointer; font-size: 15px; color: #fff; line-height: 48px; text-align: center; margin: 10px 0 0; transition: all 150ms ease-in-out; }
.agreement-button:hover { background: #1e67ab; }

.register-innerwrap .close-button { position: absolute; top: 30px; right: 30px; cursor:pointer; }

/* 0617 */
.login-logo { padding: 20px 50px 0; }
.login-logo img { width: 100%; }





@media screen and (max-width: 640px) { .callcenter-box { width: 300px; margin-left: -175px; } }