@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Catamaran:100);
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
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: #222028;
  line-height: 1.6;
  font-family: 'Catamaran', '微軟正黑體', 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(155, 32, 18, 0.8);
    z-index: 99999;
    display: block; }

.pace-inactive {
  display: none; }

.pace .pace-progress {
  background: #9B2012;
  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: 10;
  width: 1300px;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px; }

.container_white {
  margin: auto;
  position: relative;
  z-index: 10;
  width: 1300px;
  max-width: 100%;
  background: #fff; }

.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; }
  .pic > span {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center; }
    .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; }
  .editor i {
    font-style: italic; }
  .editor em, .editor b, .editor strong {
    font-weight: bold; }
  .editor img {
    height: auto !important; }

header {
  background: -webkit-gradient(linear, left top, left bottom, from(#13171f), to(#080a0d));
  background: -webkit-linear-gradient(#13171f 0%, #080a0d 100%);
  background: -o-linear-gradient(#13171f 0%, #080a0d 100%);
  background: linear-gradient(#13171f 0%, #080a0d 100%); }
  header .header_container {
    width: 1300px;
    margin: auto; }
  header #logo {
    display: none; }
  header ul {
    font-size: 0;
    padding: 20px 0; }
    header ul li {
      color: #fff;
      font-size: 1rem;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      width: calc(100% / 7 - 10px);
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      height: 100px;
      font-size: 0;
      position: relative;
      margin: 0 5px; }
      header ul li:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%; }
      header ul li a {
        display: inline-block;
        vertical-align: middle;
        font-size: 1rem;
        position: relative;
        top: 0; }
      header ul li:hover {
        background: #9B2012; }
        header ul li:hover a {
          position: relative;
          top: 10px; }
        header ul li:hover:after {
          content: url(../_img/layout/menu_hover_icon.png);
          width: 49px;
          height: 10px;
          display: block;
          position: absolute;
          top: 25px;
          left: 0;
          right: 0;
          margin: auto; }
    header ul .active {
      background: #9B2012; }
      header ul .active a {
        position: relative;
        top: 10px; }
      header ul .active:after {
        content: url(../_img/layout/menu_hover_icon.png);
        width: 49px;
        height: 10px;
        display: block;
        position: absolute;
        top: 25px;
        left: 0;
        right: 0;
        margin: auto; }
      header ul .active:hover {
        opacity: .8; }
    header ul .logo a {
      top: 0; }
    header ul .logo:hover {
      background: none; }
      header ul .logo:hover a {
        top: 0; }
      header ul .logo:hover:after {
        content: '';
        top: 0; }
  header .headerbg {
    background: url(../_img/layout/header_bg.png) left top; }
  header:after {
    display: block;
    height: 0;
    clear: both;
    content: "";
    visibility: hidden; }

a {
  -webkit-transition: all linear .3s;
  -o-transition: all linear .3s;
  transition: all linear .3s; }
  a:hover {
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s; }

h3 {
  font-size: 1.875rem;
  text-align: center;
  color: #aaa; }
  h3 b {
    color: #333; }

h4 {
  font-size: 1.25rem;
  text-align: center;
  line-height: 110%;
  margin-bottom: 2rem; }
  h4:after {
    content: url(../_img/layout/main_icon.png);
    width: 49px;
    height: 10px;
    display: block;
    margin: auto; }

::-moz-selection {
  background: rgba(155, 32, 18, 0.5); }

::selection {
  background: rgba(155, 32, 18, 0.5); }

/*------------#about------------*/
#about {
  background: url(../_img/about_bg.jpg) top center no-repeat;
  padding: 4rem 10px;
  height: 760px; }
  #about section {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 30%;
    margin-left: 70px;
    padding: 50px 20px;
    line-height: 200%; }
    #about section h3 b {
      color: #fff; }

/*------------#news------------*/
#news .col-4 {
  font-size: 0; }

#news #figure_img {
  background: url(../_img/news_bg.jpg) 10px 0 no-repeat;
  background-size: cover;
  min-height: 860px; }

#news #news_list {
  padding: 3.5rem 8rem; }
  #news #news_list .list li {
    border-bottom: 1px #ddd solid;
    line-height: 200%;
    padding: 12px 0 10px; }
    #news #news_list .list li b {
      color: #999;
      margin: 0 1rem; }
    #news #news_list .list li:hover {
      color: #9B2012; }
  #news #news_list .detail .title {
    font-size: 1.25rem; }
  #news #news_list .detail .date {
    color: #999; }
  #news #news_list .detail .editor {
    border-top: 1px #ddd solid;
    border-bottom: 1px #ddd solid;
    padding: 10px 0; }

