@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto&display=swap');

@font-face {
	font-family: 'xolonium';
	src: url("fonts/xolonium.eot?#iefix") format("embedded-opentype"), url("fonts/xolonium.otf") format("opentype"), url("fonts/xolonium.woff") format("woff"), url("fonts/xolonium.ttf") format("truetype"), url("fonts/xolonium.svg#rogfont") format("svg");
	font-weight: normal;
	font-style: normal; 
}
@font-face {
	font-family: 'rog';
	src: url("fonts/rogfont.eot");
	src: url("fonts/rogfont.eot?#iefix") format("embedded-opentype"), url("fonts/rogfont.otf") format("opentype"), url("fonts/rogfont.woff") format("woff"), url("fonts/rogfont.ttf") format("truetype"), url("fonts/rogfont.svg#rogfont") format("svg");
	font-weight: normal;
	font-style: normal; 
}
@font-face {
	font-family: 'Square';
	src: url("../fonts/square.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'jerseym54';
	src:url("fonts/jersey_es_modified.eot"),
		url("fonts/jersey_es_modified.eot?#iefix") format("embedded-opentype"),
		url("fonts/jersey_es_modified.ttf") format("truetype"),
		url("fonts/jersey_es_modified.svg#rogfont") format("svg");
	font-weight: normal;
	font-style: normal
}
@font-face {
	font-family: 'machinen';
	src:url("../fonts/machinen.ttf") format("truetype");
	font-weight: normal;
	font-style: normal
}
/* --------------------------Reset------------------------ */
	#hd * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        word-wrap: break-word;
        word-break: break-word;
    }
    #hd ::selection {
        background: #1d2124;
        color: #CE0000;
    }
    #hd ::-moz-selection {
        background: #1d2124;
        color: #ffffff;
    }
    #hd{
		font-family: 'Roboto', sans-serif;
        color: #fff;
		font-size: 16px;
		line-height: 30px;
        margin: 0;
        padding: 0;
        /* background-attachment: fixed; */
		background-color: #000000;
		font-weight: 300;
	}
	#hd ul{
		list-style: none;
	}
    #hd ul,
	#hd li,
	#hd figure{margin: 0; padding: 0; }
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd p,
	#hd a,
	#hd li {
		font:inherit;
		line-height: inherit;
    }
    #hd img{
        display: block;
        height: auto;
        border:none;
        max-width: 100% !important;
        margin:0 auto;
    }
/* ---------- BLOCK ---------- */
    #hd .w90 {
        width: 90%;
        margin: 0 auto;
        position: relative;
    }
    #hd .w80 {
        width: 80%;
        margin: 0 auto;
        position: relative;
    }
    #hd .w900, #hd .w1200,#hd .w1400{
        width: 90%;
        margin: 0 auto;
        position: relative;
	}
	#hd .w1920 {max-width: 1920px; }
    #hd .w1400 {max-width: 1400px; }
    #hd .w1200 {max-width: 1200px; }
    #hd .w900 {max-width: 900px; }
    #hd .col25,
    #hd .col33,
    #hd .col30,
    #hd .col40,
    #hd .col45,
    #hd .col50,
    #hd .col55,
    #hd .col60,
    #hd .col70,
    #hd .col80  {
        display: inline-block;
        margin-left: -5px;
        vertical-align: middle;
	}
	#hd .h2_title{
		margin: 0 auto 5%;
		position: relative;
	}
	#hd .col15,#hd .f15 {width: 15%; }
	#hd .col20,#hd .f20 {width: 20%; }
	#hd .col24,#hd .f24 {width: 24%; }
    #hd .col25,#hd .f25 {width: 25%; }
    #hd .col33,#hd .f33 {width: 33.33%; }
    #hd .col30,#hd .f30 {width: 30%; }
    #hd .col40,#hd .f40 {width: 40%; }
    #hd .col45,#hd .f45 {width: 45%; }
    #hd .col50,#hd .f50 {width: 50%; }
    #hd .col55,#hd .f55 {width: 55%; }
    #hd .col60,#hd .f60 {width: 60%; }
    #hd .col70,#hd .f70 {width: 70%; }
    #hd .col80,#hd .f80 {width: 80%; }

	#hd .ib-top{vertical-align: top;}
    #hd .ib-bottom{vertical-align: bottom;}

    #hd .fleft {float: left; }
    #hd .fright {float: right; }
    #hd .cf:after{
        content:'';
        display: block;
        clear:both;
	}
	#hd .d-flex{
		display: flex;
	}
    #hd .flex-wrap{
        display: flex;
		flex-wrap: wrap;
		align-items: center;
    }
    #hd .hidden{
        display: none;
	}

	#hd .align-items-center{
		align-items: center;
	}
	#hd .align-items-end{
		align-items:flex-end;
	}
	#hd .justify-content-center{
		justify-content:center;
	}
	#hd .justify-content-between{
		justify-content:space-between;
	}
    
    #hd .hd_480on,
    #hd .hd_620on,
	#hd .hd_1023on,
	#hd .hd_1024on{
        display: none;
	}
	
    #hd .container{
        margin:0 auto;
	}
	#hd .mr25{
		margin-right: 1.5625em;
	}
	#hd .mt50{
		margin-top: 3em;
	}
	#hd .mt70{
		margin-top: 4.375em;
	}
	#hd .mt80{
		margin-top: 5em;
	}
	#hd .mt100{
		margin-top: 6.25em;
	}
	#hd .mt120{
		margin-top: 7.5em;
	}
	#hd .mb25{
		margin-bottom:  1.5625em;
	}
	#hd .mb80{
		margin-bottom:  5em;
	}
