.masking{ background: url(../img/mask/mask1.png) no-repeat; background-size: 100% 100%; width: 7.786rem; height: 4.853rem; position: relative; display: none; font-size: 0; } .maskingCon{ position: absolute; left: 50%; top: 50%; width: 7.2rem; height: 4.266rem; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } .maskingBox{ position: relative; width: 100%; text-align: center; font-size: 0; } .maskingBox p{ font-size: 0.346rem; color: #E6E6E6; width: 100%; padding-top: 1.333rem; } .maskingBox p:nth-child(2){ padding-top: 0.066rem; } .maskingBox p span{ color: #3CAFF3; } .maskingBox p span.dew{ color: #3CAFF3; } .maskingBox p span.gem{ color: #00f7ff; } .maskingBtn,.dewMaskingBtn{ position: absolute; left: 0; bottom: 0; width: 100%; height: 1.2rem; line-height: 1.2rem; text-align: center; font-size: 0; } .maskingBtn span,.dewMaskingBtn span{ display: inline-block; width: 50%; font-size: 0.453rem; color: #58DBD7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .maskingBtn span:nth-child(2),.dewMaskingBtn span:nth-child(2){ font-weight: bold; }