main {overflow-x: hidden; font-family: 'Rajdhani', sans-serif, 'Microsoft JhengHei', Arial;}
main h1 {font-size: 3rem; line-height: 3rem; padding-top: 10px;}
main p {font-size: 1.18rem; font-weight: 500; line-height: 1.8; margin: 0;}

main section:not(.section-header, .section-nv, .section-performance) {padding: 60px 0;}
main .section-header img {width: 100%;}
main .section-performance img {max-width: 90%; transform: scale(1); transition: .2s; margin-top: 15px;}
main .section-performance img:hover {transform: scale(1.04);}
main .section-performance .row p {text-align: center; line-height: 1.4; margin-top: 10px; white-space: nowrap;}
main .section-performance .products-3080 {max-width: 1000px; margin: 0 auto;}
main .section-performance .products-3070ti {max-width: 1000px; margin: 0 auto;}
main .section-forum .row .col-12 img {max-width: 100%; display: block; margin: auto;}
main .section-presentation {padding-top: 0;}
main .section-nv .row:nth-child(1) {z-index: 1;}
main .section-nv > div > div.row.flex-center > div:nth-child(1) {margin-right: -10rem;}
main .section-nv .nvFont1 {font-weight: 400; font-size: 1.4rem !important; line-height: 2.4rem;}
main .section-nv .nvFont2 {font-weight: 600; font-size: 1.8rem !important; line-height: 1.8rem;}
main .section-nv .row.flex-center .col-6:nth-child(2) img {transform: scale(1.4);}
main .section-header {background: center / cover no-repeat url("./header_bg.jpg"); width: 100%; height: calc(100vw * 1222 / 2560);}

.slideshow {width: 100%; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0.2) 100%); padding: 3em 5em;}
.slideshow .slick-dots {left: 0; bottom: 30px;}
.slideshow .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;}
.slideshow .slick-dots li.slick-active button:before {color: white;}
.slideshow .slick-dots li button:before {color: white;}
.slideshow .item-slick {width: 100%; display: flex !important; justify-content: flex-start; align-items: center; flex-direction: row;}
.slideshow .item-slick .content-item:nth-child(1) {width: 100%; height: 100%; display: contents;}
.slideshow .item-slick .content-item:nth-child(2) {margin-left: 30px;}
.slideshow .item-slick .content-item h1 {font-size: 2.0rem; line-height: 1.1; margin-top: 0.4rem;}
.slideshow .item-slick .content-item p {font-size: 1.0rem; line-height: 1.3; margin-top: 0.6rem;}
.slideshow .item-slick .content-item img {width: 250px; height: 250px; margin: 0;}
.slideshow .slick-current {padding-bottom: 0px;}
.slideshow .slick-arrow {position: absolute; z-index: 3;}
.slideshow .slick-next, .slideshow .slick-prev {width: 30px; height: 30px; border-radius: 50%;}
.slideshow .slick-next {right: 5px;}
.slideshow .slick-prev {left: 5px;}
.slideshow .slick-list {width: 95%; text-align: center; margin-right: auto; margin-left: auto;}
.slideshow .slick-prev:before, .slideshow .slick-next:before {color: #626262; font-size: 30px;}

main .slick-dotted.slick-slider {margin-bottom: 0px;}
main .slider-precision ul {bottom: 0%;}
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-current {padding-bottom: 0px;}
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;}

