.clr:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.clr {
    *zoom: 1
}

.telphone {
    display: block;
    position: fixed;
    right: 2%;
    bottom: 15%;
    z-index: 100;
    cursor: pointer
}

.telphone img {
    width: 44px;
    height: 44px
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both
}

.clearfix {
    zoom: 1
}

#content_load_check {
    width: 1px!important
}

.loading-prev {
    width: 100%;
    height: 100%;
    z-index: 999;
    position: relative
}

.loading-prev .no-bar-logo {
    top: 50%!important;
    margin-top: -75px!important
}

.loading-prev .logo-box {
    width: 118px;
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translate(-50%)
}

.loading-prev .logo-box .progressBar {
    height: 4px;
    width: 180px;
    margin: 20px 0 0 -31px
}

.loading-prev .logo-box .progressBar .progressAnim {
    height: 100%;
    animation: progress 3s
}

@keyframes progress {
    0% {
        width: 0
    }
    to {
        width: 100%
    }
}

.loading-prev .logo-box .load-prev-box {
    display: block
}

.loading-prev .logo-box .load-prev-box .load-prev-bg {
    z-index: 1000;
    width: 118px;
    height: 118px;
    background-size: cover!important;
    background-repeat: no-repeat!important
}

.loading-prev .logo-bg,
.loading-prev .logo-bg-color,
.loading-prev .logo-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}

.loading-prev .logo-bg-img {
    z-index: 0;
    background-position: 50%!important;
    background-size: cover!important;
    background-repeat: no-repeat!important
}

@-webkit-keyframes hingeRight {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%,
    60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40%,
    80% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

@keyframes hingeRight {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%,
    60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40%,
    80% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

.hingeRight {
    -webkit-animation-name: hingeRight;
    animation-name: hingeRight
}

@-webkit-keyframes hingeLeft {
    0% {
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%,
    60% {
        -webkit-transform: rotate(-80deg);
        transform: rotate(-80deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40%,
    80% {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, -700px, 0);
        transform: translate3d(0, -700px, 0);
        opacity: 0
    }
}

@keyframes hingeLeft {
    0% {
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%,
    60% {
        -webkit-transform: rotate(-80deg);
        transform: rotate(-80deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40%,
    80% {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

.hingeLeft {
    -webkit-animation-name: hingeLeft;
    animation-name: hingeLeft
}

.twisterInUpRight {
    -webkit-animation-name: twisterInUpRight;
    animation-name: twisterInUpRight
}

@-webkit-keyframes twisterInUpRight {
    0% {
        opacity: 0;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1) translateX(-100%) rotate(-1turn)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1) translateX(0) rotate(0deg)
    }
}

@keyframes twisterInUpRight {
    0% {
        opacity: 0;
        transform-origin: center center;
        transform: scale(1) translateX(-100%) rotate(-1turn)
    }
    to {
        opacity: 1;
        transform-origin: center center;
        transform: scale(1) translateX(0) rotate(0deg)
    }
}

.twisterInUpLeft {
    -webkit-animation-name: twisterInUpLeft;
    animation-name: twisterInUpLeft
}

@-webkit-keyframes twisterInUpLeft {
    0% {
        opacity: 0;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1) translateX(100%) rotate(1turn)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1) translateX(0) rotate(0deg)
    }
}

@keyframes twisterInUpLeft {
    0% {
        opacity: 0;
        transform-origin: center center;
        transform: scale(1) translateX(100%) rotate(1turn)
    }
    to {
        opacity: 1;
        transform-origin: center center;
        transform: scale(1) translateX(0) rotate(0deg)
    }
}

.twisterInUpDown {
    -webkit-animation-name: twisterInUpDown;
    animation-name: twisterInUpDown
}

@-webkit-keyframes twisterInUpDown {
    0% {
        opacity: 0;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1) translateY(-100%) rotate(-1turn)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1) translateY(0) rotate(0deg)
    }
}

@keyframes twisterInUpDown {
    0% {
        opacity: 0;
        transform-origin: center center;
        transform: scale(1) translateY(-100%) rotate(-1turn)
    }
    to {
        opacity: 1;
        transform-origin: center center;
        transform: scale(1) translateY(0) rotate(0deg)
    }
}

.twisterInUpUp {
    -webkit-animation-name: twisterInUpUp;
    animation-name: twisterInUpUp
}

@-webkit-keyframes twisterInUpUp {
    0% {
        opacity: 0;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1) translateY(100%) rotate(1turn)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1) translateY(0) rotate(0deg)
    }
}

@keyframes twisterInUpUp {
    0% {
        opacity: 0;
        transform-origin: center center;
        transform: scale(1) translateY(100%) rotate(1turn)
    }
    to {
        opacity: 1;
        transform-origin: center center;
        transform: scale(1) translateY(0) rotate(0deg)
    }
}

.slideUp {
    -webkit-animation-name: slideUp;
    animation-name: slideUp
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(0)
    }
    to {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(-100%)
    }
}

@keyframes slideUp {
    0% {
        transform-origin: 0 0;
        transform: translateY(0)
    }
    to {
        transform-origin: 0 0;
        transform: translateY(-100%)
    }
}

.slideDown {
    -webkit-animation-name: slideDown;
    animation-name: slideDown
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(0)
    }
    to {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(100%)
    }
}

@keyframes slideDown {
    0% {
        transform-origin: 0 0;
        transform: translateY(0)
    }
    to {
        transform-origin: 0 0;
        transform: translateY(100%)
    }
}

@-webkit-keyframes puffOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1)
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(2)
    }
}

@keyframes puffOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1)
    }
    to {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2)
    }
}

.puffOut {
    -webkit-animation-name: puffOut;
    animation-name: puffOut
}

@-webkit-keyframes puffIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(2)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1)
    }
}

@keyframes puffIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2)
    }
    to {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1)
    }
}

.puffIn {
    -webkit-animation-name: puffIn;
    animation-name: puffIn
}

@-webkit-keyframes twisterInDownRight {
    0% {
        opacity: 0;
        -webkit-transform-origin: left top;
        -webkit-transform: scale(1) translateX(-100%) rotate(1turn)
    }
    30% {
        -webkit-transform-origin: left top;
        -webkit-transform: scale(0) translateX(-100%) rotate(1turn)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: left top;
        -webkit-transform: scale(1) translateX(0) rotate(0deg)
    }
}

@keyframes twisterInDownRight {
    0% {
        opacity: 0;
        transform-origin: left top;
        transform: scale(0) translateX(-100%) rotate(1turn)
    }
    30% {
        transform-origin: left top;
        transform: scale(0) translateX(-100%) rotate(1turn)
    }
    to {
        opacity: 1;
        transform-origin: left top;
        transform: scale(1) translateX(0) rotate(0deg)
    }
}

.twisterInDownRight {
    -webkit-animation-name: twisterInDownRight;
    animation-name: twisterInDownRight
}

@-webkit-keyframes twisterInDownLeft {
    0% {
        opacity: 0;
        -webkit-transform-origin: right bottom;
        -webkit-transform: scale(0) translateX(100%) rotate(-1turn)
    }
    30% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: scale(0) translateX(100%) rotate(-1turn)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: right bottom;
        -webkit-transform: scale(1) translateX(0) rotate(0deg)
    }
}

@keyframes twisterInDownLeft {
    0% {
        opacity: 0;
        transform-origin: right bottom;
        transform: scale(0) translateX(100%) rotate(-1turn)
    }
    30% {
        transform-origin: right bottom;
        transform: scale(0) translateX(100%) rotate(-1turn)
    }
    to {
        opacity: 1;
        transform-origin: right bottom;
        transform: scale(1) translateX(0) rotate(0deg)
    }
}

.twisterInDownLeft {
    -webkit-animation-name: twisterInDownLeft;
    animation-name: twisterInDownLeft
}

@-webkit-keyframes twisterInDownDown {
    0% {
        opacity: 0;
        -webkit-transform-origin: right top;
        -webkit-transform: scale(0) translateY(-100%) rotate(1turn)
    }
    30% {
        -webkit-transform-origin: right top;
        -webkit-transform: scale(0) translateY(-100%) rotate(1turn)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: right top;
        -webkit-transform: scale(1) translateY(0) rotate(0deg)
    }
}

@keyframes twisterInDownDown {
    0% {
        opacity: 0;
        transform-origin: right top;
        transform: scale(0) translateY(-100%) rotate(1turn)
    }
    30% {
        transform-origin: right top;
        transform: scale(0) translateY(-100%) rotate(1turn)
    }
    to {
        opacity: 1;
        transform-origin: right top;
        transform: scale(1) translateY(0) rotate(0deg)
    }
}

.twisterInDownDown {
    -webkit-animation-name: twisterInDownDown;
    animation-name: twisterInDownDown
}

@-webkit-keyframes twisterInDownUp {
    0% {
        opacity: 0;
        -webkit-transform-origin: left bottom;
        -webkit-transform: scale(0) translateY(100%) rotate(-1turn)
    }
    30% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: scale(0) translateY(100%) rotate(-1turn)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: left bottom;
        -webkit-transform: scale(1) translateY(0) rotate(0deg)
    }
}

@keyframes twisterInDownUp {
    0% {
        opacity: 0;
        transform-origin: left bottom;
        transform: scale(0) translateY(100%) rotate(-1turn)
    }
    30% {
        transform-origin: left bottom;
        transform: scale(0) translateY(100%) rotate(-1turn)
    }
    to {
        opacity: 1;
        transform-origin: left bottom;
        transform: scale(1) translateY(0) rotate(0deg)
    }
}

.twisterInDownUp {
    -webkit-animation-name: twisterInDownUp;
    animation-name: twisterInDownUp
}

@-webkit-keyframes rollInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: none
    }
}

@keyframes rollInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rollInRight {
    -webkit-animation-name: rollInRight;
    animation-name: rollInRight
}

@-webkit-keyframes rollInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rollInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rollInLeft {
    -webkit-animation-name: rollInLeft;
    animation-name: rollInLeft
}

@-webkit-keyframes rollInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0) rotateX(120deg);
        transform: translate3d(0, -100%, 0) rotateX(120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rollInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0) rotateX(120deg);
        transform: translate3d(0, -100%, 0) rotateX(120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rollInDown {
    -webkit-animation-name: rollInDown;
    animation-name: rollInDown
}

@-webkit-keyframes rollInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0) rotateX(-120deg);
        transform: translate3d(0, 100%, 0) rotateX(-120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rollInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0) rotateX(-120deg);
        transform: translate3d(0, 100%, 0) rotateX(-120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rollInUp {
    -webkit-animation-name: rollInUp;
    animation-name: rollInUp
}

@-webkit-keyframes lightSpeedInRight {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
        transform: translate3d(-100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes lightSpeedInRight {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
        transform: translate3d(-100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedInRight {
    -webkit-animation-name: lightSpeedInRight;
    animation-name: lightSpeedInRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedInLeft {
    -webkit-animation-name: lightSpeedInLeft;
    animation-name: lightSpeedInLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes lightSpeedInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0) skewX(-30deg);
        transform: translate3d(0, -100%, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@-webkit-keyframes lightSpeedInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0) skewX(-30deg);
        transform: translate3d(0, -100%, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedInDown {
    -webkit-animation-name: lightSpeedInDown;
    animation-name: lightSpeedInDown;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes lightSpeedInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0) skewX(-30deg);
        transform: translate3d(0, 100%, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@-webkit-keyframes lightSpeedInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0) skewX(-30deg);
        transform: translate3d(0, 100%, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedInUp {
    -webkit-animation-name: lightSpeedInUp;
    animation-name: lightSpeedInUp;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -200px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -200px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes opacityFadeInLeft {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes opacityFadeInLeft {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.opacityFadeInLeft {
    -webkit-animation-name: opacityFadeInLeft;
    animation-name: opacityFadeInLeft
}

@-webkit-keyframes opacityFadeInRight {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes opacityFadeInRight {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.opacityFadeInRight {
    -webkit-animation-name: opacityFadeInRight;
    animation-name: opacityFadeInRight
}

@-webkit-keyframes opacityFadeInUp {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes opacityFadeInUp {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.opacityFadeInUp {
    -webkit-animation-name: opacityFadeInUp;
    animation-name: opacityFadeInUp
}

@-webkit-keyframes opacityFadeInDown {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -200px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes opacityFadeInDown {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -200px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.opacityFadeInDown {
    -webkit-animation-name: opacityFadeInDown;
    animation-name: opacityFadeInDown
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn)
    }
}

@keyframes rotateIn {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotateY(-1turn);
        transform: perspective(400px) rotateY(-1turn);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg);
        transform: perspective(400px) translateZ(150px) rotateY(-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg);
        transform: perspective(400px) translateZ(150px) rotateY(-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotateY(-1turn);
        transform: perspective(400px) rotateY(-1turn);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg);
        transform: perspective(400px) translateZ(150px) rotateY(-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg);
        transform: perspective(400px) translateZ(150px) rotateY(-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -25px, 0);
        transform: translate3d(0, -25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -25px, 0);
        transform: translate3d(0, -25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes rollOutRight {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
}

@keyframes rollOutRight {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
}

.rollOutRight {
    -webkit-animation-name: rollOutRight;
    animation-name: rollOutRight
}

@-webkit-keyframes rollOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }
}

@keyframes rollOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }
}

.rollOutLeft {
    -webkit-animation-name: rollOutLeft;
    animation-name: rollOutLeft
}

@-webkit-keyframes rollOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0) rotate(120deg);
        transform: translate3d(0, 100%, 0) rotate(120deg)
    }
}

@keyframes rollOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0) rotate(120deg);
        transform: translate3d(0, 100%, 0) rotate(120deg)
    }
}

.rollOutDown {
    -webkit-animation-name: rollOutDown;
    animation-name: rollOutDown
}

@-webkit-keyframes rollOutUp {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0) rotate(-120deg);
        transform: translate3d(0, -100%, 0) rotate(-120deg)
    }
}

@keyframes rollOutUp {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0) rotate(-120deg);
        transform: translate3d(0, -100%, 0) rotate(-120deg)
    }
}

.rollOutUp {
    -webkit-animation-name: rollOutUp;
    animation-name: rollOutUp
}

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@-webkit-keyframes lightSpeedOutRight {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutRight {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOutRight {
    -webkit-animation-name: lightSpeedOutRight;
    animation-name: lightSpeedOutRight;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutLeft {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
        transform: translate3d(-100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutLeft {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
        transform: translate3d(-100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOutLeft {
    -webkit-animation-name: lightSpeedOutLeft;
    animation-name: lightSpeedOutLeft;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutDown {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 100%, 0) skewY(30deg);
        transform: translate3d(0, 100%, 0) skewY(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutDown {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 100%, 0) skewY(30deg);
        transform: translate3d(0, 100%, 0) skewY(30deg);
        opacity: 0
    }
}

.lightSpeedOutDown {
    -webkit-animation-name: lightSpeedOutDown;
    animation-name: lightSpeedOutDown;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutUp {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, -100%, 0) skewY(30deg);
        transform: translate3d(0, -100%, 0) skewY(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutUp {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, -100%, 0) skewY(30deg);
        transform: translate3d(0, -100%, 0) skewY(30deg);
        opacity: 0
    }
}

.lightSpeedOutUp {
    -webkit-animation-name: lightSpeedOutUp;
    animation-name: lightSpeedOutUp;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.heartbeat {
    -webkit-animation-name: heartbeat;
    animation-name: heartbeat
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes jello {
    11.1% {
        -webkit-transform: none;
        transform: none
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(.39062deg) skewY(.39062deg);
        transform: skewX(.39062deg) skewY(.39062deg)
    }
    88.8% {
        -webkit-transform: skewX(-.19531deg) skewY(-.19531deg);
        transform: skewX(-.19531deg) skewY(-.19531deg)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes jello {
    11.1% {
        -webkit-transform: none;
        transform: none
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(.39062deg) skewY(.39062deg);
        transform: skewX(.39062deg) skewY(.39062deg)
    }
    88.8% {
        -webkit-transform: skewX(-.19531deg) skewY(-.19531deg);
        transform: skewX(-.19531deg) skewY(-.19531deg)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center
}

@-webkit-keyframes flash {
    0%,
    50%,
    to {
        opacity: 1
    }
    25%,
    75% {
        opacity: 0
    }
}

@keyframes flash {
    0%,
    50%,
    to {
        opacity: 1
    }
    25%,
    75% {
        opacity: 0
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes scaleUp {
    0% {
        -webkit-transform: scale(1)
    }
    to {
        -webkit-transform: scale(1.5)
    }
}

@keyframes scaleUp {
    0% {
        transform: scale(1)
    }
    to {
        transform: scale(1.5)
    }
}

@-webkit-keyframes scaleDown {
    0% {
        -webkit-transform: scale(1.5)
    }
    to {
        -webkit-transform: scale(1)
    }
}

@keyframes scaleDown {
    0% {
        transform: scale(1.5)
    }
    to {
        transform: scale(1)
    }
}

@-webkit-keyframes blur {
    0% {
        -webkit-filter: blur(0)
    }
    to {
        -webkit-filter: blur(8px)
    }
}

@keyframes blur {
    0% {
        -webkit-filter: blur(0)
    }
    to {
        -webkit-filter: blur(8px)
    }
}

@-webkit-keyframes sharp {
    0% {
        -webkit-filter: blur(8px)
    }
    to {
        -webkit-filter: blur(0)
    }
}

@keyframes sharp {
    0% {
        -webkit-filter: blur(8px)
    }
    to {
        -webkit-filter: blur(0)
    }
}

@-webkit-keyframes particles {
    0% {
        -webkit-filter: blur(2px)
    }
    to {
        -webkit-filter: blur(0)
    }
}

@keyframes particles {
    0% {
        -webkit-filter: blur(2px)
    }
    to {
        -webkit-filter: blur(0)
    }
}

.wap-scene .u-arrow-bottom {
    transform: translateY(-10vh)
}

.wap-scene .temp-app-use,
.wap-scene [ctype="298"] {
    display: none
}



.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both
}

.clearfix {
    zoom: 1
}

img {
    vertical-align: middle
}

.nr input,
.nr textarea {
    resize: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border-radius: 0;
    line-height: 120%;
    display: inline-block!important
}

img {
    -webkit-user-select: none;
    -moz-user-select: none
}


.main {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    overflow: hidden
}

.temp-app-use {
    width: 165px;
    height: 42px;
    color: #fff!important;
    text-align: center;
    position: absolute;
    z-index: 200;
    bottom: 42px;
    left: 50%;
    margin-left: -82.5px;
    line-height: 42px
}

.temp-app-use .temp-app-use-btn {
    height: 26px;
    line-height: 30px
}

.temp-app-use-tip {
    background: linear-gradient(270deg, #4facfe, #1593ff);
    border-radius: 25px
}

.loading {
    background: #48424f;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    top: 0
}

.loadbox {
    display: block;
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    margin-top: 50%
}

.loadbg {
    width: 70px;
    height: 42px;
    background-image: url(//as.eqh5.com/h5_view_2/images/logo-746df5.gif)
}

.loadbg,
.loadbg2 {
    display: block;
    position: absolute;
    z-index: 1000
}

.loadbg2 {
    left: 50%;
    transform: translate(-50%)
}

.loadbg2 img {
    width: 118px
}

.loading-logo {
    display: block;
    position: relative;
    width: 118px;
    height: 118px;
    margin: 50% auto 0
}

.logo-image {
    width: 100%
}

.loading-tip {
    display: none;
    position: absolute;
    bottom: 40px;
    font-size: 16px;
    z-index: 9999;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    text-align: center;
    color: #7986cb
}

.iframe-html {
    overflow: hidden
}

.iframe-html body {
    background: transparent
}

.iframe-html .phone_panel {
    left: 50%;
    margin-left: -160px
}

.iframe-phone {
    display: none;
    margin-right: 40px
}

.iframe-phone .nr {
    width: 320px;
    height: 486px
}

.iframe-phone__landscape--no-list {
    width: 486px;
    height: 320px
}

.iframe-phone__landscape--no-list .eqx-progress-bar,
.iframe-phone__landscape--no-list .u-arrow-bottom {
    display: none!important
}

.iframe-phone__landscape--no-list .nr {
    transform: rotate(-90deg);
    margin-top: -83px;
    margin-left: 83px
}

.iframe-phone__landscape--no-list .nr .loading {
    width: 320px
}

.iframe-phone.prelistmode_transverse {
    width: 486px;
    height: 486px
}

.iframe-phone.prelistmode_transverse .eqx-progress-bar,
.iframe-phone.prelistmode_transverse .u-arrow-bottom {
    display: none!important
}

.iframe-phone.prelistmode_transverse .nr {
    transform: rotate(-90deg);
    margin-top: -83px;
    margin-left: 83px
}

.iframe-phone.prelistmode_transverse .nr .loading {
    width: 320px
}

.iframe-phone.prelistmode_transverse .previewlist {
    width: 486px;
    height: 148px;
    position: relative;
    overflow: hidden;
    margin-top: -65px
}

.iframe-phone.prelistmode_transverse .previewlist_ul {
    display: flex
}

.iframe-phone.prelistmode_transverse .previewlist .preview_list_item {
    width: 132px;
    height: 200.5px;
    flex-shrink: 0;
    margin-left: 8px;
    position: relative;
    display: inline-block;
    margin-left: 78px;
    margin-top: -34px;
    cursor: pointer
}

.iframe-phone.prelistmode_transverse .previewlist .preview_list_item:first-child {
    margin-left: 69px
}

.iframe-phone.prelistmode_transverse .previewlist .preview_list_item section {
    transform: rotate(-90deg);
    margin-left: -35px
}

.iframe-phone.prelistmode_vertical {
    width: 486px;
    height: 486px
}

.iframe-phone.prelistmode_vertical .eqx-progress-bar,
.iframe-phone.prelistmode_vertical .u-arrow-bottom {
    display: none!important
}

.iframe-phone.prelistmode_vertical .nr {
    float: right
}

.iframe-phone.prelistmode_vertical .nr .loading {
    width: 320px
}

.iframe-phone.prelistmode_vertical .previewlist {
    width: 149px;
    height: 486px;
    float: left;
    position: relative;
    overflow: hidden
}

.iframe-phone.prelistmode_vertical .previewlist_ul {
    padding: 0;
    list-style: none
}

.iframe-phone.prelistmode_vertical .previewlist_ul .preview_list_item {
    width: 132px;
    height: 200.5px;
    margin-top: 15px;
    cursor: pointer
}

.iframe-phone.prelistmode_vertical .previewlist_ul .preview_list_item:first-child {
    margin-top: 0
}

.iframe-phone.prelistmode_vertical .previewlist .iScrollVerticalScrollbar {
    margin-right: -1px
}

.iframe_panel {
    width: 40px;
    height: 486px;
    background: #fff;
    position: fixed;
    right: 0;
    top: 0;
    border-right: 1px solid #ccd5db
}

.iframe_panel .preview {
    position: relative;
    height: 70px;
    margin-top: 173px
}

.iframe_panel .next {
    height: 73px;
    margin-bottom: 173px
}

.iframe_panel .scroll_btn {
    width: 40px;
    height: 70px;
    display: block;
    text-align: center;
    line-height: 70px;
    color: #7b8893
}

.iframe_panel .scroll_btn:hover {
    background-color: #f0f3f4;
    color: #7b8893
}

.iframe_panel__landscape--no-list {
    height: 320px
}

.iframe_panel__landscape--no-list .preview {
    margin-top: 88px
}

.iframe_panel__landscape--no-list .next {
    margin-bottom: 88px
}

.iframe_panel_prelistmode {
    height: 486px;
    background: #fff;
    position: fixed;
    right: 0;
    top: 0
}

.iframe_panel_prelistmode .preview_prelistmode {
    position: relative;
    height: 70px;
    margin-top: 135px
}

.iframe_panel_prelistmode .next_prelistmode {
    height: 73px
}

.iframe_panel_prelistmode .page-tip-prelistmode {
    height: 68px;
    text-align: center;
    position: relative
}

.iframe_panel_prelistmode .page-tip-prelistmode .prelistmode_pagenum {
    position: absolute;
    color: #333;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.iframe_panel_prelistmode .scroll_btn_prelistmode {
    display: block;
    text-align: center;
    color: #7b8893;
    margin: 0 auto;
    background-color: #f6f6f6;
    width: 30px;
    height: 72px
}

.iframe_panel_prelistmode .scroll_btn_prelistmode .text_span {
    cursor: pointer;
    margin: 12px auto;
    display: inline-block;
    font-size: 14px;
    color: #666;
    width: 14px
}

.iframe_panel_prelistmode.transverse_mode {
    height: 485px
}

.iframe_panel2 {
    position: fixed;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: #fff
}

.iframe_panel2 ul {
    position: relative;
    top: 50%;
    height: 200px;
    margin-top: -100px
}

.iframe_panel2 ul li {
    margin: 10px 0 10px 6px;
    border: 1px solid #59c7f9;
    border-radius: 3px;
    height: 80px;
    box-sizing: border-box;
    font-size: 14px;
    color: #59c7f9;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    text-align: center;
    line-height: 32px;
    display: block;
    cursor: pointer
}

.iframe_panel2 ul li:hover {
    color: #fff;
    background: #59c7f9
}

.zoomIn-change {
    animation: zoomIn .5s ease 0s 1 both;
    -webkit-animation: zoomIn .5s ease 0s 1 both;
    transform-origin: 100% 0
}

#code {
    margin-left: 36px;
    width: 248px;
    height: 600px;
    float: right;
    display: flex;
    flex-flow: column;
    justify-content: center
}

#code .code_panel {
    padding: 24px 20px 20px;
    width: 208px;
    height: 292px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, .1)
}

#code .code_panel .code_panel_top {
    font-size: 14px;
    height: 20px;
    color: #666;
    line-height: 20px
}

#code .code_panel .code_panel_top .app #downApp {
    float: right;
    padding: 0 6px;
    border: 1px solid #e6ebed;
    border-radius: 4px;
    cursor: pointer;
    height: 18px;
    transition: all .25s ease
}

#code .code_panel .code_panel_top .app #downApp:hover {
    color: #fff;
    background-color: #00beff;
    border: 1px solid #00beff
}

#code .code_panel .code_panel_top .app #downAppView {
    background-color: #fff;
    padding: 10px;
    width: 228px;
    text-align: center;
    position: absolute;
    color: #666;
    right: 0;
    margin-top: 25px;
    display: none
}

#code .code_panel .code_panel_top .app #downAppView h3 {
    text-align: left;
    padding-bottom: 20px;
    font-size: 14px
}

#code .code_panel .code_panel_top .app #downAppView h3 a {
    float: right
}

#code .code_panel #codeImg {
    margin: 12px 0;
    border: 1px solid #e6ebed;
    padding: 16px;
    height: 176px;
    width: 176px
}

#code .code_panel #codeImg canvas {
    width: 176px;
    height: 176px
}

#code .code_panel #view_share {
    text-align: center;
    font-size: 0
}

#code .code_panel #view_share .share-icon {
    display: inline-block;
    height: 38px;
    width: 62px;
    border-radius: 3px;
    border: 1px solid #e6ebed;
    text-align: center;
    line-height: 38px;
    color: #959fb0;
    font-size: 25px;
    transition: all .25s ease
}

#code .code_panel #view_share .share-icon.eqf-QQ:hover {
    color: #fff;
    background-color: #198ae7;
    border: 1px solid #198ae7
}

#code .code_panel #view_share .share-icon.eqf-QQzone {
    margin: 0 8px
}

#code .code_panel #view_share .share-icon.eqf-QQzone:hover {
    color: #fff;
    background-color: #ffb243;
    border: 1px solid #ffb243
}

#code .code_panel #view_share .share-icon.eqf-weibo:hover {
    color: #fff;
    background-color: #ed2828;
    border: 1px solid #ed2828
}

