* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
button,
input,
select,
textarea {
font: inherit;
}
button {
cursor: pointer;
}
.header {
position: sticky;
top: 0;
z-index: 40;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.navlinks {
display: flex;
}
.header-actions {
display: flex;
gap: 9px;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--blue);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
}
.btn {
background: #fff;
}
.hero-photo {
aspect-ratio: 5/5.15;
border-radius: 30px;
background: linear-gradient(135deg,#dbe8f7,#f4f7fb);
display: grid;
place-items: center;
overflow: hidden;
color: #73849a;
border: 1px solid #dbe2ea;
}
.hero-photo img,
.photo img,
.case img {
width: 100%;
height: 100%;
object-fit: cover;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 32px;
}
.section-head h2 {
margin: 9px 0 0;
}
.section-head p {
max-width: 520px;
margin: 0;
}
.audience-card {
position: relative;
overflow: hidden;
}
.audience-card.business {
color: #fff;
}
.audience-card .tag {
display: inline-flex;
border-radius: 999px;
}
.audience-card p {
color: var(--muted);
margin: 0 0 18px;
}
.audience-card ul {
margin: 0 0 22px;
padding-left: 20px;
}
.audience-card .btn {
min-height: 48px;
}
.audience-card.business .btn {
background: #fff;
color: var(--navy);
border-color: #fff;
}
.photo {
aspect-ratio: 16/10;
display: grid;
place-items: center;
overflow: hidden;
position: relative;
color: #6d7b8e;
font-weight: 800;
}
.service {
background: #fff;
}
.service .icon {
font-size: 1.6rem;
}
@media(min-width:769px) {
.service .icon {
font-size: 22px;
}
}
.service h3 {
margin: 10px 0 5px;
}
.price {
font-weight: 800;
font-size: 1.35rem;
}
@media(min-width:769px) {
.price {
font-size: 22px;
}
}
.muted {
color: var(--muted);
font-size: .88rem;
}
@media(min-width:769px) {
.muted {
font-size: 14px;
}
}
.business-price h3 {
font-size: 1.7rem;
line-height: 1.25;
margin: 10px 0 14px;
}
@media(min-width:769px) {
.business-price h3 {
font-size: 32px;
line-height: 1.3;
}
}
.business-price ul {
padding-left: 20px;
}
.business-price .btn {
margin-top: 8px;
background: #fff;
color: var(--navy);
border-color: #fff;
}
.story {
display: grid;
grid-template-columns: 1.02fr .98fr;
gap: 54px;
align-items: center;
}
.story h2 {
font-size: clamp(2rem,4vw,3.7rem);
line-height: 1.12;
letter-spacing: -.06em;
margin: 12px 0 20px;
}
@media(min-width:769px) {
.story h2 {
line-height: 1.3;
letter-spacing: -0.04em;
}
}
.point {
display: grid;
grid-template-columns: 38px 1fr;
gap: 12px;
align-items: start;
}
.point b {
display: block;
}
.point span {
font-size: .9rem;
color: var(--muted);
}
@media(min-width:769px) {
.point span {
font-size: 14px;
}
}
.b2b-card p {
margin: 0;
color: var(--muted);
font-size: .88rem;
}
@media(min-width:769px) {
.b2b-card p {
font-size: 14px;
}
}
.workflow .section-head {
align-items: start;
}
.workflow .section-head p {
color: #b7c4d5;
max-width: 580px;
}
.steps {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 18px;
margin-top: 8px;
}
.step {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.14);
border-top: 4px solid #4d75a6;
border-radius: 18px;
padding: 22px 22px 20px;
min-height: 170px;
}
.step .n {
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
padding: 0 12px;
border-radius: 999px;
background: #fff;
color: var(--navy);
font-weight: 800;
font-size: .74rem;
letter-spacing: .05em;
}
@media(min-width:769px) {
.step .n {
font-size: 13px;
letter-spacing: 0.08em;
}
}
.step b {
display: block;
margin: 14px 0 7px;
font-size: 1.12rem;
}
@media(min-width:769px) {
.step b {
font-size: 18px;
}
}
.step span {
font-size: .9rem;
color: #d3dceb;
line-height: 1.58;
}
@media(min-width:769px) {
.step span {
font-size: 14px;
line-height: 1.6;
}
}
.case {
overflow: hidden;
position: relative;
display: grid;
place-items: center;
color: #718095;
}
.case.hidden {
display: none;
}
.stars {
letter-spacing: 2px;
}
@media(min-width:769px) {
.stars {
letter-spacing: 0.08em;
}
}
.faq-tabs {
display: flex;
gap: 8px;
}
.faq button {
width: 100%;
border: 0;
background: transparent;
display: flex;
gap: 18px;
}
.faq.open .answer {
display: block;
}
.faq.hidden {
display: none;
}
.final-cta {
padding: 82px 0;
}
.final-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.final-box h2 {
margin: 8px 0;
}
.final-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
footer {
padding: 38px 0 90px;
}
.sticky {
position: fixed;
z-index: 45;
top: 50%;
display: grid;
grid-template-columns: 1fr;
}
.sticky a,
.sticky button {
border: 0;
text-align: center;
}
.modal-bg {
display: none;
position: fixed;
inset: 0;
z-index: 80;
background: rgba(3,12,24,.58);
padding: 18px;
}
.modal-bg.open {
display: grid;
place-items: center;
}
.form-modal {
width: min(670px,100%);
max-height: 92vh;
overflow: auto;
}
.modal-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-top h3 {
margin: 0;
}
.x {
border: 0;
width: 38px;
height: 38px;
border-radius: 50%;
background: #f0f3f6;
font-weight: 800;
}
.progress {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 6px;
margin: 20px 0;
}
.step-pane {
display: none;
}
.step-pane.on {
display: block;
}
.form-modal h4 {
font-size: 1.25rem;
margin: 6px 0 16px;
}
@media(min-width:769px) {
.form-modal h4 {
font-size: 22px;
}
}
.choice-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.choice {
text-align: left;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.field {
margin-bottom: 12px;
}
.field label {
display: block;
margin-bottom: 5px;
}
.field input,
.field select,
.field textarea {
width: 100%;
}
.field textarea {
min-height: 95px;
resize: vertical;
}
.modal-actions {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 20px;
}
.modal-actions button {
padding: 0 20px;
border: 1px solid var(--line);
background: #fff;
}
.modal-actions .next {
color: #fff;
margin-left: auto;
}
.summary {
padding: 15px;
}
.summary div {
display: flex;
justify-content: space-between;
gap: 14px;
border-bottom: 1px solid var(--line);
padding: 9px 0;
}
.summary div:last-child {
border-bottom: 0;
}
.upload {
display: block;
border: 1px dashed #adb9c7;
border-radius: 11px;
padding: 11px;
text-align: center;
margin-bottom: 8px;
}
.upload input {
display: none;
}
@media(max-width:940px) {
.navlinks {
display: none;
}
.header-actions .header-cta:first-child {
display: none;
}
.story {
grid-template-columns: 1fr;
}
.hero-photo {
aspect-ratio: 16/10;
}
.steps {
grid-template-columns: repeat(2,1fr);
row-gap: 18px;
}
}
@media(max-width:650px) {
.header-actions {
display: none;
}
.section-head {
display: block;
}
.section-head p {
margin-top: 12px;
}
.choice-grid,
.form-row {
grid-template-columns: 1fr;
}
.steps {
grid-template-columns: 1fr;
}
.final-box {
display: block;
}
.final-actions {
margin-top: 16px;
}
}
.container {
margin: auto;
}
.hero {
padding: 0;
position: relative;
display: flex;
align-items: center;
color: #fff;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.13));
pointer-events: none;
}
.hero .container {
position: relative;
z-index: 2;
}
.hero h1 {
color: #fff;
}
.hero h1 br {
display: none;
}
#heroTitleA {
color: #fff;
}
.hero h1 em {
color: var(--blue);
font-style: normal;
}
.hero p {
text-wrap: pretty;
word-break: keep-all;
}
.hero .btn {
border-radius: 7px;
}
.hero .btn.primary {
background: var(--blue);
border-color: var(--blue);
}
.hero .btn.dark {
color: #fff;
}
.audience {
padding: 64px 0 84px;
background: #fff;
}
.photo {
border-radius: 12px;
border: 1px solid #d8e2e7;
background: #f3f6f7;
min-height: 330px;
}
.business-price .section-label {
color: #6fd7e2;
}
.b2b-card {
background: transparent;
border: 0;
border-right: 1px solid #dce6ea;
border-radius: 0;
}
.b2b-card:last-child {
border-right: 0;
}
.b2b-card .ico {
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 800;
}
.workflow {
color: var(--ink);
text-align: center;
}
.workflow .process-heading {
max-width: 760px;
margin: 0 auto 58px;
text-align: center;
}
.workflow .process-heading h2 {
margin: 10px 0 14px;
}
.process-item {
text-align: center;
}
.process-item h3 {
margin: 0 0 9px;
}
.process-item p {
margin: 0;
color: var(--muted);
}
.case {
min-height: 0 !important;
aspect-ratio: 4/3;
border-radius: 12px;
border: 1px solid #dce4e8;
background: #eef2f4;
}
.case:first-child {
grid-row: auto;
grid-column: auto;
}
.faq-wrap {
margin: 0 auto;
}
.faq-title {
text-align: center;
margin-bottom: 34px;
}
.faq-title h2 {
margin: 0 0 12px;
}
.faq-title p {
margin: 0;
}
.faq-tabs {
margin-bottom: 28px;
}
.faq {
border-bottom: 1px solid #cfd9dd;
}
.faq button::before {
content: "Q.";
color: var(--blue);
margin-right: 9px;
}
.faq .answer::before {
content: "A.";
color: var(--blue);
margin-right: 8px;
}
.final-cta .section-label {
color: #72d7e1;
}
.final-cta .btn.dark {
color: #fff;
}
.sticky {
padding: 10px 9px;
gap: 0;
overflow: hidden;
}
.sticky a,
.sticky button {
background: transparent !important;
padding: 14px 8px 13px;
border-radius: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: .9rem;
letter-spacing: -.02em;
line-height: 1.2;
transition: color .18s ease, transform .18s ease;
}
@media(min-width:769px) {
.sticky a,
.sticky button {
font-size: 14px;
letter-spacing: -0.02em;
line-height: 1.3;
}
}
.sticky a:last-child,
.sticky button:last-child {
border-bottom: 0;
}
.sticky a:hover,
.sticky button:hover {
transform: none;
}
.sticky .personal-open,
.sticky .business-open {
color: #17304b;
}
.sticky-ico {
width: 26px;
height: 26px;
display: grid;
place-items: center;
}
.sticky-ico svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
}
.sticky-label {
display: block;
font-weight: 800;
letter-spacing: -.025em;
}
@media(min-width:769px) {
.sticky-label {
letter-spacing: -0.02em;
}
}
@media(max-width:940px) {
.b2b-card:nth-child(2) {
border-right: 0;
}
.b2b-card:nth-child(-n+2) {
border-bottom: 1px solid #dce6ea;
}
}
@media(max-width:650px) {
.hero .btn {
width: 100%;
}
.b2b-card {
border-right: 0 !important;
border-bottom: 1px solid #dce6ea !important;
}
.b2b-card:last-child {
border-bottom: 0 !important;
}
.sticky a,
.sticky button {
padding: 8px 4px;
border-radius: 8px;
}
.sticky-ico {
width: 22px;
height: 22px;
}
.sticky-ico svg {
width: 20px;
height: 20px;
}
}
.strength-slider {
color: #fff;
overflow: hidden;
}
.strength-slider-head {
text-align: center;
margin: 0 auto 48px;
}
.strength-slider-head h2 {
margin: 10px 0 12px;
font-size: clamp(2.25rem,4.4vw,3.7rem);
letter-spacing: -.055em;
line-height: 1.12;
}
@media(min-width:769px) {
.strength-slider-head h2 {
letter-spacing: -0.04em;
line-height: 1.3;
}
}
.strength-slider-head p {
margin: 0;
line-height: 1.8;
}
@media(min-width:769px) {
.strength-slider-head p {
line-height: 1.6;
}
}
.strength-slide {
flex: 0 0 calc((100% - var(--strength-gap))/2);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.strength-slide::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.strength-slide h3 {
position: relative;
z-index: 1;
letter-spacing: -.04em;
}
@media(min-width:769px) {
.strength-slide h3 {
letter-spacing: -0.04em;
}
}
.strength-slide p {
position: relative;
z-index: 1;
max-width: 460px;
}
@media(max-width:800px) {
.strength-slide {
flex-basis: 100%;
}
}
.compare-placeholder {
font-size: 1rem;
font-weight: 700;
color: #819098;
}
@media(min-width:769px) {
.compare-placeholder {
font-size: 16px;
}
}
.customer-panel {
display: none;
}
.customer-panel.on {
display: block;
animation: panelFade .32s ease;
}
@keyframes panelFade {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.biz-qty-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 15px;
border: 1px solid #e0e8eb;
border-radius: 12px;
}
.qty-control {
display: flex;
align-items: center;
gap: 10px;
}
.qty-control button {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid #d5e0e4;
background: #fff;
font: inherit;
font-size: 1.15rem;
font-weight: 800;
display: grid;
place-items: center;
cursor: pointer;
}
@media(min-width:769px) {
.qty-control button {
font-size: 18px;
}
}
.qty-control button:hover {
border-color: var(--blue);
color: var(--blue);
}
.qty-control strong {
min-width: 26px;
text-align: center;
font-size: 1.05rem;
}
@media(min-width:769px) {
.qty-control strong {
font-size: 16px;
}
}
.business-panel-wide {
max-width: none;
}
.business-panel-wide>p {
max-width: 760px;
}
.biz-qty-builder {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 22px 0;
}
.biz-qty-row {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.12);
}
.biz-qty-row .qty-control button {
background: #fff;
color: var(--navy);
border-color: #fff;
}
.biz-qty-summary {
margin: 12px 0 18px;
padding: 15px 16px;
border-radius: 11px;
background: rgba(16,174,194,.11);
border: 1px solid rgba(16,174,194,.25);
display: grid;
gap: 4px;
}
.biz-qty-summary span {
color: #77d8e2;
font-size: .76rem;
font-weight: 800;
}
@media(min-width:769px) {
.biz-qty-summary span {
font-size: 13px;
}
}
.biz-qty-summary strong {
color: #fff;
line-height: 1.5;
}
@media(min-width:769px) {
.biz-qty-summary strong {
line-height: 1.4;
}
}
.stats-demo {
background: #edf9fb;
}
.stats-demo-head {
text-align: center;
max-width: 720px;
margin: 0 auto 34px;
}
.stats-demo-head h2 {
margin: 8px 0 12px;
font-size: clamp(2rem,4vw,3.1rem);
letter-spacing: -.05em;
}
@media(min-width:769px) {
.stats-demo-head h2 {
letter-spacing: -0.04em;
}
}
.stats-demo-head p {
margin: 0;
color: var(--muted);
}
.stat-card {
text-align: center;
padding: 28px 18px;
border-radius: 24px;
background: #fff;
border: 1px solid #dce9ec;
box-shadow: 0 10px 24px rgba(15,34,56,.04);
transform-origin: center center;
will-change: transform;
transition: transform .24s cubic-bezier(.22,.61,.36,1),
box-shadow .24s ease,
border-color .24s ease;
}
.stat-card.stat-hover {
transform: translateY(-7px) scale(1.035);
border-color: #b7caff;
box-shadow: 0 18px 36px rgba(15,34,56,.13);
transition-delay: 0s !important;
}
body.motion-ready .stat-card.reveal.reveal-on.stat-hover {
transform: translateY(-7px) scale(1.035);
}
.stat-card strong {
display: block;
font-size: 2.7rem;
line-height: 1;
color: var(--blue);
letter-spacing: -.05em;
}
@media(min-width:769px) {
.stat-card strong {
font-size: 48px;
letter-spacing: -0.04em;
}
}
.stat-card span {
display: block;
}
.stat-card small {
display: block;
}
.process-item {
transition: opacity .38s ease,transform .38s ease,color .38s ease,filter .38s ease;
}
.process-item {
opacity: .38;
transform: translateY(10px) scale(.98);
}
.process-item.past {
opacity: .66;
transform: translateY(4px) scale(.995);
}
.process-item.current {
opacity: 1;
transform: translateY(0) scale(1.03);
}
.process-item.current h3 {
color: var(--blue);
}
@keyframes processPulse {from{transform:scale(1.05)}
to{transform:scale(1.09)}}
@keyframes caseIn {from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes lbFade {from{opacity:0}to{opacity:1}}
.faq .answer {
display: block !important;
max-height: 0;
overflow: hidden;
opacity: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
transition: max-height .38s ease,opacity .28s ease,padding .38s ease;
}
.faq.open .answer {
max-height: 220px;
opacity: 1;
padding-top: 0 !important;
padding-bottom: 22px !important;
}
.faq button span {
width: 22px;
height: 22px;
position: relative;
flex: 0 0 22px;
}
.faq button span::before,
.faq button span::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
background: #46585f;
border-radius: 9px;
transform: translate(-50%,-50%);
transition: transform .28s ease,opacity .28s ease;
}
.faq button span::before {
width: 15px;
height: 2px;
}
.faq button span::after {
width: 2px;
height: 15px;
}
.faq.open button span::after {
transform: translate(-50%,-50%) rotate(90deg);
opacity: 0;
}
.progress.progress-labeled {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 6px;
margin: 20px 0 24px;
}
.progress-labeled .progress-step {
display: grid;
gap: 7px;
}
.progress-labeled i {
height: 5px;
background: #e4e8ee;
border-radius: 99px;
transition: background .28s ease;
}
.progress-labeled i.on {
background: var(--blue);
}
.progress-labeled span {
font-size: .7rem;
color: #96a1a6;
font-weight: 800;
white-space: nowrap;
}
@media(min-width:769px) {
.progress-labeled span {
font-size: 13px;
}
}
.progress-labeled i.on + span {
color: #33464e;
}
.business-modal-qty {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.business-modal-qty label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px 14px;
}
.business-modal-qty input {
width: 76px;
text-align: center;
}
.modal-qty-preview {
display: grid;
gap: 4px;
padding: 13px 14px;
margin: 12px 0 14px;
border-radius: 10px;
background: #f0f9fa;
}
.modal-qty-preview span {
font-size: .72rem;
color: var(--blue);
font-weight: 800;
}
@media(min-width:769px) {
.modal-qty-preview span {
font-size: 13px;
}
}
.modal-qty-preview strong {
font-size: .9rem;
}
@media(min-width:769px) {
.modal-qty-preview strong {
font-size: 14px;
}
}
.motion-ready .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .48s ease,transform .48s ease;
}
.motion-ready .reveal.reveal-on {
opacity: 1;
transform: none;
}
.motion-ready .reveal-delay-1 {
transition-delay: .08s;
}
.motion-ready .reveal-delay-2 {
transition-delay: .15s;
}
@media(max-width:760px) {
.biz-qty-builder,
.business-modal-qty {
grid-template-columns: 1fr;
}
.progress-labeled span {
font-size: .62rem;
}
}
@media(max-width:460px) {
.stat-card {
padding: 22px 10px;
}
.stat-card strong {
font-size: 2.2rem;
}
}
.modal-step-help {
margin: -5px 0 14px;
color: #7d8b91;
font-size: .84rem;
}
@media(min-width:769px) {
.modal-step-help {
font-size: 13px;
}
}
.personal-modal-qty {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.personal-qty-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fbfcfd;
}
.personal-qty-row>div:first-child {
display: grid;
gap: 2px;
}
.personal-qty-row small {
color: #849198;
font-size: .75rem;
}
@media(min-width:769px) {
.personal-qty-row small {
font-size: 13px;
}
}
.personal-qty-total {
margin-top: 12px;
padding: 13px 14px;
border-radius: 11px;
background: #f0f9fa;
border: 1px solid #d5edef;
display: grid;
gap: 4px;
}
.personal-qty-total span,
.booking-selection-strip span {
color: var(--blue);
font-size: .72rem;
font-weight: 800;
}
@media(min-width:769px) {
.personal-qty-total span,
.booking-selection-strip span {
font-size: 13px;
}
}
.personal-qty-total strong,
.booking-selection-strip strong {
color: #17304b;
font-size: .9rem;
line-height: 1.5;
}
@media(min-width:769px) {
.personal-qty-total strong,
.booking-selection-strip strong {
font-size: 14px;
line-height: 1.4;
}
}
.personal-qty-total em,
.booking-selection-strip em {
color: var(--blue);
font-style: normal;
font-weight: 800;
font-size: .82rem;
}
@media(min-width:769px) {
.personal-qty-total em,
.booking-selection-strip em {
font-size: 13px;
}
}
.booking-selection-strip {
display: grid;
gap: 3px;
margin-bottom: 14px;
padding: 12px 14px;
border-radius: 10px;
background: #f0f9fa;
border: 1px solid #d5edef;
}
@media(max-width:650px) {
.personal-modal-qty {
grid-template-columns: 1fr;
}
}
.ba-carousel {
position: relative;
}
.ba-case-card {
flex: 0 0 calc((100% - 16px)/2);
min-width: 0;
padding: 15px;
}
.ba-mini {
min-width: 0;
}
.ba-mini-photo {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 1/1.08;
border-radius: 9px;
}
.ba-mini-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ba-carousel-dot {
width: 22px;
height: 3px;
padding: 0;
border: 0;
border-radius: 99px;
background: #d5dfe3;
cursor: pointer;
transition: .2s ease;
}
.ba-carousel-dot.on {
width: 38px;
background: var(--blue);
}
@media(max-width:650px) {
.ba-case-card {
flex-basis: 100%;
padding: 13px;
}
.ba-mini-photo {
aspect-ratio: 1.06/1;
}
}
.navlinks a {
position: relative;
transition: color .22s ease;
}
.navlinks a::after {
content: "";
position: absolute;
left: 50%;
bottom: -10px;
width: 20px;
height: 2px;
border-radius: 99px;
background: var(--blue);
transform: translateX(-50%) scaleX(0);
transform-origin: center;
opacity: 0;
transition: transform .22s ease,opacity .22s ease;
}
.navlinks a.nav-active {
color: var(--blue);
font-weight: 800;
}
.navlinks a.nav-active::after {
transform: translateX(-50%) scaleX(1);
opacity: 1;
}
.header,
.header .nav,
.header .logo,
.header .header-cta {
transition: height .24s ease,
padding .24s ease,
font-size .24s ease,
background .24s ease,
box-shadow .24s ease,
border-color .24s ease;
}
.header.header-scrolled {
background: rgba(255,255,255,.985);
border-bottom-color: rgba(20,40,61,.08);
box-shadow: 0 7px 24px rgba(20,40,61,.08);
}
.header.header-scrolled .nav {
height: 64px;
}
.header.header-scrolled .logo {
font-size: 1.16rem;
}
@media(min-width:769px) {
.header.header-scrolled .logo {
font-size: 18px;
}
}
.header.header-scrolled .header-cta {
padding: 8px 14px;
}
.sticky {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-50%) translateX(14px) scale(.98);
transition: opacity .28s ease,
transform .28s ease,
visibility .28s ease;
}
.sticky.smart-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(-50%) translateX(0) scale(1);
}
.sticky.smart-visible .personal-open {
color: var(--blue);
}
.sticky.smart-visible .personal-open .sticky-ico {
transform: scale(1.04);
}
.sticky-ico {
transition: transform .2s ease;
}
@media(max-width:650px) {
.header.header-scrolled .nav {
height: 56px;
}
.header.header-scrolled .logo {
font-size: 1.08rem;
}
.sticky {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.sticky.smart-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
}
}
@media(prefers-reduced-motion:reduce) {
.header,
.header .nav,
.header .logo,
.header .header-cta,
.navlinks a,
.navlinks a::after,
.sticky {
transition: none !important;
}
}
.service-showcase {
margin-bottom: 26px;
padding: 34px;
border-radius: 22px;
background: linear-gradient(145deg,#102640 0%,#17304b 100%);
color: #fff;
box-shadow: 0 18px 45px rgba(12,35,72,.14);
}
.service-showcase-head {
text-align: center;
max-width: 720px;
margin: 0 auto 24px;
}
.service-showcase-head .section-label {
color: #73deea;
}
.service-showcase-head h3 {
margin: 7px 0 8px;
font-size: clamp(2rem,3.5vw,3rem);
letter-spacing: -.05em;
}
@media(min-width:769px) {
.service-showcase-head h3 {
letter-spacing: -0.04em;
}
}
.service-showcase-head p {
margin: 0;
color: rgba(255,255,255,.68);
font-size: .92rem;
}
@media(min-width:769px) {
.service-showcase-head p {
font-size: 14px;
}
}
.service-tabs {
display: flex;
padding: 6px;
margin: 0 0 16px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 14px;
background: rgba(255,255,255,.055);
overflow-x: auto;
scrollbar-width: none;
}
.service-tabs::-webkit-scrollbar {
display: none;
}
.service-tabs button {
flex: 1 0 auto;
min-width: 120px;
height: 46px;
font: inherit;
font-size: .88rem;
cursor: pointer;
transition: background .2s ease,color .2s ease,transform .2s ease;
}
@media(min-width:769px) {
.service-tabs button {
font-size: 14px;
}
}
.service-tabs button:hover {
color: #fff;
}
.service-tabs button.on {
box-shadow: 0 5px 16px rgba(0,0,0,.12);
}
.service-detail-shell {
position: relative;
min-height: 390px;
overflow: hidden;
}
.service-detail-panel {
display: none;
grid-template-columns: .92fr 1.08fr;
min-height: 390px;
}
.service-detail-panel.on {
display: grid;
animation: servicePanelIn .32s ease both;
}
@keyframes servicePanelIn {from{opacity:.25;transform:translateY(6px)}
to{opacity:1;transform:none}}
.service-detail-price {
width: max-content;
margin-bottom: 18px;
border-bottom: 2px solid rgba(255,224,105,.75);
}
.service-book {
width: max-content;
min-height: 48px;
padding: 0 19px;
border: 0;
border-radius: 999px;
background: #ffe069;
font: inherit;
font-weight: 800;
cursor: pointer;
transition: transform .18s ease,box-shadow .18s ease;
}
.service-book:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255,224,105,.16);
}
.service-book b {
display: inline-block;
margin-left: 6px;
}
@media(max-width:800px) {
.service-showcase {
padding: 24px 18px;
}
.service-showcase-head {
margin-bottom: 18px;
}
.service-detail-shell {
min-height: 0;
}
.service-detail-panel,
.service-detail-panel.on {
grid-template-columns: 1fr;
min-height: 0;
}
}
@media(max-width:650px) {
.service-showcase {
margin-left: -2px;
margin-right: -2px;
padding: 20px 12px;
border-radius: 17px;
}
.service-tabs {
margin-left: 0;
margin-right: 0;
}
.service-tabs button {
min-width: 104px;
height: 42px;
font-size: .8rem;
}
.service-book {
width: 100%;
}
}
#audience .audience-card.mode-active {
box-shadow: 0 0 0 3px rgba(16,174,194,.14),0 12px 28px rgba(20,40,61,.08);
}
#audience .audience-card:not(.business).mode-active {
border-color: var(--blue);
}
#audience .audience-card.business.mode-active {
box-shadow: 0 0 0 3px rgba(16,174,194,.24),0 14px 30px rgba(20,40,61,.14);
}
.stat-card small {
word-break: keep-all;
}
.ba-expand {
align-self: flex-start;
min-height: 34px;
padding: 0;
border: 0;
background: transparent;
font: inherit;
font-size: .75rem;
cursor: pointer;
}
@media(min-width:769px) {
.ba-expand {
font-size: 13px;
}
}
.ba-expand b {
display: inline-block;
margin-left: 4px;
color: var(--blue);
transition: transform .18s ease;
}
.ba-expand:hover b {
transform: translate(2px,-2px);
}
.process-cards-section .section-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
padding: 0 11px;
border-radius: 999px;
background: rgba(255,255,255,.065);
color: #8fcfd8;
}
.process-cards-section .process-heading h2 {
margin: 13px 0 11px;
}
.process-cards-section .process-heading p {
margin: 0;
}
.process-card {
position: relative;
overflow: hidden;
background: #102640;
opacity: .58;
transform: translateY(5px) scale(.985);
transition: opacity .38s ease,
transform .38s ease,
border-color .38s ease,
box-shadow .38s ease,
background .38s ease;
}
.process-card.past {
opacity: .78;
transform: translateY(2px) scale(.995);
}
.process-card.current {
opacity: 1;
transform: translateY(-3px) scale(1.018);
border-color: rgba(255,224,105,.58);
background: #102640;
box-shadow: 0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,224,105,.05);
}
.process-bottom-cta {
padding: 16px 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.035);
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.process-bottom-cta>div {
display: grid;
gap: 4px;
}
.process-bottom-cta strong {
color: #fff;
}
.process-bottom-cta span {
color: #7f8da2;
}
.process-bottom-cta .btn {
flex: 0 0 auto;
}
@media(max-width:650px) {
.process-card {
opacity: .68;
transform: scale(.99);
}
.process-card.current {
transform: scale(1);
}
.process-bottom-cta {
align-items: stretch;
flex-direction: column;
}
.process-bottom-cta .btn {
width: 100%;
}
}
@media(prefers-reduced-motion:reduce) {
.process-card {
transition: none !important;
}
}
.stat-card strong[data-count-to] {
transform: translateY(0) scale(1);
transition: transform .18s ease,filter .18s ease;
font-variant-numeric: tabular-nums;
}
.stat-card strong[data-count-to].counting {
transform: translateY(-2px) scale(1.025);
}
.stat-card strong[data-count-to].count-done {
animation: countFinish .28s ease;
}
@keyframes countFinish {0%{transform:scale(1.025)}
55%{transform:scale(1.07)}
100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce) {
.stat-card strong[data-count-to] {
transition: none !important;
animation: none !important;
}
}
.required-mark,
.optional-mark {
display: inline-block;
margin-left: 5px;
font-style: normal;
font-size: .66rem;
font-weight: 800;
vertical-align: 1px;
}
@media(min-width:769px) {
.required-mark,
.optional-mark {
font-size: 13px;
}
}
.required-mark {
color: var(--blue);
}
.optional-mark {
color: #9aa7b2;
}
.field-persistent-help {
margin: -3px 2px 14px;
color: #7a8995;
font-size: .72rem;
line-height: 1.55;
word-break: keep-all;
}
@media(min-width:769px) {
.field-persistent-help {
font-size: 13px;
line-height: 1.6;
}
}
.schedule-help {
margin-top: -4px;
}
.memo-field {
margin-top: 3px;
}
.note-guide {
display: grid;
gap: 3px;
margin: 7px 0 10px;
padding: 11px 12px;
}
.note-guide strong {
font-size: .75rem;
}
@media(min-width:769px) {
.note-guide strong {
font-size: 13px;
}
}
.note-guide span {
font-size: .7rem;
line-height: 1.5;
word-break: keep-all;
}
@media(min-width:769px) {
.note-guide span {
font-size: 13px;
line-height: 1.4;
}
}
.note-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 0 0 9px;
}
.note-chips button {
min-height: 31px;
padding: 0 10px;
font: inherit;
font-size: .69rem;
cursor: pointer;
transition: .18s ease;
}
@media(min-width:769px) {
.note-chips button {
font-size: 13px;
}
}
.note-chips button.note-added {
background: #eefbfc;
border-color: rgba(16,174,194,.46);
color: #087e8c;
}
.field input[type="date"],
.field input[type="time"] {
min-height: 48px;
}
@media(max-width:650px) {
.address-row,
.schedule-row {
grid-template-columns: 1fr !important;
}
.note-chips {
gap: 5px;
}
}
:root {
--navy: #102640;
--navy-2: #17304b;
--blue: #3563f6;
--sky: #eef4ff;
--paper: #ffffff;
--soft: #f5f7fb;
--line: #dde5ef;
--ink: #102640;
--radius: 24px;
--card-shadow: 0 14px 34px rgba(15,34,56,.06);
--card-shadow-strong: 0 22px 44px rgba(15,34,56,.09);
}
html {
background: var(--paper);
}
section {
padding: 96px 0;
}
.header {
background: rgba(255,255,255,.92);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(15,34,56,.08);
}
.nav {
height: 76px;
}
.logo {
font-size: 1.23rem;
font-weight: 800;
letter-spacing: -.045em;
color: var(--ink);
}
@media(min-width:769px) {
.logo {
font-size: 18px;
letter-spacing: -0.04em;
}
}
.logo span {
color: var(--blue);
}
.navlinks {
color: #5d6c80;
font-weight: 700;
}
.navlinks a:hover {
color: var(--ink);
}
.header-cta {
padding: 0 16px;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--ink);
background: #fff;
}
.header-cta.primary {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
.section-label {
text-transform: uppercase;
}
.section-label {
color: var(--blue);
}
.section-head {
margin-bottom: 42px;
}
.section-head h2,
.workflow .process-heading h2,
.faq-title h2,
.strength-slider-head h2,
.story h2 {
color: var(--ink);
}
.section-head p,
.faq-title p,
.workflow .process-heading p,
.strength-slider-head p,
.story p,
.hero p {
color: var(--muted);
}
.hero {
min-height: 720px;
background: linear-gradient(90deg,rgba(7,18,31,.9) 0%,rgba(7,18,31,.76) 42%,rgba(7,18,31,.38) 76%,rgba(7,18,31,.62) 100%),
linear-gradient(135deg,#17304b 0%,#102640 100%);
}
.kicker {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font);
text-transform: uppercase;
color: #b9cae1;
text-shadow: none;
}
.kicker::before {
content: "";
width: 42px;
height: 2px;
border-radius: 999px;
background: var(--blue);
flex: 0 0 auto;
}
.kicker .dot {
display: none;
}
#heroKicker {
display: inline-block;
}
#heroTitleB {
color: #5f86ff;
}
.hero p {
color: rgba(229,238,248,.88);
}
.btn {
min-height: 54px;
padding: 0 22px;
border-radius: 999px;
font-weight: 800;
border: 1px solid var(--line);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(15,34,56,.08);
}
.btn.primary {
background: var(--blue);
border-color: var(--blue);
color: #fff;
}
.btn.dark {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
.hero .btn.dark {
background: transparent;
border-color: rgba(255,255,255,.62);
}
.audience-card,
.service,
.faq-wrap,
.summary,
.form-modal,
.business-price,
.ba-case-card,
.process-card,
.service-detail-shell {
border-radius: 24px !important;
}
.audience-card,
.service,
.ba-case-card,
.process-card,
.service-detail-shell,
.form-modal {
border: 1px solid var(--line) !important;
box-shadow: var(--card-shadow);
}
.audience-card {
padding: 30px 30px 28px;
background: #fff;
}
.audience-card.business {
background: var(--navy);
border-color: rgba(255,255,255,.08) !important;
}
.audience-card h3 {
margin: 14px 0 10px;
}
.audience-card ul {
color: var(--muted);
}
.audience-card.business ul,
.audience-card.business p {
color: #d3deed;
}
.audience-card .tag {
background: var(--sky);
color: var(--blue);
padding: 8px 12px;
}
.audience-card.business .tag {
background: rgba(95,134,255,.14);
color: #cbd7ff;
}
.faq-tabs button,
.service-tabs button {
border: 1px solid var(--line);
background: #fff;
color: #617185;
border-radius: 999px;
min-height: 42px;
padding: 0 15px;
font-weight: 800;
}
.faq-tabs button.on,
.service-tabs button.on {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
.ba-case-card {
background: #fff;
border: 1px solid var(--line);
box-shadow: var(--card-shadow);
}
.ba-mini {
border-radius: 18px;
overflow: hidden;
background: #f2f5fa;
border: 1px solid var(--line);
}
.ba-mini-photo {
background: #eef2f7;
}
.ba-expand {
color: var(--blue);
font-weight: 800;
}
.soft {
background: #f6f8fc;
}
.service {
padding: 24px;
}
.service h3 {
font-size: 1.28rem;
letter-spacing: -.03em;
}
@media(min-width:769px) {
.service h3 {
font-size: 22px;
letter-spacing: -0.04em;
}
}
.price {
color: var(--blue);
}
.business-price {
background: var(--navy);
color: #fff;
padding: 30px;
}
.business-price p,
.business-price ul {
color: #d4deea;
}
.service-book {
color: var(--blue);
}
.service-tabs {
gap: 10px;
flex-wrap: wrap;
}
.service-detail-shell {
background: #17304b !important;
border: 1px solid rgba(255,255,255,.1) !important;
box-shadow: 0 20px 40px rgba(8,22,48,.18) !important;
}
.service-detail-price {
color: #fff !important;
}
.strength-slide::after {
background: radial-gradient(circle at 85% 18%,rgba(53,99,246,.16),transparent 28%),linear-gradient(180deg,transparent,rgba(0,0,0,.18));
}
.b2b {
background: #f8fafd;
}
.b2b-card {
padding: 30px 24px;
}
.b2b-card .ico {
width: 44px;
height: 44px;
background: var(--sky);
color: var(--blue);
font-size: 1rem;
}
@media(min-width:769px) {
.b2b-card .ico {
font-size: 16px;
}
}
.b2b-card h3 {
font-size: 1.08rem;
letter-spacing: -.03em;
margin: 12px 0 8px;
}
@media(min-width:769px) {
.b2b-card h3 {
font-size: 18px;
letter-spacing: -0.04em;
}
}
.b2b-card p {
line-height: 1.75;
}
@media(min-width:769px) {
.b2b-card p {
line-height: 1.6;
}
}
.workflow {
background: #fff;
}
.workflow .section-label {
color: var(--blue);
}
.process-item h3 {
font-size: 1.15rem;
color: var(--ink);
}
@media(min-width:769px) {
.process-item h3 {
font-size: 18px;
}
}
.process-item p {
font-size: .9rem;
line-height: 1.8;
}
@media(min-width:769px) {
.process-item p {
font-size: 14px;
line-height: 1.6;
}
}
.stars {
color: #ffd84d;
}
.faq-wrap {
max-width: 860px;
}
.faq-tabs {
justify-content: center;
}
.faq-list {
border-top: 1px solid #17304b;
border-bottom: 1px solid var(--line);
background: #fff;
border-radius: 0;
}
.faq button {
padding: 24px 8px;
color: var(--ink);
align-items: center;
}
.faq button:hover {
color: var(--blue);
}
.faq .answer {
padding: 0 8px 24px 32px;
color: #5d6d81;
}
.final-cta {
background: var(--navy);
color: #fff;
}
.final-box h2 {
color: #fff;
}
.final-cta .btn.primary {
background: var(--blue);
border-color: var(--blue);
}
.final-cta .btn.dark {
background: transparent;
border-color: rgba(255,255,255,.4);
}
footer {
background: #102640;
color: #9eadc2;
}
footer b {
color: #fff;
}
.sticky {
right: 24px;
width: 98px;
border-radius: 32px;
background: rgba(12,24,41,.98);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 18px 34px rgba(0,0,0,.18);
}
.sticky a,
.sticky button {
color: #e8eef7;
border-bottom: 1px solid rgba(255,255,255,.08);
min-height: 82px;
gap: 7px;
font-weight: 800;
}
.sticky a:hover,
.sticky button:hover {
color: #fff;
background: rgba(255,255,255,.04) !important;
}
.sticky .personal-open {
background: rgba(53,99,246,.18) !important;
color: #fff;
}
.sticky .business-open {
background: transparent !important;
color: #dfe8f5;
}
.sticky-ico {
color: #8da9ff;
}
.sticky-label {
font-size: .92rem;
}
@media(min-width:769px) {
.sticky-label {
font-size: 14px;
}
}
.form-modal {
padding: 28px;
background: #fff;
}
.modal-top h3 {
font-size: 1.42rem;
letter-spacing: -.03em;
}
@media(min-width:769px) {
.modal-top h3 {
font-size: 22px;
letter-spacing: -0.04em;
}
}
.progress i {
height: 6px;
border-radius: 999px;
background: #e8edf3;
}
.progress i.on {
background: var(--blue);
}
.choice,
.field input,
.field select,
.field textarea {
border-radius: 16px;
border: 1px solid #d6deea;
background: #fff;
}
.choice {
padding: 16px 15px;
box-shadow: none;
}
.choice.selected {
border: 2px solid var(--blue);
background: #f6f9ff;
}
.field label {
font-size: .9rem;
color: var(--ink);
font-weight: 800;
}
@media(min-width:769px) {
.field label {
font-size: 14px;
}
}
.field input,
.field select,
.field textarea {
padding: 14px 15px;
color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: #87a4ff;
box-shadow: 0 0 0 4px rgba(53,99,246,.12);
}
.modal-actions button {
min-height: 50px;
border-radius: 999px;
font-weight: 800;
}
.modal-actions .next {
background: var(--navy);
border-color: var(--navy);
}
.summary {
background: #f7f9fc;
border: 1px solid var(--line);
}
.note-guide {
border-radius: 16px;
background: #f6f9ff;
border: 1px solid #dfe7fb;
}
.note-guide strong {
color: #17304b;
}
.note-guide span {
color: #677a96;
}
.note-chips button {
border: 1px solid #d6e0f2;
background: #fff;
color: #42526a;
border-radius: 999px;
font-weight: 800;
}
.note-chips button:hover {
border-color: #90a8f7;
color: var(--blue);
}
svg {
shape-rendering: geometricPrecision;
}
.sticky-ico svg,
.b2b-card svg {
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
@media(max-width:650px) {
section {
padding: 72px 0;
}
.nav {
height: 66px;
}
.hero {
min-height: auto;
padding: 86px 0 64px;
}
.kicker {
gap: 10px;
}
.kicker::before {
width: 28px;
}
.hero-actions {
display: grid;
grid-template-columns: 1fr;
}
.audience-card,
.service,
.ba-case-card,
.form-modal {
border-radius: 20px !important;
}
.sticky {
left: 50%;
right: auto;
top: auto;
bottom: 8px;
transform: translateX(-50%);
width: calc(100% - 18px);
border-radius: 18px;
grid-template-columns: repeat(3,1fr);
padding: 7px;
}
.sticky a,
.sticky button {
min-height: 58px;
border-bottom: 0;
border-right: 1px solid rgba(255,255,255,.08);
font-size: .82rem;
}
.sticky button:last-child,
.sticky a:last-child {
border-right: 0;
}
}
#audience {
padding: 72px 0 88px;
}
#audience .audience-card {
border-radius: 28px !important;
border: 1px solid #e0e6ef !important;
box-shadow: 0 16px 34px rgba(15,34,56,.065);
}
#audience .audience-card.business {
background: linear-gradient(145deg,#102640 0%,#102640 100%);
border-color: rgba(255,255,255,.08) !important;
box-shadow: 0 18px 38px rgba(8,22,40,.16);
}
#audience .audience-card .tag {
border-radius: 999px;
}
#audience .audience-card p {
color: #5b6f88;
}
#audience .audience-card ul {
list-style: none;
display: grid;
color: #49617f;
}
#audience .audience-card li {
position: relative;
padding-left: 23px;
}
#audience .audience-card li::before {
content: "";
position: absolute;
left: 1px;
top: .58em;
width: 10px;
height: 6px;
border-left: 2px solid #4a70eb;
border-bottom: 2px solid #4a70eb;
transform: rotate(-45deg);
}
#audience .audience-card.business li::before {
border-color: #91aaff;
}
#audience .audience-card .btn {
min-height: 50px;
border-radius: 999px;
padding: 0 20px;
}
#audience .audience-card.business .btn {
background: #fff;
color: #102640;
border-color: #fff;
}
.ba-carousel {
padding: 0 52px;
}
.strength-slider {
padding: 100px 0;
background: #102640;
}
.strength-slider-head {
max-width: 700px;
margin-bottom: 44px;
}
.strength-slider-head .section-label {
color: #7895ff;
}
.strength-slider-head h2 {
margin-top: 10px;
color: #fff;
}
.strength-slider-head p {
color: #a6b2c2;
}
.strength-slide {
min-height: 315px;
padding: 34px 34px 32px;
border-radius: 28px;
justify-content: flex-start;
background: #102640;
border: 1px solid rgba(255,255,255,.08);
box-shadow: none;
}
.strength-slide::after {
display: none;
}
.strength-slide h3 {
order: 3;
margin: 0 0 11px;
color: #fff;
font-size: 1.38rem;
line-height: 1.35;
}
@media(min-width:769px) {
.strength-slide h3 {
font-size: 22px;
line-height: 1.4;
}
}
.strength-slide p {
order: 4;
margin: 0;
color: #aeb9c8;
font-size: .92rem;
line-height: 1.78;
}
@media(min-width:769px) {
.strength-slide p {
font-size: 14px;
line-height: 1.6;
}
}
#audience .audience-card,
.strength-slide {
transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
#audience .audience-card:hover {
transform: translateY(-2px);
box-shadow: 0 20px 42px rgba(15,34,56,.085);
}
@media(max-width:650px) {
#audience {
padding: 56px 0 68px;
}
#audience .audience-card {
border-radius: 24px !important;
}
.ba-carousel {
padding: 0 36px;
}
.strength-slider {
padding: 76px 0;
}
.strength-slide {
min-height: 300px;
padding: 29px 25px;
border-radius: 24px;
}
}
.process-cards-section .process-card {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
background: #102640;
border-color: rgba(255,255,255,.11) !important;
box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}
.process-cards-section .process-card.past {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
}
.process-cards-section .process-item h3 {
color: #e9eef6 !important;
font-weight: 800;
}
.process-cards-section .process-item p {
color: #b6c1d0 !important;
}
.process-cards-section .process-card.current {
opacity: 1 !important;
transform: translateY(-4px) scale(1.012) !important;
background: #102640;
border-color: rgba(255,216,77,.58) !important;
box-shadow: 0 18px 38px rgba(0,0,0,.20),0 0 0 1px rgba(255,216,77,.06) !important;
}
.process-cards-section .process-card.current.process-item h3 {
color: #ffd84d !important;
}
.process-cards-section {
background: #102640;
color: #fff;
text-align: left;
overflow: hidden;
}
.process-cards-section .process-heading {
max-width: 780px;
margin: 0 auto 52px;
text-align: center;
}
.process-cards-section .process-heading h2 {
color: #fff;
}
.process-cards-section .process-heading p {
color: #93a2b7;
}
.process-a-layout {
display: grid;
grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
gap: 34px;
align-items: stretch;
max-width: 1120px;
margin: 0 auto;
}
.process-timeline {
position: relative;
display: grid;
gap: 8px;
padding: 4px 0;
}
.process-timeline::before {
content: "";
position: absolute;
left: 20px;
top: 31px;
bottom: 31px;
width: 1px;
background: rgba(255,255,255,.12);
}
.process-cards-section .process-step-tab,
.process-cards-section .process-step-tab.process-card,
.process-cards-section .process-step-tab.process-item {
position: relative;
width: 100%;
min-height: 78px;
display: grid;
grid-template-columns: 42px 44px 1fr 28px;
gap: 10px;
align-items: center;
padding: 12px 14px 12px 0;
border: 1px solid transparent !important;
border-radius: 22px !important;
background: transparent !important;
color: #fff;
text-align: left;
opacity: 1 !important;
transform: none !important;
box-shadow: none !important;
transition: background .24s ease,border-color .24s ease,transform .24s ease !important;
}
.process-cards-section .process-step-tab:hover {
background: rgba(255,255,255,.045) !important;
}
.process-step-rail {
position: relative;
width: 42px;
height: 100%;
display: grid;
place-items: center;
z-index: 1;
}
.process-step-rail i {
width: 11px;
height: 11px;
border-radius: 50%;
background: #4e5c70;
border: 3px solid #102640;
box-shadow: 0 0 0 1px rgba(255,255,255,.13);
transition: background .24s ease,box-shadow .24s ease,transform .24s ease;
}
.process-step-num {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 14px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
color: #8fa0b6;
font-size: .74rem;
font-weight: 800;
transition: all .24s ease;
}
@media(min-width:769px) {
.process-step-num {
font-size: 13px;
}
}
.process-step-copy {
display: grid;
gap: 3px;
min-width: 0;
}
.process-step-copy small {
color: #65778f;
transition: color .24s ease;
}
.process-step-copy strong {
color: #dfe7f2;
transition: color .24s ease;
}
.process-step-arrow {
color: #52647d;
font-size: 1.1rem;
transform: translateX(-4px);
opacity: 0;
transition: all .24s ease;
}
@media(min-width:769px) {
.process-step-arrow {
font-size: 18px;
}
}
.process-cards-section .process-step-tab.current {
background: #102640 !important;
border-color: rgba(103,137,255,.22) !important;
transform: translateX(4px) !important;
}
.process-step-tab.current .process-step-rail i {
background: #6f8dff;
box-shadow: 0 0 0 5px rgba(111,141,255,.12);
transform: scale(1.08);
}
.process-step-tab.current .process-step-num {
background: #5879f2;
border-color: #6f8dff;
color: #fff;
}
.process-step-tab.current .process-step-copy small {
color: #8da5ff;
}
.process-step-tab.current .process-step-copy strong {
color: #fff;
}
.process-step-tab.current .process-step-arrow {
opacity: 1;
color: #8da5ff;
transform: translateX(0);
}
.process-step-tab.past .process-step-rail i {
background: #71809a;
}
.process-detail-stage {
position: relative;
min-height: 538px;
border-radius: 30px;
overflow: hidden;
background: #102640;
border: 1px solid rgba(255,255,255,.09);
box-shadow: 0 24px 50px rgba(0,0,0,.2);
}
.process-detail-panel {
display: grid;
grid-template-rows: minmax(280px,1.08fr) auto;
height: 100%;
animation: processPanelIn .34s ease both;
}
.process-detail-panel[hidden] {
display: none !important;
}
@keyframes processPanelIn {from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}}
.process-detail-media {
position: relative;
overflow: hidden;
min-height: 300px;
background: radial-gradient(circle at 72% 26%,rgba(76,112,232,.18),transparent 30%),
linear-gradient(145deg,#102640,#102640 70%);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.process-detail-media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 42%;
background: linear-gradient(180deg,transparent,rgba(6,15,27,.34));
pointer-events: none;
}
.process-detail-index {
position: absolute;
top: 20px;
right: 20px;
z-index: 2;
padding: 8px 12px;
border-radius: 999px;
background: rgba(9,20,38,.55);
border: 1px solid rgba(255,255,255,.12);
color: #a8b8d0;
font-size: .68rem;
font-weight: 800;
letter-spacing: .08em;
backdrop-filter: blur(8px);
}
@media(min-width:769px) {
.process-detail-index {
font-size: 13px;
letter-spacing: 0.08em;
}
}
.process-detail-copy {
padding: 28px 30px 30px;
}
.process-detail-eyebrow {
display: block;
margin-bottom: 8px;
color: #7f9cff;
}
.process-detail-copy h3 {
margin: 0 0 10px;
color: #fff;
}
.process-detail-copy p {
margin: 0;
max-width: 680px;
color: #bcc8d7;
word-break: keep-all;
}
.process-detail-note {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.08);
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: start;
}
.process-detail-note span {
display: inline-flex;
min-height: 28px;
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: rgba(111,141,255,.12);
color: #9ab0ff;
white-space: nowrap;
}
.process-detail-note strong {
color: #dbe4ef;
}
.process-bottom-cta {
max-width: 1120px;
margin: 22px auto 0;
border-radius: 22px;
}
@media(max-width:900px) {
.process-a-layout {
grid-template-columns: 1fr;
gap: 22px;
}
.process-timeline {
grid-template-columns: repeat(2,1fr);
gap: 10px;
}
.process-timeline::before {
display: none;
}
.process-cards-section .process-step-tab,
.process-cards-section .process-step-tab.process-card {
grid-template-columns: 42px 1fr 22px;
padding: 13px 14px;
min-height: 76px;
}
.process-step-rail {
display: none;
}
.process-cards-section .process-step-tab.current {
transform: none !important;
}
.process-detail-stage {
min-height: 500px;
}
}
@media(max-width:650px) {
.process-cards-section .process-heading {
margin-bottom: 34px;
}
.process-timeline {
grid-template-columns: 1fr;
gap: 7px;
}
.process-cards-section .process-step-tab,
.process-cards-section .process-step-tab.process-card {
min-height: 68px;
border-radius: 18px !important;
}
.process-step-num {
width: 38px;
height: 38px;
border-radius: 13px;
}
.process-detail-stage {
min-height: 0;
border-radius: 24px;
}
.process-detail-panel {
grid-template-rows: auto auto;
}
.process-detail-media {
min-height: 220px;
}
.process-detail-copy {
padding: 23px 22px 24px;
}
.process-detail-note {
grid-template-columns: 1fr;
gap: 10px;
}
.process-detail-note span {
width: max-content;
}
}
@media(prefers-reduced-motion:reduce) {
.process-detail-panel {
animation: none;
}
.process-step-tab,
.process-step-num,
.process-step-rail i,
.process-step-arrow {
transition: none !important;
}
}
.price-explorer {
display: grid;
gap: 24px;
}
.price-master-tabs {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 10px;
border: 1px solid rgba(12,28,61,.08);
background: #f6f9fc;
border-radius: 999px;
align-items: center;
width: fit-content;
max-width: 100%;
}
.price-master-tabs button {
border: 0;
background: transparent;
color: #5c6e88;
font-size: 16px;
font-weight: 800;
padding: 14px 24px;
border-radius: 999px;
cursor: pointer;
transition: all .24s ease;
white-space: nowrap;
}
.price-master-tabs button:hover {
color: #102640;
background: rgba(46,96,255,.08);
}
.price-master-tabs button.on {
background: #102640;
color: #fff;
box-shadow: 0 10px 24px rgba(18,40,82,.14);
}
.price-personal-zone {
display: grid;
gap: 24px;
}
.service-tabs-v2 {
margin-top: 20px;
}
.service-tabs-v2 button[hidden] {
display: none !important;
}
.service-detail-panel[hidden] {
display: none !important;
}
.service-showcase-head h3 {
margin-bottom: 10px;
}
#priceBusinessZone[hidden],
#pricePersonalZone[hidden] {
display: none !important;
}
.business-panel-wide {
border-radius: 28px;
}
@media (max-width:900px) {
.price-master-tabs {
width: 100%;
border-radius: 24px;
}
.price-master-tabs button {
flex: 1 1 calc(33.333% - 8px);
padding: 13px 12px;
font-size: 15px;
text-align: center;
}
}
@media (max-width:640px) {
.price-master-tabs {
gap: 8px;
padding: 8px;
border-radius: 20px;
}
.price-master-tabs button {
flex: 1 1 100%;
font-size: 15px;
}
}
@keyframes reviewMarquee {from{transform:translate3d(0,0,0)}
to{transform:translate3d(calc(-1 * var(--review-shift, 0px)),0,0)}}
.service-showcase-v4 {
padding: 34px !important;
border-radius: 30px !important;
background: #f8fafc !important;
border: 1px solid #dce4ed !important;
box-shadow: 0 18px 40px rgba(15,31,56,.05) !important;
}
.service-v4-head {
max-width: 760px;
margin: 0 0 26px !important;
text-align: left !important;
}
.service-v4-head .section-label {
color: #3975dc !important;
}
.service-v4-head h3 {
color: #102640 !important;
margin: 7px 0 8px !important;
}
.service-v4-head p {
color: #65768a !important;
margin: 0 !important;
}
.service-vertical-layout {
display: grid;
grid-template-columns: 270px minmax(0,1fr);
gap: 18px;
align-items: stretch;
}
.service-showcase-v4 .service-vertical-menu {
display: flex !important;
flex-direction: column !important;
gap: 9px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
overflow: visible !important;
border-radius: 0 !important;
}
.service-showcase-v4 .service-vertical-menu button {
width: 100% !important;
min-width: 0 !important;
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
border: 1px solid #dce4ed !important;
border-radius: 18px !important;
background: #fff !important;
color: #102640 !important;
box-shadow: 0 7px 18px rgba(15,31,56,.035) !important;
text-align: left !important;
transform: none !important;
transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease !important;
}
.service-showcase-v4 .service-vertical-menu button:hover {
transform: translateX(3px) !important;
border-color: #bacbe0 !important;
box-shadow: 0 10px 22px rgba(15,31,56,.07) !important;
}
.service-showcase-v4 .service-vertical-menu button.on {
background: #102640 !important;
border-color: #102640 !important;
box-shadow: 0 14px 28px rgba(22,40,74,.16) !important;
}
.service-showcase-v4 .service-vertical-menu button::after {
display: none !important;
}
.service-menu-name {
display: grid;
min-width: 0;
}
.service-menu-name strong {
color: #102640;
}
.service-vertical-menu em {
font-style: normal;
white-space: nowrap;
}
.service-vertical-menu button.on .service-menu-name strong,
.service-vertical-menu button.on em {
color: #fff !important;
}
.service-showcase-v4 .service-vertical-detail {
min-height: 445px !important;
border: 1px solid #d8e1eb !important;
border-radius: 24px !important;
background: #fff !important;
overflow: hidden !important;
box-shadow: 0 14px 30px rgba(15,31,56,.05) !important;
}
.service-showcase-v4 .service-vertical-panel {
display: none !important;
min-height: 445px !important;
padding: 34px 36px !important;
background: #fff !important;
}
.service-showcase-v4 .service-vertical-panel.on {
display: flex !important;
flex-direction: column !important;
animation: servicePanelIn .28s ease both;
}
.service-v4-top {
display: grid;
grid-template-columns: minmax(0,1fr) 250px;
gap: 30px;
align-items: center;
flex: 1;
}
.service-v4-copy {
min-width: 0;
}
.service-v4-copy .service-detail-label {
display: inline-flex;
width: max-content;
margin-bottom: 9px;
color: #2e67cf !important;
}
.service-v4-copy h4 {
margin: 0 0 8px !important;
color: #102640 !important;
}
.service-v4-copy .service-detail-price {
width: max-content;
margin: 0 0 18px !important;
color: #245cc7 !important;
border-bottom: 2px solid rgba(36,92,199,.18) !important;
}
.service-v4-copy>p {
max-width: 620px;
margin: 0 !important;
color: #53657a !important;
word-break: keep-all;
}
.service-v4-visual {
min-height: 210px;
display: grid;
place-items: center;
padding: 18px;
border-radius: 22px;
background: linear-gradient(180deg,#edf3f8 0%,#e7eff6 100%);
border: 1px solid #d8e2eb;
overflow: hidden;
}
.service-v4-visual svg {
width: 100%;
max-width: 270px;
max-height: 205px;
}
.service-v4-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid #e3e9f0;
}
.service-v4-work {
flex: 1;
min-width: 0;
}
.service-v4-work>strong {
display: block;
margin-bottom: 9px;
color: #102640;
}
.service-showcase-v4 .service-clean-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
border: 0 !important;
}
.service-showcase-v4 .service-clean-list li {
display: flex;
align-items: center;
gap: 7px;
padding: 0 !important;
border: 0 !important;
color: #43566d !important;
}
.service-showcase-v4 .service-clean-list li span {
color: #2f68d8 !important;
}
.service-showcase-v4 .service-book {
flex: 0 0 auto;
min-height: 50px;
padding: 0 20px;
background: #102640 !important;
color: #fff !important;
border-radius: 999px !important;
box-shadow: 0 10px 22px rgba(22,40,74,.14) !important;
}
.service-showcase-v4 .service-book b {
color: #8eb1ff !important;
}
@media(max-width:980px) {
.service-showcase-v4 {
padding: 25px !important;
}
.service-vertical-layout {
grid-template-columns: 1fr;
gap: 14px;
}
.service-showcase-v4 .service-vertical-menu {
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 8px !important;
}
.service-showcase-v4 .service-vertical-menu button:hover {
transform: translateY(-2px) !important;
}
.service-v4-top {
grid-template-columns: minmax(0,1fr) 220px;
gap: 22px;
}
}
@media(max-width:680px) {
.service-showcase-v4 {
padding: 20px !important;
}
.service-showcase-v4 .service-vertical-menu {
grid-template-columns: 1fr !important;
}
.service-showcase-v4 .service-vertical-panel {
padding: 25px 22px !important;
min-height: auto !important;
}
.service-v4-top {
grid-template-columns: 1fr;
gap: 18px;
}
.service-v4-visual {
min-height: 180px;
order: -1;
}
.service-v4-visual svg {
max-height: 170px;
}
.service-v4-bottom {
align-items: stretch;
flex-direction: column;
}
.service-showcase-v4 .service-book {
width: 100%;
}
.service-showcase-v4 .service-clean-list {
display: grid;
gap: 8px;
}
}
.service-detail-price.detail-price-small {
display: none !important;
}
@media(max-width:680px) {
.service-detail-price.detail-price-small {
display: block !important;
width: max-content !important;
margin: 8px 0 16px !important;
padding: 0 !important;
border: 0 !important;
color: #2b5fc7 !important;
}
.service-detail-price.detail-price-small::before {
content: "기본가 ";
margin-right: 6px;
color: #7a8ba3;
vertical-align: middle;
}
}
.service-showcase-v4 .service-vertical-menu button {
min-height: 80px !important;
padding: 16px 17px !important;
}
.service-menu-name {
gap: 4px !important;
}
.service-menu-name small {
color: #71839a !important;
}
.service-vertical-menu em {
color: #214f9f !important;
}
.service-vertical-menu button.on .service-menu-name small {
color: #c4d1e2 !important;
}
@media(max-width:680px) {
.service-showcase-v4 .service-vertical-menu button {
min-height: 82px !important;
padding: 17px 16px !important;
}
}
.stat-card span {
margin-top: 12px !important;
font-size: 1.02rem !important;
line-height: 1.35 !important;
font-weight: 800 !important;
color: #17304b !important;
}
@media(min-width:769px) {
.stat-card span {
font-size: 16px !important;
line-height: 1.4 !important;
}
}
.stat-card small {
margin-top: 7px !important;
font-size: .88rem !important;
line-height: 1.55 !important;
font-weight: 600 !important;
color: #66778b !important;
}
@media(min-width:769px) {
.stat-card small {
font-size: 14px !important;
line-height: 1.6 !important;
}
}
@media(max-width:650px) {
.stat-card span {
font-size: .98rem !important;
}
.stat-card small {
font-size: .82rem !important;
}
}
#audience .audience-card:not(.business) {
background: linear-gradient(180deg,#ffffff 0%,#fdfefe 100%);
}
#audience .audience-card:not(.business) .tag {
background: #edf3ff;
color: #2f5ce1;
}
#audience .audience-card:not(.business) ul {
gap: 10px;
}
#audience .audience-card:not(.business) li::before {
border-left: 2.2px solid #3d66e8;
border-bottom: 2.2px solid #3d66e8;
}
.strength-slider.strength-bento {
padding: 104px 0 108px;
background: #102640;
color: #fff;
overflow: hidden;
}
.strength-bento-layout {
display: grid;
grid-template-columns: minmax(270px,.72fr) minmax(0,1.55fr);
gap: 48px;
align-items: center;
}
.strength-bento-copy {
padding: 8px 0;
}
.strength-bento-copy .section-label {
color: #7895ff;
}
.strength-bento-copy h2 {
margin: 12px 0 18px;
color: #fff;
}
.strength-bento-copy p {
margin: 0;
max-width: 390px;
color: #b3c0d0;
word-break: keep-all;
}
.strength-bento-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.strength-bento-actions .btn {
min-height: 48px;
padding: 0 18px;
border-radius: 999px;
}
.strength-bento-actions .btn:not(.primary) {
color: #eef3ff;
background: rgba(255,255,255,.045);
border-color: rgba(255,255,255,.16);
}
.strength-bento-actions .btn:not(.primary):hover {
background: rgba(255,255,255,.08);
border-color: rgba(126,151,255,.4);
}
.strength-bento-grid {
display: grid;
grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
grid-template-rows: 1fr 1fr;
gap: 18px;
min-height: 590px;
}
.strength-bento-card {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(255,255,255,.09);
border-radius: 28px;
background: #102640;
box-shadow: 0 22px 48px rgba(0,0,0,.16);
transition: transform .23s ease,border-color .23s ease,background .23s ease,box-shadow .23s ease;
}
.strength-bento-card--main {
grid-row: 1 / span 2;
}
.strength-bento-card:hover {
transform: translateY(-5px);
border-color: rgba(120,149,255,.3);
background: #102640;
box-shadow: 0 28px 56px rgba(0,0,0,.22);
}
.strength-bento-visual {
position: relative;
min-height: 158px;
display: grid;
place-items: center;
overflow: hidden;
color: #8ea8ff;
background: radial-gradient(circle at 78% 18%,rgba(88,119,235,.18),transparent 33%),
linear-gradient(145deg,#102640 0%,#102640 100%);
border-bottom: 1px solid rgba(255,255,255,.07);
}
.strength-bento-card--main .strength-bento-visual {
min-height: 330px;
}
.strength-bento-visual::before {
content: "";
position: absolute;
inset: 0;
opacity: .23;
background-image: linear-gradient(rgba(137,160,213,.14) 1px,transparent 1px),
linear-gradient(90deg,rgba(137,160,213,.14) 1px,transparent 1px);
background-size: 28px 28px;
mask-image: linear-gradient(to bottom,rgba(0,0,0,.8),transparent 96%);
}
.strength-bento-visual svg {
position: relative;
z-index: 1;
width: min(60%,225px);
height: auto;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .96;
}
.strength-bento-card--main .strength-bento-visual svg {
width: min(68%,285px);
}
.strength-bento-body {
padding: 22px 22px 24px;
}
.strength-bento-card--main .strength-bento-body {
padding: 27px 28px 30px;
}
.strength-bento-no {
display: inline-flex;
margin-bottom: 9px;
color: #8ea8ff;
font-size: .76rem;
font-weight: 800;
letter-spacing: .08em;
}
@media(min-width:769px) {
.strength-bento-no {
font-size: 13px;
letter-spacing: 0.08em;
}
}
.strength-bento-body h3 {
margin: 0 0 9px;
color: #fff;
}
.strength-bento-body p {
margin: 0;
color: #b7c2d0;
word-break: keep-all;
}
@media(max-width:980px) {
.strength-slider.strength-bento {
padding: 88px 0 92px;
}
.strength-bento-layout {
grid-template-columns: 1fr;
gap: 34px;
}
.strength-bento-copy {
text-align: center;
max-width: 680px;
margin: 0 auto;
}
.strength-bento-copy p {
margin-left: auto;
margin-right: auto;
max-width: 580px;
}
.strength-bento-actions {
justify-content: center;
}
.strength-bento-grid {
min-height: 560px;
}
}
@media(max-width:720px) {
.strength-slider.strength-bento {
padding: 76px 0 80px;
}
.strength-bento-copy {
text-align: left;
}
.strength-bento-copy p {
margin-left: 0;
margin-right: 0;
}
.strength-bento-actions {
justify-content: flex-start;
}
.strength-bento-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 14px;
min-height: 0;
}
.strength-bento-card--main {
grid-row: auto;
}
.strength-bento-card {
border-radius: 24px;
}
.strength-bento-card--main .strength-bento-visual,
.strength-bento-visual {
min-height: 205px;
}
.strength-bento-card--main .strength-bento-body,
.strength-bento-body {
padding: 22px 20px 24px;
}
}
@media(prefers-reduced-motion:reduce) {
.strength-bento-card {
transition: none !important;
}
}
:root {
--section-white: #ffffff;
--section-soft: #f5f8fc;
--section-dark: #102640;
}
body {
background: var(--section-white);
}
#audience {
background: var(--section-white) !important;
}
#price {
background: var(--section-white) !important;
}
#b2b {
background: var(--section-white) !important;
}
#faq {
background: var(--section-white) !important;
}
#workflow.process-cards-section {
background: var(--section-dark) !important;
}
:root {
--font: "Pretendard","Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",sans-serif !important;
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
:root {
--text-title: #102640;
--text-dark-title: #f8fafd;
--text-dark-body: #c5d0de;
--text-dark-muted: #94a6ba;
}
#audience h2,
#price h2,
#b2b h2,
#faq h2 {
color: var(--text-title) !important;
}
#audience .audience-card:not(.business) p,
#audience .audience-card:not(.business) ul,
#price .section-head>p,
#price .service-v4-head>p,
#price .service-v4-copy>p,
#b2b .section-head>p,
#b2b .b2b-card p,
#faq .faq-title>p,
#faq .section-head>p,
#faq .faq .answer {
color: var(--text-body) !important;
}
#price .service-menu-name small {
color: var(--text-muted) !important;
}
#audience .audience-card:not(.business) p {
color: #4a6078 !important;
}
#audience .audience-card:not(.business) ul {
color: #3f566f !important;
}
#audience .audience-card.business p,
#audience .audience-card.business ul {
color: var(--text-dark-body) !important;
}
#price .price-master-tabs button:not(.on) {
color: #53677f !important;
}
#price .service-vertical-menu em {
color: #214f9f !important;
}
#price .service-showcase-v4 .service-clean-list li {
color: #435971 !important;
}
#b2b .section-head>p {
color: #4d6279 !important;
}
#b2b .b2b-card p {
color: #50667e !important;
}
#why.strength-bento h2,
#workflow.process-cards-section h2 {
color: var(--text-dark-title) !important;
}
#why.strength-bento .strength-bento-copy>p,
#why.strength-bento .strength-bento-body p,
#workflow.process-cards-section .process-heading>p,
#workflow.process-cards-section .process-detail-copy>p {
color: var(--text-dark-body) !important;
}
#workflow.process-cards-section .process-step-copy small,
#workflow.process-cards-section .process-detail-index {
color: var(--text-dark-muted) !important;
}
#workflow .process-step-copy strong {
color: #dfe7f2 !important;
}
#workflow .process-step-tab.current .process-step-copy strong {
color: #fff !important;
}
#workflow .process-detail-note strong {
color: #dce5f0 !important;
}
main .muted {
color: var(--text-muted);
}
.final-cta .muted {
color: var(--text-dark-body) !important;
}
.container {
margin-left: auto !important;
margin-right: auto !important;
}
.combined-standard {
border-top: 1px solid rgba(255,255,255,.06);
}
@media(max-width:520px) {
#personalProgress {
gap: 4px;
}
}
:root {
--rf-title-size: 3.5rem;
--rf-description-size: 1.125rem;
--rf-body-size: 1rem;
--rf-small-size: .875rem;
--rf-title-leading: 1.25;
--rf-body-leading: 1.75;
--rf-space-2: .5rem;
--rf-space-3: .75rem;
--rf-space-4: 1rem;
--rf-space-6: 1.5rem;
}
#heroSection .kicker {
font-size: var(--rf-small-size);
line-height: 1.6;
font-weight: 600;
letter-spacing: -.01em;
margin-bottom: var(--rf-space-6);
}
@media(min-width:769px) {
#heroSection .kicker {
letter-spacing: -0.02em;
}
}
#heroSection h1 {
max-width: 940px;
margin: 0 0 var(--rf-space-4);
}
#heroTitleA,
#heroTitleB {
display: block;
max-width: none;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
letter-spacing: inherit;
word-break: keep-all;
overflow-wrap: anywhere;
}
#heroTitleA {
margin-bottom: var(--rf-space-3);
}
#heroSection p {
max-width: 640px;
margin: 0;
font-size: var(--rf-description-size);
line-height: var(--rf-body-leading);
font-weight: 400;
letter-spacing: -.01em;
word-break: keep-all;
overflow-wrap: anywhere;
}
@media(min-width:769px) {
#heroSection p {
letter-spacing: -0.02em;
}
}
#heroSection .hero-actions {
margin-top: var(--rf-space-6);
gap: var(--rf-space-3);
}
#heroSection .hero-actions .btn {
min-height: 52px;
padding: 12px 24px;
font-size: var(--rf-body-size);
line-height: 1.4;
font-weight: 600 !important;
letter-spacing: -.01em;
}
@media(min-width:769px) {
#heroSection .hero-actions .btn {
letter-spacing: -0.02em;
}
}
@media(max-width:768px) {
#heroSection {
--rf-title-size: 2.25rem;
--rf-description-size: 1rem;
}
#heroSection .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
#heroSection .kicker {
margin-bottom: var(--rf-space-4);
}
#heroSection h1 {
margin-bottom: var(--rf-space-3);
}
#heroTitleA {
margin-bottom: var(--rf-space-2);
}
}
#personalBg,
#businessBg {
padding: 16px;
}
#personalBg .form-modal,
#businessBg .form-modal {
min-width: 0;
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
overflow: auto;
overscroll-behavior: contain;
letter-spacing: -.01em;
}
@media(min-width:769px) {
#personalBg .form-modal,
#businessBg .form-modal {
letter-spacing: -0.02em;
}
}
.modal-bg .modal-top {
gap: 16px;
align-items: flex-start;
}
.modal-bg .modal-top h3 {
font-size: 22px;
line-height: 1.4;
font-weight: 700;
}
.modal-bg .modal-top .x {
flex: 0 0 44px;
width: 44px;
height: 44px;
}
.modal-bg .progress-labeled .progress-step {
min-width: 0;
gap: 8px;
}
.modal-bg .progress-labeled span {
white-space: normal;
color: #4a5b70;
}
.modal-bg .progress-labeled .current span {
color: #102640;
}
.modal-bg .form-modal h4 {
word-break: keep-all;
overflow-wrap: anywhere;
}
.modal-bg .modal-step-help {
word-break: keep-all;
overflow-wrap: anywhere;
}
.modal-bg .field {
min-width: 0;
}
.modal-bg input,
.modal-bg select,
.modal-bg textarea {
min-width: 0;
font-size: 16px;
line-height: 1.5;
}
@media(min-width:769px) {
.modal-bg input,
.modal-bg select,
.modal-bg textarea {
line-height: 1.4;
}
}
.modal-bg .form-row {
gap: 16px;
}
.modal-bg .personal-qty-row {
flex-wrap: wrap;
}
.modal-bg .personal-qty-row>div:first-child {
gap: 4px;
}
.modal-bg .personal-qty-row b {
font-size: 16px;
line-height: 1.4;
}
.modal-bg .personal-qty-row small {
font-size: 14px;
line-height: 1.6;
color: #3b4c60;
}
.modal-bg .qty-control {
margin-left: auto;
flex-shrink: 0;
}
.modal-bg .modal-actions {
flex-wrap: wrap;
}
.modal-bg .summary {
padding: 16px;
font-size: 16px;
line-height: 1.75;
}
@media(min-width:769px) {
.modal-bg .summary {
line-height: 1.6;
}
}
.modal-bg .summary div {
gap: 12px;
flex-wrap: wrap;
}
.modal-bg .summary span {
min-width: 0;
}
@media(max-width:768px) {
#personalBg .form-modal,
#businessBg .form-modal {
max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px);
}
.modal-bg .modal-top h3,
.modal-bg .form-modal h4 {
font-size: 20px;
}
.modal-bg .progress-labeled span {
display: none;
}
.modal-bg .progress-labeled .progress-step {
gap: 0;
}
.modal-bg .personal-modal-qty,
.modal-bg .form-row {
grid-template-columns: minmax(0,1fr);
}
}
:root {
--rf-section-title: 2.5rem;
--rf-card-title: 1.375rem;
--rf-intro: 1.125rem;
--rf-small: .875rem;
--rf-label: .75rem;
--rf-section-space: 96px;
--rf-gap: 24px;
--rf-heading-gap: 16px;
--rf-content-gap: 40px;
}
.container {
padding-left: var(--rf-gutter) !important;
padding-right: var(--rf-gutter) !important;
}
main section:not(.hero) {
padding-block: var(--rf-section-space) !important;
}
main section h2 {
word-break: keep-all;
overflow-wrap: anywhere;
}
main :is(h3,h4) {
font-size: var(--rf-card-title);
line-height: 1.4;
font-weight: 700;
letter-spacing: -.03em;
word-break: keep-all;
overflow-wrap: anywhere;
}
@media(min-width:769px) {
main :is(h3,h4) {
letter-spacing: -0.04em;
}
}
main :is(p,li) {
word-break: keep-all;
overflow-wrap: anywhere;
}
main .section-label {
display: block;
}
main .btn,
main .service-book {
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
letter-spacing: -.01em;
border-radius: 999px;
white-space: normal;
}
@media(min-width:769px) {
main .btn,
main .service-book {
letter-spacing: -0.02em;
}
}
main :is(.final-actions,.strength-bento-actions) {
gap: 12px !important;
}
main button:focus-visible,
.header button:focus-visible {
outline: 3px solid #7f9fff;
outline-offset: 3px;
}
.navlinks {
font-size: 16px;
line-height: 1.4;
gap: 24px;
}
.header-cta {
font-size: 16px;
line-height: 1.4;
font-weight: 600 !important;
min-height: 44px;
}
#audience .audience-card {
min-width: 0;
min-height: 0;
overflow: visible;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#audience .audience-card .tag {
font-size: 14px;
line-height: 1.4;
font-weight: 600;
padding: 8px 12px;
margin: 0;
}
#audience .audience-card h3 {
font-size: var(--rf-card-title) !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -.03em;
}
@media(min-width:769px) {
#audience .audience-card h3 {
letter-spacing: -0.04em;
}
}
#audience .audience-card p,
#audience .audience-card ul {
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
letter-spacing: -.01em;
max-width: 640px;
}
@media(min-width:769px) {
#audience .audience-card p,
#audience .audience-card ul {
line-height: 1.6 !important;
letter-spacing: -0.02em;
}
}
#audience .audience-card ul {
padding: 0;
gap: 8px;
}
#audience .audience-card .btn {
margin-top: auto;
}
#workflow .process-heading>p {
margin-inline: auto;
}
#workflow .process-a-layout {
max-width: none;
}
#workflow .process-timeline {
align-content: start;
gap: 8px;
}
#workflow .process-step-copy {
gap: 4px;
}
#workflow .process-step-copy strong {
letter-spacing: -.01em;
}
@media(min-width:769px) {
#workflow .process-step-copy strong {
letter-spacing: -0.02em;
}
}
#workflow .process-step-num {
font-size: 14px;
line-height: 1.4;
font-weight: 600;
}
#workflow .process-detail-stage {
min-width: 0;
min-height: 0;
}
#workflow .process-detail-panel {
grid-template-rows: minmax(260px,1fr) auto;
height: 100%;
}
#workflow .process-detail-copy h3 {
font-size: var(--rf-card-title) !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
#workflow .process-detail-copy p {
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
max-width: 640px;
}
@media(min-width:769px) {
#workflow .process-detail-copy p {
line-height: 1.6 !important;
}
}
#workflow .process-detail-eyebrow {
margin-bottom: 8px;
}
#workflow .process-detail-note {
gap: 12px;
}
#workflow .process-detail-note span,
#workflow .process-detail-note strong {
font-size: 14px;
line-height: 1.6;
font-weight: 600;
}
#workflow .process-bottom-cta {
max-width: none;
}
#workflow .process-bottom-cta strong {
font-size: 16px;
line-height: 1.4;
font-weight: 600;
}
#workflow .process-bottom-cta span {
font-size: 14px;
line-height: 1.6;
margin-top: 8px;
}
#price .section-head {
gap: 32px;
}
#price .section-head>div {
flex: 1;
min-width: 0;
}
#price .section-head>p {
flex: 1;
}
#price .service-v4-head h3 {
font-size: var(--rf-card-title) !important;
line-height: 1.4;
font-weight: 700;
}
#price .service-v4-head p {
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
max-width: 640px;
}
@media(min-width:769px) {
#price .service-v4-head p {
line-height: 1.6 !important;
}
}
#price .service-vertical-menu {
gap: 12px !important;
}
#price .service-vertical-menu button {
min-height: 80px !important;
padding: 16px !important;
gap: 12px !important;
flex-wrap: wrap;
}
#price .service-menu-name strong,
#price .service-vertical-menu em {
font-weight: 600 !important;
}
#price .service-menu-name small {
font-weight: 400 !important;
}
#price .service-vertical-detail,
#price .service-vertical-panel {
min-height: 0 !important;
}
#price .service-vertical-panel {
padding: var(--rf-card-pad) !important;
}
#price .service-v4-top {
grid-template-columns: minmax(0,1fr) minmax(120px,.65fr);
gap: 24px;
}
#price .service-v4-copy h4 {
font-size: var(--rf-card-title) !important;
line-height: 1.4;
font-weight: 700;
letter-spacing: -.03em !important;
}
@media(min-width:769px) {
#price .service-v4-copy h4 {
letter-spacing: -0.04em !important;
}
}
#price .service-detail-price {
font-size: 28px !important;
line-height: 1.4;
font-weight: 700 !important;
margin-bottom: 16px !important;
}
@media(min-width:769px) {
#price .service-detail-price {
font-size: 32px !important;
}
}
#price .service-v4-copy>p {
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
}
@media(min-width:769px) {
#price .service-v4-copy>p {
line-height: 1.6 !important;
}
}
#price .service-detail-label {
font-size: 14px;
line-height: 1.6;
font-weight: 600;
}
#price .service-v4-bottom {
flex-direction: column;
align-items: stretch;
}
#price .service-v4-work>strong,
#price .service-clean-list li {
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
}
@media(min-width:769px) {
#price .service-v4-work>strong,
#price .service-clean-list li {
line-height: 1.6 !important;
}
}
#price .service-v4-work>strong {
font-weight: 600 !important;
margin-bottom: 8px;
}
#price .service-clean-list {
display: grid !important;
gap: 8px !important;
}
#price .service-clean-list li {
align-items: flex-start !important;
}
#price .service-book {
align-self: flex-start;
}
#price :is(.price-master-tabs button,.biz-qty-row,.biz-quote-panel p) {
font-size: 16px;
line-height: 1.75;
}
@media(min-width:769px) {
#price :is(.price-master-tabs button,.biz-qty-row,.biz-quote-panel p) {
line-height: 1.6;
}
}
#why .strength-bento-layout {
grid-template-columns: minmax(280px,.75fr) minmax(0,1.5fr);
align-items: start;
}
#why .strength-bento-copy {
padding: 0;
min-width: 0;
}
#why .strength-bento-copy h2 span {
white-space: normal;
}
#why .strength-bento-copy>p {
max-width: 640px;
}
#why .strength-bento-grid {
align-items: stretch;
}
#why .strength-bento-card {
display: flex;
flex-direction: column;
min-width: 0;
}
#why .strength-bento-visual {
height: auto;
flex-shrink: 0;
gap: 16px;
align-content: center;
}
#why .strength-bento-visual svg {
max-height: none;
}
#why .strength-bento-body {
overflow: visible;
min-height: 0;
}
#why .strength-bento-body h3 {
font-size: var(--rf-card-title) !important;
line-height: 1.4 !important;
font-weight: 700;
letter-spacing: -.03em;
}
@media(min-width:769px) {
#why .strength-bento-body h3 {
letter-spacing: -0.04em;
}
}
#why .strength-bento-body p {
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
}
@media(min-width:769px) {
#why .strength-bento-body p {
line-height: 1.6 !important;
}
}
#why .strength-bento-no {
margin-bottom: 8px;
}
#faq .faq-title>p {
margin-inline: auto;
}
#faq .faq-tabs {
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
}
#faq .faq-tabs button {
font-size: 16px;
line-height: 1.4;
min-height: 48px;
padding: 12px 20px;
font-weight: 600;
}
#faq .faq button {
gap: 16px;
word-break: keep-all;
overflow-wrap: anywhere;
}
#faq .faq button span {
flex-shrink: 0;
}
#faq .faq .answer {
max-width: 760px;
word-break: keep-all;
overflow-wrap: anywhere;
}
.final-box {
gap: 40px;
}
.final-box>div {
min-width: 0;
}
.final-actions {
flex-shrink: 0;
}
footer {
font-size: 14px;
line-height: 1.75;
padding-top: 40px;
padding-bottom: 96px;
overflow-wrap: anywhere;
}
@media(min-width:769px) {
footer {
line-height: 1.6;
}
}
@media(max-width:1100px) {
#why .strength-bento-layout {
grid-template-columns: minmax(0,1fr);
}
#why .strength-bento-copy {
max-width: 640px;
margin-inline: 0;
text-align: left;
}
#why .strength-bento-actions {
justify-content: flex-start;
}
#price .service-vertical-menu {
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
.final-box {
flex-direction: column;
align-items: flex-start;
}
}
@media(max-width:900px) {
.navlinks {
display: none;
}
}
@media(max-width:768px) {
:root {
--rf-section-title: 1.75rem;
--rf-card-title: 1.25rem;
--rf-intro: 1rem;
--rf-section-space: 64px;
--rf-gap: 16px;
--rf-heading-gap: 12px;
--rf-content-gap: 28px;
}
main .section-head {
display: block;
}
#audience .audience-card .btn {
width: 100%;
}
#workflow .process-detail-panel {
grid-template-rows: auto auto;
}
#workflow .process-detail-media {
min-height: 220px;
}
#workflow .process-bottom-cta {
flex-direction: column;
align-items: stretch;
}
#price .service-v4-top {
grid-template-columns: minmax(0,1fr);
gap: 16px;
}
#price .service-v4-visual {
order: -1;
min-height: 180px;
}
#price .service-v4-visual svg {
max-height: 160px;
}
#price .service-book {
align-self: stretch;
}
.final-actions {
width: 100%;
margin-top: 24px;
}
.final-actions .btn {
flex: 1 1 180px;
}
}
@media(max-width:520px) {
#price .service-vertical-menu {
grid-template-columns: minmax(0,1fr) !important;
}
#workflow .process-timeline {
grid-template-columns: minmax(0,1fr);
}
}
#priceBusinessZone {
padding: var(--rf-card-pad);
}
#priceBusinessZone h3 {
font-size: var(--rf-card-title);
line-height: 1.4;
font-weight: 700;
letter-spacing: -.03em;
margin: 12px 0;
}
@media(min-width:769px) {
#priceBusinessZone h3 {
letter-spacing: -0.04em;
}
}
#priceBusinessZone p {
font-size: 16px;
line-height: 1.75;
max-width: 640px;
margin: 0 0 24px;
}
@media(min-width:769px) {
#priceBusinessZone p {
line-height: 1.6;
}
}
#priceBusinessZone .biz-qty-row {
gap: 12px;
flex-wrap: wrap;
}
#priceBusinessZone .qty-control {
margin-left: auto;
flex-shrink: 0;
}
#workflow .process-bottom-cta span {
color: #a4b3c5;
}
#workflow .process-step-copy small {
color: #a4b3c5 !important;
}
#workflow .process-step-tab.current .process-step-copy small {
color: #b2c3ff !important;
}
#price .price-master-tabs button {
padding: 12px 20px;
line-height: 1.4;
}
#why .strength-bento-actions {
max-width: none;
}
@media(max-width:768px) {
main .section-label {
padding-left: 0;
padding-right: 0;
}
}
#personalProgress {
grid-template-columns: repeat(3,minmax(0,1fr));
}
#personalBg .booking-preview-note,
#businessBg .booking-preview-note {
background: #edf3ff;
color: #294d85;
border-radius: 12px;
}
.modal-bg .unknown-choice,
.modal-bg .date-flex {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
line-height: 1.6;
font-weight: 600;
margin-top: 16px;
}
.modal-bg .unknown-choice {
padding: 16px;
background: #f6f8fc;
border: 1px solid #dbe3ef;
border-radius: 16px;
}
.modal-bg input[type=checkbox] {
width: 20px;
height: 20px;
min-height: 20px !important;
padding: 0 !important;
flex: 0 0 20px;
accent-color: var(--blue);
}
.modal-bg .date-flex {
font-size: 14px;
}
.modal-bg .booking-scope {
margin: 16px 0;
font-size: 16px;
line-height: 1.75;
}
@media(min-width:769px) {
.modal-bg .booking-scope {
line-height: 1.6;
}
}
.modal-bg .booking-scope summary {
cursor: pointer;
font-weight: 600;
min-height: 44px;
padding: 8px 0;
}
.modal-bg .booking-scope p {
margin: 8px 0 0;
color: #3b4c60;
}
.modal-bg .booking-error,
.modal-bg .field-error {
font-size: 14px;
line-height: 1.6;
color: #9d2525;
margin: 8px 0 16px;
}
.modal-bg .booking-error {
padding: 12px 16px;
background: #fff0f0;
border-radius: 12px;
}
.modal-bg [aria-invalid=true] {
border: 2px solid #b53636 !important;
}
.modal-bg [hidden] {
display: none !important;
}
.modal-bg .qty-control button:disabled {
opacity: .4;
cursor: default;
}
.modal-bg .summary>div {
display: grid;
grid-template-columns: 100px minmax(0,1fr) auto;
align-items: start;
gap: 12px;
padding: 16px 0;
}
.modal-bg .summary-edit {
padding: 4px 8px;
min-width: 44px;
min-height: 44px;
font-size: 14px;
line-height: 1.4;
border: 1px solid #d5dfeb;
border-radius: 8px;
background: #fff;
color: #245bc7;
}
.modal-bg .summary span {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.modal-bg .contact-actions {
display: flex;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}
.modal-bg .booking-contact {
min-height: 48px;
padding: 12px 20px;
border-radius: 999px;
border: 1px solid #d5dfeb;
background: #fff;
font-size: 16px;
}
[aria-disabled=true] {
opacity: .5;
cursor: not-allowed;
}
.modal-bg .copy-status {
font-size: 16px;
line-height: 1.75;
color: #294d85;
white-space: pre-line;
}
@media(min-width:769px) {
.modal-bg .copy-status {
line-height: 1.6;
}
}
.modal-bg .copy-fallback {
width: 100%;
min-height: 240px;
padding: 16px;
font-size: 16px;
line-height: 1.75;
}
@media(min-width:769px) {
.modal-bg .copy-fallback {
line-height: 1.6;
}
}
.modal-bg .modal-actions {
position: sticky;
bottom: -28px;
background: #fff;
padding: 16px 0 0;
z-index: 2;
}
.modal-bg .field-persistent-help {
margin-bottom: 16px;
}
@media(max-width:768px) {
.modal-bg .summary>div {
grid-template-columns: minmax(0,1fr) auto;
}
.modal-bg .summary b {
grid-column: 1;
}
.modal-bg .summary span {
grid-column: 1;
grid-row: auto;
}
.modal-bg .summary-edit {
grid-column: 2;
grid-row: 1 / span 2;
}
.modal-bg .modal-actions {
bottom: -20px;
}
}
.address-search-row {
display: flex;
gap: 8px;
align-items: stretch;
}
.address-search-row input {
flex: 1;
min-width: 0;
}
#pAddressSearch,
#pAddressSearchClose {
flex-shrink: 0;
min-height: 44px;
border: 1px solid #d5dfeb;
background: #fff;
border-radius: 10px;
font-size: 14px;
padding: 8px 12px;
}
#pAddressSearchPanel {
margin: 12px 0;
border: 1px solid #d5dfeb;
border-radius: 12px;
padding: 8px;
}
#pAddressSearchClose {
margin-bottom: 8px;
}
#pAddressSearchFrame {
height: 400px;
min-width: 0;
}
#pAddressSearchFrame iframe {
max-width: 100%;
}
@media(max-width:520px) {
.address-search-row {
flex-wrap: wrap;
}
.address-search-row input {
flex-basis: 100%;
}
#pAddressSearch {
margin-left: auto;
}
}
#personalBg .modal-top,
#businessBg .modal-top {
position: sticky;
top: -28px;
background: #fff;
z-index: 4;
padding: 8px 0;
border-bottom: 1px solid #e4e9f1;
}
@media(max-width:768px) {
#personalBg .modal-top,
#businessBg .modal-top {
top: -20px;
}
}
.review-controls {
display: flex;
gap: 8px;
margin-bottom: 18px;
}
.review p {
min-height: 72px;
}
.review small {
color: var(--muted);
}
.review-controls {
justify-content: center;
}
.review-showcase {
overflow: hidden;
}
.review-mode-tabs {
justify-content: center;
margin: 0 0 28px;
}
.review-mode-tabs button {
min-width: 112px;
}
.review-card {
min-width: 0;
min-height: 286px;
border-radius: 17px;
display: flex;
flex-direction: column;
}
.review-stars {
font-size: 1.08rem;
letter-spacing: .08em;
}
@media(min-width:769px) {
.review-stars {
font-size: 18px;
letter-spacing: 0.08em;
}
}
.review-card p {
flex: 1;
min-height: 0;
margin: 20px 0 26px;
word-break: keep-all;
}
@media(max-width:650px) {
.review-card {
min-height: 260px;
}
}
.review {
border-radius: 24px !important;
}
.review-controls button {
border: 1px solid var(--line);
background: #fff;
color: #617185;
border-radius: 999px;
min-height: 42px;
padding: 0 15px;
font-weight: 800;
}
.review-controls button.on {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
#reviews {
background: #102640;
color: #fff;
}
.review-showcase {
background: #102640;
color: #fff;
}
.review-mode-tabs button {
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: #c4ceda;
}
.review-mode-tabs button.on {
background: #fff;
color: #102640;
border-color: #fff;
}
.review-card,
.review {
padding: 24px;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 16px 30px rgba(0,0,0,.16) !important;
}
.review-card p,
.review p {
font-size: .97rem;
color: #e4ebf4 !important;
line-height: 1.85;
}
@media(min-width:769px) {
.review-card p,
.review p {
font-size: 16px;
line-height: 1.6;
}
}
.review-stars {
color: #ffd84d;
}
@media(max-width:650px) {
.review {
border-radius: 20px !important;
}
}
.review-card {
transform: translateY(0) scale(1);
transform-origin: center center;
will-change: transform;
transition: transform .24s cubic-bezier(.22,.61,.36,1),
box-shadow .24s ease,
border-color .24s ease,
background .24s ease;
}
.review-card.review-hover {
transform: translateY(-7px) scale(1.028);
border-color: rgba(115,220,232,.42) !important;
background: rgba(255,255,255,.085) !important;
box-shadow: 0 22px 42px rgba(0,0,0,.24) !important;
transition-delay: 0s !important;
}
.review-card.review-hover .review-stars {
filter: brightness(1.08);
}
body.motion-ready .review-card.reveal.reveal-on.review-hover {
transform: translateY(-7px) scale(1.028);
}
.review-card {
flex: 0 0 calc((100vw - 160px - 32px)/3);
max-width: 340px;
}
@media(max-width:1100px) {
.review-card {
flex-basis: calc((100vw - 110px - 16px)/2);
max-width: 420px;
}
}
@media(max-width:650px) {
.review-card {
flex-basis: min(86vw, 360px);
max-width: none;
}
}
#reviews.review-gallery-section {
color: #fff;
overflow: hidden;
}
#reviews .review-gallery-head {
margin: 0 auto 34px;
}
#reviews .review-gallery-head .section-label {
color: #73dce8;
margin-bottom: 10px;
}
#reviews .review-gallery-head h2 {
margin: 0;
color: #fff;
}
#reviews .review-gallery-head>p {
max-width: 650px;
margin: 16px auto 20px;
word-break: keep-all;
}
#reviews .review-gallery-head .review-mode-tabs {
justify-content: center;
margin: 0;
}
#reviews .review-gallery-panel {
display: grid;
margin: 0 auto;
}
#reviews .review-feature {
display: grid;
border: 1px solid rgba(255,255,255,.11);
border-radius: 28px;
overflow: hidden;
transition: opacity .18s ease,transform .18s ease,border-color .18s ease;
}
#reviews .review-feature.is-changing {
opacity: .68;
transform: translateY(3px);
}
#reviews .review-feature-copy {
position: relative;
display: flex;
flex-direction: column;
}
#reviews .review-feature-copy::after {
content: "";
position: absolute;
width: 270px;
height: 270px;
left: -130px;
bottom: -160px;
border-radius: 50%;
background: radial-gradient(circle,rgba(78,112,240,.13),transparent 70%);
pointer-events: none;
}
#reviews .review-feature-top {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
#reviews .review-feature-kicker {
color: #82a0ff;
}
#reviews .review-feature .review-stars {
color: #ffd84d;
font-size: 1rem;
letter-spacing: .08em;
}
@media(min-width:769px) {
#reviews .review-feature .review-stars {
font-size: 16px;
letter-spacing: 0.08em;
}
}
#reviews .review-feature blockquote {
position: relative;
z-index: 1;
word-break: keep-all;
}
#reviews .review-feature blockquote::before {
content: "“";
display: block;
height: 31px;
margin-bottom: 5px;
color: #6388ff;
font-family: Georgia,serif;
}
#reviews .review-feature-meta {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: end;
margin-top: auto;
border-top: 1px solid rgba(255,255,255,.09);
}
#reviews .review-feature-meta>div {
display: grid;
gap: 5px;
}
#reviews .review-feature-meta strong {
color: #fff;
}
#reviews .review-feature-no {
display: grid !important;
place-items: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: #17304b;
color: #9eb3ff !important;
font-size: .74rem !important;
font-weight: 800;
}
@media(min-width:769px) {
#reviews .review-feature-no {
font-size: 13px !important;
}
}
#reviews .review-feature-photo {
position: relative;
display: grid;
place-items: center;
padding: 28px;
border-left: 1px solid rgba(255,255,255,.08);
}
#reviews .review-photo-label {
position: absolute;
top: 22px;
left: 24px;
color: #839bff;
}
#reviews .review-photo-placeholder {
display: grid;
justify-items: center;
gap: 12px;
color: #8fa9ff;
}
#reviews .review-photo-placeholder svg {
width: 76px;
height: 76px;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
#reviews .review-photo-placeholder strong {
color: #c7d3e5;
font-weight: 800;
}
#reviews .review-mini-grid {
display: grid;
}
#reviews .review-mini-card {
position: relative;
display: grid;
grid-template-rows: auto auto;
align-items: center;
border: 1px solid rgba(255,255,255,.08);
border-radius: 19px;
color: #fff;
text-align: left;
cursor: pointer;
transition: transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
touch-action: manipulation;
}
#reviews .review-mini-card:hover {
transform: translateY(-3px);
border-color: rgba(123,160,255,.28);
}
#reviews .review-mini-card.is-active {
box-shadow: 0 12px 26px rgba(0,0,0,.14);
}
#reviews .review-mini-no {
grid-row: 1/3;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 13px;
background: #17304b;
color: #9eb3ff;
font-size: .72rem;
font-weight: 800;
}
@media(min-width:769px) {
#reviews .review-mini-no {
font-size: 13px;
}
}
#reviews .review-mini-card strong {
grid-column: 2;
align-self: end;
min-width: 0;
color: #fff;
}
#reviews .review-mini-card small {
grid-column: 2;
align-self: start;
min-width: 0;
}
#reviews .review-mini-card i {
grid-column: 3;
grid-row: 1/3;
color: #6885d8;
font-style: normal;
text-align: center;
}
#reviews .review-mini-card.is-active i {
color: #a8bbff;
}
#reviews .review-mini-card:focus-visible {
outline: 3px solid rgba(123,160,255,.42);
outline-offset: 3px;
}
@media(max-width:680px) {
#reviews .review-gallery-head {
margin-bottom: 28px;
}
#reviews .review-gallery-head .review-mode-tabs {
justify-content: flex-start;
}
#reviews .review-feature {
border-radius: 24px;
}
#reviews .review-feature-photo {
border-left: 0;
border-top: 1px solid rgba(255,255,255,.08);
}
#reviews .review-mini-card {
grid-template-rows: auto auto;
border-radius: 16px;
}
#reviews .review-mini-no {
width: 34px;
height: 34px;
border-radius: 11px;
}
#reviews .review-mini-card i {
display: none;
}
}
#reviews.review-gallery-section h2 {
color: var(--text-dark-title) !important;
}
#reviews.review-gallery-section .review-gallery-head>p {
color: var(--text-dark-body) !important;
}
#reviews.review-gallery-section .review-feature-meta span,
#reviews.review-gallery-section .review-mini-card small {
color: var(--text-dark-muted) !important;
}
#reviews .review-feature-meta span {
color: #9eafc3 !important;
}
#reviews .review-mini-card small {
color: #a4b3c5 !important;
}
main :is(.section-head>p,.process-heading>p,.review-gallery-head>p,.faq-title>p,.strength-bento-copy>p,.final-box .muted) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#reviews .review-gallery-head>p {
margin-inline: auto;
}
#reviews .review-mode-tabs {
margin-top: 24px;
gap: 12px;
}
#reviews .review-mode-tabs button {
font-size: 16px;
line-height: 1.4;
font-weight: 600;
min-height: 48px;
padding: 12px 20px;
}
#reviews .review-gallery-panel {
max-width: none;
}
#reviews .review-feature {
grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
min-height: 0;
}
#reviews .review-feature-copy {
min-width: 0;
min-height: 0;
}
#reviews .review-feature blockquote {
max-width: 640px;
}
#reviews .review-feature-top {
flex-wrap: wrap;
gap: 12px;
}
#reviews .review-feature-meta {
padding-top: 24px;
gap: 16px;
}
#reviews .review-feature-meta strong {
font-size: 16px;
line-height: 1.4;
font-weight: 600;
}
#reviews .review-feature-meta span {
font-size: 14px !important;
}
#reviews .review-feature-photo {
min-width: 0;
min-height: 280px;
}
#reviews .review-mini-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
#reviews .review-mini-card {
grid-template-columns: 40px minmax(0,1fr) 20px;
column-gap: 12px;
row-gap: 8px;
}
#reviews .review-mini-card small {
word-break: keep-all;
overflow-wrap: anywhere;
}
@media(max-width:900px) {
#reviews .review-mini-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media(max-width:768px) {
#reviews .review-feature-photo {
min-height: 200px;
}
#reviews .review-mini-card {
grid-template-columns: 40px minmax(0,1fr) 20px;
}
#reviews .review-mini-card i {
display: block;
}
}
#reviews .review-photo-placeholder strong {
font-size: 14px;
line-height: 1.6;
}
.personal-discount-status {
margin-top: 10px;
padding: 11px 13px;
border-radius: 12px;
background: #f4f7fb;
border: 1px solid #dbe4ef;
color: #53657a;
font-size: .88rem;
font-weight: 700;
line-height: 1.5;
}
@media(min-width:769px) {
.personal-discount-status {
font-size: 14px;
line-height: 1.4;
}
}
.personal-discount-status.is-active {
background: #edf4ff;
border-color: #b8cdfd;
color: #264d9b;
}
.personal-discount-status.is-active::before {
content: "✓ ";
font-weight: 800;
color: #3563f6;
}
.event-popup-bg {
position: fixed;
inset: 0;
z-index: 1200;
display: none;
place-items: center;
padding: 20px;
background: rgba(4,11,23,.48);
backdrop-filter: blur(3px);
}
.event-popup-bg.open {
display: grid;
animation: eventPopupFade .22s ease;
}
@keyframes eventPopupFade {from{opacity:0}to{opacity:1}}
.event-popup {
position: relative;
overflow: hidden;
border-radius: 26px;
color: #fff;
background: radial-gradient(circle at 90% 6%,rgba(92,132,255,.26),transparent 32%),
linear-gradient(145deg,#102640 0%,#102640 100%);
border: 1px solid rgba(139,168,255,.22);
box-shadow: 0 28px 80px rgba(2,10,24,.34);
animation: eventPopupUp .26s cubic-bezier(.22,.61,.36,1);
}
@keyframes eventPopupUp {from{opacity:0;transform:translateY(16px) scale(.98)}
to{opacity:1;transform:none}}
.event-popup-close {
position: absolute;
right: 14px;
top: 14px;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.08);
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 1;
}
.event-popup-close:hover {
background: rgba(255,255,255,.14);
}
.event-popup-kicker {
display: inline-flex;
padding: 6px 10px;
border-radius: 999px;
background: rgba(93,125,255,.18);
color: #a5b8ff;
}
.event-popup h3 em {
font-style: normal;
color: #8fb3ff;
}
.event-popup-book {
border: 0;
border-radius: 999px;
background: #2f6cf1;
color: #fff;
padding: 0 20px;
}
.event-popup-book:hover {
filter: brightness(1.05);
}
.event-popup-hide {
border: 0;
background: transparent;
color: #9fb0c6;
padding: 10px 4px;
}
.event-popup-hide:hover {
color: #fff;
}
@media(max-width:650px) {
.event-popup-bg {
padding: 14px;
}
.event-popup {
border-radius: 22px;
}
.event-popup-hide {
text-align: center;
}
}
#why.strength-bento {
background: #102640 !important;
}
#reviews.review-gallery-section {
background: radial-gradient(circle at 50% 0%,rgba(73,112,197,.10),transparent 34%),
linear-gradient(180deg,#102640 0%,#102640 100%) !important;
border-top: 1px solid rgba(151,177,224,.10);
}
#reviews .review-feature {
background: linear-gradient(145deg,#17304b 0%,#102640 100%) !important;
border-color: rgba(153,181,229,.14) !important;
box-shadow: 0 22px 46px rgba(4,12,24,.18) !important;
}
#reviews .review-feature-photo {
background: linear-gradient(rgba(126,155,255,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(126,155,255,.055) 1px,transparent 1px),
radial-gradient(circle at 62% 30%,rgba(91,126,255,.24),transparent 34%),
linear-gradient(145deg,#17304b 0%,#102640 100%) !important;
background-size: 28px 28px,28px 28px,auto,auto !important;
}
#reviews .review-mini-card {
background: #102640 !important;
border-color: rgba(151,179,225,.13) !important;
}
#reviews .review-mini-card.is-active {
background: linear-gradient(135deg,#17304b 0%,#17304b 100%) !important;
border-color: rgba(135,166,242,.48) !important;
}
#reviews .review-gallery-head>p {
color: #b7c5d7 !important;
}
:root {
--rf-container-max: 1440px;
--rf-gutter: 48px;
--rf-section-y: 96px;
--rf-card-gap: 24px;
--rf-card-pad: 28px;
--rf-title: #102640;
--rf-body: #3b4c60;
--rf-dark-title: #F8FAFD;
--rf-dark-body: #C5D0DE;
--rf-dark-muted: #A4B3C5;
}
html,
body,
button,
input,
select,
textarea {
font-family: var(--rf-font) !important;
}
body {
font-size: 16px;
line-height: 1.75;
font-weight: 400;
letter-spacing: -.01em;
color: var(--rf-body);
}
@media(min-width:769px) {
body {
line-height: 1.6;
letter-spacing: -0.02em;
}
}
* {
overflow-wrap: anywhere;
}
main :is(h1,h2,h3,h4,p,li,button,a,span,strong,small) {
word-break: keep-all;
}
.container {
width: 100% !important;
max-width: var(--rf-container-max) !important;
margin-inline: auto !important;
padding-inline: var(--rf-gutter) !important;
}
main>section:not(.hero) {
padding-block: var(--rf-section-y) !important;
}
#faq .faq-wrap {
max-width: 860px !important;
margin-inline: auto !important;
}
main :is(.section-head>p,.process-heading>p,.review-gallery-head>p,.faq-title>p,.strength-bento-copy>p,.final-box .muted) {
max-width: 640px !important;
}
#heroSection h1 {
font-size: 56px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
letter-spacing: -.03em !important;
}
@media(min-width:769px) {
#heroSection h1 {
font-size: 48px !important;
line-height: 1.3 !important;
letter-spacing: -0.04em !important;
}
}
main section h2 {
font-size: 40px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
letter-spacing: -.03em !important;
}
@media(min-width:769px) {
main section h2 {
font-size: 48px !important;
line-height: 1.4 !important;
letter-spacing: -0.04em !important;
}
}
main section :is(h3,h4) {
font-size: 22px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -.03em !important;
}
@media(min-width:769px) {
main section :is(h3,h4) {
letter-spacing: -0.04em !important;
}
}
main :is(.section-head>p,.process-heading>p,.review-gallery-head>p,.faq-title>p,.strength-bento-copy>p,.final-box .muted) {
font-size: 18px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
letter-spacing: -.01em !important;
}
@media(min-width:769px) {
main :is(.section-head>p,.process-heading>p,.review-gallery-head>p,.faq-title>p,.strength-bento-copy>p,.final-box .muted) {
line-height: 1.6 !important;
letter-spacing: -0.02em !important;
}
}
main section :is(p,li),
#faq .faq .answer {
font-size: 16px;
line-height: 1.75;
font-weight: 400;
letter-spacing: -.01em;
}
@media(min-width:769px) {
main section :is(p,li),
#faq .faq .answer {
line-height: 1.6;
letter-spacing: -0.02em;
}
}
main .section-label,
.event-popup-kicker,
#reviews .review-feature-kicker,
#reviews .review-photo-label,
#workflow .process-detail-eyebrow {
font-size: 12px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
}
@media(min-width:769px) {
main .section-label,
.event-popup-kicker,
#reviews .review-feature-kicker,
#reviews .review-photo-label,
#workflow .process-detail-eyebrow {
font-size: 13px !important;
letter-spacing: 0.08em !important;
}
}
main :is(.btn,.service-book,button),
.event-popup :is(button) {
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
letter-spacing: -.01em !important;
}
@media(min-width:769px) {
main :is(.btn,.service-book,button),
.event-popup :is(button) {
letter-spacing: -0.02em !important;
}
}
main small,
main .muted,
#reviews .review-feature-meta span,
#workflow .process-detail-index {
font-size: 14px;
line-height: 1.6;
font-weight: 400;
}
main .section-label {
margin: 0 0 12px !important;
}
main :is(.section-head,.process-heading,.review-gallery-head,.faq-title) {
margin-bottom: 40px !important;
}
main :is(.section-head,.process-heading,.review-gallery-head,.faq-title,.strength-bento-copy,.final-box) h2 {
margin: 0 0 16px !important;
}
main :is(.section-head,.process-heading,.review-gallery-head,.faq-title)>p,
#why .strength-bento-copy>p {
margin: 0 !important;
}
#why .strength-bento-actions {
margin-top: 24px !important;
gap: 12px !important;
}
main :is(.audience-grid,.review-mini-grid) {
gap: 24px !important;
}
main .btn,
main .service-book {
min-height: 52px !important;
padding: 12px 24px !important;
}
main :is(.hero-actions,.final-actions,.strength-bento-actions) {
gap: 12px !important;
}
#workflow .process-heading,
#reviews .review-gallery-head,
#faq .faq-title {
width: 100% !important;
max-width: 640px !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
#workflow .process-heading>p,
#reviews .review-gallery-head>p {
margin-left: 0 !important;
margin-right: 0 !important;
}
#reviews .review-mode-tabs {
justify-content: flex-start !important;
}
#audience :is(h2,h3,h4),
#price :is(h2,h3,h4),
#faq :is(h2,h3,h4) {
color: var(--rf-title) !important;
}
#audience :is(p,li),
#price :is(p,li),
#faq :is(p,.answer) {
color: var(--rf-body) !important;
}
#audience :is(small,.muted),
#price :is(small,.muted),
#faq :is(small,.muted) {
color: var(--rf-muted) !important;
}
#workflow :is(h2,h3,h4),
#why :is(h2,h3,h4),
#reviews :is(h2,h3,h4),
.final-cta :is(h2,h3,h4) {
color: var(--rf-dark-title) !important;
}
#workflow p,
#why.strength-bento p,
#reviews p,
.final-cta p {
color: var(--rf-dark-body) !important;
}
#workflow :is(small,.muted),
#why :is(small,.muted),
#reviews :is(small,.muted),
.final-cta :is(small,.muted) {
color: var(--rf-dark-muted) !important;
}
#audience .audience-card {
padding: 28px !important;
}
#audience .audience-card h3 {
margin: 16px 0 12px !important;
}
#audience .audience-card p {
margin: 0 0 16px !important;
}
#audience .audience-card ul {
margin: 0 0 24px !important;
}
#audience .audience-card.business h3 {
color: var(--rf-dark-title) !important;
}
#audience .audience-card.business :is(p,li) {
color: var(--rf-dark-body) !important;
}
#workflow .process-a-layout {
grid-template-columns: minmax(280px,.5fr) minmax(0,1.5fr) !important;
gap: 24px !important;
}
#workflow .process-detail-copy {
padding: 28px !important;
}
#workflow .process-detail-copy h3 {
margin: 0 0 12px !important;
}
#workflow .process-detail-copy>p {
margin: 0 !important;
max-width: 640px !important;
}
#workflow .process-detail-note {
margin-top: 24px !important;
padding-top: 24px !important;
}
#workflow .process-bottom-cta {
margin-top: 24px !important;
padding: 28px !important;
gap: 24px !important;
}
#workflow .process-step-copy strong {
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
}
#workflow .process-step-copy small {
font-size: 12px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
}
@media(min-width:769px) {
#workflow .process-step-copy small {
font-size: 13px !important;
letter-spacing: 0.08em !important;
}
}
#price .section-head {
margin-bottom: 40px !important;
}
#price .price-master-tabs {
gap: 12px !important;
}
#price .price-master-tabs button {
font-size: 16px !important;
font-weight: 600 !important;
min-height: 52px !important;
}
#price .service-showcase-v4 {
padding: 28px !important;
}
#price .service-v4-head {
margin: 0 0 40px !important;
max-width: 640px !important;
}
#price .service-v4-head .section-label {
margin-bottom: 12px !important;
}
#price .service-v4-head h3 {
margin: 0 0 16px !important;
}
#price .service-v4-head p {
margin: 0 !important;
}
#price .service-vertical-layout {
grid-template-columns: minmax(320px,.78fr) minmax(0,1.22fr) !important;
gap: 24px !important;
}
#price .service-showcase-v4 .service-vertical-menu {
gap: 12px !important;
}
#price .service-showcase-v4 .service-vertical-menu button {
min-height: 76px !important;
padding: 16px 20px !important;
font-size: 16px !important;
font-weight: 600 !important;
}
#price .service-menu-name strong,
#price .service-vertical-menu em {
font-size: 16px !important;
line-height: 1.4 !important;
}
#price .service-menu-name small {
font-size: 14px !important;
line-height: 1.6 !important;
}
#price .service-showcase-v4 .service-vertical-detail,
#price .service-showcase-v4 .service-vertical-panel {
min-height: 0 !important;
height: auto !important;
}
#price .service-showcase-v4 .service-vertical-panel {
padding: 28px !important;
}
#price .service-v4-copy h4 {
margin: 0 0 12px !important;
}
#price .service-v4-copy>p {
margin: 0 !important;
max-width: 640px !important;
}
#price .service-v4-bottom {
margin-top: 24px !important;
padding-top: 24px !important;
gap: 24px !important;
}
#why .strength-bento-layout {
gap: 40px !important;
}
#why .strength-bento-grid {
grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) !important;
grid-template-rows: auto auto !important;
gap: 24px !important;
min-height: 0 !important;
align-items: stretch !important;
}
#why .strength-bento-card {
height: auto !important;
min-height: 0 !important;
}
#why .strength-bento-card--main {
grid-row: 1 / span 2 !important;
align-self: center !important;
height: auto !important;
min-height: 0 !important;
}
#why .strength-bento-visual {
min-height: 144px !important;
padding: 20px !important;
}
#why .strength-bento-card--main .strength-bento-visual {
min-height: 180px !important;
padding: 20px !important;
}
#why .strength-bento-visual svg {
width: min(56%,140px) !important;
height: 88px !important;
}
#why .strength-bento-card--main .strength-bento-visual svg {
width: min(64%,176px) !important;
height: 128px !important;
}
#why .strength-bento-body {
padding: 28px !important;
}
#why .strength-bento-body h3 {
margin: 0 0 12px !important;
}
#why .strength-bento-body p {
margin: 0 !important;
}
#why .strength-bento-no {
font-size: 14px !important;
line-height: 1.6 !important;
}
#reviews .review-gallery-panel {
gap: 24px !important;
}
#reviews .review-feature-copy {
padding: 28px !important;
}
#reviews .review-feature blockquote {
margin: 24px 0 !important;
font-size: 18px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
letter-spacing: -.01em !important;
color: var(--rf-dark-title) !important;
}
@media(min-width:769px) {
#reviews .review-feature blockquote {
line-height: 1.6 !important;
letter-spacing: -0.02em !important;
}
}
#reviews .review-mini-grid {
gap: 24px !important;
}
#reviews .review-mini-card {
min-height: 0 !important;
height: auto !important;
padding: 28px !important;
}
#reviews .review-mini-card strong {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
}
#reviews .review-mini-card small {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
font-size: 14px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
#faq .faq-title {
margin-bottom: 40px !important;
}
#faq .faq button {
min-height: 52px;
padding: 20px 0 !important;
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
color: var(--rf-title) !important;
}
#faq .faq .answer {
padding: 0 0 24px !important;
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
color: var(--rf-body) !important;
}
@media(min-width:769px) {
#faq .faq .answer {
line-height: 1.6 !important;
}
}
#personalBg .form-modal,
#businessBg .form-modal {
width: min(860px,100%) !important;
padding: 28px !important;
color: var(--rf-body) !important;
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
}
@media(min-width:769px) {
#personalBg .form-modal,
#businessBg .form-modal {
line-height: 1.6 !important;
}
}
.modal-bg .booking-step-status {
display: block !important;
margin: 20px 0 12px !important;
color: var(--rf-title) !important;
font-size: 20px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -.03em !important;
}
@media(min-width:769px) {
.modal-bg .booking-step-status {
font-size: 22px !important;
letter-spacing: -0.04em !important;
}
}
.modal-bg .progress-labeled {
margin: 0 0 28px !important;
gap: 8px !important;
}
.modal-bg .progress-labeled span {
font-size: 12px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
}
@media(min-width:769px) {
.modal-bg .progress-labeled span {
font-size: 13px !important;
letter-spacing: 0.08em !important;
}
}
.modal-bg .form-modal h4 {
font-size: 22px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -.03em !important;
margin: 0 0 12px !important;
color: var(--rf-title) !important;
}
@media(min-width:769px) {
.modal-bg .form-modal h4 {
letter-spacing: -0.04em !important;
}
}
.modal-bg .modal-step-help {
margin: 0 0 24px !important;
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
color: var(--rf-body) !important;
}
@media(min-width:769px) {
.modal-bg .modal-step-help {
line-height: 1.6 !important;
}
}
.modal-bg .field {
margin-bottom: 16px !important;
}
.modal-bg .field label {
margin-bottom: 8px !important;
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
color: var(--rf-title) !important;
}
.modal-bg .field input,
.modal-bg .field select {
min-height: 56px !important;
padding: 0 20px !important;
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
}
@media(min-width:769px) {
.modal-bg .field input,
.modal-bg .field select {
line-height: 1.4 !important;
}
}
.modal-bg .field textarea {
min-height: 120px !important;
padding: 16px 20px !important;
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
}
@media(min-width:769px) {
.modal-bg .field textarea {
line-height: 1.6 !important;
}
}
.modal-bg .field-persistent-help,
.modal-bg .booking-preview-note {
font-size: 14px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
color: var(--rf-muted) !important;
}
.modal-bg .schedule-help,
.modal-bg .booking-scope p,
.modal-bg .personal-discount-status {
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
}
@media(min-width:769px) {
.modal-bg .schedule-help,
.modal-bg .booking-scope p,
.modal-bg .personal-discount-status {
line-height: 1.6 !important;
}
}
.modal-bg .personal-modal-qty {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 16px !important;
}
.modal-bg .personal-qty-row {
min-width: 0 !important;
padding: 20px !important;
gap: 16px !important;
}
.modal-bg .personal-qty-row>div:first-child {
min-width: 150px !important;
}
.modal-bg .qty-control {
gap: 12px !important;
}
.modal-bg .qty-control button {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
border-radius: 50% !important;
font-size: 20px !important;
font-weight: 600 !important;
}
@media(min-width:769px) {
.modal-bg .qty-control button {
font-size: 22px !important;
}
}
.modal-bg .qty-control strong {
min-width: 32px !important;
font-size: 18px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
color: var(--rf-title) !important;
}
.modal-bg .personal-qty-total,
.modal-bg .booking-selection-strip {
padding: 20px !important;
gap: 8px !important;
}
.modal-bg .personal-qty-total span,
.modal-bg .booking-selection-strip span {
font-size: 14px !important;
line-height: 1.6 !important;
}
.modal-bg .personal-qty-total strong,
.modal-bg .booking-selection-strip strong,
.modal-bg .personal-qty-total em,
.modal-bg .booking-selection-strip em {
font-size: 16px !important;
line-height: 1.6 !important;
}
.modal-bg .modal-actions {
margin-top: 24px !important;
gap: 12px !important;
}
.modal-bg .modal-actions button {
min-height: 52px !important;
padding: 12px 24px !important;
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
}
.modal-bg .modal-actions .next {
min-width: 160px !important;
}
#priceBusinessZone .biz-qty-builder {
gap: 16px !important;
}
#priceBusinessZone .biz-qty-row {
padding: 20px !important;
min-height: 72px !important;
}
#priceBusinessZone .qty-control {
gap: 12px !important;
}
#priceBusinessZone .qty-control button {
width: 48px !important;
height: 48px !important;
}
.event-popup {
width: min(440px,100%) !important;
}
.event-popup-inner {
padding: 28px !important;
}
.event-popup-kicker {
margin: 0 0 12px !important;
}
.event-popup h3 {
margin: 0 !important;
font-size: 22px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -.03em !important;
}
@media(min-width:769px) {
.event-popup h3 {
letter-spacing: -0.04em !important;
}
}
.event-popup-book {
min-height: 52px !important;
font-size: 16px !important;
font-weight: 600 !important;
}
.event-popup-hide {
font-size: 16px !important;
font-weight: 600 !important;
}
@media(max-width:768px) {
:root {
--rf-gutter: 20px;
--rf-section-y: 64px;
--rf-card-gap: 16px;
--rf-card-pad: 20px;
}
#heroSection h1 {
font-size: 36px !important;
}
main section h2 {
font-size: 28px !important;
}
main section :is(h3,h4) {
font-size: 20px !important;
}
main :is(.section-head>p,.process-heading>p,.review-gallery-head>p,.faq-title>p,.strength-bento-copy>p,.final-box .muted) {
font-size: 16px !important;
}
main .section-label {
margin-bottom: 8px !important;
}
main :is(.section-head,.process-heading,.review-gallery-head,.faq-title) {
margin-bottom: 28px !important;
}
main :is(.section-head,.process-heading,.review-gallery-head,.faq-title,.strength-bento-copy,.final-box) h2 {
margin-bottom: 12px !important;
}
main :is(.audience-grid,.review-mini-grid) {
gap: 16px !important;
}
#audience .audience-card,
#workflow .process-detail-copy,
#workflow .process-bottom-cta,
#price .service-showcase-v4,
#price .service-showcase-v4 .service-vertical-panel,
#why .strength-bento-body,
#reviews .review-feature-copy,
#reviews .review-mini-card {
padding: 20px !important;
}
#workflow .process-a-layout {
grid-template-columns: minmax(0,1fr) !important;
gap: 16px !important;
}
#price .service-vertical-layout {
grid-template-columns: minmax(0,1fr) !important;
gap: 16px !important;
}
#price .service-v4-head {
margin-bottom: 28px !important;
}
#price .service-showcase-v4 .service-vertical-menu {
gap: 8px !important;
}
#why .strength-bento-layout {
grid-template-columns: minmax(0,1fr) !important;
gap: 28px !important;
}
#why .strength-bento-grid {
grid-template-columns: minmax(0,1fr) !important;
grid-template-rows: auto !important;
gap: 16px !important;
}
#why .strength-bento-card--main {
grid-row: auto !important;
align-self: stretch !important;
}
#why .strength-bento-visual,
#why .strength-bento-card--main .strength-bento-visual {
min-height: 140px !important;
padding: 20px !important;
}
#reviews .review-mini-grid {
grid-template-columns: minmax(0,1fr) !important;
}
#reviews .review-feature {
grid-template-columns: minmax(0,1fr) !important;
}
#personalBg,
#businessBg {
padding: 12px !important;
}
#personalBg .form-modal,
#businessBg .form-modal {
padding: 20px !important;
max-height: calc(100dvh - 24px) !important;
}
.modal-bg .booking-step-status {
font-size: 18px !important;
margin: 16px 0 12px !important;
}
.modal-bg .form-modal h4 {
font-size: 20px !important;
}
.modal-bg .personal-modal-qty {
grid-template-columns: minmax(0,1fr) !important;
}
.modal-bg .personal-qty-row {
padding: 20px !important;
}
.modal-bg .modal-actions button {
flex: 1 1 0 !important;
}
.modal-bg .modal-actions .next {
min-width: 0 !important;
}
.event-popup-inner {
padding: 20px !important;
}
.event-popup h3 {
font-size: 20px !important;
}
}
@media (min-width:901px) {
#why .strength-bento-layout {
align-items: center !important;
gap: 40px !important;
}
#why .strength-bento-grid {
grid-template-columns: minmax(0,1.16fr) minmax(0,1fr) !important;
grid-template-rows: auto auto !important;
gap: 24px !important;
min-height: 0 !important;
align-items: start !important;
}
#why .strength-bento-card {
min-height: 0 !important;
height: auto !important;
}
#why .strength-bento-card--main {
grid-row: 1 / span 2 !important;
align-self: center !important;
min-height: 0 !important;
height: auto !important;
}
#why .strength-bento-card--main .strength-bento-visual {
min-height: 156px !important;
height: 156px !important;
padding: 16px 20px !important;
}
#why .strength-bento-card--main .strength-bento-visual svg {
width: min(62%,168px) !important;
height: 112px !important;
}
#why .strength-bento-card--main .strength-bento-body {
padding: 24px 28px 28px !important;
}
#why .strength-bento-card:not(.strength-bento-card--main) .strength-bento-visual {
min-height: 108px !important;
height: 108px !important;
padding: 14px 18px !important;
}
#why .strength-bento-card:not(.strength-bento-card--main) .strength-bento-visual svg {
width: min(48%,118px) !important;
height: 74px !important;
}
#why .strength-bento-card:not(.strength-bento-card--main) .strength-bento-body {
padding: 20px 24px 24px !important;
}
#why .strength-bento-body h3 {
margin: 0 0 12px !important;
}
#why .strength-bento-body p {
margin: 0 !important;
line-height: 1.75 !important;
}
@media(min-width:769px) {
#why .strength-bento-body p {
line-height: 1.6 !important;
}
}
}
@media (max-width:900px) {
#why .strength-bento-grid {
grid-template-columns: minmax(0,1fr) !important;
grid-template-rows: auto !important;
gap: 16px !important;
min-height: 0 !important;
}
#why .strength-bento-card--main {
grid-row: auto !important;
align-self: stretch !important;
}
#why .strength-bento-visual,
#why .strength-bento-card--main .strength-bento-visual {
min-height: 132px !important;
height: auto !important;
padding: 16px 20px !important;
}
#why .strength-bento-body,
#why .strength-bento-card--main .strength-bento-body {
padding: 20px !important;
}
}
#price .service-showcase-v4 .service-vertical-menu button.on em {
color: #F8FAFD !important;
font-weight: 700 !important;
}
#price .service-showcase-v4 .service-vertical-menu button.on .service-menu-name strong {
color: #F8FAFD !important;
}
#price .service-showcase-v4 .service-vertical-menu button.on .service-menu-name small {
color: #C5D0DE !important;
}
#eventPopupBg {
position: fixed !important;
inset: 0 !important;
z-index: 1200 !important;
padding: 8px !important;
place-items: center !important;
background: rgba(3,9,20,.62) !important;
backdrop-filter: blur(5px) !important;
}
#eventPopupBg .event-popup-text {
position: relative !important;
width: min(430px,calc(100vw - 16px)) !important;
height: auto !important;
min-height: 0 !important;
max-height: calc(100dvh - 16px) !important;
overflow: auto !important;
border-radius: 22px !important;
background: radial-gradient(circle at 50% -12%,rgba(70,105,210,.20),transparent 34%),
linear-gradient(180deg,#102640 0%,#102640 100%) !important;
border: 1px solid rgba(133,159,221,.22) !important;
box-shadow: 0 28px 90px rgba(1,7,20,.44) !important;
color: #F8FAFD !important;
}
#eventPopupBg .event-popup-text .event-popup-inner {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
box-sizing: border-box !important;
text-align: center !important;
}
#eventPopupBg .event-popup-text .event-popup-close {
position: absolute !important;
border-radius: 50% !important;
color: #C5D0DE !important;
line-height: 1 !important;
z-index: 2 !important;
}
#eventPopupBg .event-popup-text .event-popup-kicker {
display: flex !important;
width: max-content !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 12px !important;
padding: 6px 12px !important;
border: 1px solid rgba(127,166,255,.34) !important;
border-radius: 999px !important;
background: rgba(127,166,255,.10) !important;
color: #9BB8FF !important;
font-size: 12px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
}
@media(min-width:769px) {
#eventPopupBg .event-popup-text .event-popup-kicker {
font-size: 13px !important;
letter-spacing: 0.08em !important;
}
}
#eventPopupBg .event-popup-text h3 {
display: grid !important;
gap: 0 !important;
margin: 0 !important;
color: #F8FAFD !important;
font-size: 28px !important;
line-height: 1.28 !important;
font-weight: 800 !important;
letter-spacing: -.03em !important;
}
@media(min-width:769px) {
#eventPopupBg .event-popup-text h3 {
font-size: 32px !important;
line-height: 1.3 !important;
letter-spacing: -0.04em !important;
}
}
#eventPopupBg .event-popup-text h3 span {
color: #F8FAFD !important;
}
#eventPopupBg .event-popup-text h3 em {
color: #8FB3FF !important;
font-style: normal !important;
}
#eventPopupBg .event-popup-text .event-popup-offer {
margin: 18px 0 0 !important;
color: #F8FAFD !important;
font-size: 16px !important;
line-height: 1.65 !important;
font-weight: 600 !important;
letter-spacing: -.01em !important;
}
@media(min-width:769px) {
#eventPopupBg .event-popup-text .event-popup-offer {
line-height: 1.6 !important;
letter-spacing: -0.02em !important;
}
}
#eventPopupBg .event-popup-text .event-popup-offer strong {
color: #F8FAFD !important;
font-weight: 700 !important;
}
#eventPopupBg .event-popup-text .event-popup-offer b {
color: #7FA6FF !important;
font-size: 1.25em !important;
font-weight: 800 !important;
}
#eventPopupBg .event-popup-text .event-popup-desc {
margin: 12px 0 0 !important;
color: #A4B3C5 !important;
font-size: 14px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
letter-spacing: -.01em !important;
}
@media(min-width:769px) {
#eventPopupBg .event-popup-text .event-popup-desc {
line-height: 1.6 !important;
letter-spacing: -0.02em !important;
}
}
#eventPopupBg .event-popup-text .event-popup-benefits {
display: grid !important;
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
margin: 18px 0 16px !important;
padding: 14px 4px !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 16px !important;
background: rgba(255,255,255,.045) !important;
}
#eventPopupBg .event-popup-text .event-popup-benefit {
min-width: 0 !important;
padding: 0 8px !important;
}
#eventPopupBg .event-popup-text .event-popup-benefit + .event-popup-benefit {
border-left: 1px solid rgba(255,255,255,.10) !important;
}
#eventPopupBg .event-popup-text .event-popup-benefit strong {
display: block !important;
margin: 0 0 3px !important;
color: #7FA6FF !important;
font-size: 20px !important;
line-height: 1.4 !important;
font-weight: 800 !important;
letter-spacing: -.03em !important;
white-space: nowrap !important;
}
@media(min-width:769px) {
#eventPopupBg .event-popup-text .event-popup-benefit strong {
font-size: 22px !important;
letter-spacing: -0.04em !important;
}
}
#eventPopupBg .event-popup-text .event-popup-benefit span {
display: block !important;
color: #A4B3C5 !important;
font-weight: 400 !important;
}
#eventPopupBg .event-popup-text .event-popup-book {
width: 100% !important;
min-height: 50px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 14px !important;
background: linear-gradient(180deg,#3B78F4 0%,#2D68E5 100%) !important;
color: #fff !important;
box-shadow: 0 10px 26px rgba(39,101,225,.26) !important;
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -.01em !important;
}
@media(min-width:769px) {
#eventPopupBg .event-popup-text .event-popup-book {
letter-spacing: -0.02em !important;
}
}
#eventPopupBg .event-popup-text .event-popup-hide {
display: block !important;
width: max-content !important;
margin: 10px auto 0 !important;
padding: 2px 4px 0 !important;
border: 0 !important;
background: transparent !important;
color: #7F90A8 !important;
font-size: 13px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
#eventPopupBg .event-popup-text .event-popup-hide:hover {
color: #C5D0DE !important;
}
@media(max-width:520px) {
#eventPopupBg {
padding: 6px !important;
}
#eventPopupBg .event-popup-text {
width: min(100%,420px) !important;
max-height: calc(100dvh - 12px) !important;
}
#eventPopupBg .event-popup-text h3 {
font-size: 26px !important;
}
}
#faq .faq .answer[hidden] {
display: none !important;
}
#faq .faq.open .answer {
max-height: none !important;
}
#faq .faq.open>button {
color: #245bc7 !important;
background: #edf3ff;
border-radius: 8px;
}
#faq .faq button span {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px !important;
color: inherit !important;
}
#faq .faq button span::before,
#faq .faq button span::after {
content: none !important;
}
#price,
#workflow,
#reviews {
scroll-margin-top: 100px;
}
#personalBg #pDiscountStatus {
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 14px !important;
line-height: 1.6 !important;
white-space: normal !important;
word-break: keep-all;
overflow-wrap: anywhere;
}
#personalBg #pDiscountStatus::before {
content: none !important;
}
#personalBg #pDiscountStatus strong {
font-size: inherit !important;
line-height: inherit !important;
}
#personalBg .unknown-choice {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
height: auto !important;
margin: 0 0 8px !important;
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
border: 1px solid #dbe3ef !important;
border-radius: 12px !important;
background: #f6f8fc !important;
color: #3b4c60 !important;
cursor: pointer;
white-space: normal;
word-break: keep-all;
overflow-wrap: anywhere;
}
@media(min-width:769px) {
#personalBg .unknown-choice {
line-height: 1.4 !important;
}
}
#personalBg .unknown-choice #pUnknown {
width: 20px !important;
height: 20px !important;
min-height: 20px !important;
flex: 0 0 20px !important;
margin: 0 !important;
padding: 0 !important;
cursor: pointer;
}
#personalBg .unknown-choice:focus-within {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.note-chips button[data-note-target] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.note-chips button[data-note-target] .note-remove-icon {
display: none;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex: 0 0 16px;
border: 1px solid currentColor;
border-radius: 50%;
font-family: Arial,sans-serif;
font-size: 14px;
line-height: 1;
font-weight: 400;
pointer-events: none;
}
.note-chips button[data-note-target].note-added .note-remove-icon {
display: inline-flex;
}
:root {
--booking-header-height: 76px;
}
body {
padding-top: var(--booking-header-height) !important;
}
body>.header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 40 !important;
transform: none !important;
background: rgba(255,255,255,.98) !important;
}
body>.header .nav {
height: var(--booking-header-height) !important;
}
body>.header .header-actions {
display: flex !important;
align-items: center;
flex-shrink: 0;
gap: 8px;
}
body>.header .header-cta.personal-open {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 44px !important;
background: #2563eb !important;
border-color: #2563eb !important;
color: #fff !important;
white-space: nowrap;
}
main section[id] {
scroll-margin-top: calc(var(--booking-header-height) + 20px) !important;
}
@media(max-width:940px) {
:root {
--booking-header-height: 64px;
}
body>.header .nav {
gap: 12px !important;
}
body>.header .navlinks {
display: none !important;
}
body>.header .logo {
min-width: 0;
font-size: 18px !important;
white-space: nowrap;
}
body>.header .header-actions .business-open {
display: none !important;
}
body>.header .header-cta.personal-open {
padding: 8px 14px !important;
font-size: 16px !important;
}
}
@media(max-width:380px) {
body>.header .nav {
padding-inline: 16px !important;
}
}
body>.header .header-actions .header-cta.business-open {
background: #203e6b !important;
border-color: #203e6b !important;
color: #fff !important;
}
body>.header .header-actions .header-cta.business-open:hover {
background: #2b5085 !important;
border-color: #2b5085 !important;
}
#eventPopupBg section.event-popup.event-popup-text {
padding: 0 !important;
padding-block: 0 !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
}
#eventPopupBg .event-popup-text .event-popup-inner {
padding: 24px 20px 20px !important;
}
#eventPopupBg .event-popup-text .event-popup-kicker {
white-space: normal;
}
@media(max-width:520px) {
#eventPopupBg .event-popup-text .event-popup-inner {
padding: 24px 16px 16px !important;
}
}
#personalBg .booking-preview-note,
#businessBg .booking-preview-note {
margin: 8px 0 !important;
padding: 8px 12px !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
#personalBg .form-modal {
padding: 20px !important;
}
#personalBg .modal-top {
top: -20px !important;
}
#personalBg .booking-step-status {
font-size: 16px !important;
margin: 8px 0 !important;
}
#personalBg .personal-pane[data-step="1"]>h4 {
margin-bottom: 8px !important;
}
#personalBg .personal-qty-row {
padding: 10px 12px !important;
gap: 8px !important;
min-height: 64px !important;
flex-wrap: nowrap !important;
}
#personalBg .personal-qty-row>div:first-child {
min-width: 0 !important;
}
#personalBg .qty-control {
gap: 6px !important;
}
#personalBg #pDiscountStatus {
margin: 6px 0 12px !important;
}
#personalBg .booking-lower-help {
margin: 0;
}
#personalBg .booking-lower-help .unknown-choice {
margin: 0 !important;
}
#personalBg .booking-lower-help .unknown-help {
color: #3b4c60 !important;
}
#personalBg .booking-lower-help .booking-scope {
margin: 0 !important;
}
#personalBg .booking-lower-help .booking-scope summary {
padding: 8px 0;
min-height: 44px;
line-height: 1.6;
}
#personalBg .modal-actions {
margin-top: 12px !important;
bottom: -20px !important;
padding-top: 12px !important;
}
#personalBg .personal-qty-row {
padding-inline: 16px !important;
}
#personalBg .personal-qty-total {
padding-inline: 16px !important;
}
#personalBg #pDiscountStatus {
padding-inline: 16px !important;
}
#personalBg .booking-lower-help .unknown-choice {
font-size: 14px !important;
line-height: 1.6 !important;
height: auto !important;
gap: 10px !important;
}
#personalBg .booking-lower-help .unknown-help {
padding-inline: 16px !important;
margin: 10px 0 12px !important;
}
#personalBg .booking-lower-help .booking-scope {
padding-inline: 16px;
}
#personalBg .booking-lower-help .unknown-choice #pUnknown {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
flex: 0 0 16px !important;
margin: 0 !important;
}
#personalBg .qty-control button {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
flex: 0 0 44px !important;
padding: 0 !important;
border-radius: 50% !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
#eventPopupBg .event-popup-text .event-popup-benefit span {
font-size: 14px !important;
line-height: 1.6 !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
}
#eventPopupBg .event-popup-text .event-popup-close {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
top: 4px !important;
right: 4px !important;
display: flex !important;
align-items: center;
justify-content: center;
background: transparent !important;
border: 0 !important;
font-size: 15px !important;
}
@media(min-width:769px) {
#eventPopupBg .event-popup-text .event-popup-close {
font-size: 16px !important;
}
}
#eventPopupBg .event-popup-text .event-popup-close::before {
content: "";
position: absolute;
width: 32px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(255,255,255,.3);
border-radius: 50%;
background: rgba(255,255,255,.04);
pointer-events: none;
}
#eventPopupBg .event-popup-text .event-popup-close:hover::before {
background: rgba(255,255,255,.12);
}
#eventPopupBg .event-popup-text .event-popup-close:focus-visible {
outline: 2px solid #9bb8ff;
outline-offset: 1px;
}
#eventPopupBg .event-popup-text .event-popup-kicker {
max-width: calc(100% - 80px) !important;
}
:is(#personalBg,#businessBg).booking-page {
position: fixed !important;
inset: 0 !important;
z-index: 100 !important;
padding: 0 !important;
overflow-y: auto !important;
overflow-x: hidden;
overscroll-behavior: contain;
}
:is(#personalBg,#businessBg).booking-page.open {
display: block !important;
}
:is(#personalBg,#businessBg) .booking-page-shell {
margin: auto;
}
:is(#personalBg,#businessBg) .booking-page-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
color: #c5d0de;
font-size: 16px;
}
:is(#personalBg,#businessBg) .booking-page-nav button {
min-height: 44px;
padding: 10px 16px;
border: 1px solid #526784;
border-radius: 12px;
color: #f8fafd;
background: #17304b;
font-size: 14px;
line-height: 1.6;
}
:is(#personalBg,#businessBg) .booking-page-layout {
display: grid;
align-items: start;
}
:is(#personalBg,#businessBg) .booking-page-intro {
position: sticky;
top: 24px;
color: #c5d0de;
}
:is(#personalBg,#businessBg) .booking-page-eyebrow {
font-weight: 600;
color: #a6c5ff;
}
:is(#personalBg,#businessBg) .booking-page-intro h2 {
font-weight: 700;
color: #f8fafd;
word-break: keep-all;
}
:is(#personalBg,#businessBg) .booking-page-intro h2 em {
font-style: normal;
}
:is(#personalBg,#businessBg) .booking-page-description {
margin: 0 0 28px;
word-break: keep-all;
}
:is(#personalBg,#businessBg) .booking-page-contacts {
display: grid;
gap: 12px;
}
:is(#personalBg,#businessBg) .booking-page-contact {
width: 100%;
display: flex;
gap: 16px;
align-items: center;
text-align: left;
color: #f8fafd;
}
:is(#personalBg,#businessBg) .booking-page-contact[aria-disabled=true] {
opacity: 1;
cursor: default;
}
:is(#personalBg,#businessBg) .booking-page-contact>span:last-child {
display: grid;
gap: 4px;
min-width: 0;
}
:is(#personalBg,#businessBg) .booking-page-contact strong {
font-size: 16px;
line-height: 1.4;
font-weight: 600;
}
:is(#personalBg,#businessBg) .booking-page-contact b {
font-size: 16px;
line-height: 1.6;
font-weight: 400;
}
:is(#personalBg,#businessBg) .booking-page-contact small {
font-size: 14px;
line-height: 1.6;
color: #c5d0de;
}
:is(#personalBg,#businessBg) .booking-page-icon {
width: 24px;
height: 24px;
flex: 0 0 24px;
}
:is(#personalBg,#businessBg) .booking-page-icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
}
:is(#personalBg,#businessBg) .booking-contact-status {
font-size: 14px;
line-height: 1.6;
color: #c5d0de;
margin: 8px 0;
}
:is(#personalBg,#businessBg) .booking-contact-status:empty {
display: none;
}
:is(#personalBg,#businessBg) .booking-page-promises {
display: grid;
margin: 24px 0 0;
list-style: none;
font-size: 14px;
line-height: 1.6;
}
:is(#personalBg,#businessBg) .booking-page-promises li::before {
content: '✓';
margin-right: 10px;
color: #9bbdff;
}
:is(#personalBg,#businessBg).booking-page .form-modal {
width: 100% !important;
max-width: none !important;
min-width: 0;
max-height: none !important;
height: auto !important;
overflow: visible !important;
margin: 0 !important;
transform: none !important;
}
:is(#personalBg,#businessBg) .booking-page-offer {
margin: 0 0 20px;
}
:is(#personalBg,#businessBg) .booking-page-offer strong {
display: block;
}
:is(#personalBg,#businessBg) .booking-page-offer p {
margin: 8px 0 0;
word-break: keep-all;
}
:is(#personalBg,#businessBg).booking-page .modal-top {
position: static !important;
}
:is(#personalBg,#businessBg) .modal-top h3 {
line-height: 1.4 !important;
margin: 0;
}
:is(#personalBg,#businessBg) .modal-top .x {
width: 44px;
height: 44px;
}
:is(#personalBg,#businessBg).booking-page .modal-actions {
position: static !important;
padding: 16px 0 0 !important;
margin-top: 20px !important;
}
:is(#personalBg,#businessBg) .booking-page-nav button:focus-visible,
:is(#personalBg,#businessBg) .booking-page-contact:focus-visible {
outline: 3px solid #9bbdff;
outline-offset: 3px;
}
@media(max-width:1000px) {
:is(#personalBg,#businessBg) .personal-modal-qty {
grid-template-columns: minmax(0,1fr) !important;
}
}
@media(max-width:768px) {
:is(#personalBg,#businessBg) .booking-page-nav>span {
font-size: 14px;
}
:is(#personalBg,#businessBg) .booking-page-intro {
position: static;
}
:is(#personalBg,#businessBg) .booking-page-intro h2 br {
display: none;
}
:is(#personalBg,#businessBg) .booking-page-description,
:is(#personalBg,#businessBg) .booking-page-promises {
display: none;
}
:is(#personalBg,#businessBg) .booking-page-contacts {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 8px;
}
:is(#personalBg,#businessBg) .booking-page-contact {
gap: 8px;
}
:is(#personalBg,#businessBg) .booking-page-icon {
display: none;
}
:is(#personalBg,#businessBg) .booking-page-contact b {
font-size: 14px;
overflow-wrap: anywhere;
}
:is(#personalBg,#businessBg) .booking-page-contact[data-booking-contact=chat] b {
display: none;
}
:is(#personalBg,#businessBg) .booking-page-contact small {
font-size: 14px;
}
}
#businessBg .booking-step-status {
font-size: 16px !important;
margin: 12px 0 8px !important;
}
#businessBg .progress-labeled {
margin-bottom: 20px !important;
}
#businessBg .business-choice {
font-size: 16px;
line-height: 1.5;
}
@media(min-width:769px) {
#businessBg .business-choice {
line-height: 1.4;
}
}
#businessBg .form-modal h4 {
font-size: 22px !important;
line-height: 1.4 !important;
margin: 0 0 16px !important;
}
#businessBg .modal-actions button {
min-height: 48px;
font-size: 16px;
}
@media(max-width:768px) {
#businessBg .form-modal h4 {
font-size: 20px !important;
}
}
:is(#personalBg,#businessBg) .booking-page-nav {
margin-bottom: 24px;
}
:is(#personalBg,#businessBg) .booking-page-description {
font-size: 16px;
line-height: 1.75;
margin-bottom: 24px;
}
@media(min-width:769px) {
:is(#personalBg,#businessBg) .booking-page-description {
line-height: 1.6;
}
}
:is(#personalBg,#businessBg) .booking-page-contact {
min-height: 88px;
border-color: #486087;
}
:is(#personalBg,#businessBg) .booking-page-promises {
margin-top: 24px;
gap: 12px;
}
:is(#personalBg,#businessBg) .booking-page-offer {
margin-bottom: 20px;
}
:is(#personalBg,#businessBg) .booking-page-offer p {
font-size: 14px;
line-height: 1.6;
margin-top: 6px;
}
:is(#personalBg,#businessBg).booking-page .modal-top {
border: 0 !important;
margin: 0 0 8px !important;
padding: 0 !important;
}
:is(#personalBg,#businessBg) .modal-top h3 {
font-size: 22px !important;
}
:is(#personalBg,#businessBg) .booking-preview-note {
background: transparent !important;
margin: 0 0 16px !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
:is(#personalBg,#businessBg) .booking-step-status {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip-path: inset(50%);
white-space: nowrap;
margin: 0 !important;
}
:is(#personalBg,#businessBg) .progress-labeled {
counter-reset: bookingStep;
margin: 0 0 20px !important;
gap: 8px !important;
}
:is(#personalBg,#businessBg) .progress-step {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
counter-increment: bookingStep;
}
:is(#personalBg,#businessBg) .progress-step i {
width: 100% !important;
height: 2px !important;
background: #dfe6ef !important;
margin: 14px 0 12px !important;
border-radius: 0;
}
:is(#personalBg,#businessBg) .progress-step i::before {
content: counter(bookingStep);
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #edf1f7;
color: #60738b;
font-size: 14px;
font-weight: 600;
font-style: normal;
}
:is(#personalBg,#businessBg) .progress-step i.on {
background: #a8c1f6 !important;
}
:is(#personalBg,#businessBg) .progress-step i.on::before {
background: #2563eb;
color: #fff;
}
:is(#personalBg,#businessBg) .progress-step span {
display: block !important;
font-size: 14px !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
color: #3b4c60;
}
:is(#personalBg,#businessBg) .progress-step.current span {
color: #245bc7;
font-weight: 600 !important;
}
:is(#personalBg,#businessBg) .form-modal h4 {
font-size: 16px !important;
line-height: 1.5 !important;
margin: 0 0 12px !important;
}
@media(min-width:769px) {
:is(#personalBg,#businessBg) .form-modal h4 {
line-height: 1.4 !important;
}
}
#personalBg .personal-modal-qty {
grid-template-columns: minmax(0,1fr) !important;
gap: 8px !important;
}
#personalBg .personal-modal-qty .personal-qty-row {
width: 100% !important;
grid-column: auto !important;
min-height: 60px !important;
padding: 8px 12px !important;
border: 1px solid #dce5f0 !important;
border-radius: 12px !important;
background: #fafcff;
box-shadow: none !important;
gap: 12px !important;
}
#personalBg .personal-modal-qty .personal-qty-row.is-selected {
background: #f0f5ff !important;
border-color: #7ca5ee !important;
}
#personalBg .personal-qty-row>div:first-child {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 12px !important;
}
#personalBg .personal-qty-row b {
font-size: 16px !important;
line-height: 1.5 !important;
}
@media(min-width:769px) {
#personalBg .personal-qty-row b {
line-height: 1.4 !important;
}
}
#personalBg .personal-qty-row small {
font-size: 14px !important;
line-height: 1.5 !important;
}
@media(min-width:769px) {
#personalBg .personal-qty-row small {
line-height: 1.4 !important;
}
}
#personalBg .qty-control strong {
font-size: 16px !important;
min-width: 24px !important;
}
#personalBg .qty-control button {
font-size: 20px !important;
border-color: #d6e0ed !important;
background: #fff;
}
@media(min-width:769px) {
#personalBg .qty-control button {
font-size: 22px !important;
}
}
#personalBg .personal-qty-total {
margin-top: 16px !important;
border: 1px solid #dce5f0 !important;
border-radius: 12px !important;
}
#personalBg .personal-qty-total span {
font-size: 14px !important;
color: #3b4c60 !important;
font-weight: 400 !important;
}
#personalBg .personal-qty-total strong {
font-size: 14px !important;
color: #203e6b !important;
font-weight: 600 !important;
}
#personalBg .personal-qty-total em {
font-size: 18px !important;
line-height: 1.5 !important;
color: #245bc7 !important;
font-weight: 700 !important;
}
@media(min-width:769px) {
#personalBg .personal-qty-total em {
line-height: 1.4 !important;
}
}
#personalBg .booking-lower-help .unknown-choice {
border-color: #dce5f0 !important;
border-radius: 12px !important;
}
#personalBg .booking-scope summary {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
}
#businessBg .choice-grid {
grid-template-columns: minmax(0,1fr) !important;
gap: 8px !important;
}
#businessBg .business-choice {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
padding: 16px !important;
border-radius: 12px !important;
min-height: 60px !important;
background: #fafcff;
border: 1px solid #dce5f0;
text-align: left;
}
#businessBg .business-choice br {
display: none;
}
#businessBg .business-choice b {
font-size: 16px;
}
#businessBg .business-choice .muted {
font-size: 14px;
color: #3b4c60;
}
#businessBg .business-choice.selected {
background: #f0f5ff !important;
border-color: #7ca5ee !important;
}
#businessBg .business-modal-qty label {
border-radius: 12px;
padding: 12px 16px;
}
:is(#personalBg,#businessBg) .modal-actions {
gap: 12px !important;
}
:is(#personalBg,#businessBg) .modal-actions .next {
flex: 1 !important;
border-radius: 12px !important;
min-height: 48px !important;
font-size: 16px !important;
}
:is(#personalBg,#businessBg) .modal-actions>button:first-child {
border-radius: 12px !important;
min-height: 48px !important;
}
:is(#personalBg,#businessBg) .modal-actions>button:first-child[style*="hidden"] {
display: none !important;
}
@media(max-width:768px) {
:is(#personalBg,#businessBg) .booking-page-intro {
padding: 0;
}
:is(#personalBg,#businessBg) .booking-page-contact {
min-height: 76px;
}
#personalBg .personal-qty-row>div:first-child {
display: grid;
gap: 2px !important;
}
}
#personalBg .model-chevron {
margin-left: auto;
font-size: 16px;
line-height: 1;
color: #60738b;
transition: transform .15s;
}
:is(#personalBg,#businessBg) .booking-page-offer {
box-shadow: none !important;
}
:is(#personalBg,#businessBg) .booking-page-offer strong {
line-height: 1.5 !important;
}
@media(min-width:769px) {
:is(#personalBg,#businessBg) .booking-page-offer strong {
line-height: 1.4 !important;
}
}
#personalBg .personal-qty-total {
padding: 16px !important;
background: #f6f8fb !important;
border-color: #dce4ee !important;
gap: 8px !important;
}
#personalBg .personal-qty-total #pEstimatedPreview {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 16px;
font-size: 16px !important;
line-height: 1.5 !important;
color: #203e6b !important;
font-weight: 400 !important;
font-style: normal;
}
@media(min-width:769px) {
#personalBg .personal-qty-total #pEstimatedPreview {
line-height: 1.4 !important;
}
}
#personalBg #pEstimatedPreview>span {
font-size: 14px !important;
color: #3b4c60 !important;
}
#personalBg #pEstimatedPreview .final-quote-amount {
font-size: 22px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
color: #245bc7 !important;
}
#personalBg #pDiscountStatus,
#personalBg #pDiscountStatus strong {
color: #3b4c60 !important;
font-weight: 400 !important;
}
@media(max-width:768px) {
#personalBg .model-chevron {
display: none;
}
#personalBg #pEstimatedPreview .final-quote-amount {
font-size: 20px !important;
}
}
@media(max-width:380px) {
#personalBg .model-chevron {
display: block;
}
}
:is(#personalBg,#businessBg).booking-page {
background: radial-gradient(ellipse at 0 0,#203e69 0,transparent 55%),#102640 !important;
}
:is(#personalBg,#businessBg) .booking-page-shell {
max-width: 1160px;
padding: 28px 32px 56px;
}
:is(#personalBg,#businessBg) .booking-page-layout {
grid-template-columns: minmax(0,34fr) minmax(0,66fr);
gap: 48px;
}
:is(#personalBg,#businessBg) .booking-page-intro {
padding-top: 8px;
}
:is(#personalBg,#businessBg) .booking-page-eyebrow {
display: inline-block;
padding: 6px 10px;
border: 1px solid #536b8c;
border-radius: 8px;
letter-spacing: .02em;
font-size: 14px;
}
@media(min-width:769px) {
:is(#personalBg,#businessBg) .booking-page-eyebrow {
letter-spacing: 0.08em;
}
}
:is(#personalBg,#businessBg) .booking-page-intro h2 {
font-size: 34px;
line-height: 1.4;
letter-spacing: -.03em;
margin: 20px 0 16px;
}
@media(min-width:769px) {
:is(#personalBg,#businessBg) .booking-page-intro h2 {
font-size: 32px;
letter-spacing: -0.04em;
}
}
:is(#personalBg,#businessBg) .booking-page-intro h2 em {
color: #9edcd5;
}
:is(#personalBg,#businessBg) .booking-page-contact {
background: rgba(255,255,255,.055);
border: 1px solid #48617f;
padding: 18px;
}
:is(#personalBg,#businessBg) .booking-page-promises {
background: transparent;
border: 0;
border-top: 1px solid #48617f;
border-radius: 0;
padding: 24px 0;
}
:is(#personalBg,#businessBg).booking-page .form-modal {
padding: 28px !important;
border-radius: 24px !important;
border: 1px solid rgba(255,255,255,.7);
}
:is(#personalBg,#businessBg) .booking-page-offer {
background: #eef7f6 !important;
color: #225f5b !important;
border: 1px solid #cce4df !important;
border-radius: 12px !important;
padding: 14px 16px !important;
}
:is(#personalBg,#businessBg) .booking-page-offer strong {
color: #225f5b;
font-size: 16px !important;
}
:is(#personalBg,#businessBg) .booking-page-offer p {
color: #4d6e6b !important;
}
#personalBg .catalog-instruction {
font-size: 14px;
line-height: 1.6;
color: #4a5b70;
}
#personalBg .personal-modal-qty.catalog-list {
display: grid;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#personalBg .catalog-list .personal-qty-row.catalog-item {
display: block !important;
width: 100% !important;
padding: 0 !important;
border: 1px solid #dce5ef !important;
background: #fff !important;
overflow: hidden;
min-height: 0 !important;
}
#personalBg .catalog-list .catalog-item:has(.catalog-toggle[aria-expanded=true]) {
background: #f7faff !important;
}
#personalBg .catalog-toggle {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
min-height: 52px;
padding: 12px 16px;
background: transparent;
border: 0;
text-align: left;
color: #203e6b;
cursor: pointer;
}
#personalBg .catalog-toggle:focus-visible {
outline: 2px solid #2563eb;
outline-offset: -3px;
border-radius: 10px;
}
#personalBg .catalog-toggle[aria-expanded=true] {
border-bottom: 1px solid #dce5ef;
}
#personalBg .catalog-chevron {
margin-left: auto;
color: #6d85a0;
line-height: 1;
}
#personalBg .is-selected .catalog-chevron {
margin-left: 4px;
}
#personalBg .catalog-detail {
display: grid;
align-items: center;
}
#personalBg .catalog-product {
min-width: 0;
}
#personalBg .catalog-product h5 {
margin: 0 0 8px;
font-size: 20px;
line-height: 1.4;
font-weight: 600;
color: #203e6b;
}
@media(min-width:769px) {
#personalBg .catalog-product h5 {
font-size: 22px;
}
}
#personalBg .catalog-product>small {
display: block;
margin: 4px 0 12px;
font-size: 14px;
line-height: 1.6;
color: #4a5b70;
}
#personalBg .selection-tray-heading {
display: flex;
align-items: center;
}
#personalBg .selection-tray-heading h4 {
margin: 0 !important;
color: #203e6b;
}
#personalBg .selection-tray .personal-qty-total {
background: transparent !important;
}
#personalBg .selection-tray .personal-qty-total>span,
#personalBg .selection-tray #pEquipmentPreview {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
#personalBg .selection-tray #pDiscountStatus {
padding: 0 !important;
margin: 8px 0 0 !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
#personalBg .booking-lower-help .unknown-help {
font-size: 14px !important;
}
@media(max-width:1000px) {
:is(#personalBg,#businessBg) .booking-page-layout {
grid-template-columns: minmax(0,30fr) minmax(0,70fr);
gap: 24px;
}
:is(#personalBg,#businessBg) .booking-page-intro h2 {
font-size: 28px;
}
}
@media(max-width:768px) {
:is(#personalBg,#businessBg) .booking-page-shell {
padding: 16px 12px 32px;
}
:is(#personalBg,#businessBg) .booking-page-layout {
grid-template-columns: 1fr;
gap: 20px;
}
:is(#personalBg,#businessBg).booking-page .form-modal {
padding: 20px 16px !important;
}
#personalBg .catalog-product h5 {
font-size: 18px;
}
}
:is(#personalBg,#businessBg) .booking-page-offer strong {
font-weight: 400 !important;
}
:is(#personalBg,#businessBg) .booking-page-offer strong b {
font-weight: 700;
}
#personalBg .catalog-chevron {
font-size: 0;
width: 9px;
height: 9px;
flex: 0 0 9px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
margin-top: -4px;
}
#personalBg .catalog-toggle[aria-expanded=true] .catalog-chevron {
transform: rotate(225deg);
margin-top: 4px;
}
#personalBg .selection-tray #pDiscountStatus strong {
font-weight: 700 !important;
color: #225f5b !important;
}
#personalBg .selection-tray #pDiscountStatus {
color: #4d6e6b !important;
}
#personalBg .booking-lower-help .unknown-help {
line-height: 1.7 !important;
margin-top: 8px !important;
}
@media(min-width:769px) {
#personalBg .booking-lower-help .unknown-help {
line-height: 1.6 !important;
}
}
@media(max-width:460px) {
#personalBg .catalog-product h5 {
font-size: 18px;
}
}
#personalBg .direct-qty-heading {
display: flex;
align-items: center;
}
#personalBg .direct-qty-heading .catalog-toggle {
min-width: 0;
flex: 1;
min-height: 44px;
padding: 0;
border: 0;
background: transparent;
}
#personalBg .direct-type-copy {
display: grid;
gap: 3px;
}
#personalBg .direct-qty-control {
display: flex;
align-items: center;
flex: 0 0 auto;
gap: 0 !important;
margin: 0 !important;
}
#personalBg .direct-qty-control button {
flex: 0 0 44px !important;
color: #203e6b;
}
#personalBg .direct-qty-control button:disabled {
opacity: .4;
cursor: not-allowed;
}
#personalBg .direct-qty-control strong {
text-align: center;
font-size: 16px !important;
}
#personalBg .direct-qty-control button:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
#personalBg .catalog-product p {
margin: 0;
}
#personalBg #pTotalCount {
font-size: 16px;
color: #203e6b;
font-weight: 600;
}
#personalBg .selection-tray .personal-qty-total {
border-top: 1px solid #dce4ed !important;
}
#personalBg .direct-type-copy {
grid-template-columns: minmax(0,1fr) 8px;
align-items: center;
}
#personalBg .direct-type-copy .catalog-name {
grid-column: 1;
grid-row: 1;
}
#personalBg .direct-type-copy .direct-unit {
grid-column: 1;
grid-row: 2;
}
#personalBg .direct-type-copy .catalog-chevron {
grid-column: 2;
grid-row: 1;
margin: 0;
width: 6px;
height: 6px;
}
#personalBg .catalog-instruction {
margin: 0 0 12px;
}
#personalBg .progress-labeled {
margin-bottom: 16px !important;
}
#personalBg .selection-tray {
display: grid;
grid-template-columns: auto minmax(0,1fr);
column-gap: 16px;
margin-top: 16px;
padding: 14px 16px;
}
#personalBg .selection-tray-heading {
gap: 8px;
justify-content: flex-start;
}
#personalBg .selection-tray-heading h4 {
font-size: 14px !important;
font-weight: 400;
}
#personalBg .selection-tray .personal-qty-total {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
#personalBg .selection-tray #pEstimatedPreview {
justify-content: flex-end;
gap: 6px 10px;
}
#personalBg .selection-tray #pEstimatedPreview .final-quote-amount {
font-size: 22px !important;
}
#personalBg #pDiscountStatus,
#personalBg .compact-discount-condition {
grid-column: 1/-1;
}
#personalBg .compact-discount-condition {
font-size: 14px;
line-height: 1.6;
color: #3b4c60;
margin: 4px 0 0;
}
#personalBg .booking-lower-help {
margin-top: 12px;
}
#personalBg .unknown-choice {
min-height: 44px !important;
padding: 8px 14px !important;
}
#personalBg .compact-memo {
margin-top: 16px;
}
#personalBg .compact-memo summary {
min-height: 44px;
cursor: pointer;
font-size: 16px;
line-height: 1.5;
padding: 10px 0;
color: #203e6b;
font-weight: 600;
}
@media(min-width:769px) {
#personalBg .compact-memo summary {
line-height: 1.4;
}
}
#personalBg .compact-memo summary span {
font-size: 14px;
font-weight: 400;
color: #3b4c60;
margin-left: 6px;
}
#personalBg .compact-memo textarea {
min-height: 88px;
}
#personalBg .compact-preview-note {
font-size: 14px;
color: #3b4c60;
line-height: 1.6;
margin: 12px 0;
}
#personalBg #pSelectionStrip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 12px;
padding: 12px 14px;
margin-bottom: 16px;
}
#personalBg #pSelectionStripText {
font-size: 14px;
flex: 1;
}
#personalBg #pSelectionStripPrice {
font-size: 14px;
font-style: normal;
}
#personalBg .compact-edit {
order: 3;
min-height: 44px;
padding: 6px 10px;
border: 1px solid #ccd8e8;
border-radius: 8px;
background: #fff;
color: #245bc7;
font: inherit;
font-size: 14px;
cursor: pointer;
}
@media(max-width:768px) {
#personalBg .booking-page-intro h2 {
font-size: 22px;
line-height: 1.35;
margin: 0 0 12px;
}
#personalBg .booking-page-intro .booking-page-eyebrow {
display: none;
}
#personalBg .booking-page-contacts {
gap: 8px;
}
#personalBg .booking-page-contact {
min-height: 44px;
padding: 8px 12px;
border-radius: 8px;
}
#personalBg .booking-page-contact b,
#personalBg .booking-page-contact small {
display: none;
}
#personalBg .booking-page-contact strong {
font-size: 14px;
}
#personalBg .booking-page-layout {
gap: 16px;
}
#personalBg .booking-page-nav {
margin-bottom: 12px;
}
}
@media(max-width:440px) {
#personalBg .selection-tray {
column-gap: 8px;
}
#personalBg .selection-tray-heading {
flex-wrap: wrap;
gap: 2px 6px;
}
#personalBg .selection-tray-heading h4 {
flex-basis: 100%;
}
#personalBg .selection-tray #pEstimatedPreview {
flex-wrap: wrap;
}
}
#personalBg .booking-side-discount {
margin: 0 0 24px;
padding: 4px 0 4px 14px;
border-left: 3px solid #9edcd5;
color: #dcf2ef;
}
#personalBg .booking-side-discount p {
margin: 0;
font-size: 16px;
line-height: 1.6;
font-weight: 400;
word-break: keep-all;
}
#personalBg .booking-side-discount strong {
color: #a6e7dc;
font-weight: 700;
}
#personalBg .booking-side-discount small {
display: block;
margin-top: 4px;
font-size: 14px;
line-height: 1.6;
color: #c5d0de;
}
@media(max-width:768px) {
#personalBg .booking-side-discount {
display: none;
}
}
:is(#personalBg,#businessBg).booking-page .form-modal {
box-shadow: 0 12px 36px rgba(5,20,45,.12) !important;
}
#personalBg .catalog-list {
gap: 8px !important;
}
#personalBg .catalog-list .personal-qty-row.catalog-item {
border-color: #dde3eb !important;
border-radius: 12px !important;
transition: border-color .15s,background-color .15s;
}
#personalBg .catalog-list .catalog-item.is-selected {
border-color: #83a9e4 !important;
background: #f4f8ff !important;
}
#personalBg .catalog-list .catalog-item:has(.catalog-toggle[aria-expanded=true]) {
border-color: #2563eb !important;
}
#personalBg .direct-qty-heading {
padding: 12px 16px;
gap: 12px;
}
#personalBg .direct-type-copy {
row-gap: 2px;
column-gap: 12px;
}
#personalBg .catalog-name {
font-size: 16px;
font-weight: 600 !important;
letter-spacing: -.02em;
color: #17304b;
line-height: 1.5;
}
@media(min-width:769px) {
#personalBg .catalog-name {
letter-spacing: -0.02em;
line-height: 1.4;
}
}
#personalBg .direct-unit {
font-size: 14px;
font-weight: 400;
color: #3b4c60;
font-variant-numeric: tabular-nums;
line-height: 1.5;
}
@media(min-width:769px) {
#personalBg .direct-unit {
line-height: 1.4;
}
}
#personalBg .catalog-toggle {
font-family: inherit;
}
#personalBg .catalog-toggle:hover .catalog-name {
color: #245bc7;
}
#personalBg .catalog-list .is-selected .catalog-name {
color: #245bc7;
}
#personalBg .direct-qty-control {
border: 1px solid #dae2ed;
overflow: visible;
}
#personalBg .direct-qty-control button {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
border: 0 !important;
background: transparent !important;
font-size: 20px !important;
}
@media(min-width:769px) {
#personalBg .direct-qty-control button {
font-size: 22px !important;
}
}
#personalBg .direct-qty-control button:not(:disabled):hover {
background: #edf3ff !important;
}
#personalBg .direct-qty-control strong {
min-width: 28px !important;
width: 28px;
line-height: 1.5;
font-weight: 600 !important;
}
@media(min-width:769px) {
#personalBg .direct-qty-control strong {
line-height: 1.4;
}
}
#personalBg .catalog-detail {
grid-template-columns: minmax(0,40fr) minmax(0,60fr);
padding: 12px 16px;
gap: 16px;
}
#personalBg .catalog-model svg {
display: block;
width: 100%;
height: 104px;
}
#personalBg .model-caption {
display: block;
font-size: 14px;
line-height: 1.5;
color: #3b4c60;
margin-bottom: 4px;
}
@media(min-width:769px) {
#personalBg .model-caption {
line-height: 1.4;
}
}
#personalBg .catalog-product p {
font-size: 14px !important;
line-height: 1.65;
color: #17304b;
word-break: keep-all;
}
@media(min-width:769px) {
#personalBg .catalog-product p {
line-height: 1.6;
}
}
#personalBg #pEstimatedPreview .final-quote-amount {
font-variant-numeric: tabular-nums;
letter-spacing: -.025em;
}
@media(min-width:769px) {
#personalBg #pEstimatedPreview .final-quote-amount {
letter-spacing: -0.02em;
}
}
#personalBg .booking-lower-help .unknown-choice {
border: 0 !important;
background: transparent !important;
padding: 8px 0 !important;
min-height: 44px !important;
}
#personalBg .booking-lower-help .unknown-help {
padding-left: 0 !important;
}
#personalBg .booking-lower-help .booking-scope {
padding: 0 !important;
border: 0;
border-top: 1px solid #e4e9f0;
margin-top: 4px !important;
}
#personalBg .booking-facts {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.65;
color: #3b4c60;
}
@media(min-width:769px) {
#personalBg .booking-facts {
line-height: 1.6;
}
}
#personalBg .booking-facts>div {
display: grid;
grid-template-columns: 72px minmax(0,1fr);
gap: 12px;
padding: 8px 0;
}
#personalBg .booking-facts dt {
font-weight: 600;
color: #17304b;
}
#personalBg .booking-facts dd {
margin: 0;
word-break: keep-all;
}
:is(#personalBg,#businessBg) .modal-actions .next {
box-shadow: none !important;
background: #2563eb !important;
}
:is(#personalBg,#businessBg) .modal-actions .next:hover {
background: #1958cd !important;
}
@media(max-width:460px) {
#personalBg .direct-qty-heading {
padding: 10px 12px;
gap: 8px;
}
#personalBg .catalog-detail {
grid-template-columns: 104px minmax(0,1fr);
padding: 12px;
gap: 12px;
}
#personalBg .catalog-model svg {
height: 88px;
}
#personalBg .catalog-name {
font-size: 15px;
}
}
@media(max-width:340px) {
#personalBg .catalog-detail {
grid-template-columns: 1fr;
}
#personalBg .direct-qty-heading {
padding: 10px 8px;
gap: 4px;
}
#personalBg .direct-type-copy {
column-gap: 6px;
}
}
@media(prefers-reduced-motion:reduce) {
#personalBg .catalog-list .catalog-item {
transition: none !important;
}
}
#personalBg .catalog-list .personal-qty-row.catalog-item:has(.catalog-toggle[aria-expanded=true]) {
border-color: #dde3eb !important;
background: #fff !important;
}
#personalBg .catalog-list .personal-qty-row.catalog-item.is-selected,
#personalBg .catalog-list .personal-qty-row.catalog-item.is-selected:has(.catalog-toggle[aria-expanded=true]) {
border-color: #9dbce9 !important;
background: #f2f7ff !important;
}
#personalBg .catalog-name {
display: flex;
align-items: center;
gap: 8px;
}
#personalBg .quantity-selection-mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
width: 18px;
height: 18px;
border: 1px solid #ccd6e3;
border-radius: 50%;
background: transparent;
}
#personalBg .quantity-selection-mark svg {
width: 16px;
height: 16px;
stroke: #fff;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
}
#personalBg .is-selected .quantity-selection-mark {
border-color: #2563eb;
background: #2563eb;
}
#personalBg .is-selected .quantity-selection-mark svg {
opacity: 1;
}
#personalBg .direct-unit {
padding-left: 26px;
}
#personalBg .direct-type-copy .catalog-chevron {
border-width: 0 1.75px 1.75px 0;
transition: transform .15s ease;
}
#personalBg .catalog-toggle[aria-expanded=true] {
background: transparent !important;
}
#personalBg .catalog-detail {
border-top: 0;
background: #f6f8fb;
border-radius: 0 0 11px 11px;
}
#personalBg .selection-tray {
border: 0;
background: #f3f6fa;
border-radius: 12px;
}
#personalBg .direct-qty-control {
border-color: transparent;
background: #edf2f8;
border-radius: 8px;
}
#personalBg .direct-qty-control button {
border-radius: 8px !important;
transition: background-color .15s ease,color .15s ease;
}
#personalBg .direct-qty-control strong {
font-variant-numeric: tabular-nums;
color: #17304b;
}
#personalBg .selection-tray #pEstimatedPreview {
font-variant-numeric: tabular-nums;
}
#personalBg .selection-tray #pEstimatedPreview .final-quote-amount {
text-align: right;
min-width: 7ch;
}
:is(#personalBg,#businessBg) .booking-page-contact {
border-radius: 12px;
transition: background-color .15s ease;
}
:is(#personalBg,#businessBg) .booking-page-contact:hover {
background: rgba(255,255,255,.10);
}
:is(#personalBg,#businessBg) .booking-page-icon svg {
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
:is(#personalBg,#businessBg) .booking-close-icon {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
}
:is(#personalBg,#businessBg) .modal-top .x {
display: grid;
place-items: center;
min-width: 44px;
min-height: 44px;
border-radius: 8px;
}
:is(#personalBg,#businessBg) .modal-top .x:hover {
background: #edf2f8;
}
:is(#personalBg,#businessBg) .modal-actions button {
border-radius: 8px !important;
transition: background-color .15s ease;
}
:is(#personalBg,#businessBg) button:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
@media(max-width:380px) {
#personalBg .direct-type-copy {
column-gap: 5px;
}
#personalBg .catalog-name {
gap: 5px;
font-size: 14px;
}
#personalBg .direct-unit {
padding-left: 23px;
}
}
@media(prefers-reduced-motion:reduce) {
#personalBg .catalog-chevron,
#personalBg .direct-qty-control button,
:is(#personalBg,#businessBg) .booking-page-contact,
:is(#personalBg,#businessBg) .modal-actions button {
transition: none !important;
}
}
#personalBg .direct-qty-heading .catalog-toggle {
display: block;
}
#personalBg .direct-qty-heading .direct-type-copy {
display: grid;
width: 100%;
column-gap: 12px;
}
#personalBg .direct-qty-heading .direct-type-copy .catalog-chevron {
justify-self: center;
align-self: center;
margin: 0 !important;
grid-column: 2;
grid-row: 1;
width: 6px;
height: 6px;
}
#personalBg .direct-qty-heading .catalog-name {
min-width: 0;
}
@media(max-width:380px) {
#personalBg .direct-qty-heading .direct-type-copy {
column-gap: 6px;
}
}
#personalBg .direct-qty-heading .direct-type-copy {
grid-template-columns: minmax(0,1fr);
row-gap: 2px;
}
#personalBg .direct-qty-heading .model-explanation-link {
grid-column: 1;
grid-row: 3;
display: flex;
align-items: center;
gap: 8px;
padding-left: 26px;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #3b4c60;
}
@media(min-width:769px) {
#personalBg .direct-qty-heading .model-explanation-link {
line-height: 1.4;
}
}
#personalBg .direct-qty-heading .model-explanation-link .catalog-chevron {
display: block;
flex: 0 0 6px;
grid-column: auto;
grid-row: auto;
margin: 0 !important;
}
#personalBg .catalog-toggle:hover .model-explanation-link {
color: #245bc7;
}
@media(max-width:380px) {
#personalBg .direct-qty-heading .model-explanation-link {
padding-left: 23px;
}
}
#workGuide {
background: #102640;
padding: 48px 0;
scroll-margin-top: 90px;
}
#workGuide>.container {
margin-bottom: 24px;
}
#workGuide>section {
padding: 0 !important;
background: transparent !important;
scroll-margin-top: 150px;
}
#workGuide>[hidden] {
display: none !important;
}
#workGuide .work-guide-tabs {
display: inline-flex;
gap: 4px;
padding: 4px;
border: 1px solid #364760;
border-radius: 12px;
background: #102640;
}
#workGuide .work-guide-tabs button {
min-height: 44px;
min-width: 116px;
padding: 10px 20px;
border: 0;
border-radius: 8px;
background: transparent;
color: #c6d2e2;
font: inherit;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
#workGuide .work-guide-tabs button[aria-selected=true] {
background: #2563eb;
color: #fff;
}
#workGuide .work-guide-tabs button:hover:not([aria-selected=true]) {
background: #17304b;
color: #fff;
}
#workGuide .work-guide-tabs button:focus-visible {
outline: 2px solid #a6c5ff;
outline-offset: 3px;
}
#workGuide #why .strength-bento-layout {
min-height: 0;
}
@media(max-width:768px) {
#workGuide {
padding: 32px 0;
}
#workGuide>.container {
margin-bottom: 20px;
}
#workGuide .work-guide-tabs {
display: flex;
}
#workGuide .work-guide-tabs button {
flex: 1;
min-width: 0;
}
}
#workGuide>section#why {
padding: 32px 0 48px !important;
}
#workGuide #why .strength-bento-grid {
gap: 28px !important;
}
#workGuide #why .strength-bento-card .strength-bento-body {
padding: 30px 28px 34px !important;
}
#workGuide #why .strength-bento-no {
display: block;
margin-bottom: 14px;
}
#workGuide #why .strength-bento-body h3 {
margin-bottom: 14px !important;
}
#workGuide #why .strength-bento-card:not(.strength-bento-card--main) .strength-bento-visual {
height: 150px !important;
min-height: 150px !important;
padding: 0 !important;
}
#workGuide #why .strength-bento-card--main .strength-bento-visual {
height: 200px !important;
min-height: 200px !important;
padding: 0 !important;
}
@media(max-width:900px) {
#workGuide>section#why {
padding: 20px 0 28px !important;
}
#workGuide #why .strength-bento-grid {
gap: 24px !important;
}
#workGuide #why .strength-bento-card--main .strength-bento-visual,
#workGuide #why .strength-bento-card:not(.strength-bento-card--main) .strength-bento-visual {
height: 150px !important;
min-height: 150px !important;
padding: 0 !important;
}
#workGuide #why .strength-bento-card .strength-bento-body {
padding: 24px !important;
}
}
#workGuide #why .strength-bento-visual {
overflow: hidden;
position: relative;
background: #eaf0f6 !important;
}
#workGuide #why .strength-bento-visual img {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
}
#heroSection::after {
display: none;
}
#heroSection.hero {
color: #17304b !important;
min-height: 0 !important;
padding: 84px 0 !important;
}
#heroSection #heroTitleA {
color: #17304b !important;
}
#heroSection #heroTitleB {
color: #2563eb !important;
}
#heroSection #heroDesc {
color: #3b4c60 !important;
}
#heroSection .kicker,
#heroSection #heroKicker {
color: #365c8b !important;
}
#heroSection .hero-actions {
display: flex;
flex-wrap: wrap;
}
#heroSection .hero-actions .business-open {
background: #fff !important;
border: 1px solid #b9cbe1 !important;
color: #24456c !important;
}
#price>.container>.section-head {
display: grid;
align-items: center;
}
#price .price-heading-offer b {
font-weight: 700;
}
footer .footer-contact-area {
padding: 0 0 28px;
margin-bottom: 24px;
border-bottom: 1px solid #34465e;
}
footer .footer-contact-area h2 {
font-size: 24px;
color: #fff;
margin: 0 0 8px;
line-height: 1.4;
}
@media(min-width:769px) {
footer .footer-contact-area h2 {
font-size: 22px;
}
}
footer .footer-contact-area p {
font-size: 14px;
line-height: 1.6;
}
footer .footer-contact-buttons {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 16px;
margin-top: 20px;
max-width: 720px;
}
footer .footer-contact-buttons button {
display: grid;
gap: 6px;
text-align: left;
padding: 20px;
border: 1px solid #425875;
border-radius: 12px;
background: #102640;
color: #fff;
font: inherit;
cursor: pointer;
}
footer .footer-contact-buttons span,
footer .footer-contact-buttons small {
font-size: 14px;
color: #bdcde0;
}
footer .footer-contact-buttons strong {
font-size: 20px;
line-height: 1.5;
}
@media(min-width:769px) {
footer .footer-contact-buttons strong {
font-size: 22px;
line-height: 1.4;
}
}
footer .footer-contact-buttons button:focus-visible {
outline: 2px solid #9cbeff;
outline-offset: 3px;
}
@media(max-width:900px) {
#heroSection.hero {
padding: 48px 0 !important;
}
}
@media(max-width:540px) {
footer .footer-contact-buttons {
grid-template-columns: 1fr;
}
}
#heroSection.hero {
background: radial-gradient(ellipse at 10% 15%,#e6f4ff 0,transparent 50%),linear-gradient(115deg,#f7fbff,#fff 75%) !important;
}
#price>.container>.section-head {
grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
gap: 32px;
}
#price .price-heading-offer {
grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
gap: 16px 20px;
align-items: center;
color: #fff;
}
#price .price-heading-offer .offer-business-note {
grid-column: 1/-1;
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #cedbf0;
}
#price .offer-business-note strong {
color: #fff;
font-weight: 600;
}
#price #priceBusinessZone {
background: #f5f8fc !important;
border: 1px solid #dce5f0 !important;
color: #17304b !important;
box-shadow: none;
}
#price #priceBusinessZone h3 {
color: #17304b !important;
}
#price #priceBusinessZone>p {
color: #3b4c60 !important;
max-width: 820px;
}
#price #priceBusinessZone .biz-qty-row {
background: #fff !important;
border: 1px solid #dce5ef !important;
color: #17304b !important;
}
#price #priceBusinessZone .qty-control button {
background: #eef3fa !important;
color: #24456c !important;
border: 1px solid #d0ddec !important;
}
#price #priceBusinessZone .qty-control strong {
color: #17304b !important;
}
#price #priceBusinessZone .biz-qty-summary {
background: #eaf4f3 !important;
border: 1px solid #cce4df !important;
}
#price #priceBusinessZone .biz-qty-summary span,
#price #priceBusinessZone .biz-qty-summary strong {
color: #235f58 !important;
}
#price #priceBusinessZone #bizBuilderOpen {
background: #2563eb !important;
color: #fff !important;
border-color: #2563eb !important;
}
@media(max-width:1100px) {
#price>.container>.section-head {
grid-template-columns: 1fr;
}
#price .price-heading-offer {
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}
}
@media(max-width:600px) {
#price .price-heading-offer {
grid-template-columns: 1fr;
gap: 16px;
}
}
#price .price-heading-offer {
display: block;
background: #eef5ff !important;
border: 1px solid #d3e2f5 !important;
border-radius: 14px;
padding: 24px !important;
box-shadow: none !important;
}
#price .price-heading-offer .offer-caption {
display: block;
font-size: 14px;
color: #496689 !important;
margin-bottom: 8px;
}
#price .price-heading-offer>strong {
display: block;
font-size: 20px;
font-weight: 600;
line-height: 1.5;
color: #203c5d !important;
}
@media(min-width:769px) {
#price .price-heading-offer>strong {
font-size: 22px;
line-height: 1.4;
}
}
#price .price-heading-offer>strong b {
font-size: 24px;
color: #245bc7 !important;
font-weight: 700;
}
@media(min-width:769px) {
#price .price-heading-offer>strong b {
font-size: 22px;
}
}
#price .price-heading-offer p,
#price .price-heading-offer small {
display: block;
font-size: 14px !important;
line-height: 1.6 !important;
color: #49617c !important;
margin: 8px 0 0;
}
#priceBusinessZone .biz-detail-layout {
display: grid;
gap: 20px;
margin-bottom: 24px;
align-items: start;
}
#price #priceBusinessZone .biz-qty-builder {
display: grid;
grid-template-columns: 1fr;
gap: 10px !important;
margin: 0;
}
#price #priceBusinessZone .biz-qty-row {
flex-wrap: nowrap;
padding: 14px !important;
gap: 10px !important;
}
#priceBusinessZone .biz-type-select {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
font: inherit;
color: #17304b;
padding: 4px 0;
min-height: 44px;
}
#priceBusinessZone .biz-type-select>span {
display: block;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
@media(min-width:769px) {
#priceBusinessZone .biz-type-select>span {
line-height: 1.4;
}
}
#priceBusinessZone .biz-type-select small {
display: block;
font-size: 14px;
line-height: 1.5;
color: #3b4c60;
margin-top: 4px;
}
@media(min-width:769px) {
#priceBusinessZone .biz-type-select small {
line-height: 1.4;
}
}
#price #priceBusinessZone .biz-qty-row:has(.biz-type-select[aria-pressed=true]) {
border-color: #87ace4 !important;
background: #eef5ff !important;
}
#price #priceBusinessZone .qty-control {
gap: 6px !important;
}
#price #priceBusinessZone .qty-control button {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
}
#priceBusinessZone .biz-detail-shell {
background: #fff;
border: 1px solid #dce5ef;
border-radius: 14px;
padding: 24px;
}
#priceBusinessZone .biz-detail-panel[hidden] {
display: none !important;
}
#priceBusinessZone .biz-detail-label {
font-size: 14px;
color: #245bc7;
}
#priceBusinessZone .biz-detail-panel h4 {
font-size: 22px;
line-height: 1.4;
color: #17304b;
margin: 10px 0 14px;
}
#priceBusinessZone .biz-detail-panel p,
#priceBusinessZone .biz-detail-panel dd {
font-size: 14px;
line-height: 1.75;
color: #3b4c60;
margin: 0;
word-break: keep-all;
}
@media(min-width:769px) {
#priceBusinessZone .biz-detail-panel p,
#priceBusinessZone .biz-detail-panel dd {
line-height: 1.6;
}
}
#priceBusinessZone .biz-detail-panel dl {
margin: 20px 0;
}
#priceBusinessZone .biz-detail-panel dl>div {
padding: 16px 0;
border-top: 1px solid #e4eaf2;
}
#priceBusinessZone .biz-detail-panel dt {
font-size: 16px;
font-weight: 600;
color: #17304b;
margin-bottom: 8px;
}
#priceBusinessZone .biz-detail-panel .biz-estimate-note {
background: #edf5ff;
border-radius: 8px;
padding: 12px;
color: #244f85;
}
#priceBusinessZone .biz-type-select:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 4px;
border-radius: 4px;
}
@media(max-width:600px) {
#priceBusinessZone .biz-detail-shell {
padding: 20px;
}
}
#businessBg .b-model-instruction {
font-size: 14px;
line-height: 1.6;
color: #3b4c60;
margin: 0 0 12px;
}
#businessBg .business-modal-qty.b-model-list {
display: grid;
grid-template-columns: minmax(0,1fr) !important;
gap: 10px;
}
#businessBg .b-model-card {
border: 1px solid #dce5ef;
border-radius: 12px;
background: #fff;
overflow: hidden;
}
#businessBg .b-model-card.is-selected {
background: #f2f7ff;
border-color: #9dbce9;
}
#businessBg .b-model-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
}
#businessBg .b-model-toggle {
flex: 1;
min-width: 0;
min-height: 44px;
padding: 0;
border: 0;
background: transparent;
text-align: left;
color: #17304b;
font: inherit;
cursor: pointer;
}
#businessBg .b-model-name {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
@media(min-width:769px) {
#businessBg .b-model-name {
line-height: 1.4;
}
}
#businessBg .b-model-check {
display: grid;
place-items: center;
width: 18px;
height: 18px;
flex: 0 0 18px;
border: 1px solid #ccd6e3;
border-radius: 50%;
color: transparent;
font-size: 12px;
}
@media(min-width:769px) {
#businessBg .b-model-check {
font-size: 13px;
}
}
#businessBg .is-selected .b-model-check {
color: #fff;
background: #2563eb;
border-color: #2563eb;
}
#businessBg .b-model-hint {
display: flex;
align-items: center;
gap: 8px;
margin-top: 3px;
padding-left: 26px;
color: #3b4c60;
font-size: 14px;
line-height: 1.5;
}
@media(min-width:769px) {
#businessBg .b-model-hint {
line-height: 1.4;
}
}
#businessBg .b-model-chevron {
width: 6px;
height: 6px;
border-right: 1.75px solid currentColor;
border-bottom: 1.75px solid currentColor;
transform: rotate(45deg);
}
#businessBg .b-model-toggle[aria-expanded=true] .b-model-chevron {
transform: rotate(225deg);
}
#businessBg .b-model-counter {
display: flex;
align-items: center;
flex-shrink: 0;
background: #edf2f8;
border-radius: 8px;
}
#businessBg .b-model-counter button {
display: grid;
place-items: center;
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #203e6b;
font: inherit;
font-size: 20px;
cursor: pointer;
}
@media(min-width:769px) {
#businessBg .b-model-counter button {
font-size: 22px;
}
}
#businessBg .b-model-counter button:hover:not(:disabled) {
background: #dfeafa;
}
#businessBg .b-model-counter button:disabled {
opacity: .35;
cursor: not-allowed;
}
#businessBg .b-model-counter input {
appearance: textfield;
-moz-appearance: textfield;
width: 48px !important;
min-width: 0;
height: 44px;
min-height: 44px;
margin: 0;
padding: 0 2px !important;
border: 0 !important;
border-radius: 0;
background: transparent !important;
color: #17304b !important;
text-align: center;
font: inherit;
font-size: 16px !important;
font-weight: 600;
box-shadow: none !important;
font-variant-numeric: tabular-nums;
}
#businessBg .b-model-counter input::-webkit-inner-spin-button,
#businessBg .b-model-counter input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#businessBg .b-model-toggle:focus-visible,
#businessBg .b-model-counter :focus-visible {
outline: 2px solid #2563eb !important;
outline-offset: -2px;
}
#businessBg .b-model-detail {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
align-items: center;
gap: 16px;
padding: 16px;
background: #f6f8fb;
}
#businessBg .b-model-detail[hidden] {
display: none !important;
}
#businessBg .b-model-visual {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
min-width: 0;
}
#businessBg .b-model-visual figure {
min-width: 0;
flex: 1;
}
#businessBg .b-model-visual svg {
display: block;
width: 100%;
height: 100px;
}
#businessBg .b-model-visual figcaption {
text-align: center;
font-size: 14px;
color: #3b4c60;
line-height: 1.5;
}
@media(min-width:769px) {
#businessBg .b-model-visual figcaption {
line-height: 1.4;
}
}
#businessBg .b-model-detail p {
font-size: 14px !important;
line-height: 1.6 !important;
color: #3b4c60 !important;
margin: 0;
word-break: keep-all;
}
@media(max-width:480px) {
#businessBg .b-model-header {
padding: 12px;
gap: 8px;
}
#businessBg .b-model-name {
font-size: 15px;
}
#businessBg .b-model-detail {
grid-template-columns: 1fr;
}
#businessBg .b-model-visual {
max-width: 280px;
width: 100%;
justify-self: center;
}
}
@media(max-width:360px) {
#businessBg .b-model-header {
flex-wrap: wrap;
}
#businessBg .b-model-counter {
margin-left: auto;
}
#businessBg .b-model-toggle {
flex-basis: 100%;
}
}
#heroSection.hero-unified {
padding: 72px 0 64px !important;
min-height: 0 !important;
background: radial-gradient(ellipse at 50% 0%,#eaf4ff 0%,#f6faff 52%,#fff 100%) !important;
}
#heroSection.hero-unified .kicker {
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 16px;
padding: 0;
background: none;
border: 0;
font-size: 16px;
line-height: 1.6;
font-weight: 600;
color: #2563eb;
}
#heroSection.hero-unified .kicker:before,
#heroSection.hero-unified .kicker:after {
display: none;
}
#heroSection.hero-unified #heroTitleA,
#heroSection.hero-unified #heroTitleB {
display: block;
margin: 0 !important;
font-style: normal;
text-align: center;
}
#heroSection.hero-unified #heroDesc {
width: 100%;
max-width: 760px;
margin: 0 auto !important;
text-align: center;
font-size: 18px;
line-height: 1.75;
word-break: keep-all;
}
@media(min-width:769px) {
#heroSection.hero-unified #heroDesc {
line-height: 1.6;
}
}
#heroSection.hero-unified .hero-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 24px 0 0 !important;
}
#heroSection.hero-unified .hero-actions .btn {
min-height: 52px;
padding: 12px 24px;
font-size: 16px;
}
.b-model-list .b-model-group-label {
margin: 4px 0 0;
color: #526a83;
font-size: 14px;
font-weight: 600;
line-height: 1.6;
}
.b-model-list .b-model-card+.b-model-group-label {
margin-top: 10px;
}
@media(max-width:640px) {
#heroSection.hero-unified {
padding: 48px 0 !important;
}
#heroSection.hero-unified .kicker {
font-size: 14px;
}
#heroSection.hero-unified #heroDesc {
font-size: 16px;
max-width: 340px;
}
#heroSection.hero-unified .hero-actions {
gap: 8px;
}
#heroSection.hero-unified .hero-actions .btn {
padding: 12px 16px;
}
}
#heroSection.hero-unified #heroDesc {
font-weight: 600;
color: #24425e !important;
}
#priceBusinessZone .biz-detail-layout {
grid-template-columns: minmax(240px,.72fr) minmax(0,1.28fr);
}
#priceBusinessZone .biz-model-heading {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(140px,.7fr);
gap: 24px;
align-items: center;
}
#priceBusinessZone .biz-model-copy {
min-width: 0;
}
#priceBusinessZone .biz-model-image {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
aspect-ratio: 1.3;
margin: 0;
padding: 16px;
border: 1px solid #d5e2ef;
border-radius: 20px;
overflow: hidden;
}
#priceBusinessZone .biz-model-image svg,
#priceBusinessZone .biz-model-image img {
display: block;
width: 100%;
height: 100%;
max-height: 190px;
object-fit: contain;
}
#priceBusinessZone .biz-model-image figcaption {
font-size: 14px;
line-height: 1.6;
color: #526a83;
text-align: center;
}
@media(max-width:960px) {
#priceBusinessZone .biz-detail-layout {
grid-template-columns: 1fr;
}
}
@media(max-width:540px) {
#priceBusinessZone .biz-model-heading {
grid-template-columns: 1fr;
gap: 20px;
}
#priceBusinessZone .biz-model-image {
width: 100%;
max-width: 280px;
justify-self: center;
}
}
label.biz-unknown-option {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 12px;
padding: 18px;
border: 1px solid #cbdcf2;
border-radius: 12px;
background: #f2f7ff;
cursor: pointer;
text-align: left;
}
label.biz-unknown-option>span {
flex: 1;
min-width: 0;
margin: 0;
text-align: left;
}
.biz-unknown-option input {
appearance: auto !important;
position: static !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
flex: 0 0 20px;
margin: 3px 0 0;
accent-color: #2563eb;
}
.biz-unknown-option strong {
display: block;
font-size: 16px;
line-height: 1.5;
color: #17304b !important;
}
@media(min-width:769px) {
.biz-unknown-option strong {
line-height: 1.4;
}
}
.biz-unknown-option small {
display: block;
margin-top: 5px;
font-size: 14px;
line-height: 1.6;
color: #3b4c60 !important;
word-break: keep-all;
}
.biz-unknown-option:has(input:checked) {
border-color: #2563eb;
background: #eaf2ff;
}
.biz-unknown-option:focus-within {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
#personalBg .catalog-model,
#businessBg .b-model-visual,
#price .service-v4-visual,
#priceBusinessZone .biz-model-image {
background: #fff !important;
}
#personalBg .catalog-model {
padding: 16px;
border: 1px solid #e1e8f0;
border-radius: 12px;
}
#personalBg .catalog-model .equipment-photo {
display: block;
width: 100%;
height: 154px;
max-width: 280px;
margin: 0 auto;
}
#businessBg .b-model-visual figure {
width: 100%;
margin: 0;
}
#businessBg .b-model-visual .equipment-photo {
display: block;
width: 100%;
height: 154px;
max-width: 280px;
margin: 0 auto;
}
#price .service-v4-visual .equipment-photo,
#priceBusinessZone .biz-model-image .equipment-photo {
display: block;
width: 100%;
height: 190px;
max-width: 280px;
max-height: none;
margin: auto;
}
.equipment-example-note {
font-size: 13px !important;
line-height: 1.6 !important;
color: #3b4c60 !important;
margin: 0 0 12px !important;
word-break: keep-all;
}
@media(max-width:640px) {
#personalBg .catalog-model .equipment-photo,
#businessBg .b-model-visual .equipment-photo {
height: 130px;
}
#price .service-v4-visual .equipment-photo,
#priceBusinessZone .biz-model-image .equipment-photo {
height: 170px;
}
}
#priceBusinessZone #bizDetail-etc .etc-guide-heading {
grid-template-columns: minmax(0,1fr) minmax(240px,1fr);
gap: 24px;
}
:is(#priceBusinessZone,#businessBg) .etc-photo-examples {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 12px;
}
:is(#priceBusinessZone,#businessBg) .etc-photo-examples figure {
min-width: 0;
margin: 0;
}
:is(#priceBusinessZone,#businessBg) .etc-example-art {
border: 1px solid #d5e2ef;
border-radius: 12px;
overflow: hidden;
background: #f3f7fb;
}
:is(#priceBusinessZone,#businessBg) .etc-example-art>svg {
display: block;
width: 100%;
height: auto;
}
:is(#priceBusinessZone,#businessBg) .etc-photo-examples figcaption {
margin-top: 10px;
text-align: left;
}
:is(#priceBusinessZone,#businessBg) .etc-photo-examples figcaption strong {
display: block;
font-size: 14px;
color: #17304b;
line-height: 1.5;
}
@media(min-width:769px) {
:is(#priceBusinessZone,#businessBg) .etc-photo-examples figcaption strong {
line-height: 1.4;
}
}
:is(#priceBusinessZone,#businessBg) .etc-photo-examples figcaption span {
display: block;
font-size: 13px;
color: #3b4c60;
line-height: 1.6;
margin-top: 3px;
word-break: keep-all;
}
:is(#priceBusinessZone,#businessBg) .etc-photo-examples .etc-example-caption {
grid-column: 1/-1;
font-size: 12px;
color: #3b4c60;
line-height: 1.5;
margin: 0;
}
@media(min-width:769px) {
:is(#priceBusinessZone,#businessBg) .etc-photo-examples .etc-example-caption {
font-size: 13px;
line-height: 1.4;
}
}
:is(#priceBusinessZone,#businessBg) .etc-guide-checklist {
border-top: 1px solid #e4eaf2;
margin-top: 24px;
padding: 20px 0;
}
:is(#priceBusinessZone,#businessBg) .etc-guide-checklist h5 {
margin: 0 0 12px;
font-size: 16px;
line-height: 1.5;
color: #17304b;
}
@media(min-width:769px) {
:is(#priceBusinessZone,#businessBg) .etc-guide-checklist h5 {
line-height: 1.4;
}
}
:is(#priceBusinessZone,#businessBg) .etc-guide-checklist ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
:is(#priceBusinessZone,#businessBg) .etc-guide-checklist li {
position: relative;
padding-left: 20px;
font-size: 14px;
line-height: 1.7;
color: #465d75;
word-break: keep-all;
}
@media(min-width:769px) {
:is(#priceBusinessZone,#businessBg) .etc-guide-checklist li {
line-height: 1.6;
}
}
:is(#priceBusinessZone,#businessBg) .etc-guide-checklist li:before {
content: '✓';
position: absolute;
left: 0;
color: #2563eb;
}
:is(#priceBusinessZone,#businessBg) .etc-guide-checklist li span {
margin-left: 8px;
font-size: 13px;
color: #3b4c60;
}
@media(max-width:1200px) {
#priceBusinessZone #bizDetail-etc .etc-guide-heading {
grid-template-columns: 1fr;
}
:is(#priceBusinessZone,#businessBg) .etc-photo-examples {
max-width: 420px;
width: 100%;
}
}
#businessBg #bModelDetail-etc {
grid-template-columns: minmax(0,1fr);
gap: 20px;
padding: 24px;
align-items: start;
}
#businessBg #bModelDetail-etc .booking-photo-guide-intro {
font-size: 16px !important;
line-height: 1.75 !important;
color: #17304b !important;
margin: 0 !important;
}
@media(min-width:769px) {
#businessBg #bModelDetail-etc .booking-photo-guide-intro {
line-height: 1.6 !important;
}
}
#businessBg #bModelDetail-etc .etc-photo-examples {
width: 100%;
max-width: 440px;
gap: 16px;
}
#businessBg #bModelDetail-etc .etc-example-caption {
font-size: 12px !important;
line-height: 1.6 !important;
}
@media(min-width:769px) {
#businessBg #bModelDetail-etc .etc-example-caption {
font-size: 13px !important;
}
}
#businessBg #bModelDetail-etc .booking-photo-guide-tip {
padding-top: 16px;
border-top: 1px solid #dce5ef;
font-size: 14px !important;
line-height: 1.6 !important;
}
#reviews .review-gallery-head .review-controls.review-mode-tabs {
margin: 24px 0 0 !important;
gap: 12px;
flex-wrap: wrap;
}
@media(max-width:640px) {
#businessBg #bModelDetail-etc {
padding: 20px 16px;
gap: 16px;
}
#businessBg #bModelDetail-etc .etc-photo-examples {
gap: 12px;
}
}
#refreContactFloating {
position: fixed;
right: max(24px,env(safe-area-inset-right));
bottom: calc(24px + env(safe-area-inset-bottom) + var(--contact-bar-offset,0px));
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
z-index: 60;
padding: 0;
margin: 0;
border: 0;
background: none;
}
#refreContactFloating[hidden] {
display: none !important;
}
#refreContactFloating .refre-contact-button {
position: relative;
display: grid;
place-items: center;
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
padding: 0;
border: 1px solid rgba(16,38,64,.08);
border-radius: 50%;
text-decoration: none;
cursor: pointer;
box-shadow: 0 6px 20px rgba(16,38,64,.18);
transition: transform .18s ease,box-shadow .18s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
#refreContactFloating .refre-contact-kakao {
background: #FEE500;
color: #3C1E1E;
border: 2px solid #102640;
}
#refreContactFloating .refre-contact-phone {
background: #102640;
color: #fff;
border-color: rgba(255,255,255,.16);
}
#refreContactFloating .refre-contact-button>svg {
display: block;
width: 30px;
height: 30px;
pointer-events: none;
}
#refreContactFloating .refre-contact-kakao>svg {
width: 34px;
height: 34px;
}
#refreContactFloating .refre-contact-button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 5px;
}
#refreContactFloating .refre-contact-button:active {
transform: scale(.95);
}
#refreContactFloating .refre-contact-label {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translate(4px,-50%);
white-space: nowrap;
border: 1px solid #e4eaf1;
border-radius: 12px;
background: #fff;
color: #102640;
padding: 10px 14px;
font-family: 'Pretendard Variable',Pretendard,sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
box-shadow: 0 4px 16px rgba(16,38,64,.08);
pointer-events: none;
opacity: 0;
transition: opacity .15s,transform .15s;
}
#refreContactFloating .refre-contact-button:focus-visible .refre-contact-label {
opacity: 1;
transform: translate(0,-50%);
}
#floatingContactStatus {
position: absolute;
right: 0;
bottom: calc(100% + 12px);
width: min(260px,calc(100vw - 36px));
margin: 0;
padding: 14px 16px;
border: 1px solid #e4eaf1;
border-radius: 14px;
background: #fff;
color: #102640;
font-size: 14px;
line-height: 1.6;
box-shadow: 0 6px 24px rgba(16,38,64,.12);
}
#floatingContactStatus[hidden] {
display: none;
}
@media(hover:hover) {
#refreContactFloating .refre-contact-button:hover {
transform: translateY(-3px);
box-shadow: 0 9px 24px rgba(16,38,64,.24);
}
#refreContactFloating .refre-contact-button:hover .refre-contact-label {
opacity: 1;
transform: translate(0,-50%);
}
}
@media(max-width:650px) {
#refreContactFloating {
right: max(16px,env(safe-area-inset-right));
bottom: calc(18px + env(safe-area-inset-bottom) + var(--contact-bar-offset,0px));
gap: 10px;
}
#refreContactFloating .refre-contact-button {
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
}
#refreContactFloating .refre-contact-button>svg {
width: 27px;
height: 27px;
}
#refreContactFloating .refre-contact-kakao>svg {
width: 32px;
height: 32px;
}
body>.sticky {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media(prefers-reduced-motion:reduce) {
#refreContactFloating .refre-contact-button,
#refreContactFloating .refre-contact-label {
transition: none;
}
}
[hidden] {
display: none !important;
}
.refre-mobile-estimate {
display: none;
}
.refre-photo-block {
padding-top: 24px;
margin: 28px 0;
border-top: 1px solid #dce5ef;
min-width: 0;
}
.refre-photo-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
:is(#personalBg,#businessBg) .refre-photo-heading h4 {
font-size: 18px !important;
line-height: 1.5 !important;
margin: 0 !important;
color: #17304b;
}
@media(min-width:769px) {
:is(#personalBg,#businessBg) .refre-photo-heading h4 {
line-height: 1.4 !important;
}
}
.refre-photo-heading h4 span {
font-weight: 400;
font-size: 14px;
margin-left: 5px;
color: #3b4c60;
}
.refre-photo-heading>small {
font-size: 14px;
color: #3b4c60;
white-space: nowrap;
}
.refre-photo-block>p {
font-size: 14px;
line-height: 1.7;
color: #3b4c60;
margin: 10px 0 18px;
}
@media(min-width:769px) {
.refre-photo-block>p {
line-height: 1.6;
}
}
.refre-shoot-guide {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 14px;
padding: 18px;
background: #f4f7fb;
border-radius: 14px;
}
.refre-shoot-guide>div {
min-width: 0;
}
.refre-shoot-guide span {
display: grid;
place-items: center;
background: #e5eefb;
color: #245bc7;
font-size: 14px;
font-weight: 600;
width: 30px;
height: 30px;
border-radius: 9px;
margin-bottom: 10px;
}
.refre-shoot-guide strong {
font-size: 14px;
line-height: 1.5;
color: #17304b;
display: block;
word-break: keep-all;
}
@media(min-width:769px) {
.refre-shoot-guide strong {
line-height: 1.4;
}
}
.refre-shoot-guide p {
font-size: 14px;
line-height: 1.65;
color: #3b4c60;
margin: 7px 0 0;
word-break: keep-all;
}
@media(min-width:769px) {
.refre-shoot-guide p {
line-height: 1.6;
}
}
.refre-photo-block .refre-photo-tip {
margin: 12px 0 18px;
}
:is(#personalBg,#businessBg) .refre-photo-upload {
position: relative;
min-height: 104px;
border: 1px dashed #a0b7d4;
border-radius: 12px;
background: #f9fbfe;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 6px;
cursor: pointer;
overflow: hidden;
text-align: center;
padding: 12px;
}
.refre-photo-upload b {
font-size: 16px;
color: #17304b;
}
.refre-photo-upload small {
font-size: 14px;
color: #3b4c60;
}
:is(#personalBg,#businessBg) .refre-photo-upload input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.refre-photo-upload:focus-within {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
.refre-photo-block .refre-photo-local {
font-size: 14px;
line-height: 1.65;
margin-top: 10px;
}
@media(min-width:769px) {
.refre-photo-block .refre-photo-local {
line-height: 1.6;
}
}
.refre-photo-previews {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 12px;
}
.refre-photo-previews figure {
margin: 0;
position: relative;
min-width: 0;
}
.refre-photo-previews img {
width: 100%;
height: 112px;
object-fit: cover;
border-radius: 10px;
}
.refre-photo-previews button {
position: absolute;
top: 3px;
right: 3px;
width: 44px;
height: 44px;
border: 0;
background: #102640;
color: white;
border-radius: 50%;
font-size: 22px;
cursor: pointer;
}
.refre-photo-previews figcaption {
font-size: 13px;
color: #3b4c60;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.refre-photo-block .refre-photo-error {
font-size: 14px;
color: #af382c;
margin-top: 10px;
}
.refre-photo-error:empty {
display: none;
}
:is(#personalBg,#businessBg) .summary {
display: grid;
gap: 16px;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
:is(#personalBg,#businessBg) .summary-group {
padding: 16px;
margin: 0;
border: 1px solid #dce5ef;
border-radius: 12px;
background: #f8fafd;
}
:is(#personalBg,#businessBg) .summary-group header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
:is(#personalBg,#businessBg) .summary-group h4 {
font-size: 16px !important;
line-height: 1.5 !important;
margin: 0 !important;
color: #17304b;
}
@media(min-width:769px) {
:is(#personalBg,#businessBg) .summary-group h4 {
line-height: 1.4 !important;
}
}
:is(#personalBg,#businessBg) .summary-group .summary-edit {
position: static !important;
min-width: 52px;
min-height: 44px;
padding: 8px 12px;
margin: 0;
border: 1px solid #c5d3e6;
border-radius: 8px;
background: white;
color: #203e6b;
font-size: 14px;
}
.summary-group dl {
margin: 0;
display: grid;
gap: 9px;
}
:is(#personalBg,#businessBg) .summary-group dl>div {
display: grid;
grid-template-columns: 88px minmax(0,1fr);
gap: 12px;
font-size: 14px;
line-height: 1.6;
padding: 5px 0 !important;
border: 0 !important;
}
.summary-group dt {
color: #3b4c60;
font-weight: 400;
}
.summary-group dd {
margin: 0;
color: #17304b;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.summary-group dd:empty::after {
content: '미입력';
}
:is(#personalBg,#businessBg) .copy-fallback {
font-family: inherit;
}
@media(max-width:768px) {
:is(#personalBg,#businessBg).booking-page .booking-page-shell {
padding-bottom: calc(var(--booking-actions-height,130px) + 32px);
}
:is(#personalBg,#businessBg).booking-page .modal-actions {
position: fixed !important;
left: 12px;
right: 12px;
bottom: 0 !important;
width: auto;
margin: 0 !important;
background: #fff;
border: 1px solid #dce5ef;
border-bottom: 0;
border-radius: 14px 14px 0 0;
box-shadow: 0 -4px 20px rgba(16,38,64,.08);
padding: 10px 16px max(12px,env(safe-area-inset-bottom)) !important;
display: grid;
grid-template-columns: auto 1fr;
gap: 8px !important;
z-index: 12;
}
:is(#personalBg,#businessBg) .modal-actions button {
min-height: 48px;
}
:is(#personalBg,#businessBg) .modal-actions .next {
width: 100% !important;
margin-left: 0 !important;
min-width: 0 !important;
}
:is(#personalBg,#businessBg) .modal-actions:has(#pPrev[style*="hidden"],#bPrev[style*="hidden"]) .next {
grid-column: 1/-1;
}
:is(#personalBg,#businessBg) .modal-actions:has(#pPrev[style*="hidden"],#bPrev[style*="hidden"]) #pPrev,
:is(#personalBg,#businessBg) .modal-actions:has(#pPrev[style*="hidden"],#bPrev[style*="hidden"]) #bPrev {
display: none;
}
.refre-mobile-estimate {
grid-column: 1/-1;
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
font-size: 14px;
line-height: 1.5;
color: #3b4c60;
}
.refre-mobile-estimate strong {
font-size: 20px;
color: #17304b;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#bMobileEstimate strong {
font-size: 16px;
}
:is(#personalBg,#businessBg).booking-page {
scroll-padding-bottom: calc(var(--booking-actions-height,130px) + 24px);
}
#personalBg .catalog-list .direct-qty-heading {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
padding: 12px !important;
gap: 8px !important;
}
#personalBg .catalog-list .direct-qty-heading .catalog-toggle {
width: auto !important;
flex: 1 !important;
min-width: 0;
}
#personalBg .catalog-list .direct-qty-control {
width: auto !important;
flex: 0 0 auto !important;
gap: 0 !important;
}
#personalBg .catalog-list .direct-qty-control strong {
width: 22px !important;
min-width: 22px !important;
}
#personalBg .catalog-name {
font-size: 15px !important;
white-space: normal;
word-break: keep-all;
}
#personalBg .direct-type-copy {
gap: 2px !important;
min-width: 0;
}
#personalBg .quantity-selection-mark {
display: none;
}
#personalBg .model-explanation-link {
font-size: 13px;
}
#personalBg .catalog-detail {
grid-template-columns: 1fr;
gap: 12px;
}
#personalBg .catalog-model svg {
height: 124px;
}
:is(#personalBg,#businessBg) input:not([type=checkbox]):not([type=file]),
:is(#personalBg,#businessBg) textarea,
:is(#personalBg,#businessBg) select {
font-size: 16px !important;
}
.refre-photo-block {
margin: 24px 0;
padding-top: 24px;
}
.refre-shoot-guide {
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
}
.refre-shoot-guide>div {
display: grid;
grid-template-columns: 30px 1fr;
gap: 2px 12px;
align-items: start;
}
.refre-shoot-guide span {
grid-row: 1/3;
margin: 0;
}
.refre-shoot-guide p {
margin: 0;
}
.refre-shoot-guide br {
display: none;
}
.refre-photo-previews {
grid-template-columns: repeat(2,minmax(0,1fr));
}
:is(#personalBg,#businessBg) .summary-group dl>div {
grid-template-columns: 76px minmax(0,1fr);
gap: 8px;
}
:is(#personalBg,#businessBg) .summary-group {
padding: 12px;
}
}
@media(max-width:350px) {
#personalBg .catalog-list .direct-qty-heading {
padding: 10px 8px !important;
}
#personalBg .catalog-name {
font-size: 14px !important;
}
#personalBg .direct-unit {
font-size: 13px;
}
.refre-mobile-estimate {
font-size: 12px;
}
.refre-mobile-estimate strong {
font-size: 18px;
}
:is(#personalBg,#businessBg) .summary-group dl>div {
grid-template-columns: 1fr;
gap: 2px;
}
}
@media(max-width:768px), (max-width:950px) and (pointer:coarse) {
html.refre-mobile {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
html.refre-mobile body {
font-size: 16px;
line-height: 1.65;
}
html.refre-mobile button,
html.refre-mobile a,
html.refre-mobile input,
html.refre-mobile select,
html.refre-mobile summary {
touch-action: manipulation;
}
html.refre-mobile button,
html.refre-mobile input,
html.refre-mobile select,
html.refre-mobile textarea {
font-family: 'Pretendard Variable',Pretendard,sans-serif;
}
html.refre-mobile input:not([type=checkbox]):not([type=radio]):not([type=file]),
html.refre-mobile select,
html.refre-mobile textarea {
font-size: 16px !important;
}
html.refre-mobile .container {
width: calc(100% - 40px) !important;
max-width: 680px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html.refre-mobile .header .nav {
gap: 8px !important;
}
html.refre-mobile .header .logo {
font-size: 16px !important;
white-space: nowrap;
}
html.refre-mobile .header .navlinks {
display: none !important;
}
html.refre-mobile .header .header-actions {
display: flex !important;
gap: 6px !important;
}
html.refre-mobile .header .header-actions .header-cta {
display: block !important;
border-radius: 10px !important;
line-height: 1.4 !important;
white-space: nowrap;
}
html.refre-mobile .header .header-actions .personal-open {
background: #102640 !important;
color: white !important;
border-color: #102640 !important;
}
html.refre-mobile .header .header-actions .business-open {
background: #f3f6fa !important;
color: #102640 !important;
border-color: #dfe5ed !important;
}
html.refre-mobile #heroSection.hero-unified {
height: auto !important;
display: flex !important;
align-items: center;
}
html.refre-mobile #heroSection>.container {
width: calc(100% - 40px) !important;
padding: 0 !important;
}
html.refre-mobile #heroSection.hero-unified .kicker {
line-height: 1.6 !important;
justify-content: flex-start !important;
}
html.refre-mobile #heroSection.hero-unified h1 {
max-width: none !important;
text-align: left !important;
}
html.refre-mobile #heroSection #heroTitleA,
html.refre-mobile #heroSection #heroTitleB {
font-size: inherit !important;
line-height: inherit !important;
text-align: left !important;
white-space: normal !important;
word-break: keep-all;
}
html.refre-mobile #heroSection #heroDesc {
font-weight: 400 !important;
text-align: left !important;
margin: 0 !important;
}
html.refre-mobile #heroSection.hero-unified .hero-actions {
width: 100%;
}
html.refre-mobile #heroSection.hero-unified .hero-actions .btn {
line-height: 1.4 !important;
white-space: nowrap;
box-shadow: none !important;
}
html.refre-mobile #heroSection .hero-actions .personal-open {
background: #102640 !important;
color: #fff !important;
border-color: #102640 !important;
}
html.refre-mobile #heroSection .hero-actions .business-open {
background: #fff !important;
color: #102640 !important;
border: 1px solid #ccd6e3 !important;
}
html.refre-mobile .section-head {
gap: 16px !important;
margin-bottom: 24px !important;
}
html.refre-mobile .section-label {
margin: 0 0 8px;
}
html.refre-mobile #price .service-v4-copy h4 {
line-height: 1.4 !important;
}
html.refre-mobile #price #priceBusinessZone {
padding: 20px 16px !important;
}
html.refre-mobile #price #priceBusinessZone h3 {
font-size: 22px !important;
line-height: 1.4 !important;
margin: 10px 0 16px !important;
}
html.refre-mobile #price #priceBusinessZone>p {
margin-bottom: 24px !important;
}
html.refre-mobile #price #priceBusinessZone .biz-detail-layout {
display: block !important;
}
html.refre-mobile #price #priceBusinessZone .biz-qty-builder {
gap: 8px !important;
}
html.refre-mobile #price #priceBusinessZone .biz-qty-row {
padding: 10px !important;
min-height: 76px !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
min-width: 0;
}
html.refre-mobile #price #priceBusinessZone .biz-type-select {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 0 !important;
font-size: 16px !important;
}
html.refre-mobile #price #priceBusinessZone .biz-type-select>span {
font-size: 16px !important;
line-height: 1.5 !important;
}
html.refre-mobile #price #priceBusinessZone .biz-type-select small {
font-size: 14px !important;
line-height: 1.5 !important;
}
html.refre-mobile #price #priceBusinessZone .qty-control {
display: flex !important;
flex: 0 0 120px !important;
width: 120px !important;
gap: 0 !important;
margin: 0 !important;
align-items: center !important;
}
html.refre-mobile #price #priceBusinessZone .qty-control button {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
flex: 0 0 44px !important;
padding: 0 !important;
font-size: 20px !important;
touch-action: manipulation;
}
html.refre-mobile #price #priceBusinessZone .qty-control strong {
display: block !important;
flex: 0 0 32px !important;
width: 32px !important;
min-width: 32px !important;
font-size: 16px !important;
line-height: 24px !important;
text-align: center;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
html.refre-mobile #price #priceBusinessZone .biz-detail-shell {
min-height: 0 !important;
margin-top: 12px !important;
}
html.refre-mobile #price #priceBusinessZone .biz-qty-summary {
margin: 12px 0 !important;
padding: 12px !important;
display: block !important;
}
html.refre-mobile #price #priceBusinessZone .biz-qty-summary strong {
display: block;
white-space: normal;
overflow-wrap: anywhere;
font-size: 14px !important;
}
html.refre-mobile #price #bizBuilderOpen {
width: 100%;
min-height: 48px;
margin-top: 20px !important;
font-size: 16px !important;
line-height: 1.5;
}
html.refre-mobile .mobile-disclosure {
margin: 12px 0;
border: 1px solid #dfe6ef;
border-radius: 12px;
background: #fff;
min-width: 0;
}
html.refre-mobile .mobile-disclosure>summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 48px;
padding: 12px;
list-style: none;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
color: #344e6b;
cursor: pointer;
}
html.refre-mobile .mobile-disclosure>summary::-webkit-details-marker {
display: none;
}
html.refre-mobile .mobile-disclosure>summary::after {
content: '⌄';
font-size: 18px;
line-height: 20px;
flex: 0 0 16px;
text-align: center;
}
html.refre-mobile .mobile-disclosure[open]>summary::after {
content: '⌃';
}
html.refre-mobile .mobile-disclosure[open]>summary {
border-bottom: 1px solid #edf0f4;
}
html.refre-mobile .mobile-disclosure>div,
html.refre-mobile .mobile-disclosure>details {
margin: 12px !important;
}
html.refre-mobile .mobile-disclosure.mobile-optional {
margin-top: 24px;
}
html.refre-mobile :is(#personalBg,#businessBg).booking-page {
background: #fff !important;
padding: 0 !important;
scroll-padding-top: 72px;
scroll-padding-bottom: calc(var(--booking-actions-height,132px) + 20px);
}
html.refre-mobile :is(#personalBg,#businessBg).booking-page .booking-page-shell {
max-width: 640px;
width: 100%;
padding: 0 20px calc(var(--booking-actions-height,132px) + 28px) !important;
margin: auto;
min-width: 0;
}
html.refre-mobile :is(#personalBg,#businessBg) .booking-page-nav {
position: sticky;
top: 0;
z-index: 20;
min-height: 60px;
margin: 0 -20px 0 !important;
padding: 8px 20px;
gap: 12px;
background: rgba(255,255,255,.98);
border-bottom: 1px solid #e8edf3;
color: #17304b;
justify-content: flex-start;
}
html.refre-mobile :is(#personalBg,#businessBg) .booking-page-nav button {
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
border: 1px solid #e0e6ee;
background: #fff;
color: #17304b;
border-radius: 10px;
font-size: 24px;
line-height: 1;
}
html.refre-mobile :is(#personalBg,#businessBg) .booking-page-nav>span {
font-size: 18px;
font-weight: 600;
line-height: 1.5;
color: #17304b;
}
html.refre-mobile :is(#personalBg,#businessBg) .booking-page-layout {
display: block !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .booking-page-intro,
html.refre-mobile :is(#personalBg,#businessBg) .booking-page-offer,
html.refre-mobile :is(#personalBg,#businessBg) .modal-top,
html.refre-mobile :is(#personalBg,#businessBg) .booking-preview-note {
display: none !important;
}
html.refre-mobile :is(#personalBg,#businessBg).booking-page .form-modal {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 100% !important;
background: #fff;
max-width: none !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .progress {
margin: 20px 0 24px !important;
gap: 8px !important;
counter-reset: booking-step;
}
html.refre-mobile :is(#personalBg,#businessBg) .progress-step i {
height: 4px !important;
min-height: 4px !important;
border-radius: 3px !important;
line-height: 0 !important;
font-size: 0 !important;
width: 100% !important;
margin: 0 0 8px !important;
background: #e6ebf1 !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .progress-step i::before,
html.refre-mobile :is(#personalBg,#businessBg) .progress-step i::after {
display: none !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .progress-step.current i,
html.refre-mobile :is(#personalBg,#businessBg) .progress-step i.on {
background: #102640 !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .progress-step {
padding: 0 !important;
display: block !important;
counter-increment: booking-step;
}
html.refre-mobile :is(#personalBg,#businessBg) .progress-step span::before {
content: counter(booking-step) '. ';
font-variant-numeric: tabular-nums;
}
html.refre-mobile :is(#personalBg,#businessBg) .progress-step span {
font-size: 14px !important;
line-height: 1.5 !important;
color: #7a8696 !important;
font-weight: 400 !important;
white-space: nowrap;
}
html.refre-mobile :is(#personalBg,#businessBg) .progress-step.current span {
color: #102640 !important;
font-weight: 700 !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .booking-step-status {
display: none !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .step-pane>h4 {
font-size: 18px !important;
line-height: 1.5 !important;
margin: 0 0 16px !important;
}
html.refre-mobile #personalBg .catalog-instruction,
html.refre-mobile #businessBg .b-model-instruction {
font-size: 14px !important;
line-height: 1.6 !important;
margin: 0 0 16px !important;
color: #3b4c60;
}
html.refre-mobile #personalBg .catalog-list>.equipment-example-note,
html.refre-mobile #businessBg .equipment-example-note,
html.refre-mobile #businessBg .b-model-group-label {
display: none !important;
}
html.refre-mobile #personalBg .personal-modal-qty.catalog-list {
gap: 8px !important;
}
html.refre-mobile #personalBg .catalog-list .personal-qty-row.catalog-item {
border: 1px solid #dfe6ef !important;
border-radius: 12px !important;
transition: none !important;
}
html.refre-mobile #personalBg .catalog-list .personal-qty-row.catalog-item.is-selected {
background: #f0f5fa !important;
border-color: #839bb7 !important;
}
html.refre-mobile #personalBg .catalog-list .direct-qty-heading {
padding: 12px !important;
gap: 8px !important;
min-height: 76px;
display: flex !important;
flex-wrap: nowrap !important;
}
html.refre-mobile #personalBg .catalog-list .catalog-toggle {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 0 !important;
min-height: 48px !important;
}
html.refre-mobile #personalBg .direct-type-copy {
display: grid !important;
grid-template-columns: minmax(0,1fr) 14px !important;
column-gap: 4px !important;
row-gap: 2px !important;
align-items: center;
}
html.refre-mobile #personalBg .direct-type-copy .catalog-name {
font-size: 16px !important;
line-height: 1.5 !important;
grid-column: 1 !important;
grid-row: 1 !important;
white-space: nowrap;
letter-spacing: -.035em !important;
font-weight: 600 !important;
}
html.refre-mobile #personalBg .direct-type-copy .direct-unit {
font-size: 14px !important;
line-height: 1.5 !important;
grid-column: 1 !important;
grid-row: 2 !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap;
}
html.refre-mobile #personalBg .model-explanation-link {
grid-column: 2 !important;
grid-row: 1/3 !important;
padding: 0 !important;
margin: 0 !important;
}
html.refre-mobile #personalBg .model-explanation-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
html.refre-mobile #personalBg .quantity-selection-mark {
display: none !important;
}
html.refre-mobile #personalBg .catalog-list .direct-qty-control {
flex: 0 0 116px !important;
width: 116px !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 8px !important;
background: #edf2f7 !important;
}
html.refre-mobile #personalBg .catalog-list .direct-qty-control button {
width: 44px !important;
min-width: 44px !important;
flex: 0 0 44px !important;
height: 44px !important;
padding: 0 !important;
touch-action: manipulation;
}
html.refre-mobile #personalBg .catalog-list .direct-qty-control strong {
flex: 0 0 28px !important;
width: 28px !important;
min-width: 28px !important;
font-size: 16px !important;
line-height: 24px !important;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
html.refre-mobile #personalBg .catalog-detail {
padding: 16px !important;
gap: 12px !important;
background: #f8fafc;
}
html.refre-mobile #personalBg .catalog-detail p {
font-size: 16px !important;
line-height: 1.7 !important;
}
html.refre-mobile #personalBg .selection-tray {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
html.refre-mobile #personalBg .booking-lower-help {
margin: 12px 0 0 !important;
}
html.refre-mobile #personalBg .booking-lower-help .unknown-choice {
font-size: 16px !important;
line-height: 1.5 !important;
gap: 10px !important;
padding: 8px 0 !important;
}
html.refre-mobile #personalBg .booking-selection-strip {
padding: 12px 0 !important;
margin: 0 0 20px !important;
border: 0 !important;
background: transparent !important;
border-bottom: 1px solid #e3e9f0 !important;
}
html.refre-mobile #personalBg #pSelectionStripPrice {
display: none !important;
}
html.refre-mobile #personalBg .booking-selection-strip strong {
font-size: 14px !important;
line-height: 1.6 !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .form-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .field {
margin-bottom: 20px !important;
min-width: 0;
}
html.refre-mobile :is(#personalBg,#businessBg) .field>label {
font-size: 14px !important;
line-height: 1.5 !important;
margin-bottom: 8px !important;
color: #344e6b !important;
font-weight: 600 !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .field input:not([type=checkbox]),
html.refre-mobile :is(#personalBg,#businessBg) .field select {
width: 100%;
min-width: 0;
height: 48px !important;
min-height: 48px !important;
padding: 11px 12px !important;
border-radius: 10px !important;
font-size: 16px !important;
line-height: 1.5 !important;
}
html.refre-mobile :is(#personalBg,#businessBg) input[type=checkbox] {
width: 20px !important;
height: 20px !important;
min-width: 20px;
flex: 0 0 20px;
accent-color: #102640;
}
html.refre-mobile :is(#personalBg,#businessBg) .field textarea {
font-size: 16px !important;
line-height: 1.6 !important;
min-height: 96px !important;
padding: 12px !important;
}
html.refre-mobile #personalBg .address-search-row {
display: flex;
gap: 8px;
}
html.refre-mobile #personalBg #pAddress {
flex: 1;
min-width: 0;
}
html.refre-mobile #personalBg #pAddressSearch {
flex: 0 0 72px;
font-size: 14px !important;
padding: 8px !important;
min-height: 48px;
}
html.refre-mobile #personalBg .schedule-row {
grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
gap: 12px !important;
}
html.refre-mobile #personalBg .date-flex {
font-size: 14px !important;
line-height: 1.5 !important;
align-items: flex-start !important;
}
html.refre-mobile #personalBg .compact-memo>summary {
display: none !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .mobile-optional .note-guide {
display: none !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .mobile-optional .note-chips {
display: flex !important;
flex-wrap: wrap;
gap: 8px !important;
margin-bottom: 12px !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .mobile-optional .note-chips button {
min-height: 40px !important;
padding: 8px 10px !important;
font-size: 14px !important;
}
html.refre-mobile .refre-photo-block {
margin: 16px 0 !important;
padding: 0 !important;
border: 0 !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .refre-photo-heading h4 {
font-size: 16px !important;
line-height: 1.5 !important;
}
html.refre-mobile .refre-photo-heading>small {
font-size: 14px;
}
html.refre-mobile :is(#personalBg,#businessBg) .refre-photo-upload {
min-height: 72px !important;
margin-top: 12px !important;
padding: 12px !important;
gap: 4px !important;
}
html.refre-mobile .refre-photo-upload b {
font-size: 16px !important;
}
html.refre-mobile .refre-photo-upload small,
html.refre-mobile .refre-photo-local,
html.refre-mobile .refre-photo-tip {
font-size: 14px !important;
line-height: 1.6 !important;
}
html.refre-mobile .mobile-photo-guide {
border: 0;
border-bottom: 1px solid #e5eaf0;
border-radius: 0;
margin: 4px 0 12px !important;
}
html.refre-mobile .mobile-photo-guide>summary {
padding: 10px 0;
}
html.refre-mobile .mobile-photo-guide>p {
margin: 12px 0 !important;
font-size: 14px;
line-height: 1.65;
color: #3b4c60;
}
html.refre-mobile .mobile-photo-guide .refre-shoot-guide {
margin: 12px 0 !important;
padding: 12px;
gap: 12px;
}
html.refre-mobile .refre-photo-previews {
display: flex !important;
gap: 12px !important;
overflow-x: auto;
scroll-snap-type: x proximity;
padding: 0 0 8px;
max-width: 100%;
}
html.refre-mobile .refre-photo-previews figure {
flex: 0 0 104px;
width: 104px;
scroll-snap-align: start;
}
html.refre-mobile .refre-photo-previews img {
display: block;
width: 104px !important;
height: 80px !important;
object-fit: cover;
border: 1px solid #e0e6ee;
}
html.refre-mobile .refre-photo-previews figcaption {
font-size: 13px;
line-height: 1.5;
margin-top: 4px;
}
html.refre-mobile #businessBg .choice-grid {
gap: 12px !important;
}
html.refre-mobile #businessBg .business-choice {
padding: 16px 12px !important;
min-height: 88px !important;
border: 1px solid #dfe6ef !important;
border-radius: 12px !important;
font-size: 16px !important;
line-height: 1.5 !important;
}
html.refre-mobile #businessBg .business-choice.selected {
border-color: #839bb7 !important;
background: #f0f5fa !important;
}
html.refre-mobile #businessBg .business-choice b {
font-size: 16px !important;
}
html.refre-mobile #businessBg .business-choice span {
font-size: 14px !important;
}
html.refre-mobile #businessBg .b-model-list {
display: grid;
gap: 8px !important;
}
html.refre-mobile #businessBg .b-model-header {
padding: 12px !important;
min-height: 76px;
gap: 8px !important;
flex-wrap: nowrap !important;
align-items: center !important;
}
html.refre-mobile #businessBg .b-model-toggle {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 0 !important;
}
html.refre-mobile #businessBg .b-model-name {
font-size: 16px !important;
line-height: 1.5 !important;
gap: 0 !important;
white-space: nowrap;
letter-spacing: -.035em;
}
html.refre-mobile #businessBg .b-model-check {
display: none !important;
}
html.refre-mobile #businessBg .b-model-hint {
font-size: 14px !important;
line-height: 1.5 !important;
margin-top: 2px !important;
}
html.refre-mobile #businessBg .b-model-counter {
margin: 0 !important;
flex: 0 0 120px !important;
width: 120px !important;
gap: 0 !important;
}
html.refre-mobile #businessBg .b-model-counter input {
width: 32px !important;
min-width: 32px !important;
flex: 0 0 32px !important;
font-size: 16px !important;
padding: 0 !important;
font-variant-numeric: tabular-nums;
}
html.refre-mobile #businessBg .b-model-counter button {
flex: 0 0 44px !important;
touch-action: manipulation;
}
html.refre-mobile #businessBg .b-model-card.is-selected {
border-color: #839bb7 !important;
background: #f0f5fa !important;
}
html.refre-mobile #businessBg .b-model-detail {
padding: 16px !important;
}
html.refre-mobile #businessBg .b-model-detail>p {
font-size: 16px !important;
line-height: 1.7 !important;
}
html.refre-mobile :is(#businessBg,#priceBusinessZone) .biz-unknown-option {
padding: 12px !important;
margin: 0 0 8px !important;
gap: 10px !important;
min-height: 48px !important;
background: #f7f9fc !important;
color: #344e6b !important;
}
html.refre-mobile :is(#businessBg,#priceBusinessZone) .biz-unknown-option strong {
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 600 !important;
}
html.refre-mobile :is(#businessBg,#priceBusinessZone) .biz-unknown-option small {
display: none !important;
}
html.refre-mobile #businessBg .modal-qty-preview {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
min-height: 0 !important;
}
html.refre-mobile #businessBg .modal-qty-preview strong {
font-size: 14px !important;
line-height: 1.7 !important;
overflow-wrap: anywhere;
}
html.refre-mobile :is(#personalBg,#businessBg) .summary-group {
padding: 16px !important;
background: #f8fafc !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .summary-group h4 {
font-size: 16px !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .summary-group dl>div {
grid-template-columns: 76px minmax(0,1fr) !important;
gap: 10px !important;
font-size: 14px !important;
line-height: 1.65 !important;
padding: 5px 0 !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .contact-actions {
display: none !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .compact-preview-note {
font-size: 14px !important;
line-height: 1.6 !important;
margin: 20px 0 0 !important;
color: #4a5b70 !important;
}
html.refre-mobile :is(#personalBg,#businessBg).booking-page .modal-actions {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
max-width: 640px;
width: 100% !important;
margin: 0 auto !important;
padding: 12px 20px max(12px,env(safe-area-inset-bottom)) !important;
border: 0 !important;
border-top: 1px solid #e0e6ee !important;
border-radius: 0 !important;
box-shadow: 0 -4px 18px rgba(16,38,64,.035) !important;
display: grid !important;
grid-template-columns: 44px minmax(0,1fr) 48px !important;
grid-template-rows: minmax(32px,1fr) 48px;
column-gap: 10px !important;
row-gap: 8px !important;
position: fixed !important;
z-index: 30 !important;
background: white !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .refre-mobile-estimate {
display: flex !important;
grid-column: 1/3 !important;
grid-row: 1 !important;
gap: 8px !important;
min-width: 0;
align-items: center;
justify-content: space-between;
font-size: 14px !important;
line-height: 1.5 !important;
height: 40px;
}
html.refre-mobile .refre-mobile-estimate>span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html.refre-mobile :is(#personalBg,#businessBg) .refre-mobile-estimate strong {
font-size: 20px !important;
line-height: 1.4 !important;
white-space: nowrap;
flex: 0 0 auto;
letter-spacing: -.035em;
font-variant-numeric: tabular-nums;
}
html.refre-mobile #bMobileEstimate strong {
font-size: 15px !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .modal-actions>button {
grid-row: 2 !important;
margin: 0 !important;
height: 48px !important;
min-height: 48px !important;
padding: 8px 4px !important;
min-width: 0 !important;
font-size: 16px !important;
line-height: 1.4 !important;
border-radius: 10px !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .modal-actions>button:first-of-type {
grid-column: 1 !important;
background: white !important;
color: #3b4c60 !important;
border: 1px solid #dfe6ef !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .modal-actions .next {
grid-column: 2 !important;
width: 100% !important;
background: #102640 !important;
border-color: #102640 !important;
white-space: nowrap;
}
html.refre-mobile :is(#personalBg,#businessBg) .modal-actions:has(#pPrev[style*="hidden"],#bPrev[style*="hidden"]) .next {
grid-column: 1/3 !important;
}
html.refre-mobile .mobile-booking-contacts {
grid-column: 3 !important;
grid-row: 1/3 !important;
align-self: end;
display: grid;
gap: 8px;
margin: 0;
padding: 0;
}
html.refre-mobile .mobile-booking-contacts .refre-contact-button {
display: grid;
place-items: center;
position: relative;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border-radius: 50%;
border: 1px solid #d9dee5;
box-shadow: none;
touch-action: manipulation;
}
html.refre-mobile .mobile-booking-contacts .refre-contact-kakao {
background: #fee500;
color: #3c1e1e;
border-color: #d9dee5;
}
html.refre-mobile .mobile-booking-contacts .refre-contact-phone {
background: #102640;
color: white;
border-color: #102640;
}
html.refre-mobile .mobile-booking-contacts svg {
display: block;
width: 25px;
height: 25px;
}
html.refre-mobile .mobile-booking-contacts .refre-contact-kakao svg {
width: 29px;
height: 29px;
}
html.refre-mobile #refreContactFloating {
right: max(16px,env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom) + var(--contact-bar-offset,0px));
gap: 8px;
}
html.refre-mobile #refreContactFloating .refre-contact-button {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
box-shadow: 0 3px 12px rgba(16,38,64,.09) !important;
}
html.refre-mobile #refreContactFloating .refre-contact-kakao {
border: 1px solid #d9dee5 !important;
}
html.refre-mobile #refreContactFloating .refre-contact-button>svg {
width: 25px !important;
height: 25px !important;
}
html.refre-mobile #refreContactFloating .refre-contact-kakao>svg {
width: 29px !important;
height: 29px !important;
}
html.refre-mobile #refreContactFloating .refre-contact-label {
display: none !important;
}
html.refre-mobile body>.sticky {
right: 12px !important;
left: 12px !important;
top: auto !important;
bottom: 12px !important;
transform: none !important;
width: auto !important;
max-width: 616px;
margin: auto;
grid-template-columns: 1fr 1fr !important;
border-radius: 14px !important;
padding: 6px !important;
gap: 6px !important;
box-shadow: 0 4px 20px rgba(16,38,64,.12) !important;
}
html.refre-mobile body>.sticky a,
html.refre-mobile body>.sticky button {
font-size: 16px !important;
min-height: 44px !important;
line-height: 1.4 !important;
padding: 8px !important;
border-radius: 10px !important;
}
html.refre-mobile .mobile-keyboard-open :is(#personalBg,#businessBg) .modal-actions {
position: static !important;
width: 100% !important;
padding: 12px 0 !important;
margin-top: 20px !important;
}
html.refre-mobile .mobile-keyboard-open .booking-page-shell {
padding-bottom: 24px !important;
}
html.refre-mobile .mobile-keyboard-open .mobile-booking-contacts {
display: none !important;
}
html.refre-mobile .mobile-keyboard-open :is(#personalBg,#businessBg) .modal-actions {
grid-template-columns: 44px minmax(0,1fr) !important;
}
html.refre-mobile :is(button,a,summary,input,select,textarea):focus-visible {
outline: 2px solid #527fae;
outline-offset: 3px;
}
}
@media(max-width:350px) {
html.refre-mobile .container {
width: calc(100% - 32px) !important;
}
html.refre-mobile #heroSection>.container {
width: calc(100% - 32px) !important;
}
html.refre-mobile #heroSection.hero-unified .hero-actions {
gap: 8px !important;
}
html.refre-mobile #heroSection.hero-unified .hero-actions .btn {
font-size: 16px !important;
}
html.refre-mobile :is(#personalBg,#businessBg).booking-page .booking-page-shell {
padding-left: 16px !important;
padding-right: 16px !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .booking-page-nav {
margin-left: -16px !important;
margin-right: -16px !important;
padding-left: 16px;
padding-right: 16px;
}
html.refre-mobile #personalBg .catalog-list .direct-qty-heading,
html.refre-mobile #businessBg .b-model-header {
padding: 10px !important;
}
html.refre-mobile #personalBg .direct-type-copy .catalog-name,
html.refre-mobile #businessBg .b-model-name {
font-size: 15px !important;
}
html.refre-mobile :is(#personalBg,#businessBg).booking-page .modal-actions {
padding-left: 16px !important;
padding-right: 16px !important;
column-gap: 8px !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .refre-mobile-estimate {
font-size: 13px !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .refre-mobile-estimate strong {
font-size: 18px !important;
}
html.refre-mobile #bMobileEstimate strong {
font-size: 14px !important;
}
html.refre-mobile #price #priceBusinessZone {
padding: 16px 12px !important;
}
html.refre-mobile #price #priceBusinessZone .biz-qty-row {
padding: 10px 8px !important;
}
html.refre-mobile #price #priceBusinessZone .biz-type-select>span {
font-size: 15px !important;
}
html.refre-mobile :is(#personalBg,#businessBg) .summary-group dl>div {
grid-template-columns: 1fr !important;
gap: 2px !important;
}
}
@media(max-height:500px) and (pointer:coarse) and (max-width:950px) {
html.refre-mobile #heroSection.hero-unified {
min-height: calc(100svh - 64px);
}
html.refre-mobile #heroSection.hero-unified h1 {
font-size: 28px !important;
}
html.refre-mobile #heroSection.hero-unified .kicker {
margin-bottom: 8px !important;
}
html.refre-mobile #heroSection.hero-unified .kicker {
grid-column: 1/3;
grid-row: 1;
}
html.refre-mobile #heroSection.hero-unified h1 {
grid-column: 1;
grid-row: 2;
}
html.refre-mobile #heroSection #heroDesc {
grid-column: 1;
grid-row: 3;
}
html.refre-mobile #heroSection.hero-unified .hero-actions {
grid-column: 2;
grid-row: 2/4;
}
html.refre-mobile .refre-mobile-estimate {
height: 28px !important;
}
}
html:not(.refre-mobile) #refreContactFloating .refre-contact-kakao {
border: .5px solid #fff !important;
}
@media(max-width:768px), (max-width:950px) and (pointer:coarse) {
html.refre-mobile #heroSection.hero-unified {
align-items: stretch !important;
}
html.refre-mobile #reviews .review-gallery-panel {
position: relative;
scroll-margin-top: 0;
}
html.refre-mobile #reviews .review-feature {
border-radius: 16px !important;
}
html.refre-mobile #reviews .review-feature-copy {
padding: 20px !important;
}
html.refre-mobile #reviews .review-feature-meta {
padding-top: 16px !important;
}
html.refre-mobile #eventPopupBg {
padding: 16px !important;
}
html.refre-mobile #eventPopupBg .event-popup-text {
width: min(360px,100%) !important;
max-height: calc(100dvh - 32px) !important;
overflow-y: auto !important;
padding: 0 !important;
border-radius: 20px !important;
}
html.refre-mobile #eventPopupBg .event-popup-text .event-popup-inner {
padding: 32px 24px 20px !important;
}
html.refre-mobile #eventPopupBg .event-popup-text .event-popup-close {
top: 8px !important;
right: 8px !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
font-size: 20px !important;
}
html.refre-mobile #eventPopupBg .event-popup-text .event-popup-kicker {
font-size: 12px !important;
line-height: 1.5 !important;
margin: 0 36px 16px 0 !important;
max-width: calc(100% - 24px) !important;
letter-spacing: .05em !important;
white-space: nowrap;
}
html.refre-mobile #eventPopupBg .event-popup-text h3 {
font-size: 26px !important;
line-height: 1.35 !important;
margin: 0 0 20px !important;
}
html.refre-mobile #eventPopupBg .event-popup-text h3 em {
font-size: inherit !important;
}
html.refre-mobile #eventPopupBg .event-popup-text .event-popup-offer {
font-size: 16px !important;
line-height: 1.6 !important;
margin: 0 0 16px !important;
}
html.refre-mobile #eventPopupBg .event-popup-text .event-popup-offer strong {
display: block;
font-size: 22px !important;
line-height: 1.5 !important;
}
html.refre-mobile #eventPopupBg .event-popup-text .event-popup-offer b {
font-size: 28px !important;
}
html.refre-mobile #eventPopupBg .event-popup-text :is(.event-popup-desc,.event-popup-benefits,.event-popup-business) {
display: none !important;
}
html.refre-mobile #eventPopupBg .mobile-popup-unit-note {
font-size: 14px;
line-height: 1.6;
margin: 6px 0 0;
color: #ced9e8;
}
html.refre-mobile #eventPopupBg .event-popup-text .event-popup-book {
font-size: 16px !important;
line-height: 1.5 !important;
min-height: 48px !important;
padding: 12px !important;
margin-top: 24px !important;
border-radius: 10px !important;
}
html.refre-mobile #eventPopupBg .event-popup-text .event-popup-hide {
width: 100% !important;
min-height: 44px !important;
font-size: 14px !important;
line-height: 1.5 !important;
margin: 4px 0 0 !important;
padding: 10px !important;
text-align: center !important;
}
}
@media(max-height:500px) and (pointer:coarse) and (max-width:950px) {
html.refre-mobile #heroSection.hero-unified {
padding: 24px 0 !important;
}
html.refre-mobile #heroSection.hero-unified h1 {
margin: 0 !important;
}
html.refre-mobile #heroSection.hero-unified .hero-actions {
margin: 0 !important;
}
html.refre-mobile #eventPopupBg .event-popup-text {
width: min(520px,100%) !important;
}
html.refre-mobile #eventPopupBg .event-popup-text .event-popup-inner {
padding: 20px 24px !important;
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0 20px;
}
html.refre-mobile #eventPopupBg .event-popup-kicker {
grid-column: 1/3;
}
html.refre-mobile #eventPopupBg #eventPopupTitle {
grid-column: 1;
grid-row: 2/4;
margin: 0 !important;
}
html.refre-mobile #eventPopupBg .event-popup-offer {
grid-column: 2;
grid-row: 2/4;
margin: 0 !important;
}
html.refre-mobile #eventPopupBg .mobile-popup-unit-note {
grid-column: 1/3;
}
html.refre-mobile #eventPopupBg .event-popup-book {
grid-column: 1;
align-self: center;
margin-top: 12px !important;
}
html.refre-mobile #eventPopupBg .event-popup-hide {
grid-column: 2;
align-self: center;
margin-top: 12px !important;
}
}
@media(max-width:768px), (max-width:950px) and (pointer:coarse) {
html.refre-mobile body>.sticky {
display: none !important;
}
html.refre-mobile #refreContactFloating {
bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
html.refre-mobile #price .service-showcase-v4 {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html.refre-mobile #price .service-v4-head {
max-width: none !important;
}
html.refre-mobile #price .service-v4-head .section-label {
display: none !important;
}
html.refre-mobile #price .service-v4-head h3 {
margin: 0 0 8px !important;
font-size: 20px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
html.refre-mobile #price .service-v4-head p {
margin: 0 !important;
line-height: 1.6 !important;
color: #3b4c60 !important;
}
html.refre-mobile #price .service-vertical-layout {
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
}
html.refre-mobile #price #serviceTabs {
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #dce4ee !important;
border-radius: 12px !important;
background: #fff !important;
overflow: hidden !important;
}
html.refre-mobile #price #serviceTabs button {
-webkit-tap-highlight-color: transparent;
display: grid !important;
grid-template-columns: minmax(0,1fr) auto !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid #e8edf3 !important;
border-radius: 0 !important;
background: #fff !important;
color: #223d5c !important;
box-shadow: none !important;
transform: none !important;
text-align: left !important;
}
html.refre-mobile #price #serviceTabs button:last-child {
border-bottom: 0 !important;
}
html.refre-mobile #price #serviceTabs .service-menu-name {
display: block !important;
min-width: 0;
}
html.refre-mobile #price #serviceTabs :is(strong,em) {
font-weight: 600 !important;
letter-spacing: -.02em !important;
color: inherit !important;
white-space: nowrap !important;
}
html.refre-mobile #price #serviceTabs em {
text-align: right !important;
font-variant-numeric: tabular-nums;
}
html.refre-mobile #price #serviceTabs small {
display: none !important;
}
html.refre-mobile #price #serviceTabs button:focus-visible {
outline: 2px solid #6e9fdd !important;
outline-offset: -3px !important;
}
html.refre-mobile #price .service-vertical-detail {
box-shadow: none !important;
}
html.refre-mobile #price .service-vertical-panel {
padding: 20px !important;
animation: none !important;
}
html.refre-mobile #price .service-v4-top {
padding: 0 !important;
}
html.refre-mobile #price .service-detail-label {
line-height: 1.5 !important;
}
html.refre-mobile #price .service-book {
border-radius: 10px !important;
box-shadow: none !important;
}
html.refre-mobile #reviews .review-gallery-head>p {
font-size: 14px !important;
line-height: 1.6 !important;
}
html.refre-mobile #reviews .review-mode-tabs button {
line-height: 1.5 !important;
}
html.refre-mobile #reviews .review-mini-grid {
display: none !important;
}
html.refre-mobile #reviews .review-gallery-panel {
gap: 16px !important;
overflow-anchor: none;
}
html.refre-mobile #reviews .review-feature {
transition: none !important;
transform: none !important;
opacity: 1 !important;
touch-action: pan-y;
}
html.refre-mobile #reviews .review-feature-copy {
min-height: 244px !important;
display: flex;
flex-direction: column;
}
html.refre-mobile #reviews .review-feature blockquote {
min-height: 62px;
margin: 20px 0 !important;
font-size: 18px !important;
line-height: 1.7 !important;
}
html.refre-mobile #reviews .review-feature-meta {
margin-top: auto;
gap: 12px !important;
}
html.refre-mobile #reviews .review-feature-photo {
min-height: 160px !important;
}
html.refre-mobile #reviews .review-feature-meta strong {
font-size: 16px !important;
line-height: 1.5 !important;
}
}
@media(max-height:500px) and (pointer:coarse) and (max-width:950px) {
html.refre-mobile #price #serviceTabs {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
html.refre-mobile #price #serviceTabs button:nth-child(odd) {
border-right: 1px solid #e8edf3 !important;
}
html.refre-mobile #price #serviceTabs button:last-child {
grid-column: 1/-1;
border-right: 0 !important;
}
html.refre-mobile #reviews .review-feature-copy {
min-height: 220px !important;
}
}
@media(min-width:951px) {
html:not(.refre-mobile) body>.header .nav {
display: grid !important;
grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
gap: 16px !important;
}
html:not(.refre-mobile) .header .logo {
justify-self: start;
}
html:not(.refre-mobile) .header .navlinks {
justify-self: center;
white-space: nowrap;
gap: 22px;
}
html:not(.refre-mobile) .header .header-actions {
justify-self: end;
}
}
@media(min-width:951px) and (max-width:1100px) {
html:not(.refre-mobile) .header .navlinks {
gap: 16px;
font-size: 15px;
}
@media(min-width:769px) {
html:not(.refre-mobile) .header .navlinks {
font-size: 16px;
}
}
html:not(.refre-mobile) .header .header-cta {
padding-inline: 12px;
}
}
@media(max-width:768px), (max-width:950px) and (pointer:coarse) {
html.refre-mobile {
--booking-header-height: 56px;
scroll-padding-top: 72px;
}
html.refre-mobile .header .nav {
padding-inline: 0 !important;
}
html.refre-mobile .header .header-actions .header-cta {
min-height: 40px !important;
padding: 8px 9px !important;
font-size: 13px !important;
}
html.refre-mobile #heroSection.hero-unified {
padding: 24px 0 12px !important;
background: #fff !important;
min-height: 0 !important;
}
html.refre-mobile #heroSection.hero-unified .kicker {
font-size: 13px !important;
font-weight: 600 !important;
margin: 0 0 8px !important;
color: #42638a !important;
}
html.refre-mobile #heroSection.hero-unified h1 {
font-size: 28px !important;
line-height: 1.3 !important;
letter-spacing: -.045em !important;
margin: 0 0 10px !important;
}
html.refre-mobile #heroSection #heroTitleA {
color: #102640 !important;
}
html.refre-mobile #heroSection #heroTitleB {
color: #2866d7 !important;
}
html.refre-mobile #heroSection #heroDesc {
max-width: none !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: #4a5b70 !important;
}
html.refre-mobile #heroSection.hero-unified .hero-actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
max-width: none !important;
margin: 16px 0 0 !important;
}
html.refre-mobile #heroSection.hero-unified .hero-actions .btn {
height: 48px !important;
min-height: 48px !important;
font-size: 15px !important;
padding: 12px !important;
border-radius: 11px !important;
}
html.refre-mobile #heroSection.hero-unified .hero-actions .business-open {
height: 44px !important;
min-height: 44px !important;
border: 0 !important;
background: transparent !important;
color: #53677e !important;
font-size: 14px !important;
font-weight: 600 !important;
}
html.refre-mobile main section {
padding: 40px 0 !important;
}
html.refre-mobile main h2,
html.refre-mobile .process-heading h2,
html.refre-mobile .review-gallery-head h2,
html.refre-mobile #price .section-head h2 {
font-size: 22px !important;
line-height: 1.4 !important;
letter-spacing: -.035em !important;
}
html.refre-mobile .section-label,
html.refre-mobile main .section-label {
font-size: 12px !important;
line-height: 1.5 !important;
letter-spacing: .04em !important;
color: #708198 !important;
margin-bottom: 6px !important;
}
html.refre-mobile .section-head p,
html.refre-mobile .process-heading>p,
html.refre-mobile .review-gallery-head p,
html.refre-mobile .faq-title>p {
font-size: 14px !important;
line-height: 1.65 !important;
color: #4a5b70 !important;
}
html.refre-mobile #price {
background: #fff !important;
padding-top: 28px !important;
}
html.refre-mobile #price .section-head {
display: block !important;
margin-bottom: 16px !important;
}
html.refre-mobile #price .section-head h2 {
margin: 0 !important;
}
html.refre-mobile #price .price-explorer {
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
gap: 0 !important;
}
html.refre-mobile #price .price-master-tabs {
display: flex !important;
border: 0 !important;
padding: 0 !important;
background: transparent !important;
gap: 8px !important;
margin: 0 0 16px !important;
}
html.refre-mobile #price .price-master-tabs button {
flex: 0 1 auto !important;
min-height: 44px !important;
padding: 10px 16px !important;
border-radius: 24px !important;
font-size: 14px !important;
border: 1px solid #dfe5ed !important;
background: #fff !important;
color: #4a5b70 !important;
box-shadow: none !important;
}
html.refre-mobile #price .price-master-tabs button.on {
background: #102640 !important;
color: #fff !important;
border-color: #102640 !important;
}
html.refre-mobile #price .service-v4-head {
margin: 0 0 12px !important;
}
html.refre-mobile #price .service-v4-head h3 {
display: none !important;
}
html.refre-mobile #price .service-v4-head p {
font-size: 14px !important;
max-width: none !important;
}
html.refre-mobile #price #serviceTabs button {
min-height: 48px !important;
padding: 11px 14px !important;
}
html.refre-mobile #price #serviceTabs :is(strong,em) {
font-size: 15px !important;
line-height: 1.6 !important;
}
html.refre-mobile #price #serviceTabs button.on {
background: #edf3fb !important;
color: #17304b !important;
box-shadow: inset 3px 0 #2d66be !important;
}
html.refre-mobile #price .service-vertical-layout {
gap: 16px !important;
}
html.refre-mobile #price .service-vertical-detail {
border: 0 !important;
border-radius: 14px !important;
background: #f6f8fb !important;
overflow: hidden !important;
}
html.refre-mobile #price .service-showcase-v4 .service-vertical-panel {
padding: 16px !important;
background: transparent !important;
}
html.refre-mobile #price .service-v4-top {
display: grid !important;
grid-template-columns: minmax(0,1fr) 92px !important;
gap: 12px !important;
align-items: center !important;
}
html.refre-mobile #price .service-v4-copy {
grid-column: 1;
grid-row: 1;
order: 0 !important;
min-width: 0 !important;
}
html.refre-mobile #price .service-v4-visual {
grid-column: 2;
grid-row: 1;
order: 0 !important;
}
html.refre-mobile #price .service-detail-label {
font-size: 12px !important;
margin-bottom: 4px !important;
}
html.refre-mobile #price .service-v4-copy h4 {
font-size: 18px !important;
margin: 0 0 6px !important;
}
html.refre-mobile #price .service-detail-price {
font-size: 20px !important;
line-height: 1.4 !important;
margin: 0 0 8px !important;
}
html.refre-mobile #price .service-detail-price::before {
display: none !important;
}
html.refre-mobile #price .service-detail-price {
width: auto !important;
white-space: normal !important;
border: 0 !important;
}
html.refre-mobile #price .service-v4-copy p {
font-size: 14px !important;
line-height: 1.65 !important;
}
html.refre-mobile #price .service-v4-visual {
width: 92px !important;
height: 108px !important;
background: transparent !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
}
html.refre-mobile #price .service-v4-visual .equipment-photo {
width: 100% !important;
height: 98px !important;
max-height: 98px !important;
mix-blend-mode: multiply;
}
html.refre-mobile #price .service-v4-bottom {
margin-top: 14px !important;
padding: 14px 0 0 !important;
gap: 14px !important;
border-top: 1px solid #e0e6ee !important;
}
html.refre-mobile #price .service-v4-work>strong {
font-size: 14px !important;
}
html.refre-mobile #price .service-clean-list {
margin-top: 8px !important;
gap: 4px !important;
}
html.refre-mobile #price .service-clean-list li {
font-size: 14px !important;
line-height: 1.55 !important;
padding: 0 !important;
}
html.refre-mobile #price .service-book {
font-size: 15px !important;
height: 46px !important;
min-height: 46px !important;
}
html.refre-mobile #workGuide {
padding-top: 32px !important;
background: white !important;
}
html.refre-mobile .work-guide-tabs {
margin: 0 !important;
padding: 0 !important;
gap: 24px !important;
border: 0 !important;
border-bottom: 1px solid #e5eaf0 !important;
background: transparent !important;
box-shadow: none !important;
}
html.refre-mobile .work-guide-tabs button {
flex: 0 0 auto !important;
min-height: 46px !important;
font-size: 15px !important;
padding: 10px 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: #7b8898 !important;
box-shadow: none !important;
}
html.refre-mobile .work-guide-tabs button[aria-selected=true] {
color: #102640 !important;
box-shadow: inset 0 -2px #102640 !important;
}
html.refre-mobile #workflow {
padding-top: 24px !important;
background: #fff !important;
}
html.refre-mobile #workflow .process-heading {
margin: 0 0 20px !important;
max-width: none !important;
}
html.refre-mobile #workflow .process-heading h2 {
margin: 0 0 8px !important;
}
html.refre-mobile #workflow .process-heading h2,
html.refre-mobile #workflow .process-detail-copy h3,
html.refre-mobile #workflow .process-bottom-cta strong {
color: #17304b !important;
}
html.refre-mobile #workflow .process-heading>p,
html.refre-mobile #workflow .process-detail-copy>p,
html.refre-mobile #workflow .process-detail-note strong {
color: #4a5b70 !important;
}
html.refre-mobile #workflow .process-a-layout {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
html.refre-mobile #workflow .process-timeline {
display: grid !important;
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 6px !important;
}
html.refre-mobile #workflow .process-step-tab {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
gap: 2px !important;
min-height: 60px !important;
padding: 8px 4px !important;
border: 0 !important;
border-radius: 9px !important;
background: #f4f6f9 !important;
box-shadow: none !important;
}
html.refre-mobile #workflow .process-step-tab.current {
background: #102640 !important;
color: #fff !important;
}
html.refre-mobile #workflow .process-step-tab:not(.current) {
color: #536a85 !important;
}
html.refre-mobile #workflow .process-step-num {
font-size: 11px !important;
line-height: 1.4 !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
color: inherit !important;
}
html.refre-mobile #workflow .process-step-copy strong {
font-size: 13px !important;
line-height: 1.5 !important;
color: inherit !important;
}
html.refre-mobile #workflow :is(.process-step-rail,.process-step-arrow,.process-step-copy small) {
display: none !important;
}
html.refre-mobile #workflow .process-detail-stage {
border: 0 !important;
border-radius: 12px !important;
background: #f6f8fb !important;
box-shadow: none !important;
overflow: hidden;
}
html.refre-mobile #workflow .process-detail-panel {
grid-template-rows: 120px auto !important;
min-height: 0 !important;
animation: none !important;
}
html.refre-mobile #workflow .process-detail-media {
height: 120px !important;
min-height: 120px !important;
border-radius: 0 !important;
}
html.refre-mobile #workflow .process-detail-media {
background: #edf2f8 !important;
}
html.refre-mobile #workflow .process-detail-media::after {
display: none !important;
}
html.refre-mobile #workflow .process-detail-note span {
background: #e8eff8 !important;
color: #4d6b92 !important;
}
html.refre-mobile #workflow .process-detail-index {
top: 8px !important;
right: 10px !important;
font-size: 11px !important;
line-height: 1.5 !important;
border: 0 !important;
padding: 2px 4px !important;
background: transparent !important;
color: #687f99 !important;
}
html.refre-mobile #workflow .process-detail-copy {
padding: 16px !important;
min-height: 0 !important;
}
html.refre-mobile #workflow .process-detail-copy h3 {
font-size: 18px !important;
margin: 0 0 8px !important;
}
html.refre-mobile #workflow .process-detail-copy>p {
font-size: 14px !important;
line-height: 1.65 !important;
}
html.refre-mobile #workflow .process-detail-eyebrow {
display: none !important;
}
html.refre-mobile #workflow .process-detail-note {
padding-top: 12px !important;
margin-top: 12px !important;
font-size: 13px !important;
gap: 4px !important;
}
html.refre-mobile #workflow .process-detail-note :is(span,strong) {
font-size: 13px !important;
line-height: 1.6 !important;
}
html.refre-mobile #workflow .process-bottom-cta {
padding: 16px 0 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
margin-top: 0 !important;
gap: 12px !important;
}
html.refre-mobile #workflow .process-bottom-cta strong {
font-size: 14px !important;
}
html.refre-mobile #workflow .process-bottom-cta span {
display: none !important;
}
html.refre-mobile #workflow .process-bottom-cta .btn {
min-height: 44px !important;
padding: 10px 16px !important;
font-size: 14px !important;
}
html.refre-mobile #why .strength-bento-copy p {
font-size: 14px !important;
line-height: 1.65 !important;
}
html.refre-mobile #why .strength-bento-actions {
margin-top: 16px !important;
}
html.refre-mobile #why .strength-bento-grid {
gap: 12px !important;
}
html.refre-mobile #why .strength-bento-card {
display: grid !important;
grid-template-columns: 52px minmax(0,1fr) !important;
padding: 16px !important;
gap: 12px !important;
border-radius: 12px !important;
}
html.refre-mobile #why .strength-bento-visual {
height: 52px !important;
min-height: 0 !important;
border: 0 !important;
padding: 0 !important;
}
html.refre-mobile #why .strength-bento-visual svg {
width: 44px !important;
height: 44px !important;
}
html.refre-mobile #why .strength-bento-body {
padding: 0 !important;
}
html.refre-mobile #why .strength-bento-no {
display: none !important;
}
html.refre-mobile #why .strength-bento-body h3 {
font-size: 17px !important;
margin: 0 0 6px !important;
}
html.refre-mobile #why .strength-bento-body p {
font-size: 14px !important;
line-height: 1.65 !important;
}
html.refre-mobile #why.strength-bento .strength-bento-card {
grid-template-columns: 52px minmax(0,1fr) !important;
padding: 16px !important;
min-height: 0 !important;
gap: 12px !important;
}
html.refre-mobile #why.strength-bento .strength-bento-visual {
position: static !important;
display: grid !important;
place-items: center !important;
align-self: start !important;
width: 52px !important;
height: 52px !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
background: transparent !important;
}
html.refre-mobile #why.strength-bento .strength-bento-visual::before,
html.refre-mobile #why.strength-bento .strength-bento-visual::after {
display: none !important;
}
html.refre-mobile #why.strength-bento .strength-bento-visual svg {
position: static !important;
transform: none !important;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
}
html.refre-mobile #why.strength-bento .strength-bento-body {
padding: 0 !important;
}
html.refre-mobile #price #priceBusinessZone>p {
font-size: 15px !important;
line-height: 1.65 !important;
}
html.refre-mobile #reviews {
background: #fff !important;
color: #102640 !important;
border-top: 8px solid #f4f6f9 !important;
overflow: hidden !important;
}
html.refre-mobile #reviews .review-gallery-head h2 {
color: #102640 !important;
margin: 0 0 8px !important;
}
html.refre-mobile #reviews .review-gallery-head {
margin-bottom: 16px !important;
}
html.refre-mobile #reviews .review-gallery-head>p {
color: #4a5b70 !important;
}
html.refre-mobile #reviews .review-mode-tabs {
margin-top: 16px !important;
gap: 8px !important;
}
html.refre-mobile #reviews .review-mode-tabs button {
min-height: 44px !important;
padding: 10px 16px !important;
font-size: 14px !important;
color: #4a5b70 !important;
background: #fff !important;
border: 1px solid #dfe5ed !important;
box-shadow: none !important;
}
html.refre-mobile #reviews .review-mode-tabs button.on {
background: #102640 !important;
color: #fff !important;
border-color: #102640 !important;
}
html.refre-mobile #reviews .review-feature {
display: none !important;
}
html.refre-mobile #faq {
background: #f7f9fc !important;
}
html.refre-mobile #faq .faq-title {
margin-bottom: 20px !important;
}
html.refre-mobile #faq .faq-tabs button {
min-height: 44px !important;
font-size: 14px !important;
padding: 10px 16px !important;
}
html.refre-mobile #faq .faq-list {
gap: 0 !important;
border-top: 1px solid #e0e6ee;
}
html.refre-mobile #faq .faq {
border: 0 !important;
border-bottom: 1px solid #e0e6ee !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html.refre-mobile #faq .faq button {
padding: 16px 0 !important;
font-size: 15px !important;
line-height: 1.6 !important;
min-height: 52px !important;
}
html.refre-mobile #faq .faq .answer {
font-size: 14px !important;
line-height: 1.7 !important;
}
html.refre-mobile .final-cta .final-box {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
gap: 20px !important;
}
html.refre-mobile .final-cta p {
font-size: 14px !important;
line-height: 1.65 !important;
}
html.refre-mobile .final-cta .final-actions {
width: 100%;
display: grid !important;
grid-template-columns: 1fr 1fr;
}
html.refre-mobile .final-cta .btn {
font-size: 14px !important;
padding: 12px 8px !important;
border-radius: 10px !important;
min-height: 48px !important;
}
}
@media(max-width:350px) {
html.refre-mobile #heroSection.hero-unified h1 {
font-size: 26px !important;
}
}
@media(min-width:600px) and (max-width:768px), (max-height:500px) and (pointer:coarse) and (max-width:950px) {
html.refre-mobile #heroSection.hero-unified .kicker {
grid-column: 1;
grid-row: 1;
}
html.refre-mobile #heroSection.hero-unified h1 {
grid-column: 1;
grid-row: 2;
}
html.refre-mobile #heroSection #heroDesc {
grid-column: 1;
grid-row: 3;
}
html.refre-mobile #heroSection.hero-unified .hero-actions {
grid-column: 1/3;
grid-row: 4;
grid-template-columns: 1fr 1fr !important;
align-items: center;
gap: 12px !important;
}
}
@media(max-width:768px), (max-width:950px) and (pointer:coarse) {
html.refre-mobile .rf-mobile-source {
display: none !important;
}
#refreMobileHome {
--rf-navy: #102640;
--rf-ink: #17304b;
--rf-muted: #4a5b70;
--rf-blue: #2563cf;
--rf-line: #e2e7ee;
margin: 0;
padding: 0;
background: #fff;
color: var(--rf-ink);
font-family: 'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size: 15px;
line-height: 1.6;
letter-spacing: -.025em;
overflow: clip;
}
#refreMobileHome *,
#refreMobileHome *::before,
#refreMobileHome *::after {
box-sizing: border-box;
}
#refreMobileHome :is(h1,h2,h3,p,ul,ol,figure) {
margin: 0;
padding: 0;
}
#refreMobileHome :is(button,a,summary) {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
#refreMobileHome button {
font: inherit;
letter-spacing: inherit;
border: 0;
box-shadow: none;
}
#refreMobileHome :is(button,a,summary):focus-visible {
outline: 3px solid #77a6f8;
outline-offset: 3px;
}
#refreMobileHome .rf-wrap {
width: calc(100% - 40px);
max-width: 640px;
margin-inline: auto;
}
#refreMobileHome .rf-block {
padding: 36px 0;
scroll-margin-top: 72px;
}
#refreMobileHome h2 {
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
letter-spacing: -.04em !important;
color: var(--rf-ink) !important;
margin: 0 !important;
}
#refreMobileHome h3 {
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.5 !important;
letter-spacing: -.025em !important;
color: var(--rf-ink) !important;
}
#refreMobileHome .rf-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
line-height: 1.5;
color: var(--rf-muted);
margin: 0 0 6px;
}
#refreMobileHome .rf-intro {
font-size: 14px;
line-height: 1.65;
color: var(--rf-muted);
margin: 8px 0 20px;
}
#refreMobileHome .rf-hero {
color: var(--rf-navy);
}
#refreMobileHome .rf-hero .rf-eyebrow {
font-weight: 600;
letter-spacing: 0;
}
#refreMobileHome .rf-hero h1 {
font-size: 27px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -.025em !important;
margin: 0 0 12px !important;
color: var(--rf-navy) !important;
}
#refreMobileHome .rf-hero h1 span {
display: block;
color: var(--rf-navy) !important;
font-weight: inherit !important;
}
#refreMobileHome .rf-hero h1 em {
display: block;
color: var(--rf-navy) !important;
font-style: normal;
font-weight: inherit !important;
}
#refreMobileHome .rf-hero-description {
font-weight: 400;
margin: 0;
}
#refreMobileHome .rf-button {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 12px 14px;
border: 1px solid var(--rf-navy);
border-radius: 10px;
background: var(--rf-navy);
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
text-align: center;
}
#refreMobileHome .rf-text-button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 10px 0;
background: transparent;
color: var(--rf-ink);
font-size: 14px;
font-weight: 600;
line-height: 1.5;
}
#refreMobileHome .rf-hero .rf-text-button {
font-size: 13px;
font-weight: 600;
}
#refreMobileHome .rf-discount {
background: #f7f8fa;
border-bottom: 0;
}
#refreMobileHome .rf-discount .rf-wrap {
border-top: 1px solid #e0e5eb;
}
#refreMobileHome .rf-discount p {
font-size: 12px;
color: #4a5b70;
line-height: 1.65;
margin-top: 3px;
}
#refreMobileHome .rf-pricing {
background: #f3f5f8;
}
#refreMobileHome .rf-price-panel {
padding: 8px 16px 16px;
background: #fff;
border: 1px solid var(--rf-line);
border-radius: 16px;
overflow: hidden;
}
#refreMobileHome .rf-models {
list-style: none;
}
#refreMobileHome .rf-models li+li {
border-top: 1px solid #edf0f4;
}
#refreMobileHome .rf-model {
width: 100%;
display: grid;
grid-template-columns: 42px minmax(0,1fr) auto;
align-items: center;
gap: 12px;
min-height: 68px;
padding: 10px 0;
background: transparent;
text-align: left;
position: relative;
color: var(--rf-ink);
}
#refreMobileHome .rf-model::before {
content: "";
position: absolute;
inset: 4px -8px;
border-radius: 9px;
background: transparent;
z-index: 0;
}
#refreMobileHome .rf-model>* {
position: relative;
z-index: 1;
}
#refreMobileHome .rf-model[aria-pressed="true"]::before {
background: #eaf1fc;
}
#refreMobileHome .rf-thumb {
display: grid;
place-items: center;
height: 42px;
}
#refreMobileHome .rf-thumb svg {
display: block;
width: 42px !important;
height: 42px !important;
max-height: none !important;
mix-blend-mode: multiply;
filter: none !important;
}
#refreMobileHome .rf-model-name {
font-size: 14px;
line-height: 1.4;
font-weight: 600;
white-space: nowrap;
}
#refreMobileHome .rf-model-name small {
display: block;
font-size: 11px;
line-height: 1.5;
font-weight: 400;
color: var(--rf-muted);
margin-top: 3px;
}
#refreMobileHome .rf-price-value {
font-size: 14px;
font-weight: 700;
line-height: 1.4;
font-variant-numeric: tabular-nums;
white-space: nowrap;
letter-spacing: -.025em;
text-align: right;
}
#refreMobileHome .rf-model[aria-pressed="true"] :is(.rf-model-name,.rf-price-value) {
color: #2052a2;
}
#refreMobileHome .rf-model-detail {
border-top: 1px solid var(--rf-line);
margin-top: 8px;
padding-top: 16px;
}
#refreMobileHome .rf-model-detail h3 {
font-size: 15px !important;
}
#refreMobileHome .rf-model-detail p {
font-size: 13px;
line-height: 1.65;
color: var(--rf-muted);
}
#refreMobileHome .rf-work-tags {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
list-style: none;
font-size: 12px;
color: #50667c;
line-height: 1.7;
margin: 10px 0 16px;
}
#refreMobileHome .rf-work-tags li::before {
content: "✓";
color: #426c9f;
margin-right: 4px;
}
#refreMobileHome .rf-price-note {
font-size: 12px;
line-height: 1.65;
color: var(--rf-muted);
margin: 12px 0 0;
}
#refreMobileHome .rf-business-link {
border-top: 1px solid var(--rf-line);
padding-top: 16px;
margin-top: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#refreMobileHome .rf-business-link strong {
display: block;
font-size: 14px;
font-weight: 700;
}
#refreMobileHome .rf-business-link p {
font-size: 12px;
color: var(--rf-muted);
margin-top: 3px;
}
#refreMobileHome .rf-business-link button {
flex: none;
min-height: 44px;
padding: 8px 0 8px 8px;
background: transparent;
font-size: 13px;
font-weight: 700;
color: var(--rf-blue);
}
#refreMobileHome .rf-contact-inline {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
}
#refreMobileHome .rf-contact-inline>span {
font-size: 12px;
color: var(--rf-muted);
margin-right: auto;
}
#refreMobileHome .rf-contact-inline a {
display: grid;
place-items: center;
border-radius: 50%;
width: 40px;
height: 40px;
flex: 0 0 40px;
box-shadow: none;
}
#refreMobileHome .rf-contact-inline a:first-of-type {
background: #fee500;
border: .5px solid #fff;
color: #281e1e;
}
#refreMobileHome .rf-contact-inline a:last-of-type {
background: var(--rf-navy);
border: 1px solid #dae1e9;
color: #fff;
}
#refreMobileHome .rf-contact-inline svg {
display: block;
width: 23px;
height: 23px;
max-width: 100%;
overflow: visible;
}
#refreMobileHome .rf-trust-list {
list-style: none;
margin: 20px 0 0;
}
#refreMobileHome .rf-trust-list li {
display: grid;
grid-template-columns: 32px minmax(0,1fr);
gap: 12px;
padding: 16px 0;
border-bottom: 1px solid var(--rf-line);
}
#refreMobileHome .rf-trust-list li:first-child {
padding-top: 0;
}
#refreMobileHome .rf-trust-list li:last-child {
border-bottom: 0;
}
#refreMobileHome .rf-trust-icon {
color: #35618a;
}
#refreMobileHome .rf-trust-icon svg {
width: 21px;
height: 21px;
}
#refreMobileHome .rf-trust-list h3 {
font-size: 15px !important;
line-height: 1.5 !important;
}
#refreMobileHome .rf-trust-list p {
font-size: 14px;
line-height: 1.65;
color: var(--rf-muted);
margin-top: 4px;
}
#refreMobileHome .rf-process {
padding-top: 36px;
}
#refreMobileHome .rf-timeline {
list-style: none;
}
#refreMobileHome .rf-timeline li {
display: grid;
grid-template-columns: 30px minmax(0,1fr);
gap: 12px;
position: relative;
padding-bottom: 20px;
}
#refreMobileHome .rf-timeline li:last-child {
padding-bottom: 0;
}
#refreMobileHome .rf-timeline li:not(:last-child)::before {
content: "";
position: absolute;
left: 14px;
top: 32px;
bottom: 3px;
border-left: 1px solid #dfe6ee;
}
#refreMobileHome .rf-step {
display: grid;
place-items: center;
align-self: start;
}
#refreMobileHome .rf-timeline h3 {
font-size: 15px !important;
padding-top: 3px;
}
#refreMobileHome .rf-timeline p {
font-size: 13px;
color: var(--rf-muted);
line-height: 1.65;
margin-top: 4px;
}
#refreMobileHome .rf-faq-tabs {
display: flex;
gap: 20px;
border-bottom: 1px solid var(--rf-line);
margin-top: 16px;
}
#refreMobileHome .rf-faq-tabs button {
background: transparent;
min-height: 44px;
border-bottom: 2px solid transparent;
color: var(--rf-muted);
padding: 8px 0;
font-size: 14px;
font-weight: 600;
}
#refreMobileHome .rf-faq-tabs button[aria-selected="true"] {
color: var(--rf-navy);
border-color: var(--rf-navy);
font-weight: 700;
}
#refreMobileHome .rf-faq details {
border-bottom: 1px solid var(--rf-line);
}
#refreMobileHome .rf-faq summary {
position: relative;
padding: 16px 26px 16px 0;
min-height: 54px;
list-style: none;
font-size: 14px;
line-height: 1.6;
cursor: pointer;
color: #344d66;
}
#refreMobileHome .rf-faq summary::-webkit-details-marker {
display: none;
}
#refreMobileHome .rf-faq summary::after {
content: "";
position: absolute;
right: 3px;
top: 21px;
width: 7px;
height: 7px;
border-right: 1.5px solid #6e8195;
border-bottom: 1.5px solid #6e8195;
transform: rotate(45deg);
}
#refreMobileHome .rf-faq details[open] summary::after {
transform: rotate(225deg);
top: 25px;
}
#refreMobileHome .rf-faq details p {
font-size: 13px;
line-height: 1.75;
color: var(--rf-muted);
padding: 0 20px 16px 0;
}
#refreMobileHome .rf-footer {
background: #f3f5f8;
border-top: 1px solid var(--rf-line);
padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
}
#refreMobileHome .rf-footer h2 {
font-size: 19px !important;
}
#refreMobileHome .rf-footer>div>p {
font-size: 13px;
color: var(--rf-muted);
margin-top: 8px;
}
#refreMobileHome .rf-footer-links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 20px;
margin: 14px 0 20px;
}
#refreMobileHome .rf-footer-links a {
font-size: 15px;
line-height: 1.5;
font-weight: 700;
min-height: 44px;
display: flex;
align-items: center;
}
#refreMobileHome .rf-footer-links a:last-child {
font-size: 14px;
color: #35649a;
}
#refreMobileHome .rf-footer .rf-footer-meta {
font-size: 12px;
line-height: 1.7;
color: #74808f;
border-top: 1px solid var(--rf-line);
padding-top: 16px;
margin-top: 16px;
}
html.refre-mobile.rf-contact-clear #refreContactFloating {
visibility: hidden !important;
pointer-events: none !important;
}
html.refre-mobile #refreContactFloating {
bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}
@media(min-width:600px) {
#refreMobileHome .rf-timeline {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
}
@media(max-width:350px) {
#refreMobileHome .rf-wrap {
width: calc(100% - 32px);
}
#refreMobileHome .rf-hero h1 {
font-size: 26px !important;
}
#refreMobileHome .rf-price-panel {
padding-inline: 12px;
}
#refreMobileHome .rf-model {
grid-template-columns: 34px minmax(0,1fr) auto;
gap: 8px;
}
#refreMobileHome .rf-thumb svg {
width: 34px !important;
height: 38px !important;
}
#refreMobileHome .rf-model-name,
#refreMobileHome .rf-price-value {
font-size: 13px;
}
}
@media(max-height:500px) and (orientation:landscape) {
#refreMobileHome .rf-hero .rf-wrap {
grid-template-columns: 1fr 1fr;
gap: 0 24px;
max-width: 820px;
}
#refreMobileHome .rf-hero .rf-eyebrow,
#refreMobileHome .rf-hero h1,
#refreMobileHome .rf-hero-description {
grid-column: 1;
}
#refreMobileHome .rf-hero .rf-button {
grid-column: 1;
}
#refreMobileHome .rf-hero .rf-text-button {
grid-column: 2;
}
}
}
@media(max-width:768px), (max-width:950px) and (pointer:coarse) {
@media(min-width:600px), (max-height:500px) and (orientation:landscape) {
#refreMobileHome .rf-hero .rf-wrap {
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
column-gap: 24px;
row-gap: 0;
max-width: 640px;
align-items: start;
}
#refreMobileHome .rf-hero .rf-eyebrow {
grid-column: 1;
grid-row: 1;
}
#refreMobileHome .rf-hero h1 {
grid-column: 1;
grid-row: 2;
}
#refreMobileHome .rf-hero-description {
grid-column: 1;
grid-row: 3;
}
#refreMobileHome .rf-hero .rf-button {
grid-column: 1;
grid-row: 4;
margin: 16px 0 0;
}
#refreMobileHome .rf-hero .rf-text-button {
grid-column: 2;
grid-row: 4;
margin: 16px 0 0;
align-self: center;
}
}
}
@media(min-width:769px) {
html:not(.refre-mobile) #personalBg.booking-page .booking-page-shell {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
html:not(.refre-mobile) #personalBg .booking-page-layout,
html:not(.refre-mobile) #personalBg .form-modal {
min-width: 0;
}
html:not(.refre-mobile) #personalBg .selection-tray {
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}
html:not(.refre-mobile) #personalBg .selection-tray-heading {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
min-width: 0;
}
html:not(.refre-mobile) #personalBg .selection-tray #pEstimatedPreview {
flex-direction: column;
align-items: flex-end;
justify-content: center;
flex-wrap: nowrap;
gap: 2px;
min-height: 56px;
margin: 0;
}
html:not(.refre-mobile) #personalBg .selection-tray #pEstimatedPreview>span {
white-space: nowrap;
}
html:not(.refre-mobile) #personalBg .selection-tray #pEstimatedPreview .final-quote-amount {
white-space: nowrap;
}
html:not(.refre-mobile) #personalBg #pUnknownHelp {
display: block !important;
overflow-wrap: anywhere;
white-space: normal;
}
html:not(.refre-mobile) #personalBg #pUnknownHelp[hidden] {
visibility: hidden;
}
}
@media(min-width:769px) {
html:not(.refre-mobile) body>.header .nav,
html:not(.refre-mobile) #heroSection>.container {
width: 100% !important;
max-width: 1344px !important;
padding-inline: 48px !important;
margin-inline: auto !important;
}
html:not(.refre-mobile) body>.header .nav {
height: 66px !important;
display: flex !important;
justify-content: space-between;
gap: 32px !important;
}
html:not(.refre-mobile) .header .navlinks {
display: flex !important;
gap: 24px !important;
font-size: 15px !important;
font-weight: 600 !important;
}
@media(min-width:769px) {
html:not(.refre-mobile) .header .navlinks {
font-size: 16px !important;
}
}
html:not(.refre-mobile) .header .navlinks a {
white-space: normal;
}
html:not(.refre-mobile) .header .header-actions .business-open {
display: none !important;
}
html:not(.refre-mobile) .header .header-actions .personal-open {
display: block !important;
background: #17304b !important;
color: #fff !important;
border: 1px solid #17304b !important;
border-radius: 10px !important;
padding: 11px 20px !important;
font-size: 14px !important;
}
}
@media(min-width:769px) {
html:not(.refre-mobile) #heroSection.hero-unified {
display: block !important;
position: relative;
isolation: isolate;
overflow: visible;
background: transparent !important;
padding: 0 !important;
min-height: 0 !important;
color: #fff !important;
}
#heroSection #rf83Carousel {
position: relative;
width: 100%;
min-width: 0;
aspect-ratio: 2.64/1;
min-height: 320px;
max-height: 480px;
border-radius: 16px;
overflow: hidden;
background: #102642;
container-type: inline-size;
}
#heroSection .rf83-slide {
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(115deg,#10243e,#1c385c);
color: #fff;
}
#heroSection .rf83-slide[hidden] {
display: none !important;
}
#heroSection .rf83-cover {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 50%;
}
#heroSection .rf83-shade {
position: absolute;
inset: 0;
background: linear-gradient(90deg,rgba(9,26,45,.95),rgba(9,26,45,.85) 29%,rgba(9,26,45,.26) 65%,rgba(9,26,45,.02));
}
#heroSection .rf83-copy {
position: absolute;
left: 7%;
top: 23%;
z-index: 1;
width: 44%;
text-align: left;
}
#heroSection .rf83-tag {
display: inline-block;
margin: 0 !important;
padding: 5px 9px;
font-size: 12px !important;
line-height: 1.5 !important;
font-weight: 500;
color: #dce8fa !important;
background: rgba(255,255,255,.1);
border-radius: 999px;
}
#heroSection #rf83Carousel .rf83-title {
margin: 18px 0 14px !important;
font-size: clamp(26px,3vw,40px) !important;
line-height: 1.32 !important;
font-weight: 700 !important;
letter-spacing: -.04em !important;
text-align: left !important;
color: #fff !important;
}
#heroSection #rf83Carousel .rf83-title>span {
display: block;
color: #fff !important;
text-align: left !important;
}
#heroSection #rf83Carousel .rf83-title>em {
display: block;
font-style: normal;
color: #acc9ff !important;
text-align: left !important;
}
#heroSection #rf83Carousel .rf83-description {
display: block;
margin: 0 !important;
max-width: none;
font-size: 15px !important;
line-height: 1.7 !important;
letter-spacing: -.02em !important;
font-weight: 400 !important;
color: #d0dbea !important;
text-align: left;
}
#heroSection #rf83Carousel .rf83-link {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 20px;
padding: 0 0 5px;
border: 0;
border-bottom: 1px solid rgba(255,255,255,.4);
border-radius: 0;
background: transparent;
color: #fff;
font: 500 14px/1.5 Pretendard,sans-serif;
text-decoration: none;
cursor: pointer;
}
#heroSection .rf83-compare .rf83-copy {
left: 5%;
top: 22%;
width: 27%;
}
#heroSection .rf83-pair {
position: absolute;
left: 34%;
right: 4%;
top: 7%;
bottom: 10%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
#heroSection .rf83-pair figure {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 9px;
min-height: 0;
margin: 0;
}
#heroSection .rf83-pair img {
flex: 1 1 0;
min-height: 0;
width: 100%;
height: 0;
object-fit: cover;
object-position: 50% 55%;
border-radius: 10px;
filter: none;
}
#heroSection .rf83-pair figcaption {
flex: 0 0 auto;
text-align: center;
font-size: 12px;
line-height: 1.5;
color: #e3eaf4;
}
#heroSection .rf83-work-photo {
position: absolute;
right: 0;
top: 0;
width: 64%;
height: 100%;
object-fit: cover;
object-position: 55% 31%;
}
#heroSection .rf83-process .rf83-shade {
background: linear-gradient(90deg,#102642 5%,#102642 33%,rgba(16,38,66,.78) 43%,rgba(16,38,66,.12) 68%,rgba(16,38,66,0));
}
#heroSection .rf83-work-note {
position: absolute;
right: 24px;
bottom: 60px;
margin: 0;
padding: 8px 11px;
border-radius: 6px;
background: rgba(10,28,48,.7);
color: #fff;
font-size: 12px;
line-height: 1.5;
}
#heroSection #rf84Booking {
display: flex !important;
flex-wrap: wrap;
justify-content: flex-start !important;
gap: 10px !important;
margin: 20px 0 0 !important;
}
#heroSection #rf84Booking .btn {
min-height: 46px;
padding: 11px 18px;
font-size: 15px !important;
line-height: 1.4;
border-radius: 10px !important;
box-shadow: none;
}
#heroSection #rf84Booking .personal-open {
background: transparent !important;
color: #fff !important;
border: 1px solid #95a9c2 !important;
}
#heroSection #rf84Booking .business-open {
background: #eef5fc !important;
color: #17304b !important;
border: 1px solid #eef5fc !important;
}
#heroSection #rf83Carousel .rf-hero-proof {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 16px;
margin: 18px 0 0 !important;
padding: 0;
list-style: none;
max-width: none;
}
#heroSection #rf83Carousel .rf-hero-proof li {
display: flex;
align-items: center;
gap: 5px;
color: #c2d4e8;
font-size: 12px;
line-height: 1.6;
white-space: nowrap;
}
#heroSection #rf83Carousel .rf-hero-proof a {
color: inherit;
text-decoration: none;
}
#heroSection #rf83Carousel .rf-hero-proof a:focus-visible {
outline: 2px solid #b7d2ff;
outline-offset: 3px;
}
#heroSection .rf83-intro .rf83-copy {
width: 78%;
top: 15%;
}
#heroSection .rf83-control {
position: absolute;
left: auto;
right: 22px;
bottom: 10px;
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
color: #fff;
}
#heroSection .rf83-counter {
padding: 5px 9px;
border-radius: 999px;
background: rgba(255,255,255,.13);
font-size: 11px;
line-height: 1.5;
}
#heroSection .rf83-counter b {
font-weight: 500;
}
#heroSection .rf83-dots {
display: flex;
align-items: center;
}
#heroSection .rf83-dots button {
display: grid;
place-items: center;
min-width: 36px;
min-height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
#heroSection .rf83-dots button span {
width: 6px;
height: 6px;
background: rgba(255,255,255,.45);
border-radius: 999px;
}
#heroSection .rf83-dots button[aria-pressed=true] span {
width: 18px;
background: #fff;
}
#heroSection .rf83-link:focus-visible,
#heroSection .rf83-dots button:focus-visible {
outline: 2px solid #b7d2ff;
outline-offset: 3px;
}
}
@media(min-width:769px) and (max-width:1100px) {
html:not(.refre-mobile) body>.header .nav {
padding-inline: 32px !important;
gap: 18px !important;
}
html:not(.refre-mobile) .header .navlinks {
gap: 14px !important;
font-size: 14px !important;
}
#heroSection .rf83-compare .rf83-copy {
width: 28%;
top: 16%;
}
#heroSection #rf83Carousel .rf83-compare .rf83-title {
font-size: 26px !important;
}
#heroSection .rf83-copy {
top: 19%;
}
#heroSection .rf83-intro .rf83-copy {
top: 8%;
width: 90%;
}
#heroSection #rf84Booking {
margin-top: 14px !important;
}
#heroSection #rf84Booking .btn {
font-size: 13px !important;
padding: 10px 13px;
min-height: 42px;
}
#heroSection #rf83Carousel .rf83-title {
font-size: 28px !important;
}
#heroSection #rf83Carousel .rf83-description {
font-size: 13px !important;
}
#heroSection .rf83-work-note {
font-size: 10px;
}
}
#rfBAPhotoDialog {
width: min(1040px,94vw);
max-height: 92dvh;
overflow: auto;
padding: 24px;
border: 0;
border-radius: 16px;
background: #fff;
color: #17304b;
}
#rfBAPhotoDialog::backdrop {
background: rgba(8,23,38,.78);
}
#rfBAPhotoDialog .rf-ba-dialog-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
#rfBAPhotoDialog h2 {
font-size: 20px;
margin: 0;
}
@media(min-width:769px) {
#rfBAPhotoDialog h2 {
font-size: 22px;
}
}
#rfBAPhotoDialog button {
width: 44px;
height: 44px;
border: 1px solid #d9e1e8;
border-radius: 50%;
background: white;
font-size: 22px;
cursor: pointer;
}
#rfBAPhotoDialog .rf-ba-dialog-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#rfBAPhotoDialog figure {
margin: 0;
min-width: 0;
}
#rfBAPhotoDialog figcaption {
text-align: center;
font-size: 14px;
margin: 0 0 8px;
font-weight: 600;
}
#rfBAPhotoDialog img {
width: 100%;
height: min(68dvh,680px);
object-fit: contain;
background: #f1f4f7;
display: block;
}
@media(max-width:540px) {
#rfBAPhotoDialog {
padding: 16px;
}
#rfBAPhotoDialog h2 {
font-size: 17px;
}
#rfBAPhotoDialog .rf-ba-dialog-pair {
gap: 8px;
}
#rfBAPhotoDialog img {
height: 58dvh;
}
}
#rfReviewArchive[hidden] {
display: none !important;
}
html:not(.refre-mobile) main section h2 {
font-size: 32px !important;
line-height: 1.4 !important;
letter-spacing: -.035em !important;
}
@media(min-width:769px) {
html:not(.refre-mobile) main section h2 {
letter-spacing: -0.04em !important;
}
}
html:not(.refre-mobile) main section :is(h3,h4) {
font-size: 20px !important;
line-height: 1.45 !important;
}
@media(min-width:769px) {
html:not(.refre-mobile) main section :is(h3,h4) {
font-size: 22px !important;
line-height: 1.4 !important;
}
}
html:not(.refre-mobile) main :is(.section-head>p,.process-heading>p,.review-gallery-head>p,.faq-title>p,.strength-bento-copy>p) {
font-size: 16px !important;
line-height: 1.75 !important;
}
@media(min-width:769px) {
html:not(.refre-mobile) main :is(.section-head>p,.process-heading>p,.review-gallery-head>p,.faq-title>p,.strength-bento-copy>p) {
line-height: 1.6 !important;
}
}
html:not(.refre-mobile) main>section:not(.hero) {
padding-block: 72px !important;
}
html:not(.refre-mobile) body>.header .logo {
font-size: 18px !important;
font-weight: 800 !important;
}
html:not(.refre-mobile) #price .section-head {
margin-bottom: 28px !important;
}
html:not(.refre-mobile) #price .service-v4-copy h4 {
font-size: 22px !important;
}
html:not(.refre-mobile) #workGuide {
padding: 48px 0 56px !important;
}
html:not(.refre-mobile) #workGuide .strength-bento-copy h2 {
font-size: 32px !important;
}
html:not(.refre-mobile) #workGuide .strength-bento-body h3 {
font-size: 19px !important;
}
@media(min-width:769px) {
html:not(.refre-mobile) #workGuide .strength-bento-body h3 {
font-size: 18px !important;
}
}
html:not(.refre-mobile) #workGuide .strength-bento-body p {
font-size: 15px !important;
line-height: 1.7 !important;
}
@media(min-width:769px) {
html:not(.refre-mobile) #workGuide .strength-bento-body p {
font-size: 16px !important;
line-height: 1.6 !important;
}
}
html:not(.refre-mobile) :is(#personalBg,#businessBg) .booking-page-intro h2 {
font-size: 30px !important;
line-height: 1.45 !important;
}
@media(min-width:769px) {
html:not(.refre-mobile) :is(#personalBg,#businessBg) .booking-page-intro h2 {
font-size: 32px !important;
line-height: 1.4 !important;
}
}
html body {
padding-top: 0 !important;
}
html body>.header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
transition: background .22s,border-color .22s,box-shadow .22s;
}
html body>.header:not(.header-scrolled) {
background: rgba(11,28,46,.18) !important;
border-bottom-color: rgba(255,255,255,.16) !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
html body>.header:not(.header-scrolled) :is(.logo,.logo span,.navlinks a) {
color: #f6f9ff !important;
}
html body>.header:not(.header-scrolled) .header-actions .personal-open {
background: #f2f7fc !important;
color: #17304b !important;
border-color: #f2f7fc !important;
}
html body>.header:not(.header-scrolled) .header-actions .business-open {
background: rgba(17,40,62,.6) !important;
color: #fff !important;
border-color: rgba(255,255,255,.5) !important;
}
html body>.header.header-scrolled {
background: rgba(255,255,255,.98) !important;
border-bottom-color: #e3e8ef !important;
backdrop-filter: blur(12px) !important;
}
html body>.header:not(.header-scrolled) a:focus-visible,
html body>.header:not(.header-scrolled) button:focus-visible {
outline: 2px solid #a7d9ff;
outline-offset: 4px;
}
#rfCaseContent {
max-width: 1120px;
margin-inline: auto;
min-width: 0;
}
#rfCaseContent .rf-case-heading {
text-align: left !important;
margin: 0 0 28px !important;
max-width: none !important;
}
#rfCaseContent .rf-case-heading .section-label {
color: #85d2e0 !important;
font-size: 12px !important;
}
@media(min-width:769px) {
#rfCaseContent .rf-case-heading .section-label {
font-size: 13px !important;
}
}
#rfCaseContent .rf-case-heading h2 {
color: #f7faff !important;
}
#rfCaseContent .rf-case-heading>p {
color: #bfcede !important;
margin-left: 0 !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
@media(min-width:769px) {
#rfCaseContent .rf-case-heading>p {
font-size: 16px !important;
line-height: 1.6 !important;
}
}
#rfCaseContent .review-feature-top {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
}
#rfCaseContent .review-feature-kicker {
font-size: 12px !important;
color: #9bbafa !important;
letter-spacing: .02em !important;
}
@media(min-width:769px) {
#rfCaseContent .review-feature-kicker {
font-size: 13px !important;
letter-spacing: 0.08em !important;
}
}
#rfCaseContent .review-feature-meta {
display: block;
margin-top: auto;
padding-top: 24px !important;
border-top: 1px solid #ffffff16;
}
#rfCaseContent .review-feature-meta strong {
display: block;
font-size: 14px !important;
color: #edf4ff !important;
margin-top: 20px;
}
#rfCaseContent .review-feature-meta span {
display: block;
font-size: 12px !important;
color: #a5b9d0 !important;
margin-top: 6px;
}
@media(min-width:769px) {
#rfCaseContent .review-feature-meta span {
font-size: 13px !important;
}
}
#rfCaseContent .rf-part-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#rfCaseContent .rf-part-pair figure {
margin: 0;
min-width: 0;
}
#rfCaseContent .rf-part-pair figcaption {
font-size: 12px !important;
color: #b9cadd !important;
margin-bottom: 8px;
}
@media(min-width:769px) {
#rfCaseContent .rf-part-pair figcaption {
font-size: 13px !important;
}
}
#rfCaseContent .rf-part-pair figure+figure figcaption {
color: #96d6e8 !important;
}
#rfCaseContent .rf-part-pair img {
display: block;
width: 100%;
height: 300px !important;
object-fit: contain !important;
background: #e8edf3;
border-radius: 12px;
}
#rfCaseContent .rf-part-expand {
display: flex;
margin: 10px 0 0 auto !important;
align-items: center;
min-height: 44px;
color: #c5dcff !important;
font-size: 13px !important;
background: transparent;
border: 0;
cursor: pointer;
}
#rfCaseContent button:focus-visible {
outline: 2px solid #92d4f0 !important;
outline-offset: 4px;
}
#rfCaseContent .rf-case-review-note {
font-size: 12px !important;
color: #a7bbd2 !important;
margin: 18px 0 0 !important;
}
@media(min-width:769px) {
#rfCaseContent .rf-case-review-note {
font-size: 13px !important;
}
}
.rf-case-link {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #acd0ff !important;
text-decoration: underline;
text-underline-offset: 5px;
font-size: 14px !important;
}
@media(max-width:768px), (max-width:950px) and (pointer:coarse) {
html.refre-mobile body {
padding-top: 0 !important;
}
html.refre-mobile .header .nav {
height: 60px !important;
min-height: 60px !important;
}
#refreMobileHome .rf-hero {
position: relative;
isolation: isolate;
overflow: hidden;
background: #102640;
}
#refreMobileHome .rf-hero .rf-wrap {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
#refreMobileHome .rf-hero :is(h1,h1 span,h1 em) {
color: #f7faff !important;
}
#refreMobileHome .rf-hero .rf-eyebrow {
color: #bbd6e6 !important;
margin-bottom: 12px !important;
}
#refreMobileHome .rf-hero-description {
color: #d5e0eb !important;
max-width: 290px;
line-height: 1.75 !important;
}
#refreMobileHome .rf-hero .rf-button {
margin-top: auto;
background: #eff6ff !important;
border-color: #eff6ff !important;
color: #17304b !important;
min-height: 48px;
}
#refreMobileHome .rf-hero .rf-text-button {
color: #e2edf8 !important;
margin-top: 6px;
}
#refreMobileHome .rf-discount .rf-wrap {
border: 0;
padding-top: 0;
}
#refreMobileHome .rf-case-section {
background: #102640;
padding: 36px 0;
scroll-margin-top: 76px;
}
#refreMobileHome #rfCaseContent .rf-case-heading h2 {
font-size: 22px !important;
line-height: 1.45 !important;
margin: 8px 0 12px !important;
}
#refreMobileHome #rfCaseContent .rf-case-heading>p {
font-size: 13px !important;
}
#refreMobileHome #rfCaseContent .rf-part-pair img {
height: clamp(165px,48vw,285px) !important;
border-radius: 8px;
}
#refreMobileHome #rfCaseContent .rf-part-pair figcaption {
font-size: 11px !important;
}
#refreMobileHome #rfCaseContent .review-feature-kicker {
font-size: 11px !important;
}
#refreMobileHome #rfCaseContent .review-feature-meta {
border: 0;
padding: 0 !important;
margin: 0;
}
#refreMobileHome #rfCaseContent .review-feature-meta strong {
display: none;
}
#refreMobileHome #rfCaseContent .review-feature-meta span {
margin-top: 14px;
font-size: 11px !important;
}
#refreMobileHome .rf-case-link {
color: #285788 !important;
font-size: 13px !important;
}
}
@media(prefers-reduced-motion:reduce) {
html body>.header {
transition: none !important;
}
}
@media(min-width:769px) {
html:not(.refre-mobile) body>main .container {
width: 100% !important;
max-width: 1344px !important;
padding-inline: 48px !important;
margin-inline: auto !important;
}
html:not(.refre-mobile) #workflow .process-heading,
html:not(.refre-mobile) #why .strength-bento-copy,
html:not(.refre-mobile) #faq .faq-title {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html:not(.refre-mobile) #rfCaseContent {
max-width: none;
margin-inline: 0;
}
html:not(.refre-mobile) #rfCaseContent .rf-case-review-note {
max-width: 1120px;
margin-inline: auto !important;
}
html:not(.refre-mobile) #faq .faq-wrap {
max-width: none !important;
}
html:not(.refre-mobile) #faq :is(.faq-tabs,.faq-list) {
max-width: 860px;
margin-inline: auto;
}
html:not(.refre-mobile) #price .price-heading-offer {
padding: 16px 20px !important;
align-self: center;
}
html:not(.refre-mobile) #price .price-heading-offer .offer-caption {
margin: 0 0 4px !important;
font-weight: 400 !important;
}
html:not(.refre-mobile) #price .price-heading-offer>strong {
display: block;
margin: 0 !important;
font-weight: 600 !important;
}
html:not(.refre-mobile) #price .price-heading-offer>strong b {
font-weight: 700 !important;
}
html:not(.refre-mobile) #price .price-heading-offer>p {
margin: 4px 0 0 !important;
font-weight: 400 !important;
}
html:not(.refre-mobile) #price .price-heading-offer>small {
margin: 4px 0 0 !important;
font-weight: 400 !important;
}
}
@media(min-width:769px) and (max-width:1100px) {
html:not(.refre-mobile) body>main .container {
padding-inline: 32px !important;
}
}
html body>main :is(.section-head,.process-heading,.strength-bento-copy,.faq-title,.rf-case-heading) h2 {
font-weight: 700 !important;
}
html body>main :is(.section-head>p,.process-heading>p,.strength-bento-copy>p,.faq-title>p,.service-v4-copy>p,.strength-bento-body>p,.process-detail-copy>p) {
font-weight: 400 !important;
}
html body>main :is(.service-showcase-v4 h3,.service-v4-copy h4,.strength-bento-body h3,.process-detail-copy h3) {
font-weight: 700 !important;
}
html #price .service-vertical-menu .service-menu-name strong,
html #price .service-vertical-menu button em {
font-weight: 700 !important;
}
html #price .service-vertical-menu .service-menu-name small {
font-weight: 400 !important;
}
html #price .service-clean-list li {
font-weight: 400 !important;
}
html #price .service-book,
html #workGuide .strength-bento-actions .btn,
html #workGuide .process-step-copy strong {
font-weight: 600 !important;
}
html #faq .faq>button {
font-weight: 600 !important;
}
html #faq .faq .answer {
font-weight: 400 !important;
}
@media(max-width:768px), (max-width:950px) and (pointer:coarse) {
#refreMobileHome :is(.rf-model-name,.rf-price-value) {
font-weight: 600 !important;
}
#refreMobileHome :is(.rf-model-name small,.rf-intro,.rf-model-detail>p,.rf-trust-list p,.rf-timeline p) {
font-weight: 400 !important;
}
#refreMobileHome :is(.rf-trust-list h3,.rf-timeline h3) {
font-weight: 600 !important;
}
}
#rfCaseContent .rf-original-modes {
display: flex;
justify-content: flex-start;
gap: 12px;
margin-top: 22px;
}
#rfCaseContent .rf-original-modes button {
min-height: 44px;
padding: 10px 20px;
border-radius: 30px;
background: #ffffff0d;
border: 1px solid #ffffff25;
color: #c6d3e3;
font-size: 14px !important;
cursor: pointer;
}
#rfCaseContent .rf-original-modes button.on {
background: #fff;
color: #17304b;
border-color: #fff;
}
#rfCaseContent .rf-original-gallery {
display: flex;
flex-direction: column;
gap: 20px;
}
#rfCaseContent .rf-original-feature {
display: grid !important;
grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr) !important;
min-height: 320px;
border-radius: 28px;
border: 1px solid #344a68;
background: linear-gradient(145deg,#17304b,#102640);
overflow: hidden;
}
#rfCaseContent .rf-original-feature .review-feature-copy {
padding: 28px !important;
min-width: 0;
display: flex;
flex-direction: column;
}
#rfCaseContent .rf-original-story {
white-space: pre-line;
margin: 26px 0 !important;
font-size: 18px !important;
line-height: 1.8 !important;
color: #edf4ff !important;
font-weight: 400 !important;
}
@media(min-width:769px) {
#rfCaseContent .rf-original-story {
line-height: 1.6 !important;
}
}
#rfCaseContent .rf-original-feature .review-feature-meta {
display: flex;
justify-content: space-between;
align-items: end;
gap: 20px;
margin-top: auto;
padding-top: 20px !important;
}
#rfCaseContent .rf-original-feature .review-feature-meta strong {
margin: 0 !important;
font-size: 15px !important;
}
@media(min-width:769px) {
#rfCaseContent .rf-original-feature .review-feature-meta strong {
font-size: 16px !important;
}
}
#rfCaseContent .rf-original-feature .review-feature-meta span {
font-size: 12px !important;
}
@media(min-width:769px) {
#rfCaseContent .rf-original-feature .review-feature-meta span {
font-size: 13px !important;
}
}
#rfCaseContent .rf-original-photo {
position: relative;
min-width: 0;
min-height: 320px !important;
padding: 20px !important;
border-left: 1px solid #ffffff15;
display: flex;
flex-direction: column;
justify-content: center;
}
#rfCaseContent .rf-original-photo .rf-part-pair {
display: grid;
grid-template-columns: 1fr 1fr;
}
#rfCaseContent .rf-original-photo img {
height: 245px !important;
width: 100%;
object-fit: contain;
border-radius: 10px;
background: #edf1f6;
}
#rfCaseContent .rf-original-photo figcaption {
font-size: 12px !important;
color: #c0d5ee !important;
}
@media(min-width:769px) {
#rfCaseContent .rf-original-photo figcaption {
font-size: 13px !important;
}
}
#rfCaseContent .rf-original-photo .review-photo-placeholder {
min-height: 240px;
display: grid;
place-items: center;
color: #bed0e6;
font-size: 14px;
}
#rfCaseContent .rf-original-grid {
display: grid !important;
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 18px !important;
}
#rfCaseContent .rf-original-grid button {
display: grid;
grid-template-columns: 40px minmax(0,1fr) 20px;
grid-template-rows: auto auto;
gap: 6px 12px;
align-items: center;
min-height: 108px;
padding: 18px !important;
border: 1px solid #334a66;
border-radius: 20px;
background: #102640;
text-align: left;
cursor: pointer;
transform: none !important;
}
#rfCaseContent .rf-original-grid button.is-active {
background: #17304b;
border-color: #759bdf;
}
#rfCaseContent .rf-original-grid .review-mini-no {
grid-column: 1;
grid-row: 1/3;
display: grid;
place-items: center;
width: 38px;
height: 38px;
background: #294770;
border-radius: 12px;
color: #b5ccf5;
font-size: 12px;
}
@media(min-width:769px) {
#rfCaseContent .rf-original-grid .review-mini-no {
font-size: 13px;
}
}
#rfCaseContent .rf-original-grid strong {
grid-column: 2;
grid-row: 1;
color: #edf4ff;
font-size: 14px !important;
font-weight: 600;
}
#rfCaseContent .rf-original-grid small {
grid-column: 2;
grid-row: 2;
color: #a8bdd7 !important;
font-size: 12px !important;
line-height: 1.5;
}
@media(min-width:769px) {
#rfCaseContent .rf-original-grid small {
font-size: 13px !important;
line-height: 1.4;
}
}
#rfCaseContent .rf-original-grid i {
grid-column: 3;
grid-row: 1/3;
color: #a2c2f5;
font-style: normal;
}
@media(max-width:768px), (max-width:950px) and (pointer:coarse) {
#refreMobileHome #rfCaseContent .rf-original-modes {
gap: 8px;
margin-top: 18px;
}
#refreMobileHome #rfCaseContent .rf-original-modes button {
font-size: 13px !important;
padding: 9px 16px;
}
#refreMobileHome #rfCaseContent .rf-original-grid {
order: -1;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 8px !important;
}
#refreMobileHome #rfCaseContent .rf-original-grid button {
grid-template-columns: 24px minmax(0,1fr);
gap: 4px 6px;
min-height: 64px;
padding: 10px !important;
border-radius: 12px;
}
#refreMobileHome #rfCaseContent .rf-original-grid .review-mini-no {
width: 24px;
height: 24px;
font-size: 10px;
border-radius: 7px;
}
#refreMobileHome #rfCaseContent .rf-original-grid strong {
font-size: 11px !important;
line-height: 1.5;
}
#refreMobileHome #rfCaseContent .rf-original-grid small {
font-size: 10px !important;
}
#refreMobileHome #rfCaseContent .rf-original-grid i {
display: none;
}
#refreMobileHome #rfCaseContent .rf-original-feature {
grid-template-columns: 1fr !important;
border-radius: 20px;
min-height: 0;
}
#refreMobileHome #rfCaseContent .rf-original-feature .review-feature-copy {
padding: 20px !important;
}
#refreMobileHome #rfCaseContent .rf-original-story {
font-size: 15px !important;
margin: 20px 0 !important;
line-height: 1.75 !important;
}
#refreMobileHome #rfCaseContent .rf-original-feature .review-feature-meta {
padding-top: 16px !important;
}
#refreMobileHome #rfCaseContent .rf-original-feature .review-feature-meta strong {
display: block;
font-size: 13px !important;
}
#refreMobileHome #rfCaseContent .rf-original-feature .review-feature-meta span {
font-size: 11px !important;
}
#refreMobileHome #rfCaseContent .rf-original-photo {
padding: 16px !important;
border-left: 0;
border-top: 1px solid #ffffff15;
min-height: 0 !important;
}
#refreMobileHome #rfCaseContent .rf-original-photo img {
height: clamp(180px,51vw,285px) !important;
}
}
#rfCaseContent .rf-original-photo .rf-part-pair {
padding: 6px;
background: #e9eef4;
border-radius: 14px;
gap: 6px;
overflow: hidden;
}
#rfCaseContent .rf-original-photo .rf-part-pair figure {
margin: 0;
min-width: 0;
}
#rfCaseContent .rf-original-photo .rf-part-pair img {
border-radius: 8px;
background: transparent;
}
@media(max-width:768px), (max-width:950px) and (pointer:coarse) {
#refreMobileHome #rfCaseContent .rf-original-feature {
display: flex !important;
flex-direction: column;
}
#refreMobileHome #rfCaseContent .rf-original-feature .rf-original-photo {
order: -1;
border-top: 0;
border-bottom: 1px solid #ffffff15;
}
}
#price .refre-photo-offer,
#refreMobileHome .rf-discount .refre-photo-offer {
position: relative;
isolation: isolate;
overflow: hidden;
display: block !important;
background: #edf2f6 !important;
border: 1px solid #dfe6ec !important;
border-radius: 14px !important;
box-shadow: none !important;
color: #17304b !important;
padding: 22px 26px 40px !important;
min-height: 196px;
align-self: center;
}
.refre-photo-offer .offer-copy {
position: relative;
z-index: 2;
width: 64%;
}
.refre-photo-offer .offer-photo {
position: absolute;
z-index: 0;
inset: 0 0 0 auto;
width: 58%;
margin: 0;
pointer-events: none;
}
.refre-photo-offer .offer-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80% top;
display: block;
}
.refre-photo-offer .offer-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,#edf2f6 0%,rgba(237,242,246,.91) 17%,rgba(237,242,246,.35) 45%,rgba(237,242,246,0) 72%);
}
#price .refre-photo-offer .offer-caption,
#refreMobileHome .refre-photo-offer .offer-caption {
display: block;
margin: 0 0 8px !important;
color: #647487 !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0;
}
@media(min-width:769px) {
#price .refre-photo-offer .offer-caption {
line-height: 1.4 !important;
}
}
.refre-photo-offer .offer-value {
display: block !important;
color: #17304b !important;
margin: 0 !important;
line-height: 1.3 !important;
}
.refre-photo-offer .offer-value>span {
display: block;
font-size: 15px;
font-weight: 600;
margin-bottom: 2px;
}
@media(min-width:769px) {
.refre-photo-offer .offer-value>span {
font-size: 16px;
}
}
#price .refre-photo-offer .offer-value>b,
#refreMobileHome .refre-photo-offer .offer-value>b {
display: block;
color: #17304b !important;
font-size: 28px !important;
letter-spacing: -.035em;
font-weight: 700 !important;
white-space: nowrap;
line-height: 1.3 !important;
}
@media(min-width:769px) {
#price .refre-photo-offer .offer-value>b {
font-size: 32px !important;
letter-spacing: -0.04em;
}
}
#price .refre-photo-offer .offer-condition,
#refreMobileHome .refre-photo-offer .offer-condition {
font-size: 12px !important;
line-height: 1.5 !important;
color: #3b4c60 !important;
margin: 9px 0 0 !important;
font-weight: 400 !important;
white-space: nowrap;
}
@media(min-width:769px) {
#price .refre-photo-offer .offer-condition {
font-size: 13px !important;
line-height: 1.4 !important;
}
}
#price .refre-photo-offer .offer-unit,
#refreMobileHome .refre-photo-offer .offer-unit {
display: block;
font-size: 11px !important;
line-height: 1.5 !important;
color: #647487 !important;
margin: 2px 0 0 !important;
font-weight: 400 !important;
}
@media(min-width:769px) {
#price .refre-photo-offer .offer-unit {
font-size: 13px !important;
line-height: 1.4 !important;
}
}
#price .refre-photo-offer .offer-business-note {
position: absolute;
z-index: 2;
bottom: 12px;
left: 26px;
right: 26px;
margin: 0 !important;
font-size: 11px !important;
line-height: 1.5 !important;
color: #3b4c60 !important;
font-weight: 400 !important;
}
@media(min-width:769px) {
#price .refre-photo-offer .offer-business-note {
font-size: 13px !important;
line-height: 1.4 !important;
}
}
@media(max-width:768px) {
#refreMobileHome .rf-discount {
background: #f7f8fa !important;
}
#refreMobileHome .rf-discount .refre-photo-offer {
width: 100%;
max-width: none;
margin: 0 !important;
border-radius: 12px !important;
}
#refreMobileHome .refre-photo-offer .offer-copy {
width: 67%;
}
#refreMobileHome .refre-photo-offer .offer-caption {
font-size: 11px !important;
}
#refreMobileHome .refre-photo-offer .offer-value>span {
font-size: 13px;
}
#refreMobileHome .refre-photo-offer .offer-value>b {
font-size: 24px !important;
}
#refreMobileHome .refre-photo-offer .offer-condition {
font-size: 11px !important;
}
#refreMobileHome .refre-photo-offer .offer-unit {
font-size: 10px !important;
}
#refreMobileHome .refre-photo-offer .offer-photo {
width: 55%;
}
#refreMobileHome .refre-photo-offer .offer-photo img {
object-position: 76% center;
}
}
#refreMobileHome .rf-hero .rf-eyebrow {
font-size: 12px !important;
}
#refreMobileHome .rf-hero-description {
font-size: 15px !important;
}
#refreMobileHome .rf-hero-proof {
text-align: left !important;
margin-top: 14px !important;
}
#refreMobileHome .rf-trust {
background: #fff !important;
}
#refreMobileHome .rf-trust-list {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
#refreMobileHome .rf-trust-list li+li {
border-top: 1px solid #e6edf5 !important;
}
#refreMobileHome .rf-trust-list p {
text-wrap: pretty;
word-break: keep-all;
overflow-wrap: break-word;
}
#refreMobileHome .rf-process {
background: #fff !important;
}
html:not(.refre-mobile) body>.header .header-actions .header-cta.business-open {
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 600 !important;
min-width: 90px;
box-shadow: none !important;
}
html:not(.refre-mobile) body>.header.header-scrolled .header-actions .header-cta.business-open {
background: #fff !important;
color: #17304b !important;
border: 1px solid #17304b !important;
}
html:not(.refre-mobile) body>.header.header-scrolled .header-actions .header-cta.business-open:hover {
background: #eef3f9 !important;
}
#refreMobileHome #rfMobileHero div.rf-wrap p.rf-eyebrow {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome #rfMobileHero div.rf-wrap #rfMobileTitle span {
font-size: 28px !important;
letter-spacing: -0.04em !important;
line-height: 1.3 !important;
}
#refreMobileHome #rfMobileHero div.rf-wrap #rfMobileTitle em {
font-size: 28px !important;
letter-spacing: -0.04em !important;
line-height: 1.3 !important;
}
#refreMobileHome #rfMobileHero div.rf-wrap p.rf-hero-description {
font-size: 16px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-wrap ul.rf-hero-proof li a {
font-size: 12px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome aside.rf-discount div.rf-wrap div span {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-wrap div strong span {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome div.rf-wrap div strong b {
font-size: 28px !important;
letter-spacing: -0.04em !important;
line-height: 1.3 !important;
}
#refreMobileHome aside.rf-discount div.rf-wrap div p {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome aside.rf-discount div.rf-wrap div small {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome #rfMobilePrice div.rf-wrap #rfMobilePriceTitle {
font-size: 22px !important;
letter-spacing: -0.04em !important;
line-height: 1.4 !important;
}
#refreMobileHome #rfMobilePrice div.rf-wrap p.rf-intro {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome ul.rf-models li button.rf-model span.rf-model-name {
font-size: 16px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome li button.rf-model span.rf-model-name small {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome ul.rf-models li button.rf-model span.rf-price-value {
font-size: 16px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-wrap div.rf-price-panel #rfMobileModelDetail h3 {
font-size: 16px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-wrap div.rf-price-panel #rfMobileModelDetail p {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome div.rf-price-panel #rfMobileModelDetail ul.rf-work-tags li {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome #rfMobilePrice div.rf-wrap div.rf-price-panel #rfMobileModelBook {
font-size: 16px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome #rfMobilePrice div.rf-wrap div.rf-price-panel p.rf-price-note {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-wrap div.rf-price-panel nav.rf-contact-inline span {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-wrap div.rf-business-link div strong {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome div.rf-wrap div.rf-business-link div p {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome #rfMobilePrice div.rf-wrap div.rf-business-link button {
font-size: 16px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome ul.rf-trust-list li div h3 {
font-size: 16px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome ul.rf-trust-list li div p {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome div.rf-wrap ol.rf-timeline li span.rf-step {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome ol.rf-timeline li div h3 {
font-size: 16px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome ol.rf-timeline li div p {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome ol.rf-timeline li div a.rf-case-link {
font-size: 14px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome div.rf-wrap div.rf-case-content div.rf-case-heading div {
font-size: 12px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome div.rf-wrap div.rf-case-content div.rf-case-heading h2 {
font-size: 22px !important;
letter-spacing: -0.04em !important;
line-height: 1.4 !important;
}
#refreMobileHome div.rf-wrap div.rf-case-content div.rf-case-heading p {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome div.rf-case-content div.rf-case-heading div.rf-original-modes button {
font-size: 14px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome article.rf-original-feature div div span {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-original-gallery article.rf-original-feature div div.rf-review-rating {
font-size: 16px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome div.rf-original-gallery article.rf-original-feature div p.rf-original-story {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome div div div strong {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome div div div span {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-original-gallery article.rf-original-feature div.rf-original-photo button.rf-part-expand {
font-size: 14px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome div.rf-original-gallery div.rf-original-grid button span {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-original-gallery div.rf-original-grid button strong {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-original-gallery div.rf-original-grid button small {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome #rfMobileReviews div.rf-wrap div.rf-case-content p.rf-case-review-note {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome #rfMobileFAQ div.rf-wrap div.rf-faq-tabs button {
font-size: 16px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome div.rf-wrap div details summary {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome div.rf-wrap div details p {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome div.rf-footer div.rf-wrap h2 {
font-size: 22px !important;
letter-spacing: -0.04em !important;
line-height: 1.4 !important;
}
#refreMobileHome div.rf-footer div.rf-wrap p {
font-size: 14px !important;
letter-spacing: -0.02em !important;
line-height: 1.6 !important;
}
#refreMobileHome div.rf-footer div.rf-wrap div.rf-footer-links a {
font-size: 16px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome div.rf-footer div.rf-wrap button.rf-button {
font-size: 16px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome div.rf-footer div.rf-wrap p.rf-footer-meta strong {
font-size: 12px !important;
letter-spacing: -0.02em !important;
line-height: 1.5 !important;
}
#refreMobileHome div.rf-footer div.rf-wrap p.rf-footer-meta {
font-size: 12px !important;
letter-spacing: -0.02em !important;
}
#refreMobileHome .rf-hero {
padding: 88px 0 24px !important;
}
#refreMobileHome .rf-hero .rf-wrap {
min-height: 0 !important;
}
#refreMobileHome .rf-discount {
padding: 20px 0 24px !important;
}
#refreMobileHome .rf-discount .refre-photo-offer {
min-height: 0 !important;
padding: 16px 20px !important;
}
#refreMobileHome .refre-photo-offer .offer-caption {
margin-bottom: 4px !important;
}
#refreMobileHome .refre-photo-offer .offer-value>span {
margin-bottom: 0 !important;
}
#refreMobileHome .refre-photo-offer .offer-condition {
margin-top: 4px !important;
}
#refreMobileHome .refre-photo-offer .offer-unit {
margin-top: 0 !important;
}
#refreMobileHome .rf-model-detail p {
min-height: 0 !important;
margin-top: 4px !important;
}
#refreMobileHome .rf-model-detail .rf-work-tags {
margin-top: 16px !important;
margin-bottom: 24px !important;
}
#refreMobileHome .rf-step {
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
background: #eaf1fb !important;
color: #2563eb !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
html body #rfMobileProcess ol.rf-timeline>li {
row-gap: 0 !important;
}
@media(min-width:600px) {
@supports(grid-template-rows:subgrid) {
html body #rfMobileProcess ol.rf-timeline>li {
grid-row: span 2;
grid-template-rows: subgrid !important;
}
}
}
#refreMobileHome .rf-trust-icon {
background: transparent !important;
border-radius: 0 !important;
width: 32px !important;
height: 32px !important;
display: grid !important;
place-items: center;
}
#refreMobileHome .rf-trust-icon svg {
display: none !important;
}
#refreMobileHome .rf-trust-icon::before {
content: "";
display: block;
width: 28px;
height: 28px;
background: #2563eb;
-webkit-mask: var(--rf-ic) center/contain no-repeat;
mask: var(--rf-ic) center/contain no-repeat;
}
#refreMobileHome .rf-trust-list li:nth-child(1) .rf-trust-icon {
--rf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M14 8H8'/%3E%3Cpath d='M16 12H8'/%3E%3Cpath d='M13 16H8'/%3E%3C/svg%3E");
}
#refreMobileHome .rf-trust-list li:nth-child(2) .rf-trust-icon {
--rf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z'/%3E%3Cpath d='M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97'/%3E%3C/svg%3E");
}
#refreMobileHome .rf-trust-list li:nth-child(3) .rf-trust-icon {
--rf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
#refreMobileHome .rf-brand {
color: #2563eb;
letter-spacing: 0 !important;
}
#refreMobileHome .rf-block,
#refreMobileHome .rf-case-section {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
#refreMobileHome .rf-price-note {
margin-top: 16px !important;
margin-bottom: 0 !important;
}
#refreMobileHome .rf-contact-inline {
margin-top: 16px !important;
margin-bottom: 0 !important;
}
#refreMobileHome .rf-trust-list li {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
#refreMobileHome .rf-trust-list li:last-child {
padding-bottom: 0 !important;
}
#refreMobileHome .rf-timeline {
margin-top: 16px !important;
}
html body #rfMobileProcess ol.rf-timeline>li {
padding-bottom: 16px !important;
}
html body #rfMobileProcess ol.rf-timeline>li:last-child {
padding-bottom: 0 !important;
}
#refreMobileHome .rf-case-heading {
margin-bottom: 24px !important;
}
#refreMobileHome .rf-case-review-note {
margin-top: 12px !important;
}
.rf-stats {
background: #f3f5f8;
}
.rf-stats .rf-stats-inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 48px;
}
.rf-stats h2 {
font-size: 32px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -.035em;
color: #17304b;
}
@media(min-width:769px) {
.rf-stats h2 {
letter-spacing: -0.04em;
}
}
.rf-stats .rf-brand {
color: #2563eb;
letter-spacing: 0;
}
.rf-stat {
background: #fff;
border: 1px solid #e3ecf5;
border-radius: 16px;
}
html.refre-mobile #rfStats {
display: none !important;
}
#refreMobileHome .rf-stats {
padding: 32px 0 !important;
margin: 0 !important;
background: #f3f5f8 !important;
}
#refreMobileHome .rf-stats .rf-stats-inner {
max-width: none;
padding: 0 20px !important;
}
#refreMobileHome .rf-stats h2 {
margin: 0 0 16px !important;
font-size: 22px !important;
letter-spacing: -.04em !important;
line-height: 1.4 !important;
}
#refreMobileHome .rf-ptabs {
position: relative;
display: grid;
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 0;
margin-top: 16px;
padding: 4px;
border-radius: 14px;
background: #eef2f8;
}
#refreMobileHome .rf-ptabs::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: calc((100% - 8px)/6);
height: 40px;
border-radius: 10px;
background: #fff;
box-shadow: 0 2px 8px rgba(23,48,75,.14);
transform: translateX(calc(var(--i,0)*100%));
transition: transform .35s cubic-bezier(.3,.8,.3,1);
}
#refreMobileHome .rf-ptabs button {
position: relative;
z-index: 1;
height: 40px;
border: 0;
border-radius: 10px;
background: transparent;
color: #4a5b70;
font-size: 14px !important;
font-weight: 600;
letter-spacing: 0 !important;
font-variant-numeric: tabular-nums;
cursor: pointer;
padding: 0;
transition: color .25s;
}
#refreMobileHome .rf-ptabs button.is-done {
color: #4a5b70;
}
#refreMobileHome .rf-ptabs button[aria-selected="true"] {
color: #2563eb;
font-weight: 700;
}
#refreMobileHome .rf-ptabs button:focus-visible {
outline: 2px solid #2563eb;
outline-offset: -2px;
}
@keyframes rfPin {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rfPimg {from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
#refreMobileHome .rf-pcard {
margin-top: 16px;
background: #fff;
border: 1px solid #e3ecf5;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(23,48,75,.08);
}
#refreMobileHome .rf-pcard-fig {
position: relative;
margin: 0;
aspect-ratio: 4/3;
background: #102640;
overflow: hidden;
}
#refreMobileHome .rf-pcard-fig img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#refreMobileHome .rf-pcard.rf-swap .rf-pcard-fig img {
animation: rfPimg .5s ease both;
}
#refreMobileHome .rf-pcard.rf-swap .rf-pcard-over,
#refreMobileHome .rf-pcard.rf-swap .rf-pcard-body {
animation: rfPin .36s ease both;
}
#refreMobileHome .rf-pcard-over {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 48px 16px 16px;
background: linear-gradient(180deg,rgba(9,26,44,0) 0%,rgba(9,26,44,.84) 100%);
}
#refreMobileHome .rf-pcard-eyebrow {
display: block;
font-size: 12px !important;
font-weight: 700;
letter-spacing: .04em !important;
line-height: 1.5;
color: #cfe0ff;
}
#refreMobileHome .rf-pcard-over h3 {
margin: 4px 0 0 !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -.04em !important;
line-height: 1.4 !important;
color: #fff !important;
}
#refreMobileHome .rf-pcard-chip {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(9,26,44,.55);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.5;
}
#refreMobileHome .rf-pplay {
position: absolute;
top: 8px;
right: 8px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background: rgba(9,26,44,.55);
padding: 0;
display: grid;
place-items: center;
cursor: pointer;
}
#refreMobileHome .rf-pplay::before {
content: "";
width: 16px;
height: 16px;
background: #fff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
}
#refreMobileHome .rf-pplay.is-paused::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E");
}
#refreMobileHome .rf-pplay:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
#refreMobileHome .rf-pcard-body {
padding: 16px;
}
#refreMobileHome .rf-pcard p {
margin: 0 !important;
font-size: 14px !important;
font-weight: 400;
line-height: 1.6 !important;
color: #4a5b70;
}
#refreMobileHome .rf-pnote {
margin-top: 16px;
padding: 12px;
border-radius: 12px;
background: #f3f5f8;
}
#refreMobileHome .rf-pnote span {
display: block;
font-size: 12px;
font-weight: 700;
line-height: 1.5;
color: #2563eb;
}
#refreMobileHome .rf-pnote strong {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 600;
line-height: 1.6;
color: #17304b;
}
@media (prefers-reduced-motion:reduce) {
#refreMobileHome .rf-ptabs::before {
transition: none !important;
}
#refreMobileHome .rf-pcard.rf-swap * {
animation: none !important;
}
}
.rf-why-lab {
font-size: 14px;
font-weight: 700;
letter-spacing: .04em;
color: #2563eb;
line-height: 1.5;
}
@media(min-width:769px) {
.rf-why-lab {
letter-spacing: 0.08em;
line-height: 1.4;
}
}
.rf-stats h2 {
margin: 4px 0 0 !important;
}
.rf-why-sub {
margin: 8px 0 24px;
font-size: 16px;
line-height: 1.6;
color: #4a5b70;
letter-spacing: -.02em;
}
@media(min-width:769px) {
.rf-why-sub {
letter-spacing: -0.02em;
}
}
.rf-why-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5,minmax(0,1fr));
gap: 16px;
}
.rf-why-card {
background: #fff;
border: 1px solid #e3ecf5;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.rf-why-fig {
position: relative;
margin: 0;
aspect-ratio: 4/3;
background: #102640;
overflow: hidden;
flex: 0 0 auto;
min-height: 0;
}
.rf-why-fig img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rf-why-body {
padding: 16px;
}
.rf-why-body h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: #17304b;
letter-spacing: -.02em;
word-break: keep-all;
}
@media(min-width:769px) {
.rf-why-body h3 {
line-height: 1.4;
letter-spacing: -0.02em;
}
}
.rf-why-body p {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.6;
color: #4a5b70;
letter-spacing: -.02em;
word-break: keep-all;
}
@media(min-width:769px) {
.rf-why-body p {
letter-spacing: -0.02em;
}
}
.rf-why-dots {
display: none;
}
.rf-why-dots i {
width: 8px;
height: 8px;
border-radius: 999px;
background: #cfd9e8;
transition: width .3s,background .3s;
}
.rf-why-dots i.on {
width: 24px;
background: #2563eb;
}
.rf-stat {
padding: 16px 8px !important;
text-align: center;
}
.rf-stat-num {
font-size: 32px !important;
}
@media(max-width:1000px) {
.rf-why-list {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}
#refreMobileHome .rf-why-lab {
font-size: 12px;
}
#refreMobileHome .rf-why-sub {
margin: 8px 0 0 !important;
font-size: 14px;
}
#refreMobileHome .rf-why-list {
display: flex !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 12px;
margin: 16px -20px 0 !important;
padding: 0 20px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
#refreMobileHome .rf-why-list::-webkit-scrollbar {
display: none;
}
#refreMobileHome .rf-why-card {
flex: 0 0 300px;
scroll-snap-align: start;
}
#refreMobileHome .rf-why-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
#refreMobileHome .rf-stat {
padding: 16px 8px !important;
}
#refreMobileHome .rf-stat-num {
font-size: 28px !important;
}
.rf-hero-proof {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
max-width: 700px;
}
.rf-hero-proof li a {
display: inline-flex;
align-items: center;
gap: 7px;
color: #d3e2f1;
font-size: 13.5px;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
letter-spacing: -.01em;
word-break: keep-all;
}
@media(min-width:769px) {
.rf-hero-proof li a {
font-size: 14px;
line-height: 1.4;
letter-spacing: -0.02em;
}
}
.rf-hero-proof li a::before {
content: "✓";
display: inline-grid;
place-items: center;
flex: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(255,255,255,.16);
color: #bfe0ff;
font-size: 11px;
font-weight: 700;
}
@media(min-width:769px) {
.rf-hero-proof li a::before {
font-size: 13px;
}
}
.rf-hero-proof li a:hover,
.rf-hero-proof li a:focus-visible {
color: #fff;
}
#refreMobileHome .rf-hero-proof {
display: block;
margin: 18px 0 0;
max-width: none;
text-align: center;
line-height: 1.7;
}
#refreMobileHome .rf-hero-proof li {
display: inline;
}
#refreMobileHome .rf-hero-proof li+li::before {
content: "·";
margin: 0 7px;
color: #9fb4c8;
}
#refreMobileHome .rf-hero-proof li a {
display: inline;
font-size: 12.5px;
font-weight: 600;
color: #c9d8e6;
gap: 0;
}
#refreMobileHome .rf-hero-proof li a::before {
display: none;
}
.faq button {
justify-content: flex-start !important;
text-align: left !important;
}
.faq button span {
margin-left: auto;
}
html:not(.refre-mobile) body>.sticky {
display: none !important;
}
.model-group-tabs {
display: flex;
gap: 24px;
margin: 24px 0 0;
border-bottom: 1px solid #e3e8ee;
max-width: 455px;
}
.model-group-tabs button {
appearance: none;
background: none;
border: 0;
padding: 0 0 12px;
font: inherit;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
color: #66768a;
cursor: pointer;
box-shadow: inset 0 -2px 0 transparent;
}
.model-group-tabs button.on {
color: #17304b;
box-shadow: inset 0 -2px 0 #17304b;
}
.model-group-tabs button:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 4px;
}
html.refre-mobile .model-group-tabs {
display: none;
}
html body #serviceTabs [data-service-tab][hidden] {
display: none !important;
}
html:not(.refre-mobile) body #serviceTabs {
justify-content: flex-start !important;
}
html:not(.refre-mobile) body #serviceTabs [data-service-tab] {
flex: 0 0 100px !important;
height: 100px !important;
min-height: 100px !important;
}
html:not(.refre-mobile) body #pricePersonalZone .model-group-tabs + .service-vertical-layout {
margin-top: 24px !important;
}
#refreMobileHome .rf-mtabs {
display: flex;
gap: 24px;
margin-top: 16px;
border-bottom: 1px solid #e3e8ee;
}
#refreMobileHome .rf-mtabs button {
appearance: none;
background: none;
border: 0;
padding: 0 0 12px;
font: inherit;
font-size: 16px !important;
font-weight: 600;
color: #66768a;
box-shadow: inset 0 -2px 0 transparent;
min-height: 0;
width: auto;
}
#refreMobileHome .rf-mtabs button[aria-selected="true"] {
color: #17304b;
box-shadow: inset 0 -2px 0 #17304b;
}
#refreMobileHome .rf-mtabs + .rf-price-panel {
margin-top: 16px;
}
#refreMobileHome .rf-models li[hidden] {
display: none !important;
}
#refreMobileHome .rf-models li:not([hidden]) ~ li:not([hidden]) {
border-top: 1px solid #edf0f4;
}
html.refre-mobile body>.header,
html.refre-mobile body>.header:not(.header-scrolled) {
background: #fff !important;
border-bottom: 1px solid #e6e9ee !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
html.refre-mobile body>.header .logo,
html.refre-mobile body>.header .logo #brandTop,
html.refre-mobile body>.header:not(.header-scrolled) .logo,
html.refre-mobile body>.header:not(.header-scrolled) .logo #brandTop {
color: #17304b !important;
}
html.refre-mobile body>.header .header-actions .header-cta.personal-open,
html.refre-mobile body>.header:not(.header-scrolled) .header-actions .header-cta.personal-open {
background: #fff !important;
color: #17304b !important;
border: 1px solid #d5dbe3 !important;
}
html.refre-mobile body>.header .header-actions .header-cta.business-open,
html.refre-mobile body>.header:not(.header-scrolled) .header-actions .header-cta.business-open {
background: #17304b !important;
color: #fff !important;
border: 1px solid #17304b !important;
}
html body #refreMobileHome #rfMobileHero.rf-hero-g {
background: #fff !important;
padding: 92px 0 32px !important;
overflow: visible;
isolation: auto;
}
html body #refreMobileHome #rfMobileHero.rf-hero-g .rf-wrap {
display: block !important;
min-height: 0 !important;
max-width: none;
}
html body #refreMobileHome #rfMobileHero.rf-hero-g .rf-eyebrow {
color: #2563eb !important;
font-size: 12px !important;
font-weight: 600 !important;
margin: 0 !important;
letter-spacing: -0.02em !important;
}
html body #refreMobileHome #rfMobileHero.rf-hero-g h1 {
margin: 8px 0 0 !important;
}
html body #refreMobileHome #rfMobileHero.rf-hero-g h1 :is(span,em) {
color: #17304b !important;
font-size: 28px !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
line-height: 1.3 !important;
}
html body #refreMobileHome #rfMobileHero.rf-hero-g .rf-hero-description {
color: #3b4c60 !important;
font-size: 14px !important;
line-height: 1.6 !important;
letter-spacing: -0.02em !important;
margin: 16px 0 0 !important;
max-width: none;
}
html body #refreMobileHome #rfMobileHero .rf-path {
all: unset;
box-sizing: border-box;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
border-bottom: 1px solid #e6e9ee;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html body #refreMobileHome #rfMobileHero .rf-path small {
display: block;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.5;
}
html body #refreMobileHome #rfMobileHero .rf-path strong {
display: block;
}
html body #refreMobileHome #rfMobileHero .rf-path svg {
flex: none;
}
html body #refreMobileHome #rfMobileHero .rf-path-biz {
color: #2563eb;
}
html body #refreMobileHome #rfMobileHero .rf-path:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats {
list-style: none;
margin: 24px 0 0;
padding: 0;
display: flex;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats li {
flex: 1;
min-width: 0;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats li+li {
border-left: 1px solid #e6e9ee;
padding-left: 12px;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats strong {
display: block;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.3;
color: #17304b;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats span {
display: block;
margin-top: 4px;
font-size: 12px;
color: #4a5b70;
letter-spacing: -0.02em;
line-height: 1.5;
}
html body #refreMobileHome #rfMobileHero .rf-hero-photo {
margin: 24px 0 0;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16/9;
}
html body #refreMobileHome #rfMobileHero .rf-hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
html:not(.refre-mobile) body #rfStats .rf-why-list {
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 24px !important;
}
#rfReviewAuthor {
display: inline-flex;
align-items: center;
gap: 8px;
}
html body #rfCaseContent #rfReviewAuthor {
align-items: center !important;
gap: 8px !important;
}
html body .footer-legal {
display: flex !important;
align-items: center;
gap: 8px;
font-size: 12px !important;
letter-spacing: -0.02em;
}
@media(min-width:769px) {
html body .footer-legal {
font-size: 13px !important;
}
}
html body .footer-legal button {
appearance: none;
background: none;
border: 0;
font: inherit;
font-size: 12px !important;
font-weight: 600;
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
width: auto;
}
@media(min-width:769px) {
html body .footer-legal button {
font-size: 13px !important;
}
}
html body .footer-legal span {
opacity: .5;
}
#refreLegal {
width: min(640px,calc(100vw - 32px));
max-height: min(80vh,720px);
padding: 0;
border: 0;
border-radius: 16px;
color: #17304b;
font-family: inherit;
box-shadow: 0 24px 64px rgba(16,38,64,.24);
}
#refreLegal::backdrop {
background: rgba(16,38,64,.48);
}
#refreLegal .legal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid #e6e9ee;
position: sticky;
top: 0;
background: #fff;
}
#refreLegal h2 {
margin: 0;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.02em;
}
#refreLegal .legal-close {
appearance: none;
background: none;
border: 0;
width: 32px;
height: 32px;
font-size: 24px;
line-height: 1;
color: #3b4c60;
cursor: pointer;
}
@media(min-width:769px) {
#refreLegal .legal-close {
font-size: 22px;
}
}
#refreLegal .legal-body {
padding: 16px 24px 24px;
overflow: auto;
max-height: calc(min(80vh,720px) - 66px);
}
#refreLegal h4 {
margin: 16px 0 4px;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.02em;
}
#refreLegal h4:first-child {
margin-top: 0;
}
#refreLegal p,
#refreLegal li {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #3b4c60;
letter-spacing: -0.02em;
}
#refreLegal ul {
margin: 0;
padding-left: 20px;
}
#refreLegal ol {
margin: 0;
padding-left: 20px;
}
html body .rf-why-list .rf-why-card.rf-why-ov {
position: relative;
overflow: hidden;
border: 0 !important;
border-radius: 16px;
min-height: 320px;
background: #17304b;
display: flex;
flex-direction: column;
isolation: isolate;
}
html body .rf-why-ov .rf-why-fig {
position: absolute !important;
inset: 0;
margin: 0 !important;
height: auto !important;
aspect-ratio: auto !important;
z-index: -1;
overflow: hidden;
}
html body .rf-why-ov .rf-why-fig img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(2px) brightness(.85);
transform: scale(1.06);
}
html body .rf-why-ov .rf-why-fig::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,rgba(16,38,64,.16) 0%,rgba(16,38,64,.56) 48%,rgba(16,38,64,.88) 100%);
}
html body .rf-why-ov .rf-why-body {
position: relative;
padding: 24px !important;
background: none !important;
color: #fff;
}
html body .rf-why-ov .rf-why-n {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: -0.02em;
color: #bcd3ea;
}
@media(min-width:769px) {
html body .rf-why-ov .rf-why-n {
font-size: 13px;
}
}
html body .rf-why-ov h3 {
margin: 8px 0 0 !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
line-height: 1.3 !important;
color: #fff !important;
}
html body .rf-why-ov h3 b {
display: block;
margin-top: 4px;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.04em;
color: #fff;
}
@media(min-width:769px) {
html body .rf-why-ov h3 b {
font-size: 32px;
}
}
html body .rf-why-ov p {
margin: 8px 0 0 !important;
font-size: 14px !important;
line-height: 1.6 !important;
letter-spacing: -0.02em !important;
color: rgba(255,255,255,.88) !important;
}
html body #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body h3 {
color: #fff !important;
}
html body #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body p {
color: rgba(255,255,255,.88) !important;
font-size: 14px !important;
}
html body #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body {
background: none !important;
}
#pSysGroup {
border: 1px solid #dfe5ed;
border-radius: 16px;
background: #fff;
margin: 0 0 12px;
overflow: hidden;
}
#pSysGroup>summary {
list-style: none;
display: flex;
align-items: center;
gap: 12px;
min-height: 76px;
padding: 16px 12px;
cursor: pointer;
}
#pSysGroup>summary::-webkit-details-marker {
display: none;
}
#pSysGroup .catalog-group-copy {
flex: 1;
min-width: 0;
}
#pSysGroup .catalog-group-copy strong {
display: block;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.02em;
color: #17304b;
}
#pSysGroup .catalog-group-copy small {
display: block;
margin-top: 4px;
font-size: 14px;
color: #4a5b70;
letter-spacing: -0.02em;
}
#pSysGroup #pSysGroupCount {
font-style: normal;
font-size: 14px;
font-weight: 700;
color: #2563eb;
letter-spacing: -0.02em;
}
#pSysGroup>summary .catalog-chevron {
width: 8px;
height: 8px;
border-right: 1.6px solid #4a5b70;
border-bottom: 1.6px solid #4a5b70;
transform: rotate(45deg);
margin: 0 4px 4px;
}
#pSysGroup[open]>summary .catalog-chevron {
transform: rotate(-135deg);
margin-bottom: -4px;
}
#pSysGroup .catalog-group-body {
padding: 0 12px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
#pSysGroup .catalog-group-body .personal-qty-row {
margin: 0 !important;
}
.rf-gtabs {
display: flex;
gap: 24px;
margin: 16px 0 12px;
border-bottom: 1px solid #e3e8ee;
}
.rf-gtabs button {
appearance: none;
background: none;
border: 0;
padding: 0 0 12px;
font: inherit;
font-size: 16px !important;
font-weight: 600;
letter-spacing: -0.02em;
color: #66768a;
cursor: pointer;
box-shadow: inset 0 -2px 0 transparent;
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 0;
width: auto;
}
.rf-gtabs button[aria-selected="true"] {
color: #17304b;
box-shadow: inset 0 -2px 0 #17304b;
}
.rf-gtabs button em {
font-style: normal;
font-size: 12px;
font-weight: 700;
color: #2563eb;
}
@media(min-width:769px) {
.rf-gtabs button em {
font-size: 13px;
}
}
.rf-gtabs button:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 4px;
}
#businessBg .b-model-card[hidden],
#bizQtyBuilder .biz-qty-row[hidden] {
display: none !important;
}
html body .rf-src-t-naver {
color: #03c75a !important;
font-weight: 700;
}
html body .rf-src-t-dg {
color: #ff7e36 !important;
font-weight: 700;
}
html body #rfCaseContent #rfReviewAuthor {
display: inline !important;
}
html body #rfCaseContent #rfReviewAuthor span.rf-src-t-naver {
color: #03c75a !important;
font-weight: 700 !important;
display: inline !important;
margin: 0 !important;
}
html body #rfCaseContent #rfReviewAuthor span.rf-src-t-dg {
color: #ff7e36 !important;
font-weight: 700 !important;
display: inline !important;
margin: 0 !important;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 {
list-style: none;
margin: 24px 0 0;
display: flex;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 li {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 8px;
border: 0;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 li+li {
border-left: 1px solid #dde3ea;
padding-left: 8px;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 svg {
width: 24px;
height: 24px;
color: #2563eb;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 span {
display: block;
font-size: 12px;
letter-spacing: -0.02em;
line-height: 1.5;
white-space: nowrap;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 strong {
margin-top: 4px;
letter-spacing: -0.04em;
line-height: 1.3;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 strong i {
font-style: normal;
color: #2563eb;
margin-left: 1px;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 svg {
display: none !important;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 span {
margin-top: 0 !important;
color: #3b4c60 !important;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 {
padding: 16px 0 !important;
}
:root {
--muted: #4a5b70;
--text-muted: #4a5b70;
--rf-muted: #4a5b70;
--text-body: #3b4c60;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .mobile-popup-unit-note {
display: none !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-desc {
display: block !important;
margin: 8px 0 0 !important;
color: #a4b3c5 !important;
font-size: 14px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-benefits {
display: grid !important;
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
margin: 20px 0 0 !important;
padding: 16px 4px !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 14px !important;
background: rgba(255,255,255,.04) !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-benefit {
padding: 0 6px !important;
min-width: 0 !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-benefit + .event-popup-benefit {
border-left: 1px solid rgba(255,255,255,.12) !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-benefit strong {
display: block !important;
margin: 0 0 4px !important;
color: #7ba7ff !important;
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
white-space: nowrap !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-benefit span {
display: block !important;
color: #a4b3c5 !important;
font-size: 13px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
white-space: nowrap !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-inner {
text-align: center !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-kicker {
margin: 0 auto 16px !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text h3 {
margin: 0 !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-offer {
margin: 20px 0 0 !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-book {
margin: 24px 0 0 !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-hide {
margin: 8px auto 0 !important;
}
html.refre-mobile body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-offer {
margin: 20px 0 0 !important;
}
@media(max-width:374px) {
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-benefit strong {
font-size: 15px !important;
}
html body #eventPopupBg#eventPopupBg .event-popup-text .event-popup-benefit span {
font-size: 12px !important;
}
}
.rf-hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
.rf-consent {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 16px 0 0;
padding: 12px 16px;
border: 1px solid #d5dfeb;
border-radius: 12px;
background: #fff;
}
.rf-consent label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 1.6;
color: #17304b;
font-weight: 600;
letter-spacing: -0.02em;
cursor: pointer;
}
.rf-consent input {
width: 20px;
height: 20px;
accent-color: #2563eb;
flex: none;
}
.rf-consent em {
font-style: normal;
color: #2563eb;
}
.rf-consent button {
border: 0;
background: none;
padding: 4px 0;
font-size: 13px;
line-height: 1.6;
color: #4a5b70;
text-decoration: underline;
letter-spacing: -0.02em;
flex: none;
}
#workflow .process-detail-media {
position: relative;
overflow: hidden;
}
#workflow .rf-initial-work-photo {
display: block;
width: 100%;
height: 100%;
min-height: 220px;
object-fit: contain;
background: #eef2f5;
}
#rfMobileProcess .rf-initial-mobile-photo {
grid-column: 2;
min-width: 0;
margin: 12px 0;
width: 100%;
}
#rfMobileProcess .rf-initial-mobile-photo img {
display: block;
width: 100%;
height: 240px;
object-fit: contain;
background: #eef2f5;
border-radius: 8px;
}
#rfMobileProcess .rf-initial-mobile-photo figcaption {
font-size: 12px;
line-height: 1.5;
margin-top: 6px;
}
html body :is(#personalBg, #businessBg) .rf-house-guide {
color: #17304b;
overflow: hidden;
}
html body .rf-house-guide .rf-house-content {
display: grid;
justify-items: center;
gap: 6px;
}
html body .rf-house-guide .rf-house-content[hidden] {
display: none !important;
}
html body .rf-house-guide .rf-house-art {
width: 160px;
height: 213.333px;
flex-shrink: 0;
background-image: url("/img/9dbf7e5350b3.webp");
background-size: 400% 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
@keyframes rfHouseWave {from{background-position:0 0;}to{background-position:133.333333% 0;}}
html body .rf-house-guide .rf-house-art.is-waving {
animation: rfHouseWave 1.4s steps(4,end) 1;
}
html body .rf-house-guide .rf-house-message {
width: 100%;
margin: 0 !important;
padding: 0 !important;
color: #36526a !important;
font-size: 15px !important;
line-height: 1.7 !important;
font-weight: 400 !important;
letter-spacing: -.015em !important;
word-break: keep-all;
overflow-wrap: anywhere;
}
@media(min-width:769px) {
html body .rf-house-guide .rf-house-message {
font-size: 16px !important;
line-height: 1.6 !important;
letter-spacing: -0.02em !important;
}
}
@media(max-width:768px) {
html body .rf-house-guide .rf-house-content {
display: contents;
}
html body .rf-house-guide .rf-house-art {
grid-column: 1;
grid-row: 1 / 3;
align-self: center;
width: 72px;
height: 96px;
}
html body .rf-house-guide .rf-house-message {
grid-column: 2;
grid-row: 2;
font-size: 12px !important;
line-height: 1.6 !important;
}
}
@media(prefers-reduced-motion:reduce) {
html body .rf-house-guide .rf-house-art.is-waving {
animation: none !important;
}
}
html body #workflow .process-detail-stage {
align-self: start !important;
min-height: 0 !important;
}
html body #workflow .process-detail-panel {
height: auto !important;
grid-template-rows: auto auto !important;
}
html body #workflow .process-detail-panel .process-detail-media {
height: auto !important;
aspect-ratio: 16/10;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
background: #102640 !important;
}
html body #workflow .process-detail-panel .rf-initial-work-photo {
display: block;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
object-fit: contain !important;
object-position: center !important;
background: #102640 !important;
}
html body #workflow .process-detail-media::after {
display: none !important;
}
@media(min-width:1101px) {
html body #workflow .process-detail-panel {
grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr) !important;
grid-template-rows: minmax(430px,auto) !important;
align-items: stretch !important;
}
html body #workflow .process-detail-panel .process-detail-media {
height: 100% !important;
min-height: 430px !important;
aspect-ratio: auto;
border-bottom: 0;
border-right: 1px solid rgba(255,255,255,.08);
}
html body #workflow .process-detail-panel .rf-initial-work-photo {
position: absolute;
inset: 0;
}
html body #workflow .process-detail-copy {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 28px !important;
}
html body #workflow .process-detail-copy .process-detail-note {
display: block;
margin-top: 24px !important;
padding-top: 20px !important;
}
html body #workflow .process-detail-note span {
margin-bottom: 10px;
}
html body #workflow .process-detail-note strong {
display: block;
}
}
@media(min-width:769px) and (max-width:1100px) {
html body #workflow .process-detail-stage {
width: 100%;
max-width: 680px;
justify-self: center;
}
}
html body #rfMobileProcess .rf-initial-mobile-photo img {
min-height: 0 !important;
max-height: none !important;
background: #102640;
}
html body #rfMobileProcess .rf-initial-mobile-photo figcaption {
padding: 8px 10px;
margin: 0;
line-height: 1.6;
color: #d8e6f5 !important;
}
html body :is(#personalBg,#businessBg) .rf-house-guide {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
@media(min-width:769px) {
html body :is(#personalBg,#businessBg) .rf-house-guide :is(.rf-house-heading strong,.rf-house-toggle) {
color: #e8f1fc !important;
}
html body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-message {
color: #d1e0f2 !important;
}
}
html body :is(#personalBg,#businessBg) .rf-house-guide {
padding: 0 !important;
margin: 0 0 32px !important;
}
html body :is(#personalBg,#businessBg) .rf-house-content {
gap: 12px;
}
@media(min-width:769px) {
html body :is(#personalBg,#businessBg) .rf-house-message {
font-weight: 400 !important;
text-align: left !important;
}
html body :is(#personalBg,#businessBg) .booking-page-description {
letter-spacing: -.01em !important;
}
@media(min-width:769px) {
html body :is(#personalBg,#businessBg) .booking-page-description {
letter-spacing: -0.02em !important;
}
}
}
@media(max-width:768px) {
html body :is(#personalBg,#businessBg) .rf-house-message {
font-weight: 400 !important;
}
}
#rfCaseContent .rf-original-modes[hidden],
#rfCaseContent [data-work-mode][hidden] {
display: none !important;
}
#rfOriginalPhoto .rf-part-pair:has(>figure:only-child) {
grid-template-columns: 1fr !important;
}
#rfOriginalPhoto .rf-part-pair>figure:only-child img {
height: 300px !important;
max-height: 300px !important;
object-fit: contain !important;
}
#rfBAPhotoDialog .rf-ba-dialog-pair>figure:only-child {
grid-column: 1/-1;
}
@media(min-width:769px) {
html body :is(#personalBg,#businessBg) .rf-house-guide {
position: relative;
min-height: 128px;
margin: 0 0 28px !important;
}
html body :is(#personalBg,#businessBg) .rf-house-content {
display: grid;
grid-template-columns: 96px minmax(0,1fr);
gap: 16px;
align-items: center;
justify-items: stretch;
}
html body :is(#personalBg,#businessBg) .rf-house-art {
width: 96px;
height: 128px;
}
html body :is(#personalBg,#businessBg) .rf-house-message {
font-size: 15px !important;
line-height: 1.7 !important;
letter-spacing: -.01em !important;
margin: 0 !important;
}
@media(min-width:769px) {
html body :is(#personalBg,#businessBg) .rf-house-message {
font-size: 16px !important;
line-height: 1.6 !important;
letter-spacing: -0.02em !important;
}
}
html body :is(#personalBg,#businessBg) .booking-page-intro:has(.rf-house-guide)>.booking-page-description {
display: none !important;
}
}
@media(max-width:768px) {
html body #personalBg .form-modal:has(.rf-house-guide) .catalog-instruction {
display: none !important;
}
html body :is(#personalBg,#businessBg) .rf-house-guide {
grid-template-columns: 56px minmax(0,1fr);
column-gap: 12px !important;
margin-bottom: 16px !important;
min-height: 0;
}
html body :is(#personalBg,#businessBg) .rf-house-art {
width: 56px;
height: 74.667px;
}
html body :is(#personalBg,#businessBg) .rf-house-message {
font-size: 12px !important;
line-height: 1.65 !important;
letter-spacing: 0 !important;
}
}
html body>.header .header-actions .header-cta.business-open {
display: inline-flex !important;
align-items: center;
justify-content: center;
white-space: nowrap;
}
html body :is(#personalBg,#businessBg) .rf-house-message {
padding: 0 !important;
}
@media(max-width:768px) {
html body :is(#personalBg,#businessBg) .rf-house-guide {
display: block !important;
}
html body :is(#personalBg,#businessBg) .rf-house-content {
display: grid !important;
grid-template-columns: 56px minmax(0,1fr);
gap: 12px;
align-items: center;
}
html body :is(#personalBg,#businessBg) .rf-house-art,
html body :is(#personalBg,#businessBg) .rf-house-message {
grid-column: auto !important;
grid-row: auto !important;
}
}
html body main>.final-cta,
html body>footer {
padding-inline: 0 !important;
}
html body main>.final-cta>.container,
html body>footer>.container {
box-sizing: border-box !important;
width: 100% !important;
max-width: var(--rf-container-max,1440px) !important;
margin-inline: auto !important;
padding-inline: var(--rf-gutter,48px) !important;
}
.rf-review-rating {
color: #f5c969;
font-size: 16px;
letter-spacing: 1px;
margin: 20px 0 12px;
font-weight: 700;
}
@media(min-width:769px) {
.rf-review-rating {
letter-spacing: 0.08em;
}
}
.rf-original-story {
margin-top: 0 !important;
}
html body #rfMobileProcess .rf-initial-mobile-photo {
width: 100% !important;
aspect-ratio: 4/3 !important;
padding: 0 !important;
margin: 12px 0 0 !important;
border: 1px solid #dce3eb !important;
border-radius: 10px !important;
background: #102640 !important;
overflow: hidden !important;
align-self: start;
}
html body #rfMobileProcess .rf-initial-mobile-photo img {
display: block !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
max-width: none !important;
object-fit: cover !important;
object-position: 50% 50% !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body #rfMobileProcess .rf-initial-mobile-photo figcaption {
display: none !important;
}
html body #rfMobileProcess .rf-timeline li:nth-child(1) img {
object-position: 50% 56% !important;
}
html body #rfMobileProcess .rf-timeline li:nth-child(2) img {
object-position: 50% 55% !important;
}
html body #rfMobileProcess .rf-timeline li:nth-child(6) img {
object-position: 50% 36% !important;
}
@media(min-width:600px) {
html body #rfMobileProcess .rf-timeline li>div {
min-height: 0;
}
html body #rfMobileProcess .rf-timeline li {
grid-template-rows: 90px auto !important;
row-gap: 0;
align-content: start !important;
align-items: start;
}
}
html body #faq .faq .answer {
margin: 0 0 16px !important;
padding: 16px !important;
background: #f3f5f8 !important;
border-radius: 8px !important;
color: #3b4c60 !important;
font-weight: 400 !important;
line-height: 1.6 !important;
position: relative;
padding-left: 44px !important;
}
html body #faq .faq .answer::before {
content: "A";
position: absolute;
left: 16px;
top: 15px;
font-weight: 700;
color: #2563eb;
}
html body #faq .faq button {
font-weight: 600 !important;
color: #17304b !important;
}
html body #refreMobileHome #rfMobileFAQ details summary {
font-weight: 600 !important;
color: #17304b !important;
}
html body #refreMobileHome #rfMobileFAQ details>p {
max-width: none !important;
width: auto !important;
margin: 0 0 16px !important;
padding: 12px 16px 12px 40px !important;
background: #f3f5f8 !important;
border-radius: 8px !important;
color: #3b4c60 !important;
font-weight: 400 !important;
line-height: 1.6 !important;
position: relative;
}
html body #refreMobileHome #rfMobileFAQ details>p::before {
content: "A";
position: absolute;
left: 16px;
top: 12px;
font-weight: 700;
color: #2563eb;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 strong,
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 strong b {
color: #2563eb !important;
font-weight: 700 !important;
font-size: 22px !important;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 strong b {
font-variant-numeric: tabular-nums;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 li {
opacity: 0;
transform: translateY(8px);
transition: opacity .5s ease,transform .5s ease;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2.is-in li {
opacity: 1;
transform: none;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2.is-in li:nth-child(2) {
transition-delay: .12s;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2.is-in li:nth-child(3) {
transition-delay: .24s;
}
@media (prefers-reduced-motion:reduce) {
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 li {
opacity: 1;
transform: none;
transition: none;
}
}
html body .rf-why-list .rf-why-card.rf-why-ov {
justify-content: flex-end !important;
}
html body .rf-why-ov .rf-why-body {
min-height: 188px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
html body #refreMobileHome .rf-why-ov .rf-why-body {
min-height: 224px !important;
}
html body .rf-why-ov h3 b.rf-why-big-n {
display: inline !important;
margin: 0 !important;
font-size: inherit !important;
font-weight: 800 !important;
color: #8cc0ff !important;
font-variant-numeric: tabular-nums;
}
html body .rf-why-ov h3 b.rf-why-big-n+b.rf-why-big-n {
margin-left: 0 !important;
}
html body .rf-why-list .rf-why-card.rf-why-ov {
opacity: 0;
transform: translateY(16px);
transition: opacity .6s ease,transform .6s ease;
}
html body .rf-why-list .rf-why-card.rf-why-ov.is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion:reduce) {
html body .rf-why-list .rf-why-card.rf-why-ov {
opacity: 1;
transform: none;
transition: none;
}
}
.modal-bg .date-flex-row {
margin-top: 12px !important;
font-size: 14px !important;
white-space: nowrap;
}
html.refre-mobile #personalBg .date-flex-row {
align-items: center !important;
}
.modal-bg .parking-field {
border: 0;
margin: 16px 0 0;
padding: 0;
min-width: 0;
}
.modal-bg .parking-field legend {
padding: 0;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: #17304b;
}
.modal-bg .parking-options {
display: grid;
grid-template-columns: 1fr 1fr 1.4fr;
gap: 8px;
}
.modal-bg .parking-options label {
position: relative;
display: block;
margin: 0;
cursor: pointer;
}
.modal-bg .parking-options input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.modal-bg .parking-options span {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
border: 1px solid #d5dbe3;
border-radius: 12px;
background: #fff;
font-size: 14px;
font-weight: 600;
color: #3b4c60;
white-space: nowrap;
}
.modal-bg .parking-options input:checked+span {
border-color: #17304b;
background: #17304b;
color: #fff;
}
.modal-bg .parking-options input:focus-visible+span {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 {
border: 0 !important;
border-top: 0 !important;
border-radius: 16px !important;
background: #fff !important;
box-shadow: 0 8px 28px rgba(16,38,64,.10) !important;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 li+li {
border-left-color: #edf0f4 !important;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 strong {
display: inline-flex !important;
align-items: center;
gap: 0 !important;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 svg.rf-ok {
margin-right: 4px;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 svg.rf-ok {
display: block !important;
width: 20px;
height: 20px;
fill: none;
stroke: #2563eb;
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 24;
stroke-dashoffset: 24;
transition: stroke-dashoffset .5s ease 1.25s;
}
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2.is-in svg.rf-ok {
stroke-dashoffset: 0;
}
@media (prefers-reduced-motion:reduce) {
html body #refreMobileHome #rfMobileHero .rf-hero-stats-v2 svg.rf-ok {
stroke-dashoffset: 0;
transition: none;
}
}
html body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-message {
font-size: 16px !important;
line-height: 1.5 !important;
letter-spacing: -0.02em !important;
font-weight: 600 !important;
padding: 0 !important;
}
@media(min-width:769px) {
html body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-message {
line-height: 1.4 !important;
}
}
html.refre-mobile body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-message {
color: #17304b !important;
}
.modal-bg .date-flex-row+.schedule-help {
margin-top: 4px !important;
}
html body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-content {
align-items: center !important;
gap: 12px !important;
}
html body .modal-bg label.date-flex.date-flex-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 12px 0 0 !important;
padding: 0 !important;
min-height: 20px !important;
font-size: 14px !important;
line-height: 20px !important;
font-weight: 600 !important;
color: #17304b !important;
white-space: nowrap;
}
html body .modal-bg label.date-flex.date-flex-row input[type=checkbox] {
width: 18px !important;
height: 18px !important;
min-height: 18px !important;
flex: 0 0 18px !important;
margin: 0 !important;
}
html body .modal-bg .date-flex-row+.schedule-help {
margin: 8px 0 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #4a5b70 !important;
}
@media(min-width:769px) {
html body .modal-bg .date-flex-row+.schedule-help {
line-height: 1.4 !important;
}
}
html body .modal-bg .parking-field {
margin-top: 24px !important;
}
#workflow .process-detail-stage {
position: relative;
}
#workflow .rf-pc-pplay {
position: absolute;
right: 16px;
top: 16px;
z-index: 3;
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background: rgba(16,38,64,.6);
cursor: pointer;
}
#workflow .rf-pc-pplay::before,
#workflow .rf-pc-pplay::after {
content: "";
position: absolute;
top: 13px;
width: 4px;
height: 14px;
border-radius: 1px;
background: #fff;
}
#workflow .rf-pc-pplay::before {
left: 14px;
}
#workflow .rf-pc-pplay::after {
left: 22px;
}
#workflow .rf-pc-pplay.is-paused::before {
left: 16px;
top: 12px;
width: 0;
height: 0;
background: none;
border-left: 12px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-radius: 0;
}
#workflow .rf-pc-pplay.is-paused::after {
display: none;
}
#workflow .rf-pc-pplay:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
html.refre-mobile #workflow .rf-pc-pplay {
display: none;
}
html body #refreMobileHome #rfMobileProcess .rf-pnote {
margin-top: 0 !important;
}
html body #refreMobileHome #rfMobileHero .rf-hero-paths {
margin-top: 24px !important;
border-top: 0 !important;
display: flex;
flex-direction: column;
gap: 12px;
}
html body #refreMobileHome #rfMobileHero .rf-path {
padding: 20px !important;
border: 1.5px solid #17304b !important;
border-radius: 16px !important;
background: #fff !important;
color: #17304b !important;
}
html body #refreMobileHome #rfMobileHero .rf-path small {
font-size: 13px !important;
color: #3b4c60 !important;
}
html body #refreMobileHome #rfMobileHero .rf-path strong {
margin-top: 4px !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
line-height: 1.3 !important;
}
html body #refreMobileHome #rfMobileHero .rf-path svg {
width: 28px !important;
height: 28px !important;
color: #2563eb;
}
.rf-rv-swipe-wrap {
display: none;
position: relative;
}
html.refre-mobile #rfCaseContent .rf-rv-swipe-wrap {
display: block;
margin-top: 24px;
}
html.refre-mobile #rfCaseContent .rf-original-gallery,
html.refre-mobile #rfCaseContent .rf-original-modes {
display: none !important;
}
.rf-rv-swipe {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin: 0 -20px;
padding: 0 20px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.rf-rv-swipe::-webkit-scrollbar {
display: none;
}
.rf-rv-swipe:focus-visible {
outline: 2px solid #8cc0ff;
outline-offset: 4px;
}
.rf-rv-card {
flex: 0 0 84%;
scroll-snap-align: start;
scroll-margin-left: 20px;
background: #17304b;
border: 1px solid #2a3f58;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.rf-rv-pp {
all: unset;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
height: 168px;
cursor: pointer;
overflow: hidden;
}
.rf-rv-pp:focus-visible {
outline: 2px solid #8cc0ff;
outline-offset: -2px;
}
.rf-rv-ph {
position: relative;
display: block;
height: 100%;
overflow: hidden;
min-height: 0;
}
.rf-rv-ph img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rf-rv-ph em {
position: absolute;
top: 8px;
left: 8px;
font-style: normal;
font-size: 13px;
font-weight: 700;
color: #fff;
background: rgba(16,38,64,.82);
padding: 2px 8px;
border-radius: 6px;
}
.rf-rv-ph em.after {
left: auto;
right: 8px;
background: #2563eb;
}
.rf-rv-bd {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
}
.rf-rv-star {
color: #fbbf24;
font-size: 13px;
letter-spacing: 1px;
}
@media(min-width:769px) {
.rf-rv-star {
letter-spacing: 0.08em;
}
}
.rf-rv-bd strong {
display: block;
margin-top: 4px;
font-size: 16px;
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
line-height: 1.5;
}
@media(min-width:769px) {
.rf-rv-bd strong {
line-height: 1.4;
}
}
.rf-rv-bd p {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.6;
color: #d5e0eb;
letter-spacing: -0.02em;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rf-rv-bd small {
display: block;
margin-top: auto;
padding-top: 12px;
font-size: 13px;
color: #a9bbd0;
}
.rf-rv-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.rf-rv-dots i {
width: 8px;
height: 8px;
border-radius: 8px;
background: #36506f;
transition: width .3s,background .3s;
}
.rf-rv-dots i.on {
width: 24px;
background: #2563eb;
}
.rf-rv-play {
position: absolute;
right: 0;
bottom: -6px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid #36506f;
background: transparent;
cursor: pointer;
}
.rf-rv-play::before,
.rf-rv-play::after {
content: "";
position: absolute;
top: 10px;
width: 3px;
height: 11px;
background: #c9d6e5;
border-radius: 1px;
}
.rf-rv-play::before {
left: 11px;
}
.rf-rv-play::after {
left: 17px;
}
.rf-rv-play.is-paused::before {
left: 12px;
top: 9px;
width: 0;
height: 0;
background: none;
border-left: 10px solid #c9d6e5;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-radius: 0;
}
.rf-rv-play.is-paused::after {
display: none;
}
html:not(.refre-mobile) body #rfStats .rf-stats-inner {
max-width: 1344px !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: calc(100% - 96px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
html body #refreMobileHome .rf-sec-lab,
html body #refreMobileHome .rf-why-lab,
html body #refreMobileHome #rfMobileReviews .section-label {
margin: 0 0 8px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
line-height: 1.5 !important;
color: #2563eb !important;
text-transform: uppercase;
}
html body #refreMobileHome #rfMobileReviews .section-label {
color: #7cc4ff !important;
}
html body #refreMobileHome .rf-footer-ctas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 24px;
}
html body #refreMobileHome .rf-footer-ctas button {
margin: 0 !important;
width: 100% !important;
min-height: 52px !important;
border-radius: 12px !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 0 8px !important;
white-space: nowrap;
}
html:not(.refre-mobile) body>.header .header-actions .header-cta.business-open {
background: #17304b !important;
color: #fff !important;
border: 1px solid #17304b !important;
}
html:not(.refre-mobile) body>.header .header-actions .header-cta.personal-open {
background: #fff !important;
color: #17304b !important;
border: 1px solid #c9d1dc !important;
}
html:not(.refre-mobile) body>.header:not(.header-scrolled) .header-actions .header-cta.business-open {
background: #f2f7fc !important;
color: #17304b !important;
border: 1px solid #f2f7fc !important;
}
html:not(.refre-mobile) body>.header:not(.header-scrolled) .header-actions .header-cta.personal-open {
background: rgba(11,28,46,.4) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.85) !important;
}
html:not(.refre-mobile) body #heroSection .business-open {
background: #e9f5f7 !important;
color: #102640 !important;
border: 1px solid #e9f5f7 !important;
}
html:not(.refre-mobile) body #heroSection .personal-open {
background: rgba(16,40,63,.24) !important;
color: #fff !important;
border: 1px solid #8092a2 !important;
}
html body #refreMobileHome #rfMobileHero #rfMobileStart.rf-path {
background: #fff !important;
color: #17304b !important;
}
html body #refreMobileHome #rfMobileHero #rfMobileStart.rf-path small {
color: #3b4c60 !important;
}
html body #refreMobileHome #rfMobileHero #rfMobileStart.rf-path svg {
color: #7ba7ff !important;
}
html body #refreMobileHome #rfMobileHero .rf-path.rf-path-biz {
background: #17304b !important;
color: #fff !important;
}
html body #refreMobileHome #rfMobileHero .rf-path.rf-path-biz small {
color: rgba(255,255,255,.78) !important;
}
html body #refreMobileHome #rfMobileHero .rf-path.rf-path-biz svg {
color: #fff !important;
}
html body #refreMobileHome .rf-footer-ctas button:first-child {
background: #fff !important;
color: #17304b !important;
border: 1.5px solid #17304b !important;
}
html body #refreMobileHome .rf-footer-ctas .rf-button-line {
background: #17304b !important;
color: #fff !important;
border: 1.5px solid #17304b !important;
}
html:not(.refre-mobile) body>.header.header-scrolled .header-actions .header-cta.business-open.business-open {
background: #17304b !important;
color: #fff !important;
border: 1px solid #17304b !important;
}
html:not(.refre-mobile) body>.header.header-scrolled .header-actions .header-cta.personal-open.personal-open {
background: #fff !important;
color: #17304b !important;
border: 1px solid #c9d1dc !important;
}
html:not(.refre-mobile) body #heroSection.hero .hero-actions .business-open.business-open {
background: #e9f5f7 !important;
color: #102640 !important;
border: 1px solid #e9f5f7 !important;
}
html:not(.refre-mobile) body #heroSection.hero .hero-actions .personal-open.personal-open {
background: rgba(16,40,63,.24) !important;
color: #fff !important;
border: 1px solid #8092a2 !important;
}
html body #refreMobileHome .rf-mtabs button {
min-height: 44px !important;
}
html body #refreMobileHome .rf-ptabs button {
min-height: 44px !important;
}
html body .rf-rv-play {
width: 44px !important;
height: 44px !important;
bottom: -12px !important;
}
html body .rf-rv-play::before {
top: 16px !important;
left: 17px !important;
}
html body .rf-rv-play::after {
top: 16px !important;
left: 23px !important;
}
html body .rf-rv-play.is-paused::before {
top: 15px !important;
left: 18px !important;
}
html body #refreMobileHome .rf-contact-inline a,
html body #refreMobileHome .rf-pplay {
min-width: 44px !important;
min-height: 44px !important;
}
html body .footer-legal button {
min-height: 44px !important;
padding: 0 4px !important;
display: inline-flex !important;
align-items: center;
}
html body .footer-legal {
margin-top: 4px !important;
}
@media(min-width:769px) {
html:not(.refre-mobile) body #rfStats .rf-stats-inner {
padding-left: 48px !important;
padding-right: 48px !important;
box-sizing: border-box !important;
}
html:not(.refre-mobile) .final-cta .final-box,
html:not(.refre-mobile) footer .container {
max-width: none !important;
padding-left: max(48px,calc((100% - 1344px)/2 + 48px)) !important;
padding-right: max(48px,calc((100% - 1344px)/2 + 48px)) !important;
}
}
#bizFlow {
background: #fff;
color: #fff;
padding: 72px 0;
}
#bizFlow>.container {
background: #17304b;
border-radius: 24px;
padding-top: 56px;
padding-bottom: 48px;
}
#bizFlow .rf-biz-head {
max-width: 640px;
display: block;
}
#bizFlow .section-label {
color: #8fb3f5 !important;
}
#bizFlow .rf-biz-head h2 {
margin: 12px 0 0;
font-size: 32px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.3;
color: #fff;
}
#bizFlow .rf-biz-head p {
margin: 16px 0 0;
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,.72);
letter-spacing: -0.02em;
}
.rf-biz-steps {
list-style: none;
margin: 48px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5,minmax(0,1fr));
gap: 24px;
}
.rf-biz-steps li {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.rf-biz-steps li:not(:last-child)::after {
content: "";
position: absolute;
top: 27px;
left: 72px;
right: -16px;
height: 2px;
background: repeating-linear-gradient(90deg,rgba(143,179,245,.5) 0 4px,transparent 4px 8px);
}
.rf-biz-ic {
width: 56px;
height: 56px;
border-radius: 16px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
color: #8fb3f5;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.rf-biz-ic svg {
width: 24px;
height: 24px;
}
.rf-biz-steps li:last-child .rf-biz-ic {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
.rf-biz-no {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
color: #8fb3f5;
line-height: 1.4;
}
.rf-biz-steps b {
font-size: 18px;
font-weight: 700;
color: #fff;
letter-spacing: -0.04em;
line-height: 1.3;
}
.rf-biz-steps span.d {
font-size: 14px;
color: rgba(255,255,255,.72);
line-height: 1.6;
letter-spacing: -0.02em;
word-break: keep-all;
}
#rfMobileBiz {
background: #17304b;
color: #fff;
margin: 32px 20px 0;
border-radius: 20px;
padding: 32px 20px;
}
#rfMobileBiz .rf-m-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: #8fb3f5;
line-height: 1.4;
}
#rfMobileBiz h2 {
margin: 8px 0 0;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.3;
color: #fff;
}
#refreMobileHome #rfMobileBiz h2 {
color: #fff !important;
}
#rfMobileBiz ol {
list-style: none;
margin: 24px 0 0;
padding: 0;
position: relative;
}
#rfMobileBiz li {
position: relative;
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
padding-bottom: 20px;
}
#rfMobileBiz li:last-child {
padding-bottom: 0;
}
#rfMobileBiz li:not(:last-child)::before {
content: "";
position: absolute;
left: 21px;
top: 44px;
bottom: 0;
width: 2px;
background: repeating-linear-gradient(rgba(143,179,245,.5) 0 4px,transparent 4px 8px);
}
#rfMobileBiz .o {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
color: #8fb3f5;
display: flex;
align-items: center;
justify-content: center;
}
#rfMobileBiz li:last-child .o {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
#rfMobileBiz .o svg {
width: 22px;
height: 22px;
}
#rfMobileBiz li b {
display: block;
padding-top: 2px;
font-size: 16px;
font-weight: 700;
color: #fff;
letter-spacing: -0.04em;
line-height: 1.4;
}
#rfMobileBiz li b small {
font-size: 12px;
font-weight: 700;
color: #8fb3f5;
letter-spacing: 0.08em;
margin-right: 6px;
}
#rfMobileBiz li span {
display: block;
margin-top: 2px;
font-size: 13px;
color: rgba(255,255,255,.72);
line-height: 1.6;
letter-spacing: -0.02em;
}
#rfMobileBiz .rf-m-note {
margin: 24px 0 0;
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,.72);
}
#rfMobileBiz .rf-m-btn {
all: unset;
box-sizing: border-box;
margin-top: 16px;
width: 100%;
min-height: 48px;
border-radius: 12px;
background: #fff;
color: #17304b;
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
letter-spacing: -0.02em;
}
@media(max-width:1100px) {
.rf-biz-steps {
grid-template-columns: repeat(3,minmax(0,1fr));
row-gap: 32px;
}
.rf-biz-steps li::after {
display: none;
}
}
@media(max-width:768px) {
#bizFlow {
padding: 32px 0;
}
.rf-biz-steps {
grid-template-columns: 1fr;
}
}
.rf-biz-anim li {
opacity: .35;
transition: opacity .5s ease;
}
.rf-biz-anim li.on {
opacity: 1;
}
.rf-biz-anim li .rf-biz-ic,
.rf-biz-anim li .o {
transition: background-color .3s,border-color .3s,color .3s,box-shadow .3s;
}
.rf-biz-anim li:last-child:not(.on) .rf-biz-ic,
#rfMobileBiz .rf-biz-anim li:last-child:not(.on) .o {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.18);
color: #8fb3f5;
}
.rf-biz-anim li.cur .rf-biz-ic,
#rfMobileBiz .rf-biz-anim li.cur .o {
background: #2563eb;
border-color: #2563eb;
color: #fff;
box-shadow: 0 0 0 6px rgba(37,99,235,.28);
}
.rf-biz-anim li:last-child.cur .rf-biz-ic,
.rf-biz-anim li:last-child.cur .o {
box-shadow: none;
}
.rf-biz-steps.rf-biz-anim li:not(:last-child)::before {
content: "";
position: absolute;
top: 27px;
left: 72px;
right: -16px;
height: 2px;
background: #8fb3f5;
transform: scaleX(0);
transform-origin: left;
transition: transform .5s ease;
z-index: 1;
}
.rf-biz-steps.rf-biz-anim li.done::before {
transform: scaleX(1);
}
#rfMobileBiz ol.rf-biz-anim li:not(:last-child)::after {
content: "";
position: absolute;
left: 21px;
top: 44px;
bottom: 0;
width: 2px;
background: #8fb3f5;
transform: scaleY(0);
transform-origin: top;
transition: transform .5s ease;
}
#rfMobileBiz ol.rf-biz-anim li.done::after {
transform: scaleY(1);
}
@media(max-width:1100px) {
.rf-biz-steps.rf-biz-anim li::before {
display: none;
}
}
#refreMobileHome .rf-why-list {
scroll-padding: 0 20px;
}
#refreMobileHome .rf-why-list .rf-why-card.rf-why-ov {
flex: 0 0 264px !important;
min-height: 0 !important;
height: 260px !important;
scroll-snap-align: start;
}
html body #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body {
padding: 20px !important;
min-height: 0 !important;
height: auto !important;
flex: 0 0 auto !important;
margin-top: auto !important;
}
html body #refreMobileHome #rfMobileHero .rf-path.rf-path {
padding: 16px 20px !important;
}
html body #refreMobileHome #rfMobileHero .rf-path.rf-path small {
font-size: 12px !important;
}
html body #refreMobileHome #rfMobileHero .rf-path.rf-path strong {
margin-top: 2px !important;
}
html body #refreMobileHome #rfMobileHero .rf-path.rf-path svg {
width: 24px !important;
height: 24px !important;
}
#priceBusinessZone #bizFlow {
background: #17304b;
color: #fff;
border-radius: 20px;
padding: 40px;
margin: 0 0 40px;
}
#priceBusinessZone #bizFlow .rf-biz-head {
max-width: none;
}
#priceBusinessZone #bizFlow .rf-biz-lab {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
color: #8fb3f5;
line-height: 1.4;
}
html body #priceBusinessZone #bizFlow h3 {
margin: 8px 0 0 !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
line-height: 1.3 !important;
color: #fff !important;
max-width: none !important;
}
html body #priceBusinessZone #bizFlow .rf-biz-head p {
margin: 8px 0 0 !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: rgba(255,255,255,.72) !important;
letter-spacing: -0.02em !important;
max-width: none !important;
}
#priceBusinessZone #bizFlow .rf-biz-steps {
margin-top: 32px;
}
html body #priceBusinessZone #bizFlow .rf-biz-ins {
margin: 32px 0 0 !important;
padding-top: 16px !important;
border-top: 1px solid rgba(255,255,255,.14);
font-size: 14px !important;
line-height: 1.6 !important;
color: rgba(255,255,255,.72) !important;
max-width: none !important;
}
html body #priceBusinessZone #bizFlow .rf-biz-steps b {
color: #fff !important;
}
html body #priceBusinessZone #bizFlow .rf-biz-steps span.d {
color: rgba(255,255,255,.72) !important;
}
#refreMobileHome .rf-group-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
margin-top: 16px;
padding: 4px;
border-radius: 12px;
background: #e3e9f0;
}
#refreMobileHome .rf-group-tabs button {
all: unset;
box-sizing: border-box;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #3b4c60;
letter-spacing: -0.02em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#refreMobileHome .rf-group-tabs button.on {
background: #fff;
color: #17304b;
font-weight: 700;
box-shadow: 0 1px 2px rgba(23,48,75,.12);
}
#refreMobileHome .rf-group-tabs button:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
#refreMobileHome [hidden] {
display: none !important;
}
#refreMobileHome #rfMobilePrice #rfMobileBiz {
margin: 16px 0 0;
border-radius: 16px;
padding: 24px 20px;
}
html body #refreMobileHome #rfMobilePrice #rfMobileBiz h3 {
margin: 8px 0 0 !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
line-height: 1.3 !important;
color: #fff !important;
}
#rfMobileBiz .rf-biz-anim li:last-child.cur .o {
box-shadow: none;
}
html body #priceBusinessZone #bizFlow {
margin: 40px 0 0 !important;
}
#refreMobileHome .rf-biz-start {
margin-top: 16px;
background: #fff;
border: 1px solid #dce5ef;
border-radius: 16px;
padding: 20px;
}
html body #refreMobileHome #rfMobilePrice .rf-biz-start h3 {
margin: 0 !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
line-height: 1.4 !important;
color: #17304b !important;
}
#refreMobileHome .rf-biz-start>p {
margin: 4px 0 0;
font-size: 13px;
line-height: 1.6;
color: #3b4c60;
letter-spacing: -0.02em;
}
#refreMobileHome .rf-places {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 16px;
}
#refreMobileHome .rf-place {
all: unset;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 4px;
min-height: 72px;
padding: 16px;
border: 1.5px solid #dce5ef;
border-radius: 12px;
background: #fff;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
}
#refreMobileHome .rf-place::after {
content: "";
position: absolute;
right: 14px;
top: 20px;
width: 7px;
height: 7px;
border-top: 2px solid #2563eb;
border-right: 2px solid #2563eb;
transform: rotate(45deg);
}
#refreMobileHome .rf-place:active {
border-color: #17304b;
background: #f3f5f8;
}
#refreMobileHome .rf-place:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
#refreMobileHome .rf-place b {
font-size: 16px;
font-weight: 700;
color: #17304b;
letter-spacing: -0.04em;
line-height: 1.4;
}
#refreMobileHome .rf-place span {
font-size: 12px;
color: #3b4c60;
letter-spacing: -0.02em;
line-height: 1.5;
}
#refreMobileHome .rf-biz-start .rf-biz-tip {
margin-top: 12px;
font-size: 12px;
color: #3b4c60;
line-height: 1.5;
}
html body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-content .rf-house-message {
position: relative !important;
justify-self: start !important;
box-sizing: border-box !important;
max-width: calc(100% - 18px) !important;
background: #2563eb !important;
color: #fff !important;
border-radius: 999px !important;
padding: 12px 20px !important;
margin-left: 12px !important;
box-shadow: 0 6px 14px rgba(37,99,235,.25);
}
html.refre-mobile body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-content .rf-house-message {
color: #fff !important;
}
html:not(.refre-mobile) body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-content .rf-house-message {
background: #fff !important;
color: #17304b !important;
box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
html:not(.refre-mobile) body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-content .rf-house-message::before {
background: #fff !important;
}
html body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-content .rf-house-message::before {
content: "";
position: absolute;
left: -9px;
width: 14px;
height: 12px;
background: #2563eb;
clip-path: polygon(100% 0,0 45%,100% 100%);
}
html body :is(#personalBg,#businessBg) .rf-house-guide .rf-house-content .rf-house-message::before {
top: 50% !important;
transform: translateY(-50%) !important;
}
html:not(.refre-mobile) body .combined-work-guide,
html:not(.refre-mobile) body #workflow.workflow,
html:not(.refre-mobile) body #why {
background: #f3f5f8 !important;
color: #17304b !important;
}
html:not(.refre-mobile) body .work-guide-tabs {
background: #fff !important;
border-color: #dce5ef !important;
}
html:not(.refre-mobile) body .work-guide-tabs button:not([aria-selected="true"]) {
color: #3b4c60 !important;
}
html:not(.refre-mobile) body :is(#workflow,#why) .section-label {
background: #e7effd !important;
color: #2563eb !important;
}
html:not(.refre-mobile) body :is(#workflow,#why) h2,
html:not(.refre-mobile) body :is(#workflow,#why) h2 span,
html:not(.refre-mobile) body :is(#workflow,#why) h3 {
color: #17304b !important;
}
html:not(.refre-mobile) body #workflow .process-heading p,
html:not(.refre-mobile) body #why .strength-bento-copy p,
html:not(.refre-mobile) body :is(#workflow,#why) .process-detail-copy p,
html:not(.refre-mobile) body #why .strength-bento-body p {
color: #3b4c60 !important;
}
html:not(.refre-mobile) body #workflow .process-step-tab {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
html:not(.refre-mobile) body #workflow .process-step-desc {
display: block;
color: #64748b;
font-size: 12px;
line-height: 1.5;
font-weight: 400;
letter-spacing: -.01em;
}
html.refre-mobile .process-step-desc {
display: none;
}
html:not(.refre-mobile) body #workflow .process-step-tab.current {
background: #fff !important;
border: 1px solid #c9d8f5 !important;
box-shadow: 0 6px 16px rgba(23,48,75,.06) !important;
}
html:not(.refre-mobile) body #workflow .process-step-tab .process-step-copy strong {
color: #3b4c60 !important;
}
html:not(.refre-mobile) body #workflow .process-step-tab .process-step-copy small {
color: #64748b !important;
}
html:not(.refre-mobile) body #workflow .process-step-tab.current .process-step-copy strong {
color: #17304b !important;
}
html:not(.refre-mobile) body #workflow .process-step-tab.current .process-step-copy small {
color: #7ba7ff !important;
}
html:not(.refre-mobile) body #workflow .process-step-tab:not(.current) .process-step-num {
background: #fff !important;
color: #3b4c60 !important;
border-color: #dce5ef !important;
}
html:not(.refre-mobile) body #workflow .process-step-tab.current .process-step-num {
background: #2563eb !important;
color: #fff !important;
border-color: #2563eb !important;
}
html:not(.refre-mobile) body #workflow .process-step-rail i {
background: #c9d4e1 !important;
border-color: #f3f5f8 !important;
}
html:not(.refre-mobile) body #workflow .process-step-tab.current .process-step-rail i {
background: #2563eb !important;
}
html:not(.refre-mobile) body #workflow .process-step-rail::before,
html:not(.refre-mobile) body #workflow .process-step-rail::after,
html:not(.refre-mobile) body #workflow .process-timeline::before {
background: #dce5ef !important;
border-color: #dce5ef !important;
}
html:not(.refre-mobile) body #workflow .process-step-arrow {
color: #a4b3c5 !important;
}
html:not(.refre-mobile) body #workflow .process-step-tab.current .process-step-arrow {
color: #7ba7ff !important;
}
html:not(.refre-mobile) body #workflow .process-detail-stage {
background: #fff !important;
border-color: #dce5ef !important;
box-shadow: 0 8px 24px rgba(23,48,75,.06) !important;
}
html:not(.refre-mobile) body #workflow .process-detail-media,
html:not(.refre-mobile) body #workflow .process-detail-media img {
background: #e9eef4 !important;
}
html:not(.refre-mobile) body #workflow .process-detail-media img {
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
}
html:not(.refre-mobile) body #workflow .process-detail-eyebrow {
color: #7ba7ff !important;
}
html:not(.refre-mobile) body #workflow .process-detail-note {
border-color: #dce5ef !important;
color: #17304b !important;
}
html:not(.refre-mobile) body #workflow .process-detail-note * {
color: #17304b !important;
}
html:not(.refre-mobile) body #workflow .process-detail-note :is(span,em,small,b):first-child {
background: #e7effd !important;
color: #2563eb !important;
}
html:not(.refre-mobile) body #workflow .rf-pc-pplay {
background: #17304b !important;
}
html:not(.refre-mobile) body #workflow .process-bottom-cta {
background: #fff !important;
border-color: #dce5ef !important;
}
html:not(.refre-mobile) body #workflow .process-bottom-cta strong {
color: #17304b !important;
}
html:not(.refre-mobile) body #workflow .process-bottom-cta span {
color: #3b4c60 !important;
}
html:not(.refre-mobile) body #why .strength-bento-card {
background: #fff !important;
border-color: #dce5ef !important;
box-shadow: 0 6px 16px rgba(23,48,75,.05) !important;
}
html:not(.refre-mobile) body #why .strength-bento-visual,
html:not(.refre-mobile) body #why .strength-bento-no {
color: #7ba7ff !important;
}
html:not(.refre-mobile) body #why .strength-bento-actions .personal-open {
background: #fff !important;
color: #17304b !important;
border-color: #c9d4e1 !important;
}
html:not(.refre-mobile) body #rfStats {
background: #fff !important;
}
html:not(.refre-mobile) body #reviews {
background: #102640 !important;
background-image: none !important;
}
html body .final-cta {
background: #17304b !important;
}
html body footer {
background: #102640 !important;
}
html body .service-book,
html body #workflow .process-bottom-cta .btn,
html body #why .strength-bento-actions .btn,
html body .final-cta .btn,
html body #bizBuilderOpen,
html body #priceBusinessZone .btn,
html body #refreMobileHome .rf-button,
html body #refreMobileHome #rfMobileModelBook,
html body #refreMobileHome #rfMobileBiz .rf-m-btn {
border-radius: 12px !important;
}
html body :is(.service-showcase,.service-detail-shell,.service-v4-visual,.process-detail-stage,.process-bottom-cta,.rf-why-card,.review-feature,.rf-part-pair,.price-heading-offer,.rf-pc-photo,.strength-bento-card,#bizFlow,.biz-qty-row,.biz-detail-shell,.biz-qty-summary,.biz-unknown-option),
html body #serviceTabs button,
html body #workflow .process-step-tab,
html body .review-mini-card,
html body #refreMobileHome :is(.rf-path,.rf-hero-stats,.rf-hero-photo,.rf-price-panel,.rf-pcard,.rf-pnote,.rf-rv-card,.rf-biz-start,#rfMobileBiz,.rf-place,.rf-hero-proofs),
html body :is(.footer-contact a,.footer-contact button,.rf-contact-card) {
border-radius: 12px !important;
}
html body #refreMobileHome #rfMobileHero .rf-path.rf-path {
border-radius: 12px !important;
}
html.refre-mobile body .header .header-actions .header-cta.header-cta,
html body .work-guide-tabs,
html body .work-guide-tabs button,
html body .price-master-tabs button,
html body #faq [role=tab],
html body #faq .faq-tabs button,
html body #refreMobileHome .rf-group-tabs,
html body #refreMobileHome .rf-group-tabs button,
html body #refreMobileHome .header-cta {
border-radius: 999px !important;
}
html body #refreMobileHome #rfMobileHero .rf-path.rf-path strong {
font-size: 16px !important;
}
html body #refreMobileHome .refre-photo-offer :is(b,strong,.offer-value b) {
font-size: 22px !important;
}
html body svg[stroke-width]:not(.strength-bento-visual svg),
html body svg [stroke-width] {
stroke-width: 1.8 !important;
}
html:not(.refre-mobile) body>.header:not(.header-scrolled) {
background: rgba(255,255,255,.98) !important;
border-bottom-color: #e3e8ef !important;
}
html:not(.refre-mobile) body>.header:not(.header-scrolled) :is(.logo,.logo span,.navlinks a) {
color: #17304b !important;
}
html:not(.refre-mobile) body>.header:not(.header-scrolled) .header-actions .header-cta.personal-open.personal-open {
background: #fff !important;
color: #17304b !important;
border: 1px solid #c9d4e1 !important;
}
html:not(.refre-mobile) body>.header:not(.header-scrolled) .header-actions .header-cta.business-open.business-open {
background: #17304b !important;
color: #fff !important;
border: 1px solid #17304b !important;
}
html:not(.refre-mobile) body .header .header-actions .header-cta.header-cta {
border-radius: 999px !important;
}
html:not(.refre-mobile) body #heroSection.hero-unified {
margin: 96px max(24px,calc((100% - 1344px)/2)) 0 !important;
border-radius: 12px !important;
}
html:not(.refre-mobile) body #heroSection>.container {
padding-inline: 48px !important;
max-width: none !important;
}
html:not(.refre-mobile) body #heroSection .hero-actions .btn,
html:not(.refre-mobile) body #heroSection.hero .hero-actions .btn.btn {
border-radius: 12px !important;
}
.rf-sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
}
.rf-logo-svg {
display: block;
width: auto;
fill: currentColor;
}
html body>.header .logo.rf-has-logo {
display: flex !important;
align-items: center;
line-height: 1;
}
html body>.header .logo #brandTop {
display: flex;
align-items: center;
}
html body>.header .logo,
html body>.header .logo #brandTop {
color: #17304b !important;
}
html body>.header:not(.header-scrolled) .logo,
html body>.header:not(.header-scrolled) .logo #brandTop {
color: #17304b !important;
}
html body .rf-footer-logo {
display: block;
color: #fff;
margin-bottom: 8px;
}
html body #refreMobileHome .rf-footer-meta .rf-logo-svg {
color: #17304b;
margin-bottom: 8px;
}
html body #refreMobileHome .rf-mtabs {
border-bottom: 1px solid #c9d4e1 !important;
}
html body #refreMobileHome .rf-mtabs button {
font-size: 16px !important;
font-weight: 700 !important;
color: #3b4c60 !important;
padding: 12px 4px !important;
}
html body #refreMobileHome .rf-mtabs button[aria-selected="true"] {
color: #2563eb !important;
box-shadow: inset 0 -3px 0 #2563eb !important;
}
html body .model-group-tabs {
border-bottom: 1px solid #c9d4e1 !important;
}
html body .model-group-tabs button {
font-size: 16px !important;
font-weight: 700 !important;
color: #3b4c60 !important;
padding: 0 4px 12px !important;
}
html body .model-group-tabs button.on {
color: #2563eb !important;
box-shadow: inset 0 -3px 0 #2563eb !important;
}
html:not(.refre-mobile) body>.header .logo .rf-logo-svg {
height: 22px;
}
html.refre-mobile body>.header .logo .rf-logo-svg {
height: 18px;
}
html body .rf-footer-logo .rf-logo-svg {
height: 22px;
}
html body .rf-footer-logo::after {
content: "리프레 에어컨청소";
display: block;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.7);
letter-spacing: -0.01em;
}
html body #refreMobileHome .rf-footer-meta .rf-logo-svg {
height: 18px;
}
html body #refreMobileHome .rf-footer-meta strong[data-logo]::after {
content: "리프레 에어컨청소";
display: block;
margin-top: 6px;
font-size: 13px;
font-weight: 600;
color: #3b4c60;
letter-spacing: -0.01em;
}
html:not(.refre-mobile) body #workflow#workflow .process-a-layout {
align-items: stretch !important;
}
html:not(.refre-mobile) body #workflow#workflow .process-detail-stage {
align-self: stretch !important;
height: auto !important;
display: flex !important;
}
html:not(.refre-mobile) body #workflow#workflow .process-detail-panel.active {
flex: 1 1 auto !important;
height: auto !important;
}
html:not(.refre-mobile) body #workflow#workflow .process-detail-media {
height: auto !important;
min-height: 0 !important;
align-self: stretch !important;
position: relative;
}
html:not(.refre-mobile) body #workflow#workflow .process-detail-media img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
html body .rf-case-review-note.rf-case-review-note {
display: none !important;
}
html:not(.refre-mobile) body #faq#faq .faq button,
html:not(.refre-mobile) body #faq#faq .faq button[aria-expanded="true"] {
background: transparent !important;
box-shadow: none !important;
}
html:not(.refre-mobile) body #faq#faq .faq .answer {
background: transparent !important;
box-shadow: none !important;
}
html.refre-mobile body #rfMobileFAQ#rfMobileFAQ details > p {
background: transparent !important;
box-shadow: none !important;
}
html:not(.refre-mobile) body #heroSection#heroSection.hero-unified {
margin-left: max(48px,calc((100% - 1248px)/2)) !important;
margin-right: max(48px,calc((100% - 1248px)/2)) !important;
}
html body #price#price .section-head {
align-items: start !important;
}
html body #price#price .section-head #multiCleanEvent {
align-self: start !important;
}
html body #price#price .section-head .price-master-tabs {
margin: 28px 0 0 !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list {
display: grid !important;
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
grid-auto-rows: auto !important;
gap: 24px !important;
align-items: stretch !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-why-card.rf-why-ov {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
background: #f4f6f8 !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 12px !important;
padding: 28px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
overflow: hidden !important;
position: relative !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-card .rf-why-fig,
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-card .rf-why-n {
display: none !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-card .rf-why-body {
position: relative !important;
z-index: 1;
inset: auto !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
height: auto !important;
background: none !important;
display: block !important;
color: #4a5b70 !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-card .rf-why-body h3 {
margin: 0 0 8px !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
letter-spacing: -0.04em !important;
color: #17304b !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-card .rf-why-body p {
margin: 0 !important;
max-width: none !important;
font-size: 16px !important;
line-height: 1.6 !important;
letter-spacing: -0.02em !important;
color: #3b4c60 !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-key {
display: flex;
align-items: baseline;
font-weight: 800;
letter-spacing: -0.045em;
color: #2563eb;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-key small {
font-weight: 700;
letter-spacing: -0.02em;
margin-left: 4px;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-stats-inner {
width: 100% !important;
max-width: 1344px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 48px !important;
padding-right: 48px !important;
box-sizing: border-box !important;
}
@media (max-width:1100px) {
html:not(.refre-mobile) body #rfStats#rfStats .rf-stats-inner {
padding-left: 32px !important;
padding-right: 32px !important;
}
}
@media (min-width:769px) and (max-width:1100px) {
html:not(.refre-mobile) body .final-cta .container.final-box {
padding-left: 32px !important;
padding-right: 32px !important;
}
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t1 {
grid-column: 1/3;
grid-row: 1;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t3 {
grid-column: 3;
grid-row: 1/3;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t4 {
grid-column: 1;
grid-row: 2;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t5 {
grid-column: 2;
grid-row: 2;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t2 {
grid-column: 1/3;
grid-row: 3;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t6 {
grid-column: 3;
grid-row: 3;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t1.rf-why-ov {
background: #17304b !important;
padding-right: calc(46% + 28px) !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t1 .rf-why-key {
color: #fff;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t1 .rf-why-body h3 {
color: #fff !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t1 .rf-why-body h3 b {
display: none !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t1 .rf-why-body p {
color: rgba(255,255,255,.8) !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-real {
position: absolute;
top: 0;
bottom: 0;
background-size: cover;
background-position: center;
pointer-events: none;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-real1 {
right: 0;
width: 50%;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-real1::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,#17304b 0%,rgba(23,48,75,.55) 22%,rgba(23,48,75,0) 55%);
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t2.rf-why-ov {
padding-left: calc(32% + 28px) !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-real2 {
left: 0;
width: 32%;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t3 .rf-why-fig {
display: block !important;
position: relative !important;
inset: auto !important;
order: 2;
flex: 1 1 0;
min-height: 200px;
margin: 28px -28px -28px !important;
height: auto !important;
border-radius: 0 !important;
background: transparent !important;
overflow: hidden !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t3 .rf-why-fig::after {
display: none !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t3 .rf-why-fig img {
filter: none !important;
position: absolute !important;
left: 12% !important;
right: 12% !important;
top: 0 !important;
width: 76% !important;
height: auto !important;
object-fit: contain !important;
box-shadow: 0 10px 28px rgba(23,48,75,.14);
border-radius: 4px;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t3.rf-why-ov {
clip-path: inset(0 round 12px);
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t6 .rf-why-body {
display: grid !important;
grid-template-columns: 48px 1fr;
column-gap: 20px;
align-items: start;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-key {
white-space: nowrap;
}
@media (max-width:1279px) {
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t1.rf-why-ov {
padding-right: calc(40% + 28px) !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-real1 {
width: 44%;
}
}
html.refre-mobile #refreMobileHome .rf-why-list .rf-why-card.rf-why-ov {
justify-content: flex-start !important;
}
html.refre-mobile #refreMobileHome .rf-why-list .rf-why-card.rf-why-ov .rf-why-body {
margin-top: 56px !important;
}
#refreMobileHome .rf-why-key,
#refreMobileHome .rf-real,
html.refre-mobile #rfStats .rf-why-key,
html.refre-mobile #rfStats .rf-real {
display: none !important;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid {
grid-template-columns: repeat(12,minmax(0,1fr)) !important;
gap: 12px !important;
margin-top: 24px;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card {
display: block !important;
position: relative;
padding: 0 !important;
aspect-ratio: 3/4;
min-height: 0 !important;
overflow: hidden;
border-radius: 12px !important;
border: 0 !important;
background: #102640 !important;
box-shadow: none !important;
transform: none !important;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card>strong,
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card>small,
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card>i {
display: none !important;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card .rf-th {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .7;
transition: opacity .2s,transform .3s;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card:hover .rf-th {
opacity: .85;
transform: scale(1.04);
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card.is-active .rf-th {
opacity: 1;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card.is-active {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-no {
position: absolute !important;
left: 8px;
top: 8px;
z-index: 1;
width: 28px !important;
height: 28px !important;
border-radius: 8px !important;
font-size: 12px !important;
background: rgba(16,38,64,.86) !important;
color: #fff !important;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .rf-th-cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: 24px 8px 8px;
background: linear-gradient(180deg,rgba(16,38,64,0),rgba(16,38,64,.92));
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
text-align: left;
word-break: keep-all;
opacity: 0;
transition: opacity .2s;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card:hover .rf-th-cap,
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card:focus-visible .rf-th-cap {
opacity: 1;
}
@media (max-width:1100px) {
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid {
gap: 8px !important;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-no {
left: 6px;
top: 6px;
width: 24px !important;
height: 24px !important;
font-size: 11px !important;
}
}
@media (max-width:899px) {
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid {
grid-template-columns: repeat(6,minmax(0,1fr)) !important;
}
html:not(.refre-mobile) body #reviews#reviews .rf-original-grid .review-mini-card {
aspect-ratio: 1/1;
}
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-key {
height: 48px !important;
margin-bottom: 20px !important;
font-size: 32px !important;
line-height: 48px !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-key small {
font-size: 16px !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t1 .rf-why-key {
height: 48px !important;
font-size: 44px !important;
line-height: 48px !important;
margin-bottom: 20px !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t1 .rf-why-key small {
font-size: 22px !important;
}
@media (max-width:1279px) {
html:not(.refre-mobile) body #rfStats#rfStats .rf-t1 .rf-why-key {
font-size: 40px !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t1 .rf-why-key small {
font-size: 20px !important;
}
}
html body #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body h3,
html body #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body h3 .rf-why-big-n,
html.refre-mobile #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body h3 {
font-size: 16px !important;
line-height: 24px !important;
}
html.refre-mobile #refreMobileHome .rf-stats h2 {
margin-bottom: 0 !important;
}
html.refre-mobile #refreMobileHome .rf-why-sub {
margin-top: 8px !important;
}
html.refre-mobile #refreMobileHome #rfCaseHeading br,
html.refre-mobile #refreMobileHome .review-gallery-head h2 br {
display: none;
}
html.refre-mobile #refreMobileHome #rfCaseContent .rf-case-heading h2 {
margin-bottom: 0 !important;
}
html.refre-mobile #refreMobileHome #rfCaseContent .rf-case-heading > p {
margin-top: 8px !important;
font-size: 14px !important;
line-height: 22.4px !important;
}
html.refre-mobile #refreMobileHome .rf-rv-card .rf-rv-bd strong {
font-size: 16px !important;
line-height: 24px !important;
}
html body #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body h3 {
letter-spacing: -0.02em !important;
}
html.refre-mobile #refreMobileHome .rf-why-list .rf-why-card .rf-why-key,
html body #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body .rf-why-key {
display: block !important;
height: auto !important;
margin: 0 0 8px !important;
font-size: 22px !important;
line-height: 30px !important;
font-weight: 800 !important;
letter-spacing: -.02em !important;
}
html.refre-mobile #refreMobileHome .rf-why-list .rf-why-card .rf-why-key small,
html body #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body .rf-why-key small {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
margin: 0 !important;
}
html.refre-mobile #refreMobileHome .rf-why-list .rf-why-card .rf-why-n {
display: none !important;
}
html body #reviews #rfOriginalPhoto .rf-part-pair {
background: transparent !important;
padding: 0 !important;
gap: 8px !important;
box-shadow: none !important;
border: 0 !important;
}
html body #reviews #rfOriginalPhoto .rf-part-pair img {
border-radius: 12px !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-why-card .rf-why-key {
display: block !important;
height: 48px !important;
line-height: 48px !important;
margin: 0 0 20px !important;
font-weight: 800 !important;
color: #2563eb !important;
letter-spacing: -.04em !important;
white-space: nowrap;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t1 .rf-why-key {
color: #fff !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t2.rf-why-ov,
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t6.rf-why-ov {
justify-content: flex-start !important;
min-height: 0 !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t6 .rf-why-body {
display: block !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-why-card .rf-why-key {
font-size: 26px !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t1 .rf-why-key {
font-size: 32px !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t1 .rf-why-key small {
font-size: 16px !important;
}
@media (max-width:1279px) {
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t1 .rf-why-key {
font-size: 32px !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-why-list .rf-t1 .rf-why-key small {
font-size: 16px !important;
}
}
.rf-wm {
display: inline-block;
height: .70em;
width: auto;
vertical-align: 0;
margin: 0 .06em 0 0;
color: #2563eb;
overflow: visible;
}
#reviews .rf-wm,
#refreMobileHome #rfMobileReviews .rf-wm,
.final-cta .rf-wm,
#businessPageTitle .rf-wm {
color: #7ba7ff;
}
#rfOriginalPhoto figure,
#rfBAPhotoDialog figure {
position: relative;
}
.rf-ba-tag {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
padding: 4px 10px;
border-radius: 8px;
background: rgba(16,38,64,.86);
color: #fff;
font-size: 13px;
font-weight: 700;
font-style: normal;
line-height: 1.4;
}
.rf-ba-tag.after {
left: auto;
right: 10px;
background: #2563eb;
}
#refreMobileHome .rf-why-card.rf-real-on .rf-why-fig img {
filter: brightness(.82) !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-real2 {
filter: blur(0px);
transform: scale(1.04);
transform-origin: left center;
background-position: 50% 50% !important;
}
html:not(.refre-mobile) body #rfStats#rfStats .rf-t2.rf-why-ov {
overflow: hidden !important;
}
#refreMobileHome .rf-hero-description {
display: none !important;
}
#heroSection .rf-hero-sub {
margin: 16px 0 0 !important;
font-size: 24px;
font-weight: 700;
letter-spacing: -.03em;
color: #9ec1ff;
line-height: 1.4;
}
#refreMobileHome .rf-hero-sub {
margin: 12px 0 0 !important;
font-size: 18px;
font-weight: 700;
letter-spacing: -.03em;
color: #2563eb;
line-height: 1.4;
}
html.refre-mobile #refreMobileHome .rf-why-list .rf-why-card .rf-why-key,
html body #refreMobileHome .rf-why-list .rf-why-ov .rf-why-body .rf-why-key {
color: #7ba7ff !important;
}
@media (min-width:769px) and (max-width:1100px) {
html:not(.refre-mobile) body footer .container {
padding-left: 32px !important;
padding-right: 32px !important;
}
}
:root {
--font: 'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
--rf-font: var(--font);
}
html:not(.refre-mobile) body .section-label,
html:not(.refre-mobile) body #pricePersonalZone .section-label {
color: #2563eb;
}
html:not(.refre-mobile) body #reviews .section-label,
html:not(.refre-mobile) body .final-cta .section-label,
html:not(.refre-mobile) body #reviews .review-feature-kicker,
html:not(.refre-mobile) body #heroSection .rf-hero-sub,
html.refre-mobile #refreMobileHome #rfMobileReviews .rf-sec-lab,
html.refre-mobile #refreMobileHome #rfMobileReviews .section-label {
color: #7ba7ff !important;
}
html:not(.refre-mobile) body #price#price .service-clean-list li,
html:not(.refre-mobile) body #workflow#workflow .process-step-copy small,
html:not(.refre-mobile) body #workflow#workflow .process-step-tab small,
html:not(.refre-mobile) body #multiCleanEvent .offer-caption,
html:not(.refre-mobile) body #multiCleanEvent .offer-unit {
color: #4a5b70 !important;
}
html.refre-mobile #refreMobileHome .refre-photo-offer .offer-caption,
html.refre-mobile #refreMobileHome .refre-photo-offer .offer-unit,
html.refre-mobile #refreMobileHome .refre-photo-offer .offer-condition {
color: #4a5b70 !important;
}
html:not(.refre-mobile) body #price#price .service-clean-list li span {
color: #2563eb !important;
}
html:not(.refre-mobile) body #rfReviewRating,
html.refre-mobile #refreMobileHome .rf-rv-star {
color: #fbbf24 !important;
}
header .header-cta,
footer .footer-contact-buttons span,
footer .footer-contact-buttons small,
footer .footer-contact-buttons strong,
footer .footer-legal button,
#refreMobileHome .rf-mtabs button,
#refreMobileHome #rfMobileProcess button {
letter-spacing: -0.02em !important;
}
html:not(.refre-mobile) body header .navlinks a {
font-weight: 600 !important;
}
html.refre-mobile #refreMobileHome .rf-wrap.refre-photo-offer {
padding: 20px 20px 20px !important;
}
html.refre-mobile #refreMobileHome .refre-photo-offer .offer-caption {
display: block;
margin: 0 0 8px !important;
}
html.refre-mobile #refreMobileHome .refre-photo-offer .offer-copy b {
display: block;
margin: 2px 0 0 !important;
}
html.refre-mobile #refreMobileHome .refre-photo-offer .offer-condition {
margin: 12px 0 0 !important;
line-height: 1.6 !important;
}
html.refre-mobile #refreMobileHome .refre-photo-offer .offer-unit {
display: block;
margin: 2px 0 0 !important;
line-height: 1.6 !important;
}
html:not(.refre-mobile) body #price#price #multiCleanEvent {
padding: 24px 28px !important;
height: auto !important;
}
html:not(.refre-mobile) body #price#price #multiCleanEvent .offer-caption {
margin: 0 0 10px !important;
}
html:not(.refre-mobile) body #price#price #multiCleanEvent .offer-condition {
margin: 14px 0 0 !important;
line-height: 1.6 !important;
}
html:not(.refre-mobile) body #price#price #multiCleanEvent .offer-unit {
margin: 0 !important;
line-height: 1.6 !important;
}
html:not(.refre-mobile) body #price#price #multiCleanEvent .offer-business-note {
margin: 14px 0 0 !important;
padding: 0 !important;
line-height: 1.6 !important;
color: #4a5b70 !important;
position: relative;
left: 0 !important;
transform: none !important;
}
html:not(.refre-mobile) body #faq .faq-wrap>.faq-tabs,
html:not(.refre-mobile) body #faq .faq-wrap>.faq-list {
margin-left: 0 !important;
margin-right: 0 !important;
}
html:not(.refre-mobile) body #faq .faq-wrap>.faq-tabs {
justify-content: flex-start !important;
}
html body #faq summary,
html body #faq .faq-list button,
html body #rfMobileFAQ summary {
word-break: keep-all !important;
overflow-wrap: break-word !important;
}
html:not(.refre-mobile) body .footer-contact-area h2 {
font-size: 32px !important;
font-weight: 700 !important;
line-height: 44.8px !important;
letter-spacing: -1.28px !important;
margin-bottom: 16px !important;
}
html:not(.refre-mobile) body .footer-contact-area h2+p {
font-size: 16px !important;
line-height: 25.6px !important;
}
html:not(.refre-mobile) body .footer-contact-buttons {
max-width: none !important;
grid-template-columns: 1fr 1fr !important;
}
html:not(.refre-mobile) body #serviceGroupTitle {
font-size: 18px !important;
line-height: 27px !important;
letter-spacing: -0.36px !important;
margin-bottom: 8px !important;
}
html body #rfMobileProcess .rf-ptabs button[role=tab] {
height: 56px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
line-height: 1.2 !important;
}
html body #refreMobileHome #rfMobileProcess .rf-ptabs::before {
height: 56px !important;
}
html body #rfMobileProcess .rf-ptabs button[role=tab]::after {
font-size: 13px;
font-weight: 650;
letter-spacing: -0.24px;
opacity: 1;
}
html body #rfMobileProcess #rfPTab0::after {
content: "점검";
}
html body #rfMobileProcess #rfPTab1::after {
content: "보호";
}
html body #rfMobileProcess #rfPTab2::after {
content: "분리";
}
html body #rfMobileProcess #rfPTab3::after {
content: "세정";
}
html body #rfMobileProcess #rfPTab4::after {
content: "세척";
}
html body #rfMobileProcess #rfPTab5::after {
content: "조립";
}
html.refre-mobile body #refreMobileHome #rfMobileHero {
padding-top: 84px !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>.rf-eyebrow {
font-size: 12px !important;
line-height: 18px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
color: #6b7a8c !important;
margin: 0 !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>h1 {
font-size: 26px !important;
line-height: 36px !important;
font-weight: 700 !important;
letter-spacing: -0.78px !important;
color: #0f2238 !important;
-webkit-text-fill-color: #0f2238 !important;
margin: 10px 0 0 !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>.rf-hero-sub {
font-size: 15px !important;
line-height: 22px !important;
font-weight: 500 !important;
letter-spacing: -0.3px !important;
color: #2457d6 !important;
margin: 10px 0 0 !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>.rf-hero-photo {
position: relative !important;
margin: 20px 0 0 !important;
aspect-ratio: 16/10 !important;
height: auto !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: none !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>.rf-hero-photo img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 50% 50% !important;
border-radius: 0 !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-photo-chip {
position: absolute;
left: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 32px;
padding: 0 12px;
border-radius: 999px;
background: rgba(15,34,56,.58);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: -0.24px;
text-decoration: none;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>.rf-hero-paths {
margin-top: 16px !important;
gap: 10px !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-paths .rf-path {
min-height: 72px !important;
padding: 14px 18px !important;
border-radius: 16px !important;
border: 1px solid #dce3ec !important;
background: #fff !important;
box-shadow: none !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-paths .rf-path small {
font-size: 12px !important;
line-height: 18px !important;
color: #6b7a8c !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-paths .rf-path strong {
font-size: 17px !important;
line-height: 24px !important;
letter-spacing: -0.34px !important;
color: #0f2238 !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-paths .rf-path svg {
color: #17304b !important;
width: 20px !important;
height: 20px !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-paths .rf-path.rf-path-biz {
background: #17304b !important;
border-color: #17304b !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-paths .rf-path.rf-path-biz small {
color: rgba(255,255,255,.68) !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-paths .rf-path.rf-path-biz strong,
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-paths .rf-path.rf-path-biz svg {
color: #fff !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>.rf-hero-stats {
margin-top: 16px !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-top: 1px solid #edf0f4 !important;
border-bottom: 1px solid #edf0f4 !important;
border-radius: 0 !important;
padding: 14px 0 !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-stats span {
font-size: 12px !important;
color: #6b7a8c !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-stats strong {
font-size: 20px !important;
line-height: 28px !important;
color: #17304b !important;
}
html.refre-mobile body #refreMobileHome>.rf-discount>.rf-wrap.refre-photo-offer {
width: calc(100% - 40px) !important;
margin: 0 auto !important;
border-radius: 16px !important;
overflow: hidden !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-stats strong b,
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero .rf-hero-stats strong svg {
color: #17304b !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #heroSection h1 span,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #heroSection h1 em {
font-size: clamp(26px,3vw,40px) !important;
line-height: 1.32 !important;
font-weight: 700 !important;
letter-spacing: -1.2px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #heroSection .rf-hero-sub {
font-size: 20px !important;
line-height: 28px !important;
font-weight: 600 !important;
letter-spacing: -0.4px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price h2,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow h2,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why h2,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats h2,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews h2,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq h2,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide h2,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta h2,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer h2 {
font-size: 28px !important;
line-height: 38px !important;
font-weight: 600 !important;
letter-spacing: -0.84px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price h3,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price h4,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow h3,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow h4,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why h3,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why h4,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats h3,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats h4,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews h3,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews h4,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq h3,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq h4,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide h3,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide h4,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta h3,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta h4,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer h3,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer h4 {
font-size: 20px !important;
line-height: 28px !important;
font-weight: 600 !important;
letter-spacing: -0.4px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price .rf-why-key,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price .offer-value b,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow .rf-why-key,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow .offer-value b,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why .rf-why-key,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why .offer-value b,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats .rf-why-key,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats .offer-value b,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews .rf-why-key,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews .offer-value b,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq .rf-why-key,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq .offer-value b,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .rf-why-key,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .offer-value b,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta .rf-why-key,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta .offer-value b,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .rf-why-key,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .offer-value b {
font-size: 28px !important;
line-height: 36px !important;
font-weight: 700 !important;
letter-spacing: -0.84px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price .rf-why-key small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow .rf-why-key small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why .rf-why-key small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats .rf-why-key small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews .rf-why-key small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq .rf-why-key small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .rf-why-key small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta .rf-why-key small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .rf-why-key small {
font-size: 16px !important;
font-weight: 700 !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price .section-label,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price .process-detail-eyebrow,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price .review-feature-kicker,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price .rf-why-lab,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price .process-detail-index,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price .process-step-copy small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow .section-label,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow .process-detail-eyebrow,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow .review-feature-kicker,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow .rf-why-lab,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow .process-detail-index,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow .process-step-copy small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why .section-label,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why .process-detail-eyebrow,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why .review-feature-kicker,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why .rf-why-lab,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why .process-detail-index,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why .process-step-copy small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats .section-label,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats .process-detail-eyebrow,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats .review-feature-kicker,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats .rf-why-lab,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats .process-detail-index,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats .process-step-copy small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews .section-label,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews .process-detail-eyebrow,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews .review-feature-kicker,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews .rf-why-lab,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews .process-detail-index,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews .process-step-copy small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq .section-label,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq .process-detail-eyebrow,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq .review-feature-kicker,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq .rf-why-lab,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq .process-detail-index,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq .process-step-copy small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .section-label,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .process-detail-eyebrow,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .review-feature-kicker,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .rf-why-lab,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .process-detail-index,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .process-step-copy small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta .section-label,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta .process-detail-eyebrow,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta .review-feature-kicker,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta .rf-why-lab,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta .process-detail-index,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta .process-step-copy small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .section-label,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .process-detail-eyebrow,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .review-feature-kicker,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .rf-why-lab,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .process-detail-index,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .process-step-copy small {
font-size: 12px !important;
line-height: 18px !important;
font-weight: 600 !important;
letter-spacing: .06em !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price .review-mini-no,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workflow .review-mini-no,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #why .review-mini-no,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #rfStats .review-mini-no,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #reviews .review-mini-no,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #faq .review-mini-no,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .review-mini-no,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main .final-cta .review-mini-no,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .review-mini-no {
font-weight: 700 !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .footer-contact-buttons strong {
font-size: 20px !important;
line-height: 28px !important;
font-weight: 600 !important;
letter-spacing: -0.4px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileHero h1 span,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileHero h1 em {
font-size: 26px !important;
line-height: 36px !important;
font-weight: 700 !important;
letter-spacing: -0.78px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileHero .rf-hero-stats strong b {
font-size: 20px !important;
line-height: 28px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobilePrice h2,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileProcess h2,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileTrust h2,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileStats h2,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileReviews h2,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileFAQ h2,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileModelDetail h2,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-footer h2,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-discount h2 {
font-size: 20px !important;
line-height: 28px !important;
font-weight: 600 !important;
letter-spacing: -0.6px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobilePrice h3,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileProcess h3,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileTrust h3,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileStats h3,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileReviews h3,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileFAQ h3,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileModelDetail h3,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-footer h3,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-discount h3 {
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: -0.32px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobilePrice .rf-why-key,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobilePrice .offer-value b,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileProcess .rf-why-key,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileProcess .offer-value b,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileTrust .rf-why-key,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileTrust .offer-value b,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileStats .rf-why-key,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileStats .offer-value b,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileReviews .rf-why-key,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileReviews .offer-value b,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileFAQ .rf-why-key,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileFAQ .offer-value b,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileModelDetail .rf-why-key,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileModelDetail .offer-value b,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-footer .rf-why-key,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-footer .offer-value b,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-discount .rf-why-key,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-discount .offer-value b {
font-size: 20px !important;
line-height: 28px !important;
font-weight: 700 !important;
letter-spacing: -0.6px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobilePrice .rf-why-key small,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileProcess .rf-why-key small,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileTrust .rf-why-key small,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileStats .rf-why-key small,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileReviews .rf-why-key small,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileFAQ .rf-why-key small,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileModelDetail .rf-why-key small,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-footer .rf-why-key small,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-discount .rf-why-key small {
font-size: 14px !important;
line-height: 20px !important;
font-weight: 700 !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobilePrice .rf-sec-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobilePrice .rf-pcard-eyebrow,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobilePrice .rf-why-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobilePrice .section-label,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileProcess .rf-sec-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileProcess .rf-pcard-eyebrow,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileProcess .rf-why-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileProcess .section-label,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileTrust .rf-sec-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileTrust .rf-pcard-eyebrow,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileTrust .rf-why-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileTrust .section-label,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileStats .rf-sec-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileStats .rf-pcard-eyebrow,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileStats .rf-why-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileStats .section-label,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileReviews .rf-sec-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileReviews .rf-pcard-eyebrow,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileReviews .rf-why-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileReviews .section-label,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileFAQ .rf-sec-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileFAQ .rf-pcard-eyebrow,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileFAQ .rf-why-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileFAQ .section-label,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileModelDetail .rf-sec-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileModelDetail .rf-pcard-eyebrow,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileModelDetail .rf-why-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileModelDetail .section-label,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-footer .rf-sec-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-footer .rf-pcard-eyebrow,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-footer .rf-why-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-footer .section-label,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-discount .rf-sec-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-discount .rf-pcard-eyebrow,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-discount .rf-why-lab,
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome .rf-discount .section-label {
font-size: 12px !important;
line-height: 18px !important;
font-weight: 600 !important;
letter-spacing: .06em !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileHero .rf-hero-paths .rf-path strong {
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: -0.32px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome #rfMobileHero .rf-wrap>.rf-hero-sub {
font-size: 16px !important;
line-height: 24px !important;
letter-spacing: -0.32px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main>:is(#price,#reviews,#faq,.final-cta),
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main>#rfStats#rfStats {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main>#workGuide {
padding-top: 64px !important;
padding-bottom: 80px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main :is(.section-label,.rf-why-lab) {
margin-bottom: 8px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main :is(#price,#workGuide,#rfStats,#reviews,#faq,.final-cta) h2 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main :is(#workGuide,#rfStats,#reviews,#faq,.final-cta) h2+p {
margin-top: 12px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #price h2+.price-master-tabs {
margin-top: 24px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer h2+p {
margin-top: 12px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .refre-shared-company {
padding-left: max(20px,calc((100% - 1184px)/2)) !important;
padding-right: max(20px,calc((100% - 1184px)/2)) !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer {
padding-bottom: 48px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome>:is(#rfMobilePrice,#rfMobileProcess,#rfMobileTrust,#rfMobileStats,#rfMobileReviews,#rfMobileFAQ) {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome :is(.rf-sec-lab,.rf-why-lab,.section-label) {
margin-bottom: 6px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome :is(#rfMobilePrice,#rfMobileProcess,#rfMobileTrust,#rfMobileStats,#rfMobileReviews,#rfMobileFAQ) h2 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome :is(#rfMobilePrice,#rfMobileProcess,#rfMobileStats,#rfMobileReviews) h2+p {
margin-top: 8px !important;
}
html.refre-mobile:not(#z1):not(#z2):not(#z3) body #refreMobileHome :is(#rfMobileTrust h2+ul,#rfMobileFAQ h2+.rf-faq-tabs) {
margin-top: 20px !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero {
padding-top: 61px !important;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row {
display: flex;
gap: 22px;
height: 48px;
padding: 0 20px;
margin: 0 0 20px;
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid #eef0f3;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row::-webkit-scrollbar {
display: none;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a {
flex: none;
display: flex;
align-items: center;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.3px;
color: #4a5260;
text-decoration: none;
white-space: nowrap;
}
html.refre-mobile body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a:first-child {
color: #17304b;
font-weight: 600;
box-shadow: inset 0 -2px 0 #17304b;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body main #workGuide .section-label {
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) body footer .footer-legal button:first-child {
padding-left: 0 !important;
margin-left: 0 !important;
}
html.refre-mobile.mv7 body>header.header {
height: auto !important;
}
html.refre-mobile.mv7 body>header.header .rf7-strip {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
height: 36px;
background: #eef3fd;
color: #2457d6;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.28px;
text-decoration: none;
}
html.refre-mobile.mv7 body>header.header .rf7-strip svg {
width: 16px;
height: 16px;
}
html.refre-mobile.mv7:not(#z1):not(#z2) body>header.header .header-actions {
display: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2) body>header.header {
box-shadow: none !important;
border-bottom: 0 !important;
}
html.refre-mobile.mv7 body>header.header .rf7-icons {
display: flex;
margin-left: auto;
}
html.refre-mobile.mv7 body>header.header .rf7-icons a {
place-items: center;
}
html.refre-mobile.mv7:not(.rf7-scrolled):not(#z1):not(#z2) #refreContactFloating {
display: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4) body #refreMobileHome #rfMobileHero#rfMobileHero {
padding-top: 97px !important;
padding-bottom: 8px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row {
height: 54px !important;
margin-bottom: 16px !important;
gap: 24px !important;
align-items: flex-end !important;
border-bottom: 1px solid #eef0f3 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a {
position: relative;
height: 40px !important;
min-height: 0 !important;
font-size: 15px !important;
color: #5b6370 !important;
font-weight: 500 !important;
box-shadow: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a i {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-style: normal;
font-size: 11px;
font-weight: 600;
color: #2457d6;
white-space: nowrap;
line-height: 1;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4) body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>:is(.rf-eyebrow,h1,.rf-hero-sub,.rf-hero-photo,.rf-hero-description,.rf-hero-stats) {
display: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4) body #refreMobileHome>.rf-discount {
display: none !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban {
position: relative;
display: block;
aspect-ratio: 1/1;
border-radius: 20px;
overflow: hidden;
text-decoration: none;
background: linear-gradient(180deg,#eef2fe 0%,#d9e3fc 34%,#bccffa 60%,#a9b9f3 100%);
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban img {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 62%;
object-fit: cover;
object-position: 50% 40%;
-webkit-mask-image: linear-gradient(180deg,transparent 0,#000 30%);
mask-image: linear-gradient(180deg,transparent 0,#000 30%);
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .t {
position: relative;
z-index: 1;
text-align: center;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban b {
display: block;
letter-spacing: -0.72px;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban b+b {
color: #2f55b8;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban span {
display: block;
}
html.refre-mobile.mv7 .rf7-h {
display: flex;
align-items: center;
gap: 2px;
margin: 40px 0 16px;
font-size: 20px;
line-height: 28px;
color: #17304b;
text-decoration: none;
}
html.refre-mobile.mv7 .rf7-h svg {
width: 22px;
height: 22px;
}
html.refre-mobile.mv7 .rf7-rv {
padding: 0 20px 8px;
}
html.refre-mobile.mv7 .rf7-track {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin: 0 -20px;
padding: 0 20px 4px;
scroll-padding-inline: 20px;
}
html.refre-mobile.mv7 .rf7-track::-webkit-scrollbar {
display: none;
}
html.refre-mobile.mv7 .rf7-card {
flex: 0 0 calc(100% - 40px);
scroll-snap-align: start;
border: 1px solid #e5e8ec;
border-radius: 16px;
padding: 18px;
box-sizing: border-box;
text-decoration: none;
color: inherit;
background: #fff;
}
html.refre-mobile.mv7 .rf7-card .top {
display: flex;
align-items: center;
gap: 8px;
}
html.refre-mobile.mv7 .rf7-card .tag {
height: 24px;
padding: 0 8px;
border-radius: 6px;
background: #eef3fd;
color: #2457d6;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
}
html.refre-mobile.mv7 .rf7-card .st {
font-size: 13px;
color: #f5a524;
letter-spacing: 1px;
}
html.refre-mobile.mv7 .rf7-card .row {
display: flex;
gap: 14px;
margin-top: 12px;
}
html.refre-mobile.mv7 .rf7-card .tx {
flex: 1;
min-width: 0;
}
html.refre-mobile.mv7 .rf7-card strong {
display: block;
font-size: 16px;
line-height: 24px;
font-weight: 600;
color: #17304b;
letter-spacing: -0.32px;
}
html.refre-mobile.mv7 .rf7-card p {
margin: 4px 0 0;
font-size: 14px;
line-height: 21px;
color: #4a5565;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
html.refre-mobile.mv7 .rf7-card .th {
flex: 0 0 96px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
height: 96px;
border-radius: 12px;
overflow: hidden;
align-self: flex-start;
}
html.refre-mobile.mv7 .rf7-card .th img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
html.refre-mobile.mv7 .rf7-card small {
display: block;
margin-top: 12px;
font-size: 13px;
color: #8a94a3;
}
html.refre-mobile.mv7 .rf7-card small b {
color: #03c75a;
font-weight: 600;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-car {
position: relative;
overflow: hidden;
border-radius: 20px;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-slides {
display: flex;
transition: transform .5s ease;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-car {
touch-action: pan-y;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-slides>.rf7-ban {
flex: 0 0 100%;
border-radius: 0;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .fr {
position: absolute;
left: 20px;
right: 20px;
bottom: 20px;
display: grid;
gap: 8px;
grid-template-columns: 1fr;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .fr.two {
grid-template-columns: 1fr 1fr;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .fr figure {
position: relative;
margin: 0;
border-radius: 14px;
overflow: hidden;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .fr img {
position: static;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: none;
mask-image: none;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .fr figcaption {
position: absolute;
left: 8px;
top: 8px;
height: 24px;
padding: 0 9px;
border-radius: 999px;
background: rgba(15,34,56,.7);
color: #fff;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .fr figure+figure figcaption {
background: #2457d6;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-cnt {
position: absolute;
z-index: 3;
border-radius: 999px;
font-weight: 600;
align-items: center;
gap: 2px;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-cnt i {
font-style: normal;
opacity: .7;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .rf7-cnt {
left: auto;
right: 16px;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-trust {
display: flex;
justify-content: space-between;
margin-top: 14px;
padding: 12px 4px;
border-top: 1px solid #eef0f3;
border-bottom: 1px solid #eef0f3;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-trust span {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
font-size: 12px;
color: #6b7a8c;
gap: 2px;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-trust span+span {
border-left: 1px solid #eef0f3;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-trust b {
font-size: 16px;
font-weight: 700;
color: #17304b;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4) body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>.rf-hero-paths {
margin-top: 16px !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.full {
background: #cfc8f7;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.full img {
top: 0;
height: 100%;
object-position: 50% 100%;
-webkit-mask-image: none;
mask-image: none;
}
html:not(.refre-mobile) .rf7-strip,
html:not(.refre-mobile) .rf7-icons {
display: none !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .t {
padding-top: 28px;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .tag {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 10px;
margin-bottom: 12px;
border-radius: 999px;
background: rgba(255,255,255,.72);
color: #2457d6;
font-style: normal;
letter-spacing: -0.24px;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban b {
font-size: 22px;
line-height: 31px;
font-weight: 600;
color: #17304b;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban b.k {
font-size: 24px;
line-height: 33px;
font-weight: 800;
color: #2457d6;
letter-spacing: -0.8px;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban span {
margin-top: 8px;
color: #4f5d73;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban span.steps {
font-size: 13px;
font-weight: 600;
color: #17304b;
letter-spacing: -0.1px;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .fr {
height: 46%;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>.rf-hero-paths.rf7-mini {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin-top: 12px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path {
min-height: 0 !important;
height: 64px !important;
padding: 0 12px !important;
border-radius: 14px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
justify-content: flex-start !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path>svg:not(.ic) {
display: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path .ic {
flex: 0 0 32px;
width: 32px !important;
height: 32px !important;
padding: 6px;
box-sizing: border-box;
border-radius: 10px;
background: #eef3fd;
color: #2457d6 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz .ic {
background: rgba(255,255,255,.12);
color: #fff !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path span {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 1px !important;
min-width: 0;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path small {
font-size: 12px !important;
line-height: 16px !important;
white-space: nowrap;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path strong {
font-size: 15px !important;
line-height: 21px !important;
white-space: nowrap;
letter-spacing: -0.4px !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p {
background: linear-gradient(180deg,#cbc6fc 0%,#c8cafd 25%,#b2c9fd 50%,#b5ccfe 100%) !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .tag {
background: rgba(255,255,255,.72) !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
gap: 2px !important;
-webkit-mask-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 18%,#000 38%);
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr figure {
border-radius: 0 !important;
box-shadow: none !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr img {
object-position: 50% 45%;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr figcaption {
top: auto !important;
bottom: 14px !important;
left: auto !important;
right: 12px !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr {
height: 66% !important;
-webkit-mask-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.25) 14%,rgba(0,0,0,.7) 32%,#000 50%) !important;
mask-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.25) 14%,rgba(0,0,0,.7) 32%,#000 50%) !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr img {
filter: saturate(.82) brightness(1.05) contrast(.96);
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr figure::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg,#c8cafd 0%,#b2c9fd 60%,#b5ccfe 100%);
mix-blend-mode: color;
opacity: .28;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr figure::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 22%;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg,rgba(181,204,254,0),rgba(181,204,254,.35));
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr figcaption {
z-index: 2;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr.two {
height: 60% !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr.two img {
filter: none !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr.two figure::after {
display: none !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban.p .fr:not(.two) img {
object-position: 40% 30% !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 {
position: absolute;
display: grid;
align-items: end;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 figure {
position: relative;
margin: 0;
display: flex;
justify-content: center;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 img {
position: static;
object-fit: contain;
-webkit-mask-image: none;
mask-image: none;
filter: drop-shadow(0 10px 14px rgba(23,48,75,.22));
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 figcaption {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 24px;
padding: 0 9px;
border-radius: 999px;
background: rgba(15,34,56,.72);
color: #fff;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
white-space: nowrap;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 figure+figure figcaption {
background: #2457d6;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban:has(.cut2) .rf7-cnt {
display: none;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-cnt {
display: flex !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 {
left: 20px !important;
right: 20px !important;
height: auto !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 figure {
align-items: center !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 figcaption {
top: auto !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 {
top: 46% !important;
bottom: 46px !important;
grid-template-rows: 100% !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 figure {
min-height: 0 !important;
height: 100% !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 img {
height: 100% !important;
width: auto !important;
max-width: 100% !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 figcaption {
bottom: -32px !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut1 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-start;
overflow: hidden;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut1 img {
position: static;
width: auto;
max-width: none;
-webkit-mask-image: none;
mask-image: none;
filter: drop-shadow(0 10px 16px rgba(23,48,75,.2));
}
html.refre-mobile.mv7 #rfMobileHero .rf7-cnt {
top: auto !important;
bottom: 12px !important;
right: auto !important;
left: 50% !important;
transform: translateX(-50%);
height: 26px;
padding: 0 11px;
background: rgba(17,41,69,.78);
font-size: 12px;
color: #fff;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 {
grid-template-columns: 1fr 1px 1fr !important;
gap: 14px !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 .dv {
position: relative;
display: block;
width: 1px;
height: 100%;
background: linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95) 20%,rgba(255,255,255,.95) 80%,rgba(255,255,255,0));
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut2 .dv::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 28px;
height: 28px;
transform: translate(-50%,-50%);
border-radius: 50%;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232457d6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
box-shadow: 0 4px 10px rgba(23,48,75,.15);
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut1 {
top: 43% !important;
justify-content: center !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .cut1 img {
height: 190% !important;
transform: translateX(4%);
}
html.refre-mobile.mv7 .rf7-rv .rf7-h {
justify-content: space-between;
}
html.refre-mobile.mv7 .rf7-rv .rf7-h .more {
display: flex;
align-items: center;
gap: 2px;
font-size: 14px;
font-weight: 500;
color: #6b7a8c;
letter-spacing: -0.2px;
}
html.refre-mobile.mv7 .rf7-rv .rf7-h .more svg {
width: 16px;
height: 16px;
}
.rf7-sheet {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(15,25,40,.45);
display: none;
}
.rf7-sheet.open {
display: block;
}
.rf7-sheet .bd {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 56px;
background: #fff;
border-radius: 20px 20px 0 0;
display: flex;
flex-direction: column;
font-family: Pretendard,'Malgun Gothic',sans-serif;
}
.rf7-sheet .hd {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding: 0 12px 0 20px;
border-bottom: 1px solid #eef0f3;
flex: none;
}
.rf7-sheet .hd b {
font-size: 18px;
font-weight: 700;
color: #17304b;
letter-spacing: -0.4px;
}
.rf7-sheet .hd button {
width: 44px;
height: 44px;
border: 0;
background: none;
font-size: 26px;
line-height: 1;
color: #17304b;
cursor: pointer;
}
.rf7-sheet .ls {
overflow-y: auto;
padding: 16px 20px 32px;
display: grid;
gap: 12px;
-webkit-overflow-scrolling: touch;
}
.rf7-sheet .it {
border: 1px solid #e5e8ec;
border-radius: 16px;
padding: 16px;
}
.rf7-sheet .it .ph {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 12px;
}
.rf7-sheet .it .ph span {
position: relative;
display: block;
aspect-ratio: 3/4;
border-radius: 12px;
overflow: hidden;
background: #eef1f5;
}
.rf7-sheet .it .ph img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rf7-sheet .it .ph em {
position: absolute;
left: 8px;
top: 8px;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: rgba(15,34,56,.72);
color: #fff;
font-style: normal;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
}
.rf7-sheet .it .ph span+span em {
background: #2457d6;
}
.rf7-sheet .it .st {
font-size: 13px;
color: #f5a524;
letter-spacing: 1px;
}
.rf7-sheet .it strong {
display: block;
margin-top: 4px;
font-size: 16px;
line-height: 24px;
font-weight: 600;
color: #17304b;
}
.rf7-sheet .it p {
margin: 4px 0 0;
font-size: 14px;
line-height: 22px;
color: #4a5565;
}
.rf7-sheet .it small {
display: block;
margin-top: 10px;
font-size: 13px;
color: #8a94a3;
}
.rf7-sheet .it small b {
color: #03c75a;
font-weight: 600;
}
html.rf7-lock,
html.rf7-lock body {
overflow: hidden !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row {
gap: 24px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a:first-child {
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: -0.36px !important;
line-height: 22px !important;
color: #999 !important;
box-shadow: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a i {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: -0.2px !important;
color: #2457d6 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>.rf-hero-paths.rf7-mini {
gap: 0 !important;
border: 1px solid #e5e8ec !important;
border-radius: 16px !important;
background: #fff !important;
overflow: hidden !important;
margin-top: 12px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz {
height: 68px !important;
border: 0 !important;
border-radius: 0 !important;
background: #fff !important;
box-shadow: none !important;
padding: 0 14px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz {
border-left: 1px solid #eef0f3 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path small,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz small {
color: #8a94a3 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path strong,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz strong {
color: #17304b !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path .ic {
background: #eef3fd !important;
color: #2457d6 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz .ic {
background: #17304b !important;
color: #fff !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a {
position: relative !important;
overflow: visible !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row {
overflow-y: visible !important;
padding-top: 10px !important;
height: 56px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a i {
position: absolute !important;
top: -6px !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: block !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a {
color: #4a5260 !important;
font-weight: 600 !important;
font-size: 15px !important;
letter-spacing: -0.4px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a:first-child {
color: #17304b !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path small,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz small {
font-size: 13px !important;
line-height: 18px !important;
font-weight: 500 !important;
letter-spacing: -0.26px !important;
color: #6b7a8c !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path strong,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz strong {
font-size: 16px !important;
line-height: 22px !important;
font-weight: 600 !important;
letter-spacing: -0.4px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-trust span {
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: -0.26px !important;
color: #6b7a8c !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-trust b {
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: -0.4px !important;
}
html.refre-mobile.mv7 .rf7-h {
font-weight: 600 !important;
letter-spacing: -0.6px !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban .tag {
font-size: 13px !important;
font-weight: 600 !important;
}
html.refre-mobile.mv7 #rfMobileHero .rf7-ban span {
font-size: 14px !important;
font-weight: 500 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz {
padding: 0 12px !important;
gap: 8px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path .ic {
flex-basis: 30px !important;
width: 30px !important;
height: 30px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileHero#rfMobileHero .rf-wrap>.rf-hero-paths.rf7-mini {
grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz {
height: auto !important;
min-height: 0 !important;
padding: 14px 14px 14px 16px !important;
display: grid !important;
grid-template-columns: 30px 1fr 18px !important;
grid-template-rows: auto auto !important;
column-gap: 0 !important;
row-gap: 10px !important;
align-items: center !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path .ic {
grid-column: 1;
grid-row: 1;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path::after {
content: "";
grid-column: 3;
grid-row: 1;
width: 18px;
height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path>span {
grid-column: 1/-1;
grid-row: 2;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path:active {
background: #f6f8fb !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileTrust#rfMobileTrust h2 {
font-size: 20px !important;
line-height: 28px !important;
font-weight: 600 !important;
letter-spacing: -0.6px !important;
color: #17304b !important;
margin: 0 0 16px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileTrust#rfMobileTrust h2 .rf7-wmtext {
font-weight: 600;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list {
margin: 0 !important;
padding: 8px 16px !important;
list-style: none !important;
background: #f6f7f9 !important;
border-radius: 16px !important;
border: 0 !important;
counter-reset: rft;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list li {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 16px 0 !important;
border: 0 !important;
border-top: 1px solid #eceff3 !important;
background: none !important;
box-shadow: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list li:first-child {
border-top: 0 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-icon {
flex: 0 0 36px !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: #fff !important;
display: grid !important;
place-items: center !important;
color: #2457d6 !important;
border: 0 !important;
box-shadow: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-icon svg {
width: 18px !important;
height: 18px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list h3 {
font-size: 16px !important;
line-height: 22px !important;
font-weight: 600 !important;
letter-spacing: -0.4px !important;
color: #17304b !important;
margin: 7px 0 0 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list p {
font-size: 14px !important;
line-height: 21px !important;
color: #5b6574 !important;
margin: 4px 0 0 !important;
letter-spacing: -0.2px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz {
grid-template-columns: 1fr 18px !important;
grid-template-rows: auto !important;
row-gap: 0 !important;
column-gap: 6px !important;
padding: 14px 12px 14px 16px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path .ic {
display: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path>span {
grid-column: 1 !important;
grid-row: 1 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path::after {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: end !important;
margin-bottom: 2px;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path small {
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path small::before {
content: "";
flex: none;
width: 16px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 10.6 12 4l8.5 6.6V19a1.5 1.5 0 0 1-1.5 1.5h-3.8v-5.3a.7.7 0 0 0-.7-.7h-5a.7.7 0 0 0-.7.7v5.3H5A1.5 1.5 0 0 1 3.5 19z' fill='%232457d6'/%3E%3C/svg%3E") center/16px no-repeat;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-mini .rf-path.rf-path-biz small::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5h9.5A1.5 1.5 0 0 1 16 5v3h3a1.5 1.5 0 0 1 1.5 1.5v11H3.5V5A1.5 1.5 0 0 1 5 3.5z' fill='%2317304b'/%3E%3Cpath d='M7 7h2v2H7zm3.5 0h2v2h-2zM7 11h2v2H7zm3.5 0h2v2h-2zM17.5 11h1v2h-1zm0 3.5h1v2h-1zM8.5 16.5h3v4h-3z' fill='%23fff'/%3E%3C/svg%3E");
}
html.refre-mobile.mv7 body>header.header .rf7-icons {
gap: 4px !important;
margin-right: -6px !important;
}
html.refre-mobile.mv7 body>header.header .rf7-icons a {
width: auto !important;
min-width: 52px;
height: 48px !important;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #1a1d23 !important;
text-decoration: none;
}
html.refre-mobile.mv7 body>header.header .rf7-icons svg {
width: 22px !important;
height: 22px !important;
}
html.refre-mobile.mv7 body>header.header .rf7-icons small {
font-size: 11px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.3px;
color: #4a5260;
}
html.refre-mobile.mv7 body>header.header .rf7-icons a.bz svg {
color: #17304b;
}
html.refre-mobile.mv7:not(.rf7-scrolled):not(#z1):not(#z2):not(#z3) #refreContactFloating {
display: flex !important;
}
html.refre-mobile.mv7:not(#z1) body>header.header .rf7-icons {
gap: 14px !important;
margin-right: 0 !important;
}
html.refre-mobile.mv7:not(#z1) body>header.header .rf7-icons a {
min-width: 0 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list {
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
counter-reset: rft;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list li {
counter-increment: rft;
border: 0 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-icon {
background: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list li {
display: grid !important;
grid-template-columns: 28px 1fr !important;
column-gap: 10px !important;
padding: 16px 0 !important;
border-top: 1px solid #eef0f3 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list li:first-child {
border-top: 0 !important;
padding-top: 4px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list li::before {
content: counter(rft,decimal-leading-zero);
font-size: 16px;
font-weight: 700;
color: #2457d6;
line-height: 22px;
letter-spacing: -0.3px;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-icon {
display: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list h3 {
margin: 0 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2) body>header.header .rf7-icons {
gap: 6px !important;
margin-right: 0 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2) body>header.header .rf7-icons a {
flex-direction: row !important;
height: 32px !important;
min-width: 0 !important;
padding: 0 11px 0 9px !important;
gap: 4px !important;
border-radius: 999px !important;
border: 1px solid #dfe5ee !important;
background: #fff !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2) body>header.header .rf7-icons a.bz {
background: #17304b !important;
border-color: #17304b !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2) body>header.header .rf7-icons svg {
width: 15px !important;
height: 15px !important;
color: #2457d6 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2) body>header.header .rf7-icons small {
font-size: 13px !important;
font-weight: 600 !important;
color: #17304b !important;
letter-spacing: -0.3px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2) body>header.header .rf7-icons a.bz svg,
html.refre-mobile.mv7:not(#z1):not(#z2) body>header.header .rf7-icons a.bz small {
color: #fff !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list {
background: #f6f7f9 !important;
border-radius: 16px !important;
padding: 6px 18px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list li {
border-top-color: #e9ecf0 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-trust-list li:first-child {
padding-top: 16px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileTrust#rfMobileTrust .rf-sec-lab {
display: block !important;
margin: 0 0 6px !important;
}
@media(prefers-reduced-motion:reduce) {
html.refre-mobile.mv7 #rfMobileHero .rf7-slides {
transition: none;
}
}
@media(min-width:769px) {
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-copy .rf83-work-note {
position: static !important;
display: block;
margin: 14px 0 0 !important;
padding: 0 !important;
background: none !important;
color: #acc9ff !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
letter-spacing: -0.02em;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-process .rf83-work-photo {
width: 58% !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-pair {
bottom: 16% !important;
top: 8% !important;
}
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) #rfMobileHero .rf7-ban .cut2 {
top: 176px !important;
bottom: 16px !important;
height: auto !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) #rfMobileHero .rf7-ban .cut2 figure {
height: 100% !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) #rfMobileHero .rf7-ban .cut2 img {
height: calc(100% - 30px) !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) #rfMobileHero .rf7-ban .cut2 figcaption {
top: auto !important;
bottom: 0 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) #rfMobileHero .rf7-ban .cut1 {
top: 178px !important;
bottom: 0 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) #rfMobileHero .rf7-ban .cut1 img {
height: 200% !important;
transform: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6) #rfMobileHero .rf7-cnt {
left: auto !important;
right: 12px !important;
top: 12px !important;
bottom: auto !important;
transform: none !important;
}
@media(min-width:769px) {
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-intro {
background: #102642 !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-intro .rf87-tech {
left: auto !important;
right: 0 !important;
width: 56% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 55% 30% !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-intro .rf83-shade {
background: linear-gradient(90deg,#102642 0%,#102642 40%,rgba(16,38,66,.8) 48%,rgba(16,38,66,.15) 70%,rgba(16,38,66,0)) !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-process .rf87-coil {
width: 62% !important;
object-position: 60% 50% !important;
}
}
@media(min-width:769px) {
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-intro .rf83-copy {
width: 42% !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-intro .rf-hero-proof {
display: flex !important;
flex-wrap: wrap !important;
max-width: 100% !important;
gap: 8px 16px !important;
}
}
@media(min-width:769px) {
.wx {
font-family: inherit;
color: #17304b;
}
.wx * {
box-sizing: border-box;
}
.wx .lab {
margin: 0 0 10px;
font-size: 13px;
font-weight: 600;
letter-spacing: .06em;
color: #2457d6;
}
.wx h2 {
margin: 0;
font-size: 28px;
line-height: 38px;
font-weight: 600;
letter-spacing: -0.84px;
color: #17304b;
}
.wx h2 .wm {
font-weight: 900;
color: #2457d6;
letter-spacing: -0.5px;
}
.wx .ds {
margin: 12px 0 0;
font-size: 16px;
line-height: 26px;
color: #5b6574;
max-width: 520px;
}
.wx .wb {
display: flex;
gap: 10px;
margin-top: 24px;
}
.wx .wb button {
display: inline-flex;
align-items: center;
height: 48px;
padding: 0 22px;
border-radius: 12px;
border: 1px solid #d5dce5;
background: #fff;
color: #17304b;
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.wx .wb button.pr {
background: #17304b;
border-color: #17304b;
color: #fff;
}
.wx .wph {
position: relative;
background: linear-gradient(180deg,#cbc6fc 0%,#c8cafd 35%,#b2c9fd 75%,#b5ccfe 100%);
display: grid;
place-items: center;
overflow: hidden;
}
.wx .wph .wic {
width: 96px;
height: 96px;
border-radius: 28px;
background: rgba(255,255,255,.85);
display: grid;
place-items: center;
color: #2457d6;
box-shadow: 0 14px 30px rgba(36,87,214,.22);
}
.wx .wph .wic svg {
width: 52px;
height: 52px;
}
.wx .wph em {
position: absolute;
left: 12px;
bottom: 10px;
font-style: normal;
font-size: 12px;
font-weight: 600;
color: rgba(23,48,75,.55);
background: rgba(255,255,255,.6);
padding: 3px 8px;
border-radius: 999px;
}
.wx h3 {
margin: 0;
font-size: 20px;
line-height: 28px;
font-weight: 600;
letter-spacing: -0.5px;
color: #17304b;
}
.wx p {
color: #5b6574;
}
.wx .tx b,
.wx li>b {
font-size: 15px;
font-weight: 700;
color: #2457d6;
}
.wx.A .top {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 32px;
}
.wx.A .top .wb {
margin: 0;
}
.wx.A .row {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px;
}
.wx.A article {
background: #fff;
border: 1px solid #e5e8ec;
border-radius: 20px;
overflow: hidden;
}
.wx.A .wph {
height: 220px;
}
.wx.A .tx {
padding: 22px 24px 26px;
}
.wx.A .tx h3 {
margin-top: 6px;
}
.wx.A .tx p {
margin: 8px 0 0;
font-size: 15px;
line-height: 24px;
}
.wx.B {
display: grid;
grid-template-columns: 400px 1fr;
gap: 56px;
align-items: center;
}
.wx.B .r {
display: grid;
gap: 14px;
}
.wx.B article {
display: grid;
grid-template-columns: 150px 1fr;
gap: 24px;
align-items: center;
background: #fff;
border: 1px solid #e5e8ec;
border-radius: 20px;
padding: 14px 28px 14px 14px;
}
.wx.B .wph {
height: 120px;
border-radius: 14px;
}
.wx.B .wph .wic {
width: 64px;
height: 64px;
border-radius: 18px;
}
.wx.B .wph .wic svg {
width: 34px;
height: 34px;
}
.wx.B .wph em {
display: none;
}
.wx.B .tx h3 {
margin-top: 2px;
}
.wx.B .tx p {
margin: 6px 0 0;
font-size: 15px;
line-height: 24px;
}
.wx.C {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.wx.C .big {
height: 520px;
border-radius: 24px;
}
.wx.C .big .wic {
width: 160px;
height: 160px;
border-radius: 44px;
}
.wx.C .big .wic svg {
width: 90px;
height: 90px;
}
.wx.C ol {
list-style: none;
margin: 28px 0 0;
padding: 4px 28px;
background: #fff;
border: 1px solid #e5e8ec;
border-radius: 20px;
}
.wx.C li {
display: grid;
grid-template-columns: 40px 1fr;
padding: 20px 0;
border-top: 1px solid #eef0f3;
}
.wx.C li:first-child {
border-top: 0;
}
.wx.C li p {
margin: 6px 0 0;
font-size: 15px;
line-height: 24px;
}
#why#why .wx p,
#why#why .wx .ds {
color: #5b6574 !important;
opacity: 1 !important;
-webkit-text-fill-color: #5b6574 !important;
}
#why#why .wx .lab {
color: #2457d6 !important;
-webkit-text-fill-color: #2457d6 !important;
opacity: 1 !important;
}
#why#why .wx h2,
#why#why .wx h3 {
color: #17304b !important;
-webkit-text-fill-color: #17304b !important;
opacity: 1 !important;
}
#why#why .wx>*,
#why#why .wx article,
#why#why .wx li {
opacity: 1;
transform: none;
}
#why#why .wx h2 svg {
height: .78em !important;
width: auto !important;
display: inline-block !important;
vertical-align: -.04em !important;
overflow: visible !important;
max-width: none !important;
}
#why#why .wx h2 span {
display: inline !important;
}
#why#why .wx h2 .wmk svg {
height: .74em !important;
width: auto !important;
color: #2457d6 !important;
fill: #2457d6 !important;
margin-right: 2px;
}
#why#why .wx .wph {
background: #edf1f7 !important;
}
#why#why .wx .wph img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#why#why .wx.A .wph {
height: auto !important;
aspect-ratio: 16/9;
}
#why#why .wx.A article {
display: flex;
flex-direction: column;
}
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) #rfMobileHero .rf7-cnt {
display: none !important;
}
html.refre-mobile #rfMobileHero .rf87-dots {
position: absolute;
right: 14px;
bottom: 14px;
z-index: 4;
display: flex;
gap: 5px;
align-items: center;
}
html.refre-mobile #rfMobileHero .rf87-dots i {
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(23,48,75,.25);
transition: width .25s,background .25s;
}
html.refre-mobile #rfMobileHero .rf87-dots i.on {
width: 16px;
background: #17304b;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) #rfMobileHero .rf7-ban .cut2 {
top: 172px !important;
bottom: 18px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) #rfMobileHero .rf7-ban .cut2 img {
height: calc(100% - 30px) !important;
max-width: 100% !important;
object-fit: contain !important;
}
html.refre-mobile #rfMobileHero .rf7-ban .rf87-parts {
position: absolute;
left: 10px;
right: 10px;
top: 170px;
bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
}
html.refre-mobile #rfMobileHero .rf7-ban .rf87-parts img {
position: static !important;
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
-webkit-mask-image: none !important;
mask-image: none !important;
filter: drop-shadow(0 10px 14px rgba(23,48,75,.22));
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row {
gap: 0 !important;
justify-content: space-between !important;
overflow: visible !important;
padding: 10px 20px 0 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero>.rf-menu-row a {
font-size: 14px !important;
letter-spacing: -0.5px !important;
flex: 0 0 auto !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-trust {
border: 0 !important;
background: #f5f7fb !important;
border-radius: 14px !important;
padding: 14px 4px !important;
margin-top: 12px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-trust span {
gap: 2px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-trust span+span {
border-left: 1px solid #e3e8ef !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-trust span::before {
content: "";
width: 22px;
height: 22px;
margin-bottom: 4px;
background: center/22px no-repeat;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-trust span:nth-child(1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232457d6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='8' rx='2'/%3E%3Cpath d='M6 11h12M8 17l-1 3M12 17v3M16 17l1 3'/%3E%3C/svg%3E");
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-trust span:nth-child(2)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232457d6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 8v4l3 2'/%3E%3C/svg%3E");
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-trust span:nth-child(3)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232457d6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9) body #refreMobileHome #rfMobileHero#rfMobileHero .rf7-trust b {
color: #17304b !important;
font-size: 17px !important;
font-weight: 700 !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10) #rfMobileHero .rf7-ban .cut2 {
left: 8px !important;
right: 8px !important;
gap: 6px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11) #rfMobileHero .rf7-ban.p::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 44%;
background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 35%,rgba(255,255,255,.75) 100%);
z-index: 0;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11) #rfMobileHero .rf7-ban.p .rf87-parts,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11) #rfMobileHero .rf7-ban.p .cut2 {
z-index: 1;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11) #rfMobileHero .rf7-ban .rf87-parts img,
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11) #rfMobileHero .rf7-ban .cut2 img {
filter: drop-shadow(0 8px 6px rgba(23,48,75,.22)) !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11) #rfMobileHero .rf7-ban .cut2 {
left: 4px !important;
right: 4px !important;
top: 150px !important;
bottom: 14px !important;
gap: 2px !important;
grid-template-columns: 1fr 1px 1fr !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11) #rfMobileHero .rf7-ban .cut2 img {
height: calc(100% - 26px) !important;
width: 100% !important;
max-width: none !important;
object-fit: contain !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11) #rfMobileHero .rf7-ban .cut2 .dv::after {
width: 24px !important;
height: 24px !important;
background-size: 13px !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12) #rfMobileHero .rf7-ban .cut2 {
top: 168px !important;
bottom: 34px !important;
}
@media(min-width:769px) {
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-detail-index,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-detail-note,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-arrow,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-desc {
display: none !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-a-layout {
align-items: stretch !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-timeline {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
height: auto !important;
gap: 8px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-tab {
flex: 1 1 0 !important;
min-height: 0 !important;
padding: 12px 16px !important;
border: 1px solid #e5e8ec !important;
border-radius: 14px !important;
background: #fff !important;
box-shadow: none !important;
margin: 0 !important;
align-items: center !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-tab.current {
border-color: #2457d6 !important;
background: #f3f7ff !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-rail {
display: none !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-tab {
display: flex !important;
flex-direction: row !important;
gap: 14px !important;
grid-template-columns: none !important;
width: 100% !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-copy {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
display: block !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-copy small,
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-copy strong {
white-space: nowrap !important;
word-break: keep-all !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-num {
flex: 0 0 auto !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-copy small {
display: block !important;
font-size: 12px !important;
margin-bottom: 2px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-step-copy strong {
font-size: 17px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-detail-stage {
height: auto !important;
min-height: 0 !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-detail-panel.active {
display: grid !important;
grid-template-columns: 1.05fr 1fr !important;
grid-template-rows: none !important;
height: 100% !important;
min-height: 440px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-detail-media {
aspect-ratio: auto !important;
height: 100% !important;
width: 100% !important;
max-height: none !important;
position: relative !important;
min-height: 440px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-detail-media img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-detail-copy {
padding: 32px 36px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-detail-eyebrow {
display: block !important;
margin: 0 0 6px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-detail-copy h3 {
font-size: 22px !important;
margin: 0 0 8px !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body #workflow#workflow .process-detail-copy p {
font-size: 16px !important;
line-height: 26px !important;
margin: 0 !important;
}
}
@media(min-width:769px) {
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) #priceBusinessZone#priceBusinessZone .biz-detail-layout {
align-items: stretch !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) #priceBusinessZone#priceBusinessZone .biz-detail-shell {
display: flex !important;
flex-direction: column !important;
align-self: stretch !important;
height: auto !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) #priceBusinessZone#priceBusinessZone .biz-detail-panel:not([hidden]) {
flex: 1 1 auto !important;
height: auto !important;
min-height: 100% !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
margin: 0 !important;
}
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) #priceBusinessZone#priceBusinessZone .biz-detail-panel:not([hidden])>:last-child {
margin-top: auto !important;
}
}
@media(min-width:769px) {
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3) #heroSection #rf83Carousel .rf83-intro .rf-hero-proof {
display: grid !important;
grid-template-columns: repeat(2,max-content) !important;
gap: 8px 20px !important;
flex-wrap: nowrap !important;
}
}
@media(min-width:769px) {
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare {
background: #102642 !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf83-copy {
left: 7% !important;
top: 15% !important;
width: 33% !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf83-pair {
position: absolute !important;
left: 41% !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: auto !important;
height: auto !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 2px !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(255,255,255,.55) !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf83-pair figure {
position: relative !important;
margin: 0 !important;
height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
border-radius: 0 !important;
background: #2a2f36 !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf83-pair img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: 50% 50% !important;
border-radius: 0 !important;
filter: brightness(1.08) contrast(1.06) saturate(1.05) !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf83-pair figcaption {
position: absolute !important;
left: 16px !important;
top: 16px !important;
bottom: auto !important;
margin: 0 !important;
height: 28px !important;
padding: 0 12px !important;
border-radius: 999px !important;
display: flex !important;
align-items: center !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
color: #fff !important;
background: rgba(16,38,66,.78) !important;
z-index: 2 !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf83-pair figure:last-child figcaption {
background: #2457d6 !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf83-pair::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 90px !important;
z-index: 3 !important;
pointer-events: none !important;
background: linear-gradient(90deg,#102642,rgba(16,38,66,0)) !important;
}
}
@media(min-width:769px) {
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf83-pair figure:first-child figcaption {
left: 100px !important;
}
}
@media(min-width:769px) {
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf87-meta {
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex-wrap: wrap !important;
margin: 10px 0 0 !important;
font-size: 13px !important;
line-height: 20px !important;
color: rgba(255,255,255,.6) !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf87-meta .rf83-link {
margin: 0 !important;
font-size: 13px !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf87-act {
margin-top: 20px !important;
justify-content: flex-start !important;
gap: 10px !important;
}
html:not(.refre-mobile) #heroSection #rf83Carousel .rf83-compare .rf87-act .btn {
font-size: 15px !important;
border-radius: 10px !important;
min-width: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
}
}
@media(min-width:769px) {
html:not(.refre-mobile) #workflow .process-a-layout.rf87-hide {
display: none !important;
}
.wd {
font-family: inherit;
color: #17304b;
margin-bottom: 12px;
}
.wd * {
box-sizing: border-box;
}
.wd .grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 32px 20px;
}
.wd .ph {
position: relative;
overflow: hidden;
border-radius: 20px;
aspect-ratio: 3/2;
background: #e9edf3;
cursor: zoom-in;
display: block;
width: 100%;
padding: 0;
border: 0;
}
.wd .ph img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .45s ease;
}
.wd .ph:hover img,
.wd .ph:focus-visible img {
transform: scale(1.04);
}
.wd .ph .zm {
position: absolute;
right: 12px;
bottom: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.9);
display: grid;
place-items: center;
opacity: 0;
transition: opacity .25s;
}
.wd .ph:hover .zm,
.wd .ph:focus-visible .zm {
opacity: 1;
}
.wd .ph .zm svg {
width: 16px;
height: 16px;
}
.wd .tx {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
padding: 16px 2px 0;
}
.wd .tx small { grid-column: 2; grid-row: 1; }
.wd .tx h3 { grid-column: 2; grid-row: 2; }
.wd .tx p { grid-column: 2; grid-row: 3; }
#workflow#workflow .wd .num {
grid-column: 1;
grid-row: 2;
margin-top: 2px;
font-size: 20px;
line-height: 26px;
font-weight: 700;
color: #9fb6ee !important;
-webkit-text-fill-color: #9fb6ee !important;
font-variant-numeric: tabular-nums;
}
#workflow#workflow .wd small {
display: block;
margin: 0;
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: .06em;
color: #2457d6 !important;
-webkit-text-fill-color: #2457d6 !important;
opacity: 1 !important;
}
#workflow#workflow .wd h3 {
display: block !important;
margin: 2px 0 0;
font-size: 20px;
line-height: 26px;
font-weight: 600;
letter-spacing: -.5px;
color: #17304b !important;
-webkit-text-fill-color: #17304b !important;
opacity: 1 !important;
}
#workflow#workflow .wd p {
margin: 6px 0 0;
font-size: 15px;
line-height: 24px;
color: #5b6574 !important;
-webkit-text-fill-color: #5b6574 !important;
opacity: 1 !important;
}
.wd-lb {
position: fixed;
inset: 0;
z-index: 2147483000;
background: rgba(9,20,36,.86);
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
cursor: zoom-out;
}
.wd-lb[hidden] {
display: none;
}
.wd-lb figure {
margin: 0;
max-width: min(1000px,92vw);
text-align: center;
}
.wd-lb img {
max-width: 100%;
max-height: 78vh;
border-radius: 20px;
display: block;
margin: 0 auto;
}
.wd-lb figcaption {
margin-top: 14px;
color: #fff;
font-size: 16px;
font-weight: 600;
}
.wd-lb figcaption small {
display: block;
margin-bottom: 2px;
font-size: 12px;
letter-spacing: .06em;
color: #acc9ff;
}
.wd-lb .x {
position: absolute;
right: 24px;
top: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
background: rgba(255,255,255,.14);
color: #fff;
font-size: 22px;
cursor: pointer;
}
}
@media(max-width:768px) {
.wd,
.wd-lb {
display: none !important;
}
}
html.refre-mobile .wd,
html.refre-mobile .wd-lb {
display: none !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13) #rfMobileHero .rf7-ban .cut2 {
left: 26px !important;
right: 26px !important;
top: 176px !important;
bottom: 12px !important;
height: auto !important;
gap: 4px !important;
grid-template-columns: 1fr 1px 1fr !important;
grid-template-rows: 100% !important;
align-items: stretch !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13) #rfMobileHero .rf7-ban .cut2 figure {
position: relative !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13) #rfMobileHero .rf7-ban .cut2 img {
position: static !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
width: 100% !important;
max-width: none !important;
object-fit: contain !important;
object-position: 50% 100% !important;
}
html.refre-mobile.mv7:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13) #rfMobileHero .rf7-ban .cut2 figcaption {
position: static !important;
transform: none !important;
flex: 0 0 auto !important;
margin-top: 8px !important;
height: 22px !important;
padding: 0 10px !important;
font-size: 12px !important;
}
@media (min-width:769px) {
html:not(.refre-mobile) #workflow#workflow .wd .ph { border-radius: 12px !important; }
html:not(.refre-mobile) .wd-lb img { border-radius: 12px !important; }
html:not(.refre-mobile) #why#why .wx.A article { border-radius: 12px !important; }
html:not(.refre-mobile) #price#price .price-heading-offer { border-radius: 12px !important; }
html:not(.refre-mobile) body section.final-cta p { font-size: 16px !important; line-height: 26px !important; }
html:not(.refre-mobile) #workGuide .work-guide-tabs.rf88-moved { margin: 24px 0 0 !important; }
html:not(.refre-mobile) #workGuide.rf88-tabs-moved > .container { display: none !important; }
html:not(.refre-mobile):not(#z1):not(#z2):not(#z3):not(#z4) body main > #workGuide.rf88-tabs-moved { padding-top: 80px !important; }
html:not(.refre-mobile) body #workGuide#workGuide.rf88-tabs-moved #why#why { padding-top: 0 !important; }
}
html.refre-mobile:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14) #rfMobileHero .rf7-trust { border-radius: 16px !important; }
html.refre-mobile:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14) #refreMobileHome .rf-ptabs { border-radius: 12px !important; }
.rf-opt { font-size: 12px; font-weight: 500; color: #8a96a6; }
.rf91-faq-contact{display:none}
@media (min-width:1024px){
#faq .faq-wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:80px;align-items:start;grid-template-rows:auto auto 1fr;align-content:start}
#faq .faq-title{grid-column:1;grid-row:1;margin:0 0 24px;padding:0;align-self:start}
#faq .faq-tabs{grid-column:1;grid-row:2;max-width:none;margin:0 0 24px;padding:0;justify-content:flex-start;align-self:start}
#faq .faq-list{grid-column:2;grid-row:1 / span 3;max-width:none;width:100%;margin:0;align-self:start}
#faq .rf91-faq-contact{display:block;grid-column:1;grid-row:3;align-self:start;margin:0;padding:24px;border:1px solid #e5e8ec;border-radius:12px;background:#fff}
#faq .rf91-faq-contact strong{display:block;font-size:17px;line-height:26px;font-weight:700;color:#17304b;letter-spacing:-.3px}
#faq .rf91-faq-contact p{margin:6px 0 0;font-size:14px;line-height:22px;color:#5b6b7d;word-break:keep-all}
#faq .rf91-fc-btns{display:grid;gap:8px;margin-top:18px}
#faq .rf91-fc-btns a{display:flex;align-items:center;justify-content:center;height:46px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none}
#faq .rf91-fc-tel{background:#17304b;color:#fff}
#faq .rf91-fc-kakao{background:#fee500;color:#191919}
}
#refreContactFloating{transition:translate .25s ease,opacity .25s ease}
#refreContactFloating.rf91-yield{translate:72px 0;opacity:0;pointer-events:none}
html.refre-mobile.mv7 .rf7-card .rf91-date{font-size:13px;color:#8a95a3}
html.refre-mobile.mv7 .rf91-rv-note{margin:12px 0 0;font-size:13px;line-height:20px;color:#7a8696;word-break:keep-all}
.rf91-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));translate:-50% 0;z-index:100000;max-width:calc(100vw - 32px);padding:14px 18px;border-radius:12px;background:#17304b;color:#fff;font-size:14px;line-height:21px;box-shadow:0 10px 30px rgba(16,32,56,.25);word-break:keep-all}
.rf91-toast a{color:#fff;font-weight:700}
html .rf7-sheet .it p,html .rf7-sheet .it strong{word-break:keep-all}
#faq .faq-tabs button:focus:not(:focus-visible){outline:none;box-shadow:none}
#workflow#workflow .wd .tx small,#workflow .process-detail-eyebrow,#workflow .process-step-copy>small,#refreMobileHome .rf-pcard-eyebrow{display:none!important}
#workflow#workflow .wd .tx{grid-template-columns:auto 1fr;column-gap:8px;padding:16px 0 0}
#workflow#workflow .wd .tx .num{grid-column:1;grid-row:1;margin-top:0}
#workflow#workflow .wd .tx h3{grid-column:2;grid-row:1;margin-top:0}
#workflow#workflow .wd .tx p{grid-column:1 / -1;grid-row:2}