@charset "utf-8";



body{

	margin: 0;

	padding: 0;

}

/* ======================================================



	Grobal Customize



====================================================== */

#globalheader {

	position: relative;

	z-index: 11;

}

#globalfooter {

	position: relative;

	z-index: 11;

}

/* ======================================================



	Web Font

	This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers.

	You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software.

	Please contact Monotype with any questions regarding Web Fonts: http://www.fontshop.com





====================================================== */

@font-face{

    font-family:"DIN W01 Light";

    src:url("../fonts/5590868/25df6f92-ec41-4f60-91af-bddc19a3adc2.eot?#iefix");

    src:url("../fonts/5590868/25df6f92-ec41-4f60-91af-bddc19a3adc2.eot?#iefix") format("eot"),

        url("../fonts/5590868/e39ef3e7-91b2-45d0-8c2f-cfdcd0c0ab94.woff2") format("woff2"),

        url("../fonts/5590868/83ff78fa-6d76-4fb5-8bff-8af8eec8e368.woff") format("woff"),

        url("../fonts/5590868/9be9615e-18d6-4bf7-bb05-068341c85df3.ttf") format("truetype");

}

@font-face{

    font-family:"DIN W01 Cond Light";

    src:url("../fonts/5591135/43f36f9f-812c-4997-b913-e40c0fe474ba.eot?#iefix");

    src:url("../fonts/5591135/43f36f9f-812c-4997-b913-e40c0fe474ba.eot?#iefix") format("eot"),

        url("../fonts/5591135/141fbcac-495d-4727-b274-029324101926.woff2") format("woff2"),

        url("../fonts/5591135/80fe870b-f24d-4071-b20d-3d02b92cd7c3.woff") format("woff"),

        url("../fonts/5591135/d24d4255-ea28-4022-9fe6-de3ce03cbfff.ttf") format("truetype");

}

@font-face{

    font-family:"DIN W01 Cond";

    src:url("../fonts/5611664/5888c892-31a9-4d70-9c78-f102b2263672.eot?#iefix");

    src:url("../fonts/5611664/5888c892-31a9-4d70-9c78-f102b2263672.eot?#iefix") format("eot"),

        url("../fonts/5611664/c61cd1a0-335d-4e20-b287-0e2dfc539736.woff2") format("woff2"),

        url("../fonts/5611664/48dc5fa9-c08c-4748-8a4d-1337020f2aa7.woff") format("woff"),

        url("../fonts/5611664/c9bf3556-5f99-4c8b-9aec-02b173a602f8.ttf") format("truetype");

}

/* ======================================================



	Common



====================================================== */

.ua,

.ua *{

	box-sizing: border-box;

	margin: 0;

	padding: 0;

}

.ua{

	position: relative;

	max-width: 1200px;

	margin: 0 auto;



	font-family: sans-serif;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

	z-index: 1;

}

.ua img{

	vertical-align: top;

	max-width: 100%;

	height: auto;

}

.ua__inner{

	overflow: hidden;

}

#ua-hero,

#ua-lead,

#ua-prod,

.ua-prod2{

	position: relative;

	z-index: 2;

}

.loading:before {

  content: '';

  box-sizing: border-box;

  position: fixed;



  top: 50%;

  left: 50%;

  width: 60px;

  height: 60px;

  margin-top: -30px;

  margin-left: -30px;

  border-radius: 50%;

  border: 2px solid rgba(255,255,255,0.6);

  border-top-color: rgba(255,255,255,1.0);

  transform: rotate(0deg);

  animation: spinner .6s linear infinite;

  z-index: 5;

}

@keyframes spinner {

  /*to {transform: translate(-50%, -50%) rotate(360deg);}*/

  to {transform: rotate(360deg);}

}



.noscroll{

	overflow: hidden;

}

/* ======================================================



	Background Video



====================================================== */

.ua-video{

	position: absolute; /* !!! */

	top: 0;

	left: 50%;

	width: 100%;

	max-width: 1200px;

	height: 100vh;

	background-color: #1d1d1d;

	overflow: hidden;

	transform: translateX(-50%);

	z-index: 1;

}

.ua-video.fix{

	position: fixed;

}

.ua-video__cover {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background: #000000;

}

#ua__player {

    position: relative;

}

.ua-video iframe{

	max-width: none !important;

}

/* ======================================================



	#ua-lead



====================================================== */

