/* keyframe */
@keyframes goodVesselValveTopLeft { 0% { transform: skew(0, 0) } 100% { transform: skew(-4deg, -5deg) } }
@keyframes goodVesselValveBottomLeft { 0% { transform: skew(0, 0) } 100% { transform: skew(-3deg, -5deg) } }
@keyframes goodVesselValveBottomRight { 0% { transform: skew(0, 0) } 100% { transform: skew(2deg, -4deg) } }
@keyframes goodVesselValveTopRight { 0% { transform: skew(0, 0) } 100% { transform: skew(4deg, -4deg) } }
@keyframes badVesselValveTopLeft { 0% { transform: skew(0, 0) } 100% { transform: skew(-1deg, 5deg) } }
@keyframes badVesselValveBottomRight { 0% { transform: skew(0, 0) } 100% { transform: skew(0.5deg, 7.5deg) } }
@keyframes badVesselValveTopRight { 0% { transform: skew(0, 0) } 100% { transform: skew(2deg, 3deg) } }
@keyframes badVesselValveBottomLeft { 0% { transform: skew(0, 0) } 100% { transform: skew(-1deg, 5deg) } }
@keyframes arrowUp { 0% { opacity: 1; transform: translateY(0); } 70% { transform: translateY(-32%); } 100% { opacity: 0; transform: translateY(-32%); } }
@keyframes arrowReturn { 0% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }
@keyframes arrowDown { 0% { opacity: 1; transform: translateY(0) rotate(180deg) scaleX(-1); } 70% { transform: translateY(32%) rotate(180deg) scaleX(-1); } 100% { opacity: 0; transform: translateY(32%) rotate(180deg) scaleX(-1); } }
@keyframes goodCell1 { 0% { opacity: 1; transform: translate(0, 0) rotate(28deg); } 60% { opacity: 1; transform: translate(120%, -120%) rotate(28deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(120%, -240%) rotate(28deg); } }
@keyframes goodCell2 { 0% { opacity: 1; transform: translate(0, 0) rotate(-36deg); } 60% { opacity: 1; transform: translate(140%, -330%) rotate(-36deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(140%, -660%) rotate(-36deg); } }
@keyframes goodCell3 { 0% { opacity: 1; transform: translate(0, 0) rotate(40deg); } 50% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(200%, -800%) rotate(40deg); } }
@keyframes goodCell4 { 0% { opacity: 1; transform: translate(0, 0); } 25% { opacity: 1; transform: translate(-110%, 160%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(120%, -1080%); } }
@keyframes goodCell5 { 0% { opacity: 1; transform: translate(0, 0) rotate(20deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-130%, -1060%) rotate(20deg); } }
@keyframes goodCell6 { 0% { opacity: 1; transform: translate(0, 0) rotate(-48deg); } 25% { opacity: 1; transform: translate(92%, -200%) rotate(-48deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(92%, -1320%) rotate(-48deg); } }
@keyframes goodCell7 { 0% { opacity: 1; transform: translate(0, 0) rotate(36deg); } 60% { opacity: 1; transform: translate(-200%, -500%) rotate(36deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-200%, -1020%) rotate(36deg); } }
@keyframes goodCell8 { 0% { opacity: 1; transform: translate(0, 0) rotate(26deg); } 25% { opacity: 1; transform: translate(-165%, -148%) rotate(26deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-165%, -1220%) rotate(26deg); } }
@keyframes goodCell9 { 0% { opacity: 1; transform: translate(0, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-60%, -660%); } }
@keyframes goodCell10 { 0% { opacity: 1; transform: translate(0, 0) rotate(-36deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-80%, -140%) rotate(-36deg); } }
@keyframes goodCell11 { 0% { opacity: 1; transform: translate(0, 0) rotate(16deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-280%, -400%) rotate(16deg); } }
@keyframes goodCell12 { 0% { opacity: 1; transform: translate(0, 0) rotate(-24deg); } 40% { opacity: 1; transform: translate(120%, 220%) rotate(-24deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-120%, -820%) rotate(-24deg); } }
@keyframes goodCell13 { 0% { opacity: 1; transform: translate(0, 0) rotate(-12deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(280%, -400%) rotate(-12deg); } }
@keyframes badCell1 { 0% { opacity: 1; transform: translate(0, 0) rotate(28deg); } 20% { transform: translate(-30%, 190%) rotate(28deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-60%, 1460%) rotate(28deg); } }
@keyframes badCell2 { 0% { opacity: 1; transform: translate(0, 0) rotate(-36deg); } 20% { transform: translate(120%, 260%) rotate(-36deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(150%, 1200%) rotate(-36deg); } }
@keyframes badCell3 { 0% { opacity: 1; transform: translate(0, 0) rotate(40deg); } 20% { transform: translate(20%, 360%) rotate(40deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(200%, 1200%) rotate(40deg); } }
@keyframes badCell4 { 0% { opacity: 1; transform: translate(0, 0) rotate(-14deg); } 20% { transform: translate(20%, 60%) rotate(-14deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(160%, 460%) rotate(-14deg); } }
@keyframes badCell5 { 0% { opacity: 1; transform: translate(0, 0) rotate(20deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-10%, 600%) rotate(20deg); } }
@keyframes badCell6 { 0% { opacity: 1; transform: translate(0, 0) rotate(-48deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(220%, 240%) rotate(-48deg); } }
@keyframes badCell7 { 0% { opacity: 1; transform: translate(0, 0) rotate(36deg); } 40% { transform: translate(-180%, 460%) rotate(36deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-320%, 1040%) rotate(36deg); } }
@keyframes badCell8 { 0% { opacity: 1; transform: translate(0, 0) rotate(26deg); } 40% { transform: translate(-120%, 300%) rotate(26deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-170%, 920%) rotate(26deg); } }
@keyframes badCell9 { 0% { opacity: 1; transform: translate(0, 0) rotate(-14deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-170%, 240%) rotate(-14deg); } }
@keyframes badCell10 { 0% { opacity: 1; transform: translate(0, 0) rotate(-36deg); } 20% { transform: translate(-50%, 260%) rotate(-36deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-120%, 1800%) rotate(-36deg); } }
@keyframes badCell11 { 0% { opacity: 1; transform: translate(0, 0) rotate(16deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-10%, 1440%) rotate(16deg); } }
@keyframes badCell12 { 0% { opacity: 1; transform: translate(0, 0) rotate(-24deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-170%, 1100%) rotate(-24deg); } }
@keyframes badCell13 { 0% { opacity: 1; transform: translate(0, 0) rotate(-12deg); } 40% { transform: translate(100%, 460%) rotate(-12deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(300%, 1140%) rotate(-12deg); } }
@keyframes badCell14 { 0% { opacity: 1; transform: translate(0, 0); } 30% { transform: translate(120%, 500%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(150%, 1800%); } }
@keyframes badCell15 { 0% { opacity: 1; transform: translate(0, 0) rotate(20deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(120%, 70%) rotate(20deg); } }

.varicoseVein #motionContent svg { width: 100%; }
.varicoseVein #motionContent { display: flex; width: 100%; height: 100%; }
.varicoseVein #motionContent .detail { width: 100%; }
.varicoseVein #motionContent .detail { display: flex; align-items: center; gap: 16px; }
.varicoseVein #motionContent .detail .vessel { position: relative; overflow: hidden; }
.varicoseVein #motionContent .detail .vessel .good path:nth-child(3) { animation: goodVesselValveTopLeft 3s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .good path:nth-child(4) { animation: goodVesselValveBottomLeft 3s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .good path:nth-child(5) { animation: goodVesselValveBottomRight 3s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .good path:nth-child(6) { animation: goodVesselValveTopRight 3s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .bad path:nth-child(3) { animation: badVesselValveTopLeft 3s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .bad path:nth-child(4) { animation: badVesselValveBottomRight 3s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .bad path:nth-child(5) { animation: badVesselValveTopRight 3s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .bad path:nth-child(6) { animation: badVesselValveBottomLeft 3s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .goodArrowUp { position: absolute; width: 7%; }
.varicoseVein #motionContent .detail .vessel .goodArrowUp._1, .varicoseVein #motionContent .detail .vessel .goodArrowUp._2, .varicoseVein #motionContent .detail .vessel .goodArrowUp._3 { animation: arrowUp 1.5s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .goodArrowUp._1 { left: 41%; top: 16%; }
.varicoseVein #motionContent .detail .vessel .goodArrowUp._2 { left: 38%; top: 49%; }
.varicoseVein #motionContent .detail .vessel .goodArrowUp._3 { left: 46%; bottom: 13%; }
.varicoseVein #motionContent .detail .vessel .goodArrowReturn { position: absolute; width: 14%; }
.varicoseVein #motionContent .detail .vessel .goodArrowReturn._1, .varicoseVein #motionContent .detail .vessel .goodArrowReturn._2 { animation: arrowReturn 1.5s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .goodArrowReturn._1 { left: 19%; bottom: 29%; transform: scaleX(-1); }
.varicoseVein #motionContent .detail .vessel .goodArrowReturn._2 { right: 26%; bottom: 29%; }
.varicoseVein #motionContent .detail .vessel .badArrowUp { position: absolute; width: 7%; }
.varicoseVein #motionContent .detail .vessel .badArrowUp._1, .varicoseVein #motionContent .detail .vessel .badArrowUp._2, .varicoseVein #motionContent .detail .vessel .badArrowUp._3 { transform: rotate(180deg) scaleX(-1); animation: arrowDown 1.5s infinite; animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .badArrowUp._1 { left: 38%; top: 24%; }
.varicoseVein #motionContent .detail .vessel .badArrowUp._2 { left: 47%; bottom: 39%; }
.varicoseVein #motionContent .detail .vessel .badArrowUp._3 { left: 43%; bottom: 11%; }
.varicoseVein #motionContent .detail .vessel .goodCell { position: absolute; width: 10%; }
.varicoseVein #motionContent .detail .vessel .goodCell._1 { top: 20%; left: 28%; transform: rotate(28deg); animation: goodCell1 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._2 { top: 45%; left: 26%; transform: rotate(-36deg); animation: goodCell2 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._3 { top: 55%; left: 21%; transform: rotate(40deg); animation: goodCell3 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._4 { top: 65%; left: 30%; transform: rotate(-14deg); animation: goodCell4 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._5 { top: 53%; right: 41%; transform: rotate(20deg); animation: goodCell5 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._6 { bottom: 11%; left: 34%; transform: rotate(-48deg); animation: goodCell6 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._7 { top: 47%; right: 32%; transform: rotate(36deg); animation: goodCell7 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._8 { bottom: 8%; right: 31%; transform: rotate(26deg); animation: goodCell8 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._9 { top: 40%; right: 48%; animation: goodCell9 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._10 { top: 16%; right: 36%; transform: rotate(-36deg); animation: goodCell10 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._11 { top: 25%; right: 29%; transform: rotate(16deg); animation: goodCell11 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._12 { bottom: 36%; right: 38%; transform: rotate(-24deg); animation: goodCell12 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._13 { top: 28%; left: 18%; transform: rotate(-12deg); animation: goodCell13 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .goodCell._1, .varicoseVein #motionContent .detail .vessel .goodCell._2, .varicoseVein #motionContent .detail .vessel .goodCell._3,
.varicoseVein #motionContent .detail .vessel .goodCell._4, .varicoseVein #motionContent .detail .vessel .goodCell._5, .varicoseVein #motionContent .detail .vessel .goodCell._6,
.varicoseVein #motionContent .detail .vessel .goodCell._7, .varicoseVein #motionContent .detail .vessel .goodCell._8, .varicoseVein #motionContent .detail .vessel .goodCell._9,
.varicoseVein #motionContent .detail .vessel .goodCell._10, .varicoseVein #motionContent .detail .vessel .goodCell._11, .varicoseVein #motionContent .detail .vessel .goodCell._12,
.varicoseVein #motionContent .detail .vessel .goodCell._13 { animation-delay: 2s; }
.varicoseVein #motionContent .detail .vessel .badCell { position: absolute; width: 10%; }
.varicoseVein #motionContent .detail .vessel .badCell._1 { top: 18%; left: 48%; transform: rotate(28deg); animation: badCell1 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._2 { top: 32%; left: 25%; transform: rotate(-36deg); animation: badCell2 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._3 { bottom: 43%; left: 33%; transform: rotate(40deg); animation: badCell3 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._4 { bottom: 35%; left: 28%; transform: rotate(-14deg); animation: badCell4 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._5 { bottom: 28%; left: 42%; transform: rotate(20deg); animation: badCell5 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._6 { bottom: 15%; left: 23%; transform: rotate(-48deg); animation: badCell6 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._7 { top: 46%; right: 18%; transform: rotate(36deg); animation: badCell7 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._8 { bottom: 38%; right: 32%; transform: rotate(26deg); animation: badCell8 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._9 { bottom: 14%; right: 30%; transform: rotate(-14deg); animation: badCell9 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._10 { top: 28%; right: 36%; transform: rotate(-36deg); animation: badCell10 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._11 { top: 40%; right: 45%; transform: rotate(16deg); animation: badCell11 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._12 { bottom: 46%; right: 34%; transform: rotate(-24deg); animation: badCell12 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._13 { bottom: 48%; left: 21%; transform: rotate(-12deg); animation: badCell13 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._14 { top: 22%; left: 27%; animation: badCell14 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._15 { bottom: 7%; left: 31%; transform: rotate(20deg); animation: badCell15 3s linear infinite; }
.varicoseVein #motionContent .detail .vessel .badCell._1, .varicoseVein #motionContent .detail .vessel .badCell._2, .varicoseVein #motionContent .detail .vessel .badCell._3,
.varicoseVein #motionContent .detail .vessel .badCell._4, .varicoseVein #motionContent .detail .vessel .badCell._5, .varicoseVein #motionContent .detail .vessel .badCell._6,
.varicoseVein #motionContent .detail .vessel .badCell._7, .varicoseVein #motionContent .detail .vessel .badCell._8, .varicoseVein #motionContent .detail .vessel .badCell._9,
.varicoseVein #motionContent .detail .vessel .badCell._10, .varicoseVein #motionContent .detail .vessel .badCell._11, .varicoseVein #motionContent .detail .vessel .badCell._12,
.varicoseVein #motionContent .detail .vessel .badCell._13, .varicoseVein #motionContent .detail .vessel .badCell._14, .varicoseVein #motionContent .detail .vessel .badCell._15 { animation-delay: 2s; }