/**
 * 布局结构
 */
.Page {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
}

/**
 * 头部
 */
.header {
    position: relative;
    z-index: 999;
    background: #FFFFFF;
}

/**
 * 尾部
 */
.footer {
    position: relative;
    z-index: 1001;
}

/**
 * 首页底部tabbar
 */
.tabbar {
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
}
.tabbar .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .16rem 0;
}
.tabbar .item span {
    padding-top: .04rem;
    font-size: .32rem;
    color: #8d8e99;
}
.tabbar .item i {
    font-size: .59rem;
    color: #8d8e99;
}
.tabbar .item.active span {
    font-weight: 700;
    color: #ff434f;
}
.tabbar .item.active i {
    color: #ff434f;
}

/**
 * 中间内容
 */
.main {
    padding: 0;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

/*
 ** 返回头部
 */
.pageHeader {
    height: 1.12rem;
    position: relative;
    display: flex;
    justify-content: space-between;
}
.pageHeader.fixed {
    position: fixed;
    width: 100%;
    z-index: 2;
}
.pageHeader .title {
    position: absolute;
    left: 25%;
    right: 25%;
    height: 100%;
    line-height: 1.12rem;
    overflow: hidden;
    font-size: .45rem;
    color: #1B1C33;
    font-weight: bold;
    display: flex;
    justify-content: center;
    min-width: 56%;
}
.pageHeader .left {
    height: 100%;
    display: flex;
    align-items: center;
}
.pageHeader .left i {
    width: 1.12rem;
    height: 1.12rem;
    font-size: .53rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
 ** 返回仅箭头fixed
 */
.pageHeader.fixed .left .back {
    margin-left: .4rem;
}
.pageHeader.fixed .left .back i {
    width: .8rem;
    height: .8rem;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: .43rem;
}

/**
 * 搜索框
 */
.search {
    margin-top: .27rem;
    width: 100%;
    height: 1.12rem;
    padding: 0 .43rem .16rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: .37rem;
}
.search .background {
    width: auto;
    flex: 1;
    position: relative;
    height: 100%;
    padding: 0 .43rem;
    border-radius: .48rem;
    background: #f7f8fa;
    display: flex;
    align-items: center;
}
.search .background i {
    width: .43rem;
    font-size: .43rem;
    color: #999999;
}
.search .background i:first-child {
    margin-right: .16rem;
}
.search .background i:last-child {
    height: 100%;
    width: .8rem;
    color: #D8D8D8;
    display: none;
    align-items: center;
    justify-content: flex-end;
}
.search .background input {
    font-size: .37rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    background: none;
    color: #1b1c33;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.search .cancel {
    color: #1b1c33;
    width: 0;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.3s ease 0s;
}
.search .cancel.active {
    width: 1.07rem;
}
/**
 * 搜索框弹出内容
 */
 .indexSearch {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1003;
    background: #FFFFFF;
    display: none;
}
.indexSearch .record {
    padding: .53rem .43rem;
}
.indexSearch .record h2 {
    font-size: .48rem;
    font-weight: bold;
    color: #1b1c33;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.indexSearch .record h2 i {
    padding: .13rem;
    font-size: .37rem;
    font-weight: normal;
}
.indexSearch .record ul {
    margin-top: .13rem;
    display: flex;
    flex-wrap: wrap;
}
.indexSearch .record ul li {
    margin: .27rem .27rem 0 0;
    height: .96rem;
    padding: 0 .43rem;
    background: #f7f8fa;
    font-size: .32rem;
    color: #1b1c33;
    border-radius: .05rem;
    display: flex;
    align-items: center;
}
.indexSearch .record ul li a {
    color: #1b1c33;
}
.indexSearch .result ul {
    padding: 0 .43rem;
}
.indexSearch .result ul li {
    height: 1.28rem;
    line-height: 1.28rem;
    border-bottom: .03rem solid #f7f8fa;
    color: #1b1c33;
    font-size: .43rem;
}
.indexSearch .result ul li a {
    color: #1b1c33;
    display: block;
}
.indexSearch .result ul li.import a {
    display: flex;
    justify-content: space-between;
}
.indexSearch .result ul li i {
    margin-right: .32rem;
    color: #8d8e99;
    font-size: .43rem;
}

/**
 * 下拉菜单
 */
 .dropdownMenu {
    height: 1.33rem;
    border-top: .01rem solid #ebedf0;
    border-bottom: .01rem solid #ebedf0;
    display: flex;
}
.dropdownMenu .item {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dropdownMenu .item span {
    max-width: 2.67rem;
    font-size: .37rem;
    color: #323233;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdownMenu .item i {
    margin-left: .16rem;
    font-size: .27rem;
    color: #323233;
    transition: all 0.3s;
}
.dropdownMenu .item.active span {
    color: #ff434f;
}
.dropdownMenu .item.active i {
    color: #ff434f;
    transform: rotateZ(180deg)
}
.overlay {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 98;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .65);
    display: none;
}

/**
 * 跟随字母侧栏
 */
.indexFixed {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 1002;
    width: .69rem;
    padding: 0 .08rem 0 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, .45));
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-50%);
}
.indexFixed .item {
    margin: .05rem 0;
    width: .53rem;
    height: .53rem;
    text-align: center;
    font-size: .29rem;
    color: #8d8e99;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.indexFixed .item.current {
    color: #fff;
    border-radius: 50%;
    background: #ff434f;
}
/**
 * 跟随字母提示文案
 */
.letterTips {
    position: absolute;
    right: 1.07rem;
    top: 0;
    z-index: 9999999;
    margin-left: 1.33rem;
    width: 1.17rem;
    height: 1.17rem;
    border-radius: 50% 50% 0 50%;
    background: #FFFFFF;
    color: #FFFFFF;
    display: none;
    justify-content: center;
    align-items: center;
    letter-spacing: -0.08rem;
    box-shadow: 0 0 .27rem rgba(0, 0, 0, .15);
    transform: rotateZ(-45deg) translateY(-45%);
}
.letterTips span {
    transform: rotateZ(45deg);
    font-size: .64rem;
    font-weight: bold;
    color: #ff434f;
}