/*@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=17a93237-f460-4ff6-aa20-91c86af3a32d");*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

body{
	overflow-x: hidden;
	font-family: 'Noto Sans TC', sans-serif;
}



html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,
img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,
center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,
figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}


*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}


article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
	display:block;
}


body{
	line-height:1;
}

ol,ul{
	list-style:none;
}

blockquote,q{
	quotes:none;
}


blockquote:before,blockquote:after,
q:before,q:after{

	content:'';
	content:none;
}



table{
	border-collapse:collapse;
	border-spacing:0;
}



/*@font-face{
	font-family:"AvenirNextLTW01-Regular";
	src:url("Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix");
	src:url("Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") 
	format("eot"),url("Fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2") 
	format("woff2"),url("Fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff") 
	format("woff"),url("Fonts/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf") 
	format("truetype");
}

	@font-face{
		font-family:"Avenir Next LT W01 Bold";

	src:url("Fonts/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix");

	src:url("Fonts/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix") 
	format("eot"),url("Fonts/14c73713-e4df-4dba-933b-057feeac8dd1.woff2") 
	format("woff2"),url("Fonts/b8e906a1-f5e8-4bf1-8e80-82c646ca4d5f.woff") 
	format("woff"),url("Fonts/890bd988-5306-43ff-bd4b-922bc5ebdeb4.ttf") 
	format("truetype");
}

	@font-face{
	font-family:"AvenirNextLTW01-BoldIta";

	src:url("Fonts/ac2d4349-4327-448f-9887-083a6a227a52.eot?#iefix");

	src:url("Fonts/ac2d4349-4327-448f-9887-083a6a227a52.eot?#iefix") 
	format("eot"),url("Fonts/eaafcb26-9296-4a57-83e4-4243abc03db7.woff2") 
	format("woff2"),url("Fonts/25e83bf5-47e3-4da7-98b1-755efffb0089.woff") 
	format("woff"),url("Fonts/4112ec87-6ded-438b-83cf-aaff98f7e987.ttf") 
	format("truetype");
}

	@font-face{
	font-family:"AvenirNextLTW01-Heavy";
	src:url("Fonts/3418f6be-70a5-4c26-af1d-c09a8642ca20.eot?#iefix");
	src:url("Fonts/3418f6be-70a5-4c26-af1d-c09a8642ca20.eot?#iefix") 
	format("eot"),url("Fonts/5c57b2e2-f641-421e-a95f-65fcb47e409a.woff2") 
	format("woff2"),url("Fonts/181c847e-cdbc-43d5-ae14-03a81c8953b4.woff") 
	format("woff"),url("Fonts/045d1654-97f2-4ff0-9d24-21ba9dfee219.ttf") 
	format("truetype");
}
*/


