@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Roboto');
@font-face {
	font-family: 'Xolonium';
	src: url('../fonts/xolonium-Regular.otf'),
		 url('../fonts/xolonium-Regular.otf') format('embedded-opentype'),
		 url("../fonts/xolonium-Regular.ttf") format("opentype"),
		 url("../fonts/xolonium-regular.eot");
	font-weight: normal;
	font-style: normal;
}
/* ---------- RESET ---------- */
	html,
	body{
		margin: 0;
	}
	#hd * {
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style-type: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		word-wrap: break-word;
		word-break: break-word;
	}
	::selection {
		background: #1d2124;
		color: #CE0000;
	}
	::-moz-selection {
		background: #1d2124;
		color: #ffffff;
	}
	#hd{
		font-family: "Roboto Condensed", "Arial", sans-serif;
		background: black;
		color: #FFF;
		font-size: 16px;
		margin: 0;
		padding: 0;
		background-attachment: fixed;
		background-color: #000;
	}
	#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;
	}
	#hd img{
		display: block;
		height: auto;
		border:none;
		max-width: 100% !important;
		margin:0 auto;
	}
/* ---------- TXT ------------ */
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6,
	#hd a,
	#hd p,
	#hd b,
	#hd small{
		font:inherit;
		color:inherit;
	}
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6{
		font-family: 'Xolonium', sans-serif;
		font-weight: 400;
		letter-spacing: .03em;
	}
	#hd h1{
		font-size: 5em;
		padding-bottom: 25px;
		text-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
		line-height: .8em;
	}
	#hd h2{
		position: relative;
		font-size: 3.3em;
		display: inline-block;
		text-transform:uppercase;
		/*padding-bottom: 50px;*/
		line-height: 1.4em;
	}
	#hd h3{
		font-size: 2.2em;
		display: inline-block;
		padding-bottom: 35px;
		color: #b60b01;
		line-height: 1.2em;
		text-shadow: black 0em 0em 0.3em;
	}
	#hd h5{
		margin-bottom: 0;
	}
	#hd h6{
		font-size: 1.2em;
	}
	#hd a,
	#hd p,
	#hd b,
	#hd small{
		font-family: "Roboto Condensed", "Arial", sans-serif;
		font-weight: 300;
	}
	#hd p {
		font-size: 1.05em;
		letter-spacing: .05em;
		font-weight: 300;
		line-height: 1.7em;
		margin: 0;
		margin-bottom: 25px;
	}
	#hd small {
		font-size: .9em; 
		color: #999;
		line-height: 1.6em;
		font-weight: 300;
		letter-spacing: .08em;
	}
	#hd .txt-gradient-w{
		color: #fff !important;
	    background: #f81a1a;
	    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);
	}
	#hd .txt-gradient-r{
		color: #f81a1a !important;
	    background: #f81a1a;
	    background: -webkit-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: -o-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: -moz-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: linear-gradient(to right, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    -webkit-background-clip: text; 
	    -webkit-text-fill-color: transparent;
	    text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
	}
	/*ie11 above fixed*/
	_:-ms-fullscreen,
	:root #hd .txt-gradient{
	    background: transparent !important;
	}
	#hd .txt-center {
		text-align: center; 
	}
	#hd .txt-left {
		text-align: left; 
	}
