@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
html,
body {
  width: 100%;
  min-height: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
  text-align: left;
  overflow: visible;
  font-size: 16px;
  color: #0f0f0f;
  background-color: #ffffff;
  line-height: 1.6;
  font-family: Helvetica Neue,Helvetica, Arial, '微軟正黑體' , sans-serif;
  -webkit-tap-highlight-color: transparent; }

.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: #000;
  position: fixed;
  z-index: 200000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px; }

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

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

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

a:active, a:hover {
  outline: none; }

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

input[type="text"] {
  -webkit-appearance: none;
  border-radius: 0; }

/*泛用表格*/
.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: 1180px;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px; }

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

.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: 10px;
  padding-right: 10px; }

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

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

body {
  background: url(../_img/layout/body_bg.jpg) top center repeat-y; }

header {
  background: url(../_img/layout/header_bg.jpg) top center no-repeat;
  height: 130px; }
  header .header_container {
    width: 1180px;
    margin: auto;
    padding: 30px 0; }
  header #logo {
    float: left;
    display: block; }
  header nav {
    float: left;
    display: block; }
    header nav .menu {
      color: #fff;
      font-size: 0; }
      header nav .menu li {
        display: inline-block;
        font-size: 18px;
        width: calc(20% - 16px);
        position: relative;
        padding-top: 20px; }
        header nav .menu li a {
          position: absolute;
          -webkit-transition: all linear .2s;
          -o-transition: all linear .2s;
          transition: all linear .2s; }
          header nav .menu li a:before {
            content: url(../_img/layout/hover_logo.png);
            width: 100%;
            height: 30px;
            display: block;
            text-align: center;
            position: absolute;
            top: 0;
            opacity: 0;
            -webkit-transition: all linear .2s;
            -o-transition: all linear .2s;
            transition: all linear .2s; }
          header nav .menu li a:hover {
            color: #F4D85B;
            text-align: center;
            -webkit-transition: all linear .2s;
            -o-transition: all linear .2s;
            transition: all linear .2s;
            padding-top: 10px;
            position: absolute; }
            header nav .menu li a:hover:before {
              content: url(../_img/layout/hover_logo.png);
              width: 100%;
              height: 30px;
              display: block;
              text-align: center;
              position: absolute;
              top: -20px;
              opacity: 1;
              -webkit-transition: all linear .2s;
              -o-transition: all linear .2s;
              transition: all linear .2s; }
        header nav .menu li:before {
          content: url(../_img/layout/slash.png);
          width: 16px;
          height: 16px;
          display: inline-block;
          position: absolute;
          left: -40px;
          top: 25px; }
      header nav .menu li:first-child:before {
        content: ''; }
    header nav .active {
      color: #F4D85B;
      position: absolute;
      padding-top: 10px;
      background: url(../_img/layout/hover_logo.png) 23px 0px no-repeat; }
      header nav .active a {
        position: absolute;
        padding-top: 10px; }
        header nav .active a:hover {
          color: #F4D85B;
          text-align: center;
          -webkit-transition: all linear .2s;
          -o-transition: all linear .2s;
          transition: all linear .2s;
          padding-top: 10px;
          position: absolute; }
          header nav .active a:hover:before {
            content: '';
            width: 0;
            height: 0;
            top: -20px;
            opacity: 0;
            -webkit-transition: all linear .2s;
            -o-transition: all linear .2s;
            transition: all linear .2s; }
  header:after {
    display: block;
    height: 0;
    clear: both;
    content: "";
    visibility: hidden; }

a:hover {
  color: #0072A8; }

.icon {
  text-align: center; }

.more {
  text-align: center;
  margin: 40px; }
  .more a {
    font-size: 14px;
    background: #004D74;
    -webkit-transition: all linear .2s;
    -o-transition: all linear .2s;
    transition: all linear .2s;
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px; }
    .more a:hover {
      background: #0072A8;
      -webkit-transition: all linear .2s;
      -o-transition: all linear .2s;
      transition: all linear .2s; }
  .more .svg-inline--fa {
    margin-left: 5px; }

.pagination {
  clear: both;
  padding: 2rem 0;
  font-size: 1rem; }
  .pagination a {
    display: block; }
  .pagination ul {
    text-align: center; }
    .pagination ul li {
      display: inline-block;
      width: 32px;
      color: #666;
      line-height: 200%;
      vertical-align: middle; }
      .pagination ul li a:hover, .pagination ul li a.selected {
        color: #004D74;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s;
        vertical-align: middle; }

.back_list {
  text-align: center;
  color: #004D74;
  margin: 40px; }
  .back_list .svg-inline--fa {
    margin-right: 10px; }

h3 {
  font-size: 36px;
  color: #004D74;
  text-align: center;
  margin-bottom: 30px; }

h4 {
  font-size: 20px;
  color: #004D74;
  text-align: center;
  margin-bottom: 30px; }

#page_container {
  padding: 60px 0; }

