#banner {
  height: 8rem;
  background: url("../../images/banner.jpg");
  background-size: cover;
  overflow: hidden;
}
#banner .content {
  width: 14.4rem;
  height: 100%;
  margin: 0 auto;
}
#banner .text {
  width: 7.26rem;
  background-color: #F9F6F0;
  border-radius: 0.12rem;
  float: right;
  margin: 2.25rem 0 0 0;
  box-sizing: border-box;
  padding: 0.56rem;
}
#banner .text .title {
  font-size: 0.3rem;
  font-family: Helvetica;
  color: #A0211C;
}
#banner .text .con {
  margin-top: 0.24rem;
  font-size: 0.18rem;
  font-family: Helvetica;
  color: #333333;
  line-height: 0.28rem;
}
#benefits .content {
  width: 14.4rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#benefits .item img {
  height: 1.05rem;
  width: 1.05rem;
  border-radius: 50%;
  border: 0.06rem solid #FFF;
}
#benefits .item p.text {
  margin-top: 0.24rem;
  display: block;
  width: 1.96rem;
  font-size: 0.2rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 0.28rem;
}
#admission .content {
  width: 14.4rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#admission .item {
  border: 0.12rem solid #FFF;
  box-shadow: 0.01rem 0.03rem 0.06rem 0.02rem rgba(0, 0, 0, 0.04);
  border-radius: 0.12rem;
  background-color: #FFF;
}
#admission .item .con {
  width: 3.11rem;
  height: 3.21rem;
  padding: 0.4rem;
  box-sizing: border-box;
  background-size: cover;
  border-radius: 0.12rem;
}
#admission .item p.name {
  font-size: 0.24rem;
  font-family: Helvetica;
  color: #FFFFFF;
  line-height: 0.28rem;
  text-align: center;
}
#admission .item p.synopsis {
  margin-top: 0.24rem;
  font-size: 0.18rem;
  font-family: Helvetica;
  color: #FFFFFF;
  line-height: 0.27rem;
}
#programs .content {
  width: 14.4rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#programs .item {
  width: 7.04rem;
  height: 1.2rem;
  background: #A0211C;
  color: #A0211C;
  border-radius: 0.12rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#programs .item em {
  margin-left: 0.4rem;
  font-size: 0.27rem;
  background-color: #FFF;
  display: block;
  width: 0.54rem;
  height: 0.54rem;
  border-radius: 50%;
  line-height: 0.54rem;
  text-align: center;
}
#programs .item p.text {
  margin-left: 0.24rem;
  font-size: 0.2rem;
  font-family: Helvetica;
  color: #FFFFFF;
  line-height: 0.24rem;
}
#programs a {
  transition: 0.3s;
}
#programs a:hover .item {
  background-color: #70100C;
  color: #70100C;
}
#schools {
  height: 6.67rem;
  margin-top: 0.64rem;
  background: url("../../images/schools.jpg") no-repeat;
  background-size: cover;
}
#schools .content {
  width: 14.4rem;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
  text-align: center;
  box-shadow: 0.01rem 0.03rem 0.06rem 0.02rem rgba(0, 0, 0, 0.04);
  border-radius: 0.12rem;
  overflow: hidden;
}
#schools .item {
  box-sizing: border-box;
  height: 1.85rem;
  flex: 0 0 33.3%;
  background-color: #FFF;
  border: 0.01rem solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
