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 top;background-size:100%;position:relative;overflow:hidden}

.logo{width:28%;height:auto;position:relative;top:0;left:50%;z-index:10;margin-left: -14%}
.logo .logoin{width: 100%;position: relative;}


.main .logo .logoin{display:block;width:100%;position:relative;pointer-events: none;}
.main .logo .logoin img{width:100%;position:absolute;top:0;left:0}
.main .logo .logoin .logo1{opacity:1;position: relative}
.main .logo .logoin .logo2{opacity:0;z-index:2}
.main .logo .logoin .logo2{animation:logo ease-in infinite 3s}
@keyframes logo{
    0%{opacity:0}
    50%{opacity:1}
    100%{opacity:0}
}




.logo .jrgwbox{    width: 100%;
    position: absolute;
    z-index: 2;
    top: 77%;}
.logo .jrgwbox .jrgw{display: block;width: 42%;margin: auto;}
.logo .jrgwbox .jrgw img{width: 100%}


.logo .jrgwbox .jrgw:hover {
    filter: drop-shadow(rgba(162, 125, 255, 0.72) 0 0 7px)
}

@keyframes shiny_s {
    50% {opacity:.3;}
    0%,100% {opacity:0;}
}
@keyframes shake-horizontal {
    91% {transform: translateX(-5px); opacity:.7;}
    92% {transform: translateX(3px);}
    93% {transform: translateX(1px);}
    94% {transform: translateX(6px);}
    95% {transform: translateX(-2px); opacity:1;}
    96% {transform: translateX(7px);}
    97% {transform: translateX(3px);}
    98% {transform: translateX(-7px);}
    99% {transform: translateX(1px); opacity:.7;}
    0%, 90%, 100% {transform: translateX(0); opacity:0;}
}

.wzm{position:absolute;z-index:8;width:42%;left:50%;top:40%;margin-left: -21%;pointer-events: none;}
.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:100%;height:100%}
.rw .rwin{position:relative;width:100%;height:100%}
.rw .rwin img{max-width:100%;position:absolute;opacity: 0;pointer-events: none}

