@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto);
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: 2;
  font-family: '微軟正黑體' , 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(20, 129, 184, 0.8);
    z-index: 99999;
    display: block; }

.pace-inactive {
  display: none; }

.pace .pace-progress {
  background: #1481B8;
  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; }

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

header {
  position: fixed;
  width: 100%;
  z-index: 9999;
  background: #fff;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear; }
  header .header_top {
    color: #fff;
    background: url(../_img/header_bg.jpg) top center no-repeat;
    display: block;
    padding: 10px 0;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear; }
    header .header_top .fa_mail {
      color: #1481B8; }
    header .header_top .header_contact_mail {
      color: #ccc;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: inline-block; }
      header .header_top .header_contact_mail p {
        display: inline-block; }
      header .header_top .header_contact_mail .facebook_link {
        float: right;
        padding-top: 5px; }
      header .header_top .header_contact_mail a:hover {
        color: #fff; }
    header .header_top .header_contact_phone {
      display: inline-block; }
      header .header_top .header_contact_phone li {
        display: inline-block;
        font-size: 20px;
        line-height: 1; }
        header .header_top .header_contact_phone li a:hover {
          opacity: .9; }
      header .header_top .header_contact_phone .fax {
        padding-left: 10px; }
    header .header_top i {
      font-size: 20px;
      padding: 0 6px 0 10px; }
  header .header_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1rem 0;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear; }
  header #logo {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    white-space: nowrap; }
    header #logo img {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      -webkit-transition: all .1s linear;
      -o-transition: all .1s linear;
      transition: all .1s linear; }
  header nav {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -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; }
    header nav .menu {
      width: 100%;
      font-size: 0; }
      header nav .menu .nav-item {
        font-size: 20px;
        text-align: center;
        display: inline-block;
        width: 25%;
        position: relative; }
        header nav .menu .nav-item:hover .sub-menu {
          display: block; }
        header nav .menu .nav-item .sub-menu {
          display: none;
          min-width: 100%;
          position: absolute;
          min-width: 100%;
          background-color: #47b4eb;
          border-radius: 5px;
          -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
          padding-top: .5rem;
          padding-bottom: 1rem; }
          header nav .menu .nav-item .sub-menu > li {
            padding-left: 1rem;
            padding-right: 1rem; }
            header nav .menu .nav-item .sub-menu > li:hover > a, header nav .menu .nav-item .sub-menu > li.active > a {
              color: #343434; }
              header nav .menu .nav-item .sub-menu > li:hover > a::after, header nav .menu .nav-item .sub-menu > li.active > a::after {
                display: none; }
            header nav .menu .nav-item .sub-menu > li > a {
              display: block;
              color: #fff;
              border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
              padding: 5px;
              text-align: left;
              font-size: 1rem;
              font-weight: bold; }
        header nav .menu .nav-item > a {
          display: inline-block; }
          header nav .menu .nav-item > a:hover {
            color: #1481B8;
            position: relative; }
            header nav .menu .nav-item > a:hover:after {
              content: '';
              background: #1481B8;
              width: 100%;
              height: 4px;
              display: block;
              position: absolute; }
    header nav .active > a {
      color: #1481B8;
      display: inline-block;
      position: relative; }
      header nav .active > a:after {
        content: '';
        background: #1481B8;
        width: 100%;
        height: 4px;
        display: block;
        position: absolute; }

.scroll {
  background: #fff;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  font-size: 16px;
  -webkit-box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.1); }
  .scroll .header_top {
    padding: 5px 0;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear; }
    .scroll .header_top .header_contact_mail .facebook_link {
      padding-top: 8px; }
    .scroll .header_top .header_contact_phone li {
      font-size: 16px; }
    .scroll .header_top i {
      font-size: 16px; }
  .scroll .header_container {
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    padding: 10px 0; }
  .scroll #logo img {
    width: 70%;
    -webkit-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear; }
  .scroll h1 {
    font-size: 26px;
    line-height: 1; }

h1 {
  display: inline-block;
  vertical-align: middle;
  font-size: 42px;
  line-height: 2; }

h3 {
  font-size: 28px;
  text-align: center;
  margin-bottom: 2rem; }
  h3:after {
    content: '';
    display: block;
    height: 10px;
    width: 100%;
    background: url(../_img/underline.jpg) center center no-repeat; }

h4 {
  font-size: 20px;
  padding-bottom: 1rem; }

footer {
  background: #000;
  color: #ccc;
  padding: 1rem 0;
  line-height: 3; }
  footer .info {
    display: inline-block;
    padding-right: 40px; }
  footer .fb {
    display: inline-block;
    width: 30%;
    text-align: right; }
    footer .fb i {
      font-size: 20px;
      margin-right: 10px; }
  footer .copyright {
    color: #707070;
    display: block; }
  footer a:hover {
    opacity: .7; }

#banner {
  width: 100%;
  height: 100%;
  position: relative; }
  #banner:before {
    content: '';
    width: 100%;
    height: 160px;
    display: block; }
  #banner .bg_img {
    padding-bottom: 30%;
    height: 0;
    display: block;
    background-size: cover; }
  #banner .slider {
    width: 100%;
    height: 100%; }
  #banner .slick-slider {
    margin: 0; }
  #banner .slick-prev, #banner .slick-next {
    width: 64px;
    height: 64px;
    opacity: 1;
    z-index: 500;
    top: 48%; }
    #banner .slick-prev:before, #banner .slick-next:before {
      width: 64px;
      height: 64px;
      font-size: 50px;
      display: block;
      z-index: 500;
      color: #000; }
  #banner .slick-prev {
    left: 5%; }
    #banner .slick-prev:before {
      content: '';
      background: url(../_img/arrow_left.png) center center no-repeat; }
  #banner .slick-next {
    right: 5%; }
    #banner .slick-next:before {
      content: '';
      background: url(../_img/arrow_right.png) center center no-repeat; }

