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

.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, 75, 229, .8);
    z-index: 99999;
    display: block; }

.pace-inactive {
  display: none; }

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

.animate {
  -webkit-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;
  box-sizing: border-box; }

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

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

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: 1200px;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px; }

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

body {
  overflow-x: hidden; }

header {
  background: #004BE5; }
  header .header-container {
    max-width: 1200px;
    margin: 0 auto; }

/* collaspe btn */
.collapse-button {
  display: none; }

#logo {
  display: inline-block;
  vertical-align: middle; }

/* main nav start */
#main-nav {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 166px);
  text-align: right; }
  #main-nav ul {
    padding: 0;
    width: 100%; }
    #main-nav ul li {
      display: inline-block;
      -webkit-transition: 0.3s ease;
      transition: 0.3s ease;
      vertical-align: middle;
      text-align: center;
      padding: 40px 3.8% 30px;
      transition: 0.3s ease; }
      #main-nav ul li a {
        font-size: 20px;
        text-align: center;
        color: #fff;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
        display: block;
        border-bottom: 4px #004BE5 solid;
        padding-bottom: 5px; }
      #main-nav ul li:hover, #main-nav ul li.active {
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
        background: #fff; }
        #main-nav ul li:hover a, #main-nav ul li.active a {
          -webkit-transition: 0.3s ease;
          transition: 0.3s ease;
          color: #004BE5;
          border-color: #FAC524; }
      #main-nav ul li.text-box {
        position: relative; }
        #main-nav ul li.text-box:hover p {
          max-height: 500px;
          padding: 10px 15px;
          -webkit-transition: 0.3s ease;
          transition: 0.3s ease;
          opacity: 1; }
        #main-nav ul li.text-box p {
          position: absolute;
          background: #111;
          width: 340px;
          line-height: 1.3em;
          color: #FAC524;
          text-align: left;
          z-index: 9;
          max-height: 0;
          overflow: hidden;
          opacity: 0;
          -webkit-transition: 0.3s ease;
          transition: 0.3s ease; }

#gotop {
  color: #fff;
  background: #FAC524;
  border: 4px #FAC524 solid;
  border-radius: 4px;
  opacity: .8;
  position: fixed;
  right: 25px;
  bottom: 80px;
  font-size: 30px;
  width: 45px;
  height: 45px;
  padding: 3px;
  cursor: pointer;
  z-index: 998;
  -webkit-transition: .3s ease;
  transition: .3s ease; }
  #gotop:hover {
    opacity: 1; }
  #gotop.show {
    opacity: 1;
    visibility: visible;
    -webkit-transition: .3s ease;
    transition: .3s ease; }

footer {
  background: #004BE5;
  color: #ccc;
  text-align: center;
  font-size: 17px;
  padding: 20px 0; }
  footer a:hover {
    color: #FAC524; }
  footer .f-info-box {
    max-width: 500px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 15px; }
    footer .f-info-box .info {
      padding: 20px 0;
      text-align: left; }
    footer .f-info-box span {
      display: block;
      margin: 5px; }
    footer .f-info-box i {
      width: 20px;
      text-align: center;
      margin-right: 5px; }
  footer .copyright {
    font-size: 15px; }

#index #banner * {
  outline: none; }

#index #banner .slick-slider {
  margin-bottom: 0; }

#index #banner .slick-dots {
  bottom: 15px; }
  #index #banner .slick-dots li {
    margin: 5px; }
    #index #banner .slick-dots li button:before {
      content: '';
      background: #004BE5;
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border: 2px #004BE5 solid;
      opacity: 1; }
  #index #banner .slick-dots .slick-active button:before {
    content: '';
    background: #FAC524;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px #FAC524 solid;
    opacity: 1; }

.idx_info {
  background: url(../_img/index/bg-01.jpg);
  color: #333;
  padding: 60px 0; }
  .idx_info .title {
    font-size: 36px;
    letter-spacing: .1em;
    margin-bottom: 25px;
    line-height: 1; }
    .idx_info .title span {
      font-size: 54px;
      font-weight: bold; }
  .idx_info .title2 {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: .05em;
    margin: 15px 0 20px; }
  .idx_info .px20 {
    font-size: 20px; }
  .idx_info .phone {
    margin: 10px 0;
    font-size: 28px; }
    .idx_info .phone i {
      padding-right: 5px; }

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .flex .box {
    width: 50%; }

