html[lang="zh-Hant"] body, html[lang="zh-Hant"] option, html[lang="zh-Hant"] label { font-family: "Noto Sans TC", "Microsoft JhengHei", "Arial", sans-serif; }

html[lang="zh-Hans"] body, html[lang="zh-Hans"] option, html[lang="zh-Hans"] label { font-family: "Noto Sans SC", "Microsoft Yahei", "Arial", sans-serif; }

html[lang="en"] body, html[lang="en"] option, html[lang="en"] label { font-family: "Roboto", "Helvetica", "Arial", sans-serif; }

/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* -------------ELEMENT----------- */
.box-shadow { box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }

/* -------------KV---------------- */
#kv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; }
#kv .deco-wave { position: absolute; bottom: -20%; left: 0; z-index: 2; }
#kv .custom-nav { height: 3em; position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; }
#kv .custom-prev, #kv .custom-next { width: 3em; height: 3em; border-radius: 1.6em; background: #5C8800 url(/assets/img/icon/arrow.svg) center center no-repeat; position: absolute; right: 0; cursor: pointer; }
#kv .custom-prev:hover, #kv .custom-next:hover { background-color: #2288FF; }
#kv .custom-prev:active, #kv .custom-next:active { -moz-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
#kv .custom-prev { right: 4em; -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); }
#kv .custom-prev:active { -moz-transform: scale(-0.95, 0.95); -o-transform: scale(-0.95, 0.95); -ms-transform: scale(-0.95, 0.95); -webkit-transform: scale(-0.95, 0.95); transform: scale(-0.95, 0.95); }

#kv_slider { width: 100%; pointer-events: none; }
#kv_slider .item { width: 100%; height: 0; padding-bottom: 40.26%; background: #dddddd center center/cover no-repeat; position: relative; pointer-events: all; }
#kv_slider .container { text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35); position: absolute; top: 50%; right: 0; bottom: 0; left: 0; margin: auto; -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 3; }
#kv_slider h2, #kv_slider h3, #kv_slider .btn { opacity: 0; }
#kv_slider h3 { font-size: 1.625em; }
#kv_slider .btn { margin-top: 1.5em; }
#kv_slider .active h3 { -webkit-animation-delay: 0.5s; -webkit-animation-duration: 0.8s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.5s; -moz-animation-duration: 0.8s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.5s; -o-animation-duration: 0.8s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.5s; animation-duration: 0.8s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#kv_slider .active h2 { -webkit-animation-delay: 0.7s; -webkit-animation-duration: 0.8s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.7s; -moz-animation-duration: 0.8s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.7s; -o-animation-duration: 0.8s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.7s; animation-duration: 0.8s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#kv_slider .active .btn { -webkit-animation-delay: 0.9s; -webkit-animation-duration: 0.8s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.9s; -moz-animation-duration: 0.8s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.9s; -o-animation-duration: 0.8s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.9s; animation-duration: 0.8s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }

/* -------------SLOGAN------------ */
#slogan { padding: 5% 0 4em; position: relative; z-index: 2; }
#slogan img { margin: 0 auto 2em; }
#slogan h3 { font-size: 1.875em; font-weight: 300; }
#slogan h2 { font-weight: bold; font-size: 2.875em; }
#slogan p { margin-top: 1.5em; }

/* -------------ABOUT------------- */
#about { padding: 15% 0; position: relative; overflow: hidden; }
#about > .container { position: relative; z-index: 2; }
#about .img { width: 45%; height: 0; padding-bottom: 28.663%; background: #F8F8F8 center center no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0; border-radius: 1em 0 0 1em; }
#about .img:before { content: ''; display: block; width: 115%; height: 100%; background: #F1F8E3; border-radius: 1em 0 0 1em; position: absolute; top: 0; right: 0; transform-origin: right top; -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); z-index: -1; }
#about p { margin-bottom: 1.5em; }
#about .deco-wave { position: absolute; bottom: -10%; left: 0; }
#about .deco-wave:before { display: none; }
#about .deco-wave .circle.left { -webkit-animation-delay: -13.75s; -webkit-animation-duration: 20s; -webkit-animation-name: circle_wave; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: -13.75s; -moz-animation-duration: 20s; -moz-animation-name: circle_wave; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: -13.75s; -o-animation-duration: 20s; -o-animation-name: circle_wave; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: -13.75s; animation-duration: 20s; animation-name: circle_wave; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#about .deco-wave .circle.left span { left: 15%; }

