.inner {
    padding: 12rem 0 0;
}
#sub-visual .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#sub-visual small {
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    color: #006ffb;
}
#sub-visual h1 {
    margin-top: 1rem;
    font-weight: 700;
    font-size: 4.4rem;
    letter-spacing: -0.03em;
    line-height: 1.3;
    text-align: center;
    color: #121212;
}
#sub-visual h1 + p {
    margin-top: 2.2rem;
    font-size: 1.8rem;
    letter-spacing: -0.03em;
    line-height: 1.4;
    text-align: center;
    color: #5a6e81;
}
#sub-visual .balloons {
    margin-top: 8.5rem;
    width: 100dvw;
    padding: 4.5rem 0;
    background: radial-gradient(151.72% 141.8% at 18.75% 151.63%, #FFF 0%, #F0EFF8 50%, #E3F1FD 78.61%, #E7F7FD 100%);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow: hidden;
}
#sub-visual .balloons .marquee {
    --marqueeGap: 3rem;
    display: flex;
    gap: var(--marqueeGap);
    width: max-content;
    will-change: transform;
    animation: marquee linear infinite;
}
#sub-visual .balloons .marquee:nth-child(1) {
    animation-duration: 140s;
}
#sub-visual .balloons .marquee:nth-child(2) {
    animation-duration: 280s;
}
#sub-visual .balloons .marquee:nth-child(3) {
    animation-duration: 180s;
}
#sub-visual .balloons .marquee.reverse {
    animation-direction: reverse;
}
#sub-visual .balloons .marquee li {
    font-family: 'Paperlogy';
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: #121212;
    display: grid;
    place-items: center;
    height: 7.5rem;
    padding: 0 2.5rem;
    min-width: 17rem;
    border-radius: 1.5rem;
    flex: 1 0 max-content;
}
#sub-visual .balloons .marquee:not(.reverse) li:first-child {
    margin-left: var(--marqueeGap);
}
#sub-visual .balloons .marquee.reverse li:last-child {
    margin-right: var(--marqueeGap);
}
#sub-visual .balloons .marquee li:nth-child(2n-1) {
    filter: drop-shadow(0 0 5px rgba(183, 205, 232, 0.31));
    background: #FFF;
    position: relative;
    margin-right: 1.2rem;
}
#sub-visual .balloons .marquee li:nth-child(2n-1)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.2rem;
    transform: translateY(-50%);
    display: block;
    width: 3rem;
    height: 3.2rem;
    background: url("/images/voc/ic_balloonTail.svg") center no-repeat;
}
#sub-visual .balloons .marquee li:nth-child(2n) {
    border: 1px solid #FFF;
    background: #DAEAFC;
    backdrop-filter: blur(12px);
}
@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

#voc h2 {
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -0.03em;
    line-height: 1.5;
    color: #243853;
}
#voc ul {
    margin-top: 2.5rem;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
#voc ul:not(:has(li:nth-child(3))) {
    grid-template-rows: 1fr;
}

#voc ul li figure {
    border-radius: 1rem;
    border: solid 1px #DBE4ED;
    display: grid;
    grid-template-columns: 24rem 1fr;
    height: 30rem;
}

#voc ul li figure .thumbnail-wrap {
    overflow: hidden;
    border-radius: 1rem 0 0 1rem;
}

#voc ul li figure .thumbnail-wrap img {
    display: block;
    height: 100%;
    transform: translateX(-16.5%);
    transition: all 0.2s ease-in-out;
}

#voc ul li figure figcaption {
    border-left: solid 1px #DBE4ED;
    padding: 5rem 4rem 3rem;
    display: flex;
    flex-direction: column;
}

#voc ul li figure figcaption .logo-wrap {
    width: 16rem;
    height: 5.8rem;
}
#voc ul li figure figcaption .logo-wrap img {
    transform: scale(0.5) translate(-50%, -50%);
}

#voc ul li figure figcaption p {
    margin-top: 1.2rem;
    padding-top: 2.2rem;
    margin-bottom: 2rem;
    min-height: 6.5rem;
    background: url("/images/voc/ic_doublequote.svg") top left no-repeat;
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: -0.03em;
    white-space: pre-line;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: #121212;
}

#voc ul li figure figcaption span {
    margin-top: auto;
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    color: #768393;
}

#voc .pagination {
    margin-top: 5.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
}
#voc .pagination #pages {
    display: flex;
    gap: 2em;
}
#voc .pagination button {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    background: center no-repeat;
    font-family: "Poppins";
    font-weight: 500;
    font-size: 1.6rem;
    color: #b2bed2;
}
#voc .pagination button.active {
    color: #121212;
    text-decoration: underline;
}
#voc .pagination button.disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}
#voc .pagination button#first {
    background-image: url("/images/notice/ic_first.svg");
}
#voc .pagination button#prev {
    background-image: url("/images/notice/ic_prev.svg");
}
#voc .pagination button#next {
    background-image: url("/images/notice/ic_next.svg");
}
#voc .pagination button#last {
    background-image: url("/images/notice/ic_last.svg");
}
#voc .pagination.no-list {
    display: none;
}

