@charset "UTF-8";
html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  text-align: left;
  overflow: visible;
  font-size: 13px;
  color: #000000;
  background-color: #ffffff;
  font-family: "微軟正黑體", "Arial","Verdana",  "Microsoft JhengHei", "Geneva", "sans-serif"; }

.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(0, 0, 0, 0.8);
    z-index: 99999;
    display: block; }

.pace-inactive {
  display: none; }

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

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

a {
  text-decoration: none;
  color: inherit; }

a:hover {
  color: inherit; }

a img {
  border: none; }

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

/*泛用表格*/
.t {
  display: table; }

.t ul {
  display: table-row; }

.t li {
  padding: 0px;
  display: table-cell;
  margin: 0px;
  list-style: none;
  font-size: 14px;
  vertical-align: middle; }

dl dt,
dl dd {
  float: left; }

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

.content {
  background-color: #ffffff;
  position: relative; }

.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; }

.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%; }

span.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent; }

span.plus {
  display: inline-block;
  vertical-align: middle;
  width: 13px;
  height: 13px;
  border: 1px solid #b9b9b9;
  border-radius: 2px;
  margin: 0;
  padding: 0;
  margin-right: 3px;
  position: relative; }
  span.plus:after {
    content: "";
    width: 70%;
    height: 1px;
    background-color: #000;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  span.plus:before {
    content: "";
    height: 70%;
    width: 1px;
    background-color: #000;
    display: block;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto; }

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

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

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

