section[data-cattype="505"] { overflow: hidden; padding: 90px 0; position: relative; margin-top: -250px; z-index: 1; } [data-cattype="505"] .wrapper_marquee { overflow: hidden; white-space: nowrap; width: 100%; } [data-cattype="505"] .wrapper_marquee h2{ display: inline-block; font-size: 6vw; font-weight: 900; color: #000; padding: 0 0.1em; margin: 0; line-height: 1.11; -webkit-text-stroke: 1px #666666; -webkit-text-fill-color: transparent; animation: marquee 30s linear infinite; } [data-cattype="505"] .wrapper_marquee.reverse h2{ -webkit-text-stroke: 1px #f79300; -webkit-text-fill-color: transparent; animation: marquee-revise 45s linear infinite; } [data-cattype="505"] .wrapper_marquee:hover h2{ animation-play-state: paused; } [data-cattype="505"] .wrapper_marquee h2 span:hover{ -webkit-text-fill-color: #f79300; } [data-cattype="505"] .wrapper_marquee.reverse h2 span:hover { -webkit-text-fill-color: #f79300; } @keyframes marquee { from { transform: translateX(0%); } to { transform: translateX(-100%); } } @keyframes marquee-revise { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @media (min-width: 1200px) and (max-width: 1600px) { section[data-cattype="505"] { margin-top: -200px; } } @media (min-width: 768px) and (max-width: 980px) { [data-cattype="505"] .wrapper_marquee h2{ font-size: 13vw; } section[data-cattype="505"] { margin-top: -180px; } } @media (max-width: 767px) { section[data-cattype="505"] { padding: 10px 0; margin-top: -15vh; z-index: 100; } [data-cattype="505"] .wrapper_marquee { transform: rotate(0deg); } [data-cattype="505"] .wrapper_marquee h2{ font-size: 13vw; } [data-cattype="505"] .wrapper_marquee h2 span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #666666; } [data-cattype="505"] .wrapper_marquee.reverse h2 span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #f79300; } } @media (max-width: 480px) { section[data-cattype="505"] { padding: 10px 0 60px 0px; } [data-cattype="505"] .wrapper_marquee h2 span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #666666; } [data-cattype="505"] .wrapper_marquee.reverse h2 span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #f79300; } }