* {
    margin: 0;
    padding: 0;
}
li{
    list-style:none;
}
a{
    text-decoration:none;
    cursor:pointer;
    color:#222;
}
a:hover{
    text-decoration:none;
}
input[type=text]{
    -webkit-appearance:none;
    -webkit-border-radius:0;
    outline:0;
}
select{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    outline:0;
}
ul{
    margin:0 auto;
    padding:0;
}
img{
    max-width:100%;
}
.clearfix:after{
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
    content:"";}
.clearfix{
    *zoom:1;
}
h1,h2,h3,h4,h5,h6{margin: 0px;padding: 0px;}
.fl{float: left;}
.fr{float: right;}
section{   }
body{margin: 0px;padding: 0px;}
.tit{
    width: 100%;
    height: 2.6rem;
    line-height: 2.3rem;
    font-size: 1.05rem;
    background: url(../img/tit.png)no-repeat center;
    background-size: 30%;
    color: #323232;
    text-align: center;
    font-weight: bold;
    margin-top: 0.4rem;
}
.tit span{
    width: 5.0rem;
    height: 1.65rem;
    background-size: 100%;
    display: block;
    margin: 0px auto;
}
.tit p{
    font-size: 1.05rem;
    color: #323232;
    text-align: center;
    font-weight: bold;
    margin: 0px;
}
.ban{
    width:100%;
    height:20rem;
    background-image:url('../img/banner.png');
    background-repeat:no-repeat;
    background-size:100%;
    padding-left:0rem;
    box-sizing: border-box;
    line-height: 0.95rem;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}
.banner_btn {
    width: 8.5rem;
    height: 2.25rem;
    border-radius: 10rem;
    font-size: .75rem;
    color: #ffff;
    font-weight: bold;
    text-align: center;
    line-height: 2.25rem;
    margin: 13.2rem 5.125rem 0px 5.125rem;
}
.one{
    width: 18.75rem;
    margin: 0.675rem auto 0rem;
    background: url('../img/one.png')no-repeat center top;
    background-size: 100%;
    border-radius:0.25rem;
    background-size: 100%;
    padding-bottom: 0rem;
    padding-top:1rem;
    box-sizing:border-box;
}

.one_text{
    width: 17.25rem;
    height:23.0rem;
    margin:0rem auto 0rem;
    padding-top:1rem;
        background: url('../img/one_text.png')no-repeat center top;
    background-size: 100%;
    box-sizing:border-box;
}
.one_text h3{
    margin:0rem auto;
    width:12.0rem;
    height:2.75rem;
    font-size:0.9rem;
    color:#314b98;
          background: url('../img/one-tit.png')no-repeat center;
    background-size: 100%;
}

.one_text .p1{
    margin:8rem auto 0rem;
    width:16.25rem;
    line-height:1.1rem;
    font-size:0.65rem;
    color:#fff;
    text-align:justify;
}
.one_btn{
    width: 13.75rem;
    height: 2.5rem;
    background: url('../img/one_btn.png')no-repeat center;
    background-size: 100%;
    font-size: 0.75rem;
    color: #fff;
    text-align: center;
    line-height: 2.55rem;
    margin: 3.0rem auto 0rem;
}


