body{
	font-family:微軟正黑體;
	font-size:0px;
	line-height:0px;
	margin:0px;
	padding:0px;
}
img{
	border:0px;
}

.hide{
	display:none;
}

.inline-block{
	display:inline-block;
	vertical-align:top;
}
.content{
	position:relative;
}

nav{
	left:0px;
	position:fixed;
	top:0px;
	width:100%;
	z-index:1000;
}

#nav-btn{
	list-style-type:none;
	margin:0px;
	right:0px;
	position:absolute;
	top:24px;
	z-index:1500;
}

#nav-btn > li{
	display:inline-block;
	margin:0px 24px 0px 0px;
	vertical-align:top;
}


#logo{
	height:0px;
	margin:15px 0px 0px 64px;
}

#sns{
	list-style-type:none;
	margin:15px 64px 0px auto;
	padding:0px;
	text-align:right;
}

#sns > li{
	display:inline-block;
	margin-left:24px;
	padding:0px;
	vertical-align:top;
}

#sns img{
	height:24px;
}

#i18n-btns{
	color:white;
	font-size:20px;
	letter-spacing:2px;
	line-height:100%;
}
#i18n-btns a , #i18n-btns a:hover{
	color:white;
	text-decoration:none;
}
#i18n-btns a:hover{
	color:orange;
}

@media only screen and (max-width: 720px) {
	#logo{
		margin:18px 0px 0px 18px;
		width:30%;
	}
	#logo > img{
		width:100%;
	}
	
	#sns{
		background-color:rgba(255,255,255,0.7);
		bottom:0px;
		padding:15px 0px;
		position:fixed;
		text-align:center;
		width:100%;
		z-index:500;
	}
	#sns > li{
		margin:0px 2%;
	}
	
	#i18n-btns{
		height:0px;
		font-size:18px;
		letter-spacing:0px;
		line-height:150%;
		width:24px;
		overflow:hidden;
		position:fixed;
		right:56px;
		top:72px;
		z-index:1000;
	}
	
	
	#i18n-btns.present{
		height:160px;
		animation: i18n_present_keyframes 0.3s ease-out;
	}
	#i18n-btns.dismiss{
		height:0px;
		animation: i18n_dismiss_keyframes 0.3s ease-out;
	}
}


@keyframes i18n_present_keyframes {
	from {
		height:0px;
	}
	to  {
		height:160px;
	}
}
@keyframes i18n_dismiss_keyframes {
	from {
		height:160px;
	}
	to  {
		height:0px;
	}
}


#menu{
	left:5%;
	list-style-type:none;
	margin:0px;
	padding:0px;
	position:absolute;
	top:30vh;
}

#menu > li{
	color:white;
	font-size:24px;
	font-weight:lighter;
	line-height:120%;
	margin:0px;
	padding:40px 0px;
	text-align:center;
}

#menu > li a , #menu > li a:hover{
	color:white;
	text-decoration:none;
	text-shadow: 0px 4px 6px #0000008C;
}
#menu > li a:hover{
	color:orange;
}

@media only screen and (min-width: 721px) {
	#menu{
		display:inline-block;
	}
}

@media only screen and (max-width: 720px) {
	#menu{
		background: linear-gradient(to right,#4C4C4C7D,#0F0F0FBD);
		height:100vh;		
		left:100%;
		margin:0px;
		padding-top:120px;
		top:0px;
		width:40%;
	}
	
	#menu.present{
		left:60%;
		animation: menu_present_keyframes 0.3s ease-out;
	}
	#menu.dismiss{
		left:100%;
		animation: menu_dismiss_keyframes 0.3s ease-out;
	}
	
	#menu > li{
		font-size:18px;
		line-height:120%;
		height:80px;
		padding:0px;	
		text-align:center;
		
	}
	#menu .comingsoon{
		display:block;
	}
	
	#menu-bgm-btn{
		position:absolute;
		text-align:center;
		top:calc(100vh - 120px);
		width:100%;
	}
}

@keyframes menu_present_keyframes {
	from {
		left:100%;
	}
	to  {
		left:60%;
	}
}
@keyframes menu_dismiss_keyframes {
	from {
		left:60%;
	}
	to  {
		left:100%;
	}
}



#kv{
	background-repeat:no-repeat;
	height:100vh;
	position:relative;
	width:100%;
}


@media only screen and (min-width: 721px) {
	#kv{
		background-size:cover;
		background-image:url(images/index/1.jpg);
		background-position:center;
		min-height:720px;
		min-width:1280px;
		width:100%;
	}
}
@media only screen and (max-width: 720px) {
	#kv{
		background-image:url(images/index/1-m.jpg);
		background-position:center top ;
		background-size:100%;
	}
}

/*
#slider{
	list-style-type:none;
	height:100%;
	left:0px;
	margin:0px;
	overflow:hidden;
	padding:0px;
	position:absolute;
	top:0px;
	width:100%;
}
#slider > li{
	background-size:150%;
	background-position:center;
	background-repeat:no-repeat;
	left:100%;
	height:100%;
	margin:0px;
	padding:0px;
	position:absolute;
	top:0px;
	width:100%;
	z-index:100;
}



#slider > li.focus{
	left:0px;
	z-index:10;
}
#slider > li.focus.in{
	animation: slider_keyframes 1.5s  ease-out;
	z-index:100;
}
@keyframes slider_keyframes {
	from {
		left:100%;
		opacity:0;
	}
	to {
		left:0px;
		opacity:1;
	}
}
*/