/* --------------------------TXT-------------------------- */
    #hd h1,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6{
		font-weight: 300;
		/* letter-spacing: .08em; */
	}
	#hd .txt-title{
		font-family: 'square', sans-serif;
	}
	#hd h1{
		font-size: 5em;
		padding-bottom: 25px;
		text-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
		line-height: 1em;
	}
	#hd h2{
		display: inline;
		font-size: 68px;
		line-height: 68px;
		height: 68px;
		position: relative;
		/* text-align: center; */
		z-index: 20;
		color: #bcbcbc !important;
		background: #e5e2df;
		background: -webkit-linear-gradient(to right, #e5e2df, #8b9298, #e0e0e0, #8b9298, #e5e2df);
		background: linear-gradient(to right, #e5e2df, #8b9298, #e0e0e0, #8b9298, #e5e2df);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e2df', endColorstr='#91979d', GradientType=1);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-family: "machinen", "jerseym54", "Geneva", "Roboto", "Helvetica", "Arial", "Microsoft JhengHei", sans-serif;
		text-shadow: 0 0 0 rgba(0, 0, 0, 0);
	}
	#hd h2 span.lowercase{
		text-transform:lowercase;
		
	}
	#hd h2:before {
		content: "";
		position: absolute;
		top: -5%;
		right: 105%;
		width: 1000%;
		height: 68px;
		background: url(../img/title/title_left.png) center right no-repeat;
		z-index: 20;
	}
	#hd h2:after {
		content: "";
		position: absolute;
		top: -5%;
		left: 105%;
		width: 1000%;
		height: 68px;
		background: url(../img/title/title_right.png) center left no-repeat;
		z-index: 20;
	}
	#hd h2.kv_title{
		display: inline;
		font-size: 68px;
		line-height: 68px;
		height: auto;
		position: relative;
		/* text-align: center; */
		z-index: 20;
		color: #bcbcbc !important;
		background: #FCDDA5;
		background: -webkit-linear-gradient(to right, #FCDDA5, #FABC45, #FCDDA5, #FABC45, #FCDDA5);
		background: linear-gradient(to right, #FCDDA5, #FABC45, #FCDDA5, #FABC45, #FCDDA5);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCDDA5', endColorstr='#91979d', GradientType=1);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-family: "machinen", "jerseym54", "Geneva", "Roboto", "Helvetica", "Arial", "Microsoft JhengHei", sans-serif;
		text-shadow: 0 0 0 rgba(0, 0, 0, 0);
	}
	#hd h2.kv_title::before,
	#hd h2.kv_title::after{display: none;}
	#hd h3{
		font-family: 'machinen', sans-serif;
		font-size: 2.25em;
		display: inline-block;
		line-height: 1em;
		letter-spacing: 0.05em;
	}
	#hd h4{
		font-family: 'Fjalla One', sans-serif;
		font-size: 1.8em;
		letter-spacing: 1px;
		margin-bottom: 0;
		margin-bottom: 4%;
		color: #fff;
	}
	#hd h5{
		font-family: 'xolonium', sans-serif;
		font-size: 1.25em;
		margin-bottom: 0;
		line-height: 1em;
		color: #fff;
	}
	#hd h6{
		font-size: 1.1em;
		color: #fff;
	}
	/* #hd .txt-gradient {
		color: #fff !important;
		background: -webkit-linear-gradient(left, #fff 10%, #999 20%, #fff 50%, #999 80%, #fff 90%);
		background: -o-linear-gradient(left, #fff 10%, #999 20%, #fff 50%, #999 80%, #fff 90%);
		background: -moz-linear-gradient(left, #fff 10%, #999 20%, #fff 50%, #999 80%, #fff 90%);
		background: linear-gradient(to right, #fff 10%, #999 20%, #fff 50%, #999 80%, #fff 90%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
		font-weight: bold;
	} */
	#hd a,
	#hd p,
	#hd b,
	#hd small{
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		color: inherit;
	}
	
	
	#hd th , #hd td{
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		padding: 1.8em 2em;
		font-size: 1em;

	}
	#hd thead th a{
		font-family: 'Xolonium_regular', sans-serif;
		font-weight: 300;
		color:black;
	}
	#hd b.controlsTXT{
		font-weight: 400;
	}
	#hd p{
		font-size: 1.1em;
		letter-spacing: .05em;
		margin: 0;
	}
	#hd .bold{
		font-weight: 400;
	}
	#hd li{
		font-size: 1em;
		letter-spacing: .05em;
		margin: 0;
	}
	#hd small {
		font-size: .9em;
		color: #999;
		line-height: 1.5em;
		font-weight: 300;
		letter-spacing: .08em;
		
	}
	#hd .txt-bold{
		font-weight: 500;
	}

	_:-ms-fullscreen,
	:root #hd .txt-gradient{
	    background: transparent !important;
	}
	#hd .txt-center {
		text-align: center;
	}
	#hd .txt-left {
		text-align: left;
	}
	#hd .txt-right {
		text-align: right;
	}
	#hd .leran{
		text-decoration: underline;
		color: #f4b900;
	}

