@charset "UTF-8";
.menu-project .menu_item {
	font-size: 0.9em;
    margin: 2em 0 2em 1.5em;
}

.menu-project .menu_item {
    color: #515152;
    --menu-item-color: #d42c2c;
}

.menu-project .menu_item-name {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	padding: 0.25em;
	color: var(--color-text);
}

.menu-project .menu_item-name::before {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background: var(--menu-item-color);
	transform: scale3d(1,0,1);
	transform-origin: 50% 100%;
	transition: transform 0.3s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.menu-project .menu-selected::before {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background: var(--menu-item-color);
	transform: scale3d(1,1,1);
	transform-origin: 50% 0%;
}

.menu-project .menu_item:hover .menu_item-name::before,
.menu-project .menu_item:focus .menu_item-name::before {
	transform: scale3d(1,1,1);
	transform-origin: 50% 0%;
}

.project-view {
    display: flex;
    width: 100%;
    height: 55vh;
}
.pv-item_now {
    width: 70%;
	height: 100%;
	cursor: pointer;
	z-index: 100;
}
.pv-item_prev {
    width: 30%;
    height: 100%;
}
.now_image {
	position: relative;
	overflow: hidden;
    margin: 0px;
	padding: 0px;
    width: 90%;
    height: 100%;
	margin-left: 10%;
}
.prev_image {
    position: relative;
	overflow: hidden;
    margin: 0px;
	padding: 0px;
    width: 80%;
    height: 100%;
    margin-left: 20%;
}
.item {
    list-style: none;
	width: 100%;
	height: 100%;
	position: absolute;
	cursor: pointer;
}
.item > img {
    list-style: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.item-blinder {
	list-style: none;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #0000008c;
	z-index: 100;
	cursor: pointer;
}
.item-header {
    list-style: none;
	position: absolute;
	bottom: 20%;
	left: 3em;
	z-index: 100;
}
/* text color schema */
.item-color-white {
	--item-text-color: #ffffff; 
}
.item-color-red {
	--item-text-color: #ff1010; 
}
.item-title-top {
	position: absolute;
	top: -12vh;
	left:5px;
	display: inline-block;
	font-size: 4em;
	font-weight: 700;
	white-space: nowrap;
  	background: linear-gradient(var(--item-text-color) 50%, #ffffff00 50%);
	-webkit-background-clip: text;
	-moz-background-clip: text;
    background-clip: text;
  	-webkit-text-fill-color: transparent;
}
.item-title-bottom {
	position: absolute;
	top: -12vh;
	left: -5px;
	display: inline-block;
	font-size: 4em;
	font-weight: 700;
	white-space: nowrap;
  	background: linear-gradient(#ffffff00 50%, var(--item-text-color) 50%);
	-webkit-background-clip: text;
	-moz-background-clip: text;
    background-clip: text;
  	-webkit-text-fill-color: transparent;
}
.item-btn {
	font-size: 0.8em;
	color: #ff1010;
}