/* ************************************************************
    add element
*************************************************************/
@font-face {
  font-family: 'AvenirNextLTPro-Bold';
  src: url('../fonts/AvenirNextLTPro-Bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/AvenirNextLTPro-Bold.woff') format('woff'), url('../fonts/AvenirNextLTPro-Bold.ttf')  format('truetype'), url('../fonts/AvenirNextLTPro-Bold.svg#CenturyGothic') format('svg');
  font-weight: normal;
  font-style: normal;
}
body {
    font-family:"Microsoft YaHei";
    color:#343434;
}
em{font-style:normal;}
#logoWrap{display:none;}
.pos{position:absolute;}
.p01-tu01{top:20%;left:50%;margin-left:-562px;width:1124px;height:346px;display:block;}
.p01-tu01:after{position:absolute;content:"";top:0px;left:0px;width:100%;height:100%;
background:url(../images/p01-tu01.jpg) no-repeat 0px 0px;
}
.scene.sceneUnLock .p01-tu01:after{
-webkit-animation-name: bgSize;
  animation-name: bgSize;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.p01-text01{font-size:14px;color:#343434;bottom:18%;left:0;width:100%;text-align:center;line-height:220%;font-weight:lighter;}
.p01-text01 p em{font-family:"Verdana";text-transform:uppercase;font-weight:bold;letter-spacing:-1px;}
.mobile-tu01{display:none;left:50%;top:20%;width:80%;margin-left:-40%;}
.agoName{bottom:18%;width:1000px;left:50%;margin-left:-500px;}
.agoName span{float:left;margin:0px 50px;position:relative;}
.agoName span em{position:absolute;top:3rem;right:-2.5rem;background:url(../images/arrow.png) no-repeat 0px 0px;width:2.4rem;height:5rem;
-webkit-animation-name: floatingDown;
          animation-name: floatingDown;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

.agoName span:nth-child(3) em{right:-1.2rem;}
.go{border:1px solid #343434;background:#343434;position:fixed;right:30px;top:30px;width:40px;height:40px;line-height:40px;text-align:center;color:#fff;text-transform:uppercase;cursor:pointer;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}
.go:hover{border-color:#f17263;color:#fff;background:#f17263;}
.video{ width:990px;height:465px;position:absolute;top:0px;left:0px;
-webkit-transform:translate(50%,50%);
-ms-transform:translate(50%,50%);
transform:translate(50%,50%);
}
.s-bottom-text{left:0px;width:100%;bottom:30%;text-align:center;}
.p-logo{display:block;margin:0 0 1%;}
.logo-ago{background:url(../images/logo-ago/ago-circle.png) no-repeat 0px 0px;width:200px;height:220px;top:25%;left:50%;margin-left:-100px;}
.logo-ago-tu{position:absolute;top:50%;left:50%;top:50%;margin:-28px 0px 0px -74px;width:133px;height:57px;}
.logo-ago-tu:after{background:url(../images/logo-ago/ago.png) no-repeat 0px 0px;}
.scene.sceneUnLock .logo-ago-tu:after{
-webkit-animation-name: pulse;
  animation-name: pulse;
-webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.logo-ago-c01{position:absolute;top:-8px;left:22px;width:26px;height:22px;
-webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.logo-ago-c01:after{background:url(../images/logo-ago/ago-c01.png) no-repeat 0px 0px;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  
}
.logo-ago-c02{position:absolute;width:20px;height:24px;opacity:0;
-webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.scene.sceneUnLock .logo-ago-c02{
opacity:1;
top:15px;right:5px;
-webkit-transition: all ease 5s;
transition: all ease 5s;
}
.logo-ago-c02:after{background:url(../images/logo-ago/ago-c02.png) no-repeat 0px 0px;
-webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.logo-ago-c01:after,.logo-ago-c02:after,.logo-ago-tu:after{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.logo-ago-c01,.logo-ago-c02:after{
  -webkit-animation-name: floating;
          animation-name: floating;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.logo-ago-c01:after{
  -webkit-animation-name: rotating;
          animation-name: rotating;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.mouse-ico{background:url(../images/mouse.png) no-repeat 0px 0px; width:18px;height:28px;position:absolute;bottom:-30px;right:0px;}
.arrow-ico{background:url(../images/arrowdown.png) no-repeat 0px 0px; width:6px;height:7px;position:absolute;bottom:-40px;right:6px;
-webkit-animation-name: floatingDownDeep;
          animation-name: floatingDownDeep;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

.webAnimate{position:absolute;top:50%;left:50%;margin:-470px 0px 0px -425px;background:#c9e0ed;width:850px;height:850px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}
.computer{position:absolute;top:50%;left:50%;background:url(../images/object/computer.png) no-repeat 0px 0px;width:818px;height:570px;margin:-265px 0px 0px -409px;
-webkit-animation-name:fadeIn;
  animation-name: fadeIn;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

.webAnimate .circle{width:850px;height:850px;position:absolute;top:0px;left:0px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}
.webAnimate .circle > div:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.webAnimate .circle > div:nth-child(3) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.webAnimate .circle > div {
  background-color:#fff;
  width: 850px;
  height: 850px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
  margin: 0;
  -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
          animation: ball-scale-multiple 1s 0s linear infinite; 
  }

.webPic{position:absolute;top:50%;left:50%;margin:-240px 0px 0px -207px;width:415px;height:430px;overflow:hidden;background:url(../images/object/pic.jpg) no-repeat 0px 0px;}
.scene.sceneUnLock .webPic{
  -webkit-animation-name:changeImg;
  animation-name: changeImg;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.ipadAnimate{position:absolute;top:50%;left:50%;margin:-355px 0px 0px -355px;width:710px;height:710px; background:#f3c3be;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}
.ipadAnimate .circle{position:absolute;top:50%;left:50%;width:480px;height:480px;margin:-240px 0px 0px -240px;
 background:#f1f5f7;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation: ball-scale 1.5s 0s ease-in;
animation: ball-scale 1.5s 0s ease-in;
}
/* .ipadAnimate .circle:after{position:absolute;top:0px;left:0px;width:480px;height:480px;content:"";
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  border-radius: 100%;
  border:115px solid #f3c3be;
  -webkit-animation: ball-scale-ripple 1.5s 0s cubic-bezier(.21, .53, .56, .8);
          animation: ball-scale-ripple 1.5s 0s cubic-bezier(.21, .53, .56, .8); 
} */
.ipadfile{width:394px;height:514px;position:absolute;top:50%;left:50%;margin:-292px 0px 0px -212px;border:15px solid #252525;border-top-width:35px;border-bottom-width:35px; background:#fff;
-webkit-border-radius:30px;
-moz-border-radius:30px;
-ms-border-radius:30px;
-o-border-radius:30px;
border-radius:30px;
-webkit-animation-name:fadeIn;
  animation-name: fadeIn;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}
.ipadPic{position:absolute;top:50%;left:50%;margin:-257px 0px 0px -135px;width:270px;height:514px;overflow:hidden;background:url(../images/object/ipad.jpg) no-repeat 0px 0px;}
.scene.sceneUnLock .ipadPic{
  -webkit-animation-name:changeImgIpad;
  animation-name: changeImgIpad;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 3.5s;
          animation-duration: 3.5s;
}

.mobileAnimate{position:absolute;top:50%;left:50%;margin:-320px 0px 0px -320px;width:640px;height:640px; background:#ffe773;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}
.mobileAnimate .circle{width:370px;height:370px;position:absolute;top:50%;left:50%;margin:-185px 0px 0px -185px;background:#f1f5f7;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation: ball-scale 1.5s 0s ease-in;
    animation: ball-scale 1.5s 0s ease-in;
}
.mobileAnimate.mo1{background:#b3ecf1;}
.mobileAnimate.mo2{background:#d3def4;}
.mobilefile{width:258px;height:460px;position:absolute;top:50%;left:50%;margin:-278px 0px 0px -141px;border:12px solid #252525;border-top-width:48px;border-bottom-width:48px;background:#fff;
-webkit-border-radius:30px;
-moz-border-radius:30px;
-ms-border-radius:30px;
-o-border-radius:30px;
border-radius:30px;
-webkit-animation-name:fadeIn;
  animation-name: fadeIn;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}
.mobilePic{position:absolute;top:50%;left:50%;margin:-230px 0px 0px -129px;width:258px;height:460px;overflow:hidden;background:url(../images/object/mobile.jpg) no-repeat 0px 0px;}
.mobileAnimate.mo1 .mobilePic{background-image:url(../images/object/mo1.jpg);}
.mobileAnimate.mo2 .mobilePic{background-image:url(../images/object/mo2.jpg);}
.mobileAnimate.mo2 .mobilePic:after,.mobileAnimate.mo2 .mobilePic:before{content:"";position:absolute;
background-repeat:no-repeat;
background-position:0px 0px;
-webkit-animation-timing-function: ease;
    animation-timing-function: ease;
-webkit-animation-fill-mode: both;
    animation-fill-mode: both;
-webkit-animation-delay: 1s;
    animation-delay: 1s;
  -webkit-animation-duration: 2.2s;
    animation-duration: 2.2s;
}
.mobileAnimate.mo2 .mobilePic:after{left:9%;bottom:20%;background-image:url(../images/object/f01.png);width:213px;height:80px;
-webkit-animation-name:zoomIn;
  animation-name: zoomIn;
}
.mobileAnimate.mo2 .mobilePic:before{left:7%;bottom:4%;background-image:url(../images/object/f02.png);width:230px;height:40px;
-webkit-animation-name:fadeInUp;
  animation-name: fadeInUp;
}

.scene.sceneUnLock .mobilePic{
  -webkit-animation-name:changeImgMobile;
  animation-name: changeImgMobile;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 3.5s;
          animation-duration: 3.5s;
}
.scene.sceneUnLock .mobileAnimate.mo1 .mobilePic,.scene.sceneUnLock .mobileAnimate.mo2 .mobilePic{
  -webkit-animation-name:fadeIn;
  animation-name: fadeIn;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
          -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

@-webkit-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }

  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }

  100% {
    opacity: 1; 
  } 
 }

@keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }

  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }

  100% {
    opacity: 1; } 
}

@-webkit-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
            opacity:0;
     }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; 
   } 
}

@keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
            opacity:0; 
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } 
}

@-webkit-keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }

  5% {
    opacity: 1; }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }

  5% {
    opacity: 1; }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } 
}

.p3-top-text{top:25%;left:0px;width:100%;text-align:center;}
.p3-bottom-file{bottom:15%;left:0px;width:100%;text-align:center;}
.p3-bottom-en{color:#000;font:24px/120% "AvenirNextLTPro-Bold";text-transform:uppercase;}
.p3-bottom-en span,.p4-bottom-en span,.p5-bottom-en p span{color:#ff0000;}
.p4-top-cn{top:30%;left:50%;width:1004px;margin-left:-502px;}
.p4-pic-file{width:100%;position:relative;height:82px;}
.p4-pic-02{left:480px;top:0px;
-webkit-animation-duration:2s;
  animation-duration:2s;
    -webkit-animation-delay:3s;
    animation-delay:3s
}
.p4-pic-03{right:0px;top:0px;}
.p4-bottom-en{color:#000;font:32px/100% "AvenirNextLTPro-Bold";text-transform:uppercase;left:0px;width:100%;text-align:center;bottom:25%;}
.p4-middle-text{width:835px;margin:25px auto 0px;position:relative;text-align:center;}
.p4-middle-text span{position:absolute;top:0px;background:url(../images/text/p4/text-arrow.png) no-repeat left center;width:26px;height:100%;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
          -webkit-animation-duration: 2s;
          animation-duration: 2s;
          -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.p4-middle-text span:nth-child(1){left:0px;
-webkit-animation-name: floatingLeftRotate;
  animation-name: floatingLeftRotate;
}
.p4-middle-text span:nth-child(2){right:0px;
-webkit-animation-name: floatingRightRotate;
  animation-name: floatingRightRotate;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
.p5-top-cn{top:15%;left:50%;margin-left:-359px;width:718px;text-align:center;}
.p5-text-file{width:100%;position:relative;margin:5px 0px 10%;}
.p5-text-file span{width:20px;height:130px;position:absolute;background:#000;
-moz-transform:rotate(18deg);
-webkit-transform:rotate(18deg);
-ms-transform:rotate(18deg);
-o-transform:rotate(18deg);
transform:rotate(18deg);
-webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.p5-text-file span:nth-child(1){left:0px;top:28px;
-webkit-animation-name:floatingUpLightRotate;
    animation-name:floatingUpLightRotate;
-webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.p5-text-file span:nth-child(2){right:0px;top:22px;
-webkit-animation-name:floatingDownLightRotate;
    animation-name:floatingDownLightRotate;
-webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.p5-text-file img{display:inline-block;
-webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.p5-pic-01,.p5-pic-03{
 -webkit-animation-name:floatingUpLight;
    animation-name:floatingUpLight;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.p5-pic-02,.p5-pic-04{
 -webkit-animation-name:floatingDownLight;
    animation-name:floatingDownLight;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
.p5-circle-ago{width:117px;height:117px;margin:0 auto;
-webkit-animation-name:bounce;
  animation-name:bounce;
-webkit-animation-timing-function: linear;
    animation-timing-function: linear;
-webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration:1s;
      animation-duration:1;
  -webkit-animation-delay: 2.2s;
      animation-delay: 2.2s;
}
.p5-bottom-en{bottom:10%;left:0px;width:100%;text-align:center;color:#000;font:32px/100% "AvenirNextLTPro-Bold";text-transform:uppercase;}
.p5-bottom-en p:nth-child(2){margin:4% 0 0;}
.photo-album{position:relative;width:78.125%;left:50%;top:50%;margin-left:-39.0625%;
-webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.p6-top-cn .p5-text-file{margin:20px 0px;}
.p6-middle-tip{width:400px;margin:0px auto;
  -webkit-animation-name:lightSpeedIn;
  animation-name:lightSpeedIn;
-webkit-animation-timing-function: linear;
    animation-timing-function: linear;
-webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration:2s;
      animation-duration:2s;
  -webkit-animation-delay: 3s;
      animation-delay: 3s;
}
.p6-top-cn .p5-top-cn{top:20%;width:740px;margin-left:-370px;}
.p6-top-cn .p5-bottom-en{bottom:15%;}
.p6-top-cn .p5-text-file span:nth-child(1),.p6-top-cn .p5-text-file span:nth-child(2){top:40px;}
.p8-top-cn .p5-top-cn{top:30%;width:1050px;margin-left:-525px;}
.p8-top-cn .p5-bottom-en{bottom:22%;}

.photo-list{width:1216px;margin:0px auto;position:relative;left:50%;top:50%;margin-left:-608px;
-webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.photo-list img{display:inline-block;border:14px solid #bcbcbc;padding:6%;}
.photo-list img:nth-child(2){float:right;}
.p7-top-cn .p5-top-cn{top:20%;width:1000px;margin-left:-500px;}
.p7-top-cn .p5-bottom-en{bottom:20%;}
.p7-top-cn .p5-text-file{margin:6% 0px 0px;}

.cute{width:318px;height:235px;margin:0px auto 3%;position:relative;}
.cute .line{background:url(../images/cute/line.png) no-repeat;width:318px;height:54px;left:0px;bottom:0px;}
.scene.sceneUnLock .cute .line{
-webkit-animation-name: bgSize;
  animation-name: bgSize;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
-webkit-animation-fill-mode: both;
  animation-fill-mode: both;
            -webkit-animation-delay: 1s;
          animation-delay: 1s;
          -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.cute .efont{background:url(../images/cute/efont.png) no-repeat; width:122px;height:36px;bottom:-8px;left:50%;margin-left:-61px;}
.hide{
filter:alpha(opacity=0);
    -moz-opacity:0;
    opacity: 0;
}

.scene.sceneUnLock .cute .efont{
-webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
-webkit-animation-timing-function: ease;
    animation-timing-function: ease;
-webkit-animation-fill-mode: both;
  animation-fill-mode: both;
-webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;

}
.cute .c01{ width:108px;height:100px;bottom:40px;left:36px;}
.scene.sceneUnLock .cute .c01{
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
-webkit-animation-timing-function: ease;
    animation-timing-function: ease;
-webkit-animation-fill-mode: both;
  animation-fill-mode: both;
-webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.scene.sceneUnLock .cute .c01:after{content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(../images/cute/01.png) no-repeat;
    -webkit-animation-name: floatingDownLight;
          animation-name: floatingDownLight;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
          -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.cute .c02{ width:96px;height:88px;bottom:45px;right:35px;}
.scene.sceneUnLock .cute .c02{
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
-webkit-animation-timing-function: ease;
    animation-timing-function: ease;
-webkit-animation-fill-mode: both;
  animation-fill-mode: both;
-webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}

.scene.sceneUnLock .cute .c02:after{ content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(../images/cute/02.png) no-repeat;
    -webkit-animation-name: floatingDownLight;
          animation-name: floatingDownLight;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.cute .c03{width:95px;height:165px;top:18px;left:112px;}
.scene.sceneUnLock .cute .c03{
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
-webkit-animation-timing-function: ease;
    animation-timing-function: ease;
-webkit-animation-fill-mode: both;
  animation-fill-mode: both;
-webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.scene.sceneUnLock .cute .c03:after{content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;
    background:url(../images/cute/03.png) no-repeat; 
    -webkit-animation-name: floatingDownLight;
          animation-name: floatingDownLight;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.letter{width:440px;height:160px;bottom:20%;left:50%;margin-left:-220px;}
.le01{left:0px;top:1px;width:52px;height:58px;
-webkit-animation-name: floating;
          animation-name: floating;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
          animation-duration: 5s;
          -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.le01:after{content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;
    background:url(../images/letter/01.png) no-repeat;
    -webkit-animation-name: rotatinglittle;
          animation-name: rotatinglittle;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
          -webkit-animation-duration: 40s;
          animation-duration: 40s;
          -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.le02{right:35px;top:12px;width:24px;height:32px;
-webkit-animation-name: floating;
          animation-name: floating;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
          animation-duration: 5s;
          -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
.le02:after{content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;
    background:url(../images/letter/02.png) no-repeat;
    -webkit-animation-name: rotatinglittle;
          animation-name: rotatinglittle;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
          -webkit-animation-duration: 40s;
          animation-duration: 40s;
          -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.le03{right:0px;top:8px;width:32px;height:58px;
-webkit-animation-name: floating;
          animation-name: floating;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
          animation-duration: 5s;
          -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.le03:after{content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;
    background:url(../images/letter/03.png) no-repeat;
    -webkit-animation-name: rotatinglittle;
          animation-name: rotatinglittle;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
          -webkit-animation-duration: 40s;
          animation-duration: 40s;
          -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.letter-a{left:52px;top:15px;width:96px;height:145px;background:url(../images/letter/a.png) no-repeat;}
.letter-g{left:152px;top:0px;width:148px;height:158px;background:url(../images/letter/g.png) no-repeat;}
.letter-o{right:65px;top:35px;width:82px;height:108px;background:url(../images/letter/o.png) no-repeat;}

.face{width:630px;bottom:25%;left:50%;margin-left:-315px;height:110px;}
.face span{width:108px;height:110px;}
.face span:after{content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.face .f01{position:absolute;left:0px;top:0px;}
.face .f01:after{background:url(../images/face/01.png) no-repeat;}
.face .f02{position:absolute;left:170px;top:0px;}
.face .f02:after{background:url(../images/face/02.png) no-repeat;}
.face .f03{position:absolute;right:170px;top:0px;}
.face .f03:after{background:url(../images/face/03.png) no-repeat;}
.face .f04{position:absolute;right:0px;top:0px;}
.face .f04:after{background:url(../images/face/04.png) no-repeat;}
.face .f01:after,.face .f03:after{
    -webkit-animation-name:floatingUpLight;
          animation-name:floatingUpLight;
          -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.face .f02:after,.face .f04:after{
    -webkit-animation-name:floatingDownLight;
          animation-name:floatingDownLight;
          -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}

.cute-mobile{width:380px;height:214px;top:50%;left:50%;margin:-107px 0px 0px -190px;background:url(../images/cute.jpg) no-repeat 0px 0px;}
.scene.sceneUnLock .cute-mobile{-webkit-animation:cutePic steps(18,end) 5s forwards infinite;opacity:1;}

/* ************************************************************
    add animate
*************************************************************/

@-webkit-keyframes arrowLeft {
  0% {
    -webkit-transform: translate3d(15%, 0, 0);
    opacity: 0;
  }
  40% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  70% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(-15%, 0, 0);
    opacity: 0;
  }
}
@keyframes arrowLeft {
  0% {
    -webkit-transform: translate3d(15%, 0, 0);
    opacity: 0;
  }
  40% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  70% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(-15%, 0, 0);
    opacity: 0;
  }
}

@-webkit-keyframes arrowRight {
  0% {
    -webkit-transform: translate3d(-15%, 0, 0);
    opacity: 0;
  }
  40% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  70% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(15%, 0, 0);
    opacity: 0;
  }
}
@keyframes arrowRight {
  0% {
    -webkit-transform: translate3d(-15%, 0, 0);
    opacity: 0;
  }
  40% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  70% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(15%, 0, 0);
    opacity: 0;
  }
}

@-webkit-keyframes cutePic{
  100%{background-position:0px -3852px;}
}
@keyframes cutePic {
  100%{background-position:0px -3852px;}
}

@-webkit-keyframes changeImg{
  0%{background-position:0 -1320px;opacity:0;}
  10%{opacity:1;}
  100%{background-position:0 0px;}
}
@keyframes changeImg {
  0%{background-position:0 -1320px;opacity:0;}
  10%{opacity:1;}
  100%{background-position:0 0px;opacity:1;}
}

@-webkit-keyframes changeImgIpad{
  0%{background-position:0 -441px;opacity:0;}
  10%{opacity:1;}
  100%{background-position:0 0px;}
}
@keyframes changeImgIpad {
  0%{background-position:0 -441px;opacity:0;}
  10%{opacity:1;}
  100%{background-position:0 0px;opacity:1;}
}
@-webkit-keyframes changeImgMobile{
  0%{background-position:0 -675px;opacity:0;}
  10%{opacity:1;}
  100%{background-position:0 0px;}
}
@keyframes changeImgMobile {
  0%{background-position:0 -675px;opacity:0;}
  10%{opacity:1;}
  100%{background-position:0 0px;opacity:1;}
}

@-webkit-keyframes bgSize {
  0%{width:0;opacity: 0;}
  100% {width:100%;opacity:1;}
}
@keyframes bgSize {
  0%{width:0;opacity: 0;}
  100% {width:100%;opacity: 1;}
}

@-webkit-keyframes floatingLeft {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0) rotate(-45deg);
            transform: translate3d(0,0,0) rotate(-45deg);
  }
  50% {
    -webkit-transform: translate3d(5%,5%,0) rotate(-45deg);
            transform: translate3d(5%,5%,0) rotate(-45deg);
  }
}
@keyframes floatingLeft {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0) rotate(-45deg);
            transform: translate3d(0,0,0) rotate(-45deg);
  }
  50% {
    -webkit-transform: translate3d(5%,5%,0) rotate(-45deg);
            transform: translate3d(5%,5%,0) rotate(-45deg);
  }
}
@-webkit-keyframes floatingLeftMore {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0) rotate(0deg);
            transform: translate3d(0,0,0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(15%,0,0) rotate(0deg);
            transform: translate3d(15%,0,0) rotate(0deg);
  }
}
@keyframes floatingLeftMore {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0) rotate(0deg);
            transform: translate3d(0,0,0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(15%,0,0) rotate(0deg);
            transform: translate3d(15%,0,0) rotate(0deg);
  }
}

@-webkit-keyframes floatingRightMore {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0) rotate(0deg);
            transform: translate3d(0,0,0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(-15%,0,0) rotate(0deg);
            transform: translate3d(-15%,0,0) rotate(0deg);
  }
}
@keyframes floatingRightMore {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0) rotate(0deg);
            transform: translate3d(0,0,0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(-15%,0,0) rotate(0deg);
            transform: translate3d(-15%,0,0) rotate(0deg);
  }
}

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

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

@-webkit-keyframes floatingRight {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0) rotate(-45deg);
            transform: translate3d(0,0,0) rotate(-45deg);
  }
  50% {
    -webkit-transform: translate3d(-5%,-5%,0) rotate(-45deg);
            transform: translate3d(-5%,-5%,0) rotate(-45deg);
  }
}
@keyframes floatingRight {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0) rotate(-45deg);
            transform: translate3d(0,0,0) rotate(-45deg);
  }
  50% {
    -webkit-transform: translate3d(-5%,-5%,0) rotate(-45deg);
            transform: translate3d(-5%,-5%,0) rotate(-45deg);
  }
}

@-webkit-keyframes floatingRightRotate {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0) rotate(180deg);
            transform: translate3d(0,0,0) rotate(180deg);
  }
  50% {
    -webkit-transform: translate3d(-20%,0,0) rotate(180deg);
            transform: translate3d(-20%,0,0) rotate(180deg);
  }
}
@keyframes floatingRightRotate {
  0%, 100% {
    -webkit-transform: translate3d(0,0,0) rotate(180deg);
            transform: translate3d(0,0,0) rotate(180deg);
  }
  50% {
    -webkit-transform: translate3d(-20%,0,0) rotate(180deg);
            transform: translate3d(-20%,0,0) rotate(180deg);
  }
}

@-webkit-keyframes floatingDownDeep {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -30%);
            transform: translate(0, -30%);
  }
}
@keyframes floatingDownDeep {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -30%);
            transform: translate(0, -30%);
  }
}

@-webkit-keyframes floatingDownLight {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -2%);
            transform: translate(0, -2%);
  }
}
@keyframes floatingDownLight {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -2%);
            transform: translate(0, -2%);
  }
}

@-webkit-keyframes floatingDownLightRotate {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(18deg);
            transform: translate(0, 0) rotate(18deg);
  }
  50% {
    -webkit-transform: translate(0, -2%) rotate(18deg);
            transform: translate(0, -2%) rotate(18deg);
  }
}
@keyframes floatingDownLightRotate {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(18deg);
            transform: translate(0, 0) rotate(18deg);
  }
  50% {
    -webkit-transform: translate(0, -2%) rotate(18deg);
            transform: translate(0, -2%) rotate(18deg);
  }
}

@-webkit-keyframes floatingUpLight {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 2%);
            transform: translate(0, 2%);
  }
}
@keyframes floatingUpLight {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 2%);
            transform: translate(0, 2%);
  }
}

@-webkit-keyframes floatingUpLightRotate {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(18deg);
            transform: translate(0, 0) rotate(18deg);
  }
  50% {
    -webkit-transform: translate(0, 2%) rotate(18deg);
            transform: translate(0, 2%) rotate(18deg);
  }
}
@keyframes floatingUpLightRotate {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(18deg);
            transform: translate(0, 0) rotate(18deg);
  }
  50% {
    -webkit-transform: translate(0, 2%) rotate(18deg);
            transform: translate(0, 2%) rotate(18deg);
  }
}

@-webkit-keyframes floatingDown {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -5%);
            transform: translate(0, -5%);
  }
}
@keyframes floatingDown {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -5%);
            transform: translate(0, -5%);
  }
}

