/***김재하수학 2025 10 22 *****/

.main_tt1{font-size:18px; color:##7E7E7E; font-weight:500; line-height:36px;}
.main_tt1 span{display:block; font-weight:700; font-size:24px; color:#000; padding-bottom:30px; letter-spacing: -1px;}

.main_tt2{font-weight:700; font-size:24px; color:#000; text-align:center;}

.main_tt3{font-weight:400; font-size:18px; color:#fff; line-height:36px;  text-align:center;}
.main_tt3_1{font-weight:400; font-size:16px; color:#fff; line-height:36px;  text-align:center;}

.main_tt4{display:block;font-weight:700; font-size:24px; color:#fff; line-height:36px;  text-align:center; margin-bottom:15px;}
.main_tt4 span{font-weight:400; }

.main_tt5{font-size:16px; color:#000; line-height:30px; margin-top:4%; letter-spacing:-1.5px; }
.main_tt5 span{font-weight:500; }

.main_tt6{display:block;font-weight:700; font-size:26px; line-height:40px;}


.main_visual{width:100%; position:relative; border:0px solid red; }
.main_visual > img{width:100%;}

.main_round{position: absolute; bottom:-5px; width:100%; height:50px; border-top-left-radius:35px;
border-top-right-radius:35px;
 background:#fff; }

.main_visual_txt ul{width:100%; height:400px; }
.main_visual_txt ul li{display: inline-block; float:left ;  height: 400px; }
.main_visual_txt ul li:first-child{width:58px;  text-align: left;}
.main_visual_txt ul li:nth-child(2){border:0px solid red;width:93.9%; background:url('/skin/schoolc/html/img/mainbg.png')center bottom repeat;}
.main_visual_txt ul li:last-child{width:3%; text-align:right;}



.main_visual_txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(6deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.009) 100%);
}

.main_visual_txt1 {
   position: absolute;
  top: 65%;  /* 또는 60% ~ 70% 사이로 조절 */
  left: 7%;
  transform: translateY(-50%); /* 정확히 가운데 기준으로 위치 조절 */
  font-size: 33px;
  color: #fff;
  font-weight: 700;
  line-height:1.8;
}


  /* 교체 대상 span */
  .swap {
    position: relative;
    display: inline-block;
    padding: 7px;
    background: #fff;
    color:#000;
    border-radius: 10px;
    /* 트랜지션으로 부드러운 페이드/슬라이드 효과 */
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity:0.9;
    line-height:40px;
    transform: translateY(0);
    will-change: opacity, transform;
  }

  /* 사라지는 상태 (페이드 아웃 + 위로 살짝 이동) */
  .swap.fade-out {
    opacity: 0;
    transform: translateY(-10px);
  }
 .swap.fade-in{
     opacity:1;
 }



.bg-video {
  position: absolute;
  top: -50px;
  left: 0;
   height:500px;
  width: 100%;
  z-index: -1;
  opacity: 0.15;
}

.bg-video_content {
  height:500px;
  width: 100%;
  object-fit: cover; 
  background: #fff;
  
}

.section_01 .movie_area {position:relative; padding-bottom:60%; padding-top:0px; height:0; overflow:hidden;}
.section_01 .movie_area iframe,
.section_01 .movie_area object,
.section_01 .movie_area embed {position:absolute; top:0; left:0; width:100%; height:100%;}



.section_01 {padding:0px 0px 50px;position:relative; width:100%;  text-align:center; overflow:hidden; }
.movie_area{width:100%; margin:0 auto;  border:0px solid red;  background: #022C1C;
background: linear-gradient(90deg,rgba(2, 44, 28, 1) 0%, rgba(25, 25, 25, 1) 100%);}
.section_01 ul{width:100%;  margin:0 auto; border:0px solid red;  padding-top:35px; display:block; }
.section_01 ul li{border:0px solid red; display:inline-block; float:left; width:48%; 
  margin:1%; border-radius:17px; background:#FAFAFA; padding:20px 25px; overflow: hidden;}
.section_01 ul li:first-child{margin-left:0%;} 
.section_01 ul li:last-child{margin-right:0%;} 
.section_01 ul li dl{width:100%; float:left;}
.section_01 ul li dl dt{width:100%; float:left;  text-align: left; height:55px;}
.section_01 ul li dl dd{width:100%; float:left; text-align: left;}



.num_tt{color:#000; font-weight:700; font-size:31px;}
.num_tt span{font-size:22px;}

.num_tt1{ color:#686868; font-weight:400; font-size:15px; line-height:30px; letter-spacing: -1px;}
.num_tt1 span{display:block; font-size:17px; color:#686868; font-weight:500; line-height:28px;}


.section_02{width:100%; padding:50px 0px 50px 0px; background-color: #F6F6F6; }


.section_03{width:100%; padding:50px 0px 0px 0px; background:url('/skin/schoolc/html/img/main_bg01.png')center top;  }
.section_03_contents{width:100%; margin:0 auto; padding-top:0px;overflow: hidden;}
.section_03_contents_left{width:100%; float:left; text-align: left;}
.section_03_contents_left img{width:70%; padding-left:2%; padding-top:5%;  }
.section_03_contents_right{width:100%; float:left;}
.section_03_contents_right ul{width:94%; margin:0 auto; position: relative; margin-bottom:60px; margin-top:10px;}
.section_03_contents_right ul li{ position: relative; border-radius:20px; padding:25px 20px;width:100%; margin-bottom:4%; background:rgba(250,250,250,0.15);
 border:1px solid rgba(250,250,250,0.15); }
 .section_03_contents_right ul li:last-child{ margin-bottom:0%;}
.section_03_contents_right ul li span{font-size:16px; color:#C2C2C2; font-weight:400; line-height:35px;}
.section_03_contents_right ul li p{font-size:22px; color:#fff; font-weight:500;}
.section_03_contents_right ul li img{width:18%;}


.section_04{width:100%; padding:50px 0px 50px 0px;  }
.section_04 ul{width:94%; margin:0 auto;  bordeR:0px solid red; overflow:hidden; }
.section_04 ul li:first-child{width:100%;  display: inline-block; float:left; text-align: left !important;}
.section_04 ul li:last-child{width:100%; float:left;}
.section_04 ul li img{width:100%; padding-top:10%;}


.section_05{width:100%; padding:0px 0px 60px 0px;  overflow:hidden; }
.section_05_contents{width:100%;  margin:0 auto;  overflow:hidden; }
.section_05_contents_left{width:94%; border:0px solid red;margin:0 auto; text-align: left; }
.section_05_contents_left img{width:60%;}
.section_05_contents_right{width:100%; border:0px solid red; float:left; text-align: left;}
.section_05_contents_right ul{width:96%; margin:0 auto;}
.section_05_contents_right ul li{ width:100%; float:left;  display: inline-block; margin-bottom:3%; padding-top:25px;  position:relative; }


.num01{position:absolute; top:10px; right:30px; width:40px; height:40px; border-radius:50%; background:#FA5669; font-size:18px;
text-align: center; line-height:40px;
 font-weight:700; color:#fff;}

.num02{position:absolute; top:10px; right:30px;width:40px; height:40px; border-radius:50%; background:#FBB03B; font-size:18px;
text-align: center; line-height:40px;
 font-weight:700; color:#fff;}

 .num03{position:absolute; top:10px; right:30px; width:40px; height:40px; border-radius:50%; background:#53B4ED; font-size:18px;
text-align: center; line-height:40px;
 font-weight:700; color:#fff; }


.num04{position:absolute; top:10px; right:30px; width:40px; height:40px; border-radius:50%; background:#25A344;font-size:18px;
text-align: center; line-height:40px;
 font-weight:700; color:#fff;}


.levelcon01{width:100%; border-radius:17px; background: #FFF3F4; padding:25px 15px; float:right;  }
.levelcon01 dl{width:100%; float:right; padding:10px 0px;}
.levelcon01 dl dt{width:100%; float:left;border-right:0px solid #7E7E7E33; text-align: left; margin-bottom:3%;
  font-size:24px; color:#1B1B1B; font-weight:500;}
.levelcon01 dl dt span{font-weight:700;}
.levelcon01 dl dd{width:100%; float:left; font-size:16.5px; line-height:27px; padding-left:0%; padding-top:2%;
  letter-spacing: -0.9px; padding-top:0%; color:#4E4E4E; font-weight:400;}


.section_06{width:100%; padding:70px 0px;  overflow:hidden;  text-aling:center !important; background:url('/skin/schoolc/html/img/main_bg02.png')center top; }

.section_07{width:100%; padding:50px 0px 0px; }
.section_07_contents{width:100%; margin:0 auto;overflow: hidden;}
/*.section_07_contents ul{widht:100%; margin-top:3%; border:0px solid red; display:flex; justify-content: left;}
.section_07_contents ul li{display: inline-block; width:32%; border-radius: 25px;  float:left; margin-right:2%; background: #F6F6F6; }*/
.section_07_contents ul li a{display:block;  border:1px solid #F6F6F6; padding:25px 25px;  border-radius: 25px; }
.section_07_contents ul li:last-child{margin-right:0%;}
.section_07_contents ul li p{font-weight:700; color:#000; font-size:24px;}
.section_07_contents ul li span{display:inline-block;margin-left:1%;font-weight:500; color:#686868; font-size:16px; line-height:25px; margin-top:0.5%; }

.section_07_contents ul li a:hover{background: #F2FFEF; border-radius:25px;  bordeR:1px solid #25A344;}


.auto_slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    border:10px solid #fff;
    
}

/* 슬라이드 컨테이너 */
.slider_wrap {
    display: flex;
    width: 100%; /* li 3개 = 300% */
    transition: transform 0.6s ease; /* 부드러운 이동 */
    padding: 0;
    margin: 0;
}

/* 슬라이드 1개 */
.slider_wrap li {
    flex: 0 0 100%; /* 한 화면에 li 하나 */
    list-style: none;
    border:0px solid red;
    background: #F6F6F6;
     border-radius: 25px;
}









.more_btn{width:100%; font-size:16px !important; background: #9C9C9C; color:#fff !important; 
  padding:14px 25px; border-radius:35px; position:relative; }
.more_btn:hover{ background: linear-gradient(270deg, rgba(37, 163, 68, 1) 0%, rgba(24, 117, 50, 1) 100%)}

.section_07_contents ul li:hover .more_btn {
  background: linear-gradient(270deg, rgba(37, 163, 68, 1) 0%, rgba(24, 117, 50, 1) 100%);
  color: #fff !important;}


.arrow{position: absolute; right:5px; top:-3px;}


.btn_area2{width:100%; text-align: center; padding-top:30px; height:auto;  padding-bottom:30px;}
.more_btn1{margin: 0 auto !important; display:inline-block; 	
	 font-size:21px; font-weight:500; color:#1B1B1B;   }

.more_btn1  a{color:#000 !important;border-radius:20px; padding:25px 70px 25px 25px; border:1px solid #1B1B1B; 
  background:url('/skin/schoolc/html/img/arrow_02.png')no-repeat right top; background-position-y:-5px;   

  transition: all 0.4s ease;}
.more_btn1  a:hover{color:#fff !important; border:1px solid #000;   background:#000 url('/skin/schoolc/html/img/arrow_03.png')no-repeat right top;
 background-position-y:-5px;  }

.more_btn2{margin: 0 auto !important; display:inline-block;   
   font-size:21px; font-weight:500; }
.more_btn2 a{font-size:21px; font-weight:500;  border:1px solid #000; background:#000 url('/skin/schoolc/html/img/arrow_03.png')no-repeat right top;   
 transition: all 0.4s ease;
  padding:25px 70px 25px 25px; color:#fff;  background-position-y: -5px;     border-radius:20px;}
.more_btn2 a:hover{ border:1px solid #000; background:url('/skin/schoolc/html/img/arrow_02.png')no-repeat right top; background-position-y:-5px; 
 color:#000; 
 }


.best_btn{display: inline-block; padding:5px 15px; background:#FFEA73;  color:#4E4E4E; font-size:14px !IMPORTANT; font-weight:500 !important; 
	border-radius:35px; margin-bottom:10px; height:33px;}
.best_btn1{display: inline-block; padding:5px 15px; background:none;  color:#4E4E4E; font-size:14px !IMPORTANT; font-weight:500 !important; 
	border-radius:35px; margin-bottom:10px; height:33px;}



/***버튼스타일****/
.pass-btn {
 
  font-size:17px; 
  font-weight:600; 
  color:#1B1B1B; 
  border: 1px solid #1B1B1B;
  background: #fff;
  padding: 15px 25px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  position: relative;
}

.pass-btn::after {
  content: "→";
  margin-left: 10px;
   font-size:17px; 
  transition: transform 0.3s ease;
}

.pass-btn:hover {
  background: #000;
  color: #fff;
}

.pass-btn:hover::after {
  transform: translateX(4px);
}



.hugi-btn {
 
  font-size:17px; 
  font-weight:600; 
  color:#fff; 
  border: 1px solid #000;
  background: #fff;
  padding: 15px 25px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  position: relative;
   background: #000;
}

.hugi-btn::after {
  content: "→";
  margin-left: 10px;
  font-size: 17px;
  transition: transform 0.3s ease;
}

.hugi-btn:hover {
  background: #fff;
  color: #000 ;
}

.hugi-btn:hover::after {
  transform: translateX(4px);
}



.book-btn {
 
  font-size:17px; 
  font-weight:600; 
  color:#fff; 
  border: 1px solid #000;
  background: #fff;
   padding: 15px 25px;
  border-radius: 55px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  position: relative;
   background: #000;
   margin-top:35px;
}

.book-btn::after {
  content: "→";
  margin-left: 10px;
  font-size: 17px;
  transition: transform 0.3s ease;
}

.book-btn:hover {
  background: #fff;
  color: #000 ;
}

.book-btn:hover::after {
  transform: translateX(4px);
}


.book-btn1 {
 
    font-size:17px; 
  font-weight:600; 
  color:#25A344; 
  border: 0px solid #000;
  background: #fff;
  padding: 15px 25px;
  border-radius:45px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  position: relative;
   background: #fff;
   margin-top:35px;
}

.book-btn1::after {
  content: "→";
  margin-left: 10px;
    font-size:17px; 
  transition: transform 0.3s ease;
}

.book-btn1:hover {
  background: #25A344;
  color: #fff ;
}

.book-btn1:hover::after {
  transform: translateX(4px);
}






.section_08 {
  width: 100%;
  padding: 50px 0;
  transition: all 2s;
}

/* float 대신 flex로 좌우 배치 */
.section_08_contents {
  width:100%;
  margin: 0 auto;
 display: block
}

/* 왼쪽: 스크롤 시 고정 */
.section_08_contents_left {

  position: relative;
  
  border: 0px solid red;
}

/* 오른쪽: 일반 흐름 (별도 스크롤 없음) */
.section_08_contents_right {

  text-align: left;
  border: 0px solid red;

}

/* 리스트 스타일 */
.section_08_contents_right ul {
  width: 94%;
  margin: 0 auto;
  padding: 0;
}

.section_08_contents_right ul li {
  display: block;
  width: 100%;
  margin-bottom:15px;
}

.section_08_contents_right ul li p {
  line-height: 50px;
  font-size: 18px;
  color: #000;
  font-weight: 500;
}


.movie_area1{width:100%;}
.movie_area1 img{width:100%;}


.bottombanner{width:100%; margin-top:20px; overflow:hidden;  padding:10px; background:#f5f5f5; bordeR:0px  solid red;}
.bannerarea{width:100%; float:left;  padding:0px; background:#f5f5f5;}

.flow_banner {overflow: hidden; display: flex;background:#f5f5f5; padding:0px 30px; }
.flow_banner .list {display: flex;}
.flow_banner .list > li {width:200px !important;background:none;   margin:5px; white-space: nowrap; 
    font-size: 18px;color: #fff; padding:0px;}
@keyframes flowRolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* 반응형 스타일 */
@media (max-width: 1280px) {
    .flow_banner .list > li {font-size: 16px;padding: 10px;}
}

@media (max-width: 1024px) {
.flow_banner {overflow: hidden; display: flex; margin: 10px auto;background:#f5f5f5;}
    .flow_banner .list > li {width:180px !important;font-size: 14px;padding: 5px;}

  .flow_banner .list > li > img{width:90% !important;}

}


.section_09{width:100%; padding:0px 0px 30px; transition: all 2s; text-align: center}


.grid{
  height: 70px;
  margin: 5px;
  display: grid;

  background-color: white;
  border: 3px solid white;
  gap: 3px;
  
  .bar-top, .bar-bottom{
    grid-column: 1 / -1;

    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;

    p{
      color:#fff;
      font-size:45px;
      display: inline-block;
      font-weight:900;
    }
  }

  .grid-content{
    h2{
      color: white;
      font-size: 100px;
      font-weight: 700;
    }
    padding : 20px;
    background-size : 100%;
    background-image: url("https://images.unsplash.com/photo-1558158539-226f4a45f7b3?q=80&w=2978&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  }
}

.bar-top p{
  animation: marquee-top 20s linear infinite;
}

.bar-bottom p{
  animation: marquee-bottom 70s linear infinite;
}

@keyframes marquee-top {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes marquee-bottom {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


/* -webkit-text-stroke */
.webkit-text-stroke {
   /* 원래 목표: '글자 바깥으로' 2픽셀만큼 테두리가 있었으면 좋겠어요! */
  -webkit-text-stroke: 1px #1B1B1B;
}

/* text-shadow */
.text-shadow {
  text-shadow: -1px 0 #1B1B1B, 0 1px #1B1B1B, 1px 0 #1B1B1B, 0 -1px #1B1B1B;
}


/* pseudo-element를 활용한 글자 테두리 */
.handmade-stroke {
  z-index: 0;
  position: relative;
}

.handmade-stroke::before {
  z-index: -1;
  content: attr(data-content);
  position: absolute;
  left: 0;
  /* 글자 바깥쪽으로 나갔으면 하는 테두리 크기의 두 배 */
  -webkit-text-stroke: 2px #1B1B1B;
}

.handmade-stroke[data-shadow]::after {
  z-index: -2;
  content: attr(data-content);
  position: absolute;
  left: 0;
  top:2px;
  color: #fff;
  /* 테두리를 포함해서 동일한 글자 크기를 맞춰주기 위해 같은 값의 stroke 사용 */
  -webkit-text-stroke: 2px #1B1B1B;
}


.hugi { 
  overflow: hidden;


}
.roller {
  display: flex; margin-top:5%; 
}
.rolling_list { 
  display: flex;  padding-bottom:1%; padding-top:3%;
}
.hugi .rolling_list .item { 
  width:auto; 
 
  border-radius: 20px;
  display: block; 
  align-items: center;
  justify-content: center;
  flex-shrink: 0; 
  background: #fff;
width:380px;
  margin-right: 30px;
  padding:25px; 
  box-shadow: 5px 5px 10px rgba(0,0,0,0.03);
}
.hugi .rolling_list .item .univname{display: block !important;}
.hugi .rolling_list .item .univname ul{bordeR:0px solid red; float:left; }
.hugi .rolling_list .item .univname ul li{display: inline-block; float:left; bordeR:0px solid red;} 
.hugi .rolling_list .item .univname ul li:first-child{padding-right:10px;}
.hugi .rolling_list .item .univname ul li p{font-size:14px; font-weight:600; line-height:20px; padding-top:12px;}
.hugi .rolling_list .item .univname ul li:first-child{padding-right:10px;}

.hugi .rolling_list .item .grade ul {float:right; bordeR:0px solid red;}
.hugi .rolling_list .item .grade ul li{display: inline-block; float:left;}
.exgrade{padding:5px !important;  line-height:20px !important;border-radius:4px; font-size:14px !important;  background:#AEAEAE; font-weight:600; color:#fff !important;}
.aftergrade{padding:5px !important;  line-height:20px !important;border-radius:4px; font-size:14px !important;  background:#25A344; font-weight:600; color:#fff !important;}
.hugi .rolling_list .item .grade ul li img{width:20px; padding-top:7px;}

.hugi .rolling_list .item p{padding-top:20px; font-size:16px; line-height:26px;  color: #000;}
.hugi .rolling_list .item p span{font-weight:700;}

.univname{float:left; }


.roller .rolling_list.original {
  animation: rollingTop1 30s linear infinite;
}
.roller .rolling_list.clone {
  animation: rollingTop2 30s linear infinite;
}
@keyframes rollingTop1 {
  0% { transform: translateX(0); }
  50% { transform: translateX(-100%); }
  50.01% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes rollingTop2 {
  0% { transition: translateX(0); }
  100% { transform: translateX(-200%); }
}

/* hover시 일시정지 */
.roller:hover .rolling_list {
   animation-play-state: paused; 
}




.ft30{font-size:30px; font-weight:600 !important;}
.ft50{font-size:50px; font-weight:500 !important;}
.wd50px{width:50 !important;}

/****footer*****/



#kim_footer{width:100%; background: #000; padding:40px 10px 20px; letter-spacing: -1px;}
.footercon{position:relative; width:100%; margin:0 auto; padding-bottom:25px;bordeR-bottom:1px solid #333333; overflow:hidden;  }
.footercon_tt{width:100%; float:left; color:#fff; font-size:14px; line-height:25px; opacity: 0.8; font-weight:200;}
.copylink{position:relative;  bordeR:0px solid red; margin-bottom:5px; }
.copylink a{text-decoration:underline; color:#fff;  bordeR:0px solid red;  display:inline-block;}
.copy{position:relative;  bordeR:0px solid rebottom}
.footercon_tt span{padding:0px 10px;}