#page_top {
  position: fixed;
  width: 50px;
  height: 50px;
  right: 2rem;
  bottom: 5rem;
  padding: 12px 0 0 17px;
  cursor: pointer;
  text-align: left;
  border-radius: 50px;
  font-size: 26px;
  color: #fff;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease; }
  #page_top.show {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease; }
  #page_top:hover {
    background: black; }

footer {
  background: #004D74;
  padding: 20px 0; }
  footer .information .information_container {
    display: inline-block; }
    footer .information .information_container .information_icon {
      display: inline-block; }
    footer .information .information_container p {
      display: inline-block;
      font-size: 14px;
      color: #4D839F; }
      footer .information .information_container p b {
        color: #fff; }
        footer .information .information_container p b:hover {
          text-decoration: underline; }
    footer .information .information_container .phone {
      font-size: 16px; }
  footer .information .spacing25 {
    padding-left: 25px; }
  footer .footer_logo {
    text-align: right; }
  footer .copyright {
    font-size: 13px;
    color: #4D839F;
    margin-top: 10px; }
    footer .copyright a {
      color: #2E6E8E; }

#index #banner {
  width: 100%;
  height: 100%;
  position: relative; }
  #index #banner .slider {
    width: 100%;
    height: 100%; }
  #index #banner .img {
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    display: block; }
  #index #banner img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: -1px; }
  #index #banner .bg_img {
    padding-top: 28%;
    display: block;
    background-position: center; }
  #index #banner .slick-slider {
    margin: 0; }
  #index #banner .slick-prev {
    left: 5%;
    width: 64px;
    height: 64px;
    opacity: 1;
    z-index: 500; }
    #index #banner .slick-prev:before {
      content: url(../images/home/images/arrow_left.png);
      width: 64px;
      height: 64px;
      font-size: normal; }
  #index #banner .slick-next {
    right: 5%;
    width: 64px;
    height: 64px;
    opacity: 1;
    z-index: 500; }
    #index #banner .slick-next:before {
      content: url(../images/home/images/arrow_right.png);
      width: 64px;
      height: 64px;
      font-size: normal; }
  #index #banner:after {
    content: url(../_img/index/shadow.png) top repeat-x;
    width: 100%;
    display: block;
    height: 34px; }

#index #index_container {
  padding: 50px 0; }
  #index #index_container .index_news .title {
    font-size: 18px;
    color: #000;
    margin-top: 8px; }
    #index #index_container .index_news .title:hover {
      color: #004D74; }
  #index #index_container .index_news .date {
    font-size: 14px;
    color: #666; }
    #index #index_container .index_news .date:hover {
      color: #004D74; }
  #index #index_container .index_about {
    border-top: 1px #ddd solid;
    padding-top: 50px; }
    #index #index_container .index_about h4 {
      text-align: left;
      margin-bottom: 15px; }

#about .submenu {
  font-size: 18px;
  text-align: center;
  color: #000;
  margin-bottom: 66px; }
  #about .submenu li {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 0 5px;
    padding: 10px 25px; }
    #about .submenu li a {
      display: block; }
    #about .submenu li:hover {
      color: #004D74;
      border: 1px solid #004D74; }
    #about .submenu li.active {
      color: #004D74;
      border: 1px solid #004D74; }

#about .about_container {
  /*company*/
  /*chart*/
  /*service*/ }
  #about .about_container #company p {
    margin-bottom: 20px;
    line-height: 2; }
  #about .about_container #company .style1 {
    font-size: 20px;
    text-align: center;
    line-height: 1.6;
    margin: 50px 0 0;
    letter-spacing: 20px; }
  #about .about_container #company .style2 {
    font-size: 20px;
    text-align: center;
    line-height: 1.6;
    font-family: 'Playfair Display', serif;
    margin-bottom: 50px;
    color: #004D74;
    letter-spacing: 10px; }
  #about .about_container #company .style3 {
    font-size: 20px;
    color: #004D74;
    text-align: center;
    margin-top: 100px; }
  #about .about_container #chart {
    text-align: center; }
    #about .about_container #chart .style4 {
      margin-top: 50px; }
  #about .about_container #service h5 {
    font-size: 20px;
    color: #004D74; }
  #about .about_container #service p {
    margin-bottom: 50px; }
  #about .about_container #service .style5 {
    margin-bottom: 50px; }

