@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
@font-face {
	font-family: 'ROGFontsv';
	src: url('../fonts/ROGFontsv1.5-Regular.otf'),
		 url('../fonts/ROGFontsv1.5-Regular.otf') format('embedded-opentype'),
		 url("../fonts/ROG Fonts v1.6.1.ttf") format("opentype");
	font-weight: normal;
	font-style: normal
}
@font-face {
	font-family: 'Xolonium';
	src: url('../fonts/xolonium-Regular.otf'),
		 url("../fonts/xolonium-Regular.ttf"),
		 url("../fonts/xolonium-regular.eot");
	font-weight: normal;
}
@font-face {
	font-family: 'Xolonium';
	src: url('../fonts/Xolonium-Bold.otf'),
		 url("../fonts/Xolonium-Bold.ttf");
	font-weight: bold;
}
/*-----RESET---------*/
	html,
	body {
		margin: 0;
		background-color: #000;
		color: #FFF;
	}
	#hd {background: black; }
	::selection {
		background: #1d2124;
		color: #CE0000;
	}
	::-moz-selection {
		background: #1d2124;
		color: #ffffff;
	}
	#hd * {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		word-wrap: break-word;
		word-break: break-word;
	}
	#hd figure{
		padding:0;
		margin:0;
	}
	#hd img {
		max-width: 100% !important;
		height: auto;
		border: none;
	}
	#hd img.lazyLoad{opacity: 0;}
	#hd a {
		font-family: 'Roboto Condensed', sans-serif;
		font-size: 1.05rem;
		text-decoration: none;
		color: #920000;
		font-weight: 600;
		transition: all 0.8s ease 0s;
		-webkit-transition: all 0.8s ease 0s;
		-moz-transition: all 0.8s ease 0s;
		-ms-transition: all 0.8s ease 0s;
		-o-transition: all 0.8s ease 0s;
	}
	#hd a:hover {
		text-decoration: none;
		color: #d30000;
	}
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6 {
		font-family: 'xolonium', sans-serif;
		color: #FFF;
		line-height: 1.4rem;
		margin: 0;
		font-weight: normal;
	}
	#hd p {
		font-family: 'Roboto Condensed', sans-serif;
		font-size: 1rem;
		font-weight: 300;
		letter-spacing: .5px;
		line-height: 1.25;
		margin: 0;
		padding-bottom: 30px;
		color: #FFF;
	}
	#hd b {
		display: block;
		font-size: 1.05rem;
		font-weight: 400;
		letter-spacing: 0.5px;
	}
	#hd small {
		font-family: 'Roboto Condensed', sans-serif;
		font-size: 12px;
		line-height: 20px;
		font-weight: 300;
		letter-spacing: 1px;
	}
	#hd ul {
		font-family: 'Roboto Condensed', sans-serif;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#hd ul li {
		font-family: 'Roboto Condensed', sans-serif;
		font-size: 1rem;
		color: #FFF;
	}
	#hd a.hd-link {
		color: #c60012;
		font-size: inherit;
		text-decoration: underline;
		font-weight: 400;
	}
	#hd a.hd-link:hover {
		color: white;
		opacity: 1;
	}
