@charset "UTF-8";
html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
}

html * {
    outline: 0;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
}

body,
th,
td,
p,
ol,
ul,
li,
dl,
dt,
dd,
a,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
input,
legend,
select,
textarea {
    margin: 0;
    padding: 0;
}

input,
img,
fieldset {
    border: none;
}

input,
select,
fieldset {
    vertical-align: middle;
}

ul,
ol {
    list-style-type: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img {
    max-width: 100%;
    vertical-align: top;
}

i,
cite,
em,
var,
address,
dfn {
    font-style: normal;
}

a:link {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder,
input:focus::-moz-placeholder {
    color: transparent;
}

button,
input[type=button],
input[type=password],
input[type=submit],
input[type=text],
textarea {
    -webkit-appearance: none;
}

input:-ms-clear {
    display: none;
}


/* clear IE10 X */

input {
    -webkit-user-modify: read-write-plaintext-only;
}

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

.tl {
    text-align: left;
}

.tc {
    text-align: center;
}

.tr {
    text-align: right;
}

.bc {
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.vm {
    vertical-align: middle;
}

.pr {
    position: relative;
}

.pa {
    position: absolute;
}

.none {
    display: none;
}

.block {
    display: block;
}

.f12 {
    font-size: 12px;
}

.f13 {
    font-size: 13px;
}

.f14 {
    font-size: 14px;
}

.f16 {
    font-size: 16px;
}

.f20 {
    font-size: 20px;
}

.fb {
    font-weight: bold;
}

.fn {
    font-weight: normal;
}

.t2 {
    text-indent: 2em;
}


/* ellipsis */

.elli {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mr6 {
    margin-right: 6px;
}

.w10 {
    width: 10px;
}

.h10 {
    height: 10px;
}

del {
    text-decoration: line-through;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

[v-cloak] {
    display: none;
}

.layout {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


/**layout**/

.layoutbg {
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.child-with-unknown-dimensions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/**
 * 让子元素绝对居中于父容器
 * 向 Sass mixin 传递了宽度，所以就使用负向 margin 处理水平位置，
 * 使用 CSS transform 处理垂直位置 
 */

.child-with-known-width {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    margin-left: -2rem;
    transform: translateY(-50%);
}


/**
 * 让子元素绝对居中于父容器
 * 向 Sass mixin 传递了高度，所以就使用负向 margin 处理垂直位置，
 * 使用 CSS transform 处理水平位置 
 */

.child-with-known-height {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4rem;
    margin-top: -2rem;
    transform: translateX(-50%);
}


/**
 * 让子元素绝对居中于父容器
 * 向 Sass mixin 传递了高度和宽度，所以就使用负向 margin 处理水平和垂直位置
 */

.child-with-known-dimensions {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    margin: -2rem 0 0 -2rem;
}

::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #d89c76;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #d89c76;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #d89c76;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #d89c76;
}

video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

body {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    background: #150f1c;
}

.main {
    width: 100%;
    height: 69.47rem;
    background: url(../img/bg.jpg) center 0 no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}

.topbg {
    width: 100%;
    height: 18.2rem;
    position: relative;
}

.logo {
    width: 3.08rem;
    height: 4.74rem;
    position: absolute;
    top: 2rem;
    left: 0.5rem;
    z-index: 1000;
}

.slogan {
    width: 10.06rem;
    height: 5.87rem;
    position: absolute;
    top: 12.5rem;
    left: 50%;
    margin-left: -5.03rem;
    z-index: 1000;
}

.loading-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background: #000;
    display: none;
}

.loading-box .loading {
    display: block;
    position: absolute;
    width: 10.8rem;
    height: 11.38rem;
    top: 0;
    left: 50%;
    margin-left: -5.4rem;
}

.loading-box .loading-img {
    position: absolute;
    top: 8.6rem;
    left: 50%;
    margin-left: -2.45rem;
    width: 4.9rem;
    height: 1.17rem;
}

.topmove1 {
    width: 100%;
    height: 9.27rem;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.topmove1 .loading1 {
    width: 100%;
    height: 9.27rem;
}

.head {
    width: 100%;
    height: 9.27rem;
    position: absolute;
    top: 0;
    z-index: 1;
    overflow: hidden;
}

.head img {
    width: 100%;
    height: 9.27rem;
    position: absolute;
    top: 0;
    z-index: 1;
    display: none;
}

.head img.show {
    display: block;
}

.topcon {
    position: absolute;
    width: 100%;
    height: 2.44rem;
    bottom: 1.6rem;
    left: 0rem;
    z-index: 3;
}

.topcon .icon {
    width: 2.44rem;
    height: 2.44rem;
    float: left;
    margin: 0rem 0.2rem 0 0.75rem;
}

.topcon .icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.topcon .content {
    width: 4rem;
    height: auto;
    float: left;
}

.topcon .content .titleTip {
    padding-top: 0.4rem;
    width: 100%;
    font-size: 0.38rem;
    color: #fff;
    font-weight: bold;
}

.topcon .content .timeTip {
    padding-top: 0.15rem;
    width: 100%;
    font-size: 0.34rem;
    color: #fff;
}

.topcon .ebbs {
    width: 3.61125rem;
    height: 1.215rem;
    background: url(../img/luntan.png) center 0 no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0.8rem;
    right: 0.2rem;
}

.topcon .ebbs a {
    width: 100%;
    height: 100%;
    display: block;
}

.title2 {
    width: 8.57rem;
    height: 2.21rem;
    background: url(../img/title2.png) center 0 no-repeat;
    background-size: 100% auto;
    clear: both;
    margin: 0 auto;
}

.title3 {
    width: 8.57rem;
    height: 2.21rem;
    background: url(../img/title3.png) center 0 no-repeat;
    background-size: 100% auto;
    clear: both;
    margin: 0 auto;
}

.title4 {
    width: 8.57rem;
    height: 2.21rem;
    background: url(../img/title4.png) center 0 no-repeat;
    background-size: 100% auto;
    clear: both;
    margin: 0 auto;
}

.title5 {
    width: 8.57rem;
    height: 2.21rem;
    background: url(../img/title5.png) center 0 no-repeat;
    background-size: 100% auto;
    clear: both;
    margin: 0 auto;
}

.title6 {
    width: 8.57rem;
    height: 2.21rem;
    background: url(../img/title6.png) center 0 no-repeat;
    background-size: 100% auto;
    clear: both;
    margin: 0 auto;
}

.bg1 {
    width: 100%;
    height: 15.3rem;
    padding-top: 0.6rem;
    position: relative;
}

.bg1 .bg1-icon1 {
    width: 100%;
    height: 7.72rem;
    margin: 0.3rem auto;
}

.bg1 .bg1-icon2 {
    width: 5.81rem;
    height: 3.83rem;
    margin: 0.3rem auto;
}

.bg2 {
    width: 100%;
    height: 12.45rem;
    position: relative;
}

.bg2 .giftBox {
    width: 10.125rem;
    height: 4.725rem;
    margin: 0.2rem auto;
}

.bg2 .giftBox img {
    width: 2.3625rem;
    height: 4.725rem;
    margin: 0 0.05rem;
    float: left;
}

.bg2 .giftTip {
    width: 9.87rem;
    height: 2.33rem;
    background: url(../img/giftTip.png) center 0 no-repeat;
    background-size: 100% auto;
    margin: 0.45rem auto 0;
    padding-top: 0.26rem;
}

.bg2 .giftTip p {
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.32rem;
    color: #fff;
}

.bg2 .giftTip p i {
    width: 0.34rem;
    height: 0.34rem;
    background: url(../img/dot.png) center 0 no-repeat;
    background-size: 100% auto;
    display: inline-block;
    line-height: 0.34rem;
    font-size: 0.21rem;
    color: #292929;
    text-align: center;
    margin: 0rem 0.13rem 0 0.26rem;
}

.bg3 {
    width: 100%;
    height: 11.45rem;
    position: relative;
}

.bg3 .bg5section {
    width: 100%;
    height: 8.8rem;
    background: url(../img/bg5section.png) center 0 no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
    padding-top: 1.02rem;
}

.bg3 .bg5con {
    width: 9.36rem;
    height: 5.25rem;
    overflow: hidden;
    margin: 0rem 0 0 1.4rem;
}

.bg3 .videocon {
    width: 100%;
    height: 100%;
    position: relative;
}

.bg3 .poster {
    width: 5.75rem;
    height: 3.21rem;
    background: url(../img/poster.png) center 0 no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
}

.bg3 #video-play {
    width: 100%;
    height: 5.25rem;
}

.bg3 .playbtn {
    width: 1.45125rem;
    height: 1.67063rem;
    background: url(../img/playbtn.png) center 0 no-repeat;
    background-size: 100% auto;
    margin: 1.9rem auto;
}

.bg4 {
    width: 100%;
    height: 14.35rem;
    position: relative;
}

.bg4 .bannerBg1 {
    width: 100%;
    height: 7.97rem;
    background: url(../img/bannerBg1.png) center 0 no-repeat;
    background-size: 100% auto;
    position: absolute;
    z-index: 1;
    top: 1.95rem;
    left: 0rem;
}

.bg5 {
    width: 100%;
    height: 12.45rem;
    position: relative;
}

.bg5 .bannerBg2 {
    width: 100%;
    height: 9.60187rem;
    background: url(../img/bannerBg2.png) center 0 no-repeat;
    background-size: 100% auto;
    position: absolute;
    z-index: 1;
    top: 2.85rem;
    left: 0rem;
}

.bg5 .bg5con {
    width: 9.45rem;
    height: 5.265rem;
    position: absolute;
    z-index: 2;
    top: 4.185rem;
    left: 0rem;
    border-top: 0.05rem solid #e937f9;
    border-right: 0.05rem solid #3ff3c6;
    border-bottom: 0.05rem solid #3ff3c6;
    opacity: 0;
}

.bg5 .bg5con .swiper-container2 {
    width: 9.45rem;
    height: 5.265rem;
    overflow: hidden;
}

.bg5 .bg5con .swiper-container2 img {
    width: 9.45rem;
    height: 5.265rem;
    border: none;
}

.bg5 .imgBox {
    width: 2.86875rem;
    height: 1.60312rem;
    border: 0.06rem solid #000;
    position: absolute;
    bottom: 2.19375rem;
    right: 0.50625rem;
    z-index: 1;
}

.bg5 .imgBox img {
    width: 2.86875rem;
    height: 1.60312rem;
}

.bg5 .imgBox::after {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
}

.bg5 .swiper-pagination {
    bottom: -0.27rem;
    width: 7.37437rem;
    height: 0.50625rem;
    left: 1.6875rem;
    z-index: 10;
}

.bg5 .swiper-pagination-bullet {
    width: 0.52312rem;
    height: 0.50625rem;
    background: url(../img/dot1.png) center 0 no-repeat;
    background-size: 100% auto;
    float: left;
    margin-left: 0.45563rem;
    opacity: 1;
}

.bg5 .swiper-pagination-bullet:first-child {
    margin-left: 1.6875rem;
}

.bg5 .swiper-pagination-bullet-active {
    width: 0.81rem;
    height: 0.81rem;
    background: url(../img/dot2.png) center 0 no-repeat;
    background-size: 100% auto;
}

.bg5 .swiper-button-prev {
    width: 1.1rem;
    height: 1.35rem;
    background: url(../img/zl.png) center 0 no-repeat;
    background-size: 100% auto;
}

.bg5 .swiper-button-next {
    width: 1.1rem;
    height: 1.35rem;
    background: url(../img/zr.png) center 0 no-repeat;
    background-size: 100% auto;
}

.swiper-container3 {
    overflow: hidden;
    width: 100%;
    height: 6.075rem;
    margin: 0 auto;
}

.swiper-container3 img {
    width: 100%;
    height: 6.075rem;
    box-sizing: border-box;
}

.swiper-container {
    width: 4.9rem;
    height: 3.8rem;
    margin-left: 0.7rem;
}

.swiper-container img {
    width: 4.9rem;
    height: 2.76rem;
    border: 1px solid #e1d1a7;
    box-sizing: border-box;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 10px;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active {
    margin-top: -0.14rem;
}

.bg6 {
    width: 100%;
    height: 12.7rem;
    position: relative;
}

.bg6 .bannerBg3 {
    width: 5.4rem;
    height: 6.86rem;
    position: absolute;
    z-index: 1;
    top: 3.5rem;
    left: 0rem;
}

.bg6 .bg6con {
    width: 9.45rem;
    height: auto;
    position: absolute;
    z-index: 2;
    right: 0;
    top: 3.6rem;
}

.bg6 .bg6con li {
    width: 9.45rem;
    height: 5.39rem;
}

.bg6 .bg6con li a img {
    width: 9.45rem;
    height: 5.39rem;
}

.line {
    width: 2.62rem;
    height: 0.02rem;
    background: url(../img/line.png) center 0 no-repeat;
    background-size: 100% auto;
}

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

.layout {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 10.8rem;
    height: 6.075rem;
}

.layoutbg {
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
}

.mask {
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
}

.mask .mask-main {
    width: 5.28rem;
    height: 7.26rem;
    background: url(../img/layBg.jpg) center 0 no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -3.63rem 0 0 -2.64rem;
}

.mask .mask-main .close {
    width: 0.67rem;
    height: 0.62rem;
    background: url(../img/close.png) center 0 no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
}

.mask .layTitle1,
.mask .layTitle2 {
    width: 3.08rem;
    height: 0.6rem;
    background: url(../img/layTitle1.png) center 0 no-repeat;
    background-size: 100% auto;
    margin: 0.3rem auto 0;
}

.mask .layTitle2 {
    width: 3.08rem;
    height: 0.6rem;
    background: url(../img/layTitle2.png) center 0 no-repeat;
    background-size: 100% auto;
}

.mask .lay-info {
    width: 4.9rem;
    height: auto;
    margin: 0.2rem auto 0;
}

.mask .lay-info p {
    width: 100%;
    height: auto;
    line-height: 0.32rem;
    font-size: 0.2rem;
    color: #fff;
}

.mask .lay-info p.em {
    text-indent: 2em;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-359deg);
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(-359deg);
    }
}

@-o-keyframes rotate {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(-359deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-359deg);
    }
}

@-webkit-keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 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: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 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: translateZ(0);
        transform: translateZ(0);
    }
}

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

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

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

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

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        transform: translateX(-200px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

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

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

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        -ms-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

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

.bounceLeft {
    -webkit-animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.bounceLeftS {
    -webkit-animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    -moz-animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    -ms-animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    -o-animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }
    75% {
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        transform: translate3d(5px, 0, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        transform: translate3d(10px, 0, 0);
    }
    90% {
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        transform: none;
    }
}

.bounceRight {
    -webkit-animation: bounceInRight 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: bounceInRight 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-animation: bounceInRight 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-animation: bounceInRight 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: bounceInRight 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes bounceUp {
    0% {
        opacity: 0;
        transform: translate3d(0px, -3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -25px, 0);
    }
    75% {
        transform: translate3d(0, 10px, 0);
    }
    90% {
        transform: translate3d(0, -5px, 0);
    }
    100% {
        transform: none;
    }
}

.bounceUp {
    -webkit-animation: bounceUp 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: bounceUp 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-animation: bounceUp 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-animation: bounceUp 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: bounceUp 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes scaleDraw {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
}

.scaleThis {
    -webkit-animation: scaleDraw 2s ease-in-out infinite;
    animation: scaleDraw 2s ease-in-out infinite;
}

@keyframes scaleDraw1 {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.scaleThis1 {
    -webkit-animation: scaleDraw1 1s ease-in-out;
    animation: scaleDraw1 1s ease-in-out;
}

.heart {
    animation: heart 1s ease-in-out 0s infinite alternate;
}

@keyframes heart {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(0, 10px);
    }
}

.upDowml {
    animation: upDowml 1s ease-in-out 0s infinite alternate;
}

@keyframes upDowml {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-5px, 0px);
    }
}

.upDowmr {
    animation: upDowmr 1s ease-in-out 0s infinite alternate;
}

@keyframes upDowmr {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(5px, 0px);
    }
}

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    70% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }
    70% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

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

.swiper-box1 {
    position: relative;
}

.swiper-box1 .swiper-container {
    width: 7.5rem;
    height: 7.5rem;
    margin-left: 0;
}

.swiper-box1 .swiper-container .swiper-slide {
    opacity: 0 !important;
}

.swiper-box1 .swiper-container .swiper-slide img {
    width: 7.5rem;
    height: 6.8rem;
    border: none;
}

.swiper-box1 .swiper-container .swiper-slide-active {
    opacity: 1 !important;
}

#swiper-button-prev {
    position: absolute;
    left: 0.2rem;
    top: 50%;
    width: 0.37rem;
    height: 0.77rem;
    background: url(../img/zl.png) center center no-repeat;
    background-size: 0.37rem auto;
}

