/*****************************************
*                  news                  *
*****************************************/
#wrap2{
	padding-bottom: 15vw;
}
.inner_desc a {
    text-decoration: none;
    position: relative;
}
.inner_desc a:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: calc(-3 / 375 * 100vw);
    border-width: 0 0 calc(1 / 375 * 100vw);
    border-style: solid;
}


.red{

	color: #ff2400;
}
#news {}

#list {
	width: 100%;
	background: #eeeee9;
	transition: all 0.8s ease;
}
#list .inner_title{

	position: relative;
    width: 90%;
	margin: 0 auto;
	margin-bottom: calc(15 / 375 * 100vw);
}
#list .inner_title img,#list .step-title img,#list .gift-title img,#list .gift-item img,.bg_item img,#detail .fb_btn img,#popup .close_btn img,.form img{

	width: 100%;
	display: block;
}
#list .inner_desc{

    font-size: calc(15 / 375 * 100vw);
    font-family: 'Noto Sans TC';
    font-weight: 400;
    text-align: center;
    line-height: calc(25 / 375 * 100vw);
    margin-bottom: calc(20 / 375 * 100vw);
}

#list .box-title {
	width: 100%;
	height: calc(100vh - 18.93vw - 63px);
	min-height: calc(390 / 375 * 100vw);
	color: #4b4b4b;
	font-size: calc(16 / 375 * 100vw);
	font-weight: 600;
	text-indent: 0;
	line-height: calc(24 / 375 * 100vw);
	overflow: hidden;
}
#list .box-top {
	width: calc(336 / 375 * 100vw);
	height: calc(100vh - 18.93vw - 63px);
	min-height: calc(390 / 375 * 100vw);
	margin: 0 auto;
	position: relative;
    z-index: 2;
}
#list .box-top-inner {
	width: 100%;
	height: calc(100% - calc(110 / 375 * 100vw));
	top: calc(110 / 375 * 100vw);
	position: absolute;
    z-index: 2;
}
@media screen and (max-height: calc(600 / 375 * 100vw)) {
	#list .box-top-inner {
		top: 15%;
		height: calc(100% - 15%);
	}
}
@media screen and (max-height: calc(570 / 375 * 100vw)) {
	#list .box-top-inner {
		top: 10%;
		height: calc(100% - 10%);
	}
}
@media screen and (max-height: calc(540 / 375 * 100vw)) {
	#list .box-top-inner {
		top: 5%;
		height: calc(100% - 5%);
	}
}
@media screen and (max-height: calc(510 / 375 * 100vw)) {
	#list .box-top-inner {
		top: 0;
		height: 100%;
	}
}
#list .box-top-inner.shadow {
	height: 100%;
	top: calc(120 / 375 * 100vw);
	opacity: .1;
    z-index: 1;
}
@media screen and (max-height: calc(600 / 375 * 100vw)) {
	#list .box-top-inner.shadow {
		top: calc(15% + calc(10 / 375 * 100vw));
	}
}
@media screen and (max-height: calc(570 / 375 * 100vw)) {
	#list .box-top-inner.shadow {
		top: calc(10% + calc(10 / 375 * 100vw));
	}
}
@media screen and (max-height: calc(540 / 375 * 100vw)) {
	#list .box-top-inner.shadow {
		top: calc(5% + calc(10 / 375 * 100vw));
	}
}
@media screen and (max-height: calc(510 / 375 * 100vw)) {
	#list .box-top-inner.shadow {
		top: calc(10 / 375 * 100vw);
	}
}
#list .box-top-inner .beer {
	width: calc(47 / 375 * 100vw);
	height: calc(54 / 375 * 100vw);
	top: calc(20 / 375 * 100vw);
	position: absolute;
	opacity: 0;
	z-index: 3;
}
#list .box-top-inner .beer.left {
	/*left: calc(40 / 375 * 100vw);*/
	left: calc(40 / 375 * 100vw);
	-webkit-transform: rotate(7deg);
	-moz-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	transform: rotate(7deg);
	-webkit-transform-origin: left calc(70 / 375 * 100vw);
	-moz-transform-origin: left calc(70 / 375 * 100vw);
	-ms-transform-origin: left calc(70 / 375 * 100vw);
	-o-transform-origin: left calc(70 / 375 * 100vw);
	transform-origin: left calc(70 / 375 * 100vw);
}
#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: calc(111 / 375 * 100vw); opacity: 0; -webkit-transform: rotate(10deg); }
	20%  { left: calc(121 / 375 * 100vw); opacity: 1; }
	30%  { -webkit-transform: rotate(-15deg); }
	60%  { -webkit-transform: rotate(0deg); }
	70%  { left: calc(121 / 375 * 100vw); opacity: 1; }
	100%  { left: calc(40 / 375 * 100vw); opacity: 1; -webkit-transform: rotate(0deg); }
}
@-moz-keyframes beer-left {
	0%   { left: calc(111 / 375 * 100vw); opacity: 0; -moz-transform: rotate(10deg); }
	20%  { left: calc(121 / 375 * 100vw); opacity: 1; }
	30%  { -moz-transform: rotate(-15deg); }
	60%  { -moz-transform: rotate(0deg); }
	70%  { left: calc(121 / 375 * 100vw); opacity: 1; }
	100%  { left: calc(40 / 375 * 100vw); opacity: 1; -moz-transform: rotate(0deg); }
}
@-o-keyframes beer-left {
	0%   { left: calc(111 / 375 * 100vw); opacity: 0; -o-transform: rotate(10deg); }
	20%  { left: calc(121 / 375 * 100vw); opacity: 1; }
	30%  { -o-transform: rotate(-15deg); }
	60%  { -o-transform: rotate(0deg); }
	70%  { left: calc(121 / 375 * 100vw); opacity: 1; }
	100%  { left: calc(40 / 375 * 100vw); opacity: 1; -o-transform: rotate(0deg); }
}
@keyframes beer-left {
	0%   { left: calc(111 / 375 * 100vw); opacity: 0; transform: rotate(10deg); }
	20%  { left: calc(121 / 375 * 100vw); opacity: 1; }
	30%  { transform: rotate(-15deg); }
	60%  { transform: rotate(0deg); }
	70%  { left: calc(121 / 375 * 100vw); opacity: 1; }
	100%  { left: calc(40 / 375 * 100vw); opacity: 1; transform: rotate(0deg); }
}
#list .box-top-inner .beer.right {
	/*left: calc(238 / 375 * 100vw);*/
	left: calc(238 / 375 * 100vw);
	-webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	transform: rotate(-7deg);
	-webkit-transform-origin: right calc(70 / 375 * 100vw);
	-moz-transform-origin: right calc(70 / 375 * 100vw);
	-ms-transform-origin: right calc(70 / 375 * 100vw);
	-o-transform-origin: right calc(70 / 375 * 100vw);
	transform-origin: right calc(70 / 375 * 100vw);
}
#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: calc(178 / 375 * 100vw); opacity: 0; -webkit-transform: rotate(-10deg); }
	20%  { left: calc(168 / 375 * 100vw); opacity: 1; }
	30%  { -webkit-transform: rotate(15deg); }
	60%  { -webkit-transform: rotate(0deg); }
	70%  { left: calc(168 / 375 * 100vw); opacity: 1; }
	100%  { left: calc(238 / 375 * 100vw); opacity: 1; -webkit-transform: rotate(0deg); }
}
@-moz-keyframes beer-right {
	0%   { left: calc(178 / 375 * 100vw); opacity: 0; -moz-transform: rotate(-10deg); }
	20%  { left: calc(168 / 375 * 100vw); opacity: 1; }
	30%  { -moz-transform: rotate(15deg); }
	60%  { -moz-transform: rotate(0deg); }
	70%  { left: calc(168 / 375 * 100vw); opacity: 1; }
	100%  { left: calc(238 / 375 * 100vw); opacity: 1; -moz-transform: rotate(0deg); }
}
@-o-keyframes beer-right {
	0%   { left: calc(178 / 375 * 100vw); opacity: 0; -o-transform: rotate(-10deg); }
	20%  { left: calc(168 / 375 * 100vw); opacity: 1; }
	30%  { -o-transform: rotate(15deg); }
	60%  { -o-transform: rotate(0deg); }
	70%  { left: calc(168 / 375 * 100vw); opacity: 1; }
	100%  { left: calc(238 / 375 * 100vw); opacity: 1; -o-transform: rotate(0deg); }
}
@keyframes beer-right {
	0%   { left: calc(178 / 375 * 100vw); opacity: 0; transform: rotate(-10deg); }
	20%  { left: calc(168 / 375 * 100vw); opacity: 1; }
	30%  { transform: rotate(15deg); }
	60%  { transform: rotate(0deg); }
	70%  { left: calc(168 / 375 * 100vw); opacity: 1; }
	100%  { left: calc(238 / 375 * 100vw); opacity: 1; transform: rotate(0deg); }
}
#list .box-top-inner .beer .pic {
	width: calc(56 / 375 * 100vw);
	height: calc(45 / 375 * 100vw);
	top: calc(9 / 375 * 100vw);
	position: absolute;
	z-index: 3;
}
#list .box-top-inner .beer .bubble {
	width: calc(28 / 375 * 100vw);
	position: absolute;
	z-index: 4;
	/*transform: scale(0);
	transform-origin: left bottom;*/
}
#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: calc(21 / 375 * 100vw);
}
#list .box-top-inner .beer.right .bubble {
	left: calc(-2 / 375 * 100vw);
}
#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: calc(1 / 375 * 100vw) 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: calc(-20 / 375 * 100vw); 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: calc(-20 / 375 * 100vw); 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: calc(-20 / 375 * 100vw); 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: calc(-20 / 375 * 100vw); opacity: 0; transform: scale(0); }
}
#list .box-top-inner .beer .fly-bubble div.type1 {
	width: calc(4 / 375 * 100vw);
	height: calc(4 / 375 * 100vw);
}
#list .box-top-inner .beer .fly-bubble div.type2 {
	width: calc(2 / 375 * 100vw);
	height: calc(2 / 375 * 100vw);
}
#list .box-top-inner .beer .pic.shadow {
	top: 0;
}
#list .box-top-inner .caption1 {
	/*width: calc(115 / 375 * 100vw);*/
	width: 0;
	height: calc(33 / 375 * 100vw);
	top: calc(30 / 375 * 100vw);
	/*left: calc(110 / 375 * 100vw);*/
	left: calc(168 / 375 * 100vw);
	position: absolute;
	background: url(../m/images/index/index-img05.png) top center no-repeat;
	background-size: auto 100%;
	z-index: 2;
}
#list .box-top-inner .title {
	width: calc(216 / 375 * 100vw);
	/*top: calc(88 / 375 * 100vw);*/
	top: calc(98 / 375 * 100vw);
	left: calc(60 / 375 * 100vw);
	position: absolute;
	opacity: 0;
	z-index: 2;
}
#list .box-top-inner .caption2 {
	width: calc(100 / 375 * 100vw);
	top: calc(165 / 375 * 100vw);
	left: calc(118 / 375 * 100vw);
	position: absolute;
	opacity: 0;
	z-index: 2;
}
#list .box-top-inner .natural {
    width: calc(170 / 375 * 100vw);
    top: calc(17 / 375 * 100vw);
    left: calc(82 / 375 * 100vw);
    position: absolute;
    opacity: 0;
    z-index: 1;
}
#list .box-top-inner .desc,#list .box-top-inner .desc2 {
	width: 100%;
	top: calc(230 / 375 * 100vw);
	position: absolute;
	z-index: 1;
}

