
/* 原料供应价格样式 */





/* 顶部筛选栏 */
.materials_header {display: flex;align-items: center;justify-content: space-between;padding: 5rem 0 2.75rem;border-radius: .938rem;margin-bottom: 2.75rem;border-bottom: .063rem solid #dcdfe2;}
.materials_header .title {font-size: var(--font20);;font-weight: bold;;color: #00b26a; /* 可根据品牌色调整 */}
.filter-group {display: flex;;gap: 1rem;}
.filter-group select {border: 1px solid transparent;;border-radius: .25rem;;cursor: pointer;;font-size: var(--font15);;color: #777;;background: #ffffff;;padding: .75rem 6.25rem .75rem 1rem;}

/* 主体内容容器：双列布局 */
.main {display: grid;grid-template-columns: 1fr 1fr; /* 左右两列 */;gap: 1.25rem;margin-bottom: 1.5rem;}

/* 图表卡片样式 */
.chart-card {background-color: #fff;;border-radius: 1rem;padding: 1.25rem 0;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);/* box-sizing: border-box; */}
.chart-card h3 {font-size: var(--font16);;margin-bottom: .625rem;;font-weight: bold}
/* 模拟图表区域，可替换为实际图表（如 ECharts、Chart.js 容器） */
.chart-placeholder {width: 100%;;height: 34.375rem;min-height: 23.75rem;border-radius: .25rem;;display: flex;;align-items: center;justify-content: center;;color: #999;;font-size: var(--font14);}

/* 底部信息区域：四卡片布局 */
.bottom-section {display: flex;;justify-content: space-between;}
.info-card {background-color: #fff;;border-radius: 1rem;;padding: 2.25rem 2.25rem 5.125rem;;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.info-card h4 {font-weight: 700;}
.price-info {display: flex;justify-content: space-between; ;flex-wrap: wrap;}
.price-info .item {display: flex;width: 50%;;flex-direction: column;}
.price-info .item span:first-child {color: #666;}
.price-info .item span:last-child {font-weight: bold;}
.price-change {color: #ff4d4f; /* 红色标识价格变化 */}
.table-card table {width: 100%;;border-collapse: collapse;}
.table-card th,.table-card td {padding: 1rem 0;text-align: left;;font-size: var(--font14);}
.table-card th {background: rgba(233,237,240,.5);;font-weight: bold;;color: #666;}

/* 响应式适配：小屏幕下调整布局 */
@media (max-width: 768px) {
    .main,.bottom-section {grid-template-columns: 1fr;;}
    .filter-group {flex-direction: column;;gap: .625rem;;}
}

.materials {background: url(../images/materials-bj.jpg) no-repeat center bottom ; background-size: cover; padding-bottom: 8.125rem;}
.materials_header .logo{}
.materials_header .logo img {min-height: 2.375rem;}
.materials_header .logo em {padding: 0 1.25rem; border-right: 1px solid #D6D6D6; color: #000000; margin-right: 1.25rem; line-height: 1.3; display: inline-block;}
.materials_header .logo b {font-weight: 700; color: #000000; }
.filter-group select {appearance: none;-webkit-appearance: none;-moz-appearance: none; background: url(../images/select-icon.png) no-repeat right 1.25rem center #fff;}


.info-card{width: 29%;}
.price-info{margin-top: 3.125rem;}
.price-info .item{margin-bottom: 4.5rem;}
.price-info .item em{color: #000000; font-weight: 700;}
.price-info .item em.price-change{color: #d60000;}
.price-info .item:nth-child(3),.price-info .item:nth-child(4){margin-bottom: 0;}
.price-info .item:nth-child(2n){width: 37%;}
.quotation{width: 100%;}
.table-card{padding: 2.25rem 2.25rem 0; width: 70%; box-sizing: border-box;}
.table-card h4{margin-bottom: .625rem;}
.table-card th:first-child{padding-left: 2.5rem;}
.quotation-list{position: relative; height: 13.75rem; overflow: hidden; min-height: 12.5rem;}
.quotation-list ul li{height: 3.438rem;}
.quotation{}
.quotation dl{background: rgba(233,237,240,0.5); padding: 1rem 0; margin-bottom: .313rem;}
.quotation dl dt{width: calc(100% / 3); padding-left: 2.5rem; color: #666666; }
.quotation-list ul li{border-bottom: 1px solid  #e9edf0; display: flex;align-items: center; width: 100%;}
.quotation-list ul li .box{width: 100%; padding: .625rem 0;}
.quotation-list ul li .box dd{width: calc(100% / 4); padding-left: 2.5rem; }
.quotation-list ul li:last-child{border-bottom: none;}
.quotation-list ul li .box dd em{color: #000;}
.quotation-list ul li .box dd b{color: #6fba2c;font-weight: 700; }
.quotation-list ul li .box dd span{color: #777;font-weight: 500; }
.table-card{position: relative;}
.quotation-arrow{}
.quotation-arrow .swjt{margin-top: 0!important;top: 7%;}
#quotation-prev{left: auto;right: 6%;}
#quotation-next img{transform: rotateY(180deg);   -webkit-transform: rotateY(180deg);/}
#quotation-next{right: 4%;}


@media (max-width: 992px) {
    .materials_header {flex-wrap: wrap;}
    .filter-group{width: 100%; justify-content: space-between;margin-top: 1rem;}
    .filter-group select{width: 30%;}
}

@media (max-width: 768px) {
    .quotation dl dt {padding: 0; text-align: center;}
    .quotation-list ul li {height: auto;}
    .quotation-list ul li .box dd {padding: 0; text-align: center;}
    .quotation-list ul li .box dd em {font-size: var(--font14);}
    .quotation-list ul li .box dd b {font-size: var(--font14);}
    .price-info .item {margin-bottom: 1.875rem;}

    .bottom-section{flex-wrap: wrap;}
    .filter-group select{width: 100%;}
    .info-card{width: 100%; margin-bottom: .5rem;}
    .quotation-arrow .swjt{top: 2%;}
}


