body {
  font-family: 'Lato', 'Microsoft JhengHei';
  -webkit-text-size-adjust: 100%; }

.page-container {
  position: relative;
  padding: 0;
  overflow: hidden;
  clear: both;
  width: 100%;
  margin-top: 65px; }

.inner-container {
  width: 100%; }

header, footer {
  position: relative;
  width: 100%; }

.wrap {
  position: relative;
  padding: 0;
  overflow: hidden;
  width: 100%;
  padding: 0 100px; }

.wrap-inner {
  position: relative;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  width: 1200px; }

.main-content {
  position: relative;
  width: 100%;
  overflow: hidden; }

/*==========================================
Header
==========================================*/
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 65px;
  background-color: #001e5f; }
  header #header-function {
    margin-top: 25px; }
  header .user-name {
    display: block;
    line-height: 20px;
    /*padding-left: 30px;*/
    font-size: 16px;
    color: #fff;
    margin-right: 16px;
    float: left; }
  header .icon-login {
    display: block;
    line-height: 20px;
    padding-left: 30px;
    font-size: 16px;
    color: #fff;
    margin-right: 25px;
    background: url("../images/icons/icon_user01.png") no-repeat left center; }
    header .icon-login:hover {
      color: #ef9304; }
  header .wrap {
    overflow: visible; }
  header nav {
    position: relative;
    margin-top: 25px;
    overflow: hidden;
    margin-right: 100px; }
    header nav a {
      float: left;
      display: block;
      padding: 0 7px 20px 7px;
      font-size: 16px;
      line-height: 20px;
      color: #fff;
      margin-right: 80px; }
      header nav a:nth-last-of-type(1) {
        margin-right: 0; }
    header nav #nav-line {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 60px;
      height: 3px;
      background-color: #ffe500;
      transition: 0.4s;
      -webkit-transition: 0.4s; }

.langbar {
  background: url("../images/icons/icon_lang01.png") no-repeat;
  padding-left: 30px;
  position: relative; }
  .langbar:hover ul {
    display: block; }
  .langbar:hover span {
    border-bottom: 0; }
  .langbar span {
    display: block;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    padding-right: 20px;
    width: 50px;
    background: url("../images/icons/icon_arrow01.png") no-repeat right top 7px;
    padding-bottom: 5px;
    border-bottom: 1px solid #fff; }
  .langbar ul {
    display: none;
    position: absolute;
    top: 26px;
    right: 0;
    background-color: #fff;
    width: 80px;
    padding: 5px 0; }
    .langbar ul li {
      font-size: 14px;
      color: #000;
      padding: 10px; }
      .langbar ul li a {
        color: #000; }
        .langbar ul li a:hover, .langbar ul li a.selected {
          color: #ef9304; }

#header-anchor {
  position: absolute;
  top: 135px;
  left: 0; }

/*==========================================
Common
==========================================*/
.cover {
  position: relative;
  width: 100%;
  height: 100%;
  /*background:url('../images/cover_page.jpg') no-repeat;*/
  /*background-size:100%;*/ }
  .cover > img {
    display: block; }
  .cover .cover-start {
    position: absolute;
    top: calc(767vw / 19.2);
    left: calc(1124vw / 19.2);
    width: calc(250vw / 19.2);
    height: calc(65vw / 19.2);
    display: block;
    line-height: calc(65vw / 19.2);
    border-radius: 30px;
    text-align: center;
    background-color: #ef9304;
    font-size: calc(30vw / 19.2);
    color: #fff; }
    .cover .cover-start:hover {
      color: #ef9304;
      background-color: #fff; }
  .cover .cover-nav {
    position: absolute;
    top: calc(67vw / 19.2);
    right: calc(40vw / 19.2); }
  .cover .cover-home {
    display: block;
    line-height: 20px;
    padding-left: 30px;
    font-size: 16px;
    color: #fff;
    margin-right: 25px;
    background: url("../images/icons/icon_home01.png") no-repeat left center; }
    .cover .cover-home:hover {
      color: #ef9304; }
  .cover .langbar ul {
    right: 0; }

.swiper-slide img {
  width: 100%; }

.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 60px; }
  .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    opacity: 1 !important;
    width: 12px;
    height: 12px;
    margin: 0 8px;
    background-color: #fff;
    border: 1px solid #afafaf; }
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background-color: #ffe500;
      border-color: #000; }

.home-bg01 {
  height: calc(700vw / 19.2);
  background: url("../images/bg01.jpg") no-repeat center;
  background-size: cover;
  background-attachment: fixed; }
  .home-bg01 .wrap {
    height: 100%; }
  .home-bg01 h1 {
    font-size: calc(80vw / 19.2);
    line-height: calc(120vw / 19.2);
    font-weight: 900;
    color: #001e5f;
    font-family: 'Prata', 'Microsoft JhengHei'; }

.home-bg02 {
  background: url("../images/bg02.jpg") no-repeat center;
  background-size: cover; }

.home-bg03 {
  background: url("../images/bg03.jpg") no-repeat center;
  background-size: cover; }

#home-about {
  margin: 110px 0;
  width: 100%;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 85px 40px;
  text-align: center; }
  #home-about h1 {
    font-weight: 900; }
    #home-about h1 span {
      font-size: 22px;
      line-height: 36px;
      display: block; }

#home-product {
  position: relative;
  width: 100%;
  height: calc(800vw / 19.2);
  min-height: 275px;
  background: url("../images/bg03.jpg"); }
  #home-product #home-product-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; }
    #home-product #home-product-text h1 {
      font-size: calc(80vw / 19.2);
      line-height: calc(120vw / 19.2);
      color: #fff;
      text-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
      font-family: 'Prata', 'Microsoft JhengHei'; }
  #home-product.unstart .parallax-layer img {
    opacity: 0; }
  #home-product.unstart #product-layer-1 img {
    transform: translateY(100%); }
  #home-product.unstart #product-layer-2 img {
    transform: translateY(80%); }
  #home-product.unstart #product-layer-3 img {
    transform: translateY(60%); }
  #home-product.unstart #product-layer-4 img {
    transform: translateY(80%); }

