@charset "UTF-8";

.middle-history-wrapper{
	position: relative;
	width: 100%;
	height: 1800px;
	left: 30%;
	top: 100px;
}

.history-title{
	font-family: TAEBAEKfont;
	font-weight: bold;
	color: gray;
	font-size: 0.8rem;
}

.history-sub-title{
	font-family: SUITE-Regular;
	font-weight: bold;	
	font-size: 1.5rem;
	color: lightgray;
	margin-top: 15px;
}

.history-sub-title2{
	font-family: SUITE-Regular;
	font-weight: bold;	
	font-size: 1.5rem;
	color: black;
}

.history-line {
	display: block; 
	position: absolute; 
    width: 3px; 
    height: 1480px; 
    background-color: #eee;
    margin-top: 30px;
    left: 3%;
}

.history-year{
	position: relative;
	left: 2.3%;
	top: 5%;	
	font-weight: bold;
}

.history-year > .year{
	font-size:1.5rem; 
	margin-left: 40px;
}

.history-line-h{
	position: relative;
	top: 22px;
	width: 30px;
	height: 3px;
	background-color: black;
}

.history-content{
	position: relative;
	left: 5%;
	top: 6%;
}

.history-content > p{
	margin: 0;
	font-family: SUITE-Regular;
	color: gray;
	margin-bottom: 5px;
} 

@font-face {
    font-family: 'TAEBAEKfont';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/TAEBAEKfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SUITE-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@media screen and (max-width: 768px) {
	.middle-history-wrapper{
		left: 12%;
	}
}

@media screen and (max-width: 610px) {
	.middle-history-wrapper{
		left: 16%;
		height: 1360px;
	}
	
	.history-line{
		height: 1170px;
	}
	
	.history-sub-title{
		font-size: 1rem;
	}
	.history-sub-title2{
		font-size: 1rem;
	}
	.history-content{
		font-size: 0.7rem;
	}
}

@media screen and (max-width: 480px) {
	.middle-history-wrapper{
		left: 7%;
	}
	
	.history-sub-title{
		font-size: 1rem;
	}
	.history-sub-title2{
		font-size: 1rem;
	}
	
	.history-content{
		font-size: 0.7rem;
	}
}

@media screen and (max-width: 350px) {
	.middle-menu-item{
		font-size:0.7rem;
	}
	
	.middle-history-wrapper{
		left: 7%;
		height: 1140px;
	}
	
	.history-line{
		height: 975px;
	}
	
	.history-year > .year{
		font-size: 1.3rem;
	}
	.history-sub-title{
		font-size: 0.8rem;
	}
	.history-sub-title2{
		font-size: 0.8rem;
	}
	.history-content{
		font-size: 0.5rem;
	}
	
}