.main {
  padding: 80px 0; }

.button {
  clear: both;
  margin: 30px 0 10px;
  text-align: center; }
  .button span {
    display: inline-block; }
  .button a {
    display: inline-block;
    border: 1px #004BE5 solid;
    color: #004BE5;
    padding: 10px 30px 8px;
    border-radius: 30px;
    -webkit-transition: all .2s linear;
    transition: all .2s linear; }
    .button a i {
      padding-right: 5px; }
    .button a:hover {
      -webkit-transition: all .2s linear;
      transition: all .2s linear;
      -webkit-transform: translateY(-5px) rotate(0);
      transform: translateY(-5px) rotate(0);
      background: #004BE5;
      border: 1px #004BE5 solid;
      color: #fff; }
  .button.white a {
    border: 1px #fff solid;
    color: #fff; }
    .button.white a:hover {
      -webkit-transition: all .2s linear;
      transition: all .2s linear;
      background: rgba(255, 255, 255, .2);
      -webkit-transform: translateY(-5px) rotate(0);
      transform: translateY(-5px) rotate(0); }
  .button.dark a {
    border: 1px #333 solid;
    color: #333; }
    .button.dark a:hover {
      -webkit-transition: all .2s linear;
      transition: all .2s linear;
      -webkit-transform: translateY(-5px) rotate(0);
      transform: translateY(-5px) rotate(0);
      background: #333;
      border: 1px #333 solid;
      color: #fff; }
  .button.in a {
    border-radius: 0px;
    color: #fff;
    background: #004BE5;
    font-style: italic;
    padding: 10px 25px 10px 15px; }
  .button.in hr {
    background: #fff;
    height: 2px;
    border: 0;
    display: inline-block;
    width: 35px;
    vertical-align: middle;
    margin: 0 10px;
    -webkit-transition: all .2s linear;
    transition: all .2s linear; }
  .button.in.more {
    position: absolute;
    left: 45%;
    bottom: 0;
    width: 100%;
    text-align: left; }
    .button.in.more:hover a {
      -webkit-transition: all .5s;
      transition: all .5s;
      -webkit-transform: translateY(0px) rotate(0);
      transform: translateY(0px) rotate(0);
      width: 100%; }
    .button.in.more a {
      padding: 10px 15px 10px 25px;
      -webkit-transition: all .5s;
      transition: all .5s;
      text-align: left;
      width: 192px; }

.box-title {
  font-size: 30px;
  color: #01448F;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  letter-spacing: .05em;
  line-height: 2em;
  text-transform: uppercase; }
  .box-title span {
    font-size: 25px; }
  .box-title:after {
    position: absolute;
    content: '';
    height: 3px;
    width: 120%;
    background: #FAC524;
    bottom: 50%;
    left: -10%; }

.breadcrumb-container {
  background-color: #f8f8f8;
  border-bottom: 1px solid #f4f4f4; }
  .breadcrumb-container .breadcrumb {
    font-size: 13px;
    padding-left: 0;
    padding: 8px 0;
    text-transform: uppercase; }
    .breadcrumb-container .breadcrumb i, .breadcrumb-container .breadcrumb svg {
      padding-right: 5px; }
    .breadcrumb-container .breadcrumb > li {
      display: inline-block; }
      .breadcrumb-container .breadcrumb > li + li:before {
        padding: 0 5px;
        color: #ccc;
        content: "/"; }
    .breadcrumb-container .breadcrumb > .active {
      color: #777; }
    .breadcrumb-container .breadcrumb a {
      color: #304B7a; }

.pagination-container {
  padding: 30px 0; }
  .pagination-container .pagination {
    display: inline-block;
    padding-left: 0; }
    .pagination-container .pagination li {
      border-radius: 50%;
      display: inline-block; }
      .pagination-container .pagination li.active a, .pagination-container .pagination li:hover a {
        background-color: #004BE5; }
    .pagination-container .pagination a, .pagination-container .pagination span {
      line-height: 40px;
      border-radius: 50%;
      background-color: #fff;
      border: 1px solid #004BE5;
      margin-left: 4px;
      width: 40px;
      height: 40px;
      transition: all 0.45s ease;
      -webkit-transition: all 0.45s ease;
      min-width: 34px;
      text-align: center;
      display: block; }

#page_banner {
  padding: 10% 0 8%;
  position: relative;
  z-index: 0; }
  #page_banner .page_title {
    text-align: center; }
    #page_banner .page_title h2 {
      font-size: 46px;
      color: #fff;
      font-weight: bold;
      position: relative;
      display: inline-block;
      letter-spacing: .05em;
      line-height: 1.5em; }
      #page_banner .page_title h2 span {
        font-size: 26px;
        font-weight: normal; }
      #page_banner .page_title h2:after {
        position: absolute;
        content: '';
        height: 3px;
        width: 100%;
        background: #FAC524;
        bottom: 46%;
        left: 0%; }

#page_banner::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .4);
  z-index: -1; }

.about_banner {
  background: url(../_img/about/banner.jpg) top center no-repeat;
  background-size: cover; }

.product_banner {
  background: url(../_img/product/banner.jpg) top center no-repeat;
  background-size: cover; }

.contact_banner {
  background: url(../_img/contact/banner.jpg) top center no-repeat;
  background-size: cover; }

.service_banner {
  background: url(../_img/service/banner.jpg) top center no-repeat;
  background-size: cover; }

#about .about-box {
  padding: 100px 15px 60px;
  text-align: left; }
  #about .about-box.flex {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    #about .about-box.flex .box:last-child {
      padding: 5%;
      font-size: 24px;
      color: #01448F;
      font-weight: bold; }