/*------------#qa------------*/
#qa {
  padding-top: 3rem;
  padding-bottom: 3rem; }
  #qa .qa {
    width: 70%;
    margin: auto; }
    #qa .qa ul {
      border-bottom: 1px solid #ddd;
      font-size: 0; }
      #qa .qa ul li {
        padding: 0 1rem;
        cursor: pointer;
        font-size: 1rem; }
        #qa .qa ul li b {
          color: #999;
          margin-right: 1%;
          display: inline-block;
          width: 3%;
          vertical-align: middle; }
        #qa .qa ul li > p {
          width: 96%;
          display: inline-block;
          margin-bottom: 1%; }
        #qa .qa ul li .ans {
          vertical-align: middle; }
    #qa .qa .question b {
      vertical-align: middle; }
    #qa .qa .question p {
      vertical-align: middle;
      padding-top: 12px;
      color: #000; }
      #qa .qa .question p:after {
        content: '+';
        float: right;
        color: #999; }
    #qa .qa .answer b {
      vertical-align: middle; }
    #qa .qa .answer p {
      vertical-align: top;
      color: #333; }

/*------------#contact------------*/
#contact .container_white {
  background: url(../_img/contact_bg.jpg) #fff no-repeat;
  background-position: right top; }
  #contact .container_white .row {
    padding-top: 3rem;
    padding-bottom: 3rem; }
  #contact .container_white #easontile {
    padding-left: 5rem; }
    #contact .container_white #easontile h1 {
      font-size: 1.25rem; }
    #contact .container_white #easontile ul li {
      color: #000;
      line-height: 200%;
      margin-top: 0.5rem; }
      #contact .container_white #easontile ul li .icon {
        width: 25px;
        height: auto; }
      #contact .container_white #easontile ul li b {
        color: #666;
        font-size: 0.875rem; }
  #contact .container_white #contact_form {
    padding: 1rem 2em 1rem; }
    #contact .container_white #contact_form section {
      background: #fff;
      padding: 1rem; }
      #contact .container_white #contact_form section ul {
        font-size: 0; }
        #contact .container_white #contact_form section ul li {
          border-bottom: 1px solid #ccc;
          margin: 10px 0; }
          #contact .container_white #contact_form section ul li:last-child {
            border-bottom: none;
            padding-top: 20px; }
      #contact .container_white #contact_form section form input, #contact .container_white #contact_form section form textarea {
        color: #666;
        border: none;
        font-family: '微軟正黑體', sans-serif;
        font-size: 1rem;
        width: 100%;
        display: inline-block;
        padding: 5px; }
      #contact .container_white #contact_form section form textarea {
        height: 145px;
        max-height: 145px;
        max-width: 100%; }
      #contact .container_white #contact_form section .width1 {
        width: 49%;
        font-size: 1rem;
        display: inline-block;
        margin-right: 1%; }
      #contact .container_white #contact_form section .width2 {
        width: 49%;
        font-size: 1rem;
        display: inline-block;
        margin-left: 1%; }

