@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body {
  font-family: roboto,"Helvetica Neue",Helvetica,Arial,"微軟正黑體",Microsoft JhengHei,sans-serif;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  font-size: 16px;
}

*, *::before, *::after {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}

/* default */
.main {
  background-image: url("../images/bg.jpg");
}

.main .menu {
  position: -webkit-sticky;
  position: sticky;
  top: 53px;
  background-color: #ffffff;
  border-bottom: 1px solid #bf9880;
  padding: 4px 0;
  z-index: 100;
}

.main .menu .menu-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: calc(100% - 40px);
  max-width: 1560px;
  margin: 0 auto;
}

.main .menu .menu-box .logo {
  margin: 0 20px 0 0;
}

.main .menu .menu-box .nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: 0 36px 0 0;
}

.main .menu .menu-box .nav .nav-li {
  margin: 4px 12px;
}

.main .menu .menu-box .nav .nav-li a {
  -webkit-transition: -webkit-filter 0s linear;
  transition: -webkit-filter 0s linear;
  transition: filter 0s linear;
  transition: filter 0s linear, -webkit-filter 0s linear;
}

.main .menu .menu-box .nav .nav-li a:hover, .main .menu .menu-box .nav .nav-li a.active {
  -webkit-filter: invert(55%) sepia(69%) saturate(3816%) hue-rotate(350deg) brightness(94%) contrast(87%);
          filter: invert(55%) sepia(69%) saturate(3816%) hue-rotate(350deg) brightness(94%) contrast(87%);
}

.main .menu .menu-box .nav .nav-li a img {
  max-width: 136px;
}

.main .menu .menu-box .btn-top {
  -webkit-transition: -webkit-filter 0s linear;
  transition: -webkit-filter 0s linear;
  transition: filter 0s linear;
  transition: filter 0s linear, -webkit-filter 0s linear;
}

.main .menu .menu-box .btn-top:hover {
  -webkit-filter: invert(55%) sepia(69%) saturate(3816%) hue-rotate(350deg) brightness(94%) contrast(87%);
          filter: invert(55%) sepia(69%) saturate(3816%) hue-rotate(350deg) brightness(94%) contrast(87%);
}

.main .menu .menu-box .btn-top img {
  max-width: 100px;
}

.main .banner {
  background-image: url("../images/bg_dot.png");
  margin: 80px 0 0;
}

.main .banner .slider {
  background-color: #bf9880;
  width: calc(100% - 40px);
  max-width: 1560px;
  margin: 20px auto;
  border: 10px solid #bf9880;
  border-radius: 10px;
  overflow: hidden;
}

.main .banner .slider .slider-box img {
  position: absolute;
  left: 50%;
  display: block;
  opacity: 0;
  -webkit-transform: translateX(-50%) scale(1.1);
          transform: translateX(-50%) scale(1.1);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-animation: slide 32s infinite;
          animation: slide 32s infinite;
}

.main .banner .slider .slider-box img:nth-of-type(2) {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
}

.main .banner .slider .slider-box img:nth-of-type(3) {
  -webkit-animation-delay: 16s;
          animation-delay: 16s;
}

.main .banner .slider .slider-box img:nth-of-type(4) {
  -webkit-animation-delay: 24s;
          animation-delay: 24s;
}

