/* This page
-------------------------------------------------- */
html, body {height:100%;scroll-behavior: smooth;}
body {background-color:#fff;color:#000;text-align:left;font-family:"Open Sans", Arial, Helvetica, sans-serif;font-weight:400;line-height:1.5em;font-size:18px;}
h1, h2, h3, h4, h5 {font-family:"Open Sans", Arial, Helvetica, sans-serif; margin-top:0.5em;}
h1 {
  font-size:2.7rem;
  font-weight:800;
  line-height:1.3em;
  margin-bottom:0.5em;
  text-transform:uppercase;
}
h2 {
  font-size:1.8em;
  font-weight:700;
  margin-bottom:0.5em;
  text-transform:uppercase;
}
h3 {
  font-size:1.2em;
  font-weight:600;
  text-transform:uppercase;
}

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center; 
  justify-content: center;
  flex-direction: column;
}

.btn-candy {
	display: inline-block;
    width: 100%;
	max-width:350px;
	color: #000;
    margin-top: 2em;
    padding: 0.4em 1em;
	position: relative;
	text-align:left;
	text-decoration:none;
	background-color: #fff;
}
a.btn-candy:hover {
	color: #000;
	text-decoration:none;
}
.btn-candy .cta-lable {
	color: #000;
    font-weight: 700;
	font-size:0.8em;
}
.btn-candy:after {
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 8px;
	border-color: transparent transparent transparent #000;
	position: absolute;
	right:1em;
	top: calc(50% - 6px);
}

#info ul h5 {font-size:1.6em;font-weight:400;color:#656b7b;}

/* Hero Page
-------------------------------------------------- */
#heropage {
	font-size:20px;
	padding:0;
	background: url("../pic/trans.webp") center top no-repeat;
	background-size:cover;
}
#heropage .row {
	overflow:hidden;
	position:relative;
	width:100%;
	height: 85vh;
	min-height: 50vw;
	margin:0;
	padding:0;
}
#heropage .txt {
	margin-top:-20%;
}
#heropage .headline-deco {
	border-top:7px solid #e03c31;
	border-bottom:7px solid #ffc72c;
	max-width: fit-content;
	padding: 8px 0 10px 0;
}
#heropage h1,
#heropage h2 {
	color:#fff;
	margin-top:0;
	text-shadow: 0.1em 0.1em 0.15em black;
}
#heropage h1 {
	font-weight:700;
	margin-bottom:0.2em; 
}
#heropage h2 {
	font-weight:500;
    font-size:1.2em;
	margin-bottom:0; 
}

/* Head banner
-------------------------------------------------- */
.full-banner {
	width:100%;
	background-color:#000;
	color:#fff;
	text-align:center;
	padding:3em 1em 3em 1em;
}
.full-banner p {
	color:#eee;
}

/* Intro
-------------------------------------------------- */
.intro {
	padding: 2em 3em 2em 3em;
}
.intro p {
	font-size:16px;
}


/* lineup
-------------------------------------------------- */
.lineup {
	padding: 0 3em 2em 3em;
}
.lineup:before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #eee;
	display: block;
}
.lineup .model-series {
	border-left: 8px solid #e03c31;
	padding-left:0.8em;
}
.lineup h2 {
	margin-bottom: 0;
}
.lineup h2 sub {
	bottom:0;
	text-transform:none;
}
.lineup h3 {
	margin-top: 0.2em;
}
.lineup .fitment {
	font-size: 0.8em;
	max-width: fit-content;
	background-color: #ffc72c;
	padding: 0.1em 1.5em 0 0.3em;
	min-height: 3.3em;
}
.lineup .fitment:before {
	content:"FIT";
	color:#fff;
    float: left;
	font-size: 3em;
	font-weight:700;
	margin-top: 0.2em;
}
.lineup .model-series .fit-note {
	color: #ff0000;
	font-size: 0.8em;
	font-style: italic;
	line-height: 1.2em;
    margin-bottom: 0.5rem;
}
.lineup .model-series .fit-note a {
	text-decoration: underline;
}
.lineup .fitment p {
	padding-inline-start: 4.8em;
	margin-bottom: 0;
	line-height: 1.3em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}
.lineup .fitment p a {
	text-decoration: underline;
}
.lineup .desc {
	font-size: 0.8em;
	line-height: 1.3em;
}

