* {
        margin: 0;
        padding: 0;
      }
      .wrap {
        width: 100%;
        margin: 0 auto;
        max-width: 960px;
        position: relative;
      }
      .bg {
        width: 100%;
      }
      .header {
        position: absolute;
        top: 15%;
        left: 0;
        width: 100%;
      }
      .header img {
        width: 90%;
        display: block;
        margin: 0 auto;
        cursor: pointer;
      }
      .header .game {
        display: flex;
        list-style: none;
        margin-top: 20px;
        font-size: 48px;
      }
      .header .game li {
        flex: 1;
        text-align: center;
        line-height: 2;
        color: #fff;
      }
      .section {
        position: absolute;
        top: 21%;
        left: 50%;
        transform: translateX(-50%);
        width: 96%;
      }
      		
      .section2 {
        position: absolute;
        top: 33%;
        left: 50%;
        transform: translateX(-50%);
        width: 96%;
		}
      		
      .section3 {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translateX(-50%);
        width: 96%;
		}
      		
      .section4 {
        position: absolute;
        top: 57.1%;
        left: 50%;
        transform: translateX(-50%);
        width: 96%;
		}

      .section .section-bg {
        width: 100%;
      }
      .section .btns {
        position: absolute;
        top: 52%;
        left: 50%;
        transform: translateX(-50%);
        width: 88%;
        display: flex;
        justify-content: space-between;
      }
      .section .btns img {
        width: 44%;
        display: block;
        cursor: pointer;
      }

      
      .activity1 {
        position: absolute;
        top: 16.8%;
        left: 50%;
        transform: translateX(-50%);
        width: 89%;
      }
      .activity1 img {
        width: 100%;
      }
	  .activity2 {
        position: absolute;
        top: 75%;
        left: 52%;
        transform: translateX(-50%);
        width: 101%;
      }
      .activity2 img {
        width: 96%;
      }
      @media screen and (max-width: 500px) {
        .header .game {
          font-size: 16px;
          margin-top: 18px;
        }
      }
	    
	  .activity3 {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translateX(-50%);
        width: 96%;
      }
      .activity3 img {
        width: 100%;
      }
      @media screen and (max-width: 500px) {
        .header .game {
          font-size: 16px;
          margin-top: 18px;
        }
      }
      
 
	  .activity4 {
        position: absolute;
        top: 1.4%;
        left: 50%;
        transform: translateX(-50%);
        width: 73%;
      }
      .activity4 img {
        width: 100%;
      }
      @media screen and (max-width: 500px) {
        .header .game {
          font-size: 16px;
          margin-top: 18px;
        }
      }