@-webkit-keyframes floating {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 10%);
            transform: translate(0, 10%);
  }
}
@keyframes floating {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 10%);
            transform: translate(0, 10%);
  }
}
@-webkit-keyframes rotating {
  0% {
    -webkit-transform: rotate(0turn);
            transform: rotate(0turn);
  }
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
@keyframes rotating {
  0% {
    -webkit-transform: rotate(0turn);
            transform: rotate(0turn);
  }
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
@-webkit-keyframes rotateCircle {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotateCircle {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotatinglittle {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
}
@keyframes rotatinglittle {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
}

/******************font move********************/
#title {
  position:relative;
  width:600px;
  height:36px;
  left:50%;
  top:-20%;
  margin-left:-300px;
  overflow:visible;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
}

#title div {
  position:absolute;
  width:20px;
  height:36px;
  opacity:0;
 animation:move 2s linear infinite;
 -o-animation:move 2s linear infinite;
 -moz-animation:move 2s linear infinite;
 -webkit-animation:move 2s linear infinite;

  transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
}

#title div:nth-child(2) {
  animation-delay:0.2s;
  -o-animation-delay:0.2s;
  -moz-animation-delay:0.2s;
  -webkit-animation-delay:0.2s;
}
#title div:nth-child(3) {
  animation-delay:0.4s;
  -o-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
}
#title div:nth-child(4) {
  animation-delay:0.6s;
  -o-animation-delay:0.6s;
  -moz-animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
}
#title div:nth-child(5) {
  animation-delay:0.8s;
  -o-animation-delay:0.8s;
  -moz-animation-delay:0.8s;
  -webkit-animation-delay:0.8s;
}
#title div:nth-child(6) {
  animation-delay:1s;
  -o-animation-delay:1s;
  -moz-animation-delay:1s;
  -webkit-animation-delay:1s;
}
#title div:nth-child(7) {
  animation-delay:1.2s;
  -o-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
  -webkit-animation-delay:1.2s;
}

