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

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

.pace-inactive {
  display: none; }

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

.animate {
  -webkit-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-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;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

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

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

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

/*泛用表格*/
.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: 100%;
  max-width: 100%; }
  .container.w2 {
    width: 1366px; }
  .container.w3 {
    width: 1180px; }

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

.txt-left {
  text-align: left; }

.txt-center {
  text-align: center; }

.txt-right {
  text-align: right; }

.bold {
  font-weight: bold; }

/*select*/
.select {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 45px;
  background-color: #EEEEEE; }

.select select {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  border-radius: 0;
  padding-left: 1rem;
  font-size: 1rem;
  z-index: 200; }

.select:after {
  content: '\f107';
  font-family: 'Font Awesome 5 Pro';
  font-size: 1rem;
  line-height: 45px;
  position: absolute;
  z-index: 100;
  right: 1rem;
  top: 0; }

header #logo {
  width: 120px;
  text-align: center;
  margin: auto; }

header nav {
  width: 1040px;
  height: 100px;
  margin: auto; }
  header nav ul {
    padding: 0;
    margin: 0; }
    header nav ul li {
      list-style: none;
      margin: 0;
      padding: 20px 0;
      display: block;
      line-height: 60px;
      float: left;
      width: calc( 100% / 5);
      text-align: center;
      font-size: 18px; }
      header nav ul li a {
        display: inline-block;
        vertical-align: middle;
        width: 120px;
        color: #314C75; }
      header nav ul li.logo {
        padding-top: 10px; }

main {
  padding: 40px 0; }

footer {
  margin: 50px auto 0;
  color: #000021;
  -webkit-box-shadow: 0px -5px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0px -5px 6px rgba(0, 0, 0, 0.16); }
  footer .logo {
    padding: 60px 0 20px;
    color: #314C75;
    font-size: 31px; }
    footer .logo img {
      display: inline-block;
      vertical-align: middle; }
  footer .contact-info ul {
    margin: 0 -2px; }
    footer .contact-info ul li {
      list-style: none;
      display: inline-block;
      font-size: 20px;
      line-height: 1.75;
      margin: 0 -2px;
      padding: 5px 0; }
      footer .contact-info ul li i {
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px; }
      footer .contact-info ul li.address {
        width: 50%; }
        footer .contact-info ul li.address i {
          font-size: 28px; }
      footer .contact-info ul li.tel {
        width: 50%; }
        footer .contact-info ul li.tel i {
          font-size: 31px; }
      footer .contact-info ul li.email {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        footer .contact-info ul li.email i {
          font-size: 32px; }
        footer .contact-info ul li.email .em {
          width: calc(100% / 3); }
  footer #copyright {
    padding: 20px 0;
    font-size: 16px;
    line-height: 2;
    color: #314C75; }

.mobile-only {
  display: none; }

.pages {
  padding: 40px 0 60px;
  text-align: center; }
  .pages a.page {
    display: inline-block;
    width: 28px;
    line-height: 28px;
    border-radius: 50%;
    text-align: center;
    color: #000000; }
    .pages a.page.active, .pages a.page:hover {
      color: #FFFFFF;
      background: #314C75; }

.btn {
  width: 180px;
  display: inline-block;
  cursor: pointer;
  color: #FFFFFF;
  background: #000021;
  line-height: 35px;
  font-size: 16px;
  cursor: pointer;
  text-align: center; }

#gotop {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 3000;
  cursor: pointer;
  border-radius: 50%;
  border: 1px #314C75 solid;
  color: #314C75;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 25px;
  text-align: center; }

#index #banner {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 0;
  padding-bottom: 27.86%;
  overflow: hidden; }
  #index #banner .slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 10; }
  #index #banner .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; }
  #index #banner a.bg-img {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 27.86%;
    background-size: cover;
    background-position: center center; }
  #index #banner .swiper-button-next, #index #banner .swiper-button-prev {
    color: #FFFFFF; }
    #index #banner .swiper-button-next:after, #index #banner .swiper-button-prev:after {
      color: #FFFFFF; }

#index .info {
  background-image: url(../images/index/info-bg.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  color: #FFFFFF; }
  #index .info ul.row {
    margin: 0;
    padding: 40px 0; }
    #index .info ul.row li {
      display: block;
      list-style: none;
      float: left;
      width: calc( 50% - 1px); }
      #index .info ul.row li.line {
        width: 1px; }
      #index .info ul.row li img {
        width: 137px;
        display: block;
        margin: 5px auto; }
      #index .info ul.row li > div {
        width: 400px;
        margin: 0 auto;
        max-width: 100%; }
        #index .info ul.row li > div.title {
          padding: 30px 0 10px;
          font-size: 25px;
          line-height: 1.75; }
          #index .info ul.row li > div.title .line {
            width: 30px;
            margin: 5px auto;
            border-bottom: 2px #FFFFFF solid; }
        #index .info ul.row li > div.text {
          padding: 10px 0 40px;
          font-size: 18px;
          line-height: 1.75; }
      #index .info ul.row li .button-row .btn {
        width: 180px;
        padding: 5px 0;
        background: none;
        border-radius: 0;
        border: 1px #FFFFFF solid; }