.ser-box {
  text-align: left; }
  .ser-box .list {
    border-bottom: 1px #01448F solid;
    padding: 40px 0; }
    .ser-box .list.flex {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .ser-box .list.flex > div, .ser-box .list.flex > img {
        width: 50%; }
    .ser-box .list.no3 {
      padding: 20px 0 80px; }
      .ser-box .list.no3 .title {
        margin: 40px 0;
        margin-left: 5%; }
    .ser-box .list:last-child {
      border: 0; }
  .ser-box .title {
    font-size: 28px;
    color: #304B7A;
    font-weight: bold;
    border-left: 15px #FAC524 solid;
    padding-left: 15px;
    margin-left: 5%; }
  .ser-box .img-box {
    position: relative; }
    .ser-box .img-box p {
      position: absolute;
      top: 40%;
      left: 0%;
      width: 100%;
      text-align: center;
      font-size: 28px;
      font-weight: bold;
      color: #fff;
      padding-bottom: 20px; }
      .ser-box .img-box p:before {
        position: absolute;
        content: '';
        height: 15px;
        width: 16%;
        background: #FAC524;
        bottom: -20%;
        left: 42%; }

#product .ser-box {
  padding: 40px 0 60px; }

#product .text span {
  display: block;
  padding-left: 10%;
  max-width: 500px;
  margin-top: 20px;
  font-size: 18px; }

#product .pro-list {
  margin: 30px 5% 0; }
  #product .pro-list li {
    margin: 5px; }

