@charset 'utf-8';
/* @import url("http://fonts.googleapis.com/css?family=Roboto:100,300,400&subset=latin"); */
@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;
}
/* --------------------------Reset------------------------ */
	body{
		margin: 0;
		background-color: black;
	}
	#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;
    }
    ::selection {
        background: #1d2124;
        color: #CE0000;
    }
    ::-moz-selection {
        background: #1d2124;
        color: #ffffff;
    }
    #hd{
		font-family: 'Roboto', sans-serif;
        background: black;
        color: black;
		font-size: 16px;
		line-height: 30px;
        margin: 0;
        padding: 0;
        background-attachment: fixed;
		background-color: #F7F9FB;
		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 .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_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{
		font-family: 'Square', sans-serif;
		font-weight: 500;
		position: relative;
		font-size: 3.75em;
		display: block;
		text-transform:uppercase;
		line-height: 1em;
		color: black;
		letter-spacing: 0.2em;
		margin-top: 40px;
		margin: 0;
	}
	#hd h2 span.lowercase{
		text-transform:lowercase;
		
	}
	#hd h3{
		font-family: 'square', sans-serif;
		font-size: 2.25em;
		display: inline-block;
		color: black;
		line-height: 1em;
		letter-spacing: 0.05em;
	}
	#hd h4{
		font-size: 1.8em;
		margin-bottom: 0;
		margin-bottom: 4%
	}
	#hd h5{
		font-family: 'Square', sans-serif;
		font-size: 1.25em;
		margin-bottom: 0;
		line-height: 1em;
	}
	#hd h6{
		font-size: 1.1em;
	}
	/* #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;
    }

/*----------- COLOR -----------*/
	#hd .color-primary{
		color: #c00d3b;
	}
	#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%;
	}

/* ---------- 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 .kvBox{
		position: relative;
	}
	#hd .kvBox .toplogo,
	#hd .kvBox .bottomlogo{
		position: absolute;
	}
	#hd .kvBox img{
		width: 100%;
	}
	#hd .kv-txt{
		position: relative;
		padding: 3% 19% 5%;
	}
	#hd .kv-txt::before{
		position: absolute;
		display: block;
		content: '';
		width: 100%;
		height: 155px;
		top: -58%;	
		left: 50%;
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		background: linear-gradient(90deg, #F7F9FB 14%, #ffffff00 100%);
		background: -moz-linear-gradient(90deg, #F7F9FB 14%, #ffffff00 100%);
		background: -webkit-linear-gradient(90deg, #F7F9FB 14%, #ffffff00 100%);
		background: -o-linear-gradient(90deg, #F7F9FB 14%, #ffffff00 100%);
		z-index: 0;
	}

/* -----------#sec_owl------------- */
#hd #sec_owl #owl_pic{
	position: relative;
}
#hd #sec_owl .owl-nav .owl-prev,#hd #sec_owl .owl-nav .owl-next{
	position: absolute;
	top: 31%;
	width: 2%;
    padding-bottom: 7%;
}
#hd #sec_owl .owl-nav .owl-prev{
	background: url(../img/left.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #ffffff7d;
	right: 65.6%;
}
#hd #sec_owl .owl-nav .owl-next{
	background: url(../img/right.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #ffffff7d;
	left: 65.6%;
}
#lightbox .lb-closeContainer{
	position: absolute;
	left: 80%;
    top: -5%;
	
}
#hd #sec_owl .owl-dots{
	display: flex;
	justify-content: center;
	margin: 1%;
}
#hd #sec_owl #owl_pic .owl-dot{
	width: 10px;
    height: 10px;
    border-radius: 50%;
	background-color: lightgrey;
	margin: 0 1%;
}
#hd #sec_owl #owl_pic .owl-dot.active{
	background-color: #25D1DB;
}
/*-----------#explosion-------------*/
#hd  #explosion{
	padding: 5% 0;
}
#hd  #explosion > div{
	position: relative;
}
#hd  #explosion  .icon{
	position: absolute;
	right: 70%;
    bottom: 9%;
}
#hd  #explosion .explode_box{
	position: relative;
	height: 765px;
	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 .explode1{
	position: relative;
	z-index: 8;
	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: 206px;
	z-index: 7;
	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: 215px;
	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: 355px;
	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: 388px;
	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: 430px;
	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: 500px;
	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: 470px;
	z-index: 1;
	transform: translateY(-30%);
	opacity: 0;
	transition: .9s;
}
#hd #explosion .explode_box .explode8.anima {
    transform: translateY(0);
	opacity: 1;
}
#hd  #explosion .txt{
	position: absolute;
	background-color: #F7F9FB;
}
#hd  #explosion .txt h5{
	font-weight: 300;
}
#hd  #explosion .txt p{
	margin-top: 10px;
}
#hd  #explosion .txt1{
	top: 9%;
	right: 71%;
}
#hd  #explosion .txt2{
	top: 32%;
	width: 34%;
}
#hd  #explosion .txt3{
	top: 58%;
	width: 34%;
}
#hd  #explosion .txt4{
	top: 40%;
	left: 70%;
	width: 34%;
}
#hd  #explosion .txt5{
	top: 70%;
	left: 70%;
	width: 34%;
}
#hd  #explosion .no{
	display: none;
}
/*-----------#customization-------------*/
#hd #customization,#hd #armoury,#hd #core{
	position: relative;
    overflow: hidden;
	padding-top: 5%;
    margin-bottom: 5%;
}

