@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');

body{
	/*background-color: #03a6d1;*/
  /*background-color: #fff;*/
  height: 100%;
  /*font-family: Arial,"Apple LiGothic Black", "Impact", "微軟正黑體";*/
  /*font-family: 'Noto Sans TC',Arial,"Apple LiGothic Black", "微軟正黑體",sans-serif;*/
  font-size: 14px;

}

body{
    /*background: url('../images/bbg.jpg') top left;*/
    background: url('../images/BG.png') top left;
    background-repeat:no-repeat;
    /*background-repeat: repeat-y;*/
    /*background-repeat: repeat-x;*/
    background-size: 100% auto;
    background-color: #dff2d4;
    /*background-attachment: fixed;*/
    font-family: 'Noto Sans TC',Arial,"Apple LiGothic Black", "微軟正黑體",sans-serif; 
}

img{
  pointer-events: none;
    /*border: 1px solid #ff0000;*/
}

input{ font-size:16px; }

label, table
{ font-family: 'Noto Sans TC',Arial,"Apple LiGothic Black", "微軟正黑體",sans-serif; }


.outsideline
{
    display: block;
    position: relative;
    position: absolute;
    width: 100%;
    height: 100%;

    top: 0%;
    left: 50%;
    transform: translateX(-50%);

    min-height: 100%;
    /*margin-bottom: -78px;*/

    /*border: 1px solid #dd00cc;*/
    


    /*padding-bottom: 50px;*/
}

.insideLine{}

::placeholder { /* CSS 3 標準 */

  color: #fff;

}

::-webkit-input-placeholder { /* Chrome, Safari */

  color: #fff;

}

:-ms-input-placeholder { /* IE 10+ */

  color: #fff;

}

::-moz-placeholder { /* Firefox 19+ */

  color: #fff;

  opacity: 1;

}




.refH{
    display: block;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    /*z-index: 0;*/

    display: none;
}

.refH2{
    display: block;
    width: 100%;

    position: relative;
    top: 0;
    left: 0;

    opacity: 1;

}



.commingsoon{
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;
}





/* set to center*/
._CTR{
  left: 50%;
  transform: translateX(-50%);
}

.skyBG{
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*z-index: 1;*/
}


.container{
  display: block;
  width: 50%;

  position: relative;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /*border: 1px solid #ff00ff;*/
  z-index: 10;

  min-height: 100%;

}






.logo{
  display:block;
  width: 40%;

  position: absolute;
  /*position: relative;*/
  top: 15%;
  /*transform: translateY(-15%);*/
  /*top: 0;*/
  left: 30%;
  /*transform: translateX(-50%);*/



  /*margin-top: 8%;*/
  /*margin-bottom: 2px;*/
}




.BOXs{
  display: none;
  width: 100%;
  height: 100%;

  position: relative;
  top: 0;
  left: 0;

  /*border: 1px solid orange;*/
  

}



.header{
  display: block;
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;

}

.BG_P{
  display: block;
  width: 100%;

  position: absolute;ㄑ
  position: fixed;
  top: 0;
  left: 0;
}

.BG_M{
  display: none;
  width: 100%;

  position: absolute;ㄑ
  top: 0;
  left: 0;
}

.footer_P,
.footer_M,
.footer_M_under
{
  display: block;
  width: 100%;

  position: absolute;
  position: fixed;
  left: 0;
  /*bottom: -10vw;*/
  /*top: 65%;*/
  bottom: 0;

}

.footer_M{
  display: none;
  /*bottom: -50%;
  bottom: -45%;*/
  bottom: 0;
  /*top: 75%;*/

}

.footer_M_under{
  display: block;
  /*bottom: 0;*/
  top: 95%;
  display: none;
}


/*/////////////////////////////////////////////*/
/*/////////////////// index ///////////////////*/
/*/////////////////////////////////////////////*/

.btnStart{
  display: block;
  width: 30%;

  /*position: relative;*/
  position: absolute;
  top:16%;
  /*left: 50%;
  transform: translateX(-50%);*/
  left: 35%;

  pointer-events: auto;

  /*margin-top: 25%;*/
}



.discript_P{
  display: none;
  /*display: block;*/
  width:60%;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /*margin-top: 12%;*/
  /*border: 1px solid;*/
}

.discript_M{
  display: none;
  width: 90%;

  position: absolute;
  top: 0%;
  left: 5%;


  opacity: 0;
}


