/*****************************************
*                  index                 *
*****************************************/

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500&display=swap");

@font-face {
  font-family: "Glow Sans TC Normal";
  src: local("Glow Sans TC Normal Medium"), local("Glow Sans TC Normal"), local("GlowSansTC-Normal-Medium"),
    url("../fonts/GlowSansTC-Normal-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html {
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

html.is-loading #main {
  opacity: 0;
}

html.is-ready #main,
html:not(.is-loading) #main {
  opacity: 1;
}

#main {
  transition: opacity 0.2s ease;
}

* {
  outline: 0;
}

body {
  height: 100%;
  min-width: 1000px;
  font-size: 12px;
  font-family: "Noto Sans S Chinese", "Noto Sans TC", "Microsoft JhengHei", Tahoma, Verdana, Arial, Helvetica, sans-serif;
  text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1px;
  background: #f7f7f6;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

#wrap {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  z-index: 1;
}

#wrap2 {
  min-height: 100%;
}

.inner {
  position: relative;
  width: 1000px;
  margin: 0 auto;
}

#mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.tst-opacity {
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.textHide {
  font-size: 0;
  text-indent: -5000px;
}

@media screen and (max-width: 1100px) {
  body {
    min-width: 0;
    overflow-x: hidden;
  }
}

/* extracted from /css/brand/common.css */
#related {
  width: 100%;
  height: 216px;
}

.related-content {
  position: relative;
  left: 132px;
  width: 738px;
  height: 100%;
  overflow: hidden;
}

.related-content li {
  position: absolute;
  top: 0;
  width: 178px;
  height: auto;
  background: #ffffff;
  overflow: hidden;
  box-sizing: content-box;
}

.lt-5 .related-content li {
  display: inline-block;
  position: static;
  margin: 0 2px;
  text-align: left;
}

.lt-5 .related-content ul {
  text-align: center;
}

.related-content .order-0 { left: -178px; display: none; }
.related-content .order-1 { left: 6px; }
.related-content .order-2 { left: 190px; }
.related-content .order-3 { left: 374px; }
.related-content .order-4 { left: 558px; }
.related-content .order-5 { left: 742px; display: none; }

.related-content li a {
  position: relative;
  display: block;
  width: 150px;
  color: #505050;
  font-size: 13px;
  padding: 8px 14px 17px;
  box-sizing: content-box;
}

.related-content li .pic { width: 150px; height: 150px; overflow: hidden; }
.related-content li .pic img { width: 150px; }

.related-content li .name {
  position: relative;
  height: 36px;
  line-height: 18px;
  padding-left: 16px;
  margin-bottom: 5px;
  overflow: hidden;
}

.related-content li .name:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "＞";
}

.related-content li .status {
  position: absolute;
  top: 11px;
  left: 11px;
}

.related-content li .status span {
  display: block;
  width: 39px;
  height: 20px;
  font-size: 0;
  text-indent: -5000px;
  background-image: url(../../images/products/catalog-status.gif);
  background-repeat: no-repeat;
}

.related-content li .status span.soldout { background-position: 0 0; }
.related-content li .status span.limited { background-position: 0 -20px; }

.related-arrow li { height: 212px; }

.related-arrow li a {
  position: absolute;
  top: 85px;
  width: 33px;
  height: 33px;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.related-arrow li.prev a { background-image: url(../../images/products/related-arrow-prev.gif); left: 0; }
.related-arrow li.next a { background-image: url(../../images/products/related-arrow-next.gif); right: 0; }

#videos {
  width: 100%;
  height: 290px;
}

.videos-content {
  position: relative;
  left: 121px;
  width: 758px;
  height: 100%;
  overflow: hidden;
}

.videos-content li {
  position: absolute;
  top: 0;
  width: 364px;
  height: 243px;
}

.videos-content .order-0 { left: -394px; display: none; }
.videos-content .order-1 { left: 0; }
.videos-content .order-2 { left: 394px; }
.videos-content .order-3 { left: 788px; display: none; }

.videos-content li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #9e6a06;
  font-size: 16px;
  overflow: hidden;
  border-radius: 18px;
  clip-path: inset(0 round 18px);
}

.videos-content li a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 62px;
  height: 62px;
}

.videos-content li .pic {
  position: relative;
  width: 364px;
  height: 243px;
  aspect-ratio: 364 / 243;
  overflow: hidden;
  background: #ffffff;
  border-radius: 18px;
  clip-path: inset(0 round 18px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.videos-content li .pic picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  clip-path: inset(0 round 18px);
}

.videos-content li .pic:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: #ffffff 8px solid;
  box-sizing: border-box;
  border-radius: 18px;
}