/*-----TXT-----------*/
	#hd h2 {
		font-family: 'xolonium', sans-serif;
		font-weight: 300;
		letter-spacing: 0;
		font-size: 3rem;
		line-height: 1.25;
		padding-bottom: 45px;
		color: #ffffff !important;
	}
	#hd h3 {
		font-family: 'xolonium', sans-serif;
		font-size: 1.85rem;
		line-height: 1.25;
		letter-spacing: 0;
		margin-bottom: 30px;
		text-transform: uppercase;
	}
	#hd h4 {
		font-family: 'xolonium', sans-serif;
		font-weight: 300;
		font-size: 1.35rem;
		line-height: 1.25;
		letter-spacing: 1px;
		text-transform: none;
		text-align: left;
		margin-top: 0;
		margin-bottom: 5px;
	}
	#hd .txt-center {text-align: center; }
	#hd .txt-right {text-align: right; }
	#hd .txt-left {text-align: left; }
	#hd .txt-red {
		color: #c60012;
		font-weight: 400;
	}
	#hd .txt-grey {
		color: #808080;
		font-weight: 400;
	}
	#hd .hd-btn{
		display: block;
		font-family: 'xolonium', sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 35px;
		text-align: center;
		width: 100%;
		height: 35px;
		max-width: 200px;
		background-color: #282828;
		color:#fafafa;
		margin:10px auto 20px;
		cursor: pointer;
		position: relative;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd .hd-btn:before{
		content:'';
		display: block;
		position: absolute;
		top: -2px;left: -2px;
		z-index: -1;
		background: #cdcdcd;
		background: -moz-linear-gradient(left, #cdcdcd 0%, #999999 50%, #cdcdcd 100%);
		background: -webkit-linear-gradient(left, #cdcdcd 0%,#999999 50%,#cdcdcd 100%);
		background: linear-gradient(to right, #cdcdcd 0%,#999999 50%,#cdcdcd 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcdcd', endColorstr='#cdcdcd',GradientType=1 );
	}
	#hd .hd-btn:before{
		width:calc(100% + 4px);
		max-width: 204px;
		height: 39px;
	}
	#hd .hd-btn:hover{
		color:#161616;
		-webkit-transform: translateY(-2px);
		   -moz-transform: translateY(-2px);
		    -ms-transform: translateY(-2px);
		     -o-transform: translateY(-2px);
		        transform: translateY(-2px);
	}
/*-----BLOCK---------*/
	#hd .w95 {
		width: 94%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w480on{display: none;}
	#hd .w1000,
	#hd .w1200,
	#hd .w1300 {
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1000 {max-width: 1000px; }
	#hd .w1200 {max-width: 1200px; }
	#hd .w1300 {max-width: 1300px; }
	#hd .col25,
	#hd .col40,
	#hd .col45,
	#hd .col50,
	#hd .col55,
	#hd .col60 {
		display: inline-block;
		margin-left: -5px;
		vertical-align: middle;
	}
	#hd .col25 {width: 25%; }
	#hd .col45 {width: 45%; }
	#hd .col50 {width: 50%; }
	#hd .col55 {width: 55%; }
	#hd .col60 {width: 60%; }
	#hd .col40 {width: 40%; }
	#hd .fleft {float: left; }
	#hd .fright {float: right; }
	#hd .hd-rtl {direction: rtl; }
	#hd .hd_width {width: 100%; display: block;}
	#hd .hd-w768on {display: none; }
/*-----SCROLL UP-----*/
	#hd #scrollUp {
		position: fixed;
		right: 30px;
		bottom: 30px;
		width: 45px;
		height: 45px;
		text-align: center;
		cursor: pointer;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border: 2px solid #8D0000;
		z-index: 999;
		opacity: 0;
	}
	#hd #scrollUp.hd-show {
		opacity: 1;
	}
	#hd #scrollUp:hover {
		background-color: #8D0000;
	}
	#hd #scrollUp:hover svg {
		fill: #FFF;
	}
	#hd #scrollUp svg {
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 5px;
		left: 0;
		fill: #8D0000;
		-webkit-transform: rotateZ(270deg);
		-moz-transform: rotateZ(270deg);
		-ms-transform: rotateZ(270deg);
		-o-transform: rotateZ(270deg);
		transform: rotateZ(270deg);
	}
/* ---------- lightbox ------- */
	#hd_lightbox {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: none;
		z-index: 100000;
	}
	#hd .hd_filter {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .7);
	}
	#hd .hd_box {
		width: 1000px;
		height: 480px;
		background: #232323;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		padding: 35px 60px;
		box-sizing: border-box;
	}
	#hd .hd_close {
		position: absolute;
		top: 25px;
		right: 20px;
		cursor: pointer;
	}
	#hd .hd_close>span {
		display: block;
		width: 20px;
		height: 3px;
		background: #777777;
		-webkit-border-radius: 1.5px;
		-moz-border-radius: 1.5px;
		border-radius: 1.5px;
	}
	#hd .hd_close>span:first-child {
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		transform: rotateZ(45deg);
	}
	#hd .hd_close>span:last-child {
		-webkit-transform: rotateZ(-45deg) translate(2px, -2px);
		-moz-transform: rotateZ(-45deg) translate(2px, -2px);
		-ms-transform: rotateZ(-45deg) translate(2px, -2px);
		-o-transform: rotateZ(-45deg) translate(2px, -2px);
		transform: rotateZ(-45deg) translate(2px, -2px);
	}
	#hd .hd_box>img {
		position: absolute;
		right: 40px;
		bottom: 60px;
	}
	#hd .hd_box iframe {
		width: 100%;
		height: 100%;
	}