#list .box-top-inner .desc2{
	
	text-align: center;
	color: #fff100;
	
}
#list .box-top-inner .desc2 .line {

	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: calc(21 / 375 * 100vw); }
#list .box-top-inner .desc .line + div.line + div.line { top: calc(42 / 375 * 100vw); }
#list .box-top-inner .desc .line + div.line + div.line + div.line { top: calc(63 / 375 * 100vw); }
#list .box-top-inner .desc .line + div.line + div.line + div.line + div.line { top: calc(84 / 375 * 100vw); }
#list .box-top-inner .desc .line + div.line + div.line + div.line + div.line + div.line { top: calc(105 / 375 * 100vw); }
.black {
	color: #000;
}
#list .box-top-inner .godown {
	width: calc(17 / 375 * 100vw);
	height: calc(17 / 375 * 100vw);
	bottom: calc(15 / 375 * 100vw);
	left: calc(159 / 375 * 100vw);
	position: absolute;
	background: url(../m/images/index/index-img09.png) no-repeat;
	background-size: cover;
	opacity: 0;
	overflow: hidden;
	z-index: 1;
	cursor: pointer;
}
#list .box-top-inner .godown .arrow {
	width: calc(8 / 375 * 100vw);
	/*top: calc(13 / 375 * 100vw);*/
	top: 0;
	left: calc(5 / 375 * 100vw);
	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: 0; opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: calc(8 / 375 * 100vw); opacity: 0; }
}
@-moz-keyframes arrow {
	0%   { top: 0; opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: calc(8 / 375 * 100vw); opacity: 0; }
}
@-o-keyframes arrow {
	0%   { top: 0; opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: calc(8 / 375 * 100vw); opacity: 0; }
}
@keyframes arrow {
	0%   { top: 0; opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: calc(8 / 375 * 100vw); opacity: 0; }
}
#list .box-title .bg {
	width: calc(375 / 375 * 100vw);
	height: 100%;
	top: 0;
	position: absolute;
	z-index: 1;
	overflow: hidden;
}
#list .box-title .bg .bg1{
	
}
#list .box-title .bg .bg1,
#list .box-title .bg .bg2 {
	width: calc(375 / 375 * 100vw);
	height: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center top; 
	background-size: cover;
	overflow: hidden;
}
#list .box-title .bg .bg1 {
	top: 0%;
	background-image: url(../m/images/index/index-img12.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; */
}
@-webkit-keyframes bg1-animate {
	0%   { top: -100%; }
	70%  { top: 0;   }
	80%  { top: -2%;   }
	88%  { top: 0;   }
	92%  { top: -1%;   }
	96%  { top: 0;   }
	98%  { top: -.5%;  }
	100% { top: 0;   }
}
@-moz-keyframes bg1-animate {
	0%   { top: -100%; }
	70%  { top: 0;   }
	80%  { top: -2%;   }
	88%  { top: 0;   }
	92%  { top: -1%;   }
	96%  { top: 0;   }
	98%  { top: -.5%;  }
	100% { top: 0;   }
}
@-o-keyframes bg1-animate {
	0%   { top: -100%; }
	70%  { top: 0;   }
	80%  { top: -2%;   }
	88%  { top: 0;   }
	92%  { top: -1%;   }
	96%  { top: 0;   }
	98%  { top: -.5%;  }
	100% { top: 0;   }
}
@keyframes bg1-animate {
	0%   { top: -100%; }
	70%  { top: 0;   }
	80%  { top: -2%;   }
	88%  { top: 0;   }
	92%  { top: -1%;   }
	96%  { top: 0;   }
	98%  { top: -.5%;  }
	100% { top: 0;   }
}
#list .box-title .bg .bg2 {
	background-image: url(../m/images/index/index-img11.jpg);
	z-index: 2;
	opacity: 1;
}