.videos-content li .pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 18px;
  clip-path: inset(0 round 18px);
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.videos-content li a:hover .pic img {
  opacity: 1;
  filter: alpha(opacity=100);
}

.videos-content li .name {
  position: relative;
  text-align: center;
  line-height: 24px;
  padding: 11px 10px 11px;
  overflow: hidden;
}

.videos-arrow li a {
  position: absolute;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.videos-arrow li.prev a { left: 0; }
.videos-arrow li.next a { right: 0; }

#pop {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  z-index: 2;
}

.pop-container {
  position: absolute;
  width: 100%;
  height: auto;
  min-height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.pop-main {
  display: none;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.pop-main .btn-close {
  position: absolute;
  font-size: 0;
  text-indent: -5000px;
  background-position: center 0;
  background-repeat: no-repeat;
}

#pop #video .embed iframe { width: 100%; height: 100%; }

#main {
  overflow: hidden;
}

:root {
  --floating-icon-size: 9vw;
  --floating-bottom: 22%;
  --floating-gap: 20px;
}

.floating-img-btn-1 {
  position: fixed;
  bottom: calc(var(--floating-bottom) + var(--floating-icon-size) + var(--floating-gap));
  right: 2%;
  z-index: 5;
  display: inline-block;
}

.floating-img-btn-2 {
  position: fixed;
  bottom: var(--floating-bottom);
  right: 2%;
  z-index: 5;
  display: inline-block;
}

.floating-img-btn-1 img,
.floating-img-btn-2 img {
  width: var(--floating-icon-size);
  height: auto;
  cursor: pointer;
}

.area {
  position: relative;
}

.section {
  position: relative;
  background-repeat: no-repeat;
}

#custom {
}

#standard {
}

#custom .section {
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}

div#cut-7 {
  display: none;
}

#standard .section {
  /* background-image: url(../images/index/section-border.png); */
  background-position: center top;
  background-repeat: no-repeat;
}

#standard .section:first-child {
  background-image: none;
}

#custom #kv {
  height: auto;
  max-height: none;
  background: none;
  overflow: hidden;
}

#kv .kv-picture,
#kv .kv-img {
  display: block;
  width: 100%;
}

#kv .kv-img {
  height: auto;
}

#custom #cut-0 {
  height: auto;
  max-height: none;
  background: none;
  overflow: hidden;
}

#cut-0 .section-bg {
  display: block;
  width: 100%;
  height: auto;
}

#cut-0 .inner {
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#cut-0 .cut-0-copy {
  position: absolute;
  top: 5.11vw;
  left: 18vw;
  color: #006c49;
  line-height: 1.45;
  letter-spacing: 0;
  text-shadow: none;
}

#cut-0 .cut-0-copy h2 {
  margin: 0 0 1.82vw;
  font-family: "Noto Serif TC", "Noto Serif CJK TC", "Noto Serif", serif;
  font-weight: 500;
  color: #006c49;
  line-height: 1.18;
  letter-spacing: 1.0em;
}

#cut-0 .cut-0-copy h2 span {
  display: block;
}

#cut-0 .cut-0-copy h2 span:first-child {
  margin-bottom: 0.33vw;
  font-size: 4.0vw;
}

#cut-0 .cut-0-copy h2 span:last-child {
  font-size: 2.7vw;
}

#cut-0 .cut-0-copy p {
  margin: 0 0 2.31vw;
  font-family: "Glow Sans TC Normal", "Glow Sans TC", "GlowSansTC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 1.3vw;
  font-weight: 500;
  line-height: 1.55;
  color: #006c49;
}

#cut-0 .cut-0-copy p:last-child {
  margin-bottom: 0;
}

.cut-0-copy-mobile {
  display: none;
}

.copy-mobile-break {
  display: none;
}

.section-bg-picture,
.cut-2-bg-picture,
.tvcm-bg-picture {
  display: block;
}

#cut-2 {
  height: 999px;
  background-image: url(../images/index/cut-2-bg.jpg?v=200430);
  background-size: cover;
}

#cut-3 {
  height: 1409px;
  background-image: url(../images/index/cut-3-bg.jpg?v=200430);
}

/* #cut-4 {height: 2873px; background-image: url(../images/index/cut-4-bg.jpg?v=200430);} */
#cut-5 {
  height: 636px;
  background-image: url(../images/index/cut-5-bg.jpg?v=200430);
}

#cut-6 {
  height: 598px;
  background-image: url(../images/index/cut-6-bg.jpg?v=200430);
}

/* #cut-7 {height: 620px; background-image: url(../images/index/cut-7-bg.jpg);} */
#cut-7 {
  height: auto;
  background: #f7f7f6;
  padding-top: 86px;
  padding-bottom: 86px;
}