*,html,body{

	font-size:16px;

	/*font-family:sans-serif;*/

	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}

	h1,h2,h3,h4,h5,h6{
		margin-top:36px;
		color:#000;
	line-height:1.25em;
	font-weight:400;
}

	h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{
		margin-top:0;
	}

		h1{
		font-size:2.5rem;
		margin-bottom:24px;
	}

		h2{
			font-size:1.92308rem;
		margin-bottom:18.46154px;
	}

		h3{
			font-size:1.25rem;
		margin-bottom:16px;
	}

		h4{
			font-size:1.47059rem;
		margin-bottom:14.11765px;
	}

		h5{
			font-size:1.38889rem;
		margin-bottom:13.33333px;
	}

		h6{
			font-size:0.95rem;
		margin-bottom:12px;
	}

		p{
			margin-bottom:20px;
		font-size:1.125rem;
	line-height:1.75em;
	color:#505050;
}

	p:last-of-type{
		margin-bottom:0;
	}

		a{
		color:#459bd9;
		transition:all 0.2s ease;
	}

		a:hover{
			color:#1f6699;
		}

			ul,ol{
			margin:20px 0 0 20px;
		}

			ul li,ol li{
			margin-top:0px;
		line-height:1.75em;
	color:#505050;
}

	ul ul,ul ol,ol ul,ol ol{
		margin-top:0;
	}

		ul li{
		list-style:none;
	}

		ul ul li{
		list-style:circle;
	}

		ol li{
		list-style:decimal;
	}

		hr{
		height:1px;
		margin:30px 0;
	border:none;
	background-color:#DADADA;
}

	blockquote{
		margin:30px 0;
		font-size:1.4375rem;
	line-height:1.5em;
	color:#505050;
	text-align:center;
	font-style:italic;
}

	table{
		width:100%;
		margin:30px 0;
	border-collapse:collapse;
}

	table,td,th{
		border:1px solid #DADADA;
		text-align:left;
	}

		th{
			font-weight:800;
		}

			th,td{
			padding:15px;
		}

			figure{
			margin:30px 0;
		}

			figure img{
			margin:0;
		}

			figcaption{
			margin-top:10px;
		color:#6a6a6a;
	font-size:16px;
}

	pre{
		display:block;
		margin:0 0 40px 0;
	padding:20px;
	background-color:#f9f9f9;
	border:1px solid #DADADA;
	overflow:auto;
	border-radius:3px;
}

	pre code{
		position:static;
		padding:0;
	border:none;
	line-height:1.5em;
}

	code{
		position:relative;
		top:-0.2em;
	padding:3px;
	/*font-family:Courier New, Courier, monospace;*/
	font-size:.9375rem;
	color:#282828;
	line-height:1em;
	pointer-events:none;
	border:1px solid #DADADA;
	border-radius:3px;
}

	em,i,.italic{
		font-style:italic;
	}

		strong,b,.bold{
		font-weight:800;
	}

		img{
		display:block;
		max-width:100%;
	margin:30px 0;
}

	.scrollY{
		overflow-y:scroll;
		overflow-x:hidden;
	}

		#close{
			cursor:pointer;
		pointer-events:bounding-box;
	z-index:2000;
	position:fixed;
	top:0;
	right:0;
	margin:2em;
	width:6vw;
	height:6vw;
	visibility:hidden;
}

	@media (min-width: 800px){
		#close{
		margin:4em;
		width:3vw;
	height:3vw;
}

;
}

#close #close-inner{
		transform:rotate(45deg);
		transform-origin:center;
	}

		#cover{
			position:fixed;
		bottom:0;
	right:0;
	top:0;
	left:0;
	background:#F7F7F7;
	z-index:2000;
}

	.prev-next{
		display:none;
	}

		.prev-next .next{
		z-index:1000;
		position:fixed;
	top:40vh;
	right:0;
	padding:2em;
	width:3vw;
	height:3vw;
}

	.prev-next .next .next-inner{
		cursor:pointer;
		pointer-events:bounding-box;
	transform:rotate(45deg);
	transform-origin:center;
}

	@media (min-width: 800px){
		.prev-next .next{
		padding:4em;
		width:1.7vw;
	height:1.7vw;
}

;
}

.prev-next .prev{
		z-index:1000;
		position:fixed;
	top:40vh;
	left:0;
	padding:2em;
	width:3vw;
	height:3vw;
}

	.prev-next .prev .prev-inner{
		cursor:pointer;
		pointer-events:bounding-box;
	transform:rotate(-135deg);
	transform-origin:center;
}

	@media (min-width: 800px){
		.prev-next .prev{
		padding:4em;
		width:1.7vw;
	height:1.7vw;
}

;
}

