* {
    padding: 0;
    margin: 0;
}

body {
/* 解决iOS系统微信浏览器字体大小被修改*/
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

.ani {
    position: absolute;
}

.heng {
    width: 750px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.yaoyiyao {
    position: absolute;
    top: 170px;
    font-size: 60px;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
}

#lottery_modal_1 img,
#lottery_modal_2 img {
    width: 750px;
}

@keyframes shake {
    0% { transform: translateX(0); }
    15% { transform: translateX(-20px); }
    30% { transform: translateX(20px); }
    40% { transform: translateX(0); }
    55% { transform: translateX(-20px); }
    70% { transform: translateX(20px); }
    75% { transform: translateX(0); }
    85% { transform: translateX(-20px); }
    100% { transform: translateX(20px); }
}
 
.shake-animation {
    animation: shake .5s; /* 0.5秒的动画 */
    animation-iteration-count: infinite; /* 无限次数的动画循环 */
}

.lot {
    margin: 0 auto;
    /* 第一个动画 */
    animation-name: grow;
    animation-duration: 2s;
    animation-fill-mode: forwards;

    /* 第二个动画 */
    animation-name: tilt-animation, grow;
    animation-duration: 10s, 2s; /* 第二个动画时长为3秒，累加上第一个动画的时长 */
    animation-fill-mode: forwards, forwards;
}

@keyframes grow {
    0% {
        width: 8px;
        height: 52px;
    }
    100% {
        width: 76px;
        height: 516px;
    }
}

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
/* 淡出动画 */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
 
/* 应用淡入动画 */
.fade-in {
  animation: fadeIn 1s ease-in forwards;
}
 
/* 应用淡出动画 */
.fade-out {
  animation: fadeOut 2.5s ease-out forwards;
}

@keyframes tilt-animation {
    0% { transform: rotate(0deg);transform-origin:bottom center; }
    15% { transform: rotate(-5deg);transform-origin:bottom center; }
    30% { transform: rotate(5deg);transform-origin:bottom center; }
    40% { transform: rotate(0deg);transform-origin:bottom center; }
    55% { transform: rotate(-5deg);transform-origin:bottom center; }
    70% { transform: rotate(5deg);transform-origin:bottom center; }
    75% { transform: rotate(-2deg);transform-origin:bottom center; }
    85% { transform: rotate(0deg);transform-origin:bottom center; }
    100% { transform: rotate(0deg);transform-origin:bottom center; }
}

.tc {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.69);
    z-index: 999;
    padding: 0 55px;
    box-sizing: border-box;
    overflow-y: auto;
}

.close {
    position: absolute;
    right: 30px;
    top: 30px;
    font-family: sans-serif;
    font-size: 40px;
    font-weight: 100;
    color: #999;
}

.contact-form {
    top: 390px;
    left: 50px;
    right: 50px;
    margin: 0 auto;
    font-size: 20px;
    font-family: sans-serif;
}

.contact-form fieldset {
    border: 0 none;
}

.contact-form input[type="text"] {
    width: 87%;
    height: 50px;
    border: solid 2px #f1ede8;
    background: rgba(255,255,255,0.5);
    margin-bottom: 40px;
    padding: 0 30px;
    color: #666;
    border-radius: 15px;
    font-size: 24px;
}

.contact-form select {
    width: 630px;
    height: 50px;
    border: solid 2px #f1ede8;
    background: rgba(255,255,255,0.5);
    margin-bottom: 20px;
    padding: 0 30px;
    border-radius: 15px;
    font-size: 24px;
    color: #666;
}

.contact-form input::placeholder {
    color: #666;
}

.errorDiv {
    color: red;
    right: 50px;
    position: absolute;
    margin-top: 15px;
}

.tc_res {
    position: absolute;
    top: 180px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: sans-serif;
    font-size: 55px;
    color: #eb6608;
}

#changan {
    color: #fff;
    z-index: 1;
    bottom: 294px;
    font-size: 22px;
    font-family: sans-serif;
    left: 0;
    right: 0;
    text-align: center;
}

.touxiang {
    border-radius: 50%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
#music_on {
    top: 50px;
    z-index: 1;
    right: 50px;
    animation: rotate 2s linear infinite;
}

#music_off {
    top: 50px;
    z-index: 2;
    right: 50px;
}