#index #index_product {
  padding: 2rem 0; }
  #index #index_product .index_product_wrapper {
    padding: 0 0 2rem; }
  #index #index_product .col-3 {
    margin-bottom: 2rem; }

.button_style {
  border: 1px solid #1481B8;
  border-radius: 8px;
  color: #1481B8;
  padding: 10px 15px;
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear; }
  .button_style:hover {
    background: #1481B8;
    color: #fff;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear; }

#page_banner {
  padding: 3rem 0;
  background: url(../_img/page_banner.jpg) bottom center no-repeat; }
  #page_banner h2 {
    color: #fff;
    font-family: 'Roboto';
    font-size: 48px;
    text-align: center; }
  #page_banner:before {
    content: '';
    width: 100%;
    height: 160px;
    display: block; }

.page_container {
  padding-top: 3rem;
  padding-bottom: 10%; }

.page_container2 {
  padding-top: 3rem;
  padding-bottom: 3rem; }

#about p {
  margin-bottom: 2rem; }

#news .news_list, #news .news_detail {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px #ddd solid; }

#news .date {
  color: #ccc; }

#news .title {
  font-size: 24px; }

#news .description {
  margin-bottom: 2rem; }

#news .title a:hover, #news .description a:hover {
  color: #1481B8; }

#product #side_menu .metismenu > li {
  padding: 1rem 0;
  border-bottom: 1px #ddd solid; }
  #product #side_menu .metismenu > li a {
    display: inline-block;
    padding-left: 5px; }
    #product #side_menu .metismenu > li a:hover {
      color: #1481B8; }
  #product #side_menu .metismenu > li:before {
    content: '\f105';
    font-family: 'FontAwesome';
    font-size: 12px;
    line-height: 1.4;
    width: 16px;
    height: 16px;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background: #316291;
    border-radius: 50%; }

#product #side_menu .metismenu .second_menu {
  padding-left: 20px; }
  #product #side_menu .metismenu .second_menu li {
    padding-bottom: 10px; }
    #product #side_menu .metismenu .second_menu li:before {
      content: '\f105';
      font-family: 'FontAwesome';
      font-size: 12px;
      line-height: 1.2;
      width: 16px;
      height: 16px;
      color: #1481B8;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      border: 1px #ddd solid;
      border-radius: 50%; }

#product #main_content .product_wrapper {
  font-size: 0; }
  #product #main_content .product_wrapper .item {
    width: calc(100% / 3 - 40px);
    font-size: 1rem;
    display: inline-block;
    vertical-align: top;
    margin: 0 20px 40px;
    text-align: center; }

