* { margin: 0; padding: 0;}
html,body{height:100%; width: 100%; text-align: center;-webkit-tap-highlight-color:rgba(0,0,0,0); background: -webkit-radial-gradient(50% 50%,circle farthest-side, #FFFFFF 45%, #fbf4d1 );}
div:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-modify:read-write-plaintext-only; }
Section{overflow: hidden; min-height: 1200px;height: 100%;  width: 750px; position: relative; margin: auto;}
.logo{width: 362px; height: 42px; position: absolute; left: 42px; top: 26px; background: url(../images/logo.png); background-size: 100% 100%; z-index: 2;}
section{}
#homeSection{}
.homeIcon{width: 202px; height: 102px; position: absolute; top: 13px; right: 37px; background: url(../images/homeIcon.png); background-size: 100% 100%;z-index: 2;}
.homeTxt{width: 590px; height: 85px; position: absolute; top: 65%; left: 80px; background: url(../images/homePic1.png); background-size: 100% 100%;}
.homeBtn1{width: 534px; height: 135px; position: absolute; bottom: 15%; left: 104px; background: url(../images/homeBtn1.png); background-size: 100% 100%;}
.homeBtn2{width: 146px; height: 49px; position: absolute; bottom: 71px; left: 54px; background: -webkit-linear-gradient(#FF8900, #FF6505); border-radius:12px ; line-height: 49px; color: #FFFFFF; font-size: 1.6em; font-weight: bold; background-size: 100% 100%;}
.homeBtn3{width: 146px; height: 49px; position: absolute; bottom: 71px; left: 217px; background: -webkit-linear-gradient(#FF8900, #FF6505); border-radius:12px ; line-height: 49px; color: #FFFFFF; font-size: 1.6em; font-weight: bold;  background-size: 100% 100%;}
.homeBtn4{width: 146px; height: 49px; position: absolute; bottom: 71px; left: 378px; background: -webkit-linear-gradient(#FF8900, #FF6505); border-radius:12px ; line-height: 49px; color: #FFFFFF; font-size: 1.6em; font-weight: bold;  background-size: 100% 100%;}
.homeBtn5{width: 146px; height: 49px; position: absolute; bottom: 71px; left: 540px; background: -webkit-linear-gradient(#FF8900, #FF6505); border-radius:12px ; line-height: 49px; color: #FFFFFF; font-size: 1.6em; font-weight: bold;  background-size: 100% 100%;}
.homeAnn{width: 623px; height: 26px; position: absolute !important; bottom: 130px; left: 60px;  background: url(../images/ann.png) no-repeat; background-size: 34px 26px; overflow: hidden;}
.homeAnn ul {width:100%;}
.homeAnn ul li{ list-style: none; font-size: 1.6em; text-align: center; width: 100%;}
#homeSection .cardPo .card .back{background:url(../images/backBg2.png) no-repeat !important;background-size: 100% 100% !important;}
#homeSection .homeBtn1 .hand{ width: 141px; height: 153px; position: absolute; top: 27px; right: -44px; background: url(../images/hand.png); background-size: 100% 100%;}


.cardBox{ width: 682px; height: 634px; position: absolute; top: 11%; left: 34px;  z-index: 500;}/* top: -15px; left: -42px;*/
.cardPo{width: 221px; height: 314px; -webkit-perspective:500px; position:absolute;-webkit-transition: all 800ms; z-index: 0;}/* width: 244px; height: 346px; -webkit-transform: scale(0.5); */
.withBounce{-webkit-transition: all 800ms  cubic-bezier(0.68,-.55,.265,1.55) !important;}
.cardPo:nth-child(1){top:0px; left: 0px;}
.cardPo:nth-child(2){top:0px; left: 231px;}
.cardPo:nth-child(3){top:0px; left: 461px;}
.cardPo:nth-child(4){top:320px; left: 0px;}
.cardPo:nth-child(5){top:320px; left: 231px;}
.cardPo:nth-child(6){top:320px; left: 461px;}
.poCenter{top:224px !important;left: 231px !important;}
.poShow{top:324px !important;left: 231px !important;}
.cardPo .card{width: 100%; height: 100%;-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(0deg); -webkit-transition: all 1s  cubic-bezier(0.68,-.55,.265,1.55);}
.cardPo .card .front , .cardPo .card .back{width: 200%;height: 200%;position: absolute;left: -50%;top: -50%;text-align: center;   }
.cardPo .card .front{-webkit-backface-visibility:hidden;-webkit-transform: rotateY(180deg) scale(0.5); background-size: 100% 100%;}
.cardPo .card .front img{width: 100%; height:100%;}
.cardPo .card .back{-webkit-backface-visibility:hidden; background:url(../images/backBg.png) no-repeat;-webkit-transform: rotateY(0deg) scale(0.5); background-size: 100% 100%;}
.cardPo .card .back img{width:100%; height: 100%;}
.cardPo .big{-webkit-transform: rotateY(180deg) scale(2);}
/* .cardPo .big{-webkit-animation: bigAni 1s forwards;}*/
.cardPo .open{-webkit-transform: rotateY(180deg);}
.opened{-webkit-transform: rotateY(180deg) !important;}
/* .cardPo .open{-webkit-animation: cardOpen 1s forwards cubic-bezier(0.68,-.55,.265,1.55);} */
.cardPo .close{-webkit-animation: cardClose 1s forwards cubic-bezier(0.68,-.55,.265,1.55);}
.hide{opacity: 0; visibility: hidden;}
.fadein{-webkit-animation: fadein 1s forwards; visibility:visible;}
.fadeout{-webkit-animation: fadeout 1s forwards;}
@-webkit-keyframes cardOpen{
	0%   {-webkit-transform: rotateY(0deg);}
	100% {-webkit-transform: rotateY(180deg);}
}
@-webkit-keyframes cardClose{
	0%   {-webkit-transform: rotateY(180deg);}
	100% {-webkit-transform: rotateY(0deg);}
}
@-webkit-keyframes fadeout{
	0%   {opacity: 1;}
	100% {opacity: 0;}
}
@-webkit-keyframes fadein{
	0%   {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes bigAni{
	0%   {-webkit-transform: rotateY(0deg) scale(1);}
	100% {-webkit-transform: rotateY(180deg) scale(2);}
}
#sec1 .cardPo  .card{-webkit-transform-origin: center 75%;}
.cardPo .rollCard{-webkit-animation: rollCardAni 1000ms forwards;}
@-webkit-keyframes rollCardAni{
	0%   {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}

#swipeSection .cardBox{top:225px; z-index: 2;}
#swipeSection .poCenter{top:224px !important;left: 231px !important;}
#swipeSection .txt0{ width: 404px; height: 116px; position: absolute; left: 170px; top: 927px; background: url(../images/swipeTxt0.png); background-size: 100% 100%;
	-webkit-transition:all 500ms cubic-bezier(0.68,-.55,.265,1.55); -webkit-transform: translateY(0px); opacity: 0;
}
#swipeSection .txt{ width: 517px; height: 117px; position: absolute; left: 120px; top: 927px; background: url(../images/swipeTxt.png); background-size: 100% 100%;
	-webkit-transition:all 500ms cubic-bezier(0.68,-.55,.265,1.55); -webkit-transform: translateY(-50px); opacity: 0;
}
#swipeSection .txtShow{ -webkit-transform: translateY(0px); opacity: 1;}
#swipeSection .txtHide{ -webkit-transform: translateY(50px); opacity: 0;}
#swipeSection .cardHead{width: 750px; height: 296px; position: absolute; top: 97px; z-index: 0;}
#swipeSection .cardHead>img{width: 100%; height: 100%;}
#swipeSection .shareBtn{width: 314px; height: 87px; position: absolute;left: 215px; bottom: 12%;background: #FF6600; border-radius: 12px; line-height: 87px; color: #FFF; font-weight: bold; font-size: 2.4em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#swipeSection .homeBtn{ width: 146px; height: 49px; position: absolute; left: 137px; bottom: 65px; background: #FF6600; border-radius: 12px; line-height: 49px; color: #FFF; font-weight: bold; font-size: 1.6em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#swipeSection .progBtn{ width: 146px; height: 49px; position: absolute; left: 300px; bottom: 65px; background: #FF6600; border-radius: 12px; line-height: 49px; color: #FFF; font-weight: bold; font-size: 1.6em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#swipeSection .noteBtn{ width: 146px; height: 49px; position: absolute; left: 462px; bottom: 65px; background: #FF6600; border-radius: 12px; line-height: 49px; color: #FFF; font-weight: bold; font-size: 1.6em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}

#progressSection{}
#progressSection .showCard{width: 452px; height: 644px; position: absolute; left: 149px; top: 258px;}
#progressSection .showCard>img{width: 100%; height: 100%;}
#progressSection .showCard .medal{width: 145px; height: 144px; position: absolute; right: -49px; top: -64px; background: url(../images/medal.png); background-size: 100% 100%;}
#progressSection .progressMsg{ width: 100%;position: absolute; top: 956px; left: 0; font-size: 2.2em; color: #993300; font-weight: bold;}
#progressSection .homeBtn{ width: 146px; height: 49px; position: absolute; left: 221px; bottom: 105px; background: #FF6600; border-radius: 12px; line-height: 49px; color: #FFF; font-weight: bold; font-size: 1.6em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#progressSection .noteBtn{ width: 146px; height: 49px; position: absolute; left: 384px; bottom: 105px; background: #FF6600; border-radius: 12px; line-height: 49px; color: #FFF; font-weight: bold; font-size: 1.6em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}

#resultSection{}
#resultSection .resultCard{ width: 452px; height: 644px; position: absolute; left: 149px; top: 308px; -webkit-transform-style: preserve-3d;-webkit-perspective:1000px; z-index: 1;}
#resultSection .card{ width: 452px; height: 644px; position: absolute;-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(0deg); -webkit-transition: all 1s  cubic-bezier(0.68,-.55,.265,1.55);}
#resultSection .open{-webkit-transform: rotateY(180deg);}
.resultCard .front , .resultCard .back{width: 100%;height: 100%; position: absolute;}
.resultCard .front{-webkit-backface-visibility:hidden;-webkit-transform: rotateY(180deg);}
.resultCard .front img{width: 100%; height:100%;}
.resultCard .back{-webkit-backface-visibility:hidden; background:url(../images/backBg.png) no-repeat; background-size: 100% 100%;}
.resultCard .back img{width:100%; height: 100%;}
#resultSection .cardHead{width: 750px; height: 296px; position: absolute; top: 97px; z-index: 0;}
#resultSection .cardHead>img{width: 100%; height: 100%;}
#resultSection .shareBtn{width: 314px; height: 87px; position: absolute;left: 215px; bottom: 12%;background: #FF6600; border-radius: 12px; line-height: 87px; color: #FFF; font-weight: bold; font-size: 2.4em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#resultSection .homeBtn{ width: 146px; height: 49px; position: absolute; left: 137px; bottom: 65px; background: #FF6600; border-radius: 12px; line-height: 49px; color: #FFF; font-weight: bold; font-size: 1.6em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#resultSection .progBtn{ width: 146px; height: 49px; position: absolute; left: 300px; bottom: 65px; background: #FF6600; border-radius: 12px; line-height: 49px; color: #FFF; font-weight: bold; font-size: 1.6em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#resultSection .noteBtn{ width: 146px; height: 49px; position: absolute; left: 462px; bottom: 65px; background: #FF6600; border-radius: 12px; line-height: 49px; color: #FFF; font-weight: bold; font-size: 1.6em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}


/* popups */

.md-modal {position: fixed;top: 50%;left: 50%;max-width: 750px;min-width: 320px;height: auto;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-webkit-transform: translateX(-50%) translateY(-50%);}
.md-shareModal{position: absolute;width: 282px; height: 147px; right: 45px; top: 16px; background: url(../images/share.png); background-size:100% 100% ;z-index: 2000;visibility: hidden;}
.md-shareModal ~ .md-overlay { background: rgba(0,0,0,0.6);}
.md-show {visibility: visible;}
.md-overlay {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;opacity: 0;background: rgba(0,0,0,0.6);-webkit-transition: all 0.3s;}
.md-show ~ .md-overlay {opacity: 1;visibility: visible;}

/* Content styles */
.md-content {position: relative;border-radius: 12px;border: 4px solid #8E6937;margin: 0 auto;}
.md-effect-3 .md-content {-webkit-transform: translateY(20%);opacity: 0;-webkit-transition: all 0.3s;}
.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);opacity: 1;}

.popUp{background:#FFF;padding: 8px;}
.popUp .md-close{ width: 36px; height: 36px; position: absolute; display: block; right: 40px; top:40px; background:url(../images/eventClose.png); background-size: 100% 100%;z-index: 1;}
.popUp .popUpTitle{height: 60px; line-height: 60px; text-align: center; position: relative; font-size: 3em; font-weight: bold;}
.popUp .popBorder{height:calc(100% - 44px);padding: 22px; border: 1px solid #8E6937; border-radius: 12px; overflow: hidden; text-align: left; font-size:14px; color: #8e6937;}
.popUp .swiper-slide{ width: 600px;}
.popUp .swiper-scrollbar {border-radius: 10px;position: relative;-ms-touch-action: none;}
.popUp .swiper-container-vertical > .swiper-scrollbar {width: 20px !important;position: absolute;right: 0px;z-index: 150;width: 15px;background: transparent;}
.popUp .swiper-scrollbar-drag {height: 100%;width: 11px;position: relative;background: #ff6600;border-radius: 10px;left: 0;top: 0;}
.popUp .swiper-scrollbar-cursor-drag {cursor: move;}

.popLongTxt{width: 680px; height: 780px;}
.popLongTxt h4{ margin: 20px 0 20px; font-size:2em;}
.popLongTxt p{margin-bottom: 10px;font-size:1.7em;}
.popLongTxt .blod{font-weight: bold;}
.popLongTxt ol{padding-left: 49px;font-size:1.7em;}
.popLongTxt ol li{list-style-type:decimal;}
.popLongTxt a{color: #8e6937; font-weight: bold;}
.popLongTxt table{background: #8e6937;}
.popLongTxt td{background: #FFF; padding: 8px;font-size:1.7em;}
.popAlert{width: 600px; text-align: center;}

#popNote1 .swiper-container {width: 640px;top: 100px;bottom: 8px;position: absolute;}   
#popNote2 .swiper-container {width: 640px;top: 100px;bottom: 68px;position: absolute;}   
#popNote2 .agreeBtn{width: 257px; height: 86px; position: absolute; left: 50%; margin-left: -128px; bottom: 40px; text-align: center; background: #FF6600; border-radius: 12px; line-height: 86px; color: #FFF; font-weight: bold; font-size: 2em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}


.popAlert .popUpTitle{}
.popAlert .popMsg{margin-top: 40px; line-height:46px;text-align: center; font-size:1.8em}
.popAlert .onlyMsg{margin: 90px 0; line-height:46px;text-align: center; font-size:1.8em}
.popAlert .popBox{ min-height: 270px; padding: 20px 0;}
.popBtn{width: 256px; height: 86px; line-height: 86px; border-radius: 16px; background: -webkit-linear-gradient(#ff8a00, #ff6505); margin: auto; 
text-align: center; color: #FFF; font-size: 1.8em; font-weight: bold; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
.alertBtn1{margin-top: 40px;}

#popAlert4 .popMsg{margin: 50px 0; line-height:46px;text-align: center;}
#popAlert4 .takeCardBtn{width: 256px; height: 86px; margin: auto; margin-bottom: 20px; text-align: center;  background: #FF6600; border-radius: 12px; line-height: 86px; color: #FFF; font-weight: bold; font-size: 1.8em; text-shadow: 0 0 2px rgba(0,0,0,0.4);}

.timeOutAlert .popUpTitle{ font-size:2.2em}
.timeOutAlert .popMsg{ font-size:1.8em}
.awardTxt{ display: none;}