html{width: 100%; height: 100%; padding: 0px; margin: 0px; overflow: hidden;}
body{width: 100%; height: 100%; padding: 0px; margin: 0px; overflow: hidden; background: #f3d8cd;}
#main{width: 100%; height: 100%;}
#main .swiper-wrapper,
#main .swiper-slide{width: 100%; height: 100%;}

.fullPage{width: 100%; height: 100%;}

.w-full{width: 100%;}

.clearfix:after { content: '\20'; display: block; height: 0; clear: both; }
.clearfix { *zoom: 1; }
.clear{clear:both;}

button{display: block; width: 100%;}

*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

img{pointer-events: none;}

img#haibaoImg{pointer-events: visible; width: 100%; margin: 0px auto;}

.duration0_5{
  -webkit-animation-duration: 0.3s !important;
  animation-duration: 0.3s !important;
}

.duration1{
  -webkit-animation-duration: 1s !important;
  animation-duration: 1s !important;
}

.duration1_5{
  -webkit-animation-duration: 1.5s !important;
  animation-duration: 1.5s !important;
}

.duration2{
  -webkit-animation-duration: 2s !important;
  animation-duration: 2s !important;
}

.duration2_5{
  -webkit-animation-duration: 2.5s !important;
  animation-duration: 2.5s !important;
}

.duration3{
  -webkit-animation-duration: 3s !important;
  animation-duration: 3s !important;
}

.duration3_5{
  -webkit-animation-duration: 3.5s !important;
  animation-duration: 3.5s !important;
}

.duration4{
  -webkit-animation-duration: 4s !important;
  animation-duration: 4s !important;
}

.duration4_5{
  -webkit-animation-duration: 4.5s !important;
  animation-duration: 4.5s !important;
}

.duration5{
  -webkit-animation-duration: 5s !important;
  animation-duration: 5s !important;
}

.duration5_5{
  -webkit-animation-duration: 5.5s !important;
  animation-duration: 5.5s !important;
}

.duration6{
  -webkit-animation-duration: 6s !important;
  animation-duration: 6s !important;
}

.duration6_5{
  -webkit-animation-duration: 6.5s !important;
  animation-duration: 6.5s !important;
}

.duration7{
  -webkit-animation-duration: 7s !important;
  animation-duration: 7s !important;
}

.duration7_5{
  -webkit-animation-duration: 7.5s !important;
  animation-duration: 7.5s !important;
}

.duration8{
  -webkit-animation-duration: 8s !important;
  animation-duration: 8s !important;
}

.duration8_5{
  -webkit-animation-duration: 8.5s !important;
  animation-duration: 8.5s !important;
}

.duration9{
  -webkit-animation-duration: 9s !important;
  animation-duration: 9s !important;
}

.duration9_5{
  -webkit-animation-duration: 9.5s !important;
  animation-duration: 9.5s !important;
}

.duration10{
  -webkit-animation-duration: 10s !important;
  animation-duration: 10s !important;
}

.delay0_25{
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
}
.delay0_5{
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.delay0_75{
  animation-delay: 0.75s;
  -webkit-animation-delay: 0.75s;
}
.delay1{
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.delay1_25{
  animation-delay: 1.25s;
  -webkit-animation-delay: 1.25s;
}
.delay1_5{
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
}
.delay1_75{
  animation-delay: 1.75s;
  -webkit-animation-delay: 1.75s;
}
.delay2{
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}
.delay2_25{
  animation-delay: 2.25s;
  -webkit-animation-delay: 2.25s;
}
.delay2_5{
  animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}
.delay3{
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}
.delay3_5{
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
}
.delay4{
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
}
.delay4_5{
  animation-delay: 4.5s;
  -webkit-animation-delay: 4.5s;
}
.delay5{
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}
.delay5_5{
  animation-delay: 5.5s;
  -webkit-animation-delay: 5.5s;
}
.delay6{
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}

.alpha95 {filter: alpha(opacity= 95); -moz-opacity: .95; opacity: .95;}
.alpha90 {filter: alpha(opacity= 90); -moz-opacity: .90; opacity: .90;}
.alpha80 {filter: alpha(opacity= 80); -moz-opacity: .80; opacity: .80;}
.alpha70 {filter: alpha(opacity= 70); -moz-opacity: .70; opacity: .70;}
.alpha60 {filter: alpha(opacity= 60); -moz-opacity: .60; opacity: .60;}
.alpha50 {filter: alpha(opacity= 50); -moz-opacity: .50; opacity: .50;}
.alpha40 {filter: alpha(opacity= 40); -moz-opacity: .40; opacity: .40;}
.alpha30 {filter: alpha(opacity= 30); -moz-opacity: .30; opacity: .30;}
.alpha20 {filter: alpha(opacity= 20); -moz-opacity: .20; opacity: .20;}
.alpha10 {filter: alpha(opacity= 10); -moz-opacity: .10; opacity: .10;}
.alpha00 {filter: alpha(opacity=  0); -moz-opacity:   0; opacity:   0;}

.box{display: -webkit-flex; display: flex;}
.flex-direction-row{flex-direction: row;}
.flex-direction-row-r{flex-direction: row-reverse;}
.flex-direction-column{flex-direction: column;}
.flex-direction-column-r{flex-direction: column-reverse;}
.flex-wrap-now{flex-wrap: nowrap}
.flex-wrap-wrap{flex-wrap: wrap}
.flex-wrap-wrap-r{flex-wrap: wrap-reverse}
.justify-content-start{justify-content: flex-start}
.justify-content-end{justify-content: flex-end}
.justify-content-center{justify-content: center}
.justify-content-between{justify-content: space-between}
.justify-content-around{justify-content: space-around}
.align-items-start{align-items: flex-start}
.align-items-end{align-items: flex-end}
.align-items-center{align-items: center}
.align-items-baseline{align-items: baseline}
.align-items-stretch{align-items: stretch}
.align-content-start{align-content: flex-start}
.align-content-end{align-content: flex-end}
.align-content-center{align-content: center}
.align-content-between{align-content: space-between}
.align-content-around{align-content: space-around}
.align-content-stretch{align-content: stretch}

p{margin: 0px; padding: 0px;}

img.full{width: 100%; display: block;}

ul,li{margin: 0px; padding: 0px; list-style: none;}

.hide{display: none;}

.fullPage{width: 100%; height: 100%;}

.relative{position: relative;}
.absolute{position: absolute;}
.w100{width: 100%;}
.content{width: 100%;}

.logo{width: 18%; margin: 0px auto;}
.logo02{width: 18%; position: absolute; top: 5%; left: 50%; margin-left: -9%;}
#loading{background-color: #f3d8cd;}
#loading .logo{position: absolute; top: 10%; left: 50%; margin-left: -9%;}
#loading .people{width: 100%; position: absolute; bottom: 0px;}

#loadingMain{width: 60%; position: absolute; left: 20%; top: 35%;}
#loadingBar{width: 0%; position: absolute; top: 0px; left: 0px; height: 100%; background: url(../images-v5/loading-bar.png) left top no-repeat; background-size: auto 100%;}
#loadingIcon{width: 30px; left: 0%; top: -20px; position: absolute;}
#loadingIcon img{margin-left: -20px;}
#loadingText{position: absolute; top: 40%; width: 21%; left: 50%; margin-left: -10.5%;}

.header01{position: absolute; width: 24%; left: 10%; top: 15%;}
.header02{position: absolute; width: 24%; right: 10%; top: 43%;}
#step02 .header01{top: -5%;}
#step02 .header02{top: 80%; right: 8%;}
#step03 .header01{top: -5%;}
#step03 .header02{top: 80%; right: 8%;}

#begin01-01{width: 48%; margin: 0px auto;}
#begin01-02{width: 98%; margin: 50px auto 0px;}

#begin02-01{width: 62%; margin: 0px auto 0px; position: relative; z-index: 2;}
#begin02-02{width: 19.5%; margin: -20px auto 20px; position: relative; z-index: 1;}
#begin02-03{width: 94%; margin: -50px auto 0px;}

#begin03-02{width: 94%; margin: 0px auto;}
#begin03-03{width: 50%; margin-left: -25%; left: 50%; top: 28%; position: absolute;}

#begin04-01{width: 100%; height: 14%; background: url(../images-v5/begin-img-09.png) center no-repeat; background-size: contain; margin-top: 5%;}
#begin04-02{width: 100%; height: 22%; background: url(../images-v5/begin-img-10.png) center no-repeat; background-size: contain; margin-top: -3%;}
#begin04-03{width: 100%; height: 17%; background: url(../images-v5/begin-img-11.png) center no-repeat; background-size: contain; margin-top: 6%;}
#begin04-04{width: 100%; position: absolute; bottom: 2%; width: 100%; width: 90%; left: 8%;}
#begin04-05{width: 100%; position: absolute; bottom: 0px; width: 100%;}

.img01{width: 93.8%; margin: 40px auto;}
#button01{width: 36.6%; margin: 0px auto 80px; position: relative; z-index: 1;}

#ruleMain{position: absolute; top: 0px; z-index: 100;}
#ruleBlock{width: 92%; margin: 0px auto;}
.closeButton{position: absolute; width: 50px; top: 0px; right: -2%;}
#agreeRuleButton{width: 50%; bottom: 10%; left: 50%; margin-left: -25%; position: absolute;}

.img02{width: 90%; margin: 40px auto;}
#button01-f{width: 36.6%; margin: 0px auto 80px; position: relative; z-index: 1; visibility: hidden;}
#button02{width: 40%; position: absolute; bottom: 10%; left: 50%; margin-left: -20%; z-index: 1;}
#formBlock{width: 60%; position: absolute; top: 26%; left: 20%;}
#formBlock input{width: 100%; font-size: 16px; line-height: 1.5; text-align: center; color: #124e98; border-radius: 10px; overflow: hidden; background-color: #e0e0e0; padding: 10px 5px; box-sizing: border-box; border: 0px; margin-bottom: 10px; text-align: center;}

#mobileBlock{vertical-align: baseline;}
#formBlock  #mobile{display: inline-block; width: 65%; vertical-align: middle;}
#sendSMS{width: 30%; font-size: 10px; padding: 12px 0px; line-height: 2; color: #124e98; border-radius: 10px; overflow: hidden; background-color: #e0e0e0; border: 0px; vertical-align: middle; margin-bottom: 10px; float: right; text-align: center;}

#sendSMS.ss{font-size: 16px; padding: 6px 0px;}

input::placeholder{color: #124e98;}

#daojuBlock{width: 100%; position: absolute; bottom: 0px; height: 80px; background-color: #f68797; text-align: center;}
.daojuItem{width: 18%; display: inline-block; margin-top: -45px; margin-left: 5%; margin-right: 5%;}
#canvasMain{width: 100%; height: 100%; padding-bottom: 80px; box-sizing: border-box; overflow-y: hidden; overflow-x: hidden;}
#canvas{display: block; height: 100%; width: auto;}

#woshikaichang{width: 62.75%; position: absolute; margin-left: -31.375%; left: 50%; top: 20%;}
#woshikaichang .tip{display: none;}

#woshitishi {width: 64%; position: absolute; margin-left: -32%; left: 50%; top: 20%;}
#woshitishi .tishi {display: none;}
#woshipop{width: 90%; left: 50%; margin-left: -45%; top: 20%; position: absolute;}
#woshipop .pop{display: none;}

#mask{width: 100%; height: 100%; position: absolute; top: 0px;}
.closePop{width: 15%; position: absolute; right: -10px; top: -10px;}


#woshiShouji{width: 56%; top: 20%; left: 50%; margin-left: -28%; position: absolute; display: none;}
#woshiShouji02{display: none;}

#ketingkaichang{width: 71%; position: absolute; margin-left: -35.5%; left: 50%; top: 20%;}
#ketingkaichang .tip{display: none;}

#ketingtishi {width: 75%; position: absolute; margin-left: -37.5%; left: 50%; top: 20%;}
#ketingtishi .tishi {display: none;}
#ketingpop{width: 90%; left: 50%; margin-left: -45%; top: 20%; position: absolute;}
#ketingpop .pop{display: none;}


#chufangkaichang{width: 80%; position: absolute; margin-left: -40%; left: 50%; top: 20%;}
#chufangkaichang .tip{display: none;}

#chufangtishi {width: 72%; position: absolute; margin-left: -36%; left: 50%; top: 20%;}
#chufangtishi .tishi {display: none;}
#chufangpop{width: 90%; left: 50%; margin-left: -45%; top: 20%; position: absolute;}
#chufangpop .pop{display: none;}

#shouji03{width: 56%; top: 20%; left: 50%; margin-left: -28%; position: absolute; display: none;}
#shouji03_02{display: none;}

#bianqian{width: 64%; top: 20%; left: 50%; margin-left: -32%; position: absolute; display: none;}
#bianqian02{display: none;}

#timeContent{font-size: 20px; font-weight: bolder; color: #004c9d; background: url(../images-v5/shizong.png) left center no-repeat; background-size: contain; padding-left: 40px; line-height: 1.4; position: absolute; top: 12px; left: 10px;}

#pix{position: absolute; top: 14px; right: 10px; height: 28px; vertical-align: middle;}
#pix .label{height: 60%; width: auto; display: inline-block; vertical-align: middle;}
#pixBox{height: 60%; width: 100px; display: inline-block; margin-left: 5px; border: 2px solid #004c9d; border-radius: 5px; overflow: hidden; vertical-align: middle;}
#box{background-color: #004c9d; height: 100%; width: 0%;}
#ruleButton{width: 50px; margin-left: 5px; display: inline-block; vertical-align: middle;}

#stepShow{display: inline-block; vertical-align: middle; font-size: 20px; font-weight: bolder; color: #004c9d; line-height: 1.4;}

#tixingBlock{position: absolute; top: 0px; z-index: 10;}
#tixingMain{width: 90%; margin: 0px auto; position: relative;}
#agreeTixingButton{width: 40%; bottom: 8%; left: 50%; margin-left: -20%; position: absolute;}


#tishi{width: 80%; position: fixed; top: 40%; left: 10%; z-index: 100; padding: 20px 10px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; line-height: 1.5; text-align: center; display: none;}

#successBlock{background: #f3d8cd url(../images-v5/success01.png) center no-repeat; background-size: cover;}
.w90{width: 90%; margin: 0px auto; position: relative;}
#finnalTime{color: #fff; font-size: 90px; text-align: center; width: 100%; position: absolute; top: 41%; font-weight: bolder;}
#finnalText{color: #124e98; font-size: 16px; text-align: center; position: absolute; top: 69%; width: 100%; font-weight: bolder; line-height: 1.8;}

#paihangBlock{background: #f3d8cd url(../images-v5/success01.png) center no-repeat; background-size: cover;}
#paihangbangMain{width: 90%; margin: 0px auto; position: relative;}
#paiming01{position: absolute; width: 30%; left: 50%; margin-left: -15%; top: 10%;}
#paiming02{position: absolute; width: 30%; left: 24%; margin-left: -15%; top: 13%;}
#paiming03{position: absolute; width: 30%; left: 74%; margin-left: -15%; top: 15%;}
.pai{width: 25%; margin: 0px auto}
.mingzi{font-size: 18px; font-weight: bolder; color: #1e4b98; text-align: center; margin: 5px 0px 0px; white-space: nowrap; overflow: hidden;}
.shijian{font-size: 14px; font-weight: bolder; color: #fff; text-align: center;}

#phbList{position: absolute; width: 90%; left: 5%; height: 50%; top: 36%; overflow-y: auto;}
.phb{background-color: #fff; border-radius: 10px; overflow: hidden; padding: 10px 5px; font-size: 18px; margin-bottom: 8px;}
.phb .mingci{width: 20%; float: left; color: #004c9d; text-align: center; font-weight: bolder;}
.phb .name{width: 55%; float: left; color: #000; text-align: left;}
.phb .time{width: 25%; float: left; color: #000; text-align: center; font-weight: bolder;}

.buttonList{position: absolute; top: 89%;}
#gotoCoupn{width: 60%; margin: 0px auto;}
#gotoHaibao{width: 68%; margin: 8px auto 0px;}

#coupnBlock .header01{top: -5%;}
#coupnBlock .header02{top: 80%; right: 8%;}
.coupon{width: 84%; margin: 20px auto 0px;}
.tao{font-size: 14px; color: #004c9d; text-align: center; position: absolute; width: 100%; top: 41%; font-weight: bolder;}
.tao span{-webkit-user-select: text; user-select: text;}
#backButton{position: absolute; width: 30%; top: 84%; left: 35%;}
#copyButton{position: absolute; width: 40%; top: 74%; left: 30%;}

#haibaoButton{margin: -20px auto 0px; width: 60%;}
#shareButton{margin: 10px auto 0px; width: 60%;}
#backButton02{margin: 10px auto 20px; width: 60%;}

#daojuImg03{position: absolute; top: 0px; z-index: 10;}
#daojuImg02{position: absolute; top: 0px; z-index: 10;}
#daojuImg01{position: absolute; top: 0px; z-index: 10;}
#shizhongDJ{width: 40%; margin: 0px auto;}

#zhezhao{width: 90%; position: absolute; left: 5%; top: 2%;}
#fangImg{position: relative; z-index: 2;}
#fangdajing{position: relative; z-index: 2;}


.skipButton{width: 30%; position: absolute; bottom: 10%; left: 35%;}
#shareTipImg{width: 40%; position: absolute; top: 10px; right: 10px;}

/* #shareMask{background-color: rgba(243, 216, 205, 0.8); z-index: 10; position: absolute; top: 0px;} */
/* #shareMask{background-color: rgba(255, 255, 255, 0.8); z-index: 10; position: absolute; top: 0px; display: none;} */
#shareMask{background-color: rgba(0, 0, 0, 0.8); z-index: 10; position: absolute; top: 0px; display: none;}

.scrollPage{overflow-y: auto;}