/*----------- COLOR -----------*/
	#hd .color-primary{
		color: #f4b900;
	}
	#hd .color-red{
		color: #aa0a04;
	}
	#hd .color-blue{
		color: #3e87d1;
	}
	#hd .color-light-blue{
		color: #25D1DB;
	}
	#hd .color-grey {
		color: #000;
	}
	#hd .color-white {
		color: #fff;
	}
	#hd .txt-grey {
		color: #adadad;
		font-weight: 400;
	}
	#hd .txt-white {
		color: #ffffff;
	}
	#hd .txt-link {
		color: #01b1e3;
		text-decoration: underline;
		font-weight: 400;
	}
	#hd .gradient45d{
		background: linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
		background: -moz-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
		background: -webkit-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
		background: -o-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
	}

	/* ---------- fp-nav --------- */
	#fp-nav ul li {
		text-align: center;
	}
	#fp-nav ul li a span,
	#fp-nav ul li:hover a span {
		width: 6px;
		height: 6px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background-color: rgba(255,255,255,.6);
	}
	#fp-nav ul li.active a span,
	#fp-nav ul li.active:hover a span {
		top: 0;
		left: 0;
		right: 0;
		height: 13px;
		width: 13px;
		margin: auto;
		background-color: #c00d3b;
	}
	#fp-nav ul li:hover a span {
		background-color: #c00d3b;
	}
	#fp-nav ul li .fp-tooltip {
		color: #c00d3b;
	}
	#fp-nav ul li.active .fp-tooltip {
		top: -2px;
	}
	/* ---------- scrollUp ------- */
	#hd #scrollUp {
		float: left;
		position: fixed;
		right: 25px;
		bottom: 40px;
		z-index: 17;
		width: 45px;
		height: 45px;
		border-radius: 26px;
		cursor: pointer;
		z-index: 999;
		opacity: 0;
		border: 2px solid #c00d3b;
		-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 #scrollUp.hd-show {
		opacity: 1;
	}
	#scrollUp svg {
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 5px;
		left: 0;
		fill: #c00d3b;
		-webkit-transform: rotateZ(270deg);
		-moz-transform: rotateZ(270deg);
		-ms-transform: rotateZ(270deg);
		-o-transform: rotateZ(270deg);
		transform: rotateZ(270deg);
	}
	#scrollUp:hover svg {
		fill: white;
	}
	#hd #scrollUp:hover,
	#hd #scrollUp:active {
		background-color: #c00d3b;
	}


	#hd .mobile-on{
		display: none;
	}
/* ---------- btn ---------- */
	#hd .blue_btn{
		cursor: pointer;
		border: 1px solid #25D1DB;
		color: #25D1DB;
		border-radius: 10px;
		width: 350px;
		margin: 0 auto;
	}
	#hd .blue_btn h5{
		position: relative;
		padding: 4%;
	}
	#hd .blue_btn h5 span{
		position: absolute;
		top: 48%;
    	left: 80%;
	}


	#hd .yellow_btn{
		cursor: pointer;
		border: 1px solid #f4b900;
		color: #f4b900;
		border-radius: 10px;
		width: 350px;
		margin: 0 auto;
	}
	#hd .yellow_btn h5{
		position: relative;
		padding: 4%;
	}
	#hd .yellow_btn h5 span{
		position: absolute;
		top: 48%;
    	left: 80%;
	}

