/*
CSS Reset
http://meyerweb.com/eric/tools/css/reset/
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  background-size:cover;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* particleground demo */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: linear-gradient(to bottom, #000000, #191919, #000000);
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
video {
  position : fixed;
  top : 0; 
  left : 0;
  min-width : 100%;
  min-height : 100%;
/*  width : auto;
  height : auto;*/
  z-index : -1;
}
#particles {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(/img/patten_login_bg.png);
}

#intro {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top:-380px;
  padding: 0 20px;
  width: 100%;
  text-align: center;
}
h1 {
  text-transform: uppercase;
  font-size: 85px;
  font-weight: 700;
  letter-spacing: 0.015em;
}
h1::after {
  content: '';
  width: 80px;
  display: block;
  background: #fff;
  height: 10px;
  margin: 30px auto;
  line-height: 1.1;
}
p {
  margin: 0 0 30px 0;
  font-size: 24px;
}
.btn {
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #fff;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.4s;
     -moz-transition: all 0.4s;
       -o-transition: all 0.4s;
          transition: all 0.4s;
}
.btn:hover {
  color: #005544;
  border-color: #005544;
}

@media only screen and (max-width: 1000px) {
  h1 {
    font-size: 70px;
  }
}

@media only screen and (max-width: 800px) {
  h1 {
    font-size: 48px;
  }
  h1::after {
    height: 8px;
  }
#intro {margin-top:-286px;}
}

@media only screen and (max-width: 568px) {
  #intro {
    padding: 0 10px;
  }
  h1 {
    font-size: 30px;
  }
  h1::after {
    height: 6px;
  }
  p {
    font-size: 18px;
  }
  .btn {
    font-size: 16px;
  }
}

@media only screen and (max-width: 320px) {
  h1 {
    font-size: 28px;
  }
  h1::after {
    height: 4px;
  }
}


/* -------------------------------- 

Mask 2

-------------------------------- */
.mask-2.cd-intro-content * {
  /* overwrite default style */
  opacity: 1;
}

.mask-2.cd-intro-content .content-wrapper {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  overflow: hidden; */
}
.mask-2.cd-intro-content .content-wrapper::before {
  /* vertical bar */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 2px;
  background-color: #ffffff;
  -webkit-animation: cd-pulse 1.3s 0.5s both;
  -moz-animation: cd-pulse 1.3s 0.5s both;
  animation: cd-pulse 1.3s 0.3s both;
}
.no-cssanimations .mask-2.cd-intro-content .content-wrapper::before {
  opacity: 0;
}
.mask-2.cd-intro-content .content-wrapper > div {
  /* wrap the entire content */
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  z-index: 1;
  border-radius: 0;
  box-shadow: inset 0px 0px 1px 1px rgba(23, 23, 23, 0.5);
}