/*-----mediashow-----*/
	#hd #mediashow {
		position: relative;
		overflow: hidden;
		text-align: center;
		z-index: 1;
	}
	#hd #mediashow .mediashow__first {
		position: relative;
		/* background: url(../img/bg-00.jpg) center; */
		background-size: cover;
		max-height: 800px;
		height: 50vw;
		overflow: hidden;
	}
	/*#hd #mediashow .mediashow__first video {
		height: auto;
		width: 100%;
		position: absolute;
		top: -12%;
		left: 0;
	}*/
	#hd #mediashow .mediashow__first iframe {
		height: auto;
		width: 100%;
		height: 134%;
		position: absolute;
		top: -17%;
		left: 0;
	}
	/*#hd #mediashow .mediashow__first .screen {
		 background: url(../img/bg-dot.png), rgba(255, 0, 0, .2);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}*/
	#hd #mediashow .wrapper {
		position: absolute;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		color: #fff;
		width: 100%;
		bottom: 5%;
		left: 0;
	}
	#hd #mediashow .fadeToBlack {
		position: absolute;
		height: 30%;
		bottom: 0;
		left: 0;
		pointer-events: none;
		width: 100%;
		z-index: 0;
		background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000', GradientType=0);
	}
	#hd #mediashow .mediashow__second {
		position: relative;
		background: url(../img/bg-01-mediashow.jpg) center;
		background-size: cover;
		overflow: hidden;
	}
	#hd #mediashow .mediashow__second .w1200 {
		padding-top: 600px;
	}
/* ---------- kv -------------------- */
	#hd #kv {
		position: relative;
		padding-top: 60px;
		z-index: 2;
	}
	#hd #kv:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		padding-bottom: 60px;
		background: url(../img/kv/kv_line.png) center top no-repeat;
		background-size: cover;
		z-index: 1;
	}
	#hd #kv .kv_content {
		position: absolute;
		width: 100%;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		   -moz-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		     -o-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	#hd #kv .kv_content p {
		max-width: 570px;
	}
	#hd #kv .kv_content img {
		width: 30%;
	}
/* ---------- hd_spec --------------- */
	#hd .hd_spec {
		position: relative;
		background: url(../img/spec/spec_bg.jpg) center center;
		background-size: cover;
		overflow: hidden;
		margin-top: 30px;
	}
	#hd .hd_spec .w1200 {
		padding: 50px 0 90px;
	}
	#hd #spec{
		width: 55%;
		margin:0 auto 0 17%;
		padding-right: 5%;
	}
	#hd #spec img{
		display: block;
	}
	#hd #spec .spec_content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#hd #spec .spec_content li {
		position: absolute;
		left: 81%;
		width: 20%;
	}
	#hd #spec p{padding-bottom: 0;}
	#hd #spec .spec_content li:nth-child(1) {top: 6.5%; }
	#hd #spec .spec_content li:nth-child(2) {top: 30.7%; }
	#hd #spec .spec_content li:nth-child(3) {top: 50%; }
	#hd #spec .spec_content li:nth-child(4) {top: 57%; }
	#hd #spec .spec_content li:before {
		content:'';
		display: block;
		border-top: 1px solid #cc0000;
		position: absolute;
		right: 110%;
		top: 8px;
	}
	#hd #spec .spec_content li:nth-child(1):before {
		border-left: 1px solid #cc0000;
		width: 200%;
		height: 55%;
	}
	#hd #spec .spec_content li:nth-child(2):before {width: 90%; }
	#hd #spec .spec_content li:nth-child(3):before {width: 140%; }
	#hd #spec .spec_content li:nth-child(4):before {width: 85%; }
/* ---------- hd_attention ---------- */
	#hd .hd_attention {
		position: relative;
	}
	#hd .hd_attention .attention_content {
		position: absolute;
		width: 100%;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		   -moz-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		     -o-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	#hd .hd_attention .attention_content .col50 {
		max-width: 550px;
	}
	#hd .hd_attention .attention_content ul {
		padding-top: 30px;
		text-align: center;
	}
	#hd .hd_attention .attention_content ul li {
		display: inline-block;
		margin-left: -5px;
		width: 20%;
		max-width: 130px;
	}
	#hd .hd_attention .attention_content img{margin-bottom: 5px;}
