* {
    margin: 0px;
    padding: 0px;
    font-size: 0.3rem;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
}

body , html {
    font-family: SF Pro Display,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif;
}

input,
textarea {
    outline: none;
    border: none;
}


.head {
    width: 100% ;
    
}

.head .out {
    display: flex ; 
    justify-content: center ;
    align-items: center ;
    height: 0.9rem;
    width: 100% ;
    background: #3059c2 ;
}

.head .out .logo {
    height: 0.41rem;
    display: block ;
}

.head .out span {
    display: block ;
    color: #FFF ;
    margin-left: 0.15rem ;
    font-weight: bold ;
    font-size: 0.3rem ;
    opacity: 0.9;
    letter-spacing: 0.02rem;
}

.Amount_Payable {
    width: 100% ;
    padding: 0.3rem 0.2rem ;
    box-sizing: border-box ;
}

.Amount_Payable .title {
    width: 100% ;
    margin-bottom: 0.2rem ;
    color: #767676 ;
    font-size: 0.28rem ;
    font-weight: 400 ;
}

.Amount_Payable .amount {
    width: 100% ;
    height: 0.8rem ;
    background: #efefef ;
    display: flex ;
    align-items: center ;
    padding: 0px 0.35rem ;
    box-sizing: border-box;
}

.Amount_Payable .amount span {
    color: #3a3a3a ;
    font-size: 0.37rem;
    font-weight: bold ;
    margin-right: 0.2rem ;
    display: block ;
}

.Amount_Payable .amount p{
    color: #3a3a3a;
    font-size: 0.3rem ;
    font-weight: 600 ;
}

.payment {
    padding: 0px 0.2rem ;
    box-sizing: border-box ;
}

.payment .out {
    padding-top: 0.2rem ;
    margin-top: 0.2rem ;
    border-top: 0.01rem solid #efefef ;
}

.payment .out .title {
    width: 100% ;
    margin-bottom: 0.45rem ;
    color: #767676 ;
    font-size: 0.28rem ;
    font-weight: 400 ;
}

.payment .out .item {
    width: 100% ;
    height: 1rem ;
    border-radius: 0.1rem ;
    box-shadow: 0px 0px 0.1rem 0.01rem #e4e4e410;
    border: 0.02rem solid #e4e4e4;
    box-sizing: border-box ;
    margin-bottom: 0.25rem ;
}

.payment .out .item a {
    display: flex ;
    align-items: center ;
    justify-content: space-between ;
    height: 100% ;
    width: 100% ;
    padding: 0px 0.2rem ;
    box-sizing: border-box ;
}

.payment .out .item svg{
    height: 0.3rem ;
}

.payment .out .item .left {
    display: flex ;
    align-items: center ;
}

.payment .out .item .left .state{
    width: 0.27rem ;
    height: 0.27rem ;
    background: #eee ;
    border: 0.02rem solid #e99e39 ;
    border-radius: 50% ;
    margin-right: 0.3rem;
    box-sizing: border-box ;
    position: relative;
}

.payment .out .item .left .state::after {
    position: absolute ;
    left: 0px ;
    top: 0px ;
    width: 100% ;
    height: 100% ;
    content: '';
    background: #426dd8c4;
    transform: scale(1.3);
    border-radius: 50% ;
    opacity: 0 ;
    transition: all  0.5s ;
}

.payment .out .item:hover .left .state::after {
    transform: scale(0.65);
    opacity: 1 ;
}

.payment .out .item .left .logo_icon {
    height: 0.36rem ;
    display: block ;
}


.payment .out .item .left .logo_icon img {
    height: 100% ;
    display: block ;
}

.footer {
    width: 100% ;
    text-align: center ;
    margin-top: 0.4rem ;
}

.footer a {
    font-size: 0.22rem ;
    color: #f06465 ;
    font-weight: 500 ;
    position: relative;
}

.footer a::after {
    width: 100% ;
    height: 0.02rem ;
    background: #f06465 ;
    display: block ;
    content: '';
    position: absolute ;
    left: 50% ;
    transform: translateX(-50%);
}

.footer  p{
    font-size: 0.21rem ;
    margin-top: 0.2rem ;
    font-weight: 500 ;
    color: #373737 ;
}

@media (min-width:360px) and (max-width:768px) {
    html {
        font-size: 52px !important;
    }

}

@media (min-width:769px) and (max-width:930px) {
    html {
        font-size: 50px !important;
    }
}

@media (min-width:931px) and (max-width:1099px) {
    html {
        font-size: 60px !important;
    }
}

@media (min-width:1100px) and (max-width:1249px) {
    html {
        font-size: 70px !important;
    }
}

@media (min-width:1250px) and (max-width:1399px) {
    html {
        font-size: 80px !important;
    }
}

@media (min-width:1400px) and (max-width:1699px) {
    html {
        font-size: 90px !important;
    }
}


@media (min-width:1700px) {
    html {
        font-size: 100px !important;
    }
}