/* With MSI Eye Care Technology*/

  .eyeBgimg img{
      max-width: 100%;
      height: auto;
  }
      .eyecare {
          padding: 1em 0;
      }
      .eyecare .title--main {
          text-transform: capitalize;
          color: #222222;
      }
      .eyecare__nv {
          position: initial;
          text-align: center;
          top: auto;
          left: auto;
          width: 100%;
          margin-top: 2%
      }
      .eyecare__nvbox .slick-track {
          -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
      }

      .eyecare__nvbox .slick-track .slick-slide {
            width: 100% !important;
          }
      .eyecare__nvbox--btn {
          cursor: pointer;
          font-size: var(--text-xs);
          display: block;
          padding: 8px;
          font-weight: bold;
          color: #000000;
          margin: 3px;
          box-shadow: inset 0px 2px 12px #c7c7c7;
          border: 4px solid #f1f1f1;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.3);
          min-width: 98%;
          clear: both;
          max-width: 95%;
      }
      .eyecare__nvbox--btn:hover{
          background: rgba(255, 255, 255, 1);
      }
      .eyecare__nvbox .slick-current .eyecare__nvbox--btn {
        background: rgba(255, 255, 255, 1);
      }
      .eyecare__icon {
          text-align: center;
          margin-bottom: 10px;
      }
      .eyecare__icon img {
          max-width: 180px;
      }
      .eyecare__block--img {
          margin: 0 auto;
      }
      .eyecare__wrap {
          position: relative;
      }
      .eyecare__flex {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
      }
      .eyecare__block-flex {
          position: initial;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          width: 100%;
          padding: 2%;
          z-index: 1;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
      }
      .eyecare__icon {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
      }
      .eyecare__block-itembox {
          width: 50%;
          position: relative;
      }
      .eyecare__block-itembox::before {
          content: "";
          display: block;
          background: url(https://storage-asset.msi.com/global/picture/image/feature/monitor/PRO/PRO-MP2422C/aw-icon.png) no-repeat;
          width: 30px;
          height: 100%;
          position: absolute;
          left: 15%;
          top: -50px;
          background-size: contain;
      }
      .eyecare__slickbox {
          width: 50%;
      }
      .eyecare__textbox {
          width: 100%;
          text-align: center;
      }
      .eyecare__textbox p {
          font-size: var(--title-xs);
      }
      .pd-block .eyecare__textbox .title--main {
          font-size: var(--title-lg);
      }
      .eyecare__block-icon {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          width: auto;
          margin-top: 2%;
          max-width: 200px
      }
      .eyecare__block-icon figure {
          margin: 0 5px;
      }
      .eyecare__txtbox {
          position: relative;
      }
      .eyecare__txtbox .eyecare__txt {
          position: initial;
          bottom: auto;
          background: none;
          padding: 10px;
          margin: 10px;
          left: 0;
          width: calc(100% - 25px);
          display: none;
      }
      .eyecare__leftxt {
          position: initial;
          bottom: auto;
          background: none;
          padding: 10px;
          margin: 10px;
          display: none;
          left: auto;
          line-height: 1.5;
          width: calc(100% - 25px);
      }
      .eyecare__slickWrap {
          position: relative;
      }
      @media (min-width: 768px) {
      
          .eyecare__block-itembox::before {
              content: "";
              display: block;
              background: url(https://storage-asset.msi.com/global/picture/image/feature/monitor/PRO/PRO-MP2422C/aw-icon.png) no-repeat;
              width: 30px;
              height: 100%;
              position: absolute;
              left: 50%;
              top: -50px;
              background-size: contain;
          }
      }
      @media (min-width: 996px) {
            .eyecare .title--main {
              color: #fff;
          }
          .eyecare__nvbox .slick-track .slick-slide {
            width: calc(100% / 3) !important;
          }
          .eyecare__txtbox .eyecare__txt {
              position: absolute;
              bottom: 2%;
              background: rgba(255, 255, 255, 0.7);
              padding: 10px;
              margin: 10px;
              left: 0;
              width: calc(100% - 25px);
          }
          .eyecare__leftxt {
              position: absolute;
              bottom: 2%;
              background: rgba(255, 255, 255, 0.7);
              padding: 10px;
              margin: 10px;
              display: none;
              left: auto;
              line-height: 1.5;
              width: calc(100% - 25px);
          }
          .eyecare__nv {
              position: absolute;
              text-align: center;
              top: 3%;
              left: 50%;
              width: 50%;
              margin-top: auto;
          }
          .eyecare__nvbox--btn {
              font-size: var(--text-xs);
              clear: none;
              min-width: auto;
              display: inline-block;
          }
          .eyecare__block-flex {
              position: absolute;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: space-between;
              width: calc(50% - 25px);
              padding: 2%;
              -webkit-box-orient: vertical;
              -webkit-box-direction: normal;
              -ms-flex-direction: initial;
              flex-direction: initial;
          }
          .eyecare__textbox {
              text-align: left;
              width: 70%;
          }
          .eyecare__block-icon {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: center;
              width: 28%;
              margin-top: 2%;
          }
          .eyecare__block-itembox::before {
              content: "";
              display: none;
          }
      }
      @media (min-width: 1300px) {
          .eyecare__block-flex {
              width: 50%;
          }
      }



.slick-track .slick-slide {
  -webkit-user-select: text;
    -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.slick-track .slick-slide.draggable {
  -webkit-user-select: none;
    -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.eyesErgoTech {
  padding: 0px 0 10px;
}
.eyesErgoTech__txtbox {
  margin-bottom: 25px;
  text-align: center;
}
.eyesErgoTech__titlebox {
  margin-bottom: 25px;
}
.eyesErgoTech__titlebox figure {
  width: 70%;
  margin: 0 auto;
}
/* .eyesErgoTech .title--sub {
  font-size: var(--block-title-sm);
} */
@media (min-width: 996px) {
  /* .eyesErgoTech .title--sub {
    font-size: var(--block-title-md);
  } */
  .eyesErgoTech__txtbox {
    margin-bottom: 25px;
    /*padding: 0 60px;*/
    text-align: left;
  }
  .eyesErgoTech__txtbox figure {
    width: 30%;
    margin: 0;
  }
}

/*-- main nav --*/
.eyesErgoTechNav {
  width: 100%;
  margin: 10px 0;
}
.eyesErgoTechNav .slick-initialized .slick-slide {
  display: inline-block !important;
  width: auto !important;
}
.eyesErgoTechNav .slick-slide {
  text-align: center;
}
.eyesErgoTechNav .slick-slide figure {
  width: 98% !important;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  background: #e2e2e2;
  color: #737479;
  padding: 10px;
  border-radius: 99em;
  border: 1px solid #737479;
  font-size: calc(var(--block-title-sm) * 0.75);
  
}
.eyesErgoTechNav .slick-slide.slick-current figure {
  border: 1px solid #4694D1;
  color: #4694D1;
  background: #fff;
}

@media (min-width: 996px) {
  .eyesErgoTechNav {
    width: 50%;
    margin: 25px 0;
  }
  .eyesErgoTechNav .slick-slide {
    text-align: left;
  }
  .eyesErgoTechNav .slick-slide figure {
    font-size: calc(var(--block-title-sm));
    width: 90% !important;
  }
}

/*-- eyeqcheck --*/
.eyeqcheck {
  background: transparent;
  border-radius: 10px;
}
/* }
.eyeqcheck .slick-slide {
  border-radius: 10px;
}
.eyeqcheck .slick-slide li {
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  color: #666;
  font-weight: normal;
}
.eyeqcheck .slick-slide li:hover {
  color: #000;
}
.eyeqcheck .slick-current li {
  color: #000;
  font-weight: bolder;
}
.eyeqcheck .slick-current li:hover {
  color: #000;
}
.eyeqcheck .slick-prev, .eyeqcheck .slick-next {
  width: 60px;
  height: 60px;
  z-index: 3;
}
.eyeqcheck .slick-prev {
  left: -5%;
}
.eyeqcheck .slick-prev::before {
  font-size: 60px;
  font-family: Arial, Helvetica, sans-serif;
  content: "‹";
  color: #333;
}
.eyeqcheck .slick-next {
  right: -5%;
}
.eyeqcheck .slick-next::before {
  font-size: 60px;
  font-family: Arial, Helvetica, sans-serif;
  content: "›";
  color: #333;
} */

.eyeqcheck .slick-dots  {
  bottom: 10px;
}
.eyeqcheck__box--flex {
  width: 90%;
  margin: 25px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 25px;
}
.eyeqcheck__box--txtbox {
  text-align: center;
  width: 100%;
  margin: 0px auto 25px ;
}
/* .eyeqcheck__box--txtbox .title--sub {
  font-size: var(--block-title-sm);
} */
@media (min-width: 996px) {
  .eyeqcheck__box--flex {
    width: 70%;
  }
  /* .eyeqcheck__box--txtbox {
    text-align: left;
    width: 90%;
    margin: 25px auto;
  } */
  /* .eyeqcheck__box--txtbox .title--sub {
    font-size: var(--block-title-md);
  } */
}

/* adjust style for daily use monitor */
        
                  .contentItem__pd {
                    position: absolute;
                    top: 18%;
                    right: -3%;
                    z-index: 2;
                    width: 30%;
                  }
                
                  .contentItem__pd-l {
                    position: absolute;
                    -webkit-transition: 0.3s ease-in-out;
                    transition: 0.3s ease-in-out;
                  }
                
                  .contentItem__pd-m {
                    position: absolute;
                    -webkit-transition: 0.3s ease-in-out;
                    transition: 0.3s ease-in-out;
                  }
                
                  .contentItem__pd-r {
                    position: absolute;
                    -webkit-transition: 0.3s ease-in-out;
                    transition: 0.3s ease-in-out;
                  }
                
                  .delighter.contentItem-am.started {
                    animation: contentItem-img 3s ease 1;
                  }
                
                  .delighter.contentItem-ar.started {
                    animation: contentItem-img1 5.5s ease 1;
                  }
                
                  @media (min-width: 768px) {
                    .ergonomic__nav {
                      width: 100%;
                      max-width: 1280px;
                      padding: 0 25px;
                    }
                    .contentItem__pd-t {
                      top: 0.5%;
                    }
                  }
                
                  @media (min-width: 996px) {
                    .ergonomic__nav {
                      width: 100%;
                      max-width: 1000px;
                      padding: 0 25px;
                    }
                    .ergonomic__title p {
                      width: 70%;
                      margin: 0 auto;
                    }
                    .contentItem__pd {
                    }
                    .contentItem__pd-t {
                      top: 0;
                    }
                  }
                
                  #adjustable-stand {
                    padding: 5% 0;
                  }
                  #adjustable-stand .pd {
                    display: inline-block;
                    margin: 2% auto;
                    width: calc(100% / 2 - 5px);
                  }
                
                  #adjustable-stand .pd:nth-child(3) {
                    width: 24%;
                  }
                
                  .pd__flexbox {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    -webkit-box-align: flex-end;
                    -ms-flex-align: flex-end;
                    align-items: flex-end;
                    -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                    margin-top: 5%;
                  }
                
                  #adjustable-stand .img {
                    position: relative;
                    z-index: 1;
                    margin: auto;
                    width: 100%;
                  }
                
                  #adjustable-stand .img-z {
                    position: absolute;
                    z-index: 10;
                    margin: auto;
                    width: 100%;
                    left: 0;
                    top: 0;
                  }
                
                  #adjustable-stand p {
                    text-align: center;
                  }
                
                  #adjustable-stand .imgbox {
                    /* width: 80%; */
                    margin: 0 auto;
                    max-width: auto;
                    position: relative;
                    margin-bottom: 20px;
                  }
                
                  #adjustable-stand .imgbox .img-mnt {
                    position: absolute;
                    width: 100%;
                    left: 0;
                    z-index: 2;
                    height: 100%;
                  }
                  #adjustable-stand .imgbox .img-mnt img {
                    width: 100%;
                  }
                
                  #adjustable-stand .imgbox1 {
                    perspective: 500px;
                  }
                
                  #adjustable-stand .imgbox1 .img-mnt {
                    top: 0%;
                    left: 0;
                    -webkit-animation: 5s rotate ease infinite;
                    animation: 5s rotate ease infinite;
                    transform-origin: 50% 35%;
                  }
                
                  #adjustable-stand .imgbox2 .img-mnt {
                    transform-origin: center;
                    -webkit-animation: 5s mntbox2 ease infinite;
                    animation: 5s mntbox2 ease infinite;
                  }
                
                  #adjustable-stand .imgbox3 .img-mnt {
                    -webkit-animation: 5s mntbox3 ease infinite;
                    animation: 5s mntbox3 ease infinite;
                    top: -10%;
                    transform-origin: center center;
                  }
                
                  #adjustable-stand .imgbox4 .img-mnt {
                    -webkit-animation: 5s mntbox4 ease infinite;
                    animation: 5s mntbox4 ease infinite;
                    left: 2px;
                    top: 0;
                  }
                
                  .product-mainbox .pd-container,
                  .product-mainbox .declare-wrap,
                  .product-mainbox .container {
                    align-items: baseline;
                  }
                
                  #adjustable-stand .pd-text {
                    display: initial;
                  }
                
                  @media screen and (min-width: 600px) {
                    .pd__flexbox {
                      -ms-flex-wrap: nowrap;
                      flex-wrap: nowrap;
                    }
                    #adjustable-stand .pd:nth-child(3) {
                      -webkit-box-flex: 0;
                      -ms-flex: 0 0 12%;
                      flex: 0 0 12%;
                      width: auto;
                    }
                    #adjustable-stand .pd {
                      width: auto;
                      -webkit-box-flex: 0;
                      -ms-flex: 0 0 22%;
                      flex: 0 0 22%;
                    }
                    #adjustable-stand .pd-text {
                      display: block;
                    }
                  }
                
                  @media screen and (min-width: 850px) {
                    #adjustable-stand .pd-text {
                      display: initial;
                    }
                  }
                
                  @media screen and (min-width: 996px) {
                    .pd__flexbox {
                      margin-top: 0;
                    }
                    #adjustable-stand .pd {
                      -webkit-box-flex: 0;
                      -ms-flex: 0 0 20%;
                      flex: 0 0 20%;
                      position: relative;
                      -webkit-box-orient: vertical;
                      -webkit-box-direction: normal;
                      -ms-flex-direction: column;
                      flex-direction: column;
                      -webkit-box-pack: justify;
                      -ms-flex-pack: justify;
                      justify-content: center;
                    }
                    #adjustable-stand .pd:nth-child(3) {
                      -webkit-box-flex: 0;
                      -ms-flex: 0 0 9%;
                      flex: 0 0 9%;
                      width: auto;
                    }
                  }
                
                  @-webkit-keyframes mntbox1 {
                    0% {
                      -webkit-transform: rotateY(0deg);
                      transform: rotateY(0deg);
                    }
                    10% {
                      -webkit-transform: rotateY(10deg);
                      transform: rotateY(10deg);
                    }
                    30% {
                      -webkit-transform: rotateY(10deg);
                      transform: rotateY(10deg);
                    }
                    40% {
                      -webkit-transform: rotateY(0deg);
                      transform: rotateY(0deg);
                    }
                    50% {
                      -webkit-transform: rotateY(0deg);
                      transform: rotateY(0deg);
                    }
                    60% {
                      -webkit-transform: rotateY(-10deg);
                      transform: rotateY(-10deg);
                    }
                    80% {
                      -webkit-transform: rotateY(-10deg);
                      transform: rotateY(-10deg);
                    }
                    90% {
                      -webkit-transform: rotateY(0deg);
                      transform: rotateY(0deg);
                    }
                    100% {
                      -webkit-transform: rotateY(0deg);
                      transform: rotateY(0deg);
                    }
                  }
                
                  @keyframes mntbox1 {
                    0% {
                      -webkit-transform: rotateY(0deg);
                      transform: rotateY(0deg);
                    }
                    10% {
                      -webkit-transform: rotateY(10deg);
                      transform: rotateY(10deg);
                    }
                    30% {
                      -webkit-transform: rotateY(10deg);
                      transform: rotateY(10deg);
                    }
                    40% {
                      -webkit-transform: rotateY(0deg);
                      transform: rotateY(0deg);
                    }
                    50% {
                      -webkit-transform: rotateY(0deg);
                      transform: rotateY(0deg);
                    }
                    60% {
                      -webkit-transform: rotateY(-10deg);
                      transform: rotateY(-10deg);
                    }
                    80% {
                      -webkit-transform: rotateY(-10deg);
                      transform: rotateY(-10deg);
                    }
                    90% {
                      -webkit-transform: rotateY(0deg);
                      transform: rotateY(0deg);
                    }
                    100% {
                      -webkit-transform: rotateY(0deg);
                      transform: rotateY(0deg);
                    }
                  }
                
                  @-webkit-keyframes mntbox2 {
                    0% {
                      top: 8%;
                    }
                    50% {
                      top: 12%;
                    }
                    100% {
                      top: 8%;
                    }
                  }
                
                  @keyframes mntbox2 {
                    0% {
                      top: 8%;
                    }
                    50% {
                      top: 12%;
                    }
                    100% {
                      top: 8%;
                    }
                  }
                
                  @-webkit-keyframes mntbox3 {
                    0% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                      left: 0;
                      top: 5%;
                    }
                    30% {
                      -webkit-transform: rotate(90deg) scale(0.9);
                      transform: rotate(90deg) scale(0.9);
                      left: -17%;
                      top: -5%;
                    }
                    40% {
                      -webkit-transform: rotate(90deg) scale(0.9);
                      transform: rotate(90deg) scale(0.9);
                      left: -17%;
                      top: -5%;
                    }
                    50% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                      left: 0%;
                      top: 5%;
                    }
                    60% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                      left: 0%;
                      top: 5%;
                    }
                    80% {
                      -webkit-transform: rotate(-90deg) scale(0.9);
                      transform: rotate(-90deg) scale(0.9);
                      left: 17%;
                      top: -5%;
                    }
                    90% {
                      -webkit-transform: rotate(-90deg) scale(0.9);
                      transform: rotate(-90deg) scale(0.9);
                      left: 17%;
                      top: -5%;
                    }
                    100% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                      left: 0;
                      top: 5%;
                    }
                  }
                
                  @keyframes mntbox3 {
                    0% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                      left: 0;
                      top: 5%;
                    }
                    30% {
                      -webkit-transform: rotate(90deg) scale(0.9);
                      transform: rotate(90deg) scale(0.9);
                      left: -17%;
                      top: -5%;
                    }
                    40% {
                      -webkit-transform: rotate(90deg) scale(0.9);
                      transform: rotate(90deg) scale(0.9);
                      left: -17%;
                      top: -5%;
                    }
                    50% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                      left: 0%;
                      top: 5%;
                    }
                    60% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                      left: 0%;
                      top: 5%;
                    }
                    80% {
                      -webkit-transform: rotate(-90deg) scale(0.9);
                      transform: rotate(-90deg) scale(0.9);
                      left: 17%;
                      top: -5%;
                    }
                    90% {
                      -webkit-transform: rotate(-90deg) scale(0.9);
                      transform: rotate(-90deg) scale(0.9);
                      left: 17%;
                      top: -5%;
                    }
                    100% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                      left: 0;
                      top: 5%;
                    }
                  }
                
                  @-webkit-keyframes mntbox4 {
                    0% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                    }
                    50% {
                      -webkit-transform: rotate(8deg);
                      transform: rotate(8deg);
                    }
                    100% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                    }
                  }
                
                  @-webkit-keyframes contentItem-img {
                    0% {
                      opacity: 0;
                    }
                    100% {
                      opacity: 1;
                    }
                  }
                
                  @keyframes contentItem-img {
                    0% {
                      opacity: 0;
                    }
                    100% {
                      opacity: 1;
                    }
                  }
                
                  @-webkit-keyframes contentItem-img1 {
                    0%,
                    20% {
                      opacity: 0;
                    }
                    100% {
                      opacity: 1;
                    }
                  }
                
                  @keyframes contentItem-img1 {
                    0%,
                    20% {
                      opacity: 0;
                    }
                    100% {
                      opacity: 1;
                    }
                  }
                  @-webkit-keyframes rotate {
                    0% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                    }
                    25% {
                      -webkit-transform: rotate(45deg);
                      transform: rotate(45deg);
                    }
                    50% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                    }
                    75% {
                      -webkit-transform: rotate(-45deg);
                      transform: rotate(-45deg);
                    }
                    100% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                    }
                  }
                
                  @keyframes rotate {
                    0% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                    }
                    25% {
                      -webkit-transform: rotate(45deg);
                      transform: rotate(45deg);
                    }
                    50% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                    }
                    75% {
                      -webkit-transform: rotate(-45deg);
                      transform: rotate(-45deg);
                    }
                    100% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                    }
                  } 


                  /* kvm */
      
                  .kvm {
                      margin: 30px 0 20px;
                      text-align: center;
                    }
                  .kvm__title{  padding: 2% 0 1%;}
                  .kvm__content {
                    background: url(https://storage-asset.msi.com/global/picture/image/feature/monitor/PRO/PRO-MP245PHG-E14/kvm-bg.jpg) no-repeat bottom;
                    background-size: cover;
                    padding: 3% 0 0 0;
                    max-width: 900px;
                    margin: 0 auto;
                  }
                  .kvm button {
                    padding: 6px 25px;
                    background: #000;
                    color: #c074f9;
                    -webkit-box-shadow: 0 0 5px #c074f9, 0 0 10px #c074f9;
                            box-shadow: 0 0 5px #c074f9, 0 0 10px #c074f9;
                    border-radius: 30px;
                    display: block;
                    margin: 0 auto;
                    font-weight: bold;
                    -webkit-transition: all 0.3s ease;
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;
                    cursor: pointer;
                  }
                  .kvm button:hover {
                    -webkit-transform: translateY(-2px);
                            transform: translateY(-2px);
                    -webkit-box-shadow: 0 0 15px #c074f9, 0 0 20px #c074f9;
                            box-shadow: 0 0 15px #c074f9, 0 0 20px #c074f9;
                  }
                  .kvm button:active {
                    -webkit-transform: translateY(1px);
                            transform: translateY(1px);
                  }
                  .kvm button::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 5px;
                    height: 5px;
                    background: rgba(255, 255, 255, 0.5);
                    opacity: 0;
                    border-radius: 100%;
                    -webkit-transform: scale(1, 1) translate(-50%, -50%);
                            transform: scale(1, 1) translate(-50%, -50%);
                    -webkit-transform-origin: 50% 50%;
                            transform-origin: 50% 50%;
                    -webkit-animation: ripple 2s ease-out infinite;
                            animation: ripple 2s ease-out infinite;
                  }
                  @-webkit-keyframes ripple {
                    0% {
                      -webkit-transform: scale(0, 0);
                              transform: scale(0, 0);
                      opacity: 0.5;
                    }
                    100% {
                      -webkit-transform: scale(20, 20);
                              transform: scale(20, 20);
                      opacity: 0;
                    }
                  }
                  @keyframes ripple {
                    0% {
                      -webkit-transform: scale(0, 0);
                              transform: scale(0, 0);
                      opacity: 0.5;
                    }
                    100% {
                      -webkit-transform: scale(20, 20);
                              transform: scale(20, 20);
                      opacity: 0;
                    }
                  }
                  .kvm button.active {
                    -webkit-box-shadow: 0 0 5px #f9c574, 0 0 10px #f9c574;
                            box-shadow: 0 0 5px #f9c574, 0 0 10px #f9c574;
                    color: #f9c574;
                  }
                  .kvm button.active:hover {
                    -webkit-box-shadow: 0 0 15px #f9c574, 0 0 20px #f9c574;
                            box-shadow: 0 0 15px #f9c574, 0 0 20px #f9c574;
                  }
                  .kvm__img {
                    width: 100%;
                    position: relative;
                    margin: 1.5% auto 0;
                    display: none;
                  }
                  .kvm__img.active {
                    display: block;
                  }
                  @media (min-width: 996px) {
                    .kvm__img {
                      width: 90%;
                    }
                  }
                  @media (min-width: 1300px) {
                    .kvm__img {
                      width: 69%;
                    }
                  }
                  .kvm__img p {
                    position: absolute;
                    font-weight: bold;
                    top: 23%;
                    left: 16%;
                    text-shadow: 0 0 5px #c074f9, 0 0 10px #c074f9, 0 0 20px #c074f9;
                    font-size: 10px;
                  }
                  @media (min-width: 996px) {
                    .kvm__img p {
                      font-size: 16px;
                    }
                  }
                  @media (min-width: 1930px) {
                    .kvm__img p {
                      font-size: 20px;
                    }
                  }
                  .kvm__img.img02 p {
                    top: 45%;
                    text-shadow: 0 0 5px #f9c574, 0 0 10px #f9c574, 0 0 20px #f9c574;
                    text-align: center;
                    left: 78%;
                  }

                  /* connecting */
     
                  .connecting {
                      display: block;
                      width: 100%;
                      margin: 0 auto;
                      padding: 20px 0;
                  }
                  .connecting__flex {
                      display: -webkit-box;
                      display: -ms-flexbox;
                      display: flex;
                      -webkit-box-orient: vertical;
                      -webkit-box-direction: reverse;
                      -ms-flex-direction: column-reverse;
                      flex-direction: column-reverse;
                      -webkit-box-align: center;
                      -ms-flex-align: center;
                      align-items: center;
                  }
                  @media (min-width: 996px) {
                      .connecting__flex {
                          -webkit-box-orient: horizontal;
                          -webkit-box-direction: normal;
                          -ms-flex-direction: row;
                          flex-direction: row;
                      }
                  }
                  .connecting__txt {
                      display: block;
                      width: 100%;
                      text-align: center;
                      padding: 0 20px;
                      margin: 20px 0;
                  }
                  @media (min-width: 996px) {
                      .connecting__txt {
                          width: 30%;
                          text-align: left;
                          margin: 0;
                      }
                  }
                  .connecting__img {
                      display: block;
                      width: 100%;
                      margin: 0 auto;
                      position: relative;
                      z-index: 0;
                  }
                  @media (min-width: 996px) {
                      .connecting__img {
                          width: 70%;
                          max-width: 500px;
                      }
                  }
                  .connecting__img .osdTxt {
                      position: absolute;
                      top: 50%;
                      left: 20%;
                  }
                  .connecting__img .osdTxt h3 {
                      color: #b1c0cf;
                  }
                  .connecting__img .finger,
                  .connecting__img .connetIcon,
                  .connecting__img .linkOn {
                      display: block;
                      position: absolute;
                      z-index: 5;
                      left: 0;
                      top: 0;
                      width: 100%;
                      /* visibility: hidden; */
                  }
                 /*popup*/
                 .connecting__txt-popupicon {
            width: 40px;
            height: 40px;
            margin: 20px auto -20px;
          }
          .connecting__txt-popupicon img {
            -webkit-animation: popupbtn 0.8s linear infinite alternate;
                    animation: popupbtn 0.8s linear infinite alternate;
          }
          @media (min-width: 996px) {
             .connecting__txt-popupicon {
              width: 50px;
              height: 50px;
              margin: 20px 0;
            } 
          }
          
          .connecting__img {
            display: block;
            width: 100%;
            margin: 0 auto;
            position: relative;
            z-index: 0;
          }
          @media (min-width: 996px) {
            .connecting__img {
              width: 70%;
            }
          }
          .connecting__img .finger, .connecting__img .connetIcon, .connecting__img .linkOn {
            display: block;
            position: absolute;
            z-index: 5;
            left: 0;
            top: 0px;
            width: 100%;
            /* visibility: hidden; */
          }
       
.slick-dots {
  position: relative;
  margin-top: 0;
}
.slick-dots li {
  width: 40px;
}
.slick-dots li button:before {
  content: "";
  width: 40px;
  height: 5px;
  background-color: #5f3763;
}
.slick-prev, .slick-next {
  top: unset;
  bottom: 40%;
  z-index: 50;
}

.slick-next {
  right: -1%;
}

.slick-prev {
  left: -1%;
}

.slick-prev:before {
  content: '';
  background: url(https://storage-asset.msi.com/event/2023/CND/best-monitor-for-gaming/images/prev.png) center center no-repeat;
  background-size: contain;
  filter: brightness(0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
}

.slick-next:before {
  content: '';
  background: url(https://storage-asset.msi.com/event/2023/CND/best-monitor-for-gaming/images/next.png) center center no-repeat;
  background-size: contain;
  filter: brightness(0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
}


.slick-prev:before, .slick-next:before {
  color: #3b383b;
  opacity: 0.9;
  font-size: 30px;
}

.dailyUseMonitor .slick-dots li button:before {
  content: "";
  width: 40px;
  height: 5px;
  background-color: #504e49;
}