@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css?family=SUIT');
/* 

img{width:100%;}
body { font-weight: 400; color:#333;padding:0; margin:0; font-size:18px; letter-spacing: -1px; height:100%; font-family: 'SUIT', sans-serif, 'Noto Sans KR', sans-serif; background:#ffffff;min-width:320px;-webkit-text-size-adjust: none; }
body.is_hidden{overflow:hidden}
html, h1, h2, h3, h4, h5, h6, form, fieldset, td, tr, table ,tbody {margin:0;padding:0;border:0; border-spacing: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
header ul, nav ul, footer ul {margin:0;padding:0;list-style:none}
label, input, button, select {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button,input[type=submit] {cursor:pointer;}
input[type=text], input[type=password], input[type=submit], input[type=image], button {-webkit-appearance:none}
textarea, select {font-size:1em;}
textarea {border-radius:0;-webkit-appearance:none}
select{background:#fff}
p {margin:0;padding:0;}
hr {display:none;}
button {background-color:unset; border:0; }
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {text-decoration:none;}
ul,li,dl,dt,dd {padding:0;margin:0; list-style: none;}
ul {list-style:none;}
*, :after, :before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
} */


.clear::after{content:""; display:table; clear:both;}
.suit_en{letter-spacing: normal;}

.igm_interview_index{width:100%; margin:0 auto; line-height: 1.5;}

