body{
    
    position: relative;
}
.box {
    position: absolute;
    width: 100%;
}
#bgImg{
    width: 100vw;
}

@media (min-width: 1200px) {
    
    .download{
        position: absolute;
        width: 10vw;
        height: 10vw;
        cursor: pointer;
    }
    #download {
        
        top: 20vw;
        left: 22vw;
    }
    #download2 {
        
        bottom: 0vw;
        right: 24vw;
    }
    .androidDownload{
        position: absolute;
        width: 10vw;
        height: 10vw;
        cursor: pointer;
    }
    #androidDownload1 {
        
        top: 20vw;
        left: 39vw;
    }
    #androidDownload2 {
        
        bottom: 0vw;
        right: 9vw;
    }
    .swiper-time img{
        width: 100%;
    }
    
    .swiper,
    #swiper {
        
        
        position: absolute;
        bottom: 36vw;
        left: 35%;
    }
    
    .swiper div {
        display: block;
        position: absolute;
        width: 13vw;
        height: 16vw;
        overflow: hidden;
        left: 141px;
        top: 0;
        transition: 0.5s;
        color: #fff;
        font-size: 50px;
        text-align: center;
        line-height: 200px;
    
    }
    
    .swiper .a {
        opacity: 1;
        z-index: 23;
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(500px) translateX(300px) translateZ(-253px) rotateY(-45deg);
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
    }
    
    .swiper .b {
        opacity: 1;
        z-index: 33;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        transform: translateX(0) translateZ(-100px) rotateY(0deg)
    }
    
    .swiper .c {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(500px) translateX(-300px) translateZ(-253px) rotateY(45deg);
    }
    
    .swiper .d {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(960px) translateX(-648px) translateZ(-420px) rotateY(51deg);
    }
    
    .swiper .dd {
        opacity: 0;
        z-index: -1;
        -webkit-transform: translateX(0) translateZ(-300px) rotateY(0);
        -ms-transform: translateX(0) translateZ(-300px) rotateY(0);
        transform: perspective(500px) translateX(0) translateZ(-253px) rotateY(0);
    }
    
    .swiper .e {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(1000px) translateX(605px) translateZ(-374px) rotateY(-60deg);
    }
    
    .swiper .f {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(500px) translateX(-300px) translateZ(-253px) rotateY(45deg);
    }
}


@media (min-width: 768px) and (max-width: 1200px) {
    
    .download{
        position: absolute;
        width: 10vw;
        height: 10vw;
        cursor: pointer;
    }
    #download {
        top: 20vw;
        left: 22vw;
    }
    #download2 {
        bottom: 1vw;
        right: 23vw;
    }
    .androidDownload{
        position: absolute;
        width: 10vw;
        height: 10vw;
        cursor: pointer;
    }
    #androidDownload1 {
        
        top: 20vw;
        left: 39vw;
    }
    #androidDownload2 {
        
        bottom: 0vw;
        right: 9vw;
    }
    .swiper-time img{
        width: 100%;
    }
    
    .swiper,
    #swiper {
        
        
        position: absolute;
        bottom: 36vw;
        left: 32%;
    }
    
    .swiper div {
        display: block;
        position: absolute;
        width: 20vw;
        height: 22vw;
        overflow: hidden;
        left: 10vw;
        top: 0;
        transition: 0.5s;
    }
    .swiper-time img{
        width: 100%;
    }
    .swiper .a {
        opacity: 1;
        z-index: 23;
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(500px) translateX(300px) translateZ(-253px) rotateY(-45deg);
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
    }
    
    .swiper .b {
        opacity: 1;
        z-index: 33;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        transform: translateX(0) translateZ(-100px) rotateY(0deg)
    }
    
    .swiper .c {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(500px) translateX(-300px) translateZ(-253px) rotateY(45deg);
    }
    
    .swiper .d {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(50vw) translateX(-648px) translateZ(-420px) rotateY(51deg);
    }
    
    .swiper .dd {
        opacity: 0;
        z-index: -1;
        -webkit-transform: translateX(0) translateZ(-300px) rotateY(0);
        -ms-transform: translateX(0) translateZ(-300px) rotateY(0);
        transform: perspective(500px) translateX(0) translateZ(-253px) rotateY(0);
    }
    
    .swiper .e {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(50vw) translateX(605px) translateZ(-374px) rotateY(-60deg);
    }
    
    .swiper .f {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(500px) translateX(-300px) translateZ(-253px) rotateY(45deg);
    }
}


@media (max-width: 767px) {
    .download{
        position: absolute;
        width: 36vw;
        height: 34vw;
        cursor: pointer;
    }
    #download {
        top: 20vw;
        left: 22vw;
    }
    #download2 {
        bottom: 1vw;
        right: 23vw;
    }
    .androidDownload{
        position: absolute;
        width: 10vw;
        height: 10vw;
        cursor: pointer;
    }
    #androidDownload1 {
        
        top: 20vw;
        left: 39vw;
    }
    #androidDownload2 {
        
        bottom: 0vw;
        right: 9vw;
    }
    .swiper,
    #swiper {
        
        
        position: absolute;
        bottom: 46vw;
        left: 35%;
    }
    
    .swiper div {
        display: block;
        position: absolute;
        width: 20vw;
        height: 30vw;
        overflow: hidden;
        
        top: 0;
        transition: 0.5s;
    }
    .swiper-time img{
        width: 100%;
    }
    .swiper .a {
        opacity: 1;
        z-index: 23;
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(500px) translateX(30vw) translateZ(-253px) rotateY(-45deg);
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
    }
    
    .swiper .b {
        opacity: 1;
        z-index: 33;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        transform: translateX(0) translateZ(-100px) rotateY(0deg)
    }
    
    .swiper .c {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(500px) translateX(-30vw) translateZ(-253px) rotateY(45deg);
    }

    .swiper .d {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(50vw) translateX(-75vw) translateZ(-420px) rotateY(51deg);
    }

    .swiper .e {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(50vw) translateX(75vw) translateZ(-374px) rotateY(-60deg);
    }

    .swiper .f {
        opacity: 1;
        z-index: 23;
        -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
        transform: perspective(500px) translateX(-30vw) translateZ(-253px) rotateY(45deg);
    }
}


@media (max-width: 480px) {
    .download{
        position: absolute;
        width: 34px;
        height: 35px;
        cursor: pointer;
    }
    #download {
        
        top: 20vw;
        left: 22vw;
    }
    #download2 {
        
        bottom: 0vw;
        right: 22vw;
    }
    .androidDownload{
        position: absolute;
        width: 10vw;
        height: 10vw;
        cursor: pointer;
    }
    #androidDownload1 {
        
        top: 20vw;
        left: 39vw;
    }
    #androidDownload2 {
        
        bottom: 0vw;
        right: 7vw;
    }
    .swiper,
    #swiper {
        
        
        position: absolute;
        bottom: 36vw;
        left: 35%;
    }
    .swiper div {
        display: block;
        position: absolute;
        width: 10vw;
        height: 24vw;
        overflow: hidden;
        left: 12px;
        top: 0;
        transition: 0.5s;
        color: #fff;
        text-align: center;
    }

    
}