@charset "utf-8";
body {color: #777777;background-color: #fffffd;overflow-x:hidden; }
a {color: #777777;}
.inline_block {display: inline-block;}
.center {text-align: center;}

.banner {width: 900px;margin: 0 auto;padding-top: 18px; line-height: 50px;font-size: 16px;}
.banner .logo {background: url(../images/league.png) left center no-repeat;width: 260px;height: 50px;color: #75c24b;padding-left: 70px;}
.banner .nav a {margin: 0 10px;}
.banner .login {right: -100px;}
.banner .partingline {margin: 0 8px;}
.title span {display: inline-block;}
.title .logo {padding-top: 100px;}
.title .box {width: 1000px;margin: 0 auto;}
.title .text {padding: 40px 0 50px;}
.title .text span {background: url(../images/img04.png) 0 0 no-repeat;width: 291px;height: 44px;}
.title .text .text2 {background-position: 0 -45px;}
.title .text .text3 {background-position: 0 -89px;}
.title .text .dot {background: url(../images/img05.png) 0 0 no-repeat;width: 6px;height: 6px;vertical-align: 16px;margin: 0 20px;}
.title .titleBg1 {background: url(../images/img01.png) 0 0 no-repeat;width: 219px;height: 219px; right:12%;top: 120px;opacity: 0;animation-duration : 1s;-webkit-animation-duration : 1s;}
.title .titleBg2 {background: url(../images/img02.png) 0 0 no-repeat;width: 195px;height: 195px;left: 10%;top: 210px;opacity: 0; animation-duration : 1s;-webkit-animation-duration : 1s;animation-delay:0.4s;-webkit-animation-delay:0.4s;}
.title .titleBg3 {background: url(../images/img.png) 0 0 no-repeat;width: 123px;height: 123px;left: 16%;top: 355px;opacity: 0; animation-duration : 0.6s;-webkit-animation-duration : 0.6s;animation-delay:0.8s;-webkit-animation-delay:0.8s;}
.title .note {background: url(../images/img28.png) 0 0 no-repeat;width: 142px;height: 47px;}
.title .download {background-color: #75c24b;width: 186px;height: 29px;padding: 14px 0 14px 26px;}
.title .download span {color: #fffffd;background:url(../images/img12.png) 0 0 no-repeat;height: 29px;line-height: 28px;padding-left: 60px;font-size: 26px;}
.title .main {width: 212px;margin: 20px auto 0;}
.title .exp {color: #75c24b;margin: 100px 0 0 700px;}
.title .exp .label {font-size: 18px;}
.title .explore {border: 1px solid #75c24b;border-radius: 10px;padding: 6px 6px 6px 14px;margin: 14px 0 0 14px;}
.title .explore span {background: url(../images/img06.png) right 0 no-repeat;height: 24px;line-height: 24px; padding-right: 34px;color: #75c24b;}

.mainCon {min-width: 1000px;margin: 0 auto;}
.block {width: 943px;margin: 0 auto;color: #888989;padding-top: 120px;}
.block .space {margin-right: 30px;}
.block .desktop {background: url(../images/img07.png) 0 0 no-repeat;height: 773px;}
.block .desktop .virus {left: 50%;top: 102px;}
.block .desktop .virus1 {background: url(../images/img35.png) 0 0 no-repeat;width: 85px;height: 88px;margin-left: -290px;}
.block .desktop .virus2 {background: url(../images/img36.png) 0 0 no-repeat;width: 63px;height: 59px;margin-left: 240px;top: 100px;}
.block .desktop .virus3 {background: url(../images/img37.png) 0 0 no-repeat;width: 90px;height: 78px;margin-left: -386px;top: 224px;}
.block .desktop .virus4 {background: url(../images/img38.png) 0 0 no-repeat;width: 94px;height: 90px;margin-left: 264px;top: 282px;}
.block .desktop .virus5 {background: url(../images/img39.png) 0 0 no-repeat;width: 49px;height: 43px;margin-left: -268px;top: 375px;}
.block .desktop .shield {background: url(../images/img08.png) 0 0 no-repeat;width: 79px;height: 82px;top: 38%;left: 50%;margin: -41px 0 0 -39px;}
.block .desktop .circle {background: url(../images/img10.png) 0 0 no-repeat;width: 430px;height: 431px;margin: 0 auto;top: 74px;}
.block .desktop .bg {background: url(../images/img34.png) 0 0 no-repeat; width: 878px;height: 455px;top: 32px;left: 34px;}
.block .logo {background: url(../images/logo02.png) 0 0 no-repeat;width: 240px;height: 39px;bottom: 266px;left: 80px;}
.block .desktop .scan {background: url(../images/img09.png) 0 0 no-repeat;width: 214px;height:212px;top: 78px;left: 258px;}

.block p {line-height: 28px;}
.block .subtitle h1 {font-size: 28px;margin-bottom: 40px;font-weight: normal;}
.block .subtitle {margin-bottom: 44px;}

.block01 {padding-top: 212px;width: 1000px;}
.block01 .resource {background: url(../images/img11.png) center center no-repeat;width: 911px; height: 507px;margin: 0 auto;text-align: left;}
.block01 .resource .apps {margin: 42px 36px 0;width: 840px;height: 387px;}
.block01 .resource .container {top: 0;left: 0;}
.block01 .resource .container .items {width: 840px;height: 387px;}
.block01 .resource .btn {background: url(../images/img44.png) center center no-repeat;width:89px;height: 26px;bottom: 40px;left: 50%;margin-left: -44px;padding-left: 14px;}
.block01 .resource .btn a {display: inline-block; background: url(../images/img45.png) center center no-repeat;width: 20px;height: 20px;line-height: 20px;margin: 3px 8px;}
.block01 .resource .btn .active {background-image: url(../images/img46.png);}
.block01 .resource .bg {background: url(../images/img32.png) center center no-repeat;height: 100%;}
.block01 .resource .item {margin: 0 28px 4px;width: 84px;}
.block01 .resource .item p {line-height: 16px;font-size: 12px;margin-top: 4px;height: 32px;}
.block01 .resource img {display: block;margin: 0 auto;width: 54px;height: 54px;}

.block01 .logo {bottom: 24px;left: 40px;}
.coloured {background: url(../images/img30.png) center center no-repeat;height: 1090px;min-width: 1000px; width: 100%;top: 1350px;left: 0;z-index: -1;}
.coloured01 {background-image: url(../images/img31.png);top: 3250px;}
.clock {background: url(../images/img29.png) 0 0 no-repeat;height: 742px;}
.clock .game {background: #fff url(../images/img40.png) center center no-repeat;width:876px;height: 484px;top: 34px;left: 34px;}
.clock .bg {background: #fff url(../images/img27.png);opacity: 0;}
.clock .alarm {background:url(../images/img33.png) center center no-repeat;top:42%;left: 50%;margin: -184px 0 0 -170px;width:340px;height: 369px;opacity: 1;opacity: 0;}
.clock .minutes {background:url(../images/img42.png) center center no-repeat;width:25px;height: 125px;top: 40%;left: 50%;margin: -62px 0 0 -12px;}
.clock .hours {background:url(../images/img43.png) center center no-repeat;width:24px;height: 96px;top: 48%;left: 50%;margin: -62px 0 0 -12px;}
.clock .note {color: #1991d1;top: 64px;left: 50%;margin-left: -140px;font-size: 28px;opacity: 0;}

.block02 {padding-top: 240px;}
.report {background: url(../images/img58.png) center center no-repeat;width: 851px; height: 510px;margin: 0 auto;}
.report .cont {margin-left: 30px;}
.report .title {color: #fff;font-size: 30px;line-height: 34px;text-align: left;margin: 26px 0 46px;}
.report .record {margin-left: 90px;}
.report .record .websites {margin-top: 2px;}
.report .record .websites p {text-indent: 40px;line-height: 42px;}
.report .record .websites p span {margin-right: 20px;}
.report .record p {text-align: left;}
.report .record .note {color: #ed651b;font-size: 22px;}
.report .re01 {margin-top: 20px;}
.report .re01 .note {color: #54c11a;}
.report .ico {top: 220px;right: 212px;background: url(../images/img59.png) center center no-repeat;width: 72px;height: 82px;}
.report .point {top: 270px;right: 218px;transform:translate(0,0) rotate(-10deg);-webkit-transform:translate(0,0) rotate(-10deg);background: url(../images/img57.png) center center no-repeat;width: 30px;height: 40px;}
.report .stamp {top: 216px;left: 310px; background: url(../images/img60.png) center center no-repeat;width: 127px;height: 70px;opacity: 0;}
.unit {width: 360px;margin: 0 auto 100px;}
.unit p {line-height: 30px;font-size: 16px;color: #353839;}
.unit .list {margin-left: 20px;}

.block03{padding-top: 208px;}

.bottom {width: 1010px;text-align: center;margin: 0 auto;padding: 20px 0;border-top: 1px solid #ccc;}
.bottom .link a {padding:0 10px;border-right: 1px solid #232323;}
.bottom a:nth-last-of-type(1) {border-right: none;}.copyright span {font-size: 12px;}
.bottom .qq {display: block;float: left; padding-left: 24px;margin-right: 9px;color: #666; text-decoration: none;background: url(../images/qq_icon.png) left 10px no-repeat;}
.bottom .email {display: block;float: left;padding-left: 20px;background: url(../images/mail_icon.png) left 11px no-repeat;margin-right: 9px;color: #666;text-decoration: none;}
.bottom .weibo  {display: block;float: left;padding-left: 23px;background: url(../images/weibo_icon.png) left 10px no-repeat;margin-right: 9px;color: #666;text-decoration: none;}
.bottom .phone {display: block;float: left;padding-left: 20px;background: url(../images/phone_icon.png) left 11px no-repeat;color: #666;}	    	   	
.bottom .foot_contact {margin: 0 auto;}
.bottom .foot_contact a,.foot_contact span {height: 35px;line-height: 24px;}
.bottom .interval {margin-right: 10px;}
.bottom a {color: #232323;text-decoration: none;}
.bottom img {vertical-align: top;margin-right: 10px;}
.bottom p {margin: 1em 0;}

.dialog .close {color: #fff;font-size: 40px;position: absolute;top: 0;right: 0;line-height: 32px;}
.dialog .bg {background: #000;opacity: 0.6;filter:alpha(opacity = 60); position: absolute;height: 100%;width: 100%;top: 0;left: 0;}
.dialog .fixed {position: fixed;top: 50%;left: 50%;margin: -300px 0 0 -300px;}
.dialog .con {width: 600px;height: 600px;background: url(../images/dialog.png) center center no-repeat;}
.dialog .text  {color: #fff;text-align: center;width: 396px;position: absolute;top: 428px;left: 95px;}
.dialog .text a {color: #fff;display: inline-block;width: 130px;height: 40px;line-height: 40px;margin-top: 44px;font-size: 16px;
        background-color: #c95c5f;}

.clockInit {
	-webkit-transform:rotate(0);
	transform:rotate(0);
	-webkit-transform-origin: center 115px;
	transform-origin: center 115px;
}
.clockInit01 {
	-webkit-transform:rotate(-90deg);
	transform:rotate(-90deg);
	-webkit-transform-origin: center 86px;
	transform-origin: center 86px;
}
.animation {
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.circle {
	-webkit-animation-name:circle;
	animation-name:circle;
}
@keyframes circle {
	0% {
		-webkit-transform:scale(0);
		transform:scale(0);
		opacity: 0;
	}
	100% {
		-webkit-transform:none;
		transform:none;
		opacity: 1;
	}
}
@-webkit-keyframes circle {
	0% {
		-webkit-transform:scale(0);
		transform:scale(0);
		opacity: 0;
	}
	100% {
		-webkit-transform:none;
		transform:none;
		opacity: 1;
	}
}
.scan {
	-webkit-animation: scan 5s linear 0s infinite both;
    animation: scan 5s linear 0s infinite both;
    -webkit-transform-origin:right bottom;
    transform-origin:right bottom;
}
@keyframes scan {
	0% {
		-webkit-transform:rotate(0);
		transform:rotate(0);
	}
	100% {
		-webkit-transform:rotate(-360deg);
		transform:rotate(-360deg);
	}
}
@-webkit-keyframes scan {
	0% {
		-webkit-transform:rotate(0);
		transform:rotate(0);
	}
	100% {
		-webkit-transform:rotate(-360deg);
		transform:rotate(-360deg);
	}
}
.virusAnimation {
    -webkit-animation: virus 2s ease-in 0s infinite both;
    animation: virus 2s ease-in 0s infinite both;
}
@keyframes virus {
	0% {
		-webkit-transform:translate(-80px,-80px);
		transform:translate(-80px,-80px);
        opacity: 0;
	}
    50% {
    	-webkit-transform:translate(0px,0px);
        transform:translate(0px,0px);
        opacity: 1;
    }
    100% {
    	-webkit-transform:translate(-80px,-80px);
        transform:translate(-80px,-80px);
        opacity: 0;
    }
}
@-webkit-keyframes virus {
	0% {
		-webkit-transform:translate(-80px,-80px);
		transform:translate(-80px,-80px);
        opacity: 0;
	}
    50% {
    	-webkit-transform:translate(0px,0px);
        transform:translate(0px,0px);
        opacity: 1;
    }
    100% {
    	-webkit-transform:translate(-80px,-80px);
        transform:translate(-80px,-80px);
        opacity: 0;
    }
}
.virusAnimation01 {
    -webkit-animation: virus01 2s ease-in 0.6s infinite both;
    animation: virus01 2s ease-in 0.6s infinite both;
}
@keyframes virus01 {
	0% {
		-webkit-transform:translate(80px,-80px);
		transform:translate(80px,-80px);
        opacity: 0;
	}
    50% {
    	-webkit-transform:translate(-20px,20px);
        transform:translate(-20px,20px);
        opacity: 1;
    }
    100% {
    	-webkit-transform:translate(80px,-80px);
        transform:translate(80px,-80px);
        opacity: 0;
    }
}
@-webkit-keyframes virus01 {
	0% {
		-webkit-transform:translate(80px,-80px);
		transform:translate(80px,-80px);
        opacity: 0;
	}
    50% {
    	-webkit-transform:translate(-20px,20px);
        transform:translate(-20px,20px);
        opacity: 1;
    }
    100% {
    	-webkit-transform:translate(80px,-80px);
        transform:translate(80px,-80px);
        opacity: 0;
    }
}
.virusAnimation02 {
    -webkit-animation: virus02 2s ease-in 0.4s infinite both;
    animation: virus02 2s ease-in 0.4s infinite both;
}
@keyframes virus02 {
	0% {
		-webkit-transform:translate(-60px,0);
		transform:translate(-60px,0);
        opacity: 0;
	}
    50% {
    	-webkit-transform:translate(40px,0);
        transform:translate(40px,0);
        opacity: 1;
    }
    100% {
    	-webkit-transform:translate(-60px,0);
        transform:translate(-60px,0);
        opacity: 0;
    }
}
@-webkit-keyframes virus02 {
	0% {
		-webkit-transform:translate(-60px,0);
		transform:translate(-60px,0);
        opacity: 0;
	}
    50% {
    	-webkit-transform:translate(40px,0);
        transform:translate(40px,0);
        opacity: 1;
    }
    100% {
    	-webkit-transform:translate(-60px,0);
        transform:translate(-60px,0);
        opacity: 0;
    }
}
.virusAnimation03 {
    -webkit-animation: virus03 2s ease-in 0.7s infinite both;
    animation: virus03 2s ease-in 0.7s infinite both;
}
@keyframes virus03 {
	0% {
		-webkit-transform:translate(80px,80px);
		transform:translate(80px,80px);
        opacity: 0;
	}
    50% {
    	-webkit-transform:translate(-20px,20px);
        transform:translate(-20px,20px);
        opacity: 1;
    }
    100% {
    	-webkit-transform:translate(80px,80px);
        transform:translate(80px,80px);
        opacity: 0;
    }
}
@-webkit-keyframes virus03 {
	0% {
		-webkit-transform:translate(80px,80px);
		transform:translate(80px,80px);
        opacity: 0;
	}
    50% {
    	-webkit-transform:translate(-20px,20px);
        transform:translate(-20px,20px);
        opacity: 1;
    }
    100% {
    	-webkit-transform:translate(80px,80px);
        transform:translate(80px,80px);
        opacity: 0;
    }
}
.virusAnimation04 {
    -webkit-animation: virus04 2s ease-in 0.4s infinite both;
    animation: virus04 2s ease-in 0.4s infinite both;
}
@keyframes virus04 {
	0% {
		-webkit-transform:translate(-80px,80px);
		transform:translate(-80px,80px);
        opacity: 0;
	}
    50% {
    	-webkit-transform:translate(0,0);
        transform:translate(0,0);
        opacity: 1;
    }
    100% {
    	-webkit-transform:translate(-80px,80px);
        transform:translate(-80px,80px);
        opacity: 0;
    }
}
@-webkit-keyframes virus04 {
	0% {
		-webkit-transform:translate(-80px,80px);
		transform:translate(-80px,80px);
        opacity: 0;
	}
    50% {
    	-webkit-transform:translate(0,0);
        transform:translate(0,0);
        opacity: 1;
    }
    100% {
    	-webkit-transform:translate(-80px,80px);
        transform:translate(-80px,80px);
        opacity: 0;
    }
}
.bgAni {
    -webkit-animation: textShow 2s ease-in 1.4s normal both;
    animation: textShow 2s ease-in 1.4s normal both;
}
.hourkAni {
    -webkit-animation: hourkAni 3s ease-in 0s normal both;
    animation: hourkAni 3s ease-in 0s normal both;
}
@keyframes hourkAni {
	0% {
		-webkit-transform:rotate(-90deg);
		transform:rotate(-90deg);
	}
    100% {
    	-webkit-transform:rotate(0);
        transform:rotate(0);
    }
}
@-webkit-keyframes hourkAni {
	0% {
		-webkit-transform:rotate(-90deg);
		transform:rotate(-90deg);
	}
    100% {
    	-webkit-transform:rotate(0);
        transform:rotate(0);
    }
}
.minutekAni {
    -webkit-animation: minutekAni 3s ease-in-out .5s normal both;
    animation: minutekAni 3s ease-in-out .5s normal both;
}
@keyframes minutekAni {
	0% {
		-webkit-transform:rotate(0);
		transform:rotate(0);
	}
    100% {
    	-webkit-transform:rotate(720deg);
        transform:rotate(720deg);
    }
}
@-webkit-keyframes minutekAni {
	0% {
		-webkit-transform:rotate(0);
		transform:rotate(0);
	}
    100% {
    	-webkit-transform:rotate(720deg);
        transform:rotate(720deg);
    }
}
.alarmAni {
	-webkit-animation: alarmAni 4s ease-in 0s normal both;
    animation: alarmAni 4s ease-in 0s normal both;
}
@keyframes alarmAni {
	0% {
		opacity: 0;
	}
	94% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	95% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	96% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	97% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	98% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	99% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
    100% {
    	-webkit-transform: rotate(0deg);
    	transform: rotate(0deg);
    	opacity: 1;
    }
}
@-webkit-keyframes alarmAni {
	0% {
		opacity: 0;
	}
	94% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	95% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	96% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	97% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	98% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	99% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
    100% {
    	-webkit-transform: rotate(0deg);
    	transform: rotate(0deg);
    	opacity: 1;
    }
}
.textShow {
	-webkit-animation: textShow .5s ease-in 4s normal both;
    animation: textShow .5s ease-in 4s normal both;
}
@keyframes textShow {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes textShow {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.pointAni {
	-webkit-animation: point .8s ease-in 0s normal both;
    animation: point .8s ease-in 0s normal both;
}
@keyframes point {
	0% {
		-webkit-transform:translate(0px,0px) rotate(-10deg);
		transform:translate(0px,0px) rotate(-10deg);
	}
	50% {
		-webkit-transform:translate(-16px,-16px) rotate(-10deg);
		transform:translate(-16px,-16px) rotate(-10deg);
	}
	100% {
		-webkit-transform:translate(0px,0px) rotate(-10deg);
		transform:translate(0px,0px) rotate(-10deg);
	}
}
@-webkit-keyframes point {
	0% {
		-webkit-transform:translate(0px,0px) rotate(-10deg);
		transform:translate(0px,0px) rotate(-10deg);
	}
	50% {
		-webkit-transform:translate(-16px,-16px) rotate(-10deg);
		transform:translate(-16px,-16px) rotate(-10deg);
	}
	100% {
		-webkit-transform:translate(0px,0px) rotate(-10deg);
		transform:translate(0px,0px) rotate(-10deg);
	}
}
.icoAni {
	-webkit-animation: ico .4s ease-in .3s normal both;
    animation: ico .4s ease-in .3s normal both;
}
@keyframes ico {
	0% {
		-webkit-transform:scale(1);
		transform:scale(1);
	}
	50% {
		-webkit-transform:scale(0.95);
		transform:scale(0.95);
	}
	100% {
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}
@-webkit-keyframes ico {
	0% {
		-webkit-transform:scale(1);
		transform:scale(1);
	}
	50% {
		-webkit-transform:scale(0.95);
		transform:scale(0.95);
	}
	100% {
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}
.stampAni {
	-webkit-animation: stamp .4s ease-in 1s normal both;
    animation: stamp .4s ease-in 1s normal both;
}
@keyframes stamp {
	0% {
		-webkit-transform:scale(1.4);
		transform:scale(1.4);
		opacity: 0;
	}
	100% {
		-webkit-transform:scale(1);
		transform:scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes stamp {
	0% {
		-webkit-transform:scale(1.4);
		transform:scale(1.4);
		opacity: 0;
	}
	100% {
		-webkit-transform:scale(1);
		transform:scale(1);
		opacity: 1;
	}
}
.conAni {
	-webkit-animation: conAni .6s ease-in-out 0s normal both;
    animation: conAni .6s ease-in-out 0s normal both;
}
@keyframes conAni {
	0% {
		-webkit-transform:scale(1);
		transform:scale(1);
        opacity: 1;
	}
    50% {
        -webkit-transform:scale(1.1);
        transform:scale(1.1);
        opacity: 0.8;
    }
	100% {
		-webkit-transform:scale(1);
		transform:scale(1;
        opacity: 1;
	}
}
@-webkit-keyframes conAni {
    0% {
        -webkit-transform:scale(1);
        transform:scale(1);
        opacity: 1;
    }
    50% {
        -webkit-transform:scale(1.1);
        transform:scale(1.1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform:scale(1);
        transform:scale(1;
        opacity: 1;
    }
}