#list .box-title .bg .bg3 {
	width: calc(375 / 375 * 100vw);
	height: 100%;
	position: absolute;
	overflow: hidden;
	z-index: 1;
	opacity: 0;
}
.bg3_item{

	position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}
#list .box-title .bg .bg3 .bg3_item img{
	/* position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover; */
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
	min-height: 50%;
	width: calc(375 / 375 * 100vw);
    height: calc(556 / 375 * 100vw);


}


.bg3 > div > div.photo > img {
    opacity: 0.0;
    -webkit-transition: opacity 3s,-webkit-transform 15s;
    -moz-transition: opacity 3s,-moz-transform 15s;
    -ms-transition: opacity 3s,-ms-transform 15s;
    -o-transition: opacity 3s,-o-transform 15s;
    transition: opacity 3s,transform 15s; }

.bg3 > div.set > div.photo > img {
    opacity: 1.0;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1); }




#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;
}
@-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; }
}


#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%;}
}

#list .step-title{

	position: relative;
    width: 90%;
	margin: 0 auto;
	margin-bottom: calc(40 / 375 * 100vw);
}

#list .gift-title{
    position: relative;
    width: 25%;
    margin: 0 auto;

}
#list .gift-item img:nth-child(1){
    position: relative;
    width: 63%;
    margin-top: 10%;
	margin-left: 28%;
	margin-bottom: calc(20 / 375 * 100vw);
}
#list .gift-item img:nth-child(2){
    position: relative;
    width: 82%;
    margin-left: 5%;
	margin-bottom: calc(30 / 375 * 100vw);
}
#list .gift-item img:nth-child(3){
    position: relative;
    width: 86%;
	margin: 0 auto;
	margin-bottom: calc(30 / 375 * 100vw);
}


