.font-24 {
  --fontsize: 2.4rem;
  font-size: var(--fontsize);
}

.font-28 {
  --fontsize: 2.8rem;
  font-size: var(--fontsize);
}

.font-30 {
  --fontsize: 3.0rem;
  font-size: var(--fontsize);
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    opacity: 0;
  }
  40% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    opacity: 0;
  }
  40% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
}

.section .mainAnimation {
  -webkit-transition: all 1.0s;
  transition: all 1.0s;
  opacity: 0;
}

.section .fadeRight {
  -webkit-transform: translate(-80px, 0);
          transform: translate(-80px, 0);
}

.section .fadeDown {
  -webkit-transform: translate(0, -60px);
          transform: translate(0, -60px);
}

.section .fadeUp {
  -webkit-transform: translate(0, 60px);
          transform: translate(0, 60px);
}

.section.on .mainAnimation {
  opacity: 1;
}

.section.on .fadeRight,
.section.on .fadeDown,
.section.on .fadeUp {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.section.on .bounce {
  -webkit-animation: bounce 0.6s forwards;
          animation: bounce 0.6s forwards;
}

#visual .visualBox .titleBox .visualTitle1Cls-1,
#visual .visualBox .titleBox .visualTitle2Cls-1 {
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#visual .visualBox .titleBox .visualTitle1Cls-1 {
  stroke-dasharray: 278;
  stroke-dashoffset: 278;
}

#visual .visualBox .titleBox .visualTitle2Cls-1 {
  stroke: #dbdbdb;
  stroke-width: 2px;
  fill: transparent;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

#visual .visualBox .titleBox p {
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#visual .visualBox .markBox .scrollBox span {
  -webkit-animation: scroll 1.2s infinite;
          animation: scroll 1.2s infinite;
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateY(18px);
            transform: translateY(18px);
  }
  50% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  100% {
    -webkit-transform: translateY(18px);
            transform: translateY(18px);
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateY(18px);
            transform: translateY(18px);
  }
  50% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  100% {
    -webkit-transform: translateY(18px);
            transform: translateY(18px);
  }
}

#visual.active .visualBox .titleBox.on .visualTitle1Cls-1,
#visual.active .visualBox .titleBox.on .visualTitle2Cls-1 {
  stroke-dashoffset: 0;
  opacity: 1;
  -webkit-transition: all 3.2s;
  transition: all 3.2s;
}

#visual.active .visualBox .titleBox.on .visualTitle1Cls-1 {
  stroke-width: 2px;
}

#visual.active .visualBox .titleBox.on .visualTitle2Cls-1 {
  stroke: transparent;
  stroke-width: 0;
  fill: #ffffff;
  -webkit-transition-delay: 1.0s;
          transition-delay: 1.0s;
}

#visual.active .visualBox .titleBox.on p {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  -webkit-transition: all 0.8s 1.4s;
  transition: all 0.8s 1.4s;
}

#type .item {
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#type .item:nth-child(1), #type .item:nth-child(5) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

#type .item:nth-child(2), #type .item:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

#type .item:nth-child(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#recommend .item {
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#recommend .item:nth-child(1), #recommend .item:nth-child(4) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#recommend .item:nth-child(2), #recommend .item:nth-child(3) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

#about .img {
  position: relative;
}

#about .img::after {
  content: "";
  background: #ffffff;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 1.0s;
  transition: all 1.0s;
  width: 100%;
  height: 100%;
}

#about.on .img::after {
  width: 0;
}

.title.on .sectionTitle {
  letter-spacing: 0;
}

.title.on .sectionTitle span {
  -webkit-transform: translateX(0) rotateY(0);
          transform: translateX(0) rotateY(0);
  opacity: 1;
}

.title.on .sectionTitle span:nth-child(1) {
  -webkit-transition-delay: 0.16s;
          transition-delay: 0.16s;
}

.title.on .sectionTitle span:nth-child(2) {
  -webkit-transition-delay: 0.32s;
          transition-delay: 0.32s;
}

.title.on .sectionTitle span:nth-child(3) {
  -webkit-transition-delay: 0.48s;
          transition-delay: 0.48s;
}

.title.on .sectionTitle span:nth-child(4) {
  -webkit-transition-delay: 0.64s;
          transition-delay: 0.64s;
}

.title.on .sectionTitle span:nth-child(5) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}

.title.on .sectionTitle span:nth-child(6) {
  -webkit-transition-delay: 0.96s;
          transition-delay: 0.96s;
}

.title.on .sectionTitle span:nth-child(7) {
  -webkit-transition-delay: 1.12s;
          transition-delay: 1.12s;
}

.title.on .sectionTitle span:nth-child(8) {
  -webkit-transition-delay: 1.28s;
          transition-delay: 1.28s;
}

.title.on .sectionTitle span:nth-child(9) {
  -webkit-transition-delay: 1.44s;
          transition-delay: 1.44s;
}

.title.on .sectionTitle span:nth-child(10) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}

@media (max-width: 960px) {
  #type .item:nth-child(2) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }
  #type .item:nth-child(1), #type .item:nth-child(3) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
  #type .item:nth-child(4), #type .item:nth-child(5) {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }
}