@charset "utf-8";

/*───────────────────────────────────────────────────────────
    서브 공통
───────────────────────────────────────────────────────────*/
    #wrap:has(.full_sec) #contents_wrap{width: 100%; max-width: 100%; }
    .sticky_visual{position: sticky; top:0; width: 100%; height: 940px; display: flex; align-items: center; overflow: hidden;}
    .sticky_visual .thumb{position: absolute; top:0; left:0; width: 100%; height: 100%; background: no-repeat center / cover; box-sizing: border-box;}
    .sticky_visual .title_wrap{position: relative; font-size: var(--title-20); color: var(--point-white); z-index: 3;}
    .sticky_visual .title_wrap h2{font-size: 300%;font-weight: 600;line-height: 1.1;letter-spacing: -0.03em;}
    .sticky_visual .title_wrap h6{font-size: inherit; font-weight: 500; line-height: 1.35;}
        .sticky_visual .title_wrap h6 + h2{margin-top: 20px;}

    .sticky_visual .title_wrap :where(h2, h6){animation-name: stickyTxt; animation-duration:1.2s; transition-timing-function:linear; animation-fill-mode: forwards; transform: translateY(70px); opacity: 0; animation-delay: 0.2s;}
    .sticky_visual .title_wrap h2{animation-delay: 0.4s;}
        @keyframes stickyTxt {0% {transform: translateY(70px); opacity: 0;}100% {transform: translateY(0); opacity: 1;}}

    .sticky_visual .thumb{animation-name: stickyVisual; animation-duration:5s; transition-timing-function:linear; animation-fill-mode: forwards;}
        @keyframes stickyVisual {0% {transform:scale(1);}100% {transform:scale(1.1);}}

    #wrap .sticky_cont .sub_visual{display: block;padding-bottom: 80px;}
    .sticky_cont{position: relative;z-index: 5;background: var(--point-white);padding: 50px 0 0;box-sizing: border-box;}
        .sticky_cont.pd_l{padding-top: 173px;}

    .flex_des{display: flex;flex-wrap: wrap;align-items: flex-start;gap: 40px 0;}
    .flex_des .info_title{position: sticky;top: 150px;width: 27.1%;font-size: var(--title-20);box-sizing: border-box;padding-right: 30px;z-index: 3;}
    .flex_des .info_title h3{font-size: 250%;font-weight: 700;color: var(--black-color00);line-height: 1.36;letter-spacing: -0.04em; }
    .flex_des .exp_cont{position: relative;width: 72.9%;box-sizing: border-box;}
    .flex_des .exp_cont .section + .section{margin-top: 100px; padding-top: 100px; border-top: 1px solid var(--border-color01);}

    .sub_title{position: relative;font-size: var(--title-20);box-sizing: border-box;text-wrap: pretty;z-index: 3;}
        .sub_title + :where(.crossing_step, .progress_list,){margin-top: 40px;}
        .sub_title + .desc_step{margin-top: 46px;}
        .sub_title + .thumb_box{margin-top: 80px;}
        .sub_title + .direction_wrap{margin-top: 30px;}
        .sub_title.wh :where(h2, h4, h6, p){filter: var(--filter-white);}
    .sub_title h2{font-size: 250%; font-weight: 700; color: var(--black-color09); line-height: 1.36; letter-spacing: -0.04em;}
        .sub_title h2 + p{margin-top: 30px;}
    .sub_title h2 em{font-weight: inherit; color: var(--point-color04);}
    .sub_title h4{font-size: 150%; font-weight: 700; color: var(--black-color00); line-height: 1.66; letter-spacing: -0.04em;}
        .sub_title h4 + h2{margin-top: 48px;}
        .sub_title h4 + p{margin-top: 20px;}
    .sub_title h4 span{font-weight: 600;}
    .sub_title h6{font-size: inherit;font-weight: 400;color: var(--black-color05);line-height: 1.6;letter-spacing: -0.04em;}
    .sub_title p{font-size: 90%;font-weight: 400;color: var(--black-color05);line-height: 1.66;;letter-spacing: -0.04em;}
        .sub_title p + p{margin-top: 20px;}

    .thumb_box{position: relative;font-size: 0;z-index: 3;}

    .crossing_step{display: flex;flex-wrap: wrap; gap: 15px 0; counter-reset: stepNo;}
    .crossing_step > li{position: relative;width: calc(100% / 4 + 27px);border:1px solid rgba(207, 210, 227, 0.5);border-radius: 800px;padding: 73px 40px 30px;text-align: center;font-size: var(--title-20);font-weight: 500;color: var(--black-color00);line-height: 1.4;display: flex;align-items: center;justify-content: center;box-sizing: border-box;}
        .crossing_step > li + li{margin-left: -36px;}
        .crossing_step > li:before{position: absolute;content: counter(stepNo, decimal-leading-zero);counter-increment: stepNo;top: 29px;left:15px;width: calc(100% - 30px);text-align: center;font-size: 90%;font-weight: 500;color: var(--point-color04);}
    .crossing_step > li strong{font-weight: inherit;}

    .desc_step{position: relative; display: flex; flex-wrap: wrap; gap: 30px; counter-reset: stepNo;}
    .desc_step > li{position: relative;width: calc(100% / 3 - 20px);min-height: 300px;box-sizing: border-box;padding:40px;background: var(--gray-bg02);}
    .desc_step .desc{position: relative;width: 100%;height: 100%;font-size: var(--title-20);display: flex;flex-direction: column;gap: 20px;box-sizing: border-box;padding-bottom: 70px;z-index: 3;}
        .desc_step .desc:before{display:block;content: counter(stepNo, decimal-leading-zero);counter-increment: stepNo; font-size: 90%; font-weight: 500; color: var(--point-color04); line-height: 1.11;}
        .desc_step > li:has(.thumb) .desc{filter: var(--filter-white);}
        .desc_step .desc[title]:before{content:attr(title);}
    .desc_step .desc dt{font-size: 130%; font-weight: 600; color: var(--black-color00); line-height: 1.25; letter-spacing: -0.04em;}
    .desc_step .desc:not(:has(.icon)) dd {margin-top: clamp(-15px, -1vw, 0px);}
    .desc_step .desc dd{font-size: 90%;font-weight: 400;color: var(--black-color05);line-height: 1.66;text-wrap: pretty;}
    .desc_step .desc .icon{position: absolute;right:0;bottom:0;display: flex;align-items: flex-end;justify-content: flex-end;}
    .desc_step .thumb{position: absolute; top:0; left:0; width: 100%; height: 100%; overflow: hidden;}
    .desc_step .thumb img{width: 100%; height: 100%; object-fit: cover;}

        .desc_step.line02{gap: 40px;}
        .desc_step.line02 > li{width: calc(100% / 2 - 20px); min-height: 280px;}
        .desc_step.line02 .desc .icon{right:10px; bottom:10px;}
        .desc_step.num_dn .desc:before{display: none;}
        .desc_step.num_dn .desc dt{color: var(--point-color04);}

        @media screen and (min-width:1024px){
            .desc_step.wide > li{min-height: 260px;}
        }

    .progress_list{display: flex; flex-direction: column; gap: 40px; overflow: hidden;}
    .progress_list > li{position: relative;box-sizing: border-box;background: var(--point-white);padding-left: 44px;}
    .progress_list .desc{display: flex;flex-wrap: wrap;font-size: var(--title-20);gap: 12px 0;}
    .progress_list .desc dt{position: relative;width: 230px;font-size: 150%;font-weight: 600;color: var(--point-color04);line-height: 1.33;box-sizing: border-box;display: flex;align-items: center;padding-right: 15px;}
        .progress_list > li:before{position: absolute;content:'';width: 8px;height: 8px;background: var(--border-color01);border-radius: 100%;top: 50%;left: 6px;transform: translateY(-50%); z-index: 3; transition: all 0.4s;}
        .progress_list > :is(li:first-child, li.on):before{background: var(--point-color04); box-shadow: 0 0 0 6px rgba(14, 32, 113, 0.1);}

        .progress_list > li:after, .progress_list .line{position: absolute;content:'';width: 1px;height: calc(100% + 40px); max-height: calc(100% + 40px); background: var(--border-color03);top: 0;left: 9px; }
        .progress_list > li:first-child:after, .progress_list > li:first-child .line{top:50%;}
        .progress_list > li:last-child:after, .progress_list > li:last-child .line{top: 0;max-height: 50%;}

        .progress_list .line{background: var(--point-color04); height: 0; z-index: 2;}

    .progress_list .desc dd{width: calc(100% - 230px);padding: 24px 30px;min-height: 110px;background: var(--gray-bg02);box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;}

    .bullet_list{position: relative; font-size: var(--title-20); box-sizing: border-box; display: flex; flex-direction: column; gap: 14px;}
    .bullet_list > li{position: relative;font-size: 90%;font-weight: 400;color: var(--black-color03);line-height: 1.33;letter-spacing: -0.04em;box-sizing: border-box;display: flex;align-items: baseline;gap: 10px;text-wrap: pretty;}
    .bullet_list > li:before{display: inline-flex;content: '';width: 4px;height: 4px;background: var(--black-color08);border-radius: 100%;flex-shrink: 0;transform: translateY(-4px);}

    .hyphen_list{position: relative;font-size: var(--title-20);box-sizing: border-box;display: flex;flex-direction: column;gap: 5px;}
    .hyphen_list > li{position: relative;font-size: 90%;font-weight: 400;color: var(--black-color06);line-height: 1.7;letter-spacing: -0.04em;box-sizing: border-box;display: flex;align-items: baseline;gap: 6px;text-wrap: pretty;}
    .hyphen_list > li:before{display: inline-flex;content:'-';flex-shrink: 0;}

    .direction_wrap{position: relative;padding-bottom: 180px;}
    .direction_wrap .bg{position: absolute;content:'';width: 150vw;height: calc(100% + 470px);background: var(--point-color05);left: 50%;bottom:0;transform: translateX(-50%);}
    .direction_list{position: relative;border-top: 1px solid var(--border-color03);counter-reset: stepNo;}
    .direction_list > li{position: relative;padding: 80px 180px 75px 30px;border-bottom: 1px solid rgba(217, 217, 217, 0.3);box-sizing: border-box;}
        .direction_list > li:before{position: absolute; content:''; width: 0; height: 1px; background: var(--point-white); left:0; bottom:-1px; transition: all 0.6s;}
    .direction_list .desc{font-size: var(--title-20);display: flex;flex-direction: column;gap: 27px;}
        .direction_list .desc:before{display: block;content: counter(stepNo, decimal-leading-zero);counter-increment: stepNo;font-size: inherit;font-weight: 700;color: var(--point-color04);line-height: 1;filter: var(--filter-white);opacity: 0.5;}
    .direction_list .desc dt{font-size: 230%;font-weight: 700;color: var(--black-color00);line-height: 1.25;letter-spacing: -0.04em;filter: var(--filter-white);}
    .direction_list .desc dt + dd{margin-top: 7px;}
    .direction_list .desc dd{font-size: 90%; font-weight: 400; color: var(--black-color05); line-height: 1.66; letter-spacing: -0.04em;}
    .direction_list .icon{position: absolute;top:50%;right:47px;transform: translateY(-50%);font-size: 0;opacity: 0.2;transition: all 0.6s;display: flex;justify-content: flex-end;}

    .nav_list{position: relative;font-size: var(--title-20);transition: all 0.4s;}
        .nav_list.active{filter: var(--filter-white);}
    .nav_list > li{position: relative; font-size: inherit; font-weight: 400; color: var(--black-color05); line-height: 1.3; padding-left: 40px; box-sizing: border-box; transition: all 0.4s; cursor: pointer;}
        .nav_list > li:not(:last-child){padding-bottom: 20px;}
        .nav_list > li:not(:last-child):before{position: absolute; content:''; width: 1px; height: 100%; background: var(--border-color01); top:10px; left:7px;}
    .nav_list > li:after{position: absolute;content:'';width: 8px;height: 8px;border-radius: 100%;background: var(--border-color01);top:10px;left:4px;transition: all 0.4s;}

        .nav_list > li.on{font-weight: 600; color: var(--point-color04);}
        .nav_list > li.on:after{box-shadow: 0 0 0 6px rgba(14, 32, 113, 0.1); background: var(--point-color04);}

        @media screen and (min-width:1024px){
            .direction_list > li:hover:before{width: 100%;}
            .direction_list > li:hover .icon{opacity: 1;}
        }

    @media screen and (max-width:1480px){
        .sub_title p br.for_pc, .desc_step .desc dt br.for_pc{display: none;}

		.desc_step > li {padding: 34px;}
		
        .desc_step.line02{gap: 30px;}
        .desc_step.line02 > li{width: calc(100% / 2 - 15px);}
    }
    @media screen and (max-width:1200px){
        .desc_step{gap: 20px;}
        .desc_step > li{width: calc(100% / 2 - 10px);}

            .desc_step.line02{gap: 20px;}
            .desc_step.line02 > li{width: calc(100% / 2 - 10px);}
    }
    @media screen and (max-width:1023px){
        #wrap .sticky_cont .sub_visual{padding-bottom: clamp(0px, 8vw, 80px);}
        .sticky_visual{height: clamp(500px, 94vw, 940px);}
        .sticky_visual .title_wrap h6 + h2{margin-top: clamp(10px, 2vw, 20px);}
        .sticky_cont{padding-top: clamp(0px, 5vw, 50px);}
        .sticky_cont.pd_l{padding-top: clamp(70px, 17vw, 173px);}

        .flex_des{row-gap: clamp(20px, 4vw, 40px);}
        .flex_des :is(.info_title, .exp_cont) {width: 100%;}
        .flex_des .info_title{position: relative; top:auto; padding-right: 0;}
        .flex_des .info_title h3{font-size: 230%;}
        .flex_des .exp_cont .section + .section{margin-top: clamp(40px, 10vw, 100px); padding-top: clamp(40px, 10vw, 100px);}
        
        .sub_title + :where(.crossing_step, .progress_list){margin-top: clamp(25px, 4vw, 40px);}
        .sub_title + .desc_step{margin-top: clamp(25px, 4.6vw, 46px);}
        .sub_title + .thumb_box{margin-top: clamp(25px, 8vw, 80px);}
        .sub_title + .direction_wrap{margin-top: clamp(10px, 3vw, 30px);}
        .sub_title :is(h4 + p, p + p){margin-top: clamp(10px, 2vw, 20px);}
        .sub_title h2{font-size: 230%;}
        .sub_title h2 + p{margin-top:clamp(10px, 3vw, 30px);}
        .sub_title h4 + h2{margin-top: clamp(20px, 4.8vw, 48px);}

        .crossing_step > li{padding:clamp(50px, 6vw, 60px) clamp(30px, 4vw, 40px) 30px; width: calc(100% / 4 + 2.69vw);}
            .crossing_step > li + li{margin-left: -3.6vw;}
            .crossing_step > li:before{top: clamp(20px, 2.9vw, 29px);}

        .desc_step{gap: 15px;}
        .desc_step > li{width: calc(100% / 2 - 7.5px);padding: clamp(25px, 4vw, 40px);min-height: clamp(200px, 30vw, 300px);}
        .desc_step .desc{gap: clamp(10px, 2vw, 20px);padding-bottom: clamp(20px, 7vw, 70px);}
        .desc_step .desc dt{font-size: 140%;}
        .desc_step .desc .icon{width: clamp(50px, 7.5vw, 75px);height: clamp(50px, 7.5vw, 75px);}

            .desc_step.line02{gap: 15px;}
            .desc_step.line02 > li{width: calc(100% / 2 - 7.5px);min-height: clamp(200px, 28vw, 280px);}
            .desc_step.line02 .desc .icon{right:0; bottom:0;}

        .progress_list{gap: clamp(15px, 4vw, 40px);}
        .progress_list .desc dd{padding:clamp(20px, 2.4vw, 24px) clamp(25px, 3vw, 30px);}

        .bullet_list{gap: clamp(7px, 1.4vw, 14px);}

        .direction_wrap{padding-bottom: clamp(70px, 18vw, 180px);}
        .direction_wrap .bg{height: calc(100% + clamp(200px, 47vw, 470px));}
        .direction_list > li{padding-left:clamp(20px, 3vw, 30px);padding-block: clamp(30px, 8vw, 80px);padding-right: clamp(100px, 18vw, 180px);}
        .direction_list .desc{gap: clamp(10px, 3vw, 30px);}
        .direction_list .desc dt{font-size: 210%;}
        .direction_list .icon{width: clamp(50px, 10vw, 100px);right: clamp(25px, 4.7vw, 47px);}

        .nav_list{display: none;}
    }
    @media screen and (max-width:860px){
        .sticky_visual .title_wrap h2{font-size: 280%;}

        .desc_step .desc dt{font-size: 130%;}

        .progress_list .desc dt{width: 130px;font-size: 140%;}
        .progress_list .desc dd{width: calc(100% - 130px);}

        .progress_list{gap: 30px;}
        .progress_list > li{padding-left: 40px;}
        .progress_list > li:before{top: 14px;width: 6px;height: 6px;}
        .progress_list > :is(li:first-child, li.on):before{box-shadow: 0 0 0 4px rgba(14, 32, 113, 0.1);}
        .progress_list > li:after, .progress_list .line{top:-14px;}
        .progress_list > li:first-child:after, .progress_list > li:first-child .line{top:14px;}
        .progress_list > li:last-child:after, .progress_list > li:last-child .line{top:-14px; max-height: 30px;}

        .progress_list .desc dt { width: 100%; }
        .progress_list .desc dd{width: 100%;}

    }
    @media screen and (max-width:640px){
        .sub_title h2{font-size: 210%;}
        .sub_title h4{font-size: 140%;}

        .sticky_visual .title_wrap h2{font-size: 260%;}

        .flex_des .info_title h3{font-size: 210%;}

        .crossing_step > li{width: calc(100% / 2 + 11px);}
            .crossing_step > li + li{margin-left: -22px;}
            .crossing_step > li:nth-child(2n+1){margin-left: 0;}

        .desc_step > li{width: calc(100% / 2 - 7.5px);}
        .desc_step .desc dt{font-size: 120%;}

        .bullet_list > li{gap: 8px;}
        .bullet_list > li:before{width: 3px; height: 3px;}

        .progress_list .desc dt{font-size: 130%;}

        .direction_list .desc dt{font-size: 190%;}
    }
    @media screen and (max-width:479px){
        .sub_title h2{font-size: 190%;}
        .sub_title h4{font-size: 130%;}

        .sticky_visual .title_wrap h2{font-size: 240%;}
        .sticky_visual .title_wrap h6{font-size: 90%;}

        .flex_des .info_title h3{font-size: 190%;}

        .crossing_step > li:before{font-size: 85%;}
        .crossing_step > li strong{font-size: 95%;}

        .progress_list{gap: 30px;}
        .progress_list > li{padding-left: 40px;}
        .progress_list > li:before{top: 14px;width: 6px;height: 6px;}
        .progress_list > :is(li:first-child, li.on):before{box-shadow: 0 0 0 4px rgba(14, 32, 113, 0.1);}
        .progress_list > li:after, .progress_list .line{top:-14px;}
        .progress_list > li:first-child:after, .progress_list > li:first-child .line{top:14px;}
        .progress_list > li:last-child:after, .progress_list > li:last-child .line{top:-14px; max-height: 30px;}
        .progress_list .desc dt{font-size: 130%;}

        .direction_list .desc:before{font-size: 90%;}
        .direction_list .desc dt{font-size: 170%;}
    }
    @media screen and (max-width:431px){
        .desc_step > li{min-height: 170px;}
        .desc_step > li:not(:has(.thumb)){width: 100%;}
        .desc_step.line02 > li{width: 100%;}
    }
    @media screen and (max-width:360px){
        .desc_step > li{width:100%;}
    }