#cut-2 .title {
}

#cut-2 .text {
  top: 197px;
  left: 29px;
  width: 525px;
  height: 304px;
  background: url(../images/index/cut-2-text.png?v=190430) 0 0 no-repeat;
}

#cut-3 .title {
}

#cut-3 .text {
  top: 205px;
  left: 278px;
  width: 578px;
  height: 248px;
  background: url(../images/index/cut-3-text.png) 0 0 no-repeat;
}

#cut-3 .mark {
  top: 45px;
  left: 878px;
  width: 121px;
  height: 121px;
  background: url(../images/index/cut-3-mark.png) 0 0 no-repeat;
}

#cut-4 .title {
}

#cut-4 .text {
  top: 142px;
  left: 214px;
  width: 588px;
  height: 231px;
  background: url(../images/index/cut-4-text.png) 0 0 no-repeat;
}

#cut-5 .title {
}

#cut-5 .text {
  top: 212px;
  left: 275px;
  width: 451px;
  height: 126px;
  background: url(../images/index/cut-5-text.png) 0 0 no-repeat;
}

#cut-5 .btn-cta {
  top: 348px;
  left: 532px;
  width: 361px;
  height: 65px;
  background: url(../images/index/btn-cta.png) 0 0 no-repeat;
}

#cut-6 .title {
}

#cut-6 .text-1 {
  top: 129px;
  left: 286px;
  width: 428px;
  height: 89px;
  background: url(../images/index/cut-6-text-1.png) 0 0 no-repeat;
}

#cut-6 .text-2 {
  top: 752px;
  left: 286px;
  width: 432px;
  height: 158px;
  background: url(../images/index/cut-6-text-2.png) 0 0 no-repeat;
}

#cut-6 .mark {
  top: 45px;
  left: 878px;
  width: 121px;
  height: 121px;
  background: url(../images/index/cut-6-mark.png) 0 0 no-repeat;
}

#cut-6 .btn-event {
  top: 203px;
  left: 88px;
}

#cut-7 .title {
  font-size: 36px;
  line-height: 80px;
  border-bottom: #c2c2c1 1px solid;
}

#cut-7 .text {
  color: #464646;
  font-size: 19px;
  font-weight: 300;
  line-height: 40px;
  letter-spacing: 3px;
  padding: 20px 0 12px;
}

/*
#cut-7 .text-1 {
	top: 56px;
	left: 1px;
	width: 248px;
	height: 290px;
	background: url(../images/index/cut-7-text-1.png) 0 0 no-repeat;
}

#cut-7 .text-2 {
	top: 370px;
	left: 662px;
	width: 336px;
	height: 230px;
	background: url(../images/index/cut-7-text-2.png) 0 0 no-repeat;
}
*/
#standard .title,
#standard .content {
  position: absolute;
}

#standard .content {
  width: 100%;
}

#standard #campaign {
  height: 552px;
  /*	background-image: none;*/
  background-color: #ededed;
  /*	background-position: center top;*/
}

#campaign .title {
  top: 80px;
  left: 294px;
  width: 413px;
  height: 75px;
  background: url(../images/index/campaign-title.png) 0 0 no-repeat;
}

#campaign .content {
  top: 204px;
}

#campaign ul {
  font-size: 0;
  text-align: center;
}

#campaign li {
  display: inline-block;
  width: 455px;
  height: 243px;
  margin: 0 15px;
  background: #dec73c;
}

#campaign li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #cece9e;
  overflow: hidden;
}

#campaign li a img {
  display: block;
}

#campaign li a:hover img {
  opacity: 0.7;
}

#campaign li a:after {
  /*	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/index/campaign-frame.png) 0 0 no-repeat;
	box-sizing: border-box;*/
}

#products {
  height: 484px;
  /*	background-image: url(../images/index/products-bg.jpg);*/
  background-color: #ededed;
  /*	background-position: center top;*/
}

#products .title {
  top: 40px;
  left: 324px;
  width: 353px;
  height: 74px;
  background: url(../images/index/products-title.png) 0 0 no-repeat;
}

#products .content {
  top: 162px;
}

#products .related-content {
}

#products .related-content li {
  /*	border-color: #ffe55f;
	background: #ffe55f;*/
  background: #ffffff;
}

#products .related-content li a {
  border-color: transparent;
  background: #cece9e;
}

#products .related-content li a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

#products .related-content .order-0 {
  left: -185px;
}

#products .related-content .order-1 {
  left: 0;
}

#products .related-content .order-2 {
  left: 186px;
}

#products .related-content .order-3 {
  left: 372px;
}

#products .related-content .order-4 {
  left: 558px;
}

