@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/* all */
* {-webkit-tap-highlight-color:transparent;}
*, body, html, a, a:hover, img:hover, input, input:hover, label, label:hover, map, map:hover, area, area:hover {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;}
*:focus { outline:none; }
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:active {text-decoration: none;}
a {-webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
   text-decoration: none;
   color: inherit;}

html {
  overflow: hidden !important;
    height: 100vh;
}
body {
  margin: 0 auto;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
  background: #000;
    height: 100vh;
}
#remove {
  z-index: 2;
}
.video-wrapper video, img.remove-bg {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.video-wrapper {
  overflow: hidden;
  z-index:-9;
  opacity: 0.7;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/*texture*/
.texture {
  background:url(https://1.bp.blogspot.com/-x0sYCQnBBQU/YXrJZGXY1LI/AAAAAAAACGw/MMLK_hoeHo0By-SgrVyB9iHo7dJtr1OngCLcBGAsYHQ/s16000/%25E1%2584%2582%25E1%2585%25A9%25E1%2584%258B%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B3%2Bcopy.png) repeat center;
  width:100%;
  height:100%;
  z-index: 99;
  opacity: 0.4;
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}

/*title*/
.video-background { /* class name used in javascript too */
    width: 100%; /* width needs to be set to 100% */
    height: 100%; /* height needs to be set to 100% */
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/*icon*/
.twitter {
  position: fixed;
  right: 30px;
  top: 30px;
  display: inline-block;
  color: #fff;
  opacity: 0;
  animation: fadeIn 1s 3s ease-out alternate forwards;
}
.twitter i {
  font-weight: 700 !important;
  font-size: 16px;
}

/*mb start*/
img.title {
  width: 95%;
  max-width: 450px;
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  animation: fadeOut 1s 1.5s ease-out alternate forwards;
}
.bg {
  background: #334350;
  animation: fadeOut 2s 1.5s ease-out alternate forwards;
  width:100%;
  height:100%;
  z-index: 1;
  opacity: 1;
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}
.letter {
  display: inline-block;
  color: #fff;
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  text-align: center;
  min-width: 300px;
}
.letter p {
  font-family: 'SUIT Variable', sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 200%;
  opacity: 0;
}
.letter p:nth-of-type(1) {
  font-weight: 800;
  font-size: 14px;
  animation: fade 2s 1.2s ease-out alternate forwards;
  letter-spacing: 1px;
}
.letter p:nth-of-type(2) {
  animation: fade 2s 1.8s ease-out alternate forwards;
  margin: 25px 0;
}
.letter p:nth-of-type(3) {
  animation: fade 2s 3.2s ease-out alternate forwards;
}
.letter-notice {
  margin-bottom: 0px;
}
.letter-notice-box {
  padding: 15px 0px;
  border-top: 1px dashed rgba(255,255,255,0.5);
  border-bottom: 1px dashed rgba(255,255,255,0.5);
}
@keyframes fadeOut {
  from { opacity: 1; } 
  to { opacity: 0; } 
}
@keyframes fade {
  from { opacity: 0; } 
  to { opacity: 1; } 
}
@keyframes fadeIn {
  from { opacity: 0; margin-top: -10px; } 
  to { opacity: 1; margin-top: 0px; } 
}
.press p {
  font-size: 8px !important;
  letter-spacing: 0.5px;
  color: #fff;
  transition: all 400ms ease-out;
}
.press {
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  border: 1px solid rgba(255,255,255,0.7);
  padding: 3px 25px;
  border-radius: 0px;
  z-index: 9;
  opacity: 0;
  animation: fadeIn 1s 3s ease-out alternate forwards;
  transition: all 400ms ease-out;
}
p.start {
  font-weight: 900 !important;
  font-family: 'SUIT Variable', sans-serif;
}
.press:hover {
  background: #fff;
  transition: all 400ms ease-out;
}
.press:hover .start {
  color: #334350;
  transition: all 400ms ease-out;
}

/*pc*/
@media screen and (min-width:1101px) { 

}

/*pad*/
@media screen and (max-width:1100px) and (min-width:700px) {

}

/*mb*/
@media screen and (max-width:699px) {

}