.mapBox{
  display: none;
  width: 60%;

  position: relative;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);


}

/*.map_P{ width: 60%; }*/


.mapBox img{
  display: block;
  width: 100%;


  position: absolute;
  position: relative;
  top:0;
  left: 0;
}


.mapBox div{
  display: block;
  height: 100%;

  position: absolute;
  top:0;
  left: 0;

  opacity: 0;
/*
  background-color: rgba(0,0,0,0.2);
  opacity: 1;
  border: 1px solid;*/
}

.mapBox .map1{ 
  width: 39%; 
  width: 38%;

  left: 18%;
  width: 20%;
}
.mapBox .map2{ 
  left: 39%;
  width: 23%;

  left: 40%;
  width: 20%;
}
.mapBox .map3{ 
  left: 62%;
  width: 38%;

  left: 63%;
  width: 20%;
}



#mapSelection{
  display: none;
}

.mapZone{
  display: block;
  width: 30%;

  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /*background-color: #ccc;*/
}


.zoneBG{ 
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;
}

.pP{ display: block; }
.pM{ display: none; }

.btnZone,
.btnReSelect
{
  display: block;
  width: 30%;

  position: absolute;
  top: 82%;
  left: 17%;

  pointer-events: auto;
}

.btnReSelect{
  left: 51%;
}





/*/////////////////////////////////////////////*/
/*/////////////////// MENU ///////////////////*/
/*/////////////////////////////////////////////*/

.menuUL{
  display: inline-block;
  width: 750px;
  width: 780px;
  height: 20px;

  position: relative;
  top: -10px;
  /*left: 20%;*/
  /*left: 40%;*/
  /*transform: translateX(-40%);*/
  left: 0%;
  /*transform: translateX(-50%);*/

  /*margin-top: 37px;*/
  /*z-index: 999;*/

  /*border: 1px solid #ff00ff;*/
  /*width: 900px;*/

}

.menuUL li{
  display: inline-block;
  height: 100%;

  position: relative;
  top: 0;
  left: 0;
  /*border: 1px solid #00ffff;*/
}

.menuUL li img{
  display: block;
  width: 100%;
  height: 100%;

  position: relative;
  top: 0;
  left: 0;

  pointer-events: auto;
}

.containerLOGO{
  display: block;
  width: 1050px;
  width: 1075px;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  margin-top: 20px;
  z-index: 20;

  /*border: 1px solid #00f0f0;*/
}

.logoNew{
  display: inline-block;
  width: 250px;

  position: relative;
  top: 0;
  right: 0; 
  margin-left: 30px;
  /*border: 1px solid #00ffff;*/
}



.btnMenu{
  display: none;
  width: 8%;

  position: relative;
  top: 0;
  left: 0;

  margin-top: 8px;
  margin-left: 8px;

  pointer-events: auto;
  z-index: 400;
}



.menuBox{
  display: block;

  width: 100%;

  position: absolute;
  top: 0;
  left: 0;

  padding-top: 12%;
}

.menuBG{
  display: block;
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;

}

.btnX{
  display: block;
  width: 8%;

  position: absolute;
  top: 0;
  left: 0;

  margin-top: 8px;
  margin-left: 8px;

  pointer-events: auto;
  z-index: 401;
}



.menuImg{
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0%;

  margin-top:12%;
  pointer-events: auto;
}

.menuImg:nth-child(1){ margin-top: 30%; }

#containerMenu{ display: none; }







/*自定義radio 圖片做法*/
.radioLebel{
  height: 18px;
  width: 18px;
  display: inline-block;
  background-image: url('../images/radio.png');
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-size: cover;
}

input[type="radio"]:checked + .radioLebel{
  background-image: url('../images/radioed.png');
}


/*自定義checkbox 圖片做法*/
.chks{ display: none; }

.chks[type=checkbox]+span {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../images/btn-chk.png') no-repeat;
  background-size: cover;
}

.chks[type=checkbox]:checked+span {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../images/btn-chked.png') no-repeat;
  background-size: cover;
}


.chkLeft{ 
  margin-left: 22%; 
}
.txtAG span{ 
  
  border-bottom: 1px solid;
}






/*/////////////////////////////////////////////*/
/*/////////////////// about ///////////////////*/
/*/////////////////////////////////////////////*/
.contentDIV{
  display: block;
  width: 70%;

  position: relative;
  /*position: absolute;*/
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  border-radius: 10px;
  border: 0px solid;
  overflow: hidden;
}

