@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

/* ================ kk ============== */
*, body, html {
  box-sizing: border-box;
  font-family: "Microsoft JhengHei UI","Microsoft JhengHei",Pmingliu,"Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,sans-serif; }

h1 {
  font-size: 2em; }

h2 {
  font-size: 1.5em;
  padding-bottom: 0.5em; }

[hidden] {
  display: none !important; }

[nowrap], .nowrap {
  white-space: nowrap; }

select, input, textarea {
  padding: 3px;
  border: 1px solid silver;
  border-radius: 3px; }

textarea {
  resize: vertical; }

[lang] {
  display: none; }

[name=langSelected][value=zh]:checked ~ * [lang=zh] {
  display: inline; }

[name=langSelected][value=en]:checked ~ * [lang=en] {
  display: inline; }

#page, #exPage, #topBar {
  width: 100%; }

#page, #exPage {
  margin: auto;
  padding-top: 45px;
  padding-bottom: 30px; }

#topBar {
  position: fixed;
  z-index: 10000;
  height: 45px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
  padding: 0px;
  display: flex;
  flex-direction: row; }
  #topBar #langSelector-group {
    position: absolute;
    right: 5px;
    top: 9px; }

#logo {
  white-space: nowrap; }
  #logo img {
    height: 45px;
    padding: 2px; }
    #logo img[alt="Company Name"] {
      padding: 5px;
      padding-left: 0px; }

#mainMenu {
  display: flex;
  font-weight: bolder;
  padding: 10px;
  flex-direction: row; }
  #mainMenu > * {
    padding: 5px 10px;
    border-radius: 5px; }
  #mainMenu > .menuItem:hover {
    background: silver;
    color: black; }
  #mainMenu > .menuItem.active {
    background: #8cfffb;
    color: blue;
    position: relative; }
    #mainMenu > .menuItem.active:before {
      content: '';
      position: absolute;
      bottom: -6px;
      border-style: solid;
      border-width: 8px 6px 0;
      border-color: #8cfffb transparent; }

#pageContent {
  width: 100%; }
  #pageContent #home .swiper-container .swiper-slide {
    width: 100%;
    height: 50vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: silver; }
    #pageContent #home .swiper-container .swiper-slide img {
      width: 100%; }
    #pageContent #home .swiper-container .swiper-slide .textOnImg {
      position: absolute;
      font-size: 4vw;
      font-weight: bolder;
      font-style: italic;
      line-height: 2em;
      top: 20%;
      left: 20%;
      text-shadow: 0.2vw 0.2vw 0 black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.1vw black, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white, 0px 0px 0.3vw white; }
  #pageContent .title, #pageContent .subTitle {
    text-align: center;
    font-weight: bolder;
    font-size: 36px;
    color: black;
    padding: 5px;
    padding-top: 5vw; }
  #pageContent .subTitle {
    padding: 5px;
    color: grey; }
  #pageContent #service .items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
    #pageContent #service .items .item {
      display: flex;
      padding: 20px;
      padding-top: 40px;
      flex-direction: column;
      width: 25%; }
      #pageContent #service .items .item > * {
        padding: 10px;
        text-align: center; }
        #pageContent #service .items .item > * .item-title {
          color: black;
          text-align: center;
          width: 100%; }
      #pageContent #service .items .item .pic img {
        width: 100%; }
      #pageContent #service .items .item .item-detail {
        text-align: left; }
      #pageContent #service .items .item .item-list li {
        width: 100%;
        text-align: left;
        padding-left: 15%; }
      #pageContent #service .items .item .item-list li:before {
        content: '• ';
        font-size: 110%; }
      #pageContent #service .items .item .item-link {
        width: 100%;
        text-align: center;
        padding-bottom: 40px; }
        #pageContent #service .items .item .item-link > * {
          margin: auto;
          padding: 8px 15px;
          background: darkblue;
          border-radius: 5px;
          color: white;
          font-weight: bolder; }
  #pageContent #about {
    background: #fdf3f5; }
    #pageContent #about .about-info {
      min-width: 300px;
      width: 50%;
      margin: auto;
      line-height: 2em;
      text-align: center; }
      #pageContent #about .about-info > .about-img {
        padding-top: 20px;
        margin: auto;
        width: 50vw;
        height: 33.3vw;
        min-height: 10vw;
        background: #defedf;
        background-attachment: fixed;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important; }
    #pageContent #about .items {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      padding: 20px 20%; }
      #pageContent #about .items .item {
        width: 25%;
        padding: 15px 20px;
        text-align: center;
        padding: 30px; }
        #pageContent #about .items .item > * {
          padding: 10px 0;
          color: #de4856;
          background: #fdcdfd; }
      #pageContent #about .items .item:first-child, #pageContent #about .items .item:nth-child(2) {
        width: 50%;
        text-align: center; }
        #pageContent #about .items .item:first-child > *, #pageContent #about .items .item:nth-child(2) > * {
          background: #a2ceef;
          color: darkblue;
          padding: 15px 20px; }
  #pageContent #customer .swiper-slide {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
    #pageContent #customer .swiper-slide > * {
      width: 26%;
      flex-grow: 1;
      height: 100px;
      border: 10px solid transparent;
      background: #defedf;
      background-attachment: fixed;
      background-size: contain !important;
      background-position: center !important;
      background-repeat: no-repeat !important; }
      #pageContent #customer .swiper-slide > *:before {
        content: ''; }
  #pageContent #customer .items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 20px; }
  #pageContent #customer .customer-info {
    display: inline-block;
    line-height: 1.8em;
    text-align: center;
    height: 400px;
    background: white;
    padding-bottom: 30px; }
    #pageContent #customer .customer-info img {
      width: 50%; }
    #pageContent #customer .customer-info img.img-mp {
      width: 20%; }
  #pageContent #contact {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #ced3ff; }
    #pageContent #contact > * {
      width: 100%; }
    #pageContent #contact > form {
      width: 30%;
      padding: 20px; }
      #pageContent #contact > form .title, #pageContent #contact > form .subTitle {
        text-align: left; }
      #pageContent #contact > form > * {
        width: 100%; }
      #pageContent #contact > form input, #pageContent #contact > form textarea {
        font-size: 18px;
        height: 2em;
        padding: 0.5em;
        border: 1px solid silver;
        border-radius: 3px;
        margin: 2px 0; }
      #pageContent #contact > form textarea {
        resize: vertical;
        min-height: 3em; }
    #pageContent #contact > *:last-child {
      width: 70%;
      background-repeat: no-repeat !important;
      background-position: center;
      background-size: cover !important; }
    #pageContent #contact [type=submit] {
      padding: 10px;
      font-size: 20px;
      border-radius: 5px; }

