/* Top Premium, ACE, ONE, 1st Premium Stylesheet */

body {
  background-color: #0a0a0a !important;
  background: url(../images/top-bg.png) center top no-repeat;
  font-family: BM DoHyeon;
  color: #fff;
}

@font-face {
  font-family: BM DoHyeon;
  src: url(../font/BMDOHYEON_ttf.ttf);
}

.main-box {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 100px;
  text-align: center;
  position: relative;
}

img.logo-adjust {
    margin-right: 20px;
    padding-bottom: 14px;
}

.link-edit {
    position: absolute;
    left: 37%;
    top: 3%;
    display: flex;
    font-size: 3vmin;
}

a.link-edit  {
    color: #fff;
}

a.link-edit:hover {
    color: #f0ff00 !important;
    text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.logo-side-content {
  /*font-size: 2.5vmin;*/
}

.logo-side-content-ruby {
  font-size: 2.5vmin;
}

.responsive-custom {
  max-width: 100%;
  height: auto;
}

.content-1 {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 37px;
}


.content-2 {
    font-size: 20px;
    width: 31%;
    margin-left: auto;
    margin-right: auto;
}

.content-3 {
  font-size: 17px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.content-4 {
    color: #0ed6c5;
    background: #1e2327;
    border: 1px solid black;
    line-height: 58px;
    margin-top: 50px;
    color: #f0ff00;
    font-size: 30px;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
}

.content-5 {
  color: #f0ff00;
  font-size: 30px;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}

.content-6 {
  margin-top: 20px;
  width: 69%;
  margin-left: auto;
  margin-right: auto;
}

.main-button-box {
  width: 60%;
  margin: 0 auto;
  margin-top: 60px;
}

.third {
  color: orange;
    font-size: 2.5vmin;
  margin-right: 15px;
}

.third-ruby {
    color: #b785eb;
    /*font-size: 2.5vmin;*/
    margin-right: 15px;
}

.third-ruby2 {
  color: #06ffea;
    font-size: 2.5vmin;
  margin-right: 0px;
}

/* .scale
{
    font-size: calc(1vw + 1vh);
    width: calc(15vw + 20vh);
    height: calc(15vw + 20vh);
    padding: calc(15vw + 20vh);
    background-color: yellow;
} */

.emphasize-link {
  margin-right: 10px;
  color: #f0ff00;
  font-size: 2.5vmin;
}

.other-content {
  font-size: 2.5vmin;
  color: #fff;
}

.last-content {
  width: 54%;
  margin-left: auto;
  margin-right: auto;
}

.emphasize-brand {
  color: orange;
    font-size: 2.5vmin;
}

.social {
  margin-right: 50px;
}


@media (max-width: 478px) and (min-width: 300px) {

  .link-edit {
    left: 40%;
    top: 10px;
    display: flex;
  }

  .content-1 {
    margin-bottom: 10%;
  }

  .logo-side-content {
    font-size: 5.5vmin;
    margin-left: 9px;
  }

  .logo-side-content-ruby {
    font-size: 5.3vmin;
    margin-left: -14px;
  }

  .third {
    font-size: 5.5vmin;
  }

  .third-ruby {
    font-size: 5.5vmin;
    margin-right: 4px;
  }

  .third-ruby2 {
    font-size: 5.5vmin;
    margin-right:19px;
  }

  .content-2 {
    width: 68%;
  }

  .content-3 {
    font-size: 5.5vmin;
    width: 70%;
  }

  .content-4 {
    font-size: 5.5vmin;
    width: 62%;
  }

  .content-5 {
    font-size: 5.5vmin;
    width: 62%;
  }

  .content-6 {
    font-size: 1.5vmin;
    width: 73%;
    margin-bottom: 10%;
  }

  .emphasize-link {
    font-size: 5.5vmin;
  }

  .other-content {
    font-size: 5.5vmin;
  }

  .emphasize-brand {
    font-size: 5.5vmin;
  }

  .last-content {
    width: 55%;
  }

  .social {
    margin-bottom: 10%;
  }

  .social2 {
    margin-bottom: 30%;
  }



}


@media (max-width: 575px) and (min-width: 479px) {

  .link-edit {
    left: 40%;
    top: 12px;
    display: flex;
  }

  .content-1 {
    margin-bottom: 10%;
  }

  .logo-side-content {
    font-size: 5.5vmin;
    margin-left: 9px;
  }

    .logo-side-content-ruby {
      font-size: 5.3vmin;
      margin-left: 0px;
    }


  .third {
    font-size: 5.5vmin;
  }

  .third-ruby {
    font-size: 5.5vmin;
  }

  .third-ruby2 {
    font-size: 5.5vmin;
  }

  .content-2 {
    width: 67%;
  }

  .content-3 {
    font-size: 5.5vmin;
    width: 70%;
  }

  .content-4 {
    font-size: 5.5vmin;
    width: 62%;
  }

  .content-5 {
    font-size: 5.5vmin;
    width: 62%;
  }

  .content-6 {
    font-size: 1.5vmin;
    width: 73%;
    margin-bottom: 10%;
  }

  .emphasize-link {
    font-size: 5.5vmin;
  }

  .other-content {
    font-size: 4.5vmin;
  }

  .emphasize-brand {
    font-size: 5.5vmin;
  }

  .last-content {
    width: 57%;
  }

  .social {
    margin-bottom: 10%;
  }

  .social2 {
    margin-bottom: 30%;
  }

}


@media (max-width: 767px) and (min-width: 576px) {

  .link-edit {
    left: 40%;
    top: 1.8%;
  }

  .content-1 {
    width: 68%;
  }

  .logo-side-content {
    font-size: 3.5vmin;
   }

   .logo-side-content-ruby {
     font-size: 3.5vmin;
    }

   .content-2 {
     width: 41%;
    margin-top: 4%;
   }

   .third  {
     font-size: 3.5vmin;
   }

   .third-ruby {
     font-size: 3.5vmin;
   }

   .third-ruby2 {
     font-size: 3.5vmin;
   }

   .content-3 {
     font-size: 3.5vmin;
      width: 68%
   }

   .content-4 {
     width: 44%;
     font-size: 3.5vmin;
   }

   .content-5 {
     width: 44%;
     font-size: 3.5vmin;
   }

   .content-6 {
     width: 88%;
   }

   .last-content {
      width: 66%;
   }

   .main-button-box {
     width: 73%;
   }

   .emphasize-link {
      font-size: 3.5vmin;
   }

   .other-content {
     font-size: 3.5vmin;
   }

   .emphasize-brand {
     font-size: 3.5vmin;
   }

   .main-button-box {
    width: 45%;
    }

    .social {
    margin-right: 35px;
    margin-bottom: 36px;
    }

}

@media (max-width: 1000px) and (min-width: 767px) {

  .link-edit {
    left: 40%;
    top: 1.8%;
  }

  .content-1 {
    width: 56%;
  }

  .logo-side-content {
    font-size: 2.5vmin;
   }

   .logo-side-content-ruby {
     font-size: 2.5vmin;
    }

   .content-2 {
     width: 38%;
    margin-top: 4%;
   }

   .third  {
     font-size: 3.5vmin;
   }

   .third-ruby {
     font-size: 3.5vmin;
   }

   .third-ruby2 {
     font-size: 3.5vmin;
   }

   .content-3 {
     font-size: 3.5vmin;
      width: 66%
   }

   .content-4 {
     width: 35%;
   }

   .content-5 {
     width: 35%;
   }

   .content-6 {
     width: 61%;
   }

   .last-content {
      width: 48%;
   }

   .main-button-box {
     margin-right: -25px;
     width: 93%;
   }

}



@media (max-width: 1199px) and (min-width: 1000px) {

  .main-button-box {
    width: 81%;
    margin-right: -7px;
  }

  .content-6 {
    width: 62%;
  }

}