#product #main_content .product_detail .slider-nav li {
  padding: 10px; }

#product #main_content .product_description section {
  margin-bottom: 3rem; }

#product #main_content .product_description h5 {
  color: #1481B8;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px; }

#product #main_content .product_description .similar {
  text-align: center; }

#product #main_content .product_description .slick-slider {
  margin-bottom: 0;
  width: 90%;
  margin: auto; }

#product #main_content .product_description .slick-prev, #product #main_content .product_description .slick-next {
  z-index: 9;
  top: 40%; }
  #product #main_content .product_description .slick-prev:before, #product #main_content .product_description .slick-next:before {
    font-family: 'FontAwesome';
    font-size: 20px;
    line-height: 2;
    opacity: .75;
    color: #ccc;
    width: 40px;
    height: 40px;
    display: block;
    border: 1px #ddd solid;
    border-radius: 50%; }
  #product #main_content .product_description .slick-prev:hover:before, #product #main_content .product_description .slick-next:hover:before {
    background: #1481B8;
    color: #fff; }

#product #main_content .product_description .slick-prev {
  left: -50px; }
  #product #main_content .product_description .slick-prev:before {
    content: '\f104'; }

#product #main_content .product_description .slick-next:before {
  content: '\f105'; }

#contact .contact_form {
  border: 1px #eee solid;
  padding: 1rem 2rem; }
  #contact .contact_form .form_style input, #contact .contact_form .form_style textarea {
    background: #eee;
    border: none;
    font-size: 1rem;
    font-family: '微軟正黑體' , sans-serif;
    padding: 10px;
    width: 100%; }
  #contact .contact_form .form_style li {
    margin: 1.5rem 0; }
  #contact .contact_form .form_style .send {
    text-align: center;
    background: #1481B8;
    color: #fff;
    border-radius: 6px; }
    #contact .contact_form .form_style .send a {
      display: block; }
    #contact .contact_form .form_style .send:hover {
      background: #316291; }

#contact .information {
  padding-left: 3rem; }
  #contact .information h6 {
    color: #1481B8; }
  #contact .information li {
    margin-bottom: 20px; }
    #contact .information li a:hover {
      color: #666;
      text-decoration: underline; }

.product_figure {
  position: relative; }
  .product_figure img {
    position: relative;
    z-index: 1; }

.product_img_color {
  position: absolute;
  z-index: 10;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  text-align: center;
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
  background: rgba(20, 129, 184, 0.65); }
  .product_img_color:hover {
    opacity: 1; }

.pagination {
  text-align: center; }
  .pagination li {
    margin: 0 5px;
    text-align: center;
    display: inline-block; }
    .pagination li a {
      width: 40px;
      height: 40px;
      line-height: 2.2;
      display: inline-block;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      vertical-align: middle;
      text-align: center;
      border: 1px #ddd solid;
      border-radius: 50%; }
      .pagination li a:hover {
        color: #fff;
        background: #1481B8; }
        .pagination li a:hover i {
          color: #fff; }
    .pagination li i {
      color: #ccc;
      line-height: 2.3; }

.back {
  text-align: center;
  margin-top: 2rem; }

@media only screen and (max-width: 768px) {
  header {
    /*nav*/ }
    header .header_container {
      z-index: 9999;
      width: 96%; }
    header #logo {
      width: 100%;
      display: block; }
      header #logo img {
        margin-top: 10px; }
    header nav {
      width: 100%;
      height: 0;
      top: 0;
      left: 0;
      padding: 0;
      z-index: 9999;
      visibility: hidden;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transform: translate3D(0, -100%, 0);
      -ms-transform: translate3D(0, -100%, 0);
      transform: translate3D(0, -100%, 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 {
        position: absolute;
        top: 20vh; }
        header nav .menu .nav-item {
          display: block;
          width: 100%;
          margin-bottom: 3rem; }
          header nav .menu .nav-item .sub-menu {
            display: none !important; }
      header nav.active {
        position: fixed;
        visibility: visible;
        height: 100%;
        z-index: 9999;
        background: #000;
        -webkit-transform: translate3D(0, 0, 0);
        -ms-transform: translate3D(0, 0, 0);
        transform: translate3D(0, 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: 35%;
    right: 3%;
    width: 35px;
    height: 20px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.5);
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    z-index: 99999;
    cursor: pointer; }
    #phone_icon .button:before, #phone_icon .button:after {
      content: "";
      position: absolute;
      top: 20%;
      width: 100%;
      height: 3px;
      background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%; }
    #phone_icon .button:after {
      content: "";
      top: 60%; }
    #phone_icon .button.action {
      display: block;
      width: 30px;
      height: 20px;
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      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; }
      #phone_icon .button.action:before {
        top: 50%;
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        background: #fff; }
      #phone_icon .button.action:after {
        top: 50%;
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        background: #fff; } }

