@charset "UTF-8";
html,
body {
  width: 100%;
  min-height: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
  text-align: left;
  overflow: visible;
  font-size: 15px;
  color: #000000;
  background-color: #fff;
  background-repeat: repeat;
  line-height: 1.5;
  font-family: 'Arial', 'Microsoft JhengHei' , '微軟正黑體' , sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  html *,
  body * {
    outline: none; }

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .pace:after {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(211, 211, 211, 0.8);
    z-index: 99999;
    display: block; }

.pace-inactive {
  display: none; }

.pace .pace-progress {
  background: #D3D3D3;
  position: fixed;
  z-index: 200000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px; }

.animate {
  -webkit-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease; }

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

.text-right {
  text-align: right !important; }

.text-left {
  text-align: left !important; }

.clearfix:after, .clearfix:before {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

p {
  margin-bottom: 5px; }

/*共用屬性*/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

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

a {
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  text-decoration: none;
  color: inherit; }
  a:active, a:hover {
    outline: none;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease; }

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto; }

/*泛用表格*/
.t {
  display: table; }
  .t > .t-row {
    display: table-row; }
    .t > .t-row > .t-cell {
      display: table-cell;
      vertical-align: middle;
      border-collapse: collapse;
      margin: 0;
      padding: 0; }

/*定義區塊*/
.container {
  margin: auto;
  position: relative;
  z-index: 100;
  width: 100%;
  max-width: 100%; }
  .container.w2 {
    width: 1366px; }
  .container.w3 {
    width: 1180px; }

.row {
  margin-left: -15px;
  margin-right: -15px; }

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  position: relative;
  min-height: 1px;
  float: left;
  padding-left: 15px;
  padding-right: 15px; }

.col-12 {
  width: 100%; }

.col-11 {
  width: 91.66666667%; }

.col-10 {
  width: 83.33333333%; }

.col-9 {
  width: 75%; }

.col-8 {
  width: 66.66666667%; }

.col-7 {
  width: 58.33333333%; }

.col-6 {
  width: 50%; }

.col-5 {
  width: 41.66666667%; }

.col-4 {
  width: 33.33333333%; }

.col-3 {
  width: 25%; }

.col-2 {
  width: 16.66666667%; }

.col-1 {
  width: 8.33333333%; }

.pic {
  position: relative;
  font-size: 0;
  width: 100%;
  height: 0;
  display: block;
  padding-bottom: 100%; }
  .pic > span {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0; }
    .pic > span:before {
      content: ' ';
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle; }
    .pic > span > img, .pic > span > iframe {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      display: inline-block;
      vertical-align: middle; }
    .pic > span > iframe {
      width: 100%;
      height: 100%; }

.cf:after,
.row:after,
dl:after {
  display: block;
  height: 0;
  clear: both;
  content: "";
  visibility: hidden; }

.bg_img {
  background-position: 50% 50%;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat; }

