main .inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12rem 0 0;
}
main h1 {
    font-weight: 800;
    font-size: 4.4rem;
    letter-spacing: -0.03em;
    line-height: 1.36;
    color: #25314e;
    text-align: center;
}
main h2 {
    font-weight: 800;
    font-size: 3.6rem;
    letter-spacing: -0.03em;
    line-height: 1.56;
    color: #25314e;
    text-align: center;
}
main small {
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    color: #ff4800;
    text-align: center;
}

.figure-wrap {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
}
.figure-wrap figure {
    border-radius: 1rem;
    padding: 5rem 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    background: #f5f7fa;
    color: #666;
    overflow: hidden;
}
.figure-wrap figure figcaption > :nth-child(2) {
    margin-top: 0.5rem;
}
.figure-wrap figure strong {
    display: block;
    padding: 0 2rem;
    font-size: 2.2rem;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #121212;
    text-align: center;
}
.figure-wrap figure p {
    padding: 0 2rem;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    line-height: 1.4;
    color: inherit;
    text-align: center;
}
.figure-wrap figure picture {
    margin-top: auto;
    align-self: center;
}
.figure-wrap figure picture img {
    display: block;
}
.figure-wrap figure picture img.half-small {
    aspect-ratio: 127/65;
}
.figure-wrap figure picture img.wide-large {
    aspect-ratio: 24/7;
}
.figure-wrap figure picture img.wide-small {
    aspect-ratio: 24/5;
}
.figure-wrap figure picture img.phone {
    aspect-ratio: 127/90;
}
.figure-wrap figure.wide {
    padding: 5rem 0 0;
    grid-column: 1/3;
}
.figure-wrap figure.wide.left {
    position: relative;
}
.figure-wrap figure.wide.left figcaption {
    position: absolute;
    top: 5rem;
    left: 3rem;
}
.figure-wrap figure.wide.left picture {
    margin-top: 0;
}
.figure-wrap figure.left strong, .figure-wrap figure.left p {
    text-align: left;
}
.figure-wrap figure.navy {
    background: #283b5d;
    color: #fff;
}
.figure-wrap figure.navy strong {
    color: #fff;
}
.figure-wrap figure.navy p {
    opacity: 0.6;
    font-weight: 500;
}
.figure-wrap figure.blue {
    background: #f0f6fd;
    color: #3f5168;
}
.figure-wrap figure.gray {
    background: #f5f7fa;
}

.navy-bg {
    padding-bottom: 12rem;
    background: #243853;
}
.navy-bg small {
    font-family: "Poppins";
    font-weight: 600;
    font-size: 2rem;
}
.navy-bg h2 {
    margin-top: 1.2rem;
    color: #fff;
}
.navy-bg p {
    margin-top: 1rem;
    font-size: 1.8rem;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
}
.navy-bg ul {
    margin-top: 6rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}
.navy-bg li {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: center top 6.5rem/15.6rem 15.6rem no-repeat;
}
.navy-bg li span {
    background: #ff4800;
    border-radius: 1.8rem;
    padding: 0.8rem 1.4rem;
    font-family: "Poppins";
    font-weight: 500;
    font-size: 1.5rem;
    color: #fff;
    align-self: center;
}
.navy-bg li p {
    margin-top: 22rem;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    color: #fff;
}
.navy-bg li strong {
    margin-top: 0.4rem;
    font-weight: 600;
    font-size: 2.2rem;
    letter-spacing: -0.03em;
    text-align: center;
    color: #fff;
}
.navy-bg li strong b {
    font-weight: 900;
}

#sub-visual {
    background: #f5f7fa;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
#sub-visual + * {
    /* 애니메이션 때문 */
    position: relative;
    z-index: 1;
}
#sub-visual .inner {
    padding-bottom: 0;
}
#sub-visual h1 {
    margin-top: 0.7rem;
}
#sub-visual p {
    margin-top: 2rem;
    font-size: 1.8rem;
    letter-spacing: -0.05em;
    line-height: 1.67;
    color: #5a6e81;
    text-align: center;
}
#sub-visual .image-wrap {
    margin-top: 7.5rem;
    position: relative;
}
#sub-visual .image-wrap img {
    display: block;
    animation-name: lift-up;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}

