@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');
html{ font-family: tahoma,"HanHei SC","Microsoft YaHei",Arial,helvetica,sans-serif;}
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td {margin: 0;padding: 0}
.clear{*zoom:1}
.clear:after {clear: both;height: 0;overflow: hidden;display: block;visibility: hidden;content: "."}
table {border-collapse: collapse;border-spacing: 0}
fieldset,img,iframe {border: 0}
address,cite,dfn,em,var,i {font-style: normal}
li{list-style: none;}
caption,th{text-align: left}
h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: normal}
sup {vertical-align: text-top}
sub {vertical-align: text-bottom}
body {background: #050402;min-width: 1200px;font-family: tahoma,"HanHei SC","Microsoft YaHei",Arial,helvetica,sans-serif;overflow: hidden}
a{text-decoration: none; cursor: pointer}
a:hover {text-decoration: none}
input,label,form {padding: 0;margin: 0}
select,textarea,img,fieldset,input {vertical-align: middle}
input,button{ margin:0; padding:0; list-style-type:none;}
.container{margin: 0 auto;width: 1200px;}
/* Resetting default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.body {
    height: 100vh;
    width: 100vw;
    background: url("images/xin-bg.jpg") no-repeat top center;
    font-family: 'Pangolin', cursive;
    font-size: 1vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
cursor: pointer;
}

.container {
    position: relative;
    width: 108vmin;
    height: 45vmin; /* 调整容器高度以容纳卡片和信封 */
    margin-top: 200px;
}

.envelope {
    position: relative;
    background: #b77b1e;
    height: 45vmin;
    width: 108vmin;
}

.cover {
    position: absolute;
    height: 0;
    width: 0;
    border-bottom: 22.5vmin solid #e3b664;
    border-left: 54.75vmin solid transparent;
    border-right: 54vmin solid transparent;
    top: 22.5vmin;
    z-index: 3;
}

.cover::after {
    position: absolute;
    content: '';
    border-left: 57vmin solid #f8c872;
    border-bottom: 22.5vmin solid transparent;
    border-top: 22.5vmin solid transparent;
    top: -22.5vmin;
    left: -54.75vmin;
}

.cover::before {
    position: absolute;
    content: '';
    border-right: 57vmin solid #f8c872;
    border-bottom: 22.5vmin solid transparent;
    border-top: 22.5vmin solid transparent;
    /*border-style: solid;*/
    /*border-width: 22.5vmin  36.75vmin 22.5vmin 0;*/
    /*border-color: transparent black transparent transparent;*/
    /*background: linear-gradient(to right, red, yellow);*/
    top: -22.5vmin;
    left: -3.5vmin;
}

@keyframes open {
    100% {
        transform: rotateX(180deg);
    }
}

@keyframes open-rev {
    from {
        transform: rotateX(-180deg);
    }
}

.lid {
    position: absolute;
    height: 0;
    width: 0;
    border-top: 22.5vmin solid #e3b664;
    border-left: 54vmin solid transparent;
    border-right: 54vmin solid transparent;
    top: 0;
    transform-origin: top;
    animation: open-rev 2s;
    z-index: 1;
}

.container.open .lid {
    animation: open 0.5s;
    animation-fill-mode: forwards;
}

.shadow {
    position: relative;
    top: 3vmin;
    border-radius: 50%;
    opacity: 0.7;
    height: 2vmin;
    width: 48vmin;
    background: #333;
}



.letter-bq{width: 16%;
    position: absolute;
    top: 30%;
    left: 42%;
    z-index: 9999;}
.container.open .card {
    transform: translate(-50%, -80%) scale(1); /* 调整向上移动的位置 */
    top: 22%; /* 调整向上移动的位置 */
    transition-delay: 0.5s;
}

