@charset "UTF-8";
html, body {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background-color: transparent; }
  a:active, a:hover {
    outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
body input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled],
body input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

optgroup {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td, th {
  padding: 0; }

/*      basic elements
-----------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, p, figure, form, blockquote {
  margin: 0; }

ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0; }

button {
  outline: none; }

*,
*::before,
*::after {
  box-sizing: border-box; }

html, body {
  text-align: center;
  height: 100%; }

body {
  font: 16px/1.25 "Microsoft Jhenghei", \5FAE\8EDF\6B63\9ED1\9AD4, Georgia, Arial, sans-serif;
  color: #542913;
  background: #F3A670; }

a {
  color: #125479;
  text-decoration: none;
  transition: all .35s ease; }
  a:hover, a.active {
    color: #082636; }
  a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eeeeee; }

img {
  vertical-align: middle; }

@font-face {
  font-family: AnjaEliane;
  src: url(AnjaEliane.eot);
  /* eot for IE */
  src: local("Anja Eliane"), url(../../../../html/abc/demo/font/AnjaEliane.woff) format("woff"), url(../../../../html/abc/demo/font/AnjaEliane.otf) format("opentype"), url(../../../../html/abc/demo/font/AnjaEliane.ttf) format("opentype"); }
@font-face {
  font-family: MElleHK;
  src: local("蒙纳繁雅丽"), local("MElleHK-Medium"), url(../../../../html/abc/demo/font/MElleHK.woff) format("woff"), url(../../../../html/abc/demo/font/MElleHK.otf) format("opentype"), url(../../../../html/abc/demo/font/MElleHK.ttf) format("opentype"); }
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.1;
  color: inherit; }
  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-weight: normal;
    line-height: 1;
    color: #2095d6; }

h1, h2, h3 {
  margin-top: 1.25em;
  margin-bottom: 0.625em; }
  h1 small, h2 small, h3 small {
    font-size: 65%; }

h4, h5, h6 {
  margin-top: 0.625em;
  margin-bottom: 0.625em; }
  h4 small, h5 small, h6 small {
    font-size: 75%; }

h1 {
  font-size: 2.25em; }

h2 {
  font-size: 1.875em; }

h3 {
  font-size: 1.5em; }

h4 {
  font-size: 1.125em; }

h5 {
  font-size: 1em; }

h6 {
  font-size: 0.875em; }

p {
  margin: 0 0 0.625em;
  line-height: 1.5; }

small {
  font-size: 85%; }

mark {
  background-color: #ffe595;
  padding: .2em; }

ul, ol {
  margin-bottom: 10px; }
  ul ul, ul ol, ol ul, ol ol {
    margin-bottom: 0; }

dl {
  margin-bottom: 20px; }

dt, dd {
  line-height: 1.25; }

dt {
  font-weight: bold; }

address {
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.25; }

.list-unstyled, .list-inline {
  list-style: none; }

.clearfix::before, section::before, footer::before,
#container::before, #header::before, .clearfix::after, section::after, footer::after,
#container::after, #header::after {
  content: " ";
  display: table; }
.clearfix::after, section::after, footer::after,
#container::after, #header::after {
  clear: both; }

.img-circle, .circle {
  border-radius: 50%; }

.full {
  width: 100%;
  max-width: 100%; }

.half {
  width: 46.9%; }

.float-l, .float-r {
  margin: 0 0 20px 0;
  position: relative; }

.float-l {
  float: left; }

.float-r {
  float: right; }

.valign-t {
  vertical-align: top; }

.valign-m {
  vertical-align: middle; }

.valign-b {
  vertical-align: bottom; }

.clear {
  clear: both; }

.hide {
  display: none; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

.list-inline {
  margin-left: -5px; }
  .list-inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px; }