#products .related-content .order-5 {
  left: 744px;
}

#products .related-content li a {
  color: #172810;
}

#products .related-arrow {
}

#products .related-arrow li {
  height: auto;
}

/*#products .related-arrow li.prev {left: 13px;}
#products .related-arrow li.next {right: 13px;}*/
#products .related-arrow li a {
  top: 79px;
  width: 57px;
  height: 60px;
  background-position: center top;
}

#products .related-arrow li a:hover {
  background-position: center bottom;
}

#products .related-arrow li.prev a {
  background-image: url(../images/index/arrow-prev.png);
  left: 13px;
}

#products .related-arrow li.next a {
  background-image: url(../images/index/arrow-next.png);
  right: 13px;
}

#tvcm {
  height: 662px;
  background: #b5daab;
  position: relative;
  display: flex;
  flex-direction: column;
}

#tvcm .tvcm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#tvcm .inner {
  z-index: 1;
  height: 100%;
}

/* #tvcm::before, */
#tvcm::after {
  content: "";
  background: url(../images/index/linebg.jpg) center top no-repeat;
  display: block;
  position: relative;
  bottom: -14%;
}

#tvcm::after {
  height: 27px;
  background-position: center bottom;
}
#tvcm .title {
  left: 50%;
  width: auto;
  height: auto;
  background: none;
  transform: translateX(-50%);
  position: relative;
  bottom: -43px;
  text-align: center;
}

#tvcm .title h3 {
  margin: 0;
  color: #006c49;
  font-family: "Noto Serif TC", "Noto Serif CJK TC", "Noto Serif", serif;
  font-size: 2.4vw;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.25em;
}

#tvcm .content {
  top: 178px;
}

#tvcm #videos {
  height: 243px;
}
#tvcm .videos-content li .pic {
  background: rgb(2 140 62 / 0%);
  border-radius: 18px;
  overflow: hidden;
  clip-path: inset(0 round 18px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
#tvcm .videos-content li .pic picture,
#tvcm .videos-content li .pic img {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 18px;
  clip-path: inset(0 round 18px);
}
#tvcm .videos-content li a {
}

#tvcm .videos-content li a:after {
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  background: url(../images/index/tvcm-play2025.png) 0 0 no-repeat;
  background-size: cover;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

/* #tvcm .videos-content li:hover a:after {
  width: calc(148px * 1.1);
  height: calc(148px * 1.1); */
/*transform: scale(1.1) translate(-50%,-50%);*/
/* } */

#tvcm .videos-content li a:hover:before {
  opacity: 1;
}

#tvcm .pic {
  background: #182a10;
  /*	background: rgba(68, 16, 0, 0.5);*/
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*#tvcm .videos-content li a:hover .pic {background: rgba(68, 16, 0, 1);}*/
#tvcm .videos-content li a .pic img {
  opacity: 0.95;
  filter: alpha(opacity=90);
}

#tvcm .videos-content li a:hover .pic img {
  opacity: 1;
  filter: alpha(opacity=1);
}

/* #tvcm .pic:after {
  border-color: #85c09f;
  border-width: 8px;
} */

.videos-content li .pic:after {
  border: #ffffff 0px solid;
}

#tvcm .videos-content {
  height: 243px;
  bottom: -100px;
}

#tvcm .videos-content .name {
  color: #3d7037;
  display: none;
}

#tvcm .videos-arrow {
}

#tvcm .videos-arrow li {
  height: auto;
}

#tvcm .videos-arrow li.prev {
  left: 13px;
}

#tvcm .videos-arrow li.next {
  right: 13px;
}

#tvcm .videos-arrow li a {
  top: 246px;
  width: 57px;
  height: 60px;
  background-position: center top;
}

#tvcm .videos-arrow li a:hover {
  background-position: center bottom;
}

#tvcm .videos-arrow li.prev a {
  background-image: url(../images/index/arrow-prev.png?v=02);
  left: 36px;
}

#tvcm .videos-arrow li.next a {
  background-image: url(../images/index/arrow-next.png?v=02);
  right: 36px;
}

#tvcm .social-link img {
  height: 35px;
}

#tvcm .social-link {
  margin-bottom: 125px;
}
#tvcm .social-link ul {
  display: flex;
  position: relative;
  left: 50%;
  margin: 0 auto;
  transform: translateX(-50%);
  justify-content: center;
  bottom: -185px;
}
#tvcm .social-link li {
  margin: 0 42px;
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#tvcm .social-link li:hover {
  transform: scale(1.05);
}

.tvcm-mobile-slider {
  display: none;
}

#knowledge {
  height: 332px;
  margin-top: -332px;
}

#knowledge .content {
}