#album{
	text-align:center;
	width:100%;
	z-index:500;
}
#album .content{
	margin:0px auto;
	max-width:628px;
	width:20%;
}
#album-title{
	width:100%;
}

#album-drifter{
	position:absolute;
	left:-25%;
	top:-35%;
	width:15%;
}

#album-likeyoudo{
	position:absolute;
	right:-100%;
	top:80%;
	width:90%;
}

#artist{
	position:absolute;
	text-align:center;
	z-index:500;
}
#artist img{
	margin-top:24px;
}

@media only screen and (min-width: 721px) {
	#album{
		height:0px;
		position:absolute;
		top:25%;
		width:100%;
	}
	#artist{
		bottom:10%;
		
		right:10%;
	}
}
@media only screen and (max-width: 720px) {
	#album{
		left:5%;
		padding-top:30vh;
		position:relative;
		width:90%;
	}
	#album .content{
		width:40%;
	}
	#album-drifter{
		left:-23%;
	}
	#album-likeyoudo{
		position:relative;
		right:10%;
		top:40px;
		width:120%;
	}
	
	#artist{
		top:20%;
		right:28px;
	}
	#artist img{
		width:32px;
	}
}


#timer{
	display:none;
	margin:0px;
	padding:0px;
	text-align:center;
	width:100%;
	z-index:500;
}
#timer > li{
	color:white;
	display:inline-block;
	letter-spacing:3px;
	font-weight:200;
	font-size:64px;
	line-height:100%;
	margin:0px 15px;
	padding:0px;
	vertical-align:top;
}

#timer > li:first-child{
	display:block;
	font-size:40px;
	font-weight:lighter;
	line-height:100%;
	margin-bottom:60px;
}

#timer > li .unit{
	letter-spacing:1px;
	font-size:24px;
	font-weight:100;
}
/*
#cat{
	bottom:5%;
	left:5%;
	max-width:230px;
	position:absolute;
	z-index:900;
}
*/
#sponsor{
	z-index:1000;
}

#sponsor img{
	margin-right:24px;
	vertical-align:middle;
}

#bgm-btn{
	bottom:5%;
	cursor:pointer;
	position:absolute;
	right:5%;
	z-index:1000;
}
#bgm-btn img{
	height:32px;
	
}
#muted{
	display:none;
}
#playbgm{
	display:none;
}

.sound-btn{
	margin-left:24px;
}
@media only screen and (min-width: 721px) {
	#timer{
		bottom:5%;
		position:absolute;
	}
	#sponsor{
		bottom:5%;
		left:3%;
		position:absolute;
		z-index:1000;
	}
}
@media only screen and (max-width: 720px) {
	#timer{
		padding-top:70px;
		position:relative;
	}
	
	#timer > li{
		font-size:24px;
		font-weight:normal;
		margin:0px 1%;
		text-shadow: 0px 0px 1px rgba(0,0,0,0.6);
	}
	#timer > li .unit{
		font-size:12px;
		font-weight:normal;
	}
	#timer > li:first-child{
		font-size:18px;
		font-weight:normal;
		margin-bottom:30px;
		
	}
	
	#sponsor{
		padding-top:48px;
		position:relative;
		text-align:center;
	}
	#sponsor img{
		margin:0px 12px;
	}
	/*#cat{
		bottom:72px;
		width:32%;
	}*/
}

.intro{
	background: linear-gradient(#AFBFC9,#073A59);
	color:white;
	font-size:20px;
	font-weight:lighter;
	letter-spacing:1px;
	line-height:36px;
	padding:140px 0px 36px 360px;
	text-align:left;
	
}

.intro .p2{
	background-image:url(images/index/intro.png);
	background-position:  15% center;
	background-repeat:no-repeat;
	color:white;
	padding-left:40%;
}

.team{
	line-height:300%;
	padding:140px 0px;
}
.team h3{
	border-bottom:1px solid white;
	font-size:36px;
	line-height:100%;
	margin:0px;
	margin-bottom:100px;
	padding:12px 0px;
	width:400px;
}

.copyright{
	font-size:24px;
	text-align:center;
}

@media only screen and (max-width: 720px) {
	.intro{
		font-size:12px;
		line-height:200%;
		padding:100px 0px 100px 0px;
	}
	.intro .p1 , .intro .p2{
		width:300px;
		margin:0px auto;
	}
	.intro .p2{
		background-position: center 24px;
		color:white;
		padding:240px 0px 0px 0px;
	}
	.team{
		line-height:200%;
		margin:0px auto;
		width:320px;
	}
	.team h3{
		font-size:20px;
		line-height:100%;
		margin-bottom:24px;
		width:100%;
	}
	.copyright{
		font-size:12px;
		text-align:center;
	}
}


@media only screen and (min-width: 721px) {
	.hide_desktop{
		display:none;
	}
}


@media only screen and (max-width: 720px) {
	.hide_mobi{
		display:none;
	}
}