.flex-center {display: flex; align-items: center; justify-content: center;}
.black-box {background-color: #000000ab; padding: 2rem;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.btn-soon {text-decoration: none; color: #FFF; background-color: #818181;	letter-spacing: 1.5px; font-size: 17px;	padding: 12px 25px;	border-radius: 5px;	-moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid rgba(0,0,0,0.3);	border-bottom-width: 3px;	text-shadow: 1px 1px 2px rgba(0,0,0,0.5); cursor: pointer;}
.btn-soon:hover:not(.btn-soon.ac) {background-color: #6c6c6c;	border-color: rgba(0,0,0,0.5);}
.ac {background-color: #3e3e3e; border-color: rgba(0,0,0,0.9);}
.uc {text-transform: uppercase;}
.comingSoon {font-size: 5rem; line-height: 0.9; margin: 3rem auto -4rem;}
footer p {margin-bottom: auto;}

main .section-icx3 .scontainer {max-width: 1600px;}
.explosion {width: 100%; padding: 5px 0rem 50px 0rem; overflow: hidden; box-sizing: border-box; transition: 0.5s; height: initial;}
.explosion * {box-sizing: border-box;}
.explosion-box {width: 100%;}
.explosion-box p, .explosion-box table {width: 70%; margin-right: auto; margin-left: auto; text-align: center; color: #eee; transition: 1s;}
.explosion-box p {width: 70%; max-width: 850px; margin-right: auto; margin-left: auto; min-height: 100px; margin-bottom: 50px; padding: 10px; position: relative; z-index: 5;	font-size: 1.15rem;}
.explosion-box table {width: 100%; border-collapse: collapse; border: solid 1px #444;}
.explosion-box table tr {border-bottom: solid 1px #444;}
.explosion-box table td {padding: 10px; border-left: solid 1px #444; text-align: left;}
.explosion-box table th {padding: 10px 20px; font-size: 1.6rem;}

.pictures {position: relative; margin-right: auto; margin-left: auto; width: 100%; height: 470px; font-size: 1.15rem;}
.pictures .pic {width: 26%; display: inline-block; vertical-align: top; position: absolute; transition: 1.5s; transform-origin: center;}
.pictures .pic img {transition: 1s; filter: brightness(1); transform: scale(1); width: 100%;}
.pictures .number {border: solid 1.2px; width: 30px; height: 30px; text-align: center; border-radius: 50%; color: #5e78eb; font-size: 1.25rem; line-height: 27px;}
.pictures ul {margin: 0px; padding: 0px; height: 100%; position: absolute; left: 31%; top: -33%;}
.pictures .line {height: 45%; border-left: solid 2px #5e78eb;}
.pictures .description {color: #eee; font-weight: bold; cursor: pointer; color: #fff; background-color: rgba(0, 0, 0, 0.8); padding: 2px 8px; font-size: 13px; line-height: 16px;}
.pictures .description pre {white-space: pre-wrap;}
.pictures .data {padding: 8px; color: #fff; position: absolute; width: 500px;  top: -40%; background-color: #5e78eb;}

.bombIcon1 {position: absolute; width: 45px; top: -1px; left: -33px;}
.bombIcon2 {position: absolute; width: 45px; top: -1px; left: -33px;}
.bombIcon3 {position: absolute; width: 45px; top: -1px; left: -33px;}
.bombIcon4 {position: absolute; width: 45px; top: -1px; left: -33px;}
.bombIcon5 {position: absolute; width: 45px; top: -1px; left: -33px;}
.bombIcon6 {position: absolute; width: 45px; top: -1px; left: -33px;}
.bombIcon7 {position: absolute; width: 45px; top: -1px; left: -33px;}


.headerImg {display: none;}
.showCarousel {display: block; position: relative; width: 100%; height: calc(100vw * 1222 / 2560); margin-top: calc(-100vw * 1222 / 2560); z-index: 0;}
.showCarousel .wrap {position: absolute; width: 100%; height: calc(100vw * 1222 / 2560); top: 105%; left: 20%; transform: scale(1.0);}
@media (min-width: 2951px) {.showCarousel {display: none;} .headerImg {display: block;}}
@media (min-width: 2751px) and (max-width: 2950px) {.showCarousel .wrap {top: 130%; left: 45%; transform: scale(1.5);}}
@media (min-width: 2551px) and (max-width: 2750px) {.showCarousel .wrap {top: 126%; left: 40%; transform: scale(1.4);}}
@media (min-width: 2351px) and (max-width: 2550px) {.showCarousel .wrap {top: 121%; left: 36%; transform: scale(1.3);}}
@media (min-width: 2151px) and (max-width: 2350px) {.showCarousel .wrap {top: 118%; left: 32%; transform: scale(1.2);}}
@media (min-width: 1951px) and (max-width: 2150px) {.showCarousel .wrap {top: 111%; left: 25%; transform: scale(1.1);}}
@media (min-width: 1751px) and (max-width: 1950px) {.showCarousel .wrap {top: 105%; left: 20%; transform: scale(1.0);}}
@media (min-width: 1551px) and (max-width: 1750px) {.showCarousel .wrap {top: 103%; left: 14%; transform: scale(0.9);}}
@media (min-width: 1351px) and (max-width: 1550px) {.showCarousel .wrap {top: 99%; left: 9%; transform: scale(0.8);}}
@media (min-width: 1151px) and (max-width: 1350px) {.showCarousel .wrap {top: 95%; left: 3%; transform: scale(0.7);}}
@media (min-width:  951px) and (max-width: 1150px) {.showCarousel .wrap {top: 90%; left: -2%; transform: scale(0.55);}}
@media (min-width:  851px) and (max-width:  950px) {.showCarousel .wrap {top: 85%; left: -5%; transform: scale(0.45);}}
@media (min-width:  751px) and (max-width:  850px) {.showCarousel .wrap {top: 82%; left: -7%; transform: scale(0.35);}}
@media (max-width: 750px) {.showCarousel {display: none;} .headerImg {display: block;}}

.showCarousel .wrap #showcase {height: 850px; overflow: visible !important;}
.section-header #nav {text-align: center;}
.section-header #nav > button {width: 64px; height: 36px; color: #666; font: bold 16px arial; text-align: center; margin: 5px; text-shadow: 0px 1px 0px #f5f5f5; background: #f6f6f6; border: solid 2px rgba(0, 0, 0, 0.4); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); cursor: pointer;}
.section-header #nav > button:active, .section-header #nav > button.down {background: #dfdfdf; border: solid 2px rgba(0, 0, 0, 0.6); box-shadow: none;}


@media (min-width:1800px) and (max-width:1950px) {
  /* .showCarousel {display: block;}
  .headerImg {display: none;} */
}
@media (min-width: 1251px) {
  main .section-icx3 {background: center / cover no-repeat url("./icx_bg.jpg");}
  main .icx-icons {max-width: 240px;}
}
@media (max-width: 1200px) {
  .pictures ul {top: -45%;}
  .explosion {padding-top: 0px;}
}
@media (max-width: 1000px) {
  main .section-nv > div > div.row.flex-center > div:nth-child(1) {margin-right: -2rem;}
  .pictures {margin-bottom: 0px;}
  .pictures .pic {width: 30%;}
  .pictures .line {height: 70%;}
  .pictures ul {left: 80%; top: -13%;}
  .explosion-box {margin-top: 0px; padding-bottom: 0px; background: radial-gradient(50% 21%, 75% 30%, #ccc 0%, #000000 70%); background: -moz-radial-gradient(50% 21%, 75% 30%, #ccc 0%, #000000 70%); background: -webkit-radial-gradient(50% 21%, 75% 30%, #ccc 0%, #000000 70%); background: -o-radial-gradient(50% 21%, 75% 30%, #ccc 0%, #000000 70%); background: -ms-radial-gradient(50% 21%, 75% 30%, #ccc 0%, #000000 70%);}
  .bombIcon1, .bombIcon2, .bombIcon3, .bombIcon4, .bombIcon5, .bombIcon6, .bombIcon7 {display: none;}
}
@media (max-width: 800px) {
  .flex-center {display: block;}
  main .section-nv > div > div.row.flex-center > div:nth-child(1) {margin-right: 0rem;}
  main .section-nv > div > div.row.flex-center > div:nth-child(2) > img {width: 75%;}
  main .section-nv .nvFont1 {line-height: 2.0rem; text-align: center;}
  main .section-nv .nvFont2 {line-height: 1.5rem; text-align: center;}
  .slideshow .item-slick {display: block !important;}
  .slideshow .item-slick .content-item h1 {font-size: 1.6rem; line-height: 1.1; margin-top: 0.4rem; letter-spacing: -1.3px;}
  .slideshow .item-slick .content-item p {font-size: 1.0rem; line-height: 1.2; margin-top: 0.6rem;}
  .slideshow .item-slick .content-item img {margin: 0 auto;}
  main .section-performance .col-4 {width: 46%;}
  main .section-performance .row p {margin: 10px 30px;}
  main .section-nv .row.flex-center .col-6:nth-child(2) img {transform: scale(1.0);}
  .comingSoon {font-size: 3rem; line-height: 1.0; margin: 3rem auto -2rem;}
}
@media (max-width: 550px) {
  main section:not(.section-header, .section-performance) {padding: 30px 0;}
  main img.icx3-img {width: 75%;}
  .slideshow {padding: 3em 1em;}
  .explosion {padding: 0px 2rem 0px 2rem;}
  .explosion-box {background: radial-gradient(50% 21%, 75% 25%, #ccc 0%, #000000 70%); background: -moz-radial-gradient(50% 21%, 75% 25%, #ccc 0%, #000000 70%); background: -webkit-radial-gradient(50% 21%, 75% 25%, #ccc 0%, #000000 70%); background: -o-radial-gradient(50% 21%, 75% 25%, #ccc 0%, #000000 70%); background: -ms-radial-gradient(50% 21%, 75% 25%, #ccc 0%, #000000 70%); padding-top: 100px;}
  .explosion-box table {margin-top: 10px; font-size: 1.15rem; line-height: 1.4rem;}
  .pictures .pic {width: 60%;}
  .pictures ul {left: 90%;}
}
@media (max-width: 450px) {
  main .slider-precision ul.slick-dots {bottom: 0px !important;}
}