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

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

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

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

.logo {
font-family: 'degular-text', sans-serif;
position: fixed;
top: 30px;
left: 30px;
z-index: 200;
font-size: 18px;
color: #EAE9D9;
text-decoration: none;
}

.breadcrumb {
position: fixed;
top: 70px;
left: 30px;
font-size: 16px;
text-decoration: none;
color: #EAE9D9;
/* text-transform: capitalize; */
z-index: 200;
/* background-color: white; */
padding: 3px 10px;
}

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


.profile-section h1 {
font-size: 45px;
font-family: 'degular-text', sans-serif;
font-weight: 400;
font-style: normal;
margin-bottom: 5px;
color: #EAE9D9;
}


.profile-section h2 {
font-size: 16px;
font-family: 'degular-text', sans-serif;
font-weight: 500;
font-style: normal;
margin-bottom: 50px;
color: #EAE9D9;
text-transform: capitalize;
}


.profile-section h3 {
font-size: 15px;
font-family: 'degular-text', sans-serif;
font-weight: 500;
font-style: normal;
margin-bottom: 10px;
color: #EAE9D9;
}


.year-row {
display: grid;
grid-template-columns: 1fr 1fr;
margin-bottom: -20px;
}


.year {
text-align: end;
font-family: 'degular-mono', sans-serif;
/* margin-left: -20px; */
}


.description h3 {
font-size: 15px;
font-family: 'degular-text', sans-serif;
font-weight: 500;
font-style: normal;
margin-bottom: 20px;
color: #EAE9D9;
text-transform: uppercase;
}


.description p {
font-size: 14px;
font-family: 'degular-text', sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.5;
color: #EAE9D9;
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-family: 'degular-text', sans-serif;
font-weight: 500;
color: #EAE9D9;
min-width: 80px;
text-transform: uppercase;
}


.content p {
font-size: 14px;
font-family: 'degular-text', sans-serif;
font-weight: 400;
color: #EAE9D9;
line-height: 1.4;
margin: 0;
}


.role-section {
margin-top: 40px;
margin-bottom: 30px;
}


.role-section h3 {
font-size: 15px;
font-family: 'degular-text', sans-serif;
font-weight: 500;
font-style: normal;
color: #EAE9D9;
margin-bottom: 15px;
}


.role-section p {
font-size: 15px;
font-family: 'degular-text', sans-serif;
font-weight: 400;
font-style: normal;
color: #EAE9D9;
line-height: 25px;
}

/* Main Content - Scrollable */
.main-content {
margin-left: 25%;
/* width: 80%; */
background-color: #EAE9D9;
color: #292929;
margin-bottom: ;
position: relative;
z-index: 2;
overflow-y: visible;
height: auto;
}

/* section */
.section {
	/* margin-bottom: -50px; */
/* padding-left: 60px; */
/* padding-top: 60px; */
}

.each-section {
/* padding-top: 20px; */
/* padding-bottom: 20px; */
}


/* problem */

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

.problem-title {
display: flex;
font-size: 18px;
text-transform: uppercase;
font-weight: 500;
font-style: normal;
margin-bottom: 30px;
}

.problem-title img {
scale: 50%;
}

.problem-block {
padding-top: 10px;
padding-right: 80px;
padding-bottom: 20px;
padding-left: 60px;
background-color: #339551;
color: #E1DC53;
}

.problem-block p {
font-weight: 400;
font-style: normal;
/* font-size: 16px; */
line-height: 1.8;
}

.need-block {
padding-top: 10px;
padding-left: 60px;
padding-right: 80px;
background-color: #E1DC53;
color: #339551;
}

.need-block p {
font-weight: 400;
font-style: normal;
/* font-size: 16px; */
line-height: 1.8;
}

/* interview */

/* .interview {
background-color: #2b2b2b;
} */

.title {
font-size: 18px;
text-transform: uppercase;
font-style: normal;
margin-bottom: 30px;
}

.interview-block {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
max-width: 85%;
margin: 0 auto;
}

.interview-block-details {
display: block;
text-align: center;
padding-left: 20px;
padding-right: 20px;
line-height: 1.5;
align-items: center;
}

.interview-block-details img {
scale: 55%;
}

.answer {
display: block;
max-width: 800px;
margin: 0 auto;
padding-top: 60px;
}

/* insight */

.insight-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
/* column-gap: 30px; */
row-gap: 30px;
padding-left: 50px;
padding-right: 50px;
padding-top: 20px;
/* max-width: 800px; */
}

.insight-grid img {
display: block;
margin: 0 auto;
width: 90%;
height: auto;
display: block;
}

.insight-grid p {
text-align: center;
margin: 0 auto;
width: 80%;
font-size: 16px;
line-height: 1.4;
}

.hmw {
align-items: center;
text-align: center;
margin-top: 60px;
background-color: #339551;
padding-top: 90px;
padding-bottom: 90px;
} 

.hmw p {
font-size: 22px;
font-weight: 400;
font-style: italic;
line-height: 1.4;
max-width: 500px;
margin: 0 auto;
color: #EFEEE7;
}

.hmw img {
margin-bottom: 30px;
scale: 1.3;
}

