@charset "utf-8";

body.app-front {
	height: 100%;
	overflow-y: hidden;
	overflow-x: hidden;
}
body.no-animate {
	height: auto;
	overflow-y: auto;
}
#eighty-container-wrapper {
	height: 100%;
	position: relative;
	z-index: 1;
	transition: max-height 1s ease;
}
.no-animate #eighty-container-wrapper {
	display: none;
}
#eighty-container {
	position: relative;
	z-index: 1;
	height: 100%;
	}
	#eighty-container #eighty-box {
		font-family: "KoddiUDOnGothic-ExtraBold";
		transition: transform 0.6s ease-in-out;
	}
	#eighty-container img {
		border: 0;
	}

	#eighty-container #eighty-box h1.logo {
		position: absolute;
		z-index: 2;
		left: 20%;
		top: 30%;
		width: 28%;
		display: none;
		opacity: 0;
		transition: opacity 0.6s ease-in-out;
	}
	#eighty-container.animated #eighty-box h1.logo {
		display: inline-block;
	}
	#eighty-container.animated #eighty-box h1.logo.fadeIn {
		opacity: 1;
	}
	#eighty-container #eighty-box h1.logo a {
		display: inline-block;
		background: url('../images/철노로고 사본.svg') no-repeat left top;
		background-size: 100%;
		width: 100%;
		aspect-ratio: 6.4 / 1;
		text-align: left;
		text-indent: -100000px;
	}

#eighty-opener {
	position: relative;
	z-index: 3;
	top: -10%;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	overflow: hidden;
	scale: 2.0;
}
#eighty-opener.animate {
	animation: scaledown 6.9s normal forwards;
}
#eighty-opener img.eighty {
	position: relative;
	z-index: 1111;
	width: 100%;
	opacity: 1;
	transition: opacity 0.6s ease-in-out;
}
#eighty-opener img.eighty.hide {
	opacity: 0;
}
#eighty-opener img.eighty.reverse {
	position: absolute;
	z-index: 1110;
	left: 0;
	top: 0;
}
#eighty-opener img.eighty-shadow {
	position: absolute;
	z-index: 1110;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}
#eighty-opener img.eighty-shadow.show {
	opacity: 1;
}
#eighty-opener img.eighty-shadow.reverse {
	position: relative;
	z-index: 1111;
}
#eighty-opener.mobile {
	margin-top: 40%;
}

#eighty-opener .eighty-inner-screen {
	position: absolute;
	left: 0;
	top: 1px;
	z-index: 101;
	width: 99%;
	height: 99%;
	background: #fff;
	transform: translateX(-100%);
	transition: transform 0.6s linear;
}
.animated #eighty-opener .eighty-inner-screen {
	transform: translateX(0);
}
#eighty-opener .eighty-inner-images {
	position: absolute;
	left: 0;
	top: 2px;
	z-index: 11;
	width: 100%;
	height: 100%;
}
#eighty-opener .eighty-inner-images .eighty-inner-images-container {
	position: relative;
	z-index: 5;
	left: 1px;
	top: 1px;
	width: 99%;
	height: 98%;
	overflow: hidden;
}
#eighty-opener .eighty-inner-images .eighty-inner-images-container img {
	position: absolute;
	width: 100%;
	z-index: 4;
	left: 50%;
	top: 50%;
	display: none;
	transform: translate(-50%,-50%);
}
#eighty-opener .eighty-inner-images .eighty-inner-images-container img.current {
	display: block;
}
	#eighty-container #eighty-box div.unit {
		position: absolute;
		z-index: 2;
		left: 20%;
		top: 30%;
		font-size: 3em;
		font-weight: 900;
		letter-spacing: 0.2em;
		color: #3b587c;
		display: none;
		opacity: 0;
		transition: opacity 0.6s ease-in-out;
	}
	#eighty-container.animated #eighty-box div.unit {
		display: inline-block;
	}
	#eighty-container.animated #eighty-box div.unit.fadeIn {
		opacity: 1;
	}
	#eighty-container #eighty-box div.case {
		position: absolute;
		z-index: 2;
		left: 840px;
		top: 415px;
		font-size: 3em;
		font-weight: 900;
		letter-spacing: 0.1em;
		padding-top: 1%;
		color: #3b587c;
		width: 190px;
		height: 50px;
		text-align: left;
		overflow: hidden;
	}
	#eighty-container #eighty-box div.case span.case-inner {
		display: inline-block;
		transition: transform 0.5s linear;
		transition-delay: 0.5s;
		transform: translateX(-100%);
	}
	#eighty-container.animated #eighty-box div.case span.case-inner {
		transform: translateX(0);
	}

