@import url("https://use.typekit.net/gnb0wza.css");


/* CSS Document */

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;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html {
    width: 100% !important;
    overflow-x: unset !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

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;
}

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;
}

/* h2 */
h2.title {
    font-size: 55px;
    font-family: "din-2014-narrow", sans-serif;
    font-weight: 800;
    letter-spacing: .5px;
    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;
    color: #fff;
    margin: 0 auto;
    line-height: 1;
}

@media screen and (max-width: 1366px) {
    h2.title {
        font-size: 50px;
    }
}

@media screen and (max-width: 996px) {
    h2.title {
        font-size: 28px;
    }
}

/* h3 */
h3.subTitle {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    padding: 10px 0;
    font-family: "din-2014-narrow", sans-serif;
}

@media screen and (max-width: 996px) {
    h3.subTitle {
        font-size: 18px;
    }
}

/* h4 */
.third-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    padding: 10px 0 10px;
}

@media screen and (max-width: 996px) {
    .third-title {
        font-size: 16px;
    }
}

/* p */
#buildPC p {
    font-size: 20px;
    line-height: 1.2;
    padding: 20px 0;
}

@media screen and (max-width: 996px) {
    #buildPC p {
        font-size: 16px;
    }
}

/* CSS Document */
@-webkit-keyframes tips {
    0% {
        top: 28%;
        left: 48%;
        -webkit-transform: rotate(-100deg);
        transform: rotate(-100deg);
        opacity: 0;
    }
    10% {
        top: 35%;
        left: 50%;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
        opacity: 1;
    }
    90% {
        top: 35%;
        left: 50%;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
        opacity: 1;
    }
    100% {
        top: 35%;
        left: 50%;
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
        opacity: 0;
    }
}

@-webkit-keyframes gotobulid2 {
    0% {
        bottom: 10%;
        opacity: 0;
    }
    50% {
        bottom: 5%;
        opacity: 1;
    }
    100% {
        bottom: 10%;
        opacity: 0;
    }
}

@-webkit-keyframes move {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-10px);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes move {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-10px);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}


/*----landing page-----*/

body {
    background: #000;
    padding: 0;
    margin: 0;
    text-align: center;
    overflow-x: hidden;
}

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/*giner add style*/

.lightbox .listtb {
    font-size: 18px;
    border-spacing: 2px;
    color: #FFFFFF
}

.lightbox .listtb .tr {
    display: table-row;
}

.lightbox .listtb .tr:nth-child(2n) {
    background-color: rgba(77, 77, 77, .4);
}

.lightbox .listtb .th {
    display: table-cell;
    padding: 15px;
    font-weight: bold;
    text-align: center;
    color: #444;
}

.lightbox .listtb .th p {
    padding-bottom: 0;
    font-size: 22px;
    color: #fff;
}

.lightbox .listtb .td {
    display: table-cell;
    padding: 20px 15px;
    vertical-align: middle;
    text-align: left;
    color: #D7D7D7;
}

.lightbox .listtb .td:first-child {
    text-align: left;
}

@media screen and (max-width: 960px) {
    .lightbox .listtb,
    .lightbox .listtb .tr,
    .lightbox .listtb .td {
        display: block;
    }
    {
        display: block;
    }
    .lightbox .listtb .td:before {
        content: attr(data-title);
        display: block;
        color: #f00;
    }
    .lightbox .listtb .td:first-child {
        color: #000000;
        font-size: 20px;
        font-weight: bold;
    }
}


/*headerxs*/

#header {
    position: relative;
    z-index: 1000;
}

#header #btnavsel {
    position: absolute;
    vertical-align: middle;
    right: 5%;
    top: 15px;
    z-index: 1005;
}

#header #btnavsel img {
    width: 40px;
    opacity: 0.6;
}

@media screen and (max-width: 960px) {
    #header #btnavsel {
        top: 80px;
        position: fixed;
    }
}

#navsel {
    width: 100%;
    height: 100vh;
    background: #222;
    position: fixed;
    z-index: 100;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 99;
    top: 0;
    left: 0;
}

#navsel ul {
    width: 90%;
    margin: 0 auto;
    max-width: auto;
    text-align: left;
}

#navsel ul li {
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.6;
    width: 100%;
    padding: 2.5% 0;
    color: #fff;
}

.navbar {
    margin-bottom: 0;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

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

.btSty {
    cursor: pointer;
    font-family: "din-2014-narrow", sans-serif;
    font-weight: 600;
    font-size: 20px;
    padding: 15px 45px 15px 50px;
    border: #e2001a 0 solid;
    background: #e2001a;
    border-radius: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    outline: none;
    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;
    border: #c00 1px solid;
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
    max-width: 100%;
    display: inline-block;
    color: #fff;
}

.btSty:hover {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.kvBtSty {
    position: relative;
    cursor: pointer;
    font-weight: 700;
    font-size: 20px;
    padding: 15px 70px 15px 50px;
    background: linear-gradient(45deg, #ef68f9, #2dace0);
    border-radius: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    outline: none;
    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-transition: 0.2s all ease-in-out;
    -o-transition: 0.2s all ease-in-out;
    transition: 0.2s all ease-in-out;
    max-width: 100%;
    display: inline-block;
    color: #fff;
}

/* .kvBtSty::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 99%;
    height: 99%;
    z-index: 10;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    border-radius: 10px;
    background-image: linear-gradient(45deg, #ef68f9, #2dace0);
    background-origin: border-box;
    mask-image: linear-gradient(white, white), linear-gradient(white, white);
    mask-composite: exclude, add;
    mask-clip: padding-box, border-box;
  }
  .kvBtSty:hover  {
    background: none;
  } */

.kvBtSty:hover {
    background: linear-gradient(260deg, #ef68f9, #2dace0);
    border-radius: initial;
    filter: drop-shadow(0 0 5px #8c68f9);
}

.kvBtSty span{
    display: block;
}



#maiagent-chatbot-bubble-button {
    background-color: #e2001a !important;
}

#maiagent-chatbot-bubble-button:hover {
    background-color: #e2001ad1 !important;
}

#buildPC {
    font-family: "din-2014", sans-serif;
    color: #fff;
    z-index: 0;
    position: relative;
    background: #000;
    /*toolbar*/
    /*navbar*/
    /*kv*/
    /*bridge*/
    /*pc-component*/
    /*ebook*/
    /*pc-build*/
    /*pc-plan*/
    /*faq*/
}

#buildPC .container {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
}

#buildPC .title {
    /* 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;
    font-family: "DINCond-Black";
    font-size: 60px;
    color: #e2001a;
    width: calc(100% - 220px);
    margin: 0 auto;
    max-width: auto; */
}