#about .article_content_mobile {
  display: none; }

#photos .submenu {
  font-size: 18px;
  text-align: center;
  color: #000;
  margin-bottom: 66px; }
  #photos .submenu li {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 0 5px;
    padding: 10px 25px; }
    #photos .submenu li a {
      display: block; }
    #photos .submenu li:hover {
      color: #004D74;
      border: 1px solid #004D74; }
    #photos .submenu li.active {
      color: #004D74;
      border: 1px solid #004D74; }
  #photos .submenu .active {
    color: #004D74;
    border: 1px solid #004D74; }

#photos #photo_album_list .photo_album li {
  margin-bottom: 80px; }
  #photos #photo_album_list .photo_album li img {
    border-radius: 6px; }
  #photos #photo_album_list .photo_album li p {
    margin-top: 5px; }

#photos #photo_album_list .album_content {
  display: none; }

#job .job_intro p, #job .job_intro figure {
  margin-bottom: 20px; }

#job .job_intro .style1 {
  margin-top: 60px; }

#job .job_intro_moblie {
  display: none;
  font-size: 0; }
  #job .job_intro_moblie .wrapper {
    margin: 20px 0 40px; }
  #job .job_intro_moblie .figure {
    width: 50%;
    display: inline-block;
    vertical-align: top; }
  #job .job_intro_moblie .article {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    font-size: 1rem; }
  #job .job_intro_moblie .style1 {
    font-size: 1rem; }

#job .job_list {
  background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#ffffff));
  background: -webkit-linear-gradient(#EEEEEE, #ffffff);
  background: -o-linear-gradient(#EEEEEE, #ffffff);
  background: linear-gradient(#EEEEEE, #ffffff);
  padding: 20px; }
  #job .job_list .style1 {
    font-size: 18px;
    color: #000; }
  #job .job_list .date {
    color: #666;
    display: inline-block; }
  #job .job_list .new {
    display: inline-block;
    vertical-align: middle;
    padding: 0 0 5px 5px; }
  #job .job_list .subject {
    color: #333; }
  #job .job_list li {
    border-bottom: 1px #CCD7D1 dashed;
    padding: 20px 5px; }

#job .job_editor .subject {
  color: #000;
  font-size: 20px; }

#job .job_editor .date {
  color: #666;
  display: block;
  padding-bottom: 5px;
  border-bottom: 1px #CCD7D1 dashed; }

#job .job_editor .editor {
  padding: 20px 0; }

#news {
  padding: 0 10%; }
  #news .date {
    color: #666;
    display: inline-block;
    text-align: right; }
  #news .subject {
    color: #000;
    display: inline-block;
    padding-bottom: 5px; }
  #news li {
    border-bottom: 1px #CCD7D1 dashed;
    padding: 15px 5px 10px; }
  #news .news_editor .subject {
    color: #000;
    font-size: 20px; }
  #news .news_editor .date {
    color: #666;
    display: block;
    text-align: left;
    padding-bottom: 5px;
    border-bottom: 1px #CCD7D1 dashed; }
  #news .news_editor .editor {
    padding: 20px 0; }

#contact .dashin_information {
  font-size: 0; }
  #contact .dashin_information .logo {
    width: 28%;
    display: inline-block;
    vertical-align: top;
    padding-left: 20px; }
  #contact .dashin_information .infor {
    width: 72%;
    font-size: 1rem;
    display: inline-block;
    color: #004D74;
    line-height: 2;
    padding-left: 20px; }
    #contact .dashin_information .infor b {
      color: #333; }
      #contact .dashin_information .infor b:hover {
        color: #0072A8;
        -webkit-transition: all linear .2s;
        -o-transition: all linear .2s;
        transition: all linear .2s; }
    #contact .dashin_information .infor .svg-inline--fa {
      margin-right: 10px; }
  #contact .dashin_information .google_map {
    width: 100%;
    margin-top: 40px; }

