@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	header, footer, main 관련 작성 css 파일입니다.

	** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다.

───────────────────────────────────────────────────────────*/
    
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;}
    .main_w_custom, .w_custom{position: relative; width: calc(100% - 60px);margin-inline: auto; box-sizing: border-box;}
	.main_w_custom{width:calc(100% - 120px);}
	.w_custom{max-width:1280px;}
	#container{position: relative; padding-bottom:150px; box-sizing: border-box;}
    #wrap input:where([type="text"], [type="password"]){overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height: normal;}
	.for_m{display: none;}

    
    #wrap label:has([type="checkbox"]){display: flex;align-items: flex-start;line-height: 26px;gap: 10px;cursor: pointer;font-size: var(--title-18);font-weight: 400;color: var(--black-color00);}
    #wrap label:has([type="checkbox"]) em{font-weight: inherit;color: var(--point-color02);display: contents;}
    #wrap label [type="checkbox"]{position: relative;display: block;width: 26px;height: 26px;border: 1px solid var(--border-color01);border-radius: var(--radius-04);background: var(--point-white);flex-shrink: 0;cursor: pointer;transition: all 0.4s;}
    #wrap label [type="checkbox"]:before{position: absolute;content:'';inset: 0;background: url('../images/skin/chk_icon.png') no-repeat center / 14px auto; transition: all 0.4s;}
        #wrap label [type="checkbox"]:checked{background: var(--point-color03); border-color: var(--point-color03);}
        #wrap label [type="checkbox"]:checked:before{filter: var(--filter-white);}

    #wrap .chk_list{display: flex; flex-wrap: wrap; gap:15px 40px;}
    #wrap .chk_list label [type="checkbox"]:not(:checked):before{opacity: 0;}
    

    @media (max-width:1500px){
        .for_pc{display: none;}
		.main_w_custom{width:calc(100% - 60px);}
    }
    @media (max-width:1023px){
        #container{padding-bottom:clamp(100px, 15vw, 150px);}
        .for_pct{display: none;}

        #wrap label:has([type="checkbox"]){line-height: clamp(20px, 3.1vw, 26px);}
        #wrap label [type="checkbox"]{width: clamp(20px, 3.1vw, 26px);height: clamp(20px, 3.1vw, 26px);}
        #wrap label [type="checkbox"]:before{background-size: clamp(10px, 1.9vw, 14px);}
        #wrap .chk_list{gap:clamp(10px, 2vw, 15px) clamp(30px, 4vw, 40px);}
    }
    @media (max-width:860px){
        .main_w_custom, .w_custom{width: calc(100% - 30px);}
    }
	@media (max-width:479px){
		.for_m{display:inline;}
	}
    @media (max-width:320px){
        .main_w_custom, .w_custom{width: calc(100% - 20px);}
    }


/*───────────────────────────────────────────────────────────

    HEADER | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
    #header{position: sticky; top:0; width: 100%; height: 100px; background: var(--point-white); box-shadow: inset 0 -1px 0 var(--border-color01); z-index: 100; transition: all 0.4s;}
    #header .w_custom{max-width: 1720px;height: 100%;display: flex;align-items: center;justify-content: space-between;gap:30px;}
    #header .logo{font-size: 0; height: 100%;position: relative;z-index:3;}
    #header .logo a{display: flex;align-items: center;max-width: 220px;height: 100%;padding-block: 15px;}
    #header .gnb{position: absolute;top:0;left:50%;translate: -50%;width: calc(100% - 420px);height: 100%;display: flex;justify-content: center;text-align: center;font-size: var(--title-20);font-family: var(--font-type02);}
    #header .gnb li{position: relative; transition: all 0.4s;}
    #header .gnb a{position:relative; display: block;}
    #header .gnb > li{height: 100%; font-size: 90%; font-weight: 500; color: var(--black-color01);}
    #header .gnb > li > a{height: 100%; display: flex; align-items: center; justify-content: center; padding-inline: clamp(15px, 1.9vw, 35px);}
	#header .gnb > li:not(:last-child) .dep02{display: none;}
    #header .gnb .dep02{position: absolute;top:80%;left:50%;translate: -50%;padding-block: 15px;width: 200px;font-size: 95%;background: var(--point-color01);border-radius: var(--radius-10);opacity: 0;pointer-events: none;transition: all 0.4s;}
    #header .gnb .dep02 > li > a{padding: 10px 25px;filter: var(--filter-white);}
    #header .utility{display: flex; align-items: center; gap: 30px;position: relative;z-index: ;}
	#header .more_arw{display:none;}
    #header .allCate{display: flex;flex-direction: column;justify-content: space-between;width: 30px;aspect-ratio: auto 1.25;}
	#header .allCate span{width:100%;height:2px;background: var(--black-color00);}

        /* 메인 */
            .main_index #header{position: fixed; left: 0; background: var(--trans-color);}
            .main_index #header:not(.on){box-shadow: none;}
            .main_index #header :where(.logo, #header .gnb > li > a, .more_arw, .allCate){filter: var(--filter-white); transition: all 0.4s;}

        /* on */
            .main_index #header.on{background: var(--point-white);}
            .main_index #header.on :where(.logo, #header .gnb > li > a, .more_arw, .allCate){filter: none;}

        /* over */
            @media (hover:hover) and (pointer:fine) {
				.main_index #header:hover{background: var(--point-white);}
				.main_index #header:hover :where(.logo, #header .gnb > li > a, .more_arw, .allCate){filter: none;}
                #header .gnb > li:hover{color: var(--point-color01);}
                #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
                #header .gnb .dep02:has(> li:hover) > li:not(:hover){opacity: 0.6;}
            }

	@media (max-width:1300px) {
		#header .gnb{width:100%;}
	}
    @media (max-width:1200px) {
        #header .gnb > li{font-size: clamp(15px, 1.45vw, 18px);}
        #header .gnb > li > a{padding-inline: clamp(5px, 1.3vw, 15px);}
    }
    @media (max-width:1023px) {
        #header{height: clamp(65px, 10vw, 100px);}
        #header .logo a{max-width: clamp(140px, 23vw, 220px);}
        #header .gnb{display: none;}
		#header .utility{gap:clamp(15px, 3vw, 30px);}
		#header .more_arw{display:flex;}
        #header .allCate{width: clamp(25px, 3.5vw, 30px);}
    }