/* ---------- color effect ---------- */
.hd-rainbow{
	width: 500% !important;
	background: url(../img/lighting/rainbow.jpg) 0 0 repeat;
}
.hd-comet{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ff0000+30,ff0000+77,000000+100 */
	background: #000000; /* Old browsers */
	background: -moz-linear-gradient(110deg,  #000000 0%,#000000 20%, #ff0000 30%, #ff0000 77%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(110deg,  #000000 0%,#000000 20%,#ff0000 30%,#ff0000 77%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(110deg,  #000000 0%,#000000 20%,#ff0000 30%,#ff0000 77%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
	box-shadow: 0 0 50px 100px rgba(0,0,0,1);
}
.hd-flash{
	/* http://colorzilla.com/gradient-editor/#000000+0,000000+28,ff0000+48,ff0000+61,000000+79,000000+100 */
	background-color: #820303 !important;
	background: #820303; /* Old browsers */
	background: -moz-linear-gradient(-110deg,  #820303 0%, #820303 14%, #ff0000 20%, #820303 26%, #820303 36%, #ff0000 42%, #820303 48%, #820303 58%, #ff0000 64%, #820303 70%, #820303 80%, #ff0000 86%, #820303 92%, #820303 100%); /* FF3.6-15*/ 
	background: -webkit-linear-gradient(-110deg,  #820303 0%, #820303 14%, #ff0000 20%, #820303 26%, #820303 36%, #ff0000 42%, #820303 48%, #820303 58%, #ff0000 64%, #820303 70%, #820303 80%, #ff0000 86%, #820303 92%, #820303 100%); /*Chrome10-25,Safari5.1-6  */
	background: linear-gradient(-110deg,  #820303 0%, #820303 14%, #ff0000 20%, #820303 26%, #820303 36%, #ff0000 42%, #820303 48%, #820303 58%, #ff0000 64%, #820303 70%, #820303 80%, #ff0000 86%, #820303 92%, #820303 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#820303', endColorstr='#820303',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	transition: linear !important;
}
.hd-flashbg{
	background-color: #820303 !important;
	-webkit-animation: colorrun 20s infinite;
	-o-animation: colorrun 20s infinite;
	animation: colorrun 20s infinite;
}
.hd-yoyo {
	box-shadow: 0 0 100px 100px #000 inset;
}

.hd-starryNight {background: #820303 !important; }

.starry_night {display: none; }
.starry_night li {
	width: 10%;
	height: 10%;
	background-color: #FFF;
	position: absolute;
	background: #ff0000;
	-webkit-animation: starryNight 2s infinite;
	-o-animation: starryNight 2s infinite;
	animation: starryNight 2s infinite;
	opacity: 0;
}

.starry_night li:nth-child(1) {
	width: 20%;
	height: 40%;
	left: 5%;
	top: 8%;
	animation-delay: .4s;
}
.starry_night li:nth-child(2) {
	width: 20%;
	height: 5%;
	left: 40%;
	top: 52.5%;
	animation-delay: 1.5s;
}
.starry_night li:nth-child(3) {
	width: 45.5%;
	height: 40%;
	left: 16%;
	top: 50%;
	-webkit-transform: skewX(-20deg);
	   -moz-transform: skewX(-20deg);
		-ms-transform: skewX(-20deg);
		 -o-transform: skewX(-20deg);
			transform: skewX(-20deg);
	animation-delay: .25s;
}
.starry_night li:nth-child(4) {
	width: 20%;
	height: 15%;
	left: 58%;
	top: 72%;
	animation-delay: .75s;
}
.starry_night li:nth-child(5) {
	width: 10%;
	height: 20%;
	left: 90%;
	top: 2%;
	animation-delay: .1s;
}

@-webkit-keyframes static{
	0% {opacity: 1}
	50%{opacity: 1}
}
@keyframes static{
	0% {opacity: 1}
	50%{opacity: 1}
}
@-webkit-keyframes breathing{
	0% {opacity: 1}
	50%{opacity: 0}
}
@keyframes breathing{
	0% {opacity: 1}
	50%{opacity: 0}
}
@-webkit-keyframes strobing{
	0% {opacity: 1}
	50%{opacity: 0}
}
@keyframes strobing{
	0% {opacity: 1}
	50%{opacity: 0}
}
@-webkit-keyframes music{
	0%  {opacity: 1}
	10% {opacity: .3}
	40% {opacity: 1}
	60% {opacity: .3}
	70% {opacity: 1}
	100%{opacity: .3}
}
@keyframes music{
	0%  {opacity: 1}
	10% {opacity: .3}
	40% {opacity: 1}
	60% {opacity: .3}
	70% {opacity: 1}
	100%{opacity: .3}
}
@-webkit-keyframes cycle{
	0%		{background-color: red}
	15%		{background-color: orange}
	30%		{background-color: yellow}
	45%		{background-color: #00CB07}
	60%		{background-color: #07A9FF}
	75%		{background-color: #1044FF}
	90%		{background-color: #a12fd9}
	100%	{background-color: red}
}
@keyframes cycle{
	0%		{background-color: red}
	15%		{background-color: orange}
	30%		{background-color: yellow}
	45%		{background-color: #00CB07}
	60%		{background-color: #07A9FF}
	75%		{background-color: #1044FF}
	90%		{background-color: #a12fd9}
	100%	{background-color: red}
}
@-webkit-keyframes rainbow{
	0%   {-webkit-transform: translateX(-50%); }
	100% {-webkit-transform: translateX(-12%); }
}
@keyframes rainbow{
	0%  {transform: translateX(-50%); }
	100%{transform: translateX(-12%); }
}
@-webkit-keyframes cpu{
	0%		{background-color: red}
	30%		{background-color: yellow}
	60%		{background-color: green}
	90%		{background-color: yellow;}
}
@keyframes cpu{
	0%		{background-color: red}
	30%		{background-color: yellow}
	60%		{background-color: green}
	90%		{background-color: yellow;}
}
@keyframes comet{
	0%	{
		z-index: -1;
		width: 200%;
		transform: translateX(-100%);
	}
	100%{
		z-index: -1;
		width: 200%;
		transform: translateX(-25%);
	}
}
@-webkit-keyframes comet{
	0%	{
		z-index: -1;
		width: 200%;
		transform: translateX(-100%);
	}
	100%{
		z-index: -1;
		width: 200%;
		transform: translateX(-25%);
	}
}
@keyframes flash{
	0%	{
		z-index: -1;
		width: 200%;
		transform: translateX(50%);
	}
	100%{
		z-index: -1;
		width: 200%;
		transform: translateX(-100%);
	}
}
@-webkit-keyframes flash{
	0%	{
		z-index: -1;
		width: 200%;
		transform: translateX(50%);
	}
	100%{
		z-index: -1;
		width: 200%;
		transform: translateX(-100%);
	}
}
@-webkit-keyframes yoyo {
	0% {
		z-index: -1;
		width: 150%;
		height: 180%;
		transform: translate(-120%, -30%);
	}
	80% {
		z-index: -1;
		width: 150%;
		height: 180%;
		transform: translate(-20%, -30%);
	}
	81% {
		z-index: -1;
		width: 150%;
		height: 180%;
		transform: translate(-120%, -30%);
	}
	100% {
		z-index: -1;
		width: 150%;
		height: 180%;
		transform: translate(-20%, -30%);
	}
}
@keyframes yoyo {
	0% {
		z-index: -1;
		width: 150%;
		height: 180%;
		transform: translate(-120%, -30%);
	}
	80% {
		z-index: -1;
		width: 150%;
		height: 180%;
		transform: translate(-20%, -30%);
	}
	81% {
		z-index: -1;
		width: 150%;
		height: 180%;
		transform: translate(-120%, -30%);
	}
	100% {
		z-index: -1;
		width: 150%;
		height: 180%;
		transform: translate(-20%, -30%);
	}
}

@-webkit-keyframes wave {
	0% {
		z-index: -1;
		width: 150%;
		height: 180%;
		box-shadow: 0 0 100px 100px #000 inset;
		transform: translate(-120%, -30%);
	}
	50% {
		z-index: -1;
		width: 150%;
		height: 180%;
		box-shadow: 0 0 100px 100px #000 inset;
		transform: translate(-20%, -30%);
	}
	100% {
		z-index: -1;
		width: 150%;
		height: 180%;
		box-shadow: 0 0 100px 100px #000 inset;
		transform: translate(-120%, -30%);
	}
}
@keyframes wave {
	0% {
		z-index: -1;
		width: 150%;
		height: 180%;
		box-shadow: 0 0 100px 100px #000 inset;
		transform: translate(-120%, -30%);
	}
	50% {
		z-index: -1;
		width: 150%;
		height: 180%;
		box-shadow: 0 0 100px 100px #000 inset;
		transform: translate(-20%, -30%);
	}
	100% {
		z-index: -1;
		width: 150%;
		height: 180%;
		box-shadow: 0 0 100px 100px #000 inset;
		transform: translate(-120%, -30%);
	}
}

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

@keyframes starryNight {
	0% {opacity: 0; }
	50% {opacity: 0; }
	100% {opacity: 1; }
}

/* ----------lightbox-------------- */
#lightbox{
	position: relative;
}


/* -----------#sec_kv------------- */
#hd #sec_kv{
	padding: 370px 0 60px;
	min-height: 700px;
	background-image: url(../img/kv-bg.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	text-align: right;
	position: relative;
}
#hd #sec_kv .inner{
	width: 100%;
	text-align: left;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#hd #sec_kv .inner h2.kv_title{
	margin-bottom: 30px;
	display: block;
}
#hd #sec_kv .inner p{
	margin-bottom: 10px;
	text-shadow: rgba(0,0,0,.8) 0px 0px 10px;
}
#hd #sec_kv .text{
	padding-right: 30px;
}
#hd #sec_kv img{
	width: 42%;
	margin-right: 8%;
}

/*-----------#explosion-------------*/
#hd #explosion{
	padding-bottom: 7%;
	background-image: url(../img/ep_bg.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
#hd #explosion > div{
	position: relative;
}
#hd #explosion .icon{
	width: 90px;
	position: absolute;
	left: 5%;
    bottom: 50px;
}
#hd #explosion .explode_box{
	position: relative;
	height: 865px;
	opacity: 0;
	transition: .5s;
}
#hd #explosion .explode_box.anima{
	/* background: url(../img/explode/explode-pc-line.png);
	background-repeat: no-repeat;
    background-position-x: center;
	background-position-y: top; */
	opacity: 1;
}
#hd #explosion .explode_box .explodeline{
	position: relative;
	z-index: 10;
	transform: translateX(-10%) translateY(20%);
	opacity: 0;
	transition: .9s;
}
#hd #explosion .explode_box .explodeline.anima{
	transform: translateX(-10%) translateY(20%);
	opacity: 1;
}
#hd #explosion .explode_box .explode1{
	position: absolute;
	left: 0;
    right: 0;
    top: 40px;
	z-index: 9;
	transform: translateY(30%);
	opacity: 0;
	transition: .9s;
}
#hd #explosion .explode_box .explode1.anima{
	transform: translateY(0);
	opacity: 1;
}
#hd #explosion .explode_box .explode2{
	position: absolute;
	left: 0;
    right: 0;
    top: 202px;
	z-index: 8;
	transform: translateY(40%);
	opacity: 0;
	transition: .9s;
}
#hd #explosion .explode_box .explode2.anima{
	transform: translateY(0);
	opacity: 1;
}
#hd #explosion .explode_box .explode3{
	position: absolute;
	left: 0;
    right: 0;
    top: 270px;
	z-index: 6;
	transform: translateY(30%);
	opacity: 0;
	transition: .9s;
}
#hd #explosion .explode_box .explode3.anima{
	transform: translateY(0);
	opacity: 1;
}
#hd #explosion .explode_box .explode4{
	position: absolute;
	left: 0;
    right: 0;
    top: 290px;
	z-index: 5;
	filter: opacity(0);
	transition: .9s;
}
#hd #explosion .explode_box .explode4.anima{
	filter: opacity(1);
}
#hd #explosion .explode_box .explode5 {
    position: absolute;
    left: 0;
    right: 0;
    top: 420px;
	z-index: 4;
	transform: translateY(-30%);
	opacity: 0;
	transition: .9s;
}
#hd #explosion .explode_box .explode5.anima {
	transform: translateY(0);
	opacity: 1;
}
#hd #explosion .explode_box .explode6 {
    position: absolute;
    left: 0;
    right: 0;
    top: 420px;
	z-index: 3;
	transform: translateY(-30%);
	opacity: 0;
	transition: .9s;
}
#hd #explosion .explode_box .explode6.anima {
	transform: translateY(0);
	opacity: 1;
}
#hd #explosion .explode_box .explode7 {
    position: absolute;
    left: 0;
    right: 0;
	top: 530px;
	z-index: 2;
	transform: translateY(-30%);
	opacity: 0;
	transition: .9s;
}
#hd #explosion .explode_box .explode7.anima {
	transform: translateY(0);
	opacity: 1;
}
#hd #explosion .explode_box .explode8 {
    position: absolute;
    left: 0;
    right: 0;
    top: 590px;
	z-index: 1;
	transform: translateY(-30%);
	opacity: 0;
	transition: .9s;
}
#hd #explosion .explode_box .explode8.anima {
    transform: translateY(0);
	opacity: 1;
}
#hd #explosion .explode_box .explode9 {
    position: absolute;
    left: 0;
    right: 0;
    top: 600px;
	z-index: 0;
	transform: translateY(-30%);
	opacity: 0;
	transition: .9s;
}
#hd #explosion .explode_box .explode9.anima {
    transform: translateY(0);
	opacity: 1;
}
#hd  #explosion .txt{
	position: absolute;
	/* background-color: #000; */
	z-index: 10;
}
#hd  #explosion .txt h4{
	font-weight: 300;
	/* background-color: #000; */
	position: relative;
	display: inline-block;
	z-index: 1;
}
#hd  #explosion .txt p{
	margin-top: 10px;
}
#hd  #explosion .txt1{
	top: 12%;
	right: 70%;
    width: 26%;
}
#hd  #explosion .txt2{
	top: 38%;
	right: 70%;
	width: 26%;
}
#hd  #explosion .txt3{
	top: 67%;
	right: 70%;
	width: 26%;
}
#hd  #explosion .txt4{
	top: 41%;
	left: 75%;
	width: 26%;
}
#hd  #explosion .txt5{
	top: 79%;
	left: 75%;
	width: 26%;
}
#hd  #explosion .no{
	display: none;
}
/*-----------#customization-------------*/
#hd #customization{
	margin-bottom: 7%;
	position: relative;
    overflow: hidden;
}
/* ---------- hd-detailed ---------- */
#hd .hd-detailed{
	padding-bottom: 0px;
	position: relative;
}
/* ---------- hd_sec_lighting ---------- */
#hd .hd_sec_lighting {
	background-color: #000;
}
#hd .hd_sec_lighting .hd-lighting {
	position: relative;
	overflow: hidden;
}
#hd .hd_sec_lighting #colorbox{
	width: 50%;
	height: 0;
	padding-bottom: 110%;
	position: absolute;
	top: 1px;
	right: 1px;
	z-index: 1;
	overflow: hidden;
}
#hd .hd_sec_lighting #color {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}
#hd .hd_sec_lighting .left{
	position: relative;
	z-index: 1;
	padding-right: 35px
}
#hd .hd_sec_lighting .right{
	position: relative;
	z-index: 3;
}
#hd .hd_sec_lighting .right .over-txt{
	position: absolute;
	z-index: 999;
	color: #fff;
}
#hd .hd_sec_lighting .right .over-txt:nth-of-type(1) {
	top: 5%;
	left: 10%;
}
#hd .hd_sec_lighting .right .over-txt:nth-of-type(2) {
	top: 48%;
	left: 10%;
}
#hd .hd_sec_lighting .hd-controls{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	margin-left: -5%;
	margin-bottom: 20px;
	margin-top: 30px
}
#hd .hd_sec_lighting .hd-controls li {
	width: 25%;
	display: inline-block;
	margin: 0;
	vertical-align: top;
	text-align: center;
	padding: 10px 0;
	opacity: 1;
	/* cursor: pointer; */
	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 .hd_sec_lighting .hd-controls li img{
	margin:0 auto 5px;
}
#hd .hd_sec_lighting .hd-controls li small{
	display: block;
	font-weight: bold;
	font-size: 12px;
	letter-spacing: 1px;
	color: #f5ba00
}