.btn, .btn2 {
  display: inline-block;
  padding: 8px 36px 4px 12px;
  background: #E7B129 url(../../../../html/abc/demo/images/arrow.svg) 138px center no-repeat;
  border: 6px solid #E2951A;
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(128, 92, 37, 0.8);
  color: #7D412F;
  font-family: AnjaEliane, 'Microsoft Jhenghei', \5FAE\8EDF\6B63\9ED1\9AD4, sans-serif;
  font-size: 3em;
  line-height: 1.02; }
  .btn:focus, .btn2:focus, .btn.focus, .focus.btn2, .btn:active:focus, .btn2:active:focus, .btn:active.focus, .btn2:active.focus, .btn.active:focus, .active.btn2:focus, .btn.active.focus, .active.focus.btn2 {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .btn:hover, .btn2:hover, .btn:focus, .btn2:focus, .btn.focus, .focus.btn2 {
    background: #7D412F;
    color: #E7B129;
    border-color: #b55e44;
    padding-left: 24px;
    padding-right: 24px; }
  .btn:active, .btn2:active, .btn.active, .active.btn2 {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .btn.disabled, .disabled.btn2, .btn[disabled], [disabled].btn2, fieldset[disabled] .btn, fieldset[disabled] .btn2 {
    cursor: not-allowed;
    opacity: .65;
    box-shadow: none; }

.btn2 {
  background: #088B40;
  border: 10px solid #077335;
  border-width: 6px 12px 8px 12px;
  border-radius: 38px/25px;
  box-shadow: 10px 5px 0 rgba(102, 66, 30, 0.3);
  color: #fff;
  font-weight: bold;
  font-size: 2.375em;
  padding: 8px 20px 6px 20px; }
  .btn2:hover, .btn2:focus, .btn2:active {
    color: #fff;
    background: #055b2a;
    border-color: #088B40;
    padding-left: 20px;
    padding-right: 20px; }
  .btn2.next {
    background: #C52534;
    border-color: #b0212e; }
    .btn2.next:hover, .btn2.next:focus, .btn2.next:active {
      background: #9a1d29;
      border-color: #C52534; }

@-webkit-keyframes slide-up {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes slide-up {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes slide-down {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes slide-down {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1; }
  40% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    opacity: 0.5; }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1; } }
@keyframes swing {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1; }
  40% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    opacity: 0.5; }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1; } }
@-webkit-keyframes jump {
  80% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }
@keyframes jump {
  80% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }
@-webkit-keyframes jump-right {
  60% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px); } }
@keyframes jump-right {
  60% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px); } }
@-webkit-keyframes scale {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: .8; } }
@keyframes scale {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: .8; } }
@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5) translateY(200px);
    transform: scale(0.5) translateY(200px); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); } }
@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5) translateY(200px);
    transform: scale(0.5) translateY(200px); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); } }
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); } }
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); } }
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); } }
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); } }
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); } }
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); } }
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }
@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }
@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }
@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }
@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }
@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }
@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px); }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px); }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px); }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px); }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); } }
@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); } }
@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }
@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }
@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }
@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }
@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }
@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }
@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }
@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }
@-webkit-keyframes flash {
  0% {
    opacity: 1; }
  25% {
    opacity: 0; }
  50% {
    opacity: 1; }
  75% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes flash {
  0% {
    opacity: 1; }
  25% {
    opacity: 0; }
  50% {
    opacity: 1; }
  75% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  80% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  80% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  10% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  20% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  30% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  40% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  10% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  20% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  30% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  40% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }
@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }
@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }
@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }
@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }
@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }
@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }
@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }
@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }
@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }
@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }
@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }
@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }
@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }
@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }
@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }
@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }
@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  50% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  60% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  70% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  50% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  60% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  70% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
/*      layout
-----------------------------------------------------------------------*/
section, footer,
#container, #header {
  position: relative;
  margin: 0 auto; }

#container {
  background: #FFF2EA url(../../../../html/abc/demo/images/bg.png) 0 repeat;
  border-radius: 13px;
  box-shadow: 15px 15px 0 #EF8D46;
  max-width: 1000px;
  height: 700px;
  overflow: hidden;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

#header {
  padding: 15px 0 10px 20px;
  transition: top 1s, left 1s, transform 1s;
  z-index: 2; }

footer {
  font-size: 0.9375em;
  z-index: 3;
  top: 50%;
  -webkit-transform: translateY(-340px);
  transform: translateY(-340px); }

h1, h2, .title {
  display: inline-block;
  vertical-align: middle; }

h1 {
  font: 0/0 a;
  text-indent: -9999px;
  background: url(../../../../html/abc/demo/images/logo.png) 0 0 no-repeat;
  width: 297px;
  height: 99px;
  -webkit-animation: fadeInUp 1s forwards;
  animation: fadeInUp 1s forwards; }

