@charset "utf-8";

/*Laptop new template 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');

/** Laptop Section */

.newNB-container {
    width: 100%;
    padding: 0px;
    overflow: hidden;
    background: #000000;
    /* margin: 0px auto; */
}

.section-group {
    padding: 0px;
    margin: 0px;
}

.section-group .Titlebar {
    position: relative;
    width: 100%;
    height: 80px;
    background: rgb(37, 37, 37);
    background: linear-gradient(180deg, rgba(37, 37, 37, 1) 0%, rgba(23, 23, 23, 1) 40%, rgba(0, 0, 0, 1) 100%);
    text-align: center;
}

.groupTitle {
    display: block;
    text-align: center;
}

.groupTitle .titlebox {
    width: 120px;
    border-top: 3px solid #FF0000;
    position: relative;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
}

.groupTitle .titlebox.visuals {
    width: 150px;
}

.groupTitle .titlebox.performance {
    width: 220px;
}

.groupTitle .titlebox.audio {
    width: 150px;
}

.groupTitle .titlebox.control {
    width: 180px;
}

.groupTitle .titlebox.streaming {
    width: 180px;
}

.groupTitle .titlebox .mainIcon {
    font-size: 21px;
    line-height: 21px;
    color: #FFF;
}

.groupTitle .group-T {
    font-size: 16px;
    padding-left: 10px;
    color: #FFF;
    text-transform: uppercase;
    font-family: 'din_pro_bold', 'cwTeXHei', 'Microsoft JhengHei';
}


/**container **/

.sub-container {
    background-color: #000;
    position: relative;
    width: 100%;
}

.sub-container .singleconatainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.btn-green {
    background-color: #6db40d;
    color: #FFF;
}

.btn-green:hover {
    color: #333;
    background-color: #e6e6e6;
}

@media screen and (max-width:1280px) {
    .groupTitle .titlebox {
        width: 250px;
    }

    .groupTitle .titlebox.visuals,
    .groupTitle .titlebox.performance,
    .groupTitle .titlebox.audio,
    .groupTitle .titlebox.control,
    .groupTitle .titlebox.streaming {
        width: 250px;
    }

    /**mobile Carousel Custom**/
    .carousel-custom {
        margin: 0px;
    }

    .carousel-custom .carousel-indicators {
        position: absolute;
        bottom: 10px;
        left: 50%;
        z-index: 15;
        width: 60%;
        padding-left: 0;
        margin-left: -30%;
        text-align: center;
        list-style: none;
    }

    .carousel-custom .carousel-indicators li {
        display: inline-block;
        width: 20px;
        height: 3px;
        margin: 0px;
        text-indent: -999px;
        cursor: pointer;
        background-color: #0009;
        background-color: #505050;
        border: 1px solid #505050;
        border-radius: 0px;
    }

    .carousel-custom .carousel-indicators .active {
        width: 20px;
        height: 3px;
        margin: 0px;
        background-color: #FF0000;
        border: 1px solid #FF0000;
    }

    .carousel-custom .carousel-caption {
        position: relative;
        left: 0;
        min-height: 180px;
    }
}

@media screen and (max-width: 768px) {
    .carousel-custom .carousel-indicators {
        bottom: 140px;
    }

    #myTab>li>a>span>img.image-main {
        display: none;
    }

    #myTab>li.active>a>span>img.image-main {
        display: block;
    }
}

#msi-declare-nb {
    width: 100%;
    color: #686868;
    font-family: "DINPro-Medium", "cwTeXHei", "Microsoft JhengHei", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    margin: 20px auto;
    line-height: 20px;
    position: relative;
}

#msi-declare-nb p {
    font-family: "DINPro-Medium", "cwTeXHei", "Microsoft JhengHei", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    padding-bottom: 10px
}

#msi-declare-nb .hdmi-logo img {
    width: 100%;
}

#msi-declare-nb .logo-col2 .hdmi-logo {
    flex: 0 0 10%;
}

#msi-declare-nb .logo-col2 .text {
    flex: 0 0 calc(45% - 40px);
    margin-left: 40px;
    box-sizing: border-box;
}

#msi-declare-nb.white-declare {
    color: #353535;
}

.declare-wrap {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #686868;
    padding: 15px 0;
}


/*.declare-wrap div {
    float: left; }
.declare-wrap .hdmi-logo {
    width: 12%;
    padding: 0 15px; }
.declare-wrap .textcontent {
    padding: 0 15px; }
.declare-wrap .textcontent:nth-of-type(2) {
    width: 48%; }
.declare-wrap .textcontent:nth-of-type(3) {
    width: 39%; }
.declare-wrap .more-btn {
    display: none;
    user-select: none; }
.declare-wrap .m-no-show {
    display: inline; }
.declare-wrap .textcontent.m-no-show {
    display: block; }
.declare-wrap .setTop {
    margin-top: 10px; }

.clearfix::after {
    content: "";
    clear: both;
    display: table; }*/

.hdmi-svg .hdmi-color {
    fill: #000;
}


/*@media (max-width: 1600px) {
    .declare-wrap {
        width: 100%;
        padding: 15px; } }

@media (max-width: 1366px) {
    .declare-wrap .hdmi-logo {
        width: 19%; }
    .declare-wrap .textcontent {
        padding: 0 15px;
        margin-bottom: 10px;
        float: right; }
    .declare-wrap .textcontent:nth-of-type(2) {
        width: 80%; }
    .declare-wrap .textcontent:nth-of-type(3) {
        width: 80%; } }

@media (max-width: 992px) {
    .declare-wrap {
        text-align: center; }
    .declare-wrap div {
        float: none; }
    .declare-wrap .hdmi-logo {
        width: 40%;
        margin: 0 auto 10px;
        float: none; }
    .declare-wrap .textcontent {
        padding: 0 15px;
        margin-bottom: 16px;
        float: none; }
    .declare-wrap .textcontent:nth-of-type(2) {
        width: 100%; }
    .declare-wrap .textcontent:nth-of-type(3) {
        width: 100%; }
    .declare-wrap .m-no-show {
        display: none; }
    .declare-wrap .textcontent.m-no-show {
        display: none; }
    .declare-wrap .more-btn {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #f00;
        color: #f00;
        cursor: pointer;
        transition: all 0.3s ease-in-out; }
    .declare-wrap .more-btn:hover {
        background-color: #330000; } }*/

@media screen and (max-width: 960px) {
    .declare-wrap {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 15px 6%;
        box-sizing: border-box;
    }

    #msi-declare-nb .text {
        margin-left: auto !important;
    }

    #msi-declare-nb .hdmi-logo {
        width: 100%;
        max-width: 200px;
        margin: 0 auto 10px;
    }
}

