body {
  background-color: #FCF8F4;
}

.header {
  background-color: #ffffff;
}


/* banner-start */
.bannercontainer {
  position: relative;
  margin-top: -100px;
  z-index: 1;
}

.bannercontainer div {
  position: absolute;
  bottom: 9%;
  left: 45%;
  width: 25%;
}

.bannercontainer div button .button__bg {
  background-color: #ffffff;
}

.bannercontainer div button .button__bg::before,
.bannercontainer div button .button__bg::after {
  background: #C54C44;
}

.bannercontainer div button span {
  padding: 15px 1rem;
}

.bannercontainer div button span{
  color: #C54C44;
}

.bannercontainer div button:hover span{
  color: #ffffff;
}

.bannercontainer div button span{
  text-transform: none;
}

/* banner-end */


/* 品牌故事-start */
#brandstory {
  padding: 80px 0;
  background-color: #FCF8F4;
}

.brandcontainer h2 {
  font-size: 32px;
  color: #7B2B26;
  line-height: 45px;
  text-transform: uppercase;
}

.brandcontainer h3 {
  font-size: 32px;
  color: #333333;
  line-height: 45px;
  font-weight: bold;
}

.brandcontainer p {
  font-size: 17px;
  color: #333333;
  line-height: 36px;
  margin-bottom: 20px;
}

.brandcontainer .row {
  padding-left: 20%;
}

.brandcontainer .brand-left {
  padding-right: 60px;
}

.brandcontainer .brand-right img {
  float: right;
}

/* 品牌故事-end */


/* video-start */
.videocontainer {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.videocontainer video {
  height: auto;
  width: 100%;
}

.videocontainer .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: url('../pics/play-btn2.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
}

/* video-end */


/* 關於我們-start */
#aboutus {
  padding: 90px 0 50px 0;
}

.aboutcontainer {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.aboutcontainer h2 {
  font-size: 32px;
  color: #7B2B26;
  line-height: 45px;
  text-transform: uppercase;
  text-align: center;
}

.aboutcontainer h3 {
  font-size: 32px;
  color: #333333;
  line-height: 45px;
  font-weight: bold;
  text-align: center;
}


#story-video iframe{
    width: 100% !important; height: 720px;
}


.aboutcontainer p {
  font-size: 17px;
  color: #333333;
  line-height: 36px;
  margin-top: 70px;
  margin-bottom: 20px;
  text-align: center;
}

.aboutcontainer>div {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.aboutcontainer>div button {
  width: 18%;
}

/* 關於我們-end */


/* 品牌介紹-start */
#introduction {
  padding: 60px 0;
  background-color: #FCF8F4;
}

.introcontainer h2 {
  font-size: 32px;
  color: #7B2B26;
  line-height: 45px;
  text-transform: uppercase;
}

.introcontainer h3 {
  font-size: 32px;
  color: #333333;
  line-height: 45px;
  font-weight: bold;
}

.introcontainer p {
  font-size: 17px;
  color: #333333;
  line-height: 36px;
  margin-bottom: 20px;
}

.introcontainer .row {
  padding-left: 20%;
}

.introcontainer .intro-left {
  padding-right: 60px;
  padding-top: 13%;
}

.introcontainer .intro-right>img:first-child {
  margin-top: 7%;
}

.introcontainer .intro-right>img:last-child {
  margin-bottom: 11%;
  float: right;
}

@media screen and (max-width:1669px) {
  .introcontainer .intro-right>img {
    max-width: 49%;
  }

  .introcontainer .row {
    padding-left: 18%;
  }
}

/* 品牌介紹-end */

@media screen and (max-width:1480px) {
    
    #story-video iframe{
        height: 560px;
    }

}
/* 手機端 */
@media screen and (max-width:768px) {
  .mobilecontainer {
    background-color: #ffffff;
  }
  
  #story-video iframe{
    height: 460px;
    }

  /* banner */
  .bannercontainer {
    margin-top: 0;
  }

  .bannercontainer div {
    bottom: 5%;
    left: 31%;
    width: 100%;
  }

  .bannercontainer div a button span {
    padding: 8px 1rem;
    font-size: 13px;
    line-height: 20px;
  }

  /* 品牌故事 */
  #brandstory {
    padding: 20px 0 40px 0;
  }

  .brandcontainer .row {
    padding-left: 15px;
  }

  .brandcontainer h2 {
    font-size: 25px;
    line-height: 30px;
    text-align: center;
  }

  .brandcontainer h3 {
    font-size: 28px;
    line-height: 30px;
    text-align: center;
    margin-top: 0;
  }

  .brandcontainer p {
    font-size: 16px;
    line-height: 30px;
    margin-top: 26px;
    margin-bottom: 30px;
  }

  .brandcontainer .brand-left {
    padding-right: 30px;
  }

  /* 視頻 */
  .videocontainer .play-button {
    width: 60px;
    height: 60px;
  }

  /* 關於我們 */
  #aboutus{
    padding: 30px 0 30px 0;
  }
  .aboutcontainer h2{
    font-size: 25px;
    line-height: 30px;
  }
  .aboutcontainer h3{
    font-size: 28px;
    line-height: 30px;
    margin-top: 15px;
  }
  .aboutcontainer p{
    font-size: 16px;
    line-height: 30px;
    margin-top: 30px;
    text-align: left;
  }
  .aboutcontainer>div button{
    width: 45%;
    margin-top: 10px;
  }
  .aboutcontainer>div button span{
    padding: 1rem 0.5rem;
    font-size: 14px;
  }

  /* 品牌介紹 */
  #introduction{
    padding: 20px 0;
  }
  .introcontainer .row{
    padding-left: 15px;
  }
  .introcontainer .intro-left{
    padding-top: 0;
    padding-right: 30px;
  }
  .introcontainer h2{
    font-size: 25px;
    line-height: 30px;
    text-align: center;
  }
  .introcontainer h3{
    font-size: 28px;
    line-height: 30px;
    margin-top: 15px;
    text-align: center;
  }
  .introcontainer p{
    font-size: 16px;
    line-height: 30px;
    margin-top: 30px;
  }
  .introcontainer .intro-right{
    padding-right: 30px;
  }
  .introcontainer .intro-right>img:first-child{
    margin-top: 9%;
  }
}

@media screen and (max-width:468px) {
    #story-video iframe{
    height: 300px;
    }
}