/**
基础样式
 */
body, html {
    margin: 0;
    padding: 0;
}

.root {
    position: relative;
}
@font-face {
    font-family: 'FZQKBYS'; /* 字体名称，你可以随意取名 */
    src: url('/font/FZQKBYS.ttf') format('truetype'); /* 字体文件的路径和格式 */
    font-weight: normal; /* 字体的粗细 */
    font-style: normal; /* 字体的风格，例如 italic */
}

body {
    font-family: 'YourCustomFont', sans-serif; /* 使用你的自定义字体，如果没有可用sans-serif作为回退 */
}

.footer{
    text-align: center;
    width: 100vw;
    margin-bottom: 30px;
}
.footer .footer_slogen{
    margin-bottom: 20px;
}
.footer .footer_slogen img{
    width: 100vw;
}
.beian {
    margin-bottom: 10px;
    font-size: 12px;
    color: #000;
    text-align: center;
    width: 100vw;
    text-decoration: none;
}

body {
    background: url("../img/background.jpg") fixed;
    background-size: cover;  /* 可以根据需要设置背景图片的大小 */
}
.banner,.slogen{
    margin-bottom: 5px;
}
.banner a img,.banner img,.slogen img,.slogen a img{
    width: 100vw;
    vertical-align: top;
}
/*rate sub banner */
.index_sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Style for each sub_banner within index_sub */
.sub_banner {
    box-sizing: border-box; /* 防止边框宽度影响宽度计算 */
    width: calc(50% - 2.5px); /* 计算宽度，考虑 5px 的外边距 */
    margin-bottom: 5px; /* 调整为你需要的外边距 */
}

.sub_banner img {
    width: 50%;
    display: block; /* 去除图片底部空白 */
}

/* 整体容器样式 */
.news-container {
    padding: 20px 10px;
    background-color: transparent; /* 透明背景 */
}

/* 标题样式 */
.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-header .news-title {
    font-size: 14px;
    font-weight: bold;
}

/* 更多链接样式 */
.news-more {
    text-decoration: none;
    color: #000;
    font-size: 14px;
}

/* 文章列表样式 */
.news-list {
    display: flex;
    flex-wrap: wrap;
}

/* 每篇文章样式 */
.news-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid #d5d5d5;
    padding: 15px 0px;
    text-decoration: none;
    width: 100%;
}

/* 文章内容样式 */
.news-content {
    flex: 1;
}

/* 文章标题样式 */
.news-title {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
}

/* 文章摘要样式 */
.news-summary {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-align: justify;
    padding-right:10px;
    -webkit-line-clamp: 3; /* 显示的行数 */
}


/* 文章图片样式 */
.news-image {
    width: 30%; /* 调整图片占据的宽度比例 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
}
/* news-bottom 样式 */
.news-bottom {
    display: flex;
    align-items: flex-start; /* 左对齐 */
    margin-top: 10px; /* 调整与上方元素的间距 */
    color: #b7b7b7; /* 文本颜色，可以根据需要修改 */
    margin-bottom: 10px;
}

/* time 样式 */
.news-bottom .time,
.news-bottom .views {
    font-size: 12px;
}


/* views 样式 */
.views {
    margin-left: 10px; /* 调整与前一个元素的间距 */
    display: flex;
    align-items: center; /* 上下居中对齐 */
}

/* 图标样式 */
.icon-eye {
    display: flex;
    align-items: center; /* 上下居中对齐 */
    margin-right: 5px; /* 图标右侧间距，根据需要调整 */
}

/* 图标尺寸 */
.icon-eye img {
    width: 16px; /* 宽度，根据需要调整 */
}

.news-detail-header {
    position: relative;
}

.news-detail-header img.news-detail-image {
    width: 100vw;
    vertical-align: top;
}

.news-detail-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.45); /* 半透明底色，45%透明度 */
    padding: 20px 10px; /* 调整内边距根据需要 */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.news-detail-box {
    color: #fff; /* 文字颜色，可以根据需要调整 */
    line-height: 2em;
}