.ua-lead{

	position: relative;

	width: 100%;

	padding-bottom: 20px;



	font-family: 'DIN W01 Cond Light';

	line-height: 1.47;

	text-align: center;

	color: #ffffff;

}

.ua-lead__inner{

	position: relative;

	max-width: 976px;

	margin: 0 auto;

	padding: 0 15px;

}

.ua-lead__title{

	margin-bottom: 50px;

	font-size: 100px;

	text-shadow:0px 0px 6px rgba(0,0,0,0.4);

}

.ua-lead__text{

	margin-bottom: 55px;

	font-size: 37px;

	text-shadow:0px 0px 6px rgba(0,0,0,0.8);

}



@media only screen and (max-width:640px) and (max-device-width:1280px){

	.ua-lead__title{

		font-size: 60px;

	}

	.ua-lead__text{

		font-size: 24px;

	}

}



/* ======================================================



	#ua-solutions



====================================================== */

.ua-solutions{

	margin-bottom: 50px;

}

.ua-sol{

	position: relative;

	width: 100%;

	height: 150vh;

}

.ua-sol:last-child{

	height: 250vh; /* + 100vh */

}

.ua-sol__title,

.ua-sol__text{

	display: none;

}

/* ======================================================



	#sec-product



====================================================== */

.ua-prod{

	position: relative;

	padding-top: 200px;

	text-align: center;

}

.ua-prod__inner{

	position: relative;

	max-width: 976px;

	margin: 0 auto;

	padding: 0 15px;

}

.ua-prod__inner2{

	position: relative;

	max-width: 1200px;

	padding: 0 25px 35px;

	margin: 0 auto;

	text-align: right;

}

.ua-prod__product{

	position: relative;

	margin: 0 auto 100px;

	max-width: 610px;

}

.ua-prod__effect0{

	position: relative;

	z-index: 2;

}

.ua-prod__effect1{

	position: absolute;

	left: calc(230 / 614 * 100%);

	top: calc(497 / 880 * 100%);

	width: calc(150 / 614 * 100%);

	height: calc(135 / 880 * 100%);

	z-index: 2;

}

.ua-prod__effect2{

	position: absolute;

	left: calc(180 / 614 * 100%);

	top: calc(129 / 880 * 100%);

	width: calc(252 / 614 * 100%);

	height: calc(256 / 880 * 100%);

	z-index: 2;

}

.ua-prod__effect3{

	position: absolute;

	left: calc(7 / 614 * 100%);

	top: calc(608 / 880 * 100%);

	width: calc(604 / 614 * 100%);

	height: calc(268 / 880 * 100%);

}



.ua-prod__text{

	margin-bottom: 45px;

	color: #ffffff;

	font-family: DIN W01 Light;

	font-size: 38px;

	letter-spacing: 0.02em;

}



.ua__to-top{

	position: relative;

}

.ua__to-top a{

	display: inline-block;

	transition: all 300ms;

	transform: scale(1.0);

}

.ua__to-top a:hover{

	transform: scale(0.9);

}



@media only screen and (max-width:640px) and (max-device-width:1280px){

	.ua-prod__inner2{

		padding: 100px 15px 35px;

	}

	.ua__to-top a{

		transition: none;

		transform: scale(1.0);

	}

	.ua__to-top a:hover{

		transform: scale(1.0);

	}

}



/* ======================================================



	Hero



====================================================== */

.ua-hero{

	position: relative;

	display: flex;

	justify-content: center;

	align-items: center;

	width: 100%;

	height: 100vh;

}

.ua-hero__logo{

	width: 334px;

	height: 382px;

	/*padding: 0 15px;*/

}

.ua-hero__arrow{

	position: absolute;

	display: block;

	width: 30px;

	height: 30px;

	bottom: 10px;

	left: 50%;

	margin-left: -15px;

	transition: all 300ms;

	opacity: 0;

}

.ua-hero__arrow.animate{

	opacity: 1;

	animation-name: pounding;

	animation-duration: 1.5s;

	animation-iteration-count: infinite;

	animation-timing-function: ease-in-out;

}

@keyframes pounding {

    0% { transform: translate(0, 0) }

    50% { transform: translate(0, 10px)}

    100% { transform: translate(0, 0) }

}

/* ======================================================



	Hexagon



====================================================== */