#code .btn_panel {
    margin-top: 12px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, .1);
    display: block
}

#code .btn_panel #view_reg {
    font-size: 14px;
    border-radius: 3px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #1593ff;
    color: #fff;
    transition: all .25s ease
}

#code .btn_panel #view_reg:hover {
    background-color: #198ae7
}

#code .btn_panel #view_reg span {
    padding-left: 5px
}

#code .btn_panel .view_reg {
    height: 46px!important;
    border: 1px solid #1593ff!important;
    color: #1593ff!important;
    background-color: #fff!important;
    transition: all .25s ease
}

#code .btn_panel .view_reg a {
    color: #1593ff!important
}

#code .btn_panel .view_reg:hover {
    background-color: #198ae7!important;
    color: #fff!important
}

#code .btn_panel .view_reg:hover a {
    color: #fff!important
}

#code .btn_panel #advertisement_img {
    margin-top: 16px
}

#code .btn_panel #advertisement_img img {
    width: 100%;
    height: 88px
}

#code .btn_panel #sample_btn {
    margin-top: 16px;
    font-size: 14px;
    color: #fff;
    background-color: #1593ff;
    border-radius: 3px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transition: all .25s ease
}

#code .btn_panel #sample_btn:hover {
    background-color: #198ae7
}

#code #down {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 450px;
    height: 600px
}

#support {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 30px;
    background-color: #fff;
    border-radius: 10px;
    padding: 8px;
    opacity: .8;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, .1)
}

#support a {
    display: block
}

#support .new_logo_text {
    height: 22px;
    width: 124px;
    background: url(//as.eqh5.com/h5_view_2/images/new_logo_text-df0ca9.png);
    background-size: 100% 100%;
    display: inline-block
}

#support a img {
    border: 0
}

body.pc {
    overflow: hidden;
    background-size: cover;
    background-position: 50% 50%;
    -webkit-user-select: none;
    user-select: none
}

#view_panel {
    margin: -300px 0 0 -326px;
    min-width: 652px
}

#view_panel,
#view_panel__feishu {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 600px
}

#view_panel__feishu {
    transform: translate(-50%, -50%)
}

#recomment_container {
    position: absolute;
    transform: translateY(-50%);
    top: 50%
}

#recomment_container #recommend_btn {
    height: 66px;
    padding: 15px 10px;
    width: 20px;
    color: #fff;
    position: absolute;
    margin: auto;
    display: inline-block;
    top: 0;
    bottom: 0;
    font-size: 14px;
    background-color: #ff296a;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    transition: all .25s ease
}

#recomment_container #recommend_btn:hover {
    background-color: #fff;
    color: #111;
    cursor: pointer
}

#recomment_container #recommend_content {
    float: left;
    background-color: #fff;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    display: block;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, .1)
}

#recomment_container #recommend_content ul {
    margin: 24px 17px 24px 16px
}

#recomment_container #recommend_content ul li {
    margin-top: 12px
}

#recomment_container #recommend_content ul li a {
    cursor: pointer;
    color: #666
}

#recomment_container #recommend_content ul li a:hover {
    color: #00beff
}

#recomment_container #recommend_content ul li a img {
    width: 80px;
    height: 80px;
    float: left
}

#recomment_container #recommend_content ul li a span {
    display: inline-block;
    width: 132px;
    height: 80px;
    margin-left: 12px;
    border-bottom: 1px solid #e6ebed;
    font-size: 14px;
    white-space: normal;
    word-break: break-all
}

#lampHide-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .25s ease
}

#lampHide-btn:hover {
    background-color: #198ae7;
    color: #fff
}

.phone_panel {
    float: right
}

.phoneBox {
    padding-top: 45px;
    width: 336px;
    height: 609px;
    float: Left;
    background-image: url(//as.eqh5.com/h5_view_2/images/H5-phone-new-logo-b013b2.png);
    background-repeat: no-repeat;
    border-radius: 38px;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, .1);
    background-size: contain
}

.phoneBox .nr {
    position: relative;
    cursor: pointer;
    height: 486px;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-user-select: none;
    border-left: 8px solid #fff;
    border-right: 8px solid #fff;
    top: 42px;
    border-radius: 0 0 20px 20px
}

.phone_menubar {
    height: 20px
}

.scene_title_baner {
    position: absolute;
    top: 60px;
    color: #fff;
    width: 100%
}

.scene_title_baner .scene_title {
    min-width: 20px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 18px;
    line-height: 18px;
    font-size: 13px;
    width: 188px;
    margin-left: 74px
}

.scene_title_phone {
    height: 20px;
    border-left: 4px solid #f6f6f6;
    border-right: 4px solid #f6f6f6
}

.noAd_qrcode {
    top: 84px;
    left: 328px;
    background: #fefcfd;
    box-shadow: 0 1px 2px 0 rgba(195, 219, 251, .16)
}

.noAd_qrcode,
.noAd_qrcode .qrcode_box {
    width: 40px;
    height: 40px;
    position: relative
}

.noAd_qrcode .qrcode_box:hover {
    color: #1593ff
}

.noAd_qrcode .qrcode_box .eqf-QRcode {
    font-size: 20px;
    color: #666;
    position: absolute;
    top: 10px;
    left: 10px
}

.noAd_qrcode .qrcode_box:hover .share_box {
    display: block;
    left: 54px
}

.noAd_qrcode .qrcode_box:hover .share_box:before {
    content: "";
    border: 6px solid #fff;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    top: 14px;
    left: -12px
}

.noAd_qrcode .qrcode_box:hover .qrcode-svg {
    fill: #1593ff
}

.noAd_qrcode .qrcode_box .qrcode-svg {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px
}

.noAd_qrcode .share_box {
    display: none;
    position: absolute;
    width: 204px;
    height: 280px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .08);
    border-radius: 6px
}

.noAd_qrcode .share_box #codeImgNoAd {
    margin-left: 24px
}

.noAd_qrcode .share_box p {
    margin: 24px 0 16px 24px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .08)
}

.noAd_qrcode .share_box .share_row {
    margin: 16px 24px;
    display: flex;
    justify-content: space-around
}

.noAd_qrcode .share_box .share_row_icon {
    width: 24px;
    height: 24px
}

.ctrl_panel {
    float: left;
    display: flex;
    flex-flow: column;
    justify-content: center;
    height: 600px
}

.ctrl_panel a {
    transition: all .25s ease
}

.ctrl_panel__landscape {
    flex-flow: row;
    height: 60px;
    width: 100%;
    margin-top: 5px
}

.pre_btn {
    margin-bottom: 20px
}

.next_btn,
.pre_btn {
    display: block
}

.btn_scroll {
    cursor: pointer;
    width: 24px;
    height: 76px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    left: 50%;
    background: #fff;
    top: 47px;
    font-size: 14px;
    color: #3e4858;
    padding: 20px 8px 0;
    text-align: center
}

.btn_scroll__landscape {
    width: 76px;
    height: 24px;
    padding: 8px;
    border-radius: 3px;
    line-height: 24px
}

.btn_scroll__landscape.pre_btn {
    margin-right: 4px
}

.ctrl_panel a:hover {
    color: #f6f9fa;
    background-color: #08a1ef
}

.onlyPhone {
    margin: -300px 0 0 -326px!important
}

.onlyPhone,
.view-toast-box {
    display: flex;
    justify-content: center
}

.view-toast-box {
    position: fixed;
    z-index: 2000;
    top: 80px;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: row;
    align-items: center;
    height: 52px;
    padding: 0 16px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .15);
    background-color: #fff;
    font-size: 18px;
    border-radius: 3px;
    color: #333;
    overflow: hidden
}

.pop-up-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 88888;
    text-align: center
}

.pop-up-box .pop-up-form {
    width: 280px;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    margin-top: -87px;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden
}

.pop-up-box .pop-up-form .pop-up-content {
    width: 240px;
    padding: 20px;
    display: table;
    box-sizing: content-box
}

.pop-up-box .pop-up-form .pop-up-content .pop-up-msg {
    display: table-cell
}

.pop-up-box .pop-up-form .pop-up-btn {
    width: 280px;
    background-color: #56c6ff;
    line-height: 40px;
    height: 40px
}

.pop-up-box .pop-up-form .pop-up-btn .pop-up-btn-close {
    color: #fff
}

.pop-up-box .pop-share-form {
    width: 277px;
    font-size: 16px;
    position: absolute;
    top: 20%;
    left: 50%;
    margin-left: -135px;
    margin-top: -87px;
    overflow: hidden
}

.pop-up-box .pop-share-form .pop-share-content {
    width: 277px;
    height: 420px;
    margin-bottom: 10px
}

.pop-up-box .pop-share-form .pop-share-btn {
    color: #fff;
    font-size: 30px
}

.pop-up-box .pop-yaoyiyao-form {
    width: 270px;
    height: 362px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .08);
    border-radius: 8px;
    font-size: 16px;
    position: absolute;
    top: 28%;
    left: 54%;
    margin-left: -150px;
    margin-top: -87px;
    overflow: hidden
}

.pop-up-box .pop-yaoyiyao-form .pop-yaoyiyao-content {
    width: 270px;
    height: 362px;
    background-color: #fff;
    margin-bottom: 10px
}

.pop-up-box .pop-yaoyiyao-form .pop-yaoyiyao-content img {
    margin-top: 20px
}

.pop-up-box .pop-yaoyiyao-form .pop-yaoyiyao-content .pop-info {
    margin: 24px 16px;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    height: 60px
}

.pop-up-box .pop-yaoyiyao-form .pop-yaoyiyao-btn {
    color: #1593ff;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    border-top: 1px solid #e6ebed;
    border-radius: 0 0 8px 8px
}

.comp-icon {
    position: absolute;
    top: 0;
    right: 0;
    background: #1593ff;
    width: 20px;
    height: 20px;
    padding: 1px 0 0 2px;
    font-size: 18px;
    color: #fff
}

.item-comp-hover.evaluate-hover,
.item-comp-hover:hover {
    outline: 1px dashed #a3afb7
}

.animTextCharPlace {
    display: inline-block
}

.animTextCharPlace.animHidden {
    opacity: 0
}

.animTextCharPlace.animTextChar {
    opacity: 1;
    animation-duration: 1s;
    animation-fill-mode: both
}

.animTextCharPlace.hasNotation {
    display: inline-block
}

.animTextCharPlace.safari {
    vertical-align: middle
}

.animTextCharPlace.underline {
    text-decoration: underline
}

.animTextCharPlace.line-through {
    text-decoration: line-through
}

.animTextCharPlace.line-through.underline {
    text-decoration: line-through underline
}

.user-info-wrapper {
    position: absolute;
    box-sizing: border-box;
    right: 14px;
    bottom: 174px;
    width: 36px;
    height: 36px;
    z-index: 200;
    text-align: center;
    background-color: #efefef;
    border-radius: 50%
}

.user-info-wrapper .user-info-logo {
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box
}

.user-info-wrapper .user-info-follow {
    position: relative;
    font-size: 16px;
    margin-top: -6px;
    display: block;
    color: #1593ff
}

.user-info-wrapper .user-info-follow-bg {
    position: absolute;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    background-color: #fff;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%)
}

.gift-info-wrapper {
    position: absolute;
    box-sizing: border-box;
    right: 0;
    bottom: 43px;
    width: 84px;
    z-index: 200;
    text-align: center
}

.gift-info-wrapper .gift-info-logo {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box
}

.gift-info-wrapper .gift-info-follow {
    position: relative;
    display: inline-block;
    width: 84px;
    height: 27px;
    line-height: 22px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background-image: url(//as.eqh5.com/h5_view_2/images/gift-des-eaaa9e.png);
    background-size: 100%;
    font-weight: 600
}

.gift-info-anim-wobble {
    -webkit-animation: wobble 4s ease .5s 1 normal both running;
    animation: wobble 4s ease .5s 1 normal both running
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    10% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }
    20% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }
    30% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }
    40% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }
    50% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    75% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    85% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    95% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    to {
        transform: scale(1)
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    10% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }
    20% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }
    30% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }
    40% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }
    50% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    75% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    85% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    95% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    to {
        transform: scale(1)
    }
}

.verifyCode {
    display: none;
    background-color: #48424f;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9998;
    top: 0
}

.verifyCode .container {
    position: absolute;
    top: 50%;
    width: 265px;
    left: 50%;
    margin: -215px auto 0 -133px;
    text-align: center
}

.verifyCode .container .scene-cover {
    display: inline-block;
    width: 100%;
    padding-bottom: 15px
}

.verifyCode .container .scene-cover .cover-img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    -webkit-animation: flipInY 2s ease 0s 1 both;
    animation: flipInY 2s ease 0s 1 both
}

.verifyCode .container .scene-name {
    font-size: 18px;
    height: 20px;
    margin-bottom: 15px;
    color: #b2aeba;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.verifyCode .container .confirm-password {
    position: relative
}

.verifyCode .container .verify-label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: #b2aeba
}

.verifyCode .container .verify-tips {
    margin-bottom: 10px
}

.verifyCode .container .verify-tips ul>li {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-right: 10px
}

.verifyCode .container .verify-tips ul>li.active {
    background-color: #b2aeba
}

.verifyCode .container .verify-tips ul>li:last-child {
    margin-right: 0
}