#eighty-rail {
	position: absolute;
	z-index: 3;
	bottom: 2%;
	left: 0;
	width: 100%;
	display: none;
	transition: transform 0.8s ease-in-out;
	transition-delay: 0.2s;
}
#eighty-rail.animate {
	display: block;
	transform: translateY(0);
}
#eighty-rail .rail-container {
	position: relative;
	z-index: 4;
	width:100%;
}
#eighty-rail .rail-container img {
	position: absolute;
	z-index: 5;
	width: 120%;
	left: -10%;
	bottom: 0;
	transition: bottom 0.8s ease-in-out;
}
#eighty-rail.animate .rail-container img.down {
	bottom: -20px;
}

#main-content-wrapper {
	margin-top: 142px;
	width:100%;
	text-align: center;
}
#main-content-wrapper.show {
	display: block;
}
#main-content-wrapper .main-content-container {
	width:100%;
	background: #fff;
}
#main-content-wrapper .main-content-container #main-content {
	width: 100%;
	max-width: unset;
}

/* common image filter */
.image-container {
	overflow: hidden;
	display: inline-block;
	position: relative;
	line-height: 0;
	padding: 0;
	margin: 0;
	background: #ffffff;
	}
	.image-container:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		mix-blend-mode: multiply;
		background: #002bff;
		opacity: 0.76;
		transition: opacity 0.2s ease,background 0.2s ease;
	}
	.image-container > img {
		-webkit-filter:  brightness(110%)  grayscale(100%) hue-rotate(0deg) invert(0%) opacity(100%) saturate(100%) sepia(0%);
		filter:  brightness(110%)  grayscale(100%) hue-rotate(0deg) invert(0%) opacity(100%) saturate(100%) sepia(0%);
		mix-blend-mode: none;
		transition: transform 0.2s ease, filter 0.2s ease;
		-webkit-transition: -webkit-transform 0.2s ease, -webkit-filter 0.2s ease;
	}

.section-wrapper {
	width: 100%;
	padding: 5% 0;
}
#month-items {
	background: #cceee9;
}
.section-wrapper .section {
	max-width: 1200px;
	padding: 0;
	margin: 0 auto;
	}
	.section-wrapper .section h2 {
		font-size: 2.0em;
		margin: 0 0 5% 7px;
		padding: 0;
		font-family: "KoddiUDOnGothic-Bold";
		}
		#all-items .section h2 {
			margin-bottom: 1%;
		}
ul.article-list {
	list-style: none;
	margin: 0;
	padding: 0;
	list-style: none;
	}
	ul.article-list:after {
		clear: both;
		content: '';
		display: block;
	}
	ul.article-list li.article-wrapper {
		width: 25%;
		float: left;
		margin: 0;
		padding: 0;
		}
		ul.article-list li.article-wrapper.two-column {
			width: 50%;
		}
		ul.article-list li.article-wrapper article.article {
			margin:0 7px 15px 7px;
			padding: 0;
			position: relative;
			z-index: 2;
			}
			ul.article-list li.article-wrapper article.article h3 {
				position: absolute;
				z-index: 10000;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 80%;
				text-align: center;
				margin: 0;
				padding: 0;
				font-family: "KoddiUDOnGothic-Bold";
				color: #231815;
				font-size: 1.5em;
				line-height: 1.4em;
				}
				ul.article-list li.article-wrapper article.article h3 a {
					color: #231815;
					text-decoration: none;
					}
					ul.article-list li.article-wrapper article.article.featured h3 a {
						color: #fff;
					}
			ul.article-list li.article-wrapper article.article figure {
				margin: 0;
				padding: 0;
				z-index: 3;
				width: 100%;
				aspect-ratio: 1 / 1;
				}
				ul.article-list li.article-wrapper.two-column article.article figure {
					aspect-ratio: 2.05 / 1;
					}
					ul.article-list li.article-wrapper article.article figure:after {
						z-index: 1002;
						background: #f6f0e9;
					}
					ul.article-list li.article-wrapper article.article.featured figure:after {
						background: #002bff;
					}
					ul.article-list li.article-wrapper article.article:hover figure:after {
						opacity: 0.8;
					}
					ul.article-list li.article-wrapper article.article.featured:hover figure:after {
						background: none;
					}
					#month-items ul.article-list li.article-wrapper article.article.featured figure:after {
						display: none;
					}
					ul.article-list li.article-wrapper article.article figure img {
						position: absolute;
						z-index: 1001;
						width: 70%;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
						transition: transform 0.2s ease;
						}
						ul.article-list li.article-wrapper article.article.featured figure.vertical img {
							height: 100%;
							width: auto;
						}
						ul.article-list li.article-wrapper.two-column article.article.featured figure.horizontal img {
							width: 100%;
							height: auto;
						}
						ul.article-list li.article-wrapper article.article figure:hover img {
							transform: translate(-55%, -55%) scale(1.2);
						}
					#all-items ul.article-list li.article-wrapper article.article figure img {
						-webkit-filter:  brightness(120%)  grayscale(15%) hue-rotate(0deg) invert(0%) opacity(20%) saturate(100%) sepia(0%);
						filter:  brightness(120%)  grayscale(15%) hue-rotate(0deg) invert(0%) opacity(20%) saturate(100%) sepia(0%);
						mix-blend-mode: none;
						transition: transform 0.2s ease, filter 0.2s ease;
						-webkit-transition: -webkit-transform 0.2s ease, -webkit-filter 0.2s ease;
					}
					#all-items ul.article-list li.article-wrapper article.article:hover figure img {
						-webkit-filter:  brightness(120%)  grayscale(15%) hue-rotate(0deg) invert(0%) opacity(25%) saturate(100%) sepia(0%);
						filter:  brightness(120%)  grayscale(15%) hue-rotate(0deg) invert(0%) opacity(25%) saturate(100%) sepia(0%);
					}
					#all-items ul.article-list li.article-wrapper article.article.featured figure img {
						-webkit-filter:  brightness(80%)  grayscale(50%) hue-rotate(0deg) invert(0%) opacity(80%) saturate(100%) sepia(0%);
						filter:  brightness(80%)  grayscale(50%) hue-rotate(0deg) invert(0%) opacity(80%) saturate(100%) sepia(0%);
					}
					#all-items ul.article-list li.article-wrapper article.article.featured:hover figure img {
						-webkit-filter:  brightness(100%)  grayscale(0%) hue-rotate(0deg) invert(0%) opacity(80%) saturate(100%) sepia(0%);
						filter:  brightness(100%)  grayscale(0%) hue-rotate(0deg) invert(0%) opacity(80%) saturate(100%) sepia(0%);
					}