#swiper-button-next {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    width: 0.39rem;
    height: 0.77rem;
    background: url(../img/zr.png) center center no-repeat;
    background-size: 0.39rem auto;
}

.left,
#swiper-pagination span.index2:nth-child(1),
#swiper-pagination span.index3:nth-child(2),
#swiper-pagination span.index1:nth-child(3) {
    top: 0.1rem;
    left: 1.5rem;
    width: 1.04rem;
    height: 0.99rem;
}

.center,
#swiper-pagination span.index1:nth-child(1),
#swiper-pagination span.index2:nth-child(2),
#swiper-pagination span.index3:nth-child(3) {
    top: 0.5rem;
    left: 50%;
    width: 1.36rem;
    height: 1.43rem;
    margin-left: -0.68rem;
}

.right,
#swiper-pagination span.index3:nth-child(1),
#swiper-pagination span.index1:nth-child(2),
#swiper-pagination span.index2:nth-child(3) {
    top: 0.1rem;
    left: 4.96rem;
    width: 1.04rem;
    height: 0.99rem;
}

#swiper-pagination {
    bottom: 0.1rem;
    height: 2rem;
    width: 100%;
    display: block;
}

#swiper-pagination span {
    display: block;
    position: absolute;
    opacity: 1;
    left: 46%;
    top: 0;
    background: none;
}

