@charset "utf-8";
/* CSS Document */
*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
h1{
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 12px;
	font-weight: 600px;
	position: relative;
	color: #A0A0A0;
}
main{
	width: 100%;
	height: 100%;
	font-family: 'Noto Sans TC', sans-serif;
	min-height: 100vh;
	background: black;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clock{
	margin-left: 820px;
	margin-top: 900px;
	color: #A0A0A0;
	position: relative;
	height: 10%;
	font-size: 30px;
}

#system{
	width: 30%;
	height: 10%;
	margin-left: 7%;
	margin-top: 5%;
	display: flex;
}
#system img{
	width: 10%;
	height: 10%;
}
#system input{
	width: 150%;
}
#folder1 {
    left: 10%;
	top: 20%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#folder1header {
    z-index: 10;
}

#folder1 img{
	width: 120px;
	position: relative;
}
#folder2 {
	left: 10%;
	top: 35%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#folder2header {
    z-index: 10;
}
#folder1content{
	width: 1000px;
	height: 600px;
	background-color: black;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 2px;
	border-color: white;
	position: absolute;
	opacity: 100;
	opacity: 0;

}
#folder1content img{
	width: 250px;
	margin: 30px;
}
#folder1content img:hover{
	border-style: solid;
	border-width: 1px;
	border-color: white;
	width: 70%;
	top: -30%;
	position: absolute;
}
.close{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
.button{
	margin: -8px;
}
#folder2content{
	margin-top: 7%;
	margin-left: 12%;
	width: 1000px;
	height: 600px;
	background-color: black;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 2px;
	border-color: white;
	position: relative;
	position: absolute;
	opacity: 100;
	opacity: 0;

	
}
#folder2content img{
	width: 200px;
	margin: 17px;
}
#folder2content img:hover{
	border-style: solid;
	border-width: 2px;
	border-color: white;
}
.close2{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#folder2 img{
	width: 120px;
	position: relative;
}
#folder3 {
	left: 10%;
	top: 50%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#folder3header {
    z-index: 10;
}

#folder3 img{
	width: 120px;
	position: relative;
}
#folder3content{
	margin-top: 9%;
	margin-left: 14%;
	width: 1000px;
	height: 600px;
	background-color: black;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 2px;
	border-color: white;
	position: relative;
	position: absolute;
	opacity: 100;
	opacity: 0;
	
}
#folder3content img{
	margin: 35px;
	width: 25%;
}
#folder3content img:hover{
	border-style: solid;
	border-width: 2px;
	border-color: white;
}
.close3{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#folder4 {
	left: 10%;
	top: 65%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#folder4header {
    z-index: 10;
}

#folder4 img{
	width: 120px;
	position: relative;
}
#folder4content{
	margin-top: 11%;
	margin-left: 16%;
	width: 1000px;
	height: 600px;
	background-color: black;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 2px;
	border-color: white;
	position: relative;
	position: absolute;
	opacity: 100;
	opacity: 0;
}
#folder4content img{
	width: 350px;
	margin: 28px;
}
#folder4content img:hover{
	border-style: solid;
	border-width: 1px;
	border-color: white;
}
.close4{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
/*----------------------------------------------img------------------------------------------------------------*/
#img1 {
    left: 20%;
	top: 30%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#img1header {
    z-index: 10;
}

#img1 img{
	width: 120px;
	position: relative;
}
#img1content{

	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;

}
#img1content img{
	width: 65%;
}

.close5{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}

#img2 {
    left: 22%;
	top: 45%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#img2header {
    z-index: 10;
}

#img2 img{
	width: 120px;
	position: relative;
}
#img2content{

	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;

}
#img2content img{
	width: 60%;
}
.close6{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#img3 {
    left: 18%;
	top: 60%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#img3header {
    z-index: 10;
}

#img3 img{
	width: 120px;
	position: relative;
}
#img3content{

	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;

}
#img3content img{
	width: 60%;
}
.close7{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#img4 {
    left: 25%;
	top: 75%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#img4header {
    z-index: 10;
}