#process .inner {
    padding: 12rem 0 14rem;
}
#process h2 {
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -0.03em;
    line-height: 1.5;
    color: #243853;
    padding-bottom: 3.4rem;
    position: relative;
}
#process h2::after {
    content: 'Feedback Process';
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #C8CDD4;
    position: absolute;
    left: 0;
    bottom: 0;
}
#process ol {
    margin-top: 5.5rem;
    position: relative;
    display: flex;
    --circle-radius: 13.5rem;
}
#process ol::before {
    content: '';
    position: absolute;
    top: var(--circle-radius);
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: calc(100% - 6rem);
    height: 1px;
    background: #DCE5F0;
    z-index: 1;
}
#process ol li {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    z-index: 1;
}
#process ol li ~ li {
    margin-left: -2rem;
}
#process ol li:last-child {
    margin-left: auto;
}
#process ol li .circle {
    width: calc(var(--circle-radius) * 2);
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: solid 1px #DCE5F0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
    padding: 0 2rem 0 3rem;
    background: transparent;
    transition: background 0.5s ease-in-out, border-color 0.5s ease-in-out;
}
#process ol li:last-child .circle {
    position: relative;
}
#process ol li:last-child .circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 50%;
    border: dashed 1px #121212;
    opacity: 0;
}
#process ol li.on:last-child .circle::before {
    opacity: 1;
    transition: all 0.4s ease-in-out 0.5s;
    transform: translate(-50%, -50%) scale(1.05);
}
#process ol li .circle span {
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    color: #FF4800;
    cursor: default;
}
#process ol li .circle strong {
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: -0.03em;
    color: #121212;
    cursor: default;
    transition: color 0.5s ease-in-out;
}
#process ol li.on .circle {
    border-color: #C8CDD4;
    background: #25314E;
}
#process ol li.on .circle strong {
    color: #FFF;
}
#process ol li p {
    width: calc(var(--circle-radius) * 2);
    padding: 0 2rem 0 3rem;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    line-height: 1.5;
    color: #121212;
}

#go-together {
    background: #F2F7FD;
    position: relative;
    overflow: hidden;
}
#go-together .animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
#go-together .animation .circle {
    aspect-ratio: 1/1;
    background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, #DDF0FF 100%);
    opacity: 0.507;
    position: absolute;
    bottom: -17.5rem;
    left: 50%;
    transform: translate(-50%, 50%) scale(0);
    border-radius: 50%;
    transition: transform linear;
}
/* 0.5 , 0.71 , 0.97 */
#go-together .animation .circle.small {width: 89.6rem; transition-duration: 2s;}
#go-together .animation .circle.medium {width: 141.8rem; transition-duration: 2.84s;}
#go-together .animation .circle.large {width: 194rem; transition-duration: 3.88s;}
#go-together .animation.on .circle {
    transform: translate(-50%, 50%) scale(1);
}
#go-together .animation .logo {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
#go-together .animation .logo img {
    position: absolute;
    bottom: 0;
    left: 50%;
}

#go-together .animation .logo.large img:nth-child(1) {transform: translate(-870px,-340px);}
#go-together .animation .logo.large img:nth-child(2) {transform: translate(-740px,-214px);}
#go-together .animation .logo.large img:nth-child(3) {transform: translate(-870px,-80px);}
#go-together .animation .logo.large img:nth-child(4) {transform: translate(690px,-40px);}
#go-together .animation .logo.large img:nth-child(5) {transform: translate(840px,-105px);}
#go-together .animation .logo.large img:nth-child(6) {transform: translate(642px,-340px);}

#go-together .animation .logo.medium img:nth-child(1) {transform: translate(-470px,-296px);}
#go-together .animation .logo.medium img:nth-child(2) {transform: translate(-540px,-120px);}
#go-together .animation .logo.medium img:nth-child(3) {transform: translate(220px,-360px);}
#go-together .animation .logo.medium img:nth-child(4) {transform: translate(531px,-200px);}

#go-together .animation .logo.small img:nth-child(1) {transform: translate(-300px,-40px);}
#go-together .animation .logo.small img:nth-child(2) {transform: translate(310px,-60px);}

#go-together .animation .logo.small {transition-delay: 2s;}
#go-together .animation .logo.medium {transition-delay: 2.8s;}
#go-together .animation .logo.large {transition-delay: 3.6s;}
#go-together .animation.on .logo {
    opacity: 1;
}

