.refer {

  width: 1080px;

  margin: 60px auto 200px;

}



.refer li {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 50px;

  margin: 0 0 80px;

  align-items: center;

}



.refMg {

  border-radius: 10px;

  overflow: hidden;

}



.refMg img {

  display: block;

  width: 100%;

}



.refTxt h3 {

  font-size: 30px;

  margin: 0 0 40px;

  text-align: center;

}



.refTxt h3 a {

  color: #204E92;

}



.refTxt p {

  margin: 25px 0 0;

  font-size: 18px;

}


.refTxt img{
  display: block;
  margin: 30px auto;
  max-width: 100%;
}



.refer li:nth-child(odd) .refMg {

  order: 2;

}



@media screen and (max-width:1280px) {



  .refer {

    width: 90%;

    margin: 60px auto 100px;

  }



  .refer li {

    gap: 30px;

    margin: 0 0 40px;

  }



  .refTxt h3 {

    font-size: 26px;

    margin: 0 0 10px;

  }



  .refTxt p {

    margin: 15px 0 0;

    font-size: 16px;

  }



}







@media screen and (max-width:1024px) {



  .refer li {

    gap: 15px;

    grid-template-columns: repeat(1, 1fr);

    margin: 0 0 40px;

  }



  .refer {

    width: 90%;

    margin: 30px auto 50px;

  }



  .refTxt h3 {

    font-size: 22px;

    margin: 0 0 10px;

  }



  .refTxt p {

    margin: 10px 0 0;

    font-size: 16px;

  }



  .refer li:nth-child(even) .refMg {

    order: 0;

  }







}