.contact-info {
  display: inline-block;
  width: calc(40% - 4px);
  vertical-align: top; }
  .contact-info .text {
    margin: 30px 0;
    padding-top: 30px;
    color: #304B7a;
    border-top: 2px #FAC524 solid;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .contact-info .text p {
      font-size: 18px;
      margin: 0 0 10px 0;
      line-height: 1.5em;
      letter-spacing: .05em; }
      .contact-info .text p i {
        width: 20px;
        text-align: center;
        margin-right: 5px; }
    .contact-info .text a:hover {
      color: #004BE5; }

.contact-form {
  display: inline-block;
  width: calc(60% - 4px);
  vertical-align: top;
  padding: 10% 0% 0% 10%; }
  .contact-form label {
    font-size: 18px;
    display: inline-block;
    width: 80px; }
  .contact-form input {
    border: 0;
    display: inline-block;
    width: calc(100% - 85px);
    height: 40px;
    outline: none;
    font-size: 17px;
    font-family: 'Arial', 'Microsoft JhengHei' , '微軟正黑體' , sans-serif; }
  .contact-form textarea {
    width: 100%;
    outline: none;
    border: 1px #004BE5 solid;
    font-size: 17px;
    font-family: 'Arial', 'Microsoft JhengHei' , '微軟正黑體' , sans-serif;
    margin-top: 15px;
    padding: 5px; }
  .contact-form ul li {
    margin-bottom: 35px;
    border-bottom: 1px #004BE5 solid; }
    .contact-form ul li:last-child {
      border: 0; }
  .contact-form .button i {
    padding-left: 5px; }

/*----------------max-width:1680------------------*/
/* 1680 END */
/*----------------max-width:1440------------------*/
/* 1680 END */
/*----------------max-width:1200------------------*/
@media screen and (max-width: 1200px) {
  body {
    font-size: 15px; }
  .box-title {
    font-size: 24px;
    letter-spacing: 0;
    line-height: 1.5em; }
    .box-title span {
      font-size: 18px; }
    .box-title:after {
      width: 100%;
      bottom: 50%;
      left: 0%; }
  .idx_info {
    background: url(../_img/index/bg-01.jpg);
    color: #333; }
    .idx_info .title {
      font-size: 22px;
      letter-spacing: .1em;
      margin-bottom: 20px; }
      .idx_info .title span {
        font-size: 30px; }
    .idx_info .title2 {
      font-size: 21px;
      font-weight: bold;
      letter-spacing: 0;
      margin: 0px 0 20px; }
    .idx_info .px20 {
      font-size: 16px; }
    .idx_info .phone {
      margin: 5px 0;
      font-size: 20px; }
  #page_banner .page_title h2 {
    font-size: 30px; }
    #page_banner .page_title h2 span {
      font-size: 20px; }
  #about .main > img {
    padding: 15px; }
  #about .about-box {
    padding: 60px 15px 40px; }
    #about .about-box.flex .box:last-child {
      font-size: 20px; }
  .contact-info .text {
    display: block; }
    .contact-info .text .qr {
      margin: 10px 0; } }

/*1200*/
/*----------------max-width:1024------------------*/
@media screen and (max-width: 1024px) {
  .main {
    padding: 60px 0; }
  header {
    min-height: 100px; }
  #logo {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 10px 5px; }
  .header-container {
    height: 0px; }
  .collapse-button {
    display: block;
    position: absolute;
    right: 10px;
    top: 50px;
    width: 40px;
    background-color: #004BE5;
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
    border-radius: 4px 4px 4px 4px;
    color: #FFF;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 1px 0 rgba(255, 255, 255, .075);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 1px 0 rgba(255, 255, 255, .075);
    padding: 12px 0;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
    background: #fff;
    cursor: pointer;
    font-size: 0.875em;
    text-align: center;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .collapse-button:hover, .collapse-button:focus {
      color: #FFF; }
    .collapse-button .icon-bar {
      background-color: #304B7a;
      border-radius: 1px 1px 1px 1px;
      display: block;
      height: 2px;
      width: 18px;
      margin: 2px auto;
      -webkit-transition: all .3s;
      transition: all .3s; }
    .collapse-button.spread-out .icon-bar {
      width: 24px;
      -webkit-transition: all .3s;
      transition: all .3s; }
      .collapse-button.spread-out .icon-bar:first-child {
        -webkit-transform: translateY(2px) rotate(45deg);
        transform: translateY(2px) rotate(45deg); }
      .collapse-button.spread-out .icon-bar:nth-child(2) {
        display: none; }
      .collapse-button.spread-out .icon-bar:last-child {
        -webkit-transform: translateY(-2px) rotate(-45deg);
        transform: translateY(-2px) rotate(-45deg); }
    .collapse-button.spread-out :after {
      margin-top: 6px; }
  /* main-nav */
  #main-nav {
    position: relative;
    z-index: 999999;
    width: 100%;
    background: rgba(255, 255, 255, .8);
    border: 2px #004BE5 solid;
    max-height: 0;
    overflow: hidden;
    top: -1000px;
    -webkit-transition: 1.5s cubic-bezier(0.925, -0.365, 0.2, 1.455);
    transition: 1.5s cubic-bezier(0.925, -0.365, 0.2, 1.455); }
    #main-nav ul {
      margin: 0;
      display: inline;
      display: initial; }
      #main-nav ul li {
        display: block;
        width: 100% !important;
        padding: .5em 0;
        border-bottom: 1px dotted #004BE5; }
        #main-nav ul li a {
          padding: 10px 10px 7px;
          color: #004BE5;
          font-weight: bold;
          border: 0;
          font-size: 18px;
          line-height: 1em; }
        #main-nav ul li.text-box p {
          display: none; }
    #main-nav.active {
      max-height: 3000px;
      top: 0px;
      -webkit-transition: all 0.8s cubic-bezier(0.925, -0.365, 0.2, 1.455);
      transition: all 0.8s cubic-bezier(0.925, -0.365, 0.2, 1.455); } }

