@charset "UTF-8";
.playEle {position: absolute;opacity: 0;}
.smallicon{display: inline-block;width: 24px;}

body {background: #010B17;font-size: 20px;}
.wrap {background: #010B17;max-width: 500px;height: 100%;margin: 0 auto;overflow: hidden;}
.item{position: relative;width: 100%;height: 100%;overflow: hidden;backface-visibility: hidden;}
/******************************华丽的分割线***************************************************/
.item1 {}
.i1top{width: 100%;left: 0%;top: 0px;z-index: 11;}
.item1.play .i1top{opacity: 1;animation: i1top 1.6s ease .3s both 1;}
.item1 .i1topll,.item1 .i1toplr{width: 160px;top: 0px;z-index: 10;}
.item1 .i1topll{left: 0;}
.item1 .i1toplr{right: 0;}
.item1.play .i1topll{animation: i1topll 1.2s ease-out .3s both 1;}
.item1.play .i1toplr{animation: i1toplr 1.2s ease-out .3s both 1;}
.item1 .i1yue{width: 100%;top: 0px;left: 0px;}
.item1.play .i1yue{opacity: 1;animation: i1yue 1000s linear 1s both 1;}
.item1 .i1huan{width: 100%;top: 0px;left: 0px;}
.item1.play .i1huan{animation: i1huan 300s ease 1s both 1;}
.item1 .i1yueyuan{width: 68%;height: 300px;top: 32%;left: 16%;z-index: 12;}
.item1.play .i1yueyuan{opacity: 1;animation: i1yueyuan 1.2s ease 2.2s both 1;}
.item1 .i1zi{width: 84%;left: 8%;top: 25%;z-index: 13;}
.item1.play .i1zi{opacity: 1;animation: i1zi 2s ease-out 2.6s both 1;}
.item1 .i1btm{width: 100%;left: 0;bottom: 0;}
.item1.play .i1btm{opacity: 1;animation: i1btm 1s ease-out 4.3s both 1;}

.i1name{width: 100%;left:0;bottom: 18%;}
.i1namep,.i1word1,.i1word2{opacity: 0;}
.item1.play .i1namep{animation: i1zi 1.6s ease-out 3s both 1;}
.item1.play .i1word1{animation: i1top 1s ease-out 3.5s both 1;}
.item1.play .i1word2{animation: i1top 1s ease-out 4s both 1;}
/******************************华丽的分割线***************************************************/
.item2 {}
.item2 .i2yue{width: 80%;left: 10%;top: 0px;}
.item2.play .i2yue{opacity: 1;animation: i2yue 1.6s ease-out .3s both 1;}
.item2 .i2hua{width: 100%;left: 0px;top: 80px;}
.item2.play .i2hua{animation: i2hua 1.6s ease-out .3s both 1;}

.i2zq{width: 100%;left: 0;top: 20px;}
.item2.play .i2zq{animation: i1zi 1.6s ease-out 1.4s both 1;}
.i2word{width: 100%;left: 0;top: 33%;}
.item2 .i2wordp,.item2 .i2wordp2{opacity: 0;}
.item2.play .i2wordp{opacity: 1;animation: bounceInLeft 1.6s ease-out .3s both 1;}
.item2.play .i2wordp2{opacity: 1;animation: bounceInLeft 1.6s ease-out .3s both 1;}

.item2 .i2btml,.item2 .i2btmr{width: 20%;bottom: 0;z-index: 28;}
.item2 .i2btml{left: 0;}
.item2 .i2btmr{right: 0;}
.item2.play .i2btml{animation: i2btml 1.2s ease-out 4s both 1;}
.item2.play .i2btmr{animation: i2btmr 1.2s ease-out 4s both 1;}
.i2ren{width: 60%;left: 20%;bottom: 0;z-index: 29;}
.item2.play .i2ren{opacity: 1;animation: i1btm 1.2s ease-out 4.3s both 1;}
/******************************华丽的分割线***************************************************/
.item3 {}
.item3 .i3top{width: 100%;left: 0;top: -20px;}
.item3.play .i3top{opacity: 1;animation: i1top 1.6s ease-out .3s both 1;}
.item3 .i3hua{width: 100%;left: 0;top: -20px;}
.item3.play .i3hua{opacity: 1;animation: i3hua 1.6s ease-out .6s both 1;}
.item3 .i3qiu{width: 80%;left: 10%;top: 20px;}
.item3.play .i3qiu{opacity: 1;animation: pullDown 1.4s ease-out 1s both 1;}
.item3 .i3word{opacity: 0;width: 100%;left: 0;top: 52%;}
.item3.play .i3word{opacity: 1;animation: pullUp 1.4s ease-out 1.4s both 1;}
.item3 .i3info{opacity: 0;width: 100%;left: 0;bottom: 16%;font-size: 1.1em;z-index: 35;}
.item3.play .i3info{opacity: 1;animation: bounceInUp 1.4s ease-out 1.6s both 1;}
.item3 .i3btm{width: 100%;left: 0;bottom: 0;}
.item3.play .i3btm{opacity: 1;animation: i1btm 1.6s ease-out 1.8s both 1;}

.item3 .i3pic{width: 100%;left: 0;bottom: 15%;z-index: 999;}
.item3.play .i3pic{opacity: 1;animation: i3pic 1.6s ease-out 1.8s both 1;}

/******************************华丽的分割线***************************************************/
.item4 {}
.item4 .i4top{width: 100%;left: 0;top: 50px;}
.item4.play .i4top{opacity: 1;animation: i1top 1.6s ease-out .3s both 1;}
.item4 .i4yue{width: 100%;left: 0%;top: 0px;}
.item4.play .i4yue{opacity: 1;animation: i2yue 1.6s ease-out .3s both 1;}
.item4 .i4mingyue{width: 80%;left: 10%;top: 0px;}
.item4.play .i4mingyue{opacity: 1;animation: i1top 1.6s ease-out .3s both 1;}

.item4 .i4word{opacity: 0;width: 100%;left: 0;top: 42%;}
.item4.play .i4word{opacity: 1;animation: pullUp 1.6s ease-out 1.6s both 1;}

.item4 .i4btm{width: 100%;left: 0;bottom: 0;}
.item4.play .i4btm{opacity: 1;animation: i1btm 1.6s ease-out 1.8s both 1;}
/******************************华丽的分割线***************************************************/
.item5 {}
.item5 .i5topl{width: 50%;left: -10%;top: -10%;}
.item5.play .i5topl{opacity: 1;animation: i5topl 1.6s ease-out .3s both 1;}
.item5 .i5topr{width: 80%;right: -20%;top: -20%;}
.item5.play .i5topr{opacity: 1;animation: i5topr 1.6s ease-out .3s both 1;}
.item5 .i5zi{width: 80%;left: 10%;top: 0;}
.item5.play .i5zi{opacity: 1;animation: i1top 1.2s ease-out 1.2s both 1;}
.item5 .i5word{opacity: 0;width: 100%;left: 0;top: 45%;}
.item5.play .i5word{opacity: 1;animation: bounceInDown 1.6s ease-out 1.8s both 1;}
.item5 .i5btm{width: 100%;left: 0;bottom: 0;}
.item5.play .i5btm{opacity: 1;animation: i1btm 1.6s ease-out 2s both 1;}
/******************************华丽的分割线***************************************************/
.item6 {position: relative;bottom: 0;}
.item6 .i6top{width: 100%;left: 0%;top: 0%;}
.item6.play .i6top{opacity: 1;animation: i1top 1.6s ease-out .3s both 1;}
.item6 .i6zq{opacity: 0;width: 80%;left: 10%;top: 2%;}
.item6.play .i6zq{opacity: 1;animation: i1top 1.6s ease-out .3s both 1;}

.item6 .subform{opacity: 0;display: block;width: 100%;left: 0%;top: 35%;}
.item6.play .subform{opacity: 1;animation: pullUp 1.6s ease-out 1.3s both 1;}
.item6 .i6nametop{width: 80%;margin: 0 auto;}
.item6  p{padding: 10px 0;}
.item6 .xname,.subbtn{width: 70%;border: 2px solid #e5d412;font-size: 1.4em;-webkit-appearance: none;}
.item6 .xname{height: 50px;line-height: 50px;border-radius: 25px;padding-left: 20px;}
.item6 .subbtn{height: 60px;line-height: 60px;border-radius: 30px;background: #F3E113;color: #ff334f;font-weight: bold;}

.item6 .i6info{opacity: 0;width: 100%;left: 0;bottom: 14%;}
.item6.play .i6info{opacity: 1;animation: bounceInUp 1.6s ease-out .6s both 1;}

.item6 .i6btm{opacity: 0;width: 100%;left: 0;bottom: 0;}
.item6.play .i6btm{opacity: 1;animation: i1btm 1.6s ease-out .6s both 1;}

.comwx2img {width: 250px;margin-top: 42px;}
/******************************华丽的分割线***************************************************/
#mod_loading{position: absolute;left: 0;top: 0;width: 100%;height: 101%;background: #010B17;z-index: 99999;}
#mod_loading .spinner {width: 100px;height: 100px;position: relative;margin: 200px auto 0 auto;}
#mod_loading .double-bounce1, .double-bounce2 {width: 100%;height: 100%;border-radius: 50%;background-color: #ffd200;
    opacity: 0.6;position: absolute;top: 0; left: 0; animation: bounce 2.0s infinite ease-in-out;}
#mod_loading .double-bounce2 {animation-delay: -1.0s;}
@keyframes bounce {
    0%, 100% {transform: scale(0.0);}
    50% {transform: scale(1.0);}
}
#mod_loading .progress,#mod_loading #progress{height: 16px;}
#mod_loading .progress{position: relative;width: 60%;margin: 25px auto 0 auto;border: 2px solid #ffd200;border-radius: 10px;
    box-shadow: 0px 0px 5px #fcfc00;overflow: hidden;}
#mod_loading #progress{display: block;background: #fcfc00;width: 0%;}
#mod_loading .percent{width: 100%;margin: 25px auto 0 auto;color: #ffd200;font-weight: bold;}
#mod_loading #percent{}

.upicon{z-index: 998;position: absolute;width: 6%;bottom: 3%;left: 47%;-webkit-animation:upicon 1.8s ease both infinite;}
@-webkit-keyframes upicon{
    0%{-webkit-transform: translateY(0px);opacity:0;}
    50%,60%{-webkit-transform: translateY(-25px);opacity:1;}
    80%,100%{-webkit-transform: translateY(-40px);opacity:0;}
}

/******************************华丽的分割线***************************************************/

@keyframes i1top {
    0%{transform: translateY(-100%);}
    100% {transform:translateY(0);opacity: 1;}
}
@keyframes i1topll {
    0%{transform: translate(-100%,-100%);}
    100% {transform:translate(0,0);opacity: 1;}
}
@keyframes i1toplr {
    0%{transform: translate(100%,-100%) rotateY(180deg);}
    100% {transform:translate(0,0) rotateY(180deg);opacity: 1;}
}
@keyframes i1yue {
    0% {transform: scale(3) rotate(0deg);opacity: 0;}
    .1%{transform: scale(1) rotate(0deg);opacity: 1;}
    100%{transform: scale(1) rotate(-4800deg);}
}
@keyframes i1huan {
    0% {transform: scale(0) rotate(0deg);opacity: 0;}
    .5%{transform: scale(1) rotate(0deg);opacity: 1;}
    100%{transform: scale(1) rotate(4800deg);}
}
@keyframes i1yueyuan {
    0% {transform: translateY(0);}
    100%{transform: translateY(-46%);}
}
@keyframes i1zi {
    0%, 20%, 40%, 60%, 80%, 100% {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
    0% {transform: scale3d(.3, .3, .3);opacity: 0;}
    20% {transform: scale3d(1.1, 1.1, 1.1);}
    40% {transform: scale3d(.9, .9, .9);}
    60% {transform: scale3d(1.03, 1.03, 1.03);opacity: 1;}
    80% {transform: scale3d(.97, .97, .97);}
    100% {transform: scale3d(1, 1, 1);opacity: 1;}
}
@keyframes i1btm {
    0%{transform: translateY(200%) scale(3);}
    100% {transform:translateY(0) scale(1); }
}
/******************************华丽的分割线***************************************************/
@keyframes i2yue {
    0%{transform: translateY(-100%);}
    100% {transform:translateY(-30%);opacity: 1;}
}
@keyframes i2hua {
    0%{transform: translateY(60%) scale(0);}
    100% {transform:translateY(0) scale(1);opacity: 1;}
}
@keyframes i2btml {
    0%{transform: translate(-100%,100%);}
    100% {transform:translate(0,0);opacity: 1;}
}
@keyframes i2btmr {
    0%{transform: translate(100%,100%);}
    100% {transform:translate(0,0);opacity: 1;}
}
/******************************华丽的分割线***************************************************/
@keyframes i3hua {
    0%{transform: scale(0);}
    100% {transform:scale(1);}
}
@keyframes i3pic {
    0%{transform: scale(0);}
    100% {transform:scale(1);}
}
/******************************华丽的分割线***************************************************/
@keyframes i5topl {
    0%{transform: translate(-100%,-100%);}
    100% {transform:translate(0,0);}
}
@keyframes i5topr {
    0%{transform: translate(100%,-100%);}
    100% {transform:translate(0,0);}
}

/******************************华丽的分割线***************************************************/
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
    0% {transform: scale3d(.3, .3, .3);opacity: 0;}
    20% {transform: scale3d(1.1, 1.1, 1.1);}
    40% {transform: scale3d(.9, .9, .9);}
    60% {transform: scale3d(1.03, 1.03, 1.03);opacity: 1;}
    80% {transform: scale3d(.97, .97, .97);}
    100% {transform: scale3d(1, 1, 1);opacity: 1;}
}
@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
    0% {transform: translate3d(0, -3000px, 0);opacity: 0;}
    60% {transform: translate3d(0, 25px, 0);opacity: 1;}
    75% {transform: translate3d(0, -10px, 0);}
    90% {transform: translate3d(0, 5px, 0);}
    to {transform: none;}
}
@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
    0% {transform: translate3d(-3000px, 0, 0);opacity: 0;}
    60% {transform: translate3d(25px, 0, 0);opacity: 1;}
    75% {transform: translate3d(-10px, 0, 0);}
    90% {transform: translate3d(5px, 0, 0);}
    to {transform: none;}
}
@keyframes bounceInRight {
    from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
    from {transform: translate3d(3000px, 0, 0);opacity: 0;}
    60% {transform: translate3d(-25px, 0, 0);opacity: 1;}
    75% {transform: translate3d(10px, 0, 0);}
    90% {transform: translate3d(-5px, 0, 0);}
    to {transform: none;}
}
@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
    from {transform: translate3d(0, 3000px, 0);opacity: 0;}
    60% {transform: translate3d(0, -20px, 0);opacity: 1;}
    75% {transform: translate3d(0, 10px, 0);}
    90% {transform: translate3d(0, -5px, 0);}
    to {transform: translate3d(0, 0, 0);}
}
@keyframes pullUp {
    0% {transform: scaleY(0.1) translateZ(0);opacity: 0;}
    40% {transform: scaleY(1.02);opacity: 1;}
    60% {transform: scaleY(0.98);}
    80% {transform: scaleY(1.01);}
    100% {transform: scaleY(0.98);}
    80% {transform: scaleY(1.01);}
    100% {transform: scaleY(1);}
}
@keyframes pullDown {
    0% {transform: scaleY(0.1) translateZ(0);opacity: 0;}
    40% {transform: scaleY(1.02) translateZ(0);opacity: 1;}
    60% {transform: scaleY(0.98) translateZ(0);}
    80% {transform: scaleY(1.01) translateZ(0);}
    100% {transform: scaleY(0.98) translateZ(0);}
    80% {transform: scaleY(1.01) translateZ(0);}
    100% {transform: scaleY(1) translateZ(0);}
}