body{
    max-width: 100% !important;
    font-weight: 300
}
@font-face {
	font-family: fa;
	src: url(../../fonts/SourceHanSerifCN-ExtraLight.ttf);
}
.top-header{
    width: 100%;
    background-image: linear-gradient(to bottom, #f2edea , #fff);
    padding-top: 0.4rem;
}
.bread{
    margin-top: 0;
    margin-left: 0;
    padding-bottom: 0;
    color: #897C78 !important;
    font-size: .15rem;
    padding-left: 1rem;
}
.bread a{
    color: #897C78 !important; 
}
.bread a:hover{
    color: #4e2b07 !important
}
.cur{
    color: #897C78 !important; 
}
.top-header h1{
    text-align: center;
    color: #4E2A06;
    font-size: .48rem;
    font-weight: 300;
    /* font-family: fa; */
    letter-spacing: .05rem;
    margin-bottom: 0;
    margin-top: .1rem;
}
.charge-banner{
    height: auto;
    width: 100%;
    margin-top: .5rem;
}
.charge-banner img{
    width: 100%;
    height: 100%;
    object-fit: cover
}
.list {
    width: 87%;
    margin: 0.76rem auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.list .box{
    width: 23%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.list .box img{
    width: .94rem;
    height: .94rem
}
.list .box .name{
    color: #000;
    font-size: .27rem;
    margin-top: .3rem
}
.list .box .line{
    width: 102%;
    height: 1px;
    background: #d7b39b;
    margin-top: .33rem
}
.list .box .charge-content{
    color: #111;
    font-size: .19rem;
    margin-top: 0.4rem;
    line-height: .36rem;
    height: 1.2rem;
}

.center{
    width: 87%;
    margin: 2.5rem auto 0;
}
.center h2{
    margin: 0;
    font-size: .41rem;
    color: #191919;
    font-weight: 300;
    text-align: center;
}
.center .top{
    position: relative;
    width: 100%;
    border-radius: .42rem;
    margin-top: .9rem;
    border: solid 2px rgba(199, 190, 183, 0.64);
    overflow: hidden
}
.center .top img{
    object-fit: cover;
    width: 100%;
}
.center .top .box{
    position: absolute;
    right: .87rem;
    top: 50%;
    transform: translateY(-50%);
    width: 58%;

}
.center .top .box div{
    color: #444;
    font-size: .33rem;
}
.center .top .box .center-icon{
    width: 84%;
    margin-top: .55rem;
}
.center .top .box ul{
    display: flex;
    justify-content: space-between;
    margin-top: .35rem
}
.center .top .box ul li{
    width: 24%;
}
.center .top .box ul li div:nth-of-type(1){
    color: #444;
    font-size: .27rem;
}
.center .top .box ul li div:nth-of-type(2){
    color: #444;
    font-size: .19rem;
    line-height: .36rem;
    margin-top: .3rem
}
.center .bottom{
    position: relative;
    width: 100%;
    border-radius: .42rem;
    margin-top: .53rem;
    border: solid 2px #dacec4;
    overflow: hidden
}
.center .bottom img{
    object-fit: cover;
    width: 100%;
}
.center .bottom .box{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 46%;
    padding-left: .9rem
}
.center .bottom .box img{
    position: absolute;
    width: 80%;
    top: -.3rem;
    left: 0;
}
.center .bottom .box .title{
    color: #fff;
    font-size: .33rem;
}
.center .bottom .box .charge-content{
    border-left: .06rem solid #d4a67d;
    padding-left: .4rem;
    margin-top: .8rem
}
.center .bottom .box .charge-content:nth-last-of-type(1){
    margin-top: 1.04rem
}
.center .bottom .box .charge-content div:nth-of-type(1){
    color: #fff;
    font-size: .27rem
}
.center .bottom .box .charge-content div:nth-of-type(2){
    color: #fff;
    font-size: .19rem;
    line-height: .36rem;
    margin-top: .3rem;
    width: 78%;
}
.bottom-title{
    margin: 0;
    text-align: center;
    font-size: .41rem;
    color: #000;
    margin-top: 1.37rem;
    font-weight: 300;
}
.bottom-box{
    width: 100%;
    margin-top: .9rem;
    position: relative
}
.bottom-box img{
    width: 100%;
    object-fit: cover
}
.bottom-box .box{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 33.9%;
    padding-left: .2rem;

}
.bottom-box .box img{
    width: 1.8rem;
	height: 1.8rem;
	border-radius: .18rem;
	border: solid 3px #d0a17b;
    margin-top: .6rem
}
.bottom-box .box .qrcode-text{
    color: #fff;
    font-size: .33rem;
    margin-top: .4rem
}

.bottom-box .box .charge-content{
    margin-top: .55rem;
    color: #fff;
    font-size: .19rem;
    line-height: .36rem;
    width: 72%
}
.bottom-ul{
    background: #bc9a89;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 7% 0.82rem;
}
.bottom-ul .li{
    background-color: rgba(171,133,111,.7);
    border-radius: 0.21rem;
    width: 24.3%;
    height: 4.4rem;
    color: #fff;
    padding: 0 0.45rem;
}
.bottom-ul .li .top-title{
    color: #fff;
    font-size: .26rem;
    margin-top: .2rem;
}
.bottom-ul .li .top-title span{
    color: #d6a787;
    font-size: 1.13rem;
    margin-right: .3rem;
}
.bottom-ul .li .line{
    width: 100%;
    height: 1px;
    background: #fff;
    position: relative;
    margin-top: .2rem
}
.bottom-ul .li .line::after{
    height: 0.05rem;
    width: 0.32rem;
    background: #fff;
    content: "";
    position: absolute;
    left: 0;
    top: -0.03rem;
    display: block;
}
.bottom-ul .li .charge-content{
    margin-top: .39rem;
    color: #fff;
    font-size: .19rem;
    line-height: .36rem;
}
@media (max-width:768px){
    .top-header{
    width: 100%;
    background-image: linear-gradient(to bottom, #f2edea , #fff);
    padding-top: 0.4rem;
}
.bread{
    margin-top: 0;
    margin-left: 0;
    padding-bottom: 0;
    color: #897C78 !important;
    font-size: .15rem;
    padding-left: 1rem;
    display: none
}
.bread a{
    color: #897C78 !important; 
}
.bread a:hover{
    color: #4e2b07 !important
}
.cur{
    color: #897C78 !important; 
}
.top-header h1{
    text-align: center;
    color: #4E2A06;
    font-size: .48rem;
    font-weight: 300;
    margin-top: .5rem;
    font-family: fa;
    letter-spacing: .05rem;
}
.charge-banner{
    height: auto;
    width: 100%;
    margin-top: 1rem;
}
.charge-banner img{
    width: 100%;
    height: 100%;
    object-fit: cover
}
.list {
    width: 84%;
    margin: 1rem auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
}
.list .box{
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.list .box img{
    width: 1.1rem;
    height: 1.1rem
}
.list .box .name{
    color: #1c1c1c;
    font-size: .31rem;
    margin-top: .38rem
}
.list .box .line{
    width: 102%;
    height: 1px;
    background: #d7b39b;
    margin-top: .24rem
}
.list .box .charge-content{
    color: #111;
    font-size: .21rem;
    margin-top: 0.4rem;
    line-height: .36rem;
    height: 6.2rem;
}
.list .box:nth-of-type(3) .charge-content{
     height: 3.2rem;
}

.center{
    width: 88%;
    margin: .2rem auto 0;
}
.center h2{
    margin: 0;
    font-size: .41rem;
    color: #000;
    font-weight: 300;
    text-align: center;
}
.center .top{
    position: relative;
    width: 100%;
    border-radius: .4rem;
    margin-top: .53rem;
    border: solid 1px rgba(199, 190, 183, 0.64);
    overflow: hidden;
    padding-bottom: 0.5rem;
    background: url('../../images/charge/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.center .top img{
    object-fit: cover;
    width: 100%;
    border-radius: 0 0 .4rem .4rem;
    border-bottom: solid 1px rgba(199, 190, 183, 0.64)
}
.center .top .box{
    position: relative;
    right: 0;
    top: 0;
    transform: none;
    width: 100%;

}
.center .top .box div{
    color: #2e2e2e;
    font-size: .36rem;
    text-align: center;
    padding-top: 0.54rem;
}
.center .top .box .center-icon{
    width: 1.1rem;
    margin-top: 0;
    position: absolute;
    border: none;
    border-radius: 0;
    left: 0.36rem;
    top: 1.5rem;
}
.center .top .box ul{
    display: flex;
    justify-content: space-between;
    margin-top: 0.68rem;
    flex-direction: column;
    padding-left: 1.9rem;
}
.center .top .box ul li{
    width: 90%;
    margin-top: 0.6rem;
}
.center .top .box ul li:nth-of-type(1){
    margin-top: 0
}
.center .top .box ul li:nth-of-type(2){
    margin-top: 0.8rem
}
.center .top .box ul li:nth-of-type(3){
    margin-top: 0.5rem
}
.center .top .box ul li div:nth-of-type(1){
    color: #323232;
    font-size: .3rem;
    padding-top: 0;
    text-align: left;
}
.center .top .box ul li div:nth-of-type(2){
    color: #444;
    font-size: .22rem;
    line-height: .36rem;
    margin-top: .23rem;
    padding-top: 0;
    text-align: left
}
.center .bottom{
    position: relative;
    width: 100%;
    border-radius: 0.4rem;
    margin-top: 0.31rem;
    border: solid 1px rgba(199, 190, 183, 0.64);
    overflow: hidden;
    background: #b79987;
    padding-bottom: 0.63rem;
}
.center .bottom img{
    object-fit: cover;
    width: 100%;
    border-radius: 0 0 .4rem .4rem;
    border-bottom: solid 1px rgba(199, 190, 183, 0.64)
}
.center .bottom .box{
    position: relative;
    right: 0;
    top: 0;
    transform: none;
    width: 100%;
    padding-left: 0;
    background: #b79987;
}
.center .bottom .box img{
    position: absolute;
    left: 0;
    top: 0rem;
    width: 90%;
    border-radius: 0;
    border: none
}
.center .bottom .box .title{
    color: #fff;
    font-size: .36rem;
    text-align: center;
    margin-top: .4rem;
    position: relative;
    z-index: 2;
}
.center .bottom .box .charge-content{
    border-left: 0.06rem solid #d4a67d;
    padding-left: 0.46rem;
    margin-top: 0.73rem;
    margin-left: 0.78rem;
}
.center .bottom .box .charge-content:nth-last-of-type(1){
    margin-top: 1.04rem
}
.center .bottom .box .charge-content div:nth-of-type(1){
    color: #fff;
    font-size: .3rem;
    font-weight: normal
}
.center .bottom .box .charge-content div:nth-of-type(2){
    color: #fff;
    font-size: .21rem;
    line-height: .36rem;
    margin-top: 0.3rem;
    width: 87%;
}
.bottom-title{
    margin: 0;
    text-align: center;
    font-size: .4rem;
    color: #000;
    margin-top: 0.88rem;
    font-weight: 300;
}
.bottom-box{
    width: 100%;
    margin-top: .5rem;
    position: relative
}
.bottom-box img{
    width: 100%;
    object-fit: cover
}
.bottom-box .box{
    position: relative;
    right: 0;
    top: 50%;
    transform: none;
    width: 100%;
    padding-left: 0;
    background: #b79c8c;
    overflow: hidden

}
.bottom-box .box img{
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.2rem;
    margin: 0 auto;
    border: solid 0.05rem #cca180;
}
.bottom-box .box .qrcode-text{
    margin-top: 0rem;
    color: #fff;
    width: 100%;
    text-align: center;
    margin-bottom: .6rem;
    font-size: .35rem;
}

.bottom-box .box .charge-content{
    color: #fff;
    font-size: .23rem;
    line-height: .4rem;
    width: 80%;
    margin: 0.36rem auto 0;
    text-align: center;
}
.bottom-ul{
    background: #b79c8c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.42rem 0.98rem;
    flex-wrap: wrap
}
.bottom-ul .li{
    background-color: rgba(171,133,111,.7);
    border-radius: 0.31rem;
    width: 48%;
    height: 5.2rem;
    color: #fff;
    padding: 0 0.36rem;
    margin-bottom: 0.27rem;
}
.bottom-ul .li:nth-of-type(1),.bottom-ul .li:nth-of-type(2){
    height: 5.3rem
}
.bottom-ul .li:nth-of-type(3),.bottom-ul .li:nth-of-type(4){
    height: 4.5rem
}
.bottom-ul .li .top-title{
    color: #fff;
    font-size: .26rem;
    margin-top: .3rem;
}
.bottom-ul .li .top-title span{
    color: #d5b097;
    font-size: 1.13rem;
    margin-right: .3rem;
}
.bottom-ul .li .line{
    width: 100%;
    height: 1px;
    background: #fff;
    position: relative;
    margin-top: 0.2rem;

}
.bottom-ul .li .line::after{
    height: 0.05rem;
    width: 0.32rem;
    background: #fff;
    content: "";
    position: absolute;
    left: 0;
    top: -0.03rem;
    display: block;
}
.bottom-ul .li .charge-content{
    margin-top: .3rem;
    color: #fff;
    font-size: .22rem;
    line-height: .4rem;
}
}