.lfr-layout-structure-item-container {padding: 0;} .lfr-layout-structure-item-row {overflow: hidden;} .portlet-borderless .portlet-content {padding: 0;}.lfr-layout-structure-item-7bdb8c47-2c89-ea6d-8dd1-3141769d1be5 {
background-color: #82BBFF !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 283px !important;
width: 283px !important;
}
/* ================================ support5 (#82BBFF) ================================ */
.support5{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support5::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(130,187,255,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support5:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support5:hover::before{
  opacity: 1;
  animation: support5-swirl 6s linear infinite;
}
.support5:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(130,187,255,0.3);
}
.support5:has(button:active){
  transform: translateY(-2px);
}
@keyframes support5-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support5 내부 p.mb-0 텍스트 애니메이션 ---- */
.support5 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support5 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support5 p.mb-0:active{
  transform: scale(0.95);
}.lfr-layout-structure-item-712af457-1392-4aa9-d54b-adc73aca0258 {
background-color: #9E6DBC !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 283px !important;
width: 283px !important;
}
/* ================================ support2 (#9E6DBC) ================================ */
.support2{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support2::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(158,109,188,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support2:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support2:hover::before{
  opacity: 1;
  animation: support2-swirl 6s linear infinite;
}
.support2:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(158,109,188,0.3);
}
.support2:has(button:active){
  transform: translateY(-2px);
}
@keyframes support2-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support2 내부 p.mb-0 텍스트 애니메이션 ---- */
.support2 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support2 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support2 p.mb-0:active{
  transform: scale(0.95);
}.lfr-layout-structure-item-2c3f2ff2-8c76-d089-6ef7-c5946be5363e {
background-color: #FFE171 !important;
height: 283px !important;
color: #333333 !important;
width: 283px !important;
}
/* ================================ support9 (#FFE171) ================================ */
.support9{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support9::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255,225,113,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support9:hover{
  filter: brightness(0.97);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support9:hover::before{
  opacity: 1;
  animation: support9-swirl 6s linear infinite;
}
.support9:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(255,225,113,0.3);
}
.support9:has(button:active){
  transform: translateY(-2px);
}
@keyframes support9-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support9 내부 p.mb-0 텍스트 애니메이션 ---- */
.support9 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support9 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support9 p.mb-0:active{
  transform: scale(0.95);
}:root {
  /* 1. 색상 전역 변수 */
  --card-bg-initial: #F2E7D5;      
  --card-bg-hover: #ffffff;        
  --card-text-initial: #7a8ba3;    
  --card-text-hover: #1a4f99;      
  
  /* 2. 그림자 색상 변수 */
  --shadow-dark: #d1d9e6;
  --shadow-light: #ffffff;
  
  /* 3. 애니메이션 속도 */
  --transition-speed: 0.35s;       
}

.card1-1 {
  /* 구조 설정 */
  background: var(--card-bg-initial) !important;
  color: var(--card-text-initial) !important;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 각진 사각형 모서리 */
  border-radius: 0px !important; 
  border: none !important;

  /* 스피어모피즘 입체감 */
  box-shadow: 
    12px 12px 25px var(--shadow-dark), 
    -12px -12px 25px var(--shadow-light);

  /* 애니메이션 설정 */
  transition: 
    transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease,
    color var(--transition-speed) ease !important;
  
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  overflow: hidden;

  /* [추가] 평상시 위치 기준점 설정 */
  position: relative !important;
  z-index: 1 !important;
}

/* 마우스 호버 시 효과 */
.card1-1:hover {
  /* 빠릿하게 튀어오름 */
  transform: translateY(-12px) scale(1.02) !important; 
  
  background: var(--card-bg-hover) !important;
  color: var(--card-text-hover) !important;

  /* 그림자를 더 선명하게 퍼뜨림 */
  box-shadow: 
    20px 25px 50px rgba(163, 177, 198, 0.6),
    -10px -10px 30px rgba(255, 255, 255, 0.8) !important;
  
  /* [핵심 추가] 호버 시 가장 맨 앞으로 오도록 설정 */
  z-index: 9999 !important; 
  position: relative !important;
}

/* 클릭했을 때 살짝 들어가는 쫀득한 피드백 */
.card1-1:active {
  transform: translateY(-4px) scale(0.97) !important;
  transition: all 0.1s ease;
  z-index: 9999 !important; /* 클릭 중에도 맨 위 유지 */
}.lfr-layout-structure-item-20e8ea81-46c2-ec79-d3d7-3ec6f1ae3277 {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-e50a6836-9f0d-2c22-4316-0e43249d9148 {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-89e1fa84-6478-9241-0ddd-049e8736d7fd {
background-color: #4FA25E !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 283px !important;
color: var(--body-bg) !important;
width: 283px !important;
}
/* ================================ support12 (#4FA25E) ================================ */
.support12{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support12::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(79,162,94,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support12:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support12:hover::before{
  opacity: 1;
  animation: support12-swirl 6s linear infinite;
}
.support12:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(79,162,94,0.3);
}
.support12:has(button:active){
  transform: translateY(-2px);
}
@keyframes support12-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support12 내부 p.mb-0 텍스트 애니메이션 ---- */
.support12 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support12 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support12 p.mb-0:active{
  transform: scale(0.95);
}.lfr-layout-structure-item-a2bc7f2f-67ec-1df0-8db6-7d59471a0161 {
background-color: #C3CE63 !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 283px !important;
color: var(--body-bg) !important;
width: 283px !important;
}
/* ================================ support10 (#C3CE63) ================================ */
.support10{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support10::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(195,206,99,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support10:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support10:hover::before{
  opacity: 1;
  animation: support10-swirl 6s linear infinite;
}
.support10:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(195,206,99,0.3);
}
.support10:has(button:active){
  transform: translateY(-2px);
}
@keyframes support10-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support10 내부 p.mb-0 텍스트 애니메이션 ---- */
.support10 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support10 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support10 p.mb-0:active{
  transform: scale(0.95);
}.lfr-layout-structure-item-c1adf1fe-8ecf-72bf-7217-bed6facc1ce8 {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-62ad962d-d6e3-d690-c228-51c8fc59449f {
background-color: #004A83 !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 283px !important;
width: 283px !important;
}
/* ================================ support8 (#004A83) ================================ */
.support8{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support8::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(0,74,131,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support8:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support8:hover::before{
  opacity: 1;
  animation: support8-swirl 6s linear infinite;
}
.support8:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(0,74,131,0.3);
}
.support8:has(button:active){
  transform: translateY(-2px);
}
@keyframes support8-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support8 내부 p.mb-0 텍스트 애니메이션 ---- */
.support8 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support8 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support8 p.mb-0:active{
  transform: scale(0.95);
}.lfr-layout-structure-item-a58ffaed-18af-4cdd-af72-6fb91a67dfa3 {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-5bcc24d9-c470-2020-29e4-885142280db4 {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
color: #FFFFFF !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-15251c74-e6ef-ddd2-c1d6-fd6cc8755ebf {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-e5803a25-1944-af96-d217-2d5f7ee759bd {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-6951d08d-daf0-0421-aed5-ed35b7f00920 {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
:root {
  /* 1. 색상 전역 변수 */
  --card-bg-initial: #F2E7D5;      
  --card-bg-hover: #ffffff;        
  --card-text-initial: #7a8ba3;    
  --card-text-hover: #1a4f99;      
  
  /* 2. 그림자 색상 변수 */
  --shadow-dark: #d1d9e6;
  --shadow-light: #ffffff;
  
  /* 3. 애니메이션 속도 */
  --transition-speed: 0.35s;       
}

.card1-1 {
  /* 구조 설정 */
  background: var(--card-bg-initial) !important;
  color: var(--card-text-initial) !important;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 각진 사각형 모서리 */
  border-radius: 0px !important; 
  border: none !important;

  /* 스피어모피즘 입체감 */
  box-shadow: 
    12px 12px 25px var(--shadow-dark), 
    -12px -12px 25px var(--shadow-light);

  /* 애니메이션 설정 */
  transition: 
    transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease,
    color var(--transition-speed) ease !important;
  
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  overflow: hidden;

  /* [추가] 평상시 위치 기준점 설정 */
  position: relative !important;
  z-index: 1 !important;
}

/* 마우스 호버 시 효과 */
.card1-1:hover {
  /* 빠릿하게 튀어오름 */
  transform: translateY(-12px) scale(1.02) !important; 
  
  background: var(--card-bg-hover) !important;
  color: var(--card-text-hover) !important;

  /* 그림자를 더 선명하게 퍼뜨림 */
  box-shadow: 
    20px 25px 50px rgba(163, 177, 198, 0.6),
    -10px -10px 30px rgba(255, 255, 255, 0.8) !important;
  
  /* [핵심 추가] 호버 시 가장 맨 앞으로 오도록 설정 */
  z-index: 9999 !important; 
  position: relative !important;
}

/* 클릭했을 때 살짝 들어가는 쫀득한 피드백 */
.card1-1:active {
  transform: translateY(-4px) scale(0.97) !important;
  transition: all 0.1s ease;
  z-index: 9999 !important; /* 클릭 중에도 맨 위 유지 */
}.lfr-layout-structure-item-74a928fe-162b-91bf-eaf6-5d49cc329003 {
background-color: #A23275 !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 283px !important;
width: 283px !important;
}
/* ================================ support4 (#A23275) ================================ */
.support4{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support4::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(162,50,117,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support4:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support4:hover::before{
  opacity: 1;
  animation: support4-swirl 6s linear infinite;
}
.support4:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(162,50,117,0.3);
}
.support4:has(button:active){
  transform: translateY(-2px);
}
@keyframes support4-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support4 내부 p.mb-0 텍스트 애니메이션 ---- */
.support4 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support4 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support4 p.mb-0:active{
  transform: scale(0.95);
}.lfr-layout-structure-item-254b6891-ad4a-5beb-1a0f-d100f2165cf6 {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-0acbe1a8-21e5-1bb5-e456-0d7ef488f84a {
background-color: #89B95E !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 283px !important;
color: var(--body-bg) !important;
width: 283px !important;
}
/* ================================ support11 (#89B95E) ================================ */
.support11{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support11::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(137,185,94,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support11:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support11:hover::before{
  opacity: 1;
  animation: support11-swirl 6s linear infinite;
}
.support11:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(137,185,94,0.3);
}
.support11:has(button:active){
  transform: translateY(-2px);
}
@keyframes support11-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support11 내부 p.mb-0 텍스트 애니메이션 ---- */
.support11 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support11 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support11 p.mb-0:active{
  transform: scale(0.95);
}.lfr-layout-structure-item-fea066b1-9858-2cfb-83ea-00dbe22c9070 {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}:root {
  /* 1. 색상 전역 변수 */
  --card-bg-initial: #F2E7D5;      
  --card-bg-hover: #ffffff;        
  --card-text-initial: #7a8ba3;    
  --card-text-hover: #1a4f99;      
  
  /* 2. 그림자 색상 변수 */
  --shadow-dark: #d1d9e6;
  --shadow-light: #ffffff;
  
  /* 3. 애니메이션 속도 */
  --transition-speed: 0.35s;       
}

.card1-1 {
  /* 구조 설정 */
  background: var(--card-bg-initial) !important;
  color: var(--card-text-initial) !important;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 각진 사각형 모서리 */
  border-radius: 0px !important; 
  border: none !important;

  /* 스피어모피즘 입체감 */
  box-shadow: 
    12px 12px 25px var(--shadow-dark), 
    -12px -12px 25px var(--shadow-light);

  /* 애니메이션 설정 */
  transition: 
    transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease,
    color var(--transition-speed) ease !important;
  
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  overflow: hidden;

  /* [추가] 평상시 위치 기준점 설정 */
  position: relative !important;
  z-index: 1 !important;
}

/* 마우스 호버 시 효과 */
.card1-1:hover {
  /* 빠릿하게 튀어오름 */
  transform: translateY(-12px) scale(1.02) !important; 
  
  background: var(--card-bg-hover) !important;
  color: var(--card-text-hover) !important;

  /* 그림자를 더 선명하게 퍼뜨림 */
  box-shadow: 
    20px 25px 50px rgba(163, 177, 198, 0.6),
    -10px -10px 30px rgba(255, 255, 255, 0.8) !important;
  
  /* [핵심 추가] 호버 시 가장 맨 앞으로 오도록 설정 */
  z-index: 9999 !important; 
  position: relative !important;
}

/* 클릭했을 때 살짝 들어가는 쫀득한 피드백 */
.card1-1:active {
  transform: translateY(-4px) scale(0.97) !important;
  transition: all 0.1s ease;
  z-index: 9999 !important; /* 클릭 중에도 맨 위 유지 */
}.lfr-layout-structure-item-138a9105-96a8-67bf-7ec8-9f0fd9d903fb {
background-color: #A3509A !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 283px !important;
width: 283px !important;
}
/* ================================ support3 (#A3509A) ================================ */
.support3{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support3::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(163,80,154,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support3:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support3:hover::before{
  opacity: 1;
  animation: support3-swirl 6s linear infinite;
}
.support3:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(163,80,154,0.3);
}
.support3:has(button:active){
  transform: translateY(-2px);
}
@keyframes support3-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support3 내부 p.mb-0 텍스트 애니메이션 ---- */
.support3 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support3 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support3 p.mb-0:active{
  transform: scale(0.95);
}.lfr-layout-structure-item-2265d3b3-da95-d719-a0b6-bcce0b24c2c4 {
background-color: #9588D8 !important;
height: 283px !important;
width: 283px !important;
}
/* ================================ support1 (#9588D8) ================================ */
.support1{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support1::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(149,136,216,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support1:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support1:hover::before{
  opacity: 1;
  animation: support1-swirl 6s linear infinite;
}
.support1:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(149,136,216,0.3);
}
.support1:has(button:active){
  transform: translateY(-2px);
}
@keyframes support1-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support1 내부 p.mb-0 텍스트 애니메이션 ---- */
.support1 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support1 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support1 p.mb-0:active{
  transform: scale(0.95);
}.lfr-layout-structure-item-0ddf0f1a-1966-d193-4796-3ceaf276b3f4 {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-73b3c686-6114-ba73-ac75-20aba66e288b {
background-color: #5693D4 !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 283px !important;
width: 283px !important;
}
/* ================================ support6 (#5693D4) ================================ */
.support6{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support6::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(86,147,212,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support6:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support6:hover::before{
  opacity: 1;
  animation: support6-swirl 6s linear infinite;
}
.support6:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(86,147,212,0.3);
}
.support6:has(button:active){
  transform: translateY(-2px);
}
@keyframes support6-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support6 내부 p.mb-0 텍스트 애니메이션 ---- */
.support6 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support6 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support6 p.mb-0:active{
  transform: scale(0.95);
}/* 1. 선택된 탭(li.active)의 배경색을 남색으로 강제 적용 */
.lfr-layout-structure-item-0501c5d1-c0c5-72fa-1291-1d9b3addcde3 li.nav-item.active {
    background-color: #25374E !important;
}

/* 2. 선택된 탭 내부의 버튼과 글자색을 흰색으로 고정 */
.lfr-layout-structure-item-0501c5d1-c0c5-72fa-1291-1d9b3addcde3 li.nav-item.active button.nav-link,
.lfr-layout-structure-item-0501c5d1-c0c5-72fa-1291-1d9b3addcde3 li.nav-item.active span {
    background-color: #25374E !important;
    color: #ffffff !important;
    border: none !important;
}

/* 3. 비활성 탭 스타일 (기본 상태) */
.lfr-layout-structure-item-0501c5d1-c0c5-72fa-1291-1d9b3addcde3 li.nav-item button.nav-link {
    background-color: #ffffff !important;
    color: #444444 !important;
    border: 1px solid #dee2e6 !important;
}

/* 4. 탭 전체 하단 라인 (남색으로 통일) */
.lfr-layout-structure-item-0501c5d1-c0c5-72fa-1291-1d9b3addcde3 ul.navbar-nav {
    border-bottom: 2px solid #25374E !important;
}.lfr-layout-structure-item-4c954f9e-d384-e389-568a-743aad87a13f {
background-color: #236DAB !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 283px !important;
width: 283px !important;
}
/* ================================ support7 (#236DAB) ================================ */
.support7{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, filter 0.35s ease, box-shadow 0.35s ease;
}
.support7::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(35,109,171,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.support7:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);
  border: none;
  outline: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}
.support7:hover::before{
  opacity: 1;
  animation: support7-swirl 6s linear infinite;
}
.support7:active{
  transform: translateY(-2px);
  box-shadow: inset 8px 8px 18px rgba(0,0,0,0.25), inset -8px -8px 18px rgba(35,109,171,0.3);
}
.support7:has(button:active){
  transform: translateY(-2px);
}
@keyframes support7-swirl{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- support7 내부 p.mb-0 텍스트 애니메이션 ---- */
.support7 p.mb-0{
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support7 p.mb-0:hover{
  transform: scale(1.2);
  color: #ffffff !important;
}
.support7 p.mb-0:active{
  transform: scale(0.95);
}.lfr-layout-structure-item-a5dbe05d-0e3e-d0d2-7ec9-1eaf45b6c83a {
font-size: 25px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}