#schools .item p.name {
  font-size: 0.24rem;
  font-family: Helvetica;
  color: #333333;
  line-height: 0.28rem;
}
#schools .item a.arrow {
  display: block;
  width: 0.56rem;
  height: 0.56rem;
  position: relative;
  transition: 0.3s;
  transform-style: preserve-3d;
}
#schools .item a.arrow .front,
#schools .item a.arrow .back {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  background-color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
#schools .item a.arrow .front {
  background-color: #FFF;
  color: #A0211C;
  transform: translateZ(0.001rem) rotateX(0deg);
}
#schools .item a.arrow .back {
  transform: translateZ(-0.001rem) rotateX(180deg);
  color: #FFF;
}
#schools .item a.arrow .back em {
  background-color: #A0211C;
}
#schools .item a.arrow em {
  display: block;
  height: 0.56rem;
  width: 0.56rem;
  line-height: 0.56rem;
  font-size: 0.24rem;
  border-radius: 50%;
}
#schools .item a.m_arrow {
  display: none;
}
#schools .item:hover a.arrow {
  transform: rotateX(180deg);
}
#contact_us {
  width: 14.4rem;
  margin: 0.24rem auto 0;
}
#contact_us p {
  text-align: center;
  font-size: 0.16rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 0.24rem;
}
#contact_us p strong {
  color: #A0211C;
}
.common {
  overflow: hidden;
}
.common h3.title {
  padding: 0.64rem 0;
  text-align: center;
  height: 0.48rem;
  font-size: 0.4rem;
  font-family: Helvetica-Bold, Helvetica;
  font-weight: bold;
  color: #333333;
  line-height: 0.48rem;
}
@media (max-width: 1024px) {
  #banner {
    height: 8.72rem;
    background: url("../../images/banner-m.jpg");
    background-size: cover;
    overflow: unset;
    margin-bottom: 3.44rem;
  }
  #banner .content {
    padding-top: 5.44rem;
    width: 100%;
    height: 100%;
    margin: unset;
  }
  #banner .text {
    width: 6.86rem;
    height: 6.72rem;
    background-color: #F9F6F0;
    border-radius: 0.12rem;
    float: unset;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0.4rem;
  }
  #banner .text .title {
    height: auto;
    font-size: 0.34rem;
    font-family: Helvetica;
    color: #A0211C;
    line-height: 0.42rem;
    white-space: unset;
  }
  #banner .text .con {
    margin-top: 0.24rem;
    font-size: 0.3rem;
    font-family: Helvetica;
    color: #333333;
    line-height: 0.44rem;
  }
  #benefits .content {
    width: 6.86rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  #benefits .item {
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
  }
  #benefits .item img {
    height: 0.93rem;
    width: 0.93rem;
    border-radius: 50%;
    border: 0.06rem solid #FFF;
  }
  #benefits .item p.text {
    flex: 1;
    margin: 0 0 0 0.24rem;
    display: block;
    font-size: 0.3rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 0.36rem;
  }
  #admission .content {
    width: 6.86rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  #admission .item {
    margin-top: 0.24rem;
    border: 0.12rem solid #FFF;
    box-shadow: 0.01rem 0.03rem 0.06rem 0.02rem rgba(0, 0, 0, 0.04);
    border-radius: 0.12rem;
    background-color: #FFF;
  }
  #admission .item .con {
    width: 6.62rem;
    height: 2.89rem;
    padding: 0.4rem;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    border-radius: 0.12rem;
  }
  #admission .item p.name {
    font-size: 0.34rem;
    font-family: Helvetica;
    color: #FFFFFF;
    line-height: 0.41rem;
    text-align: center;
  }
  #admission .item p.synopsis {
    margin-top: 0.24rem;
    font-size: 0.3rem;
    font-family: Helvetica;
    color: #FFFFFF;
    line-height: 0.36rem;
  }
  #programs .content {
    width: 6.86rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  #programs .item {
    margin-top: 0.24rem;
    width: 100%;
    height: 1.18rem;
    background: #A0211C;
    color: #A0211C;
    border-radius: 0.12rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #programs .item em {
    margin-left: 0.4rem;
    font-size: 0.27rem;
    background-color: #FFF;
    display: block;
    width: 0.54rem;
    height: 0.54rem;
    border-radius: 50%;
    line-height: 0.54rem;
    text-align: center;
  }
  #programs .item p.text {
    margin-left: 0.24rem;
    font-size: 0.3rem;
    font-family: Helvetica;
    color: #FFFFFF;
    line-height: 0.36rem;
  }
  #programs a {
    transition: 0.3s;
  }
  #programs a:hover .item {
    background-color: #70100C;
    color: #70100C;
  }
  #schools {
    height: 10.44rem;
    margin-top: 0.4rem;
    background: url(../../images/schools-m.jpg) no-repeat;
    background-size: cover;
  }
  #schools .content {
    width: 6.86rem;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    flex-flow: column wrap;
    text-align: center;
    box-shadow: 0.01rem 0.03rem 0.06rem 0.02rem rgba(0, 0, 0, 0.04);
    border-radius: unset;
    overflow: hidden;
  }
  #schools .item {
    margin-top: 0.24rem;
    padding: 0 0.4rem;
    box-sizing: border-box;
    width: 100%;
    height: 1.18rem;
    flex: unset;
    background-color: #FFF;
    border: 0.01rem solid transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.12rem;
  }
  #schools .item p.name {
    font-size: 0.32rem;
    font-family: Helvetica;
    color: #333333;
    line-height: 0.38rem;
  }
  #schools .item a.arrow {
    display: none;
  }
  #schools .item a.m_arrow {
    font-size: 0.32rem;
    color: #961e1a;
    display: block;
  }
  #contact_us {
    width: 6.86rem;
    margin: 0 auto;
  }
  #contact_us p {
    padding-bottom: 0.4rem;
    text-align: unset;
    font-size: 0.3rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 0.4rem;
  }
  #contact_us p:last-child {
    padding-bottom: unset;
  }
  #contact_us p strong {
    color: #A0211C;
  }
  .common {
    overflow: hidden;
  }
  .common h3.title {
    padding: 0.64rem 0 0.4rem;
    text-align: center;
    height: 0.48rem;
    font-size: 0.4rem;
    font-family: Helvetica-Bold, Helvetica;
    font-weight: bold;
    color: #333333;
    line-height: 0.48rem;
  }
}