#knowledge ul {
  font-size: 0;
  text-align: center;
}

#knowledge li {
  display: inline-block;
  margin: 0 15px;
  background-color: #ffd985;
}

#knowledge li a {
  display: block;
  width: 455px;
  height: 245px;
  background-position: center center;
  background-repeat: no-repeat;
}

#knowledge li a:hover {
  opacity: 0.7;
}

#knowledge li a.item-1 {
  background-image: url(../images/index/knowledge-1.jpg);
}

#knowledge li a.item-2 {
  background-image: url(../images/index/knowledge-2.jpg);
}

#shop {
  height: 375px;
  /*	background-image: url(../images/index/shop-bg.jpg);*/
  background-color: #ededed;
  /*	background-position: center top;*/
}

#shop .title {
  top: 41px;
  left: 264px;
  width: 473px;
  height: 75px;
  background: url(../images/index/shop-title.png) 0 0 no-repeat;
}

#shop .content {
  top: 162px;
}

#shop ul {
  font-size: 0;
  text-align: center;
}

#shop li {
  display: inline-block;
  width: 230px;
  height: 100px;
  margin: 0 3px;
  vertical-align: top;
  background: #ffffff;
}

#shop li a {
  display: table-cell;
  width: 230px;
  height: 100px;
  vertical-align: middle;
  background: #cece9e;
}

#shop li a:hover {
  opacity: 0.5;
}

#shop li a img {
  margin: 0 0 0 0;
}

#standard #social {
  padding: 89px 0;
  background: #2f4a23;
  /*	background: url(../images/index/social-bg.jpg) #814e19 center top no-repeat;*/
}

#standard #social:after {
  content: "";
  position: absolute;
  top: -51px;
  left: 0;
  width: 100%;
  height: 51px;
  background: url(../images/index/social-extra.png) center top no-repeat;
}

#social .content {
  position: relative;
}

#social ul {
  font-size: 0;
  text-align: center;
}

#social li {
  position: relative;
  display: inline-block;
  margin: 0 13px;
  /*	background: #a81600;*/
}

#social li a {
  position: relative;
  display: block;
  width: 455px;
  height: 100px;
  /*background-image: url(../images/index/social-items.jpg);*/
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
}

@media screen and (max-width: 1100px) {
  #social li a {
    background-image: var(--social-pic-m, var(--social-pic-pc));
  }
}

#social li a:hover {
  opacity: 0.45;
}

#social li a.facebook {
  background-position: center center;
}

#social li a.instagram {
  background-position: center center;
}

#pop {
}

.pop-container {
  background: rgba(237, 237, 237, 0.8);
}

.pop-main {
  margin-top: 80px;
  margin-bottom: 80px;
}

.pop-main .btn-close {
  top: -70px;
  right: 0;
  width: 121px;
  height: 70px;
  background-image: url(../images/index/pop-btn-close.png);
}

.pop-main .btn-close:hover {
  background-position: center bottom;
}

#video {
  width: 1000px;
}

#video .embed {
  width: 1000px;
  height: 560px;
  background: #000000;
  overflow: hidden;
}

ul.videos-list {
  display: flex;
  gap: 10px;
}

#video .btn-close {
}

/* 202206 */
#cut-4 {
  height: 1125px;
  background: url(../images/index/slide_bg.jpg) center center no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

#cut-4 .inner {
  width: 90%;
  height: 80vh;
  position: relative;
  max-width: 1528px;
  max-height: 783px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mySwiper {
  width: 1150px;
  height: 480px;
}

.slide-left,
.slide-right {
  width: 46px;
  height: 121px;
  background: url(../images/index/slide_arrow.png);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

.slide-left:hover,
.slide-right:hover {
  opacity: 0.9;
}

.slide-left {
  position: absolute;
  left: 0;
}

.slide-right {
  position: absolute;
  right: 0;
  transform: scaleX(-1);
}

#cut-4 .swiper-pagination {
  text-align: left;
}

#cut-4 .swiper-pagination-bullet {
  color: #252323;
  font-size: 19px;
  margin: 0;
  margin-right: 1em;
  width: initial;
  background: transparent;
  opacity: 1;
  height: initial;
  padding-bottom: 0.25em;
  border-radius: 0;
}

#cut-4 .swiper-pagination-bullet:hover,
#cut-4 .swiper-pagination-bullet-active {
  color: #9b8532;
  border-bottom: 1px solid #9b8532;
}

/*2025 06 26*/
#cut-2-2023 {
  max-height: none;
  background: none;
  position: relative;
  height: auto;
  margin: 0 auto;
}