.navigation {padding-bottom: calc(15 / 375 * 100vw); border-bottom: #dddddd calc(1 / 375 * 100vw) solid;}
.navigation .inner {font-size: 0; padding-left: calc(31 / 375 * 100vw); box-sizing: border-box;}
.navigation li {
	position: relative;
	display: inline-block;
	margin: 0 calc(5 / 375 * 100vw) calc(5 / 375 * 100vw) 0;
}
.navigation li:first-child {}
.navigation li:last-child {}
.navigation li a {
	display: block;
	width: calc(153 / 375 * 100vw);
	height: calc(53 / 375 * 100vw);
	color: #505050;
	font-size: calc(14 / 375 * 100vw);
	font-weight: 600;
	line-height: calc(53 / 375 * 100vw);
	padding-left: calc(10 / 375 * 100vw);
	border: #bfbfbf calc(1 / 375 * 100vw) solid;
	box-sizing: border-box;
}

.catalog {
	padding: calc(40 / 375 * 100vw) 0 calc(150 / 375 * 100vw);
    position: relative;
	z-index: 2;
}

.catalog .inner {}

.catalog .group {}
.catalog .group-title {
	height: calc(72 / 375 * 100vw);
	color: #252525;
	font-size: calc(18 / 375 * 100vw);
	font-weight: 600;
	line-height: calc(72 / 375 * 100vw);
/*	border-bottom: #dedede calc(1 / 375 * 100vw) solid;*/
	margin: 0 0 0 calc(19 / 375 * 100vw);
}
.catalog .group-content {font-size: 0; width: calc(336 / 375 * 100vw); margin: 0 auto;}
.catalog .group-content .swiper-wrapper {width: 100%;}
.catalog .group-content .swiper-slide {display: inline-block; width: 100%; height: calc(335 / 375 * 100vw); margin-bottom: 0; vertical-align: top;}
/* .catalog .group-content li:nth-child(3n) {margin-right: 0;} */
.catalog .group-content .pop {
	width: 100%;
	height: calc(67 / 375 * 100vw);
	/* float: left; */
	background: url(../m/images/index/news-text-bg.png) no-repeat;
	background-size: 100% auto;
}
.catalog .group-content .pop:before {
    content: "";
    width: calc(277 / 375 * 100vw);
    height: calc(16 / 375 * 100vw);
    margin: calc(18 / 375 * 100vw) 0 0 calc(32 / 375 * 100vw);
    float: left;
    background: url(../m/images/index/news-text.png) no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
}
.catalog .group-content .pop.item1:before {
	background-position: 0 0;
}
.catalog .group-content .pop.item2:before {
	background-position: 0 calc(-16 / 375 * 100vw);
}
.catalog .group-content .pop.item3:before {
	background-position: calc(46 / 375 * 100vw) calc(-33 / 375 * 100vw);
}
.catalog .group-content .swiper-slide .inner { float: left; width: 100%; height: calc(298 / 375 * 100vw); margin-top: calc(8 / 375 * 100vw); overflow: hidden;}
.catalog .group-content .swiper-slide .inner a {
	display: block;
	width: calc(334 / 375 * 100vw);
	color: #393939;
	font-size: calc(13 / 375 * 100vw);
	border: #dedede calc(1 / 375 * 100vw) solid;
}
.catalog .group-content .pic {width: calc(336 / 375 * 100vw); height: calc(230 / 375 * 100vw); background: #fff; overflow: hidden;}
.catalog .group-content .pic:before {
	content: "";
	width: calc(75 / 375 * 100vw);
	height: calc(75 / 375 * 100vw);
	margin: calc(81 / 375 * 100vw) 0 0 calc(130 / 375 * 100vw);
	position: absolute;
	background: url(../m/images/index/btn-play.png) no-repeat;
	background-size: 100% auto;
	z-index: 1;
}
.catalog .group-content .pic img {
	width: 100%;
	display: block;

}
.catalog .group-content .pic:after{

	content: "";
	width: 100%;
	height: 77%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0.3;
}
.catalog .group-content a:hover .pic img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
.catalog .group-content .info {
	height: calc(60 / 375 * 100vw);
	line-height: calc(21 / 375 * 100vw);
	padding: calc(9 / 375 * 100vw) calc(19 / 375 * 100vw) calc(9 / 375 * 100vw);
	background: #ffffff;
	box-sizing: border-box;
	overflow: hidden;
}
.catalog .group-content .date {color: #000; font-weight: 600;}
.catalog .group-content .text {
	width: calc(299 / 375 * 100vw);
	height: calc(42 / 375 * 100vw);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
    text-align: justify;
    text-justify: inter-ideograph;
}

.catalog .pagination {text-align: center; margin: calc(24 / 375 * 100vw) 0 calc(40 / 375 * 100vw);}

.catalog .pagination a {}

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

.catalog .pagination .arrow {
	display: inline-block;
	width: calc(24 / 375 * 100vw);
	height: calc(24 / 375 * 100vw);
}
.catalog .pagination .arrow a {
	display: block;
	width: calc(24 / 375 * 100vw);
	height: calc(24 / 375 * 100vw);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: calc(24 / 375 * 100vw) calc(24 / 375 * 100vw);
}
.catalog .pagination .arrow .prev {background-image: url(../m/images/index/arrow-prev.gif);}
.catalog .pagination .arrow .next {background-image: url(../m/images/index/arrow-next.gif);}
.catalog .pagination ul {display: inline-block; vertical-align: top; margin: 0 calc(13 / 375 * 100vw);}
.catalog .pagination li {display: inline-block; vertical-align: top; margin: 0 calc(6 / 375 * 100vw);}
.catalog .pagination li a {
	display: block;
	min-width: calc(24 / 375 * 100vw);
	height: calc(24 / 375 * 100vw);
	color: #505050;
	font-size: calc(14 / 375 * 100vw);
	font-weight: 600;
	text-align: center;
	line-height: calc(24 / 375 * 100vw);
}
.catalog .pagination li.current a {
	color: #d7000f;
	cursor: default;
}

.box-content .bg {
	width: 100%;
	height: 100%;
	top: 0;
	position: absolute;
	background-color: #faed4f;
	background-image: url(../m/images/index/news-bg01.jpg);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: 0, 0;
	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; */
}
@-webkit-keyframes content-bg {
	0%   { background-position: 0 0, 0; }
	100% { background-position: calc(-47 / 375 * 100vw) 0, 0; }
}
@-moz-keyframes content-bg {
	0%   { background-position: 0 0, 0; }
	100% { background-position: calc(-47 / 375 * 100vw) 0, 0; }
}
@-o-keyframes content-bg {
	0%   { background-position: 0 0, 0; }
	100% { background-position: calc(-47 / 375 * 100vw) 0, 0; }
}
@keyframes content-bg {
	0%   { background-position: 0 0, 0; }
	100% { background-position: calc(-47 / 375 * 100vw) 0, 0; }
}
.box-content .bg:before {
	content: "";
	width: calc(193 / 375 * 100vw);
	height: calc(129 / 375 * 100vw);
	bottom: 0;
	left: 50%;
	margin-left: calc(-96 / 375 * 100vw);
	position: absolute;
	background: url(../m/images/index/news-bg03.png) center top no-repeat;
	background-size: 100% auto;
	z-index: 2;
}

/*-----*/

#detail {
	position: relative;
	width: calc(336 / 375 * 100vw);
	padding: 0 calc(11 / 375 * 100vw);
	margin: calc(89 / 375 * 100vw) auto 0;
	border: #dedede calc(1 / 375 * 100vw) solid;
	background: #ffffff;
	box-sizing: border-box;
}

#detail .box-title {
/*	width: calc(720 / 375 * 100vw);*/
	width: 82%;
	font-size: calc(18 / 375 * 100vw);
	font-weight: 600;
	text-indent: 0;
	margin: 0;
	margin-top: calc(17 / 375 * 100vw);
/*	margin: 0 auto;*/
}
#detail .fb_btn{
	position: relative;
    width: 95%;
    margin: 0 auto;
    margin-bottom: calc(20 / 375 * 100vw);
}
#detail .box-title .title {
	line-height: calc(26 / 375 * 100vw);
}

