/*포트폴리오 리스트*/
#pc_port{

main.portfolio-list-page {
	background: linear-gradient(#fff, #DEECFF);
	line-height: 1.4;
	padding-top: 147px;
}
section.portfolio-list {
	padding: 90px 0;
	.portfolio-list-header {
		position: relative;
		.portfolio-list-title {
			.portfolio-hero-sub {
				font-size: 20px;
				display: block;
			}
			h2 {
				font-weight: 700;
				font-size: 42px;
				color: #222;
				letter-spacing: -0.01em;
			}
		}
		.portfolio-list-filter {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}
	.portfolio-list-content {
		margin-top: 40px;
		.portfolio-card-grid {
			font-size: 0;
			margin: 0 -20px;
		}
		.portfolio-card {
			width: 33.3%;
			padding: 20px;
			display: inline-block;
			vertical-align: top;
			&:nth-child(n+4) {
				margin-top: 20px;
			}
		}
		.portfolio-card-link {
			display: block;
			position: relative;
			border-radius: 10px;
			box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.08);
			background-color: white;
		}
		.portfolio-card-thumb {
			position: relative;
			border-radius: 10px 10px 0 0;
			overflow: hidden;
			&::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.12);
				z-index: 10;
			}
			img {
				width: 100%;
				height: 335px;
				border-radius: 10px 10px 0 0;
				
			}
		}
		.portfolio-card-content {
			position: relative;
			padding: 24px 30px 30px;
			height: 150px;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 0 0 10px 10px;
			
			.portfolio-card-info {
				.portfolio-card-course {
					display: block;
					font-size: 20px;
					font-weight: 500;
					color: #3F80EA;
					letter-spacing: -0.01em;
				}
				.portfolio-card-title {
					display: block;
					font-size: 20px;
					font-weight: 600;
					margin-top: 4px;
					max-width: 230px;
					overflow: hidden;
					letter-spacing: -0.01em;
				}
			}
			.portfolio-card-arrow {
				position: absolute;
				right: 30px;
				bottom: 40px;
				background-color: #5790EC;
				background-image: url("/home/images/icon-plus-w.svg");
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 16px auto;
				display: block;
				
				/* 사이즈 너무큰 느낌 */
				width: 36px;
				height: 36px;
				border-radius: 50%;
				cursor: pointer;
				z-index: 100;
				
				&:hover {
					opacity: 0.8;
				}
			}
		}
	}
}
}



/*포트폴리오 상세화면*/


#pc_port_detail{

main.portfolio-detail-page {
	background-color: #fff;
	padding-top: 147px;
}
section.portfolio-hero {
	background-color: #D4EDEC;
	position: relative;
	height: 260px;
	padding: 88px 0;
	box-sizing: border-box;
	overflow: hidden;
	
	.portfolio-hero-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: url("/home/images/portfolio/top.jpg");
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: left top;
	}
	.portfolio-hero-title {
		position: relative;
		z-index: 50;
		.sub-text {
			font-size: 20px;
			display: block;
		}
		h2 {
			margin-top: 4px;
			font-weight: 700;
			font-size: 40px;
			color: #222;
			line-height: 1.4;
		}
	}
}
section.portfolio-summary {
	padding: 90px 0;
	.portfolio-summary-row {display: flex; flex-direction: row}
	.portfolio-summary-thumb {
		.project-team-name {
			font-size: 26px;
			font-weight: 700;
			margin-top: 10px;
			text-align: center;
		}
		width: 300px;
		flex-shrink: 0;
		img {width: 100%;}
	}
	.portfolio-summary-content {
		flex: 1;
		padding-left: 60px;
		
		.project-info {
			display: flex;
			flex-direction: column;
			.project-info-row {
				display: flex;
				flex-direction: row;
				padding: 20px 0 20px;
				/*border-bottom: 1px solid #b3b3b3;*/
				border-bottom: 1px solid #ddd;
				&.project-info-row-split {
					justify-content: space-between;
					padding-right: 10px;
				}
				&.first-info {padding-top: 0;}
				&.last-info {padding-top: 30px; padding-bottom: 0; flex-direction: column; border-bottom: none;}
				.project-info-row-item {
					display: flex;
				}
			}
			.project-info-term {
				font-size: 22px;
				font-weight: 500;
				color: #222;
				width: 180px;
				flex-shrink: 0;
				white-space: nowrap;
				&.hidden-text {
					position: absolute;
					width: 1px;
					height: 1px;
					padding: 0;
					margin: -1px;
					overflow: hidden;
					clip: rect(0, 0, 0, 0);
					white-space: nowrap;
					border: 0;
				}
				&.last-term { /*color: #32AD96;*/}
			}
			.project-info-desc {
				flex: 1;
				font-size: 20px;
				font-weight: 300;
				line-height: 1.4;
				color: #333;
				&.first-desc{font-size: 24px;font-weight: 700;color: #32AD96;}
				&.last-desc {margin-top: 20px;}
				&.project-info-desc-team {
					.member {margin-right: 4px;line-height: 1.6;}
				}
				&.project-info-desc-skills {
					.skill {margin-right: 4px;line-height: 1.6;}
				}
			}
		}
	}
}
section.portfolio-showcase {
	padding: 20px 0 60px;
	.portfolio-showcase-row {
		display: flex;
		flex-direction: row;
	}
	.portfolio-showcase-side {
		width: 300px;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.part-nav-list {
			
			
			li {
				cursor: pointer;
				padding: 15px 0;
				& + li {border-top: 1px solid #ddd;}
				&.active .part-nav-label,
				&.active .part-nav-title {color: #32AD96;font-weight: 700;}
				.part-nav-label {
					font-size: 22px;
					font-weight: 700;
					color: #222;
					display: inline-block;
					width: 80px;
				}
				.part-nav-title {
					font-weight: 500;
					font-size: 20px;
					color: #333;
				}
			}
		}
		.part-nav-controller {
			display: flex;
			gap: 12px;
			button {
				width: 48px;
				height: 48px;
				background-color: #F1F1F1;
				border-radius: 50%;
				img {margin: 0 auto;}
				&.part-nav-prev {transform: rotate(180deg);}
				&.part-nav-next {}
			}
		}
	}
	.portfolio-showcase-content {
		flex: 1;
		max-width: calc(100% - 300px);
		padding-left: 60px;
		box-sizing: border-box;
		.portfolio-slider-container {
			background-color: #E6EEEC;
			padding: 20px;
			/*border-radius: 16px;*/
			.portfolio-slider {
				font-size: 0;
				.portfolio-item {
					img {
						width: 100%;}
				}
			}
		}
	}
}
section.portfolio-media {
	padding: 60px 0;
	.portfolio-media-row {
		display: flex;
		flex-direction: row;
	}
	.portfolio-media-side {
		width: 300px;
		flex-shrink: 0;
		.portfolio-media-sub {
			display: block;
			font-size: 18px;
			font-weight: 300;
			color: #666;
		}
		.portfolio-media-title {
			margin-top: 10px;
			font-size: 34px;
			font-weight: 700;
			color: #222;
			line-height: 1.2;
		}
	}
	.portfolio-media-content {
		flex: 1;
		max-width: calc(100% - 300px);
		padding-left: 60px;
		/*padding-right: 60px;*/
		box-sizing: border-box;
		.portfolio-media-frame {
			width: 100%;
			aspect-ratio: 16 / 9;
			/*border-radius: 16px;*/
			overflow: hidden;
			background: #000;
			.portfolio-media-iframe {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
}



}