@charset "utf-8";
/**
 *author:weiyj
 *date:2020-11-17
 */


.usercent-bg{ background:#0f1625 url(../img/user/banner.jpg) no-repeat top center;}
.ucw1220{ width: 1220px; margin: 0 auto;}
.ucbanner{ height: 710px; position: relative;}
.ucbox{ height: 290px; margin-bottom: 74px; position: relative; background-color: #121b30;  border-radius: 6px;}
.ucbox::before{ content: ""; display: block; position: absolute; top: -1px; left: 50%; width: 917px; height: 1px; margin-left: -458px;background: url(../img/user/line.png) no-repeat center center; background-size: contain;}

.ucbox ul{font-size: 0;}
.ucbox li{height: 290px; cursor: pointer; display: inline-block; width: 25%; font-size: 28px; color: #af955d; text-align: center;}
.ucbox li .txt1{padding-top: 24px;}
.ucbox li .txt1 span{ transition: All 0.2s ease-in-out; display: inline-block; position: relative; width: 170px; height: 170px;border-radius: 100%; background-color: #0d121c; vertical-align: top;}
.ucbox li .txt1 span::before{ content: ""; display: block; width: 110px; height: 110px; position: absolute; top: 50%; left: 50%; margin: -55px 0 0 -55px;}
.ucbox li.i1 .txt1 span::before{ background: url(../img/user/gn1.png) no-repeat center center; background-size: contain;}
.ucbox li.i2 .txt1 span::before{ background: url(../img/user/gn2.png) no-repeat center center; background-size: contain;}
.ucbox li.i3 .txt1 span::before{ background: url(../img/user/gn3.png) no-repeat center center; background-size: contain;}
.ucbox li.i4 .txt1 span::before{ background: url(../img/user/gn4.png) no-repeat center center; background-size: contain;}
.ucbox li.i5 .txt1 span::before{ background: url(../img/user/gn5.png) no-repeat center center; background-size: contain;}
.ucbox li.i6 .txt1 span::before{ background: url(../img/user/gn6.png) no-repeat center center; background-size: contain;}
.ucbox li.i7 .txt1 span::before{ background: url(../img/user/gn7.png) no-repeat center center; background-size: contain;}
.ucbox li.i8 .txt1 span::before{ background: url(../img/user/gn8.png) no-repeat center center; background-size: contain;}


.ucbox li .txt2{ line-height: 30px; padding: 20px 0; text-align: center;}
.ucbox li .txt2 span{display: inline-block; width: 270px; height: 40px;}
.ucbox li.i1 .txt2 span{ background: url(../img/user/gnt1.png) no-repeat center center; background-size: contain;}
.ucbox li.i2 .txt2 span{ background: url(../img/user/gnt2.png) no-repeat center center; background-size: contain;}
.ucbox li.i3 .txt2 span{ background: url(../img/user/gnt3.png) no-repeat center center; background-size: contain;}
.ucbox li.i4 .txt2 span{ background: url(../img/user/gnt4.png) no-repeat center center; background-size: contain;}
.ucbox li.i5 .txt2 span{ background: url(../img/user/gnt5.png) no-repeat center center; background-size: contain;}
.ucbox li.i6 .txt2 span{ background: url(../img/user/gnt6.png) no-repeat center center; background-size: contain;}
.ucbox li.i7 .txt2 span{ background: url(../img/user/gnt7.png) no-repeat center center; background-size: contain;}
.ucbox li.i8 .txt2 span{ background: url(../img/user/gnt8.png) no-repeat center center; background-size: contain;}

.ucbox li:hover .txt1 span{ background-color: #020407;}

.openvip-box{ position: absolute; top: 471px; width: 100%;left: 0; text-align: center;}
.openvip-box .buyvip-bn{ height: 73px; cursor: pointer; width: 642px; display:inline-block; background: url(../img/user/openbn.png) no-repeat center center; background-size: contain;}
.openvip-box .buy-txt{ line-height: 60px; display: block; color: #ffffff; padding-top: 30px; font-size: 28px; opacity: 0.5;}


.ucbanner .txt-box{ position: absolute; width: 592px; height: 453px; top: 17px; margin-left: -296px; left: 50%;}
.ucbanner .txt-box .iimg{width: 592px; height: 453px;  display: block; position: absolute;opacity: 0;}
.ucbanner .txt-box .iimg.i1{background: url(../img/user/ban1.png) no-repeat center center;}
.ucbanner .txt-box .iimg.i2{background: url(../img/user/ban2.png) no-repeat center center;}
.ucbanner .txt-box .iimg.i3{background: url(../img/user/ban3.png) no-repeat center center;}
.ucbanner .txt-box .iimg.i4{background: url(../img/user/ban4.png) no-repeat center center;}
.ucbanner .txt-box .iimg.i5{background: url(../img/user/ban5.png) no-repeat center center;}
.ucbanner .txt-box .iimg.i6{background: url(../img/user/ban6.png) no-repeat center center;}





.ucbanner .txt-box .iimg.i1{animation: bantits1 0.4s  linear both ;} /*infinite*/
.ucbanner .txt-box .iimg.i2{animation: bantits2 0.3s .1s linear both ;}
.ucbanner .txt-box .iimg.i4{animation: bantits4 0.3s 0.3s linear both ;}
.ucbanner .txt-box .iimg.i5{animation: bantits4 0.3s 0.4s linear both ;}

.ucbanner .txt-box .iimg.i6{animation: bantits6 2s linear infinite ;}

@keyframes bantits1{
    0%{opacity:0;-webkit-transform:scale(.5)}
    100%{opacity:1;-webkit-transform:scale(1)}
}
@keyframes bantits6{
	0%{opacity:0;}
	50%{opacity:1;}
    100%{opacity:0;}
}
@keyframes bantits2{
    0%{opacity:0;-webkit-transform:scale(1.2)}
    100%{opacity:1;-webkit-transform:scale(1)}
}
@keyframes bantits4{
    0%{opacity:0;-webkit-transform:translateY(10px) scale(1)}
    100%{-webkit-transform:translateY(0px) scale(1);opacity:1}
}
@keyframes ban-tits{
    0%{opacity:0;-webkit-transform:scale(.9)}
    50%{opacity:1;-webkit-transform:scale(1.05)}
    70%{-webkit-transform:scale(.95);opacity:1}
    100%{-webkit-transform:scale(1);opacity:1}
}

.diimg{ width: 114px; height: 72px; position: absolute;}
.diimg.i1{ top: 154px; left: 100px; -webkit-animation: bounce 2.7s linear infinite;animation: bounce 2.7s linear infinite; background: url(../img/user/di1.png) no-repeat center center;}
.diimg.i2{top: 350px; left: 200px;-webkit-animation: bounce 2.8s linear infinite;animation: bounce 2.8s linear infinite; background: url(../img/user/di2.png) no-repeat center center;}
.diimg.i3{top: 104px; left: 960px;-webkit-animation: bounce 2.9s linear infinite;animation: bounce 2.9s linear infinite; background: url(../img/user/di3.png) no-repeat center center;}
.diimg.i4{top: 310px; left:850px;-webkit-animation: bounce 3s linear infinite;animation: bounce 3s linear infinite; background: url(../img/user/di4.png) no-repeat center center;}


@-webkit-keyframes bounce {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	25% {
		-webkit-transform: translateY(9%);
		transform: translateY(9%)
	}

	75% {
		-webkit-transform: translateY(-3%);
		transform: translateY(-3%)
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes bounce {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	25% {
		-webkit-transform: translateY(9%);
		transform: translateY(9%)
	}

	75% {
		-webkit-transform: translateY(-3%);
		transform: translateY(-3%)
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}