.fixBanners {
        position: fixed;
        right: 20px;
        bottom: 5rem;
        z-index:10;
        display:flex;
        flex-direction: column;
        list-style:none;
        padding:0;
}

.fixBanners li {
    width: 3.3rem;
    height: 3.3rem;
    background: rgb(255, 255, 255);
    border:1px solid rgb(223, 223, 223);
    border-radius: 100%;
    display: flex;
    align-items: center;  /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    transition: border-color 0.5s ease; /* 테두리 색상 변화에 0.5초 애니메이션 적용 */
    position: relative;
    opacity:0;
}

.fixBanners > li:nth-child(1) {
    opacity: 0;
    transform: translateX(15px);
    transition:transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.9s ease;
}
  
.fixBanners > li:nth-child(2) {
    opacity: 0;
    transform: translateX(15px);
    transition:transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, opacity 0.9s ease 0.1s;
}
  
.fixBanners > li:nth-child(3) {
    opacity: 0;
    transform: translateX(15px);
    transition:transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s, opacity 0.9s ease 0.2s;
}

.fixBanners li a{
    display:flex;
    justify-content: center;
    align-items: center;
}

.fixBanners li:not(:last-child) {
    margin-bottom: 7px;
}

.fixBanners img {
    width:58%;
    height:auto;
    fill: rgb(163, 163, 163);
}

.fixBanners > img[src$=".svg"][src*="email"] {
    filter: grayscale(100%) brightness(163) sepia(100%) saturate(0%);
}

.fixBanners li:hover {
    cursor: pointer;
    border-color: rgb(179, 224, 230); /* 마우스 올렸을 때 테두리 색상 변경 */    
}
.fixBanners #youtube {
    background-color:rgb(212, 57, 52);
    border-color:rgb(190, 52, 47);
}

.fixBanners #naver {
    background-color:rgb(52, 182, 8);
    border-color:rgb(49, 170, 8);
}

.fixBanners #youtube i {
    color:white;
    font-size:1.8rem;
}

.fixBanners #naver i {
    color:white;
    font-size:1.8rem;
}

.bannerTooltip {
    position: absolute;
    right: 108%;
    background: #333;
    color: white;
    padding: 6px 8px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    font-size:0.8rem;
    transition: transform 0.5s ease, opacity 0.5s ease;
    cursor:default;
    pointer-events: none;
  }
  
  .fixBanners li:hover .bannerTooltip {
    transform: translateX(-2px);
    opacity: 1;
  }

@media (max-width:1250px) {
    .fixBanners li {
       width:2.5rem;
       height:2.5rem;
    }

    .fixBanners {
        right: 12px;
        bottom: 20px;
    }

    .fixBanners #youtube i {
        font-size:1.5rem;
    }
    
    .fixBanners #naver i {
        font-size:1.4rem;
    }

    .fixBanners li:hover .bannerTooltip {
        opacity: 0;
      }
}