@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

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

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after { content: ''; content: none; }

q:before, q:after { content: ''; content: none; }

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

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

html { -webkit-overflow-scrolling: touch; }

body { background-color: #fff; vertical-align: middle; font-family: "Noto Sans TC", Arial, Microsoft JhengHei, "微軟正黑體", LiHei Pro, "儷黑體", PMingLiu,"新細明體", sans-serif; letter-spacing: .08rem; font-size: 16px; font-weight: normal; }

body a, body a:hover, body a:active, body a:focus { text-decoration: none; }

button { font-family: Arial, Microsoft JhengHei, "微軟正黑體", LiHei Pro, "儷黑體", PMingLiu,"新細明體", sans-serif; }

img { vertical-align: middle; border-style: none; outline: none; width: 100%; max-width: 100%; }

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

a, area, button, [role="button"], input, label, select, summary, textarea { touch-action: manipulation; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, ul, li, p, span { margin: 0; padding: 0; line-height: 1.5; }

h1 { font-size: 30px; letter-spacing: 0.5px; }

@media screen and (max-width: 540px) { h1 { font-size: 24px; } }

h3, .h3 { font-size: 24px; letter-spacing: 0.5px; }

@media screen and (max-width: 540px) { h3, .h3 { font-size: 20px; } }

p { font-size: 16px; letter-spacing: 1px; }

@media screen and (max-width: 540px) { p { font-size: 16px; } }

#index .kv-word h2, .game .btn-area h3 { font-family: ar-yuanb5std, sans-serif; font-style: normal; font-weight: 500; }

.preloader .loader, #index, #result, #success { background-size: 100% auto; background-repeat: no-repeat; padding-left: 10%; padding-right: 10%; }

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

.container-full, .container, #form { margin-right: auto; margin-left: auto; }

#app, #index .kv-word .top, .game .star.two, .game .star.three, .game .btn-area, #result .btn-area, #result .btn-area .btn-wrap, #success .btn-area { display: flex; justify-content: center; align-items: center; }

.statement { display: flex; justify-content: flex-start; align-items: center; }

.game .btn-area h3 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.wrong .cry-wrap, .wrong .cry-wrap .cry, a.logo, .kv-bear .eyes, .kv-bear .hand-wrap-clap, .kv-bear .hand-wrap-clap .hand, .statement, #index .cloud-wrap, #index .cloud-wrap .cloud, #index .kv-bear .hand, .game .star, .game .btn-area, .game .btn-twfhclife, #first .sweat-wrap, #first .sweat-wrap .sweat, #second .kv-bear .hand, #second .kv-bear .shock-wrap, #second .kv-bear .shock-wrap .shock, #third .hand-wrap, #third .hand-wrap .hand, #result .kv-bear .star, #result .kv-bear .hand, #list .shiny-wrap, #list .shiny-wrap .shiny, #list .fb, #success .star-wrap, #success .star-wrap .star { position: absolute; }

@keyframes up { 0% { transform: translateY(100px);
    opacity: 0; }
  100% { transform: translateY(0px);
    opacity: 1; } }

@keyframes down { 0% { transform: translateY(-30px);
    opacity: 0; }
  100% { transform: translateY(0px);
    opacity: 1; } }

@keyframes fly { 0% { transform: scale(0) rotate(-5deg) translate(0, 100px); }
  20%, 100% { transform: scale(1) rotate(0) translate(0); } }

@keyframes cloud-float { 0% { transform: translateX(0); }
  100% { transform: translateX(-30px); } }

@keyframes eyes { 0%, 5% { transform: rotateX(0); }
  2% { transform: rotateX(90deg); } }

@keyframes heart { from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); } }

@keyframes hand-big { 0% { transform: scale(1.1); }
  50%, 100% { transform: scale(1); } }

@keyframes sweat { 0% { opacity: 0;
    transform: translateY(0); }
  50% { opacity: 1;
    transform: translateY(20%); }
  100% { opacity: 0;
    transform: translateY(40%); } }

@keyframes star-get1 { 0%, 50% { width: 60%;
    left: 0%; }
  100% { left: 5%;
    width: 10%; } }

@keyframes star-get2 { 0%, 50% { width: 60%;
    left: 0%; }
  100% { left: 44%;
    width: 10%; } }

@keyframes car { 0%, 80% { left: -100%; }
  100% { left: -20%; } }

@keyframes shock-hand { 0% { left: 20%;
    top: -5%;
    transform: rotate(120deg); }
  20% { transform: rotate(0deg);
    left: 5%;
    top: 25%; } }

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

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

@keyframes hand1 { 0% { transform: rotate(0deg); }
  100% { transform: rotate(-10deg); } }

@keyframes hand2 { 0% { transform: rotate(0deg); }
  100% { transform: rotate(10deg); } }

@keyframes hand-big { 0% { transform: scale(0.9); }
  100% { transform: scale(1.1); } }

@keyframes star-result { 0%, 50% { width: 80%;
    top: 10%;
    right: 17%; }
  100% { width: 15.5%;
    top: 45.5%; } }

@keyframes hand-move { 0% { transform: scale3d(1, 0.9, 0.9); }
  55% { transform: scale3d(1, 1, 1) translateY(-0.8%); }
  100% { transform: scale3d(1, 0.9, 0.9); } }

@keyframes shiny { 0%, 20% { opacity: 1; }
  10% { opacity: 0; } }

