* {box-sizing: border-box; margin: 0;}
h1, h2, h3, h4, h5, p, ul, li, div {margin: 0; padding: 0;}
.main h1 {font-family: "GeForce", Arial, Helvetica, sans-serif; font-size: 2.4rem; line-height: 3rem; margin: 0px auto 20px;}
.main h2 {font-family: "GeForce", Arial, Helvetica, sans-serif;}
.main p {font-family: "Rubik", Arial, Helvetica, sans-serif; font-size: 1.18rem; font-weight: 400; line-height: 1.5; margin: 0;}
.main img {display: block; max-width: 100%; margin: auto;}

.loading-page {position: fixed; background: #000000; opacity: 0.8; z-index: 10000; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;}
.loading-page .Loading_img {width: 250px;	height: 250px; top:-125px; margin-left: 50%; left:-125px; position: absolute; opacity: 0.8;}
.loading-page .counter {position: relative; width: 200px;}

.mcontainer {width: 100%; max-width: 1200px; margin: 0 auto; border: none;}
.row {width: 100%; max-width: 100%; margin: 0; padding: 0; border: none;}
.column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 {padding-left: 0.2em; padding-right: 0.2em;}
.flex {display: flex; justify-content: center; align-items: center;}
.flex-center {display: flex; justify-content: center; flex-direction: row;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.narrow {fill:#F4A600;}
.max-width-1100 {max-width: 1100px;}

section {width: 100%; max-width: 100%; margin: 0; padding: 0; border: none; box-sizing: border-box;}
section:not(.section-header) {padding: 60px 0;}
.section_fadeIn {background:#000000; background-size: cover; width: 100%; /*min-height: 100vh;*/ position: absolute; z-index: 99;}
.section-header img {width: 100%; height: 100%;}
.section-bios {width: 100%; background-color:#242424;}
.section-display {background: -webkit-radial-gradient(center, 70% 40%, #ccc 0%, #000000 70%);}
.section-gallery, .section-product {background: #fff; color: black;}
.section-gallery h1, .section-product h1 {color: black;}
.btn-soon {text-decoration: none; margin: 0.5rem 2%; color: #FFF; background-color: #d9c475; letter-spacing: 2px; font-size: 14px; padding: 10px 20px; border-radius: 5px; border: 0px solid rgba(0,0,0,0.3); border-bottom-width: 0px; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); cursor: pointer;}
.btn-soon.intel {background-color: transparent; opacity: 0.3;}
.btn-soon.amd {background-color: transparent; opacity: 0.2;}
.btn-soon:hover {opacity: 0.6; border-color: rgba(0,0,0,0.5);}
.btn-soon.ac {opacity: 1; border-color: rgba(0,0,0,0.9);}
.section-product .column-3 {margin: 0.5rem 2%;}
.section-product .column-3 img {padding: 1rem; transition: .3s;}
.section-product .column-3 img:hover {transform: scale(1.1);}
.section-product .column-3.btn-soon.ac > img:hover {transform: scale(1.0);}
.section-product .column-3 p {font-size: 1.35em;}
.section-x1 .row div.column-4 {display: flex; align-items: flex-start; flex-direction: column-reverse;}
.section-x1 .row div.column-4 img {margin: 0 0 30px 0; width: 65%;}
.section-sliders {width: 100%; min-height: 100%;}

/* section-gallery */
.moredetail {width: 100%; margin: 0 auto;}
.moredetail button {top: 48%;}
.moredetail .slick-track {width: 100%;}
section .slick-arrow {position: absolute; z-index: 3;}
section .slick-arrow:focus-visible {outline: 2px dashed #ffffff; border-radius: 2rem; outline-offset: -3px;}
section .slick-next,section .slick-prev {width: 30px; height: 30px; border-radius: 50%; background-color: transparent;}
section .slick-next {right: 5px;}
section .slick-prev {left: 5px;}
section .slick-list {width: 95%; text-align: center; margin-right: auto; margin-left: auto;}
section .slider-detail {width: 100%;}
section .slider-detail img {width: 100%; display: block; transition: .3s;}
section .slider-detail img:hover {transform: scale(1.1);}
section .slider-detail a {display: block; margin: 0px 14px; overflow: hidden;}
.slick-prev:before, .slick-next:before {color: #626262;}

/* section-bios */
.slider-precision img {padding: 0px 25px; margin-bottom: 30px;}
.slider-precision h3 {font-size: 32px;}
.slider-precision p {font-size: 1.15rem; line-height: 1.5rem; font-weight: 100;}
.slider-precision ul {bottom: 0%;}
.slider-precision ul > li {height: 15px; width: 15px; line-height: 15px; text-align: center; background-color: #666;}
.slider-precision li button {height: 15px; width: 15px; line-height: 15px; text-align: center;}
.slider-precision .slick-dots li button::before {font-size: 45px; height: 15px; width: 15px; line-height: 15px; text-align: center; left: 50%; top: 50%; transform: translate(-50%,-50%); vertical-align: middle;}

.section-display .mb {position: relative;}
.section-display .mb .mb-dot {display: block; width: 22px; height: 22px; z-index: 5; position: absolute; border-radius: 16px; animation: circleShine 0.5s linear infinite alternate; border: 2px solid #fff; box-shadow: 0 0 5px #fff;}
@keyframes circleShine { from {box-shadow: 0 0 30px #fff;} }
.section-display .mb .mb-dot::before {width: 16px; height: 16px; content: ""; position: absolute; background: #fff; border-radius: 16px; top: 1px; left: 1px;}
.section-display .mb .mb-dot.dot01 {left: 34%; top: 9%;}
.section-display .mb .mb-dot.dot02 {left: 25%; top: 36%;}
.section-display .mb .mb-dot.dot03 {left: 31%; top: 32%;}
.section-display .mb .mb-dot.dot04 {left: 43%; top: 42%;}
.section-display .mb .mb-dot.dot05 {left: 51%; top: 30%;}
.section-display .mb .mb-dot.dot06 {left: 72%; top: 38%;}
.section-display .mb .mb-dot.dot07 {left: 41%; top: 71%;}
.section-display .mb .mb-dot.dot08 {left: 40%; top: 83%;}
.section-display .mb .mb-dot.dot09 {left: 77%; top: 88%;}
.section-display .mb .mb-dot.dotActive {border: 2px solid #FAC064; box-shadow: 0 0 5px #FAC064;}
.section-display .mb .mb-dot.dotActive::before {background: #FAC064;}
.section-display .mb img {max-width: 85%;}
.section-display .partDesc {display: block; position: relative; top: auto; right: auto; margin: 2% auto; text-align: center; width: 100%; padding: 20px 10px;}
.section-display .partDesc .mbText {color: #FAC064; font-size: 2.5rem; font-weight: 700; line-height: 1;}
.section-display .partDesc .mbP {color: #FAC064; font-size: 1.2rem; margin-top: 15px;}

.strips {min-height: 100vh; text-align: center; overflow: hidden; color: white;}
.strips__strip {will-change: width, left, z-index, height; position: absolute; width: 33.3%; min-height: 84vh; overflow: hidden; cursor: pointer; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.strips__strip:nth-child(1) {left: 0;}
.strips__strip:nth-child(2) {left: 33.3vw;}
.strips__strip:nth-child(3) {left: 66.7vw;}
.strips__strip:nth-child(1) .strip__content {background: center / cover no-repeat url('../../images/motherboard/2022/NEW/slider/Z790_Selected.jpg'); transform: translate3d(-100%, 0, 0); animation-name: strip1; animation-delay: 0.1s;}
.strips__strip:nth-child(2) .strip__content {background: center / cover no-repeat url('../../images/motherboard/2022/NEW/slider/Z690_Selected.jpg'); transform: translate3d(0, 100%, 0); animation-name: strip2; animation-delay: 0.2s;}
.strips__strip:nth-child(3) .strip__content {background: center / cover no-repeat url('../../images/motherboard/2022/NEW/slider/X570_Selected.jpg'); transform: translate3d(0, -100%, 0); animation-name: strip3; animation-delay: 0.3s;}
@keyframes strip1 { 0% {transform: translate3d(-100%, 0, 0);} 100% {transform: translate3d(0, 0, 0);} }
@keyframes strip2 { 0% {transform: translate3d(0, 100%, 0);} 100% {transform: translate3d(0, 0, 0);} }
@keyframes strip3 { 0% {transform: translate3d(0, -100%, 0);} 100% {transform: translate3d(0, 0, 0);} }
.strips .strip__content {animation-duration: 1s; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-fill-mode: both; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-decoration: none;}
.strips .strip__content:hover:before {transform: scale(3) translate(0, 0); opacity: 0.15;}
.strips .strip__content .strip__link {padding: 4.4em 1.25em; opacity: 0; position: absolute; bottom: -2em; transition: 0.3s;}
.strips .strip__content:hover .strip__link {bottom: 0; opacity: 1; pointer-events: auto;}
.strips .strip__content:before {content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: white; opacity: 0.01; transform-origin: center center; transform: scaleY(1) translate(0, 0); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.strips .strip__inner {will-change: transform, opacity; position: absolute; z-index: 5; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%) scale(0.5); opacity: 0; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.strips .strip__inner .strip__inner-info {position: absolute; top: 33%; left: 55%;}
.strips .strip__inner .strip__inner-info .strip__inner-title {width: 300px; height: auto; margin: 0 0 15px -8px;}
.strips .strip__inner .strip__inner-info .strip__inner-text {width: 550px; text-align: justify; font-size: 1.3rem; line-height: 1.8rem;}
.strips .strip__inner .strip__inner-info .strip__inner-logo {width: 130px; height: auto; margin-right: 0;}
.strips .strip__inner img.strip__inner-bg {width: 100%; height: 100vh; object-fit: cover;}
.strips .strip__hide {display: none;}
.strips__strip--expanded {width: 100%; top: 0 !important; left: 0 !important; z-index: 3; cursor: default;}
.strips__strip--expanded .strip__content:hover:before {transform: scale(1) translate(0, 0); opacity: 1; background: black;}
.strips__strip--expanded .strip__title {opacity: 0;}
.strips__strip--expanded .strip__inner {opacity: 1; transform: translate(-50%, -50%) scale(1);}
.strip__title {display: none; margin: 0; position: relative; z-index: 2; width: 100%; font-size: 3.5vw; color: white; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.strip__close {position: absolute; right: 3vw; top: 3vw; opacity: 0; z-index: 10; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; transition-delay: 0.5s; display:none;}
.strip__close--show {opacity: 1; display: block;}
.strips button {background: none; border: none;}
.strips button p, i {color: white;}

/*custom keyboard indicator CSS */
.MainContent .moredetail a:focus-visible img {outline: 2px dashed #ffffff; border-radius: 2rem; outline-offset: -3px;}
.MainContent .section-product a:focus-visible img {outline: 2px dashed #000000; border-radius: 2rem; outline-offset: -3px;}
.MainContent .strips button:focus-visible {outline: 2px dashed #ffffff; border-radius: 0.2rem; outline-offset: -3px;}
.MainContent .main .strips .strip__close:focus-visible  { outline: 2px dashed #ffffff; border-radius: 5rem; outline-offset: 3px;}
@media screen and (max-width: 900px) {
	.slick-dots {display: none !important;}
}
@media screen and (max-width: 768px) {
  section:not(.section-header) {padding: 20px 0;}
  .column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 {padding-left: 0.5em; padding-right: 0.5em; width: 100%;}
  .text-left, .text-right {text-align: center;}
  .flex-center {flex-direction: column;}
  .section-x1 .row div.column-4 {align-items: center; margin-bottom: 20px;}
  .section-display .partDesc .mbText {font-size: 1.5rem; font-weight: 400; line-height: 1.2;}

  .strips__strip {min-height: 33.3vh;}
  .strips__strip:nth-child(1) {top: 0; left: 0; width: 100%;}
  .strips__strip:nth-child(2) {top: 33.3vh; left: 0; width: 100%;}
  .strips__strip:nth-child(3) {top: 66.7vh; left: 0; width: 100%;}
  .strips__strip--expanded {min-height: 100vh;}
  .strip__title {display: block; font-size: 28px;}
  .strips .strip__content .strip__link {bottom: 0; opacity: 1; pointer-events: auto;}
  .strips .strip__inner .strip__inner-info {position: absolute; top: 42%; left: 0%; padding-left: 20px; padding-right: 20px;}
  .strips .strip__inner .strip__inner-info .strip__inner-title {width: 300px; height: auto; margin: 0 0 15px -8px;}
  .strips .strip__inner .strip__inner-info .strip__inner-text {width: auto; text-align: left; font-size: 1.0rem; line-height: 1.4rem;}
  .strips .strip__inner .strip__inner-info .strip__inner-logo {width: 115px; height: auto; margin-right: 0;}
}