:root {
  --color-main: #7C6FD1;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-border: #e0e0e0;
  --shadow: 0 0 5px rgba(102, 102, 102, 0.20);
  --font-pretendard: "Pretendard", sans-serif;
  --font-redhatdisplay: "Red Hat Display", sans-serif;
  --th-background: #f9f9f9;
  --th-fontColor: #111;
  --th-fontSize: 1.7rem;
  --td-background: #f9f9f9;
  --td-fontColor: #222;
  --td-fontSize: 1.6rem;
}

.font70 {
  --fontsize: 7.0rem;
  font-size: var(--fontsize);
}

.font60 {
  --fontsize: 6.0rem;
  font-size: var(--fontsize);
}

.font50 {
  --fontsize: 5.0rem;
  font-size: var(--fontsize);
}

@media (max-width: 1760px) {
  .font70 {
    font-size: calc(var(--fontsize) * 0.88);
  }
  .font60,
  .font50 {
    font-size: calc(var(--fontsize) * 0.9);
  }
  .w1600,
  .w1720 {
    padding: 0 20px;
  }
  .sub-contents .history .list-box {
    width: calc(50% - 40px);
    flex-shrink: 0;
  }
}
@media (max-width: 1600px) {
  .font70 {
    font-size: calc(var(--fontsize) * 0.84);
  }
  .font60,
  .font50 {
    font-size: calc(var(--fontsize) * 0.86);
  }
  .site-map .depth1 > li {
    padding: 30px 20px;
  }
  .site-map .depth2 {
    max-width: 1000px;
  }
  main .visual .tab-title.shadow li button {
    padding: 0 25px;
  }
  main .event .box {
    padding: 40px 0 0;
    margin: 100px 0;
  }
  main .event .button-box {
    margin: 100px 0 0;
  }
  main .event .swiper-slide .text h5 {
    font-size: 2.5rem;
  }
  main .location .flex-box {
    column-gap: 40px;
  }
  main .location .text .transport > div {
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 10px;
  }
  main .location .text .transport h6 {
    width: 100%;
  }
  main .location .text .transport p {
    padding: 0;
  }
  .sub-contents .greeting .flex-box {
    column-gap: 40px;
  }
  .sub-contents .greeting .text .p-box p br {
    display: none;
  }
  .sub-contents .vision .mission .text {
    width: calc(50% - 20px);
    padding: 40px;
  }
  .sub-contents .vision .core .text {
    padding: 40px;
  }
  .sub-contents .history .list-box {
    width: 55%;
  }
  .sub-contents .facility .information .detail dl dd div:not(.flex-box) {
    flex-direction: column;
    row-gap: 5px;
    column-gap: 0;
  }
  .sub-contents .facility .guide .text {
    column-gap: 30px;
    padding: 0 20px;
  }
  .sub-contents .facility .guide .text ol {
    column-gap: 15px;
  }
  .sub-contents .library .information .item-box {
    column-gap: 40px;
  }
  .sub-contents .library .information .item-box .item {
    width: 440px;
  }
  .sub-contents .dl-box.dd100 dd:not(.paddingX) {
    padding: 0 30px;
  }
  .sub-contents .lecture .sub-flex > h5 {
    max-width: 400px;
  }
  .sub-contents .support .designated .text-box {
    padding: 40px;
  }
  footer .footer-box {
    column-gap: 20px;
  }
}
@media (max-width: 1400px) {
  .font70 {
    font-size: calc(var(--fontsize) * 0.76);
  }
  .font60,
  .font50 {
    font-size: calc(var(--fontsize) * 0.78);
  }
  .site-map .depth1 > li > a {
    width: 220px;
    flex-shrink: 0;
    font-size: 3.6rem;
  }
  .site-map .depth2 {
    max-width: inherit;
    grid-template-columns: repeat(5, 1fr);
  }
  main .visual .content {
    column-gap: 20px;
  }
  main .visual .slide-box .text {
    left: 40px;
    bottom: 60px;
  }
  main .visual .tab-title.shadow li button {
    font-size: 1.6rem;
    padding: 0 20px;
  }
  main .visual .tab-contents,
  main .visual .tab-contents::before {
    border-radius: 0 20px 30px 30px;
  }
  main .visual .tab-contents .item-box {
    padding: 20px 30px;
  }
  main .visual .tab-contents .item {
    padding: 10px 0 10px 15px;
  }
  main .visual .tab-contents .item::before {
    height: calc(100% - 40px);
  }
  main .visual .menu-box h6 {
    font-size: 1.5rem;
  }
  main .event .swiper-slide .img img {
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
  }
  main .board .item-box {
    column-gap: 40px;
  }
  main .location .map {
    width: 58%;
  }
  .sv .text {
    left: 40px;
    bottom: 40px;
  }
  .sub-contents .greeting .text h3 {
    font-size: 4.2rem;
  }
  .sub-contents .greeting .text h6 {
    margin: 30px 0 10px;
  }
  .sub-contents .vision .mission .text {
    width: 50%;
    height: 320px;
  }
  .sub-contents .vision .mission .text p {
    font-size: 3rem;
  }
  .sub-contents .vision .core .text p {
    font-size: 3rem;
  }
  .sub-contents .history .list-box {
    width: calc(50% - 40px);
  }
  .sub-contents .history .list dl {
    flex-direction: column;
    column-gap: 0;
  }
  .sub-contents .facility .information .detail > div {
    width: auto;
    column-gap: 20px;
  }
  .sub-contents .facility .guide .text {
    height: auto;
    flex-direction: column;
    row-gap: 20px;
    column-gap: 0;
    padding: 30px;
  }
  .sub-contents .facility.center .guide .text {
    align-items: flex-start;
  }
  .sub-contents .library .information .flex-box {
    column-gap: 40px;
    justify-content: flex-start;
  }
  .sub-contents .library .information .text {
    flex-shrink: 0;
  }
  .sub-contents .library .information .item-box {
    width: 100%;
    column-gap: 20px;
  }
  .sub-contents .library .information .item-box .item {
    width: calc(50% - 10px);
  }
  .sub-contents .location .flex-box {
    column-gap: 40px;
  }
  .sub-contents .location .map-box {
    max-width: 50%;
  }
  .sub-contents .events .month {
    column-gap: 30px;
  }
  .sub-contents .events .month button {
    width: 45px;
    height: 45px;
  }
  .sub-contents .events .month h4 {
    font-size: 2.8rem;
  }
  .sub-contents .events .events-popup .inner {
    max-height: calc(100% - 120px);
  }
  .sub-contents .lecture .sub-flex {
    flex-direction: column;
    row-gap: 40px;
  }
  .sub-contents .lecture .sub-flex > h5 {
    max-width: 100%;
  }
  .sub-contents .lecture .sub-flex .content {
    margin: 0;
  }
  .sub-contents .rental .area .flex-box {
    align-items: flex-end;
    column-gap: 40px;
  }
  .sub-contents .rental .area ul {
    width: 55%;
  }
  .sub-contents .rental .area ul li {
    padding: 0 40px;
  }
  .sub-contents .rental .border-box {
    row-gap: 20px;
    column-gap: 20px;
  }
  .sub-contents .card .card-box {
    row-gap: 20px;
    column-gap: 20px;
  }
  .sub-contents .card .card-box .item {
    padding: 30px 20px;
  }
  .sub-contents .support .designated .img-box span {
    font-size: 3.4rem;
    left: 40px;
    bottom: 40px;
  }
  .sub-contents .support .designated .text-box {
    row-gap: 40px;
  }
  .sub-contents .support .designated .text-box p br {
    display: none;
  }
  .sub-contents .song .listen ol {
    column-gap: 20px;
  }
  footer .footer-box {
    column-gap: 40px;
  }
  footer .footer-box .logo {
    width: 260px;
    height: 68px;
  }
  footer .footer-box .item-box {
    grid-template-rows: repeat(2, 1fr);
  }
  footer .footer-box .item,
  footer .footer-box .item.link {
    row-gap: 30px;
    padding: 20px;
  }
  footer .footer-box .item p,
  footer .footer-box .item p a {
    font-size: 2rem;
  }
  footer .footer-box .item .family button::after,
  footer .footer-box .item .family .list {
    top: calc(100% + 15px);
  }
  footer .footer-box .item .family .list {
    padding: 15px 20px;
  }
  footer .footer-box .item .family ul li a {
    font-size: 1.8rem;
    padding: 5px 0;
  }
}
@media (max-width: 1200px) {
  html,
  body {
    font-size: 56.25%;
  }
  header nav {
    display: none;
  }
  header .auth {
    margin: 0 20px 0 auto;
  }
  header .auth a {
    font-size: 1.6rem;
  }
  .site-map .inner {
    padding: 30px 0 60px;
    overflow: revert;
  }
  .site-map .logo {
    width: 200px;
    height: 52px;
  }
  .site-map .depth1 > li {
    padding: 20px;
  }
  .site-map .depth1 > li > a {
    width: 180px;
    font-size: 2.8rem;
  }
  .site-map .depth2 {
    grid-template-columns: repeat(4, 1fr);
    padding: 6px 0 0;
  }
  main .visual .content {
    flex-direction: column;
    row-gap: 60px;
  }
  main .visual .slide-wrap,
  main .visual .link-box {
    width: 100%;
  }
  main .visual .option-box {
    column-gap: 40px;
    margin: 30px 0 0;
  }
  main .visual .tab-title.shadow li button {
    font-size: 1.8rem;
    padding: 0 30px;
  }
  main .visual .menu-box h6 {
    font-size: 2.2rem;
  }
  main .event .flex-box {
    column-gap: 40px;
  }
  main .event .swiper-slide {
    margin: 40px 0 0;
  }
  main .board .item h5 {
    font-size: 2.6rem;
    margin: 30px 0 20px;
  }
  main .video .top {
    column-gap: 30px;
  }
  main .location .flex-box {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 40px;
  }
  main .location .map {
    width: 100%;
    max-width: 990px;
  }
  .sv {
    height: 380px;
  }
  .sub-contents .lnb-box {
    height: 60px;
  }
  .sub-contents .vision .mission .mask span {
    font-size: 5rem;
  }
  .sub-contents .vision .mission .text {
    width: 60%;
    height: 280px;
  }
  .sub-contents .vision .core .item-box {
    row-gap: 20px;
    column-gap: 20px;
  }
  .sub-contents .vision .core .text {
    padding: 40px 30px;
  }
  .sub-contents .vision .core .text p {
    font-size: 2.8rem;
  }
  .sub-contents .history .list-box {
    width: 50%;
  }
  .sub-contents .history .list {
    row-gap: 100px;
    padding: 30px 2.5px 100px;
  }
  .sub-contents .organization figure {
    padding: 10px 20px;
  }
  .sub-contents .director .caption > div,
  .sub-contents .director .item > div {
    width: 19%;
  }
  .sub-contents .director .caption > div:nth-child(2),
  .sub-contents .director .item > div:nth-child(2) {
    width: 20%;
  }
  .sub-contents .director .caption > div:nth-child(5),
  .sub-contents .director .item > div:nth-child(5) {
    width: 29%;
  }
  .sub-contents .facility .information .detail dl {
    flex-direction: column;
    row-gap: 20px;
    column-gap: 0;
  }
  .sub-contents .facility .information .detail dl dd {
    margin: 0;
  }
  .sub-contents .facility .guide .item-box {
    row-gap: 20px;
    column-gap: 20px;
  }
  .sub-contents .facility .guide .text ol {
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
  }
  .sub-contents .library .information .flex-box {
    flex-direction: column;
    row-gap: 30px;
    column-gap: 0;
  }
  .sub-contents .library .information .item-box {
    column-gap: 40px;
  }
  .sub-contents .library .information .item-box .item {
    width: calc(50% - 20px);
  }
  .sub-contents .events .schedule table th {
    height: 70px;
  }
  .sub-contents .events .schedule table td {
    height: 140px;
    padding: 10px;
  }
  .sub-contents .events .schedule .list-box,
  .sub-contents .events .schedule .list {
    margin-top: 10px;
  }
  .sub-contents .events .schedule .plus {
    top: -30px;
  }
  .sub-contents .events .events-popup .top h5 {
    font-size: 2.6rem;
  }
  .sub-contents .events .events-popup .inner {
    padding: 40px 30px;
  }
  .sub-contents .dl-box.dt270 dt, .sub-contents .dl-box.dt350 dt {
    max-width: 180px;
  }
  .sub-contents .dl-box.dt-left dt {
    padding: 0 20px;
  }
  .sub-contents .dl-box.dd100 dd:not(.paddingX), .sub-contents .dl-box.dd30 dd:not(.paddingX) {
    padding: 0 20px;
  }
  .sub-contents .dl-box input[type=text],
  .sub-contents .dl-box input[type=password],
  .sub-contents .dl-box select {
    padding: 0 20px;
  }
  .sub-contents .shadow {
    height: 80px;
  }
  .sub-contents .shadow h5 {
    font-size: 2.4rem;
  }
  .sub-contents .radius-box .item {
    height: 70px;
  }
  .sub-contents .lecture .dl-box dl dd.border-right {
    width: 48%;
  }
  .sub-contents .lecture .button-box a {
    width: 240px;
    height: 70px;
  }
  .sub-contents .rental .area ul {
    flex-shrink: 0;
  }
  .sub-contents .rental .area ul li {
    height: 80px;
  }
  .sub-contents .rental .area ul li span {
    font-size: 3.4rem;
  }
  .sub-contents .rental .area ul dl {
    column-gap: 40px;
  }
  .sub-contents .rental .payment .item-box {
    padding: 40px;
  }
  .sub-contents .rental .border-box {
    row-gap: 10px;
    column-gap: 10px;
  }
  .sub-contents .rental .note .item-box .item {
    padding: 40px 20px;
  }
  .sub-contents .rental .note .item-box p br {
    display: none;
  }
  .sub-contents .card .card-box {
    grid-template-columns: repeat(3, 1fr);
  }
  .sub-contents .support .designated {
    width: 100%;
    max-width: 800px;
    grid-template-columns: repeat(1, 1fr);
  }
  .sub-contents .support .designated .text-box {
    padding: 40px;
  }
  .sub-contents .archives .t-circle {
    font-size: 2.6rem;
  }
  .sub-contents .story .inner {
    padding: 40px 20px;
  }
  .sub-contents .story .inner h6 {
    font-size: 2.2rem;
  }
  .sub-contents .story .item-box {
    flex-direction: column;
    row-gap: 30px;
    column-gap: 0;
  }
  .sub-contents .village .item-box {
    column-gap: 20px;
  }
  .sub-contents .village .map {
    width: 40%;
    padding: 40px;
  }
  .sub-contents .heritage .table-box table th {
    height: 70px;
  }
  .sub-contents .heritage .form-button {
    width: 280px;
    height: 70px;
  }
  .sub-contents .heritage .form-button span {
    font-size: 1.8rem;
  }
  .sub-contents .song .information {
    padding: 40px;
  }
  .sub-contents .song .listen ol {
    grid-template-columns: repeat(2, 1fr);
  }
  .sub-contents .paid .shadow h6 {
    font-size: 2rem;
  }
  .sub-contents .paid .text-box {
    margin: 60px 0;
  }
  .sub-contents .paid .bottom {
    column-gap: 20px;
  }
  footer .footer-box {
    flex-direction: column;
    column-gap: 0;
    padding: 60px 0;
  }
  footer .footer-box .item-box {
    width: 100%;
    margin: 40px 0 60px;
  }
  footer .footer-box .copy {
    text-align: right;
    margin: 0;
  }
}
@media (max-width: 960px) {
  .font70 {
    font-size: calc(var(--fontsize) * 0.66);
  }
  .font60,
  .font50 {
    font-size: calc(var(--fontsize) * 0.68);
  }
  .site-map .depth1 > li {
    display: block;
  }
  .site-map .depth2 {
    display: block;
    padding: 0;
    margin: 15px 0 0;
    position: relative;
    display: none;
  }
  .site-map .depth2 > li {
    display: flex;
    column-gap: 40px;
  }
  .site-map .depth2 > li > a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 160px;
    column-gap: 40px;
    padding: 10px 0;
  }
  .site-map .depth2 > li > a img {
    width: 8px;
    transform: translateY(5px);
  }
  .site-map .depth3 {
    padding: 7px 0 0;
    display: none;
  }
  .site-map .depth3 > li > a {
    font-size: 1.7rem;
  }
  main .visual .slide-box .text h6 {
    font-size: 1.9rem;
  }
  main .background .point-r {
    top: 65%;
  }
  main .board .item-box,
  main .video .item-box {
    flex-direction: column;
  }
  main .board .item-box {
    row-gap: 60px;
  }
  main .video {
    margin: 80px 0 0;
  }
  main .video .left {
    padding: 0;
  }
  main .video .top {
    justify-content: space-between;
    column-gap: 20px;
    margin: 0 0 40px;
  }
  main .video .button-box {
    justify-content: flex-end;
    margin: 0 0 10px;
  }
  main .video .slide-box {
    width: 100%;
  }
  main .location .text dl {
    margin: 0 0 30px;
  }
  .sub-contents .col100 {
    row-gap: 80px;
  }
  .sub-contents .greeting .flex-box {
    width: 100%;
    max-width: 680px;
    flex-direction: column;
    row-gap: 40px;
    margin: 0 auto;
  }
  .sub-contents .greeting .img {
    order: 1;
  }
  .sub-contents .greeting .text {
    order: 2;
    max-width: 100%;
  }
  .sub-contents .greeting .text h3 {
    font-size: 3.6rem;
  }
  .sub-contents .vision .mission .text {
    width: 80%;
  }
  .sub-contents .vision .core .text {
    padding: 30px 20px;
  }
  .sub-contents .vision .core .text em {
    font-size: 2rem;
  }
  .sub-contents .vision .core .text p {
    font-size: 2.3rem;
  }
  .sub-contents .history .item-box {
    flex-direction: column-reverse;
    align-items: flex-start;
    row-gap: 60px;
  }
  .sub-contents .history .list-box {
    width: 100%;
    height: auto;
  }
  .sub-contents .history .list {
    row-gap: 60px;
    padding: 20px 3px;
    position: relative;
    top: auto;
    left: auto;
  }
  .sub-contents .history .list dl {
    flex-direction: row;
    column-gap: 40px;
  }
  .sub-contents .history .list dl dt {
    font-size: 3.2rem;
  }
  .sub-contents .history .list dl dd {
    margin-top: 0.6em;
  }
  .sub-contents .director .caption > div,
  .sub-contents .director .item > div {
    width: 16%;
  }
  .sub-contents .director .caption > div:nth-child(5),
  .sub-contents .director .item > div:nth-child(5) {
    width: 34%;
  }
  .sub-contents .facility h5 {
    font-size: 2.6rem;
  }
  .sub-contents .facility:not(.library) .information .detail {
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 40px;
  }
  .sub-contents .facility .guide .item-box {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 0;
  }
  .sub-contents .facility.house .information .p-box p br {
    display: none;
  }
  .sub-contents .library .information .item-box {
    column-gap: 20px;
  }
  .sub-contents .library .information .item-box .item {
    width: calc(50% - 10px);
  }
  .sub-contents .location .flex-box {
    flex-direction: column;
    row-gap: 40px;
    column-gap: 0;
  }
  .sub-contents .location .map-box {
    max-width: 100%;
    height: 360px;
  }
  .sub-contents .location .info-box dl {
    margin-bottom: 30px;
  }
  .sub-contents .location .info-box dl dt {
    font-size: 2.4rem;
    margin: 0 0 10px;
  }
  .sub-contents .location .info-box dl dd {
    font-size: 2rem;
  }
  .sub-contents .location .column + hr {
    margin: 20px 0;
  }
  .sub-contents .events .month {
    column-gap: 20px;
  }
  .sub-contents .events .month h4 {
    font-size: 2.4rem;
  }
  .sub-contents .events .month button {
    width: 40px;
    height: 40px;
  }
  .sub-contents .events .schedule table thead {
    display: none;
  }
  .sub-contents .events .schedule table tr {
    display: flex;
    flex-direction: column;
  }
  .sub-contents .events .schedule table td {
    width: 100%;
    height: auto;
    padding: 20px;
  }
  .sub-contents .events .schedule table td em {
    font-size: 1.8rem;
  }
  .sub-contents .events .events-popup .inner {
    max-width: calc(100% - 40px);
  }
  .sub-contents .events .events-popup .list {
    padding: 30px;
  }
  .sub-contents .t-circle {
    font-size: 2.2rem;
  }
  .sub-contents .t-number {
    font-size: 2.6rem;
  }
  .sub-contents .t-number em {
    width: 35px;
    height: 35px;
    font-size: 2.2rem;
  }
  .sub-contents .dl-box .border-right,
  .sub-contents .dl-box dl dt {
    border-right: none;
  }
  .sub-contents .dl-box dl {
    min-height: inherit;
    flex-direction: column;
  }
  .sub-contents .dl-box dl > * {
    height: auto;
    padding: 20px !important;
  }
  .sub-contents .dl-box dl dt {
    width: 100% !important;
    max-width: 100% !important;
  }
  .sub-contents .dl-box dl dd p {
    text-indent: 0;
  }
  .sub-contents .dl-box dl dd button {
    height: 50px;
  }
  .sub-contents .dl-box dl dd button:not(.refresh-button) {
    font-size: 1.8rem;
  }
  .sub-contents .dl-box dl.half {
    width: 100%;
  }
  .sub-contents .dl-box.m-dt-left dl dt {
    justify-content: flex-start;
  }
  .sub-contents .dl-box input[type=text],
  .sub-contents .dl-box input[type=password],
  .sub-contents .dl-box select {
    height: 50px;
  }
  .sub-contents .dl-box .captcha .img {
    width: 130px;
    height: 50px;
  }
  .sub-contents .dl-box .captcha .refresh-button {
    width: 50px;
  }
  .sub-contents .radius-box .item {
    font-size: 1.7rem;
  }
  .sub-contents .lecture .dl-box dl dd.border-right {
    width: 100%;
    justify-content: center;
  }
  .sub-contents .lecture .dl-box dl dd.paddingX:not(.center) {
    display: none;
  }
  .sub-contents .lecture .sub-flex > h5 {
    font-size: 2.4rem;
  }
  .sub-contents .lecture .sub-flex > h5 img {
    height: 60px;
  }
  .sub-contents .lecture .note-box h4 {
    font-size: 2.7rem;
  }
  .sub-contents .rental .area ul dl {
    flex-direction: column;
    row-gap: 5px;
    column-gap: 0;
    align-items: flex-start;
  }
  .sub-contents .rental .area ul dl dt {
    width: 100%;
  }
  .sub-contents .rental .border-box.grid4, .sub-contents .rental .border-box.grid3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sub-contents .card .card-box {
    grid-template-columns: repeat(2, 1fr);
  }
  .sub-contents .archives .t-circle {
    font-size: 2.4rem;
  }
  .sub-contents .story .inner h6 br {
    display: none;
  }
  .sub-contents .village .item-box {
    flex-direction: column;
    row-gap: 30px;
    column-gap: 0;
  }
  .sub-contents .village .map {
    width: 100%;
  }
  .sub-contents .heritage .table-box {
    overflow-x: scroll;
  }
  .sub-contents .heritage .table-box::before {
    border-right: none;
  }
  .sub-contents .heritage table {
    width: 730px;
  }
  .sub-contents .song .information .t-circle {
    margin: 0 0 20px;
  }
  .sub-contents .song .information .p-box {
    margin: 30px 0 0;
  }
  .sub-contents .song .listen {
    padding: 100px 0;
  }
  .sub-contents .song .listen .title h4 {
    font-size: 3.2rem;
    margin: 0 0 40px;
  }
  .sub-contents .paid .shadow h6 {
    font-size: 1.8rem;
    text-align: center;
  }
  .sub-contents .paid .shadow h6 br {
    display: block;
  }
  .sub-contents .paid .bottom {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 30px 20px;
  }
}
@media (max-width: 768px) {
  .font70 {
    font-size: calc(var(--fontsize) * 0.56);
  }
  .font60,
  .font50 {
    font-size: calc(var(--fontsize) * 0.58);
  }
  header {
    height: 70px;
  }
  header .logo {
    width: 140px;
    height: 36px;
  }
  .site-map .top {
    margin: 0 0 30px;
  }
  .site-map .logo {
    width: 160px;
    height: 42px;
  }
  .site-map .depth1 > li > a {
    font-size: 2.4rem;
  }
  .quick {
    width: 90px;
  }
  .quick .class {
    width: 90px;
    height: 100px;
  }
  .quick .circle {
    width: 60px;
    height: 60px;
  }
  main .button-box.circle button {
    width: 50px;
    height: 50px;
  }
  main .visual .box {
    padding: 100px 0 40px;
  }
  main .visual p.top {
    font-size: 2.5rem;
  }
  main .visual .content {
    margin: 20px 0 0;
  }
  main .visual .menu-box h6 {
    font-size: 1.9rem;
  }
  main .event .point {
    width: 70%;
  }
  main .event .flex-box {
    flex-direction: column;
    justify-content: flex-start;
    column-gap: 0;
  }
  main .event .left {
    padding: 0;
  }
  main .event .button-box {
    justify-content: flex-end;
    margin: 20px 0 0;
  }
  main .event .slide-wrap {
    width: 100%;
  }
  main .event .slide-box {
    width: 100%;
  }
  main .background .point-l {
    width: 40%;
    top: 10%;
    left: -6%;
  }
  main .background .point-r {
    width: 44%;
    top: 62%;
    right: -12%;
  }
  .sv {
    height: 320px;
    margin: 20px 0 0;
  }
  .sv .text {
    left: 20px;
    bottom: 20px;
  }
  .sub-contents .sub-page {
    padding: 80px 0;
  }
  .sub-contents .padding100 {
    padding: 70px 0;
  }
  .sub-contents .vision .item,
  .sub-contents .vision .mask {
    padding: 20px;
  }
  .sub-contents .vision .mask span {
    font-size: 4rem;
  }
  .sub-contents .vision .mission .text {
    height: 240px;
    padding: 30px 20px;
  }
  .sub-contents .vision .mission .text p {
    font-size: 2.6rem;
  }
  .sub-contents .vision .core {
    margin-top: 100px;
  }
  .sub-contents .vision .core .item-box {
    row-gap: 10px;
    column-gap: 10px;
  }
  .sub-contents .vision .core .text {
    padding: 20px;
  }
  .sub-contents .history .list dl {
    flex-direction: column;
    column-gap: 0;
  }
  .sub-contents .organization .caption {
    display: none;
  }
  .sub-contents .organization .item {
    min-height: auto;
    flex-direction: column;
    row-gap: 20px;
    padding: 30px 20px;
  }
  .sub-contents .organization .item > div {
    width: 100%;
  }
  .sub-contents .organization .item > div:nth-child(2), .sub-contents .organization .item > div:nth-child(4), .sub-contents .organization .item > div:nth-child(5) {
    width: 100%;
  }
  .sub-contents .organization .item > div:not(:last-child)::after {
    display: none;
  }
  .sub-contents .organization .item .p-box.gap15 {
    row-gap: 10px;
  }
  .sub-contents .library .information .item-box .item {
    padding: 30px 20px;
  }
  .sub-contents .events .schedule {
    margin: 30px 0 0;
  }
  .sub-contents .events .events-popup .list .top {
    margin: 0 0 25px;
  }
  .sub-contents .events .events-popup .list .info > div {
    width: 100%;
    order: inherit !important;
  }
  .sub-contents .shadow h5 {
    font-size: 2.1rem;
  }
  .sub-contents .t-circle {
    font-size: 1.9rem;
    margin: 0 0 20px;
  }
  .sub-contents .t-number {
    font-size: 2.1rem;
  }
  .sub-contents .t-number em {
    width: 30px;
    height: 30px;
    font-size: 1.8rem;
  }
  .sub-contents .radius-box {
    flex-direction: column;
  }
  .sub-contents .radius-box .item {
    height: auto;
    padding: 15px;
  }
  .sub-contents .radius-box .item:not(:first-child) {
    border-radius: 100px;
  }
  .sub-contents .radius-box .item:not(:first-child)::before {
    display: none;
  }
  .sub-contents .lecture .sub-flex > h5 img {
    height: 50px;
  }
  .sub-contents .lecture .discount .table-box {
    overflow-x: scroll;
  }
  .sub-contents .lecture .discount table {
    width: 730px;
  }
  .sub-contents .lecture .button-box a {
    height: 60px;
    font-size: 1.8rem;
  }
  .sub-contents .rental .area .flex-box {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 30px;
    column-gap: 0;
  }
  .sub-contents .rental .area ul {
    width: 100%;
  }
  .sub-contents .rental .area ul dl {
    flex-direction: row;
    row-gap: 0;
    column-gap: 40px;
    align-items: center;
  }
  .sub-contents .rental .area ul dl dt {
    width: 80px;
  }
  .sub-contents .rental .payment .item-box {
    row-gap: 15px;
    padding: 30px;
  }
  .sub-contents .rental .guide .item {
    height: auto;
    padding: 30px;
  }
  .sub-contents .rental .guide .item dl span br {
    display: none;
  }
  .sub-contents .list table .state {
    font-size: 1.4rem;
    padding: 5px 12px;
  }
  .sub-contents .button-box {
    column-gap: 10px;
  }
  .sub-contents .story .inner h6 {
    font-size: 1.9rem;
  }
  .sub-contents .story .inner hr {
    margin: 30px 0;
  }
  .sub-contents .heritage .form-button {
    width: 260px;
    height: 60px;
    margin: 50px auto 0;
  }
  .sub-contents .local .note {
    padding: 30px;
  }
  .sub-contents .local .note .p-box {
    row-gap: 15px;
    padding: 20px;
  }
  .sub-contents .song .col100 {
    margin-top: 60px;
  }
  .sub-contents .song .information {
    padding: 30px 20px;
  }
  .sub-contents .song .information h6 {
    font-size: 1.8rem;
  }
  .sub-contents .song .listen {
    padding: 70px 0;
  }
  .sub-contents .song .listen ol li {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 10px;
    column-gap: 0;
    padding: 20px;
  }
  .sub-contents .song .listen ol .text {
    column-gap: 10px;
  }
  .sub-contents .song .listen ol .audio-box {
    margin-left: auto;
  }
  .sub-contents .paid .text-box {
    flex-direction: column;
    row-gap: 40px;
  }
  .sub-contents .paid .text-box .text {
    width: 100%;
  }
  footer .social {
    grid-template-columns: repeat(7, 50px);
    column-gap: 10px;
  }
  footer .footer-box {
    margin: 20px 0 0;
  }
  footer .footer-box .logo {
    width: 200px;
    height: 52px;
  }
  footer .footer-box .item-box {
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(2, 1fr);
  }
  footer .footer-box .item.link {
    grid-row-start: 3;
  }
}
@media (max-width: 640px) {
  .font70 {
    font-size: calc(var(--fontsize) * 0.48);
  }
  .font60,
  .font50 {
    font-size: calc(var(--fontsize) * 0.52);
  }
  .site-map .inner .symbol {
    width: 60%;
  }
  .site-map .depth1 > li {
    padding: 20px 0;
  }
  .quick {
    width: 100%;
    border-radius: 20px 20px 0 20px;
    top: auto;
    right: 50%;
    bottom: 0;
    transform: translateX(50%);
  }
  .quick .inner {
    height: 95px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
  }
  .quick .inner * {
    white-space: nowrap;
  }
  .quick a,
  .quick .class {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quick a {
    width: 100%;
    height: 100%;
  }
  .quick a:not(:first-child) {
    padding: 0 20px;
  }
  .quick p {
    font-size: 1.6rem;
  }
  .quick .class,
  .quick .class::before {
    border-radius: 20px 0 0 20px;
  }
  .quick .class {
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .quick .circle {
    width: auto;
    height: auto;
    border-width: 2px;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 1.5rem;
  }
  main .button-box .svg {
    width: 9px;
    height: 16.5px;
  }
  main .button-box.circle button {
    width: 45px;
    height: 45px;
  }
  main .visual p.top {
    font-size: 2.1rem;
  }
  main .visual .slide-box .text {
    left: 20px;
    bottom: 20px;
  }
  main .visual .slide-box .text h6 {
    font-size: 1.7rem;
  }
  main .visual .tab-title.shadow li {
    width: 100%;
  }
  main .visual .tab-title.shadow li button {
    padding: 0;
  }
  main .visual .tab-contents,
  main .visual .tab-contents::before {
    border-radius: 0 0 30px 30px;
  }
  main .visual .tab-contents .item-box {
    padding: 20px;
  }
  main .visual .menu-box {
    column-gap: 5px;
  }
  main .visual .menu-box h6 {
    font-size: 1.7rem;
  }
  main .event .swiper-slide .text h5 {
    font-size: 2.1rem;
  }
  main .background .box {
    padding: 80px 0;
  }
  main .board .item h5 {
    font-size: 2.1rem;
  }
  main .location .box {
    padding: 0 0 80px;
  }
  main .location .tab-title.shadow li {
    width: auto;
    height: 50px;
  }
  main .location .tab-title.shadow li button {
    font-size: 1.8rem;
    padding: 0 30px;
  }
  main .location .map {
    padding: 20px;
  }
  main .location .text dl dt {
    font-size: 2.4rem;
  }
  main .location .text dl dd {
    font-size: 2rem;
  }
  main .location .text .transport > div {
    row-gap: 5px;
    column-gap: 5px;
  }
  .sv {
    height: 260px;
  }
  .sub-contents .col100 {
    row-gap: 60px;
  }
  .sub-contents .lnb-box {
    height: 55px;
  }
  .sub-contents .lnb-box .depth1 > li > a {
    font-size: 1.5rem;
  }
  .sub-contents .sub-page {
    padding: 60px 0 80px;
  }
  .sub-contents .page-title {
    margin: 0 0 40px;
  }
  .sub-contents .greeting .text h3 {
    font-size: 2.8rem;
  }
  .sub-contents .greeting .text .bottom hr {
    margin: 0 10px;
  }
  .sub-contents .greeting .text .bottom dl {
    column-gap: 15px;
  }
  .sub-contents .greeting .text .bottom dl dd {
    font-size: 2.3rem;
  }
  .sub-contents .vision .mission .mask span {
    font-size: 4rem;
  }
  .sub-contents .vision .mission .text {
    width: 100%;
    padding: 20px;
  }
  .sub-contents .vision .mission .text p {
    font-size: 2.2rem;
  }
  .sub-contents .vision .core .item-box {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 20px;
    margin: 40px 0 0;
  }
  .sub-contents .vision .core .text {
    padding: 30px;
  }
  .sub-contents .history .list dl dt {
    font-size: 2.7rem;
  }
  .sub-contents .history .list div {
    flex-direction: column;
    row-gap: 5px;
  }
  .sub-contents .facility .information .detail > div {
    flex-direction: column;
    row-gap: 20px;
    column-gap: 0;
  }
  .sub-contents .facility .information .detail dl {
    row-gap: 15px;
  }
  .sub-contents .facility .guide .text {
    padding: 20px;
  }
  .sub-contents .facility .guide .text h6 {
    font-size: 2rem;
  }
  .sub-contents .facility .guide .text ol li {
    column-gap: 5px;
  }
  .sub-contents .library .information .item-box {
    flex-direction: column;
    row-gap: 20px;
    column-gap: 0;
  }
  .sub-contents .library .information .item-box .item {
    width: 100%;
  }
  .sub-contents .library .information .item-box dl {
    margin: 20px 0 10px;
  }
  .sub-contents .location .map-box {
    height: 280px;
  }
  .sub-contents .location .info-box dl dt {
    font-size: 2.2rem;
  }
  .sub-contents .location .info-box dl dd {
    font-size: 1.8rem;
  }
  .sub-contents .location .column div {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 5px;
    column-gap: 0;
  }
  .sub-contents .location .column hr {
    display: none;
  }
  .sub-contents .events .month h4 {
    font-size: 2.1rem;
  }
  .sub-contents .events .month button {
    width: 35px;
    height: 35px;
  }
  .sub-contents .events .schedule table td em {
    font-size: 1.6rem;
  }
  .sub-contents .events .schedule .list {
    margin-top: 15px;
  }
  .sub-contents .events .events-popup .inner {
    padding: 30px 20px;
  }
  .sub-contents .events .events-popup .top h5 {
    font-size: 2.2rem;
    margin: 0 0 20px;
  }
  .sub-contents .events .events-popup .list {
    padding: 20px;
  }
  .sub-contents .events .events-popup .list .top {
    margin: 0 0 15px;
  }
  .sub-contents .events .events-popup .list .info .flex-box {
    column-gap: 10px;
  }
  .sub-contents .dl-box dl dd button:not(.refresh-button) {
    font-size: 1.7rem;
  }
  .sub-contents .dl-box .email select {
    width: 34%;
    flex-shrink: 0;
  }
  .sub-contents .shadow {
    height: auto;
    padding: 20px;
  }
  .sub-contents .shadow h5 {
    font-size: 1.9rem;
  }
  .sub-contents .radius-box .item {
    font-size: 1.6rem;
  }
  .sub-contents .t-number {
    font-size: 2rem;
  }
  .sub-contents .t-number em {
    width: 26px;
    height: 26px;
    font-size: 1.6rem;
  }
  .sub-contents .lecture .lecture-tab li {
    width: auto;
  }
  .sub-contents .lecture .lecture-tab li a {
    font-size: 1.7rem;
    padding: 0 20px 15px;
  }
  .sub-contents .lecture .sub-flex > h5 {
    font-size: 2.1rem;
  }
  .sub-contents .lecture .sub-flex > h5 img {
    height: 40px;
  }
  .sub-contents .lecture .sub-flex .content {
    row-gap: 30px;
  }
  .sub-contents .lecture .table-box table th,
  .sub-contents .lecture .table-box table td {
    height: 70px;
  }
  .sub-contents .lecture .button-box a {
    width: auto;
    font-size: 1.6rem;
    padding: 0 20px;
  }
  .sub-contents .lecture .button-box a img {
    height: 15px;
  }
  .sub-contents .lecture .note-box {
    padding: 30px 10px;
  }
  .sub-contents .lecture .note-box h4 {
    font-size: 2.3rem;
  }
  .sub-contents .lecture .note-box p {
    font-size: 1.7rem;
  }
  .sub-contents .rental p {
    font-size: 1.7rem;
  }
  .sub-contents .rental .area ul li {
    height: auto;
    padding: 20px;
  }
  .sub-contents .rental .area ul li span {
    font-size: 3rem;
  }
  .sub-contents .rental .area ul dl {
    flex-direction: column;
    row-gap: 5px;
    column-gap: 0;
    align-items: flex-start;
  }
  .sub-contents .rental .area ul dl dt {
    width: 100%;
  }
  .sub-contents .rental .application a {
    width: 200px;
    height: 50px;
    margin: 40px 0 0;
  }
  .sub-contents .rental .payment .item-box dl {
    flex-direction: column;
    row-gap: 5px;
  }
  .sub-contents .rental .payment .item-box dl dt {
    width: 100%;
  }
  .sub-contents .rental .border-box.grid4, .sub-contents .rental .border-box.grid3 {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 0;
  }
  .sub-contents .rental .note .item-box .item {
    padding: 30px 20px;
  }
  .sub-contents .card .card-box {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 0;
  }
  .sub-contents .support .designated .img-box span {
    font-size: 2.8rem;
    left: 20px;
    bottom: 20px;
  }
  .sub-contents .support .designated .text-box {
    row-gap: 30px;
    padding: 30px 20px;
  }
  .sub-contents .support .designated .text-box > div {
    row-gap: 10px;
  }
  .sub-contents .support .designated .text-box .icon {
    width: 30px;
    height: 30px;
  }
  .sub-contents .archives .list {
    padding: 20px;
  }
  .sub-contents .archives .t-circle {
    font-size: 2rem;
    margin: 0 0 20px;
  }
  .sub-contents .story .inner {
    padding: 20px;
  }
  .sub-contents .story .inner h6 {
    font-size: 1.7rem;
  }
  .sub-contents .story .inner hr {
    margin: 20px 0;
  }
  .sub-contents .local .note {
    padding: 30px 20px;
    margin-bottom: 40px;
  }
  .sub-contents .song .col100 {
    margin-top: 20px;
  }
  .sub-contents .song .listen .title {
    margin: 0 0 40px;
  }
  .sub-contents .song .listen .title h4 {
    font-size: 2.7rem;
    margin: 0 0 30px;
  }
  .sub-contents .song .listen .title p {
    font-size: 1.7rem;
  }
  .sub-contents .song .listen .title p br {
    display: none;
  }
  .sub-contents .song .listen ol {
    grid-template-columns: repeat(1, 1fr);
  }
  .sub-contents .song .listen ol li {
    padding: 15px;
  }
  .sub-contents .song .listen ol em {
    width: 30px;
    height: 30px;
  }
  .sub-contents .member .button-box a {
    width: 180px;
    height: 60px;
  }
  .sub-contents .paid .bottom {
    padding: 20px;
  }
  .sub-contents .course .state {
    padding: 6px 18px;
  }
  .sub-contents .course .state-box {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 10px;
    column-gap: 0;
  }
  footer .social {
    grid-template-columns: repeat(7, 1fr);
  }
  footer .footer-box .logo {
    width: 160px;
    height: 42px;
  }
  footer .footer-box .item-box {
    margin: 30px 0 40px;
  }
  footer .footer-box .item,
  footer .footer-box .item.link {
    row-gap: 20px;
  }
  footer .footer-box .item p,
  footer .footer-box .item p a {
    font-size: 1.7rem;
    font-weight: 400;
  }
  footer .footer-box .item .family .plus {
    width: 15px;
    height: 15px;
  }
  footer .footer-box .item .family .list {
    padding: 5px 10px;
    top: auto;
    bottom: calc(100% + 15px);
  }
  footer .footer-box .item .family ul li a {
    font-size: 1.7rem;
  }
  footer .footer-box .item.link a {
    font-size: 1.8rem;
    font-weight: 400;
  }
  footer .footer-box .item.link .flex-box {
    flex-direction: column;
    row-gap: 10px;
  }
}