.editor {
  word-break: break-word;
  /* 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; } }

header {
  position: relative;
  z-index: 9999;
  width: 100%;
  height: 100px;
  display: block;
  color: #2b2b2b; }
  header nav {
    float: left;
    padding-top: 40px;
    padding-left: 42px;
    font-size: 20px;
    line-height: 22px;
    width: 45%; }
    header nav li {
      list-style: none;
      float: left;
      width: 20%;
      text-align: center; }
      header nav li a {
        display: block; }
      header nav li.active {
        color: #744273; }
      header nav li#project {
        cursor: pointer;
        position: relative; }
        header nav li#project.over {
          color: #FFFFFF;
          background: #000000; }
        header nav li#project ul {
          position: absolute;
          left: 0px;
          top: 32px;
          width: 100%;
          background: #000000;
          display: none; }
          header nav li#project ul li {
            display: block;
            float: none;
            width: 100%;
            text-align: center;
            font-size: 20px;
            line-height: 36px;
            height: 36px;
            color: #FFFFFF;
            overflow: hidden; }
  header div#logo {
    display: block;
    float: left;
    max-width: 100%;
    text-align: center; }
    header div#logo .pc {
      display: block;
      width: 350px;
      height: 100px; }
    header div#logo .ph {
      display: none; }
  header div#rt_link {
    position: fixed;
    right: 0px;
    top: 0px;
    width: 35px; }
    header div#rt_link div {
      width: 35px;
      height: 35px;
      display: block;
      text-align: center;
      line-height: 35px;
      font-size: 20px;
      color: #FFFFFF;
      cursor: pointer; }
      header div#rt_link div#star {
        background: #eec034; }
        header div#rt_link div#star:before {
          content: "\f005";
          font-family: "FontAwesome"; }
      header div#rt_link div#fb {
        background: #3865c2; }
        header div#rt_link div#fb:before {
          content: "\f09a";
          font-family: "FontAwesome"; }
      header div#rt_link div#ig {
        background: #833ab4; }
        header div#rt_link div#ig::before {
          content: '\f16d';
          font-family: "FontAwesome"; }
      header div#rt_link div#twitter {
        background: #1da1f2; }
        header div#rt_link div#twitter::before {
          content: '\f099';
          font-family: "FontAwesome"; }
  header #mobile_button {
    position: fixed;
    left: 3px;
    top: 3px;
    width: 48px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px #CECECE solid;
    border-radius: 5px;
    cursor: pointer;
    display: none; }
    header #mobile_button div {
      width: 80%;
      height: 5px;
      background: #FFFFFF;
      margin: 7px auto; }

.main_block {
  width: 100%;
  background: #dce0e3;
  min-height: 700px;
  padding-top: 100px;
  padding-bottom: 100px; }
  .main_block.especially {
    padding-top: 27px;
    padding-bottom: 27px; }
  .main_block h3 {
    font-size: 27px;
    line-height: 27px; }
    .main_block h3.specially {
      height: 49px; }
  .main_block h4 {
    font-size: 18px;
    line-height: 30px;
    color: #d69922; }

.l_page {
  text-align: center;
  margin-top: 30px;
  line-height: 30px; }
  .l_page a {
    display: inline-block;
    font-size: 13px;
    min-width: 20px;
    text-align: center;
    line-height: 20px;
    border: 1px #757575 solid;
    padding: 1px;
    margin: 2px;
    color: #858585; }
    .l_page a.selected {
      color: red;
      font-weight: bold;
      border-color: red; }
    .l_page a.prev, .l_page a.next {
      padding-left: 5px;
      padding-right: 5px; }

footer {
  color: #9a9a9a;
  font-size: 12px;
  line-height: 18px;
  text-align: right;
  padding-top: 30px;
  height: 87px; }

#about article {
  width: 54.3333333333%;
  float: left; }
  #about article h3 {
    padding-top: 15px; }
  #about article section {
    font-size: 16px;
    line-height: 30px;
    margin-top: 30px; }
    #about article section .about-img {
      width: 150px; }
    #about article section .fa-heart {
      color: #FE0000; }
    #about article section .orange {
      color: #FF6600;
      padding-left: 50px; }
      #about article section .orange .fa-square {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-right: 10px; }

#about img {
  margin-left: 4%;
  width: 41.666666666%;
  float: left; }

#service {
  padding-bottom: 0px;
  font-size: 16px;
  line-height: 30px; }
  #service div.t {
    max-width: 690px;
    width: 100%;
    margin: auto;
    margin-top: 25px; }
    #service div.t li {
      text-align: center;
      padding: 5px; }
  #service .p2, #service .p3 {
    padding-top: 40px;
    padding-bottom: 90px; }
  #service .p2 {
    margin-top: 60px;
    background: #d7efb1; }
    #service .p2 div.t li {
      text-align: left; }
  #service .p3 {
    background: #c9f6f3; }
    #service .p3 div.t li {
      text-align: left; }
      #service .p3 div.t li.left div {
        text-align: center;
        width: 30px;
        height: 30px;
        color: #6b6b6b;
        background: #FFFFFF;
        border: 1px #9f9f9f solid;
        border-radius: 50%; }

#contact div.t, #contact div.button {
  width: 825px;
  max-width: 98%;
  margin: auto;
  margin-top: 10px; }
  #contact div.t ul li, #contact div.button ul li {
    background: #FFFFFF;
    vertical-align: middle; }
    #contact div.t ul li.left, #contact div.button ul li.left {
      width: 100px;
      text-align: right;
      font-size: 15px;
      color: #8e8e8e;
      line-height: 42px; }
      #contact div.t ul li.left:after, #contact div.button ul li.left:after {
        content: "|";
        margin-left: 10px; }
    #contact div.t ul li.line, #contact div.button ul li.line {
      background: none;
      height: 10px; }
    #contact div.t ul li input, #contact div.t ul li textarea, #contact div.button ul li input, #contact div.button ul li textarea {
      width: 100%;
      height: 100%;
      border: none; }
    #contact div.t ul li textarea, #contact div.button ul li textarea {
      height: 6em; }
  #contact div.t input[type=button], #contact div.button input[type=button] {
    margin: auto;
    width: 230px;
    height: 48px;
    line-height: 46px;
    text-align: center;
    border: none;
    background: #7d7d7d;
    color: #FFFFFF;
    display: block;
    cursor: pointer; }

#contact div.button {
  margin-top: 25px; }

#contact div.second {
  margin-top: 50px; }
  #contact div.second div.map {
    width: 52.08333333%;
    float: left; }
    #contact div.second div.map iframe {
      width: 100%; }
  #contact div.second div.text {
    width: 47.16666666%;
    float: left; }
    #contact div.second div.text div {
      margin: auto;
      margin-top: 5px;
      width: 83%;
      background: #FFFFFF;
      padding: 30px;
      color: #1d1d1d;
      font-size: 15px;
      line-height: 30px;
      text-align: left;
      border: 1px #000000 solid; }
    #contact div.second div.text img {
      width: 100px; }

#press .list {
  width: 85.416666666%;
  margin: auto;
  text-align: center;
  display: block; }
  #press .list .item {
    display: inline-block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 260px;
    height: 415px;
    background: #FFFFFF;
    margin: 5px;
    margin-top: 20px;
    text-align: left; }
    #press .list .item div.pic {
      height: 315px;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover; }
    #press .list .item div.name {
      width: 90%;
      margin: auto;
      text-align: left;
      font-size: 16px;
      line-height: 40px;
      height: 40px;
      overflow: hidden; }
    #press .list .item div.more {
      text-align: center;
      font-size: 14px;
      line-height: 60px;
      border-top: 1px solid #CCCCCC; }
    #press .list .item div.s_info {
      position: absolute;
      top: 355px;
      width: 100%;
      z-index: 1000;
      font-size: 14px;
      line-height: 22px;
      color: #5c5c5c;
      padding: 20px;
      background: #FFFFFF;
      height: auto;
      display: none; }

#press .name {
  font-size: 17px;
  line-height: 30px;
  text-align: left;
  font-weight: bold;
  color: #2b2b2b; }

#press .text {
  font-size: 14px;
  color: #252525;
  line-height: 24px;
  text-align: left;
  padding-top: 30px;
  padding-bottom: 30px; }

#press a.back {
  display: block;
  width: 6em;
  font-size: 15px;
  background: #FFFFFF;
  text-align: center;
  line-height: 30px;
  margin: auto; }

.main_block#project .phone-box {
  display: none; }

.main_block#project .menu {
  width: 100%; }
  .main_block#project .menu li {
    font-size: 16px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #1d1d1d;
    width: 20%;
    float: left;
    display: block;
    position: relative; }
    .main_block#project .menu li:before {
      content: '';
      display: block;
      height: 15px;
      position: absolute;
      left: 1px;
      top: 10px;
      width: 1px;
      border-left: 1px #1d1d1d solid; }
    .main_block#project .menu li:first-child:before {
      border-left: none; }
    .main_block#project .menu li a {
      display: block;
      width: 90%;
      margin: auto;
      position: relative; }
      .main_block#project .menu li a.selected {
        background: #ae84ad;
        color: #FFFFFF; }
        .main_block#project .menu li a.selected:after {
          content: '';
          position: absolute;
          top: 35px;
          left: 0;
          right: 0;
          margin: auto;
          width: 0;
          height: 0;
          vertical-align: middle;
          border-top: 5px solid #ae84ad;
          border-right: 5px solid transparent;
          border-left: 5px solid transparent; }

.main_block#project .list {
  width: 90.625%;
  margin: auto; }
  .main_block#project .list .item {
    width: 49%;
    height: 460px;
    margin-right: 1%;
    float: left; }
    .main_block#project .list .item .img {
      height: 600px;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover; }
      .main_block#project .list .item .img.specially_height {
        height: 410px; }
    .main_block#project .list .item .name {
      font-size: 16px;
      color: #1d1d1d;
      margin: 5px 0 10px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      overflow: hidden; }

body#project {
  width: 100%;
  height: 100%;
  background: #151515; }
  body#project div#press {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block; }
    body#project div#press div#loading {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url(../images/loader.gif);
      background-position: 50% 50%;
      background-repeat: no-repeat;
      color: #FFFFFF;
      font-size: 17px;
      font-weight: bold;
      padding: 10px; }
    body#project div#press div#temp, body#project div#press div#temp2 {
      display: none; }
    body#project div#press div.main_pic {
      position: absolute;
      width: 100%;
      height: 92%;
      margin-top: 2%;
      display: none;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      -webkit-background-size: contain;
      -moz-background-size: contain;
      -o-background-size: contain;
      background-size: contain; }
    body#project div#press div.button {
      position: absolute;
      width: 60px;
      height: 40px;
      text-align: center;
      line-height: 35px;
      color: #FFFFFF;
      font-size: 21px;
      font-weight: bold;
      cursor: pointer;
      border: 2px #FFFFFF solid;
      padding: 0px;
      display: none; }
    body#project div#press div.button#next {
      bottom: 20px;
      right: 30px; }
    body#project div#press div.button#prev {
      bottom: 20px;
      left: 30px; }
    body#project div#press div.button#back {
      width: 120px;
      height: 40px;
      right: 30px;
      top: 10px;
      font-size: 15px; }

body#index {
  overflow: hidden; }
  body#index #banner {
    width: 100%;
    height: 90%;
    min-height: 800px;
    overflow: hidden; }
    body#index #banner div {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: cover; }

@media only screen and (max-height: 800px) {
  body#index #banner {
    min-height: 0; } }

@media only screen and (max-height: 640px) {
  body#index #banner {
    height: 80%; } }

@media only screen and (max-width: 1366px) {
  body#project div#press div.main_pic {
    height: 80%; }
  body#project div#press div.button#next, body#project div#press div.button#prev {
    bottom: 60px; } }

@media only screen and (max-width: 1024px) {
  header #mobile_button {
    display: block; }
  header nav {
    float: none;
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    padding: 0;
    background: rgba(0, 0, 0, 0.6); }
    header nav li {
      width: 100%;
      float: none;
      line-height: 40px;
      color: #FFFFFF;
      border-bottom: 1px #ffffff solid; }
      header nav li#project {
        float: none;
        width: 100%;
        position: static;
        left: 0;
        top: 0;
        height: auto;
        padding: 0;
        font-size: inherit; }
        header nav li#project ul {
          position: static;
          left: 0px;
          top: 0px;
          width: 100%;
          background: inherit;
          display: none; }
          header nav li#project ul li {
            display: block;
            float: none;
            width: 100%;
            text-align: center;
            font-size: 17px;
            height: 36px;
            color: #FFFFFF;
            overflow: hidden; }
    header nav div.line {
      float: none;
      position: static;
      text-align: center;
      margin: 20px auto; } }

@media only screen and (max-width: 960px) {
  header {
    height: 80px; }
  div#logo {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    float: inherit !important; }
    div#logo .pc {
      width: 250px !important;
      height: 80px !important; } }

@media only screen and (max-width: 640px) {
  header {
    height: 100px; }
  div#logo .pc {
    display: none !important; }
  div#logo .ph {
    display: block !important;
    width: 121px;
    height: 98px;
    margin: 0 auto; }
  #about article {
    width: 100%; }
  #about img {
    margin-left: 0%;
    width: 100%; }
  #service div.t {
    width: 100%; }
    #service div.t li {
      text-align: left;
      padding: 5px; }
  #service .p2 div.t li {
    text-align: left; }
  #service .p3 div.t li {
    vertical-align: top; }
  #contact div.t, #contact div.button {
    width: 95%;
    margin: auto;
    margin-top: 10px; }
    #contact div.t ul li, #contact div.button ul li {
      background: #FFFFFF;
      vertical-align: middle; }
  #contact div.second {
    margin-top: 60px; }
    #contact div.second div.map {
      width: 100%; }
      #contact div.second div.map iframe {
        width: 100%; }
    #contact div.second div.text {
      width: 100%; }
      #contact div.second div.text div {
        margin: auto;
        margin-top: 30px;
        width: 95%;
        background: #FFFFFF; }
  .main_block {
    padding-top: 15%; }
  .main_block#project .list {
    width: 95%; }
    .main_block#project .list .item {
      width: 100%;
      height: 300px;
      float: none; }
      .main_block#project .list .item .img {
        height: 220px; } }

@media only screen and (max-width: 480px) {
  .main_block#project .phone-box {
    background: #ae84ad;
    color: #ffffff;
    padding: 10px;
    display: block;
    cursor: pointer; }
  .main_block#project .menu {
    width: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    height: 0;
    display: none; }
    .main_block#project .menu li {
      font-size: 16px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #1d1d1d;
      width: 50%;
      float: left;
      display: block;
      position: relative; }
      .main_block#project .menu li:before {
        border-left: none; }
    .main_block#project .menu.active {
      opacity: 1;
      visibility: visible;
      -webkit-transition: all .2s ease;
      -o-transition: all .2s ease;
      transition: all .2s ease;
      height: auto;
      display: block; } }