@import url('sub.css'); 


.program_subtop {padding:120px 0 0; position:relative; background:url('/program/img/program_subtop.jpg')no-repeat center / cover; overflow:hidden; text-align:center;}
.program_subtop .subtop_tit {margin:0 0 100px;}
.program_subtop .subtop_tit .fs100::before {content:''; width:200px; aspect-ratio: 200 / 56; background:url('/program/img/tit_ico.svg')no-repeat center / 100% auto; position:relative; display:block; margin:0 auto 25px;}
.program_subtop .subtop_tit .fs100 .fs40 {display:block; color:var(--sub2); margin:0 0 30px; line-height: 100%;}
.program_subtop .subtop_tit .fs20 {font-weight: 400; color: var(--black); margin:25px 0 0;}
.program_subtop .program_process {display:flex; flex-wrap:wrap; gap:80px; max-width:1210px; margin:0 auto; align-items:flex-start;}
.program_subtop .program_process .process_list {flex:1; display:flex; flex-wrap:wrap; gap:50px; padding:60px 0 0; box-sizing:border-box; position:relative; z-index:10;}
.program_subtop .program_process .process_list::after {content:''; width: 500px; aspect-ratio: 500 / 128; background:url("/program/img/pro_line.png")no-repeat center / 100% auto; position: absolute; left: 21%; bottom: 31%; z-index:-1; max-width:58%;}
.program_subtop .program_process .process_list li {position:relative;flex:1; aspect-ratio: 1 / 1; border-radius:100%; background:var(--main2); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex-direction:column; transition:all 0.3s linear;}
.program_subtop .program_process .process_list li.on {background:var(--sub); transition:all 0.3s linear;}
.program_subtop .program_process .process_list li:nth-of-type(2) {position:relative; top:-60px;}
.program_subtop .program_process .process_list li .step {padding:6px 15px; display:inline-flex; font-size: 10px; font-weight: 400; line-height: 160%; letter-spacing: 0.3px; font-family: var(--jump); color:rgba(255,255,255,0.5); background: rgba(255, 255, 255, 0.10); border-radius:50px;}
.program_subtop .program_process .process_list li i {display:block; margin:20px 0 14px;}
.program_subtop .program_process .process_list li .fs30 {line-height: 100%; font-family: var(--blackHan); font-weight:400; color:var(--white);}
.program_subtop .program_process .program_character {max-width:280px; width:24%; margin:0 0 -34px;}
.program_subtop .program_process .program_character img {max-width:100%;}


.program_subtop .program_process .process_list li::after {content:'chevron_right'; width:30px; aspect-ratio: 1 / 1; background:var(--white); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-family:var(--icon); line-height:1; font-size:24px; border-radius:100%; position:absolute; bottom:148px; right:-35px;}

.program_subtop .program_process .process_list li:nth-of-type(1)::after {transform:rotate(-20deg); bottom:62%;}
.program_subtop .program_process .process_list li:nth-of-type(2)::after {transform:rotate(20deg); bottom:39%; right:-42px;}
.program_subtop .program_process .process_list li:last-of-type::after {display:none;}


.program_cont_wrap {overflow:hidden;}
.tit_wrap {text-align:center; margin:0 0 60px;}
.tit_wrap .point_tit {display:block; margin:0 0 28px;}

.features_list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap:30px;}
.features_list dl {text-align:center; position:relative; z-index:10;}
.features_list dl::after {content:''; width:140px; aspect-ratio: 140 / 128; background:url("/program/img/rotate_ico.svg")no-repeat center / 100% auto;  position:absolute; top:50%; left:-85px; margin-top:-64px; z-index:99999; animation: spinLoop 5s linear infinite;}
.features_list dl:first-of-type::after {display:none;}
.features_list dl::before {content:''; width:100%; height:100%; border:1px solid var(--border); box-sizing:border-box; position:absolute; top:0; left:0;  border-radius: var(--borderR20); z-index:-1;}
.features_list dl dt {line-height:1; padding:25px 25px 20px; box-sizing:border-box; background:var(--sub); color:var(--white); border-radius: var(--borderR20);}
.features_list dl:last-of-type dt {background:var(--main2);}
.features_list dl dd {padding:50px; box-sizing:border-box;}

.features_list dl dd .img {margin:0 0 32px; padding:0 0 32px; position:relative;}
.features_list dl dd .img img {max-width:100%;}
.features_list dl dd .img::before {content:''; width:100%; height:1px; background: linear-gradient(90deg, rgba(221, 221, 221, 0.00) 0%, rgba(221, 221, 221, 0.50) 50%, rgba(221, 221, 221, 0.00) 100%); position:absolute; bottom:0; left:0;}
.features_list dl dd .img::after {content:''; width:25px; aspect-ratio: 1 / 1; -webkit-mask: url("/img/light_svg.svg") no-repeat center / contain; mask: url("/img/light_svg.svg") no-repeat center / contain; position:absolute; bottom:-13px; left:50%; background-color: var(--border); transform:translateX(-50%);}