.editor {
  word-break: break-all;
  /* Begin bidirectionality settings (do not change) */ }
  .editor i {
    font-style: italic; }
  .editor em, .editor b, .editor strong {
    font-weight: bold; }
  .editor img {
    height: auto !important; }
  .editor html, .editor address, .editor blockquote, .editor body, .editor dd, .editor div, .editor dl, .editor dt, .editor fieldset, .editor form,
  .editor frame, .editor frameset, .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6, .editor noframes, .editor ol, .editor p, .editor ul, .editor center,
  .editor dir, .editor hr, .editor menu, .editor pre {
    display: block; }
  .editor li {
    display: list-item; }
  .editor head {
    display: none; }
  .editor table {
    display: table; }
  .editor tr {
    display: table-row; }
  .editor thead {
    display: table-header-group; }
  .editor tbody {
    display: table-row-group; }
  .editor tfoot {
    display: table-footer-group; }
  .editor col {
    display: table-column; }
  .editor colgroup {
    display: table-column-group; }
  .editor td, .editor th {
    display: table-cell; }
  .editor caption {
    display: table-caption; }
  .editor th {
    font-weight: bolder;
    text-align: center; }
  .editor caption {
    text-align: center; }
  .editor body {
    margin: 8px; }
  .editor h1 {
    font-size: 2em;
    margin: .67em 0; }
  .editor h2 {
    font-size: 1.5em;
    margin: .75em 0; }
  .editor h3 {
    font-size: 1.17em;
    margin: .83em 0; }
  .editor h4, .editor p, .editor blockquote, .editor ul, .editor fieldset, .editor form, .editor ol, .editor dl, .editor dir, .editor menu {
    margin: 1.12em 0; }
  .editor h5 {
    font-size: .83em;
    margin: 1.5em 0; }
  .editor h6 {
    font-size: .75em;
    margin: 1.67em 0; }
  .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6, .editor b, .editor strong {
    font-weight: bolder; }
  .editor blockquote {
    margin-left: 40px;
    margin-right: 40px; }
  .editor i, .editor cite, .editor em, .editor var, .editor address {
    font-style: italic; }
  .editor pre, .editor tt, .editor code, .editor kbd, .editor samp {
    font-family: monospace; }
  .editor pre {
    white-space: pre; }
  .editor button, .editor textarea, .editor input, .editor select {
    display: inline-block; }
  .editor big {
    font-size: 1.17em; }
  .editor small, .editor sub, .editor sup {
    font-size: .83em; }
  .editor sub {
    vertical-align: sub; }
  .editor sup {
    vertical-align: super; }
  .editor table {
    border-spacing: 2px; }
  .editor thead, .editor tbody, .editor tfoot {
    vertical-align: middle; }
  .editor td, .editor th {
    vertical-align: inherit; }
  .editor s, .editor strike, .editor del {
    text-decoration: line-through; }
  .editor hr {
    border: 1px inset; }
  .editor ol, .editor ul, .editor dir, .editor menu, .editor dd {
    margin-left: 40px; }
  .editor ol {
    list-style-type: decimal; }
  .editor ol ul, .editor ul ol, .editor ul ul, .editor ol ol {
    margin-top: 0;
    margin-bottom: 0; }
  .editor u, .editor ins {
    text-decoration: underline; }
  .editor br:before {
    content: "\A"; }
  .editor :before, .editor :after {
    white-space: pre-line; }
  .editor center {
    text-align: center; }
  .editor :link, .editor :visited {
    text-decoration: underline; }
  .editor :focus {
    outline: thin dotted invert; }
  .editor BDO[DIR="ltr"] {
    direction: ltr;
    unicode-bidi: bidi-override; }
  .editor BDO[DIR="rtl"] {
    direction: rtl;
    unicode-bidi: bidi-override; }
  .editor *[DIR="ltr"] {
    direction: ltr;
    unicode-bidi: embed; }
  .editor *[DIR="rtl"] {
    direction: rtl;
    unicode-bidi: embed; }
  @media print {
    .editor h1 {
      page-break-before: always; }
    .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6 {
      page-break-after: avoid; }
    .editor ul, .editor ol, .editor dl {
      page-break-before: avoid; } }

.txt-left {
  text-align: left; }

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

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

.bold {
  font-weight: bold; }

/*select*/
.select {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 45px;
  background-color: #EEEEEE; }

.select select {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  border-radius: 0;
  padding-left: 1rem;
  font-size: 1rem;
  z-index: 200; }

.select:after {
  content: '\f107';
  font-family: 'Font Awesome 5 Pro';
  font-size: 1rem;
  line-height: 45px;
  position: absolute;
  z-index: 100;
  right: 1rem;
  top: 0; }

header {
  position: fixed;
  width: 100%;
  z-index: 9999;
  top: 0; }
  header.move {
    background: #59898D; }
  header .nav-bar {
    padding: 0; }
    header .nav-bar #logo, header .nav-bar nav {
      display: inline-block;
      vertical-align: middle;
      margin-left: 0px;
      margin-right: -3px; }
    header .nav-bar #logo {
      width: calc( 100% - 670px);
      font-size: 40px;
      color: #FFFFFF;
      padding-left: 13%; }
    header .nav-bar nav {
      width: 670px;
      background: #D3D3D3; }
      header .nav-bar nav ul {
        padding: 0;
        margin: 0; }
        header .nav-bar nav ul li {
          list-style: none;
          margin: 0;
          padding: 30px 0;
          display: block;
          float: left;
          width: calc( 100% / 6);
          height: 80px;
          text-align: center;
          font-size: 15px;
          font-weight: bold;
          line-height: 20px;
          background: #59898D; }
          header .nav-bar nav ul li.sep-line, header .nav-bar nav ul li.contact {
            background: #D3D3D3;
            padding: 0; }
            header .nav-bar nav ul li.sep-line div, header .nav-bar nav ul li.contact div {
              padding: 7px; }
            header .nav-bar nav ul li.sep-line i, header .nav-bar nav ul li.contact i {
              font-size: 30px;
              display: block;
              margin: 5px auto; }
            header .nav-bar nav ul li.sep-line a, header .nav-bar nav ul li.contact a {
              color: #59898D; }
          header .nav-bar nav ul li.contact {
            width: calc( (100% / 6) + ( 100% / 6 - 67px )); }
          header .nav-bar nav ul li.sep-line {
            width: 0;
            height: 0;
            border-left: 67px #59898D solid;
            border-top: 80px #D3D3D3 solid; }
          header .nav-bar nav ul li a {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
            color: #FFFFFF; }
            header .nav-bar nav ul li a:hover, header .nav-bar nav ul li a.active {
              color: #222222; }

footer #text-area {
  color: #FFFFFF;
  background: #59898D;
  padding: 40px 0 60px; }
  footer #text-area ul, footer #text-area li {
    padding: 0;
    margin: 0;
    display: block;
    list-style: none; }
  footer #text-area .left, footer #text-area .right {
    float: left; }
  footer #text-area .left {
    width: 490px; }
    footer #text-area .left .title {
      font-size: 30px;
      font-weight: bold;
      padding-bottom: 50px; }
      footer #text-area .left .title span {
        color: rgba(255, 255, 255, 0.3);
        position: relative;
        top: 25px; }
    footer #text-area .left .tel {
      font-family: 'Roboto';
      font-size: 48px;
      font-weight: bold; }
  footer #text-area .right {
    width: calc(100% - 490px);
    padding: 30px 0 0 0; }
    footer #text-area .right .contact-info {
      font-size: 15px;
      font-weight: bold;
      padding: 20px 0; }
      footer #text-area .right .contact-info span {
        display: inline-block;
        margin: 0 10px 0 0; }
        footer #text-area .right .contact-info span i {
          font-weight: normal; }
    footer #text-area .right .welcome {
      border: 2px #FFFFFF solid;
      padding: 20px;
      font-size: 18px;
      line-height: 30px;
      position: relative; }
      footer #text-area .right .welcome i {
        font-size: 30px;
        display: inline-block;
        vertical-align: middle; }
      footer #text-area .right .welcome div {
        position: absolute;
        right: 40px;
        top: 20px; }