.news-detail-title {
    font-size: 18px; /* 标题字体大小，根据需要调整 */
    font-weight: bold;
}

.news-detail-en-title {
    font-size: 16px; /* 英文标题字体大小，根据需要调整 */
}

.news-detail-date {
    font-size: 12px; /* 日期字体大小，根据需要调整 */
}

.star {
    width: 30px; /* 调整按钮大小 */
    height: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 5px; /* 图片和文字之间的间距 */
    margin-top: 15px; /* 调整与上方文字的距离根据需要 */
}

/* 默认灰色星星，表示未收藏状态 */
.star::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('/img/star_gray.png'); /* 替换为灰色星星图片路径 */
    background-size: cover; /* 添加 background-size 属性 */
}
.news-favorite .block{
}
/* 激活状态的红色星星，表示已收藏状态 */
.news-favorite.active .star::before {
    background-image: url('/img/star_red.png'); /* 替换为红色星星图片路径 */
}

.favorite-text {
    font-size: 16px; /* 汉字字体大小 */
    color: #fff; /* 文字颜色 */
    display: block;
}
.news-favorite {
    display: flex;
    flex-direction: column; /* 将元素垂直排列 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    gap: 10px;
}

.favorite-star {
    margin-bottom: 5px; /* 调整星星和文本之间的垂直间距 */
}

.news-detail-content{
    padding: 0 10px;
    font-size: 14px;
    line-height: 2em;
}
.banner{
    position: relative;
}
.news-detail-content img {
    max-width: 100%;
}
.news-list-title{
    position: absolute;
    top:35%;
    color: #fff;
    padding-left: 18px;
    font-size: 24px;
}
.news-list-entit{
    position: absolute;
    top:52%;
    color: #fff;
    padding-left: 20px;
    font-size: 15px;
}
.news-list-inner .news-row {
    display: flex;
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    margin: 10px;
}

.news-list-inner .news-left-image {
    flex: 1;
    max-width: 45%;
    margin-right: 10px;
    height: 100px;
}

.news-list-inner .news-left-image img {
    width: 100%;
    height: 100%; /* 让图片填充整个容器 */
    object-fit: cover; /* 使用 cover 模式 */
    border-radius: 5px;
}

.news-list-inner .news-right-text {
    flex: 1;
    max-width: 53%;
}

.news-list-inner .news-row-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 设置为1行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-list-inner .news-row-summary {
    font-size: 12px;
    color: #666;
    line-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.load-more{
    text-align: center;
    padding: 10px;
}
/*产品详情*/
.product-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* 让子容器的高度与外容器一样高 */
}

.product-left-container {
    flex: 1;
    background: url('/img/tea_title_detail.png') center/cover;
}
.product-left-text{
    padding: 20px 15px 10px 15px;
    display: flex;
    flex-direction: column; /* 垂直布局子元素 */
}

.product-left-subtit,
.product-left-title,
.product-left-rate,
.product-left-line {
    flex: 1; /* 子元素占据整个高度 */
    padding:3px 0;
}
.product-left-title{
    font-family: "FZQKBYS";
    font-size: 20px;
}
.product-left-title,
.product-left-rate{
    padding:6px 0;
}

.product-left-subtit {
    color: #c5c5c5;
    font-size: 12px;
}

.product-left-title {
    color: #fff;
    font-size: 19px;
    font-weight: bold;
}

.product-left-rate {
    /*todo 字体*/
    color: #b20300;
    font-size: 33px;
    text-align: justify;
    font-weight:bold;
}

.product-left-line {
    width: 100%;
    padding: 0;
    flex: 0;
    margin: 5px 0;
    border-top: #656565 1px solid;
    border-bottom: #040405 1px solid;
}

.product-right-img {
    flex: 1;
    overflow: hidden;
    max-height: 175px;
}

