@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
#wrap{
    font-family: 'Noto Sans TC';
}
#news {}

#list {
	    width: 100%;
        background: #eeeee9;
		/* height: 688px;
		min-height: 650px;
		position: relative; */
        /* overflow: hidden; */
}
.inner_desc a {
    text-decoration: none;
	position: relative;
	color: #4b4b4b;
}
.inner_desc a:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -3px;
    border-width: 0px 0px 1px;
    border-style: solid;
}


.red{

	color: #ff2400;
}
#list .box-title {
	width: 100%;
	height: 715px;
	min-height: 500px;
	color: #4b4b4b;
	font-size: 18px;
	font-weight: 600;
	text-indent: 0;
	line-height: 43px;
}
@media screen and (max-height: 917px) {
	#list .box-title {
		height: calc( 100vh - 138px - 90px );
	}
}


#list .box-top {
	width: 1000px;
	height: 688px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	transform: translate3d(0,0,0);
}
#list .box-top-inner {
	width: 1000px;
	height: 688px;
	min-height: 455px;
	top: 111px;
	position: absolute;
        z-index: 2;
}
#list .box-top-inner.shadow {
	height: 678px;
	top: 121px;
	opacity: .1;
        z-index: 1;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner,
	#list .box-top-inner.shadow {
		height: calc( 100vh - 138px - 90px );
		top: calc( ( ( ( 100vh - 138px - 90px ) - 47% ) / 2 ) - 6.6% );
	}
	#list .box-top-inner.shadow {
		top: calc( ( ( ( 100vh - 138px - 90px ) - 47% ) / 2 ) - 6.6% + 10px );
	}
}
@supports(mix-blend-mode: soft-light) {
	#list .box-top-inner.shadow {
		opacity: auto;
		mix-blend-mode: soft-light;
	}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* IE10+ CSS */
	#gift-desc .gift-item {
		text-align: center;
		position: absolute;
		width: 100%;
		left: 50%;
	}
 }
 @supports (-ms-accelerator:true) {
	/* IE Edge 12+ CSS */ 
	#gift-desc .gift-item {
		text-align: center;
		position: absolute;
		width: 100%;
		left: 50%;
	}
 }
@supports (-ms-ime-align:auto) {
	/* IE Edge 16+ CSS */ 
	#gift-desc .gift-item {
		text-align: center;
		position: absolute;
		width: 100%;
		left: 50%;
	}
}