h2 {
  margin-left: 10px;
  opacity: 0;
  font: 0/0 a;
  text-indent: -9999px;
  background: url(../../../../html/abc/demo/images/logo2.png) 0 0 no-repeat;
  width: 126px;
  height: 96px;
  -webkit-animation: rotateIn 1s ease .5s forwards, swing 1s ease-in 3s 3;
  animation: rotateIn 1s ease .5s forwards, swing 1s ease-in 3s 3; }
  h2.logo2 {
    background-image: url(../../../../html/abc/demo/images/logo2-2.png); }

#header {
  margin-bottom: 13px;
  text-align: left; }

h2 {
  background-image: url(../../../../html/abc/demo/images/logo2-2.png); }

.title {
  line-height: 1.4;
  margin-left: 15px; }
  .title span {
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
    -webkit-animation: fadeInLeft .5s ease-in 1s forwards;
    animation: fadeInLeft .5s ease-in 1s forwards; }
  .title .t1 {
    font: 0/0 a;
    text-indent: -9999px;
    background: url(../../../../html/abc/demo/images/p3/title.png) 0 0 no-repeat;
    width: 286px;
    height: 36px;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s; }
  .title .t2 {
    color: #098240;
    font-family: MElleHK, "Microsoft Jhenghei", \5FAE\8EDF\6B63\9ED1\9AD4, Georgia, Arial, sans-serif;
    font-weight: bold;
    font-size: 1.75em;
    letter-spacing: 1px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s; }

section {
  height: 563px;
  text-align: center;
  margin: auto; }

em {
  font-style: normal;
  display: inline-block;
  opacity: 0;
  -webkit-animation: fadeInUp .5s ease-in forwards;
  animation: fadeInUp .5s ease-in forwards; }
  em.eng {
    color: #0180CC;
    font-family: AnjaEliane, Georgia, Arial, sans-serif; }
  em.chinese {
    color: #3EB134;
    font-family: MElleHK, "Microsoft Jhenghei", \5FAE\8EDF\6B63\9ED1\9AD4, Georgia, Arial, sans-serif;
    font-weight: bold; }

button {
  background: none;
  border: none; }

[class*="os"], [class*="tip"], [class*="btn"], [class*="tiger"],
.icon-sound, .banner, .pic, .circle,
svg, h3, h4, strong {
  position: absolute; }

.icon-sound {
  right: 20px;
  bottom: 40px;
  z-index: 2; }

.btn, .btn2 {
  bottom: 10%;
  right: 5%;
  z-index: 1000; }

.btn2 {
  line-height: 1.1;
  padding: 10px 20px;
  padding-bottom: 7px; }

.circle {
  border: 4px dashed #FABE01;
  width: 70px;
  height: 70px;
  box-shadow: 0 0 20px #FABE01;
  transition: 0.5s ease-in;
  font: 0/0 a;
  text-indent: -9999px;
  -webkit-animation: dash 2s infinite;
  animation: dash 2s infinite; }
@-webkit-keyframes dash {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes dash {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
.tiger {
  left: 20px;
  top: 20px;
  -webkit-animation: bounceInUp 1s;
  animation: bounceInUp 1s; }

#scene1 {
  height: 100%; }
  #scene1 h1, #scene1 h2, #scene1 .title {
    position: absolute;
    top: 150px;
    left: 50%; }
  #scene1 h1 {
    margin-left: -215px; }
  #scene1 h2 {
    margin-left: 100px; }
  #scene1 .title {
    top: 250px;
    text-align: center;
    margin: auto;
    margin-top: 15px;
    min-width: 450px;
    opacity: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: fadeIn 3s 2s forwards;
    animation: fadeIn 3s 2s forwards; }
    #scene1 .title span {
      display: block;
      opacity: 1;
      -webkit-animation: bounce 1.5s forwards;
      animation: bounce 1.5s forwards; }
    #scene1 .title .t1 {
      background-image: url(../../../../html/abc/demo/images/p3/s1_title.png);
      width: 463px;
      height: 59px;
      -webkit-animation-delay: 3s;
      animation-delay: 3s; }
    #scene1 .title .t2 {
      color: #D33013;
      font-size: 2.9375em;
      line-height: 1.6;
      -webkit-animation-delay: 3.5s;
      animation-delay: 3.5s; }
  #scene1 .tiger {
    top: 150px; }
  #scene1 p {
    color: #532813;
    font-size: 1.625em;
    font-weight: bold;
    text-align: left;
    padding-left: 20px;
    margin: 0 0 10px 0;
    position: relative;
    top: 330px;
    left: 650px; }
    #scene1 p::before {
      content: '';
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #E60112;
      position: absolute;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%); }
  #scene1 .os1 {
    -webkit-animation: bounceInDown 1s;
    animation: bounceInDown 1s; }
  #scene1 .os2 {
    -webkit-animation: bounceInLeft 1s;
    animation: bounceInLeft 1s; }
    #scene1 .os2::before {
      background: #1078B0; }
  #scene1 .os3 {
    -webkit-animation: bounceInUp 1s;
    animation: bounceInUp 1s; }
    #scene1 .os3::before {
      background: #098240; }
  #scene1 .os4 {
    -webkit-animation: bounceInRight 1s;
    animation: bounceInRight 1s; }
    #scene1 .os4::before {
      background: #E68B1D; }
  #scene1 .next {
    font-size: 1.75em;
    padding: 15px 20px;
    bottom: 80px;
    right: 160px; }