.product-right-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 使用 cover 模式 */
}
/* 产品信息 */
.product-detail-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    padding: 12px 0;
}

.product-detail-row-label {
    flex: 0 0 68px;
    background-size: cover;
    background-position: center;
    color: #000;

    text-align: justify;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    padding: 0 20px;


}
.product-detail-row-label:after {
    display: inline-block;
    width: 100%;
    content: '';
}
.product-detail-row-text{
    padding-left: 20px;
    line-height: 25px;
    font-family: "FZQKBYS";
    font-size: 18px;
}
.product-detail-row-text p{
    margin: 0;
    padding: 0;
}
.product-detail-row.row-7 .product-detail-row-text,
.product-detail-row.row-8 .product-detail-row-text,
.product-detail-row.row-9 .product-detail-row-text,
.product-detail-row.row-7 .product-detail-row-label,
.product-detail-row.row-8 .product-detail-row-label,
.product-detail-row.row-9 .product-detail-row-label
{
    color: #fff;
}

    /* 每一行的不同背景图 */
.product-detail-row.row-1 {
    background: url('/img/product_row_1.png') center/cover;
}
.product-detail-row.row-2 {
    background: url('/img/product_row_2.png') center/cover;
}
.product-detail-row.row-3 {
    background: url('/img/product_row_3.png') center/cover;
}
.product-detail-row.row-4 {
    background: url('/img/product_row_4.png') center/cover;
}
.product-detail-row.row-5 {
    background: url('/img/product_row_5.png') center/cover;
}
.product-detail-row.row-6 {
    background: url('/img/product_row_6.png') center/cover;
}
.product-detail-row.row-7 {
    background: url('/img/product_row_7.png') center/cover;
}
.product-detail-row.row-8 {
    background: url('/img/product_row_8.png') center/cover;
}
.product-detail-row.row-9 {
    background: url('/img/product_row_9.png') center/cover;
}
.product-detail-row-text p span {
    display: inline-block;
    vertical-align: top; /* 垂直对齐到顶部，可根据需要调整 */
    margin-right: 10px; /* 可以根据需要设置右侧间距 */
}

.product-detail-row-text p span:first-child {
    width: 110px; /* 设置你想要的固定宽度 */
}
.product-favorite{
    text-align: center;
    padding: 20px 0;
}
.product-favorite.active{
    color:#b20300;
}
.product-detail-row-text.info span img{
    object-fit: cover;
    width: 20px;
}
.info-popup {
    position: absolute;
    top: 100%; /* 使浮层位于info下方 */
    left: 5%;
    background-color: #ccc;
    border: 1px solid #ccc;
    color: #000;
    padding: 10px;
    z-index: 1;
    width: 80%;
    font-family: "Microsoft YaHei UI";
    border-radius: 5px;
    font-size: 14px;
}

.product-detail-row-text span:hover .info-popup {
    display: block;
}
.product-download{
    width: 150px;
    height: 35px;
    line-height: 35px;
    background: #b20300;
    color: #fff;
    text-align: center;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center; /* 水平居中对齐 */
    text-decoration: none;
}
.product-download img{
    width: 20px;
    margin-right: 5px;
}

/**/
.search-result .search-header{
    background: transparent;
    position: relative;
}
.search-result .product-row .product-center-text .product-center-rate{
    line-height: 25px;
}
.search-result .product-row .product-center-text .product-center-type{
    display: flex;
}
.search-result .product-row .product-center-text .product-center-type img{
    width: 20px;
    margin-right: 5px;
}
.search-result .product-row .product-center-text .product-center-type{
    line-height: 25px;
    font-size: 12px;
}
.search-result .product-row .product-center-text{
    flex-basis:40%;
}
.search-result .product-row .product-center-text .product-center-title{
 font-size: 14px;
}
.keyword{
    font-weight: bold;
    color: red;
}
.search-result .product-row .product-left-img,
.search-result .product-row .product-left-enter{
    flex-basis:10%;
}
.search-result .product-row .product-center-text,
.search-result .product-row .product-left-img,
.search-result .product-row .product-left-enter{
    flex-grow: inherit;
}
.no-results-message{
    height: 80px;
    line-height: 80px;
    width: 100%;
    text-align: center;
    background: #fff;
}
/*活动*/
.activity-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
}