footer #copyright {
  color: #FFFFFF;
  background: #222222;
  padding: 20px 5px; }

.mobile-only {
  display: none; }

.pages {
  padding: 40px 0 60px;
  text-align: center; }
  .pages a.page {
    display: inline-block;
    width: 28px;
    line-height: 28px;
    border-radius: 50%;
    text-align: center;
    color: #222222; }
    .pages a.page.active, .pages a.page:hover {
      color: #FFFFFF;
      background: #59898D; }

.btn {
  width: 220px;
  display: inline-block;
  cursor: pointer;
  color: #59898D;
  line-height: 35px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  font-style: italic;
  font-family: 'Roboto';
  position: relative; }
  .btn div {
    display: inline-block;
    background: #FFFFFF;
    padding: 0 20px;
    position: relative;
    z-index: 10; }
  .btn:after {
    content: ' ';
    display: block;
    position: absolute;
    bottom: 14px;
    height: 2px;
    width: 100%;
    background: #59898D; }
  .btn.white {
    color: #FFFFFF; }
    .btn.white div {
      background: #59898D; }
    .btn.white:after {
      background: #FFFFFF;
      -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }

#gotop {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 3000;
  cursor: pointer;
  border-radius: 50%;
  border: 1px #D3D3D3 solid;
  color: #D3D3D3;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 25px;
  text-align: center; }

#index main #banner {
  position: relative;
  z-index: 10;
  width: 100%;
  overflow: hidden; }
  #index main #banner .slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 10; }
  #index main #banner .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; }
  #index main #banner .swiper-pagination-bullet {
    background: #FFFFFF; }
  #index main #banner .swiper-pagination-bullet-active {
    background: none;
    border: #FFFFFF 1px solid; }
  #index main #banner a.bg-img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center; }
    #index main #banner a.bg-img .txt-area {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 75%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: #fff;
      text-align: center;
      text-shadow: 2px 2px 5px #000;
      line-height: 1.5;
      font-weight: bold; }
      #index main #banner a.bg-img .txt-area .title {
        font-size: 50px;
        padding: 5px 0 20px; }
      #index main #banner a.bg-img .txt-area .title-sub {
        font-size: 20px; }
        #index main #banner a.bg-img .txt-area .title-sub div {
          display: inline-block;
          padding: 10px 20px;
          width: auto;
          background: rgba(89, 137, 141, 0.7); }
      #index main #banner a.bg-img .txt-area .border {
        width: 400px;
        height: 30px;
        border: 5px #FFFFFF solid;
        margin: 10px auto; }
        #index main #banner a.bg-img .txt-area .border.top {
          border-bottom: none; }
        #index main #banner a.bg-img .txt-area .border.bottom {
          margin-top: 20px;
          border-top: none;
          -webkit-box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
          box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3); }

#index main ul, #index main li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block; }

#index main h1.title {
  font-size: 40px;
  line-height: 1.5; }
  #index main h1.title span {
    font-size: 25px;
    font-family: '微軟正黑體'; }

#index main .service.rent {
  padding: 40px 0; }
  #index main .service.rent h1 {
    padding: 20px 0 40px;
    color: #222222; }
    #index main .service.rent h1 span {
      display: block;
      color: rgba(211, 211, 211, 0.9); }
  #index main .service.rent li {
    color: #222222; }
    #index main .service.rent li .text {
      padding: 20px 0;
      font-size: 30px;
      font-weight: bold; }
      #index main .service.rent li .text span {
        font-size: 15px;
        padding: 10px 0;
        font-weight: normal;
        display: block; }