.slick-dotsGP {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .slick-dotsGP li {
        width: 40px !important;
    }

    .slick-dotsGP li button {
        width: 40px !important;
    }

    .slick-dotsGP li button:before {
        width: 40px !important;
    }
}

.slick-dotsGP li {
    position: relative;
    opacity: 1;
    display: inline-block;
    width: 80px;
    height: 4px;
    margin: 0 10px !important;
    padding: 0;
    background: #64fcf8;
    cursor: pointer;
}

.slick-dotsGP li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 80px;
    height: 4px;
    padding: 0px 5px 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
}

.slick-dotsGP li.slick-active button:before {
    opacity: .75;
    color: black;
    background: #76b900;
}

.slick-dotsGP li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: #64fcf8;
    content: '';
    text-align: center;
    opacity: 1;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* nb-gp76-11th-v1.css */


/*h3*/
/*h4*/
/* button */
/*Colors*/
.delighter.sequence .item {
    opacity: 0;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.delighter.sequence.started .item {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.delighter.sequence.started .item:nth-child(1) {
    opacity: 1;
    -webkit-transition: all 0.5s ease-out .1s;
    transition: all 0.5s ease-out .1s;
}

.delighter.sequence.started .item:nth-child(2) {
    opacity: 1;
    -webkit-transition: all 0.5s ease-out .3s;
    transition: all 0.5s ease-out .3s;
}

.delighter.sequence.started .item:nth-child(3) {
    opacity: 1;
    -webkit-transition: all 0.5s ease-out .5s;
    transition: all 0.5s ease-out .5s;
}

.delighter.sequence.started .item:nth-child(4) {
    opacity: 1;
    -webkit-transition: all 0.5s ease-out .7s;
    transition: all 0.5s ease-out .7s;
}

.delighter.right {
    -webkit-transform: translate(-10%);
    transform: translate(-10%);
    opacity: 0;
    -webkit-transition: all .7s ease-out;
    transition: all .7s ease-out;
}

.delighter.right.started {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}

.delighter.left {
    -webkit-transform: translate(10%);
    transform: translate(10%);
    opacity: 1;
    -webkit-transition: all .7s ease-out;
    transition: all .7s ease-out;
}

.delighter.left.started {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}

.delighter.top {
    -webkit-transform: translatey(30%);
    transform: translatey(30%);
    opacity: 0;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.delighter.top.started {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}

.delighter.bottom {
    -webkit-transform: translatey(-30%);
    transform: translatey(-30%);
    opacity: 0;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.delighter.bottom.started {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}

.delighter.fadein {
    opacity: 0;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.delighter.fadein.started {
    opacity: 1;
}

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

    .delighter.left,
    .delighter.right,
    .delighter.top,
    .delighter.bottom {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 0;
        -webkit-transition: all .5s ease-out;
        transition: all .5s ease-out;
    }
}

/*h3*/
/*h4*/
/* button */
/*Colors*/
.block {
    font-family: "DINPro-Light", "cwTeXHei", "Microsoft JhengHei";
    font-size: 24px;
    color: #fff;
    line-height: 1.8;
}

.block img {
    max-width: 100%;
    overflow: hidden;
}

.block img.full {
    width: 100% !important;
}

.block .cr-white {
    color: #fff;
}

.block .cr-blue {
    color: #00aeff;
}

.block .img {
    width: 100%;
    text-align: center;
}

.block .img img {
    display: inline-block;
    margin: 0 auto;
}

.block .imgxs,
.block img.imgxs {
    display: none;
}

.block .imglg,
.block img.imglg {
    display: inline-block;
    margin: 0 auto;
}

.block .wrapper {
    width: 85%;
    margin: 0 auto;
    max-width: 1800px;
}

.block .wrapper-lg {
    width: 85%;
    margin: 0 auto;
    max-width: 2560px;
}

.block .wrapper-lg-full {
    width: 100%;
    margin: 0 auto;
    max-width: 2560px;
}

.block .wrapper-full {
    width: 100%;
    margin: 0 auto;
}

.block ul,
.block li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.block .ulxs {
    counter-reset: li;
}

.block .ulxs li {
    position: relative;
    width: 100%;
    text-align: left !important;
    margin-left: 40px !important;
    padding: 10px 0 !important;
}

.block .ulxs li::before {
    content: counter(li);
    counter-increment: li;
    border-radius: 25px;
    display: inline-block;
    width: 14px;
    text-align: center;
    position: absolute;
    left: -40px;
    font-weight: bold;
    background: #f0871d;
    width: 25px;
    height: 25px;
    line-height: 25px;
}

.block h2 {
    font-family: "DINCond-Bold", "cwTeXHei", "Microsoft JhengHei";
    color: #f0871d;
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    padding: 0 0 25px;
    margin: 0;
}

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

.block h3 {
    font-family: "DINCond-Bold", "cwTeXHei", "Microsoft JhengHei";
    padding: 0 0 16px;
    font-size: 48px;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.1;
}

.block h3.white {
    color: #fff;
}

.block h4 {
    font-family: "DINCond-Bold", "cwTeXHei", "Microsoft JhengHei";
    padding: 0 0 16px;
    font-size: 36px;
    color: #fff;
}

.block h4.white {
    color: #fff;
}

.block figcaption {
    font-size: 100%;
}

.block .data {
    font-family: 'DINCond-Light';
    font-size: 24px;
    vertical-align: middle;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.block .data-num {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    font-weight: bolder;
}

.block .li-left {
    margin-left: 20px;
}

.block .data-note {
    font-size: 25px;
    margin-top: -14px;
    color: #ffffff;
}

/* .block .data li:last-child {
    margin-left: 24px;
  } */

.block .data em,
.block .data b {
    display: inline-block;
    font-style: normal;
    font-size: 220%;
}

.block .data em+span,
.block .data b+span {
    margin-left: 10px;
}

.block .data span+em,
.block .data span+b {
    margin-left: 10px;
}

.block .data span {
    font-size: 100%;
}

.block .data-sm {
    font-family: 'DINCond-Light';
    font-size: 2.5vh;
}

.block .data-sm span,
.block .data-sm b {
    font-size: 220%;
    font-weight: 400;
}

.block .data-xs {
    font-family: 'DINCond-Light';
    font-size: 1.5vh;
}

.block .data-xs span,
.block .data-xs b {
    font-size: 220%;
    font-weight: 400;
}

.block a {
    /* color: rgba(240, 135, 29, 0.8); */
    /* text-decoration: underline; */
}

.block a:hover,
.block a:active,
.block a:focus {
    /* color: #f0871d; */
}

.block p {
    font-size: 24px;
    line-height: 1.4;
    color: #fff;
}

/* .block p + a {
    margin-top: 4vh;
  } */

.block .note {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.2;
    padding-top: 15px;
}

.block .note a {
    color: #f0871d;
    text-decoration: underline;
}

.block .note a:hover,
.block .note a:active,
.block .note a:focus {
    color: #f0871d;
}

.block.sp,
.block .sp {
    padding: 6% 0;
}

.block.splg,
.block .splg {
    padding: 10% 0;
}

.block.sptop,
.block .sptop {
    padding-top: 6%;
}

.block.spbt,
.block .spbt {
    padding-bottom: 6%;
}

.block.splgtop,
.block .splgtop {
    padding-top: 10%;
}

.block.splgbt,
.block .splgbt {
    padding-bottom: 10%;
}

.block.center,
.block .center {
    text-align: center;
}

.block .btsty,
.block a.btsty {
    position: relative;
    font-family: "DINCond-Bold", "cwTeXHei", "Microsoft JhengHei";
    font-size: 24px;
    color: #fff;
    display: inline-block;
    letter-spacing: 3px;
    padding: 8px 24px;
    text-decoration: none !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid;
    border-image-slice: 1;
    background: #003852;
    background: linear-gradient(230deg, #003852 0%, rgba(0, 56, 82, 0), rgba(0, 0, 0, 0.5) 60%);
    border-image-source: linear-gradient(25deg, #03caf5 0%, rgba(3, 202, 245, 0) 40%);
    -webkit-transition: .5s all;
    transition: .5s all;
}

.block .btsty.btsty-video::after,
.block a.btsty.btsty-video::after {
    content: '\25ba';
    vertical-align: middle;
    font-size: 70%;
    margin-left: 5px;
    color: #fff;
    display: inline-block;
}

.block .btsty::before,
.block a.btsty::before {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    background: transparent;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    background: linear-gradient(50deg, #03caf5, rgba(3, 202, 245, 0), rgba(3, 202, 245, 0));
    z-index: -1;
}

.block .btsty::after,
.block a.btsty::after {
    content: '';
    vertical-align: middle;
    font-size: 70%;
    margin-left: 5px;
    color: #fff;
    display: inline-block;
    font-family: fantasy;
}

.block .btsty:hover,
.block a.btsty:hover {
    text-shadow: 0px 3px 10px #03caf5;
    background: linear-gradient(230deg, #003852 0%, rgba(0, 56, 82, 0.2) 10%);
    color: #fff;
}

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

    .block h2,
    .block h3 {
        font-size: 42px;
    }

    .block h4 {
        font-size: 30px;
    }

    .block p {
        font-size: 20px;
    }

    .block .wrapper {
        max-width: 1400px;
    }

    .block.sp {
        padding: 10vh 0;
    }

    .block.spbt,
    .block .spbt {
        padding-bottom: 10vh;
    }

    .block.splgtop,
    .block .splgtop {
        padding-top: 6vh;
    }

    .block.splgbt,
    .block .splgbt {
        padding-bottom: 6vh;
    }
}

@media screen and (max-width: 1536px) {
    .block {
        font-size: 16px;
    }

    .block h2,
    .block h3 {
        font-size: 36px;
    }

    .block h4 {
        font-size: 24px;
    }

    .block h3 {
        padding: 0;
    }

    .block p {
        font-size: 18px;
    }
}

@media screen and (max-width: 960px) {
    .block {
        font-size: 16px;
    }

    .block h2,
    .block h3 {
        font-size: 36px;
        line-height: 1.1;
    }

    .block h4 {
        font-size: 24px;
    }

    .block p {
        font-size: 16px;
    }

    .block .img {
        width: 100%;
        text-align: center;
    }

    .block .img img {
        max-width: 80%;
    }

    .block .imglg,
    .block img.imglg {
        display: none;
    }

    .block .imgxs,
    .block img.imgxs {
        display: block;
    }

    .block.sp {
        padding: 45px 0;
    }

    .block.spbt,
    .block .spbt {
        padding-bottom: 45px;
    }

    .block.splgtop,
    .block .splgtop {
        padding-top: 6vh;
    }

    .block.splgbt,
    .block .splgbt {
        padding-bottom: 6vh;
    }

    .block .data {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.box-sc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.box-s {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.box-c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.box-cc {
    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;
}

@media screen and (max-width: 960px) {
    .box-sc {
        display: block;
    }

    .box-sc.box-xs,
    .box-cc.box-xs,
    .box-s.box-xs,
    .box-c.box-xs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .box-sc,
    .box-cc,
    .box-s,
    .box-c {
        -ms-flex-item-align: baseline;
        align-self: baseline;
    }
}

.nb-compbox .twentytwenty-overlay,
.nb-compbox .twentytwenty-before-label,
.nb-compbox .twentytwenty-after-label {
    pointer-events: none;
}

.compbox .twentytwenty-overlay,
.compbox .twentytwenty-before-label,
.compbox .twentytwenty-after-label {
    pointer-events: none;
}

.vd-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
    z-index: 0;
}

.vd-container iframe,
.vd-container object,
.vd-container embed,
.vd-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}

/*# sourceMappingURL=nb-gp76-11th.css.map */


/* common-pd-detail.css */


@charset "UTF-8";

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
}

ol,
ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after {
    content: '';
    content: none;
}

q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button {
    outline: none;
}

@font-face {
    font-family: MSIBodyFont;
    src: local(Segoe UI), local(Heiti TC), local("微軟正黑體"), local("黑体"), sans-serif;
}

@font-face {
    font-family: 'MSIBodyFont';
    src: local("Meiryo UI"), local("ヒラギノ角ゴ Pro W3");
    unicode-range: U+3000-9FFF, U+ff??;
}

/* Latin characters */
@font-face {
    font-family: 'MSIBodyFont';
    unicode-range: U+00-024F;
    src: local(Helvetica), local(Arial);
}

@font-face {
    font-family: 'MSIBodyFont';
    src: local("Noto Sans TC"), local("微軟正黑體"), local("Microsoft JhengHei");
    unicode-range: U+4E00-9FFF;
}

/* 注音符號專用 */
@font-face {
    font-family: MSIBodyFont;
    unicode-range: U+3100-312F;
    src: local("Noto Sans TC"), local("微軟正黑體"), local("Microsoft JhengHei");
}

a {
    text-decoration: none;
    noFocusline: expression(this.onFocus=this.blur());
    outline: 0;
}

a:hover {
    text-decoration: none;
}

a:focus {
    -moz-outline-style: none;
}

/*img*/
img {
    max-width: 100%;
    width: expression(document.body.clientWidth>100?"100%":"auto");
    overflow: hidden;
}

.product-mainbox {
    /* font-family: MSIBodyFont, "Microsoft JhengHei", sans-serif; */
    font-size: 18px;
    color: #fff;
    background: #000;
}

.product-mainbox.gray-white {
    background: #fff;
    color: #222;
}

@media screen and (max-width: 960px) {
    .hidden-xs {
        display: none !important;
    }
}

#product-main-nav {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
}

#product-main-nav .page-breadcrumb {
    background: #494949;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    display: none;
}

#product-main-nav .page-breadcrumb span {
    padding: 0 10px;
}

#product-main-nav .page-breadcrumb a {
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
}

#product-main-nav .page-breadcrumb a:hover {
    color: #f00;
    text-decoration: underline;
}

#product-main-nav .navbar-container {
    background: #f00;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100vw;
}

#product-main-nav .navbar-container.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

#product-main-nav .navbar-container.fixed:after {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    bottom: -10px;
}

@media screen and (max-width: 960px) {
    #product-main-nav .navbar-container.fixed:after {
        display: none;
    }
}

