:root{--pink-bg:#F9C0B9;--dark-bg:#111C4E;--text-gray:#444;--line-color:#999999}.al__timeline--wrap-main{width:100%;overflow-x:auto;overflow-y:hidden;padding:0!important;-webkit-overflow-scrolling:touch}.timeline-wrapper{position:relative;width:95%;height:500px;margin:0 auto}.al__timeline--wrap-main::-webkit-scrollbar{height:6px}.al__timeline--wrap-main::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}.main-axis{position:absolute;top:50%;width:100%;border-top:5px dotted #999;z-index:1}.node{position:absolute;width:200px;display:flex;flex-direction:column;align-items:center}.node.top{bottom:40.8%;z-index:1;transform:translateY(2.5px)}.node.bottom{top:41.3%;z-index:1;transform:translateY(-2.5px)}.year{font-weight:900;font-size:20px;color:var(--dark-bg);padding:5px 0}.dot{width:14px;height:14px;border-radius:50%;z-index:5}.pink-dot,.dark-dot{border:3px solid var(--line-color);box-shadow:5px 5px 10px rgba(0,0,0,.6)}.pink-dot{background:var(--pink-bg)}.dark-dot{background:var(--dark-bg)}.connector{width:3px;height:120px;background-color:var(--line-color)}.description{position:absolute;left:110px;width:180px;font-size:13px;color:var(--dark-bg);line-height:1.4}.node.top .description{bottom:105px}.node.bottom .description{top:90px}.icon-box{width:70px;height:70px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:10px 10px 20px rgba(0,0,0,.6)}.icon-box img{width:35px}.pink{background-color:var(--pink-bg);border:3px solid var(--line-color)}.dark{background-color:var(--dark-bg);border:3px solid var(--line-color)}.endpoint{position:absolute;top:50%;width:20px;height:20px;background-color:var(--line-color);border-radius:50%;transform:translateY(-50%);z-index:2}.endpoint{position:absolute;top:50%;width:20px;height:20px;background-color:var(--line-color);border-radius:50%;transform:translateY(-50%);z-index:2}.start-point{right:0}@keyframes growConnector{from{height:0;opacity:0}to{height:120px;opacity:1}}@keyframes slideText{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes floating{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}.node{opacity:0;animation:fadeIn 0.5s ease forwards}.connector{animation:growConnector 0.8s ease-out forwards}.description{opacity:0;animation:slideText 0.6s ease-out forwards;animation-delay:0.8s;-webkit-animation:slideText 0.6s ease-out forwards;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5}.icon-box{animation-delay:1.2s}@keyframes fadeIn{to{opacity:1}}.timeline-wrapper.active .connector{animation:growConnector 0.8s ease-out forwards}.timeline-wrapper.active .description{animation:slideText 0.6s ease-out forwards;animation-delay:0.5s;min-height:60px}.endpoint{position:absolute;top:50%;width:24px;height:24px;background-color:var(--line-color);border-radius:50%;transform:translateY(-50%) scale(0);z-index:2;animation:startdot 0.6s ease-in-out forwards}.endpoint.start-point{left:4%;animation:startdot 0.5s ease-in-out forwards}.endpoint.end-point{right:4%;animation:startdot 0.5s ease-in-out forwards;animation-delay:2s}@keyframes startdot{0%{transform:translateY(-50%) scale(0)}100%{transform:translateY(-50%) scale(1)}}.main-axis{position:absolute;top:50%;left:4%;right:4%;border-top:4px dotted var(--line-color);z-index:1;width:0;animation:drawLineFull 1.5s ease-in-out forwards;animation-delay:0.5s}@keyframes drawLineFull{from{width:0}to{width:92%}}.node.bottom .description{left:-100px;text-align:end}.icon-box{transition:all 0.3s ease;z-index:1;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease}.node:hover .icon-box{transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);box-shadow:10px 10px 20px rgba(0,0,0,.2)}.al__timeline--wrap-main::-webkit-scrollbar{display:none}