.contentBG{
  display: block;
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;


  /*background-color: rgba(87,128,124,0.8);*/
  background-color: rgba(29,80,86,0.7);

}

.ttop,
.bbotom
{
  display: block;
  width: 90%;

  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  margin-top: 3%;
}

.bbotom{ margin-bottom: 3%; }

.tiltles{
  display: block;
  width: 15%;

  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /*margin-top: 15px;*/
  margin-top: 30px;
  margin-bottom: 15px;
}


.realContent,
.formContent{
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;

  padding-top: 5%;
}

.realContent{
  height: 280px;
  overflow: hidden;
  overflow-y: auto;
}

.realContent span{
  display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 2vh;
}


/*/////////////////////////////////////////////*/
/*////////////////// questions ////////////////*/
/*/////////////////////////////////////////////*/




.q1body,
.q2body,
.q3body
{
  background: url('../images/q1BG.jpg') top left;
  background-repeat:no-repeat;
  background-size: 100% auto;
  /*background-color: #a8e0f9;*/
  background-color: #f0fafc;
}

.q2body{ 
  background: url('../images/q2BG.jpg') top left; 
  background-repeat:no-repeat;
  background-size: 100% auto;
  background-color: #b5dd91;
}
.q3body{ 
  background: url('../images/q3BG.png') top left; 
  background-repeat:no-repeat;
  background-size: 100% auto;
  background-color: #fff6e5;
}

.missionBox,
.answerBOX
{
  display: block;
  /*width: 829px;
  width: 80vh;*/
  width: 30%;

  position: absolute;
  /*position: relative;*/
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /*background-color: #dd00ff;*/

  /*margin-top: 5%;*/
  /*top: 8%;*/
  z-index: 50;
}

.missionBox{
}

.missionBG_P,
.missionBG_M
{
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;

}

.missionBG_M{ display: none; }

.ms1{ display: none; }
.ms2{ display: none; }
.ms3{ display: none; }
.ms4{ display: none; }
.btnA{ pointer-events: auto; }

.til_mission{
  display: block;
  width: 20%;

  position: absolute;
  top: 30%;
  left: 65%;

 /* top: 0;
  margin-top: 30%;*/
}


.ms4 .til_mission{ 
  top:50%;
  left: 75%; 
}


.missionUL{
  display: block;
  width: 90%;

  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);

  /*background-color: #ff00dd;*/
}

.missionUL li{
  display: block;
  /*width: 45%;*/
  width: 55%;

  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /*border: 1px solid;*/

  margin-bottom: 10px;
}

.missionUL li img{
  display: block;
  width: 100%;


}

.ms3 .missionUL li,
.ms4 .missionUL li
{ width: 55%; }


.answerBOX{
  display: block;
  width: 30%;

  margin: 30px auto 0;
  padding-bottom: 30px;

  /*position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);*/

  
}




.ans_P,
.ans_M
{
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;
}
.ans_M{ display: none; }



.btnNext,
.btnComplete{
  display: block;
  width: 35%;

  position: absolute;
  top: 87%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}

.btnComplete{ width: 45%; }

#answer2 .qq1 .btnNext{ top: 78%; }
#answer3 .qq1 .btnNext{ top: 81%; }
#answer4 .qq1 .btnComplete{ top: 80%; }
#answer4 .qq2 .btnComplete{ top: 75%; }

.til_O,
.til_X
{
  display: block;
  display: none;
  width: 60%;

  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);


}

/*.til_X{ display: block; }*/
#answer1{ display: none; }
#answer2{ display: none; }
#answer3{ display: none; }
#answer4{ display: none; }

/*/////////////////////////////////////////////*/
/*/////////////////// result ///////////////////*/
/*/////////////////////////////////////////////*/

.resultBox{
  display: block;
  width: 80%;

  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);


  /*background-color: #ff0ff3;*/
  /*border: 1px solid;*/

  display: none;
}


.logoR{
  display: block;
  display: none;
  width: 100px;
  width: 150px;
  /*width: 208px;*/

  position: absolute;
  top: 2%;
  right: 20%;
  z-index: 90;
}

.resBG{
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;

  /*border: 1px solid #dddfff;*/
}

.resTxtBox{
  display: block;
  width: 60%;

  position: absolute;
  top: 2%;
  left: 20%;

  /*border: 1px solid #ff00ff;*/
}
.resBG_M{ display: none; }

.resTxt{
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;
}

