/* css/style.css */

@font-face {
    font-family: 'MySiYuanFont';
    src: url('../fonts/1635950212834208-webfont.woff2') format('woff2'),
    url('../fonts/1635950212834208-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 全局重置 & 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "MySiYuanFont", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    background: #ffffff;
}

img {
    max-width: 100%;
    border: 0;
    height: auto;
    vertical-align: top; /*-webkit-touch-callout: none;*/
}

a {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}
.color{
    color: #3c91f1;
    display: inline;
    font-style: normal;
    font-size: 14px;

}
ul, li, ol {
    list-style: none;
}

input, textarea, button {
    outline: none;
}


/*************血液专题********************/
/* 头部样式 */
.header {
    background-color: #fff;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.w1200 {
    width: 1200px;
    margin: 0 auto;
}

.header-inner {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    height: 60px;
}

.search-bar {
    display: flex;
    align-items: center;
    flex-grow: 1;
    max-width: 500px;
    margin: 0 20px;
}

.search-bar form {
    width: 100%;
    display: flex;
}

.search-bar input {
    flex-grow: 1;
    padding: 12px 18px;
    border: 2px solid #3d91f1;
    border-right: none;
    border-radius: 50px 0 0 50px;
    height: 44px;
    box-sizing: border-box;
    font-size: 14px;
    outline: none;
}


.search-bar input:focus {
    border-color: #1a73e8;
}

.search-btn {
    position: relative;
    padding: 0 40px;
    border: 2px solid #3d91f1;
    border-left: none;
    border-radius: 0 50px 50px 0;
    background-color: #3d91f1;
    cursor: pointer;
    height: 44px;
    box-sizing: border-box;
}


.search-btn::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
}

.search-btn::after {
    content: '';
    width: 8px;
    height: 2px;
    background-color: white;
    position: absolute;
    top: 62%;
    left: 53%;
    transform: translate(20%, 10%) rotate(45deg); /* 基于圆圈微调位置 */
}

.topic-badge {
    width: 463px;
    height: 60px;
    background: url("../images/pic_bg1.png") no-repeat 100% 100%;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 30px;
    letter-spacing: 4px;
    text-align: center;
    font-weight: normal;
}

.main-nav {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;


}

.main-nav ul {
    display: flex;
    margin: 0 auto;
    list-style: none;
}

.main-nav li {
    width: 120px;
    text-align: center;
    /*margin-left: 20px;*/
}

.main-nav a {
    text-decoration: none;
    color: #333;
    font-size: 20px;
}

.main-nav a:hover {
    text-decoration: none;
    color: #3c91f1;
    font-size: 20px;
}

.main-nav li.active a {
    color: #3d91f1;
}

.banner {
    width: 100%;
}