#cut-2-2023 .cut-2-bg {
  display: block;
  width: 100%;
  height: auto;
}
#cut-2-2023 .inner {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
#cut-2-2023 .inner .title {
  padding-top: 135px;
  left: 280px;
  position: relative;
  margin-bottom: 20px;
}

.cut-2-area {
  display: flex;
  flex-direction: column;
}
.cut-2-are1 {
  padding-bottom: 85px;
  right: 200px;
  position: relative;
  align-self: flex-end;
}
.cut-2-are2 {
  padding-bottom: 46px;
  left: 234px;
  position: relative;
}
.cut-2-are3 {
  padding-bottom: 46px;
  align-self: flex-end;
  right: 200px;
  position: relative;
}

.cut-2-video-box-1 video,
.cut-2-video-box-2 video,
.cut-2-video-box-3 video {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  display: block;
}
.cut-2-video-box-1 {
  position: absolute;
  width: 32%;
  aspect-ratio: 16 / 9;
  top: 17.7%;
  left: 14.6%;
  background: transparent;
  border-radius: 40px;
  overflow: hidden;
  z-index: 1;
}

.cut-2-copy {
  position: absolute;
  z-index: 2;
  color: #006c49;
  letter-spacing: 0;
  text-shadow: none;
}

.cut-2-copy h3 {
  margin: 0 0 1.35vw;
  color: #006c49;
  font-family: "Noto Serif TC", "Noto Serif CJK TC", "Noto Serif", serif;
  line-height: 1.18;
  letter-spacing: 1em;
}

.cut-2-copy h3 span {
  display: block;
}