/*
#buildPC .title:before, #buildPC .title:after { content: ""; display: block; width: 50px; height: 8px; background: #e2001a; -webkit-clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%); clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%); }

#buildPC .title:before { margin-right: 60px; }

#buildPC .title:after { margin-left: 60px; }
*/

#buildPC .title3 {
    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;
    font-weight: 600;
    font-size: 40px;
    width: calc(100% - 220px);
    margin: 0 auto;
    max-width: auto;
    text-transform: uppercase;
    position: relative;
}

#buildPC .title3:before,
#buildPC .title3:after {
    content: "";
    display: block;
    width: 25px;
    height: 1px;
    background: #666;
}

#buildPC .block-heaher {
    min-height: 350px;
    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;
}

#buildPC .block-heaher.bg1 {
    background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-title-components.jpg) top center no-repeat;
    background-size: cover;
}

#buildPC .block-heaher.bg2 {
    background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-title-build.jpg) top center no-repeat;
    background-size: cover;
}

#buildPC .block-heaher.bg3 {
    background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-title-plan.jpg) top center no-repeat;
    background-size: cover;
}


#buildPC #navbar {
    width: 100%;
    z-index: 100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#buildPC #navbar img {
    width: 50px;
    height: 50px;
    margin-right: 5px;
}

#buildPC #navbar li {
    padding: 15px 0;
    background: #262626;
    width: 25%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

#buildPC #navbar.top {
    position: fixed;
    top: 0;
    left: 0;
}

#buildPC #navbar.top li {
    background: rgba(38, 38, 38, 0.8);
}

#buildPC #navbar.top li:hover {
    background: rgba(255, 0, 0, 0.8);
}

#buildPC #navbar.top li.active {
    background: #e2001a;
}

#buildPC #kv {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px - 90px);
    padding: 0 5%;
    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;
    background: url(https://storage-asset.msi.com/event/2021/cnd/how-to-build-a-pc/images/bg-kv.jpg) center center no-repeat;
    background-size: cover;
}

#buildPC #kv h1 {
    font-size: 100px;
    font-family: "din-2014-narrow", sans-serif;
    font-weight: 800;
    text-shadow: 0 5px 8px #7f7f7f;
}

@media screen and (max-width: 2560px) {
    #buildPC #kv {
        height: calc(90vh - 70px - 90px);
    }
    #buildPC #kv h1 {
        font-size: 120px;
        /* padding-top: 50px; */
    }
}

@media screen and (max-width: 1680px) {
    #buildPC #kv h1 {
        padding-top: 0px;
        font-size: 90px;
    }
}

@media screen and (max-width: 996px) {
    #buildPC #kv h1 {
        font-size: 80px;
    }
}

#buildPC #kv h1 span {
    color: #fff;
}

@media screen and ( max-width: 768px ) {
    #buildPC #kv h1 {
        /* position: absolute;
        left: 50%;
        transform: translateX(-50%); */
        /* bottom: 250px; */
        width: 100%;
        font-size: 45px;
        text-shadow: 0 5px 10px #9d7428;
    }
}


#buildPC #kv h2 {
    margin: 0 0 5px;
    background: linear-gradient(45deg, #ef68f9, #2dace0);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

#buildPC #kv #gotobulid {
    margin: 10px auto;
}

@media screen and ( max-width: 768px ) {
    #buildPC #kv #gotobulid {
        margin: 10px auto 0;
    }
}

#buildPC #kv #gotobulid img {
    width: 15px;
    margin-left: 5px;
}

#buildPC #kv #gotobulid2 {
    background: none;
    border: none;
    position: absolute;
    bottom: 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 30px;
    -webkit-animation: gotobulid2 1.5s infinite;
    animation: gotobulid2 1.5s infinite;
}

#buildPC #kv #gotobulid2 img {
    width: 50px;
}

#buildPC #kv h2.slogan{
    -webkit-text-fill-color: #fff;
    text-shadow: 0 5px 10px #9d7428;
    font-weight: 300;
}

.chart__arrow {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    /* background: red; */
  }

    .chart__arrow {
      position: relative;
      display: block;
      /* position: absolute;
      right: 20px;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%); */
      color: #fff;
      z-index: 10;
      opacity: 1;
      pointer-events: none;
      float: right;
      margin-right: -25px;
    }
    .chart__arrow.is-hidden {
      opacity: 0;
    }
    .chart__arrow .decoarrow {
      position: relative;
      /* display: table; */
      /* margin: 12px 0px 0 0; */
      opacity: 1;
      z-index: 4;
      /* width: 40px; */
      /* height: 50px; */
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
    }
    .chart__arrow .decoarrow-chevron {
      position: absolute;
      width: 20px;
      height: 5px;
      opacity: 0;
      -webkit-animation: move 2s ease-out infinite;
              animation: move 2s ease-out infinite;
    }
    .chart__arrow .decoarrow-chevron::before, .chart__arrow .decoarrow-chevron:after {
      content: " ";
      position: absolute;
      top: 0;
      height: 100%;
      width: 51%;
      background: #fff;
    }
    .chart__arrow .decoarrow-chevron::before {
      left: 0;
      -webkit-transform: skew(0deg, 30deg);
              transform: skew(0deg, 30deg);
    }
    .chart__arrow .decoarrow-chevron:after {
      right: 0;
      width: 50%;
      -webkit-transform: skew(0deg, -30deg);
              transform: skew(0deg, -30deg);
    }
    .chart__arrow .decoarrow-chevron:nth-child(1) {
      -webkit-animation: move 2s ease-out 1s infinite;
              animation: move 2s ease-out 1s infinite;
    }
    .chart__arrow .decoarrow-chevron:nth-child(2) {
      -webkit-animation: move 2s ease-out 2s infinite;
              animation: move 2s ease-out 2s infinite;
}


