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


.greenPaperWarp h1,.greenPaperWarp h2,.greenPaperWarp h3,.greenPaperWarp h4,.greenPaperWarp h5,.greenPaperWarp b,.greenPaperWarp strong{
    font-weight: bold;
}
/* 透明遮罩 */
dialog::backdrop {
    background: rgba(0, 0, 0, 0);
}




/* 缩放控制按钮容器 */
.zoom-controls {
    margin-top: .1rem;
    display: flex;
    gap: .15rem; /* 按钮间距 */
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    padding: .1rem .15rem;
    border-radius: .3rem;
    width: 2rem;
    margin:.1rem auto;
    display: flex
;
    justify-content: center;
}

/* 缩放按钮样式 */
.zoom-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border: none;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    font-size: .2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.zoom-btn:hover {
    background: white;
    transform: scale(1.1);
}

/* 拖动状态样式 */
#image-container.grabbing {
    cursor: grabbing;
}

dialog {
    background: transparent;
    border: none;
    padding: 0;
    margin: auto;
    width: auto;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    /* transform: translate(-50%, -50%); */
    overflow: hidden; /* 关键修改 */
    /* display: none; */
    /* height: 80vh; */
    max-height: calc(80vh + .9rem);
    max-width: 50vw;
}

/* 图片容器样式修改 */
#image-container {
    position: relative;
    max-width: 50vw;
    height: 80vh;
    transform-origin: center center;
    transition: transform 0.2s ease;
    cursor: grab;
    overflow: auto; /* 关键修改：添加滚动条 */
    overscroll-behavior: contain; /* 阻止滚动链 */
    box-shadow: 0 0 .2rem rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    background:  rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    border-radius: .1rem;
    min-width: 5rem;
}



/* 图片样式 */
#dialog-image {
    display: block;
    /* width: 100%; */
    height: 100%;
    max-width: none;
    max-height: none;
    user-select: none;
    -webkit-user-drag: none;
    object-fit: contain;
    transition: transform 0.2s ease;
}

/* 禁用状态的缩小按钮 */
.zoom-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.close-btn {
    position: absolute;
    top: .2rem;
    right:0rem;
    width: .4rem;
    height: .4rem;
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: .24rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: rgba(0,0,0,0.8);
}
.close-btn:focus {
    outline: none;
    box-shadow: none;
}
/* 确保弹窗内容不被关闭按钮遮挡 */
#image-container {
    margin-top: .2rem;
}


.contain{
    /* width: 90%; */
    max-width: 12rem;
    margin: 0 auto;
    padding: 0 .2rem;
    min-width: 7.4rem;
    /*padding-top: .91rem;*/
    min-width: 320px;
    max-width: 640px;
    background: #fff;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

img {
    vertical-align: top;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.df {
    display: flex;
}

.fdc {
    flex-direction: column;
}

.fdrw {
    flex-direction: row-reverse;

}

.jcc {
    justify-content: center;
}

.jcsb {
    justify-content: space-between;
}

.fg1 {
    flex-grow: 1;
}

.w20 {
    width: 20%;
}

.aic {
    align-items: center;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    /* background-color: #f9f9f9; */
}

.mr20 {
    margin-right: .2rem;
}

.mb10 {
    margin-bottom: .1rem;
}

.mt20 {
    margin-top: .2rem;
}

.w7 {
    width: 70%;
}

.container {
    /* width: 90%;
    max-width: 12rem;
    margin: 0 auto;
    padding: 0 .2rem;
    min-width: 7.4rem; */
}

/* 头部样式 */
.header {
    background-color: #fff;
    padding: .15rem 0;
    box-shadow: 0 .02rem .1rem rgba(0, 0, 0, 0.1);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: .5rem;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: .24rem;
    cursor: pointer;
    color: #333;
}

.nav ul {
    display: flex;
    list-style: none;
}

.nav ul li {
    margin-left: .3rem;
}

.nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.nav ul li a:hover {
    color: #B89A71;
}

/* 横幅样式 */

/* .banner .container img {
    width: 70%;
    height: auto;
    display: block;
} */
.banner {
    width: 100%;
    min-height: 2rem;
    overflow: hidden;
}

.banner .container {
    position: relative;
    height: 100%;
    /* display: flex; */
    /* flex-direction: row-reverse; */
    /* padding-bottom: 1.2rem; */
}

.banner-image {
    width: 100%;
    /* width: 70%; */
    /* height: 70%; */
    object-fit: cover;
    /* position: absolute; */
    /* top: 0; */
    /* right: 0; */
    margin: .2rem 0;
}

.banner-text {
    /* position: absolute;
    bottom: 0;
    left: 0rem; */
    /* transform: translateY(-50%); */
    color: #000;
    font-size: .24rem;
    /* text-shadow: .02rem .02rem .04rem rgba(0, 0, 0, 0.5); */
}

.banner-text h1 {
    font-size: .32rem;
    /* margin-bottom: .3rem; */
}

.banner-text p {
    font-size: .24rem;
}

/* 内容区域通用样式 */
.upper-content
{
    padding: .3rem 0;
}

.upper-content {
    background-color: #fff;
    padding-bottom: 0rem;

}

.lower-content {
    /* background-color: #f5f5f5; */
    padding-top: 0rem;
    margin-bottom: .3rem;
}

.lower-content-tit {
    font-size: .4rem;
    margin: .2rem 0;
    font-weight: bold;
}

.lower-content-tit img {
    width: .38rem;
    height: .38rem;
    margin-left: .2rem;
}

.faq {
    background-color: #fff;
}

section h2 {
    text-align: center;
    margin-bottom: .4rem;
    color: #B89A71;
    font-size: .28rem;
    position: relative;
    padding-bottom: .15rem;
}

section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: .8rem;
    height: .03rem;
    background-color: #B89A71;
}

/* 两列布局 - 上部内容区 */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .1rem;
}

