@charset "UTF-8";
#help .scroll { zoom: 1; }

#help .scroll:before { content: ""; display: table; }

#help .scroll:after { content: ""; display: table; clear: both; }

html { height: 100%; }

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

.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: rgba(0, 0, 0, 0.8); }

#help { position: absolute; padding: 20px; width: 626px; max-height: 626px; margin: auto; top: 0; left: 0; right: 0; bottom: 0; background-color: #FFE065; border-radius: 20px; opacity: 0; }

#help h3 { text-align: center; font-size: 40px; margin: 0; }

#help .scroll { height: 564px; overflow: auto; outline: none; text-align: center; }

#help .scroll p { margin: 0; }

#help .scroll h4 { text-align: left; text-indent: -40px; margin-left: 70px; font-size: 26px; }

#help .scroll h4 img { vertical-align: top; margin-right: 5px; }

#help .close { position: absolute; z-index: 999; cursor: pointer; top: 10px; right: 10px; display: block; width: 45px; height: 45px; background: url(../Images/btn_close.png) 0 0 no-repeat; }

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

#wrapper { position: relative; margin: 0 auto 0; width: 1000px; height: 960px; }

.logo { position: absolute; right: 78px; bottom: 7px; }

.person { position: absolute; width: 448px; height: 448px; left: 204px; bottom: 0; background: url(../Images/pic_people.png) 0 0 no-repeat; }

.dialogBox { position: absolute; left: 24px; top: 372px; opacity: 0; -webkit-animation: show 1s forwards; animation: show 1s forwards; -webkit-animation-delay: 4s; animation-delay: 4s; }

.star { position: absolute; width: 44px; height: 44px; background: url(../Images/pic_sparkle.png) 0 0 no-repeat; }

.star1 { top: 2px; left: 364px; -webkit-transform: scale(0.76); transform: scale(0.76); }

.star2 { top: 96px; left: 136px; }

.star3 { top: 408px; left: 322px; -webkit-transform: scale(0.7); transform: scale(0.7); }

.star4 { top: 88px; right: 70px; -webkit-transform: scale(0.75); transform: scale(0.75); }

.star5 { top: 362px; right: 210px; -webkit-transform: scale(0.75); transform: scale(0.75); }

.star6 { top: 452px; right: 10px; }

.itemSection { opacity: 0; -webkit-animation: show 2s forwards; animation: show 2s forwards; -webkit-animation-delay: 2s; animation-delay: 2s; }

.item { position: absolute; width: 124px; height: 124px; }

.item1 { top: 36px; right: 124px; background: url(../Images/pic_item_1.png) 0 0 no-repeat; -webkit-animation: item 2.5s infinite; animation: item 2.5s infinite; -webkit-animation-direction: alternate-reverse; animation-direction: alternate-reverse; -webkit-animation-delay: 4s; animation-delay: 4s; }

.item2 { top: 66px; left: 250px; background: url(../Images/pic_item_2.png) 0 0 no-repeat; -webkit-animation: item 2s infinite; animation: item 2s infinite; -webkit-animation-delay: 4s; animation-delay: 4s; }

.item3 { top: 234px; left: 166px; background: url(../Images/pic_item_3.png) 0 0 no-repeat; -webkit-animation: item 1.5s infinite; animation: item 1.5s infinite; -webkit-animation-direction: reverse; animation-direction: reverse; -webkit-animation-delay: 4s; animation-delay: 4s; }

.item4 { top: 280px; right: 52px; background: url(../Images/pic_item_4.png) 0 0 no-repeat; -webkit-animation: item 3s infinite; animation: item 3s infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-delay: 4s; animation-delay: 4s; }

.light { position: absolute; top: 360px; left: 280px; width: 572px; height: 324px; background: url(../Images/pic_light.png) 0 0 no-repeat; opacity: 0; -webkit-animation: light 0.8s forwards; animation: light 0.8s forwards; -webkit-animation-delay: 1s; animation-delay: 1s; }

.hologram { position: absolute; top: 620px; left: 486px; width: 132px; height: 64px; background: url(../Images/pic_hologram.png) 0 0 no-repeat; }

.eggSection { opacity: 0; -webkit-animation: show 2s forwards; animation: show 2s forwards; -webkit-animation-delay: 2s; animation-delay: 2s; }

.egg { position: absolute; top: 74px; left: 377px; -webkit-transform-origin: center 90%; transform-origin: center 90%; -webkit-animation: egg 2s infinite; animation: egg 2s infinite; -webkit-animation-delay: 4s; animation-delay: 4s; }

.button { position: absolute; bottom: 88px; left: 66px; display: block; box-sizing: border-box; padding: 8px 0 15px; border-radius: 6px; border: 3px solid #000; font-weight: bold; color: #000; background-color: #FC0; box-shadow: #CB9400 0 -5px inset, #000 0 -8px inset; font-size: 30px; width: 232px; height: 60px; text-align: center; line-height: 32px; cursor: pointer; }

@-webkit-keyframes show { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes show { 0% { opacity: 0; }
  100% { opacity: 1; } }

@-webkit-keyframes light { 0% { opacity: 0; }
  80% { opacity: 1; }
  90% { opacity: 0.8; }
  95% { opacity: 0.5; }
  100% { opacity: 1; } }

@keyframes light { 0% { opacity: 0; }
  80% { opacity: 1; }
  90% { opacity: 0.8; }
  95% { opacity: 0.5; }
  100% { opacity: 1; } }

@-webkit-keyframes egg { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
  40% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  50% { -webkit-transform: rotate(0); transform: rotate(0); }
  60% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
  100% { -webkit-transform: rotate(0); transform: rotate(0); } }

@keyframes egg { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
  40% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  50% { -webkit-transform: rotate(0); transform: rotate(0); }
  60% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
  100% { -webkit-transform: rotate(0); transform: rotate(0); } }

@-webkit-keyframes item { 0% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(10px); transform: translateY(10px); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); } }

@keyframes item { 0% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(10px); transform: translateY(10px); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); } }