#list .box-top-inner .beer {
	width: 94px;
	height: 97px;
	top: 88px;
	position: absolute;
	opacity: 0;
	z-index: 3;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner .beer {
		/*height: 14.1%;*/
		top: 7%;
	}
}
@media screen and (max-height: 750px) {
	#list .box-top-inner .beer {
		/*height: 14.1%;*/
		top: 5%;
	}
}
#list .box-top-inner .beer.left {
	/*left: 288px;*/
	left: 394px;
	-webkit-transform: rotate(7deg);
	-moz-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	transform: rotate(7deg);
	-webkit-transform-origin: left 70px;
	-moz-transform-origin: left 70px;
	-ms-transform-origin: left 70px;
	-o-transform-origin: left 70px;
	transform-origin: left 70px;
}
#list .box-top-inner .beer.left.animate {
	-webkit-animation: beer-left linear .6s forwards;
	-moz-animation: beer-left linear .6s forwards;
	-ms-animation: beer-left linear .6s forwards;
	-o-animation: beer-left linear .6s forwards;
	animation: beer-left linear .6s forwards;
}
@-webkit-keyframes beer-left {
	0%   { left: 374px; opacity: 0; -webkit-transform: rotate(10deg); }
	20%  { left: 394px; opacity: 1; }
	30%  { -webkit-transform: rotate(-15deg); }
	60%  { -webkit-transform: rotate(0deg); }
	70%  { left: 394px; opacity: 1; }
	100%  { left: 288px; opacity: 1; -webkit-transform: rotate(0deg); }
}
@-moz-keyframes beer-left {
	0%   { left: 374px; opacity: 0; -moz-transform: rotate(10deg); }
	20%  { left: 394px; opacity: 1; }
	30%  { -moz-transform: rotate(-15deg); }
	60%  { -moz-transform: rotate(0deg); }
	70%  { left: 394px; opacity: 1; }
	100%  { left: 288px; opacity: 1; -moz-transform: rotate(0deg); }
}
@-o-keyframes beer-left {
	0%   { left: 374px; opacity: 0; -o-transform: rotate(10deg); }
	20%  { left: 394px; opacity: 1; }
	30%  { -o-transform: rotate(-15deg); }
	60%  { -o-transform: rotate(0deg); }
	70%  { left: 394px; opacity: 1; }
	100%  { left: 288px; opacity: 1; -o-transform: rotate(0deg); }
}
@keyframes beer-left {
	0%   { left: 374px; opacity: 0; transform: rotate(10deg); }
	20%  { left: 394px; opacity: 1; }
	30%  { transform: rotate(-15deg); }
	60%  { transform: rotate(0deg); }
	70%  { left: 394px; opacity: 1; }
	100%  { left: 288px; opacity: 1; transform: rotate(0deg); }
}
#list .box-top-inner .beer.right {
	/*left: 614px;*/
	left: 485px;
	-webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	transform: rotate(-7deg);
	-webkit-transform-origin: right 70px;
	-moz-transform-origin: right 70px;
	-ms-transform-origin: right 70px;
	-o-transform-origin: right 70px;
	transform-origin: right 70px;
}
#list .box-top-inner .beer.right.animate {
	-webkit-animation: beer-right linear .6s forwards;
	-moz-animation: beer-right linear .6s forwards;
	-ms-animation: beer-right linear .6s forwards;
	-o-animation: beer-right linear .6s forwards;
	animation: beer-right linear .6s forwards;
}
@-webkit-keyframes beer-right {
	0%   { left: 505px; opacity: 0; -webkit-transform: rotate(-10deg); }
	20%  { left: 485px; opacity: 1; }
	30%  { -webkit-transform: rotate(15deg); }
	60%  { -webkit-transform: rotate(0deg); }
	70%  { left: 485px; opacity: 1; }
	100%  { left: 614px; opacity: 1; -webkit-transform: rotate(0deg); }
}
@-moz-keyframes beer-right {
	0%   { left: 505px; opacity: 0; -moz-transform: rotate(-10deg); }
	20%  { left: 485px; opacity: 1; }
	30%  { -moz-transform: rotate(15deg); }
	60%  { -moz-transform: rotate(0deg); }
	70%  { left: 485px; opacity: 1; }
	100%  { left: 614px; opacity: 1; -moz-transform: rotate(0deg); }
}
@-o-keyframes beer-right {
	0%   { left: 505px; opacity: 0; -o-transform: rotate(-10deg); }
	20%  { left: 485px; opacity: 1; }
	30%  { -o-transform: rotate(15deg); }
	60%  { -o-transform: rotate(0deg); }
	70%  { left: 485px; opacity: 1; }
	100%  { left: 614px; opacity: 1; -o-transform: rotate(0deg); }
}
@keyframes beer-right {
	0%   { left: 505px; opacity: 0; transform: rotate(-10deg); }
	20%  { left: 485px; opacity: 1; }
	30%  { transform: rotate(15deg); }
	60%  { transform: rotate(0deg); }
	70%  { left: 485px; opacity: 1; }
	100%  { left: 614px; opacity: 1; transform: rotate(0deg); }
}
#list .box-top-inner .beer .pic {
	width: 100%;
	top: 12px;
	position: absolute;
	z-index: 3;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner .beer .pic {
		height: 77.3%;
		top: 13.6%;
	}
}
#list .box-top-inner .beer .bubble {
	position: absolute;
	z-index: 4;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transform-origin: left bottom;
	-moz-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	-o-transform-origin: left bottom;
	transform-origin: left bottom;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner .beer .bubble {
		height: 22.7%;
	}
}
#list .box-top-inner .beer.animate .bubble {
	-webkit-animation: beer-bubble linear .6s forwards;
	-moz-animation: beer-bubble linear .6s forwards;
	-ms-animation: beer-bubble linear .6s forwards;
	-o-animation: beer-bubble linear .6s forwards;
	animation: beer-bubble linear .6s forwards;
}
@-webkit-keyframes beer-bubble {
	0%   { -webkit-transform: scale(0); }
	20%  { -webkit-transform: scale(0); }
	40%  { -webkit-transform: scale(1); }
	100% { -webkit-transform: scale(1); }
}
@-moz-keyframes beer-bubble {
	0%   { -moz-transform: scale(0); }
	20%  { -moz-transform: scale(0); }
	40%  { -moz-transform: scale(1); }
	100% { -moz-transform: scale(1); }
}
@-o-keyframes beer-bubble {
	0%   { -o-transform: scale(0); }
	20%  { -o-transform: scale(0); }
	40%  { -o-transform: scale(1); }
	100% { -o-transform: scale(1); }
}
@keyframes beer-bubble {
	0%   { transform: scale(0); }
	20%  { transform: scale(0); }
	40%  { transform: scale(1); }
	100% { transform: scale(1); }
}
#list .box-top-inner .beer.left .bubble {
	left: 42px;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner .beer.left .bubble {
		left: 44.9%;
	}
}
#list .box-top-inner .beer.right .bubble {
	left: 6px;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner .beer.right .bubble {
		left: 6.4%;
	}
}
#list .box-top-inner .beer .fly-bubble {
	width: 45%;
        height: 50%;
	position: absolute;
	z-index: 2;
}
#list .box-top-inner .beer.left .fly-bubble {
    left: 43%;
}
#list .box-top-inner .beer.right .fly-bubble {
    left: 12%;
}
#list .box-top-inner .beer .fly-bubble div {
	position: absolute;
	border: 2px solid #000;
	border-radius: 100%;
	background: #fff;
	z-index: 1;
	-webkit-animation: fly-bubble ease-out 1s forwards;
	-moz-animation: fly-bubble ease-out 1s forwards;
	-ms-animation: fly-bubble ease-out 1s forwards;
	-o-animation: fly-bubble ease-out 1s forwards;
	animation: fly-bubble ease-out 1s forwards;
}
@-webkit-keyframes fly-bubble {
	0%   { top: 50%; opacity: 0; -webkit-transform: scale(0); }
	20%  { opacity: 1; -webkit-transform: scale(1); }
	80%  { opacity: 1; -webkit-transform: scale(1); }
	100% { top: -20px; opacity: 0; -webkit-transform: scale(0); }
}
@-moz-keyframes fly-bubble {
	0%   { top: 50%; opacity: 0; -moz-transform: scale(0); }
	20%  { opacity: 1; -moz-transform: scale(1); }
	80%  { opacity: 1; -moz-transform: scale(1); }
	100% { top: -20px; opacity: 0; -moz-transform: scale(0); }
}
@-o-keyframes fly-bubble {
	0%   { top: 50%; opacity: 0; -o-transform: scale(0); }
	20%  { opacity: 1; -o-transform: scale(1); }
	80%  { opacity: 1; -o-transform: scale(1); }
	100% { top: -20px; opacity: 0; -o-transform: scale(0); }
}
@keyframes fly-bubble {
	0%   { top: 50%; opacity: 0; transform: scale(0); }
	20%  { opacity: 1; transform: scale(1); }
	80%  { opacity: 1; transform: scale(1); }
	100% { top: -20px; opacity: 0; transform: scale(0); }
}
#list .box-top-inner .beer .fly-bubble div.type1 {
	width: 7px;
	height: 7px;
}
#list .box-top-inner .beer .fly-bubble div.type2 {
	width: 4px;
	height: 4px;
}
#list .box-top-inner .beer .pic.shadow {
	top: 0px;
}
#list .box-top-inner .caption1 {
	/*width: 187px;*/
	width: 0px;
	height: 54px;
	top: 106px;
	/*left: 406px;*/
	left: 500px;
	position: absolute;
	background: url(../images/index/index-img05.png) top center no-repeat;
	background-size: auto 100%;
	z-index: 2;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner .caption1 {
		height: 8.7%;
		top: 11.2%;
	}
}
#list .box-top-inner .title {
	/*top: 200px;*/
	top: 210px;
	/*left: 284px;*/
	position: absolute;
	opacity: 0;
	z-index: 2;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner .title {
		height: 14.2%;
		/*top: 25%;*/
		top: 26%;
	}
}
#list .box-top-inner .caption2 {
	top: 345px;
	/*left: 418px;*/
	position: absolute;
	opacity: 0;
	z-index: 2;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner .caption2 {
		height: 5.4%;
		top: 43%;
	}
}
#list .box-top-inner .natural {
	top: 72px;
	/*left: 314px;*/
	position: absolute;
	opacity: 0;
	z-index: 1;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner .natural {
		height: 47%;
		top: 6.6%;
	}
}
#list .box-top-inner .desc,#list .box-top-inner .desc2 {
	width: 100%;
	top: 428px;
	font-size: 20px;
	color: #000000;
	position: absolute;
	z-index: 1;
}
#list .box-top-inner .desc2{
	
	text-align: center;
	color: #fff100;
}
#list .box-top-inner .desc2 .line2{
	opacity: 0;
}
#list .box-top-inner .desc .line {
	width: 100%;
	position: absolute;
	text-align: center;
	opacity: 0;
}
#list .box-top-inner .desc .line + div.line { top: 43px; }
#list .box-top-inner .desc .line + div.line + div.line { top: 86px; }
#list .box-top-inner .desc .line + div.line + div.line + div.line { top: 129px; }
.black {
	color: #000;
}
#list .box-top-inner .godown {
	width: 35px;
	height: 35px;
	top: 616px;
	left: 482px;
	position: absolute;
	background: url(../images/index/index-img09.png) no-repeat;
	opacity: 0;
	overflow: hidden;
	z-index: 1;
	cursor: pointer;
}
@media screen and (max-height: 917px) {
	#list .box-top-inner .godown {
		top: 85%;
	}
}
#list .box-top-inner .godown .arrow {
	/*top: 13px;*/
	top: 0px;
	left: 9px;
	position: absolute;
	-webkit-animation: arrow linear 1s infinite;
	-moz-animation: arrow linear 1s infinite;
	-ms-animation: arrow linear 1s infinite;
	-o-animation: arrow linear 1s infinite;
	animation: arrow linear 1s infinite;
}
@-webkit-keyframes arrow {
	0%   { top: 0px; opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: 25px; opacity: 0; }
}
@-moz-keyframes arrow {
	0%   { top: 0px; opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: 25px; opacity: 0; }
}
@-o-keyframes arrow {
	0%   { top: 0px; opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: 25px; opacity: 0; }
}
@keyframes arrow {
	0%   { top: 0px; opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: 25px; opacity: 0; }
}
#list .box-title .bg {
	width: 100%;
	height: 100%;
	top: 0px;
	position: absolute;
	z-index: 1;
	overflow: hidden;
}
#list .box-title .bg .bg1,
#list .box-title .bg .bg3,
#list .box-title .bg .bg2 {
	width: 100%;
	height: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center top; 
	background-size: cover;
}
#list .box-title .bg .bg1 {
	top: 0px;
	background-image: url(../images/index/index-img12.jpg);
	z-index: 1;
}
#list .box-title .bg .bg3 {
    opacity: 0;
	top: 0px;
	/* background-image: url(../images/index/index-img13.jpg); */
	z-index: 1;
}
#list .box-title .bg .bg1.animate {
	-webkit-animation: bg1-animate linear .8s forwards;
	-moz-animation: bg1-animate linear .8s forwards;
	-ms-animation: bg1-animate linear .8s forwards;
	-o-animation: bg1-animate linear .8s forwards;
	animation: bg1-animate linear .8s forwards;
}
#list #video:before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.5;
	position: absolute;
	z-index: 1;
}
.ytplayer-container{

	position: absolute;
    top: -50%;
}
.ytp-pause-overlay{

 opacity: 0;
 display: none;
 
}
@-webkit-keyframes bg1-animate {
	0%   { top: -688px; }
	70%  { top: 0px;    }
	80%  { top: -17px;  }
	88%  { top: 0px;    }
	92%  { top: -9px;   }
	96%  { top: 0px;    }
	98%  { top: -5px;   }
	100% { top: 0px;    }
}
@-moz-keyframes bg1-animate {
	0%   { top: -688px; }
	70%  { top: 0px;    }
	80%  { top: -17px;  }
	88%  { top: 0px;    }
	92%  { top: -9px;   }
	96%  { top: 0px;    }
	98%  { top: -5px;   }
	100% { top: 0px;    }
}
@-o-keyframes bg1-animate {
	0%   { top: -688px; }
	70%  { top: 0px;    }
	80%  { top: -17px;  }
	88%  { top: 0px;    }
	92%  { top: -9px;   }
	96%  { top: 0px;    }
	98%  { top: -5px;   }
	100% { top: 0px;    }
}
@keyframes bg1-animate {
	0%   { top: -688px; }
	70%  { top: 0px;    }
	80%  { top: -17px;  }
	88%  { top: 0px;    }
	92%  { top: -9px;   }
	96%  { top: 0px;    }
	98%  { top: -5px;   }
	100% { top: 0px;    }
}
#list .box-title .bg .bg2 {
	background-image: url(../images/index/index-img11.jpg);
	z-index: 2;
	/* opacity: 0; */
}
#list .box-title .bg .bg2.animate {
	-webkit-animation: bg2-animate ease-out .3s forwards;
	-moz-animation: bg2-animate ease-out .3s forwards;
	-ms-animation: bg2-animate ease-out .3s forwards;
	-o-animation: bg2-animate ease-out .3s forwards;
	animation: bg2-animate ease-out .3s forwards;
}
#list .box-title .bg .bg2.animate2 {
	-webkit-animation: bg2-animate2  ease-out .6s forwards;
	-moz-animation: bg2-animate2   ease-out .6s forwards;
	-ms-animation: bg2-animate2   ease-out .6s forwards;
	-o-animation: bg2-animate2   ease-out .6s forwards;
	animation: bg2-animate2   ease-out .6s forwards;
}

