@charset "utf-8";

/* ========================================
= [GLOBAL - COMPONENT]
= Description: 신규 공통 컴포넌트
======================================== */
/* {Component - Max} 컴포넌트 - 최대 가로값 */
[class*="max-"] { width: 100%; margin: 0 auto; }
.max-890        { max-width: 890px; }
.max-1010       { max-width: 1010px; }
.max-1130       { max-width: 1130px; }
.max-1286       { max-width: 1286px; }

.gutter-work    { padding-inline: var(--gutter); transition: all 0.2s ease-out; }
@media all and (max-width: 768px) {
    .gutter-work{ padding-inline: 40px; }
}

/* {Component - Grid} 컴포넌트 - 그리드 */
[class*="grid-"]	{ display: grid; }
.grid-wrap.col-2{ grid-template-columns: repeat(2, 1fr); }
.grid-wrap.col-3{ grid-template-columns: repeat(3, 1fr); }
.grid-wrap.col-4{ grid-template-columns: repeat(4, 1fr); }
.grid-wrap.col-5{ grid-template-columns: repeat(5, 1fr); }


/* {Component - Icon} 컴포넌트 - 아이콘 */
.ico.mo_kakao{
    width: 24px; height: 24px; background-image: url("/@resource/images/ico/ico_kakao_mo.svg");
}
.ico.telegram{
    width: 24px; height: 24px; background-image: url("/@resource/images/ico/ico_telegram.png");
}


/* {Component - Button} 컴포넌트 - 버튼 */
.btn.line-w{
    color: var(--white);
    border-radius: 6px;
    border: 1px solid var(--white);
}

/* {Component - Item} 컴포넌트 - 아이템 */
.item.new-card{
    position: relative;
    width: 100%; height: 140px; padding-block: 24px 16px; padding-inline: 22px;
    background-color: var(--white);
    border-radius: 10px;
}
.item.new-card .text-wrap{
    display: flex; flex-direction: column;
    gap: 4px;
}
.item.new-card .title   {
    font-size: clamp(20px,2.6vw,24px); font-weight: 700;
    color: var(--black); line-height: 1;
}
.item.new-card .text    {}
.item.new-card .tag     {
    display: flex; align-items: center;
    flex-wrap: wrap; line-height: normal;
    gap: 2px; letter-spacing: -0.48px;
    font-size: 14px; font-weight: 400;
}
.item.new-card .tag span{line-height: normal}

.item.new-card .icon-wrap{
    position: absolute; right: 22px; bottom: 16px;
    display: flex; align-items: center;
}
.item.new-card .ico{
    width: 32px; aspect-ratio: 1/1;
    background-image: url("/@resource/images/ico/ico_play.svg");
}

.item.new-card,
.item.new-card .title,
.item.new-card .tag,
.item.new-card .ico{  transition: all 0.25s; }



@media (any-hover: hover) and (any-pointer: fine) {
    .item.new-card:hover        { background-color: var(--indigo); }
    .item.new-card:hover .title,
    .item.new-card:hover .tag{ color: var(--white); }

    .item.new-card:hover .ico   { background-image: url("/@resource/images/ico/ico_play_on.svg"); }
}
@media all and (max-width: 768px) {
    .item.new-card          { padding-block: 24px 14px; padding-inline: 16px; }
    .item.new-card .title   { font-size: 18px; }
    .item.new-card .tag     { flex-direction: column;}
    .item.new-card .tag span{ width: 100%; }
    .item.new-card .icon-wrap{ right: 16px; bottom: 14px; }
    .item.new-card .ico { width: 28px; }
}



/* // () => [GLOBAL - COMPONENT END] 공통 컴포넌트 종료 */

/* ========================================
= [LAYOUT - FLOAT CONTACT] (Header)
= Description: Header 플로팅 문의하기
======================================== */
.re-float-contact .box-area + .form-wrap,
.re-float-contact .button-area {margin-left: 0 !important; }

