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';}
section:not(.section-header) {text-align: center; padding: 30px 0;}
.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 > * {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;}
.relative {position: relative;}

section[data-id="#section-connection"] {background: linear-gradient(to bottom, #000000 0%, #262626 50%, #262626 100%);}
section[data-id="#section-sensor"] {background: #000000;}
section[data-id="#section-software"] {background: #151517;}
section[data-id="#section-design"] {background: #000000;}
section[data-id="#section-reflex"] {background: center / cover no-repeat url("./reflex_bg.jpg"); width: 100%; height: calc(100vw * 365 / 1100); display: flex; align-items: center;}
section[data-id="#section-specification"] {background: #151517;}

#section-specification p, #section-specification ul li, #section-specification h3, #section-specification h4 {text-align: left;}
#section-sensor > div.relative.flex-center > div:nth-child(1), #section-sensor > div.relative.flex-center > div:nth-child(2) {text-align: left;}
#section-sensor > div.relative.flex-center > div > div.picture > img {margin: 20px 0 5px;}
#section-connection > div.relative.flex-center > div:nth-child(1) > p {padding: 15px 40px; text-align: left;}
#section-connection > div.connection-img > img {margin: 0;}
#section-software > p.software-p1 {margin-bottom: 20px;}
#section-reflex > div > div:nth-child(2).separate-1-2 {text-align: left;}
#section-reflex > div > div:nth-child(2).separate-1-2 img {margin: 0;}

.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;}
@keyframes color-hue {
  from {-webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg);}
  to {-webkit-filter: hue-rotate(359deg); filter: hue-rotate(359deg);}
 }
.flex-center {display: flex; align-items: center;}
.flex-start {display: flex; align-items: flex-start;}
.justify-center {justify-content: center;}
.titleText {color: #fff;}
.nvtitleText {color: #90e200;}
.text-center {text-align: center;}
.uc {text-transform: uppercase;}
.connection-block {display: flex; justify-content: space-around; padding: 20px;}
.connection-block h2 {font-size: 3.2rem; line-height: 1;}
.connection-block span {font-size: 1.3rem; line-height: 1;}
.connection-img {padding: 20px;}
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;}
main #section-soon .buynow-button {padding: 5px 20px; border: 1px solid #6faf00; border-bottom: 3px solid rgba(0,0,0,0.35); border-radius: 5px; background-image: linear-gradient(#c5ff61, #90e200); font-size: 1.5em; color: #383838; text-shadow: 0px 1px 0px rgb(255 255 255 / 60%); margin: 15px 0; font-weight: 600; transition: .1s;}
main #section-soon .buynow-button:hover {background-image: linear-gradient(#90e200, #90e200);}
main #section-soon .buynow-button:active {background-image: linear-gradient(#6faf00, #6faf00);}

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


main .section-header #banner {width:100%; height:calc(100vw * 850 / 1920); overflow:hidden; position:relative;}
main .section-header .swiper-container {width:100%; height:calc(100vw * 850 / 1920); position:absolute;}
main .section-header .swiper-slide img {animation-duration:5s; animation-timing-function:linear; animation-fill-mode:forwards; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-fill-mode:forwards;}
main .section-header .leftUp img {-webkit-animation-name:leftUp; animation-name:leftUp;}
@keyframes leftUp {0% {transform:scale(1.1,1.1) translate(1%,1%);} 100% {transform:scale(1.1,1.1) translate(-1%,-1%);}}
main .section-header .moveRight img {-webkit-animation-name:moveRight; animation-name:moveRight;}
@keyframes moveRight {0% {transform:scale(1.1,1.1) translate(-1%,0);} 100% {transform:scale(1.1,1.1) translate(1%,0);}}
main .section-header .moveDown img {-webkit-animation-name:moveDown; animation-name:moveDown;}
@keyframes moveDown {0% {transform:scale(1.1,1.1) translate(0,-1%);} 100% {transform:scale(1.1,1.1) translate(0,1%);}}
main .section-header .centerBig img {-webkit-animation-name:centerBig; animation-name:centerBig;}
@keyframes centerBig {100% {transform:scale(1.1,1.1);}}
main .section-header .rightDownBig img {-webkit-animation-name:rightDownBig; animation-name:rightDownBig;}
@keyframes rightDownBig {100% {transform:scale(1.1,1.1) translate(1%,1%);}}


@media (max-width: 900px) {
  section .slider-detail {padding-bottom: 45px;}
  .slider-precision ul {bottom: 12% !important;}
}
@media (max-width: 768px) {
  .separate .separate-1-2 {width: 100%;}
  .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-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%;}
  .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%; display: flex; flex-direction: column;}
  .flex-center, .flex-start, .connection-block {display: block;}
  /* #section-design > div.relative.flex-center {display: flex;} */
  .slider-precision {max-width: 560px;}
  section[data-id="#section-reflex"] {background: #000; width: 100%; height: 100%;}
  #section-reflex > div > div:nth-child(2).separate-1-2 {text-align: center;}
  #section-reflex > div > div:nth-child(2).separate-1-2 img {margin: 0 auto;}
  #section-connection > div.relative.flex-center > div:nth-child(1) > p {text-align: center;}
}
@media (max-width: 600px) {
  .slider-precision {max-width: 500px;}
  .separate > .separate-1-4, .separate > .separate-1-5 {width: 100%;}
}
@media (max-width: 550px) {
  .slider-precision ul {display: none !important;}
  .slider-precision {max-width: 440px;}
}
@media (max-width: 480px){
  section h1 {font-size: 1.65rem; line-height: 1.2; text-align: center;}
  .slider-precision {max-width: 350px;}
}