/*
 * ANSO 2026 responsive compatibility styles
 *
 * Load this file after the site's original CSS:
 *   English: /images/newstyles20251023.css
 *   Chinese: /images/public_ch20251024.css
 *
 * This file contains only compatibility overrides; original CSS remains unchanged.
 */

/* ==================== English site ==================== */

/*
 * ANSO responsive compatibility override.
 * Load this file after /images/newstyles20251023.css.
 * It closes the 481px-1639px breakpoint gap without changing page markup.
 */

@media screen and (max-width: 1639px) {
  html,
  body {
    min-width: 0 !important;
    max-width: 100%;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  video,
  iframe,
  canvas {
    max-width: 100%;
  }

  .wid1600,
  .wallbox,
  .home-content,
  .home-line,
  .home-line2,
  .publicbox,
  .pn_360x260,
  .pn_360x200,
  .pn_360x240,
  .pn_895x525,
  .pn_270x150,
  .pn_270x385,
  .pn_100x100,
  .eventxq,
  .bread,
  .topfize,
  .about-header .about-header-container,
  .about-header .about-options,
  .about-content,
  .SEhome-content,
  .memberpro-main .memberpro-nav,
  .memberpro-cont,
  .memberlist-text,
  .getinvolved-main,
  .seaxbox {
    width: calc(100% - 64px) !important;
    max-width: 1600px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .header-menu .header-meau-list {
    width: calc(100% - 64px);
    max-width: 1600px;
  }

  .header-menu .header-menu-items {
    width: 100%;
  }

  .wid1600 {
    align-items: center;
    display: flex;
    height: auto;
    justify-content: space-between;
    min-height: 110px;
  }

  .wid1600 .logo {
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    float: none;
    margin-top: 0;
    max-width: 744px;
    width: 58%;
  }

  .wid1600 .logo a {
    max-width: 100%;
    width: 100%;
  }

  .header-right {
    float: none;
    flex: 0 0 auto;
  }

  .home-line,
  .home-line2,
  .home-linebox {
    max-width: 100%;
  }

  .pn_360x260,
  .pn_360x200 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: visible;
  }

  .pn_360x260 dl,
  .pn_360x200 dl {
    float: none;
    margin-right: 0;
    margin-bottom: 32px;
    width: calc(25% - 24px);
  }

  .pn_360x260 dt,
  .pn_360x260 dt img,
  .pn_360x200 dt,
  .pn_360x200 dt img {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  .pn_360x240 dd {
    width: calc(100% - 400px);
  }

  .pn_895x525 dd {
    width: calc(100% - 935px);
  }

  .pn_270x150 dd {
    width: calc(100% - 400px);
  }

  .left1080 {
    width: calc(100% - 440px);
  }

  .rit400 {
    width: 400px;
  }

  .getinvolved-main .getinvolved-left {
    width: calc(100% - 440px);
  }

  .getinvolved-main .getinvolved-nav {
    width: 400px;
  }

  .about-content .about-year .year-message,
  .home-content .vision-msg,
  .home-bg3 .what-content,
  .home-bg3 .what-content .what-message,
  .general-msg,
  .thems-msg2 {
    max-width: 100%;
  }

  .footer {
    background-size: cover;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 48px 32px;
  }

  .footer .footer-left,
  .footer .footer-right {
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .footer .footer-left .footer-leftContent,
  .footer .footer-left .input-box,
  .footer .footer-left .input-box input,
  .footer .footer-right .footer-rightContent {
    max-width: 100%;
    width: 100%;
  }

  .footer .footer-right .footer-rightContent {
    border-bottom: 0;
    height: auto;
    margin: 32px 0 0;
    min-height: 0;
    padding: 0;
  }

  .footer .footer-right .footer-imgList {
    float: none;
    margin: 24px 0 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1439px) {
  .header-menu .header-meau-list {
    font-size: 16px;
  }

  .header-menu .header-meau-list li {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-menu .header-menu-items .header-menu-right {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: calc(100% - 64px);
  }

  .header-menu .header-menu-items .header-menu-right li {
    margin-left: 0;
    width: calc(25% - 9px);
  }

  .ope-calls {
    height: auto;
    padding-bottom: 48px;
  }

  .ope-calls .home-line {
    display: block;
  }

  .ope-calls .home-line .home-content,
  .ope-calls .ope-callsC {
    margin-right: 0;
    width: 100%;
  }

  .ope-calls .ope-callsC {
    display: flex;
    justify-content: space-between;
  }

  .ope-calls .ope-callsC .ope-callsC-box {
    margin-right: 0;
    padding-left: 0;
    width: calc(50% - 24px);
  }
}

@media screen and (max-width: 1199px) {
  .home-linebox {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .home-content .home-linebox {
    display: grid;
  }

  .home-linebox .w260 {
    aspect-ratio: 260 / 390;
    height: auto;
    margin: 0;
    min-width: 0;
    width: 100%;
  }

  .home-linebox .w260 img,
  .home-content .w260 .bg {
    height: auto;
    left: 0;
    max-width: 100%;
    top: 0;
    width: 100%;
  }

  .home-content .home-linebox .w260 .txt {
    left: 0;
    width: 100%;
  }

  .home-bg3 .what-content,
  .home-bg3 .what-content .what-message {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .pn_360x260 dl,
  .pn_360x200 dl {
    width: calc(50% - 16px);
  }

  .pn_895x525 dt,
  .pn_895x525 dd,
  .pn_360x240 dt,
  .pn_360x240 dd,
  .pn_270x150 dt,
  .pn_270x150 dd {
    float: none;
    height: auto;
    margin-bottom: 24px;
    max-width: 100%;
    position: static;
    width: 100%;
  }

  .pn_895x525 dt img,
  .pn_360x240 dt img,
  .pn_270x150 dt img {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  .left1080,
  .rit400,
  .PG-left,
  .PG-right,
  .getinvolved-main .getinvolved-left,
  .getinvolved-main .getinvolved-nav {
    float: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .getinvolved-main .getinvolved-nav {
    margin-top: 32px;
  }

  .GB-box .GB-right {
    width: calc(100% - 265px);
  }

  .thems-msg2 {
    width: calc(100% - 533px);
  }
}

@media screen and (max-width: 767px) {
  .wid1600,
  .wallbox,
  .home-content,
  .home-line,
  .home-line2,
  .publicbox,
  .pn_360x260,
  .pn_360x200,
  .pn_360x240,
  .pn_895x525,
  .pn_270x150,
  .pn_270x385,
  .pn_100x100,
  .eventxq,
  .bread,
  .topfize,
  .about-header .about-header-container,
  .about-header .about-options,
  .about-content,
  .SEhome-content,
  .memberpro-main .memberpro-nav,
  .memberpro-cont,
  .memberlist-text,
  .getinvolved-main,
  .seaxbox {
    width: calc(100% - 32px) !important;
  }

  .headbox .wid1600 {
    min-height: 72px;
  }

  .wid1600 .logo {
    height: 64px;
    width: calc(100% - 120px);
  }

  .header-menu {
    display: none !important;
  }

  .header-menu .header-menu-items {
    display: none !important;
  }

  .home-header {
    height: auto;
    min-height: 300px;
  }

  .wallbox {
    left: auto;
    position: relative;
    right: auto;
    top: auto;
  }

  .home-line,
  .home-line2 {
    display: block;
  }

  .home-linebox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .home-linebox > *,
  .home-line > *,
  .home-line2 > * {
    max-width: 100%;
  }

  .home-content .w500,
  .home-content .w360,
  .home-content .w500 .img,
  .vision-img,
  .fpic-video,
  .w493h300,
  .themes-img,
  .thems-msg2,
  .about-content .about-year .year-message,
  .home-content .vision-msg,
  .home-bg3 .what-content,
  .home-bg3 .what-content .what-message,
  .general-msg,
  .GB-box .GB-left,
  .GB-box .GB-right {
    float: none;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%;
  }

  .pn_360x260 dl,
  .pn_360x200 dl,
  .piclist dl {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .pn_360x260 dt,
  .pn_360x260 dt img,
  .pn_360x200 dt,
  .pn_360x200 dt img,
  .piclist dt,
  .piclist dt img {
    height: auto;
    width: 100%;
  }

  .pn_360x240 .time,
  .pn_270x150 .time,
  .pn_360x200 .time {
    left: auto;
    position: static;
    right: auto;
  }

  .ope-calls {
    height: auto;
    padding-bottom: 32px;
  }

  .ope-calls .home-line .home-content,
  .ope-calls .ope-callsC,
  .ope-calls .ope-callsC .ope-callsC-box {
    display: block;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    width: 100%;
  }

  .ope-calls .ope-callsC .ope-callsC-box {
    margin-top: 24px;
  }

  .home-linebox .w260 {
    float: none;
    margin-left: 0;
    margin-right: 0;
    width: calc(50% - 8px);
  }

  .home-linebox .w260 img,
  .home-content .w260 .bg {
    height: auto;
    width: 100%;
  }

  .year-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    overflow: visible;
  }

  .year-list > div {
    flex: 0 0 auto;
    left: auto !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
    width: auto !important;
  }

  .memberlist-info,
  .memberlist-info .listinfo-text,
  .memberlist-info .listinfo-tit,
  .memberlist-text .memberlist-img,
  .memberlist-img1,
  .memberlist-img1 div,
  .memberlist-img1 div canvas {
    height: auto !important;
    max-width: 100%;
    min-width: 0;
    width: 100% !important;
  }

  .footer {
    padding: 32px 16px;
  }

  .footer .footer-left .input-box,
  .footer .footer-left .input-box input {
    display: block;
  }

  .footer .footer-left .input-box input {
    padding-left: 16px;
  }

  .footer .footer-right .footer-imgList,
  .footer .footer-right .footer-leftTitle,
  .footer .footer-right .footer-message {
    text-align: left;
  }
}

@media screen and (max-width: 480px) {
  .wid1600 .logo {
    width: 5rem;
  }

  .home-header {
    min-height: 0;
  }

  .footer .footer-left .input-box,
  .footer .footer-left .input-box input {
    display: none;
  }
}

/* ==================== Chinese site (/ch/) ==================== */

/*
 * ANSO Chinese site responsive compatibility override.
 * Load after /images/public_ch20251024.css.
 */

@media screen and (max-width: 1919px) {
  html,
  body {
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  video,
  iframe,
  canvas {
    max-width: 100%;
  }

  .TopNav {
    align-items: center;
    height: auto;
    min-height: 120px;
    padding: 0 32px;
    width: 100%;
  }

  .topImg {
    height: auto;
    margin-left: 0;
    max-height: 82px;
    object-fit: contain;
    object-position: left center;
    width: clamp(260px, 32vw, 494px);
  }

  .nav-links {
    flex: 1 1 auto;
    gap: clamp(4px, 1vw, 18px);
    justify-content: space-between;
    margin: 0 0 0 24px;
    max-width: none;
    min-width: 0;
    padding: 0;
    width: auto;
  }

  .nav-links li {
    font-size: clamp(13px, 1.2vw, 18px);
    margin: 0;
    white-space: nowrap;
  }

  .searchBox {
    flex: 0 0 auto;
    margin: 0;
  }

  .contentBox {
    max-width: 1920px;
    width: 100%;
  }

  body {
    margin-left: 0;
    position: relative;
    width: 100%;
  }

  .partImg span {
    margin-left: auto;
    margin-right: auto;
    max-width: 1400px;
    width: calc(100% - 64px);
  }

  .partImg img {
    margin-left: 0;
  }

  .newsBox {
    gap: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1380px;
    width: calc(100% - 64px);
  }

  .leftNewBox {
    flex: 0 1 39%;
    max-width: 530px;
    width: auto;
  }

  .rightNewBox {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .leftNewBox .imgBox,
  #topNew {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  .rightNewBox .imgBox {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  .newsContent {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .newsContent h2,
  .newsContent p,
  .topNewContent h2 {
    max-width: 100%;
  }

  .projectBox {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: auto;
    max-width: 1400px;
    width: calc(100% - 64px);
  }

  .projectItem {
    max-width: none;
    min-width: 0;
  }

  .projectImg {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  .annouceBox {
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1360px;
    width: calc(100% - 64px);
  }

  .contentBox .annouceBox {
    max-width: 1360px;
    width: calc(100% - 64px);
  }

  .contentBox .annouceBox p {
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }

  .meetingDiv {
    max-width: 1500px;
    width: calc(100% - 64px);
  }

  .meetingBox {
    gap: 24px;
    max-width: 100%;
    width: 100%;
  }

  .meetingItem {
    max-width: 400px;
    width: clamp(280px, 30vw, 400px);
  }

  .meetingItem img {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  .videoDiv {
    gap: 48px;
    height: auto;
    justify-content: center;
    min-height: 450px;
    padding: 48px 32px;
  }

  .contentBox.videoDiv {
    left: auto;
    width: 100% !important;
  }

  .contentBox.videoDiv > .videoFilter {
    left: 0;
    width: 100%;
  }

  .videoBox,
  .videoBoxFilter {
    max-width: 677px;
    width: min(50%, 677px);
  }

  .videoBox {
    height: auto;
    aspect-ratio: 677 / 472;
  }

  .videoBoxFilter {
    height: auto;
    aspect-ratio: 677 / 472;
  }

  .videoContent {
    max-width: 677px;
    min-width: 0;
    width: min(50%, 677px);
  }

  .videoContent p {
    max-width: 100%;
  }

  .publishDiv {
    column-gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1350px;
    row-gap: 30px;
    width: calc(100% - 64px);
  }

  .contentBox .publishDiv {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100% - 64px);
  }

  .publishBox,
  .contentBox .publishBox {
    min-width: 0;
    width: 100%;
  }

  .publishBox img,
  .contentBox .publishBox img {
    max-width: 100%;
  }

  .undeBox {
    margin-left: 0;
    max-width: 1920px;
    width: 100%;
  }

  .undeBox > p {
    height: auto;
    margin: 24px 0 0;
    max-width: 100%;
    position: static;
    width: 100%;
  }

  .underDiv {
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
    width: calc(100% - 64px);
  }

  .underLeft,
  .underMid,
  .underRight {
    margin-left: 0;
    max-width: 33.333%;
    width: 33.333%;
  }

  .contentBox .publishBox,
  .contentBox .publishBox > a {
    min-width: 0;
    width: 100%;
  }

  .contentBox .publishBox img,
  .contentBox .publishBox .bg,
  .contentBox .publishBox .publishShadow {
    height: auto;
    left: 0 !important;
    max-width: 100%;
    top: 0 !important;
    width: 100%;
  }
}

@media screen and (max-width: 900px) and (min-width: 481px) {
  .TopNav {
    display: none;
  }

  .MobileNav {
    display: block;
    width: 100%;
  }

  .mobile-header {
    align-items: center;
    display: flex;
    height: auto;
    justify-content: space-between;
    min-height: 4rem;
    padding: 0.7rem 1rem;
    width: 100%;
  }

  .mobile-logo {
    height: auto;
    max-width: calc(100% - 5rem);
    object-fit: contain;
    width: min(19rem, calc(100% - 5rem));
  }

  .mobile-menu-btn {
    flex: 0 0 2rem;
  }

  .language-toggle-btn {
    flex: 0 0 auto;
  }

  .meetingDiv {
    display: block;
    width: calc(100% - 48px);
  }

  .meetingDiv .meetingBtn {
    display: none;
  }

  .meetingBox {
    display: grid;
    gap: 20px;
    height: auto;
    overflow: visible;
    padding: 0;
    width: 100%;
  }

  .meetingItem {
    height: auto;
    max-width: none;
    width: 100%;
  }

  .meetingItem img {
    height: auto;
    width: 100%;
  }

  .contentBox .publishDiv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 48px);
  }

  .videoDiv {
    align-items: stretch;
    flex-direction: column !important;
    gap: 24px;
    height: auto;
    min-height: 0;
    padding: 32px 16px;
  }

  .videoContent,
  .videoBox,
  .videoBoxFilter {
    max-width: 100%;
    width: 100%;
  }

  .videoContent p {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.8;
    margin-left: 0;
    width: 100%;
  }

  .contentBox.videoDiv > .videoFilter {
    left: 0;
    width: 100%;
  }
}

@media screen and (max-width: 1199px) and (min-width: 901px) {
  .TopNav {
    padding-left: 24px;
    padding-right: 24px;
  }

  .topImg {
    width: 280px;
  }

  .nav-links {
    gap: 4px;
    margin-left: 12px;
  }

  .nav-links li {
    font-size: 13px;
  }

  .projectBox,
  .publishDiv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .newsBox {
    width: calc(100% - 48px);
  }

  .meetingDiv {
    width: calc(100% - 48px);
  }

  .meetingItem {
    width: min(30vw, 320px);
  }

  .meetingDiv {
    display: block;
  }

  .meetingDiv .meetingBtn {
    display: none;
  }

  .meetingBox {
    display: grid;
    gap: 24px;
    height: auto;
    overflow: visible;
    padding: 0;
    width: 100%;
  }

  .meetingItem {
    height: auto;
    max-width: none;
    width: 100%;
  }

  .meetingItem img {
    height: auto;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .TopNav {
    display: none;
  }

  .MobileNav {
    display: block;
    width: 100%;
  }

  .mobile-header {
    justify-content: space-between;
    max-width: 100%;
    padding: 0.7rem 1rem;
    width: 100%;
  }

  .mobile-logo {
    height: auto;
    max-width: calc(100% - 5rem);
    object-fit: contain;
    width: min(19rem, calc(100% - 5rem));
  }

  .mobile-menu-btn {
    flex: 0 0 2rem;
  }

  .language-toggle-btn {
    flex: 0 0 auto;
  }

  .contentBox {
    min-width: 0;
    width: 100%;
  }

  .partImg {
    height: 220px;
  }

  .partImg span {
    font-size: clamp(1.25rem, 6vw, 2rem);
    letter-spacing: 2px;
    margin-top: 72px;
    width: calc(100% - 32px);
  }

  .partImg img {
    margin-left: 0;
    margin-top: 32px;
  }

  .newsDiv {
    height: auto;
    padding-bottom: 24px;
  }

  .newsBox {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto;
    margin-top: 24px;
    width: calc(100% - 32px);
  }

  .leftNewBox,
  .rightNewBox {
    height: auto;
    max-width: none;
    min-height: 0;
    width: 100%;
  }

  .leftNewBox .imgBox,
  #topNew,
  .rightNewBox .imgBox {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
  }

  .newsItem {
    height: auto;
    min-height: 112px;
    width: 100%;
  }

  .dateCol {
    flex: 0 0 64px;
    margin-left: 0;
    width: 64px;
  }

  .dateCol h3 {
    font-size: 32px;
  }

  .newsContent {
    margin-left: 12px;
    width: auto;
  }

  .newsContent h2 {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .newsContent p {
    font-size: 13px;
    line-height: 1.5;
  }

  .newsLeft,
  .newsLeft2 {
    height: 32px;
    margin-left: 8px;
    width: 32px;
  }

  .projectBox,
  .annouceBox,
  .publishDiv {
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    width: calc(100% - 32px);
  }

  .contentBox .annouceBox,
  .contentBox .publishDiv {
    width: calc(100% - 32px);
  }

  .contentBox .publishBox {
    height: auto;
  }

  .contentBox .publishBox > a {
    display: block;
    height: auto;
    overflow: visible;
  }

  .contentBox .publishBox h3 {
    margin: 0;
    padding-top: 142%;
    width: 100%;
  }

  .projectImg {
    height: auto;
    width: 100%;
  }

  .projectBox span {
    font-size: 16px;
  }

  .meetingDiv {
    display: block;
    width: calc(100% - 32px);
  }

  .contentBox .publishDiv {
    display: grid;
  }

  .meetingDiv .meetingBtn {
    display: none;
  }

  .meetingBox {
    display: grid;
    gap: 16px;
    height: auto;
    overflow: visible;
    padding: 0;
    width: 100%;
  }

  .meetingItem {
    height: auto;
    max-width: none;
    width: 100%;
  }

  .meetingItem img {
    height: auto;
    width: 100%;
  }

  .meetingItem h2 {
    font-size: 18px;
    margin-left: 12px;
    margin-top: 12px;
  }

  .meetingItem p {
    font-size: 14px;
    margin-left: 12px;
  }

  .videoDiv {
    align-items: stretch;
    flex-direction: column !important;
    gap: 24px;
    min-height: 0;
    padding: 32px 16px;
  }

  .videoContent,
  .videoBox,
  .videoBoxFilter {
    max-width: 100%;
    width: 100%;
  }

  .videoContent {
    order: 1;
  }

  .videoBox {
    order: 2;
  }

  .videoBoxFilter {
    left: 16px;
    order: 3;
    width: calc(100% - 32px);
  }

  .videoLine {
    margin-left: 0;
    margin-top: 0;
  }

  .videoContent p {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.8;
    margin-left: 0;
    width: 100%;
  }

  .undeBox {
    height: auto;
    min-height: 0;
    padding: 24px 16px;
  }

  .underDiv {
    align-items: stretch;
    display: flex !important;
    flex-direction: column;
    margin: 0;
    width: 100%;
  }

  .underLeft,
  .underMid,
  .underRight {
    margin: 0;
    max-width: none;
    width: 100%;
  }

  .undeBox p {
    height: auto;
    margin: 16px 0 0;
  }
}

@media screen and (max-width: 480px) {
  .mobile-header {
    height: auto;
    min-height: 3rem;
    width: 100%;
  }

  .mobile-logo {
    max-width: calc(100% - 5rem);
    width: calc(100% - 5rem);
  }

  .projectBox,
  .annouceBox,
  .publishDiv {
    grid-template-columns: 1fr;
  }

  .meetingItem h2 {
    line-height: 1.5;
  }
}