#reader_ctrl{
    display: inline-block;
    height: 33px;
    width: 300px;
    margin-left: 50px;
}
@media screen and (max-width: 768px) {
   margin-left: 10px;
}
 .gyReader_main {
     display: flex;
     width: 100%;
     height: 100%;
     align-items: center;
     border: 1px #e5e5e5 solid;
     border-radius: 20px;
     box-sizing: border-box;
     padding: 0 20px
 }

 .gyReader_title {
     font-size: 16px;
     color: #666666;
 }

 .gyReader_main .gyReader_ctrlbtn {
     width: 24px;
     height: 24px;
     margin-right: 15px;
     background-image: url(gyReader_Play.png);
     background-size: 40% 40%;
     background-repeat: no-repeat;
     background-position: center center;
     border: 1px solid #ccc;
     border-radius: 50%;
 }


 /* .gyReader_main .gyReader_play{
      background-image: url('gyReader_Play.png');
      background-size: 100% 100%;    
  } */

 .gyReader_main .gyReader_pause {
     background-image: url('gyReader_Pause.png') !important;
 }

 .gyReader_main .gyReader_Progress {
     display: flex;
     align-items: center;
     flex: 1;
 }



 .gyReader_main .gyReader_jd {
     width: 100%;
     height: 3px;
     background-color: #e5e5e5;
     cursor: pointer;
     -webkit-user-drag: none;
     user-select: none;
 }

 .gyReader_main .gyReader_jdv {
     width: 0%;
     height: 100%;
     background-color: #1764ce;
     position: relative;
     -webkit-user-drag: none;
     user-select: none;

 }

 .gyReader_main .gyReader_jdv::before {
     content: '';
     width: 10px;
     height: 10px;
     background-color: #fff;
     border: 1px solid #a8a9a7;
     position: absolute;
     top: -4px;
     right: -4px;
     border-radius: 50%;
     -webkit-user-drag: none;
 }

 .gyReader_main .gyReader_Progress_txt {
     font-size: 12px;
     margin-left: 5px;
     color: #666666;
 }