@charset "UTF-8";
$yahei: "Microsoft YaHei";
$pingfan:PingFangSC-Regular;

/*通用变量*/

$baseFontSize:14px;
$baseFontColor:#999;

/*基础样式*/

@import "base/base";
@import "base/mixins";
@import "base/ui-dialog";




html,
body {
    height: 100%;
}

body {
    min-width: 1000px;
    max-width: 1920px;
    font-size: $baseFontSize;
    font-family: $pingfan, $yahei, Helvetica, Arial, sans-serif;
    color: #333333;
}

a {
    text-decoration: none;
    color: $baseFontColor;
    &.g-link {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }
}


.hide{
    display: none;
}


.page-index-pc {
    .gift-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        @include opacity(0.6);
        background-color: #000;
        z-index: 5;
    }
    .gift-wrap {
        position: fixed;
        width: 500px;
        padding: 50px;
        top: 400px;
        left: 50%;
        margin-left: -314px;
        background-color: #fff;
        border: 5px solid #6cd882;
        z-index: 6;
        text-align: center;
        // &:first-child {
        //     top: 580px;
        // }
        p {
            font-size: 20px;
            line-height: 25px;
        }
        
        .gift-close {
            display: block;
            width: 53px;
            height: 54px;
            background-image: url(/src/img/close_gift.png);
            position: absolute;
            top: -60px;
            right: -60px;
            cursor: pointer;
        }
    }
    .gift-wrap.wrap {
        width: 700px;
        padding:40px 25px;
        top: 50%;
        margin-top: -162px;
        margin-left: -380px ;
        .gift-content {
            color: #5364b0;
            font-size: 25px;
            margin-bottom: 20px;
            input {
                height: 48px;
                width: 250px;
                text-align: center;
                font-size: 18px;
                outline: 0;
                border: none;
                border-radius:5px; 
                margin-left: 40px;
            }
            a{
                @include inline-block;
                height: 50px;
                width: 50px;
                line-height: 50px;
                text-align: center;
                color: #fff;
                background-color: #6cd882;
                font-size: 18px;
                border-radius:5px; 
            }
        }
        .gift-desc {
            text-align:left; 
            padding: 15px 0;
            padding-left: 50px;
        }
    }
    .bg-1 {
        height: 960px;
        background: url(/src/img/1.0/bg_01.jpg?233) no-repeat center top;
        position: relative;
        .new-link {
            display: none;
        }
        .new-code {
            display: none;
        }
        &.new-bg {
            background: url(/src/img/bg1.1.jpg) no-repeat center top !important;
            .animate-deco {
                display: none;
            }
            .old-code {
                display: none;
            }
            .new-code {
                display: block;
            }
            .old-link {
                display: none;
            }
            .new-link {
                display: block;
            }
        }
        .b-tank {
            position: absolute;
            right: 0;
            top: 378px;
            width: 404px;
            height: 470px;
            img {
                position: absolute;
                &.in {
                }
                &.out {
                    animation: fadeOut 3s linear infinite; 
                    
                }
            }
        }
        .l-tank {
            position: absolute;
            left: 0;
            top: 592px;
            img {
                position: absolute;
                &.in {
                }
                &.out {
                    animation: fadeOut 3s linear infinite;                    
                }
            }
        }
        .rock-wrap {
            width: 165px;
            height: 140px;
            position: absolute;
            right: 318px;
            top: 335px;
            img {
                position: absolute;
            }
            .r1 {
                top: 0;
                left: 0;
                animation: float1 3s ease-in-out infinite;
            }
            .r2 {
                top: 88px;
                left: 124px;
                animation: float2 3s ease-in-out infinite;
            }
            .r3 {
                top: 81px;
                left: 76px;
                animation: float3 3s ease-in-out infinite;
            }
            .r4 {
                top: 52px;
                left: 97px;
                animation: float4 3s ease-in-out infinite;
            }
        }
        .s-rock-wrap {
            width: 100px;
            height: 90px;
            position: absolute;
            left: 228px;
            top: 537px;
            img {
                position: absolute;
            }
            .r1 {
                top: 0;
                right: 0;
                animation: float1 3s ease-in-out infinite;
            }
            .r2 {
                bottom: 10px;
                left: 10px;
                animation: float2 3s ease-in-out infinite;
            }
            .r3 {
                top: 55px;
                right: 41px;
                animation: float3 3s ease-in-out infinite;
            }
            .r4 {
                top: 33px;
                left: 23px;
                animation: float4 3s ease-in-out infinite;
            }
        }
        .logo {
            display:inline-block;
            margin: 26px 0 0 46px;
            &.tank {
                margin-left: 0;
            }
            img {
                width: 80%;

            }
        }
        .shot-wrap {
            position: absolute;
            top: 345px;
            width: 873px;
            height: 279px;
            // border: 3px solid #fff;
            left: 715px;
            // animation: shot 4s ease-in-out infinite ; 
            .shot {
                width: 151px;
                height: 120px;
                position: absolute;
                right: 0;
                top: 0;
                background-image: url(/src/img/rock.png);
                // animation: rock 4s ease-in-out infinite; 
            }
        }
        .aim {
            position: absolute;
            left: 680px;
            top: 60px;
            width: 138px;
            height: 138px;
            background-image: url(/src/img/1.0/play-btn.png);
            z-index: 4;
            cursor: pointer;
            .aim-in {
                width: 138px;
                height: 138px;
                background-image: url(/src/img/1.0/rotate.png);
                position: absolute;
                left: 0;
                top: 0;
                animation: aim_in 1.5s linear infinite;
            }
           
        }
        .aim:hover .aim-in {
            animation: none;
        }
        .aim:hover .aim-out {
            animation: none;
        }
        .bg-1-content {
            max-width: 1920px;
            min-width: 650px;
            margin: 320px auto 0 auto;
            position: relative;
            .content-bg {
                width: 637px;
                height: 239px;
                background-image: url(/src/img/1.0/content-bg.png);
                margin-left: 30px;
                .blank {
                    height: 40px;
                }
            }
            .content-wrap {
                width: 620px;
                margin-left: 20px;
                @include clearfix;
                .f {
                    float: left;
                }
                .l {
                    position: relative;
                    &:after {
                        content:"扫一扫下载游戏";
                        position: absolute;
                        top: -20px;
                        width: 160px;
                        left: 0;
                        color: #fff;
                        text-align: center;
                    }
                }
                .m {
                    margin: 9px 14px;
                    img {
                        display: block;
                        margin-bottom: 15px;
                    }
                }
                .r {
                    a {
                        display: block;
                    }
                }
            }
            .text {
                margin-top: 45px;
                width:856px;
                height: 234px;
                background: url(/src/img/1.0/text.png) no-repeat;
            }
        }
       
    }
    .bg-2 {
        height: 1963px;
        background: url(/src/img/1.0/bg_02.jpg) no-repeat center top;
        .bg-2-content {
            width: 1100px;
            margin: 0 auto;
            padding-top: 160px;
            .task-content {
                width: 1100px;
                .task-wrap {
                    @include clearfix;
                    margin-right: -50px;
                    li {
                        float: left;
                        width: 182px;
                        height: 386px;
                        margin-right: 48px;
                        transition: 1s all ease-in-out;
                        &.bg1 {
                            background-image: url(/src/img/1.0/taskbg1.png);
                        }
                        &.bg2 {
                            background-image: url(/src/img/1.0/taskbg2.png);
                        }
                        &.bg3 {
                            background-image: url(/src/img/1.0/taskbg3.png);
                        }
                        &.bg4 {
                            background-image: url(/src/img/1.0/taskbg4.png);
                        }
                        &.bg5 {
                            background-image: url(/src/img/1.0/taskbg5.png);
                        }
                        &:hover {
                            transform: rotateY(-360deg);
                        }
                        cursor: pointer;
                        .wrap {
                            padding-top: 60px;
                            text-align:center;
                            color: #2d365b;
                            img {
                                width: 176px;
                                height: 142px;
                            }
                            .name {
                                margin-top: 10px;
                            }
                            .task-name {
                                font-size: 24px;
                                font-weight: bold;
                                margin-top: 35px;
                                margin-bottom: 25px;
                            }
                            .desc {
                                width: 80%;
                                margin: 0 auto;
                            }

                        }
                    }
                }
            }
            .sp-banner {
                width: 1000px;
                height: 500px;
                position: relative;
                margin: 190px auto 180px auto;
                .dg-wrapper {
                    position: relative;
                    width: 100%;
                    margin: 0 auto;
                    -webkit-transform-style: preserve-3d;
                    -moz-transform-style: preserve-3d;
                    -o-transform-style: preserve-3d;
                    -ms-transform-style: preserve-3d;
                    transform-style: preserve-3d;
                    -webkit-perspective: 1000px;
                    -moz-perspective: 1000px;
                    -o-perspective: 1000px;
                    -ms-perspective: 1000px;
                    perspective: 1000px;
                    a.dg-transition{
                        -webkit-transition: all 0.5s ease-in-out;
                        -moz-transition: all 0.5s ease-in-out;
                        -o-transition: all 0.5s ease-in-out;
                        -ms-transition: all 0.5s ease-in-out;
                        transition: all 0.5s ease-in-out;
                    }
                    a {
                        display: block;
                        width: 882px;
                        height: 496px;
                        position: absolute;
                        left: 59px;
                        top: 0;
                        box-shadow: 0 5px 10px rgba(0,0,0,.3);
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .dg-prev,.dg-next {
                    position: absolute;
                    display: block;
                    width: 95px;
                    height: 441px;
                    top: 45px;
                    cursor: pointer;
                }
                .dg-prev {
                    left: -35px;
                }
                .dg-next {
                    right: -35px;
                }
                
            }
            .news-wrap {
                width: 1000px;
                height: 340px;
                margin: 0 auto;
                @include clearfix;
                .news-banner {
                    float: left;
                    border: 1px solid #fff;
                    width: 600px;
                    height: 340px;
                    position: relative;
                    .swiper-slide {
                        width: 600px;
                        height: 340px;
                        background-color: #fff;
                        a{
                            display: block;
                            width: 100%;
                            height: 100%;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    
                }

                .news-article {
                    float: right;
                    .news-title {
                        text-align: center;
                        color: #fff;
                        border-bottom: 2px solid #fff;
                        width: 360px;
                        font-size: 18px;
                        padding-bottom: 15px;
                    }
                    .atricle-tb {
                        width: 360px;
                        color: #fff;
                        table-layout: fixed;
                        height: 320px;
                        overflow: hidden;
                        tr{
                            td{
                                line-height: 40px;
                                text-align: right;
                                &:first-child{
                                    width: 295px;
                                    text-align: left;
                                    @include ellipsis;
                                   
                                }
                                a {
                                    color: #fff;
                                }
                            
                            }
                        }
                    }

                    
                    


                }
            }

        }
        
    }
    .bg-3 {
        background-color: #3a4780;
        .bg-3-content {
            width: 1000px;
            height: 280px;
            padding: 89px 0;
            margin: 0 auto;
            position: relative;
            .arrow {
                position: absolute;
                top: 50%;
                margin-top: -36px;
                &.arrow-l {
                    left: -40px;
                }
                &.arrow-r {
                    right: -40px;
                }
            }
            // .tank-banner-wrap {
            //     width: 1000px;
            //     height: 257px;
            //     overflow: hidden;
            //     position: relative;
            //     .roll-banner-wrap {
            //         position: relative;
            //         width: 9999999999px;
            //         height: 257px;
            //         left: 0;
            //         @include clearfix;
            //         .tank-banner-item {
            //             float: left;
            //             width: 1000px;
            //             height: 257px;
            //             @include clearfix;
            //             .tank-img {
            //                 float: left;
            //                 margin-left:145px;
            //                 margin-right: 185px; 
            //                 width: 274px;
            //                 height: 257px;
            //             }
            //             .tank-desc {
            //                 float: left;
            //                 padding-top: 30px;
            //                 .name {
            //                     font-weight: bold;
            //                     color: #ec444e;
            //                     font-size:35px; 
            //                     line-height: 70px;
            //                 }
            //                 .desc {
            //                     font-size: 25px;
            //                     line-height: 40px; 
            //                     color: #fff;
            //                 }
            //             }
            //         }
            //     }
            // }


            .tank-banner-wrap {
                width: 1000px;
                height: 280px;
                overflow: hidden;
                position: relative;
                .roll-banner-wrap {
                    position: relative;
                    width: 9999999999px;
                    height: 280px;
                    left: 0;
                    @include clearfix;
                    .tank-banner-item {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 1000px;
                        height: 280px;
                        @include clearfix;
                        display: none;
                        &.active {
                            display: block;
                            .tank-img {
                                @include opacity(1);
                                -webkit-animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
                                -moz-animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
                                -ms-animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
                                animation: left_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
                                -moz-animation: left_out .5s linear 0s 1 alternate forwards;
                                -webkit-animation: left_out .5s linear 0s 1 alternate forwards;
                                -o-animation: left_out .5s linear 0s 1 alternate forwards;
                                -ms-animation: left_out .5s linear 0s 1 alternate forwards;
                                animation: left_out .5s linear 0s 1 alternate forwards
                            }
                            .tank-desc {
                                @include opacity(1);                                                               
                                -webkit-animation: right_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
                                -moz-animation: right_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
                                -ms-animation: right_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
                                animation: right_out .5s linear 0s 1 alternate forwards 300ms 0 ease;
                                -moz-animation: right_out .5s linear 0s 1 alternate forwards;
                                -webkit-animation: right_out .5s linear 0s 1 alternate forwards;
                                -o-animation: right_out .5s linear 0s 1 alternate forwards;
                                -ms-animation: right_out .5s linear 0s 1 alternate forwards;
                                animation: right_out .5s linear 0s 1 alternate forwards
                            }
                        }
                        .tank-img {
                            float: left;
                            margin-left:145px;
                            margin-right: 100px; 
                            width: 274px;
                            height: 257px;
                            @include opacity(0);
                        }
                        .tank-desc {
                            float: left;
                            height: 280px;
                            width: 450px;
                            @include opacity(0);                            
                            .name {
                                font-weight: bold;
                                color: #ec444e;
                                font-size:35px; 
                                line-height: 70px;
                            }
                            .desc {
                                font-size: 25px;
                                line-height: 40px; 
                                color: #fff;
                                &:last-child {
                                    padding-left: 75px;
                                    position: relative;
                                    &::before {
                                        content:"技能：";
                                        position: absolute;
                                        left: 0;
                                        top: 0;   
                                    }
                                }
                            }
                        }
                    }
                }
            }





        }
    }
    .bg-4 {
        height: 615px;
        background: url(/src/img/bg_03.jpg) no-repeat center top;
        .bg-4-content {
            padding-top: 175px;
            width: 825px;
            margin: 0 auto;
            text-align: center;
            .game-group-box {
                width: 302px;
                margin: 0 auto; 
                padding-bottom: 20px;
                position: relative;
                background-color: #fff;
                &:after {
                    content:"点击加入坦克官方Q群";
                    position: absolute;
                    bottom: 15px;
                    width: 100%;
                    text-align: center;
                    display: block;
        }
            }
            .qrcode {
                width: 374px;
                height: 374px;
            }
            p {
                color: #fff;
                font-size: 18px;
                margin: 15px 0;
            }
            
        }
        
    }
    .bg-5 {
        padding: 30px 0;
        background-color: #3a4780;
        text-align: center;
        p {
            color: #fff;
            font-size: 18px;
            margin-bottom: 30px;
        }
        .logo-wrap {
            img{
                margin: 0 25px;
            }
        }
    }
}

.video-box{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    @include opacity(0.6);
    z-index: 10;
    
}

.video-wrap {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -250px;
    z-index: 20;
    i{
        display: block;
        width: 30px;
        height: 30px;
        color: #eee;
        line-height: 30px;
        text-align: center;
        position: absolute;
        right: -32px;
        top: 0;
        cursor: pointer;
        font-size: 20px;
        border: 3px solid #000;
        border-left: 0;
    }
}

.form-box{
    .form-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        @include opacity(0.6);
        z-index: 5;
    }
    .form-wrap{
        width: 373px;
        height: 253px;
        background: url(/src/img/dialog.png) 100% 100%;
        position: fixed;
        left: 50%;
        top:50%;
        margin-left: -186px;
        margin-top: -126px;
        z-index: 10;
        .form-close {
            display: block;
            position: absolute;
            right: 10px;
            top: 5px;
            color: #c74923;
            font-size: 20px;
            cursor: pointer;
        }
        .form-bd{
            margin-top: 85px;
            padding: 0 40px;
            p{
                color:#fff;
            }
            .form-radio{
                font-size: 16px;
                margin: 20px 0;
                .form-label{
                    margin-left: 8px;
                }
            }
        }
        .sign-box{
            height: 42px;
            padding: 0 40px;
            .signUp-btn{
                width: 100%;
                height: 100%;
                border: 0;
                outline: 0;
                background-color:#fff;
                color: #ea710e;
                font-size: 15px;
                &:active{
                    background-color: #fde4d1;
                }
            }
        }
        #phone{
            width: 100%;
            height: 40px;
            outline: 0;
            border: 0;
            background-color: #c64923;
            text-align: center;
            color: #fff;
            line-height: 40px;
            font-size: 16px;
            &::-webkit-input-placeholder{
                color:#fff;
            }
            &:-moz-placeholder{
                color:#fff;
            }
            &::-moz-placeholder{
                color:#fff;                
            }
            &:-ms-input-placeholder{
                color: #fff;
            }
        }
    }
}

//验证码样式
.dialog-code {
    font-size: 14px;
    .code-wrap {
        @include clearfix;
        height: 65px;
        padding-bottom: 15px;
        .code-img {
            width: 205px;
            height: 100%;
            float: left;
            text-align: center;
            img {
                vertical-align: middle;
            }
        }
        .code-again {
            float: left;
            line-height: 24px;
            color: #333;
            margin-top: 5px;
            .change-codeimg {
                cursor: pointer;
                color: #30a5ef;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
    .input-line {
        color: #777;
        line-height: 36px;
        input {
            border: 1px solid #E3E3E3;
            width: 163px;
            height: 36px;
            line-height: 36px;
            padding-left: 10px;
        }
    }
    .btn-line {
        text-align: center;
        margin-top: 20px;
        span {
            @include inline-block; //width: 130px;
            width: 271px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            background: #30a5ef;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            &:hover {
                background: #1386cf;
            }
        }
    }
}


@keyframes aim_in {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes aim_out {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@keyframes shot  {
    0% {
        transform: rotate(0deg);
        width: 873px;
        height: 279px;
    }
    40%,100% {
        transform: rotate(-100deg);
        width: 220px;
        height:  1000px;
        visibility: hidden;
    }
}

@keyframes rock {
    0% {
        transform: scale(1);   
    }
    40% , 100%{
        transform: scale(0.5); 
    }
}






/*坦克轮播动画*/
@-webkit-keyframes left_out {
    0% {
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes left_out {
    0% {
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes left_out {
    0% {
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-o-keyframes left_out {
    0% {
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes left_out {
    0% {
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-webkit-keyframes right_out {
    0% {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes right_out {
    0% {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes right_out {
    0% {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-o-keyframes right_out {
    0% {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes right_out {
    0% {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

.dw-min-popup-dancer  {
    display: none !important; 
}

.animate-wrap {
    position: fixed;
    width: 100%;
    height: 960px;
    background: url(/src/img/1.0/animate-bg.jpg) center no-repeat;
    z-index: 999;
    .animate-inner {
        width: 1400px;
        margin: 0 auto;
        height: 100%;
        position: relative;
        .shot1 {
            position: absolute;
            width: 224px;
            height: 102px;
            background: url(/src/img/1.0/shot_03.png);
            top: 240px;
            left: 230px;
        }
        .shot2 {
            position: absolute;
            width: 225px;
            height: 123px;
            background: url(/src/img/1.0/shot_06.png);
            bottom: 426px;
            right: 200px;
        }
    }
    .animate-img {
        img {
            position: fixed;
            z-index: 9999;
            width: 100%;
            height: 100%;
            top: 0;
        }
    }
}

@keyframes fadeIn {
    0% {
        @include opacity(1);
    }
    50%{
        @include opacity(0);
    }
    100% {
        @include opacity(1);
    }
}

@keyframes fadeOut {
    0% {
        filter: brightness(0.8)
    }
    50% {
        filter: brightness(1.4)
        
    }
    100% {
        filter: brightness(0.8)     
    }
}

@keyframes float1 {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(20px)
        
    }
    100% {
        transform: translateY(0)   
    }
}

@keyframes float2 {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(10px)
        
    }
    100% {
        transform: translateY(0)   
    }
}

@keyframes float3 {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(15px)
        
    }
    100% {
        transform: translateY(0)   
    }
}

@keyframes float4 {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(15px)
        
    }
    100% {
        transform: translateY(0)   
    }
}