#buildPC #bridge {
    position: relative;
    overflow: hidden;
}

#buildPC #bridge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://storage-asset.msi.com/event/2025/CND/how-to-build-a-pc/images/bg-bridge.jpg) top center no-repeat;
    background-size: cover;
}

@media screen and (max-width: 960px) {
    #buildPC #bridge::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(https://storage-asset.msi.com/event/2025/CND/how-to-build-a-pc/images/bg-bridge-bg-top-xs.jpg) top center no-repeat;
        background-size: 100%;
    }

    #buildPC #bridge::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(https://storage-asset.msi.com/event/2025/CND/how-to-build-a-pc/images/bg-bridge-bg-bottom-xs.jpg) bottom center no-repeat;
        background-size: 100%;
    }
}

#buildPC #bridge h2 {
    text-shadow: 0 0 10px #000;
}

#buildPC #bridge h3 {
    font-size: 50px;
    font-weight: 700;
}

#buildPC #bridge .txt {
    max-width: 960px;
    padding: 100px 0;
    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;
    position: relative;
    z-index: 2;
}

#buildPC #bridge .imgxs {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    display: none;
}

#buildPC #bridge .imgxs2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
}

#buildPC #pc-component .pdBlock {
    width: 90%;
    margin: 0 auto;
    max-width: 1500px;
    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-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
}

#buildPC #pc-component .pdBlock .pdimg {
    width: 45%;
    position: relative;
}

#buildPC #pc-component .pdBlock .pdimg #pcimgtop {
    position: absolute;
    top: 0;
    left: 0;
}

/* pdBlock */
.pdBox {
    position: relative;
    width: 55%;
}

@media screen and (max-width: 960px) {
    .pdBox {
        width: 100%;
    }
}

.pdBox figure {
    cursor: pointer;
}

.pdBox_case {
    position: absolute;
    top: 16%;
    left: 40%;
    width: 48%;
}

.pdBox__mb {
    position: absolute;
    top: 28%;
    left: 30%;
    width: 22%;
}

.pdBox_cooling {
    position: absolute;
    top: 7%;
    left: 30%;
    width: 32%;
}

.pdBox_vga {
    position: absolute;
    top: 45%;
    left: 10%;
    width: 25%;
}

.pdBox_memory {
    position: absolute;
    top: 28%;
    left: 22%;
    width: 6%;
}

.pdBox_ssd {
    position: absolute;
    top: 62%;
    left: 5%;
    width: 10%;
}

.pdBox_psu {
    position: absolute;
    top: 67%;
    left: 23%;
    width: 20%;
}

.pdBox_cpu {
    position: absolute;
    top: 36%;
    left: 34%;
    width: 6%;
}

#buildPC #pc-component .pdBlock .iconbox {
    width: 45%;
}
#buildPC #pc-component .pdBlock .icontb {
    display: table;
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}

#buildPC #pc-component .pdBlock .icontb .tr {
    display: table-row;
}

#buildPC #pc-component .pdBlock .icontb .th {
    display: table-cell;
    width: 33%;
}

#buildPC #pc-component .pdBlock .icontb .td {
    display: table-cell;
    width: 33%;
}

#buildPC #pc-component .pdBlock .icontb .td {
    border: #333 1px solid;
    padding: 30px 15px;
    cursor: pointer;
}

#buildPC #pc-component .pdBlock .icontb .td:hover {
    background: #e2001a;
}

#buildPC #pc-component .pdBlock .icontb .td img {
    width: 80px;
    height: 80px;
    /* margin-bottom: 5px; */
}

#buildPC #ebook {
    background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg01.jpg) left top repeat;
    padding: 4rem;
}

#buildPC #ebook .ebookbox {
    width: 100%;
    margin: 0 auto;
    max-width: 1800px;
    background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-ebook.jpg) right bottom no-repeat;
    background-color: #000;
    position: relative;
}

#buildPC #ebook .ebookbox h2 {
    justify-content: left;
} 
#buildPC #ebook .ebookbox .txt {
    text-align: left;
    padding: 7% 5% 9%;
}

#buildPC #ebook .ebookbox .txt p {
    line-height: 1.2;
    padding: 20px 0 50px;
    font-size: 120%;
    width: 30%;
}

@media screen and (max-width: 960px) {
    #buildPC #ebook .ebookbox h2 {
        justify-content: center;
    } 
    #buildPC #ebook .ebookbox .txt p {
        width: 100%;
    }
}

#buildPC #ebook .ebookbox .txt .bt{
    animation: arrowBounce 1.5s linear infinite;
}

@keyframes arrowBounce {
    0% {
        transform: translateY(-50%);
    }
    50% {
        transform: translateY(-70%);
    }
    100% {
        transform: translateY(-50%);
    }
    
}


#buildPC #ebook .ebookbox .txt .bt a {
    display: inline-block;
    background: #e2001a;
    color: #fff;
    padding: 15px 45px 15px 50px;
    font-weight: bold;
    font-family: "din-2014-narrow", sans-serif;
    font-size: 20px;
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
    border: #e2001a 1px solid;
    border-radius: 5px;
}

#buildPC #ebook .ebookbox .txt .bt a:hover {
    background: none;
}

#buildPC #ebook .ebookbox .imgxs {
    display: none;
}

#buildPC #ebook .ebookbox:after {
    content: "";
    width: 50%;
    height: 13px;
    background: #e2001a;
    position: absolute;
    left: 0;
    bottom: 0;
}

#buildPC #pc-build {
    position: relative;
}

#buildPC #pc-build #vdnav {
    position: absolute;
    z-index: 10;
    right: 38%;
    background: #e2001a;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    max-width: 380px;
}

#buildPC #pc-build #vdnav img {
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

#buildPC #pc-build #vdnav .sel-title {
    padding: 10px;
}

#buildPC #pc-build #vdnav ul {
    border-top: #c00 3px solid;
    display: none;
    padding: 10px 0;
}

#buildPC #pc-build #vdnav ul li {
    padding: 5px 10px;
    cursor: pointer;
}

