/* === page === */
.major_intro{font-family:var(--f_base1),system-ui,sans-serif;} 
.majorIntro{display:grid; grid-template-columns:320px 1fr; gap:100px;} 
.majorIntro__tab{position:sticky; top:120px; align-self:start;} 
.majorTab{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;} 
.majorIntro .majorTab__link{display:flex; align-items:center; justify-content:space-between; padding:22px 30px; border-radius:15px; border:1px solid rgba(255,255,255,.12); background:var(--c_bgGray); color:#fff; text-decoration:none; font-size:var(--fs20); transition:var(--ani); font-weight:600; line-height:1.2; color:#000;} 
.majorTab__item.is-active .majorTab__link{background:var(--c_base3); border-color:var(--c_base3); color:#111;} 
.majorTab__item.is-active .majorTab__link:after{content:""; display:block; width:30px; height:14px; background:url(/images/management/tap-type1_arrow.svg) no-repeat center / contain; } 
.majorTab__item:not(.is-active) .majorTab__link:after{content:"";} 
.majorTab__desc{margin:40px 0 0; font-size:var(--fs16); line-height:1.6; color:#666;} 

.majorHead{display:flex; gap:14px; align-items:flex-start; margin:0 0 50px; position:relative; padding-left:20px;} 
.majorHead:before {content:""; display:block; width:5px; height:calc(100% - 8px); position:absolute; left:0; top:48%; transform:translateY(-50%); background:#ddd; border-radius:5px;} 
.majorHead__title{margin:0; font-size:var(--fs32); letter-spacing:-0.02em; color:var(--c_base1); line-height:1;} 
.majorHead__desc{margin:10px 0 0; font-size:var(--fs16); line-height:1.7;} 



.majorGrid--cooper ul {display:grid; grid-template-columns:repeat(4,1fr); gap:20px;} 
.majorGrid--cooper ul li {
  position: relative; /* 가상 요소의 기준 */
  padding: 40px;
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  background: #fff;
  z-index: 1; /* 글자가 배경에 가려지지 않게 */
  overflow: hidden; /* 가상 요소가 튀어나가지 않게 */
  transition: all 0.3s;
  min-height:170px;
}

/* 호버했을 때 나타날 그라데이션 층 */
.majorGrid--cooper ul li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(116deg, var(----base1, #3BB516) 3.76%, var(----base2, #0563DD) 100%);
  opacity: 0; /* 평소엔 투명하게 */
  transition: opacity 0.3s; /* 투명도 변화에 transition 부여 */
  z-index: -1; /* 실제 내용보다 뒤로 보냄 */
}

.majorGrid--cooper ul li:hover {
  border-color: #fff;
}

.majorGrid--cooper ul li:hover::before {
  opacity: 1; /* 호버 시 그라데이션 등장! */
}
.majorGrid--cooper ul li h3 {color:var(--c_base2); font-weight:600; font-size:var(--fs18); margin-bottom:10px;}
.majorGrid--cooper ul li p {color:#000; font-size:var(--fs16);}

.majorGrid--cooper ul li:hover h3 {color:#fff;}
.majorGrid--cooper ul li:hover p {color:#fff;}
/* 탭 위치 변경 규칙 */
@media screen and (max-width:1199px){
.majorIntro{grid-template-columns:1fr; gap:50px;} 
.majorIntro__tab{position:relative; top:auto;} .majorTab{flex-direction:row; gap:10px;} 
.majorTab__item{flex:1;} .majorTab__link{justify-content:center; gap:10px; padding:14px 12px;} 
.majorTab__desc{display:none;}
.majorHead {margin:0 0 30px;}
.majorIntro .majorTab__link {padding:18px 25px;}

.majorGrid--cooper ul {grid-template-columns:repeat(3,1fr);}
}

/* 768px부터 탭 세로 + 카드 1열 */
@media screen and (max-width:767px){
.majorTab{flex-direction:column;} 
.majorTab__item{flex:auto;} 
.majorGrid{grid-template-columns:1fr; gap:40px;}
.majorIntro {gap:40px;}
.majorIntro .majorTab__link {padding:15px 20px;}
.majorGrid--cooper ul {grid-template-columns:repeat(2,1fr); gap:20px 10px;}
.majorGrid--cooper ul li {padding:30px 20px; min-height:145px;}

}