#api-link {
    margin-top: 12rem;
    background: #f4f6f8;
}
#api-link .inner {
    padding: 6rem 0;
    background: url("/images/services/api-link-bg.webp") right center/31.8rem 16rem no-repeat;
}
#api-link h2 {
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.33;
    letter-spacing: -0.03em;
    color: #121212;
    text-align: left;
}
#api-link h2 i {
    color: #0076ff;
}
#api-link a {
    margin-top: 3.2rem;
    align-self: flex-start;
    background: url("/images/services/ic_arrow-white.svg") right 3rem center no-repeat #283b5d;
    border-radius: 2.5rem;
    padding: 1.3rem 5.5rem 1.5rem 3rem;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: -0.03em;
    color: #fff;
}

@keyframes lift-up {
    0% {
        opacity: 0;
        transform: translateY(8rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 660px) {
    .mobile-br {
        display: inline;
    }
    main .inner {
        padding: 6rem 0 0;
    }
    main small {
        font-size: 1.5rem;
    }
    main h1 {
        font-size: 2.7rem;
    }
    main h2 {
        font-size: 2.6rem;
    }
    main p {
        font-size: 1.6rem;
    }
    .figure-wrap {
        margin-top: 2rem;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .figure-wrap figure {
        padding: 3rem 0 0;
    }
    .figure-wrap figure.wide {
        padding: 3rem 0 0;
        grid-column: 1/2;
    }
    .figure-wrap figure.wide.left {
        position: static;
    }
    .figure-wrap figure.wide.left figcaption {
        position: static;
        top: unset;
        left: unset;
    }
    .figure-wrap figure.navy {
        border-radius: 1rem 1rem 1.5rem 1.5rem;
    }
    .figure-wrap figure strong {
        font-size: 2rem;
    }
    .figure-wrap figure p {
        font-size: 1.5rem;
    }
    .figure-wrap figure picture img.half-small {
        aspect-ratio: 343/176;
    }
    .figure-wrap figure picture img.wide-small {
        aspect-ratio: 343/176;
    }
    .figure-wrap figure picture img.wide-large {
        aspect-ratio: 343/176;
    }
    .figure-wrap figure picture img.mobile-small {
        aspect-ratio: 343/176;
    }
    .figure-wrap figure picture img.mobile-medium {
        aspect-ratio: 343/200;
    }
    .figure-wrap figure picture img.mobile-large {
        aspect-ratio: 343/230;
    }
    .navy-bg {
        padding-bottom: 6rem;
    }
    .navy-bg small {
        font-size: 1.6rem;
    }
    .navy-bg h2 {
        font-size: 2.6rem;
    }
    .navy-bg p {
        font-size: 1.5rem;
        line-height: 1.6;
    }
    .navy-bg ul {
        margin-top: 2rem;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 9rem);
        align-items: stretch;
        gap: 2rem;
    }
    .navy-bg li {
        background-position: left 2.5rem center;
        background-size: 5rem 5rem;
        background-color: #2b4260;
        border-radius: 4.5rem;
        padding: 0 2rem 0 9rem;
        justify-content: center;
        align-items: flex-start;
    }
    .navy-bg li span {
        display: none;
    }
    .navy-bg li p {
        margin-top: 0;
        font-weight: 400;
        font-size: 1.4rem;
    }
    .navy-bg li strong {
        margin-top: 0.2rem;
        font-weight: 600;
        font-size: 1.6rem;
    }
    .navy-bg li strong b {
        font-weight: 600;
    }
    #sub-visual h1 {
        margin-top: 1rem;
    }
    #sub-visual p {
        margin-top: 1rem;
        font-size: 1.6rem;
    }
    #sub-visual .image-wrap {
        margin-top: 5.5rem;
    }
    #api-link {
        margin-top: 6rem;
    }
    #api-link .inner {
        background-position: right bottom 6rem;
        background-size: 12rem;
    }
    #api-link h2 {
        font-size: 2.2rem;
    }
    #api-link a {
        margin-top: 2rem;
        background-position: right 2rem center;
        font-size: 1.6rem;
        padding: 1.4rem 6rem 1.5rem 2rem;
    }
}