.portal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f3f1ef;
    z-index: 9999;
    padding: 5% 3%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .portal_wrap {
    display: flex;
    justify-content: space-evenly;
    gap: 80px;
  }
  
  .btnp--portalClose {
      position: fixed;
      right: 16px;
      top: 16px;
      width:40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .portal_header {
    width: 20%;
    min-width: clamp(200px, 20vw, 400px);
  }
  
  .portal .logo img{
      width: 257px;
  }
  
  .portal_header .tit {
    color: #686868;
    font-size: clamp(16px, 2.3vw, 24px); /* 1024 */
    padding-top: 38px;
    line-height: 1.4;
  }
  
  .portal_header .tit strong {
    font-weight: 700;
  }
  
  .portal_body {
    width: 75%;
    max-width: 1140px;
  }
  
  .portal .site_list {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 28px;
  }
  
  .portal .site_list li {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    /*aspect-ratio: 1/1;*/
  }
  
  .portal .site_list li::before,
  .portal .site_list li::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    transition: 0.4s;
  }
  
  .portal .site_list li:last-child:before,
  .portal .site_list li:last-child:after{
      display: none;
  }
  
  .site_btn_1::before { background-image: url(../img/main/portal/portal_1.png); }
  .site_btn_2::before { background-image: url(../img/main/portal/portal_2.png); }
  .site_btn_3::before { background-image: url(../img/main/portal/portal_3.png); }
  .site_btn_4::before { background-image: url(../img/main/portal/portal_4.png); }
  .site_btn_5::before { background-image: url(../img/main/portal/portal_5.png); }
  
  .site_btn_1::after { background-image: url(../img/main/portal/portal_1_on.png); }
  .site_btn_2::after { background-image: url(../img/main/portal/portal_2_on.png); }
  .site_btn_3::after { background-image: url(../img/main/portal/portal_3_on.png); }
  .site_btn_4::after { background-image: url(../img/main/portal/portal_4_on.png); }
  .site_btn_5::after { background-image: url(../img/main/portal/portal_5_on.png); }
  
  .site_btn_1::after,
  .site_btn_2::after,
  .site_btn_3::after,
  .site_btn_4::after,
  .site_btn_5::after {
    opacity: 0;
  }
  
  .portal .site_list li:hover::before {
    opacity: 0;
  }
  .portal .site_list li:hover::after {
    opacity: 1;
  }
  
  .portal .site_list li > a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
  }
  
  .portal .site_list .txt {
    position: absolute;
    inset: 0;
    z-index: 2;
    transition: 0.3s;
    display: flex;
    flex-flow: column nowrap;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 10px;
      padding: 20px;
  }
  
  .portal .site_list .txt {
      font-size: clamp(20px, 2.8vw, 36px); /* 1280 */
      font-weight: 700;
      color: #000;
      line-height: 1;
  }
  
  .portal .site_list .txt.hover {
    opacity: 0;
    .tit {
        line-height: 1;
    }
  }
  
  .portal .site_list li:hover .default {
    opacity: 0;
  }
  
  .portal .site_list li:hover .hover {
    opacity: 1;
  }
  
  
  .txt.hover .tit {
      font-size: clamp(20px, 2.8vw, 36px);
      font-weight: 700;
      color: #fff;
  }
  .portal .site_list .txt.hover .sub {
      font-size: clamp(14px, 1.5vw, 20px);
      font-weight: 300;
      line-height: 130%;
      color: #fff;
  }
  
  .portal_info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
  }
  
  .portal_info .logo {
    margin-bottom: 10px;
  }
  
  .portal_info .copyright {
      margin-top: 24px;
      font-size: 13px;
      color: #666;
      line-height: 1.3;
      letter-spacing: -0.02em;
  }
  .portal_info .copyright p{
      font-size: 13px;
      margin-top: 14px;
  }
  .portal_info .info{
      margin-top: 10%;
      padding-left: 18px;
      border-left: 1px solid #686868;
  }
  .portal_info .info strong {
      display: block;
      font-size: 18px;
      margin-bottom: 9px;
  }
  .portal_info .info p {
      color: #474747;
  }
  
  
  @media (max-width: 1300px) {
    .portal {
      padding: 10% 3%;
    }
  
    .portal_wrap {
      flex-direction: column;
      gap: 16px;
    }
    .portal .tit br {
      display: none;
    }
  
    .portal .site_list li a {
      min-height: 280px;
    }
  
    .portal_header,
    .portal_body {
      width: 100%;
    }
  }
  
  @media screen and (max-width: 1024px) {
      .portal_info .info {
          display: none;
      }
      .portal .site_list {
          height: 50vh;
      }
      .portal .site_list li a {
        min-height: auto;
      }
  }
  
  @media (max-width: 768px) {
        .portal .logo img {
            width: 140px;
        }
        .portal {
            padding: 4%;
            overflow-x: auto;
        }
        .portal.on {
            justify-content: flex-start;
        }
        .portal_wrap {
            gap: 44px;
        }
    .portal .site_list {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .portal_header {
        text-align: center;
    }
    .portal_body {
        height: calc(100% - 120px);
    }
    .portal .site_list .txt.hover {
        align-items: flex-start;
    }
    .portal .site_list .txt.hover .sub {
        display: none;
    }
    .portal .site_list li a {
        min-height: auto;
    }
    .portal_info {
        justify-content: center;
    }
    .portal_info .copyright, .portal_info .info {
        display: none;
        }
    .portal_info .f_logo {
        display: block;
        }
  }