#img4 img{
	width: 120px;
	position: relative;
}
#img4content{

	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;

}
#img4content img{
	width: 60%;
}
.close8{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#img5 {
    left: 40%;
	top: 65%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#img5header {
    z-index: 10;
}

#img5 img{
	width: 120px;
	position: relative;
}
#img5content{

	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;

}
#img5content img{
	width: 50%;
}

.close9{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#img6 {
    left: 77%;
	top: 25%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#img6header {
    z-index: 10;
}

#img6 img{
	width: 120px;
	position: relative;
}
#img6content{

	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;

}
#img6content img{
	width: 50%;
}
.close10{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#img7 {
    left: 75%;
	top: 40%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#img7header {
    z-index: 10;
}

#img7 img{
	width: 120px;
	position: relative;
}
#img7content{

	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;

}
#img7content img{
	width: 50%;
}

.close11{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#img8 {
    left: 80%;
	top: 55%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#img8header {
    z-index: 10;
}

#img8 img{
	width: 120px;
	position: relative;
}
#img8content{
	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;

}
#img8content img{
	width: 50%;
}
.close12{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}

/*--------------------------------------------------------------------------paper------------------------------------------------------------------------*/
#paper1 {
    left: 35%;
	top: 24%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#paper1header {
    z-index: 10;
}

#paper1 img{
	width: 120px;
	position: relative;
}
#paper1content{

	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;
}
#paper1content img{
	width: 80%;
}

.close13{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#paper2 {
    left: 30%;
	top: 35%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#paper2header {
    z-index: 10;
}

#paper2 img{
	width: 120px;
	position: relative;
}
#paper2content{
	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;
}
#paper2content img{
	width: 80%;
}
.close14{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#paper3 {
    left: 32%;
	top: 55%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#paper3header {
    z-index: 10;
}

#paper3 img{
	width: 120px;
	position: relative;
}
#paper3content{
	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;
}
#paper3content img{
	width: 80%;
}
.close15{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#paper4 {
    left: 42%;
	top: 30%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#paper4header {
    z-index: 10;
}

#paper4 img{
	width: 120px;
	position: relative;
}
#paper4content{
	width: 1000px;
	height: 600px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	padding: 20px;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;

}
#paper4content img{
	width: 80%;
}
#paper4content img:hover{
	background: gray;
}
.close16{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}

/*----------------------------------------------trashcan-------------------------------------------------*/
#trashcan {
    left: 87%;
	top: 80%;
    position: absolute;
    z-index: 9;
    text-align: center;
}

#trashcanheader {
    z-index: 10;
}

#trashcan img{
	width: 80px;
	position: relative;
}
/*---------------------------------------foldercontent---------------------------------------*/
#folder1-1content{
	width: 1000px;
	height: 650px;
	top: 0px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	border-style: solid;
	z-index: 3;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;
}
#folder1-1content img{
	width: 65%;
}
.close18{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#folder1-2content{
	width: 1000px;
	height: 650px;
	top: 0px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;
}
#folder1-2content img{
	width: 65%;
}
.close19{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#folder1-3content{
	width: 1000px;
	height: 650px;
	top: 0px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;
}
#folder1-3content img{
	width: 65%;
}
.close20{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#folder1-4content{
	width: 1000px;
	height: 650px;
	top: 0px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;
}
#folder1-4content img{
	width: 65%;
}
.close21{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#folder1-5content{
	width: 1000px;
	height: 650px;
	top: 0px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;
}
#folder1-5content img{
	width: 65%;
}
.close22{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}
#folder1-6content{
	width: 1000px;
	height: 650px;
	top: 0px;
	background-color: white;
	border-radius: 4px;
	text-align: center;
	border-style: solid;
	z-index: 8;
	border-width: 1px;
	border-color: #A0A0A0;
	position: absolute;
	opacity: 100;
	opacity: 0;
}
#folder1-6content img{
	width: 65%;
}
.close23{
	position: absolute;
	top: 0;
	right: 14px;
	font-size: 25px;
	transform: rotate(45deg);
	cursor: pointer;
	color: #A0A0A0;
}