section {
  position: relative;
  background: #120b08;
  font-weight: 200;
}
section .container {
  position: relative;
  z-index: 1;
}
section h3 {
  font-size: 58px;
  color: #fff;
  font-weight: 500;
  line-height: 1.25em;
}

section p {
  font-size: 21px;
  line-height: 2em;
  color: #fff;
}
.t-a-c {
  text-align: center;
}
.sec1 {
  padding: 130px 0;
}
.sec1-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 130px;
}

.sec1-row.even {
  flex-direction: row-reverse;
}

.sec1-row.even .sec1-row-pic {
  margin-right: -130px;
}
.sec1-row.even .sec1-row-con {
  margin-left: -50px;
}
.sec1-row h3 {
  margin-bottom: 0.25em;
}
.sec1-row h3 span {
  display: block;
  font-size: 46px;
  padding-left: 116px;
  font-weight: 300;
}
.sec1-row h3 span::before {
  content: "";
  width: 2em;
  height: 1px;
  background: #d7c16e;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.sec1-row p {
  margin-bottom: 1em;
}
.line {
  background: #d7c16e;
}

.slide-area {
  width: 1675px;
  margin: 0 auto;
}

.slide-pic {
  position: relative;
}

.slide-main h3 {
  font-size: 46px;
  margin-top: 1em;
  margin-bottom: 0.25em;
}

.sec2 {
  padding: 130px 0;
}

section .title {
  margin-bottom: 1em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
section .title::after {
  flex: auto;
  content: "";
  height: 1px;
  background: #d7c16e;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin-left: 0.5em;
}
.history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-row span {
  font-size: 21px;
  color: #ffe383;
}

.sec3-con {
  display: flex;
  justify-content: center;
  padding-bottom: 300px;
  position: relative;
}
.sec3-pic {
  /*justify-content: ce*/
  margin-top: 40px;
}
.sec3-con li {
  font-size: 0;
  text-indent: -9999px;
}

.sec3-txt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.badge-title {
  margin: 90px auto;
  text-align: center;
}
.badge-main {
  width: 488px;
  margin: 0 auto;
  position: relative;
}

.badge-main .badge {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.badge-txt {
  position: absolute;
  color: #fff;
  font-size: 21px;
  line-height: 1.5em;
  left: 50%;
  top: 50%;
  width: max-content;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.badge-txt:hover {
  text-shadow: -0.2em -0.2em 1rem rgb(255 255 255 / 0.25),
    0em 0em 1rem rgb(255 255 255 / 0.25), 0 0em 0.5rem #fff600,
    0 0em 1rem #fff600;
}
.badge-txt1 {
  position: absolute;
  margin-left: 250px;
  margin-top: -230px;
}
.badge-txt2 {
  position: absolute;
  margin-left: -565px;
  margin-top: -90px;
}
.badge-txt3 {
  position: absolute;
  margin-left: 390px;
  margin-top: -20px;
}
.badge-txt4 {
  position: absolute;
  margin-left: -565px;
  margin-top: 100px;
}
.badge-txt1 .badge-line {
  position: absolute;
  left: 1em;
  transform: translateX(-100%) scaleX(-1);
  bottom: 1.5em;
}
.badge-txt2 .badge-line {
  position: absolute;
  left: 2em;
  transform: translateX(100%);
  bottom: 1.5em;
}
.badge-txt3 .badge-line {
  position: absolute;
  left: 0em;
  transform: translateX(-100%) scaleX(-1);
  top: 0em;
}
.badge-txt4 .badge-line {
  position: absolute;
  left: 100%;
  bottom: 0em;
  margin-left: 1em;
}

.badge-txt:hover + * {
  opacity: 1;
}

.sec4 {
  padding: 130px 0 130px 0;
  background: url(../images/winery/sec4.jpg) center bottom no-repeat;
}

.sec4-pic {
  margin-top: 50px;
  width: 728px;
}

.sec5 {
  padding-top: 160px;
  background: #120b08 url(../images/winery/people.png) center bottom no-repeat;
  padding-bottom: 460px;
  position: relative;
}
.sec5 ul {
  font-size: 19px;
  padding-left: 4em;
}
.sec5 li {
  line-height: 2em;
  color: #fff;
  text-indent: -4em;
}
.sec5 li span {
  color: #ecb741;
}

.swiper-button-next,
.swiper-button-prev {
  background: url(../images/winery/slide-arrow.png) center center no-repeat;
}
.swiper-button-next {
  right: 36px;
}
.swiper-button-prev {
  transform: scaleX(-1);
  left: 36px;
}

.slide-pic .slide-box {
  overflow: hidden;
}
.slide-pic .slide-box img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /*display: flex;justify-content: center;align-items: center;*/
}
.sec1-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.sec2 {
  z-index: 2;
}
.sec2-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -44%);
  z-index: 0;
}
.slide-pic .swiper-pagination {
  display: none;
}
#chart-line1 {
  transform: scale(0);
  transform-origin: 10% 75%;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}
