@charset "utf-8";
*{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.page-title{
    text-align: center;
    margin-top: 50px;
}
.container{
    width: 1200px;
    margin: auto;
    margin-top: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.board,.explain{
    width: 50%;
}
#chess {
    border: 1px solid black;
}

.explain {
    font-size: 20px;
    color: #333;
    /* text-align: center; */
    box-sizing: border-box;
    padding-left: 50px;
    overflow: auto;
    min-width: 500px;
    line-height: 1.8;
}
.show{
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
}
.show[data-img="1"]{
    background-image: url("../assets/black.png");
}
.show[data-img="1"]::after{
    display: inline-block;
    width: 80px;
    margin-left: 40px;
    content: "该黑子下";
    line-height: 40px;
}

.show[data-img="2"]{
    background-image: url("../assets/white.png");
}
.show[data-img="2"]::after{
    display: inline-block;
    width: 80px;
    margin-left: 40px;
    content: "该白子下";
    line-height: 40px;
}


/* 大于1200px */
@media only screen and (min-width:1200px) {
    .container {
        width: 1200px;
    }
}

@media only screen and (max-width:767px) {
    .container{
        width: 100%;
    }
    .board,.explain{
        width: 100%;
    }
    
}