*{
    padding:0;
    margin:0;
}
body{background-color: black;    overflow-x: hidden; 
    font-family: "Noto Sanc SC", 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', "Microsoft YaHei", 'Arial', sans-serif;}
.wrap{
    width: 1920px;
    height: 3231px;
    background: url(../img/bg.jpg) no-repeat top center;
    /* background: url(../img/bg-f.jpg) no-repeat top center; */
    position: relative;
}
.user-state {    top: 0;}
.poplogin{
    background: url(/lqyxz/yuyue/img/pop/bg-pop-login-lq.png) no-repeat top center;
    width: 484px;
    height: 592px;
}
iframe#loginfrm {
    top: 220px;
    left: 80px;
}
.close_poplogin {
    width: 50px;
    height: 50px;
    color: #e6edf310;
    background: url(/lqyxz/yuyue/img/pop/bg-close.png) no-repeat top center /100% 100%;
    position: static;
    float: right;
}
.close_poplogin:hover{
    transform: scale(1.2);
}

[class^=slice]{
    /* height: 962 ÷ 54px; */
    height: 962px;
    /* height: 17.8148rem; */
    width: 1200px;margin:0 auto; position: relative;}

.slice3{
    width: 1920px;
    /* width: 100vw; */
    margin-top: 130px;
}
.left-nav{
    position: fixed;
    left: 1vw;
    width: 213px;
    height: 568px;
    background: url(../img/bg-float.png) no-repeat top center;
    z-index: 10;
    top: 20vh;
    text-align: center;
    display: none;
    font-size: 18px;
    color: #fefefe;
}
.left-nav .btn-floating-reg{
    width: 224px;
    height: 63px;
    background: url(../img/btn-floating-reg.png) no-repeat top center;
    margin: 0 auto;
    margin-top: 220px;
    cursor: pointer;
}
.left-nav .kefu{
    width: 150px;
    height: 150px;
    background: url(../img/qr-kefu.png) no-repeat top center/100% 100%;
    margin:10px 0 10px 34px;
}
.logo{
    width: 181px;
    height: 113px;
    position: absolute;
    top: 50px;
    left: 330px;
    background: url(../img/logo.png) no-repeat top center;
    cursor: pointer;
}
.logo:hover {
    filter: brightness(1.2) blur(.2px) contrast(1.5);
}
.slice1 .hd-head {
    position: absolute;
    bottom: 0px;
    height: 600px;
    width: 100%;
    margin: 0 auto;
}
.hd-time-line {
    font-size: 34px;
    margin: 0px 152px;
    color: #cbc498;
    width: 515px;
    height: 70px;
    text-align: center;
}
.btn-app {
    /* border: #f5f4ef45 solid thin; */
    /* border-radius: 5px; */
    font-size: 50px;
    margin: 6px 0 0 250px;
    text-align: center;
    width: 342px;
    height: 98px;
    line-height: 90px;
    cursor: pointer;
    background: url(../img/btn-app-active.png) no-repeat top center;
}
.btn-app:hover,[class^="btn-show-"]:hover{
    border-color: #cbc498;
    transform: scale(1.02);
}
.app-gifts{
    padding-top: 32px;
}
.gift-show-blank {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    overflow: hidden;
    width: 785px;
    margin: 6px 0 0 6px;
    position: relative;
    z-index: 0;
}
.gift-show-item{
    width: 193px;
    height: 193px;
    filter: brightness(1.0);
    cursor: pointer;
}
.gift-show-item:hover{
    filter: brightness(1.1);
}
.gift-show-item:nth-child(1){
    background: url(../img/bg-nav-list-1.png) no-repeat top center/100% 100%;
}
.gift-show-item:nth-child(2){
    background: url(../img/bg-nav-list-2.png) no-repeat -45px -15px;
}
.gift-show-item:nth-child(3){
    background: url(../img/bg-nav-list-3.png) no-repeat -45px -15px;
}
.gift-show-item:nth-child(4){
    background: url(../img/bg-nav-list-4.png) no-repeat -28px -15px;
}
.gift-show-bottons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
    width: 540px;
    margin: -40px 0 0 232px;
    position: relative;
    z-index: 10;
    line-height: 40px;
}