#hd .hd_sec_lighting .hd-controls li.lighting-active {
	opacity: 1;
}
#hd .hd-img-stable{
	position: relative;
	z-index: 1;
}
#hd .hd-img-colorrun {
    position: absolute;
    z-index: 0;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-animation: colorrun 10s infinite;
    -moz-animation: colorrun 10s infinite;
    -ms-animation: colorrun 10s infinite;
    -o-animation: colorrun 10s infinite;
    animation: colorrun 10s infinite;
}
/* #colorpicker{
	display: block;
	width: 110px;
	margin:10px 20px 10px auto;
	position: absolute;
	bottom: -130px;
	right: 0;
}
#hd .hd-overlay {
	position: absolute;
	z-index: 8;
	width: 100%;
	top: 0;
	left: 0;
	-webkit-animation: colorrun 3s infinite;
	-moz-animation: colorrun 3s infinite;
	-ms-animation: colorrun 3s infinite;
	-o-animation: colorrun 3s infinite;
	animation: colorrun 3s infinite;
} */


/*-----------#core-------------*/
#hd #core{
	position: relative;
    overflow: hidden;
	margin-bottom: 7%;
	z-index: 3;
}
#hd #core .w1200{
	z-index: 1;
}
#hd #core .product_photo{
	position: absolute;
	top: -4%;
    right: 0%;
    width: 50%;

}
#hd #core .optimized_list li{
	padding: 12px 0;
}
#hd #core .top .title_box,
#hd #core .top .line_box{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	z-index: 1;
}
#hd #core .top .title_box{
	width: 110px;
	padding: 30px 0;
}
#hd #core .top .title_box:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 10px;
	background: -webkit-linear-gradient(left, #ddd 0% ,#777 40% ,#ddd 70% ,#777 100%);
	background: -o-linear-gradient(left, #ddd 0% ,#777 40% ,#ddd 70% ,#777 100%);
	background: -moz-linear-gradient(left, #ddd 0% ,#777 40% ,#ddd 70% ,#777 100%);
	background: linear-gradient(left, #ddd 0% ,#777 40% ,#ddd 70% ,#777 100%);
	z-index: -1;
}
#hd #core .top .title_box:after{
	content: "";
	position: absolute;
	width: 97%;
	height: 97%;
	top: 1.5%;
	left: 1.5%;
	border-radius: 10px;
	/* border: 1px solid #fff; */
	background-color: #000;
	z-index: -1;
}
#hd #core .top .title_box h5{
	font-size: 1.5em;
	text-align: center;
	line-height: .8em;
	letter-spacing: .02em;
	color: #fff;
}
#hd #core .top .title_box h5 span{
	font-size: 14px;
	line-height: 1em;
}
#hd #core .top .line_box{
	width: calc(100% - 120px);
	padding-left: 20px;
}
#hd #core .top .line_box p{
	margin-bottom: 5px;
	font-weight: 400;
}
#hd #core .top .line_box .line_title {
	display: block;
	font-size: 1em;
	line-height: 1em;
	color: #f4b900;
	font-weight: 300;
}
#hd #core .top .line_box .line_sub_title{
	font-size: 1em;
	line-height: 1em;
	color: #fff;
	font-weight: 300;
}
#hd #core .top .line_box .line{
	line-height: 20px;
	padding-bottom: 5px;
}
#hd #core .top .line_box .line span{
	width: 0;
	display: inline-block;
	height: 7px;
	/*border: 1px solid #ddd;*/
	margin-right: 10px;
	transform-origin:bottom;
	transform:skewX(25deg);
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
		-ms-transition: all .5s ease;
		 -o-transition: all .5s ease;
			transition: all .5s ease;
}
#hd #core .top .line_box .line.line_red small{
	color: #f4b900;
	font-weight: 400;
}
#hd #core .top .line_box .line.line_red span{
	background: -webkit-linear-gradient(left,#f4b900,#222);
	background: -o-linear-gradient(left,#f4b900,#222);
	background: -moz-linear-gradient(left,#f4b900,#222);
	background: linear-gradient(left,#f4b900,#222);
}
#hd #core .top .line_box .line.line_white span{
	background: -webkit-linear-gradient(right,#c6c6c6,#6a6a6a);
	background: -o-linear-gradient(right,#c6c6c6,#6a6a6a);
	background: -moz-linear-gradient(right,#c6c6c6,#6a6a6a);
	background: linear-gradient(right,#c6c6c6,#6a6a6a);
}
#hd #core .top .line_box .line.line_01_1 span.active{
	width: calc(100% - 100px);
}
#hd #core .top .line_box .line.line_01_2 span.active{
	width: calc(100% - 100px - 15%);
}
#hd #core .top .line_box .line.line_02_1 span.active{
	width: calc(100% - 100px - 25%);
}
#hd #core .top .line_box .line.line_02_2 span.active{
	width: calc(100% - 100px - 35%);
}
#hd #core ul.bottom{
	display: flex;
	flex-wrap: wrap;
	/* padding-top: 100px; */
}
#hd #core ul.bottom li{
	/* width: 50%; */
	margin-bottom: 30px;
}

