/* This page
-------------------------------------------------- */
html, body {height:100%;}
body {background-color:#000;color:#c6c6c6;text-align:left;font-family: 'Source Sans Pro',sans-serif;font-weight:300;line-height:1.5em;font-size:18px;}
h1 {
  font-family: 'Source Sans Pro',sans-serif;
  font-size:2.2rem;
  font-weight:400;
  line-height:1.3em;
  margin-bottom:0.5em;
  color:#fff;
}
h2 {
  font-family: 'Source Sans Pro',sans-serif;
  font-size:2.2em;
  font-weight:400;
  margin-bottom:0.5em;
  color:#fff;
}
h5 {font-size:1.1em;color:#fff;font-weight:400;}
.txt-color {color:#fffb8f !important;}

video, 
#full-video img{
  width: 100%;
  height: auto;
}
#info ul h5 {font-size:1.6em;font-weight:400;color:#656b7b;}

/* Hero Page
-------------------------------------------------- */
#heropage {
	background: url("../images/Arrow/hero-lg.jpg") top left no-repeat;
	background-size: cover;
	opacity: 1;
}
#heropage,
#heropage .container-fliud,
#heropage .row {min-height: 65vw;margin:0;}

#heropage .txt {
	background-color: rgba(0,0,0,0.6);
	margin-bottom:5em;	
	margin-left:5em;
	padding:1em 1em 0.5em 2em;
	
}
#heropage .extrasmall {font-size:50%;}
#heropage .txt a {
	color:#428eff;
}
#heropage .txt a:hover {
	color:#3a8fd8;
}
#heropage .txt a+a {margin-left:4em;}


/* Bright
-------------------------------------------------- */
#bright {
	background: url("../images/Arrow/bright-lg.jpg") bottom left no-repeat;
	background-size: cover;
	margin-top:5px;
}
#bright,
#bright .container,
#bright .row {min-height: 65vw;}

#bright .txt {margin-top:20vw;}


/* Lights
-------------------------------------------------- */
#lights {
	background: url("../images/Arrow/lights-lg.jpg") top left no-repeat;
	background-size: cover;
	text-align:center;
	margin-top:5px;
	min-height: 65vw;
	padding-top:10vw;
}


/* Solid
-------------------------------------------------- */
#solid {
	background: url("../images/Arrow/solid-lg.jpg") center right #1d2125 no-repeat;
	background-size: auto 100%;
	margin-top:5px;
}
#solid,
#solid .container,
#solid .row {min-height: 65vw;}

#solid .txt {text-align:right;margin-top:15vw;}



/* Ground
-------------------------------------------------- */
#ground {
	background: url("../images/Arrow/ground-lg.jpg") top right no-repeat;
	background-size: auto 100%;
	margin-top:5px;
}
#ground,
#ground .container,
#ground .row {min-height: 65vw;}

#ground .txt {text-align:right;margin-top:15vw;}
#ground .align-items-center {-ms-flex-align:start!important;align-items:start!important}



/* Action
-------------------------------------------------- */
#action {
	background: url("../images/Arrow/action-lg.jpg") top center no-repeat;
	background-size: cover;
	margin-top:5px;
}
#action,
#action .container,
#action .row {min-height: 65vw;}

