body {
  position: relative;
  background-size: cover;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../images/common/bg.jpg");
  margin: 0;
}

.logo{width:1800px; margin:0 auto;}
.logo img{padding:24px 0;}

.login-sqare {background-color: rgba(0, 0, 0, 0.75); margin: auto; padding: 60px; width: 720px; border-radius:32px;}
/*.login-sqare {background-color: rgba(80, 50, 105, 0.75); margin: auto; padding: 60px; width: 720px; border-radius:32px;}*/

.input {
  width: 100%;
  height: 50px;
  border: 5px hidden red;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  text-indent: 16px;
}

.button {
  width: 338px;
  height: 50px;
  margin: 24px 0 10px 0;
  background-color: #f08200;
  color: white;
  border: 5px hidden;
  border-radius: 5px;
  font-weight: 700;
  font-size: 17px;
  padding: 0px 14px;
}
.select {
  width: 100%;
  height: 50px;
  border: 5px hidden red;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  text-indent: 16px;
}


.title {color: white; margin-top: 16px; padding: 0 0 10px 0; font-size:32px; font-weight: bold;}

::placeholder {
  opacity: 1;
  color: rgb(136, 136, 136);
  font-size: 16px;
}



a {color: inherit; text-decoration: none;}

a:hover {color: inherit; text-decoration: underline; cursor: pointer;}








.container {
  display: block;
  position: relative;
  padding-top: 1px;
  padding-left: 22px;
  margin-bottom: 20px;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #b3b3b3;
}

.container input {position: absolute; opacity: 0; height: 0; width: 0;}


.sign-form .form-list{display:flex; align-items: center; margin-bottom:16px;}
.sign-form .form-list p{color:#fff; margin-right:16px; width: 20%;}

.payBtn-wrap{text-align:center; margin-top:48px; color:#fff;}
.payBtn-wrap p{font-size:16px;}
.payBtn-wrap a{text-decoration: underline;}

.privacy-tit{font-size:24px; font-weight: bold; margin-bottom:32px;}
.privacy-txt{font-size:16px;}


/*-----------탭버튼-----------*/
.tabs {display: flex; position: relative; justify-content: center; margin-top:48px;}
.tab-line {position: absolute; left: 0; bottom: 0; right: 0; height: 2px; width: 0; background-color: #f08200; border-radius: 10px; transition: all 0.25s ease;}
.tab-item {
  --width: 33%;
  width: var(--width);
  padding: 15px 30px;
  font-size: 18px;
  text-align: center;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  opacity: 0.6;
  border-bottom: 2px solid #eee;
  cursor: pointer;
  transition: all 0.5s ease;
}
.tab-item:hover {opacity: 1; border-color: rgba(255, 255, 255, 0.8);}
.tab-item.active {opacity: 1; font-weight: 700;}
.tabs-content { padding: 40px 0 0;}
.tab-pane {display: none; color: #333;}
.tab-pane.active {display: block;}



@media only screen and (max-width: 837px) {
    body {
      background: 0 0;
      background-color: black;
    }

    .login-sqare {
      background-color: rgb(0, 0, 0);
      height: auto;
      width: 100%;
      display: flex;
      padding: 10px 25px 80px 25px;
      justify-content: center;
      flex-direction: column;
      border-bottom: solid grey 1px;
      
    }
    .input {
      width: 87%;
      height: 50px;
      margin-bottom: 17px;
      border: 5px hidden red;
      border-radius: 5px;
      background-color: #333;
      color: white;
      
    }
    .button {
      width: 91%;
      height: 50px;
      margin: 30px 0 10px 0;
      background-color: #e50914;
      color: white;
      border: 5px hidden;
      border-radius: 5px;
      font-weight: 700;
      font-size: 17px;
      padding: 0px 14px;
    }
    .title {
      color: white;
      padding-bottom: 30px;
      margin: 0;
    }

  
  }
  @media only screen and (max-width: 630px) {
    .button {
      width: 93%;
    }
  }