/*-------------------------------*\
	$Globel
\*-------------------------------*/
*{
	position: relative;
	box-sizing: border-box;
}
body,html{
	font-family: "微軟正黑體";
}
h1,h2,h3,h4,h5,h6,p{
	margin: 0;
}
/*-------------------------------*\
	$Component
\*-------------------------------*/
.main{
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
/* PHANTOM */
.phantom-group,
.division-group,
.bokeh-group,
.diversity-group{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	/*border: 1px solid red;*/
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	transition: all 0.3s;
}
.phantom-group.active,
.division-group.active,
.bokeh-group.active,
.diversity-group.active{
	opacity: 0;
	visibility: hidden;
}

.parallax{
	/*border: 5px solid #000;*/
	width: 100%;
	height: 100%;
	position: absolute;
	left:0;
	top: 0;
}

.phantom-g h1,
.phantom-r h1,
.phantom-w h1{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	font-size: 120px;
}
.phantom-g h1{
	color: #00FF03;
	opacity: 0.5;
}
.phantom-r h1{
	color: #FF0000;
	opacity: 0.5;
}
.phantom-w h1{
	color: #FFFFFF;
}

.phantom-1 img{
	left: 50%;
	top: 10%;
	transform: translate(-50%,-50%) scale(0.7);
}
@media (max-width: 1024px){
	.phantom-1 img{
		top: 20%;
		transform: translate(-50%,-50%) scale(0.6);
	}
	.phantom-g h1,
	.phantom-r h1,
	.phantom-w h1{
		font-size: 70px;
	}
}
@media (max-width: 600px){
	.phantom-1 img{
		top: 20%;
		transform: translate(-50%,-50%) scale(0.4);
	}
}
@media (max-width: 500px){
	.phantom-1 img{
		top: 30%;
		transform: translate(-50%,-50%) scale(0.3);
	}
	.phantom-g h1,
	.phantom-r h1,
	.phantom-w h1{
		font-size: 40px;
	}
}

/* DIVISION*/
.division-bg img{
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(0.8);
}
.division-1 img{
	left: 49%;
	top: 50%;
	transform: translate(-50%,-50%) scale(1);
	height: 100vh;
}
.division-2 img{
	left: 49%;
	top: 50%;
	transform: translate(-50%,-50%) scale(1);
	opacity: 0.8;
	height: 100vh;
}
.division-text img{
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(1);
	opacity: 0.8;
	height: 100vh;
}
@media (max-width: 1024px){
	.division-1 img,
	.division-2 img{
		left: 47%;
	}
	.division-text img{
		transform: translate(-50%,-50%) scale(0.5);
		opacity: 0.8;
		height: 100vh;
	}
}

/* BOKEH */
.bokeh-bg img{
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(0.8);
}
.bokeh-1 img{
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(0.5);
}
.bokeh-back img,
.bokeh-front img{
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(0.7);
}
.bokeh-text img{
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(0.5);
}
.animate-flicker-1{
	animation: flicker-1 4s infinite both;
}
.animate-flicker-2{
	animation: flicker-1 7s infinite both;
}
.animate-flicker-3{
	animation: flicker-1 5s infinite both;
}
@keyframes flicker-1{
	0%{transform: scale(0.7);opacity: 1;}
	50%{transform: scale(0.75);opacity: 0.5;}
	100%{transform: scale(0.7);opacity: 1;}
}
@keyframes flicker-2{
	0%{transform: scale(0.75);opacity: 1;}
	50%{transform: scale(0.8);opacity: 0.5;}
	100%{transform: scale(0.75);opacity: 1;}
}

@media (max-width: 1024px){
	.bokeh-bg img{
		transform: translate(-50%,-50%) scale(0.6);
	}
	.bokeh-1 img{
		transform: translate(-50%,-50%) scale(0.6);
	}
	.bokeh-back img,
	.bokeh-front img{
		transform: translate(-50%,-50%) scale(0.6);
	}
}
@media (max-width: 500px){
	.bokeh-bg img{
		transform: translate(-50%,-50%) scale(0.4);
	}
	.bokeh-1 img{
		transform: translate(-50%,-50%) scale(0.4);
	}
	.bokeh-back img,
	.bokeh-front img{
		transform: translate(-50%,-50%) scale(0.4);
	}
	.bokeh-text img{
		transform: translate(-50%,-50%) scale(0.2);
	}
}

/* DIVERSITY */
.diversity-1 img{
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(0.8);
}
.diversity-text img{
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(0.8);
	opacity: 0.8;
}
@media (max-width: 1024px){
	.diversity-1 img{
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%) scale(1.1);
	}
}
@media (max-width: 500px){
	.diversity-1 img{
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%) scale(0.7);
	}
	.diversity-text img{
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%) scale(0.4);
	}
}

