@charset "utf-8";

body{
	/*position: relative;*/
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* ======================================================

	Grobal Customize

====================================================== */
#page {
  max-width: none;
  min-width: 0 !important;
  margin: 0 auto;
  background: #f6f6f6;
  background: white !important;
  overflow: hidden;
}
/* ======================================================

	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


====================================================== */
#mfPreviewBar{
	display: none; /* for test webfont */
}
.test__text{
	color: #cc0000;
}

@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 img{
	vertical-align: top;
	max-width: 100%;
	height: auto;
}
.ua__content{
	position: relative;
}
.ua__inner{
	overflow: hidden;
}
.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: 10000;
  /*z-index: 10;*/
}
@keyframes spinner {
  /*to {transform: translate(-50%, -50%) rotate(360deg);}*/
  to {transform: rotate(360deg);}
}

.noscroll{
	overflow: hidden;
}
/* ======================================================

	Background Video

====================================================== */
.ua-video{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #1d1d1d;
	overflow: hidden;
}
.ua-video__cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000000;
}
#ua__player {
    position: relative;
}
/* ======================================================

	#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 screen and (max-width: 767px) {
	.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;
	z-index: 1;
}
.ua-prod__effect0{
	position: relative;
	z-index: 1;
}
.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: 1;
}
.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: 1;
}
.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 screen and (max-width: 767px) {
	.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;
	margin-bottom: 100px;
	z-index: 1;
}
#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%);
	
	/*text-indent: 100%;*/
	/*overflow: hidden;*/
	width: 50px;
	height: 30px;
	/*background-image: url(../img/hex_next1.svg);*/
	/*background-repeat: no-repeat;*/
	/*background-position: 0 0;*/
	/*background-size: 100% auto;*/
	z-index: 1;
}
.hex__prev{
	position: absolute;
	display: block;
	bottom: 55px;
	right: 50%; 
	transform: translateX(-13px);
	
	/*text-indent: 100%;
	overflow: hidden;*/
	width: 30px;
	height: 30px;
	/*background-image: url(../img/hex_prev.svg);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 30px 30px;*/
	z-index: 1;
}
.hex__next{
	position: absolute;
	display: block;
	bottom: 55px;
	left: 50%;
	transform: translateX(13px);
	
	/*text-indent: 100%;
	overflow: hidden;*/
	width: 30px;
	height: 30px;
	/*background-image: url(../img/hex_next.svg);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 30px 30px;*/
	z-index: 1;
}
/* ======================================================

	Hexagon Map

====================================================== */
#hex__map{
	position: fixed;
	bottom: 16px;
	right: 16px;
	z-index: 100000;
	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;
	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;
}
.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__more{
	position: relative;
	width: 66px;
	height: 76px;
	margin: 0 auto;
	overflow: hidden;
}*/
/*.ua-prod2__seemore{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	
	display: flex;
	justify-content: center;
	align-items: center;

	color: #ffffff;
	font-family: DIN W01 Cond;
	font-size: 18px;
	line-height: 1;
	white-space: nowrap;
}*/

/*.ua-prod2__seemore--pt{
	font-size: 19px;
}*/
	
@media screen and (max-width: 767px) {
	.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; }
	#ua-ua70{ order: 2; }
	#ua-ua3{ order: 3; }
	#ua-akx110{ order: 4; }

	.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;
	}
}
/* ======================================================

	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: 1;
	
	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 screen and (max-width: 767px) {
	#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; }
}