#sections {
    height: auto;
    width: 100vw; 
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
}

#about-head{
	top:0;
	height: 100vh;
    width: 100vw; 
    background: white; /* 測試用背景色 */	
	position: absolute;	
	z-index:2;
	display:block;	
}

.about-title {
	margin-top:40vh;
	position: relative;
	color: rgba(50,50,50,.9);
	font-family: "Gloock", "Mincho";
	font-size: 7vw;
	text-transform: uppercase;
	text-align:center;	
    justify-content: center;
    align-items: center;	
	letter-spacing: 1.5vw;
    width: 100%; 
    display: block;	
}

.about-title.lang-en::before {
	content:"About Me";	
}

.about-title.lang-zh {
	position: relative;	
	font-size: 6vw;
	top:-1vh;
	font-weight: 900;
	letter-spacing: 7vw;
	left:3.5vw;
}

.about-title.lang-zh::before {
	content:"關於我";
}

.about-subtitle {
	position: relative;
	color: rgba(100,100,100,.8);
	font-family: "Mincho";
	font-size: 1.8vw;
	font-weight: 400;
	text-transform: uppercase;
	text-align:center;	
    justify-content: center;
    align-items: center;	
	letter-spacing: .1vw;
    width: 100%; 
	top: 5vh;
    display: block;	
}

.about-subtitle.lang-en::before {
	content:"Exploring Visual";	
}

.about-subtitle.lang-zh {
	position: relative;	
	font-size: 1.5vw;
	font-weight: 400;
	letter-spacing: .5vw;
	top: 5.5vh;	
	left:.5vw;
}

.about-subtitle.lang-zh::before {
	content:"探索影像";
}


#intro {
    position: fixed;
    top: -30vh;
    left: 0;
    width: 100%;
    height: 300vh;
	display:block;
    overflow-y: auto; 	
	background:white;
}

.right-stroke {
    border: solid rgba(40, 200, 160, 1);
    border-width: .5vh 0 0 0;
    width: 70vw;
    height: 155vh;
    right: 0;
    top: 5vh;
	opacity: 0; 
	transform: scaleX(0);
    position: absolute;
	transition: all 1s ease-in-out .5s;		
}

.right-stroke.show {
    opacity: 1;
    transform: scaleX(1);	
    animation: draw-border 1.5s ease-in-out forwards;
}

@keyframes draw-border {
    0% {
        border-width: .5vh 0 0 0;
    }
    90% {
        border-width: .5vh 0 .5vh 0;
    }
    100% {
        border-width: .5vh 0 .5vh .5vh;
    }
}

#intro > div:not(.right-stroke) {
    opacity: 0;
    transform: translateY(10vh);
	transition: all 1s ease-in-out .5s;	
}

#intro > div:not(.right-stroke).show {
    opacity: 1;
    transform: translateY(0);
	transition: all 1s ease-in-out .5s;		
}



.left-green-box-top{
	left:0;
	top:-20vh;
	width:12vw;
	height:10vh;
	background:rgba(83,211,179,1);
	position:absolute;
}

.left-green-box{
	left:0;
	top:20vh;
	width:40vw;
	height:120vh;
	background:rgba(83,211,179,1);
	position:absolute;
}

.left-white-box{
	left:20vw;
	top:48vh;
	width:27vw;
	height:70vh;
	background:rgba(255,255,255,1);
	position:absolute;	
}

.left-photo{
	background: url(../img/overlays/05g.png), url(../img/me3.jpg);
	background-size: auto 0.2%, cover;
	filter: contrast(1.2) brightness(1.1) grayscale(90%) sepia(10%);
	background-position: 50% 70%;
	position:absolute;
	left:25vw;
	top:53vh;
	width:20vw;
	height:60vh;	
}

.left-green-stick{
	left:39vw;
	top:100vh;
	width:10vw;
	height:6vh;
	background: rgba(40, 200, 160, .6);
	transform: rotate(0deg);
	position:absolute;
}


.right-line{
	border: solid rgba(40,200,160,1);
	border-width: 0 .3vh 0 0;
	width:3vw;
	height:105vh;
	right:12vw;
	top:35vh;  /*70到頂*/
	position:absolute;
}

.right-gray-box{
	width:100vw;
	height:50vh;
	right:0;
	top: 80vh;
	z-index:-1;
	background:rgba(50,50,50,.1);
	position:absolute;
}