.message {
    position: absolute;
    top: 0vmin;
    box-sizing: border-box;
    padding: 30px;
}
.message{font-size: 16px;color: #333;line-height: 40px;text-align: justify}
.message>span{font-weight: bold}
.pikachu {
    position: absolute;
    background: #f9ebaa;
    height: 8vmin;
    width: 10vmin;
    border-radius: 40%;
    top: 15vmin;
    display: flex;
}

.pikachu::before {
    content: '';
    position: absolute;
    background: #f9ebaa;
    height: 6vmin;
    width: 9vmin;
    border-radius: 90% 90% 60% 60%;
    top: -4vmin;
    left: 0.5vmin;
}

.pikachu::after {
    content: '';
    position: absolute;
    background: transparent;
    height: 1vmin;
    width: 1vmin;
    top: 2vmin;
    left: -1.5vmin;
    color: #4a4947;
    border-radius: 50%;
    box-shadow:
            4vmin -3.5vmin, 8vmin -3.5vmin,
            2vmin -2vmin #fad598, 10vmin -2vmin #fad598,
            3vmin 5vmin #f9ebaa, 9.3vmin 5vmin #f9ebaa;
}

.limbs {
    position: relative;
    width: 0;
    height: 0;
    border-left: 1vmin solid transparent;
    border-right: 1vmin solid transparent;
    border-bottom: 6vmin solid #f9ebaa;
    border-radius: 80%;
    top: -6vmin;
    left: 1vmin;
    transform: rotate(-20deg);
}

.limbs::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 1vmin solid transparent;
    border-right: 1vmin solid transparent;
    border-bottom: 6vmin solid #f9ebaa;
    border-radius: 80%;
    top: 3vmin;
    left: 5vmin;
    transform: rotate(40deg);
}

.limbs::before {
    content: '';
    position: absolute;
    background: #f9ebaa;
    width: 5vmin;
    height: 2vmin;
    border-radius: 40%;
    top: 10vmin;
    left: 4vmin;
    box-shadow:
            -1vmin 1.5vmin #f9ebaa;
}

.heart {
    position: relative;
    width: 5vmin;
    height: 4vmin;
    top: 2vmin;
    left: 0.6vmin;
}


.heart:after {
    position: absolute;
    content: "";
    left: 2.5vmin;
    top: 0;
    width: 2.5vmin;
    height: 4vmin;
    background: #fc978b;
    border-radius: 2.5vmin 2.5vmin 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

.arms {
    position: relative;
    background: #f9ebaa;
    width: 4.2vmin;
    height: 2vmin;
    border-radius: 60% 60% 90% 60% / 50% 50% 90% 90%;
    top: 3vmin;
    left: -5vmin;
}

.arms::after {
    content: '';
    position: absolute;
    background: #f9ebaa;
    width: 4vmin;
    height: 2vmin;
    border-radius: 60% 60% 90% 60% / 50% 50% 90% 90%;
    left: 5vmin;
    top: 0vmin;
}

.smile {
    position: relative;
    background: transparent;
    height: 1vmin;
    width: 1vmin;
    border-radius: 50%;
    border-bottom: 0.3vmin solid #4a4947;
    left: -5vmin;
    top: -1.3vmin;
}

.smile::before {
    position: absolute;
    content: '';
    background: transparent;
    height: 1vmin;
    width: 1vmin;
    border-radius: 50%;
    border-bottom: 0.3vmin solid #4a4947;
    left: 0.7vmin;
}

.btn-get-offer {
    position: absolute;
    top: 50vmin;
    left: 50%;
    transform: translateX(-50%);
    /* background-color: #4CAF50; */
    color: #000;
    padding: 16px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    display: none;
    transition: opacity 0.3s ease-in-out;
    width: 530px;
    height: 60px;
    background: linear-gradient(to right, #e8c48a, #e3b664);
}


.btn-get-offer:hover {
    opacity: 0.8;
}


.card {
    position: absolute;
    background: #fff; /* 灰白渐变色 */
    height: 44vmin; /* 调整高度以适应六行文字 */
    width: 92.5vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0) scale(1);
    transition: transform 0.5s ease-in-out, top 0.5s ease-in-out; /* 调整顶部过渡效果 */
    z-index: 0; /* 将卡片放置在最底层 */
    overflow: hidden; /* 确保文本溢出被隐藏 */
    padding: 10px; /* 可选：增加填充以改善文本可读性 */
    border-top: 40px solid #ffffff;
    border-radius: 20px;
}

.message {
    /* 可选：调整消息文本的样式 */
    font-size: 16px; /* 调整字体大小 */
    line-height: 30px; /* 调整行高以提升可读性 */
    text-align: justify; /* 居中对齐文本 */
    overflow: hidden; /* 确保文本溢出被隐藏 */
    white-space: pre-wrap; /* 允许换行符生效 */
    animation-timing-function: linear; /* 线性动画 */
     /* 向左移动文字 */
    font-family:tahoma,"HanHei SC","Microsoft YaHei";
    
}

/* 关键帧用于消息滚动动画 */
@keyframes scrollMessage {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(calc(-100% - 20px)); /* 调整动画终点以兼容 padding */
    }
}