@charset "utf-8";

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

    /* 메뉴(#header .gnb / #aside .gnb) 앵커 이동 : 부드럽게 + 고정헤더 높이만큼 띄우고 정지 */
    html{scroll-behavior: smooth;scroll-padding-top: var(--header-h);}
    @media (prefers-reduced-motion: reduce){
        html{scroll-behavior: auto;}
    }

    #wrap{position: relative; overflow: clip;}
    #container{padding-top: var(--header-h);}
    :where(.all-cate, .close_btn, .mv_nav button, .mv_arw button, .mv_play, .pf_tab button, .ft_menu button){background: none; border: 0; padding: 0; color: inherit;}
    .w_custom{position: relative;width: calc(100% - 60px);max-width: 1500px;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;}
    .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);}
    }
    
    .db-policy-modal{width:calc(100% - 60px);max-width:600px;background:var(--point-white);padding:var(--row-gap30);}
    .db-policy-header{margin-bottom:var(--row-gap20);display: flex;align-items: center;justify-content: space-between;}
    .db-policy-header .db-policy-title{font-size:var(--text-22);color:var(--black-color00);font-weight:600;}
    .db-policy-header .db-policy-close{width:20px;aspect-ratio:auto 1;position: relative;font-size:0;}
    .db-policy-header .db-policy-close{&::before, &::after{width:100%;height:2px;content:"";background:var(--black-color03);position: absolute;top:50%;left:0;rotate:45deg;}}
    .db-policy-header .db-policy-close:after{rotate:-45deg;}
    #wrap .db-policy-body{font-family:var(--font-type01);max-height:460px;overflow-y:auto;background:var(--gray-bg01);padding:var(--row-gap20);}
    #wrap .db-policy-body::-webkit-scrollbar{width: 3px;background:transparent;}
    #wrap .db-policy-body::-webkit-scrollbar-thumb{width:3px;background:var(--black-color08);}

    @media (max-width:860px) {
        .db-policy-modal{width:100%;}
    }