/*───────────────────────────────────────────────────────────
    company
───────────────────────────────────────────────────────────*/
    /* 회사소개 */
        .about .flex_des .info_title{top: calc(50% - 59px);}
        .about .flex_des .exp_cont .section + .section{border-top: 0; margin-top: 168px; padding-top: 0;}

        @media screen and (max-width:1023px){
            .about .flex_des .exp_cont .section + .section{margin-top: clamp(70px, 16.8vw, 168px);}
        }

    /* 연혁 */
        .his_list .cont{position: relative;display: flex;flex-wrap: wrap;align-items: flex-start;gap: 40px 0;}
        .his_list .info{position: sticky;top: 120px;width: 53%;padding-right: 50px;box-sizing: border-box;}
        .his_list .info > li{transition: all 0.4s; cursor: pointer;}
        .his_list .info > li + li{margin-top: 20px;}
        .his_list .info_desc{position: relative; font-size: var(--title-20);}
            .his_list .info_desc + .info_thumb{margin-top: 50px;}
        .his_list .info_desc :where(dt, dd) span{transition-property: opacity; }
        .his_list .info_desc dt{font-size: 350%;font-weight: 600;color: var(--point-color04);line-height: 1.15;letter-spacing: -0.03em;transition: all 0.4s;}
            .his_list .info_desc dt + dd{margin-top: 20px;}
        .his_list .info_desc dd{font-size: 120%;font-weight: 500;color: var(--black-color00);line-height: 1.3;letter-spacing: -0.03em;transition: all 0.4s;}
        .his_list .info_thumb{display: block; font-size: 0; width: 100%; }
        .his_list .info > li .info_thumb{clip-path: inset(0 0 0 0); transition:1.2s; transition-property: opacity, clip-path;}
        .his_list .exp_wrap{width: 47%; box-sizing: border-box;}
        .his_list .exp{display: flex;flex-direction: column;gap: 67px;box-sizing: border-box;}
            .his_list .exp + .exp{margin-top: 346px;}
        .his_list .exp .sub_title{margin-bottom: 38px;}
        .his_list .exp_desc{position: relative; font-size: var(--title-20); display: flex; align-items: baseline;}
            .his_list .exp_desc + .exp_desc{margin-top: 47px;}
        .his_list .exp_desc dt{font-size: 110%; font-weight: 400; color: var(--black-color00); line-height: 1.27; width: 73px; padding-right: 15px; box-sizing: border-box; flex-shrink: 0;}
        .his_list .bullet_list{gap: 23px;}
        .his_list .bullet_list > li{font-size: inherit;}
        .his_list .bullet_list > li > span{display: flex;flex-direction: column;gap: 11px;align-items: flex-start;}
        .his_list .bullet_list > li small{font-size: 90%; font-weight: 400; color: var(--black-color06);}


            .his_list .info > li:not(.on){opacity: 0.8;}
            .his_list .info > li:not(.on) .info_desc dt{font-size: 120%;}
            .his_list .info > li:not(.on) .info_desc dt + dd{margin-top: 5px;}
            .his_list .info > li:not(.on) .info_desc dd{font-size: 90%;}
            .his_list .info > li:not(.on) .info_desc + .info_thumb{margin-top: 0;}
            .his_list .info > li:not(.on) .info_thumb{height:0; opacity: 0; clip-path: inset(0 100% 0 0);}

        @media screen and (max-width:1023px){
            .his_list .info{position: relative;top: auto;width: 100%;padding-right: 0;}
            .his_list .info_desc + .info_thumb{margin-top: 0;}
            .his_list .info_desc dt{font-size: 330%;}
            .his_list .info_desc dt + dd{margin-top: clamp(15px, 3.3vw, 33px);}
            .his_list .exp_wrap{width: 100%;}
            .his_list .exp{gap: clamp(30px, 6.7vw, 67px);}
                .his_list .exp + .exp{margin-top: clamp(70px, 15vw, 150px);}
            .his_list .exp .sub_title{margin-bottom: clamp(15px, 3.8vw, 38px);}
            .his_list .exp_desc + .exp_desc{margin-top: clamp(15px, 4.7vw, 47px);}
            .his_list .exp_desc dt{width: clamp(50px, 10vw, 73px);}
            .his_list .bullet_list{gap: clamp(15px, 2.3vw, 23px);}
            .his_list .bullet_list > li > span{gap: clamp(7px, 1.1vw, 11px);}
        }
        @media screen and (max-width:640px){
            .his_list .info_desc dt{font-size: 310%;}
        }
        @media screen and (max-width:479px){
            .his_list .info_desc dt{font-size: 290%;}
            .his_list .info_desc dd{font-size: 110%;}
        }