@charset "UTF-8";
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select { margin: 0; padding: 0; box-sizing: border-box;}
body, input, textarea, select, button, table, em { font-family: Microsoft Yahei,Arial; font-weight: normal; font-size: 16px;}
img, fieldset { border: 0; vertical-align: top;}
ul, ol { list-style: none;}
em, address { font-style: normal;}
a { text-decoration: none;}
a:hover, a:active, a:focus { text-decoration: none;}
html { min-width: 1200px; -webkit-text-size-adjust: none; background-color: #383838;}
.blind, legend { position: absolute; left: -1000%; top: 0; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -10000px;}
button { border: 0; cursor: pointer; vertical-align: top; background: transparent;}
button:focus { outline: none;}
#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: 137px; height: 85px; position:absolute; top: 50px; 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: 73px; display: block; margin: 0 auto 40px;}
.section .stit1 { background: url(../images/stit1.png) no-repeat;}
.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: 1050px; background: url(../images/bg_01.jpg) no-repeat center top;}
#section0 .slogan { width: 942px; height: 413px; position: absolute; left: 50%; margin-left: -420px; top: 20px; 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: 440px; margin-left: -453px; z-index: 2;}
#section0 .char .char1::after{ background-position: 0 0; animation: rot_o11 3s infinite linear; }
#section0 .char .char2{ width: 360px; height: 360px; position: absolute; left: 50%; top: 382px; margin-left: -254px; z-index: 2;}
#section0 .char .char2::after{ background-position: -278px 0; animation: rot_o21 3s infinite linear; }
#section0 .char .char3{ width: 500px; height: 500px; position: absolute; left: 50%; top: 295px; margin-left: 86px; z-index: 2;}
#section0 .char .char3::after{ background-position: -678px 0;}

#section0 .stit1{ width: 410px; height: 262px; position: absolute; left: 50%; top: 590px; margin-left: -205px; z-index: 3;}
#section0 .txt1{ width: 1200px; height: 514px; position: absolute; left: 50%; top: 875px; margin-left: -600px; background: url(../images/txt1.png) no-repeat;}

#section1 { height: 3246px; background: url(../images/bg_02.jpg) no-repeat center top;}
#section1 .txt2{width: 1200px; height: 3001px; margin:0 auto; background: url(../images/txt2.png) no-repeat center bottom; position: relative; z-index: 3;}

#section2 { height: 1344px; background: url(../images/bg_03.jpg) no-repeat center top; z-index: 11;}
#section2 .char .char1{ width: 410px; height: 600px; position: absolute; left: 50%; top: 650px; margin-left: 500px; z-index: 5;}
#section2 .char .char1::after{ background-position:-1280px 0; animation: rot_o1 3s infinite linear; transform-origin: center bottom; }


.swiper_reward { position: relative; width: 1200px; height: 690px; z-index: 3; margin: 0 auto; padding-top: 240px;}
.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 { top: -15px; height: 142px; display: flex; justify-content: space-between; align-items: center;}
.swiper_reward .swiper-pagination span { display: block; width: 303px; height: 142px; border-radius: 0; outline: none; opacity: 1; background: url(../images/reward-btn.png) no-repeat; background-position-y: 0;}
.swiper_reward .swiper-pagination span:nth-child(1) { background-position-x: 0;}
.swiper_reward .swiper-pagination span:nth-child(2) { background-position-x: -303px;}
.swiper_reward .swiper-pagination span:nth-child(3) { background-position-x: -622px;}
.swiper_reward .swiper-pagination span:nth-child(4) { background-position-x: -927px;}
.swiper_reward .swiper-pagination-bullet-active{ background-position-y: -154px !important;}


.load_complate #section0 .char .char1::after{  animation: move_o1 3s infinite linear; animation-delay: 1.3s;}
.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: 1.3s;}



@keyframes move_o1 {
  0%,80%,100% {
    transform:translateX(0px) translateY(0) rotateZ(0deg);
  }
  50% {
    transform: translateX(15px) translateY(10px) rotateZ(3deg);
  }
}

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

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

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