.rt1{ display: none; }
.rt2{ display: none; }
.rt3{ display: none; }
.rt4{ display: none; }
.rt5{ display: none; }


.btnBox{
  display: block;
  width: 100%;

  position: absolute;
  top: 90%;
  left: 50%;
  transform: translateX(-50%);

  /*border: 1px solid #ddff00;*/

  margin-top: -6%;
  /*position: relative;
  top: 0;*/
}

.btnBox div{
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);


  margin-bottom: 5%; 

  /*border: 1px solid #ff00ff;*/
}

/*.dynomicBtn{ }
.staticBtn{width: 100%;}*/

.btnForm_P,
.btnForm_M,
.btnSponsor_P,
.btnSponsor_M,
.btnSeemore_P,
.btnSeemore_M,
.btnOther_P,
.btnOther_M,
.btnFB_P,
.btnFB_M
{
  display: inline-block;
  height: 3vw;

  position: relative;
  top: 0;
  left: 0;

  pointer-events: auto;
}

.btnForm_M,
.btnSponsor_M,
.btnSeemore_M,
.btnOther_M,
.btnFB_M
{ display: none; }

/*.btnForm_P{ margin-left: 5%; }*/
.btnSponsor_P{}

.staticBtn img:first-child{ margin-left: 2%; }
.staticBtn img { margin-right: 2%; }
.staticBtn img:nth-child(5) { 
  margin-right: 0; 
}


/*/////////////////////////////////////////////*/
/*/////////////////// form /////////////////*/
/*/////////////////////////////////////////////*/

.btnSubmit,
.btnBack{
  display: block;
  width: 30%;

  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  margin-top: 20px;
}



.formContent{
  /*overflow: none;*/
  padding-top: 0;
  /*border: 1px solid;*/
}

.formUL{
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;

}

.formUL li{
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;


  padding-top: 2px;
  padding-bottom: 2px;

  margin-bottom: 25px;
}

.sub_name_P,
.sub_tel_P,
.sub_mail_P,
.sub_address_P,
.sub_address_M
{
  display: inline-block;
  width: 13%;

  position: relative;
  top: 0;
  left: 0;

  margin-right: 5px;
  margin-left: 8%;

  transform:translateY(20%);
}

.sub_tel_P{ margin-left: 2%; }
.sub_address_P{ }
.sub_address_M{ display: none; }

#txtName,#txtPhone,#txtEmail{
  display: inline-block;
  width: 25%;

  position: relative;
  top: 0;
  left: 0;

  background-color: rgba(0,0,0,0);
  border:0;
  border-bottom: 2px solid #fff;

  color: #fff;

  margin-right: 5px;
  -webkit-border-radius:0;
  border-radius:0;
}

#txtEmail{ width: 60%; }

.addressBox{
  display: inline-block;
  width: 60%;

  position: relative;
}

#city,
#dist,
#txtAddress
{
  width: 45%;
  height: 45px;

  color: #aacbd3;
  /*background-color: #316163;*/
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid #fff;
  border-radius: 10px;

  margin-right: 4%;
  }

#txtAddress{ 
  width: 55%; 
  margin-top: -2%;
  margin-left: 22%;
  padding-left: 2%;
}

.btnSubmit{
  display: block;
  width: 25%;
  /*height: 50px;*/

  background-color: #65255f;
  color: #fff;

  margin-top: 10px;
  text-align: center;
  /*line-height: 50px;*/

  pointer-events: auto;
}

.txtAgree{
  display: inline-block;
  width: 70%;
  height: 14px;

  position: relative;
  top:0;
  left: 0;

  color: #aacbd3;
}

.txtAG{
  display: block;
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;


  font-size: 12px;

  pointer-events: auto;
}




.formContainer{ display: block; }
.formAbout{ 
  display: none;
  position: relative; 
}

.formAboutContent{
  width: 80%;
  height: 280px;

  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  overflow-y: auto;

  padding-top: 5%;

}

.about_P{ 
  display: block; 
  width: 100%;
}

.about_M{ display: none; }

#btnAboutClose{
  width: 20px;

  position: absolute;
  top: 10%;
  left: 90%;
}







/*/////////////////////////////////////////////*/
/*///////////////////  about  /////////////////*/
/*/////////////////////////////////////////////*/

/*.btnBack{
  display: block;
  width: 30%;

  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  margin-top: 20px;
}*/

.aboutBG{
  display: block;
  width: 80%;

  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /*border: 1px solid;*/
}