#detail .box-title .date {
	color: #d7000f;
	font-size: calc(13 / 375 * 100vw);
/*	font-weight: bold;*/
	line-height: calc(18 / 375 * 100vw);
	margin: calc(6 / 375 * 100vw) 0 calc(16 / 375 * 100vw);
}

#detail .box-content {position: static;padding-top: 0;}

#detail .box-content .video {
	width: 100%;
	height: calc(179 / 375 * 100vw);
	border: #dedede calc(1 / 375 * 100vw) solid;
	position: relative;
	margin: 0 auto;
	cursor: pointer;
	margin-bottom: calc(15 / 375 * 100vw);
}
#detail .box-content .video iframe {
	width: 100%;
	height: 100%;
}

#detail .box-content .btn-active {
	width: calc(295 / 375 * 100vw);
	height: calc(48 / 375 * 100vw);
	margin: calc(20 / 375 * 100vw) auto;
	border: #dedede calc(1 / 375 * 100vw) solid;
	background-color: #fff100;
	background-image: url(../m/images/index/links-arrow.png);
	background-repeat: no-repeat;
	background-position: calc(66 / 375 * 100vw) center;
	background-size: calc(5 / 375 * 100vw) calc(7 / 375 * 100vw);
	position: relative;
	color: #6b6b6b;
    font-size: calc(13 / 375 * 100vw);
    font-weight: 600;
    line-height: calc(49 / 375 * 100vw);
    text-indent: calc(7 / 375 * 100vw);
    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: calc(66 / 375 * 100vw) center; }
	50%      { background-position: calc(76 / 375 * 100vw) center; }
}
@-moz-keyframes btn-active {
	0%, 100% { background-position: calc(66 / 375 * 100vw) center; }
	50%      { background-position: calc(76 / 375 * 100vw) center; }
}
@-o-keyframes btn-active {
	0%, 100% { background-position: calc(66 / 375 * 100vw) center; }
	50%      { background-position: calc(76 / 375 * 100vw) center; }
}
@keyframes btn-active {
	0%, 100% { background-position: calc(66 / 375 * 100vw) center; }
	50%      { background-position: calc(76 / 375 * 100vw) center; }
}

#detail .back {
	position: absolute;
	top: calc(-71 / 375 * 100vw);
	left: calc(-1 / 375 * 100vw);
	width: calc(280 / 375 * 100vw);
	height: calc(48 / 375 * 100vw);
	color: #6b6b6b;
	font-size: calc(13 / 375 * 100vw);
	font-weight: 600;
	line-height: calc(48 / 375 * 100vw);
	text-indent: calc(32 / 375 * 100vw);
	border: #dedede calc(1 / 375 * 100vw) solid;
	background: url(../m/images/index/detail-back-arrow.png) calc(20 / 375 * 100vw) center #ffffff no-repeat;
	background-size: calc(5 / 375 * 100vw) calc(8 / 375 * 100vw);
}

.slide {
	width: calc(310 / 375 * 100vw);
	height: calc(186 / 375 * 100vw);
	margin-bottom: calc(78 / 375 * 100vw);
	border: #dedede calc(1 / 375 * 100vw) solid;
}

.slide-content {
	width: calc(310 / 375 * 100vw);
	height: calc(186 / 375 * 100vw);
/*	border: #dedede calc(1 / 375 * 100vw) solid;*/
}

.slide-content div {
	float: left;
}

.slide-content a {}

.slide-content img {
	display: block;
	width: calc(310 / 375 * 100vw);
}

.slide-nav {text-align: center; margin: calc(27 / 375 * 100vw) 0;}

.slide-nav .arrow {
	display: inline-block;
	width: calc(24 / 375 * 100vw);
	height: calc(24 / 375 * 100vw);
	vertical-align: middle;
}
.slide-nav .arrow a {
	display: block;
	width: calc(24 / 375 * 100vw);
	height: calc(24 / 375 * 100vw);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
}
.slide-nav .arrow .prev {background-image: url(../m/images/index/arrow-prev.gif);}
.slide-nav .arrow .next {background-image: url(../m/images/index/arrow-next.gif);}

.slide-nav ul {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	margin: 0 calc(12 / 375 * 100vw);
}

.slide-nav li {
	display: inline-block;
	margin: 0 calc(8 / 375 * 100vw);
	width: calc(9 / 375 * 100vw);
	height: calc(9 / 375 * 100vw);
	background: url(../m/images/index/banner-dots.png) 0 0 no-repeat;
	background-size: calc(9 / 375 * 100vw) calc(18 / 375 * 100vw);
}

/*
.slide-nav li a {
	display: block;
	width: calc(9 / 375 * 100vw);
	height: calc(9 / 375 * 100vw);
	background: url(../m/images/index/banner-dots.png) 0 0 no-repeat;
	background-size: calc(9 / 375 * 100vw) calc(18 / 375 * 100vw);
}


.slide-nav li.current a {background-position: 0 calc(-9 / 375 * 100vw);}
*/

