* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: auto;
    /* 防止输入法弹出时页面缩放 */
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* pc */
@media screen and (min-width: 750px) {
    /* 外层整体盒子 */
    .wk-box {
        position: relative;
        width: 100%;
        max-width: 750px;
        aspect-ratio: 1 / 1.8;
        margin: 0 auto;
        background-image: url(../image/bg.jpg);
        background-size: 100% 100%;
    }
}

/* 手机端 */
@media screen and (max-width: 750px) {

    /* 外层整体盒子 */
    .wk-box {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background-image: url(../image/bg.jpg);
        background-size: 100% 100%;
    }
}


/* ............................................................ */

/* 顶部收藏 */
.collect {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2%;
}

/* 左侧收藏 */
.collect-img {
    width: 50%;
    padding-left: 5%;
}

/* 右侧添加桌面 */
#addDesktop {
    width: 26%;
    padding-right: 3%;
}

/* ............................................................ */

/* 域名 */
#domainName {
    display: none;
    position: relative;
    width: 100%;
    margin-top: 5%;
    text-align: center;
}

/* 域名背景图片 */
.nameBg {
    width: 90%;
}

/* 域名gif图片 */
.name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 40%;
}

/* ............................................................ */

/* 邀请码 */
#inviteCode {
    display: none;
    position: relative;
    width: 100%;
    margin-top: 4%;
    text-align: center;
    line-height: 0;
    font-size: 0;
}

/* 邀请码背景图片 */
.inviteBg {
    width: 90%;
}

/* 邀请码内容 */
.copy-content {
    position: absolute;
    width: 40%;
    height: 80%;
    top: 50%;
    left: 66%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* 8位邀请码数值 */
#codetext {
    font-size: clamp(24px, 6vw, 45px);
    font-weight: 500;
    color: #EDB98A !important;
}

/* 防止Firefox移动端将codetext识别为链接 */
#codetext *{
    color: #EDB98A !important;
    text-decoration: none !important;
}

/* 邀请码复制按钮 */
#copyBtn {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 邀请码复制按钮图片 */
#copyBtn img {
    padding-top: 5px;
    width: 70%;
    height: 70%;
}

/* 复制成功弹窗 */
#clip-board {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    transition: all 800ms;
    pointer-events: none;
}

#clip-board img {
    width: 100%;
}

/* ............................................................ */

/* 手机图 */
.phone {
    width: 80%;
    margin: 0 auto;
}

.phone img {
    width: 100%;
}

/* ............................................................ */

/* 底部 */
.footer {
    position: absolute;
    width: 92%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* 每一个模块 */
.footer-item {
    position: relative;
    margin-bottom: 1.2%;
}

/* 每个模块背景图 */
.item-img {
    width: 100%;
}

/* 模块1中的app域名 */
.nameApp {
    position: absolute;
    width: 23%;
    top: 46%;
    left: 16%;
}

/* 模块1中的bet域名 */
.nameBet {
    position: absolute;
    width: 23%;
    top: 83%;
    left: 16%;
}

/* 模块1中的app按钮 */
.one-app-btn {
    position: absolute;
    width: 50%;
    top: 34%;
    right: 3%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 模块1中的app按钮图片 */
.one-app-btn img {
    width: 36%;
    padding: 0 2.5%;
}

/* 模块1中的bet按钮 */
.one-bet-btn {
    position: absolute;
    width: 50%;
    top: 68.8%;
    right: 3%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 模块1中的bet按钮图片 */
.one-bet-btn img {
    width: 36%;
    padding: 0 2.5%;
}

/* 模块2中的复制id按钮 */
.two-id-btn {
    position: absolute;
    width: 12%;
    bottom: 9%;
    right: 36%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 模块2中的复制id按钮图片 */
.two-id-btn img {
    width: 100%;
}

/* 模块2中的咨询按钮 */
.two-kefu-btn {
    position: absolute;
    width: 18%;
    top: 32%;
    right: 4%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 模块2中的咨询按钮图片 */
.two-kefu-btn img {
    width: 100%;
}

/* 模块2中的下载按钮 */
.two-download-btn {
    position: absolute;
    width: 18%;
    top: 68%;
    right: 4%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 模块2中的下载按钮图片 */
.two-download-btn img {
    width: 100%;
}

/* 模块3中的浏览器下载按钮 */
.three-browser-btn {
    position: absolute;
    width: 100%;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 模块3中的浏览器下载按钮图片 */
.three-browser-btn img {
    width: 14%;
    padding: 0 2.5%;
}

/* ............................................................ */

/* 浏览器引导弹窗 */
/* 遮罩层 */
#guide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

/* 弹窗内容 */
.guide-content {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}

/* 弹窗图片 */
.guideImg {
    width: 100%;
}

/* 关闭按钮 */
#closeGuide {
    position: absolute;
    width: 8%;
    top: 5%;
    right: 5%;
    z-index: 1002;
}

/* 复制链接按钮 */
#copyLink {
    position: absolute;
    width: 90%;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
}

/* ............................................................ */

/* 点击添加到主屏幕弹窗 */
/* 遮罩层 */
#addDesktopModel {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 弹窗内容 */
.addDesktopContent {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}

/* 弹窗图片 */
#addDesktopImg {
    width: 100%;
}

/* 关闭按钮 */
#closeDesktop {
    position: absolute;
    width: 8%;
    top: 5%;
    right: 5%;
    z-index: 1002;
}

/* ............................................................ */

/* 点击下载按钮打开弹窗 */
/* 遮罩层 */
#downloadModal {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 弹窗内容 */
#downloadContent {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}

/* 弹窗图片 */
#downloadModleImg {
    width: 100%;
}

/* 关闭按钮 */
#closeDownload {
    position: absolute;
    width: 8%;
    top: 4%;
    right: 5%;
}

/* 保存图片按钮 */
#saveImg {
    position: absolute;
    width: 18%;
    right: 10%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 主域名 */
#mainDomain {
    position: absolute;
    width: 58%;
    right: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 主域名文本 */
.mainDomainText {
    font-size: clamp(24px, 6vw, 45px);
    font-weight: 500;
    color: #EDB98A;
}

/* 主域名复制按钮 */
#mainCopyBtn {
    padding-top: 4%;
    width: 30.5%;
}

