@import url(https://fonts.googleapis.com/css?family=Roboto:300);



.login-page {
  display:table;
  position:fixed;
  width: 100%;
  height:100%;
  padding: 0;
  margin: auto;
}
.log-input {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  margin: 0em;
  font: 400 13.3333px Arial;
  padding: 1px 0px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
  outline: none;
}
.form {
  display:table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

}

.form .log-area {
  display:inline-block; 
  position:relative; 
  width:450px; 
  padding:30px;
  margin:0 0 10vh; 
  background: rgba(0,0,0,0.6);
}
.form h1 {margin-bottom:30px; font-weight:bold; font-size:30px; color:#fff;}
.form input {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 15px;
  /* background: rgba(0,0,0,0.2); */
  background:#eee;
  color: #000;
  border: 0;
}
.form button {
  background:#eee;
  border:0;
  color:#000;
  padding:10px;
  font-size:20px;
  width:390px;
  margin:20px auto;
  display:block;
  cursor:pointer;
  transition:background-color 200ms;
  -webkit-transition:background-color 200ms;
  -moz-transition:background-color 200ms;
  -o-transition:background-color 200ms;
}

 
.form button:hover,.form button:active,.form button:focus {
  background: #bebebe;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4c9baf;
  text-decoration: none;
}
.form .copy p {
  color:#fff;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
/* 
  background: #44c5ee;
  background: -webkit-linear-gradient(right, #44c5ee, #76d9d1);
  background: -moz-linear-gradient(right, #44c5ee, #76d9d1);
  background: -o-linear-gradient(right, #44c5ee, #76d9d1);
  background: linear-gradient(to left, #44c5ee, #76d9d1);
   */
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      
}


/* 달력 */
.main #birth_Date{position:absolute;top:50px;width:100%; z-index: 1;}
.main #join_Date{position:absolute; width:100%; z-index: 1;}
.main .ui-datepicker{padding:0;border:0;}
/*.main .ui-datepicker table{margin:10px 0 15px;}*/
.main .ui-widget.ui-widget-content{width:100%;box-sizing:border-box;}
.main .ui-datepicker .ui-datepicker-prev span{background:url('/images/prev_btn02.png') no-repeat;}
.main .ui-datepicker .ui-datepicker-next span{background:url('/images/next_btn02.png') no-repeat;}
.main .ui-datepicker .ui-datepicker-header{padding:7px 0;border:0;border-bottom:1px solid #ddd;background-color:#fff;}
.main .ui-datepicker .ui-datepicker-prev, 
.main .ui-datepicker .ui-datepicker-next{top:7px;}
.main .ui-state-default,
.main .ui-widget-content .ui-state-default,
.main .ui-widget-header .ui-state-default,
.main .ui-button,
.main .ui-button.ui-state-disabled:hover,
.main .ui-button.ui-state-disabled:active{width:30px;height:30px;padding:0;line-height:30px;margin:0 auto;border:0;text-align:center;background:#fff;}
.main .ui-datepicker td:hover > a,
.main .ui-state-active,
.main .ui-widget-content .ui-state-active,
.main .ui-widget-header .ui-state-active,
.main a.ui-button:active,
.main .ui-button:active,
.main .ui-button.ui-state-active:hover{border-radius:50%;color:#fff;box-sizing:border-box;background-color:#222;}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{ padding:0;line-height:30px;margin:0 auto;border:0;text-align:center;}

.main #birth_text{background:url('/images/180521_mainicon_03.png') no-repeat right; background-color: #f2f2f2;}
.main #join_text{background:url('/images/180521_mainicon_03.png') no-repeat right; background-color: #f2f2f2;}




#video { 
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  overflow: hidden;
}
.vid-container{
 position:relative;
 height:100vh;
 overflow:hidden;
}
.bgvid.back {
 position: fixed; right: 0; bottom: 0;
 min-width: 100%; min-height: 100%;
 width: auto; height: auto; z-index: -100;
}
.inner {
 position: absolute;
}
.inner-container{
 width:400px;
 height:400px;
 position:absolute;
 top:calc(50vh - 200px);
 left:calc(50vw - 200px);
 overflow:hidden;
}
.bgvid.inner{
 top:calc(-50vh + 200px);
 left:calc(-50vw + 200px);
 filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='10'%20/></filter></svg>#blur");
 -webkit-filter:blur(10px);
 -ms-filter: blur(10px);
 -o-filter: blur(10px);
 filter:blur(10px);
}
.box{
 position:absolute;
 height:100%;
 width:100%;
 font-family:Helvetica;
 color:#fff;
 background:rgba(0,0,0,0.43);
 padding:30px 0px;
}
.box h1{
 text-align:center;
 margin:30px 0;
 font-size:30px;
}
.box input{
 display:block;
 width:300px;
 margin:20px auto;
 padding:15px;
 background:rgba(0,0,0,0.2);
 color:#fff;
 border:0;
}
.box input:focus,.box input:active,.box button:focus,.box button:active{
 outline:none;
}
.box button{
 background:#742ECC;
 border:0;
 color:#fff;
 padding:10px;
 font-size:20px;
 width:330px;
 margin:20px auto;
 display:block;
 cursor:pointer;
}
.box button:active{
 background:#27ae60;
}
.box p{
 font-size:14px;
 text-align:center;
 color:#EEE;
}

.form.sub h1 {text-align:left; color:#555}
.form.sub input {padding:10px; margin-bottom:15px;}

.go-main {display:block; position:absolute; right:30px; top:62px; text-decoration:none; color:#666 }
.go-main:hover {color:#333}

.form.gray-white-theme {background-color:#eee;}
.form.gray-white-theme .log-area {box-shadow:0 0 16px 5px #ddd; background-color:#fff;}
.form.gray-white-theme input {color:#555; background-color:#fff; background-image:none; border:1px solid #ccc;}