.body-tablet {
    margin: 0;
    padding: 0;
    background: #ddd;
}

.board {
    position: absolute;
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%) rotate(-30deg) skew(25deg);*/
    width: 560px; /*假設每一個空格是60，7x7就是60*7=420/60*8=480*/
    height: 560px; /*假設每一個空格是60，7x7就是60*7=420/60*8=480*/
    transition: 0.5s;
    background: #fff;
    box-shadow: -20px 20px 20px rgba(0,0, 0, 0.5);
    margin: 0 auto;
}

/*
.board:hover {
    top: 45%;
    box-shadow: -50px 50px 50px rgba(0 ,0, 0, 0.5);
}
*/

.board span {
    width: 80px;/*假設每一個空格是60，7x7就是60*7=420/60*8=480*/
    height: 80px;/*假設每一個空格是60*/
    display: block;
}

/*奇數的Span*/
.board span:nth-child(odd) {
    background: linear-gradient(90deg, #f1f1f1 0%, #f1f1f1 50%, #333 50%, #333 100%);
    background-size: 160px;/*假設每一個空格是60，那就是60*2=120*/
}

/*偶數的Span*/
.board span:nth-child(even) {
    /*角度, 起始色彩 起始色彩位置, 結束色彩 結束色彩位置*/
    background: linear-gradient(90deg, #FF0000 0%, #FF0000 50%, #f1f1f1 50%, #f1f1f1 100%);
    background-size: 160px;/*假設每一個空格是60，那就是60*2=120*/
}

/*top 8x8預設是240px*/
/*right 8x8預設是250px*/
/*左側邊條，iPhone/iPad無法正常顯示*/
/*.board:before {
    content: '';
    position: absolute;
    top: 210px;
    right: 220px;
    height: 20px;
    width: 100%;
    background: linear-gradient(90deg, #fff 0%, #fff 50%, #000 50%, #000 100%);
    background-size: 120px;
    transform: rotate(90deg) skew(45deg);
}*/

/*右下側邊條*/
/*.board:after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -10px;
    height: 20px;
    width: 100%;
    background: linear-gradient(90deg, #000 0%, #000 50%, #fff 50%, #fff 100%);
    background-size: 120px;
    transform: rotate(0) skew(-45deg);
}*/

.board2 {
    position: absolute;
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%) rotate(-30deg) skew(25deg);*/
    width: 630px; /*假設每一個空格是60，7x7就是60*7=420/60*8=480*/
    height: 630px; /*假設每一個空格是60，7x7就是60*7=420/60*8=480*/
    transition: 0.5s;
    background: #fff;
    box-shadow: -20px 20px 20px rgba(0,0, 0, 0.5);
    display: flex;
    flex-wrap:wrap;
}

.board2 span {
    width: 90px; /*假設每一個空格是60，7x7就是60*7=420/60*8=480*/
    height: 90px; /*假設每一個空格是60*/
    display: inline-block;
    font-size: 45px;
    /*background-color: lightblue;*/
    padding-top: 10px;
}

.bmg-light {
    background: url('../Images/Material/005_RV_CONCRETE-WALL_TEXTURE.jpg');    
}

.textBoldBorder-light {
    /*產生文字邊框效果開始*/
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webit-font-smoothing: antialiased;
    /*產生文字邊框效果結束*/
}

.bmg-dark {
    background: url('../Images/Material/001_RV_TEXTURE_CONCRETE-WALL.jpg');    
}

.textBoldBorder-dark {
    /*產生文字邊框效果開始*/
    color: rgba(20,30,68, 1);
    text-shadow: #000 0px 0px 1px;
    -webit-font-smoothing: antialiased;
    /*產生文字邊框效果結束*/
}

/*要使用雙重背景時，作法不是在既有已經設定過背景的 Tag 上重新設定，而是要移除既有設定背景的樣式，然後再新增設定雙重背景的樣式*/
.bmg-collapseSign-light {
    background: url('../Images/Delete.png') left top no-repeat, url('../Images/Material/005_RV_CONCRETE-WALL_TEXTURE.jpg');
    background-size: 25px, cover;
}

.bmg-collapseSign-dark {
    background: url('../Images/Delete.png') left top no-repeat, url('../Images/Material/001_RV_TEXTURE_CONCRETE-WALL.jpg');
    background-size: 25px, cover;
}

/*
.board2:hover {
    top: 15%;
    box-shadow: -50px 50px 50px rgba(0,0, 0, 0.5);
}
*/