#fixBnr {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

#fixBnr .keynote {
  top: 50%;
  transform: translateY(-20%);
  position: absolute;
  right: 20px;
  z-index: 999;
  transition: all 1s ease;
  padding-right: 10px;
}

#fixBnr .keynote > ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#fixBnr .keynote > ul > li {
  padding: 8px 15px;
}

#fixBnr {
  width: auto;
  color: #fff;
}

#fixBnr .fixBtn {
  border-radius: 4px;
  background-color: #fff;
  transition: transform 1s ease;
}

#fixBnr .fixBtn.blue {
  border: 2px solid #007cba;
}

#fixBnr .fixBtn.blue span {
  color: #007cba;
}

#fixBnr .fixBtn.green {
  border: 2px solid #76991a;
}

#fixBnr .fixBtn.green span {
  color: #76991a;
}

#fixBnr .fixBtn.pink {
  border: 2px solid #d52468;
}

#fixBnr .fixBtn.pink span {
  color: #d52468;
}

#fixBnr .fixBtn.blue:hover {
  background-color: #f5fcff;
}
#fixBnr .fixBtn.green:hover {
  background-color: #fbfff1;
}
#fixBnr .fixBtn.pink:hover {
  background-color: #fff2f7;
}

#fixBnr .keynote > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
}

#fixBnr .keynote ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 우측 정렬 */
  gap: 10px;
}

#fixBnr .keynote ul li.fixBtn {
  --expanded: 220px;         /* 펼쳐졌을 때 최대 너비(버튼마다 다르게도 가능) */
  max-width: 55px;           /* 기본은 작은 박스 */
  height: 45px;
  overflow: hidden;
  text-align: right;
  transition: max-width 1.6s cubic-bezier(.2,.7,.2,1);
  will-change: max-width;
}

#fixBnr .keynote ul li.fixBtn a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
	padding: 0 0px;
  width: fit-content;        /* 내용만큼만 폭을 가짐 → max-width 안에서만 커짐 */
}

#fixBnr .keynote ul li.fixBtn a .text {
  display: inline-block;     /* display:none 대신 애니메이션 가능한 상태 */
  opacity: 0;
  transform: translateX(8px);
  white-space: nowrap;
  transition: opacity .08s ease .08s, transform .3s ease .08s;
  font-weight: bold;
}

/* hover 시 왼쪽으로 확장 */
#fixBnr .keynote ul li.fixBtn:hover {
  max-width: var(--expanded);
}

#fixBnr .keynote ul li.fixBtn:hover a {
  justify-content: flex-start;
}

#fixBnr .keynote ul li.fixBtn:hover a .text {
  opacity: 1;
  transform: translateX(0);
}

/* 필요하면 버튼별로 확장폭 조절 */
#fixBnr .keynote ul li.fixBtn.blue  { --expanded: 260px; }
#fixBnr .keynote ul li.fixBtn.green { --expanded: 220px; }
#fixBnr .keynote ul li.fixBtn.pink  { --expanded: 220px; }

.sideBtn {
  display: none;
}

.sideBtn span {
  color: #fff !important;
  margin: 10px 15px;
}

@media (max-width: 1023px) {
  #fixBnr {
    top: 70%;
  }

  #fixBnr .keynote {
    display: none;
  }

  .sideBtn {
    display: block;
    background-color: #0f7fd5;
    width: 46px;
    height: 44px;
    right: -4px;
    position: absolute;
    bottom: -186px;
    transition: all 0.3s ease;
    border-radius: 4px;
  }
}