@charset "UTF-8";
#intro { zoom: 1; }

#intro:before { content: ""; display: table; }

#intro:after { content: ""; display: table; clear: both; }

html { height: 100%; }

body { width: 100%; height: 100%; font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif; background-color: #44C7F5; }

button { position: relative; display: block; box-sizing: border-box; padding: 8px 0 15px; border-radius: 6px; border: 2px solid #000; font-weight: bold; }

button.btnYellow { color: #000; background-color: #FC0; box-shadow: #CB9400 0 -5px inset, #000 0 -7px inset; }

button.btnPink { color: #FFF; text-shadow: 2px 0 0 #D24F45, -2px 0 0 #D24F45, 0 2px 0 #D24F45, 0 -2px 0 #D24F45, 1px 1px #D24F45, -1px -1px 0 #D24F45, 1px -1px 0 #D24F45, -1px 1px 0 #D24F45; background-color: #FF6C61; box-shadow: #CC443A 0 -5px inset, #000 0 -7px inset; }

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

#data { position: absolute; top: 0; left: 0; z-index: 999999; }

#data p { font-size: 30px; color: #F00; }

#music { position: absolute; top: 0; left: 0; }

#match { position: absolute; top: 50px; left: 0; }

#success { position: absolute; top: 100px; left: 0; }

#final { position: absolute; top: 150px; left: 0; }

.step { position: relative; display: none; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; }

#help { position: absolute; display: none; z-index: 999; top: 0; left: 0; margin: 15px; width: calc(100% - 30px); height: calc(100% - 30px); border-radius: 10px; box-sizing: border-box; background-color: #FFE065; border: 2px solid #000; text-align: center; }

#help .close { position: absolute; display: block; top: 0; right: 0; margin: 0; width: 54px; height: 54px; z-index: 10; background-position: 60% 30%; background-repeat: no-repeat; background-size: 33.3333%; background-image: url(../Images/icon_close.png); }

#help .scroll { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 94%; overflow: auto; z-index: 0; }

#help .scroll h3 { margin-top: 10px; }

#help .scroll h3 img { display: inline-block; width: 124px; }

#help .scroll > img { margin: 0 auto; display: block; width: 256px; }

#help .scroll > p { text-align: left; margin: 20px 15px 0 44px; font-weight: bold; font-size: 18px; text-indent: -1.5em; }

#help .scroll > p img { vertical-align: top; display: inline-block; margin-right: 5px; width: 22px; height: 22px; }

#help .scroll button { margin: 0 0 20px; display: inline-block; width: 222px; font-size: 23px; }

#help .scroll a { display: inline-block; font-weight: bold; padding: 2px 15px; margin: 0 10px; text-decoration: none; color: #FFF; background-color: #FF6C61; border-radius: 5px; }

#alert { position: absolute; z-index: 999; display: none; top: 0; left: 0; margin: 15px; width: calc(100% - 30px); height: calc(100% - 30px); border-radius: 10px; background-color: rgba(0, 0, 0, 0.9); }

#alert p { position: absolute; margin: auto; height: 50px; top: 0; left: 0; right: 0; bottom: 0; font-size: 20px; font-weight: bold; text-align: center; line-height: 1.2em; color: #FFF; }

#intro { display: block; }

#intro .eggIndex { position: relative; margin: 5% auto 0; width: 45%; z-index: 1; }

#intro .handSection { position: relative; margin: -90px auto 0; width: 90%; z-index: 0; }

#intro .mobile { position: relative; width: 100%; z-index: 0; }

#intro .hand { position: absolute; display: block; width: 250px; height: 135px; bottom: -127px; background-position: 0 0; background-repeat: no-repeat; background-size: 100%; z-index: 1; }

#intro .hand.left { right: 54.2%; -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(-11deg); transform: rotate(-11deg); background-image: url(../Images/leftHand.png); }

#intro .hand.right { left: 54.2%; -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: rotate(11deg); transform: rotate(11deg); background-image: url(../Images/rightHand.png); }

#intro .btnSection { margin-top: 24%; width: 100%; }

#intro .btnSection button { margin: 10px auto; width: 72.65625%; font-size: 5vmin; }

#intro .item { position: absolute; display: block; width: 60px; height: 60px; background-position: 0 0; background-repeat: no-repeat; background-size: 100%; -webkit-transform-origin: center; transform-origin: center; }

#intro .item_1 { top: 2%; left: 10%; background-image: url(../Images/pic_item_1.png); }

#intro .item_2 { top: 4%; right: 5%; background-image: url(../Images/pic_item_2.png); }

#intro .item_3 { top: 15%; left: 3%; background-image: url(../Images/pic_item_3.png); }

#intro .item_4 { top: 18%; right: 3%; background-image: url(../Images/pic_item_4.png); }

#intro .item_5 { top: 36%; left: 13%; }

#intro .item_6 { top: 30%; right: 18%; }

#intro .item_5, #intro .item_6 { width: 20px; height: 20px; background-image: url(../Images/pic_star.png); }

#prepare button { position: absolute; margin-top: -30px; top: 50%; left: -70px; width: 236px; height: 60px; font-size: 23px; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

#install { height: 100%; }

#install h4 { position: absolute; width: 254px; height: 82px; top: 50%; margin-top: -41px; left: 100%; margin-left: -178px; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

#install .dot { position: absolute; margin: auto; border: 2px solid #FFF; border-radius: 50%; top: 0; left: 0; right: 0; bottom: 0; width: 90px; height: 90px; }

#install .dot::before { position: absolute; display: block; content: ""; margin-top: -36px; margin-left: -36px; top: 50%; left: 50%; width: 72px; height: 72px; background-color: #FFF; border-radius: 50%; }

#poseHint { display: none; height: 100%; }

#poseHint h4 { position: absolute; margin-top: -18px; margin-left: -200px; top: 50%; left: 100%; width: 344px; height: 36px; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

#poseHint .pic { position: absolute; margin: auto; top: 42px; left: 38px; right: 0; bottom: 0; width: 152px; height: 148px; background-position: 0 0; background-repeat: no-repeat; background-size: 100%; background-image: url(../Images/pic_poseHint.png); -webkit-transform: rotate(90deg); transform: rotate(90deg); }

#teach .teach { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; }

#teach .teach1 .egg { -webkit-transform: rotate(40deg); transform: rotate(40deg); }

#teach .teach2, #teach .teach3 { display: none; }

#teach .eggPos { width: 186px; }

#teach .eggPos .halo, #teach .eggPos .blur { display: block; opacity: 1; }

#teach .eggPos .blur { -webkit-transform: scale(1.25); transform: scale(1.25); }

#teach .eggPos .text { position: relative; display: block; margin-top: -18px; color: #FFF; font-size: 15px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); text-align: center; }

#teach .eggPos .text p { margin: 0; line-height: 1em; }

#teach .eggPos.right { right: -34px; }

#teach .eggPos.left { left: -34px; }

#teach .eggPos .egg { margin-top: 15px; width: 45px; height: 65px; }

#teach .eggPos .hint { position: absolute; display: block; margin: auto; border-radius: 50%/60% 60% 40% 40%; border: 2px dashed #FFF; top: 15px; left: 0; right: 0; bottom: 0; width: 45px; height: 65px; box-sizing: border-box; -webkit-transform-origin: center; transform-origin: center; text-align: center; -webkit-transform: scale(1.1); transform: scale(1.1); }

.center { position: absolute; display: block; width: 100%; height: 320px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

.eggPos { position: absolute; box-sizing: border-box; height: 80px; }

.eggPos.right { top: 50%; margin-top: -40px; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.eggPos.left { top: 50%; margin-top: -40px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

.eggPos .egg { position: absolute; display: block; margin: auto; border-radius: 50%/60% 60% 40% 40%; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; background-color: #FFF; -webkit-transform-origin: 50% 90%; transform-origin: 50% 90%; text-align: center; }

.eggPos .halo { position: absolute; display: block; margin: auto; border-radius: 50%/60% 60% 40% 40%; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; background-color: #FFE048; -webkit-box-shadow: #FFE048 0 0 25px 8px; opacity: 0; }

.eggPos .blur { position: absolute; display: none; border-radius: 50%/60% 60% 40% 40%; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: scale(1.2); transform: scale(1.2); box-sizing: border-box; z-index: 0; box-shadow: #FFE048 0 0 12px, #FFE048 0 0 10px 2px inset; -webkit-transform: translateZ(0); }

.eggPos .blur.scale { -webkit-animation: blurScale 1s forwards; animation: blurScale 1s forwards; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; }

.eggPos .countDown { display: none; margin: 30px 0 0; font-size: 20px; color: #F00; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.eggPos .outcome { position: absolute; margin-left: -80px; left: 50%; top: 20px; width: 160px; height: 50px; font-size: 24px; color: #333; }

.eggPos .outcome span { opacity: 0; -webkit-transform: translateZ(0); }

.eggPos .outcome.record span { margin-top: 10px; display: block; -webkit-animation: count 1s; animation: count 1s; }

.eggPos .gameCountDown { position: absolute; margin-left: -25px; left: 50%; top: 20px; width: 50px; height: 50px; font-size: 30px; color: #333; }

.eggPos .gameCountDown span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; line-height: 50px; opacity: 0; -webkit-transform: translateZ(0); }

.eggPos .gameCountDown.count span:nth-child(1) { -webkit-animation: count 1s forwards; animation: count 1s forwards; }

.eggPos .gameCountDown.count span:nth-child(2) { -webkit-animation: count 1s forwards; animation: count 1s forwards; -webkit-animation-delay: 1s; animation-delay: 1s; }

.eggPos .gameCountDown.count span:nth-child(3) { -webkit-animation: count 1s forwards; animation: count 1s forwards; -webkit-animation-delay: 2s; animation-delay: 2s; }

#game { background-color: #000; }

#game .info { display: none; }

#game .eggPos { width: 80px; }

#game .eggPos.right { right: 10px; }

#game .eggPos.left { left: 10px; }

#game .eggPos .egg { width: 60px; height: 80px; }

#game.test .eggPos { width: 186px; }

#game.test .eggPos .info { position: relative; display: block; margin-top: -18px; color: #FFF; font-size: 15px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); text-align: center; }

#game.test .eggPos .info p { margin: 0; display: none; }

#game.test .eggPos .info p:first-child { display: block; }

#game.test .eggPos.right { right: -34px; }

#game.test .eggPos.left { left: -34px; }

#game.test .eggPos .egg { width: 45px; height: 65px; }

#game.test .eggPos .hint { position: absolute; display: block; margin: auto; border-radius: 50%/60% 60% 40% 40%; border: 2px dashed #FFF; top: 0; left: 0; right: 0; bottom: 0; width: 45px; height: 65px; box-sizing: border-box; -webkit-transform-origin: center; transform-origin: center; text-align: center; -webkit-transform: scale(1.1); transform: scale(1.1); }

#game.test .eggPos .countDown, #game.test .eggPos .outcome { display: none; }

.danceEgg { position: absolute; display: block; width: 200px; height: 100px; font-size: 30px; overflow: hidden; text-align: center; }

.danceEgg.right { top: 50%; right: -50px; margin-top: -50px; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.danceEgg.left { top: 50%; left: -50px; margin-top: -50px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

.danceEgg span { position: absolute; display: block; width: 40px; height: 40px; overflow: hidden; background-position: 0 0; background-repeat: no-repeat; background-size: 200%; }

.danceEgg span.style1 { background-image: url(../Images/pointEgg1.png); }

.danceEgg span.style2 { background-image: url(../Images/pointEgg2.png); }

.danceEgg span.style3 { background-image: url(../Images/pointEgg3.png); }

.danceEgg span.style4 { background-image: url(../Images/pointEgg4.png); }

.danceEgg span.style5 { background-image: url(../Images/pointEgg5.png); }

.danceEgg span.style6 { background-image: url(../Images/pointEgg6.png); }

.danceEgg span.style7 { background-image: url(../Images/pointEgg7.png); }

.danceEgg span.style8 { background-image: url(../Images/pointEgg8.png); }

.danceEgg span.style9 { background-image: url(../Images/pointEgg9.png); }

.danceEgg span.style10 { background-image: url(../Images/pointEgg10.png); }

#endGame { background-color: #000; }

#endGame .center p { color: #FFF; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

#endGame .center > div { position: absolute; font-weight: bold; text-align: center; width: 100px; }

#endGame .center > div.right { top: 50%; right: -20px; margin-top: -27px; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

#endGame .center > div.left { top: 50%; left: -20px; margin-top: -27px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

#outcome .bg { position: relative; z-index: 0; }

#outcome .title h4:first-child { display: block; }

#outcome h4 { display: none; width: 83.125%; margin: 6% auto 2%; }

#outcome .picOutcome { position: relative; width: 83.125%; margin: 0 auto; margin-top: 150px; }

#outcome .picOutcome .eggMetal { position: absolute; width: 42%; left: 50%; bottom: 3%; margin-left: -21%; }

#outcome .picOutcome .eggMetal .score { position: absolute; width: 100%; top: 0; left: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); z-index: 9; }

#outcome .picOutcome .eggMetal .score.nowPoint { transition: all 0.5s ease-in-out; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }

#outcome .picOutcome .eggMetal .score.over { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }

#outcome .picOutcome .eggMetal .score.box { position: relative; opacity: 0; }

#outcome .btnSection { display: none; }

#outcome .icon { vertical-align: middle; display: inline-block; margin-top: -5px; margin-left: 2px; width: 24px; height: 24px; background-position: 0 0; background-repeat: no-repeat; background-size: 100%; background-image: url(../Images/icon_fbShare.png); }

#outcome button { display: block; margin: 10px auto; width: 73.25%; font-size: 5.4vmin; }

#outcome button.fb { color: #0061BB; }

#outcome .note { margin: 0; text-align: center; font-weight: bold; font-size: 5.4vmin; }

@-webkit-keyframes count { 0% { opacity: 0;
    -webkit-transform: rotateY(180deg) scale(1);
            transform: rotateY(180deg) scale(1); }
  5% { opacity: 1;
    -webkit-transform: rotateY(180deg) scale(1);
            transform: rotateY(180deg) scale(1); }
  70% { -webkit-transform: rotateY(180deg) scale(2); transform: rotateY(180deg) scale(2); }
  100% { -webkit-transform: rotateY(180deg) scale(2); transform: rotateY(180deg) scale(2);
    opacity: 0; } }

@keyframes count { 0% { opacity: 0;
    -webkit-transform: rotateY(180deg) scale(1);
            transform: rotateY(180deg) scale(1); }
  5% { opacity: 1;
    -webkit-transform: rotateY(180deg) scale(1);
            transform: rotateY(180deg) scale(1); }
  70% { -webkit-transform: rotateY(180deg) scale(2); transform: rotateY(180deg) scale(2); }
  100% { -webkit-transform: rotateY(180deg) scale(2); transform: rotateY(180deg) scale(2);
    opacity: 0; } }

@-webkit-keyframes blurScale { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2); } }

@keyframes blurScale { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2); } }

@-webkit-keyframes metal { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); }
  99% { opacity: 1; }
  100% { opacity: 0;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg); } }

@keyframes metal { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); }
  99% { opacity: 1; }
  100% { opacity: 0;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg); } }

@-webkit-keyframes metal2 { 0% { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }
  99% { opacity: 1; }
  100% { opacity: 0;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg); } }

@keyframes metal2 { 0% { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }
  99% { opacity: 1; }
  100% { opacity: 0;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg); } }