.cut-2-copy h3 span:first-child {
  margin-bottom: 0.18vw;
  font-size: 1.7vw;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.cut-2-copy h3 span:last-child {
  font-size: 2.7vw;
  font-weight: 700;
}

.cut-2-copy p {
  margin: 0;
  color: #006c49;
  font-family: "Glow Sans TC Normal", "Glow Sans TC", "GlowSansTC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 1.3vw;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 1.5px;
}

.cut-2-copy-1 {
  top: 18.25%;
  left: 55.4%;
  width: 28%;
}

.cut-2-copy-2 {
  top: 28.1%;
  left: 18%;
  width: 30%;
}

.cut-2-copy-3 {
  top: 38.05%;
  left: 55.4%;
  width: 32%;
}

.cut-2-copy-hojicha,
.cut-2-copy-hojicha h3,
.cut-2-copy-hojicha p {
  color: #9f5145;
}

.cut-2-copy-4 {
  top: 65.7%;
  left: 18%;
  width: 39%;
}

.cut-2-copy-5 {
  top: 75.8%;
  left: 55.4%;
  width: 34%;
}

.cut-2-copy-6 {
  top: 81.6%;
  left: 55.4%;
  width: 35%;
}

.cut-2-bottom-copy {
  position: absolute;
  top: 91.2%;
  left: 18%;
  width: 34%;
  z-index: 2;
  color: #006c49;
  text-shadow: none;
}

.cut-2-bottom-copy h3 {
  margin: 0 0 1.35vw;
  color: #006c49;
  font-family: "Noto Serif TC", "Noto Serif CJK TC", "Noto Serif", serif;
  line-height: 1.18;
  letter-spacing: 1em;
}

.cut-2-bottom-copy h3 span {
  display: block;
}

.cut-2-bottom-copy h3 .cut-2-bottom-logo {
  display: block;
  margin-bottom: 0.18vw;
  width: 22vw;
}

.cut-2-bottom-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.cut-2-bottom-copy h3 span:last-child {
  font-size: 2.7vw;
  font-weight: 700;
}

.cut-2-bottom-copy p {
  margin: 0;
  color: #006c49;
  font-family: "Glow Sans TC Normal", "Glow Sans TC", "GlowSansTC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 1.3vw;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 1.5px;
}

.cut-2-video-box-2 {
  position: absolute;
  width: 32%;
  aspect-ratio: 16 / 9;
  top: 27.5%;
  left: 53.7%;
  background: transparent;
  border-radius: 40px;
  overflow: hidden;
  z-index: 1;
}

.cut-2-video-box-3 {
  position: absolute;
  width: 32%;
  aspect-ratio: 16 / 9;
  top: 37.3%;
  left: 14.6%;
  background: transparent;
  border-radius: 40px;
  overflow: hidden;
  z-index: 1;
}

.anchor {
  position: absolute;
  top: 44.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 71%;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.anchor picture {
  display: none;
}

.anchor img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1100px) {
  .inner {
    width: 100%;
  }

  #cut-0 .inner {
    left: 0;
    transform: none;
    width: 100%;
  }

  #cut-0 .cut-0-copy {
    top: 6vw;
    left: 8.02vw;
    width: 54.17vw;
  }

  #cut-0 .cut-0-copy h2 {
    margin-bottom: 4.17vw;
    letter-spacing: 0.62em;
  }

  #cut-0 .cut-0-copy h2 span:first-child {
    margin-bottom: 0.83vw;
    font-size: 10.23vw;
  }

  #cut-0 .cut-0-copy h2 span:last-child {
    font-size: 6.8vw;
  }

  #cut-0 .cut-0-copy p {
    margin-bottom: 4.58vw;
    font-size: 3.02vw;
    line-height: 1.55;
  }

  .cut-0-copy-pc {
    display: none;
  }

  .cut-0-copy-mobile {
    display: block;
  }

  .copy-pc-inline {
    display: none;
  }

  .copy-mobile-break {
    display: inline;
  }

  #standard .title,
  #standard .content {
    position: relative;
    top: auto;
    left: auto;
  }

  #campaign,
  #products,
  #shop,
  #social {
    height: auto;
    padding: 40px 0;
  }

  #campaign .content,
  #products .content,
  #shop .content {
    top: 20px;
  }

  #campaign li {
    width: 92%;
    height: auto;
    margin: 0 auto 16px;
    display: block;
  }

  #campaign li a img {
    width: 100%;
    height: auto;
  }

  #related {
    height: auto;
  }

  #products .related-content {
    left: 0;
    width: 100%;
    overflow: visible;
  }

  #products .related-content ul {
    display: flex;
    gap: 12px;
    justify-content: center;
    overflow-x: auto;
    padding: 0 12px 8px;
  }

  #products .related-content li {
    position: static;
    left: auto;
    display: inline-block;
    min-width: 178px;
  }

  #products .related-content .order-0,
  #products .related-content .order-1,
  #products .related-content .order-2,
  #products .related-content .order-3,
  #products .related-content .order-4,
  #products .related-content .order-5 {
    left: auto;
    display: inline-block;
  }

  #products .related-arrow {
    display: none;
  }

  #shop ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  #shop li {
    width: calc(50% - 12px);
    margin: 0;
    height: auto;
  }

  #shop li a {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
  }

  #shop li a img {
    max-width: 100%;
    height: auto;
  }

  #social ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  #social li {
    margin: 0;
  }

  #social li a {
    width: 92vw;
    max-width: 455px;
  }

  :root {
    --floating-icon-size: 20vw;
    --floating-bottom: 90px;
    --floating-gap: 15px;
  }

  #tvcm {
    height: 110vw;
  }

  #tvcm::after {
    background-size: 375px auto;
    height: 13px;
    top: 2.9%;
    bottom: auto;
  }

  #tvcm .inner {
    height: auto;
    padding-top: 41px;
  }

  #tvcm .title {
    left: 50%;
    width: 100%;
    height: auto;
    background: none;
    transform: translateX(-50%);
    position: relative;
    top: 0;
    bottom: 0;
    margin-bottom: 37px;
  }

  #tvcm .title h3 {
    font-size: 5.2vw;
    letter-spacing: 0.35em;
  }

  #tvcm .content {
    position: relative;
    top: 0;
  }

  #tvcm #videos {
    height: auto;
  }

  .tvcm-mobile-slider {
    display: block;
    position: relative;
    width: calc(576 / 750 * 100vw);
    margin: 0 auto;
  }

  .tvcm-mobile-slider .swiper {
    width: 100%;
    overflow: hidden;
  }

  .tvcm-mobile-slider .swiper-slide {
    width: 100%;
  }

  .tvcm-mobile-slider .swiper-slide > a {
    position: relative;
    display: block;
  }

  .tvcm-mobile-slider .swiper-slide > a:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    background: url(../images/index/tvcm-play2025.png) 0 0 no-repeat;
    background-size: cover;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  .tvcm-mobile-slider .pic {
    position: relative;
    width: 100%;
    aspect-ratio: 672 / 359;
    overflow: hidden;
    background: #ffffff;
    border-radius: 12px;
  }

  .tvcm-mobile-slider .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
  }

  .tvcm-mobile-slider .name {
    display: none;
  }

  .tvcm-mobile-arrow {
    position: absolute;
    top: 50%;
    display: block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 5;
  }

  .tvcm-mobile-prev {
    left: -48px;
    background-image: url(../images/mobile/index/arrow-prev.png);
  }

  .tvcm-mobile-next {
    right: -48px;
    background-image: url(../images/mobile/index/arrow-next.png);
  }

  #tvcm .videos-content {
    display: none;
  }

  #tvcm .videos-arrow {
    display: none;
  }

  #tvcm .social-link {
    margin-top: 41px;
    margin-bottom: 0;
  }

  #tvcm .social-link ul {
    display: block;
    position: static;
    left: auto;
    transform: none;
    bottom: auto;
  }

  #tvcm .social-link li {
    margin: 0 0 38px;
  }

  #tvcm .social-link a {
    width: calc(537 / 750 * 100vw);
    display: block;
    margin: 0 auto;
  }

  #tvcm .social-link a img {
    width: 100%;
    height: auto;
  }

  #products .title {
    left: 50%;
    transform: translateX(-50%);
  }

  #products .content {
    text-align: center;
  }

  #products .related-content {
    left: 0;
    margin: 0 auto;
  }

  #products .related-content ul {
    text-align: center;
  }

  #products .related-content li {
    text-align: left;
  }

  .cut-2-video-box-1,
  .cut-2-video-box-2,
  .cut-2-video-box-3 {
    border-radius: 20px;
  }

  .cut-2-video-box-1 {
    position: absolute;
    width: 88%;
    top: 10.1%;
    left: 19.6%;
    border-radius: 25px;
    overflow: hidden;
  }

  .cut-2-copy-1 {
    top: 16.8%;
    left: 31.6%;
    width: 68%;
  }

  .cut-2-copy-2 {
    top: 29.15%;
    left: 31.6%;
    width: 78%;
  }

  .cut-2-copy-3 {
    top: 41.5%;
    left: 31.6%;
    width: 74%;
  }

  .cut-2-copy-4 {
    top: 66.7%;
    left: 31.6%;
    width: 84%;
  }

  .cut-2-copy-5 {
    top: 81.8%;
    left: 31.6%;
    width: 74%;
  }

  .cut-2-copy-6 {
    top: 86.3%;
    left: 31.6%;
    width: 74%;
  }

  .cut-2-bottom-copy {
    top: 92.5%;
    left: 6%;
    width: 54%;
  }

  .cut-2-bottom-copy h3 {
    margin-bottom: 3.4vw;
    letter-spacing: 0.12em;
    line-height: 1.18;
  }

  .cut-2-bottom-copy h3 .cut-2-bottom-logo {
    margin-bottom: 0.5vw;
    width: 46vw;
  }

  .cut-2-bottom-copy h3 span:last-child {
    font-size: 5.21vw;
  }

  .cut-2-bottom-copy p {
    font-size: 3.02vw;
    line-height: 1.55;
    letter-spacing: -1.5px;
  }

  .cut-2-copy h3 {
    margin-bottom: 3.4vw;
    letter-spacing: 0.52em;
    line-height: 1.18;
  }

  .cut-2-copy h3 span:first-child {
    margin-bottom: 0.5vw;
    font-size: 3.42vw;
  }

  .cut-2-copy h3 span:last-child {
    font-size: 5.71vw;
  }

  .cut-2-copy p {
    font-size: 3.02vw;
    line-height: 1.55;
    letter-spacing: 1.5px;
  }

  .cut-2-video-box-2 {
    position: absolute;
    width: 88%;
    top: 22%;
    left: -4.3%;
    border-radius: 25px;
    overflow: hidden;
  }

  .cut-2-video-box-3 {
    position: absolute;
    width: 88%;
    top: 34.5%;
    left: 19.6%;
    border-radius: 25px;
    overflow: hidden;
  }

  .anchor {
    width: 100%;
  }
}