.parallax-viewport {
  position: relative;
  /* relative, absolute, fixed */
  overflow: hidden;
  width: 100%;
  height: 100%; }

.parallax-layer {
  position: absolute; }
  .parallax-layer img {
    max-width: none;
    transition: 1s;
    -webkit-transition: 1s;
    width: 100%; }
  .parallax-layer#product-layer-1 {
    width: calc(2000vw / 19.2);
    height: calc(1100vw / 19.2);
    opacity: 0.6; }
  .parallax-layer#product-layer-2 {
    width: calc(2000vw / 19.2);
    height: calc(900vw / 19.2); }
  .parallax-layer#product-layer-3 {
    width: calc(1920vw / 19.2);
    height: calc(1000vw / 19.2); }
  .parallax-layer#product-layer-4 {
    width: calc(2120vw / 19.2);
    height: calc(900vw / 19.2); }

#home-product-logo {
  position: absolute;
  bottom: calc(40vw / 19.2);
  left: calc(40vw / 19.2);
  z-index: 99;
  width: calc(90vw / 19.2); }

.history-container {
  position: relative;
  width: 100%; }

.history-year {
  position: absolute;
  right: 5%;
  top: 40px;
  z-index: 5;
  border-right: 5px solid #fff;
  padding-right: 15px; }
  .history-year li {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px; }
    .history-year li:nth-last-child(1) {
      margin-bottom: 0; }
    .history-year li.ui-tabs-active a {
      color: #ffe500; }
    .history-year li a {
      color: #fff; }

.history-content {
  background-color: #212121;
  background-image: url("../images/icons/ajax-loader.gif");
  background-position: center;
  background-repeat: no-repeat; }
  .history-content > div {
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0;
    transform: translateY(-20%);
    -webkit-transform: translateY(-20%);
    transition: 0.4s;
    -webkit-transition: 0.4s; }
  .history-content .history-img {
    width: 100%;
    transform: translateX(-20%);
    -webkit-transform: translateX(-20%);
    opacity: 0;
    transition: 0.4s;
    -webkit-transition: 0.4s; }
  .history-content .show {
    transform: translateX(0);
    transform: translateY(0);
    -webkit-transform: translateY(0%);
    opacity: 1; }

.inner-section {
  padding: 60px 0;
  min-height: 600px; }

.about-section {
  padding: 30px 0;
  /*    .vimeo-video {
          width:100%;
          height:350px;
          margin-bottom:30px;
      }*/ }
  .about-section p {
    text-align: justify; }

.about-section {
  padding: 30px 0; }
  .about-section p, .about-section .list-disc li {
    font-size: 18px;
    line-height: 30px; }
  .about-section p {
    text-align: center; }

#about hr {
  border: 1px solid #c99f6d;
  margin: 20px 0 30px 0; }
#about article p {
  text-align: justify; }
