@charset "utf-8";

#system.userinfo {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#page {
    display: flex;
    overflow: hidden;
    align-items: flex-start;
}

.pagel {
    height: 100vh;
    background: url(../images/asdid-bg.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 .7rem;
}

.pagel div h3 {
    display: flex;
    font-size: 0.55rem;
    line-height: 0.77rem;
    font-weight: normal;
}

.pagel div h3 span {
    color: #FFFFFF;
}

.pagel div h3 b {
    display: block;
    font-weight: normal;
    color: #71A0FE;
    margin-left: .2rem;
}

.pagel div h5 {
    font-size: 0.16rem;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-top: .2rem;
}

.pager {
    flex: 1;
    min-width: 0;
    background: url(../images/lgr-bg.png) no-repeat;
    background-position: right bottom;
    background-size: cover;
    display: flex;
    flex-direction: column;
    padding-left: 1.7rem;
    padding-right: 1.5rem;
    position: relative;
    height: 100vh;
    overflow-y: auto;
    padding-bottom: .35rem;
}
.gohome{
    display:flex;
    justify-content:flex-end;
}
.gohome a{
    border:1px solid #0397FB;
    min-width:1.49rem;
    line-height:.44rem;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 .15rem;
    border-radius:.23rem;
    font-size:.2rem;
    color:#3A3F63;
    margin-top: .4rem;
    
}
.gohome a img{
    height:.22rem;
    margin-right:.07rem;
}
.pagermain {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    padding-top: .4rem;
    position: relative;
}

.pagermain-box {
    width: 100%;
    position: relative;
    z-index:1;
}
.home-lb .pagermain-box:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    border-radius: .22rem .22rem 0px 0px;
background: linear-gradient(180deg, #F0F4FF 0%, rgba(241, 243, 249, 0) 100%);
}
.home-lb .pagermain-box::after{
    content:"";
    position:absolute;
    left:.1rem;
    top:.13rem;
    right:.1rem;
    bottom:.1rem;
    border-radius: .15rem .15rem 0px 0px;
background: #FFFFFF;
}

.pub-tit {
    display: flex;
    align-items: center;
    margin-bottom: .43rem;
}

.pub-tit li {
    padding-bottom: .2rem;
    position: relative;
}

.pub-tit li+li {
    margin-left: .7rem;
}

.pub-tit li::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 0.03rem;
    background: #0397FB;
    transition: all 0.5s;
    width: 0;
}

.pub-tit li a {
    display: block;
    font-size: 0.32rem;
    font-weight: normal;
    line-height: 0.4rem;
    letter-spacing: 0px;
    color: #333333;
}

.pub-tit li.on::before {
    width: 100%;
}

.pub-tit li.on a {
    color: #0397FB;
}

.login-main{
   margin-top:.2rem;
}

.login-main,
.reg-main,
modifypsd-main {
    position: relative;
}

.login-main>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -9;
    opacity: 0;
    transition: all 0.5s;
    display: none;
}

.login-main>div.on {
    position: relative;
    z-index: 9;
    opacity: 1;
    display: block;
}

/* 二维码登录 */
.qrcode-box {
    border-radius: 0.08rem;
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 0px 0.04rem 0.28rem 0px rgba(0, 0, 0, 0.1264);
    width: 7.65rem;
    padding: 0.6rem;
    max-width: 100%;
}

.qrcode-ewm {
    width: 3.58rem;
    background: rgba(11, 95, 228, .1024);
    padding: .15rem;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    max-width: 100%;

}

.qrcode-def img {
    display: block;
    width: 100%;
}

.qrcode-statu {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    background: rgba(250, 253, 255, .95);
    box-sizing: border-box;
    border: 1px solid #979797;
}

.qrcode-statu p {
    color: #fff;
    font-size: 0.32rem;
    font-weight: normal;
    line-height: .38rem;
    color: #333333;
    margin-top: .4rem;
}

.qrcode-statu div img {
    display: block;
    width: 0.8rem;
    margin: 0 auto;
}

.qrcode-box p {
    text-align: center;
    font-size: 0.18rem;
    font-weight: normal;
    line-height: .22rem;
    text-align: center;
    color: #666666;
    margin-top: .1rem;
}

.qrcode-box .input-item-btn {}

.qrcode-box .input-item-btn input {
    margin: 0 auto;
}



/* 弹窗样式 */

#popup {
    width: 6.48rem;
    position: absolute;
    left: 0;
    top: .75rem;
    border-radius: 0.08rem;
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.1264);
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
}

#popup.fixed-center {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 999;
}

.close-popup {
    position: absolute;
    right: 0.2rem;
    top: 0.17rem;
    z-index: 9;
}