.re-float-contact .gutter{ justify-content: center;}
.re-float-contact .float-inner{
    display: flex; align-items: center;
    justify-content: space-between;
    gap:20px;
}
.re-float-contact .box-area .img-wrap{
    width: clamp(75px,7.8vw,85px);
}
.re-float-contact .box-area p{
    font-size: clamp(15px,1.56vw,18px); font-weight: 800;
    letter-spacing: -0.8px;
}
.re-float-contact .box-area .img-wrap + p::before{
    margin: 0 clamp(10px,0.98vw,20px);}

.re-float-contact #bannerDataForm   { gap: clamp(18px,1.87vw,30px); }
.re-float-contact fieldset          { gap: clamp(11px,1.14vw,20px) }

.re-float-contact fieldset .input-text,
.re-float-contact fieldset .select  { width: clamp(155px,12.29vw,238px); }
.re-float-contact #btnConatct       { width: clamp(100px,10.41vw,136px);}

.re-float-contact ul.only-mo        { width: 100%; gap:8px; }
.re-float-contact ul.only-mo li     { width: calc(100% / 3); }
.re-float-contact ul.only-mo li + li::before{display: none !important;}

.re-float-contact ul.only-mo .btn       { font-size: 13px;  letter-spacing: -0.52px; gap: 2px; }
.re-float-contact ul.only-mo .btn.color1{ color: var(--indigo) !important; }
.re-float-contact ul.only-mo .btn.floats{ width: 100%; height: 46px; }

@media all and (max-width: 1260px) {
    .re-float-contact fieldset .input-text,
    .re-float-contact fieldset .select  { width: clamp(130px,13.53vw,180px); }
}
@media all and (max-width: 961px) {
    .re-float-contact .float-inner{
        height: 100%; justify-content: center;
    }
}
/* // () => [SUB - FLOAT CONTACT END] 헤더 플로팅 문의하기 종료 */


/* ========================================
= [SUB - PAGE WORKS] (Depth02)
= Description: Depth02 업무분야 신규
======================================== */
.sub.search.re-work{}
.sub.search.re-work .grid-wrap{ gap: clamp(12px,1.56vw,16px) clamp(14px,1.82vw,16px); }

.sub.search.re-work .page-content .max-1130{
    max-width: max(1130px,58.85vw);
}
.sub.search.re-work .page-content .title-wrap{
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 22px
}
.sub.search.re-work .page-content .title-wrap .title{
    font-size: 20px; font-weight: 800;
    letter-spacing: -0.8px;
}
.sub.search.re-work .page-content .title-wrap .title span{ color: var(--darkGray) !important; }
.sub.search.re-work .page-content .title-wrap .btn{
    font-size: 13px; font-weight: 600;
    letter-spacing: -0.52px;
}
@media all and (max-width: 1260px){
    .sub.search.re-work .grid-wrap{ grid-template-columns: repeat(3, 1fr); }
}
@media all and (max-width: 768px){
    .sub.search.re-work .grid-wrap{ grid-template-columns: repeat(2, 1fr); }
}


/* 업무분야: Page View */
#content.sub.work.re-work.search .page-content{ margin-top: 48px; }
#content.sub.work.re-work .content-wrap{ padding-left: 0px; border-left: none; }
#content.sub.work.re-work:not(.search) .page-content{ padding-top: 40px; }

@media all and (max-width: 768px){
    #content.sub.work.re-work.search .page-content{ margin-top: 30px; }

    #content.sub.work.re-work:not(.search) .page-content{ padding-top: 25px; }
    #content.sub.work.re-work:not(.search) #aside + .content-wrap{margin-top: 25px;}
}



.sub.work.re-work{}
.sub.work.re-work .sect-work{}
.sub.work.re-work .sect-work .title-wrap{ margin-bottom: 40px; }