/*─────────────────────────────────────────────────────────
    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);}
    }

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

	공통 섹션 타이틀 (.sec_tit)
	- 라벨(영문) + 제목 + 설명 3단 구성, 모든 섹션에서 재사용
	- 정렬 : 기본 왼쪽, .center 붙이면 가운데
	- 색   : 기본 어두운 배경용, .wh 붙이면 전부 흰색 (어두운 배경 위)
	- 제목 크기 : --sec-head 로 섹션마다 조절 (기본 56px)
	- 설명이 2줄(크기 다름)이면 .sec_txt + .sec_txt_sub 를 .sec_txt_box 로 묶는다

───────────────────────────────────────────────────────────*/
    .sec_tit{--sec-head: var(--text-56);--sec-c1: var(--point-color01);--sec-c2: var(--black-color02);--sec-c3: var(--black-color06);display: flex;flex-direction: column;align-items: flex-start;gap: var(--row-gap20);text-align: left;}
    .sec_tit.center{align-items: center;text-align: center;}
    .sec_tit.wh{--sec-c1: var(--point-white);--sec-c2: var(--point-white);--sec-c3: var(--point-white);}
    .sec_label{font-family: var(--font-type01);font-size: var(--text-20);font-weight: 500;line-height: 1.4;color: var(--sec-c1);}
    .sec_head{font-family: var(--font-type02);font-size: var(--sec-head);font-weight: 600;line-height: 1.3;color: var(--sec-c2);}
    .sec_txt{font-family: var(--font-type02);font-size: var(--text-24);font-weight: 500;line-height: 1.6;color: var(--sec-c2);}
    .sec_txt_sub{font-family: var(--font-type02);font-size: var(--text-18);font-weight: 400;line-height: 1.6;color: var(--sec-c3);}
    .sec_txt_box{display: flex;flex-direction: column;gap: var(--row-gap10);margin-top: var(--row-gap10);}
    .sec_tit.center .sec_txt_box{align-items: center;}

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

	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 .visualSwiper{width: 100%;height: 100%;}
    .mv_slide{position: relative;overflow: hidden;background: var(--black-color01);}
    .mv_bg{position: absolute;inset: 0;}
    .mv_bg > a{display: block !important;width: 100%;height: 100%;}
    .mv_txt{position: absolute;top: 28.5%;left: 8.33%;z-index: 2;display: flex;flex-direction: column;align-items: flex-start;gap: var(--row-gap20);color: var(--point-white);}
    .mv_badge{display: inline-flex;align-items: center;justify-content: center;margin-bottom: var(--row-gap20);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_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;}

    .visualSwiper .txt-ani{opacity: 0; translate: 70px;}
    .visualSwiper.is-animated .swiper-slide.swiper-slide-active .txt-ani{opacity: 1; translate: 0; transition: all 1.2s 0.2s;}
        .visualSwiper.is-animated .swiper-slide.swiper-slide-active .txt-ani:nth-child(2){transition-delay: 0.4s;}
        .visualSwiper.is-animated .swiper-slide.swiper-slide-active .txt-ani:nth-child(3){transition-delay: 0.7s;}

    .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(2px, 0.55vw, 10px);flex-shrink: 0;}
    .mv_arw{display: flex;align-items: center;gap: clamp(0px, 0.35vw, 6px);}
    .mv_arw button,
    .mv_play{position: relative;box-sizing: border-box;width: clamp(24px, 1.6vw, 30px);height: clamp(24px, 1.6vw, 30px);}
    .mv_arw button::before{position: absolute;content: '';top: 50%;left: 50%;width: clamp(9px, 0.52vw, 10px);height: clamp(9px, 0.52vw, 10px);border-top: 2px solid var(--point-white);border-left: 2px solid var(--point-white);}
    .mv_prev::before{transform: translate(-50%, -50%) rotate(-45deg);}
    .mv_next::before{transform: translate(-50%, -50%) rotate(135deg);}
    .mv_play::before,
    .mv_play::after{position: absolute;content: '';top: 50%;translate: 0 -50%;width: clamp(2px, 0.13vw, 2.4px);height: clamp(14px, 0.75vw, 15px);background: var(--point-white);}
    .mv_play::before{left: calc(50% - clamp(5.6px, 0.3vw, 6px));}
    .mv_play::after{right: calc(50% - clamp(5.6px, 0.3vw, 6px));}
    .mv.paused .mv_play::after{opacity: 0;}
    .mv.paused .mv_play::before{left: 50%;translate: -50% -50%;width: clamp(11px, 0.6vw, 12px);clip-path: polygon(0 0, 100% 50%, 0 100%);}
    .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;}
    }

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

	01. ABOUT