/* ---------- hd_plug --------------- */
	#hd .hd_plug {
		position: relative;
		z-index: 2;
	}
	#hd .hd_plug:before,
	#hd .hd_plug:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		padding-bottom: 3%;
		background: url(../img/halo/bg-halo_ui_bottom.png) center top no-repeat;
		background-size: cover;
		z-index: -1;
	}
	#hd .hd_plug:after {
		top: auto;
		bottom: 0;
		padding-bottom: 14%;
		background: url(../img/plug/bg-plug_bottom.png) center bottom no-repeat;
		background-size: cover;
	}
	#hd .hd_plug .w1200 {
		padding: 120px 0 150px;
	}
	#hd .hd_plug ul{margin: 50px auto;}
	#hd .hd_plug ul li {
		text-align: left;
		width: 33%;
		display: inline-block;
		vertical-align: top;
		margin-left: -5px;
		padding: 0 20px;
	}
	#hd .hd_plug ul li i,
	#hd .hd_plug ul li p {
		margin: 0 auto 30px;
	}
	#hd .hd_plug ul li:nth-child(2) i,
	#hd .hd_plug ul li:nth-child(2) p {
		max-width: 310px;
	}
	#hd .hd_plug ul li:nth-child(3) i,
	#hd .hd_plug ul li:nth-child(3) p {
		max-width: 330px;
	}
	#hd .hd_plug ul li i {
		display: block;
		color: #ff1f1f;
		font-size: 1.75rem;
		font-weight: bold;
		font-style: italic;
		margin-bottom: 14px;
	}
	#hd .hd_plug ul li p {
		min-height: 4.5rem;
		padding-bottom: 0;
	}
	#hd .hd_plug ul li img {
		display: block;
		margin: 0 auto;
	}
	#hd .hd_plug .hd_width {
		margin-top: -6%;
	}
