.project {
  color: #fff;
  background: url(https://storage-asset.msi.com/event/2026/sg/monitor-comex/images/kv-bg.jpg) no-repeat top center, #000;
  background-size: 180vw;
}
@media (min-width: 996px) {
  .project {
    background-size: auto;
  }
}
.project img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.project .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.project .kv {
  position: relative;
  overflow: hidden;
  padding-bottom: 2%;
}
.project .kv__logo {
  z-index: 2;
  margin: 0;
  width: clamp(70px, 13.5vw, 300px);
  -webkit-animation: kvFadeIn 0.9s ease both;
          animation: kvFadeIn 0.9s ease both;
  position: absolute;
  right: 3%;
  top: 8%;
}
.project .kv__pd {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  z-index: 1;
  margin: 0 auto;
  min-height: 0;
}
@media (min-width: 996px) {
  .project .kv__pd {
    width: 90%;
  }
}
@media (min-width: 1930px) {
  .project .kv__pd {
    width: 100%;
  }
}
.project .kv__pd--title {
  position: relative;
}
.project .kv__pd--title .kv__pd__light {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  -webkit-mask: url(https://storage-asset.msi.com/event/2026/sg/monitor-comex/images/kv-title.png) center no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask: url(https://storage-asset.msi.com/event/2026/sg/monitor-comex/images/kv-title.png) center no-repeat;
          mask: url(https://storage-asset.msi.com/event/2026/sg/monitor-comex/images/kv-title.png) center no-repeat;
  mask-size: contain;
}
.project .kv__pd--title .kv__pd__light::after {
  content: "";
  position: absolute;
  width: 300%;
  height: 200%;
  background: linear-gradient(45deg, transparent 50%, #fff 60%, transparent 70%);
  -webkit-animation: kvPdTitle-lightAni 3s infinite ease-in-out;
          animation: kvPdTitle-lightAni 3s infinite ease-in-out;
}
.project .pd {
  background-color: #fff;
  margin: 0 auto;
  max-width: 1280px;
  padding-bottom: 30px;
}
@media (min-width: 996px) {
  .project .pd {
    width: 90%;
    margin: 3% auto;
  }
}
.project .pd__banner {
  margin: 0 auto;
}
.project .pd__title {
  text-align: center;
}
.project .pd__title img {
  max-height: 30px;
  width: auto;
}
@media (min-width: 996px) {
  .project .pd__title img {
    max-height: 50px;
  }
}
.project .pd__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  padding: 30px 30px 15px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.project .pd__flex--bottom {
  gap: 20px 30px;
}
@media (min-width: 996px) {
  .project .pd__flex--bottom {
    gap: 50px;
  }
}
.project .pd__flex--bottom .pd__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 50px) / 2);
          flex: 0 0 calc((100% - 50px) / 2);
  text-align: center;
}
@media (min-width: 996px) {
  .project .pd__flex--bottom .pd__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 150px) / 4);
            flex: 0 0 calc((100% - 150px) / 4);
  }
}
.project .pd__flex--bottom .pd__item img {
  display: block;
  width: 85%;
  margin: 0 auto;
}
.project .pd__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 30px) / 2);
          flex: 0 0 calc((100% - 30px) / 2);
}
@media (min-width: 996px) {
  .project .pd__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 90px) / 4);
            flex: 0 0 calc((100% - 90px) / 4);
  }
}
.project .pd__item--half {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}
@media (min-width: 996px) {
  .project .pd__item--half {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 30px) / 2);
            flex: 0 0 calc((100% - 30px) / 2);
  }
}
@media (min-width: 996px) {
  .project .pd__item--half {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 30px) / 2);
            flex: 0 0 calc((100% - 30px) / 2);
  }
}
.project .wtb {
  position: relative;
  padding: 30px 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#cf191a), to(#7f1616));
  background: linear-gradient(#cf191a, #7f1616);
}
@media (min-width: 996px) {
  .project .wtb {
    padding: 50px 0;
  }
}
.project .wtb__wrapper {
  max-width: 1280px;
  margin: 0 auto;
}
.project .wtb__wrapper .main-title {
  font-size: 28px;
  color: #fff;
  text-align: center;
  margin-bottom: 25px;
  text-shadow: 0 0 10px #fff;
}
@media (min-width: 996px) {
  .project .wtb__wrapper .main-title {
    font-size: 36px;
  }
}
.project .wtb__flexbox {
  background: #fff;
  background: url(https://storage-asset.msi.com/event/2025/SG/monitor-comex-2025/images/wtb-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 25px;
  padding: 15px;
  text-align: center;
  width: 90%;
  margin: 0 auto;
  color: #000;
  gap: 20px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: 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;
}
@media (min-width: 768px) {
  .project .wtb__flexbox {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 30px 40px;
    font-size: 30px;
    gap: 30px;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (min-width: 996px) {
  .project .wtb__flexbox {
    gap: 80px;
    padding: 30px 60px;
  }
}
.project .wtb__flexbox a {
  color: #000;
}
.project .wtb__flexbox figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 240px;
}
.project .wtb__flexbox figure:first-child {
  max-width: 200px;
}
.project .wtb__flexbox figure figcaption {
  font-size: 26px;
}
@media (min-width: 768px) {
  .project .wtb__flexbox figure figcaption {
    font-size: 30px;
  }
}

@-webkit-keyframes kvFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes kvFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes kvPdFloat {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
@keyframes kvPdFloat {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
@-webkit-keyframes kvPdTitle-lightAni {
  0% {
    -webkit-transform: translateX(-110%);
            transform: translateX(-110%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes kvPdTitle-lightAni {
  0% {
    -webkit-transform: translateX(-110%);
            transform: translateX(-110%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .project .kv__pd--title .kv__pd__light::after {
    -webkit-animation: none;
            animation: none;
    opacity: 0;
  }
}/*# sourceMappingURL=main.css.map */