#contact .dashin_form {
  padding: 0 5%; }
  #contact .dashin_form .style {
    display: none; }
  #contact .dashin_form .contact_form li {
    margin-bottom: 20px; }
  #contact .dashin_form .contact_form input, #contact .dashin_form .contact_form textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: '微軟正黑體', sans-serif;
    font-size: 1rem;
    width: 100%;
    display: inline-block;
    padding: 10px 15px; }
  #contact .dashin_form .contact_form textarea {
    height: 145px;
    max-height: 145px;
    max-width: 100%; }
  #contact .dashin_form .contact_form .send {
    background: #004D74;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 10px 0; }
    #contact .dashin_form .contact_form .send a {
      display: block; }
    #contact .dashin_form .contact_form .send:hover {
      background: #0072A8;
      -webkit-transition: all linear .2s;
      -o-transition: all linear .2s;
      transition: all linear .2s; }

@media only screen and (max-width: 768px) {
  header {
    height: 100px;
    /*nav*/ }
    header nav {
      width: 100%;
      height: 0;
      position: fixed;
      top: 0;
      left: 0;
      background: #153E29;
      padding: 0;
      z-index: 900;
      visibility: hidden;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transform: translate3D(100%, 0, 0);
      -ms-transform: translate3D(100%, 0, 0);
      transform: translate3D(100%, 0, 0);
      -webkit-transition: visibility 0s, -webkit-transform 0.5s;
      transition: visibility 0s, -webkit-transform 0.5s;
      -o-transition: transform 0.5s, visibility 0s;
      transition: transform 0.5s, visibility 0s;
      transition: transform 0.5s, visibility 0s, -webkit-transform 0.5s;
      color: #fff; }
      header nav .menu {
        padding: 15% 5% 0;
        text-align: center; }
        header nav .menu li {
          display: block;
          padding: 1rem;
          margin: 0;
          width: 100%; }
          header nav .menu li a {
            position: relative;
            -webkit-transition: all linear .2s;
            -o-transition: all linear .2s;
            transition: all linear .2s; }
            header nav .menu li a:before {
              content: none;
              width: 0;
              height: 0;
              display: block;
              text-align: center;
              position: absolute;
              top: 0;
              opacity: 0;
              -webkit-transition: all linear .2s;
              -o-transition: all linear .2s;
              transition: all linear .2s; }
            header nav .menu li a:hover {
              color: #F4D85B;
              text-align: center;
              -webkit-transition: all linear .2s;
              -o-transition: all linear .2s;
              transition: all linear .2s;
              padding-top: 0;
              position: relative; }
              header nav .menu li a:hover:before {
                content: '';
                width: 100%;
                height: 30px;
                display: block;
                text-align: center;
                position: absolute;
                top: 0;
                opacity: 1;
                -webkit-transition: all linear .2s;
                -o-transition: all linear .2s;
                transition: all linear .2s; }
          header nav .menu li:before {
            content: '';
            width: 0;
            height: 0; }
        header nav .menu .active {
          color: #F4D85B;
          position: relative;
          padding: 1rem;
          background: none; }
          header nav .menu .active a {
            position: relative;
            padding-top: 0; }
            header nav .menu .active a:hover {
              color: #F4D85B;
              text-align: center;
              padding-top: 0;
              position: relative; }
              header nav .menu .active a:hover:before {
                content: '';
                width: 0;
                height: 0; }
      header nav.active {
        position: fixed;
        visibility: visible;
        height: 100%;
        -webkit-transform: translate3D(50vw, 0, 0);
        -ms-transform: translate3D(50vw, 0, 0);
        transform: translate3D(50vw, 0, 0);
        -webkit-transition: -webkit-transform 0.5s;
        transition: -webkit-transform 0.5s;
        -o-transition: transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s; }
  #phone_icon .button {
    display: block;
    position: absolute;
    top: 50px;
    right: 0;
    width: 40px;
    height: 30px;
    padding: 0;
    border: 3px solid #fff;
    z-index: 999;
    /* border color */
    border-width: 3px 0;
    cursor: pointer;
    -webkit-transform: translate3D(-50%, -50%, 0);
    -ms-transform: translate3D(-50%, -50%, 0);
    transform: translate3D(-50%, -50%, 0);
    /* center hamburger icon inside link */
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in; }
    #phone_icon .button:before, #phone_icon .button:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 3px;
      top: 40%;
      left: 0;
      background: #fff;
      /* stripes background color. Change to match border color of parent label above */
      -webkit-transition: all 0.3s ease-in;
      -o-transition: all 0.3s ease-in;
      transition: all 0.3s ease-in; }
    #phone_icon .button.action {
      display: block;
      position: fixed;
      top: 40px;
      right: 10px;
      border-bottom: medium none !important;
      -webkit-transition: all 0.5s ease 0s;
      -o-transition: all 0.5s ease 0s;
      transition: all 0.5s ease 0s;
      border-width: 0; }
      #phone_icon .button.action:before {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s; }
      #phone_icon .button.action:after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s; } }