#index main .about {
  background-color: #59898D;
  background-image: url(../images/index/about_bg.png);
  background-position: left top;
  background-size: auto 100%;
  background-repeat: no-repeat;
  padding: 40px 0;
  color: #FFFFFF; }
  #index main .about .text-area {
    display: block;
    float: right;
    width: 710px;
    max-width: 100%;
    font-size: 15px;
    line-height: 28px;
    padding: 50px 0 115px; }
    #index main .about .text-area h1.title {
      font-size: 30px;
      padding: 0px 0 20px; }
      #index main .about .text-area h1.title span {
        position: relative;
        top: 22px;
        color: rgba(255, 255, 255, 0.3); }

#index main .service.coop {
  background: #D3D3D3;
  padding: 40px 0 60px; }
  #index main .service.coop h1.title {
    color: #FFFFFF;
    font-size: 40px;
    text-shadow: rgba(0, 0, 0, 0.3) 0.1em 0.1em 0.2em; }
    #index main .service.coop h1.title span {
      display: block;
      font-size: 25px;
      color: #59898D;
      text-shadow: none; }
  #index main .service.coop .row {
    margin: 0 -20px; }
    #index main .service.coop .row li {
      padding: 0 5px;
      color: #FFFFFF;
      position: relative; }
      #index main .service.coop .row li .text {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 45%;
        font-size: 30px;
        font-weight: bold;
        line-height: 1.75; }
        #index main .service.coop .row li .text img {
          display: block;
          margin: 0 auto 3px; }
        #index main .service.coop .row li .text span {
          display: block;
          font-size: 15px;
          font-weight: normal; }

#index main .news {
  padding: 40px 0; }
  #index main .news h1.title {
    color: #59898D;
    font-size: 30px;
    font-weight: bold; }
    #index main .news h1.title span {
      position: relative;
      top: 20px;
      color: rgba(89, 137, 141, 0.3); }
  #index main .news .list-row {
    padding: 40px 0; }
    #index main .news .list-row .n-item {
      border-bottom: 1px #D3D3D3 solid;
      padding: 20px 0; }
      #index main .news .list-row .n-item .txt, #index main .news .list-row .n-item .button {
        display: inline-block;
        margin: 0 -2px;
        vertical-align: middle; }
      #index main .news .list-row .n-item .txt {
        width: calc( 100% - 180px); }
      #index main .news .list-row .n-item .button {
        margin-left: -2px;
        width: 180px; }
      #index main .news .list-row .n-item .name {
        font-size: 18px;
        font-weight: bold;
        color: #222222; }
        #index main .news .list-row .n-item .name span {
          color: #59898D;
          font-size: 15px;
          display: inline-block;
          font-weight: normal;
          padding-right: 20px; }
      #index main .news .list-row .n-item .info {
        font-size: 15px;
        padding: 10px 0; }
      #index main .news .list-row .n-item .button {
        font-family: 'Roboto';
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
        color: #59898D; }

#index main .works {
  background: #D3D3D3;
  padding: 40px 0; }
  #index main .works h1.title {
    color: #59898D;
    font-size: 30px;
    font-weight: bold; }
    #index main .works h1.title span {
      position: relative;
      top: 20px;
      color: rgba(89, 137, 141, 0.3); }
  #index main .works .btn div {
    background: #D3D3D3; }
  #index main .works .slider {
    position: relative;
    z-index: 10;
    overflow: hidden;
    width: calc( 100% + 20px);
    height: 350px;
    padding: 0 40px;
    position: relative;
    left: -20px; }
  #index main .works .swiper-button-next, #index main .works .swiper-button-prev {
    width: 36px;
    height: 36px;
    color: #000000;
    background: #FFFFFF;
    color: #59898D;
    padding: 8px;
    top: 45%; }
    #index main .works .swiper-button-next:after, #index main .works .swiper-button-prev:after {
      font-size: 20px; }
  #index main .works .swiper-button-next {
    right: 30px; }
  #index main .works .swiper-button-prev {
    left: 30px; }
  #index main .works .swiper-slide {
    text-align: center;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; }
    #index main .works .swiper-slide > a {
      display: block;
      width: 98%;
      height: auto;
      opacity: 0.5; }
      #index main .works .swiper-slide > a:hover {
        -webkit-transition: all;
        -o-transition: all;
        transition: all;
        -webkit-transform: 0.5s linear;
        -ms-transform: 0.5s linear;
        transform: 0.5s linear;
        opacity: 1; }
    #index main .works .swiper-slide .pic {
      padding-bottom: 67.5%;
      background-size: cover;
      background-position: 50% 50%; }
    #index main .works .swiper-slide .class, #index main .works .swiper-slide .name {
      padding: 2px 10px; }
    #index main .works .swiper-slide div.class {
      font-size: 15px;
      color: #59898D; }
    #index main .works .swiper-slide div.name {
      display: block;
      font-size: 18px;
      font-weight: bold;
      color: #222222; }

#about main ul, #about main li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block; }

