@media screen and (min-width: 769px), print {
  .intro {
    font-size: 1.5rem;
    color: #000;
    line-height: 31.89px;
    text-align: center;
    background: url(../images/intro_bg.png) 0 0 no-repeat;
    -moz-background-size: cover;
         background-size: cover;
    padding-top: 60px;
    padding-bottom: 70px;
  }
  .intro h3 {
    color: #B52033;
    font-size: 3.8rem;
    margin-bottom: 45px;
  }
  .history_img {
    margin-top: 71px;
  }
  .history_img ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  .history_img ul li {
    width: 50%;
  }
  .history_img ul li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media screen and (max-width: 768px) {
  .intro {
    font-size: 2.92969vw;
    color: #000;
    text-align: center;
    background: url(../images/intro_bg.png) 0 0 no-repeat;
    -moz-background-size: cover;
         background-size: cover;
    padding: 7.8125vw 3.90625vw 9.11458vw;
  }
  .intro h3 {
    color: #B52033;
    font-size: 5.85938vw;
    margin-bottom: 1.95313vw;
  }
  .history_img {
    padding-left: 3.90625vw;
    padding-right: 3.90625vw;
    margin-top: 9.11458vw;
  }
  .history_img ul li img {
    display: block;
    width: 100%;
    height: auto;
  }
}