/* -------------FEATURE----------- */
#feature figure { width: 55%; height: 0; padding-bottom: 55%; position: relative; animation: cycle 100s linear infinite; }
#feature figure.is-paused { animation-play-state: paused; }
#feature figure.is-paused .center, #feature figure.is-paused .around li { animation-play-state: paused; }
#feature figure.is-paused .center > img { opacity: 0; }
#feature .center, #feature .around li { animation: cycle 100s linear infinite; animation-direction: reverse; }
#feature .center { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(/assets/img/index/circle.jpg) center center no-repeat; background-size: contain; }
#feature .center img, #feature .center ul, #feature .center li { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#feature .center ul, #feature .center li { width: 100%; height: 100%; }
#feature .center li { text-align: center; height: 1.5em; display: none; }
#feature .center li.active { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.8s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.8s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.8s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.8s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#feature .center li:nth-child(1) { color: #1FBA8B; }
#feature .center li:nth-child(2) { color: #F89B19; }
#feature .center li:nth-child(3) { color: #47ABF0; }
#feature .center li:nth-child(4) { color: #F7675F; }
#feature .center li:nth-child(5) { color: #AD4ADB; }
#feature .center img { max-width: 30%; }
#feature .around { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#feature .around li { display: flex; align-items: center; justify-content: center; text-align: center; width: 8em; height: 8em; border-radius: 4em; border: 1px solid #999999; box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.15); background: white; font-size: 1.25em; font-weight: 400; letter-spacing: .08em; line-height: 1.5; position: absolute; cursor: crosshair; }
#feature .around li:nth-child(1) { color: #1FBA8B; border-color: #1FBA8B; top: 5%; left: 0; right: 0; margin: 0 auto; }
#feature .around li:nth-child(2) { color: #F89B19; border-color: #F89B19; top: 25%; right: 8%; }
#feature .around li:nth-child(3) { color: #47ABF0; border-color: #47ABF0; bottom: 13%; right: 18%; }
#feature .around li:nth-child(4) { color: #F7675F; border-color: #F7675F; bottom: 13%; left: 18%; }
#feature .around li:nth-child(5) { color: #AD4ADB; border-color: #AD4ADB; top: 25%; left: 8%; }
#feature .content { padding-left: 5%; margin-right: -5%; position: relative; z-index: 2; }
#feature .list-check { font-size: 1.25em; font-weight: 500; letter-spacing: .1em; margin-bottom: 2em; }
#feature .list-check li { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; font-size: .875em; padding: .5em 0; position: relative; }
#feature .list-check li:before { content: ''; width: 2em; height: 2em; margin-right: .5em; flex-shrink: 0; background: url(/assets/img/icon/check.png) center center no-repeat; background-size: contain; }
#feature .list-check li:nth-child(1) { color: #AD4ADB; }
#feature .list-check li:nth-child(2) { color: #F7675F; }
#feature .list-check li:nth-child(3) { color: #47ABF0; }
#feature .list-check li:nth-child(4) { color: #1FBA8B; }
#feature .list-check li:nth-child(5) { color: #F89B19; }

/* -------------LINKS------------- */
#links { padding: 9% 0; background: center no-repeat; background-size: 100% auto; position: relative; }
#links ul { margin: 0 -1.5em; position: relative; z-index: 3; }
#links li { padding: 0 1.5em; }
#links a { display: block; width: 100%; height: 0; padding-bottom: 120%; border-radius: 1em; background-size: cover; background-position: center; position: relative; overflow: hidden; }
#links a:before { content: ''; display: block; width: 100%; height: 100%; background: rgba(34, 136, 255, 0.5); position: absolute; top: 0; left: 0; opacity: 0; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
#links a:after { content: ''; display: block; width: 100%; height: 100%; background-image: rgba(0, 0, 0, 0); background-image: -webkit-linear-gradient(legacy-direction(180deg), rgba(0, 0, 0, 0) 75%, rgba(34, 136, 255, 0.5) 100%); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 75%, rgba(34, 136, 255, 0.5) 100%); position: absolute; top: 0; left: 0; }
#links a:hover:before { opacity: 1; }
#links a:hover .content span { -webkit-text-stroke: none; color: white; }
#links .content { width: calc(100% - 4em); position: absolute; left: 0; right: 0; bottom: 0; margin: 1.5em 2em; z-index: 3; }
#links .content span { font-size: 4.875em; font-weight: 400; font-style: italic; letter-spacing: .08em; color: transparent; -webkit-text-stroke: 2px white; }
#links .content h4 { margin-left: auto; }
#links .deco-wave { height: 0; padding: 0 0 20%; position: absolute; top: 0; }
#links .deco-wave:before { display: none; }
#links .deco-wave .circle span { width: 20%; padding-bottom: 20%; right: 10%; }
#links .deco-wave .circle span:first-child { display: none; }