#about main h1.title {
  font-size: 40px;
  line-height: 1.5; }
  #about main h1.title span {
    font-size: 25px;
    font-family: '微軟正黑體'; }

#about main .about {
  background-color: #D3D3D3;
  color: #FFFFFF; }
  #about main .about .container {
    padding: 40px 0;
    background-image: url(../images/about/bg.png);
    background-position: right;
    background-size: auto 100%;
    background-repeat: no-repeat; }
  #about main .about .row .left, #about main .about .row .right {
    display: block;
    float: left; }
  #about main .about .row .left {
    width: 480px; }
  #about main .about .row .right {
    width: calc(100% - 480px); }
  #about main .about .txt {
    background: #59898D;
    margin-top: 100px;
    padding: 40px 120px 40px 75px;
    font-size: 15px;
    line-height: 2; }
    #about main .about .txt h1.title {
      font-size: 30px;
      padding: 0px 0 0px;
      margin-top: 0; }
      #about main .about .txt h1.title span {
        position: relative;
        top: 20px;
        color: rgba(255, 255, 255, 0.3); }

#about main .works {
  background: #FFFFFF;
  padding: 40px 0; }
  #about main .works h1.title {
    color: #59898D;
    font-size: 30px;
    font-weight: bold; }
    #about main .works h1.title span {
      position: relative;
      top: 20px;
      color: rgba(89, 137, 141, 0.3); }
  #about main .works .slider {
    position: relative;
    z-index: 10;
    overflow: hidden;
    width: calc( 100% + 20px);
    height: 350px;
    padding: 0 40px;
    position: relative;
    left: -20px; }
  #about main .works .swiper-button-next, #about main .works .swiper-button-prev {
    width: 36px;
    height: 36px;
    color: #000000;
    background: #FFFFFF;
    color: #59898D;
    padding: 8px;
    top: 45%; }
    #about main .works .swiper-button-next:after, #about main .works .swiper-button-prev:after {
      font-size: 20px; }
  #about main .works .swiper-button-next {
    right: 30px; }
  #about main .works .swiper-button-prev {
    left: 30px; }
  #about main .works .swiper-slide {
    text-align: center;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; }
    #about main .works .swiper-slide > a {
      display: block;
      width: 98%;
      height: auto;
      opacity: 0.5; }
      #about main .works .swiper-slide > a:hover {
        -webkit-transition: all;
        -o-transition: all;
        transition: all;
        -webkit-transform: 0.5s linear;
        -ms-transform: 0.5s linear;
        transform: 0.5s linear;
        opacity: 1; }
    #about main .works .swiper-slide .pic {
      padding-bottom: 67.5%;
      background-size: cover;
      background-position: 50% 50%; }
    #about main .works .swiper-slide .class, #about main .works .swiper-slide .name {
      padding: 2px 10px; }
    #about main .works .swiper-slide div.class {
      font-size: 15px;
      color: #59898D; }
    #about main .works .swiper-slide div.name {
      display: block;
      font-size: 18px;
      font-weight: bold;
      color: #222222; }

#service main h1.title {
  font-size: 40px;
  line-height: 1.5; }
  #service main h1.title span {
    display: block;
    font-size: 25px;
    font-family: '微軟正黑體'; }

#service main ul, #service main li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none; }

#service main .rent {
  padding: 40px 0;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); }
  #service main .rent h1.title span {
    display: block;
    opacity: 0.9;
    color: #D3D3D3; }
  #service main .rent .line-part {
    padding: 20px 0 0;
    margin-bottom: 40px;
    text-align: center;
    border-bottom: 2px #59898D solid;
    text-align: center; }
    #service main .rent .line-part li {
      position: relative; }
    #service main .rent .line-part div {
      font-size: 30px;
      font-weight: bold;
      padding: 10px 0 0;
      text-align: center; }
    #service main .rent .line-part img {
      position: relative;
      top: 12px; }
  #service main .rent .img-part img, #service main .rent .img-part div {
    display: block;
    max-width: 312px;
    margin: auto; }
  #service main .rent .img-part div {
    padding: 10px 0;
    font-size: 15px;
    line-height: 1.75;
    color: #222222; }
    #service main .rent .img-part div.title {
      font-size: 30px;
      font-weight: bold;
      padding: 10px 0 0;
      text-align: center;
      display: none; }

#service main .coop {
  background: #D3D3D3;
  padding: 40px 0 60px; }
  #service main .coop h1.title {
    color: #FFFFFF;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.16); }
    #service main .coop h1.title span {
      color: #59898D; }
  #service main .coop ul {
    width: 888px;
    max-width: 98%;
    margin: auto; }
    #service main .coop ul li {
      padding: 20px 0; }
      #service main .coop ul li img, #service main .coop ul li div {
        display: inline-block;
        vertical-align: middle;
        margin: 0 -2px; }
      #service main .coop ul li img {
        width: 64px; }
      #service main .coop ul li div {
        width: calc(100% - 64px);
        padding-left: 30px;
        font-size: 30px;
        font-weight: bold; }
        #service main .coop ul li div span {
          display: block;
          font-size: 15px;
          font-weight: normal; }