.right-text{
	width:26vw;
	height:80vh;
	right:15vw;
	top: 52vh;
	position:absolute;	
	font-family: "Mincho";
	font-size: 1vw;	
	letter-spacing: .1vw;
	text-align: right;
	word-break: break-word;
	word-wrap: break-word;
	line-height: 2;
}


.right-text.lang-en::before{
	font-weight:400;
	white-space: pre;
	content:"Jermaine Ho, \A graduated from Jinan University, \A with major in advertising in 2009. \A He enjoys exploring and experimenting \A with new things, always seeking fresh experiences \A and opportunities to learn. \A With a hands-on approach, \A he finds satisfaction in understanding \A how things workand creating something \A from scratch. Whether it is capturing new photo \A shoots and refining them into final posts \A or assembling a visual composition from various  \A materials, his ISTP nature drives him \A to engage with creativity through \A practical exploration.";
}

.right-text.lang-zh{
	top: 55vh;
}

.right-text.lang-zh::before {
	line-height: 2.5;
	white-space: pre;
	content:"何浚明 \A 2009年畢業於暨南大學主修廣告學 \A 喜愛嘗試和摸索新的事物  \A 尋找新的體驗與學習機會 \A 透過實踐享受理解事物運作的過程 \A 並從零開始創造事物帶來的成就感 \A 例如拍攝新作品並完成後期製作 \A 抑或是將各種素材組合成全新的視覺畫面 \A 他的ISTP性格驅使他以實踐為核心 \A 通過創意探索世界";
}


.right-green-stick{
	width:4vw;
	height:40vh;
	right:0;
	top: 70vh;
	position:absolute;	
	background: rgba(40, 200, 160, .9);
}

#work {
	top:290vh;
	left:0;
	position:absolute;		
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3欄 */
	grid-template-rows: repeat(2, 1fr);  /* 2排 */
	width: 100vw;  /* 整個區域佔滿視口寬度 */
	height: 100vh; /* 讓整個區域高度等於寬度，形成正方形 */
	box-sizing: border-box;
}


.com {
	border-top: .1vw solid rgba(10,10,10,.1);
	border-left: .1vw solid rgba(10,10,10,.1);
	filter: grayscale(100%);	  
	transition: all 1s ease-in-out .5s;	 
	background-color:white;
}

/* 讓最後一行補上 `border-bottom` */
.com:nth-last-child(-n+3) {
  border-bottom: .1vw solid rgba(10,10,10,.1);
}

/* 移除最左邊的 `border-left` */
.com:nth-child(3n+1) {
  border-left: none;
}

/* 移除最右邊的 `border-right` */
.com:nth-child(3n) {
  border-right: none;
}

.com:nth-child(2) {
	background:rgba(50,50,50,1);
}

.com-title{
	margin-left:2vw;
	width: 15vw;
	font-family: "Gloock", "Mincho";
	font-size: 5vw;
	letter-spacing:1vw;
	text-align: left;
}

.com-title.lang-en {
	margin-top:20vh;
}

.com-title.lang-zh {
	margin-top:15vh;
}

.com-title.lang-en::before {
	content:"Worked At";
	text-transform: uppercase;
	color: white;
}

.com-title.lang-zh::before {
	font-size: 6vw;
	font-weight:900;
	content:"工作經歷";
	color: white;
}

.com:not(.com:nth-child(2)) {
    display: flex;
    flex-direction: column; /* 內容垂直排列 */
    align-items: center; /* 水平置中 */
    justify-content: center; /* 垂直置中 */
	overflow: hidden;
}

.com:not(.com:nth-child(2)):hover{
	filter: grayscale(0%);
    transition: all 1s ease-in-out .5s;		
}

.com-overlay{
	width:100%;
	height:100%;
	color: rgba(50,50,50,.9);	
	background:rgba(40,200,160,.6);	
	transform: translateY(60vh);	
    overflow: hidden;
    position: relative;
    transition: all 1s ease-in-out .5s;			
}


.com-overlay.active{
	color:rgba(250,250,250.1);
	transform: translateY(0);
    transition: all 1s ease-in-out .5s;			
}

/* 修正 SVG 置中 */
.com-logo {
    width: 12vw;
    height: auto;
    display: block;
    margin: auto; /* 讓 SVG 置中 */
	cursor:pointer;	
	position:absolute;		
}