.rw .rwin img.rw1{
    z-index:1;bottom:43%;height:58%;left: -1.8%;
    animation-name: rwnormal;
    animation-duration: 300ms;
    animation-delay: 0ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rw .rwin img.rw2{
    z-index:1;bottom:5%;height:82%;left: 5%;
    animation-name: rwnormal;
    animation-duration: 300ms;
    animation-delay: 150ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rw .rwin img.rw3{
    z-index:1;bottom:4%;height:67%;left: -4%;
    animation-name: rw;
    animation-duration: 600ms;
    animation-delay: 300ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rw .rwin img.rw4{
    z-index:1;bottom:20%;height:85%;right: -10%;
    animation-name: rwnormal;
    animation-duration: 300ms;
    animation-delay: 0ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rw .rwin img.rw5{
    z-index:1;bottom:52%;height:40%;right: 8%;
    animation-name: rwnormal;
    animation-duration: 300ms;
    animation-delay: 0ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rw .rwin img.rw6{
    z-index:1;bottom:5%;height:70%;right: -8%;
    animation-name: rwnormal;
    animation-duration: 300ms;
    animation-delay: 150ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rw .rwin img.rw7{
    z-index:1;bottom:-2%;height:66%;right: -8%;
    animation-name: rwnormal;
    animation-duration: 300ms;
    animation-delay: 150ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rw .rwin img.rw8{
    z-index:1;bottom:-2%;height:50%;right: -14%;
    animation-name: rw;
    animation-duration: 300ms;
    animation-delay: 300ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes rwnormal{
    0%{opacity:0;transform:scale(0)}
    20%{opacity:1}
    100%{transform:scale(1);opacity:1}
}

@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:81px;margin:auto;background-image:url(../images/bta1.png);background-repeat:no-repeat;background-position:center center;background-size:100%;color:#d8be96;font-size:24px;font-weight:bold}
.s5 .item span:hover{background-image:url(../images/bta2.png);color:#fcd56a}
.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:160px;height:44px;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:#d8be96;line-height:44px}
.s5 .item .slide a:hover{color:#fcd56a;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: 100%;
    position: absolute;bottom: 0;z-index: 8;
    left: 0;
    background-image: url(../images/sz.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}


/*.bottombg .btbg.btbg1{
    animation: topbgones 6s linear infinite;
}
.bottombg .btbg.btbg2{
    animation: topbgones2 6s linear infinite;
}*/

@keyframes topbgones{
    0%{transform:translateX(0)}
    to{transform:translateX(100%)}
}
@keyframes topbgones2{
    0%{transform:translateX(-100%)}
    to{transform:translateX(0)}
}

.canvasbox{position:fixed;width:100%;height:100%;z-index:6;top:0;left:0;pointer-events: none}
.canvasbox img{opacity: 0}
.canvasbox canvas {width:100%;height:100%;position: absolute;top: 0;left: 0;width: 100%;height: 100%}

/*.canvas1{
    width:100%;height:100%;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
    pointer-events: none;
    z-index: 10;
}*/


.canvas1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 4;
    background: transparent;
}








/* 背景轮播容器 */
.background-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}

/* 背景图片层 */
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}



/* 创建精确的23帧动画，每张显示0.06秒 */
/* 总动画时间：23 * 0.06 = 1.38秒 */

/* 第一张图片动画 */
.bg-1 {
    animation: bg1-fade 1.38s linear infinite;
}

@keyframes bg1-fade {
    0%, 4.3478% { opacity: 1; }
    4.3479%, 100% { opacity: 0; }
}

/* 第二张图片动画 */
.bg-2 {
    animation: bg2-fade 1.38s linear infinite;
}

@keyframes bg2-fade {
    0%, 4.3478% { opacity: 0; }
    4.3479%, 8.6957% { opacity: 1; }
    8.6958%, 100% { opacity: 0; }
}

/* 第三张图片动画 */
.bg-3 {
    animation: bg3-fade 1.38s linear infinite;
}

@keyframes bg3-fade {
    0%, 8.6957% { opacity: 0; }
    8.6958%, 13.0435% { opacity: 1; }
    13.0436%, 100% { opacity: 0; }
}

/* 第四张图片动画 */
.bg-4 {
    animation: bg4-fade 1.38s linear infinite;
}

@keyframes bg4-fade {
    0%, 13.0435% { opacity: 0; }
    13.0436%, 17.3913% { opacity: 1; }
    17.3914%, 100% { opacity: 0; }
}

/* 第五张图片动画 */
.bg-5 {
    animation: bg5-fade 1.38s linear infinite;
}

@keyframes bg5-fade {
    0%, 17.3913% { opacity: 0; }
    17.3914%, 21.7391% { opacity: 1; }
    21.7392%, 100% { opacity: 0; }
}

/* 第六张图片动画 */
.bg-6 {
    animation: bg6-fade 1.38s linear infinite;
}

@keyframes bg6-fade {
    0%, 21.7391% { opacity: 0; }
    21.7392%, 26.0870% { opacity: 1; }
    26.0871%, 100% { opacity: 0; }
}

/* 第七张图片动画 */
.bg-7 {
    animation: bg7-fade 1.38s linear infinite;
}

@keyframes bg7-fade {
    0%, 26.0870% { opacity: 0; }
    26.0871%, 30.4348% { opacity: 1; }
    30.4349%, 100% { opacity: 0; }
}

/* 第八张图片动画 */
.bg-8 {
    animation: bg8-fade 1.38s linear infinite;
}

@keyframes bg8-fade {
    0%, 30.4348% { opacity: 0; }
    30.4349%, 34.7826% { opacity: 1; }
    34.7827%, 100% { opacity: 0; }
}

/* 第九张图片动画 */
.bg-9 {
    animation: bg9-fade 1.38s linear infinite;
}

@keyframes bg9-fade {
    0%, 34.7826% { opacity: 0; }
    34.7827%, 39.1304% { opacity: 1; }
    39.1305%, 100% { opacity: 0; }
}

/* 第十张图片动画 */
.bg-10 {
    animation: bg10-fade 1.38s linear infinite;
}

@keyframes bg10-fade {
    0%, 39.1304% { opacity: 0; }
    39.1305%, 43.4783% { opacity: 1; }
    43.4784%, 100% { opacity: 0; }
}

/* 第十一张图片动画 */
.bg-11 {
    animation: bg11-fade 1.38s linear infinite;
}

@keyframes bg11-fade {
    0%, 43.4783% { opacity: 0; }
    43.4784%, 47.8261% { opacity: 1; }
    47.8262%, 100% { opacity: 0; }
}

/* 第十二张图片动画 */
.bg-12 {
    animation: bg12-fade 1.38s linear infinite;
}

@keyframes bg12-fade {
    0%, 47.8261% { opacity: 0; }
    47.8262%, 52.1739% { opacity: 1; }
    52.1740%, 100% { opacity: 0; }
}

/* 第十三张图片动画 */
.bg-13 {
    animation: bg13-fade 1.38s linear infinite;
}

@keyframes bg13-fade {
    0%, 52.1739% { opacity: 0; }
    52.1740%, 56.5217% { opacity: 1; }
    56.5218%, 100% { opacity: 0; }
}

/* 第十四张图片动画 */
.bg-14 {
    animation: bg14-fade 1.38s linear infinite;
}

@keyframes bg14-fade {
    0%, 56.5217% { opacity: 0; }
    56.5218%, 60.8696% { opacity: 1; }
    60.8697%, 100% { opacity: 0; }
}

/* 第十五张图片动画 */
.bg-15 {
    animation: bg15-fade 1.38s linear infinite;
}

@keyframes bg15-fade {
    0%, 60.8696% { opacity: 0; }
    60.8697%, 65.2174% { opacity: 1; }
    65.2175%, 100% { opacity: 0; }
}

/* 第十六张图片动画 */
.bg-16 {
    animation: bg16-fade 1.38s linear infinite;
}

@keyframes bg16-fade {
    0%, 65.2174% { opacity: 0; }
    65.2175%, 69.5652% { opacity: 1; }
    69.5653%, 100% { opacity: 0; }
}

/* 第十七张图片动画 */
.bg-17 {
    animation: bg17-fade 1.38s linear infinite;
}

@keyframes bg17-fade {
    0%, 69.5652% { opacity: 0; }
    69.5653%, 73.9130% { opacity: 1; }
    73.9131%, 100% { opacity: 0; }
}

/* 第十八张图片动画 */
.bg-18 {
    animation: bg18-fade 1.38s linear infinite;
}

@keyframes bg18-fade {
    0%, 73.9130% { opacity: 0; }
    73.9131%, 78.2609% { opacity: 1; }
    78.2610%, 100% { opacity: 0; }
}

/* 第十九张图片动画 */
.bg-19 {
    animation: bg19-fade 1.38s linear infinite;
}

@keyframes bg19-fade {
    0%, 78.2609% { opacity: 0; }
    78.2610%, 82.6087% { opacity: 1; }
    82.6088%, 100% { opacity: 0; }
}

/* 第二十张图片动画 */
.bg-20 {
    animation: bg20-fade 1.38s linear infinite;
}

@keyframes bg20-fade {
    0%, 82.6087% { opacity: 0; }
    82.6088%, 86.9565% { opacity: 1; }
    86.9566%, 100% { opacity: 0; }
}

/* 第二十一张图片动画 */
.bg-21 {
    animation: bg21-fade 1.38s linear infinite;
}

@keyframes bg21-fade {
    0%, 86.9565% { opacity: 0; }
    86.9566%, 91.3043% { opacity: 1; }
    91.3044%, 100% { opacity: 0; }
}

/* 第二十二张图片动画 */
.bg-22 {
    animation: bg22-fade 1.38s linear infinite;
}

@keyframes bg22-fade {
    0%, 91.3043% { opacity: 0; }
    91.3044%, 95.6522% { opacity: 1; }
    95.6523%, 100% { opacity: 0; }
}

/* 第二十三张图片动画 */
.bg-23 {
    animation: bg23-fade 1.38s linear infinite;
}

@keyframes bg23-fade {
    0%, 95.6522% { opacity: 0; }
    95.6523%, 100% { opacity: 1; }
}