.realtime-quick-menu {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  text-align: right;
}
@media (min-width: 820px) {
  .realtime-quick-menu {
    bottom: 60px;
  }
}

.realtime-fab {
  position: relative;
  margin-top: 15px;
}
.realtime-fab__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-left: auto;
  background: #fcfcfc;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12) !important;
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12) !important;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.realtime-fab__btn__wrap {
  position: relative;
}
.realtime-fab__btn:before {
  opacity: 1;
  content: "";
  display: block;
}
.realtime-fab__btn--close {
  z-index: 2;
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12) !important;
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12) !important;
  background-color: #2b2f35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.17242 17.6497L17.8269 5.99519' stroke='%23CCCCCC' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M6.1723 5.99536L17.8268 17.6498' stroke='%23CCCCCC' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.realtime-fab__btn--close:before {
  opacity: 0;
}
.realtime-fab__btn .ribbon {
  font-family: "Pretendard";
  -webkit-transition: 200ms opacity;
  transition: 200ms opacity;
  position: absolute;
  white-space: nowrap;
  background-color: #7300ff;
  opacity: 1;
  bottom: calc(100% - 9px);
  right: calc(100% - 9px);
  color: #fff;
  font-size: 12px;
  letter-spacing: -1px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 12px;
  border-radius: calc(1em + 16px);
}
.realtime-fab__btn .ribbon:after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -1px;
  width: 9px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='10' viewBox='0 0 9 10' fill='none'%3E%3Cpath d='M8.30453 9.12427L-0.00254883 6.73004L5.94357 0.807673L8.30453 9.12427Z' fill='%237300FF'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.realtime-fab__list {
  display: none;
  position: absolute;
  -webkit-transition: opacity 300ms ease;
  transition: opacity 300ms ease;
}
.realtime-fab__list .item {
  width: 100%;
  margin-top: 4px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
  transition: opacity 300ms ease, -webkit-transform 300ms ease;
  transition: opacity 300ms ease, transform 300ms ease;
  transition: opacity 300ms ease, transform 300ms ease, -webkit-transform 300ms ease;
}
.realtime-fab__list .item.show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.realtime-fab__list .link {
  margin-left: auto;
  height: 46px;
  border-radius: 46px;
  padding: 0 18px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  text-align: right;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.5px;
  font-weight: 400;
  font-family: "NanumSquareNeo", "Pretendard", sans-serif !important;
}
.realtime-fab__list .link * {
  font-family: inherit !important;
}
.realtime-fab__list .link--breif {
  background-color: #534618;
}
.realtime-fab__list .link--akradio {
  background-color: #5c1e04;
}
.realtime-fab__list .link--pocket {
  background-color: #2b4342;
}
@media (hover: hover) {
  .realtime-fab__list .link--breif:hover {
    background-color: rgb(102.7803738318, 86.6822429907, 29.7196261682);
  }
  .realtime-fab__list .link--akradio:hover {
    background-color: rgb(116.4375, 37.96875, 5.0625);
  }
  .realtime-fab__list .link--pocket:hover {
    background-color: rgb(52.9681818182, 82.5318181818, 81.3);
  }
}
.realtime-fab--recent {
  display: none;
}
@media all and (min-width: 768px) {
  .realtime-fab--recent {
    display: block;
  }
}
.realtime-fab--recent .realtime-fab__btn:before {
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='52' height='52' rx='26' fill='%2310008B'/%3E%3Cg clip-path='url(%23clip0_89_6410)'%3E%3Cpath d='M25.8555 16.0408C27.067 16.5677 30.399 18.443 33.7832 20.4177C37.1525 22.3838 40.5683 24.4453 41.9844 25.364C39.472 28.0544 36.7343 30.9241 33.9961 33.7937C31.2527 36.6687 28.5087 39.5435 25.9912 42.238C25.9841 42.2339 25.976 42.2288 25.9668 42.2234C25.9326 42.2033 25.8844 42.175 25.8232 42.1384C25.7008 42.0652 25.5267 41.9593 25.3076 41.8269C24.8694 41.5621 24.2523 41.1887 23.5166 40.7419C22.045 39.8482 20.0965 38.6624 18.1465 37.4763C16.1966 36.2903 14.2444 35.1034 12.7646 34.2058C12.0248 33.757 11.4026 33.3808 10.958 33.113C10.7358 32.9792 10.5579 32.8717 10.4316 32.7966C10.3564 32.7519 10.298 32.718 10.2598 32.696C11.4043 30.8087 14.2289 27.5527 16.9551 24.6521C20.2913 21.1034 23.1709 18.3918 25.8555 16.0408Z' fill='white' stroke='%23686F90' stroke-width='0.1'/%3E%3Cpath d='M26.0769 20.1238L36.0652 26.5113L31.0876 31.3107L21.0911 25.0587L26.0769 20.1238Z' fill='%239DA5C9'/%3E%3Cline x1='19.0222' y1='26.9603' x2='28.7366' y2='33.003' stroke='%23686E8A' stroke-width='0.6'/%3E%3Cline x1='16.2673' y1='29.7414' x2='25.7972' y2='35.7454' stroke='%23686E8A' stroke-width='0.6'/%3E%3Cpath d='M18.4685 10.5155C20.2967 10.5156 21.9162 11.5733 23.0642 13.2118C24.2131 14.8515 24.9128 17.0984 24.9128 19.5634C24.9128 22.0281 24.213 24.2744 23.0642 25.9139C21.9162 27.5524 20.2967 28.6111 18.4685 28.6112C16.6402 28.6112 15.0199 27.5525 13.8718 25.9139C12.7231 24.2744 12.0242 22.028 12.0242 19.5634C12.0242 17.0985 12.723 14.8515 13.8718 13.2118C15.0199 11.5732 16.6402 10.5155 18.4685 10.5155Z' fill='white' stroke='%2310008B' stroke-width='0.7'/%3E%3Cellipse cx='17.7676' cy='21.8078' rx='3.25365' ry='4.64361' fill='%23070000'/%3E%3Cpath d='M31.4031 10.5155C33.2313 10.5156 34.8507 11.5733 35.9988 13.2118C37.1477 14.8515 37.8474 17.0984 37.8474 19.5634C37.8473 22.0281 37.1475 24.2744 35.9988 25.9139C34.8507 27.5524 33.2313 28.6111 31.4031 28.6112C29.5748 28.6112 27.9545 27.5525 26.8064 25.9139C25.6577 24.2744 24.9588 22.028 24.9587 19.5634C24.9587 17.0985 25.6576 14.8515 26.8064 13.2118C27.9545 11.5732 29.5748 10.5155 31.4031 10.5155Z' fill='white' stroke='%2310008B' stroke-width='0.7'/%3E%3Cellipse cx='30.4119' cy='21.1071' rx='3.25365' ry='4.64361' fill='%23070000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_89_6410'%3E%3Crect width='33' height='33' fill='white' transform='translate(9.72241 10)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.realtime-fab--recent .realtime-fab__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  opacity: 0;
  bottom: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: calc(100% + 10px);
  background-color: #221d4c;
  color: #fff;
  height: 60px;
  border-radius: 60px;
  width: 240px;
  padding: 0 24px;
  margin: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.realtime-fab--recent .realtime-fab__list .article-title {
  text-align: left;
  width: 100%;
  letter-spacing: -0.5px;
  font-size: 12px;
  font-family: "NanumSquareNeo", "Pretendard", sans-serif !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  text-underline-offset: 3px;
}
.realtime-fab--recent .realtime-fab__list .article-title:hover {
  text-decoration: underline;
}
.realtime-fab--recent.active .realtime-fab__list {
  opacity: 1;
  visibility: visible;
}
.realtime-fab--link .realtime-fab__btn:before {
  font-family: "NanumSquareNeo";
  background: url(https://cwstatic.asiae.co.kr/asiae_v3/service/realtime-fab-btn-251111.webp) no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.realtime-fab--link .realtime-fab__list {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  margin-bottom: 15px;
  bottom: 52px;
  right: 0;
  white-space: nowrap;
}
.realtime-fab--link.active .realtime-fab__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.realtime-fab--link.active .realtime-fab__list .link {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.realtime-fab.active .realtime-fab__btn {
  visibility: hidden;
}
.realtime-fab.active .realtime-fab__btn--close {
  visibility: visible;
}
.realtime-fab.active .ribbon {
  opacity: 0;
}