/* 通用 */
* {
    padding: 0;
    margin: 0;
    border: 0;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input,
select,
button {
    outline: 0;
}

button {
    border: 0;
    background-clip: padding-box;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img {
    border: none;
    vertical-align: baseline;
}

textarea,
input {
    word-wrap: break-word;
    word-break: break-all;
}

span,
p,
div {
    word-wrap: break-word;
}

.lf {
    float: left;
}

.rt {
    float: right;
}

html,
body,
div,
p,
ul,
ol,
li {
    list-style: none;
}

a {
    text-decoration: none;
    cursor: pointer;
}

a.geted {
    pointer-events: none;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}



/* 黑色title背景主题 适用于alert confirm*/
body .skin_class_exmple .layui-layer-title {
    padding: 0 !important;
    text-align: center;
    background: black !important;
    color: white !important;
    font-size: 22px !important;
    height: 50px !important;
    line-height: 50px !important;
    position: relative !important;
}

body .skin_class_exmple .layui-layer-setwin {
    top: 15px !important;
}

body .skin_class_exmple>.layui-layer-content {
    text-align: center;
    font-size: 20px;
    color: red;
    box-sizing: border-box;
}

body .skin_class_exmple .layui-layer-setwin a {
    width: 24px;
    height: 24px;
    opacity: 1;
}

body .skin_class_exmple .layui-layer-setwin a:hover {
    opacity: 1;
}

body .skin_class_exmple .layui-layer-setwin {
    opacity: 1;
}

body .skin_class_exmple>.layui-layer-btn {
    background: white;
    text-align: center;
}

body .layui-layer-title {
    background-color: transparent !important;
    border-bottom: none;
}

body .layui-layer-content {
    background-color: transparent !important;
    border-bottom: none;
    box-shadow: none;
}

body .layui-layer-setwin a {
    width: 24px;
    height: 24px;
    opacity: 0;
}

body .layui-layer-setwin a:hover {
    opacity: 0;
}

body .layui-layer-setwin {
    opacity: 0;
}

body .layui-layer-setwin .layui-layer-close2 {
    right: -2px;
    top: -2px;
}

body .skin_class_two {
    box-shadow: none;
}

.cu_layer {
    display: none;
}

html {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

body {
    max-width: 1920px;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

a:hover {
    -webkit-filter: brightness(115%);
    -ms-filter: brightness(115%);
    -o-filter: brightness(115%);
    -moz-filter: brightness(115%);
    opacity: 0.85\0;
}

/* 页面部分 */
.indexPage {
    min-width: 1400px;
    height: 7610px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../image/index.jpg) no-repeat center top;
    position: relative;
}

.indexPage-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 40px 90px 0 180px;
}

.indexPage-header>a {
    display: inline-block;
    background: url(../image/logo.png);
    width: 158px;
    height: 129px;
}

.indexPage-header>a:nth-child(2) {
    display: inline-block;
    background: url(../image/btn-gw.png);
    width: 207px;
    height: 60px;
    margin-top: 10px;
}

.content {
    width: 1500px;
    margin: auto;
    margin-top: 445px;
}

.index-time {
    background: url(../image/time-bg.png);
    width: 584px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    color: #fffcf7;
    margin: auto;
}

.indexPage-login {
    color: #000;
    font-size: 14px;
    width: 584px;
    text-align: center;
    margin: auto;
    margin-top: 14px;
}

.indexPage-login a {
    color: #fe1f18;
}

.card-p {
    width: 645px;
    color: #ffe2b8;
    font-size: 14px;
    line-height: 1.6;
}

.card-p>p {
    color: #ffcd6d;
}

.card1 {
    margin-top: 245px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card1-view {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    width: 1275px;
}

.card-inner {
    position: relative;
    width: 182px;
    height: 185px;
    transition: transform 0.6s;
    /* 动画效果 */
    transform-style: preserve-3d;
    /* 3D 保持效果 */
    margin-bottom: 30px;
}

.title1 {
    display: inline-block;
    background: url(../image/card-artive.png) no-repeat;
    width: 182px;
    height: 185px;
    background-position-x: -5px;
    background-position-y: -5px;
}

.SQWelcome-bottom_one {
    display: inline-block;
    background: url(../image/card.png) no-repeat;
    width: 182px;
    height: 185px;
    background-position-x: -8px;
    background-position-y: -5px;
}

.card-title {
    transform: rotateY(180deg);
}

.flipped {
    transform: rotateY(180deg);
    /* 旋转 180 度 */
}

.card-inner a {
    position: absolute;
    backface-visibility: hidden;
}

.card-inner:nth-child(2) .SQWelcome-bottom_one {
    background-position-x: -187px;
}

.card-inner:nth-child(3) .SQWelcome-bottom_one {
    background-position-x: -369px;
}

.card-inner:nth-child(4) .SQWelcome-bottom_one {
    background-position-x: -551px;
}

.card-inner:nth-child(5) .SQWelcome-bottom_one {
    background-position-x: -733px;
}

.card-inner:nth-child(6) .SQWelcome-bottom_one {
    background-position-x: -915px;
}

.card-inner:nth-child(7) .SQWelcome-bottom_one {
    background-position-x: -1097px;
}

.card-inner:nth-child(8) .SQWelcome-bottom_one {
    background-position-y: -223px;
}

.card-inner:nth-child(9) .SQWelcome-bottom_one {
    background-position-x: -187px;
    background-position-y: -223px;
}

.card-inner:nth-child(10) .SQWelcome-bottom_one {
    background-position-x: -369px;
    background-position-y: -223px;
}

.card-inner:nth-child(11) .SQWelcome-bottom_one {
    background-position-x: -551px;
    background-position-y: -223px;
}

.card-inner:nth-child(12) .SQWelcome-bottom_one {
    background-position-x: -733px;
    background-position-y: -223px;
}

.card-inner:nth-child(13) .SQWelcome-bottom_one {
    background-position-x: -915px;
    background-position-y: -223px;
}

.card-inner:nth-child(14) .SQWelcome-bottom_one {
    background-position-x: -1097px;
    background-position-y: -223px;
}



.card-inner:nth-child(2) .title1 {
    background-position-x: -203px;
}

.card-inner:nth-child(3) .title1 {
    background-position-x: -398px;
}

.card-inner:nth-child(4) .title1 {
    background-position-x: -594px;
}

.card-inner:nth-child(5) .title1 {
    background-position-x: -789px;
}

.card-inner:nth-child(6) .title1 {
    background-position-x: -985px;
}

.card-inner:nth-child(7) .title1 {
    background-position-x: -1180px;
}

.card-inner:nth-child(8) .title1 {
    background-position-y: -213px;
}

.card-inner:nth-child(9) .title1 {
    background-position-x: -203px;
    background-position-y: -213px;
}

.card-inner:nth-child(10) .title1 {
    background-position-x: -398px;
    background-position-y: -213px;
}

.card-inner:nth-child(11) .title1 {
    background-position-x: -594px;
    background-position-y: -213px;
}

.card-inner:nth-child(12) .title1 {
    background-position-x: -789px;
    background-position-y: -213px;
}

.card-inner:nth-child(13) .title1 {
    background-position-x: -985px;
    background-position-y: -213px;
}

.card-inner:nth-child(14) .title1 {
    background-position-x: -1180px;
    background-position-y: -213px;
}


.card1-btn {
    display: inline-block;
    background: url(../image/btn-fp.png);
    width: 235px;
    height: 71px;
}

.card1-btn.geted {
    filter: grayscale(0%) brightness(50%);
}

.card1-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: url(../image/card1-1.png);
    width: 1281px;
    height: 248px;
    margin-top: 33px;
    padding: 0 147px 22px 156px;
}

.card1-bottom>a {
    display: inline-block;
    background: url(../image/btn-lq.png);
    width: 116px;
    height: 40px;
    background-position-x: -133px;
}

.card1-bottom>a.geted {
    background-position-x: 0px;
}

.card2 {
    background: url(../image/card2.png);
    width: 1420px;
    height: 996px;
    margin-top: 235px;
    padding: 186px 68px 0 105px;
}

.card2-top {
    display: flex;
    justify-content: space-between;

}

.card2-top-box {
    position: relative;
    width: 523px;
    height: 350px;
    text-align: center;
    color: #601c08;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 48px;
}

.card2-top-box.one {
    line-height: 1.4;
}

.card2-top-box.three {
    padding-top: 43px;
    line-height: 1.7;
}

.card2-top-a.top {
    margin-top: 120px;
}

.card2-top-a.top2 {
    margin-top: 154px;
}

.card2-top-a.top3 {
    margin-top: 176px;
}

.card2-top-box.four {
    padding-top: 33px;
}

.card2-top-a {
    margin-right: 35px;
}

.card2-top-box>p:nth-child(1) {
    width: 100%;
    text-align: left;
}

.card2-top-box>p:nth-child(2) {
    position: absolute;
    top: 167px;
    left: 183px;
}

.card2-top-text {
    left: 133px !important;
}

.card2-top-box>a {
    display: inline-block;
    background: url(../image/btn-lq.png);
    width: 116px;
    height: 40px;
    background-position-x: -133px;
    margin-top: 120px;
}

.card2-top-box>a.geted {
    background-position-x: 0px;
}

.card3 {
    background: url(../image/card-box.png) top no-repeat;
    width: 1141px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    margin-top: 240px;
    padding-top: 135px;
}

.card-top {
    width: 560px;
    text-align: right;
}

.card-top>a {
    display: inline-block;
    background: url(../image/btn-yl.png);
    width: 129px;
    height: 54px;
}

.card-text {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 14px;
    width: 490px;
    margin-top: 320px;
}

.card-btn {
    width: 680px;
    display: flex;
    justify-content: space-between;
}

.card-btn>a {
    display: inline-block;
    background: url(../image/btn-one.png);
    width: 292px;
    height: 105px;
}

.card-btn>a:nth-child(2) {
    background: url(../image/btn-ten.png);
}

.card3-view {
    background: url(../image/card3.png);
    width: 1362px;
    height: 788px;
    padding: 90px 0 0 0;
    margin-top: 20px;
}

.card3-view-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 175px;
    font-size: 16px;
    font-weight: 700;
    color: #684224;
    margin-bottom: 10px;
}

.card3-view-top>p {
    width: 103px;
    height: 28px;
    background-color: #8f8568;
    text-align: center;
    line-height: 28px;
    border-radius: 28px;
    color: #fff8e2;
    font-size: 16px;
    font-weight: 400;
}

.card3-flex {
    display: flex;
    justify-content: space-between;
    padding: 0 175px 0 177px;
    margin-bottom: 103px;
}

.card3-flex-box {
    width: 170px;
    height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #ffe9ad;
    font-size: 13px;
}

.card3-flex-box>a {
    margin-top: 135px;
    display: inline-block;
    background: url(../image/btn-dh.png);
    width: 89px;
    height: 37px;
    background-position-x: -210px;
}

.card3-flex-box>a.geted {
    background-position-x: 0;
}

.card3-bottom {
    background: url(../image/card4.png);
    width: 1359px;
    height: 519px;
    padding-left: 190px;
    padding-top: 29px;
    position: relative;
}

.card3-view-select {
    width: 202px;
    height: 28px;
    color: #ead9a8;
    font-size: 16px;
    background-color: #753d2d;
    /* border-radius: 28px; */
    padding: 0 8px;
    margin-bottom: 30px;
}

.card3-bottom-flex {
    height: 59px;
    display: flex;
    align-items: center;
    color: #684225;
    font-size: 16px;
    font-weight: 700;
}

.card3-bottom-flex>p:nth-child(1) {
    width: 150px;
    text-align: center;
    margin-right: 30px;
    display: -webkit-box;
    /* 3. 设置盒子排列方向为垂直 */
    -webkit-box-orient: vertical;
    /* 4. 关键：指定显示2行，超出则省略 */
    -webkit-line-clamp: 2;
    /* 5. 隐藏超出容器的文本 */
    overflow: hidden;
}

.card3-bottom-flex>p:nth-child(2) {
    width: 120px;
    margin-right: 10px;
}

.card3-bottom-input {
    width: 150px;
    display: flex;
    align-items: center;
}

.card3-bottom-input input {
    width: 58px;
    height: 20px;
    border-radius: 20px;
    color: #fffaed;
    background-color: #a28d64;
    text-align: center;
    padding: 0 10px;
}

.btn-fj {
    display: inline-block;
    background: url(../image/btn-fj.png);
    width: 118px;
    height: 40px;
}

.get-game {
    display: inline-block;
    background: url(../image/btn-lq2.png);
    width: 138px;
    height: 40px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.card3-bottom-text {
    color: #b73a19;
    font-size: 16px;
    width: 860px;
    margin: auto;
    margin-top: 18px;
    position: absolute;
    bottom: 88px;
    left: 218px;
}

.card4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 177px;
}

.card4-top {
    display: flex;
    justify-content: space-between;
    background: url(../image/card6.png);
    width: 895px;
    height: 401px;
    padding: 63px 48px 0 103px;
    margin-top: 40px;
}

.card4-top>img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
}

