@charset "UTF-8";
.brewlab {
  overflow-x: hidden;
  font-family: 'noto sans tc', '微軟正黑體', '蘋方黑體', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #fffefa;
}

.brewlab img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.brewlab a {
  text-decoration: none;
}

.brewlab * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.brewlab .container {
  max-width: 1100px;
  margin: 0 auto;
}

.brewlab .wrapper {
  overflow-x: hidden;
  padding-bottom: 100px;
}

.brewlab .warning {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  background: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.brewlab .warning img {
  width: 98%;
  height: 100%;
}

.brewlab .warning .warn_pc {
  display: block;
}

.brewlab .warning .warn_m {
  display: none;
}

.brewlab .kv {
  background: url(../images/kv_bg.jpg) #f8f4e4 no-repeat top center;
  background-size: 1920px;
}

.brewlab .kv .container {
  height: 655px;
  position: relative;
}

.brewlab .kv .pos_a {
  position: absolute;
  display: none;
}

.brewlab .kv .title {
  width: 202px;
  top: 56px;
  left: calc(50% - 331px);
}

.brewlab .kv .picture1 {
  width: 300px;
  top: 86px;
  left: calc(50% - 200px);
}

.brewlab .kv .picture2 {
  width: 126px;
  top: 0px;
  left: calc(50% + 80px);
}

.brewlab .kv .picture3 {
  width: 256px;
  top: 278px;
  left: calc(50% - 593px);
}

.brewlab .kv .picture4 {
  width: 144px;
  top: 502px;
  left: calc(50% - 394px);
}

.brewlab .kv .picture5 {
  width: 183px;
  top: 190px;
  left: calc(50% + 360px);
}

.brewlab .kv .deco1 {
  width: 193px;
  top: 218px;
  left: calc(50% + 76px);
}

.brewlab .kv .text {
  top: 326px;
  left: calc(50% + 140px);
}

.brewlab .kv .text p {
  font-size: 14px;
  color: #707070;
}

.brewlab .kv .text h2 {
  font-size: 28px;
  letter-spacing: 2px;
  color: #254477;
}

.brewlab .kv .text h3 {
  margin-top: 55px;
  font-size: 16px;
  color: #383838;
}

.brewlab .sec2 {
  min-height: 1100px;
  background: url(../images/sec2_bg.jpg) #fffefa no-repeat top center;
  background-size: 1920px;
}

.brewlab .sec2 .f_post {
  background: #fff;
  border: 1px solid #e5dec4;
  padding: 8px;
}

.brewlab .sec2 .f_post .head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px 0;
}

.brewlab .sec2 .f_post .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.brewlab .sec2 .f_post .text {
  margin-left: 5px;
}

.brewlab .sec2 .f_post .text h3 {
  line-height: 1;
  font-size: 12px;
}

.brewlab .sec2 .f_post .text h3 img {
  display: inline-block;
  width: 12px;
  margin-left: 5px;
}

.brewlab .sec2 .f_post .text p {
  font-size: 12px;
}

.brewlab .sec2 .film {
  width: 462px;
  position: relative;
  top: -48px;
  left: calc(50% - 27px);
  -webkit-transition: 0.8s;
  transition: 0.8s;
}

.brewlab .sec2 .film .f_post {
  width: 450px;
}

.brewlab .sec2 .film .inner {
  position: relative;
}

.brewlab .sec2 .film .content {
  position: relative;
  overflow: hidden;
}

