@charset "UTF-8";
/* CSS Document */
/* History */

.tal-history {  }

.tal-history .tal-common-intro { background:url('../img/contents/brands/bg-hero-brands.jpg') center center no-repeat; background-size:cover; }

.tal-history-timeline { background-color:var(--tal-ui-lightbrown3); }

.tal-history-timeline-pills { position:sticky; top:80px; z-index:10; }
.tal-history-timeline-pill + .tal-history-timeline-pill { margin-left:15px; }
.tal-history-timeline-pill .nav-link { width:50px; height:50px; line-height:50px; border-radius:50px; font-size:20px; color:var(--tal-accent-secondary); border:3px solid var(--tal-accent-secondary); background-color:var(--tal-ui-lightbrown3); }
.tal-history-timeline-pill .nav-link.active { background-color:var(--tal-accent-secondary); }

.tal-history-timeline-container { position:relative; }

.tal-history-timeline-scroller-wrapper { position:absolute; top:20px; right:calc(100% + 1em); height:100%; }
.tal-history-timeline-scroller { width:96px; position:absolute; top:0; left:0; position:sticky; top:165px; }
.tal-history-timeline-scroller-ruler { width:96px; }
.tal-history-timeline-scroller-mark { width:20px; height:1px; background-color:var(--tal-accent-primary); margin-bottom:8px; position:relative; }
.tal-history-timeline-scroller-mark:nth-child(1), .tal-history-timeline-scroller-mark:nth-child(5n+1) { width:30px; height:1px; }
.tal-history-timeline-scroller-mark.active { height:3px; background-color:var(--tal-accent-secondary); }
a.tal-history-timeline-scroller-year { position:absolute; top:0; left:calc(100% + .25em); translate:0 -40%; color:var(--tal-ui-lightgray2); font-variation-settings:"wght" 700; }
.tal-history-timeline-scroller-mark.active .tal-history-timeline-scroller-year { background-color:white; padding:0 .75em; border-radius:1em; color:var(--tal-accent-secondary); }
.tal-history-timeline-scroller-year .desktop { display:block; }
.tal-history-timeline-scroller-year .mobile { display:none; }

.tal-history-timeline-tab-content { padding:0 3em; }
.tal-history-timeline-tab-pane:focus { outline:unset; box-shadow:unset; }

.tal-history-timeline-cards-wrapper { position:relative; display:flex; }
.tal-history-timeline-cards { width:100%; display:flex; flex-direction:column; position:relative; }
.tal-history-timeline-card-group { width:50%; position:relative; }
.tal-history-timeline-card-group + .tal-history-timeline-card-group { margin-top:50px; }
.tal-history-timeline-card-group:nth-child(odd) { align-self:flex-start; }
.tal-history-timeline-card-group:nth-child(even) { align-self:flex-end; }

.tal-history-timeline-card { padding-top:.25em; position:relative; margin-bottom:50px; }
.tal-history-timeline-card::before { content:""; top:0; width:40px; height:40px; border:2px solid var(--tal-ui-darkbrown); position:absolute; border-radius:100%; background-color:white; }
.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-card { padding-right:70px; }
.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-card::before { right:0; translate:50% 0; }
.tal-history-timeline-card-group:nth-child(even) .tal-history-timeline-card { padding-left:70px; }
.tal-history-timeline-card-group:nth-child(even) .tal-history-timeline-card::before { left:0; translate:-50% 0; }

.tal-history-timeline-card-header { display:flex; justify-content:flex-end; }
.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-card-header { justify-content:flex-end; }
.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-card-headline { text-align:right; }
.tal-history-timeline-card-group:nth-child(even) .tal-history-timeline-card-header { justify-content:flex-start; }
.tal-history-timeline-card-group:nth-child(even) .tal-history-timeline-card-headline { text-align:left; }
.tal-history-timeline-card-year { margin-bottom:0; color:var(--tal-ui-darkbrown); scroll-margin-top:calc(var(--fullheaderheight) + 5rem); }

.tal-history-timeline-card-headline { font-size:18px; margin-bottom:1em; }

.tal-history-timeline-card-copy { gap:10px; }

