@charset "utf-8";
/*MB emplate CSS Document */
@import url( 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese' );
@import url('https://fonts.googleapis.com/css?family=Sarpanch:500,800,900&display=swap');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
@font-face {
  font-family: "ONECND_Fonts-Bold";
  src: url("https://storage-asset.msi.com/global/css/SPBfonts/ONECND_Fonts-Bold.eot");
  src: url("https://storage-asset.msi.com/global/css/SPBfonts/ONECND_Fonts-Bold.eot?#iefix") format("embedded-opentype"), url("https://storage-asset.msi.com/global/css/SPBfonts/ONECND_Fonts-Bold.woff") format("woff"), url("https://storage-asset.msi.com/global/css/SPBfonts/ONECND_Fonts-Bold.ttf") format("truetype"), url("https://storage-asset.msi.com/global/css/SPBfonts/ONECND_Fonts-Bold.svg#ONECND_Fonts-Bold") format("svg");
}


*{box-sizing:border-box;}
.mb_Creator_PRO,.mb_SI{font-family: "Open Sans", Helvetica, Arial, sans-serif; background-color: #222;}

.mb_MEG,
.mb_MPG,
.mb_MAG,
.mb_EVA { font-family: "Open Sans", Helvetica, Arial, sans-serif; background-color: #000;}

.mb_MEG h2,
.mb_MPG h2,
.mb_MAG h2, 
.mb_Creator_PRO h2,
.mb_SI h2,
.mb_EVA h2 { font-family: "DINPro", "Open Sans", Helvetica, Arial, sans-serif; font-weight:700;}



/*KV*/
.mb_MEG .KV-main h2 { text-shadow: 0px 0px 4px #fc4a1a, 0px 0px 5px #fc4a1a, 0px 0px 4px #fc4a1a, 0px 0px 5px #fc4a1a; background-color: #000;}
.mb_MPG .KV-main h2 { text-shadow: 0px 0px 4px #bb05ff, 0px 0px 5px #bb05ff, 0px 0px 4px #bb05ff, 0px 0px 5px #bb05ff; background-color: #000;}
.mb_MAG .KV-main h2 { text-shadow: 0px 0px 5px #6b8e23, 0px 0px 5px #6b8e23, 0px 0px 5px #6b8e23, 0px 0px 5px #6b8e23; background-color: #000;}
.mb_Creator_PRO .KV-main h2 { text-shadow: 0px 0px 5px #fff, 0px 0px 15px #58a4eb; background-color: #222;}
.mb_SI .KV-main h2 { text-shadow: 0px 0px 5px #33CCCC, 0px 0px 5px #33CCCC, 0px 0px 5px #33CCCC, 0px 0px 5px #33CCCC; background-color: #222;}
.mb_EVA .KV-main h2 { text-shadow: 0px 0px 5px #724de8, 0px 0px 5px #724de8, 0px 0px 5px #724de8, 0px 0px 5px #724de8; background-color: #000;}

.mb_MEG .KV-main:before { background: url(https://storage-asset.msi.com/global/picture/image/feature/mb/Z490/A-Pro/meg-line.png) left top no-repeat; background-size: contain;}
.mb_MPG .KV-main:before { background: url(https://storage-asset.msi.com/global/picture/image/feature/mb/Z490/A-Pro/mpg-line.png) left top no-repeat; background-size: contain;}
.mb_MAG .KV-main:before { background: url(https://storage-asset.msi.com/global/picture/image/feature/mb/Z490/A-Pro/mag-line.png) left top no-repeat; background-size: contain;}
.mb_Creator_PRO .KV-main:before { background: url(https://storage-asset.msi.com/global/picture/image/feature/mb/Z490/A-Pro/pro-line.png) left top no-repeat; background-size: contain;}
.mb_SI .KV-main:before { background: url(https://storage-asset.msi.com/global/picture/image/feature/mb/Z490/A-Pro/SI-line.png) left top no-repeat; background-size: contain;}
.mb_EVA .KV-main:before { background: url(https://storage-asset.msi.com/global/picture/image/feature/mb/Z490/A-Pro/mag-line.png) left top no-repeat; background-size: contain;}

.mb_NewKV{position: relative; margin-top:2%;}
.KV-main{}
.KV-main:before { position: absolute; content: ''; display: inline-block; height: 100%; width: 100%;}
.KV-main h2{
  width:auto; position: relative; z-index: 1;
  font-size: 54px; line-height: 1.1; color: #fff; text-transform: uppercase; padding:1% 0.5% 0 0;
  display: inline-block; vertical-align: middle; font-family: "DINPro", "Open Sans", Helvetica, Arial, sans-serif; font-weight:400;}
.KV-main p{font-size:18px; line-height: 1.5; color: #fff; text-shadow: 0 0 1em #000; width: 88%; margin-top: 10px;}
.KV-main h2, .KV-main p{margin-left: 9%;}
.KVimg{margin-top: 1%;}
.KVimg img{display: block; width: 100%; max-width: 100%;  height: auto;}


/*-- RWD --*/
@media screen and (max-width: 2560px) {
  .mb_MEG .KV-main:before,
  .mb_MPG .KV-main:before,
  .mb_MAG .KV-main:before,
  .mb_Creator_PRO .KV-main:before,
  .mb_SI .KV-main:before,
  .mb_EVA .KV-main:before {
    background-position: 0 22px;
  }
}

@media screen and (max-width: 1920px) {
  
}

@media screen and (max-width: 1680px) {
  .KV-main h2{top: -10px;}
  .KV-main p{width: 85%;}
}
 
@media screen and (max-width: 960px) {
  .KV-main h2{font-size: 32px;}
  .KV-main p{width: 97%; margin:0 auto 2%;}
}
@media screen and (max-width: 767px) {
  .KV-main h2{width:85%;}
}

/* thumbnail */
.mb_MEG .mb-thumbnail .thumbnail-wrap.active .thumbnail-item p { text-shadow: 0px 0px 5px #fc4a1a, 0px 0px 3px #f76733, 0px 0px 5px #fc4a1a, 0px 0px 3px #f76733;}
.mb_MPG .mb-thumbnail .thumbnail-wrap.active .thumbnail-item p { text-shadow: 0px 0px 5px #bb05ff, 0px 0px 5px #fff, 0px 0px 4px #fff, 0px 0px 8px #bb05ff;}
.mb_MAG .mb-thumbnail .thumbnail-wrap.active .thumbnail-item p { text-shadow: 0px 0px 11px #6b8e23, 0px 0px 3px #6b8e23, 0px 0px 11px #625b57, 0px 0px 3px #6b8e23;}
.mb_Creator_PRO .mb-thumbnail .thumbnail-wrap.active .tthumbnail-item p { text-shadow: 0px 0px 5px #fff, 0px 0px 15px #58a4eb;}
.mb_SI .mb-thumbnail .thumbnail-wrap.active .thumbnail-item p { text-shadow: 0px 0px 5px #33cccc, 0px 0px 3px #33cccc, 0px 0px 5px #33cccc, 0px 0px 3px #33cccc;}
.mb_EVA .mb-thumbnail .thumbnail-wrap.active .thumbnail-item p { text-shadow: 0px 0px 11px #63c95e, 0px 0px 3px #63c95e, 0px 0px 11px #625b57, 0px 0px 3px #63c95e;}


.mb_MEG .mb-thumbnail .thumbnail-wrap.active > a:before, .mb_MEG .mb-thumbnail .thumbnail-wrap > a:hover:before{
  background: -webkit-linear-gradient(90deg,rgba(247,103,51,.2),rgba(252,74,26,.3));
  background: -o-linear-gradient(90deg,rgba(247,103,51,.2),rgba(252,74,26,.3));
  background: -moz-linear-gradient(90deg,rgba(247,103,51,.2),rgba(252,74,26,.3));
  background: linear-gradient(90deg,rgba(247,103,51,.2),rgba(252,74,26,.3));
}
.mb_MPG .mb-thumbnail .thumbnail-wrap.active > a:before, .mb_MPG .mb-thumbnail .thumbnail-wrap > a:hover:before{
  background: -webkit-linear-gradient(90deg,rgba(0,180,255,.3),rgba(187,5,255,.3));
  background: -o-linear-gradient(90deg,rgba(0,180,255,.3),rgba(187,5,255,.3));
  background: -moz-linear-gradient(90deg,rgba(0,180,255,.3),rgba(187,5,255,.3));
  background: linear-gradient(90deg,rgba(0,180,255,.3),rgba(187,5,255,.3));
}
.mb_MAG .mb-thumbnail .thumbnail-wrap.active > a:before, .mb_MAG .mb-thumbnail .thumbnail-wrap > a:hover:before{
  background: -webkit-linear-gradient(90deg,rgba(98,91,87,.3),rgba(107,142,35,.3));
  background: -o-linear-gradient(90deg,rgba(98,91,87,.3),rgba(107,142,35,.3));
  background: -moz-linear-gradient(90deg,rgba(98,91,87,.3),rgba(107,142,35,.3));
  background: linear-gradient(90deg,rgba(98,91,87,.3),rgba(107,142,35,.3));
}
.mb_Creator_PRO .mb-thumbnail .thumbnail-wrap.active > a:before, .mb_Creator_PRO .mb-thumbnail .thumbnail-wrap > a:hover:before{
  background: -webkit-linear-gradient(90deg,rgba(95,123,163,.3),rgba(88,164,235,.3));
  background: -o-linear-gradient(90deg,rgba(95,123,163,.3),rgba(88,164,235,.3));
  background: -moz-linear-gradient(90deg,rgba(95,123,163,.3),rgba(88,164,235,.3));
  background: linear-gradient(90deg,rgba(95,123,163,.3),rgba(88,164,235,.3));
}
.mb_SI .mb-thumbnail .thumbnail-wrap.active > a:before, .mb_SI .mb-thumbnail .thumbnail-wrap > a:hover:before{
  background: -webkit-linear-gradient(90deg,rgba(51,204,204,.3),rgba(51,204,204,.3));
  background: -o-linear-gradient(90deg,rgba(51,204,204,.3),rgba(51,204,204,.3));
  background: -moz-linear-gradient(90deg,rgba(51,204,204,.3),rgba(51,204,204,.3));
  background: linear-gradient(90deg,rgba(51,204,204,.3),rgba(51,204,204,.3));
}
.mb_EVA .mb-thumbnail .thumbnail-wrap.active > a:before, .mb_EVA .mb-thumbnail .thumbnail-wrap > a:hover:before{
  background: -webkit-linear-gradient(90deg,rgba(99,221,62,.3),rgba(84,0,255,.3));
  background: -o-linear-gradient(90deg,rgba(99,221,62,.3),rgba(84,0,255,.3));
  background: -moz-linear-gradient(90deg,rgba(99,221,62,.3),rgba(84,0,255,.3));
  background: linear-gradient(90deg,rgba(99,221,62,.3),rgba(84,0,255,.3));
}



.mb-thumbnail {width: 100%; max-width: 100vw; display: flex; justify-content:space-around; align-items: center; margin: 1% auto;}
.mb-thumbnail .thumbnail-wrap {position: relative; flex:1; margin: 0.5% 0.25%;}
.mb-thumbnail .thumbnail-wrap .thumbnail-item{display: flex; align-items: center; overflow:hidden; width: 100%; position: relative;}   
.mb-thumbnail .thumbnail-wrap.active .thumbnail-item p { text-shadow: 0px 0px 5px #fff, 0px 0px 15px #58a4eb;}
.mb-thumbnail .thumbnail-wrap > a > .thumbnail-item p {
    font-family: "DINPro", "Open Sans", Helvetica, Arial, sans-serif; font-weight:700;
    width: 100%; text-align: center; font-size: 2.5vw; text-transform: uppercase; color: #fff; padding: 5%; margin: 0; display: inline-block;
    vertical-align: middle; line-height: 1.1; text-shadow:2px 3px 5px #555; position: absolute; left: 0; z-index: 2;
}
.mb-thumbnail .thumbnail-wrap > a > .thumbnail-item img {
    width: 100%; transform:scale(1,1); pointer-events: none;
    -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.mb-thumbnail .thumbnail-wrap > a:before{position: absolute; z-index: 1; content: ''; display: inline-block; height: 100%; width: 100%; transition: 0.3s all ease-in-out;}
.mb-thumbnail .thumbnail-wrap > a:hover .thumbnail-item img { transform:scale(1.2,1.2);}

/*.mb_SI*/
.mb_SI .mb-thumbnail .thumbnail-wrap > a > .thumbnail-item p {
    font-family: "DINPro", "Open Sans", Helvetica, Arial, sans-serif; font-weight:700;
    width: 100%; text-align: center; font-size: 2.2vw; text-transform: uppercase; color: #fff; padding: 5%; margin: 0; display: inline-block;
    vertical-align: middle; line-height: 1.1; text-shadow:2px 3px 5px #555; position: absolute; left: 0; z-index: 2;
 }
 
/*-- RWD --*/
@media (min-width: 2300px) {
  
}
@media (max-width: 1270px) {
  .mb-thumbnail .thumbnail-wrap > a > .thumbnail-item p {font-size: 30px;}
}

@media (max-width: 960px) {
  .mb-thumbnail {
    -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: 4% auto;
  }
    .mb-thumbnail .thumbnail-wrap {width: 49%; flex: none; margin: 0.5% 0.45%;}
    .mb-thumbnail .thumbnail-wrap > a > .thumbnail-item p {font-size:34px; }
}
@media (max-width: 479px) {
  .mb-thumbnail .thumbnail-wrap > a > .thumbnail-item p {font-size:26px;}
}


/*-- sliderTab -------------------------------*/
.mb_slider-nav{color:#fff; margin: 0 auto 5%;}
.mb_slider-nav img{max-width: 100%; display: block; height:auto;}
.mb_slider-nav.one img{margin:0 auto;}
.slider-nav, .slider-for{max-width:1600px; margin:auto;}
.mb_slider-nav .nav-tabs{border-bottom:0; display:flex; margin-top:2%;}
.mb_slider-nav .nav-tabs li{border-bottom: #666 solid 1px; flex:1; text-align:center;}
.slidermenuText{ color: #fff; display: inline-block; font-size:20px; line-height: 1.2; height:30px; margin:20px auto 0;}
.slidermenuText span{position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); padding-bottom: 10px; width: 100%; text-transform: uppercase;}
.mb_slider-nav .nav>li>a{padding: 0;}
.mb_slider-nav .nav-tabs>li>a{border:0; border-radius:0;}
.mb_slider-nav .nav-tabs>li.active>a,
.mb_slider-nav .nav-tabs>li.active>a:focus,
.mb_slider-nav .nav-tabs>li.active>a:hover{ cursor: pointer; background:transparent; border:0; color:#fff;}

.mb_slider-nav .nav>li>a:focus, .mb_slider-nav .nav>li>a:hover{background: transparent; border:0;}


.mb_MEG .nav-tabs>li.active>a,
.mb_MEG .nav-tabs>li.active>a:focus,
.mb_MEG .nav-tabs>li.active>a:hover{border-bottom: #fc4a1a solid 3px;}
.mb_MEG .nav-tabs>li.active>a span,
.mb_MEG .nav-tabs>li.active>a:focus span,
.mb_MEG .nav-tabs>li.active>a:hover span{color: #fc4a1a;}

.mb_MPG .nav-tabs>li.active>a,
.mb_MPG .nav-tabs>li.active>a:focus,
.mb_MPG .nav-tabs>li.active>a:hover{border-bottom: #bb05ff solid 3px;}
.mb_MPG .nav-tabs>li.active>a span,
.mb_MPG .nav-tabs>li.active>a:focus span,
.mb_MPG .nav-tabs>li.active>a:hover span{color: #bb05ff;}

.mb_MAG .nav-tabs>li.active>a,
.mb_MAG .nav-tabs>li.active>a:focus,
.mb_MAG .nav-tabs>li.active>a:hover{border-bottom: #6b8e23 solid 3px;}
.mb_MAG .nav-tabs>li.active>a span,
.mb_MAG .nav-tabs>li.active>a:focus span,
.mb_MAG .nav-tabs>li.active>a:hover span{color: #6b8e23;}

.mb_Creator_PRO .nav-tabs>li.active>a,
.mb_Creator_PRO .nav-tabs>li.active>a:focus,
.mb_Creator_PRO .nav-tabs>li.active>a:hover{border-bottom: #58a4eb solid 3px;}
.mb_Creator_PRO .nav-tabs>li.active>a span,
.mb_Creator_PRO .nav-tabs>li.active>a:focus span,
.mb_Creator_PRO .nav-tabs>li.active>a:hover span{color: #58a4eb;}

.mb_SI .nav-tabs>li.active>a,
.mb_SI .nav-tabs>li.active>a:focus,
.mb_SI .nav-tabs>li.active>a:hover{border-bottom: #33cccc solid 3px;}
.mb_SI .nav-tabs>li.active>a span,
.mb_SI .nav-tabs>li.active>a:focus span,
.mb_SI .nav-tabs>li.active>a:hover span{color: #33cccc;}

.mb_EVA .nav-tabs>li.active>a,
.mb_EVA .nav-tabs>li.active>a:focus,
.mb_EVA .nav-tabs>li.active>a:hover{border-bottom: #63c95e solid 3px;}
.mb_EVA .nav-tabs>li.active>a span,
.mb_EVA .nav-tabs>li.active>a:focus span,
.mb_EVA .nav-tabs>li.active>a:hover span{color: #724de8;}


.mb_MEG .imgoutline{border: 2px solid #fc4a1a;}
.mb_MPG .imgoutline{border: 2px solid #bb05ff;}
.mb_MAG .imgoutline{border: 2px solid #6b8e23;}
.mb_SI .imgoutline{border: 2px solid #33cccc;}
.mb_EVA .imgoutline{border: 2px solid #724de8;}

.mb_MEG .imgborder img{
  border: 5px solid;
  border-image: -webkit-linear-gradient(#fc4a1a,#f7b633) 30 30;
  border-image: -moz-linear-gradient(#fc4a1a,#f7b633) 30 30;
  border-image: linear-gradient(#fc4a1a,#f7b633) 30 30;
}

.mb_MPG .imgborder img{
  border: 5px solid;
  border-image: -webkit-linear-gradient(#00b4ff,#bb05ff) 30 30;
  border-image: -moz-linear-gradient(#00b4ff,#bb05ff) 30 30;
  border-image: linear-gradient(#00b4ff,#bb05ff) 30 30;
}

.mb_MAG .imgborder img{
  border: 5px solid;
  border-image: -webkit-linear-gradient(#6b8e23,#625b57) 30 30;
  border-image: -moz-linear-gradient(#6b8e23,#625b57) 30 30;
  border-image: linear-gradient(#6b8e23,#625b57) 30 30;
}

.mb_Creator_PRO .imgborder img{
  border: 5px solid;
  border-image: -webkit-linear-gradient(#58a4eb,#5f7ba3) 30 30;
  border-image: -moz-linear-gradient(#58a4eb,#5f7ba3) 30 30;
  border-image: linear-gradient(#58a4eb,#5f7ba3) 30 30;
}

.mb_SI .imgborder img{
  border: 5px solid;
  border-image: -webkit-linear-gradient(#33CCCC,#159a9a) 30 30;
  border-image: -moz-linear-gradient(#33CCCC,#159a9a) 30 30;
  border-image: linear-gradient(#33CCCC,#159a9a) 30 30;
}

.mb_EVA .imgborder img{
  border: 5px solid;
  border-image: -webkit-linear-gradient(#63dd3e,#5400ff) 30 30;
  border-image: -moz-linear-gradient(#63dd3e,#5400ff) 30 30;
  border-image: linear-gradient(#63dd3e,#5400ff) 30 30;
}

@media (max-width: 960px) {
    .slidermenuText{font-size: 15px;}
}

/* -- sliderMain內容 --*/
.sliderMain{text-align: center; margin:2% auto; max-width: 1600px; /*width:92%; padding:1% 0;*/}
.sliderMain h2, .sliderMain p{margin:2% auto;}
.sliderMain h2{font-size: 36px;}
.sliderMain h3{font-family: "DINPro", "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700;}
.sliderMain p{font-size: 20px; color:#fff;}
/*.sliderMain .titlebox{padding-bottom:2%;}*/


.mb_MEG .sliderMain h2, .mb_MEG h3{color:#fc4a1a;}
.mb_MEG .sliderMain .titlebox h2{color:#fff; text-shadow: 0px 0px 4px #fc4a1a, 0px 0px 5px #fc4a1a, 0px 0px 4px #fc4a1a, 0px 0px 5px #fc4a1a;}
.mb_MPG .sliderMain h2, .mb_MPG h3{color:#bb05ff;}
.mb_MPG .sliderMain .titlebox h2{color:#fff; text-shadow: 0px 0px 4px #bb05ff, 0px 0px 5px #bb05ff, 0px 0px 4px #bb05ff, 0px 0px 5px #bb05ff;}
.mb_MAG .sliderMain h2, .mb_MAG h3{color:#6b8e23;}
.mb_MAG .sliderMain .titlebox h2{color:#fff; text-shadow: 0px 0px 5px #6b8e23, 0px 0px 5px #6b8e23, 0px 0px 5px #6b8e23, 0px 0px 5px #6b8e23;}
.mb_Creator_PRO .sliderMain h2, .mb_Creator_PRO h3{color:#58a4eb;}
.mb_SI .sliderMain h2, .mb_SI h3{color:#33cccc;}
.mb_SI .sliderMain .titlebox h2{color:#fff; text-shadow: 0px 0px 5px #33cccc, 0px 0px 5px #33cccc, 0px 0px 5px #33cccc, 0px 0px 5px #6b8e23;}
.mb_EVA .sliderMain h2, .mb_EVA h3{color:#724de8;}
.mb_EVA .sliderMain .titlebox h2{color:#fff; text-shadow: 0px 0px 5px #724de8, 0px 0px 5px #724de8, 0px 0px 5px #724de8, 0px 0px 5px #724de8;}
@media (max-width: 960px) {
    .sliderMain h2{font-size: 26px; padding:3% 0 1%}
    .sliderMain p{font-size: 18px; padding: 0 20px 1%;}
}


/*-- Product -------------------------------*/
.Pagemain{max-width:1600px; margin:1% auto 0; display:flex; justify-content: center; align-items: center;}
.Pagemain .left{width: 50%; padding:0 30px;}
.Pagemain .productslist{width:50%;}
.Pagemain .slideshow  .slide img { max-width: 100%; height: auto; width: 100%; display: block; text-align: center;}
.Pagemain .slick-prev:before, .Pagemain .slick-next:before{display:none;}
.productslist{margin-left: 30px; color: #fff;}
.Pagemain .productslist h2 { font-size: 32px; color: #fff; margin: 0; padding: 10px 0 20px; font-weight: bold; line-height: 1.5; text-transform: uppercase;}
.Pagemain .productslist ul{margin-left:26px;font-size: 15px;}
.Pagemain .productslist ul li{padding:5px 0;}

@media (max-width: 767px) {
  .Pagemain{flex-direction: column; margin-bottom: 20px;}
  .Pagemain .left, .Pagemain .productslist{width:95%; padding: 0; margin: auto;}
  .Pagemain .productslist ul li{padding:2px 0;}
  .Pagemain .productslist h2{padding:10px 0; font-size:26px;}
}