#swiper-pagination span:nth-child(1).index1 {
    background: url(../img/ms11.png) center center no-repeat;
    background-size: 100%;
}

#swiper-pagination span:nth-child(1).index2 {
    background: url(../img/ms1.png) center center no-repeat;
    background-size: 100%;
}

#swiper-pagination span:nth-child(1).index3 {
    background: url(../img/ms1.png) center center no-repeat;
    background-size: 100%;
}

#swiper-pagination span:nth-child(2).index1 {
    background: url(../img/ms2.png) center center no-repeat;
    background-size: 100%;
}

#swiper-pagination span:nth-child(2).index2 {
    background: url(../img/ms22.png) center center no-repeat;
    background-size: 100%;
}

#swiper-pagination span:nth-child(2).index3 {
    background: url(../img/ms2.png) center center no-repeat;
    background-size: 100%;
}

#swiper-pagination span:nth-child(3).index1 {
    background: url(../img/ms3.png) center center no-repeat;
    background-size: 100%;
}

#swiper-pagination span:nth-child(3).index2 {
    background: url(../img/ms3.png) center center no-repeat;
    background-size: 100%;
}

#swiper-pagination span:nth-child(3).index3 {
    background: url(../img/ms33.png) center center no-repeat;
    background-size: 100%;
}

