@charset "utf-8";

/* careermooc 전용 로컬 변수 (reset.css 토큰에 없는 값만) */
    :root{
        --header-h:clamp(65px, 10vw, 100px);
        --mv-badge-bg:rgba(255, 255, 255, 0.1);
    }

    #wrap{position: relative; overflow: clip;}
    #container{padding-top: var(--header-h);}
    :where(section[id]){scroll-margin-top: var(--header-h);}
    :where(.all-cate, .close_btn, .mv_nav button, .mv_arw button, .mv_play){background: none; border: 0; padding: 0; color: inherit;}
    .w_custom{position: relative;width: calc(100% - 60px);max-width: 1400px;margin-inline: auto;}
    #wrap [class*="swiper-button"]::after{display: none;}
    main{padding-bottom: var(--row-gap150);}
    #container:has(.full-sec){width:100%; max-width: 100%;}
    #container:has(.pb-dn){padding-bottom: 0;}
	.link{position:absolute; inset:0; z-index:3;}
    .blind{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}
    .ofc{overflow:hidden;}
    .ofc img{width:100% !important;height:100% !important;object-fit:cover !important;}
    .dragscroll{ scrollbar-gutter: stable;}
    .dragscroll::-webkit-scrollbar {width: clamp(3px, 0.6vw, 4px);}
    .dragscroll::-webkit-scrollbar-track {background: #eee; border-radius: 10px;}
    .dragscroll::-webkit-scrollbar-thumb {background: #aaa; border-radius: 10px;}

    @media (max-width:1500px) {
        br.for_pc{display:none;}
    }
    @media (max-width:860px) {
        .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px) {
        .w_custom{width: calc(100% - 20px);}
    }

/*─────────────────────────────────────────────────────────
    Header
─────────────────────────────────────────────────────────*/
    #header{position: fixed;top:0;left: 0;width: 100%;height: var(--header-h);background: var(--point-white);z-index: 100;transition: box-shadow 0.4s;}
    #header.on{box-shadow: 0 1px 0 var(--border-color03);}
    #header .w_custom{width: calc(100% - clamp(30px, 6.25vw, 120px));max-width: 1800px;height: 100%;display: flex;align-items: center;justify-content: space-between;gap: clamp(15px, 2vw, 40px);}
    #header .logo{flex-shrink: 0;height: 58%;max-width: clamp(120px, 8.7vw, 166px);position: relative;z-index: 3;}
    #header .logo a{display: flex;align-items: center;height: 100%;}
    #header .logo img{width: auto;height: 100%;object-fit: contain;}
    #header .gnb_wrap{flex: 1;display: flex;justify-content: center;height: 100%;}
    #header .gnb{height: 100%;display: flex;justify-content: center;align-items: center;gap: clamp(20px, 4.2vw, 80px);text-align: center;}
    #header .gnb > li{position: relative;font-size: var(--text-18);font-weight: 500;color: var(--black-color00);height: 100%;}
    #header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;line-height: 1.3;transition: color 0.3s;}
    #header .utility{display: flex;align-items: center;gap: clamp(15px, 2.1vw, 40px);flex-shrink: 0;}
    #header .hd_btn{display: inline-flex;align-items: center;justify-content: center;min-width: clamp(96px, 7.3vw, 140px);padding: clamp(10px, 1.05vw, 15px) clamp(18px, 1.9vw, 36px);border-radius: var(--radius-100);background: var(--point-color01);color: var(--point-white);font-size: var(--text-20);font-weight: 600;line-height: 1.3;transition: background 0.3s;}
    #header .all-cate{position: relative;display: none;flex-direction: column;justify-content: space-between;width: clamp(35px, 6vw, 60px);aspect-ratio: auto 2.87;}
    #header .all-cate span:not(.blind){width: 100%;height: 3px;background: var(--black-color11);transition: width 0.3s;}
    #header .all-cate span:nth-child(1){align-self: flex-end;width: 50%;background: var(--point-color01);}
    #header .all-cate span:nth-child(3){align-self: flex-start;width: 50%;}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            #header .gnb > li:hover > a{color: var(--point-color01);}
            #header .hd_btn:hover{background: var(--black-color01);}
            #header .all-cate:hover span:not(.blind){width: 100%;}
        }

    @media (max-width:1023px) {
        #header .gnb_wrap{display: none;}
        #header .all-cate{display: flex;aspect-ratio: auto 1.8;}
        #header .all-cate span:not(.blind){height: 2px;}
    }
    @media (max-width:479px) {
        #header .hd_btn{min-width: 0;}
    }

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

	Aside 

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(255,255,255,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);visibility: hidden;}
        #aside.on{opacity: 1;clip-path: inset(0);visibility: visible;}
        body:has(#aside.on){overflow: clip; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;max-width: 1800px;min-height: 100%;display: flex;align-items: center;}
    #aside .w_custom nav{width:100%;}
    #aside .gnb{width: 100%;display: grid;align-items: start;justify-content: center;grid: auto / repeat(3, 1fr);gap: clamp(15px, 2.2vw, 40px);}
    #aside .gnb > li{color: var(--black-color01);font-size: var(--text-20);text-align: center;}
        
        @media (min-width:861px) {
            #aside .gnb > li{opacity:0;translate:0 100px;transition:all 0.8s 0.3s;}
            #aside.on .gnb > li{opacity:1;translate:0;}
            #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{position: relative;display: block;font-size: var(--text-40);font-weight: 700;line-height: 1.4;padding-block: 30px;transition: all 0.4s;letter-spacing: 0;}
        #aside .gnb > li > a:before{position: absolute;content: '';top: 0;left: 50%;translate: -50%;width:12px;height: 0;opacity:0;border-radius:100%;background: var(--point-color01);transition:all 0.3s;}
    #aside .gnb .dep02{position: relative;}
    #aside .gnb .dep02 > li > a{display: block;font-weight: 400;padding-block: clamp(7px, 1.7vw, 13px);color: var(--black-color06);line-height: 1.6;transition: all 0.4s;}
    #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 50px);right: clamp(30px, 2.8vw, 50px);display: flex;align-items: center;gap: clamp(20px, 1.6vw, 30px);z-index:2;}
    #aside .close_btn{position: relative;width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);z-index: 9;}
    #aside .close_btn span:not(.blind){position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 2px;background: var(--black-color01);}
    #aside .close_btn span:not(.blind) + span:not(.blind){transform: translate(-50%, -50%) rotate(-45deg);}
    
        /* over */
            @media (hover:hover) and (pointer:fine){
				#aside .gnb > li:hover > a{color: var(--point-color01);}
                #aside .gnb > li:hover > a:before{height:12px;opacity:1;}
                #aside .gnb .dep02 > li:hover a{color: var(--point-color01);}
            }

    @media (max-width:1400px){
        #aside .gnb{grid: auto / repeat(3, 1fr);}
    }
    @media (max-width:1023px){
        #aside{padding-block: clamp(80px, 12vw, 120px);}
    }
    @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{padding-block: clamp(20px, 3vw, 25px);text-align:left;border-bottom: 1px solid rgba(0,0,0,0.15);}
        #aside .gnb > li > a{padding-block: 0;}
		#aside .gnb > li > a:before{display: none;}
        #aside .gnb .dep02{display: grid;gap: 0 20px;grid-template: auto / repeat(2, 1fr);margin-top: clamp(10px, 1.8vw, 15px);justify-content: flex-start;}
		#aside .utility{top:15px; right: 15px;}
    }
    @media (max-width:479px){
        #aside .gnb .dep02{grid-template: auto / repeat(1, 1fr);}
    }

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

	MAIN VISUAL

───────────────────────────────────────────────────────────*/
    .mv{position: relative;width: calc(100% - clamp(30px, 6.25vw, 120px));max-width: 1800px;height: clamp(420px, 43.75vw, 840px);margin-inline: auto;border-radius: var(--radius-40);overflow: hidden;isolation: isolate;}
    .mv .mv_swiper{width: 100%;height: 100%;}
    .mv_slide{position: relative;overflow: hidden;background: var(--black-color01);}
    .mv_bg{position: absolute;inset: 0;}
    .mv_bg::after{position: absolute;content: '';inset: 0;background: var(--black-op10);}
    .mv::after{position: absolute;content: '';inset: 0;z-index: 2;opacity: 0.5;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40.34%, #000 82.33%);pointer-events: none;}

    /* 슬라이드 위 고정 텍스트 */
    .mv_txt{position: absolute;top: 28.5%;left: 8.33%;z-index: 3;display: flex;flex-direction: column;align-items: flex-start;gap: var(--row-gap40);color: var(--point-white);}
    .mv_badge{display: inline-flex;align-items: center;justify-content: center;padding: clamp(6px, 1vw, 10px) clamp(14px, 1.25vw, 24px);border-radius: var(--radius-50);background: var(--mv-badge-bg);font-size: var(--text-22);font-weight: 500;line-height: 1.6;}
    .mv_txt_in{display: flex;flex-direction: column;align-items: flex-start;gap: var(--row-gap20);}
    .mv_tit{font-family: var(--font-type02);font-size: var(--text-80);font-weight: 700;line-height: 1.3;letter-spacing: 0;}
    .mv_desc{font-family: var(--font-type02);font-size: var(--text-26);font-weight: 400;line-height: 1.6;}

    /* 하단 롤 (페이지네이션 + 컨트롤 + 진행바) */
    .mv_roll{position: absolute;left: 8.33%;right: 8.33%;bottom: 7.5%;z-index: 4;display: flex;flex-direction: column;gap: var(--row-gap20);color: var(--point-white);}
    .mv_roll_cont{display: flex;align-items: center;justify-content: space-between;gap: var(--col-gap30);}
    .mv_nav{display: flex;align-items: center;gap: var(--col-gap60);min-width: 0;}
    .mv_nav button{display: flex;align-items: center;gap: var(--col-gap20);font-size: var(--text-20);text-align: left;opacity: 0.6;transition: opacity 0.3s;}
    .mv_nav em{flex-shrink: 0;font-family: var(--font-type01);font-weight: 500;line-height: 1;}
    .mv_nav span{font-family: var(--font-type02);font-weight: 400;line-height: 1.6;}
    .mv_nav .on button{opacity: 1;}
    .mv_nav .on span{font-weight: 600;}
    .mv_ctrl{display: flex;align-items: center;gap: clamp(15px, 1.45vw, 27px);flex-shrink: 0;}
    .mv_arw{display: flex;align-items: center;gap: clamp(15px, 1.45vw, 27px);}
    .mv_arw button{display: flex;align-items: center;justify-content: center;width: clamp(7px, 0.4vw, 8px);height: clamp(14px, 0.75vw, 15px);}
    .mv_arw img{width: 100%;height: 100%;}
    .mv_play{position: relative;display: flex;align-items: center;justify-content: center;width: clamp(11px, 0.6vw, 12px);height: clamp(14px, 0.75vw, 15px);}
    .mv_play img{width: 100%;height: 100%;}
    .mv_play .ico_play{display: none;width: 100%;height: 100%;background: var(--point-white);clip-path: polygon(0 0, 100% 50%, 0 100%);}
    .mv.paused .mv_play .ico_pause{display: none;}
    .mv.paused .mv_play .ico_play{display: block;}
    .mv_bar{position: relative;width: 100%;height: 2px;background: var(--white-op30);overflow: hidden;}
    .mv_bar_fill{position: absolute;top: 0;left: 0;bottom: 0;width: 0;background: var(--point-white);}

        /* over */
        @media (hover:hover) and (pointer:fine){
            .mv_nav button:hover{opacity: 1;}
            .mv_ctrl button:hover{opacity: 0.6;}
        }

    @media (max-width:1023px){
        .mv_txt{top: auto;bottom: 28%;}
    }
    @media (max-width:860px){
        .mv{height: clamp(420px, 90vw, 560px);}
        .mv_nav li:not(.on){display: none;}
        .mv_nav .on button{opacity: 1;}
    }