.sub.work.re-work .swiper-area{position: relative;}
.sub.work.re-work .swiper li{ max-width: none; }
.sub.work.re-work .swiper-btns{
    position: absolute; top: 50%; left: -60px; z-index: 2;
    width: calc(100% + 120px); transform: translateY(-50%);
}
.sub.work.re-work .swiper-btns .btn{
    position: absolute; padding: 0px;
    width: clamp(28px,3.64vw,36px); aspect-ratio: 1/1;
    background-color: var(--white); border-radius: 100px;
    box-shadow: 0px 6px 15px rgba(93, 88, 88, 0.4);
}
.sub.work.re-work .swiper-btns .btn.prev{ left: 0; }
.sub.work.re-work .swiper-btns .btn.prev img{transform: rotate(-180deg)}
.sub.work.re-work .swiper-btns .btn.next{ right: 0; }

@media all and (max-width: 1040px){
    .sub.work.re-work .swiper-btns{
        display: none !important;
        width: calc(100% + 80px); left: -40px;
    }
}
@media all and (max-width: 960px){
    .sub.work.re-work .section:not(.article, .detail) + .section{margin-top: 40px;}
}
@media all and (max-width: 768px){
    .sub.work.re-work .sect-work .title-wrap{ margin-bottom: 28px; }
    .sub.work.re-work .btn.more-color{ height: 24px; font-size: 12px; }
    .sub.work.re-work .swiper{ overflow: hidden; }

    .sub.work.re-work .swiper-btns{
        width: calc(100% + 50px); left: -25px;
    }
    .sub.work.re-work .swiper-btns .btn{ width: 18px; }
    .sub.work.re-work .swiper-btns .btn img{ width: 5px; }

}

/* 업무분야 상세: Section Works */
.sub.work.re-work .section.works{
    height: 280px; padding-block: 45px; padding-inline: 0;
    display: flex; flex-direction: column; gap: 24px;
    align-items: center;
    background: transparent !important; border-radius: 0px;
    background-color: var(--indigo) !important;

}
.sub.work.re-work .section.works .location-wrap{
    position: relative; top: 0px!important;
    padding: 0px; justify-content: center;
}
.sub.work.re-work .section.works .location-wrap .ico.home{
    background-image: url("/@resource/images/ico/ico_home_1.svg");
    width: 20px; height: 20px;
}

.sub.work.re-work .section.works .location-wrap .local{ color: var(--white);}
.sub.work.re-work .section.works .location-wrap .local + .local::before{margin: 0 10px; height: 11px; }
.sub.work.re-work .section.works .location-wrap .btn-local{ font-weight: 500; padding-inline: 0; }
.sub.work.re-work .section.works .location-wrap .btn-local .ico.new-local-down{
    width: 12px; height: 6px;
    background-image: url("/@resource/images/ico/ico_new_local.svg");
}
.sub.work.re-work .section.works .location-wrap .local,
.sub.work.re-work .section.works .location-wrap .btn-local{font-size: 16px;}

.sub.work.re-work .section.works .location-wrap .lnb-box{ position: relative; }

.sub.work.re-work .section.works .location-wrap .lnb-box ul{
    position: absolute; top: 30px; left: 4px; overflow-y: auto;
    width: max-content; height: 250px; background-color: #FFF;
    color: #000; border-radius: 6px;
    display: none;
}
.sub.work.re-work .section.works .location-wrap .lnb-box li{}
.sub.work.re-work .section.works .location-wrap .lnb-box li:is(:hover,.current) a{ color:var(--indigo); font-weight: 700; }
.sub.work.re-work .section.works .location-wrap .lnb-box a{
    width: 100%; padding: 4px 10px;
    display: flex; align-items: center; font-size: 15px;
}
.sub.work.re-work .section.works .location-wrap .lnb-box.active ul{ display: block }
.sub.work.re-work .section.works .location-wrap .lnb-box.active .btn-local .ico{ transform: rotate(-180deg); }

.sub.work.re-work .section.works .text-wrap{ width: 100%; margin-top: 0px; }
.sub.work.re-work .section.works .text-wrap .title{
    font-size: 36px; font-weight: 700;
    color: var(--white); line-height: 1.6;
    letter-spacing: -1.2px;
}
.sub.work.re-work .section.works .tag-wrap{
    max-width: 300px; width: 100%;
    flex-wrap: wrap; justify-content: center;
}
.sub.work.re-work .section.works .tag-wrap.en{
    max-width: 440px;
}