#product-main-nav .navbar-container.fixed .category {
    display: none;
}

#product-main-nav .page-title {
    padding: 20px;
}

#product-main-nav .page-title .bt {
    padding-top: 15px;
    font-size: 14px;
    display: none;
}

#product-main-nav .page-title .bt button {
    border: none;
    outline: none;
    background: none;
    color: #fff;
    cursor: pointer;
}

#product-main-nav .page-title .bt button i {
    padding-right: 5px;
}

#product-main-nav .page-title .bt a {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    margin-left: 15px;
}

#product-main-nav .category {
    padding-bottom: 5px;
    opacity: 0.8;
    font-size: 90%;
}

#product-main-nav .category a {
    text-decoration: none;
    color: #fff;
}

#product-main-nav .category a:hover {
    text-decoration: underline;
}

#product-main-nav h1 {
    font-size: 32.5px;
    font-weight: bold;
    margin: 0;
}

#product-main-nav h1 span {
    font-size: 18px;
    margin-left: 10px;
    letter-spacing: 1px;
}

#product-main-nav h1 span:before {
    content: "(";
}

#product-main-nav h1 span:after {
    content: ")";
}

#product-main-nav .pdnavtab {
    margin: 0 20px 0 0;
}

#product-main-nav .pdnavtab ul {
    margin: 0;
    padding: 0;
    display: flex;
}

