.mlg {
  position: relative;
  z-index: 1;
  background: -webkit-gradient(linear, left top, left bottom, from(#1b1c2e), color-stop(30%, #181c31), color-stop(70%, #000000));
  background: linear-gradient(#1b1c2e, #181c31 30%, #000000 70%);
  --text-h-one: 30px;
  --text-h-two: 22px;
  --text-h-three: 20px;
  --text-h-four: 18px;
  --text-h-five: 16px;
  --text-p: 15px;
  --text-small: 11px;
}
.mlg .swiper-container {
  overflow: visible;
}
@media (min-width: 996px) {
  .mlg {
    --text-h-one: 36px;
    --text-h-two: 40px;
    --text-h-three: 28px;
    --text-h-four: 24px;
    --text-h-five: 20px;
    --text-p: 16px;
  }
}
.mlg h1 {
  font-size: var(--text-h-one);
}
.mlg h2 {
  font-size: var(--text-h-two);
  text-transform: uppercase;
}
.mlg h3 {
  font-size: var(--text-h-three);
}
.mlg h4 {
  font-size: var(--text-h-four);
}
.mlg h5 {
  font-size: var(--text-h-five);
}
.mlg p {
  font-size: var(--text-p);
}
.mlg h1, .mlg h2, .mlg h3, .mlg h4, .mlg h5 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", "Meiryo UI", Helvetica, Arial, sans-serif;
}
.mlg small {
  font-size: var(--text-small);
  display: block;
}
.mlg .msi__container {
  width: 100%;
  max-width: 1280px;
  padding: 0 25px;
  margin: 0 auto;
}

.navtie {
  opacity: 0;
  display: none;
}
@media (min-width: 996px) {
  .navtie {
    display: block;
    position: fixed;
    top: 55%;
    right: 50px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 999;
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
}
.navtie__index {
  font-size: 16px;
  font-weight: 700;
}
.navtie__triangle {
  width: 12px;
  text-align: center;
  margin: 0 auto 5px;
}
.navtie__triangle img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.navtie .nameBox {
  display: none;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.navtie .downLine {
  margin: 10px auto 0;
  width: 1px;
  height: 50px;
  background: #fff;
}
.navtie__text {
  font-size: 20px;
  text-transform: uppercase;
  font-family: "orbitron", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", "Meiryo UI", Helvetica, Arial, sans-serif;
  margin: 5px 0 0;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: mixed;
}
.navtie__li {
  text-align: center;
  padding: 5px 0;
  cursor: pointer;
  color: #999999;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.navtie__li-box {
  width: 5px;
  height: 16px;
  background: #fff;
  margin-right: 5px;
}
.navtie__li--active {
  color: #ffffff;
}
.navtie__li--active .navtie__index {
  font-size: 20px;
}
.navtie__li--active .nameBox {
  opacity: 1;
  margin-bottom: 0px;
  width: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
}
.navtie__li--active .nameBox__line {
  margin: 0 0 5px;
  width: 26px;
  height: 2px;
  background: #fff;
}
.navtie__li:hover {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  color: #ffffff;
}
.navtie__li:hover .navtie__index {
  font-size: 20px;
}

.kv {
  overflow: hidden;
  position: relative;
  width: 100%;
  line-height: 0;
}
.kv__logo {
  display: block;
  position: absolute;
  top: 3%;
  left: 4%;
  z-index: 5;
  height: 54px;
}
.kv__logo figure {
  width: 100%;
  height: 54px;
}
.kv__logo figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 996px) {
  .kv__logo figure {
    height: 65px;
  }
}
.kv__image {
  position: relative;
  z-index: 2;
}
@media (min-width: 996px) {
  .kv__image {
    opacity: 0;
  }
}
.kv .skip {
  position: absolute;
  bottom: 25%;
  right: 3%;
  z-index: 15;
  font-size: 18px;
  background: #484891;
  padding: 10px 20px;
  color: #fff;
  border-radius: 5px;
}
.kv .mlgLogo {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 11;
  width: 35%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.kv .mlgLogo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 996px) {
  .kv .mlgLogo {
    opacity: 0;
  }
}
.kv .mlgLogo2 {
  position: absolute;
  top: 18%;
  left: 92%;
  z-index: 10;
  width: 8%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
}
.kv .mlgLogo2 img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kv .mlgTitle {
  position: absolute;
  top: 75%;
  left: 50%;
  z-index: 14;
  width: 60%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.kv .mlgTitle img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 996px) {
  .kv .mlgTitle {
    opacity: 0;
  }
}
.kv .mlgLeaf {
  position: absolute;
  top: 100%;
  left: -20%;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
  z-index: 14;
  opacity: 0;
  width: 80%;
}
.kv .mlgLeaf img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kv .blackBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 105vh;
  background: #120522;
  z-index: 10;
}
.kv .mlgBg {
  position: absolute;
  top: 65%;
  left: 100%;
  width: 200%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 9;
}
.kv .mlgBg img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 1930px) {
  .kv .mlgBg {
    min-height: 105vh;
  }
}
.kv .mlgAndBuddy {
  position: absolute;
  top: 6%;
  left: 20%;
  z-index: 11;
  width: 50%;
  opacity: 0;
}
.kv .mlgAndBuddy img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kv .mlgAndBuddy__position {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-animation: light 1.5s ease-in-out infinite;
          animation: light 1.5s ease-in-out infinite;
}
.kv .personFloat {
  -webkit-animation: folat 4s ease-in-out infinite;
          animation: folat 4s ease-in-out infinite;
}
.kv .mlgName {
  opacity: 0;
  position: absolute;
  top: -20%;
  left: 50%;
  z-index: 10;
  width: 100%;
}
.kv .mlgName img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kv .mlgProduct {
  position: absolute;
  top: 20%;
  left: 20%;
  z-index: 12;
  width: 50%;
}
.kv .mlgProduct img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 996px) {
  .kv .mlgProduct {
    opacity: 0;
  }
}
.kv .personBox {
  position: absolute;
  top: -10%;
  left: -80%;
  z-index: 10;
  width: 120%;
  opacity: 0;
}
.kv .personBox img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kv .personBox__position {
  position: absolute;
  top: 0;
  left: 0;
}
.kv .personBox__hair {
  -webkit-animation: sway-right 3s ease-in-out infinite;
          animation: sway-right 3s ease-in-out infinite;
  -webkit-transform-origin: top;
          transform-origin: top;
}
.kv .personBox__head {
  -webkit-animation: sway-head 3s ease-in-out infinite;
          animation: sway-head 3s ease-in-out infinite;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.kv .personBox__wing {
  -webkit-animation: sway-wing 3s ease-in-out infinite;
          animation: sway-wing 3s ease-in-out infinite;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.kv .personBox__body {
  -webkit-animation: sway__body 3s ease-in-out infinite;
          animation: sway__body 3s ease-in-out infinite;
  -webkit-transform-origin: center;
          transform-origin: center;
}

.showDT {
  display: none;
}
@media (min-width: 996px) {
  .showDT {
    display: block;
  }
}

@-webkit-keyframes folat {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes folat {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes light {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes light {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes sway-right {
  0% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateY(5px) rotateX(10deg) rotateZ(-3deg);
            transform: translateY(5px) rotateX(10deg) rotateZ(-3deg);
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
}
@keyframes sway-right {
  0% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateY(5px) rotateX(10deg) rotateZ(-3deg);
            transform: translateY(5px) rotateX(10deg) rotateZ(-3deg);
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
}
@-webkit-keyframes sway-head {
  0% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateY(2px) translateX(3px) rotateZ(1deg);
            transform: translateY(2px) translateX(3px) rotateZ(1deg);
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
}
@keyframes sway-head {
  0% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateY(2px) translateX(3px) rotateZ(1deg);
            transform: translateY(2px) translateX(3px) rotateZ(1deg);
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
}
@-webkit-keyframes sway-wing {
  0% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateY(2px) translateX(0px) rotateZ(-2deg) scale(1.05);
            transform: translateY(2px) translateX(0px) rotateZ(-2deg) scale(1.05);
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
}
@keyframes sway-wing {
  0% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateY(2px) translateX(0px) rotateZ(-2deg) scale(1.05);
            transform: translateY(2px) translateX(0px) rotateZ(-2deg) scale(1.05);
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
}
@-webkit-keyframes sway__body {
  0% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateY(-2px) translateX(-2px) rotateZ(2deg);
            transform: translateY(-2px) translateX(-2px) rotateZ(2deg);
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
}
@keyframes sway__body {
  0% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateY(-2px) translateX(-2px) rotateZ(2deg);
            transform: translateY(-2px) translateX(-2px) rotateZ(2deg);
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0deg) rotateZ(0deg);
            transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
}
.introduce {
  width: 100%;
  background: url("https://storage-asset.msi.com/event/2025/CND/bios_landing/template-bg-2.jpg") no-repeat center center/cover;
  padding: 50px 0;
}
@media (min-width: 996px) {
  .introduce {
    padding: 100px 0;
  }
}
.introduce__content {
  position: relative;
  z-index: 2;
}
.introduce__content-figure {
  width: 2%;
  position: absolute;
  top: 25%;
  left: -10%;
  z-index: 10;
}
.introduce__content-figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.introduceBox {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 996px) {
  .introduceBox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 20px;
  }
}
@media (min-width: 1300px) {
  .introduceBox {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 20px;
  }
}
.introduceBox__item {
  color: #fff;
  background: #000;
  border-radius: 20px 0 20px 0;
  text-align: center;
  border: 1px solid #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 20px 0;
  opacity: 0;
  -webkit-transform: translateY(80px);
          transform: translateY(80px);
}
.introduceBox__item p {
  font-size: 18px;
}
@media (min-width: 996px) {
  .introduceBox__item {
    margin: 0;
  }
  .introduceBox__item:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
    text-align: left;
  }
  .introduceBox__item:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .introduceBox__item:nth-child(3) {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .introduceBox__item:nth-child(4) {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .introduceBox__item:nth-child(5) {
    grid-column: 1/3;
    grid-row: 3/4;
  }
}
@media (min-width: 1300px) {
  .introduceBox__item:nth-child(1) {
    grid-column: 1/4;
    grid-row: 1/2;
    text-align: left;
  }
  .introduceBox__item:nth-child(2) {
    grid-column: 4/7;
    grid-row: 1/2;
  }
  .introduceBox__item:nth-child(3) {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  .introduceBox__item:nth-child(4) {
    grid-column: 3/5;
    grid-row: 2/3;
  }
  .introduceBox__item:nth-child(5) {
    grid-column: 5/7;
    grid-row: 2/3;
  }
}
.introduceBox__item .itemOneBox {
  width: 65%;
  padding: 10% 40px;
  margin-left: auto;
}
.introduceBox__item .itemOneBox h4 {
  margin-bottom: 10px;
}
.introduceBox__item .itemOneImage {
  width: 70%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.introduceBox__item .iconBox {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 10% 30px;
}
.introduceBox__item .iconBox__figure {
  margin: 0 auto 20px;
  width: 150px;
}
.introduceBox__item .iconBox__figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.introduceBox__topBox {
  width: 60%;
  height: 10px;
  border: 1px solid #fff;
  border-top: none;
  margin: 0 auto;
}
.introduceBox__rightLine {
  width: 30px;
  height: 40%;
  border: 1px solid #fff;
  border-bottom: none;
  border-left: none;
  position: absolute;
  right: 10px;
  top: 10px;
}
.introduceBox__leftLine {
  width: 30px;
  height: 40%;
  border: 1px solid #fff;
  border-top: none;
  border-right: none;
  position: absolute;
  left: 10px;
  bottom: 10px;
}
.introduceBox__bottom {
  position: absolute;
  right: 20px;
  bottom: 10px;
  width: 100px;
  height: 1px;
  background: #fff;
  margin-right: 5px;
}
.introduceBox__flex {
  padding: 10% 40px;
}
@media (min-width: 996px) {
  .introduceBox__flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
  }
}
.introduceBox__flex-figure {
  margin: 0 auto 20px;
  width: 100px;
}
.introduceBox__flex-figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 996px) {
  .introduceBox__flex-figure {
    width: 150px;
    margin: 0 30px 0 0;
  }
  .introduceBox__flex-figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
.introduceBox__flex .itemTwoBox h4 {
  margin-bottom: 10px;
}

.fog {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.705), transparent 70%);
  opacity: 0.1;
  pointer-events: none;
  z-index: 3;
}
.fog.fogA {
  top: -10%;
  left: 30%;
  background: url("https://storage-asset.msi.com/event/2024/CND/am5-ai-gaming-motherboard/images/fog.png") no-repeat center center;
  background-size: cover;
  opacity: 0.2;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  width: 90%;
  height: 70%;
}
.fog.fogB {
  top: 40%;
  left: 50%;
  background: url("https://storage-asset.msi.com/event/2024/CND/am5-ai-gaming-motherboard/images/fog.png") no-repeat center center;
  background-size: cover;
  opacity: 0.2;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  width: 70%;
  height: 60%;
}
.fog.fogC {
  top: 70%;
  left: 30%;
}
.fog.fog-left {
  background: url("https://storage-asset.msi.com/event/2024/CND/am5-ai-gaming-motherboard/images/fog.png") no-repeat center center;
  width: 90%;
  height: 70%;
  background-size: cover;
  opacity: 0.3;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  top: 10%;
  left: -400px;
}

.describeBox {
  position: relative;
  z-index: 2;
  padding: 150px 0 50px;
  margin-top: -15%;
  background: url("https://storage-asset.msi.com/event/2025/CND/2025-mlg-landing/images/bg-2.png") no-repeat center top/cover;
}
@media (min-width: 996px) {
  .describeBox {
    padding: 250px 0;
  }
}
.describeBox__bottomImg {
  position: absolute;
  bottom: -5%;
  left: 0;
  z-index: 2;
  width: 100%;
}
.describeBox__bottomImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 996px) {
  .describeBox__bottomImg {
    bottom: -18%;
  }
}
@media (min-width: 1930px) {
  .describeBox__bottomImg {
    bottom: -25%;
  }
}
.describeBox__flex {
  overflow: hidden;
  padding: 25px;
}
@media (min-width: 996px) {
  .describeBox__flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding: 30px 25px;
    max-width: 1920px;
    margin: 0 auto;
  }
}
.describeBox__flex .personDescrib {
  margin-bottom: 10px;
}
.describeBox__flex .personDescrib h5 {
  font-weight: 700;
  margin-right: 5px;
  display: inline-block;
}
.describeBox__contentBox {
  position: relative;
  z-index: 3;
  color: #fff;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 996px) {
  .describeBox__contentBox {
    margin: 0;
    text-align: left !important;
  }
}
@media (min-width: 1300px) {
  .describeBox__contentBox {
    max-width: 450px;
  }
}
@media (min-width: 1600px) {
  .describeBox__contentBox {
    max-width: 600px;
  }
}
.describeBox__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 996px) {
  .describeBox__icon {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.describeBox__icon-item {
  width: 50px;
  margin: 10px 10px 10px 0;
}
.describeBox__icon-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.describeBox__figure {
  position: relative;
  z-index: 3;
  width: 1100px;
  margin-right: 20px;
  max-width: 100%;
}
.describeBox__figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.describeBox__figure .hoverArea {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.describeBox__figure img {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  will-change: transform;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.describeBox__figure-position {
  position: absolute;
  width: 600px !important;
}
.describeBox__figure .flowerOne {
  top: -30%;
  left: 30%;
}
.describeBox__figure .flowerTwo {
  top: -30%;
  left: 20%;
}
.describeBox__figure .flowerThree {
  bottom: -30%;
  left: 60%;
}
.describeBox__figure .flowerFour {
  bottom: -40%;
  left: 40%;
}
.describeBox__figure-desktop {
  display: none;
}
@media (min-width: 996px) {
  .describeBox__figure-desktop {
    display: block;
  }
}
@media (min-width: 996px) {
  .describeBox__figure-mobile {
    display: none;
  }
}

.titleBox {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: #fff;
}
.titleBox__topLight {
  width: 250px;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#dda453), color-stop(#dda453), to(transparent));
  background: linear-gradient(to right, transparent, #dda453, #dda453, transparent);
  position: absolute;
  top: 0%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-filter: drop-shadow(0 0 3px #ff9500) blur(2px);
          filter: drop-shadow(0 0 3px #ff9500) blur(2px);
  opacity: 0.5;
}
@media (min-width: 996px) {
  .titleBox__topLight {
    width: 400px;
  }
}
.titleBox__bottomLight {
  width: 250px;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#dda453), color-stop(#dda453), to(transparent));
  background: linear-gradient(to right, transparent, #dda453, #dda453, transparent);
  position: absolute;
  bottom: 0%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-filter: drop-shadow(0 0 3px #ff9500) blur(2px);
          filter: drop-shadow(0 0 3px #ff9500) blur(2px);
  opacity: 0.5;
}
@media (min-width: 996px) {
  .titleBox__bottomLight {
    width: 400px;
    bottom: -5%;
  }
}
.titleBox__title {
  margin-bottom: 30px;
  position: relative;
  z-index: 5;
  padding: 10px 0;
  color: #fff;
  text-align: center;
}
.titleBox__title::before, .titleBox__title::after {
  content: "";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 250px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (min-width: 996px) {
  .titleBox__title::before, .titleBox__title::after {
    width: 400px;
  }
}
.titleBox__title::before {
  top: -5px;
  background-image: url("https://storage-asset.msi.com/event/2025/CND/2025-mlg-landing/images/title-border-top.png");
}
@media (min-width: 996px) {
  .titleBox__title::before {
    top: -10px;
  }
}
.titleBox__title::after {
  bottom: -30px;
  background-image: url("https://storage-asset.msi.com/event/2025/CND/2025-mlg-landing/images/title-border-bottom.png");
}

.scene {
  position: absolute;
  width: 1900px;
  height: 1000px;
  margin: 100px auto;
  overflow: visible;
  z-index: 5;
}
.scene .ray-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 300px;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#f81fff));
  background: linear-gradient(white, #f81fff);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  border-radius: 3px;
  -webkit-filter: blur(2px);
          filter: blur(2px);
  opacity: 0;
}
.scene .pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border: 4px solid #f81fff;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.1);
          transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
  -webkit-filter: blur(3px);
          filter: blur(3px);
}
.scene .flare-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255, 223, 150, 0.4), transparent 70%);
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.scene .particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  -webkit-filter: blur(2px);
          filter: blur(2px);
  opacity: 0.9;
}
.scene .character {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 10;
}

.mlgStory {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 100px 0 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(#1b1c2e), color-stop(20%, rgba(27, 28, 46, 0.7882352941)), color-stop(85%, rgba(13, 16, 34, 0.4784313725)), to(#000000)), url("https://storage-asset.msi.com/event/2025/CND/2025-mlg-landing/images/bg-3.png") no-repeat center top/cover;
  background: linear-gradient(#1b1c2e, rgba(27, 28, 46, 0.7882352941) 20%, rgba(13, 16, 34, 0.4784313725) 85%, #000000), url("https://storage-asset.msi.com/event/2025/CND/2025-mlg-landing/images/bg-3.png") no-repeat center top/cover;
  z-index: 1;
}
@media (min-width: 996px) {
  .mlgStory {
    padding: 250px 0 50px;
  }
}
.mlgStory__text {
  font-size: 14px !important;
  text-transform: uppercase;
  color: #f0f0f0;
  position: absolute;
  top: 55%;
  left: 0%;
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  display: none;
}
@media (min-width: 1300px) {
  .mlgStory__text {
    display: block;
  }
}
.mlgStory .storySlick {
  text-align: center;
  position: relative;
}
.mlgStory .storySlick .button-next {
  cursor: pointer;
  position: absolute;
  right: 0%;
  top: 25%;
  z-index: 30;
  width: 60px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (min-width: 768px) {
  .mlgStory .storySlick .button-next {
    top: 28%;
    right: 5%;
    width: 80px;
  }
}
@media (min-width: 996px) {
  .mlgStory .storySlick .button-next {
    top: 43%;
  }
}
@media (min-width: 1600px) {
  .mlgStory .storySlick .button-next {
    right: -10%;
  }
}
.mlgStory .storySlick .button-prev {
  cursor: pointer;
  position: absolute;
  top: 25%;
  left: 0%;
  z-index: 30;
  width: 60px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (min-width: 768px) {
  .mlgStory .storySlick .button-prev {
    top: 28%;
    left: 5%;
    width: 80px;
  }
}
@media (min-width: 996px) {
  .mlgStory .storySlick .button-prev {
    top: 43%;
  }
}
@media (min-width: 1600px) {
  .mlgStory .storySlick .button-prev {
    left: -10%;
  }
}
.mlgStory .storySlick .button-next, .mlgStory .storySlick .button-prev {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.mlgStory .storySlick .button-next:hover, .mlgStory .storySlick .button-prev:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mlgStory .storySlick__txt {
  text-align: center;
  padding: 0 0 20px;
}
@media (min-width: 996px) {
  .mlgStory .storySlick__txt {
    text-align: center;
  }
}
.mlgStory .storySlick__txt-p {
  max-width: 100%;
  padding: 0 0;
  margin: 10px auto 0;
}
.mlgStory .storySlick__txt-title {
  text-transform: uppercase;
  max-width: 100%;
  padding: 0 20px;
  margin: 10px auto 0;
}
@media (min-width: 996px) {
  .mlgStory .storySlick__txt-title {
    max-width: 80%;
  }
}
.mlgStory .storySlick .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}
.mlgStory .storySlick .swiper-slide {
  padding: 40px 0;
  background-position: center;
  background-size: cover;
  width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-filter: opacity(0);
          filter: opacity(0);
  color: #fff;
}
@media (min-width: 768px) {
  .mlgStory .storySlick .swiper-slide {
    width: 60%;
  }
}
@media (min-width: 1300px) {
  .mlgStory .storySlick .swiper-slide {
    width: 70%;
  }
}
.mlgStory .storySlick .swiper-slide-active {
  -webkit-filter: opacity(1);
          filter: opacity(1);
  display: block;
}
.mlgStory .storySlick .swiper-slide.swiper-slide-duplicate.swiper-slide-prev {
  -webkit-filter: opacity(0.4);
          filter: opacity(0.4);
}
.mlgStory .storySlick .swiper-slide.swiper-slide-next {
  display: block;
  -webkit-filter: opacity(0.4);
          filter: opacity(0.4);
}
.mlgStory .storySlick .swiper-slide.swiper-slide-next .storySlick__txt {
  opacity: 0;
}
.mlgStory .storySlick .swiper-slide.swiper-slide-prev {
  display: block;
  -webkit-filter: opacity(0.4);
          filter: opacity(0.4);
}
.mlgStory .storySlick .swiper-slide.swiper-slide-prev .storySlick__txt {
  opacity: 0;
}
.mlgStory .storySlick .swiper-slide.swiper-slide-duplicate {
  -webkit-filter: opacity(0);
          filter: opacity(0);
}
.mlgStory .storySlick .swiper-slide.swiper-slide-duplicate.swiper-slide-next {
  -webkit-filter: opacity(0.4);
          filter: opacity(0.4);
}
.mlgStory .storySlick .swiper-slide.swiper-slide-duplicate.swiper-slide-active {
  -webkit-filter: opacity(1);
          filter: opacity(1);
}
.mlgStory .storySlick .swiper-slide .swiper-slide-shadow-coverflow {
  background-image: none;
}
.mlgStory .storySlick .swiper-slide .swiper-container-3d .swiper-slide-shadow-left, .mlgStory .storySlick .swiper-slide .storySlick .swiper-container-3d .swiper-slide-shadow-right {
  background-image: none;
}
.mlgStory .storySlick .swiper-slide .stepImage {
  width: 100%;
  position: relative;
  z-index: 1;
}
.mlgStory .storySlick .swiper-slide .stepImage img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mlgStory .storySlick .swiper-slide .stepImage-position {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.mlgStory .storySlick .swiper-slide .stepImage .dtLogo, .mlgStory .storySlick .swiper-slide .stepImage .keyboard, .mlgStory .storySlick .swiper-slide .stepImage .keyboardDel, .mlgStory .storySlick .swiper-slide .stepImage .enterBios, .mlgStory .storySlick .swiper-slide .stepImage .openComputer, .mlgStory .storySlick .swiper-slide .stepImage .powerButton, .mlgStory .storySlick .swiper-slide .stepImage .powerArrow {
  opacity: 0;
}
.mlgStory .storySlick .swiper-slide .stepImage .powerArrow {
  top: -20px;
}

@-webkit-keyframes flash {
  0% {
    -webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0));
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0));
  }
  50% {
    -webkit-filter: drop-shadow(0 0 5px #ffffff);
            filter: drop-shadow(0 0 5px #ffffff);
  }
  100% {
    -webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0));
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0));
  }
}

@keyframes flash {
  0% {
    -webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0));
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0));
  }
  50% {
    -webkit-filter: drop-shadow(0 0 5px #ffffff);
            filter: drop-shadow(0 0 5px #ffffff);
  }
  100% {
    -webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0));
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0));
  }
}
@-webkit-keyframes down {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes down {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.coming {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 5px 0;
  background: url("https://storage-asset.msi.com/event/2025/CND/2025-mlg-landing/images/bg-4.png") no-repeat center top/cover;
  z-index: 1;
}
@media (min-width: 996px) {
  .coming {
    padding: 0;
  }
}
.coming__text {
  text-transform: uppercase;
  color: #f0f0f0;
  position: absolute;
  top: 55%;
  left: 0%;
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  display: none;
}
@media (min-width: 1300px) {
  .coming__text {
    display: block;
  }
}
.coming__subTitle {
  position: absolute;
  top: 15%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  color: #fff;
  -webkit-filter: drop-shadow(0 0 8px #fff);
          filter: drop-shadow(0 0 8px #fff);
}
.coming__titleBox {
  position: absolute;
  top: 55%;
  left: 50%;
  text-align: center;
  z-index: 11;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 10px 0;
  color: #fff;
  opacity: 0;
}
@media (min-width: 996px) {
  .coming__titleBox {
    top: 55%;
  }
  .coming__titleBox::before, .coming__titleBox::after {
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 400px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .coming__titleBox::before {
    top: -30px;
    background-image: url("https://storage-asset.msi.com/event/2025/CND/2025-mlg-landing/images/title-border-top.png");
  }
  .coming__titleBox::after {
    bottom: -50px;
    background-image: url("https://storage-asset.msi.com/event/2025/CND/2025-mlg-landing/images/title-border-bottom.png");
  }
}
.coming__topLight {
  width: 250px;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#dda453), color-stop(#dda453), to(transparent));
  background: linear-gradient(to right, transparent, #dda453, #dda453, transparent);
  position: absolute;
  top: -38%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-filter: drop-shadow(0 0 3px #ff9500);
          filter: drop-shadow(0 0 3px #ff9500);
  opacity: 0.5;
}
@media (min-width: 996px) {
  .coming__topLight {
    -webkit-filter: drop-shadow(0 0 3px #ff9500) blur(2px);
            filter: drop-shadow(0 0 3px #ff9500) blur(2px);
    width: 400px;
  }
}
.coming__bottomLight {
  width: 250px;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#dda453), color-stop(#dda453), to(transparent));
  background: linear-gradient(to right, transparent, #dda453, #dda453, transparent);
  position: absolute;
  bottom: -30%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-filter: drop-shadow(0 0 3px #ff9500);
          filter: drop-shadow(0 0 3px #ff9500);
  opacity: 0.5;
}
@media (min-width: 996px) {
  .coming__bottomLight {
    -webkit-filter: drop-shadow(0 0 3px #ff9500) blur(2px);
            filter: drop-shadow(0 0 3px #ff9500) blur(2px);
    width: 400px;
    bottom: -40%;
  }
}
.coming__info {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  top: 38%;
  left: 0;
  position: absolute;
  z-index: 10;
  opacity: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}
.coming__info img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.coming__light {
  padding: 5% 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  position: absolute;
  width: 100%;
  background: url("https://storage-asset.msi.com/event/2025/CND/2025-mlg-landing/images/info-block.png") no-repeat center center/cover;
  z-index: 25;
}

.support {
  padding: 25px 0 50px;
  width: 100%;
}
@media (min-width: 996px) {
  .support {
    padding: 50px 0 100px;
  }
}
.support .unlimitedSwiper, .support .unlimitedSwiperRight {
  width: 100%;
  -webkit-transition-timing-function: linear !important;
          transition-timing-function: linear !important;
}
.support .unlimitedSwiper .swiper-wrapper, .support .unlimitedSwiperRight .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
          transition-timing-function: linear !important;
}
.support .unlimitedSwiper__wrapper .swiper-gallery, .support .unlimitedSwiperRight__wrapper .swiper-gallery {
  cursor: pointer;
  width: 570px;
}
.support .seriesBox {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  margin-top: 25px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-bottom: 20px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
@media (min-width: 996px) {
  .support .seriesBox {
    margin-top: 50px;
  }
}
.support .seriesBox:hover .underLine {
  max-width: 350px;
}
@media (min-width: 996px) {
  .support .seriesBox:hover .underLine {
    max-width: 600px;
  }
}
.support .seriesBox__link {
  color: #fff;
}
.support .seriesBox__link:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.support .seriesBox__left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 0 25px;
}
@media (min-width: 996px) {
  .support .seriesBox__left {
    padding-left: 5%;
  }
}
.support .seriesBox__right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0 25px;
}
@media (min-width: 996px) {
  .support .seriesBox__right {
    padding-right: 5%;
  }
}
.support .seriesBox .underLine {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  width: 100%;
  max-width: 300px;
  height: 1px;
  background: #fff;
  margin: 0 10px 5px 10px;
}
@media (min-width: 996px) {
  .support .seriesBox .underLine {
    max-width: 500px;
  }
}

.msiBlog {
  padding: 25px 0 50px;
  width: 100%;
  position: relative;
  z-index: 1;
}
@media (min-width: 996px) {
  .msiBlog {
    padding: 50px 0 100px;
  }
}
.msiBlog__content {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 25px;
  position: relative;
  z-index: 2;
}
@media (min-width: 996px) {
  .msiBlog__content {
    width: 80%;
  }
}
@media (min-width: 1930px) {
  .msiBlog__content {
    max-width: 1920px;
  }
}
.msiBlog .msiBlog-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 6%;
  z-index: 5;
  width: 30px;
}
.msiBlog .msiBlog-next:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
@media (min-width: 996px) {
  .msiBlog .msiBlog-next {
    right: 6%;
    width: 50px;
  }
}
@media (min-width: 1600px) {
  .msiBlog .msiBlog-next {
    right: 8%;
  }
}
.msiBlog .msiBlog-prev {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 6%;
  z-index: 5;
  width: 30px;
}
.msiBlog .msiBlog-prev:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
@media (min-width: 996px) {
  .msiBlog .msiBlog-prev {
    left: 6%;
    width: 50px;
  }
}
@media (min-width: 1600px) {
  .msiBlog .msiBlog-prev {
    left: 8%;
  }
}
.msiBlog .blogContent {
  width: 100%;
}
.msiBlog .blogContent__item {
  margin: 20px 0;
  display: block;
  width: 100%;
  width: 33.3333333333%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.msiBlog .blogContent__item:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.msiBlog .blogContent__item p {
  margin-top: 10px;
  color: #fff;
}

.navBar {
  position: relative;
  width: 100%;
}
@media (min-width: 996px) {
  .navBar {
    opacity: 0;
  }
}
.navBar .msiLogo {
  display: block;
  width: 75px;
  line-height: 0;
  margin: 5px 0;
}
.navBar .msiLogo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.navBar .msiLogo__mobile {
  position: absolute;
  margin: 0 auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 70px;
}
.navBar .navRightSide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.navBar .navRightSide__item {
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
  margin: 0 20px;
  color: #ffffff;
  font-weight: 500;
}
.navBar .navRightSide__item:hover {
  color: #f1d8a7;
}
.navBar .navRightSide__ul {
  padding: 0;
  max-width: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background: #fff;
  margin: 0 auto;
  -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1294117647));
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1294117647));
}
.navBar .navRightSide__ul a {
  display: block;
  cursor: pointer;
  width: 50%;
  margin: 0px;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  color: #000;
}
.navBar .navRightSide__ul a:hover {
  background: -webkit-gradient(linear, left top, right top, from(#c7a6bb), to(#9ca0d6));
  background: linear-gradient(to right, #c7a6bb, #9ca0d6);
  color: #fff;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}
.navBar .navRightSide--active {
  display: block;
}
.navBar__menu {
  position: fixed;
  z-index: 100;
  color: #000;
  width: 100%;
  border-bottom: 1px solid rgba(197, 197, 197, 0.233);
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.navBar__menu--fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}
.navBar__menu .wrapper {
  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;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 25px;
}
.navBar__menu .wrapper__flex {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.navBar__kv--hamburger {
  display: none;
  cursor: pointer;
  position: absolute;
  width: 100%;
  max-width: 1920px;
  text-align: right;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  z-index: 100;
}
.navBar__kv--hamburger .mobileMenuMnt {
  line-height: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid rgba(197, 197, 197, 0.233);
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.navBar__kv--hamburger .mobileMenuMnt .menuBtnMobile {
  display: inline-block;
  width: 58px;
  height: 38px;
  position: fixed;
}
.navBar__kv--hamburger .mobileMenuMnt .menuBtnMobile__switch span:nth-child(1) {
  top: 10px;
}
.navBar__kv--hamburger .mobileMenuMnt .menuBtnMobile__switch span:nth-child(2), .navBar__kv--hamburger .mobileMenuMnt .menuBtnMobile__switch span:nth-child(3) {
  top: 20px;
}
.navBar__kv--hamburger .mobileMenuMnt .menuBtnMobile__switch span:nth-child(4) {
  top: 30px;
}
.navBar__kv--hamburger .mobileMenuMnt .menuBtnMobile__switch.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.navBar__kv--hamburger .mobileMenuMnt .menuBtnMobile__switch.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.navBar__kv--hamburger .mobileMenuMnt .menuBtnMobile__switch.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.navBar__kv--hamburger .mobileMenuMnt .menuBtnMobile__switch.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.navBar__kv--hamburger .mobileMenuMnt .menuBtnMobile span {
  display: block;
  position: absolute;
  height: 2px;
  width: 20px;
  background: rgb(236, 236, 236);
  border-radius: 9px;
  opacity: 1;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.navBar__kv--hamburger .mobileMenuMnt .navMobileBlock {
  width: 58px;
  height: 24px;
}
.navBar__kv--menu {
  margin-top: -1px;
  color: #fff;
  display: inline-block;
  list-style: none;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.212);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
  -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1294117647));
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1294117647));
}
.navBar__kv--menu.open {
  display: block;
}
.navBar__kv--menu li {
  text-transform: uppercase;
  width: 100%;
}
.navBar__kv--menu li a {
  font-size: 18px;
  display: inline-block;
  padding: 1vh;
  width: 100%;
  color: #ffffff;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}
.navBar__kv--menu li a:hover {
  text-decoration: none;
  color: #000000;
  background: #c48bf3;
}
.navBar .menuUlBlock {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2392156863);
}

@media screen and (max-width: 1250px) {
  .navRightSide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 3%;
  }
  .nav__block {
    position: relative;
    width: 100%;
  }
  .navRightSide {
    width: auto;
    max-width: auto;
  }
  .navTopBlock {
    width: 100%;
    height: 41px;
  }
  .navBar__menu {
    display: none;
  }
  .navBar__kv--hamburger {
    position: fixed;
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .navBar__menu {
    display: none;
  }
  .navBar__kv--hamburger {
    display: block;
  }
}/*# sourceMappingURL=main.css.map */