@-webkit-keyframes bg2-animate2 {
        0%   { top: 0%; }
        100% { top: -100%;}
}
@-moz-keyframes bg2-animate2 {
        0%   { top: 0%; }
        100% { top: -100%;}
}
@-o-keyframes bg2-animate2 {
        0%   { top: 0%; }
        100% { top: -100%;}
}
@keyframes bg2-animate2 {
        0%   { top: 0%; }
        100% { top: -100%;}
}

@-webkit-keyframes bg2-animate {
	0%   { opacity: 0; }
	50%  { opacity: 1; }
	70%  { opacity: 0; }
	80%  { opacity: 1; }
	92%  { opacity: 0; }
	96%  { opacity: 1; }
	98%  { opacity: 0; }
	100% { opacity: 1; }
}
@-moz-keyframes bg2-animate {
	0%   { opacity: 0; }
	50%  { opacity: 1; }
	70%  { opacity: 0; }
	80%  { opacity: 1; }
	92%  { opacity: 0; }
	96%  { opacity: 1; }
	98%  { opacity: 0; }
	100% { opacity: 1; }
}
@-o-keyframes bg2-animate {
	0%   { opacity: 0; }
	50%  { opacity: 1; }
	70%  { opacity: 0; }
	80%  { opacity: 1; }
	92%  { opacity: 0; }
	96%  { opacity: 1; }
	98%  { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes bg2-animate {
	0%   { opacity: 0; }
	50%  { opacity: 1; }
	70%  { opacity: 0; }
	80%  { opacity: 1; }
	92%  { opacity: 0; }
	96%  { opacity: 1; }
	98%  { opacity: 0; }
	100% { opacity: 1; }
}

.navigation {padding-bottom: 13px; border-bottom: #dddddd 1px solid;}
.navigation .inner {width: 940px; font-size: 0; padding-left: 1px; box-sizing: border-box;}
.navigation li {
	display: inline-block;
	margin-bottom: 10px;
	margin-left: -1px;
	border-right: #bfbfbf 1px solid;
	border-left: #bfbfbf 1px solid;
}


/* -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5)); */
.catalog {
	padding: 60px 0 217px 0;
	position: relative;
	z-index: 2;

}

.catalog .inner {width: 940px;}

.catalog .inner_title{
	margin: 0px 0px 40px 0px;
	text-align: center;
}
.catalog .inner_desc{
    font-size: 18px;
    font-weight: 700;
    color: #393939;
    text-align: center;
    line-height: 40px;
    margin-bottom: 40px;
}


.catalog .group {}
.catalog .group-title {
	height: 80px;
	color: #252525;
	font-size: 20px;
	font-weight: 600;
	line-height: 80px;
}

.catalog .group-content {font-size: 0;}
.catalog .group-content ul {width: 952px;}
.catalog .group-content li {display: inline-block; width: 296px; height: 358px; margin-right: 26px; margin-bottom: 26px; vertical-align: top;}
.catalog .group-content li:nth-child(3n) {margin-right: 0px;}
.catalog .group-content li .pop {
	width: 307px;
	height: 65px;
	margin-left: -5px;
	float: left;
	background: url(../images/index/news-text-bg.png) no-repeat;
}
.catalog .group-content li .pop:before {
	content: "";
	width: 277px;
	height: 16px;
	margin: 17px 0 0 15px;
	float: left;
	background: url(../images/index/news-text2.png) no-repeat;
}
.catalog .group-content li .pop:before {
	background-position: 5px 0;
}
.catalog .group-content li + li .pop:before {
	background-position: 12px -16px;
}
.catalog .group-content li + li + li .pop:before {
	background-position: 30px -32px;
}
.catalog .group-content li .inner { float: left; width: 296px; height: 288px; overflow: hidden;}
.catalog .group-content li .inner a {
	display: block;
	width: 294px;
	color: #393939;
	font-size: 13px;
	border: #dedede 1px solid;
}
.catalog .group-content .pic {width: 294px; height: 202px; background: #fff; overflow: hidden;}
.catalog .group-content .pic:before {
	content: "";
	width: 71px;
	height: 71px;
	margin: 65px 0 0 111px;
	position: absolute;
	background: url(../images/index/btn-play.png) no-repeat;
	z-index: 1;
}
.catalog .group-content .pic img {
	display: block;
/*	-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);*/
}
.catalog .group-content a:hover .pic img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
.catalog .group-content .info {
	height: auto;
	line-height: 21px;
	padding: 8px 15px 10px;
	background: #ffffff;
	box-sizing: border-box;
	overflow: hidden;
}
.catalog .group-content .date {color: #000; font-weight: 600;}
.catalog .group-content .text {}

.catalog .pagination {text-align: center; margin: 42px 0 0;}

.catalog .pagination a {}
.catalog .pagination a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
.catalog .pagination .unable a,
.catalog .pagination .unable a:hover {
	opacity: 0.3;
	filter: alpha(opacity=30);
	cursor: default;
}

.catalog .pagination .arrow {
	display: inline-block;
	width: 33px;
	height: 33px;
}
.catalog .pagination .arrow a {
	display: block;
	width: 33px;
	height: 33px;
	background-position: 0 0;
	background-repeat: no-repeat;
}
.catalog .pagination .arrow .prev {background-image: url(../images/index/arrow-prev.gif);}
.catalog .pagination .arrow .next {background-image: url(../images/index/arrow-next.gif);}
.catalog .pagination ul {display: inline-block; vertical-align: top; margin: 0 50px;}
.catalog .pagination li {display: inline-block; vertical-align: top; margin: 0 4px;}
.catalog .pagination li a {
	display: block;
	min-width: 33px;
	height: 33px;
	color: #505050;
	font-size: 16px;
/*	font-weight: bold;*/
	text-align: center;
	line-height: 33px;
}
.catalog .pagination li.current a {
	color: #d7000f;
	cursor: default;
}
.catalog .pagination li.current a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}



#event-desc .event-group .event-group-content{

	position: relative;
	width: 940px;
	height: 280px;
	background-image: url(../images/index/event-step.png);
	background-repeat: no-repeat;

}
#event-desc .event-group,#gift-desc .event-group{
	margin-bottom: 15px;
}
#event-desc .event-group .event-group-content .step-title, #gift-desc .event-group .event-group-content .gift-title{
	position: relative;
    top: 30px;
	text-align: center;
}
#event-desc ul{

	position: relative;
	top: 70px;
}
#event-desc ul li {
    float: left;
    margin-left: 86px;
    margin-right: 10px;
}
#event-desc ul li:last-child{
	margin-left: 65px;
}
#gift-desc{
	width: 100%;
	height: 580px;
}
#gift-desc .gift-item{

	text-align: center;
}
#gift-desc .gift-item img:first-child{
    position: absolute;
    margin-left: -170px;
    margin-top: 40px;
}
#gift-desc .gift-item img:nth-child(2){
    position: absolute;
    margin-left: -400px;
    margin-top: 195px;

}
#gift-desc .gift-item img:nth-child(3){
    position: absolute;
    margin-left: 5px;
    margin-top: 225px;
	
}