[class^="btn-show-"] {
    width: 132px;
    height: 39px;
    cursor: pointer;
}
[class^="btn-show-"]:nth-child(1){
    background: url(../img/btn-nav-item-1.png) no-repeat top center;
}
[class^="btn-show-"]:nth-child(2){
    background: url(../img/btn-nav-item-2.png) no-repeat top center;
}
[class^="btn-show-"]:nth-child(3){
    background: url(../img/btn-nav-item-3.png) no-repeat top center;
}
.btn-show-2,.btn-show-3{margin-left: 64px;}

[class*=pop-show-layer-]{
    display: none;
}
.pop-show-layer-1{
    width: 606px;
    height: 418px;
    background: url(../img/pop/bg-pop-1.png) no-repeat top center;
}
.pop-show-layer-2{
    width: 596px;
    height: 296px;
    background: url(../img/pop/bg-pop-2.png) no-repeat top center;
}
.pop-show-layer-3{
    width: 596px;
    height: 296px;
    background: url(../img/pop/bg-pop-3.png) no-repeat top center;
}
.pop .close-pop, .pop .close_popmsg{
    width: 60px;
    height: 60px;
    background: url(../img/pop/bg-close.png) no-repeat;
    cursor: pointer;
    float: right;
}
.pop .close_popmsg{    
    color: #fefefe00;
    width: 50px;
    height: 50px;
    right: unset;
    float: right;
    position: sticky;
}


.close-pop:hover,.close_popmsg:hover{
    transform: scale(1.2);
}

.pop .popmsg_title {
    font-size: 28px;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    margin-top: 35px;
}

.pop .popmsgarea {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    line-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 65%;
    overflow: hidden;
}
.pop-content-wrap {
    margin: 68px 0 0 20px;
    width: 560px;
    height: auto;
}