#about article img {
  margin-bottom: 20px; }
#about .vimeo-video {
  width: 100%;
  height: 350px;
  margin-bottom: 20px; }

.news-list li {
  width: 100%;
  overflow: hidden;
  padding: 30px 0;
  border-bottom: 1px solid #f0f0f0; }
  .news-list li:nth-child(1) {
    padding-top: 0; }
  .news-list li .img-thumb {
    /*width:360px;*/
    float: left; }
  .news-list li figcaption {
    float: right;
    /*width:calc(100% - 360px);*/
    /*padding-left:30px;*/ }

.news-date {
  font-size: 16px;
  line-height: 24px;
  font-style: italic;
  padding-left: 25px;
  background: url("../images/icons/icon_calendar01.png") no-repeat left center; }

#contact {
  /*padding-bottom:40px;*/ }

.contact-list {
  /*margin-top:40px;*/
  overflow: hidden; }
  .contact-list li {
    float: left;
    width: calc(100% / 3);
    padding: 0 10px;
    overflow: hidden;
    margin-bottom: 20px;
    /*padding-top:130px;*/
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center; }
    .contact-list li > img {
      width: 240px; }
    .contact-list li .title {
      display: block;
      font-size: 18px;
      line-height: 30px;
      color: #091c87;
      text-decoration: underline;
      font-weight: 600; }
    .contact-list li p {
      margin: 5px 0;
      font-size: 18px;
      line-height: 30px; }
      .contact-list li p a {
        text-decoration: none; }
    .contact-list li .dot {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 100%;
      background-color: #4d66f4;
      margin: 10px auto; }

.paging-nav {
  margin-top: 25px;
  overflow: hidden; }
  .paging-nav li {
    float: left;
    display: block;
    width: 26px;
    line-height: 26px;
    margin-right: 5px;
    text-align: center;
    font-size: 18px;
    color: #000;
    border-bottom: 5px solid transparent; }
    .paging-nav li:nth-last-child(1) {
      margin-right: 0; }
    .paging-nav li a {
      display: block;
      color: #000;
      height: 34px;
      line-height: 26px; }
      .paging-nav li a:hover, .paging-nav li a.selected {
        color: #ef9303;
        border-bottom: 3px solid #ef9303; }
  .paging-nav .paging-prev, .paging-nav .paging-next {
    width: 26px;
    height: 26px;
    background: url("../images/icons/btn_arrow03.png");
    border: 0 !important;
    padding: 0; }
  .paging-nav .paging-prev {
    background-position: left top; }
    .paging-nav .paging-prev:hover {
      background-position: left bottom; }
  .paging-nav .paging-next {
    background-position: right top; }
    .paging-nav .paging-next:hover {
      background-position: right bottom; }

.sidebar {
  width: 260px;
  float: left; }
  .sidebar ul li {
    padding: 5px 0; }
    .sidebar ul li a {
      font-size: 16px;
      line-height: 24px;
      color: #000; }
      .sidebar ul li a:hover {
        color: #ef9303; }
    .sidebar ul li:nth-last-child(1) {
      /*padding-bottom:0;*/
      /*border:0;*/ }
  .sidebar ul > li {
    border-bottom: 1px solid #ccc;
    padding: 10px 0; }
    .sidebar ul > li > a {
      font-weight: 600;
      color: #001e5f; }
  .sidebar ul ol li {
    padding-left: 10px;
    padding-right: 10px; }

.inner-page {
  width: calc(100% - 260px);
  float: right;
  padding-left: 30px;
  border-left: 1px solid #ccc; }

.product-list {
  width: 100%;
  overflow: hidden;
  margin-top: 30px; }
  .product-list li {
    float: left;
    width: calc( (100% - 60px) / 3);
    margin: 0 30px 30px 0;
    text-align: center; }
    .product-list li:nth-child(3n) {
      margin-right: 0; }
    .product-list li .img-thumb img {
      transition: 0.4s;
      -webkit-transition: 0.4s; }
      .product-list li .img-thumb img:hover {
        transform: scale(1.1);
        -webkit-transform: scale(1.1); }

#product-detail h1 {
  font-size: 32px; }

#product-detail .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0px; }
#product-detail .swiper-button-prev, #product-detail .swiper-button-next {
  top: calc(50% - 65px);
  width: 70px;
  height: 130px;
  background: url(../images/icons/product_btn_arrow01.png); }
#product-detail .swiper-button-prev {
  left: 0;
  background-position: top left; }
  #product-detail .swiper-button-prev:hover {
    background-position: bottom left; }
#product-detail .swiper-button-next {
  right: 0;
  background-position: top right; }
  #product-detail .swiper-button-next:hover {
    background-position: bottom right; }

