@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');

@font-face {
  font-family: 'Unblocker';
  src: url(../font/Unblocker.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}


body {
  font-family: "Mitr", sans-serif;
  scroll-snap-type: y mandatory;
  position: relative;
}

.section {
  scroll-snap-align: start;
  position: relative;
  padding: 50px 0;
}

:root {
  --white-gradient: linear-gradient(180deg,
      #FFFFFF 14%,
      #c7e7ff 57%,
      #a0deff 83%,
      #FFFFFF 100%);
}

@font-face {
  font-family: 'Unblocker';
  src: url('fonts/Unblocker.woff2') format('woff2'),
    url('fonts/Unblocker.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


.btn:hover {
  /* border: none; */
}

.btn:active {
  /* border: none; */
}

a {
  transition: .3s;
  transform: .3s;
}

a:hover {
  filter: brightness(1.1);
}

@media (min-width: 1025px) {
  #Sec-Event {
    background: url(../images/bg-sec-2.webp?v=3.24) top center no-repeat;
    background-size: cover;
    padding-top: 200px;
  }
}

@media (max-width: 1600px) {
  #Sec-News {
    background-size: cover;
  }
}

@media (max-width: 1200px) {

  #Sec-News {
    background-size: cover;
  }
}

@media (max-width: 1600px) {}

@media (max-width: 1600px) {
  #Sec-System {
    background-size: cover;
  }
}

@media (max-width: 1920px) {}

#Sec-Preregis::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
  z-index: 10;
}




@media (min-width: 1025px) {

  #Sec-Preregis {
    padding-top: 6%;
    padding-bottom: 60px;
    /* aspect-ratio: 16/9; */
  }
}

@media (min-width: 1920px) {
  .section {
    background-size: 100%;
    max-width: 1920px;
    margin: 0 auto;
  }
}

.bg-section1 {
  background: url(../images/bg-obt-sm.webp?v=3.24) top no-repeat;
  background-size: 115%;
}

.bg-section2 {
  background: url(../images/s-presale/bg-s-presale.webp?v=3.24) top no-repeat;
  background-size: cover;
}

@media (min-width: 720px) {
  .bg-section1 {
    background-size: 110%;
  }
}

@media (min-width: 960px) {
  .bg-section1 {
    background: url(../images/bg-obt.webp?v=3.24) top no-repeat;
    background-size: 1500px;
  }
}

@media (min-width: 1440px) {
  .bg-section1 {
    background: url(../images/bg-obt.webp?v=3.24) top no-repeat;
    background-size: 1920px;
  }
}

@media (min-width: 1600px) {
  .bg-section1 {
    background: url(../images/bg-obt.webp?v=3.24) top no-repeat;
    background-size: 2500px;
  }
}