.box-content .bg {
	width: 100%;
	height: 100%;
	top: 0px;
	position: absolute;
	background-image: url(../images/index/news-bg01.png);
	background-repeat:  repeat-x;
	background-size: contain;
	background-position: 0px 0px;
	overflow: hidden;
	z-index: 1;
	-webkit-animation: content-bg linear 3s infinite;
	-moz-animation: content-bg linear 3s infinite;
	-ms-animation: content-bg linear 3s infinite;
	-o-animation: content-bg linear 3s infinite;
	animation: content-bg linear 3s infinite;
}
.box-content .bg:after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../images/index/news-bg04.png) center bottom no-repeat;
	z-index: 3;
}
.step2{
 
	display: none;

}
.filter_y{
	transition: all 0.8s ease;
	-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 0, 0.8));
	filter: drop-shadow(0px 0px 5px rgba(255, 255, 0, 0.8));
}
/* -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5)); */

.fixed_bg{
    position: absolute;
    /* width: 1920px; */
	width: 100vw;
    /* left: 50%; */
    /* margin-left: -960px; */
    height: 100%;
	left: 50%;
    top: 0px;
	transform: translateX(-50%);
	/* background-size: contain; */
	background-position: center top;
	background-repeat: repeat;
	background-image: url("../images/index/bg_rollingdoor.png");
	/* background-image: url("../images/index/bg_rollingdoor.jpg"); */
}
.fixed_bg.fix_bg{
	position: fixed;
}
.fixed_bg .bg_beer{
	position: absolute;
	top: 300px;
	
}
.toleft{

	left: -3%;
	transform-origin:top left;
}
.toright{

	right: -3%;
	transform-origin:top right;
}
.bg_item{
	position: absolute;
	text-align: center;
	width: 100%;
	height: 100%;
	top: 0px;
}
/*水平翻转*/
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}
.tobottom{

	bottom: 0px;
	mix-blend-mode: soft-light;
}
/*垂直翻转*/
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*IE*/
    filter:FlipV;
}
#article a {
    text-decoration: none;
    position: relative;
}
#article a:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -3px;
    border-width: 0px 0px 1px;
    border-style: solid;
}


