@media (min-width: 1200px) {
  .p1 {
    width: 100%;
    height: 74.125rem;
    background-size: cover;
    color: white;
  }
  .p1 img {
    display: none;
  }
  .p1-text1 {
    font-size: 2.75rem;
    margin: 5.5rem 0 1.875rem;
  }
  .p1-text2 {
    font-size: 1.25rem;
    text-align: center;
  }
  .p2-text1 {
    font-size: 2.75rem;
    margin: 5.5rem 0 1.875rem;
  }
  .p2-text2 {
    font-size: 1.25rem;
    text-align: center;
    width: 44rem;
  }
  .img-list {
    padding-top: 5.5rem;
  }
  .img-item {
    width: 62.625rem;
    height: 43.625rem;
    margin-bottom: 7rem;
    position: relative;
  }
  .p3 {
    width: 100%;
    height: 63.875rem;
    background-size: cover;
  }
  .p4 {
    width: 100%;
    height: 33.5rem;
    padding: 5% 10%;
  }
  .p4-item.flex-col {
    flex-flow: column-reverse;
  }
  .p4-item {
    width: 21.875rem;
    height: 21.375rem;
    background-size: cover;
    cursor: pointer;
    border-radius: 0.375rem;
    border: 1px solid #ccc;
    color: #ec691a;
    transition: all 0.5s;
  }
  .p4-item img {
    width: 100%;
    opacity: 0;
  }
  .p4-item:hover {
    border: 1px solid #ec691a;
    box-shadow: -0.375rem 1.125rem 4.375rem 0rem rgba(236, 105, 26, 0.09);
  }
  .p4-item:hover .p4-text {
    background-color: #ec691a;
    color: white;
  }
  .p4-item:hover img {
    opacity: 1;
  }
  .p4-text {
    font-size: 1.125rem;
    padding: 0.425rem 1.375rem;
    border: 1px solid #ec691a;
    border-radius: 2rem;
    margin-bottom: 3rem;
  }
}
@media (max-width: 1199px) {
  .p1 {
    width: 100%;
  }
  .p1-text1 {
    font-size: 5.86666667vw;
    margin: 4.58333333vw 0;
  }
  .p1-text2 {
    font-size: 3.2vw;
    width: 82.66666667vw;
    margin-bottom: 6.4vw;
    text-align: center;
  }
  .p2-text1 {
    font-size: 5.86666667vw;
    margin: 4.58333333vw 0 1.5625vw;
  }
  .p2-text2 {
    font-size: 2.66666667vw;
    text-align: center;
    width: 92vw;
  }
  .img-list {
    padding-top: 4.58333333vw;
  }
  .img-item {
    margin-bottom: 5.83333333vw;
    position: relative;
  }
  .p4 {
    width: 100%;
    padding: 5% 10%;
    flex-wrap: wrap;
  }
  .p4-item.flex-col {
    flex-flow: column-reverse;
  }
  .p4-item {
    width: 39.0625vw;
    height: 40.83333333vw;
    margin-bottom: 3.2vw;
    background-size: cover;
    cursor: pointer;
    border-radius: 6px;
    border: 0.0625rem solid #ccc;
    color: #ec691a;
    transition: all 0.5s;
  }
  .p4-item img {
    width: 100%;
  }
  .p4-item:hover {
    border: 1px solid #ec691a;
    box-shadow: -0.3125vw 0.9375vw 3.64583333vw 0 rgba(236, 105, 26, 0.09);
  }
  .p4-item:hover .p4-text {
    background-color: #ec691a;
    color: white;
  }
  .p4-text {
    font-size: 2.4vw;
    padding: 0.625vw 1.66666667vw;
    border: 1px solid #ec691a;
    border-radius: 6.25vw;
    margin-bottom: 2.5vw;
  }
}