#bottomBar {
  position: fixed;
  bottom: 0;
  z-index: 10000;
  width: 100%;
  bottom: 0px;
  height: 30px;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; }

/*.card {
  position: relative;
  width: 220px;
  height: 160px;
  perspective: 500px;
}
.card.v:hover .front-face, .card.v.flip .front-face,
.card:hover .front-face, .card.flip .front-face{
  transform: rotateX(180deg);
}
.card.v:hover .back-face, .card.v.flip .back-face,
.card:hover .back-face, .card.flip .back-face{
  transform: rotateX(0deg);
}
.card.v .back-face
.card .back-face{
  transform: rotateX(-180deg);
}
.card.h:hover .front-face, .card.h.flip .front-face{
  transform: rotateY(180deg);
}
.card.h:hover .back-face, .card.h.flip .back-face{
  transform: rotateY(0deg);
}
.card.h .back-face{
  transform: rotateY(-180deg);
}
.card .front-face, .card .back-face
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  color: white;
  background-color: #000;
  padding: 10px;
  backface-visibility: hidden;
}*/
/*//============== Flip card (IE11) ========================
.flipcard {
  position: relative;
  width: 220px;
  height: 160px;
  perspective: 500px;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
  transform: rotateX(180deg);
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
  transform: rotateX(0deg);
}
.flipcard.v .back{
  transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(180deg);
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateY(0deg);
}
.flipcard.h .back{
  transform: rotateY(-180deg);
}
.flipcard .front, .flipcard .back
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  color: white;
  background-color: #000;
  padding: 10px;
  backface-visibility: hidden;
}*/
.item.card-group {
  width: 26% !important;
  flex-grow: 1;
  min-height: 400px; }

.card-group {
  background: transparent;
  perspective: 1000px; }
  .card-group .card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    perspective: 1500px; }
  .card-group .card:hover .back-face {
    transform: rotateY(0deg); }
  .card-group .card:hover .front-face {
    transform: rotateY(180deg); }
  .card-group .front-face, .card-group .back-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: all 0.5s ease-in; }
  .card-group .front-face {
    background: silver;
    background-attachment: fixed;
    background-size: cover !important; }
  .card-group .back-face {
    padding: 0 10%;
    line-height: 1.5em;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: left;
    transform: rotateY(-180deg);
    background: #8cfffb;
    overflow-y: auto; }
  .card-group .card-title {
    margin-top: 10px;
    font-size: 24px; }