#hd #customization::before,
#hd #armoury::before,
#hd #core::before{
	position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 600px;
    top: -400px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    background: radial-gradient(ellipse at center, #cdd6e5 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 0;
}
#hd #customization .lighting_effect{
	position: relative;
}
#hd #customization .aura_logo{
	position: absolute;
	right: 35%;
    top: 89%;
}
/*lighting*/
#hd #customization h2{
	position: relative;
	z-index: 1;
}
#hd #customization .lighting {
	margin: 3% auto;
}
#hd #customization .lighting_control{
	padding: 0 2%;
}
#hd #customization .lighting_control p{
	margin: 3% auto;
	text-align: left;
}
#hd #customization .lighting_control b{
	white-space: nowrap;
	font-size: 1em;
}
#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: 100%;
    justify-content: flex-start;
	position: relative;
	margin-left: -5%;
}
#hd .hd-controls li {
	width: 13.2%;
	cursor: pointer;
	opacity: .5;
	margin: 0 10px;
	-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%;
	height: 57%;
	padding-bottom: 72%;
	max-width: 65px !important;
	margin: 20px auto 10px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0;
	filter: brightness(0);
}
#hd .hd-controls li:hover figure,
#hd .hd-controls li.active figure{
	background-position: 100%;
	filter: brightness(1);
}
#hd #colorpicker {
	position: absolute;
	bottom: 0%;
    left: 85%;
}
#hd .hd-rainbow {
	height: 500% !important;
	width: 100%;
	background: url(../img/rainbow22.jpg) 0 0 repeat;
}


/*-----------#armoury-------------*/
#hd #armoury{
	display: none;
}
#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 #000;
	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 #25D1DB;
	background-color: #25D1DB;
	color: white;
}

#hd .hd_armoury_filter li h4 {
    color: #000;
    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;
}

#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: #25D1DB;
}
#hd #armoury .blue_btn{
	margin: 7% auto 0 !important;
}


/*-----------#core-------------*/
#hd #core{
	position: relative;
	z-index: 3;
}
#hd #core article{
	margin: 5% auto;
}
#hd #core .w1200{
	z-index: 1;
}
#hd #core .product_photo{
	position: absolute;
	top: -9%;
    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;
	z-index: -1;
}
#hd #core .top .title_box:after{
	content: "";
	position: absolute;
	width: 96%;
	height: 96%;
	top: 2%;
	left: 2%;
	border-radius: 10px;
	border: 1px solid #25D1DB;
	z-index: -1;
}
#hd #core .top .title_box h5{
	font-size: 1.8em;
	text-align: center;
	line-height: .8em;
	letter-spacing: .02em;
	color: #25D1DB;
}
#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: #25D1DB;
	font-weight: 300;
}
#hd #core .top .line_box .line_sub_title{
	color: #000;
	font-weight: 300;
}
#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: #25D1DB;
	font-weight: 400;
}
#hd #core .top .line_box .line.line_red span{
	background: -webkit-linear-gradient(left,#1fb5bd,#25D1DB);
	background: -o-linear-gradient(left,#1fb5bd,#25D1DB);
	background: -moz-linear-gradient(left,#1fb5bd,#25D1DB);
	background: linear-gradient(left,#1fb5bd,#25D1DB);
}
#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: 150px;
}
#hd #core ul.bottom li{
	width: 50%;
}

#hd #core ul.bottom li{
	border-left: 5px solid #25D1DB;
	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;
}

/* ---------- compatibility--- */	
#hd #compatibility{
	background-color: #000;
	position: relative;
	z-index: 5;
    padding: 5% 0 2%;
	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: 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;
	font-weight: 600;
}
#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: #25D1DB 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: #25D1DB;
	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;
}