@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Jua&family=Nanum+Brush+Script&family=Nanum+Gothic&family=Nanum+Myeongjo&family=Nanum+Pen+Script&family=Noto+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo&family=Bree+Serif&family=Charm&family=Comic+Neue&family=Courgette&family=Fondamento&family=Montserrat&family=Open+Sans&family=Oswald&family=Roboto&family=Roboto+Slab&display=swap');

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}
body {
	margin:0;padding:0;
  background: #333; /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #222 #333);
  background: -moz-linear-gradient(right, #222 #333);
  background: -o-linear-gradient(right, #222 #333);
  background: linear-gradient(to left, #222 #333);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      
}
.login-page {
  width: 360px; height:auto;
  padding:0;
}

.form {
  position: relative;
  z-index: 1;
  background: #222;
  max-width: 360px;
  margin: auto;
  padding: 25px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  opacity:0.7;
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #333; color:#fff;
  width: 100%;
  border: inset 1px #222;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 16px;
  text-align:center
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #339900;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #32760d;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.form {font-family: "Roboto", sans-serif;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;
}

.login-form{}

span.facebook{background:#3a559f}
span.twitter{background:#55acee !important}
span.google{background:#dc4e40 !important;border-color:#dc4e40 !important}
span.button i{line-height:32px}
#naverIdLogin{background:#2dac16}
#naverIdLogin_loginButton img{margin-left:-9px;margin-top:-3px}

.btn_social{margin-top:10px; list-style:none;width:100%;padding:0;height:42px;}
.btn_social li {list-style:none;float:left;overflow:hidden}
.btn_social .button{display:block;width:100%}
.button.kakao {background:yellow;border-color:yellow}
.button.kakao a{color:#222;font-family:arial;font-weight:bold;line-height:32px;}
.button.naver {background:#00c63b;border-color:#00c63b}
.button.naver a{color:#fff;font-family:arial;font-weight:bold;line-height:32px;}


#login-form .help{display:block;position:relative;padding:15px 0;border-top:1px solid #333;text-align:justify;list-style:none;*zoom:1}
#login-form .help li{display:inline;float:none;margin:0;padding:0 6px;line-height:1}
#login-form .help li.first{border:0 !important}
#login-form .help a{display:inline;float:none;padding:0;background:none;font-size:11px;font-family:Dotum, tahoma, Sans-serif;color:#767676;line-height:1;text-decoration:none}
#login-form .help a:hover,
#login-form .help a:active,
#login-form .help a:focus{color:#000;text-decoration:underline}