.nav_banner ul {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav_banner li {
    width: 380px;
    height: 190px;
    text-align: center;
}

.nav_banner li:nth-child(1) {
    background: url("../images/navbanner1.png") no-repeat 100% 100%;
    color: #dca51e;
}

.nav_banner li:nth-child(2) {
    background: url("../images/navbanner2.png") no-repeat 100% 100%;
    color: #508597;
}

.nav_banner li:nth-child(3) {
    background: url("../images/navbanner3.png") no-repeat 100% 100%;
    color: #2667b0;
}

.nav_banner li div {
    width: 250px;
}

.nav_banner .ban_num {
    margin-top: 20px;
    font-size: 30px;
}

.nav_banner .ban_tit {
    font-weight: bold;
    font-size: 44px;
}

.func-nav ul {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.func-nav ul a {
    width: 300px;
    height: 276px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.func-nav a:nth-child(1) {
    background: url("../images/func1.png") no-repeat 100% 100%;
}

.func-nav a:nth-child(2) {
    background: url("../images/func2.png") no-repeat 100% 100%;
}

.func-nav a:nth-child(3) {
    background: url("../images/func3.png") no-repeat 100% 100%;
}

.func-nav a:nth-child(4) {
    background: url("../images/func4.png") no-repeat 100% 100%;
}

.func-nav .func-tit {
    width: 300px;
    height: 85px;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

.disease {
    margin-top: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.disease h3 {
    background: url("../images/dis_pont_tit.png") no-repeat center left;
    text-indent: 25px;
    font-size: 24px;
}

.swiper-container {
    width: 1200px;
    height: auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide {
    width: auto;
    margin:0 1%;
    color: #333;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    transition: background 0.3s;
}

.swiper-slide:hover {
    color: #3d91f1;
}

.swiper-slide.active {
    color: #3d91f1;
    font-weight: bold;
}

.swiper-scrollbar {
    height: 10px;
    width: 94%;
    left: 3%;
    bottom: 10px;
    position: absolute;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8) inset;
}

.swiper-scrollbar-drag {
    /*background: yellow;*/
    box-shadow: 0px 1px 1px #000;
}

.disease .dis_menu {
    width: 350px;
    height: 500px;
    display: inline;
    background: #f1f2f8;
    overflow: hidden;
}

.disease .dis_menu li {
    width: 130px;
    height: 45px;
    line-height: 45px;
    font-weight: bold;
    font-size: 20px;
    margin: 15px auto;
    text-align: center;
    border: 1px solid #c9dfec;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s;
    /*background: #3c91f1;*/

}

.disease .dis_menu li.active {
    color: #ffffff;
    background: #3d91f1;
    font-weight: bold;
}

.disease .dis_menu li:hover {
    color: #ffffff;
    background: #3d91f1;
    font-weight: bold;
}

.disease .dis_cont_wrap {
    width: 750px;
    height: 500px;
    display: inline;
    border: 1px solid #3d91f1;
    border-radius: 5px;
    margin-right: 20px;
    background: #E9F2F8;

}

.disease_cont {
    display: none;
}

.disease_cont.active {
    display: block;
}

.cont_module {
    padding: 20px;
    display: none;
    line-height: 2;
    color: #333;
    font-size: 18px;
}

.cont_module.active {
    display: block;
}
.comdrugs-body{
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    text-align: center;
    margin: 0 -7.5px;
    padding: 0;
}
.comdrugs-body a{
    width: calc(33.333% - 15px);
    display: block;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.comdrugs-body-pic{
    width: 100%;
    height: auto;
}
.comdrugs-body-pic{
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.comdrugs-body-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.comdrugs-body a:hover{
    color: #3d91f1;
}
.recommend {
    margin-top: 50px;
    padding: 25px;
    box-shadow: 0 0 30px rgba(220, 220, 220, 0.8),
    0 0 30px rgba(220, 220, 220, 0.5),
    0 0 30px rgba(220, 220, 220, 0.2);
}

.recommend h3 {
    width: 1000px;
    margin: 0 0 25px;
    background: url("../images/drug_pont_tit.png") no-repeat center left;
    text-indent: 25px;
    font-size: 24px;
}

.recommend .medicine {
    width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.recommend .medicine-card {
    width: 320px;
    padding: 10px 20px 15px;
    border: 1px solid #D9E8F5;
    border-radius: 6px;
    background-color: #F9FBFD;
    transition: all 0.3s ease;
}

.recommend .medicine-card:hover {
    box-shadow: 0 0 20px rgba(74, 165, 227, 0.5);
}

.recommend .medicine-up {
    display: flex;
    align-items: center;
    gap: 15px;
}

.recommend .medicine-image {
    width: 116px;
    height: 115px;
    flex-shrink: 0; /* 防止图片被压缩 */
}

.recommend .medicine-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保证图片完整显示 */
}

.recommend .medicine-text {
    width: 149px;
    height: 100px;
}

/* 补充文字样式（可选） */
.recommend .medicine-name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;       /* 禁止换行 */
    overflow: hidden;          /* 隐藏超出部分 */
    text-overflow: ellipsis;
}

.recommend .medicine-english {
    font-size: 18px;
    color: #666;
    white-space: nowrap;       /* 禁止换行 */
    overflow: hidden;          /* 隐藏超出部分 */
    text-overflow: ellipsis;
}

.recommend .medicine-details {
    margin-top: 10px;
    color: #000;
    line-height: 1.6;
    text-align: left;
}

.recommend .medicine-details span {
    color: rgba(145, 145, 145);
}

/* 列表 */
.medical-qna {
    padding: 30px;
    margin-top: 50px;
    background: #fffefe;
    box-shadow: 0 0 30px rgba(220, 220, 220, 0.8),
    0 0 30px rgba(220, 220, 220, 0.5),
    0 0 30px rgba(220, 220, 220, 0.2);
}

.medical-qna h3 {
    width: 1000px;
    margin: 0 0 15px;
    background: url("../images/qna_pont_tit.png") no-repeat center left;
    text-indent: 25px;
    font-size: 24px;
}

.mune-list, .mune-list-d {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* 左侧标题ul样式 */
.mune-list > ul:first-child,
.mune-list-d > ul:first-child {
    min-width: 80px;
    font-weight: bold;
    /*padding-top: 5px;*/
}

/* 右侧包含li的ul样式：li横向排列且自动换行 */
.mune-list > ul:last-child,
.mune-list-d > ul:last-child {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mune-list li, .mune-list-d li {
    white-space: nowrap;
}

.mune-list a, .mune-list-d a {
    color: #333;
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.mune-list a:hover, .mune-list-d a:hover {
    color: #3d91f1;
    background-color: #f0f7ff;
}

.category-list .active, .category-list2 .active {
    color: #3d91f1;
}

/* 切换按钮样式 */
.toggle-btn {
    color: #3d91f1;
    font-weight: bold;
}

/* 默认隐藏超出的项目 */
.category-list li.hidden {
    display: none;
}

.qna-list {
    display: flex;
    flex-direction: column;
    gap: 15px;

}

.qna-item {
    background-color: #fff;
    padding: 1%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    transition: box-shadow 0.3s;
    width: 95%;
}

.qna-item:hover {
    box-shadow: 0 5px 15px rgba(74, 165, 227, 0.5);
}

.qna-content h4 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #333;
    background: url("../images/q.png") no-repeat center left;
    text-indent: 25px;
    line-height: 1.8;
}

.qna-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    line-height: 1.4;
    background: url("../images/a.png") no-repeat top left;
    text-indent: 25px;
    width: 100%;
}

.qna-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1030px;
}

.qna-logo {
    font-size: 14px;
    color: #999;
    line-height: 30px;
}

.qna-logo img {
    width: 30px;
    height: 30px;
}

.qna-time {
    font-size: 14px;
    color: #999;
    text-align: right;
}

/* 前沿资讯 */
.news-section {
    padding: 30px;
    margin: 50px auto;
    background: #fffefe;
    box-shadow: 0 0 30px rgba(220, 220, 220, 0.8),
    0 0 30px rgba(220, 220, 220, 0.5),
    0 0 30px rgba(220, 220, 220, 0.2);
}

.news-section h3 {
    width: 1000px;
    margin: 0 0 15px;
    background: url("../images/qna_pont_tit.png") no-repeat center left;
    text-indent: 25px;
    font-size: 24px;
}
.newss-section h3 {
    width: 1200px;
    margin: 30px 0;
    background: url("../images/qna_pont_tit.png") no-repeat center left;
    text-indent: 25px;
    font-size: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-list li a:hover {
    color: #3d91f1;
}

.news-item {
    color: #666;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: color 0.3s;
}

.news-item:hover a {
    color: #165DFF;
}

.news-view, .news-date {
    color: rgba(64, 155, 226);
}

.news-item a {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-item a:hover {
    color: #3d91f1;
}

/* 页脚 */
/* 页脚样式 */
.footer {
    background-color: #e8eef8;
    padding: 40px 0;
    /*margin-top: 50px;*/
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
}

.footer-left {
    width: 300px;
}

.logo-qrcode {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.foot-img {
    width: 230px;
    height: 80px;
    margin: 0 20px 20px 0;
}

.qrcodes {
    display: flex;
    gap: 20px;
}

.qrcode-item {
    text-align: center;
}

.qrcode-item img {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 5px;
}

.hotline p:first-child {
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 20px;
}

.hotline p, .contact-group p, .contact-group a {
    margin: 5px 0;
    font-size: 16px;
}

.note {
    margin-top: 20px;
    font-size: 12px;
    color: #999;
}

.footer-middle {
    width: 350px;
}

.nav-group, .contact-group {
    margin: 25px 0;
    font-size: 20px;
}

.foot-nv{
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    margin: 25px 0 35px 0;
    color: #333;
    font-weight: bold;
}

.contact-group h3 {
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    margin: 25px 0 20px 0;
    color: #333;
}

.nav-group ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nav-group ul li {
    width: 148px;
    height: 40px;
    line-height: 40px;
}

.nav-group ul li a {
    color: #666;
    font-size: 20px;
}

.nav-group ul li a:hover {
    color: #3d91f1;
}

.contact-group a {
    color: #1E2129;
}

.footer-right {
    width: 400px;
}

.news-list li {
    margin-bottom: 10px;
    font-size: 16px;
}

.news-list li a {
    display: flex;
    margin-bottom: 5px;
    color: #333;
    line-height: 1.4;
    justify-content: space-between;
    align-items: center;
}

.news-list li .span {
    color: #999;
    font-size: 12px;
}

.more-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.more-articles {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    margin: 25px 0 35px 0;
    color: #666;
}

.certificate {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    color: #999;
    font-size: 12px;
}

.certificate span {
    text-indent: 15px;
}

.certificate a {
    color: #999;
}

.certificate a:hover {
    color: #333;
}


/* 响应式媒体查询 */
@media (max-width: 1024px) {
    .drug-list,.drug-list-sp {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .main-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .disease-inner {
        flex-direction: column;
    }

    .disease-category {
        flex: 1;
    }

    .footer-inner {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .banner-inner h1 {
        font-size: 24px;
    }

    .banner-inner p {
        font-size: 14px;
    }

    .drug-list,.drug-list-sp  {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-tags {
        font-size: 12px;
    }
}


/***************************血液专题*************************************/

/*************列表页*****************************************/
/* 中间内容区域 */
.content {
    display: flex;
    justify-content: space-between;
    margin: 30px auto;
}
.text-yellow{
    color: #f00;
}
.content-left {
    width: 850px;
}

/*.content-left h3 {*/
/*    !*text-indent: 25px;*!*/
/*    font-size: 24px;*/
/*    color: #333;*/
/*    margin-bottom: 20px;*/
/*    !*background: url("../images/qna_pont_tit.png") no-repeat center left;*!*/
/*}*/

.qa-list {
    margin-bottom: 20px;
}

.qa-list .tit-h1 {
    font-size: 18px;
    margin-bottom: 5px;
    line-height: 1.8;
    /*font-weight: normal;*/
    display: block;
}

.qa-list .bq-icon {
    width: 100%;
    background: url("../images/q.png") no-repeat center left;
    text-indent: 25px;
}

.qa-list .ba-icon {
    width: 100%;
    background: url("../images/a.png") no-repeat top left;
    text-indent: 25px;
}

.qa-list a {
    font-size: 18px;
    color: #333;
    display: block;
    margin-bottom: 30px;
    border-bottom: 1px dashed #eee;
}

.qa-list a div:nth-child(1) {
    width: 25%;
}

.qa-list a div:nth-child(2) {
    width: 73%;
}

.qa-list a:hover {
    color: #3d91f1;
}

.qa-list p {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.6;
}

.qa-meta {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 12px;
}

.qa-meta span {
    font-size: 14px;
    color: #999;
    line-height: 30px;
}

.qa-meta img {
    width: 30px;
    height: 30px;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    color: #666;
}

.pagination a.current {
    background-color: #3d91f1;
    color: #fff;
    border-color: #3d91f1;
}

.pagination input {
    width: 30px;
    text-align: center;
    border: 1px solid #ddd;
    margin: 0 5px;
}

.pagination button {
    padding: 5px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
}

.content-right {
    width: 300px;
}
.wx_sao{
    margin: 20px;
}
.wx_sao img{
    display: block;
}
.related-articles, .video-recommend, .drug-recommend ,.question_articles{
    margin-bottom: 30px;
}

.related-articles b, .video-recommend b, .drug-recommend b,.question_articles b {
    display: block;
    font-size: 18px;
    color: #333;
    line-height: 1.8;
    text-indent: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.arth3 {
    background: url("../images/xgwz-icon.png") no-repeat center left;
}

.vidh3 {
    background: url("../images/video-icon.png") no-repeat center left;
}

.druh3 {
    background: url("../images/drug_pont_tit.png") no-repeat center left;
}
.quar3{
    background: url(../images/qna_pont_tit.png) no-repeat center left;
}

.related-articles ul li {
    margin-bottom: 10px;
}

.related-articles ul li a {
    color: #666;
    line-height: 1.5;
    width: 100%;
    white-space: nowrap;/*******显示一排******/
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-articles ul li a:hover {
    color: #3d91f1;
}

.video-item {
    display: block;
    height: 226px;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    /*background: #000;*/
}

.video-item img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.video-item p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}

.icon-play {
    display: block;
    position: absolute;
    left: 50%;
    top: 40%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    background: url("../images/icon-play.png") center center no-repeat;
}

.drug-recommend ul a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
}

.drug-recommend ul a:hover {
    color: #3d91f1;
}

.dru-img {
    width: 58px;
    height: 60px;
}

.dru-right {
    width: 230px;
    height: 60px;
    margin-left: 10px;
}

.drug-recommend ul a img {
    width: 100%;
    height: auto;
}

.dru-tit {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    font-weight: bold;
}

.dru-info {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

.question_articles ul li {
    margin-bottom: 10px;

}

.question_articles ul li a {
    color: #666;
    line-height: 1.5;

}
.question_articles ul li a i{
    font-style: normal;
}
.question_articles ul li a:hover {
    color: #3d91f1;
}
/*******************文章页新闻***************************/
.arcitle-list{
    margin: 20px;
}
.arcitle-list_tit{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.quar3-a{
    color: #999;
}
.quar3-a a:hover{
    color: #3d91f1;
}
.arc_list_tit{
    text-indent: 25px;
    font-weight: bold;
    font-size: 22px;
}
.arcitle-list a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
}
.arcitle-list a:hover{
    color: #3c91f1;
}
.arcitle-list .arc-my-ico{
    width: 25%;
    height: 139px;
    border: 1px solid #dddddd;
    display: flex;
    padding: 0 10px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}
.arcitle-list .arc-my-ioo {
    width: 73%;
}
.arcitle-list .hr{
    font-size: 18px;
}
.arcitle-list p{
    margin: 10px 0;
}
.arcitle-list .qa-metae {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 12px;
    width: 100%;
}
.arcitle-list .qa-metae span{
    color: #999;
    line-height: 30px;
}
    /********************* 文章页专属样式 *********************/
.p5 {
    padding: 20px 5px;
}

.p5 h1 {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.5;
    /*background: url(../images/q.png) no-repeat center left;*/
}

.article-tit {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #999;
    margin: 0 auto 20px;
    font-size: 14px;
}

.article-dese {
    width: 100%;
    background: #dedede;
    display: flex;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 4px;
}

.postion {
    width: 100%;
}

.article-dese-left {
    width: 15%;
    text-align: right;
    font-weight: bold;
    color: #333;
    padding-right: 15px;
    line-height: 1.8;
}

.article-dese-right {
    width: 82%;
    color: #666;
    line-height: 1.8;
}

.article-body {
    line-height: 2;
    color: #333;
    font-size: 16px;
    margin-bottom: 30px;
    padding: 0 10px;
}
.article-body a{
    color: #3c91f1;
}


.article-body p {
    margin-bottom: 15px;
}

.arcitle-pagination {
    width: 100%;
    padding: 15px 10px;
    border-top: 1px dashed #eee;
    color: #666;
    font-size: 14px;
}

/* 分页链接样式 */
.arcitle-pagination a {
    color: #3d91f1;
    margin: 0 5px;
}

.arcitle-pagination a:hover {
    text-decoration: underline;
}

.mt40 {
    margin-top: 40px;
}

.share-wechat {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.icon-share-wx {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle; /* 与文字垂直居中 */
    background: url("../images/icon-wechat.png") no-repeat;
    background-size: 100% 100%;
}

.wechat-qrcode {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 160px;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: none; /* 默认隐藏二维码 */
    z-index: 999;
    text-align: center;
}

.share-wechat:hover .wechat-qrcode {
    display: block;
}

.wechat-qrcode img {
    width: 100%;
    height: auto;
    margin-bottom: 8px;
}

.wechat-qrcode p {
    font-size: 12px;
    color: #666;
    margin: 0;
}

#qrcode-container {
    width: 140px;
    height: 140px;
    margin: 0 auto 8px;
}


#qrcode-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*********首页*************/
.app-recommend-section {
    padding: 30px 0;
    background: url("../images/tyy_bg.png") no-repeat;
}

.app-up h1 {
    width: 100%;
    margin-top: 40px;
    font-size: 40px;
    text-align: center;
    font-weight: 600;
}

.app-up p {
    width: 50%;
    /*line-height: 40px;*/
    margin: 60px auto 0;
    font-size: 20px;
    text-align: center;
}

.app-img {
    width: 50%;
    height: 100px;
    margin: 100px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-down {
    width: 100%;
    margin-top: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-down div {
    width: 308px;
    height: 372px;
    padding: 30px;
}

.app-down div:nth-child(1) {
    background: url("../images/app_bg1.png") no-repeat 100% 100%;
}

.app-down div:nth-child(2) {
    background: url("../images/app_bg2.png") no-repeat 100% 100%;
}

.app-down div:nth-child(3) {
    background: url("../images/app_bg3.png") no-repeat 100% 100%;
}

.app-down div:nth-child(4) {
    background: url("../images/app_bg4.png") no-repeat 100% 100%;
}

.app-down div h2 {
    text-align: center;
}

.app-down div p {
    margin-top: 20px;
    font-size: 16px;
}

/* 药品推荐模块 */
.drug-recommend-section {
    padding: 30px 0;
    background-color: #eef2f8;
}

.drug-nav ul,.drug-nav-sp ul  {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.drug-nav ul div,.drug-nav-sp ul div  {
    font-size: 24px;
    font-weight: bold;
    text-indent: 25px;
}
.drug-nav ul .icon1{
    background: url("../images/drug_pont_tit.png") no-repeat center left;
}
.drug-nav-sp ul .icon2{
    background: url("../images/video-icon.png") no-repeat center left;
}

.drug-nav li ,.drug-nav-sp li {
    padding: 8px 15px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    font-size: 16px;
}

.drug-nav li.active,
.drug-nav li:hover ,.drug-nav-sp li.active,
.drug-nav-sp li:hover {
    background-color: #3d91f1;
    color: #fff;
    border-radius: 10px;
}

.drug-nav p,.drug-nav-sp p  {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    color: #333;
}

.drug-nav p a:hover,.drug-nav-sp p a:hover  {
    color: #3d91f1;
    text-decoration: none;
}

/*药品下方*/
.dr-list {
    margin-bottom: 20px;
}

.dr-list .tit-h1 {
    font-size: 18px;
    margin-bottom: 5px;
    line-height: 1.8;
    /*font-weight: normal;*/
}

.dr-list a {
    font-size: 18px;
    color: #333;
    display: flex;
    justify-content: space-between;
    margin-bottom: 45px;
    border-bottom: 1px dashed #eee;
}

.dr-list a div:nth-child(1) {
    width: 25%;
    height: 139px;
    border: 1px solid #dddddd;
    display: flex;
    padding: 0 10px;
    overflow: hidden;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */

}

.dr-list a div:nth-child(2) {
    width: 73%;
}

/*.dr-list .drug_conimg{*/
/*    width: 170px;*/
/*    height: 170px;*/
/*}*/

.dr-list a:hover {
    color: #3d91f1;
}

.dr-list .drug-hz {
    display: inline-block;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    padding: 0 10px;
    border-radius: 5px;
}

.dr-list .drug-cf {
    margin-left: 8px;
    color: #339eec;
    border: 1px solid #339eec;
}

.dr-list .drug-gg {
    color: #f19149;
    border: 1px solid #f19149;
}

.dr-list p {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.6;
}

.drug-lists {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.drug-list ,.drug-list-sp {
    display: none;
    width: 100%;
}

.drug-list.active ,.drug-list-sp.active-sp {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.drug-item {
    width: calc(25% - 11.25px);
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: box-shadow 0.3s;
    background: #fff;
}
.drug-item-sp {
    width: calc(25% - 11.25px);
    /*padding: 20px;*/
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: box-shadow 0.3s;
    background: #fff;
}

.drug-item:hover {
    box-shadow: 0 0 20px rgba(74, 165, 227, 0.5);
}
.index-img{
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    margin: 0 auto;
    margin-bottom: 20px;
    overflow: hidden;
}
.index-img-sp{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    margin: 0 auto;
    margin-bottom: 20px;
    overflow: hidden;
}
.drug-img {
    /*width: 160px;*/
    /*height: 159px;*/
    display: block;
    width: 100%;
    height: auto;

}

.drug-name {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 18px;
    color: #333;
    width: 100%;
    white-space: nowrap;/*******显示一排******/
    overflow: hidden;
    text-overflow: ellipsis;
}

.drug-desc {
    font-size: 16px;
    color: #404040;
    line-height: 1.6;
}

.drug-list .drug-item p{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.drug-list-sp .drug-item-sp p {
    display: block;
    margin-bottom: 10px;
    justify-content: center;
    padding: 0 20px;
}

.drug-list .drug-item p span,.drug-list-sp .drug-item-sp p span {
    display: block;
    color: #fff;
    padding: 0 10px;
    border-radius: 5px;
}

.drug-list .drug-item p span:nth-child(1) ,.drug-list-sp .drug-item-sp p span:nth-child(1){
    background: #339eec;
}

.drug-list .drug-item p span:nth-child(2),.drug-list-sp .drug-item-sp p span:nth-child(2)  {
    background: #f19149;
    max-width:70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 入驻品牌模块 */
.brand-section {
    padding: 30px 0;
    background-color: #f9fbfd;
}

.brand-section h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
    background: url(../images/rzpp-icon.png) no-repeat center left;
    text-indent: 25px;
}

.brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.brand-item {
    width: calc(20% - 16px); /* 5列布局 */
    height: 290px;
    background: url("../images/yqbj.png") no-repeat;
    padding: 20px 10px;
}

.brand-item_img {
    width: 100px;
    height: 100px;
    margin: 10px auto;
    display: flex;
    align-items: center;
}

.brand-item img {
    width: 100%;
    height: auto;
    display: block;
}
.theone {
    width: 100%; 
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis;
}

.brand-item h4 {
    font-size: 20px;
    margin-bottom: 5px;
    line-height: 2;
    text-align: center;
}

.brand-item p {
    margin-bottom: 5px;
    line-height: 1.6;
}

/* 知识问答+医药资讯模块 */
.qa-news-section {
    margin-bottom: 10px;
    padding: 30px 0;
}

.qnews {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

}

.qnews-l {
    width: 60%;
}

.qnews-r {
    width: 38%;
}

.qa-col {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    /*padding: 0 15px;*/
}

.qnews-l .qa-col ul {
    width: calc((100% - 30px) / 2);
}

.qnews-r .qa-col ul {
    width: 100%;
}
.brand-com{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qa-col h3,.brand-com h3 {
    width: 100%;
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
    text-indent: 25px;
}

.qa-col .bg1 {
    background: url(../images/qna_pont_tit.png) no-repeat center left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 .bg1-t{
    font-size: 16px;
}
.bg1-t a:hover{
    color: #3c91f1;
}
.qa-col .bg2 {
    background: url(../images/xgwz-icon.png) no-repeat center left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qa-col ul li {
    margin-bottom: 10px;
    /*padding-bottom: 10px;*/
    border-bottom: 1px dashed #eee;
}

.qa-col ul li i {
    display: inline-block;
    font-style: normal;
    padding: 1px 2px;
    border-radius: 4px;
}

.bg-icon1 {
    color: #0bd582;
    background: #d1f6e7;
}

.qa-col ul li .bg-icon2,.related-articles ul li a .bg-icon2{
    color: #e9a42a;
    background: #f5e7d0;
    font-style: normal;
}

.qa-col ul li a {
    color: #333;
    line-height: 1.5;
}

.qa-col ul li a:hover {
    color: #3d91f1;
}

.qa-col ul li span {
    color: #999;
    font-size: 12px;
    float: right;
}

/* 在线留言模块 */
.message-section {
    padding: 60px 0;
    background: url("../images/bg_ly.png") no-repeat center;
}

.message-section h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
    background: url(../images/zxly-icon.png) no-repeat center left;
    text-indent: 25px;
}

.message-index {
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    background: #FFFFFF;
    gap:50px;
    padding: 50px;
}

.message-left {
    width: 30%;
    margin-left: 70px;
}

.message-face {
    width: 60%;
    margin: 0 auto;
}

.message-left img {
    width: 100%;
    margin: 10px auto;
    display: block;
}

.message-left p {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
}

.message-box {
    width: 50%;
    text-align: center;
    padding-top: 20px;
}


.message-box form {
    width: 600px;
    margin: 0 auto;
}

.message-box input,
.message-box textarea {
    width: 90%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.message-box textarea {
    height: 120px;
    resize: none;
}

.eyou_form_btn {
    padding: 10px 30px;
    background-color: #3d91f1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.eyou_form_btn:hover {
    background-color: #0f7ae5;
}

/**************药品主体***************************/
.drug-contone {
    display: flex;
    /*align-items: center;*/
    justify-content: space-between;
    margin-bottom: 40px;
    width: 100%;
}

.contone_img {
    width: 40%;
    max-height: 400px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.contone_text {
    width: 55%;
}

.contone_text h1 {
    width: 100%;
    font-size: 24px;
    margin-bottom: 10px;
}

.contone_text p span {
    font-size: 12px;
    padding: 0 5px;
    border-radius: 5px;
}

.contone_text p span:nth-child(1) {
    border: 1px solid #3d91f1;
    color: #3d91f1;

}

.contone_text p span:nth-child(2) {
    border: 1px solid #f19149;
    color: #f19149;
}

.contone_text table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    font-size: 16px;
}

.contone_text table td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    vertical-align: top;
}
.contone_text table td a{
    color: #3c91f1;
}
.contone_text table td:first-child {
    font-weight: bold;
    width: 120px;
}

.ddd {
    background: #e8eef8;
    color: #3d91f1;
}

.drug-info-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 30px auto;
    box-sizing: border-box;
}


.drug-tab-nav {
    width: 100%;
    margin-bottom: 0;
    border: 1px solid #ff9800;
}


.drug-tab-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    background-color: #f5f7fa;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

/* 导航项：新类名 */
.drug-tab-nav__item {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.3s ease;
}


.drug-tab-nav__item--active {
    /*background-color: #165dff;*/
    color: #165dff;
    font-weight: bold;
}


.drug-tab-content {
    width: 100%;
    padding: 24px;
    border-radius: 0 0 6px 6px;
    box-sizing: border-box;
    border: 1px solid #ff9800;
    border-top: 0;
}


.drug-tab-content__panel {
    display: none;
    color: #333;
    font-size: 16px;
    line-height: 1.8;
}


.drug-tab-content__panel--active {
    display: block;
}


/*****************回到顶部*********************/
.back-to-top {
    position: fixed; /* 固定定位，不随页面滚动偏移 */
    right: 30px; /* 距离右侧30px */
    bottom: 30px; /* 距离底部30px */
    width: 50px; /* 按钮宽度 */
    height: 50px; /* 按钮高度 */
    border-radius: 50%; /* 圆形按钮 */
    background-color: #165dff; /* 主色：蓝色 */
    color: #fff; /* 文字/图标颜色：白色 */
    font-size: 20px; /* 图标大小 */
    text-align: center; /* 内容居中 */
    line-height: 50px; /* 垂直居中（与高度一致） */
    cursor: pointer; /* 鼠标悬浮显示“指针”，提示可点击 */
    opacity: 0; /* 初始透明（隐藏） */
    visibility: hidden; /* 初始不可见（避免点击区域占位） */
    transition: all 0.3s ease; /* 显示/隐藏、hover效果平滑过渡 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 轻微阴影，增强立体感 */
    border: none; /* 取消默认边框 */
    z-index: 9999; /* 层级最高，避免被其他元素遮挡 */
}

/* 按钮hover效果：加深背景色 */
.back-to-top:hover {
    background-color: #0e42d2;
    transform: translateY(-2px); /* 轻微上移，增强交互感 */
}

/* 按钮显示状态：通过JS添加该类实现显示 */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* 以下为示例页面内容样式，仅用于模拟长页面，实际使用时可删除 */
.demo-content {
    height: 2000px; /* 模拟长页面，让页面可滚动 */
    padding: 20px;
    font-size: 16px;
    line-height: 1.8;
}

/**************video*************************/
.vd-content {
    width: 100%;
}

.vd-c {
    width: 100%;
}

.video-num {
    width: 100%;
    font-size: 14px;
    color: #1E2129;
    margin: 20px 0;
}

.video-num em {
    font-style: normal;
    color: #3d91f1;
}

.grid-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    padding: 20px;
}

.grid-list li {
    width: 30%;
    flex: 0 0 calc(33.333% - 20px);
    margin: 0 10px 20px;
    padding: 5px;
    background-color: #f5f5f5;
    border-radius: 6px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}


.grid-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(74, 165, 227, 0.5);
}

.grid-list .tit-h1 {
    font-size: 18px;
    margin: 20px 0 10px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

@media (max-width: 768px) {
    .grid-list li {
        flex: 0 0 calc(50% - 20px);
    }
}


@media (max-width: 480px) {
    .grid-list li {
        flex: 0 0 calc(100% - 20px);
    }
}

/*************app下载***********************************/
.content-app-right{
    width: 340px;
}
.app-right-top {
    width: 100%;
    padding: 10px 30px;
    margin-top: 40px;
    background: url("../images/iosbg.png") no-repeat top;
}

.app-right-top p, .app-right-top b {
    display: block;
    font-size: 20px;
    padding: 0px 0 20px;
}
.app-right-top b:last-child{
    padding: 10px 0 70px;
}
.app-right-top h3 {
    width: 100%;
    font-size: 30px;
    color: #3c91f1;
    text-align: center;
    padding: 20px 0;
}
.app-right-top .app-th-img{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    text-align: center;
    color: #1d78f3;
    font-size: 16px;
    font-weight: bold;
}
.app-right-top .app-f-img{
    width: 70px;
}
.app-right-top .app-t-img{
    width: 84px;
}
.app-right-top .app-h-img{
    width: 70px;
}
.app-right-top .span{
    display: block;
    height: 30px;
    line-height: 30px;
}

.app-right-down{
    width: 100%;
    padding: 10px 30px;

    background: url("../images/android.png") no-repeat top;
}

.app-right-down h2 {
    width: 100%;
    font-size: 28px;
    color: #3c91f1;
    text-align: center;
    padding: 20px 0;
}
.app-right-down p, .app-right-down b {
    display: block;
    font-size: 20px;
    padding:0 0 20px;
}
.app-right-down p{
    text-align: center;
}
.app-right-down img {
    display: block;
    margin: 0 auto 10px;
}
.app-right-down b:last-child{
    padding: 10px 0 70px;
}

/*********************药品药企******************************/
.company{
    position: relative;
    top:-330px;
}
.card-container {
    background-color: #e6f2ff;
    padding: 10px;
    border-radius: 4px;
    max-width: 1200px;
    margin: 0 auto;
}
.company-card {
    display: flex;
    align-items: flex-start;
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    flex-wrap: wrap;
}
.card-image {
    display: flex;
    align-items: center;
    margin-right: 15px;
    margin-bottom: 20px;
    width: 100%;
}
.card-image img {
    width: 180px;
    height: 80px;
    margin-right: 10px;
}
.card-image h2 {
    font-size: 24px;
    margin: 0;
    position: relative;
    padding-left: 12px;
}
.card-image h2:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: #333;
}
.card-content {
    flex: 1;
}
.card-content p {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin: 0;
}
.company-tit{
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.article-list {
    max-width: 1200px;
    margin: 0 auto 30px;
    padding: 0 15px;
}

.article-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.article-title {
    margin: 0 0 10px;
    font-size: 18px;
}

.article-title a {
    color: #333;
    text-decoration: none;
}

.article-title a:hover {
    color: #007bff;
}

.article-meta {
    margin: 0 0 10px;
    font-size: 14px;
    color: #666;
}

.article-meta span {
    margin-right: 15px;
}

.article-excerpt {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* 分页样式 */
.pagination-box {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
    text-align: center;
}

.page-btn, .page-num {
    display: inline-block;
    margin: 0 5px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.page-btn:hover, .page-num:hover {
    border-color: #007bff;
    color: #007bff;
}

.page-num.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.page-btn.disabled {
    color: #999;
    cursor: not-allowed;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.page-ellipsis {
    display: inline-block;
    margin: 0 5px;
    color: #666;
}
/**********************************************company分页******************************************************************/
.pglist-company {
    margin: 20px 0;
    text-align: center;
    clear: both;
}
.pglist-company a {
    display: inline-block;
    margin: 0 4px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}


.pglist-company a.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}


.pglist-company a:hover:not(.active) {
    border-color: #007bff;
    color: #007bff;
}

.dr-list .drug-item {
    display: block;
    margin-bottom: 15px;

}
.
/**友情****/
.friend-links h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
    /*background: url(../images/zxly-icon.png) no-repeat center left;*/
    /*text-indent: 25px;*/
}
.frink{
    padding: 25px  0 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 16px;
}
.frink a:hover{
    color: #165DFF;
    border-color: #165DFF;
    background-color: #f0f7ff;
}
/****************************************************************/
/* 分页容器基础样式：居中+清除浮动 */
.pglist {
    width: 100%;
    padding: 20px 0;
    margin: 10px auto;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    zoom: 1; /* 兼容IE低版本 */
}

.pglist li {
    display: inline-block; /* 横向排列 */
    min-width: 36px;
    height: 36px;
    /*margin: 0 4px;*/
    /*padding: 0 6px;*/
    font-size: 14px;
    cursor: pointer;
}

.pglist a {
    color: #333;
    padding: 2px 8px;
    background-color: #fff;
    border: 1px solid #c1c1c1; /* 淡灰色边框 */
    text-decoration: none; /* 清除链接下划线 */
    border-radius: 4px;
    margin: 0 5px;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.2s ease; /* 平滑过渡效果 */
}

/* 2. 普通分页项hover交互：高亮反馈 */
.pglist a:hover {
    color: #165DFF; /* 主色调（可替换为你的品牌色） */
    border-color: #165DFF;
    background-color: #f0f7ff; /* 淡蓝色背景，增强hover识别度 */
}
.pglist .active a{
    color: #165DFF; /* 主色调（可替换为你的品牌色） */
    border-color: #165DFF;
    background-color: #f0f7ff; /* 淡蓝色背景，增强hover识别度 */
}

/* 3. 当前页码样式：突出显示 */
.pglist span.current { /* 假设后端会给当前页添加current类 */
    color: #fff;
    background-color: #165DFF;
    border-color: #165DFF;
    font-weight: 500; /* 加粗强调 */
    cursor: default; /* 鼠标不变手型，提示不可点击 */
}

/* 4. 禁用状态样式（如首页/尾页、上一页/下一页无数据时） */
.pglist span.disabled { /* 假设后端会给禁用项添加disabled类 */
    color: #9ca3af; /* 灰色文字，提示不可用 */
    background-color: #f9fafb;
    border-color: #e5e7eb;
    cursor: not-allowed; /* 禁用鼠标样式 */
}

/* 5. 响应式适配：小屏幕自动换行+缩小尺寸 */
@media (max-width: 768px) {
    .pglist a,
    .pglist li {
        min-width: 32px;
        height: 32px;
        line-height: 32px;
        margin: 0 2px;
        font-size: 12px;
    }
}

/***************************view健康问答***********************************/
.ask {
    padding: 20px 5px;
}

.ask h1 {
    /*text-align: center;*/
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.5;
    background: url(../images/q.png) no-repeat center left;
    text-indent: 25px;
}
.ask-tit {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 15px;
    color: #999;
    margin: 0 auto 20px;
    font-size: 14px;
}
.ask-dese {
    width: 100%;
    background: #EFEBEB;
    display: flex;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 4px;
    font-size: 18px;

}
.ask-dese-left {

    font-weight: bold;
    color: #333;
    padding-right: 15px;
    line-height: 1.8;
}

.ask-dese-right {
    width: 82%;
    color: #666;
    line-height: 1.8;
}

.ask-bg1 {
    background: url(../images/a.png) no-repeat center left;
    text-indent: 25px;
    font-size: 20px;
    margin: 20px 0;
}
.ask-bg2{
    background: #E8E8F3;
    height: 25px;
    line-height: 2;
    margin: 20px 0;
    font-size: 12px;
    color: #1E2129;
    padding: 0 7px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.ans-tit{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.web_name{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    margin-bottom: 20px;
}
.display-h1{
    display: none;
}
.fbtqq {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fbtqq span a:hover{
    color: #3c91f1;
}


.side-nav {
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    width: fit-content; /* 覆盖图标+菜单，确保hover不中断 */
}

/* 导航触发图标 - 初始显示状态 */
.nav-icon {
    width: 60px;
    height: 60px;
    background-color: #3d91f1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 10;
    position: relative; /* 单独定位，避免被菜单影响 */
}

/* 图标hover效果 */
.nav-icon:hover {
    background-color: #3d91f1;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* 一级菜单容器 - 关键修复：移除overflow:hidden，避免裁剪二级菜单 */
.main-menu {
    position: absolute;
    left: 100%; /* 紧贴图标左侧 */
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    width: 210px;
    padding: 15px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-right: 15px; /* 与图标保持间距 */
    z-index: 9; /* 低于图标 */
    /* 移除overflow:hidden！二级菜单在容器外部展开，不需要裁剪 */
}

/* hover图标容器，显示一级菜单 */
.side-nav:hover .main-menu {
    opacity: 1;
    visibility: visible;
}

/* 一级菜单项 - 确保hover触发范围完整 */
.main-item {
    position: relative;
    padding: 12px 25px;
    color: #333;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    width: 100%; /* 整个菜单项可hover */
}

/* 一级菜单链接样式（补充：修复a标签继承问题） */
.main-item > a {
    color: inherit;
    text-decoration: none;
    width: 100%;
}

/* 一级菜单项hover状态 */
.main-item:hover {
    background-color: #e8f4f8;
    color: #3d91f1;
}

/* 一级菜单图标占位 */
.main-item::before {
    content: "◆";
    font-size: 8px;
    color: #3d91f1;
    margin-right: 12px;
    opacity: 0.8;
}

/* 二级菜单箭头标识 */
.main-item.has-sub::after {
    content: "→";
    position: absolute;
    right: 20px;
    font-size: 12px;
    color: #94a3b8;
    transition: all 0.25s ease;
}

.main-item.has-sub:hover::after {
    color: #3d91f1;
    transform: translateX(-4px);
}

/* 二级菜单容器 - 核心修复：纠正定位+宽度+溢出控制 */
.sub-menu {
    position: absolute;
    left: 100%; /* 紧贴一级菜单项右侧（唯一正确定位） */
    top: 0; /* 与一级菜单项顶部对齐 */
    background-color: #ffffff;
    border-radius: 0 10px 10px 0; /* 优化圆角，与一级菜单衔接 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    width: 710px; /* 与一级菜单宽度一致，避免过宽 */
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 9999; /* 提升层级，避免被遮挡 */
    overflow: hidden; /* 强制裁剪溢出内容 */
    /* 移除white-space:nowrap！避免a标签横向排列 */
}

/* 关键修复：hover一级菜单项时，显示二级菜单 */
.main-item.has-sub:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    /* 移除right:100%！与left:100%冲突，导致定位错乱 */
}

/* 二级菜单链接样式 - 核心修复：块级化+溢出控制 */
.sub-menu a {
    display: inline; /* 块级化，垂直排列，占满宽度 */
    width: auto; /* 强制占满sub-menu宽度 */
    height: 50px;
    line-height: 50px;
    padding: 10px 22px;
    color: #333;
    text-decoration: none; /* 清除下划线 */
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap; /* 文字不换行 */
    overflow: hidden; /* 隐藏超出内容 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* 二级菜单项hover状态 */
.sub-menu a:hover, .have-color:hover {
    background-color: #e8f4f8;
    color: #3d91f1;
    padding-left: 28px; /* 缩进动画保留 */
}

/* 「查看更多」样式修复 */
.have-color {
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px 10px !important;
    color: #fff !important;
    background-color: #3d91f1 !important;
    border-radius: 0 !important;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .side-nav {
        left: 20px; /* 移动端靠左，避免遮挡内容 */
    }

    .nav-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .main-menu, .sub-menu {
        width: 180px; /* 移动端缩小宽度 */
    }
}
/************article_pp****************************/
.article_pp {
    line-height: 1.5;
    color: #333;
    font-size: 14px;
    margin-bottom: 10px;
    padding: 20PX 10px;
    background: #FAFAFA;
}
.ppfz{
    width：100%;
    display: flex;
    align-items: center;

}

.ppfz_f{
    width: 15%;
    
}
.ppfz_tit {
    font-weight: bold;
    margin-bottom: 10px;
}
.ppfz_w{
    width: 70%;
    padding: 0 20px;
}
.ppfz_w div{
    line-height: 20px;
}
.ppfz_t{
    width: 12%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #3d91f1;

}
.ppfz_t a {
    color: #fff;
}