#detail {
	/*	padding: 60px;*/
		padding: 56px 0;
		margin: 83px auto 90px;
		border: #dedede 1px solid;
		background: #ffffff;
		box-sizing: border-box;
	}
	#detail .fb_btn{
		text-align: center;
		margin: 20px 0px 20px 0px;
		cursor: pointer;
	}
	#detail .box-title {
		width: 720px;
		font-size: 24px;
		font-weight: 600;
		text-indent: 0;
		margin: 0 auto;
	}
	
	#detail .box-title .title {
		line-height: 30px;
	}
	
	#detail .box-title .date {
		color: #d7000f;
		font-size: 16px;
	/*	font-weight: 600;*/
		line-height: 18px;
		margin-top: 8px;
	}
	
	#detail .box-content {position: static; padding-top: 30px;}
	
	#detail .box-content .video {
		width: 718px;
		height: 413px;
		border: #dedede 1px solid;
		position: relative;
		margin: 0 auto;
		cursor: pointer;
	}
	#detail .box-content .video iframe {
		width: 100%;
		height: 100%;
	}
	
	#detail .box-content .btn-active {
		width: 628px;
		height: 57px;
		margin: 33px auto;
		border: #dedede 1px solid;
		background-color: #fff100;
		background-image: url(../images/index/links-arrow.png);
		background-repeat: no-repeat;
		background-position: 227px center;
		position: relative;
		color: #6b6b6b;
		font-size: 15px;
		font-weight: 600;
		line-height: 57px;
		text-indent: 31px;
		text-align: center;
		cursor: pointer;
		overflow: hidden;
	
		-webkit-animation: btn-active ease-out 0.8s infinite;
		-moz-animation: btn-active ease-out 0.8s infinite;
		-ms-animation: btn-active ease-out 0.8s infinite;
		-o-animation: btn-active ease-out 0.8s infinite;
		animation: btn-active ease-out 0.8s infinite;
	}
	@-webkit-keyframes btn-active {
		0%, 100% { background-position: 227px center; }
		50%      { background-position: 237px center; }
	}
	@-moz-keyframes btn-active {
		0%, 100% { background-position: 227px center; }
		50%      { background-position: 237px center; }
	}
	@-o-keyframes btn-active {
		0%, 100% { background-position: 227px center; }
		50%      { background-position: 237px center; }
	}
	@keyframes btn-active {
		0%, 100% { background-position: 227px center; }
		50%      { background-position: 237px center; }
	}
	#detail .box-content .btn-active:hover {
		opacity: 0.7;
		filter: alpha(opacity=70);
	}
	
	#detail .back {
		position: absolute;
		top: -72px;
		left: -1px;
		width: 320px;
		height: 57px;
		color: #6b6b6b;
		font-size: 15px;
		font-weight: 600;
		line-height: 57px;
		text-indent: 31px;
		border: #dedede 1px solid;
		background: url(../images/index/detail-back-arrow.png) 16px center #ffffff no-repeat;
	}
	
	#detail .back:hover {
		opacity: 0.7;
		filter: alpha(opacity=70);
	}
	
	.slide {
		position: relative;
		width: 720px;
		margin: 0 auto;
	}
	
	.slide-content {
		position: relative;
		width: 718px;
		height: 430px;
	/*	margin: 0 auto;*/
		border: #dedede 1px solid;
		overflow: hidden;
	}
	
	.slide-content .controller {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0;
		white-space: nowrap;
	}
	
	.slide-content .controller div {
		display: inline-block;
	}
	
	.slide-content a {}
	
	.slide-content img {
		display: block;
	}
	
	.slide-nav {margin: 30px 0 25px;}
	
	.slide-nav ul {
		text-align: center;
	}
	
	.slide-nav li {
		display: inline-block;
		margin: 0 11px;
	}
	
	.slide-nav li a {
		display: block;
		width: 12px;
		height: 12px;
		background: url(../images/index/banner-dots.png) 0 0 no-repeat;
	}
	
	.slide-nav li a:hover, .slide-nav li.current a {background-position: 0 -12px;}
	
	.slide-arrow {}
	.slide-arrow li {}
	.slide-arrow li a {
		position: absolute;
		top: 190px;
		width: 33px;
		height: 33px;
		background-position: 0 0;
		background-repeat: no-repeat;
	}
	.slide-arrow li a:hover {
		opacity: 0.7;
		filter: alpha(opacity=70);
	}
	.slide-arrow li.prev a {background-image: url(../images/index/arrow-prev.gif); left: -50px;}
	.slide-arrow li.next a {background-image: url(../images/index/arrow-next.gif); right: -50px;}
	
	#article {
		position: relative;
		width: 640px;
		color: #646464;
		font-size: 14px;
		line-height: 22px;
		margin: 0 auto 40px;
		word-break: break-all;
	}
	#article .subTitle {
		font-size: 18px;
		font-weight: 700;
		color: #000;
	}
	
	#article a {
		color: #262626;
		/* text-decoration: underline; */
	}
	#article img {
		margin: 20px 0 20px -40px;
		border: 1px solid #e0e0e0;
	}
	
	#detail .box-content .links {
		width: 640px;
		position: relative;
		margin: 0 auto;
	}
	
	#detail .box-content .links a {
		display: inline-block;
		width: 254px;
		height: 57px;
		color: #6b6b6b;
		font-size: 14px;
		font-weight: 600;
		line-height: 57px;
		padding: 0 20px 0 30px;
		border: #dedede 1px solid;
		background: url(../images/index/links-arrow.png) 16px center no-repeat;
		white-space: nowrap;
		overflow:hidden;
		text-overflow: ellipsis;
	}
	#detail .box-content .links a.prev {
		margin-right: 24px;
	}
	
	#detail .box-content .links a:hover {
		opacity: 0.7;
		filter: alpha(opacity=70);
	}
	
	#detail .box-content .rule {
		width: 720px;
		padding-bottom: 6px;
		position: relative;
		margin: 40px 0 0 109px;
		background: #fff100; 
	}
	#detail .box-content .rule-info {
		position: relative;
		margin: 0 40px;
		padding: 40px 0 60px 0;
		background: url(../images/index/form-bg.png) center bottom no-repeat;
	}
	#detail .box-content .rule-info .title {
		line-height: 50px;
		font-size: 22px;
	}
	
	#detail .box-content .rule-info .rule-content {
		line-height: 22px;
		font-size: 14px;
		color: #3e3e3e;
	}
	#detail .box-content .rule-info .rule-content a {
		color: #262626;
		text-decoration: underline;
	}
	#detail .box-content .rule-info .rule-image {
		width: 100%;
		height: 242px;
		margin-top: 40px;
	}
	#detail .box-content .rule-info .rule-image .item {
		width: 242px;
		height: 242px;
		border-radius: 100%;
		float: left;
		overflow: hidden;
	}
	#detail .box-content .rule-info .rule-image .item + div.item {
		margin-left: 156px;
	}
	
	#detail .box-content .rule-step {
		width: 708px;
		margin: 0 6px;
		padding-bottom: 50px;
		background: #fff;
	}
	#detail .box-content .rule-step .title {
		margin: 0 36px;
		padding-top: 40px;
		position: relative;
		line-height: 35px;
		font-size: 22px;
	}
	.font-30px {
		font-size: 30px;
	}
	#detail .box-content .rule-step .item .title {
		margin: 0 36px;
		padding: 31px 0 16px;
		line-height: 22px;
		font-size: 14px;
		color: #646464;
	}
	.font-18px {
		font-size: 18px;
	}
	#detail .box-content .rule-step .item .fb-like {
		width: 456px;
		margin: 0 36px;
		padding: 26px 90px;
		border: #dedede 1px solid;
	}
	#detail .box-content .rule-step .item .btn-fb {
		width: 234px;
		height: 57px;
		margin: 0 36px;
		border: #dedede 1px solid;
		background: url(../images/index/btn-fb.png) 37px center no-repeat #4267b2;
		line-height: 57px;
		font-size: 15px;
		text-align: center;
		text-indent: 17px;
		color: #fff;
		cursor: pointer;
	}
	#detail .box-content .rule-step .item .btn-fb:hover {
		opacity: 0.7;
		filter: alpha(opacity=70);
	}
	#detail .box-content .rule-step .item .fb-comments {
		width: 530px;
		margin: 0 36px;
		padding: 45px 50px; 
		border: #dedede 1px solid;
	}
	
	#main.detail {
		overflow: hidden;
	}
	@-webkit-keyframes detail-bg {
		0%   { background-position: 0 0; }
		100% { background-position: -80px 0; }
	}
	@-moz-keyframes detail-bg {
		0%   { background-position: 0 0; }
		100% { background-position: -80px 0; }
	}
	@-o-keyframes detail-bg {
		0%   { background-position: 0 0; }
		100% { background-position: -80px 0; }
	}
	@keyframes detail-bg {
		0%   { background-position: 0 0; }
		100% { background-position: -80px 0; }
	}
	#main.detail:before {
		content: '';
		width: 100%;
		height: 100%;
		top: 0;
		background-image: url(../images/index/detail-bg02.png);
		background-repeat:  repeat-x;
		background-size: contain;
		background-position: 0px 0px; 
		position: absolute;
		z-index: 2;
	}
	@supports(mix-blend-mode: multiply) {
		#main.detail .box-content .bg:before {
			mix-blend-mode: multiply;
		}
	}
	/* #main.detail:after {

		content: '';
		width: 100%;
		height: 100%;
		top: -58px;
		background: url(../images/index/news-bg03.png) center 237px no-repeat;
		position: fixed;
		z-index: 2;
		opacity: .1;
	} */
	@supports(mix-blend-mode: soft-light) {
		#main.detail:after {
			opacity: 1;
			mix-blend-mode: soft-light;
		}
	}
	#main.detail .bg{

		z-index: 2;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
	}
	#main > .inner {
		 z-index: 3;
		 height: auto;
	}

	#overlay{
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 6;
		display: none;
	}
	#popup{

		position: relative;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: none;
		z-index: 100;
		overflow: auto;
	}
	#popup .cover{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: .8;
	}
	
	#popup .container{
		position: relative;
		text-align: center;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	#popup .close_btn{
		
		position: absolute;
		top: 5%;
		right: 5%;
		width: 29px;
		height: 29px;
		z-index: 4;
		cursor: pointer;
	
	
	}


	.fixed_bg .bg_beer div:nth-child(0) {
		z-index:2;
	}

	.fixed_bg .bg_beer.toleft .fly-bubble {
		left: 43%;
	}
	.fixed_bg .bg_beer.toright .fly-bubble {
		left: -43%;
	}
	.fixed_bg .bg_beer .fly-bubble{

		z-index:1;
	}
	.fixed_bg .bg_beer .fly-bubble div {
		position: absolute;
		width: 84px;
		height: 84px;
		background: url(../images/index/bubble.png)  center no-repeat;
		background-size: contain;
		z-index: -1;
		-webkit-animation: bgfly-bubble ease-out 2.5s forwards;
		-moz-animation: bgfly-bubble ease-out 2.5s forwards;
		-ms-animation: bgfly-bubble ease-out 2.5s forwards;
		-o-animation: bgfly-bubble ease-out 2.5s forwards;
		animation: bgfly-bubble ease-out 2.5s forwards;
	}
	@-webkit-keyframes bgfly-bubble {
		0%   { top: 100%; opacity: 0; -webkit-transform: scale(0) translate3d(0%, 0, 0);  }
		20%  { opacity: 1; -webkit-transform: scale(1) translate3d(20%, 0, 0);}
		80%  { opacity: 1; -webkit-transform: scale(1) translate3d(-20%, 0, 0);}
		100% { top: -50%; opacity: 0; -webkit-transform: scale(0) translate3d(0%, 0, 0); }
	}
	@-moz-keyframes bgfly-bubble {
		0%   { top: 100%; opacity: 0; -moz-transform: scale(0) translate3d(0%, 0, 0); }
		20%  { opacity: 1; -moz-transform: scale(1)  translate3d(20%, 0, 0); }
		80%  { opacity: 1; -moz-transform: scale(1) translate3d(-20%, 0, 0);}
		100% { top: -50%; opacity: 0; -moz-transform: scale(0) translate3d(0%, 0, 0);}
	}
	@-o-keyframes bgfly-bubble {
		0%   { top: 100%; opacity: 0; -o-transform: scale(0) translate3d(0%, 0, 0);}
		20%  { opacity: 1; -o-transform: scale(1) translate3d(20%, 0, 0); }
		80%  { opacity: 1; -o-transform: scale(1) translate3d(-20%, 0, 0); }
		100% { top: -50%; opacity: 0; -o-transform: scale(0) translate3d(0%, 0, 0);}
	}
	@keyframes bgfly-bubble {
		0%   { top: 100%; opacity: 0; transform: scale(0) translate3d(0%, 0, 0);}
		20%  { opacity: 1; transform: scale(1) translate3d(20%, 0, 0); }
		80%  { opacity: 1; transform: scale(1) translate3d(-20%, 0, 0); }
		100% { top: -50%; opacity: 0; transform: scale(0) translate3d(0%, 0, 0); }
	}


	@keyframes shake {
		10%, 90% {
		  transform: translate3d(-1px, 0, 0);
		}
		
		20%, 80% {
		  transform: translate3d(2px, 0, 0);
		}
	  
		30%, 50%, 70% {
		  transform: translate3d(-4px, 0, 0);
		}
	  
		40%, 60% {
		  transform: translate3d(4px, 0, 0);
		}
	  }
	.fixed_bg .bg_beer .fly-bubble div.type1 {
		width: 84px;
		height: 84px;
	}
	.fixed_bg .bg_beer .fly-bubble div.type2 {
		width: 64px;
		height: 64px;
	}
	.fixed_bg .bg_beer .fly-bubble div.type3 {
		width: 34px;
		height: 34px;
	}
