/* ertetwerterertertertertertertertertert */

@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: 1em;
		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 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    background: -o-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    background: -moz-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    background: linear-gradient(to right, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    -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 .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: 240px;
		border:1px solid rgba(0,0,0,.2);
		padding:20px 20px 18px;
		margin:15px 0;
		border-radius: 2px;
		font-weight: 400;
		letter-spacing: 1px;
		text-align: center;
		cursor: pointer;
		position: relative;
	}
	#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-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: 25%;
		left: 25%;
	}
	#hd #kv .banner ul.text_list li:nth-child(2){
		bottom: 15.5%;
		left: 39%;
	}
	#hd #kv .banner ul.text_list li:nth-child(3){
		top: 31%;
		left: 60%;
	}
	#hd #kv .banner ul.text_list li:nth-child(4){
		bottom:50%;
		left: 65%;
	}
	#hd #kv .banner ul.text_list li:nth-child(5){
		bottom:15.5%;
		left: 65%;
	}
/* ---------- customization--- */
	/*liveDash*/
		#hd #customization .liveDash ul.btn_list{
			position: relative;
			padding-top: 35px;
			max-width: 430px;
			z-index: 3;
		}
		#hd #customization .liveDash ul.btn_list li{
			padding: 0 15px;
		}
		#hd #customization .liveDash ul.btn_list li > div {
		    color: #808080;
		    background-color: #000000;
		    cursor: pointer;
		    -webkit-transform: skewX(-40deg);
		    -moz-transform: skewX(-40deg);
		    -ms-transform: skewX(-40deg);
		    -o-transform: skewX(-40deg);
		    transform: skewX(-40deg);
		    position: relative;
		}
		#hd #customization .liveDash ul.btn_list li > div.active{
			background-color: #610301;
		}
		#hd #customization .liveDash ul.btn_list li > div:before {
		    content: '';
		    width: calc(100% + 4px);
		    height: calc(100% + 2px);
		    position: absolute;
		    top: -1px;
		    left: -2px;
		    background: #111111;
		    background: -moz-linear-gradient(45deg, #111111 0%, #bbc3d1 29%, #000000 51%, #bbc3d1 78%, #131313 100%);
		    background: -webkit-linear-gradient(45deg, #111111 0%,#bbc3d1 29%,#000000 51%,#bbc3d1 78%,#131313 100%);
		    background: linear-gradient(45deg, #111111 0%,#bbc3d1 29%,#000000 51%,#bbc3d1 78%,#131313 100%);
		    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#131313',GradientType=1 );
		    z-index: -1;
		}
		#hd #customization .liveDash ul.btn_list li > div:after {
		    content: '';
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    top: 0;
		    left: 0;
		    background: #000000;
		    z-index: -1;
		}
		#hd #customization .liveDash ul.btn_list li > div.active:before,
		#hd #customization .liveDash ul.btn_list li > div.active:after{
			display: none;
		}
		#hd #customization .liveDash ul.btn_list li a {
			display: block;
		    line-height: 1.5em;
		    letter-spacing: .005em;
		    text-align: center;
		    color: inherit;
		    margin-bottom: 0;
		    padding: 25px 0;
		    text-transform: none;
		    -webkit-transform: skewX(40deg);
		    -moz-transform: skewX(40deg);
		    -ms-transform: skewX(40deg);
		    -o-transform: skewX(40deg);
		    transform: skewX(40deg);
		    -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 #customization .liveDash ul.btn_list li a:hover,
		#hd #customization .liveDash ul.btn_list li > div.active a{
			color: #fff;
		}
		#hd #customization .liveDash .product_photo{
			position: relative;
		}
		#hd #customization .liveDash .product_photo .bg{
			position: absolute;
			width: 200%;
			max-width: none !important;
			top: -45%;
			right: -45%;
			z-index: 1;
			opacity: .6;
		}
		#hd #customization .liveDash .product_photo .product_main{
			position: relative;
			z-index: 2;
		}
		#hd #customization .liveDash ul.gif_list{
			position: absolute;
			width: 25%;
			height: 25%;
			top: 34%;
			left: 32%;
			z-index: 3;
		}
		#hd #customization .liveDash ul.gif_list li{
			display: none;
		}
		#hd #customization .liveDash ul.gif_list li.active{
			display: block;
		}
	/*ustomizability*/
		#hd #customization .ustomizability{
			text-align: center;
			background-image: url(../img/ui-bg.jpg);
			background-size: auto 100%;
			background-position: center;
			background-repeat: no-repeat;
		}
		#hd #customization .ustomizability p{
			max-width: 900px;
			margin: 0 auto;
		}
		#hd #customization .ustomizability .ui_list{
			padding-top: 130px;
			padding-bottom: 50px;
		}
		#hd #customization .ustomizability .ui_list img{
			position: relative;
		    width: 130%;
		    max-width: none !important;
		    cursor: pointer;
		    box-shadow: 0 0 20px 3px rgba(0,0,0,.4);
		    -webkit-transform: perspective(700px) rotateY(28deg);
		    -moz-transform: perspective(700px) rotateY(28deg);
		    -ms-transform: perspective(700px) rotateY(28deg);
		    -o-transform: perspective(700px) rotateY(28deg);
		    transform: perspective(700px) rotateY(28deg);
		    -webkit-transition: all .6s ease;
		    -moz-transition: all .6s ease;
		    -ms-transition: all .6s ease;
		    -o-transition: all .6s ease;
		    transition: all .6s ease;
		    border: 1px solid rgba(0,0,0,0);
		}

		#hd #customization .ustomizability .ui_list img:hover{
			/*-webkit-transform: skewX(deg);
		    -moz-transform: skewX(deg);
		    -ms-transform: skewX(deg);
		    -o-transform: skewX(deg);
		    transform: skewX(deg);*/
		    -webkit-transform: perspective(700px) rotateY(-20deg);
		    -moz-transform: perspective(700px) rotateY(-20deg);
		    -ms-transform: perspective(700px) rotateY(-20deg);
		    -o-transform: perspective(700px) rotateY(-20deg);
		    transform: perspective(700px) rotateY(-20deg);
		    border: 1px solid #b60b01;
		    z-index: 2;
		}
		#hd #customization .ustomizability .ui_lightBox{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			/*border: 1px solid #ddd;*/
			display: none;
			z-index: 3;
		}
		#hd #customization .ustomizability .ui_lightBox .bg{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		#hd #customization .ustomizability .ui_lightBox .photo_box{
			position: absolute;
			width: 900px;
			height: 0;
			padding-top: 700px;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
		#hd #customization .ustomizability .ui_lightBox .photo_box img{
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			border: 1px solid #b60b01;
		}
		#hd #customization .ustomizability .ui_lightBox .photo_box span{
			position: absolute;
			width: 40px;
			height: 30px;
			/*border: 1px solid #ddd;*/
			top: 0;
			right: 0;
		}
	/*lighting*/
		#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_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 img {
		    display: block;
		    width: 90%;
		    max-width: 65px !important;
		    margin: 20px auto 10px;
		}
		#hd #colorpicker {
		    position: absolute;
		    bottom: 0;
		    right: 0;
		}
		#hd .hd-rainbow {
		    height: 500% !important;
		    width: 100%;
		    background: url(../img/rainbow.jpg) 0 0 repeat;
		}
	/*perfect*/
		#hd #customization .perfect{
			position: relative;
			padding: 200px 0 250px;
			z-index: 2;
		}
		#hd #customization .perfect img.bg{
			position: absolute;
			width: 55%;
			max-width: 1020px !important;
			right: 0;
			top: 0;
			z-index: -1;
		}
		#hd #customization .perfect .sycn_logo{
			margin: 0;
			margin-top: -50px;
			margin-left: auto;
			max-width: 130px !important;
		}



