.mainarea {
  max-width: none;
  width: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/Menu-bg.jpg");
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .mainarea {
    background: #000;
  }
}
.mainarea .menublockfirstbg {
  position: absolute;
  top: 50.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 73.4%;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
  height: 41vw;
}
.mainarea .menublockfirstbg__menu {
  position: absolute;
  top: 5%;
  z-index: 40;
  left: 92%;
  cursor: pointer;
  font-family: "DINCond-Medium";
  z-index: 150;
  pointer-events: none;
}
.mainarea .menublockfirstbg__menu-box {
  position: relative;
  overflow: hidden;
  max-height: 0vw;
}
.mainarea .menublockfirstbg__menu-box a {
  position: absolute;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.2vw;
  opacity: 0;
}
.mainarea .menublockfirstbg__menu-box a:hover img {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}
.mainarea .menublockfirstbg__menu-box a:hover p {
  color: #76d9e9;
}
.mainarea .menublockfirstbg__menu-box a img {
  width: 2vw;
  margin-right: 0.75vw;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mainarea .menublockfirstbg__menu-box--home {
  top: 10%;
  left: 18%;
}
.mainarea .menublockfirstbg__menu-box--pen {
  top: 23%;
  left: 18%;
}
.mainarea .menublockfirstbg__menu-box--know {
  top: 36%;
  left: 18%;
}
.mainarea .menublockfirstbg__menu-box--star {
  top: 49%;
  left: 18%;
}
.mainarea .menublockfirstbg__menu-box--ele {
  top: 62%;
  left: 18%;
}
.mainarea .menublockfirstbg__menu-box--mess {
  top: 75%;
  left: 18%;
}
.mainarea .menublockfirstbg__menu-top {
  color: #fff;
  position: relative;
}
.mainarea .menublockfirstbg__menu-top > img {
  min-width: 17vw;
}
.mainarea .menublockfirstbg__menu-top p {
  position: absolute;
  left: 45%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.45vw;
}
.mainarea .thetextbox {
  width: 23%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
}
.mainarea .thetextbox h4 {
  font-size: 1vw;
  background: -webkit-linear-gradient(#b5d0dc, #68e7f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}
.mainarea .thetextbox p {
  font-size: 0.8vw;
  color: #fff;
}
.mainarea .thetextbox__top {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 2;
  width: 100%;
}
.mainarea .thetextbox__cc {
  padding: 1.5% 5%;
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/messagemid.png");
  background-size: 100%;
}
.mainarea .thetextbox__bot {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  width: 100%;
}
.mainarea .thetextbox__drc {
  position: absolute;
  top: -2%;
  left: 99.5%;
  z-index: 2;
  width: 0.8%;
}
.mainarea .thetextbox-0 {
  top: 31.5%;
  left: 18.5%;
}
.mainarea .thetextbox-1 {
  top: 41.5%;
  left: 16.6%;
}
.mainarea .thetextbox-2 {
  top: 54%;
  left: 17%;
}
.mainarea .thetextbox-3 {
  top: 65%;
  left: 22.5%;
}
.mainarea .thetextbox-4 {
  top: 14%;
  left: 50%;
}
.mainarea .thetextbox-5 {
  top: 23%;
  left: 51%;
}
.mainarea .thetextbox-6 {
  top: 20%;
  left: 75%;
}
.mainarea .thetextbox-7 {
  top: 28.5%;
  left: 77%;
}
.mainarea .thetextbox-8 {
  top: 38.5%;
  left: 84%;
}
.mainarea .thetextbox-9 {
  top: 47.5%;
  left: 83.5%;
}
.mainarea .thetextbox-10 {
  top: 59.5%;
  left: 82%;
}
.mainarea .thetextboxf {
  width: 23%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
}
.mainarea .thetextboxf h4 {
  font-size: 1vw;
  background: -webkit-linear-gradient(#b5d0dc, #68e7f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}
.mainarea .thetextboxf p {
  font-size: 0.8vw;
  color: #fff;
}
.mainarea .thetextboxf__top {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 2;
  width: 100%;
}
.mainarea .thetextboxf__cc {
  padding: 1.5% 5%;
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/messagemid.png");
  background-size: 100%;
}
.mainarea .thetextboxf__bot {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  width: 100%;
}
.mainarea .thetextboxf__drc {
  position: absolute;
  top: -2%;
  left: 99.5%;
  z-index: 2;
  width: 0.8%;
}
.mainarea .thetextboxf-1 {
  top: 12%;
  left: 29.7%;
}
.mainarea .thetextboxf-2 {
  top: 20.5%;
  left: 24.3%;
}
.mainarea .thetextboxf-3 {
  top: 30%;
  left: 23%;
}
.mainarea .thetextboxf-4 {
  top: 39%;
  left: 17%;
}
.mainarea .thetextboxf-5 {
  top: 47%;
  left: 17%;
}
.mainarea .thetextboxf-6 {
  top: 55%;
  left: 17%;
}
.mainarea .thetextboxf-7 {
  top: 14%;
  left: 73%;
}
.mainarea .thetextboxf-8 {
  top: 22%;
  left: 74.5%;
}
.mainarea .thetextboxf-9 {
  top: 26.8%;
  left: 80%;
}
.mainarea .thetextboxf-10 {
  top: 38%;
  left: 83.5%;
}
.mainarea .thetextboxf-11 {
  top: 46%;
  left: 83.5%;
}
.mainarea .thetextboxf-12 {
  top: 54%;
  left: 83.5%;
}
.mainarea .thetextboxf-13 {
  top: 62%;
  left: 83.5%;
}
.mainarea .firstbg {
  position: relative;
  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;
  width: 100%;
  top: 0;
  left: 0;
  height: 50vw;
}
@media screen and (max-width: 767px) {
  .mainarea .firstbg {
    display: none;
  }
}
.mainarea .firstbg::after {
  position: absolute;
  content: "";
  display: block;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 20vw;
  background: #000;
}
.mainarea .firstbg__out {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 179%;
  max-width: none;
  pointer-events: none;
  opacity: 0;
}
.mainarea .firstbg__menu {
  position: fixed;
  top: 5%;
  z-index: 40;
  left: 94%;
  cursor: pointer;
  font-family: "DINCond-Medium";
}
.mainarea .firstbg__menu-box {
  position: relative;
  overflow: hidden;
  max-height: 0vw;
}
.mainarea .firstbg__menu-box a {
  position: absolute;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.2vw;
  opacity: 0;
}
.mainarea .firstbg__menu-box a:hover img {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}
.mainarea .firstbg__menu-box a:hover p {
  color: #76d9e9;
}
.mainarea .firstbg__menu-box a img {
  width: 2vw;
  margin-right: 0.75vw;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mainarea .firstbg__menu-box--home {
  top: 10%;
  left: 18%;
}
.mainarea .firstbg__menu-box--pen {
  top: 23%;
  left: 18%;
}
.mainarea .firstbg__menu-box--know {
  top: 36%;
  left: 18%;
}
.mainarea .firstbg__menu-box--star {
  top: 49%;
  left: 18%;
}
.mainarea .firstbg__menu-box--ele {
  top: 62%;
  left: 18%;
}
.mainarea .firstbg__menu-box--mess {
  top: 75%;
  left: 18%;
}
.mainarea .firstbg__menu-top {
  color: #fff;
  position: relative;
}
.mainarea .firstbg__menu-top > img {
  min-width: 17vw;
}
.mainarea .firstbg__menu-top p {
  position: absolute;
  left: 45%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.45vw;
}
.mainarea .firstbg__under {
  position: absolute;
  width: 80%;
  z-index: 4;
  top: 70%;
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/messagemid.png");
  background-size: 100%;
  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;
  padding: 0.5% 0;
}
.mainarea .firstbg__under-title {
  width: 25%;
  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;
  font-size: 1vw;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 0 0 5px #fff;
}
.mainarea .firstbg__under-title img {
  width: 12vw;
  margin-bottom: 1vw;
}
.mainarea .firstbg__under-title h2 {
  font-size: 1vw;
}
.mainarea .firstbg__under p {
  font-size: 1vw;
  color: #fff;
  text-shadow: 0 0 5px #fff;
  width: 50%;
}
.mainarea .firstbg__under-btn {
  width: 25%;
  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;
  color: #fff;
  font-weight: 700;
  font-size: 1.2vw;
  text-align: center;
}
.mainarea .firstbg__under-btn a {
  min-width: 60%;
  padding: 1vw 0;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mainarea .firstbg__under-btn a:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mainarea .firstbg__under-btn a:nth-child(1) {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/btnsiob.png");
  background-size: 100% 100%;
  margin-bottom: 0.75vw;
  text-shadow: 0 0.1vw 0.1vw rgba(0, 0, 0, 0.4666666667);
}
.mainarea .firstbg__under-btn a:nth-child(2) {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/btnstart.png");
  background-size: 100% 100%;
  text-shadow: 0 0.1vw 0.1vw rgba(0, 0, 0, 0.4666666667);
}
.mainarea .firstbg__backtostart {
  position: absolute;
  top: 69%;
  left: 50%;
  z-index: 5;
  width: 5%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mainarea .firstbg__backtostart:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mainarea .firstbg__backtostart p {
  color: #fff;
  font-size: 1.2vw;
  text-align: center;
  width: 100%;
  text-shadow: 0 0 5px #fff;
  position: absolute;
  top: 45%;
  font-weight: 700;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mainarea .firstbg__arrowl {
  position: absolute;
  top: 69%;
  left: 42.5%;
  z-index: 5;
  width: 5%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mainarea .firstbg__arrowl:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mainarea .firstbg__arrowr {
  position: absolute;
  top: 69%;
  left: 57.5%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 5;
  width: 5%;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mainarea .firstbg__arrowr:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mainarea .firstbg__showdow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  -webkit-animation: showdow 5s infinite;
          animation: showdow 5s infinite;
  pointer-events: none;
}
.mainarea .firstbg__main {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  z-index: 5;
  -webkit-animation: moveduck 5s infinite;
          animation: moveduck 5s infinite;
  pointer-events: none;
}
.mainarea .firstbg__mainf {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 5;
  -webkit-animation: moveduck 5s infinite;
          animation: moveduck 5s infinite;
  pointer-events: none;
  opacity: 0;
}
.mainarea .firstbg__maindot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.mainarea .firstbg__maindotf {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.mainarea .firstbg__00 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  -webkit-animation: bgall 10s infinite;
          animation: bgall 10s infinite;
}
.mainarea .firstbg__01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  -webkit-animation: light 10s infinite;
          animation: light 10s infinite;
}
.mainarea .firstbg__02 {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 1;
}
.mainarea .firstbg__cc {
  width: 600px;
  height: 200px;
  border: 30px solid transparent;
  -o-border-image: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/messagemid.png") 100 repeat;
     border-image: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/messagemid.png") 100 repeat;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.mainarea .popout2block {
  position: absolute;
  top: 50.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 73.4%;
  background: rgba(0, 0, 0, 0.7137254902);
  z-index: 40;
  height: 41vw;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .mainarea .popout2block {
    width: 100%;
    height: 100vh;
    position: fixed;
    display: none;
  }
}
.mainarea .popout2block h3 {
  color: #fff;
  position: absolute;
  top: 7.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.7vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout2block h3 {
    font-size: 6vw;
    text-align: center;
    width: 100%;
  }
}
.mainarea .popout2block h3 img {
  position: absolute;
  max-width: none;
  width: 150%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mainarea .popout2block__block {
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 85%;
  height: 27vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout2block__block {
    height: auto;
  }
}
.mainarea .popout2block__block .pull-left {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 100%;
  width: 5%;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .mainarea .popout2block__block .pull-left {
    width: 15%;
    right: 95%;
  }
}
.mainarea .popout2block__block .pull-left img {
  width: 100%;
  max-width: none;
}
.mainarea .popout2block__block .pull-right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 100%;
  width: 5%;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .mainarea .popout2block__block .pull-right {
    width: 15%;
    left: 95%;
  }
}
.mainarea .popout2block__block .pull-right img {
  width: 100%;
  max-width: none;
}
.mainarea .popout2block__block-item {
  width: 33%;
  position: relative;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-filter: brightness(70%);
          filter: brightness(70%);
}
@media screen and (max-width: 767px) {
  .mainarea .popout2block__block-item {
    padding: 10vw 0;
  }
}
@media screen and (max-width: 767px) {
  .mainarea .popout2block__block-item > img {
    height: 103%;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
.mainarea .popout2block__block-item.active {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-filter: brightness(100%);
          filter: brightness(100%);
}
.mainarea .popout2block__block-item--text {
  position: absolute;
  top: 11%;
  width: 80%;
  left: 10%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .mainarea .popout2block__block-item--text {
    position: relative;
  }
}
.mainarea .popout2block__block-item--text img {
  width: 100%;
}
.mainarea .popout2block__block-item--text h4 {
  color: #fff;
  font-size: 1.2vw;
  line-height: 1;
  padding: 0.5vw 0;
}
@media screen and (max-width: 767px) {
  .mainarea .popout2block__block-item--text h4 {
    font-size: 6vw;
    padding: 2vw 0;
  }
}
.mainarea .popout2block__block-item--text p {
  color: #fff;
  font-size: 0.8vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout2block__block-item--text p {
    font-size: 3vw;
  }
}
.mainarea .popout3block {
  position: absolute;
  top: 50.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 73.4%;
  background: rgba(0, 0, 0, 0.7137254902);
  z-index: 40;
  height: 41vw;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block {
    width: 100%;
    height: 100vh;
    position: fixed;
    display: none;
  }
}
.mainarea .popout3block h3 {
  color: #fff;
  position: absolute;
  top: 7.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.7vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block h3 {
    font-size: 6vw;
    text-align: center;
    width: 100%;
  }
}
.mainarea .popout3block h3 img {
  position: absolute;
  max-width: none;
  width: 150%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mainarea .popout3block__slick {
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 90%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block__slick {
    height: 100%;
  }
}
.mainarea .popout3block__slick .pull-left {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 100%;
  width: 8%;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block__slick .pull-left {
    width: 15%;
    right: 90%;
  }
}
.mainarea .popout3block__slick .pull-left img {
  width: 100%;
  max-width: none;
}
.mainarea .popout3block__slick .pull-right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 100%;
  width: 8%;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block__slick .pull-right {
    width: 15%;
    left: 90%;
  }
}
.mainarea .popout3block__slick .pull-right img {
  width: 100%;
  max-width: none;
}
.mainarea .popout3block__slick-item {
  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: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mainarea .popout3block__slick-item h5 {
  color: #fff;
  font-size: 1.4vw;
  line-height: 1;
  text-shadow: 0 0 1vw #2e9df4, 0 0 0.5vw #2e9df4;
  text-align: center;
  padding: 1vw 0;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block__slick-item h5 {
    font-size: 6vw;
    padding: 2vw 0;
  }
}
.mainarea .popout3block__slick-item p {
  color: #fff;
  font-size: 1vw;
  line-height: 1;
  width: 80%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block__slick-item p {
    font-size: 4vw;
    padding: 2vw 0;
    line-height: 1.4;
  }
}
.mainarea .popout3block__slick-item img {
  margin-top: 3vw;
  width: 50%;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block__slick-item img {
    width: 80%;
  }
}
.mainarea .popout3block__block {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/bg04.png");
  background-size: 100% 100%;
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 75%;
  height: 33vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block__block {
    background: none;
    height: 80%;
    width: 90%;
  }
}
.mainarea .popout3block__block-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.mainarea .popout3block__block-box > div {
  width: 27%;
  position: relative;
  -webkit-filter: grayscale(40%) brightness(80%);
          filter: grayscale(40%) brightness(80%);
  cursor: pointer;
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block__block-box > div {
    width: 45%;
  }
}
.mainarea .popout3block__block-box > div:hover {
  -webkit-filter: grayscale(0%) brightness(100%);
          filter: grayscale(0%) brightness(100%);
}
.mainarea .popout3block__block-box > div p {
  position: absolute;
  color: #fff;
  font-weight: 900;
  color: #fff;
  top: 65%;
  width: 50%;
  text-align: center;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 0.8vw;
  line-height: 1.1;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block__block-box > div p {
    font-size: 4vw;
  }
}
.mainarea .popout3block__block-btn {
  position: relative;
}
.mainarea .popout3block__block-logo {
  position: absolute;
  top: 43%;
  width: 27%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mainarea .popout3block__block-forscroll {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%;
  padding: 0 2.5%;
  padding-left: 5%;
  height: 90%;
  overflow: auto;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  .mainarea .popout3block__block-forscroll {
    width: 100%;
    height: 100%;
  }
}
.mainarea .popout3block__block-forscroll::-webkit-scrollbar {
  width: 0.5vw;
}
.mainarea .popout3block__block-forscroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}
.mainarea .popout3block__block-forscroll::-webkit-scrollbar-thumb {
  background: #2e9df4;
  border-radius: 0.5vw;
}
.mainarea .popout3block__block-forscroll::-webkit-scrollbar-thumb:hover {
  background: #2e9df4;
  -webkit-filter: drop-shadow(0 0 5px #2e9df4);
          filter: drop-shadow(0 0 5px #2e9df4);
}
.mainarea .popout3block__block-forscroll::-webkit-scrollbar-thumb:window-inactive {
  background: #2e9df4;
  -webkit-filter: drop-shadow(0 0 5px #2e9df4);
          filter: drop-shadow(0 0 5px #2e9df4);
}
.mainarea .popoutblock {
  position: absolute;
  top: 50.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 73.4%;
  background: rgba(0, 0, 0, 0.7137254902);
  z-index: 40;
  height: 41vw;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  .mainarea .popoutblock {
    width: 100%;
    height: 100vh;
    position: fixed;
    display: none;
  }
}
.mainarea .popoutblock h3 {
  color: #fff;
  position: absolute;
  top: 7.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.7vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popoutblock h3 {
    font-size: 6vw;
    text-align: center;
    width: 100%;
  }
}
.mainarea .popoutblock h3 img {
  position: absolute;
  max-width: none;
  width: 150%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mainarea .popoutblock__block {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/bg03.png");
  background-size: 100% 100%;
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 75%;
  height: 33vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popoutblock__block {
    background: none;
    height: 80%;
    width: 90%;
  }
}
.mainarea .popoutblock__block-arrm {
  position: absolute;
  z-index: 3;
  right: 102%;
  max-width: none;
  width: 3%;
  opacity: 0;
}
.mainarea .popoutblock__block-top {
  position: absolute;
  bottom: 95%;
}
.mainarea .popoutblock__block-bom {
  position: absolute;
  top: 95%;
}
.mainarea .popoutblock__block-btop {
  position: absolute;
  bottom: calc(100% - 1vw);
}
.mainarea .popoutblock__block-bbom {
  position: absolute;
  top: calc(100% - 2vw);
}
.mainarea .popoutblock__block-btab {
  position: relative;
  opacity: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.mainarea .popoutblock__block-btab.active {
  opacity: 1;
  height: auto;
  padding: 1vw 0;
  padding-bottom: 2vw;
}
.mainarea .popoutblock__block-btab > div {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/dmid.png");
  background-size: 100%;
  color: #fff;
  font-size: 1vw;
  font-weight: 400;
  padding: 0 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 767px) {
  .mainarea .popoutblock__block-btab > div {
    padding: 0 5vw;
    font-size: 4vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.mainarea .popoutblock__block-btab > div p {
  width: 55%;
  padding-right: 1vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popoutblock__block-btab > div p {
    width: 100%;
    padding: 0;
    padding: 5vw 0;
  }
}
.mainarea .popoutblock__block-btab > div img {
  margin-top: 0.5vw;
  width: 45%;
}
@media screen and (max-width: 767px) {
  .mainarea .popoutblock__block-btab > div img {
    width: 100%;
    padding: 0;
  }
}
.mainarea .popoutblock__block-btab > div .slickinside {
  width: 50%;
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  .mainarea .popoutblock__block-btab > div .slickinside {
    width: 100%;
  }
}
.mainarea .popoutblock__block-btab > div .slickinside img {
  display: block;
  width: 100%;
}
.mainarea .popoutblock__block-tab {
  position: relative;
  margin: 1vw 0;
  -webkit-filter: grayscale(80%);
          filter: grayscale(80%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .mainarea .popoutblock__block-tab {
    margin: 3vw 0;
  }
}
.mainarea .popoutblock__block-tab.active {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}
.mainarea .popoutblock__block-tab.active .popoutblock__block-arrm {
  opacity: 1;
}
.mainarea .popoutblock__block-tab div {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/mebmid.png");
  background-size: 100%;
  color: #fff;
  font-size: 1.2vw;
  font-weight: 700;
  padding: 0 2vw;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  .mainarea .popoutblock__block-tab div {
    font-size: 4vw;
    padding: 0 5vw;
  }
}
.mainarea .popoutblock__block-forscroll {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%;
  padding: 0 2.5%;
  padding-left: 5%;
  height: 80%;
  overflow: auto;
}
@media screen and (max-width: 767px) {
  .mainarea .popoutblock__block-forscroll {
    width: 100%;
    height: 100%;
  }
}
.mainarea .popoutblock__block-forscroll::-webkit-scrollbar {
  width: 0.5vw;
}
.mainarea .popoutblock__block-forscroll::-webkit-scrollbar-track {
  background: #000000;
}
.mainarea .popoutblock__block-forscroll::-webkit-scrollbar-thumb {
  background: #b19ff4;
  border-radius: 0.5vw;
}
.mainarea .popoutblock__block-forscroll::-webkit-scrollbar-thumb:hover {
  background: #b19ff4;
  -webkit-filter: drop-shadow(0 0 5px #b19ff4);
          filter: drop-shadow(0 0 5px #b19ff4);
}
.mainarea .popoutblock__block-forscroll::-webkit-scrollbar-thumb:window-inactive {
  background: #b19ff4;
  -webkit-filter: drop-shadow(0 0 5px #b19ff4);
          filter: drop-shadow(0 0 5px #b19ff4);
}
.mainarea .popout6block {
  position: absolute;
  top: 50.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 73.4%;
  background: rgba(0, 0, 0, 0.7137254902);
  z-index: 40;
  height: 41vw;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  .mainarea .popout6block {
    width: 100%;
    height: 100vh;
    position: fixed;
    display: none;
  }
}
.mainarea .popout6block h3 {
  color: #fff;
  position: absolute;
  top: 7.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.7vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout6block h3 {
    font-size: 6vw;
    text-align: center;
    width: 100%;
  }
}
.mainarea .popout6block h3 img {
  position: absolute;
  max-width: none;
  width: 150%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mainarea .popout6block__block {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/bg03.png");
  background-size: 100% 100%;
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 75%;
  height: 33vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout6block__block {
    background: none;
    height: 80%;
    width: 90%;
  }
}
.mainarea .popout6block__block-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.mainarea .popout6block__block-box > div {
  width: calc(33.3333333333% - 1vw);
  margin: 0.5vw 0;
}
@media screen and (max-width: 767px) {
  .mainarea .popout6block__block-box > div {
    width: 100%;
  }
}
.mainarea .popout6block__block-box > div img {
  width: 100%;
}
.mainarea .popout6block__block-forscroll {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%;
  padding: 0 2.5%;
  padding-left: 5%;
  height: 80%;
  overflow: auto;
}
@media screen and (max-width: 767px) {
  .mainarea .popout6block__block-forscroll {
    width: 100%;
    height: 100%;
  }
}
.mainarea .popout6block__block-forscroll::-webkit-scrollbar {
  width: 0.5vw;
}
.mainarea .popout6block__block-forscroll::-webkit-scrollbar-track {
  background: #000000;
}
.mainarea .popout6block__block-forscroll::-webkit-scrollbar-thumb {
  background: #b19ff4;
  border-radius: 0.5vw;
}
.mainarea .popout6block__block-forscroll::-webkit-scrollbar-thumb:hover {
  background: #b19ff4;
  -webkit-filter: drop-shadow(0 0 5px #b19ff4);
          filter: drop-shadow(0 0 5px #b19ff4);
}
.mainarea .popout6block__block-forscroll::-webkit-scrollbar-thumb:window-inactive {
  background: #b19ff4;
  -webkit-filter: drop-shadow(0 0 5px #b19ff4);
          filter: drop-shadow(0 0 5px #b19ff4);
}
.mainarea .popout5block {
  position: absolute;
  top: 50.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 73.4%;
  background: rgba(0, 0, 0, 0.7137254902);
  z-index: 40;
  height: 41vw;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block {
    width: 100%;
    height: 100vh;
    position: fixed;
    display: none;
  }
}
.mainarea .popout5block h3 {
  color: #fff;
  position: absolute;
  top: 7.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.7vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block h3 {
    font-size: 6vw;
    text-align: center;
    width: 100%;
  }
}
.mainarea .popout5block h3 img {
  position: absolute;
  max-width: none;
  width: 150%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mainarea .popout5block__block {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/bg03.png");
  background-size: 100% 100%;
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 75%;
  height: 33vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block {
    background: none;
    height: 80%;
    width: 90%;
  }
}
.mainarea .popout5block__block-arrm {
  position: absolute;
  z-index: 3;
  right: 102%;
  max-width: none;
  width: 3%;
  opacity: 0;
}
.mainarea .popout5block__block-top {
  position: absolute;
  bottom: 95%;
}
.mainarea .popout5block__block-bom {
  position: absolute;
  top: 95%;
}
.mainarea .popout5block__block-btop {
  position: absolute;
  bottom: calc(100% - 1vw);
}
.mainarea .popout5block__block-bbom {
  position: absolute;
  top: calc(100% - 2vw);
}
.mainarea .popout5block__block-btab {
  position: relative;
  opacity: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.mainarea .popout5block__block-btab.active {
  padding: 1vw 0;
  padding-bottom: 2vw;
  opacity: 1;
  height: auto;
}
.mainarea .popout5block__block-btab .qrbox {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/dmid.png");
  background-size: 100%;
  color: #fff;
  font-size: 1vw;
  font-weight: 400;
  padding: 0 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-btab .qrbox {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.mainarea .popout5block__block-btab .qrbox a {
  width: 30%;
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-btab .qrbox a {
    margin: 0 2vw;
  }
}
.mainarea .popout5block__block-btab .qrbox a img {
  width: 100%;
}
.mainarea .popout5block__block-btab .qrbox a p {
  color: #fff;
  font-weight: 900;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-btab .qrbox a p {
    font-size: 4vw;
  }
}
.mainarea .popout5block__block-btab > div {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/dmid.png");
  background-size: 100%;
  color: #fff;
  font-size: 1vw;
  font-weight: 400;
  padding: 0 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-btab > div {
    padding: 0 5vw;
    font-size: 4vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.mainarea .popout5block__block-btab > div.moreinfo {
  display: block;
}
.mainarea .popout5block__block-btab > div.moreinfo > p {
  width: 100%;
}
.mainarea .popout5block__block-btab > div.moreinfo > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 2vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-btab > div.moreinfo > div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.mainarea .popout5block__block-btab > div.moreinfo > div p {
  padding-right: 1vw;
  margin-top: 2vw;
  width: 55%;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-btab > div.moreinfo > div p {
    width: 100%;
    padding: 0;
    padding: 5vw 0;
  }
}
.mainarea .popout5block__block-btab > div.moreinfo > div img {
  margin-top: 0.5vw;
  width: 45%;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-btab > div.moreinfo > div img {
    width: 100%;
    padding: 0;
  }
}
.mainarea .popout5block__block-btab > div p {
  padding-right: 1vw;
}
.mainarea .popout5block__block-btab > div img {
  margin-top: 0.5vw;
  min-width: 45%;
  max-width: 45%;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-btab > div img {
    min-width: 100%;
    max-width: 100%;
  }
}
.mainarea .popout5block__block-tab {
  position: relative;
  margin: 1vw 0;
  -webkit-filter: grayscale(80%);
          filter: grayscale(80%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-tab {
    margin: 3vw 0;
  }
}
.mainarea .popout5block__block-tab.active {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}
.mainarea .popout5block__block-tab.active .popout5block__block-arrm {
  opacity: 1;
}
.mainarea .popout5block__block-tab div {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/mebmid.png");
  background-size: 100%;
  color: #fff;
  padding: 0 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  z-index: 5;
}
.mainarea .popout5block__block-tab div span {
  font-size: 1vw;
  line-height: 1.1;
  font-weight: 400;
  text-shadow: 0 0 0.5vw #ffffff;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-tab div span {
    font-size: 4vw;
    padding: 0vw 5vw 2vw 5vw;
  }
}
.mainarea .popout5block__block-tab div span.biggera {
  font-weight: 700;
  font-size: 1.2vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-tab div span.biggera {
    font-size: 6vw;
    padding: 2vw 5vw 0 5vw;
  }
}
.mainarea .popout5block__block-forscroll {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%;
  padding: 0 2.5%;
  padding-left: 5%;
  height: 80%;
  overflow: auto;
}
@media screen and (max-width: 767px) {
  .mainarea .popout5block__block-forscroll {
    width: 100%;
    height: 100%;
  }
}
.mainarea .popout5block__block-forscroll::-webkit-scrollbar {
  width: 0.5vw;
}
.mainarea .popout5block__block-forscroll::-webkit-scrollbar-track {
  background: #000000;
}
.mainarea .popout5block__block-forscroll::-webkit-scrollbar-thumb {
  background: #b19ff4;
  border-radius: 0.5vw;
}
.mainarea .popout5block__block-forscroll::-webkit-scrollbar-thumb:hover {
  background: #b19ff4;
  -webkit-filter: drop-shadow(0 0 5px #b19ff4);
          filter: drop-shadow(0 0 5px #b19ff4);
}
.mainarea .popout5block__block-forscroll::-webkit-scrollbar-thumb:window-inactive {
  background: #b19ff4;
  -webkit-filter: drop-shadow(0 0 5px #b19ff4);
          filter: drop-shadow(0 0 5px #b19ff4);
}
.mainarea .popout4block {
  position: absolute;
  top: 50.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 73.4%;
  background: rgba(0, 0, 0, 0.7137254902);
  z-index: 40;
  height: 41vw;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .mainarea .popout4block {
    width: 100%;
    height: 100vh;
    position: fixed;
    display: none;
  }
}
.mainarea .popout4block h3 {
  color: #fff;
  position: absolute;
  top: 7.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.7vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout4block h3 {
    font-size: 6vw;
    text-align: center;
    width: 100%;
  }
}
.mainarea .popout4block h3 img {
  position: absolute;
  max-width: none;
  width: 150%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mainarea .popout4block__block {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/bg03.png");
  background-size: 100% 100%;
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 75%;
  height: 33vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout4block__block {
    background: none;
    height: 80%;
    width: 90%;
  }
}
.mainarea .popout4block__block-arrm {
  position: absolute;
  z-index: 3;
  right: 102%;
  max-width: none;
  width: 3%;
  opacity: 0;
}
.mainarea .popout4block__block-top {
  position: absolute;
  bottom: 95%;
}
.mainarea .popout4block__block-bom {
  position: absolute;
  top: 95%;
}
.mainarea .popout4block__block-btop {
  position: absolute;
  bottom: calc(100% - 1vw);
}
.mainarea .popout4block__block-bbom {
  position: absolute;
  top: calc(100% - 2vw);
}
.mainarea .popout4block__block-btab {
  position: relative;
  opacity: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.mainarea .popout4block__block-btab.active {
  opacity: 1;
  height: auto;
  padding: 1vw 0;
  padding-bottom: 2vw;
}
.mainarea .popout4block__block-btab div {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/dmid.png");
  background-size: 100%;
  color: #fff;
  font-size: 1vw;
  font-weight: 400;
  padding: 0 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .mainarea .popout4block__block-btab div {
    padding: 0 5vw;
    font-size: 4vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.mainarea .popout4block__block-btab div p {
  padding-right: 1vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout4block__block-btab div p {
    width: 100%;
    padding: 0;
    padding: 5vw 0;
  }
}
.mainarea .popout4block__block-btab div img {
  margin-top: 0.5vw;
  min-width: 45%;
  max-width: 45%;
}
@media screen and (max-width: 767px) {
  .mainarea .popout4block__block-btab div img {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0;
  }
}
.mainarea .popout4block__block-tab {
  position: relative;
  margin: 1vw 0;
  -webkit-filter: grayscale(80%);
          filter: grayscale(80%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .mainarea .popout4block__block-tab {
    margin: 3vw 0;
  }
}
.mainarea .popout4block__block-tab.active {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}
.mainarea .popout4block__block-tab.active .popout4block__block-arrm {
  opacity: 1;
}
.mainarea .popout4block__block-tab div {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/mebmid.png");
  background-size: 100%;
  color: #fff;
  padding: 0 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  z-index: 5;
}
.mainarea .popout4block__block-tab div span {
  font-size: 1vw;
  line-height: 1.1;
  font-weight: 400;
  text-shadow: 0 0 0.5vw #ffffff;
}
@media screen and (max-width: 767px) {
  .mainarea .popout4block__block-tab div span {
    font-size: 4vw;
    padding: 0vw 5vw 2vw 5vw;
  }
}
.mainarea .popout4block__block-tab div span.biggera {
  font-weight: 700;
  font-size: 1.2vw;
}
@media screen and (max-width: 767px) {
  .mainarea .popout4block__block-tab div span.biggera {
    font-size: 6vw;
    padding: 2vw 5vw 0 5vw;
  }
}
.mainarea .popout4block__block-forscroll {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%;
  padding: 0 2.5%;
  padding-left: 5%;
  height: 80%;
  overflow: auto;
}
@media screen and (max-width: 767px) {
  .mainarea .popout4block__block-forscroll {
    width: 100%;
    height: 100%;
  }
}
.mainarea .popout4block__block-forscroll::-webkit-scrollbar {
  width: 0.5vw;
}
.mainarea .popout4block__block-forscroll::-webkit-scrollbar-track {
  background: #000000;
}
.mainarea .popout4block__block-forscroll::-webkit-scrollbar-thumb {
  background: #b19ff4;
  border-radius: 0.5vw;
}
.mainarea .popout4block__block-forscroll::-webkit-scrollbar-thumb:hover {
  background: #b19ff4;
  -webkit-filter: drop-shadow(0 0 5px #b19ff4);
          filter: drop-shadow(0 0 5px #b19ff4);
}
.mainarea .popout4block__block-forscroll::-webkit-scrollbar-thumb:window-inactive {
  background: #b19ff4;
  -webkit-filter: drop-shadow(0 0 5px #b19ff4);
          filter: drop-shadow(0 0 5px #b19ff4);
}
.mainarea .menublock {
  position: absolute;
  top: 50.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 74%;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.mainarea .menublock__base {
  width: 100%;
  position: relative;
  opacity: 1;
  pointer-events: none;
}
.mainarea .menublock__front {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.mainarea .menublock__front-drac {
  position: absolute;
  top: 17%;
  left: 18%;
  width: 20%;
  height: 44%;
  opacity: 0.7;
  background: radial-gradient(circle at bottom center, #1f70c7, rgba(23, 81, 142, 0));
  z-index: 5;
  pointer-events: none;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0 0 1500px 1500px;
}
.mainarea .menublock__front-drac--0 {
  -webkit-animation: lights 1.8s infinite 0s;
          animation: lights 1.8s infinite 0s;
}
.mainarea .menublock__front-drac--1 {
  top: 45%;
  left: 24%;
  width: 19%;
  -webkit-animation: lights 1.8s infinite -1.5s;
          animation: lights 1.8s infinite -1.5s;
  background: radial-gradient(circle at bottom center, #4f2fee, rgba(79, 47, 238, 0));
}
.mainarea .menublock__front-drac--1 div {
  background: radial-gradient(circle at bottom center, #5636f5, rgba(79, 47, 238, 0)) !important;
}
.mainarea .menublock__front-drac--2 {
  top: 22%;
  left: 60%;
  width: 21%;
  -webkit-animation: lights 1.8s infinite -0.9s;
          animation: lights 1.8s infinite -0.9s;
  background: radial-gradient(circle at bottom center, #4c92e2, rgba(30, 82, 142, 0));
}
.mainarea .menublock__front-drac--2 div {
  background: radial-gradient(circle at bottom center, #4c92e2, rgba(30, 82, 142, 0)) !important;
}
.mainarea .menublock__front-drac--3 {
  top: -3%;
  left: 54%;
  width: 19%;
  -webkit-animation: lights 1.8s infinite -0.6s;
          animation: lights 1.8s infinite -0.6s;
  background: radial-gradient(circle at bottom center, #786b17, rgba(120, 107, 23, 0));
}
.mainarea .menublock__front-drac--3 div {
  background: radial-gradient(circle at bottom center, #786b17, rgba(120, 107, 23, 0)) !important;
}
.mainarea .menublock__front-drac--4 {
  top: 10%;
  left: 42.5%;
  width: 19%;
  -webkit-animation: lights 1.8s infinite -1.2s;
          animation: lights 1.8s infinite -1.2s;
  background: radial-gradient(circle at bottom center, #6d74ec, rgba(55, 60, 168, 0));
}
.mainarea .menublock__front-drac--4 div {
  background: radial-gradient(circle at bottom center, #6269ee, rgba(55, 60, 168, 0)) !important;
}
.mainarea .menublock__front-drac--5 {
  top: 60%;
  left: 46.5%;
  width: 19%;
  -webkit-animation: lights 1.8s infinite -0.3s;
          animation: lights 1.8s infinite -0.3s;
  background: radial-gradient(circle at bottom center, #ab25d8, rgba(88, 15, 112, 0));
}
.mainarea .menublock__front-drac--5 div {
  background: radial-gradient(circle at bottom center, #ba36e6, rgba(88, 15, 112, 0)) !important;
}
.mainarea .menublock__front-drac div {
  position: absolute;
  top: 65%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 65%;
  height: 100%;
  background: radial-gradient(circle at bottom center, #1f70c7, rgba(23, 81, 142, 0));
}
.mainarea .menublock__font {
  position: absolute;
}
.mainarea .menublock__font--0 {
  top: 65%;
  left: 17.5%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.5vw;
  color: #fff;
  font-weight: 900;
  z-index: 5;
  text-align: center;
  text-shadow: 0 0 1.2vw #8448e6, 0 0 0.6vw #8448e6, 0 0 0.3vw #8448e6;
}
.mainarea .menublock__font--1 {
  top: 22%;
  left: 27%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.5vw;
  color: #fff;
  font-weight: 900;
  z-index: 5;
  text-align: center;
  text-shadow: 0 0 1.2vw #3ef5db, 0 0 0.6vw #3ef5db, 0 0 0.3vw #3ef5db;
  opacity: 0;
}
.mainarea .menublock__font--2 {
  top: 19%;
  left: 51%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.5vw;
  color: #fff;
  font-weight: 900;
  z-index: 5;
  text-align: center;
  text-shadow: 0 0 1.2vw #6d75e6, 0 0 0.6vw #6d75e6, 0 0 0.3vw #6d75e6;
  opacity: 0;
}
.mainarea .menublock__font--3 {
  top: 30%;
  left: 72%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.5vw;
  color: #fff;
  font-weight: 900;
  z-index: 5;
  text-align: center;
  text-shadow: 0 0 1.2vw #4ef6db, 0 0 0.6vw #4ef6db, 0 0 0.3vw #4ef6db;
  opacity: 0;
}
.mainarea .menublock__font--4 {
  top: 10%;
  left: 73%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.5vw;
  color: #fff;
  font-weight: 900;
  z-index: 5;
  text-align: center;
  text-shadow: 0 0 1.2vw #fdd302, 0 0 0.6vw #fdd302, 0 0 0.3vw #fdd302;
  opacity: 0;
}
.mainarea .menublock__font--5 {
  top: 56%;
  left: 56.5%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.5vw;
  color: #fff;
  font-weight: 900;
  z-index: 5;
  text-align: center;
  text-shadow: 0 0 1.2vw #fc7ce8, 0 0 0.6vw #fc7ce8, 0 0 0.3vw #fc7ce8;
  opacity: 0;
}
.mainarea .menublock__hitbox-0 {
  position: absolute;
  top: 61%;
  left: 25%;
  width: 12vw;
  height: 12vw;
  z-index: 3;
  cursor: pointer;
}
.mainarea .menublock__hitbox-1 {
  position: absolute;
  top: 31%;
  left: 20%;
  width: 12vw;
  height: 12vw;
  z-index: 3;
  cursor: pointer;
}
.mainarea .menublock__hitbox-2 {
  position: absolute;
  top: 27%;
  left: 40%;
  width: 12vw;
  height: 10vw;
  z-index: 3;
  cursor: pointer;
}
.mainarea .menublock__hitbox-3 {
  position: absolute;
  top: 39%;
  left: 62%;
  width: 12vw;
  height: 12vw;
  z-index: 3;
  cursor: pointer;
}
.mainarea .menublock__hitbox-4 {
  position: absolute;
  top: 10%;
  left: 56%;
  width: 12vw;
  height: 12vw;
  z-index: 3;
  cursor: pointer;
}
.mainarea .menublock__hitbox-5 {
  position: absolute;
  top: 66%;
  left: 50%;
  width: 12vw;
  height: 12vw;
  z-index: 3;
  cursor: pointer;
}
.mainarea .backtofirst {
  position: absolute;
  left: 90%;
  top: 80%;
  width: 7%;
  z-index: 20;
  cursor: pointer;
}
.mainarea .backtofirst:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mainarea .backtofirst p {
  color: #fff;
  font-weight: 900;
  position: absolute;
  top: 60%;
  font-size: 1vw;
  text-shadow: 0 0 0.6vw #ffffff, 0 0 0.3vw #ffffff;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mainarea .inbacktofirst {
  position: absolute;
  left: 90%;
  top: 80%;
  width: 7%;
  z-index: 20;
  cursor: pointer;
  -webkit-filter: hue-rotate(45deg);
          filter: hue-rotate(45deg);
}
@media screen and (max-width: 767px) {
  .mainarea .inbacktofirst {
    left: 85%;
    top: 90%;
    width: 15%;
  }
}
.mainarea .inbacktofirst:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff) hue-rotate(45deg);
          filter: drop-shadow(0 0 5px #fff) hue-rotate(45deg);
}
.mainarea .inbacktofirst p {
  color: #fff;
  font-weight: 900;
  position: absolute;
  top: 60%;
  font-size: 1vw;
  text-shadow: 0 0 0.6vw #ffffff, 0 0 0.3vw #ffffff;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .mainarea .inbacktofirst p {
    font-size: 3vw;
  }
}
.mainarea .in2backtofirst {
  position: absolute;
  left: 90%;
  top: 80%;
  width: 7%;
  z-index: 20;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .mainarea .in2backtofirst {
    left: 85%;
    top: 90%;
    width: 15%;
  }
}
.mainarea .in2backtofirst:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mainarea .in2backtofirst p {
  color: #fff;
  font-weight: 900;
  position: absolute;
  top: 60%;
  font-size: 1vw;
  text-shadow: 0 0 0.6vw #ffffff, 0 0 0.3vw #ffffff;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .mainarea .in2backtofirst p {
    font-size: 3vw;
  }
}
.mainarea .in3backtofirst {
  position: absolute;
  left: 90%;
  top: 80%;
  width: 7%;
  z-index: 20;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .mainarea .in3backtofirst {
    left: 85%;
    top: 90%;
    width: 15%;
  }
}
.mainarea .in3backtofirst:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mainarea .in3backtofirst p {
  color: #fff;
  font-weight: 900;
  position: absolute;
  top: 60%;
  font-size: 1vw;
  text-shadow: 0 0 0.6vw #ffffff, 0 0 0.3vw #ffffff;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .mainarea .in3backtofirst p {
    font-size: 3vw;
  }
}
.mainarea .in4backtofirst {
  position: absolute;
  left: 90%;
  top: 80%;
  width: 7%;
  z-index: 20;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .mainarea .in4backtofirst {
    left: 85%;
    top: 90%;
    width: 15%;
  }
}
.mainarea .in4backtofirst:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mainarea .in4backtofirst p {
  color: #fff;
  font-weight: 900;
  position: absolute;
  top: 60%;
  font-size: 1vw;
  text-shadow: 0 0 0.6vw #ffffff, 0 0 0.3vw #ffffff;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .mainarea .in4backtofirst p {
    font-size: 3vw;
  }
}
.mainarea .in5backtofirst {
  position: absolute;
  left: 90%;
  top: 80%;
  width: 7%;
  z-index: 20;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .mainarea .in5backtofirst {
    left: 85%;
    top: 90%;
    width: 15%;
  }
}
.mainarea .in5backtofirst:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mainarea .in5backtofirst p {
  color: #fff;
  font-weight: 900;
  position: absolute;
  top: 60%;
  font-size: 1vw;
  text-shadow: 0 0 0.6vw #ffffff, 0 0 0.3vw #ffffff;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .mainarea .in5backtofirst p {
    font-size: 3vw;
  }
}
.mainarea .in6backtofirst {
  position: absolute;
  left: 90%;
  top: 80%;
  width: 7%;
  z-index: 20;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .mainarea .in6backtofirst {
    left: 85%;
    top: 90%;
    width: 15%;
  }
}
.mainarea .in6backtofirst:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mainarea .in6backtofirst p {
  color: #fff;
  font-weight: 900;
  position: absolute;
  top: 60%;
  font-size: 1vw;
  text-shadow: 0 0 0.6vw #ffffff, 0 0 0.3vw #ffffff;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .mainarea .in6backtofirst p {
    font-size: 3vw;
  }
}

@-webkit-keyframes bgall {
  0%, 100% {
    -webkit-transform: scale(1) translateY(10%);
            transform: scale(1) translateY(10%);
  }
  50% {
    -webkit-transform: scale(1.1) translateY(0%);
            transform: scale(1.1) translateY(0%);
  }
}

@keyframes bgall {
  0%, 100% {
    -webkit-transform: scale(1) translateY(10%);
            transform: scale(1) translateY(10%);
  }
  50% {
    -webkit-transform: scale(1.1) translateY(0%);
            transform: scale(1.1) translateY(0%);
  }
}
@-webkit-keyframes moveduck {
  0%, 100% {
    -webkit-transform: translateY(-1vw);
            transform: translateY(-1vw);
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes moveduck {
  0%, 100% {
    -webkit-transform: translateY(-1vw);
            transform: translateY(-1vw);
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes showdow {
  0%, 100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes showdow {
  0%, 100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes light {
  0%, 100% {
    opacity: 0;
  }
  10%, 90% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes light {
  0%, 100% {
    opacity: 0;
  }
  10%, 90% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes lights {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.18;
  }
}
@keyframes lights {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.18;
  }
}
.mobile {
  display: none;
  min-height: 100vh;
  background: #265986;
}
@media screen and (max-width: 767px) {
  .mobile {
    display: block;
  }
}
.mobile__alltext {
  margin-top: -15vw;
  position: relative;
}
.mobile__titlebox {
  width: 90%;
  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;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
}
.mobile__titlebox > img {
  width: 35vw;
  -webkit-filter: drop-shadow(0 0 1vw #265986);
          filter: drop-shadow(0 0 1vw #265986);
}
.mobile__titlebox h2 {
  color: #fff;
  font-size: 4vw;
  text-align: center;
  text-shadow: 0 0 1vw #265986, 0 0 0.5vw #265986, 0 0 1vw #265986, 0 0 0.5vw #265986, 0 0 1vw #265986, 0 0 0.5vw #265986;
  margin-top: 2vw;
}
.mobile__titlebox p {
  color: #fff;
  font-size: 3vw;
  margin-top: 2vw;
  text-align: center;
  text-shadow: 0 0 1vw #265986, 0 0 0.5vw #265986, 0 0 1vw #265986, 0 0 0.5vw #265986, 0 0 1vw #265986, 0 0 0.5vw #265986;
}
.mobile__arrowl {
  position: absolute;
  width: 20%;
  top: 80%;
  left: 5%;
  z-index: 3;
}
.mobile__arrowr {
  position: absolute;
  width: 20%;
  top: 80%;
  right: 5%;
  z-index: 3;
}
.mobile__front-dotf {
  width: 4vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 4;
  display: none;
}
.mobile__front-dotf.bactive {
  display: block;
}
.mobile__front-dotf.active .mobile__front-dotf--bigger {
  display: block;
}
.mobile__front-dotf.active .mobile__front-dotf--small {
  display: none;
}
.mobile__front-dotf--0 {
  left: 54%;
  top: 33%;
}
.mobile__front-dotf--1 {
  left: 45%;
  top: 32%;
}
.mobile__front-dotf--2 {
  left: 40%;
  top: 32%;
}
.mobile__front-dotf--3 {
  left: 28%;
  top: 34%;
}
.mobile__front-dotf--4 {
  left: 30%;
  top: 37%;
}
.mobile__front-dotf--5 {
  left: 32%;
  top: 48%;
}
.mobile__front-dotf--6 {
  left: 66%;
  top: 31.3%;
}
.mobile__front-dotf--7 {
  left: 69%;
  top: 31.15%;
}
.mobile__front-dotf--8 {
  left: 83%;
  top: 31%;
}
.mobile__front-dotf--9 {
  left: 86.5%;
  top: 34%;
}
.mobile__front-dotf--10 {
  left: 70.5%;
  top: 40%;
}
.mobile__front-dotf--11 {
  left: 74.5%;
  top: 45%;
}
.mobile__front-dotf--bigger {
  width: 100%;
  position: relative;
  display: none;
  -webkit-animation: lightsas 1s infinite;
          animation: lightsas 1s infinite;
}
.mobile__front-dotf--small {
  width: 65%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mobile__front-dot {
  width: 4vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 4;
  display: none;
}
.mobile__front-dot.bactive {
  display: block;
}
.mobile__front-dot.active .mobile__front-dot--bigger {
  display: block;
}
.mobile__front-dot.active .mobile__front-dot--small {
  display: none;
}
.mobile__front-dot--0 {
  left: 22%;
  top: 32%;
}
.mobile__front-dot--1 {
  left: 22%;
  top: 37%;
}
.mobile__front-dot--2 {
  left: 18%;
  top: 48%;
}
.mobile__front-dot--3 {
  left: 43%;
  top: 43%;
}
.mobile__front-dot--4 {
  left: 29%;
  top: 31%;
}
.mobile__front-dot--5 {
  left: 28%;
  top: 34%;
}
.mobile__front-dot--6 {
  left: 69%;
  top: 36%;
}
.mobile__front-dot--7 {
  left: 68%;
  top: 39%;
}
.mobile__front-dot--8 {
  left: 79.5%;
  top: 38.5%;
}
.mobile__front-dot--9 {
  left: 74.5%;
  top: 44.5%;
}
.mobile__front-dot--10 {
  left: 73.5%;
  top: 58.5%;
}
.mobile__front-dot--bigger {
  width: 100%;
  position: relative;
  display: none;
  -webkit-animation: lightsas 1s infinite;
          animation: lightsas 1s infinite;
}
.mobile__front-dot--small {
  width: 65%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mobile__topa {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.mobile__topa-front {
  max-width: none;
  width: 100%;
  display: none;
}
.mobile__topa-front.active {
  display: block;
}
.mobile__topa-block {
  max-width: none;
  width: 100%;
  display: none;
}
.mobile__topa-block.active {
  display: block;
}
.mobile__start {
  margin-top: 5vw;
  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;
}
.mobile__start a {
  padding: 2vw 13vw;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #fff;
  font-weight: 700;
  font-size: 5vw;
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/btnstart.png");
  background-size: 100% 100%;
  text-shadow: 0 0.1vw 0.1vw rgba(0, 0, 0, 0.4666666667);
}
.mobile__infoboxf {
  width: 100%;
  margin-top: 5vw;
  display: none;
}
.mobile__infoboxf.active {
  display: block;
}
.mobile__infoboxf .pull-right {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 15vw;
  z-index: 4;
}
.mobile__infoboxf .pull-left {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 4;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 15vw;
}
.mobile__infoboxf-item {
  width: 100%;
}
.mobile__infoboxf-item > div {
  position: relative;
  padding: 3vw 2vw;
}
.mobile__infoboxf-item h4 {
  font-size: 4vw;
  background: -webkit-linear-gradient(#b5d0dc, #68e7f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  padding-top: 2vw;
}
.mobile__infoboxf-item p {
  font-size: 4vw;
  color: #fff;
  padding-bottom: 2vw;
}
.mobile__infoboxf-item__top {
  position: absolute;
  bottom: calc(100% - 3vw);
  left: 2vw;
  z-index: 2;
  width: calc(100% - 4vw);
}
.mobile__infoboxf-item__cc {
  padding: 1.5% 5%;
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/messagemid.png");
  background-size: 100%;
}
.mobile__infoboxf-item__bot {
  position: absolute;
  top: calc(100% - 3vw);
  left: 2vw;
  z-index: 2;
  width: calc(100% - 4vw);
}
.mobile__infoboxf-item__drc {
  position: absolute;
  top: 3vw;
  right: 2vw;
  z-index: 2;
  width: 0.8%;
}
.mobile__infobox {
  width: 100%;
  margin-top: 5vw;
  display: none;
}
.mobile__infobox.active {
  display: block;
}
.mobile__infobox .pull-right {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 15vw;
  z-index: 4;
}
.mobile__infobox .pull-left {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 4;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 15vw;
}
.mobile__infobox-item {
  width: 100%;
}
.mobile__infobox-item > div {
  position: relative;
  padding: 3vw 2vw;
}
.mobile__infobox-item h4 {
  font-size: 4vw;
  background: -webkit-linear-gradient(#b5d0dc, #68e7f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  padding-top: 2vw;
}
.mobile__infobox-item p {
  font-size: 4vw;
  color: #fff;
  padding-bottom: 2vw;
}
.mobile__infobox-item__top {
  position: absolute;
  bottom: calc(100% - 3vw);
  left: 2vw;
  z-index: 2;
  width: calc(100% - 4vw);
}
.mobile__infobox-item__cc {
  padding: 1.5% 5%;
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/messagemid.png");
  background-size: 100%;
}
.mobile__infobox-item__bot {
  position: absolute;
  top: calc(100% - 3vw);
  left: 2vw;
  z-index: 2;
  width: calc(100% - 4vw);
}
.mobile__infobox-item__drc {
  position: absolute;
  top: 3vw;
  right: 2vw;
  z-index: 2;
  width: 0.8%;
}

@-webkit-keyframes lightsas {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes lightsas {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.mobilemenubox {
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/mobile/abg2.jpg");
  background-size: 100% 100%;
  z-index: 10;
  width: 100%;
  min-height: 100vh;
  display: none;
}
.mobilemenubox__backtofirst {
  position: fixed;
  left: 85%;
  top: 90%;
  width: 15%;
  z-index: 20;
  cursor: pointer;
}
.mobilemenubox__backtofirst:hover {
  -webkit-filter: drop-shadow(0 0 5px #fff);
          filter: drop-shadow(0 0 5px #fff);
}
.mobilemenubox__backtofirst p {
  color: #fff;
  font-weight: 900;
  position: absolute;
  top: 60%;
  font-size: 3vw;
  text-shadow: 0 0 0.6vw #ffffff, 0 0 0.3vw #ffffff;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mobilemenubox__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10vw 0;
  overflow: auto;
}
.mobilemenubox__block-item {
  width: 90%;
  background: url("https://storage-asset.msi.com/event/2024/NB/clawmex/images/mobile/cbg.png");
  background-size: 100% 100%;
  margin: 2vw 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 5vw;
}
.mobilemenubox__block-item p {
  font-size: 4vw;
  letter-spacing: 0.8vw;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-weight: 400;
  width: 70%;
  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;
  text-align: center;
  text-transform: uppercase;
  background: -webkit-linear-gradient(#b5d0dc, #68e7f7);
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #ffffff;
}
.mobilemenubox__block-img {
  width: 30%;
  padding-bottom: 30%;
  position: relative;
}
.mobilemenubox__block-img img {
  width: 100%;
  position: absolute;
  top: 0%;
  left: 0;
}/*# sourceMappingURL=index15.css.map */