#loading{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background:#000; z-index:20; font-size: 18px; color: #cfd1cc; z-index: 101;}
#loading .box{ width: 100%; height: 1px; background: #414141; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); left: 0;}
#loading .box span{ height: 1px; background: #c4c4c4; position: relative; top: 0; left: 0; display: block;}
#loading .box p{ font-size: 16px; line-height: 30px; color: #c0c0c0; text-align: center;}

#wrapper { position: relative; width: 100%; min-width: 1200px; max-width: 1920px; margin: 32px auto 0; overflow: hidden;}
#obindex{ width: 121px; height: 75px; position:absolute; top: 25px; left: 50%; margin-left: -520px; z-index: 11; text-indent:-999em; background: url(../images/logo.png) no-repeat;}

#container { position: relative; width: 100%; height: 100%;}
.section { width: 100%; text-align: center;}
.section .content{ position: relative; z-index: 9;}
.section .tit{ width: 1200px; height: 64px; display: block; margin: 0 auto 40px;}
.section .stit2 { background: url(../images/stit2.png) no-repeat;}
.section .stit3 { background: url(../images/stit3.png) no-repeat;}
.section .txt{ width: 1200px; display: inline-block;}
.section .char span{ display: block; text-indent: -9999px; }
.section .char span::after{ content: ""; width: 100%; height: 100%; display: block; background-image: url(../images/char_obj.png); background-repeat: no-repeat;}

#section0 { height: 770px; background: url(../images/bg_01.jpg) no-repeat center top;}
#section0 .slogan { width: 624px; height: 490px; position: absolute; left: 50%; margin-left: -312px; top: 90px; z-index: 4;}
#section0 .slogan::after{ content: ""; width: 100%; height: 100%; display: block; background: url(../images/slogan.png) no-repeat;}
#section0 .char .char1{ width: 240px; height: 240px; position: absolute; left: 50%; top: 523px; margin-left: -150px; z-index: 2;}
#section0 .char .char1::after{ background-position: 0 0;transform-origin: bottom center; }
#section0 .char .char2{ width: 360px; height: 360px; position: absolute; left: 50%; top: 502px; margin-left: -510px; z-index: 2;}
#section0 .char .char2::after{ background-position: -278px 0; transform-origin: bottom center;}
#section0 .char .char3{ width: 500px; height: 500px; position: absolute; left: 50%; top: 393px; margin-left: 145px; z-index: 2;}
#section0 .char .char3::after{ background-position: -678px 0;}


#section1 { height: 2380px; background: url(../images/bg_02.jpg) no-repeat center top;}
#section1 .txt1-1{ width: 1200px; height: 436px; background: url(../images/txt1-1.png) no-repeat; margin-bottom: 40px; z-index: 9; position: relative;}
#section1 .txt1-2{ width: 1200px; height: 1139px; background: url(../images/txt1-2.png) no-repeat; margin-bottom: 40px;}
#section1 .txt1-3{ width: 1200px; height: 670px; background: url(../images/txt1-3.png) no-repeat; }


#section2 { height: 2950px; background: url(../images/bg_03.jpg) no-repeat center top; }
#section2 .txt2{width: 1200px; height: 2766px; background: url(../images/txt2.png) no-repeat center bottom; }

#section3 { height: 1100px; background: url(../images/bg_04.jpg) no-repeat center top; }

.swiper_reward { position: relative; width: 1200px; height: 556px; z-index: 3; margin: 0 auto; padding-top: 230px;}
.swiper_reward .swiper-wrapper { margin: 0 auto; width: 100%; height: 100%; text-align: center;}
.swiper_reward .swiper-slide { opacity: 0 !important;}
.swiper_reward .swiper-slide-active { opacity: 1 !important;}
.swiper_reward .swiper-pagination { width: 772px; height: 171px; top: 35px; left: 220px; display: flex; justify-content: space-between; align-items: center; background: url(../images/reward-btn.png) no-repeat;}
.swiper_reward .swiper-pagination span { display: block; width: 145px; height: 171px; margin: 0 !important; position: absolute; top: 0; border-radius: 0; outline: none; opacity: 1; background-position-y: 0; background: url(../images/reward-btn.png) no-repeat;}
.swiper_reward .swiper-pagination span:nth-child(1) { background-position-x: 0; left: 0;}
.swiper_reward .swiper-pagination span:nth-child(2) { background-position-x: -205px; left: 205px;}
.swiper_reward .swiper-pagination span:nth-child(3) { background-position-x: -416px; left: 416px;}
.swiper_reward .swiper-pagination span:nth-child(4) { background-position-x: -628px; left: 628px;}
.swiper_reward .swiper-pagination-bullet-active{ background-position-y: -171px !important;}


.load_complate #section0 .char .char1::after{  animation: move_o1 3s infinite linear; animation-delay: 1.1s;}
.load_complate #section0 .char .char2::after{  animation: move_o2 3s infinite linear; animation-delay: 1.3s;}
.load_complate #section0 .char .char3::after{  animation: move_o3 3s infinite linear; animation-delay: 1s;}



@keyframes move_o1 {
  0%,100% {
    transform:translateY(0) rotateZ(0deg);
  }
  50% {
    transform: translateY(5px) rotateZ(-3deg);
  }
  75% {
    transform: translateY(-1px) rotateZ(-3deg);
  }
}

@keyframes move_o2 {
  0%,100% {
    transform:translateY(0) rotateZ(0deg);
  }
  50% {
    transform: translateY(5px) rotateZ(-3deg);
  }
  75% {
    transform: translateY(-1px) rotateZ(-3deg);
  }
}

@keyframes move_o3 {
  0%,80%,100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-5px) ;
  }
}

@keyframes rot_o1 {
  0%,100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-4deg) ;
  }
}