.main .banner .slider .bn-deco {
  top: 0;
  left: 0;
  -webkit-filter: drop-shadow(4px 0 12px #00000033);
          filter: drop-shadow(4px 0 12px #00000033);
}

.main .banner .slider .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  max-width: 560px;
  -webkit-filter: drop-shadow(0 4px 4px #00000099);
          filter: drop-shadow(0 4px 4px #00000099);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.main .banner .scroll {
  display: block;
  background-color: #8c5d41;
  width: 2px;
  height: 100px;
  margin: 32px auto;
}

.main .banner .scroll:before {
  position: absolute;
  top: -4px;
  left: 50%;
  content: '';
  display: block;
  background-color: #8c5d41;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: roll 4s infinite;
          animation: roll 4s infinite;
}

.main .slogan {
  margin: 8px auto 60px;
  text-align: center;
}

.main .slogan img {
  width: 80%;
  max-width: 450px;
}

.main .post {
  background-image: url("../images/bg_dot.png");
  padding: 60px 0;
  text-align: center;
}

.main .post .title {
  margin: 20px;
}

.main .post .title img {
  width: 64%;
  max-width: 420px;
}

.main .post .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 1080px;
  margin: auto;
}

.main .post .list .item {
  display: inline-block;
  width: 40%;
  max-width: 360px;
  margin: 20px 0;
}

.main .content .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: calc(100% - 40px);
  max-width: 1560px;
  margin: 0 auto;
  padding: 120px 0 13vw;
}

.main .content .row .cont {
  width: 48%;
  text-align: center;
  z-index: 50;
}

.main .content .row .cont .title {
  text-align: left;
}

.main .content .row .cont .title img {
  max-width: 720px;
}

.main .content .row .cont .pic {
  left: 50%;
  margin: -4vw 0 0;
  -webkit-transform: translateX(-50%) rotate(-4.5deg);
          transform: translateX(-50%) rotate(-4.5deg);
}

.main .content .row .cont .pic img {
  max-width: 960px;
}

.main .content .row .stroke {
  width: 48%;
  margin: 6vw 0 0;
  z-index: 50;
}

.main .content .row .stroke .list {
  margin: 0 0 0 48px;
  font-size: 21px;
}

.main .content .row .stroke .list:before {
  position: absolute;
  top: 12px;
  left: -48px;
  display: block;
  width: 40px;
  height: 36px;
}

.main .content .row .stroke .list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed #8c5d41;
}

.main .content .row .stroke .list a .caption {
  margin: 0 4vw 0 0;
  color: #8c5d41;
  font-size: 1em;
  text-align: justify;
}

.main .content .row .stroke .list a .price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  color: #8c5d41;
  font-size: 1em;
}

.main .content .row .stroke .list a .price:before {
  content: '$';
  display: inline-block;
  color: #8c5d41;
  font-size: 1em;
}

.main .content .row .stroke .list a .price:after {
  content: '起';
  display: inline-block;
  color: #595757;
  font-size: 0.8em;
}

.main .content .row .stroke .list a:hover .caption, .main .content .row .stroke .list a:hover .price, .main .content .row .stroke .list a:hover .price:before {
  color: #e16823;
}

.main .content .row .deco {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.content .row:nth-child(odd) .stroke .list::before {
  content: url(../images/icon_01.png);
}

.content .row:nth-child(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.content .row:nth-child(even) .cont .title {
  text-align: right;
}

.content .row:nth-child(even) .cont .pic {
  -webkit-transform: translateX(-50%) rotate(4.5deg);
          transform: translateX(-50%) rotate(4.5deg);
}

.content .row:nth-child(even) .stroke .list::before {
  content: url(../images/icon_02.png);
}

/* navbar burger */
#m_nav {
  position: absolute;
  visibility: hidden;
  z-index: -1000;
}

#m_nav:checked ~ .menu-burger span {
  opacity: 0;
  -webkit-box-shadow: unset;
          box-shadow: unset;
  box-shadow: unset;
  -webkit-transition: 0.2s linear 0.2s;
  transition: 0.2s linear 0.2s;
}

#m_nav:checked ~ .menu-burger:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#m_nav:checked ~ .menu-burger:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

#m_nav:checked ~ .menu-burger:before, #m_nav:checked ~ .menu-burger:after {
  top: 50%;
  background-color: #8c5d41;
  -webkit-box-shadow: unset;
          box-shadow: unset;
  -webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear 0.2s;
  transition: top 0.2s linear, -webkit-transform 0.2s linear 0.2s;
  transition: top 0.2s linear, transform 0.2s linear 0.2s;
  transition: top 0.2s linear, transform 0.2s linear 0.2s, -webkit-transform 0.2s linear 0.2s;
}