.features_list dl dd .fs18 {margin:10px 0 0;}

@keyframes spinLoop {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}



.edu_banner_wrap {padding:100px 0 0;}
.banner_tit {margin:0 0 50px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; position:relative;}
.banner_tit::after {content:''; width:100%; height:1px; border-bottom:1px dashed var(--border); position:absolute; bottom:32px; left:0; z-index:-1;}
.banner_tit .tit {display:inline-block; padding:0 34px; box-sizing:border-box; background:var(--white);}
.banner_tit .tit::before {content:''; width:110px; height:160px; background:url("/program/img/program_character_sm01.png")no-repeat top center; margin:0 auto -62px; display:block;}
.banner_tit .tit .fs30 {position:relative; line-height:1; font-family: var(--blackHan); color:var(--white); font-weight:400; display:inline-flex; padding:20px 66px; box-sizing:border-box; border-radius: 100px; background: url("/program/img/tit_deco.svg") no-repeat left 30px center, url("/program/img/tit_deco.svg") no-repeat right 30px center, var(--sub);}
.banner_tit .tit .fs30::after {content:''; width:calc(100% - 10px); height:calc(100% - 10px); border-radius:inherit; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border: 1px solid var(--white); opacity: 0.3;}

.banner_roll {position: relative;}
.banner_roll .swiper_btn_wrap {width: 50%; max-width: 760px; display: flex; justify-content: space-between; align-items: center; position: absolute; top: calc(min(50vw, 760px) * (462 / 760) / 2); left: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none;}
.edu_banner_wrap .swiper-button-next, .edu_banner_wrap .swiper-button-prev {pointer-events: auto; position: relative !important; left: 0; right: 0; width: 50px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 100%; background: var(--sub); height: auto !important; transition: all 0.3s linear;}

.edu_banner_wrap .swiper-button-prev {transform:translateX(-100%); margin-left:-15px;}
.edu_banner_wrap .swiper-button-next {transform:translateX(100%); margin-right:-15px;}


.edu_banner_wrap .swiper-button-next:hover, .edu_banner_wrap .swiper-button-prev:hover {background: var(--black) !important; transition: all 0.3s linear;}
.swiper-button-next:before, .swiper-button-prev:before {content: ''; width: 14px; aspect-ratio: 1 / 1; background: var(--white);}
.swiper-button-prev:before {-webkit-mask: url("/img/v_prevarrow.svg") no-repeat center / contain; mask: url("/img/v_prevarrow.svg") no-repeat center / contain;}
.swiper-button-next:before {-webkit-mask: url("/img/v_nextarrow.svg") no-repeat center / contain; mask: url("/img/v_nextarrow.svg") no-repeat center / contain;}
.swiper-button-next:after, .swiper-button-prev:after {display: none;}
.banner_roll .swiper-slide {width: 50%; max-width: 760px; transform: scale(0.4102) translateY(-25%); opacity: 0.5; transform-origin: center center; transition: transform 0.5s ease, opacity 0.5s ease; filter:grayscale(1);}
.banner_roll .swiper-slide-active {transform: scale(1) translateY(0); opacity: 1;  filter:grayscale(0);}
.banner_roll .swiper-slide dt {padding: 40px; box-sizing: border-box; background: var(--grayBg); border-radius: var(--borderR20); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 760 / 462;}
.banner_roll .swiper-slide dt img { max-width: 100%; max-height: 100%; width: 100%;
  height: 100%; object-fit: contain; border-radius: 10px; box-sizing: border-box;}
.banner_roll .swiper-slide dd {text-align: center; margin: 30px 0 0;}
.banner_roll .swiper-slide dd .step::before {content: attr(data-step); color: var(--sub); leading-trim: both; text-edge: cap; font-family: var(--blackHan); font-size: 16px; font-weight: 400; line-height: 100%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}
.banner_roll .swiper-slide dd .fs40 {margin: 20px 0; line-height: 1;}
.banner_roll .swiper-slide dd .fs18 {opacity: 0; visibility: hidden;}
.banner_roll .swiper-slide-active dd .fs18 {opacity: 1; visibility: visible;}



#offline .banner_tit .tit::before {background:url("/program/img/program_character_sm02.png")no-repeat top center;}
#offline .banner_tit .tit .fs30  {background-color:var(--main2);}
#offline .banner_roll .swiper-slide dd .step::before {color:var(--main2);}
#offline .swiper-button-next, #offline .swiper-button-prev {background-color:var(--main2);}


/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 

.features_list dl dd br {display:none;} 
.edu_banner_wrap br {display:none;} 
}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


.banner_roll .swiper_btn_wrap {width: 70%;     top: calc(min(70vw, 760px) * (462 / 760) / 2);}
.banner_roll .swiper-slide {width: 70%; max-width: 100%; transform: scale(0.75);}
.banner_roll .swiper-slide-active {transform: scale(1);}


.program_subtop .program_process .process_list li:nth-of-type(2)::after {bottom:34%; transform: rotate(20deg) translateY(22%);}