#buildPC #pc-build #vdnav ul li:hover {
    background: #c00;
}

#buildPC #pc-build #vdnav ul li.active {
    color: #ccc;
    background: #e2001a;
    cursor: default;
}

#buildPC #pc-build .vdboxwp {
    background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-pc-build.jpg) top center no-repeat;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    position: relative;
}

#buildPC #pc-build .vdboxwp .vdplaybox {
    width: 65%;
    padding: 4% 3%;
}

#buildPC #pc-build .vdboxwp .vdplaybox .step {
    padding-bottom: 30px;
}

#buildPC #pc-build .vdboxwp .vdplaybox .vdimg {
    position: relative;
}

#buildPC #pc-build .vdboxwp .vdplaybox .vdimg img {
    position: relative;
}

#buildPC #pc-build .vdboxwp .vdplaybox .vdimg .btplay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
}

#buildPC #pc-build .vdboxwp .vdplaybox .vdimg .btplay i {
    font-size: 50px;
    color: #f00;
    opacity: .6;
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
    text-shadow: #000 0 0 30px;
}

#buildPC #pc-build .vdboxwp .vdplaybox .vdimg .btplay:hover {
    background: rgba(0, 0, 0, 0);
}

#buildPC #pc-build .vdboxwp .vdplaybox .vdimg .btplay:hover i {
    opacity: 1;
    text-shadow: #e2001a 0 0 30px;
}

#buildPC #pc-build .vdboxwp .vdtxtbox {
    width: 35%;
    background: rgba(0, 0, 0, 0.5);
    padding: 3%;
    font-size: 120%;
}

#buildPC #pc-build .vdboxwp .vdtxtbox .item {
    display: none;
}

#buildPC #pc-build .vdboxwp .vdtxtbox .item .item-title {
    font-size: 20px;
    color: #e2001a;
    padding: 20px 0 0;
}

#buildPC #pc-build .vdboxwp .vdtxtbox .item ul {
    margin: 25px 0 0 15px;
}

#buildPC #pc-build .vdboxwp .vdtxtbox .item ul li {
    list-style-type: decimal;
    padding-bottom: 15px;
    line-height: 1.6;
}

#buildPC #pc-build .vdboxwp .vdtxtbox .item .note-title {
    padding-top: 30px;
    color: #999;
}

#buildPC #pc-build .vdboxwp .vdtxtbox .item .note {
    padding-top: 10px;
    color: #999;
    line-height: 1.6;
}

#buildPC #pc-build .vdboxwp .vdtxtbox .item .img {
    padding-top: 15px;
}

#buildPC #pc-build .vdboxwp .vdtxtbox .item.active {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#buildPC #pc-plan {
    background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-plan2.jpg) center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#buildPC #pc-plan .tipsbox {
    padding: 6rem 0;
    width: 100%;
    position: relative;
}

#buildPC #pc-plan .tipsbox p {
    padding: 2rem 0 3rem;
    line-height: 1.2;
    width: 100%;
    margin: 0 auto;
    max-width: 900px;
}

#buildPC #pc-plan .tips-items {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
}

#buildPC #pc-plan .tips-items .tips:hover {
    cursor: pointer;
    filter: brightness(0.9);
}

@media screen and (max-width: 960px) {
    #buildPC #pc-plan .tips-items {
        flex-wrap: wrap;
    }
}

#buildPC #pc-plan .tips-items .img {
    position: relative;
}

/* #buildPC #pc-plan .tips-items .txt {
    font-weight: 600;
    font-size: 34px;
    position: absolute;
    z-index: 2;
    -webkit-animation: tips 3s ease infinite;
    animation: tips 3s ease infinite;
} */

#buildPC #pc-plan .tips-items .tips {
    width: 30%;
    margin: 0 10px;
}

#buildPC #pc-plan .tips-items .tips:hover  {
   filter: drop-shadow(0 0 10px #787878);
}

@media screen and (max-width: 960px) {
    #buildPC #pc-plan .tips-items .tips {
        width: 42%;
        margin: 10px;
    }
}

#buildPC #pc-plan .tips-items .tips figure {
    overflow: hidden;
}

#buildPC #pc-plan .tips-items .tips figure img {
    display: block;
    width: 100%;
    transition: transform 0.3s ease;
}

#buildPC #pc-plan .tips-items .tips:hover figure img {
    transform: scale(1.2);
}

#buildPC #pc-plan .tips-items p {
    margin: 0 auto;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px 0;
    color: #fff;
    background: #7f0505e9;
    font-size: 17px;
    font-weight: bold;
    /* text-shadow: #c00 1px 1px 2px; */
}

#buildPC #pc-plan .tips-items p.xs {
    display: none;
}

#buildPC #pc-plan .tabnav {
    margin-top: 2.5rem;
    position: relative;
}

#buildPC #pc-plan .tabnav:after {
    width: 100%;
    height: 5px;
    content: "";
    display: block;
    background: #c00;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 0;
}

#buildPC #pc-plan .tabnav ul {
    width: calc(100% - 20px);
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

#buildPC #pc-plan .tabnav ul li {
    width: 50%;
    padding: 15px;
    background: #222;
    border-bottom: #c00 5px solid;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
    color: #ccc;
}

#buildPC #pc-plan .tabnav ul li.active {
    background: #e2001a;
}

#buildPC #pc-plan .tabnav ul li:hover {
    background: #c00;
}

#buildPC #pc-plan .tabnav ul li span {
    display: block;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 2px;
    padding-top: 5px;
    color: #fff;
}

#buildPC #pc-plan .tabtxt {
    background: rgba(255, 255, 255, 0.1);
    background: -webkit-linear-gradient(135deg, transparent 3%, rgba(255, 255, 255, 0.1) 0);
    background: -o-linear-gradient(135deg, transparent 3%, rgba(255, 255, 255, 0.1) 0);
    background: linear-gradient(-45deg, transparent 3%, rgba(255, 255, 255, 0.1) 0);
    margin-bottom: 5rem;
}

#buildPC #pc-plan .tabtxt .item {
    padding: 2.5% 5% 3%;
}