#about main {
  padding: 20px 0 80px;
  background-image: url(../images/about/bg.png);
  background-repeat: repeat-y;
  background-size: 1920px auto;
  color: #FFFFFF; }
  #about main h1 {
    padding: 60px;
    font-size: 50px;
    width: 577px;
    max-width: 98%;
    margin: 0 auto;
    border-bottom: 1px #FFF500 solid; }
  #about main .text {
    margin: 0 auto;
    padding: 80px 0;
    width: 960px;
    max-width: 98%;
    font-size: 18px;
    line-height: 1.75; }
  #about main h2 {
    font-size: 30px;
    color: #FFF500;
    padding: 20px 0 60px; }
    #about main h2 div {
      color: #FFFFFF; }
  #about main ul {
    width: 100%;
    margin: 5px auto;
    padding: 0;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px #FFF500 solid; }
    #about main ul li {
      display: block;
      float: left;
      margin: 0;
      padding: 40px 0; }
      #about main ul li:first-child {
        width: 40%; }
      #about main ul li:first-child + li {
        width: 60%; }
      #about main ul li .red {
        color: red; }
    #about main ul.title li {
      color: #FFF500; }

#news #banner {
  background-image: url(../images/news/banner-bg.png);
  padding: 100px 0 180px; }
  #news #banner h1.title {
    width: 575px;
    max-width: 95%;
    margin: 0 auto;
    font-size: 50px;
    line-height: 1;
    padding: 40px 0;
    border-bottom: 1px #FFF500 solid;
    color: #FFFFFF;
    text-align: center; }

#news .list-row {
  padding: 40px 0; }
  #news .list-row .n-item {
    padding: 40px 0;
    border-bottom: 1px #FFF500 solid; }
    #news .list-row .n-item .data, #news .list-row .n-item .btn {
      display: inline-block;
      vertical-align: middle; }
    #news .list-row .n-item .data {
      width: calc( 100% - 185px);
      margin-right: -1px;
      line-height: 1.5; }
      #news .list-row .n-item .data > div {
        width: 900px;
        max-width: 98%; }
      #news .list-row .n-item .data .date {
        font-size: 15px;
        color: #000021;
        padding-bottom: 5px; }
      #news .list-row .n-item .data .name {
        padding: 10px 0;
        font-size: 20px;
        color: #314C75; }
      #news .list-row .n-item .data .text {
        font-size: 15px;
        color: #232323; }
    #news .list-row .n-item .btn {
      margin-top: 30px;
      margin-left: -1px; }

#news .detail {
  padding: 60px 0;
  line-height: 1.5; }
  #news .detail .date {
    font-size: 15px;
    color: #314C75;
    padding-bottom: 5px; }
  #news .detail .name {
    padding: 10px 0 20px;
    font-size: 20px;
    color: #314C75;
    border-bottom: 1px #FFF500 solid; }
  #news .detail .text {
    font-size: 15px;
    padding: 40px 0;
    color: #314C75; }

#product h1.title {
  font-size: 50px;
  color: #314C75;
  padding: 60px 0;
  margin: 0 auto; }

