@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&display=swap");
html, body, header, main, aside, footer, menu, nav, article, section, hgroup, h1, h2, h3, h4, h5, h6, p, canvas, embed, video, form, blockquote, details, figure, figcaption, img, div, span, applet, object, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, label, legend, input, textarea, output, ruby, summary, time, mark, audio, hr { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

html, body, header, main, aside, footer, menu, nav, article, section, hgroup, form, blockquote, details, figure, figcaption, div, p { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }

h1, h2, h3, h4, h5, h6 { display: inline-block; position: relative; width: auto; height: auto; }

canvas, iframe, embed, video, img { display: block; position: relative; width: auto; height: auto; margin: 0 auto; }

blockquote, q { quotes: none; }

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

.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-callout: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; overflow: hidden; }

.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-track { position: relative; top: 0; left: 0; display: block; overflow: hidden; }

.slick-track:before, .slick-track:after { display: table; content: ''; }

.slick-track:after { clear: both; }

.slick-loading .slick-track { visibility: hidden; }

.slick-slide { display: none; float: left; width: auto; height: 100%; min-height: 1px; }

[dir='rtl'] .slick-slide { float: right; }

.slick-slide img { display: block; }

.slick-slide.slick-loading img { display: none; }

.slick-slide.dragging img { pointer-events: none; }

.slick-initialized .slick-slide { display: block; }

