html, body {width: 100%; height: 100%;}
.wall {
    background: radial-gradient(circle, #8B0000, #4B0000);
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* 添加光斑效果 */
.wall::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255,165,0,0.15) 0%, transparent 50%),
                radial-gradient(circle at 20% 30%, rgba(255,69,0,0.1) 0%, transparent 40%),
                radial-gradient(circle at 80% 20%, rgba(255,215,0,0.12) 0%, transparent 35%),
                radial-gradient(circle at 30% 70%, rgba(255,140,0,0.1) 0%, transparent 45%),
                radial-gradient(circle at 70% 60%, rgba(255,99,71,0.15) 0%, transparent 40%);
    pointer-events: none;
}

/* 添加更多种类的光点 */
.sparkle-tiny {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    animation: float-tiny 3s infinite ease-in-out;
}

.sparkle-small {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    animation: float-small 4s infinite ease-in-out;
}

.sparkle-medium {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    animation: float-medium 5s infinite ease-in-out;
}

.sparkle-large {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    animation: float-large 6s infinite ease-in-out;
    filter: blur(1px);
}

.sparkle-huge {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    pointer-events: none;
    animation: float-huge 7s infinite ease-in-out;
    filter: blur(2px);
}

.sparkle-massive {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    animation: float-massive 8s infinite ease-in-out;
    filter: blur(3px);
}

@keyframes float-tiny {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    50% { opacity: 0.6; }
    100% { transform: translateY(-80px) translateX(10px); opacity: 0; }
}

@keyframes float-small {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    50% { opacity: 0.5; }
    100% { transform: translateY(-120px) translateX(-15px); opacity: 0; }
}

@keyframes float-medium {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    50% { opacity: 0.4; }
    100% { transform: translateY(-160px) translateX(20px); opacity: 0; }
}

@keyframes float-large {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    50% { opacity: 0.3; }
    100% { transform: translateY(-200px) translateX(-25px); opacity: 0; }
}

@keyframes float-huge {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    50% { opacity: 0.2; }
    100% { transform: translateY(-240px) translateX(30px); opacity: 0; }
}

@keyframes float-massive {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    50% { opacity: 0.15; }
    100% { transform: translateY(-300px) translateX(40px); opacity: 0; }
}

.photos-wall {width:100%; height:100%;}
.messages {width: 30%;  float: left;  position: relative; top: 52px; left: 0}


/*照片墙*/
.wall .photos {
    width: 75%; 
    height: 50%; 
    float: left; 
    position: relative; 
    top: 200px;
    left: 100px; 
    padding-left: 130px;
}
.wall .photo-title {
    position: absolute;
    top: -220px;
    left: 50%;
    background: url(../img/title.png) no-repeat 0 0;
    background-size: 100% auto;
    width: 800px; 
    height: 350px;
    margin-left: -350px;
}
/*
.wall .photo-title{position: absolute; top:-137px ;left:50%; background: url(../img/title.png) no-repeat 0 0;
    background-size:380px 107px; width:380px; height: 107px; margin-left:-190px;}*/
.wall .photo-content{width:100%;height: 100%; margin:0 auto; position: relative;}
.wall .photo {position: absolute;}
.wall .photo .photo-inner{position: relative; width:100%;height: 100%;}
.wall .photo .photo-inner .img-wrap{position: absolute; top:0; left:0;}
.wall .photo .photo-inner .old{z-index: 10; opacity: 1; -webkit-transform-origin: center center;  /*-webkit-transition:all 2s linear;*/}
.wall .photo .photo-inner .new{z-index: 11; opacity: 0; -webkit-transform-origin: center center; /*-webkit-transition:all 2s linear;*/}
.wall .photo .photo-inner .show{-webkit-animation: show_photo 2s ease-in-out;}
.wall .photo .photo-inner .hide{-webkit-animation: hide_photo 2s ease-in-out;}
@-webkit-keyframes show_photo{
    0% {opacity:0;-webkit-transform:scale(0, 0);}
    100% { opacity:1;-webkit-transform:scale(1, 1);}
}
@-webkit-keyframes hide_photo{
    0% {opacity:1;}
    100% { opacity:0;}
}
/*.wall .photo .photo-inner .old{z-index: 10; opacity: 1; -webkit-transition:all 2s linear;}*/
/*.wall .photo .photo-inner .new{z-index: 11; opacity: 0; -webkit-transition:all 2s linear;}*/
/*.wall .photo .photo-inner .show{opacity: 1;}*/
/*.wall .photo .photo-inner .hide{opacity: 0;}*/

