h2 {display: none;}
h3 {background: none; padding-top: 0px;}
.ui-page-tab .nav-red {margin-bottom: 0px; margin-top: 20px;}
/*#sub_visual {height: 250px !important}
#sub_visual h3,#sub_visual .page-role,#sub_visual .page-ctrl {display: none;}*/
.ui-page-tab li.on a, .ui-page-tab li a:hover {background: #3F51B5; border: 5px solid #3F51B5;}
.nav-red > li > a:hover, .nav-red > li > a:focus, .nav-red > li.active > a, .nav-red > li.active > a:hover, .nav-red > li.active > a:focus {background: #3F51B5; border: 5px solid #3F51B5;}

/* ===== 레이아웃 ===== */
.fx-banners{ padding: 80px 0; }
.fx-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px){
  .fx-container{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .fx-container{ grid-template-columns: 1fr; padding: 16px; }
}

/* ===== 카드 ===== */
.fx-card{
  position: relative;
  display: block;
  text-decoration: none;
  color: #e5e9f2;
  border-radius: 20px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  isolation: isolate;
  background: #0b1220;
  box-shadow: 0 0 20px rgba(0,0,0,.45);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.fx-card__inner{
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 28px 28px 52px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: inherit;
  color: #fff;
  background-blend-mode: screen;
  background-size: 200% 200%;
  animation: fx-pan 12s ease-in-out infinite alternate;
}

/* 중앙 내용 */
.fx-card__center{ display: grid; gap: 12px; }
.fx-card__title{
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;letter-spacing: .2px; margin: 0; color: #fff;
}
.fx-card__desc{
  font-size: clamp(16px, 1.6vw, 18px);
  opacity: .85;
  margin: 0;
  line-height: 1.5;
}
.fx-card__cta{
  align-self: center; justify-self: center; display: inline-flex; gap: 8px; align-items: center; padding: 10px 30px;
  font-size: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  transition: transform .35s, background .35s, border-color .35s; font-weight: 600;
}
.fx-card:hover .fx-card__cta{
  transform: translateY(-2px);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
}

/* ===== 그라데이션 (어두운 네온 다운톤) ===== */
.fx-theme-a{
  background-image:
    radial-gradient(1200px 400px at 0% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #167cae 0%, #384fb3 45%, #5d2ab8 100%);
}
.fx-theme-b{
  background-image:
    radial-gradient(1000px 380px at 100% 10%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #1c8c9c 0%, #3b56b2 50%, #6935b5 100%);
}
.fx-theme-c{
  background-image:
    radial-gradient(900px 360px at 10% 100%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #1c90b8 0%, #425cc0 45%, #7341ba 100%);
}

/* 광택 그리드 */
.fx-card::before{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent 95%, rgba(255,255,255,.05) 100%) 0 0/100% 10px,
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.04) 100%) 0 0/10px 100%;
  opacity: .25;
  pointer-events: none;
  z-index: 0;
}

/* 호버 효과 */
.fx-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,0,0,.4),
              0 0 0 1px rgba(255,255,255,.1) inset,
              0 0 20px rgba(80,120,255,.25);
}
.fx-card::after{
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    rgba(91,124,254,.0),
    rgba(91,124,254,.25),
    rgba(43,217,255,.3),
    rgba(138,70,255,.3),
    rgba(91,124,254,.0)
  );
  filter: blur(14px);
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 0;
}
.fx-card:hover::after{ opacity: .75; }

/* 포커스 */
.fx-card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px #fff,
              0 0 0 6px rgba(91,124,254,.5),
              0 14px 36px rgba(0,0,0,.3);
}

/* ===== 하단 ‘UNIVERSITY’ 틱커 ===== */
.fx-tkr{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42px;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
  border-top: 1px solid rgba(255,255,255,.1);
}
.fx-tkr__track{
  position: absolute;
  bottom: 6px;
  white-space: nowrap;
  will-change: transform;
  animation: tkr-marquee 16s linear infinite;
  opacity: .22;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 24px);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.fx-tkr::before,
.fx-tkr::after{
  content:"";
  position:absolute; top:0; bottom:0; width:80px;
  pointer-events:none;
}
.fx-tkr::before{
  left:0;
  background: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.fx-tkr::after{
  right:0;
  background: linear-gradient(to left, rgba(0,0,0,.6), rgba(0,0,0,0));
}
@keyframes tkr-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.fx-card:hover .fx-tkr__track{ opacity: .36; }

/* 패닝 애니메이션 */
@keyframes fx-pan{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .fx-card, .fx-card__inner{ animation: none !important; transition: none !important; }
  .fx-tkr__track{ animation: none !important; }
}

@media (max-width: 640px){
  .fx-card{
height: 260px; min-height: 0;  width: 100%;}

  /* 안쪽 여백 축소 */
  .fx-card__inner{
    padding: 18px 16px 36px;  /* 상·좌우 여백 줄이고 틱커 여유 확보 */
  }

  /* 틱커 높이 & 글자 크기 축소 */
  .fx-tkr{
    height: 28px;
  }
  .fx-tkr__track{
    bottom: 3px;
    font-size: clamp(13px, 3.6vw, 16px);
  }

  /* 텍스트 / 버튼 크기 조정 */
  .fx-card__title{ font-size: clamp(17px, 5vw, 20px); }
  .fx-card__desc{  font-size: clamp(13px, 4vw, 15px); }
  .fx-card__cta{
    padding: 7px 12px;
    font-size: 13px;
  }
}

/* 초소형(<=400px): 더 줄이기 */
@media (max-width: 400px){
  .fx-card{
    height: 220px;   /* 더 낮은 고정 높이 */
  }
  .fx-card__inner{
    padding: 14px 12px 30px;
  }
  .fx-tkr{
    height: 24px;
  }
  .fx-tkr__track{
    bottom: 2px;
    font-size: clamp(12px, 4vw, 15px);
  }
}