@charset "UTF-8";
body {
  background-color: #000;
  color: #fff; }

.tridentX h2 {
  color: #f00;
  font-size: 33px;
  margin: 20px 0;
  font-family: 'DINCond-Bold', 'cwTeXHei', 'Microsoft JhengHei';
  text-transform: uppercase;
  padding: 0;
  line-height: 1.1;
  text-shadow: 0px 0px 5px #000; }

.tridentX h2.white {
  color: #fff; }

.tridentX p {
  font-size: 19px;
  font-family: 'DINPro', 'cwTeXHei', 'Microsoft JhengHei';
  color: #fff;
  margin: 0;
  padding: 0;
  text-shadow: 0px 0px 5px #000;
  line-height: 1.42857143; }

/* vgaBlock*/
.vgaBlock {
  background: url("https://asset.msi.com/global/picture/image/feature/desktop/TridentX/VGA-bg.jpg") 0 0 no-repeat;
  background-size: cover;
  padding: 2%; }
  .vgaBlock .flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 95%; }
    .vgaBlock .flex-box .left_wrap {
      width: 75%; }
    .vgaBlock .flex-box .right_wrap {
      margin-left: -10%;
      width: 33%; }

/* nvidiaFeature */
.NvidiaBlock h5 {
  font-size: 28px;
  line-height: 28px;
  font-family: 'DINCond-Bold', 'cwTeXHei', 'Microsoft JhengHei';
  color: #FFFFFF;
  margin-bottom: 10px; }

.NvidiaBlock {
  width: 90%;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

.nv_Wrap {
  width: 100%;
  padding: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

/*cpuBlock*/
.cpuBlock {
  padding: 2% 0 0; }
  .cpuBlock .flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 95%; }
    .cpuBlock .flex-box .cpu-img {
      width: 168px;
      margin: 0 auto; }
    .cpuBlock .flex-box .left_wrap {
      width: 100%; }
    .cpuBlock .flex-box .right_wrap {
      margin-left: -40%;
      width: 33%; }

/*verticalInside*/
.verticalInside .slick_wrap {
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none; }

.verticalInside .animation_slick {
  width: 90%;
  margin: 0 auto; }

.verticalInside .flex-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 90%;
  margin: 0 auto; }
  .verticalInside .flex-box .left_wrap {
    width: 75%; }
  .verticalInside .flex-box .right_wrap {
    margin-left: -10%;
    width: 33%; }

.verticalInside .slick-prev {
  left: 50px;
  z-index: 10; }

.verticalInside .slick-next {
  width: 35px;
  height: 35px;
  right: 50px;
  z-index: 10; }

.verticalInside .slick-dots {
  z-index: 10;
  bottom: 5%; }

.verticalInside .slick-dots li button:before {
  color: #fff;
  font-size: 40px; }

.verticalInside .slick-dots li.slick-active button:before {
  opacity: .75;
  color: #f00; }

.verticalInside .slick-prev:before {
  content: "\f053";
  font-family: FontAwesome;
  font-size: 30px;
  color: #f00; }

.verticalInside .slick-next:before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 30px;
  color: #f00; }

.verticalInside .slick-dots li button:before {
  font-family: 'slick';
  content: '•'; }

.block4-2 .right_wrap {
  position: relative;
  z-index: 10; }

.block4-2 .left_wrap {
  position: relative; }
  .block4-2 .left_wrap img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0; }
  .block4-2 .left_wrap img:nth-of-type(1) {
    position: relative; }
  .block4-2 .left_wrap img:nth-of-type(2) {
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
    transform: translateY(-25%);
    -webkit-animation: upgrade90 4s infinite cubic-bezier(0.23, 1, 0.32, 1);
    animation: upgrade90 4s infinite cubic-bezier(0.23, 1, 0.32, 1); }
  .block4-2 .left_wrap img:nth-of-type(3) {
    opacity: 0;
    -webkit-animation: upgrade90Text 4s infinite cubic-bezier(0.23, 1, 0.32, 1);
    animation: upgrade90Text 4s infinite cubic-bezier(0.23, 1, 0.32, 1); }

.block4-3 .right_wrap {
  position: relative;
  z-index: 10; }

.block4-3 .left_wrap {
  position: relative; }
  .block4-3 .left_wrap img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0; }
  .block4-3 .left_wrap img:first-of-type {
    position: relative; }
  .block4-3 .left_wrap img:nth-of-type(4) {
    opacity: 0; }
  .block4-3 .left_wrap img:nth-of-type(2) {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

@-webkit-keyframes upgrade90 {
  0% {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%); }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }
  55% {
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0; } }

@keyframes upgrade90 {
  0% {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%); }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }
  55% {
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0; } }

