@charset "UTF-8"; /*reset css*/
* { font-family: Pretendard, "Pretendard", MalgunGothic, "맑은 고딕", "돋움", Dotum,
 AppleGothic, Sans-serif, Arial; word-break: keep-all; } 
 :root {
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Noto Sans KR',
               'Malgun Gothic', Helvetica, Arial, sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji';
}

html, body {
  font-family: var(--font-sans);
}

html,body,div,p,span,strong,b,em,iframe,pre,h1,h2,h3,h4,h5,h6,img,dl,dt,dd,
fieldset,form,legend,label,table,caption,thead,tbody,tfoot,tr,th,td,
ul,ol,li,a,input,select,textarea,figure { margin: 0; padding: 0; border: 0 none; } 

input { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 

body { font-family: Pretendard, "Pretendard", MalgunGothic, "맑은 고딕", "돋움", Dotum, AppleGothic, Sans-serif, Arial; } 

strong { font-weight: 500; } 

ul,ol,li { list-style: none; } 
em,address { font-style: normal; } 
img { border: 0 none; font-size: 0; line-height: 0; } 
sup { position: relative; top: 2px; font-size: 8px; line-height: 100%; } 

table { border-collapse: collapse; border-spacing: 0; } 
caption { overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0; } 
th,td { vertical-align: middle; /* white-space: nowrap */ } 

a { text-decoration: none; } 
a:hover,a:focus,a:active,a:visited { text-decoration: none; } 
*,
html { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 
*,
*:before,
*:after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 

button { border: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: "Pretendard", MalgunGothic, "맑은 고딕", "돋움", Dotum,
 AppleGothic, Sans-serif, Arial; cursor: pointer; margin: 0; } 

select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } 

body {
  /* margin-top: calc(var(--header-height, 60px)); 헤더 높이만큼 여백 추가 */
  overflow-x: hidden; /* 가로 스크롤 방지 */
}



@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@font-face {
    font-family: 'Paperlogy-8ExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "Paperlogy-7Bold";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: "Paperlogy-5Medium";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: "Paperlogy-4Regular";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
  }




/*************** gnb ***************/
header { height: 100px; display: flex; align-items: center; } 
.cont_top { width: 1300px; margin: 0 auto; display: flex; justify-content: space-between; }
.logo {  width: 335px; height: 36px; background: url('../img/logo.png') no-repeat; text-indent: -9999px; font-size: 0;}
.gnb { display: flex; flex-direction: row; align-items: center; gap: 135px; }
.gnb li a { color: #222; font-size: 24px; font-family: var(--font-sans); font-weight: 500; transition: all 0.3s ease; }
.gnb li a:hover { color: #cd008c; }
.gnb li a:focus,
.gnb li a:active { color: #cd008c;} 
.gnb li a.current { color: #cd008c; }



/*************** lnb ***************/
.lnb {
  width: 1300px;
  height: 80px;
  margin: 0 auto;
  background-color: #481693;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  position: sticky;   /* ✅ 스크롤로 임계점 닿으면 그 자리에서 고정 */
  top: 0;             /* ✅ 데스크톱: 최상단에 닿으면 고정 */
  z-index: 1000;
  transition: box-shadow .2s ease; /* 고정 느낌만 살짝 */
}




.lnb ul { display: flex; flex-direction: row; justify-content: space-around; align-items: center; }
.lnb ul li { position: relative;  }
.lnb ul li a { height: 80px; display: inline-block; width: fit-content; font-family: Paperlogy-4Regular; font-size: 30px; 
    line-height: 80px; color: #8e7bb8; transition: all 0.3s ease; }
.lnb ul li a:hover { color: #fff; font-family: Paperlogy-7Bold; } 


/* 기존 after 밑줄에 부드러운 애니메이션 */
nav.lnb li a { position: relative; }
nav.lnb li a::after {
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:10px; background:#cd008c;
  transform: scaleY(0); transform-origin:bottom;
  transition: transform .2s ease;
}
/* 호버/포커스 시 표시
nav.lnb li a:hover::after,
nav.lnb li a:focus::after { transform: scaleX(1); } */

/* ✅ 활성(스크롤스파이 or 클릭 후 유지) */
nav.lnb li a.is-active { color:#fff; font-family: Paperlogy-7Bold; }
nav.lnb li a.is-active::after { transform: scaleY(1); }


/* lnb가 상단에 고정된 상태 시 살짝 그림자 */
.lnb.is-stuck {
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* 접근성/키보드 포커스 보조(선택) */
nav.lnb a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}


/*************** 체험관 ***************/
.wrap_bg1 { width: 100%; background: url('../img/bg_01.png') no-repeat center 0; background-size: cover;}
h1 { width: 997px; height: 254px; background: url('../img/h1.png') no-repeat center 0; text-indent: -9999px; font-size: 0; margin: 0 auto;}
.top_bg1 { width: 1300px; margin: 0 auto; padding: 10px 0 120px; } 

.info_wrap { display: flex; flex-direction: row; justify-content: space-between; }
.info_class { width: 50%; text-align: center; padding-top: 20px;}
.info_class h2 { font-family: Paperlogy-7Bold; color: #fff; font-size: 24px; line-height: 33px; padding-bottom: 20px;}
.info_class h2 span { font-weight: normal; font-family: Paperlogy-4Regular !important; color: #fff; font-size: 24px; line-height: 33px;}
/* 체험하기 버튼 */
.btn_wrap { display: flex; flex-direction: column; justify-content: center; margin: 25px auto 0; } 
.btn_class { text-align: center; font-family: Paperlogy-7Bold; font-size: 30px; color: #fff; }
.btns { display: flex; flex-direction: row; justify-content: center; margin: 0 auto; align-items: center; } 
.dot { display: inline-block; font-size: 35px; letter-spacing: -20px; text-indent: -10px; color: #fff; }
.btn_menu { display: inline-block; width: 220px; height: 63px; cursor: pointer; border: solid 2px #222; border-radius: 100px; 
    background-color: #fff; font-size: 24px; box-shadow: 0px 6px #222; font-family: "Paperlogy-7Bold"; transition: all 0.3s ease; } 
.class_a { color: #007c7d; }
.class_b { color: #006ed4; }
.class_c { color: #9200c8; }
.class_a.btn_menu:hover,
.class_a.btn_menu:focus,
.class_a.btn_menu:active { background-color: #bdf9e7;} 
.class_b.btn_menu:hover,
.class_b.btn_menu:focus,
.class_b.btn_menu:active { background-color: #c1e1ff;} 
.class_c.btn_menu:hover,
.class_c.btn_menu:focus,
.class_c.btn_menu:active { background-color: #d6b6ff;} 


.info_book { width: 50%; }
.book_title { display: flex; flex-direction: row; gap: 20px; align-items: flex-end; }
.book_title dd { color: #fff; }
.txt_01 { display: block; font-family: Paperlogy-5Medium; font-size: 45px; }
.txt_02 { display: inline-block; font-family: Paperlogy-7Bold; font-size: 90px; }
.txt_03 { display: inline-block; font-family: Paperlogy-4Regular; font-size: 30px; padding-left: 5px; }
/* 다운로드 버튼 */
.book_btn { display: flex; flex-direction: row; gap: 23px; flex-wrap: wrap; padding-top: 20px;}
.book_btn li a { display: flex; align-items: center; justify-content: center; width: 280px; height: 55px; background-color: rgba(255, 255, 255, 0.6); 
  font-family: var(--font-sans);  border: 2px solid #222; border-radius: 3px; text-align: center; font-weight: 600; color: #222; font-size: 24px; transition: all 0.3s ease; }
.book_btn li a:hover { color: #de009d; border-color: #cd008c; }
/* 선정사유서 */
.book_btn2 { margin: 15px 0 7px; }
.book_btn2 a { display: flex; align-items: center; justify-content: center; width: 280px; height: 55px; background-color: rgba(255, 255, 255, 0.6); 
  font-family: var(--font-sans); border: 2px solid #222; border-radius: 3px; font-weight: 600; color: #222; font-size: 24px; transition: all 0.3s ease; }
.book_btn2 a:hover { color: #de009d; border-color: #cd008c; }


/*************** 슬라이드 ***************/
.slider_wrap { width: 1300px; margin: 0 auto; padding: 50px 0; text-align: center; position: relative; overflow: hidden; } 
.slide-container { position: relative; overflow: hidden; } 
.slides { display: flex; transition: transform 0.5s ease-in-out; } 
.slide { min-width: 1160px; } 
.navigation { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between;
    transform: translateY(-50%); z-index: 5;} 
.nav-button { cursor: pointer; background: none; } 
.nav-button img { display: block; margin: 0 auto;  } 
.nav-button img.disabled { display: none; } 
.nav-button[disabled] img { display: none; } 
.nav-button[disabled] img.disabled { display: block; } 
.indicators { display: flex; justify-content: center; margin-top: 15px; position: relative; z-index: 10; } 
.indicator { width: 20px; height: 20px; background-color: #ddd; border-radius: 50%; margin: 0 5px; transition: all 0.3s ease; cursor: pointer;} 
.indicator.current { width: 40px; background-color: #cd008c; border-radius: 30px; } 

.slide_title dt { font-family: 'Paperlogy-7Bold'; font-size: 42px; color: #00044f; text-align: center; padding-bottom: 30px;}
.slide_title dd { font-family: var(--font-sans); font-size: 28px; color: #222; text-align: center; line-height: 40px; }
.wrap_bg2 .slide_title dd { padding-bottom: 30px;}



/*************** 특장점 ***************/
.wrap_bg2 { width: 100%; padding: 100px 0 50px; min-height: 100vh; } 
.container { width: 1300px; margin: 0 auto; } 


/*************** AI기능 ***************/
.wrap_bg3 { width: 100%; min-height: 100vh; background: url('../img/bg_02.png') no-repeat center 0; background-size: cover; padding: 130px 0 50px; } 


/*************** 수업 구성 ***************/
.wrap_class { width: 100%; }
.wrap_bg4_01 { width: 100%; background-color: #edfbf7; padding: 130px 0 30px; } 
.wrap_bg4_02 { width: 100%; background-color: #edf6ff; padding: 130px 0 30px; } 
.wrap_bg4_03 { width: 100%; background-color: #eeefff; padding: 130px 0 30px; } 
.class_flow { display: flex; flex-direction: row; align-items: center; gap: 30px; justify-content: center;}
.class_flow li { display: flex; align-items: center; justify-content: center; width: fit-content; font-family: var(--font-sans); padding: 10px 50px; font-size: 32px; font-weight: 500; border: solid 2px; border-radius: 20px; border-top-right-radius: 0; border-bottom-left-radius: 0; color: #fff; }
.class_flow li.before { border-color: #00a3a5; color: #73c1c2; background-color: #fff;}
.class_flow li.ing { border-color: #006ed4; color: #73a1e1; background-color: #fff;}
.class_flow li.after { border-color: #8f10c8; color: #b773d9; background-color: #fff;}

.class_flow li.before_on { background: linear-gradient(to right, #00a3a6, #006ed3);  }
.class_flow li.ing_on { background: linear-gradient(to right, #016ed4, #9100c9); }
.class_flow li.after_on { background: linear-gradient(to right, #9107c8, #cd008c); }

.class_flow li.arrow_1 { border: 0; padding: 0; color: #a5ead5; }
.class_flow li.arrow_1_on { border: 0; padding: 0; color: #0072d2; }
.class_flow li.arrow_2 { border: 0; padding: 0; color: #c1e1ff; }
.class_flow li.arrow_2_on { border: 0; padding: 0; color: #9107c8; }




.step { padding-bottom: 40px;}

/*************** 집필진 ***************/
.wrap_bg5 { width: 100%; background: url('../img/bg_03.png') no-repeat center 0; background-size: cover; padding: 130px 0 100px; } 
.box_top { width: 400px; padding: 20px; text-align: center; background-color: #fff; border-radius: 30px; margin: 0 auto 50px; }
.box_top dt { display: block; font-family: 'Paperlogy-8ExtraBold'; font-size: 40px; margin-bottom: 15px; color: #de009d; }
.box_top dt span { display: block; font-family: 'Paperlogy-8ExtraBold'; font-size: 28px; color: #3a3a88; padding-bottom: 5px; }
.box_top dd { display: block; font-size: 24px; text-align: center;}

.staff { display: flex; flex-direction: row; gap: 20px; flex-wrap: wrap; justify-content: space-around; align-items: center;}
.box { width: 310px; height: 125px; text-align: center; background-color: #fff; border-radius: 30px; display: flex; flex-direction: column; align-items: center;}
.box dt { font-family: var(--font-sans); display: block; font-family: 'Paperlogy-8ExtraBold'; font-size: 30px; text-align: center; padding: 20px 0; }
.box dd { font-family: var(--font-sans); display: block; font-size: 20px; text-align: center;}

.box dt.name_01 { color: #9200c8; }
.box dt.name_02 { color: #006ed4; }
.box dt.name_03 { color: #00a3a5; }
.box dt.name_04 { color: #de009d; }



/*************** footer ***************/
.wrap_foot { width: 100%; background-color: #222; padding: 100px 0; } 
.foot_align { display: flex; justify-content: space-between;}

.foot_logo { display: block; width: 176px; height: 54px; background: url('../img/logo_foot.png') no-repeat 0 0; text-indent: -9999px; font-size: 0;}
.foot_info { display: block; color: #fff; font-size: 36px; padding-top: 10px; }
.foot_info a { color: #fff !important; }
.foot_info strong { font-weight: 700;}

.foot_sns { display: flex; flex-direction: column; gap: 18px; }
.foot_sns li a { display: flex; align-items: center; justify-content: center; width: 300px; height: 40px; border-radius: 15px; text-align: center; font-size: 20px; font-weight: 500; font-family: var(--font-sans);}
.cmass_ch a { background-color: #fddb00; color: #020303; }
.cmass_ch img { display: inline-block; vertical-align: middle; padding-right: 10px;}
.aidt_advice a { background-color: #de009d; color: #fff; }
.aidt_market a { background: linear-gradient(to right, #4d58eb, #6718cd); color: #fff; }


/* 패드 가로 모드 (1025px 이상 ~ 1366px 이하) */
@media (min-width: 1025px) and (max-width: 1366px) {
  .info_wrap { width: 98%; margin: 0 auto;}
  h1 { background-size: 90% auto;}
  .wrap_bg2 { padding: 5vw 0 3vw; }
  .wrap_bg3 { padding: 5vw 0 3vw; }
  .cont_top { width: 95%; }
  .lnb { width: 100%; }
  .top_bg1 { width: 100%; padding: 0 0 5vw; } 
  .book_title { gap: 22px; }
  .slider_wrap { width: 100%;  } 
  .container { width: 95%;  } 
  .info_book { padding-top: 4vw; }
  .book_title img { width: 21.5vw; }
  .book_btn li a { width: 21.54vw; height: 4.23vw; font-size: 2vw;  }
  .book_btn2 a { width: 21.54vw; height: 4.23vw; font-size: 2vw; }
  .box { width: 21vw; height: 10.5vw; border-radius: 20px; }

  /*************** 슬라이드 ***************/
  .slider_wrap { width: 95%; margin: 0 auto; } 
  .slide img { width: 90%; }
  .slide .step img { width: 25%; }
  .navigation { top: 92%;}
  .nav-button img { width:70%; }
  .indicator { width: 15px; height: 15px; } 
  .indicator.current { width: 30px; }

  .slide_title dt { font-size: 4.5vw; padding-bottom: 2vw;}
  .slide_title dd { font-size: 2vw; line-height: 3vw; }
  .wrap_bg2 .slide_title dd { padding-bottom: 3vw;}
}

/* 테블릿용 스타일 */
@media (max-width: 1024px){
  header { height: 9.77vw; }
  .cont_top { width: 95%; margin: 0 auto; }
  .logo { width: 32.71vw; height: auto; background-size: contain;}
  .gnb { gap: 7vw; }
  .gnb li a { font-size: 2.93vw; font-weight: 600;}

  .lnb { width: 100%; height: 7.81vw; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
  .lnb ul li a { height: 7.81vw; line-height: 7.81vw; font-size: 3.52vw; }
  nav.lnb li a::after { height: 0.8vw; }
  .container { width: 100%; }

  /*************** 체험관 ***************/
  .wrap_bg1 { background: url('../img/bg_01_t.png') no-repeat center 0; background-size: cover; }
  h1 { width: 100%; height: 22.46vw; background-size: contain }
  .top_bg1 { width: 100%; padding: 0 0 60px; }
  
  .info_wrap { display: flex; flex-direction: column; justify-content: space-between; }
  .info_class { width: 100%; padding-top: 0; }
  .info_class h2 { font-size: 3.5vw; line-height: 5.86vw; padding-bottom: 0;}
  .info_class h2 span { font-size: 2.93vw;}
  .btn_class { padding-bottom: 10px; }
  .btn_menu { width: 33vw; height: 9.3vw; font-size: 3.52vw; } 

  .info_book { width: 100%; padding-top: 6.84vw;}
  .book_title { justify-content: center; gap: 22px;}
  .book_title img { width: 35vw; }
  .txt_01 { font-size: 4.88vw; }
  .txt_02 { font-size: 11vw; }
  .txt_03 { font-size: 4.3vw;  }

  .book_btn { justify-content: center;}
  .book_btn li a { width: 35vw; height: 8.2vw; font-size: 3.5vw; }
  .book_btn2 a { width: 35vw; height: 8.2vw; font-size: 3.5vw; }



  /*************** 슬라이드 ***************/
  .slider_wrap { width: 95%; } 
  .slide img { width: 100%; }
  .slide .step img { width: 35%; }
  .navigation { top: 92%;}
  .nav-button img { width:70%; }
  .indicator { width: 15px; height: 15px; } 
  .indicator.current { width: 30px; }

  .slide_title dt { font-size: 5vw; padding-bottom: 5vw;}
  .slide_title dd { font-size: 3vw; line-height: 5vw; }
  .wrap_bg2 .slide_title dd { padding-bottom: 5vw;}

  /*************** 특장점 ***************/
  .wrap_bg2 { padding: 7vw 0 1vw;  min-height: auto; } 

  /*************** AI기능 ***************/
  .wrap_bg3 { background: url('../img/bg_02_t.png') no-repeat center bottom; min-height: auto;  padding: 8vw 0 1vw; background-size: cover; } 

  /*************** 수업 구성 ***************/
  .wrap_class { width: 100%; }
  .wrap_bg4_01 { width: 100%; padding: 12vw 0 2vw; } 
  .wrap_bg4_02 { width: 100%; padding: 12vw 0 2vw; } 
  .wrap_bg4_03 { width: 100%; padding: 12vw 0 2vw; } 
  .class_flow { gap: 20px; }
  .class_flow li { padding: 0.98vw 4.88vw; font-size: 3vw; border: solid 1px; border-radius: 15px; border-top-right-radius: 0; border-bottom-left-radius: 0;}
  
  /*************** 집필진 ***************/
  .wrap_bg5 { background: url('../img/bg_03_t.png') no-repeat center bottom; padding: 10vw 0; background-size: cover; } 
  .box_top { width: 35vw; border-radius: 20px; margin: 30px auto 50px; }
  .box_top dt { font-size: 3.91vw; }
  .box_top dt span { font-size: 2.8vw; }
  .box_top dd { font-size: 2.34vw; }
  .staff { width: 90%; margin: 0 auto; gap: 1.95vw; justify-content: flex-start; }
  .box { width: 21vw; height: 11.72vw; border-radius: 20px; }
  .box dt { font-size: 2.93vw; padding: 1.95vw 0; }
  .box dd { font-size: 1.95vw; }

  /*************** footer ***************/
  .wrap_foot { padding: 8vw 0; } 
  .foot_align { width: 90%; margin: 0 auto;}
  .foot_logo { width: 17.19vw; height: 5.27vw; background-size: contain;}
  .foot_info { font-size: 3.52vw; }
  .foot_sns { gap: 10px; }
  .foot_sns li a { width: 29.30vw; height: 3.91vw; line-height: 3.91vw; font-size: 1.95vw; border-radius: 10px;}
  .cmass_ch img { width: 3.9vw; padding-right: 5px;}

 }

/* 모바일용 스타일 */
@media (max-width: 600px){
  header { height: 24vw; flex-direction: column; }
  .cont_top { display: flex; flex-direction: column; width: 100%; margin: 0 auto; }
  .logo { width: 100%; border-bottom: solid 1px #ddd; height: 12vw; background-size: 40% auto; background-position: center center;}
  .gnb { width: 100%; gap: 0 !important; height: 12vw; justify-content: space-around;}
  .gnb li a { font-size: 5vw; font-weight: 600;}

  .lnb { width: 100%; height: 13vw; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
  .lnb ul li a { height: 13vw; line-height: 13vw; font-size: 4vw; }
  nav.lnb li a::after { height: 1.35vw; }
  .container { width: 100%; }

  /*************** 체험관 ***************/
  .wrap_bg1 { background: url('../img/bg_01_t.png') no-repeat center 0; background-size: cover; }
  h1 { width: 100%; height: 22.07vw; background-size: contain; margin: 0 auto; }
  .top_bg1 { width: 100%; padding: 0 0 7vw; }
  
  .info_wrap { display: flex; flex-direction: column; justify-content: space-between; }
  .info_class { width: 100%; padding-top: 0; }
  .info_class h2 { font-size: 4vw; line-height: 5.86vw; padding-bottom: 1.95vw;}
  .info_class h2 span { font-size: 3.5vw;}

  .btn_wrap { margin: 2.5vw auto 0; }
  .btn_class { padding-bottom: 5px; font-size: 4.5vw;}
  .btn_menu { width: 37vw; height: 11.25vw; font-size: 4.5vw; box-shadow: 0px 3px #222; } 
  .dot { font-size: 6vw; letter-spacing: -13px; text-indent: -7px; }

  .info_book { width: 100%; padding-top: 6.84vw;}
  .book_title { justify-content: center; gap: 10px; }
  .book_title img { width: 42vw; }
  .txt_01 { font-size: 4.88vw; }
  .txt_02 { font-size: 14.62vw; }
  .txt_03 { font-size: 4.3vw;  }

  .book_btn { justify-content: center; gap: 10px; padding-top: 5px;}
  .book_btn li a { width: 39vw; height: 9.3vw; font-size: 4.52vw; border: solid 1px; }
  .book_btn2 a { width: 39vw; height: 9.3vw; font-size: 4.52vw; border: solid 1px; }
  

  /*************** 슬라이드 ***************/
  .slider_wrap { width: 95%; padding: 5vw 0; } 
  .slide img { width: 100%; }
  .slide .step img { width: 40%; }
  .navigation { top: 94%; }
  .nav-button img { width:50%; }
  .indicator { width: 10px; height: 10px; } 
  .indicator.current { width: 20px; }

  .slide_title dt { font-size: 6vw; padding-bottom: 4vw;}
  .slide_title dd { font-size: 4vw; line-height: 7vw; padding-bottom: 5vw;}
  .step { padding-bottom: 3vw;}

  /*************** 특장점 ***************/
  .wrap_bg2 { padding: 13vw 0 2vw; min-height: auto; } 

  /*************** AI기능 ***************/
  .wrap_bg3 { min-height: auto; background: url('../img/bg_02_t.png') no-repeat center bottom; padding: 13vw 0 2vw; background-size: cover; } 

  /*************** 수업 구성 ***************/
  .wrap_class { width: 100%; }
  .wrap_bg4_01 { width: 100%; padding: 18vw 0 2vw; } 
  .wrap_bg4_02 { width: 100%; padding: 18vw 0 2vw; } 
  .wrap_bg4_03 { width: 100%; padding: 18vw 0 2vw; } 
  .class_flow { gap: 10px; }
  .class_flow li { padding: 1vw 4vw; font-size: 4vw; border: solid 1px; border-radius: 8px; border-top-right-radius: 0; border-bottom-left-radius: 0; }
  
  /*************** 집필진 ***************/
  .wrap_bg5 { background: url('../img/bg_03_t.png') no-repeat center bottom; padding: 10vw 0; background-size: cover; } 
  .box_top { width: 45vw; height: 30vw; padding: 10px; border-radius: 20px; margin: 30px auto; }
  .box_top dt { font-size: 6.67vw; }
  .box_top dt span { font-size: 5vw; }
  .box_top dd { font-size: 4vw; }
  .staff { width: 90%; margin: 0 auto; gap: 1.95vw; justify-content: flex-start;}
  .box { width: 21vw; height: 11.72vw; border-radius: 10px; }
  .box dt { font-size: 4vw; padding: 1vw 0; }
  .box dd { font-size: 2.2vw; }

  /*************** footer ***************/
  .wrap_foot { padding: 8vw 0; } 
  .foot_align { width: 100%; flex-direction: column;align-items: center; justify-content: center; margin: 0 auto; text-align: center;}
  .foot_logo { width: 50vw; background-position: center; background-size: contain;}
  .foot_info { font-size: 5vw; }
  .foot_sns { gap: 10px; padding-top: 10px; }
  .foot_sns li a { width: 50vw; height: 7vw; font-size: 3.33vw; border-radius: 7px;}
  .cmass_ch img { width: 4.9vw; padding-right: 5px;}
 }