/*=== index ===*/
.index {
	position:relative;
	background-image:url('images/index/img-index_bg.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
    overflow: hidden;
}
.index img {
	max-width:100%;
}
@media (max-width: 991px) {
.index {
	background-image:url('images/index/img-index_bg-xs.jpg');
}
}

/*=== 1)main ===*/
.section-main{
	height:auto;
    padding-top: 4vw;
	margin-top:80px;
    overflow: hidden;
}
.section-main .mainBOX {
	position:relative;
	display:flex;
}
.section-main .mainBOX .col-item {
	position:relative;
}
.section-main .mainBOX .col-item:last-child {
	padding-right:8.2vw;
	padding-top:3.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-main .mainBOX .img-pd img{
	height:auto;
    width: 61.29vw;
}
.section-main .mainBOX .img-logo img {
	height:auto;
    width: 21.875vw;
}
.section-main .mainBOX .txt{
	padding-top:5.8vw;
}
.section-main .mainBOX .txt p{
	text-align:center;
	line-height:1.5;
	color:var(--color-gold);
    font-size: min(max(1.67vw, 18px), 32px);
}

@media (max-width: 1300px) {
.section-main {
    height: auto;
}
}

@media (max-width: 991px) {
.section-main {
	height: auto;
    padding-top: 4vw;
}
.section-main .mainBOX {
    flex-direction: column;
    align-items: center;
}
.section-main .mainBOX .col-item:last-child {
    padding-top: 0;
    padding-right: 0;
	margin-top: -6vw;
}
.section-main .mainBOX .img-pd img {
    width: 88vw;
}
.section-main .mainBOX .img-logo img {
    width: 42vw;
}
.section-main .mainBOX .txt p {
    font-size: min(max(3.4vw, 16px), 30px);
}

}

/*=== 2)about ===*/
.section-about{
	position:relative;
    padding-bottom: 8vw;
    overflow: hidden;
	padding-top:6vw;
}
.section-about .bgBOX{
	position:absolute;
	z-index:1;
    top: 8%;
    left: 50%;
    transform:translate(-50%,0%);
	width:100%;
}
.section-main p,
.section-about p{
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
}
.section-about .aboutBOX,
.section-about .col-brand{
	position:relative;
	z-index:2;
}
.section-about .col-brand .brand {
	position:relative;
	left:11.45vw;
    z-index: 3;
}
.section-about .col-brand .icon-ig {
	position:absolute;
	left:28.3875vw;
	top:9.2vw;
    z-index: 4;
}
.section-about .col-brand .icon-fb {
	position:absolute;
	left:32.5625vw;
	top:8.5vw;
    z-index: 4;
}
.section-about .col-brand .brand img{
	width:34.375vw;
	height:auto;
}
.section-about .col-brand .icon-ig img{
	width:3.125vw;
	height:auto;
}
.section-about .col-brand .icon-fb img{
	width:3.125vw;
	height:auto;
}
.section-about .col-brand .icon-ig:hover img,
.section-about .col-brand .icon-fb:hover img {
	transform:scale(1.1);
}

.section-about .col-deco {
	position:relative;
}
.section-about .col-deco .deco-right img{
    position: absolute;
    width: 16.32vw;
    height: auto;
    right: 15.8vw;
    top: -8vw;
}

.section-about .col-deco .deco-left img {
	position:absolute;
	width:14.84375vw;
	height:auto;
	left: 8vw;
    bottom: -4vw;
}
.section-about .col-text {
	position:relative;
	padding-top:5.2vw;
	padding-left:28.125vw;
	padding-right:16.875vw;
    z-index: 1;
}
.section-about .col-text .textBOX {
  display:grid;
  gap: 8.3vw 1.5625vw;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 
  "num1 num1 num1"
  "num2 num3 num4"
  "num5 num5 num5"
}
.num1 {
  grid-area: num1;
}
.num2 {
  grid-area: num2;
}
.num3 {
  grid-area: num3;
}
.num4 {
  grid-area: num4;
}
.num5 {
  grid-area: num5;
}
.section-about .col-text .textBOX p{
	color:#fff;
	line-height:1.8;
    font-size: min(max(0.9375vw, 14px), 18px);
}	
.section-about .col-text .textBOX .num1 p{
	width:38vw;
}
.section-about .col-text .textBOX .num5 p{
	width:38vw;
}
.section-about .col-slogan {
	position:relative;
	padding-top:12.4375vw;
}
.section-about .col-slogan p {
    font-size: min(max(1.875vw, 24px), 36px);
	color:var(--color-gold);
	text-align:center;
}
.hasNum {
	position:relative;
}
.hasNum:before {
	content:"";
	position:absolute;
	margin-left:min(max(-1vw, -14px), -20px);
    margin-top: 2px;
	color:#00ffff;
	text-shadow:1px 1px 10px #00ffff, 1px 1px 10px #fff;
	font-weight:500;
    font-size: min(max(1vw, 14px), 20px);
	font-family: "Montserrat", sans-serif;
}
.num1:before {
	content:"1";
}
.num2:before {
	content:"2";
}
.num3:before {
	content:"3";
}
.num4:before {
	content:"4";
}
.num5:before {
	content:"5";
}


@media (max-width: 1300px) {
.section-about {
    padding-bottom: 6vw;
}
.section-about .col-brand .brand {
    left: 8.45vw;
}
.section-about .col-deco .deco-right img {
    right: 13.8vw;
}
.section-about .col-text {
    padding-top: 5.2vw;
    padding-left: 26.125vw;
    padding-right: 14.875vw;
}
.section-about .col-slogan {
    position: relative;
    padding-top: 11.4375vw;
}
.section-about .col-slogan p {
    font-size: min(max(1.875vw, 20px), 36px);
}
.section-about .bgBOX {
    width: 115%;
}
.section-about .col-brand .icon-ig {
    left: 26.0875vw;
}
.section-about .col-brand .icon-fb {
    left: 30.1625vw;
}
}

@media (max-width: 991px) {
.section-about {
	padding-top: 38vw;
}
.section-about .bgBOX {
	width: 100%;
    top: 58vw;
    left: 50%;
    transform: translate(-46%, 0%);
}
.section-about .col-brand .brand {
	left: 17vw;
}
.section-about .col-brand .icon-ig {
	left: 51.5vw;
	top: 18.8vw;
}
.section-about .col-brand .icon-fb {
	left: 60.2vw;
	top: 17.5vw;
}
.section-about .col-brand .brand img {
    width: 68.4vw;
}
.section-about .col-brand .icon-ig img,
.section-about .col-brand .icon-fb img {
    width: 6.51vw;
}
.section-about .col-text {
	padding-top: 18vw;
	padding-left: 16.125vw;
	padding-right: 2.6vw;
}
.section-about .col-text .textBOX {
  gap: 7.5vw 0;
  grid-template-columns: repeat(1, 1fr);
  grid-template-areas: 
  "num1"
  "num2"
  "num3"
  "num4"
  "num5"
}
.section-about .col-text .textBOX .num1 p {
    width: 50.1vw;
}
.section-about .col-text .textBOX .num2 p {
    width: 37.2vw;
}
.section-about .col-text .textBOX .num3 p {
    width: 71.7vw;
}
.section-about .col-text .textBOX .num4 p {
    width: 43.2vw;
}
.section-about .col-text .textBOX .num5 p {
    width: 43.2vw;
}
.section-about .col-deco .deco-left img {
	width:28.5vw;
    bottom: auto;
	left:8vw;
	top:10vw;
}
.section-about .col-deco .deco-right img {
	width:28.5vw;
    top: auto;
	right: 8vw;
	bottom: 10vw;
}
.section-about .col-text .textBOX .num1{
    padding-left: 25vw;
}
.section-about .col-text .textBOX .num2{
    padding-left: 25vw;
}
.section-about .col-text .textBOX .num4{
    padding-top: 6vw;
}
.section-about .col-text .textBOX .num5{
    padding-top: 6vw;
}
.section-about .col-text .textBOX p{
    font-size: min(max(1.9375vw, 14px), 18px);
}
.section-about .col-slogan p {
	font-size: min(max(4.18vw, 18px), 36px);
	width: 80vw;
	margin:0 auto;
}

}

@media (max-width: 767px) {
.section-about {
	padding-top: 30vw;
}
.section-about .bgBOX {
    top: 58vw;
    left: 50%;
    transform: translate(-50%, 0%);
}
.section-about .col-brand .brand {
	left: 12vw;
}
.section-about .col-brand .brand img {
	width: 78.4vw;
}
.section-about .col-brand .icon-ig img,
.section-about .col-brand .icon-fb img {
    width: 7.51vw;
}
.section-about .col-brand .icon-ig {
	left: 51.5vw;
	top: 21.8vw;
}
.section-about .col-brand .icon-fb {
	left: 61.5vw;
	top: 20.5vw;
}
.section-about .col-deco .deco-right img {
	right: 4vw;
	bottom: 32vw;
}
.section-about .col-text .textBOX p {
	font-size: min(max(1.9375vw, 12px), 18px);
}
.section-about .col-text {
	padding-top: 19vw;
	padding-left: 18.125vw;
}
.section-about .col-text .textBOX .num1 p {
	width: 52.1vw;
}
.section-about .col-text .textBOX .num2 p {
	width: 48.2vw;
}
.section-about .col-text .textBOX .num4 p {
	width: 48.2vw;
}
.section-about .col-text .textBOX .num5 p {
	width: 48.2vw;
}
.section-about .col-slogan {
	padding-top: 16.4375vw;
}
}

@media (max-width: 400px) {
.section-about .col-slogan p {
	font-size: min(max(4.18vw, 16px), 36px);
	width: 80vw;
}
}

/*=== 3)product ===*/
#index_product{
	position:relative;
	height:auto;
	padding:7vw 3.125vw 5vw;
	--pd-width:31.25vw;
}
.itemPD .caption{
	position:relative;
	z-index:2;
	width:19.8vw;
	margin:0 auto;
	padding-top:0px;
}
.itemPD .caption .pd_title {
	font-family: 'Noto Serif TC', serif;
	font-weight: bold;
    font-size: min(max(1.98vw, 26px), 38px);
	color:var(--color-gold);
	line-height:1.1;
    width: 100%;
}
.itemPD .caption .pd_title span {
    font-size: min(max(1.146vw, 16px), 22px);
    position: relative;
    top: -0.6vw;
}
.itemPD .caption .pd_title:has(span) {
    width: 82%;
}
.itemPD .caption .pd_spec{
    padding-top: 1.25vw;
    padding-bottom: 0.8vw;
}
.itemPD .caption .pd_spec span{
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
    font-size: min(max(0.83vw, 13px), 16px);
	background:var(--color-gold);	
	color:#000;	
	width:auto;
	padding:0.3125vw 1.5625vw;
	line-height:1;
}
.itemPD .caption .pd_info {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
    font-size: min(max(0.73vw, 12px), 14px);
	color:#fff;	
}
.itemPD .caption .pd_info p{
	position:relative;
	padding-left:min(max(1.15vw, 18px), 22px);
}
.itemPD .caption .pd_info p:before{
	background:url('images/index/img-index-product_icon_list.svg');
}
.itemPD .caption .pd_info p:before{
	content:"";
	position:absolute;
	width:9px;
	height:9px;
	margin-left:min(max(-1vw, -14px), -18px);
    margin-top: 5px;
}
.itemPD .caption .pd_flavor{
	padding-top:10px;
}
.itemPD .caption .pd_flavor p{
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
    font-size: min(max(0.73vw, 12px), 14px);
	color:#fff;	
    display: block;
	position:relative;
}
.itemPD .caption .pd_flavor p.right-line:after{
	content:"";
    position: absolute;
    width: 60%;
    height: 1px;
    background: #fff;
    top: 10px;
    right: 1vw;
}

.itemPD .pd_image {
    position: relative;
    height: auto;
	width:var(--pd-width);
	margin:0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.itemPD .pack {
    position: relative;
    z-index: 2;
    margin-inline: auto;
    transition: transform 300ms cubic-bezier(.3, -0.3, .3, 1.3);
	height:auto;
	width:var(--pd-width);
}
.itemPD .bg.front {
    position: absolute;
	opacity:1;
    z-index:3;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, visibility 0.8s;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
	height:auto;
	width:var(--pd-width);
}
.itemPD .bg.front.spray {
    position: absolute;
    z-index:3;
	opacity:0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, visibility 0.8s;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-45%);
	height:auto;
	width:var(--pd-width);
}
.itemPD .bg.back {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
	height:auto;
	width:var(--pd-width);
}

.itemPD .explosion {
	opacity:0;
}

.works .itemPD .bg {
	opacity:0;
}
.works .itemPD .bg.front,
.pd_image:hover .bg.front {
	opacity:0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, visibility 0.8s;
    transform:translate(-50%,-50%);
}

.works .itemPD .bg.front.spray,
.pd_image:hover .bg.front.spray {
	opacity:1;
	/*transition-delay:0.15s;*/
    transform:translate(-50%,-50%);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0.15s;
}
.works .itemPD .bg.front.spray.f2,
.pd_image:hover .bg.front.spray.f2 {
	opacity:1;
    transition: opacity 0.35s ease-out, transform 0.35s ease-out, visibility 0.35s;
}

.works .itemPD .bg.back.explosion,
.pd_image:hover .bg.back.explosion {
   transform: scale(1) translate(-50%, -50%);
	opacity:1;
}

@media (max-width: 1300px) {
.itemPD .caption {
    width: 22.8vw;
}
.itemPD .caption .pd_title {
    font-size: min(max(1.98vw, 22px), 38px);
}
.itemPD .caption .pd_spec span {
    font-size: min(max(0.83vw, 12px), 16px);
}
.itemPD .caption .pd_info {
    font-size: min(max(0.73vw, 11.5px), 14px);
}
.itemPD .caption .pd_flavor p.right-line:after{
    right: 0vw;
}
}

@media (max-width: 991px) {
#index_product {
    padding: 8vw 10vw 10vw;
	--pd-width:79vw;
}
.itemPD .caption {
	width: 40.8vw;
}
}