/*----------------max-width:1366------------------*/
@media screen and (max-width: 1366px) {
  #index #banner .bg_img {
    padding-top: 28%;
    background-size: cover; } }

/* 11366 END */
/*----------------max-width:1024------------------*/
@media screen and (max-width: 1024px) {
  .container {
    width: 96%; }
  header .header_container {
    width: 96%; }
  header .col-4 {
    width: 30%; }
  header .col-8 {
    width: 70%; }
  #photos #photo_album_list .photo_album li {
    margin-bottom: 5%; }
  footer {
    text-align: center; }
    footer .col-8 {
      width: 100%; }
    footer .col-4 {
      display: none; }
    footer .information .information_container p {
      text-align: left; } }

/* 1024 END */
/*----------------max-width:768-------------------*/
@media screen and (max-width: 768px) {
  header .header_container {
    padding: 15px 0; }
  header #logo {
    width: 100%;
    display: block;
    text-align: center; }
  header .col-8 {
    width: 50%; }
  #job .col-8, #job .col-4 {
    width: 100%;
    display: block; }
  #contact .dashin_information .logo {
    width: 100%;
    display: block;
    padding-left: 0;
    padding-bottom: 20px;
    text-align: center; }
  #contact .dashin_information .infor {
    width: 100%;
    display: block; } }

/* 768 END */
/*----------------max-width:667-------------------*/
@media screen and (max-width: 667px) {
  .container {
    width: 90%; }
  #about .article_content {
    display: none; }
  #about .article_content_mobile {
    display: block;
    margin-top: 20px; }
  #about .about_container #company .style1 {
    letter-spacing: 0px; }
  #about .about_container #company .style2 {
    letter-spacing: 0px; }
  #about .about_container #company .style3 {
    margin-top: 40px; }
  #photos #photo_album_list .photo_album .col-4 {
    width: 50%; }
  #job .job_intro {
    display: none; }
  #job .job_intro_moblie {
    display: block; }
  #news {
    padding: 0; }
  #contact .col-6 {
    width: 100%;
    display: block; }
  #contact .dashin_information .logo {
    display: none; }
  #contact .dashin_information .infor {
    width: 100%;
    display: block; }
  #contact .dashin_form {
    padding: 10% 5% 5%; }
    #contact .dashin_form .style {
      display: block;
      text-align: center;
      font-size: 20px;
      line-height: 3; }
  footer {
    text-align: left; }
    footer .information .spacing25 {
      padding-left: 0; }
    footer .information .information_container {
      display: inline-block;
      margin-bottom: 20px;
      margin-right: 20px; } }

/* 667 END */
/*----------------max-width:480-------------------*/
@media screen and (max-width: 480px) {
  header {
    height: 80px; }
    header #logo {
      width: 100%;
      text-align: left; }
      header #logo img {
        width: 60%; }
    header nav .menu {
      padding: 45% 5% 0; }
  #phone_icon .button {
    top: 40px; }
  #index #banner .bg_img {
    padding-top: 60%; }
  #index #index_container {
    padding: 30px 0; }
    #index #index_container .index_news .col-4 {
      width: 100%;
      display: block;
      margin-bottom: 20px; }
    #index #index_container .index_about .col-5, #index #index_container .index_about .col-7 {
      width: 100%;
      display: block; }
    #index #index_container .index_about h4, #index #index_container .index_about figure {
      text-align: center; }
  #about .submenu {
    font-size: 16px; }
    #about .submenu li {
      display: block;
      margin-bottom: 10PX; }
  #about .about_container #company .col-6 {
    width: 100%;
    display: block; }
  #about .about_container #company .style2 {
    margin: 0; }
  #photos .submenu {
    font-size: 16px; }
    #photos .submenu li {
      display: block;
      margin-bottom: 10PX; }
  #job .job_intro_moblie .figure, #job .job_intro_moblie .article {
    width: 100%;
    display: block; }
  #job .job_intro_moblie .figure {
    text-align: center;
    margin-bottom: 10px; }
  #news .col-3, #news .col-9 {
    width: 100%;
    display: block; }
  #news .date {
    text-align: left; }
  #contact .dashin_information .infor {
    padding-left: 0; }
  footer .information .information_container {
    margin-right: 0; } }

/* 480 END */
/*----------------max-width:320-------------------*/
/*320 END */