/* MENU */

.diagram-menu{
	/*background-color: #000000;*/
	width: 90%;
	height: 90%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	/*opacity: 0.5;*/
	/*overflow: hidden;*/
}	
.copyright{
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%,150%);
}
.copyright h1{
	font-size: 16px;
	font-weight: 500;
}

.btn{
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%,0);

	width: 60px;
	height: 60px;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);
	background-color: #FFFFFF;
	opacity: 0.5;
	z-index: 1000;

	transition: all 0.5s;
}
.btn.active{
	width: 100%;
	height: 100%;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.7);
	background-color: #000000;
	opacity: 0.8;
}
.btn:hover{
	opacity: 1;
}
.btn.active:hover{
	opacity: 0.8;
}

.toggle-menu{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,0);
	width: 60px;
	height: 60px;
	/*border: 1px solid red;*/
	z-index: 2000;
	cursor: pointer;
}
.toggle-menu.active{

}

.toggle-menu span{
	/*display: block;*/
	width: 16px;
	height: 3px;
	background-color: #000000;
	opacity: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all 0.3s;
}
.toggle-back{
	position: absolute;
	bottom: 0;
	left: 20px;
	transform: translate(-50%,0) rotate(-90deg);
	width: 60px;
	height: 60px;
	/*border: 1px solid red;*/
	z-index: 2000;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
}
.toggle-back.active{
	opacity: 1;
	visibility: visible;
}
.toggle-back span{
	width: 16px;
	height: 3px;
	background-color: #FFFFFF;
	opacity: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all 0.3s;
}
.toggle-menu span:nth-child(1),
.toggle-back span:nth-child(1){
	left: calc(50% - 4.6px);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.toggle-menu span:nth-child(2),
.toggle-back span:nth-child(2){
	left: calc(50% + 4.6px);
	transform: translate(-50%,-50%) rotate(45deg);
}
.toggle-menu.active span:nth-child(1){
	left: calc(50% - 4.6px);
	transform: translate(-50%,-50%) rotate(45deg);
}
.toggle-menu.active span:nth-child(2){
	left: calc(50% + 4.6px);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.toggle-menu:hover span,
.toggle-back:hover span{
	background-color: #00DDFF;
}
.toggle-menu.active span{
	background-color: #FFFFFF;
}
.toggle-menu.active:hover span{
	background-color: #00DDFF;
}
@media (max-width: 1024px){
	.btn:hover{
		opacity: 0.5;
	}
	.toggle-menu span,
	.toggle-back span{
		background-color: #00DDFF;
	}
}

.row{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	/*background-color: #FF7474;*/
	/*opacity: 0.5;*/
	/*padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;*/
	padding-bottom: 60px;
}
.row:after{
	content: '';
	display: block;
	clear: both;
}

.col-1-2{
	float: left;
	width: 50%;
	height: 50%;
	/*background-color: #71FFB1;*/
	padding: 10px;
}
@media (max-width: 1024px){
	.col-1-1{
		float: left;
		width: 100%;
		height: 25%;
		/*background-color: #71FFB1;*/
		padding: 10px;
	}
}
@media (max-width: 500px){
	.col-1-1{
		padding: 5px;
	}
}

.item{
	width: 100%;
	height: 100%;
	border-radius: 10px;
	/*background-color: #E9FF76;*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	opacity: 0;
	visibility: hidden;
	/*overflow: hidden;*/
	cursor: pointer;
	transition: 0.3s;
}
.item.active{
	opacity: 1;
	visibility: visible;
	z-index: 2000;
	transition: 1.5s;
}
.item:after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 9px;
	background-color: #000000;
	opacity: 0.7;
	transition: all 0.3s;
}
.item:hover:after{
	opacity: 0;
}

.work-1{
	background-image: url(../images/Design/parallax/menu/MENU-PHANTOM.JPG);
}
.work-2{
	background-image: url(../images/Design/parallax/menu/MENU-DIVISION.JPG);
}
.work-3{
	background-image: url(../images/Design/parallax/menu/MENU-BOKEH.JPG);
}
.work-4{
	background-image: url(../images/Design/parallax/menu/MENU-DIVERSITY.JPG);
}
@media (max-width: 1024px){
	.item:after{
		opacity: 0;
	}
	.item:hover:after{
		opacity: 0;
	}
}