#contact-exPage {
  position: relative;
  width: 100%;
  height: 100vh;
  margin-top: -45px;
  margin-bottom: -30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-position: right bottom !important;
  background-size: cover !important;
  background-repeat: no-repeat !important; }
  #contact-exPage form {
    position: absolute;
    z-index: 2;
    width: 800px;
    margin: auto;
    padding-right: 20%;
    display: block; }
    #contact-exPage form .title, #contact-exPage form .subTitle {
      width: 100%; }
    #contact-exPage form > * {
      margin: 3px 0;
      display: inline-block;
      vertical-align: top;
      font-size: 20px;
      text-align: center; }
    #contact-exPage form .title {
      font-size: 36px;
      font-weight: bolder; }
    #contact-exPage form .subTitle {
      font-size: 30px;
      margin-bottom: 18px;
      color: grey; }
    #contact-exPage form label {
      width: 35%;
      text-align: right;
      font-size: 16px; }
      #contact-exPage form label:after {
        content: "："; }
    #contact-exPage form input, #contact-exPage form textarea {
      width: 64%;
      text-align: left;
      padding: 3px;
      background: rgba(255, 255, 255, 0.3); }
    #contact-exPage form [type=submit] {
      width: 100%;
      padding: 6px 40%; }
  #contact-exPage .contact-info {
    text-align: left;
    margin-top: 50px;
    font-size: 24px; }
  #contact-exPage .contact-img {
    width: 100%;
    height: 100% !important;
    overflow: scroll;
    position: absolute;
    z-index: 1;
    background-position: right bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important; }

#contactUs_1 {
  text-align: left; }
  #contactUs_1 .contact-img {
    position: relative;
    z-index: -1;
    width: 100%;
    padding-top: 66.67%;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    line-height: 3vw; }
    #contactUs_1 .contact-img * {
      font-size: 2vw; }
    #contactUs_1 .contact-img > * {
      left: 10px;
      position: absolute; }
    #contactUs_1 .contact-img .contact-info {
      top: 1.5vw; }
      #contactUs_1 .contact-img .contact-info .title, #contactUs_1 .contact-img .contact-info .subTitle {
        line-height: 1.8em;
        font-size: 3vw; }
      #contactUs_1 .contact-img .contact-info .subTitle {
        padding-top: 2vw;
        font-size: 2vw; }
  #contactUs_1 form {
    position: relative;
    margin: auto;
    padding-right: 10vw;
    width: 60vw;
    min-width: 300px; }
    #contactUs_1 form .title {
      font-size: 3vw;
      margin: 2vw;
      text-align: center; }
    #contactUs_1 form .remark {
      padding-left: 31%;
      font-size: 1.5vw; }
    #contactUs_1 form label {
      width: 30%;
      font-size: 1.8vw;
      text-align: right;
      white-space: nowrap;
      display: inline-block;
      vertical-align: top; }
      #contactUs_1 form label:after {
        content: " : "; }
    #contactUs_1 form input, #contactUs_1 form textarea {
      width: 68%;
      font-size: 2vw;
      margin: 3px 0; }
    #contactUs_1 form .buttons {
      text-align: center; }
      #contactUs_1 form .buttons [type=submit] {
        margin: 1vw auto;
        font-size: 2vw;
        padding: 0.5vw 6.5vw;
        background: #8cfffb !important; }
    #contactUs_1 form .msg {
      text-align: center;
      padding: 10px; }
      #contactUs_1 form .msg:empty {
        padding: 1px; }
      #contactUs_1 form .msg [lang] {
        padding: 10px 20px;
        border-radius: 5px; }
      #contactUs_1 form .msg.loading {
        background: linear-gradient(to right, transparent, #86b42a, #ff335d);
        background-size: 400% 400%;
        animation: AnimationName 3s ease infinite; }
@keyframes AnimationName {
  0% {
    background-position: 0%   top; }
  10% {
    background-position: 80%   top; }
  20% {
    background-position: 160%   top; }
  30% {
    background-position: 240%   top; }
  40% {
    background-position: 320%   top; }
  50% {
    background-position: 400%   top; }
  60% {
    background-position: 320%   top; }
  70% {
    background-position: 240%   top; }
  80% {
    background-position: 160%   top; }
  100% {
    background-position: 80%   top; } }

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