body{
    margin:0px;
    position:relative;
}

.main-container{
    position:relative;
    /* overflow: hidden; */
    width:1920px;
    transform-origin: top left;
}

.bg{
    width:100%;
}

.sun{
    position: absolute;
    z-index:2;
    left:7%;
    top:3%;
}

.cloud1{
    position: absolute;
    z-index:3;
    left:-7.5%;
    top:31.7%;
    transform-origin: center left;
    animation: cloud1_move 5s infinite;
}

.cloud2{
    position: absolute;
    z-index:1;
    left:18.1%;
    top:68.5%;
    animation: cloud1_move 30s infinite;
}

.cloud3{
    position: absolute;
    z-index:3;
    left:45.2%;
    top:-4.5%;
    animation: cloud1_move 20s infinite;
}

.cloud4{
    position: absolute;
    z-index:3;
    left:67.4%;
    top:15.8%;
    animation: cloud1_move 10s infinite;
}

.cloud5{
    position: absolute;
    z-index:1;
    left:86.6%;
    top:42.8%;
    animation: cloud1_move 23s infinite;
}

.cloud6{
    position: absolute;
    z-index:3;
    left:87.1%;
    top:-8.1%; 
    animation: cloud1_move 17s infinite;
}

.cloud7{
    position: absolute;
    z-index:3;
    left:-20%;
    top:5.8%;
    animation: cloud1_move 8s 5s infinite;
}

.cloud8{
    position: absolute;
    z-index:3;
    left:14.5%;
    top:9%;
    animation: cloud1_move 15s infinite;
}

.cloud_group1{
    position: absolute;
    z-index:3;
    left:100%;
    top:0%;
    /* animation: cloud_group_move1 60s infinite; */
}

.cloud_group2{
    position: absolute;
    z-index:3;
    left:100%;
    top:0%;
    /* animation: cloud_group_move2 60s infinite; */
}

.cloud-container{
    overflow:hidden;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

.plane1{
    position: absolute;
    z-index:5;
    left:52%;
    top:14.5%; 
    animation: plane1 1s infinite;
}

.flag1{
    position: absolute;
    z-index:4;
    left:calc(32% + 211.5px)!important;
    top:calc(18.7% + 65px)!important;
}

.plane2{
    position: absolute;
    z-index:5;
    left:29.1%;
    top:45.3%;
    animation: plane2 1s infinite;
}

.flag2{
    position: absolute;
    z-index:4;
    left:calc(10% + 211.5px)!important;
    top:calc(47.8% + 65px)!important; 
}

.plane3{
    position: absolute;
    z-index:5;
    left:56.1%;
    top:71.8%; 
    animation: plane3 1s infinite;
}

.flag3{
    position: absolute;
    z-index:4;
    left:calc(36.4% + 211.5px)!important;
    top:calc(75.5% + 65px)!important; 

}

.flag4, .flag5, .flag6{
    display:none;
}

@keyframes cloud1_move {
    0% {left: 120%;}
    100% {left: -20%;}
}

@keyframes cloud_group_move1 {
    0% {left: 100%;}
    50% {left: -120%;}
    100% {left: -120%;}
}

@keyframes cloud_group_move2 {
    0% {left: 100%;}
    15% {left: 100%; }
    70% {left: -120%;}
}

@keyframes plane1 {
    0% {transform: translateY(0%);}
    50% {transform: translateY(3%);}
    100% {transform: translateY(0%);}
}

@keyframes plane2 {
    0% {transform: translateY(0%);}
    50% {transform: translateY(-3%);}
    100% {transform: translateY(0%);}
}

@keyframes plane3 {
    0% {transform: translateY(0%);}
    50% {transform: translateY(3%);}
    100% {transform: translateY(0%);}
}

@keyframes flag1 {
    0% {transform: rotate(-3deg); }
    50% {transform: rotate(3deg);}
    100% {transform: rotate(-3deg);}
}

@keyframes flag2 {
    0% {transform: rotate(3deg); }
    50% {transform: rotate(-3deg);}
    100% {transform: rotate(3deg);}
}

@keyframes flag3 {
    0% {transform: rotate(-3deg); }
    50% {transform: rotate(3deg);}
    100% {transform: rotate(-3deg);}
}

/* flag wave */


* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: lightgrey;
}

