.page-title-image { background-position: center; background-repeat: no-repeat; position: relative; min-height: clamp(40vh, 30vw, 44vh); color: #fff; background-image: url(../images/about_ban.jpg); background-position-y: 15.2683%; } .page-title-pingpong { --square-size: 20px; --gap-size: 20px; --cell-size: calc(var(--square-size) + var(--gap-size)); --duration: 30s; position: relative; background-color: var(--primary-color); background-image: repeating-linear-gradient(to right, var(--light-color) 0 var(--square-size), transparent var(--square-size) var(--cell-size)); background-repeat: repeat-x; background-size: auto 20px; background-position: bottom; color: var(--light-color); overflow: hidden } .page-title-pingpong::before { content: ""; position: absolute; bottom: 0; left: 0; width: var(--square-size); height: var(--square-size); background: var(--light-color); box-shadow: 0 0 10px var(--light-blue-color), 0 0 20px var(--light-blue-color), 0 0 40px var(--light-blue-color); animation: pingpong var(--duration) linear infinite alternate } .page-title-pingpong-s2 { --square-size: 20px; --gap-size: 20px; --cell-size: calc(var(--square-size) + var(--gap-size)); --duration: 30s; position: relative; background-color: var(--steel-gray-color); background-image: repeating-linear-gradient(to right, var(--light-color) 0 var(--square-size), transparent var(--square-size) var(--cell-size)); background-repeat: repeat-x; background-size: auto 20px; background-position: bottom; color: var(--light-color); overflow: hidden } .page-title-pingpong-s2::before { content: ""; position: absolute; bottom: 0; left: 0; width: var(--square-size); height: var(--square-size); background: var(--light-color); box-shadow: 0 0 10px var(--light-blue-color), 0 0 20px var(--light-blue-color), 0 0 40px var(--light-blue-color); animation: pingpong var(--duration) linear infinite alternate } @keyframes pingpong { from { transform: translateX(0) } to { transform: translateX(calc(100vw - var(--cell-size))) } } .page-title-image { background-position: center; background-repeat: no-repeat; position: relative; min-height: clamp(40vh, 30vw, 44vh); color: #fff } .page-title-image::before { content: ""; position: absolute; background-color: rgba(var(--steel-gray-color-rgb), 0.55); width: 100%; height: 100%; top: 0; left: 0; z-index: 0 } .page-title-image .title-content { position: relative; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1 } .page-title-image .title-content div:first-child div:first-child { max-width: 800px } .base-counters-box { background: rgba(var(--light-color-rgb), 0.95); border-radius: var(--border-radius); text-align: center; box-shadow: var(--box-shadow); transition: transform .28s ease, box-shadow .28s ease } .base-counters-box:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0, 0, 0, .09) } .base-counters-box .counters-number { font-size: 2rem; font-weight: 800; color: var(--primary-color) } .base-counters-box .counters-label { font-weight: 600; color: var(--iron-gray-color) } .about-counters { background-image: linear-gradient(to bottom, var(--light-color) 50%, var(--primary-color) 50%) }