.cont{

	
}
.form{
 position: relative;
 width: 630px;
 height: 610px;
 margin: 0 auto;
 transition: all 0.5s ease-in;
 background-color: #ffffff;

}
.form .name{

	position: absolute;
    top: 155px;
    left: 200px;
}
.form .tel{

	position: absolute;
    top: 210px;
    left: 200px;
}
.form .email{

	position: absolute;
    top: 265px;
    left: 200px;
}
.form .address{

	position: absolute;
    top: 372px;
    left: 200px;
}

.form .my-selector-c{

    position: absolute;
    top: 309px;
    left: 200px;
    width: 330px;
}
.form .my-selector-c select{
    height: 41px;
    background-color: transparent;
    border-radius: 0;
    border: none;
    width: 138px;
    margin-top: 8px;
	margin-right: 6px;
	text-indent: 25px;
	font-size: 18px;
	font-weight: 500;
	font-family: 'Noto Sans TC';
  }
.form .my-selector-c div{
	  float: left;
	  margin-right: 10px;
  }
.form .send_btn{
	position: absolute;
    bottom: 45px;
    left: 50%;
	margin-left: -120px;
	cursor: pointer;
}
.form_style {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 35px;
	font-size: 18px;
	font-weight: 500;
	font-family: 'Noto Sans TC';
	color: #000000;
	/* font-family: Microsoft JhengHei,sans-serif; */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	outline: 0;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	z-index: 0;
	background-color: transparent;
  }
