@media screen and (max-width: 1600px) {
    :root {
        --fs-3xl: 60px;
        --fs-2xl: 48px;
        --fs-xl: 40px;
        --fs-lg: 32px;
        --fs-md: 24px;
        --fs-sm: 20px;
        --fs-xs: 16px;
    
        --space: 48px;
    }
    .container {
        max-width: 1280px;
        padding: 48px 48px;
    }
}
@media screen and (max-width: 1280px) {
    :root {
        --fs-3xl: 60px;
        --fs-2xl: 48px;
        --fs-xl: 40px;
        --fs-lg: 32px;
        --fs-md: 24px;
        --fs-sm: 20px;
        --fs-xs: 16px;
    
        --space: 32px;
    }
    .container {
        max-width: 1120px;
        padding: var(--space);
    }

    #topic .container {
        padding-right: 64px;
    }
}

/* pad */
@media screen and (max-width: 1024px) {
    :root {
        --fs-3xl: 60px;
        --fs-2xl: 40px;
        --fs-xl: 32px;
        --fs-lg: 24px;
        --fs-md: 20px;
        --fs-sm: 18px;
        --fs-xs: 16px;
    
        --space: 32px;
    }
    .container {
        max-width: 1120px;
        padding: var(--space);
    }

    /* scene */
    #app {
        overflow-y: scroll;
    }
    #app.scroll-lock {
        overflow-y: hidden;
    }
    .topic-anime {
        position: relative;
        height: var(--vh-100);
    }
    
    .scene {
        position: relative;
        inset: auto;
        height: auto;
    }
    .scene:nth-of-type(2n) {
        background-color: var(--color-gray-100);
    }
    .scene.stars-section {
        background-color: var(--color-blue-600);
    }
    .scene.academy-section {
        background: none;
    }
    .stars-section {
        min-height: calc( 50vw + 150px);
    }
    .academy-section {
        min-height: calc( 50vw + 360px);
    }
    .stars-section .container {
        padding-bottom: 32px;
    }
    

    /* footer */
    .footer {
        /* position: relative; */
    }
    main ~ .footer {
        /* transform: translateY(0%); */
    }

    /* key */
    .key-content {
        grid-template-columns: 1fr 200px;
        padding-top: 32px;
        gap: 32px;
    }
    .key-pie .pie .pie-num {
        font-size: 80px;
    }
    .key-pie .pie .pie-unit {
        font-size: 32px;
    }

    
    /* ff */
    .ff-content {
        flex-direction: column-reverse;
        padding-top: 32px;
        gap: 32px;
    }
    .ff-left {
        width: 100%;
        margin-bottom: 48px;
    }
    .ff-swiper {
        margin-top: 0;
    }

    /* star */
    .stars-content-wrap {
        inset: 30% 25% 0 25%;
    }
    .star-slide[aria-label="5 / 12"] {
        margin-top: 0;
    }

    /* age */
    .age-wrap {
        flex-direction: column;
        padding: 32px 0;
        gap: 48px;
    }
    .age-guide-wrap {
        width: 100%;
        max-width: 600px;
    }
    .age-guide-tag {
        font-size: 48px;
    }
    .age-guide-togglers-wrap {
        width: 100%;
        position: relative;
    }
    .age-guide-togglers-wrap .age-bg-circle {
        inset: 0 -32px;
        border-radius: 0;
        display: none;
    }
    .age-guide-togglers {
        grid-template-columns: repeat(4, 1fr);
        max-width: none;
        gap: 6px;
    }
    .age-guide-toggler-wrap:nth-of-type(n + 3) {
        border-top: none;
    }
    .age-guide-toggler-wrap:nth-of-type(n) {
        border-left: none;
        background: var(--color-blue-500);
    }
    
    /* news */
    .news-section {
        min-height: auto;
    }
    .news-swiper-wrapper {
        width: 90%;
        margin: 48px 0 24px;
    }
}

