@media screen and (min-width: 2561px) {
  :root {
    --header-height: 80px;
  }
  html, body {
    font-size: 104%;
  }
}
@media screen and (max-width: 1280px) {
  html, body {
    font-size: 96%;
  }
  /*** FOOTER 1280 ***/
  /*** MAIN 1280 ***/
  /*** COMMON 1280 ***/
  body {
    background-position: 100% var(--header-height);
    background-size: contain;
  }
  .story-7 .cont-01 .img-wrap2 {
    margin-top: -20rem;
  }
  .story-8 .cont-05 {
    margin-top: 0;
  }
}
@media screen and (max-width: 1024px) {
  :root {
    --header-height: 64px;
  }
  html, body {
    font-size: 94%;
  }
  .only-desktop {
    display: none !important;
  }
  .only-tablet-mobile {
    display: block !important;
  }
  /*** HEADER 1024 ***/
  .header .gnb {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  /*** FOOTER 1024 ***/
  .footer.main {
    --side-width: 16rem;
  }
  .footer.main .b-cont {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  /*** MAIN 1024 ***/
  main section {
    --swiper-button-size: 3.25rem;
    --swiper-navigation-size: 30px;
  }
  main .main-title h1 {
    font-size: 2rem;
  }
  main .main-title h1 img {
    max-height: 1.875rem;
  }
  .section-hero {
    padding-inline: 0;
  }
  .main-hero {
    --block-w: 4.5rem;
    --block-h: 4rem;
    width: 100%;
  }
  .main-hero .swiper-controls {
    --swiper-navigation-size: 1.5rem;
    width: auto;
  }
  .main-hero .swiper-pagination-dots {
    display: none;
  }
  .main-hero .swiper-controls .swiper-paging-info {
    gap: 1.25rem;
    padding-inline: 0.25rem;
  }
  .section-topic {
    padding-top: 8rem;
  }
  .main-topic .item {
    padding-inline: 0.5rem;
    max-width: 574px;
  }
  .main-topic .item .title {
    margin-top: 1.5rem;
    font-size: 1.375rem;
  }
  .section-story,
  .section-timeline {
    padding-bottom: 8rem;
  }
  .story-swiper .swiper-slide {
    width: 15.25rem !important;
  }
  .story-swiper .title {
    bottom: 1rem;
    padding-inline: 1.5rem;
    font-size: 2.5rem;
  }
  /*** COMMON 1024 ***/
  .mt-20 {
    margin-top: 7rem !important;
  }
  .mb-35 {
    margin-bottom: 10.5rem !important;
  }
  .mb-25 {
    margin-bottom: 8.5rem !important;
  }
  .mb-30 {
    margin-bottom: 10rem !important;
  }
  /*** SUB 1024 ***/
  /* Timeline */
  .timeline-header.main-topic {
    --timeline-header-space: 720px;
  }
  .timeline-header.main-topic h2 {
    left: 0;
    padding-inline: 0;
    font-size: 1.75rem;
  }
  .timeline-header.main-topic .bodycopy-md p {
    font-size: 1rem;
  }
  .timeline-header.main-topic .thumb {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-inline: 0.5rem;
  }
  .timeline-header.main-topic .thumb.active {
    padding-inline: 2rem;
  }
  .timeline-header.main-topic .thumb.active h2 {
    width: 100%;
  }
  .timeline-header.main-topic .thumb.active .more {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
  .timeline-wrap {
    --timeline-space: 3rem;
  }
  .timeline-wrap .scrollIndicator {
    width: 6px;
  }
  .timeline {
    padding-top: 3rem;
  }
  .timeline .month-sep {
    margin-bottom: 3rem;
  }
  .timeline section.row-2 article:after {
    display: none;
  }
  .timeline section.row-2 article:nth-child(2) {
    padding-bottom: 2rem;
  }
  .timeline section.row-2-2 article:before {
    display: none;
  }
  .timeline section.row-2-2 article:nth-child(2) {
    padding-bottom: 2rem;
  }
  .timeline section.row-3 article:nth-child(2) {
    padding-top: 2rem;
  }
  .timeline section.row-3 article:nth-child(3) {
    padding-top: 4rem;
  }
  .timeline section.row-4 article {
    width: 50%;
  }
  .timeline section.row-4 article:nth-child(2) {
    padding-top: 2rem;
  }
  .timeline section.row-4 article:nth-child(3) {
    padding-top: 4rem;
  }
  .timeline section.row-4 article:nth-child(4) {
    padding-top: 2rem;
  }
  .timeline section.row-5 article {
    width: 33.3333%;
  }
  .timeline section.row-5 article:nth-child(2) {
    padding-top: 2rem;
  }
  .timeline section.row-5 article:nth-child(3) {
    padding-top: 3rem;
  }
  .timeline section.row-5 article:nth-child(4) {
    padding-top: 4rem;
  }
  .timeline section.row-5 article:nth-child(5) {
    padding-top: 5rem;
    padding-bottom: 2rem;
  }
  /* Storytelling */
  .storytelling-index .contain {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .storytelling-index .sub-title {
    width: 100%;
  }
  .storytelling-index .index-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-column-gap: 0.75rem;
       -moz-column-gap: 0.75rem;
            column-gap: 0.75rem;
    max-height: unset;
  }
  .storytelling-index .index-list a {
    padding-inline: 0;
    width: calc(50% - 0.375rem);
  }
  .storytelling-index .bg-list {
    height: 32rem;
  }
  .storytelling {
    --side-space: 5rem;
  }
  .storytelling .sub-title .back-to-list {
    --button-size: 3.5rem;
    --icon-size: 3.5rem;
  }
  .storytelling .sub-title .title {
    font-size: 2.75rem;
    line-height: 1.25em;
  }
  .storytelling .title-xxl {
    font-size: 2.375rem;
  }
  .storytelling .bodycopy-xl p {
    font-size: 1.375rem;
  }
  .storytelling .img-description {
    font-size: 0.9375rem;
  }
  .storytelling .quote {
    font-size: 2.75rem;
  }
  .storytelling .quote.sm {
    font-size: 2.375rem;
  }
  .top-visual {
    height: 24rem;
  }
  .story-content {
    --storytelling-x-space: 1.5rem;
  }
  .story-1 .cont-01 .inner-cont,
  .story-1 .cont-01 .inner-cont .bodycopy-xl {
    grid-column: 2/span 14;
  }
  .story-1 .cont-03 {
    margin-top: 1.5rem;
  }
  .story-1 .cont-03 .inner-grid {
    gap: 1.5rem;
    grid-column: 11/-1;
  }
  .story-1 .cont-03 .img-wrap3 .img-description {
    margin-inline: auto !important;
    padding-inline: 0;
  }
  .story-2 .cont-02 {
    margin-top: 0;
  }
  .story-5 .cont-05 {
    margin-top: 0;
  }
  .story-8 .cont-05 {
    margin-top: 2rem;
  }
  .story-8 .cont-07 {
    margin-top: -4rem;
  }
  .story-9 .cont-05 {
    margin-top: -4rem;
  }
  .story-9 .cont-05 .img-wrap1 {
    grid-column: 2/span 8;
  }
  .story-9 .cont-05 .img-wrap2 {
    margin-bottom: 120%;
    grid-column: 11/span 3;
  }
  .story-9 .cont-05 .img-wrap3 {
    grid-column: 15/span 5;
  }
  .gallery-list ul,
  .gallery-list.col-6 ul,
  .gallery-list.col-5 ul {
    --num: 4;
  }
  .gallery-list a {
    padding-inline: 0;
    max-width: 15rem;
  }
  .form-control-wrap:has(input.ico-datepicker) {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --wrapper-padding-x: 16px;
  }
  html, body {
    font-size: 92%;
  }
  .only-desktop-tablet {
    display: none !important;
  }
  .only-mobile {
    display: block !important;
  }
  /*** HEADER 768 **/
  .header .logo {
    padding-right: 4rem;
  }
  .header .logo img,
  .header .mo-logo img {
    width: 170px;
    height: 26px;
  }
  .header .head-nav {
    display: none;
  }
  .header .all-menu-wrap {
    display: block;
  }
  .header .all-menu-wrap.is-open .all-menu {
    position: fixed;
  }
  /*** FOOTER 768 ***/
  .footer.main {
    --line-width: 1.5rem;
    --side-width: 2.5rem;
    --top-button-size: 2.75rem;
  }
  .footer.main .contain,
  .footer.main .contain-wide,
  .footer.main .contain-u-wide {
    padding-inline: calc(var(--line-width) + 0.5rem) calc(var(--line-width) + 1rem);
  }
  .footer.main .t-cont,
  .footer.main .b-cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
  .footer.main .l-cont:before, .footer.main .l-cont:after {
    --line-width: 2rem;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .footer.main .l-cont,
  .footer.main .r-cont {
    padding-top: calc(var(--line-width) + 1.625rem + 50px);
  }
  .footer.main .t-cont {
    min-height: 0rem;
  }
  .footer.main .b-cont {
    margin-top: 3rem;
  }
  .footer.main .b-cont:after {
    --line-width: 2rem;
  }
  .footer.main .b-cont .copyright {
    width: 100%;
  }
  .footer.main .foot-logo img {
    height: 28px;
  }
  .footer.main .supporter-logo-1 {
    position: absolute;
    top: calc(var(--line-width) + 1.625rem);
    left: var(--side-width);
    width: 130px;
  }
  .footer.main .supporter-logo-2 {
    width: 150px;
  }
  .footer.main addrres {
    width: 100%;
  }
  .footer.main .nav-cont {
    margin-top: 2.5rem;
  }
  .footer.main .depth-1 a {
    font-size: 1.25rem;
  }
  .footer.sub {
    --top-button-size: 2.75rem;
  }
  .footer.sub .contain-wide {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .footer.sub .contain-wide:nth-child(1) {
    row-gap: 1.5rem;
    padding-block: 3.5rem 2rem;
  }
  .footer.sub .contain-wide:nth-child(2) {
    row-gap: 0.75rem;
    padding-block: 2rem 3.5rem;
  }
  .footer.sub .right-info {
    text-align: left;
  }
  .footer.sub .depth-1 a {
    font-size: 1.25rem;
  }
  .btn-top {
    right: 0.5rem;
    font-size: 1rem;
  }
  /*** MAIN 768 ***/
  main {
    --sideband-width: .625rem;
  }
  main section {
    --swiper-button-size: 2.25rem;
    --swiper-navigation-size: 20px;
  }
  main section .main-title {
    margin-bottom: 2rem;
  }
  main section .main-title .title-ye {
    font-size: 1.75rem;
  }
  main section .main-title .title-wh {
    font-size: 1.375rem;
  }
  main section .main-title .desc {
    font-size: 1rem;
  }
  .section-banner .swiper-controls {
    right: 0.5rem;
    bottom: 0.5rem;
    padding-block: 0.25rem;
  }
  .main-hero {
    --block-w: 3rem;
    --block-h: 3rem;
  }
  .section-story {
    --swiper-button-size: 2.25rem;
    --swiper-navigation-size: 20px;
  }
  .section-story .main-title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .section-story .main-title h1 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
  }
  .section-story .swiper-controls {
    display: none !important;
    margin-left: auto;
  }
  .section-story .story-swiper .title {
    max-height: 8.25em;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.375em;
  }
  .section-timeline .main-title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .section-timeline .main-title h1 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
  }
  .section-timeline .main-title h1 span {
    width: calc(100% - 3rem);
  }
  .section-timeline .swiper-controls {
    display: none !important;
    margin-left: auto;
  }
  .timeline-swiper .number-wrap {
    padding: var(--space) calc(var(--space) - 0.375rem);
  }
  .timeline-swiper .number {
    font-size: 3.5rem;
    letter-spacing: -0.06em;
  }
  .timeline-swiper .pic-wrap {
    min-height: 36rem;
  }
  .timeline-swiper .pic {
    max-width: 120px;
    aspect-ratio: 1;
  }
  /*** COMMON 768 ***/
  #wrapper {
    padding-top: var(--header-height);
  }
  body {
    background-size: auto 20rem;
  }
  .mt-6 {
    margin-top: 2rem !important;
  }
  .mt-7 {
    margin-top: 2.5rem !important;
  }
  .mt-8 {
    margin-top: 2.5rem !important;
  }
  .mt-9 {
    margin-top: 3rem !important;
  }
  .mt-10 {
    margin-top: 3.5rem !important;
  }
  .mt-20 {
    margin-top: 5rem !important;
  }
  .mb-6 {
    margin-bottom: 2rem !important;
  }
  .mb-7 {
    margin-bottom: 2.5rem !important;
  }
  .mb-8 {
    margin-bottom: 2.5rem !important;
  }
  .mb-9 {
    margin-bottom: 3rem !important;
  }
  .mb-10 {
    margin-bottom: 3.5rem !important;
  }
  .mb-15 {
    margin-bottom: 5rem !important;
  }
  .mb-16 {
    margin-bottom: 5rem !important;
  }
  .mb-18 {
    margin-bottom: 5rem !important;
  }
  .mb-20 {
    margin-bottom: 5.5rem !important;
  }
  .mb-25 {
    margin-bottom: 6rem !important;
  }
  .mb-30 {
    margin-bottom: 7rem !important;
  }
  .mb-35 {
    margin-bottom: 7rem !important;
  }
  .mr-6 {
    margin-right: 2rem !important;
  }
  .mr-7 {
    margin-right: 2.5rem !important;
  }
  .mr-8 {
    margin-right: 2.5rem !important;
  }
  .mr-9 {
    margin-right: 3rem !important;
  }
  .mr-10 {
    margin-right: 3.5rem !important;
  }
  .ui-button.xl {
    min-height: 4.375rem;
    font-size: 1.375rem;
  }
  .ui-button.xl {
    min-height: 3.5rem;
    font-size: 1.25rem;
  }
  .ui-button.wide {
    max-width: 100%;
  }
  .sub-title .title {
    font-size: 2rem;
  }
  .sub-tabs:has(.swiper-menu) {
    margin-inline: calc(var(--wrapper-padding-x) * -1);
    padding-inline: var(--wrapper-padding-x);
  }
  .sub-tabs:has(.swiper-menu) ul {
    --gap: 1px;
  }
  .sub-tabs ul li :where(a, button) {
    min-height: 2.5rem;
    font-size: 1rem;
  }
  .third-tabs.mt-4 {
    margin-top: 1.25rem !important;
  }
  .third-tabs ul {
    --gap: .5rem .375rem;
  }
  .third-tabs ul li :where(a, button) {
    padding-inline: 1rem;
    min-height: 2.5rem;
    font-size: 0.9375rem;
    font-weight: 400;
  }
  .third-tabs ul li:where(:hover, :focus) :where(a, button) {
    border-color: #FFCD47;
    color: #FFCD47;
  }
  .third-tabs ul li.is-active :where(a, button) {
    border-color: #656565;
    background-color: #FFCD47;
    color: #000;
    text-decoration: none;
  }
  .title-lg {
    font-size: 24px;
  }
  .title-md {
    font-size: 20px;
  }
  .title-sm {
    font-size: 18px;
  }
  .title-xs {
    font-size: 16px;
  }
  .badge {
    font-size: 11px;
    line-height: 12px;
  }
  .modal-popup-header .title {
    min-height: 3rem;
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
  .modal-popup.message .modal-popup-header {
    padding-inline: 1.5rem;
  }
  .modal-popup.message .modal-popup-header .title {
    padding-block: 1.75rem 1rem;
  }
  .modal-popup.message.alert .modal-popup-body .body-area {
    padding-inline: 1.5rem;
    padding-bottom: 1.5rem;
  }
  /*** SUB 768 ***/
  .bg-visual {
    height: 30rem;
  }
  .bg-visual .bar {
    height: 1rem;
  }
  .sub-head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-block: 1.75rem;
  }
  .sub-head .sub-title .title {
    font-size: 2.25rem;
  }
  .sub-head .head-content {
    width: 100%;
  }
  .sub-head .keywords {
    max-width: 100%;
  }
  .sub-head .keywords a {
    font-size: 0.75rem;
  }
  .drop-menu .path {
    width: 100%;
  }
  .drop-menu .path button {
    background-size: 1.25rem auto;
  }
  .purpose .flexy-cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
  }
  .purpose .l-cont {
    width: 100%;
  }
  .purpose .title-xl {
    line-height: 1.25em;
  }
  /* Timeline */
  .timeline-header.main-topic {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: var(--timeline-header-space);
  }
  .timeline-header.main-topic h2 {
    font-size: 1.5rem;
  }
  .timeline-header.main-topic .bodycopy-md p {
    font-size: 13px;
  }
  .timeline-header.main-topic .thumb {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 0.75rem;
    height: auto;
  }
  .timeline-header.main-topic .thumb.active {
    padding-inline: 1.5rem;
  }
  .timeline-header.main-topic .thumb.active h2 {
    width: 100%;
  }
  .timeline-header.main-topic .thumb.active .more {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
  .timeline .month-sep > .title-md {
    margin-bottom: 0.625rem;
    padding-top: 1.25rem;
    font-size: 1.75rem;
  }
  .media-swiper .swiper-slide.video .thumb:after {
    background-size: 4rem;
  }
  /* Storytelling */
  .storytelling-index .index-list a {
    font-size: 1rem;
  }
  .storytelling-index .bg-list {
    height: 24rem;
  }
  .storytelling {
    --side-space: 4rem;
    padding-top: 0;
  }
  .storytelling .sub-title {
    margin-bottom: 0;
  }
  .storytelling .sub-title .back-to-list {
    --button-size: 2.5rem;
    --icon-size: 2.5rem;
    left: 0.75rem;
  }
  .storytelling .sub-title .title {
    font-size: 2rem;
  }
  .storytelling .sub-title.type-2 {
    position: relative;
  }
  .storytelling .sub-title.type-2 .title {
    padding-inline: 0;
  }
  .storytelling .title-xxl {
    font-size: 1.875rem;
  }
  .storytelling .bodycopy-xl p {
    font-size: 1.125rem;
  }
  .storytelling .img-description {
    font-size: 0.875rem;
  }
  .storytelling .img-description.lg {
    font-size: 1.25rem;
  }
  .storytelling .quote {
    font-size: 2rem;
  }
  .storytelling .quote.sm {
    font-size: 1.875rem;
  }
  .top-visual {
    margin-left: 16px;
    height: 18rem;
  }
  .story-content {
    --storytelling-x-space: 0;
  }
  .story-content .cont-00 .bodycopy-xl {
    margin-left: 16px;
  }
  .story-1 .cont-01 .inner-cont,
  .story-1 .cont-01 .inner-cont .bodycopy-xl {
    grid-column: 2/-2;
  }
  .story-1 .cont-01 .img-wrap1 {
    margin-inline: 3rem;
  }
  .story-1 .cont-01 .img-wrap2 {
    grid-column: 4/-4;
  }
  .story-1 .cont-01 .mt-30 {
    margin-top: 4rem !important;
  }
  .story-1 .cont-02 .img-wrap1 {
    grid-column: 1/-1;
  }
  .story-1 .cont-02 .bodycopy-xl {
    grid-column: 10/-2;
  }
  .story-1 .cont-03 {
    margin-top: 3.5rem;
  }
  .story-1 .cont-03 .inner-grid.mb-4 {
    margin-bottom: 4rem !important;
    padding-inline: 16px;
    grid-column: 1/-1;
  }
  .story-1 .cont-03 .img-wrap2 {
    grid-column: 1/-5;
  }
  .story-1 .cont-03 .img-wrap3 {
    grid-column: 5/-1;
  }
  .story-1 .cont-03 .bodycopy-xl {
    grid-column: 4/-2;
  }
  .story-1 .cont-03 .img-wrap1 {
    padding-right: var(--storytelling-x-space);
    grid-column: 8/-1;
  }
  .story-1 .cont-04 .img-wrap1 {
    grid-column: 4/-4;
  }
  .story-1 .cont-05 .img-wrap1 {
    grid-column: 4/span 14;
  }
  .story-1 .cont-05 .img-wrap1 .img-description {
    padding-right: 10%;
  }
  .story-1 .cont-05 .bodycopy-xl {
    margin-top: 4rem;
    grid-column: 4/-2;
  }
  .story-1 .cont-05 .inner-grid {
    --grid-columns: 24;
    margin-top: 2rem;
    grid-column: 1/span 24;
  }
  .story-1 .cont-05 .img-wrap2 {
    margin-top: 2rem;
    grid-column: 9/-2;
  }
  .story-2 .cont-01 .img-wrap1 {
    grid-column: 4/span 12;
  }
  .story-2 .cont-01 .bodycopy-xl {
    margin-top: 4rem;
    grid-column: 4/-2;
  }
  .story-2 .cont-02 .img-wrap1 {
    margin-top: 0;
    grid-column: 1/-9;
  }
  .story-2 .cont-02 .img-wrap2 {
    margin-top: 1rem;
    grid-column: 10/-2;
  }
  .story-2 .cont-02-2 {
    margin-top: 4rem;
  }
  .story-2 .cont-02-2 .bodycopy-xl {
    grid-column: 4/-2;
  }
  .story-2 .cont-03 .image-wrap {
    grid-column: 4/span 14;
  }
  .story-2 .cont-03 .image-wrap .img-description {
    padding-left: 1rem !important;
  }
  .story-2 .cont-03 .bodycopy-xl {
    margin-top: 4rem;
    grid-column: 10/-2;
    grid-column: 4/-2;
  }
  .story-2 .cont-04 .img-wrap1.mb-25 {
    margin-bottom: 1.5rem !important;
    grid-column: 1/-3;
  }
  .story-2 .cont-04 .bodycopy-xl.fade-up {
    grid-column: 4/-2;
  }
  .story-2 .cont-04 .bodycopy-xl.fade-right {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    margin-top: 4rem;
    grid-column: 4/-2;
  }
  .story-2 .cont-04 .img-wrap2 {
    grid-column: 10/-2;
  }
  .story-2 .cont-05 .inner-cont {
    grid-column: 1/span 20;
  }
  .story-2 .cont-05 .bodycopy-xl {
    margin-left: 3.5rem;
  }
  .story-2 .cont-05 .img-wrap2 {
    margin-top: 4rem;
    grid-column: 10/-4;
  }
  .story-2 .cont-05 .img-wrap3 {
    margin-top: 2rem;
    grid-column: 4/-4;
  }
  .story-3 .cont-01 .img-wrap1 {
    grid-column: 5/-5;
  }
  .story-3 .cont-01 .bodycopy-xl {
    margin-top: 4rem;
    grid-column: 4/-2;
  }
  .story-3 .cont-02 .img-wrap1 {
    grid-column: 5/-1;
  }
  .story-3 .cont-03 .img-wrap1 {
    grid-column: 1/-9;
  }
  .story-3 .cont-03 .bodycopy-xl {
    margin-top: 4rem;
    grid-column: 4/-2;
  }
  .story-3 .cont-04 .img-wrap1 {
    grid-column: 1/-2;
  }
  .story-3 .cont-04 .img-wrap2 {
    margin-top: 4rem;
    grid-column: 10/-2;
  }
  .story-3 .cont-04 .bodycopy-xl {
    margin-block: 2rem 4rem !important;
    grid-column: 4/-2;
  }
  .story-3 .cont-05 .img-wrap1 {
    grid-column: 4/span 12;
  }
  .story-3 .cont-05 .bodycopy-xl {
    margin-top: 4rem;
    margin-bottom: 2rem;
    grid-column: 4/-2;
  }
  .story-3 .cont-06 .img-wrap1 {
    grid-column: 2/span 11;
  }
  .story-3 .cont-06 .img-wrap2 {
    grid-column: 14/-2;
  }
  .story-3 .cont-06 .img-description {
    min-height: 7em;
  }
  .story-3 .cont-07 .img-wrap1.mb-25 {
    margin-bottom: 4rem !important;
    grid-column: 4/-1;
  }
  .story-3 .cont-10 .inner-cont {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .story-3 .cont-10 img-wrap1 {
    width: 100%;
  }
  .story-3 .cont-10 .img-wrap2, .story-3 .cont-10 .img-wrap3 {
    width: 44%;
  }
  .story-3 .cont-11 .bodycopy-xl {
    margin-bottom: 4rem;
    grid-column: 4/-2;
  }
  .story-3 .cont-11 .img-wrap1 {
    grid-column: 10/-4;
  }
  .story-3 .cont-11 .img-wrap2 {
    margin-top: 2rem;
    grid-column: 1/-9;
  }
  .story-4 .cont-02 .img-wrap1 {
    margin-bottom: 4rem;
    grid-column: 5/-5;
  }
  .story-4 .cont-02 .img-wrap4 {
    margin-bottom: 4rem;
    grid-column: 5/-5;
  }
  .story-4 .cont-02 .img-wrap2 {
    grid-column: 2/-13;
  }
  .story-4 .cont-02 .img-wrap3 {
    grid-column: 13/-2;
  }
  .story-4 .cont-04 .img-wrap1 {
    margin-bottom: 2rem;
    grid-column: 4/-6;
  }
  .story-4 .cont-04 .bodycopy-xl.fade-down {
    grid-column: 4/-2;
  }
  .story-5 .cont-01 .img-wrap1 {
    margin-bottom: 4rem;
    grid-column: 4/-6;
  }
  .story-5 .cont-01 .bodycopy-xl {
    grid-column: 4/-2;
  }
  .story-5 .cont-02 .img-wrap1 {
    grid-column: 2/span 11;
  }
  .story-5 .cont-02 .img-wrap2 {
    grid-column: 14/-2;
  }
  .story-5 .cont-03 .bodycopy-xl {
    grid-column: 4/-2;
  }
  .story-5 .cont-04 .inner-cont {
    margin-bottom: 4rem;
    grid-column: 5/-5;
  }
  .story-5 .cont-04 .img-wrap1 {
    grid-column: 4/-6;
  }
  .story-5 .cont-04 .bodycopy-xl {
    margin-top: 4rem;
    grid-column: 10/-2;
  }
  .story-5 .cont-05 {
    margin-top: 0;
  }
  .story-5 .cont-05 .img-wrap1 {
    margin-top: 4rem;
    grid-column: 4/-1;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .story-5 .cont-05 .inner-cont {
    margin-top: 6rem;
    grid-column: 3/-2;
  }
  .story-6 .cont-01 .img-wrap1 {
    grid-column: 4/-6;
  }
  .story-6 .cont-01 .bodycopy-xl {
    margin-bottom: 4rem;
    grid-column: 4/-2;
  }
  .story-6 .cont-02 .img-wrap1 {
    grid-column: 1/-1;
  }
  .story-6 .cont-03 .img-wrap1 {
    margin-bottom: 4rem;
    grid-column: 4/-6;
  }
  .story-6 .cont-03 .bodycopy-xl {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    grid-column: 4/-2;
  }
  .story-6 .cont-04 .img-wrap1 {
    grid-column: 10/-2;
  }
  .story-6 .cont-05 .title-xxl {
    grid-column: 4/-6;
  }
  .story-6 .cont-05 .bodycopy-xl {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    grid-column: 4/-2;
  }
  .story-7 .cont-01 .img-wrap1 {
    grid-column: 4/-4;
    margin-bottom: 6rem;
  }
  .story-7 .cont-01 .inner-cont {
    grid-column: 10/-2;
  }
  .story-7 .cont-01 .inner-cont .bodycopy-xl {
    margin-bottom: 4rem;
  }
  .story-7 .cont-01 .img-wrap2 {
    margin-top: 2rem;
    grid-column: 1/-9;
  }
  .story-7 .cont-03 .bodycopy-xl {
    grid-column: 4/-2;
  }
  .story-7 .cont-04 .bodycopy-xl {
    grid-column: 4/-2;
  }
  .story-7 .cont-04 .img-wrap1 {
    grid-column: 1/-9;
  }
  .story-7 .cont-04 .img-wrap2 {
    margin-top: 2rem;
    grid-column: 4/-11;
  }
  .story-7 .cont-04 .img-wrap3 {
    margin-top: 2rem;
    grid-column: 15/-1;
  }
  .story-7 .cont-05 .inner-cont {
    grid-column: 3/-2;
  }
  .story-7 .cont-05 .img-wrap1 {
    grid-column: 1/-9;
  }
  .story-7 .cont-05 .bodycopy-xl {
    grid-column: 9/-2;
  }
  .story-7 .cont-05 .img-wrap2 {
    margin-top: 2rem;
    grid-column: 9/-1;
  }
  .story-7 .cont-06 .img-wrap1 {
    grid-column: 4/-6;
  }
  .story-7 .cont-06 .bodycopy-xl {
    margin-top: 4rem;
    grid-column: 4/-2;
  }
  .story-8 .cont-04 .img-wrap1 {
    grid-column: 2/span 6;
  }
  .story-8 .cont-04 .bodycopy-xl {
    grid-column: 9/-1;
  }
  .story-8 .cont-05 .img-wrap1 {
    margin-top: 4rem;
    grid-column: 2/-2;
  }
  .story-8 .cont-06 .img-wrap1 {
    grid-column: 4/-6;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-top: 4rem;
  }
  .story-8 .cont-06 .bodycopy-xl {
    grid-column: 4/-2;
  }
  .story-8 .cont-07 {
    margin-top: 2rem;
  }
  .story-8 .cont-07 .img-wrap1 {
    grid-column: 9/-1;
  }
  .story-9 .cont-01 .img-wrap1 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-top: 4rem;
    grid-column: 1/-9;
  }
  .story-9 .cont-01 .bodycopy-xl {
    grid-column: 4/-2;
  }
  .story-9 .cont-02 .bodycopy-xl {
    grid-column: 4/-2;
  }
  .story-9 .cont-03 .img-wrap1 {
    grid-column: 2/span 6;
  }
  .story-9 .cont-03 .img-wrap2 {
    grid-column: 9/-1;
  }
  .story-9 .cont-04 .bodycopy-xl {
    grid-column: 4/-2;
  }
  .story-9 .cont-05 {
    margin-top: 4rem;
  }
  .story-9 .cont-05 .img-wrap1 {
    grid-column: 2/span 16;
  }
  .story-9 .cont-05 .img-wrap2 {
    margin-top: 2rem;
    grid-column: 9/span 6;
  }
  .story-9 .cont-05 .img-wrap3 {
    grid-column: 16/-1;
  }
  .card-swiper .img-description {
    margin-top: 1rem;
  }
  .marquee-bg-wrap {
    margin-bottom: 6rem;
  }
  .marquee-bg-wrap .marquee-bg {
    height: 100%;
  }
  .marquee-bg-wrap .marquee-bg.bg3 img {
    max-width: unset;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .marquee-container .marquee {
    font-size: 3rem;
  }
  .detail-view {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-block: 0 2rem;
  }
  .detail-view .sub-tabs {
    width: 100%;
  }
  .sub-tabs ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    border-bottom: 1px solid #eee;
  }
  .sub-tabs ul li {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    margin-bottom: -1px;
    border-bottom-color: #eee;
  }
  .sub-tabs ul li.is-active {
    border-right-color: transparent;
    border-bottom-color: #000;
    background-color: #fff;
  }
  .search-form-wrap {
    padding-top: 3rem;
  }
  .search-form-wrap .inner-cont .search-logo {
    height: 44px;
  }
  /* Topic contents */
  body:has(.topic) .align-right {
    padding-inline: 1.5rem;
  }
  body:has(.topic) .list-top:after {
    inset-inline: -1.5rem;
  }
  .topic {
    padding-bottom: 5rem;
  }
  .topic .gallery-list a {
    width: 90%;
  }
  .topic-category .breadcrumb li:not(:last-child) {
    display: none;
  }
  .detail-view-head .sub-title .title {
    font-size: 1.75rem;
  }
  .sub-title {
    margin-bottom: 2rem;
    padding-top: 3rem;
  }
  .sub-title .title-ye {
    font-size: 1.75rem;
  }
  .sub-title .title-wh {
    font-size: 1.375rem;
  }
  .sub-title .desc {
    font-size: 1rem;
  }
  .sub-cont {
    padding-bottom: 4rem;
  }
  /* Timeline */
  .timeline section.row-2 article:nth-child(2n), .timeline section.row-2-2 article:nth-child(2n) {
    padding-bottom: 0;
  }
  .timeline section.row-2 article:nth-child(2n),
  .timeline section.row-2 article:nth-child(4), .timeline section.row-2-2 article:nth-child(2n),
  .timeline section.row-2-2 article:nth-child(4), .timeline section.row-3 article:nth-child(2n),
  .timeline section.row-3 article:nth-child(4), .timeline section.row-4 article:nth-child(2n),
  .timeline section.row-4 article:nth-child(4), .timeline section.row-5 article:nth-child(2n),
  .timeline section.row-5 article:nth-child(4) {
    padding-top: 5rem;
  }
  .timeline section.row-3 article {
    width: 50%;
  }
  .timeline section.row-3 article:nth-child(3) {
    padding-top: 0;
  }
  .timeline section.row-4 article:nth-child(3) {
    padding-top: 0;
  }
  .timeline section.row-5 article {
    width: 50%;
  }
  .timeline section.row-5 article:nth-child(3) {
    padding-top: 0;
  }
  .timeline section.row-5 article:nth-child(5) {
    padding-top: 0;
    padding-bottom: 0;
  }
  .timeline .media-content .pic {
    width: 90%;
    max-width: 18rem;
    height: auto;
    aspect-ratio: 39/55;
  }
  .media-popup .inner {
    padding-block: 3rem 1.5rem;
  }
  .media-popup .text-content {
    margin-top: 1rem;
  }
  .media-popup .ui-button {
    margin-top: 1rem;
  }
  .result-txt {
    font-size: 1.125rem;
  }
  .board-list ul {
    border-bottom: 1px solid #FFCD47;
  }
  .board-list ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border-top: 1px solid #FFCD47;
  }
  .board-list ul li:first-child .info, .board-list ul li:first-child a {
    border-top: 0;
  }
  .board-list ul li .info,
  .board-list ul li a {
    position: static;
    padding-inline: 0;
    border-bottom: 0;
    width: 100%;
  }
  .board-list ul li .info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-block: 1.25rem 0.25rem;
  }
  .board-list ul li:has(.fix) .info {
    padding-left: 3.25rem;
  }
  .board-list ul li a {
    padding-block: 0.25rem 1.25rem;
  }
  .board-list ul li a:has(.fix) {
    padding-left: 0;
  }
  .board-list h3 {
    font-size: 1.125rem;
  }
  .board-list .fix {
    top: 1.25rem;
    left: 0;
    padding-inline: 0.5rem;
    font-size: 0.875rem;
    -webkit-transform: none;
            transform: none;
  }
  .gallery-list ul {
    --num: 2;
    --gap: 1rem;
  }
  .gallery-list .title {
    font-size: 1.125rem;
  }
  .gallery-list .gallery-list a {
    padding-inline: 0;
    max-width: 15rem;
  }
  .gallery-list.col-6 ul,
  .gallery-list.col-5 ul {
    --num: 2;
    --gap: 1rem;
  }
  .pagination {
    --button-size: 1.75rem;
  }
  .pagination .page-link {
    margin-inline: 1px;
  }
  .pagination .page-link.pagemove {
    font-size: 14px;
  }
  .detail-view-head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 2rem;
  }
  .detail-view-head .left-cont {
    width: 100%;
  }
  .detail-view-head .left-cont .title {
    display: block !important;
  }
  .detail-view-head .right-cont {
    width: 100%;
  }
  .related-data-view {
    padding-block: 2rem;
  }
  .data-table th,
  .data-table td {
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px ) {
  .main-hero {
    height: 32rem;
  }
  .section-hero {
    padding-top: 0 !important;
  }

  .main-hero .swiper-controls {
    --swiper-navigation-size: 2rem;
    --swiper-button-size: 2rem;
    width:auto;
  }

  .main-hero .swiper-controls button {
    background-size: contain;
  }
  .main-topic {
    gap:1rem;
  }

  .main-topic .item {
    width: 100%;
  }
  .section-story .story-swiper .title {
    font-size: 2rem;
  }
  .section-timeline .main-title {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
  }
  .section-timeline .main-title h1 span {
    width: auto;
  }

  .main-hero .swiper-controls .swiper-paging-info {
    background-size: contain;
  }
  .pin-spacer {
    padding-bottom: 252px !important;
  }
  .timeline-content {
    --num : 2;
  }
  .footer .supporter-logo {
    gap:2rem;
    flex-direction: column;
  }

  .footer .supporter-logo img {
    object-fit: contain;
  }

}