.webonly {display:none; }
.mobonly {display:block;}
.mobphone{display:block;}
.mobpad  {display:none; }

/*--------------------------------------------------------*/

.lefttop{
  position: fixed;
  top:0;
  left:0;
  z-index: 0;
  width:38%;
  max-width: 522px;
  height:322px;
  background: url(../image/lefttop.png) no-repeat;
  background-size:100%; 
}
.bgdown{
  position: absolute;
  bottom:0px;
  right: 0px;
  z-index: 1;
  width:100%;
  height:390px;
  background: url(../image/bg2.png) no-repeat bottom fixed;
  background-size:100%; 
}
.bgdown2{
  position: relative;
  width:100%;
  float: left;
  bottom:0px;
  right: 0px;
  z-index: 1;
  width:100%;
  height:266px;
  background: url(../image/bg2.png) no-repeat bottom;
  background-size:100%; 
}

.back{
  background: url(../image/bg/bg.jpg) no-repeat;
  background-size: cover;
  background-position: fixed;
  position: fixed;
  width:100%;
  height:100%;

}

.toplogo{
  margin: 5% 0 0 0;
}

.logo{
  width:100%;
  max-width:610px;
  margin: 0% auto;
  /*background: #f00;*/
}

.topsloganall{
  margin:1% 0;
}
.topslogan{
  margin:2% 0;
}
.topslogan h1{
  font-size:3em;
  font-weight: bold;
  text-shadow:0px 0px 25px #454545;
  color:#FDD000;
}
.leftside{
  text-align: center;
}
.rightside{
  text-align: center;
}

.subsloganall{
  margin: 1% 0 1% 0;
}
.subsloganall .lastsub{
  margin:0 0 0 0%;
}
.subslogan{
  padding:0 0 0 70px;
  margin: 2% 0;
}
.subslogan h2,.subslogan span{
  font-size: 40px;
  font-weight: bold;
  color:#fff;
}
.subslogan span{
  color:#FDD000; 
}
.subslogan::before{
  content: '';
  position: absolute;
  background: url(../image/check.png)no-repeat top center;
  background-size: 60%;
  height: 100%;
  z-index: 1;
  width: 68px;
  left:0;
}


