html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: 'degular-text', sans-serif;
background-color: #EAEAEA;
scroll-behavior: smooth;
}

body {
	cursor: url('../../../images/cursor-mix.svg') 16 16, auto;
}

a {
	cursor: url('../../../images/cursor-mix.svg') 10 10, pointer;
  }

canvas {
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 100;
pointer-events: none;
}

.logo {
position: fixed;
top: 30px;
left: 30px;
z-index: 200;
font-size: 18px;
color: #EAEAEA;
text-decoration: none;
}

.breadcrumb {
position: fixed;
top: 70px;
left: 30px;
font-size: 16px;
color: #EAEAEA;
z-index: 200;
padding: 3px 10px;
text-decoration: none;
}

/* Sidebar */
.sidebar {
width: 20%;
padding: 120px 40px 40px 40px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow-y: auto;
z-index: 100;
background-color: #212120;
}

.profile-section h1 {
font-size: 40px;
font-weight: 500;
margin-bottom: 5px;
color: #C7FF00;
}

.profile-section h2 {
font-size: 16px;
font-weight: 500;
margin-bottom: 50px;
color:#C7FF00;
text-transform: capitalize;
}

.description h3 {
font-size: 15px;
font-weight: 500;
margin-bottom: 20px;
color: #EAEAEA;
text-transform: uppercase;
}

.description p {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #EAEAEA;
margin-bottom: 40px;
max-width: 95%;
}

.info-row {
display: flex;
align-items: flex-start;
gap: 30px;
margin-top: 20px;
margin-bottom: 20px;
}

.label {
font-size: 15px;
font-weight: 500;
color: #EAEAEA;
min-width: 80px;
text-transform: uppercase;
}

.content p {
font-size: 14px;
font-weight: 400;
color: #EAEAEA;
line-height: 1.4;
margin: 0;
}

.skip {
display: block;
text-align: right;
margin-top: 40px;
color: #eb1c24;
text-decoration: none;
}

/* Main Content */
.main-content {
margin-left: 25%;
width: 75%;
background-color: #F9F8F5;
color: #212120;
position: relative;
z-index: 2;
height: auto;
}

.cover {
max-width: 100%;
/* min-height: 80%; */
display: block;
margin-top: -20px;
}

.goal {
max-width: 80%;
display: block;
margin: 0 auto;
}

/* Section */
.section {
/* padding: 20px 0; */
}

.each-section-2 {
padding-top: 20px;
padding-bottom: 20px;
background-color: #C7FF00;
color: #212120;
}

.section-title {
font-weight: 400;
margin-bottom: 20px;
color: #212120;
font-size: 18px;
text-transform: uppercase;
padding-left: 60px;
}

.content-block {
padding-left: 60px;
padding-right: 50px;
}

.content-block p {
font-size: 16px;
line-height: 1.8;
max-width: 85%;
}

.text {
padding-left: 60px;
}

.each-section-3 {
padding-top: 20px;
padding-bottom: 20px;
background-color: #F9F8F5;
color: #212120;
}

.section-title-2 {
font-weight: 400;
margin-bottom: 20px;
background-color: #212120;
color: #C7FF00;
font-size: 18px;
text-transform: uppercase;
padding-left: 60px;
padding-top: 5px;
padding-bottom: 5px;
}

.content-block-2 {
/* padding-left: 60px; */
/* padding-right: 50px; */
margin-top: -20px;
}

.content-block-2 p {
background-color: #C7FF00;
font-size: 16px;
line-height: 1.6;
max-width: 100%;
padding-top: 10px;
padding-bottom: 15px;
}

.cover-2 {
	max-width: 90%;
	display: block;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 10px;
}

.text-2 {
	padding-left: 60px;
	font-size: 15px;
	line-height: 1.5;
	max-width: 70%;
	display: block;
	margin: 0 auto;
}

.cover-3 {
	max-width: 90%;
	display: block;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

video {
	margin-top: -20px;
	margin-bottom: -63px;
}

  /* 只有右側 main-content 進場 */
  .main-content {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .main-content.page-loaded {
	opacity: 1;
	transform: translateY(0);
  }