/*GuGongJQZ.css 2017‎年‎12‎月‎21‎日，‏‎10:41:42*/








.webgl-content .iniDiv { 
    position:absolute; /*background-image:url('http://www.shaderealm.com/test/loadingbg3.jpg');*/
    background-color:white;
    width:100%;
    height:100%;
    opacity:1;
    display: block;
    background-size:100% 100%;
    overflow:visible;
    z-index:10    

}

.webgl-content .iniDiv .iniImg { 
    position:absolute; 
    background-image:none;
    right:50%;
    width:140%;
    height:103%;
    -webkit-transform: translate(50%, 0); 
    transform: translate(50%, 0);

    /*overflow:visible;*/
    background-size:100% 100%;
    background-position-x:center;
    background-position-y:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-clip:initial;
    z-index:11    ;

}

/*.webgl-content .iniDiv .img1 { 
    position:absolute; 
    background-image:none;
    right:50%;
    width:140%;
    height:103%;
    -webkit-transform: translate(50%, 0); 
    transform: translate(50%, 0);
    display: block;
    background-size:100% 100%;
    z-index:15    

}*/

#loadingImage{
    position:absolute; 
    background-color:transparent; 
    
    opacity:1.0;
    bottom:80px;
    right:80px;
    width:160px;
    height:160px;
    display: block;
    background-size:100% 100%;
    /*-webkit-transform: translate(-50px, -50px); 
    transform: translate(-50px, -50px);*/
    z-index:19
}

#loadingImageTest{
    position:absolute; 
    background-color:transparent;
    width:100%;
    height:100%;
    background-size:100% 100%;
    z-index:33;

}
@keyframes testAnimation{
    0% {background-image:url("http://www.shaderealm.com/test/img/spr.jpg")}
    25% {background-image:url("http://www.shaderealm.com/test/img/sum.jpg")}
    50% {background-image:url("http://www.shaderealm.com/test/img/aut.jpg")}
    100% {background-image:url("http://www.shaderealm.com/test/img/win.jpg")}
}


.body{
    background-color:brown;
    border:0;
    margin:0;
    padding:0;
    width:100%;
    height:100%;    
}

#enterButton{
    position:absolute; 
    background-color:transparent;
    background-image:url("img/enter_btn.png");
    opacity:0;
    bottom:80px;
    right:80px;
    width:160px;
    height:160px;
    display: block;
    background-size:100% 100%;
    /*-webkit-transform: translate(-50px, -50px); 
    transform: translate(-50px, -50px);*/
        /*-webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);*/
    z-index:63;
    transition-duration:0.3s;
}

#enterButton:hover{
        -webkit-transform: scale(1.1,1.1); 
    transform: scale(1.1,1.1);
}

#enterButton:active{
            -webkit-transform: scale(1,1); 
    transform: scale(1,1);
}

#enterButton:focus{
    outline:0 !important;
}

#codeButton{
    position:absolute; 
    background-color:transparent;
    background-image:url("img/information_icon.png");
    opacity:1;
    top:30px;
    left:30px;
    width:50px;
    height:50px;
    display: block;
    background-size:100% 100%;
    /*-webkit-transform: translate(-50px, -50px); 
    transform: translate(-50px, -50px);*/
        /*-webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);*/
    z-index:65;
    transition-duration:0.3s;
}


#sharePanel { 
    position:absolute; /*background-image:url('http://www.shaderealm.com/test/loadingbg3.jpg');*/    
    background-image:url("img/information_pc.jpg");
    background-color:rgba(0,0,0,0.6);
    right:50%;
    width:150%;
    height:100%;
    opacity:0;
    display: none;
    background-size:100% 100%;
    overflow:hidden;
        -webkit-transform: translate(50%, 0); 
    transform: translate(50%, 0);



        background-size:100% 100%;
    background-position-x:center;
    background-position-y:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-clip:initial;

    z-index:11;
}

#shareText { 
    position:absolute;
    top: 50%; 
    /*left: 50%;*/ 
    -webkit-transform: translate(0%, -50%); 
    transform: translate(0%, -50%);
    background-color:transparent;
    color:white;    
    width:100%;
    height:300px;
    /*opacity:0.6;*/
    display: block;
    text-align:center;
    z-index:15;   
    font-family:FangSong;
    font-size:40px;
}

#shareCode { 
    position:absolute; 
    top: 56%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);
    background-color:white;
    width:120px;
    height:120px;
    /*opacity:0.6;*/
    display: block;
    background-size:100% 100%;
    overflow:hidden;
    z-index:15;
}



@keyframes opacity0_1
{
    from{opacity:0;}
    to{opacity:1;}

}

@keyframes opacity1_0
{
    from{opacity:1;}
    to{opacity:0;}
}

.show
{
    animation:opacity0_1 1s;
    -webkit-animation:opacity0_1 1s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}

.hide
{
    animation:opacity1_0 1s;
    -webkit-animation:opacity1_0 1s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;



}




.backgroundDiv{
        position:absolute;
    background-color:white;

    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    opacity:0.39;
    background-size:100% 100%;
    z-index:0;
    background-image:url("img/loading_bg_pc.jpg");

}