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: 29.6vw;
     height: 6.67vw;
     color: #18181B;
     font-size: 4vw;
     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: 40vw;
     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: 40vw;
     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;
     overflow-y: auto;
 }

 #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 {
     margin: 0 5vw;
     color: #293F8E;
     font-size: 2.73vw;
     font-weight: 500;
 }

 #DataGroup #GroupBottom #BottomTitle #CityCount {
     display: inline;
 }

 #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.png') 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: 11.867vw;
     height: 4vw;
     font-size: 4vw;
     color: #E07E28;
     text-align: center;
     line-height: 4vw;
 }

 #CertTaiJi #CertInfo #Infos {
     margin-top: 28.8vw;
     width: 66.8vw;
     font-size: 2.5vw;
     line-height: 4vw;
 }

 #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.png') 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: flex-end;
     justify-content: flex-start;
     width: 40vw;
     height: 20vw;
     font-size: 2.5vw;
     line-height: 3.5vw;
 }

 #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: 95vw;
     height: 124.9vw;
     /* border:1px solid red; */
     background: url('/Webp/Nft_New.webp') no-repeat center/100% 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
 }


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

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

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

 #NftPopup #NFtInfo #NftGet {
     /* border: 1px solid red; */
     margin-top: 5.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: 22vw;
     /* border: 1px solid red; */
 }

 #BottomBanner #MarkerNav .NavContent {
     height: 100%;
     width: 33%;
     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 {
     height: 13vw;
     width: 13vw;
     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;
 }