@keyframes firework { 0% { transform: rotate(10deg); }
  100% { transform: rotate(-20deg); } }

@keyframes cry { 0% { transform: translateY(0); }
  100% { transform: translateY(100%);
    opacity: 0; } }

/*! Modaal - accessible modals - v0.4.4 by Humaan, for all humans. http://humaan.com */
.modaal-noscroll { overflow: hidden; }

.modaal-accessible-hide { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; }

.modaal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; opacity: 0; }

.modaal-wrapper { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; overflow: auto; opacity: 1; box-sizing: border-box; -webkit-overflow-scrolling: touch; transition: all 0.3s ease-in-out; }

.modaal-wrapper * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; }

.modaal-wrapper .modaal-close { border: none; background: transparent; padding: 0; -webkit-appearance: none; }

.modaal-wrapper.modaal-start_none { display: none; opacity: 1; }

.modaal-wrapper.modaal-start_fade { opacity: 0; }

.modaal-wrapper *[tabindex="0"] { outline: none !important; }

.modaal-wrapper.modaal-fullscreen { overflow: hidden; }

.modaal-outer-wrapper { display: table; position: relative; width: 100%; height: 100%; }

.modaal-fullscreen .modaal-outer-wrapper { display: block; }

.modaal-inner-wrapper { display: table-cell; width: 100%; height: 100%; position: relative; vertical-align: middle; text-align: center; padding: 80px 25px; }

.modaal-fullscreen .modaal-inner-wrapper { padding: 0; display: block; vertical-align: top; }