/* ---------- BLOCK ---------- */
	#hd .w90 {
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1920 {
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
	}
	#hd .w1200{
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1200 {max-width: 1200px; }
	#hd .col25,
	#hd .col33,
	#hd .col40,
	#hd .col45,
	#hd .col50,
	#hd .col55,
	#hd .col60,
	#hd .col70,
	#hd .col80  {
		display: inline-block;
		margin-left: -5px;
		vertical-align: middle;
	}
	#hd .col25 {width: 25%; }
	#hd .col33 {width: 33.33%; }
	#hd .col40 {width: 40%; }
	#hd .col45 {width: 45%; }
	#hd .col50 {width: 50%; }
	#hd .col55 {width: 55%; }
	#hd .col60 {width: 60%; }
	#hd .col70 {width: 70%; }
	#hd .col80 {width: 80%; }

	#hd .h750{
		height: 750px;
	}

	#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 .hd_mobile-on,
	#hd .hd_480on,
	#hd .hd_620on,
	#hd .hd_1024-on {display: none;}
	#hd .hd_btn{
		display: inline-block;
		min-width: 210px;
		border:1px solid #b60b01;
		margin:15px 0;
		border-radius: 5px;
		font-weight: 400;
		letter-spacing: 1px;
		text-align: center;
		cursor: pointer;
		position: relative;
		transition: .3s;
	}
	#hd .hd_btn p{
		display: inline-block;
		position: relative;
		margin: 10px;
		font-size: 1.3em;
		z-index: 3;
		font-weight: bold;
		color: #b60b01;
		font-family: 'Xolonium';
	}
	/* #hd .hd_btn:before{
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 10px;
		background: #111111;
	    background: -moz-linear-gradient(90deg,  #b60b01 0%,  #45000e 80%, #b60b01 100%);
	    background: -webkit-linear-gradient(90deg, #b60b01 0%, #45000e 80%, #b60b01 100%);
	    background: linear-gradient(90deg,#b60b01 0%, #45000e 80%, #b60b01 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#777',GradientType=1 );
	    z-index: 1;
	}
	#hd .hd_btn:after{
		content: "";
		position: absolute;
		width: calc(100% - 2px);
		height: calc(100% - 2px);
		top: 1px;
		left: 1px;
		border-radius: 10px;
		background: #111111;
	    background-color: #000;
	    z-index: 1;
	} */
	#hd .hd_btn:hover{
		transform: scale(1.05);
	}
	/* #hd .hd_btn:before,
	#hd .hd_btn:after{
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		border: 0px solid #555;
		position: absolute;
		transition: .4s;
	}
	#hd .hd_btn:before {
		top: -1px;
		right: -1px;
		border-top-width: 1px;
		border-right-width: 1px;
	}
	#hd .hd_btn:after {
		bottom: -1px;
		left: -1px;
		border-bottom-width: 1px;
		border-left-width: 1px;
	}
	#hd .hd_btn:hover{color: #00cccc;}
	#hd .hd_btn:hover:before,
	#hd .hd_btn:hover:after{
		width: 100%;
		height: 100%;
		border-color: #00cccc;
	} */
/*----------- COLOR -----------*/
	#hd .color-primary{
		color: #b60b01;
	}
	#hd .color-grey {
		color: #3e3a39;
	}
	#hd .color-white {
		color: #fff;
	}
	#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;
	}
	#fp-nav ul li.active a span,
	#fp-nav ul li.active:hover a span,
	#fp-nav ul li.active:hover a span {
		top: 0;
		left: 0;
		right: 0;
		height: 13px;
		width: 13px;
		margin: auto;
		background-color: #f51301;
	}
	#fp-nav ul li:hover a span {
		background-color: #f51301;
	}
	#fp-nav ul li .fp-tooltip {
		color: #f51301;
	}
	#fp-nav ul li.active .fp-tooltip {
		top: 5px;
	}	
/* ---------- 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 #8D0000;
		-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: #8D0000;
	    -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: #8D0000;
	}

/* ---------- main------------ */
	#hd .sec_padding{
		position: relative;
		padding: 60px 0 120px;	
	}
	#hd section{
		position: relative;
		text-align: center;
	}
	#hd section article{
		position: relative;
		text-align: left;
	}
	#hd .article_padding{
		padding: 100px 0;
	}
	#hd section.top_decoration:before{
		content: "";
		position: absolute;
		width: 100%;
		height: 0;
		padding-top: 17%;
		/*border: 1px solid #ddd;*/
		left: 0;
		top: -100px;
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
	}
	#hd section#customization.top_decoration:before{
		background-image: url(../img/frame01.png);
	}
	#hd section#core.top_decoration:before{
		background-image: url(../img/frame02.png);
	}
	#hd section#compatibility.top_decoration:before{
		background-image: url(../img/frame03.png);
	}