/*-----------#armoury-------------*/

#hd .hd_armoury_content .owl_fix .owl-dots{
	top:80%;
}


#hd .d-flex{
	display: flex;
}
#hd .flex-wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#hd #armoury{
	display: block;

	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: 7% auto 0 !important;
}












/* ---------- btn ---------- */
#hd .blue_btn{
	cursor: pointer;
	border: 1px solid #b60b01;
	color:#b60b01;
	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%;
}














/* ---------- core------------ */
	#hd #core{
		background-color: #1a1a1a;
	}
	#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 article{
		text-align: right;
	}
	#hd #compatibility h2{
		position: relative;
		z-index: 3;
	}
	#hd #compatibility article img{
		position: absolute;
		top: -10%;
		left: 0;
		width: 55%;
		max-width: 1050px !important;
		z-index: 1;
	}
	#hd #compatibility .col45{
		position: relative;
		text-align: left;
		z-index: 3;
	}
	#hd #compatibility .col45 h6{
		position: relative;
		font-size: 1.6em;
		padding-top: 30px;
		padding-bottom: 10px;
	}
	#hd #compatibility ul.support_list li{
		padding: 13px 0;
	}
	#hd #compatibility ul.support_list .title_box,
	#hd #compatibility ul.support_list .text{
		position: relative;
		display: inline-block;
		vertical-align: middle;
	}
	#hd #compatibility ul.support_list .title_box{
		width: 75px;
		padding: 24px 0;
		text-align: center;
	}
	#hd #compatibility ul.support_list .title_box h5{
		position: relative;
		font-size: 1.3em;
		z-index: 3;
	}
	#hd #compatibility ul.support_list .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: 2;
	}
	#hd #compatibility ul.support_list .title_box:after{
		content: "";
		position: absolute;
		width: 94%;
		height: 94%;
		top: 3%;
		left: 3%;
		border-radius: 10px;
		background: #111111;
	    background-color: #000;
	    z-index: 2;
	}
	#hd #compatibility ul.support_list .text{
		width: calc(100% - 80px);
		padding-left: 18px;
	}
	#hd #compatibility ul.support_list .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: #820303; /* Old browsers */
		background: -moz-linear-gradient(110deg,  #820303 0%, #820303 28%, #ff0000 48%, #ff0000 61%, #820303 79%, #820303 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(110deg,  #820303 0%,#820303 28%,#ff0000 48%,#ff0000 61%,#820303 79%,#820303 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(110deg,  #820303 0%,#820303 28%,#ff0000 48%,#ff0000 61%,#820303 79%,#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 */
	}
	.hd-flashbg{
		background-color: #820303 !important;
		-webkit-animation: colorrun 6s infinite;
		-o-animation: colorrun 6s infinite;
		animation: colorrun 6s 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(-4.9%); }
	}
	@keyframes rainbow{
		0%	{transform: translateY(-50%); }
		100%{transform: translateY(-4.9%); }
	}
	@-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(-100%);
		}
		100%{
			z-index: -1;
			width: 200%;
		    transform: translateX(50%);
		}
	}
	@-webkit-keyframes flash{
		0%	{
			z-index: -1;
			width: 200%;
		    transform: translateX(-100%);
		}
		100%{
			z-index: -1;
			width: 200%;
		    transform: translateX(50%);
		}
	}
	@-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; }
	}