/*───────────────────────────────────────────────────────────

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(0,0,0,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding-block: 10vh;box-sizing: border-box;opacity: 0;transition: all 0.6s;clip-path: inset(0 0 100% 0);}
        #aside.on{opacity: 1;clip-path: inset(0);}
    body:has(#aside.on){overflow: clip; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;max-width: 1720px;min-height: 100%;display: flex;align-items: center;}
    #aside .gnb{width: 100%;font-size: var(--title-20);letter-spacing: 0;display: grid;align-items: start;justify-content: center;grid-template: auto / repeat(4, 1fr);gap: clamp(15px, 2.2vw, 40px);}
    #aside .gnb > li{color: var(--point-white);font-size: inherit;text-align: center;opacity:0;transform:translateY(100px);transition:all 0.8s;}
        #aside.on .gnb > li{opacity:1;transform:translateY(0);}
        #aside.on .gnb > li:nth-child(1){transition-delay:0.3s;}
        #aside.on .gnb > li:nth-child(2){transition-delay:0.4s;}
        #aside.on .gnb > li:nth-child(3){transition-delay:0.5s;}
        #aside.on .gnb > li:nth-child(4){transition-delay:0.6s;}
        #aside.on .gnb > li:nth-child(5){transition-delay:0.7s;}
        #aside.on .gnb > li:nth-child(6){transition-delay:0.8s;}
    #aside .gnb > li > a{display: flex;flex-direction: column;gap: 20px;font-size: 180%;color:inherit;font-weight: 700;line-height: 1.2;padding: 30px 0;transition: all 0.4s;position: relative;}
        #aside .gnb > li > a:before{width:12px;height:0;opacity:0;content:"";box-sizing:border-box;border-radius:100%;background: var(--point-color03);position: absolute;left:50%;top:0;transform:translate(-50%);transition:all 0.3s;}
    #aside .gnb > li > a em{font-weight: inherit;}
    #aside .gnb > li > a span{font-size: 60%;font-weight: 400;color: rgba(255,255,255,0.6);}
	#aside .gnb > li:not(:last-child) .dep02{display: none;}
    #aside .gnb .dep02{margin-top:8px;}
    #aside .gnb .dep02 > li{font-size:var(--title-20);}
    #aside .gnb .dep02 > li > a{display: inline-block;font-size:110%;font-weight:400;padding: 15px 0;transition: all 0.4s;color: var(--black-color08);}
    #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 50px);right: clamp(30px, 2.8vw, 50px);display: flex;align-items: center;gap: 30px; z-index:2;}
    #aside .lang_desc dt{filter: var(--filter-white);}
    #aside .close_btn{position: relative;width: 40px;height: 40px;z-index: 9;}
    #aside .close_btn span{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 2px; background: var(--point-white);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}
    
        /* over */
            @media (hover:hover) and (pointer:fine){
                #aside .gnb > li:hover > a:before{height:12px;opacity:1;}
                #aside .gnb .dep02 > li:hover a{color:var(--point-white);}
            }

    @media (max-width:1600px){
        #aside .gnb{grid-template: auto / repeat(3, 1fr)}
    }
    @media (max-width:1023px){
        #aside{padding-block: clamp(80px, 12vw, 120px);}
        #aside .close_btn{width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);}
		#aside .utility{gap:20px;}
    }
    @media (max-width:860px){
		#aside{display: block;}
		#aside .w_custom{align-items:flex-start;}
		#aside .gnb{grid-template: auto / repeat(1, 1fr);gap:0;}
        #aside .gnb > li{display: block;padding: 25px 0;width:100%;text-align:left;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,0.5);}
        #aside .gnb > li > a{width: 100%;padding:0;flex-direction: row;flex-wrap: wrap;align-items: center;gap: 10px 20px;}
		#aside .gnb > li > a:before{display: none;}
        #aside .gnb .dep02{display: flex;flex-wrap:wrap;margin-top: 15px;justify-content: flex-start;gap:0 12px;}
		#aside .gnb .dep02 li{width:calc(100% / 3 - 8px);}
		#aside .gnb .dep02 > li > a{padding:12px 0;}
		#aside .utility{top:15px; right: 15px; }
    }
    @media (max-width:640px){
        #aside .gnb > li > a{font-size: 200%;}
		#aside .gnb .dep02 li{width:calc(50% - 6px);}
        #aside .gnb .dep02 > li > a{padding:7px 0;font-size:100%;}
        #aside .gnb .dep02 > li:not(:last-child):after{margin:0 15px;}
    }
    @media (max-width:479px){
        #aside .gnb > li > a{font-size: 170%;}
        #aside .gnb > li > a span{width: 100%;}
        #aside .gnb .dep02{margin-top: 10px;}
        #aside .gnb .dep02 li{width: 100%;}
        #aside .gnb .dep02 > li > a{font-size: 95%;}
    }


