section.wrapper_middle:not([data-cattype="257"]) { z-index: 100; } section[data-cattype="257"] { padding: 0; } section[data-cattype="257"] .col-lg-6 { flex: 0 0 auto; width: 48.5%; left: 10%; position: relative; } section[data-cattype="257"] .grid.list-service { width: 90%; } section[data-cattype="257"].solarplanet > .container { min-height: 45vh; padding: 0 0 90px 30px; z-index: 10; } [data-cattype="257"] .wrapper_solarplanet { position: absolute; top: -60%; right: -25%; z-index: -1; } [data-cattype="257"] .wrapper_solarplanet > svg { width: 72vw; } [data-cattype="257"] .section-title { font-size: 2.81rem; line-height: 1.2; color: #000; } [data-cattype="257"] .leading { font-size: 1.2rem; font-weight: 300; line-height: 1.5; } [data-cattype="257"] .list-service { margin-top: 15px; } [data-cattype="257"] .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="257"] .list-service > li span { position: relative; z-index: 10; } [data-cattype="257"] .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="257"] .list-service > li:hover, [data-cattype="257"] .list-service > li.flash { border: 1px solid #fb9202; color: white; } [data-cattype="257"] .list-service > li:hover:after, [data-cattype="257"] .list-service > li.flash:after { background-color: #fb9202; height: 450%; opacity: 1; transform: translateX(-50%) translateY(-50%) rotate(-25deg); } [data-cattype="257"] .mobile-slider-hand { display: none; } @media (max-width: 1400px) { } @media (min-width: 768px) and (max-width: 980px) { [data-cattype="257"] .wrapper_solarplanet > svg { width: 120vw; opacity: 0.3; } } @media (max-width: 767px) { section[data-cattype="257"] { overflow-x: visible; } section[data-cattype="257"] .col-lg-6 { width: 100%; left: 0%; } section[data-cattype="257"].solarplanet > .container { padding: 0 15px 30px 15px; text-align: center; padding-bottom: 15px; } [data-cattype="257"] .section-title { font-size: 1.62em; text-align: center; padding: 0; } [data-cattype="257"] .wrapper_solarplanet { top: -50%; overflow: hidden; height: 150%; left: 0; right: 0; width: 100%; } [data-cattype="257"] .wrapper_solarplanet > svg { width: 180vw; opacity: 0.3; } [data-cattype="257"] .list-service > li { padding: 6px 9px; } } @media (max-width: 480px) { [data-cattype="257"] .list-service > li { font-size: 0.9em; padding: 6px; margin: 3px; } } @media (min-width: 1200px) and (max-width: 1599px) { section[data-cattype="257"] .col-lg-6 { flex: 0 0 auto; width: 69.5%; left: 5%; } } @media (max-width: 767px) { section[data-cattype="257"] .mobile-slider-frame { position: relative; overflow: visible; margin-top: 24px; width: 100%; } section[data-cattype="257"] .mobile-slider-wrapper { position: relative; overflow-x: auto; overflow-y: hidden; margin-top: 0; padding: 12px 5vw 92px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; cursor: grab; padding-bottom: 55px; padding-top: 30px; width: 100%; } section[data-cattype="257"] .mobile-slider-wrapper::-webkit-scrollbar { display: none; } section[data-cattype="257"] .mobile-slider-wrapper .list-service { width: max-content; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; margin-top: 0; padding: 38px 16vw 52px 4vw; position: relative; padding-left: 0; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster { display: grid; grid-template-columns: 98px 10px 162px 10px 98px; grid-template-rows: 92px 10px 92px; align-items: stretch; justify-items: center; column-gap: 0; row-gap: 0; min-width: max-content; padding: 0 4px; position: relative; scroll-snap-align: center; scroll-snap-stop: always; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster.bubble-cluster-trio { grid-template-columns: 162px 10px 110px; grid-template-rows: 92px 10px 92px; min-width: 282px; padding-left: 0; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li { --bubble-size: 104px; --bubble-font-size: 0.8rem; width: var(--bubble-size); min-width: var(--bubble-size); max-width: var(--bubble-size); height: var(--bubble-size); min-height: var(--bubble-size); margin: 0; padding: 10px 12px; border: 1.5px solid #111; border-radius: 999px; background: transparent; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); color: transparent; display: flex; align-items: center; justify-content: center; text-align: center; transform: scale(0.82); opacity: 0; animation: osp257BubblePop 700ms cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--bubble-delay, 0ms); overflow: visible; z-index: 1; transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 500ms ease; } section[data-cattype="257"] .mobile-slider-wrapper .list-service.is-intro .bubble-cluster > li { opacity: 0; transform: translateX(-38px) scale(0.2); animation: none; } section[data-cattype="257"] .mobile-slider-wrapper .list-service.is-intro .bubble-cluster:first-child > li:first-child { opacity: 1; transform: scale(0.82); } section[data-cattype="257"] .mobile-slider-wrapper .list-service.is-expanded .bubble-cluster > li { opacity: 1; transform: scale(1); } section[data-cattype="257"] .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: osp257BubblePulse 2.8s ease-in-out infinite; animation-delay: calc(var(--bubble-delay, 0ms) + 280ms); z-index: 0; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li > span { position: relative; z-index: 1; display: block; width: calc(100% - 4px); max-width: calc(100% - 4px); color: #111; font-size: 15px; line-height: 1.12; font-weight: 500; word-break: break-word; overflow-wrap: break-word; hyphens: none; text-wrap: balance; max-height: none; overflow: visible; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.bubble-sm { --bubble-size: 84px; --bubble-font-size: 0.65rem; padding: 8px 9px; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.bubble-md { --bubble-size: 100px; --bubble-font-size: 0.72rem; padding: 9px 10px; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.bubble-lg { --bubble-size: 160px; --bubble-font-size: 0.9rem; padding: 14px 16px; z-index: 3; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.bubble-text-compact { --bubble-font-size: calc(var(--bubble-font-size) - 0.06rem); } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.bubble-text-tight { --bubble-font-size: calc(var(--bubble-font-size) - 0.12rem); padding-inline: 6px; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.cluster-tl { grid-column: 1; grid-row: 1; align-self: start; margin-left: 33px; margin-top: -48px; --bubble-size: 100px; --bubble-font-size: 0.65rem; padding: 8px 9px; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.cluster-bl { grid-column: 1; grid-row: 3; align-self: end; margin-left: 17px; margin-bottom: -31px; --bubble-size: 120px; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.cluster-center { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin-top: -20px; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster.bubble-cluster-trio > li.cluster-center { grid-column: 1; grid-row: 1 / span 3; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.cluster-tr { grid-column: 5; grid-row: 1; align-self: start; margin-left: -16px; margin-top: -42px; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster.bubble-cluster-trio > li.cluster-tr { grid-column: 3; grid-row: 1; margin-left: -10px; margin-top: -42px; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.cluster-br { grid-column: 5; grid-row: 3; align-self: end; --bubble-size: 140px; margin-right: 2px; margin-bottom: -50px; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster.bubble-cluster-trio > li.cluster-br { grid-column: 3; grid-row: 3; margin-right: -12px; margin-bottom: -50px; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.cluster-center, section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.cluster-tr { z-index: 2; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li:hover, section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li.flash { border-color: #111; } section[data-cattype="257"] .mobile-slider-wrapper .list-service .bubble-cluster > li:hover::after, section[data-cattype="257"] .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="257"] .mobile-slider-wrapper.is-dragging { cursor: grabbing; scroll-snap-type: none; } section[data-cattype="257"] .mobile-slider-hand { display: block; position: absolute; left: 47%; bottom: 22px; transform: translateX(-50%); width: 51px; padding-top: 10px; pointer-events: none; z-index: 2; opacity: 0.95; animation: osp257HandSwipe 2.6s ease-in-out infinite; } section[data-cattype="257"] .mobile-slider-wrapper.is-dragging + .mobile-slider-hand { animation: none; transform: translateX(-50%); } section[data-cattype="257"] .mobile-slider-hand img { display: block; width: 100%; height: auto; } } @keyframes osp257BubblePop { 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 osp257BubblePulse { 0%, 100% { transform: scale(0.5); opacity: 0.12; } 50% { transform: scale(1.08); opacity: 0.32; } } @keyframes osp257HandSwipe { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; } 35% { transform: translateX(calc(-50% + 12px)) translateY(-2px); opacity: 1; } 70% { transform: translateX(calc(-50% - 10px)) translateY(0); opacity: 0.92; } }