body {
    text-align: center;
    position: relative;
}

ul, li {
    list-style: none;
}

.flag {
    position: absolute;
    left: 50%;
    top: 50%;
}
        
/* 这里是核心css样式 */

.flag1 > li {
    height: 100%;
    float: left;
    background-image: url("../images/index/flag1.png");
    background-size: auto 100%;
    animation: flag ease-in-out infinite;
}

.flag2 > li {
    height: 100%;
    float: left;
    background-image: url("../images/index/flag2.png");
    background-size: auto 100%;
    animation: flag ease-in-out infinite;
}

.flag3 > li {
    height: 100%;
    float: left;
    background-image: url("../images/index/flag3.png");
    background-size: auto 100%;
    animation: flag ease-in-out infinite;
}


.flag {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    animation: flag-reverse ease-in-out infinite;
}

.bg-m{
    display:none;
    width:100%;
}

.board_txt{
    font-family: 'Fredoka One', cursive;
}

.board-container{
    position:relative;
}

.board_txt1{
    font-size:48px;
    text-align:center;
    position: absolute;
    top:33px;
    width:100%;
}

.board_txt2{
    font-size:60px;
    text-align:center;
    position: absolute;
    top:102px;
    width:100%;
}

.board_txt3{
    font-size:48px;
    text-align:center;
    position: absolute;
    top:183px;
    width:100%;
}

.game-container{
    position: relative;
}

.game-text-container{
    position: absolute;
    width:80%;
    height:168px;
    display:flex;
    align-items: center;
    justify-content: center;
    top:0px;
    left:calc(50% - 64px);
    /* transform: translateX(-50%); */
}

.game-txt{
    font-size:25px;
    color:#FFF;
    font-family: Arial;
}

@media screen and (max-width: 750px) {
    .main-container{
        width:750px;
    }
    .bg-m{
        display:block;
    }
    .bg{
        display:none;
    }
    .plane1{
        width:337px;
        top:29.4%;
        left:42.6%;
    }
    .plane2{
        width:370px;
        top:48.7%;
        left:42.6%;
    }
    .plane3{
        width:375px;
        top:66.8%;
        left:42.6%;
    }
    .flag{
        width:280px;
    }
    .cloud{
        transform: scale(0.8);
    }

    .cloud1{
        top:5%;
    }
    
    .cloud2{
        top:18%;
        z-index:2;
    }
    
    .cloud3{
        top:28%;
    }
    
    .cloud4{
        top:35%;
    }
    
    .cloud5{
        top:50%;
    }
    
    .cloud6{
        top:70%;
    }
    
    .cloud7{
        top:80%;
    }
    
    .cloud8{
        top:90%;
    }

    .flag1, .flag2, .flag3{
        display:none;
    }

    .flag4, .flag5, .flag6{
        display:block;
    }

    .flag4{
        position: absolute;
        z-index:4;
        left:calc(10% + 140px)!important;
        top:calc(31.8% + 43px)!important; 
    }

    .flag5{
        position: absolute;
        z-index:4;
        left:calc(10% + 140px)!important;
        top:calc(49.7% + 43px)!important;  
    }

    .flag6{
        position: absolute;
        z-index:4;
        left:calc(10% + 140px)!important;
        top:calc(68.8% + 43px)!important;  
    }

    .flag4 > li {
        background-image: url("../images/index/m/flag1.png");
        height: 100%;
        float: left;
        background-size: auto 100%;
        animation: flag ease-in-out infinite;
    }
    
    .flag5 > li {
        background-image: url("../images/index/m/flag2.png");
        height: 100%;
        float: left;
        background-size: auto 100%;
        animation: flag ease-in-out infinite;
    }
    
    .flag6 > li {
        background-image: url("../images/index/m/flag3.png");
        height: 100%;
        float: left;
        background-size: auto 100%;
        animation: flag ease-in-out infinite;
    }

    /* .flag1{
        width:280px!important;
        height:86px!important;
    } */

    

    @keyframes cloud1_move {
        0% {left: 150%;}
        100% {left: -50%;}
    }
}