/* ---------- kv-------------- */
	#hd #kv{
		padding-top: 10px;
		padding-bottom: 50px;
	}
	#hd #kv .banner{
		position: relative;
		max-width: 1920px;
		margin: 0 auto;
		margin-top: -130px;
		z-index: -1;
	}
	#hd #kv .banner .banner_pc{
		display: block;
	}
	#hd #kv .banner .banner_m{
		display: none;
	}
	#hd #kv .banner ul.text_list{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	#hd #kv .banner ul.text_list span{
		display: none;
	}
	#hd #kv .banner ul.text_list li{
		position: absolute;
	}
	#hd #kv .banner ul.text_list li:nth-child(1){
		top: 22%;
		left: 63%;
	}
	#hd #kv .banner ul.text_list li:nth-child(2){
		top: 53%;
		left: 27%;
	}
	#hd #kv .banner ul.text_list li:nth-child(3){
		top: 88%;
		left: 54.5%;
	}
	/* #hd #kv .banner ul.text_list li:nth-child(4){
		bottom:53%;
		left: 68%;
	}
	#hd #kv .banner ul.text_list li:nth-child(5){
		bottom:16%;
		left: 66%;
	} */
/* ---------- customization--- */
	/*lighting*/
		#hd #customization h2{
			position: relative;
			z-index: 1;
		}
		#hd #customization .lighting .bg{
			position: absolute;
			bottom: 14%;
			right: 0;
			width: 65%;
			z-index: 4;
		}
		#hd #customization .lighting .lighting_control{
			padding-left: 20px;
			position: relative;
			width: 50%;
			z-index: 5;
		}
		#hd #customization .lighting .lighting_control h3{
			margin-right: -50px;
		}
		#hd #customization .lighting .lighting_effect{
			position: absolute;
			width: 70%;
			max-width: 790px !important;
			top: -20%;
			left: -20%;
		}
		#hd .hd-lighting {
		    height: 100%;
		    position: relative;
		    overflow: hidden;
		}
		#hd #colorbox {
		    width: 98%;
		    height: 98%;
		    margin-top: 1px;
		    position: absolute;
		    top: 1%;
		    left: 1%;
		    z-index: -1;
		    overflow: hidden;
		}
		#greybg {
		    background-color: #000000;
		    z-index: -2;
		}
		#color, #greybg {
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    top: 0;
		    left: 0;
		}
		#hd .hd-controls {
		    display: flex;
		    flex-wrap: wrap;
		    max-width: 400px;
		    justify-content: flex-start;
		    margin-left: -5%;
		    position: relative;
		}
		#hd .hd-controls li {
		    width: 33%;
		    cursor: pointer;
		    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-controls li:hover,
		#hd .hd-controls li.active{
			opacity: 1;
		}
		#hd .hd-controls li figure {
		    display: block;
			width: 90%;
			padding-bottom: 50%;
		    max-width: 65px !important;
			margin: 20px auto 10px;
			background-size: 200%;
			background-position: 0;
		}
		#hd .hd-controls li:hover figure,
		#hd .hd-controls li.active figure{
			background-position: 100%;
		}
		#hd #colorpicker {
		    position: absolute;
		    bottom: 0;
		    right: 0;
		}
		#hd .hd-rainbow {
		    height: 500% !important;
		    width: 100%;
			background: url(../img/rainbow22.jpg) 0 0 repeat;
		}
	/*perfect*/
		#hd #customization .perfect{
			position: relative;
			padding: 250px 0 200px;
			/* margin-top: -120px; */
			margin-top: -60px;
			margin-bottom: -120px;
			text-align: center;
			z-index: 2;
			background-image: url(../img/armoury\ crate-bg.jpg);
			background-position: center -20px;
			background-size: 100%;
			background-repeat: no-repeat;
		}
		#hd #customization .perfect h3{
			display: block;
		}
		#hd #customization .perfect .text{
			width: calc(45% - 84px);
			margin-right: 80px;
			display: inline-block;
			/* margin-top: 50px; */
			text-align: left;
			vertical-align: top;
		}
		#hd #customization .perfect img.bg{
			/* position: absolute; */
			width: calc(55% - 4px);
			display: inline-block;
			max-width: 1020px !important;
			right: 0;
			top: 0;
			z-index: -1;
			vertical-align: top;
		}
		#hd #customization .perfect .sycn_logo{
			margin: 0;
			margin-top: -50px;
			margin-left: auto;
			max-width: 130px !important;
		}


		#hd .hd_armoury_content .owl-dots {
			width: 100%;
			position: absolute;
			top: 100%;
			margin: 18px 0 10px;
			text-align: center;
			display: block;
		}
		
		
		
		
		
		/*-----------#armoury-------------*/
		
		/* ---------- btn ---------- */
		
		
		#hd .d-flex{
			display: flex;
		}
		#hd .flex-wrap{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		
		
		
		#hd .blue_btn{
			cursor: pointer;
			border: 1px solid #b60b01;
			color:#b60b01;
			border-radius: 10px;
			width: 350px;
			z-index: 10;
			margin: 0 auto;
			margin-top: 7%;
		}
		#hd .blue_btn h5{
			position: relative;
			padding: 4%;
		}
		#hd .blue_btn h5 span{
			position: absolute;
			top: 48%;
			left: 80%;
		}
		
		
		#hd #armoury{
			display: none;
			position: relative;
			overflow: hidden;
			padding-top: 5%;
			margin-bottom: 5%;
		}
		#hd #armoury .flex-wrap.bottom_box{
			align-items: flex-start;
		}
		#hd #armoury.hd-active{
			display: block;
			-webkit-animation: fadeInFromBottom .8s cubic-bezier(.5, .38, .22, .98) forwards;
			-o-animation: fadeInFromBottom .8s cubic-bezier(.5, .38, .22, .98) forwards;
			animation: fadeInFromBottom .8s cubic-bezier(.5, .38, .22, .98) forwards;
		}
		#hd .hd-sec-armoury {
			padding: 0px 0 5%;
		}
		
		#hd .hd-sec-armoury h3+p {
			margin: 4% auto 5%;
		}
		
		#hd .hd_armoury_filter {
			width: 30%;
			transform: translateY(-44px);
		}
		#hd .hd_armoury_filter .bottom_box{
			justify-content: center;
			
		}
		#hd .hd_armoury_filter li {
			border: 1px solid  white;
			border-radius: 10px;
			padding:15px;
			margin-bottom: 15px;
			cursor: pointer;
			transition: .3s;
		}
		#hd .hd_armoury_filter li:hover,
		#hd .hd_armoury_filter li.hd_active {
			border: 1px solid #b60b01;
			background-color:#b60b01;
			color: #b60b01;
		}
		
		#hd .hd_armoury_filter li h4 {
			color: white;
			margin-bottom: 0;
			font-size: 1.125em;
		
		}
		
		#hd .hd_armoury_filter li:hover h4,
		#hd .hd_armoury_filter li.hd_active h4 {
			color: #ffffff;
		}
		
		#hd .hd-sec-armoury .fright {
			width: calc(100% - 30%);
			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: 48%;
			background: 0 0 no-repeat;
			background-size: contain;
			background-position: center;
		}
		
		#hd .hd_armoury_content .owl-dots {
			width: 100%;
			position: absolute;
			top: 100%;
			margin: 18px 0 10px;
			text-align: center;
			display: block;
		}
		
		#hd .hd_armoury_content .owl-dot {
			display: inline-block;
			vertical-align: top;
			width: 10px;
			height: 10px;
			border-radius: 6px;
			background: #DADADA;
			margin: 5px;
		}
		
		#hd .hd_armoury_content .owl-dot.active {
			background: #b60b01;
		}
		#hd #armoury .blue_btn{
			
			margin-bottom: 7% auto 0 !important;
		}
		
		#hd .hd_armoury_content .owl_fix .owl-dots{
			top:80%;
		}
		
