html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #073d58;
  font-family: sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

.sectionAll {
  height: 100%;
}

img {
  max-width: 100%;
}

.hidden {
  font-size: 0;
  width: 0;
  height: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
  transition: 1s background-color 1.3s;
}

.swiper-wrapper {
  height: 100%;
  transition-delay: 1s;
  transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}

.swiper-slide {
  position: absolute;
  top:0;left: 0;
  text-align: center;
  height: 100%;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.main {
  position: absolute;
  width: 100%;
  height: 100%;
  transition-delay: 1s;
  z-index: 10;
}

.img-box {
  width: 100%;
  height: 100%;
  /* position: absolute; */
  background: url(/jac_activity/haoxue/images/bg.jpg) center bottom no-repeat;
  background-size: 100% auto;
  /* transform: scale(0.6, 0.6);
  transition-duration: 1s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.5, 0, 0, 1); */
  overflow: hidden;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transform: scale(1.2, 1.2) translateX(50%);
  transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
  transition-property: transform; */
}

.header {
  position: fixed;
  width: 100%;
  z-index: 999;
}

.header a {
  position: absolute;
  left: 0;
  top: 0;
}

.header a.logo {
  max-width: 389px;
  width: 3.89rem;
}

.header a.gohome {
  left: auto;
  right: 0;
  right: .67rem;
  top: .40rem;
  overflow: hidden;
  background: url(/jac_activity/haoxue/images/gohome.png) no-repeat;
  background-size: 100% auto;
}

.header a.gohome span {
  display: block;
  position: relative;
  color: #a7faff;
  font-size: 16px;
  text-align: center;
  line-height: 38px;
  width: 135px;
  height: 38px;
  -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) 100ms;
  -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) 100ms;
  -ms-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) 100ms;
  -o-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) 100ms;
  transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) 100ms;
}

.header a.gohome:hover span {
  transform: translate(0, -100%);
}

.header a.gohome span::after {
  content: attr(data-title);
  position: absolute;
  height: 38px;
  top: 0px;
  left: 0px;
  right: 0;
  color: transparent;
  transform: translate(0, 100%);
  -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) 200ms;
  -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) 200ms;
  -ms-transition: all 0.6s cubic-beziercubic-bezier(0.77, 0, 0.175, 1) 200ms;
  -o-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) 200ms;
  transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) 200ms;
}

.header a.gohome:hover span::after {
  background-color: #8fdcfd;
  color: #fff;
}

.section{
	position: absolute;
	width: 100%;
	height: 100%;
}


.section .sectionCon {
  width: 100%;
  height: 100%;
  /*transition-duration: 1s;*/
  /*transition-property: transform;*/
  /*transition-timing-function: cubic-bezier(0.5, 0, 0, 1);*/
  /* transform: translateX(-100%); */
  /*transform: scale(0);*/
}

/* banner */
.banner .tit {
  position: absolute;
  left: 54%;
  top: 50%;
  width: 4.83rem;
  margin-top: -2.90rem;
}

.banner .con {
  position: absolute;
  width: 4.52rem;
  height: 5.39rem;
  left: 4.18rem;
  top: 50%;
  margin-top: -2.61rem;
}

/* .banner .con .shou {
  position: absolute;
  left: 100%;
  margin-left: .10rem;
  width: .54rem;
  height: 1.12rem;
  max-width: 54px;
  max-height: 112px;
  background: url(/jac_activity/haoxue/images/arrDown.png) no-repeat;
  background-size: 100% auto;
  top: 110%;
  animation: shou 2s infinite;
  -webkit-animation: shou 2s infinite;
  -moz-animation: shou 2s infinite;
  -o-animation: shou 2s infinite;
  -ms-animation: shou 2s infinite;
} */

.bookBox {
  position: relative;
  width: 5.10rem;
  height: 4.42rem;
  background: url(/jac_activity/haoxue/images/bannerBookCloseLight.png) no-repeat;
  background-size: 100% auto;
}




/* @keyframes shou {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, -10%, 0);
  }

  50% {
    opacity: 1;
    transform: translate3d(0, 10%, 0);
  }
} */

.banner .con > img {
  position: absolute;
  width: 6.77rem;
  left: 0;
  top: 0;
  max-width: inherit;
}

.banner .img-box {
  background-image: url(/jac_activity/haoxue/images/banner.jpg);
  background-position: center;
}

