/*****************************************
*                  news                  *
*****************************************/

#news {}
#detail .box-content{
	padding-top: 0;
}
#list {
	width: 100%;
	background: #eeeee9;
}

#list .box-title {
	width: 100%;
	height: calc(100vh - 18.93vw - calc(63 / 375 * 100vw));
	min-height: calc(390 / 375 * 100vw);
	color: #4b4b4b;
	font-size: calc(14 / 375 * 100vw);
	font-weight: 600;
	text-indent: 0;
	line-height: calc(21 / 375 * 100vw);
	overflow: hidden;
}
#list .box-top {
	width: calc(336 / 375 * 100vw);
	height: 100%;
	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: 29.33vw;
	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: calc(0 / 375 * 100vw);
}
#list .box-top-inner .caption1 {
	/*width: calc(115 / 375 * 100vw);*/
	width: calc(0 / 375 * 100vw);
	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);
	height: auto;
	/*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);
	height: auto;
	top: calc(165 / 375 * 100vw);
	left: calc(118 / 375 * 100vw);
	position: absolute;
	opacity: 0;
	z-index: 2;
}
#list .box-top-inner .natural {
	width: calc(224 / 375 * 100vw);
	height: auto;
	top: calc(10 / 375 * 100vw);
	left: calc(56 / 375 * 100vw);
	position: absolute;
	opacity: 0;
	z-index: 1;
}
#list .box-top-inner .desc {
	width: 100%;
	top: calc(230 / 375 * 100vw);
	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: 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); }
.black {
	color: #000;
}
#list .box-top-inner .godown {
	width: calc(17 / 375 * 100vw);
	height: calc(17 / 375 * 100vw);
	bottom: calc(30 / 375 * 100vw);
	left: calc(159 / 375 * 100vw);
	position: absolute;
	background: url(../m/images/index/index-img09.png) no-repeat;
	background-size: 100% 100%;
	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: calc(0 / 375 * 100vw);
	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: calc(0 / 375 * 100vw); opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: calc(8 / 375 * 100vw); opacity: 0; }
}
@-moz-keyframes arrow {
	0%   { top: calc(0 / 375 * 100vw); opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: calc(8 / 375 * 100vw); opacity: 0; }
}
@-o-keyframes arrow {
	0%   { top: calc(0 / 375 * 100vw); opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: calc(8 / 375 * 100vw); opacity: 0; }
}
@keyframes arrow {
	0%   { top: calc(0 / 375 * 100vw); opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { top: calc(8 / 375 * 100vw); opacity: 0; }
}
#list .box-title .bg {
	width: 100%;
	height: 100%;
	top: calc(0 / 375 * 100vw);
	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: -100%;
	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: calc(0 / 375 * 100vw);   }
	80%  { top: -2%;   }
	88%  { top: calc(0 / 375 * 100vw);   }
	92%  { top: -1%;   }
	96%  { top: calc(0 / 375 * 100vw);   }
	98%  { top: -.5%;  }
	100% { top: calc(0 / 375 * 100vw);   }
}
@-moz-keyframes bg1-animate {
	0%   { top: -100%; }
	70%  { top: calc(0 / 375 * 100vw);   }
	80%  { top: -2%;   }
	88%  { top: calc(0 / 375 * 100vw);   }
	92%  { top: -1%;   }
	96%  { top: calc(0 / 375 * 100vw);   }
	98%  { top: -.5%;  }
	100% { top: calc(0 / 375 * 100vw);   }
}
@-o-keyframes bg1-animate {
	0%   { top: -100%; }
	70%  { top: calc(0 / 375 * 100vw);   }
	80%  { top: -2%;   }
	88%  { top: calc(0 / 375 * 100vw);   }
	92%  { top: -1%;   }
	96%  { top: calc(0 / 375 * 100vw);   }
	98%  { top: -.5%;  }
	100% { top: calc(0 / 375 * 100vw);   }
}
@keyframes bg1-animate {
	0%   { top: -100%; }
	70%  { top: calc(0 / 375 * 100vw);   }
	80%  { top: -2%;   }
	88%  { top: calc(0 / 375 * 100vw);   }
	92%  { top: -1%;   }
	96%  { top: calc(0 / 375 * 100vw);   }
	98%  { top: -.5%;  }
	100% { top: calc(0 / 375 * 100vw);   }
}
#list .box-title .bg .bg2 {
	background-image: url(../m/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: 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 {width: 100%;}

.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 ul {width: 100%;}
.catalog .group-content li {display: inline-block; width: 100%; height: calc(375 / 375 * 100vw); margin-bottom: calc(40 / 375 * 100vw); vertical-align: top;}
.catalog .group-content li:nth-child(3n) {margin-right: calc(0 / 375 * 100vw);}
.catalog .group-content li .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 li .pop:before {
	content: "";
	width: calc(148 / 375 * 100vw);
	height: calc(17 / 375 * 100vw);
	margin: calc(18 / 375 * 100vw) 0 0 calc(94 / 375 * 100vw);
	float: left;
	background: url(../m/images/index/news-text.png) no-repeat;
	background-size: 100% auto;
}
.catalog .group-content li .pop:before {
	background-position: calc(37 / 375 * 100vw) 0;
}
.catalog .group-content li + li .pop:before {
	background-position: calc(28 / 375 * 100vw) calc(-17 / 375 * 100vw);
}
.catalog .group-content li + li + li .pop:before {
	background-position: 0 calc(-34 / 375 * 100vw);
}
.catalog .group-content li .inner { float: left; width: 100%; height: calc(298 / 375 * 100vw); margin-top: calc(8 / 375 * 100vw); overflow: hidden;}
.catalog .group-content li .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;
/*	-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: 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: calc(0 / 375 * 100vw);
	position: absolute;
	background-image: url(../m/images/index/news-bg02.png), url(../m/images/index/news-bg01.jpg);
	background-repeat: repeat, repeat-x;
	background-size: calc(47 / 375 * 100vw) calc(68 / 375 * 100vw), auto 100%;
	background-position: 0, 0;
	z-index: 1;
/* 	-webkit-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; }
} */
@keyframes content-bg {
	0%   { background-position: 0 0, 0; }
	100% { background-position: calc(-47 / 375 * 100vw) 0, 0; }
}
.box-content .bg:after{
	content: none;
}
.box-content .bg:before {
	content: "";
	width: calc(193 / 375 * 100vw);
	height: calc(144 / 375 * 100vw);
	bottom: calc(0 / 375 * 100vw);
	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;
	mix-blend-mode: initial;
}

/*-----*/

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

#detail .box-title {
/*	width: calc(720 / 375 * 100vw);*/
	font-size: calc(18 / 375 * 100vw);
	font-weight: 600;
	text-indent: 0;
	margin-top: calc(17 / 375 * 100vw);
/*	margin: 0 auto;*/
}

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

#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;
}
#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(166 / 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-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: 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-15px {
	font-size: calc(15 / 375 * 100vw);
}
#detail .box-content .rule-step .item .fb-like,
#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,
#detail .box-content .rule-step .item .fb-comments-wrap {
	display: block;
	width: calc(207 / 375 * 100vw) !important;
	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);*/
	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 > .inner {
	 z-index: 3;
}