@charset "utf-8";

/*全局控制*/
body{margin:0;padding:0;font-size:12px;line-height:22px;font-family:"微软雅黑",Arial;-webkit-text-size-adjust:none;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,p{margin:0;padding:0;}
input,select,textarea{font-size:12px;line-height:16px;}img{border:0;}ul,li{list-style-type:none;}
a{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
.tc{text-align:center;}.tl{text-align:left;}.tr{text-align:right;}
.dis{display:block;}.undis{display:none;}
.fl{float:left;}.fr{float:right;}.cl{clear:both;}.fb{font-weight:bold;}.fnb{font-weight:200;margin-left:-1px;}
.hr_1,.hr_10{font-size:1px;line-height:1px;clear:both;}
.hr_1{height:1px;}.hr_10{height:10px;}
input[type="text"]:focus,input[type="password"]:focus,textarea:focus{outline:none;}
body,html{width: 100%;height: 100%;}

/********************* 以下(结束标识)代码请在实际开发中删除 *********************/


.jkwk{
    width: 85%;
    max-width: 340px;
    padding: 50px 35px 45px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 25px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: card-float 6s ease-in-out infinite;
}

@keyframes card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}


.xinf {
    margin-bottom: 30px;
    position: relative;
}

.xinf img {
    width: 130px;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(255, 182, 193, 0.3));
    animation: envelope-float 3s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.xinf img:hover {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 12px 24px rgba(255, 182, 193, 0.5));
}

@keyframes envelope-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(-2deg); }
    75% { transform: translateY(4px) rotate(2deg); }
}

.xkwk{
    font-size: 19px;
    color: #6b5b6e;
    line-height: 1.8;
    margin-bottom: 40px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-align: center;
    position: relative;
}

/* 文字上下装饰线 */
.xkwk::before,
.xkwk::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffb6c1, transparent);
    margin: 15px auto 0;
    opacity: 0.6;
}



/* 精美按钮设计 */
.kejw{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.kejw span{
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #ffdde1 100%);
    box-shadow: 
        0 8px 25px rgba(255, 154, 158, 0.4),
        0 0 0 0 rgba(255, 154, 158, 0.7),
        inset 0 -3px 8px rgba(255, 255, 255, 0.3);
    animation: glow-pulse 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: visible;
}

/* 按钮内部光晕 */
.kejw span::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 154, 158, 0.3), rgba(254, 207, 239, 0.3));
    z-index: -1;
    animation: ring-expand 2.5s ease-out infinite;
}

.kejw span:hover {
    transform: scale(1.12) translateY(-3px);
    box-shadow: 
        0 12px 35px rgba(255, 154, 158, 0.6),
        0 0 0 0 rgba(255, 154, 158, 0.7),
        inset 0 -3px 8px rgba(255, 255, 255, 0.3);
}

.kejw span:active {
    transform: scale(1.05);
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 
            0 8px 25px rgba(255, 154, 158, 0.4),
            0 0 0 0 rgba(255, 154, 158, 0.7),
            inset 0 -3px 8px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 
            0 8px 30px rgba(255, 154, 158, 0.5),
            0 0 0 15px rgba(255, 154, 158, 0),
            inset 0 -3px 8px rgba(255, 255, 255, 0.3);
    }
}

@keyframes ring-expand {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.kejw span a{
    color: #fff;
    font-size: 18px;          /* 增大字体 */
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;         /* 调整行高 */
    letter-spacing: 3px;      /* 增加字间距 */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);  /* 增强阴影 */
    transition: all 0.3s ease;
}


/*
.dabjr{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url(../images/bj.jpg);
    position: relative;
    top: 0;
    left:0;
    overflow: hidden;
}
*/


.kl{
    position: absolute;
    transition: all 1.5s;
}
.kl img{
    width: 100%;
}
.sr7{
    width: 80%;
    top:3%;
    left:-100%;
}