#product-main-nav .pdnavtab li {
    display: inline-block;
    border-bottom: transparent 3px solid;
    padding-bottom: 10px;
    margin-right: 20px;
}

#product-main-nav .pdnavtab li:hover {
    border-color: #fff;
}

#product-main-nav .pdnavtab li.active {
    border-color: #000;
}

#product-main-nav .pdnavtab li.active ol li a {
    color: #ccc;
}

#product-main-nav .pdnavtab li.active ol li.active a {
    color: #EA2023;
}

#product-main-nav .pdnavtab li ol {
    display: none;
}

#product-main-nav .pdnavtab a {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 5px 10px;
    display: block;
    white-space: nowrap;
}

#product-main-nav .pdnavtab a.bt-buy {
    color: #f00;
}

#product-main-nav .bt-buy {
    background: #fff;
    color: #f00;
    border-radius: 5px;
}

#product-main-nav .bt-buy:hover {
    background: #000;
}

/* #product-main-nav button {
    font-family: MSIBodyFont, "Microsoft JhengHei", sans-serif; } */
@media screen and (max-width: 1920px) {
    #product-main-nav {
        font-size: 18px;
    }
}

@media screen and (max-width: 1536px) {
    #product-main-nav .navbar-container {
        display: block;
    }

    #product-main-nav .navbar-container:after {
        clear: both;
        display: block;
        visibility: hidden;
        height: 0;
        content: "";
    }

    #product-main-nav .pdnavtab {
        float: right;
    }
}

@media screen and (max-width: 960px) {
    #product-main-nav {
        font-size: 16px;
    }
}

#product-main-nav * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    #product-main-nav .navbar-container {
        display: block;
    }

    #product-main-nav .pdnavtab {
        padding-left: 10px;
    }
}

@media screen and (max-width: 960px) {
    #product-main-nav .page-breadcrumb {
        display: block;
    }

    #product-main-nav .navbar-container {
        text-align: center;
        padding: 5px 0;
    }

    #product-main-nav .category {
        display: none;
    }

    #product-main-nav h1 {
        font-size: 28px;
    }

    #product-main-nav h1 span {
        display: block;
        font-size: 14px;
        font-weight: normal;
    }

    #product-main-nav .page-title .bt {
        display: block;
    }

    #product-main-nav .pdnavtab {
        margin: 0 auto;
        background: #EA2023;
        border-top: #000 2px solid;
        background: rgba(0, 0, 0, 0.8);
        display: none;
        padding: 0;
        width: 100%;
        float: none;
    }

    #product-main-nav .pdnavtab li {
        display: block;
        padding: 0;
        margin: 0;
    }

    #product-main-nav .pdnavtab li:hover {
        border-color: transparent;
    }

    #product-main-nav .pdnavtab li a:hover {
        color: #f00;
    }

    #product-main-nav .pdnavtab li.active {
        border-width: 2px;
    }

    #product-main-nav .pdnavtab li.active a {
        color: #f00;
    }

    #product-main-nav .pdnavtab li ol {
        padding: 0;
        margin-left: auto;
        background: rgba(0, 0, 0, 0.2);
        display: block;
    }

    #product-main-nav .pdnavtab li ol a {
        color: #999;
    }

    #product-main-nav .pdnavtab a {
        font-weight: normal;
        padding: 10px;
    }
}

