:root{
    --color:#FFFFFF;
}
body{
    background-color:#3169BF;
}
main, footer{
    max-width:480px;
    background-color:#152D52;
}
main{
    min-height:100vh;
}
footer .company{
    color:#EEEEEE;
}
#pan{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap:0px;
    grid-row-gap:0px;
    position:relative;
    overflow:visible;
}
#pan .cell{
    margin:3%;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    overflow:visible;
    border:1px solid #F8D48B;
    background-color:#213A63;
    border-radius:0.3em;
}
#pan .cell:nth-of-type(1){
    grid-area:4 / 3 / 5 / 4;
}
#pan .cell:nth-of-type(2){
    grid-area:4 / 2 / 5 / 3;
}
#pan .cell:nth-of-type(3){
    grid-area:4 / 1 / 5 / 2;
}
#pan .cell:nth-of-type(4){
    grid-area:3 / 1 / 4 / 2;
}
#pan .cell:nth-of-type(5){
    grid-area:2 / 1 / 3 / 2;
}
#pan .cell:nth-of-type(6){
    grid-area:1 / 1 / 2 / 2;
}
#pan .cell:nth-of-type(7){
    grid-area:1 / 2 / 2 / 3;
}
#pan .cell:nth-of-type(8){
    grid-area:1 / 3 / 2 / 4;
}
#pan .cell:nth-of-type(9){
    grid-area:1 / 4 / 2 / 5;
}
#pan .cell:nth-of-type(10){
    grid-area:2 / 4 / 3 / 5;
}
#pan .cell:nth-of-type(11){
    grid-area:3 / 4 / 4 / 5;
}
#pan .cell:nth-of-type(12){
    grid-area:4 / 4 / 5 / 5;
}
#pan .central{
    grid-area:2 / 2 / 4 / 4;
    grid-template-columns:none;
    grid-template-rows:none;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:1.5%;
    border:1px solid #F8D48B;
    background-color:#213A63;
    border-radius:0.3em;
}
#pan .central .two{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
#pan .central span{
    color:#E5BC65;
}
#pan .central b{
    color:#FF0000;
}
#pan .ganzhi{
    grid-area:3 / 4 / 5 / 5;
    display:flex;
    justify-content:center;
    align-items:center;
}
#pan .ganzhi span{
    display:block;
    width:1.1em;
    text-align:center;
    line-height:1.2;
    color:#FEED7F;
}
#pan .gong{
    grid-area:4 / 1 / 5 / 4;
    display:flex;
    align-items:end;
    justify-content:start;
}
#pan .gong span{
    display:inline-block;
    padding:0.2em;
    line-height:1;
    color:#191944;
    background-color:#F7E7AD;
    border-radius:0 0.25em;
}
#pan .xings{
    grid-area:1 / 1 / 4 / 4;
    display:flex;
    align-items:start;
    justify-content:start;
    padding:0.2em 0 0 0.2em;
}
#pan .xings li{
    display:inline-block;
    width:1.1em;
    text-align:center;
    line-height:1.2;
    color:#ACB6DD;
}
#pan .xings span{
    color:#FF3939;
}
#pan .hint{
    grid-area:1 / 3 / 2/ 5;
    text-align:right;
}
#pan .hint{
    color:#00EE00;
}
#pan .hint0, #pan .hint1, #pan .hint2, #pan .hint3{
    color:#FF0000;
}
#pan .badge{
    grid-area:1 / 3 / 3/ 5;
    position:relative;
    overflow:visible;
}
#pan .badge img{
    position:absolute;
}
#pan .badge span{
    position:absolute;
    z-index:1;
    top:-0.5em;
    right:-0.5em;
    display:flex;
    align-items:center;
    justify-content:center;
    width:3em;
    height:3em;
    background:url("/cs/xiangjie/order/badge.png") no-repeat center center;
    background-size:contain;
    color:#FFFFFF;
}
#pan .badges{
    position:absolute;
    left:0em;
    right:0em;
    top:0em;
    bottom:0em;
    z-index:10;
    overflow:visible;
}
#pan .badges span{
    position:absolute;
    width:60%;
    height:60%;
    left:50%;
    top:50%;
    z-index:10;
    transform:translate(-50%, -50%);
    transition:all 1s linear 0.5s;
    background:url("/cs/xiangjie/order/badge.png") no-repeat center center;
    background-size:contain;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3em;
}
#buyer{
    width:100%;
    padding:0 0;
    display:flex;
    align-items:center;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-around;
    overflow:hidden;
    line-height:1;
    font-size:0.9em;
}
#buyer .person{
    margin:0.5em auto;
    height:3em;
    display:inline-block;
    overflow:hidden;
}
#buyer .person ul{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    flex-direction:column;
    transform:translate(0px, 0em);
    transition:all 500ms ease-in 0s;
    overflow:visible;
}
#buyer .person li{
    display:inline-flex;
    align-items:center;
    text-align:left;
    justify-content:space-around;
    padding:0.4em 0;
}
#buyer .person img{
    width:2.2em;
    height:2.2em;
    border-radius:50%;
    margin-right:0.2em;
}
#buyer .person b{
    display:block;
    white-space:nowrap;
    font-weight:normal;
}
#buyer .person i{
    display:block;
    padding-top:0.2em;
    white-space:nowrap;
}
#buyer .number{
    margin:0.5em auto;
}
#buyer .number span{
    display:block;
    white-space:nowrap;
}
#buyer .number b{
    color:#FFE078;
    font-weight:normal;
}
#buyer .number span:last-child{
    padding-top:0.2em;
}