.top__pic {
  width: 100%;

  background-color: rgb(228, 222, 222);
}
.pic_01 {
  width: 20%;
  display: block;
  text-align: center;
  float: none;
  margin: auto;
  margin-top: 2%;
}

@media only screen and (max-width:1921px) {
  .pic_01 {
    width: 25%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 3%;
  }
}

@media only screen and (max-width:1537px) {
  .pic_01 {
    width: 30%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 3%;
  }
}

@media only screen and (max-width:1400px) {
  .pic_01 {
    width: 30%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 9%;
  }
}

@media only screen and (max-width:1367px) {
  .pic_01 {
    width: 30%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 4%;
  }
}

@media only screen and (max-width:1025px) {
  .pic_01 {
    width: 30%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 5%;
  }
}

@media only screen and (max-width:961px) {
  .pic_01 {
    width: 30%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 5%;
  }
}

@media only screen and (max-width:835px) {
  .pic_01 {
    width: 35%;
    padding-left: 10%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 6%;
  }
}

@media only screen and (max-width:821px) {
  .pic_01 {
    width:35%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 6%;
  }
}

@media only screen and (max-width:811px) {
  .pic_01 {
    width: 35%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 6%; 
  }
}

@media only screen and (max-width:745px) { 
  .pic_01 {
    width: 35%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 7%;
    
  }

}

@media only screen and (max-width:602px) { 
  .pic_01 {
    width: 35%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 9%;
  }
}

@media only screen and (max-width:520px) { 
  .pic_01 {
    width: 50%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 10%;
  }
}

@media only screen and (max-width:481px) {
  .pic_01 {
    padding-left: 1%;
    width: 50%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 15%;
  }
}

@media only screen and (max-width:429px) {
  .pic_01 {
    padding-left:5%;
    width: 50%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 17%;
  }
}

@media only screen and (max-width:413px) {
  .pic_01 {
    width: 50%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 18%;
  }
}

@media only screen and (max-width:391px) {
  .pic_01 {
    width: 50%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 17%;
  }
}

@media only screen and (max-width:394px) {
  .pic_01 {
    width: 50%;
    display: block;
    text-align: center;
    float: none;
    margin: auto;
    margin-top: 19%;
  }
}