.slide-nav li.current {background-position: 0 calc(-9 / 375 * 100vw);}

#article {
	position: relative;
	width: calc(296 / 375 * 100vw);
	color: #646464;
	font-size: calc(12 / 375 * 100vw);
	text-align: justify;
	line-height: calc(18 / 375 * 100vw);
	margin: 0 auto calc(20 / 375 * 100vw);
	word-break: break-all;
}
#article .subTitle {
	font-weight: 400;
	font-size: calc(16 / 375 * 100vw);
	color: #000;
}

#article a {
	color: #262626;
	/* text-decoration: underline; */
}
#article img {
	width: calc(312 / 375 * 100vw);
	margin: calc(5 / 375 * 100vw) 0 calc(5 / 375 * 100vw) calc(-9 / 375 * 100vw);
	border: calc(1 / 375 * 100vw) solid #e0e0e0;
}

#detail .box-content .links {
	width: calc(296 / 375 * 100vw);
	height: auto;
/* 	height: calc(48 / 375 * 100vw); */
	margin: 0 auto calc(20 / 375 * 100vw);
}

#detail .box-content .links a {
	position: relative;
        display: block;
        width: 100%;
        height: calc(48 / 375 * 100vw);
        color: #6b6b6b;
        font-size: calc(13 / 375 * 100vw);
        font-weight: 600;
        line-height: calc(48 / 375 * 100vw);
        padding: 0 calc(33 / 375 * 100vw);
        border: #dedede calc(1 / 375 * 100vw) solid;
        background: url(../m/images/index/links-arrow.png) calc(20 / 375 * 100vw) center no-repeat;
        background-size: calc(5 / 375 * 100vw) calc(8 / 375 * 100vw);
        margin: 5vw 0;
}
#detail .box-content .links a.prev {
	margin-right: calc(10 / 375 * 100vw);
}

#detail .box-content .links a:hover {}


#detail .box-content .rule {
	width: calc(321 / 375 * 100vw);
	position: relative;
	margin: calc(21 / 375 * 100vw) 0 calc(7 / 375 * 100vw) calc(-4 / 375 * 100vw);
	padding-bottom: calc(6 / 375 * 100vw);
	background: #fff100; 
}
#detail .box-content .rule-info {
	width: calc(295 / 375 * 100vw);
	position: relative;
	margin: 0 calc(13 / 375 * 100vw);
	padding: calc(25 / 375 * 100vw) 0 calc(85 / 375 * 100vw) 0;
	background: url(../m/images/index/form-bg.png) center bottom no-repeat;
	background-size: calc(113 / 375 * 100vw) calc(84 / 375 * 100vw);
}
#detail .box-content .rule-info .title {
	line-height: calc(25 / 375 * 100vw);
	font-size: calc(18 / 375 * 100vw);
}

#detail .box-content .rule-info .rule-content {
	margin-top: calc(10 / 375 * 100vw);
	line-height: calc(17 / 375 * 100vw);
	font-size: calc(12 / 375 * 100vw);
	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: calc(133 / 375 * 100vw);
	margin-top: calc(25 / 375 * 100vw);
}
#detail .box-content .rule-info .rule-image .item {
	width: calc(133 / 375 * 100vw);
	height: calc(133 / 375 * 100vw);
	border-radius: 100%;
	float: left;
	overflow: hidden;
}
#detail .box-content .rule-info .rule-image .item + div.item {
	margin-left: calc(28 / 375 * 100vw);
}
#detail .box-content .rule-info .rule-image .item img {
	width: 100%;
	height: 100%;
}

#detail .box-content .rule-step {
	width: calc(309 / 375 * 100vw);
	margin: 0 calc(6 / 375 * 100vw);
	padding-bottom: calc(10 / 375 * 100vw);
	background: #fff;
}
#detail .box-content .rule-step .title {
	margin: 0 calc(9 / 375 * 100vw);
	padding-top: calc(25 / 375 * 100vw);
	position: relative;
	line-height: calc(25 / 375 * 100vw);
	font-size: calc(18 / 375 * 100vw);
}
.font-25px {
	font-size: calc(25 / 375 * 100vw);
}
#detail .box-content .rule-step .item .title {
	margin: 0 calc(9 / 375 * 100vw);
	padding-top: calc(15 / 375 * 100vw);
	line-height: calc(15 / 375 * 100vw);
	font-size: calc(12 / 375 * 100vw);
	color: #646464;
}
.font-calc-15px {
	font-size: calc(15 / 375 * 100vw);
}
#detail .box-content .rule-step .item .fb-like-wrap {
	width: calc(80 / 375 * 100vw);
    height: calc(20 / 375 * 100vw);
	margin: calc(12 / 375 * 100vw) calc(8 / 375 * 100vw) 0;
	padding: calc(23 / 375 * 100vw) calc(104 / 375 * 100vw);
	border: #dedede calc(1 / 375 * 100vw) solid;
	border-radius: calc(5 / 375 * 100vw);
}
#detail .box-content .rule-step .item .btn-fb {
	width: calc(165 / 375 * 100vw);
	height: calc(48 / 375 * 100vw);
	margin: calc(15 / 375 * 100vw) calc(73 / 375 * 100vw) 0;
	border: #dedede calc(1 / 375 * 100vw) solid;
	background: url(../m/images/index/btn-fb.png) calc(22 / 375 * 100vw) center no-repeat #4267b2;
	background-size: calc(17 / 375 * 100vw) calc(17 / 375 * 100vw);
	line-height: calc(48 / 375 * 100vw);
	font-size: calc(12 / 375 * 100vw);
	text-indent: calc(15 / 375 * 100vw);
	text-align: center;
	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-wrap {
	width: calc(207 / 375 * 100vw);
	margin: calc(17 / 375 * 100vw) calc(10 / 375 * 100vw) 0;
	padding: calc(25 / 375 * 100vw) calc(40 / 375 * 100vw); 
	border: #dedede calc(1 / 375 * 100vw) solid;
	border-radius: calc(5 / 375 * 100vw);
}

