body{ margin: 0; width: 100%; height: 100%;}
ul,li{ margin: 0; padding: 0; list-style: none;}

#container{ position:relative; overflow:hidden; width: 100%;}
#container .place{ display: block; width: 100%;}

.scene {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  position: absolute;
}

.layer{
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
.depth-10 {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  bottom: 0;
}

.banner-bg {
  background: url(../images/banner-bg.jpg) no-repeat 50% 100%;
  background-size: cover;
  width: 110%;
  height: 110%;
  left: -5% !important;
  top: -5%  !important;
}

.boy, .girl, .plane{ position:absolute;}

.plane{ left: 0; top: 0; width: 100%; height: 100%;}

.boy {
  width: 33.802%;
  left: 5% !important;
  bottom: -5% !important;
}

.girl {
  width: 26.8229%;
  right: 10% !important;
  bottom: -5% !important;
}
#container{overflow: hidden;}
#container .content{ position: absolute; z-index: 3; width: 28%; min-width: 506px; top: 30%; left: 50%; margin-left: -16%;}
#container .content .text{ display: block; width: 100%;}
#container .content .btn-group{ margin: 0 5px; padding-top: 50px; overflow: hidden;}
#container .content .btn-group span{ display: block; width: 50%; height: 66px;  line-height: 66px;  float: left; text-align: center;}
#container .content .btn-group span a{ display: block; font-size: 20px; height: 100%; background-color: #FFF; color: #00733d; text-decoration: none;  background-image: url(../images/btn-bg.gif);  background-repeat: no-repeat; background-size: 0 100%;}
#container .content .btn-group span:nth-child(1) a{ margin-right: 5px;}
#container .content .btn-group span:nth-child(2) a{ margin-left: 5px;}

.icon-cup{ display: inline-block; vertical-align:middle; width: 20px; height: 32px; background-image: url(../images/icon-cup.png); background-repeat: no-repeat; background-position: left top; margin-right: 5px; position: relative; top: -5px;}
.icon-card{ display: inline-block; vertical-align:middle; width: 28px; height: 22px; background-image: url(../images/icon-card.png); background-repeat: no-repeat; background-position: left top; margin-right: 8px; position: relative; top: -2px;}

#container .content .btn-group span a.active{color: #FFF; background-size: 100%;}
#container .content .btn-group span a.active .icon-cup{ background-position: -20px top;}
#container .content .btn-group span a.active .icon-card{ background-position: -28px top;}


@media screen and (max-width: 1400px){
  .girl {
    right: 5% !important;
  }
}

@media screen and (max-width: 1250px){
  .boy {
    left: 5% !important;
  }
}

@media screen and (max-width: 1150px){
  .boy {
    left: 0% !important;
  }
  .girl {
    right: 0 !important;
  }
  #container .content {
    width: 26.3541%;
    min-width: 480px;
    top: 20%;
    left: 50%;
    margin-left: -20%;
  }
}

@media screen and (max-width: 900px){
  .banner-bg {
    background: url(../images/640/banner-bg.jpg?v=2) no-repeat 50% 100%;
    background-size: cover;
    width: 110%;
    height: 110%;
    left: -5% !important;
    top: -5%  !important;
  }
  #container .content{ position: absolute; z-index: 3; width: 80%; min-width: 80%; top: 25%; left: 10%; margin-left: 0%;}
  #container .content .btn-group{padding-top: 30px; width: 200px; margin: auto;}
  #container .content .btn-group span{width: 100%; height: 50px;  line-height: 50px;  float: none; }
  #container .content .btn-group span a{font-size: 18px;}
  #container .content .btn-group span:nth-child(1) a{ margin-right: 0px;}
  #container .content .btn-group span:nth-child(2) a{ margin-left: 0px; margin-top: 10px;}

  .icon-cup{ width: 20px; height: 32px; margin-right: 5px; top: -1px;}
  .icon-card{width: 20px; height: 16px; margin-right: 8px; top: -2px; background-size: 40px 16px;}

  #container .content .btn-group span a.active{color: #FFF; background-size: 100%;}
  #container .content .btn-group span a.active .icon-cup{ background-position: -20px top;}
  #container .content .btn-group span a.active .icon-card{ background-position: -28px top;}

  .plane{ width: 100%; height: 60%; left: 0; top:auto;  bottom: 0;}

  .boy {
    width: 60%;
    left: -15% !important;
    bottom: -10% !important;
  }

  .girl {
    width: 50%;
    right: -10% !important;
    bottom: -10% !important;
  }
}