html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}
html, body, div, span,
h1, h2, p,img,
a, i,ul, li,label,button,
table, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    vertical-align: middle;
    list-style: none;
    box-sizing: border-box;
}
a {
    background-color: transparent;
}
b,
strong {
    font-weight: bolder;
}
input {
    background: transparent;
    outline: none;
    border: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration: none;
}
.full {
    width: 100%;
}
html,body {
    background: #e24121;
}
.wrapper {
    position: relative;
    background: url("../img/bg.jpg?v=2") 0 0 no-repeat;
    background-size: 100%;
}
.egg-groups {
    position: relative;
    width: 100%;
    padding-top: 12%;
}
.egg-groups > img {
    width: 100%;
}
.egg-groups ul {
    position: absolute;
    left: 50%;
    bottom: 15%;
    width: 60%;
    height: 24%;
    margin: 0 auto;
    transform: translateX(-50%);
}
.egg-groups ul li {
    position: absolute;
    width: 180px;
    text-align: center;
    z-index: 1;
}
.egg-groups ul li:hover{
    cursor: url("../img/egg-cz.png"), default;
    /*cursor: url("../img/cz.png"), default;*/
}
.egg-groups ul li img {
    width: 100%;
}
.egg-groups ul li img:first-child {
    width: 90%;
    margin: 0 auto;
}
.egg-groups ul li img:nth-child(2) {
    margin-top: -10px;
    position: relative;
    z-index: -1;
}
.egg-groups ul li.egg-01 {
    width: 16%;
    top: -14%;
    left: 5%;
}