#buildPC #pc-plan .tabtxt .st {
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 45px 0 25px;
    color: #e2001a;
}

#buildPC #pc-plan .tabtxt p.line {
    text-align: left;
    line-height: 1.6;
    text-align: left;
    border-bottom: #444 1px solid;
    padding: 25px 0 45px;
    margin-bottom: 20px;
}

#buildPC #pc-plan .tabtxt .imgtxtbox {
    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;
    text-align: left;
    border-bottom: #444 1px solid;
    padding: 25px 0 45px;
    margin-bottom: 20px;
}

#buildPC #pc-plan .tabtxt .imgtxtbox .img {
    width: 40%;
    text-align: center;
}

#buildPC #pc-plan .tabtxt .imgtxtbox .txt {
    width: 55%;
    line-height: 1.6;
}

#buildPC #pc-plan .tabtxt .imgtxtbox:last-child {
    border-bottom: none;
}

#buildPC #pc-plan .tabtxt a {
    color: #c00;
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
    padding-bottom: 3px;
    position: relative;
    display: inline-block;
    z-index: 1;
}

#buildPC #pc-plan .tabtxt a:before {
    width: 0;
    height: 100%;
    background: rgba(255, 0, 0, 0.3);
    content: "";
    display: block;
    bottom: -2px;
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#buildPC #pc-plan .tabtxt a:hover {
    color: #e2001a;
}

#buildPC #pc-plan .tabtxt a:hover:before {
    width: 100%;
}

#buildPC #pc-plan .tabtxt .itemnav i {
    margin-right: 5px;
}

#buildPC #pc-plan .tabtxt .item,
#buildPC #pc-plan .tabtxt .itemnav {
    display: none;
}

#buildPC #pc-plan .tabtxt .active {
    display: block;
}

#buildPC #faq {
    background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg01.jpg) left top repeat;
}

#buildPC #faq .faqbox {
    padding: 2rem 0 6rem;
}

#buildPC #faq .faqbox .title3 {
    margin-top: 4rem;
    margin-bottom: 30px;
}

#buildPC #faq .faqbox .item {
    text-align: left;
    border: #222 1px solid;
    background: rgba(0, 0, 0, 0.3);
}

#buildPC #faq .faqbox .item .q {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 20px;
}

#buildPC #faq .faqbox .item .q i {
    text-align: center;
    border-right: #222 1px solid;
    padding: 25px;
    margin-right: 15px;
}

#buildPC #faq .faqbox .item .ans {
    padding: 25px;
    line-height: 1.6;
    display: none;
}

#buildPC #faq .faqbox .item .ans ul {
    margin-left: 20px;
    margin-top: 10px;
}

#buildPC #faq .faqbox .item .ans ul li {
    list-style: disc;
}

#buildPC #faq .faqbox .item .ans ul.lower {
    list-style: decimal;
}

#buildPC #faq .faqbox .item .ans ul.step {
    list-style: none;
    padding-bottom: 10px;
    /* margin-left: 0; */
}

#buildPC #faq .faqbox .item .ans a {
    color: #c00;
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
    border-bottom: #000 1px solid;
    position: relative;
}

#buildPC #faq .faqbox .item .ans a:before {
    width: 0;
    height: 100%;
    background: rgba(255, 0, 0, 0.3);
    content: "";
    display: block;
    bottom: -2px;
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#buildPC #faq .faqbox .item .ans a:hover {
    color: #e2001a;
}

#buildPC #faq .faqbox .item .ans a:hover:before {
    width: 100%;
}

#buildPC #faq .faqbox .active {
    border: #e2001a 1px solid;
    background: rgba(0, 0, 0, 0.8);
}

#buildPC #faq .faqbox .active .q {
    color: #e2001a;
    border-bottom: #222 1px solid;
}

.lightbox {
    width: 100vw;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    overflow-y: auto;
}

.lightbox .ltbox {
    width: calc(100% - 80px);
    margin: 0 auto;
    max-width: 1200px;
    background: rgba(0, 0, 0, 0.8);
    padding: 50px;
    color: #fff;
    font-weight: 700;
    position: relative;
    -webkit-box-shadow: #000 0 0 30px;
    box-shadow: #000 0 0 30px;
    margin: 30px auto;
    border: #e2001a 1px solid;
    border-radius: 10px;
    display: none;
}

.lightbox .ltbox .lt-title {
    font-size: 36px;
    font-weight: bold;
    padding-bottom: 35px;
    text-transform: uppercase;
    color: #f00;
}

@media screen and (max-width: 960px) {
    .lightbox .ltbox {
        width: 100%;
        padding-bottom: calc(3% + 20px);
        padding: 25px 25px 100px;
        margin: 0 auto;
    }
}

.lightbox .ltcolse,
.lightbox .ltcolse2 {
    position: fixed;
    cursor: pointer;
    top: 35px;;
    z-index: 2;
    color: #ccc;
    width: 25px;
    height: 25px;
    background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/close.png) center center no-repeat;
    background-size: cover;
    opacity: .5;
}

.lightbox .ltcolse:hover,
.lightbox .ltcolse2:hover {
    color: #fff;
    opacity: 1;
}

@media screen and (max-width: 960px) {
    .lightbox .ltcolse,
    .lightbox .ltcolse2 {
        width: 50px;
        height: 50px;
        top: auto;
        bottom: 10px;
        left: calc(50% - 25px);
        padding: 10px;
        border-radius: 50%;
        background-size: 50%;
        background-color: #e2001a;
        color: #fff;
        padding: 5px;
        opacity: 1;
    }
}

.lightbox .lt-content .st {
    width: 100%;
    /* height: 42px; */
    /* font-size: 22px; */
    font-weight: 700;
    background: #e2001a;
    position: relative;
    color: #fff;
    /* line-height: 42px; */
    text-align: center;
    margin-top: 15px;
    margin-bottom: 25px;
}

