/* ==
BODY TEXT ==*/

:root {
	-webkit-text-size-adjust: none;
		-ms-text-size-adjust: none;
			text-size-adjust: none;
}

body {
	background: black;
	overflow-x: hidden;
	padding-left: 15px;
}

* {
	box-sizing: border-box;
}

header {
	display: flex;
	justify-content: space-between;
	position: fixed;
	width: 100%;
}


h1 {
	font:400 17px/1.5 Figtree;
	/* color: white; */
	color: yellow;
	margin-top: 10px;
}

a {
	color: aliceblue;
	text-decoration: none;
}

.nav a:hover {
	text-decoration: none;
}

p {
	/* color: white; */
	color: aliceblue;
}

/*
=style the paragraphs */
p.desc {
	color: lightgray;
	font:400 14px/1.5 Inter;
	padding-bottom: 20px;
	max-width: 1100px;
}

p.image-name {
	color: aliceblue;
	font: 400 14px Inter;
	margin-bottom: 5px;
	padding-bottom: 5px;
}

p.image-name span.yellow {
	color: yellow;
	padding-left: 8px;
	font-size: 12px;
}


/* -- 滚动对应上边框 --*/
#clean,
#clams,
#horizontal,
#new-mark,
#gangly,
#tlon,
#bird,
#letterpress,
#geometric,
#version,
#incense,
#random,
#folded-nature,
#trail,
#forest,
#color,
#memories-items {
	margin-top: 0px; /* 这里的值应当与你的固定标题的高度相匹配 */
	padding-top: 50px;
}

/* ==
Index ==*/

nav > ul > li:not(:first-child) {
	padding-left: 180px;
}

nav > ul > li:nth-child(2) {
	padding-right: 220px;
}

@media (max-width: 992px) {
	nav > ul > li:not(:first-child) {
		padding-left: 80px;
	}
	nav > ul > li {
		justify-content: space-between;
	}
}

@media (max-width: 768px) {
	nav > ul > li:not(:first-child) {
		padding-left: 80px;
	}
	nav > ul > li:nth-child(2) {
		padding-right: 80px;
	}
}

