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

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

a {
	cursor: url('../../../images/cursor-ht.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: #222528;
text-decoration: none;
}

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

/* 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: #fff;
}

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

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

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

.description p {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #222528;
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: #222528;
min-width: 80px;
text-transform: uppercase;
}

.content p {
font-size: 14px;
font-weight: 400;
color: #222528;
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: #222528;
color: #f1f2f3;
position: relative;
z-index: 2;
height: auto;
}

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

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

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

.section-title {
font-weight: 400;
margin-bottom: 20px;
color: #222528;
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;
}

.text-2 {
padding-left: 60px;
font-size: 16px;
line-height: 1.5;
max-width: 75%;
color: #f1f2f3;
}

.each-section-3 {
padding-top: 20px;
/* padding-bottom: 20px; */
margin-top: 20px;
background-color: #222528;
}

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

/* style */
.each-section-4 {
/* padding-top: 20px; */
/* padding-bottom: 20px; */
background-color: #fbf1dc;
color: #222528;
}

.section-title-3 {
font-weight: 400;
margin-bottom: 10px;
background-color: #f3b73f;
color: #222528;
font-size: 18px;
text-transform: uppercase;
padding-left: 60px;
padding-top: 5px;
padding-bottom: 5px;
}

.text-3 {
padding-left: 60px;
font-size: 16px;
line-height: 1.5;
max-width: 75%;
color: #222528;
}

/* article */
.each-section-5 {
background-color: #f1f2f3;
color: #222528;
}

.section-title-4 {
font-weight: 400;
margin-bottom: 10px;
background-color: #464d53;
color: #f1f2f3;
font-size: 18px;
text-transform: uppercase;
padding-left: 60px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: -1px;
}

.text-4 {
padding-left: 60px;
font-size: 16px;
line-height: 1.5;
max-width: 75%;
color: #222528;
}

/* products */
.each-section-6 {
background-color: #CAD6D5;
color: #222528;
}

.section-title-5 {
font-weight: 400;
margin-bottom: 10px;
background-color: #222528;
color: #CAD6D5;
font-size: 18px;
text-transform: uppercase;
padding-left: 60px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: -1px;
}

.text-5 {
padding-left: 60px;
font-size: 16px;
line-height: 1.5;
max-width: 75%;
color: #222528;
}

  /* 只有右側 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);
  }