/* ---------- hd_immersion ---------- */
	#hd .hd_immersion_title {padding: 50px 0; }
	/* hd_immersion_title */
		#hd .hd_sec_imgshow {
			position: relative;
			width: 120%;
			margin-left: -10%;
		}
	/* hd_sec_imgshow */
		#hd .hd_sec_imgshow .col50 {
			-webkit-transform: skew(-25deg);
			   -moz-transform: skew(-25deg);
			    -ms-transform: skew(-25deg);
			     -o-transform: skew(-25deg);
			        transform: skew(-25deg);
			overflow: hidden;
			padding-bottom: 35%;
		}
		#hd .hd_sec_imgshow .col50:first-child:after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 3px;
			height: 100%;
			background: #666464;
			background: -moz-linear-gradient(top, #111111 0%, #666464 17%, #666464 34%, #ffffff 100%);
			background: -webkit-linear-gradient(top, #111111 0%,#666464 17%,#666464 34%,#ffffff 100%);
			background: linear-gradient(to bottom, #111111 0%,#666464 17%,#666464 34%,#ffffff 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#ffffff',GradientType=0 );
		}
		#hd .hd_sec_imgshow .col50:nth-child(2) img {
			left: auto;
			right: 16%;
		}
		#hd .hd_sec_imgshow img {
			/*width: 100%;*/
			height: 100%;
			max-width: none !important;
			position: absolute;
			top: 0;
			left: 17%;
			-webkit-transform: skew(25deg);
			   -moz-transform: skew(25deg);
			    -ms-transform: skew(25deg);
			     -o-transform: skew(25deg);
			        transform: skew(25deg);
			opacity: .5;
			-webkit-transition: all .25s ease;
			   -moz-transition: all .25s ease;
			    -ms-transition: all .25s ease;
			     -o-transition: all .25s ease;
			        transition: all .25s ease;
		}
		#hd .hd_sec_imgshow h3{
			font-family: 'ROGFontsv', 'xolonium', sans-serif;
			font-size: 2.85rem;
			line-height: 1.5rem;
			padding:0px 35px 28px;
			background-color: rgba(0,0,0,.5);
			border:2px solid #cc0000;
			color:#cc0000;
			position: absolute;
			-webkit-transform: skew(25deg);
			   -moz-transform: skew(25deg);
			    -ms-transform: skew(25deg);
			     -o-transform: skew(25deg);
			        transform: skew(25deg);
			-webkit-transition: all .25s ease;
			   -moz-transition: all .25s ease;
			    -ms-transition: all .25s ease;
			     -o-transition: all .25s ease;
			        transition: all .25s ease;
		}
		#hd .hd_sec_imgshow .col50:first-child h3{
			top: 20%;
			right: 5%;
		}
		#hd .hd_sec_imgshow .col50:last-child h3{
			top: 70%;
			left: 5%;
		}
		#hd .hd_sec_imgshow .col50:last-child p{
			position: absolute;
			top: 90%;
			left: 5%;
			-webkit-transform: skew(25deg);
			   -moz-transform: skew(25deg);
			    -ms-transform: skew(25deg);
			     -o-transform: skew(25deg);
			        transform: skew(25deg);
		}
		#hd .hd_sec_imgshow .col50:hover img{opacity: 1;}
		#hd .hd_sec_imgshow .col50:hover h3{
			background-color: rgba(0,0,0,.8);
			-webkit-transform: translateY(-5px) skew(25deg);
			   -moz-transform: translateY(-5px) skew(25deg);
			    -ms-transform: translateY(-5px) skew(25deg);
			     -o-transform: translateY(-5px) skew(25deg);
			        transform: translateY(-5px) skew(25deg);
		}
	/* .hd_immersion_ctrl */
		#hd .hd_immersion_ctrl {
			padding: 30px 0;
			position: relative;
			z-index: 2;
			background-color: #9d1e23;
			background: #7b1d1d;
			background: -moz-linear-gradient(left, #7b1d1d 0%, #a91d1c 100%);
			background: -webkit-linear-gradient(left, #7b1d1d 0%,#a91d1c 100%);
			background: linear-gradient(to right, #7b1d1d 0%,#a91d1c 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b1d1d', endColorstr='#a91d1c',GradientType=1 );
		}
		#hd .hd_immersion_ctrl:before{
			content:'';
			display: block;
			width: 35%;
			height: 110%;
			position: absolute;
			top: 0;
			left: 0;
			border-top: 8px solid #000000;
			background: #7b1d1d;
			background: -moz-linear-gradient(left, #7b1d1d 0%, #a91d1c 100%);
			background: -webkit-linear-gradient(left, #7b1d1d 0%,#a91d1c 100%);
			background: linear-gradient(to right, #7b1d1d 0%,#a91d1c 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b1d1d', endColorstr='#a91d1c',GradientType=1 );
			border-right: 1px solid #ee2222;
		}
		#hd .hd_immersion_ctrl:after{
			content:'';
			display: block;
			width: 2%;
			width: calc(2% + 1px);
			height: 8px;
			position: absolute;
			top: 0;
			left: 33%;
			background-color: #5a0000;
			background: -moz-linear-gradient(10deg, #5a0000 45%, #8b1d1d 55%);
			background: -webkit-linear-gradient(10deg, #5a0000 45%, #8b1d1d 55%);
			background: linear-gradient(10deg, #5a0000 45%, #8b1d1d 55%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a0000', endColorstr='#8b1d1d',GradientType=1 );
		}
		#hd .hd_immersion_ctrl img,
		#hd .hd_immersion_ctrl h4{
			display: inline-block;
			vertical-align: middle;
			position: relative;
			z-index: 2;
		}
		#hd .hd_immersion_ctrl img{
			max-width: 30% !important;
			margin-bottom: -25px;
			margin-left: 3%;
		}
		#hd .hd_immersion_ctrl h4{
			padding-left: 15%;
			width:calc(100% - 350px);
		}
/* ---------- hd_halo --------------- */
	#hd .hd_halo{
		padding:50px 0;
		background: url(../img/halo/bg-halo.jpg) 0 0 no-repeat;
		background-size: cover;
		position: relative;
		/*max-width: 1920px;*/
		z-index: 0;
	}
	#hd .hd_halo:after{
		content:'';
		display: block;
		clear:both;
	}
	#hd .hd_halo .col50{
		max-width: 480px;
	}
	#hd .hd_halo figure{
		width: 50%;
		height: 0;
		padding-bottom: 47%;
		position: relative;
		float: right;
	}
	#hd .hd_halo .halo_content {
		width: 100%;
		position: absolute;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		   -moz-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		     -o-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	#hd #halo_monitor{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 5%;
		right: 0;
	}
		#hd #halo_monitor li{
			width: 85%;
		}
		#hd #halo_monitor li img{
			width: 100%;
		}
		#hd #halo_monitor li{
			position: absolute;
			top: 0;
			right: 0;
			opacity: 0;
		    filter: alpha(opacity=0);
		    /*當圖片數量增加，影片長度需更改，變為2s*圖片數量*/
		    -webkit-animation: silder 8s linear infinite;
		    animation: silder 8s linear infinite;
		}
		/*每個圖片各延遲5秒*/
		#hd #halo_monitor li:nth-child(1) {
		-webkit-animation-delay: 0s;
		        animation-delay: 0s;
		}
		#hd #halo_monitor li:nth-child(2) {
		-webkit-animation-delay: 2s;
		        animation-delay: 2s;
		}
		#hd #halo_monitor li:nth-child(3) {
		-webkit-animation-delay: 4s;
		        animation-delay: 4s;
		}
		#hd #halo_monitor li:nth-child(4) {
		-webkit-animation-delay: 6s;
		        animation-delay: 6s;
		}
		/*滑入時停止播放*/
		#hd #halo_monitor:hover li{
		    -webkit-animation-play-state: paused;
		            animation-play-state: paused;
		}
	#hd #halo_description{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
	}
	#hd #halo_description p{
		width: 200px;
		padding-bottom: 0;
		position: absolute;
		-webkit-transform: translate3d(0,0,0);
		   -moz-transform: translate3d(0,0,0);
		    -ms-transform: translate3d(0,0,0);
		     -o-transform: translate3d(0,0,0);
		        transform: translate3d(0,0,0);
	}
	#hd #halo_description p:first-child{
		top: 36%;
		right: 85%;
	}
	#hd #halo_description p:last-child{
		top: 80%;
		left: 32%;
	}
	#hd #halo_description p span{
		display: block;
		width: 100%;
		padding:15px;
		text-align: center;
		background-color: #b80000;
		z-index: 2;
	}
	#hd #halo_description p:before,
	#hd #halo_description p:after{
		content:'';
		display: block;
		position: absolute;
	}
	#hd #halo_description p:first-child:before{
		width: 70%;
		height: 0;
		padding-bottom: 20%;
		background-color: #8c0000;
		right: 3px;
		top:52%;
		z-index: -1;
		-webkit-transform: skew(-10deg,-5deg);
		   -moz-transform: skew(-10deg,-5deg);
		    -ms-transform: skew(-10deg,-5deg);
		     -o-transform: skew(-10deg,-5deg);
		        transform: skew(-10deg,-5deg);
	}
	#hd #halo_description p:first-child:after{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 15px 0 15px 200px;
		border-color: transparent transparent transparent #b80000;
		left: 26%;
		top: 126%;
		z-index: -2;
		-webkit-transform: rotate(20deg);
		   -moz-transform: rotate(20deg);
		    -ms-transform: rotate(20deg);
		     -o-transform: rotate(20deg);
		        transform: rotate(20deg);
	}
	#hd #halo_description p:last-child:before{
		width: 70%;
		height: 0;
		padding-bottom: 20%;
		background-color: #8c0000;
		left: 3px;
		bottom:52%;
		z-index: -1;
		-webkit-transform: skew(-10deg,-5deg);
		   -moz-transform: skew(-10deg,-5deg);
		    -ms-transform: skew(-10deg,-5deg);
		     -o-transform: skew(-10deg,-5deg);
		        transform: skew(-10deg,-5deg);
	}
	#hd #halo_description p:last-child:after{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 15px 0 15px 180px;
		border-color: transparent transparent transparent #b80000;
		right: 17%;
		bottom: 181%;
		z-index: -2;
		-webkit-transform: rotate(230deg);
		   -moz-transform: rotate(230deg);
		    -ms-transform: rotate(230deg);
		     -o-transform: rotate(230deg);
		        transform: rotate(230deg);
	}
	#hd .hd_halo .hd-btn{
		margin-top: 50px;
		margin-left: 5px;
	}