.introbox {
    padding: 3% 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#1f1f1f), to(#000));
    background: -webkit-linear-gradient(#1f1f1f, #000);
    background: -o-linear-gradient(#1f1f1f, #000);
    background: linear-gradient(#1f1f1f, #000);
    position: relative;
}

.introbox .pd-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

/* .introbox .pd-container:after {
      clear: both;
      display: block;
      visibility: hidden;
      height: 0;
      content: ""; } */
.introbox .sloganbox {
    position: absolute;
    top: 3%;
    right: 0;
    width: 100%;
    left: 0;
    font-size: 80%;
}

.introbox .sloganbox .pd-container {
    text-align: right;
    display: block;
}

.introbox .pd-imgbox {
    /* float: left; */
    width: 45%;
    max-width: auto;
    text-align: center;
}

.introbox .pd-imgbox * {
    outline: none;
}

.introbox .pd-txtbox {
    /* float: right; */
    width: 50%;
    max-width: auto;
    letter-spacing: .5px;
}

.introbox h2 {
    font-weight: bold;
    font-size: 28px;
    padding-bottom: 15px;
}

.introbox h3 {
    font-weight: bold;
    font-size: 19.6px;
    padding-bottom: 15px;
    line-height: 1.4;
}

.introbox p {
    color: #f00;
    padding: 5px 0;
}

.introbox ul {
    margin-left: 20px;
    padding-bottom: 15px;
}

.introbox ul li {
    list-style: disc;
    padding: 5px 0;
}

.introbox .socila-share {
    padding: 5px 0 15px;
}

.introbox .socila-share a {
    color: #fff;
    text-decoration: none;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
    line-height: 55px;
    font-size: 140%;
    background: #333;
}

.introbox .socila-share a:hover {
    background: #f00;
}

.introbox .bt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 15px;
}

.introbox .bt a {
    text-decoration: none;
    color: #fff;
    background: #f00;
    padding: 15px;
    text-transform: uppercase;
    border-radius: 5px;
    margin-right: 10px;
}

.introbox .bt a:hover {
    background: #222;
    color: #f00;
}

.introbox .bt-ytplay {
    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;
}

.introbox .bt-ytplay:after {
    content: "\e915";
    display: block;
    font-family: 'msi-icons';
    color: #fff;
    position: absolute;
    font-size: 80px;
    z-index: 2;
    opacity: .5;
}

.introbox .bt-ytplay:hover:after {
    text-shadow: #f000 0 0 30px;
    opacity: 1;
}

.introbox .note {
    color: #EA2023;
    padding-top: 0px;
}

.introbox .icons {
    padding-top: 35px;
}

.introbox .icons img {
    height: 80px;
}

.introbox .color {
    padding: 20px 0 10px;
}

.introbox .color a {
    width: 21px;
    height: 21px;
    border-radius: 21px;
    display: inline-block;
    margin-right: 10px;
    border: #333 1px solid;
}

.introbox .color a:hover {
    border-color: #f00;
}

.introbox .promotion {
    margin-top: 30px;
    padding-top: 20px;
}

.introbox .promotion h4 {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
}

.introbox .promotion h4 i {
    font-size: 12px;
    padding-left: 10px;
}

.introbox .promotion figure {
    width: 160px;
    margin-top: 20px;
    margin-right: 20px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.introbox .promotion a {
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
}

.introbox .promotion a time {
    font-size: 12px;
    color: #999;
}

.introbox .promotion a:hover {
    color: #f00;
}

.introbox .bt-add {
    height: 60px;
}

.introbox .squaredCheck {
    display: inline-block;
    background: #222;
    padding: 10px 15px;
    border-radius: 5px;
}

.introbox .squaredCheck label {
    cursor: pointer;
}

.introbox .squaredCheck label:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #333;
    margin-right: 10px;
    border: #444 1px solid;
    border-radius: 3px;
    border-style: inset;
}

.introbox .squaredCheck input[type="checkbox"] {
    display: none;
}

.introbox .squaredCheck input[type="checkbox"]:checked+label {
    color: #f00;
}

.introbox .squaredCheck input[type="checkbox"]:checked+label:before {
    background: url(../images/icon-check-w.svg) center center no-repeat;
    background-size: cover;
    background-color: #f00;
    border-color: #EA2023;
    border-style: inset;
}

.introbox .squaredCheck:hover {
    background: #999;
}

.introbox .owl-thumbs {
    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-top: 35px;
}

.introbox .owl-thumbs button {
    background: #222;
    border: none;
    border: transparent 2px solid;
    cursor: pointer;
    border-radius: 5px;
    padding: 5px;
    margin: 0 5px;
}

.introbox .owl-thumbs button.active {
    border-color: #333;
    background: #333;
}

.introbox .owl-thumbs button:hover {
    border-color: #333;
}

.introbox .owl-thumbs button.yt {
    position: relative;
}

.introbox .owl-thumbs button.yt:after {
    content: "\e915";
    display: block;
    font-family: 'msi-icons';
    color: #fff;
    text-shadow: 0 0 10px #000;
    position: absolute;
    font-size: 24px;
    z-index: 2;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    opacity: .7;
}

@media screen and (max-width: 1920px) {
    .introbox {
        padding: 5% 0;
    }

    .introbox .icons img {
        height: 65px;
    }
}

@media screen and (max-width: 1536px) {
    .introbox ul li {
        padding: 2.5px 0;
    }
}

@media screen and (max-width: 960px) {
    .introbox {
        padding-bottom: 5vh;
    }

    .introbox .pd-container {
        display: block;
    }

    .introbox .pd-imgbox,
    .introbox .pd-txtbox {
        float: none;
        width: 100%;
    }

    .introbox .pd-imgbox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 80%;
        margin: 0 auto;
        padding-bottom: 0;
    }

    .introbox .pd-slideshow {
        position: relative;
        top: 0;
    }

    .introbox .pd-txtbox {
        padding-left: 0;
        text-align: center;
    }

    .introbox .pd-txtbox ul {
        text-align: left;
    }

    .introbox .pd-txtbox p {
        text-align: left;
    }

    .introbox .socila-share {
        padding: 15px 0;
    }

    .introbox .icons img {
        height: 60px;
    }

    .introbox .bt {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: block;
    }

    .introbox .bt a {
        display: block;
        margin: 5px auto;
    }

    .introbox .bt-add {
        text-align: center;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    .introbox .owl-thumbs {
        padding-top: 0;
        padding-bottom: 5vh;
    }

    .introbox h2 {
        padding-top: 15px;
    }
}

.pd-declare {
    font-size: 16px;
    color: #999;
    line-height: 1.4;
    /* font-family: MSIBodyFont, "Microsoft JhengHei", sans-serif;  */
}

.pd-declare .declare-wrap {
    padding-top: 3%;
    padding-bottom: 3%;
}

.pd-declare .logo-col2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-top: #444 1px solid;
}

.pd-declare .logo-col2 .hdmi-logo {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 200px;
    flex: 0 0 200px;
}

.pd-declare .logo-col2 .text {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc((100% - 250px) / 2);
    flex: 0 0 calc((100% - 250px) / 2);
}

.pd-declare p {
    padding-bottom: 15px;
}

@media screen and (max-width: 960px) {
    .pd-declare .logo-col2 {
        display: block;
    }

    .pd-declare .logo-col2 .hdmi-logo {
        max-width: 180px;
        margin: 10px auto;
    }
}

.pd-declare .nv-hdmi-declare {
    text-align: center;
    padding: 3% 0;
}

.pd-declare .nv-hdmi-declare .logoicons {
    padding-bottom: 25px;
}

.pd-declare .nv-hdmi-declare .logoicons img {
    height: 60px;
    margin: 0 15px;
}

.pd-notetext {
    background: -webkit-gradient(linear, left top, left bottom, from(#1f1f1f), to(#000));
    background: -webkit-linear-gradient(#1f1f1f, #000);
    background: -o-linear-gradient(#1f1f1f, #000);
    background: linear-gradient(#1f1f1f, #000);
    padding: 2% 0;
    text-align: center;
}

#aside-tool {
    /* font-family: MSIBodyFont, "Microsoft JhengHei", sans-serif; */
    font-size: 18px;
    color: #fff;
    position: fixed;
    z-index: 1000;
    right: 15px;
    bottom: 10%;
    display: none;
}

#aside-tool div {
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 10px;
    background: #c00;
}

#aside-tool div:hover {
    background: #999;
}

#aside-tool div.active {
    background: #f00;
}

@media screen and (max-width: 960px) {
    #aside-tool {
        right: 0;
        bottom: 0;
    }

    #aside-tool div {
        width: auto;
        height: auto;
        border-radius: 0;
        padding: 25px 5px;
        margin-top: 5px;
        display: block;
    }

    #aside-tool div i {
        font-size: 14px;
    }
}

