body canvas {
  position: absolute;
  z-index: 0;
  /* top: 0;
  left: 0;
  right: 0; */
}

.title b {
  font-size: 5vw !important;
}

.title {
  font-size: 20vw !important;
}

h3 {
  font-size: 1vw !important;
  z-index: 100;
}

.expanded,
.desc,
.text,
.first-text {
  font-size: 0.8vw !important;
}

.elementor-popup-modal {
  z-index: 200;
}
.fixed {
  position: fixed !important;
  left: 0;
  right: 0;
  top: 0;
}

.expanded {
  width: 90% !important;
  z-index: 99;
}

.first-screen {
  height: calc(100vh - 100px);
}

/* tablet */
@media only screen and (max-width: 1024px) {
  #choose-section {
    display: none;
  }
  .first-screen {
    height: unset;
  }

  .title b {
    font-size: 11.5vw !important;
  }

  .title {
    font-size: 20vw !important;
  }

  h3 {
    font-size: 2vw !important;
  }

  .expanded,
  .desc,
  .text,
  .first-text {
    font-size: 1.8vw !important;
  }

  .home .video-block:hover .expanded {
    opacity: unset;
    transform: unset;
  }
  .home .video-block:hover h3 {
    opacity: unset;
    transform: unset;
  }
  .home .expanded {
    opacity: 1;
  }
}

@media only screen and (max-width: 780px) {
  .title b {
    font-size: 11.5vw !important;
  }

  .title {
    font-size: 20vw !important;
  }

  h3 {
    font-size: 1.5rem !important;
  }

  .expanded,
  .desc,
  .text,
  .first-text {
    font-size: 0.8rem !important;
  }
}

/* mobile */

@media only screen and (max-width: 425px) {
  .title b {
    font-size: 22vw !important;
  }

  .title {
    font-size: 20vw !important;
  }

  h3 {
    font-size: 1.5rem !important;
  }

  .expanded,
  .desc,
  .text,
  .first-text {
    font-size: 1rem !important;
  }
  .mobile-rig {
    left: -75px !important;
    top: -30px !important;
  }
}

.video-block:hover .expanded {
  opacity: 1;
  transform: translateY(-45px);
}
.video-block:hover h3 {
  opacity: 1;
  transform: translateY(-50px);
}
.expanded {
  opacity: 0;
}

.mobile-h-line {
  width: 30px;
  height: 1px;
  position: absolute;
  left: -30px;
  background: #2a2a2a;
  top: -1px;
}
.mobile-h-line-rig {
  width: 60px;
  left: -60px;
}
.mobile-v-line {
  width: 1px;
  height: 100%;
  position: absolute;
  left: -30px;
  background: #2a2a2a;
  top: -1px;
}
.mobile-rig-point-wrap {
  width: 5px !important;
  height: 5px !important;
  position: absolute;
  left: -62px;
  top: -2px;
}
.mobile-rig {
  position: absolute;
  left: -90px;
  transform: rotate(-90deg);
  top: -45px;
}

.point {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  display: block;
  position: absolute;
}

.point-wrap {
  width: 5px !important;
  height: 5px !important;
}

.col1-line {
  content: "";
  height: calc(50vh);
  display: block;
  width: 1px !important;
  position: absolute;
  bottom: calc(100% - 40px);
  left: -1px;
  border-left: 1px solid #2a2a2a;
}
.col2-line {
  transition: all 0.3s ease;
  content: "";
  height: 30px;
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: -1px;
  border-left: 1px solid #2a2a2a;
}
.col3-line {
  content: "";
  height: 77px;
  display: block;
  width: 0;
  position: absolute;
  top: -47px;
  left: -1px;
  border-left: 1px solid #2a2a2a;
}
.col4-line {
  content: "";
  height: 105px;
  display: block;
  width: 0;
  position: absolute;
  top: -75px;
  left: -1px;
  border-left: 1px solid #2a2a2a;
}
.col5-line {
  content: "";
  height: 77px;
  display: block;
  width: 0;
  position: absolute;
  top: -47px;
  left: -1px;
  border-left: 1px solid #2a2a2a;
}

.choose .col:hover {
  width: 100%;
}
.choose .col,
.choose .col h2,
.col img,
.point-wrap,
.point,
.expanded,
.video-block h3 {
  transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.choose:hover h2 {
  transform: scale(1.2);
}

.choose .col:hover img {
  opacity: 1;
}
.choose .line {
  content: "";
  width: 1px;
  height: 100vh;
  position: absolute;
  right: 0;
  top: 0;
  background: #2a2a2a;
}