@charset "utf-8";
/* CSS Document */
@import url("rwd.css");
/* Add fonts */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Bungee&family=Caveat:wght@400..700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Noto+Sans+TC:wght@100..900&family=Rubik+Mono+One&family=Russo+One&family=Silkscreen:wght@400;700&family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');


*{
	margin:0;
	padding:0;
}

html, body {
    overflow: auto; /* 確保可以滾動 */
	/* scroll-behavior: smooth; */
}

body {
	height: auto; /* 讓頁面有足夠的高度可以滾動 */
	cursor: none;
	font-family: "Black Ops One", serif;
	background:#262626;
	cursor: none;
}

body.dragging {
	cursor: none;
}

/* header */
header{
	position:relative;
	padding:15px 0px;
	color:rgba(255, 255, 255, 1);
	/* background:#262626; */
	text-align:center;
}

/* header svg{
	opacity: 0.9;
} */

.ficon{
	font-size:60px;
	padding:5px;
}

h1 svg{
	width:12%;
	height:12%;
	margin-top: 18px;
}

.menu{
	position:absolute;
	right:20px;
	top:20px;
	width:30px;
	height:30px;
	font-size:30px;
	display:block;
}

.menu:hover{
	cursor:pointer;
}

/* nav bar */
nav{
	width:100%;
	margin:auto;
	text-align:center;
	background:rgba(0, 0, 0, 0.7);
	opacity: 1;
	font-size:18px;
}

nav li{
	display: block;
	border-bottom:solid #fff 1px;
}

nav li a{
	font-family: "Black Ops One", serif;
	display: inline-block;
	width:100%;
	padding:20px 10px;
	color: #fff;
	text-decoration: none;
	opacity: 1;
	transition-duration:0.5s; 
	width: 150px;
}

nav li a:hover{
	/* background:#000; */
	color: #fff;
	transition-duration:0.5s; 
}

/* .intro{
	color: #fff;
	width: 80%;
	text-align:center;
	margin: auto;
	line-height:1.5em;
	font-size:1.1em;
} */


/* .intro h1{
	margin: 30px 0px;
	line-height:1.5em;
} */

.intro{
	width: 100%;
	height: auto;

	display: flex;
	/* 水平置中 */
	justify-content: center;    
	/* 垂直置中 */
	align-content: center;      
	flex-wrap: wrap;
}

.info{
	width: 80%;
	height: 170px;
	margin-top: 0px;
	/* padding-bottom: 20%; */
	background-image: url("../images/info2.png");
	background-repeat: no-repeat;
	background-size: 100%;
	border-bottom: #fff solid 2px;
}

.info1{
	width: 80%;
	height: 190px;
	margin-top: 0px;
	/* padding-bottom: 20%; */
	background-image: url("../images/info4.png");
	background-repeat: no-repeat;
	background-size: 100%;
	border-bottom: #fff solid 2px;
}

.ch_bg{
	background:#fff;
}

/* section */
section{
	width:100%;
	margin: auto;
	padding:5px 0px;
	text-align:center;
	color:#262626;
	line-height:2.5em;
	font-size:1.1em;
}

#bg{
	width: 100vw;
	height: 100vh;
	border: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	pointer-events: none;
	mix-blend-mode: difference;
}

.bgv{
	position: fixed;
	top: 0;
	left: 0;
	transform: translate(-38%,-0%);

	min-width: 100%;
	min-height: 100%;
	max-width: 1920px;
	max-height: 1080px;
	z-index: -100;
}

section h1,p{
	font-family: "Black Ops One", serif;
	color: #fff;
}

section img{
	width:100%;
	border: 2px solid rgb(256,256,256,0);
	border-radius: 10px;
	filter: grayscale(100%);
	transition-duration:0.5s; 
    user-select:none;
}

section img:hover{
	filter: grayscale(0%);
	border: 2px solid #5fff09;
	transition-duration:0.3s; 
}

/* .fancybox-skin{
	background: #000
} */

element.style {
	padding: 5px;
}

/* 回到最上層 */

aside{
	display: none;
	/* width: 100px;
	height: 100px; */
	position:fixed;
	right:10px;
	bottom:10px;
	z-index:1000000;
}

.top{
    width: 25px;
    margin-right: 21px;
    margin-bottom: 20px;
}

/*footer*/

footer{
	padding:20px 0px;
	text-align:center;
	color: #fff;	
}

/*=============== Proflle control ===============*/

.card{
	width: 100%;
	display: flex;
	justify-content: center;    
	align-content: center;    
	height: auto;
	flex-direction: column;   
	align-items: center;
	margin-bottom: 100px;
}

.card h1{
	margin: 30px 0px;
	padding-bottom: 20px;
	font-size: 20px;
	border-bottom: rgb(256,256,256,1) solid 2px;
	letter-spacing: 3px;
}

.card1,.card2 {
	width: 80%;
	display: flex;;
	color: #fff;
	flex-direction: column;
	margin-bottom: 20px;
	font-size: 12px;
	/* margin: auto; 用margin auto也可以 */
	/* justify-content: center;     */
}