.joinarea{
  margin: 0% 0 0 0 ;
}
.join,.joinboard{
  width:100%;
  max-width:630px;
  margin: 0% auto;
  /*background: #f00;*/
}
.join h3{
  font-size: 25px;
  text-shadow:0px 0px 20px #333;
  font-weight: bold;
  color:#FFF;
  text-align: center;
  padding: 10% 0 10% 0;
}
.join::before{
  content: '';
  position: absolute;
  background: url(../image/join.png)no-repeat;
  background-size: 100%;
  height: 160px;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.formset{
  margin:1% 0% 4% 0%;
  width:100%;
  z-index: 5;
}

.iphone{
  position: absolute;
  right:26px;
  /*background: #f00;*/
  right:10%;
  top:12%;
  z-index: 1;
  text-align: justify;
  color:#F09EC1;
  font-size: 70px;
  font-weight: bold;
  line-height: 60px;
  -moz-transform:rotate(16deg);
  -webkit-transform:rotate(16deg);
  -o-transform:rotate(16deg);
  -ms-transform:rotate(16deg);
  transform:rotate(16deg);
}

.iphoneformob{
  text-align: center;
  color:#F09EC1;
  font-size: 3em;
  font-weight: bold;
  line-height: 45px;
  margin: 2% 0;
}

.iphoneformob .top{
  font-size: 34px;
}

.fblink{
  
  position:relative;
  margin:4% 6% 4% 0%;
  width:290px;
  z-index: 6;
  /*bottom:70px;*/
  float: right;
}

.copyright{
  text-align: center;
  color: #fff;
  font-size: 12px;
  margin: 0% 0 3% 0;
}



/*右上攝影機
------------------------------------------------*/
.iphone .top{
  font-size: 50px;
}
.camera{
  width:79%;
  position: absolute;
  z-index: 2;
  right:-80px;
  top:-360px;
  animation:TestMove 1s infinite alternate; /*IE*/
  -moz-animation:TestMove 1s infinite alternate; /*FireFox*/
  -webkit-animation:TestMove 1s infinite alternate; /*Chrome, Safari*/
}
@keyframes TestMove{
    from {transform:rotate(-5deg);
    transform-origin:right bottom;}
    to {transform:rotate(5deg);
    transform-origin:right bottom;}
}
@-moz-keyframes TestMove{
   from {transform:rotate(-5deg);
   transform-origin:right bottom;}
    to {transform:rotate(5deg);
    transform-origin:right bottom;}
}
@-webkit-keyframes TestMove{
    from {transform:rotate(-5deg);
    transform-origin:right bottom;}
    to {transform:rotate(5deg);
    transform-origin:right bottom;}
}

/*左上打版
--------------------------------------------------*/
.board{
  width:200px;
  height:200px;
  top:10%;
  /*background-color: #f00;*/
  position: absolute;
  z-index: 2;
}
.board2{
 
  margin: -4px 0 0 0px;
}
.board1{
  margin: 0 0 0 14px;
  animation:movetopboard .8s infinite alternate; /*IE*/
  -moz-animation:movetopboard .8s infinite alternate; /*FireFox*/
  -webkit-animation:movetopboard .8s infinite alternate; /*Chrome, Safari*/
}
@keyframes movetopboard{
    from {transform:rotate(-5deg);
    transform-origin:left bottom;}
    to {transform:rotate(12deg);
    transform-origin:left bottom;}
}
@-moz-keyframes movetopboard{
   from {transform:rotate(-5deg);
   transform-origin:left bottom;}
    to {transform:rotate(12deg);
    transform-origin:left bottom;}
}
@-webkit-keyframes movetopboard{
    from {transform:rotate(-5deg);
    transform-origin:left bottom;}
    to {transform:rotate(12deg);
    transform-origin:left bottom;}
}

/*下方爆米花
----------------------------------------------------*/
.popcorn{
  width:30%;
  max-width:470px;
  height:330px;
  position:relative;
  float: left;
  bottom: 0px;
  margin: -9% 0 0 0;
  z-index: 2;
}

.cup img{
  position:absolute;
  bottom: 0px;
}

.corn1,.corn2,.corn3{
  position:absolute;
}
.corn1{
  right:0;
  animation:corn1 .95s infinite ; /*IE*/
  -moz-animation:corn1 .95s infinite ; /*FireFox*/
  -webkit-animation:corn1 .95s infinite ; /*Chrome, Safari*/
}
@keyframes corn1{
  from{
    bottom: 0px;right:20%;
    opacity: 0;width:0px;
    transform:rotate(-180deg);
  }
  to{
    bottom: 70%;right:0%;
    opacity: 1;width:45px;
    transform:rotate(180deg);
  }
}
@-moz-keyframes corn1{
  from{
    bottom: 0px;right:20%;
    opacity: 0;width:0px;
    transform:rotate(-180deg);
  }
  to{
    bottom: 70%;right:0%;
    opacity: 1;width:45px;
    transform:rotate(180deg);
  }
}
@-webkit-keyframes corn1{
  from{
    bottom: 0px;right:20%;
    opacity: 0;width:0px;
    transform:rotate(-180deg);
  }
  to{
    bottom: 70%;right:0%;
    opacity: 1;width:45px;
    transform:rotate(180deg);
  }
}
.corn2{
   animation:corn2 1.8s infinite ; /*IE*/
  -moz-animation:corn2 1.8s infinite ; /*FireFox*/
  -webkit-animation:corn2 1.8s infinite ; /*Chrome, Safari*/
}
@keyframes corn2{
  from {
    bottom: 0px;right:20%;
    opacity: 0;width:0px;
    transform:rotate(-200deg);
  }
  to {
    bottom: 80%;right:40%;
    opacity: 1;width:66px;
    transform:rotate(180deg);
  }
}
@-webkit-keyframes corn2{
  from {
    bottom: 0px;right:20%;
    opacity: 0;width:0px;
    transform:rotate(-200deg);
  }
  to {
    bottom: 80%;right:40%;
    opacity: 1;width:66px;
    transform:rotate(180deg);
  }
}
@-moz-keyframes corn2{
  from {
    bottom: 0px;right:20%;
    opacity: 0;width:0px;
    transform:rotate(-200deg);
  }
  to {
    bottom: 80%;right:40%;
    opacity: 1;width:66px;
    transform:rotate(180deg);
  }
}
.corn3{
  animation:corn3 2.1s infinite ; /*IE*/
  -moz-animation:corn3 2.1s infinite ; /*FireFox*/
  -webkit-animation:corn3 2.1s infinite ; /*Chrome, Safari*/
}
@keyframes corn3{
  from {
    bottom:60px;left:20%;
    opacity: 0;width:66px;
    transform:rotate(-360deg);
  }
  to {
    bottom:0px;left:0%;
    opacity: 1;width:117px;
    transform:rotate(360deg);
  }
}
@-moz-keyframes corn3{
  from {
    bottom:60px;left:20%;
    opacity: 0;width:66px;
    transform:rotate(-360deg);
  }
  to {
    bottom:0px;left:0%;
    opacity: 1;width:117px;
    transform:rotate(360deg);
  }
}

@-webkit-keyframes corn3{
  from {
    bottom:60px;left:20%;
    opacity: 0;width:66px;
    transform:rotate(-360deg);
  }
  to {
    bottom:0px;left:0%;
    opacity: 1;width:117px;
    transform:rotate(360deg);
  }
}

@media (min-width: 700px) {

  .mobphone{display:none;}
  .mobpad{display:block;}

  .subslogan h2,.subslogan span{
    font-size: 30px;
  }
  .subthree{
    width:30%;
  }
  .subfour{
    width:33.3%;
  }

  .join h3{
  font-size: 40px;
  }
  .toptwo{
    width:50%;
  }
  .topslogan h1{
  font-size:3.4em;
  }

}
@media (min-width: 900px) {
 

}

@media (min-width: 1000px) {

  .webonly{
    display: block;
  }
  .mobonly{
    display:none;
  }
  
  .topslogan{
    margin:0% 0;
  }
  .topslogan h1{
    font-size:5em;
  }
  .sybslogan{
    margin: 0% 0;
  }
  .subslogan h2,.subslogan span{
    font-size: 40px;
  }
  .subsloganall .lastsub{
    margin:0 0 0 3%;
  }
  .rightside{
  text-align: right;
  }
  .leftside{
    text-align: left;
  }
  .formset{
  margin:1% 5% 4% 5%;
  width:90%;
  z-index: 5;
  }
  .join h3{
  font-size: 53px;
  text-shadow:0px 0px 20px #333;
  font-weight: bold;
  color:#FFF;
  text-align: center;
  padding: 65px 0 65px 0;
}
.iphone{
  position: absolute;
  right:10%;
  top:6%;
  color:#F09EC1;
  font-size: 40px;
  line-height: 40px;
}
.iphone .top{
  font-size: 29px;
}

.board{
  width:10%;
  /*height:200px;*/
  top:5%;
  /*background-color: #f00;*/
  position: absolute;
  z-index: 2;
}

.fblink{
  
 
  margin:0% 6% 0% 0%;
  width:290px;

}

.copyright{

  margin: 0% 0 3% 0;
}



}

@media (min-width: 1200px) {
  .topslogan h1{
    font-size:6em;
  }
  .subslogan h2,.subslogan span{
    font-size: 56px;
  }
  .subslogan::before{
    background-size: 99%;
  }
}

@media (min-width: 1300px) {
  .topslogan h1{
    font-size:6.4em;
  }
  .subslogan h2,.subslogan span{
    font-size: 58px;
  }

  .camera{
    right:-10%;
    top:-360px;
  }
  .iphone .top{
    font-size: 44px;
  }
  .iphone{
    right:26px;
    right:10%;
    top:10%;
    font-size: 60px;
    line-height: 50px;
  }

}

@media (min-width: 1400px) {
  .topslogan h1{
    font-size:6.8em;
  }
  .subslogan h2,.subslogan span{
    font-size: 64px;
  }

  .camera{
    right:-16%;
    top:-380px;
  }
  .iphone{
    top:5.5%;
  }
  

}


@media (min-width: 1500px) {
  .topslogan h1{
    font-size:135px;
  }
  .subslogan h2,.subslogan span{
    font-size: 80px;
  }
  

  .camera{
    right:-80px;
    top:-360px;
  }
  .iphone .top{
    font-size: 50px;
  }
  .iphone{
    right:26px;
    right:10%;
    top:6%;
    font-size: 70px;
    line-height: 60px;
  }

  .camera{
  width:50%;
  position: absolute;
  z-index: 2;
  right:-80px;
  top:-20%;

}

}