#main.detail {
	background-color: #fef787;
	background-image: url(../m/images/index/detail-bg02.png);
	/* background-size: calc(2 / 375 * 100vw) calc(2730 / 375 * 100vw); */
	background-repeat: repeat-x;
	padding-bottom: calc(20 / 375 * 100vw);
}
#main.detail:before {
	/* content: '';
	width: 100%;
	height: 100%;
	top: 0;
	background-image: url(../m/images/index/detail-bg01.png);
	background-size: calc(40 / 375 * 100vw) calc(45 / 375 * 100vw);
	position: absolute;
	z-index: 2;
	-webkit-animation: detail-bg linear 3s infinite;
	-moz-animation: detail-bg linear 3s infinite;
	-ms-animation: detail-bg linear 3s infinite;
	-o-animation: detail-bg linear 3s infinite;
	animation: detail-bg linear 3s infinite;
	overflow: hidden; */
}
@-webkit-keyframes detail-bg {
	0%   { background-position: 0 0; }
	100% { background-position: calc(-80 / 375 * 100vw) 0; }
}
@-moz-keyframes detail-bg {
	0%   { background-position: 0 0; }
	100% { background-position: calc(-80 / 375 * 100vw) 0; }
}
@-o-keyframes detail-bg {
	0%   { background-position: 0 0; }
	100% { background-position: calc(-80 / 375 * 100vw) 0; }
}
@keyframes detail-bg {
	0%   { background-position: 0 0; }
	100% { background-position: calc(-80 / 375 * 100vw) 0; }
}
#main{

	width: calc(375 / 375 * 100vw);
	height: 100%;
}
#main > .inner {
	 z-index: 3;
}
#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: calc(22 / 375 * 100vw);
	height: calc(22 / 375 * 100vw);
	z-index: 4;
	cursor: pointer;


}