#login-table {
  width: calc(100% - 450px);
  float: right;
  max-width: 100%;
  margin-right: 140px;
  margin-top: 60px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); }
  #login-table .col-xl-6.fl-left img {
    display: block; }
  #login-table .col-xl-6.col-padding {
    padding: 25px; }
  #login-table .table-tr {
    margin-bottom: 10px; }
    #login-table .table-tr div {
      font-size: 16px;
      line-height: 24px;
      width: 100%;
      padding: 0 0 5px 0; }
      #login-table .table-tr div:nth-of-type(1) {
        font-weight: 600;
        color: #001e5f; }
    #login-table .table-tr input {
      width: 100%;
      height: 32px; }

#about-top {
  width: 100%;
  position: relative;
  padding-top: 30px;
  margin-bottom: 30px; }
  #about-top:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 125px);
    background-color: #f9c406; }
  #about-top h1 {
    font-weight: 900;
    margin-bottom: 30px; }
    #about-top h1 span {
      font-size: 26px;
      font-weight: 600; }
  #about-top .logo {
    width: 250px;
    margin: 0 auto; }

.first-paragraph {
  font-size: 18px;
  line-height: 30px; }
  .first-paragraph:first-letter {
    font-size: 48px;
    line-height: 60px;
    font-weight: 600;
    color: #001e5f; }

.bold-paragraph:first-letter {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  /*color:#001e5f;*/ }

.text-box p {
  margin: 0 auto 30px auto;
  max-width: 1000px;
  text-align: center; }
.text-box h2 {
  font-weight: 600;
  text-align: center;
  color: #00058a; }

/*.about-section {
    padding:30px 0;
    p, .list-disc li {
        font-size:18px;
        line-height:30px;        
    }
    p {
        text-align:center;
    }
}*/
.about-brand {
  text-align: center;
  display: inline-flex;
  display: -webkit-inline-flex;
  margin-bottom: 0px; }
  .about-brand li {
    display: inline-block;
    margin: 0 20px; }
    .about-brand li > img {
      width: 100px; }
    .about-brand li p {
      font-size: 16px;
      line-height: 24px;
      text-align: center; }

.about-circle {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  padding: 55px;
  border-radius: 100%;
  background-color: #5960b0; }
  .about-circle p {
    color: #fff;
    text-align: center;
    margin: 0; }

.about-strength {
  width: 100%;
  overflow: hidden; }
  .about-strength li {
    width: calc(100% / 3);
    padding: 0 20px; }
    .about-strength li .img-thumb {
      margin-bottom: 24px;
      text-align: center; }
      .about-strength li .img-thumb > img {
        width: auto;
        height: 260px;
        margin: 0 auto; }
    .about-strength li h3 {
      font-size: 20px;
      line-height: 30px;
      font-weight: 600;
      color: #00058a;
      margin-bottom: 10px; }

#contact #about-top:before {
  background-color: #fb3e06; }

#contact-info {
  position: relative;
  /*padding-bottom:40px;*/
  /*    &:before {
          left:0;
          background-image:url('../images/contact01.png');
          background-position:bottom left;
      }
      &:after {
          right:0;
          background-image:url('../images/contact02.png');
          background-position:bottom right;
      }*/ }
  #contact-info:before, #contact-info:after {
    content: "";
    position: absolute;
    bottom: 100px;
    width: 600px;
    height: 370px;
    max-width: 48%;
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.1; }
  #contact-info .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 150px);
    z-index: -1;
    background: url("../images/bg_contact.jpg") no-repeat top left;
    background-size: 100%;
    background-color: #eaf8fd; }
  #contact-info .bg-bottom {
    width: 100%;
    height: 80px;
    background-color: #cbd4ff; }

#news-container {
  background-color: #fff;
  padding: 0 40px; }