@-webkit-keyframes upgrade90Text {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  60% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes upgrade90Text {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  60% {
    opacity: 1; }
  100% {
    opacity: 1; } }

/* glassPanel */
.glassPanel .flex-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 95%; }
  .glassPanel .flex-box .left_wrap {
    position: relative;
    width: 65%; }
    .glassPanel .flex-box .left_wrap img {
      position: absolute;
      top: 0;
      left: 0; }
    .glassPanel .flex-box .left_wrap img:first-of-type {
      position: relative; }
    .glassPanel .flex-box .left_wrap img:nth-of-type(2) {
      left: -13.8%; }
    .glassPanel .flex-box .left_wrap img:nth-of-type(3) {
      left: -20.8%;
      opacity: 0; }
  .glassPanel .flex-box .right_wrap {
    position: relative;
    z-index: 10;
    margin-left: -5%;
    width: 33%; }
  .glassPanel .flex-box .glassContentText {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: right;
    z-index: 11; }
    .glassPanel .flex-box .glassContentText span {
      color: #fff;
      display: inline-block;
      text-align: left;
      padding-right: 3%;
      font-size: 19px;
      font-family: 'DINPro', 'cwTeXHei', 'Microsoft JhengHei';
      vertical-align: top; }
    .glassPanel .flex-box .glassContentText span.glass-text {
      width: 35%;
      opacity: 0; }
    .glassPanel .flex-box .glassContentText span.glass-text:after {
      content: '';
      display: block;
      margin-top: 10px;
      margin-left: 5px;
      width: 2px;
      padding-top: 15%;
      background-color: #fff; }
    .glassPanel .flex-box .glassContentText span.metal-text {
      width: 15%;
      opacity: 0; }
    .glassPanel .flex-box .glassContentText span.metal-text:after {
      content: '';
      display: block;
      margin-top: 10px;
      margin-left: 5px;
      width: 2px;
      padding-top: 45%;
      background-color: #fff; }

.glassPanel .glass_slickWrap {
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none; }

.glassPanel .glassAnimation_slick {
  width: 90%;
  margin: 0 auto; }

.glassPanel .slick-prev {
  left: 50px;
  z-index: 10; }

.glassPanel .slick-next {
  width: 35px;
  height: 35px;
  right: 50px;
  z-index: 10; }

.glassPanel .slick-dots {
  z-index: 10;
  bottom: 5%; }

.glassPanel .slick-dots li button:before {
  color: #fff;
  font-size: 40px; }

.glassPanel .slick-dots li.slick-active button:before {
  opacity: .75;
  color: #f00; }

.glassPanel .slick-prev:before {
  content: "\f053";
  font-family: FontAwesome;
  font-size: 30px;
  color: #f00; }

.glassPanel .slick-next:before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 30px;
  color: #f00; }

.glassPanel .slick-dots li button:before {
  font-family: 'slick';
  content: '•'; }

/* coolingStorm */
.coolingStorm .cooling-content {
  width: 100%;
  max-width: 1000px;
  text-align: center;
  margin: 0 auto -4%;
  position: relative;
  z-index: 10; }

.coolingStorm #animation_container {
  width: 100%;
  max-width: 1800px;
  overflow: hidden;
  margin: 0 auto; }

/* multiDisplay */
.multiDisplay {
  padding-bottom: 3%; }
  .multiDisplay .multi-content {
    width: 100%;
    max-width: 1000px;
    text-align: center;
    margin: 0 auto; }

/* mysticlight */
.mysticlight .mystic-content {
  width: 100%;
  max-width: 1000px;
  text-align: center;
  margin: 0 auto; }

/* nahimic */
.nahimicbg {
  background-image: url("https://asset.msi.com/global/picture/image/feature/desktop/TridentX/nahimic-bg.jpg");
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-bottom: 5%;
  padding-top: 15%; }

.btnbox {
  padding: 10px 20px;
  text-align: center;
  color: #fff;
  border: 1px #fff solid;
  text-decoration: none;
  border-radius: 8px;
  font-size: 1.5vh;
  margin: 10px; }

.btnbox {
  padding: 10px 20px;
  text-align: center;
  color: #fff;
  border: 1px #fff solid;
  text-decoration: none;
  border-radius: 8px;
  font-size: 1.5vh;
  margin: 10px; }

/* game-corp */
.game-corp {
  padding: 0 0 5% 0;
  text-align: center; }
  .game-corp .flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .game-corp .flex-box img {
      margin: 0 15px; }
  .game-corp p {
    padding: 20px 0 0; }
    .game-corp p small {
      font-size: 12px;
      color: #878787; }

/* vgaBlock*/
@media (max-width: 1200px) {
  .vgaBlock .flex-box .left_wrap {
    width: 60%; }
  .vgaBlock .flex-box .right_wrap {
    width: 43%; } }

@media (max-width: 992px) {
  .vgaBlock .flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto; }
    .vgaBlock .flex-box .left_wrap {
      width: 100%; }
    .vgaBlock .flex-box .right_wrap {
      margin-left: 0;
      width: 100%; } }

/* nvidiaFeature */
@media (max-width: 992px) {
  .NvidiaBlock {
    width: 90%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around; }
  .nv_Wrap {
    width: 100%;
    padding: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap; }
    .nv_Wrap .nv_img {
      width: 30%; }
    .nv_Wrap .nv_content {
      width: 65%;
      padding: 15px; } }

@media (max-width: 768px) {
  .NvidiaBlock {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around; }
  .nv_Wrap {
    width: 100%;
    padding: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .nv_Wrap .nv_img {
      width: 50%;
      margin: 0 auto; }
    .nv_Wrap .nv_content {
      width: 100%;
      padding: 15px; } }

/*cpuBlock*/
@media (max-width: 992px) {
  .cpuBlock {
    padding: 2%; }
    .cpuBlock .flex-box {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      width: 95%; }
      .cpuBlock .flex-box .cpu-img {
        width: 120px;
        margin: 0 auto; }
      .cpuBlock .flex-box .left_wrap {
        width: 100%; }
      .cpuBlock .flex-box .right_wrap {
        margin-left: -55%;
        width: 50%; } }

@media (max-width: 768px) {
  .cpuBlock {
    padding: 2%; }
    .cpuBlock .flex-box {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      width: 95%; }
      .cpuBlock .flex-box .cpu-img {
        width: 120px;
        margin: 0 auto; }
      .cpuBlock .flex-box .left_wrap {
        display: none; }
      .cpuBlock .flex-box .right_wrap {
        margin-left: 0;
        width: 95%;
        margin: 0 auto; } }

/*verticalInside*/
@media (max-width: 992px) {
  .verticalInside .animation_slick {
    width: 90%;
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 10%; }
  .verticalInside .flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 90%;
    margin: 0 auto; }
    .verticalInside .flex-box .left_wrap {
      width: 100%; }
    .verticalInside .flex-box .right_wrap {
      margin: 0 auto;
      width: 95%; }
  .verticalInside .slick-dots {
    bottom: 0; }
  .verticalInside .slick-next {
    top: 30%;
    right: 0px; }
  .verticalInside .slick-prev {
    left: 0;
    top: 30%; } }

/* glassPanel */
@media (max-width: 1536px) {
  .glassPanel .flex-box .glassContentText span.glass-text {
    width: 25%; }
  .glassPanel .flex-box .glassContentText span.glass-text:after {
    padding-top: 30px; }
  .glassPanel .flex-box .glassContentText span.metal-text {
    width: 25%; }
  .glassPanel .flex-box .glassContentText span.metal-text:after {
    padding-top: 30px; } }

@media (max-width: 992px) {
  .glassPanel .glassAnimation_slick {
    width: 90%;
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 10%; }
  .glassPanel .flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 90%;
    margin: 0 auto; }
    .glassPanel .flex-box .left_wrap {
      position: relative;
      width: 100%; }
      .glassPanel .flex-box .left_wrap img {
        position: absolute;
        top: 0;
        left: 0; }
      .glassPanel .flex-box .left_wrap img:first-of-type {
        position: relative; }
      .glassPanel .flex-box .left_wrap img:nth-of-type(2) {
        left: -13.8%; }
      .glassPanel .flex-box .left_wrap img:nth-of-type(3) {
        left: -20.8%;
        opacity: 0; }
    .glassPanel .flex-box .right_wrap {
      position: relative;
      z-index: 10;
      margin-left: 0;
      width: 95%;
      margin: 0 auto; }
  .glassPanel .slick-dots {
    bottom: 0; }
  .glassPanel .slick-next {
    top: 30%;
    right: 0px; }
  .glassPanel .slick-prev {
    left: 0;
    top: 30%; } }

@media (max-width: 768px) {
  .glassPanel .flex-box .glassContentText {
    display: none; } }

@media (max-width: 768px) {
  .game-corp {
    width: 100%; }
    .game-corp .flex-box {
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column; } }