@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
* {-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 {-webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */}
.transition {
  transition:         all ease-out 0.6s;
  -webkit-transition: all ease-out 0.6s;
  -moz-transition:    all ease-out 0.6s;
  -ms-transition:     all ease-out 0.6s;
  -o-transition:      all ease-out 0.6s;
}
* {
  margin:0;
  padding:0;
  outline:none;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
  color:#000;
  background: transparent;
  border:none;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
  background: #000;
  overflow: hidden;
}
.bg {
  position: fixed;
  background: url(https://i.imgur.com/61lOZcs.jpeg) center center;
  background-size: cover; 
  z-index: -9;
  opacity: 1;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.texture1 {
  position: fixed;
  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) center center;
  background-size: cover;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.6;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.video-background {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}
.video-wrapper video, img.remove-bg {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  mix-blend-mode: screen;
  z-index: 999;
    animation: fadeIn 2s forwards;
    animation-delay: 2s;
    opacity: 0;
    pointer-events: none;
}
.video-wrapper {
  overflow: hidden;
  z-index:-9;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/*타이틀*/
.title img {
  z-index: 2;
  position: absolute;
  cursor: pointer !important;
}
img.title2 {
  margin-top: -70px;
  max-width: 370px;
  opacity: 0;
  animation: fadeIn 8s forwards;
  animation-delay: 2s;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
img.title3 {
  max-width: 350px;
  opacity: 0;
  animation: fadeIn 2s forwards;
  animation-delay: 2s;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes fade {
   0% {
     opacity: 0%;
   }
   50% {
     opacity: 1;
   }
   100%  {
     opacity: 0%;
   }
}
@keyframes fadeIn {
            0% {
                top: 100px;
                opacity: 0; /* 시작할 때 투명 */
            }
            100% {
                top: 0px;
                opacity: 1; /* 끝날 때 불투명 */
            }
        }

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

}

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

  .title {
    zoom: 0.8;
  }
  
}