.sub.work.re-work .section.works .tag-wrap .tag{ color: var(--indigo); font-weight: 600; }
@media all and (max-width: 960px){
    .sub.work.re-work .section.works{
        min-height: auto; height: 200px; padding-block: 32px;
        gap: 10px;
    }
    .sub.work.re-work .section.works .text-wrap .title  { font-size: 24px; line-height: 1.1;}

}
@media all and (max-width: 768px){
    .sub.work.re-work .section.works { height: 145px; }
    .sub.work.re-work .section.works .tag-wrap          { max-width: 250px; }
    .sub.work.re-work .section.works .tag-wrap.en       { max-width: 350px; }
    .sub.work.re-work .section.works .tag-wrap .tag     { font-size: 11px; height: 22px; }
}


/* 업무분야 상세: Section Infos */
.sub.work.re-work .section.infos,
.sub.work.re-work .section.process{ margin-top: 0px !important; }

.sub.work.re-work .section.infos{ padding-block: 35px 60px; }
.sub.work.re-work .section.infos .swiper    { position: relative; }
.sub.work.re-work .section.infos .swiper ul {}
.sub.work.re-work .section.infos .swiper li {
    width: clamp(204px,26.53vw,304px) !important;
    display: flex; flex-direction: column;
    gap: 36px;
}
.sub.work.re-work .section.infos .swiper li:not(.swiper-slide-active){ opacity: 0.5; }

.sub.work.re-work .section.infos .swiper .img-wrap{ width: 100%; height: 100%; }
.sub.work.re-work .section.infos .swiper .img-wrap img{
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
    vertical-align: top;
}
.sub.work.re-work .section.infos .swiper dl {
    display: flex; flex-direction: column; text-align: center;
    align-items: center; justify-content: center;
    gap: 24px;
}
.sub.work.re-work .section.infos .swiper dt{
    font-size: 22px; font-weight: 800;
    color: #314398; letter-spacing: -0.88px;
}
.sub.work.re-work .section.infos .swiper dd{
    font-size: 18px; letter-spacing: -0.6px;
    word-break: keep-all; max-width: 240px;
}
.sub.work.re-work .section.infos .swiper-btns{
    top: 26%; left: 0; right: 0;
    width: clamp(335px,43.56vw,400px); margin: 0 auto;
}
@media all and (max-width: 960px) {
    .sub.work.re-work .section.infos .swiper-btns{top: 22%;}
}
@media all and (max-width: 768px) {
    .sub.work.re-work .section.infos{ padding-block: 35px 30px; }
    .sub.work.re-work .section.infos .swiper li{ gap: 18px; width: 184px!important; }
    .sub.work.re-work .section.infos .swiper dl{ gap: 4px; }
    .sub.work.re-work .section.infos .swiper dt{ font-size: 18px; }
    .sub.work.re-work .section.infos .swiper dd{ font-size: 14px; max-width: 160px; }

    .sub.work.re-work .section.infos .swiper-btns{ width: clamp(230px,29.95vw,330px); top: 26% }
}


/* 업무분야 상세: Section Process */
.sub.work.re-work .section.process {
    padding-block: clamp(38px,4.95vw,68px);
    background-color: #F4F7F8;
}
.sub.work.re-work .section.process .gutter-work{
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: clamp(20px,2.6vw,40px);
}
.sub.work.re-work .section.process .title-wrap .title{
    color: var(--black);
    font-size: 30px; font-weight: 800;
    letter-spacing: -1.2px; line-height: 1.2;
}
.sub.work.re-work .section.process .title-wrap .title

.sub.work.re-work .section.process ul{
    display: flex; flex-direction: column;
}
.sub.work.re-work .section.process li,
.sub.work.re-work .section.process li dl{
    display: flex; align-items: center;
    gap: 26px;
}
.sub.work.re-work .section.process li{
    position: relative; padding-bottom: clamp(45px,4.68vw,96px);
    height: fit-content !important;
}
.sub.work.re-work .section.process li:last-child{padding-bottom: 0px; }