.igm_interview_index .main_banner{width:100%; margin:0 auto;  background-color: #17288b;}

.igm_interview_index .main_banner_tit{width:100%; max-width: 1024px; margin:0 auto; padding:180px 0; color:#000000; text-align:center;
background-image:url(https://igm.or.kr/class/img/interview/interview01.jpg);
background-size: cover;  background-position: bottom; }
.igm_interview_index .main_banner_text{width:100%; padding:10px 0;}
.igm_interview_index .main_banner_text h2{margin:0 auto; font-size:2.4rem; line-height: 1.6; padding:20px 60px; float: right;
 color:#ffffff; width: 100%; max-width: 628px;  background-color: rgba(255,255,255, 0.1); text-align: left; font-weight: 500;
box-shadow: 6px 15px 20px rgba(0,0,0, 0.1); border-radius: 5px;}

.igm_interview_index .section01{width:100%; margin:0 auto; padding:160px 0 ;}
.igm_interview_index .section01_tit{width:100%; margin:0 auto; padding:0 ; position: relative;}
.igm_interview_index .section01_tit img{position: absolute; left: 50%; top:-96%; transform: translate(-50%,-50%);}
.igm_interview_index .section01 h2{font-size: 4rem; text-align: center; font-weight: 900;}
.igm_interview_index .section01 h5{font-size: 2.4rem; text-align: center; }
.igm_interview_index .section01 h5 span{background-color: #ffee00; font-weight: 900; }

.igm_interview_index .section02{width:100%; margin:0 auto; padding:160px 0 ; background-color:#f2f2f2;}
.igm_interview_index .section02 h3{margin:0 auto; text-align: center; font-size: 3rem;font-weight: 900; color:#999999;}
.igm_interview_index .section02 h2{margin:0 auto; text-align: center; font-size: 4rem;font-weight: 900; color:#999999;}
.igm_interview_index .section02_tit h1{margin:0 auto; text-align: center; font-size: 8rem;font-weight: 900; line-height: 1.6;}
.igm_interview_index .section02 h5{font-size: 2rem; text-align: center; font-weight: 500; width:100%; padding:3px 0; max-width: 300px; margin:0 auto; background-color: #ffee00;}
.igm_interview_index .section02 table{width:95%; max-width: 1024px;  margin: 80px auto; }
.igm_interview_index .section02_con{ text-align: center; width: 90%; margin:0 auto;}
.igm_interview_index .section02 td{padding:20px 30px;  border-radius: 40px; box-sizing: border-box;  background-color: #ffffff; border:20px solid#f2f2f2;}
.igm_interview_index .section02_con_text h4{font-size: 2.2rem;}
.igm_interview_index .section02_con_text p{font-size: 2rem;}

.igm_interview_index .section02 .layout2{width:95%; max-width: 1024px; padding:20px 30px; box-sizing: border-box; margin:0 auto; background-color: #ffffff; border-radius: 10px; margin-top:60px;}
.igm_interview_index .section02 .layout2 h4{font-size: 4rem; font-weight: 900;}
.igm_interview_index .section02 .layout2 p{font-size: 2rem;}
.igm_interview_index .section02 .layout2 p span{background-color: #ffee00; font-weight: 600;}

.igm_interview_index .section03{width:100%; margin:0 auto; padding:160px 0 ;}
.igm_interview_index .section03_tit{width:100%; max-width: 1024px; margin:0 auto;}
.igm_interview_index .section03_con_text{width:75%; float:left;}
.igm_interview_index .section03 h2{margin:0 auto; font-size: 3rem;font-weight: 900;}
.igm_interview_index .section03 .iso-list{width:100%; max-width: 1024px; margin:60px auto;}
.igm_interview_index .section03_con_img{width:20%; max-width: 100px; margin:0 auto; margin-left:5%; float:right;}

.igm_interview_index .section04{width:100%; margin:0 auto; padding:160px 0 ;}
.igm_interview_index .section04_tit{width:100%; max-width: 1024px; margin:0 auto;}
.igm_interview_index .section04 h2{margin:0 auto; font-size: 3rem;font-weight: 900;}
.igm_interview_index .section04 h6{font-size: 2.4rem;font-weight: 900;}
.igm_interview_index .section04 table{margin:80px auto; width:95%; max-width: 1024px;}
.igm_interview_index .section04 td{padding: 20px 30px; font-size: 2rem; border-top:1px solid #e9e9e9;}


  :root { --card-w: 600px; --card-h: 160px; --gap: 220px; --gapY:135px; --gapYY:130px }
	    /* 아이소 리스트 컨테이너 */
    .iso-list {
      position: relative;
      width: calc(var(--card-w) + 4 * var(--gap));
      height: calc(var(--card-h) + 120px);
      transform-style: preserve-3d;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /* 카드 공통 스타일 */
    .card-list {
      opacity: 0.9;
      position: absolute;
      width: var(--card-w);
      height: var(--card-h) ;
      grid-template-rows: 1fr auto;
      gap: 8px;
      padding: 30px 40px;
      border-radius: var(--radius);
      background:
     #ffffff;
      box-shadow: var(--ring), var(--shadow);
      text-decoration: none;
      transform-style: preserve-3d;
      will-change: transform, box-shadow, filter, opacity;
      transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1), filter .3s, opacity .3s;
      /* 아이소 기본 위치: 인덱스에 따라 계단식 배치 */
      transform:
        translate3d(
          calc(var(--i) * var(--gap)),
          calc(var(--i) * var(--gapY)),
          0
        )
        rotateZ(var(--tilt-z))
        rotateX(var(--tilt-x))
        translateZ(0px);
    }
	
    /* 호버/포커스 시 해당 카드만 위로 크게 떠오르게 */
    .iso-list:hover .card-list { opacity:0.8; background: #f2f2f2; }
    .card-list:is(:hover, :focus-visible) {
      cursor:default;
      transform:
        translate3d(
          calc(var(--i) * var(--gap)),
          calc(var(--i) * var(--gapYY)),
          var(--lift)
        )
        rotateZ(var(--tilt-z))
        rotateX(var(--tilt-x))
        translateZ(10px) /* 살짝 더 */
        scale(1);
      opacity: 1 !important;
      background-color: #ffffff !important;
      filter: none;
     /* 최상단 */
      box-shadow: var(--ring), var(--shadow-lift);
    }

    /* 키보드 접근성 (탭 포커스 표시) */
    .card-list { outline: none; }
    .card-list:focus-visible {
      box-shadow:
        0 0 0 2px rgba(125,211,252,.9),
        0 0 0 6px rgba(125,211,252,.25),
        var(--shadow-lift);
    }

    /* 모션 최소화 설정 존중 */
    @media (prefers-reduced-motion: reduce) {
      .card-list { transition: none; }
    }

    /* 반응형: 화면이 좁을 땐 카드 크기 축소 */
    @media (max-width: 960px) {
  :root { --card-w: 100%; --card-h: 160px; --gap: 0px; --gapY:180px; --gapYY:175px }
    }
      @media (max-width: 480px) {
  :root {--card-h: 200px; }
  .card-list{padding: 15px 20px;}
    }

@media (max-width: 1280px) {
.igm_interview_index .section01_tit img{top:-103%;}
}
@media (max-width: 1024px) {
  .igm_interview_index .section01_tit img{top:-115%;}
}


@media (max-width: 960px) {
.igm_interview_index .section03_tit{width:95%;}
.igm_interview_index .section04_tit{width:95%;}
.igm_interview_index .section03 .iso-list{width: 95%;}
}
@media (max-width: 860px) {
  .igm_interview_index .section02 td{padding:15px 24px;}
  .igm_interview_index .section02 h2{font-size: 2.4rem;}
}
@media (max-width: 690px) {
  .igm_interview_index .section02_tit h1{font-size: 4rem;}
  .igm_interview_index .section01_tit img{top:-85%;}
  .igm_interview_index .main_banner_tit{background-position:right;}
  .igm_interview_index .section02 td{border:10px solid#f2f2f2; border-radius:20px;}
  .igm_interview_index .section02_con_text h4{font-size: 1.8rem;}
  .igm_interview_index .section02_con_text p{font-size: 1.6rem;}
}
@media (max-width: 480px) { 
   .igm_interview_index .section02 td{padding:10px;}
  .igm_interview_index .section02 h2{font-size: 1.6rem;}
  .igm_interview_index .section03_tit{text-align: center;}
  .igm_interview_index .section04_tit{text-align: center;}
  .renew_contents .layout2 li{padding:20px 0 !important;}
}
@media (max-width: 410px) {
  .igm_interview_index .section01_tit img{top:-60%;}
}