/* Keep LINE UP as a compact horizontal carousel on tablets. */
@media screen and (min-width: 751px) and (max-width: 1100px) {
  #products {
    overflow: hidden;
  }

  #products .title {
    max-width: calc(100% - 48px);
    background-size: contain;
    background-position: center;
  }

  #related {
    position: relative;
    width: 100%;
  }

  #products .related-content {
    width: 582px;
    height: 216px;
    overflow: hidden;
  }

  #products .related-content ul {
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  #products .related-content ul.is-centered {
    justify-content: center;
  }

  #products .related-content ul::-webkit-scrollbar {
    display: none;
  }

  #products .related-content li {
    flex: 0 0 178px;
    min-width: 178px;
    margin: 0;
  }

  #products .related-content li + li {
    margin-left: 24px;
  }

  #products #related.lt-5 .related-content ul {
    display: flex;
    justify-content: center;
    gap: 0;
  }

  #products #related.lt-5 .related-content li {
    margin: 0;
  }

  #products #related.lt-5 .related-content li + li {
    margin-left: 24px;
  }

  #products .related-arrow {
    display: block;
  }

  #products .related-arrow li.prev a {
    left: 16px;
  }

  #products .related-arrow li.next a {
    right: 16px;
  }
}

@media screen and (min-width: 900px) and (max-width: 1100px) {
  #products .related-content {
    width: 784px;
  }
}