@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');
* {
	margin: 0; 
	padding: 0; 
}

img{ 
	border: none; 
	vertical-align: bottom;
}

.block {
	display: block;
}

.clear {
	clear: both;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans TC', sans-serif;
}

/*----------CTA 按鈕 star----------*/
.fixed-obj{
    position: fixed;
    top: -380px;
    right: 0;
    max-width: 270px;
    width: 100%;
    z-index: 999;
    transition: top .5s ease-out;
}

.fixed-obj.show_sta{
    top: 105px;
}


.fixed-obj #pc_sta{
    width: 220px;
    display: block;
    margin: 0 0 0 auto;
}

.fixed-obj #mobile_sta{
    display: none;
    margin: 0 auto;
}


@media screen and (max-width : 900px){	
	.fixed-obj #pc_sta{
        display: none;
    }

	.fixed-obj #mobile_sta{
		display: block;
	}
    
    .fixed-obj {
        top: auto;
        bottom: -360px;
		max-width: 100%;
        transition: bottom .5s ease-out;
	}

    .fixed-obj.show_sta{
        top: auto;
        bottom: 0;
    }	
	
}

@media screen and (max-width : 325px) {
	.fixed-obj img {
		width: 100%;
	}
}
/*----------CTA 按鈕 end----------*/

.content{
	position: relative;
	margin: 0 auto;
	max-width: 900px;
}

.content img{
	max-width: 900px;
	width: 100%;
}

.bg01 {
	position: relative;
	margin: 0 auto;
}

.fv_video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0 auto;
}

.fv_video video {
	
	width: 100%;
}

.bg01 {
	background: url(../images/2021New-year_1.gif) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg02 {
	background: url(../images/2021New-year_2_01.jpg) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg03 {
	background: url(../images/2021New-year_2_02.gif) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg04 {
	background: url(../images/2021New-year_3_01.jpg) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg05 {
	background: url(../images/2021New-year_3_02.gif) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.ingredient_Array01 {
	position: absolute;
	top: 40%;
	left: 1%;
	width: 30%;
	cursor: pointer;
}

.ingredient_Array02 {
	position: absolute;
	top: 22%;
	right: 1%;
	width: 30%;
	cursor: pointer;
}

.ingredient_Array03 {
	position: absolute;
	top: 52%;
	right: 1%;
	width: 30%;
	cursor: pointer;
}

.ingredient_content {
	position: relative;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
}
  
.ingredient_content:hover .overlay {
	-webkit-animation: flip-vertical-bck 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	animation: flip-vertical-bck 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	opacity: 1;
}

@-webkit-keyframes flip-vertical-bck {
	0% {
	  -webkit-transform: translateZ(0) rotateY(0);
			  transform: translateZ(0) rotateY(0);
	}
	100% {
	  -webkit-transform: translateZ(-260px) rotateY(360deg);
			  transform: translateZ(-260px) rotateY(3600deg);
	}
}
@keyframes flip-vertical-bck {
	0% {
	  -webkit-transform: translateZ(0) rotateY(0);
			  transform: translateZ(0) rotateY(0);
	}
	100% {
	  -webkit-transform: translateZ(-260px) rotateY(360deg);
			  transform: translateZ(-260px) rotateY(360deg);
	}
}

.ingredient_content:hover .major_pic {
	opacity: 0;
}

.bg06 {
	background: url(../images/2021New-year_3_03.jpg) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg16 {
	background: url(../images/2021New-year_3_04.jpg) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.accordion {
	cursor: pointer;
	border: none;
	outline: none;
	transition: 0.4s;
}
 
.panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.bg07 {
	background: url(../images/2021New-year_4_01.jpg) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg08 {
	background: url(../images/2021New-year_4_02.jpg) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg09 {
	background: url(../images/2021New-year_4_03.gif) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg10 {
	background: url(../images/2021New-year_5_01.jpg) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg11 {
	background: url(../images/2021New-year_5_02.jpg) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.tv {
	position: absolute;
	top: 22%;
	left: 11%;
	width: 78%;
}

.bg12 {
	background: url(../images/2021New-year_6_01.gif) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg13 {
	background: url(../images/2021New-year_6_02.gif) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg14 {
	background: url(../images/2021New-year_6_03.jpg) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.bg15 {
	background: url(../images/2021New-year_6_04.jpg) top center no-repeat;
	background-size: cover;
	margin: 0 auto;
}

.btn01 {
	position: absolute;
	bottom: 11%;
	left: 11%;
	width: 80%;
	filter: drop-shadow(3px 3px 5px #00000050);
}

.btn02 {
	position: absolute;
	bottom: 3%;
	left: 14%;
	width: 65%;
	filter: drop-shadow(0 0 5px #00000050);
}

.btn03 {
	position: absolute;
	bottom: 5%;
	left: 14%;
	width: 65%;
	filter: drop-shadow(0 0 5px #00000050);
}

.btn04 {
	position: absolute;
	bottom: 10%;
	left: 17%;
	width: 65%;
	filter: drop-shadow(0 0 5px #00000050);
}

.shiny-btn2 {
    display: block;
    position: relative;
    overflow: hidden;
}

.shiny_shape01 {
	border-radius: 80px;
}

.shiny_shape02 {
	border-radius: 30px;
}

.shiny-btn2:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}

.shiny-btn2::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    transition: 0.2s;
    animation: shiny-btn2 3s ease-in-out infinite;
}

@-webkit-keyframes shiny-btn2 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@media screen and (max-width: 900px) {
	.shiny_shape02 {
		border-radius: 25px;
	}
}

@media screen and (max-width: 500px) {
	.shiny_shape02 {
		border-radius: 12px;
	}
}

@media screen and (max-width: 320px) {
	.shiny_shape02 {
		border-radius: 10px;
	}
}

.slider {
	width: 100%;
	margin: 0 auto;
}

.slick-slide {
	margin: 0;
}

.slick-slide img {
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: #90703b;
}

.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
}

.slick-active {
    opacity: .5;
}

.slick-current {
    opacity: 1;
}

@media screen and (min-width: 1921px) {
	body {
		background: #fff;
	}
	section {
		max-width: 1920px;
	}
}
	
@media screen and (max-width: 900px) {	
	.content {
		margin: 0;
		width:100%;
	}
	
	.content img{
		width: 100%;
	}
}