.footer-banner {
      background: var(--section-bg);
    }

    /* ===== Hero ===== */
    .hero {
      color: #fff;
      font-family: "M PLUS 2", sans-serif;
    }

    .hero .container {
      max-width: 1480px;
    }

    .hero__media {
      position: relative;
      background: url("../img/top-MV-01.png") top center /cover no-repeat;
      /* filter: saturate(.98) contrast(1.05); */
      /* height: 900px; */
      height: 850px;
      opacity: .98;
    }
    .hero__media::after {
      content: "";
      position: absolute;
      inset: 0;
      /* background: rgba(255, 255, 255, 0.05); */
      /* background: rgba(0, 0, 0, 0.1); */
      /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%); */
      /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 60%);
      z-index: 1; */

      /* background: linear-gradient(
        to bottom,
        rgba(59, 33, 3, 0.1) 0%,
        rgba(59, 33, 3, 0.8) 100%
      ); */
      /* background: rgba(59, 33, 9, 0.5); */
      background: linear-gradient(
        to bottom,
        rgba(59, 33, 3, 0.1) 0%,
        rgba(59, 33, 3, 0.3) 100%
      );
    }

    .hero__inner_text {
      position: absolute;
      text-align: center;
      bottom: 30%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }

    .hero__inner {
      padding: 72px 0 28px;
      position: absolute;
      text-align: center;
      bottom: -14%;
      left: 50%;
      transform: translateX(-50%);
      /* z-index: 2; */
      z-index: 1;
    }
    .hero__inner::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      left: 50%;
      width: 100vw;
      transform: translateX(-50%);
      /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 80%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70%);
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70%); */
    }

    .hero__headline {
      font-size: 70px;
      font-weight: 500;
      letter-spacing: .06em;
      line-height: 1.35;
      /* text-shadow: 0 2px 12px rgb(0 0 0 / 90%); */
      /* text-shadow: 0 2px 12px rgb(59 33 3 / 77%); */
      /* text-shadow: 0 2px 12px rgb(3 44 59 / 77%); */
      /* text-shadow: 0 2px 12px rgb(3 44 59); */
      text-shadow: 0 2px 12px rgb(0 24 38);
      color: #fff;
      padding: 0 3rem;
      /* text-align: start; */
    }

    .hero__headline ruby {
      ruby-position: over;
    }

    .hero__headline rt {
      /* font-size: 30px; */
      font-size: 28px;
      line-height: 1;
      text-align: center;
    }

    .hero__sub {
      margin-top: 14px;
      font-size: 32px;
      line-height: 1.5;
      margin-bottom: 5rem;
      /* text-shadow: 0 0 8px rgb(0, 0, 0); */
      /* text-shadow: 0 0 8px rgb(59 33 3 / 93%); */
      /* text-shadow: 0 0 8px rgb(3 44 59); */
      text-shadow: 0 0 8px rgb(0 24 38);
      padding: 0 3rem;
      /* text-align: start; */
      color: #fff;
    }

    .br-sp {
      display: none;
    }

    /* Round Icon Tiles */
    .tiles {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      margin-top: 28px;
      padding: 0 3rem;
    }

    .tile {
      background: var(--main-color);
      opacity: 98%;
      color: #fff;
      border-radius: 14px;
      display: grid;
      place-items: center;
      padding: 18px 8px;
      text-align: center;
      font-size: 23px;
      font-weight: 300;
      /* box-shadow: var(--shadow-1); */
      /* box-shadow: 0 -8px 16px rgba(255, 255, 255, 0.3), 0 8px 24px rgba(16, 24, 40, .06); */
      /* 1番 */
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-shadow: inset 0 8px 8px -8px rgba(255, 255, 255, 0.5), 0 8px 24px rgba(16, 24, 40, .06);
      /* 2番 */
      /* background: rgb(0 36 103);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); */
      /* box-shadow:
        0 -6px 12px rgba(255,255,255,0.4),
        0 8px 24px rgba(16, 24, 40, 0.08);

      border: 1px solid rgba(255,255,255,0.15); */
    }

    .tile:hover {
      transform: translateY(-.5rem);
      transition: transform 0.3s ease;
    }

    .tile__icon {
      width: 104px;
      background: #918b6c;
      border-radius: 100px;
      margin: 0 auto 8px;
      padding: 10px;
    }


    /* ===== Split Feature Band (blue) ===== */
    .band {
      color: #333;
      position: relative;
      margin-bottom: 5rem;
    }

    .band::before {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
      /* background-color: #EDF0FF; */
      /* background: #f5f3ee; */
      background: #ebe7de;
      box-shadow: var(--shadow-1);
      width: 57%;
      height: 64%;
      top: 38.3%;
      left: 0;
      border-radius: 0 1rem 1rem 0;
    }

    .band02::before {
      top: 33.3%;
      height: 70%;
    }

    .band02 {
      color: #333;
    }

    .band__grid {
      display: grid;
      gap: 6rem;
      grid-template-columns: 1.2fr 1fr;
      align-items: center;
      padding: 15rem 3rem 9rem;
    }

    .band02 .band__grid {
      padding: 9rem 3rem 8rem;
    }

    .band__panel--img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
      box-shadow: var(--shadow-1);
    }

    .band__panel--text {
      padding: 22px 0;
      z-index: 1;
      ;
    }

    .band__title {
      font-family: "M PLUS 2", sans-serif;
      margin: 0;
      font-weight: 300 !important;
      /* border-left: 2px solid;
      padding-left: 1rem;
      font-size: 50px !important; */
    }

    .feature h3,
    .band h3,
    .message h3 {
      margin: 3rem 0 0 !important;
      font-weight: 300 !important;
      color: #002567;
      position: relative;
      padding-left: 3rem;
    }

    .feature h3::before,
    .band h3::before,
    .message h3::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.6em;
      transform: translateY(-50%);
      width: 1.8rem;
      height: 0.15rem;
      background-color: #002567;
    }

    .band__p {
      opacity: 1;
      margin: 1rem 0 3rem;
      font-size: 20px;
      font-weight: 300;
      line-height: 2;
      color: #000;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      background: #fff;
      color: #000 !important;
      border-radius: 999px;
      border: 2px solid var(--main-color);
      padding: 1.5rem;
      /* box-shadow: var(--shadow-1); */
      width: 442px;
      justify-content: center;
      font-family: "M PLUS 2", sans-serif;
    }

    .btn:hover {
      background: var(--main-color);
      border: 2px solid var(--main-color);
      color: #fff !important;
    }

    .btn span {
      font-size: 20px;
      font-weight: 300;
    }


    /* ===== Secondary Feature (living room + consult) ===== */
    .feature {
      color: #333;
      position: relative;
      margin-bottom: 5rem;
    }

    .feature02 {
      color: #333;
    }

    .feature::before {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
      /* background-color: #EDF0FF; */
      /* background: #f5f3ee; */
      background: #ebe7de;
      box-shadow: var(--shadow-1);
      width: 57%;
      height: 70%;
      top: 33.3%;
      right: 0;
      border-radius: 1rem 0 0 1rem;
    }

    .feature__grid {
      display: grid;
      gap: 6rem;
      grid-template-columns: 1fr 1.2fr;
      align-items: center;
      padding: 9rem 3rem 8rem;
    }


    /* ===== Columns (carousel-like) ===== */
    .columns {
      background: #f3f5f7;
      padding: 6rem 0;
    }

    .section-title-column {
      border-bottom: 1.5px solid #e7ebee;
      padding-bottom: 3rem;
      display: flex;
      justify-content: space-between;
    }

    .section-title-column-text {
      display: flex;
      align-content: center;
      flex-wrap: wrap;
    }

    .columns h2,
    .topics h2 {
      font-family: "M PLUS 2", sans-serif;
      margin: 0;
      font-weight: 300 !important;
      font-size: 45px !important;
    }

    .columns__grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 2rem;
    }

    .column-card {
      margin-top: 3rem;
    }

    .column-card:hover .column-img img {
      transform: scale(1.08);
    }

    .column-card:hover .column-title {
      color: var(--main-color);
    }

    .column-img {
      overflow: hidden;
      border-radius: 6px;
    }

    .column-img img {
      width: 100%;
      transition: transform 0.4s ease;
    }

    .column-tags {
      font-size: 16px;
      color: var(--column-main-color);
      margin: 1rem 0 8px;
    }

    .column-date {
      font-size: 14px;
      color: #999;
      margin: 0 0 8px 0;
    }

    .column-title {
      font-size: 18px;
      margin: 0;
    }


    /* ===== President Message ===== */
    .message {
      position: relative;
      color: #333;
      margin-bottom: 13rem;
    }

    .message::before {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
      /* background-color: #EDF0FF; */
      /* background: #f5f3ee; */
      background: #ebe7de;
      box-shadow: var(--shadow-1);
      width: 57%;
      height: 70%;
      top: 33.3%;
      left: 0;
      border-radius: 0 1rem 1rem 0;
    }

    .message__grid {
      display: grid;
      gap: 6rem;
      grid-template-columns: 1.2fr 1fr;
      align-items: center;
      padding: 9rem 3rem 8rem;
      position: relative;
      z-index: 1;
    }

    /* ===== Topics ===== */
    .topics {
      padding-block: 44px;
      padding: 6rem 0;
    }

    .topics .container01 {
      display: grid;
      grid-template-columns: 1fr 4fr;
      gap: 8rem;
    }

    .topics .section-title {
      font-family: "Gowun Dodum", sans-serif;
      margin-bottom: 1rem;
    }

    /* .topics__list{border-top:1px solid var(--pcn-border)} */
    .topic {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 18px;
      align-items: start;
      padding: 14px 0;
      border-bottom: 1px solid #BFBFBF;
    }

    .topics h2 {
      margin-bottom: 3rem;
    }

    .topics__more {
      margin: 3rem 0;
      display: flex;
      justify-content: flex-end;
    }

    .topics__more .btn {
      background: var(--main-color);
      color: #fff !important;
      border-radius: 0;
      border: 0;
      width: unset;
      font-weight: 300;
      padding: 0 2.5rem 5px;
      align-items: baseline;
    }

    .topics__more .btn:hover {
      opacity: .95;
    }

    .topics__more .btn span {
      font-size: 30px;
    }

    .topics__more .btn i {
      /* font-size: 60%; */
      position: relative;
      top: -2px;
    }


    .mini-banner {
      gap: 4rem;
      margin: 0 4rem;
    }

    .list-link-btn {
      align-content: center;
      width: 312px;
    }

    .list-link-btn a {
      text-decoration: none;
    }

    .list-link-btn a:hover .list-link-btn-title-line {
      border-bottom: 1.5px solid var(--main-color);
    }

    .list-link-btn a:hover .list-link-btn-title-text {
      color: var(--main-color);
    }

    .list-link-btn a:hover .list-link-btn-arrow {
      border-bottom: 1.8px solid var(--main-color);
      border-right: 1.8px solid var(--main-color);
    }

    .list-link-btn-title-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1.5px solid #4a4a4a;
      max-width: 420px;
      padding-right: 10px;
    }

    .list-link-btn-title-text {
      font-size: 20px;
      color: #333;
      font-weight: 300;
      letter-spacing: 0.03em;
      font-family: "M PLUS 2", sans-serif;
    }

    .list-link-btn-arrow {
      width: 35px;
      height: 10px;
      border-bottom: 1.8px solid #333;
      border-right: 1.8px solid #333;
      transform: skewX(40deg);
    }


    /* ===== Responsive ===== */
    @media (max-width: 1024px) {
      .tiles {
        grid-template-columns: repeat(3, 1fr)
      }

      .hero__inner_text  {
        top: 10%;
        bottom: 0;
      }

      .band__grid {
        grid-template-columns: 1fr
      }

      .feature__grid {
        grid-template-columns: 1fr
      }

      .message__grid {
        grid-template-columns: 1fr
      }

      .message__wrap {
        grid-template-columns: 1fr
      }

      .footer__grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (max-width: 560px) {
      .tiles {
        grid-template-columns: repeat(2, 1fr)
      }
      .hero__inner_text  {
        top: 6%;
      }

      .topic {
        grid-template-columns: 1fr
      }
    }

    @media (max-width: 1599px) {
      .hero__media {
        height: 700px;
      }

      .hero__headline {
        font-size: 62px;
      }

      .hero__headline rt {
        font-size: 24px;
      }

      .hero__sub {
        font-size: 28px;
      }

      .hero__inner {
        bottom: -17%;
      }

      .tile {
        font-size: 20px;
      }

      .tile__icon {
        width: 90px;
      }

      .band__p {
        font-size: 18px;
      }

      .band__grid {
        grid-template-columns: 1fr 1fr;
        padding: 13rem 3rem 12rem;
        gap: 3rem;
      }

      .band__panel--text {
        padding: 0 3.5rem;
      }

      .feature__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
      }

      .message__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
      }

      .columns h2,
      .topics h2 {
        font-size: 38px !important;
      }

      .list-link-btn {
        width: 280px;
      }

      .topics .container01 {
        gap: 4rem;
      }

      .band::before,
      .band02::before,
      .feature::before,
      .message::before {
        height: 500px;
      }

      .band {
        margin-bottom: 0;
      }

      .band02,
      .feature {
        margin-bottom: 3rem;
      }

      .feature .feature__grid {
        padding: 5rem 3rem 4rem;
      }

      .feature02 .feature__grid,
      .band02 .band__grid,
      .message__grid {
        padding: 7rem 3rem 6rem;
      }

      .band::before {
        top: 36.3%;
      }

      .band02::before {
        top: 33.3%;
        /* height: 70%; */
      }
    }

    @media (max-width: 1399px) {
      .message {
        margin-bottom: 16rem;
      }

      .message__grid {
        padding: 6rem 3rem 0rem;
      }

      .band__panel--text {
        padding: 0;
      }

      .band__grid {
        padding: 13rem 3rem 9rem;
      }

      .band::before {
        top: 41.3%;
        height: 470px;
      }

      .band02::before {
        top: 33.3%;
        /* height: 70%; */
      }

      .feature02::before {
        height: 470px;
      }

      .feature02 .feature__grid {
        padding: 5rem 3rem 4rem;
      }
    }

    /* @media (max-width: 1399px) {
      .feature__grid {
        padding: 2rem 3rem 8rem;
      }
      .band02 .band__grid, .feature02 .feature__grid, .message__grid {
        padding: 5rem 3rem 8rem;
      }
    } */

    @media (max-width: 1279px) {
      .band__p {
        margin: 2rem 0;
      }

      .btn {
        padding: 1.2rem;
      }

      .btn span {
        font-size: 18px;
      }

      .band__panel--text {
        padding: 0;
      }

      .band__grid,
      .feature__grid,
      .message__grid {
        gap: 4rem;
      }

      .message__grid {
        padding: 8rem 3rem;
      }

      .list-link-btn {
        width: 240px;
      }

      .list-link-btn-title-text {
        font-size: 18px;
      }

      .list-link-btn-arrow {
        width: 28px;
      }

      .band::before,
      .band02::before,
      .feature::before,
      .message::before {
        height: 470px;
      }

      .feature::before {
        top: 36.3%;
      }

      .band02 .band__grid {
        padding: 5rem 3rem 6rem;
      }

      .message {
        margin-bottom: 10rem;
      }

      .message__grid {
        padding: 6rem 3rem;
      }
    }

    @media (max-width: 1200px) {
      .hero__media {
        height: 650px;
      }

      .hero__headline {
        font-size: 55px;
      }

      .hero__headline rt {
        font-size: 22px;
      }

      .hero__sub {
        font-size: 25px;
      }

      .tile__icon {
        width: 85px;
      }

      .tile {
        font-size: 18px;
      }

      .band__p br {
        display: none;
      }

      .band__p {
        margin: 1.5rem 0;
      }

      .band__grid {
        padding: 12rem 3rem 6rem;
      }

      .band02 .band__grid,
      .feature__grid {
        padding: 7rem 3rem 6rem;
      }

      .message__grid {
        padding: 6.5rem 3rem;
      }

      .message .band__title {
        font-size: 42px !important;
      }

      .topics {
        padding: 5.5rem 0 3rem;
      }

      .columns h2,
      .topics h2 {
        font-size: 34px !important;
      }

      .feature .feature__grid {
        padding: 5rem 3rem 4rem;
      }

      .feature02 .feature__grid {
        padding: 5rem 3rem 0rem;
      }

      .message__grid {
        padding: 9.5rem 3rem;
      }

      .feature02::before {
        height: 445px !important;
      }

      .message {
        margin-bottom: 7rem;
      }
    }

    @media (max-width: 1024px) {
      .br-sp {
        display: block;
      }

      /* .hero__media {
        background: url("../img/top-MV.png") bottom left 82% /cover no-repeat;
      } */

      /* .hero__media::after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 60%);
        z-index: 0;
      } */

      .hero__headline span {
        margin-bottom: 1.2rem;
        display: inline-block;
      }

      .band02,
      .feature {
        margin-bottom: 0;
      }

      .feature__grid,
      .band__grid,
      .message__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .text-center-sp {
        text-align: center;
      }

      .message-bg {
        width: 100%;
      }

      .message-bg img {
        width: 100%;
      }

      .message__grid .band__panel--img {
        z-index: 2;
      }

      .columns {
        padding: 5rem 0;
      }

      .columns__grid {
        grid-template-columns: 1fr 1fr;
      }

      .topics {
        padding: 4rem 0 5rem;
      }

      .topics__more .btn {
        padding: 0 1.5rem 5px 2rem;
      }

      .topics__more .btn span {
        font-size: 25px;
      }

      .topics .container01 {
        grid-template-columns: 1fr;
      }

      .section-title-topic {
        display: flex;
        justify-content: space-between;
      }

      .topics h2 {
        margin-bottom: 0;
      }

      .mini-banner {
        gap: 2rem;
        margin: 0;
      }

      /* .band::before, .band02::before, .feature::before, .feature02:::before, .message::before {
        display: none;
      } */
      .message {
        margin-bottom: 0;
      }
    }

    @media (max-width: 902px) {
      .hero__sub {
        margin-bottom: 3rem;
      }
    }

    @media (max-width: 767px) {
      /* .hero__media {
        background: url("../img/top-MV.png") bottom left 58% /cover no-repeat;
      } */

      .band__grid {
        padding: 10rem 3rem 5rem;
      }
      .feature .feature__grid, .band02 .band__grid, .feature__grid, .feature02 .feature__grid, .message__grid {
        padding: 5rem 3rem;
      }
      .feature, .feature02 {
        /* background: #eef0ff; */
        background: #ebe7de;
      }
      .band, .band02, .message {
        background: transparent;
      }
      .band::before,
      .feature::before,
      .message::before {
        display: none;
      }
    }

    @media (max-width: 560px) {
      .hero__media {
        height: 750px;
        /* background: url("../img/top-MV.png") bottom left 45% /cover no-repeat; */
      }

      .hero__headline {
        font-size: 45px;
      }

      .hero__headline rt {
        font-size: 18px;
      }

      .hero__sub {
        font-size: 22px;
      }

      .hero__sub,
      .tiles,
      .hero__headline {
        padding: 0 2rem;
      }

      .tile__icon {
        width: 80px;
      }

      .band__grid,
      .feature__grid,
      .message__grid {
        gap: 1.5rem;
      }

      .band__grid {
        padding: 10rem 2rem 5rem;
      }

      .feature .feature__grid, .band02 .band__grid, .feature__grid, .feature02 .feature__grid, .message__grid {
        padding: 5rem 2rem;
      }

      .btn {
        width: 70%;
      }

      .list-link-btn {
        width: 185px;
      }
    }

    @media (max-width: 500px) {
      .hero__media {
        height: 700px;
      }

      .hero__sub {
        font-size: 18px;
      }

      .tile {
        font-size: 16px;
      }

      .tile__icon {
        width: 75px;
      }

      .hero__sub,
      .tiles,
      .hero__headline {
        padding: 0 1.5rem;
      }

      .band__grid {
        padding: 10rem 1.5rem 4.5rem;
      }

      .feature h3,
      .band h3,
      .message h3 {
        margin: 1rem 0 0 !important;
      }

      .feature .feature__grid, .band02 .band__grid, .feature__grid, .feature02 .feature__grid, .message__grid {
        padding: 4.5rem 1.5rem;
      }

      .band__p {
        margin: 1rem 0 1.5rem;
        font-size: 16px;
      }

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

      .btn {
        width: 80%;
      }

      .message .band__title {
        font-size: 32px !important;
      }

      .message__grid {
        gap: 1.5rem;
      }

      .columns {
        padding: 4rem 0;
      }

      .columns .container01 {
        padding: 0 1.5rem;
      }

      .columns__grid {
        grid-template-columns: 1fr;
      }

      .topics {
        padding: 3rem 0 4rem;
      }

      .topic {
        font-size: 14px;
      }

      .topics__more {
        margin: 2rem 0;
      }

      .topics__more .btn span {
        font-size: 20px;
      }

      .list-link-btn-title-text {
        font-size: 16px;
      }

      .list-link-btn-arrow {
        width: 20px;
      }

      .list-link-btn {
        width: 150px;
      }

      .topics .container01 {
        gap: 2rem;
      }

      .section-title-column {
        padding-bottom: 2rem;
      }

      .column-card {
        margin-top: 2rem;
      }

      .columns h2,
      .topics h2 {
        font-size: 28px !important;
      }
    }

    @media (max-width: 408px) {
      .hero__media {
        height: 680px;
      }

      .hero__headline {
        font-size: 35px;
      }

      .hero__sub, .hero__headline {
        padding: 0;
      }

      .hero__headline span {
        margin-bottom: 1rem;
      }

      .hero__headline rt {
        font-size: 14px;
      }

      .hero__sub {
        font-size: 16px;
      }

      .band__grid {
        padding: 10rem 1.5rem 4.5rem;
      }

      .band__grid {
        padding: 9.5rem 1.5rem 4rem;
      }
      .feature .feature__grid, .band02 .band__grid, .feature__grid, .feature02 .feature__grid, .message__grid {
        padding: 4rem 1.5rem;
      }
    }

    @media (max-width: 333px) {
      .hero__headline {
        font-size: 32px;
      }

      .hero__sub {
        margin-bottom: 2rem;
      }
    }

/* ===== Topics (front page) ===== */
.topic_container {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #e6eef5;
}

.topic_container li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 26px 10px;
  border-bottom: 1px solid #e6eef5;
  align-items: start;
  background: #fff;
}

.topic_side {
  display: flex;
  color: #6b7280;
  font-size: 14px;
  align-items: center;
  gap: 12px;
}

.topic_date {
  color: #6b7280;
  font-weight: 500;
  font-size: 15px;
}

.topic_tag {
  display: inline-block;
  padding: 4px 15px;
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
  border: 1px solid rgba(11, 105, 214, 0.12);
  width: max-content;
}

.topic_tag.news {
  background: var(--main-color);
}

.topic_tag.notice {
  background: #918b6c;
}

.topic_content a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.topic_title {
  font-size: 18px;
  color: #0f172a;
  margin: 0;
  line-height: 1.4;
  font-weight: 400;
}

.topic_container li:hover {
  background: #fbfdff;
}

@media (max-width: 720px) {
  .topic_container li {
    grid-template-columns: 1fr;
    padding: 20px 10px;
  }

  .topic_side {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    align-items: center;
  }

  .topic_date {
    font-size: 14px;
  }

  .topic_title {
    font-size: 16px;
  }
}