.tal-history-timeline-img-group { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; gap:10px; color:var(--tal-accent-secondary); }

.tal-history-timeline-video { position:relative; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.tal-history-timeline-video-icon { position:absolute; font-size:72px; display:flex; color:white; pointer-events:none; }
.tal-history-timeline-video .tal-history-timeline-img { filter:brightness(.8); transition:filter 300ms; }
.tal-history-timeline-video .tal-history-timeline-img:hover { filter:brightness(.7); }

.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-img-group { text-align:right; }
.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-img { margin-left:auto; }
.tal-history-timeline-img { width:calc(50% - 5px); }
.tal-history-timeline-img > img { width:100%; /* max-width:440px; */ border-radius:.5rem; aspect-ratio:440/250; object-fit:cover; }
.tal-history-timeline-img > .sq { aspect-ratio:1/1; }
.tal-history-timeline-img-desc { width:100%; margin-bottom:1.5em; }
.tal-history-timeline-img-desc.top { margin-bottom:unset; margin-top:1.5em; }

.tal-history-timeline-axis { position:absolute; width:2px; height:100%; border-radius:8px; background-color: var(--tal-ui-darkbrown); left:50%; translate:-50% 0; }

.tal-history-timeline-backtotop { width:70px; height:70px; background-color:var(--tal-accent-secondary); border-radius:70px; position:fixed; bottom:2em; right:2em; display:flex; justify-content:center; align-items:center; color:white; display:flex; user-select:none; cursor:pointer; translate:200% 0; transition:translate 300ms; z-index:10; }
.tal-history-timeline-backtotop.active { translate:0 0; }
.tal-history-timeline-backtotop .material-symbols-outlined { font-size:48px; font-variation-settings:'wght' 200; }




@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	
}

@media (max-width: 1649.98px) {
	.tal-history-timeline-scroller-mark { margin-bottom:6px; }
}
@media (max-width: 1399.98px) {
	
}
@media (max-width: 1219.98px) {
	
}
@media (min-width: 1200px) {
	
}
@media (max-width: 1199.98px) {
	.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-card { padding-right:2em; }
	.tal-history-timeline-card-group:nth-child(even) .tal-history-timeline-card { padding-left:2em; }
}
@media (min-width: 992px) {
	
}
@media (max-width: 991.98px) {
	.tal-history-timeline-scroller-wrapper { right:100%; }
}
@media (min-width: 768px) {
    
}
@media (max-width: 767.98px) {
	.tal-history-timeline-scroller-mark { margin-bottom:5px; }
	.tal-history-timeline-scroller-mark.active .tal-history-timeline-scroller-year { padding:0 .25em; }
	.tal-history-timeline-scroller-year .desktop { display:none; }
	.tal-history-timeline-scroller-year .mobile { display:block; }

	/* .tal-history-timeline-tab-content { padding-right:0; } */

	.tal-history-timeline-cards { padding-left:.5rem; }
	.tal-history-timeline-card-group { width:100%; position:relative; }

	.tal-history-timeline-card-group + .tal-history-timeline-card-group { margin-top:unset; }

	.tal-history-timeline-card::before { width:20px; height:20px; }

	.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-card { padding-right:unset; padding-left:2em }
	.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-card::before { right:unset; left:0; translate:-50% 0; }
	.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-card-header { justify-content:flex-start; }
	.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-card-headline { text-align:left; }
	
	.tal-history-timeline-card-headline { font-size:16px; }

	.tal-history-timeline-axis { left:.5rem; }
}
@media (max-width: 575.98px) {
	.tal-history-timeline-pill .nav-link { width:40px; height:40px; line-height:40px; border-width:2px; }
	.tal-history-timeline-pill + .tal-history-timeline-pill { margin-left:.5em; }

	.tal-history-timeline-scroller { width:70px; }
	.tal-history-timeline-tab-content { padding:0 0 0 2em; }
	.tal-history-timeline-card-group:nth-child(odd) .tal-history-timeline-card { padding-left:1em; }
	.tal-history-timeline-card-group:nth-child(even) .tal-history-timeline-card { padding-left:1em; }
	.tal-history-timeline-card { margin-bottom:1.5em; }
}
@media (max-width: 479.98px) {
	
}