/* -------------SERVICE----------- */
#service { padding: 5% 0; position: relative; }
#service ul { margin: 10% -1.5em 0; padding-left: 15%; }
#service li { padding: 0 1.5em; }
#service li:nth-child(1) { margin-top: -5%; margin-bottom: 5%; }
#service li:nth-child(2) { margin-top: -10%; margin-bottom: 10%; }
#service li:nth-child(3) { margin-top: -15%; margin-bottom: 15%; }
#service .card { align-content: flex-start; height: 100%; padding: 1.5em 1em; background: #fafafa 0% 0% no-repeat padding-box; box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.15); border: 1px solid #BEEA97; border-radius: 16px; }
#service .card figure { width: 60%; height: 0; padding-bottom: 60%; background: white; border-radius: 50%; margin: 0 auto 1em; position: relative; overflow: hidden; }
#service .card img { width: 80%; max-width: 140px; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#service .card h5 { width: 100%; margin: .5em 0; }
#service .deco-wave { height: 0; padding: 20% 0 20%; position: absolute; top: -5%; z-index: -1; }
#service .deco-wave:before { display: none; }
#service .deco-wave .circle { top: auto; bottom: 100%; -webkit-animation-delay: 0s; -webkit-animation-duration: 0s; -webkit-animation-name: none; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0s; -moz-animation-name: none; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0s; -o-animation-name: none; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0s; animation-name: none; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#service .deco-wave .circle span { left: 0; }
#service .deco-wave .circle span:first-child { display: none; }

/* -------------RWD--------------- */
@media screen and (max-width: 1440px) { #about .deco-wave { bottom: -5%; } }
@media screen and (max-width: 1280px) { #slogan h2 { font-size: 2.5em; }
  #feature .around li { font-size: 1.25em; }
  #feature .list-check { font-size: 1.125em; }
  #links ul { margin: 0 -1em; }
  #links li { padding: 0 1em; }
  #links .content span { font-size: 4em; }
  #service ul { margin: 10% -1em 0; }
  #service li { padding: 0 1em; } }
@media screen and (max-width: 1024px) { #kv_slider .item { padding-bottom: 45%; }
  #slogan h3 { font-size: 1.75em; }
  #slogan h2 { font-size: 2.5em; }
  #about { padding: 8% 0; }
  #about .deco-wave { bottom: -15%; }
  #feature figure { width: 65%; padding-bottom: 65%; margin-left: -10%; }
  #feature .content { padding-left: 0; margin-right: 0; }
  #feature .list-check { margin-bottom: 1em; }
  #links ul { margin: 0 -.5em; }
  #links li { padding: 0 .5em; }
  #links .content { width: calc(100% - 3em); margin: 1em 1.5em; }
  #service ul { padding-left: 5%; margin: 15% -.5em 0; }
  #service li { padding: 0 .5em; }
  #service .deco-wave { top: 5%; } }
@media screen and (max-width: 768px) { #kv .deco-wave { bottom: -10%; }
  #kv_slider .item { padding-bottom: 100%; }
  #slogan h3 { font-size: 1.5em; }
  #slogan h2 { font-size: 2em; margin: 1em 0 1.5em; }
  #links .content span, #links .content h4 { width: 100%; text-align: center; margin: .5em 0; }
  #links .content h4 { min-height: 3em; text-shadow: 0 0 10px black; }
  #service ul { padding-left: 0; } }
@media screen and (max-width: 620px) { #kv_slider h3 { font-size: 1.5em; }
  #slogan img { width: 30%; max-width: 60px; }
  #slogan h3 { font-size: 1.5em; }
  #slogan h2 { font-size: 2em; }
  #slogan p br { display: none; }
  #about { padding: 3em 0 10%; }
  #about .col50 { width: 100%; text-align: center; margin-bottom: 2em; }
  #about .img { width: 80%; padding-bottom: 51%; margin: 0 auto; border-radius: 1em; position: relative; }
  #about .img:before { border-radius: 1em; transform-origin: center top; }
  #about .deco-wave { bottom: 0; }
  #feature { position: relative; overflow: hidden; }
  #feature figure { width: 100%; padding-bottom: 100%; margin-left: 0; }
  #feature .around li { width: 6.5em; height: 6.5em; }
  #feature .content { width: 100%; padding-left: 0; margin-right: 0; text-align: center; }
  #feature .list-check { max-width: 12em; margin: 0 auto 1em; }
  #feature .list-check li { width: 100%; }
  #links li { width: 100%; max-width: 300px; margin: 0 auto 1em; }
  #links a { padding-bottom: 70%; }
  #service { text-align: center; }
  #service ul { padding-left: 0; margin: 1em 0; }
  #service li { width: 100%; max-width: 300px; margin: 0 auto 1em !important; }
  #service .deco-wave { top: 10%; } }
@media screen and (max-width: 375px) { #feature figure { margin: 3em 0; }
  #feature .around li:nth-child(1) { top: 0%; left: 0; right: 0; }
  #feature .around li:nth-child(2) { top: 25%; right: 0%; }
  #feature .around li:nth-child(3) { bottom: 3%; right: 13%; }
  #feature .around li:nth-child(4) { bottom: 3%; left: 13%; }
  #feature .around li:nth-child(5) { top: 25%; left: 0%; } }

/*# sourceMappingURL=index.css.map */