main {overflow-x: hidden; font-family: 'Rajdhani', sans-serif, 'Microsoft JhengHei', Arial;}
main h1 {font-size: 2.4rem; line-height: 3rem; margin: 0px auto 20px;}
main p {font-size: 1.18rem; font-weight: 500; line-height: 1.5; margin: 0;}
main .flex-center {display: flex; align-items: center;}
main .flex-start {display: flex; align-items: flex-start;}
.footer-column p {margin-bottom: 0em;}

main section:not(.section-header, .section-where-to-buy) {padding: 60px 0;}
main .section-header-swiper .scontainer .row .col-4 p {font-weight: bold; margin-top: -15px;}
main .section-header-swiper .scontainer .row {display: flex; justify-content: center;}
main .section-header-swiper .scontainer .row .col-4 {padding: 0; margin: 0;}
main .section-overview {background: center / cover no-repeat url(./overview_bg.jpg);}

main .section-overview .scontainer .row .col-12 ul {position: relative; width: auto; margin: 10px 20px 0px; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; counter-reset: li;}
main .section-overview .scontainer .row .col-12 ul li:nth-child(n) {position: relative; top: 0; left: 0; display: inline-block; width: 100%; vertical-align: top; padding-left: 35px; padding-top: 3px; margin-bottom: 10px; text-align: left; font-size: 1.2rem; line-height: 1.4;}
main .section-overview .scontainer .row .col-12 ul li::before {content: counter(li); counter-increment: li; margin: 3px 10px 0px 0px; display: block; width: 22px; height: 22px; line-height: 24px; position: absolute; top: 0; left: 0; text-align: center; background: #1e1e1e; border: 1px solid #9b9b9b; border-radius: 15px;}

main .section-overview .scontainer .row .col-12 .overviewImg {display: block;}
main .section-components {background: center / cover no-repeat url(./components_bg.jpg);}
main .section-forum .row .col-12 img {max-width: 100%; display: block; margin: auto;}
main .section-where-to-buy .row p {padding-top: 10px; font-size: 1.1rem; font-weight: 400; line-height: 1.4; color: #fff;}

.main a {text-decoration: none;}
.black-box {background-color: #000000ab; padding: 2rem;}
.text-center {text-align: center;}
.gray-bg {background: -webkit-linear-gradient(180deg, rgb(190, 19, 19) 0, rgb(190, 19, 19) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: 1;}

.tab {padding: 20px 0px; color: #333; width: 90%;}
.tab nav ul {list-style-type: none; overflow: hidden; border-bottom: 1px solid #ccc; margin: 10px 25px; display: flex;}
.tab nav ul li {border-bottom: 3px solid transparent; display: inline-block; float: left; width: 25%; padding: 5px 0px; text-align: center; color: #888; cursor: pointer; transition: all .3s ease;}
.tab nav ul li p {font-weight: 600;}
.tab nav ul li img {transition: .3s;}
.tab nav ul li:hover img {transform: scale(1.05);}
.tab nav ul li.btnActive {border-bottom: 3px solid #fff; color: #fff; background: -webkit-linear-gradient(180deg, rgb(255, 255, 255) 0, rgb(255, 255, 255) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: 1; margin: 0;}
.tab .tabBody {margin-top: 20px;}
.tab .tabBody section {padding: 5px 15px 20px; width: 100%; position: relative;}
.tab .tabBody section p {padding: 5px 15px 20px; font-size: 1.1rem; font-weight: 400; line-height: 1.4; color: #fff;}
.tab .tabBody section h2 {font-weight: normal;}
.tab .tabBody section .col-12 {position: relative; padding-bottom: calc(100% * 580 / 1000);}
.tab .tabBody section .col-12 img {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}

.fade-enter-active, .fade-leave-active {transition: all .3s ease; opacity: 1;}
.fade-enter, .fade-leave, .fade-leave-to {transform: translateX(10px); opacity: 0;}

main .section-components .slick-current {padding-bottom: 0px;}
main .section-components .scontainer {max-width: 1600px;}
main .section-components {color: #000;}
main .section-components h2 {color: #000;}
main .section-components a {display: block; overflow: hidden;}
main .section-components .moredetail {width: 100%; margin: 0 auto;}
main .section-components .moredetail button {top: 48%;}
main .section-components .slick-track {width: 100%;}
main .section-components .slick-arrow {position: absolute; z-index: 3;}
main .section-components .slick-next, main .section-components .slick-prev {width: 30px; height: 30px; border-radius: 50%;}
main .section-components .slick-next {right: 5px;}
main .section-components .slick-prev {left: 5px;}
main .section-components .slick-list {width: 95%; text-align: center; margin-right: auto; margin-left: auto;}
main .section-components .slider-detail {width: 100%;}
main .section-components .slider-detail img {width: 100%; display: block;}
main .section-components .slider-detail a {display: block; padding: 0px 1em;}
main .section-components .slider-detail p {color: #fff;}
main .section-components .slider-detail .slick-prev:before, main .section-components .slider-detail .slick-next:before {color: #626262;}

main .slider-precision h3 {font-size: 26px; margin-top: 49px; color: rgb(211,211,211);}
main .slider-precision p {font-size: 1.15rem; line-height: 1.25rem;}
main .slider-precision > button {top: 39%}
main .slider-precision.solution-ul ul {bottom: 9%;}
main .slider-precision.software-ul ul {bottom: 6%;}
main .slider-precision ul > li {height: 15px; width: 15px; line-height: 15px; text-align: center; background-color: #666;}
main .slider-precision li button {height: 15px; width: 15px; line-height: 15px; text-align: center;}
main .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%,-52%); vertical-align: middle;}
main .slider-precision .slick-track {width: 100%;}
main .slider-precision .slick-arrow {position: absolute; z-index: 3;}
main .slider-precision .slick-next, main .slider-precision .slick-prev {width: 30px; height: 30px; border-radius: 50%;}
main .slider-precision .slick-next {right: 5px;}
main .slider-precision .slick-prev {left: 5px;}
main .slider-precision .slick-list {width: 95%; text-align: center; margin-right: auto; margin-left: auto;}
main .slider-precision .slick-prev:before, main .slider-precision .slick-next:before {color: #626262; font-size: 30px;}

@media (max-width: 900px) {
  main .flex-center {display: block;}
  main .flex-start {display: block;}
  main .slider-precision.solution-ul ul {bottom: 9% !important;}
  main .slider-precision.software-ul ul {bottom: 6% !important;}
}

@media (max-width: 800px) {
  main .mobile {display: none;}
  .tab .tabBody section .col-3 {width: 46%;}
  .tab nav ul li {padding: 5px; display: flex; justify-content: center;}
  .tab nav ul li p {font-size: 1.1rem; line-height: 1.3;}
  main .section-components .scontainer .row .col-4 {width: 46%; min-height: 11rem;}
  main .section-overview .scontainer .row .col-12 ul {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}
}

@media (max-width: 600px) {
  main .slider-precision ul {display: none;}
}

@media (max-width: 500px) {
  main h1 {font-size: 1.9rem; line-height: 2.2rem; margin: 5px auto 5px;}
  main section:not(.section-header, .section-where-to-buy) {padding: 20px 0;}
  main .section-software .scontainer .row .col-12 a img {width: 60%;}
  main .section-where-to-buy .scontainer .row .col-4 a img {width: 75%;}
  main .slider-precision h3 {margin-top: 25px; font-size: 1.5rem; line-height: 1.3; font-weight: 500;}
  main .section-where-to-buy h3 {font-size: 1.5rem; font-weight: 500;}
  .tab nav ul {display: block;}
  .tab nav ul li {display: flex; justify-content: flex-start; width: 100%; border-bottom: 1px solid #ddd; border-radius: 3px 3px 0 0; transform: translateY(2px); transition: transform .3s ease; font-size: 14px; font-weight: 600;}
  .tab nav ul li p {font-size: 1.3rem; line-height: 1.2; text-align: left;}
  main .section-overview .scontainer .row .col-12 ul {width: 100%; margin: 5px;}
  main .section-overview .scontainer .row .col-12 ul li:nth-child(n) {padding-left: 30px; font-size: 1.0rem;}
  main .section-overview .scontainer .row .col-12 ul li::before {margin: 2px 10px 0px 0px; width: 17px; height: 17px; line-height: 20px;}
  .gray-bg {-webkit-text-fill-color: rgb(190, 19, 19);}
  .tab nav ul li.btnActive {-webkit-text-fill-color: white;}
}