.bt-scroll-top span {
    font-size: 12px;
}

@media screen and (max-width: 960px) {
    .bt-scroll-top span {
        padding: 5px 0;
        display: none;
    }
}

/*recommand*/
.recommand {
    background: -webkit-gradient(linear, left top, left bottom, from(#1f1f1f), to(#000));
    background: -webkit-linear-gradient(#1f1f1f, #000);
    background: -o-linear-gradient(#1f1f1f, #000);
    background: linear-gradient(#1f1f1f, #000);
    text-align: center;
    padding: 3% 0;
}

.recommand h2 {
    font-size: 28px;
    text-transform: uppercase;
    padding-bottom: 45px;
}

.recommand a {
    display: inline-block;
    vertical-align: top;
    color: #fff;
    padding: 15px;
    /*margin: 15px 25px;*/
}

.recommand a span {
    display: block;
}

.recommand a:hover {
    color: #f00;
}

.recommand .pd-name {
    font-size: 16px;
}

.recommand .pd-model {
    font-size: 15px;
}

.recommand .pd-model:before {
    content: "(";
    padding-right: 5px;
}

.recommand .pd-model:after {
    content: ")";
    padding-left: 5px;
}

#pd-recommand {
    position: relative;
    z-index: 1;
}

#pd-recommand a {
    outline: none;
}

#pd-recommand .pd-recommand-arrow {
    height: 20px;
    width: 20px;
    /*margintop請下-height的2分之1*/
    margin-top: -10px;
    /* ----- */
    position: absolute;
    z-index: 2;
    top: 40%;
    cursor: pointer;
}

.pd-recommand-prev {
    left: -20px;
}

.pd-recommand-next {
    right: -20px;
}

.pd-recommand-prev::after {
    content: "❮";
    color: #eee;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
}

.pd-recommand-next::after {
    content: "❯";
    color: #eee;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
}

.pd-recommand-prev:hover::after {
    color: #f00;
}

.pd-recommand-next:hover::after {
    color: #f00;
}

#pd-recommand .slick-dots {
    /* //margin-top: 40px; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    width: 100%;
}

#pd-recommand .slick-dots li {
    overflow: hidden;
}

.slick-active {
    outline: none !important;
}

/* #pd-recommand .slick-dots li.slick-active button {
  background-color: #f00; }

#pd-recommand .slick-dots li.slick-active button:hover {
  background-color: #f00; } */

/* #pd-recommand .slick-dots li button {
  padding: 0;
  background-color: #666;
  width: 70px;
  height: 3px;
  margin: 5px 4px;
  cursor: pointer;
  font-size: 0px;
  border-radius: 50%;
  border: none;
  -webkit-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
  cursor: pointer; } */

#pd-recommand .slick-dots li button:focus {
    outline: none;
}

/* #pd-recommand .slick-dots li button:hover {
  background-color: #f00; } */

@media screen and (max-width: 960px) {
    .recommand {
        padding: 65px 0 15px;
    }

}

.product-mainbox .pd-container,
.product-mainbox .declare-wrap,
.product-mainbox .container {
    width: 100%;
    max-width: 1330px;
    margin: 0 auto;
    padding: 0 25px;
    box-sizing: border-box;
}

.product-mainbox.gray-white {
    background: #fff;
    color: #222;
}

.product-mainbox.gray-white #product-main-nav .navbar-container {
    background: #999;
}

.product-mainbox.gray-white #product-main-nav .bt-buy {
    color: #777;
}

.product-mainbox.gray-white #product-main-nav .bt-buy:hover {
    background: #999;
    color: #fff;
}

.product-mainbox.gray-white #product-main-nav .bt button {
    color: #fff;
}

.product-mainbox.gray-white .introbox {
    background: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#fff));
    background: -webkit-linear-gradient(#e8e8e8, #fff);
    background: -o-linear-gradient(#e8e8e8, #fff);
    background: linear-gradient(#e8e8e8, #fff);
}

.product-mainbox.gray-white .introbox .socila-share a {
    background: #777;
}

.product-mainbox.gray-white .introbox .socila-share a:hover {
    background: #999;
}

.product-mainbox.gray-white .introbox .bt a {
    background: #fff;
    color: #777;
    border: #ccc 1px solid;
}

.product-mainbox.gray-white .introbox .bt a:hover {
    background: #999;
    color: #fff;
}

.product-mainbox.gray-white .introbox .color a {
    border-color: #eee;
}

.product-mainbox.gray-white .introbox .color a:hover {
    border-color: #999;
}

.product-mainbox.gray-white .introbox ul {
    color: #666;
}

.product-mainbox.gray-white .introbox .note {
    color: #000;
}

.product-mainbox.gray-white .introbox .owl-thumbs button {
    background: #eee;
}

.product-mainbox.gray-white .introbox .owl-thumbs button.active {
    border-color: #ccc;
}

.product-mainbox.gray-white h1 {
    color: #fff;
}

.product-mainbox.gray-white .pdnavtab a.bt-buy {
    color: #222;
}

.product-mainbox.gray-white .pdnavtab a.bt-buy:hover {
    color: #fff;
}

.product-mainbox.gray-white .title .bt button {
    color: #222;
}

.product-mainbox.gray-white #aside-tool {
    color: #fff;
}

.product-mainbox.gray-white #aside-tool div {
    background: #777;
}

.product-mainbox.gray-white #aside-tool div:hover {
    background: #999;
}

.product-mainbox.gray-white .declare-wrap {
    border-top: #ccc 1px solid;
}