.ym_form{
    padding: 1rem 0px;
    background: #fff;
    border-radius: .3rem;
    width: 17.25rem;
    margin: auto;
    margin-top: -6rem;
    border:1px solid #ededee;
}
.ym_form h3{
    font-size: .9rem;
    color: #323232;
    text-align: center;
    font-weight: bold;
    margin: .5rem 0px 0rem 0px;
}
.ym_form i{

    margin:0.2rem auto 0.5rem;
    display: block;
    width: 3.05rem;
    height: 0.1rem;
    background:#2d3859;

}
.ym_form input{
    width: 12.3rem;
    height: 2.1rem;
    padding-left: 0.7rem;
    border: none;
    background: #dadadf;
    margin: 0rem 2.125rem 0.5rem 2.125rem;
    font-size: .6rem;
    line-height: 2.1rem;
}
.ym_form_btn{
    width: 13.1rem;
    height:2.35rem;
    background: url('../img/ym_form_btn.png')no-repeat center;
    margin: .6rem 2.125rem 0.5rem 2.125rem;
    font-size: .75rem;
    color: #fff;
    text-align: center;
    line-height: 2.35rem;
    background-size: 100%;
}
.two{
    width: 18.75rem;
    height: 19rem;
    background: url('../img/two_info.png')no-repeat top;
    margin: auto;
    margin-top: 1.5rem;
    background-size: 100%;
    padding-top: 1.4rem;
}
.two .tit p{
    color:#353535;
}
.two_info{
    width: 17.25rem;
    height: 15rem;
    margin: 0px .75rem;
}
.two_info_top{
    width: 17.25rem;
    height: 1.1rem;
    background: #eeeeee;
    margin-top: 2.3rem;
}
.two_info_top li{
    width: 3.42rem;
    height: 1.1rem;
    font-size: .8rem;
    color: #323232;
    text-align: center;
    line-height: 1.1rem;
    border-right: 1px solid #e5dede;
}
@media only screen and (max-width: 420px){
    .two_info_top li {
        width: 3.41rem;
    }
}
.two_top_hover{
    background: url('../img/two_top_hover.png')no-repeat center;
    background-size: 100%;
    color: #fff!important;
    height: 1.925rem!important;
    margin-top: -.26rem;
    line-height: 1.5rem!important;
    border-right: none!important;
}
.two_btn{
    width: 11.25rem;
    height: 3.75rem;
    background: url('../img/two_btn.png')no-repeat center;
    background-size: 100%;
    font-size: .75rem;
    color: #fff;
    text-align: center;
    line-height: 3.45rem;
    margin: 0px 3rem;
}
.two_info_text{
    width: 17.25rem;
    margin-top: 3.2rem;
    height: 6.2rem;
}
.two_info_text_list{
    width: 100%;
    display: none;
}
.two_info_text_list h6{
    font-size: .6rem;
    color: #f3d3aa;
    font-weight: bold;
    float: left;
    margin-left: .5rem;
    margin-right: 3rem;
    width: 9rem;
}
.two_info_text_list h6 span{
    width: 1rem;
    height: 2px;
    background: #f3d3aa;
    display: block;
    margin: .1rem 0px 0px .02rem;
}
.two_info_text_list p{
    font-size: .55rem;
    color: #fff;
    line-height: .95rem;
    float: left;
    margin:.3rem .5rem;
}
.sreen{
    width: 18.75rem;
    height:33.75rem;
    margin: 0 auto;
    padding: 0rem 0px 0rem 0px;
    box-sizing:border-box;
     background: url('../img/sreen.png')no-repeat center top;
    background-size: 100%;
}
 /* 主容器 */
        .sreen-card {
            width: 18.75rem; /* 核心宽度要求 */

            position: relative;
            overflow: hidden;
            padding-bottom:  0px;
        }


        /* 内容包装器 */
        .sreen-content-wrapper {
            position: relative;
            z-index: 10;
            padding: 0 12px;
        }

        /* 头部区域 */
        .sreen-header {

            margin:1.25rem auto 2rem;
                width: 12.0rem;
                height: 2.75rem;
              background: url('../img/sreen-tit.png')no-repeat center top;
                background-size: 100%;
            text-align: center;
            padding-top: 25px;
            padding-bottom: 20px;
            box-sizing:border-box;
        }




        /* 列表区域 */
        .sreen-list {
            display: flex;
            flex-direction: column;
            gap: 0.3rem; /* 列表项间距 */
        }

        /* 单个列表项 */
        .sreen-item {
            display: flex;
height:3.25rem;
            overflow: hidden;
        }
        .sreen-item:nth-child(1){
             background: url('../img/sreen-icon1.png')no-repeat center top;
                background-size: 100%;
        }
         .sreen-item:nth-child(2){
             background: url('../img/sreen-icon2.png')no-repeat center top;
                background-size: 100%;
        }
         .sreen-item:nth-child(3){
             background: url('../img/sreen-icon3.png')no-repeat center top;
                background-size: 100%;
        }
         .sreen-item:nth-child(4){
             background: url('../img/sreen-icon4.png')no-repeat center top;
                background-size: 100%;
        }
         .sreen-item:nth-child(5){
             background: url('../img/sreen-icon5.png')no-repeat center top;
                background-size: 100%;
        }
         .sreen-item:nth-child(6){
             background: url('../img/sreen-icon6.png')no-repeat center top;
                background-size: 100%;
        }
        /* 左侧数字盒子 */
        .sreen-item-num-box {
            width: 2.2rem;

            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
        }

        /* 给左侧盒子加一点高光效果 */
        .sreen-item-num-box::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);
        }

        .sreen-num {
            color: #fff;
            font-size: 22px;
            font-family: Arial, sans-serif; /* 数字字体稍微细长一点 */
            font-weight: 400;
        }

        /* 右侧内容盒子 */
        .sreen-item-text-box {
            flex-grow: 1;
            padding: 0.25rem 0.7rem 0.25rem 0.3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .sreen-item-title {
            color: #b07636; /* 标题颜色 */
            font-size: 0.7rem;
            font-weight: 700;
            margin-bottom: 2px;
            line-height: 1.2;
        }

        .sreen-item-desc {
            color: #555;
            font-size: 12px;
            line-height: 1.4;
            text-align: justify;
        }

        /* 底部按钮区域 */
        .sreen-footer {
            margin-top: 30px;
            text-align: center;
            padding: 0 12px;
        }

        .sreen_btn {
                width: 14.1rem;
                height: 2.35rem;
                background: url(../img/sreen-btn.png) no-repeat center;
                background-size: 100%;
                font-size: 0.8rem;
                color: #523a0a;
                text-align: center;
                line-height: 2.35rem;
                margin: 1.75rem auto 0rem;
        }

        .sreen-btn:hover {
            opacity: 0.9;
        }

    .four{
        width: 18.75rem;
        margin: auto;
        padding: 0rem 0px 0rem 0px;
        box-sizing: border-box;
        background: url(../img/four.png) no-repeat center top;
        background-size: 100%;
    }

  /* --- Main Container --- */
        .four-card-container {
            width: 18.75rem; /* Strictly 18.75rem as requested */
            padding: 1.25rem 0.75rem 0rem 0.75rem;

            position: relative;
            overflow: hidden;
            box-sizing: border-box;
        }

        /* --- Header Section --- */
        .four-header {
            margin:0 auto;
                width: 12.0rem;
             height: 2.75rem;
            text-align: center;
            margin-bottom: 1.25rem;
              background: url(../img/four-tit.png) no-repeat center top;
            background-size:100%;
        }




        /* --- Image Grid --- */
        .four-img-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.4rem;
            margin-bottom: 1rem;
        }

        .four-img-item {
            width: 100%;
            height: 3.5rem;
            object-fit: cover;
            border-radius: 0.5rem 0.5rem 0.8rem 0.5rem;

        }

        /* --- List Items --- */
        .four-list-group {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .four-list-item {
            display: flex;
            align-items: stretch;
            width:16.75rem;
            height: 2.2rem; /* Fixed height for alignment */
             background: url(../img/four-list-item.png) no-repeat center top;
            background-size:100%;
        }

        /* The Arrow/Number shape */
        .four-list-num {
            width: 2.75rem;
            color: #fff;
            font-weight: bold;
            font-size: 0.75rem;
            display: flex;
            align-items: center;

            z-index: 10;
            flex-shrink: 0;
            padding-left:0.75rem;
            box-sizing:border-box;
        }

        /* The Text Content */
        .four-list-content {
            flex-grow: 1;
            color: #444;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            padding: 0 0.5rem 0 1.25rem; /* Left padding handles overlap */
            margin-left: -1rem; /* Pull behind the arrow */
            border-radius: 0 0.5rem 0.5rem 0;
            line-height: 1.3;
            z-index: 5;
        }



        /* --- Button --- */
        .four-btn-wrapper {
            margin-top: 2rem;
            text-align: center;
        }

        .four_btn {
           width: 14.1rem;
            height: 2.35rem;
            background: url(../img/one_btn.png) no-repeat center;
            background-size: 100%;
            font-size: 0.8rem;
            color: #fff;
            text-align: center;
            line-height: 2.35rem;
            margin: 1.125rem auto 1.5rem;
        }




         .five{
            width: 100%;
            background: url(../img/five.png) no-repeat center top;
            background-size: 100%;
            margin: auto;
            padding: 0rem 0px .1rem 0px;
            box-sizing: border-box;
         }

        .five-container {
            width: 18.75rem; /* Fixed width 18.75rem */

            padding: 1.5rem 0.6rem 0rem 0.6rem;
            box-sizing: border-box;
            position: relative;
        }
        .five-header {
            margin: 0 auto;
            width: 12.0rem;
            height: 2.75rem;
            text-align: center;
            margin-bottom: 1.25rem;
            background: url(../img/five-tit.png) no-repeat center top;
            background-size: 100%;
        }


        /* --- Card Styles (Shared) --- */
        .five-card {
            background: url(../img/five-card.png) no-repeat center top;
            background-size: 100%;
            padding: 1rem 0.75rem 0.5rem 0.75rem;
            margin-bottom: 0.75rem;
            color: #333;
            box-sizing:border-box;
        }
        .five-card:nth-child(3){
            padding: 1.375rem 1.125rem 2.2rem 1.125rem;
            background: url(../img/five-card2.png) no-repeat center top;
                    background-size: 100%;
                    box-sizing:border-box;
        }
        /* --- Card 1 Specifics --- */
        .five-top-img {
            width: 100%;
            height: 4.75rem;
            object-fit: cover;
            border-radius: 0.4rem;
            margin-bottom: 0.25rem;
        }

        .five-intro-text {
            font-size: 0.85rem;
            font-weight: 800;
            color: #3a292a;
            line-height: 1.125rem;
            margin-bottom: 0.5rem;
        }

         /* 重点：左上角定位的数字图标 */
        .five-pill-box {
            border: 1px solid #4d3536;
            border-radius: 0.5rem;
            padding: 0.4rem 0.6rem 0.3rem 0.8rem;
            margin-bottom: 0.6rem;
            position: relative; /* 必须设置相对定位 */
            background: none;
            box-sizing:border-box;
        }

        .five-num-icon {
            position: absolute; /* 绝对定位 */
            top: -0.4rem;       /* 向上偏移，压在边框上 */
            left: -0.2rem;      /* 向左偏移 */
            background-color: #222;
            color: #fff;
            font-size: 0.6rem;
            width: 0.9rem;
            height: 0.9rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .five-pill-text {
            font-size: 0.7rem;
            color: #4d3536;
            line-height: 1.3;
            font-weight: 500;
        }

        .five-sub-list {
            margin-top: 0.3rem;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 0.2rem;
        }
        .five-sub-item {
            font-size: 0.6rem;
            color: #555;
            display: flex;
            align-items: center;
        }
        .five-sub-item::before {
            content: "•";
            margin-right: 2px;
            color: #3d2d2a;
        }

        /* --- Card 2 Specifics --- */
        .five-banner-wrapper {
            position: relative;
            margin-bottom: 0.6rem;
             background: url(../img/five-banner-wrapper.png) no-repeat center top;
            background-size: 100%;
        }

        .five-banner-img {
            width: 100%;
            height: 4.3rem;
            object-fit: cover;

        }

        .five-banner-tag {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            color: #fff;
            font-weight: bold;
            font-size:0.875rem;
            padding: 0.5rem 1rem 0.4rem 0.8rem;
            border-radius: 2rem; /* Match image rounding */
            z-index: 2;
        }

        .five-list-row {
            display: flex;
            align-items: flex-start;
            margin-bottom: 0.375rem;
            border-bottom: 1px solid #ccc;
            padding-bottom: 0.375rem;
        }
        .five-list-row:nth-child(2){
                width: 15.8rem;
        }
        .five-list-row:nth-child(3){
                width: 15.8rem;
        }
        .five-list-row:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .five-list-num-lg {
             background-color: #3a2829;
            color: #fff;
            width: 0.875rem;
            height: 0.875rem;
            border-radius: 50%;
             display: flex;
            align-items: center;
            justify-content: center;
                        flex-shrink: 0;
           font-size: 0.8rem;
            font-weight: 400;
            margin-right: 0.25rem;

            margin-top: 0.1rem; /* 微调对齐文字首行 */
        }

        .five-list-text-lg {
            font-size: 0.7rem;
            color: #323232;
            line-height: 1.4;
        }

        /* --- Button --- */
        .five-btn-wrapper {
            margin-top: 1.5rem;
            display: flex;
            justify-content: center;
        }
         .five-btn {
           width: 14.1rem;
            height: 2.35rem;
            background: url(../img/sreen-btn.png) no-repeat center;
            background-size: 100%;
            font-size: 0.8rem;
            color: #523a0a;
            text-align: center;
            line-height: 2.35rem;
            margin: 1.125rem auto 1.3rem;
        }

         .six{
            width: 100%;
            margin: auto;
            padding: 0rem 0px 0rem 0px;
            background: url(../img/six.png) no-repeat center top;
            background-size: 100%;
            box-sizing: border-box;
         }
          /* --- 主容器 (Width 18.75rem) --- */
        .six-container {
            width: 18.75rem;
            padding-bottom: 2rem;
            box-sizing: border-box;
            position: relative;
            overflow: hidden; /* 防止溢出 */
        }

        /* --- 顶部标题区域 --- */
        .six-header {
           margin: 1.25rem auto 0rem;
            width: 12.0rem;
            height: 2.75rem;
            text-align: center;
            margin-bottom: 1.5rem;
            background: url(../img/six-tit.png) no-repeat center top;
            background-size: 100%;
        }
        .six-header-sub {
            font-size: 0.85rem;
            color: #dabb89;
            font-weight: bold;
            font-family: serif;
            letter-spacing: 1px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
        }
        .six-header-sub::before, .six-header-sub::after {
            content: "◎"; /* 模拟图中的圆圈符号 */
            font-size: 0.8rem;
        }
        .six-header-title {
            font-size: 1.5rem;
            font-weight: 900;
            margin-top: 0.3rem;
            /* 金色渐变文字 */
            background: linear-gradient(180deg, #dabb89 0%, #8f6a3d 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 1px 1px rgba(0,0,0,0.1);
        }

        /* --- 时间轴区域 --- */
        .six-timeline-box {
            position: relative;
            padding: 0rem 0;
            margin-top: 0.5rem;
             background: url(../img/six-timeline-box.png) no-repeat center top;
            background-size: 2.3%;
            box-sizing:border-box;
        }

        /* 1. 绝对居中的虚线 */
        .six-center-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 1px;
            border-left: 1px dashed #a8947f;
            transform: translateX(-50%);
            z-index: 0;
        }

        /* 2. 行容器 */
        .six-row {
            position: relative;
            width: 100%;
            display: flex;

            z-index: 1;
        }
        .six-row:nth-child(1){
            margin-bottom: 1rem;
        }
        .six-row:nth-child(2){
            margin-bottom: 0rem;
        }
        .six-row:nth-child(3){
            margin-bottom: 0.5rem;
        }
        .six-row:nth-child(4){
            margin-bottom: 1rem;
        }
         .six-row:nth-child(5){
            margin-bottom: .75rem;
        }
        /* 通用内容块 */
        .six-content {
            width: 50%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }

        /* === 右侧内容 (1, 3, 5) === */
        .six-row.six-right {
            justify-content: flex-end; /* 这里的 flex-end 指的是 flex 布局的末尾，但我们需要的是把左边空出来 */
            /* 修正：直接用 margin-left 挤过去更稳 */
            display: block;
        }
        .six-row.six-right .six-content {
            margin-left: 50%; /* 从中线开始 */
            padding-left: 0.8rem; /* 离中线的距离 */
            align-items: flex-start; /* 内容左对齐 */
            text-align: left;
        }
        /* 右侧的数字标签背景形状 */
        .six-row.six-right .six-num-bg {

        }


        /* === 左侧内容 (2, 4, 6) === */
        .six-row.six-left {
            display: block;
        }
        .six-row.six-left .six-content {
            width: 50%;
            padding-right: 0.8rem; /* 离中线的距离 */
            align-items: flex-end; /* 内容右对齐 */
            text-align: right;
        }


        /* --- 数字背景图/样式 (核心) --- */
        .six-num-bg {
            width: 3.0rem;
            height: 1.0rem;
            line-height: .8rem;
            color: #fff;
            font-size: 0.5rem;
            font-weight: bold;
            text-align: center;


            background: url(../img/six-num-bg.png) no-repeat center top;
            background-size: 100%;

            position: relative;
        }

        /* 左侧时的渐变反转，增加立体感 */
        .six-row.six-left .six-num-bg {
             background: url(../img/six-num-bg2.png) no-repeat center top;
            background-size: 100%;
        }




        /* --- 文字样式 --- */
        .six-text {
            color: #323232;
            font-weight: 800;
            font-size: 0.75rem;
            line-height: 1rem;
        }

        /* --- 底部按钮 --- */
        .six-footer {
            margin-top: 2rem;
            padding: 0 1.2rem;
        }
        .six-btn{
                width: 14.1rem;
            height: 2.35rem;
            background: url(../img/one_btn.png) no-repeat center;
            background-size: 100%;
            font-size: 0.8rem;
            color: #fff;
            text-align: center;
            line-height: 2.35rem;
            margin: 1.125rem auto 1.5rem;
        }