#hd #core ul.bottom li{
	border-left: 5px solid #f4b900;
	padding: 0 30px 0 20px;
}
#hd #core ul.bottom li h5{
	font-weight: 300;
	margin-bottom: 4%;
}
#hd #core ul.bottom li p{
	margin-bottom: 0;
}

/* ------------ armoury ----------- */
#hd #armoury{
	position: relative;
    overflow: hidden;
	margin-bottom: 7%;
	z-index: 3;
	display: none;
}
#hd #armoury.hd-active{
	display: block;
	animation: fadeInFromBottom .8s cubic-bezier(.5, .38, .22, .98) forwards;
}
#hd .hd_armoury_area{
	padding-top: 50px
}
#hd .hd_armoury_filter{width: 255px; }
#hd .hd_armoury_filter li{
	border:1px solid #fabf3a;
	padding:20px 15px;
	margin-bottom: 20px;
	cursor: pointer;
}
#hd .hd_armoury_filter li.hd_active{
	background: #fabf3a;	}
#hd .hd_armoury_filter li h4{
	color:#fabf3a;
	margin-bottom: 0;
	font-size: 1.125em;
	-webkit-transition: color .25s ease;
	-moz-transition: color .25s ease;
	-ms-transition: color .25s ease;
	-o-transition: color .25s ease;
	transition: color .25s ease;
}
#hd .hd_armoury_filter li:hover h4{
	color:#fabf3a;		
}
#hd .hd_armoury_filter li.hd_active h4{
	color:#000;
}
#hd .hd-sec-armoury .fright{
	width: calc(100% - 255px);
	padding-left: 20px;
}
#hd .hd_armoury_content {
	width: 100%;
}
#hd .hd_armoury_content li{
	height: 0;
	opacity: 0;
	visibility: none;
}
#hd .hd_armoury_content li.hd_active{
	height: auto;
	opacity: 1;
	visibility: visible;
}
#hd .hd_armoury_content figure{
	width: 100%;
	height: 0;
	padding-bottom: 55.2857%;
	background: 0 0 no-repeat;
	background-size: contain;
}
#hd .hd_armoury_content .owl-dots{
	width: 100%;
	position: absolute;
	top: 100%;
	margin:10px 0;
	text-align: center;
}
#hd .hd_armoury_content .owl-dots.disabled{
	display: none
}
#hd .hd_armoury_content .owl-dot{
	display: inline-block;
	vertical-align: top;
	width: 10px;
	height: 10px;
	border-radius: 6px;
	background: #333333;
	margin:5px;
}
#hd .hd_armoury_content .owl-dot.active{background: #fabf3a; }
#hd .hd-sec-armoury .hd_btn{
	display: inline-block;
	padding:10px 20px;
	font-size: 1.125em;
	font-weight: bold;
	color:#fabf3a;
	background: #000000;
	background-clip: padding-box;
	border:2px solid transparent;
	border-radius: 10px;
	margin:50px 0 0;
	position: relative;
	-webkit-transition: color .25s ease;
	-moz-transition: color .25s ease;
	-ms-transition: color .25s ease;
	-o-transition: color .25s ease;
	transition: color .25s ease;
}
#hd .hd-sec-armoury .hd_btn:before{
	content:'';
	display: block;
	position: absolute;
	top: 0;right: 0;bottom: 0;left: 0;
	z-index: -1;
	margin: -2px;
	border-radius: inherit;
	background: linear-gradient(to right, #fabf3a, #fabf3a, #fabf3a);
}
#hd .hd-sec-armoury .hd_btn:hover{
	color:#fabf3a;
}