───────────────────────────────────────────────────────────*/
    .ab{padding-block: var(--row-gap120);background: var(--point-white);text-align: center;}
    .ab .sec_tit{--sec-head: var(--text-64);}
    .ab_cards{position: relative;height: clamp(340px, 35.5vw, 522px);margin-top: var(--row-gap20);}
    .ab_cards .ab_card{position: absolute;top: 50%;left: 50%;width: clamp(240px, 28.7vw, 440px);aspect-ratio: 440 / 460;translate:-50% -50%;rotate: 0deg;border-radius: var(--radius-20);overflow: hidden;background: var(--black-color01);}
    .ab_cards .ab_card::after{position: absolute;content: '';inset: 0;z-index: 1;opacity: 0.6;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40.34%, #000 82.33%);pointer-events: none;}
    
    .ab_card:nth-child(1){rotate:-10deg;}
    .ab_card:nth-child(2){z-index: 1;}
    .ab_card:nth-child(3){rotate:10deg;right:50%;translate:50% -50%;}

    .ab_card .ofc{position: absolute;inset: 0;}
    .ab_card .ofc > a{display: block !important;width: 100%;height: 100%;}
    .ab_label{position: absolute;left: 0;right: 0;bottom: clamp(20px, 2.4vw, 40px);z-index: 2;font-family: var(--font-type01);font-size: var(--text-30);font-weight: 500;line-height: 1.6;color: var(--point-white);}
    .ab_desc{margin-top: var(--row-gap20);font-size: var(--text-20);font-weight: 400;line-height: 1.6;color: var(--black-color06);}

    @media (max-width:860px){
        .ab_card:nth-child(1){rotate: -7deg;}
        .ab_card:nth-child(3){rotate: 7deg;}
    }

    @media (min-width:1024px){
        .ab_cards{--ab-gap: 40px;height: auto;aspect-ratio: 2.64;}
        .ab_cards .ab_card{width: calc((100% - var(--ab-gap) * 2) / 3);transition: all 0.6s;transition-delay: 1s;}
        .ab_cards.aos-animate .ab_card:nth-child(1){rotate: 0deg;left: 0;translate: 0 -50%;}
        .ab_cards.aos-animate .ab_card:nth-child(3){rotate: 0deg;left: auto;right: 0;translate: 0 -50%;}
    }
    @media (prefers-reduced-motion: reduce){
        .ab_cards .ab_card{transition: none;}
        #about .ab_cards[data-aos]{transition: none;}
    }
    @media (max-width:1023px){
        #about .ab_cards[data-aos]{opacity: 1;transform: none;transition: none;}
        .ab_cards{height:auto;display:grid;grid:auto / repeat(3, 1fr);margin-top:var(--row-gap50);gap:var(--row-gap40);}
        #about .ab_cards .ab_card{position: relative;top:0;left:0;right:0;translate:0;rotate:0deg;width:100%;}
        .ab_desc{margin-top:var(--row-gap50);}
    }
    @media (max-width:640px){
      .ab_cards{grid:auto / repeat(1, 1fr);}
      .ab_cards .ab_card{aspect-ratio:auto 1.5;}
    }

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

	02. CONTENTS

───────────────────────────────────────────────────────────*/
    .ct{position: relative;padding-block: var(--row-gap160) var(--row-gap120);}
    .ct_bg{position: absolute;inset: 0;z-index: 0;overflow: clip;}
    .ct_bg > :where(img, a){position: sticky;top: 0;display: block !important;width: 100%;height: 100vh;height: 100lvh;}
    .ct_bg > img{object-fit: cover;}
    .ct_bg > a > img{width: 100%;height: 100%;object-fit: cover;}
    .ct .w_custom{z-index: 1;}

    .ct_list{--ct-offset: clamp(0px, 5.2vw, 100px);display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--col-gap40);margin-top: var(--row-gap105);padding-bottom: var(--ct-offset);}
    .ct_item{position: relative;aspect-ratio: 680 / 500;border-radius: var(--radius-20);overflow: hidden;background: var(--black-color01);}
    .ct_item:nth-child(even){translate: 0 var(--ct-offset);}
    .ct_item > .ofc{position: absolute;inset: 0;}
    .ct_item > .ofc > a{display: block !important;width: 100%;height: 100%;}
    .ct_cont{position: absolute;top:0;left:0;width:100%;height:100%;padding:var(--row-gap60);z-index: 2;display: flex;flex-direction: column;justify-content: space-between;gap: var(--row-gap20);}
    .ct_tit{display: flex;flex-direction: column;gap: var(--row-gap10);color: var(--point-white);}
    .ct_label{font-size: var(--text-22);font-weight: 500;line-height: 1.6;}
    .ct_name{font-family: var(--font-type02);font-size: var(--text-50);font-weight: 700;line-height: 1.4;}
    .ct_tags{display: flex;flex-wrap: wrap;align-content: flex-end;gap: var(--row-gap10);}
    .ct_tags li{padding: clamp(4px, 0.6vw, 8px) clamp(8px, 1.2vw, 16px);border-radius: var(--radius-50);background:var(--point-white);color: var(--black-color02);font-family: var(--font-type02);font-size:var(--text-18);font-weight: 400;line-height: 1.3;}

    @media (max-width:1023px){
      .ct_cont{padding:var(--row-gap40);}
    }
    @media (max-width:640px){
        .ct_list{--ct-offset: 0px;grid-template-columns: 1fr;}
    }

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

	03. PROCESS

