/*****************************************
*                  news                  *
*****************************************/
#main{
	padding-bottom: 0;
}
#detail{
	position: relative;
}
#wrap2{
	background: #fff;
}
#news {}

#list {
	width: 100%;
	background: #eeeee9;
}

#list .box-title {
	width: 100%;
	height: 688px;
	min-height: 435px;
	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;
}
#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;
	}
}
#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: 327px;
	/*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 {
	width: 100%;
	top: 428px;
	position: absolute;
	z-index: 1;
}
#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: 91%;
	}
}
#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 .bg2 {
	width: 100%;
	height: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center top; 
	background-size: cover;
}
#list .box-title .bg .bg1 {
	top: -688px;
	background-image: url(../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: -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;
}
@-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;
}
.navigation li:first-child {}
.navigation li:last-child {border-right: #bfbfbf 1px solid;}
.navigation li a {
	display: block;
	width: 155px;
	height: 38px;
	color: #505050;
	font-size: 14px;
/*	font-weight: bold;*/
	line-height: 38px;
	padding-left: 38px;
	background: url(../images/index/list-navigation-arrow.png) 22px center no-repeat;
	box-sizing: border-box;
}

.navigation li a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.catalog {
	padding: 95px 0 217px 0;
	position: relative;
	z-index: 2;
}

.catalog .inner {width: 940px;}

.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: 130px;
	height: 15px;
	margin: 17px 0 0 88px;
	float: left;
	background: url(../images/index/news-text.png) no-repeat;
}
.catalog .group-content li .pop:before {
	background-position: 39px 0;
}
.catalog .group-content li + li .pop:before {
	background-position: 31px -15px;
}
.catalog .group-content li + li + li .pop:before {
	background-position: 0 -30px;
}
.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: 60px;
	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);
}

.box-content .bg {
	width: 100%;
	height: 100%;
	top: 0px;
	position: absolute;
	background-image: url(../images/index/news-bg02.png), url(../images/index/news-bg01.jpg);
	background-repeat: repeat, repeat-x;
	background-size: auto, 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: -74px 0, 0; }
}
@-moz-keyframes content-bg {
	0%   { background-position: 0 0, 0; }
	100% { background-position: -74px 0, 0; }
}
@-o-keyframes content-bg {
	0%   { background-position: 0 0, 0; }
	100% { background-position: -74px 0, 0; }
}
@keyframes content-bg {
	0%   { background-position: 0 0, 0; }
	100% { background-position: -74px 0, 0; }
}
.box-content .bg:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../images/index/news-bg03.png) center top no-repeat;
	opacity: .1;
	z-index: 2;
}
@supports(mix-blend-mode: soft-light) {
	.box-content .bg:before {
		opacity: 1;
		mix-blend-mode: soft-light;
	}
}
.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;
}

#detail {
/*	padding: 60px;*/
	padding: 56px 0;
	margin: 83px auto 90px;
	border: #dedede 1px solid;
	background: #ffffff;
	box-sizing: border-box;
}

#detail .box-title {
	width: 720px;
	font-size: 22px;
	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: 224px;
	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;
	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;
	display: inline-block;
	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);
}
.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe{
	max-width: 100%;
}
#detail .box-content .rule-step .item .fb-comments {
	width: 530px;
	
	margin: 0 36px;
	padding: 45px 50px; 
	border: #dedede 1px solid;
}

#main.detail {
	background-color: #fef787;
	background-image: url(../images/index/detail-bg01.png);
	-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: -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);*/
	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 > .inner {
	 z-index: 3;
}


/* 2026 */
#wrap2{
	padding-bottom: 110px;
}
.catalog .group-content .pic img{
	width: 100%;
}
@media screen and (max-width: 1100px) {
	
	#wrap2{
		padding-bottom: 15vw;
	}
}