.vpf-board {  
  .vpf-area {
    ul {
      display: flex; flex-wrap: wrap; gap: 15px;
      li {
        position: relative; width: calc(50% - 8px); border: 1px solid var(--line-color);
        .box {
          .head {
            position: relative; background: #f6f8ff; border-bottom: 1px solid var(--line-color); padding: 0 15px; line-height: 45px; font-size: 1.4rem; color: #20368a; font-weight: 500; 
            a {
              @include ellipsis; color: #20368a;
              &:hover {
                text-decoration: underline;
              }
            }
          }
          .body {
            padding: 20px;
            .item {
              position: relative; display: flex;
              &:not(:last-child) {
                padding-bottom: 6px;
              }
              dt {
                width: 130px; font-size: 1.2rem; font-weight: 600; color: #8A8A8A;
              }
              dd {
                width: calc(100% - 130px); padding-left: 5px; font-size: 1.2rem; font-weight: 500; line-height: 1.7;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .vpf-board {
    .vpf-area {
      ul {
        li {
          width: 100%;
        }
      }
    }
  }
}

@media (max-width: 400px) {
  .vpf-board {
    .vpf-area {
      ul {
        li {
          .box {
            .body {
              padding: 15px; 
              .item {
                dt {
                  width: 100px;
                }
                dd {
                  width: calc(100% - 100px);
                }
              }
            }
          }
        }
      }
    }
  }
}