.close-popup img {
    display: block;
    width: 0.32rem;
    cursor: pointer;
}

.popup-box {
    position: relative;
}

.popup-subinfo {
    padding: .42rem .8rem .55rem .8rem;
}

.popup-subinfo h3 {
    font-size: 0.2rem;
    font-weight: normal;
    line-height: 0.28rem;
    text-align: center;
    color: #3A3F63;
}

.popup-subinfo h4 {
    font-size: 16px;
    font-weight: normal;
    line-height: .24rem;
    color: #0397FB;
    margin-top: .2rem;
}

.popup-subinfo p {
    font-size: 0.16rem;
    font-weight: normal;
    line-height: .24rem;
    color: #3A3F63;
    margin-top: .2rem;
}

.popup-subinfo .input-item-btn {
    margin-top: .6rem;
}

.popup-subinfo .input-item-btn input {
    margin: 0 auto;
}


.popup-gzgzh {}

.popup-gzgzh .qrcode-ewm {
    width: 2rem;
    margin-top: .25rem;
    padding: .08rem;
}

.popup-gzgzh .qrcode-box {
    padding: .4rem;
    width: auto;
}

.popup-gzgzh .qrcode-box h3 {
    font-size: 0.2rem;
    font-weight: normal;
    line-height: 0.28rem;
    text-align: center;
    color: #3A3F63;
}

.popup-gzgzh .qrcode-box h5 {
    font-size: 0.16rem;
    font-weight: normal;
    line-height: 0.2rem;
    color: #3A3F63;
    margin-top: .3rem;
    text-align: center;
}

.popup-gzgzh .qrcode-box .confirm-gz {
    display: flex;
    justify-content: center;
    margin-top: .3rem;
}

.popup-gzgzh .qrcode-box .confirm-gz label {
    cursor: pointer;
    position: relative;
}

.popup-gzgzh .qrcode-box .confirm-gz label span {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: .2rem;
    background: url(../images/icon-true-def.png) no-repeat;
    background-position: left center;
    background-size: .16rem auto;
    transition: all 0.5s;
}

.popup-gzgzh .qrcode-box .confirm-gz input {
    border-radius: 50%;
    width: .2rem;
    opacity: 0;
}

.popup-gzgzh .qrcode-box .confirm-gz input:checked+span {
    background: url(../images/icon-true.png) no-repeat;
    background-position: left center;
    background-size: .16rem auto;
}

.popup-gzgzh .qrcode-box .input-item-btn {
    margin-top: .35rem;
}




/* 个人中心样式 */
.home {
    flex: 1;
    min-width: 0;
    background: rgba(218, 224, 242, .18);
    overflow-y: auto;
    padding: .48rem 0 1rem 0;
}

#head {
    background: #fff;
}

#head .hdbox {
    padding: .18rem 0;
}

.home-c {
    display: flex;
}

.home-l {
    width: 2.6rem;
    margin-right: .8rem;
}

.home-l h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #0971E8 -1%, #0EC1AC 100%);
    padding: 0 .18rem;
    height: 0.64rem;
}

.home-l h3 b {
    display: block;
    font-size: 0.22rem;
    font-weight: normal;
    line-height: normal;
    color: #FFFFFF;
}

.home-l h3 span {
    display: block;
    background: url(../images/icon-down.png) no-repeat;
    background-position: center center;
    background-size: .16rem;
    width: 0.3rem;
    height: 0.3rem;
}

.home-l ul li {
    position: relative;
}

.home-l ul li::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    opacity: 0.3;
    background: linear-gradient(90deg, #116DD1 -1%, #21B2AC 99%);
}


.home-l ul li a {
    display: block;
    display: flex;
    align-items: center;
    height: 0.68rem;
}

.home-l ul li a .icons {
    width: 0.4rem;
    height: 0.4rem;
    margin-right: .15rem;
}

.home-l ul li a .icons img {
    display: block;
    width: 0.4rem;
    max-width: 100%;
    max-height: 100%;
}

.home-l ul li a p {
    font-size: 0.16rem;
    font-weight: normal;
    line-height: 0.2rem;
    color: #3A3F63;
}

.home-l ul li.on a p {
    color: #0397FB;
}

.home-l ul li:hover a p {
    color: #0397FB;
}

.home-r {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    position: relative;
}

.home-rl {
    width: 3.2rem;
    margin-right: .4rem;
    border-radius: 0.08rem;
    background: #FFFFFF;
    padding: .35rem 0 .2rem 0;
}

.home-rr {
    flex: 1;
    min-width: 0;
    border-radius: 0.08rem;
    background: #FFFFFF;
    padding: .35rem .4rem .4rem .4rem;
}