───────────────────────────────────────────────────────────*/
    .pc{position: relative;padding-block: var(--row-gap160) var(--row-gap120);overflow: clip;}
    .pc_list{--pc-rise: clamp(0px, 3.07vw, 59px);display: grid;grid-template-columns: repeat(4, 1fr);align-items: start;margin-top:-50px;}
    .pc_item{position: relative;text-align: center;}
    .pc_item:nth-child(1){padding-top: calc(var(--pc-rise) * 3);}
    .pc_item:nth-child(2){padding-top: calc(var(--pc-rise) * 2);}
    .pc_item:nth-child(3){padding-top: var(--pc-rise);}

    .pc_top{position: relative;display: flex;flex-direction: column;align-items: center;gap: var(--row-gap20);padding-bottom: clamp(12px, 1.25vw, 24px);border-bottom: 1px solid var(--border-color02);}
    .pc_item:not(:first-child) .pc_top::before{position: absolute;content: '';left: 0;bottom:calc(var(--pc-rise) * -1);width: 1px;height: var(--pc-rise);background: var(--border-color02);}
    .pc_item:first-child .pc_top::after,
    .pc_item:last-child .pc_top::after{position: absolute;content: '';bottom: -1px;width: 50vw;height: 1px;background: var(--border-color02);}
    .pc_item:first-child .pc_top::after{right: 100%;}
    .pc_item:last-child .pc_top::after{left: 100%;}
    .pc_ico{display: block;width: clamp(50px, 4.2vw, 80px);aspect-ratio: 1;}
    .pc_ico img{width: 100%;height: 100%;object-fit: contain;}
    .pc_step{font-family: var(--font-type01);font-size: var(--text-20);font-weight: 400;line-height: 1.6;color: var(--black-color08);}

    .pc_bottom{position: relative;padding-top: clamp(14px, 1.3vw, 25px);}
    .pc_bottom::before{position: absolute;content: '';top: -4.5px;left: 50%;translate: -50% 0;width: 9px;height: 9px;border-radius: 50%;background: var(--border-color01);}
    .pc_item.on .pc_bottom::before{background: var(--point-color01);box-shadow: 0 0 0 6px rgb(188 18 10 / 10%);}
    .pc_name{font-family: var(--font-type02);font-size: var(--text-30);font-weight: 600;line-height: 1.4;color: var(--black-color02);}
    .pc_desc{margin-top: var(--row-gap10);font-family: var(--font-type02);font-size: var(--text-18);font-weight: 400;line-height: 1.6;color: var(--black-color02);opacity: 0.9;}

    @media (max-width:1500px){
      .pc_list{margin-top:var(--row-gap50);}
    }
    @media (max-width:1023px){
        .pc_list{grid-template-columns: repeat(2, 1fr);row-gap: var(--row-gap50);}
        .pc_item:nth-child(3){padding-top: calc(var(--pc-rise) * 3);}
        .pc_item:nth-child(4){padding-top: calc(var(--pc-rise) * 2);}
        .pc_item:nth-child(odd) .pc_top::before{display: none;}
        .pc_item:nth-child(2) .pc_top::after{left: 100%;}
        .pc_item:nth-child(3) .pc_top::after{right: 100%;}
        .pc_item:nth-child(2) .pc_top::after,
        .pc_item:nth-child(3) .pc_top::after{position: absolute;content: '';bottom: -1px;width: 50vw;height: 1px;background: var(--border-color02);}
    }
    @media (max-width:640px){
        .pc_list{--pc-rise: 0px;grid-template-columns: 1fr;row-gap: var(--row-gap40);}
        .pc_item .pc_top::before{display: none;}
        .pc_item .pc_top::after{left: auto;right: auto;display: none;}
    }

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

	04. PORTFOLIO

───────────────────────────────────────────────────────────*/
    .pf{position: relative;padding-block: var(--row-gap140);overflow: clip;background: var(--gray-bg01);}
    .pf_bg{position: absolute;top: 0;left: 0;z-index: 0;width: 100%;height:100%;}
    .pf_bg > a{display: block !important;width: 100%;height: 100%;}
    .pf .w_custom{z-index: 1;}

    .pf_tab{position: relative;margin-top: var(--row-gap60);}
    .pf_tab::before{position: absolute;content: '';left: 50%;bottom: 0;translate: -50% 0;width: 100vw;height: 1px;background: var(--border-color02);}
    .pf_tab ul{display: flex;flex-wrap: wrap;gap: var(--col-gap50);}
    .pf_tab button{position: relative;padding-bottom: clamp(10px, 0.95vw, 18px);font-family: var(--font-type02);font-size: var(--text-20);font-weight: 400;line-height: 1.4;color: var(--black-color02);}
    .pf_tab button::after{position: absolute;content: '';left: 0;bottom: 0;width: 100%;height: 2px;background: var(--black-color02);opacity: 0;transition: opacity 0.3s;}
    .pf_tab [aria-selected="true"]{font-weight: 700;}
    .pf_tab [aria-selected="true"]::after{opacity: 1;}

    .pf_list{display: grid;grid-template-columns: repeat(3, 1fr);gap: var(--col-gap30);margin-top: var(--row-gap60);}
    .pf_panels [hidden]{display: none;}
    .pf_list li{border-radius:var(--radius-20);overflow:hidden;aspect-ratio:auto 1.6;}
    .pf_list li img{width:100%;height:100%;object-fit:cover;}
    .pf_list p{display: none;}

        /* over */
        @media (hover:hover) and (pointer:fine){
            .pf_tab button:hover{font-weight: 700;}
        }

    @media (max-width:860px){
        .pf_list{grid-template-columns: repeat(2, 1fr);}
    }
    @media (max-width:640px){
        .pf_list{grid-template-columns: 1fr;}
    }

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

	05. CONTACT

