.div-table {padding-left:25%;padding-right:25%;}
td{text-align: center;}
.play-caligraphy-popup{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;overflow-x: auto;overflow-y: scroll;background: rgba(0, 0, 0, 0.5);transition: opacity 0.3s ease 0;}
.play-caligraphy-popup-loading,.play-caligraphy-popup-inner {
    position:fixed;top:300px;left:40%;border-radius: 4px;background: #fff none repeat scroll 0% 0%;width:320px;height:320px;text-align:center;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.75);z-index:1001;
}
.pinyinStroke img{margin-top:-20px;}
.popup-close,.popup-close-add{
    width: 30px;
    height: 30px;
    padding-top: 4px;
    display: inline-block;
    position: relative;
    top: 0;
    right: 0 ;
    transition: ease 0.25s all;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    border-radius: 1000px;
    background: rgba(0,0,0,0.8);
    font-family: Arial, Sans-Serif;
    font-size: 20px;
    text-align: center;
    line-height: 100%;
    color: #fff;
    float: right;
    cursor: pointer;
}
@media screen and (max-width: 1080px){.play-caligraphy-popup-loading,.play-caligraphy-popup-inner {left:35%;}}
@media screen and (max-width: 735px){
    .div-table {padding-left:10%;padding-right:10%;}
    .play-caligraphy-popup-loading,.play-caligraphy-popup-inner {left:30%;}
}
@media screen and (max-width: 567px){
    .div-table {padding-left:2%;padding-right:2%;}
    .play-caligraphy-popup-loading,.play-caligraphy-popup-inner {left:20%;}
}
@media screen and (max-width: 430px){.play-caligraphy-popup-loading,.play-caligraphy-popup-inner {left:10%;}}
@media screen and (max-width: 376px){.play-caligraphy-popup-loading,.play-caligraphy-popup-inner {left:3%;}}