#chart-line2 {
  transform: scale(0);
  transform-origin: 10% 75%;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
}
#chart-line3 {
  transform: scale(0);
  transform-origin: 10% 75%;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
#line1-txt,
#line2-txt,
#line3-txt {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  opacity: 0;
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
}
.sec4-pic.an #chart-line1 {
  transform: scale(1);
}
.sec4-pic.an #chart-line2 {
  transform: scale(1);
}
.sec4-pic.an #chart-line3 {
  transform: scale(1);
}
.sec4-pic.an #line1-txt,
.sec4-pic.an #line2-txt,
.sec4-pic.an #line3-txt {
  opacity: 1;
}

@media screen and (min-width: 1921px) {
  .sec4 {
    background-size: cover;
  }
  .sec5 {
    background-size: 100% auto;
    padding-bottom: 23.96vw;
  }
}

@media screen and (max-width: 1675px) {
  .slide-area {
    width: calc(100% - 72px);
  }
}

@media screen and (min-width: 1000px) {
  .mb {
    display: none;
  }
}
@media screen and (max-width: 999px) {
  .pc {
    display: none;
  }
  html {
    min-width: 100%;
    width: 100%;
  }
  section img {
    width: 100%;
  }
  .sec1 {
    padding: 8vw 0 16vw 0;
  }
  .sec1-row,
  .sec1-row.even {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-bottom: 10.667vw;
  }
  .sec1-row-con {
    padding-left: 12.4vw;
  }
  .sec1-row.even .sec1-row-con {
    margin-left: 0px;
  }
  section h3,
  .slide-main h3 {
    font-size: 6.8vw;
  }
  section p {
    font-size: 2.9333vw;
  }
  .sec1-row-pic {
    width: 80%;
    margin-top: 6.667vw;
  }
  .sec1-row.even .sec1-row-pic {
    align-self: flex-end;
    margin-right: 0;
  }
  .slide-area {
    width: calc(100% - 8.8vw);
    display: flex;
    justify-content: center;
    align-self: center;
    flex-direction: column;
  }
  .slide-main {
    text-align: center;
    width: calc(100% - 8.8vw);
    margin-top: 10vw;
  }
  .slide-pic .swiper-pagination {
    display: inline-block;
    width: 100%;
    bottom: -8vw;
  }
  .swiper-pagination-bullet {
    width: 2.13vw;
    height: 2.13vw;
    margin: 0 6vw;
    background: #d08c60;
    opacity: 1;
  }
  .swiper-pagination-bullet-active {
    background: #ffffff;
  }

  .sec2 {
    padding: 12vw 0;
  }
  .title {
    text-align: center;
  }
  .sec3-con {
    flex-direction: column;
  }
  .sec3-main {
    width: 63.6vw;
    height: 62.9333vw;
    margin: 5vw auto;
  }
  .sec3-main .swiper-container {
    height: 100%;
    position: relative;
  }
  .sec3-main::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/winery/frame.png);
    /*background-size: cover;*/
    pointer-events: none;
    background-size: 100% auto;
  }
  .sec3-main img {
    height: 100%;
    width: auto;
  }
  section .title::before {
    flex: auto;
    content: "";
    height: 1px;
    background: #d7c16e;
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    margin-right: 0.5em;
    top: 0.5em;
    position: relative;
  }
  section .title::after {
    vertical-align: bottom;
    top: 0.5em;
    position: relative;
  }
  section .title {
    justify-content: center;
    position: relative;
  }
  section.sec5 .title:before {
    width: calc(50% - 2em);
    position: absolute;
    bottom: 0;
    vertical-align: initial;
    top: initial;
    left: 0;
  }
  section.sec5 .title:after {
    width: calc(50% - 2em);
    position: absolute;
    bottom: 0;
    vertical-align: initial;
    top: initial;
    right: 0;
  }

  .sec4 {
    padding: 8.667vw 0 5.867vw 0;
    background: url(../images/winery/m-sec4.jpg) center bottom no-repeat;
    background-size: 100% auto;
  }
  .sec4 .title {
    margin-bottom: 0.25em;
  }
  .sec4-pic {
    width: 70.2667%;
    margin: 0 auto;
    margin-top: 8vw;
  }
  .sec4 p {
    text-align: center;
  }
  .sec5 {
    padding: 10.4vw 0 62.6vw 0;
    background: #120b08 url(../images/winery/m-people.png) center bottom
      no-repeat;
    background-size: 100% auto;
  }
  .sec5 ul {
    font-size: 2.6vw;
    padding-left: calc(6.667vw + 4em);
  }
  .swiper-button-next,
  .swiper-button-prev {
    width: 2.5333vw;
    background-size: 100% auto;
  }
  .sec3 .swiper-button-prev {
    left: -10vw;
  }
  .sec3 .swiper-button-next {
    right: -10vw;
  }
  .sec3-txtcon {
    width: 100%;
  }
  /*.slide-sec3-txt {width: 100%;}*/
  .slide-sec3-txt p {
    text-align: center;
  }
  .sec3-con {
    padding-bottom: 30vw;
  }
  .sec3-txt {
    width: 100vw;
  }
  .sec1-row h3 span {
    font-size: 5.8667vw;
    padding-left: 13.4vw;
  }
  .history-row {
    flex-direction: column;
  }
  .history-row span {
    font-size: 2.9333vw;
  }
  .history-arrow {
    width: 4.2667vw;
    margin: 3vw auto;
  }
  .sec2-mask {
    display: none;
  }
  .badge-main {
    width: 87.73vw;
    background: url(../images/winery/badge-main.png);
    padding: 4.6667vw;
    padding-top: 8vw;
  }
  .badge-title {
    width: 53.6vw;
    margin-top: 0;
    margin-bottom: 4.6667vw;
  }
  .slide-history {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .history-main {
    width: 57vw;
  }
  .history-txtcon {
    margin-top: 2vw;
  }
  .history-txtcon p {
    text-align: center;
    padding: 2.5em 0;
  }
  .history-txtcon .swiper-slide-active p {
    text-shadow: -0.2rem -0.2rem 1rem rgb(255 255 255 / 0.25),
      0.2rem 0.2rem 1rem rgb(255 255 255 / 0.25), 0 -0.5em 2rem #fff600,
      0 0.5em 4rem #fff600, 0 0 6rem #fff600, 0 -0.5em 8rem #fff600,
      0 0.5em 1rem #fff600;
  }
  /*	.slide-history .swiper-slide{
		-webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
	}
	.slide-history .swiper-slide{
		opacity: 0 !important;
	}
	.slide-history .swiper-slide-active{
		opacity: 1 !important;
	}*/
  .badge-main {
    margin-bottom: 10vw;
    margin-top: 8vw;
  }
  .history-pagination {
    bottom: -8vw;
    width: 100%;
    left: 0;
  }
}

/* 按鈕群組樣式 */
.btn-group {
  display: flex;
  gap: 20px;
  justify-content: center;
  position: absolute;
  bottom: 13em;
  left: 40%;
  transform: translateX(-50%);
  width: 100%;
}

.btn-group .other-btn {
  position: relative;
  left: auto;
  transform: none;
  bottom: auto;
  margin: 0;
  font-size: 1.5vw;
  width: 20vw;
  height: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 999px) {
  .btn-group {
    flex-direction: column;
    gap: 15px;
    align-items: center;
    bottom: 1em;
  }
}