#scene2 p {
  background: url(../../../../html/abc/demo/images/p3/s2_talk.png) center 0 no-repeat;
  font-size: 2.5em;
  text-align: center;
  width: 467px;
  height: 293px;
  right: 25px;
  opacity: 0; }
#scene2 em.eng {
  font-size: 0.95em; }
#scene2 .os1 {
  padding-top: 105px;
  -webkit-animation: fadeInRight 1s 2s forwards, bounceOutLeft 1s 10s forwards;
  animation: fadeInRight 1s 2s forwards, bounceOutLeft 1s 10s forwards; }
  #scene2 .os1 em:nth-of-type(1) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s; }
  #scene2 .os1 em:nth-of-type(2) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s; }
#scene2 .os2 {
  padding-top: 50px;
  -webkit-animation: fadeInRight 1s forwards;
  animation: fadeInRight 1s forwards; }
  #scene2 .os2 em:nth-of-type(1) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s; }
  #scene2 .os2 em:nth-of-type(2) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s; }
#scene2 .os3 {
  padding-top: 40px;
  -webkit-animation: fadeInRight 1s forwards;
  animation: fadeInRight 1s forwards; }
  #scene2 .os3 em:nth-of-type(1) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; }
  #scene2 .os3 em:nth-of-type(2) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s; }
  #scene2 .os3 em:nth-of-type(3) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s; }
  #scene2 .os3 em:nth-of-type(4) {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s; }
  #scene2 .os3 em:nth-of-type(5) {
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s; }
#scene2 .tip-nose {
  left: 275px;
  top: 180px;
  font: 0/0 a;
  text-indent: -9999px;
  background: url(../../../../html/abc/demo/images/p3/tip-nose.svg) 0 0 no-repeat;
  width: 50px;
  height: 38px;
  -webkit-animation: flash .5s infinite, scale .5s infinite;
  animation: flash .5s infinite, scale .5s infinite; }
#scene2 .next {
  right: 160px;
  bottom: 90px; }

.tip i, .tip2, .tip3 {
  font: 0/0 a;
  text-indent: -9999px;
  background: url(../../../../html/abc/demo/images/p3/s3_circle.png) center 0 no-repeat;
  width: 85px;
  height: 83px;
  -webkit-animation: flash 2s infinite;
  animation: flash 2s infinite; }

.tip i {
  display: block;
  position: absolute; }
  .tip i:nth-child(1) {
    left: 100px;
    top: 40px; }
  .tip i:nth-child(2) {
    left: 180px;
    top: 125px; }
  .tip i:nth-child(3) {
    left: 270px;
    top: 160px;
    background-position: center -110px; }
  .tip i:nth-child(4) {
    left: 250px;
    top: 220px;
    background-position: center -183px; }

.tip2 {
  left: 240px;
  top: 5px; }

.tip3 {
  left: 265px;
  top: 300px; }

#scene3 em {
  display: block;
  opacity: 1;
  -webkit-animation: rotateIn 1s;
  animation: rotateIn 1s; }
  #scene3 em.chinese {
    color: #D33013;
    font-size: 2.5em; }
  #scene3 em:nth-of-type(1) {
    background-attachment: fixed;
    font: 0/0 a;
    text-indent: -9999px;
    background: url(../../../../html/abc/demo/images/p3/s3_title.png) center 0 no-repeat;
    width: 478px;
    height: 82px; }