───────────────────────────────────────────────────────────*/
    .cn{padding-block: var(--row-gap160);}
    .cn_inner{display: grid;grid-template-columns: 500fr 940fr;gap: var(--col-gap60);align-items: start;}
    .cn_txt{display: flex;flex-direction: column;gap: var(--row-gap40);}

    .cn_info{display: flex;flex-direction: column;gap: var(--row-gap30);padding-top: var(--row-gap40);border-top: 1px solid var(--border-color01);}
    .cn_info_tit{font-family: var(--font-type02);font-size: var(--text-28);font-weight: 600;line-height: 1.4;color: var(--black-color02);}
    .cn_list{display: flex;flex-direction: column;gap: var(--row-gap20);}
    .cn_row{display: flex;align-items: center;gap: var(--col-gap20);}
    .cn_row dt{flex-shrink: 0;display: flex;align-items: center;gap: clamp(6px, 0.55vw, 10px);width: clamp(86px, 6.25vw, 120px);font-family: var(--font-type02);font-size: var(--text-20);font-weight: 600;line-height: 1.4;color: var(--black-color02);}
    .cn_ico{flex-shrink: 0;width: clamp(26px, 1.9vw, 36px);aspect-ratio: 1;border-radius:100%;background:var(--point-color01);display: flex;align-items: center;justify-content: center;}
    .cn_ico img{max-width:50%;}
    .cn_row dd{min-width: 0;font-family: var(--font-type01);font-size: var(--text-20);font-weight: 400;line-height: 1.4;color: var(--black-color02);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .cn_row:last-child dd{font-size: var(--text-24);}

    .cn_map{display: flex;flex-direction: column;gap: var(--row-gap10);}
    .cn_map_img{aspect-ratio: 940 / 468;border-radius: var(--radius-20);overflow: hidden;background: var(--gray-bg04);}
    .cn_map_img iframe{display: block;width: 100%;height: 100%;border: 0;}
    .cn_addr{padding: clamp(12px, 1.05vw, 20px) clamp(16px, 1.6vw, 30px);border-radius: var(--radius-20);background: var(--gray-bg01);font-family: var(--font-type02);font-size: var(--text-20);font-weight: 400;line-height: 1.6;color: var(--black-color02);}

        /* over */
        @media (hover:hover) and (pointer:fine){
            .cn_row dd a:hover{text-decoration: underline;}
        }

    @media (max-width:1023px){
        .cn_inner{grid-template-columns: 1fr;gap: var(--row-gap50);}
    }


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

	footer

───────────────────────────────────────────────────────────*/
    #footer{background:var(--black-color01);padding-top:var(--row-gap70);}
    #footer .ft_logo_box{display: flex;align-items: center;justify-content: space-between;}
    #footer .logo img{max-width:clamp(150px, 17vw, 200px);}
    #footer .ft_sns{display: flex;align-items: center;gap:var(--row-gap30);}
        #footer .ft_sns li img{width:clamp(20px, 2.8vw, 28px);}
    #footer .ft_info_box{display: flex;align-items: flex-end;justify-content: space-between;padding-block:var(--row-gap60) var(--row-gap40);gap:var(--row-gap20);}
    #footer .addr-list{display: flex;flex-direction: column;gap:var(--row-gap10);align-items: flex-start;}
    #footer .addr-list li{display: flex;flex-wrap:wrap;gap:var(--row-gap10) var(--row-gap30);}
        #footer .addr-list li dl{display: flex;gap:clamp(10px, 1.2vw, 14px);font-size:var(--text-18);color:var(--black-color10);font-weight:400;font-family:var(--font-type02);}
        #footer .addr-list li dl dt{color:var(--point-white);flex-shrink:0;}
    #footer .main_more{border:1px solid rgba(255,255,255,0.4);padding:var(--row-gap10);padding-left:var(--row-gap20);font-size:var(--text-18);color:var(--border-color01);font-weight:600;}
        #footer .main_more .ico{width:clamp(26px, 3.3vw, 36px);}
    #footer .copy{border-top:1px solid rgba(255, 255, 255, 0.20);padding-block:var(--row-gap40) clamp(25px, 4vw, 43px);display: flex;flex-wrap:wrap;align-items: center;gap:clamp(5px, 1.2vw, 14px);font-size:var(--text-16);color:var(--black-color12);font-weight:400;}

    @media (max-width:479px) {
        #footer .ft_info_box{flex-direction: column;align-items: flex-start;}
    }
/*───────────────────────────────────────────────────────────

	Footer

───────────────────────────────────────────────────────────*/
    #footer{padding-block: var(--row-gap60);background: var(--black-color02);color: var(--point-white);font-family: var(--font-type02);font-size: var(--text-18);line-height: 1.6;}
    .ft_inner{display: flex;align-items: flex-start;gap: clamp(20px, 4.2vw, 80px);}
    .ft_logo{flex-shrink: 0;width: clamp(120px, 8.7vw, 166px);}
    .ft_logo img{width: 100%;height: auto;filter:var(--filter-white);}
    .ft_cont{min-width: 0;display: flex;flex-direction: column;gap: var(--row-gap30);}

    .ft_menu{display: flex;gap: var(--col-gap40);}
    .ft_menu button{font-weight: 600;transition: opacity 0.3s;}
    .ft_menu li:nth-child(2) button{font-weight: 500;opacity: 0.8;}

    .ft_info{display: flex;flex-direction: column;gap: var(--row-gap10);}
    .ft_row{display: flex;flex-wrap: wrap;align-items: center;gap: var(--col-gap20);}
    .ft_row_en{font-family: var(--font-type01);}
    .ft_cell{display: flex;align-items: center;gap: var(--col-gap20);}
    .ft_cell + .ft_cell::before{content: '';width: 1px;height: 12px;background: var(--point-white);opacity: 0.2;}
    .ft_cell dt{font-weight:400;}
    .ft_cell dd{opacity: 0.8;font-weight:300;}

    .ft_copy{font-size: var(--text-16);opacity: 0.5;font-weight:300;}

        /* over */
        @media (hover:hover) and (pointer:fine){
            .ft_menu button:hover{opacity: 1;}
            #footer :where(button, a):hover{text-decoration: underline;}
        }

    @media (max-width:1023px){
        .ft_inner{flex-direction: column;gap: var(--row-gap30);}
    }
    @media (max-width:640px){
        .ft_cell{width: 100%;}
        .ft_row{row-gap: clamp(8px, 1.1vw, 20px);}
        .ft_cell + .ft_cell::before{display: none;}
        .ft_row_en .ft_cell{width: auto;}
    }

    /* 퀵 */
      .quick-list{position: fixed;left: 50%;bottom: clamp(15px, 5vw, 50px);translate: -50%;max-width: 1880px;display: flex;flex-direction: column;align-items: flex-end;gap: clamp(5px, 2vw, 10px);z-index: 50; opacity: 0; pointer-events: none; transition: all 0.4s;}
          body:has(#header.on:not(.end)) .quick-list{opacity: 1;}
          body:has(#header.on:not(.end)) .quick-list > li{pointer-events: all;}
      .quick-list > li{position: relative;width: clamp(50px, 6vw, 60px);aspect-ratio: auto 1;background: var(--black-color02);box-shadow:var(--shadow-04);border-radius:100%;}
      .quick-list > li a{display: flex;align-items: center;justify-content: center;width:100%;height:100%;}
      .quick-list > li a:before{width:11px;aspect-ratio:auto 1;content:"";border:2px solid var(--point-white);border-width:2px 2px 0 0;rotate:-45deg;translate:0 3px;}

          @media (min-width:861px) {
              .quick-list{width: calc(100% - 80px);}
          }