.features_list dl dd {padding:30px;}

.banner_roll {overflow:visible;}

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

/* .program_subtop .subtop_tit .fs20 br {display:none;} */

.program_subtop .program_process {gap:40px;}
.program_subtop .program_process .process_list {gap: max(16px, 5.102vw); padding: max(20px, 6.122vw) 0 0; }
.program_subtop .program_process .process_list li:nth-of-type(2) {top: min(-20px, -6.122vw);}
.program_subtop .program_process .process_list li .step {padding: max(2px, 0.612vw) max(5px, 1.531vw); font-size: max(10px, 1.020vw); border-radius: max(16px, 5.102vw);}
.program_subtop .program_process .process_list li i {margin: max(3px, 1.041vw) 0 max(5px, 1.429vw); }
.program_subtop .program_process .process_list li i img {width: max(17px, 5.2vw);}
.program_subtop .program_process .process_list li .fs30 {font-size: max(12px, 3.061vw);}


.features_list {grid-gap:20px;}
.features_list dl dt {padding:20px 20px 15px;}
.features_list dl::after {width:90px; margin-top:-45px; left:-56px;}

.banner_roll .swiper-slide dt {padding:20px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


.tit_wrap {margin:0 0 30px;}
.tit_wrap .point_tit {margin:0 0 16px;}
.tit_wrap .point_tit img {max-height:15px;}

.program_subtop {padding:60px 0 0;}
.program_subtop .subtop_tit {margin:0 0 50px;}
.program_subtop .subtop_tit .fs100 .fs40 {margin:0 0 15px;}
.program_subtop .subtop_tit .fs100::before {width:80px; margin:0 auto 20px;}
.program_subtop .subtop_tit .fs20 {margin:15px 0 0;}
.program_subtop .program_process {gap:0;}
.program_subtop .program_process .process_list li::after {width: max(16px, 5vw); font-size: max(13px, 4vw);}

.program_subtop .program_process .process_list li:nth-of-type(1)::after {bottom: max(48px, 15vw); right: min(-16px, -5vw);}
.program_subtop .program_process .process_list li:nth-of-type(2)::after {right: min(-18px, -5.5vw); bottom: max(32px, 10vw);}

.program_subtop .program_process .process_list li i img {width: max(23px, 7.2vw);}
.program_subtop .program_process .process_list li .step {font-size: max(8px, 1.52vw);}

.program_subtop .program_process {flex-direction:column; flex-wrap:wrap;}
.program_subtop .program_process .process_list {width:100%; flex:none;}
.program_subtop .program_process .program_character {width:50%; margin:0 auto -25px;}

.features_list {grid-gap:20px; grid-template-columns: repeat(1, minmax(0, 1fr));}
.features_list dl dt {padding:15px 15px 10px;;}
.features_list dl dd {padding:15px 15px 30px;}
.features_list dl::after {width:80px; margin-top:-55px; left:50%; top:0; margin-left:-40px;}


.edu_banner_wrap {padding:50px 0 0;}
.banner_tit {margin:0 0 30px;}
.banner_tit .tit {padding:0 20px;}
.banner_tit::after {bottom:23px;}
.banner_tit .tit::before {background-size:100% auto !important; width:80px; height:135px;}
.banner_tit .tit .fs30 {padding: 16px 48px 13px; background: url(/program/img/tit_deco.svg) no-repeat left 20px center / 10px auto, url(/program/img/tit_deco.svg) no-repeat right 20px center / 10px auto, var(--sub);}
.edu_banner_wrap .swiper-button-next, .edu_banner_wrap .swiper-button-prev {width:38px;}
.swiper-button-next:before, .swiper-button-prev:before {width:12px;}
.banner_roll .swiper-slide dt {padding:10px;}
.banner_roll .swiper-slide dt img {/* 핵심: 부모 패딩 10px을 뺀 나머지 영역(100%) 내에서 움직이도록 설정 */
  max-width: calc(100% - 20px); 
  max-height: calc(100% - 20px); 
  
  /* 고유 비율을 그대로 유지하면서 브라우저가 알아서 핏을 잡도록 auto 지정 */
  width: auto;
  height: auto;
  
  border-radius: 10px;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  
  /* 모바일 기기 스크린에서 텍스트나 경계선이 뭉개지지 않고 쨍하게 보이도록 보정 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;}
  
  
.banner_roll .swiper-slide dd {margin:20px 0 0;}
.banner_roll .swiper-slide dd .fs40 {margin:10px 0;}

.banner_roll .swiper_btn_wrap {width: 100%; top: 0;  justify-content:center; gap:0 5px; position:relative; left:0; transform: translate(0, 0); margin:20px 0 0; height:38px;}
.edu_banner_wrap .swiper-button-prev {transform:translateX(0); margin-left:0;}
.edu_banner_wrap .swiper-button-next {transform:translateX(0); margin-right:0;}

.banner_roll .swiper-slide {width: 100%; transform: scale(0.85);}
.banner_roll .swiper-slide-active {transform: scale(1);}











}