.list-items{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.pop-show-layer-1 .list-item{
    width: 170px;
    height: 160px;
    background: url(../img/CDK-item-1.png) no-repeat -32px -20px;
}
.pop-show-layer-1 .list-item:nth-child(2){
    background-image: url(../img/CDK-item-2.png);
}
.pop-show-layer-1 .list-item:nth-child(3){
    background-image: url(../img/CDK-item-3.png);
}
.pop-show-layer-1 .list-item:nth-child(4){
    background-image: url(../img/CDK-item-4.png);
}
.pop-show-layer-1 .list-item:nth-child(5){
    background-image: url(../img/CDK-item-5.png);
}



.pop-show-layer-2 .list-item{    
    width: 170px;
    height: 160px;
    background: url(../img/Cash-5.png) no-repeat -28px -14px;
    padding-top: 10px;
}
.pop-show-layer-2 .list-item:nth-child(2){
    background-image: url(../img/Cash-10.png);
}
.pop-show-layer-2 .list-item:nth-child(3){
    background-image: url(../img/Cash-20.png);
}

.pop-show-layer-3 .list-item {
    width: 400px;
    height: 172px;
    background: url(../img/bg-mouse-card.png) no-repeat top center;
}

.my-awards{
    display: none;
    background: url(/lqyxz/yuyue/img/pop/bg-pop-4.png) no-repeat top center;
    width: 606px;
    height: 418px;
}
.my-awards .title {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-size: 28px;
    padding-top: 35px;
    line-height: 45px;
}
.my-awards .gift-list {
    width: 80%;
    margin: 0 auto;
    height: 66%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 60px;
    font-size: 20px;
}
.copy-cdk {
    cursor: pointer;
    color: blue;
    text-decoration: underline solid;
}
.gift-img-thumbnail{
    width: 100px;
    height: 100px;
    position: absolute;
}
.go-next {
    /* height: 153px;
    width: 119px; */
    height: 76.5px;
    width: 59.5px;
    margin: 0 auto;
    /* margin-top: 68px; */
    margin-top: 118px;
    background: url(../img/go-next.png) no-repeat top center /100% 100%;
}

.lottery-wrap{display: flex;flex-direction: row; font-size: 16px; padding-top: 195px;}
.hd-rules {
    width: 425px;
    margin: 180px 0 0 0;
}
.hd-rule-title{
    width: 255px;
    height: 67px;
    margin-left: -10px;
    background: url(../img/bg-hd-rule.png) no-repeat;
}
.hd-rule-title .lab {
    font-size: 30px;
    color: #cbc18a;
    width: 160px;
    margin-left: 60px;
    text-align: center;
    line-height: 60px;
}
.hd-rule-detail {
    padding-left: 60px;
    line-height: 25px;
}

.lottery-zone {
    width: 644px;
    height: 659px;
    border-radius: 100%;
    background: url(../img/lottery/bg-lottery.png) no-repeat top center;
    z-index: 0;
}

.lottery-pool{
    width: 100%;
    height: 164px;
    position: relative;
}

.lottery-item {
    position: relative;
    width: 116px;
    height: 116px;
    margin: 0 auto;
    text-align: center;
}
.item-desc {
    font-size: 18px;
    color: #e4d7c5;
}

.lottery-item.active,.lottery-item:hover{filter: brightness(1.2);}

.lottery-item:nth-child(1) {
    margin: 75px auto;
}
.lottery-item:nth-child(1) .lottery-item-img{
    background: url(../../assets/images/lottery/lottery-item-1.png) no-repeat;
    width: 86px;
    height: 77px;margin-left: 10px;
}
.lottery-item:nth-child(1) .item-desc {
    padding-top: 25px;
}

.lottery-item:nth-child(2) {
    margin: -130px 0 0 110px;
    transform: rotateZ(-50deg);
}
.lottery-item:nth-child(2) .lottery-item-img {
    background: url(../../assets/images/lottery/lottery-item-2.png) no-repeat;
    width: 78px;
    height: 86px;
    margin-left: 25px;
}
.lottery-item:nth-child(2) .item-desc {
    padding-top: 0px;
    text-align: center;
}

.lottery-item:nth-child(3) {
    width: 120px;
    margin: 20px 0 0 80px;
    transform: rotateZ(-90deg);
}
.lottery-item:nth-child(3) .lottery-item-img{
    background: url(../../assets/images/lottery/lottery-item-3.png) no-repeat;
    width: 120px;
    height: 54px;
}
.lottery-item:nth-child(3) .item-desc {
    padding-top: 15px;
}

.lottery-item:nth-child(4) {
    width: 86px;
    margin:15px 0 0 155px;
    transform: rotateZ(-140deg);
}

.lottery-item:nth-child(4)  .lottery-item-img{
    width: 86px;
    height: 77px;
    background: url(../../assets/images/lottery/lottery-item-1.png) no-repeat;
}
.lottery-item:nth-child(4)  .item-desc {
    padding-top: 15px;
}


.lottery-item:nth-child(5)  {
    margin: -55px 0 0 290px;
    transform: rotateZ(-180deg);
    width: 78px;
}
.lottery-item:nth-child(5) .lottery-item-img {
    width: 78px;
    height: 87px;
    background: url(../../assets/images/lottery/lottery-item-4.png) no-repeat;
}
.lottery-item:nth-child(5) .item-desc {
    padding-top: 0px;
}

.lottery-item:nth-child(6) {
    width: 86px;
    margin: -188px 0 0 415px;
    transform: rotateZ(135deg);
}
.lottery-item:nth-child(6) .lottery-item-img{
    width: 86px;
    height: 77px;
    background: url(../../assets/images/lottery/lottery-item-1.png) no-repeat;
}
.lottery-item:nth-child(6) .item-desc {
    padding-top: 20px;
}


.lottery-item:nth-child(7) {
    width: 79px;
    margin: -250px 0 0 478px;
    transform: rotateZ(90deg);
}
.lottery-item:nth-child(7) .lottery-item-img{
    width: 79px;
    height: 86px;
    background: url(../../assets/images/lottery/lottery-item-5.png) no-repeat;
}
.lottery-item:nth-child(7) .item-desc {
    padding-top: 0px;
}


.lottery-item:nth-child(8) {
    width: 120px;
    margin: -238px 0 0 386px;
    transform: rotateZ(45deg);
}

.lottery-item:nth-child(8) .lottery-item-img{
    background: url(../../assets/images/lottery/lottery-item-3.png) no-repeat;
    width: 120px;
    height: 54px;
}
.lottery-item:nth-child(8) .item-desc {
    padding-top: 12px;
}


.btn-lottery {
    position: relative;
    width: 168px;
    height: 168px;
    border-radius: 100%;
    background: url(../img/lottery/btn-lottery.png) no-repeat;
    cursor: pointer;
    margin: 0 auto;
    transform: scale(0.9);
    &:hover{ 
        filter: brightness(1.1);
        transform: scale(1.0);
    }
}

.btn-my-award {
    margin: 15px 0 0 -122px;
    width: 147px;
    height: 43px;
    text-align: center;
    font-size: 22px;
    line-height: 40px;
    cursor: pointer;
    background: url(../img/btn-my-awards.png) no-repeat;
}

.slice3 .title {
    height: 85px;
    width: 100vw;
}
.roles-show {
    /* width: 100vw; */
    width: 1920px;
    height: auto;
    /* height: 890px; */
    /* height: 16.48rem; */
}

.slice3 .swiper-slide{
    /* width: 100vw; */
    width: 1920px;
    height: 815px;
    /* height: 15.0926rem; */
}
.slice3 .slide-img-1{
    background: url(../img/swiper/role-1.png) no-repeat;
    margin-top: -8px;
}
.slice3 .slide-img-2{
    background: url(../img/swiper/role-2.png) no-repeat;
    margin-top: 7px;
}
.slice3 .slide-img-3{
    background: url(../img/swiper/role-3.png) no-repeat;
    margin-top: -173px;
    height: 1047px;
}
.slice3 .slide-img-4{
    background: url(../img/swiper/role-4.png) no-repeat;
    margin-top: -8px;
}
.slice3 .slide-img-5{
    background: url(../img/swiper/role-5.png) no-repeat;
    margin-top: -25px;
}

.slice3  .swiper-pagination.roles-pagination {
    width: 170px;
    height: 666px;
    float: right;
    position: absolute;
    bottom: 190px;
    right: 300px;
    /* bottom: 4.05556rem; */
    /* right: 5.5555rem; */
    left: unset;
    top: unset;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: url(../img/swiper/bg-nav-role.png) no-repeat top center;
}

.slice3 .swiper-pagination .swiper-pagination-bullet {
    width: 145px;
    height: 135px;
    margin: 0 auto;
    border-radius: unset;
    margin: 0 auto;
    background: url(../img/swiper/nav-role-1.png) no-repeat top center/100% 100%;
}
.slice3 .swiper-pagination .swiper-pagination-bullet:nth-child(2){
    background-image: url(../img/swiper/nav-role-2.png);
}
.slice3 .swiper-pagination .swiper-pagination-bullet:nth-child(3){
    background-image: url(../img/swiper/nav-role-3.png);
}
.slice3 .swiper-pagination .swiper-pagination-bullet:nth-child(4){
    background-image: url(../img/swiper/nav-role-4.png);
}
.slice3 .swiper-pagination .swiper-pagination-bullet:nth-child(5){
    background-image: url(../img/swiper/nav-role-5.png);
}

.slice3 .swiper-pagination .swiper-pagination-bullet-active{
    width: 243px;
    height: 215px;
    background-image: url(../img/swiper/nav-role-1-active.png);
    margin: -20px 0 -15px -35px;
}
.slice3 .swiper-pagination .swiper-pagination-bullet-active:nth-child(2){
    background-image: url(../img/swiper/nav-role-2-active.png);
}
.slice3 .swiper-pagination .swiper-pagination-bullet-active:nth-child(3){
    background-image: url(../img/swiper/nav-role-3-active.png);
}
.slice3 .swiper-pagination .swiper-pagination-bullet-active:nth-child(4){
    background-image: url(../img/swiper/nav-role-4-active.png);
}
.slice3 .swiper-pagination .swiper-pagination-bullet-active:nth-child(5){
    background-image: url(../img/swiper/nav-role-5-active.png);
}


.floating-arrow{
    animation:Floating 2s infinite;
    -webkit-animation: Floating 2s infinite;
}
@keyframes Floating {

    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, -10px);
    }
    100% {
        transform: translate(0px, 0px);
    }
  }

  .gift-sn::after {
    content: "复制礼包码";
    margin-left: 10px;
    color: #95918b;
    cursor: pointer;
}

.show-my-awards {
    margin-top: -74px;
    position: absolute;
}

.bottom-buttons{
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*padding-top: 45px;*/
}
.btn-reg,.btn-dl {
    width: 393px;
    height: 101px;
    cursor: pointer;
}
.btn-reg {
    background: url(../img/btn-reg-gray.png) no-repeat top center;
}
.btn-dl{
    display:none;
    background: url(../img/btn-dl.png) no-repeat top center; 
}
@media screen and (max-height:800px){
    .left-nav {top:10vh;}
}