@charset "utf-8";

.jb-zs{
	position:absolute;
	animation:myfirst 6s linear 1s infinite;
	/* Firefox: */
	-moz-animation:myfirst 6s linear 1s infinite;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 6s linear 1s infinite;
	/* Opera: */
	-o-animation:myfirst 6s linear 1s infinite;
}

@keyframes myfirst
{
	0%   {left:2rem; top:12rem;}
	25%  {left:1rem; top:12rem;}
	50%  {left:1rem; top:14rem;}
	75%  {left:2rem; top:14rem;}
	100% {left:2rem; top:12rem;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {left:2rem; top:12rem;}
	25%  {left:1rem; top:12rem;}
	50%  {left:1rem; top:14rem;}
	75%  {left:2rem; top:14rem;}
	100% {left:2rem; top:12rem;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {left:2rem; top:12rem;}
	25%  {left:1rem; top:12rem;}
	50%  {left:1rem; top:14rem;}
	75%  {left:2rem; top:14rem;}
	100% {left:2rem; top:12rem;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {left:2rem; top:12rem;}
	25%  {left:1rem; top:12rem;}
	50%  {left:1rem; top:14rem;}
	75%  {left:2rem; top:14rem;}
	100% {left:2rem; top:12rem;}
}

.jb-ys{
	position:absolute;
	animation:myfirst1 4s linear 1s infinite;
	/* Firefox: */
	-moz-animation:myfirst1 4s linear 1s infinite;
	/* Safari and Chrome: */
	-webkit-animation:myfirst1 4s linear 1s infinite;
	/* Opera: */
	-o-animation:myfirst1 4s linear 1s infinite;
}

@keyframes myfirst1
{
	0%   {right:2rem; top:12rem;}
	25%  {right:1rem; top:12rem;}
	50%  {right:1rem; top:13rem;}
	75%  {right:2rem; top:13rem;}
	100% {right:2rem; top:12rem;}
}

@-moz-keyframes myfirst1 /* Firefox */
{
	0%   {right:2rem; top:12rem;}
	25%  {right:1rem; top:12rem;}
	50%  {right:1rem; top:13rem;}
	75%  {right:2rem; top:13rem;}
	100% {right:2rem; top:12rem;}
}

@-webkit-keyframes myfirst1 /* Safari and Chrome */
{
	0%   {right:2rem; top:12rem;}
	25%  {right:1rem; top:12rem;}
	50%  {right:1rem; top:13rem;}
	75%  {right:2rem; top:13rem;}
	100% {right:2rem; top:12rem;}
}

@-o-keyframes myfirst1 /* Opera */
{
	0%   {right:2rem; top:12rem;}
	25%  {right:1rem; top:12rem;}
	50%  {right:1rem; top:13rem;}
	75%  {right:2rem; top:13rem;}
	100% {right:2rem; top:12rem;}
}

.jb-zx{
	position:absolute;
	animation:myfirst2 6s linear 1s infinite;
	/* Firefox: */
	-moz-animation:myfirst2 6s linear 1s infinite;
	/* Safari and Chrome: */
	-webkit-animation:myfirst2 6s linear 1s infinite;
	/* Opera: */
	-o-animation:myfirst2 6s linear 1s infinite;
}

@keyframes myfirst2
{
	0%   {left:2rem; bottom:2rem;}
	25%  {left:1rem; bottom:2rem;}
	50%  {left:1rem; bottom:1rem;}
	75%  {left:2rem; bottom:1rem;}
	100% {left:2rem; bottom:2rem;}
}

@-moz-keyframes myfirst2 /* Firefox */
{
	0%   {left:2rem; bottom:2rem;}
	25%  {left:1rem; bottom:2rem;}
	50%  {left:1rem; bottom:1rem;}
	75%  {left:2rem; bottom:1rem;}
	100% {left:2rem; bottom:2rem;}
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
	0%   {left:2rem; bottom:2rem;}
	25%  {left:1rem; bottom:2rem;}
	50%  {left:1rem; bottom:1rem;}
	75%  {left:2rem; bottom:1rem;}
	100% {left:2rem; bottom:2rem;}
}

@-o-keyframes myfirst2 /* Opera */
{
	0%   {left:2rem; bottom:2rem;}
	25%  {left:1rem; bottom:2rem;}
	50%  {left:1rem; bottom:1rem;}
	75%  {left:2rem; bottom:1rem;}
	100% {left:2rem; bottom:2rem;}
}

.jb-yx{
	position:absolute;
	animation:myfirst3 4s linear 1s infinite;
	/* Firefox: */
	-moz-animation:myfirst3 4s linear 1s infinite;
	/* Safari and Chrome: */
	-webkit-animation:myfirst3 4s linear 1s infinite;
	/* Opera: */
	-o-animation:myfirst3 4s linear 1s infinite;
}

@keyframes myfirst3
{
	0%   {right:2rem; bottom:2rem;}
	25%  {right:1rem; bottom:2rem;}
	50%  {right:1rem; bottom:3rem;}
	75%  {right:2rem; bottom:3rem;}
	100% {right:2rem; bottom:2rem;}
}

@-moz-keyframes myfirst3 /* Firefox */
{
	0%   {right:2rem; bottom:2rem;}
	25%  {right:1rem; bottom:2rem;}
	50%  {right:1rem; bottom:3rem;}
	75%  {right:2rem; bottom:3rem;}
	100% {right:2rem; bottom:2rem;}
}

@-webkit-keyframes myfirst3 /* Safari and Chrome */
{
	0%   {right:2rem; bottom:2rem;}
	25%  {right:1rem; bottom:2rem;}
	50%  {right:1rem; bottom:3rem;}
	75%  {right:2rem; bottom:3rem;}
	100% {right:2rem; bottom:2rem;}
}

@-o-keyframes myfirst3 /* Opera */
{
	0%   {right:2rem; bottom:2rem;}
	25%  {right:1rem; bottom:2rem;}
	50%  {right:1rem; bottom:3rem;}
	75%  {right:2rem; bottom:3rem;}
	100% {right:2rem; bottom:2rem;}
}

.customers .banner{padding-top: 2.5rem;width: 100%; height: 25rem;position: relative; background: url(../images/new_customers/banner.jpg) no-repeat center;background-size: cover;}
.customers .banner .title{width: 72%;margin: auto;display: block;}
.customers .banner .jb-zs{width: 3rem; position: absolute;left: 2rem; top:12rem;}
.customers .banner .jb-ys{width: 3rem; position: absolute;right: 2rem; top:12rem;}
.customers .banner .jb-zx{width: 3rem; position: absolute;left: 2rem; bottom:2rem;}
.customers .banner .jb-yx{width: 3rem; position: absolute;right: 2rem; bottom:2rem;}
.customers .welfare-box{width: 93%;margin: auto;margin-top: 1.5rem;display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
.customers .welfare-box .welfare-list{width: 48%;height: 13.5rem;padding: 0.4rem 0.7rem 0.6rem 0.7rem; text-align: center;}
.customers .welfare-box .welfare-list .p1{font-size: 0.8rem;line-height: 0.9rem;}
.customers .welfare-box .welfare-list .p2{font-size: 1.2rem;line-height: 2rem;margin-top: 1.5rem;margin-bottom: 0.7rem;font-weight: bold;}
.customers .welfare-box .welfare-list .p2 span{font-size: 3rem;margin-left: 0.25rem;}
.customers .welfare-box .welfare-list .p3{font-size: 0.9rem;height: 3rem;line-height: 1.2rem;width: 88%;margin: auto;}
.customers .welfare-box .welfare-list .p4{font-size: 0.8rem;margin-top: 0.2rem;line-height: 1rem;display: none; color: #fff;margin-top: -0.2rem;}
.customers .welfare-box .welfare-list .p4.active{display: block;}
.customers .welfare-box .welfare-list .a-btn{font-size: 0.9rem;color:rgba(245, 46, 46, 1);width: 9.8rem;height: 3.2rem;line-height: 2.8rem;margin: auto; display: block;}
.customers .welfare-box .welfare-list .a-btn.active{color:rgba(102, 102, 102, 1);}
.customers .welfare-box .welfare-1{background: url(../images/new_customers/bg1.png) no-repeat;background-size: 100% 100%;}
.customers .welfare-box .welfare-2{background: url(../images/new_customers/bg2.png) no-repeat;background-size: 100% 100%;}
.customers .welfare-box .welfare-1 .p1{color: #fff;}
.customers .welfare-box .welfare-1 .p2{color: rgba(227, 123, 11, 1);}
.customers .welfare-box .welfare-1 .p3{color: rgba(51, 11, 11, 1);}
.customers .welfare-box .welfare-1 .a-btn{background: url(../images/new_customers/btn-2.png) no-repeat;background-size: 100% 100%;}
.customers .welfare-box .welfare-1 .a-btn.active{background: url(../images/new_customers/btn-2s.png) no-repeat;background-size: 100% 100%;}
.customers .welfare-box .welfare-2 .p1{color: #fff;}
.customers .welfare-box .welfare-2 .p2{color: rgba(245, 46, 46, 1);}
.customers .welfare-box .welfare-2 .p3{color: rgba(51, 11, 11, 1);}
.customers .welfare-box .welfare-2 .a-btn{background: url(../images/new_customers/btn-1.png) no-repeat;background-size: 100% 100%;}
.customers .welfare-box .welfare-2 .a-btn.active{background: url(../images/new_customers/btn-1s.png) no-repeat;background-size: 100% 100%;}
.customers .explain-box{width: 93%;padding-bottom: 0.1rem; margin:1.5rem auto;border-radius: 0.3rem; border-radius: 24px;background: rgba(255, 255, 255, 1);border: 3px solid rgba(254, 223, 194, 1);   position: relative;}
.customers .fgx{width: 50%;position: absolute;top: 0;left: 50%; margin-left: -25%;background: url(../images/new_customers/b-tlt-bg.png) no-repeat;background-size: 100% 100%;}
.customers .fgx .p1{font-size: 0.95rem;color: #fff;line-height: 2rem; text-align: center;}
.customers .explain-box .explain-text{width: 96%;padding: 1.2rem 1rem; margin:0.6rem auto;border-radius: 0.3rem;margin-top: 2rem;} 
.customers .explain-box .explain-text .p2{font-size: 0.8rem;color: rgba(176, 103, 25, 1);margin-bottom: 0.6rem;}


@media screen and (min-width: 768px) {
	.jb-zs{
		position:absolute;
		animation:myfirst 5s linear 1s infinite;
		/* Firefox: */
		-moz-animation:myfirst 5s linear 1s infinite;
		/* Safari and Chrome: */
		-webkit-animation:myfirst 5s linear 1s infinite;
		/* Opera: */
		-o-animation:myfirst 5s linear 1s infinite;
	}
	
	@keyframes myfirst
	{
		0%   {left:1rem; top:5rem;}
		25%  {left:0.5rem; top:5rem;}
		50%  {left:0.5rem; top:5.5rem;}
		75%  {left:1rem; top:5.5rem;}
		100% {left:1rem; top:5rem;}
	}
	
	@-moz-keyframes myfirst /* Firefox */
	{
		0%   {left:1rem; top:5rem;}
		25%  {left:0.5rem; top:5rem;}
		50%  {left:0.5rem; top:5.5rem;}
		75%  {left:1rem; top:5.5rem;}
		100% {left:1rem; top:5rem;}
	}
	
	@-webkit-keyframes myfirst /* Safari and Chrome */
	{
		0%   {left:1rem; top:5rem;}
		25%  {left:0.5rem; top:5rem;}
		50%  {left:0.5rem; top:5.5rem;}
		75%  {left:1rem; top:5.5rem;}
		100% {left:1rem; top:5rem;}
	}
	
	@-o-keyframes myfirst /* Opera */
	{
		0%   {left:1rem; top:5rem;}
		25%  {left:0.5rem; top:5rem;}
		50%  {left:0.5rem; top:5.5rem;}
		75%  {left:1rem; top:5.5rem;}
		100% {left:1rem; top:5rem;}
	}
	
	.jb-ys{
		position:absolute;
		animation:myfirst1 5s linear 1s infinite;
		/* Firefox: */
		-moz-animation:myfirst1 5s linear 1s infinite;
		/* Safari and Chrome: */
		-webkit-animation:myfirst1 5s linear 1s infinite;
		/* Opera: */
		-o-animation:myfirst1 5s linear 1s infinite;
	}
	
	@keyframes myfirst1
	{
		0%   {right:2rem; top:5rem;}
		25%  {right:1.7rem; top:5rem;}
		50%  {right:1.7rem; top:4.8rem;}
		75%  {right:2rem; top:4.8rem;}
		100% {right:2rem; top:5rem;}
	}
	
	@-moz-keyframes myfirst1 /* Firefox */
	{
		0%   {right:2rem; top:5rem;}
		25%  {right:1.7rem; top:5rem;}
		50%  {right:1.7rem; top:4.8rem;}
		75%  {right:2rem; top:4.8rem;}
		100% {right:2rem; top:5rem;}
	}
	
	@-webkit-keyframes myfirst1 /* Safari and Chrome */
	{
		0%   {right:2rem; top:5rem;}
		25%  {right:1.7rem; top:5rem;}
		50%  {right:1.7rem; top:4.8rem;}
		75%  {right:2rem; top:4.8rem;}
		100% {right:2rem; top:5rem;}
	}
	
	@-o-keyframes myfirst1 /* Opera */
	{
		0%   {right:2rem; top:5rem;}
		25%  {right:1.7rem; top:5rem;}
		50%  {right:1.7rem; top:4.8rem;}
		75%  {right:2rem; top:4.8rem;}
		100% {right:2rem; top:5rem;}
	}
	
	.jb-zx{
		position:absolute;
		animation:myfirst2 5s linear 1s infinite;
		/* Firefox: */
		-moz-animation:myfirst2 5s linear 1s infinite;
		/* Safari and Chrome: */
		-webkit-animation:myfirst2 5s linear 1s infinite;
		/* Opera: */
		-o-animation:myfirst2 5s linear 1s infinite;
	}
	
	@keyframes myfirst2
	{
		0%   {left:1rem; bottom:0.5rem;}
		25%  {left:0.8rem; bottom:0.5rem;}
		50%  {left:0.8rem; bottom:0.3rem;}
		75%  {left:1rem; bottom:0.3em;}
		100% {left:1rem; bottom:0.5rem;}
	}
	
	@-moz-keyframes myfirst2 /* Firefox */
	{
		0%   {left:1rem; bottom:0.5rem;}
		25%  {left:0.8rem; bottom:0.5rem;}
		50%  {left:0.8rem; bottom:0.3rem;}
		75%  {left:1rem; bottom:0.3em;}
		100% {left:1rem; bottom:0.5rem;}
	}
	
	@-webkit-keyframes myfirst2 /* Safari and Chrome */
	{
		0%   {left:1rem; bottom:0.5rem;}
		25%  {left:0.8rem; bottom:0.5rem;}
		50%  {left:0.8rem; bottom:0.3rem;}
		75%  {left:1rem; bottom:0.3em;}
		100% {left:1rem; bottom:0.5rem;}
	}
	
	@-o-keyframes myfirst2 /* Opera */
	{
		0%   {left:1rem; bottom:0.5rem;}
		25%  {left:0.8rem; bottom:0.5rem;}
		50%  {left:0.8rem; bottom:0.3rem;}
		75%  {left:1rem; bottom:0.3em;}
		100% {left:1rem; bottom:0.5rem;}
	}
	
	.jb-yx{
		position:absolute;
		animation:myfirst3 5s linear 1s infinite;
		/* Firefox: */
		-moz-animation:myfirst3 5s linear 1s infinite;
		/* Safari and Chrome: */
		-webkit-animation:myfirst3 5s linear 1s infinite;
		/* Opera: */
		-o-animation:myfirst3 5s linear 1s infinite;
	}
	
	@keyframes myfirst3
	{
		0%   {right:0.5rem; bottom:0.5rem;}
		25%  {right:0.8rem; bottom:0.5rem;}
		50%  {right:0.8rem; bottom:0.7rem;}
		75%  {right:0.5rem; bottom:0.7rem;}
		100% {right:0.5rem; bottom:0.5rem;}
	}
	
	@-moz-keyframes myfirst3 /* Firefox */
	{
		0%   {right:0.5rem; bottom:0.5rem;}
		25%  {right:0.8rem; bottom:0.5rem;}
		50%  {right:0.8rem; bottom:0.7rem;}
		75%  {right:0.5rem; bottom:0.7rem;}
		100% {right:0.5rem; bottom:0.5rem;}
	}
	
	@-webkit-keyframes myfirst3 /* Safari and Chrome */
	{
		0%   {right:0.5rem; bottom:0.5rem;}
		25%  {right:0.8rem; bottom:0.5rem;}
		50%  {right:0.8rem; bottom:0.7rem;}
		75%  {right:0.5rem; bottom:0.7rem;}
		100% {right:0.5rem; bottom:0.5rem;}
	}
	
	@-o-keyframes myfirst3 /* Opera */
	{
		0%   {right:0.5rem; bottom:0.5rem;}
		25%  {right:0.8rem; bottom:0.5rem;}
		50%  {right:0.8rem; bottom:0.7rem;}
		75%  {right:0.5rem; bottom:0.7rem;}
		100% {right:0.5rem; bottom:0.5rem;}
	}
	.customers{width: 768px;margin: auto;border: 1px solid rgba(254, 223, 194, 1); }
	.customers .banner{height: 10rem;padding-top: 1rem;} 
	.customers .banner .jb-zs{width: 0.8rem; position: absolute;left: 1rem; top:5rem;}
	.customers .banner .jb-ys{width: 0.8rem; position: absolute;right: 2rem; top:5rem;}
	.customers .banner .jb-zx{width: 1rem; position: absolute;left: 1rem; bottom:0.5rem;}
	.customers .banner .jb-yx{width: 1rem; position: absolute;right: 0.5rem; bottom:0.5rem;}
	.customers .welfare-box{width: 93%;margin: auto;margin-top: 0.6rem;display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
	.customers .welfare-box .welfare-list{width: 48%;height: 5.3rem;padding: 0.1rem 0.3rem 0.3rem 0.3rem; text-align: center;}
	.customers .welfare-box .welfare-list .p1{font-size: 0.25rem;line-height: 0.35rem;}
	.customers .welfare-box .welfare-list .p2{font-size: 0.4rem;line-height: 1.1rem;margin-top: 0.5rem;margin-bottom: 0.2rem;font-weight: bold;}
	.customers .welfare-box .welfare-list .p2 span{font-size: 1rem;margin-left: 0.1rem;}
	.customers .welfare-box .welfare-list .p3{font-size: 0.3rem;height: 1.2rem;line-height: 0.4rem;width: 86%;}
	.customers .welfare-box .welfare-list .p4{font-size: 0.2rem;margin-top: 0.1rem;line-height: 0.4rem;}
	.customers .welfare-box .welfare-list .a-btn{font-size: 0.3rem;color:rgba(245, 46, 46, 1);width: 3.5rem;height: 1rem;line-height: 0.8rem; display: block;}
	.customers .explain-box{width: 93%;padding-bottom: 0.1rem; margin:0.4rem auto;border-radius: 0.1rem; }
	.customers .fgx{width: 50%;position: absolute;top: 0;left: 50%; margin-left: -25%;background: url(../images/new_customers/b-tlt-bg.png) no-repeat;background-size: 100% 100%;}
	.customers .fgx .p1{font-size: 0.3rem;line-height: 0.8rem;}
	.customers .explain-box .explain-text{width: 96%;padding: 0.4rem 0.3rem; margin:0.2rem auto;margin-top: 0.6rem;}
	.customers .explain-box .explain-text .p2{font-size: 0.25rem;margin-bottom: 0.2rem;}
}