section.wrapper_middle:not([data-cattype="265"]) { z-index: 100; } section[data-cattype="265"] { padding: 0; } section[data-cattype="265"] .col-lg-6 { flex: 0 0 auto; width: 48.5%; left: 10%; position: relative; } section[data-cattype="265"] .grid.list-service { width: 90%; } section[data-cattype="265"].solarplanet > .container { min-height: 45vh; padding: 0 0 90px 30px; z-index: 10; } [data-cattype="265"] .wrapper_solarplanet { position: absolute; top: -60%; right: -25%; z-index: -1; } [data-cattype="265"] .wrapper_solarplanet > svg { width: 72vw; } [data-cattype="265"] .section-title { font-size: 2.81rem; line-height: 1.2; color: #000; } [data-cattype="265"] .leading { font-size: 1.2rem; font-weight: 300; line-height: 1.5; } [data-cattype="265"] .list-service { margin-top: 15px; } [data-cattype="265"] .list-service > li { display: inline-block; padding: 15px; margin: 6px; border: 1px solid #aaa; background: #fff; position: relative; overflow: hidden; cursor: pointer; border-radius: 50px; } [data-cattype="265"] .list-service > li span { position: relative; z-index: 10; } [data-cattype="265"] .list-service > li:after { content: ""; position: absolute; height: 0; width: 150%; left: 50%; top: 50%; background-color: #fb9202; transition: all 0.75s ease 0s; transform: translateX(-50%) translateY(-50%) rotate(-25deg); z-index: 1; } [data-cattype="265"] .list-service > li:hover, [data-cattype="265"] .list-service > li.flash { border: 1px solid #fb9202; color: white; } [data-cattype="265"] .list-service > li:hover:after, [data-cattype="265"] .list-service > li.flash:after { background-color: #fb9202; height: 450%; opacity: 1; transform: translateX(-50%) translateY(-50%) rotate(-25deg); } [data-cattype="265"] .mobile-slider-indicator { display: none; } @media (max-width: 1400px) { } @media (min-width: 768px) and (max-width: 980px) { [data-cattype="265"] .wrapper_solarplanet > svg { width: 120vw; opacity: 0.3; } } @media (max-width: 767px) { section[data-cattype="265"] { overflow-x: visible; } section[data-cattype="265"] .col-lg-6 { width: 100%; left: 0%; } section[data-cattype="265"].solarplanet > .container { padding: 0 15px 30px 15px; text-align: center; padding-bottom: 15px; } [data-cattype="265"] .section-title { font-size: 1.62em; text-align: center; padding: 0; } [data-cattype="265"] .wrapper_solarplanet { top: -50%; overflow: hidden; height: 150%; left: 0; right: 0; width: 100%; } [data-cattype="265"] .wrapper_solarplanet > svg { width: 180vw; opacity: 0.3; } [data-cattype="265"] .list-service > li { padding: 6px 9px; } } @media (max-width: 480px) { [data-cattype="265"] .list-service > li { font-size: 0.9em; padding: 6px; margin: 3px; } } @media (min-width: 1200px) and (max-width: 1599px) { section[data-cattype="265"] .col-lg-6 { flex: 0 0 auto; width: 69.5%; left: 5%; } } @media (max-width: 767px) { section[data-cattype="265"] .mobile-slider-wrapper { position: relative; overflow-x: auto; overflow-y: hidden; margin-top: 24px; padding: 4px 5vw 5px 4vw; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; cursor: grab; width: 100%; padding-left: 0; } section[data-cattype="265"] .mobile-slider-wrapper::-webkit-scrollbar { display: none; } section[data-cattype="265"] .mobile-slider-wrapper .list-service { width: max-content; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; margin-top: 0; padding: 8px 4vw 10px 0; position: relative; padding-left: 0; gap: 0; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster { position: relative; scroll-snap-align: start; scroll-snap-stop: always; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster.bubble-cluster-flow { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; width: max-content; min-width: max-content; height: auto; min-height: 0; padding: 0 4vw 0 0; position: relative; scroll-snap-align: start; scroll-snap-stop: always; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-flow-row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; width: max-content; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li { --bubble-font-size: 0.8rem; width: auto; min-width: 118px; max-width: 100vw; height: auto; min-height: 44px; margin: 0; padding: 9px 18px; border: 1.5px solid #111; border-radius: 999px; background: transparent; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); color: transparent; display: flex; align-items: center; justify-content: center; text-align: center; flex: 0 0 auto; transform: scale(0.82); opacity: 0; animation: osp265BubblePop 700ms cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--bubble-delay, 0ms); overflow: visible; z-index: 1; aspect-ratio: auto; transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 500ms ease; } section[data-cattype="265"] .mobile-slider-wrapper .list-service.is-intro .bubble-cluster li { opacity: 0; transform: translateX(-38px) scale(0.2); animation: none; } section[data-cattype="265"] .mobile-slider-wrapper .list-service.is-intro .bubble-cluster:first-child li:first-child { opacity: 1; transform: scale(0.82); } section[data-cattype="265"] .mobile-slider-wrapper .list-service.is-expanded .bubble-cluster li { opacity: 1; transform: scale(1); } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li::after { content: ""; position: absolute; inset: 18px 18px auto auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); transform: scale(0); animation: osp265BubblePulse 2.8s ease-in-out infinite; animation-delay: calc(var(--bubble-delay, 0ms) + 280ms); z-index: 0; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li > span { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; color: #111; font-size: 1.05rem; line-height: 1.16; font-weight: 300; white-space: normal; word-break: break-word; overflow-wrap: anywhere; hyphens: none; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.bubble-sm { --bubble-font-size: 0.65rem; min-width: 104px; max-width: 136px; padding: 8px 15px; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.bubble-md { --bubble-font-size: 0.72rem; min-width: 122px; max-width: 220px; padding: 8px 17px; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.bubble-lg { --bubble-font-size: 0.9rem; min-height: 46px; min-width: 138px; max-width: 220px; padding: 9px 19px; z-index: 3; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.bubble-pill { min-width: 136px; max-width: 220px; padding: 9px 18px; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.bubble-pill-lg { min-width: 154px; max-width: 248px; padding: 9px 18px; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.bubble-pill-xl { min-width: 170px; max-width: 82vw; padding: 9px 18px; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.bubble-pill-xxl { min-width: 208px; max-width: 125vw; padding: 9px 20px; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.bubble-text-compact { --bubble-font-size: calc(var(--bubble-font-size) - 0.06rem); } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.bubble-text-tight { --bubble-font-size: calc(var(--bubble-font-size) - 0.12rem); padding-inline: 16px; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li:hover, section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.flash { border-color: #111; } section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li:hover::after, section[data-cattype="265"] .mobile-slider-wrapper .list-service .bubble-cluster li.flash::after { opacity: 1; transform: scale(1); background: rgba(0,0,0,0.06); } section[data-cattype="265"] .mobile-slider-wrapper.is-dragging { cursor: grabbing; scroll-snap-type: none; } section[data-cattype="265"] .mobile-slider-indicator { display: block; position: sticky; left: 0; width: 100vw; bottom: 16px; height: 64px; margin-left: 0; pointer-events: none; z-index: 2; margin-top: 20px; } section[data-cattype="265"] .mobile-slider-indicator__line { position: absolute; left: 0; right: 0; bottom: 16px; height: 2px; background: linear-gradient( 90deg, rgba(125, 125, 125, 0) 0%, rgba(186, 186, 186, 0.55) 12%, rgba(197, 197, 197, 0.55) 88%, rgba(125, 125, 125, 0) 100% ); } section[data-cattype="265"] .mobile-slider-indicator__planet { position: absolute; left: 0; bottom: -20px; width: 78px; height: 78px; transition: transform 120ms linear; will-change: transform; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18)); } section[data-cattype="265"] .mobile-slider-indicator.is-active .mobile-slider-indicator__planet { transition-duration: 70ms; } section[data-cattype="265"] .mobile-slider-indicator__planet img { display: block; width: 100%; height: 100%; object-fit: contain; } } @keyframes osp265BubblePop { 0% { opacity: 0; transform: translateY(18px) scale(0.82); } 65% { opacity: 1; transform: translateY(0) scale(1.05); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes osp265BubblePulse { 0%, 100% { transform: scale(0.5); opacity: 0.12; } 50% { transform: scale(1.08); opacity: 0.32; } }