@-webkit-keyframes shake {
    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shake {
    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.verifyCode .container .password-numbers {
    text-align: center
}

.verifyCode .container .password-numbers span {
    display: inline-block;
    color: #fff;
    width: 46px;
    height: 46px;
    line-height: 46px;
    border-radius: 25px;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    font-size: 32px;
    margin-right: 29px;
    margin-bottom: 10px
}

.verifyCode .container .password-numbers span:nth-child(3n) {
    margin-right: 0
}

.verifyCode .container .password-numbers span:last-child {
    margin-left: 29px
}

.verifyCode .container .password-numbers span.active {
    background-color: #b2aeba
}

.verifyCode .container .password-operation {
    position: relative
}

.verifyCode .container .password-operation .btn-cancel,
.verifyCode .container .password-operation .btn-clear {
    position: absolute;
    top: -25px;
    display: inline-block;
    width: 50px;
    height: 20px;
    line-height: 20px;
    color: #b2aeba;
    font-size: 14px
}

.verifyCode .container .password-operation .btn-clear {
    left: 29px
}

.verifyCode .container .password-operation .btn-cancel {
    right: 29px
}

.bottom-logo {
    background: -moz-linear-gradient(top, #00a2ec, #87d94f);
    position: absolute;
    left: 9px;
    top: 11px
}

.logo-shadow {
    background: rgba(0, 0, 0, .4);
    width: 155px;
    height: 155px;
    top: -2px;
    left: 7px;
    position: absolute
}

.logo-shadow1 {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, .4), rgba(70, 70, 70, 0))
}

.edit_wrapper {
    height: 100%;
    width: 100%;
    background-position: 50% 50%;
    background-size: cover
}

.edit_wrapper section.layer {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}

.edit_area {
    position: absolute;
    top: 0;
    text-align: left;
    width: 320px;
    height: 486px;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.edit_area .element {
    min-width: 1px;
    min-height: 1px;
    color: inherit
}

.edit_area .item-group,
.edit_area .svg-element {
    position: absolute
}

.edit_area .item-group .group-box,
.edit_area .item-group .group-box ul {
    width: 100%;
    height: 100%
}

.edit_area .item-group.evaluate-hover {
    outline: 1px dashed #a3afb7
}

.edit_area .item-group li,
.edit_area>li {
    color: #676767;
    line-height: 1;
    background: none;
    position: absolute;
    list-style: none!important;
    margin: 0!important;
    padding: 0;
    transition: padding .5s;
    min-height: 1px;
    min-width: 1px;
    width: 100%;
    -webkit-user-select: none
}

.edit_area .item-group li *,
.edit_area>li * {
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.edit_area .item-group li .element-box,
.edit_area>li .element-box {
    overflow: hidden
}

.edit_area .comp-replace-icon:after {
    content: "\6279";
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    width: 18px;
    height: 18px;
    font-size: 12px;
    background-color: #0094fa;
    line-height: 18px;
    text-align: center;
    font-family: Microsoft Yahei
}

.m-img {
    width: 100%;
    height: 100%;
    position: relative
}

.z-current {
    opacity: 1
}

.main-page {
    border: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: top;
    background-size: cover;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    z-index: 0;
    display: none;
    -webkit-transform-origin: center center;
    background: #f3f3f3
}

.main-page.z-current {
    z-index: 1;
    display: inline-block
}

.main-page.z-active {
    z-index: 2;
    display: block
}

.main-page.z-active.special-zIndex {
    z-index: 0;
    display: block
}

.m-page {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #fff
}

.m-page.show {
    z-index: 10;
    display: block
}

.m-page.hide {
    z-index: 5;
    display: none
}

.m-page.active {
    z-index: 15;
    display: block
}

.input-mask-page {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: top;
    background-size: cover;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    z-index: 8888;
    display: inline-block;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    background-color: rgba(0, 0, 0, .8);
    overflow-y: scroll
}

.input-mask-page__btn {
    width: 100px;
    text-align: center;
    position: absolute;
    top: 300px;
    z-index: 1000;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    margin-bottom: 15px;
    left: 50%;
    transform: translate(-50%);
    background-color: #59c7f9;
    color: #fff
}

.fade-out {
    opacity: 0;
    animation-name: fadeOutMockDialog;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both
}

@keyframes fadeOutMockDialog {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.mock-dialog-space {
    width: 320px;
    min-height: 544px;
    background: #f5f5ff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%)
}

.mock-dialog-space .head {
    height: 44px;
    line-height: 44px;
    display: flex;
    justify-content: space-between;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    padding: 0 10px
}

.mock-dialog-space .head .back,
.mock-dialog-space .head .more {
    font-size: 24px
}

.mock-dialog-space .vip .vip-tag {
    position: absolute;
    top: -7px;
    right: -32px;
    border-bottom: 50px solid #000;
    transform: rotate(45deg);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    z-index: 1
}

.mock-dialog-space .vip .vip-tag:before {
    content: "\4F1A\5458\98CE\683C";
    color: #e1ae84;
    position: absolute;
    width: 54px;
    text-align: center;
    font-size: 12px;
    left: -27px;
    bottom: -42px
}

.mock-dialog-space .vip .vip-tips {
    position: absolute;
    top: 0;
    right: -182px;
    background: #fff;
    width: 170px;
    height: 112px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .08);
    border-radius: 3px;
    padding: 16px;
    text-align: center
}

.mock-dialog-space .vip .vip-tips .arrow {
    display: block;
    width: 6px;
    height: 12px;
    border: 6px solid #fff;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 6px solid transparent;
    position: absolute;
    left: -12px;
    top: 20px
}

.mock-dialog-space .vip .vip-tips .text {
    font-size: 14px;
    color: #333;
    padding-top: 8px
}

.mock-dialog-space .vip .vip-tips button {
    width: 130px;
    height: 32px;
    background: linear-gradient(136deg, #ffe0b8, #e2aa62);
    border-radius: 16px;
    color: #673416;
    margin-top: 20px;
    border: none
}

.mock-dialog-space .add {
    display: flex;
    justify-content: space-between;
    margin: 2px 24px
}

.mock-dialog-space .add>div {
    width: 48px;
    font-size: 12px;
    border-radius: 3px;
    font-weight: 400;
    height: 24px;
    line-height: 28px;
    color: #666;
    padding: 6px;
    border: 1px solid #ccd5db;
    position: relative;
    cursor: pointer
}

.mock-dialog-space .add>div:last-child {
    width: 72px
}

.mock-dialog-space .add>div:hover {
    background: #1593ff;
    color: #fff;
    border: 1px solid #1593ff
}

.mock-dialog-space .add>div.grey {
    color: #ccd5db;
    cursor: not-allowed
}

.mock-dialog-space .add>div.grey:hover {
    background: #add9ff;
    color: #fff;
    border: 1px solid #add9ff
}

.mock-dialog-space .add>div em {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 6px
}

.mock-dialog-space .add>div span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 6px
}

.mock-dialog-space .mock-content .message-item {
    min-height: 36px;
    position: relative;
    border-bottom: 1px solid transparent
}

.mock-dialog-space .mock-content .message-item .other-sender {
    padding-bottom: 16px;
    position: relative;
    overflow: auto
}

.mock-dialog-space .mock-content .message-item .other-sender .time {
    text-align: center;
    color: #999;
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 0
}

.mock-dialog-space .mock-content .message-item .other-sender .nickname {
    margin-left: 57px;
    font-size: 12px;
    line-height: 12px;
    color: #999;
    position: absolute
}

.mock-dialog-space .mock-content .message-item .other-sender .nickname.head-hide {
    margin-left: 25px
}

.mock-dialog-space .mock-content .message-item .other-sender .text-message {
    background: #fff;
    font-size: 14px;
    color: #222;
    border-radius: 3px;
    max-width: 215px;
    float: left;
    margin-bottom: 0;
    margin-top: 8px;
    margin-left: 57px;
    padding: 8px 12px;
    position: relative
}

.mock-dialog-space .mock-content .message-item .other-sender .text-message.head-hide {
    margin-left: 25px
}

.mock-dialog-space .mock-content .message-item .other-sender .text-message.nickname-show {
    margin-top: 14px
}

.mock-dialog-space .mock-content .message-item .other-sender .text-message:before {
    content: "";
    width: 10px;
    height: 10px;
    background: #fff;
    float: left;
    transform: rotate(45deg);
    margin-top: 4px;
    margin-left: -15px;
    top: 12px
}

.mock-dialog-space .mock-content .message-item .other-sender .text-message .read-type {
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    left: unset;
    bottom: 4px;
    right: -20px;
    font-size: 15px;
    color: #bfbfbf
}

.mock-dialog-space .mock-content .message-item .other-sender .text-message .not-read {
    border: 1.5px solid #1593ff;
    border-radius: 50%
}

.mock-dialog-space .mock-content .message-item .other-sender .mock-head {
    width: 36px;
    height: 36px;
    display: inline-block;
    position: absolute;
    left: 12px
}

.mock-dialog-space .mock-content .message-item .other-sender .mock-head img {
    width: 36px;
    height: 36px;
    margin-top: 6px
}

.mock-dialog-space .mock-content .message-item .other-sender.mine .nickname {
    margin-right: 57px;
    right: 0
}

.mock-dialog-space .mock-content .message-item .other-sender.mine .nickname.head-hide {
    margin-right: 20px
}

.mock-dialog-space .mock-content .message-item .other-sender.mine .text-message {
    margin-right: 57px;
    float: right;
    background: #95ec69
}

.mock-dialog-space .mock-content .message-item .other-sender.mine .text-message.head-hide {
    margin-right: 20px
}

.mock-dialog-space .mock-content .message-item .other-sender.mine .text-message:before {
    background: #95ec69;
    float: right;
    margin-right: -15px
}

.mock-dialog-space .mock-content .message-item .other-sender.mine .text-message .read-type {
    left: -20px;
    bottom: 4px
}

.mock-dialog-space .mock-content .message-item .other-sender.mine .mock-head {
    left: unset;
    right: 12px
}

.mock-dialog-space .mock-content .message-item:hover .mask {
    display: block
}

.mock-dialog-space .mock-content .message-item .mask {
    background: rgba(0, 0, 0, .16);
    cursor: move;
    width: 100%;
    height: calc(100% + 16px);
    position: absolute;
    top: -16px;
    left: 0;
    display: none
}

.mock-dialog-space .mock-content .message-item .mask .drag {
    display: inline-block;
    width: 120px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, .6);
    border-radius: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.mock-dialog-space .mock-content .message-item .mask .mask-tool {
    position: absolute;
    top: -25px;
    right: 0
}

.mock-dialog-space .mock-content .message-item .mask .mask-tool span {
    cursor: pointer;
    background: rgba(0, 0, 0, .9);
    color: #fff;
    display: inline-block;
    width: 40px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 3px;
    text-align: center
}

.mock-dialog-space .mock-content .message-item .mask .mask-tool span:hover {
    background: rgba(0, 0, 0, .7)
}

.mock-dialog-space .mock-content .message-item .mask .add {
    position: absolute;
    bottom: -29px;
    right: 0;
    z-index: 10;
    margin-top: 5px;
    width: 272px
}

.mock-dialog-space .mock-content .message-item .mask .add>div {
    background: #1593ff;
    color: #fff;
    border: 1px solid #1593ff
}

.mock-dialog-space .mock-content .message-item .mask .add>div:hover {
    background: #198ae7;
    color: #fff;
    border: 1px solid #198ae7
}

.mock-dialog-space .mock-content .message-item .mask .add>div.grey,
.mock-dialog-space .mock-content .message-item .mask .add>div.grey:hover {
    background: #add9ff;
    color: #fff;
    border: 1px solid #add9ff
}

.mock-dialog-space .footer {
    width: 320px;
    height: 49px;
    line-height: 49px;
    padding: 0 13px;
    display: flex;
    justify-content: space-between;
    border-top: .5px solid rgba(0, 0, 0, .1);
    position: absolute;
    bottom: 0;
    font-size: 22px;
    color: #000;
    box-sizing: border-box
}

.mock-dialog-space .footer .input-area {
    width: 194px;
    height: 36px;
    background: #fff;
    border-radius: 4px;
    margin-top: 6px
}

.mock-dialog-space .footer em {
    line-height: 48px
}

.main-page .mock-dialog-space {
    left: 0
}

.mock-dialog-space.style-4 {
    background: #dde9ff
}

.mock-dialog-space.style-4 .head {
    color: #000
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender .time span {
    color: #fff;
    background: #c4d6f7;
    border-radius: 4px;
    padding: 2px 10px;
    line-height: 22px
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender .mock-head img {
    border-radius: 4px;
    border: 1px solid #000;
    box-shadow: -2px 2px 0 #000
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender .text-message {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #000;
    box-shadow: -1px 2px 1px #000;
    border: 1px solid #000!important
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender .text-message:before {
    background: #fff;
    box-shadow: -1px 3px 1px #000
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender .text-message:after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    height: calc(100% - 8px);
    width: calc(100% - 8px);
    border: 1px dashed #000
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .mock-head img {
    box-shadow: 2px 2px 0 #000
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .text-message {
    background: #f7e392;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #000;
    box-shadow: 3px 3px 1px #000;
    border: 1px solid #000!important
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .text-message:before {
    background: #f7e392;
    box-shadow: 4px -2px 1px #000
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .text-message .read-type {
    left: -25px;
    color: #bfbfbf
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .text-message .not-read {
    border: 1.5px solid #222
}

.mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .text-message:after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    height: calc(100% - 8px);
    width: calc(100% - 8px);
    border: 1px dashed #000
}

.mock-dialog-space.style-4 .add>div,
.mock-dialog-space.style-4 .footer {
    color: #000
}

.mock-dialog-space.style-7 {
    background: #af001a
}

.mock-dialog-space.style-7 .head {
    color: #fff
}

.mock-dialog-space.style-7 .mock-content .message-item .other-sender .time span {
    color: #fff;
    background: none
}

.mock-dialog-space.style-7 .mock-content .message-item .other-sender .mock-head img {
    border-radius: 50%;
    border: none;
    box-shadow: none
}

.mock-dialog-space.style-7 .mock-content .message-item .other-sender .text-message {
    background: #fff;
    border: none;
    border-radius: 18px;
    color: #a70008
}

.mock-dialog-space.style-7 .mock-content .message-item .other-sender.mine .text-message,
.mock-dialog-space.style-7 .mock-content .message-item .other-sender.mine .text-message:before {
    background: #f69f9f
}

.mock-dialog-space.style-7 .mock-content .message-item .other-sender.mine .text-message .read-type {
    left: -25px
}

.mock-dialog-space.style-7 .mock-content .message-item .other-sender.mine .text-message .not-read {
    border: 1.5px solid #fff
}

.mock-dialog-space.style-7 .mock-content .message-item .other-sender.mine .text-message:after {
    content: "";
    background: url(//as.eqh5.com/h5_view_2/images/hunli-1-082e90.png);
    position: absolute;
    left: -10px;
    top: -10px;
    width: 42px;
    height: 49px;
    z-index: 10;
    background-size: contain
}

.mock-dialog-space.style-7 .add>div {
    color: #fff
}

.mock-dialog-space.style-7 .footer {
    color: #a70008;
    background: linear-gradient(180deg, #fdbdbd, #f69f9f)
}

.voice-assistant-space {
    width: 320px;
    box-sizing: border-box;
    min-height: 544px;
    color: #fff;
    background-color: #333;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);
    position: absolute;
    left: 0;
    top: 0
}

.voice-assistant-space .voice-space {
    width: 100%
}

.voice-assistant-space .voice-space .voice-space-question {
    padding: 24px 16px 0 64px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
    font-size: 16px;
    word-break: break-all;
    font-weight: 500;
    color: #fff;
    line-height: 22px
}

.voice-assistant-space .voice-space .voice-space-answer {
    padding: 24px 64px 0 16px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    word-break: break-all;
    font-weight: 500;
    color: #fff;
    line-height: 22px;
    margin-bottom: 10px
}

.voice-assistant-space .margin-Style {
    margin-top: 36px
}

.finger_background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background-size: cover!important
}

.finger_background__landscape_bg {
    position: absolute;
    transform: rotate(90deg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%
}

.finger_background .finger_div {
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    z-index: 1000;
    text-align: center
}

.finger_background .finger_div,
.finger_background .finger_zw {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

.finger_background .finger_zw {
    width: 140px;
    margin-left: -70px;
    margin-top: -70px
}

.finger_background .finger_line {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    display: none;
    width: 180px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -90px;
    margin-top: 70px
}

.finger_background .finger_info {
    color: #fff;
    position: absolute;
    top: 130px;
    left: 0;
    width: 320px;
    text-align: center;
    font-size: 14px
}

.finger_background .finger_info__landscape {
    transform: rotate(90deg) translateZ(0);
    top: 238px!important;
    left: 92px!important
}

.pageEffect-scratch .scratch-cas {
    z-index: 668!important;
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -moz-transition: opacity .5s;
    position: absolute;
    top: 0;
    left: 0
}

.pageEffect-scratch .tip {
    z-index: 10000;
    font-size: 24px;
    position: absolute;
    width: 180px;
    top: 320px;
    text-align: center;
    background-color: #000;
    opacity: .8;
    color: #fff;
    line-height: 50px;
    border-radius: 10px;
    filter: alpha(opacity=80);
    left: 50%;
    margin-left: -90px;
    word-wrap: break-word
}

.pageEffect-scratch .tip__landscape {
    transform: rotate(90deg) translateZ(0);
    -webkit-transform: rotate(90deg) translateZ(0);
    top: 180px;
    left: 100px
}

@keyframes gradientFadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0) scaleX(2)
    }
    to {
        opacity: .1;
        transform: translateX(190%) scaleX(2)
    }
}

@-webkit-keyframes gradientFadeOutLeft {
    0% {
        -webkit-transform: translateX(0) scaleX(2)
    }
    to {
        opacity: .1;
        -webkit-transform: translateX(190%) scaleX(2)
    }
}

@keyframes gradientFadeOutRight {
    0% {
        transform: translateX(0) scaleX(2)
    }
    to {
        opacity: .1;
        transform: translateX(-190%) scaleX(2)
    }
}

@-webkit-keyframes gradientFadeOutRight {
    0% {
        -webkit-transform: translateX(0) scaleX(2)
    }
    to {
        opacity: .1;
        -webkit-transform: translateX(-190%) scaleX(2)
    }
}

@keyframes gradientFadeOutBottom {
    0% {
        transform: translateY(0) scaleY(2)
    }
    to {
        opacity: .1;
        transform: translateY(-190%) scaleY(2)
    }
}

@-webkit-keyframes gradientFadeOutBottom {
    0% {
        -webkit-transform: translateY(0) scaleY(2)
    }
    to {
        opacity: .1;
        -webkit-transform: translateY(-190%) scaleY(2)
    }
}

@keyframes gradientFadeOutTop {
    0% {
        transform: translateY(0) scaleY(2)
    }
    to {
        opacity: .1;
        transform: translateY(190%) scaleY(2)
    }
}

@-webkit-keyframes gradientFadeOutTop {
    0% {
        -webkit-transform: translateY(0) scaleY(2)
    }
    to {
        opacity: .1;
        -webkit-transform: translateY(190%) scaleY(2)
    }
}

@keyframes gradientScale {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(.6)
    }
    to {
        transform: scale(1)
    }
}

@-webkit-keyframes gradientScale {
    0% {
        -webkit-transform: scale(1)
    }
    50% {
        -webkit-transform: scale(.6)
    }
    to {
        -webkit-transform: scale(1)
    }
}

.gradient-tip {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: -30px;
    z-index: 5;
    color: #fff;
    text-align: center;
    cursor: pointer
}

.gradient-tip p {
    padding-top: 15px;
    font-size: 16px
}

.gradient-tip img {
    animation: gradientScale 2s linear infinite;
    -webkit-animation: gradientScale 2s linear infinite
}

.gradient-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 4
}

.glassEffect-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 4
}

.glassEffect-cover .glassCanvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0
}

.glassEffect-cover .glass-tip {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: -30px;
    z-index: 5;
    color: #fff;
    text-align: center;
    cursor: pointer
}

.glassEffect-cover .glass-tip__landscape {
    transform: rotate(90deg) translateZ(0);
    top: 120px!important;
    left: -100px!important;
    width: 300px;
    height: 300px
}

.glassEffect-cover .glass-tip p {
    padding-top: 15px;
    font-size: 16px
}

.glassEffect-cover .glass-tip img {
    animation: gradientScale 2s linear infinite;
    -webkit-animation: gradientScale 2s linear infinite
}

.create-chart h5 {
    margin: 20px 10px;
    text-align: center;
    font-weight: 400;
    font-size: 18px
}

.create-chart .position-align ul li {
    float: left;
    padding-right: 10px
}

.create-chart .position-right {
    float: right
}

.create-chart .position-none {
    display: none
}

.bar-legend,
.line-legend,
.pie-legend {
    padding: 10px;
    list-style: none;
    font-size: 14px
}

.bar-legend li,
.line-legend li,
.pie-legend li {
    position: static;
    line-height: 1.5
}

.bar-legend li span,
.line-legend li span,
.pie-legend li span {
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 5px
}

.comp_image {
    width: 100%;
    height: 100%
}

.img_mask {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center
}

.taphold_image {
    -webkit-touch-callout: none;
    pointer-events: none
}

.deepShareHref {
    line-height: 32px;
    text-align: center
}

.comp_anchor,
.eqx-link {
    width: 100%;
    height: 100%;
    display: block;
    white-space: nowrap;
    padding: 0 8px;
    text-align: center;
    font-size: 16px;
    line-height: 30px
}

.map-iframe {
    border: none
}

.mapBtn_div {
    border: 1px solid #ccd5db;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    width: 100%;
    line-height: 22px;
    color: unset;
    padding: 0 10px
}

.mapBtn_div.omits {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.mapBtn_div.omit-height {
    height: 100%
}

.style-btn {
    text-align: center
}

.customer.selected,
.default.selected {
    background: #1593ff;
    border: none;
    color: #fff
}

.navigation {
    border-radius: 5px;
    border: none
}

.navigation.navigation_pad {
    padding: 0 10px 0 5px
}

.address {
    vertical-align: middle;
    line-height: 40px;
    font-size: 26px
}

.amap-copyright,
.amap-logo {
    display: none!important
}

.map-nav-box {
    position: absolute;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 54px;
    text-align: center;
    transform: translateZ(0);
    z-index: 1
}

.map-nav-box .address-name {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    padding: 12px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.map-nav-box .address-name p {
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center
}

.map-nav-box .address-name p:first-of-type {
    color: #000;
    font-size: 14px
}

.map-nav-box .address-name p:nth-of-type(2) {
    color: #999;
    font-size: 12px;
    margin-top: 4px
}

.go-here {
    width: 44px;
    height: 44px;
    color: #fff;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 22%;
    right: 10%;
    background-color: #1593ff;
    z-index: 10
}

.go-here i {
    height: 14px;
    width: 14px;
    display: block
}

.go-here span {
    height: 17px;
    display: block;
    font-size: 12px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #fff;
    line-height: 17px
}

.image-slider {
    position: relative;
    height: 100%;
    perspective: 200px;
    -webkit-perspective: 200px
}

.image-slider-style2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition-property: transform, opacity;
    transition-duration: .4s;
    box-shadow: 0 2px 4px 0 hsla(0, 0%, 60%, .5)
}

.image-slider-style2 .image-slider-img-title {
    margin: 10px;
    font-size: 14px;
    line-height: 1.2em;
    color: #333
}

.image-slider-style2 .image-slider-img-detail {
    margin: 10px;
    font-size: 12px;
    line-height: 1.2em;
    color: #999;
    word-break: break-word
}

.image-slider-style2-current {
    transform: translateX(0);
    opacity: 1
}

.image-slider-style2-left1 {
    transform: translateX(calc(-100% - 10px));
    opacity: .6
}

.image-slider-style2-left2 {
    transform: translateX(calc(-200% - 20px));
    opacity: 0
}

.image-slider-style2-right1 {
    transform: translateX(calc(100% + 10px));
    opacity: .6
}

.image-slider-style2-right2 {
    transform: translateX(calc(200% + 20px));
    opacity: 0
}

.image-slider-style2-alternate {
    opacity: 0
}

.image-slider-style3 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition-property: transform, opacity;
    transition-duration: .4s;
    box-shadow: 0 2px 4px 0 hsla(0, 0%, 60%, .5)
}

.image-slider-style3 .image-slider-img-title {
    margin: 10px;
    font-size: 14px;
    line-height: 1.2em;
    color: #333
}

.image-slider-style3 .image-slider-img-detail {
    margin: 10px;
    font-size: 12px;
    line-height: 1.2em;
    color: #999;
    word-break: break-word
}

.image-slider-style3-current {
    transform: translateX(0) translateZ(10px);
    opacity: 1;
    z-index: 2
}

.image-slider-style3-left1 {
    transform: translateX(-30px) translateZ(-20px);
    opacity: .6;
    z-index: 1
}

.image-slider-style3-right1 {
    transform: translateX(30px) translateZ(-20px);
    opacity: .6;
    z-index: 1
}

.image-slider-style3-alternate {
    opacity: 0;
    z-index: 1
}

.image-slider-style4 {
    position: absolute;
    top: -15px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition-property: transform, opacity;
    transition-duration: .4s;
    box-shadow: 0 2px 4px 0 hsla(0, 0%, 60%, .5);
    border-radius: 3px
}

.image-slider-style4 .image-slider-img-title {
    margin: 10px;
    font-size: 14px;
    line-height: 1.2em;
    color: #333
}

.image-slider-style4 .image-slider-img-detail {
    margin: 10px;
    font-size: 12px;
    line-height: 1.2em;
    color: #999;
    word-break: break-word
}

.image-slider-style4 img {
    position: absolute;
    width: 220px;
    height: 220px;
    bottom: 0;
    margin: 0 10px 10px
}

.image-slider-style4-current {
    transform: translateX(0) translateZ(0);
    z-index: 3;
    opacity: 1
}

.image-slider-style4-up1 {
    transform: translateY(-23px) translateZ(-10px);
    z-index: 2;
    opacity: .6
}

.image-slider-style4-up2 {
    transform: translateY(-46px) translateZ(-20px);
    z-index: 1;
    opacity: .6
}

.image-slider-style4-below1 {
    transform: translateY(23px) translateZ(-10px);
    z-index: 2;
    opacity: .6
}

.image-slider-style4-below2 {
    transform: translateY(46px) translateZ(-20px);
    z-index: 1;
    opacity: .6
}

.image-slider-style4-below3 {
    transform: translateY(69px) translateZ(-30px);
    z-index: 0;
    opacity: .6
}

.wsite-video .element-box {
    width: 48px;
    height: 48px
}

.video_area .pop-video-btn-icon {
    line-height: 1;
    position: relative
}

.video_area .play-mask {
    position: absolute;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    line-height: 1
}

.video_area.default .play-mask {
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: .625em
}

.video_area.film-style .play-mask {
    top: 18.7%;
    font-size: .6em
}

.video_area.tv-style .play-mask {
    top: 31.2%;
    font-size: .51em
}

.inline-video.no-cover {
    background-color: #000
}

.inline-video .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.inline-video .cover {
    width: 100%;
    z-index: 1
}

.inline-video .play {
    width: 18%;
    z-index: 2
}

.video_mask {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1000;
    width: 100%;
    height: 100%
}

.video_mask .video_player {
    position: absolute;
    top: 15%;
    width: 100%;
    height: 50%
}

.close_mask {
    color: #fff;
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 20px;
    height: 20px;
    z-index: 1001
}

.deepShareHref {
    line-height: 32px;
    text-align: center
}

.comp_anchor,
.eqx-tel {
    width: 100%;
    height: 100%;
    display: block;
    white-space: nowrap;
    padding: 0 8px;
    text-align: center;
    font-size: 16px;
    line-height: 30px
}

.deepShareHref {
    line-height: 32px;
    text-align: center
}

.comp_anchor {
    width: 100%;
    height: 100%;
    display: block;
    white-space: nowrap;
    padding: 0 8px;
    text-align: center;
    font-size: 16px;
    line-height: 30px
}

.deepShareHref {
    line-height: 32px;
    text-align: center
}

.comp_anchor,
.eqx-sound {
    width: 100%;
    height: 100%;
    display: block;
    white-space: nowrap;
    padding: 0 8px;
    text-align: center;
    font-size: 16px;
    line-height: 30px
}

.comp_counter {
    height: 100%;
    width: 100%;
    padding: 0 16px
}

.comp_counter img.counter-elem {
    vertical-align: middle
}

.comp_counter.counter-tb {
    position: relative
}

.comp_counter.counter-tb .counter-elem {
    display: block;
    line-height: 1
}

.comp_counter.counter-tb .counter-number {
    margin-top: 10px
}

.comp_counter.counter-lr .counter-container,
.comp_counter.counter-tb .counter-container {
    width: 100%
}

.comp_counter.counter-lr .counter-number {
    margin-left: 10px
}

.comp_counter.counter-l {
    font-size: 36px
}

.comp_counter.counter-m {
    font-size: 26px
}

.comp_counter.counter-s {
    font-size: 16px
}

.phone-view .not-voted .counter-icon {
    color: #ccc
}

.boards-panel {
    background-color: #424d60!important;
    z-index: 9999;
    padding: 30px;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 11px;
    transform: translateZ(0)
}

.boards-panel,
.boards-panel * {
    box-sizing: border-box
}

.boards-panel .boards-top {
    position: absolute;
    left: 20px;
    top: 30px;
    right: 20px;
    z-index: 10;
    box-sizing: content-box
}

.boards-panel .boards-top .head {
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding: 14px 0;
    position: relative
}

.boards-panel .boards-top .head .eqf-no {
    opacity: .8;
    font-size: 12px;
    position: absolute;
    top: 14px;
    right: 30px;
    display: inline-block;
    transform: scale(.8);
    cursor: pointer
}

.boards-panel .boards-form {
    text-align: center;
    border: 1px solid transparent;
    position: relative;
    padding: 0 15px
}

.boards-panel .boards-form textarea {
    border: none
}

.boards-panel .boards-form .record-btn {
    height: 30px;
    width: 100%;
    margin-top: 14px;
    border-radius: 3px;
    line-height: 30px;
    color: #fff;
    display: inline-block;
    background-color: #44cb83;
    cursor: pointer
}

.boards-panel .boards-form .record-btn.submit-disabled {
    background-color: #b4b4b4
}

.boards-panel .boards-form .content-tip {
    color: #000;
    opacity: .3;
    position: absolute;
    bottom: 0;
    right: 14px
}

.boards-panel .boards-form .textParent {
    height: 60px;
    background-color: #fff;
    position: relative
}

.boards-panel .boards-form .content-text {
    width: 100%;
    overflow-y: scroll;
    height: 45px;
    border-radius: 4px;
    padding: 5px;
    color: #76838f
}

.boards-panel .boards-bottom {
    position: fixed;
    left: 29px;
    bottom: 0;
    height: 30px;
    right: 29px;
    z-index: 10;
    background-color: #424d60
}

.boards-panel .boards-con {
    text-align: center;
    margin-top: 164px;
    min-height: 261px;
    position: absolute;
    top: 46px;
    background-color: #f0f3f4
}

.boards-panel .boards-con .list {
    text-align: left
}

.boards-panel .boards-con .more-mes {
    height: 40px;
    text-align: center;
    line-height: 40px
}

.boards-panel .boards-con .record-bar {
    margin-top: 15px
}

.boards-panel .boards-con.ios-boards-con {
    overflow: auto;
    bottom: 30px;
    left: 20px;
    right: 20px;
    -webkit-overflow-scrolling: touch;
    box-sizing: content-box
}

.boards-panel .spline-con {
    height: 18px;
    padding: 0 15px;
    margin-top: 16px;
    position: relative
}

.boards-panel .spline-con span:first-child {
    position: absolute;
    top: -5px;
    left: 50%;
    padding: 0 8px;
    transform: translateX(-50%)
}

.boards-panel .spline-con .spline {
    height: 1px;
    display: block;
    background-color: #ccd5db
}

.tool {
    width: 100%;
    position: absolute;
    background-color: transparent!important;
    bottom: 19px;
    z-index: 10;
    display: flex;
    justify-content: center
}

.tool .input200 {
    width: 200px;
    height: 36px;
    padding-left: 5px;
    border-radius: 4px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .08);
    padding-top: 10px;
    overflow: auto
}

.tool .eqf-yes-f {
    margin-left: 18px
}

.tool .eqf-yes-f,
.tool .eqf-yes-l {
    width: 24px;
    height: 24px;
    font-size: 24px;
    margin-top: 6px
}

.tool .eqf-yes-l {
    float: right
}

.recordParent {
    width: 100%;
    height: 270px;
    overflow-y: auto
}

.recordParent::-webkit-scrollbar {
    width: 8px
}

.recordParent::-webkit-scrollbar-track {
    background-color: transparent
}

.recordParent::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .1)
}

.record {
    padding: 17px 0;
    min-height: 90px;
    width: 240px;
    margin: 0 auto
}

.record .headimg {
    width: 36px;
    height: 36px;
    background-position: 50% 50%;
    background-size: cover;
    float: left
}

.record .headimg .logo {
    transform: scale(.5);
    margin-left: -7px;
    margin-top: -2px;
    font-size: 12px;
    line-height: 30px
}

.record .headimg-bg {
    background: linear-gradient(top, #2fcdfc, #08a1ef);
    color: #fff;
    text-align: center;
    font-size: 24px;
    background: -moz-linear-gradient(top, #2fcdfc, #08a1ef);
    background: -webkit-linear-gradient(top, #2fcdfc, #08a1ef)
}

.record .headimg-bg.headimg {
    line-height: 32px
}

.record .time {
    opacity: .5;
    margin-top: 4px
}

.record .name,
.record .time {
    margin-left: 45px;
    font-size: 12px
}

.record .name {
    max-width: 120px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.record .mes {
    margin-left: 45px;
    word-break: break-all;
    margin-top: 6px;
    line-height: 15px;
    font-size: 14px
}

.eqx-comp-comment .title {
    font-family: PingFangSC-Semibold;
    font-size: 16px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    width: 240px;
    margin: 0 auto
}

.boards-barrage {
    position: relative
}

.boards-barrage .barrage-comments {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.boards-barrage .barrage-comments .barrage-comment {
    background: rgba(0, 0, 0, .3);
    border-radius: 3px;
    padding: 0 10px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0
}

.boards-barrage .barrage-comments .barrage-comment>.barrage-img {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #fff;
    position: absolute;
    left: 10px;
    top: 5px
}

.boards-barrage .barrage-comments .barrage-comment>.barrage-content.h {
    height: 30px;
    white-space: nowrap
}

.boards-barrage .barrage-comments .barrage-comment>.barrage-content.h,
.boards-barrage .barrage-comments .barrage-comment>.barrage-content.v {
    display: block;
    font-size: 12px;
    color: #fff;
    line-height: 30px;
    padding-left: 25px
}

.boards-barrage .barrage-tools {
    position: absolute;
    bottom: 40px;
    right: 0
}

.boards-barrage .barrage-tools>a {
    display: block;
    position: relative;
    width: 30px;
    height: 24px;
    line-height: 24px;
    margin-bottom: 10px;
    text-align: center;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border-radius: 12px 0 0 12px;
    font-size: 12px
}

.boards-barrage .barrage-tools .barrage-play .eqf-slash-l {
    position: absolute;
    right: 2px;
    top: 9px;
    transform: scale(.8)
}

.boards-barrage .barrage-tools .barrage-play.on .eqf-slash-l {
    display: none
}

.boards-barrage .barrage-tools .barrage-play.off .eqf-slash-l {
    display: block
}

.eqx-comp-comment .empty-boards {
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 44%
}

.eqx-comp-comment .empty-boards .default-empty {
    color: #333
}

.eqx-comp-comment .empty-boards .black-empty {
    color: #fff
}

.eqx-comp-comment .empty-boards .pink-empty {
    color: #ee6e97
}

.eqx-comp-comment .empty-boards .blue-empty {
    color: #aed168
}

.eqx-comp-comment .empty-boards .yellow-empty {
    color: #c5873f
}

.eqx-comp-comment [class*=boards-],
.eqx-comp-comment [class^=boards-] {
    height: 100%
}

.eqx-comp-comment [class*=boards-] .tool,
.eqx-comp-comment [class^=boards-] .tool {
    font-size: 12px
}

.eqx-comp-comment [class*=boards-] .content-warn,
.eqx-comp-comment [class^=boards-] .content-warn {
    width: 128px;
    height: 36px;
    position: absolute;
    display: none;
    top: 290px;
    left: 83px;
    text-align: center;
    background-color: rgba(0, 0, 0, .9);
    color: #fff;
    font-size: 14px;
    line-height: 36px;
    border-radius: 4px;
    transition: all .3s
}

.eqx-comp-comment [class*=boards-] .content-warn-show,
.eqx-comp-comment [class^=boards-] .content-warn-show {
    display: block
}

.eqx-comp-comment .no-more-comment {
    text-align: center;
    margin-top: 10px
}

.boards-default,
.boards-default .boards-con,
.boards-default .boards-top,
.boards-default .spline-con span:first-child {
    background-color: #f6f6f6
}

.boards-default .record {
    border-bottom: 1px solid rgba(51, 51, 51, .1);
    color: #333
}

.boards-default .record .mes {
    font-size: 14px;
    line-height: 20px
}

.boards-default .no-more-comment {
    color: #333
}

.boards-default .title {
    color: #333;
    border-bottom: 1px solid rgba(51, 51, 51, .1)
}

.boards-default .tool .record-btn {
    color: #333
}

.boards-black,
.boards-black .boards-con,
.boards-black .boards-top,
.boards-black .spline-con span:first-child {
    background-color: #333
}

.boards-black .recordParent::-webkit-scrollbar {
    width: 8px
}

.boards-black .recordParent::-webkit-scrollbar-track {
    background-color: transparent
}

.boards-black .recordParent::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: hsla(0, 0%, 100%, .1)!important
}

.boards-black .record {
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    color: hsla(0, 0%, 100%, .1)
}

.boards-black .record .mes {
    font-size: 14px;
    line-height: 20px
}

.boards-black .no-more-comment {
    color: #fff
}

.boards-black .title {
    color: #fff;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.boards-black .tool .record-btn {
    color: #fff
}

.boards-pink,
.boards-pink .boards-con,
.boards-pink .boards-top,
.boards-pink .spline-con span:first-child {
    background-color: #ffedfc
}

.boards-pink .record {
    color: #ee6e97;
    border-bottom: 1px solid rgba(238, 110, 151, .1)
}

.boards-pink .record .mes {
    font-size: 14px;
    line-height: 20px
}

.boards-pink .no-more-comment {
    color: #ee6e97
}

.boards-pink .title {
    color: #ee6e97;
    border-bottom: 1px solid rgba(238, 110, 151, .1)
}

.boards-pink .tool .record-btn {
    color: #ee6e97
}

.boards-yellow {
    background-color: #efd7b4
}

.boards-yellow .boards-con,
.boards-yellow .boards-top,
.boards-yellow .spline-con span:first-child {
    background-color: #f5f3f0
}

.boards-yellow .recordParent {
    height: 290px
}

.boards-yellow .record {
    color: #c5873f;
    background-color: #fffcf9;
    min-height: 84px;
    width: 262px
}

.boards-yellow .record .mes {
    font-size: 14px;
    line-height: 20px
}

.boards-yellow .record .name {
    max-width: 75px
}

.boards-yellow .no-more-comment,
.boards-yellow .title,
.boards-yellow .tool .record-btn {
    color: #c5873f
}

.boards-blue,
.boards-blue .boards-con,
.boards-blue .boards-top,
.boards-blue .spline-con span:first-child {
    background-color: #e6f5dd
}

.boards-blue .recordParent {
    height: 290px
}

.boards-blue .record {
    background-color: #aed168;
    min-height: 69px;
    width: 246px
}

.boards-blue .record .mes {
    font-size: 14px;
    line-height: 20px
}

.boards-blue .record .name {
    max-width: 85px
}

.boards-blue .no-more-comment,
.boards-blue .title,
.boards-blue .tool .record-btn.eqf-yes-f {
    color: #aed168
}

.boards-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f6f6f6
}

.boards-button .buttonDiv {
    width: 200px;
    height: 50px;
    line-height: 50px;
    background: #f9f9f9;
    font-size: 24px;
    border-radius: 4px;
    text-align: center;
    color: #1593ff
}

.boards-button .buttonDiv span {
    font-size: 28px;
    margin-left: 14px
}

.boards-button .buttonDiv .f {
    color: #1593ff!important
}

.boards-button .buttonDiv .hot {
    color: #ff5448!important
}

.boards-button .buttonDiv .line {
    color: #f89300!important
}

.boards-button .buttonDiv .pen {
    color: #1bc7b1!important
}

.boards-button .buttonDiv-ver {
    height: 70px
}

.boards-button .buttonDiv-ver span {
    margin-left: 0;
    display: block;
    text-align: center;
    line-height: 30px
}

.boards-button .buttonDiv-ver i {
    display: block;
    text-align: center;
    margin-top: 11px
}

.boards-button .buttonDiv-hor {
    height: 50px;
    line-height: 50px
}

.boards-userDefine .recordParent .record {
    border-bottom: 1px solid rgba(51, 51, 51, .1)
}

.boards-userDefine .recordParent .record .mes {
    line-height: 20px
}

.boards-userDefine .title {
    border-bottom: 1px solid rgba(51, 51, 51, .1)
}

.boards-default .boards-form .record-btn,
.boards-default .tool .replay {
    background-color: #44cb83
}

.boards-default .tool .content-text {
    font-size: 14px;
    line-height: 20px;
    padding-left: 10px;
    padding-top: 8px
}

.boards-default .tool .more {
    background-color: #08a1ef
}

.boards-default .spline-con .spline {
    background-color: rgba(51, 51, 51, .1)
}

.boards-default .boards-con .content-text {
    border: 1px solid rgba(51, 51, 51, .1)
}

.boards-default .boards-con .more-mes {
    color: rgba(0, 0, 0, .6)
}

.boards-default .boards-top .head {
    color: #37474f
}

.boards-default .record .time {
    margin-left: 45px;
    opacity: .5;
    margin-top: 4px;
    font-size: 12px
}

.boards-black {
    color: #fff
}

.boards-black .boards-form .record-btn,
.boards-black .replay {
    background-color: #30bcad
}

.boards-black .record {
    color: #fff
}

.boards-black .tool {
    background-color: hsla(0, 0%, 100%, .1)
}

.boards-black .tool .more {
    background-color: hsla(0, 0%, 100%, .15);
    border: 1px solid hsla(0, 0%, 100%, .3)
}

.boards-black .record .time {
    margin-left: 45px;
    opacity: .5;
    margin-top: 4px;
    font-size: 12px
}

.boards-black .boards-con .content-text {
    border: 1px solid rgba(0, 0, 0, .5)
}

.boards-black .boards-con .more-mes {
    color: #fff
}

.boards-pink {
    background-color: #f6dcf0
}

.boards-pink .tool {
    background-color: #e6688e
}

.boards-pink .record {
    color: #bd5673
}

.boards-pink .record .time {
    margin-left: 45px;
    opacity: .5;
    margin-top: 4px;
    font-size: 12px
}

.boards-pink .more,
.boards-pink .replay {
    background-color: #eb86a5;
    border: 1px solid #f3b4c7
}

.boards-pink .head {
    background-color: #e6688e
}

.boards-pink .boards-con {
    background-color: #f6dcf0
}

.boards-pink .boards-con .content-text {
    border: 1px solid #e9b3db
}

.boards-pink .boards-con .more-mes {
    color: rgba(189, 86, 115, .8)
}

.boards-pink .boards-form {
    background-color: #f6dcf0
}

.boards-pink .boards-form .record-btn {
    background-color: #e6688e
}

.boards-pink .spline-con {
    background-color: #f6dcf0;
    color: rgba(189, 86, 115, .8)
}

.boards-pink .spline-con .spline {
    background-color: #e9b3db
}

.boards-blue .boards-form .content-text {
    border: 1px solid #ccd5db
}

.boards-blue .boards-form .record-btn {
    background-color: #e6f5dd
}

.boards-blue .record {
    color: #fff;
    border-style: solid;
    border-image-source: url(//as.eqh5.com/h5_view_2/images/stampbg-741e1e.png);
    border-image-slice: 40;
    border-image-outset: 7px;
    border-image-repeat: round;
    border-image-width: 20px;
    margin: 7px auto;
    position: relative;
    padding: 14px 10px 14px 20px;
    margin: 11px auto;
    padding: 7px 13px
}

.boards-blue .record .headimg {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    line-height: 36px
}

.boards-blue .record .headimg .logo {
    line-height: 36px;
    margin-left: -5px;
    margin-top: 0
}

.boards-blue .record .mes,
.boards-blue .record .name {
    opacity: 1
}

.boards-blue .record .name {
    margin-left: 45px
}

.boards-blue .record .time {
    margin-left: 45px;
    opacity: .5;
    margin-top: 4px;
    font-size: 12px
}

.boards-blue .record .headimg-bg {
    background-color: transparent
}

.boards-yellow .record {
    margin: 7px auto;
    padding: 14px 10px 14px 20px;
    position: relative
}

.boards-yellow .record .headimg {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    line-height: 36px
}

.boards-yellow .record .headimg .logo {
    line-height: 36px;
    margin-left: -5px;
    margin-top: 0
}

.boards-yellow .record .mes,
.boards-yellow .record .name {
    opacity: 1
}

.boards-yellow .record .name {
    margin-left: 45px
}

.boards-yellow .record .time {
    margin-left: 45px;
    opacity: .5;
    margin-top: 4px;
    font-size: 12px
}

.boards-yellow .record .headimg-bg {
    background-color: transparent
}

.boards-yellow .record .time {
    right: 32px
}

.boards-yellow .record:before {
    content: "";
    width: 12px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #d09746;
    border-radius: 4px 0 0 0
}

.boards-yellow .record:after {
    content: "";
    width: 262px;
    height: 4px;
    position: absolute;
    bottom: -4px;
    left: 0;
    background-image: linear-gradient(90deg, #c5873f 4.58%, #ede3d9 0);
    background-size: 262px 4px;
    border-radius: 0 0 0 5px
}

.boards-yellow .boards-form .record-btn {
    background-color: #fec274
}

.boards-blue .tool .replay,
.boards-yellow .tool .replay {
    background-color: #e6f5dd
}

.boards-blue .tool .more,
.boards-yellow .tool .more {
    background-color: #729fe4
}

.boards-blue .boards-top .head,
.boards-yellow .boards-top .head {
    color: #37474f
}

.comp_button {
    width: 240px;
    height: 36px;
    min-width: 50px;
    white-space: nowrap;
    border: 0;
    background: transparent;
    font-size: 16px;
    color: #999;
    padding: 0 8px
}

.feedback-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 888888;
    transform: translateZ(0)
}

.feedback-box .ad-form-submit__wrapper {
    position: absolute;
    box-sizing: border-box;
    right: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    left: 0
}

.feedback-box .ad-form-submit__wrapper .feedback-content {
    border-radius: 10px 10px 0 0;
    background: #fff;
    text-align: center;
    margin: 0 auto;
    width: 300px;
    color: #333;
    padding: 10px 0
}

.feedback-box .ad-form-submit__wrapper .feedback-content__title--img {
    padding: 20px;
    box-sizing: border-box
}

.feedback-box .ad-form-submit__wrapper .feedback-content__title--img span {
    display: block
}

.feedback-box .ad-form-submit__wrapper .feedback-content__title--text {
    height: 60px;
    line-height: 60px
}

.feedback-box .ad-form-submit__wrapper .feedback-content__title--text span {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 15px
}

.feedback-box .ad-form-submit__wrapper .feedback-content .eqf-yes-l {
    color: #56c6ff;
    font-size: 20px;
    vertical-align: middle
}

.feedback-box .ad-form-submit__wrapper .feedback-content img {
    width: 240px;
    height: 240px
}

.feedback-box .ad-form-submit__wrapper .feedback-content img.up {
    margin-bottom: 20px
}

.feedback-box .ad-form-submit__wrapper .feedback-content img.down {
    margin-top: 20px
}

.feedback-box .ad-form-submit__wrapper .feedback-btn {
    width: 300px;
    margin: 0 auto;
    font-size: 16px
}

.feedback-box .ad-form-submit__wrapper .feedback-btn.line {
    border-top: 1px solid #ccd5db
}

.feedback-box .ad-form-submit__wrapper .feedback-btn a {
    display: inline-block;
    text-align: center;
    width: 100%;
    line-height: 40px;
    background: #56c6ff;
    color: #fff;
    border-radius: 0 0 10px 10px
}

.feedback-box .ad-form-submit__wrapper .feedback-btn a.left {
    color: #333;
    width: 50%;
    background: #eee;
    border-bottom-right-radius: 0
}

.feedback-box .ad-form-submit__wrapper .feedback-btn a.right {
    background: #56c6ff;
    width: 50%;
    border-bottom-left-radius: 0
}

.feedback-box .ad-form-submit__wrapper #ad-form-pop-submit {
    width: 300px;
    margin: 0 auto;
    background: #fff
}

.feedback-box .ad-form-submit__wrapper .interactive-gift-list {
    border-radius: unset
}

.feedback-box .feedback-form {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    margin-left: -150px;
    font-size: 18px
}

.feedback-box .feedback-form .feedback-content {
    border-radius: 10px 10px 0 0;
    background: #fff;
    text-align: center;
    margin: 0 auto;
    width: 300px;
    color: #333;
    padding: 10px 0
}

.feedback-box .feedback-form .feedback-content__title--img {
    padding: 20px;
    box-sizing: border-box
}

.feedback-box .feedback-form .feedback-content__title--img span {
    display: block
}

.feedback-box .feedback-form .feedback-content__title--text {
    height: 60px;
    line-height: 60px
}

.feedback-box .feedback-form .feedback-content__title--text span {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 15px
}

.feedback-box .feedback-form .feedback-content .eqf-yes-l {
    color: #56c6ff;
    font-size: 20px;
    vertical-align: middle
}

.feedback-box .feedback-form .feedback-content img {
    width: 240px;
    height: 240px
}

.feedback-box .feedback-form .feedback-content img.up {
    margin-bottom: 20px
}

.feedback-box .feedback-form .feedback-content img.down {
    margin-top: 20px
}

.feedback-box .feedback-form .feedback-btn {
    width: 300px;
    margin: 0 auto;
    font-size: 16px
}

.feedback-box .feedback-form .feedback-btn.line {
    border-top: 1px solid #ccd5db
}

.feedback-box .feedback-form .feedback-btn a {
    display: inline-block;
    text-align: center;
    width: 100%;
    line-height: 40px;
    background: #56c6ff;
    color: #fff;
    border-radius: 0 0 10px 10px
}

.feedback-box .feedback-form .feedback-btn a.left {
    color: #333;
    width: 50%;
    background: #eee;
    border-bottom-right-radius: 0
}

.feedback-box .feedback-form .feedback-btn a.right {
    background: #56c6ff;
    width: 50%;
    border-bottom-left-radius: 0
}

.submit_banner_ad {
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: 300px;
    margin-left: -150px;
    max-height: 82px;
    border-radius: 8px
}

.submit-confirm-dialog-ct {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    z-index: 999999;
    transform: translateZ(0);
    -webkit-transform: translateZ(0)
}

.submit-confirm-dialog {
    position: absolute;
    top: 100%;
    left: 0;
    bottom: calc(-100% + 56px);
    width: 100%;
    background: #fff;
    border-radius: 16px 16px 0 0
}

.submit-confirm-dialog.landScape-scene {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    bottom: 100%;
    top: unset
}

.submit-confirm-dialog.landScape-scene .submit-confirm-dialog__content {
    margin-top: 0
}

.submit-confirm-dialog.landScape-scene .submit-confirm-dialog__content .privacy-policy-confirm {
    bottom: 128px
}

.submit-confirm-dialog.landScape-scene .submit-confirm-dialog__handle {
    bottom: 16px
}

.submit-confirm-dialog__header {
    height: 48px;
    position: relative
}

.submit-confirm-dialog__header .title {
    text-align: center;
    line-height: 48px;
    font-size: 14px;
    font-weight: 500;
    color: #333
}

.submit-confirm-dialog__header .close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 20px;
    color: #333;
    cursor: pointer
}

.submit-confirm-dialog__content {
    margin-top: 11px
}

.submit-confirm-dialog__content .privacy-policy {
    color: #1593ff;
    cursor: pointer
}

.submit-confirm-dialog__content .confirm-tip {
    width: 288px;
    margin: auto;
    font-size: 15px;
    color: #333;
    line-height: 24px;
    text-align: left!important
}

.submit-confirm-dialog__content .privacy-policy-confirm {
    position: absolute;
    bottom: 188px;
    width: 284px;
    left: 50%;
    transform: translateX(-50%);
    display: flex
}

.submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox {
    width: 16px;
    height: 16px;
    opacity: 0
}

.submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox-desc {
    margin-left: 8px;
    font-size: 12px;
    color: #333;
    line-height: 16px
}

.submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid #ccd5db;
    pointer-events: none;
    box-sizing: border-box
}

.submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox-layout .checked-icon {
    color: #fff;
    font-size: 16px;
    display: none
}

.submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox-layout.checkbox-checked {
    background: #1593ff;
    border: none
}

.submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox-layout.checkbox-checked .checked-icon {
    display: block
}

.submit-confirm-dialog__handle {
    position: absolute;
    bottom: 64px;
    left: 50%;
    width: 284px;
    transform: translateX(-50%)
}

.submit-confirm-dialog__handle .handle-btn {
    width: 284px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #e6ebed;
    text-align: center;
    line-height: 38px;
    font-size: 14px;
    color: #666;
    margin-top: 11px;
    cursor: pointer
}

.submit-confirm-dialog__handle .handle-btn.confirm-btn {
    background: #1593ff;
    border: 1px solid #1593ff;
    color: #fff
}

.submit-confirm-dialog__handle .handle-btn.confirm-btn.disale-submit {
    background: #f5f5f5;
    border: 1px solid #ccd5db;
    color: #999;
    pointer-events: none
}

.comp-exception {
    position: relative;
    display: flex!important;
    flex-direction: column
}

.comp-exception .expection-icon {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.comp-exception .expection-style-img {
    font-size: 2rem;
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    top: 5%;
    display: flex;
    text-align: center;
    align-items: center;
    border-radius: 50%;
    width: 60%;
    height: 60%
}

.comp-exception .expection-style-img img {
    width: 100%;
    height: 100%
}

.comp-exception .expection-style-default {
    font-size: 22px;
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    top: 5%;
    display: flex;
    text-align: center;
    align-items: center;
    background: #ff5448;
    color: #fff;
    border-radius: 50%;
    width: 60%;
    height: 60%
}

.comp-exception .expection-style-default span {
    text-align: center;
    width: 100%
}

.comp-exception .expection-style-default span.expectioin-default-content {
    align-items: center;
    display: flex;
    line-height: 100%;
    flex-wrap: wrap;
    justify-content: space-around
}

.comp-exception .expection-detail {
    color: #666;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center
}

.comp-exception .expection-detail .amount-box {
    display: inline-block;
    text-align: center;
    height: 100%;
    line-height: 30px;
    width: 100%
}

.v-exception-black {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 9999988888
}

.v-exception-black .wx-record-bottom-note {
    line-height: 35px;
    height: 40px;
    font-size: 14px;
    text-align: center;
    color: #999
}

.v-exception-black .record-detail-part {
    padding-top: 8px;
    padding: 8px 12px 2px;
    overflow: hidden;
    touch-action: none
}

.v-exception-black .record-detail-part .record-detail-part {
    touch-action: none
}

.v-exception-black .record-detail-part .record-list-item {
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.v-exception-black .record-detail-part .record-list-item .list-item-left img {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    margin-right: 8px
}

.v-exception-black .record-detail-part .record-list-item .list-item-left span {
    color: #111;
    font-size: 14px
}

.v-exception-black .record-detail-part .record-list-item .list-item-right {
    color: #999
}

.v-exception-black .record-detail-part .record-list-item .list-item-right span {
    margin-right: 2px;
    color: #ff5448
}

.v-exception-black .record-detail-part .nodata-img {
    text-align: center;
    margin-bottom: 16px
}

.v-exception-black .record-detail-part .nodata-img img {
    width: 168px;
    height: 140px
}

.v-exception-black .record-detail-part .nodata-content {
    height: 20px;
    font-size: 14px;
    text-align: center;
    color: #999;
    line-height: 20px
}

.v-exception-black .wx-exce-box {
    padding: 16px 0 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 8px;
    width: 270px;
    text-align: center;
    overflow: hidden;
    background-color: #fff;
    transform: translate(-50%, -50%);
    background-image: url(//as.eqh5.com/h5_view_2/images/img_icon_bg-88ada3.png);
    background-repeat: no-repeat;
    background-size: 66px 70px;
    background-position: 100% 100%
}

.v-exception-black .record-box {
    box-sizing: border-box;
    text-align: left;
    position: absolute;
    background: #fff;
    transition: all .5s;
    top: 100%;
    overflow: hidden;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px 0 0;
    height: 100%;
    z-index: 11
}

.v-exception-black .record-box .record-title {
    padding: 0 12px;
    margin-bottom: 8px
}

.v-exception-black .record-box .record-title span {
    color: #111;
    font-weight: 700;
    font-size: 17px
}

.v-exception-black .record-box .record-title em {
    font-size: 16px;
    color: #999;
    height: 20px;
    line-height: 20px;
    width: 20px;
    display: inline-block
}

.v-exception-black .wx-exce-title {
    font-size: 17px;
    color: #111;
    font-weight: 600;
    margin-bottom: 24px
}

.v-exception-black .wx-other {
    margin-bottom: 2px
}

.v-exception-black .wx-other span {
    display: inline-block;
    padding: 10px 20px;
    color: #1593ff;
    font-size: 12px
}

.v-exception-black .close {
    position: absolute;
    font-size: 14px;
    top: 16px;
    right: 16px
}

.v-exception-black .wt-exce-record {
    color: #666;
    font-size: 12px;
    line-height: 30px
}

.v-exception-black .other-amounts-box {
    margin-bottom: 24px;
    display: none
}

.v-exception-black .other-amounts-box .input-box {
    position: relative;
    height: 48px;
    line-height: 48px;
    background: #f5f5f5;
    border-radius: 4px;
    margin: 0 16px;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex
}

.v-exception-black .other-amounts-box .input-box span {
    font-size: 14px;
    color: #666;
    width: 10px;
    flex-shrink: 0;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%)
}

.v-exception-black .other-amounts-box .input-box input {
    height: 100%;
    width: 100%;
    font-size: 24px;
    text-align: center;
    border: none;
    background: #f5f5f5
}

.v-exception-black .other-amounts-box .other-amount-box span {
    display: inline-block;
    color: #fff;
    width: 118px;
    height: 36px;
    line-height: 36px;
    background: #1593ff;
    border-radius: 4px
}

.v-exception-black .amounts-box-4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    min-height: 112px
}

.v-exception-black .amounts-box-4 .amout-item {
    width: 74px;
    margin-right: 8px;
    border: 1px solid;
    color: #ff5448;
    background: #fff;
    border-radius: 4px;
    height: 48px;
    line-height: 48px
}

.v-exception-black .amounts-box-4 .amout-item:nth-child(2n) {
    margin-right: 0
}

.v-exception-black .amounts-box-1,
.v-exception-black .amounts-box-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    min-height: 112px
}

.v-exception-black .amounts-box-1 .amout-item,
.v-exception-black .amounts-box-2 .amout-item {
    width: 74px;
    border: 1px solid;
    color: #ff5448;
    background: #fff;
    margin-right: 8px;
    border-radius: 4px;
    height: 48px;
    line-height: 48px
}

.v-exception-black .amounts-box-1 .amout-item:nth-child(2n),
.v-exception-black .amounts-box-2 .amout-item:nth-child(2n) {
    margin-right: 0
}

.v-exception-black .amout-item {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px
}

.v-exception-black .amounts-box,
.v-exception-black .amounts-box-3,
.v-exception-black .amounts-box-5,
.v-exception-black .amounts-box-6 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 112px
}

.v-exception-black .amounts-box-3 .amout-item,
.v-exception-black .amounts-box-5 .amout-item,
.v-exception-black .amounts-box-6 .amout-item,
.v-exception-black .amounts-box .amout-item {
    width: 74px;
    margin-right: 8px;
    border: 1px solid;
    color: #ff5448;
    background: #fff;
    border-radius: 4px;
    height: 48px;
    line-height: 48px
}

.v-exception-black .amounts-box-3 .amout-item:nth-child(3n),
.v-exception-black .amounts-box-5 .amout-item:nth-child(3n),
.v-exception-black .amounts-box-6 .amout-item:nth-child(3n),
.v-exception-black .amounts-box .amout-item:nth-child(3n) {
    margin-right: 0
}

.v-exception-black .v-exception-box {
    padding: 50px 0 30px;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    border-radius: 12px;
    width: 80%;
    background-color: #fff;
    transform: translate(-50%, -50%)
}

.v-exception-black .v-toast-content {
    margin-bottom: 36px;
    color: #111;
    font-size: 16px;
    font-weight: 500
}

.v-exception-black .v-close-btn {
    font-size: 17px;
    color: #333;
    display: inline-block;
    width: 54%;
    height: 44px;
    line-height: 44px;
    background: url(//as.eqh5.com/h5_view_2/images/hb-fk-anniu-a9b473.png);
    background-size: contain;
    background-repeat: no-repeat
}

.v-exception-black .v-icon-box {
    width: 160px;
    height: 100px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: -50px
}

.v-exception-black .v-icon-box img {
    width: 160px;
    height: 100px
}

.photowall {
    width: 100%
}

.photowall img {
    width: calc((100% - 42px)/8);
    border-radius: 100%;
    margin-right: 6px;
    margin-bottom: 6px
}

.photowall img:nth-of-type(8n) {
    margin-rigth: 0
}

.elementSave {
    width: 100%;
    height: 100%;
    text-align: center
}

.elementSave .touchImg {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    pointer-events: auto
}

.elementSave .long-touch-save-icon {
    display: inline-block;
    width: 20px;
    height: 20px
}

.elementSave.long-touch-save-style2 {
    padding: 2px
}

.elementSave.long-touch-save-style2 .long-touch-save-style2-inner {
    border: 1px solid #ff498d;
    border-radius: 18px;
    display: inline-block;
    width: 100%;
    height: 100%
}

.elementSave.long-touch-save-style4 {
    padding: 4px
}

.elementSave.long-touch-save-style4 .long-touch-save-icon {
    float: left;
    font-size: 1.2em;
    height: 36px;
    line-height: 36px;
    width: 36px;
    border-radius: 50%;
    background-color: #fff
}

.elementSave.long-touch-save-style5 {
    border-radius: 4px
}

.elementSave.long-touch-save-style6 {
    overflow: hidden
}

.elementSave.long-touch-save-style6 .long-touch-save-style6-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 46px
}

.elementSave.long-touch-save-style6 .long-touch-save-style6-content .long-touch-save-label {
    font-size: 12px
}

.add-img-btn {
    height: 100%;
    border: 1px solid #ccd5db;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    border-radius: 3px
}

.feedback-box {
    top: 0;
    background-color: rgba(0, 0, 0, .7);
    z-index: 888888
}

.feedback-box,
.feedback-box .box {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%
}

.feedback-box .box img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: scale(.8);
    width: 100%
}

.feedback-box .feedback-close-btn {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 20px;
    top: 20px;
    color: #fff
}

.anim-number-scroll-container {
    height: 100%;
    position: relative
}

.anim-number-scroll-container .anim-number-scroll-startNum {
    text-align: center;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap
}

.anim-number-scroll-container .anim-number-scroll-startNum .anim-number-items-startNum {
    padding-left: 3px;
    padding-right: 3px;
    display: flex;
    height: 100%;
    align-items: center
}

.anim-number-scroll-container .anim-number-scroll-startNum .anim-number-dot-startNum {
    display: flex;
    height: 100%;
    align-items: center
}

.item-select-box {
    outline: 1px dashed #1593ff
}

.age-change-box .img-box {
    position: relative;
    margin-bottom: 20px
}

.age-change-box .img-box .tip-box {
    height: 32px;
    background: #000;
    opacity: .6;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    position: relative;
    bottom: 0;
    left: 0;
    line-height: 32px;
    text-align: center;
    width: 100%;
    display: block
}

.age-change-box .operate-btn {
    width: 280px;
    height: 36px;
    line-height: 36px;
    border-radius: 3px;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    display: inline-block
}

.age-change-box .operate-btn span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: inherit;
    line-height: 20px
}

.age-change-box .cover-img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    display: inline-block
}

.age-change-box .normal .img-box {
    height: 373px;
    margin-bottom: 15px
}

.age-change-box .normal .cover-img {
    width: 280px;
    height: 373px
}

.age-change-box .normal .tip-box {
    top: 341px
}

.age-change-box .normal .border-img {
    display: none
}

.age-change-box .normal .change-btn,
.age-change-box .normal .save-btn {
    background: #1593ff
}

.age-change-box .normal .save-show .save-btn {
    display: inline-block
}

.age-change-box .normal .save-show .change-btn {
    margin-right: 16px;
    margin-left: 0
}

.age-change-box .normal .save-img-box {
    width: 288px
}

.age-change-box .normal .save-img-box .img-content {
    width: 100%
}

.age-change-box .normal .save-hidden .change-btn {
    margin-right: 0;
    width: 280px
}

.age-change-box .normal .save-hidden .save-btn {
    display: none
}

.age-change-box .normal .long-mode .change-btn {
    width: 177px
}

.age-change-box .normal .long-mode .save-btn {
    width: 87px
}

.age-change-box .normal .short-mode .change-btn,
.age-change-box .normal .short-mode .save-btn {
    width: 132px
}

.age-change-box .geek .img-box {
    height: 354px;
    margin-bottom: 20px
}

.age-change-box .geek .cover-img {
    width: 210px;
    height: 280px;
    margin-left: 50px;
    position: absolute;
    top: 40px
}

.age-change-box .geek .change-btn {
    background: #00e4ff;
    border-radius: 3px;
    margin-left: 16px
}

.age-change-box .geek .border-img {
    display: block;
    position: relative;
    height: 354px;
    width: 100%
}

.age-change-box .geek .tip-box {
    top: 248px;
    left: 0
}

.age-change-box .geek .save-btn {
    background: #00e4ff;
    border-radius: 3px
}

.age-change-box .geek .save-show .save-btn {
    display: inline-block
}

.age-change-box .geek .save-show .change-btn {
    margin-right: 16px
}

.age-change-box .geek .save-hidden .change-btn {
    width: 272px
}

.age-change-box .geek .save-hidden .save-btn {
    display: none
}

.age-change-box .geek .long-mode .change-btn {
    width: 169px
}

.age-change-box .geek .long-mode .save-btn {
    width: 87px
}

.age-change-box .geek .short-mode .change-btn,
.age-change-box .geek .short-mode .save-btn {
    width: 128px
}

.age-change-box .cute .img-box {
    height: 336px;
    margin-bottom: 13px
}

.age-change-box .cute .cover-img {
    width: 210px;
    height: 280px;
    margin-left: 32px;
    position: absolute;
    top: 29px
}

.age-change-box .cute .change-btn {
    background: #f5aacc;
    border-radius: 18px;
    margin-left: 12px
}

.age-change-box .cute .border-img {
    display: block;
    position: relative;
    height: 336px;
    width: 274px;
    z-index: 0
}

.age-change-box .cute .tip-box {
    top: 248px;
    left: 0
}

.age-change-box .cute .save-btn {
    background: #f5aacc;
    border-radius: 18px
}

.age-change-box .cute .save-show .save-btn {
    display: inline-block
}

.age-change-box .cute .save-show .change-btn {
    margin-right: 16px
}

.age-change-box .cute .save-hidden {
    margin-right: 0
}

.age-change-box .cute .save-hidden .change-btn {
    width: 252px
}

.age-change-box .cute .save-hidden .save-btn {
    display: none
}

.age-change-box .cute .long-mode .change-btn {
    width: 149px
}

.age-change-box .cute .long-mode .save-btn {
    width: 87px
}

.age-change-box .cute .short-mode .change-btn,
.age-change-box .cute .short-mode .save-btn {
    width: 118px
}

.age-change-box .easy .img-box {
    height: 392px;
    width: 278px;
    margin: 0 auto 8px
}

.age-change-box .easy .cover-img {
    width: 210px;
    height: 280px;
    margin-left: 34px;
    position: absolute;
    top: 42px;
    z-index: 0
}

.age-change-box .easy .change-btn {
    background: #1593ff;
    border-radius: 3px;
    margin-left: 13px
}

.age-change-box .easy .border-img {
    display: block;
    position: relative;
    height: 392px;
    width: 278px
}

.age-change-box .easy .tip-box {
    top: 248px;
    left: 0
}

.age-change-box .easy .save-btn {
    background: #1593ff;
    border-radius: 3px
}

.age-change-box .easy .save-show .save-btn {
    display: inline-block
}

.age-change-box .easy .save-show .change-btn {
    margin-right: 16px
}

.age-change-box .easy .save-hidden .change-btn {
    margin-right: 0;
    width: 252px
}

.age-change-box .easy .save-hidden .save-btn {
    display: none
}

.age-change-box .easy .long-mode .change-btn {
    width: 149px
}

.age-change-box .easy .long-mode .save-btn {
    width: 87px
}

.age-change-box .easy .short-mode .change-btn,
.age-change-box .easy .short-mode .save-btn {
    width: 118px
}

.age-change-box .save-hidden .short-mode .change-btn {
    width: 280px;
    background: #1593ff
}

.age-change-box .save-show {
    display: flex
}

.save-img-box {
    width: 576px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    opacity: 0;
    display: block
}

.save-img-box .img-content,
.save-img-box .save-content {
    position: relative;
    z-index: 1
}

.save-img-box .img-content {
    text-align: center;
    background-color: #fff
}

.save-img-box .share-preview-info {
    z-index: 1
}

.save-img-box .share-preview-info .save-footer-img-background {
    width: 576px;
    position: absolute;
    height: 176px
}

.save-img-box .share-preview-info .preview-footer {
    height: 176px;
    width: 576px;
    position: relative;
    display: flex;
    background: transparent!important
}

.save-img-box .share-preview-info .preview-footer .qrcode {
    width: 136px;
    height: 136px;
    border-radius: 6px;
    z-index: 1000
}

.save-img-box .share-preview-info .preview-footer .info-box {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.save-img-box .share-preview-info .preview-footer .info-box .info-title {
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333;
    word-wrap: break-word;
    overflow: hidden;
    width: 380px;
    text-align: left;
    margin-bottom: 16px
}

.save-img-box .share-preview-info .preview-footer .info-box .info-tip {
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999;
    text-align: left
}

.save-img-box .type0 .info-box {
    width: 380px
}

.save-img-box .type0 .qrcode {
    margin: 20px
}

.save-img-box .type1 .preview-footer {
    flex-direction: row-reverse;
    justify-content: flex-end
}

.save-img-box .type1 .info-box {
    width: 364px;
    margin-left: 32px;
    margin-right: 28px
}

.save-img-box .type1 .qrcode {
    margin-top: 20px;
    border: 6px solid #eb731f;
    box-sizing: border-box
}

.save-img-box .type2 .preview-footer,
.save-img-box .type2 .save-footer-img-background {
    height: 232px
}

.save-img-box .type2 .info-box {
    position: absolute;
    width: 512px;
    top: 76px;
    left: 32px;
    flex-direction: column-reverse!important;
    align-items: center
}

.save-img-box .type2 .info-box .info-title {
    margin-bottom: 0!important;
    margin-top: 8px!important;
    text-align: center!important
}

.save-img-box .type2 .qrcode {
    position: absolute;
    top: -64px;
    left: 224px
}

.save-img-box .type3 .info-box {
    width: 512px;
    margin-left: 32px
}

.save-img-box .type3 .qrcode {
    position: absolute;
    top: -152px;
    left: 16px
}

.save-img-box-show {
    z-index: 1;
    opacity: 1;
    z-index: 200;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%)
}

.save-img-box-show .box-title {
    width: 288px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    text-align: center;
    color: #774f0d;
    background-color: #ffe257
}

.save-img-box-shadow {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 199;
    top: 0
}

.upload-loading {
    width: 112px;
    height: 112px;
    background: rgba(0, 0, 0, .6);
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.upload-loading img {
    width: 69px;
    height: 34px;
    margin-bottom: 17px
}

.upload-loading span {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff
}

.select-roll {
    height: 100%
}

.select-roll,
.select-roll .select-roll-content-box {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 10000
}

.select-roll .title-box {
    height: 44px;
    line-height: 44px;
    position: relative;
    background: #fafaf8;
    box-shadow: 0 1px 0 0 #e1e0e0
}

.select-roll .title-box .btn-cancel {
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666;
    cursor: pointer;
    float: left;
    margin-left: 16px
}

.select-roll .title-box .btn-confirm {
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #007aff;
    cursor: pointer;
    float: right;
    margin-right: 16px
}

.select-roll .title-box .title {
    position: absolute;
    left: -34px;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222;
    margin-left: 50%
}

.select-roll .roll-box {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 217px;
    background: #fff;
    box-shadow: 0 1px 0 0 #d0d0d0
}

.select-roll .roll-box .vague-zone-top {
    width: 100%;
    height: 29px;
    background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0));
    position: absolute;
    top: 0;
    z-index: 99
}