/*------------------------------*/
.more {
  text-align: center;
  color: #333;
  font-size: 1rem; }
  .more a {
    display: inline-block;
    border: 1px solid #aaa;
    width: 20%;
    padding: 10px 0;
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s; }
    .more a:hover {
      color: #fff;
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      background: #9B2012; }

.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;
      height: 32px;
      line-height: 200%;
      vertical-align: middle; }
      .pagination ul li a:hover, .pagination ul li a.selected {
        color: #fff;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s;
        background: #9B2012; }
      .pagination ul li.prev, .pagination ul li.p_next {
        background: #000;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
        .pagination ul li.prev img, .pagination ul li.p_next img {
          width: 30%;
          height: 30%;
          vertical-align: middle; }
  .pagination .back {
    vertical-align: middle;
    width: 32px;
    height: 32px;
    display: inline-block;
    background: #000;
    margin-right: 1rem; }
    .pagination .back:before {
      content: '';
      background: url(../_img/layout/arrow_prev.png) center center no-repeat;
      background-size: 10px 16px;
      width: 32px;
      height: 32px;
      display: block;
      vertical-align: middle;
      padding: 5px; }
    .pagination .back:hover {
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      background: #9B2012; }
  .pagination .next {
    vertical-align: middle;
    background: #000;
    margin-left: 1rem;
    width: 32px;
    height: 32px;
    display: inline-block; }
    .pagination .next:after {
      content: '';
      background: url(../_img/layout/arrow_next.png) center center no-repeat;
      background-size: 10px 16px;
      width: 32px;
      height: 32px;
      display: block;
      vertical-align: middle;
      padding: 5px; }
    .pagination .next:hover {
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      background: #9B2012; }

.text_right {
  text-align: right; }

/*------------------------------*/
footer {
  background: #13171F;
  color: #999; }
  footer a:hover {
    color: #fff; }
  footer #footer {
    position: relative; }
    footer #footer .row {
      padding: 20px 0; }
    footer #footer #item_list {
      font-size: 0; }
      footer #footer #item_list ul {
        font-size: 1rem; }
        footer #footer #item_list ul li {
          line-height: 200%;
          display: inline-block;
          vertical-align: top;
          padding-right: 2rem;
          width: 25%; }
      footer #footer #item_list h6 {
        font-size: 1rem; }
    footer #footer #information ul {
      font-size: 0; }
      footer #footer #information ul li {
        font-size: 1rem;
        display: inline-block;
        vertical-align: top;
        margin-bottom: 2rem; }
        footer #footer #information ul li a {
          display: block; }
          footer #footer #information ul li a.icon {
            width: 30px;
            height: auto;
            display: inline-block;
            margin-top: 10px;
            margin-left: 10px; }
          footer #footer #information ul li a .footer-icon {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start; }
            footer #footer #information ul li a .footer-icon .icon-line {
              width: 50px;
              height: 40px;
              background: url(../_img/linefoot_over.svg);
              background-repeat: no-repeat;
              display: block;
              -webkit-transition: all .2s ease;
              -o-transition: all .2s ease;
              transition: all .2s ease; }
            footer #footer #information ul li a .footer-icon .icon-instagram {
              width: 50px;
              height: 40px;
              background: url(../_img/instagramfoot_over.svg);
              background-repeat: no-repeat;
              display: block;
              -webkit-transition: all .2s ease;
              -o-transition: all .2s ease;
              transition: all .2s ease; }
          footer #footer #information ul li a:hover .fa {
            background: #9B2012;
            -webkit-transition: all linear .3s;
            -o-transition: all linear .3s;
            transition: all linear .3s; }
          footer #footer #information ul li a:hover .footer-icon .icon-line {
            background-image: url(../_img/line_over.svg); }
          footer #footer #information ul li a:hover .footer-icon .icon-instagram {
            background-image: url(../_img/instagram_over.svg); }
        footer #footer #information ul li:nth-child(odd) {
          width: 42%; }
        footer #footer #information ul li:nth-child(even) {
          width: 58%; }
      footer #footer #information ul h5 {
        font-size: 0.875rem; }
      footer #footer #information ul h6 {
        font-size: 1rem;
        color: #fff;
        font-weight: normal; }
      footer #footer #information ul .fa {
        width: 40px;
        height: 40px;
        background: #010712;
        display: block;
        float: left;
        margin-right: 10px;
        border-radius: 50px;
        text-align: center;
        vertical-align: middle;
        line-height: 250%;
        color: #fff;
        font-size: 1rem;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
    footer #footer #top {
      width: 38px;
      height: 60px;
      padding-top: 12px;
      background: #9B2012;
      font-size: 0.75rem;
      color: #fff;
      text-align: center;
      cursor: pointer;
      float: right;
      top: 0;
      right: 0;
      position: absolute;
      -webkit-box-shadow: 3px 3px 5px #010712;
      box-shadow: 3px 3px 5px #010712;
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s; }
      footer #footer #top:hover {
        background: #7B1A0F;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
  footer #copyright {
    background: #010712;
    color: #666;
    font-size: 0.813rem;
    padding: 10px 0; }
    footer #copyright .col-6 {
      float: right; }
    footer #copyright .footer_main_menu {
      font-size: 0;
      text-align: right; }
      footer #copyright .footer_main_menu li {
        font-size: 0.875rem;
        color: #999;
        display: inline-block;
        padding-right: 1rem; }
        footer #copyright .footer_main_menu li:after {
          content: '';
          height: 10px;
          width: 1px;
          background: #333;
          display: inline-block;
          margin-left: 1rem; }
        footer #copyright .footer_main_menu li:last-child:after {
          width: 0; }
    footer #copyright .design {
      opacity: .6; }
      footer #copyright .design:hover {
        text-decoration: underline; }

