.speaker-button {
  font-size: 30px;  /* 스피커 아이콘 크기 */ padding: 10px 15px; cursor: pointer; }

.xi-play-circle-o:hover {
  color: #0d4cff;}

#speakerButton{position: absolute; color:#666; top:150px;/* background: beige; */}

@media (min-width: 200px) and (max-width: 360px) {
  #speakerButton {
    right: 5px;
    font-size: 20px;
  }
}

@media (min-width: 361px) and (max-width: 480px) {
  #speakerButton {
    right: 5px;
    top: 100px;
    font-size: 20px;
  }



@media (min-width: 481px) and (max-width: 600px) {
  #speakerButton {
    right: 10px;
    top: 98px;
    font-size: 20px;
  }
}


@media (min-width: 601px) and (max-width: 768px) {
  #speakerButton {
    right: 15px;
    font-size: 20px;
  }
}


@media (min-width: 769px) and (max-width: 1024px) {
  #speakerButton {
    right: 20px;
    font-size: 22px; 
  }
}


@media (min-width: 1025px) and (max-width: 1200px) {
  #speakerButton {
    right: 25px;
    font-size: 24px;
  }
}

@media (min-width: 1201px) and (max-width: 1350px) {
  #speakerButton {
    right: 62px;
    font-size: 26px; 
  }
}


@media (min-width: 1351px) and (max-width: 1500px) {
  #speakerButton {
    right: 101px;
    font-size: 28px;
  }
}

@media  (min-width: 1501px) and  (max-width: 1600px) {
  #speakerButton {
    right: 166px;
    top: 170px;
  }
}

@media  (min-width: 1601px) and  (max-width: 1650px) {
  #speakerButton {
    right: 226px;
  }
}
@media  (min-width: 1654px) and  (max-width: 1700px) {
  #speakerButton {
    right: 226px;
  }
}
@media  (min-width: 1701px) and (max-width: 1920px) {
  #speakerButton {
    right: 336px;
  }
}