.menu-burger {
  position: fixed;
  top: 80px;
  right: 24px;
  display: none;
  width: 36px;
  height: 24px;
  z-index: 150;
}

.menu-burger span, .menu-burger:before, .menu-burger:after {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 2px 0 #8c5d4166;
          box-shadow: 0 2px 0 #8c5d4166;
  -webkit-transition: 0.4s linear, opacity 0.2s linear, top 0.2s linear 0.2s, -webkit-transform 0.2s linear;
  transition: 0.4s linear, opacity 0.2s linear, top 0.2s linear 0.2s, -webkit-transform 0.2s linear;
  transition: 0.4s linear, opacity 0.2s linear, top 0.2s linear 0.2s, transform 0.2s linear;
  transition: 0.4s linear, opacity 0.2s linear, top 0.2s linear 0.2s, transform 0.2s linear, -webkit-transform 0.2s linear;
}

.menu-burger span {
  top: 50%;
  -webkit-transition: 0.2s linear 0.1s;
  transition: 0.2s linear 0.1s;
}

.menu-burger:before {
  top: 0;
}

.menu-burger:after {
  top: 100%;
}

@-webkit-keyframes slide {
  16% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  32% {
    opacity: 0;
  }
  48% {
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

@keyframes slide {
  16% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  32% {
    opacity: 0;
  }
  48% {
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

@-webkit-keyframes roll {
  0% {
    top: -4px;
  }
  60% {
    top: calc(100% - 4px);
  }
  100% {
    top: -4px;
  }
}

@keyframes roll {
  0% {
    top: -4px;
  }
  60% {
    top: calc(100% - 4px);
  }
  100% {
    top: -4px;
  }
}

@media screen and (max-width: 1024px) {
  .menu-burger {
    display: block;
  }
  #m_nav:checked ~ .menu {
    top: 53px;
    opacity: 1;
    -webkit-transition: top 0s linear, opacity 0.4s linear;
    transition: top 0s linear, opacity 0.4s linear;
  }
  .main .menu {
    position: fixed;
    top: -120vh;
    left: 0;
    background-color: #ffffffee;
    border: unset;
    opacity: 0;
    -webkit-transition: top 0s linear 0.4s, opacity 0.4s linear;
    transition: top 0s linear 0.4s, opacity 0.4s linear;
  }
  .main .menu .menu-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100vw;
    height: 100vh;
    margin: 0;
  }
  .main .menu .menu-box .logo {
    margin: 8vh 0 2vh;
  }
  .main .menu .menu-box .nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 4vh 0;
  }
  .main .menu .menu-box .nav .nav-li {
    display: inline-block;
    margin: 12px 0;
  }
  .main .menu .menu-box .btn-top {
    display: none;
  }
  .main .banner {
    margin: 0;
  }
  .main .banner .slider {
    width: 100%;
    margin: 0;
    border: unset;
    border-radius: unset;
  }
  .main .banner .scroll {
    display: none;
  }
  .main .slogan {
    margin: 40px 0;
  }
  .main .content .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    width: 92%;
    margin: 0 4%;
    padding: 60px 0 13vw;
  }
  .main .content .row .cont {
    width: 100%;
  }
  .main .content .row .cont .pic {
    -webkit-transform: translateX(-50%) rotate(0);
            transform: translateX(-50%) rotate(0);
  }
  .main .content .row .stroke {
    width: 92%;
    margin: 4vw auto 0;
  }
}

@media screen and (max-width: 640px) {
  .main .content .row .stroke .list {
    margin: 0 0 0 32px;
    font-size: 16px;
  }
  .main .content .row .stroke .list:before {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}

@media screen and (max-width: 480px) {
  .main .banner .slider .slider-box img {
    width: auto;
    height: 40vh;
  }
  .main .banner .slider .bn-deco {
    left: -6.4vw;
  }
  .main .banner .slider .bn-deco img {
    width: auto;
    height: 40vh;
  }
  .main .content .row .stroke .list {
    font-size: 14px;
  }
}
/*# sourceMappingURL=style.css.map */