/* CSS Document */
/* 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; }

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

/* CSS Document */
@font-face { font-family: "DINPro-Regular"; src: url("fonts/DINPro-Regular.eot"); src: url("fonts/DINPro-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/DINPro-Regular.woff") format("woff"), url("fonts/DINPro-Regular.ttf") format("truetype"), url("fonts/DINPro-Regular.svg#DINPro-Regular") format("svg"); }

@font-face { font-family: "DINCond-Medium"; src: url("fonts/DINCond-Medium.eot"); src: url("fonts/DINCond-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/DINCond-Medium.woff") format("woff"), url("fonts/DINCond-Medium.ttf") format("truetype"), url("fonts/DINCond-Medium.svg#DINCond-Medium") format("svg"); }

@font-face { font-family: "DINCond-Black"; src: url("fonts/DINCond-Black.eot"); src: url("fonts/DINCond-Black.eot?#iefix") format("embedded-opentype"), url("fonts/DINCond-Black.woff") format("woff"), url("fonts/DINCond-Black.ttf") format("truetype"), url("fonts/DINCond-Black.svg#DINCond-Black") format("svg"); }

@font-face { font-family: "DINCond-Bold"; src: url("fonts/DINCond-Bold.eot"); src: url("fonts/DINCond-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/DINCond-Bold.woff") format("woff"), url("fonts/DINCond-Bold.ttf") format("truetype"), url("fonts/DINCond-Bold.svg#DINCond-Bold") format("svg"); }

@font-face { font-family: "DINCond-Light"; src: url("fonts/DINCond-Light.eot"); src: url("fonts/DINCond-Light.eot?#iefix") format("embedded-opentype"), url("fonts/DINCond-Light.woff") format("woff"), url("fonts/DINCond-Light.ttf") format("truetype"), url("fonts/DINCond-Light.svg#DINCond-Light") format("svg"); }

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

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