.avatar-box{
    background:#fff;
    background: #f8f9fd;
    position: relative;
    z-index: 1;
    padding-bottom: .35rem;
}
.avatar-box:before{
    content:"";
    position:absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0 0 .08rem .08rem;
    background: #FFFFFF;
    z-index: -1;
}
.upload-pic {
    position: relative;
    /* width: 0.96rem; */
    /* height: 0.96rem; */
    margin: 0 auto;
    /* background: #EEF2FF; */
    /* border-radius: 50%; */
}
.upload-pic:before{
    content:"个人头像";
    display:block;
    font-size: .2rem;
    font-weight: bold;
    line-height: .24rem;
    text-transform: uppercase;
    letter-spacing: normal;
    color: #3A3F63;
    padding: 0 .3rem;
    margin-bottom: .3rem;
}
.upload-pic::after {
    content: "";
    position: absolute;
    right: 50%;
    transform: translateX(0.48rem);
    bottom: 0;
    width: 0.28rem;
    height: 0.28rem;
    background: #FFFFFF url(../images/upload-upicon.png) no-repeat;
    background-position: center center;
    background-size: .16rem auto;
    border-radius: 50%;
    box-shadow: 0px 0.04rem 0.16rem 0px rgba(179, 192, 231, 0.32);
    z-index: 2;
}

.upload-avatar {
    background: #EEF2FF;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    height: 100%;
    width: 0.96rem;
    height: 0.96rem;
    margin: 0 auto;
    background: #EEF2FF;
    border-radius: 50%;
}

.upload-avatar img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}


.upload-pic .layui-btn,
.upload-pic1 .layui-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: none;
    z-index: 9;
    opacity: 0;
}

.upload-pic1 .layui-btn {
    padding: 0;
}

.layui-upload-file {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    opacity: 0;
}

.home-rl p {
    text-align: center;
    font-size: 0.16rem;
    font-weight: normal;
    line-height: normal;
    color: #3A3F63;
    margin-top: .15rem;
}


.info-type {
    /*display: flex;*/
    align-items: center;
}

.info-type .role-ardio{
    float: right;
}

.info-type>span {
    font-size: 0.2rem;
    font-weight: bold;
    line-height: 0.24rem;
    text-transform: uppercase;
    color: #3A3F63;
}

.info-type>.role-ardio .layui-form-radio {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.info-type>.role-ardio .layui-form-radio i {
    width: 0.13rem;
    height: 0.13rem;
    border: 1px solid #0397FB;
    border-radius: 50%;
    font-size: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: .1rem;
}

.info-type>.role-ardio .layui-form-radio i::before {
    content: "";
    display: block;
    width: 0.05rem;
    height: 0.05rem;
    border-radius: 50%;
    background: #0397FB;
}

.info-type>.role-ardio .layui-form-radio div {
    font-size: 0.2rem;
    font-weight: normal;
    line-height: .24rem;
    color: #3A3F63;
}


.upload-pic1 {
    position: relative;
    width: 0.28rem;
    height: 0.28rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0.04rem 0.16rem 0px rgba(179, 192, 231, 0.32);
}

.upload-pic1 .upload-avatar {
    background: none;
    width: 100%;
    height: 100%;
}

.Uploadpic {
    padding: 0.2rem;
    display:flex;
}

.Uploadpic>.upload-pic1{
    flex:1;
    min-width:0;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
}
.Uploadpic>.upload-pic1>.upload-avatar{
    width:.28rem;
    height:.28rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0.04rem 0.16rem 0px rgba(179, 192, 231, 0.32);
    margin-bottom: .1rem;
}
.Uploadpic>.upload-pic1>img{
    display:block;
    width:100%;
}

.Uploadpic p {
    text-align: center;
    margin-top: 0.12rem;
    font-size: 0.14rem;
    color: #3A3F63;
}


@media screen and (max-width: 1024px) {
    .pagel {
        padding: 0 .3rem;
    }

    .pagel div h3 {
        font-size: .3rem;
        line-height: .5rem;
    }

    .pagel div h3 b {
        margin-left: .1rem;
    }

    .pager {
        padding: 0 .3rem .3rem .3rem;
    }

    .pub-tit {
        margin-bottom: .25rem;
    }

    .pub-tit li+li {
        margin-left: .3rem;
    }

    .pub-tit li a {
        font-size: .24rem;
    }

    .pub-tit li {
        padding-bottom: .1rem;
    }



    .qrcode-box {
        width: auto;
        padding: 0 .3rem;
        background: none;
        box-shadow: none;
    }

    .qrcode-ewm {
        width: 3rem;
    }


    .home-c {
        display: block;
    }

    .home-l {
        width: auto;
        margin-right: 0;
        margin-bottom: .3rem;
    }

    .home-rl {
        width: 30%;
    }

    .home-rr {
        padding: .25rem .2rem .35rem .2rem;
    }

    .home {
        padding: .35rem 0;
    }

    #popup {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        max-width: 90%;
    }

    .popup-subinfo {
        padding: .4rem .3rem .5rem .3rem;
    }

    .popup-gzgzh .qrcode-box {
        padding: .4rem .3rem .3rem .3rem;
    }

    .popup-gzgzh .qrcode-box h5 {
        margin-top: .2rem;
    }

    .popup-gzgzh .qrcode-box .input-item-btn {
        margin-top: .2rem;
    }

    .pagermain {
        padding-top: 0;
    }
}

