html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

    div {
        padding: 0;
        margin: 0;
        display: block;
    }


    /* ===========  开屏页  =========== */
    #start {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        /* display: none; */
        display: flex;
        z-index: 2000;
        width: 100vw;
        height: 100vh;
        background: url('/Webp/start.webp') no-repeat center/100% 100%;
    }

    /* ===========  地图  =========== */
    #container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /*  =========== 顶部 ===========  */
    #TopBanner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1000;
        height: 50vw;
        /*440/750=*/
        /* border:1px solid red; */
        background: url('/Webp/logoBg.webp') no-repeat 50% 30%/90%, url('/Webp/top_bg.webp') no-repeat center center/100% 60vw;
    }

    /*  =========== 登录 ===========  */
    #Login {
        position: absolute;
        left: 0;
        right: 0;
        top: 38.167vw;
        bottom: 0;
        z-index: 2000;
        background-color: #fff;
        border-top-left-radius: 6.67vw;
        border-top-right-radius: 6.67vw;
        /* display: flex; */
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    #Login .LoginAuthorize {
        width: 82.4vw;
        height: 12.8vw;
        border-radius: 6.4vw;
    }

    #Login #TopContent {
        margin-top: 6.5vw;
        width: 88vw;
        height: 4.5vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* background-color: red; */
    }

    #Login #TopContent #TopContentTopTitle {
        font-size: 6.18vw;
        line-height: 8.533vw;
    }

    #Login #TopContent #TopContentRightClose {
        width: 4.5vw;
        height: 4.5vw;
        background: url('/Webp/city_close.webp') no-repeat 50% 50%/100% 100%;
    }

    #Login #InfoContent {
        margin-top: 4.2vw;
        width: 88vw;
    }

    #Login #InfoContent #InfoContentTitle {
        font-size: 6.18vw;
        line-height: 8.533vw;
    }

    #Login #InfoContent .InfoContentInfo {
        margin-top: 2.4vw;
        font-size: 4vw;
        line-height: 6.5vw;
        color: #515151;
    }

    #Login #LoginOpt1 {
        display: flex;
        /* display: none; */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    #Login #LoginOpt1 #LogoContent {
        margin-top: 8.4vw;
        margin-bottom: 8.4vw;
        width: 58.933vw;
        height: 46.667vw;
        background: url('/Webp/logo.webp') no-repeat 50% 50%/100% 100%;
    }



    #Login #LoginOpt1 .AuthorizeContent {
        margin-bottom: 4vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4vw;
        background-color: #EEF0F2;
    }

    #Login #LoginOpt1 #WeChatIcon {
        width: 5.3vw;
        height: 5.3vw;
        background: url('/Webp/WeChatIcon.webp') no-repeat 50% 50%/100% 100%;
        margin-right: 4vw;
    }

    #Login #LoginOpt1 #GoogleIcon {
        width: 5.3vw;
        height: 5.3vw;
        background: url('/Webp/GoogleIcon.webp') no-repeat 50% 50%/100% 100%;
        margin-right: 4vw;
    }

    #Login #LoginOrther {
        margin-top: 4vw;
        width: 70vw;
        height: 4.8vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #Login #LoginOrther #OrtherLineLeft {
        width: 21.333vw;
        height: 1px;
        background: linear-gradient(to left, transparent 0%, #878787 0%, #fff 100%, transparent 100%) bottom /100% 1px no-repeat;
    }

    #Login #LoginOrther #OrtherLineTitle {
        font-size: 3.467vw;
        color: #878787;
    }

    #Login #LoginOrther #OrtherLineRight {
        /* border: 1px solid red; */
        width: 21.333vw;
        height: 1px;
        background: linear-gradient(to right, transparent 0%, #878787 0%, #fff 100%, transparent 100%) bottom /100% 1px no-repeat;
    }

    #Login #LoginOpt1 #LoginPhone #PhoneCoin {
        margin-top: 4vw;
        width: 10.133vw;
        height: 10.133vw;
        border-radius: 5.07vw;
        background: url('/Webp/PhoneIcon.webp') no-repeat 50% 50%/5.333vw 5.333vw, #EEF0F2;
    }



    #LoginOpt2 {
        display: flex;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    #LoginOpt2 #LoginPhoneTitle {
        margin-top: 4vw;
        width: 87.733vw;
        height: 12.8vw;

        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    #LoginOpt2 #LoginPhoneTitle #LoginPhoneTitleInfo {
        width: 24.533vw;
        height: 5.6vw;
        font-size: 4vw;
        color: #000;
        background: linear-gradient(to bottom, transparent 0%, #fff 70%, #71BEFD 70%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

    #LoginOpt2 #loginPhoneInput {
        margin-top: 4vw;
        width: 87.733vw;
        height: 12.8vw;
    }

    #LoginOpt2 #loginPhoneInput input {

        border: none;
        border-radius: 6.4vw;
        width: 87.733vw;
        height: 12.8vw;
        /* background-color: red; */
        font-size: 4vw;
        background-color: #f6f6f6;
        text-indent: 1rem;
        color: #333;
    }


    #LoginOpt2 #loginCipherInput {
        margin-top: 4vw;
        width: 87.733vw;
        height: 12.8vw;
    }

    #LoginOpt2 #loginCipherInput input {
        border: none;
        border-radius: 6.4vw;
        width: 87.733vw;
        height: 12.8vw;
        /* background-color: red; */
        font-size: 4vw;
        background-color: #f6f6f6;
        text-indent: 1rem;
        color: #333;
    }


    #LoginOpt2 #loginButtonSubmit {
        margin-top: 8vw;
        width: 87.733vw;
        height: 14.667vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #000;
        color: #fff;
        font-size: 5.333vw;
    }

    #LoginOpt2 #loginFroget {
        margin-top: 2vw;
        /* border: 1px solid red; */
        width: 87.733vw;
        font-size: 3.467vw;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #B6B7B7;
    }


    #LoginOpt2 .ToAuthorize {
        margin-top: 4.2vw;
        width: 40vw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        /* border: 1px solid red; */
    }

    #LoginOpt2 #WeChatCoin {
        width: 10.133vw;
        height: 10.133vw;
        border-radius: 5.07vw;
        background: url('/Webp/WeChatIcon.webp') no-repeat 50% 50%/5.333vw 5.333vw, #EEF0F2;
    }

    #LoginOpt2 #GoogleCoin {
        width: 10.133vw;
        height: 10.133vw;
        border-radius: 5.07vw;
        background: url('/Webp/GoogleIcon.webp') no-repeat 50% 50%/5.333vw 5.333vw, #EEF0F2;
    }


    /* =========== 默认隐藏：点击参与后中间随定位缩小 =========== */
    #MiddlePalm {
        position: absolute;
        z-index: 1001;
        /* 确保在地图之上 */
        height: 60vw;
        width: 60vw;
        left: 20vw;
        top: 50%;
        margin-top: -30vw;
        background: url('/Webp/palm.webp') no-repeat 50% 50%/80%;
        display: none;
        transition: transform 0.1s ease-out;
    }

    /* =========== 打卡成功：弹出遮罩提示 =========== */

    #OptSuccess {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.80);
        z-index: 2000;
        display: none;
        /* display: flex; */
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #OptSuccess #OptSuccessInfo {
        width: 100vw;
        height: 102vw;
        /* border: 1px solid red; */
        background: url('/Webp/OptSuccess.webp') center center/100% 100% no-repeat;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    #OptSuccess #OptSuccessInfo #OptSuccessInfoToCert {
        width: 36vw;
        height: 11vw;
        /* border: 1px solid red; */
        margin-bottom: 5vw;
        background: url('/Webp/OptSuccessRect.webp') center center /36vw 11vw no-repeat;
    }

    #OptSuccess #OptSuccessClose {
        margin-top: 5vw;
        width: 10vw;
        height: 10vw;
        background: url('/Webp/OptClose.webp') top center/10vw 10vw no-repeat;
        padding-bottom: 20vw;
    }

    /* =========== 数据统计 =========== */

    #DataGroup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 2000;
        display: none;
        /* display: flex; */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.80);
    }

    #DataGroup #GroupView {
        width: 85.6vw;
        height: 144.133vw;
        background-color: #fff;
        border-radius: 5.33vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    #DataGroup #GroupView #GroupTop {
        width: 78.4vw;
        height: 11vw;
        /* border: 1px solid red; */
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    #DataGroup #GroupView #GroupTop #TopNull {
        width: 5.333vw;
        height: 5.333vw;
    }

    #DataGroup #GroupView #GroupTop #TopTitle {
        width: 19.6vw;
        height: 6.67vw;
        color: #18181B;
        font-size: 4.8vw;
        font-weight: 600;
    }

    #DataGroup #GroupView #GroupTop #TopClose {
        width: 5.333vw;
        height: 10.333vw;
        background: url('/Webp/city_close.webp') no-repeat center/5.333vw 5.333vw;
    }

    #DataGroup #GroupView #GroupSearch {
        width: 80.4vw;
        height: 12vw;
        /* border: 1px solid red; */
        display: flex;
        align-items: flex-end;
    }

    #DataGroup #GroupView #GroupSearch #SearchView {
        width: 80.4vw;
        height: 8vw;
        /* border: 1px solid red; */
        background: url('/Webp/city_input.webp') no-repeat center/100% 10vw;
        /*切的图有外阴影所以比容器宽*/
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #DataGroup #GroupView #GroupSearch #SearchView #SearchNull {
        width: 5vw;
        height: 8vw;
        /* border: 1px solid red; */
    }

    #DataGroup #GroupView #GroupSearch #SearchView #SearchInput {
        border: none;
        height: 6vw;
        flex: 1;
        font-size: 2.67vw;
    }

    #DataGroup #GroupView #GroupSearch #SearchView #SearchInput:focus {
        outline: none;
        border: none;
    }

    #DataGroup #GroupView #GroupSearch #SearchView #SearchInput ::placeholder {
        font-size: 2.67vw;
    }

    #DataGroup #GroupView #GroupSearch #SearchView #SearchButton {
        width: 10vw;
        height: 8vw;
        /* border: 1px solid red; */
        background: url('/Webp/SearchButton.webp') no-repeat 0 50%/5.333vw 5.333vw;
    }

    #DataGroup #GroupNav {
        width: 80.13vw;
        height: 11vw;
        display: flex;
        align-items: flex-end;
    }

    #DataGroup #GroupNav #NavView {
        width: 80.13vw;
        height: 8vw;
        background: linear-gradient(90deg, #EFF6FF 0%, #ECFEFF 100%);
        box-shadow: 0 2px 10px 0 rgba(45, 50, 132, 0.10);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #DataGroup #GroupNav #NavView #NavViewTitle {
        width: 22vw;
        height: 8vw;
        font-size: 3.73vw;
        color: #293F8E;
        font-weight: 500;
        display: flex;
        align-items: center;
        /* justify-content: center; */
        text-indent: 10vw;
    }

    #DataGroup #GroupNav #NavView #NavViewNumbers {
        width: 26vw;
        height: 8vw;
        font-size: 3.73vw;
        color: #293F8E;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #DataGroup #GroupInfos {
        width: 80.13vw;
        height: 92vw;
    }

    #DataGroup #GroupInfos .GroupInfo {
        width: 80.13vw;
        height: 12vw;
        border-bottom: 1px solid #E5E7EB;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    #DataGroup #GroupInfos .GroupInfo .InfoIcon {
        width: 10vw;
        height: 12vw;
        background: url('/Webp/iconAddress.webp') no-repeat center/3.2vw 4vw;
    }

    #DataGroup #GroupInfos .GroupInfo .InfoNameCh {
        height: 12vw;
        display: flex;
        align-items: center;
        font-size: 3.47vw;
        color: #000;
        font-weight: 500;
        /* border: 1px solid red; */
    }

    #DataGroup #GroupInfos .GroupInfo .InfoNameEn {
        flex: 1;
        height: 12vw;
        display: flex;
        align-items: center;
        /* border: 1px solid red; */
        font-size: 2.67vw;
        color: #7C7C7D;
        text-indent: 0.5rem;
        font-weight: 100;
    }

    #DataGroup #GroupInfos .GroupInfo .InfoNumbers {
        width: 25vw;
        height: 12vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.47vw;
        color: #155DFC;
        font-weight: 500;
    }

    #DataGroup #GroupBottom {
        width: 80.13vw;
        height: 14vw;
        border-radius: 0 0 40px 40px;
        background: linear-gradient(90deg, #EFF6FF 0%, #ECFEFF 100%);
        box-shadow: 0 2px 10px 0 rgba(45, 50, 132, 0.10);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #DataGroup #GroupBottom #BottomTitle {
        color: #293F8E;
        font-size: 3.73vw;
        font-weight: 500;
    }

    #DataGroup #GroupBottom #BottomTitle #BottomNumbers {
        color: #FF6536;
    }


    /* =========== 遮罩证书 =========== */
    #CertTaiJi {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 2000;
        display: none;
        /* display: flex; */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: url('/Webp/cert_light.webp') center center/100% 100% no-repeat;
    }

    /* 证书 */
    #CertTaiJi #CertInfo {
        width: 77.8vw;
        height: 158vw;
        /* 标准高度： 118vw; */
        /* border: 1px solid red; */
        background: url('/Webp/cert_bg.webp') no-repeat top center/77.8vw 118vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }



    /*关闭*/
    #CertTaiJi #CertInfo #CertClose {
        margin-top: 5vw;
        width: 77.8vw;
        height: 8vw;
        /* border: 1px solid red; */
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    #CertTaiJi #CertInfo #CertClose #CertCloseIcon {
        width: 8vw;
        height: 8vw;
        /* border: 1px solid red; */
        background: url('/Webp/OptClose.webp') top center/8vw 8vw no-repeat;
    }


    #CertTaiJi #CertInfo #CertTitle {
        /* border: 1px solid red; */

        margin-top: 4.867vw;
        height: 4vw;
        font-size: 4vw;
        color: #E07E28;
        text-align: center;
        line-height: 4vw;
    }

    #CertTaiJi #CertInfo #Infos {
        margin-top: 32.8vw;
        width: 66.8vw;
    }

    #CertTaiJi #CertInfo #Infos #InfosContent {
        font-size: 2.933vw;
        line-height: 5.0vw;
        color: #141517;
        font-weight: 400;
    }

    #CertTaiJi #CertInfo .CertNumber {
        color: #E07E28;
    }

    #CertTaiJi #CertInfo #Infos #InfosBottom {
        margin-top: 5vw;
        font-size: 2.933vw;
        line-height: 5.0vw;
        color: #141517;
        font-weight: 400;
    }

    #CertTaiJi #CertInfo #CertBotton {
        /* border: 1px solid red; */
        margin-top: 12.33vw;
        width: 66.8vw;
        height: 20vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #CertTaiJi #CertInfo #CertBotton #RfCode {
        /* border: 1px solid red; */
        min-width: 14.933vw;
        height: 20vw;
        background: url('/Webp/RfCode.webp') no-repeat 50% 0%/14.933vw 14.933vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        font-size: 1.867vw;
        color: #787878;
        font-weight: 200;
    }

    #CertTaiJi #CertInfo #CertBotton #CertXieHui {
        /* border: 1px solid red; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 41.067vw;
        height: 7.867vw;
        font-size: 2.933vw;
        line-height: 4vw;
    }

    #CertTaiJi #CertInfo #CertBotton #CertXieHui #CertData {}

    /* 分享 */
    #CertTaiJi #CertShare {
        width: 100vw;
        height: 40vw;
        /* border: 1px solid red; */
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2001;
        background: url('/Webp/logo_left_bottom.webp') no-repeat 0% 100%/38.23vw 35vw;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    #CertTaiJi #CertShare #CertSharOpt {
        /* width: 58vw; */
        /* 标准宽度 */
        width: 77.8vw;
        height: 9.33vw;
        /* border: 1px solid red; */
        background: url('/Webp/shareOpt.webp') no-repeat 100% 50%/58vw 100%;
    }


    /* =========== 纪念徽章 =========== */

    #NftPopup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 2000;
        background-color: rgba(0, 0, 0, 0.80);
        display: none;
        /* display: flex; */
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }


    #NftPopup #NFtInfo {
        width: 76.2vw;
        height: 124.9vw;
        /* border:1px solid red; */
        background: url('/Webp/Nft_New.webp') no-repeat center/76.2vw 124.9vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    #NftPopup #NFtInfo #NftInput {
        /* border: 1px solid red; */
        /* background-color:red; */
        margin-top: 88.9vw;
        width: 67vw;
        height: 13vw;
    }

    #NftPopup #NFtInfo #NftInput input {
        width: 67vw;
        height: 13vw;
        padding: 0;
        border-radius: 4vw;
        border: none;
        text-align: center;
        font-size: 4.5vw;
    }

    #NftPopup #NFtInfo #NftInput input:focus {
        border: none;
        outline: none;
    }

    #NftPopup #NFtInfo #NftGet {
        /* border: 1px solid red; */
        margin-top: 6.2vw;
        width: 46.667vw;
        height: 12vw;
        background: url('/Webp/nft_target.webp') no-repeat center/100% 100%;
    }

    #NftPopup #NftPopupClose {
        margin-top: 5vw;
        width: 10vw;
        height: 10vw;
        background: url('/Webp/OptClose.webp') top center/10vw 10vw no-repeat;
        padding-bottom: 20vw;
    }


    /* =========== 底部 =========== */
    #BottomBanner {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        height: 60vw;
        /* border-top: 1px solid red; */
        background: url('/Webp/bottom_bg.webp') no-repeat center center/100% 60vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /*底部导航栏目*/
    #BottomBanner #MarkerNav {
        width: 70vw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 18vw;
        /* border: 1px solid red; */
    }

    #BottomBanner #MarkerNav .NavContent {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        /* border: 1px solid red; */
    }

    #BottomBanner #MarkerNav .NavContent .NavImg {
        height: 13vw;
        width: 13vw;
        /* border: 1px solid red; */
    }

    #BottomBanner #MarkerNav .NavContent .stat {
        background: url('/Webp/stat.webp') no-repeat 50% 50%/120% 120%;
    }

    #BottomBanner #MarkerNav .NavContent .cert {
        background: url('/Webp/cert.webp') no-repeat 50% 50%/120% 120%;
    }

    #BottomBanner #MarkerNav .NavContent .badge {
        background: url('/Webp/badge.webp') no-repeat 50% 50%/120% 120%;
    }

    #BottomBanner #MarkerNav .NavContent .NavImg .ImgLock {
        width: 100%;
        height: 100%;
        background: url('/Webp/lock.webp') no-repeat 50% 50%/30% 30%;
    }

    #BottomBanner #MarkerNav .NavContent .NavTitle {
        text-align: center;
        font-size: 3vw;
        color: #000;
    }

    #BottomBanner #MarkerNav .NavContent .NavLock {
        color: #3F6184;
    }

    /* 底部参与按钮 */
    #BottomBanner #createMarker {
        width: 70vw;
        /*520/750=0.69333*/
        height: 16vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        /* border: 1px solid red; */
    }

    #BottomBanner #createMarker #MarkerButton {
        width: 100%;
        height: 12vw;
        /*90/750=0.12*/
        border: none;
        border-radius: 6vw;
        background-color: #18181B;
        color: #fff;
        font-size: 4.533vw;
        /*34/750*/
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /*底部技术支持*/
    #BottomBanner #MarkerInfo {
        width: 100%;
        height: 6vw;
        font-size: 2.5vw;
        color: #3F6184;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        /* border: 1px solid red; */
    }


    /*百度地图控件样式调整*/
    .BMap_stdMpZoom {
        right: 10px !important;
        bottom: 50% !important;
        transform: translateY(50%) !important;
    }

    .BMap_scaleCtrl {
        left: 10px !important;
        bottom: 10px !important;
    }