.select-roll .roll-box .vague-zone-bottom {
    width: 100%;
    height: 29px;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);
    position: absolute;
    bottom: 0;
    z-index: 99
}

.select-roll .select-zone {
    width: 100%;
    height: 32px;
    position: absolute;
    top: 90px;
    border-top: 2px solid #aba9a2;
    border-bottom: 2px solid #aba9a2
}

.select-roll .option-box {
    position: absolute;
    top: 32px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%)
}

.select-roll .option-box .option-item-selected {
    height: 32px!important;
    font-size: 23px!important;
    color: #292929!important;
    line-height: 32px!important;
    margin: 5px 0
}

.select-roll .option-box .option-item {
    width: 100%;
    height: 29px;
    font-size: 21px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9d9d9d;
    line-height: 29px;
    display: block;
    text-align: center
}

.select-roll-shadow {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999
}

@keyframes outer_circle_move {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@-webkit-keyframes outer_circle_move {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes scanmove {
    0% {
        top: -134px;
        transform: rotate(180deg)
    }
    49% {
        top: 280px;
        transform: rotate(180deg);
        opacity: .4
    }
    50% {
        top: 560px;
        transform: rotate(180deg);
        opacity: 0
    }
    52% {
        top: 280px;
        transform: rotate(0deg);
        opacity: .4
    }
    to {
        top: -134px;
        transform: rotate(0deg)
    }
}

.view-loading .loading_container {
    width: 100%;
    height: 320px;
    position: absolute;
    z-index: 11;
    top: 50%;
    transform: translateY(-50%)
}

.view-loading .grid,
.view-loading .light,
.view-loading .line {
    width: 320px;
    height: 320px;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -160px;
    margin-left: -160px
}

.view-loading .outer_circle img {
    width: 100%;
    height: 100%
}

.view-loading .outer_circle {
    width: 320px;
    height: 320px;
    animation: outer_circle_move 5s infinite linear;
    -webkit-animation: outer_circle_move 5s infinite linear;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    top: 50%;
    left: 50%;
    margin-top: -160px;
    margin-left: -160px;
    position: absolute
}

.view-loading .inner_circle {
    width: 156px;
    height: 156px;
    margin-top: -78px;
    margin-left: -78px;
    position: absolute;
    top: 50%;
    left: 50%
}

.view-loading .line-move {
    width: 320px;
    height: 320px;
    margin-top: -160px;
    margin-left: -160px;
    position: absolute;
    top: 50%;
    left: 50%
}

.view-loading .scan_wrapper {
    position: absolute;
    animation: scanmove 5s infinite linear;
    -webkit-animation: scanmove 5s infinite linear
}

.view-loading .scan {
    width: 286px;
    height: 134px;
    background: linear-gradient(0deg, rgba(0, 228, 255, 0), #00e4ff);
    opacity: .2
}

.view-loading .scan_line {
    position: absolute;
    top: -1px;
    width: 100%
}

.view-loading .inner_wrapper {
    width: 244px;
    height: 244px;
    margin-top: -122px;
    margin-left: -122px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    overflow: hidden
}

.view-loading .persent {
    position: absolute;
    top: 50%;
    height: 48px;
    width: 70px;
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #fff;
    line-height: 48px;
    left: 50%;
    margin-top: -24px;
    margin-left: -35px;
    text-align: center
}

.view-loading .desc {
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #00e4ff;
    line-height: 22px;
    width: 100%;
    text-align: center
}

.view-loading .loading__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    margin: 0;
    padding: 0;
    opacity: .85;
    overflow: hidden;
    z-index: 10
}

.view-toast {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999
}

.view-toast .msg-box {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    display: inline-block
}

.view-toast .msg-box .warn-icon {
    margin-right: 2px;
    width: 16px;
    height: 16px
}

.merge-content {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: round
}

.merge-content .shadow-tip {
    z-index: 1000;
    display: none;
    position: absolute;
    width: 100%;
    height: 32px;
    background: #000;
    opacity: .6;
    text-align: center;
    line-height: 32px
}

.merge-content .shadow-tip span {
    color: #fff;
    font-size: 12px;
    opacity: 1
}

.merge-content .portraits-content {
    position: relative
}

.merge-content .portraits-content .portraits-body,
.merge-content .portraits-content .portraits-face {
    position: absolute;
    display: block
}

.merge-content .save-btn {
    z-index: 1000000;
    background-size: cover;
    cursor: pointer;
    display: none;
    line-height: 44px;
    text-align: center;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    width: 260px;
    height: 44px;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    bottom: 4.2%;
    background-repeat: no-repeat
}

.merge-content .type0 {
    background: #fff;
    border: 1px solid #1593ff;
    color: #1593ff
}

.merge-content .type1 {
    background-image: url(//as.eqh5.com/h5_view_2/images/type1_btn-156dce.png);
    color: #eb731f
}

.merge-content .type2 {
    background: #fad647;
    color: #774f0d
}

.merge-content .type3 {
    background-image: url(//as.eqh5.com/h5_view_2/images/type3_btn-483352.png);
    color: #005c80
}

.info-bubble {
    position: absolute
}

.info-bubble-content {
    height: 44px;
    position: relative;
    top: -56px;
    left: -29px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.info-bubble-content p {
    margin: 0 6px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff
}

.info-bubble-content:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid;
    border-color: transparent;
    top: 44px;
    left: 28px
}

.info-bubble-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .25);
    position: absolute;
    line-height: 6px;
    text-align: center;
    top: 0
}

.info-bubble-circle-inside {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 2px
}

.info-bubble-save {
    position: absolute
}

.info-bubble-save .info-bubble-content {
    height: 88px;
    top: -112px;
    left: -58px;
    border-radius: 16px
}

.info-bubble-save .info-bubble-content p {
    margin: 0 12px;
    font-size: 24px
}

.info-bubble-save .info-bubble-content .info-bubble-content:after {
    border: 16px solid;
    top: 88px;
    left: 56px
}

.info-bubble-save .info-bubble-circle {
    width: 24px;
    height: 24px;
    line-height: 12px
}

.info-bubble-save .info-bubble-circle .info-bubble-circle-inside {
    width: 10px;
    height: 10px;
    border-radius: 4px
}

.pink-bubble .info-bubble-content {
    background-color: #f3c2cc
}

.pink-bubble .info-bubble-content:after {
    border-top-color: #f3c2cc
}

.grey-bubble .info-bubble-content {
    background-color: #9ea5b6
}

.grey-bubble .info-bubble-content:after {
    border-top-color: #9ea5b6
}

.orange-bubble .info-bubble-content {
    background-color: #fac582
}

.orange-bubble .info-bubble-content:after {
    border-top-color: #fac582
}

.blue-bubble .info-bubble-content {
    background-color: #80c4ff
}

.blue-bubble .info-bubble-content:after {
    border-top-color: #80c4ff
}

.yellow-bubble .info-bubble-content {
    background-color: #edd774
}

.yellow-bubble .info-bubble-content:after {
    border-top-color: #edd774
}

.eqx-location {
    color: #404449;
    line-height: inherit;
    padding: 5px 15px;
    margin: 0;
    width: 100%;
    height: 100%;
    word-wrap: break-word
}

.eqx-location .eqx-comp__top-right-tip {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #f69226;
    line-height: 18px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
    text-align: center
}

.eqx-location__container {
    white-space: nowrap;
    overflow: hidden
}

.catalogue-style .catalogue-change-container .multi-level-list {
    width: 100%;
    height: 100%;
    padding: 16px 0 11px;
    box-sizing: border-box
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group {
    width: 100%;
    min-height: 42px;
    position: relative;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .catalogue-bar {
    display: none
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group.multi-group-edit:hover {
    border: 1px solid #1593ff;
    box-sizing: border-box
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group.multi-group-edit:hover .catalogue-bar {
    width: 126px;
    height: 24px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: -23px;
    right: 0;
    z-index: 1
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group.multi-group-edit:hover .catalogue-bar span {
    display: inline-block;
    width: 40px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #000;
    border-radius: 3px;
    opacity: .9;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group.multi-group-edit:hover .catalogue-pic-bar {
    position: absolute;
    bottom: -30px;
    right: 0
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level {
    width: 100%;
    min-height: 42px;
    line-height: 42px;
    padding: 0 15px 0 0;
    box-sizing: border-box;
    display: flex;
    flex-flow: nowrap
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level span {
    display: inline-block
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level .switch {
    padding-left: 15px;
    display: inline-block;
    flex-shrink: 0;
    min-width: 20px;
    margin: auto
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level .name {
    margin-left: 20px;
    display: inline-block;
    flex-shrink: 0;
    max-width: 200px
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level .dashed {
    display: inline-block;
    margin: auto 4px;
    width: 100%;
    height: 0;
    flex-shrink: 1;
    border-bottom: 1px dashed #979797
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level .jump-page {
    margin: auto;
    min-height: 42px;
    display: inline-block;
    width: 20px;
    flex-shrink: 0
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-two-level {
    width: 100%;
    min-height: 42px;
    line-height: 42px;
    padding: 0 15px 0 0;
    box-sizing: border-box;
    display: flex;
    flex-flow: nowrap
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-two-level .switch {
    padding-left: 30px;
    display: inline-block;
    flex-shrink: 0;
    min-width: 20px;
    margin: auto
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-two-level .name {
    margin-left: 20px;
    display: inline-block;
    flex-shrink: 0;
    max-width: 200px
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-two-level .dashed {
    display: inline-block;
    margin: auto 4px;
    width: 100%;
    height: 0;
    flex-shrink: 1;
    border-bottom: 1px dashed #979797
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-two-level .jump-page {
    margin: auto;
    display: inline-block;
    width: 20px;
    flex-shrink: 0
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-three-level {
    width: 100%;
    min-height: 42px;
    line-height: 42px;
    padding: 0 15px 0 60px;
    box-sizing: border-box;
    display: flex;
    flex-flow: nowrap
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-three-level .switch {
    display: none
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-three-level .name {
    margin-left: 20px;
    display: inline-block;
    flex-shrink: 0;
    max-width: 200px
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-three-level .dashed {
    display: inline-block;
    margin: auto 4px;
    width: 100%;
    height: 0;
    flex-shrink: 1;
    border-bottom: 1px dashed #979797
}

.catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-three-level .jump-page {
    margin: auto;
    display: inline-block;
    width: 20px;
    flex-shrink: 0
}

.catalogue-style .catalogue-change-container .multi-level-list .display-dom {
    display: none
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group {
    position: relative;
    margin: 24px 0 8px;
    min-height: 41px;
    width: 50%;
    border: 1px solid transparent
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group .catalogue-bar {
    display: none
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover {
    border: 1px solid #1593ff
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover .catalogue-bar {
    width: 126px;
    height: 24px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: -25px;
    right: 0;
    z-index: 1
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover .catalogue-bar span {
    display: inline-block;
    width: 40px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #000;
    border-radius: 3px;
    opacity: .9;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover.multi-group-edit:first-child #delete-catalogue {
    visibility: hidden
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover.multi-group-edit:first-child .catalogue-time-bar {
    position: absolute;
    bottom: -24px;
    right: -42px
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover.multi-group-edit:nth-child(2n) .catalogue-time-bar {
    position: absolute;
    bottom: -24px;
    left: 0
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group .time-group-every {
    width: 100%;
    height: 100%;
    padding: 6px 9px 0 0;
    text-align: right
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group .time-group-every .name {
    width: 80%;
    margin-left: 20%;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group .time-group-every .time {
    margin-top: 4px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999;
    line-height: 17px
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group .time-node {
    position: absolute;
    top: 50%;
    right: -1px;
    z-index: 100;
    transform: translate(50%, -50%);
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    background: #333;
    border-radius: 50%
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.time-axis-group:nth-child(2n) {
    margin: 24px 0 8px 50%
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.time-axis-group:nth-child(2n) .time-group-every {
    width: 100%;
    height: 100%;
    padding: 6px 0 0 9px;
    text-align: left
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.time-axis-group:nth-child(2n) .time-group-every .name {
    width: 80%;
    margin: 0;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.time-axis-group:nth-child(2n) .time-group-every .time {
    margin-top: 4px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999;
    line-height: 17px
}

.catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.time-axis-group:nth-child(2n) .time-node {
    position: absolute;
    top: 50%;
    left: -1px;
    z-index: 100;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    background: #333;
    border-radius: 50%
}

.catalogue-style .catalogue-change-container .multi-level-list .group-click {
    border: 1px solid #1593ff;
    box-sizing: border-box
}

.catalogue-style .catalogue-change-container .pic-level-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group {
    width: 31.25%;
    margin-right: 3%;
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group .catalogue-bar {
    display: none
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group.multi-group-edit:hover {
    border: 1px solid #1593ff
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group.multi-group-edit:hover .catalogue-bar {
    width: 126px;
    height: 24px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: -25px;
    right: 0;
    z-index: 1
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group.multi-group-edit:hover .catalogue-bar span {
    display: inline-block;
    width: 40px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #000;
    border-radius: 3px;
    opacity: .9;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group.multi-group-edit:hover.multi-group-edit:first-child #delete-catalogue {
    visibility: hidden
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group.multi-group-edit:hover.multi-group-edit:nth-child(3n+1) .catalogue-pic-bar {
    position: absolute;
    bottom: -24px;
    left: 0
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group .picture-group-every {
    width: 100%;
    background: #fff;
    flex: 0 1 auto
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group .picture-group-every .pic-style {
    display: block;
    width: 100%
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group .picture-group-every .name {
    position: relative;
    width: 80%;
    display: inline-block;
    min-height: 30px;
    padding: 0 6px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group .picture-group-every .name span {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.catalogue-style .catalogue-change-container .pic-level-list .picture-group.picture-group:last-child,
.catalogue-style .catalogue-change-container .pic-level-list .picture-group.picture-group:nth-child(3n) {
    margin-right: 0
}

.catalogue-style .catalogue-change-container .pic-level-list .group-click {
    border: 1px solid #1593ff;
    box-sizing: border-box
}

.catalogue-style .catalogue-change-container .pic-double-list {
    width: 67%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group {
    width: 47%;
    margin-right: 3%;
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group .catalogue-bar {
    display: none
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group.multi-group-edit:hover {
    border: 1px solid #1593ff
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group.multi-group-edit:hover .catalogue-bar {
    width: 126px;
    height: 24px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: -25px;
    right: 0;
    z-index: 1
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group.multi-group-edit:hover .catalogue-bar span {
    display: inline-block;
    width: 40px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #000;
    border-radius: 3px;
    opacity: .9;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group.multi-group-edit:hover.multi-group-edit:first-child #delete-catalogue {
    visibility: hidden
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group.multi-group-edit:hover.multi-group-edit:nth-child(odd) .catalogue-pic-bar {
    position: absolute;
    bottom: -24px;
    left: 0
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group .picture-group-every {
    width: 100%;
    background: #fff;
    flex: 0 1 auto
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group .picture-group-every .pic-style {
    display: block;
    width: 100%
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group .picture-group-every .name {
    position: relative;
    width: 80%;
    display: inline-block;
    min-height: 30px;
    padding: 0 6px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group .picture-group-every .name span {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.catalogue-style .catalogue-change-container .pic-double-list .picture-group.picture-group:nth-child(2n) {
    margin-right: 0
}

.catalogue-style .catalogue-change-container .pic-double-list .group-click {
    border: 1px solid #1593ff;
    box-sizing: border-box
}

.catalogue-style .catalogue-change-container .time-axis-line {
    width: 2px;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000
}

.comp-weather .comp-style-type {
    width: 100%;
    height: 100%
}

.comp-weather .comp-style-type.style-type-1 {
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    line-height: 14px
}

.comp-weather .comp-style-type.style-type-1 .left {
    display: flex;
    flex-direction: column
}

.comp-weather .comp-style-type.style-type-1 .left .temprature {
    display: flex;
    margin-bottom: 8px
}

.comp-weather .comp-style-type.style-type-1 .left .temprature .num {
    line-height: 36px;
    font-size: 32px;
    font-weight: 500
}

.comp-weather .comp-style-type.style-type-1 .right {
    display: flex;
    flex-direction: column
}

.comp-weather .comp-style-type.style-type-1 .right>img {
    width: 36px;
    height: 36px;
    margin-bottom: 8px
}

.comp-weather .comp-style-type.style-type-1 .right .weather {
    text-align: center
}

.comp-weather .comp-style-type.style-type-2 {
    padding-left: 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 14px
}

.comp-weather .comp-style-type.style-type-2 .temprature {
    display: flex;
    margin-top: -2px
}

.comp-weather .comp-style-type.style-type-2 .temprature .num {
    font-size: 20px;
    font-weight: 500;
    line-height: 20px
}

.comp-weather .comp-style-type.style-type-2 .weather {
    margin-left: 9px
}

.comp-weather .comp-style-type.style-type-2 .line {
    margin-left: 10px;
    margin-right: 8px;
    font-size: 12px
}

.comp-weather .comp-style-type.style-type-3 {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    line-height: 14px
}

.comp-weather .comp-style-type.style-type-3 .top {
    display: flex;
    align-items: flex-end
}

.comp-weather .comp-style-type.style-type-3 .top .temprature {
    display: flex
}

.comp-weather .comp-style-type.style-type-3 .top .temprature .num {
    font-size: 32px;
    font-weight: 500;
    line-height: 48px
}

.comp-weather .comp-style-type.style-type-3 .top .temprature .unit {
    margin-top: 8px;
    font-size: 24px
}

.comp-weather .comp-style-type.style-type-3 .top .weather {
    margin-left: 8px;
    margin-bottom: 11px
}

.comp-weather .comp-style-type.style-type-3 .location {
    margin-top: 8px
}

.comp-weather .comp-style-type.style-type-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.comp-weather .comp-style-type.style-type-4 .temprature {
    position: relative
}

.comp-weather .comp-style-type.style-type-4 .temprature .num {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px
}

.comp-weather .comp-style-type.style-type-4 .temprature .unit {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    font-size: 24px
}

.comp-weather .comp-style-type.style-type-4 .location {
    font-size: 12px;
    line-height: 12px;
    margin-top: 4px
}

.comp-weather .comp-style-type.style-type-4>img {
    width: 32px;
    height: 32px;
    margin-top: 17px
}

.comp-weather .comp-style-type.style-type-5 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 14px;
    font-family: Zhankukuaileti
}

.comp-weather .comp-style-type.style-type-5 .temprature {
    display: flex
}

.comp-weather .comp-style-type.style-type-5 .temprature .num {
    font-size: 32px;
    font-weight: 500;
    line-height: 48px
}

.comp-weather .comp-style-type.style-type-5 .temprature .unit {
    margin-top: 12px;
    margin-left: 4px;
    width: 14px;
    height: 14px
}

.comp-weather .comp-style-type.style-type-5 .location-icon {
    font-size: 14px;
    margin-right: 4px
}

.comp-weather .comp-style-type.style-type-5>img {
    width: 36px;
    height: 36px;
    margin-left: 31px
}

.comp-weather .comp-style-type.style-type-6 {
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 14px
}

.comp-weather .comp-style-type.style-type-6 .wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

.comp-weather .comp-style-type.style-type-6 .wrapper .left {
    display: flex;
    align-items: flex-end
}

.comp-weather .comp-style-type.style-type-6 .wrapper .left .temprature {
    display: flex
}

.comp-weather .comp-style-type.style-type-6 .wrapper .left .temprature .num {
    line-height: 26px;
    font-size: 32px;
    font-weight: 500
}

.comp-weather .comp-style-type.style-type-6 .wrapper .left .temprature .unit {
    margin-left: 3px;
    margin-top: 3px;
    font-size: 24px;
    width: 8px;
    text-align: center
}

.comp-weather .comp-style-type.style-type-6 .wrapper .left .weather {
    margin-left: 4px
}

.comp-weather .comp-style-type.style-type-6 .wrapper .right {
    display: flex
}

.comp-weather .comp-style-type.style-type-6 .wrapper .right .location-icon {
    font-size: 14px;
    margin-right: 4px
}

.comp_paragraph {
    font-size: 24px;
    color: #404449;
    line-height: inherit;
    padding: .3em 15px;
    margin: 0;
    width: 100%;
    height: 100%;
    word-wrap: break-word
}

.comp_paragraph a {
    color: inherit;
    text-decoration: inherit
}

.wsite-text a {
    display: inline
}

#report0 {
    width: 260px;
    position: absolute;
    left: 50%;
    margin-left: -130px;
    z-index: 999;
    padding-bottom: 20px;
    touch-action: none
}

#report0,
#report1 {
    background-color: #fff
}

#report1 {
    width: 100%;
    height: 40%;
    top: 20%;
    z-index: 1000;
    position: relative
}

#report2 {
    width: 100%;
    background-color: #f66;
    color: #fff;
    text-align: center;
    padding: 15px 0
}

#report2 h1 {
    font-size: 16px;
    margin-top: 10px
}

#report3 {
    margin-top: 20px;
    width: 100%;
    text-align: center
}

#report3 ul li {
    font-size: 15px;
    line-height: 40px
}

#report3 li.active span {
    color: #f66;
    background: url(//as.eqh5.com/h5_view_2/images/jubao_07-674ee2.png) no-repeat 100%;
    padding-right: 20px;
    background-size: 15px
}

#report4 {
    text-align: center;
    margin-top: 10px
}

#report4 a {
    display: block;
    width: 140px;
    height: 30px;
    margin: auto;
    line-height: 30px;
    font-size: 14px;
    border-radius: 3px;
    background-color: #f66;
    color: #fff;
    text-align: center
}

.report_landscape {
    top: 105px!important;
    left: 160px!important;
    height: 260px!important;
    width: 260px!important;
    overflow-x: scroll!important;
    padding: 0!important
}

.report_landscape #report2,
.report_landscape #report3,
.report_landscape #report4 {
    transform: rotate(90deg) translateZ(0);
    position: absolute;
    width: 260px!important
}

.report_landscape #report2 {
    top: 75px!important;
    right: -75px!important;
    height: 109px;
    box-sizing: border-box
}

.report_landscape #report3 {
    top: -30px!important;
    right: 118px
}

.report_landscape #report4 {
    top: 105px!important
}

.report_landscape #report1 {
    top: 0!important;
    height: 100%;
    overflow-y: hidden
}

.comp_drop_down {
    position: relative;
    padding: 0 8px
}

.comp_drop_down:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px;
    border-color: #676767 transparent transparent;
    right: 8px
}

.comp_drop_down .comp_drop_down_select {
    background: inherit;
    border: none;
    font-size: 16px;
    -webkit-appearance: none;
    padding-left: 0
}

.comp_drop_down .comp_drop_down_select .comp_select_option {
    letter-spacing: 0;
    text-decoration: none;
    font-style: normal;
    font-size: 12px;
    color: #676767
}

.comp_input {
    width: 240px;
    height: 36px;
    background: transparent;
    border: none;
    padding: 8px!important;
    font-weight: 400;
    font-size: 16px
}

.comp_input::-webkit-input-placeholder {
    color: inherit;
    font-size: 16px
}

.comp_input:focus {
    border: none
}

.wsite-input .element-box {
    color: #676767;
    border: 1px solid #ccc;
    border-radius: 5px
}

.date-icon {
    position: absolute;
    top: calc(50% - 18px);
    right: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.hide-date {
    display: none
}

.nr .comp_rating {
    width: 240px;
    background: transparent;
    border: 0;
    padding: 8px!important;
    font-size: 16px
}

.nr .comp_rating .rating-icons,
.nr .comp_rating .rating-title {
    display: inline-block;
    padding: 5px;
    vertical-align: top
}

.nr .comp_rating .rating-icons,
.nr .comp_rating .rating-title {
    display: inline-block;
    padding: 5px;
    padding-left: 0;
    vertical-align: top
}

.nr .comp_rating .rating-icons {
    padding-right: 0
}

.nr .comp_rating .rating-icons i {
    margin-right: 5px
}

.nr .comp_rating .rating-icons i:last-child {
    margin-right: 0
}

.nr .comp_rating .rating-icons i.rating-l {
    font-size: 18px
}

.nr .comp_rating .rating-icons i.rating-m {
    font-size: 15px
}

.nr .comp_rating .rating-icons i.rating-s {
    font-size: 12px
}

.comp_radio {
    width: 240px;
    background: transparent;
    border: 0;
    font-size: 16px
}

.comp_radio .radio-title {
    min-height: 36px;
    padding: 8px
}

.comp_radio .options {
    background: #fff;
    height: 100%;
    color: #76838f
}

.comp_radio .options .option-group {
    padding: 7px 0;
    margin: 0 8px;
    line-height: 18px;
    border-bottom: 1px solid #59c7f9
}

.comp_radio .options .option-group:last-child {
    border-bottom: none
}

.comp_radio .options .option-group .option-label {
    font-size: 12px;
    margin-bottom: 0;
    display: inline-block
}

.comp_radio .options .option-group .option-label input {
    vertical-align: middle;
    margin-right: 5px
}

.red-packet-receive-fail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 999999
}

.red-packet-receive-fail__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 244px;
    background: #fff;
    border-radius: 12px;
    padding: 51px 0 32px
}

.red-packet-receive-fail__content .receive-fail-desc {
    font-size: 16px;
    font-weight: 500;
    color: #111;
    line-height: 28px;
    width: 192px;
    text-align: center;
    word-break: break-all;
    margin-bottom: 36px;
    margin-left: auto;
    margin-right: auto
}

.red-packet-receive-fail__content .receive-fail-know-btn {
    width: 130px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 17px;
    color: #333;
    background: url(//as.eqh5.com/h5_view_2/images/knowBg-ff1b51.png) 50% no-repeat;
    background-size: 100% 100%;
    margin: auto;
    cursor: pointer
}

.red-packet-receive-fail__content img.receive-fail-logo {
    position: absolute;
    top: -50px;
    width: 160px;
    height: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1
}

.red-packet-receive-success {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 999999
}

.red-packet-receive-success__ct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.red-packet-receive-success__ct .open-red-packet-content {
    width: 256px;
    height: 350px;
    background: url(//as.eqh5.com/h5_view_2/images/openRedpacketbg-5e6ec0.png) 50% no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;
    padding-top: 86px
}

.red-packet-receive-success__ct .open-red-packet-content .red-packet-congratulation {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #ebcd99;
    margin: auto;
    text-align: center
}

.red-packet-receive-success__ct .open-red-packet-content .open-red-packet {
    width: 88px;
    height: 88px;
    background: url(//as.eqh5.com/h5_view_2/images/openRedpacket-1bcc6f.png) 50% no-repeat;
    background-size: 100% 100%;
    margin-top: 89px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto
}

.red-packet-receive-success__ct .open-red-packet-close-btn {
    margin: auto;
    width: 32px;
    height: 32px;
    font-size: 32px;
    color: #ebcd99;
    line-height: 32px;
    cursor: pointer
}

.red-packet-receive-success .receive-money-head-bg {
    width: 100%
}

.red-packet-receive-success .receive-money-congratulation {
    margin-top: 24px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #111;
    line-height: 28px
}

.red-packet-receive-success .receive-money-num {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #f25b4a
}

.red-packet-receive-success .receive-money-num .money-num {
    font-size: 48px;
    font-weight: 500;
    line-height: 67px;
    margin-right: 4px
}

.red-packet-receive-success .receive-money-num .unit {
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 12px
}

.red-packet-receive-success .receive-tip {
    margin-top: 12px;
    font-size: 13px;
    color: #cfac74;
    line-height: 18px;
    text-align: center
}

.red-packet-receive-success .receive-money-know-btn {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    width: 124px;
    height: 44px;
    background: #f2eeee;
    border-radius: 2px;
    text-align: center;
    line-height: 44px;
    font-size: 14px;
    color: #cfac74;
    cursor: pointer
}

.special-red-packet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 999999;
    transform: translateZ(0)
}

.special-red-packet.red-packet-rain {
    background: url(//as.eqh5.com/h5_view_2/images/redpacketRainBg-16c27a.png) top no-repeat;
    background-size: cover
}

.special-red-packet__close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, .6);
    z-index: 2;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    cursor: pointer
}

.special-red-packet__ct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1
}

.special-red-packet__ct.red-packet-rain {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    overflow: hidden
}

.special-red-packet__ct__content {
    width: 244px;
    height: 332px;
    position: relative
}

.special-red-packet__ct__content img.red-packet {
    cursor: pointer;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.special-red-packet .red-packet-rain-item {
    cursor: pointer
}

@keyframes red-packet-rain-drop-right-rotate {
    0% {
        top: -100px;
        transform: rotate(30deg)
    }
    to {
        top: 110%;
        transform: rotate(120deg)
    }
}

@keyframes red-packet-rain-drop-left-rotate {
    0% {
        top: -100px;
        transform: rotate(-30deg)
    }
    to {
        top: 110%;
        transform: rotate(-120deg)
    }
}

.privacy-policy-info {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    border-radius: 16px 16px 0 0;
    z-index: 9999999
}

.privacy-policy-info.landScape-scene {
    transform: translateZ(0) rotate(90deg);
    -webkit-transform: translateZ(0) rotate(90deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    bottom: 100%
}

.privacy-policy-info.landScape-scene .privacy-policy-info__content {
    padding: 16px 32px 2px
}

.privacy-policy-info__header {
    height: 48px;
    position: relative
}

.privacy-policy-info__header .title {
    text-align: center;
    line-height: 48px;
    font-size: 14px;
    font-weight: 500;
    color: #333
}

.privacy-policy-info__header .return-btn {
    position: absolute;
    top: 12px;
    left: 16px;
    font-size: 24px;
    color: #333;
    cursor: pointer
}

.privacy-policy-info__content_ct {
    height: calc(100% - 48px);
    overflow: scroll
}

.privacy-policy-info__content {
    padding: 16px 16px 2px
}

.privacy-policy-info__content .headline {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 26px
}

.privacy-policy-info__content .privacy-policy-main {
    margin-top: 16px
}

.privacy-policy-info__content .privacy-policy-main p {
    font-size: 15px;
    line-height: 1.7;
    text-align: left!important;
    color: #333
}

.privacy-policy-info__content .privacy-policy-main .bold-text {
    font-weight: 600
}

.privacy-policy-info__content .privacy-policy-main .underline {
    text-decoration: underline
}

.privacy-policy-info__content .privacy-policy-main .line-wrap {
    margin-bottom: 25px
}

.comp_sms .telephone {
    width: 100%;
    height: 44%;
    padding: 8px;
    font-size: 16px
}

.comp_sms .telephone::-webkit-input-placeholder {
    color: inherit;
    font-size: 16px
}

.comp_sms .smsInput {
    width: 50%;
    height: 44%;
    padding: 8px;
    font-size: 16px
}

.comp_sms .smsInput::-webkit-input-placeholder {
    color: inherit;
    font-size: 16px
}

.comp_sms .smsButton {
    -webkit-appearance: none;
    float: right;
    color: #666;
    width: 42%;
    height: 44%;
    font-size: 12px;
    background: #ebebeb;
    border: none;
    border-radius: 0
}

.comp_formRandom {
    position: relative;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto
}

.comp_formRandom .default-content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -70px;
    margin-top: -73px
}

.comp_formRandom .default-content img {
    width: 100px;
    height: 110px
}

.comp_formRandom .default-content p {
    margin-top: 15px
}

.comp_formRandom .default-content.hide {
    display: none
}

.comp_formRandom iframe {
    width: 100%;
    height: 100%
}

.comp_formRandom iframe.hide {
    display: none
}

.comp_wechat_hear,
.comp_wechat_play {
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px
}

.recording {
    background-color: #ccc
}

.voice-panel {
    position: absolute;
    width: 120px;
    height: 110px;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    z-index: 1000;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -120px;
    padding-top: 10px;
    text-align: center;
    border-radius: 5px;
    font-size: 70px
}

.voice-panel .icon {
    font-size: 60px
}

.voice-panel .voice-tip {
    font-size: 12px
}

.vote-view {
    font-size: 12px;
    padding-bottom: 30px
}

.vote-view .vote-view-title {
    font-size: 14px;
    color: #37474f;
    background-color: #f0f3f4;
    line-height: 20px;
    padding: 5px 10px;
    border: 1px solid #ccd5db;
    word-break: break-all;
    white-space: pre-wrap
}

.vote-view .vote-view-options {
    position: relative;
    border-left: 1px solid #ccd5db;
    border-right: 1px solid #ccd5db
}

.vote-view .vote-view-options .vote-view-option {
    position: relative;
    padding: 6px 10px;
    cursor: pointer;
    line-height: 20px;
    word-break: break-all;
    white-space: pre-wrap
}

.vote-view .vote-view-options .vote-view-option span {
    color: #8cdfb3;
    display: inline-block;
    padding-right: 5px;
    width: 17px;
    height: 20px;
    float: left
}

.vote-view .vote-view-options .vote-view-option:hover {
    background-color: #f7f7f7
}

.vote-view .vote-view-options .vote-view-option:last-child {
    border-bottom: none
}

.vote-view .vote-view-option,
.vote-view .vote-view-title {
    border-bottom: 1px solid #e7e7e7
}

.vote-view .vote-view-text {
    width: calc(100% - 17px)
}

.vote-view .vote-view-button {
    text-align: center;
    border: 1px solid #ccd5db;
    color: #fff;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.vote-view .vote-view-button:hover {
    background-color: #56c6ff
}

.vote-alert {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3);
    z-index: -2;
    text-align: center;
    transition: all .3s ease-in-out 0s
}

.vote-alert span {
    background-color: #fff;
    padding: 10px 15px;
    top: 50%;
    margin-top: -16px;
    left: 50%;
    margin-left: -75px;
    position: absolute;
    display: block
}

.vote-img {
    height: 100%;
    width: 100%;
    position: relative;
    border: 1px solid #ccd5db
}

.vote-img .vote-img-prev-title {
    width: 100%;
    background-color: #f0f3f4;
    border-bottom: 1px solid #ccd5db;
    height: 40px
}

.vote-img .vote-img-prev-title h1 {
    font-size: 14px;
    color: #37474f;
    line-height: 20px;
    padding: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 250px;
    float: left;
    border: none;
    margin: 0
}

.vote-img .vote-img-prev-title .vote-img-sing-double {
    float: left;
    line-height: 40px
}

.vote-img a.btn-main {
    background-color: #08a1ef;
    width: 100%;
    text-align: center;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #ccd5db
}

.vote-img a.btn-main:hover {
    background-color: #56c6ff
}

.vote-img .slides {
    position: relative;
    padding-bottom: 5px;
    height: 365px
}

.vote-img .slides .vote-img-desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 24px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 5px
}

.vote-img .slides .vote-img-desc li {
    position: relative;
    font-size: 12px;
    display: none
}

.vote-img .slides .slidesjs-container {
    position: relative;
    margin-bottom: 5px
}

.vote-img .slides .slidesjs-container span {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    font-size: 18px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 21px
}

.vote-img .slides .slidesjs-container span.active {
    color: #08a1ef
}

.vote-img .slides .slidesjs-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 10px;
    height: 10px
}

.vote-img .slides .slidesjs-pagination li {
    position: relative;
    display: inline-block;
    font-size: 0
}

.vote-img .slides .slidesjs-pagination li a {
    width: 5px;
    height: 5px;
    display: inline-block;
    background-color: #f0f3f4;
    border-radius: 50%;
    margin-right: 5px!important;
    text-indent: 9999px
}

.vote-img .slides .slidesjs-pagination li a.active {
    background-color: #08a1ef
}

.vote-img .slides__landscape {
    height: 208px
}

.vote-img .slides__landscape .vote-img-desc {
    justify-content: start;
    padding: 0 10px
}

.vote-img .vote-img-ul {
    position: relative;
    border-left: 1px solid #ccd5db;
    border-right: 1px solid #ccd5db
}

.vote-img .vote-img-ul .vote-img-li {
    position: relative;
    padding: 6px 10px;
    cursor: pointer;
    line-height: 20px
}

.vote-img .vote-img-ul .vote-img-li:hover {
    background-color: #f7f7f7
}

.vote-img .vote-img-ul .vote-img-li:last-child {
    border-bottom: none
}

.vote-img .vote-img-li,
.vote-img h1 {
    border-bottom: 1px solid #e7e7e7
}

.board-pen {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    cursor: pointer;
    background: #59c7f9;
    color: #fff;
    text-align: center;
    line-height: 24px;
    transform: translateZ(0);
    z-index: 2
}

.board-pen:hover {
    background-color: #08a1ef
}

.board-close {
    transform: translateZ(0);
    z-index: 2;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 24px;
    width: 24px;
    font-size: 14px;
    background: #ccd5db;
    text-align: center;
    line-height: 24px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer
}

.board-close:hover {
    background-color: #ff7e7e
}

.boarding {
    cursor: url(//as.eqh5.com/h5_view_2/images/pen2-2cac50.svg), auto
}

.board-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .9);
    z-index: 10
}

.board-bg span {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -34px;
    font-size: 14px
}

.board-btn {
    position: absolute;
    bottom: 0;
    width: 50%;
    line-height: 25px;
    height: 25px;
    font-size: 12px;
    text-align: center;
    border: 1px solid #e6ebed;
    transform: translateZ(0);
    z-index: 2
}

.board-reset {
    left: 0;
    background-color: #e6ebed
}

.board-end {
    right: 0;
    color: #fff;
    background-color: #59c7f9;
    border-color: #59c7f9
}

.board-end:hover {
    color: #fff;
    background-color: #08a1ef;
    border-color: #08a1ef
}

.element-pip-button {
    width: 100%;
    height: 100%
}

.element-pip-button>div {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.element-pip-button>div.back {
    display: none
}

.game-turntable-box {
    width: inherit;
    height: inherit;
    padding-top: 40px;
    position: relative
}

.game-turntable-box .silk-bag {
    position: absolute;
    top: 75px;
    left: 35px;
    cursor: pointer
}

.game-turntable-box .silk-bag img {
    width: 50px
}

.turntable-box {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 70px auto 0;
    border-radius: 50%
}

.turntable-box img {
    width: 300px
}

.turntable-container {
    position: absolute;
    left: 36px;
    top: 36px;
    z-index: 1;
    width: 230px;
    height: 230px;
    border-radius: inherit;
    background-clip: padding-box;
    background-color: #ffcb3f;
    transition: all 6s ease
}

.turntable-container canvas {
    width: inherit;
    height: inherit;
    border-radius: 50%
}

.turntable-list {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    z-index: 2
}

.turntable-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #e4370e;
    font-weight: 700;
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .6)
}

.turntable-item span {
    position: relative;
    display: block;
    padding-top: 20px;
    margin: 0 auto;
    text-align: center;
    -webkit-transform-origin: 50% 115px;
    transform-origin: 50% 115px
}

.turntable-item span em {
    display: block;
    line-height: 14px;
    width: 50px;
    margin: 0 auto
}

.turntable-item span em.prize-len-2,
.turntable-item span em.prize-len-4 {
    width: 100px;
    line-height: 18px
}

.turntable-item span em.prize-len-6,
.turntable-item span em.prize-len-8 {
    width: 80px
}

.turntable-btn {
    position: absolute;
    left: 110px;
    top: 110px;
    z-index: 3;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    color: #f4e9cc;
    background-color: #e44025;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .6);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .6);
    text-decoration: none
}

.turntable-btn img {
    width: 80px;
    position: absolute;
    top: -18px;
    left: 0;
    cursor: pointer
}

.turntable-btn.disabled {
    pointer-events: none;
    background: #b07a7b;
    color: #ccc
}

.turntable-btn.disabled:after {
    border-bottom-color: #b07a7b
}

.gb-run {
    transition: all 6s ease
}

.mask-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    text-align: center;
    transition: all 6s ease
}

.mask-container .mask-close {
    width: 45px;
    height: 45px;
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 32px;
    background: url(//as.eqh5.com/h5_view_2/images/close-a2536b.png) 50% no-repeat;
    background-size: 70%;
    cursor: pointer
}

.mask-container .header {
    display: flex;
    position: relative;
    width: 250px
}

.mask-container .header li {
    line-height: 50px
}

.mask-container .header li:first-child {
    width: 140px
}

.mask-container .header li:nth-child(2) {
    width: 110px
}

.mask-container .header li a {
    display: block;
    font-size: 18px;
    color: #fff
}

.mask-container .mask-btn {
    margin-top: 20px;
    width: 200px;
    height: 46px;
    line-height: 46px;
    padding: 0;
    background-color: #1593ff;
    color: #fff;
    border: none;
    outline: none
}

.mask-container .mask-btn:active,
.mask-container .mask-btn:hover {
    background-color: #198ae7
}

.mask-container p {
    line-height: 36px;
    font-size: 21px
}

.mask-container img {
    width: 145px
}

.mask-container .win-lottery {
    padding-top: 50px
}

.mask-container .win-lottery img {
    margin: 20px 0
}

.mask-container .win-lottery .level {
    color: #fff500
}

.mask-container .win-lottery .detail {
    font-size: 18px
}

.mask-container .lost-lottery img {
    margin: 80px 0 20px
}

.mask-container .activity-lottery {
    border-top: 1px solid #fff
}

.mask-container .activity-lottery .title {
    width: 75px;
    line-height: 28px;
    color: #526069;
    background-color: #fff;
    font-size: 14px;
    margin-bottom: 10px
}

.mask-container .activity-lottery .explain-container {
    padding: 20px 10px
}

.mask-container .activity-lottery .explain-container .activity-info .prize-list li {
    line-height: 24px;
    text-align: left
}

.mask-container .activity-lottery .explain-container .activity-time {
    margin-top: 20px
}

.mask-container .activity-lottery .explain-container .activity-time p {
    text-align: left;
    font-size: 14px
}

.mask-container .activity-lottery .prize-container {
    position: absolute;
    width: 100%;
    height: 400px;
    bottom: 30px;
    top: 70px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.mask-container .activity-lottery .prize-container .prize-info {
    margin: 0 auto 20px;
    width: 260px;
    min-height: 80px;
    border: 2px solid #fff;
    padding-top: 16px;
    text-align: left;
    position: relative
}

.mask-container .activity-lottery .prize-container .prize-info .ticket-img {
    width: 35px;
    height: 32px;
    background: url(//as.eqh5.com/h5_view_2/images/ticket-4f973c.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: -2px;
    left: -2px
}

.mask-container .activity-lottery .prize-container .prize-info .code-period,
.mask-container .activity-lottery .prize-container .prize-info .isEmptyAward {
    margin-left: 12px;
    line-height: 18px;
    font-size: 14px
}

.mask-container .activity-lottery .prize-container .prize-info .code-period {
    font-size: 12px
}

.mask-container .arrow {
    margin-top: 20px;
    width: 70px;
    height: 3px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 35px
}

.mask-container .arrow.detail {
    left: 45px
}

.mask-container .arrow.my-prize {
    left: 145px
}

.mask-container .arrow:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #fff;
    width: 0;
    right: 0;
    margin: auto
}

.lottery-container {
    padding-top: 20px;
    line-height: 36px;
    text-align: center;
    font-size: 20px;
    letter-spacing: 3px
}

.lottery-container p {
    color: #fcfaf8
}

.lottery-container p,
.lottery-container span {
    text-shadow: #ed3835 -1px -1px 0, #ed3835 0 -1px 0, #ed3835 1px -1px 0, #ed3835 1px 0 0, #ed3835 1px 1px 0, #ed3835 0 1px 0, #ed3835 -1px 1px 0, #ed3835 -1px 0 0!important
}

.lottery-container span {
    display: inline-block;
    color: #fff500
}

@keyframes landRotate {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(100turn)
    }
}

@-webkit-keyframes landRotate {
    0% {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(100turn)
    }
}

@keyframes eggRotate {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(-100turn)
    }
}

@-webkit-keyframes eggRotate {
    0% {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(-100turn)
    }
}

@keyframes zIndex {
    0% {
        z-index: 1
    }
    25% {
        z-index: -1
    }
    55% {
        z-index: -1
    }
    75% {
        z-index: 1
    }
}

@-webkit-keyframes zIndex {
    0% {
        z-index: 1
    }
    25% {
        z-index: -1
    }
    55% {
        z-index: -1
    }
    75% {
        z-index: 1
    }
}

@keyframes hammer {
    50% {
        transform: rotate(15deg)
    }
}

@-webkit-keyframes hammer {
    50% {
        -webkit-transform: rotate(15deg)
    }
}

.game-box {
    width: inherit;
    height: inherit;
    overflow: hidden;
    background: url(//as.eqh5.com/h5_view_2/images/bg-egg-3ed006.jpg) no-repeat;
    position: relative
}

.game-box .silk-bag {
    position: absolute;
    top: 75px;
    left: 35px;
    z-index: 10;
    cursor: pointer
}

.game-box .silk-bag img {
    width: 50px
}

.game-box .stage {
    position: relative;
    width: 100%;
    height: 470px;
    overflow: hidden
}

.game-box .stage img.tray {
    margin-top: 10px;
    width: 100%;
    height: 100%
}

.game-box .land-box {
    width: 320px;
    height: 320px;
    position: absolute;
    bottom: 7%;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    animation: landRotate 1000s linear;
    -webkit-animation: landRotate 1000s linear;
    -moz-animation: landRotate 1000s linear;
    -o-animation: landRotate 1000s linear
}

.game-box .egg.pause,
.game-box .land-box.pause {
    -webkit-animation: none!important;
    animation: none!important;
    -o-animation: none!important
}

.game-box .egg {
    width: 150px;
    height: 174px;
    transform-origin: center;
    -webkit-transform-origin: center;
    background: url(//as.eqh5.com/h5_view_2/images/egg-df3670.png) no-repeat 50%;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 100%
}

.game-box .egg:first-child {
    margin-top: 45%;
    animation: eggRotate 1000s linear, zIndex 10s 0ms infinite linear;
    -webkit-animation: eggRotate 1000s linear, zIndex 10s 0ms infinite linear;
    -moz-animation: eggRotate 1000s linear, zIndex 10s 0ms infinite linear;
    -o-animation: eggRotate 1000s linear, zIndex 10s 0ms infinite linear
}

.game-box .egg:nth-child(2) {
    margin-top: 10%;
    margin-left: 8%;
    animation: eggRotate 1000s linear, zIndex 10s -2.5s infinite linear;
    -webkit-animation: eggRotate 1000s linear, zIndex 10s -2.5s infinite linear;
    -moz-animation: eggRotate 1000s linear, zIndex 10s -2.5s infinite linear;
    -o-animation: eggRotate 1000s linear, zIndex 10s -2.5s infinite linear
}

.game-box .egg:nth-child(3) {
    margin-top: 10%;
    margin-right: 8%;
    animation: eggRotate 1000s linear, zIndex 10s -5.5s infinite linear;
    -webkit-animation: eggRotate 1000s linear, zIndex 10s -5.5s infinite linear;
    -moz-animation: eggRotate 1000s linear, zIndex 10s -5.5s infinite linear;
    -o-animation: eggRotate 1000s linear, zIndex 10s -5.5s infinite linear
}

.game-box .egg-smash {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18%;
    width: 150px;
    max-width: none;
    display: none
}

.game-box .hammer {
    position: absolute;
    z-index: 10;
    left: -30%;
    top: -30%;
    width: 104px;
    display: block;
    max-width: none;
    animation: hammer .5s alternate;
    -webkit-animation: hammer .5s alternate;
    -moz-animation: hammer .5s alternate;
    -o-animation: hammer .5s alternate;
    transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    -ms-transform-origin: bottom left
}

.game-box .lottery-container {
    padding-top: 0
}

.game-scratch-box {
    width: inherit;
    height: inherit;
    overflow: hidden;
    background: url(//as.eqh5.com/h5_view_2/images/homeBg-4fc2a0.jpg) no-repeat
}

.game-scratch-box .main-box {
    width: 320px;
    margin: 70px 0 0 30px;
    text-align: center;
    position: relative
}

.game-scratch-box .main-box .silk-bag {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    cursor: pointer
}

.game-scratch-box .main-box .silk-bag img {
    width: 50px
}

.game-scratch-box .main-box .title-box {
    width: inherit;
    margin-bottom: 30px
}

.game-scratch-box .main-box .title-box img {
    width: inherit
}

.game-scratch-box .main-box .title-down {
    animation: bounceInDown 1s ease 1;
    -webkit-animation: bounceInDown 1s ease 1;
    -moz-animation: bounceInDown 1s ease 1;
    -o-animation: bounceInDown 1s ease 1
}

.game-scratch-box .main-box .draw-area-box {
    width: 280px;
    height: 135px;
    margin: 0 auto;
    position: relative
}

.game-scratch-box .main-box .draw-area-box .draw-area-bg {
    width: inherit;
    height: inherit;
    background: url(//as.eqh5.com/h5_view_2/images/scratchBg-34cd12.png) 50% no-repeat;
    background-size: 100%
}

.game-scratch-box .main-box .draw-area-box .draw-area {
    width: 260px;
    height: 112px;
    position: absolute;
    top: 9px;
    left: 10px;
    background: url(//as.eqh5.com/h5_view_2/images/scratch-a66dec.jpg) 50% no-repeat;
    background-size: 100%
}

.game-scratch-box .main-box .draw-area-box .draw-area .award-result {
    width: inherit;
    height: inherit
}

.game-scratch-box .main-box .draw-area-box .draw-area .award-result .award {
    width: 100%;
    height: 100%;
    background: url(//as.eqh5.com/h5_view_2/images/award-b5952a.jpg) 50% no-repeat;
    background-size: 100%
}

.game-scratch-box .main-box .draw-area-box .draw-area .award-result .award.win-award {
    display: none
}

.game-scratch-box .main-box .draw-area-box .draw-area .award-result .award.win-award p {
    text-align: center;
    color: #fb6e55;
    font-size: 24px;
    padding-top: 70px
}

.game-scratch-box .main-box .draw-area-box .draw-area .award-result .award.lost-award {
    display: none;
    background-image: url(//as.eqh5.com/h5_view_2/images/partic-047f88.jpg)
}

.game-scratch-box .main-box .draw-area-box .draw-area .card-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5
}

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px)
    }
    to {
        -webkit-transform: translateY(0)
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px)
    }
    to {
        -webkit-transform: translateY(0)
    }
}

.nine-square-box #start,
.nine-square-box .prize,
.nine-square-box .start-button,
.square {
    width: 70px;
    height: 70px;
    border-radius: 5px;
    text-align: center
}

.nine-square-box {
    width: inherit;
    height: inherit;
    overflow: hidden;
    background: url(//as.eqh5.com/h5_view_2/images/nineSquareBg-5f7d8d.jpg) no-repeat top;
    background-size: cover
}

.nine-square-box .main-box {
    position: relative;
    width: 320px;
    margin: 70px 0 0 30px;
    padding-top: 60px
}

.nine-square-box .main-box .silk-bag {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    cursor: pointer
}

.nine-square-box .main-box .silk-bag img {
    width: 50px
}

.nine-square-box .lottery-box {
    position: relative;
    width: 290px;
    height: 290px;
    margin: 0 auto
}

.nine-square-box .lottery-box .lottery-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.nine-square-box .lottery-box .nine-square {
    position: absolute;
    z-index: 5;
    width: 320px;
    height: 100%;
    padding: 20px 30px
}

.nine-square-box #start {
    margin: 0 auto;
    display: block;
    text-align: center;
    text-decoration: none
}

.nine-square-box #start img {
    width: 100%;
    height: 100%;
    vertical-align: middle
}

.nine-square-box .prize {
    position: relative;
    background: url(//as.eqh5.com/h5_view_2/images/prizeBg-cee049.png) no-repeat 50%/cover;
    color: #9e3901;
    text-shadow: 1px 1px 2px;
    width: 70px;
    height: 70px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px
}

.nine-square-box .prize .thanks-prize {
    width: 60px;
    height: 60px
}

.nine-square-box .prize .prize-icon {
    margin-top: 5px;
    width: 60px;
    height: 40px
}

.nine-square-box .prize .prize-text {
    color: #fb9f50;
    line-height: 20px;
    font-size: 8px
}

.nine-square-box .prize .prize-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background: rgba(0, 0, 0, .7);
    display: none
}

.nine-square-box .start-button {
    position: relative;
    color: #9e3901;
    text-shadow: 1px 1px 2px;
    width: 70px;
    height: 70px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px
}

.nine-square-box .on .prize-mask {
    display: block
}

.eqx-qrcode canvas,
.eqx-qrcode img {
    width: 100%;
    height: 100%
}

html .word-art * {
    text-shadow: inherit!important
}

.word-art {
    padding: 5px;
    width: 100%
}

.word-art.gradient {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text
}

.word-art.common {
    font-size: 30px;
    letter-spacing: .4em;
    word-spacing: .2em
}

.word-art.word-shadow {
    text-shadow: 0 0 .5em #000
}

.word-art.texture {
    color: transparent
}

.word-art.texture,
.word-art .wa-editor {
    -webkit-background-clip: text;
    background-clip: text;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.word-art .wa-editor {
    position: absolute;
    padding: 5px;
    top: 0;
    left: 0;
    right: 0;
    -webkit-user-select: auto;
    caret-color: #000
}

.speech-rcg {
    height: 100%;
    position: relative
}

.speech-rcg .speech-bg-img {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.speech-rcg .speech-bg-img,
.speech-rcg .speech-bg-video {
    position: absolute;
    height: 100%;
    width: 100%
}

.speech-rcg .speech-bg-video video {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    margin: auto
}

.speech-rcg .speech-play {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.speech-rcg .speech-play .speech-play-icon {
    width: 72px;
    height: 72px;
    border-radius: 36px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: hsla(0, 0%, 100%, .8);
    opacity: .5
}

.speech-rcg .speech-lrc-content {
    height: 100%;
    display: flex;
    justify-content: center
}

.speech-rcg .speech-lrc-content .lrc-position-base {
    position: absolute;
    width: 194px;
    bottom: calc(50% - 8px);
    left: calc(50% - 97px)
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-p {
    position: absolute;
    width: 100%;
    bottom: 0;
    transition-duration: .3s;
    transition-property: transform, height, margin-left
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-p .speech-lrc-p-visual {
    transition-duration: .3s;
    transition-property: transform;
    transform-origin: left bottom
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-p.rotate-left2 {
    transform: rotate(-90deg) rotate(0deg);
    transform-origin: left bottom
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-p.rotate-right2 {
    transform: rotate(90deg) rotate(0deg);
    transform-origin: right bottom
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line {
    position: relative;
    font-size: 16px;
    width: 100%;
    left: 0;
    bottom: 0;
    height: auto;
    transition-property: transform, height;
    transition-duration: .3s;
    transform: rotate(0deg) scale(1) rotate(0deg);
    color: #fff;
    white-space: nowrap;
    padding-top: 4px
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.entry {
    position: absolute;
    width: 100%
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-center {
    transform: scale(.01) rotate(0deg)
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-left {
    transform: scale(.01) rotate(0deg);
    height: 0
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-left.zoom-entry {
    transform: scale(1) rotate(0deg);
    transform-origin: left bottom
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-right {
    transform: scale(.01) rotate(0deg);
    height: 0
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-right.zoom-entry {
    transform: scale(1) rotate(0deg);
    transform-origin: right bottom
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-rotate {
    height: 0
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line .speech-lrc-line-visual {
    transition-duration: .3s;
    transition-property: transform, height;
    transform-origin: left top
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line .speech-lrc-line-visual.rotate-left {
    transform: rotate(90deg) scale(.01) rotate(0deg);
    height: 0;
    transform-origin: left top
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line .speech-lrc-line-visual.rotate-left.zoom-entry {
    height: 1em;
    transform: rotate(0deg) scale(1) rotate(0deg)
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line .speech-lrc-line-visual.rotate-right {
    transform: rotate(-90deg) scale(.01) rotate(0deg);
    height: 0;
    transform-origin: right top
}

.speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line .speech-lrc-line-visual.rotate-right.zoom-entry {
    transform: rotate(0deg) scale(1) rotate(0deg)
}

.speech-rcg .speech-lrc-content .lrc-position-base.lrc-position-base-style2 {
    top: 40%;
    bottom: 0;
    margin: auto;
    font-size: 18px;
    height: fit-content;
    width: 100%;
    text-align: center;
    left: 0
}

.speech-rcg .speech-lrc-content .lrc-position-base.lrc-position-base-style3 {
    top: 10%;
    left: 10%;
    width: 20px;
    text-align: center;
    font-size: 18px;
    word-break: break-word;
    line-height: 1.2em
}

.speech-rcg .speech-lrc-content .lrc-position-base.lrc-position-base-style4 {
    top: 0;
    left: 0;
    font-size: 18px;
    height: fit-content;
    width: 100%;
    text-align: center
}

.speech-rcg .speech-add-view .speech-add-editor {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

.speech-rcg .speech-add-view .speech-add-editor .speech-no-lrc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.speech-rcg .speech-add-view .speech-add-editor .speech-no-lrc .speech-add-icon {
    margin: auto;
    font-size: 40px;
    height: 84px;
    width: 84px;
    border: 12px solid hsla(0, 0%, 86%, .1);
    border-radius: 42px;
    background-color: hsla(0, 0%, 86%, .25);
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    color: #fff;
    text-align: center;
    line-height: 66px
}

.speech-rcg .speech-add-view .speech-add-editor .speech-no-lrc .speech-add-desc {
    margin-top: 20px;
    font-size: 16px;
    color: #fff
}

.speech-rcg .speech-add-view .speech-add-editor .speech-line-text-set-style1 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 16px;
    height: fit-content;
    width: 100%;
    text-align: center
}

.speech-rcg .speech-add-view .speech-add-editor .speech-line-text-set-style2 {
    position: absolute;
    top: 40%;
    bottom: 0;
    margin: auto;
    font-size: 20px;
    height: fit-content;
    width: 100%;
    text-align: center
}

.speech-rcg .speech-add-view .speech-add-editor .speech-line-text-set-style3 {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 20px;
    text-align: center;
    font-size: 20px;
    word-break: break-word;
    line-height: 1.2em
}

.speech-rcg .speech-add-view .speech-add-editor .speech-line-text-set-style4 {
    position: absolute;
    top: 0;
    font-size: 20px;
    height: fit-content;
    width: 100%;
    text-align: center
}

@keyframes magicCubeRotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: rotateX(2turn) rotateY(480deg)
    }
    to {
        transform: rotateX(0deg) rotateY(0deg)
    }
}

@keyframes carouselRotate {
    0% {
        transform: translateZ(-400px) rotateY(1turn)
    }
    to {
        transform: translateZ(-400px) rotateY(0deg)
    }
}

@-webkit-keyframes panoramaRotate {
    0% {
        -webkit-transform: translateZ(30px) rotateY(0deg) rotate(10deg);
        transform: translateZ(30px) rotateY(0deg) rotate(10deg)
    }
    50% {
        -webkit-transform: translateZ(70px) rotateY(-1turn) rotate(-10deg);
        transform: translateZ(70px) rotateY(-1turn) rotate(-10deg)
    }
    to {
        -webkit-transform: translateZ(50px) rotateY(-2turn) rotate(10deg);
        transform: translateZ(50px) rotateY(-2turn) rotate(10deg)
    }
}

@keyframes panoramaRotate {
    0% {
        -webkit-transform: translateZ(30px) rotateY(0deg) rotate(0deg);
        transform: translateZ(30px) rotateY(0deg) rotate(0deg)
    }
    50% {
        -webkit-transform: translateZ(70px) rotateY(-1turn) rotate(0deg);
        transform: translateZ(70px) rotateY(-1turn) rotate(0deg)
    }
    to {
        -webkit-transform: translateZ(50px) rotateY(-2turn) rotate(0deg);
        transform: translateZ(50px) rotateY(-2turn) rotate(0deg)
    }
}

.c-cube-stage {
    background: transparent;
    width: 100%;
    height: 100%
}

.c-cube-stage .magic-cube__container {
    width: 100%;
    height: 100%;
    perspective: 800px;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg)
}

.c-cube-stage .magic-cube__container__cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(20deg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px
}

.c-cube-stage .magic-cube__container__cube-animate {
    animation: magicCubeRotate 20s linear infinite
}

.c-cube-stage .magic-cube__container__cube-animate--pause {
    animation-play-state: paused;
    -webkit-animation-play-state: paused
}

.c-cube-stage .magic-cube__container__cube-animate--running {
    animation-play-state: running;
    -webkit-animation-play-state: running
}

.c-cube-stage .magic-cube__container__cube__face {
    text-align: center;
    position: absolute;
    backface-visibility: hidden;
    width: 100%;
    height: 100%
}

.c-cube-stage .magic-cube__container__cube__face>img {
    width: 100%;
    height: 100%
}

.c-cube-stage .magic-cube__container__cube__face-front {
    transform: translateZ(100px)
}

.c-cube-stage .magic-cube__container__cube__face-back {
    transform: rotateY(180deg) translateZ(100px)
}

.c-cube-stage .magic-cube__container__cube__face-right {
    transform: rotateY(90deg) translateZ(100px)
}

.c-cube-stage .magic-cube__container__cube__face-left {
    transform: rotateY(-90deg) translateZ(100px)
}

.c-cube-stage .magic-cube__container__cube__face-top {
    transform: rotateX(90deg) translateZ(100px)
}

.c-cube-stage .magic-cube__container__cube__face-bottom {
    transform: rotateX(-90deg) translateZ(100px)
}

.c-cube-stage .carousel__container {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0 auto;
    perspective: 2000px;
    -webkit-perspective: 2000px;
    perspective-origin-y: -150px;
    -webkit-perspective-origin-y: -150px
}

.c-cube-stage .carousel__container__content {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -75px;
    margin-top: -75px;
    transform-style: preserve-3d;
    transform: translateZ(-400px)
}

.c-cube-stage .carousel__container__content__face {
    width: 150px;
    height: 150px;
    display: block;
    transform-origin: center;
    position: absolute;
    top: 50%
}

.c-cube-stage .carousel__container__content__face>img {
    width: 100%;
    height: 100%
}

.c-cube-stage .panorama,
.c-cube-stage .panorama__stage {
    position: relative;
    height: 100%;
    width: 100%
}

.c-cube-stage .panorama__stage {
    margin: 0 auto;
    overflow: hidden;
    -webkit-perspective: 50px;
    perspective: 50px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.c-cube-stage .panorama__stage__control {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(50px) rotateY(0deg) rotate(0deg);
    transform: translateZ(50px) rotateY(0deg) rotate(0deg)
}

.c-cube-stage .panorama__stage__control__facewrap {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.c-cube-stage .panorama__stage__control__facewrap__face {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0
}

.c-cube-stage .panorama__stage__control__facewrap__face>img {
    width: 100%;
    height: 100%
}

.c-cube-stage .onetake__container {
    width: 260px;
    height: 420px;
    perspective: 2000px;
    overflow: hidden
}

.c-cube-stage .onetake__container__sceen {
    top: 100px;
    width: 260px;
    height: 420px;
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(-400px) rotateY(0deg);
    perspective: 400px;
    perspective-origin: 50% -50%
}

.c-cube-stage .onetake__container__sceen__face {
    width: 260px;
    height: 260px;
    position: absolute
}

.c-cube-stage .onetake__container__sceen__face__img {
    width: 100%;
    height: 100%
}

@-webkit-keyframes start {
    0%,
    30% {
        opacity: 0;
        -webkit-transform: translateY(10px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-8px)
    }
}

@keyframes start {
    0%,
    30% {
        opacity: 0;
        transform: translateY(10px)
    }
    60% {
        opacity: 1;
        transform: translate(0)
    }
    to {
        opacity: 0;
        transform: translateY(-8px)
    }
}

.u-arrow-bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 150;
    width: 24px;
    height: 14px;
    margin-left: -7px
}

.pre-wrap-bottom {
    width: 24px;
    height: 14px;
    position: relative;
    -webkit-animation: start 1.5s infinite ease-in-out;
    animation: start 1.5s infinite ease-in-out
}

.pre-box1,
.pre-box2 {
    height: 15px;
    width: 11px;
    position: absolute;
    top: -5px;
    overflow: hidden
}

.pre-box2 {
    left: 10px
}

.pre1 {
    transform: rotate(130deg);
    -webkit-transform: rotate(130deg);
    left: 1px
}

.pre1,
.pre2 {
    background-color: #fff;
    width: 14px;
    height: 5px;
    border-radius: 2px;
    position: absolute;
    box-shadow: 1px -1px 1px #646464;
    top: 5px
}

.pre2 {
    left: -4.5px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg)
}

@-webkit-keyframes rightflip {
    0%,
    30% {
        opacity: 0;
        -webkit-transform: translate(10)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate(-8px)
    }
}

@keyframes rightflip {
    0%,
    30% {
        opacity: 0;
        transform: translate(10)
    }
    60% {
        opacity: 1;
        transform: translate(0)
    }
    to {
        opacity: 0;
        transform: translate(-8px)
    }
}

@-webkit-keyframes leftflip {
    0%,
    30% {
        opacity: 0;
        -webkit-transform: translate(-8)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate(10px)
    }
}

@keyframes leftflip {
    0%,
    30% {
        opacity: 0;
        transform: translate(-8)
    }
    60% {
        opacity: 1;
        transform: translate(0)
    }
    to {
        opacity: 0;
        transform: translate(10px)
    }
}

.u-arrow-right {
    position: absolute;
    width: 14px;
    height: 24px;
    z-index: 150;
    top: 50%;
    margin-top: -10px;
    right: 20px;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1)
}

.u-arrow-right__landscape {
    bottom: 30px;
    right: unset;
    left: 10px;
    transform: scaleX(-1) rotate(180deg)
}

.u-arrow-right__landscape .pre-wrap-right {
    -webkit-animation: leftflip 1.5s infinite ease-in-out;
    animation: leftflip 1.5s infinite ease-in-out
}

.pre-wrap-right {
    width: 14px;
    height: 24px;
    position: relative;
    -webkit-animation: rightflip 1.5s infinite ease-in-out;
    animation: rightflip 1.5s infinite ease-in-out
}

.pre-box3 {
    top: 10px
}

.pre-box3,
.pre-box4 {
    height: 11px;
    width: 15px;
    position: absolute;
    overflow: hidden
}

.pre3 {
    top: 5px;
    transform: rotate(130deg);
    -webkit-transform: rotate(130deg);
    top: 1px;
    box-shadow: 1px -1px 2px #646464
}

.pre3,
.pre4 {
    background-color: #fff;
    width: 14px;
    height: 5px;
    border-radius: 2px;
    position: absolute
}

.pre4 {
    top: 5px;
    top: 6px;
    box-shadow: 1px 1px 1.5px #646464;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg)
}

.eqx-progress-bar {
    height: 4px;
    z-index: 100;
    background-color: rgba(0, 0, 0, .2)
}

.eqx-progress-bar,
.eqx-progress-bar:before {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0
}

.eqx-progress-bar:before {
    pointer-events: none;
    content: "";
    height: 60px;
    z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .2))
}

.eqx-progress-bar__landscape {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    background: #ccc;
    display: block;
    top: 0;
    left: 2px
}

.eqx-progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    background-color: #08a1ef;
    transition: width .8s cubic-bezier(.26, .86, .44, .985);
    border-radius: 2px
}

.eqx-progress-bar em.page-tip {
    display: inline-block;
    position: absolute;
    right: 8px;
    top: -14px;
    font-size: 12px;
    font-style: normal;
    color: #fff;
    padding-left: 5px;
    line-height: 12px
}

.eqx-progress-bar em.page-tip__pc {
    right: 10px
}

.eqx-progress-bar.hand-draw em.page-tip {
    padding-left: 8px;
    padding-right: 8px;
    line-height: 18px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    font-family: HYShuYuanHeiJ;
    background: rgba(0, 0, 0, .2);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .08);
    border-radius: 4px;
    top: -20px
}

.eqx-progress-bar.gradient span {
    position: relative;
    background: linear-gradient(90deg, #c63645, #ffb765 31%, #ffc820 57%, #3ea636)
}

.eqx-progress-bar.gradient span:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 12px;
    height: 16px;
    background: url(//as.eqh5.com/h5_view_2/images/location-1d9565.svg) 50% no-repeat;
    background-size: contain
}

.fly-in {
    -webkit-animation: page-fly-in 1s linear;
    animation: page-fly-in 1s linear;
    transform-origin: 0 0!important
}

@-webkit-keyframes page-fly-in {
    0% {
        transform: matrix3d(-.0004, -.00077, 0, 0, -.00054, .00028, -.00062, 0, .00055, -.00029, -.00061, 0, 68.0588, 184.19, .11436, 1)
    }
    6.6667% {
        transform: matrix3d(-.00118, -.00317, 0, 0, -.00219, .00082, -.00245, 0, .0023, -.00086, -.00234, 0, 103.847, 217.2, .53019, 1)
    }
    13.3333% {
        transform: matrix3d(-.00207, -.00967, 0, 0, -.00648, .00139, -.00734, 0, .00718, -.00154, -.00663, 0, 143.325, 255.247, 1.8478, 1)
    }
    20% {
        transform: matrix3d(-.0011, -.02364, 0, 0, -.01503, .0007, -.01827, 0, .01825, -.00085, -.01505, 0, 184.314, 297.532, 5.237, 1)
    }
    26.6667% {
        transform: matrix3d(.00639, -.04842, 0, 0, -.02813, -.00371, -.03976, 0, .03942, .0052, -.02837, 0, 223.765, 343.887, 12.5971, 1)
    }
    33.3333% {
        transform: matrix3d(.02804, -.08526, 0, 0, -.04238, -.01394, -.07788, 0, .07398, .02433, -.04462, 0, 256.319, 393.304, 26.2861, 1)
    }
    40% {
        transform: matrix3d(.07293, -.13114, 0, 0, -.04928, -.02741, -.13906, 0, .12152, .06759, -.05639, 0, 273.765, 440.42, 47.9159, 1)
    }
    46.6667% {
        transform: matrix3d(.14843, -.17788, 0, 0, -.03727, -.0311, -.22653, 0, .17393, .14513, -.04854, 0, 267.743, 472.21, 75.9115, 1)
    }
    53.3333% {
        transform: matrix3d(.25649, -.21379, 0, 0, .00066, .00079, -.3339, 0, .21379, .25649, .00103, 0, 235.874, 470.092, 102.899, 1)
    }
    60% {
        transform: matrix3d(.39149, -.22759, 0, 0, .05716, .09832, -.43832, 0, .22029, .37894, .11373, 0, 186.381, 420.807, 116.296, 1)
    }
    66.6667% {
        transform: matrix3d(.5408, -.2131, 0, 0, .10813, .27442, -.50088, 0, .18363, .46601, .29495, 0, 134.332, 329.786, 105.51, 1)
    }
    73.3333% {
        transform: matrix3d(.68812, -.17233, 0, 0, .12628, .50424, -.48269, 0, .11726, .46824, .51981, 0, 90.6604, 222.173, 72.5875, 1)
    }
    80% {
        transform: matrix3d(.81758, -.11549, 0, 0, .10302, .72931, -.37319, 0, .0522, .36952, .73655, 0, 56.219, 126.209, 34.3603, 1)
    }
    86.6667% {
        transform: matrix3d(.91704, -.05794, 0, 0, .05643, .89304, -.20883, 0, .01317, .20841, .89482, 0, 28.0534, 56.3219, 9.07775, 1)
    }
    93.3333% {
        transform: matrix3d(.97902, -.01555, 0, 0, .01553, .97713, -.06078, 0, .00097, .06077, .97725, 0, 7.65253, 14.2679, .68495, 1)
    }
    to {
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}

@keyframes page-fly-in {
    0% {
        transform: matrix3d(-.0004, -.00077, 0, 0, -.00054, .00028, -.00062, 0, .00055, -.00029, -.00061, 0, 68.0588, 184.19, .11436, 1)
    }
    6.6667% {
        transform: matrix3d(-.00118, -.00317, 0, 0, -.00219, .00082, -.00245, 0, .0023, -.00086, -.00234, 0, 103.847, 217.2, .53019, 1)
    }
    13.3333% {
        transform: matrix3d(-.00207, -.00967, 0, 0, -.00648, .00139, -.00734, 0, .00718, -.00154, -.00663, 0, 143.325, 255.247, 1.8478, 1)
    }
    20% {
        transform: matrix3d(-.0011, -.02364, 0, 0, -.01503, .0007, -.01827, 0, .01825, -.00085, -.01505, 0, 184.314, 297.532, 5.237, 1)
    }
    26.6667% {
        transform: matrix3d(.00639, -.04842, 0, 0, -.02813, -.00371, -.03976, 0, .03942, .0052, -.02837, 0, 223.765, 343.887, 12.5971, 1)
    }
    33.3333% {
        transform: matrix3d(.02804, -.08526, 0, 0, -.04238, -.01394, -.07788, 0, .07398, .02433, -.04462, 0, 256.319, 393.304, 26.2861, 1)
    }
    40% {
        transform: matrix3d(.07293, -.13114, 0, 0, -.04928, -.02741, -.13906, 0, .12152, .06759, -.05639, 0, 273.765, 440.42, 47.9159, 1)
    }
    46.6667% {
        transform: matrix3d(.14843, -.17788, 0, 0, -.03727, -.0311, -.22653, 0, .17393, .14513, -.04854, 0, 267.743, 472.21, 75.9115, 1)
    }
    53.3333% {
        transform: matrix3d(.25649, -.21379, 0, 0, .00066, .00079, -.3339, 0, .21379, .25649, .00103, 0, 235.874, 470.092, 102.899, 1)
    }
    60% {
        transform: matrix3d(.39149, -.22759, 0, 0, .05716, .09832, -.43832, 0, .22029, .37894, .11373, 0, 186.381, 420.807, 116.296, 1)
    }
    66.6667% {
        transform: matrix3d(.5408, -.2131, 0, 0, .10813, .27442, -.50088, 0, .18363, .46601, .29495, 0, 134.332, 329.786, 105.51, 1)
    }
    73.3333% {
        transform: matrix3d(.68812, -.17233, 0, 0, .12628, .50424, -.48269, 0, .11726, .46824, .51981, 0, 90.6604, 222.173, 72.5875, 1)
    }
    80% {
        transform: matrix3d(.81758, -.11549, 0, 0, .10302, .72931, -.37319, 0, .0522, .36952, .73655, 0, 56.219, 126.209, 34.3603, 1)
    }
    86.6667% {
        transform: matrix3d(.91704, -.05794, 0, 0, .05643, .89304, -.20883, 0, .01317, .20841, .89482, 0, 28.0534, 56.3219, 9.07775, 1)
    }
    93.3333% {
        transform: matrix3d(.97902, -.01555, 0, 0, .01553, .97713, -.06078, 0, .00097, .06077, .97725, 0, 7.65253, 14.2679, .68495, 1)
    }
    to {
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}

.spiral-rotate-enter {
    -webkit-animation: spiral-in 1s cubic-bezier(.5005, 0, .49855, 1);
    animation: spiral-in 1s cubic-bezier(.5005, 0, .49855, 1);
    transform-origin: center!important
}

.spiral-rotate-leave {
    -webkit-animation: spiral-out 1s cubic-bezier(.5005, 0, .49855, 1);
    animation: spiral-out 1s cubic-bezier(.5005, 0, .49855, 1);
    transform-origin: center!important
}

@-webkit-keyframes spiral-in {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-12.5664rad)
    }
    66.6666% {
        opacity: 1
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0)
    }
}

@keyframes spiral-in {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-12.5664rad)
    }
    66.6666% {
        opacity: 1
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0)
    }
}

@-webkit-keyframes spiral-out {
    0% {
        opacity: 1
    }
    66.6666% {
        opacity: 0;
        transform: scale(0) rotate(12.5664rad)
    }
    to {
        opacity: 0;
        transform: scale(0) rotate(12.5664rad)
    }
}

@keyframes spiral-out {
    0% {
        opacity: 1
    }
    66.6666% {
        opacity: 0;
        transform: scale(0) rotate(12.5664rad)
    }
    to {
        opacity: 0;
        transform: scale(0) rotate(12.5664rad)
    }
}

@-webkit-keyframes rotating {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes rotating {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.bgm-btn-wraper {
    right: 16px;
    top: 16px;
    display: none
}

.bgm-btn-wraper,
.bgm-btn-wraper .bgm-btn {
    position: absolute;
    z-index: 200;
    width: 30px;
    height: 30px
}

.bgm-btn-wraper .bgm-btn {
    right: 0;
    top: 0;
    border-radius: 15px;
    background-image: url(//as.eqh5.com/h5_view_2/images/bgmBtn-fbd2dc.svg);
    background-size: contain;
    background-repeat: no-repeat
}

.bgm-btn-wraper .bgm-btn.rotate {
    -webkit-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite
}

.lrc-controller {
    position: absolute;
    font-size: 14px;
    bottom: 30px;
    height: 32px;
    width: 100%;
    padding: 0 6px;
    text-align: center;
    overflow: hidden;
    z-index: 200
}

.lrc-controller.hide {
    z-index: -1;
    visibility: hidden
}

.lrc-controller .lrc-text p {
    margin: 0;
    height: 32px;
    line-height: 32px;
    color: #fff;
    text-shadow: 1px 1px 16px #000!important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.lrc-controller .lrc-text p.destroy-quick {
    transition: margin-top .1s;
    margin-top: -32px
}

.lrc-controller .lrc-text p.destroy {
    transition: margin-top .5s;
    margin-top: -32px
}