#product .row {
  margin: 0; }

#product .list-row {
  padding-bottom: 60px; }
  #product .list-row .left, #product .list-row .right {
    float: left;
    display: block;
    margin: 0; }
  #product .list-row .left {
    width: 350px; }
  #product .list-row .right {
    width: calc(100% - 350px); }
  #product .list-row .left ul, #product .list-row .left li {
    padding: 0;
    margin: 0;
    list-style: none;
    display: block; }
  #product .list-row .left > ul {
    width: 230px; }
    #product .list-row .left > ul > li {
      padding: 5px 0 5px 5px;
      font-size: 18px;
      margin-bottom: 2px;
      position: relative; }
      #product .list-row .left > ul > li i {
        position: absolute;
        top: 10px;
        right: 7px;
        color: #FFF500; }
      #product .list-row .left > ul > li a {
        display: block;
        background: #000021;
        color: #FFFFFF;
        padding: 5px; }
      #product .list-row .left > ul > li > ul {
        padding: 2px 0; }
        #product .list-row .left > ul > li > ul > li a {
          display: block;
          padding: 5px;
          background: none;
          border-bottom: 1px #314C75 solid;
          color: #314C75; }
          #product .list-row .left > ul > li > ul > li a.active {
            background: rgba(49, 76, 117, 0.5); }
  #product .list-row .left .select, #product .list-row .left select {
    width: 100%;
    border: 1px #CCC solid; }
  #product .list-row .p-item > a {
    display: block;
    width: 320px;
    max-width: 98%;
    height: auto; }
    #product .list-row .p-item > a:hover {
      opacity: 0.8; }
  #product .list-row .p-item .pic {
    padding-bottom: 100%; }
  #product .list-row .p-item div.name {
    padding: 10px;
    display: block;
    text-align: center;
    font-size: 16px;
    line-height: 28px;
    height: 56px;
    overflow: hidden; }

#product .detail {
  padding: 40px 0;
  /*major-data*/ }
  #product .detail .row {
    margin: 0; }
  #product .detail ul, #product .detail li {
    margin: 0;
    padding: 0;
    list-style: none; }
  #product .detail .pics, #product .detail .major-data {
    display: block;
    float: left; }
  #product .detail .pics {
    width: 530px;
    max-width: 100%; }
    #product .detail .pics .pics-container {
      max-width: 500px;
      margin: auto;
      overflow: hidden; }
      #product .detail .pics .pics-container .main-pic, #product .detail .pics .pics-container .sub-pics {
        position: relative; }
        #product .detail .pics .pics-container .main-pic .bg-img, #product .detail .pics .pics-container .sub-pics .bg-img {
          background-position: 50% 50%;
          background-repeat: no-repeat;
          background-size: 80%;
          width: 100%;
          height: 0;
          padding-bottom: 140%; }
      #product .detail .pics .pics-container .main-pic {
        margin-bottom: 10px; }
      #product .detail .pics .pics-container .sub-pics {
        width: 90%;
        margin: auto; }
        #product .detail .pics .pics-container .sub-pics .bg-img {
          background-size: cover;
          padding-bottom: 100%; }
        #product .detail .pics .pics-container .sub-pics .swiper-button-next, #product .detail .pics .pics-container .sub-pics .swiper-button-prev {
          color: #000; }
        #product .detail .pics .pics-container .sub-pics .swiper-button-next {
          right: -30px; }
        #product .detail .pics .pics-container .sub-pics .swiper-button-prev {
          left: -30px; }
  #product .detail .major-data {
    width: calc( 100% - 530px);
    color: #000000;
    font-size: 16px;
    padding: 0px 10px 10px 30px; }
    #product .detail .major-data i {
      font-style: normal; }
    #product .detail .major-data .name {
      font-size: 36px;
      line-height: 1.5;
      padding: 0px 0px 10px;
      color: #314C75; }
      #product .detail .major-data .name .line {
        width: 100px;
        height: 12px;
        border-bottom: 2px #FFF500 solid; }
    #product .detail .major-data .s_info {
      padding: 20px 0; }
    #product .detail .major-data .button-row .btn {
      color: #FFFFFF;
      background: #314C75;
      position: relative; }
      #product .detail .major-data .button-row .btn i {
        display: inline-block;
        font-size: 18px;
        vertical-align: middle; }
  #product .detail .info {
    padding: 40px 0 60px; }
    #product .detail .info h2.title {
      font-size: 20px;
      padding: 5px;
      color: #314C75; }
    #product .detail .info .editor {
      padding: 20px 0; }

