body { background: url(../images/bg.jpg) center center; background-size:cover; margin: 0px; width: 100%; height: 100%; min-width: 1000px;}
.mc { position: absolute; width: 100%; height: 100%; z-index: 10;}
#lottie {  width: 100%; max-height: 700px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto;}
.lan { position: absolute; z-index: 20; top: 60%; width: 50%; left: 25%; opacity:0;
animation:bntMove 1s 8.5s forwards;
-moz-animation:bntMove 1s 8.5s forwards;
-webkit-animation:bntMove 1s 8.5s forwards;
-o-animation:bntMove 1s 8.5s forwards;
}

.lan .btn { float:left; position: relative; width: 20%; }
.lan .btn a { display: block; width: 100%; height: 45px; line-height: 45px; border: 1px solid rgba(255,255,255,0.5); border-radius: 26px; color: #fff; text-align: center; text-decoration: none; }
.lan .btn a:hover { background: #0378bb; border-color: #0378bb; }
.lan .line { float: left; width: 27.5%; height: 1px; background: rgba(255,255,255,0.5); display:block;margin: 23px 0;}
.lan .lineCenter { width: 5%;}
.qr { position: absolute; top: 70%; width: 7%; left: 46.5%;
opacity:0;
animation:qrMove 1s 9s forwards;
-moz-animation:qrMove 1s 9s forwards;
-webkit-animation:qrMove 1s 9s forwards;
-o-animation:qrMove 1s 9s forwards;
}
.qr img { width: 100%;}

@media ( max-width: 1280px ){
	.lan { width: 80%; left: 10%; }
	.qr { width: 14%; left: 43%;}
}

@media ( max-width:750px ){
	.lan .btn { width: 38%; }
	.lan .line { width: 10%; }
	.lan .lineCenter { width: 4%; }
	.qr { width: 20%; left: 40%; }
}


@keyframes bntMove
{
from {opacity:0;}
to {opacity:1;}
}

@-moz-keyframes bntMove /* Firefox */
{
from {opacity:0;}
to {opacity:1;}
}

@-webkit-keyframes bntMove /* Safari and Chrome */
{
from {opacity:0;}
to {opacity:1;}
}

@-o-keyframes bntMove /* Opera */
{
from {opacity:0;}
to {opacity:1;}
}

@keyframes qrMove
{
from {opacity:0;}
to {opacity:1;}
}

@-moz-keyframes qrMove /* Firefox */
{
from {opacity:0;}
to {opacity:1;}
}

@-webkit-keyframes qrMove /* Safari and Chrome */
{
from {opacity:0;}
to {opacity:1;}
}

@-o-keyframes qrMove /* Opera */
{
from {opacity:0;}
to {opacity:1;}
}