/* =========================================
   全局
========================================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

html{
    width:100%;
}

body{
    width:100%;

    background:#dcefff;

    font-family:
        "Microsoft YaHei",
        Arial,
        sans-serif;

    /*
      给底部固定按钮预留空间
      防止网页最后内容被挡住
    */
    padding-bottom:
        calc(72px + env(safe-area-inset-bottom));
}


/* =========================================
   页面主体
========================================= */

.page{
    position:relative;

    width:min(100vw,430px);

    aspect-ratio:733/2388;

    margin:0 auto;

    background:
        url("../image/htybj1.jpg")
        top center /
        100% 100%
        no-repeat;

    overflow:hidden;
}


/* =========================================
   下载微码送288元体验金
========================================= */

.bonus{
    position:absolute;

    top:30.1%;
    left:0;

    width:100%;
    height:5.1%;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#ffdf3e;

    font-size:30px;
    font-weight:1000;

    letter-spacing:-1px;

    text-shadow:
        -3px 0 #fff,
         3px 0 #fff,
         0 -3px #fff,
         0 3px #fff;
}


.bonus b{
    font-size:45px;

    color:#ff3824;

    margin:0 3px;

    text-shadow:
        0 2px #fff;
}


/* =========================================
   美女助理
========================================= */

.assistant{
    position:absolute;

    top:35.2%;
    left:4.7%;

    width:90.6%;
    height:4.3%;

    border:
        3px solid
        #ffd45d;

    border-radius:25px;

    background:
        linear-gradient(
            #fb3a25,
            #b60808
        );

    box-shadow:
        inset
        0 0 0 2px
        #ad0b08;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#fff0a0;

    font-size:15px;
    font-weight:900;

    white-space:nowrap;
}


.assistant b{
    font-size:20px;

    color:#fff;

    margin:0 2px;
}


/* =========================================
   白色信息卡片
========================================= */

.panel{
    position:absolute;

    top:40.5%;
    left:3.7%;

    width:92.6%;
    height:19.3%;

    border-radius:20px;

    background:
        rgba(
            255,
            255,
            255,
            .97
        );

    box-shadow:
        0 5px 16px
        #376f9c26;

    padding:
        14px
        14px
        10px;
}


/* =========================================
   卡片上半部分
========================================= */

.upper{
    display:grid;

    grid-template-columns:
        1.3fr
        .9fr;

    gap:8px;

    height:47%;
}


/* =========================================
   左侧微码
========================================= */

.leftinfo{
    display:flex;

    gap:10px;

    align-items:center;
}


.wmicon{
    position:relative;

    width:62px;
    height:62px;

    flex:none;

    border-radius:3px;

    background:#663887;

    color:#fff;

    display:grid;

    place-items:center;

    font-size:33px;
}


.wmicon:after{
    content:"微码";

    position:absolute;

    bottom:-15px;
    left:0;

    width:100%;
    height:16px;

    background:#f0a800;

    color:#fff;

    font-size:9px;

    display:grid;

    place-items:center;
}


/* =========================================
   微码介绍文字
========================================= */

.copy h2{
    margin:
        0
        0
        4px;

    font-size:19px;

    color:#20255c;
}


.copy p{
    margin:
        1px
        0;

    font-size:11.5px;

    line-height:1.35;

    color:#243064;
}


.red{
    color:#f02828;
}


.gold{
    color:#e99a00;

    font-weight:900;
}


/* =========================================
   右侧球队
========================================= */

.logos{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:5px;

    align-content:center;

    text-align:center;

    color:#35405e;

    font-size:8px;
}


.logo i{
    display:grid;

    place-items:center;

    margin:auto;

    width:25px;
    height:25px;

    border-radius:50%;

    background:#f2f5f8;

    border:
        1px solid
        #ccd4df;

    font-style:normal;

    font-size:13px;
}


.logo span{
    display:block;

    margin-top:2px;
}


/* =========================================
   卡片内：注册 / APP下载
========================================= */

.actions{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:38px;

    margin:
        7px
        2px
        7px;
}


.btn{
    height:36px;

    border-radius:7px;

    background:
        linear-gradient(
            #1da4ff,
            #0874eb
        );

    color:#fff;

    text-decoration:none;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:17px;
    font-weight:900;

    box-shadow:
        0 2px 4px
        #0064bd44;
}


/* =========================================
   微码资料
========================================= */

.meta{
    text-align:center;

    font-size:13px;

    font-weight:800;

    color:#20265e;

    line-height:1.45;

    white-space:nowrap;
}


.meta b{
    color:#ef2525;

    font-size:17px;
}


.vip{
    display:block;
}


/* =========================================
   中间微码复制按钮
========================================= */

.copybtn{
    position:absolute;

    top:61%;
    left:10%;

    width:80%;
    height:4.4%;

    border:0;

    border-radius:28px;

    background:
        linear-gradient(
            #ed86d8,
            #59a8e8
        );

    box-shadow:
        inset
        0 0 0 1px
        #fff8;

    color:#fff;

    font-weight:900;

    cursor:pointer;

    animation:
        autoScale
        .5s
        ease-in-out
        infinite
        alternate;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    z-index:10;
}


/* 呼吸动画 */

@keyframes autoScale{

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.06);
    }

}


