@charset "UTF-8";
/**
 * 
 * @authors wuchangjiang (qianduanwcj@126.com)
 * @version $Id$
 */
body{ width: 100%;}

.bg_auto{ width: 100%;}

.m_body{ max-width: 640px; margin: 0 auto; box-shadow: 0 0 5px #000; background: #074a77 ; padding-bottom: 1.1rem;}

/*footer*/
.footer{ position: absolute; left: 0; bottom: 0; right: 0; color: #b1b1b1; line-height: .3rem; font-size: .18rem; text-align: center; padding: .3rem; z-index: 3;}
.footer a{ color: #b1b1b1;}

.title{position: absolute; left: 50%; margin-left: -3.2rem; right: 0; top: 0; height: 1.2rem; background: #000; opacity: 0.9; z-index: 2; width: 6.4rem;}
.title dl{ color: #fff; padding: .15rem 0 0 .15rem; }
.title dl dt{}
.title dl dt img{ width: .9rem; height: .9rem;}
.title dl dd{ padding: .1rem 0 0 .15rem;}
.title dl dd h3{ line-height: .4rem; font-size: .28rem; font-weight: normal;}
.title dl dd p{ font-size: .16rem; color: #c09b7f;}
.title dl dd a img{ margin: .15rem 0 0 .5rem; width: 1.6rem; opacity: 1;}

.cont{ padding-bottom: 1.2rem; }
.cont .bg1{ background: url(../images/bgs/1.jpg?v=20171023) 0 0 no-repeat; width: 6.4rem; height: 2.2rem; background-size: 6.4rem 2.2rem;}
.cont .bg2{ background: url(../images/bgs/2.jpg?v=20171023) 0 0 no-repeat; width: 6.4rem; height: 2.2rem; background-size: 6.4rem 2.2rem;}
.cont .bg3{ background: url(../images/bgs/3.jpg?v=20171023) 0 0 no-repeat; width: 6.4rem; height: 2.2rem; background-size: 6.4rem 2.2rem;}
.cont .bg4{ background: url(../images/bgs/4.jpg?v=20171023) 0 0 no-repeat; width: 6.4rem; height: 2.2rem; background-size: 6.4rem 2.2rem;}
.cont .bg5{ background: url(../images/bgs/5.jpg?v=20171023) 0 0 no-repeat; width: 6.4rem; height: 2.2rem; background-size: 6.4rem 2.2rem;}
.cont .bg5 .bottle{position: absolute;left: 2.55rem;top: 8.8rem;width: .4rem;height: .6rem; z-index: 2;}
.cont .bg6{ background: url(../images/bgs/6.jpg?v=20171023) 0 0 no-repeat; width: 6.4rem; height: 2.2rem; background-size: 6.4rem 2.2rem;}
.cont .bg7{ background: url(../images/bgs/7.jpg?v=20171023) 0 0 no-repeat; width: 6.4rem; height: 2.2rem; background-size: 6.4rem 2.2rem; position: relative;}
.cont .bg8{ background:#084878; width: 6.4rem; background-size: 6.4rem 2.2rem;}
.cont .bg8 .cont_msg{ background: url(../images/msg_bg.png) left top no-repeat; background-size: 6.14rem 100%; width: 6.14rem; margin: 0 auto .2rem; padding: .15rem; box-sizing: border-box; color: #a25100;}
.cont .bg8 .cont_msg h3{ font-size: .26rem; font-weight: bold; padding-bottom: .1rem;}
.cont .bg8 .cont_msg .star{ background: url(../images/star.png) left top no-repeat; background-size: 1.85rem .31rem; padding-left: 1.9rem; margin-bottom: .2rem;}
.cont .bg8 .cont_msg .msg{ color: #553806; line-height: .34rem;}

.btns{ background: url(../images/btn.png?v=20171023) left top no-repeat; background-size: 3.24rem 1.09rem; width: 3.24rem; height: 1.09rem; margin: 0 auto; position: fixed; left: 50%; top: initial; bottom: .1rem;z-index: 172;
	transform:translate(-50%,0);
	-webkit-transform:translate(-50%,0);
}
.btns.btns2{ display: none; position: relative; top: 0;}
.btns a{ width: 3.24rem; height: 1.09rem; position: absolute; left: 0; top: 0; z-index: 2;}
.btns a:nth-child(2){ margin-left: 3.14rem;}

.infos{ text-align: center; color: #fff;}

.next{ width: .48rem; height: .49rem; background: url(../images/next.png); background-size: .48rem .49rem; position: absolute; bottom: 0; left: 50%;
	-webkit-transform:translate(-50%,0);
	-moz-transform:translate(-50%,0);

	-webkit-animation: arrow 1s 0s infinite linear normal both;
	-moz-animation: arrow 1s 0s infinite linear normal both;
}

@-webkit-keyframes arrow{
  0%{ bottom: .5rem;}
  50%{ bottom: .7rem;}
  100%{ bottom: .5rem;}
}
@keyframes arrow{
  0%{ bottom: .5rem;}
  50%{ bottom: .7rem;}
  100%{ bottom: .5rem;}
}

.float{ position: absolute;}
.float a{}
.float i{ position: absolute;}
.float i.txt{ width: .95rem; height: .95rem; background-size: .95rem .95rem; z-index: 2;}
.float i.img{}
.float i.img div{width: 2.8rem;height: .87rem;color: #403930;padding: .08rem;box-sizing: border-box; display: none; font-size: .16rem;}

.float1 i.txt{ background-image: url(../images/txt1.png?v=20171023); left: .7rem; top: 1.9rem;
	animation: texts 2.5s .3s linear infinite;
	-webkit-animation: texts 2.5s .3s linear infinite;
}
.float1 i.img{ width: 1.54rem; height: .99rem; background: url(../images/img1.png?v=20171023); background-size: 1.54rem .99rem; left: 1.15rem; top: 2rem;
	animation: role 2.5s .3s linear infinite;
	-webkit-animation: role 2.5s .3s linear infinite;
}
.float1 i.img div{position: absolute;left: 1rem;top: -.5rem;background: url(../images/text_bg_l.png) left top no-repeat;background-size:2.8rem .87rem;}
.float2 i.txt{ background-image: url(../images/txt2.png?v=20171023); left: 3.9rem; top: 1.8rem;
	animation: texts 2.5s .7s linear infinite;
	-webkit-animation: texts 2.5s .7s linear infinite;
}
.float2 i.img{ width: 1.57rem; height: 1.07rem; background: url(../images/img2.png?v=20171023); background-size: 1.57rem 1.07rem; left: 4.5rem; top: 1.55rem;
	animation: role 2.8s .3s ease-in-out infinite;
	-webkit-animation: role 2.8s .3s ease-in-out infinite;
}
.float2 i.img div{position: absolute;left: -2rem;top: -.7rem;background: url(../images/text_bg_r.png) left top no-repeat;background-size:2.8rem .87rem;}
.float3 i.txt{ background-image: url(../images/txt3.png?v=20171023); left: 1.9rem; top: 1.65rem;
	animation: texts 2.5s .2s linear infinite;
	-webkit-animation: texts 2.5s .2s linear infinite;
}
.float3 i.img{ width: 1.44rem; height: 1.14rem; background: url(../images/img3.png?v=20171023); background-size: 1.44rem 1.14rem; left: .9rem; top: 1.4rem;
	animation: role 2.8s .6s ease-in-out infinite;
	-webkit-animation: role 2.8s .6s ease-in-out infinite;
}
.float3 i.img div{position: absolute;left: .5rem;top: -.85rem;background: url(../images/text_bg_l.png) left top no-repeat;background-size:2.8rem .87rem;}
.float4 i.txt{ background-image: url(../images/txt4.png?v=20171023); left: 4rem; top: 1.3rem;
	animation: texts 2.5s .5s linear infinite;
	-webkit-animation: texts 2.5s .5s linear infinite;
}
.float4 i.img{ width: 1.51rem; height: 1.09rem; background: url(../images/img4.png?v=20171023); background-size: 1.51rem 1.09rem; left: 4.7rem; top: 1.2rem;
	animation: role 2.8s .7s ease-in-out infinite;
	-webkit-animation: role 2.8s .7s ease-in-out infinite;
}
.float4 i.img div{position: absolute;left: -2rem;top: -.85rem;background: url(../images/text_bg_r.png) left top no-repeat;background-size:2.8rem .87rem;}
@keyframes role {
	0 { transform: translateY(0);}
	50% { transform: translateY(20%);}
}
@-webkit-keyframes role {
	0 { -webkit-transform: translateY(0);}
	50% { -webkit-transform: translateY(20%);}
}
@keyframes texts {
	0 { transform: scale(1);}
	50% { transform: scale(0.92);}
}
@-webkit-keyframes texts {
	0 { -webkit-transform: scale(1);}
	50% { -webkit-transform: scale(0.92);}
}
.popup{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 22222; opacity: 0;}
.popup .bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.5);}
.popup .popup_cont{ position: absolute; top: 50%; left: 50%; width: 5.4rem; text-align: center; z-index: 2; background: url(../images/pop.png); background-size: 5.4rem 100%; min-height: 4.88rem; padding: .2rem; box-sizing: border-box;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
.popup .close{ background: url(../images/close.png) 0 0 no-repeat; background-size: .93rem .52rem; width: .93rem; height: .52rem; display: block; margin: .2rem auto ;}
.popup p{ font-size: .22rem; color: #412115; line-height: .5rem; text-indent: 2em;}

.popup1 .popup_cont{ padding: 1rem 0 .5rem;}
.popup1 img{ width: 2.58rem; }
.popup1 p{ text-indent: 0}
.popup2 img{ width: 3.9rem; margin: 1.2rem auto .4rem;}
.popup3 .popup_cont{ padding: .5rem .2rem ; text-align: left;}
.popup3 .msg{ max-height: 4rem; padding: .2rem; overflow-y: scroll;}
.popup4 img{ width: 4.13rem; margin: 1.2rem auto .4rem;}
.popup4 .popup_cont{background: url(../images/ypz.png); background-size: 5.39rem 4.88rem;}
.popup4 .close{margin-top: 3.5rem;}
.popup_share img{ position: absolute; right: 0; top: 0; width: 5.94rem;}

.brick_box{ position: absolute; left: 50%; top: 0; z-index: 99; width: 6.4rem; margin-left: -3.2rem;}
.brick_box .brick{ position: relative;}
.brick_box .brick ul{}
.brick_box .brick ul li{ float: left;}
.brick_box .brick ol{ display: none; background: url(../images/pig_bg.png) center center no-repeat; background-size:1.18rem 1.12rem; position: absolute; left: 0.12rem; top: 2.2rem; width: 3.64rem; height: 3.34rem;}
.brick_box .brick ol{ display: none; background: url(../images/pig_bg.png) center center no-repeat; background-size:1.18rem 1.12rem; position: absolute; left: 0.12rem; top: 2.2rem; width: 3.64rem; height: 3.34rem;}
.brick_box .brick ol li{ float: left; width: 1.21rem; height: 1.10rem; background: url(../images/2.png) left top no-repeat; background-size: 1.21rem 1.10rem; position: absolute; left: 0; top: 0;}
.brick_box .brick ol li:nth-child(1){left: 1.22rem;to;top: 0;}
.brick_box .brick ol li:nth-child(2){left: 2.46rem;top: 1.14rem;}
.brick_box .brick ol li:nth-child(3){left: 1.22rem;top: 2.28rem;}
.brick_box .brick ol li:nth-child(4){left: 0;top: 1.12rem;}

.brick_box .brick .pig{background: url(../images/pig.png?v=20170110) left top no-repeat;background-size: .9rem .79rem;width: .9rem;height: .79rem;position: absolute;left: 1.5rem;top: 3.44rem;}
.brick_box .brick .pig i{ position: absolute; left: -.3rem; top: -.3rem; width: 1.47rem; height: 1.29rem; background: url(../images/cut.png) left top no-repeat; background-size: 1.47rem 1.29rem; display: none;}
.brick_box .brick .brick1{
	background: url(../images/1.png?v=20170110) left top no-repeat;
	background-size: 1.21rem 1.10rem;
	width: 1.21rem;
	height: 1.10rem;
	position: absolute;
	left: 1.35rem;
	top: 3.36rem;
	z-index: 2;
}
.brick_box .brick .cannon{background: url(../images/cannon.png?v=20170110) left top no-repeat;background-size: 1.21rem 1.29rem;width: 1.21rem;height: 1.29rem;position: absolute;left: 1.35rem;top: 3.15rem;z-index: 2;display: none;}

@-webkit-keyframes sport2{
	0%,100% { -webkit-transform: scale(1,1);}
	50% { -webkit-transform: scale(1.2,1.2);}
}
@keyframes sport2{
	0%,100% { transform: scale(1,1);}
	50% { transform: scale(1.2,1.2);}
}
.move{
	-webkit-animation: sport2 2s linear infinite;
	animation: sport2 2s linear infinite;
}
.moveT{
	-webkit-animation: moveT .3s linear;
	animation: moveT .3s linear;
}
@-webkit-keyframes moveT{
	0%,50%,100% { -webkit-transform: translateY(0);}
	25%,75% { -webkit-transform: translateY(.1rem);}
}
@keyframes moveT{
	0%,50%,100% { transform: translateY(0);}
	25%,75% { transform: translateY(.1rem);}
}
/*swiper*/
.swiper{
	margin-top: .5rem;
}
.swiper-container,
.swiper-slide{
	width: 100%;
	height: 5rem;
}
.swiper .swiper-slide {
    background: url(../images/border.png) 50% 50% no-repeat;
    background-size: 3.4rem 5rem;
}
.swiper .swiper-slide img {
	width: 3.2rem;
    height: 4.8rem;
    margin: .1rem auto;
    display: block;
}
.swiper .swiper-button-prev {
    width: .29rem;
    height: .67rem;
    background: url(../images/icon_prev.png) no-repeat;
    background-size: 100% 100%;
}
.swiper .swiper-button-next {
    width: .29rem;
    height: .67rem;
    background: url(../images/icon_next.png) no-repeat;
    background-size: 100% 100%;
}