#contact main h1 {
  font-size: 50px;
  line-height: 1;
  color: #314C75;
  padding: 50px 0;
  width: 575px;
  margin: 0 auto;
  border-bottom: 1px #FFF500 solid; }

#contact main .tel {
  padding: 50px 0;
  color: #314C75;
  line-height: 1.75; }
  #contact main .tel a {
    display: block;
    font-size: 32px;
    letter-spacing: 5px;
    padding: 40px 0 10px; }
  #contact main .tel .text {
    padding: 10px;
    font-size: 16px;
    letter-spacing: 3px; }
    #contact main .tel .text span {
      display: block; }

#contact main .form {
  width: 1080px;
  max-width: 95%;
  margin: 0 auto;
  padding: 10px 0 20px; }
  #contact main .form ul, #contact main .form li {
    margin: 0;
    padding: 0;
    list-style: none; }
  #contact main .form li {
    padding: 20px 0; }
  #contact main .form label {
    display: inline-block;
    text-align: right;
    font-size: 16px;
    color: #314C75;
    line-height: 1.5;
    font-weight: bold;
    padding: 10px;
    width: 100px;
    margin: 0 -2px; }
  #contact main .form input, #contact main .form textarea {
    display: inline-block;
    background: rgba(255, 245, 0, 0.2);
    border: none;
    padding: 10px;
    width: calc( 100% - 100px);
    margin: 0 0 0 -1px; }
  #contact main .form textarea {
    height: 250px; }

#contact main .button-row {
  padding: 20px 0 80px; }

#contact main .map {
  padding: 60px 0;
  width: 100%;
  padding-bottom: 40%; }

@media only screen and (max-width: 1200px) {
  .row {
    margin-left: auto;
    margin-right: auto; } }