/* 強制修正 SVG 的對齊 */
.com-logo svg {
    display: block;
    vertical-align: middle;
}

.com:nth-child(1) svg{
	transform: translateY(30%);
	background:url(../img/company/zeros.svg);
	background-size: contain;
	background-repeat: no-repeat;
    transition: all 1s ease-in-out .5s;		
}

.com:nth-child(3) svg{
	transform: translateY(50%);
	background:url(../img/company/taivexmalo.svg);
	background-size: contain;
	background-repeat: no-repeat;
    transition: all 1s ease-in-out .5s;			
}

.com:nth-child(4) svg{
	transform: translateY(50%);
	background:url(../img/company/like.svg);
	background-size: contain;
	background-repeat: no-repeat;
    transition: all 1s ease-in-out .5s;			
}

.com:nth-child(5) svg{
	transform: translateY(40%);
	background:url(../img/company/ponte16.svg);
	background-size: contain;
	background-repeat: no-repeat;
    transition: all 1s ease-in-out .5s;			
}

.com:nth-child(6) svg{
	transform: translateY(50%);
	background:url(../img/company/yx.svg);
	background-size: contain;
	background-repeat: no-repeat;
    transition: all 1s ease-in-out .5s;		
}

.com-date {
    font-family: "Barlow";
    font-size: 4.8em;
    position: absolute; /* 使用絕對定位 */
    left: 0; /* 貼在左邊 */
    top: 86%;
	color: rgba(250,250,250,.5);
    transform: rotate(90deg) translateX(-50%) translateY(160%); /* 旋轉並調整位置 */
    white-space: nowrap; /* 防止文字換行 */
}

.com:nth-child(1) .com-date {
    top: 87%;
}

.com:nth-child(3) .com-date, .com:nth-child(4) .com-date, .com:nth-child(5) .com-date, .com:nth-child(6) .com-date {
    transform: rotate(90deg) translateX(-50%) translateY(150%); 
}


.com:nth-child(1) .com-date::before {
    content: "2019-2024";
}

.com:nth-child(3) .com-date::before {
    content: "2017-2018";
}

.com:nth-child(4) .com-date::before {
    content: "2016-2017";
}

.com:nth-child(5) .com-date::before {
    content: "2015-2016";
}

.com:nth-child(6) .com-date::before {
    content: "2014-2015";
}

.com-name.lang-en{
	position: relative;
	font-family: "Gloock", "Mincho";
	font-size: 1.7em;
	text-transform: uppercase;
	text-align:right;	
	letter-spacing: .1vw;
    width: 70%; 
	top:7vh;
	margin-left:7vw;
    display: block;	
	word-break: break-word;
	word-wrap: break-word;
	
}

.com:nth-child(3) .com-name.lang-en,.com:nth-child(5) .com-name.lang-en{font-size: 2.2em;}
.com:nth-child(6) .com-name.lang-en{font-size: 1.9em;}

.com:nth-child(3) .com-name.lang-zh,.com:nth-child(5) .com-name.lang-zh,.com:nth-child(6) .com-name.lang-zh{font-size: 3.0em;}



.com-name.lang-zh{
	position: relative;
	font-family: "Gloock", "Mincho";
	font-size: 2.8em;
	font-weight:900;
	text-align:right;	
	letter-spacing: .1vw;
    width: 70%; 
	top:7vh;
	margin-left:7vw;
    display: block;	
	word-break: break-word;
	word-wrap: break-word;
	
}

.com:nth-child(3) .com-name.lang-zh{
	font-size: 2.4em;
	}

.com-description.lang-en{
	position: relative;
	font-family: "Mincho";
	font-size: 1vw;
	text-transform: lowercase;
	text-align:right;	
	letter-spacing: .05vw;
    width: 62%; 
	top:10vh;
	margin-left:9.6vw;
    display: block;	
	word-break: break-word;
	word-wrap: break-word;
	
}

	
.com:nth-child(3) .com-description.lang-en,
.com:nth-child(5) .com-description.lang-en,
.com:nth-child(6) .com-description.lang-en{
	width: 56%; 
	margin-left:11.5vw;
	}