.search {
  background: #9B2012;
  padding: 10px 15px;
  position: fixed;
  right: 0px;
  top: 55%;
  z-index: 999;
  color: #ffffff; }

.search-box {
  padding: 30px;
  width: 55%;
  position: relative; }
  .search-box .box {
    width: 90%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .search-box .close-box {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 25px; }
  .search-box .search-form-control {
    width: 80%;
    border-radius: 10px;
    border: 1px solid #666;
    padding: 15px;
    outline: none; }
  .search-box .btn-submit {
    height: 45px;
    padding: 10px 20px;
    background-color: #9B2012;
    border: 0;
    border-radius: 10px;
    margin-left: 20px;
    color: #ffffff; }

/*------------#index------------*/
#banner {
  width: 100%;
  overflow: hidden; }
  #banner .container {
    padding-left: 0;
    padding-right: 0; }
  #banner .slick-prev {
    vertical-align: middle;
    left: 0;
    background: #000;
    z-index: 1; }
    #banner .slick-prev:before {
      content: '';
      background: url(../_img/layout/arrow_prev.png) center center no-repeat;
      width: 38px;
      height: 80px;
      display: inline-block;
      vertical-align: middle;
      padding: 5px; }
    #banner .slick-prev:hover {
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      background: #9B2012; }
  #banner .slick-next {
    vertical-align: middle;
    right: 0;
    background: #000; }
    #banner .slick-next:after {
      content: '';
      background: url(../_img/layout/arrow_next.png) center center no-repeat;
      width: 38px;
      height: 80px;
      display: inline-block;
      vertical-align: middle;
      padding: 5px; }
    #banner .slick-next:hover {
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      background: #9B2012; }
  #banner .slick-list {
    overflow: visible; }
  #banner .item {
    width: 100%;
    position: relative;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s; }
    #banner .item.slick-active {
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s; }
      #banner .item.slick-active:before {
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s;
        background-color: rgba(0, 0, 0, 0); }
    #banner .item:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.8);
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s; }

#index_product {
  padding: 40px 20px;
  font-size: 0; }
  #index_product #product_items li {
    width: 25%;
    display: inline-block;
    font-size: 1rem;
    text-align: center;
    position: relative;
    margin-top: 20px;
    margin-bottom: 50px; }
    #index_product #product_items li figure {
      position: relative;
      width: 280px;
      height: 280px;
      margin: auto;
      overflow: hidden;
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s; }
      #index_product #product_items li figure .cover {
        width: 280px;
        height: 280px;
        overflow: hidden;
        position: absolute;
        display: block;
        background: url(../_img/layout/white_cover.png) top center no-repeat;
        z-index: 9; }
      #index_product #product_items li figure img {
        width: 98%;
        height: 98%;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
    #index_product #product_items li h5 {
      display: inline-block;
      margin-top: 10px; }
      #index_product #product_items li h5:after {
        content: '';
        width: 0px; }
    #index_product #product_items li a:hover {
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s; }
      #index_product #product_items li a:hover img {
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s;
        -webkit-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1); }
      #index_product #product_items li a:hover h5 {
        position: relative;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
        #index_product #product_items li a:hover h5:after {
          content: '';
          background: rgba(155, 32, 18, 0.6);
          width: 100%;
          height: 10px;
          position: absolute;
          top: 13px;
          display: block;
          -webkit-transition: all linear .3s;
          -o-transition: all linear .3s;
          transition: all linear .3s; }

/*------------#product------------*/
#product_menu ul {
  border-bottom: 1px #ddd solid;
  text-align: center;
  margin: 20px; }
  #product_menu ul li {
    width: auto;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0;
    font-size: 1.25rem;
    color: #666;
    position: relative; }
    #product_menu ul li:before {
      content: '．';
      font-size: 3rem;
      line-height: 100%;
      vertical-align: middle;
      color: #9B2012; }
    #product_menu ul li:first-child:before {
      content: '．';
      color: #fff; }
    #product_menu ul li a:after {
      content: '';
      width: 0px; }
    #product_menu ul li a:hover:after, #product_menu ul li a.active:after {
      content: '';
      background: rgba(155, 32, 18, 0.6);
      width: 70%;
      height: 10px;
      color: #000;
      position: absolute;
      top: 25px;
      margin: 0 40px;
      display: block;
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s; }

