html {overflow-x: hidden !important; -ms-overflow-style: -ms-autohiding-scrollbar;}

h1, h2, h3, h4, h5, p {margin: 0px;}
section h1 {font-size: 3.5em; font-weight: 700;}
section h2 {font-size: 2.5rem; font-weight: 600;}
section h3 {font-size: 2em; font-weight: 500;}
section h4 {font-size: 1.75em;}
section h5 {font-size: 1.5em;}
section h6 {font-size: 1.25em; font-weight: 500;}
section p {font-size: 1.25rem; line-height: 1.5rem;}
section #section-header .separate-1-3 p {padding-top: 15px;}

.max-width-1200, .max-width-500, .max-width-800, .max-width-1600, .max-width-650, .max-width-350, .max-width-1000,.max-width-900,.max-width-1400 {margin-right: auto; margin-left: auto;}
.max-width-1600 {max-width: 1600px;} .max-width-1400 {max-width: 1400px;} .max-width-1200 {max-width: 1200px;}
.max-width-1000 {max-width: 1000px;} .max-width-900  {max-width: 900px;} .max-width-800  {max-width: 800px;}
.max-width-650  {max-width: 650px;} .max-width-500  {max-width: 500px;} .max-width-350  {max-width: 350px;}

.main {width: 100%;}
.main img {max-width: 100%; display: block; margin: auto;}
section {width: 100%; box-sizing: border-box; font-family: 'Rajdhani', sans-serif, 'Microsoft JhengHei';}
.margin-title-distance {margin-bottom: 30px;}
.margin-distance {margin-bottom: 80px;}
.bgc-black {background-color: #000; color: #fff;}
.bgc-white {background-color: #fff; color: #000;}
.separate {width: 100%; box-sizing: border-box;}
.separate > * {/*font-size: 18px;*/ display: inline-block; vertical-align: top; box-sizing: border-box; padding: 0px 10px;}
.separate .separate-1-3 {width: 33.33%; padding: 0px 7px;}
.separate .separate-2-3 {width: 66.66%; padding: 0px 7px;}
.separate .separate-1-2 {width: 50%; padding: 0px 7px;}
.separate .separate-1-4 {width: 25%; padding: 0px 7px;}
.separate .separate-1-5 {width: 20%; padding: 0px 7px;}
.picture {width: 100%; vertical-align: top;}
.picture img {width: 100%; display: block;}
.opacitychange {position: relative;}
.sensor {position: relative; top: 10px; opacity: 0;}
.sensor[data-type="right"] {position: relative; top: 0px; opacity: 1; right: -50px;}

.guild-bar {text-align: center; background-color: #3E3E3E; width: 100%; z-index: 99; height: 56px; display: block; border-bottom: 2px solid #DADADA;}
.guild-bar a {display: inline-block; height: 56px; line-height: 56px; padding-left: 15px; padding-right: 15px; text-decoration: none; color: #fff; vertical-align: middle; color: #838383; border-bottom: 2px solid #DADADA; font-size: 15px;}
.guild-bar a:nth-child(1) {background-color: #333;}
.guild-bar a.logo {opacity: 0; transition: .5s;}
.guild-bar img {height: 30px; max-width: none; vertical-align: middle; width: 123px; transition: 0.5s;}

.loading-page,.loading-page img {display: none;}
section[data-id="#section-video"] {background: #000; padding: 5px 0 5px 0;}
section[data-id="#section-connection"] {background: linear-gradient(to bottom, #000000 0%, #262626 50%, #262626 100%);}
section[data-id="#section-sensor"] {background: linear-gradient(to bottom, #262626 0%, #424242 40%, #424242 100%);}
section[data-id="#section-data"] {background: #000;}
section[data-id="#section-technology"] {background: #212121;}
section[data-id="#section-choice"] {background: url(https://images.evga.com/articles/01466/series_mouse.png); background-size: 100% auto; background-repeat: no-repeat; overflow: hidden; z-index: 3; min-height: 585px;}
section[data-id="#section-modes"] {background: #000;}
section[data-id="#section-design"] {background: #000;}
section[data-id="#section-weight"] {background: url(https://images.evga.com/articles/01466/weight_system.png); background-size: 100% auto; background-repeat: no-repeat; background-position: bottom; overflow: hidden; z-index: 3; min-height: 650px;}
section[data-id="#section-software"] {background: url(https://images.evga.com/articles/01466/bg3.jpg) fixed; background-size: cover; background-repeat: no-repeat; overflow: hidden; z-index: 3;}
section[data-id="#section-switch"] {background: #000;}
section[data-id="#section-programmable"] {background: linear-gradient(to bottom, #000000 0%, #424242 40%, #424242 100%);}
section[data-id="#section-profiles"] {background: #000;}
section[data-id="#section-feet"] {background: #414141;}
section[data-id="#section-specification"] {background: #151517;}

#section-video, #section-connection, #section-sensor, #section-data, #section-technology, #section-choice, #section-modes, #section-design, #section-weight, #section-software, #section-switch, #section-programmable, #section-profiles, #section-feet, #section-specification, #section-soon, #section-footer {text-align: center; padding: 30px 0;}
#section-video {padding: 5px 0;}
#section-video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#section-video .video-container {position: relative; padding-bottom: 56.25%; /*padding-top: 30px;*/ height: 0; overflow: hidden;}
#section-technology .technology-txt {text-align: center; position: absolute; left: 16%; top: 75%; overflow: hidden;}
#section-programmable .programmable-txt {font-size: 2rem; line-height: 1.2; margin-top: -25%;}
#section-profiles .profiles-txt {text-align: left; position: absolute; left: 55%; top: 70%; font-weight: 500;}
#section-specification p, #section-specification ul li, #section-specification h3, #section-specification h4 {text-align: left;}
#section-sensor > div.sensor.flex-center > div:nth-child(1), #section-sensor > div.sensor.flex-center > div:nth-child(2) {text-align: left;}
#section-programmable > div.separate > div > img {padding: 3% 10%;}
#section-sensor > div.sensor.flex-center > div > div.picture > img {margin: 20px 0 5px;}
#section-connection > div:nth-child(2) > div:nth-child(1) {position: absolute; top: 14%; left: 12%; z-index: 1; width: 40%;}
#section-software > p.software-p1 {margin-bottom: 20px;}

.main .rgb-glow-header {position: absolute; top: 0px; left: 50%; transform: translateX(-50%);}
.main .hue-animation {animation: color-hue 5s 0.2s linear infinite;}
.main .section-header {position: relative;}

.d-block {display: block}
.d-flex {display: flex}
.flex-center {display: flex; align-items: center;}
.flex-start {display: flex; align-items: flex-start;}
.justify-center {justify-content: center;}
.carousel-icon {margin: 0px 15px 0 0;}
.carousel-icon img {width: 76px;}
.titleText {color: #47ddff;}
.titleText-w {color: #fff;}
.text-center {text-align: center;}
.uc {text-transform: uppercase;}
label.more-purple {text-align: center; margin: 20px auto 0px auto; width: 50px; cursor: pointer; display: block;}
label.more-purple #check-purple {display: none;}
.seemore {-webkit-animation: scaleDraw 5s ease-in-out infinite;}
@keyframes scaleDraw {
  0%{transform: scale(1);}
  25%{transform: scale(1.1);}
  50%{transform: scale(1);}
  75%{transform: scale(1.1);}
}

@keyframes color-hue {
 from {-webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg);}
 to {-webkit-filter: hue-rotate(359deg); filter: hue-rotate(359deg);}
}
.detail-info .separate-50 {width: 50%}
.detail-info .d-flex {display: flex;}
.type-icon {position: relative; display: flex; justify-content: flex-start; padding: 3% 16% 0;}
#type-picture {width: 70%; float: left;}
.svg-icon-x20-BK, .svg-icon-x17-BK {width: 25px; position: absolute; bottom: 5%; right: 35%;}
.svg-color1 {fill: rgb(0, 0, 0); cursor: pointer;}
.svg-icon-x20-GR, .svg-icon-x17-GR {width: 25px; position: absolute; bottom: 5%; right: 30%;}
.svg-color2 {fill: rgb(67, 67, 67); cursor: pointer;}

main .nav-bg { background: #1D1D1D; position: relative; z-index: 999;}
main .nav {display: flex; justify-content: center; list-style: none; margin: 0 auto; max-width: 1200px; text-transform: uppercase;}
main .nav li {cursor: pointer; margin: 0; padding: 0.5em 1.5em; font-size: 19px;}
main .nav li.nav-active {color: #fff; font-weight: 700; text-decoration: underline;}
main .nav li:hover, .nav a:hover {background-color: #343434; color: #fff;}
main .nav a {display: block; margin: 0; padding: 0; text-decoration: none;}
main .is-sticky .nav-bg {width: 100%;}

.connection-block {display: flex; justify-content: space-around; padding: 20px;}
.connection-block h2 {font-size: 3.5rem; line-height: 1;}
.connection-block span {font-size: 1.5rem; line-height: 1;}
.connection-img {padding: 20px;}
#section-connection > div:nth-child(3) {margin-top: -5%;}
#section-connection > div:nth-child(3) > .separate-1-3 > .picture > img {width: 75%; -webkit-animation: swingMice 2s ease-in-out infinite;}
@keyframes swingMice {
  0% {transform: translate(0%, 0%);}
  5% {transform: translate(0.57%, -1.105%);}
  10% {transform: translate(1.395%, -2.035%);}
  15% {transform: translate(2.47%, -2.73%);}
  20% {transform: translate(3.705%, -3.17%);}
  25% {transform: translate(5%, -3.3%);}
  30% {transform: translate(6.295%, -3.17%);}
  35% {transform: translate(7.53%, -2.73%);}
  40% {transform: translate(8.605%, -2.035%);}
  45% {transform: translate(9.43%, -1.105%);}
  50% {transform: translate(10%, 0%);}
  55% {transform: translate(9.43%, -1.105%);}
  60% {transform: translate(8.605%, -2.035%);}
  65% {transform: translate(7.53%, -2.73%);}
  70% {transform: translate(6.295%, -3.17%);}
  75% {transform: translate(5%, -3.3%);}
  80% {transform: translate(3.705%, -3.17%);}
  85% {transform: translate(2.47%, -2.73%);}
  90% {transform: translate(1.395%, -2.035%);}
  95% {transform: translate(0.57%, -1.105%);}
  100% {transform: translate(0%, 0%);}
 }
main #section-soon > div > div.flex-center > .separate {margin: 0.5rem 2%; width: 25%;}
main #section-soon p {font-weight: 500; text-align: center; margin-top: 15px;}
main #section-soon img:hover {transform: scale(1.04);}
main #section-soon img {transform: scale(1); transition: .2s;}

.classification {padding: 0;}
.classification .separate-1-2 {padding: 0px 10px; vertical-align: bottom;}
.classification h2 {text-align: left; font-size: 2.8rem; line-height: 3rem;}
.classification p {text-align: left; text-justify: inter-ideograph;}
.button-group {width: 100%; text-align: center;}

.mac-dock {width: 100%; text-align: center; max-width: 1600px; margin-left: auto; margin-right: auto;}
.layer-two {width: 20%; display: inline-block; transition: 0.5s; filter: brightness(1); cursor: pointer; text-align: center; margin: 0 5px; transform: scale(1);}
.layer-two h5 {transition: 0.5s; font-size: 2.5em;}

.detail-info {width: 100%;}
.detail-info .separate-1-2 {padding: 0px 1rem;}
.detail-info .separate-1-2:nth-child(1) {float: right;}
.detail-info .separate-1-2:nth-child(2) {padding-right: 5%; padding-top: 4%; padding-bottom: 4%;}
.detail-info .separate-1-2:nth-child(2) .margin-title-distance{margin-bottom: 22px; color: #000;}
.detail-info p {text-align: left; text-justify: inter-ideograph; font-weight: 500;}
.detail-info h4 {margin-bottom: 5px;}
.detail-info a {display: block; margin-top: 20px; font-family: 'Rajdhani', sans-serif, 'Microsoft JhengHei'; font-weight: bold; color: #000;}

.slider-precision .picture {padding: 0px 25px;}
.slider-precision h3 {font-size: 32px;}
.slider-precision p {font-size: 1.15rem; line-height: 1.25rem;}
.slider-precision > button {top: 39%}
.slider-precision ul {bottom: 12%;}
.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;}
.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%,-52%); vertical-align: middle;}
#section-choice > div.sensor.flex-center {padding-top: 5%;}
#section-soon .comingsoon {font-size: 5em; font-weight: 500;}

.moredetail {width: 100%; margin: 0 auto;}
.moredetail button {top: 48%;}
section .slick-track {width: 100%;}
section .slick-arrow {position: absolute; z-index: 3;}
section .slick-next, section .slick-prev {width: 30px; height: 30px; border-radius: 50%; background-color: #000;}
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;}
section .slider-detail a {display: block; padding: 0px 1em;}
.slick-prev:before, .slick-next:before {color: #626262;}
/* .layer-two:hover {transform: scale(1.2); -webkit-filter: brightness(1); margin: 0 1.5em;} */
.layer-two-active {transform: scale(1.15); filter: brightness(1);}
.layer-two-tab {transition: 0.3s;}
#section-switch .sensor .separate-1-2 h3 {font-size: 3em; font-weight: 700; line-height: 3rem;}
#section-switch .sensor .separate-1-2 p {font-size: 1.5rem; line-height: 1.8rem;}

@media (max-width: 1500px) {
  section[data-id="#section-weight"] {min-height: 570px; background-position: bottom;}
}
@media (max-width: 1200px) {
  .pictures ul {top: -45%;}
  .mac-dock {text-align: center;}
  .layer-two {width: 20%; max-width: 180px;}
  .detail-info .separate-1-2:nth-child(1) {padding-top: 6.5%; padding-bottom: 4.5%;}
  #section-technology .technology-txt {left: 15%; top: 75%;}
  section[data-id="#section-choice"] {min-height: 510px;}
  section[data-id="#section-weight"] {min-height: 490px; background-position: bottom;}
  .type-icon {position: relative; display: flex; justify-content: flex-start; padding: 3% 13% 0;}
}
@media (max-width: 1000px) {
  .pictures {margin-bottom: 0px;}
  .pictures .pic {width: 30%;}
  .pictures .line {height: 70%;}
  .pictures ul {left: 80%;  top: -13%;}
  #section-technology .technology-txt {left: 14.5%; top: 75%;}
  .svg-icon-x20-GR, .svg-icon-x17-GR {bottom: 5%; right: 28%;}
  #section-choice > div.sensor.flex-center {padding-top: 0%;}
  section[data-id="#section-choice"] {min-height: 422px;}
  section[data-id="#section-weight"] {min-height: 422px;}
  #section-programmable .programmable-txt {font-size: 1.5rem;}
}
@media (max-width: 900px) {
  section .slider-detail {padding-bottom: 45px;}
  .slider-precision ul {bottom: 12% !important;}
  #section-technology .technology-txt {left: 12.5%; top: 77%;}
}
@media (max-width: 800px) {
  .guild-bar {display: none;}
}
@media (max-width: 768px) {
  .separate .separate-1-2 {width: 100%;}
  .button-group {margin-top: 30px;}
  section[data-design="choice"] {background: #000;}
  .detail-info {background: linear-gradient(to bottom, #000, #000, #000);}
  .detail-info a {color: #fff;}
  .detail-info .separate-1-2:nth-child(2) .margin-title-distance {color: #fff;}
  .slider-precision ul {bottom: 22% !important;}

  section h1 {font-size: 2.5rem; line-height: 1.2; text-align: center;}
  section h2 {font-size: 2rem; line-height: 2.5rem; text-align: center;}
  .margin-title-distance { margin-bottom: 20px;}
  section:not(.section-header) {padding: 20px 1rem;}
  section[data-design="choice"] {padding-left: 0px; padding-right: 0px;}
  #section-connection > div:nth-child(3) > .separate-1-3 > .picture > img {display: none;}
  #section-connection > div:nth-child(2) > div:nth-child(1) {position: relative; top: 0%; left: 0%; z-index: 1; width: 100%;}
  #section-connection > div:nth-child(2) > div.separate.opacitychange {display: none;}
  #section-connection > div:nth-child(3) {margin-top: 0%;}

  .separate > .separate-1-3, .separate .separate-2-3, .separate .separate-1-2 {width: 100%;}
  #section-data > div.sensor.flex-start > div:nth-child(1).separate-1-3, #section-data > div.sensor.flex-start > div:nth-child(2).separate-1-3, #section-data > div.sensor.flex-start > div:nth-child(3).separate-1-3 {width: 100%; margin-bottom: 30px;}
  .separate > .separate-1-4, .separate > .separate-1-5 {width: 50%; margin-bottom: 30px;}
  .separate > .separate-2-3, .separate .separate-1-2 {margin-bottom: 30px;}
  main #section-soon > div > div.flex-center > .separate {margin: 0.5rem 2%; width: 100%;}

  #section-design .separate-1-2.sensor.max-width-500 {display: block;}
  .classification h2 {text-align: center;}
  .flex-center, .flex-start, .connection-block {display: block;}
  #section-technology .technology-txt {position: relative; left: 0; top: 0;}
  #section-feet > div.sensor.flex-center {display: flex;}
  #section-programmable > div.sensor.flex-center, #section-programmable > div.sensor.flex-start {display: flex;}
  #section-data > div > div.separate-1-2.opacitychange > div > img {width: 85%;}
  #type-picture, #svg-icon-x20, #svg-icon-x17 {display: none;}
  #section-choice {padding: 0;}
  section[data-id="#section-choice"] {min-height: 332px;}
  section[data-id="#section-weight"] {min-height: 375px;}
  #section-programmable .programmable-txt {font-size: 1rem; line-height: 1;}
  .slider-precision {max-width: 560px;}
}
@media (max-width: 600px) {
  .mac-dock {box-sizing: border-box; padding: 0px 0%; text-align: center;}
  /* .mac-dock .picture {display: none;} */
  /* .mac-dock .layer-two {width: 48%; margin-bottom: 16px;} */
  .mac-dock h5 {font-size: 24px; }
  .detail-info {padding: 0px;}
  section[data-id="#section-choice"] {background: none; min-height: auto;}
  #section-programmable .programmable-txt {font-size: 0.8rem; line-height: 1;}
  .layer-two {width: 25%;}
  .type-icon {justify-content: center; padding: 5% 5% 0;}
  .slider-precision {max-width: 500px;}

  .separate > .separate-1-4, .separate > .separate-1-5 {width: 100%;}
  /* .separate > .separate-1-5 a.picture.popup-image, .separate .separate-1-4 a.picture.popup-image {max-width: 300px; margin-right: auto; margin-left: auto;} */
}
@media (max-width: 550px) {
  .pictures .pic {width: 60%;}
  .pictures ul {left: 90%;}
  .slider-precision ul {display: none !important;}
  .slider-precision {max-width: 440px;}
  section[data-id="#section-weight"] {min-height: 300px;}
}
@media (max-width: 480px){
  section h1 {font-size: 2rem; line-height: 1.2; text-align: center;}
  .carousel-icon img {width: 68px;}
  #section-programmable .programmable-txt {font-size: 0.8rem; line-height: 1; transform: scale(0.6); margin-top: -27%; white-space: nowrap; display: flex; justify-content: center;}
  .slider-precision {max-width: 350px;}
  #section-soon .comingsoon {font-size: 3em; font-weight: 500;}
}