@media (max-width: 767px) {
#index_product {
    padding: 14vw 10vw 18vw;
}
.itemPD .caption {
	width: 52.8vw;
}
.itemPD .caption .pd_flavor p.right-line:after {
    width: 58%;
}
.itemPD .caption .pd_title span {
    font-size: min(max(1.146vw, 12px), 22px);
    position: relative;
    top: -1.5vw;
}	
}

/***** animation *****/
.fade-in-effect {
	opacity: 0; 
    transform: translateY(-60px);
    visibility: hidden;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, visibility 0.8s;
}
.fade-in-effect.visible {
    opacity: 1;
    transform: translateY(0px);
    visibility: visible;
}
/*.visible{
    visibility: visible !important;
}*/
.fade-in-effect.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}
.fade-in-effect.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}
.fade-in-effect.slide-left.visible,
.fade-in-effect.slide-right.visible {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
@media (max-width: 767px) {
.fade-in-effect {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s;
}
}

/*放大縮小*/
.zoominzoomout-play { 
	-webkit-animation-duration: 0.6s;  
	animation-duration: 0.6s; 
	animation-delay:-1s;  
	-webkit-animation-name: zoominzoomout-play;  
	animation-name: zoominzoomout-play;  
	-webkit-animation-iteration-count: infinite;    
	animation-iteration-count:infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}
@-webkit-keyframes zoominzoomout-play {   
	0%  { -webkit-transform: scale(1); transform: scale(1);} 
	100%{ -webkit-transform: scale(0.7); transform: scale(0.7); }
	}
@keyframes zoominzoomout-play { 
	0%  { -webkit-transform: scale(1); transform: scale(1); } 
	100%{ -webkit-transform: scale(0.7); transform: scale(0.7);}
}
/*閃光*/				  
.brightness-play { -webkit-animation:brightness-play 2.5s ease both infinite; ;
				           animation:brightness-play 2.5s ease both infinite;}
	
	@keyframes brightness-play {
	  0% { 
		filter:brightness(100%);
	  }
	  5% { 
		filter:brightness(100%);
	  }
	 10% { 
		filter:brightness(130%);
	  }
	 11% { 
		filter:brightness(100%);
	  }
	 18% { 
		filter:brightness(130%);
	  }
	 20% { 
		filter:brightness(100%);
	  }
	  70%{ 
		filter:brightness(100%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}
	@-webkit-keyframes brightness-play {
	  0% { 
		filter:brightness(100%);
	  }
	  5% { 
		filter:brightness(110%);
	  }
	 10% { 
		filter:brightness(130%);
	  }
	 11% { 
		filter:brightness(100%);
	  }
	 18% { 
		filter:brightness(130%);
	  }
	 20% { 
		filter:brightness(100%);
	  }
	  70%{ 
		filter:brightness(100%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}