/* ---------- compatibility --- */	
#hd #compatibility{
	background-color: #000;
	position: relative;
	z-index: 5;
    margin-bottom: 7%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}
#hd #compatibility article{
	text-align: center;
	margin: 4% auto;
}
#hd #compatibility h2{
	position: relative;
	z-index: 3;
}
#hd #compatibility .title_box{
	width: 370px;
	margin: 50px auto 0 0;
	padding: 24px 0;
	display: block;
	position: relative;
	text-align: left;
	z-index: 3;
	vertical-align: middle;
	text-align: center;
}
#hd #compatibility .title_box h4{
	position: relative;
	margin-top: 10px;
	margin-bottom: 10px;
	z-index: 3;
	font-weight: 300;
}
#hd #compatibility ul.support_list li{
	position: relative;
	padding: 13px 0;
	z-index: 3;
}
#hd #compatibility .text{
	position: relative;
	display: block;
	margin: auto;
	vertical-align: middle;
}
#hd #compatibility .title_box h5{
	display: inline-block;
	margin-bottom: 10px;
	padding-bottom: 5px;
	position: relative;
	font-size: 1.3em;
	border-bottom: #ddd 1px solid;
	z-index: 3;
}
#hd #compatibility .title_box:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 10px;
	background: -webkit-linear-gradient(left, #ddd 0% ,#777 40% ,#ddd 70% ,#777 100%);
	background: -o-linear-gradient(left, #ddd 0% ,#777 40% ,#ddd 70% ,#777 100%);
	background: -moz-linear-gradient(left, #ddd 0% ,#777 40% ,#ddd 70% ,#777 100%);
	background: linear-gradient(left, #ddd 0% ,#777 40% ,#ddd 70% ,#777 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#25D1DB',GradientType=1 );
	z-index: 1;
}
#hd #compatibility .title_box:after{
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 10px;
	background: #111111;
	background-color: #000;
	z-index: 1;
}
#hd #compatibility .text{
	width: calc(100% - 100px);
}
#hd #compatibility .text p{
	margin-bottom: 0;
}
#hd #compatibility img{
	transform: translate(-30%, 7%) scale(1.9);
	transform-origin: left;
}


