* { margin: 0px; padding: 0px; }
body {background: #ffffff url(../images/banner.png) center top no-repeat;-webkit-text-size-adjust: none; background-size: 100%;font-family: "Microsoft YaHei", "PingFang SC",Arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
html {min-width: 1215px;}
.wraper {width: 100%;margin: 0 auto;min-width: 1215px;}
.wrap {width: 1215px;margin: 0px auto;}
.fl {float: left; }
.fr {float: right; }
dl, dt, ul { list-style: none; text-decoration: none; padding-inline-start: 0px; }
a {text-decoration: none; color: #333;}
.clearfix::before, .clearfix::after { content: ""; display: table; clear: both; }
.un {transition: all 0.3s ease-out 0s; }
.none {display: none; }
.ellipsis {text-overflow: ellipsis;white-space: nowrap; overflow: hidden}
.flex{display: flex;}
.column{flex-direction: column;}

.logo{margin-top: 30px; display: block; margin-left: 20px;}
.inr{background: url(../images/inr.png) center no-repeat;height: 195px;box-sizing: border-box;padding: 68px 49px 0;margin-top: 20px;margin-bottom: 8px;line-height: 27px;text-indent: 2em;}
.title{text-align: center;}
.inrBox li{width: 596px;height: 145px;box-sizing: border-box;padding: 26px 25px 0 130px;float: left;color: #555;margin-right: 18px;margin-bottom: 10px;}
.inrBox li h3{font-size: 22px;color: #222;margin-bottom: 5px;}
.inrBox li:nth-child(1){background: url(../images/a1.png) center no-repeat;}
.inrBox li:nth-child(2){background: url(../images/a2.png) center no-repeat; margin-right: 0;}
.inrBox li:nth-child(3){background: url(../images/a3.png) center no-repeat;}
.inrBox li:nth-child(4){background: url(../images/a4.png) center no-repeat; margin-right: 0;}
.tit{padding: 30px 0; text-align: center;}



.edu li{width:400px;height:459px;box-sizing:border-box;padding: 53px 25px 0;}
.edu li dt{font-size: 20px;margin-bottom: 22px;}
.edu li dd{background-color: #f6f7ff;margin-bottom: 14px;padding: 11px 12px 11px 14px;color: #555;font-size: 16px;font-weight: normal;position: relative;}
.edu li dd:before{content: "";width: 4px;height: 4px;border-radius: 50%;background-color: #f00;top: 23px;left: 7px;position: absolute;}
.edu li dd h5{font-size: 16px; font-weight: normal;}
.edu li:nth-child(1){background: url(../images/b1.png) center no-repeat;}
.edu li:nth-child(2){background: url(../images/b2.png) center no-repeat;}
.edu li:nth-child(3){background: url(../images/b3.png) center no-repeat;}

.bot{background-color: #f6f9ff; margin-top: 80px; padding-bottom: 50px;}
.tips li{background: url(../images/c1.png) center no-repeat; width: 590px; height: 81px; line-height: 81px; float: left; margin-right: 10px; margin-bottom: 8px; box-sizing: border-box;font-weight: bold;}
.tips li span{margin-right: 35px; margin-left: 15px; color: #fff;}
.tips li:nth-child(2n){margin-right: 0;}
.map{background: url(../images/map.png) center no-repeat; height: 474px; display: flex; justify-content: center; align-items: flex-end; font-size: 16px; padding-bottom: 30px; box-sizing: border-box;}

.special ul{margin-bottom: 30px;}
.special ul li{width: 602px;height: 364px; margin-bottom: 10px;}
.special ul li a{display: block;width: 100%;height: 100%;background: url(../images/video.png) center no-repeat;position: relative;}
.special ul li .teacher{width: 225px;height:223px;overflow:hidden;position: absolute;top: -2px;left: 15px;}
.special ul li .teacher img{width:100%;height:100%;object-fit:cover;object-position: top;}
.special ul li .content{
    width: 313px;
    margin-left: 243px;
    padding-top: 37px;
    height: 191px;
}
.special ul li .content h2{
    font-size: 32px;
    color: #fff;
    border-bottom: 1px solid #dedede;
    line-height: 50px;
    margin-bottom: 10px;
}
.special ul li .content h2 span{font-size: 14px;margin-left: 7px;font-weight: normal;}
.special ul li .content p{
    font-size: 14px;
    color: #fff;
    opacity: .9;
    line-height: 22px;
}
.special ul li .bottom{
    padding: 10px 29px;
}
.special ul li .bottom .subject{
    background: url(../images/subject.png) center no-repeat;
    height: 42px;
    line-height: 42px;
    width: 167px;
    position: absolute;
    top: 200px;
    left: 12px;
    z-index: 10;
    font-size: 25px;
    font-weight: bold;
    text-align: left;
    color: #6f3f17;
    letter-spacing: 1px;
    padding-left: 15px;
    box-sizing: border-box;
}
.special ul li .bottom .biaoti{
    font-size: 20px;
    font-weight: bold;
    padding-left: 15px;
    margin: 12px 0px;
}
.special ul li .bottom .biaoti b{
    display: inline-block;
    width: 6px;
    height: 19px;
    background: #ff6e49;
    border-radius: 4px;
    top: 4px;
    position: relative;
    margin-right: 7px;
}
.special ul li .bottom .bofang{
    background: url(../images/bofang.png) center no-repeat;
    height: 29px;
    line-height: 29px;
    width: 100px;
    color: #fff;
    box-sizing: border-box;
    padding-left: 29px;
    font-size: 14px;
    position: absolute;
    right: 30px;
    bottom: 31px;
}
.special li .bofang:hover{-webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;}

@-webkit-keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}