.fangpidiv{
    border: 1px solid #eee;
    background-color: #f6f7fa;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.5rem;
}

.night .fangpidiv{
    background-color: #181a1b;
    border: 1px solid #444;
    color: #bbb;
}

.fangpidiv h5{
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.fangpidivcents {
    max-width: 18rem;
    margin: auto;
    background-color: #fff;
    border-radius: 3px;
}

.night .fangpidivcents{
    background-color: #232627;
    border: 1px solid #444;
}

.fangpidivcents>div:nth-child(1){
    height: 1.8rem;
    line-height: 1.8rem;
    width: 1.8rem;
    float: left;
}

.fangpidivcents>div:nth-child(2){
    height: 1.8rem;
    line-height: 1.8rem;
    width: calc(100% - 1.8rem - 1.8rem);
    float: left;
    position: relative;
}

#yinliangs{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.fangpidivcents>div:nth-child(3){
    height: 1.8rem;
    line-height: 1.8rem;
    width: 1.8rem;
    float: right;
}




.fangpis{
    border: 1px solid #eee;
    border-radius: 6px;
}

.night .fangpis{
    border:1px solid #444;
}

.fangpis ul{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
}

.fangpis ul li{
    padding: 0.75rem 0;
    text-align: center;
    border: 1px solid #eee;
    cursor: pointer;
    border-radius: 10px;
    font-size: 0.65rem;
    background: linear-gradient(145deg, #f6f7fa, #ffffff);
    border-top: 6px solid #FF9800;
}

.night .fangpis ul li{
    background: #181a1b;
}

.fangpis ul li i{
    display: block;
    margin-bottom: 0.75rem;
    color: #8BC34A;
    font-size: 1rem;
}


.fangpis ul li:nth-child(1) { border-top: 6px solid  #FFEB3B;}
.fangpis ul li:nth-child(2) { border-top: 6px solid  #FFD54F;}
.fangpis ul li:nth-child(3) { border-top: 6px solid  #FFCA28;}
.fangpis ul li:nth-child(4) { border-top: 6px solid  #FFC107;}
.fangpis ul li:nth-child(5) { border-top: 6px solid  #FFB300;}
.fangpis ul li:nth-child(6) { border-top: 6px solid  #FFCC80;}
.fangpis ul li:nth-child(7) { border-top: 6px solid  #FFB74D;}
.fangpis ul li:nth-child(8) { border-top: 6px solid  #FFA726;}
.fangpis ul li:nth-child(9) { border-top: 6px solid  #FF9800;}
.fangpis ul li:nth-child(10) { border-top: 6px solid  #FF8A65;}
.fangpis ul li:nth-child(11) { border-top: 6px solid  #FF8A80;}
.fangpis ul li:nth-child(12) { border-top: 6px solid  #FF5252;}
.fangpis ul li:nth-child(13) { border-top: 6px solid  #FF4081;}
.fangpis ul li:nth-child(14) { border-top: 6px solid  #F50057;}
.fangpis ul li:nth-child(15) { border-top: 6px solid  #FF80AB;}
.fangpis ul li:nth-child(16) { border-top: 6px solid  #E1BEE7;}
.fangpis ul li:nth-child(17) { border-top: 6px solid  #CE93D8;}
.fangpis ul li:nth-child(18) { border-top: 6px solid  #BA68C8;}
.fangpis ul li:nth-child(19) { border-top: 6px solid  #AB47BC;}
.fangpis ul li:nth-child(20) { border-top: 6px solid  #9C27B0;}
.fangpis ul li:nth-child(21) { border-top: 6px solid  #90CAF9;}
.fangpis ul li:nth-child(22) { border-top: 6px solid  #64B5F6;}
.fangpis ul li:nth-child(23) { border-top: 6px solid  #42A5F5;}
.fangpis ul li:nth-child(24) { border-top: 6px solid  #2196F3;}
.fangpis ul li:nth-child(25) { border-top: 6px solid  #2962FF;}
.fangpis ul li:nth-child(26) { border-top: 6px solid  #80DEEA;}
.fangpis ul li:nth-child(27) { border-top: 6px solid  #4DD0E1;}
.fangpis ul li:nth-child(28) { border-top: 6px solid  #26C6DA;}
.fangpis ul li:nth-child(29) { border-top: 6px solid  #00BCD4;}
.fangpis ul li:nth-child(30) { border-top: 6px solid  #00ACC1;}
.fangpis ul li:nth-child(31) { border-top: 6px solid  #A5D6A7;}
.fangpis ul li:nth-child(32) { border-top: 6px solid  #81C784;}
.fangpis ul li:nth-child(33) { border-top: 6px solid  #66BB6A;}
.fangpis ul li:nth-child(34) { border-top: 6px solid  #4CAF50;}
.fangpis ul li:nth-child(35) { border-top: 6px solid  #388E3C;}
.fangpis ul li:nth-child(36) { border-top: 6px solid  #F8BBD0;}
.fangpis ul li:nth-child(37) { border-top: 6px solid  #F48FB1;}
.fangpis ul li:nth-child(38) { border-top: 6px solid  #F06292;}
.fangpis ul li:nth-child(39) { border-top: 6px solid  #EC407A;}
.fangpis ul li:nth-child(40) { border-top: 6px solid  #E91E63;}


.night .fangpis ul li{
    border:1px solid #444;
    color: #aaa;
}

#audio{
    display: none;
}

@media screen and (max-width: 1468px){
    .fangpis ul{
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (max-width: 1210px) {
    .fangpis ul{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 1000px) {
    .fangpis ul{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 560px) {
    .fangpis ul{
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }
}

@media screen and (max-width: 320px) {
    .fangpis ul{
        grid-template-columns: repeat(1, 1fr);
    }
}