.lightbox .lt-content .st:before {
    content: "";
    display: inline-block;
    border-color: #4b4b4b transparent transparent transparent;
    border-width: 47px 47px 0 0;
    border-style: solid;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.lightbox .lt-content .st:after {
    content: "";
    display: inline-block;
    border-color: transparent #4b4b4b transparent transparent;
    border-width: 47px 47px 0 0;
    border-style: solid;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

@media screen and (max-width: 960px) {
    .lightbox .lt-content .st {
        height: auto;
        line-height: 1.4;
        background: none;
        font-size: 26px;
        text-transform: uppercase;
    }
    .lightbox .lt-content .st:before {
        display: none;
    }
    .lightbox .lt-content .st:after {
        border: none;
        position: relative;
        display: block;
        width: 150px;
        height: 5px;
        background: #e2001a;
        margin: 0 auto;
    }
}

.lightbox .lt-content h3 {
    /* font-weight: bold;
    font-size: 110%;
    padding-bottom: 15px;
    line-height: 1.6; */
}

.lightbox .lt-content p {
    padding-bottom: 20px;
    line-height: 1.6;
    font-weight: 400;
}

.lightbox .lt-content a {
    color: #e2001a;
    text-decoration: underline;
}

.lightbox .lt-content a:hover {
    color: #e2001ad1;
}

.lightbox .tableBox {
    width: 100%;
    margin: 0 auto 25px;
}

.lightbox .tableBox table {
    width: 100%;
    border-collapse: collapse;
}

.lightbox .tableBox table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    width: 25%;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

.lightbox .tableBox table td img {
    width: 55%;
    min-width: 50px;
    margin: 0 auto;
    height: 100%;
    object-fit: cover;
}

.lightbox .lt-content .psImg {
    text-align: center;
    margin-bottom: 25px;
}

.ebookdw .ltbox {
    padding: 5% 0;
}

.ebookdw .ltbox .ebook-title {
    font-size: 30px;
    color: #e2001a;
    padding-bottom: 10px;
}

.ebookdw .ltbox p {
    font-size: 20px;
}

.ebookdw .ltbox img {
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

@media screen and (max-width: 960px) {
    .ebookdw .ltbox {
        padding: 0 5%;
        height: 100vh;
        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;
    }
}

.cp-txt {
    text-align: left;
    line-height: 1.8;
}

.cp-txt .vdplaybox {
    width: 100%;
    margin: 0 auto;
    max-width: 850px;
    margin-bottom: 20px;
}

.cp-txt ul {
    margin-left: 20px;
    padding-bottom: 25px;
}

.cp-txt ul li {
    list-style-type: disc;
    color: #ccc;
    font-weight: 400;
    padding-bottom: 10px;
    line-height: 1;
}

.cp-txt .iconbox img {
    margin-right: 8%;
}

@media screen and (max-width: 960px) {
    .cp-txt .iconbox {
        text-align: center;
    }
    .cp-txt .iconbox img {
        margin: 1% 3%;
    }
}

.cp-txt .btsp {
    padding-bottom: 15px;
}

.cp-txt .imgbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 25px;
}

.cp-txt .imgbox .img {
    text-align: center;
    margin: 0 3%;
    color: #999;
}

.cp-txt .imgbox .img figcaption {
    line-height: 1.2;
}

.cp-txt .imgbox.sp {
    padding-top: 25px;
}

.cp-txt .imgbox-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 25px;
}

.cp-txt .imgbox-between .img {
    text-align: center;
    color: #999;
    width: calc(100% / 6);
}

@media screen and (max-width: 960px) {
    .cp-txt .imgbox-between {
        display: block;
    }
    .cp-txt .imgbox-between .img {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 120px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 10px;
    }
}

.cp-txt .imgtitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: bold;
    padding: 20px 0;
}

.cp-txt .imgtitle img {
    margin-right: 20px;
}

.cp-txt .spectb {
    display: table;
    width: 100%;
    margin: 0 auto;
    border: #222 1px solid;
    margin-bottom: 50px;
}

.cp-txt .spectb .tr {
    display: table-row;
}

.cp-txt .spectb .th {
    display: table-cell;
    width: auto;
}

.cp-txt .spectb .td {
    display: table-cell;
    width: auto;
}

.cp-txt .spectb .th,
.cp-txt .spectb .td {
    padding: 15px;
    border: #222 1px solid;
}

.cp-txt .spectb .th {
    background: #333;
    text-align: center;
    font-weight: bold;
}

@media screen and (max-width: 960px) {
    .cp-txt .spectb {
        border: none;
    }
    .cp-txt .spectb .tr,
    .cp-txt .spectb .th,
    .cp-txt .spectb .td {
        display: block;
        width: 100%;
        text-align: center;
        border: none;
    }
    .cp-txt .spectb .tr {
        margin-top: 20px;
        border: #222 1px solid;
        margin-bottom: 20px;
    }
    .cp-txt .spectb .th {
        display: none;
    }
    .cp-txt .spectb .td:before {
        content: attr(data-title);
        display: block;
        font-weight: bold;
        background: #222;
        padding: 10px;
        margin-bottom: 10px;
    }
}

.tips-txt {
    text-align: left;
}

.tips-txt .imgtxtbox {
    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;
    margin-bottom: 50px;
}

.tips-txt .imgtxtbox .img {
    width: 45%;
    text-align: center;
}

.tips-txt .imgtxtbox .txt {
    width: 50%;
}

.tips-txt .imgtxtbox .note,
.tips-txt .note {
    font-size: 90%;
    color: #999;
    line-height: 1.6;
}

.tips-txt .imgtxtbox .note a,
.tips-txt .note a {
    font-size: 120%;
    color: #e2001a;
    font-weight: bold;
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
    border-bottom: #000 1px solid;
    padding-bottom: 3px;
    position: relative;
    display: block;
    z-index: 1;
}

