@charset "UTF-8";
.w1200 {
  width: 1200px;
  margin: 0 auto;
}

.top_form {
  padding: 20px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
  margin-top: -20px;
  position: relative;
  z-index: 1;
  background-color: #ffffff;
}

.top_form .form_title {
  text-align: center;
  font-size: 45px;
}

.top_form .small_title {
  font-size: 15px;
  text-align: center;
  color: #959595;
  margin-top: 5px;
}

.top_form .form_content {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

.top_form .form_content .item {
  border: 1px solid #B2B2B2;
  font-size: 15px;
  text-align: center;
  display: flex;
  align-items: center;
  border-radius: 10px;
  width: 30%;
  padding: 0 20px;
}

.top_form .form_content .item > input {
  height: 60px;
  font-size: 18px;
}

.top_form .btn {
  width: 346px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  background: #FF5820;
  margin-top: 50px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
}

.top_form .agreement {
  font-size: 15px;
  text-align: center;
  margin-top: 20px;
}

.top_form .agreement > input[type='checkbox'] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 5px;
}

.highlights_box {
  background-image: url("../img/course_bj.png");
  margin-top: 50px;
  padding: 50px;
}

.highlights_box .course_highlights .main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.highlights_box .course_highlights .main .item {
  width: 24%;
  margin-top: 50px;
  cursor: pointer;
}

.highlights_box .course_highlights .main .item > img {
  transition: all .3s linear;
}

.highlights_box .course_highlights .main .item :hover {
  transform: translateY(-20px);
}

.titles {
  width: 790px;
  margin: 0 auto;
}

