.mo-btn {display: none;}
@media screen and (max-width: 1120px){
  .container {max-width: 100%; padding: 0 20px;}
  .visual.container {padding: 0;}
  .swiper-css-mode>.swiper-wrapper>.swiper-slide img {object-position: left;}

  .ui-flex {max-width: 100%; padding: 0 20px;}
  .current-location {margin-top: 60px;}
}

@media screen and (max-width: 900px) {
  header {height: 60px; z-index: 4;}
  header.active:before {position: absolute; top: 0; left: 0; content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 3;}
  .mo-btn {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: block; width: 30px; height: 30px; z-index: 4;}
  header .logo {width: 232.5px;}
  header nav {position: fixed; top: 0; right: -280px; width: 280px; height: 100vh; background: var(--wt); z-index: 3; transition: all .5s;}
  header.active nav {right: 0; transition: all .5s;}
  header nav:before {content: '수도여고동문장학회'; display: block; padding: 20px; border-bottom: 1px solid var(--pr); font-size: 18px; font-weight: 500; color: var(--pr); box-sizing: border-box;}
  header nav ul {flex-flow: column; justify-content: flex-start; gap: 0; padding-left: 0; padding: 0; background: transparent; box-sizing: border-box;}
  header nav ul li {border-bottom: 1px solid #ddd;}
  header nav ul li .tit {justify-content: space-between; height: 58px; padding: 0 20px; color: var(--black_26); font-size: 18px;}
  header nav ul li .tit:after {content: ''; display: block; width: 15px; height: 9px; background: url(./../img/small-left.png)no-repeat 50% 50%; background-size: cover; transition: all.5s;}
  header nav ul li.active .tit:after {transform: rotate(180deg); transition: all.5s;}
  header nav ul li .sub {display: none; position: initial; transform: initial; justify-content: flex-start; align-items: flex-start; width: auto; height: auto; background: #C488A9;}
  header nav ul li .sub a {align-items: center; justify-content: flex-start; width: 100%; height: auto; padding: 10px 20px; border: none; background: transparent; color: var(--wt); text-align: left; box-sizing: border-box;}
  header nav ul li .sub a:first-child {border-top: 1px solid #ddd;}

  .mySwiper {margin-top: 60px;}

  .dim {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 3;}

  .mySwiper {height: calc(100vh - 60px);}

  footer .container {flex-flow: column; gap: 30px;}

  .ui-flex .fixed-nav {display: none;}
  .tit-box .tit {font-size: 24px;}
  .tit-box {margin-bottom: 20px;}

  .sm-tit {font-size: 20px;}
}

@media screen and (max-width: 700px) {
  .mySwiper {height: 500px;}
  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {width: 10px; height: 10px; margin: 0 3px;}

  .table-area table th,.table-area table td {font-size: 14px;}
  .table-area table th:nth-child(4) {min-width: 90px; width: 90px;}
  .table-area table th:nth-child(3) {min-width: 60px; width: 60px;}
  .table-area table th:first-child {min-width: 40px; width: 40px;}

  .pager ul .arrow {
    min-width: 20px;
    width: 20px;
  }

  .pager ul .all-prev {
    margin-right: 3px;
  }

  .pager ul .prev {
    margin-right: 20px;
  }

  .pager ul .all-next {
    margin-left: 3px;
  }

  .pager ul .next {
    margin-left: 20px;
  }

  .pager ul .number a {
    width: 20px;
    height: 20px;
    font-size: 13px;
  }

  .pager ul .number {
    margin: 2px;
  }

  .detail-area .top-box {padding: 5px; margin-bottom: 15px;}
  .detail-area .top-box .detail-tit .tit,.detail-area .top-box .detail-tit .txt {font-size: 14px;}
  .detail-area .top-box .detail-tit {gap: 5px;}
  .detail-area p {font-size: 14px;}

  .history-txt {font-size: 14px;}

  .history-txt dl {flex-flow: column; margin-bottom: 10px;}
  .history-txt dl dd {word-break: keep-all;}
  .history-txt {word-break: keep-all;}
  .detail-area .top-box .d-flex {gap: 5px;}
}

@media screen and (max-width: 512px) {
  .detail-area .top-box {flex-flow: column; gap: 2px; align-items: flex-start;}
}

@media screen and (max-width: 430px) {
  .table-area table th, .table-area table td {font-size: 12px;}
  .table-area table th:nth-child(3) {min-width: 50px; width: 50px;}
  .table-area table th:nth-child(4) {min-width: 70px; width: 70px;}
  .table-area table th:first-child {min-width: 30px; width: 30px;}
}