.wall .photo img {
    width: 100%; height: 100%;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.8);
}

.wall .pos-0 {top:10px; left:0;width:65px; height:65px;}
.wall .pos-1 {top:30px; left:70px;width:70px; height:70px;}
.wall .pos-2 {top:0; left:145px;width:100px;height:100px;}
.wall .pos-3 {top:30px; left:250px;width:70px; height:70px;}
.wall .pos-4 {top:55px; left:325px;width:100px;height:100px;}
.wall .pos-5 {top:70px; left:430px;width:85px;height:85px;}
.wall .pos-6{top:15px; left:520px;width:65px;height:65px;}
.wall .pos-7{top:-15px; left:595px;width:80px;height:80px;}

.wall .pos-8{top:105px; left:40px;width:80px;height:80px;}
.wall .pos-9{top:105px; left:125px;width:80px;height:80px;}
.wall .pos-10{top:105px; left:210px;width:110px;height:110px;}
.wall .pos-11{top:160px; left:325px;width:85px;height:85px;}
.wall .pos-12{top:160px; left:415px;width:80px;height:80px;}
.wall .pos-13{top:160px; left:500px;width:100px;height:100px;}
.wall .pos-14{top:85px; left:520px;width:70px;height:70px;}

.wall .pos-15{top:265px; left:-55px;width:80px;height:80px;}

.wall .pos-16{top:190px; left:30px;width:70px;height:70px;}
.wall .pos-17{top:190px; left:105px;width:100px;height:100px;}

.wall .pos-18{top:220px; left:210px;width:110px;height:110px;}

.wall .pos-19{top:250px; left:325px;width:85px;height:85px;}
.wall .pos-20{top:245px; left:415px;width:75px;height:75px;}
.wall .pos-21{top:265px; left:500px;width:85px;height:85px;}
.wall .pos-22{top:70px; left:595px;width:85px;height:85px;}
.wall .pos-23{top:160px; left:605px;width:75px;height:75px;}
.wall .pos-24{top:240px; left:605px;width:65px;height:65px;}
.wall .pos-25{top:310px; left:650px;width:60px;height:60px;}
.wall .pos-26{top:265px; left:37px;width:65px;height:65px;}
.wall .pos-27{
    top: 15px;
left: 685px;
width: 65px;
height: 65px;}
.wall .pos-28{top: -67px;
left: 685px;
width: 75px;
height: 75px;}



.wall .pos-29{top: 103px;
left: -44px;
width: 75px;
height: 75px;}
.wall .pos-30{top: -45px;
left: -81px;
width: 75px;
height: 75px;}

.wall .pos-31 {
top: 295px;
left: 105px;
width: 60px;
height: 60px;
}

.wall .pos-32 {
top: 240px;
left: 675px;
width: 65px;
height: 65px;
}

.wall .messages {width: 25%;  float: right; position: relative; top: 77px; left: 0;}
/*.wall .messages {width: 25%;float: right;position: relative;top: 80px;left: 0;}*/
/*.wall .message {  margin: 25px 35px 25px 10px;}*/
.wall .message {margin: 25px 35px 25px 50px;}
.wall .message span {line-height: 25px;color: #000000;font-size: 18px;display: inline-block;padding: 5px;margin: 0;}

.wall .message{height: auto;overflow: hidden;opacity: 1;}
.wall .message.newMsg {-webkit-animation: change_height .7s linear;}
    @-webkit-keyframes change_height{
        0% {opacity:0;height: 0;}
        100% { opacity:1;height:32px;}
    }

.wall .message .message-inner{position: relative; float:right; display: inline-block; background: #ffffff; border: 1px solid #ffffff; border-radius: 4px;margin-right: 20px;}

.wall .message .message-inner:before {content: '';width: 0;height: 0;border-width: 5px 11px 0px 11px;position: absolute;border-style: solid;border-color: transparent transparent transparent #ffffff;right: -19px;bottom: -1px;}
  
#qrcode{width:105px;height:105px;position: absolute;top:20px;left:20px;}
#qrcode img{width:100%;}
#qrcode {background: white; padding: 5px;}

.logo{color:#D13C3F;font-family: "Microsoft YaHei"; font-weight: bold; font-size: 13px; position: absolute;left:20px; bottom:20px;}