.modaal-container { position: relative; display: inline-block; width: 100%; margin: auto; text-align: left; color: #000; max-width: 1000px; border-radius: 0px; background: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); cursor: auto; }

.modaal-container.is_loading { height: 100px; width: 100px; overflow: hidden; }

.modaal-fullscreen .modaal-container { max-width: none; height: 100%; overflow: auto; }

.modaal-close { position: fixed; right: 20px; top: 20px; color: #fff; cursor: pointer; opacity: 1; width: 50px; height: 50px; background: rgba(0, 0, 0, 0); border-radius: 100%; transition: all 0.2s ease-in-out; }

.modaal-close:focus, .modaal-close:hover { outline: none; background: #fff; }

.modaal-close:focus:before, .modaal-close:focus:after, .modaal-close:hover:before, .modaal-close:hover:after { background: #b93d0c; }

.modaal-close span { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; }

.modaal-close:before, .modaal-close:after { display: block; content: " "; position: absolute; top: 14px; left: 23px; width: 4px; height: 22px; border-radius: 4px; background: #fff; transition: background 0.2s ease-in-out; }

.modaal-close:before { transform: rotate(-45deg); }

.modaal-close:after { transform: rotate(45deg); }

.modaal-fullscreen .modaal-close { background: #afb7bc; right: 10px; top: 10px; }

.modaal-content-container { padding: 30px; }

.modaal-confirm-wrap { padding: 30px 0 0; text-align: center; font-size: 0; }

.modaal-confirm-btn { font-size: 14px; display: inline-block; margin: 0 10px; vertical-align: middle; cursor: pointer; border: none; background: transparent; }

.modaal-confirm-btn.modaal-ok { padding: 10px 15px; color: #fff; background: #555; border-radius: 3px; transition: background 0.2s ease-in-out; }

.modaal-confirm-btn.modaal-ok:hover { background: #2f2f2f; }

.modaal-confirm-btn.modaal-cancel { text-decoration: underline; }

.modaal-confirm-btn.modaal-cancel:hover { text-decoration: none; color: #2f2f2f; }

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

.modaal-instagram .modaal-container { width: auto; background: transparent; box-shadow: none !important; }

.modaal-instagram .modaal-content-container { padding: 0; background: transparent; }

.modaal-instagram .modaal-content-container > blockquote { width: 1px !important; height: 1px !important; opacity: 0 !important; }

.modaal-instagram iframe { opacity: 0; margin: -6px !important; border-radius: 0 !important; width: 1000px !important; max-width: 800px !important; box-shadow: none !important; animation: instaReveal 1s linear forwards; }

.modaal-image .modaal-inner-wrapper { padding-left: 140px; padding-right: 140px; }

.modaal-image .modaal-container { width: auto; max-width: 100%; }

.modaal-gallery-wrap { position: relative; color: #fff; }

.modaal-gallery-item { display: none; }

.modaal-gallery-item img { display: block; }

.modaal-gallery-item.is_active { display: block; }

.modaal-gallery-label { position: absolute; left: 0; width: 100%; margin: 20px 0 0; font-size: 18px; text-align: center; color: #fff; }

.modaal-gallery-label:focus { outline: none; }

.modaal-gallery-control { position: absolute; top: 50%; transform: translateY(-50%); opacity: 1; cursor: pointer; color: #fff; width: 50px; height: 50px; background: rgba(0, 0, 0, 0); border: none; border-radius: 100%; transition: all 0.2s ease-in-out; }

.modaal-gallery-control.is_hidden { opacity: 0; cursor: default; }

.modaal-gallery-control:focus, .modaal-gallery-control:hover { outline: none; background: #fff; }

.modaal-gallery-control:focus:before, .modaal-gallery-control:focus:after, .modaal-gallery-control:hover:before, .modaal-gallery-control:hover:after { background: #afb7bc; }

.modaal-gallery-control span { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; }

.modaal-gallery-control:before, .modaal-gallery-control:after { display: block; content: " "; position: absolute; top: 16px; left: 25px; width: 4px; height: 18px; border-radius: 4px; background: #fff; transition: background 0.2s ease-in-out; }

.modaal-gallery-control:before { margin: -5px 0 0; transform: rotate(-45deg); }

.modaal-gallery-control:after { margin: 5px 0 0; transform: rotate(45deg); }

.modaal-gallery-next-inner { left: 100%; margin-left: 40px; }

.modaal-gallery-next-outer { right: 45px; }

.modaal-gallery-prev:before, .modaal-gallery-prev:after { left: 22px; }

.modaal-gallery-prev:before { margin: 5px 0 0; transform: rotate(-45deg); }

.modaal-gallery-prev:after { margin: -5px 0 0; transform: rotate(45deg); }

.modaal-gallery-prev-inner { right: 100%; margin-right: 40px; }

.modaal-gallery-prev-outer { left: 45px; }

.modaal-video-wrap { margin: auto 50px; position: relative; }

.modaal-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); background: #000; max-width: 1300px; margin-left: auto; margin-right: auto; }

.modaal-video-container iframe, .modaal-video-container object, .modaal-video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.modaal-iframe .modaal-content { width: 100%; height: 100%; }

.modaal-iframe-elem { width: 100%; height: 100%; display: block; }

@media only screen and (min-width: 1400px) { .modaal-video-container { padding-bottom: 0; height: 731px; } }

@media only screen and (max-width: 1140px) { .modaal-image .modaal-inner-wrapper { padding-left: 25px; padding-right: 25px; }
  .modaal-gallery-control { top: auto; bottom: 20px; transform: none; background: rgba(0, 0, 0, 0.7); }
  .modaal-gallery-control:before, .modaal-gallery-control:after { background: #fff; }
  .modaal-gallery-next { left: auto; right: 20px; }
  .modaal-gallery-prev { left: 20px; right: auto; } }

@media screen and (max-width: 900px) { .modaal-instagram iframe { width: 500px !important; } }

@media screen and (max-height: 1100px) { .modaal-instagram iframe { width: 700px !important; } }

@media screen and (max-height: 1000px) { .modaal-inner-wrapper { padding-top: 60px; padding-bottom: 60px; }
  .modaal-instagram iframe { width: 600px !important; } }

@media screen and (max-height: 900px) { .modaal-instagram iframe { width: 500px !important; }
  .modaal-video-container { max-width: 900px; max-height: 510px; } }

@media only screen and (max-width: 600px) { .modaal-instagram iframe { width: 280px !important; } }

@media only screen and (max-height: 820px) { .modaal-gallery-label { display: none; } }

.modaal-loading-spinner { background: none; position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin: -100px 0 0 -100px; transform: scale(0.25); }

@keyframes modaal-loading-spinner { 0% { opacity: 1;
    transform: scale(1.5); }
  100% { opacity: .1;
    transform: scale(1); } }

.modaal-loading-spinner > div { width: 24px; height: 24px; margin-left: 4px; margin-top: 4px; position: absolute; }

.modaal-loading-spinner > div > div { width: 100%; height: 100%; border-radius: 15px; background: #fff; }

.modaal-loading-spinner > div:nth-of-type(1) > div { animation: modaal-loading-spinner 1s linear infinite; animation-delay: 0s; }

.modaal-loading-spinner > div:nth-of-type(2) > div, .modaal-loading-spinner > div:nth-of-type(3) > div { -ms-animation: modaal-loading-spinner 1s linear infinite; -moz-animation: modaal-loading-spinner 1s linear infinite; -webkit-animation: modaal-loading-spinner 1s linear infinite; -o-animation: modaal-loading-spinner 1s linear infinite; }

.modaal-loading-spinner > div:nth-of-type(1) { transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); }

.modaal-loading-spinner > div:nth-of-type(2) > div { animation: modaal-loading-spinner 1s linear infinite; animation-delay: .12s; }

.modaal-loading-spinner > div:nth-of-type(2) { transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); }

.modaal-loading-spinner > div:nth-of-type(3) > div { animation: modaal-loading-spinner 1s linear infinite; animation-delay: .25s; }

.modaal-loading-spinner > div:nth-of-type(4) > div, .modaal-loading-spinner > div:nth-of-type(5) > div { -ms-animation: modaal-loading-spinner 1s linear infinite; -moz-animation: modaal-loading-spinner 1s linear infinite; -webkit-animation: modaal-loading-spinner 1s linear infinite; -o-animation: modaal-loading-spinner 1s linear infinite; }

.modaal-loading-spinner > div:nth-of-type(3) { transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); }

.modaal-loading-spinner > div:nth-of-type(4) > div { animation: modaal-loading-spinner 1s linear infinite; animation-delay: .37s; }

.modaal-loading-spinner > div:nth-of-type(4) { transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); }

.modaal-loading-spinner > div:nth-of-type(5) > div { animation: modaal-loading-spinner 1s linear infinite; animation-delay: .5s; }

.modaal-loading-spinner > div:nth-of-type(6) > div, .modaal-loading-spinner > div:nth-of-type(7) > div { -ms-animation: modaal-loading-spinner 1s linear infinite; -moz-animation: modaal-loading-spinner 1s linear infinite; -webkit-animation: modaal-loading-spinner 1s linear infinite; -o-animation: modaal-loading-spinner 1s linear infinite; }

.modaal-loading-spinner > div:nth-of-type(5) { transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); }

.modaal-loading-spinner > div:nth-of-type(6) > div { animation: modaal-loading-spinner 1s linear infinite; animation-delay: .62s; }

.modaal-loading-spinner > div:nth-of-type(6) { transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); }

.modaal-loading-spinner > div:nth-of-type(7) > div { animation: modaal-loading-spinner 1s linear infinite; animation-delay: .75s; }

.modaal-loading-spinner > div:nth-of-type(7) { transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); }

.modaal-loading-spinner > div:nth-of-type(8) > div { animation: modaal-loading-spinner 1s linear infinite; animation-delay: .87s; }

.modaal-loading-spinner > div:nth-of-type(8) { transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); }

.modaal-inner-wrapper { padding: 0 25px; }

@media screen and (max-width: 540px) { .modaal-inner-wrapper { padding: 0; } }

.modaal-container { background-color: transparent; max-width: 580px; height: auto; }

@media screen and (max-width: 1280px) { .modaal-container { max-width: 600px; } }

.modaal-content-container { padding: 0; }

.modaal-wrapper { background-color: rgba(85, 85, 85, 0.3); }

.modaal-wrapper .modaal-close { width: 60px; height: 60px; background-image: url(../img/close-bg.png); background-size: cover; background-position: center 0; transition: all 0s ease-in-out; z-index: 9999; }

.modaal-close { position: absolute; right: 30px; top: 30px; color: #fff; cursor: pointer; opacity: 1; opacity-z-index: 9999; }

.modaal-close:hover { transform: scale(1.1); }

.modaal-close:focus, .modaal-close:hover { outline: none; }

.modaal-close:before, .modaal-close:after { display: none; }

.modaal-close:focus:before, .modaal-close:focus:after, .modaal-close:hover:before, .modaal-close:hover:after { display: none; }

.hide { display: none; }

.content { background-color: #fff; padding: 5%; position: relative; letter-spacing: 2px; overflow: auto; }

.content .h1 { padding-top: 10%; text-align: center; font-weight: 600; color: #328C8E; font-size: 30px; }

.content hr { border-style: dashed; border-width: 2px; border-color: #E91B68; margin-top: 20px; margin-bottom: 20px; }

.content p { font-family: '微軟正黑體', sans-serif; font-size: 1.125rem; text-align: justify; line-height: 30px; margin-bottom: 20px; }

@media screen and (max-width: 480px) { .content p { font-size: 1rem; letter-spacing: 2px; } }

.content .sp { color: #577fbc; }

.content ul { margin-left: 36px; font-family: '微軟正黑體', sans-serif; }

.content ul li { list-style: decimal; text-align: justify; font-size: 1.125rem; line-height: 30px; margin-bottom: 10px; }

@media screen and (max-width: 480px) { .content ul li { font-size: 1rem; letter-spacing: 2px; } }

@media screen and (max-width: 540px) { .content { padding: 15px; } }

.info { padding-bottom: 30%; min-height: 100vh; }

.info p { letter-spacing: 2px; margin-bottom: 5px; }

.info hr.in { border-style: solid; border-width: 1px; border-color: #eee; margin-bottom: 12%; }

.info .fb { margin-left: 10px; }

.info .highlight { color: #000; text-decoration: line-through; }

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

.personal ul li ul { margin-left: 50px; }

.personal ul > li > ul > li { list-style: decimal-leading-zero; }

.wrong { background-color: transparent; }

.wrong .cry-wrap { width: 100%; height: 100%; z-index: 8; }

.wrong .cry-wrap .cry { background-repeat: no-repeat; background-size: 100% auto; animation: cry 1s linear infinite; background-image: url(../img/cry.png); z-index: 9; }

.wrong .cry-wrap .cry:nth-child(1) { animation-delay: -0.2s; animation-fill-mode: backwards; width: 3%; height: 3%; top: 18%; right: 34%; }

.wrong .cry-wrap .cry:nth-child(2) { animation-delay: -0.8s; animation-fill-mode: backwards; width: 2%; height: 2%; top: 18%; left: 38%; }

.wrong .kv-bear { margin: 5% 10%; }

.wrong .kv-bear .eyes { width: 24%; height: 20%; left: 40%; top: 14%; background-image: url(../img/eye-worng.gif); animation: none; z-index: 8; }

/*--------------------------------------- Preloader section */
/*-----------------------------------------*/
.preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background: none repeat scroll 0 0 #555; color: #fff; overflow: hidden; }

.preloader .loader { background-image: url(../img/bg-success.png); position: relative; overflow: hidden; }

.preloader .loader .box { width: 80%; height: 35%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }

.preloader .loader .box .bear { width: 100%; padding-right: 25%; padding-left: 25%; padding-bottom: 2%; }

.preloader .loader .box .bear img { max-width: 100%; display: block; margin: 0 auto; }

.preloader .loader .box .word { width: 80%; height: 15%; border-radius: 10px; background-color: #E91B68; margin-top: -5%; margin-left: 10%; margin-right: 10%; }

.preloader .loader .box .word .loading-text { text-align: center; font-size: 20px; width: 100%; padding-top: 3.5%; }

@media screen and (max-width: 540px) { .preloader .loader .box .word .loading-text { font-size: 16px; } }

.preloader .loader .box .word .loading-text span { display: inline-block; margin: 0 2px; color: #fff; animation: blur-text 0.5s  infinite linear alternate; animation-fill-mode: backwards; font-weight: 500; }

.preloader .loader .box .word .loading-text span:nth-child(1) { animation-delay: 0.1s; }

.preloader .loader .box .word .loading-text span:nth-child(2) { animation-delay: 0.2s; }

.preloader .loader .box .word .loading-text span:nth-child(3) { animation-delay: 0.3s; }

.preloader .loader .box .word .loading-text span:nth-child(4) { animation-delay: 0.4s; }

.preloader .loader .box .word .loading-text span:nth-child(5) { animation-delay: 0.5s; }

.preloader .loader .box .word .loading-text span:nth-child(6) { animation-delay: 0.6s; }

@keyframes blur-text { 0% { top: -10px; }
  100% { top: 0; } }

html, body { width: 100%; overflow-x: hidden; }

main, section { position: relative; }

img { max-width: 100%; }

.fade-enter-active, .fade-leave-active { transition: opacity .5s; }

.fade-enter, .fade-leave-to { opacity: 0; }

body { background-color: #555; min-width: 320px; }

#content { width: 100%; max-width: 960px; max-height: 1706px; min-height: 300px; overflow: hidden; background-color: #eee; }

.bg { overflow: hidden; width: 100%; height: 100%; padding-left: 5%; padding-right: 5%; }

.hide { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.container-full { width: calc( 100% - 120px); }

@media screen and (max-width: 1280px) { .container-full { width: calc( 100% - 60px); } }

@media screen and (max-width: 540px) { .container-full { width: calc( 100% - 0px); } }

.container { max-width: 1200px; }

@media screen and (max-width: 1280px) { .container { max-width: 1000px; } }

@media screen and (max-width: 990px) { .container { max-width: 750px; } }

@media screen and (max-width: 768px) { .container { padding-right: 15px; padding-left: 15px; } }

img { display: block; margin: 0 auto; max-width: 100%; }

.landscape { display: none; }

@media screen and (max-width: 840px) and (orientation: landscape) { .landscape { display: block; position: fixed; top: 0; left: -1px; z-index: 10; width: 101%; height: 100%; background: linear-gradient(to bottom, #5182bc 0%, #5bc1cf 40%, #9bd6e6 70%, #ddf0f3 100%); z-index: 99; }
  .landscape img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%; } }

a.logo { right: 2%; bottom: 2%; width: 28%; z-index: 10; }

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

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

@media screen and (max-width: 540px) { .btn-right { text-align: center; } }

.btn { transition: 0.5s ease-out; animation: up 1s ease-in; animation-delay: 0.8s; animation-fill-mode: backwards; font-family: Arial, Microsoft JhengHei, "微軟正黑體", LiHei Pro, "儷黑體", PMingLiu,"新細明體", sans-serif; display: inline-block; text-align: center; vertical-align: middle; user-select: none; letter-spacing: 1px; text-decoration: none; outline: 0; cursor: pointer; background: none; border: none; z-index: 5; }

.btn:hover { transform: scale(1.05); }

.btn:active { top: 2px; }

.btn.two { animation-delay: 1s; animation-fill-mode: backwards; }

button { display: inline-block; user-select: none; text-decoration: none; outline: 0; cursor: pointer; background: none; border: none; }

.btn-send { width: 50%; }

.join::after { width: calc( 100% - 30px); height: calc( 100% - 30px); border-radius: 10px; }

#form { width: 100%; display: flex; justify-content: center; }

#form form { padding: 4%; width: 500px; font-size: 18px; }

@media screen and (max-width: 540px) { #form form { font-size: 16px; } }

@media screen and (max-height: 765px) { #form form { font-size: 16px; } }

#form form .input-group { display: flex; align-items: center; margin: 3% 0; }

#form form .input-group .red { color: #cf121b; }

#form form .input-group .transparent { color: transparent; }

#form form .input-group label { flex: 0 0 80px; }

#form form .input-group .input { width: 100%; }

#form form .input-group .input input { display: block; width: 100%; font-size: 18px; line-height: 1.5; text-indent: 18px; padding: 1%; border: 1px solid #ccc !important; font-family: 'Work Sans','微軟正黑體', sans-serif; border-radius: 5px; }

@media screen and (max-width: 540px) { #form form .input-group .input input { font-size: 16px; } }

@media screen and (max-height: 765px) { #form form .input-group .input input { font-size: 16px; } }

#form form .input-group .helper ::placeholder { color: #cf121b; }

#form form .input-group .helper input { border: 1px solid #cf121b !important; }

#form form .check-group { margin-bottom: 4%; margin-top: 4%; text-align: left; }

#form form .check-group a.personal { color: #E91B68; }

#form form .check-group a.personal:hover { color: #9E4000; }

#form form p { text-align: center; }

@media screen and (max-width: 540px) { #form form { margin-top: -5%; margin-right: -5%; margin-left: -5%; transform: scale(0.9); } }

@media screen and (max-width: 360px) { #form form { margin-top: -10%; margin-right: -10%; margin-left: -10%; transform: scale(0.8); } }

@media screen and (max-height: 765px) { #form form { margin-top: -5%; margin-right: -5%; margin-left: -5%; transform: scale(0.9); } }

@media screen and (max-height: 600px) { #form form { margin-top: -10%; margin-right: -10%; margin-left: -10%; transform: scale(0.8); } }

@media screen and (max-height: 500px) { #form form { margin-top: -20%; margin-right: -30%; margin-left: -30%; transform: scale(0.6); } }

@media screen and (max-height: 400px) { #form form { margin-top: -30%; margin-right: -40%; margin-left: -40%; transform: scale(0.5); } }

.kv-bear { z-index: 2; margin-top: 10%; }

.kv-bear .eyes { background-repeat: no-repeat; background-size: 100% auto; z-index: 6; animation: eyes 3s ease-in-out infinite; background-image: url(../img/eyes.svg); }

.kv-bear .hand-wrap-clap { width: 100%; height: 100%; z-index: 8; }

.kv-bear .hand-wrap-clap .hand { background-repeat: no-repeat; background-size: 100% auto; top: 28%; width: 22%; height: 35%; animation: hand-move 2s ease-in infinite; }

.kv-bear .hand-wrap-clap .hand:nth-child(1) { background-image: url(../img/hand-list-left.png); transform-origin: top left; }

.kv-bear .hand-wrap-clap .hand:nth-child(2) { width: 20.5%; background-image: url(../img/hand-list-right.png); transform-origin: top right; animation-delay: 1s; animation-fill-mode: backwards; }

.btn-area { z-index: 10; }

.statement { left: 0; bottom: 0; width: 100%; padding: 2.5%; background-color: #fff; }

.statement a { margin-right: 15px; font-size: 18px; color: #333; font-weight: 500; }

.statement a:last-child { margin-right: 0; }

@media screen and (max-height: 765px) { .statement a { margin-right: 10px; font-size: 14px; } }

@media screen and (max-height: 600px) { .statement a { font-size: 12px; } }

@media screen and (max-height: 500px) { .statement a { transform: scale(0.7); } }

@media screen and (max-width: 540px) { .statement a { font-size: 14px; } }

.statement .logo-index { max-width: 130px; margin-left: auto; }

@media screen and (max-height: 765px) { .statement .logo-index { max-width: 100px; } }

@media screen and (max-height: 600px) { .statement .logo-index { max-width: 80px; } }

@media screen and (max-width: 540px) { .statement .logo-index { max-width: 100px; } }

#index { background-image: url(../img/bg-index.png); }

#index .cloud-wrap { width: 100%; height: 100%; }

#index .cloud-wrap .cloud { animation: cloud-float linear infinite alternate; background-repeat: no-repeat; background-size: 100% auto; }

#index .cloud-wrap .cloud:nth-child(1) { animation-delay: -0.5s; animation-fill-mode: backwards; animation-duration: 5s; width: 18%; height: 18%; left: -18%; top: 10%; background-image: url(../img/could-01.png); }

#index .cloud-wrap .cloud:nth-child(2) { animation-delay: -1s; animation-fill-mode: backwards; animation-duration: 3s; width: 20%; height: 20%; left: 10%; top: 12%; background-image: url(../img/could-02.png); }

#index .cloud-wrap .cloud:nth-child(3) { animation-delay: -1.5s; animation-fill-mode: backwards; animation-duration: 2s; width: 30%; height: 30%; left: 35%; top: -1%; background-image: url(../img/could-03.png); }

#index .cloud-wrap .cloud:nth-child(4) { animation-delay: -2s; animation-fill-mode: backwards; animation-duration: 1.5s; width: 25%; height: 25%; left: 60%; top: 12%; background-image: url(../img/could-04.png); z-index: 2; }

#index .cloud-wrap .cloud:nth-child(5) { animation-delay: -2.5s; animation-fill-mode: backwards; animation-duration: 4s; width: 25%; height: 25%; left: 75%; top: 9%; background-image: url(../img/could-05.png); z-index: 1; }

#index .kv-bear { animation: up 1.5s ease-in; animation-delay: 1s; animation-fill-mode: backwards; margin-top: 5%; padding-right: 15%; padding-left: 15%; }

#index .kv-bear .eyes { width: 22%; height: 8%; left: 39%; top: 15%; }

#index .kv-bear .hand { background-repeat: no-repeat; background-size: 100% auto; z-index: 5; width: 30%; height: 50%; animation: hand-big 2s  ease both alternate infinite; transform-origin: 50% 100%; }

#index .kv-bear .hand:nth-child(1) { left: 0; top: 12%; background-image: url(../img/hand-left.svg); }

#index .kv-bear .hand:nth-child(2) { animation-delay: -2s; animation-fill-mode: backwards; right: 0; top: 7%; background-image: url(../img/hand-right.svg); }

#index .kv-word { animation: fly 6s 1; margin-top: 10%; z-index: 10; animation-delay: 1.5s; animation-fill-mode: backwards; }

#index .kv-word .kv-logo { flex-basis: 70%; }

#index .kv-word .kv-heart { animation: heart 1s linear infinite; flex-basis: 25%; margin-top: 15%; margin-left: 3%; z-index: 3; }

#index .kv-word .kv-ttl { margin-top: -5%; margin-bottom: 5%; margin-right: -5%; margin-left: -5%; z-index: 4; }

#index .kv-word h2 { text-align: center; color: #4D4D4D; font-size: 24px; }

@media screen and (max-width: 480px) { #index .kv-word h2 { font-size: 18px; } }

@media screen and (max-height: 765px) { #index .kv-word h2 { font-size: 18px; } }

@media screen and (max-height: 600px) { #index .kv-word h2 { font-size: 16px; } }

@media screen and (max-height: 500px) { #index .kv-word h2 { font-size: 14px; } }

@media screen and (max-height: 400px) { #index .kv-word h2 { font-size: 12px; } }

#index .btn-area { margin-top: -10%; margin-right: 5%; margin-left: 5%; }

#index .btn-area .btn { animation-delay: 1.5s; animation-fill-mode: backwards; }

.game { background-size: 100% auto; background-repeat: no-repeat; }

.game .star-bar { margin-top: 10%; }

.game .star { top: 50%; transform: translateY(-50%); width: 10%; z-index: 10; }

.game .star.one { left: 5%; }

.game .star.one.get { animation: star-get1 1s ease-in; }

.game .star.two { left: 44%; }

.game .star.two.get2 { animation: star-get2 1s ease-in; }

.game .star.two img { margin: -15px; }

@media screen and (max-width: 540px) { .game .star.two img { margin: -10px; } }

.game .star.three { right: 9%; }

.game .star.three img { margin: -15px; }

@media screen and (max-width: 540px) { .game .star.three img { margin: -10px; } }

.game .kv-word { transition: 0.5s ease-out; animation: down 1s ease-in; animation-delay: 0.8s; animation-fill-mode: backwards; }

.game .btn-area { left: 50%; transform: translateX(-50%); bottom: 12%; width: 100%; flex-wrap: wrap; padding-right: 5%; padding-left: 5%; }

.game .btn-area button { flex-basis: 90%; margin-bottom: 3%; }

.game .btn-area h3 { font-weight: 500; color: #fff; width: 100%; z-index: 5; font-size: 30px; top: 45%; line-height: 1.2; }

@media screen and (max-width: 540px) { .game .btn-area h3 { font-size: 20px; line-height: 1.1; } }

@media screen and (max-height: 765px) { .game .btn-area h3 { font-size: 20px; } }

@media screen and (max-height: 600px) { .game .btn-area h3 { font-size: 18px; } }

@media screen and (max-height: 500px) { .game .btn-area h3 { font-size: 16px; } }

@media screen and (max-height: 400px) { .game .btn-area h3 { font-size: 14px; } }

.game .btn-twfhclife { left: 50%; transform: translateX(-50%); bottom: 5%; width: 52%; }

#first { background-image: url(../img/bg-first.png); }

#first .sweat-wrap { width: 100%; height: 100%; z-index: 5; }

#first .sweat-wrap .sweat { animation: sweat 2s linear infinite; background-repeat: no-repeat; background-size: 100% auto; }

#first .sweat-wrap .sweat:nth-child(1) { animation-delay: -0.5s; animation-fill-mode: backwards; width: 4%; height: 6%; left: 35%; top: 10%; background-image: url(../img/sweat-1.png); }

#first .sweat-wrap .sweat:nth-child(2) { animation-delay: -1.5s; animation-fill-mode: backwards; width: 4%; height: 4%; left: 58%; top: 6%; background-image: url(../img/sweat-2.png); }

#first .sweat-wrap .sweat:nth-child(3) { animation-delay: -1s; animation-fill-mode: backwards; width: 4%; height: 6%; left: 64%; top: 15%; background-image: url(../img/sweat-3.png); }

#first .kv-bear { margin-left: 7.3%; margin-right: 6.7%; }

#first .kv-bear .eyes { width: 19%; height: 8%; left: 40.5%; top: 15%; }

#first .kv-word { margin: 5% 20% 5% 20%; }

#second { background-image: url(../img/bg-second.png); }

#second .kv-bear { margin-left: 40%; margin-right: 5%; z-index: 3; }

#second .kv-bear .hand { transform: rotate(0deg); left: 5%; top: 25%; z-index: 5; width: 30%; transform-origin: bottom left; animation: shock-hand 0.1s ease-in-out 1; animation-delay: 2s; animation-fill-mode: backwards; }

#second .kv-bear .eyes { width: 26%; height: 20%; left: 39%; top: 15%; background-image: url(../img/sec-eyes.svg); animation: shock1 20s ease-in-out; animation-delay: 2s; animation-fill-mode: backwards; }

#second .kv-bear .shock-wrap { width: 100%; height: 100%; z-index: 8; }

#second .kv-bear .shock-wrap .shock { background-repeat: no-repeat; background-size: 100% auto; animation: shock2 20s ease-in-out; animation-delay: 2s; animation-fill-mode: backwards; }

#second .kv-bear .shock-wrap .shock:nth-child(1) { width: 20%; height: 20%; left: 10%; top: 5%; background-image: url(../img/shock-1.png); }

#second .kv-bear .shock-wrap .shock:nth-child(2) { width: 16%; height: 22%; left: 0%; top: 35%; background-image: url(../img/shock-2.png); }

#second .kv-bear .shock-wrap .shock:nth-child(3) { width: 25%; height: 30%; left: 70%; top: 10%; background-image: url(../img/shock-3.png); }

#second .kv-bear .shock-wrap .shock:nth-child(4) { width: 22%; height: 25%; left: 38%; top: 29%; background-image: url(../img/shock-4.png); }

#second .kv-word { margin: 5% 15% 5% 15%; }

#second .car { margin-top: -30%; margin-left: -35%; max-width: 550px; z-index: 5; animation: car 1s ease-in-out; animation-delay: 1s; animation-fill-mode: backwards; }

#third { background-image: url(../img/bg-third.png); }

#third .kv-bear { margin-left: 18%; margin-right: 18%; }

#third .hand-wrap { width: 100%; height: 100%; z-index: 8; }

#third .hand-wrap .hand { background-repeat: no-repeat; background-size: 100% auto; top: 55%; width: 40%; height: 22%; }

#third .hand-wrap .hand:nth-child(1) { animation: hand1 linear infinite alternate; animation-duration: 1s; left: 13%; background-image: url(../img/hand-third-left.png); transform-origin: top left; }

#third .hand-wrap .hand:nth-child(2) { animation: hand2 linear infinite alternate; animation-duration: 1s; right: 13%; width: 38%; background-image: url(../img/hand-third-right.png); transform-origin: top right; }

#third .kv-word { margin: 5% 10% 5% 10%; }

#result { background-image: url(../img/bg-result.png); }

#result .kv-bear { margin-top: 15%; }

#result .kv-bear .star { animation: star-result 1s ease-in; width: 15.5%; z-index: 5; right: 24%; top: 45.5%; }

#result .kv-bear .hand { background-repeat: no-repeat; background-size: 100% auto; animation: hand-big linear infinite alternate; animation-duration: 1s; z-index: 5; width: 20%; height: 42%; right: 10%; background-image: url(../img/hand-load.png); transform-origin: 50% 100%; }

#result .btn-area { flex-wrap: wrap; }

#result .btn-area .recommend { margin-top: 10%; }

#result .btn-area .btn-wrap { margin-top: 3%; margin-right: -4%; margin-left: -4%; }

#result .btn-area .btn-wrap button { flex-basis: 50%; }

#list { background-image: url(../img/bg-list.jpg); background-size: 100%; background-repeat: no-repeat; }

#list .shiny-wrap { width: 100%; height: 100%; z-index: 8; }

#list .shiny-wrap .shiny { background-repeat: no-repeat; background-size: 100% auto; animation: shiny 1s linear infinite; width: 6%; height: 8%; }

#list .shiny-wrap .shiny:nth-child(1) { animation-delay: -0.2s; animation-fill-mode: backwards; top: 10%; left: 15%; background-image: url(../img/shiny-b.png); }

#list .shiny-wrap .shiny:nth-child(2) { animation-delay: -0.7s; animation-fill-mode: backwards; animation-duration: 2s; top: 5%; right: 25%; background-image: url(../img/shiny-b.png); }

#list .shiny-wrap .shiny:nth-child(3) { animation-delay: -1.5s; animation-fill-mode: backwards; animation-duration: 1.5s; width: 4%; top: 12%; right: 22%; background-image: url(../img/shiny-s.png); }

#list .kv-bear { animation: down 1.5s ease-in; animation-delay: 0.5s; animation-fill-mode: backwards; padding-right: 5%; padding-left: 5%; margin-top: 15%; }

#list .kv-bear .eyes { width: 22%; height: 8%; left: 39.5%; top: 14%; }

#list .kv-bear .hand-wrap-clap .hand:nth-child(1) { left: 10%; }

#list .kv-bear .hand-wrap-clap .hand:nth-child(2) { right: 18%; }

#list .fb { top: 10px; right: 10px; z-index: 5; }

#list .halo { top: -2%; width: 50%; height: 35%; }

#list .kv-word { margin-top: -40%; padding-right: 15%; padding-left: 15%; padding-bottom: 10%; animation: up 1s ease-in; animation-delay: 0.5s; animation-fill-mode: backwards; }

#list #form { padding-bottom: 15%; }

#success { background-image: url(../img/bg-success.png); }

#success .star-wrap { width: 100%; height: 100%; z-index: 8; }

#success .star-wrap .star { background-repeat: no-repeat; background-size: 100% auto; animation: firework linear infinite alternate; background-image: url(../img/star-success.png); }

#success .star-wrap .star:nth-child(1) { animation-delay: -0.2s; animation-fill-mode: backwards; animation-duration: 1s; width: 15%; height: 15%; top: 10%; left: 5%; }

#success .star-wrap .star:nth-child(2) { animation-delay: -0.8s; animation-fill-mode: backwards; animation-duration: 0.8s; width: 10%; height: 10%; top: 2%; right: 45%; }

#success .star-wrap .star:nth-child(3) { animation-delay: -0.5s; animation-fill-mode: backwards; animation-duration: 1.5s; width: 13%; height: 13%; top: 10%; right: 25%; }

#success .kv-bear { animation: down 1.5s ease-in; animation-delay: 0.5s; animation-fill-mode: backwards; margin-top: 20%; margin-bottom: 2%; }

#success .kv-bear .eyes { width: 22%; height: 8%; left: 39.5%; top: 14%; }

#success .kv-bear .hand-wrap-clap .hand:nth-child(1) { left: 14%; }

#success .kv-bear .hand-wrap-clap .hand:nth-child(2) { right: 12%; }

#success .btn-area { flex-wrap: wrap; }

#success .btn-area .btn { margin-top: 3%; flex-basis: 100%; }