.tips-txt .imgtxtbox .note a:before {
    width: 0;
    height: 100%;
    background: rgba(255, 0, 0, 0.3);
    content: "";
    display: block;
    bottom: -2px;
    -webkit-transition: 0.5s all ease-in 0.1s;
    -o-transition: 0.5s all ease-in 0.1s;
    transition: 0.5s all ease-in 0.1s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.tips-txt .imgtxtbox .note a:hover {
    color: #e2001ad1;
}

/* .tips-txt .imgtxtbox .note a:hover:before {
    width: 100%;
} */

@media screen and (max-width: 960px) {
    .tips-txt .imgtxtbox {
        display: block;
    }
    .tips-txt .imgtxtbox .img,
    .tips-txt .imgtxtbox .txt {
        width: 100%;
    }
}

.tips-txt .topline {
    border-top: #333 1px solid;
    margin-top: 60px;
    padding-top: 60px;
}

.tips-txt .line {
    width: 100%;
    height: 1px;
    background: #333;
    margin: 60px 0 80px;
}

.tips-txt ul {
    margin-left: 15px;
    margin-bottom: 10px;
}

.tips-txt ul li {
    list-style: disc;
    line-height: 1.4;
    padding-bottom: 15px;
    color: #ccc;
    font-weight: 400;
}

.tips-txt ol {
    padding-bottom: 20px;
}

.tips-txt ol li {
    line-height: 1.4;
    padding-bottom: 5px;
    color: #ccc;
}

@media screen and (max-width: 1680px) and (max-height: 1050px) {
    #buildPC #ebook .ebookbox {
        background-size: 75%;
    }
}

@media screen and (max-width: 1366px) {
    #buildPC #bridge h3 {
        font-size: 46px;
    }
}

@media screen and (max-width: 1280px) {
    #buildPC #bridge p {
        /* font-size: 30px; */
    }
    #buildPC #ebook .ebookbox {
        background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-ebook-sm.jpg) right bottom no-repeat;
        background-color: #000;
    }
}

@media screen and (max-width: 1024px) {
    #buildPC #pc-component .pdBlock {
        padding: 3rem 0;
    }
    #buildPC #ebook .ebookbox {
        background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-ebook-xs.jpg) right bottom no-repeat;
        background-color: #000;
    }
}

@media screen and (max-width: 960px) {
    #buildPC #navbar {
        display: none;
    }
    #buildPC .block-heaher {
        padding: 0;
        min-height: none;
        background: #000;
    }
    #buildPC .block-heaher.bg1 {
        background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-title-components-xs.jpg) top center no-repeat;
        background-size: cover;
    }
    #buildPC .block-heaher.bg2 {
        background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-title-build-xs.jpg) bottom center no-repeat;
        background-size: cover;
    }
    #buildPC .block-heaher.bg3 {
        background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-title-plan-xs.jpg) top center no-repeat;
        background-size: cover;
    }
    #buildPC .title:before,
    #buildPC .title:after {
        width: 40px;
        height: 5px;
    }
    #buildPC .title:before {
        margin-right: 5px;
    }
    #buildPC .title:after {
        margin-left: 5px;
    }
    #buildPC .title2 {
        font-size: 36px;
        padding-top: 30px;
    }
    #buildPC .title3 {
        font-size: 30px;
        width: calc(100% - 50px);
        margin: 0 auto;
        max-width: auto;
        margin-bottom: 35px;
    }
    #buildPC #kv {
        height: 450px;
    }
    #buildPC #kv h2 {
        padding-top: 0;
    }
    #buildPC #bridge {
        background-size: 100%;
        padding: 0 25px;
    }
    #buildPC #bridge h2 {
        margin-top: 0;
    }
    /* #buildPC #bridge p {
        font-size: 30px;
        line-height: 1.2;
    } */
    #buildPC #bridge h3 {
        font-size: 30px;
    }
    #buildPC #bridge .imgxs {
        display: block;
    }
    #buildPC #pc-component .pdBlock {
        padding: 0 0 5rem;
        display: block;
    }
    #buildPC #pc-component .pdBlock .pdimg,
    #buildPC #pc-component .pdBlock .iconbox {
        width: 100%;
    }
    #buildPC #ebook {
        padding: 5%;
    }
    #buildPC #ebook .ebookbox {
        background: #000;
    }
    #buildPC #ebook .ebookbox .txt {
        width: 100%;
        text-align: center;
    }
    #buildPC #ebook .ebookbox .imgxs {
        display: block;
    }
    #buildPC #ebook .ebookbox .imgxs img {
        width: 100%;
    }
    #buildPC #ebook .ebookbox .bt a {
        padding: 15px 0;
        width: 100%;
    }
    #buildPC #ebook .ebookbox:after {
        display: none;
    }
    #buildPC #pc-build {
        background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-pc-build-wp.jpg) top center repeat;
    }
    #buildPC #pc-build #vdnav {
        position: relative;
        right: auto;
        margin-bottom: 25px;
        width: 100%;
        max-width: none;
    }
    #buildPC #pc-build .vdboxwp {
        display: block;
        background: none;
    }
    #buildPC #pc-build .vdboxwp .vdplaybox,
    #buildPC #pc-build .vdboxwp .vdtxtbox {
        width: 100%;
        padding: 5%;
    }
    #buildPC #pc-build .vdboxwp .vdplaybox {
        background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-pc-build-xs.jpg) top center no-repeat;
        background-size: cover;
    }
    #buildPC #pc-build .vdboxwp .vdplaybox .step {
        font-size: 24px;
    }
    #buildPC #pc-plan {
        background: none;
    }
    #buildPC #pc-plan .tips-items p {
        font-size: 16px;
        font-weight: normal;
        letter-spacing: 0;
    }
    #buildPC #pc-plan .tips-items .icon-tips {
        width: 100px;
        height: 100px;
        border: #c00 2px dashed;
    }
    #buildPC #pc-plan .tabnav {
        display: none;
    }
    #buildPC #pc-plan .tabtxt {
        background: -webkit-linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 0);
        background: -o-linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 0);
        background: linear-gradient(-45deg, transparent 0%, rgba(255, 255, 255, 0.1) 0);
    }
    #buildPC #pc-plan .tabtxt .itemnav {
        display: block;
        background: #444;
        padding: 15px;
        font-size: 22px;
        /* font-family: "DINCond-Medium"; */
        text-transform: uppercase;
        cursor: pointer;
        letter-spacing: 1px;
    }
    #buildPC #pc-plan .tabtxt .itemnav.on {
        background: #e2001a;
        margin-top: 2rem;
    }
    #buildPC #pc-plan .tabtxt .imgtxtbox {
        display: block;
    }
    #buildPC #pc-plan .tabtxt .imgtxtbox .img,
    #buildPC #pc-plan .tabtxt .imgtxtbox .txt {
        width: 100%;
        text-align: center;
    }
    #buildPC #pc-plan .tabtxt .imgtxtbox .img {
        padding-bottom: 25px;
    }
}