#product-top {
  margin-bottom: 40px; }

#news {
  background: url("../images/news_bg.jpg") no-repeat;
  background-size: cover; }

#login {
  background: url("../images/login_bg.jpg") no-repeat;
  background-size: cover; }

#login-container {
  position: relative;
  background: url("../images/login_box_bg.png") no-repeat left top;
  background-size: 100%;
  width: 100%;
  overflow: hidden;
  min-height: 638px; }

/* mobile */
.mobile-icon {
  display: none;
  position: absolute;
  top: 12px;
  right: 20px;
  height: 36px;
  width: 36px;
  /*background-color: #fff;*/
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 5px;
  z-index: 999; }
  .mobile-icon span {
    margin: 0 auto;
    display: block;
    width: 17px;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
    transition: 0.5s;
    -webkit-transition: 0.5s; }
    .mobile-icon span:nth-last-of-type(1) {
      margin-bottom: 0; }
  .mobile-icon.opened {
    padding: 3px 8px; }
    .mobile-icon.opened span:nth-of-type(1) {
      transform: translate(0px, 13px) rotate(-45deg) scalex(1.3);
      -webkit-transform: translate(0px, 13px) rotate(-45deg) scalex(1.3);
      margin-bottom: 0; }
    .mobile-icon.opened span:nth-of-type(2) {
      display: none; }
    .mobile-icon.opened span:nth-last-of-type(1) {
      -webkit-transform: translate(0px, 11px) rotate(45deg) scalex(1.3);
      transform: translate(0px, 11px) rotate(45deg) scalex(1.3); }

/*==========================================
Footer
==========================================*/
footer {
  position: relative;
  text-align: center; }
  footer #footer-top {
    width: 100%;
    padding: 78px 0;
    background-color: #212121; }
    footer #footer-top #footer-nav a {
      display: inline-block;
      margin: 0 45px;
      font-size: 16px;
      line-height: 24px;
      color: #fff; }
      footer #footer-top #footer-nav a:hover {
        color: #ef9303; }
  footer #footer-bottom {
    background-color: #000;
    padding: 28px 0; }
    footer #footer-bottom p {
      font-size: 13px;
      line-height: 21px;
      color: #fff; }
      footer #footer-bottom p a {
        color: #fff; }

.social-nav li {
  float: left;
  margin-right: 20px; }
  .social-nav li a {
    display: block;
    width: 21px;
    height: 21px;
    background: url("../images/icons/icon_social.png") no-repeat; }
  .social-nav li:nth-child(1) a {
    background-position: 0 0; }
    .social-nav li:nth-child(1) a:hover {
      background-position: 0 -21px; }
  .social-nav li:nth-child(2) a {
    background-position: -21px 0; }
    .social-nav li:nth-child(2) a:hover {
      background-position: -21px -21px; }

/*Top btn*/
#back-top {
  position: absolute;
  top: -45px;
  left: 0;
  width: 100%;
  display: block;
  z-index: 999;
  text-align: center; }
  #back-top a {
    position: relative;
    display: inline-block;
    width: 78px;
    height: 90px;
    overflow: hidden;
    font-size: 14px;
    padding-top: 56px;
    color: #ef9303; }
    #back-top a:before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: url("../images/icons/btn_top_bg.png") no-repeat left top; }
    #back-top a:after {
      content: "";
      position: absolute;
      top: 18px;
      left: 26px;
      width: 24px;
      height: 31px;
      background: url("../images/icons/btn_top_arrow.png") no-repeat left top; }
    #back-top a:hover {
      transform: scale(1.05); }

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

.history-container-text{
    position: absolute;
    top: calc((100% - 66px) / 2);
    left: calc((100% - 50px) / 2);
    color: #fff;
}
.history-container-text p{
    color: #fff;
}