@charset "utf-8";
/* CSS Document */
.kv{
	position: relative;
	width: 100%;
	padding-bottom: 52%;/*1040*/
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-image: url(../images/kv.jpg);
	background-size:100% auto;
	overflow:hidden;
	}
	
.kv2{
	position:absolute;
	width: 100%;
	height:100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/kv2.jpg);
	background-size:100% auto;
	overflow:hidden;
	opacity:.8;
	/**/
    animation: gg88 10s  2s infinite;
    -webkit-animation: gg88 10s 2s infinite;
	top:0;
	left:0;
	}
.slogan{
	position:absolute;
	width: 100%;
	height:100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/slogan.png);
	background-size:100% auto;
	overflow:hidden;
	top:0;
	left:0;
	}
#particles-js{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	}
.downbx{
	position:absolute;
	width:37%;/*30 35%*/
	left:11.15%;/*359 17.95 14.45%*/
	top:68.8269%;/*695*/
	text-align:center;
	/*overflow:hidden;*/
	/**/
	-webkit-filter:drop-shadow(3px 5px 1.5rem rgba(0, 0, 0, .9));
    filter:drop-shadow(3px 5px 1.5rem rgba(0, 0, 0, .9));
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.tzs_icon{
	float: left;
	position: relative;
	width: 25%;
	padding-bottom: 25%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% auto;
	background-image: url(../images/tzs_icon.png);
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.qr{
	float:right;
	position:relative;
	width:24%;
	padding-bottom:24%;
	border-radius:1.2rem;
	background-color:#FFF;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:83% auto;
	background-image: url(../images/qr.png);
	overflow:hidden;
	top:.28rem;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.downbb{
	position:absolute;
	width:48%;
	height:100%;
	top:0;
	left:26.65%;
	-webkit-filter:drop-shadow(3px 5px 1.5rem rgba(0, 0, 0, .9));
    filter:drop-shadow(3px 5px 1.5rem rgba(0, 0, 0, .9));
	}
.downbb a{
	float: left;
	position:relative;
	width:48.4%;
	padding-bottom:24.2%;
	background-color:rgba(0,0,0,.2);
	margin:.8% .5%;/*.15rem*/
	border:1px solid #463f2b;
	/**/
	background-repeat:no-repeat;
	background-position: 50% 50%;
	background-size:95% auto;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.downbb a:nth-child(1){
	border-radius:1.2rem 0 1.2rem 0;
	background-image: url(../images/apple.png);
	}
.downbb a:nth-child(2){
	border-radius:0 1.2rem 0 1.2rem;
	background-image: url(../images/google.png);
	/*left:-1px;*/
	}
.downbb a:nth-child(3){
	border-radius:0 1.2rem 0 1.2rem;
	background-image: url(../images/apk.png);top:-1px;
	}
.downbb a:nth-child(4){
	border-radius:1.2rem 0 1.2rem 0;
	background-image: url(../images/pc.png);
	/*left:-1px;
	top:-1px;*/
	}
.downbb a:hover {
	border:1px solid #e7cc91;/*#dcb755*/
	background-color:rgba(0,0,0,.8);
	z-index:1;
	}
		
.down{
	position: relative;
	width:41.6%;/*250*/
	padding-bottom: 12.48%;/*75*/
	display:inline-block;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto 100%;
	border-radius:8px;
	border-radius:8px;
	margin:2% 3.1% 0;
	border:1px solid #afafaf;
	background-color:rgba(0,0,0,.95);
	overflow:hidden;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.down:hover {border:1px solid #FFF;background-color:rgba(0,0,0,1);}
.apple{background-image: url(../images/apple.png);}
.google{background-image: url(../images/google.png);}
.down span{
	position: absolute;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,.8);
	font-size:2rem;
	color: #fff;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	overflow: hidden;
	font-weight: 400;
	right:0;
	top:0;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
/*
.login span{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.8);
	font-size:2rem;
	color: #ebdfb6;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	overflow: hidden;
	font-weight: 400;
	right:0;
	top:0;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}*/
.login{
	position:relative;
	width:58.83%;/*353*/
	padding-bottom:14.8324%;/*89 25.212*/
	display:block;
	margin:4.3% auto;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/login.png);
	background-size:100% auto;
	}
.login > span{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/login_a.png);
	background-size:100% auto;
	top:0;
	left:0;
	}
.login > span > span{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/login_b.png);
	background-size:100% auto;
	opacity:0;
	top:0;
	left:0;
	
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.login > div{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/login_1.png);
	background-size:100% auto;
	opacity:0;
	top:0;
	left:0;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.login:hover > div,.login:hover > span > span{opacity:1;}
/**/
.roar::before, 
.roar::after {
	position:absolute;
	content:"";
	width:100%;/*28%560*/
	padding-bottom:75.892%;/*425 21.25%*/
	display:block;
	background-attachment: scroll;
	background-position:0% 0%;
	background-size:100% auto;
   /* content: attr(data-title);*/
    top: 0;
    left: 0;
	}
.roar::before {
    background-image: url(../images/am1_2.png);
    animation: move .3s  both infinite;/*cubic-bezier (.87,.36,.5,.68) reverse */
	}

.roar::after {
    background-image: url(../images/am1_3.png);
    animation: move .3s reverse both infinite;/* cubic-bezier(.87,.36,.5,.68)*/
	}

@keyframes move {
    0% {transform: 0;}
    20% {transform: translate(-3px, 3px);}
    40% {transform: translate(-3px, -3px);}
    60% {transform: translate(3px, 3px);}
    80% {transform: translate(3px, -3px);}
    100% {transform: translate(0);}
	}
.roar{
	position:absolute;
	width:28%;/*560*/
	padding-bottom:21.25%;/*425*/
	display:block;
	background-attachment: scroll;
	background-position:0% 0%;
	background-image: url(../images/am1_1.png);
	background-size:100% auto;
	/*-webkit-animation: hlogo .6s steps(4) infinite;
	-moz-animation: hlogo .6s steps(4) infinite;
	-ms-animation: hlogo .6s steps(4) infinite;
	-o-animation: hlogo .6s steps(4) infinite;
	animation: hlogo .6s steps(4) infinite;*/
	top:0;
	right:0;
	}
.roar span{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-position:0% 0%;
	background-image: url(../images/am1a.png);
	background-size:100% auto;
	-webkit-animation: hlogo2 .15s steps(2) infinite;
	-moz-animation: hlogo2 .15s steps(2) infinite;
	-ms-animation: hlogo2 .15s steps(2) infinite;
	-o-animation: hlogo2 .15s steps(2) infinite;
	animation: hlogo2 .15s steps(2) infinite;/**/
	top:0;
	right:0;
	}
.roar div{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-position:0% 0%;
	background-image: url(../images/am1_1.png);
	background-size:100% auto;
	top:0;
	right:0;
	z-index:1;
	}
.roar2{
	position:absolute;
	width:49.7%;/*994*/
	padding-bottom:22.1%;/*442*/
	display:block;
    animation: brilla 2s alternate infinite;
    -webkit-animation: brilla 2s alternate infinite;
	top:0;
	left:37.55%;/*751*/
	}
.roar2 span{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-position:0% 0%;
	background-image: url(../images/kkc1.png);
	background-size:100% auto;
	/**/
	-webkit-animation: hlogo3 1.2s steps(5) infinite;
	-moz-animation: hlogo3 1.2s steps(5) infinite;
	-ms-animation: hlogo3 1.2s steps(5) infinite;
	-o-animation: hlogo3 1.2s steps(5) infinite;
	animation: hlogo3 1.2s steps(5) infinite;/**/
	top:0;
	right:0;
	}
/* 20220518 */
#lightbx2{
	position:fixed;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	z-index:50;
	background-color:rgba(0,0,0,.85);
	overflow:auto;
	display:none;
	/**/
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	}

.bnbx1{
	position:relative;
	width:900px;
	margin:0 auto .5rem;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}

.bnbx{
	position:relative;
	width:100%;
	padding-bottom:506px;
	border: 2px solid #820002;
	clear:both;
	overflow:hidden;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.bnbx img{
	position:absolute;
	width:100.3%;
	top:0;
	left:0;
	border:0;
	}
.bnbx a{display:block;}
.bnbx img:nth-child(1){display:block;}
.bnbx img:nth-child(2){display:none;}
.closebt{
	float:right;
	position:relative;
	width:70px;
	padding-bottom:70px;
	display:block;
	cursor: pointer;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:100% auto;
	background-image: url(../images/close.png);
	margin:.3rem 0;
	}
.tk{position:relative;overflow:hidden;}
.bnbx1 .txx{
	position:absolute;
	font-size:1.45rem;
	color: #fff;
	font-weight: 300;
	opacity:.7;
	left:.5rem;
	bottom:.5rem;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
	
.bnbx1 .txx a{color:#fff;}
.bnbx1 .txx:hover{opacity:1;}	
.bnbx1 .txx span{font-size:1.55rem; display:inline-block;padding-right:.1rem;}
		
@media only screen and (max-width:1400px){
/**/	

}
@media only screen and (max-width:1000px){	
/**/	
/* 20220518 */
.bnbx1{width:700px;}
.bnbx{padding-bottom:394px;}
.closebt{
	width:60px;
	padding-bottom:60px;
	}
.bnbx1 .txx{}
}
@media only screen and (max-width:800px){
/**/	
.kv{
	width:100%;
	padding-bottom:185%;/*1480*/
	background-image: url(../images/kv_m.jpg);
	}
.kv2{background-image: url(../images/kv2_m.jpg);}
.slogan{
	background-image: url(../images/slogan_m.png);
	}
.downbx{
	position:absolute;
	width:600px;
	left:50%;/**/
	top:77.5%;/*71.21% 940*/
	margin-left:-300px;
	}
.down span,.login span{font-size:1.5rem;}
.roar2{display:none;}/*.roar,*/
.roar{
	width:65%;/*560*/
	padding-bottom:49.33%;/*425*/
	top:-2%;
	right:-36%;	
	/**/
	transform:rotate(-22deg);
	-ms-transform:rotate(-22deg);
	-moz-transform:rotate(-22deg);
	-webkit-transform:rotate(-22deg);
	-o-transform:rotate(-22deg);/**/
	}
.roar span{top:2%;}
.tzs_icon{
	width: 36%;
	padding-bottom: 36%;
	}
.qr{ display:none;}
.downbb{
	width:61%;
	left:auto;
	right:0;
	}
.downbb a{
	float:right;
	width:100%;
	padding-bottom:16.5%;
	background-size:auto 100%;
	margin-bottom:1.7%;
	}
.downbb a:nth-child(1){border-radius:.5rem;background-image: url(../images/apple.png);}
.downbb a:nth-child(2){border-radius:.5rem;background-image: url(../images/google.png);left:0;}
.downbb a:nth-child(3){border-radius:.5rem;background-image: url(../images/apk.png);top:0;}
.downbb a:nth-child(4){ display:none;}
/*20220518*/
.bnbx1{width:88%;}
.bnbx{padding-bottom:176.34%;}
.closebt{
	width:45px;/*12%*/
	padding-bottom:45px;
	margin:.2rem 0;
	}
.bnbx1 .txx{font-size: 1.26rem;}
.bnbx img:nth-child(1){display:none;}	
.bnbx img:nth-child(2){display:block;}

}
@media only screen and (max-width:750px){
/**/	

}
@media only screen and (max-width:630px){
/**/	
.downbx{
	width:86%;
	left:7%;/**/
	top:76%;/*68% 940 73.5%*/
	margin-left:0;
	}
.down{
	width:45.6%;/*250*/
	padding-bottom:13%;/*75*/
	margin:2% 1.1% 0;
	}
}
@media only screen and (max-width:580px){
	
}
@media only screen and (max-width:560px){
/**/	

}
@media only screen and (max-width:450px){
/**/	
.login{
	width:80%;/*353*/
	padding-bottom:20.16997%;/*89 25.212*/
	}
	
}
@media only screen and (max-width:380px){
/**/
@keyframes move {
    0% {transform: 0;}
    20% {transform: translate(-2px, 2px);}
    40% {transform: translate(-2px, -2px);}
    60% {transform: translate(2px, 2px);}
    80% {transform: translate(2px, -2px);}
    100% {transform: translate(0);}
	}	
}
@media only screen and (max-width:360px){
/**/	
}
@media only screen and (max-width:320px){
/**/

}
/**/
@-webkit-keyframes hlogo {
   from { background-position:0% 0%;}
     to { background-position:0% -400%;}
	}
@-moz-keyframes hlogo {
   from { background-position:0% 0%;}
     to { background-position:0% -400%;}
	}
@-ms-keyframes hlogo {
   from { background-position:0% 0%;}
     to { background-position:0% -400%;}
	}
/**/
@-webkit-keyframes hlogo2 {
   from { background-position:0% 0%;}
     to { background-position:0% -200%;}
	}
@-moz-keyframes hlogo2 {
   from { background-position:0% 0%;}
     to { background-position:0% -200%;}
	}
@-ms-keyframes hlogo2 {
   from { background-position:0% 0%;}
     to { background-position:0% -200%;}
	}
/**/
@-webkit-keyframes hlogo3 {
   from { background-position:0% 0%;}
     to { background-position:0% -500%;}
	}
@-moz-keyframes hlogo3 {
   from { background-position:0% 0%;}
     to { background-position:0% -500%;}
	}
@-ms-keyframes hlogo3 {
   from { background-position:0% 0%;}
     to { background-position:0% -500%;}
	}
@keyframes brilla {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.8;
    }
}
@keyframes gg88 {
    0% {
		background-size:100% auto;
        opacity:0.8;
    }
    20% {
		background-size:108% auto;
        opacity:0;
    }
    100% {
		background-size:100% auto;
        opacity: 0;
    }
}