.product-mainbox.gray-white .recommand {
    background: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#fff));
    background: -webkit-linear-gradient(#e8e8e8, #fff);
    background: -o-linear-gradient(#e8e8e8, #fff);
    background: linear-gradient(#e8e8e8, #fff);
}

.product-mainbox.gray-white .recommand a {
    color: #222;
}

.product-mainbox.gray-white .recommand a:hover {
    color: #fff;
}

.product-mainbox.gray-white .pd-recommand-prev::after,
.product-mainbox.gray-white .pd-recommand-next::after {
    color: #777;
}

.product-mainbox.gray-white .pd-recommand-prev:hover::after,
.product-mainbox.gray-white .pd-recommand-next:hover::after {
    color: #999;
}

/* .product-mainbox.gray-white #pd-recommand .slick-dots li.slick-active button {
    background-color: #999; }
  .product-mainbox.gray-white #pd-recommand .slick-dots li.slick-active button:hover {
    background-color: #999; }
  .product-mainbox.gray-white #pd-recommand .slick-dots li button:hover {
    background-color: #999; } */
@media screen and (max-width: 960px) {
    .product-mainbox.gray-white .pdnavtab {
        background: #ccc;
        border-top-color: #999;
    }

    .product-mainbox.gray-white .pdnavtab li:hover {
        color: #777;
    }

    .product-mainbox.gray-white .pdnavtab li:hover a {
        color: #777;
    }

    .product-mainbox.gray-white .pdnavtab li.active {
        border-bottom: #999 1px solid;
    }

    .product-mainbox.gray-white .pdnavtab li.active a {
        color: #777;
    }

    .product-mainbox.gray-white .pdnavtab li ol {
        background: #fff;
    }
}

.product-mainbox.gray #product-main-nav .navbar-container {
    background: #999;
}

.product-mainbox.gray #product-main-nav .bt-buy {
    color: #777;
}

.product-mainbox.gray #product-main-nav .bt-buy:hover {
    background: #999;
    color: #fff;
}

.product-mainbox.gray #product-main-nav .bt button {
    color: #fff;
}

.product-mainbox.gray .introbox {
    color: #fff;
}

.product-mainbox.gray .introbox .socila-share a {
    background: #777;
}

.product-mainbox.gray .introbox .socila-share a:hover {
    background: #999;
}

.product-mainbox.gray .introbox .bt a {
    background: #fff;
    color: #777;
    border: #ccc 1px solid;
}

.product-mainbox.gray .introbox .bt a:hover {
    background: #999;
    color: #fff;
}

.product-mainbox.gray .introbox .color a:hover {
    border-color: #999;
}

.product-mainbox.gray h1 {
    color: #fff;
}

.product-mainbox.gray .pdnavtab a.bt-buy {
    color: #222;
}

.product-mainbox.gray .pdnavtab a.bt-buy:hover {
    color: #fff;
}

.product-mainbox.gray .title .bt button {
    color: #222;
}

.product-mainbox.gray #aside-tool {
    color: #fff;
}

.product-mainbox.gray #aside-tool div {
    background: #777;
}

.product-mainbox.gray #aside-tool div:hover {
    background: #999;
}

.product-mainbox.gray .declare-wrap {
    border-top: #444 1px solid;
}

@media screen and (max-width: 960px) {
    .product-mainbox.gray .pdnavtab {
        background: #ccc;
        border-top-color: #999;
    }

    .product-mainbox.gray .pdnavtab li:hover {
        color: #777;
    }

    .product-mainbox.gray .pdnavtab li:hover a {
        color: #777;
    }

    .product-mainbox.gray .pdnavtab li.active {
        border-bottom: #999 1px solid;
    }

    .product-mainbox.gray .pdnavtab li.active a {
        color: #777;
    }

    .product-mainbox.gray .pdnavtab li ol {
        background: #fff;
    }
}

.product-mainbox.green {
    background: #fff;
    color: #222;
}

.product-mainbox.green #product-main-nav .navbar-container {
    background: #82bc00;
}

.product-mainbox.green #product-main-nav .bt-buy {
    color: #82bc00;
}

.product-mainbox.green #product-main-nav .bt-buy:hover {
    background: #999;
    color: #fff;
}

.product-mainbox.green #product-main-nav .bt button {
    color: #fff;
}

.product-mainbox.green .introbox {
    background: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#fff));
    background: -webkit-linear-gradient(#e8e8e8, #fff);
    background: -o-linear-gradient(#e8e8e8, #fff);
    background: linear-gradient(#e8e8e8, #fff);
}

.product-mainbox.green .introbox .socila-share a {
    background: #82bc00;
}

.product-mainbox.green .introbox .socila-share a:hover {
    background: #999;
}

.product-mainbox.green .introbox .bt a {
    background: #fff;
    color: #82bc00;
    border: #ccc 1px solid;
}

.product-mainbox.green .introbox .bt a:hover {
    background: #999;
    color: #fff;
}

.product-mainbox.green .introbox .color a {
    border-color: #eee;
}

.product-mainbox.green .introbox .color a:hover {
    border-color: #999;
}

.product-mainbox.green .introbox ul {
    color: #666;
}

.product-mainbox.green .introbox .note {
    color: #000;
}

.product-mainbox.green .introbox .owl-thumbs button {
    background: #eee;
}

.product-mainbox.green .introbox .owl-thumbs button.active {
    border-color: #ccc;
}

.product-mainbox.green h1 {
    color: #fff;
}

.product-mainbox.green .pdnavtab a.bt-buy {
    color: #222;
}

.product-mainbox.green .pdnavtab a.bt-buy:hover {
    color: #fff;
}

.product-mainbox.green .title .bt button {
    color: #222;
}

.product-mainbox.green #aside-tool {
    color: #fff;
}

.product-mainbox.green #aside-tool div {
    background: #82bc00;
}

.product-mainbox.green #aside-tool div:hover {
    background: #999;
}

.product-mainbox.green .declare-wrap {
    border-top: #ccc 1px solid;
}

.product-mainbox.green .recommand {
    background: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#fff));
    background: -webkit-linear-gradient(#e8e8e8, #fff);
    background: -o-linear-gradient(#e8e8e8, #fff);
    background: linear-gradient(#e8e8e8, #fff);
}

.product-mainbox.green .recommand a {
    color: #222;
}

.product-mainbox.green .recommand a:hover {
    color: #82bc00;
}

.product-mainbox.green .pd-recommand-prev::after,
.product-mainbox.green .pd-recommand-next::after {
    color: #777;
}

.product-mainbox.green .pd-recommand-prev:hover::after,
.product-mainbox.green .pd-recommand-next:hover::after {
    color: #82bc00;
}

.product-mainbox.green #pd-recommand .slick-dots li.slick-active button {
    background-color: #82bc00;
}

.product-mainbox.green #pd-recommand .slick-dots li.slick-active button:hover {
    background-color: #82bc00;
}

.product-mainbox.green #pd-recommand .slick-dots li button:hover {
    background-color: #82bc00;
}

@media screen and (max-width: 960px) {
    .product-mainbox.green .pdnavtab {
        background: #ccc;
        border-top-color: #999;
    }

    .product-mainbox.green .pdnavtab li:hover {
        color: #82bc00;
    }

    .product-mainbox.green .pdnavtab li:hover a {
        color: #82bc00;
    }

    .product-mainbox.green .pdnavtab li.active {
        border-bottom: #999 1px solid;
    }

    .product-mainbox.green .pdnavtab li.active a {
        color: #82bc00;
    }

    .product-mainbox.green .pdnavtab li ol {
        background: #fff;
    }
}