.lineup .items {
	margin-bottom: 5em;
}

.lineup .mirror-title {
	padding-inline-start: 18px;
	display: block;
	position: relative;
}
.lineup .mirror-title:before {
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 8px;
	border-color: transparent transparent transparent #e03c31;
	position: absolute;
	left:0;
	top: calc(50% - 6px);
}
.lineup .mirror-title,
.lineup .mirror-btn {color: inherit;}
.lineup .mirror-title:hover {text-decoration: underline;}
.lineup .mirror-desc {
	
}
.lineup .mirror-btn-block {
	margin-top: 2em;
	border: 1px solid #000;
	max-width: fit-content;
}
.lineup .mirror-btn-block div {
	padding: 0.7em 2em 0.7em 1em;
	border-right: 7px solid #e03c31;
	background-color: #fff;
	color: #000;
}
.lineup .mirror-btn {
	font-size: 1rem;
	vertical-align: middle;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.lineup .mirror-btn:hover .mirror-btn-block div {
	transition: 0.2s ease-in-out;
	background-color: #ffeb90;
}
.lineup .mirror-btn:hover {text-decoration: none;}



/* Guide
-------------------------------------------------- */
#guide {
	width:100%;
	background-color:#eaeef1;
	color:#000;
	text-align:center;
	padding:6em 1em 6em 1em;
}

#guide ul {
	margin: 0 auto;
    width: fit-content;
	list-style-type: square;
}
#guide ul a {
	text-align: left;
	text-decoration: underline;
}
#guide ul li {
	line-height: 2em;
}

/* Action
-------------------------------------------------- */
#action {
	color:#e2e2e2;
	text-align:center;
	background: url("../pic/action-KiWAV-mirrors-on-Can-Am-xl.webp") center top no-repeat;
	background-size:cover;
}
#action,
#action .container,
#action .row {min-height: 30vw;}

#action h1 {color: #fff;}


/* Info
-------------------------------------------------- */
#info {height:auto;color:#858c9d;background-color: #242629;}
#info ul h5 {color:#fff;}
#info ul li a {color:#82aad2;}
#info strong {color:#a6acba;}


/* effect
-------------------------------------------------- */
section {transition:all 500ms ease-out;}
.fade-ani{opacity:0;position:relative;}
.fade-up{bottom:-50px;}
.fade-up.showing{bottom:0px;opacity:1;}




/* Responsive
-------------------------------------------------- */
/*Users in some browsers/operating systems can express their preference for reduced motion effects with the Reduce Motion API. We can listen for that setting in our CSS, and turn off smooth scrolling for them.*/
@media screen and (prefers-reduced-motion: reduce) {
	html {scroll-behavior: auto;}
}
/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 767.98px) {
	.btn-candy {margin-top:1em; max-width:80%;}
	
	#heropage .align-items-center {-ms-flex-align:start!important;align-items:start!important}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 150vw;}
	#heropage {background-image: url("../pic/hero-KiWAV-mirrors-on-Can-Am-xs.webp");}
	#heropage .txt {margin-top:80px;}
	#heropage h1, #heropage h2 {text-align:center; margin-bottom:0;}
	#heropage h2 {text-transform:none; margin-top:0.5em;}
	
	.intro, .lineup {padding-left:1em; padding-right:1em;}
	
	.block-array {margin-bottom:1em;padding-bottom:10px;}
	.block-array img {width:40%;height: 40%;margin-bottom:0;}
	#action, #action .container, #action .row {min-height: 140vw;}	
	#action {background-image: url("../pic/action-KiWAV-mirrors-on-Can-Am-xs.webp");}
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {max-width: 900px;}
	
}
/* 為了 LCP另寫*/
@media (min-width: 768px) and (max-width: 1280.98px) {
	#heropage {background: url("../pic/hero-KiWAV-mirrors-on-Can-Am-lg.webp")}
	
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1281px) {
	h2 {font-size:1.9em;}
	#heropage {background-image: url("../pic/hero-KiWAV-mirrors-on-Can-Am-xl.webp");}
	#heropage .row {min-height: 40vw;}
	#heropage h1 {font-size:2.6rem;}
	#heropage h2 {font-size:1.8rem;}
	.intro, .lineup {padding-left:6em; padding-right:6em;}
}

@media (min-width: 1680px) {	
	.intro, .lineup {padding-left:12em; padding-right:12em;}
}