section[data-cattype="262"] .container{ max-width:1500px; margin:0 auto; padding:24px 24px 40px; border-radius:8px; position:relative; } section[data-cattype] .timeline-title{ font-size: clamp(22px, 2.2vw, 32px); line-height: 1.25; text-align: center; margin: 0 0 16px; font-weight: 700; letter-spacing: .5px; } @media (min-width: 992px){ section[data-cattype] .timeline-title{ margin-bottom: 20px; } } section[data-cattype="262"] .swiper-container{ width:100%; margin:30px auto; overflow:hidden; padding:0 50px 30px; position:relative; --feather-left: 0px; --feather-right: 0px; --line-color: #ded3c5; background-image: linear-gradient(to right, rgba(222,211,197,0) 0%, var(--line-color) 100%), linear-gradient(var(--line-color), var(--line-color)), linear-gradient(to right, var(--line-color) 0%, rgba(222,211,197,0) 100%); background-repeat: no-repeat, no-repeat, no-repeat; background-origin: content-box, content-box, content-box; background-clip: content-box, content-box, content-box; background-position: left 50%, calc(var(--feather-left)) 50%, right 50%; background-size: var(--feather-left) 3px, calc(100% - var(--feather-left) - var(--feather-right)) 3px, var(--feather-right) 3px; } section[data-cattype="262"] .swiper-container.can-prev{ --feather-left:64px; } section[data-cattype="262"] .swiper-container.can-next{ --feather-right:64px; } section[data-cattype="262"] .timeline{ position:relative; display:flex; align-items:center; list-style:none; padding:0; } section[data-cattype="262"] .timeline::before{ display:none !important; } section[data-cattype="262"] .tl-image img { filter: grayscale(100%); transition: filter 0.3s ease; transform: scale(0.8); } section[data-cattype="262"] .swiper-slide.swiper-slide-active .tl-image img { filter: grayscale(0%); transform: scale(1); } section[data-cattype="262"] .swiper-slide.swiper-slide-active .timestamp .date { font-size: 64px; font-weight: 800; color: #fff; -webkit-text-stroke: 2px #FB9202; text-stroke: 2px #FB9202; transition: all 0.3s ease; } section[data-cattype="262"] .swiper-slide{ display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: start; text-align: center; padding-block: 0 !important; --lane-gap: 36px; } section[data-cattype="262"] .swiper-slide::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:20px; height:20px; border-radius:50%; background:#F79206; z-index: 5; pointer-events:none; } section[data-cattype="262"] .timestamp{ padding:0 20px; margin:0 20px var(--gap); } section[data-cattype="262"] .timestamp .date{ font-weight:700; font-size:30px; } section[data-cattype="262"] .tl-title { font-size: 22px; padding: 5px 0; font-weight: 500; } section[data-cattype="262"] .status{ padding:0 20px; margin:var(--gap) 10px 0; } section[data-cattype="262"] .swiper-slide .timestamp{ grid-row: 2; margin: 0 !important; line-height: 1; transform: translateY(-50px); } section[data-cattype="262"] .swiper-slide .tl-content{ grid-row: 3; } section[data-cattype="262"] .swiper-slide.is-reverse .timestamp{ grid-row: 2; transform: translateY(55px); } section[data-cattype="262"] .swiper-slide.is-reverse .tl-content{ grid-row: 1; } section[data-cattype="262"] .tl-title, section[data-cattype="262"] .status, section[data-cattype="262"] .tl-image{ margin: 0 !important; } section[data-cattype="262"] .tl-image{ width: 260px; height: 200px; overflow: hidden; margin: 12px auto 0 !important; } section[data-cattype="262"] .tl-image img{ width:100%; height:100%; object-fit:cover; display:block; } section[data-cattype="262"] .swiper-slide.is-reverse{ flex-direction:column-reverse; } section[data-cattype="262"] .swiper-slide.is-reverse .status{ margin:0 20px var(--gap); margin-bottom: 50px; } section[data-cattype="262"] .h--timeline-navigation{ position:absolute; top:48.5%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; text-indent:-9999px; overflow:hidden; z-index:10; opacity:.95; transition:box-shadow .2s, transform .2s, opacity .2s; } section[data-cattype="262"] .h--timeline-navigation--prev{ left:12px; } section[data-cattype="262"] .h--timeline-navigation--next{ right:12px; } section[data-cattype="262"] .h--timeline-navigation::after{ content:""; position:absolute; top:50%; left:50%; width: 25px; height: 25px; border-top: 2px solid #FB9202; border-right: 2px solid #FB9202; transform:translate(-70%,-50%) rotate(45deg); } section[data-cattype="262"] .h--timeline-navigation--prev::after{ transform:translate(-30%,-50%) rotate(225deg); } section[data-cattype="262"] .h--timeline-navigation:hover{ border:2px solid #FB9202; transform:translateY(-50%) scale(1.03); } section[data-cattype="262"] .h--timeline-navigation.is-disabled{ opacity:0; pointer-events:none; } @media (min-width:769px){ section[data-cattype="262"] .swiper-slide{ transform: scale(0.85); opacity: 0.5; color: #aaa; transition: all .3s ease; } section[data-cattype="262"] .swiper-slide::after{ background:#aaa; } section[data-cattype="262"] .swiper-slide.swiper-slide-active{ transform: scale(1); opacity: 1; color: #000; } section[data-cattype="262"] .swiper-slide.swiper-slide-active::after{ background:#FB9202; } section[data-cattype="262"] .swiper-slide:hover{ transform: scale(1); opacity: 1; color: #000; } section[data-cattype="262"] .swiper-slide:hover::after{ background:#FB9202; } } section[data-cattype="262"] .img-indicator{ display: none; } @media (max-width:768px){ section[data-cattype="262"] .swiper-slide{ width:200px; --gap:14px; } section[data-cattype="262"] .img-indicator{ display: inline-block; } section[data-cattype="262"] .container{ padding: 24px 0; } section[data-cattype="262"] .timestamp .date{ font-size:25px; } section[data-cattype="262"] .swiper-container.can-next::after{ opacity:1; } section[data-cattype="262"] .swiper-container.can-next .timeline{ --content-feather-right:48px; } section[data-cattype="262"] .swiper-container{ padding: 0 10px; margin: 0; } section[data-cattype="262"] .status{ padding: 0 10px; margin: 0; margin-top: 30px; } section[data-cattype="262"] .swiper-slide.is-reverse .status{ margin: 0 10px; padding-bottom: 30px; } section[data-cattype="262"] .swiper-slide{ padding: 0 !important; margin: 0 !important; } section[data-cattype="262"] .timeline{ margin-top: 15px; height: auto !important; } section[data-cattype="262"] .swiper-container::after{ display: none !important; content: none !important; background: none !important; } section[data-cattype="262"] .swiper-slide{ display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; } section[data-cattype="262"] .swiper-slide.swiper-slide-active .timestamp .date{ font-size: 45px; } section[data-cattype="262"] .swiper-slide .timestamp{ order: -1; transform: translateY(-45px); } section[data-cattype="262"] .swiper-slide .tl-content{ margin-top: 10px !important; padding-top: 30px; } section[data-cattype="262"] .swiper-container.can-next{ --feather-right: 0 !important; } section[data-cattype="262"] .swiper-container{ position: relative; background: linear-gradient(to right, #ded3c5 100%, #ded3c5 100%); background-size: 100% 3px; background-repeat: no-repeat; background-position: center; } section[data-cattype="262"] .swiper-container{ position: relative; background: none !important; } section[data-cattype="262"] .swiper-container::before{ content:""; position:absolute; left:0; right:0; top: 40px; height:3px; background:#ded3c5; z-index:1; margin: 10px 0; } section[data-cattype="262"] .swiper-slide::after{ content:""; position:absolute; left:50%; top: 0; transform: translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:#ded3c5; z-index:5; } section[data-cattype="262"] .swiper-slide.passed::after{ background:#FB9202; } section[data-cattype="262"] .swiper-slide.swiper-slide-active::after{ background:#fff; border:3px solid #FB9202; } section[data-cattype="262"] .swiper-slide.swiper-slide-active::before{ content:""; position:absolute; left:50%; top:0; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%; background:#FB9202; z-index:6; } section[data-cattype="262"] .swiper-slide::after{ top: 20%; transform: translate(-50%,-50%); } section[data-cattype="262"] .swiper-slide.swiper-slide-active::before{ top: 20%; transform: translate(-50%,-50%); } section[data-cattype="262"] .swiper-slide .timestamp{ margin-bottom: 30px; } section[data-cattype="262"] .swiper-container{ --line-top: 70px; } section[data-cattype="262"] .h--timeline-navigation{ transform: translateY(-50%); } } @media (min-width:769px){ section[data-cattype="262"] .mobile-indicator{ display:none; } } @media (max-width:768px){ section[data-cattype="262"] .mobile-indicator{ display:block; text-align:center; margin:12px 0 0; font-size:14px; font-weight:600; color:#333; border: 1px solid #333; background: #fff; border-radius: 50%; width: 40px; height: 40px; line-height: 36px; margin-left: auto; margin-right: auto; } section[data-cattype="262"] .h--timeline-navigation.swiper-button-disabled{ opacity:0; pointer-events:none; } } @media (max-width:768px){ section[data-cattype="262"] .swiper-container::before{ top: 85px; height: 3px; } section[data-cattype="262"] .swiper-slide::after{ top: 17%; transform: translate(-50%,-50%); } section[data-cattype="262"] .swiper-slide.swiper-slide-active::before{ top: 17%; transform: translate(-50%,-50%); } section[data-cattype="262"] .swiper-slide .timestamp{ margin-bottom: 20px; } section[data-cattype="262"] .swiper-slide.no-image{ min-height: 320px; } section[data-cattype="262"] .swiper-slide.no-image .tl-content{ margin-top: 12px !important; padding-top: 30px !important; padding: 0 20px; } } @media (max-width:768px){ section[data-cattype="262"] .swiper-slide.has-image::after{ top: 19.5%; transform: translate(-50%,-50%); } section[data-cattype="262"] .swiper-slide.has-image.swiper-slide-active::before{ top: 19.5%; transform: translate(-50%,-50%); } section[data-cattype="262"] .swiper-slide.no-image::after{ top: 25.5%; transform: translate(-50%,-50%); } section[data-cattype="262"] .swiper-slide.no-image.swiper-slide-active::before{ top: 25.5%; transform: translate(-50%,-50%); } section[data-cattype="262"] .tl-title{ padding-top: 15px; } } @media (max-width: 768px){ section[data-cattype="262"] .swiper-slide.has-image .timestamp{ order: -1; transform: translateY(0) !important; margin-bottom: 12px; } section[data-cattype="262"] .swiper-slide.no-image .timestamp{ order: -1; transform: translateY(0px) !important; } section[data-cattype="262"] .timestamp{ padding:0; } } @media (max-width: 1450px) { section[data-cattype="262"] .swiper-slide.swiper-slide-active .timestamp .date { font-size: 60px; } } @media (min-width: 1025px) { @property --fp-progress { syntax: "<angle>"; inherits: false; initial-value: 0turn; } section[data-cattype="262"] .swiper-slide.swiper-slide-active::after{ transition: --fp-progress .7s linear; } section[data-cattype="262"] .swiper-slide.swiper-slide-active:hover::after{ background: conic-gradient(#FB9202 var(--fp-progress), transparent 0); --fp-progress: 1turn; } }