.activity-title {
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px; /* Add margin to create space between title and type */
    position: relative;
    padding-left: 14px;
}

.activity-title:before {
    content: '';
    position: absolute;
    top: 50%; /* 使圆点垂直居中 */
    left: 0;
    transform: translateY(-50%);
    width: 5px; /* 圆点的宽度 */
    height: 5px; /* 圆点的高度 */
    border: 2px solid #83c061; /* 边框颜色 */
    border-radius: 50%; /* 使其呈现为圆形 */
    background-color: transparent; /* 背景颜色透明，形成空心效果 */
    margin-right: 10px; /* 可以调整圆点与文本之间的距离 */
}

.activity-type {
    display: flex;
    gap: 50px;
}

.activity-type-item {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
}

.activity-type-item.active {
    background-color: #83c061;
}

/* Style for activity list index */
.activity-list-index {
    display: grid;
    gap: 0px;
}

.activity-list-index-row {
    display: grid;
    grid-template-columns: auto 1fr;
    width: calc(100% - 20px);
    margin: 20px 10px;
    height: 130px;
    position: relative; /* Add relative positioning */
    overflow: hidden;
    border-radius: 8px;
}
.activity-list-index-row img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.activity-list-index-banner {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-list-index-text {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0px;
    left: 0; /* Add left position for absolute positioning */
    right: 0; /* Add right position for absolute positioning */
    padding: 10px 10px 3px 10px;
}


.activity-list-index-title {
    font-weight: bold;
    font-size: 13px;
    line-height: 20px;
    color: #fff;
}

.activity-list-index-time {
    font-size: 12px;
    color: #fff;
    line-height: 20px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.activity-list-index-time span img{
    height: 15px;
    width: 13px;
    vertical-align: middle
}

.activity-list-index-link-more {
    display: block;
    text-align: center;
    margin-top: 10px;
    padding: 5px 10px;
    color: #000;
    text-decoration: none;
    border-radius: 5px;
    font-size: 12px;
}

.no-results{
    text-align: center;
    background: #fff;
    font-size: 12px;
    padding: 30px;
}
.activity-list-page .activity-type{
    display: flex;
    justify-content: center;
    width: 100%;
}
.activity-list-page .activity-list-index-row{
    grid-template-columns:none;
    height: auto;
    overflow: auto;
    background: #fff;
}
.activity-list-page .activity-list-index-banner,
.activity-list-page .activity-list-index-text{
    position: inherit !important;
    display: block;
}
.activity-list-page .activity-list-index-text .activity-list-index-time,
.activity-list-page .activity-list-index-text .activity-list-index-title{
    color: #000;
}
.activity-list-page .activity-type-item{
    border-radius: 0;
}

.activity-list-page .activity-type-item.active{
    background: linear-gradient(to bottom, transparent 65%, #83c061 65%, #83c061 85%,transparent 85%);
}
.activity-list-row-btn {
    position: absolute;
    width: 80px;
    height: 25px;
    z-index: 99;
    background: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 25px;
    top: 50%;
    left: 6px;
    border-radius: 12px;
}
/*活动*/
.activity-detail-header{
    padding: 20px 10px 0 10px;
}
.activity-detail-title{
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
}
.activity-detail-time,
.activity-detail-address{
    position: relative;
    font-size: 14px;
    padding-left: 20px;
    line-height: 25px;
}

.activity-detail-time:before,
.activity-detail-address:before {
    content: '';
    position: absolute;
    top: 50%; /* 使圆点垂直居中 */
    left: 0;
    transform: translateY(-50%);
    width: 4px; /* 圆点的宽度 */
    height: 4px; /* 圆点的高度 */
    border-radius: 50%; /* 使其呈现为圆形 */
    margin-right: 10px; /* 可以调整圆点与文本之间的距离 */
}
.activity-detail-time:before{
    background:#83c061;
}
.activity-detail-address:before {
    background:#c06161;
}
.activity-detail-content{
    padding: 0 10px;
    font-size: 1rem;
    line-height: 2em;
}

.activity-btn{
    background: #83c061;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    line-height: 35px;
    margin: 0 10px 30px 10px;
    color: #fff;
    font-weight: bold;
}

/* Style for the close button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 14px;
    background: none;
    border: 2px solid #535353;
    color: #535353;
    border-radius: 12px;
    width: 20px;
    height: 20px;
    text-align: center;

}
.dialog-component{
    border: none;
    width: 100vw;
    height: 60vh;
    bottom: -50vh;
    border-radius: 5px;
    background: url("/img/popupbg.png") no-repeat center/cover;
    overflow: hidden;
}
/* 通过::backdrop 伪元素定义遮罩层的样式，一般设置背景颜色 */
.dialog-component::backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}
.dialog-component-row{
    height: 35px;
    margin: 20px 0;
    background: #fff;
    border-radius: 9px;
    display: flex;
    align-content: center;
    overflow: hidden;
    padding: 0 5px;
}
.dialog-form{
    padding-top: 20px;
}
.dialog-component-row img.dialog-form-label{
    height: 35px;
    vertical-align: middle;
}
.dialog-component-title{
    height: 35px;
    padding: 0 5px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
.dialog-component-row input,
.dialog-component-row textarea
{
    flex-grow: 1;
    border: none;
    padding: 0 10px;
    outline: none;
    font-family: "Microsoft YaHei UI";
}
.dialog-component-row textarea{
    line-height: 35px;
}
.dialog-component-row.h350{
    height: 80px;
}
.dialog-component-submit{
    line-height: 35px;
    background: #83c061;
    color: #fff;
    font-weight: bold;
    border: none;
    width: 100%;
    border-radius: 7px;
}
.top_menu{
    background: url(/img/top_menu.png) no-repeat center/cover;
    font-family: FZQKBYS;
    color: #fff;
    display: flex;
    /*font-size: 25px;*/
    height: 40px;
    width: 100%;
    align-items: center;
}
.top_menu a{
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #fff;
}
.top_menu a.active{
    color: #83c061;
}

.loading-img {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background:  url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNNzEgMzkuMlYuNGE2My42IDYzLjYgMCAwIDEgMzMuOTYgMTQuNTdMNzcuNjggNDIuMjRhMjUuNTMgMjUuNTMgMCAwIDAtNi43LTMuMDN6IiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTcxIDM5LjJWLjRhNjMuNiA2My42IDAgMCAxIDMzLjk2IDE0LjU3TDc3LjY4IDQyLjI0YTI1LjUzIDI1LjUzIDAgMCAwLTYuNy0zLjAzeiIgZmlsbD0iI2UxZTFlMSIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNjQgNjQpIi8+PHBhdGggZD0iTTcxIDM5LjJWLjRhNjMuNiA2My42IDAgMCAxIDMzLjk2IDE0LjU3TDc3LjY4IDQyLjI0YTI1LjUzIDI1LjUzIDAgMCAwLTYuNy0zLjAzeiIgZmlsbD0iI2UxZTFlMSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgNjQgNjQpIi8+PHBhdGggZD0iTTcxIDM5LjJWLjRhNjMuNiA2My42IDAgMCAxIDMzLjk2IDE0LjU3TDc3LjY4IDQyLjI0YTI1LjUzIDI1LjUzIDAgMCAwLTYuNy0zLjAzeiIgZmlsbD0iI2UxZTFlMSIgdHJhbnNmb3JtPSJyb3RhdGUoMTM1IDY0IDY0KSIvPjxwYXRoIGQ9Ik03MSAzOS4yVi40YTYzLjYgNjMuNiAwIDAgMSAzMy45NiAxNC41N0w3Ny42OCA0Mi4yNGEyNS41MyAyNS41MyAwIDAgMC02LjctMy4wM3oiIGZpbGw9IiNiZWJlYmUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA2NCA2NCkiLz48cGF0aCBkPSJNNzEgMzkuMlYuNGE2My42IDYzLjYgMCAwIDEgMzMuOTYgMTQuNTdMNzcuNjggNDIuMjRhMjUuNTMgMjUuNTMgMCAwIDAtNi43LTMuMDN6IiBmaWxsPSIjOTc5Nzk3IiB0cmFuc2Zvcm09InJvdGF0ZSgyMjUgNjQgNjQpIi8+PHBhdGggZD0iTTcxIDM5LjJWLjRhNjMuNiA2My42IDAgMCAxIDMzLjk2IDE0LjU3TDc3LjY4IDQyLjI0YTI1LjUzIDI1LjUzIDAgMCAwLTYuNy0zLjAzeiIgZmlsbD0iIzZlNmU2ZSIgdHJhbnNmb3JtPSJyb3RhdGUoMjcwIDY0IDY0KSIvPjxwYXRoIGQ9Ik03MSAzOS4yVi40YTYzLjYgNjMuNiAwIDAgMSAzMy45NiAxNC41N0w3Ny42OCA0Mi4yNGEyNS41MyAyNS41MyAwIDAgMC02LjctMy4wM3oiIGZpbGw9IiMzYzNjM2MiIHRyYW5zZm9ybT0icm90YXRlKDMxNSA2NCA2NCkiLz48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSIwIDY0IDY0OzQ1IDY0IDY0OzkwIDY0IDY0OzEzNSA2NCA2NDsxODAgNjQgNjQ7MjI1IDY0IDY0OzI3MCA2NCA2NDszMTUgNjQgNjQiIGNhbGNNb2RlPSJkaXNjcmV0ZSIgZHVyPSI3MjBtcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2c+PGc+PGNpcmNsZSBmaWxsPSIjMDAwIiBjeD0iNjMuNjYiIGN5PSI2My4xNiIgcj0iMTIiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBkdXI9IjcyMG1zIiBiZWdpbj0iMHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBrZXlUaW1lcz0iMDswLjU7MSIgdmFsdWVzPSIxOzA7MSIvPjwvZz48L3N2Zz4=') 50% 50% no-repeat rgb(249,249,249);
}
.user-header{
    width: 75px;
    height: 75px;
    position: absolute;
    top:55px;
    left: 20px;
    overflow: hidden;
    border-radius: 50%;
}
.user-text{
    position: absolute;
    top:55px;
    left: 105px;
    color: #fff;
    padding: 8px 0;
    line-height: 30px;
}
.user-text .user-nickname{
    font-size: 16px;
}
.user-header img{
    height: 75px;
    width: 75px;
}
.menu-list{
    margin-bottom: 100px;
}
.menu-list .menu-row{
    display: flex;
    padding: 20px;
    background: #fff;
    margin: 20px 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}
.menu-list .menu-row .menu-text{
    flex: 4;
    color: #000;
}
.menu-list .menu-row .menu-icon{
    flex: 1;
    height: 20px;
}
.menu-list .menu-row .menu-icon img{
    width: 20px;
    height: 20px;
}
.menu-list .menu-row .menu-enter{
    flex: 1;
    text-align: right;
    color: #000;
}
.login-root{
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    background: #fff;
    border-radius: 10px;
    margin: 10px;
}
.login-root .form-row{
    display: flex;
    margin: 10px auto;
    padding: 5px;
}
.login-root .form-row {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    margin: 10px auto;
    padding: 5px;
}

.login-root .form-label {
    flex: 0 0 auto; /* 固定宽度 */
    margin-right: 5px; /* 为了让标签和输入框之间有一点间距 */
}

.login-root .form-input {
    flex: 1; /* 自动填充剩余空间 */
    display: flex;
}
.login-root .form-input .form-code{
    width: 125px;
}

.login-root .form-input input {
    border: 1px solid #ccc;
    border-radius: 5px; /* 添加圆角 */
    padding: 8px; /* 根据需要调整内边距 */
}
.login-root .form-input.mobile input {
    width: 100%;
}
.login-root .form-btn {
    width: 60px;
    border: 1px solid #ccc;
    border-radius: 5px; /* 添加圆角 */
    padding: 8px 11px; /* 根据需要调整内边距 */
    margin-left: 5px; /* 为了让输入框和按钮之间有一点间距 */
    font-size: 12px;
}

.login-root .form-label{
    font-size: 14px;
    font-weight: bold;
    width: 80px;
}
.form-button{
    background: #83c061;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    line-height: 35px;
    margin: 30px 5px;
    color: #fff;
    font-weight: bold;
}


.user-info-header{
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: bold;
    padding: 0 20px;
}
.profile-form{
    background: #fff;
    margin: 10px;
}
.profile-row{
    display: flex;
    padding: 20px;
    align-items: center;
}
.profile-row .profile-row-label{
    flex: 8;
}
.profile-row .profile-row-area{
    flex: 12;
    text-align: right;
}
.profile-row .profile-row-value{
    flex: 2;
    text-align: right;
}
.profile-row-value .input {
    text-align: right;
    font-size: 16px;
    padding-right: 20px;
}
.profile-row-value input {
    border: none;
}
.birthdate-picker{
    font-size: 16px;
}
.profile-row-value input:active{
    border-bottom: 1px solid #c1c1c1;
}
.profile-row .profile-row-value .profile-row-avatar{
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
}
.profile-row .profile-row-value .profile-row-avatar img{
    width: 60px;
    height: 60px;
}
.profile-row .profile-row-enter{
    flex: 1;
    text-align: right;
}
/* CSS样式中 */
.sex-selector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    z-index: 999; /* 确保遮罩层位于其它内容之上 */
}

.sex-selector {
    position: fixed;
    top: 50%; /* 居中 */
    left: 50%; /* 居中 */
    transform: translate(-50%, -50%); /* 通过位移来实现居中 */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    z-index: 1000; /* 确保选择器在遮罩层之上 */
    width: 80vw;
    text-align: center;
    /* 可以添加其他样式，例如阴影等 */
}
.sex-selector .option{
    height: 50px;
    line-height: 50px;
}
/* 弹窗样式 */
.area-selector {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 80%;
    max-height: 80%;
    overflow: auto;
    width: 80vw;
}

/* 省市区选择器的样式 */
.area-selector select {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

/* 关闭按钮样式 */
.area-selector .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #999;
}

/* 确定按钮样式 */
.area-selector .confirm-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #83c061;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
}

/* 遮罩层样式 */
.area-selector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* 选项卡容器 */
.favorite-tabs {
    display: flex;
    width: 100vw;
}

/* 选项卡样式 */
.favorite-tab {
    margin-right: 10px;
    padding-bottom: 5px;
    cursor: pointer;
    flex: 3;
    text-align: center;
}
.favorite-block{
    flex: 1;
}
/* 选中的选项卡样式 */
.favorite-tab.active {
    position: relative;
    font-weight: bold; /* 选中时加粗 */
}

/* 选中的选项卡下划线样式 */
.favorite-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0; /* 下划线位置 */
    left: 0;
    width: 100%;
    height: 2px; /* 下划线高度 */
    background-color: green; /* 下划线颜色 */
}


/* 选中的选项卡内容显示 */
#favorite-tab1.active,
#favorite-tab2.active {
    display: block;
}