/* 微码444 */

.main-text{
    font-size:20px;
}


/* 点击复制 */

.tip-text{
    font-size:12px !important;

    font-weight:400;

    opacity:.9;
}


.copybtn small{
    display:block;

    font-size:9px;

    font-weight:400;

    margin-top:1px;
}


/* =========================================
   空白区域图片
   图片文件：bottom.jpg
========================================= */

.bottom-image{
    position:absolute;

    top:67%;
    left:5%;

    width:90%;

    z-index:2;

    text-align:center;
}


.bottom-image img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;

    margin:0 auto;

    border-radius:12px;

    box-shadow:
        0 4px 15px
        rgba(0,0,0,.12);
}


/* =========================================
   风险提示
========================================= */

.notice{
    position:absolute;

    top:97%;

    left:7%;

    width:86%;

    text-align:center;

    color:#7e899c;

    font-size:9px;

    line-height:1.45;

    z-index:5;
}


/* =========================================
   复制成功提示
========================================= */

.toast{
    position:fixed;

    left:50%;
    bottom:
        calc(
            78px +
            env(safe-area-inset-bottom)
        );

    transform:
        translate(
            -50%,
            20px
        );

    opacity:0;

    background:#111e;

    color:#fff;

    padding:
        10px
        18px;

    border-radius:25px;

    transition:.2s;

    z-index:9999999;

    white-space:nowrap;

    pointer-events:none;
}


.toast.on{
    opacity:1;

    transform:
        translate(
            -50%,
            0
        );
}


/* ==================================================
   ★ 手机屏幕最底部固定悬浮按钮
================================================== */

#mobileFixedBar{

    /*
       最关键：
       fixed = 相对于手机屏幕固定
    */
    position:fixed !important;

    /*
       强制取消顶部定位
    */
    top:auto !important;

    /*
       永远贴在手机屏幕底部
    */
    bottom:0 !important;

    /*
       居中
    */
    left:50% !important;
    right:auto !important;

    transform:
        translateX(-50%) !important;


    /*
       宽度跟网页一致
    */
    width:100% !important;

    max-width:430px !important;


    /*
       自动高度
    */
    height:auto !important;


    /*
       内边距
       自动兼容iPhone底部安全区域
    */
    padding:
        7px
        10px
        calc(
            7px +
            env(safe-area-inset-bottom)
        ) !important;


    margin:0 !important;


    /*
       强制左右排列
    */
    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    align-items:center !important;

    justify-content:center !important;


    /*
       两个按钮中间距离
    */
    gap:10px !important;


    /*
       半透明白色背景
    */
    background:
        rgba(
            255,
            255,
            255,
            .96
        ) !important;


    /*
       顶部阴影
    */
    box-shadow:
        0 -3px 15px
        rgba(0,0,0,.18) !important;


    /*
       永远显示在最上层
    */
    z-index:2147483647 !important;
}


/* =========================================
   底部两个按钮共同样式
========================================= */

#mobileFixedBar .mobile-fixed-btn{

    /*
       防止继承其他按钮的absolute
    */
    position:relative !important;

    top:auto !important;
    bottom:auto !important;

    left:auto !important;
    right:auto !important;


    /*
       两个按钮各占一半
    */
    flex:
        1
        1
        0 !important;

    width:auto !important;

    min-width:0 !important;


    /*
       按钮高度
    */
    height:48px !important;


    margin:0 !important;

    padding:
        0
        5px !important;


    /*
       文字居中
    */
    display:flex !important;

    align-items:center !important;

    justify-content:center !important;


    border:0 !important;

    border-radius:25px !important;


    color:#fff !important;

    text-decoration:none !important;


    font-size:18px !important;

    font-weight:900 !important;

    line-height:1 !important;


    white-space:nowrap !important;


    box-shadow:
        0 3px 8px
        rgba(0,0,0,.18) !important;


    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================
   左边：点击注册
========================================= */

#mobileFixedBar .mobile-register{

    background:
        linear-gradient(
            180deg,
            #ff5c4d,
            #f32620
        ) !important;
}


/* =========================================
   右边：点击下载
========================================= */

#mobileFixedBar .mobile-download{

    background:
        linear-gradient(
            180deg,
            #29adff,
            #0786ed
        ) !important;
}


/* =========================================
   点击效果
========================================= */

#mobileFixedBar .mobile-fixed-btn:active{

    transform:
        scale(.96) !important;
}


/* =========================================
   PC端
========================================= */

@media(min-width:700px){

    body{
        padding-top:16px;
    }


    .page{

        box-shadow:
            0
            0
            30px
            #174d7b40;

    }

}


/* =========================================
   小屏手机
========================================= */

@media(max-width:370px){

    .bonus{
        font-size:21px;
    }


    .bonus b{
        font-size:32px;
    }


    .assistant{
        font-size:13px;
    }


    .assistant b{
        font-size:17px;
    }


    .actions{
        gap:20px;
    }


    .meta{
        font-size:11px;
    }


    .meta b{
        font-size:14px;
    }


    /*
       小屏幕底部按钮稍微缩小
    */
    #mobileFixedBar
    .mobile-fixed-btn{

        height:45px !important;

        font-size:16px !important;

    }

}