#intro{
		pointer-events:none;
		flex:0 0 auto;
	width:100vw;
	height:100vh;
	margin:0;
	display:flex;
	justify-content:center;
	align-items:center;
}

	#intro h1{
		font-size:8vw;
	}

		#intro h1>span{
		display:inline-block;
		transform:skewY(-10deg);
	height:1em;
	overflow:hidden;
}

	#intro h1>span span{
		height:0;
		display:inline-block;
	overflow:hidden;
}

	#intro h4>span{
		display:inline-block;
		transform:skewY(-10deg);
	height:1em;
	overflow:hidden;
}

	#intro a{
		pointer-events:auto;
	}

		.outro{
		padding:10vw;
	}

		.progress-container{
		display:none;
	}

		@media (min-width: 800px){
		.progress-container{
		display:inline;
		z-index:1010;
	position:fixed;
	top:0;
	right:0;
	width:5px;
	height:100%;
	background:#000;
}

	.progress-container .progress-bar{
		height:0%;
		background:#FFFFFF;
	width:5px;
}

;
}

#playpause{
		z-index:2000;
		position:fixed;
	right:0;
	bottom:0;
	margin:2em;
	width:8em;
	height:8em;
	visibility:hidden;
	display:none;
}

	#playpause #discOn{
		visibility:hidden;
	}

		#playpause #progress-bar{
		cursor:pointer;
		opacity:0;
	}

		@media (min-width: 992px){
			#playpause{
			display:block;
		}

		;
	}

		#autoplay{
			position:fixed;
		top:0;
	left:0;
	margin:1em;
	width:100%;
	font-weight:bold;
	font-size:0.9em;
}

	#autoplay div{
		display:inline-block;
	}

		.scrollindicator{
		position:fixed;
		top:0;
	right:0;
	width:22px;
	height:38px;
	margin:1em;
	margin-right:2em;
	display:none;
}

	@media (min-width: 800px){
		.scrollindicator{
		display:block;
	}

	;
}

	.scrollindicator-mobile{
		position:fixed;
		display:flex;
	justify-content:center;
	align-items:flex-start;
	bottom:30vh;
	width:100%;
}

	@media (min-width: 800px){
		.scrollindicator-mobile{
		display:none;
	}

	
}

	html{
		height:100%;
		overflow:hidden;
	}

		body{
			height:100%;
		background-color:#F7F7F7;
	}

		a{
			text-decoration:none;
		}

			main{
			position:relative;
		width:100vw;
	height:100vh;
	height:calc(var(--vh, 1vh) * 100);
	-webkit-overflow-scrolling:touch;
}

	h3,h1,h4,h2,#month{
		text-transform:uppercase;
		/*font-family:"AvenirNextLTW01-Heavy";*/
	line-height:1em;
}

	ul,li{
		list-style:none;
		margin:0;
	}

		img{
			margin:0;
		}

			.marker{
			margin:0 10vw;
		display:none;
	float:left;
}

	.marker .inner{
		width:45vw;
		min-height:1px;
	max-width:800px;
}

	.showcase{
		display:flex;
		flex-direction:row;
	align-items:flex-start;
	flex-wrap:nowrap;
	width:auto;
}

	.showcase .entry{
		display:flex;
		flex-direction:column;
	align-items:center;
	margin:0 20vw;
	height:auto;
}

	@media (min-width: 800px){
		.showcase .entry{
			margin: 0 0 0 10vw;
		}

	
}

	.showcase .entry .album{
		display:flex;
		flex-direction:column;
	align-items:center;
	justify-content:center;
	height:100vh;
	position:relative;
}

	.showcase .entry .album .inner{
		cursor:pointer;
		width:45vw;
	max-width:800px;
	transform:scale(1);
}

	.showcase .entry .album .inner:before{
		content:"";
	display:block;
	padding-top:100%;
}

	.showcase .entry .album .inner .cover{
		position:absolute;
		top:0;
	left:0;
	right:0;
	bottom:0;
	width:85%;
	margin-left:-7%;
	margin-top:-7%;
	/*transform:rotate(-2deg);*/
}

	.showcase .entry .album .inner .cover .active-name{
		position:absolute;
		top:0;
	bottom:0;
	right:0;
	left:0;
}

	.showcase .entry .album .inner .cover .active-name .active-name-flex{
		display:flex;
		flex-direction:column;
	align-items:center;
	justify-content:center;
	height:100%;
}

	.showcase .entry .album .inner .cover .active-name .active-name-flex h2{
		text-align:center;
		margin:0 10%;
	font-size:3.5vw;
}

	@media (min-width: 800px){
		.showcase .entry .album .inner .cover .active-name .active-name-flex h2{
		font-size:1.75em;
	}

	;
}

	.showcase .entry .album .inner .cover .active-name .active-name-flex h2 span{
		height:1em;
		display:inline-block;
	overflow:hidden;
}

	.showcase .entry .album .inner .cover .active-name .active-name-flex h2 span span{
		height:0;
		display:inline-block;
	overflow:hidden;
}

	.showcase .entry .album .inner .name{
		position:absolute;
		top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	/*transform:rotate(2deg);*/
}

	.showcase .entry .album .inner .name svg{
		transform:scale(2.42);
		transform-origin:top left;
	}

		.showcase .entry .album .inner .name .rotate{
			transform:rotate(90deg);
		transform-origin:left top;
	}

		.showcase .entry .album .inner .name h4{
			padding-bottom:2em;
		position:absolute;
	font-size:3vw;
	width:100%;
	text-align:right;
	transform:rotate(180deg);
}
@media (min-width: 1401px){
	.showcase .entry .album .inner .name h3{
		width:100%;
		margin:6em 0 0 33%;
		font-size:6vw;
		line-height:1em;
		padding-top:5%;
	}
}
@media (max-width: 1400px){
	.showcase .entry .album .inner .name h3{
		width:100%;
		margin:6em 0 0 33%;
		font-size:6vw;
		line-height:1em;
		padding-top:5%;
	}
}
@media (max-width: 1200px){
	.showcase .entry .album .inner .name h3{
		margin:4.3em 0 0 33%;
	}
}
@media (min-width: 800px){
	.showcase .entry .album .inner .name h4{
		font-size:19px;
	}

}

	.showcase .entry .album .inner .name h4 span{
		height:1em;
		display:inline-block;
		overflow:hidden;
	}

	
	@media (min-width: 800px){
		.showcase .entry .album .inner .name h3{
		font-size:1.25rem;
	}

}

	.showcase .entry .album .inner .name h3 span{
		height:1em;
		display:inline-block;
		overflow:hidden;
	}

	.showcase .entry .album .inner-active{
		cursor:pointer;
		width:75vw;
	}

		@media (min-width: 800px){
			.showcase .entry .album .inner-active{
			width:50vw;
		}

		;
	}

		.showcase .entry .content{
			/*font-family:"Avenir Next LT W01 Bold";*/
	display:flex;
	justify-content:center;
	width:140%;
	max-width:860px;
	text-align:justify;
	font-size:1em;
	visibility:hidden;
}

	@media (min-width: 800px){
		.showcase .entry .content{
		font-size:1.2em;
	}

	;
}

	.showcase .entry .content .content-inner{
		display:flex;
		align-items:center;
	flex-direction:column;
	width:100%;
	max-width:690px;
	margin-bottom:3em;
}

	@media (min-width: 800px){
		.showcase .entry .content .content-inner{
		width:70%;
	}

	;
}

	.showcase .entry .content .content-inner blockquote{
		/*font-family:"AvenirNextLTW01-BoldIta";*/
	font-size:1.5em;
	line-height:1.3;
	width:110%;
}

	.showcase .entry .content .content-inner p{
		width:100%;
		margin-bottom:2em;
	font-size:1em;
}

	@media (min-width: 800px){
		.showcase .entry .content .content-inner p{
		font-size:1em;
	}

	;
}

	.showcase .entry .content .content-inner .videoWrapper{
		position:relative;
		padding-bottom:56.25%;
	padding-top:25px;
	width:100%;
	height:0;
	margin:2em 0;
}

	.showcase .entry .content .content-inner .videoWrapper iframe{
		position:absolute;
		top:0;
	left:0;
	width:100%;
	height:100%;
}

	.showcase .entry .content .content-inner .links{
		display:flex;
		flex-direction:row;
	}

		.showcase .entry .content .content-inner .links .link{
			width:100px;
		padding:0 20px 20px 20px;
	}

		.showcase .entry-active{
			transform:scaleX(100%);
		}

			@media (min-width: 800px){
			.showcase .entry-active{
			transform:scaleX(100%);
		width:100vw;
	}

	;
}

	.openAlbum{
			position:fixed;
		width:100%;
	height:100vh;
	overflow-y:scroll;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
	margin-left:calc(100vw - 100%);
	margin-right:0;
	z-index:1500;
	display:none;
	background-color:#F7F7F7;
}

	.showcase .entry:nth-child(2n+2) .album .inner .cover{
		/*transform:rotate(3deg);*/
	}

		.showcase .entry:nth-child(2n+2) .album .inner .name{
		/*transform:rotate(-3deg);*/
	}

		.attract-hover-easing{
		transition:all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

		#month{
		visibility:hidden;
		position:fixed;
	display:flex;
	justify-content:center;
	align-items:center;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	font-size:15vh;
	z-index:-2;
	color:#efefef;
}

	#month #scroller{
		display:inline-block;
		transform:rotate(-90deg);
	height:1em;
	overflow:hidden;
	width:100vh;
}

	#month #scroller ul{
		text-align:center;
		display:inline-block;
	}

		#month #scroller ul li{
			line-height:1em;
		}

			.notransition{
			-webkit-transition:none !important;
		-moz-transition:none !important;
	-o-transition:none !important;
	transition:none !important;
}

	.outro .inner .link{
		width:60px;
	}



















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