/* ---------- hd_halo_ui ------------ */
	#hd .hd_halo_ui{
		margin-top: -50px;
		padding:150px 0 80px;
		background: url(../img/halo/bg-halo_ui.jpg) 77% 0 no-repeat;
		background-size: cover;
		position: relative;
		overflow: hidden;
	}
	#hd .hd_halo_ui:before{
		content:'';
		display: block;
		width: 100%;
		height: 1px;
		bottom: 0;
		box-shadow: 0 0 100px 50px #000000;
		position: absolute;
		bottom: -1px;
		left: 0;
		pointer-events: none;
	}
	#hd .hd_halo_ui h2{padding-bottom: 20px;}
	#hd .hd_halo_ui h2+p{margin-bottom: 30px;}
	#hd #halo_ui figure{
		display: none;
		position: relative;
	}
	#hd #halo_ui figure.hd-active{
		display: block;
		-webkit-animation: fadeInFromDown .5s forwards;
		-o-animation: fadeInFromDown .5s forwards;
		animation: fadeInFromDown .5s forwards;
	}
	#hd #halo_ui figure img{
		width: 61%;
		pointer-events: none;
		user-select: none;
		-webkit-user-select: none;
	}
	#hd #halo_ui figure ul{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#hd #halo_ui figure ul li,
	#hd #halo_ui02_description{
		width: 30%;
		position: absolute;
		right: 0;
	}
	#hd #halo_ui figure ul li p{padding-bottom: 0;}
	#hd #halo_ui figure ul li:nth-child(1){top: 10%; }
	#hd #halo_ui figure ul li:nth-child(2){top: 20.5%; }
	#hd #halo_ui figure ul li:nth-child(3){top: 33%; }
	#hd #halo_ui figure ul li:nth-child(4){top: 43.2%; }
	#hd #halo_ui figure ul li:nth-child(5){top: 53.2%; }
	#hd #halo_ui figure ul li:nth-child(6){top: 76%; }
	#hd #halo_ui figure ul li:before,
	#hd #halo_ui02_description:before{
		content:'';
		display: block;
		border-bottom: 1px solid #cc0000;
		position: absolute;
		top: 8px;
		right: 105%;
		width: 50%;
		-webkit-transform: skewX(35deg);
		   -moz-transform: skewX(35deg);
		    -ms-transform: skewX(35deg);
		     -o-transform: skewX(35deg);
		        transform: skewX(35deg);
	}
	#hd #halo_ui figure ul li:nth-child(1):before{width: 160%; }
	#hd #halo_ui figure ul li:nth-child(2):before{
		width: 120%;
		height: 80%;
		border-left: 2px solid #cc0000;
		top: auto;
		bottom: 8px;
		right: 107%;
	}
	#hd #halo_ui figure ul li:nth-child(3):before{width: 87%; }
	#hd #halo_ui figure ul li:nth-child(4):before{width: 64%; }
	#hd #halo_ui figure ul li:nth-child(5):before{width: 49%; }
	#hd #halo_ui figure ul li:nth-child(6):before{width: 60%; }
	#hd #halo_ui figure ul li:after,
	#hd #halo_ui02_description:after{
		content:'';
		display: block;
		width: 4px;
		height: 4px;
		border-radius: 3px;
		background-color: #cc0000;
		position: absolute;
		top: 7px;
	}
	#hd #halo_ui figure ul li:nth-child(1):after{right: 265%;}
	#hd #halo_ui figure ul li:nth-child(2):after{
		right: 228.5%;
		top: auto;
		bottom: 113%;
	}
	#hd #halo_ui figure ul li:nth-child(3):after{right: 192%;}
	#hd #halo_ui figure ul li:nth-child(4):after{right: 168%;}
	#hd #halo_ui figure ul li:nth-child(5):after{right: 154%;}
	#hd #halo_ui figure ul li:nth-child(6):after{right: 164%;}
	#hd #halo_ui02_description{
		top: 31%;
		right: auto;
		left: 0;
	}
	#hd #halo_ui02_description:before{
		width: 37%;
		left: 105%;
		right: auto;
	}
	#hd #halo_ui02_description:after{
		right: auto;
		left: 141%;
	}
	/* hd-dots */
		#hd .hd-dots{
			text-align: center;
			margin-top: 50px;
		}
		#hd .hd-dots li{
			display: inline-block;
			vertical-align: top;
			width: 16px;
			height: 16px;
			border-radius: 9px;
			background-color: #afafaf;
			margin:5px;
			cursor: pointer;
		}
		#hd .hd-dots li.hd-active{
			background-color: #cc0000;
		}