/* ---------- core------------ */
	#hd #core{
		background-color: #1a1a1a;
		position: relative;
		z-index: 3;
	}
	#hd #core article{
		background-image: url(../img/core-to-core-bg.jpg);
		background-size: 80% auto;
		background-position: right 85%;
		background-repeat: no-repeat;
	}
	#hd #core .w1200{
		z-index: 1;
	}
	#hd #core .product_photo{
		position: absolute;
		top: -20%;
		right: -20%;
		width: 70%;
		max-width: 1030px !important;
	}
	#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: #111111;
	    background: -moz-linear-gradient(90deg, #aaa 0%, #bbc3d1 29%, #777777 51%, #bbc3d1 78%, #777 100%);
	    background: -webkit-linear-gradient(90deg, #aaa 0%,#bbc3d1 29%,#777777 51%,#bbc3d1 78%,#777 100%);
	    background: linear-gradient(90deg, #aaa 0%,#bbc3d1 29%,#777777 51%,#bbc3d1 78%,#777 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#777',GradientType=1 );
	    z-index: -1;
	}
	#hd #core .top .title_box:after{
		content: "";
		position: absolute;
		width: 96%;
		height: 96%;
		top: 2%;
		left: 2%;
		border-radius: 10px;
		background: #111111;
	    background-color: #1a1a1a;
	    z-index: -1;
	}
	#hd #core .top .title_box h5{
		font-size: 1.8em;
		text-align: center;
		line-height: .8em;
		letter-spacing: .02em;
	}
	#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;
	}
	#hd #core .top .line_box .line_title {
		display: block;
		font-size: 1em;
		line-height: 1em;
	}
	#hd #core .top .line_box .line{
		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: #b60b01;
	}
	#hd #core .top .line_box .line.line_red span{
		background: -webkit-linear-gradient(left,#b40b01,#5c0b0a);
		background: -o-linear-gradient(right,#b40b01,#5c0b0a);
		background: -moz-linear-gradient(right,#b40b01,#5c0b0a);
		background: linear-gradient(right,#b40b01,#5c0b0a);
	}
	#hd #core .top .line_box .line.line_white span{
		background: -webkit-linear-gradient(left,#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: 150px;
	}
	#hd #core ul.bottom li{
		width: 50%;
	}
	#hd #core ul.bottom li{
		border-left: 5px solid #b60b01;
		padding: 0 30px 0 20px;
	}
	#hd #core ul.bottom li p{
		margin-bottom: 0;
	}
