html {
    height: 100%
}

.top-nav-box {
    background: none
}

.menu-slide .nav-bar {
    transform: translateX(100%)
}

.menu-slide .line-1 {
    transform: translateY(0) rotate(0)
}

.menu-slide .line-2 {
    transform: rotate(0)
}

.menu-slide .line-3 {
    opacity: .25
}
.wrapper-2 .arrow-bar{display: block;}
.arrow {
    width: 10px;
    height: 17px;
    display: inline-block;vertical-align: middle;
   
}

.dot-bar {
    position: fixed;
    width: 30px;
    top: 50%;
    right: 110px;
    transform: translateY(-50%);
    color: #fff
}

.dot-bar .dot {
    width: 10px;
    height: 10px;
    display: block;
    margin-bottom: 40px;
    border-radius: 100%;
    background-color: #fff;
    position: relative
}

.dot-bar .dot:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: currentColor;
    transform-origin: 50% 50%;
    width: 8px;
    height: 8px;
    border: 1px solid currentColor;
    border-radius: 100%;
    transform: scale(3);
    opacity: 0
}

.wrapper {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none
}



.wrapper-2 .poster-box {
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    padding-top: 550px
}

.wrapper-2 .poster-bar {
    height: 550px;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    transition: all .5s ease-in-out
}

.wrapper-2 .poster {
    /*width: 315px;
    height: 468px;*/
    
    overflow: hidden;
    line-height: 1;
    transform: translateY(-50%);
    transition: all .3s ease-in-out;
    transform-origin: 50% 50%;
    display: inline-block;
    position: relative;
    top: 50%;
    left: 0;
    margin-right: 7px;
    vertical-align: top;
    width: 286px;
    height: 438px;
}

.wrapper-2 .poster:hover .poster-mask {
    opacity: 0
}

.wrapper-2 .img {
    /*display: block;
    width: 100%;
    height: 100%;
    filter: grayscale(1)*/
}



/*.wrapper-2 .poster-text .num {
    top: 140px;
    left: auto;
    right: 24px;
    opacity: 1 !important
}

.wrapper-2 .poster-title {
    margin-top: 140px;
    font-size: 30px;
    padding-left: 24px
}

.wrapper-2 .poster-desc {
    margin-top: 10px;
    font-size: 16px;
    padding-left: 24px
}

.wrapper-2 .num {
    position: absolute;
    font-size: 36px;
    top: 20px;
    left: 18px;
    opacity: 1;
    transition: all .3s ease-in-out
}

.wrapper-2 .poster-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.48);
    opacity: 1;
    transition: all .3s ease-in-out
}*/
.wrapper-2 .poster img{width: 286px;height: 438px;}
.wrapper-2 .active {
    /*width: 324px;
    height: 503px;*/
    overflow: hidden;
    background: url(../images/idx_64.png) no-repeat center;background-size:cover;padding: 15px 8px;
    width: 320px;height: 498px;
}
.wrapper-2 .active img{/*width: 324px;
    height: 503px*/width: 100%;height: auto;}
.wrapper-2 .active .poster-mask {
    opacity: 0
}

.wrapper-2 .active .poster-text {
    opacity: 1
}

.wrapper-2 .active .num {
    opacity: 0
}

.wrapper-2 .active .img {
    filter: grayscale(0)
}

.wrapper-2 .arrow-bar {
    text-align: center;
    padding-top: 20px
}

.wrapper-2 .arrow,
.wrapper-2 .count-bar {
    display: inline-block;
    
}

.wrapper-2 .count-bar {
    width: 160px;
    font-size: 18px;
    color: #C6C1DA;
    line-height: 30px;display: inline-block;vertical-align: middle;
}
.wrapper-2 .count-bar i{color: #13ACFF;}
.wrapper-2 .arrow-bar{display: block!important;}
.wrapper-2 .arrow-pre {
   background: url(../images/img_02.png) no-repeat center;background-size:contain;
}

.wrapper-2 .arrow-next {
   
   background: url(../images/img_03.png) no-repeat center;background-size:contain;
}



/*@media (max-width: 1900px) {
    .wrapper-2 .text-bar {
        width: 1333px
    }
    .dot-bar {
        right: 20px
    }
}

@media (max-width: 1600px) {
    .wrapper-3 .text-bar {
        width: 1270px
    }
    .wrapper-3 .qrcode-bar {
        margin-top: 45px
    }
    .wrapper-3 .btn {
        margin-top: 37px
    }
    .wrapper-4 .text-bar {
        width: 1270px
    }
    .wrapper-4 .right-content {
        padding: 100px 246px 0 129px
    }
    .wrapper-4 .pan {
        display: none
    }
    .wrapper-4 .qrcode-bar {
        right: 90px
    }
    .wrapper-cross .text-bar {
        width: 1216px
    }
    .wrapper-cross .cross-bar {
        width: 1167px
    }
}

@media (max-width: 1440px) {
    .wrapper-2 .text-bar {
        width: 1014px
    }
}

@media (max-height: 920px) {
    .wrapper .text-bar {
        transform: translate(0, -50%) scale(0.75)
    }
}*/

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(20%)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(20%)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideUpMar {
    0% {
        opacity: 0;
        margin-top: 5%
    }
    100% {
        opacity: 1;
        margin-top: 0
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(1.05) translate(-50%, -50%)
    }
    100% {
        transform: scale(1) translate(-50%, -50%)
    }
}

@keyframes scaleOpacity {
    0% {
        opacity: 0;
        transform: scale(1.05)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

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

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes scaleInDot {
    0% {
        transform: scale(1)
    }
    100% {
        transform: scale(3)
    }
}