#ua__fixed{

	/*display: flex;*/

	/*justify-content: center;*/

	/*align-items: center;*/



	top: 0;

	left: 0;

	width: 100% !important;

	height: 100vh;

	max-width: 1200px;

	margin-bottom: 100px;

	z-index: 2;

}

#ua__fixed.enable{

	overflow: hidden;

}

@media only screen and (max-width:1199px){

	#ua__fixed.enable{

		overflow: visible;

	}

}

@media only screen and (max-width:979px){

	#ua__fixed.enable{

		width: 980px !important;

	}

}

@media only screen and (max-width:640px) and (max-device-width:1280px){

	#ua__fixed.enable{

		width: 100% !important;

	}

}

#hex{

	position: absolute;

	top: 50%;

	left: 50%;

	margin-left: -527px;

	margin-top: -507px;

	transform: scale(1);

}



#hex__fig{

	width: 1054px;

	height: 1014px;

	position: relative;

}

#hex__fig img{

	max-width: none;

}

#hex__shadow img{

	max-width: 100%;

}

.hex__base{

	position: absolute;

	width: 338px;

	height: 390px;

	background-image: url(../img/base_black1.png);

	background-repeat: no-repeat;

	background-position: 0 0;

	background-size: 100% 100%;

}

.hex__txt{

	-webkit-backface-visibility: hidden;

	backface-visibility:hidden;

	overflow:hidden;



	display: flex;

	width: 338px;

	height: 390px;

	align-items: center;

	justify-content: center;

}

.hex__txtNo{

	display: none;

}

.hex__txt0{

	position: relative;

	line-height: 1.64;

	font-family: DIN W01 Cond;

	font-size: 23px;

	color: #ffffff;

	text-align: center;

}

	.hex__txt0--sm{

		font-size: 20px;

		line-height: 1.6;

	}



.hex__elm{

	position: absolute;

	width: 120px;

	height: 120px;

}



.hex__catch{

	font-size: 17px;

	font-family: DIN W01 Cond;

	fill: #0091db;

}

.hex__title{

	font-size: 30px;

	font-family: DIN W01 Cond Light;

}

.hex__title--f26{

	font-size: 26px;

}

.hex__text{

	font-size: 11px;

	font-family: DIN W01 Light;

	/*font-family: DIN W01 Cond Light;*/

	fill: #ffffff;

}

/* TEXT */

#hex__base0{ left: 358px; top: 312px; background-image: url(../img/base_blue.png);}



/* HIGH QUALITY SOUND */

#hex__base1{ left: 189px; top: 20px; background-image: url(../img/base_black1.png);}

#hex__base1 .hex__elm{ left: 109px; top: 20px; }	/*icon*/



/* STYLISH HEXAGON DESIGN */

#hex__base2{ left: 527px; top: 20px; background-image: url(../img/base_black2.png);}

#hex__base2 .hex__elm{ left: 109px; top: 16px; }	/*icon*/



/* BLUE ILLUMINATION */

#hex__base3{ left: 696px; top: 312px; background-image: url(../img/base_black3.png);}

#hex__base3 .hex__elm{ left: 109px; top: 11px; }	/*icon*/



/* DJ JUKEBOX */

#hex__base4{ left: 527px; top: 604px; background-image: url(../img/base_black1.png);}

#hex__base4 .hex__elm{ left: 109px; top: 15px; }	/*icon*/



/* KARAOKE */

#hex__base5{ left: 189px; top: 604px; background-image: url(../img/base_black2.png);}

#hex__base5 .hex__elm{ left: 109px; top: 25px; }	/*icon*/



/* DEEP BASS */

#hex__base6{ left: 20px; top: 312px; background-image: url(../img/base_black1.png);}

#hex__base6 .hex__elm{ left: 109px; top: 31px; }	/*icon*/



/* ======================================================



	Hexagon Navi



====================================================== */

.hex__navi{

	position: relative;

	pointer-events: none;

}

.hex__navi.enable{

	pointer-events: auto;

}

.hex__navi a:hover{

	opacity: 0.8;

}

.hex__next1{

	position: absolute;

	display: block;

	bottom: 30px;

	left: 50%;

	transform: translateX(-50%);

	

	width: 50px;

	height: 30px;

	z-index: 2;

}

.hex__prev{

	position: absolute;

	display: block;

	bottom: 55px;

	right: 50%; 

	transform: translateX(-13px);

	

	width: 30px;

	height: 30px;

	z-index: 2;

}

