:root {--rem-token: 8.333;font-size: calc(100vw / var(--rem-token));}
.center-wrap {width: 100%;position: relative;}
.md-wrap {padding: 0 0.3rem;}

.header {height: 1.2rem;background-color: #fff;box-shadow: 0 0 4px rgba(0,0,0,.1);display: flex;align-items: center;padding: 0 0.2rem;position: fixed;width: 100%;top: 0;z-index: 50;}
.header .back-container {width: 1rem;height: 1rem;display: flex;align-items: center;justify-content: center;}
.header .back-container svg {width: 0.5rem;}
.header-h {height: 1.2rem;}

.article {line-height: 1.8;}
.article img,.article video {width: 100%;object-fit: contain;}

.mt-2 {margin-top: 0.2rem;}
.mt-3 {margin-top: 0.3rem;}
.mt-4 {margin-top: 0.4rem;}
.mt-6 {margin-top: 0.6rem;}
.mt-8 {margin-top: 8rem;}
.mt-10 {margin-top: 1rem;}

.btn-1 {height: 0.8rem;color: #fff;background-color: var(--color-primary);font-size: 0.28rem;display: flex;align-items: center;justify-content: center;
padding: 0 0.4rem;border-radius: 0.14rem;}
.btn-1.op8 {opacity: 0.4;}
.btn-1.n {width: 2.2rem;}
.btn-1.full {width: 100%;}
.btn-1.lg {height: 1rem;font-size: 0.34rem;letter-spacing: 0.1rem;border-radius: 0.2rem;}
.btn-1.circle {border-radius: 1000px;}
.btn-1:active {opacity: .7;}
.btn-1 .icon {width: 0.4rem;margin-right: 0.2rem;}

.line-1 {width: 100%;height: 0.1rem;background-color: #f4f4f4;}

.footer {position: fixed;width: 100%;bottom: 0;left: 0;background-color: #fff;box-shadow: 0 0 4px rgba(0,0,0,.1);display: flex;align-items: center;z-index: 60;}
.footer,.footer-h {height: 1.4rem;}
.footer .item {display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1;}
.footer .item .icon {width: 0.54rem;}
.footer .item .label {font-size: 0.3rem;margin-top: 0.1rem;color: #666;}
.footer .item .i1 {display: block;}
.footer .item .i2 {display: none;}
.footer .item.active .label {color: #333;}
.footer .item.active .i1 {display: none;}
.footer .item.active .i2 {display: block;}

.banner-swiper {width: 100%;height: 3.6rem;overflow: hidden;}
.banner-swiper .swiper-wrapper,.banner-swiper .swiper-slide,.banner-swiper .swiper-slide img {width: 100%;height: 100%;object-fit: cover;}

.index-f1 {display: flex;flex-direction: column;padding-bottom: 0.4rem;}
.index-f1 .title {font-size: 0.36rem;font-weight: bold;color: #333;display: flex;align-items: flex-start;}
.index-f1 .title p {font-size: 0.36rem;flex: 1;min-width: 0;display: flex;}
.index-f1 .title .num {padding:0 0.4rem;background-color:rgba(0,0,0,.5);color: #fff;font-size: 0.26rem;margin-right: 0.2rem;border-top-left-radius: 0.2rem; height: 0.5rem;display: flex;align-items: center;flex-direction: row;min-width: 1.4rem;justify-content: center;}
.index-f1 .block {display: flex;background: var(--color-primary);color: #fff;width: 100%;height: 2rem;border-radius: 0.16rem;}
.index-f1 .block .item {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;}
.index-f1 .block .item p {color: #fff;opacity: .9;}
.index-f1 .block .item:not(:last-child):before {height: 50%;top:0;bottom:0;margin: auto;right: 0;width: 1px;background: #fff;position: absolute;content:'';}
.index-f1 .p1 {display: flex;margin-top: 0.24rem;}
.index-f1 .p1 span, .index-f1 .p1 .context {font-size: 0.3rem;color: #444;}
.index-f1 .p1 .context {flex: 1;min-width: 0;}
.index-f1 .btns {gap: 0.2rem;}
.index-f1 .label {display: flex;align-items: flex-start;margin-top: 0.2rem;}
.index-f1 .label .icon {width: 0.4rem;}
.index-f1 .label .info {margin-left: 0.1rem;}
.index-f1 .label .text {color: #444;font-size: 0.32rem;}
.index-f1 .label .text:not(:first-child) {margin-top: 0.1rem;}