:root {
    /*常用到的搭配色彩*/
    --main-drak:#ff0081;
    --the-main: rgba(255, 111, 162);
    --main-two:#ffb0cb;
    --drak:#FFC1C1;
    --dark-two:#FFE4E1;
    --drak-light:#FFF0F5;
    --bglight-two:#fff4fa;
    --bglight:#fffbfd;
    --light-best:#ffffff;
    --dark-primary:#35a1ef;
    --primary-two:#abdcff;
    --primary-three:#5fb9f6;
    --primary-light:#f0faff;
    --dark-success:#43CD80;
    --success-two:#4dd865;
    --success-light: #edfff3;
    --text-dark: #000000;
    --text-dark3:#333333;
    --text-dark5:#656565;
    --text-dark9:#999999;
    --text-dark1:#bebebe;
    --drak-red:#ff0000;
    /*红包使用的颜色*/
    --dark-waring:#fc7402;
    --drak-red2:#f45e4d;
    --main-three:#ffff00;
    --dark-yd:#FFD700;
    --drak-ylight:#FFA73A;
    /*紫色*/
    --purple-main:#aa00ff;
    --purple-two:#e040fb;
    --purple-light:#f3e5f5;
    --dark-boy: #44C7FE;
}
::-webkit-scrollbar {
    display: none!important;
}
input[type="file"],
audio{
    display: none!important;
}
.loading_zb{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
p{
    margin: 0px;
}
.loading_zb > .txt{
    font-size: 17.5px;
    color: gray;
    margin-top: -5px;
}
.page-pagen > a{
    margin-left: 4.5px;
}
.page-pagen > .on,
.page-pagen > .hover{
    border-radius: 50%;
}
/*-------------------------弹出确认框样式----------------------*/
.bg1{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg1 > .mask{
    background-color: #fefefe;
    opacity: 0.3;
}
.confirm{
    min-width: 8cm;
    max-width: 10cm;
    z-index: 6000;
    position: fixed;
    top: 25%;
    border: 1.5px solid var(--the-main);
    border-radius: 10px;
}
.confirm > *{
    width: 100%;
}
.confirm_title{
    margin: 0px;
    padding: 7px 10px;
    box-sizing: border-box;
    background-color: var(--the-main);
    font-size: 15px;
    color: var(--light-best);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    justify-content: space-between;
}
.confirm_title > a{
    color: var(--light-best);
    transition: 0.3s;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: bold;
}
.confirm_title > a:hover{
    font-size: 15px;
}
.confirm_content{
    background-color: var(--light-best);
    padding: 0.6cm 0.8cm;
    text-align: center;
    box-sizing: border-box;
    font-size: 15px;
    word-break: break-all;
}
.confirm_buttons{
    background-color: var(--light-best);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    justify-content: space-evenly;
    align-items: start;
    padding-bottom: 19px;
}
.confirm_buttons > a{
    text-decoration: none;
    padding: 5px 24px;
    background-color: var(--light-best);
    color: var(--the-main);
    border: 1.35px var(--the-main) solid;
    border-radius: 5px;
    font-size: 15px;
    transition: 0.1s;
}
.confirm_buttons > a.hover,
.confirm_buttons > a:hover{
    background-color: var(--the-main);
    color: var(--light-best);
}
/*------------------弹出警告框样式------------------*/
.bg2{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
.bg2 > .mask{
    background-color: #fefefe;
    opacity: 0.3;
}
.mask{
    width: 100%;
    height: 100%;
    z-index: 5000;
    top: 0px;
    left: 0px;
    position: fixed;
}
.bg2 > .alert1{
    position: fixed;
    top: 40%;
    z-index: 6000;
    display: flex;
    flex-direction: column;
}
.bg2 > .alert1 > span{
    text-align: center;
    font-size: 15px;
}
.bg2 > .alert1 > .info1{
    background-color: var(--the-main);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    margin-bottom: 3px;
    box-shadow: 0px 0px 20px #ffb0cb;
}
.bg2 > .alert1 > secs{
    width: 2.7cm;
    font-size: 14px;
}
/*---------------------------------------------------------------*/
.a-radio{
    display: none;
}
.b-radio{
    cursor: pointer;
    display: inline-block;
    border:1px solid #ff6fa2;
    width:16px;
    height: 16px;
    border-radius:10px;
    vertical-align: middle;
    margin-right: 5px;
    position: relative;
}
.b-radio:before{
    content: '';
    font-size: 0;
    /*font-size: 1rem;*/
    /*color: var(--light-best);*/
    width: 10px;
    height: 10px;
    background:#f75b90;
    position: absolute;
    left:50%;
    top:50%;
    margin-left: -5px;
    margin-top: -5px;
    border-radius: 10px;
    display: none;
}
.a-radio:checked~.b-radio:before{
    display: block;
}
/*---------------------------------------------------------------*/
.main{
    box-sizing: border-box;
    margin: auto;
    width: 100%;
}
.main > *{
    width: 100%;
    box-sizing: border-box;
}
.main > .top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--the-main);
    color: #FFF;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.main > .top img{
    width: 20px;
}
.albums > .title{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px 0px;
    padding-right: 7px;
}
.albums > .title > .add{
    margin-left: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.albums > .title > .add > img{
    width: 20px;
    margin-right: 6px;
}
.albums > .title > .sep{
    width: 5.5px;
    height: 0.8cm;
    background-color: var(--the-main);
    margin-right: 15px;
    margin-left: 7px;
}
.albums > .title > .txt{
    font-size: 17px;
}
.albums > *{
    width: 100%;
    box-sizing: border-box;
}
.albums > .list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}
/*-------------------------------------------------------------*/
.addAlbum > .add{
    flex-direction: column;
    padding: 0px 12px;
}
.addAlbum > .item{
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 10px;
}
.addAlbum > .item > span:first-child{
    width: 2.2cm;
}
.addAlbum > .item > label:nth-child(3){
    margin-left: 10px;
}
.addAlbum > .item > .ok{
    background-color: var(--the-main);
    color: #FFF;
    padding: 4px 25px;
    border-radius: 10px;
    font-size: 18px;
}
.addAlbum > .item > .albums > .photoes{
    width: 96%;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;
}
.addAlbum > .item > .albums > .getAlbums{
    margin-left: 10px;
    padding: 5px 10px;
    background-color: var(--the-main);
    color: #FFF;
    border-radius: 5px;
    font-size: 15px;
}
.addAlbum > .item > .albums > .photoes > *{
    flex-shrink: 0;
}
/*-------------------------------------------------------------*/
.album_bg{
    position: fixed;
    z-index: 800;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.album_mask{
    background-color: var(--the-main);
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
.album_bg > .album{
    position: relative;
    max-width: 100%;
    max-height: 100%;
    z-index: 2000;
}
/*-----------------------修改资料界面，学历、收入、婚姻状态弹出框样式-------------------*/
.user_bg{
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.user_bg > .img_shut{
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--the-main);
    color: #FFF;
    position: fixed;
    right: 7px;
    top: 7px;
    z-index: 2500;
}
.user_mask{
    position: absolute;
    background-color: gray;
    opacity: 1;
}
.user_bg > .album,
.user_bg > .user_img{
    position: absolute;
    width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
    z-index: 2000;
}
.user_bg, .user_mask{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1500;
}
.user_bg > .data{
    position: relative;
    z-index: 2000;
    width: 75%;
    max-height: 75%;
    margin: auto;
    margin-top: 15%;
    background-color: #FFF;
    border-radius: 10px;
}
.user_bg > .data > *,
.user_bg .data_list > .data_item{
    width: 100%;
    box-sizing: border-box;
}
.user_bg > .data > .data_top{
    background-color: var(--the-main);
    color: #FFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    height: 1.1cm;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.user_bg .data_title{
    font-size: 18px;
}
.user_bg > .data .data_close{
    width: 15px;
    height: 15px;
    position: absolute;
    right: 10px;
}
.user_bg > .data > .data_list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.user_bg .data_list,
.user_bg .data_list > .data_item:last-child{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.user_bg .data_list > .data_item{
    padding: 13.5px 0px;
    border-bottom: 1px solid var(--dark-two);
    display: flex;
    justify-content: center;
    align-items: center;
}
/*--------------------------弹出图片样式------------------------*/
.imgArea{
    position: absolute;
    z-index: 2000;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.imgArea > .bigImg{
    width: 100%;
}
.imgArea > .arrow{
    position: absolute;
    z-index: 2500;
    width: 1.2cm;
    height: 1.2cm;
    top: 45%;
}
.imgArea > .arrow.prev{
    left: 5px;
}
.imgArea > .arrow.next{
    right: 5px;
}
/*---------------------查无任何记录，加载中样式----------------*/
.no_record, .loading {
    padding: 0px 20px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size:20px;
    color: var(--the-main);
    height: 45px;
    margin-top: 1cm!important;
}
/*----------------------------底部分页栏样式----------------------------*/
.page-pagen{
    width: 100%;
    margin: 0px;
    padding: 10px 0px;
    position: fixed;
    bottom: 1.65cm;
    left: 0px;
    z-index: 99;
    background-color: #FFF;
}
/*------------------性别样式----------------*/
.gender{
    display: inline-block;
    text-align: center;
    padding: 0.2px 5px;
    border-radius: 50%;
    font-size: 13px;
}
.gender > i:before{
    color: #FFF!important;
}
.gender.boy{
    background-color: #00C7F6;
}
.gender.girl{
    background-color: #fd60b1;
}
.gender.boy > i:before{
    content: '\2642';
}
.gender.girl > i:before{
    content: '\2640';
}