.pd__tab {
  text-align: center;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.pd__tab li {
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: inline-block;
  margin: 3px;
  padding: 10px;
  cursor: pointer;
  background-color: #f3f2f7;
}

.pd__tab li:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

.pd__tab li:hover,
.pd__tab li.active {
  background: #ecce88;
  color: #8a2619;
}

.pd__tab li img,
.pd__tab li i {
  display: none;
}

.pd__tab li span {
  font-size: 14px;
  line-height: 1;
  font-weight: bold;
}

.pd__note {
  text-align: center;
  font-weight: bold;
  color: #ffd678;
  font-size: 16px;
}

@media (min-width: 996px) {
  .pd__tab {
    text-align: center;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  .pd__tab li {
    width: 120px;
    height: 120px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-radius: 10px;
    -webkit-box-shadow: #ccc 0 0 20px;
    box-shadow: #ccc 0 0 20px;
    padding: 10px;
    background-color: #3a6e62;
    color: #ffffff;
  }
  .pd__tab li span {
    display: block;
    font-size: 15px;

  
  }
  .pd__tab li i {
    font-size: 60px;
    display: block;
    padding-bottom: 10px;
    
  }
  .pd__tab li img {
    display: block;
    width: 70px;
  }
}

.pdline {
  position: relative;
  padding: 45px 0;
  display: none;
}

.pdline.active {
  display: block;
}

/* @media (min-width: 996px) {
  .pdline {
    padding-right: 50px;
  }
} */

.pdtag__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-bottom: 25px;
}

@media (min-width: 996px) {
  .pdtag__tab {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
  }
}

.pdtag__tab li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #ededed;
  border-radius: 5px;
  padding: 5px 10px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  /* width: calc(20% - 4px); */
  margin: 2px;
}

.pdtag__tab li:hover,
.pdtag__tab li.active {
  background: #ffdd50;
  text-shadow: #fff 1px 1px 3px;
}

@media (min-width: 996px) {
  .pdtag__tab li {
    margin-right: 10px;
    padding: 10px;
    width: auto;
  }
  .pdtag__tab li:last-child {
    margin-right: 0;
  }
}

.pdtag__img {
  text-align: center;
}

.pdtag__img img {
  display: none;
  width: 80%;
  margin: 0 auto;
}

.pdtag__img img:focus {
  background: none;
}

.pdtag__img img.active {
  display: block;
}

.pdtag__box {
  position: relative;
  padding: 0 20px;
}

.pdtag-arrow {
  position: absolute;
  top: 40%;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  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;
}

.pdtag-arrow:hover {
  /* background: #999; */
}

.pdtag-arrow::before {
  font-family: "msi-icons";
}

.pdtag-prev {
  left: -30px;
}

.pdtag-prev::before {
  /* content: "\ea10"; */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  background: url(https://storage-asset.msi.com/event/2025/ID/Back_To_School_2025/images/pd-arrow-left.png)
    no-repeat;
  background-size: contain;
  width: 8vw;
  height: 8vw;
}

.pdtag-prev:hover::before {
  /* content: "\ea10"; */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  background: url(https://storage-asset.msi.com/event/2025/ID/Back_To_School_2025/images/pd-arrow-left-hover.png)
    no-repeat;
  background-size: contain;
  width: 8vw;
  height: 8vw;
}

.pdtag-next {
  right: -30px;
}

.pdtag-next::before {
  /* content: "\ea09"; */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  background: url(https://storage-asset.msi.com/event/2025/ID/Back_To_School_2025/images/pd-arrow-right.png)
    no-repeat;
  background-size: contain;
  width: 8vw;
  height: 8vw;
}

.pdtag-next:hover::before {
  /* content: "\ea09"; */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  background: url(https://storage-asset.msi.com/event/2025/ID/Back_To_School_2025/images/pd-arrow-right-hover.png)
    no-repeat;
  background-size: contain;
  width: 8vw;
  height: 8vw;
}

.pdtag__list {
  position: relative;
}

.pdtag__list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: #ffffff;
  padding: 10px;
  /* border-bottom: #ddd 1px solid; */
  font-size: 16px;
  background-color: #347263;
  margin-bottom: 10px;
}

.pdtag__list a:hover {
  background: #ffd285;
  color: #a53a24;
}
.pdtag__list a:nth-last-of-type(1) {
  border-bottom: 0;
}
.pdtag__list a.pdtag__list--title {
  pointer-events: none;
  background-color: transparent;
  font-weight: bold;
  color: #ffffff;
}

.pdtag__list a.pdtag__list--title:hover {
  background: none;
  -webkit-transform: none;
  transform: none;
}
.pdtag__list a b {
  width: 100%;
}
.pdtag__list a span {
  width: 100%;
}
@media (min-width: 996px) {

  .pdtag__list a b {
    width: 50%;
  }
  .pdtag__list a span {
    width: 50%;
  }

  .pdtag-prev {
    left: -60px;
  }

  .pdtag-next {
    right: -60px;
  }
  .pdtag-next:hover::before {
    /* content: "\ea09"; */
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    background: url(https://storage-asset.msi.com/event/2025/ID/Back_To_School_2025/images/pd-arrow-right-hover.png)
      no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
  }
  .pdtag-next::before {
    /* content: "\ea09"; */
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    background: url(https://storage-asset.msi.com/event/2025/ID/Back_To_School_2025/images/pd-arrow-right.png)
      no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
  }
  .pdtag-prev::before {
    /* content: "\ea10"; */
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    background: url(https://storage-asset.msi.com/event/2025/ID/Back_To_School_2025/images/pd-arrow-left.png)
      no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
  }

  .pdtag-prev:hover::before {
    /* content: "\ea10"; */
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    background: url(https://storage-asset.msi.com/event/2025/ID/Back_To_School_2025/images/pd-arrow-left-hover.png)
      no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
  }
  .pdtag__box {
    padding: 0;
  }

  .pdtag__list a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 996px) {
  .pdline-box.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .pdline-box .pdtag__img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    /* padding-left: 50px; */
  }
  .pdline-box .pdtag__img img {
    width: 100%;
  }
  .pdline-box .pdtag__box {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
  }
}

.pdline-slick {
  position: relative;
}

@media (min-width: 996px) {
  .pdline-slick {
    padding-left: 45%;
  }
}

@media (min-width: 996px) {
  .pdline-slick .pdtag__img {
    position: absolute;
    width: 45%;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

.pdline-slick .pdtag__list {
  height: 40vh;
  overflow-x: hidden;
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 30px;
}

.pdline-slick .pdtag__list::-webkit-scrollbar {
  width: 10px;
}

.pdline-slick .pdtag__list::-webkit-scrollbar-track {
  border: #e9e9e9 1px solid;
  border-radius: 10px;
}

.pdline-slick .pdtag__list::-webkit-scrollbar-thumb {
  /* background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#737576),
    color-stop(#bdbfc3),
    to(#96999c)
  ); */
  background: linear-gradient(to bottom, #c9c9c9, #bdbfc3, #c9c9c9);
  border-radius: 10px;
}

[data-aos^="zoom"][data-aos^="zoom"].aos-animate {
  opacity: 1;
  -webkit-transform: translateZ(0) scale(1);
  transform: translateZ(0) scale(1);
}