@charset "UTF-8";
@charset "UTF-8";
@-webkit-keyframes shine {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes shine {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes AniFloat {
  0% {
    -webkit-transform: translateY(3%);
            transform: translateY(3%);
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(3%);
            transform: translateY(3%);
  }
}
@keyframes AniFloat {
  0% {
    -webkit-transform: translateY(3%);
            transform: translateY(3%);
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(3%);
            transform: translateY(3%);
  }
}
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI","Microsoft JhengHei","Noto Sans TC", "微軟正黑體", "Meiryo UI", Roboto, Helvetica, Arial, sans-serif;
  --mainTitle: 22px;
  --mainTxt: 18px;
  --mainPrice: 20px;
  --mainNote: 15px;
  --font-color-dark: #fff;
  --font-color-light: #111;
}
@media (min-width: 768px) {
  :root {
    --mainTitle: 32px;
    --mainTxt: 20px;
    --mainPrice: 20px;
    --mainNote: 15px;
  }
}
:root html:lang(ja-JP) *:not(.material-icons):not(.fa):not(.buttonicons) {
  --font: -apple-system, BlinkMacSystemFont,"Meiryo UI", Arial, sans-serif;
}

img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

picture {
  display: grid;
}

.glory {
  position: relative;
  overflow-x: hidden;
  padding-bottom: 50px;
  color: #fff;
  background-color: #000;
}
.glory a {
  color: #fff;
}
.glory .giveAway {
  position: fixed;
  max-width: 100px;
  bottom: 8%;
  right: 0.5%;
  z-index: 500;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-animation-name: AniFloat;
          animation-name: AniFloat;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.glory .giveAway:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
@media (min-width: 996px) {
  .glory .giveAway {
    max-width: 140px;
  }
}

.common__wrapper {
  padding: 30px;
  margin: 30px auto 0;
}
.common__intro {
  text-align: center;
}
.common__intro h2 {
  text-transform: uppercase;
  margin-bottom: 15px;
  font-size: 27px;
}
.common__intro p {
  margin-bottom: 15px;
}
.common__note {
  font-size: 14px;
  color: #858585;
}
.common__flex {
  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;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.common__flex--reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.common__flex--aInormal {
  -webkit-box-align: normal;
      -ms-flex-align: normal;
          align-items: normal;
}
.common__flex--aIstart {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.common__flex--jCaround {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.common__flex--jCbetween {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.common__flex--jCstart {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.common__flex--column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.common__table {
  position: relative;
  overflow: hidden;
  display: table;
  border-collapse: collapse;
  width: 100%;
  margin: 0px 0px 0px 0px;
  z-index: 1;
}
.common__table-row {
  display: table-row;
}
.common__table-th {
  display: table-cell;
  color: #fff;
  text-align: left;
  vertical-align: middle;
  padding: 5px;
  text-transform: uppercase;
}
.common__table-cell {
  display: block;
  min-width: 170px;
  color: rgba(255, 255, 255, 0.6666666667);
  text-align: left;
  padding: 5px;
  position: relative;
  font-size: 14px;
  padding: 0px 20px 0px 0px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.common__table-cell:last-child {
  color: #fff;
  padding: 0px 0px 10px 0px;
  font-size: 16px;
}
.common__table-cell .arrow-icon {
  margin: 0px 11px 0 0;
  width: 10px;
  display: none;
}
.common__table-cell a {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.common__table-cell a:hover {
  color: #c8f9ff;
}
@media (min-width: 996px) {
  .common__wrapper {
    margin: 30px auto;
  }
  .common__intro h2 {
    font-size: 35px;
  }
  .common__table {
    margin: 0px 0px 0px 10px;
  }
  .common__table-cell {
    color: #fff;
    display: table-cell;
    padding: 10px 20px 10px 5px;
    font-size: 16px;
  }
  .common__table-cell:last-child {
    padding: 10px 0px 10px 5px;
  }
  .common__table-cell .arrow-icon {
    display: inline-block;
  }
}
.common__btn {
  text-align: center;
  margin: 30px auto;
  width: 100%;
}
.common__btn a {
  display: inline-block;
  background-color: #b3f9ff;
  min-width: 250px;
  padding: 15px 15px;
  border-radius: 50px;
  color: #000;
  font-size: 22px;
  font-weight: bolder;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.common__btn a:hover {
  background-color: #d4fbff;
  -webkit-filter: drop-shadow(0 0 10px #ffffff);
          filter: drop-shadow(0 0 10px #ffffff);
}

.anchor {
  position: relative;
}
.anchor a {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  display: inline-block;
  padding: 10px 0;
  width: 50%;
  border: 1px solid #000;
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bolder;
  transition: 0.2s;
  color: #030228;
  background-size: 100% auto;
}
.anchor a:nth-child(1) {
  background-image: -webkit-gradient(linear, left top, right top, from(#efe1a9), to(#b8a869));
  background-image: linear-gradient(90deg, #efe1a9 0%, #b8a869 100%);
}
.anchor a:nth-child(2) {
  background-image: -webkit-gradient(linear, left top, right top, from(#b8a869), to(#c25fae));
  background-image: linear-gradient(90deg, #b8a869 0%, #c25fae 100%);
}
.anchor a:nth-child(3) {
  background-image: -webkit-gradient(linear, left top, right top, from(#affcfd), to(#72d0d2));
  background-image: linear-gradient(90deg, #affcfd 0%, #72d0d2 100%);
}
.anchor a:nth-child(4) {
  background-image: -webkit-gradient(linear, left top, right top, from(#72d0d2), to(#c25fae));
  background-image: linear-gradient(90deg, #72d0d2 0%, #c25fae 100%);
}
.anchor a:hover {
  color: #ffffff;
  background-size: 200% auto;
}
@media (min-width: 996px) {
  .anchor a {
    width: 33.3%;
    font-size: 20px;
    border-right: 4px solid #000;
  }
  .anchor a:nth-child(1) {
    background-image: -webkit-gradient(linear, left top, right top, from(#efe1a9), to(#b8a869));
    background-image: linear-gradient(90deg, #efe1a9 0%, #b8a869 100%);
  }
  .anchor a:nth-child(2) {
    background-image: -webkit-gradient(linear, left top, right top, from(#b8a869), to(#c25fae));
    background-image: linear-gradient(90deg, #b8a869 0%, #c25fae 100%);
  }
  .anchor a:nth-child(3) {
    background-image: -webkit-gradient(linear, left top, right top, from(#c25fae), to(#72d0d2));
    background-image: linear-gradient(90deg, #c25fae 0%, #72d0d2 100%);
  }
  .anchor a:nth-child(4) {
    background-image: -webkit-gradient(linear, left top, right top, from(#72d0d2), to(#affcfd));
    background-image: linear-gradient(90deg, #72d0d2 0%, #affcfd 100%);
  }
  .anchor a:last-child {
    border-right: none;
  }
}

.sticky {
  position: fixed;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 100%;
  z-index: 200;
}

.giveaway__section {
  margin: 30px auto 50px;
}
.giveaway__title {
  color: #e229d3;
  font-style: italic;
  margin-bottom: 30px;
}
.giveaway__box {
  position: relative;
  background: -webkit-gradient(linear, left top, right top, from(#a4239a), to(#000229));
  background: linear-gradient(90deg, #a4239a 0%, #000229 100%);
  padding: 20px;
  margin-top: 30px;
  z-index: 1;
}
.giveaway__box::before {
  z-index: 1;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 48%;
  left: 49%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 24px 0px 0px;
  background-image: url(https://storage-asset.msi.com/event/2025/CND/best-pc-build-powered-by-msi/images/GIVEAWAY-border.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100% 100%;
}
.giveaway__box figure {
  max-width: 500px;
  margin: 30px auto;
}
.giveaway__box--50::before {
  z-index: 1;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 48.8%;
  left: 47.5%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 24px 0px 0px;
  background-image: url(https://storage-asset.msi.com/event/2025/CND/best-pc-build-powered-by-msi/images/GIVEAWAY-border-xs.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100% 100%;
}
.giveaway__list {
  position: relative;
  margin: 0 auto;
}
.giveaway__list::before {
  z-index: 1;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 48%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 24px 5px 24px 5px;
  background-image: url(https://storage-asset.msi.com/event/2025/CND/best-pc-build-powered-by-msi/images/GIVEAWAY-table-border-1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100% 100%;
}
@media (min-width: 996px) {
  .giveaway__section--50 {
    width: 50%;
    max-width: 550px;
    margin: 0;
  }
  .giveaway__box figure {
    margin: 0 auto;
  }
  .giveaway__list {
    margin: 0 20px;
  }
  .giveaway__list::before {
    padding: 24px;
    left: 50%;
  }
}

.join {
  margin: 55px auto 100px;
}
.join__wrapper {
  overflow: hidden;
  height: 88vh;
}
.join__wrapper--active {
  overflow: auto;
  height: auto;
}
.join__extend {
  display: block;
  cursor: pointer;
}
.join__extend--active {
  display: none;
}
.join__collapse {
  cursor: pointer;
}

.influencers {
  position: relative;
}
.influencers__tab {
  margin: 20px 0 0;
}
.influencers__tabName {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  width: 100%;
  text-align: center;
  border: #bb7af0 1px solid;
  cursor: pointer;
  padding: 15px 0;
}
.influencers__tabName:hover {
  background-color: rgba(187, 122, 240, 0.5607843137);
}
.influencers__tabName--active {
  background-color: rgba(187, 122, 240, 0.6235294118);
}
.influencers__box {
  border: #bb7af0 1px solid;
  padding: 30px 15px;
  color: #000;
  background-color: #170f01;
  display: none;
}
.influencers__box--1 {
  background-image: url(https://storage-asset.msi.com/event/2025/CND/best-pc-build-powered-by-msi/images/influencer1-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.influencers__box--2 {
  background-image: url(https://storage-asset.msi.com/event/2025/CND/best-pc-build-powered-by-msi/images/influencer2-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.influencers__box--3 {
  background-image: url(https://storage-asset.msi.com/event/2025/CND/best-pc-build-powered-by-msi/images/influencer3-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.influencers__box--active {
  display: block;
}
.influencers__box--pic {
  padding: 0 0px;
  width: 100%;
}
.influencers__box--pic .slider-for {
  margin-bottom: 30px;
}
.influencers__box--pic .slider-nav {
  padding: 0 30px;
}
.influencers__box--pic .slider-nav img {
  max-height: 60px;
}
.influencers__box--pic .slick-prev {
  left: 2px;
}
.influencers__box--pic .slick-prev::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(https://storage-asset.msi.com/event/2025/CND/best-pc-build-powered-by-msi/images/arrow-left.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.influencers__box--pic .slick-next {
  right: 2px;
}
.influencers__box--pic .slick-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(https://storage-asset.msi.com/event/2025/CND/best-pc-build-powered-by-msi/images/arrow-right.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.influencers__box--txt {
  width: 100%;
  color: #fff;
}
.influencers__title {
  padding: 30px 0 10px;
}
.influencers__title h2 {
  font-size: 35px;
}
.influencers__title-logo {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  overflow: hidden;
  margin: 5px 0px;
  padding: 10px 10px 5px;
  border-radius: 10px;
}
.influencers__title-logo img {
  height: 30px;
}
.influencers__title-logo:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-filter: drop-shadow(0 0 10px #fff);
          filter: drop-shadow(0 0 10px #fff);
}
.influencers__content {
  padding: 30px 0;
}
.influencers__content h2 {
  margin-bottom: 5px;
}
.influencers__table td {
  min-width: unset;
}
.influencers__table td a {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.influencers__table td a:hover {
  color: #eec8ff;
}
.influencers__spec {
  padding: 20px 0;
}
.influencers__spec-title {
  padding: 0px 0 30px;
}
.influencers__spec .open-tc {
  cursor: pointer;
}
.influencers__spec .open-tc:hover .influencers__spec-arrow {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-filter: drop-shadow(0 0 10px #fff);
          filter: drop-shadow(0 0 10px #fff);
}
.influencers__spec h2 {
  font-size: 25px;
}
.influencers__spec-arrow {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  height: 35px;
  margin: 0 15px;
}
.influencers__spec-icon {
  text-align: left;
  height: 70px;
  max-width: 160px;
  margin-top: 10px;
  margin-right: 10px;
}
.influencers__spec-icon:nth-child(1) {
  margin-right: 15px;
}
.influencers__spec-iconXs {
  height: 35px;
}
.influencers__spec a {
  color: #fff;
}
.influencers__popup {
  position: relative;
  z-index: 30;
}
.influencers__popup-text {
  width: 100%;
}
.influencers__popup-text h2 {
  font-size: 30px;
  margin-bottom: 15px;
}
.influencers__popup-text h3 {
  margin-bottom: 10px;
}
.influencers__popup-text .popup-logo {
  margin: 20px 0 0;
}
.influencers__popup-text .popup-logo .influencers__spec-icon {
  max-height: 60px;
}
.influencers__popup-text .popup-logo .influencers__spec-icon:nth-child(1) {
  margin-right: 15px;
}
.influencers__popup-text .popup-logo .influencers__spec-iconXs {
  max-height: 45px;
}
.influencers__popup-table {
  text-align: center;
  width: 100%;
  padding: 20px 0px 0;
}
.influencers__popup-table .popupTable-title {
  margin-bottom: 20px;
  font-size: 18px;
}
.influencers__popup-table h4 {
  margin-bottom: 15px;
  text-align: left;
}
.influencers__popup-table .popup-table {
  width: 100%;
}
.influencers__popup-table .popup-table .list {
  -moz-text-align-last: left;
       text-align-last: left;
}
.influencers__popup-table .popup-table .list p {
  font-size: 14px;
}
@media (min-width: 768px) {
  .influencers__tabName {
    width: 33.3333333333%;
  }
  .influencers__box--pic {
    padding: 0 30px;
    width: 50%;
  }
  .influencers__box--pic .slider-nav {
    padding: 0 50px;
  }
  .influencers__box--pic .slider-nav img {
    max-height: 110px;
  }
  .influencers__box--pic .slick-prev {
    left: 20px;
  }
  .influencers__box--pic .slick-next {
    right: 20px;
  }
  .influencers__box--txt {
    width: 50%;
  }
  .influencers__title-logo {
    margin: 0 40px;
  }
  .influencers__title-logo img {
    height: 33px;
  }
  .influencers__spec-arrow {
    height: 35px;
  }
  .influencers__spec-icon {
    margin-top: 0px;
  }
  .influencers__popup-text {
    width: 30%;
  }
  .influencers__popup-text .popup-logo {
    margin: 60px 0 0;
  }
  .influencers__popup-text .popup-logo img {
    max-height: 60px;
  }
  .influencers__popup-table {
    width: 70%;
    padding: 50px 20px 0 50px;
  }
  .influencers__popup-table h4 {
    margin-bottom: 20px;
  }
  .influencers__popup-table .popup-table {
    width: 50%;
  }
}

.pbm {
  background: #000000;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(0, 0, 0)), color-stop(25%, rgb(64, 10, 50)), color-stop(50%, rgb(13, 30, 66)), color-stop(80%, rgb(54, 48, 9)), to(rgb(0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(64, 10, 50) 25%, rgb(13, 30, 66) 50%, rgb(54, 48, 9) 80%, rgb(0, 0, 0) 100%);
}
.pbm__tab {
  max-width: 1280px;
  padding: 0px 0 0;
  margin: 0px auto 20px;
}
.pbm__tabName {
  position: relative;
  width: 50%;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  z-index: 5;
  background-color: #000000;
  margin: 0px 0;
  font-weight: bolder;
  font-size: 17px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.pbm__tabName:nth-child(1) {
  position: relative;
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #4d1600 -1px, #4d1600 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#4d1600), to(#97773c)), radial-gradient(circle at 0% 100%, transparent -1px, #97773c -1px, #97773c 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#97773c), to(#e3dc7b)), radial-gradient(circle at 0% 0%, transparent -1px, #e3dc7b -1px, #e3dc7b 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#e3dc7b), to(#96763b)), radial-gradient(circle at 100% 0%, transparent -1px, #96763b -1px, #96763b 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#96763b), to(#4d1600));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #4d1600 -1px, #4d1600 1px, transparent 1px), linear-gradient(to right, #4d1600, #97773c), radial-gradient(circle at 0% 100%, transparent -1px, #97773c -1px, #97773c 1px, transparent 1px), linear-gradient(to bottom, #97773c, #e3dc7b), radial-gradient(circle at 0% 0%, transparent -1px, #e3dc7b -1px, #e3dc7b 1px, transparent 1px), linear-gradient(to left, #e3dc7b, #96763b), radial-gradient(circle at 100% 0%, transparent -1px, #96763b -1px, #96763b 1px, transparent 1px), linear-gradient(to top, #96763b, #4d1600);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
  background-color: #000000;
  z-index: 5;
}
.pbm__tabName:nth-child(1).pbm__tabName--active {
  background-color: #2f291d;
  -webkit-filter: drop-shadow(0 0 20px #e3844c);
          filter: drop-shadow(0 0 20px #e3844c);
}
.pbm__tabName:nth-child(1):hover {
  background-color: #2f291d;
  -webkit-filter: drop-shadow(0 0 20px #e3844c);
          filter: drop-shadow(0 0 20px #e3844c);
}
.pbm__tabName:nth-child(2) {
  position: relative;
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #e82178 -1px, #e82178 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#e82178), to(#e482cb)), radial-gradient(circle at 0% 100%, transparent -1px, #e482cb -1px, #e482cb 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#e482cb), to(#daa5e9)), radial-gradient(circle at 0% 0%, transparent -1px, #daa5e9 -1px, #daa5e9 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#daa5e9), to(#e47ec8)), radial-gradient(circle at 100% 0%, transparent -1px, #e47ec8 -1px, #e47ec8 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#e47ec8), to(#e82178));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #e82178 -1px, #e82178 1px, transparent 1px), linear-gradient(to right, #e82178, #e482cb), radial-gradient(circle at 0% 100%, transparent -1px, #e482cb -1px, #e482cb 1px, transparent 1px), linear-gradient(to bottom, #e482cb, #daa5e9), radial-gradient(circle at 0% 0%, transparent -1px, #daa5e9 -1px, #daa5e9 1px, transparent 1px), linear-gradient(to left, #daa5e9, #e47ec8), radial-gradient(circle at 100% 0%, transparent -1px, #e47ec8 -1px, #e47ec8 1px, transparent 1px), linear-gradient(to top, #e47ec8, #e82178);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
  background-color: #000000;
  z-index: 5;
}
.pbm__tabName:nth-child(2).pbm__tabName--active {
  background-color: #2b1d2f;
  -webkit-filter: drop-shadow(0 0 20px #e82178);
          filter: drop-shadow(0 0 20px #e82178);
}
.pbm__tabName:nth-child(2):hover {
  background-color: #2b1d2f;
  -webkit-filter: drop-shadow(0 0 20px #e82178);
          filter: drop-shadow(0 0 20px #e82178);
}
.pbm__tabName:nth-child(3) {
  position: relative;
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #385929 -1px, #385929 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#385929), to(#7b9637)), radial-gradient(circle at 0% 100%, transparent -1px, #7b9637 -1px, #7b9637 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#7b9637), to(#c1d747)), radial-gradient(circle at 0% 0%, transparent -1px, #c1d747 -1px, #c1d747 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#c1d747), to(#7b9737)), radial-gradient(circle at 100% 0%, transparent -1px, #7b9737 -1px, #7b9737 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#7b9737), to(#385929));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #385929 -1px, #385929 1px, transparent 1px), linear-gradient(to right, #385929, #7b9637), radial-gradient(circle at 0% 100%, transparent -1px, #7b9637 -1px, #7b9637 1px, transparent 1px), linear-gradient(to bottom, #7b9637, #c1d747), radial-gradient(circle at 0% 0%, transparent -1px, #c1d747 -1px, #c1d747 1px, transparent 1px), linear-gradient(to left, #c1d747, #7b9737), radial-gradient(circle at 100% 0%, transparent -1px, #7b9737 -1px, #7b9737 1px, transparent 1px), linear-gradient(to top, #7b9737, #385929);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
  background-color: #000000;
  z-index: 5;
}
.pbm__tabName:nth-child(3).pbm__tabName--active {
  background-color: #1e2d23;
  -webkit-filter: drop-shadow(0 0 20px #cfe34c);
          filter: drop-shadow(0 0 20px #cfe34c);
}
.pbm__tabName:nth-child(3):hover {
  background-color: #1e2d23;
  -webkit-filter: drop-shadow(0 0 20px #cfe34c);
          filter: drop-shadow(0 0 20px #cfe34c);
}
.pbm__tabName:nth-child(4) {
  position: relative;
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #595959 -1px, #595959 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#595959), to(#a0a0a0)), radial-gradient(circle at 0% 100%, transparent -1px, #a0a0a0 -1px, #a0a0a0 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#a0a0a0), to(#f2f2f2)), radial-gradient(circle at 0% 0%, transparent -1px, #f2f2f2 -1px, #f2f2f2 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#f2f2f2), to(#a8a8a8)), radial-gradient(circle at 100% 0%, transparent -1px, #a8a8a8 -1px, #a8a8a8 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#a8a8a8), to(#595959));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #595959 -1px, #595959 1px, transparent 1px), linear-gradient(to right, #595959, #a0a0a0), radial-gradient(circle at 0% 100%, transparent -1px, #a0a0a0 -1px, #a0a0a0 1px, transparent 1px), linear-gradient(to bottom, #a0a0a0, #f2f2f2), radial-gradient(circle at 0% 0%, transparent -1px, #f2f2f2 -1px, #f2f2f2 1px, transparent 1px), linear-gradient(to left, #f2f2f2, #a8a8a8), radial-gradient(circle at 100% 0%, transparent -1px, #a8a8a8 -1px, #a8a8a8 1px, transparent 1px), linear-gradient(to top, #a8a8a8, #595959);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
  background-color: #000000;
  z-index: 5;
}
.pbm__tabName:nth-child(4).pbm__tabName--active {
  background-color: #282828;
  -webkit-filter: drop-shadow(0 0 20px #ffffff);
          filter: drop-shadow(0 0 20px #ffffff);
}
.pbm__tabName:nth-child(4):hover {
  background-color: #282828;
  -webkit-filter: drop-shadow(0 0 20px #ffffff);
          filter: drop-shadow(0 0 20px #ffffff);
}
@media (min-width: 996px) {
  .pbm__tab {
    max-width: 1280px;
    padding: 0px 0 30px;
    margin: 0px auto 30px;
  }
  .pbm__tabName {
    width: 25%;
    margin: 30px 0;
    padding: 18px 0;
    font-size: 20px;
  }
}
.pbm .userType {
  display: none;
}
.pbm .userType--active {
  display: block;
}
.pbm .userType__box {
  display: none;
}
.pbm .userType__box--active {
  display: block;
}
.pbm .userType__cpu {
  display: none;
}
.pbm .userType__cpu--active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.pbm__box {
  display: none;
}
.pbm__box--active {
  display: block;
}
.pbm__intro {
  margin-bottom: 30px;
}
.pbm__intro-pic {
  position: relative;
  width: 100%;
}
.pbm__intro-txt {
  padding: 0 0px;
  width: 100%;
}
.pbm__intro-txt h2 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.pbm__intro-txt p {
  margin-bottom: 15px;
}
.pbm__intro-txt .txt--1 {
  color: #e8d28c;
}
.pbm__intro-txt .txt--2 {
  color: #E81F76;
}
.pbm__intro-txt .txt--3 {
  color: #c3d947;
}
.pbm__intro-txt .txt--4 {
  color: #ffffff;
}
.pbm__intro-note {
  position: absolute;
  right: 1%;
  bottom: 1%;
  font-size: 10px;
}
.pbm__intro-tab {
  width: 35%;
  min-width: 222px;
  margin-top: 0px;
}
.pbm__intro-tab .tabBtn {
  cursor: pointer;
  width: 50%;
  text-align: left;
  padding: 0px 0 10px;
  font-weight: bolder;
}
.pbm__intro-tab .tabBtn--active {
  color: #c3d947;
  text-decoration: underline;
}
.pbm__intro-switch {
  width: 35%;
  margin-top: 30px;
}
.pbm__intro-switch .switchBtn {
  cursor: pointer;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  padding: 10px 0;
  font-weight: bolder;
}
.pbm__intro-switch--1 {
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #4d1600 -1px, #4d1600 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#4d1600), to(#97773c)), radial-gradient(circle at 0% 100%, transparent -1px, #97773c -1px, #97773c 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#97773c), to(#e3dc7b)), radial-gradient(circle at 0% 0%, transparent -1px, #e3dc7b -1px, #e3dc7b 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#e3dc7b), to(#96763b)), radial-gradient(circle at 100% 0%, transparent -1px, #96763b -1px, #96763b 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#96763b), to(#4d1600));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #4d1600 -1px, #4d1600 1px, transparent 1px), linear-gradient(to right, #4d1600, #97773c), radial-gradient(circle at 0% 100%, transparent -1px, #97773c -1px, #97773c 1px, transparent 1px), linear-gradient(to bottom, #97773c, #e3dc7b), radial-gradient(circle at 0% 0%, transparent -1px, #e3dc7b -1px, #e3dc7b 1px, transparent 1px), linear-gradient(to left, #e3dc7b, #96763b), radial-gradient(circle at 100% 0%, transparent -1px, #96763b -1px, #96763b 1px, transparent 1px), linear-gradient(to top, #96763b, #4d1600);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
  background-color: rgba(32, 26, 5, 0.5333333333);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.pbm__intro-switch--1 .switchBtn {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.pbm__intro-switch--1 .switchBtn:hover {
  background-color: rgba(117, 95, 16, 0.5333333333);
}
.pbm__intro-switch--1 .switchBtn--active {
  background: -webkit-gradient(linear, left top, right top, from(rgba(155, 74, 24, 0.662745098)), to(rgba(139, 118, 26, 0.7137254902)));
  background: linear-gradient(90deg, rgba(155, 74, 24, 0.662745098) 0%, rgba(139, 118, 26, 0.7137254902) 100%);
}
.pbm__intro-switch--2 {
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #e82178 -1px, #e82178 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#e82178), to(#e482cb)), radial-gradient(circle at 0% 100%, transparent -1px, #e482cb -1px, #e482cb 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#e482cb), to(#daa5e9)), radial-gradient(circle at 0% 0%, transparent -1px, #daa5e9 -1px, #daa5e9 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#daa5e9), to(#e47ec8)), radial-gradient(circle at 100% 0%, transparent -1px, #e47ec8 -1px, #e47ec8 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#e47ec8), to(#e82178));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #e82178 -1px, #e82178 1px, transparent 1px), linear-gradient(to right, #e82178, #e482cb), radial-gradient(circle at 0% 100%, transparent -1px, #e482cb -1px, #e482cb 1px, transparent 1px), linear-gradient(to bottom, #e482cb, #daa5e9), radial-gradient(circle at 0% 0%, transparent -1px, #daa5e9 -1px, #daa5e9 1px, transparent 1px), linear-gradient(to left, #daa5e9, #e47ec8), radial-gradient(circle at 100% 0%, transparent -1px, #e47ec8 -1px, #e47ec8 1px, transparent 1px), linear-gradient(to top, #e47ec8, #e82178);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
  background-color: rgba(32, 26, 5, 0.5333333333);
}
.pbm__intro-switch--2 .switchBtn--active {
  background: -webkit-gradient(linear, left top, right top, from(rgba(189, 12, 128, 0.47)), to(rgba(177, 125, 228, 0.5960784314)));
  background: linear-gradient(90deg, rgba(189, 12, 128, 0.47) 0%, rgba(177, 125, 228, 0.5960784314) 100%);
}
.pbm__intro-switch--3 {
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #385929 -1px, #385929 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#385929), to(#7b9637)), radial-gradient(circle at 0% 100%, transparent -1px, #7b9637 -1px, #7b9637 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#7b9637), to(#c1d747)), radial-gradient(circle at 0% 0%, transparent -1px, #c1d747 -1px, #c1d747 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#c1d747), to(#7b9737)), radial-gradient(circle at 100% 0%, transparent -1px, #7b9737 -1px, #7b9737 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#7b9737), to(#385929));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #385929 -1px, #385929 1px, transparent 1px), linear-gradient(to right, #385929, #7b9637), radial-gradient(circle at 0% 100%, transparent -1px, #7b9637 -1px, #7b9637 1px, transparent 1px), linear-gradient(to bottom, #7b9637, #c1d747), radial-gradient(circle at 0% 0%, transparent -1px, #c1d747 -1px, #c1d747 1px, transparent 1px), linear-gradient(to left, #c1d747, #7b9737), radial-gradient(circle at 100% 0%, transparent -1px, #7b9737 -1px, #7b9737 1px, transparent 1px), linear-gradient(to top, #7b9737, #385929);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
  background-color: rgba(32, 26, 5, 0.5333333333);
}
.pbm__intro-switch--3 .switchBtn--active {
  background: -webkit-gradient(linear, left top, right top, from(rgba(86, 89, 41, 0.5921568627)), to(rgba(191, 202, 25, 0.5921568627)));
  background: linear-gradient(90deg, rgba(86, 89, 41, 0.5921568627) 0%, rgba(191, 202, 25, 0.5921568627) 100%);
}
.pbm__intro-switch--4 {
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #595959 -1px, #595959 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#595959), to(#a0a0a0)), radial-gradient(circle at 0% 100%, transparent -1px, #a0a0a0 -1px, #a0a0a0 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#a0a0a0), to(#f2f2f2)), radial-gradient(circle at 0% 0%, transparent -1px, #f2f2f2 -1px, #f2f2f2 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#f2f2f2), to(#a8a8a8)), radial-gradient(circle at 100% 0%, transparent -1px, #a8a8a8 -1px, #a8a8a8 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#a8a8a8), to(#595959));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #595959 -1px, #595959 1px, transparent 1px), linear-gradient(to right, #595959, #a0a0a0), radial-gradient(circle at 0% 100%, transparent -1px, #a0a0a0 -1px, #a0a0a0 1px, transparent 1px), linear-gradient(to bottom, #a0a0a0, #f2f2f2), radial-gradient(circle at 0% 0%, transparent -1px, #f2f2f2 -1px, #f2f2f2 1px, transparent 1px), linear-gradient(to left, #f2f2f2, #a8a8a8), radial-gradient(circle at 100% 0%, transparent -1px, #a8a8a8 -1px, #a8a8a8 1px, transparent 1px), linear-gradient(to top, #a8a8a8, #595959);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
  background-color: rgba(32, 26, 5, 0.5333333333);
}
.pbm__intro-switch--4 .switchBtn--active {
  background: -webkit-gradient(linear, left top, right top, from(rgba(89, 89, 89, 0.5803921569)), to(rgba(160, 160, 160, 0.7254901961)));
  background: linear-gradient(90deg, rgba(89, 89, 89, 0.5803921569) 0%, rgba(160, 160, 160, 0.7254901961) 100%);
}
@media (min-width: 996px) {
  .pbm__intro-pic {
    width: 50%;
  }
  .pbm__intro-txt {
    width: 50%;
    padding: 0 25px;
  }
  .pbm__intro-txt h2 {
    margin-top: 0px;
  }
  .pbm__intro-note {
    font-size: 14px;
  }
  .pbm__intro-tab {
    width: 35%;
    min-width: 222px;
    margin-top: 30px;
  }
  .pbm__intro-tab .tabBtn {
    padding: 10px 0;
    margin: 0 auto;
    text-align: center;
  }
}
.pbm__pdSection {
  display: none;
}
.pbm__pdSection--active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.pbm__pdSection .pbm__pd {
  position: relative;
  width: calc(50% - 8px);
  margin: 4px;
  padding: 10px 10px;
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #4d1600 -1px, #4d1600 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#4d1600), to(#97773c)), radial-gradient(circle at 0% 100%, transparent -1px, #97773c -1px, #97773c 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#97773c), to(#e3dc7b)), radial-gradient(circle at 0% 0%, transparent -1px, #e3dc7b -1px, #e3dc7b 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#e3dc7b), to(#96763b)), radial-gradient(circle at 100% 0%, transparent -1px, #96763b -1px, #96763b 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#96763b), to(#4d1600));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #4d1600 -1px, #4d1600 1px, transparent 1px), linear-gradient(to right, #4d1600, #97773c), radial-gradient(circle at 0% 100%, transparent -1px, #97773c -1px, #97773c 1px, transparent 1px), linear-gradient(to bottom, #97773c, #e3dc7b), radial-gradient(circle at 0% 0%, transparent -1px, #e3dc7b -1px, #e3dc7b 1px, transparent 1px), linear-gradient(to left, #e3dc7b, #96763b), radial-gradient(circle at 100% 0%, transparent -1px, #96763b -1px, #96763b 1px, transparent 1px), linear-gradient(to top, #96763b, #4d1600);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
  background-color: #181407;
  text-align: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.pbm__pdSection .pbm__pd:hover {
  background-color: #494020;
  -webkit-filter: drop-shadow(0 0 10px #fcc051);
          filter: drop-shadow(0 0 10px #fcc051);
}
.pbm__pdSection .pbm__pd img {
  height: auto;
}
.pbm__pdSection .pbm__pd p {
  position: relative;
  width: 100%;
  font-size: 14px;
}
.pbm__pdSection .pbm__pd--nohover:hover {
  background-color: #181407;
  -webkit-filter: none;
          filter: none;
}
.pbm__pdSection--2 .pbm__pd {
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #e82178 -1px, #e82178 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#e82178), to(#e482cb)), radial-gradient(circle at 0% 100%, transparent -1px, #e482cb -1px, #e482cb 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#e482cb), to(#daa5e9)), radial-gradient(circle at 0% 0%, transparent -1px, #daa5e9 -1px, #daa5e9 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#daa5e9), to(#e47ec8)), radial-gradient(circle at 100% 0%, transparent -1px, #e47ec8 -1px, #e47ec8 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#e47ec8), to(#e82178));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #e82178 -1px, #e82178 1px, transparent 1px), linear-gradient(to right, #e82178, #e482cb), radial-gradient(circle at 0% 100%, transparent -1px, #e482cb -1px, #e482cb 1px, transparent 1px), linear-gradient(to bottom, #e482cb, #daa5e9), radial-gradient(circle at 0% 0%, transparent -1px, #daa5e9 -1px, #daa5e9 1px, transparent 1px), linear-gradient(to left, #daa5e9, #e47ec8), radial-gradient(circle at 100% 0%, transparent -1px, #e47ec8 -1px, #e47ec8 1px, transparent 1px), linear-gradient(to top, #e47ec8, #e82178);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
  background-color: rgba(52, 20, 79, 0.4980392157);
}
.pbm__pdSection--2 .pbm__pd:hover {
  background-color: #412049;
  -webkit-filter: drop-shadow(0 0 10px #df51fc);
          filter: drop-shadow(0 0 10px #df51fc);
}
.pbm__pdSection--2 .pbm__pd--nohover:hover {
  background-color: rgba(52, 20, 79, 0.4980392157);
  -webkit-filter: none;
          filter: none;
}
.pbm__pdSection--3 .pbm__pd {
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #385929 -1px, #385929 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#385929), to(#7b9637)), radial-gradient(circle at 0% 100%, transparent -1px, #7b9637 -1px, #7b9637 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#7b9637), to(#c1d747)), radial-gradient(circle at 0% 0%, transparent -1px, #c1d747 -1px, #c1d747 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#c1d747), to(#7b9737)), radial-gradient(circle at 100% 0%, transparent -1px, #7b9737 -1px, #7b9737 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#7b9737), to(#385929));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #385929 -1px, #385929 1px, transparent 1px), linear-gradient(to right, #385929, #7b9637), radial-gradient(circle at 0% 100%, transparent -1px, #7b9637 -1px, #7b9637 1px, transparent 1px), linear-gradient(to bottom, #7b9637, #c1d747), radial-gradient(circle at 0% 0%, transparent -1px, #c1d747 -1px, #c1d747 1px, transparent 1px), linear-gradient(to left, #c1d747, #7b9737), radial-gradient(circle at 100% 0%, transparent -1px, #7b9737 -1px, #7b9737 1px, transparent 1px), linear-gradient(to top, #7b9737, #385929);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
}
.pbm__pdSection--3 .pbm__pd:hover {
  background-color: #2b4920;
  -webkit-filter: drop-shadow(0 0 10px #7cfc51);
          filter: drop-shadow(0 0 10px #7cfc51);
}
.pbm__pdSection--3 .pbm__pd--nohover:hover {
  background-color: #181407;
  -webkit-filter: none;
          filter: none;
}
.pbm__pdSection--4 .pbm__pd {
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #595959 -1px, #595959 1px, transparent 1px), -webkit-gradient(linear, left top, right top, from(#595959), to(#a0a0a0)), radial-gradient(circle at 0% 100%, transparent -1px, #a0a0a0 -1px, #a0a0a0 1px, transparent 1px), -webkit-gradient(linear, left top, left bottom, from(#a0a0a0), to(#f2f2f2)), radial-gradient(circle at 0% 0%, transparent -1px, #f2f2f2 -1px, #f2f2f2 1px, transparent 1px), -webkit-gradient(linear, right top, left top, from(#f2f2f2), to(#a8a8a8)), radial-gradient(circle at 100% 0%, transparent -1px, #a8a8a8 -1px, #a8a8a8 1px, transparent 1px), -webkit-gradient(linear, left bottom, left top, from(#a8a8a8), to(#595959));
  background-image: radial-gradient(circle at 100% 100%, transparent -1px, #595959 -1px, #595959 1px, transparent 1px), linear-gradient(to right, #595959, #a0a0a0), radial-gradient(circle at 0% 100%, transparent -1px, #a0a0a0 -1px, #a0a0a0 1px, transparent 1px), linear-gradient(to bottom, #a0a0a0, #f2f2f2), radial-gradient(circle at 0% 0%, transparent -1px, #f2f2f2 -1px, #f2f2f2 1px, transparent 1px), linear-gradient(to left, #f2f2f2, #a8a8a8), radial-gradient(circle at 100% 0%, transparent -1px, #a8a8a8 -1px, #a8a8a8 1px, transparent 1px), linear-gradient(to top, #a8a8a8, #595959);
  background-size: 1px 1px, calc(100% - 2px) 2px, 1px 1px, 2px calc(100% - 2px);
  background-position: top left, top center, top right, center right, bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
}
.pbm__pdSection--4 .pbm__pd:hover {
  background-color: #424242;
  -webkit-filter: drop-shadow(0 0 10px #f7f7f7);
          filter: drop-shadow(0 0 10px #f7f7f7);
}
.pbm__pdSection--4 .pbm__pd .pbm__pd--nohover:hover {
  background-color: #181407;
  -webkit-filter: none;
          filter: none;
}
@media (min-width: 996px) {
  .pbm__pdSection .pbm__pd {
    width: calc(25% - 20px);
    margin: 10px;
    padding: 30px 30px 60px;
  }
  .pbm__pdSection .pbm__pd img {
    height: 200px;
  }
  .pbm__pdSection .pbm__pd p {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 90%;
    font-size: 16px;
  }
}

.exclusive__tab {
  margin: 20px 0;
}
.exclusive__tabName {
  width: calc(50% - 10px);
  padding: 10px 0;
  margin: 5px;
  border-radius: 8px;
  text-align: center;
  border: #6c358e 2px solid;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  font-weight: bolder;
}
.exclusive__tabName:hover {
  background: #491370;
}
.exclusive__tabName--active {
  background: -webkit-gradient(linear, left top, left bottom, from(#491370), to(#9917d1));
  background: linear-gradient(180deg, #491370 0%, #9917d1 100%);
}
.exclusive__section {
  display: none;
}
.exclusive__section--active {
  display: block;
}
.exclusive__box {
  position: relative;
  border-radius: 8px;
  border: #6c358e 2px solid;
  background: linear-gradient(160deg, #000000 60%, #241163 100%);
  padding: 20px 25px;
  margin: 10px 0px;
}
.exclusive__box--50 {
  width: 100%;
}
.exclusive__box-txt {
  margin-bottom: 0px;
  padding: 0 0px;
}
.exclusive__box-txt h3 {
  background: -webkit-gradient(linear, left top, right top, from(#8562f2), color-stop(50%, #f7f3f9), to(#bc60e1));
  background: linear-gradient(90deg, #8562f2 0%, #f7f3f9 50%, #bc60e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
}
.exclusive__box-txt h2 {
  margin-bottom: 5px;
  font-size: 23px;
}
.exclusive__box .icon {
  text-align: right;
}
.exclusive__box .icon--float {
  position: absolute;
  right: 2%;
  bottom: 2%;
}
.exclusive__box .icon figure {
  padding: 0 0px;
  text-align: right;
}
.exclusive__box .icon figure img {
  max-height: 40px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.exclusive__box .icon figure img:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-filter: drop-shadow(0 0 10px #fff);
          filter: drop-shadow(0 0 10px #fff);
}
.exclusive__box-txt50 {
  width: 100%;
}
.exclusive__box-pic {
  width: 100%;
}
.exclusive__box-pic img {
  width: calc(50% - 20px);
}
.exclusive__box-pic50 {
  width: 100%;
}
.exclusive__box .videoBox {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.exclusive__box .videoBox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.exclusive__box figure {
  padding: 0 25px;
  text-align: center;
}
.exclusive__box figure img {
  max-height: 400px;
}
@media (min-width: 996px) {
  .exclusive__tabName {
    width: calc(25% - 20px);
    margin: 10px;
    padding: 20px 0;
    border-radius: 20px;
  }
  .exclusive__box {
    border-radius: 20px;
    margin: 10px 10px;
  }
  .exclusive__box--50 {
    width: calc(50% - 20px);
  }
  .exclusive__box-txt {
    margin-bottom: 20px;
    padding: 0 25px;
  }
  .exclusive__box-txt h3 {
    margin-bottom: 10px;
  }
  .exclusive__box-txt h2 {
    font-size: 25.5px;
    margin-bottom: 10px;
  }
  .exclusive__box .icon {
    position: relative;
  }
  .exclusive__box .icon--float {
    right: 0;
  }
  .exclusive__box .icon figure {
    padding: 0 25px;
  }
  .exclusive__box .icon figure img {
    max-height: 50px;
  }
  .exclusive__box-txt50 {
    width: 40%;
  }
  .exclusive__box-pic50 {
    width: 60%;
  }
}

.more__link {
  width: calc(100% - 20px);
  margin: 10px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.more__link:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
@media (min-width: 996px) {
  .more__link {
    width: calc(33.3333333333% - 20px);
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.77);
}
.modal .close {
  position: absolute;
  right: 3%;
  top: 0.1%;
  font-size: 50px;
  cursor: pointer;
  z-index: 150;
}
.modal a {
  color: #cf98ff;
  font-size: 16px;
}
.modal a:hover {
  color: #deb8ff;
}
.modal .noHover:hover {
  color: #cf98ff;
}
.modal-content {
  position: relative;
  z-index: 150;
  border-radius: 7px;
  border: #b57ce6 1px solid;
  margin: 5% auto;
  color: #fff;
  padding: 30px 15px;
  width: 80%;
  background-color: rgba(17, 17, 17, 0.7647058824);
}
.modal-content p {
  margin-bottom: 1px;
}
.modal-content ol {
  margin-bottom: 5px;
}
.modal-content ol li {
  margin-bottom: 5px;
}

@media (min-width: 996px) {
  .modal .close {
    right: 2%;
    top: 2%;
  }
  .modal a {
    font-size: 17px;
  }
  .modal-content {
    padding: 50px 15px;
    padding: 50px;
  }
  .modal-content p {
    margin-bottom: 5px;
  }
}
.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover, .close:focus {
  color: #b57ce6;
  text-decoration: none;
  cursor: pointer;
}/*# sourceMappingURL=main.css.map */