#go-together .inner {
    padding: 12rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}
#go-together h2 {
    font-weight: 800;
    font-size: 3rem;
    letter-spacing: -0.03em;
    line-height: 1.5;
    color: #121212;
    text-align: center;
}
#go-together p {
    margin-top: 1rem;
    font-size: 1.6rem;
    letter-spacing: -0.06em;
    line-height: 1.6;
    color: #5A6E81;
    text-align: center;
}
#go-together a {
    margin-top: 4.8rem;
    border-radius: 5px;
    background: #FF4800;
    display: grid;
    place-items: center;
    width: 20rem;
    height: 5rem;
    font-weight: 500;
    font-size: 1.8rem;
    letter-spacing: -0.03em;
    color: #FFF;
}

@media (min-width: 950px) and (hover: hover) and (pointer: fine) {
    #voc ul li figure:hover .thumbnail-wrap img {
        transform: translateX(-16.5%) scale(1.05);
        transform-origin: center;
    }
}
@media (max-width: 950px) and (hover: hover) and (pointer: fine) {
    #voc ul li figure:hover .thumbnail-wrap img {
        transform: scale(1.05);
        transform-origin: center;
    }
}

@media (max-width: 1140px) {
    #voc ul {
        gap: 2rem;
    }
    #voc ul li figure {
        grid-template-columns: 20rem 1fr;
        height: 25rem;
    }
    #voc ul li figure figcaption {
        padding: 2rem 3rem;
        background-position: top right;
        background-size: 30%;
    }
    #voc ul li figure figcaption p {
        background: none;
        padding-top: 0;
    }
    #process ol {
        --circle-radius: 12vw;
    }
    #process ol li ~ li {
        margin-left: -3rem;
    }
}
@media (max-width: 1024px) {
    .inner {
        padding: 6rem 0 0;
    }
    #process .inner {
        padding: 8rem 0 10rem;
    }
    #go-together .inner {
        padding: 10rem 0;
    }
}
@media (max-width: 950px) {
    #voc ul li figure {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 26rem;
        height: auto;
    }
    #voc ul li figure .thumbnail-wrap {
        border-radius: 1rem 1rem 0 0;
        aspect-ratio: 5/3;
    }
    #voc ul li figure .thumbnail-wrap img {
        width: 100%;
        transform: unset;
        object-fit: cover;
        object-position: center;
    }
    #voc ul li figure figcaption {
        border-left: 0;
        border-top: solid 1px #DBE4ED;
        padding: 2rem 1.6rem 2.4rem;
    }
    #voc ul li figure figcaption p {
        background: url("/images/voc/ic_doublequote.svg") top left no-repeat;
        padding-top: 2.2rem;
    }
    #process ol {
        --circle-radius: 11rem;
    }
}
@media (max-width: 860px) {
    #process ol {
        flex-direction: column;
        align-items: center;
    }
    #process ol::before {
        content: none;
    }
    #process ol li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 3rem;
        align-items: center;
    }
    #process ol li p {
        width: auto;
        padding: 0;
        max-width: 37.5rem;
    }
    #process ol li ~ li,
    #process ol li:last-child {
        margin-left: 0;
    }
    #process ol li ~ li {
        margin-top: -5rem;
    }
}
@media (max-width: 660px) {
    #sub-visual h1 {
        font-size: 2.7rem;
    }
    #sub-visual h1 + p {
        font-size: 1.6rem;
    }
    #sub-visual .balloons {
        margin-top: 5rem;
        padding: 3rem 0;
        gap: 1.5rem;
    }
    #sub-visual .balloons .marquee {
        --marqueeGap: 2rem;
    }
    #sub-visual .balloons .marquee li {
        font-size: 1.3rem;
        line-height: 1.3;
        height: 5.5rem;
        padding: 0 1.8rem;
        min-width: 14rem;
    }
    #go-together .animation .circle {bottom: 5.5rem;}
    #go-together .animation .circle.small {width: 30rem;}
    #go-together .animation .circle.medium {width: 52rem;}
    #go-together .animation .circle.large {width: 75rem;}
    #go-together .animation .logo {display: none;}
    #go-together a {
        font-size: 1.6rem;
    }
}
@media (max-width: 600px) {
    #voc ul {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}
@media (max-width: 500px) {
    #process ol {
        --circle-radius: 20vw;
        margin-top: 5rem;
    }
    #process ol li {
        gap: 1rem;
    }
    #process ol li ~ li {
        margin-top: -5vw;
    }
    #process ol li .circle {
        padding: 0 1.5rem;
        gap: 0.6rem;
    }
    #process ol li .circle span {
        font-size: 1.4rem;
    }
    #process ol li .circle strong {
        font-size: 1.6rem;
    }
    #go-together h2 {
        font-size: 2.4rem;
    }
}