.slick-loading .slick-slide { visibility: hidden; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

.slick-arrow { background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; width: 40px; height: 40px; text-indent: -9999px; cursor: pointer; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.slick-arrow, .slick-arrow:link, .slick-arrow:visited { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
.slick-arrow:hover, .slick-arrow:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }

.slick-prev { background-image: url(../images/carousel-prev.svg); }

.slick-next { background-image: url(../images/carousel-next.svg); }

.slick-dots { height: auto; text-align: center; padding-left: 0; }
.slick-dots li { display: inline-block; position: relative; width: 30px; height: auto; margin: 0 auto; }
.slick-dots li button { background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../images/carousel-dote.svg); display: block; position: relative; width: 22px; height: 22px; margin: 0 auto; border: none; text-indent: -9999px; cursor: pointer; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.slick-dots li button, .slick-dots li button:link, .slick-dots li button:visited { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
.slick-dots li button:hover, .slick-dots li button:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
.slick-dots li.slick-active button, .slick-dots li.slick-active button:link, .slick-dots li.slick-active button:visited, .slick-dots li.slick-active button:hover, .slick-dots li.slick-active button:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }

.slick-slider button { text-decoration: none; border: none; outline: medium none !important; }
.slick-slider button:focus, .slick-slider button:link, .slick-slider button:visited, .slick-slider button:hover, .slick-slider button:active { border: none; outline: medium none !important; }

body { background: white; user-select: none; -webkit-user-select: none; /* for Chrome & Android & iOS & Safari */ -moz-user-select: none; /* for Firefox */ -ms-user-select: none; /* for Internet Explorer */ -o-user-select: none; /* for Opera */ }

a { text-decoration: none; border: none; outline: medium none !important; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
a:focus, a:link, a:visited, a:hover, a:active { border: none; outline: medium none !important; }
a, a:link, a:visited { color: #333333; }
a:hover, a:active { color: #c42607; }

.btn { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; padding-top: 12px; padding-bottom: 14px; padding-left: 20px; font-size: 1.25rem; line-height: 1.2; font-weight: bold; text-align: center; }
.btn, .btn:link, .btn:visited, .btn:hover, .btn:active { color: white; }
.btn, .btn:link, .btn:visited { background: #ce4457; }
.btn:hover, .btn:active { background: #e06475; }
.btn .arr { display: inline-block; position: relative; width: 20px; height: 20px; vertical-align: bottom; margin-left: 5px; }
.btn .arr > span { background-image: url(../images/btn-arr.png); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; width: 20px; height: 20px; left: 0px; top: -2px; animation: arrAni 0.8s infinite linear; -webkit-animation: arrAni 0.8s infinite linear; -moz-animation: arrAni 0.8s infinite linear; -ms-animation: arrAni 0.8s infinite linear; -o-animation: arrAni 0.8s infinite linear; }

@keyframes arrAni { from { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; left: 0px; }
  75% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; left: 3px; }
  to { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; left: 5px; } }

@media (max-width: 1000px) { .btn { padding-top: 8px; padding-bottom: 10px; } }
@media (max-width: 500px) { .btn { width: 80%; font-size: 16px; }
  .btn .arr { margin-bottom: -2px; } }
body { font-family: 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-size: 16px; line-height: 1.375; color: #333333; text-decoration: none; }

h1 { font-size: 3.4375rem; }

h2 { font-size: 2.25rem; }

h3 { font-size: 2rem; }

h4 { font-size: 1.5625rem; }

h5 { font-size: 1.25rem; }

h6 { font-size: 16px; }

@media (max-width: 768px) { h1 { font-size: 2.25rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5625rem; } }
@media (max-width: 640px) { h2 { font-size: 1.5625rem; } }
@media (max-width: 500px) { h1 { font-size: 2rem; }
  body { font-size: 16px; } }
@media (max-width: 420px) { h2 { font-size: 1.25rem; }
  h3 { font-size: 1.375rem; }
  h4 { font-size: 1.25rem; } }
#wrap { min-width: 320px; }

.page .ctr { max-width: 1000px; }

@media (max-width: 1100px) { .page .ctr { width: calc(100% - 50px); width: -webkit-calc(100% - 50px); width: -moz-calc(100% - 50px); width: -ms-calc(100% - 50px); width: -o-calc(100% - 50px); } }
@media (max-width: 640px) { .page .ctr { width: calc(100% - 40px); width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: -ms-calc(100% - 40px); width: -o-calc(100% - 40px); } }
@media (max-width: 500px) { .page .ctr { width: calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -moz-calc(100% - 30px); width: -ms-calc(100% - 30px); width: -o-calc(100% - 30px); } }
@keyframes floatAni { from { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(-3%); -moz-transform: translateY(-3%); -ms-transform: translateY(-3%); -o-transform: translateY(-3%); transform: translateY(-3%); }
  to { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } }

@keyframes cloudLeftAni { from { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(-10%); -moz-transform: translateX(-10%); -ms-transform: translateX(-10%); -o-transform: translateX(-10%); transform: translateX(-10%); }
  to { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }

@keyframes cloudRightAni { from { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); transform: translateX(10%); }
  to { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }

#overlay { position: fixed; display: block; width: 100vw; height: 100vh; left: 0; top: 0; background: white; }

#gotop { background-image: url(../base/gotop.svg); background-repeat: no-repeat; background-size: cover; background-position: center; display: block; position: fixed; width: 36px; height: 36px; left: calc(50% - 18px); left: -webkit-calc(50% - 18px); left: -moz-calc(50% - 18px); left: -ms-calc(50% - 18px); left: -o-calc(50% - 18px); bottom: 15px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; display: none; z-index: 9; }
#gotop, #gotop:link, #gotop:visited { background-color: #a81c00; }
#gotop:hover, #gotop:active { background-color: #c42607; }

#wrap { z-index: 1; }

#footer { z-index: 1; }

.steps .carousel .carousel-bk { z-index: 2; }
.steps .carousel .slick-dots { z-index: 3; }
.steps .carousel .slick-prev { z-index: 4; }
.steps .carousel .slick-next { z-index: 4; }
.steps h3 { z-index: 5; }

#gotop { z-index: 10; }

#overlay { z-index: 15; }

#header { z-index: 20; }

#header { background: white; position: fixed; left: 0; top: 0; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 15px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 15px; box-shadow: rgba(0, 0, 0, 0.2) 0 0 15px; }
#header .ctr:after { clear: both; content: ""; display: table; table-layout: fixed; }
#header .ctr .logo { display: block; position: relative; width: 275px; float: left; }

@media (max-width: 640px) { #header .ctr .logo { margin: 0 auto; float: none; clear: both; } }
@media (max-width: 500px) { #header .ctr .logo { width: 225px; } }
@media (max-width: 420px) { #header .ctr .logo { float: left; } }
#navbtn, #nav .clz { display: block; position: fixed; width: 45px; height: 45px; right: 5px; top: 5px; display: none; }

#nav .clz { background: white; }

#nav { display: block; position: relative; width: calc(100% - 275px); width: -webkit-calc(100% - 275px); width: -moz-calc(100% - 275px); width: -o-calc(100% - 275px); height: 43px; margin-top: 6px; text-align: right; float: right; }
#nav ul { display: inline-block; position: relative; width: auto; height: auto; margin: 0; vertical-align: top; }
#nav ul li { position: relative; display: inline-block; width: auto; height: 100%; margin: 0 auto; vertical-align: top; }
#nav ul li a { position: relative; display: inline-block; width: auto; height: auto; }
#nav ul li a.active { color: #c42607; }

#menu { padding: 0; }
#menu li a { font-size: 18px; line-height: 43px; font-weight: bold; padding: 0 20px; }
#menu li a, #menu li a:link, #menu li a:visited { color: #333333; }
#menu li a:hover, #menu li a:active { color: #c42607; }

.ics { padding: 0 10px; height: 43px; }
.ics li a { padding: 7px 5px; }
.ics li a img { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; width: 30px; }
.ics li a img, .ics li a img:link, .ics li a img:visited { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); }
.ics li a img:hover, .ics li a img:active { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); }

@media (max-width: 860px) { #navbtn, #nav .clz { display: block; }
  #nav { width: 100%; height: auto; margin-top: 0; text-align: center; float: none; clear: both; padding-top: 5px; display: none; }
  #nav:before { background-image: -webkit-gradient(linear, to right, to left, color-stop(0%, rgba(68, 68, 68, 0)), color-stop(50%, rgba(68, 68, 68, 0.5)), color-stop(100%, rgba(68, 68, 68, 0))); background-image: -webkit-linear-gradient(to right, rgba(68, 68, 68, 0), rgba(68, 68, 68, 0.5), rgba(68, 68, 68, 0)); background-image: -moz-linear-gradient(to right, rgba(68, 68, 68, 0), rgba(68, 68, 68, 0.5), rgba(68, 68, 68, 0)); background-image: -o-linear-gradient(to right, rgba(68, 68, 68, 0), rgba(68, 68, 68, 0.5), rgba(68, 68, 68, 0)); background-image: linear-gradient(to right, rgba(68, 68, 68, 0), rgba(68, 68, 68, 0.5), rgba(68, 68, 68, 0)); content: ""; display: block; position: absolute; width: 100%; height: 1px; left: 0; top: 3px; }
  #menu { display: block !important; }
  #menu li { padding: 5px 15px; display: block !important; }
  #menu li:nth-of-type(even) { background: #f6f6f6; }
  .ics { margin-bottom: 20px; } }
@media (min-width: 860px) { #nav { display: block !important; } }
@media (max-width: 500px) { #navbtn, #nav .clz { right: 0; top: 0; } }
#footer { background: white; min-height: 100px; }
#footer:before { background-image: -webkit-gradient(linear, to right, to left, color-stop(0%, #e7373c), color-stop(35%, #d15b9c), color-stop(67%, #e95504), color-stop(100%, #f9960d)); background-image: -webkit-linear-gradient(to right, #e7373c 0%, #d15b9c 35%, #e95504 67%, #f9960d 100%); background-image: -moz-linear-gradient(to right, #e7373c 0%, #d15b9c 35%, #e95504 67%, #f9960d 100%); background-image: -o-linear-gradient(to right, #e7373c 0%, #d15b9c 35%, #e95504 67%, #f9960d 100%); background-image: linear-gradient(to right, #e7373c 0%, #d15b9c 35%, #e95504 67%, #f9960d 100%); content: ""; display: block; position: relative; width: 100%; height: 4px; margin: 0 auto; }
#footer .ctr { max-width: 1260px; padding: 24px 0; font-size: 14px; }
#footer .links { text-align: left; padding: 0 15px; }
#footer .links a { display: inline-block; position: relative; width: auto; height: auto; padding: 0 10px; }
#footer .links a:before { background: #ddd; content: ""; position: absolute; width: 1px; height: 14px; left: -1px; top: 3px; }
#footer .links a:first-child { padding-left: 0px; }
#footer .links a:first-child:before { display: none; }
#footer .links a, #footer .links a:link, #footer .links a:visited { text-decoration: none; }
#footer .links a:hover, #footer .links a:active { text-decoration: underline; }
#footer .items { position: absolute; width: 340px; right: 0px; top: 22px; text-align: right; padding: 0 15px; }
#footer .items .bk { display: inline-block; width: 48%; }
#footer .items .bk .tag { text-align: right; }
#footer .items .bk .phone { display: inline-block; text-align: right; font-size: 1.125rem; padding-top: 5px; }
#footer .items .bk .phone, #footer .items .bk .phone:link, #footer .items .bk .phone:visited { color: #c42607; text-decoration: none; }
#footer .items .bk .phone:hover, #footer .items .bk .phone:active { text-decoration: underline; }
#footer .copyright { text-align: left; padding: 8px 15px 0 15px; }

@media (max-width: 1000px) { #footer .ctr { padding: 25px 15px 60px 15px; }
  #footer .links { text-align: center; padding: 0 0 10px 0; }
  #footer .links a { font-size: 12px; width: 32%; padding: 0 0 10px 0; }
  #footer .links a:before { display: none; }
  #footer .links a:first-child { padding-left: 10px; }
  #footer .items { position: relative; width: 100%; right: auto; top: auto; text-align: center; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 0; }
  #footer .items .bk { width: 48%; max-width: 160px; padding: 15px 0; }
  #footer .items .bk .tag { text-align: center; }
  #footer .items .bk .phone { text-align: center; }
  #footer .copyright { padding: 25px 0 0 0; text-align: center; } }
#background { position: absolute; height: 900px; left: 0; top: 0; overflow: hidden; }
#background .ctr { background-image: url(../images/background.jpg); background-repeat: no-repeat; background-size: cover; background-position: center top; height: 100%; }

#vision { margin-top: 55px; padding-bottom: 400px; overflow: hidden; }
#vision .ctr { padding-top: 80px; }
#vision .vs { position: absolute; width: 480px; height: auto; left: 58%; margin-left: -240px; top: 5px; }
#vision .vs .img > img { width: 100%; animation: floatAni 10s infinite ease-in-out; -webkit-animation: floatAni 10s infinite ease-in-out; -moz-animation: floatAni 10s infinite ease-in-out; -ms-animation: floatAni 10s infinite ease-in-out; -o-animation: floatAni 10s infinite ease-in-out; }
#vision .vs .cloud { position: absolute; width: 50%; }
#vision .vs .cloud > img { width: 100%; }
#vision .vs .cloud1 { left: -1%; top: 3%; }
#vision .vs .cloud1 > img { animation: cloudLeftAni 12s infinite linear; -webkit-animation: cloudLeftAni 12s infinite linear; -moz-animation: cloudLeftAni 12s infinite linear; -ms-animation: cloudLeftAni 12s infinite linear; -o-animation: cloudLeftAni 12s infinite linear; }
#vision .vs .cloud2 { left: 14%; top: 59%; }
#vision .vs .cloud2 > img { animation: cloudRightAni 16s infinite linear; -webkit-animation: cloudRightAni 16s infinite linear; -moz-animation: cloudRightAni 16s infinite linear; -ms-animation: cloudRightAni 16s infinite linear; -o-animation: cloudRightAni 16s infinite linear; }
#vision .vs .cloud3 { left: 70%; top: 4%; }
#vision .vs .cloud3 > img { animation: cloudLeftAni 14s infinite linear; -webkit-animation: cloudLeftAni 14s infinite linear; -moz-animation: cloudLeftAni 14s infinite linear; -ms-animation: cloudLeftAni 14s infinite linear; -o-animation: cloudLeftAni 14s infinite linear; }
#vision .vs .cloud4 { left: 94%; top: 86%; }
#vision .vs .cloud4 > img { animation: cloudRightAni 15s infinite linear; -webkit-animation: cloudRightAni 15s infinite linear; -moz-animation: cloudRightAni 15s infinite linear; -ms-animation: cloudRightAni 15s infinite linear; -o-animation: cloudRightAni 15s infinite linear; }
#vision .peo { position: absolute; width: 480px; height: auto; margin-left: -240px; left: 83%; top: 135px; }
#vision .peo .img > img { width: 100%; -webkit-transform-origin: 40% 95%; -moz-transform-origin: 40% 95%; -ms-transform-origin: 40% 95%; -o-transform-origin: 40% 95%; transform-origin: 40% 95%; animation: peoAni 1.5s infinite ease-in-out; -webkit-animation: peoAni 1.5s infinite ease-in-out; -moz-animation: peoAni 1.5s infinite ease-in-out; -ms-animation: peoAni 1.5s infinite ease-in-out; -o-animation: peoAni 1.5s infinite ease-in-out; }
#vision .peo .ic { position: absolute; width: 25%; left: 11.5%; top: 11.5%; }
#vision .peo .ic > img { width: 100%; animation: peoIcAni 1.5s infinite ease-in-out; -webkit-animation: peoIcAni 1.5s infinite ease-in-out; -moz-animation: peoIcAni 1.5s infinite ease-in-out; -ms-animation: peoIcAni 1.5s infinite ease-in-out; -o-animation: peoIcAni 1.5s infinite ease-in-out; }
#vision .title { max-width: 480px; margin-left: 0; }
#vision .title > img { width: 100%; }
#vision .promo { max-width: 420px; margin-left: 20px; }
#vision .promo > img { width: 100%; animation: promoAni 1.3s infinite ease-out; -webkit-animation: promoAni 1.3s infinite ease-out; -moz-animation: promoAni 1.3s infinite ease-out; -ms-animation: promoAni 1.3s infinite ease-out; -o-animation: promoAni 1.3s infinite ease-out; }

@keyframes peoAni { from { -webkit-transform: skew(1deg); -moz-transform: skew(1deg); -ms-transform: skew(1deg); -o-transform: skew(1deg); transform: skew(1deg); }
  50% { -webkit-transform: skew(-1deg); -moz-transform: skew(-1deg); -ms-transform: skew(-1deg); -o-transform: skew(-1deg); transform: skew(-1deg); }
  to { -webkit-transform: skew(1deg); -moz-transform: skew(1deg); -ms-transform: skew(1deg); -o-transform: skew(1deg); transform: skew(1deg); } }

@keyframes peoIcAni { from { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); }
  50% { -webkit-transform: translate(-8%, -8%); -moz-transform: translate(-8%, -8%); -ms-transform: translate(-8%, -8%); -o-transform: translate(-8%, -8%); transform: translate(-8%, -8%); }
  to { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } }

@keyframes promoAni { from { filter: brightness(1); -webkit-filter: brightness(1); -moz-filter: brightness(1); -ms-filter: brightness(1); -o-filter: brightness(1); }
  50% { filter: brightness(1.2); -webkit-filter: brightness(1.2); -moz-filter: brightness(1.2); -ms-filter: brightness(1.2); -o-filter: brightness(1.2); }
  to { filter: brightness(1); -webkit-filter: brightness(1); -moz-filter: brightness(1); -ms-filter: brightness(1); -o-filter: brightness(1); } }

@media (max-width: 1000px) { #background { height: 850px; }
  #vision .vs { left: 72%; }
  #vision .vs .cloud4 { left: 82%; }
  #vision .peo { left: 88%; top: 180px; } }
@media (max-width: 860px) { #background { height: 900px; }
  #vision .ctr { padding-top: 10px; }
  #vision .vs { position: relative; left: auto; margin-left: 0; top: auto; }
  #vision .vs .cloud4 { left: 112%; top: 68%; }
  #vision .peo { left: 80%; top: 70px; } }
@media (max-width: 768px) { #vision .vs .cloud4 { display: none; }
  #vision .peo { width: 440px; margin-left: -220px; left: 86%; top: 110px; }
  #vision .title { max-width: 420px; }
  #vision .promo { max-width: 400px; } }
@media (max-width: 640px) { #background { height: 700px; }
  #vision .vs { width: 86%; margin-left: -21%; margin-top: 10px; margin-bottom: 30px; }
  #vision .vs .cloud1 { left: 30%; top: -7%; }
  #vision .vs .cloud2 { left: 20%; top: 65%; }
  #vision .peo { width: 82%; margin-left: 0; left: 42%; top: 70px; }
  #vision .title { width: 90%; }
  #vision .promo { width: 96%; margin-left: auto; } }
@media (max-width: 500px) { #background { height: 600px; }
  #vision { margin-top: 45px; }
  #vision .peo { top: 60px; } }
@media (max-width: 420px) { #background { height: 500px; } }
#content { margin-top: -400px; }
#content .bk { margin-top: 30px; }
#content .bk > span { background: #cf4557; display: block; position: absolute; width: 65px; height: 65px; left: 15px; top: 0px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; text-align: center; font-size: 1.125rem; line-height: 1.2; color: white; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; padding-top: 9px; }
#content .bk > p { padding-left: 90px; font-size: 1.25rem; }
#content .bk .note { color: #777777; font-size: 0.9375rem; }
#content .date { padding-top: 14px; }
#content .date > p .mark { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-size: 1.375rem; }
#content .mission { padding-top: 6px; }
#content .mission > p .mark { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; }
#content .mission > p br { display: none; }
#content .mission .note { padding-top: 5px; }
#content .mission .note br { display: block; }
#content .mission .note span { display: inline-block; }
#content .mission .gift { background: #faeeea; margin-left: 85px; margin-top: 15px; width: 520px; height: 110px; padding-left: 10px; padding-top: 27px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; text-align: center; }
#content .mission .gift .img { display: inline-block; width: 180px; vertical-align: top; margin-top: -20px; }
#content .mission .gift .img > img { width: 100%; animation: giftAni 5s infinite ease-out; -webkit-animation: giftAni 5s infinite ease-out; -moz-animation: giftAni 5s infinite ease-out; -ms-animation: giftAni 5s infinite ease-out; -o-animation: giftAni 5s infinite ease-out; }
#content .mission .gift > p { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-size: 1.375rem; display: inline-block; width: auto; }
#content .mission .gift > p br { display: none; }
#content .mission .gift > p .mark { color: #c42607; }
#content .mission .gift > p .mark span { display: inline-block; font-size: 2rem; vertical-align: bottom; margin-bottom: -4px; }
#content .prize { padding-top: 16px; text-align: center; }
#content .prize > p { margin-bottom: 15px; text-align: left; }
#content .prize > div { background: #faeeea; display: inline-block; width: 280px; height: 280px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; vertical-align: top; }
#content .prize > div .img { position: absolute; }
#content .prize > div .img > img { width: 100%; }
#content .prize > div > p { position: absolute; }
#content .prize > div > p .mark { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-size: 1.375rem; color: #c42607; }
#content .prize > div > p .count { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-size: 1.375rem; }
#content .prize > div > p .count span { display: inline-block; font-size: 2rem; vertical-align: bottom; margin-bottom: -4px; }
#content .prize .prize0 { animation: prize0Ani 3s infinite ease-in-out; -webkit-animation: prize0Ani 3s infinite ease-in-out; -moz-animation: prize0Ani 3s infinite ease-in-out; -ms-animation: prize0Ani 3s infinite ease-in-out; -o-animation: prize0Ani 3s infinite ease-in-out; background: #cf4557; margin-right: 20px; display: none; padding-top: 60px; margin-bottom: 20px; }
#content .prize .prize0 > span { display: block; position: relative; margin: 0 auto; text-align: center; font-size: 1.25rem; color: white; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; padding-bottom: 20px; }
#content .prize .prize0 > span:after { background: white; content: ""; display: block; position: absolute; width: 80px; height: 1px; left: 50%; margin-left: -40px; bottom: 10px; }
#content .prize .prize0 > p { text-align: center; font-size: 1.25rem; color: white; }
#content .prize .prize1 { animation: prize1Ani 3s infinite ease-in-out; -webkit-animation: prize1Ani 3s infinite ease-in-out; -moz-animation: prize1Ani 3s infinite ease-in-out; -ms-animation: prize1Ani 3s infinite ease-in-out; -o-animation: prize1Ani 3s infinite ease-in-out; margin-right: 20px; }
#content .prize .prize1 .img { width: 280px; left: 0px; top: 40px; }
#content .prize .prize1 > p { left: 0; top: 175px; text-align: center; }
#content .prize .prize2 { animation: prize2Ani 3s infinite ease-in-out; -webkit-animation: prize2Ani 3s infinite ease-in-out; -moz-animation: prize2Ani 3s infinite ease-in-out; -ms-animation: prize2Ani 3s infinite ease-in-out; -o-animation: prize2Ani 3s infinite ease-in-out; margin-right: 20px; }
#content .prize .prize2 .img { width: 200px; left: 85px; top: -20px; }
#content .prize .prize2 > p { width: 200px; left: 40px; top: 60px; text-align: left; }
#content .prize .prize2 > p .break-mb { display: none; }
#content .prize .prize3 { animation: prize3Ani 3s infinite ease-in-out; -webkit-animation: prize3Ani 3s infinite ease-in-out; -moz-animation: prize3Ani 3s infinite ease-in-out; -ms-animation: prize3Ani 3s infinite ease-in-out; -o-animation: prize3Ani 3s infinite ease-in-out; margin-right: 0; }
#content .prize .prize3 .img { width: 200px; left: 40px; top: 5px; }
#content .prize .prize3 > p { left: 0; top: 180px; text-align: center; }
#content .prize .prize3 > p br { display: none; }

@keyframes giftAni { from { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); }
  45% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); }
  50% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); }
  55% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); }
  to { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } }

@keyframes prize0Ani { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  10% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  25% { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08); }
  40% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }

@keyframes prize1Ani { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  20% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  35% { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08); }
  50% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }

@keyframes prize2Ani { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  30% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  45% { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08); }
  60% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }

@keyframes prize3Ani { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  55% { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08); }
  70% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }

@media (max-width: 1000px) { #content .prize > div { width: 240px; height: 240px; }
  #content .prize .prize1 .img { width: 240px; top: 25px; }
  #content .prize .prize1 > p { top: 140px; }
  #content .prize .prize2 .img { width: 180px; left: 80px; top: -15px; }
  #content .prize .prize2 > p { left: 30px; top: 50px; }
  #content .prize .prize3 .img { width: 170px; left: 60px; top: 15px; }
  #content .prize .prize3 > p { width: 200px; left: 35px; top: 130px; text-align: left; line-height: 1.2; }
  #content .prize .prize3 > p br { display: block; } }
@media (max-width: 860px) { #content .mission .gift { width: calc(100% - 90px); width: -webkit-calc(100% - 90px); width: -moz-calc(100% - 90px); width: -ms-calc(100% - 90px); width: -o-calc(100% - 90px); }
  #content .prize { max-width: 600px; }
  #content .prize > span, #content .prize > p { display: none; }
  #content .prize .prize0 { display: inline-block; }
  #content .prize .prize1 { margin-right: 0; margin-bottom: 20px; } }
@media (max-width: 768px) { #content .mission .gift { width: calc(100% - 40px); width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: -ms-calc(100% - 40px); width: -o-calc(100% - 40px); margin-left: auto; } }
@media (max-width: 660px) { #content .mission > p br { display: block; } }
@media (max-width: 640px) { #content .mission .gift { padding-top: 17px; }
  #content .mission .gift .img { margin-top: -10px; }
  #content .mission .gift > p { text-align: left; }
  #content .mission .gift > p br { display: block; } }
@media (max-width: 560px) { #content .mission .gift { height: 90px; padding-top: 10px; }
  #content .mission .gift .img { width: 140px; margin-top: -3px; }
  #content .mission .gift > p .mark span { font-size: 1.5625rem; margin-bottom: -2px; }
  #content .prize > div { width: 175px; height: 175px; }
  #content .prize > div > p .mark { font-size: 1.25rem; }
  #content .prize > div > p .count { font-size: 1.25rem; }
  #content .prize > div > p .count span { font-size: 1.5625rem; margin-bottom: -1px; }
  #content .prize .prize0 { margin-right: 10px; margin-bottom: 10px; padding-top: 40px; }
  #content .prize .prize0 > p { font-size: 16px; }
  #content .prize .prize1 { margin-bottom: 10px; }
  #content .prize .prize1 .img { width: 185px; left: -5px; top: 10px; }
  #content .prize .prize1 > p { top: 95px; }
  #content .prize .prize2 { margin-right: 10px; }
  #content .prize .prize2 .img { width: 130px; left: 55px; top: -10px; }
  #content .prize .prize2 > p { width: 130px; left: 25px; top: 30px; }
  #content .prize .prize2 > p .break-mb { display: block; }
  #content .prize .prize2 > p .break-pc { display: none; }
  #content .prize .prize3 .img { width: 155px; left: 25px; top: -10px; }
  #content .prize .prize3 > p { width: 130px; left: 15px; top: 100px; } }
@media (max-width: 420px) { #content .bk { margin-top: 20px; }
  #content .bk > span { width: 55px; height: 55px; font-size: 16px; padding-top: 7px; left: 0; }
  #content .bk > p { padding-left: 65px; }
  #content .date { padding-top: 11px; }
  #content .mission { padding-top: 3px; margin-top: 30px; }
  #content .mission > p.note { width: calc(100% + 55px); width: -webkit-calc(100% + 55px); width: -moz-calc(100% + 55px); width: -ms-calc(100% + 55px); width: -o-calc(100% + 55px); margin-left: -55px; }
  #content .mission .gift { width: 100%; padding-left: 0; height: 80px; }
  #content .mission .gift .img { width: 110px; margin-top: 0; }
  #content .mission .gift > p { font-size: 1.25rem; }
  #content .prize > div { width: 150px; height: 150px; }
  #content .prize .prize0 { padding-top: 25px; }
  #content .prize .prize1 .img { width: 160px; top: 0px; }
  #content .prize .prize1 > p { top: 80px; }
  #content .prize .prize2 .img { width: 115px; left: 50px; }
  #content .prize .prize2 > p { left: 15px; }
  #content .prize .prize3 .img { width: 130px; left: 30px; }
  #content .prize .prize3 > p { left: 10px; top: 80px; } }
.quz { padding-top: 100px; }
.quz .ctr { background-color: #faeeea; background-repeat: no-repeat; background-position: center top; max-width: 920px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; }
.quz .ctr:after { background-image: url(../images/how-back-arr.png); background-repeat: no-repeat; background-size: cover; background-position: center; content: ""; display: block; position: absolute; width: 60px; height: 30px; margin-left: -30px; left: 50%; bottom: -30px; }
.quz .vs { position: absolute; width: 380px; height: auto; margin-left: -190px; bottom: 0; }
.quz .vs .img > img { width: 100%; animation: quzVsAni 2.5s infinite ease-in-out; -webkit-animation: quzVsAni 2.5s infinite ease-in-out; -moz-animation: quzVsAni 2.5s infinite ease-in-out; -ms-animation: quzVsAni 2.5s infinite ease-in-out; -o-animation: quzVsAni 2.5s infinite ease-in-out; }
.quz .vs .ic, .quz .vs .ic1, .quz .vs .ic2 { position: absolute; width: 40%; }
.quz .vs .ic > img, .quz .vs .ic1 > img, .quz .vs .ic2 > img { width: 100%; }
.quz .cnt { text-align: center; }
.quz .cnt h3 { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; color: #c42607; padding-top: 40px; padding-bottom: 10px; }
.quz .cnt p { padding-left: 10px; padding-right: 10px; padding-bottom: 10px; font-size: 1.125rem; }
.quz .cnt p span { display: inline-block; }
.quz .cnt .btn { max-width: 250px; }

@keyframes quzVsAni { from { -webkit-transform: skew(1deg); -moz-transform: skew(1deg); -ms-transform: skew(1deg); -o-transform: skew(1deg); transform: skew(1deg); }
  50% { -webkit-transform: skew(-1deg); -moz-transform: skew(-1deg); -ms-transform: skew(-1deg); -o-transform: skew(-1deg); transform: skew(-1deg); }
  to { -webkit-transform: skew(1deg); -moz-transform: skew(1deg); -ms-transform: skew(1deg); -o-transform: skew(1deg); transform: skew(1deg); } }

#how .ctr { background-image: url(../images/how-back.gif); padding-left: 350px; height: 220px; }
#how .vs { left: 25%; }
#how .vs .img { overflow: hidden; }
#how .vs .img > img { margin-bottom: -25px; -webkit-transform-origin: 40% 100%; -moz-transform-origin: 40% 100%; -ms-transform-origin: 40% 100%; -o-transform-origin: 40% 100%; transform-origin: 40% 100%; }
#how .vs .ic1 { left: -3%; top: 25%; }
#how .vs .ic1 > img { animation: howIc1Ani 1.5s infinite ease-out; -webkit-animation: howIc1Ani 1.5s infinite ease-out; -moz-animation: howIc1Ani 1.5s infinite ease-out; -ms-animation: howIc1Ani 1.5s infinite ease-out; -o-animation: howIc1Ani 1.5s infinite ease-out; }
#how .vs .ic2 { left: 60%; top: 5%; }
#how .vs .ic2 > img { animation: howIc2Ani 1.5s infinite ease-out; -webkit-animation: howIc2Ani 1.5s infinite ease-out; -moz-animation: howIc2Ani 1.5s infinite ease-out; -ms-animation: howIc2Ani 1.5s infinite ease-out; -o-animation: howIc2Ani 1.5s infinite ease-out; }

@keyframes howIc1Ani { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  60% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); }
  to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }

@keyframes howIc2Ani { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  60% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
  to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }

#what .ctr { background-image: url(../images/what-back.gif); padding-right: 350px; height: 245px; }
#what .vs { left: 75%; }
#what .vs .img > img { -webkit-transform-origin: 60% 100%; -moz-transform-origin: 60% 100%; -ms-transform-origin: 60% 100%; -o-transform-origin: 60% 100%; transform-origin: 60% 100%; }
#what .vs .ic { left: 10%; top: 22%; }
#what .vs .ic > img { -webkit-transform-origin: 60% 80%; -moz-transform-origin: 60% 80%; -ms-transform-origin: 60% 80%; -o-transform-origin: 60% 80%; transform-origin: 60% 80%; animation: whatIcAni 2s infinite ease-out; -webkit-animation: whatIcAni 2s infinite ease-out; -moz-animation: whatIcAni 2s infinite ease-out; -ms-animation: whatIcAni 2s infinite ease-out; -o-animation: whatIcAni 2s infinite ease-out; }

@keyframes whatIcAni { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); filter: brightness(1); -webkit-filter: brightness(1); -moz-filter: brightness(1); -ms-filter: brightness(1); -o-filter: brightness(1); }
  50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); filter: brightness(1.08); -webkit-filter: brightness(1.08); -moz-filter: brightness(1.08); -ms-filter: brightness(1.08); -o-filter: brightness(1.08); }
  to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); filter: brightness(1); -webkit-filter: brightness(1); -moz-filter: brightness(1); -ms-filter: brightness(1); -o-filter: brightness(1); } }

@media (max-width: 1000px) { .quz { padding-top: 80px; }
  .quz .ctr { max-width: 800px; }
  .quz .vs { width: 320px; margin-left: -160px; }
  .quz .cnt h3 { padding-top: 25px; padding-bottom: 5px; }
  #how .ctr { padding-left: 260px; height: 180px; }
  #how .vs { left: 22%; }
  #what .ctr { padding-right: 260px; height: 205px; }
  #what .vs { left: 78%; } }
@media (max-width: 768px) { .quz { padding-top: 70px; }
  .quz .vs { width: 280px; margin-left: -140px; }
  .quz .cnt p { font-size: 16px; }
  #how .ctr { padding-left: 220px; height: 165px; }
  #how .vs { left: 20%; }
  #what .ctr { padding-right: 220px; height: 190px; }
  #what .vs { left: 80%; } }
@media (max-width: 640px) { .quz .ctr { max-width: 450px; }
  .quz .vs { position: relative; width: 70%; margin-left: auto; bottom: auto; }
  #how .vs { left: auto; }
  #how .vs .img > img { margin-bottom: 0; }
  #how .ctr { background-position: left top; padding-left: 0; height: auto; }
  #how .ctr:after { left: 82%; }
  #what .vs { left: auto; }
  #what .ctr { background-position: right top; padding-right: 0; height: auto; }
  #what .ctr:after { left: 18%; } }
@media (max-width: 560px) { .quz .ctr { max-width: 360px; } }
@media (max-width: 420px) { .quz .ctr { max-width: 320px; }
  .quz .ctr:after { width: 40px; height: 20px; margin-left: -20px; bottom: -20px; }
  .quz .vs { width: 80%; }
  #what .cnt p { text-align: left; }
  #what .cnt p br { display: none; } }
.steps { padding-top: 50px; overflow: hidden; }
.steps > .ctr { height: 540px; }
.steps > .ctr > h3 { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; line-height: 1.2; color: #c42607; position: absolute; width: 300px; text-align: center; top: 100px; }
.steps .bg { background-color: #faeeea; background-repeat: no-repeat; background-position: center bottom; position: absolute; height: calc(100% - 50px); height: -webkit-calc(100% - 50px); height: -moz-calc(100% - 50px); height: -ms-calc(100% - 50px); height: -o-calc(100% - 50px); left: 0; top: 50px; }
.steps .bg .ctr { max-width: 1400px; height: 540px; }
.steps .bg .ctr .img { position: absolute; }
.steps .bg .ctr .img > img { width: 100%; }
.steps .bg .ctr .cloud { position: absolute; width: 300px; margin-left: -150px; pointer-events: none; }
.steps .bg .ctr .cloud > img { width: 100%; }
.steps .formb { display: none; padding-top: 5px; }
.steps .formb .carousel-bk > img { width: 85%; max-width: 380px; }
.steps .formb .carousel-bk .cnt { position: relative; width: 100%; margin-top: -15px; }
.steps .formb .carousel-bk .cnt h4 { display: block; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; width: 100px; border: 1px solid #444444; text-align: center; margin: 0 auto 10px auto; padding-bottom: 2px; }
.steps .formb .carousel-bk .cnt p { text-align: center; line-height: 1.5; max-width: 400px; }
.steps .formb .carousel-bk .cnt p span { color: #a81c00; font-weight: bold; }
.steps .formb .carousel-bk .cnt p inline-block { display: inline-block; }
.steps .formb .carousel-bk .cnt .add { padding-top: 5px; font-size: 0.9375rem; line-height: 1.375; color: #777777; }
.steps .formb .slick-dots { position: relative; left: auto !important; top: auto !important; margin: 0 auto; padding-top: 10px; padding-bottom: 50px; }
.steps .formb .slick-prev { left: calc(50% - 120px) !important; left: -webkit-calc(50% - 120px) !important; left: -moz-calc(50% - 120px) !important; left: -ms-calc(50% - 120px) !important; left: -o-calc(50% - 120px) !important; bottom: 40px !important; top: auto !important; }
.steps .formb .slick-next { left: calc(50% + 80px) !important; left: -webkit-calc(50% + 80px) !important; left: -moz-calc(50% + 80px) !important; left: -ms-calc(50% + 80px) !important; left: -o-calc(50% + 80px) !important; bottom: 40px !important; top: auto !important; }
.steps .forpc { padding-top: 50px; }
.steps .forpc .carousel-bk > img { width: 100%; max-width: 640px; }
.steps .forpc .carousel-bk .cnt { position: absolute; width: 300px; top: 150px; }
.steps .forpc .carousel-bk .cnt h4 { display: block; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; width: 100px; border: 1px solid #444444; text-align: center; margin: 0 auto 15px auto; padding-bottom: 2px; }
.steps .forpc .carousel-bk .cnt p { font-size: 1.125rem; text-align: justify; line-height: 1.5; }
.steps .forpc .carousel-bk .cnt p span { color: #a81c00; font-weight: bold; }
.steps .forpc .carousel-bk .cnt .add { padding-top: 10px; font-size: 0.9375rem; line-height: 1.375; color: #777777; }
.steps .forpc .slick-dots { position: absolute; width: 300px; }

#how-steps .ctr > h3 { left: 20px; }
#how-steps .bg { background-image: url(../images/how-steps-back.gif); }
#how-steps .bg .ctr .img { width: 300px; margin-left: -150px; left: 10%; top: -11%; }
#how-steps .bg .ctr .img > img { animation: floatAni 4s infinite ease-in-out; -webkit-animation: floatAni 4s infinite ease-in-out; -moz-animation: floatAni 4s infinite ease-in-out; -ms-animation: floatAni 4s infinite ease-in-out; -o-animation: floatAni 4s infinite ease-in-out; }
#how-steps .bg .ctr .cloud1 { left: 2%; top: 13%; }
#how-steps .bg .ctr .cloud1 > img { animation: cloudLeftAni 15s infinite linear; -webkit-animation: cloudLeftAni 15s infinite linear; -moz-animation: cloudLeftAni 15s infinite linear; -ms-animation: cloudLeftAni 15s infinite linear; -o-animation: cloudLeftAni 15s infinite linear; }
#how-steps .bg .ctr .cloud2 { left: 41%; top: 25%; }
#how-steps .bg .ctr .cloud2 > img { animation: cloudRightAni 12s infinite linear; -webkit-animation: cloudRightAni 12s infinite linear; -moz-animation: cloudRightAni 12s infinite linear; -ms-animation: cloudRightAni 12s infinite linear; -o-animation: cloudRightAni 12s infinite linear; }
#how-steps .bg .ctr .cloud3 { left: 94%; top: -6%; }
#how-steps .bg .ctr .cloud3 > img { animation: cloudLeftAni 14s infinite linear; -webkit-animation: cloudLeftAni 14s infinite linear; -moz-animation: cloudLeftAni 14s infinite linear; -ms-animation: cloudLeftAni 14s infinite linear; -o-animation: cloudLeftAni 14s infinite linear; }
#how-steps .forpc .carousel-bk { padding-left: 350px; }
#how-steps .forpc .carousel-bk .cnt { left: 20px; }
#how-steps .forpc .slick-dots { left: 20px; top: 370px; }
#how-steps .forpc .slick-prev { left: 80px; top: 378px; }
#how-steps .forpc .slick-next { left: 220px; top: 378px; }

#what-steps .ctr > h3 { left: 680px; }
#what-steps .bg { background-image: url(../images/what-steps-back.gif); }
#what-steps .bg .ctr .img { width: 150px; margin-left: -75px; left: 92%; top: -7%; }
#what-steps .bg .ctr .img > img { animation: floatAni 2.5s infinite ease-in-out; -webkit-animation: floatAni 2.5s infinite ease-in-out; -moz-animation: floatAni 2.5s infinite ease-in-out; -ms-animation: floatAni 2.5s infinite ease-in-out; -o-animation: floatAni 2.5s infinite ease-in-out; }
#what-steps .bg .ctr .cloud1 { left: 5%; top: 20%; }
#what-steps .bg .ctr .cloud1 > img { animation: cloudRightAni 13s infinite linear; -webkit-animation: cloudRightAni 13s infinite linear; -moz-animation: cloudRightAni 13s infinite linear; -ms-animation: cloudRightAni 13s infinite linear; -o-animation: cloudRightAni 13s infinite linear; }
#what-steps .bg .ctr .cloud2 { left: 60%; top: 25%; }
#what-steps .bg .ctr .cloud2 > img { animation: cloudLeftAni 15s infinite linear; -webkit-animation: cloudLeftAni 15s infinite linear; -moz-animation: cloudLeftAni 15s infinite linear; -ms-animation: cloudLeftAni 15s infinite linear; -o-animation: cloudLeftAni 15s infinite linear; }
#what-steps .bg .ctr .cloud3 { left: 98%; top: 5%; }
#what-steps .bg .ctr .cloud3 > img { animation: cloudRightAni 12s infinite linear; -webkit-animation: cloudRightAni 12s infinite linear; -moz-animation: cloudRightAni 12s infinite linear; -ms-animation: cloudRightAni 12s infinite linear; -o-animation: cloudRightAni 12s infinite linear; }
#what-steps .forpc .carousel-bk { padding-right: 350px; }
#what-steps .forpc .carousel-bk .cnt { left: 680px; }
#what-steps .forpc .slick-dots { left: 680px; top: 400px; }
#what-steps .forpc .slick-prev { left: 740px; top: 408px; }
#what-steps .forpc .slick-next { left: 880px; top: 408px; }

@media (min-width: 1260px) { #how-steps .bg .ctr .img { left: 14%; }
  #how-steps .bg .ctr .cloud1 { left: 7%; }
  #what-steps .bg .ctr .img { left: 89%; }
  #what-steps .bg .ctr .cloud3 { left: 95%; } }
@media (max-width: 1200px) { #what-steps .bg .ctr .img { left: 100%; top: 5%; }
  #what-steps .bg .ctr .cloud2 { left: 64%; top: 22%; }
  #what-steps .bg .ctr .cloud3 { left: 100%; top: 13%; } }
@media (max-width: 1050px) { .steps .ctr { height: auto; }
  .steps .ctr > h3 { position: relative; width: 100%; top: auto; padding-top: 40px; }
  .steps .ctr > h3 br { display: none; }
  .steps .forpc { padding-top: 15px; }
  .steps .forpc .carousel-bk .cnt { position: relative; width: 100%; max-width: 640px; top: auto; margin-top: -20px; padding-left: 120px; padding-right: 10px; }
  .steps .forpc .carousel-bk .cnt h4 { margin-left: -110px; margin-bottom: -30px; }
  .steps .forpc .carousel-bk .cnt .add { padding-top: 5px; }
  .steps .forpc .slick-dots { position: relative; left: auto !important; top: auto !important; margin: 0 auto; padding-top: 10px; padding-bottom: 50px; }
  .steps .forpc .slick-prev { left: calc(50% - 90px) !important; left: -webkit-calc(50% - 90px) !important; left: -moz-calc(50% - 90px) !important; left: -ms-calc(50% - 90px) !important; left: -o-calc(50% - 90px) !important; bottom: 40px !important; top: auto !important; }
  .steps .forpc .slick-next { left: calc(50% + 50px) !important; left: -webkit-calc(50% + 50px) !important; left: -moz-calc(50% + 50px) !important; left: -ms-calc(50% + 50px) !important; left: -o-calc(50% + 50px) !important; bottom: 40px !important; top: auto !important; }
  #how-steps { background-position: right bottom; }
  #how-steps .ctr > h3 { left: auto; }
  #how-steps .bg { background-position: right bottom; }
  #how-steps .bg .ctr .img { width: 260px; margin-left: -130px; left: 12%; top: -8%; }
  #how-steps .bg .ctr .cloud1 { left: 0%; top: 30%; }
  #how-steps .bg .ctr .cloud2 { left: 83%; top: 60%; }
  #how-steps .bg .ctr .cloud3 { left: 96%; top: 5%; }
  #how-steps .forpc .carousel-bk { padding-left: 0; }
  #how-steps .forpc .carousel-bk .cnt { left: auto; }
  #what-steps .ctr > h3 { left: auto; }
  #what-steps .bg { background-position: left bottom; }
  #what-steps .bg .ctr .img { width: 130px; margin-left: -65px; left: 90%; top: -5%; }
  #what-steps .bg .ctr .cloud1 { left: 10%; }
  #what-steps .bg .ctr .cloud2 { left: 90%; top: 65%; }
  #what-steps .bg .ctr .cloud3 { left: 98%; top: 5%; }
  #what-steps .forpc .carousel-bk { padding-right: 0; }
  #what-steps .forpc .carousel-bk .cnt { left: auto; } }
@media (max-width: 768px) { .steps .forpc { padding-top: 15px; }
  .steps .forpc .carousel-bk .cnt { position: relative; width: 100%; max-width: 640px; top: auto; margin-top: -20px; padding-left: 120px; padding-right: 10px; }
  .steps .forpc .carousel-bk .cnt h4 { margin-left: -110px; margin-bottom: -30px; }
  .steps .forpc .carousel-bk .cnt .add { padding-top: 5px; } }
@media (max-width: 640px) { .steps .ctr > h3 br { display: block; }
  .steps .forpc { display: none; }
  .steps .formb { display: block; }
  #how-steps .bg .ctr .img { width: 230px; margin-left: -115px; left: 15%; }
  #how-steps .bg .ctr .cloud1 { left: 5%; }
  #how-steps .bg .ctr .cloud2 { left: 72%; }
  #how-steps .bg .ctr .cloud3 { left: 100%; }
  #what-steps .bg .ctr .img { width: 100px; margin-left: -50px; left: 85%; }
  #what-steps .bg .ctr .cloud1 { left: 5%; }
  #what-steps .bg .ctr .cloud2 { left: 80%; }
  #what-steps .bg .ctr .cloud3 { left: 93%; } }
@media (max-width: 500px) { #how-steps .bg .ctr .img { width: 200px; margin-left: -100px; left: 16%; }
  #how-steps .bg .ctr .cloud2 { left: 78%; }
  #how-steps .bg .ctr .cloud3 { left: 110%; }
  #what-steps .bg .ctr .img { width: 90px; margin-left: -45px; left: 88%; }
  #what-steps .bg .ctr .cloud2 { left: 85%; } }
@media (max-width: 420px) { #how-steps .bg .ctr .img { width: 180px; margin-left: -90px; left: 16%; } }
#notice { padding-top: 50px; padding-bottom: 80px; }
#notice .ctr { max-width: 1000px; }
#notice h4 { display: block; width: 100%; text-align: center; padding: 0 20px; margin-bottom: 1rem; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; }
#notice ol { text-align: justify; padding: 0 0 0 25px; margin: 0 auto; }
#notice ol > li { line-height: 1.5; margin-bottom: 0.5rem; }
#notice ol a { text-decoration: underline; word-break: break-all; }
#notice ul { list-style-type: none; padding: 0; }
#notice .mark { font-weight: bold; color: #c42607; }
#notice .bold { font-weight: bold; }

@media (min-width: 1600px) { #notice .ctr { max-width: 1230px; } }
@media (max-width: 1000px) { #notice .ctr { max-width: 800px; } }
@media (max-width: 640px) { #notice { padding-top: 30px; padding-bottom: 50px; } }
@media (max-width: 500px) { #notice ol { list-style-position: inside; padding-left: 0; } }