/*───────────────────────────────────────────────────────────

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .main_visual {position:relative;width:100%;background:var(--black-color00);color: var(--point-white);}
        .main_visual .slick-slide {position:relative; height: 100vh;}
        .main_visual .link{position: absolute;inset: 0;z-index: 5;}
        .main_visual .thumb{position: absolute; inset: 0; background: no-repeat center / cover;}
            .main_visual .active .thumb{scale: 1.05; transition: all 5s 0.2s;}
        .main_visual .txt_box{position: relative;max-width: 1720px;font-size: var(--title-20);z-index: 2;height: 100%;display: flex;justify-content: center;flex-direction: column;gap: 38px;text-wrap: balance;}
        .main_visual .txt_box h2{font-size: 80px;font-weight: 300;line-height: 1.25;letter-spacing: 0;}
        .main_visual .txt_box h2 strong{font-weight: 800;}
        .main_visual .txt_box h6{font-size: 120%;font-weight: 500;line-height: 1.35;letter-spacing: -0.03em;}
        .main_visual .txtAni{translate:0 70px; opacity: 0; }
        .main_visual .active .txtAni{translate: 0; opacity: 1; transition: all 1.2s 0.2s;}
        .main_visual .active .txtAni:nth-child(2){transition-delay:0.4s;}
        .main_visual .controller{position: absolute;left:50%;bottom:47px;translate: -50%;z-index: 3;display: flex;justify-content: center;pointer-events: none;}
        .main_visual .scr_dwn{display: flex;flex-direction: column;align-items: center;gap: 10px;font-size: var(--title-20);color: var(--point-white);pointer-events: all;cursor: pointer;}
        .main_visual .scr_dwn dt{font-size: max(12px, 70%);font-weight: 200;letter-spacing: 0.02em;}
        .main_visual .scr_dwn dd{position: relative;width: 24px;aspect-ratio: auto 0.6;box-shadow: inset 0 0 0 1px var(--point-white);border-radius: 50px;}
            .main_visual .scr_dwn dd:before{position: absolute;content:'';top: 6px;left:50%;translate: -50%;width: 25%;aspect-ratio: auto 1;border-radius: 100%;background: var(--point-white);}
            .main_visual .scr_dwn dd:before{animation-name: scrDwn; animation-duration:1s; animation-iteration-count:infinite; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
            @keyframes scrDwn {0% {top:6px;}100% {top: calc(100% - 12px);}}

	.main_visual .video_box{position: relative;height:100vh;overflow:hidden;}
	.main_visual .video{position: absolute;top:50%;left:50%;translate: -50% -50%;width: 105%;height:132%;pointer-events: none;} 
	.main_visual .video.ver_m{display: none;}

		@media (max-width:1250px) {
			.main_visual .video_box{height:63vw;}
			.main_visual .video{width:115%;}
		}
        @media (max-width:1023px) {
            .main_visual .txt_box{gap: clamp(20px, 3.8vw, 38px);}
            .main_visual .txt_box h2{font-size: clamp(32px, 8vw, 80px);}
            .main_visual .controller{bottom: clamp(15px, 4.7vw, 47px);}
            .main_visual .scr_dwn{gap: clamp(7px, 1.5vw, 15px);}
            .main_visual .scr_dwn dd{width: clamp(20px, 2.9vw, 24px);}
        }
		@media (max-width:860px) {
			.main_visual .video_box{height:75vw;}
			.main_visual .video{width:140%;}
		}
        @media (max-width:640px) {
			.main_visual .video_box{height:150vw;}
			.main_visual .video{width:100%;height:160%;}
            .main_visual .txt_box h6{font-size: 110%;}
			
			.main_visual .video.ver_m{display:block;}
			.main_visual .video.ver_pc{display: none;}
        }
        @media (max-width:479px) {
			.main_visual .video_box{height:100vh;}
			.main_visual .video{width:160%;height:105%;}
            .main_visual .txt_box h6{font-size: 100%;}
        }
		@media (max-width:431px) {
            .main_visual .txt_box h6{font-size: 85%;}
        }
		@media (max-width:330px) {
			.main_visual .video{width:160%;}
		}
		@media (max-width:300px) {
			.main_visual .video{width:180%;}
		}

    /* 공통 */
        .main_title{position: relative;display: flex;flex-direction: column;align-items: center;gap:31px;font-size: var(--title-20);text-align: center;text-wrap: balance;}
            .main_title.pdT{padding-top: 116px;}
            .main_title.mgB{margin-bottom: 54px;}
            .main_title.mgB_M{margin-bottom: 37px;}
            .main_title.mgB_L{margin-bottom: 77px;}
            .main_title.left{align-items: flex-start; text-align: left;}
        .main_title h2{font-size: 300%;font-weight: 700;color: var(--black-color00);line-height: 1.15;letter-spacing: -0.03em;}
			.main_title h2 + h6{margin-top: 6px;}
        .main_title h3{font-size: 200%;font-weight: 600;color: var(--black-color01);line-height: 1.2;letter-spacing: -0.03em;}
        .main_title h4{font-size: 150%; font-weight: 600; color: var(--black-color01); line-height: 1.25;}
        .main_title h5{font-size: 120%; font-weight: 400; color: var(--black-color01); line-height: 1.3;}
        .main_title h5 em{font-weight: inherit;color: var(--point-color01);letter-spacing: 0;}
        .main_title h6{font-size: 110%;font-weight: 400;color: var(--black-color06);line-height: 1.46;letter-spacing: -0.03em;}
        .main_title p{font-size: inherit;font-weight: 500;color: var(--black-color05);line-height: 1.5;letter-spacing: -0.03em;}
		.main_title .more_arw{margin-top: 50px;}

            @media (max-width:1023px) {
                .main_title{gap: clamp(15px, 3.1vw, 31px);}
                    .main_title.pdT{padding-top: clamp(80px, 11.6vw, 116px);}
                    .main_title.mgB{margin-bottom: clamp(30px, 5.4vw, 54px);}
                    .main_title.mgB_M{margin-bottom: clamp(20px, 3.7vw, 37px);}
                    .main_title.mgB_L{margin-bottom: clamp(40px, 7.7vw, 77px);}
                .main_title h2{font-size: 270%;}
                .main_title h3{font-size: 190%;}
                .main_title .more_arw{margin-top: clamp(25px, 5vw, 50px);}
            }
            @media (max-width:640px) {
                .main_title h2{font-size: 240%;}
                .main_title h3{font-size: 180%;}
                .main_title h4{font-size: 140%;}
                .main_title h5{font-size: 110%;}
				.main_title h6{font-size:100%;}
            }
            @media (max-width:479px) {
                .main_title h2{font-size: 210%;}
                .main_title h3{font-size: 170%;}
                .main_title h4{font-size: 130%;}
                .main_title h5{font-size: 100%;}
				.main_title h6{font-size:95%;}
				.main_title p{font-size:90%;}
            }

        .more_arw{position: relative;font-size: var(--title-20);display: flex;align-items: center;justify-content: space-between;gap: 20px;border: 1px solid var(--border-color01);border-radius: var(--radius-10);min-width: 220px;padding: 17px 30px;transition: all 0.4s;}
        .more_arw span{font-size: 90%; font-weight: 500; color: var(--black-color01); transition: inherit;}
        .more_arw:after{display: inline-flex;content:'';width: 15px;aspect-ratio: auto 1.07;background: url('../images/skin/more_arw.svg') no-repeat center / 100% auto; transition: inherit;}
            .more_arw.bg{border-color: var(--point-color03); background: var(--point-color03);}
            .more_arw.bg:after, .more_arw.bg span{filter: var(--filter-white);}
            .more_arw.cen{justify-content: center;}
            .more_arw.wh{border-color: rgba(221, 221, 221, 0.5);}
            .more_arw.wh:after, .more_arw.wh span{filter: var(--filter-white);}
            .more_arw.lg{min-width: 300px;}
            .more_arw.sm{min-width: 180px;padding: 11px 25px 10px; gap: 13px;}
            .more_arw.sm span{font-size: max(14px, 80%);}
            .more_arw.sm:after{width: 14px;}
            

            /* over */
                @media (hover:hover) and (pointer:fine) {
                    .more_arw:hover{background: var(--point-color01); border-color: var(--point-color01);}
                    .more_arw:hover:after, .more_arw:hover span{filter: var(--filter-white);}
                }

            @media (max-width:1023px) {
                .more_arw{min-width: clamp(160px, 22vw, 220px);padding: clamp(13px, 2.2vw, 17px) clamp(20px, 3vw, 30px);}
                .more_arw:after{width: clamp(13px, 2vw, 15px);}
                .more_arw.lg{min-width: clamp(200px, 30vw, 300px);}
                .more_arw.sm{min-width: clamp(120px, 18vw, 180px);padding: clamp(8px, 1.6vw, 11px) clamp(20px, 2.6vw, 25px) clamp(8px, 1.5vw, 10px);}
            }

        .grBg{background: var(--gray-bg01);}

        .gap_wrap{display: grid;gap: 95px;}

        .no_data{font-size: var(--title-18); font-weight: 400; color: var(--black-color06); text-align: center; padding-block: 50px;}

        @media (max-width:1023px) {
            .gap_wrap{gap: clamp(60px, 9.5vw, 95px);}
        }

    /* 인트로 */
        .main_intro{padding-block: 240px 273px;}
        .main_intro .w_custom{display: grid; gap: 29px;}
        .main_intro .logo{font-size: 0;display: flex;margin-inline: auto;width: 55%;max-width: 298px;margin-bottom: 29px; opacity: 0; scale: 2;}
            .main_intro .aos-animate .logo{opacity: 1; scale: 1; transition: all 1.8s;}
        .main_intro .main_title{opacity: 0; translate: 0 70px;}
            .main_intro .aos-animate .main_title{opacity: 1; translate: 0; transition: all 1.8s 0.4s;}

        @media (max-width:1023px){
            .main_intro{padding-block: clamp(80px, 24vw, 240px) clamp(80px, 27vw, 273px);}
            .main_intro .w_custom{gap: clamp(15px, 3vw, 29px);}
            .main_intro .logo{margin-bottom: clamp(15px, 2.9vw, 29px);}
        }

    /* 차별화된 서비스 */
        .main_services{padding-block: 20px 165px;}
        .main_services .w_custom{max-width: 1800px;}
        .main_services .differ_list{display: grid; grid-template: auto / repeat(4, 1fr); gap:60px clamp(15px, 1.5vw, 27px);}
        .main_services .differ_list > li{position: relative;display: flex;flex-direction: column;gap: 27px;}
        .main_services .differ_list .link{position: absolute; inset: 0; z-index: 3;}
        .main_services .differ_list .thumb{position: relative;display: block;width: 100%;aspect-ratio: auto 0.747;border-radius: var(--radius-20);overflow: hidden;}
        .main_services .differ_list .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .main_services .differ_list .desc{font-size: var(--title-20);display: grid;gap: 17px; text-wrap: balance;}
        .main_services .differ_list .desc dt{font-size: 120%;font-weight: 500;color: var(--black-color00);line-height: 1.3;letter-spacing: 0; transition: all 0.4s;}
        .main_services .differ_list .desc dd{font-size: 80%; font-weight: 400; color: var(--black-color06); line-height: 1.5;}

            /* over */
                @media (hover:hover) and (pointer:fine) {
                    .main_services .differ_list > li:hover .thumb img{scale: 1.08;}
                    .main_services .differ_list > li:hover .desc dt{color: var(--point-color01);}
                }

        @media (max-width:1023px) {
            .main_services{padding-block: clamp(0px, 2vw, 20px) clamp(80px, 16.5vw, 165px); }
            .main_services .differ_list{grid-template:auto / repeat(2, 1fr);row-gap: clamp(35px, 6vw, 60px);}
            .main_services .differ_list > li{gap: clamp(18px, 2.7vw, 27px);}
            .main_services .differ_list .desc{gap: clamp(10px, 1.7vw, 17px);}
        }
        @media (max-width:479px) {
            .main_services .differ_list .desc dt{font-size: 110%;}
        }
        @media (max-width:360px) {
            .main_services .differ_list{grid-template:auto / repeat(1, 1fr);}
        }

    /* 레슨 프로그램 */
		.main_lesson .w_custom{max-width: 1600px;}
        .main_lesson .prog_list{display: flex; border-radius: var(--radius-30); overflow: hidden;}
        .main_lesson .prog_list > li{position: relative;width: 100%;min-height: 700px;font-size: var(--title-20);color: var(--point-white);transition: all 0.4s;}
            .main_lesson .prog_list > li.on{width: 170%;}
        .main_lesson .prog_list .link{position: absolute; inset: 0; z-index: 3;}
        .main_lesson .prog_list .link:before{position: absolute;content:attr(title);inset: 0;font-size: 160%;font-weight: 500;padding: clamp(50px, 3.9vw, 73px) 20px;translate: 0 2px;display: flex;flex-direction: column;justify-content: flex-end;text-align: center;letter-spacing: -0.03em;}
            .main_lesson .prog_list > li.on .link:before{opacity: 0;}
        .main_lesson .prog_list .thumb{position: absolute;inset: 0;overflow: hidden;}
        .main_lesson .prog_list .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .main_lesson .prog_list .desc{position: relative;inset: 0;width: 170%;height: 100%;padding: clamp(50px, 3.9vw, 73px) clamp(40px, 2.7vw, 50px);display: flex;flex-direction: column;justify-content: flex-end;gap: 23px;opacity: 0;transition: width 0.4s;}
            .main_lesson .prog_list > li.on .desc{opacity: 1;width: 100%;}
        .main_lesson .prog_list .desc dt{font-size: 200%;font-weight: 700;line-height: 1.25;letter-spacing: -0.03em;}
        .main_lesson .prog_list .desc dd{font-size: inherit;font-weight: 300;line-height: 1.45;font-family: var(--font-type03);letter-spacing: 0.01em;}
        
        @media (max-width:1023px) {
            .main_lesson .prog_list{display: grid; grid-template: auto / repeat(2, 1fr);}
            .main_lesson .prog_list > li{min-height: clamp(360px, 70vw, 700px);}
            .main_lesson .prog_list > :is(li, li.on){width: auto;}
            .main_lesson .prog_list .link:before{display: none;}
            .main_lesson .prog_list .desc{opacity: 1;width: 100%;gap: clamp(15px, 2.3vw, 23px); padding:clamp(35px, 5vw, 50px) clamp(30px, 4vw, 40px);}
            .main_lesson .prog_list .desc dt{font-size: 190%;}
        }
        @media (max-width:640px) {
            .main_lesson .prog_list .desc dt{font-size: 180%;}
        }
        @media (max-width:479px) {
            .main_lesson .prog_list{grid-template: auto / repeat(1, 1fr);}
            .main_lesson .prog_list .desc dt{font-size: 170%;}
            .main_lesson .prog_list .desc dd{font-size: 90%;}
        }

    /* Our Instrucktors */
        .main_inst{padding-block: 40px 160px;background: var(--point-white) url('../images/skin/main_inst.jpg') no-repeat left bottom / 100% auto;}
        .our_list{position: relative;display: grid;justify-items: center;}
        .our_list > li{position: relative;display: flex;align-items: flex-start;justify-content: center;gap: clamp(40px, 3.2vw, 60px);width: 75%;max-width: 930px;background: var(--point-white);}
        .our_list .link{position: absolute; inset: 0; z-index: 3; }
        .our_list .thumb{display: block;width: 100%;max-width: 540px;aspect-ratio: auto 0.826;border-radius: var(--radius-20);overflow: hidden;}
        .our_list .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .our_list .main_title{width: 100%;max-width: 320px;padding-top: 77px;gap: 24px;}
        .our_list .main_title :where(h4, h5){transition: all 0.4s;}
        .our_list .cont{display: grid;gap: 10px;}
        .our_list .desc{display: flex;align-items: baseline;gap: 4px;font-size: inherit;font-weight: 500;color: var(--black-color01);line-height: 1.5;letter-spacing: -0.03em;}
        .our_list .desc dt{flex-shrink: 0; max-width: 120px;}

            .our_list.type02{display: flex;justify-content: center;gap: clamp(15px, 2.7vw, 50px);justify-content: center;}
            .our_list.type02 > li{width: calc(100% / 3 - clamp(15px, 2.7vw, 50px));max-width: 100%;border: 1px solid var(--border-color01);border-radius: var(--radius-20);flex-direction: column;padding: clamp(15px, 1.2vw, 20px);gap: 17px;}
            .our_list.type02 .thumb{max-width: 100%;}
            .our_list.type02 .main_title{max-width: 100%;padding: 0 20px 27px;gap: 16px;}
			.our_list.type02 .main_title h5{font-weight: 600;}
            .our_list.type02 .cont{gap: 3px;}
            .our_list.type02 .desc{font-size: 90%; font-weight: 400; color: rgba(102, 102, 102, 0.9);}

            /* over */
                @media (hover:hover) and (pointer:fine) {
                    .our_list > li:hover .thumb img{scale: 1.05;}
                    .our_list > li:hover .main_title :where(h4, h5){color: var(--point-color01);}
                }


        @media (max-width:1023px) {
            .main_inst{padding-block: clamp(0px, 4vw, 40px) clamp(80px, 16vw, 160px);}
            .our_list > li{flex-direction:column;width: 100%;max-width: 430px;gap: clamp(25px, 4vw, 40px);}
            .our_list .main_title{padding-top: 0;max-width: 100%;gap: clamp(13px, 2.4vw, 24px);}
			.our_list .cont{gap:clamp(7px, 1vw, 10px);}
                .our_list.type02 .main_title{padding: 0 clamp(10px, 2vw, 20px) clamp(15px, 2.7vw, 27px);gap: clamp(10px, 1.6vw, 16px);}
        }
        @media (max-width:860px) {
            .our_list.type02{display:grid; grid-template:auto / repeat(2, 1fr);}
			.our_list.type02 > li{width:auto;}
        }
        @media (max-width:640px) {
        }
        @media (max-width:479px) {
            .our_list .desc{font-size: 90%;}
        }
        @media (max-width:431px) {
            .our_list.type02{grid-template:auto / repeat(1, 1fr);}
        }

    /* 파트너 */
        .main_partner{padding-bottom: 160px;}
        .main_partner .logo_list{display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;}
        .main_partner .logo_list > li{position: relative;border-radius: var(--radius-10);aspect-ratio: auto 2.34;width: calc(100% / 5 - 24px);}
        .main_partner .logo_list > li:before{position: absolute; content:''; inset: 0; border: 1px solid var(--border-color01); border-radius: inherit; pointer-events: none;}

        @media (max-width:1023px) {
            .main_partner{padding-bottom: clamp(80px, 16vw, 160px);}
			.main_partner .logo_list{gap: 15px;}
			.main_partner .logo_list > li{width:calc(100% / 5 - 12px);}
        }
        @media (max-width:860px) {
			.main_partner .logo_list > li{width:calc(100% / 3 - 10px);}
        }
        @media (max-width:479px) {
			.main_partner .logo_list > li{width:calc(100% / 2 - 5px);}
        }
        @media (max-width:360px) {
            .main_partner .logo_list{gap: 10px;}
        }

    /* 레슨 문의 */
        .main_contact{background: url('../images/skin/main_contact.jpg') no-repeat center / cover; padding-bottom: 128px;}
        .main_contact .w_custom{max-width: 1200px;}
        .main_contact .main_title :where(h2, h5, h3){filter: var(--filter-white);}
        .main_contact .main_title:has(.more_arw){padding-inline: 220px;}
        .main_contact .main_title .more_arw{position: absolute;right: 0;bottom: 0;margin:0;}

        #wrap .board_write{position: relative; display: block; width: 100%; text-align: left; font-size: var(--title-20);}
        #wrap .board_write :where{display: block; width: 100%;}
        #wrap .board_write tbody{display: flex; gap: clamp(15px, 1.2vw, 20px); flex-wrap: wrap;}
        #wrap .board_write tr{display: flex;align-items: center;width: calc(100% / 2 - clamp(15px, 1.2vw, 20px) / 2);background: var(--point-white);padding: 14px 30px;border-radius: var(--radius-05);min-height: 68px;gap: 12px 0;}
            /* #wrap .board_write tr:has(.chk_list, #captcha){width: 100%;} */
        #wrap .board_write th{width: 160px;flex-shrink: 0;font-size: 110%;font-weight: 500;color: var(--black-color03);padding-right: 15px;}
        #wrap .board_write th label{display: block; width: 100%;}
        #wrap .board_write th em{font-weight: inherit; color: var(--point-color02);}
        #wrap .board_write td{width: 100%; font-size: 90%; font-weight: 400; color: var(--black-color00);}
        #wrap .board_write input:where([type="text"], [type="password"]){width: 100%;height: 40px;border:0;padding-inline: 15px;font-size: inherit;font-weight: inherit;color: inherit;}
        #wrap .board_write td:has(.cap_wrap){display: flex;gap: 10px;}
        #wrap .board_write .cap_wrap{display: flex;gap: 10px;flex-shrink: 0;}
        #wrap .board_write #captcha_box{width: 180px;height: 40px;overflow: hidden;border-radius: var(--radius-04);}
        #wrap .board_write #captcha_box img{width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;max-width: none;max-height:none;margin: -1px 0 0 -1px;}
        #wrap .board_write #refreshCode{width: 40px;height: 40px;font-size: 0;background: var(--black-color08) url('../images/skin/refreshCode.svg') no-repeat center;border-radius: var(--radius-04); cursor: pointer;}
        #wrap .policy_cont{display: flex;align-items: center;justify-content: space-between;gap: 15px 30px;flex-wrap: wrap;margin-top: 30px;color: var(--point-white); font-size: var(--title-20);}
        #wrap .policy_cont label:has([type="checkbox"]){color: inherit;}
        #wrap .policy_cont a{font-size: max(12px, 70%);font-weight: 200;color: rgba(255,255,255,0.8);text-decoration: underline;text-underline-offset: 3px;text-decoration-color: rgba(255,255,255,0.6);}
        #wrap .btn_wrap{position: relative;display: flex;justify-content: center;flex-wrap: wrap;gap: 15px;margin: 50px 0 0;padding: 0;}

		@media (max-width:1200px) {
			#wrap .board_write tr:has(.chk_list, #captcha){width: 100%;}
		}
        @media (max-width:1023px) {
            .main_contact{padding-bottom: clamp(80px, 12.8vw, 128px);}
            
            #wrap .board_write tr{width: 100%; padding-inline:clamp(20px, 3vw, 30px);}
            #wrap .policy_cont{margin-top: clamp(20px, 3vw, 30px);}
            #wrap .btn_wrap{margin-top: clamp(35px, 5vw, 50px);}
        }
        @media (max-width:860px) {
            .main_contact .main_title:has(.more_arw){padding-inline: 0;}
            .main_contact .main_title .more_arw{position: relative; inset: auto;}
        }
        @media (max-width:640px) {
            #wrap .board_write th{width: 140px;}
            #wrap .board_write td:has(.cap_wrap){flex-wrap: wrap;}
            #wrap .board_write #captcha_box{width: 160px;height: 35px;}
            #wrap .board_write #refreshCode{width: 35px;height: 35px;background-size: 13px auto;}
        }
        @media (max-width:479px) {
            #wrap .board_write tr{flex-wrap: wrap;min-height: auto;}
            #wrap .board_write th{width: 100%; padding-right: 0; flex-shrink: unset; font-size: 100%;}
            #wrap .board_write input:where([type="text"], [type="password"]){height: 30px;}
        }