#scene3 p {
  right: 20px;
  top: 90px;
  text-align: center;
  margin-bottom: 10px; }
#scene3 .os2 em:nth-of-type(1) {
  background-position: center -165px; }
#scene3 .os3 em:nth-of-type(1) {
  background-position: center -299px; }

.list-unstyled {
  text-align: center;
  margin-top: 70px; }
  .list-unstyled li {
    border: 6px solid #3EB134;
    border-radius: 10px;
    position: relative;
    display: inline-block;
    width: 312px;
    height: 182px;
    margin: 12px 40px;
    opacity: 0;
    -webkit-animation: fadeInLeft 1s forwards;
    animation: fadeInLeft 1s forwards; }
  .list-unstyled p {
    font-size: 2.3125em;
    text-shadow: 1px 1px 1px #fff;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-animation: fadeIn .5s forwards;
    animation: fadeIn .5s forwards; }

#scene4 p {
  font-family: MElleHK, "Microsoft Jhenghei", \5FAE\8EDF\6B63\9ED1\9AD4, Georgia, Arial, sans-serif;
  font-weight: bold;
  line-height: 1.2;
  margin: 0; }
#scene4 [class*="os"] {
  left: 0;
  right: 0;
  text-align: center;
  -webkit-animation: rotateIn 1s;
  animation: rotateIn 1s; }
#scene4 .os1 {
  top: -10px;
  color: #D33013;
  font-size: 1.5625em; }
#scene4 .os2 {
  top: 26px;
  font-size: 2.3125em; }
  #scene4 .os2 em {
    margin: 0 30px; }
    #scene4 .os2 em:nth-of-type(1) {
      color: #0180CC; }
    #scene4 .os2 em:nth-of-type(2) {
      color: #3EB134; }
#scene4 .p1 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s; }
  #scene4 .p1 p {
    color: #E60112;
    -webkit-transform: translate(-100px, 15px) rotate(-5deg);
    transform: translate(-100px, 15px) rotate(-5deg);
    -webkit-animation-delay: 2.3s;
    animation-delay: 2.3s; }
#scene4 .p2 {
  border-color: #FABE01;
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s; }
  #scene4 .p2 p {
    color: #0A9AE1;
    -webkit-transform: translate(160px, 10px) rotate(6deg);
    transform: translate(160px, 10px) rotate(6deg);
    -webkit-animation-delay: 2.9s;
    animation-delay: 2.9s; }
#scene4 .p3 {
  border-color: #E60112;
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s; }
  #scene4 .p3 p {
    color: #098240;
    -webkit-transform: translate(-120px, 40px) rotate(-6deg);
    transform: translate(-120px, 40px) rotate(-6deg);
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s; }
#scene4 .p4 {
  border-color: #0180CC;
  -webkit-animation-delay: 3.8s;
  animation-delay: 3.8s; }
  #scene4 .p4 p {
    color: #E68B1D;
    -webkit-transform: translate(180px, 20px) rotate(8deg);
    transform: translate(180px, 20px) rotate(8deg);
    -webkit-animation-delay: 4.2s;
    animation-delay: 4.2s; }
#scene4 .next {
  right: 5%;
  bottom: 3%; }

#scene5 .pic {
  top: -137px;
  left: 0;
  -webkit-animation: fadeInUp 1.5s;
  animation: fadeInUp 1.5s; }
#scene5 h3 {
  top: 0;
  right: 40px;
  color: #D33013;
  font-family: MElleHK, "Microsoft Jhenghei", \5FAE\8EDF\6B63\9ED1\9AD4, Georgia, Arial, sans-serif;
  font-size: 2.3125em;
  -webkit-animation: bounceIn 1s, bounceOutRight 1s 3.5s forwards;
  animation: bounceIn 1s, bounceOutRight 1s 3.5s forwards; }
#scene5 .circle {
  width: 90px;
  height: 90px;
  top: 50%;
  left: 50%;
  margin: 30px 0 0 -10px; }