.showcase{
	position: relative;
	left: -2.3vw;
}



.fancy_title{
	font-family: 'Noto Sans TC', sans-serif;
}

.js-repel-hover{
	position: relative;
	top: 10vh;
}

.t1 h3{
	position: relative;
	top: 44vh;
	left: -16.7vw;
	color: #63488F;
	letter-spacing: 2px;
}

.t1 h6{
	width: 10vw;
	position: relative;
	top: 38.5vh;
	right: 10.2vw;
	float: right;
	color: #888;
	background-image: url(../images/grayArrow.svg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right;
	letter-spacing: 2px;

}

.t2 h3{
	position: relative;
	top: 34vh;
	left: -16.7vw;
	color: #63488F;
	letter-spacing: 2px;
}

.t2 h6{
	width: 10vw;
	position: relative;
	top: 28.5vh;
	right: 10.2vw;
	float: right;
	color: #888;
	background-image: url(../images/grayArrow.svg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right;
	letter-spacing: 2px;

}

.t1 h3:hover, .t2 h3:hover{
	color: #63488F;
	opacity: 70%;
}

.t1 h6:hover, .t2 h6:hover{
	animation-name:h6hover;
    animation-duration:2s;
    animation-fill-mode: forwards;
}


.showcase .entry .album .inner .name {
		margin-top: -2%;
	}


.t1 h6 span:nth-child(1),.t2 h6 span:nth-child(1){padding:0 0 0 18%;}
.pjStyle1 img{
	position: relative;
	top: 10vh;
}








@media (min-width: 2201px) { /*2500px up*/

	.t1 h3{
		top: 44vh;
		left: -10.7vw;
	}

	.t2 h3{
		left: -10.7vw;
		top: 34vh;
	}

	.t1 h6{
		top: 39.3vh;
		right: 7vw;
		width: 8vw;
		/*background-size: auto 45%;*/
	}

	.t2 h6{
		top: 29.5vh;
		right: 7vw;
		width: 8vw;
		/*background-size: 45% 45%;*/
	}
	.showcase .entry {
		margin: 0 0 0 7vw;
	}
	.showcase .entry .album .inner{
		width:28vw;
    }
	
	
	.showcase .entry .album .inner .name {
			margin-top: -9%;
		}
	
	
	.t1 h6 span:nth-child(1),.t2 h6 span:nth-child(1){padding:0 0 0 23%;}
	/*@keyframes h6hover{
	    0%, 100%{
	        right: 7vw;
	    }
	    50%{
	        right: 6vw;
	    }
	}*/
}
@media (max-width: 2200px) {
	.t1 h3{
		top: 44vh;
		left: -10.7vw;
	}

	.t2 h3{
		left: -10.7vw;
		top: 34vh;
	}

	.t1 h6{
		top: 38vh;
		right: 7vw;
		width: 8vw;
		/*background-size: auto 45%;*/
	}

	.t2 h6{
		top: 28vh;
		right: 7vw;
		width: 8vw;
		/*background-size: 45% 45%;*/
	}
	.showcase .entry {
		margin: 0 0 0 7vw;
	}
	.showcase .entry .album .inner{
		width:28vw;
    }
	
	
	.showcase .entry .album .inner .name {
			margin-top: -2%;
		}
	
	
	.t1 h6 span:nth-child(1),.t2 h6 span:nth-child(1){padding:0 0 0 20%;}
	
}
@media (max-width: 1920px) { 

	.t1 h3{
		left: -11vw;
    	top: 37vh;
	}

	.t2 h3{
		top: 27.5vh;
    	left: -11vw;
	}

	.t1 h6{
		top: 30.5vh;
    	right: 6vw;
	}

	.t2 h6{
		top: 22vh;
    	right: 7vw;
	}
	
	.showcase .entry {
		margin: 0 0 0 7vw;
	}
	.showcase .entry .album .inner{
		width:28vw;
    }
	.t1 h6 span:nth-child(1),.t2 h6 span:nth-child(1){padding:0 0 0 15%;}
	
}

/*1441-1680px*/
@media (max-width: 1680px) { 
	.t1 h3{
		left: -11vw;
		top: 42vh;
	}

	.t2 h3{
		left: -11vw;
		top: 32vh;
	}

	.t1 h6{
		width: 10vw;
		top: 34.5vh;
		right: 7vw;
		width: 12vw;
		/*background-size: 45% 45%;*/
	}

	.t2 h6{
		width: 10vw;
		top: 25vh;
		right: 7vw;
		width: 12vw;
		/*background-size: 45% 45%;*/
	}
	.showcase .entry .album .inner .name {
		margin-top: -16%;
	}
	.t1 h6 span:nth-child(1),.t2 h6 span:nth-child(1){padding:0 0 0 20%;}

	/*@keyframes h6hover{
	    0%, 100%{
	        right: 10vw;
	    }
	    50%{
	        right: 9vw;
	    }
	}*/
}

@media (max-width: 1440px) {
	.showcase {
		top: -9vh;
	}
	.t1 h3{
		top: 39vh;
	}

	.t2 h3{
		top: 29vh;
	}

	.t1 h6{
		    top: 32vh;
	}

	.t2 h6{
		top: 22vh;
	}
	 h6{
		font-size: 1rem;
	}
	.showcase .entry .album .inner .name {
		margin-top: -15%;
	}
	.t1 h6 span:nth-child(1),.t2 h6 span:nth-child(1){padding:0 0 0 15%;}

}

@media (max-width: 1366px) {

	.showcase{
		position: relative;
		top: -20vh;
	}

	.pjStyle1 img{
		position: relative;
		top: 15vh;
		width: 35vw;
	}

	.pjStyle2 img{
		position: relative;
		top: 5vh;
		width: 35vw;
	}
	

	.t1 h3{
		left: -11vw;
		top: 42vh;
	}

	.t2 h3{
		left: -11vw;
		top: 32vh;
	}

	.t1 h6{
		width: 10vw;
		top: 32vh;
		right: 6vw;
		width: 12vw;
		padding:0.25em 0 0 0;
		/*background-size: 45% 45%;*/
	}

	.t2 h6{
		width: 10vw;
		top: 22.5vh;
		right: 6vw;
		width: 12vw;
		/*background-size: 45% 45%;*/
	}
	

	.showcase .entry .album .inner .name {
		margin-top: -10%;
	}
	.t1 h6 span:nth-child(1), .t2 h6 span:nth-child(1) {
		padding: 0 0 0 11%;
	}
	h6{
		font-size: 1rem;
	}
}
/*@keyframes h6hover{
	    0%, 100%{
	        right: 13vw;
	    }
	    50%{
	        right: 12vw;
	    }
	}*/


@media (max-width: 1299px) and (max-height:  1024px ) {

	.showcase {
		position: relative;
		top: -25vh;
	}

	.pjStyle1 img{
		position: relative;
		top: 17vh;
		width: 33vw;
	}

	.pjStyle2 img{
		position: relative;
		top: 7vh;
		width: 33vw;
	}

	.t1 h3{
		left: -11vw;
		top: 38vh;
	}

	.t2 h3{
		left: -11vw;
		top: 28vh;
	}

	.t1 h6 {
		top: 32vh;
		right: 7vw;
		width: 12vw;
		padding: 0;
	}

	.t2 h6{
		width: 10vw;
		top: 22vh;
		right: 7vw;
		width: 12vw;
		/*background-size: 45% 45%;*/
	}
	.showcase .entry .album .inner .name {
		margin-top: -6%;
	}
	.t1 h6 span:nth-child(1), .t2 h6 span:nth-child(1) {
		padding: 0 0 0 11%;
	}

	h6{
		font-size: 1rem;
	}
	.showcase .entry .album .inner .name h3 {
		font-size: 1rem;
	}
}
@media (max-width: 1299px)and (max-height:  720px ) {

	.showcase {
		position: relative;
		top: -25vh;
	}

	.pjStyle1 img{
		position: relative;
		top: 17vh;
		width: 33vw;
	}

	.pjStyle2 img{
		position: relative;
		top: 7vh;
		width: 33vw;
	}

	.t1 h3{
		left: -11vw;
		top: 38vh;
	}

	.t2 h3{
		left: -11vw;
		top: 28vh;
	}

	.t1 h6 {
		top: 29vh;
		right: 7vw;
		width: 12vw;
		padding: 0;
	}

	.t2 h6{
		width: 10vw;
		top: 19vh;
		right: 7vw;
		width: 12vw;
		/*background-size: 45% 45%;*/
	}
	.showcase .entry .album .inner .name {
		margin-top: 2%;
	}
	.t1 h6 span:nth-child(1), .t2 h6 span:nth-child(1) {
		padding: 0 0 0 11%;
	}

	h6{
		font-size: 1rem;
	}
	.showcase .entry .album .inner .name h3 {
		font-size: 1rem;
	}
}
@media (max-width: 1024px){



	.t1 h3{
		left: -11vw;
		top: 38vh;
	}

	.t2 h3{
		left: -11vw;
		top: 28vh;
	}

	.t1 h6 {
		top: 30.8vh;
		right: 7vw;
		width: 12vw;
		padding: 0;
	}

	.t2 h6{
		width: 10vw;
		top: 20.8vh;
		right: 7vw;
		width: 12vw;
		/*background-size: 45% 45%;*/
	}
	.showcase .entry .album .inner .name {
		margin-top: -5%;
	}
	.t1 h6 span:nth-child(1), .t2 h6 span:nth-child(1) {
		padding: 0 0 0 7%;
	}

	h6{
		font-size: 1rem;
	}
	.showcase .entry .album .inner .name h3 {
		font-size: 1rem;
	}
}
@keyframes h6hover{
    0%, 100%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(25px,0);
    }
}