/* Caligraphy pop-up v2*/
.cnpn-play-caligraphy-popup {display:none;position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;padding-top:12%; overflow-x: auto;overflow-y: scroll;background: rgba(0, 0, 0, 0.2);transition: opacity 0.3s ease 0s;font-size: 1rem;line-height: 1.75;z-index: 980;}
.cnpn-play-caligraphy-popup-inner {position:relative;border-radius: 4px;background: #fff;width: 567px;margin-left: auto;margin-right: auto;padding:0;box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);z-index: 990;}
.cnpn-popup-close {cursor: pointer;color: #fff;background: rgba(0, 0, 0, 0.9);aspect-ratio: 1 / 1;width: 30px;padding-top: 4px;position: relative;float: right;top: 0;right: 5px;transition: ease 0.25s all;-webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);border-radius: 100px;font-family: Arial, Sans-Serif;font-size: 20px;text-align: center;line-height: 100%;z-index: 1000;
}
.cnpn-loading-icon-content{margin-left:5px;}
.mobile-screen-stroke{display:none !important;}
.wide-screen-stroke{display:block !important;}
.cnpn-pinyinStroke {top: 250px;display: none;}
.cnpn-pinyinStroke>img,.cnpn-pinyinStroke>.jsgif>canvas,.cnpn-pinyinStroke>video {display:block; margin: 0 auto;min-height:100px;}
.cnpn-caligraphy-content-png>.cnpn-pinyinStroke>.wide-screen-stroke{width:95%;margin-left:2.5%;}
.cnpn-strokePrev {position: relative;height: 40px;width: 40px;left: 0;top: 180px;cursor: pointer;}
.cnpn-strokeNext {position: relative;height: 40px;width: 40px;float: right;right: 0;top: 140px;cursor: pointer;}
.cnpn-ended {opacity: 0.2;}
.cnpn-caligraphy-content-nav-tabs-ul {width: 90%;margin-left: 5%;margin-right: 5%;display: table;border-bottom: 1px solid #cecece;}
.cnpn-caligraphy-content-nav-tab-li {display: table-cell;text-align: center;cursor:pointer;}
.cnpn-caligraphy-active-tab-li {border-bottom: 2px solid #258fd8;color: #34678a;}
.cnpn-caligraphy-content-nav-tabs {height: 38px;line-height: 38px;}
.cnpn-caligraphy-content-per-view {max-width: 90%;margin-left:auto;margin-right:auto;}
.cnpn-calligraphy-pinyin-info {margin: 5px auto;text-align: center;font-weight: bold;}
.cnpn-calligraphy-no-resource-pinyin{position:absolute;text-align:center;font-weight: bold;margin:5px 0 0 33%;}
.cnpn-calligraphy-no-resource-msg-txt {padding: 5px;padding-top: 5px;color: #009fffeb;text-align: center;font-size: 14px;padding-top: 130px;}
.cnpn-calligraphy-no-resource-msg-img {text-align: center;}
.cnpn-calligraphy-no-resource-char{position:absolute;text-align:center;font-weight: bold;margin:-15% 0 -10% 35%;}
.gp-control-design{display:block;text-align:center;margin-top:-8%;margin-bottom:8%}
.gp-player-button{user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}
.cnpn-calligraphy-char-info {display:block;text-align:center;font-size: 15px;padding-bottom: 10px;}
.cnpn-caligraphy-content-gif>.cnpn-pinyinStroke>.cnpn-calligraphy-char-info,.cnpn-caligraphy-content-mp4>.cnpn-pinyinStroke>.cnpn-calligraphy-char-info{margin-top:-5%;}
@media screen and (max-width: 1201px) {.cnpn-play-caligraphy-popup {padding-top:20%;}}
@media screen and (max-width: 736px) {.cnpn-play-caligraphy-popup-inner {width:500px;}}
@media screen and (max-width: 567px) {
    .mobile-screen-stroke{display:block !important;}
    .wide-screen-stroke{display:none !important;}
    .cnpn-play-caligraphy-popup-inner {width:70%}
    .cnpn-caligraphy-content-png>.cnpn-pinyinStroke>img{width:80%;margin-left:10%;}
    .cnpn-caligraphy-content-nav-tab-li{font-size:15px;}
    .cnpn-calligraphy-no-resource-pinyin{margin:5px 0 0 30%;}
    .cnpn-calligraphy-no-resource-char{margin:-18% 0 0 30%;}
}
@media screen and (max-width: 412px) {
    .cnpn-play-caligraphy-popup-inner {width:90%}
    .cnpn-caligraphy-content-nav-tab-li{font-size:13px;}
}