.yellow-block {
background-color: #E1DC53;
/* margin-top: 30px; */
padding-top: 10px;
padding-bottom: 30px;
}

.green-block {
background-color: #339551;
color: #EAE9D9;
padding-top: 10px;
padding-bottom: 20px;
}

/* solution */

.solution-cover {
max-width: 100%;
/* margin-top: -20px; */
}

.features{
display: grid;
grid-template-columns: repeat(3, minmax(260px, 1fr));
/* column-gap: 30px; */
align-items: start;
max-width: 900px;
margin: 0 auto;
padding-top: 70px;
padding-bottom: 70px;
}

.feature{
display: grid;
text-align: center;
max-width: 80%;
margin: 0 auto;
}

.feature .icon{
width: 90px;
height: auto;
margin: 0 auto;
display: block;
}

.feature h3{
font-size: 20px;
font-weight: 500;
margin: 12px 0 28px;
}

.feature p{
font-size: 16px;
line-height: 1.5;
margin: 0;
}

.changes{
	display: grid;
	grid-template-columns: repeat(2, minmax(260px, 1fr));
	/* column-gap: 30px; */
	align-items: start;
	max-width: 700px;
	margin: 0 auto;
	padding-top: 70px;
	padding-bottom: 70px;
	}
	
	.change {
	display: grid;
	text-align: center;
	max-width: 80%;
	margin: 0 auto;
	}
	
	.change .icon{
	width: 90px;
	height: auto;
	margin: 0 auto;
	display: block;
	}
	
	.change h3{
	font-size: 20px;
	font-weight: 500;
	margin: 12px 0 28px;
	color: #339551;
	}
	
	.change p{
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	}

.phone-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
/* column-gap: 30px; */
row-gap: 30px;
/* padding-left: 50px;
padding-right: 50px; */
padding-bottom: 30px;
padding-top: 20px;
max-width: 75%;
margin: 0 auto;
}

.phone-grid img {
display: block;
margin: 0 auto;
width: 85%;
height: auto;
display: block;
}

.phone-grid p {
text-align: center;
margin: 0 auto;
width: 80%;
font-size: 16px;
line-height: 1.4;
}

.phone-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
row-gap: 30px;
padding-top: 20px;
max-width: 55%;
margin: 0 auto;
}

.phone-grid-2 img {
display: block;
margin: 0 auto;
width: 85%;
height: auto;
display: block;
}

.phone-grid-2 p {
text-align: center;
margin: 0 auto;
width: 80%;
font-size: 16px;
line-height: 1.4;
}

.phone-grid-2 video {
display: block;
margin: 0 auto;
width: 85%;
height: auto;
display: block;
}



/* hero */

.openquestion {
background-color: #242424;
color: #E1DC53;
padding-top: 3px;
padding-bottom: 3px;
align-items: center;
text-align: center;
font-size: 20px;
margin-top: -10px;
}

.cover {
object-fit: contain;
width: 100%;
height: 100%;
}


.title {
color: #339551;
display: flex;
align-items: center;
font-size: 18px;
text-transform: uppercase;
padding-left: 60px;
padding-bottom: 8px;
border-bottom: 1px solid #339551;
margin-bottom: 20px;
gap: 7px;
}

.title-no {
	background-color: #E1DC53;
color: #339551;
display: flex;
align-items: center;
font-size: 18px;
text-transform: uppercase;
padding-left: 60px;
gap: 7px;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 10px;
margin-top: -20px;
}

.title-no::before {
	content: "";
	/* display: inline-block; */
	width: 16px;
	height: 16px;
	background-image: url("images/logo-green.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

.need-title {
color: #339551;
display: flex;
align-items: center;
font-size: 18px;
text-transform: uppercase;
padding-bottom: 8px;
border-bottom: 1px solid #339551;
margin-bottom: 20px;
gap: 6px;
}

.need-title::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/logo-green.svg");
background-repeat: no-repeat;
background-size: contain;
}


.problem-title {
color: #E1DC53;
display: flex;
align-items: center;
font-size: 18px;
text-transform: uppercase;
padding-bottom: 8px;
border-bottom: 1px solid #E1DC53;
margin-bottom: 20px;
gap: 6px;
}

.problem-title::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/logo-yellow.svg");
background-repeat: no-repeat;
background-size: contain;
}

.title::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/logo-green.svg");
background-repeat: no-repeat;
background-size: contain;
}

.title-2 {
color: #242424;
display: flex;
align-items: center;
font-size: 18px;
text-transform: uppercase;
padding-left: 60px;
padding-top: 20px;
gap: 7px;
}

.title-2::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("../../../images/logo-outline.svg");
background-repeat: no-repeat;
background-size: contain;
}

.title-3 {
color: #EAE9D9;
display: flex;
align-items: center;
font-size: 18px;
text-transform: uppercase;
padding-left: 60px;
padding-top: 20px;
gap: 7px;
}

.title-3::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("images/splitee-w.svg");
background-repeat: no-repeat;
background-size: contain;
}

.skip {
	display: block;
	text-align: right;
	margin-top: 150px;
	color: #339551;
	text-decoration: none;
	padding-left: 35px;
  }


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