.history_title { font-size: 2.3em; font-weight: bold; margin-bottom: 40px; }
.years_section { display: flex; margin-left: 20px; margin-bottom: 40px; }
.history_content { margin-top: 50px; margin-bottom: 100px; }
.history_top::after { height: 440px; width: 2px; background-color: #6540bf; content:""; position: absolute; top: 1078px; margin-left: 28px; z-index: -1; opacity: 0.5; }
.history_bottom::after { height: 280px; width: 2px; background-color: #6540bf; content:""; position: absolute; top: 2040px; margin-left: 28px; z-index: -1; opacity: 0.5; }

.icon { width: 12px; height: 12px; border-radius: 100%; background: white; border: 3px solid #6540bf; display: inline-block; margin-top: 15px; }
.year { font-size: 32px; font-weight: 400; color: #191919; display: inline-block; margin-left: 40px; margin-right: 50px; }
.years_sub { font-size: 20px; color: #7c7c7c; }
.years_sub > p { margin: 4px 0 10px 0; }

.content_right > div:nth-child(2) { background: url('../source/history/20202023image.jpg') no-repeat center / cover; height: 240px; margin-bottom: 100px; }
.content_right > div:nth-child(2) > div { font-weight: bold; position: relative; bottom: -190px; }
.content_right > div:nth-child(2) > div > p:nth-child(1) { display: inline-block; background-color: white; color: black; font-size: 47px; padding: 0 20px 0 20px; }
.content_right > div:nth-child(2) > div > p:nth-child(2) { font-size: 27px; padding: 0 20px 0 20px; }

.content_right > div:nth-child(4) { background: url('../source/history/20172019image.jpg') no-repeat center / cover; height: 240px; margin-bottom: 100px; }
.content_right > div:nth-child(4) > div { font-weight: bold; position: relative; bottom: -190px; }
.content_right > div:nth-child(4) > div > p:nth-child(1) { display: inline-block; background-color: white; color: black; font-size: 47px; padding: 0 20px 0 20px; }
.content_right > div:nth-child(4) > div > p:nth-child(2) { font-size: 27px; padding: 0 20px 0 20px; }

@font-face {
	font-family: 'ChosunGs';
	src: url('../font/ChosunGs.TTF') format('truetype');
}

@keyframes historyanimation {
	from {
		width: 0%;
		opacity: 0.5;
	}
	to {
		width:100%;
		opacity: 1;
	}
}

.old {
    border: 3px solid rgb(80,80,150);
    border-radius: 20px;
}

#small_menu_1:checked ~ div { height: 200px; transition: 0.4s all; }

#small_menu_2:checked ~ div { height: 200px; transition: 0.4s all; }

.up {
	margin-left: 34px;
	font-size: 1.5em;
	font-weight: 500;
	position: relative;
	left: 30%;
	margin-bottom: 20px !important;
}

.down {
	text-align: right;
	margin-right: 34px;
	font-size: 1.5em;
	font-weight: 500;
	position: relative;
	right: 30%;
	margin-top: 20px !important;
}

.up span {
  position: absolute;
  top: -4px;
  left: 0;
  width: 22px;
  height: 22px;
  margin-left: -12px;
  border-left: 3px solid rgb(80,80,150);
  border-bottom: 3px solid rgb(80,80,150);
  border-radius: 2px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}

.down span {
  position: absolute;
  top: -13px;
  right: 0;
  width: 22px;
  height: 22px;
  margin-right: -12px;
  border-left: 3px solid rgb(80,80,150);
  border-bottom: 3px solid rgb(80,80,150);
  border-radius: 2px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}
.up span:nth-child(1){
  top: 24px;
  -webkit-animation-delay: .6s;
  animation-delay: .6s;
}
.up span:nth-child(2) {
  top: 34px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
.up span:nth-child(3) {
  top: 44px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}


.down span:nth-child(1) {
  top: 14px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.down span:nth-child(2) {
  top: 24px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
.down span:nth-child(3) {
  top: 34px;
  -webkit-animation-delay: .6s;
  animation-delay: .6s;
}
@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 1220px) {
	.up span { border-left: 2px solid rgb(80,80,150) !important; border-bottom: 2px solid rgb(80,80,150) !important; }
	.down span { border-left: 2px solid rgb(80,80,150) !important; border-bottom: 2px solid rgb(80,80,150) !important; }
	.up > h { font-size: 1em !important; }
	.down > h { font-size: 1em !important; }
	.content_right > div:nth-child(2) { height: 200px; }
	.content_right > div:nth-child(2) > div { bottom: -164px; }
	.content_right > div:nth-child(4) { height: 200px; }
	.content_right > div:nth-child(4) > div { bottom: -164px; }
	.history_top::after { top: 1020px; height: 490px; }
	.history_bottom::after { top: 2030px; height: 310px; }
	.history_title { font-size: 30px; }
	.content_right > div:nth-child(2) > div > p:nth-child(1) { font-size: 30px; }
	.content_right > div:nth-child(2) > div > p:nth-child(2) { font-size: 19px; font-weight: 400; }
	.content_right > div:nth-child(4) > div > p:nth-child(1) { font-size: 30px; }
	.content_right > div:nth-child(4) > div > p:nth-child(2) { font-size: 19px; font-weight: 400; }
	.years_section { display: block; }
	.year { margin-left: 30px; font-size: 28px; }
	.years_section > div:nth-child(2) { margin-left: 50px; }
	.years_sub > p { font-size: 16px; white-space: nowrap; }
}