/* 副域名1 */
#oneDomain {
    position: absolute;
    width: 60%;
    right: 12%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 副域名1文本 */
.oneDomainText {
    font-size: clamp(16px, 4.2vw, 35px);
    font-weight: 400;
    color: #fff;
    letter-spacing: 1px;
    padding-bottom: 3px;
}

/* 副域名1复制按钮 */
#oneCopyBtn {
    padding-bottom: 0.5%;
    width: 27%;
}

/* 副域名2 */
#twoDomain {
    position: absolute;
    width: 60%;
    right: 12%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 副域名2文本 */
.twoDomainText {
    font-size: clamp(16px, 4.2vw, 35px);
    font-weight: 400;
    color: #fff;
    letter-spacing: 1px;
}

/* 副域名2复制按钮 */
#twoCopyBtn {
    padding-top: 1.5%;
    width: 27%;
}

/* 副域名3 */
#threeDomain {
    position: absolute;
    width: 60%;
    right: 12%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 副域名3文本 */
.threeDomainText {
    font-size: clamp(16px, 4.2vw, 35px);
    font-weight: 400;
    color: #fff;
    letter-spacing: 1px;
}

/* 副域名3复制按钮 */
#threeCopyBtn {
    padding-top: 1.5%;
    width: 27%;
}

/* 下载按钮(三端都有，需要js控制) */
#downloadBox {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* 下载按钮图片 */
#downloadBox img {
    width: 47.5%;
    padding: 2% 0;
}

/* 去信任弹窗 */
/* 遮罩层 */
#trustModal{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 弹窗内容 */
.trustContent {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}

.trustImg{
    width: 100%;
    filter: drop-shadow(0 0 10px rgba(63, 63, 63, 0.5));
}

#goTrust {
    position: absolute;
    bottom: 22%;
    right: 5%;
    width: 14%;
}

/* 查看教程按钮 */
#tutorial {
    position: absolute;
    width: 34%;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
}

/* 点击教程按钮打开弹窗 - 遮罩层 */
#tutorialModal {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 弹窗内容 */
#tutorialContent {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    transition: transform 0.5s ease-in-out;
    z-index: 1001;
}

/* 弹窗图片 */
#iosTutorial {
    width: 100%;
}

/* 关闭按钮 */
#closeTutorial {
    position: absolute;
    width: 5%;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    cursor: pointer;
}

/* 端教程标题 */
#tutorialTitle {
    position: absolute;
    width: 94%;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

/* 弹窗tab */
.tab {
    position: absolute;
    width: 92%;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1002;
}

/* 弹窗标签图片 */
.tab img {
    width: 48%;
}


/* ............................................................ */

/* 咨询客服弹窗 - 遮罩层 */
#kefuModal {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 弹窗内容 */
#kefuModalContent {
    position: absolute;
    width: 100%;
    height: 78%;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
    z-index: 1001;
    /* 防止输入法弹出时缩放 */
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
}

/* 客服iframe */
#kefuIframe {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    /* 防止iframe内输入法弹出时影响外层页面 */
    touch-action: manipulation;
}

/* 关闭按钮 */
#closeKefu {
    position: absolute;
    width: 6%;
    aspect-ratio: 1 / 1;
    top: 0;
    right: 0;
    z-index: 1002;
}