@media (max-width: 576px) {
	h1 {
		width: 100%;
		margin-bottom: 0;
	}	
	header {
		flex-direction: column;
	}
	nav {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	ul {
		padding-left: 0;
	}
	nav > ul > li {
		/* white-space: nowrap; */
	}
	
	.Index-name {
		white-space: nowrap; 
	}
	.Index-folder {
		margin-bottom: 10px;
	}

}



.Index-folder {
	display: flex;
	/* margin: 10px; */
	margin-top: 10px;
}

.Index-folder li {
	list-style: none;
}

.Index-a,
.Index-c {
	color:  white;
	font: 400 15px Figtree;
	border: none;
	cursor: pointer;
	padding-left:0;
}

button {
	background-color:transparent;
}


.Index-a:hover,
.Index-c:hover {
	color: orangered;
}

.dropdown {
	position: relative;
	display: inline-block;
}

/* -- 
INDEX Folder--*/
.Index-text01,
.Index-text03 {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	flex-wrap: wrap;
	z-index: 10;
	background: none;
	border-radius: 3px; /* 圆角 */
	box-shadow: 0 4px 11px rgba(0, 0, 0, 0.1); /* 柔和阴影 */
	padding: 0; /* 内边距 */
}

@media (max-width: 576px) {
	.Index-text01,
	.Index-text03 {
		min-width: 200px;
	}
}

.Index-text01 ul,
.Index-text03 ul {
	padding-left: 0;
	list-style-type: none;
}

.Index-text01 a, 
.Index-text03 a {
	display: block;
	color: aliceblue;
	font:400 13px/1.5 Inter;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 0px;
	text-decoration: none;
	transition: transform 0.3s ease-in-out;
}

.Index-text01 a:hover,
.Index-text03 a:hover {
	color: yellow;
	padding-left: 5px;
	transform: translateX(3px);
}

/* ==
Image Container==*/

.statement {
	width: 100%;
	padding-top: 70px;
}

.introduce {
	max-width: 740px;
}
p {
	font: 400 15px/1.4 Inter;
	margin-bottom: 0;
	margin-top: 3px;
}

.link ul {
	display:flex;
	list-style-type: none;
	padding-left: 0;
	gap: 8px;
	margin-top: 20px;
	margin-bottom: 0;
}

.link a {
	display:flex;
	font:400 15px Inter;
	color:white;
	/* text-decoration: underline; */
}

.link a:hover {
	color: orangered;
	text-decoration: none;
}

/* == 
PROJECT：Forest Preserves == */

.forest .forest-images {
	display: flex;
}

.forest figure {
	margin: 0;
	padding-right: 5px;
}

.forest figure video,
.forest figure img {
	max-width: 100%;
	width: auto;
	max-height: 500px;
}

@media (max-width: 576px) {
	.forest .forest-images {
		flex-wrap: wrap;
	}
	.forest figure {
		flex: 0 1 100%;
	}
	.forest figure video,
	.forest figure img {
		max-height: revert;
	}
}


/* == 
Project：Gangly == */

.gangly .gangly-images,
.gangly .gangly-images02 {
	display: flex;
}

.gangly-images figure,
.gangly-images02 figure {
	margin: 0;
	padding-right: 5px;
}

.gangly-images figure img {
	max-width: 100%;
	width: auto;
	/* max-height: 378px; */
	max-height: 450px;
}

.gangly-images02 figure img {
	max-width: 100%;
	width: auto;
	max-height: 430px;
}

@media (max-width: 576px) {
	.gangly .gangly-images {
		flex-wrap: wrap;
	}
	.gangly figure {
		flex: 0 1 100%;
	}
	.gangly figure img {
		max-height: revert;
	}
}

/* == 
Project：Tlon == */

.tlon .tlon-images {
	display: flex;
	flex-wrap: wrap;
}

.tlon-images figure {
	margin: 0;
	padding-right: 5px;
}

.tlon-images figure img {
	max-width:100%;
	width: auto;
	max-height:320px;
}

@media (max-width: 768px) {
	.tlon .tlon-images {
		display: flex;
		flex-wrap: wrap; /* 允许换行 */
	}

	.tlon-images figure {
		box-sizing: border-box; /* 包含边距和填充 */
		margin: 0; /* 清除默认边距 */
		padding-right: 5px; /* 右边距 */
	}

	.tlon-images figure:nth-child(1) {
		flex: 0 0 100%; /* 第一张图片占满整行 */
		text-align: center;
	}

	.tlon-images figure:nth-child(n+2) {
		flex: 0 0 50%; /* 从第二张开始每个figure占50%的宽度 */
	}

	.tlon-images figure:nth-child(2n) {
		padding-right: 0; /* 每对图片的第二个figure不需要右边距 */
	}

	.tlon-images figure img {
		max-width: 100%;
		width: auto;
		max-height: 320px;
	}
}


/* == Project：Hubbard Street Dance 
== */

.hubbard .hubbard-images {
	display: flex;
}

.hubbard figure {
	margin: 0;
	padding-right: 5px;
}

.hubbard figure img {
	max-width: 100%;
	width: auto;
	max-height:400px;
}

/* @media (max-width: 576px) {
	.hubbard .hubbard-images {
		flex-wrap: wrap;
	}
	.hubbard figure {
		flex: 0 1 100%;
	}
	.hubbard figure img {
		max-height: revert;
	}
} */

/* == 
Project：Incense == */
.incense .incense-image,
.incense .incense-image02 {
		display: flex;
}

.incense .incense-image03 {
	display: flex;
	flex-wrap: wrap;
}


.incense-image figure,
.incense-image02 figure,
.incense .incense-image03 figure {
	margin: 0;
	padding-right: 5px;
}

.incense .incense-image img {
	max-height: 700px;
	max-width: 100%;
	width: auto;
}

.incense .incense-image02 img {
	max-height: 650px;
	max-width: 100%;
	width: auto;
}

.incense .incense-image03 img {
	max-height: 350px;
	max-width: 100%;
	width: auto;
}

@media (max-width: 950px) {
	.incense .incense-image03 {
		display: flex;
		flex-wrap: wrap; /* 允许换行 */
	}

	.incense .incense-image03 figure {
		box-sizing: border-box; /* 包含边距和填充 */
		margin: 0; /* 清除默认边距 */
		padding-right: 5px; /* 右边距 */
	}

	.incense .incense-image03 figure {
		flex: 0 0 50%; /* 从第二张开始每个figure占50%的宽度 */
	}

	.incense .incense-image03 figure:nth-child(2n) {
		padding-right: 0; /* 每对图片的第二个figure不需要右边距 */
	}

	.incense .incense-image03 figure img {
		max-width: 100%;
		width: auto;
		max-height: 320px;
	}
}


/* ==
Letterpress == */
.letterpress .letterpress-image {
	display: flex;
}
.letterpress .letterpress-image figure {
	margin: 0;
	padding-right: 5px;
}
.letterpress .letterpress-image img {
	max-height:400px;
	max-width: 100%;
	width: auto;
}

@media (max-width: 576px) {
	.letterpress .letterpress-image {
		flex-wrap: wrap;
	}
	.letterpress .letterpress-image figure {
		flex: 0 1 100%;
	}
	.letterpress .letterpress-image figure img {
		max-height: revert;
	}
}

/* ==
All Cleaning Suppliers You Need == */

.clean .clean-image {
	display: flex;
}

.clean .clean-image figure {
	margin: 0;
	padding-right: 5px;
}
.clean .clean-image img {
	max-height:400px;
	max-width: 100%;
	width: auto;
}

@media (max-width: 576px) {
	.clean .clean-image {
		flex-wrap: wrap;
	}
	.clean .clean-image figure {
		flex: 0 1 100%;
	}
	.clean .clean-image figure img {
		max-height: revert;
	}
}

/*==
Project: A Thousand Clams==*/

.clams .clams-image {
	display: flex;
}

.clams .clams-image figure {
	margin: 0;
}

.clams .clams-image img {
	max-height:450px;
	max-width: 100%;
	width: auto;
}



/* ==
 Project：Horizontal Eage == */

.horizontal .horizontal-image {
	display: flex;
}

.horizontal .horizontal-image figure {
	margin: 0;
	padding-bottom: 15px;
}

.horizontal .horizontal-image img {
	max-height: 600px;
	max-width: 100%;
	width: auto;
}

/* .pj-all {
	height: 142.8px;
} */

/* == 
Project：Trail Route From Memory == */

.trail .trail-image {
	display: flex;
	flex-wrap: wrap;
}
.trail .trail-image figure {
	margin: 0;
	padding-right: 5px;
}
.trail .trail-image img {
	max-height: 360px;
	max-width: 100%;
	width: auto;
}

@media (max-width: 576px) {
	.trail .trail-image {
		display: flex;
		flex-wrap: wrap; /* 允许换行 */
		justify-content: flex-start; /* 左对齐 */
	}
	.trail .trail-image figure {
		width: 50%; /* 前面的图片每行两张 */
		margin: 0; /* 清除默认边距 */
		padding-right: 5px; /* 根据需要添加右边距 */
	}

	/* 最后两张图片单独一行 */
	.trail .trail-image figure:nth-last-child(-n+2) {
		width: 100%; /* 最后两张每张单独一行 */
		padding-right: 0; /* 清除右边距 */
	}
}




/* ==
Project：Geometric Figure == */

.geometric .geometric-image {
	display: flex;
	flex-wrap: wrap;
}
.geometric .geometric-image figure {
	margin: 0;
	padding-right: 5px;
}
.geometric .geometric-image img {
	max-height: 340px;
	max-width: 100%;
	width: auto;
}

/* ==
Project：Coloring test == */

.color .color-image {
	display: flex;
}

.color .color-image figure {
	margin: 0;
	padding-bottom: 5px;
}
.color .color-image img {
	max-height: 280px;
	max-width: 100%;
	width: auto;
}

/* == 
Project：Bird Boundary== */
.bird .bird-image {
	display: flex;
}
.bird .bird-image figure {
	margin: 0;
}
.bird .bird-image img {
	max-height: 650px;
	max-width: 100%;
	width: auto;
}

/* == 
Project：Version == */
.version .version-image {
	display: flex;
}
.version .version-image figure {
	margin: 0;
	padding-right: 5px;
}
.version .version-image img {
	max-height: 430px;
	max-width: 100%;
	width: auto;
}

/* == 
Project：Random Sensory == */
.random .random-image {
	display: flex;
}
.random .random-image figure {
	margin: 0;
}
.random .random-image video {
	max-height: 500px;
	max-width: 100%;
	width: auto;
}

/* ==
Project：Folded Nature == */
.folded .folded-image,
.folded .folded-image02 {
	display: flex;
	flex-wrap: wrap;
}
.folded .folded-image figure,
.folded .folded-image02 figure {
	margin: 0;
	padding-right: 5px;
}
.folded .folded-image video,
.folded .folded-image02 img {
	max-height: 500px;
	max-width: 100%;
	width: auto;
}

@media (max-width: 576px) {
	.folded-image02 {
		display: flex;
		flex-wrap: wrap;
	}
	
	.folded-image02 figure {
		margin: 0;
		padding: 0;
	}
}


/* ==
Project：Object Memories ==*/
.memory .memory-image {
	display: flex;
}
.memory .memory-image figure {
	margin: 0;
	padding-right: 5px;
}
.memory .memory-image video {
	max-height: 500px;
	max-width: 100%;
	width: auto;
}
.memory .memory-image img {
	max-height: 340px;
	max-width: 100%;
	width: auto;
}

@media (max-width: 576px) {
	.memory .memory-image {
		flex-wrap: wrap;
	}
	.memory .memory-image figure {
		flex: 0 1 100%;
	}
	.memory .memory-image figure video,
	.memory .memory-image figure img {
		max-height: revert;
	}
}