.about_M{ display: none; }

/*/////////////////////////////////////////////*/
/*/////////////////// pop up  /////////////////*/
/*/////////////////////////////////////////////*/


.POPUPs{
  display: none;
  /*display: block;*/
  width: 100%;
  height: 100%;

  position: fixed;
  /*position: fixed;*/
  top: 0;
  left: 0;

  z-index: 800;
  background-color: rgba(0,0,0,.8);
overflow: auto;
}

.popupBG{
  display: block;
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left:0;

  background-color: rgba(0,0,0,.8);
  display:none;
}


.popBox{
  display: block;
  width: 70%;

  position: absolute;
  top: 30%;
  left: 15%;
}

.popBox2{
  width: 90%;
  left: 5%;
  top: 10%;
}

.popBoxBG{
  display: block;
  width: 100%;

  position: relative;
  top:0;
  left: 0;

  z-index: 11;

  pointer-events: auto;
}

.btnAS{
  pointer-events: auto;
}






.yt-box{
  display: block;
  width: 93%;
  position: absolute;
  top: 3%;
  /*left: 5%;*/
  left: 50%;
  transform: translateX(-50%);

  /*margin-bottom: 15px;*/

  /*border:5px solid #ffdf00;
  border-radius: 10px;*/

}



.hide{ display: none; }


.whiteCover{
    display: block;
    width: 100%;
    height: 100%;
    height: 2000px;
    background-color: #fff;
    position: absolute;
    top:0;
    left: 0;

    color: #ccc;
    z-index: 999;
}

.whiteCover span{
    display: block;
    position: absolute;
    top:4%;
    left:10%;
    font-size: 10vw;
}



.loadinggif{
    display: block;
    width: 20%;

    position: absolute;
    left: 40%;
    top:30%;
}





/* pad */
@media (min-width: 640px) and (max-width: 1024px) {
/*
  .logo{ 
    top: 15%;
    width: 50%; 
  }

  .btnStart{
    width: 25%;
    margin-top: 35%;
  }*/

  /*.container{ width: 100%; }*/
}