/* ---------- build--- */
#hd #build {
	margin-bottom: 5%;
	position: relative;
}
#hd #build .hd-sec-alliance .w1200 {
	direction: ltr;
}
#hd #build .hd-sec-alliance .right {
	direction: rtl;
}
#hd #build .hd-sec-alliance .hd-magnifier {
	position: relative;
	width: 95%;
	margin: auto;
	padding-bottom: 95%;
}
#hd #build .hd-sec-alliance h4 span,
#hd #build .hd-sec-alliance h4 img {
	display: inline-block;
	vertical-align: middle;
}
#hd #build .hd-sec-alliance h4 span {
	padding-right: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	-webkit-text-fill-color: currentColor;
}
#hd #build .hd-sec-alliance .alliance_logo {
	width: 95px;
	margin: 30px 0 0;
}
#hd #build .hd-sec-alliance p {
	/*max-width: 595px;*/
}
#hd #build .hd-sec-alliance p i {
	font-weight: bold;
	font-style: italic !important;
	display: inline-block;
}
#hd #build .hd-sec-alliance .img_content {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#hd #build .hd-sec-alliance .img_content .hd-photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform .1s ease-out;
	cursor: crosshair;
}




@keyframes fadeInFromBottom {
	0%{opacity: 0;}
	100%{opacity: 1;}
}