@charset "utf-8";

/* about · history timeline */
.history_wrap {position: relative;}
.history_wrap .s_menu {z-index: 10; position: sticky; top: var(--header-height); left: 0; background-color: #fff; border-bottom: 1px solid #eee;}
.history_wrap .s_menu ul {display: flex; gap: var(--space-40);}
.history_wrap .s_menu li {position: relative;}
.history_wrap .s_menu li:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--dark-color); opacity: 0;}
.history_wrap .s_menu li.act:after {opacity: 1;}
.history_wrap .s_menu li.act button {color: var(--dark-color);}
.history_wrap .s_menu button {display: block; padding: var(--space-16) 0; font-size: var(--font-size-24); font-weight: 500; color: #878787; background: #fff; border: 0; line-height: 1.6667em;}
.history_wrap .history_inner {position: relative; display: flex; align-items: start; gap: 0 clamp(40px, calc(120 / var(--inner) * 100vw), 120px); margin-top: var(--space-100);}
.history_wrap .history_inner .thum_cont {flex-shrink: 0; position: sticky; top: calc(var(--header-height) + 80px); left: 0; width: calc(50% - 100px);}
.history_wrap .history_inner .txt_cont {position: relative; width: 100%;}
.history_wrap .thum_item {opacity: 0; height: 0;}
.history_wrap .thum_item .year {position: relative; padding-left: var(--space-30); font-size: clamp(28px, calc(56 / var(--inner) * 100vw), 56px); font-weight: bold; color: #000; line-height: 1.35714em;}
.history_wrap .thum_item .year:before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 40px; background: linear-gradient(to top, var(--secondary-color) 0%, var(--secondary-color) 50%, var(--primary-color) 50%, var(--primary-color) 100%);}
.history_wrap .thum_item .year .count_num {display: inline-block; vertical-align: middle;}
.history_wrap .thum_item .year .count_num .num {overflow: hidden; display: inline-flex; flex-direction: column; height: 1.35714em; vertical-align: middle;}
.history_wrap .thum_item .year .count_num .num .n {display: block; font-size: clamp(28px, calc(56 / var(--inner) * 100vw), 56px); font-weight: bold; color: #000; line-height: 1.35714em;}
.history_wrap .thum_item .year .count_num .num:nth-child(2n) {flex-direction: column-reverse;}
.history_wrap .thum_item .tit {margin-top: 16px; font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; color: #676767;}
.history_wrap .thum_item .his_img_slide {position: relative; margin-top: var(--space-60); max-width: 520px; border-radius: 16px; overflow: hidden;}
.history_wrap .thum_item .his_img_slide .his_img_mask {transition: clip-path 1s; overflow: hidden; clip-path: ellipse(50% 0% at 50% 100%);}
.history_wrap .thum_item .his_img_slide .his_img_mask .item {aspect-ratio: 520 / 540;}
.history_wrap .thum_item .his_img_slide .his_img_mask .item .img {height: 100%;}
.history_wrap .thum_item .his_img_slide .his_img_mask .item .img > img {object-fit: cover; width: 100%; height: 100%;}
.history_wrap .thum_item .his_img_slide .bullet {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 10px; justify-content: center;}
.history_wrap .thum_item .his_img_slide .bullet .swiper-pagination-bullet {opacity: 1; display: block; width: 10px; height: 10px; margin: 0; background-color: rgba(0, 0, 0, .3);}
.history_wrap .thum_item .his_img_slide .bullet .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #fff;}
.history_wrap .thum_item.act {opacity: 1; height: auto;}
.history_wrap .thum_item.act .year .count_num .num:nth-child(2n-1) .n {animation: count-down 2s forwards;}
.history_wrap .thum_item.act .year .count_num .num:nth-child(2n) .n {animation: count-up 2s forwards;}
.history_wrap .thum_item.act .his_img_slide .his_img_mask {clip-path: ellipse(150% 150% at 50% 100%);}
.history_wrap .bar_bg {position: absolute; top: 0; left: calc(clamp(40px, calc(120 / var(--inner) * 100vw), 120px) / -2); width: 2px; height: 100%; background-color: #ddd;}
.history_wrap .bar_bg .ani_bar {position: relative; display: inline-flex; align-items: flex-end; width: 100%; background: linear-gradient(to bottom, #fff, var(--primary-color));}
.history_wrap .bar_bg .ani_bar .ico {transform: translateX(-50%); flex-shrink: 0; display: block; width: 32px; height: 32px; margin-left: 1px; border-radius: 100%; background: var(--primary-color); border: 8px solid #def4e7;}
.history_wrap .history_lst > ul > li + li {margin-top: 150px;}
.history_wrap .history_item dl {display: flex; flex-direction: column; gap: 0 10px;}
.history_wrap .history_item dl dt {margin-bottom: 8px; flex-shrink: 0; font-size: var(--font-size-28); font-weight: 600; color: var(--dark-color); line-height: 1.5em;}
.history_wrap .history_item dl dt small.item-date {margin-left: 12px; font-size: var(--font-size-18); font-weight: 500; color: #a8a8a8;}
.history_wrap .history_item dl dd {width: 100%;}
.history_wrap .history_item dl dd .t1 {font-size: var(--font-size-20); line-height: 1.5em;}
.history_wrap .history_item dl + dl {margin-top: 40px;}
.history_wrap .history_item dl.act dt {color: var(--secondary-color);}

@keyframes count-down {
	0% {transform: translate3d(0, -900%, 0);}
	100% {transform: translate3d(0, 0, 0);}
}
@keyframes count-up {
	0% {transform: translate3d(0, 900%, 0);}
	100% {transform: translate3d(0, 0, 0);}
}

.history-item-sub {margin-top: 10px;}
.history-item-sub li {text-indent: -1em; padding-left: 1em;}
.history-item-sub li:before {content: '•'; margin-right: 10px; color: #ccc; font-weight: 600;}

@media screen and (min-width: 1240px) and (max-height: 800px) {
	.history_wrap .thum_item .year {font-size: 48px;}
	.history_wrap .thum_item .year .count_num .num .n {font-size: 48px;}
	.history_wrap .thum_item .tit {margin-top: 10px; font-size: 20px;}
	.history_wrap .thum_item .his_img_slide {margin-top: var(--space-30);}
	.history_wrap .thum_item .his_img_slide .his_img_mask .item {aspect-ratio: unset; height: 55vh;}
}

@media (max-width: 1540px) {
	.history_wrap .history_inner {gap: 0 150px;}
	.history_wrap .history_inner .thum_cont {width: calc(50% - 75px);}
	.history_wrap .thum_item .year {font-size: 48px;}
	.history_wrap .thum_item .year .count_num .num .n {font-size: 48px;}
	.history_wrap .thum_item .tit {margin-top: 10px; font-size: 20px;}
	.history_wrap .thum_item .his_img_slide {margin-top: var(--space-30);}
	.history_wrap .bar_bg {left: -75px;}
	.history_wrap .history_item dl dd .t1 {font-size: 16px;}
	.history_wrap .history_item dl + dl {margin-top: var(--space-30);}
}

@media (max-width: 1000px) {
	.history_wrap .history_inner {gap: 80px;}
	.history_wrap .thum_item .year {font-size: 26px;}
	.history_wrap .thum_item .year .count_num .num .n {font-size: 26px;}
	.history_wrap .thum_item .tit {font-size: 14px;}
	.history_wrap .thum_item .his_img_slide .bullet {bottom: 15px; gap: 7px;}
	.history_wrap .thum_item .his_img_slide .bullet .swiper-pagination-bullet {width: 7px; height: 7px;}
	.history_wrap .bar_bg {left: -40px;}

}

@media (max-width: 594px) {
	.history_wrap .history_inner {flex-wrap: wrap; gap: 20px;}
	.history_wrap .history_inner .thum_cont {z-index: 5; top: calc(var(--header-height) + 42px); width: 100%; padding: 10px 0; background-color: #fff;}
	.history_wrap .history_inner .txt_cont { width: 100%; padding-left: 40px;}
	.history_wrap .thum_item .year {font-size: 20px;}
	.history_wrap .thum_item .year .count_num .num .n {font-size: 20px;}
	.history_wrap .thum_item .tit {margin-top: 5px; font-size: 12px; margin-left: 15px;}
	.history_wrap .history_item dl dt small.item-date {font-size: 12px;}
	.history_wrap .thum_item .his_img_slide {margin: 0; width: 35%;}
	.history_wrap .thum_item .his_img_slide .bullet {bottom: 10px; gap: 5px;}
	.history_wrap .thum_item .his_img_slide .bullet .swiper-pagination-bullet {width: 5px; height: 5px;}
	.history_wrap .bar_bg {left: 15px;}
	.history_wrap .bar_bg .ani_bar .ico {width: 30px; height: 30px;}
	.history_wrap .history_lst > ul > li + li {margin-top: 75px;}
	.history_wrap .history_item dl {gap: 0 5px;}
	.history_wrap .history_item dl dt {width: 100%; font-size: 12px;}
	.history_wrap .history_item dl dd .t1 {font-size: 12px;}
	.history_wrap .history_item dl + dl {margin-top: 20px;}
	.history_wrap .s_menu button {font-size: 16px;}
	.history_wrap .thum_item {display: flex; justify-content: space-between; gap: 20px;}
	.history_wrap .thum_item .year:before {height: 20px;}
}

@media (max-width: 326px) {
	.history_wrap .history_inner {margin-top: 75px;}
	.history_wrap .history_inner .thum_cont {top: 55px;}
}