@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;}

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

.sales_index .main_banner{width:100%; margin:0 auto; padding:280px 0 200px; background-image:url(https://igm.or.kr/class/img/sales/sales_nego_bg01.png);
background-size: cover;  background-position: center;}

.sales_index .main_banner_text{width:100%; max-width: 1280px; margin:0 auto; color:#000000; text-align:center;}
.sales_index .main_banner_tit{width:100%; max-width: 1280px;  margin:0 auto; color:#000000; text-align:center; }
.sales_index .main_banner_tit h1{ font-size:6.5rem; line-height: 1.3; font-weight: 900; }
.sales_index .main_banner_text h5{ font-weight: 500; font-size: 2rem;  line-height: 1.4;}

.section{width:100%;}
.sales_index .section01{ background:#333333;}
.sales_index .section01_con{background-image:url(https://igm.or.kr/class/img/sales/sales_nego_bg02.png);
background-size: cover; background-repeat: no-repeat; background-position: bottom; padding:150px 0 260px;}
.sales_index .section01_tit{width:100%; margin:0 auto; max-width: 1024px; color:#ffffff; 
}
  .sales_index .section01_tit p{ font-weight: 400; font-size: 1.8rem; }
.sales_index .section01_tit h2{font-size: 4rem; font-weight: 700;}


.sales_index .section02{width:100%; padding:120px 0; background-color: #f2f2f2;}
.sales_index .section02_con h2{font-size: 3rem; font-weight: 900; color:#333333; }
.sales_index .section02_con p{font-size: 1.6rem;}
.sales_index .section02 .layout2{width:100%; margin:0 auto; max-width: 1024px; padding-bottom:30px;}
.sales_index .section02_con{display: flex; gap:4%; background-color: #ffffff; border-radius: 8px; padding:40px 20px;}
.sales_index .section02_con .section02_img{width:100%; max-width: 80px;}


.sales_index .section03{width:100%; padding:80px 0; background-color: #f2f2f2;
      place-items: center;}
.sales_index .section03_tit{width:100%; max-width: 1024px; margin:0 auto;}
.sales_index .section03_tit h2{font-size: 3rem; padding-bottom:100px; text-align: center;}
.sales_index .section03_con_text{color:#202020; padding:20px 10px;}
.sales_index .section03_con_text h3{font-size: 2rem;}
.sales_index .section03_con_img{width:100%; max-width: 100px;}

.sales_index .section04{width:100%; padding:120px 0;}
.sales_index .section04_tit h2{font-size: 3rem; padding-bottom:100px; text-align: center;}
.sales_index .section04_con{width:100%; margin:0 auto; max-width: 960px; padding-bottom:30px;}
.sales_index .section04_con h4{text-align: center;}
.sales_index .section04_con_img{width:80%; margin: 0 auto;}

.sales_index .callme{text-align: center; width: 100%; border:0; max-width: 960px; padding: 30px 0 90px; border-top:1px solid #ccc; border-style: dashed; margin:0 auto; box-sizing: border-box; font-size: 16px; color:#868686;}

	    /* 아이소 리스트 컨테이너 */
    .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) ;
      display: grid;
      grid-template-rows: 1fr auto;
      gap: 8px;
      padding: 16px 16px 14px;
      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: 180px; --card-h: 260px;  --gap: 140px;  }
    }
    @media (max-width: 860px) {
      :root { --gap: 0px; --card-w: 400px; --card-h: 220px;    --gapY: 240px;  --gapYY: 230px;  }
    }
      @media (max-width: 480px) {
      :root { --card-w: 320px;  }
    }


@media (max-width: 960px) {
.sales_index .section01_con{background-position: right;}
.sales_index .section02 .layout2{width:95%;}}

@media (max-width: 860px) {
  .sales_index .section01_tit{text-align: center;}
  .sales_index .section02_con{margin-top:60px;}
.sales_index .section03_con_img{max-width: 50px;}
 .iso-list {
      position: relative;
      width: calc(var(--card-w) + 4 * var(--gap));
      height: 1200px;
}}
@media (max-width: 480px) {
  .sales_index .main_banner_tit h1{font-size: 6rem;}
  .sales_index .section01_con{background-position:none; color:#333333;}
  .sales_index .section01_tit h2{font-size: 3rem;}
.sales_index .section02_con .section02_img{width: 30px;}
}