.banner .section .main {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.banner .section .sectionCon {
  transform: translateX(0) !important;
}



/* preface */
.preface .main {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.preface .main .preT {
  width: 100%;
  margin-bottom: .30rem;
}

.preface .main .preT img {
  width: 6.80rem;
  display: block;
  margin: 0 auto;
}

.preface .main .txt {
  width: 11.66rem;
  display: flex;
  justify-content: space-between;
}

.preface .main .txt .img {
  width: 6.40rem;
  max-height: 640px;
  position: relative;
}

.preface .main .txt p {
  text-align: center;
  color: #dee5ea;
  font-size: .30rem;
  text-align: center;
  line-height: 1.8;
}

.preface .main .txt .proArr {
  position: absolute;
  bottom: .8rem;
  left: 50%;
  width: .14rem;
  height: .31rem;
  background: url(/jac_activity/haoxue/images/prefaceArr.png) no-repeat;
  background-size: 100% auto;
  margin-left: -.07rem;
  animation: fadeInDown 2s  infinite;
  -webkit-animation: fadeInDown 2s  infinite;
  -moz-animation: fadeInDown 2s  infinite;
  -o-animation: fadeInDown 2s  infinite;
  -ms-animation: fadeInDown 2s  infinite;
}

/* trait5 */
.trait5 .content {
  position: absolute;
  width: 7.29rem;
  max-width: 729px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.trait5 .content .poa img {
  position: absolute;
  cursor: pointer;
}

.trait5 .content .poa img:nth-of-type(5) {
  width: 5.22rem;
  left: -45%;
  top: 100%;
}

.trait5 .content .poa img:nth-of-type(4) {
  width: 5.38rem;
  left: 67%;
  top: 100%;
}

.trait5 .content .poa img:nth-of-type(3) {
  width: 5.40rem;
  left: 100%;
  top: -.14rem;
}

.trait5 .content .poa img:nth-of-type(2) {
  width: 5.30rem;
  left: 54.79%;
  top: -100%;
}

.trait5 .content .poa img:nth-of-type(1) {
  width: 5.32rem;
  left: -36%;
  top: -100%;
}

.float {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
  z-index: 99;
}

.float .floatCon {
  position: absolute;
  width: 13.98rem;
  height: 7.96rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #5a9aa7;
  background-color: rgba(4, 46, 67, .96);
}

.float .close {
  position: absolute;
  cursor: pointer;
  width: .43rem;
  height: .43rem;
  background: url(/jac_activity/haoxue/images/close.png) no-repeat;
  background-size: 100% auto;
  right: .42rem;
  top: .42rem;
}

.floatMain li {
  display: none;
}
.floatMain li img{
  display: block;
}
.footer {
  width: 100%;
  height: 0.5rem;
  text-align: center;
  color: #ffffff;
  font-size: 0.1rem;
  line-height: 0.5rem;
  white-space: nowrap;
  
}
.footer a{
  color: #fff;
}
.arrDown {
  position: fixed;
  width: .54rem;
  height: 1.12rem;
  max-width: 54px;
  max-height: 112px;
  background: url(/jac_activity/haoxue/images/arrDown.png) no-repeat;
  background-size: 100% auto;
  z-index: 7;
  left: 50%;
  margin-left: -.58rem;
  bottom: .30rem;
  animation: fadeInDown 2s infinite;
  -webkit-animation: fadeInDown 2s infinite;
  -moz-animation: fadeInDown 2s infinite;
  -o-animation: fadeInDown 2s infinite;
  -ms-animation: fadeInDown 2s infinite;
}

@keyframes fadeInDown {
  100%{
    transform: translate3d(0, -20%, 0);
  }

  100% {
    transform: translate3d(0, 20%, 0);
  }
}



@media screen and (max-width: 750px) {
  .icon_1,.icon_2,.icon_3,.icon_4,.icon_5{
    display: none;opacity: 0;
  }
  .header a.logo {
    width: 2.50rem;
  }
  .footer{
    font-size: .05rem;
    overflow: hidden;
  }
  .preface .main .txt .proArr{
    display: none;
  }
  .img-box {
    background-image: url(/jac_activity/haoxue/images/mbg.png);
  }

  .header a.gohome {
    right: .37rem;
  }

  .section {
    transform-origin: 85% 63%;
  }

  .header a.gohome span {
    width: 2.02rem;
    height: .57rem;
    line-height: .57rem;
    font-size: .24rem;
  }

  .header a.gohome:hover span {
    transform: none;
  }

  .header a.gohome span::after {
    display: none;
  }

  .banner .img-box {
    background-image: url(/jac_activity/haoxue/images/mbanner.png);
  }

  .banner .tit {
    top: 2.33rem;
    margin-top: 0;
    width: 3.42rem;
    left: 50%;
    margin-left: -1.71rem;
  }

  .banner .con {
    width: 4.5rem;
    height: 4.55rem;
    left: 50%;
    margin-left: -1.95rem;
    top: 50%;
    margin-top: -1.2rem;
  }

  .preface .main .preT {
    width: 5.90rem;
    margin-bottom: 0;
  }

  .preface .main .txt {
    display: block;
    width: 100%;
  }

  .preface .main .txt .img {
    width: 6.40rem;
    margin: 0 auto .33rem;
  }

  .preface .main .txt p {
    font-size: .26rem;
  }

  .trait5 .content {
    width: 100%;
    width: 5.90rem;
    margin-bottom: 0;
  }

  .trait5 .content .poa {
    padding-top: .77rem;
    padding-left: .10rem;
    width: 5.19rem;
    margin: -.33rem auto 0;
    height: 8.35rem;
    background: url(/jac_activity/haoxue/images/mconbg.png) top right no-repeat;
    background-size: 5.23rem auto;
  }

  .trait5 .content .poa img {
    position: static;
    width: 100%;
    display: block;
    margin-bottom: .89rem;
  }

  .float .floatCon {
    width: 6.76rem;
    height: 11.87rem;
  }
  .bookBox .bannerbook {
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  .bookBox.open .bannerbook {
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;

    -webkit-transition: transform 1.5s ease;
    -moz-transition: transform 1.5s ease;
    -ms-transition: transform 1.5s ease;
    -o-transition: transform 1.5s ease;
    transition: transform 1.5s ease;
    /*transform: perspective(1000px) rotateY(-70deg);*/
    -webkit-transform: perspective(1000px) rotateY(-90deg);
    -moz-transform: perspective(1000px) rotateY(-90deg);
    -ms-transform: perspective(1000px) rotateY(-90deg);
    -o-transform: perspective(1000px) rotateY(-90deg);
    transform: perspective(1000px) rotateY(-90deg);
  }

}

.bookBox_bg {
  position: absolute;
  top:0;left: 0;opacity: 0;
  width: 5.10rem;
  height: 4.42rem;
  background: url(/jac_activity/haoxue/images/bannerBookOpenLight.png) no-repeat;
  background-size: 100% auto;
  /*filter: brightness(2);*/
}

.bookBox .bannerbook {
  position: absolute;
  width: 4.43rem;
  left: .33rem;
  top: .33rem;
  -webkit-transition: transform 1.5s ease;
  -moz-transition: transform 1.5s ease;
  -ms-transition: transform 1.5s ease;
  -o-transition: transform 1.5s ease;
  transition: transform 1.5s ease;
}
.bookBox.open .bannerbook {
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;

  -webkit-transition: transform 1.5s ease;
  -moz-transition: transform 1.5s ease;
  -ms-transition: transform 1.5s ease;
  -o-transition: transform 1.5s ease;
  transition: transform 1.5s ease;
  /*transform: perspective(1000px) rotateY(-70deg);*/
  -webkit-transform: perspective(1000px) rotateY(-90deg);
  -moz-transform: perspective(1000px) rotateY(-90deg);
  -ms-transform: perspective(1000px) rotateY(-90deg);
  -o-transform: perspective(1000px) rotateY(-90deg);
  transform: perspective(1000px) rotateY(-90deg);
}

.preface,.trait5{opacity: 0;visibility: hidden;}

.section .main{
  transition-duration: 1s;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
  /*transform: scale(.2);*/
  -webkit-transform-origin: 48.8% 50%;
  -moz-transform-origin: 48.8% 50%;
  -ms-transform-origin: 48.8% 50%;
  -o-transform-origin: 48.8% 50%;
  transform-origin: 48.8% 50%;
  opacity: 1;
  overflow: hidden;
}
.origin_center{
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}
.alpha{opacity: 0;visibility: hidden;}

.trait5 .content {
  position: absolute;
  width: 7.29rem;max-width: 729px;
  left: 50%;top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.trait5_ui{
  opacity: 0;
  -webkit-transform:scale(.2,.2);
  -moz-transform:scale(.2,.2);
  -ms-transform:scale(.2,.2);
  -o-transform:scale(.2,.2);
  transform:scale(.2,.2);
}
.abs{position: absolute;}
/*.m1con{*/
/*  transform-origin: top right;*/
/*}*/
/*.m2con{}*/
/*.m3con{}*/
/*.m4con{}*/
/*.m5con{}*/
.icon_1,.icon_2,.icon_3,.icon_4,.icon_5{
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;

  animation:heart_ani 1.2s infinite;
  -moz-animation:heart_ani 1.2s infinite; /* Firefox */
  -webkit-animation:heart_ani 1.2s infinite; /* Safari and Chrome */
  -o-animation:heart_ani 1.2s infinite; /* Opera */
}
.icon_5{top: -38%;left: 33.8%;width: .23rem;}
.icon_4{top: -38%;left: 54.8%;width: .23rem;}
.icon_3{top: 62.6%;left: 99.9%;width: .23rem;}
.icon_2{top: 100%;left: 67%;width: .23rem;}
.icon_1{top: 100%;left: 23.5%;width: .23rem;}


@keyframes heart_ani {
  0% {transform: scale(.6,.6);}
  60% {transform: scale(1,1);}
  100% {transform: scale(.6,.6);}
}




<!--ºÄʱ1755173874.299Ãë-->