.content-card {
    background-color: #fff;
    /* border-radius: .04rem; */
    padding: .18rem;
    background: #f7f7f7;
    overflow: hidden;
    /* box-shadow: 0 .04rem .12rem rgba(0, 0, 0, 0.08); */
    transition: transform 0.3s, box-shadow 0.3s;
}

.content-card:hover {
    /* transform: translateY(-0.05rem);
    box-shadow: 0 .08rem .24rem rgba(0, 0, 0, 0.12); */
}

.content-card img {
    width: 100%;
    /* height: 2rem; */
    object-fit: contain;
}

.content-card h3 {
    padding: 0rem 0rem .1rem;
    color: #B89A71;
    font-size: .36rem;
    text-decoration: underline;
    text-underline-offset: .1rem;
    font-weight: bold;
}

.content-card p {
    padding: 0 .25rem 0 0;
    color: #000;
    font-size: .18rem;
    text-align: justify;
}
.cerfinicate{
    cursor: pointer;
}
.content-card .l1-2-warp {
    width: 100%;
}

.content-card .l1-2-warp img {
    object-fit: cover;

}

.content-card .l1-2-warp img:nth-child(1) {
    width: 100%;

}

.content-card .l1-2-warp img:nth-child(2) {
    width: 60%;

}

.content-card .cerfinicate {
    border: .02rem solid #aaa;
    border-radius: .03rem;
}

.content-card.l2c {
    border: .05rem solid transparent;
    padding: .1rem .4rem .1rem .35rem;
    /* align-items: center; */

}

.content-card.l2c>div:nth-child(1) {
    margin-top: .4rem;

}

.content-card.l2c .cerfinicate {
    width: 1.22rem;
    height: 1.73rem;
    border: .02rem solid #b3986d;
    /* align-self: center; */
    object-fit: cover;
}

.content-card.l2c .rw {
    width: .74rem;
    height: .58rem;
    position: absolute;
    /* float: left; */
    left: 1.3rem;
    bottom: .1rem;
    left: 50%;
}

.content-card.l2c .nob {
    border: none;
    width: 30%;
    align-self: center;
}

.content-card.l2c .w20 {
    width: 20%;
}

.content-card.bgfff {
    background: #fff;
    border: .05rem solid #f7f7f7;
}

.content-card.bbw0 {
    border-bottom-width: 0rem;
}

.content-card.btw0 {
    border-top-width: 0rem;
}

.content-card.l2c p {
    padding-bottom: 0rem;
}

.dlb.content-card {
    /*padding: .2rem .25rem .16rem .45rem;*/
    align-items: flex-start;
}

.dlb.content-card>img {
    width: 20%;
    object-fit: contain;
}

.dlb.content-card .dlb-txt,.dlb.content-card .vertificata-group {
    /*margin: 0 .6rem;*/
    width: 100%;
}
.dlb.content-card .dlb-txt p{
    padding-bottom: 0.2rem;
}

.vertificata-group img {
    /*width: 1.32rem;*/
    /*height: 1.81rem;*/
    width: 30%;
    float: left;
    margin-right: .16rem;
    border: .02rem solid #b3986d;
}

.vertificata-group img:last-child {

    margin-right: 0rem;
}

.sisbro.content-card {
    /* padding: .09rem .06rem .07rem; */
    padding:.23rem;
}

.sisbro.content-card>div {
    width: 50%;

}

.sisbro-img img {
    width: 70%;
}

.sisbro-txt {
    min-height: 1.95rem;
    background: #fff;
    padding: 0 .63rem 0 .41rem;
    border-radius: .04rem;
}

.sisbro-txt p {

    padding: 0;

}

.sisbro-txt>img {
    width: .8rem;
    height: .94rem;
    margin-left: .8rem;
}