#product_menu h6 {
  display: none; }

#product_detail {
  padding-top: 3rem;
  padding-bottom: 3rem; }
  #product_detail .row {
    margin-left: 0;
    margin-right: 0; }
  #product_detail figure {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding-left: 10px;
    text-align: center; }
    #product_detail figure .slider-for {
      margin-bottom: 0;
      padding: 2%;
      position: relative;
      text-align: center; }
      #product_detail figure .slider-for img {
        width: 100%; }
    #product_detail figure .slider-nav {
      display: block;
      height: 100%;
      width: 90%;
      padding: 0 2% 2%;
      min-height: 1px;
      margin: auto;
      text-align: center; }
      #product_detail figure .slider-nav img {
        opacity: .7; }
      #product_detail figure .slider-nav li {
        padding: 5px;
        text-align: center;
        cursor: pointer; }
      #product_detail figure .slider-nav .slick-current {
        background: #ccc; }
        #product_detail figure .slider-nav .slick-current img {
          opacity: 1; }
      #product_detail figure .slider-nav .slick-prev {
        vertical-align: middle;
        background: #000;
        width: 32px;
        height: 32px; }
        #product_detail figure .slider-nav .slick-prev:before {
          content: '';
          background: url(../_img/layout/arrow_prev.png) center center no-repeat;
          background-size: 10px 16px;
          width: 32px;
          height: 32px;
          display: inline-block;
          vertical-align: middle;
          padding: 5px;
          margin-right: 1rem; }
        #product_detail figure .slider-nav .slick-prev:hover {
          -webkit-transition: all linear .3s;
          -o-transition: all linear .3s;
          transition: all linear .3s;
          background: #9B2012; }
      #product_detail figure .slider-nav .slick-next {
        vertical-align: middle;
        background: #000;
        width: 32px;
        height: 32px; }
        #product_detail figure .slider-nav .slick-next:before {
          content: '';
          background: url(../_img/layout/arrow_next.png) center center no-repeat;
          background-size: 10px 16px;
          width: 32px;
          height: 32px;
          display: inline-block;
          vertical-align: middle;
          padding: 5px; }
        #product_detail figure .slider-nav .slick-next:hover {
          -webkit-transition: all linear .3s;
          -o-transition: all linear .3s;
          transition: all linear .3s;
          background: #9B2012; }
  #product_detail .product-headline {
    margin: 0 auto 15px;
    text-align: center; }
    #product_detail .product-headline div {
      display: inline-block;
      vertical-align: middle; }
    #product_detail .product-headline .product-name {
      font-size: 1.75rem;
      color: #000;
      margin-right: 5px; }
    #product_detail .product-headline .product-type {
      color: #666;
      margin-right: 2rem; }
    #product_detail .product-headline .product-from {
      margin-right: 1.5rem; }
  #product_detail .pagination {
    text-align: right;
    padding: 8px 0;
    margin-bottom: 15px; }
  #product_detail .detail .slick-slider {
    margin-bottom: 0px; }

#slick_here li {
  width: 50%;
  display: inline-block;
  padding: 10px;
  cursor: pointer; }

/*------------#project------------*/
#project {
  padding-top: 3rem;
  padding-bottom: 3rem; }
  #project .project_list ul {
    font-size: 0;
    margin: auto; }
    #project .project_list ul li {
      font-size: 1rem;
      display: inline-block;
      vertical-align: top;
      width: calc(100% / 3);
      margin: auto;
      text-align: center;
      padding-bottom: 2rem; }
      #project .project_list ul li a {
        display: block;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
        #project .project_list ul li a span {
          overflow: hidden;
          display: block;
          width: 400px;
          height: 250px;
          margin: auto; }
        #project .project_list ul li a img {
          -webkit-transition: all linear .3s;
          -o-transition: all linear .3s;
          transition: all linear .3s; }
        #project .project_list ul li a h5 {
          display: inline-block;
          margin: 1rem; }
          #project .project_list ul li a h5:after {
            content: '';
            width: 0px; }
        #project .project_list ul li a:hover {
          -webkit-transition: all linear .3s;
          -o-transition: all linear .3s;
          transition: all linear .3s; }
          #project .project_list ul li a:hover img {
            -webkit-transition: all linear .3s;
            -o-transition: all linear .3s;
            transition: all linear .3s;
            -webkit-transform: scale(1.1, 1.1);
            -ms-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1); }
          #project .project_list ul li a:hover h5 {
            position: relative;
            -webkit-transition: all linear .3s;
            -o-transition: all linear .3s;
            transition: all linear .3s; }
            #project .project_list ul li a:hover h5:after {
              content: '';
              background: rgba(155, 32, 18, 0.6);
              width: 100%;
              height: 10px;
              position: absolute;
              top: 13px;
              display: block;
              -webkit-transition: all linear .3s;
              -o-transition: all linear .3s;
              transition: all linear .3s; }