@media screen and ( max-width: 480px ) {
    #buildPC #kv {
        height: 550px;
        background: url(https://storage-asset.msi.com/event/2021/cnd/how-to-build-a-pc/images/kv-s.jpg);
        background-size: cover;
        background-position: center;
        padding: 20px 0 0;
    }
}

/* new add */
#buildPC #tips-customize-pc ul li {
    list-style: none;
}

/* 完全獨立的 ebook 彈窗樣式 */
.ebook-popup-overlay {
    width: 100%;
    bottom: 0;
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
}

.ebook-popup-container {
    width: 100%;
    bottom: 0;
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
}

.ebook-popup-show {
    display: block !important;
}

.ebook-popup-box {
    position: relative;
    /* width: calc(100% - 80px); */
    margin: 0 auto;
    /* max-width: 1200px; */
    background: #9f9f9ff7;
    padding: 40px 25px 25px;
    color: #fff;
    font-family: "DINPro-Regular";
    position: relative;
    -webkit-box-shadow: #000 0 0 30px;
    box-shadow: #000 0 0 30px;
    /* margin: 30px auto; */
    border: #222 1px solid;
    /* border-radius: 10px; */
    display: none;
}

.ebook-popup-content {
    position: relative;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

@media screen and ( max-width: 480px ) {
    .ebook-popup-content {
        display: block;
    }
}

.ebook-popup-title-box {
    margin-right: 20px;
}

.ebook-popup-title {
    font-size: 24px;
    color: #e2001a;
    padding-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: "din-2014", sans-serif;
    font-weight: 600;
    text-align: left;
}

.ebook-popup-content p {
    font-size: 15px;
    /* padding-bottom: 25px; */
    line-height: 1.2;
    font-family: "din-2014", sans-serif;
    font-weight: 500;
    text-align: left;
}

@media screen and ( max-width: 480px ) {
    .ebook-popup-button {
        margin-top: 20px;
    }
}
.ebook-popup-button img {
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

@media screen and (max-width: 960px) {
    .ebook-popup-box {
        width: 100%;
        /* padding-bottom: calc(3% + 20px); */
        /* padding: 25px 25px 100px; */
        margin: 0 auto;
        padding: 25px 5px;
    }
}
@media screen and (max-width: 767px) {
    .ebook-popup-box {
        padding: 25px;
    }
    
    .ebook-popup-container.ebook-popup-show {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

.ebook-popup-close {
    position: absolute;
    cursor: pointer;
    top: -15px;
    right: -30px;
    z-index: 2;
    color: #ccc;
    width: 25px;
    height: 25px;
    opacity: .5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ebook-popup-close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ebook-popup-close:hover {
    color: #fff;
    opacity: 1;
}

@media screen and (max-width: 960px) {
    .ebook-popup-close {
        top: -10px;
        right: -45px;
    }
}

@media screen and (max-width: 767px) {
    .ebook-popup-close {
        top: -10px;
        right: -10px;
    }
}

.cp-txt {
    text-align: left;
    line-height: 1.8;
}

/* video */
#buildPC #bridge .video {
    width: 100%;
    max-width: 850px;
    margin-bottom: 50px;
}

#buildPC #bridge .videobox-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
}

#buildPC #bridge .videobox-wrapper__box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#buildPC #bridge .videobox-wrapper__box iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media screen and (max-width: 960px) {
    #buildPC #bridge .video {
        margin: 20px auto;
    }
}

#comp-cpu .cpu-imgBox {
    display: flex;
    justify-content: center;
    align-items: center;
}

#comp-cpu .cpu-imgBox figure {
    margin: 0 50px;
}


#comp-cpu .cpu-imgBox figure img {
    
    height: 150px;
}

#comp-cpu .lineBox {
    width: 2px;
    height: 100px;
    background-color: #e3e3e3;
}

@media screen and (max-width: 960px) {
    #comp-cpu .cpu-imgBox figure {
        margin: 0 10px;
        height: auto;
        text-align: center;
    }

    #comp-cpu .cpu-imgBox figure img {
        height: auto;
        width: 70%;
    }
    
}

/* Add hover effect for pdBox images when hovering over table cells */
#buildPC #pc-component .pdBlock .icontb .td:hover ~ .pdBox img,
#buildPC #pc-component .pdBlock .icontb .td:hover + .pdBox img {
    filter: drop-shadow(2px 4px 6px #e2001a);
}

/* Alternative approach using sibling selector */
#buildPC #pc-component .pdBlock .icontb .td:hover ~ .iconbox ~ .pdBox img {
    filter: drop-shadow(2px 4px 6px #e2001a);
}

/* Direct hover effect on pdBox images */
#buildPC #pc-component .pdBlock .icontb .td:hover ~ .pdBox figure img {
    filter: drop-shadow(2px 4px 6px #e2001a);
}

/* Since pdBox comes before iconbox in HTML, we need to use a different approach */
/* Target the parent container and use descendant selectors */
#buildPC #pc-component .pdBlock:hover .pdBox img {
    filter: drop-shadow(2px 4px 6px #e2001a);
}

/* More specific targeting for when table cells are hovered */
#buildPC #pc-component .pdBlock .icontb .td:hover ~ .pdBox img,
#buildPC #pc-component .pdBlock .icontb .td:hover ~ .pdBox figure img {
    filter: drop-shadow(2px 4px 6px #e2001a);
}

.chatbotTxtBox {
    position: fixed;
    bottom: 70px;
    right: 16px;
    z-index: 10;
    line-height: 1.2;
    text-align: right;
}

.chatbotTxtBox p {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

.chatbotTxtBox p:nth-child(1) {
    color: #e2001a;
}

.chatbotTxtBox p:nth-child(2) {
    text-shadow: 0 0 5px #000;
    /* 2px 2px 0px #292929 */
}


@media screen and (max-width: 576px) {
    .chatbotTxtBox {
        display: none;
    }
}