:root {
    /* 视觉主色，尽量贴近设计稿的金色 / 棕色体系 */
    --primary-gold: #c8954f;
    --light-gold: #f4e1b8;
    --accent-brown: #8a5b2b;
    --bg-color: #fdf5eb;
    --text-dark: #3a2a18;
    --text-muted: #7a6a55;
    --white: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    background: #f7efe0;
    color: var(--text-dark);
    min-height: 100vh;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 1376px;
    max-width: 100%;
    /* min-height: 774px; */
    height: 774px;
    display: flex;
    flex-direction: column;
    background: #fffdf8;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(138, 91, 43, 0.25);
    overflow: hidden;
}



.header{
    background-image: url('./img/hd_bg.png');
    background-size: 100% 100%;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    height: 84px;
    position: relative;
}
.logo_section{
    display: flex;
    align-items: center;
    position: absolute;
    top: 15px;
    left: 30px;
}
.logo1{
    width: 180px;
    height: 32px;
}
.logo2{
    width: 109px;
    height: 43px;
    margin-left: 20px;
}
.logo1 img, .logo2 img{
    width: 100%;
}
.title_logo{
    height: 33px;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translate(-50%, 0);
}
.title_logo img{
    height: 100%;
}

.main_content{
    flex: 1;
    display: flex;
    gap: 20px;
    overflow: hidden;
}
.common_content_box{
    position: relative;
}
.width100 img{
    width: 100%;
}
.height100 img{
    height: 100%;
}
/* 合作伙伴 */
.hezuohuoban_box{
    display: flex;
}
/* 商户logo */
.b_logo_container{
    position: relative;
    display: inline-block;
}
.b_logo_box{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 一行4个 */
    gap: 20px; /* 间距 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 页面1 */
.page1_container .main_content{
    padding: 20px 30px;
    box-sizing: border-box;
    justify-content: space-between;
    position: relative;
}
.page1_container .main_content_c{
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translate(-50%, 0);
}
/* 页面1 数据产品 */
.shujuchanpin_box, .shujunengli_box, .shujufuwu_box{
    padding: 15px 25px 40px;
}
.shujuchanpin_box{
    display: flex;
}
.shujuchanpin_circle_box{

}
.shujuchanpin_desc_box{
    flex: 1;
    margin-left: 10px;
    position: relative;
}
.shujuchanpin_circle{
    /* width: 122px;
    height: 122px;
    border-radius: 50%;
    background: #000; */
}
.page1_common_desc_bg{
    background: #f8f3ed;
    border-radius: 5px;
    margin: 5px 0;
    padding-left: 10px;
    color: #000;
    font-size: 14px;
    font-weight: bold;
}
/* 页面1 合作伙伴 */
.hezuohuoban_box{
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 30px;
}
.hezuohuoban_desc_box{
    flex: 1;
    margin-left: 10px;
}

.auto-scroll{
    overflow: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.auto-scroll::-webkit-scrollbar{
    display: none;
}




/* 页面2 */
.page2_container .main_content{
    padding: 40px 30px;
    box-sizing: border-box;
}
.page2_container .main_content_l_b{
    padding: 0 30px;
}
.page2_container .main_content_l_b .title{
    font-size: 20px;
    line-height: 45px;
    color: #fff;
    padding-left: 30px;
}
.page2_container .main_content_l_b .content{
    font-size: 16px;
    line-height: 24px;
    color: #000;
    padding: 20px 30px;
    text-indent: 2em;
}
.page2_container .main_content_l_b .title_bg{
    background: #b8a27c;
    background-image: url('./img/盒子上部分.png');
    background-size: 100% 100%;
    height: 45px;
}
.page2_container .main_content_l_b .content_bg{
    background: #b8a27c;
    background-image: url('./img/盒子下部分.png');
    background-size: 100% 100%;
    height: 180px;
}
/* 金字塔 */
.jinzita_box{
    position: relative;
    height: 345px;
}
.jinzita{
    position: absolute;
    left: 50%;
    top: 25px;
    transform: translate(-50%, 0);
}
.desc_1{
    position: absolute;
    top: 117px;
    left: -110px;
    display: flex;
    align-items: center;
    color: #000;
    font-size: 16px;
}
.desc_2{
    top: auto;
    bottom: 25px;
    left: -140px;
}
.desc_3{
    left: auto;
    top: 50px;
    right: -55px;
}
.desc_4{
    top: auto;
    left: auto;
    bottom: 50px;
    right: -155px;
}
.desc_1_line{
    width: 75px;
    height: 2px;
    background: #000;
}
.desc_2_line{
    width: 50px;
}
.desc_3_line{
    width: 60px;
}
.desc_4_line{
    width: 50px;
}
/* 探索方向 */
.fazhan_box{
    padding: 0 15px;
    margin-top: 15px;
}
.common_hasbg_title{
    height: 30px;
    background-image: url('./img/text_title_bg.png');
    background-size: 100% 100%;
    border-radius: 6px;
    padding-left: 40px;
    box-sizing: border-box;
    color: #fff;
    line-height: 30px;
    font-weight: bold;
    font-size: 18px;
}
.common_hasbg_desc_box{
    padding: 5px 20px;
}
.common_hasbg_desc{
    background: linear-gradient(to right, #faf5ed, #fefcf6);
    margin: 5px 0;
    padding-left: 20px;
    color: #000;
}
.shimingrenwu_container{
    margin-top: 20px;
}



.shujuchanpin_circle{
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fefdfc;
    border-radius: 50%;
    box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
}

/* 外环：用 CSS 变量控制 */
.progress-ring {
    --deg: 0deg;
  
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: conic-gradient(
      #c2ae6f 0deg,
      #c8b781 var(--deg),
      #e5ded5 var(--deg),
      #e1d6c9 360deg
    );
    display: flex;
    justify-content: center;
    align-items: center;
  
    transition: background 0.6s ease; /* 平滑动画 */
  }
  
.progress-inner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fffdf9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.num {
    font-size: 30px;
    font-weight: 600;
    color: #c8b06e;
    line-height: 18px;
}

.num span {
    font-size: 16px;
}

.text {
    font-size: 14px;
    color: #633a08;
}


/* 列表页 */
.list_page_container .list_main{
    padding: 10px 40px;
}
.list_main{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px 30px;
    overflow: auto;
}
.list_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}
.list_title{
    font-size: 26px;
    font-weight: 700;
    color: #3a2a18;
}
.back_link{
    color: #8a5b2b;
    text-decoration: none;
    font-weight: 600;
}
.back_link:hover{
    text-decoration: underline;
}
.list_desc{
    color: #7a6a55;
    font-size: 14px;
}
.list_card{
    background: linear-gradient(to bottom right, #fffdf8, #f7efe0);
    border: 1px solid #eadfcf;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 12px 28px rgba(138, 91, 43, 0.1);
}
.list_group_title{
    font-size: 18px;
    font-weight: 700;
    color: #633a08;
    margin-bottom: 10px;
}
.list_items{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.list_item{
    background: #fefcf6;
    border: 1px solid #eadfcf;
    border-radius: 8px;
    padding: 10px 12px;
    color: #3a2a18;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(0,0,0,0.05);
}
.list_item.long_text{
    grid-column: 1 / -1;
    line-height: 1.7;
    font-weight: 500;
}
.tag{
    display: inline-block;
    padding: 4px 10px;
    background: #f4e1b8;
    color: #633a08;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.page3_container .main_content{
    padding: 40px 30px;
    display: flex;
    justify-content: center;
}
.page3_container .main_content_r{
    margin-left: 50px;
}