body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,button,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-family:"Microsoft YaHei"}
table{border-collapse:collapse;border-spacing:0;font-family:"Microsoft YaHei"}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var,i{font-style:normal;font-weight:normal}
ul,ol,li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%;outline:0;border:0}
a{text-decoration:none}
button,textarea{outline:0;border:0;padding:0;margin:0;-webkit-appearance:none}
html,body{width:100%;height:100%}
.footer{position:absolute;z-index:8;bottom:0;height:130px;width:100%;left:0;right:0;margin:auto}
.footer .footer-outbtm{width:100%;margin:auto;height:130px}
.footer .footer-outbtm .footer-btm{width:1200px;margin:auto;height:100%;box-sizing:border-box;padding-top:20px}
.footer .logo1{width:215px;height:77px;float:left;background:url(https://kh1.userjoy.com//images/log2.png) no-repeat center center;background-size:100%;margin-left:117px;margin-top:5px}
.footer .logo2{width:37px;height:37px;float:left;background:url(https://kh1.userjoy.com//images/log3.png) no-repeat center center;background-size:100%;margin-left:40px;margin-top:28px}
.footer .con1{float:left;color:#fff;font-size:12px;line-height:20px;width:434px;margin-left:27px;margin-top:19px}
.footer .con2{float:left;color:#fff;font-size:12px;width:252px;line-height:20px;margin-left:18px;margin-top:20px}

.main{width:100%;height:100%;background:url(../images/bg.jpg) no-repeat center center;background-size:100%;position:relative;overflow:hidden}
.logo{width:26%;height:auto;position:relative;top:3%;left:50%;z-index:10;margin-left: 6%}
.logo .logoin{width: 100%;position: relative;}
.logo .logoin img{width:100%;position:absolute;top:0;left:0}
.logo .logoin img.logo1{position: relative;}
.logo .logo1{opacity:1}
.logo .logo2{opacity:0;z-index:2}
.logo .logo2{animation:logo ease-in infinite 3s}
@keyframes logo{
0%{opacity:0}
50%{opacity:1}
100%{opacity:0}
}
.logo .jrgwbox{width: 100%;position: relative;margin-top: -6%;z-index: 2;}
.logo .jrgwbox .jrgw{display: block;width: 42%;margin: auto;}
.logo .jrgwbox .jrgw img{width: 100%}



.wzm{position:absolute;z-index:8;width:42%;left:48%;top:35%;}
.wzm img{display:block;float:left;width:48%;margin:0 1%;position:relative}
.wzm .ys1{animation-name:yd1;animation-duration:2s;animation-direction:alternate;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.wzm .ys2{animation-name:yd1;animation-duration:2.5s;animation-direction:alternate;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.wzm .ys3{animation-name:yd1;animation-duration:3s;animation-direction:alternate;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.wzm .ys4{animation-name:yd1;animation-duration:4s;animation-direction:alternate;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes yd1{
0%{transform:translateY(-10px)}
100%{transform:translateY(10px)}
}


.rw{position:absolute;z-index:5;top:0;left:0;width:60%;height:100%}
.rw .rwin{position:relative;width:100%;height:100%}
.rw .rwin img{max-width:100%;position:absolute;opacity: 0}
.rw .rwin img.rw1{z-index:3;bottom:-15%;height:90%;left: 25%;
    animation-name: rw;
    animation-duration: 2000ms;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rw .rwin img.rw2{z-index:2;bottom:20%;height:70%;left:-3%;
	animation-name: rw;
    animation-duration: 1100ms;
    animation-delay: 600ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rw .rwin img.rw3{z-index:1;bottom:35%;height:65%;left:30%;
animation-name: rw;
    animation-duration: 600ms;
    animation-delay: 200ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes rw{
0%{opacity:0;transform:scale(0)}
20%{opacity:1}
70%{opacity:1;transform:scale(1.1)}
100%{transform:scale(1);opacity:1}
}


.s5{position:absolute;z-index:9;width:60%;left:50%;transform:translateX(-50%);top:76%;height:82px}
.s5 .item{display:block;float:left;width:25%;height:82px;text-align:center;position:relative}
.s5 .item span{display:block;width:90%;height:100%;line-height:82px;margin:auto;background-image:url(../images/bta1.png);background-repeat:no-repeat;background-position:center center;background-size:100%;color:#9ee0ff;font-size:24px;font-weight:bold}
.s5 .item span:hover{background-image:url(../images/bta2.png);color:#fff}
.s5 .item .slide{position:absolute;z-index:3;width:100%;bottom:81px;left:0;display:none;opacity:0}
.s5 .item .slide a{display:block;width:171px;height:43px;background-image:url(../images/btnm1.png);background-repeat:no-repeat;background-position:center center;font-size:18px;font-weight:bold;margin:auto;text-align:center;cursor:pointer;margin-bottom:6px;color:#fff;line-height:43px}
.s5 .item .slide a:hover{color:#86dce3;background-image:url(../images/btnm2.png)}
.s5 .item:hover .slide{opacity:1;display:block;animation:logo3 1s}
@keyframes logo3{
0%{opacity:0}
100%{opacity:1}
}

.bottombg {width: 100%;height: 618px;position: absolute;bottom: 0;z-index: 6;background: url(../images/bg1.png) no-repeat center center}

.canvasbox{position:fixed;width:100%;height:100%;z-index:2;top:0;left:0}
.canvas2{position: fixed;top: 0;left: 0;z-index: 8}
.canvasbox .cavanimg {position: absolute;opacity: 0}