@charset "utf-8";

.lp_wrap .otlp {
  background-color: #191928;
  position: relative;
  overflow: visible;
}
.lp_wrap .otlp .pin-spacer:nth-of-type(1) {
  pointer-events: none;
}
.lp_wrap .otlp .img1 {
  position: absolute;
  top: 3%;
  left: 0%;
  z-index: 2;
  width: 100%;
  pointer-events: none;
}
.lp_wrap .otlp .img1 .img1_inner {
  position: relative;
}
.lp_wrap .otlp .img1 .img1_inner > img {
  position: relative;
  z-index: 1;
}
.lp_wrap .otlp .img1 .img1_inner .video-wrapper {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  perspective: 270vw;
}
.lp_wrap .otlp .img1 .img1_inner .video-wrapper video {
  transform: translateX(-3.6%) translateY(-32.9%) rotateX(38deg) rotateY(1deg) rotateZ(-25deg) skewX(13deg) skewY(-4deg)
    scale(0.43, 0.55);
  clip-path: inset(0 0 round 9% 9% 12% 10%);
}
.lp_wrap .otlp .head1 {
  font-size: 9.1vw;
  padding-left: 7.2vw;
  letter-spacing: 0.1em;
  line-height: 0.9em;
  color: #4be6f0;
}
.lp_wrap .otlp .head1 br:nth-child(3) {
  display: none;
}
.lp_wrap .otlp .wrap {
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: flex-start;
  margin-top: 14.4vw;
}
.lp_wrap .otlp .wrap .nav {
  padding: 50px 0px;
  position: sticky;
  top: 0%;
}
.lp_wrap .otlp .wrap .nav img {
  display: block;
  width: 38.048%;
  margin: auto;
}
.lp_wrap .otlp .wrap .nav ul {
  position: absolute;
  top: 25%;
  left: 38%;
}
.lp_wrap .otlp .wrap .nav ul li:nth-child(n + 2) {
  padding-top: 18%;
}
.lp_wrap .otlp .wrap .nav ul li a {
  font-size: 22px;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-decoration: none;
}
.lp_wrap .otlp .wrap .nav ul li a.active {
  color: #4be6f0;
}
.lp_wrap .otlp .wrap .content {
  padding-top: 50px;
}
.lp_wrap .otlp .wrap .content .medal {
  margin-bottom: 10%;
  width: 52.824%;
  position: relative;
}
.lp_wrap .otlp .wrap .content .medal .marker1 {
  position: absolute;
  top: 84%;
  left: 58%;
  width: 18.019%;
}
.lp_wrap .otlp .wrap .content .medal .marker1 svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 258 258;
  stroke-dashoffset: 0;
}
.lp_wrap .otlp .wrap .content .medal.trigger .marker1 svg mask path {
  transition: 0.8s;
  stroke-dashoffset: 258;
}
.lp_wrap .otlp .wrap .content .medal.trigger.move .marker1 svg mask path {
  stroke-dashoffset: 0;
}
.lp_wrap .otlp .wrap .content .head2 {
  margin-bottom: 5%;
  width: max-content;
  font-size: 2.5vw;
  letter-spacing: 0.1em;
  line-height: 1.636em;
  color: #ffffff;
  position: relative;
  z-index: 1;
}
.lp_wrap .otlp .wrap .content .head2 span {
  font-size: inherit;
  color: #4be6f0;
}
.lp_wrap .otlp .wrap .content .head2 .marker2 {
  position: absolute;
  top: -46%;
  left: -9%;
  z-index: -1;
  width: 66.667%;
}
.lp_wrap .otlp .wrap .content .head2 .marker2 svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 605 605;
  stroke-dashoffset: 0;
}
.lp_wrap .otlp .wrap .content .head2.trigger .marker2 svg mask path {
  transition: 0.8s;
  stroke-dashoffset: 605;
}
.lp_wrap .otlp .wrap .content .head2.trigger.move .marker2 svg mask path {
  stroke-dashoffset: 0 !important;
}
.lp_wrap .otlp .wrap .content .img2 {
  margin-bottom: 4%;
  width: 64.435%;
  position: relative;
  clip-path: inset(0 0 1px 0);
}
.lp_wrap .otlp .wrap .content .let1 {
  margin-bottom: 4%;
  text-align: justify;
  font-size: 1.1vw;
  font-weight: normal;
  letter-spacing: 0.05em;
  line-height: 2em;
  color: #ffffff;
}
.lp_wrap .otlp .wrap .content .let1 span {
  font-size: inherit;
  color: #191928;
  font-weight: inherit;
  background: linear-gradient(#4be6f0 0%, #4be6f0 100%);
  background-repeat: no-repeat;
  transition: 0.8s;
}
.lp_wrap .otlp .wrap .content .let1.trigger span {
  background-size: 0% 100%;
}
.lp_wrap .otlp .wrap .content .let1.trigger.move span {
  background-size: 100% 100%;
}
.lp_wrap .otlp .wrap .content .head3 {
  margin: 5% 0%;
  width: max-content;
  font-size: 2.5vw;
  letter-spacing: 0.1em;
  line-height: 1.636em;
  color: #ffffff;
  position: relative;
  z-index: 1;
}
.lp_wrap .otlp .wrap .content .head3 span {
  font-size: inherit;
  color: #4be6f0;
}
.lp_wrap .otlp .wrap .content .head3 .marker3 {
  position: absolute;
  top: 23%;
  left: 30%;
  z-index: -1;
  width: 53.395%;
}
.lp_wrap .otlp .wrap .content .head3 .marker3 svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 671 671;
  stroke-dashoffset: 0;
}
.lp_wrap .otlp .wrap .content .head3.trigger .marker3 svg mask path {
  transition: 0.8s;
  stroke-dashoffset: 671;
}
.lp_wrap .otlp .wrap .content .head3.trigger.move .marker3 svg mask path {
  stroke-dashoffset: 0 !important;
}
.lp_wrap .otlp .wrap .content .graph {
  width: 74.372%;
  position: relative;
}
.lp_wrap .otlp .wrap .content .graph .percent1 {
  position: absolute;
  top: 39.2%;
  left: 10.8%;
  width: 36.286%;
}
.lp_wrap .otlp .wrap .content .graph .percent2 {
  position: absolute;
  top: 39.2%;
  left: 64%;
  width: 17.862%;
}
.lp_wrap .otlp .wrap .content .graph .tag1 {
  position: absolute;
  top: 42.8%;
  left: -10.4%;
  width: 12.517%;
}
.lp_wrap .otlp .wrap .content .graph .tag2 {
  position: absolute;
  top: 42.7%;
  left: 80.3%;
  width: 30.239%;
}
.lp_wrap .otlp .wrap .content .graph.trigger .percent1 {
  transition: 0.6s;
  clip-path: inset(0% 100% 0% 0%);
}
.lp_wrap .otlp .wrap .content .graph.trigger .percent2 {
  transition: 0.6s 0.8s;
  clip-path: inset(0% 100% 0% 0%);
}
.lp_wrap .otlp .wrap .content .graph.trigger .tag1 {
  transition: 0.6s 0.4s;
  opacity: 0;
}
.lp_wrap .otlp .wrap .content .graph.trigger .tag2 {
  transition: 0.6s 1.2s;
  opacity: 0;
}
.lp_wrap .otlp .wrap .content .graph.trigger.move .percent1,
.lp_wrap .otlp .wrap .content .graph.trigger.move .percent2 {
  clip-path: inset(0%);
}
.lp_wrap .otlp .wrap .content .graph.trigger.move .tag1,
.lp_wrap .otlp .wrap .content .graph.trigger.move .tag2 {
  opacity: 1;
}
@media all and (max-width: 750px) {
  .lp_wrap .otlp {
    overflow: hidden;
  }
  .lp_wrap .otlp .head1 {
    font-size: 13.2vw;
  }
  .lp_wrap .otlp .head1 br:nth-child(3) {
    display: block;
  }
  .lp_wrap .otlp .wrap {
    display: block;
    margin-top: 14.4vw;
  }
  .lp_wrap .otlp .wrap .nav {
    display: none;
  }
  .lp_wrap .otlp .wrap .content {
    padding: 0px 7.2vw 0px;
  }
  .lp_wrap .otlp .wrap .content .medal {
    margin-bottom: 20%;
    width: 78.66%;
  }
  .lp_wrap .otlp .wrap .content .head2 {
    margin-bottom: 10%;
    font-size: 5.6vw;
  }
  .lp_wrap .otlp .wrap .content .head2 .marker2 {
    top: -40%;
    left: -7%;
    width: 62.5%;
  }
  .lp_wrap .otlp .wrap .content .head2 .marker2 svg mask path {
    stroke-dasharray: 702 702;
  }
  .lp_wrap .otlp .wrap .content .head2.trigger .marker2 svg mask path {
    stroke-dashoffset: 702;
  }
  .lp_wrap .otlp .wrap .content .img2 {
    margin-bottom: 8%;
    width: 95.794%;
  }
  .lp_wrap .otlp .wrap .content .let1 {
    margin-bottom: 8%;
    font-size: 3.6vw;
  }
  .lp_wrap .otlp .wrap .content .let1 br {
    display: none;
  }
  .lp_wrap .otlp .wrap .content .head3 {
    margin: 10% 0%;
    font-size: 5.6vw;
  }
  .lp_wrap .otlp .wrap .content .head3 .marker3 {
    left: 30%;
    width: 55.35%;
  }
  .lp_wrap .otlp .wrap .content .head3 .marker3 svg mask path {
    stroke-dasharray: 876 876;
  }
  .lp_wrap .otlp .wrap .content .head3.trigger .marker3 svg mask path {
    stroke-dashoffset: 876;
  }
  .lp_wrap .otlp .wrap .content .graph {
    width: 98.13%;
    margin-bottom: 10%;
  }
  .lp_wrap .otlp .wrap .content .graph .percent1 {
    top: 39.7%;
    left: 14%;
    width: 33.968%;
  }
  .lp_wrap .otlp .wrap .content .graph .percent2 {
    top: 40.7%;
    left: 66.4%;
    width: 17.778%;
  }
  .lp_wrap .otlp .wrap .content .graph .tag1 {
    top: 86.6%;
    left: -3.8%;
    width: 43.015%;
  }
  .lp_wrap .otlp .wrap .content .graph .tag2 {
    top: 54.2%;
    left: 60.3%;
    width: 43.015%;
  }
}