/* phone */
@media screen and (max-width: 640px) 
/*@media screen and (min-width: 640px) */
{
  .container{ width: 100%; }
  .containerLOGO{display: none;}
  /*.containerLOGO{ width: 100%; }
  .logoNew{display: none;}*/

  .BG_P,
  .footer_P,
  .discript_P,
  .pP,
  .menuUL,
  .about_P,
  .sub_address_P,
  .missionBG_P,
  .ans_P,
  .resBG_P,
  .btnForm_P,
  .btnSponsor_P,
  .btnSeemore_P,
  .btnOther_P,
  .btnFB_P
  {
    display: none;
  }


  .BG_M,
  .btnMenu,
  .discript_M,
  .pM,
  .refH,
  .footer_M,
  .footer_M_under,
  .about_M,
  .sub_address_M,
  .missionBG_M,
  .ans_M,
  .resBG_M,
  .btnForm_M,
  .btnSponsor_M,
  .btnSeemore_M,
  .btnOther_M,
  .btnFB_M
  {
    display: block;
  }


  body{
      background: url('../images/m_indexBG.jpg') top left;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-color: #dff2d4;
      /*background-attachment: fixed;*/
  }

  .logo{ 
    top: 10%;
    width: 100%; 
    left: 0;
    /*margin-top: 25%;*/
    /*left: ;*/
  }


  .btnStart{
    width: 40%;
    /*margin-top: 90%;*/
    left: 30%;
  }

  .mapBox{ 
    width: 90%; 
    top:60%;
  }

  .mapZone{
    width: 90%;
  }

  .btnZone,
  .btnReSelect
  {
    display: block;
    width: 55%;

    position: absolute;
    top: 73%;
    left: 50%;
    transform: translateX(-50%);
  }

  .btnReSelect{ top: 85%; }
  .contentDIV{ width: 90%; }

  .tiltles{ width: 25%; }
  .btnBack{ width: 40%; }
  .aboutBG{ width: 80%; }
  .realContent{
    padding-top: 10%;
  }

  .ttop,
  .bbotom
  {
    margin-top: 5%;
  }

  .bbotom{ margin-bottom: 5%; }



  .formUL li:last-child{ margin-top: -5%; }

  .sub_name_P,
  .sub_tel_P,
  .sub_mail_P,
  .sub_address_M
  {
    display: inline-block;
    width: 20%;

    margin-right: 5px;
    margin-left: 8%;

    transform:translateY(20%);
  }
 

  .sub_tel_P{ transform:translateY(120%); }
  .sub_address_M{ margin-right: 50%; }

  #txtName,#txtPhone,#txtEmail{
    width: 65%;
    margin-right: 5px;
  }

  #txtPhone{ margin-top: 30px; }
  #txtEmail{ width: 60%; }

  .addressBox{
    display: inline-block;
    width: 92%;

    margin-top: 5%;
    margin-left: 8%;
  }

  #city,
  #dist,
  #txtAddress
  {
    width: 45%;
    margin-right: 2%;
   }

  #txtAddress{ 
    width: 83%; 
    margin-top: -5%;
    margin-left: 8%;
  }

  .btnSubmit{ width: 50%; }
  .txtAgree{ width: 80%; }
  .txtAG{ }
  .chkLeft{ margin-left: 8%; }





  .formAboutContent{
    width: 100%;
    height: 280px;

    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    overflow-y: auto;

    padding-top: 5%;
    padding-bottom: 8%;
  }



  .about_M{ 
    position: relative;
    width: 80%; 
    margin: 0 auto;
    left: auto;
  }

  #btnAboutClose{
    width: 18px;

    position: absolute;
    top: 5%;
    left: 88%;
  }

  .missionBox{ 
    width: 100%; 
    margin-top: 0;
  }

  .til_mission{
    width: 25%;
    top: 26%;
    left: 70%;
  }

  .ms4 .til_mission{
    top: 34%;
  }

  .missionUL{ top: 58%; }
  .missionUL li{
    width: 80%;
  }

  .ms3 .missionUL li,
  .ms4 .missionUL li
  { width: 78%; }

  .answerBOX{ width: 90%; }
  .btnNext{ 
    /*top: 82%;*/
    width: 60%; 

  }



  

  .til_O,
  .til_X
  {
    width: 100%;
    top: 3%;
    display: none;
  }

  .yt-box{ 
    width: 100%; 
    top: 6%;
  }

  .resultBox{
    top: 0;
    width: 100%;
  }

  .logoR{ 
    display: block;
    right: 2%; 
    top:1%;
  }
  .resTxtBox{
    width: 100%;
    left: 0;
    top: 6%;
  }

  .btnBox{
    margin-top: -60vw;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
  }

  .btnForm_M,
  .btnSponsor_M,
  .btnSeemore_M,
  .btnOther_M,
  .btnFB_M
  {
    width: 100%;
    height: auto;
    margin-bottom: 2%;
  }

  .btnSponsor_M{ margin-bottom:0; }
  .btnComplete{ width: 70%; }

  #answer1 .qq1 .btnNext{ top: 82%; }
  #answer2 .qq1 .btnNext{ top: 82%; }
  #answer3 .qq1 .btnNext{ top: 82%; }
  #answer4 .qq1 .btnComplete{ top: 70%; }

  #answer1 .qq2 .btnNext{ top:82%; }
  #answer2 .qq2 .btnNext{ top:87%; }
  #answer3 .qq2 .btnNext{ top: 88%; }
  #answer4 .qq2 .btnComplete{ top: 76%; }

  #answer1 .qq3 .btnNext{ top:85%; }
  #answer2 .qq3 .btnNext{ top:85%; }
  #answer3 .qq3 .btnNext{ top: 82%; }
  #answer4 .qq3 .btnComplete{ top: 70%; }


}
/* ============================== end RWD ============================*/































.scale-in-center {
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
          animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
}


/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
            /*transform: rotate(-10deg);
            transform: rotate(-10deg);*/
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
            /*transform: rotate(0);
            transform: rotate(0);*/
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
            /*transform: rotate(-10deg);
            transform: rotate(-10deg);*/
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
            /*transform: rotate(0);
            transform: rotate(0);*/
    opacity: 1;
  }
}





.rotate-in-center {
  -webkit-animation: rotate-in-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse ;
          animation: rotate-in-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse ;
}

@-webkit-keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    opacity: 1;
  }
}
@keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    opacity: 1;
  }
}


.popTable, .popTable td{
width: 100%;
height: 100%;
vertical-align: middle;}







.alertDiv{
  display: block;
  width: 90%;

  position: relative;
  top: 0;
  left:50%;

  transform: translateX(-50%);
  margin-top: 30%;

  /*border:1px solid #fff;*/
}