@import "reset.css";
@font-face {
  font-family: "Helvetica", sans-serif;
  src: url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf");
  font-size: normal;
}


* {
  box-sizing: border-box;
  line-height: inherit;
}


body {
  font-family: "Helvetica", sans-serif;
  line-height: normal;
  background: black;
}


.modal {
  z-index: 2;
  position: fixed;
  display: flex;
  width: 100%;
  height: 100dvh;
  flex-direction: column;
  color: white;
  margin: 0 auto;
  background-color: black;
}

.modal-header {
  position: fixed;
  width: 100%;
  min-height: 56px;
  display: flex;
  color: white;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.modal-title {
  font-size: 32px;
  font-weight: 700;
}

.modal-body {
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
}

.modal-menu {
  font-weight: 300;
  font-size: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 51px;
  padding: 0 20px;
}



.section {
  overflow:hidden;
}
.fp-tableCell {
  overflow:hidden;
}

.section-container {
  display: flex;
  color: white;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(1);
  background-blend-mode: multiply;

  height: 100dvh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.section-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  max-width: 1000px;
  padding: 0 20px;
  margin: 0 auto;
}

.section-id {
  font-size: 24px;
  font-weight: 300;
  text-transform: uppercase;
}

.title {
  font-weight: 700;
  font-size: clamp(28px, 5vw, 64px);
}

.body {
  font-size: 18px;
  font-weight: 300;
  align-self: stretch;
  font-size: clamp(12px , 2vw, 18px);
}

.section-header {
  position: fixed;
  width: 100%;
  height: 80px;
  background: transparent;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: white;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
}

.section-title {
  font-weight: 700;
  font-size: 32px;
}

.section-menu {
  display: flex;
  font-weight: 400;
  font-size: 18px;
  gap: 51px;
}

.sns-icon {
  display: flex;
  gap: 24px;
  margin: 0 auto;
}




.section:nth-of-type(1) .section-container {
  background-color: black;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section:nth-of-type(1) .section-wrapper {
  max-width: 1224px;
}
.video-wrapper {
  max-width: 1200px;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section:nth-of-type(1) video {
  position: relative;
  width: 100%;
  height: 100%;
  left: -8px;
}



.section:nth-of-type(2) .section-container{
  background-image: url("../img/second.png");
  background-color: rgba(0, 0, 0, 0.6);
  background-color: red;
}

.section:nth-of-type(3) .section-container{
  background-image: url("../img/third.png");
  background-position: left;
  background-color: rgba(0, 0, 0, 0.8);
}

.section:nth-of-type(4) .section-container{
  background-image: url("../img/fourth.png");
}

.section:nth-of-type(5) .section-container{
  background-image: url("../img/fifth.png");

}

.section:nth-of-type(6) .section-container{
  background-image: url("../img/sixth.png");
}

.section:nth-of-type(7) .section-container{
  position: relative;
  background-image: url("../img/seventh.png");
}
.section:nth-of-type(6) .title,
.section:nth-of-type(7) .title {
  font-size: clamp(24px, 5vw, 54px);
}


.copyright {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  font-size: clamp(12px, 2vw,18px);
  font-weight: 300;
}

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

.mail {
  color: white;
  text-decoration: underline;
  cursor: pointer;
  font-size: clamp(14px , 3vw, 32px);
}

.modal-close{
  cursor: pointer;
  background-color: transparent;
}


.mobile-menu {
  opacity: 0;
  cursor: pointer;
  background-color: transparent;
}

.desktop_space {
  display: block;
}
.moblie_space {
  display: none;
}
.hidden {
  display: none;
}






@media (max-width: 768px) {
  .section-header {
    height: 56px;
    padding: 0 20px;
  }
  .desktop_space {
    display: none;
  }
  .moblie_space {
    display: block;
  }
  .mobile-menu {
    display: block;
    opacity: 1;
  }
  .section-menu {
    display: none;
    opacity: 0;
  }
  .sns-icon img {
    width: 48px;
  }
}