/* mobile */
@media screen and (max-width: 768px) {
    :root {
        --fs-3xl: 48px;
        --fs-2xl: 32px;
        --fs-xl: 28px;
        --fs-lg: 24px;
        --fs-md: 20px;
        --fs-sm: 18px;
        --fs-xs: 16px;
    
        --space: 32px;
    }
    .show-sm {
        display: initial;
    }
    .container {
        max-width: 1120px;
        padding: 64px var(--space);
    }
    header.in-content {
        background-color: white;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    }
    header .container {
        padding: 16px var(--space) 12px;
    }

    /* topic */
    .topic-section .container {
        justify-content: flex-end;
        align-items: center;
    }
    #topic .container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-right: 32px;
        padding-bottom: 64px;
    }
    .topic-section .pie {
        width: 100%;
    }
    .pie-right {
        width: 100%;
        margin: 0 auto;
        justify-content: center;
    }
    .topic-section .pie-title-right {
        text-align: center;
    }
    .topic-section .pie-title-right br {
        display: initial;
    }
    .topic-title {
        width: 100%;
        max-width: 400px;
        font-size: 30px;
        text-align: center;
        margin: 0 auto;
    }
    .topic-title > * {
        inset: auto 0 100px;
    }
    .topic-bg {
        object-position: 63% 50%;
    }
    .topic-linear {
        inset: 0;
        background: linear-gradient(to top, #ffffff, #ffffff00);
    }
    .topic-logos {
        top: auto;
        bottom: 75px;
        right: 0;
        left: 0;
        padding: 18px 32px;
        gap: 24px;
        justify-content: center;
    }
    .topic-logos img {
        height: 54px;
    }
    .topic-logos img:last-of-type {
        height: 32px;
    }
    .mouse {
        width: 60px;
        height: 60px;
        font-size: 12px;
        inset: auto 0 24px;
    }
    .mouse .icon-down {
        inset: auto 0 8px;
    }

    /* .section-title */
    .section-title {
        font-size: 24px;
        margin-right: -32px;
    }
    .key-section:nth-of-type(n + 2) .section-title-wrap {
        display: none;
    }

    /* key */
    .key-content {
        grid-template-columns: 1fr;
        padding-top: 32px;
    }
    .key-pie {
        order: -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    .key-pie .pie {
        width: 65%;
        min-width: 200px;
    }
    .key-pie .pie-title {
        text-align: center;
        font-size: var(--fs-xl);
        color: var(--color-blue-500);
    }
    .key-pie .pie-length {
        stroke-width: 3px;
    }
    .key-pie .key-pie-icon-next {
        display: block;
    }
    .key-survey-title {
        text-align: center;
        font-size: var(--fs-md);
        color: var(--color-gray-500);
        flex-direction: column;
        align-items: center;
    }

    /* bricks */
    .bricks {
        grid-template-columns: repeat(20, 1fr);
        grid-template-rows: repeat(15, 1fr);
    }

    /* quadrant */
    .quadrant-area:nth-child(5) {
        font-size: 16px;
        padding: 6px;
        text-align: center;
    }
    .chart-quadrant + .chart-list li {
        grid-template-columns: 1.25em 100px 1fr;
    }
    .chart-quadrant + .chart-list li span:first-child {
        background-color: var(--color-blue-500);
    }
    .chart-quadrant + .chart-list li span:last-child {
        text-align: left;
    }

    /* ff */
    .ff-left {
        margin-left: -32px;
        margin-top: 0;
    }
    .ff-swiper {
        width: calc(100% + 32px);
        padding-bottom: calc(100% + 32px);
    }
    .ff-slide {
        padding: 12% 12% 16% 12%;
    }
    .ff-slide h3 {
        text-align: center;
    }
    .ff-slide h4 {
        gap: 6px;
        justify-content: center;
    }
    .ff-slide h4 span {
        margin-bottom: 16px;
    }
    .ff-swiper-button {
        width: 50px;
        height: 50px;
    }
    .ff-swiper .swiper-button-prev {
        top: 90%;
    }
    .ff-swiper .swiper-button-next {
        top: 90%;
    }

    /* age */
    .age-guide-togglers-wrap {
        width: calc(100% + 64px);
    }
    .age-guide-toggler {
        padding: 20px 12px 6px 12px;
        white-space: nowrap;
        justify-content: space-between;
        line-height: 1.2;
        font-size: var(--fs-sm);
    }
    .age-guide-toggler h4 {
        max-width: 3em;
        white-space: initial;
    }

    /* star */
    .stars-roulette {
        margin-bottom: 32px;
    }
    .stars-wrap {
        inset: 0% -5% auto -5%;
    }
    .stars-wrap .stars-svg {
        inset: 1%;
    }
    .stars-wrap .half-circle {
        width: 75%;
    }
    .stars-content-wrap {
        inset: 30% 25% 0 25%;
    }
    .star-slide[aria-label="5 / 12"] {
        margin-top: 0;
    }

    /* news */
    .news-swiper-wrapper {
        width: 75%;
    }
    
    
    /* academy */
    .academy-section .container {
        justify-content: flex-start;
        padding-top: 48px;
    }
    .academy-bg {
        height: 100%;
    }
    .academy-bg img {
        height: 68%;
        top: auto;
        object-position: 68% 50%;
    }
    .academy-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, #FFF 41.62%, rgba(255, 255, 255, 0.00) 50.21%);
    }

    /* article */
    .article-age {
        padding-top: 55px;
    }
    .article-bg::after {
        background: linear-gradient(180deg, rgba(0, 121, 121, 0.00) 16%, #007979 100%);
    }
    .article-header {
        min-height: 360px;
    }
    .article-body p {
    }
    .article-name {
        flex-direction: column;
        align-items: flex-start;
    }
    .article-name .age-name {
        font-size: var(--fs-lg);
    }
    /* chart-bar */
    .chart-bar-group-name {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px 0;
        text-align: left;
        width: fit-content;
        margin: 0 auto;
    }
    .chart-bar-group-name li.on-age {
        font-size: 16px;
    }
    .chart-bar-body {
        margin-left: 60px;
        margin-top: 36px;
    }

    /* article end */
    .retire-score-wrap {
        flex-direction: column-reverse;
    }
    .expert-title {
        display: flex;
        flex-direction: column;
    }
    .article-goto-btn {
        flex-direction: column-reverse;
        align-items: flex-end;
    }
    .article-goto-btn.goto-prev {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    /* .news-list */
    .news-list {
        grid-template-columns: repeat(3, 1fr);
    }
    /* .article-academy */
    .article-academy {
        padding-bottom: 45%;
        height: 280px;
        box-sizing: content-box;
    }
    .article-academy img {
        height: 75%;
        top: auto;
        object-position: 69% 50%;
    }
    .article-academy .container {
        justify-content: flex-start;
        padding-top: 12px;
    }
}

@media screen and (max-width: 560px) {

    /* star */
    .stars-roulette {
        height: calc(110vw);
    }
    .stars-wrap {
        inset: 0% -90% auto -90%;
        width: 180%;
        padding-bottom: 180%;
    }
    .stars-wrap .stars-svg {
        inset: 2%;
    }
    .stars-wrap .half-circle {
        width: 72%;
    }
    .stars-content-wrap {
        inset: 30% 10% 0 10%;
    }

    /* news */
    #news-sec .news-list {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}