body {
  font-family: 'Microsoft Yahei';
}
#section1 > img,
#section2 > img,
#section3 > img,
#section5 > img {
  position: absolute;
  left: 50%;
}
.title {
  width: 39%;
  top: 3.7%;
  margin-left: -19.5%;
}
#section1 {
  width: 100%;
  height: 100%;
  background: url('../images/section1.jpg') no-repeat 0 0;
  background-size: 100% 100%;
}
#section1 .bannerBox {
  position: absolute;
  width: 87.5%;
  left: 50%;
  top: 8.7%;
  margin-left: -43.75%;
}
#section1 .bannerBox > div {
  position: relative;
  width: 100%;
}
#section1 .bannerBox > div .banner {
  width: 100%;
}
#section1 .bannerBox > div .btn1 {
  position: absolute;
  width: 54.57%;
  bottom: 13.27%;
  left: 50%;
  margin-left: -27.285%;
}
#section1 .bannerBox > div .btn1 img {
  width: 100%;
}
#section2 {
  background-color: #f8b500;
}
#section2 .item {
  position: absolute;
  left: 50%;
  width: 87.5%;
  margin-left: -43.75%;
}
#section2 .item img {
  width: 100%;
}
#section2 .ZOUKEI {
  top: 15.2%;
}
#section2 .DESIGN {
  top: 43.48%;
}
#section2 .MANGA {
  top: 71.66%;
}
#section3 {
  position: relative;
  background-color: #fff;
}
#section3 .pro_subtitle {
  width: 47.5%;
  top: 14.24%;
  margin-left: -23.75%;
}
#section3 .item {
  width: 88.75%;
  margin-left: -44.375%;
}
#section3 .pro1 {
  top: 19.99%;
}
#section3 .pro2 {
  top: 38.83%;
}
#section3 .pro3 {
  top: 57.87%;
}
#section3 .pro4 {
  top: 74.51%;
}
#section3 .popLayer {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}
#section3 .popLayer > div {
  position: absolute;
}
#section3 .popLayer .mask {
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
#section3 .popLayer .itemListBox {
  left: 0;
  bottom: 50%;
  width: 100%;
}
#section3 .popLayer .itemListBox > div {
  margin-bottom: -46%;
  background-color: #fff;
  padding: .24rem 0 .3rem;
}
#section3 .popLayer .itemListBox ul {
  width: 87.5%;
  margin: 0 auto;
}
#section3 .popLayer .itemListBox ul li {
  display: none;
  width: 100%;
}
#section3 .popLayer .itemListBox ul .show {
  display: block;
}
#section3 .popLayer .itemListBox .itemTitle {
  width: 100%;
  padding-bottom: .04rem;
  border-bottom: 1px solid #e4e4e4;
}
#section3 .popLayer .itemListBox .itemTitle h4 {
  font-size: .18rem;
  color: #000;
  line-height: .26rem;
}
#section3 .popLayer .itemListBox .itemTitle p {
  font-size: .12rem;
  color: #f00;
  line-height: .18rem;
}
#section3 .popLayer .itemListBox .itemDes {
  padding-top: .1rem;
}
#section3 .popLayer .itemListBox .itemDes > div {
  float: left;
}
#section3 .popLayer .itemListBox .itemDes .left {
  width: 70%;
  padding-right: 4%;
  box-sizing: border-box;
}
#section3 .popLayer .itemListBox .itemDes .left p {
  font-size: .12rem;
  color: #000;
  line-height: .18rem;
}
#section3 .popLayer .itemListBox .itemDes .left div {
  padding-top: .04rem;
}
#section3 .popLayer .itemListBox .itemDes .left div img {
  width: 100%;
}
#section3 .popLayer .itemListBox .itemDes .right {
  width: 30%;
}
#section3 .popLayer .itemListBox .itemDes .right img {
  width: 100%;
}
#section3 .popLayer .closeBtn {
  top: 5%;
  right: .1rem;
  width: 30px;
}
#section3 .popLayer .closeBtn img {
  width: 100%;
}
#section3 .show {
  display: block;
}
#section4 {
  background-color: #f8d2e3;
}
#section4 .teacher_sub,
#section4 .title {
  position: absolute;
  left: 50%;
}
#section4 .teacher_sub {
  width: 92%;
  top: 14.99%;
  margin-left: -46%;
}
#section4 .teacher1,
#section4 .teacher2,
#section4 .teacher3 {
  position: absolute;
}
#section4 .teacher1 {
  width: 82%;
  right: 2.5%;
  top: 22%;
}
#section4 .teacher2 {
  width: 83%;
  left: 2.5%;
  top: 36%;
}
#section4 .teacher3 {
  width: 84%;
  right: 2.5%;
  top: 65%;
}
#section5 {
  background-color: #e5e5e5;
}
#section5 > div {
  position: absolute;
  top: 21.89%;
  left: 50%;
  width: 87.5%;
  height: 65%;
  margin-left: -43.75%;
}
#section5 > div ul {
  width: 100%;
  height: 100%;
  margin-left: -0.999%;
}
#section5 > div ul li {
  float: left;
  width: 30%;
  background-color: #fff;
  margin-left: 3.33%;
  margin-bottom: 9.2%;
}
#section5 > div ul li > img {
  width: 100%;
}
#section5 .btn {
  position: absolute;
  left: 50%;
  width: 47.75%;
  bottom: 5.25%;
  margin-left: -23.875%;
}
#section5 .btn img {
  width: 100%;
}
@media screen and (max-height: 480px) {
  #section1 .bannerBox {
    width: 84%;
    top: 6%;
    margin-left: -42%;
  }
}
@media screen and (max-width: 360px) {
  #section1 .bannerBox {
    width: 84%;
    top: 6%;
    margin-left: -42%;
  }
  #section3 {
    background-color: #fff;
  }
  #section3 .title {
    top: 3%;
  }
  #section3 .pro_subtitle {
    top: 14.24%;
  }
  #section3 .pro1 {
    top: 19%;
  }
  #section3 .pro2 {
    top: 39%;
  }
  #section3 .pro3 {
    top: 58.87%;
  }
  #section3 .pro4 {
    top: 76%;
  }
  #section5 {
    background-color: #e5e5e5;
  }
  #section5 > div {
    top: 19%;
  }
  #section5 .btn {
    bottom: 3.25%;
  }
}
@media screen and (min-height: 538px) and (max-height: 568px) {
  #section1 .bannerBox {
    width: 84%;
    top: 10%;
    margin-left: -42%;
  }
}
.clearfix::before,
.clearfix::after {
  display: table;
  content: '';
}
.clearfix::after {
  clear: both;
}