#scene5 p {
  background-attachment: fixed;
  background: url(../../../../html/abc/demo/images/p3/s5_talk.png) center 0 no-repeat;
  color: #0A9AE1;
  font-family: AnjaEliane, Georgia, Arial, sans-serif;
  font-size: 2.25em;
  line-height: 1.2;
  text-align: center;
  width: 275px;
  height: 185px;
  padding-top: 40px;
  margin: 0; }
#scene5 .os1, #scene5 .os3, #scene5 .os5 {
  top: 80px;
  left: 50px; }
#scene5 .os2, #scene5 .os4, #scene5 .os6 {
  top: 40px;
  right: 50px;
  background-position: center -252px;
  padding-left: 20px; }

@-webkit-keyframes scaleBottom {
  to {
    height: 1000px;
    margin: -550px 0 0 -210px;
    -webkit-transform: scale(1.3);
    transform: scale(1.3); } }
@keyframes scaleBottom {
  to {
    height: 1000px;
    margin: -550px 0 0 -210px;
    -webkit-transform: scale(1.3);
    transform: scale(1.3); } }
#scene6 .icon-sound {
  left: 50%;
  top: 100px; }
#scene6 .tiger2 {
  left: 50px;
  z-index: 3;
  -webkit-animation: bounceInUp 1s, drive 3s infinite 1.5s;
  animation: bounceInUp 1s, drive 3s infinite 1.5s; }
#scene6 .pic {
  left: 360px;
  -webkit-animation: bounceInRight 1s, bounceOutRight 1s 10s forwards;
  animation: bounceInRight 1s, bounceOutRight 1s 10s forwards; }
#scene6 .banner {
  top: -137px;
  left: 0;
  z-index: 1;
  opacity: 0;
  -webkit-animation: fadeInUp 1s 11s forwards;
  animation: fadeInUp 1s 11s forwards; }
#scene6 .os {
  top: -10px;
  right: 0; }
  #scene6 .os em {
    color: #0A9AE1;
    font-family: AnjaEliane, Georgia, Arial, sans-serif;
    font-size: 2.1875em;
    -webkit-animation: bounceIn 1s, bounceOutRight 1s 10s forwards;
    animation: bounceIn 1s, bounceOutRight 1s 10s forwards; }
#scene6 h3 {
  left: 610px;
  margin: 0;
  color: #D33013;
  font-family: MElleHK, "Microsoft Jhenghei", \5FAE\8EDF\6B63\9ED1\9AD4, Georgia, Arial, sans-serif;
  font-size: 2.5625em;
  z-index: 4;
  -webkit-animation: rotateInDownLeft 1s forwards;
  animation: rotateInDownLeft 1s forwards; }
#scene6 h4 {
  top: 40px;
  left: 580px;
  color: #532813;
  font-size: 2.3125em;
  font-weight: bold;
  z-index: 5;
  -webkit-animation: rotateInDownRight 1s forwards;
  animation: rotateInDownRight 1s forwards; }
#scene6 strong {
  top: 125px;
  left: 600px;
  z-index: 6;
  font: 0/0 a;
  text-indent: -9999px;
  background: url(../../../../html/abc/demo/images/p3/s6_title.png) 0 0 no-repeat;
  width: 329px;
  height: 87px;
  -webkit-animation: rotateInUpLeft 1s forwards;
  animation: rotateInUpLeft 1s forwards; }
#scene6 .btn2 {
  right: 260px;
  bottom: 195px; }
  #scene6 .btn2.next {
    bottom: 100px; }

@-webkit-keyframes drive {
  0%, 100% {
    -webkit-transform: translate(0);
    transform: translate(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate(-10px, 0);
    transform: translate(-10px, 0); }
  20%, 80% {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0); }
  40% {
    -webkit-transform: translate(10px, -30px);
    transform: translate(10px, -30px); }
  60% {
    -webkit-transform: translate(-10px, -15px);
    transform: translate(-10px, -15px); } }
@keyframes drive {
  0%, 100% {
    -webkit-transform: translate(0);
    transform: translate(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate(-10px, 0);
    transform: translate(-10px, 0); }
  20%, 80% {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0); }
  40% {
    -webkit-transform: translate(10px, -30px);
    transform: translate(10px, -30px); }
  60% {
    -webkit-transform: translate(-10px, -15px);
    transform: translate(-10px, -15px); } }
.hide, .icon-sound,
#header, section {
  display: none; }