.card-p.black {
    color: #601c08;
}

.card-p.black>p {
    color: #f26723;
}

.card4-text {
    width: 1032px;
    text-align: right;
    color: #601c08;
    font-size: 16px;
    font-weight: 700;
    margin: auto;
    margin-top: 20px;
}

.card4-view {
    background: url(../image/card7.png);
    width: 1247px;
    height: 813px;
    margin-right: 70px;
    padding-top: 5px;
}

.card4-flex {
    display: flex;
    justify-content: space-between;
    padding-right: 122px;
}

.card4-left {
    display: flex;
    flex-direction: column;
}

.card4-right {
    display: flex;
    flex-direction: column;
}

.card4-flex a {
    display: inline-block;
    background: url(../image/btn-lq.png);
    width: 116px;
    height: 40px;
    background-position-x: -133px;
}

.card4-flex a.geted {
    background-position-x: 0px;
}

.card4-right {
    margin-top: 87px;
}

.card4-right>a {
    margin-bottom: 69px;
}

.card4-left {
    margin-top: 170px;
    padding-left: 111px;
}

.card4-left>a {
    transform: rotate(5deg);
}

.card4-left>a:nth-child(1) {
    margin: 10px 0 0 52px;
}

.card4-left>a:nth-child(2) {
    margin: 180px 0 0 35px;
}

