@charset "utf-8";
/* ==========================================================================
   services.css  -  Services     Design: Services-PC / Services-SP
   ========================================================================== */
.sv { padding-bottom: .56rem; }
.sv-head {
    padding: .2rem 0 .24rem;
    background: var(--c-warm);
}
.sv-head_title {
    margin-top: .08rem;
    font-size: .28rem;
    line-height: .36rem;
    font-weight: 700;
    text-transform: uppercase;
}
.sv-head_lead {
    margin-top: .04rem;
    font-size: .14rem;
    line-height: .2rem;
    color: var(--c-ink-muted);
}
.sv-head_jump {
    display: flex;
    flex-wrap: wrap;
    gap: .08rem;
    margin-top: .16rem;
}
.sv-head_jump a {
    display: flex;
    align-items: center;
    height: .36rem;
    padding: 0 .16rem;
    border: 1px solid var(--c-ink);
    border-radius: 9999px;
    background: var(--c-white);
    font-size: .13rem;
    font-weight: 600;
    transition: background-color .2s, color .2s;
}
.sv-head_jump a:hover,
.sv-head_jump .is-dark {
    background: var(--c-ink);
    color: var(--c-white);
}

/* KBS band (same art as Top) */
.sv-kbs {
    position: relative;
    margin-top: .32rem;
    overflow: hidden;
    background: var(--c-sage);
    color: var(--c-white);
    text-align: center;
    scroll-margin-top: var(--header-h);
}
.sv-kbs_plane {
    position: absolute;
    left: 0;
    top: .3rem;
    width: 2.6rem;
}
.js .sv-kbs .sv-kbs_plane {
    transform: translateX(-100%);
    transition: transform 1.6s cubic-bezier(.25, .7, .2, 1) .2s;
}
.js .sv-kbs.is-inview .sv-kbs_plane { transform: none; }
.sv-kbs_body {
    position: relative;
    padding: .9rem .3rem .3rem;
}
.sv-kbs_title {
    font-size: .26rem;
    line-height: .32rem;
    font-weight: 400;
    text-transform: uppercase;
}
.sv-kbs_lead {
    margin-top: .1rem;
    font-size: .15rem;
    color: var(--c-gold);
}
.sv-kbs_text {
    max-width: 4.4rem;
    margin: .14rem auto 0;
    font-size: .13rem;
    line-height: .2rem;
}
.sv-kbs_skyline {
    display: block;
    width: 100%;
    height: .8rem;
    object-fit: cover;
    object-position: center bottom;
}
.sv-kbs_strip {
    padding: .16rem .3rem;
    background: var(--c-warm);
    font-size: .18rem;
    line-height: .26rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--c-sage);
}

/* how it works */
.sv-how { margin-top: .48rem; }
.sv-how_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .12rem;
    margin-top: .16rem;
}
.sv-how_item {
    display: flex;
    flex-direction: column;
    gap: .06rem;
    padding: .16rem .14rem;
    border: 1px solid var(--c-line);
    border-radius: .08rem;
}
.sv-how_num {
    display: grid;
    place-items: center;
    width: .28rem;
    height: .28rem;
    margin-bottom: .04rem;
    border-radius: 50%;
    background: var(--c-warm);
    font-size: .13rem;
    font-weight: 700;
}
.sv-how_item h3 {
    font-size: .15rem;
    line-height: .2rem;
    font-weight: 700;
}
.sv-how_item p {
    font-size: .12rem;
    line-height: .18rem;
    color: var(--c-ink-muted);
}

/* warm boxes */
.sv-box {
    display: grid;
    gap: .2rem;
    margin-top: .32rem;
    padding: .24rem .18rem;
    border-radius: .12rem;
    background: var(--c-warm);
    scroll-margin-top: calc(var(--header-h) + .16rem);
}
.sv-box_text {
    display: flex;
    flex-direction: column;
    gap: .08rem;
    font-size: .14rem;
    line-height: .22rem;
}
.sv-kicker {
    font-size: .11rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}