@media screen and (max-width: 768px) {
    #page {
        /* display: block; */
        flex-wrap: wrap;
        min-height: 100vh;
        flex-direction: column;
    }

    .pagel {
        width: auto;
        height: auto;
        padding: .3rem;
    }

    .pager {
        padding: 0 .2rem .5rem .2rem;
        min-height: auto;
        width: 100%;
    }

    .home-r {
        display: block;
    }

    .home-rl {
        width: auto;
        padding: .25rem 0;
        margin-right: 0;
        margin-bottom: .2rem;
    }
}




/* 2025年5月29日09:49:37 */
 .home-lb {border-top: .3rem solid #f8f9fd;/* margin-top: .3rem; */padding:0 .35rem;position:relative;background:#f8f9fd;z-index: 1;padding: .3rem .2rem 0 .2rem;}
 .home-lb:before{
     content: "微信绑定";
     display: block;
     font-size: .2rem;
     font-weight: bold;
     line-height: .24rem;
     text-transform: uppercase;
     letter-spacing: normal;
     color: #3A3F63;
     padding: 0 .1rem;
 }
 .home-lb:after{
     content:"";
     position:absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background:#fff;
     border-radius:0.08rem;
     z-index: -1;
 }
.wxbd {
    width: 5.2rem;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    margin-top: .25rem;
}

.wxbd::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0.02rem;
    right: 0;
    width: 1.1rem;
    height: .22rem;
    z-index: 1;
    pointer-events: none;
    border-radius: 16px 16px 21px 21px;
    background: #F1F4FF;
}
.wxbd::after {
    content: "";
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
    /* right: 0; */
    /* background: url(../images/wxbd-bg.png) no-repeat; */
    /* background-position: center center; */
    /* background-size: 100% 100%; */
    /* height: 6.71rem; */
    /* z-index: -1; */
    /* pointer-events: none; */
}

.wxbd-box {
    /* width: 3.56rem; */
    /* max-width: 80%; */
    margin: 0 auto;
    position: relative;
    padding: .6rem 0 .66rem 0;
}

.wxbd-border div {
    position: absolute;
    width: 0.46rem;
    height: 0.46rem;
    opacity: 0.4552;
}

.wxbd-border div:nth-child(1) {
    left: 0.26rem;
    top: .6rem;
    border-top: 0.04rem solid #00BC5C;
    border-left: 0.04rem solid #00BC5C;
}

.wxbd-border div:nth-child(2) {
    right: 0.26rem;
    top: .6rem;
    border-top: 0.04rem solid #00BC5C;
    border-right: 0.04rem solid #00BC5C;
}

.wxbd-border div:nth-child(3) {
    left: 0.26rem;
    bottom: .4rem;
    border-bottom: 0.04rem solid #00BC5C;
    border-left: 0.04rem solid #00BC5C;
}

.wxbd-border div:nth-child(4) {
    right: 0.26rem;
    bottom: .4rem;
    border-bottom: 0.04rem solid #00BC5C;
    border-right: 0.04rem solid #00BC5C;
}

.wxbd-tit p {
    text-align: center;
    font-size: 0.18rem;
    font-weight: 600;
    line-height: 0.24rem;
    text-transform: uppercase;
    letter-spacing: normal;
    color: #3A3F63;
}

.wxbd-ewm {
    width: 1.58rem;
    max-width: 80%;
    margin: 0.1rem auto;
    padding: .1rem;
    background: #EDEDED;
}

.wxbd-ewm canvas{
    display:block;
    width:100%;
}

.wxbd-ewm div img {
    display: block;
    width: 100%;
}

.wxbd-info p {
    text-align: center;
    font-size: 0.14rem;
    font-weight: normal;
    line-height: .2rem;
    text-align: center;
    color: #3A3F63;
    margin-top: 0;
}

@media screen and (max-width:1024px) {
    .wxbd{padding: .3rem 0 0 0;}
    .wxbd-border div{width: .4rem;height: .4rem;}
    .wxbd::before{/* height: 5rem; *//* background-size: 100% auto; *//* background-position: center top; */}
}