.card4-left>a:nth-child(3) {
    margin: 180px 0 0 10px;
}


.nav {
    position: fixed;
    top: 300px;
    right: 40px;
    display: none;
    background: url(../image/nav.png);
    width: 269px;
    height: 417px;
    padding: 93px 0px 0 4px;
    text-align: center;
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-btn>a {
    display: inline-block;
    color: #ffd89a;
    font-size: 24px;
    margin-bottom: 28px;
}

.nav-btn-a {
    display: inline-block;
    color: #ff7a37;
    font-size: 14px;
    margin-top: 48px;
    text-decoration: underline;
}

.nav-btn>a.geted {
    color: #ffc348;
}

.awardRecord2 {
    background-image: url(../image/popup-yl-1.png);
    background-size: 100% 100%;
}

.awardRecord2 .lay_content {
    margin-top: 47px;
}

.awardRecord2 .lay_close {
    font-size: 38px;
    top: 50px;
    right: 48px;
    opacity: 0;
}

.keyRecord-img {
    text-align: right;
    margin-top: 158px;
    padding-right: 151px;
}

.popupRecord .lay_content {
    margin-top: 0px;
}

.popupRecord .lay_close {
    font-size: 38px;
    top: 50px;
    right: 48px;
    opacity: 0;
}

.one-popup {
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 6px 0 0 108px;
    width: 657px;
    height: 61px;
}

.one-popup>a {
    display: inline-block;
    background: url(../image/btn-confirm2.png);
    width: 80px;
    height: 29px;
}

.ten-popup {
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 10px 0 0 0px;
    width: 477px;
    height: 271px;
    line-height: 1.6;
}

.ten-popup>a {
    display: inline-block;
    background: url(../image/btn-confirm2.png);
    width: 80px;
    height: 29px;
    margin-bottom: 2px;
}










.awardRecord4 {
    background-image: url(../image/popup-t.png);
    background-size: 100% 100%;
}

.awardRecord4 .lay_content {
    margin-top: 47px;
}

.awardRecord4 .lay_close {
    font-size: 20px;
    top: 9px;
    right: 26px;
    opacity: 0;
}

.dhPages {
    color: #601400;
    font-size: 16px;
    font-weight: 700;
}

.dhPages-p {
    width: 220px;
    height: 52px;
    display: flex;
    margin: auto;
}

.dhPages-flex {
    margin: auto;
    margin-top: 27px;
    display: flex;
    justify-content: space-between;
    width: 260px;
}

.dhPages-flex>a {
    display: inline-block;
    background: url(../image/btn-confirm.png);
    width: 120px;
    height: 40px;
}

.dhPages-flex>a:nth-child(2) {
    background-position-x: -140px;
}