.com-description.lang-zh{
	position: relative;
	font-family: "Mincho";
	font-size: 1vw;
	text-align:left;	
	letter-spacing: .5vw;
    width: 54%; 
	top:12.5vh;
	line-height: 1.5;	
	margin-left:12.5vw;
    display: block;	
	word-break: break-word;
	word-wrap: break-word;
	
}
	
.com:nth-child(3) .com-description.lang-zh,
.com:nth-child(5) .com-description.lang-zh,
.com:nth-child(6) .com-description.lang-zh{
	margin-left:13.5vw;
	}

.com:nth-child(1) .com-name.lang-en::before {
    content: "Zero's Design Coummunications";
}

.com:nth-child(1) .com-name.lang-zh::before {
    content: "零式廣告設計";
}

.com:nth-child(1) .com-description.lang-en::before {
    content: "Worked as senior graphic designer, the primary responsibility is to communicate with clients, assisting in the customization of various materials, including but not limited to main interfaces, online promotional materials, videos, and offline printed materials. Additionally, follow-up on subsequent revisions, changes, and any follow-up series or sequels is required.";
}

.com:nth-child(1) .com-description.lang-zh::before {
    content: "任職高級平面設計師，主要負責與客戶進行溝通，協助量身訂造不限於主畫面、各類線上宣傳材料、影片，及或線下的印刷品，並跟進後續的修訂更改，及或後續的系列續作。";
}

.com:nth-child(3) .com-name.lang-en::before {
    content: "TaivexMalo Day Hospital";
}

.com:nth-child(3) .com-name.lang-zh::before {
    content: "泰福馬瀧日間醫院";
}

.com:nth-child(3) .com-description.lang-en::before {
    content: "Worked as graphic designer, responsible for the printing materials used in company operational activities, including banners, posters, flyers, etc. Additionally, in charge of managing and updating the company's website and Facebook page.";
}

.com:nth-child(3) .com-description.lang-zh::before {
    content: "任職平面設計師，負責公司營運活動的印刷材料，包括橫幅、海報、傳單等。此外還負責營運管理公司網站及facebook之頁面更新。";
}

.com:nth-child(4) .com-name.lang-en::before {
    content: "Like Entertainment & Production";
}

.com:nth-child(4) .com-name.lang-zh::before {
    content: "讚娛樂製作";
}

.com:nth-child(4) .com-description.lang-en::before {
    content: "Worked as graphic designer, responsible for various events, such as autograph sessions, carnivals, and other activities, including the bidding and creation of visual materials. Also in charge of printing materials for events and albums of artists under the company, including backdrops, banners, posters, flyers, packaging, etc.";
}

.com:nth-child(4) .com-description.lang-zh::before {
    content: "任職平面設計師，負責各類活動，比如簽唱會、嘉年華等各類活動招標視覺材料、公司旗下藝人活動唱片等的印刷材料，包括背景板、橫幅、海報、傳單、包裝等。";
}

.com:nth-child(5) .com-name.lang-en::before {
    content: "Ponte 16";
}

.com:nth-child(5) .com-name.lang-zh::before {
    content: "澳門十六浦";
}

.com:nth-child(5) .com-description.lang-en::before {
    content: "Worked as part-time graphic designer, mainly responsible for the post-production content of the online program 'Macau Hotspot P16' including animations, layouts, etc., as well as capturing behind-the-scenes photos for the program. Additionally, assists other graphic design colleagues in handling visual materials.";
}

.com:nth-child(5) .com-description.lang-zh::before {
    content: "任職兼職平面設計師，主要負責網上節目《十六浦點》的後期製作內容，包括動畫、版面等，以及為節目拍攝花絮照片。亦協助其他平面設計同事處理影像材料。";
}

.com:nth-child(6) .com-name.lang-en::before {
    content: "YX Entertainment";
}

.com:nth-child(6) .com-name.lang-zh::before {
    content: "御星娛樂文化";
}

.com:nth-child(6) .com-description.lang-en::before {
    content: "Worked as graphic designer, responsible for various events, including concerts, autograph sessions, carnivals, exhibitions, and other activities. Handled the production of printed materials such as backdrops, banners, posters, flyers, and more.";
}

.com:nth-child(6) .com-description.lang-zh::before {
    content: "任職平面設計師，負責各類活動，包括演唱會、簽名會、嘉年華、會展等各類活動的印刷材料，包括背景板、橫幅、海報、傳單等。";
}