@media only screen and (max-width: 1024px) {
  .container {
    padding: 0 10px !important; }
  /*--- header ---*/
  #burger {
    width: 35px;
    height: 50px;
    font-size: 0;
    position: fixed;
    top: 35px;
    right: 5px;
    cursor: pointer;
    z-index: 99999;
    background: none; }
    #burger span {
      background-color: #FFFFFF;
      border: 1px #000 solid;
      display: block;
      position: absolute;
      top: 5px;
      left: 0;
      right: 0;
      height: 2px;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      -webkit-transition-delay: 0.2s, 0s;
      -o-transition-delay: 0.2s, 0s;
      transition-delay: 0.2s, 0s; }
      #burger span:nth-child(2) {
        top: 14px;
        -webkit-transition-property: all, -webkit-transform;
        transition-property: all, -webkit-transform;
        -o-transition-property: all, transform;
        transition-property: all, transform;
        transition-property: all, transform, -webkit-transform; }
      #burger span:last-child {
        top: 23px;
        -webkit-transition-property: all, -webkit-transform;
        transition-property: all, -webkit-transform;
        -o-transition-property: all, transform;
        transition-property: all, transform;
        transition-property: all, transform, -webkit-transform;
        -webkit-transition-delay: 0.2s, 0s;
        -o-transition-delay: 0.2s, 0s;
        transition-delay: 0.2s, 0s; }
    #burger.active {
      position: fixed; }
      #burger.active span {
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 14px;
        left: 0px; }
        #burger.active span:nth-child(2), #burger.active span:last-child {
          -webkit-transition-property: top,-webkit-transform;
          transition-property: top,-webkit-transform;
          -o-transition-property: top,transform;
          transition-property: top,transform;
          transition-property: top,transform,-webkit-transform;
          -webkit-transition-property: all, -webkit-transform;
          transition-property: all, -webkit-transform;
          -o-transition-property: all, transform;
          transition-property: all, transform;
          transition-property: all, transform, -webkit-transform; }
        #burger.active span:nth-child(2) {
          left: -100%;
          opacity: 0;
          -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
          transform: rotate(0);
          -webkit-transition-delay: 0.2s, 0s;
          -o-transition-delay: 0.2s, 0s;
          transition-delay: 0.2s, 0s; }
        #burger.active span:last-child {
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg); }
  header {
    position: relative;
    left: 0;
    top: 0;
    z-index: 9999; }
    header #logo {
      display: block;
      padding: 10px;
      text-align: center; }
    header nav {
      width: 0;
      height: auto; }
      header nav ul {
        position: fixed;
        z-index: 9999;
        width: 80vw;
        max-width: 280px;
        height: 100vh;
        padding-left: 0;
        left: auto;
        right: 0;
        top: 0;
        overflow: auto;
        font-size: 1rem;
        background-color: rgba(255, 255, 255, 0.8);
        -webkit-transform: translateX(80vw);
        -ms-transform: translateX(80vw);
        transform: translateX(80vw);
        -webkit-transition: all .65s ease-out;
        -o-transition: all .65s ease-out;
        transition: all .65s ease-out; }
        header nav ul.active {
          -webkit-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0);
          -webkit-transition: all 0.4s cubic-bezier(0.1, 0.58, 0.42, 0.85);
          -o-transition: all 0.4s cubic-bezier(0.1, 0.58, 0.42, 0.85);
          transition: all 0.4s cubic-bezier(0.1, 0.58, 0.42, 0.85); }
        header nav ul li {
          list-style: none;
          display: block;
          position: static;
          border-left: none;
          padding: 5px;
          width: 100%;
          height: auto;
          line-height: 60px;
          border-bottom: 1px #CCCCCC solid;
          text-align: center;
          background: #FFFFFF;
          font-size: 1.3rem; }
          header nav ul li.logo {
            display: none; }
  main {
    padding-top: 0; }
  footer {
    margin: 30px auto 0; }
    footer .logo {
      padding: 30px 0 20px; }
    footer .contact-info ul li {
      display: block;
      margin: 5px auto;
      padding: 10px 0; }
      footer .contact-info ul li.address, footer .contact-info ul li.tel, footer .contact-info ul li.email {
        width: 95%; }
      footer .contact-info ul li.email .em {
        width: 95%; }
  #index .info ul.row li {
    width: 100%;
    float: none; }
    #index .info ul.row li.line {
      width: 60%;
      margin: 30px auto;
      border-bottom: 1px #FFF500 solid; }
      #index .info ul.row li.line img {
        display: none; }
  #product .list-row .p-item {
    width: 50%; }
    #product .list-row .p-item > a {
      margin: 20px auto; }
  #product .list-row .left, #product .list-row .right {
    float: none;
    width: 100%; }
  #product .list-row .left {
    padding: 20px; }
    #product .list-row .left ul, #product .list-row .left li {
      display: none; }
    #product .list-row .left .mobile-only {
      display: block; }
  #product .detail .pics, #product .detail .major-data, #product .detail .info {
    float: none;
    width: 100%;
    padding: 20px; }
  #contact .form .col-6 {
    width: 100%; } }

@media only screen and (max-width: 640px) {
  #about main {
    padding: 10px 0 40px; }
    #about main h1 {
      padding: 10px;
      font-size: 24px; }
    #about main h2 {
      font-size: 18px;
      padding: 10px 0; }
    #about main .text {
      font-size: 14px; }
    #about main ul {
      font-size: 12px; }
      #about main ul li {
        padding: 20px 0; }
  #product h1.title {
    padding: 10px 0;
    font-size: 24px; }
  #news #banner {
    padding: 50px 0 90px; }
    #news #banner h1.title {
      padding: 10px 0;
      font-size: 24px; }
  #news .list-row .n-item {
    padding: 20px 0; }
    #news .list-row .n-item .data, #news .list-row .n-item .btn {
      display: block;
      width: 100%; }
  #contact main h1 {
    padding: 10px 0;
    font-size: 24px; }
  #contact main .tel {
    padding: 20px; }
    #contact main .tel .text {
      text-align: left; }
      #contact main .tel .text span {
        display: inline; } }