.elementor-573 .elementor-element.elementor-element-df97485{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-036ba89 */.td_link_wrap{
    display: flex; 
    gap: 30px 40px; 
    justify-content: center;
}

.td_link{
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  overflow: hidden;
  display: flex;
  gap: 10px 20px;
  background: transparent;
  /*width: 100%;*/
}

.td_link li{
  display: inline-block;
  zoom: 1;
  margin: 0;
  border: 0;
  list-style: none;
  width: 100%;
  position: relative;
  align-content: center;
  text-align: center;
  background: #f8fafb;
  border-radius: 50px;
	padding: 15px 30px;
	color: #666;
	transition: all 0.3s ease-in-out;
  white-space: nowrap;
}

.td_link li a{
  display: block;
  font-size: 18px;
  line-height: 26px;
  border: 0;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  transition: all 0.3s ease-in-out;
  padding: 0;
  font-weight: 600;
  color:#666;
}

.td_link li:hover{
color: #fff;
background: #229695;
font-weight:600;
}

.td_link li:hover a
{
  font-weight: 600;
  color: #fff;
}

/* --- 반응형 코드 --- */

@media screen and (max-width: 768px) {
    .td_link_wrap {
        gap: 15px;
    }
    
    .td_link li {
        padding: 10px 20px; /* 모바일에서 버튼 크기 축소 */
    }
    
    .td_link li a {
        font-size: 15px; /* 모바일 폰트 크기 */
    }
}

@media screen and (max-width: 480px) {
    .td_link {
        width: 100%;
        flex-direction: column; /* 좁은 화면에선 세로로 쌓기 (선택 사항) */
        align-items: center;
    }
    
    .td_link li {
        width: 80%; /* 모바일에서 버튼 너비 확장 */
        max-width: 250px;
    }
}/* End custom CSS */