body {
  -webkit-text-size-adjust: none;
}
h1,
h2,
h3 {
  text-indent: -100000px;
  overflow: hidden;
}
.content-wrap {
  position: relative;
  width: 750px;
  margin: 0 auto;
}
.main {
  overflow: hidden;
}
.main .logo {
  position: absolute;
  top: 16px;
  left: 14px;
  background: url(../img/logo.png) no-repeat;
  width: 159px;
  height: 74px;
}
header {
  background: url(../img/head-bg.jpg) no-repeat 50% 0;
  width: 100%;
  height: 779px;
}
header h1 {
  background: url(../img/main-title.png) no-repeat;
  width: 638px;
  height: 283px;
}
header h2 {
  background: url(../img/main-title-h2.png) no-repeat;
  width: 458px;
  height: 43px;
}
header .position {
  position: absolute;
  top: 164px;
  left: 70px;
  animation: fade_play2 2s 0s linear infinite;
}
header .position h1 {
  position: relative;
  z-index: 2;
}
header .position h2 {
  position: absolute;
  left: 80px;
  top: 233px;
  z-index: 1;
}
section .title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
section .title::before,
section .title::after {
  position: absolute;
  content: '';
}
section .title::before {
  left: -90px;
  top: 42px;
  background: url(../img/title-icon-l.png) no-repeat;
  width: 91px;
  height: 53px;
  transform-origin: right bottom;
  animation: title_rotate_l 6s 0s linear infinite;
}
section .title::after {
  right: -74px;
  top: 80px;
  background: url(../img/title-icon-r.png) no-repeat;
  width: 76px;
  height: 14px;
  transform-origin: left bottom;
  animation: title_rotate_r 6s 0s linear infinite;
}
.sec2-cont {
  background: url(../img/sec2-bg.jpg) no-repeat 50% 0;
  width: 100%;
  height: 1390px;
}
.sec2-cont .video-btn {
  position: absolute;
  left: 645px;
  top: 110px;
  width: 48px;
  height: 48px;
  background: url(../img/video-icon1.png) no-repeat;
  z-index: 3;
}
.sec2-cont .video-btn::after {
  position: absolute;
  top: 14px;
  left: 16px;
  background: url(../img/video-icon2.png) no-repeat;
  content: '';
  width: 18px;
  height: 20px;
}
.sec2-cont .title {
  background: url(../img/sec2-title.png) no-repeat;
  width: 216px;
  height: 98px;
}
.sec2-cont .sub-title {
  position: absolute;
  top: 96px;
  left: 134px;
  background: url(../img/sec2-sub-title.png) no-repeat;
  width: 499px;
  height: 64px;
}
.sec2-cont .flower-light {
  position: absolute;
  top: 96px;
  left: 134px;
  width: 794px;
  height: 765px;
  animation: fade_play 6s 0s ease infinite;
  display: none;
}
.sec2-cont .circle {
  position: absolute;
  top: 194px;
  left: 14px;
  background: url(../img/sz-circle.png) no-repeat;
  width: 721px;
  height: 720px;
  animation: rotate_loop 18s 0s linear infinite;
}
.sec2-cont .arrow-left,
.sec2-cont .arrow-right {
  position: absolute;
  top: 518px;
  width: 120px;
  height: 45px;
  cursor: pointer;
  transition: all 0.5s 0s ease;
}
.sec2-cont .arrow-left {
  left: -52px;
  background: url(../img/arrow-left.png) no-repeat;
}
.sec2-cont .arrow-left:hover {
  transform: translate3d(-10px, 0, 0);
}
.sec2-cont .arrow-right {
  right: -52px;
  background: url(../img/arrow-right.png) no-repeat;
}
.sec2-cont .arrow-right:hover {
  transform: translate3d(10px, 0, 0);
}
.sec2-cont .sz-group {
  position: relative;
  width: 100%;
  height: 100%;
}
.sec2-cont .sz-group li {
  position: relative;
  width: 100%;
  height: 100%;
}
.sec2-cont .plugin {
  position: absolute;
  left: 132px;
  top: 852px;
  transform-origin: center top;
}
.sec2-cont .detail1 {
  background: url(../img/sz-detail1.png) no-repeat;
  width: 481px;
  height: 190px;
}
.sec2-cont .role-man {
  position: absolute;
  left: -25px;
  top: 211px;
  background: url(../img/role-man.png) no-repeat;
  width: 458px;
  height: 656px;
}
.sec2-cont .role-woman {
  position: absolute;
  top: 248px;
  left: 352px;
  background: url(../img/role-woman.png) no-repeat;
  width: 321px;
  height: 599px;
}
.sec2-cont .text-tips {
  position: absolute;
  top: 1068px;
  left: 0;
  background: url(../img/sz-text.png) no-repeat 50% 0;
  width: 100%;
  height: 63px;
}
.sec3-cont {
  background: url(../img/sec3-bg.jpg) no-repeat 50% 0;
  width: 100%;
  height: 1322px;
}
.sec3-cont .title {
  background: url(../img/sec3-title.png) no-repeat;
  width: 233px;
  height: 98px;
}
.sec3-cont .flex-block {
  display: flex;
  width: 750px;
  margin: 0 auto;
  padding-top: 102px;
  align-items: center;
  flex-direction: column;
}
.sec3-cont .sub-title {
  text-align: center;
  margin-bottom: 32px;
}
.sec3-cont .col {
  width: 528px;
}
.sec3-cont .col:nth-child(2) {
  margin-top: 42px;
}
.sec3-cont .hair,
.sec3-cont .face {
  display: flex;
  justify-content: space-between;
}
.sec3-cont .text-tips {
  padding-top: 32px;
  background: url(../img/sec3-text.png) no-repeat 0 100%;
  width: 536px;
  height: 63px;
  margin: 0 auto;
}
.sec4-cont {
  background: url(../img/sec4-bg.jpg) no-repeat 50% 0;
  width: 100%;
  height: 1041px;
}
.sec4-cont .title {
  background: url(../img/sec4-title.png) no-repeat;
  width: 217px;
  height: 99px;
}
.sec4-cont .mount-item {
  position: relative;
  height: 100%;
}
.sec4-cont .mount-item li {
  width: 100%;
  transition: all 0.5s 0s ease;
}
.sec4-cont .mount-item li.swiper-slide-active {
  opacity: 1;
  z-index: 2;
}
.sec4-cont .prev-btn,
.sec4-cont .next-btn {
  position: absolute;
  top: 362px;
  width: 23px;
  height: 45px;
  z-index: 4;
}
.sec4-cont .prev-btn {
  left: 40px;
  background: url(../img/prev-btn.png) no-repeat;
}
.sec4-cont .next-btn {
  right: 40px;
  background: url(../img/next-btn.png) no-repeat;
}
.sec4-cont .tree {
  position: absolute;
  top: 161px;
  left: 79px;
  width: 589px;
  height: 486px;
  z-index: 2;
  animation: floating 4s 0s linear infinite;
}
.sec4-cont .video-event {
  position: absolute;
  top: 210px;
  left: 489px;
  width: 88px;
  height: 88px;
  z-index: 4;
}
.sec4-cont .video-btn {
  position: absolute;
  left: 504px;
  top: 230px;
  z-index: 1;
  width: 48px;
  height: 48px;
  background: url(../img/video-icon1.png) no-repeat;
  z-index: 3;
}
.sec4-cont .video-btn::after {
  position: absolute;
  top: 14px;
  left: 16px;
  background: url(../img/video-icon2.png) no-repeat;
  content: '';
  width: 18px;
  height: 20px;
}
.sec4-cont .sub-title {
  position: absolute;
  top: 235px;
  left: 112px;
  z-index: 3;
}
.sec4-cont .text-tips {
  position: absolute;
  top: 672px;
  left: 0;
  width: 100%;
  height: 63px;
  text-align: center;
}
.sec5-cont {
  background: url(../img/sec5-bg.jpg) no-repeat 50% 0;
  width: 100%;
  height: 1154px;
}
.sec5-cont .content-wrap {
  height: 100%;
}
.sec5-cont .title {
  background: url(../img/sec5-title.png) no-repeat;
  width: 213px;
  height: 98px;
}
.sec5-cont .text-tips {
  position: absolute;
  top: 890px;
  left: 0;
  background: url(../img/sec5-text.png) no-repeat 50% 0;
  width: 100%;
  height: 63px;
}
.sec5-cont .board {
  position: absolute;
  top: 110px;
  left: 50%;
  margin-left: -204.5px;
  background: url(../img/rs-role-bg.png) no-repeat;
  width: 409px;
  height: 408px;
}
.sec5-cont .board .circle {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -214px 0 0 -214px;
  background: url(../img/rs-circle.png) no-repeat;
  width: 427px;
  height: 428px;
  animation: rotate_loop 18s 0s linear infinite;
}
.sec5-cont .board::before,
.sec5-cont .board::after {
  position: absolute;
  content: '';
}
.sec5-cont .board::before {
  left: -170px;
  top: 286px;
  width: 274px;
  height: 136px;
  background: url(../img/cloud-left.png) no-repeat;
  animation: floating 7s 0s linear infinite;
}
.sec5-cont .board::after {
  top: 334px;
  left: 300px;
  background: url(../img/cloud-right.png) no-repeat;
  width: 182px;
  height: 116px;
  animation: floating 6s 0s linear infinite;
}
.sec5-cont .role-item {
  position: relative;
  padding-top: 103px;
  width: 100%;
}
.sec5-cont .role-item ul {
  height: 454px;
  width: 100%;
}
.sec5-cont .role-item li {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s 0s ease;
}
.sec5-cont .role-item li.curr {
  opacity: 1;
}
.sec5-cont .btn-group {
  position: absolute;
  top: 620px;
  left: 50%;
  margin-left: -298px;
  display: flex;
  width: 596px;
  justify-content: center;
  flex-wrap: wrap;
}
.sec5-cont .btn-group .btn {
  position: relative;
  width: 97px;
  height: 97px;
  margin: 0 11px 20px;
  background: url(../img/btn-group.png) no-repeat;
}
.sec5-cont .btn-group .btn::after {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s 0s ease;
  width: 100%;
  height: 100%;
  content: '';
  opacity: 0;
  background: url(../img/btn-group-h.png) no-repeat;
}
.sec5-cont .btn-group .btn:hover::after,
.sec5-cont .btn-group .btn.curr::after {
  opacity: 1;
}
.sec5-cont .btn-group .yh {
  background-position: 0px 0px;
}
.sec5-cont .btn-group .yh::after {
  background-position: 0px 0px;
}
.sec5-cont .btn-group .sl {
  background-position: -122px 0px;
}
.sec5-cont .btn-group .sl::after {
  background-position: -122px 0px;
}
.sec5-cont .btn-group .bs {
  background-position: -238px 0px;
}
.sec5-cont .btn-group .bs::after {
  background-position: -238px 0px;
}
.sec5-cont .btn-group .sf {
  background-position: -354px 0px;
}
.sec5-cont .btn-group .sf::after {
  background-position: -354px 0px;
}
.sec5-cont .btn-group .qh {
  background-position: -471px 0px;
}
.sec5-cont .btn-group .qh::after {
  background-position: -471px 0px;
}
.sec5-cont .btn-group .jh {
  background-position: -122px -116px;
}
.sec5-cont .btn-group .jh::after {
  background-position: -122px -116px;
}
.sec5-cont .btn-group .ym {
  background-position: -238px -116px;
}
.sec5-cont .btn-group .ym::after {
  background-position: -238px -116px;
}
.sec5-cont .btn-group .zx {
  background-position: -354px -116px;
}
.sec5-cont .btn-group .zx::after {
  background-position: -354px -116px;
}
.pop {
  display: none;
}
.pop .video-content {
  position: relative;
  background: url(../img/sec4-video-box.png) no-repeat;
  width: 674px;
  height: 388px;
  padding: 10px 14px 14px 10px;
  box-sizing: border-box;
}
.pop .video-content video {
  width: 100%;
  height: 100%;
}
.pop .video-content .close-btn {
  position: absolute;
  right: -30px;
  top: -38px;
  background: url(../img/close-btn.png) no-repeat;
  width: 50px;
  height: 50px;
  z-index: 2;
}
.video-btn {
  animation: scale_video_btn 4s 0s linear infinite;
}
@keyframes scale_video_btn {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
@keyframes floating {
  0%,
  50%,
  100% {
    transform: translate3d(0, 0px, 0);
  }
  25% {
    transform: translate3d(0, 5px, 0);
  }
  75% {
    transform: translate3d(0, -5px, 0);
  }
}
@keyframes floating_lr {
  0%,
  50%,
  100% {
    transform: translate3d(0px, 0, 0);
  }
  25% {
    transform: translate3d(3px, 0, 0);
  }
  75% {
    transform: translate3d(-2px, 0, 0);
  }
}
@keyframes rotate_loop {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes fade_play {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes fade_play2 {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@keyframes title_rotate_l {
  0%,
  50%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(6deg);
  }
  75% {
    transform: rotate(-6deg);
  }
}
@keyframes title_rotate_r {
  0%,
  50%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(4deg);
  }
  75% {
    transform: rotate(-6deg);
  }
}
@keyframes sz_rotate {
  0%,
  50%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}