.hex__next{

	position: absolute;

	display: block;

	bottom: 55px;

	left: 50%;

	transform: translateX(13px);

	

	width: 30px;

	height: 30px;

	z-index: 2;

}

/* ======================================================



	Hexagon Map



====================================================== */

#hex__map{

	position: fixed;

	bottom: 16px;

	right: 16px;

	width: 100px;

}

#hex__map.disable{

	pointer-events: none;

}

#hex__map svg{

	width: 100%;

	height: auto;

}

.hex__area{

	fill: #ffffff;

	opacity: 0.8;

}

.hex__area.enable{

	fill: #0b78bb;

}



/* ======================================================



	Products info



====================================================== */

.ua-prod2{

	position: relative;

	background-color: #ffffff;

}

.ua-prod2__inner{

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	max-width: 1200px;

	margin: 0 auto;

	padding: 50px 0;

}

.ua-prod2__item{

	padding: 0 10px;

	text-align: center;

}

.ua-prod2__item:first-child:nth-last-child(3),

.ua-prod2__item:first-child:nth-last-child(3) ~ .ua-prod2__item {

	width: 33.333%;

}

.ua-prod2__item:first-child:nth-last-child(4),

.ua-prod2__item:first-child:nth-last-child(4) ~ .ua-prod2__item {

	width: 25%;

}



.ua-prod2__item:not(:last-child){

	border-right: 1px solid #cccccc;

}

.ua-prod2__name{

	margin-bottom: 10px;



	font-size: 43px;

	font-family: 'DIN W01 Cond Light';

	line-height: 1;

	color: #4d4d4d;

}

.ua-prod2__desc{

	margin-bottom: 25px;

	min-height: 40px;



	font-size: 15px;

	font-family: 'DIN W01 Light';

	color: #4d4d4d;

	line-height: 1.2;

}

.ua-prod2__desc span{

	font-size: 10px;

}

.ua-prod2__img{

	position: relative;

	max-width: 280px;

	margin: 0 auto 15px;

}

.ua-prod2__img:before{

	content:"";

    display: block;

	padding-top: 92.857%;

}

.ua-prod2__img img{

	position: absolute;

	bottom: 0;

	left: 0;

}



.ua-prod2__inner--5 .ua-prod2__item{

	width: 33.333%;

}

.ua-prod2__inner--5 .ua-prod2__item:nth-child(1),

.ua-prod2__inner--5 .ua-prod2__item:nth-child(2),

.ua-prod2__inner--5 .ua-prod2__item:nth-child(3){

	margin-bottom: 60px;

}

/*

.ua-prod2__inner--5 #ua-ua3.ua-prod2__item .ua-prod2__img:before,

.ua-prod2__inner--5 #ua-akx110.ua-prod2__item .ua-prod2__img:before{

	padding-top: 46.428%;

}*/

.ua-prod2__inner--5 #ua-ua70 { order: 2; }

.ua-prod2__inner--5 #ua-ua90 { order: 1; }

.ua-prod2__inner--5 #ua-ua30 { order: 3; }

/*.ua-prod2__inner--5 #ua-ua3 { order: 4; }*/

.ua-prod2__inner--5 #ua-akx110 { order: 4; }

	

@media only screen and (max-width:640px) and (max-device-width:1280px){

	.ua-prod2{

		padding: 0 15px;

	}

	.ua-prod2__inner{

		padding: 0 0;

	}

	.ua-prod2__item{

		width: 100% !important;

		padding: 50px 0 !important;

	}

	

	#ua-ua90{ order: 1 !important; }

	#ua-ua70{ order: 2 !important; }

	#ua-ua30{ order: 3 !important; }

	/*#ua-ua3{ order: 4 !important; }*/

	#ua-akx110{ order:4 !important; }



	.ua-prod2__item:not(:last-child){

		border-right: none;

		border-bottom: 1px solid #cccccc;

	}

	.ua-prod2__desc{

		min-height: 0;

	}

	.ua-prod2__img{

		padding-top: 0;

	}

	.ua-prod2__img:before{

		content: none;

	}

	.ua-prod2__img img{

		position: relative;

		bottom: auto;

		left: auto;

	}

	.ua-prod2__inner--5 .ua-prod2__item:nth-child(1),

	.ua-prod2__inner--5 .ua-prod2__item:nth-child(2),

	.ua-prod2__inner--5 .ua-prod2__item:nth-child(3){

		margin-bottom: 0;

	}

}