.egg-groups ul li.egg-04 {
    width: 15%;
    top: -40%;
    left: 21%;
}
.egg-groups ul li.egg-02 {
    width: 16%;
    top: -9%;
    left: 34%;
    z-index: 2;
}
.egg-groups ul li.egg-05 {
    width: 15%;
    top: -44%;
    left: 48%;
}
.egg-groups ul li.egg-08 {
    width: 14%;
    top: -49%;
    left: 52%;
}
.egg-groups ul li.egg-06 {
    width: 16%;
    top: -12%;
    left: 61%;
    z-index: 2;
}
.egg-groups ul li.egg-07 {
    width: 13%;
    top: -52%;
    left: 73%;
}
.egg-groups ul li.egg-03 {
    width: 16%;
    top: -26%;
    left: 77%;
    z-index: 2;
}
.egg-groups ul li.egg-09 {
    width: 15%;
    top: -21%;
    right: 0;
}
.form {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 92px;
    margin-top: -10%;
    margin-bottom: -2%;
    position: relative;
    z-index: 9;
}
.form p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, #570a04, #730606);
    max-width: 690px;
    width: 40%;
    height: 100%;
    border-radius: 50px;
    border: 3px solid #facb22;
    padding-left: 3%;
    margin-right: 4%;
}
.form input {
    font-size: 24px;
    color: #fff;
    width: 60%;
}
.form input::placeholder {
    color: #9d1c0f;
}
.form p img {
    margin-right: -2px;
    cursor: pointer;
    width: 40%;
    max-width: 255px;
}
.btn-check {
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*background: linear-gradient(to top, #bb2312, #d54625, #f76a57);*/
    /*border: 1px solid #fac621;*/
    max-width: 286px;
    width: 18%;
    /*padding: 2% 0;*/
    /*border-radius: 20px;*/
    /*font-size: 26px;*/
    /*font-weight: bolder;*/
}
/*.btn-check span {*/
    /*background-image: linear-gradient(to right, #fac85c 25%, #fbcd68 56%, #fdee98);*/
    /*-webkit-background-clip: text;*/
    /*background-clip: text;*/
    /*color: transparent;*/
    /*-webkit-background-clip: text;!*Ã¥Â°â€ Ã¨Â®Â¾Ã§Â½Â®Ã§Å¡â€žÃ¨Æ’Å’Ã¦â„¢Â¯Ã©Â¢Å“Ã¨â€°Â²Ã©â„¢ÂÃ¥Ë†Â¶Ã¥Å“Â¨Ã¦â€“â€¡Ã¥Â­â€”Ã¤Â¸Â­*!*/
    /*-webkit-text-fill-color: transparent;!*Ã§Â»â„¢Ã¦â€“â€¡Ã¥Â­â€”Ã¨Â®Â¾Ã§Â½Â®Ã¦Ë†ÂÃ©â‚¬ÂÃ¦ËœÅ½*!*/
    /*border-radius: 50px;*/
/*}*/
.btn-check img {
    width: 100%;
}
.btn-check-tc img{
      width: 100%;
      margin: 33px;
}
.main {
    width: 96%;
    max-width: 1624px;
    margin: 0 auto;
    padding-top: 40px;
}
.main > div {
    height: 869px;
}
.part1 {
    background: url("../img/img1.png") 0 0 no-repeat;
    background-size: 100% 100%;
    margin-bottom: 25px;
    padding-top: 170px;
}
.part2 {
    background: url("../img/img2.png") 0 0 no-repeat;
    background-size: 100% 100%;
    margin-bottom: 25px;
    padding-top: 200px;
}
.part3 {
    background: url("../img/img3.png") 0 0 no-repeat;
    background-size: 100% 100%;
    padding-top: 205px;
}
.part1 table {
    width: 63%;
    margin: 0 auto;
}
.part1 table th, .part1 table td {
    text-align: center;
    border: 1px solid #fff;
    height: 80px;
    line-height: 80px;
}
.part1 table th {
    background: #f9bcb0;
    font-size: 26px;
    color: #d4301a;
}
.part1 table td {
    color: #fff;
}
.scroll-box {
    height: 68%;
    overflow: hidden;
    position: relative;
}
.scroll-content {
    position: absolute;
    width: 100%;
}
.part2 ul {
    width: 63%;
    margin: 0 auto;
}
.part2 ul li.header {
    font-size: 30px;
    color: #720606;
    margin-bottom: 10px;
}
.part2 ul li {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 24px;
    color: #fff;
    height: 45px;
}
.part2 .scroll-content ul li span{
    margin-left: -44px;
}
.part3 .rule {
    font-size: 26px;
    color: #fff;
    width: 64%;
    margin: 0 auto;
    line-height: 1.8;
}
.slide-wrap {
    position: fixed;
    top: 40%;
    right: 10px;
    z-index: 99;
    width: 220px;
}
.slide-wrap img {
    width: 100%;
    cursor: pointer;
}
@keyframes scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

.scroll {
    animation: scroll 300s linear infinite;
}
.shake {
    animation-name: shake;
    animation-duration: 0.2s;
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-iteration-count: infinite;
}
@keyframes shake {
    0% {    transform: translate3d(0, 0, 0) rotate(-6deg);  }
    50% {    transform: translate3d(0, 0, 0) rotate(6deg);  }
    100% {    transform: translate3d(0, 0, 0) rotate(-6deg);  }
}
.zhongjiang-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9;
    transform: translate(-50%, -50%);
    background: url("../img/zj-bg.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 655px;
    height: 330px;
    font-size: 60px;
    color: #d01002;
}
.zhongjiang-wrap span {
    position: absolute;
    top: 50%;
    left: 18%;
    width: 42%;
    z-index: 10;
    text-align: center;
}
/*Ã¥Â¼Â¹Ã§Âªâ€”*/
.modal-overlay{
    background: rgba(0, 0, 0, .6);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.modal-overlay .modal{
    max-width: 700px;
    width: 94%;
    margin: 0 auto;
    position: relative;
    top: 45%;
    left: 0;
    transform: translateY(-50%);
    font-size: 14px;
    color: #333;
}
.modal-overlay .modal-bg {
    width: 100%;
}
.modal-overlay .my-record {
    position: absolute;
    top: 34%;
    left: 50%;
    width: 78%;
    transform: translateX(-50%);
    margin: 0 auto;
}
.modal-overlay .my-record h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 30px;
    color: #cd3728;
    text-align: center;
    margin-bottom: 20px;
    font-weight: normal;
}
.modal-overlay .my-record h2 a {
    position: absolute;
    right: 5px;
    z-index: 999;
    font-size: 16px;
    color: #bbbbbb;
}
.modal-overlay .my-record ul {
    height: 290px;
    overflow-y: auto;
    padding-right: 10px;
}
.scrollbar::-webkit-scrollbar{
    width:4px;
    height:4px;
    border-radius:10px;
}
.scrollbar::-webkit-scrollbar-thumb{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,.3);
    background-color: #B2B5CA;
}
.scrollbar::-webkit-scrollbar-thumb:vertical:hover,
.scrollbar::-webkit-scrollbar-thumb:horizontal:hover {
    background: #B2B5CA;
}
.scrollbar::-webkit-scrollbar-track-piece {
    background-color: #667189;
}
.modal-overlay .my-record li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    font-size: 20px;
    color: #272626 ;
    margin-bottom: 10px;
}
.modal-overlay .my-record li .item {
    display: flex;
    align-items: center;
    flex: 1;
}
.modal-overlay .my-record li .item span {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fba99d;
    border-radius: 100px;
    width: 62px;
    height: 62px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    margin-right: 2%;
    background-position: center center;
    background-repeat: no-repeat;
}
.modal-overlay .my-record li .item span.error {
    background-image: url("../img/error.png");
}
.modal-overlay .my-record li .item span.coupon {
    background-image: url("../img/quan.png");
}
.modal-overlay .my-record li .time {
    font-size: 18px;
    color: #989494;
}