.family_site_slide {
  display:flex;
  align-items:center;
  gap:30px;
}
.family_site_slide .family_btns_wrapper {
    display:flex;
    gap:10px;
    width:205px;
}
.family_site_slide .family_btns_wrapper .family_name {
    font-size:1.11rem;
    text-align:center;
    font-weight:800;
    font-family: 'SUITE';
}
.family_site_slide .family_btns_wrapper .family_site_btns {
    display:flex;
    align-items:center;
    gap:5px;
    width:fit-content;
}
.family_site_slide .family_btns_wrapper .family_site_btns button {
    background:unset;
    width:25px;
    height:25px;
}
.family_site_slide .family_btns_wrapper .family_site_btns button svg {
    width:100%;
    height:100%;
}
.family_site_slide .family_btns_wrapper .family_site_btns .toggle_btn_wrap {
    position: relative;
    width:25px;
    height:25px;
}
.family_site_slide .family_btns_wrapper .family_site_btns .toggle_btn_wrap button {
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.family_site_slide .family_logos {
    height: 83px;
    overflow: hidden;
    position: relative;
    flex:1;
}
.family_site_slide .family_logos .logo_box .inner {
    padding:10px 20px;
    border:1px solid #A9D8B8;
    border-radius:20px;
    background-color:#fff;
    display:block;
}
  
/* 슬라이드 기본 설정 */
#slideTrack {
    display: flex;
    width: max-content;
    align-items: center;
    height: 100%;
    gap: 30px;
  }
  
  /* 왼쪽으로 흐르는 애니메이션 */
  #slideTrack.scroll-left {
    animation: scroll-left 30s linear infinite;
  }
  
  /* 오른쪽으로 흐르는 애니메이션 */
  #slideTrack.scroll-right {
    animation: scroll-right 30s linear infinite;
  }
  
  /* 일시정지 상태는 애니메이션 제거 */
  #slideTrack.paused {
    animation: none !important;
  }
  
  /* keyframes 정의 */
  @keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  
  @keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }

  
  
  /* 초기 상태: 재생 버튼 숨김 */
.family-slide-play {
    display: none;
}

.family_site_slide .logo_box {
    flex: 0 0 auto;
    padding: 0;
}
  
.family_site_slide .logo_box img {
    vertical-align: middle;
    border-radius:10px;
    width:150px;
}
  
.family_site_slide .family_logos::before,
.family_site_slide .family_logos::after {
    content: "";
    position: absolute;
    width: 100px;
    height:83px;
    z-index: 2;
    top: 0;
}
  
.family_site_slide .family_logos::before {
    left: 0;
    background: linear-gradient(to right, #e6fef5 0%, transparent 100%);
}
  
.family_site_slide .family_logos::after {
    right: 0;
    background: linear-gradient(to left, #e6fef5 0%, transparent 100%);
}
  

  /* 반응형 */
@media screen and (max-width: 1024px) {
    .family_site_slide {
        margin:0;
    }
}
@media screen and (max-width: 991px) {
    .family_site_slide {
        gap:20px;
      
    }
    .family_site_slide .family_site_btns button {
        width:30px;
        height:30px;
    }
    .family_site_slide .family_logos::before, 
    .family_site_slide .family_logos::after {
        width:30px;
    }

}
@media screen and (max-width: 768px) {
    .family_site_slide {
        flex-direction:column;
        width: 100%;
        justify-content: space-between;
    }
    .family_site_slide .family_btns_wrapper {
        width:100%;
        justify-content: space-between;
    }
    .family_site_slide .family_logos {
        width:100%;
    }
}
@media screen and (max-width: 640px) {}