.course_wrap .btns_wrap {
  width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

.course_wrap .btns_wrap .item {
  width: 20%;
  text-align: center;
  padding: 20px 0;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  background: #E7E7E7;
  box-shadow: 0px 3.63px 9.08px 0px rgba(0, 0, 0, 0.2);
}

.course_wrap .course {
  margin-top: 50px;
  border-radius: 20px;
  overflow: hidden;
}

.course_wrap .course > img {
  animation: course .5s linear;
}

@keyframes course {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.active_btn {
  background-color: #FF5820 !important;
  color: #ffffff;
}

.icebreaking_wrap {
  background-image: url("../img/icebreaking_bj.png");
  background-size: cover;
  margin-top: 50px;
  padding: 50px 0;
}

.icebreaking_wrap .contents {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
  align-items: center;
}

.icebreaking_wrap .contents .left {
  width: 573px;
  position: relative;
}

.icebreaking_wrap .contents .left > img:nth-child(1) {
  position: relative;
  z-index: 10;
}

.icebreaking_wrap .contents .left > img:nth-child(2) {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 263px;
}

.teachers {
  padding: 50px 0;
}

.teachers .teachers_box {
  display: flex;
  margin-top: 50px;
  justify-content: space-around;
}

.teachers .teachers_box .teacher_item {
  display: flex;
  align-items: center;
  animation: course .3s linear;
}

.teachers .teachers_box .teacher_item .pic {
  width: 402px;
}

.teachers .teachers_box .teacher_item .infos {
  width: 420px;
  font-size: 18px;
  margin-left: 30px;
  line-height: 2;
}

.teachers .teachers_box .teacher_item .infos > p {
  margin: 20px 0;
}

.teachers .teachers_box .tab_switch .mySwiper {
  height: 300px;
  width: 170px;
  --swiper-theme-color: #ff6600;
  /* 设置Swiper风格 */
  --swiper-navigation-color: #C7C7C7;
  /* 单独设置按钮颜色 */
  --swiper-navigation-size: 50px;
  /* 设置按钮大小 */
}

.teachers .teachers_box .tab_switch .mySwiper .swiper-button-prev,
.teachers .teachers_box .tab_switch .mySwiper .swiper-rtl .swiper-button-next {
  top: 5%;
  left: 41%;
  transform: rotate(89deg);
}

.teachers .teachers_box .tab_switch .mySwiper .swiper-button-next,
.teachers .teachers_box .tab_switch .mySwiper .swiper-rtl .swiper-button-prev {
  top: 95%;
  left: 41%;
  transform: rotate(89deg);
}

.teachers .teachers_box .tab_switch .mySwiper .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.teachers .teachers_box .tab_switch .mySwiper .swiper-slide .slide-item {
  height: 60px;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #FFFFFF;
  box-shadow: 0px 0px 10.34px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.teachers .teachers_box .tab_switch .mySwiper .swiper-slide .slide-item > p {
  font-size: 14px;
  text-align: center;
}

.active_name {
  transform: scale(1.2);
  color: #FF5820;
}

.shiting {
  padding: 50px 0;
}

.shiting .tab_switch {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}

.shiting .tab_switch .item {
  padding: 10px 0;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.shiting .video_wrap {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
  animation: bounce-in-fwd 1s linear;
}

.shiting .video_wrap .video_item {
  width: 675px;
  animation: course .3s linear;
}

.shiting .video_wrap .right > p:nth-child(1) {
  margin-top: 10px;
  font-size: 20px;
  color: #3D3D3D;
}

.shiting .video_wrap .right .tab {
  margin-top: 30px;
}

.shiting .video_wrap .right .tab > div {
  padding: 20px 0;
  cursor: pointer;
  font-size: 20px;
  color: #8B9296;
}

.shiting .video_wrap .right .btn_wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
}

.shiting .video_wrap .right .btn_wrap > div:nth-child(1) {
  font-size: 15px;
  background-color: #FF5820;
  padding: 15px 30px;
  border-radius: 30px;
  cursor: pointer;
  color: #ffffff;
}

.shiting .video_wrap .right .btn_wrap > div:nth-child(2) {
  font-size: 15px;
  background-color: #FFCEBE;
  color: #FF5820;
  padding: 15px 30px;
  border-radius: 30px;
  cursor: pointer;
}

.active_tab_switch {
  border-bottom: 2px solid #FF5820;
  color: #FF5820;
}

.characteristic {
  margin-top: 50px;
}

.characteristic .content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.characteristic .content .item {
  width: 307px;
  margin: 50px 0;
  transition: all .3s linear;
  cursor: pointer;
}

.characteristic .content .item:hover {
  transform: scale(1.1);
}

.honor .main {
  margin-top: 50px;
}

.honor .main .texts {
  font-size: 20px;
  line-height: 2;
}

.honor .main .pictures {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.honor .main .pictures .item {
  width: 23%;
  margin: 20px 0;
  cursor: pointer;
  transition: all .3s linear;
}

.honor .main .pictures .item:hover {
  transform: translateY(-20px);
}

@keyframes bounce-in-fwd {
  0% {
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: scale(0.7);
    animation-timing-function: ease-in;
  }
  72% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  81% {
    transform: scale(0.84);
    animation-timing-function: ease-in;
  }
  89% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  95% {
    transform: scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

.changeShardBox {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  position: fixed;
  left: 0;
  top: 0;
}

.changeShardBox > .changeShard_wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #F5F5F5;
  width: 450px;
  border-radius: 20px;
  padding-bottom: 20px;
  animation: changeShard_wrap .5s linear;
}

@keyframes changeShard_wrap {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.changeShardBox > .changeShard_wrap > .tan_close {
  position: absolute;
  top: -20px;
  right: -25px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.changeShardBox > .changeShard_wrap > h3 {
  font-size: 25px;
  text-align: center;
  margin-top: 30px;
  color: #0729AE;
}

.changeShardBox > .changeShard_wrap > .inp_box {
  width: 330px;
  margin: 0 auto;
  height: 50px;
  border: 1px solid #237aeb;
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.changeShardBox > .changeShard_wrap > .inp_box > img {
  width: 30px;
  height: 30px;
}

.changeShardBox > .changeShard_wrap > .inp_box > input {
  height: 97%;
  width: 300px;
  background-color: #F5F5F5;
  font-size: 20px;
  margin-left: 10px;
}

.changeShardBox > .changeShard_wrap > .shuoming {
  width: 330px;
  margin: auto;
  text-align: center;
  font-size: 15px;
  margin-top: 10px;
}

.changeShardBox > .changeShard_wrap > .shuoming input {
  width: 20px;
  height: 20px;
}

.changeShardBox > .changeShard_wrap > .shuoming a {
  color: #237aeb;
}

.changeShardBox > .changeShard_wrap > .shuoming > p:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.changeShardBox > .changeShard_wrap > .btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.changeShardBox > .changeShard_wrap > .btn button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 15px 60px;
  font-size: 20px;
  text-transform: uppercase;
  border: 0;
  background-color: #096bce;
  border-radius: 12px;
  overflow: hidden;
  transition: 31ms cubic-bezier(0.5, 0.7, 0.4, 1);
  cursor: pointer;
}

.changeShardBox > .changeShard_wrap > .btn button:before {
  content: attr(alt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  font-size: 20px;
  font-weight: bold;
  color: white;
  letter-spacing: 4px;
  opacity: 1;
}

.changeShardBox > .changeShard_wrap > .btn button:active {
  box-shadow: none;
  transform: translateY(7px);
  transition: 35ms cubic-bezier(0.5, 0.7, 0.4, 1);
}

.changeShardBox > .changeShard_wrap > .btn button:hover:before {
  transition: all .0s;
  transform: translateY(100%);
  opacity: 0;
}

.changeShardBox > .changeShard_wrap > .btn button i {
  color: white;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
  font-style: normal;
  transition: all 2s ease;
  transform: translateY(-20px);
  opacity: 0;
}

.changeShardBox > .changeShard_wrap > .btn button:hover i {
  transition: all .2s ease;
  transform: translateY(0px);
  opacity: 1;
}

.changeShardBox > .changeShard_wrap > .btn button:hover i:nth-child(1) {
  transition-delay: 0.045s;
}

.changeShardBox > .changeShard_wrap > .btn button:hover i:nth-child(2) {
  transition-delay: calc(0.045s * 3);
}

.changeShardBox > .changeShard_wrap > .btn button:hover i:nth-child(3) {
  transition-delay: calc(0.045s * 4);
}

.changeShardBox > .changeShard_wrap > .btn button:hover i:nth-child(4) {
  transition-delay: calc(0.045s * 5);
}