.fixed_bg .bg_beer .fly-bubble {
	/* width: 45%;
	height: 50%;
	position: absolute;
	z-index: 2; */
}
.fixed_bg .bg_beer.toleft .fly-bubble {
	left: 0%;
}
.fixed_bg .bg_beer.toright .fly-bubble {
	left: -23%;
}
.fixed_bg .bg_beer .fly-bubble div {
	position: absolute;
	width: calc(84 / 375 * 100vw);
	height: calc(84 / 375 * 100vw);
	background: url(../m/images/index/bubble.png)  center no-repeat;
	background-size: contain;
	z-index: 1;
	-webkit-animation: bgfly-bubble ease-out 10s forwards;
	-moz-animation: bgfly-bubble ease-out 10s forwards;
	-ms-animation: bgfly-bubble ease-out 10s forwards;
	-o-animation: bgfly-bubble ease-out 10s forwards;
	animation: bgfly-bubble ease-out 10s forwards;
}
@-webkit-keyframes bgfly-bubble {
	0%   { bottom: 0; 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% { bottom: 100%; opacity: 0; -webkit-transform: scale(0) translate3d(0%, 0, 0); }
}
@-moz-keyframes bgfly-bubble {
	0%   { bottom: 0; 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% { bottom: 100%; opacity: 0; -moz-transform: scale(0) translate3d(0%, 0, 0);}
}
@-o-keyframes bgfly-bubble {
	0%   { bottom: 0; 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% { bottom: 100%; opacity: 0; -o-transform: scale(0) translate3d(0%, 0, 0);}
}
@keyframes bgfly-bubble {
	0%   { bottom: 0; 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% { bottom: 100%; opacity: 0; transform: scale(0) translate3d(0%, 0, 0); }
}


@keyframes shake {
	10%, 90% {
	  transform: translate3d(calc(-1 / 375 * 100vw), 0, 0);
	}
	
	20%, 80% {
	  transform: translate3d(calc(2 / 375 * 100vw), 0, 0);
	}
  
	30%, 50%, 70% {
	  transform: translate3d(calc(-4 / 375 * 100vw), 0, 0);
	}
  
	40%, 60% {
	  transform: translate3d(calc(4 / 375 * 100vw), 0, 0);
	}
  }
.fixed_bg .bg_beer .fly-bubble div.type1 {
	width: calc(42 / 375 * 100vw);
	height: calc(42 / 375 * 100vw);
}
.fixed_bg .bg_beer .fly-bubble div.type2 {
	width: calc(32 / 375 * 100vw);
	height: calc(32 / 375 * 100vw);
}
.fixed_bg .bg_beer .fly-bubble div.type3 {
	width: calc(17 / 375 * 100vw);
	height: calc(17 / 375 * 100vw);
}

.fixed_bg .bg_beer .fly-bubble div.type4 {
	width: calc(8 / 375 * 100vw);
	height: calc(8 / 375 * 100vw);
}



.step2{
 
	display: none;

}
.filter_y{
	
	-webkit-filter: drop-shadow(0 0 calc(5 / 375 * 100vw) rgba(255, 255, 0, 0.6));
	filter: drop-shadow(0 0 calc(5 / 375 * 100vw) rgba(255, 255, 0, 0.6));
}
/* -webkit-filter: drop-shadow(calc(12 / 375 * 100vw) calc(12 / 375 * 100vw) calc(7 / 375 * 100vw) rgba(0, 0, 0, 0.5));
filter: drop-shadow(calc(12 / 375 * 100vw) calc(12 / 375 * 100vw) calc(7 / 375 * 100vw) rgba(0, 0, 0, 0.5)); */

.fixed_bg{
	position: absolute;
    width: 100%;
	height: 100%;
	top: 0;
}


.fixed_bg .bg_beer{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.fix_bg .bg_beer{

	position: fixed;
}
.bg_item{
	position: absolute;
    text-align: center;
    width: 76%;
    height: 100%;
    left: 50%;
    margin-left: -38%;
    top: 0;
}
.tobottom{

	bottom: 0;
	/* 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: calc(-3 / 375 * 100vw);
    border-width: 0 0 calc(1 / 375 * 100vw);
    border-style: solid;
}

.form{
    position: relative;
    width: 90%;
    height: auto;
    margin: 0 auto;
	transition: all 0.5s ease-in;
	background-color: #ffffff;
 
   
   }
   .form .name{
   
    position: absolute;
    top: calc(103 / 375 * 100vw);
    left: calc(87 / 375 * 100vw);
	width: calc(182 / 375 * 100vw);
   }
   .form .tel{
   
    position: absolute;
    top: calc(146 / 375 * 100vw);
    left: calc(87 / 375 * 100vw);
    width: calc(182 / 375 * 100vw);
   }
   .form .email{
    position: absolute;
    top: calc(189 / 375 * 100vw);
    left: calc(87 / 375 * 100vw);
    width: calc(182 / 375 * 100vw);
   }
   .form .address{
   
    position: absolute;
    top: calc(274 / 375 * 100vw);
    left: calc(87 / 375 * 100vw);
    width: calc(182 / 375 * 100vw);
   }
   
   .form .my-selector-c{
    position: absolute;
    top: calc(237 / 375 * 100vw);
    left: calc(77 / 375 * 100vw);
    width: calc(241 / 375 * 100vw);
   }
   .form .my-selector-c select{
    height: calc(27 / 375 * 100vw);
    background-color: transparent;
    border-radius: 0;
    border: none;
    width: calc(101 / 375 * 100vw);
    margin-top: 0;
    margin-right: 0;
    text-indent: calc(3 / 375 * 100vw);
    font-size: calc(14 / 375 * 100vw);
    font-weight: 500;
    font-family: 'Noto Sans TC';
	 }
   .form .my-selector-c div{
		 float: left;
		 margin-right: calc(10 / 375 * 100vw);
	 }
   .form .send_btn{
    position: absolute;
    bottom: calc(-15 / 375 * 100vw);
    left: 50%;
    margin-left: calc(-94 / 375 * 100vw);
    cursor: pointer;
	width: 74%;
	margin-bottom: calc(35 / 375 * 100vw);
   }
   .form_style {
	   padding-left: calc(10 / 375 * 100vw);
	   padding-right: calc(10 / 375 * 100vw);
	   line-height: calc(1 / 375 * 100vw);
	   font-size: calc(18 / 375 * 100vw);
	   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: calc(280 / 375 * 100vw);
    height: calc(450 / 375 * 100vw);
    margin: 0 auto;
    background-size: contain;
    background-image: url(../m/images/index/form.png);
    background-repeat: no-repeat;
	background-position: 0 calc(50 / 375 * 100vw);
	background-color: #ffffff;
   }
   .setform{
    position: relative;
    width: calc(335 / 375 * 100vw);
    height: calc(250 / 375 * 100vw);
	margin: 0 auto;
	background-color: #ffffff;
   }
   .overform {

	 display: none;
	 background-color: #ffffff;
   }
   .overform .content ,.setform .content{ 
    position: relative;
    width: calc(290 / 375 * 100vw);
    margin: 0 auto;
    padding-top: calc(50 / 375 * 100vw);
    padding-bottom: calc(15 / 375 * 100vw);
   
   }
   .overform .content .title,.setform .content .title{
   
	   font-size: calc(22 / 375 * 100vw);
	   color: #000000;
	   font-weight: 500;
	   font-family: 'Noto Sans TC';
	   margin-bottom: calc(25 / 375 * 100vw);
	   text-align: center;
   }
   .overform .content span{
	   font-size: calc(18 / 375 * 100vw);
	   color: #000000;
	   font-weight: 500;
	   font-family: 'Noto Sans TC';
	   text-align: center;
	   line-height: calc(30 / 375 * 100vw);
   
   }
   .overform .content .title2{
	font-size: calc(18 / 375 * 100vw);
	color: #000000;
	font-weight: 500;
	font-family: 'Noto Sans TC';
	text-align: center;
	line-height: calc(30 / 375 * 100vw);

}
   .overform .more_btn{
	position: relative;
    width: 65%;
    margin-left: calc(65 / 375 * 100vw);
   }
   .setform .go_btn{
	position: relative;
    width: 65%;
    margin: 0 auto;
   }
   .form.over{
   
	height: calc(275 / 375 * 100vw);
   }
   .check_btn{
    position: absolute;
    width: calc(14 / 375 * 100vw);
    height: calc(14 / 375 * 100vw);
    bottom: calc(101 / 375 * 100vw);
	left: calc(15 / 375 * 100vw);
	background-color: #fff;
	cursor: pointer;
	z-index: 4;
    
   }
   /* #detail .check_btn{

	bottom: calc(68 / 375 * 100vw);

   } */

   .check_btn.check{
	background-color: #000;
   }

   .swiper-button-prev{

	left: calc(3 / 375 * 100vw);
   }
   .swiper-button-next{

	right: calc(2 / 375 * 100vw);
   }
   .swiper-button-prev, .swiper-button-next{

	position: absolute;
    top: 50%;
    width: calc(20 / 375 * 100vw);
    height: calc(41 / 375 * 100vw);
    margin-top: 0;
/*     margin-top: calc(-22 / 375 * 100vw); */
    z-index: 10;
    cursor: pointer;
    background-size: contain;
    background-position: center;
	background-repeat: no-repeat;
	transform: translateY(-50%);
	
   }
   .swiper-button-prev, .swiper-container-rtl .swiper-button-next{

	background-image: url(../m/images/index/arrow_slide.png);
    -webkit-transform:scaleX(-1)  translateY(-50%);
    transform:scaleX(-1)  translateY(-50%);
    /*IE*/
    filter:FlipH;
   }
   .swiper-button-next, .swiper-container-rtl .swiper-button-prev{

	background-image: url(../m/images/index/arrow_slide.png);
   }
   .swiper-button-prev::after, .swiper-button-next::after{
   	content: none;
   }
   .rule_btn{

    position: absolute;
    width: calc(80 / 375 * 100vw);
    height: calc(30 / 375 * 100vw);
    top: calc(330 / 375 * 100vw);
    left: calc(160 / 375 * 100vw);

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

}
#footer{
    z-index: 3;
}