/* ---------- hd_versatile ---------- */
	#hd .hd_versatile{
		margin-top: -10%;
		padding-top: 50px;
		position: relative;
	}
	#hd .hd_versatile img{
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	#hd .hd_versatile_content{
		width: 65%;
		position: absolute;
		top: 15%;
		left: 0;right: 0;
		z-index: 2;
	}
	#hd .hd_versatile h2{padding-bottom: 20px;}
/* ---------- hd_aura --------------- */
	#hd .hd_aura{position: relative;}
	#hd .hd_aura figure{
		position: absolute;
		width: 100%;
		height: 0;
		padding-bottom: 55%;
		top: 0;left: 0;
	}
	#hd .hd_aura figure img{width: 100%;}
	#hd .hd_aura figure .cover{
		position: absolute;
		top: 0;left: 0;
	}
	#hd .hd_aura figure + img{
		width: 27.4986%;
		position: absolute;
		top: 37%;
		right: 8%;
	}
	#hd .hd_aura figure + img + img{
		width: 9.5%;
		position: absolute;
		top: 70%;
		right: 5%;
	}
	#hd .hd_aura .w1000{
		width:50%;
		position: relative;
		padding: 30% 0 6%;
	}
	#hd .hd_aura .w1000>div{
		max-width: 750px;
		padding: 0 5%;
	}
	#hd .hd_aura h2{padding-bottom: 20px;}
