@charset "utf-8";

#wrapper {padding: 0;}

#container_title {display: none;}

.history {background: var(--white); position: relative;}

.contents-wrap {width: 100%; padding: clamp(100px, calc( 200 / var(--inner) * 100vw ), 200px) var(--inner-padding-l);}

.ul-timeline {width: 100%; display: flex; flex-direction: column; position: relative;}

.ul-timeline::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background-color: var(--gray400);}

.ul-timeline>li {width: 50%; position: relative;}
.ul-timeline>li:nth-child(odd) {padding-left: 90px; padding-right: 100px; text-align: right; margin-right: auto;}
.ul-timeline>li:nth-child(even) {padding-left: 100px; padding-right: 90px; text-align: left; margin-left: auto;}

.history-content {padding-bottom: clamp(120px, calc( 150 / var(--inner) * 100vw ), 150px); display: flex; flex-direction: column; gap: 30px;}
.ul-timeline>li:nth-child(odd) .history-content {align-items: flex-end;}

.year-badge {position: relative; transform: translateY(-50%); margin-bottom: calc(0px - var(--title4-fs)*var(--title4-lh)/2);}

.year-badge::before, 
.year-badge::after, 
.year-text::before {content: ''; position: absolute; top: 50%;}

.ul-timeline>li:nth-child(odd) .year-badge::before, 
.ul-timeline>li:nth-child(odd) .year-badge::after, 
.ul-timeline>li:nth-child(odd) .year-text::before {right: -100px;}

.ul-timeline>li:nth-child(even) .year-badge::before, 
.ul-timeline>li:nth-child(even) .year-badge::after, 
.ul-timeline>li:nth-child(even) .year-text::before {left: -100px;}

.year-badge::before {content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--highlight);  z-index: 2;}
.ul-timeline>li:nth-child(odd) .year-badge::before {transform: translate(50%, -50%);}
.ul-timeline>li:nth-child(even) .year-badge::before {transform: translate(-50%, -50%);}

.year-badge::after {content: ''; width: 40px; height: 40px; border-radius: 50%; background: rgba(254, 188, 17, 0.3);  z-index: 3;}
.ul-timeline>li:nth-child(odd) .year-badge::after {transform: translate(50%, -50%);}
.ul-timeline>li:nth-child(even) .year-badge::after {transform: translate(-50%, -50%);}

.year-text {color: var(--highlight); position: relative; transform: translateY(-50%);}
.year-text::before {content: ''; width: 90px; height: 2px; border-radius: 999px; background: var(--highlight); transform: translateY(-50%); z-index: 1;}

.history-img {width: clamp(300px, 25rem, 400px); max-width: 100%; height: auto; aspect-ratio: 400/267; border-radius: 10px; overflow: hidden;}
.history-img img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;}
.history-img:hover img {transform: scale(1.05);}

.ul-history-events>li + li {margin-top: 30px;}
.history-event {color: var(--primary);}
.history-event strong {font-weight: 750;}





@media (max-width:1024px){
    .ul-timeline::before {left: 0; transform: none;}

    .ul-timeline>li {width: 100%;}
    .ul-timeline>li:nth-child(odd) {padding-left: 100px; padding-right: 90px; text-align: left; margin-right: 0; margin-left: auto;}

    .ul-timeline>li:nth-child(odd) .history-content {align-items: start;}

    .ul-timeline>li:nth-child(odd) .year-badge::before, 
    .ul-timeline>li:nth-child(odd) .year-badge::after, 
    .ul-timeline>li:nth-child(odd) .year-text::before {right: 0; left: -100px;}

    .ul-timeline>li:nth-child(odd) .year-badge::before {transform: translate(-50%, -50%);}

    .ul-timeline>li:nth-child(odd) .year-badge::after {transform: translate(-50%, -50%);}
}

@media (max-width:768px){
    .ul-timeline>li {padding-left: 60px !important; padding-right: 50px !important;}

    .ul-timeline>li .year-badge::before, 
    .ul-timeline>li .year-badge::after, 
    .ul-timeline>li .year-text::before {left: -60px !important;}

    .year-text::before {width: 50px;}
}

@media (max-width:500px){
    .ul-timeline>li {padding-right: 0 !important;}
}