#service main .photos {
  background: #D3D3D3; }
  #service main .photos .row {
    margin: 0 -10px; }
  #service main .photos img {
    width: 98%;
    display: block;
    margin: auto; }

#news main {
  background: #D3D3D3; }
  #news main h1.title {
    color: #FFFFFF;
    font-size: 40px;
    font-weight: bold;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }
    #news main h1.title span {
      font-size: 25px;
      display: block;
      color: #59898D;
      text-shadow: none; }
  #news main .container {
    padding: 40px 0; }
  #news main .list-row {
    padding: 40px 0; }
    #news main .list-row .n-item {
      border-bottom: 1px #FFFFFF solid;
      padding: 20px 0; }
      #news main .list-row .n-item .txt, #news main .list-row .n-item .button {
        display: inline-block;
        margin: 0 -2px;
        vertical-align: middle; }
      #news main .list-row .n-item .txt {
        width: calc( 100% - 180px); }
      #news main .list-row .n-item .button {
        margin-left: -2px;
        width: 180px; }
      #news main .list-row .n-item .name {
        font-size: 18px;
        font-weight: bold;
        color: #222222; }
        #news main .list-row .n-item .name span {
          color: #59898D;
          font-size: 15px;
          display: inline-block;
          font-weight: normal;
          padding-right: 20px; }
      #news main .list-row .n-item .info {
        font-size: 15px;
        padding: 10px 0; }
      #news main .list-row .n-item .button {
        font-family: 'Roboto';
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
        color: #59898D; }
  #news main .detail .name {
    font-size: 18px;
    font-weight: bold;
    color: #222222; }
  #news main .detail .date {
    color: #59898D;
    font-size: 15px;
    display: inline-block;
    font-weight: normal;
    padding-right: 20px; }
  #news main .detail .editor {
    margin: 20px auto 40px;
    padding: 20px 0;
    border-top: 1px #FFFFFF solid; }
  #news main .detail .btn div {
    background: #D3D3D3;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }

#product main {
  background: #D3D3D3; }
  #product main h1.title {
    color: #FFFFFF;
    font-size: 40px;
    font-weight: bold;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }
    #product main h1.title span {
      font-size: 25px;
      display: block;
      color: #59898D;
      text-shadow: none; }
  #product main .container {
    padding: 40px 0; }
  #product main .main-part {
    padding: 40px 0; }
  #product main .left_class, #product main .right {
    display: block;
    float: left; }
  #product main .left_class {
    width: 300px;
    padding-top: 10px; }
    #product main .left_class ul, #product main .left_class li {
      display: block;
      margin: 0;
      padding: 0;
      list-style: none; }
    #product main .left_class li {
      padding-bottom: 10px; }
      #product main .left_class li a {
        display: block;
        width: 200px;
        position: relative;
        font-size: 15px;
        color: #222222;
        border: 3px #FFFFFF solid;
        padding: 10px; }
        #product main .left_class li a i {
          color: #FFFFFF;
          position: absolute;
          right: 10px;
          top: 13px; }
        #product main .left_class li a.active, #product main .left_class li a:hover {
          border-color: #59898D; }
          #product main .left_class li a.active i, #product main .left_class li a:hover i {
            color: #59898D; }
    #product main .left_class .select {
      width: 100%;
      margin: 0 auto 20px; }
  #product main .right {
    width: calc(100% - 300px); }
  #product main .list-row .p-item {
    padding: 0px 0 20px; }
    #product main .list-row .p-item .pic {
      padding-bottom: 91%; }
    #product main .list-row .p-item .date, #product main .list-row .p-item .name {
      padding: 2px 10px; }
    #product main .list-row .p-item .date {
      color: #59898D;
      font-size: 15px;
      font-weight: bold; }
    #product main .list-row .p-item .name {
      font-size: 18px;
      font-weight: bold;
      color: #222222;
      line-height: 28px;
      height: 56px;
      overflow: hidden; }
  #product main .detail .name {
    font-size: 18px;
    font-weight: bold;
    color: #222222; }
  #product main .detail .date {
    color: #59898D;
    font-size: 15px;
    display: inline-block;
    font-weight: normal; }
  #product main .detail .pics {
    padding: 10px 0; }
    #product main .detail .pics .swiper-button-next, #product main .detail .pics .swiper-button-prev {
      width: 36px;
      height: 36px;
      color: #000000;
      background: #FFFFFF;
      color: #59898D;
      padding: 8px;
      top: 48%; }
      #product main .detail .pics .swiper-button-next:after, #product main .detail .pics .swiper-button-prev:after {
        font-size: 20px; }
    #product main .detail .pics .swiper-button-next {
      right: 0px; }
    #product main .detail .pics .swiper-button-prev {
      left: 0px; }
    #product main .detail .pics .swiper-container {
      width: 100%;
      height: 400px;
      margin-left: auto;
      margin-right: auto; }
    #product main .detail .pics .swiper-slide {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }
    #product main .detail .pics .gallery-top {
      height: 400px;
      width: 100%; }
    #product main .detail .pics .gallery-thumbs {
      height: 20%;
      width: 98%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px 0; }
    #product main .detail .pics .gallery-thumbs .swiper-slide {
      height: 100%;
      opacity: 0.4; }
    #product main .detail .pics .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1; }
  #product main .detail .editor {
    margin: 20px auto 40px;
    padding: 20px 0; }
  #product main .detail .btn div {
    background: #D3D3D3;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }

#contact main h1.title {
  font-size: 40px;
  line-height: 1.5; }
  #contact main h1.title span {
    display: block;
    font-size: 25px;
    font-family: '微軟正黑體'; }

#contact main ul, #contact main li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none; }

#contact main .form {
  background: #D3D3D3;
  padding: 40px 0 500px;
  position: relative; }
  #contact main .form h1.title {
    color: #FFFFFF;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.16); }
    #contact main .form h1.title span {
      color: #59898D; }
  #contact main .form .form-part {
    width: 780px;
    max-width: 98%;
    padding: 40px 0;
    margin: 30px auto 0;
    background: #FFFFFF;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);
    position: absolute;
    left: 50%;
    margin-left: -390px; }
    #contact main .form .form-part ul {
      width: 90%;
      margin: auto; }
    #contact main .form .form-part li {
      padding: 5px 10px;
      position: relative; }
      #contact main .form .form-part li label {
        position: absolute;
        left: 0;
        top: 0;
        color: #222222;
        font-size: 15px;
        line-height: 20px;
        padding-top: 15px;
        z-index: 99; }
        #contact main .form .form-part li label i {
          color: red;
          font-style: normal; }
      #contact main .form .form-part li input, #contact main .form .form-part li div.select {
        width: 100%;
        height: 40px;
        border: none;
        border-bottom: 1px #D3D3D3 solid;
        background: #FFFFFF; }
      #contact main .form .form-part li input, #contact main .form .form-part li select, #contact main .form .form-part li option {
        padding: 0px 0 0px 40px; }
      #contact main .form .form-part li div.select {
        height: 40px; }
      #contact main .form .form-part li.info textarea {
        width: 100%;
        border: 1px #D3D3D3 solid;
        height: 8em;
        margin-top: 40px; }
    #contact main .form .form-part .google-captcha {
      width: 304px;
      margin: 20px auto; }
    #contact main .form .form-part .button-row {
      padding: 20px 0 10px; }
      #contact main .form .form-part .button-row .btn div {
        font-size: 15px;
        font-style: normal; }

#contact main .map .pic {
  padding-bottom: 32%; }
  #contact main .map .pic iframe {
    width: 100%;
    height: 100%; }

@media only screen and (max-width: 1366px) {
  #contact main .form {
    padding-bottom: 600px; } }

@media only screen and (max-width: 1200px) {
  .row {
    margin-left: auto;
    margin-right: auto; }
  header .nav-bar #logo {
    padding-left: 10px; } }

