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-snapask.svg') 0 0, auto;
}

a {
	cursor: url('images/cursor-snapask.svg') 0 0, 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: #112d56;
text-decoration: none;
}

.breadcrumb {
position: fixed;
top: 70px;
left: 30px;
font-size: 16px;
color: #112d56;
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: #EFEFEF;
}

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

.profile-section h2 {
font-size: 16px;
font-weight: 500;
margin-bottom: 30px;
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: #F7F8F8;
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;
}

.btn {
font-family: 'degular-text', sans-serif;
margin-bottom: 10px;
font-size: 15px;
border: none; 
border-radius: 3px; 
padding: 5px;
background-color: #fff;
}

/* .btn:hover {
background-color: #586C88;
color: #fff;
} */

.click {
color: #62A8FD;
}

.img {
max-width: 70%;
display: block;
margin: 0 auto;
margin-top: 60px;
}

.img-2 {
max-width: 70%;
display: block;
margin: 0 auto;
margin-top: 60px;
}

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

.img-4 {
max-width: 100%;
display: block;
margin: 0 auto;
}

.img-5 {
max-width: 90%;
display: block;
margin: 0 auto;
padding-top: 30px;
}

.img-6 {
max-width: 90%;
display: block;
margin: 0 auto;
}

.img-7 {
max-width: 100%;
display: block;
margin: 0 auto;
padding-top: 50px;
}

.img-8 {
max-width: 70%;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}

.img-9 {
	max-width: 85%;
	display: block;
	margin: 0 auto;
	padding-top: 30px;
	padding-left: 20px;
	}

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

.section-title-3 {
font-weight: 400;
margin-top: 50px;
margin-bottom: 20px;
color: #222528;
font-size: 18px;
text-transform: uppercase;
padding-left: 60px;
/* background-color: #e7eaee; */
}

.img-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

.text-s {
color: #112d56;
text-align: center;
max-width: 75%;
display: block;
margin: 0 auto;
line-height: 1.5;
padding-top: 30px;
font-size: 15px;
}

.text-s2 {
	color: #112d56;
	text-align: center;
	max-width: 75%;
	display: block;
	margin: 0 auto;
	line-height: 1.5;
	padding-top: 50px;
	padding-bottom: 60px;
	font-size: 15px;
	}


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


	@media (min-width: 2560px) {
		canvas {
		width: 100vw;
		height: 100vh;
		min-width: 2560px;
		min-height: 100vh;
		}
		
		body {
		min-width: 100vw;
		min-height: 100vh;
		}
	
		/* .main-content {
			width: 84%;
		} */
		
		.sidebar {
			width: 22%;
		}
	
		.logo {
		top: 50px;
		left: 50px;
		z-index: 200;
		font-size: 35px;
		text-decoration: none;
		}
		
		.breadcrumb {
		position: fixed;
		top: 120px;
		left: 30px;
		font-size: 30px;
		padding: 3px 10px;
		}
		
		.profile-section h1 {
		font-size: 60px;
		font-weight: 500;
		margin-top: 100px;
		}
		
		.profile-section h2 {
			font-size: 30px;
		}
		
		.description h3 {
			font-size: 25px;
		}
		
		.description p {
			font-size: 25px;
			line-height: 1.4;
		}
		
		.label {
			font-size: 25px;
		}
		
		.content p {
			font-size: 24px;
			line-height: 1.4;
		}
		
		.skip {
			font-size: 30px;
		}
		
		.section-title, .section-title-2, .section-title-3, .section-title-4, .section-title-5 {
			font-size: 30px;
		}
		
		.content-block p {
			font-size: 28px;
			line-height: 1.5;
			padding-left: 150px;
			max-width: 1600px;
		}
	
		.content-block-2 p {
			font-size: 28px;
			padding-right: 100px;
			margin-top: -5px;
		}
	
		.cover-3 {
			max-width: 100%;
		}
		.cover {
			margin-top: -30px;
		}
	
		.text-s, .text-s2 {
			font-size: 30px;
		}
		
		.btn {
			font-size: 26px;
		}
	
		}