@charset "utf-8";

body {
	background-color: #f0f8ff;
}

header {
	display: flex;
	justify-content: space-between;
	padding: 50px 60px;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
}

@media (max-width: 375px) {
	header {
		position: unset;
		padding: 10px 15px;
		background-color: #fff;
		border-bottom: 1px dotted #ccc;
	}
}

header > h1 {
	display: flex;
	align-items: flex-end;
	color: cornflowerblue;
}

header > .header-nav {
	display: flex;
	align-items: flex-end;
}

header > .header-nav > ul {
	display: flex;
}

header > .header-nav > ul > li {
	margin-left: 20px;
	font-weight: bold;
	color: cornflowerblue;
}

footer {
	display: flex;
	justify-content: space-between;
	padding: 50px 60px;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	font-weight: bold;
	color: cornflowerblue;
}

@media (max-width: 375px) {
	footer {
		position: unset;
		padding: 10px 15px;
		border-top: 1px dotted #ccc;
		flex-direction: column;
		align-items: center;
	}
}

footer > a{
	color: cornflowerblue;
}

main {
	display: grid;
	grid-template-columns: 50% 50%;
}

@media (max-width: 375px) {
	main {
		display: flex;
		flex-direction: column;
	}
}

.block-left {
	display: flex;
	justify-content: flex-end;
	padding-right: 6vw;
	height: 100vh;
}

@media (max-width: 375px) {
	.block-left {
		display: unset;
		padding: 10vh 6vw 5vh;
		height: unset;
	}
}

.block-left > ul {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 375px) {
	.block-left > ul {
		position: unset;
		transform: unset;
	}
}

.block-right {
	padding-left: 6vw;
	background-color: #fff;
}

@media (max-width: 375px) {
	.block-right {
		display: unset;
		padding: 10vh 6vw 5vh;
	}
}

.block-right > ul {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 375px) {
	.block-right > ul {
		position: unset;
		transform: unset;
	}
}

.panel-project {
	border-radius: 10px;
	cursor: pointer;
}

.panel-project:hover {
	box-shadow: 0 2px 10px rgb(0 0 0 / 50%);
}

.panel-project > .panel-header {
	position: relative;
	width: 400px;
	height: 200px;
}

@media (max-width: 375px) {
	.panel-project > .panel-header {
		width: unset;
		height: 140px;
	}
}

.panel-project > .panel-header > .project-01-img {
	position: absolute;
	right: -40px;
	bottom: 0;
	height: 150%;
}

@media (max-width: 375px) {
	.panel-project > .panel-header > .project-01-img {
		right: -20px;
		height: 140%;
	}
}

.panel-project > .panel-header > .project-01-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 10px 10px 0 0;
}

.panel-project > .panel-header > .project-02-img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	height: 150%;
}

.panel-project > .panel-header > .project-02-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 10px 10px 0 0;
}

.panel-project > .panel-body {
	display: flex;
	justify-content: center;
	padding:  15px 0;
}