.sub.work.re-work .section.process li:not(:last-child):before,
.sub.work.re-work .section.process li:not(:last-child):after{
    content: ""; position: absolute; top: 30%; left: 20px;
    width: 2px; height: calc(100% - 10px); transition: all 0.25s ease;
}
.sub.work.re-work .section.process li:not(:last-child):before{
    z-index: 1;
    height: 0; background-color: var(--indigo);
}
.sub.work.re-work .section.process li:not(:last-child):after{ background-color: #CFCFCF }

.sub.work.re-work .section.process li .steps-cnt{
    position: relative;
    z-index: 2;
    width: 42px; height: 42px; border-radius: 100px;
    display: flex; align-items: center;
    justify-content: center;
    color: var(--white); background-color: #CFCFCF;

    font-size: 18px; font-weight: 600;
    letter-spacing: -0.72px;
}
.sub.work.re-work .section.process li .steps-cnt span::after{
    content: ""; position: absolute; top: 50%; left: 50%;
    z-index: -1; transform: translate(-50%, -50%) scale(0);
    width: 54px; height: 54px; border-radius: 100px;
    background-color: rgba(31, 116, 255, 0.3);
    transition: transform 0.25s 0.1s ease;
}

.sub.work.re-work .section.process li dt,
.sub.work.re-work .section.process li dd{ color: #B3B3B3; }
.sub.work.re-work .section.process li dt{
    font-size: 20px; font-weight: 600;
    letter-spacing: -0.8px;
    max-width: 215px; width: 100%;
}
.sub.work.re-work .section.process li dd{
    max-width: 445px; width: 100%;
    font-size: 18px; letter-spacing: -0.6px;
    word-break: keep-all;
}

/*.sub.work.re-work .section.process li.active:not(:last-child):before,*/
.sub.work.re-work .section.process li.steps:not(:last-child):before{ height: calc(100% - 10px); }


.sub.work.re-work .section.process li.active .steps-cnt,
.sub.work.re-work .section.process li.steps + li .steps-cnt{ background-color: var(--indigo) }

.sub.work.re-work .section.process li.active .steps-cnt span::after,
.sub.work.re-work .section.process li.steps + li .steps-cnt span::after{ transform: translate(-50%, -50%) scale(1); }

.sub.work.re-work .section.process li.active dt,
.sub.work.re-work .section.process li.active dd,
.sub.work.re-work .section.process li.steps + li dt,
.sub.work.re-work .section.process li.steps + li dd{ color: var(--black); }
@media all and (max-width: 960px) {
    .sub.work.re-work .section.process li{ gap: 48px }
    .sub.work.re-work .section.process li:not(:last-child):after{ height: 100%; top: 2%; }
    .sub.work.re-work .section.process li{ align-items: flex-start }
    .sub.work.re-work .section.process li dl{
        flex-direction: column; align-items: flex-start;
        gap: 4px;
    }
}
@media all and (max-width: 768px) {
    .sub.work.re-work .section.process .title-wrap .title{ font-size: 20px; line-height: 1.8; }

    .sub.work.re-work .section.process li:not(:last-child):after{left: 15px; }
    .sub.work.re-work .section.process li:not(:last-child):before{ top: 5%; left: 15px; }
    .sub.work.re-work .section.process li .steps-cnt{ width: 32px; height: 32px; }
    .sub.work.re-work .section.process li .steps-cnt span::after{ width: 42px; height: 42px; }

    .sub.work.re-work .section.process li dl{ width: calc(100% - 80px); }
    .sub.work.re-work .section.process li dt{ max-width: none; font-size: 18px; }
    .sub.work.re-work .section.process li dd{ max-width: 212px; font-size: 14px; }
}


.sub.work.re-work .section.lawyers .swiper-btns{ top: 35%; }
/* // () => [SUB - PAGE WORKS END] 서브 업무분야 종료 */