/*───────────────────────────────────────────────────────────

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative;background: var(--black-color12);color: rgba(255,255,255,0.6);line-height: 1.6;padding-block: 60px 55px;}
    #footer .let_0{letter-spacing: 0;}
    #footer .w_custom{max-width: 1600px;display: grid;gap: 66px;}
    #footer .flex_cont{display: flex;align-items: flex-start;gap: 35px clamp(50px, 10.8vw, 207px);}
    #footer .info{display: flex;align-items: flex-start;flex-wrap: wrap;gap: 10px clamp(50px, 6.25vw, 120px);flex-shrink: 0;}
    #footer .info .item{display: flex;flex-direction: column;gap: 27px;}
    #footer .logo{font-size: 0; max-width: 220px; filter: var(--filter-white);}
    #footer .link_list{display: flex; flex-wrap: wrap; gap: 10px 40px; font-size: var(--title-20);}
    #footer .link_list > li{font-size: max(12px, 70%);font-weight: 400;color: var(--black-color10);letter-spacing: 0;font-family: var(--font-type02);}
    #footer .link_list strong{font-weight: 500;}
    #footer .sns_list{display: flex;align-items: center;flex-wrap: wrap;gap:15px 30px;padding-top: 15px;}
    #footer .sns_list a{display: flex; align-items: center; justify-content: center; width: 30px;}
    #footer .addr_list{display: flex;flex-wrap: wrap;gap: 12px clamp(40px, 2.9vw, 54px);font-size: var(--title-20);} 
    #footer .addr_list > li{display: grid;gap: 12px;font-size: max(13px, 80%);font-weight: 300;}
    #footer .addr_list .desc{display: flex; align-items: baseline; }
    #footer .addr_list .desc dt{width: 120px; padding-right: 15px; flex-shrink: 0;color: var(--point-white);}
    #footer .copy{font-size: var(--title-20);display: flex;gap: 5px 20px;opacity: 0.4;flex-wrap: wrap;}
    #footer .copy :where(dt, dd){font-size: max(12px, 70%);font-weight: 200;font-family: var(--font-type04);letter-spacing: 0;}

    @media (max-width:1023px) {
        #footer{padding-block: clamp(40px, 6vw, 60px) clamp(40px, 5.5vw, 55px);}
        #footer .w_custom{gap: clamp(40px, 6.6vw, 66px);}
        #footer .flex_cont{flex-wrap: wrap;gap: clamp(30px, 3.5vw, 35px);}
        #footer .info{width: 100%;flex-shrink: unset;}
        #footer .info .item{gap: clamp(22px, 2.7vw, 27px);}
        #footer .logo{max-width: clamp(140px, 22vw, 220px);}
        #footer .link_list{column-gap: clamp(25px, 4vw, 40px); padding-top: clamp(15px, 1.5vw, 15px);}
        #footer .sns_list{column-gap: clamp(25px, 3vw, 30px);}
        #footer .sns_list a{width: clamp(22px, 3vw, 30px);}
        #footer .addr_list{row-gap: clamp(8px, 1.7vw, 12px);}
        #footer .addr_list > li{gap: clamp(8px, 1.7vw, 12px);}
        #footer .addr_list .desc dt{width: clamp(110px, 12vw, 120px);}
    }
    @media (max-width:479px) {
        #footer .addr_list .desc dt{width: 100px;}
    }

    .quick_list{position: fixed;right: 20px;bottom: 40px;z-index: 10;display: grid;gap: 10px; opacity: 0; pointer-events: none; transition: all 0.4s;}
        body:has(#header.on:not(.end)) .quick_list{opacity: 1; pointer-events: all;}
    .quick_list a{display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--point-grad01); padding:12px; border-radius: 100%;}
    .quick_list .scr_top{background: var(--point-white); box-shadow: var(--shadow-01);}

    @media (max-width:1023px) {
        .quick_list{bottom: clamp(20px, 4vw, 40px);}
		.quick_list > li:not(:has(.scr_top)){display:none;}
        .quick_list a{width: clamp(40px, 8vw ,80px); height: clamp(40px, 8vw ,80px);}
    }
    @media (max-width:860px) {
        .quick_list{right:15px;}
    }