/* ---------- ANIMATIONS ------------ */
	#hd .colorrun {
		-webkit-animation: colorrun 5s infinite;
		-o-animation: colorrun 5s infinite;
		animation: colorrun 5s infinite;
	}
	#hd .colorrun-slow {
		-webkit-animation: colorrun 10s infinite;
		-o-animation: colorrun 10s infinite;
		animation: colorrun 10s infinite;
	}

	@-webkit-keyframes colorrun {
		from {
			-webkit-filter: hue-rotate(0deg);
		}
		to {
			-webkit-filter: hue-rotate(359deg);
		}
	}
	@keyframes colorrun {
		from {
			-webkit-filter: hue-rotate(0deg);
			filter: hue-rotate(0deg);
		}
		to {
			-webkit-filter: hue-rotate(359deg);
			filter: hue-rotate(359deg);
		}
	}
	.animated-fadeIn {
		-webkit-animation: fadeIn .5s forwards;
		-o-animation: fadeIn .5s forwards;
		animation: fadeIn .5s forwards;
	}

	@-webkit-keyframes fadeIn {
		0% {opacity: 0; }
		50% {opacity: 0; }
		100% {opacity: 1; }
	}
	@keyframes fadeIn {
		0% {opacity: 0; }
		50% {opacity: 0; }
		100% {opacity: 1; }
	}

	@-webkit-keyframes fadeOut {
		0% {opacity: 1; }
		30% {opacity: 0; }
		100% {opacity: 0; }
	}
	@keyframes fadeOut {
		0% {opacity: 1; }
		30% {opacity: 0; }
		100% {opacity: 0; }
	}

	@-webkit-keyframes silder {
	    3% {opacity: 1; }
	    27% {opacity: 1; }
	    30% {opacity: 0; }
	}
	@keyframes silder {
	    3% {opacity: 1; }
	    27% {opacity: 1; }
	    30% {opacity: 0; }
	}

	@-webkit-keyframes fadeInFromDown{
		from{
			opacity: 0;
			-webkit-transform: translateY(20px);
		}
		to  {
			opacity: 1;
			-webkit-transform: translateY(0);
		}
	}
	@keyframes fadeInFromDown{
		from{
			opacity: 0;
			   -moz-transform: translateY(20px);
			    -ms-transform: translateY(20px);
			     -o-transform: translateY(20px);
			        transform: translateY(20px);
		}
		to  {
			opacity: 1;
			   -moz-transform: translateY(0);
			    -ms-transform: translateY(0);
			     -o-transform: translateY(0);
			        transform: translateY(0);
		}
	}