@charset "UTF-8";
@font-face {
	font-family: 'Titillium Web';
	src: url('../fonts/TitilliumWeb-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'AORUS';
    src: url('../fonts/AORUS-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'Aldrich';
    src: url('../fonts/Aldrich-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'NotoSans R';
    src: url('../fonts/NotoSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'NotoSans TC R';
    src: url('../fonts/NotoSansTC-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
body {
	color: white;
	background: black;
	overflow-x: hidden;
}
.clear:after {
	content:'';
	display:table;
	clear:both
}
.dropShadow, aside {
	display: inline-block;
	width: 100%;
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, .5));
}
img {
	max-width: 100%;
	height: auto;
}

/*------------- Scrollbar -------------*/

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-button{width:0;height:0}
::-webkit-scrollbar-thumb{background: #555555;border:0 none #fff}
::-webkit-scrollbar-thumb:hover{background:gray}
::-webkit-scrollbar-thumb:active{background:gray}
::-webkit-scrollbar-track{background:#000;border:0 none #fff;border-radius:50px}
::-webkit-scrollbar-track:hover{background:#000}
::-webkit-scrollbar-track:active{background:#333}
::-webkit-scrollbar-corner{background:transparent}

/*------------- Fonts -------------*/

a {
	color: white;
	text-decoration: none;
	cursor: pointer !important;
	outline: none !important;
}
ol {
	margin-left: 25px;
}
ol li {
	list-style: square;
}
.mainContent>* {
	font-family: 'Titillium Web', 'NotoSans R',  "微軟正黑體", Microsoft JhengHei !important;
	font-weight: 400;
}
.fontAORUS {
	font-family: 'AORUS', 'NotoSans R',  "微軟正黑體", Microsoft JhengHei !important;
}
.fontAldrich {
	font-family: 'Aldrich', 'NotoSans R',  "微軟正黑體", Microsoft JhengHei !important;
}
.more {
    font-size: 1.15rem;
    line-height: 1.15rem;
	font-weight: 600;
	margin-top: 1rem;
    padding: 8px 16px;
    background: #34FFBE;
    color: black;
	/* border-radius: 5px; */
	border: 1px solid transparent;
	transition: all 0.25s;
}
.more i {
	position: relative;
	display: inline-block;
	content: '';
	width: 9px;
	height: 16px;
	top: 3px;
	margin-left: 8px;
	background: url(../images/icon-arrow.svg) center / contain no-repeat;
	transition: all 0.25s;
}
.more:hover {
	color: #34FFBE;
	background: rgba(0, 0, 0, .2);
	border-color: #34FFBE;
}
.more:hover i {
	background: url(../images/icon-arrow-hover.svg) center / contain no-repeat;
}
.Models .more {
	color: #ff6400;
	border-color: #ff6400;
	background: transparent;
	margin-right: 5px;
}
.Models .more i {
	background: url(../images/icon-arrow-orange.svg) center / contain no-repeat;
}
.buy {
	font-size: 1.15rem;
    line-height: 1.15rem;
	font-weight: 600;
	margin-top: 1rem;
    padding: 8px 16px;
    background: #ff6400;
    color: white;
	border-radius: 5px;
	border: 1px solid #ff6400;
	transition: all 0.25s;
}
.buy i {
	position: relative;
	display: inline-block;
	content: '';
	width: 16px;
	height: 16px;
	top: 3px;
	margin-left: 8px;
	background: url(../images/icon-buy.svg) center / contain no-repeat;
	transition: all 0.25s;
}
.colorWhite {
	color: white;
}
.colorBlue {
	color: #46E6E6;
}
.colorGray {
	color: #d1d1d1;
}
.colorOrange {
	color: #ff6400;
}
.textShadow {
	text-shadow: 1px 1px 0px black, 2px 2px 5px rgba(0,0,0,.7);
}
.textLeft {
	text-align:left !important
}
.textRight {
	text-align:right !important
}
.textCenter {
	text-align:center !important
}
.textUppercase {
	text-transform: uppercase;
}

/*------------- Section -------------*/

section, .section .inner {
	position: relative;
}
.displayFlex {
	display: flex;
	justify-content: center;
	align-items: center;
}
.directionColumn {
	flex-direction: column;
}
.directionRow {
	flex-direction: row;
}
.section {
	width: 100%;
	overflow: hidden;
	z-index: 1;
}
.section .inner {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
.headingProducts {
	padding: 50px 0;
}

/*------------- Background -------------*/

.hero__background {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: -1;
}
.bgIMG {
	width: 100%;
	min-height: 250px;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.bgIMG img, .bgIMG video {
	position: absolute;
	left: 50%;
	top: 50%;
	min-width: 100%;
	width: auto;
	max-width: none;
	min-height: 100%;
	height: auto;
	max-height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	z-index: -2;
}

/*------------- Features -------------*/

.feature_format {
	position: relative;
}
.feature_format .intro {
	font-size: 1.2rem;
	margin: 1rem auto;
}
.feature_bgIMG {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.feature_bgIMG::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.2) 70%,rgba(0,0,0,1) 100%);
	z-index: -1;
}
.feature_bgIMG img {
	position: absolute;
	left: 50%;
	top: 0;
	width: 100%;
	min-width: 100%;
	width: auto;
	max-width: none;
	height: auto;
	max-height: 100%;
	object-fit: cover;
	transform: translateX(-50%);
	opacity: .5;
	z-index: -2;
}
.feature_format_inner {
	width: 98%;
	max-width: 1920px;
	position: relative;
	z-index: 1;
	margin: 50px auto 100px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.feature_intro {
	max-width: 1200px;
	margin: 0 auto;
}
.iconThermal {
	width: 450px;
	max-width: 70%;
	margin-bottom: 1rem;
}
.slick-slider-features {
	width: 100%;
	max-width: 1600px;
	margin: 60px auto 1rem auto;
}
.slick-slider-features .slide {
	min-height: 360px;
	overflow: hidden;
}
.card::before, .card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
}
.card::before {
    padding: 1px;
    background: linear-gradient(135deg,#FFFFFF, #FEB6FF, #8584FF, #6FA4FF, #7AFFFD);
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    z-index: -1;
}
.card::after {
	background: rgba(0, 0, 0, .5);
	-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	z-index: -2;
}
.GiMATE .slick-slider-features .slide {
	min-height: 410px;
}
.Card_features_content {
	position: relative;
	margin-top: 1rem;
    justify-content:flex-start;
    align-items:flex-start;
}
.logoGiMATE {
	width: 60px;
	margin-bottom: 1rem;
}
.slick-initialized .slick-slide {
    padding: 10px;
}
.slide .img_container {
	position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 300px;
    max-width: 100%;
    border-radius: 10px;
	margin-bottom: 1rem;
}
.slide .img_container img {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 105%;
    max-width: none;
    max-height: 105%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

/*------------- Models -------------*/

.Models {
	padding: 100px 0 0 0;
}
.Models .feature_format_inner {
	max-width: 1200px;
}
.ModelsNameA, .BuyInfo h3 {
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: 1px;
	font-weight: 700;
}
.ModelsNameB {
	font-size: 1.2rem;
	line-height: 1.5rem;
	margin-bottom: 2rem;
	font-weight: 600;
	display: inline-block;
	/* text-align: center; */
}
.Models ol li {
	margin-bottom: .5rem;
}
.Models ol li:last-child {
	margin-bottom: 0;
}
.slick-slider-models {
	max-width: 1200px;
	margin: 10px auto;
}
.slick-slider-models hr {
	border: none;
	height: 1px;
	background: linear-gradient(135deg, #FFFFFF, #FEB6FF, #8584FF, #6FA4FF, #7AFFFD);
	margin: 1.5rem auto;
}
.slick-slider-models .spec {
	margin-bottom: 1rem;
}
.slick-slider-models .price p {
	color: #d1d1d1;
	font-size: 13px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	min-height: 20px;
}
.slick-slider-models .price p strong {
	color: white;
	font-size: 2rem;
	line-height: 2rem;
	font-weight: 700;
}
.btn_group {
	position: relative;
	margin: 30px auto;
}
.btn_group a {
	display: inline-block;
	white-space: nowrap;
}

/*------------- W2B -------------*/

.BuyInfo {
	background: #333;
	width: 95%;
	max-width: 1200px;
}
.BuyInfo h3 {
	margin-bottom: 1rem;
}
.BuyInfo .etailer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
}
.BuyInfo a {
	position: relative;
	display: flex;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 100px;
	margin: 1%;
	background: white;
	/* border: 1px solid; */
}
.BuyInfo a img {
	position: absolute;
	left: 50%;
	top: 50%;
	min-width: auto;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
}
.fancybox__carousel.is-draggable .fancybox__slide, .fancybox__carousel.is-draggable .fancybox__slide .fancybox__content {
    cursor: default !important;
}

/*------------- go top -------------*/

.scrollup {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: 0;
    width: 45px;
    height: 45px;
	color: white;
    background: #333;
    line-height: 45px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
	display: none;
}
.scrollup:hover {
	background: #ff6400;
}
.goTopIcon {
	position: relative;
	top: 3px;
	width: 80%;
	fill: none;
	stroke: white;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 8px;
}

/*------------- Slider -------------*/

.slick-slider {
	position: relative
}
.slick-slide img {
	display: inline-block;
}
.slick-arrow, .slick-arrow::after {
	content: '';
	position: absolute;
	display: inline-block;
	top: 50%;
	transform: translateY(-50%);
	width: 45px !important;
	height: 45px !important;
}
.slick-arrow {
	top: 50%;
	transform: translateY(-50%);
	border: none;
	font-size: 0;
	z-index: 10;
	cursor: pointer;
}
.slick-arrow::after {
	position: absolute;
	content: '';
	width: 10%;
	height: 10%;
	top: 50%;
	left: 50%;
	background-color: white;
	clip-path: polygon(100% 3px, 3px 3px, 3px 100%, 0 100%, 0 0, 100% 0);
	transform: translate(-50%, -50%)rotate(-45deg);
}
.slick-arrow:hover::after, .Explore .slick-arrow::after {
	background-color: #46E6E6;
}
.slick-arrow.slick-prev {
	left: 0
}
.slick-arrow.slick-next {
	right: -20px;
	-webkit-transform: translate(-50%, -50%)rotate(180deg);
	transform: translate(-50%, -50%)rotate(180deg);
}
.slick-arrow::after {
	width: 70% !important;
	height: 70% !important;
}
.Card_features .slick-arrow {
	width: 30px !important;
	height: 30px !important;
}
.Card_features .slick-arrow::after {
	width: 30% !important;
	height: 30% !important;
}
.slick-disabled {
	opacity: .2;
}
.slick-slider-articles {
	max-width: 1750px;
	margin: 0 auto;
}
.slick-slider-articles a {
	display: inline-block;
}
.slick-slider-articles a:hover {
	color: #46E6E6;
}
.slick-slider-articles .img_container img,.slick-slider-articles .img_container i,.slick-arrow::after, .recentCard img, .recentCard:hover .iconPlay, .launchVideo h3, .launchVideo img, aside, .btn_more, .Models_More, .launchVideo i, .feature_Video:hover i, .feature_Video:hover i::before, .feature_Video:hover i::after {
	transition: all .15s;
}
.slider-articles a:hover .img_container .iconPlay, .recentCard:hover img, .recentCard:hover .iconPlay, .launchVideo:hover h3, .launchVideo:hover .iconPlay, .slick-slider-articles a:hover .img_container img, .feature_Video:hover i, .feature_Video:hover i::before, .feature_Video:hover i::after {
	transform: translate(-50%, -50%) scale(1.15);
}
.slick-slider-articles .img_container:hover img, .recentCard:hover img, .launchVideo:hover img {
	-webkit-filter: brightness(50%);
	filter: brightness(50%);
}
.slick-slider-articles .headingC {
	font-size: 1.35rem;
    line-height: 1.65rem;
	font-weight: 600;
	color: black;
	display: inline-block;
	width: 100%;
	height: 3.3rem;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 0.5rem;
}
.slick-arrow, .slick-arrow:hover {
	background-color: transparent;
}
@media only screen and (max-width: 1024px) {
	.btn_group {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.btn_group a {
		width: 150px;
		max-width: 80%;
		margin: 0;
	}
}
@media only screen and (max-width: 767px) {
	.scrollup {
		width: 35px;
		height: 35px;
	}
}