.fancybox-caption {
  text-align: center; }

.fancybox-close-small {
  display: none; }

#project_album {
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  padding: 3rem;
  height: 100vh; }
  #project_album .close {
    float: right;
    background: #000;
    width: 50px;
    height: 50px;
    padding-top: 12px; }
    #project_album .close:hover {
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      background: #9B2012; }
  #project_album .album {
    clear: both; }
  #project_album h5 {
    font-size: 1.75rem;
    color: #fff; }
  #project_album figure {
    width: calc(100% - 100px);
    display: inline-block;
    vertical-align: middle; }
  #project_album .slick-prev, #project_album .slick-next {
    width: 38px;
    height: 80px;
    display: inline-block;
    vertical-align: middle; }
    #project_album .slick-prev:after, #project_album .slick-next:after {
      content: '';
      width: 38px;
      height: 80px;
      display: inline-block;
      vertical-align: middle;
      padding: 5px; }
    #project_album .slick-prev:hover, #project_album .slick-next:hover {
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      background: #9B2012; }
  #project_album .slick-slide img {
    display: inline; }
  #project_album .slick-prev {
    left: -60px; }
    #project_album .slick-prev:after {
      content: '';
      background: url(../_img/layout/arrow_prev.png) center center no-repeat; }
  #project_album .slick-next {
    right: -60px; }
    #project_album .slick-next:after {
      content: '';
      background: url(../_img/layout/arrow_next.png) center center no-repeat; }

/*----------------max-width:1299------------------*/
@media screen and (max-width: 1299px) {
  header .header_container {
    width: 96%; }
  .container, .container_white {
    width: 96%; }
  #index_product #product_items li {
    width: 25%; }
    #index_product #product_items li figure {
      width: 200px;
      height: 200px; }
      #index_product #product_items li figure .cover {
        width: 200px;
        height: 200px;
        background-size: cover; } }

/* 1299 END */
/*----------------max-width:1024------------------*/
@media screen and (max-width: 1024px) {
  #about section {
    width: 50%;
    margin-left: 3%; }
  #project .project_list ul li a span {
    overflow: hidden;
    display: block;
    width: 90%;
    height: auto;
    margin: auto; } }

/* 1024 END */
/*----------------max-width:1023------------------*/
@media screen and (max-width: 1023px) {
  .pad {
    padding-top: 120px; }
  #index_product #product_items li {
    width: 50%; }
    #index_product #product_items li figure {
      width: 280px;
      height: 280px; }
      #index_product #product_items li figure .cover {
        width: 280px;
        height: 280px; }
  #news {
    max-height: 100%; }
    #news figure {
      display: none; }
    #news .col-8 {
      width: 100%;
      display: block;
      float: none; }
  #product_detail .col-6 {
    width: 100%;
    display: block;
    float: none; }
  #product_detail #product_infor {
    padding: 1rem 2rem; }
    #product_detail #product_infor h5, #product_detail #product_infor h6 {
      text-align: center; }
  #project .project_list ul li {
    width: calc(100% / 2); }
  #contact .container_white {
    background-position: right top;
    background-size: 50% 100%; }
  .more a {
    width: 80%; }
  footer #footer .col-7, footer #footer .col-5 {
    width: 100%;
    display: block;
    float: none; }
  footer #footer #item_list {
    display: none; }
  footer #footer #information {
    margin-top: 2rem; }
    footer #footer #information ul li:nth-child(odd) {
      width: 50%; }
    footer #footer #information ul li:nth-child(even) {
      width: 50%; }
  footer #copyright .col-6 {
    width: 100%;
    float: none;
    text-align: center; }
  footer #copyright .footer_main_menu {
    text-align: center;
    margin: 1rem; } }