#action .txt {text-align:right;margin-bottom:23vw;}
#action h4 {margin:0;}
#action .extrasmall {font-size:60%;}
.btn-act {color: #fff;background-color: #db3f3f;}
a.btn-act:hover {color: #fff;background-color: #b42835;}


/* 影片
-------------------------------------------------- */
#video {
	margin-top:5px;
}
#video,
#video .container,
#video .row {min-height: 40vw;}
#video img {max-width:100%;}




/* 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
-------------------------------------------------- */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	#heropage {
		margin-top:1em;
		background-image: url("../images/Arrow/hero-xs.jpg");
		background-size: 100% auto;
		background-position:bottom center;
	}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 177vw;}
	#heropage .txt {margin:0 0 1em 0;}
	#bright {background-image: url("../images/Arrow/bright-xs.jpg");background-size:100% auto;}
	#bright, #bright .container, #bright .row {min-height: 177vw;}
	#bright .txt {margin-top:10vw;}
	#lights {background-image: url("../images/Arrow/lights-xs.jpg");background-size:100% auto;background-position:bottom center;min-height: 177vw;}
	#lights .txt {text-align:right;}
	#solid {background-image: url("../images/Arrow/solid-xs.jpg");background-position:bottom center;min-height: 177vw;}
	#solid .txt {text-align:left;}
	#ground {background-image: url("../images/Arrow/ground-xs.jpg");}
	#ground, #ground .container, #ground .row {min-height: 177vw;}
	#ground .txt {text-align:left;margin-top:5em;}
	#ground .align-items-center {-ms-flex-align:center!important;align-items:center!important}
	
	#action {background-image: url("../images/Arrow/action-xs.jpg");}
	#action, #action .container, #action .row {min-height: 177vw;}
	#action .txt {margin-bottom:30vw;text-align:center;}
	#action a.float-right {float:none!important;}
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
	#heropage {
		margin-top:1em;
		background-image: url("../images/Arrow/hero-xs.jpg");
		background-size: 100% auto;
		background-position:bottom center;
	}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 177vw;}
	#heropage .txt {margin:0 0 1em 0;}
	#bright {background-image: url("../images/Arrow/bright-xs.jpg");background-size:100% auto;}
	#bright, #bright .container, #bright .row {min-height: 177vw;}
	#bright .txt {margin-top:10vw;}
	#lights {background-image: url("../images/Arrow/lights-xs.jpg");background-size:100% auto;background-position:bottom center;min-height: 177vw;}
	#lights .txt {text-align:right;}
	#solid {background-image: url("../images/Arrow/solid-xs.jpg");background-position:bottom center;min-height: 177vw;}
	#solid .txt {text-align:left;}
	#ground {background-image: url("../images/Arrow/ground-xs.jpg");min-height: 177vw;}
	#ground, #ground .container, #ground .row {min-height: 177vw;}
	#ground .txt {text-align:left;}
	#ground .align-items-center {-ms-flex-align:center!important;align-items:center!important}
	
	#action {background-image: url("../images/Arrow/action-xs.jpg");}
	#action, #action .container, #action .row {min-height: 177vw;}
	#action .txt {margin-bottom:30vw;text-align:center;}
	#action a.float-right {float:none!important;}
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {max-width: 900px;}
	#heropage {background-image: url("../images/Arrow/hero-md.jpg");}
	#heropage .txt {margin:0 0 1em 1em;}
	
	#bright {background-image: url("../images/Arrow/bright-md.jpg");}
	#lights {background-image: url("../images/Arrow/lights-md.jpg");padding-top:4vw;}
	#solid {background-image: url("../images/Arrow/solid-md.jpg");}
	#ground {background-image: url("../images/Arrow/ground-md.jpg");}
	
	#action {background-image: url("../images/Arrow/action-md.jpg");}
	#action .txt {margin-bottom:14vw;}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1000px) {
	
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1281px) {
	h1 {font-size:2.5rem;}
	#heropage {background-image: url("../images/Arrow/hero-xl.jpg");}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 54vw;}
	#heropage .txt {margin-bottom:10em;margin-left:0;padding:1em 1em 0.5em 10em;}
	
	#bright {background-image: url("../images/Arrow/bright-xl.jpg");}
	#bright, #bright .container, #bright .row {min-height: 54vw;}
	#bright .txt {margin-top:15vw;}
	
	#lights {background-image: url("../images/Arrow/lights-xl.jpg");background-size:100% auto;min-height: 54vw;}
	#solid {background-image: url("../images/Arrow/solid-xl.jpg");}
	#solid, #solid .container, #solid .row {min-height: 54vw;}
	#ground {background-image: url("../images/Arrow/ground-xl.jpg");}
	#ground, #ground .container, #ground .row {min-height: 54vw;}
	
	#action {background-image: url("../images/Arrow/action-xl.jpg");}
	#action, #action .container, #action .row {min-height: 54vw;}
	#action .container {width:90%;max-width:90%;}
	#action .txt {margin-bottom:18vw;}
}