ul.option-tabs {
	margin:2.5% 0 5% 7px;
	padding: 0;
	list-style: none;
	}
	ul.option-tabs li {
		display: inline-block;
		width:100px;
		padding: 8px 0 10px 0;
		margin:0 8px 0 0;
		background: #9d99cd;
		font-size: 1.2em;
		color: #fff;
		text-align: center;
		border-radius: 3px;
		cursor: pointer;
		}
		ul.option-tabs li.current {
			background: #99ddd2;
		}

@keyframes scaledown {
	0% {
		transform: scale(2.0);
		animation-timing-function: cubic-bezier(0,0.99,1,0.76);
	}
	100% {
		transform: scale(0.125);
	}
}
@keyframes scaledown-mobile {
	0% {
		transform: scale(2.0);
		animation-timing-function: cubic-bezier(0,0.99,1,0.76);
	}
	100% {
		transform: scale(0.25);
	}
}

#main-content-wrapper {
	display: none;
}

@media (max-width:719px) {
	#eighty-opener.animate {
		animation: scaledown-mobile 6.9s normal forwards;
	}
	#eighty-container #eighty-box div.unit {
		font-size: 1.5em;
	}
	#eighty-container #eighty-box div.case {
		font-size: 1.5em;
	}
	.section-wrapper {
		padding: 7% 0;
	}
	.section-wrapper .section h2 {
		margin-left: 20px;
		font-size: 1.45em;
	}
	#all-items .section h2 {
		margin-bottom: 3%;
	}
	ul.article-list li.article-wrapper {
		width: 50%;
		}
		ul.article-list li.article-wrapper.two-column {
			width: 100%;
		}
		ul.article-list li.article-wrapper article.article {
			margin:0 5px 10px 5px;
		}
		ul.article-list li.article-wrapper article.article h3 {
			font-size: 1.15em;
			line-height: 1.25em;
		}
		ul.article-list li.article-wrapper article.article figure {
			aspect-ratio: 2 / 1;
		}
		ul.article-list li.article-wrapper.two-column article.article figure {
			aspect-ratio: 4 / 1;
		}
		ul.article-list li.article-wrapper article.article.featured figure img {
			width: 100%;
			height: auto;
		}
	ul.option-tabs {
		margin-left: 20px;
		margin-bottom: 8%;
	}
	ul.option-tabs li {
		width: 70px;
		font-size: 0.9em;
		padding: 6px 0 8px 0;
	}
}

@media (max-width:599px) {
	ul.article-list li.article-wrapper article.article h3 {
		font-size: 1.25em;
	}
}
@media (max-width:479px) {
	ul.article-list li.article-wrapper article.article h3 {
		font-size: 1.0em;
	}
}