@media only screen and (max-width: 1024px) {
  .container {
    padding-left: 20px;
    padding-right: 20px; }
  /*--- header ---*/
  #burger {
    width: 35px;
    height: 50px;
    font-size: 0;
    position: fixed;
    top: 18px;
    right: 10px;
    cursor: pointer;
    z-index: 99999;
    background: none; }
    #burger span {
      background-color: #FFFFFF;
      border: 1px #000 solid;
      display: block;
      position: absolute;
      top: 5px;
      left: 0;
      right: 0;
      height: 2px;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      -webkit-transition-delay: 0.2s, 0s;
      -o-transition-delay: 0.2s, 0s;
      transition-delay: 0.2s, 0s; }
      #burger span:nth-child(2) {
        top: 14px;
        -webkit-transition-property: all, -webkit-transform;
        transition-property: all, -webkit-transform;
        -o-transition-property: all, transform;
        transition-property: all, transform;
        transition-property: all, transform, -webkit-transform; }
      #burger span:last-child {
        top: 23px;
        -webkit-transition-property: all, -webkit-transform;
        transition-property: all, -webkit-transform;
        -o-transition-property: all, transform;
        transition-property: all, transform;
        transition-property: all, transform, -webkit-transform;
        -webkit-transition-delay: 0.2s, 0s;
        -o-transition-delay: 0.2s, 0s;
        transition-delay: 0.2s, 0s; }
    #burger.active {
      position: fixed; }
      #burger.active span {
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 14px;
        left: 0px; }
        #burger.active span:nth-child(2), #burger.active span:last-child {
          -webkit-transition-property: top,-webkit-transform;
          transition-property: top,-webkit-transform;
          -o-transition-property: top,transform;
          transition-property: top,transform;
          transition-property: top,transform,-webkit-transform;
          -webkit-transition-property: all, -webkit-transform;
          transition-property: all, -webkit-transform;
          -o-transition-property: all, transform;
          transition-property: all, transform;
          transition-property: all, transform, -webkit-transform; }
        #burger.active span:nth-child(2) {
          left: -100%;
          opacity: 0;
          -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
          transform: rotate(0);
          -webkit-transition-delay: 0.2s, 0s;
          -o-transition-delay: 0.2s, 0s;
          transition-delay: 0.2s, 0s; }
        #burger.active span:last-child {
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg); }
  header .container {
    padding: 0; }
  header .nav-bar #logo {
    width: 100%;
    text-align: center;
    background: rgba(255, 255, 255, 0.3);
    padding: 5px 0; }
  header .nav-bar nav {
    width: 0; }
    header .nav-bar nav ul {
      position: fixed;
      z-index: 9999;
      width: 80vw;
      max-width: 280px;
      height: 100vh;
      padding-left: 0;
      left: auto;
      right: 0;
      top: 0;
      overflow: auto;
      font-size: 1rem;
      background-color: rgba(255, 255, 255, 0.8);
      -webkit-transform: translateX(80vw);
      -ms-transform: translateX(80vw);
      transform: translateX(80vw);
      -webkit-transition: all .65s ease-out;
      -o-transition: all .65s ease-out;
      transition: all .65s ease-out; }
      header .nav-bar nav ul.active {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: all 0.4s cubic-bezier(0.1, 0.58, 0.42, 0.85);
        -o-transition: all 0.4s cubic-bezier(0.1, 0.58, 0.42, 0.85);
        transition: all 0.4s cubic-bezier(0.1, 0.58, 0.42, 0.85); }
      header .nav-bar nav ul li {
        list-style: none;
        display: block;
        position: static;
        border-left: none;
        padding: 5px;
        width: 100%;
        height: auto;
        line-height: 60px;
        border-bottom: 1px #CCCCCC solid;
        text-align: center;
        background: #FFFFFF;
        font-size: 1.3rem; }
        header .nav-bar nav ul li a {
          color: #222222; }
        header .nav-bar nav ul li:hover {
          height: auto; }
        header .nav-bar nav ul li.sep-line {
          display: none; }
        header .nav-bar nav ul li.contact {
          width: 100%; }
  footer #text-area .left, footer #text-area .right {
    width: 100%; }
  #index main #banner a.bg-img .txt-area .title {
    font-size: 30px; }
  #index main #banner a.bg-img .txt-area .title-sub {
    font-size: 15px; }
  #index main #banner a.bg-img .txt-area .border {
    display: none; }
  #index main .service.rent .col-4 {
    width: 100%; }
  #index main .about .text-area {
    padding: 50px 5px 115px; }
  #index main .service.coop .col-3 {
    width: 50%;
    margin: 5px auto; }
  #index main .news .list-row {
    padding: 30px 5px; }
  #about main .about .row .left, #about main .about .row .right {
    width: 100%; }
  #about main .about .row .left img {
    display: block;
    margin: 5px auto; }
  #about main .about .row .txt {
    padding: 40px;
    margin: 0 auto; }
  #service main .rent .line-part {
    display: none; }
  #service main .rent .img-part .col-4 {
    width: 100%; }
  #service main .rent .img-part div.title {
    display: block; }
  #service main .photos .col-3 {
    width: 50%; }
  #news main .list-row {
    padding: 40px 5px; }
    #news main .list-row .n-item .txt, #news main .list-row .n-item .button {
      width: 100%; }
    #news main .list-row .n-item .button {
      text-align: left; }
  #news main .detail {
    padding: 0 5px; }
  #product main .left_class, #product main .right {
    width: 100%; }
  #product main .left_Class ul, #product main .left_Class li {
    display: none; }
  #product main .left_Class .select {
    display: block;
    width: 98%;
    margin: 5px auto; }
  #product main .right .col-4 {
    width: 50%; }
  #product main .detail {
    padding: 20px 10px; }
  #contact main .form {
    padding: 40px 0; }
    #contact main .form .form-part {
      position: static;
      margin: 10px auto; } }

@media only screen and (max-width: 640px) {
  #burger {
    top: 7px; }
  header .nav-bar #logo {
    font-size: 25px; }
  #index main .news .list-row .n-item .txt {
    width: 100%; }
  #index main .news .list-row .n-item .button {
    text-align: left; }
  #index main .service.coop .row {
    margin: 0 -1px; }
    #index main .service.coop .row li .text {
      padding-top: 25%;
      font-size: 20px; }
      #index main .service.coop .row li .text span {
        padding: 0 5px;
        font-size: 12px; }
  #product main .right .col-4 {
    width: 100%; }
  #contact main .form .form-part .col-6 {
    width: 100%; } }