.brewlab .sec2 .film .content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.brewlab .sec2 .film .logo {
  position: absolute;
  bottom: 80px;
  left: -171px;
  width: 255px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.brewlab .sec2 .film.film2 {
  position: static;
  top: auto;
  left: auto;
  width: 332px;
}

.brewlab .sec2 .community {
  margin-top: 135px;
  padding-bottom: 145px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.brewlab .sec2 .community .f_post {
  width: 350px;
}

.brewlab .sec2 .community .slick_area {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.brewlab .sec2 .community .slick_js {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.brewlab .sec2 .community .slick_js li {
  width: 300px;
  margin: 0 10px;
  position: relative;
}

.brewlab .sec2 .community .slick_js li .date {
  position: absolute;
  right: 0;
  top: -44px;
  display: block;
  color: #fff;
  background: #d3c89b;
  padding: 10px 12px;
}

.brewlab .sec2 .community .slick_js li .text {
  margin-left: 15px;
  padding: 15px 0 0 15px;
  color: #5e5e5e;
  border-left: 1px solid #bcaf81;
}

.brewlab .sec2 .community .info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 75px;
  padding-top: 70px;
}

.brewlab .sec2 .community .info p {
  width: 350px;
  font-size: 14px;
  color: #707070;
}

.brewlab .sec2 .community .info p img {
  display: inline-block;
  vertical-align: bottom;
  width: 22px;
  margin-right: 10px;
}

.brewlab .sec2 .community .info h2 {
  width: 350px;
  font-size: 28px;
  letter-spacing: 2px;
  color: #254477;
}

.brewlab .sec2 .community .info h3 {
  width: 350px;
  margin-top: 55px;
  font-size: 16px;
  color: #383838;
}

.brewlab .sec2 .community.com2 {
  margin-top: 0;
  position: relative;
}

.brewlab .sec2 .community.com2 .slick_area {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.brewlab .sec2 .community.com2 .slick_area iframe {
  background: #fff;
}

.brewlab .sec2 .community.com2 .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 165px 75px 0 0;
}

.brewlab .sec2 .community.com2 .logo {
  position: absolute;
  width: 144px;
  left: calc(50% - 116px);
  top: -45px;
}

.brewlab .sec3 .slide_wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 280px;
}

.brewlab .sec3 .slide_wrapper .box {
  position: relative;
  left: -280px;
}

.brewlab .sec3 .slide_wrapper .items {
  width: 280px;
  height: 280px;
  position: absolute;
  border: 1px solid #fff;
}

.brewlab .sec3 .slide_wrapper .items.item1 {
  width: 224px;
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: translatex(0%);
            transform: translatex(0%);
  }
  100% {
    display: none;
    -webkit-transform: translatex(-200%);
            transform: translatex(-200%);
  }
}

@keyframes slide {
  0% {
    -webkit-transform: translatex(0%);
            transform: translatex(0%);
  }
  100% {
    display: none;
    -webkit-transform: translatex(-200%);
            transform: translatex(-200%);
  }
}

@media screen and (max-width: 1024px) {
  .brewlab .sec2 .community {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 35px;
    max-width: 640px;
    margin: 35px auto 0;
  }
  .brewlab .sec2 .community .slick_area {
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    padding-top: 100px;
  }
  .brewlab .sec2 .community .info {
    max-width: 640px;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    padding: 0 10px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
  .brewlab .sec2 .community .info p,
  .brewlab .sec2 .community .info h2,
  .brewlab .sec2 .community .info h3 {
    width: 100%;
  }
  .brewlab .sec2 .community.com2 .info {
    padding: 0 10px;
    width: 100%;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .brewlab .sec2 .community.com2 .slick_area {
    padding: 0;
    margin-top: 56px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .brewlab .sec2 .community.com2 .logo {
    position: absolute;
    width: 144px;
    left: 50%;
    top: 0;
  }
}

@media screen and (max-width: 900px) {
  .brewlab .sec2 {
    background: #fffefa;
    padding-top: 80px;
  }
  .brewlab .sec2 .film {
    position: static;
    top: auto;
    left: auto;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .brewlab .sec2 .film .f_post {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .brewlab .sec2 .film .logo {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    position: static;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    margin-bottom: 30px;
    bottom: auto;
    left: auto;
  }
}

@media screen and (max-width: 768px) {
  .brewlab .container {
    max-width: unset;
    width: 95%;
  }
  .brewlab .warning .warn_pc {
    display: none;
  }
  .brewlab .warning .warn_m {
    display: block;
  }
  .brewlab .kv {
    background: #f8f4e4;
  }
  .brewlab .kv .container {
    height: 105vw;
  }
  .brewlab .kv .picture1 {
    width: 40vw;
    top: 20px;
    left: calc(50% - 32vw);
    z-index: 10;
  }
  .brewlab .kv .picture2 {
    width: 23vw;
    top: -1vw;
    left: calc(50% + 15vw);
    z-index: 10;
  }
  .brewlab .kv .picture3 {
    width: 18vw;
    top: 20vw;
    left: 1vw;
    z-index: 11;
  }
  .brewlab .kv .picture4 {
    width: 20vw;
    top: 35vw;
    left: 4vw;
    z-index: 12;
  }
  .brewlab .kv .picture5 {
    width: 32vw;
    top: 70vw;
    left: calc(50% + 20vw);
  }
  .brewlab .kv .title {
    width: 20vw;
    top: 44vw;
    left: calc(50% + 10vw);
    z-index: 15;
  }
  .brewlab .kv .deco1 {
    width: 25vw;
    top: 34vw;
    left: calc(50% + 12vw);
  }
  .brewlab .kv .text {
    width: 70vw;
    left: calc(50% - 32vw);
    top: calc(54vw + 52px);
  }
  .brewlab .kv .text h2 {
    font-size: 22px;
  }
  .brewlab .kv .text h3 {
    font-size: 14px;
    margin-top: 20px;
  }
  .brewlab .kv .text p {
    font-style: 12px;
  }
  .brewlab .sec2 .film {
    width: 95%;
    margin: 0 auto;
  }
  .brewlab .sec2 .film .f_post {
    width: 100%;
  }
  .brewlab .sec2 .community {
    padding-bottom: 40px;
    width: 95%;
  }
  .brewlab .sec2 .community .f_post {
    width: 100%;
  }
  .brewlab .sec2 .community .slick_area {
    width: 100%;
    max-width: 460px;
  }
  .brewlab .sec2 .community .slick_area .slick_js {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .brewlab .sec2 .community .slick_area .slick_js li {
    width: 100%;
    margin-bottom: 60px;
  }
  .brewlab .sec2 .community .info {
    width: 100%;
    max-width: 460px;
  }
  .brewlab .sec2 .community.com2 .slick_area ul {
    width: 100%;
  }
  .brewlab .sec2 .community.com2 .logo {
    position: static;
    width: 150px;
    margin-bottom: 40px;
  }
}