.mask-2.cd-intro-content .content-wrapper,
.mask-2.cd-intro-content .content-wrapper > div {
  -webkit-animation-duration: 0.7s;
  -moz-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.mask-2.cd-intro-content .content-wrapper {
  -webkit-animation-name: cd-mask-wrapper;
  -moz-animation-name: cd-mask-wrapper;
  animation-name: cd-mask-wrapper;
}

.mask-2.cd-intro-content .content-wrapper > div {
  -webkit-animation-name: cd-mask-content;
  -moz-animation-name: cd-mask-content;
  animation-name: cd-mask-content;
  padding: 20px;
  overflow: hidden;
}
.mask-2.cd-intro-content .action-wrapper .input_box {margin: 0 auto;}
.mask-2.cd-intro-content .action-wrapper .input_box button {margin-top:10px;/* min-width: 250px; */}
.mask-2.cd-intro-content .action-wrapper .input_box input {
    font-weight: 600;
}
.mask-2.cd-intro-content .content-wrapper .btn_box {/*animation-name:cd-reveal-down2;animation-duration: 1.3s;max-width: 650px;*/text-align: center;margin: 0 auto;}
.mask-2.cd-intro-content .content-wrapper .btn_box button {margin-top:10px;}


@-webkit-keyframes cd-mask-wrapper {
  0% {
    -webkit-transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes cd-mask-wrapper {
  0% {
    -moz-transform: translateX(50%);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@keyframes cd-mask-wrapper {
  0% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes cd-mask-content {
  0% {
    -webkit-transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes cd-mask-content {
  0% {
    -moz-transform: translateX(-100%);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@keyframes cd-mask-content {
  0% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes cd-pulse {
  0%, 30.8% {
    opacity: 0;
  }
  15.4%, 46.2%, 61.5%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes cd-pulse {
  0%, 30.8% {
    opacity: 0;
  }
  15.4%, 46.2%, 61.5%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cd-pulse {
  0%, 30.8% {
    opacity: 0;
  }
  15.4%, 46.2%, 61.5%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes cd-reveal-down2 {
  0%{
    opacity: 0;
    -webkit-transform: translateY(300%);
  } 
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes cd-reveal-down2 {
  0%{
    opacity: 0;
    -moz-transform: translateY(300%);
  }  
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes cd-reveal-down2 {
  0%{
    opacity: 0;
    -webkit-transform: translateY(300%);
    -moz-transform: translateY(300%);
    -ms-transform: translateY(300%);
    -o-transform: translateY(300%);
    transform: translateY(300%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}


input {border: 0;color: #333;font: inherit;margin: 0;outline: 0;padding: 0;-webkit-transition: background-color .3s;transition: background-color .3s;}
.form input[type="password"], .form input[type="text"], .form input[type="submit"], .form input[type="number"] {  width: 100%;  }
.form--login {color: #333333;}
.form--login label, .form--login input[type="text"], .form--login input[type="password"], .form--login input[type="submit"], .form--login input[type="number"] {/* border:none; *//* padding: 10px; *//* font-size: 18px; */}
.form--login input[type="text"], .form--login input[type="password"], .form--login input[type="number"] {}
.form--login input[type="text"]:focus, .form--login input[type="text"]:hover, .form--login input[type="number"]:hover, .form--login input[type="password"]:focus,.form--login input[type="number"]:focus, .form--login input[type="password"]:hover {border: none;}
.form--login input[type="submit"] {/* font-weight: bold; */height: 50px;line-height: 50px;color: #fff;font-size: 18px;letter-spacing: 1px;text-transform: uppercase;cursor: pointer;display: inline-block;padding: 0px;border: solid 1px #949494;background: linear-gradient(to bottom, #9E9E9E, #757575);}
.form--login input[type="submit"]:focus, .form--login input[type="submit"]:hover {border: none;outline: none;}
.form__field {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;margin-bottom: 10px;}
.form__input {  -webkit-box-flex: 1;  -webkit-flex: 1;  -ms-flex: 1;  flex: 1;  }

.form_btn {
  width: 100%;
  background:none;
  color: #eee;
  font-weight: bold;
  text-transform: uppercase;
  padding: 1rem;
  font-size: 13px;
  border: 0;
  font: inherit;
  margin: 0;
  outline: 0;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}
.form_btn:hover {}

#mb_id, .form__input {height: 50px;line-height: 50px;background: rgba(255, 255, 255, 0.7);border-radius: 5px;padding: 0 10px;border: none;color: #333;font-size: 18px;}
#mb_password {height: 50px;line-height: 50px;background: rgba(255, 255, 255, 0.7);padding: 0 10px;border-radius: 5px;border: none;color: #f00;margin-top: 10px;font-size: 18px;}
#mb_id:hover, #mb_password:hover {} 


#btn_submit, .form_btn {
  border: none;
  width: 49%;
  float: left;
  height: 50px;
  line-height: 50px;
  background: linear-gradient(to bottom, #ff1919, #c50000);
  color: #fff;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  border: solid 1px #ff1414;
  padding:0px;
}
button {
  width: 100%;
  outline: none;
  height: 50px;
  line-height: 50px;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  /* border-radius: 10px; */
}

button:hover {background: linear-gradient(to bottom, #ff1919, #c50000);}

#membership {
    width: 49%;
    float: right;
    border: solid 1px #808080;
    background: linear-gradient(to bottom, #9E9E9E, #757575);
}
#lo_qa_btn {
    /* width: 50%; */
    /* background: none; */
    /* border: solid 2px #fd0000; */
}
#membership:hover, #btn_submit:hover, #lo_qa_btn:hover {/* border: solid 2px #d8ff00; */}
.md-content button {
  display: block;
  margin: 0 auto;
  background: linear-gradient(to bottom, #ff1919, #c50000);
  border: solid 1px #ff0d0d;
}
.md-perspective,
.md-perspective body {
  height: 100%;
  overflow: hidden;
}

.md-perspective body  {
  background: ;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;
}

.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  margin-top: -256px;
  margin-left:-150px;
  max-width: 300px;
  min-width: 250px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
}
.container {
  /* min-height: 100%; */
}
.md-show {
  visibility: visible;
}
.md-overlay {
}
.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible;
}
/* Content styles */
.md-content {
  color: #fff;
  position: relative;
  /* border: solid 1px #333333; */
  margin: 0 auto;
  /* background-color: #252525; */
  overflow-y: auto;
  text-align: center;
  zoom: 102%;
}

.md-content > div {
  padding: 15px 5px 30px;
  margin: 0;
  font-weight: 300;
  /* font-size: 1.15em; */
  zoom:;
}
/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content {
  -webkit-transform: translateY(20%);
  -moz-transform: translateY(20%);
  -ms-transform: translateY(20%);
  transform: translateY(20%);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.md-show.md-effect-3 .md-content {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.md-content {
  color: #fff;
  position: relative;
  /* border: solid 1px #212121; */
  margin: 0 auto;
  padding: 15px 15px 0px 15px;
  background: rgba(105, 105, 105, 0.7);
  overflow-y: auto;
  text-align: center;
  /* zoom: 102%; */
}
.md-content > div {
  /* padding: 15px 5px 30px; */
  /* margin: 0; */
  /* font-weight: 300; */
  /* font-size: 1.15em; */
  zoom:;
}
.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible;
}
.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(0, 0, 0, 0.92);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.logo {width:100%;text-align: center;margin-top: 50px;}
.logo img {/* width:450px; */}
.logo_code {width: 200px;margin: 0 auto;}
.logo_text {font-size: 17px; margin: 0;}
.external{position: absolute;bottom: 10px;right: 10px;overflow: hidden;background: #FFEB3B;padding: 10px;}
.index_kakao_bn{ width: 100%; overflow: hidden;height: 40px;line-height: 40px;margin-bottom: 10px;}
.index_kakao_bn img { width: 33.33%; max-width: 40px;float: left;}
.index_kakao_bn .kk_id {float: left;width: 66.66%;font-size: 16px; font-weight: bold; padding-left: 10px;}



@media screen and (max-width: 750px) { 
.external{top: 10px;bottom: auto;zoom: 0.65;}  
.mask-2.cd-intro-content .content-wrapper {max-width: 300px;} 
.mask-2.cd-intro-content .content-wrapper > div {padding:10px;}  
.register-box {width: 100%;height: auto;background: rgba(0, 0, 0, 0.5);padding: 20px;overflow: hidden;position: relative;}  
#mb_id, #mb_password, .form__input {width: 100%;font-size: 18px;}
#captcha_key {width: 44% !important;}
#btn_submit {border-radius: 5px;font-size: 18px;}
button {height: 50px;line-height: 50px;border-radius: 5px;font-size: 18px;}
.cd-intro-content {padding:0;}
.mask.cd-intro-content h1::after {content:url(/img/login_sm.png);}
.logo img {width: 260px;}
.form--login input[type="submit"] {border-radius: 5px;font-size: 24px;}

}

#captcha {}
#captcha_reload {float: left;padding: 0;max-width: 50px;min-width: 50px;margin-left: 5px;border-radius: 0;background: none;border:none;}
#captcha_reload img {width:100%;}
#captcha_img {float: left;height: 50px;margin-top: 10px;/* border-radius: 5px; */}
#captcha_key {float: right;width: 49%;height: 50px;line-height: 50px;padding: 0 10px;font-size: 18px;margin-top: 10px;border-radius: 5px;background: rgba(255, 255, 255, 0.7);/* border-bottom: solid 1px #999; */}
.captcha_box {}