@keyframes move {
  0% {
    left:0;
    opacity:0;
  }
    35% {
        left: 41%; 
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%; 
        -moz-transform:rotate(0deg); 
        -webkit-transform:rotate(0deg); 
        -o-transform:rotate(0deg);
        transform:rotate(0deg); 
        opacity:1;
    }
    100% {
        left:100%; 
        -moz-transform:rotate(-180deg); 
        -webkit-transform:rotate(-180deg); 
        -o-transform:rotate(-180deg); 
        transform:rotate(-180deg);
        opacity:1;
    }
}

@-moz-keyframes move {
    0% {
        left:0; 
        opacity:0;
    }
    35% {
        left:41%; 
        -moz-transform:rotate(0deg); 
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%; 
        -moz-transform:rotate(0deg); 
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%; 
        -moz-transform:rotate(-180deg); 
        transform:rotate(-180deg);
        opacity:1;
    }
}

@-webkit-keyframes move {
    0% {
        left:0; 
        opacity:0;
    }
    35% {
        left:41%; 
        -webkit-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    65% {
        left:59%; 
        -webkit-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    100% {
        left:100%;
        -webkit-transform:rotate(-180deg); 
        transform:rotate(-180deg); 
        opacity:1;
    }
}

@-o-keyframes move {
    0% {
        left:0; 
        opacity:0;
    }
    35% {
        left:41%; 
        -o-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    65% {
        left:59%; 
        -o-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    100% {
        left:100%; 
        -o-transform:rotate(-180deg); 
        transform:rotate(-180deg); 
        opacity:1;
    }
}
.text-pc{display:block;}
.text-mobile,.cute-mobile{display:none;}
#sceneAbout .scene-content .summary.textLeft,.gallery .gallery-imgs .img-wrap .gallery-head .summary.textLeft,#sceneCredit .scene-content .lede.textLeft{text-align:left;}
#videobox{position:absolute;width:825px;height:464px;left:50%;top:50%;margin:-232px 0px 0px -412px;background-color:#fff;background-image:url(../images/video.jpg);background-size:100% 100%;background-position:top;overflow:hidden;}
#videoALL{
  height:auto;
  position:absolute;
  width:100%;
  top:0;
  left:0;object-fit:fill;
  display:block;
  background-size:cover;
  overflow:hidden;
}

.gallery .arrL{left:6%;}
.gallery .arrR{right:6%;}
.navi li{width:auto;}
.gallery .arrColorBlack .scroll-circle{border-width:0px;}
.gallery .arrL .scroll-circle {
    -webkit-transform: rotate(0deg) !important;
    -ms-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
}
.gallery .arrR .scroll-circle {
    -webkit-transform: rotate(180deg) !important;
    -ms-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
}

.scroll{width:30px;height:62px;}
.scroll .scroll-circle{overflow:visible;}
.gallery .scroll-circle em{background:url(../images/arrow.png) no-repeat 0px 0px;display:block;width:100%;height:100%;
-webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
          -webkit-animation-duration: 2s;
          animation-duration: 2s;
          -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.gallery .arrL .scroll-circle, .gallery .arrR .scroll-circle{border-width:0px;}
.gallery .arrL .scroll-circle em{
  -webkit-animation-name: arrowLeft;
  animation-name: arrowLeft;
}
.gallery .arrR .scroll-circle em{
  -webkit-animation-name: arrowRight;
  animation-name: arrowRight;
}
.gallery .scroll-circle:hover em{background-image:url(../images/arrowCurrent.png);}
.gallery .gallery-imgs .img-wrap{background:#f1f5f8;}
.gallery .gallery-imgs .img-wrap.bg-white{ background:#fff;}
.code{position:absolute;bottom:20%;right:20%;width:110px;font-size:14px;text-align:center;
-webkit-animation-name:fadeIn;
  animation-name: fadeIn;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
}
.code span{display:block;line-height:36px;}
.code p{border:10px solid #fff;}

@media (max-width:1680px) {
   #sceneAbout .scene-content,.gallery .gallery-imgs .img-wrap .gallery-head{top:35%;}
   .p01-tu01{top:15%;}
   .scene .color-cover .cover-title{font-size:50px;}
   .webAnimate,.ipadAnimate,.mobileAnimate,.p01-tu01,.agoName,.letter,.face{
     -webkit-transform:scale(0.8);
     -ms-transform:scale(0.8);
     -moz-transform:scale(0.8);
        transform:scale(0.8);
   }
}

@media (max-width:1600px) {
  #sceneAbout .scene-content,.gallery .gallery-imgs .img-wrap .gallery-head{top:32%;}
   .scene .color-cover .cover-title{font-size:40px;}
   .scene.sceneUnLock .p01-text01{bottom:12%;}
   .scene .scene-inner .scene-content .title,.gallery .gallery-imgs .img-wrap .gallery-head .title{font-size:30px;}
   .scene .scene-inner .scene-content .summary,.gallery .gallery-imgs .img-wrap .gallery-head .summary{font-size:16px;}
   .scene .scene-inner .scene-content .title{padding-bottom:2%;}
   .webAnimate,.ipadAnimate,.mobileAnimate,.p01-tu01,.agoName,.letter,.face{
     -webkit-transform:scale(0.7);
     -ms-transform:scale(0.7);
     -moz-transform:scale(0.7);
        transform:scale(0.7);
   }
   #sceneCredit .scene-content .title img{height:60px;}
   #sceneCredit .scene-content .lede{font-size:16px;}
   .logo-ago{top:20%;}
   .s-bottom-text{bottom:20%;}
   .p3-top-text{top:15%;}
   .p4-top-cn{top:25%;}
   .p8-top-cn .p5-top-cn{width:900px;margin-left:-450px;}
   .p5-text-file{
    -webkit-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -moz-transform:scale(0.8);
    transform:scale(0.8);
   }
}

@media (max-width:1440px) {
   #sceneAbout .scene-content,.gallery .gallery-imgs .img-wrap .gallery-head{top:30%;}
   .scene .color-cover .cover-title{font-size:30px;}
   .scene .scene-inner .scene-content .title,.gallery .gallery-imgs .img-wrap .gallery-head .title{font-size:26px;}
   .scene .scene-inner .scene-content .summary,.gallery .gallery-imgs .img-wrap .gallery-head .summary{font-size:14px;}
   .webAnimate,.ipadAnimate,.mobileAnimate,.p01-tu01,.agoName,.letter,.face{
     -webkit-transform:scale(0.6);
     -ms-transform:scale(0.6);
     -moz-transform:scale(0.6);
        transform:scale(0.6);
   }
   #sceneCredit .scene-content .title img{height:50px;}
   .p3-top-text img{width:600px;}
   .s-bottom-text img{width:640px;}
   .p4-top-cn{
     -webkit-transform:scale(0.8);
     -ms-transform:scale(0.8);
     -moz-transform:scale(0.8);
        transform:scale(0.8);
   }
   .p6-middle-tip{width:300px;}
   .p4-bottom-en,.p5-bottom-en{font-size:28px;}
   .p5-text-file{
    -webkit-transform:scale(0.6);
    -ms-transform:scale(0.6);
    -moz-transform:scale(0.6);
    transform:scale(0.6);
   }
   .p8-top-cn .p5-top-cn{width:700px;margin-left:-350px;}
   .p5-circle-ago{display:none;}
}

@media (max-width:780px) {
   .gallery .gallery-imgs .img-wrap .gallery-head .title,.scene .scene-inner .scene-content{padding:0 0 0 5%;}
   .gallery .gallery-imgs .img-wrap .gallery-head .title{padding-bottom:2%;}
   .gallery .gallery-imgs .img-wrap .gallery-head .summary{padding:0 0 0 5%;}
   .scene .scene-inner .scene-content .title,.gallery .gallery-imgs .img-wrap .gallery-head .title{font-size:1.6rem;text-align:left;}
   .scene .color-cover .cover-title{font-size:1.4rem;}
   #sceneCredit .scene-content .title img{height:2.2rem;}
   #sceneCredit .scene-content .lede{font-size:12px;}
   .gallery .gallery-imgs .img-wrap .gallery-head{top:46%;}
   .p01-tu01,.text-pc{display:none;}
   .mobile-tu01,.text-mobile,.cute-mobile{display:block;}
   .p01-text01{width:80%;left:10%;font-size:12px;}
   .p01-tu01{width:80%;height:7rem;margin-left:-40%;}
   .p01-tu01:after{background-size:100% auto;}
   .p-logo{width:50px;margin:0 auto 5%;}
   .p-logo img{max-width:100%;}
   .logo-ago{transform:scale(0.6);}
   .agoName{width:100%;margin-left:-50%;bottom:12%;}
   .agoName span{width:29%;margin:0 0 3% 35%;float:none;display:block;}
   .agoName span:nth-child(2){width:25%;}
   .agoName span:nth-child(3){width:32%;}
   .agoName span em{background-size:100% auto;top:1.5rem;right:-1rem;width:1rem;height:2rem;}
   .agoName span:nth-child(3) em{right:-1rem;}
   .scene.sceneUnLock .p01-tu01:after{
    -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;
      -webkit-animation-timing-function: ease;
              animation-timing-function: ease;
                -webkit-animation-delay: 1s;
              animation-delay: 1s;
              -webkit-animation-duration: 3s;
              animation-duration: 3s;
    }
    #videobox{position:absolute;width:380px;height:214px;left:50%;top:50%;margin:-107px 0px 0px -190px;}
    .webAnimate{margin-top:-425px;}

    .s-bottom-text img{width:70%;}
    .logo-ago,.p3-top-text{top:30%;}
    .s-bottom-text{bottom:30%;}
    .p3-top-text img{width:75%;}
    .p4-top-cn{
     -webkit-transform:scale(0.6);
     -ms-transform:scale(0.6);
     -moz-transform:scale(0.6);
        transform:scale(0.6);
   }
   .photo-list{width:90%;margin-left:-45%;}
   .p5-circle-ago{display:block;}
   .code{right:10%;bottom:10%;}
}
@media (max-width: 480px) {
    .cute-mobile{
      -webkit-transform:scale(0.8);
      -ms-transform:scale(0.8);
      -moz-transform:scale(0.8);
      transform:scale(0.8);
    }
    .cute{
        -webkit-transform:scale(0.8);
        -ms-transform:scale(0.8);
        -moz-transform:scale(0.8);
        transform:scale(0.8);
    }
    .imgAnimate{ margin-top:-430px;
        -webkit-transform:scale(0.42);
        -ms-transform:scale(0.42);
        -moz-transform:scale(0.42);
        transform:scale(0.42);
    }
    .text-pc{display:none;}
    .text-mobile{display:block;}
    .webAnimate,.ipadAnimate,.mobileAnimate,.p01-tu01,.agoName,.letter,.face{
     -webkit-transform:scale(0.4);
     -ms-transform:scale(0.4);
     -moz-transform:scale(0.4);
        transform:scale(0.4);
   }
   .scene .color-cover .cover-title{
    left:0px;width:100%; text-align:center;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
   }
   .letter{bottom:18%;}
   .p3-bottom-en,.p4-bottom-en,.p5-bottom-en{font-size:16px;}
   .p4-top-cn{top:35%;
     -webkit-transform:scale(0.35);
     -ms-transform:scale(0.35);
     -moz-transform:scale(0.35);
        transform:scale(0.35);
   }
   .p5-text-file{top:25%;
     -webkit-transform:translate(0, -25%) scale(0.35);
     -ms-transform:translate(0, -25%) scale(0.35);
     -moz-transform:translate(0, -25%) scale(0.35);
        transform:translate(0, -25%) scale(0.35);
   }
   .p5-top-cn p:nth-child(1) img{width:280px;}
   .p5-bottom-en p:nth-child(2) img{width:50%;}
   .mobile-tu01{top:35%;}
   .scene.sceneUnLock .p01-text01{bottom:18%;}
   .p4-bottom-en{bottom:35%;}
   .p5-circle-ago{width:90px;height:90px;margin-top:-20%;}
   .p5-top-cn{top:20%;}
   .p5-bottom-en{bottom:20%;}
   .p6-middle-tip{width:180px;margin-top:-15%;}
   .p6-top-cn .p5-top-cn,.p7-top-cn .p5-top-cn{top:30%;}
   .p6-top-cn .p5-bottom-en,.p7-top-cn .p5-bottom-en{bottom:25%;}
   .photo-list img{width:30%;border-width:8px;padding:5%;}
   .p7-top-cn .p5-text-file{margin-top:2%;}
   .p8-top-cn .p5-top-cn{top:35%;}
   .p8-top-cn .p5-bottom-en{bottom:35%;}

}
@media (max-width:360px) {
   .scene .scene-inner .scene-content .title,.gallery .gallery-imgs .img-wrap .gallery-head .title{font-size:1.4rem;}
   #sceneAbout .scene-content,.gallery .gallery-imgs .img-wrap .gallery-head{top:34%;}
   #sceneCredit .scene-content .title img{height:2rem;}
    .cute,.letter,.face{
        -webkit-transform:scale(0.5);
        -ms-transform:scale(0.5);
        -moz-transform:scale(0.5);
        transform:scale(0.5);
    }
    .face{
        -webkit-transform:scale(0.4);
        -ms-transform:scale(0.4);
        -moz-transform:scale(0.4);
        transform:scale(0.4);
    }
    .imgAnimate{
        -webkit-transform:scale(0.3);
        -ms-transform:scale(0.3);
        -moz-transform:scale(0.3);
        transform:scale(0.3);
    }
    .webAnimate,.ipadAnimate,.mobileAnimate,.p01-tu01,.agoName,.letter,.face{
     -webkit-transform:scale(0.3);
     -ms-transform:scale(0.3);
     -moz-transform:scale(0.3);
        transform:scale(0.3);
   }
}