﻿#loading, .page-P1, .page-P2{background: linear-gradient(to bottom, #c7ebfe, #e8fcfd);}
.page-P3, .page-P4{background: linear-gradient(to bottom, #a8e2fc, #a8e2fc, #dcfdfb);}
.bg-P5{width: 7.5rem; left: 0; top: 0; background: #e5d1ae;}
.page-P7 {background: #cc7390;}

.fzzy{
    font-family: fzzy;
}

.cloud1{animation: cloud1 12000ms -2000ms linear infinite both;}
.cloud2{animation: cloud2 12000ms -2000ms linear infinite both;}

.z-group11 {width: 100%;height: 100%;}
.z-img47{top: 50%;}
.z-img56{left: 6rem;top: 2.2rem;}
.z-img88{top: initial;bottom: 3.36rem;}
.z-img105{top: inherit;bottom: 4.7rem;}
.z-group67,.z-group64{height: 10rem;}
.resultposter{width: 100%; height: 100%;}

.compute{
    background: linear-gradient(to right, rgba(163, 219, 252, 0), rgba(163, 219, 252, 1));
    border-radius: 0.1rem;
    overflow: hidden;
    width: 5.44rem;
    height: 0.32rem;
    left: 0.03rem;
    top: 1.58rem;
}
.swiper-slide-active .compute{animation: compute 5000ms 400ms linear both;}
.swiper-slide-active .z-img232{animation: computeProcess 5000ms 400ms linear both;}
.word{
    width: 6.83rem;
    height: 1.21rem;
    bottom: 0.08rem;
    left: 0.17rem;
}

.preview{
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    opacity: 0;
}
.preview img{width: 100%;height: 100%;pointer-events: auto;display: block;user-select: initial;-webkit-touch-callout: initial;}

/* 答题 */
.z-img191{
    background: url(../resource/img191.png) no-repeat;
    background-size: cover;
    width: 0;
}
.tmxh{
    font-size: 0.24rem;
    color: #998572;
    top: 0.74rem;
    letter-spacing: 0.1rem;
    width: 2.5rem;
}
.tihao{
    color: #e8a309;
    font-size: 0.34rem;
}
.tmtype{
        border-radius: 0.16rem;
    background: #f1ad1a;
    text-align: center;
    line-height: 0.32rem;
    font-size: 0.2rem;
    color: #FFF;
}

.timuinfo{
    position: relative;
    z-index: 10;
    width: 5.68rem;
    height: 7.8rem;
    left: 1.64rem;
    top: 1.6rem;
    overflow-y: auto;
}
.title{
    font-size: 0.34rem;
    line-height: 1.4em;
}
.selects{
    width: 4.78rem;
    height: auto;
    margin: 0.6rem 0 0 0.3rem;
}
.selectCell{
    background: #fef6e5;
    border: solid #f2e2c0 0.06rem;
    border-radius: 0.4rem;
    width: 4.78rem;
    height: 0.94rem;
    margin-top: 0.25rem;
    color: #5b3f24;
}
.selectCell.selected{
    color: #78864c;
    background: #d8f68a;
    border: solid #bcdf60 0.06rem;
}
.selcon{
    width: 4rem;
    height: 0.84rem;
    margin-left: 0.38rem;
    font-size: 0.3rem;
}
.selxh{
    float: left;
    height: 0.84rem;
    width: 0.38rem;
    line-height: 0.84rem;
}
.sel{
    float: left;
    height: 0.84rem;
    width: 3.6rem;
    line-height: 1.1em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.z-img177{
margin: 0.3rem auto 0;
}
.jiexi{
    font-size: 0.28rem;
    line-height: 1.6em;
    color: #826435;
}
.z-img209{top: 5.9rem;}

.z-img210{top: 2.75rem;}
.rightAns{
    width: 3.5rem;
    line-height: 0.38rem;
    font-size: 0.38rem;
    font-weight: bold;
    color: #71b957;
}
.z-img191{
    transition: all 1500ms 500ms linear;
}

.coms{
        width: 3rem;
    font-size: 0.27rem;
    top: 0.25rem;
    line-height: 0.34rem;
    color: #518bb0;
}

.timu12 .selects{margin: 0.3rem 0 0 0.3rem;}
/*.timu16 .selects, .timu20 .selects{margin: 0.45rem 0 0 0.3rem;}*/
.timu22 .selects{margin: 0.3rem 0 0 0.3rem;}
.timu22 .title{font-size: 0.32rem;}
.timu22 .selectCell{margin-top: 0.15rem;}
.timu22 .selcell1, .timu28 .selcell1{font-size: 0.26rem;}

.timu28 .selects, .timu36 .selects{margin: 0.3rem 0 0 0.3rem;}
.timu28 .title, .timu36 .title{line-height: 1.2em;}
.timu36 .selcell1{font-size: 0.24rem;}
/* 答题 */

.z-img143{
    top: initial;
    bottom: 1.17rem;
}
.score{
    color: #595353;
    width: 4rem;
    top: 0.22rem;
    font-size: 0.25rem;
    line-height: 1.3em;
}
.score .xbch{font-size: 0.28rem;}
.score .zhengquelv{}


.z-img19 {
    width: 7.5rem;
    height: 5.28rem;
    left: 1.93rem;
    top: 4.5rem;
}
.z-img50 {
    width: 7.5rem;
    height: 6.27rem;
    left: 0.74rem;
    top: 5.71rem;
}
.z-img74 {
    width: 7.5rem;
    height: 7.1rem;
    left: 1.3rem;
    top: 2.69rem;
}
.z-img117 {
    width: 8.11rem;
    height: 13.9rem;
    left: 0rem;
    top: -1.6rem;
}
.z-bgs6{
    width: 7.5rem;
    height: 16.81rem;
    left: 1.64rem;
    top: -2.4rem;
}
.z-group8{    top: -0.8rem;}
.z-img18{width: 7.72rem; left: 5rem;}
.z-group18{top: -0.5rem;}
.z-img64{left: 5.9rem; top: 6rem;width: 3.41rem;height: 6rem;}
.z-img119{
    left: -0.9rem;
    width: 2.34rem;
    height: 2.49rem;
    top: -0.5rem;
}
.z-img105{bottom: 3.6rem;}
.z-img102{top: 0.5rem;}
.z-img129{
        width: 4.33rem;
    height: 3.73rem;
    left: -1.4rem;
    bottom: -1.7rem;
}
.z-img129{
        width: 4.33rem;
    height: 3.73rem;
    left: -1.4rem;
    bottom: -1.7rem;
}
.z-img124 {
    width: 2.55rem;
    height: 2.26rem;
}
.z-img29{
        width: 6.04rem;
    height: 10.32rem;
    left: -3.7rem;
    bottom: -7.7rem;
}
.z-img28{
    left: 0.9rem;
    width: 3rem;
    height: 5.27rem;
}
.z-group28{top: -0.3rem;}
.posterNotice{
    width: 4.31rem;
    height: 0.4rem;
    left: 1.64rem;
    bottom: 2rem;
    line-height: 0.4rem;
    text-align: center;
    font-size: 0.36rem;
    font-weight: bold;

    animation: jello 1500ms 300ms infinite both;
}

.posterAgain{bottom: 0.8rem;}
.posterTice{bottom: 0.07rem;opacity: 0;display: none;}

.z-img217 {
    width: 3.42rem;
    height: 0.91rem;
    left: 1.6rem;
    top: 1.5rem;
}

.z-group69{top: 3.3rem;}
.z-line {
    width: 5.13rem;
    height: 0.03rem;
    top: 0.7rem;
}
.z-img216{top: 1rem;}

.z-img20 {
    width: 5.17rem;
    height: 5.62rem;
    left: 3rem;
    top: 1.2rem;
}
.z-img58{top: 2rem;}
.z-group20{top: -0.6rem;}
.z-img77{width: 2.8rem;}
.z-img102 {
    width: 2.75rem;
    height: 5.49rem;
    left: 1.4rem;
    top: -0.6rem;
}
.z-img104 {
    width: 0.33rem;
    height: 0.38rem;
    left: 1.4rem;
    top: 0.8rem;
}
.z-img135{width: 4rem;left: 0.8rem;}
.z-img150 {
    width: 3.48rem;
    height: 6.46rem;
    left: 5.2rem;
    top: 4.91rem;
}
.z-group51{top: 2rem;}

.z-img178{width: 1.71rem;left: 0.8rem;}
.z-img180{width: 1.76rem;left: 0.8rem;}
.z-img182{width: 1.81rem;left: 0.8rem;}
.z-img184{width: 2.65rem;left: 0.6rem;}
.z-img186{width: 2.17rem;left: 0.8rem;}
.z-img188{width: 2.02rem;left: 0.8rem;}

.z-img232 {
    width: 1rem;
    height: 1.72rem;
    left: 1.9rem;
    top: 1.3rem;
}






.swiper-slide-active .posterTitle{animation: zoomIn 1000ms 1000ms both;}
.swiper-slide-active .posterMiao{animation: bounceIn 1000ms 1500ms both;}
.swiper-slide-active .z-img249{animation: rotateIn 1000ms 1800ms both;}

.swiper-slide-active .posterSc1{animation: floatY 3000ms -600ms infinite both;}
.swiper-slide-active .posterSc2{animation: floatY 3000ms -1200ms infinite both;}
.swiper-slide-active .posterSc3{animation: floatY 3000ms -1800ms infinite both;}
.swiper-slide-active .posterSc4{animation: floatY 3000ms -2400ms infinite both;}

.swiper-slide-active .chenghao{animation: bounceIn 1000ms 200ms both;}
.swiper-slide-active .posterAgain{animation: fadeInUp 1000ms 500ms both;}
.swiper-slide-active .posterTice{animation: fadeInUp 1000ms 800ms both;}

.swiper-slide-active .z-img274{animation: huaban 800ms 1600ms both;}
.swiper-slide-active .z-img275{animation: huaban 800ms 1800ms both;}


.z-img12{
    width: 6.13rem;
    height: 3.63rem;
    left: -0.6rem;
}
.z-img10{
    width: 1rem;
    height: 0.68rem;
    top: -0.1rem;
}

.z-img211{top: 1.65rem;}
.z-group66{top: -0.3rem;}
.z-img39 {
    width: 0.9rem;
    height: 1.03rem;
    left: 0.5rem;
    top: 0.4rem;
}

.z-img275 {
    width: 3.33rem;
    height: 6.58rem;
    left: 1.5rem;
    top: -0.1rem;
}
.z-img274{top: 5.1rem;}

.z-group14{height: 10.2rem;}
.z-img42{top: 0;}
.z-img44{top: 0.66rem;}
.z-img46{top: 9.5rem;}
.z-img262 {
    width: 5.8rem;
    height: 6.28rem;
    left: 0.75rem;
    top: 2.5rem;
}
.z-img275 {
    width: 3.6rem;
    height: 6.58rem;
    left: 1.5rem;
    top: 0.2rem;
}
.z-img187 {
    width: 1.42rem;
    height: 1.38rem;
    left: 7.18rem;
    top: 4.93rem;
}
.logo {
    width: 0.9rem;
    height: 1.03rem;
    right: 0.5rem;
    left: initial;
    top: 0.45rem;
}
/*.z-img28{bottom: 5rem;}
.z-group8{    top: -0.8rem;}
.z-group20{top: -0.4rem;}
.z-img51{top: -0.8rem}
.z-group28{top: -0.3rem;}*/


.miaoans img{transform: translate(0, 0.4rem);}


.swiper-slide-active .com1{animation: fadeInDown 1000ms both;}
.swiper-slide-active .com2{animation: fadeInDown 1000ms 1500ms both;}
.swiper-slide-active .com3{animation: fadeInDown 1000ms 3000ms both;}


/*PAGE1*/
.swiper-slide-active .z-img39{animation: fadeInDown 1000ms 200ms both;}
.swiper-slide-active .z-img30{animation: flipInX 1000ms 200ms both;}
.swiper-slide-active .z-img31{animation: fadeInDown 1000ms 600ms both;}
.swiper-slide-active .z-img37{animation: fadeInRight 1000ms 1000ms both;}

.swiper-slide-active .z-img32{animation: zoomIn 1000ms 500ms both;}
.swiper-slide-active .z-img33{animation: zoomIn 1000ms 800ms both;}
.swiper-slide-active .z-img34{animation: zoomIn 1000ms 1100ms both;}
.swiper-slide-active .z-img35{animation: zoomIn 1000ms 1400ms both;}

.swiper-slide-active .z-img78, .swiper-slide-active .z-img82{animation: floatY 3000ms -600ms infinite both;}
.swiper-slide-active .z-img22, .swiper-slide-active .z-img79{animation: floatY 3000ms -1200ms infinite both;}
.swiper-slide-active .z-img80{animation: floatY 3000ms -1800ms infinite both;}
.swiper-slide-active .z-img24, .swiper-slide-active .z-img81{animation: floatY 3000ms -2400ms infinite both;}

.swiper-slide-active .z-img38{animation: fadeInUp 1000ms 1400ms both;}

/*Page2*/
.swiper-slide-active .z-img63{animation: swing 15000ms infinite both;transform-origin: 69% 31%}
.swiper-slide-active .z-img56{animation: floatY 3000ms -2000ms infinite both;}
.swiper-slide-active .senceKuang{animation: bounceIn 1000ms 400ms both;}
.swiper-slide-active .senceWord{animation: zoomIn 1000ms 1000ms both;}
.swiper-slide-active .senceMiao{animation: zoomIn 1000ms 600ms both;}
.swiper-slide-active .z-img128{animation: bounceIn 1000ms 800ms both;}
.swiper-slide-active .z-img55{animation: floatY 3000ms -2400ms infinite both;}
.swiper-slide-active .startans{animation: fadeInUp 1000ms 1000ms both;}
.swiper-slide-active .paizi{animation: bounceInDown 1000ms 300ms both;}

.swiper-slide-active .z-img119{animation: swing 6000ms -200ms infinite both;transform-origin: 0.69rem 2rem;}

.swiper-slide-active .z-img115{animation: cloud3 12000ms -2000ms linear infinite both;}
.swiper-slide-active .z-img116{animation: cloud4 12000ms -2000ms linear infinite both;}


.swiper-slide-active .z-img124{animation: tada 1200ms -200ms infinite alternate both;}
.swiper-slide-active .z-img129{animation: swing 1200ms -600ms infinite alternate both;}

.swiper-slide-active .z-img121{animation: pulse 800ms -400ms infinite alternate both;}
.swiper-slide-active .z-img122{animation: pulse 800ms -800ms infinite alternate both;}
.swiper-slide-active .z-img148{animation: flipInY 1000ms 600ms both;}

.swiper-slide-active .z-img27, .swiper-slide-active .z-img127{animation: fadeInRight 1000ms 800ms both;}
/*.swiper-slide-active .z-img29{animation: pulse 1000ms 200ms infinite both;}*/
.swiper-slide-active .z-img28{animation: yaoyi 6000ms infinite both;transform-origin: bottom left;}
.swiper-slide-active .z-img64{animation: yaoyi 6000ms -4000ms infinite both;transform-origin: bottom right;}
.swiper-slide-active .z-img155{animation: pulse 1000ms -600ms infinite both;}
/*.swiper-slide-active .z-img150{animation: yaoyi 8000ms infinite both;transform-origin: bottom;}*/
/*.swiper-slide-active .z-img204{animation: floatYPer 8000ms infinite both; transform-origin: bottom}*/

.swiper-slide-active .miaoans{animation: bounceIn 1000ms 500ms both;}
.swiper-slide-active .scans{animation: floatY 5000ms -800ms infinite both;}

.flower1{animation: fadeInRight 1000ms 500ms infinite both;}
.flower2{animation: swing 6000ms infinite both;transform-origin: bottom left;}
.flower3{animation: pulse 1000ms 200ms infinite both;}


@keyframes computeProcess {
    from {left: -0.5rem;}
    to {left: 5rem;}
}
@keyframes cloud1 {
    from {left: -3.2rem;}
    to {left: 7.6rem;}
}
@keyframes cloud2 {
    from {left: 7.6rem;}
    to {left: -2.1rem;}
}
@keyframes cloud3 {
    from {left: -1.2rem;}
    to {left: 3.8rem;}
}
@keyframes cloud4 {
    from {left: 3.5rem;}
    to {left: -0.5rem;}
}
@keyframes compute {
    from {width: 0rem;}
    to {width: 5.44rem;}
}
@keyframes huaban {
    from {transform: translate(5.32rem, 2rem);opacity: 0;}
    to {transform: translate(0, 0);opacity: 1;}
}
@keyframes floatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}
@keyframes jello {

    from,
    11.1%,
    to {
        transform: translate3d(0, 0, 0);
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

@keyframes yaoyi {
    20% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 3deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}