/* ---------- compatibility--- */	
	#hd #compatibility{
		position: relative;
		z-index: 5;
	}
	#hd #compatibility article{
		text-align: center;
		background-size: auto;
    	background-repeat: no-repeat;
		background-position: top center;
	}
	#hd #compatibility h2{
		position: relative;
		z-index: 3;
	}
	#hd #compatibility .title_box{
		width: 370px;
		margin: 120px 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 h6{
		position: relative;
		font-size: 1.6em;
		margin-top: 10px;
		margin-bottom: 10px;
		z-index: 3;
	}
	#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: #aaa 2px solid;
		z-index: 3;
	}
	#hd #compatibility .title_box:before{
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 10px;
		background: #111111;
	    background: -moz-linear-gradient(90deg, #aaa 0%, #bbc3d1 29%, #777777 51%, #bbc3d1 78%, #777 100%);
	    background: -webkit-linear-gradient(90deg, #aaa 0%,#bbc3d1 29%,#777777 51%,#bbc3d1 78%,#777 100%);
	    background: linear-gradient(90deg, #aaa 0%,#bbc3d1 29%,#777777 51%,#bbc3d1 78%,#777 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#777',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;
	}
/* ---------- ANIMATION ---------- */
	@-webkit-keyframes fadeIn{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	@keyframes fadeIn{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	@-webkit-keyframes colorrun {
	    from {
	        -webkit-filter: hue-rotate(0deg);
	        filter: hue-rotate(0deg);
	    }
	    to {
	        -webkit-filter: hue-rotate(359deg);
	        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);
	    }
	}
/* ---------- 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; }
	}