.startform{
	position: relative;
	width: 630px;
	height: 610px;
	margin: 0 auto;
	background: url(../images/index/form.png) 110px 70px no-repeat;
}
.overform {

	/* position: relative;
	width: 630px;
	height: 344px;
	margin: 0 auto;
	background-color: #ffffff; */
	display: none;
}
.overform .content{
    position: relative;
    width: 230px;
    margin: 0 auto;
    padding-top: 70px;
    padding-bottom: 30px;

}
.overform .content .title{

	font-size: 22px;
	color: #000000;
	font-weight: 500;
	font-family: 'Noto Sans TC';
	margin-bottom: 25px;
}
.overform .content span{
	font-size: 18px;
	color: #000000;
	font-weight: 500;
	font-family: 'Noto Sans TC';
	text-align: center;
	line-height: 30px;

}
.form.over{

	height: 335px;
}
.check_btn{
    position: absolute;
    width: 31px;
    height: 31px;
    bottom: 144px;
    left: 208px;
    background-color: #fff;
    cursor: pointer;
    
   }
.check_btn.check{
	background-color: #000;
}
.rule_btn{

    position: absolute;
    width: 85px;
	height: 50px;
	/* cursor: pointer; */
    left: 373px;
    top: 425px;

}
.rule_btn a{
    width: 100%;
    height: 100%;
    display: inline-block;
}