@charset "UTF-8";
/* CSS Document */
body, html {
	margin: 0;
	font-family: 'Open Sans','Apple LiGothic Medium','Microsoft JhengHei';
	font-size:18px;
	scroll-behavior: smooth;
	color:white;
	background-color: black;
	overflow-x: hidden;
}

.right_menu_button{
	display: inline-block;
	border: 1px solid grey;
	border-radius: 25px;
	cursor: pointer;
	width: 75%;
	padding: 10px;
	text-align: center;
	opacity: 0.65;
	transition: 0.7s;
}

.right_menu_button:hover{
	background-color: white;
	color: black;
	opacity: 1.0;
}

[class*="col-"] {

	float: left;

}

#content_holder{
	height:4800px;
}

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}


#dasloop_mob_div{
	display: none;
}
	

#logo_title{
	padding: 5px;
	position: fixed;
	left: 15px;
	top: 15px;
	z-index: 900;
	width: 70px;
}

#slogan_title{
	text-align: center;
	font-size: 1.4em;
}

.mob_right_menu{
	position: absolute;
	right:-75px;
	top:0px;
	font-size: 1.1em;
}

#becan_holder{
	width: 100vw;
	text-align: center;
	display: inline;
	background-color: aqua;
}

#beacon_connect{
	position: relative; 
	top:-110px; 
	animation: menu_bg_shine 2s infinite;
	left: 3%;
	width: 50px;
}

#youtube_video_holder{
	pointer-events: auto;
}

.right_menu_item{
	position: relative;
	font-size: 1.0em;
	vertical-align: middle;
	opacity: 0.9;
	transition: 0.5s;
	transform: scale(0.9);
	z-index: 100;
	padding-bottom: 40px;
}

.right_menu_item.d1{animation: right_menu_move 0.5s 1;}
.right_menu_item.d2{animation: right_menu_move 1.0s 1;}
.right_menu_item.d3{animation: right_menu_move 1.5s 1;}
.right_menu_item.d4{animation: right_menu_move 2.0s 1;}
.right_menu_item.d5{animation: right_menu_move 2.5s 1;}


.right_menu_item:hover{
	opacity: 1.0;
}

#beacon_img{
	position: relative;
	width:150px;
}

#beacon_dasloop{
	position: relative;
	width: 250px;
	left: 10px;
}

#beacon_demon_image{
	width: 100%; 
	text-align: center;
}

#beacon_img_3d{
	max-height: 250px;
}


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

    /* For mobile phones: */

    [class*="col-"] {

        width: 100%;

    }
	body, html {
		font-size: 12px;
	}
	#logo_title{
		width: 45px;
	}
	#dasloop_PC_table{
		display: none;
	}
	
	#dasloop_mob_div{
		display: inline;
		text-align: center;
		position: relative;
	}
	.left_menu_item{
		display: inline-block;
	}
	#slogan_title{
		text-align: right;
		font-size: 1.5em;

	}
	#dasloop_mobile_shower{
		position: relative;
		animation-fill-mode: forwards;
	}
	

	.mob_right_menu{
		display: none;
	}
	
	#beacon_img{
		width:80px;
	}

	#beacon_dasloop{
		width: 130px;
	}

	#beacon_connect{
		top:-50px;
		width: 30px;
	}
	
	.right_menu_item{
		padding-right: 20px;
		padding-bottom: 10px;
	}
	
	#mob_btn_3{
		font-size:0.8em;
	}

	#beacon_demon_image{
		width: 100%;
		text-align: center;
	}
	#beacon_img_3d{
		width: 90%;
	}
}

#left_menu{
	text-align: right;
	position: relative;
	top: 0px;
	left: 0px;
	z-index: 100;
	cursor: pointer;
}

#right_menu{
	text-align: left;
	position: relative;
	top: -20px;
	right:0px;
	z-index: 101;
}

.left_menu_item{
	position: relative;
	cursor: pointer;
	vertical-align: middle ;
	font-size: 1.2em;
	opacity: 0.4;
	transition: 0.5s;
	transform: scale(0.95);
	z-index: 100;	
}

.left_menu_item:hover{
	cursor: pointer;
	opacity: 1.0;
	transform: scale(1.0);
	z-index: 100;
}
.left_menu_item_selected{
	opacity: 1.0;
	transform: scale(1.0);
	z-index: 100;
}

.line_ring_left{
	position: absolute; 
	top:-430px; 
	left:-350px;
	opacity: 0.3; 
	transform: scale(0.8);
	z-index: 2;
	
}

.line_ring_right{
	height: 300px;
	position: absolute; 
	top:-350px; 
	left:-190px;
	opacity: 0.25; 
	transform: scale(0.7);
	z-index: 2;
}

.m_line_ring_right{
	position: absolute;
	
	z-index: 2;
	opacity: 0.25;
	transform: scale(0.65);
	/*top:-530px;
	right:-210px;*/
	top:-280px;
	right:-85px;
}

#left_menu_bg{
	position: absolute; 
	z-index: 50;
	left:-50px; 
	top:0px;
	
	-webkit-animation:menu_bg_shine 3s infinite;
	animation:  menu_bg_shine 3s infinite;	
	
}

#right_menu_bg{
	position: absolute; 
	z-index: 50;
	left:-80px; 
	top:-100px; 
	-webkit-animation:menu_bg_shine 3s infinite;
	animation:  menu_bg_shine 3s infinite;	
}

#dasloop_bottom_bg_holder{
	position: relative;
	z-index: 10;
	width: 400px;
	animation-fill-mode: forwards;
}




.point_link_hr{
	transform-origin: right;
	animation: point_line_appear 1.5s 1;	
	animation-fill-mode: forwards;
}

.beacon_menu{
	padding-top: 40px;
	font-size: 1.3em;
}