/* 1023 END */
/*----------------max-width:768-------------------*/
@media screen and (max-width: 768px) {
  #contact .container_white {
    background: #fff; }
    #contact .container_white #easontile {
      padding-left: 2rem; }
    #contact .container_white #contact_form {
      padding: 2rem; }
      #contact .container_white #contact_form:before {
        content: 'Contact Us';
        text-align: center;
        margin: auto;
        color: #9B2012;
        display: block;
        font-size: 1.25rem; }
  #contact .col-6 {
    width: 100%;
    float: none;
    padding: 2rem; }
  .banner_slider button {
    display: none !important; } }

/* 768 END */
/*----------------max-width:568-------------------*/
@media only screen and (max-width: 568px) {
  #index_product #product_items li {
    width: 100%; }
  #project_album {
    padding: 0;
    height: auto;
    width: 100%; }
    #project_album .slick-prev, #project_album .slick-next {
      top: 50px; }
  #about section {
    width: 100%;
    margin-left: 0; }
  #product_menu {
    width: 100%;
    float: none;
    padding-right: 0; }
    #product_menu ul li {
      width: 50%; }
    #product_menu h6 {
      display: block;
      text-align: center;
      color: #fff;
      background: #9B2012;
      font-size: 1rem;
      cursor: pointer;
      padding: 10px 0; }
    #product_menu .aside {
      display: block;
      cursor: pointer;
      margin: 0;
      -webkit-transition: all linear .5s;
      -o-transition: all linear .5s;
      transition: all linear .5s; }
      #product_menu .aside.active {
        max-height: 800px;
        -webkit-transition: all linear .5s;
        -o-transition: all linear .5s;
        transition: all linear .5s; }
  #news #news_list {
    padding: 5%; }
  #product_detail .detail {
    float: none;
    width: 100%;
    margin-bottom: 10px; }
  #product_detail .product-headline .product-type {
    margin-right: 0; }
  #product_detail .product-headline .product-info {
    display: block; }
  #slick_here li {
    width: 20%; }
  footer #footer #information ul li:nth-child(odd) {
    width: 100%; }
  footer #footer #information ul li:nth-child(even) {
    width: 100%; }
  footer #copyright .footer_main_menu li {
    width: 50%;
    line-height: 200%;
    padding-right: 0; }
    footer #copyright .footer_main_menu li:after {
      width: 0; }
  .search-box {
    width: 100%; }
    .search-box .box {
      width: 100%; }
    .search-box .btn-submit {
      padding: 10px; } }

/* 568 END */
/*----------------max-width:480-------------------*/
/* 480 END */
/*----------------max-width:320-------------------*/
/*320 END */
@media only screen and (max-width: 1023px) {
  header {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 11; }
    header .headerbg {
      margin: auto;
      position: relative;
      z-index: 99; }
    header #logo {
      display: block;
      text-align: center;
      padding-top: 1rem; }
    header nav {
      width: 100%;
      float: none;
      max-height: 0;
      height: 100vh;
      overflow: hidden;
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s; }
      header nav.active {
        max-height: 100vh;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
      header nav ul {
        float: none;
        height: 800px; }
        header nav ul li {
          width: calc(100% / 2 - 10px);
          padding: 5% 0; }
        header nav ul .logo {
          display: none; }
  #phone_icon {
    position: absolute;
    z-index: 9;
    float: right;
    right: 20px;
    top: 30px;
    background: #9B2012;
    padding: 10px; }
    #phone_icon .button {
      display: block;
      position: relative;
      width: 40px;
      height: 20px;
      padding: 10px;
      border: 2px solid #fff;
      border-width: 2px 0;
      -webkit-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      cursor: pointer; }
      #phone_icon .button:before, #phone_icon .button:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        top: 70%;
        margin-top: -0.3em;
        left: 0;
        background: #fff;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
      #phone_icon .button.action {
        border-width: 0;
        -webkit-transition: all linear .3s;
        -o-transition: all linear .3s;
        transition: all linear .3s; }
        #phone_icon .button.action:before {
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          -webkit-transition: all linear .3s;
          -o-transition: all linear .3s;
          transition: all linear .3s; }
        #phone_icon .button.action:after {
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
          -webkit-transition: all linear .3s;
          -o-transition: all linear .3s;
          transition: all linear .3s; } }

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