.tag{
	display: flex;
	color: #fff;
	letter-spacing: 2px;
	margin-bottom: 10px;
	/* width: 100px; */
	/* text-align: center;
	justify-content: center;    
	align-content: center;    */
}

.tag::before{
	content: attr(data-type) " : "; 
	color: #fff;
	display: inline-block;
	width: 160px;
}

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

	.card h1{
		font-size: 20px;
	}

	.card1,.card2 {
		font-size: 12px;
		width: 57%;
		margin-bottom: 50px;

	}

	.tag::before{
		width: 200px;
		margin-right: 0px;
	}
	

}

@media only screen and (min-width: 1200px) {

	.card h1{
		font-size: 35px;
	}

	.card1,.card2 {
		font-size: 20px;
		width: 52%;
		margin-bottom: 100px;

	}

	.tag::before{
		width: 250px;
		margin-right: 30px;
	}


}



/*=============== Artwork control ===============*/

.gallery{
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 30px;
	align-items: center;
	margin-bottom: 50px;

	padding-bottom: 10px;
	/* padding-left: 100px; */
	scrollbar-color: rgb(255, 255, 255,0.7) rgb(0,0,0,0);
}  

.gallery img{
	display: flex;
	flex-shrink: 0; /* 防止圖片縮小 */
	width: 90%;
	height: auto;
	pointer-events: none;

}

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

	.gallery{
		display: flex;
		flex-direction: row;
		width: 100vw-100px;
		overflow: scroll;
	
		scrollbar-width:thin;
		margin-left: 5px;
		padding-bottom: 10px;
		margin-bottom: 50px;		
		scrollbar-color: rgb(255, 255, 255,0.7) rgb(0,0,0,0);
	}  
	
	.gallery img{
		flex-shrink: 0; /* 防止圖片縮小 */
		width: 500px;
		height: auto;
		pointer-events: none;
	
	}

}

@media only screen and (min-width: 1200px) {

	.gallery{
		width: 100vw-100px;
		margin-bottom: 0px;
	}  
	
	.gallery img{
		width: 1000px;
		height: auto;	
	}	

}


/*=============== rwd details ===============*/

/* For tablets */
@media only screen and (min-width: 768px) { 

	aside{
		display:block;
		position:fixed;
		right:10px;
		bottom:10px;
		z-index:1000000;
	}
	

	h1 svg{
        width:5%;
        height:5%;
	}

	nav{
		position: sticky; /* 使導覽列在滾動到指定位置後固定 */
		top: 0;           /* 固定在視窗頂部 */
		z-index:2000;
		/* background:#000; */
	}

	nav li a{
		color: #fff;
	}	
	
	nav li{
		display: inline-block;
		border-bottom:solid rgba(242, 242, 242, 1) 0px;
	}

	.menu{
        display:none;        
	}

	.info{
		width: 57%;
		height: 180px;
		margin-top: 40px;
		padding-bottom: 0%;
		background-image: url("../images/info1.png");
		background-repeat: no-repeat;
		background-size: 100%;
		border-bottom: #fff solid 2px;
	}

	.info1{
		width: 57%;
		height: 180px;
		margin-top: 40px;
		padding-bottom: 0%;
		background-image: url("../images/info3.png");
		background-repeat: no-repeat;
		background-size: 100%;
		border-bottom: #fff solid 2px;
	}

	
	
	section{
        line-height:2.5em;
        font-size:1.1em;
		width:70%;
		border-radius: 20px;
		padding: 30px 0;

	}

	nav li a:hover{
		/* background:#fff; */
		color: #fff;
	}
	
	.bgv{
		transform: translate(-28%,-0%);
	}


}

/* For desktop */
@media only screen and (min-width: 1200px) {


	nav{
		position: -webkit-sticky;
		  position: sticky;
		  top: 0;
		z-index:2000;
		/* background:#000; */
	}

	.info{
		width: 52%;
		height: 300px;
		margin-top: 40px;
		padding-bottom: 20%;
		background-image: url("../images/info1.png");
		background-repeat: no-repeat;
		background-size: 100%;
		border-bottom: #fff solid 2px;
	}

	.info1{
		width: 52%;
		height: 300px;
		margin-top: 40px;
		padding-bottom: 20%;
		background-image: url("../images/info3.png");
		background-repeat: no-repeat;
		background-size: 100%;
		border-bottom: #fff solid 2px;
	}

	

	section{
		width:60%;
		border-radius: 20px;
	}

	nav li a{
		color: #fff;
	}	

	nav li a:hover{
		/* background:#fff; */
		color: #fff;
	}
	
	.bgv{
		transform: translate(-0%,-0%);
	}

	.fancybox-iframe{
		width: 80%;
	}
	
}


/* 隱藏滑動滾輪 */
body::-webkit-scrollbar {
    display: none;
}

/* html,body{ width: 100%; height: 100%; overflow: scroll;} */
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0px;height:0px;}
body{margin:0;}


/* 文字選取反黑特效 */
::selection {
    background: none;
    color: #5fff09;
}

img::selection {
    background: transparent;
}

/* 絲滑捲動 */
/* html{
	scroll-behavior: smooth;
} */