/* ======================================================



	link



====================================================== */

.ua-links1{

	position: relative;

	width: 132px;

	height: 74px;

	margin: 0 auto;

}

.ua-links2{

	position: relative;

	width: 132px;

	height: 74px;

	margin: 0 auto;

}

.ua-links3{

	position: relative;

	width: 132px;

	height: 134px;

	margin: 0 auto;

}



.ua-link{

	position: relative;

	width: 64px;

	height: 74px;

	overflow: hidden;

}

.ua-link a{

	position: absolute;

	width: 100%;

	height: 100%;



	display: flex;

	justify-content: center;

	align-items: center;



	border-radius: 50%;

	text-decoration: none;

	color: #ffffff;

	z-index: 2;

	

	text-align: center;

	font-family: DIN W01 Cond;

	font-size: 17px;

	line-height: 1;

}

.ua-link--xs{ font-size: 15px; }

.ua-link--xs{ font-size: 15px; }



.ua-links1 .ua-link:nth-child(1){ margin: 0 auto; }



.ua-links2 .ua-link:nth-child(1){ position: absolute; top: 0; left: 68px; }

.ua-links2 .ua-link:nth-child(2){ position: absolute; top: 0; left: 0; }



.ua-links3 .ua-link:nth-child(1){ position: absolute; top: 0; left: 50%; margin-left: -32px; }

.ua-links3 .ua-link:nth-child(2){ position: absolute; top: 60px; left: 0; }

.ua-links3 .ua-link:nth-child(3){ position: absolute; top: 60px; left: 68px; }





/* ======================================================



	Background Elements



====================================================== */



.ua__elm{

	position: absolute;

	transform-origin: 50% 50%;

}

#ua__elm1{

	top: 0;

	left: 0;

	transform: translate(-50%, -50%);

	max-width: 314px;

}

#ua__elm2{

	bottom: 0;

	right: 0;

	transform: translate(10%, -10%);

	max-width: 156px;

}

#ua__elm3{

	/* Black */

	top: 0;

	right: 0;

	transform: translate(54%, 0);

	max-width: 334px;

	opacity: 0.85;

}

#ua__elm4{

	/* Black */

	top: 50%;

	left: 0;

	transform: translate(-50%, 0);

	max-width: 216px;

	opacity: 0.85;

}

#ua__elm10{

	/* Black */

	top: 0;

	left: 0;

	transform: translate(-30%, -20%);

	max-width: 342px;

	opacity: 0.85;

}

#ua__elm11{

	top: 0;

	left: 0;

	transform: translate(-45%,-50%);

	max-width: 354px;

}

#ua__elm12{

	/* Black */

	bottom: 0;

	right: 0;

	transform: translate(-2%,100%);

	max-width: 298px;

	opacity: 0.85;

}

#ua__elm13{

	bottom: 0;

	right: 0;

	transform: translate(40%,50%);

	max-width: 354px;

}

#ua__elm21{

	top: 0;

	left: 50%;

	transform: translate(-100%,0);

	max-width: 354px;

}

#ua__elm22{

	/* Black */

	top: 20%;

	right: 0;

	transform: translate(55%,0);

	max-width: 354px;

	opacity: 0.85;

}

#ua__elm23{

	/* Black */

	top: 50%;

	left: 0;

	transform: translate(-10%,-100%);

	max-width: 216px;

	opacity: 0.85;

}

#ua__elm24{

	bottom: 0;

	right: 0;

	transform: translate(5%,25%);

	max-width: 314px;

}



@media only screen and (max-width:640px) and (max-device-width:1280px){

	#ua__elm1{ max-width: 157px; }

	#ua__elm2{ max-width: 78px; }

	#ua__elm3{ max-width: 167px; }

	#ua__elm4{ max-width: 108px; }

	#ua__elm10{ max-width: 171px; }

	#ua__elm11{ max-width: 177px; }

	#ua__elm12{ max-width: 149px; }

	#ua__elm13{ max-width: 177px; }

	#ua__elm21{ max-width: 177px; }

	#ua__elm22{ max-width: 177px; }

	#ua__elm23{ max-width: 108px; }

	#ua__elm24{ max-width: 157px; }

}