.game3 {
    width: 10.8rem;
    position: absolute;
    top: 1.32rem;
    height: 8.5rem;
    overflow: hidden;
    z-index: 10;
}

.game3-section {
    width: 100%;
    height: 7.97rem;
    position: absolute;
    z-index: 1;
    top: 0.3rem;
}

.game3-btn {
    width: 10.8rem;
    height: 0.85rem;
    position: absolute;
    text-align: center;
    bottom: 0rem;
    z-index: 10;
}

.game3-btn img {
    width: 2.57rem;
    height: 0.85rem;
    margin: 0 -0.1rem;
}

.game3-gif {
    width: 5.86rem;
    height: 3.34rem;
    position: absolute;
    text-align: center;
    bottom: 1rem;
    left: 0.27rem;
    z-index: 10;
}

.game3-gif::after {
    content: '';
    width: 5.86rem;
    height: 3.34rem;
    background: url(../img/gifCover.png) center 0 no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
}

.game3-gif img {
    width: 5.4rem;
    height: 3rem;
    margin: 0.15rem auto;
}

.bpict {
    display: none;
    width: 10.8rem;
    height: 7.97rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.bpict img {
    width: 10.8rem;
    height: 7.97rem;
    position: absolute;
    z-index: 100;
}

.bpict.active {
    display: block;
}

.bpict.active .name {
    top: 0.3rem;
}

.bpict.active .bpic1 {
    width: 4.45rem;
    height: 10.8rem;
    z-index: 10;
    right: 0rem;
    top: 0rem;
}

.bpict.active .bpic1t {
    width: 4.17rem;
    height: 6.45rem;
    z-index: 5;
    left: 0rem;
    top: -0.5rem;
}

.bpict.active .bpic2 {
    width: 4.13rem;
    height: 6.9rem;
    z-index: 10;
    right: 0rem;
    top: -0.4rem;
}

.bpict.active .bpic2t {
    width: 4.17rem;
    height: 5.54rem;
    z-index: 5;
    left: 0rem;
    top: 0.4rem;
}

.bpict.active .bpic3 {
    width: 3.76rem;
    height: 5.87rem;
    z-index: 5;
    right: 1rem;
    top: 0.3rem;
}

.bpict.active .bpic3t {
    width: 5rem;
    height: 5.59rem;
    z-index: 10;
    left: 0rem;
    top: 0.3rem;
}

.game3-piclist {
    width: 4.7rem;
    height: 2rem;
    position: absolute;
    top: 4.9rem;
    left: 50%;
    margin-left: -2.35rem;
    z-index: 100;
}

.game3-piclist .game3-li {
    width: 4.7rem;
    height: 2rem;
    position: relative;
    display: none;
}

.game3-piclist .game3-li.active {
    display: block;
}

.game3-piclist .game3-li img {
    width: 0.99rem;
    height: 1.04rem;
    position: absolute;
}

.game3-piclist .game3-li img:nth-child(1) {
    left: 0;
    top: 0.24rem;
}

.game3-piclist .game3-li img:nth-child(2) {
    width: 1.36rem;
    height: 1.43rem;
    left: 50%;
    margin-left: -0.68rem;
    top: 0.5rem;
}

.game3-piclist .game3-li img:nth-child(3) {
    right: 0;
    top: 0;
}

.game3-pic-container li {
    width: 0.75rem;
    height: 0.75rem;
    float: left;
    margin-right: 0.25rem;
}

.game3-pic-container li img {
    width: 0.75rem;
    height: 0.75rem;
}

.game3-pic-container li .pag {
    display: block;
}

.game3-pic-container li .pagon {
    display: none;
}

.game3-pic-container li.active .pagon {
    display: block;
}

.game3-pic-container li.active .pag {
    display: none;
}