@charset "UTF-8";
/* CSS Document */
html{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-size:62.5%;}
ul,li,div,p,body,h1,h2,h3,h4,h5,h6,dl,dt,dd{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;}
input, button, select, textarea {outline: none; -webkit-appearance: none; border-radius: 0; border: 0 none; background: none;}
body, html {
font-family: "Microsoft YaHei","Helvetica Neue",'Heiti',Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;
font-weight: normal; display:-webkit-box;-webkit-box-orient:vertical; -webkit-box-align:center;
}
* {
  -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden; backface-visibility: hidden;
  -webkit-focus-ring-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;
  opacity: 1; outline: none; box-sizing: border-box;
} /*用于解决某些情况下出现闪屏的问题，若无则不加*/
body{
  opacity: 1; -webkit-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in; line-height: 1;
}
html{font-size: 312.5%; }
@media screen and (max-width:359px) and (orientation:portrait) {
  html { font-size: 266.67%; }
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
  html { font-size: 300%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
  html { font-size: 320%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
  html { font-size: 333.33%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
  html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
  html { font-size:360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
  html{ font-size:400%;}
}
@media screen and (min-width:640px) and (orientation:portrait){
  html{ font-size:533.33%;}
}
/*----------------------- reset css end -----------------------*/

html,
body {
  width      : 100%;
  height     : 100%;
  font-size  : .14rem;
  color      : #fff;
  background : #fff;
}

/*----- 预加载 -----*/
.preload-list {
  position : absolute;
  width    : 0;
  height   : 0;
  overflow : hidden;
  display  : block;
}
.preload {
  position   : fixed;
  left       : 0;
  top        : 0;
  width      : 100%;
  height     : 100%;
  overflow   : hidden;
  z-index    : 999999;
  background : #73d4ff;
}
.preload-progress {
  position   : absolute;
  left       : 50%;
  top        : 50%;
  width      : 40%;
  height     : .05rem;
  margin     : -.25rem 0 0 -20%;
  background : #54b0d8;
  overflow   : hidden;
  border-radius: 50px;
}
.preload-progress span {
  width      : 100%;
  height     : 100%;
  background : #fff955;
  display    : block;
  -webkit-transform: scaleX(0); transform: scaleX(0);
  -webkit-transform-origin: 0 0; transform-origin: 0 0;
}
.gift {
  position   : absolute;
  left       : 50%;
  top        : 50%;
  width      : .7rem;
  height     : .8rem;
  margin     : -1.5rem 0 0 -0.35rem;
  background : url(../images/gift.png) no-repeat;
  background-size: cover;
          animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

/*----- layout -----*/
.hide {display: none;}
.commbg {
  background: url(../images/commbg.png) no-repeat;
  background-size: 7.5rem auto;
}
#container {
  position : fixed;
  left     : 50%;
  top      : 0;
  width    : 7.2rem;
  height   : 100%;
  margin   : 0 0 0 -3.6rem;
  background: #73d4ff;
}
#container.iphonex {padding: 0 0 20px 0;}
#main {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#wrapper {
  position : absolute;
  left     : 50%;
  top      : 0;
  /*position : relative;*/
  width    : 7.2rem;
  height   : 100%;
  overflow : hidden;
  margin   : 0 0 0 -3.6rem;
}
.swiper-slide {
  overflow   : hidden;
  background : #73d4ff url(../images/bg.jpg) no-repeat center bottom;
  background-size     : 100% auto;
}
.btn {
  position   : relative;
  display    : block;
  height     : .93rem;
  margin     : 0 auto;
  box-shadow : 0 .06rem 0 0 rgba(0,0,0,.2);
  border-radius   : .1rem;
  background      : url(../images/btn_bg.gif) repeat-x;
  background-size : auto .93rem;

}
.btn:before {
  position   : absolute;
  content    : "";
  left       : 50%;
  top        : 50%;
  display    : block;
  background : url(../images/commbg.png) no-repeat;
  background-size: 7.5rem auto;
          transform: translate3d(-50%,-50%,0);
  -webkit-transform: translate3d(-50%,-50%,0);
}

/*----- index -----*/
.index {background-image: url(../images/index_bg.jpg);}
.theme {
  position   : absolute;
  left       : 50%;
  top        : .34rem;
  width      : 6.59rem;
  height     : 2.95rem;
  opacity    : 0;
  margin     : 0 0 0 -3.295rem;
  background : url(../images/theme.png) no-repeat;
  background-size: cover;
}
.act-time {
  position   : absolute;
  left       : 0;
  top        : 3.29rem;
  width      : 100%;
  text-align : center;
  font-size  : .24rem;
          animation-delay: .6s;
  -webkit-animation-delay: .6s;
}
.heart {
  position : absolute;
  left     : 3.69rem;
  bottom   : 6.98rem;
  display  : block;
  width    : .59rem;
  height   : .5rem;
  background-position: 0 0;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
          animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
}
.start-btn {
  position : absolute;
  left     : 50%;
  bottom   : .76rem;
  width    : 3.69rem;
  margin   : 0 0 0 -1.84rem;
          animation-delay: .6s;
  -webkit-animation-delay: .6s;
}
.start-btn:before {
  width  : 1.6rem;
  height : .37rem;
  background-position: -.6rem 0;
}
.tech-support {
  position  : absolute;
  left      : 50%;
  bottom    : .26rem;
  display   : inline-block;
  font-size : .22rem;
  padding   : 0 .28rem 0 0;
          transform: translate3d(-50%,0,0);
  -webkit-transform: translate3d(-50%,0,0);
}
.tech-support:after {
  position   : absolute;
  right      : 0;
  top        : .05rem;
  content    : "";
  display    : block;
  width      : .14rem;
  height     : .13rem;
  background : url(../images/commbg.png) no-repeat -6.42rem 0;
  background-size: 7.5rem auto;
}
.show-rule {
  position: absolute;
  right: .15rem;
  top: .17rem;
  display: block;
  width: 1.13rem;
  height: 1.12rem;
  background-position: 0 -2.26rem;
}

/*----- page2 -----*/
.gender-title  {
  position : absolute;
  left     : 50%;
  top      : 1.2rem;
  width    : 4.17rem;
  height   : .58rem;
  margin   : 0 0 0 -2.08rem;
  background-position: -2.21rem 0;
}
.gender-options {
  margin     : 2.44rem auto;
  text-align : center;
  font-size  : 0;
}
.gender-options li {
  display : inline-block;
  width   : 3.04rem;
  margin  : 0 .16rem;
}
@keyframes genderAni {
  from {transform: rotate(0);}
  to {transform: rotate(360deg);}
}
@-webkit-keyframes genderAni {
  from {-webkit-transform: rotate(0);}
  to {-webkit-transform: rotate(360deg);}
}
.gender-options li.active .shine {
          animation: genderAni 5s linear infinite;
  -webkit-animation: genderAni 5s linear infinite;
}
.gender-img {
  position : relative;
  width    : 100%;
  height   : 4.6rem;
  overflow : hidden;
  border-radius: .4rem;
}
.boy .gender-img {
  border: .06rem solid #41baef;
  background: rgba(93,193,237,.61);
}
.girl .gender-img {
  border: .06rem solid #e197ba;
  background: rgba(255,194,209,.61);
}
.shine {
  position   : absolute;
  left       : 50%;
  top        : 50%;
  width      : 5.59rem;
  height     : 3.96rem;
  display    : block;
  margin     : -1.98rem 0 0 -2.19rem;
  background : url(../images/shine.png) no-repeat;
  background-size: cover;
          transform-origin: 2.25rem 2.11rem;
  -webkit-transform-origin: 2.25rem 2.11rem;
}
.gender-img img {
  position : relative;
  display  : block;
  width    : 100%;
  height   : 100%;
}
.gender-btn {
  width   : 2.3rem;
  height  : .66rem;
  display : block;
  margin  : .26rem auto 0;
}
.boy .gender-btn {background-position: 0 -.92rem;}
.girl .gender-btn {background-position: 0 -1.6rem;}

/*----- 答題 -----*/
.game-area {
  position   : relative;
  display    : block;
  width      : 6.47rem;
  height     : 10.39rem;
  margin     : 0 auto;
  padding    : .4rem .38rem 0;
  overflow   : hidden;
  background : url(../images/ques_bg.png) no-repeat .05rem .3rem;
  background-size: 100% auto;
}
.num {
  width    : 5.9rem;
  margin   : .51rem 0 0 -.15rem;
  overflow :  hidden;
}
.num li {
  float         : left;
  display       : inline;
  width         : .44rem;
  height        : .44rem;
  margin-left   : .15rem;
  border        : .02rem solid #95deff;
  border-radius : 50%;
  text-align    : center;
  line-height   : .4rem;
  color         : #95deff;
  font-size     : .22rem;
}
.num li.cur {background: #95deff; color: #fff;}

.question {overflow: hidden; margin: .18rem 0 .2rem;}
.question-num {
  float      : left;
  width      : .46rem;
  height     : .24rem;
  margin     : .05rem .08rem 0 0;
  background : url(../images/commbg.png) no-repeat;
  background-size: 7.5rem auto;
}
.question1 {background-position: -2.56rem -1.5rem;}
.question2 {background-position: -3.03rem -1.5rem;}
.question3 {background-position: -3.5rem -1.5rem;}
.question4 {background-position: -3.97rem -1.5rem;}
.question5 {background-position: -4.44rem -1.5rem;}
.question6 {background-position: -4.91rem -1.5rem;}
.question7 {background-position: -5.38rem -1.5rem;}
.question8 {background-position: -5.85rem -1.5rem;}
.question9 {background-position: -6.32rem -1.5rem;}
.question10 {background-position: -6.79rem -1.5rem; width: .67rem;}
.question-text {
  overflow    : hidden;
  font-size   : .24rem;
  line-height : .34rem;
  color       : #9a9a9a;
}
.options li {
  height     : .85rem;
  padding    :  0 0 .05rem;
  background : #79c9ec;
  margin     : 0 0 .2rem;
  border-radius: .08rem;
  overflow   : hidden;
  box-shadow : 0 -.05rem 0 0 rgba(0,0,0,.05) inset;
  font-size  : 0;
  transition : background .3s;
}
.options .letter,
.options-text {display: inline-block; vertical-align: middle;}
.options .letter {
  width       : .73rem;
  height      : 100%;
  text-align  : center;
  line-height : .8rem;
  font-size   : .24rem;
  overflow    : hidden;
  background  : rgba(0,0,0,.05);
}
.options .letter:before {
  content    : "";
  display    : none;
  margin     : 0 auto;
  background : url(../images/commbg.png) no-repeat;
  background-size: 7.5rem auto;
}
.options-text {
  width       : 4.98rem;
  padding     : 0 .15rem;
  font-size   : .22rem;
  line-height : .32rem;
}
.options li.correct {background: #51ce57;}
.options li.wrong {/*background: #e45656;*/ background: #949494;}
.options li.grey {/*background: #949494;*/ background: #e45656;}
.options li.correct .letter,
.options li.grey .letter {font-size: 0;}
.options li.correct .letter:before,
.options li.wrong .letter:before,
.options li.grey .letter:before {display: block;}
.options li.correct .letter:before,
.options li.grey .letter:before {
  width      : .35rem;
  height     : .26rem;
  margin-top : .27rem;
  background-position: -6.98rem 0;
}
.options li.wrong .letter:before {
  display: none;
 /* width      : .3rem;
  height     : .3rem;
  margin-top : .25rem;
  background-position: -6.98rem -.3rem;*/
}
.law {
  color         : #67bade;
  font-size     : .21rem;
  line-height   : .35rem;
  text-align    : justify;
  padding       : .1rem 0.15rem 0;
  border        : .02rem dashed #67bade;
  border-radius : .2rem;
  display       : none;
}
.next-ques {
  position : absolute;
  bottom   : .69rem;
  left     : 50%;
  width    : 3.69rem;
  margin-left: -1.84rem;
  display  : none;
}
.next-ques:before {
  width  : 1.2rem;
  height : .36rem;
  background-position: -2.35rem -1.11rem;
}

.contact {
  position     : absolute;
  left         : 50%;
  bottom       : .26rem;
  width        : 3.69rem;
  height       : .5rem;
  display      : block;
  margin-left  : -1.84rem;
  line-height  : .5rem;
  text-align   : center;
  color        : #fff;
  font-size    : .22rem;
  padding-left : .4rem;
  background-position: -2.34rem -.6rem;
}

/*----- pop ------*/
.pop {
  position   : absolute;
  left       : 0;
  top        : 0;
  right      : 0;
  bottom     : 0;
  z-index    : 999;
  background : rgba(0,0,0,.8);
  display    : none;
}
.pop-box {
  position : absolute;
  left     : 50%;
  top      : 50%;
  display  : block;
  width    : 5.1rem;
  border-radius: .1rem;
  background: #5dc1ed url(../images/pop_bg.png) no-repeat center bottom;
  background-size: 100% auto;
          transform: translate3d(-50%,-50%,0);
  -webkit-transform: translate3d(-50%,-50%,0);
}

/* 歡迎語 */
.gender-pop {position: absolute; display: block;}
.gender-pop .pop-box {height: 5.16rem;}
.welcome {
  width       : 4.1rem;
  margin      : .52rem auto .18rem;
  font-size   : .26rem;
  line-height : .4rem;
  text-align  : justify;
}
.join-btn {width: 4.1rem;}
.join-btn:before {
  width  : 1.35rem;
  height : .31rem;
  background-position: 0 -.59rem;
}

/* 聯係方式 */
.contact-pop .pop-box {height: 4.83rem;}
.contact-cont {
  width       : 4.4rem;
  margin      : .42rem auto .2rem;
  text-align  : justify;
}
.contact-cont .title {
  font-size   : .3rem;
  font-weight : bold;
  text-align  : center;
}
.contact-cont .text {
  font-size   : .22rem;
  line-height : .32rem;
  margin      : .2rem 0 0;
}
.i-know {width: 4.4rem;}
.i-know:before {
  width  : 1.02rem;
  height : .31rem;
  background-position: -3.57rem -1.11rem;
}

/* 失敗 */
.fail-pop .pop-box {height: 4.38rem;}
.fail-title,
.success-title {
  margin      : .66rem 0 .15rem;
  text-align  : center;
  font-size   : .3rem;
  line-height : .5rem;
}
.correct-count {
  color       : #fde275;
  font-size   : .41rem;
  font-weight : bold;
}
.fail-tips {
  font-size   : .23rem;
  color       : #196d92;
  line-height : .32rem;
  text-align  : center;
}
.play-again {width: 4.29rem; margin-top: .35rem;}
.play-again:before {
  width  : 1.37rem;
  height : .31rem;
  background-position: -4.62rem -1.11rem;
}

/* 成功 */
.success-pop .pop-box {
  height     : 9.07rem;
  background : url(../images/caidai.png) no-repeat center .51rem,
              url(../images/pop_bg.png) no-repeat center bottom;
  background-size  : 5.1rem auto, 7.5rem auto;
  background-color : #5dc1ed;
}
.success-title {margin: .4rem 0 .2rem;}
.gift-img {
  position : relative;
  width    : 1.32rem;
  height   : 1.51rem;
  margin   : 0 auto;
}
.gift-img .shine {
  width  : 3.91rem;
  height : 2.77rem;
  margin: -1.386rem 0 0 -1.533rem;
  transform-origin: 1.575rem 1.477rem;
  -webkit-transform-origin: 1.575rem 1.477rem;
          animation: genderAni 7s linear infinite;
  -webkit-animation: genderAni 7s linear infinite;
}
.gift-icon {
  position   : absolute;
  left       : 0;
  top        : 0;
  width      : 100%;
  height     : 100%;
  background : url(../images/gift.png) no-repeat;
  background-size: cover;
}

.table {width: 4.29rem; margin: .25rem auto 0;}
.thead {
  text-align  : center;
  font-size   : .22rem;
  line-height : .35rem;
  color       : #0c668e;
  margin      : 0 0 .15rem 0;
}
.tbody li {
  position : relative;
  overflow : hidden;
  margin   : 0 0 .15rem;
}
.tbody li:last-child:before {
  content    : "";
  position   : absolute;
  left       : 1.47rem;
  top        : 50%;
  display    : block;
  width      : .16rem;
  height     : 1px;
  background : #3898c2;
}
.city,.tel { height: 100%;}
.city {float: left; width: 1.4rem; position: relative;}
.tel {float: right; width: 2.57rem;}
.tbody input,
.tbody select {
  display    : block;
  width      : 100%;
  height     : .7rem;
  background : #54b0d8;
  border     : 1px solid #3898c2;
  border-radius: .1rem;
  padding    : 0 .22rem;
}
.tbody input,
.tbody select,
input::-webkit-input-placeholder {
  color       : #fff;
  font-size   : .22rem;
  line-height : .68rem;
}
input[type="month"]:before{color: #fff; content: attr(placeholder);}
input[type="month"].full:before {color: #fff; content: ""!important;}
.city:after {
  content    : "";
  position   : absolute;
  right      : .17rem;
  top        : .29rem;
  display    : block;
  width      : .17rem;
  height     : .1rem;
  background : url(../images/commbg.png) no-repeat -6.45rem -.29rem;
  background-size: 7.5rem auto;
}
.submit-btn {margin-top: .27rem;}
.submit-btn:before {
  width  : .67rem;
  height : .31rem;
  background-position: -6.79rem -1.11rem;
}

/* 回執 */
.receipt-pop .pop-box {height: 4.36rem; padding: 0 .42rem;}
.receipt-title {
  text-align : center;
  font-size  : .3rem;
  margin     : .5rem 0 0;
}
.receipt-text {
  font-size   : .24rem;
  line-height : .4rem;
  text-align  : justify;
  margin      : .17rem 0;
}
.close-btn:before {
  width: .64rem;
  height: .3rem;
  background-position: -6.11rem -1.12rem;
}

/*----- 游戲規則 -----*/
.rule-wrap  {
  position   : absolute;
  left       : 0;
  top        : 0;
  right      : 0;
  bottom     : 0;
  z-index    : 99;
  overflow   : hidden;
  display    : none;
  background : #73d4ff url(../images/bg.jpg) no-repeat center bottom;
  background-size: 100% auto;
}
.rule-container {
  position   : relative;
  width      : 6.04rem;
  height     : 9.12rem;
  margin     : .45rem auto;
  overflow   : hidden;
  background : rgba(93,193,237,.8);
  border-radius: .5rem;
}
.rule-title {
  position    : relative;
  font-size   : .4rem;
  text-align  : center;
  margin      : .3rem 0 .25rem;
  line-height : .4rem;
}
.rule-title:before,
.rule-title span {display: inline-block; vertical-align: middle;}
.rule-title:before {
  content    : "";
  width      : .46rem;
  height     : .39rem;
  margin     : 0 .19rem 0 0;
  background : url(../images/commbg.png) no-repeat -2.57rem -1.86rem;
  background-size: 7.5rem auto;
}
.rule-list {
  width       : 5.52rem;
  margin      : 0 auto;
  font-size   : .24rem;
  line-height : .48rem;
  text-align  : justify;
}
.rule-btn {
  position    : absolute;
  left        : 50%;
  top         : 9.29rem;
  width       : 3.7rem;
  margin-left : -1.85rem;
}
.rule-btn:before {
  width  : 1.36rem;
  height : .37rem;
  background-position: -3.23rem -1.86rem;
}