/* 1024 END */
/*----------------max-width:768-------------------*/
@media screen and (max-width: 768px) {
  .flex {
    display: block; }
    .flex .box {
      width: 100%;
      margin-bottom: 60px; }
      .flex .box:last-child {
        margin-bottom: 0; }
  #page_banner {
    padding: 50px 0; }
    #page_banner .page_title h2 {
      font-size: 20px; }
      #page_banner .page_title h2 span {
        font-size: 15px; }
  .ser-box .list {
    padding: 20px 0; }
    .ser-box .list.flex div, .ser-box .list.flex img {
      width: 100%; }
    .ser-box .list.flex img {
      margin: 20px 0; }
    .ser-box .list.no3 {
      padding: 20px 0 40px; }
      .ser-box .list.no3 .title {
        margin: 0 0 20px; }
      .ser-box .list.no3 img {
        margin: 0 0 10px; }
  .ser-box .title {
    font-size: 20px;
    border-left: 5px #FAC524 solid;
    padding-left: 10px;
    margin: 0; }
  .ser-box .img-box p {
    position: static;
    position: initial;
    text-align: left;
    font-size: 16px;
    color: #333;
    padding-bottom: 0; }
    .ser-box .img-box p:before {
      display: none; }
  #about .about-box {
    padding: 40px 15px 0px; }
    #about .about-box.flex .box {
      margin-bottom: 20px; }
      #about .about-box.flex .box:last-child {
        font-size: 18px;
        padding: 0; }
  #product .ser-box {
    padding: 20px 0 40px; }
  .contact-info {
    display: block;
    width: 100%; }
    .contact-info .text {
      margin: 20px 0;
      padding-top: 20px; }
      .contact-info .text p {
        font-size: 16px;
        margin: 0 0 5px 0;
        line-height: 1.5em;
        letter-spacing: .05em; }
        .contact-info .text p i {
          width: 20px;
          text-align: center;
          margin-right: 5px; }
    .contact-info iframe {
      height: 300px; }
  .contact-form {
    display: block;
    width: 100%;
    padding: 30px 5px 0; }
    .contact-form label {
      font-size: 17px; }
    .contact-form input {
      width: calc(100% - 85px); }
    .contact-form textarea {
      font-size: 15px; }
    .contact-form ul li {
      margin-bottom: 20px; } }

/* 768 END */
/*----------------max-width:575-------------------*/
@media screen and (max-width: 575px) {
  footer {
    font-size: 16px;
    padding: 25px 0 0; }
    footer .f-info-box {
      display: block; }
      footer .f-info-box .info {
        padding: 10px 0 15px;
        text-align: center; }
    footer .copyright {
      font-size: 15px;
      background: #01448F;
      padding: 15px 15px 12px; } }

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

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