.product-mainbox.alpha #product-main-nav .navbar-container {
    background: #92b457;
}

.product-mainbox.alpha #product-main-nav .bt-buy {
    color: #92b457;
}

.product-mainbox.alpha #product-main-nav .bt-buy:hover {
    background: #999;
    color: #fff;
}

.product-mainbox.alpha #product-main-nav .bt button {
    color: #fff;
}

.product-mainbox.alpha .introbox .bt a {
    background: #92b457;
}

.product-mainbox.alpha .introbox .bt a:hover {
    background: #999;
    color: #fff;
}

.product-mainbox.alpha .introbox .owl-thumbs button {
    background: #eee;
}

.product-mainbox.alpha .introbox .owl-thumbs button.active {
    border-color: #ccc;
}

.product-mainbox.alpha h1 {
    color: #fff;
}

.product-mainbox.alpha .pdnavtab a.bt-buy {
    color: #222;
}

.product-mainbox.alpha .pdnavtab a.bt-buy:hover {
    color: #fff;
}

.product-mainbox.alpha .title .bt button {
    color: #222;
}

.product-mainbox.alpha #aside-tool {
    color: #fff;
}

.product-mainbox.alpha #aside-tool div {
    background: #92b457;
}

.product-mainbox.alpha #aside-tool div:hover {
    background: #999;
}

.product-mainbox.alpha .recommand a:hover {
    color: #92b457;
}

.product-mainbox.alpha .pd-recommand-prev::after,
.product-mainbox.alpha .pd-recommand-next::after {
    color: #777;
}

.product-mainbox.alpha .pd-recommand-prev:hover::after,
.product-mainbox.alpha .pd-recommand-next:hover::after {
    color: #92b457;
}

.product-mainbox.alpha #pd-recommand .slick-dots li.slick-active button {
    background-color: #92b457;
}

.product-mainbox.alpha #pd-recommand .slick-dots li.slick-active button:hover {
    background-color: #92b457;
}

.product-mainbox.alpha #pd-recommand .slick-dots li button:hover {
    background-color: #92b457;
}

@media screen and (max-width: 960px) {
    .product-mainbox.alpha .pdnavtab {
        background: #ccc;
        border-top-color: #999;
    }

    .product-mainbox.alpha .pdnavtab li:hover {
        color: #92b457;
    }

    .product-mainbox.alpha .pdnavtab li:hover a {
        color: #92b457;
    }

    .product-mainbox.alpha .pdnavtab li.active {
        border-bottom: #999 1px solid;
    }

    .product-mainbox.alpha .pdnavtab li.active a {
        color: #92b457;
    }

    .product-mainbox.alpha .pdnavtab li ol {
        background: #fff;
    }
}

/*prev vision*/
#overview ul {
    padding-bottom: 20px;
}

#overview ul li {
    list-style: disc;
    padding-bottom: 5px;
}

/* YouTubePopUp.css */
@charset "UTF-8";

/*
    Name: YouTubePopUp
    Description: jQuery plugin to display YouTube video in PopUp, responsive and retina, easy to use.
    Version: 1.0.0
    Plugin URL: http://wp-time.com/youtube-popup-jquery-plugin/
    Written By: Qassim Hassan
    Twitter: @QQQHZ
    Websites: wp-time.com | qass.im | wp-plugins.in
    Dual licensed under the MIT and GPL licenses:
        http://www.opensource.org/licenses/mit-license.php
        http://www.gnu.org/licenses/gpl.html
    Copyright (c) 2016 - Qassim Hassan
*/

.YouTubePopUp-Wrap{
    position:fixed;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.8);
    top:0;
    left:0;
    opacity: 0;
    z-index:9999999999999;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: YouTubePopUp;
    animation-name: YouTubePopUp;
    display: flex;
    align-items: center;
    justify-content: center;
}

@-webkit-keyframes YouTubePopUp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes YouTubePopUp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

body.logged-in .YouTubePopUp-Wrap{ /* For WordPress */
    top:0;
    z-index:99998;
}

.YouTubePopUp-Content{
    width: 50%;
    max-width: 1500px;
    position: relative;
}


.YouTubePopUp-vdbox{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; background: #369; z-index: 0;}
.YouTubePopUp-vdbox iframe,
.YouTubePopUp-vdbox object, 
.YouTubePopUp-vdbox embed,
.YouTubePopUp-vdbox video{
  position: absolute; top: 0; left: 0; width: 100% ; height: 100%; outline: none; border: none;
}


/*.YouTubePopUp-Content iframe{
    max-width:100% !important;
    width:100% !important;
    display:block !important;
    height:auto !important;

    border:none !important;
    position:absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}*/

.YouTubePopUp-Hide{
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: YouTubePopUpHide;
    animation-name: YouTubePopUpHide;
}

@-webkit-keyframes YouTubePopUpHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes YouTubePopUpHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.YouTubePopUp-Close{
    position: absolute; 
    top:-40px;
    cursor:pointer;
    right:-70px;
    margin:auto 0;
    width:50px;
    height:50px;
    background:url(https://storage-asset.msi.com/global/picture/images/close.svg) center center no-repeat;
    background-size: cover;
    opacity: .5;
    z-index: 111;
    text-align: center;
    line-height: 30px;
}

.YouTubePopUp-Close:hover{
    opacity: 1;
}

@media screen and (max-width:960px){
    .YouTubePopUp-Content{
        width: 90%;
        margin: 0 auto;
        max-width: none;
    }
    .YouTubePopUp-Close{
        top: auto;
        right: 0;
        top: -50px;
    }
}

/* end YouTubePopUp.css */

/* slick.min.css */
.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}/*# sourceMappingURL=slick.min.css.map */

/* end slick.min.css */

/* slick-theme.min.css */
@charset 'UTF-8';.slick-dots,.slick-next,.slick-prev{position:absolute;display:block;padding:0}.slick-dots li button:before,.slick-next:before,.slick-prev:before{font-family:slick;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-loading .slick-list{background:url(ajax-loader.gif) center center no-repeat #fff}@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg')}.slick-next,.slick-prev{font-size:0;line-height:0;top:50%;width:20px;height:20px;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-size:20px;line-height:1;opacity:.75;color:#fff}.slick-prev{left:-25px}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←'}.slick-next:before,[dir=rtl] .slick-prev:before{content:'→'}.slick-next{right:-25px}[dir=rtl] .slick-next{right:auto;left:-25px}[dir=rtl] .slick-next:before{content:'←'}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{bottom:-25px;width:100%;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000}.slick-dots li.slick-active button:before{opacity:.75;color:#000}/*# sourceMappingURL=slick-theme.min.css.map */
/* end slick-theme.min.css */