.sr5{
    width: 94%;
    bottom: 0;
    right:-100%;
}
.sr2{
    width: 80%;
    top:29%;
    left:-100%;
}
.sr1{
    width: 30%;
    top:43%;
    left:-100%;
}
.sr4{
    width: 30%;
    top:43%;
    right:-100%;
}
.sr3{
    width: 0%;
    top:50%;
    left:50%;
}
.sr6{
    width: 0%;
    bottom:0%;
    left:50%;
}
.sr8{
    width: 0%;
    min-height: 0%;
    font-size: 0px;
    top:31%;
    left:50%;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    opacity: 0;
}
#wz8 {  
    position: relative;  
    font-size: 15px;        /* ★ 文案字体大小 - 修改此值调整祝福语文字大小 */
    overflow: hidden;  
    color: #5fb7d9;         /* 文案字体颜色 - 蓝绿色 */
    line-height: 25px;      /* 行高 - 控制文字间距 */
}  
#wz8::after {  
    content: "";  
    background: url("//") no-repeat;
    background-size: 100%;
    position: absolute;  
    width: 40px;
    height: 40px;
  }
#snow{
    width: 100%;
    height: 100%;
    position: relative;
}
.flake {  
    position: absolute;  
    background: url("../images/x.png") no-repeat;
    background-size: 100%; 
}  
.flake.large {  
    width: 50px;  
    height: 50px;  
    animation: fall 15.5s infinite linear;  
}  
  
.flake.small {  
    width: 60px;  
    height: 60px;  
    animation: fall 15s infinite linear;  
}  
  
@keyframes fall {  
    0% {bottom: -10%;}  
    100% {bottom: 120%;}
}









        #div_container {
            width: 100%;
            max-width: 70ch;
        }

       .div_pure_words_bg {
            width: 100%;
            max-width: 70ch;
        }

       .div_pw_typed {
            width: 100%;
            max-width: 70ch;
        }

        #div_btn_inner {
            width: 100%;
            max-width: 70ch;
        }

       .div_is_typed {
            width: 100%;
            max-width: 70ch;
        }

       .div_is_open_bg {
            width: 100%;
            max-width: 70ch;
        }

        #sr8 {
            overflow-y: auto;
            max-height: 35vh;
            word-wrap: break-word;
            word-break: break-all;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: #ccc #f5f5f5;
            position: relative; /* 确保元素有定位属性 */
            z-index: 1; /* 确保元素层级较高 */
        }

        /* 自定义滚动条样式 */
        #sr8::-webkit-scrollbar {
            width: 6px;
        }

        #sr8::-webkit-scrollbar-track {
            background: #f5f5f5;
        }

        #sr8::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 6px;
            border: 1px solid #f5f5f5;
        }

        /* 检查是否有元素遮盖 */
       .dabjr {
            position: relative;
        }
        #wz8 {
            line-height: 1.5;
 /* 文案字体颜色 */
            color: #5fb7d9; /* 深粉红色，温馨浪漫，与页面粉色系按钮协调 */
        }
        
         #wz8::after {
             content: "";
             /*background: url("static/images/21f570a5bb5aeac8b924d4d78452c455.png") no-repeat;*/
             background-size: 100%;
             position: absolute;
             width: 40px;
             height: 40px;
             
         }
         #snow{
             width: 100%;
             height: 100%;
             position: relative;
             
         }
        .flake {
            position: absolute;
            background: url("static/images/d9f72c443203d37c33825966418de837.png") no-repeat;
            background-size: 100%;
            
        }

/* 移动端适配 */
@media (max-width: 480px) {
    .jkwk {
        width: 92%;
        max-width: 300px;
        padding: 40px 25px 35px;
        border-radius: 20px;
    }
    
    .xinf img {
        width: 110px;
    }
    
    .xkwk {
        font-size: 17px;
        margin-bottom: 30px;
        letter-spacing: 1px;
    }
    
    .xkwk::before,
    .xkwk::after {
        width: 50px;
    }
    
    .kejw span {
        width: 90px;          /* 稍微增大按钮 */
        height: 90px;
    }
    
    .kejw span a {
        font-size: 16px;      /* 移动端也增大字体 */
        letter-spacing: 2.5px;
    }
    
    #wz8 {
        font-size: 15px !important;      /* 移动端文案字体大小 - 强制应用 */
        line-height: 26px !important;    /* 移动端行高稍小 - 强制应用 */
    }
}