.sv-box_title {
    font-size: .22rem;
    line-height: .3rem;
    font-weight: 700;
    text-transform: uppercase;
}
.sv-box_title--lg { font-size: .28rem; line-height: .36rem; }
.sv-request_side {
    display: flex;
    flex-direction: column;
    gap: .14rem;
}
.sv-request_list {
    padding: .12rem .14rem;
    border-radius: .08rem;
    background: var(--c-white);
    font-size: .13rem;
    line-height: .2rem;
}
.sv-request_list > p { font-weight: 700; }
.sv-request_list ul {
    display: grid;
    gap: .04rem .16rem;
    margin-top: .06rem;
}
.sv-request_list li,
.sv-ws_list li {
    display: flex;
    align-items: center;
    gap: .08rem;
}
.sv-request_list .icon,
.sv-ws_list .icon {
    flex-shrink: 0;
    width: .14rem;
    height: .14rem;
    stroke-width: 2.2;
}
.sv-ws_list {
    display: flex;
    flex-direction: column;
    gap: .06rem;
    margin-top: .04rem;
}
.sv-ws_list .icon { width: .16rem; height: .16rem; color: var(--c-sage-dark); }
.sv-btns {
    display: flex;
    flex-direction: column;
    gap: .08rem;
}
.sv-btns--row { margin-top: .08rem; }
.sv-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .08rem;
    height: .48rem;
    padding: 0 .2rem;
    border: 1px solid var(--c-ink);
    border-radius: .06rem;
    background: var(--c-ink);
    font-size: .15rem;
    font-weight: 600;
    color: var(--c-white);
    transition: background-color var(--dur), color var(--dur);
}
.sv-btn i { font-size: .17rem; }
.sv-btn .icon { width: .16rem; height: .16rem; }
.sv-btn:hover { background: #3A3531; }
.sv-btn--ghost {
    background: var(--c-white);
    color: var(--c-ink);
}
.sv-btn--ghost:hover {
    background: var(--c-ink);
    color: var(--c-white);
}
.sv-ws_img {
    overflow: hidden;
    border-radius: .08rem;
    background: var(--c-line);
}
.sv-ws_img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (min-width: 768px) {
    .sv { padding-bottom: .8rem; }
    .sv-head { padding: .4rem 0; }
    .sv-head_title { font-size: .4rem; line-height: .52rem; }
    .sv-head_lead { font-size: .16rem; line-height: .24rem; }
    .sv-head_jump { margin-top: .2rem; }
    .sv-kbs { margin-top: .56rem; }
    .sv-kbs_plane { top: .16rem; width: 4.9rem; }
    .sv-kbs_body { padding: .76rem .4rem .1rem; }
    .sv-kbs_title { font-size: .4rem; line-height: .5rem; }
    .sv-kbs_lead { margin-top: .04rem; font-size: .18rem; }
    .sv-kbs_text { font-size: .15rem; line-height: .22rem; }
    .sv-kbs_skyline { height: auto; margin-top: -.2rem; }
    .sv-kbs_strip { padding: .06rem .3rem .08rem; font-size: .26rem; line-height: .36rem; }
    .sv-how { margin-top: .8rem; }
    .sv-how_list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .2rem;
        margin-top: .24rem;
    }
    .sv-how_item { padding: .22rem .2rem .26rem; }
    .sv-how_num { width: .32rem; height: .32rem; font-size: .15rem; margin-bottom: .08rem; }
    .sv-how_item h3 { font-size: .18rem; line-height: .26rem; }
    .sv-how_item p { font-size: .14rem; line-height: .2rem; }
    .sv-box {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: .4rem;
        margin-top: .56rem;
        padding: .4rem .44rem;
    }
    .sv-box_title { font-size: .26rem; line-height: .34rem; }
    .sv-box_title--lg { font-size: .36rem; line-height: .46rem; }
    .sv-request_list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-btns { flex-direction: row; }
    .sv-btns .sv-btn { flex: 1; }
    .sv-btns--row .sv-btn { flex: 0 0 auto; }
    .sv-ws_img { align-self: stretch; }
}