/*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 { position: fixed; width: 100%; background: #000; } }

#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; font-family: "DINCond-Medium"; 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: "DINCond-Bold"; 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: #e2001a; }

#buildPC { font-family: "DINPro-Regular"; font-size: #fff; color: #fff; z-index: 0; position: relative; /*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 .title2 { font-family: "DINCond-Black"; font-size: 60px; color: #e2001a; }

#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-family: "DINCond-Medium"; 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 h3 { font-family: "DINCond-Bold"; font-size: 26px; padding: 25px 0 10px; }

#buildPC .block-heaher p { font-size: 18px; line-height: 1.6; padding: 10px 0 0; }

#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 #toolbar { position: fixed; z-index: 10000; font-family: "DINPro-Regular"; color: #fff; bottom: 0; right: 0; }

#buildPC #toolbar li { background: rgba(255, 255, 255, 0.6); width: 50px; height: 50px; cursor: pointer; -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-align: center; line-height: 50px; }

#buildPC #toolbar li img { width: 25px; vertical-align: middle; }

#buildPC #toolbar li:hover { background: white; }

#buildPC #toolbar li#backtop { font-size: 12px; background: rgba(255, 0, 0, 0.6); }

#buildPC #toolbar li#backtop:hover { background: red; }

#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: 20px 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 li:hover, #buildPC #navbar li.active { background: rgba(255, 0, 0, 0.8); }

#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/mb/2018/how-to-build-a-pc/images/bg-kv.jpg) bottom center no-repeat ; background-size: cover; }

#buildPC #kv h2 { font-size: 70px; padding-top: 50px; }

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

#buildPC #kv h1 { font-family: "DINCond-Medium"; font-size: 40px; letter-spacing: .5px; margin: 10px 0 5px; }

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

#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-family: "DINCond-Light"; font-size: 30px; -webkit-animation: gotobulid2 1.5s infinite; animation: gotobulid2 1.5s infinite; }

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

#buildPC #bridge { background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/bg-bridge.jpg) top center no-repeat ; background-size: cover; position: relative; overflow: hidden; }

#buildPC #bridge h2 { margin-top: 25px; }

#buildPC #bridge p { padding: 40px 0 30px; font-size: 40px; font-family: "DINCond-Light"; line-height: 1.4; color: #ddd; }

#buildPC #bridge h3 { font-size: 50px; font-family: "DINCond-Medium"; }

#buildPC #bridge .txt { min-height: 700px; padding: 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; position: relative; z-index: 2; }

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

#buildPC #bridge .imgxs2 { top: auto; bottom: 0; }

#buildPC #pc-component .pdbox { 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 .pdbox .pdimg { width: 45%; position: relative; }

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

#buildPC #pc-component .pdbox .iconbox { width: 45%; }

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

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

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

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

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

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

#buildPC #pc-component .pdbox .icontb .td img { width: 60px; height: 60px; 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 .txt { text-align: left; padding: 7% 5% 9%; }

#buildPC #ebook .ebookbox .txt p { line-height: 2; padding: 35px 0 50px; font-size: 120%; }

#buildPC #ebook .ebookbox .txt .bt a { background: #e2001a; color: #fff; padding: 15px 50px; font-weight: bold; font-size: 120%; -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; }

#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: 350px; }

#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 { font-size: 28px; font-weight: bold; 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%; }

#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 .stitle { font-size: 32px; font-family: "DINCond-Black"; }

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

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

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

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

#buildPC #pc-plan .tips-items .txt { font-family: "DINCond-Black"; 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%; }

#buildPC #pc-plan .tips-items p { margin: 15px auto; text-transform: uppercase; letter-spacing: 2px; padding: 0; color: #e2001a; font-size: 20px; font-weight: bold; text-shadow: #c00 1px 1px 2px; }

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

#buildPC #pc-plan .tips-items .icon-tips1 { background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/icon-gaming.png) center center no-repeat ; background-size: cover; background-size: 60%; }

#buildPC #pc-plan .tips-items .icon-tips1:hover { background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/icon-gaming2.png) center center no-repeat ; background-size: cover; background-size: 60%; }

#buildPC #pc-plan .tips-items .icon-tips2 { background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/icon-customizes.png) center center no-repeat ; background-size: cover; background-size: 60%; }

#buildPC #pc-plan .tips-items .icon-tips2:hover { background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/icon-customizes2.png) center center no-repeat ; background-size: cover; background-size: 60%; }

#buildPC #pc-plan .tips-items .icon-tips3 { background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/icon-streaming.png) center center no-repeat ; background-size: cover; background-size: 60%; }

#buildPC #pc-plan .tips-items .icon-tips3:hover { background: url(https://storage-asset.msi.com/event/mb/2018/how-to-build-a-pc/images/icon-streaming2.png) center center no-repeat ; background-size: cover; background-size: 60%; }

#buildPC #pc-plan .tips-items .icon-tips { width: 150px; height: 150px; margin: 0 auto; cursor: pointer; border-radius: 50%; position: relative; z-index: 1; background-color: #000; -webkit-transition: background-color 0.2s, color 0.2s; -o-transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s; border: #c00 5px dashed; -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; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

#buildPC #pc-plan .tips-items .icon-tips:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ""; -webkit-box-sizing: content-box; box-sizing: content-box; top: -7px; left: -7px; padding: 7px; -webkit-box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.6); box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.6); -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, -webkit-transform 0.2s; -o-transition: transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); opacity: 0; }

#buildPC #pc-plan .tips-items .icon-tips:hover { background-color: #f00; border: rgba(255, 0, 0, 0.8) 5px solid; -webkit-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); }

#buildPC #pc-plan .tips-items .icon-tips:hover:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }

#buildPC #pc-plan .tabnav { margin-top: 4rem; 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-family: "DINCond-Medium"; 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; 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-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; }

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

@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 { font-family: "DINCond-Black"; width: 100%; height: 42px; font-size: 22px; 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: 42px 42px 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: 42px 42px 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: 25px; line-height: 1.6; }

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

.ebookdw .ltbox .et { 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; padding-bottom: 10px; line-height: 1.4; }

.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.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 { font-size: 90%; color: #999; line-height: 1.6; }

.tips-txt .imgtxtbox .note a { font-size: 120%; color: #c00; 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: inline-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: #e2001a; }

.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: decimal; line-height: 1.4; padding-bottom: 15px; color: #ccc; }

.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 .title, #buildPC .title2 { font-size: 50px; }
  #buildPC #bridge p { font-size: 36px; }
  #buildPC #bridge h3 { font-size: 46px; } }

@media screen and (max-width: 1280px) { #buildPC .title, #buildPC .title2 { font-size: 42px; }
  #buildPC #bridge p { font-size: 30px; }
  #buildPC #bridge h3 { font-size: 40px; }
  #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 .pdbox { 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; }
  #buildPC #ebook .ebookbox .txt { width: 50%; } }

@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 { font-size: 28px; width: calc(100% - 90px); margin: 0 auto; max-width: auto; }
  #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 #toolbar { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; }
  #buildPC #toolbar li { width: 50%; height: 40px; }
  #buildPC #toolbar li img { height: 20px; width: auto; vertical-align: middle; }
  #buildPC #kv { height: calc(100vh - 70px); }
  #buildPC #kv h2 { padding-top: 0; }
  #buildPC #bridge { background: none; min-height: none; padding: 0% 5%; }
  #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 .pdbox { padding: 0 0 5rem; display: block; }
  #buildPC #pc-component .pdbox .pdimg, #buildPC #pc-component .pdbox .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; }
  #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; } }