/*----------------max-width:1024------------------*/
@media screen and (max-width: 1024px) {
  .container {
    width: 96%; }
  header .header_top {
    background: url(../_img/header_bg.jpg) -520px 0px no-repeat; }
    header .header_top .header_contact_phone li {
      font-size: 1rem; }
    header .header_top i {
      font-size: 1rem; }
  footer .fb {
    width: auto; } }

/* 1024 END */
/*----------------max-width:768-------------------*/
@media screen and (max-width: 768px) {
  .header_mail {
    display: none; }
  header .header_top {
    background: url(../_img/header_bg.jpg) left top no-repeat; }
    header .header_top .container {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      text-align: center;
      margin: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    header .header_top .header_contact_mail p {
      padding: 0; }
    header .header_top .header_contact_mail .facebook_link {
      float: none; }
    header .header_top .fa_mail {
      color: #ccc; }
    header .header_top .header_contact_phone .fax {
      font-size: 0;
      display: none; }
      header .header_top .header_contact_phone .fax i {
        font-size: 0;
        display: none; }
    header .header_top .col-8, header .header_top .col-4 {
      width: auto;
      float: none;
      padding: 0; }
    header .header_top i {
      padding: 0 1rem;
      color: #ccc; } }

/* 768 END */
/*----------------max-width:667-------------------*/
@media screen and (max-width: 667px) {
  header #logo img {
    width: 100%; }
  header h1 {
    font-size: 30px; }
  header .header_container {
    padding: 0; }
  .scroll #logo img {
    width: 100%; }
  #index #index_product .col-3 {
    width: 50%;
    margin-bottom: 3rem; }
  #banner:before {
    content: '';
    width: 100%;
    height: 115px;
    display: block; }
  #banner .slick-prev, #banner .slick-next {
    top: 30%; }
  #banner .slick-prev {
    left: 0; }
  #banner .slick-next {
    right: 0; }
  #page_banner {
    padding: 1rem 0; }
    #page_banner h2 {
      font-size: 30px; }
    #page_banner:before {
      content: '';
      width: 100%;
      height: 100px;
      display: block; }
  .page_container {
    padding-top: 1rem; }
  #about .col-4 {
    display: none; }
  #about .col-8 {
    width: 100%;
    float: none; }
  #news .news_list .col-3, #news .news_list .col-9 {
    float: none;
    width: 100%; }
  #product .col-3, #product .col-9 {
    float: none;
    width: 100%; }
  #product .product_title {
    background: #316291;
    border-radius: 5px;
    color: #fff;
    text-align: center; }
  #product .sidebar-nav {
    display: block;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all .8s linear;
    -o-transition: all .8s linear;
    transition: all .8s linear; }
    #product .sidebar-nav.active {
      max-height: 800px;
      -webkit-transition: all .8s linear;
      -o-transition: all .8s linear;
      transition: all .8s linear; }
  #product #main_content .product_wrapper {
    margin-top: 2rem; }
    #product #main_content .product_wrapper .item {
      width: calc(100% / 2);
      margin: 0; }
  #product #main_content .product_detail .col-7, #product #main_content .product_detail .col-5 {
    float: none;
    width: 100%; }
  #product #main_content .product_description {
    margin-top: 2rem; }
    #product #main_content .product_description .slick-prev {
      left: -20px; }
    #product #main_content .product_description .slick-next {
      right: -10px; }
  #contact .col-6 {
    float: none;
    width: 100%; }
  #contact .contact_form {
    border-right: none;
    border-left: none; }
  #contact .information {
    padding: 2rem 1rem 0; }
  .googlemap iframe {
    height: 30vh; }
  footer {
    line-height: 2.5; }
    footer .info {
      padding-right: 0;
      display: block; } }

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