.overview-content {
  overflow-x: hidden;
}

.tp-videoContainer {
  width: auto;
  position: relative;
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
}
.tp-videoContainer video {
  width: 100%;
  display: block;
}
.tp-videoContainer .tp-controllerDiv {
  position: absolute;
  right: 2.5em;
  bottom: 2.5em;
}
.tp-videoContainer .tp-controllerDiv .tp-pauseIcon {
  width: 3em;
  height: 3em;
  color: transparent;
  border-radius: 100%;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
@media (min-width: 1921px) {
  .tp-videoContainer {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .tp-videoContainer {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .tp-videoContainer {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .tp-videoContainer {
    font-size: 10.35px;
  }
  .tp-videoContainer .videoController {
    top: 50%;
    left: 50%;
    right: unset;
    bottom: unset;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 414px) {
  .tp-videoContainer {
    font-size: 2.5vw;
  }
}

.overview-content .animation-text.active {
  transform: translateY(0);
  opacity: 1;
}
.overview-content .animation-text {
  transform: translateY(100px);
  opacity: 0;
  transition: opacity 1s linear, transform 1s linear;
}
.overview-content img {
  width: 100%;
}
@media (max-width: 736px) {
  .overview-content .tapo-c400_v1.active .animation-text.active {
    transform: translateY(0);
    opacity: 1;
  }
  .overview-content .tapo-c400_v1.active .animation-text {
    transform: translateY(12vw);
    opacity: 0;
    transition: opacity 1s linear, transform 1s linear;
  }
}

.overview-content .m-show {
  display: none !important;
}
@media (max-width: 736px) {
  .overview-content .m-hide {
    display: none !important;
  }
  .overview-content .m-show {
    display: block !important;
  }
}

.overview-content .tapo-banner {
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
  background: url(./img/a.jpg) 50% 100% / 120em no-repeat;
  height: 60.5em;
  position: relative;
  display: flex;
  align-items: center;
}
.overview-content .tapo-banner .w-container {
  width: 82em;
  margin: 0 auto;
}
.overview-content .tapo-banner .text {
  padding: 0em 52% 1em 0%;
  text-align: left;
}
.overview-content .tapo-banner h2 {
  font-size: 3.375em;
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 0.375em;
}
.overview-content .tapo-banner h3 {
  font-size: 1.825em;
  font-weight: 300;
  line-height: 1.2;
  padding-bottom: 1em;
}
.overview-content .tapo-banner p .model {
  font-size: 1.75em;
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  padding: 0.25em 0.75em;
  border-radius: 1em;
  display: inline-block;
  background-color: #005eac;
}
.overview-content .tapo-banner .banner-logos {
  margin-top: 2.5em;
}
.overview-content .tapo-banner .banner-logo {
  display: inline-block;
  width: auto;
  height: 3em;
}
.overview-content .tapo-banner .banner-logo + .banner-logo {
  margin-left: 0.5em;
}
@media (min-width: 1921px) {
  .overview-content .tapo-banner {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .tapo-banner {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .tapo-banner {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .overview-content .tapo-banner {
    font-size: 10.35px;
    background: url(./m/a.jpg) top / 100% no-repeat;
    height: 132vw;
    display: block;
  }
  .overview-content .tapo-banner .w-container {
    width: auto;
  }
  .overview-content .tapo-banner .text {
    padding: 8vw 6vw 0 6vw;
  }
  .overview-content .tapo-banner h2 {
    font-size: 7vw;
    font-weight: 500;
    line-height: 1.2;
    padding: 0 0 0.375em;
  }
  .overview-content .tapo-banner h3 {
    font-size: 4vw;
    font-weight: 300;
    line-height: 1.2;
    padding: 0 0vw 1.5em 0;
  }
  .overview-content .tapo-banner p .model {
    font-size: 4vw;
    padding: 0.25em 0.75em;
  }
  .overview-content .tapo-banner .banner-logos {
  }
  .overview-content .tapo-banner .banner-logo {
    height: 5.7vw;
  }
  .overview-content .tapo-banner .banner-logo + .banner-logo {
    margin-left: 0.25em;
  }
}
@media (max-width: 414px) {
  .overview-content .tapo-banner {
    font-size: 2.5vw;
  }
}

.overview-content .tapo-selling-points {
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
}
.overview-content .tapo-selling-points .w-container {
  width: 85.3125em;
  margin: 0 auto;
}
.overview-content .tapo-selling-points .text {
  padding: 7em 0 1em;
}
.overview-content .tapo-selling-points .box {
  height: 0;
  padding-top: 47.25%;
  margin: 0 auto;
  background: url(./img/b.png) top / 100% no-repeat;
  position: relative;
}
.overview-content .tapo-selling-points .highlight {
  font-size: 1.375em;
  font-weight: 500;
}

.overview-content .tapo-selling-points .font-large {
  font-size: 3.1875em;
  font-weight: 700;
  line-height: normal;
}
.overview-content .tapo-selling-points .font-big {
  font-size: 1.78125em;
  font-weight: 700;
  line-height: 1.2;
  display: block;
}
.overview-content .tapo-selling-points .font-medium {
  font-size: 1.6875em;
  font-weight: 400;
  line-height: 1.333333;
  display: block;
}
.overview-content .tapo-selling-points .font-small {
  font-size: 1.3125em;
  font-weight: 400;
  line-height: 1.25;
  display: block;
}

.overview-content .tapo-selling-points .desc {
  position: absolute;
  line-height: normal;
  text-align: left;
}
.overview-content .tapo-selling-points .desc-1 {
  top: 3%;
  left: 2%;
  width: 12%;
}
.overview-content .tapo-selling-points .desc-2 {
  top: 3%;
  left: 51%;
  width: 18.5%;
}
.overview-content .tapo-selling-points .desc-3 {
  top: 2%;
  left: 76%;
  width: 22.5%;
  text-align: center;
}
.overview-content .tapo-selling-points .desc-4 {
  top: 60%;
  left: 2%;
  width: 17%;
}
.overview-content .tapo-selling-points .desc-5 {
  top: 60%;
  left: 37%;
  width: 18%;
}
.overview-content .tapo-selling-points .desc-6 {
  top: 81%;
  left: 35%;
  width: 20.5%;
  text-align: right;
  color: #005eac;
}
.overview-content .tapo-selling-points .desc-7 {
  top: 70%;
  left: 75.5%;
  width: 12%;
}
.overview-content .tapo-selling-points .desc-8 {
  top: 83%;
  left: 75.5%;
  width: 12%;
}
@media (min-width: 1921px) {
  .overview-content .tapo-selling-points {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .tapo-selling-points {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .tapo-selling-points {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .overview-content .tapo-selling-points {
    font-size: 10.35px;
  }
  .overview-content .tapo-selling-points .w-container {
    width: auto;
  }
  .overview-content .tapo-selling-points .text {
    padding: 5em 0 1em;
    text-align: left;
  }
  .overview-content .tapo-selling-points .box {
    width: 88%;
    padding-top: 166.5%;
    background: url(./m/b.png) top / 100% no-repeat;
  }
  .overview-content .tapo-selling-points .font-medium-m {
    font-size: 1.6875em;
  }
  .overview-content .tapo-selling-points .desc-1 {
    top: 2%;
    left: 4%;
    width: 52%;
  }
  .overview-content .tapo-selling-points .desc-2 {
    top: 64%;
    left: 4%;
    width: 33%;
  }
  .overview-content .tapo-selling-points .desc-3 {
    top: 69%;
    left: 55%;
    width: 36%;
    text-align: left;
  }
  .overview-content .tapo-selling-points .desc-4 {
    top: 31%;
    left: 4%;
    width: 30%;
  }
  .overview-content .tapo-selling-points .desc-5 {
    top: 31%;
    left: 55%;
    width: 23%;
  }
  .overview-content .tapo-selling-points .desc-6 {
    top: 37%;
    left: 55%;
    width: 40%;
    text-align: left;
    display: flex;
    align-items: baseline;
  }
  .overview-content .tapo-selling-points .desc-7 {
    top: 84.5%;
    left: 4%;
    width: 26%;
    text-align: left;
  }
  .overview-content .tapo-selling-points .desc-8 {
    top: 90%;
    left: 4%;
    width: 20%;
    text-align: left;
  }
}
@media (max-width: 414px) {
  .overview-content .tapo-selling-points {
    font-size: 2.5vw;
  }
}

.overview-content .everything-needed {
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
}

.overview-content .everything-needed .w-container {
  position: relative;
  width: 73.125em;
  margin: 7em auto 0;
}

.overview-content .everything-needed .text {
  width: 73.125em;
  text-align: center;
  margin: 0 auto 2em;
  padding: 0;
}

.overview-content .everything-needed h2 {
  font-size: 2.8125em;
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 0.375em;
}

.overview-content .everything-needed p {
  font-size: 1.22em;
  font-weight: 300;
  line-height: 1.5;
}

@media (max-width: 1680px) {
  .overview-content .everything-needed {
    font-size: 14px;
  }
}

@media (max-width: 1440px) {
  .overview-content .everything-needed {
    font-size: 12px;
  }
}

@media (max-width: 736px) {
  .overview-content .everything-needed {
    font-size: 10.35px;
  }

  .overview-content .everything-needed .w-container {
    width: auto;
    position: relative;
    margin: 0 6vw;
  }

  .overview-content .everything-needed .text {
    text-align: left;
    width: auto;
    padding: 0 0 1.5em;
  }

  .overview-content .everything-needed h2 {
      font-size: 2.5em;
      line-height: 1.2;
      padding: 1.5em 0 0.5em;
  }

  .overview-content .everything-needed p {
    font-size: 1.75em;
      line-height: 1.5;
      padding: 0 0 1em;
  }
}

.overview-content .see-everything-day {
  font-size: 16px;
  margin: 0 auto;
  position: relative;
}
.overview-content .see-everything-day .img-container {
  position: relative;
}
.overview-content .see-everything-day span.desc {
  position: absolute;
  font-size: 2.8125em;
  font-weight: 500;
  line-height: 1.5;
  left: 50%;
  transform: translateX(-50%);
  top: 1em;
  transition: opacity 1s ease-in-out;
}
.overview-content .see-everything-day .c410-box.fixed {
  position: fixed;
  top: 0;
  margin: 0 auto;
  width: 100%;
}
.overview-content .see-everything-day .c410-box.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.overview-content .see-everything-day .w-container {
  width: 87.5em;
  margin: 0 auto;
}
.overview-content .see-everything-day .text {
  text-align: center;
  padding: 7em 17em 2em;
}
.overview-content .see-everything-day h2 {
  font-size: 2.8125em;
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 0.5em;
}
.overview-content .see-everything-day .text p {
  font-size: 1.3125em;
  line-height: 1.5;
}
.overview-content .see-everything-day .img-container {
  width: 75em;
  height: 39.84375em;
  position: relative;
  margin: 0 auto;
}
.overview-content .see-everything-day .img-container img {
  position: absolute;
  height: 39.84375em;
  width: 75em;
  opacity: 0;
  transition: opacity 1s linear;
}
.overview-content .see-everything-day .img-container img.active {
  opacity: 1;
}

.overview-content .see-everything-day .img-container-mobile {
  display: none;
}
@media (min-width: 1921px) {
  .overview-content .see-everything-day {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .see-everything-day {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .see-everything-day {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .overview-content .see-everything-day {
    font-size: 10.35px;
    background-size: 100%;
    padding-bottom: 0;
  }
  .overview-content .see-everything-day .w-container {
    width: auto;
    position: relative;
  }
  .overview-content .see-everything-day .text {
    padding: 0 0 1.5em;
    text-align: left;
    color: #000;
  }
  .overview-content .see-everything-day br {
    display: none;
  }
  .overview-content .see-everything-day h2 {
    font-size: 2.5em;
    line-height: 1.2;
    padding: 1.5em 6% 0.5em;
  }
  .overview-content .see-everything-day .text p {
    font-size: 1.75em;
    line-height: 1.5;
    font-weight: 300;
    padding: 0 6%;
  }
  .overview-content .see-everything-day .img-container {
    display: none;
  }
  .overview-content .see-everything-day .img-container-mobile {
    margin: 0 6% 0;
    width: auto;
    height: auto;
    display: block;
    min-height: 50vw;
    position: relative;
  }
  .overview-content .see-everything-day .img-container-mobile img {
    display: block;
    width: 100%;
    position: static;
  }
  .overview-content .see-everything-day .img-container-mobile .d2 {
    position: absolute;
  }
  .overview-content .see-everything-day .img-container-mobile img + img {
    animation: fadeInOut 10s infinite;
    position: relative;
    top: 0;
  }

  @keyframes fadeInOut {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
@media (max-width: 414px) {
  .overview-content .see-everything-day {
    font-size: 2.5vw;
  }
}

.overview-content .crisp-clear-details {
  font-size: 16px;
  margin: 0 auto;
  position: relative;
}
.overview-content .crisp-clear-details .img-container {
  position: relative;
}
.overview-content .crisp-clear-details span.desc {
  position: absolute;
  font-size: 2.8125em;
  font-weight: 500;
  line-height: 1.5;
  left: 50%;
  transform: translateX(-50%);
  top: 1em;
  transition: opacity 1s ease-in-out;
}
.overview-content .crisp-clear-details .img-content {
  clip-path: inset(7em 13em 14em 13em round 1em);
  width: 75em;
  margin: 0 auto;
  display: block;
  transition: clip-path 1s linear;
}
.overview-content .crisp-clear-details.active .img-content {
  clip-path: inset(0em 0em 0em 0em round 0em);
}
.overview-content .crisp-clear-details .c410-box.fixed {
  position: fixed;
  top: 0;
  margin: 0 auto;
  width: 100%;
}
.overview-content .crisp-clear-details .c410-box.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.overview-content .crisp-clear-details .w-container {
  width: 87.5em;
  margin: 0 auto;
}
.overview-content .crisp-clear-details .text {
  text-align: center;
  padding: 4em 20em 2em;
  opacity: 0;
  transition: opacity 0.25s ease-in;
}
.overview-content .crisp-clear-details.active .text {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.overview-content .crisp-clear-details.active span.desc {
  opacity: 0;
  transition: opacity 0.25s ease-in;
}
.overview-content .crisp-clear-details h2 {
  font-size: 2.8125em;
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 0.5em;
}
.overview-content .crisp-clear-details .text p {
  font-size: 1.3125em;
  line-height: 1.5;
}
@media (min-width: 1921px) {
  .overview-content .crisp-clear-details {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .crisp-clear-details {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .crisp-clear-details {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .overview-content .crisp-clear-details {
    font-size: 10.35px;
    background: url(./m/d.jpg) 50% 100% no-repeat;
    background-size: 100%;
    padding-bottom: 50vw;
  }
  .overview-content .crisp-clear-details .w-container {
    width: auto;
    position: relative;
  }
  .overview-content .crisp-clear-details .text {
    padding: 0 0 1.5em;
    text-align: left;
    color: #000;
    opacity: 1;
  }
  .overview-content .crisp-clear-details br {
    display: none;
  }
  .overview-content .crisp-clear-details h2 {
    font-size: 2.5em;
    line-height: 1.2;
    padding: 1.5em 6% 0.5em;
  }
  .overview-content .crisp-clear-details .text p {
    font-size: 1.75em;
    line-height: 1.5;
    font-weight: 300;
    padding: 0 6%;
  }
  .overview-content .crisp-clear-details .img-container {
    display: none;
  }
}
@media (max-width: 414px) {
  .overview-content .crisp-clear-details {
    font-size: 2.5vw;
  }
}

.overview-content .ring-call {
  font-size: 16px;
  margin: 0 auto;
  position: relative;
}

.overview-content .ring-call .w-container {
  width: 75em;
  margin: 0 auto;
}

.overview-content .ring-call .text {
  text-align: center;
  padding: 7em 0em 2em;
}
.overview-content .ring-call h2 {
  font-size: 2.8125em;
  font-weight: 400;
  line-height: 1.2;
  padding: 0 6em 0.5em;
}
.overview-content .ring-call .text p {
  font-size: 1.3125em;
  line-height: 1.5;
  padding: 0 11em;
}
.overview-content .ring-call .bg {
  width: 100%;
}
.overview-content .ring-call .bg img {
  width: 100%;
  display: block;
}
@media (min-width: 1921px) {
  .overview-content .ring-call {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .ring-call {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .ring-call {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .overview-content .ring-call {
    font-size: 10.35px;
  }
  .overview-content .ring-call .w-container {
    width: auto;
  }
  .overview-content .ring-call .text {
    padding: 0;
    text-align: left;
  }

  .overview-content .ring-call .text h2 {
    font-size: 2.5em;
    line-height: 1.2;
    font-weight: 400;
    padding: 1.5em 6% 0.5em;
  }

  .overview-content .ring-call .text p {
    font-size: 1.75em;
    line-height: 1.5;
    font-weight: 300;
    padding: 0 6% 2em;
  }

  .overview-content .ring-call .bg {
    width: auto;
    padding: 0 6%;
  }
}
@media (max-width: 414px) {
  .overview-content .ring-call {
    font-size: 2.5vw;
  }
}

.overview-content .ai-powered-detection {
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
  position: relative;
}
.overview-content .ai-powered-detection .w-container {
  width: 73.125em;
  margin: 0 auto;
}
.overview-content .ai-powered-detection .text {
  text-align: center;
  padding: 5em 0 2em;
}
.overview-content .ai-powered-detection h2 {
  font-size: 2.8125em;
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 0.375em;
}
.overview-content .ai-powered-detection p {
  font-size: 1.22em;
  font-weight: 300;
  line-height: 1.5;
}
.overview-content .ai-powered-detection .icon-container {
  margin: 0 auto 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.overview-content .ai-powered-detection .icon-container img {
  width: 3em;
  height: auto;
  margin-right: 1em;
  display: inline-block;
}
.overview-content .ai-powered-detection .icon-container span {
  font-size: 1.22em;
  font-weight: 400;
  line-height: 1.3333;
  color: #005eac;
}
.overview-content .ai-powered-detection .img-container {
  width: 100%;
}
.overview-content .ai-powered-detection .img-container img {
  display: block;
  width: 100%;
}
.overview-content .ai-powered-detection .video-container {
  position: relative;
  width: 67.265625em;
  margin: 0 auto;
  height: 33em;
}
.overview-content .ai-powered-detection .video-container .img-phone {
  width: 67.265625em;
  position: absolute;
  z-index: 2;
}
.overview-content .ai-powered-detection .video-container video {
  position: absolute;
  left: 1.5em;
  top: 1.75em;
  width: 65em;
  border-radius: 3em;
}
@media (min-width: 1921px) {
  .overview-content .ai-powered-detection {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .ai-powered-detection {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .ai-powered-detection {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .overview-content .ai-powered-detection {
    font-size: 10.35px;
  }
  .overview-content .ai-powered-detection .w-container {
    width: auto;
  }
  .overview-content .ai-powered-detection .text {
    padding: 0 0 1.5em;
    text-align: left;
  }
  .overview-content .ai-powered-detection h2 {
    font-size: 2.5em;
    font-weight: 400;
    line-height: 1.2;
    padding: 1.5em 6vw 0.5em;
  }
  .overview-content .ai-powered-detection p {
    font-size: 1.75em;
    font-weight: 300;
    line-height: 1.5;
    padding: 0 6vw;
  }
  .overview-content .ai-powered-detection .icon-container {
    margin: 0 6vw 2em;
    justify-content: center;
  }
  .overview-content .ai-powered-detection .icon-container img {
    width: 3em;
    margin-right: 1em;
  }
  .overview-content .ai-powered-detection .icon-container span {
    font-size: 1.5em;
    font-weight: 400;
    line-height: 1.3333;
    color: #005eac;
  }
  .overview-content .ai-powered-detection .video-container {
    width: 90%;
    height: 44vw;
  }
  .overview-content .ai-powered-detection .video-container .img-phone {
    width: 100%;
  }
  .overview-content .ai-powered-detection .video-container video {
    width: 97%;
    left: 1.5vw;
    top: 1.5vw;
  }
  .overview-content .ai-powered-detection .img-container {
    padding: 0 6% 0;
    width: auto;
  }
}
@media (max-width: 414px) {
  .overview-content .ai-powered-detection {
    font-size: 2.5vw;
  }
}

.overview-content .total-control-one-app {
  font-size: 16px;
  margin: 0 auto;
  position: relative;
  max-width: 120em;
}
.overview-content .total-control-one-app .c410-box.fixed {
  position: fixed;
  top: 0;
  margin: 0 auto;
  width: 100%;
}
.overview-content .total-control-one-app .c410-box.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.overview-content .total-control-one-app .text p {
  font-size: 1.25em;
  font-weight: 300;
  line-height: 1.5;
  padding-bottom: 1em;
}
.overview-content .total-control-one-app .w-container {
  width: 73.125em;
  margin: 0 auto;
  position: relative;
}
.overview-content .total-control-one-app .text {
  padding: 22em 30em 0 0;
  text-align: left;
}
.overview-content .total-control-one-app .text .text-container {
  display: flex;
}
.overview-content .total-control-one-app h2 {
  font-size: 2.8125em;
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 0.5em;
  padding-left: 0.625em;
}
.overview-content .total-control-one-app h3 {
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 0.5em;
}
.overview-content .total-control-one-app .img {
  height: 58em;
  position: relative;
  margin: 0 auto;
}
.overview-content .total-control-one-app .bg {
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity linear 500ms;
  -webkit-transition: opacity linear 500ms;
  -moz-transition: opacity linear 500ms;
}
.overview-content .total-control-one-app .bg.active {
  opacity: 1;
}
.overview-content .total-control-one-app img.icon {
  width: 1em;
  height: 7.78125em;
  display: block;
  margin-top: 0.3em;
}
.overview-content .total-control-one-app .content {
  width: 36em;
  margin-left: 1em;
}
.overview-content .total-control-one-app img.phone {
  width: 17.5em;
  position: absolute;
  top: 10.5em;
  right: 0em;
}
.overview-content .total-control-one-app img.phone-out {
  width: 19.5em;
  position: absolute;
  top: 10.5em;
  right: 15em;
}
.overview-content .total-control-one-app .bg1 img.phone,
.overview-content .total-control-one-app .bg2 img.phone,
.overview-content .total-control-one-app .bg3 img.phone {
  width: 19.5em;
}
.overview-content .total-control-one-app h2.mobile-text {
  display: none;
}
@media (min-width: 1921px) {
  .overview-content .total-control-one-app {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .total-control-one-app {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .total-control-one-app {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .overview-content .total-control-one-app {
    font-size: 10.35px;
    background: none;
  }
  .overview-content .total-control-one-app .w-container {
    width: auto;
    position: relative;
    text-align: center;
  }
  .overview-content .total-control-one-app .text {
    padding: 0 0 1.5em;
    text-align: left;
  }
  .overview-content .total-control-one-app h2 {
    font-size: 2.5em;
    line-height: 1.2;
    padding: 1.5em 6% 0.5em;
    position: relative;
    top: auto;
    left: auto;
    text-align: left;
  }
  .overview-content .total-control-one-app h3 {
    font-size: 2em;
    padding: 0 6% 0.5em;
  }
  .overview-content .total-control-one-app .text p {
    font-size: 1.75em;
    font-weight: 300;
    line-height: 1.5;
    padding: 0 6%;
  }
  .overview-content .total-control-one-app h2.web-text {
    display: none;
  }
  .overview-content .total-control-one-app h2.mobile-text {
    display: block;
  }
  .overview-content .total-control-one-app .text .text-container {
    display: block;
  }
  .overview-content .total-control-one-app .content {
    width: auto;
    margin: 0 auto;
  }
  .overview-content .total-control-one-app .content br {
    display: none;
  }
  .overview-content .total-control-one-app .img {
    height: auto;
  }
  .overview-content .total-control-one-app .bg {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    right: auto;
    opacity: 1;
  }
  .overview-content .total-control-one-app img.icon {
    display: none;
  }
  .overview-content .total-control-one-app img.phone {
    width: 45vw;
    position: relative;
    margin: 0 auto;
    top: auto;
    right: auto;
  }
  .overview-content .total-control-one-app .bg1 img.phone,
  .overview-content .total-control-one-app .bg2 img.phone,
  .overview-content .total-control-one-app .bg3 img.phone {
    width: 51vw;
  }
  .overview-content .total-control-one-app img.phone-out {
    width: 51vw;
    position: absolute;
    margin: 0 auto;
    top: 36vw;
    right: auto;
    left: 24.5vw;
  }
  .overview-content .total-control-one-app .swiper-pagination {
    bottom: -4vw;
  }
}
@media (max-width: 414px) {
  .overview-content .total-control-one-app {
    font-size: 2.5vw;
  }
}

.overview-content .features-banner-swiper {
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
  overflow: hidden;
}
.overview-content .features-banner-swiper .buttons {
  display: flex;
  width: fit-content;
  margin: 0 auto 2.8125em;
  gap: 3.5em;
}
.overview-content .features-banner-swiper .buttons button {
  display: block;
  font-size: 1.5em;
  line-height: 1.5;
  color: #000;
  border: none;
  border-bottom: 2px solid transparent;
  background: unset;
}
.overview-content .features-banner-swiper .buttons button.active {
  border-bottom: 0.1em solid #005eac;
  color: #005eac;
}
.overview-content .features-banner-swiper .swiper {
  position: relative;
}
.overview-content .features-banner-swiper .swiper .swiper-slide {
  height: 50.625em;
  display: flex;
  align-items: center;
}

.overview-content .features-banner-swiper .swiper .slide-1 {
  background: url(./img/h-1.jpg) 50% 100%/120em no-repeat;
}
.overview-content .features-banner-swiper .swiper .slide-2 {
  background: url(./img/h-2.jpg) 50% 100%/120em no-repeat;
}
.overview-content .features-banner-swiper .swiper .slide-3 {
  background: url(./img/h-3.jpg) 50% 100%/120em no-repeat;
}
.overview-content .features-banner-swiper .swiper .slide-4 {
  background: url(./img/h-4.jpg) 50% 100%/120em no-repeat;
}
.overview-content .features-banner-swiper .swiper .slide-5 {
  background: url(./img/h-5.jpg) 50% 100%/120em no-repeat;
}

.overview-content .features-banner-swiper .w-container {
  width: 74.5em;
  margin: 0 auto;
  position: relative;
}
.overview-content .features-banner-swiper .text {
  padding: 0 43em 0 0;
}
.overview-content .features-banner-swiper .text.white {
  color: #fff;
}
.overview-content .features-banner-swiper .text h2 {
  font-size: 2.8125em;
  line-height: 1.2;
  font-weight: 400;
  padding: 0 0 0.5em;
}

.overview-content .features-banner-swiper .text p {
  font-size: 1.125em;
  line-height: 1.5;
  font-weight: 300;
}

.overview-content .features-banner-swiper .text .day {
  padding: 1em 0 0;
}

.overview-content .features-banner-swiper .text .day .num {
  font-size: 5.859375em;
  font-weight: 500;
  line-height: 1;
  color: #005eac;
}

.overview-content .features-banner-swiper .text .day .unit {
  font-size: 3em;
  font-weight: 400;
  line-height: 1;
}

.overview-content .features-banner-swiper .slide-1 .bgText .desc1 {
  position: absolute;
  top: 50%;
  left: 96%;
  transform: translate(0, -50%);
  background: linear-gradient(180deg, #82e8f9, #00a1e9);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 500;
}
.overview-content .features-banner-swiper .slide-1 .bgText .desc1-1 {
  font-size: 6.609375em;
  line-height: 1.2;
  font-weight: 500;
  color: transparent;
}

.overview-content .features-banner-swiper .slide-1 .bgText .desc1-2 {
  font-size: 2.625em;
  line-height: 1.2;
  color: transparent;
}
.overview-content .features-banner-swiper .swiper-pagination {
  position: absolute;
  bottom: 1.5em;
}
@media (min-width: 1921px) {
  .overview-content .features-banner-swiper {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .features-banner-swiper {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .features-banner-swiper {
    font-size: 12px;
  }
}

@media (max-width: 736px) {
  .overview-content .features-banner-swiper {
    font-size: 10.35px;
  }
  .overview-content .features-banner-swiper .buttons {
    display: none;
  }
  .overview-content .features-banner-swiper .w-container {
    width: auto;
  }
  .overview-content .features-banner-swiper .text {
    padding: 0 6% 0;
  }
  .overview-content .features-banner-swiper .text h2 {
    font-size: 2.5em;
    line-height: 1.2;
    font-weight: 400;
    padding: 1.5em 0 0.5em;
  }
  .overview-content .features-banner-swiper .text p {
    font-size: 1.75em;
    line-height: 1.5;
    font-weight: 300;
    padding: 0 0 1em;
  }
  .overview-content .features-banner-swiper .text.white {
    color: #000;
  }
  .overview-content .features-banner-swiper .swiper {
    position: relative;
    padding: 0 0 10vw;
  }
  .overview-content .features-banner-swiper .swiper-pagination {
    bottom: calc(5vw - 10px);
  }
  .overview-content .features-banner-swiper .swiper .swiper-slide {
    height: auto;
    display: block;
    text-align: left;
    padding: 0 0 74vw;
  }

  .overview-content .features-banner-swiper .swiper .slide-1 {
    background: url(./m/h-1.jpg) 50% 100%/88% no-repeat;
  }
  .overview-content .features-banner-swiper .swiper .slide-2 {
    background: url(./m/h-2.jpg) 50% 100%/88% no-repeat;
  }
  .overview-content .features-banner-swiper .swiper .slide-3 {
    background: url(./m/h-3.jpg) 50% 100%/88% no-repeat;
  }
  .overview-content .features-banner-swiper .swiper .slide-4 {
    background: url(./m/h-4.jpg) 50% 100%/88% no-repeat;
  }
  .overview-content .features-banner-swiper .swiper .slide-5 {
    background: url(./m/h-5.jpg) 50% 100%/88% no-repeat;
  }
  .overview-content .features-banner-swiper .text .day {
    padding: 0;
    position: absolute;
    left: 63%;
    bottom: -45vw;
  }

  .overview-content .features-banner-swiper .text .day .num {
    font-size: 15.625vw;
  }

  .overview-content .features-banner-swiper .text .day .unit {
    font-size: 7.8125vw;
  }

  .overview-content .features-banner-swiper .slide-1 .bgText .desc1 {
    top: unset;
    left: 63%;
    bottom: -82vw;
  }
  .overview-content .features-banner-swiper .slide-1 .bgText .desc1-1 {
    font-size: 12.5vw;
  }

  .overview-content .features-banner-swiper .slide-1 .bgText .desc1-2 {
    font-size: 5vw;
  }
}
@media (max-width: 414px) {
  .overview-content .features-banner-swiper {
    font-size: 2.5vw;
  }
}

.overview-content .local-and-cloud-storage {
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
  background: url(./img/i.jpg) 50% 100%/120em no-repeat;
  height: 60em;
  display: flex;
  align-items: center;
}

.overview-content .local-and-cloud-storage .w-container {
  width: 78em;
  margin: 0 auto;
  position: relative;
}

.overview-content .local-and-cloud-storage .text {
  padding: 0 5em 0 48em;
}

.overview-content .local-and-cloud-storage h2 {
  font-size: 2.8125em;
  line-height: 1.2;
  font-weight: 400;
  padding: 0 0 0.25em;
}

.overview-content .local-and-cloud-storage p {
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 300;
}
.overview-content .local-and-cloud-storage .storage .prefix,
.overview-content .local-and-cloud-storage .storage .suffix {
  font-size: 3em;
  line-height: 1.2;
  font-weight: 400;
}

.overview-content .local-and-cloud-storage .storage .num {
  font-size: 5.86em;
  line-height: 1.1;
  font-weight: 700;
  color: #005eac;
}
@media (min-width: 1921px) {
  .overview-content .local-and-cloud-storage {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content,
  .local-and-cloud-storage {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content,
  .local-and-cloud-storage {
    font-size: 12px;
  }
}

@media (max-width: 736px) {
  .overview-content .local-and-cloud-storage {
    background: url(./m/i.jpg) 50% 100%/100% no-repeat;
    padding-bottom: 90vw;
    height: auto;
    font-size: 10.35px;
  }
  .overview-content .local-and-cloud-storage .w-container {
    width: auto;
  }
  .overview-content .local-and-cloud-storage .text {
    width: auto;
    padding: 0 6% 0;
  }
  .overview-content .local-and-cloud-storage h2 {
    font-size: 2.5em;
    line-height: 1.2;
    font-weight: 400;
    padding: 1.5em 0 0.5em;
  }

  .overview-content .local-and-cloud-storage p {
    font-size: 1.75em;
    line-height: 1.5;
    font-weight: 300;
    padding: 0 0 0.25em;
  }
  .overview-content .local-and-cloud-storage .storage .prefix,
  .overview-content .local-and-cloud-storage .storage .suffix {
    font-size: 1.75em;
    line-height: 1.2;
    font-weight: 400;
  }
  .overview-content .local-and-cloud-storage .storage .num {
    font-size: 5.25em;
    line-height: 1.2;
  }
}
@media (max-width: 414px) {
  .overview-content,
  .local-and-cloud-storage {
    font-size: 2.5vw;
  }
}

.overview-content .cards-swiper {
  font-size: 16px;
  margin: 10em auto 0;
  position: relative;
  max-width: 120em;
}

.overview-content .cards-swiper .swiper {
  overflow: hidden;
}
.overview-content .cards-swiper .w-container {
  width: 87.5em;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.overview-content .cards-swiper .text {
  text-align: center;
  padding: 5em 3em;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.overview-content .cards-swiper h2 {
  font-size: 1.96875em;
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 0.5em;
}
.overview-content .cards-swiper .text p {
  font-size: 1.03125em;
  line-height: 1.5;
  padding: 0 4em 2em;
}
.overview-content .cards-swiper .swiper-slide {
  width: 42.1875em;
  opacity: 0.5;
}
.overview-content .cards-swiper .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.overview-content .cards-swiper .swiper-slide img {
  width: 42.1875em;
}
.overview-content .cards-swiper .swiper-slide.swiper-slide-active .text {
  opacity: 1;
}
.overview-content
  .cards-swiper
  .swiper-container-horizontal
  > .swiper-pagination-bullets {
  bottom: 17.5em;
}
.overview-content .cards-swiper .swiper-pagination-bullet {
  width: 0.5em;
  height: 0.5em;
}
@media (min-width: 1921px) {
  .overview-content .cards-swiper {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .cards-swiper {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .cards-swiper {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .overview-content .cards-swiper {
    font-size: 10.35px;
    margin: 0 auto 2em;
  }
  .overview-content .cards-swiper .w-container {
    width: auto;
    position: relative;
    display: block;
  }
  .overview-content .cards-swiper .text {
    padding: 0 6%;
    text-align: left;
  }

  .overview-content .cards-swiper .text h2 {
    font-size: 2.5em;
    line-height: 1.2;
    font-weight: 400;
    padding: 1.5em 0 0.5em;
  }

  .overview-content .cards-swiper .text p {
    font-size: 1.75em;
    line-height: 1.5;
    font-weight: 300;
    padding: 0 0 1em;
  }

  .overview-content .cards-swiper .img-container {
    display: none;
  }
  .overview-content .cards-swiper .swiper-slide {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
  }
  .overview-content .cards-swiper .swiper-slide img {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  .overview-content
    .cards-swiper
    .swiper-container-horizontal
    > .swiper-pagination-bullets {
    bottom: -2em;
  }

  .overview-content .cards-swiper .swiper-pagination-bullet {
    margin: 0 4px;
    width: 8px;
    height: 8px;
  }
}
@media (max-width: 414px) {
  .overview-content .cards-swiper {
    font-size: 2.5vw;
  }
}

.overview-content .precise-positioning {
  font-size: 16px;
  margin: 0 auto 10em;
  position: relative;
  max-width: 120em;
}

.overview-content .precise-positioning .w-container {
  width: 73.125em;
  margin: 0 auto;
}

.overview-content .precise-positioning .text {
  text-align: center;
  padding: 0 0 3.5em;
}

.overview-content .precise-positioning h2 {
  font-size: 2.8125em;
  line-height: 1.2;
  font-weight: 400;
  padding: 0 0 0.25em;
}

.overview-content .precise-positioning p {
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 300;
}

.overview-content .precise-positioning .bg {
  width: auto;
}
.overview-content .precise-positioning .bg img {
  display: block;
  width: 100%;
}
@media (min-width: 1921px) {
  .overview-content .precise-positioning {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .precise-positioning {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .precise-positioning {
    font-size: 12px;
  }
}

@media (max-width: 736px) {
  .overview-content .precise-positioning {
    font-size: 10.35px;
    margin: 0 auto;
  }
  .overview-content .precise-positioning .w-container {
    width: auto;
    padding: 0 6%;
  }
  .overview-content .precise-positioning .text {
    padding: 0 0 2em;
    text-align: left;
  }
  .overview-content .precise-positioning h2 {
    font-size: 2.5em;
    line-height: 1.2;
    font-weight: 400;
    padding: 1.5em 0 0.5em;
  }
  .overview-content .precise-positioning p {
    font-size: 1.75em;
    line-height: 1.5;
    font-weight: 300;
    padding: 0;
  }
}
@media (max-width: 414px) {
  .overview-content .precise-positioning {
    font-size: 2.5vw;
  }
}

.overview-content .flexible-installation {
  font-size: 16px;
  margin: 0 auto 10em;
  position: relative;
  max-width: 120em;
}

.overview-content .flexible-installation .w-container {
  width: 73.125em;
  margin: 0 auto;
}

.overview-content .flexible-installation .text {
  text-align: center;
  padding: 0 0 3.5em;
}

.overview-content .flexible-installation h2 {
  font-size: 2.8125em;
  line-height: 1.2;
  font-weight: 400;
  padding: 0 0 0.25em;
}

.overview-content .flexible-installation p {
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 300;
}

.overview-content .flexible-installation .cards {
  display: grid;
  grid-template: auto/0.46fr 0.54fr;
  gap: 2.9em;
}

.overview-content .flexible-installation .card .img-container {
  width: 100%;
  margin: 0 auto 2em;
}

.overview-content .flexible-installation .card img {
  display: block;
  width: 100%;
}

.overview-content .flexible-installation .card .img-text {
  text-align: left;
  padding-right: 5em;
}

.overview-content .flexible-installation .card-2 .img-text {
  padding-left: 2em;
}

.overview-content .flexible-installation .card .img-text h3 {
  font-size: 1.96875em;
  line-height: 1.619048;
  font-weight: 400;
}

.overview-content .flexible-installation .card .img-text p {
  font-size: 1.03125em;
  line-height: 1.545455;
  font-weight: 300;
}
@media (min-width: 1921px) {
  .overview-content .flexible-installation {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .overview-content .flexible-installation {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .overview-content .flexible-installation {
    font-size: 12px;
  }
}

@media (max-width: 736px) {
  .overview-content .flexible-installation {
    font-size: 10.35px;
    margin: 0 auto 2em;
  }
  .overview-content .flexible-installation .w-container {
    width: auto;
    padding: 0 6%;
  }
  .overview-content .flexible-installation .text {
    text-align: left;
    padding: 0 0 1em;
  }
  .overview-content .flexible-installation h2 {
    font-size: 2.5em;
    line-height: 1.2;
    font-weight: 400;
    padding: 1.5em 0 0.5em;
  }

  .overview-content .flexible-installation p {
    font-size: 1.75em;
    line-height: 1.5;
    font-weight: 300;
    padding: 0;
  }
  .overview-content .flexible-installation .cards {
    grid-template: auto/1fr;
    gap: 2em;
  }
  .overview-content .flexible-installation .card{
    display: flex;
    flex-direction: column-reverse;
  }
  .overview-content .flexible-installation .card .img-text {
    padding: 0 0 1em;
  }

  .overview-content .flexible-installation .card-2 .img-text {
    padding-left: 0;
  }

  .overview-content .flexible-installation .card .img-text h3 {
    font-size: 2.125em;
    line-height: 1.5;
    font-weight: 400;
    padding: 0 0 0.25em;
  }

  .overview-content .flexible-installation .card .img-text p {
    font-size: 1.5em;
    line-height: 1.428571;
    font-weight: 300;
  }
}
@media (max-width: 414px) {
  .overview-content .flexible-installation {
    font-size: 2.5vw;
  }
}