.mt10 {
    /* margin-top: .1rem; */
}

.mt30 {
    margin-top: .3rem;
}

.mb10 {
    margin-bottom: .1rem;
}

/* 三列布局 - 下部内容区 */
.three-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .15rem;
}

.three-column-grid .content-card {
    padding: .15rem;
    display: flex;
    /*flex-direction: column;*/
    justify-content: space-between;
}

.three-column-grid .content-card h3 {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.three-column-grid .content-card p {
    padding: 0rem;
    text-align: justify;
}

.three-column-grid .content-card>img {
    align-self: center;
    margin-left: .25rem;
}

.three-column-grid .content-card .line {
    width: .2rem;
    height: .2rem;
    margin: .05rem 0;
}

/* 1:2比例两列布局 */
.special-two-column {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* 左侧1份，右侧2份，比例1:2 */
    gap: .3rem;
    /* height: 2.8rem; */
    margin: .4rem 0 .6rem 0;
}

.special-two-column .content-card {
    border-radius: 1.5rem 0 0 1.5rem;
    margin: .2rem 0 0 0;
}

.special-two-column .content-card>img {
    width: 20%;
    object-fit: contain;
    margin: 0 10%;
}

.special-two-column .content-card>div:nth-child(2) {
    max-width: 3.2rem;
}

.special-two-column .content-card p {
    padding: 0;
}

.special-two-column .content-card .line {
    width: .2rem;
    height: .2rem;
    margin: .1rem 0 .2rem 0;
}

.special-two-column .content-card h3 {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.special-two-column .content-card .line {
    width: .2rem;
    height: .2rem;
    margin: .1rem 0 .2rem 0;
}

.pt45.three-column-grid .content-card {
    /* padding-top: .45rem;
    padding-bottom: .34rem; */
    padding: .45rem .25rem .34rem;
}

/* 底部样式 */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: .3rem 0;
    margin-top: .3rem;
}

.footer p {
    margin-bottom: .1rem;
    font-size: .14rem;
}

@media (max-width: 9.96rem) {
    .banner-text h1 {
        font-size: .3rem;
    }

    .banner .container {
        padding-bottom: .8rem;
    }

    .dlb.content-card {
        flex-direction: column;
        align-items: center;
    }

    .dlb-txt {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: .2rem .6rem;
    }
    .dlb.content-card>img{
        width: 30%;
    }
    .three-column-grid{
        gap: .1rem;
    }
    .pt45.three-column-grid .content-card{
        padding: .45rem .15rem .34rem;
    }
    .sisbro-txt{
        padding: 0 .2rem;
    }
    .special-two-column .content-card{
        padding: .18rem .24rem .32rem;
    }
    .three-column-grid .content-card{
        padding: .22rem .15rem;
    }
    .content-card.l2c .rw {
        width: .5rem;
        height: .5rem;
        position: absolute;
        /* float: left; */
        left: .85rem;
        bottom: .1rem;
    }
}

/* 响应式设计 - 移动端适配 */
@media (max-width: 7.68rem) {

    /* 移动端菜单 */
    .mobile-menu-btn {
        display: block;
    }

    .nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: .8rem;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 .05rem .1rem rgba(0, 0, 0, 0.1);
        padding: .2rem 0;
        z-index: 100;
    }

    .nav ul.active {
        display: flex;
    }

    .nav ul li {
        margin: .1rem 0;
        text-align: center;
    }

    /* 所有布局在移动端均调整为单列 */
    .two-column-grid,
    .three-column-grid,
    .special-two-column {
        grid-template-columns: 1fr;
    }

    /* 调整内边距和字体大小 */


    section h2 {
        font-size: .24rem;
        margin-bottom: .3rem;
    }

    .content-card img {
        height: 1.6rem;
    }

    .banner-text h1 {
        font-size: .24rem;
    }

}

.two-column-grid,
.three-column-grid,
.special-two-column {
    grid-template-columns: 1fr;
}
.content-card div:nth-child(1){
    width: 63%;
}
.content-card div:nth-child(2){
    width: 35%;
}
.content-card>img:nth-child(2){
    width: 35%;
}
.lower-content  .content-card>img:nth-child(2){
    width: 32%;
}
.lower-content .content-card>img.w20 {
    width: 25%;
}.content-card>img.w20{
    width: 25%;
    margin-right: .2rem;
}
/*.greenPaper-banner .content-card img{*/
/*    width: 100%;*/
/*}*/
.content-card{
    align-items: center;
}
.upper-content .content-card{
    margin-bottom: .15rem;
}
.lower-content .content-card h3{
    font-size: .28rem;
}
@media (min-width: 640px) {
    html{
        font-size: 100px!important;
    }
}
.greenPaper-banner{
    margin-top: .2rem;
}