/******************************************************************************
sub.css
- about / contact / service / service_subpage 스타일 모음
- 아래 순서대로 섹션이 구성되어 있습니다.
  1) 공통 토큰/기본 타이포
  2) 공통 비주얼(about·service·contact 상단)
  3) about 페이지 섹션
  4) contact 페이지 섹션
  5) service(목록) 페이지 섹션
  6) service 서브페이지 공통 섹션
******************************************************************************/

/* ==========================================================================
   1) 공통 토큰/기본 타이포
   ========================================================================== */

    /* .roopimgs {background: #333333;}
    .roopimgs::after {content:''; display:block; width:100%; height:16px; background: #e04004;}
    .roopimgs .marquee__text__list__wr { display:flex; width: 100%;overflow: hidden;  white-space: nowrap; left:0; bottom:-60px; padding-top:100px;}
    .roopimgs .marquee__text__list__wr .marquee__tx__container { display: flex; white-space: nowrap; animation: txmarquee 50s linear infinite; }
    .roopimgs .marquee__text__list__wr .marquee__tx__container .tx{ display: flex; flex-shrink: 0; margin:0 20px;} */


    @keyframes txmarquee {
        0% {
            transform: translateX(0%);
        }
        100% {
            transform: translateX(-50%); 
        }
    }

    *{word-break: normal; overflow-wrap: break-word; font-family:'ClashDisplay-Variable';}
    .inter{font-family:'Inter', dotum, sans-serif;}

    .about__section__title{
        font-size: 90px;
        color: var(--color__main);
    }

    .about__section__sub__title{
        font-family: 'Inter', dotum, sans-serif;
        font-size: 24px;
    }

    .sub__contents__wr{position:relative;}

    /* 비주얼 */
    .about__contents__wr{position:relative;}
    .sub__contents__wr{position:relative;}
    .about__contents__inbox{position:relative;}
    .about__title__wr .about__title{font-size:160px; line-height: 150px; font-weight:400; font-family:'ClashDisplay-Variable'; position:relative;}
    .about__title__wr .about__title01{}
    .about__title__wr .about__title02{}
    .about__title__wr .about__title03{}

    .about__text__wr{}
    .about__text__wr .about__sub__text{position:relative; font-size:24px; font-weight:400; color:var(--color__sub);}
    .about__text__wr .about__sub__text .overlay{position:absolute; top:0; left:0; width:100%; height:100%; background:var(--color__white);}



/* ==========================================================================
   2) 공통 비주얼(about·service·contact 상단)
   ========================================================================== */
    /* .about__visual__box{position:relative; padding:14% 0 12%; height:100vh;} */
    /* .about__visual__box{position:relative; padding:14% 0 12%;} */
    .about__visual__box {
        position: relative;
        padding: 15% 0 10%;
    }
    .about__visual__inner{position:relative;}
    /* .about__visual__box .btn__box__st01{position:absolute; bottom:0; right:0;} */
    .about__visual__box .btn__box__st01 .btn__box__a .underline{width:0;}
    .visual__title__wr{position:relative;}
    .visual__title__wr .visual__tit__overlay{overflow:hidden;}
    .about__title__wr .about__title{word-break: inherit; text-align:left;}
    .visual__title__wr .about__title01{transform: translateY(100%); opacity:0;}
    .visual__title__wr .about__title02{ transform: translateX(-100px) translateY(100%); opacity:0;}
    .visual__title__wr .about__title03{text-align:right; transform: translateX(-100px) translateY(100%); opacity:0;}
    .about__wr__box{display:flex; margin-top:30px; align-items:center; justify-content:space-between;}

    .about__title__wr__box{
        margin-left: 160px;
    }

    /* 미니타이틀 관련 */

    /* 어바웃 미니타이틀  */
    .mini_title{
        font-size: 18px;
        color: var(--color__main);
    }

    .about__title.about__title01{
        margin-bottom:-15px;
    }

    .workwith .mini_title{
        margin-left: 10px;
    }

    @media screen and (max-width: 1800px) {
        .mini_title{
            font-size: 16px;
        }
    }

    @media screen and (max-width: 1024px) {
        .mini_title{
            font-size: 12px;
        }

        .about .mini_title{
            margin-left: 4px;
        }
    }

/* ==========================================================================
   3) about 페이지 섹션 시작
   ========================================================================== */

/* 쇼케이스 */
    .showcase__section__img__wr{height: 800px; border-radius: 40px; overflow: hidden;}
    .showcase__section__img__wr img{width:100%; height:100%; object-fit: cover;}

/* 피규어 */
    .figure__section{
        padding:110px 0 165px;
    }

    .figure__section .about__section__title__wr{
        color:var(--color__main);
    }
    .figure__section .about__section__title__wr .about__section__title{
        font-size:240px; line-height: 220px; font-weight:normal;
    }
    .figure__section .about__section__title__wr .about__section__sub__title{
        font-family:'ClashDisplay-Variable';
        text-align: left;
        font-size:24px; line-height: 32px; font-weight:normal; margin-top:35px;
        color:var(--color__main);
    }

    .figure__section .figure__section__body{display:flex; align-items:center; justify-content:space-between; gap: 176px;}
    
    /* 888×476 캔버스: 배경은 wr 100% cover, 로고는 182×60 비율로 스케일 + 정중앙 */
    .figure__section .figure__section__body .figure__section__icon__wr{
        --fig-canvas-w: 888;
        --fig-logo-w: 182;

        flex: 0 1 888px;
        max-width: 100%;
        min-width: 0;
        aspect-ratio: 888 / 476;
        height: auto;
        position: relative;
    }

    .figure__section .figure__section__body .figure__section__icon__wr .figure__section__icon__img{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .figure__section .figure__section__body .figure__section__icon__wr .figure__section__icon__logo{
        position: absolute;
        left: 50%;
        top: 50%;
        width: calc(var(--fig-logo-w) / var(--fig-canvas-w) * 100%);
        height: auto;
        aspect-ratio: 182 / 60;
        object-fit: contain;
        transform: translate(-50%, -50%);
    }

    .figure__section .figure__section__body .figure__section__text__wr{
        flex: 0 0 auto;
        max-width: 736px;
        font-size:48px; line-height: 64px; font-weight:normal; color:#999999;
    }

/* 리더십 */

    .leadership__section{
        padding: 143px 0 160px;
        background: #F4F5F7;
    }

    .leadership__section .about__section__title__wr {
        text-align: center;
    }

    .leadership__section .leadership__section__body{
        margin-top: 140px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .leadership__section .leadership__section__item{
        height: 408px;
        border-radius: 40px;
        padding:60px 60px 80px 60px;
        background: var(--color__white);
    }

    .leadership__section .leadership__section__item .leadership__number{
        font-size: 16px;
        color: var(--color__main);
    }
    .leadership__section .leadership__section__item .leadership__title{
        font-size: 48px;
        margin:40px 0 24px 0;
    }
    .leadership__section .leadership__section__item .leadership__text{
        font-size: 24px;
        line-height: 34px;
    }

/* 어워드 */

    .award__section{
        padding: 135px 0 150px;
    }

    .award__section .about__section__title__wr{
        text-align: center;
    }

    .award__section .about__section__title__wr .about__section__sub__title{
        line-height: 34px;
    }

    .award__section .award__section__body{
        margin-top: 80px;
    }

    .award__section .award__section__body .award__section__list__wr .award__section__list{
        width: 100%;
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .award__section .award__section__body .award__section__list__wr .award__section__list li{
        box-sizing: border-box;
        width: 100%;
        border-top: 1px solid #E0E0E0;
        border-bottom: 1px solid #E0E0E0;
        padding: 40px 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .award__section .award__section__body .award__section__list__wr .award__section__list li:last-child{
        border-top: none;
    }

    .award__section .award__section__body .award__section__list__wr .award__section__list .award__list__number{
        font-size: 16px;
        color: var(--color__main);
    }

    .award__section .award__section__body .award__section__list__wr .award__section__list .award__list__content{
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: 24px;
    }

    .award__section .award__section__body .award__section__list__wr .award__section__list .award__list__content .award__list__title{
        color: var(--color__main);
        font-size: 48px;
    }

    .award__section .award__section__body .award__section__list__wr .award__section__list .award__list__content .award__list__text{
        font-size: 24px;
        color:#999999;
    }

    .award__section .award__section__body .award__section__list__wr .award__section__list .award__list__logo{
        margin-left: auto;
    }

    .award__section .award__section__body .award__section__list__wr .award__section__list .award__list__logo img{
        height: 100%;
        width: 100%;    
        object-fit: contain;
    }

    /* about 전용 반응형 (브레이크포인트: 1800 / 1024 / 820 / 570) */
    @media screen and (max-width: 1800px) {
        .about .about__title__wr__box { margin-left: 80px; }
        .about__contents__wr.about ~ .figure__section .about__section__title__wr .about__section__title {
            font-size: 120px;
            line-height: 110px;
        }
        .about__contents__wr.about ~ .figure__section .figure__section__body { 
            display: block;
            margin-top: 100px;
        }
        .about__contents__wr.about ~ .figure__section .figure__section__text__wr {
            max-width: 100%;
            font-size: 36px;
            line-height: 50px;
            width: 100%;
            text-align: center;
            margin-top: 60px;
        }
        .about__contents__wr.about ~ .leadership__section .leadership__section__item .leadership__title { font-size: 40px; }
        .about__contents__wr.about ~ .award__section .award__section__list .award__list__content .award__list__title { font-size: 40px; }
        
        .about__contents__wr.about ~ .leadership__section .leadership__section__body {
            margin-top: 72px;
            flex-direction: column;
            align-items: stretch;
        }

        .about__contents__wr.about .about__title__wr .about__title02{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .about__contents__wr.about .about__title__wr .about__title02 span:first-of-type{
            margin-left: 50px;
        }

        .about__contents__wr.about .about__title__wr .about__title02 span:last-of-type{
            align-self: flex-start;
        }

    }

    @media screen and (max-width: 1024px) {
        .figure__section .about__section__sub__title{
            text-align: center;
        }
        .about .about__title__wr__box { margin-left: 0; }
        .about .about__wr__box {
            flex-direction: column;
            align-items: flex-end;
            gap: 20px;
        }
        .about__contents__wr.about ~ .figure__section .figure__section__body {
            flex-direction: column;
            align-items: flex-start;
            gap: 36px;
        }
        .about__contents__wr.about ~ .figure__section .figure__section__text__wr {
            max-width: 100%;
            font-size: 28px;
            line-height: 40px;
        }
        .about__contents__wr.about ~ .leadership__section .leadership__section__body {
            margin-top: 72px;
            flex-direction: column;
            align-items: stretch;
        }
        .about__contents__wr.about ~ .leadership__section .leadership__section__item {
            height: auto;
            padding: 44px 40px;
        }
        .about__contents__wr.about ~ .award__section .award__section__list li { margin-left: 0; padding: 28px 0; flex-direction: column; align-items: flex-start; gap: 16px; }

        .about__contents__wr.about ~ .award__section .award__section__list .award__list__content{
            margin-left: 0;
        }

        .about__contents__wr.about ~ .award__section .award__section__list .award__list__content .award__list__title {
            font-size: 34px;
            line-height: 42px;
        }
        .about__contents__wr.about ~ .award__section .award__section__list .award__list__content .award__list__text {
            font-size: 18px;
            line-height: 26px;
        }
    }

    @media screen and (max-width: 820px) {
        .showcase__section__img__wr{height: 480px;}

        .about .about__wr__box { align-items: flex-start; }
        .about__contents__wr.about ~ .figure__section { padding: 72px 0; }
        .about__contents__wr.about ~ .figure__section .about__section__title__wr .about__section__title {
            text-align: center;
            font-size: 90px;
            line-height: 70px;
        }
        .about__contents__wr.about ~ .figure__section .figure__section__text__wr {
            font-size: 22px;
            line-height: 32px;
        }
        .about__contents__wr.about ~ .leadership__section,
        .about__contents__wr.about ~ .award__section { padding: 72px 0; }
        .about__contents__wr.about ~ .leadership__section .leadership__section__item .leadership__title {
            font-size: 30px;
            margin: 24px 0 14px;
        }
        .about__contents__wr.about ~ .leadership__section .leadership__section__item .leadership__text {
            font-size: 18px;
            line-height: 28px;
        }
        .about__contents__wr.about ~ .award__section .award__section__list li {
            align-items: flex-start;
        }
    }

    @media screen and (max-width: 570px) {
        .about .about__visual__box { min-height: auto; }

        .about__contents__wr.about ~ .figure__section .about__section__title__wr .about__section__sub__title,
        .about__contents__wr.about ~ .award__section .about__section__title__wr .about__section__sub__title {
            font-size: 24px;
            text-align: center;
            line-height: 22px;
            margin-top: 24px;
        }

        .about__contents__wr.about ~ .award__section .about__section__title__wr .about__section__sub__title{
            font-size: 14px;
            line-height: 22px;
        }

        .about__contents__wr.about ~ .figure__section .figure__section__text__wr {
            font-size: 18px;
            line-height: 28px;
        }
        .about__contents__wr.about ~ .leadership__section .leadership__section__item { padding: 28px 24px; border-radius: 20px;}
        .about__contents__wr.about ~ .leadership__section .leadership__section__item .leadership__title {
            font-size: 24px;
            margin: 18px 0 10px;
        }
        .about__contents__wr.about ~ .leadership__section .leadership__section__item .leadership__text {
            font-size: 16px;
            line-height: 24px;
        }
        .about__contents__wr.about ~ .award__section .award__section__list .award__list__content .award__list__title {
            font-size: 24px;
            line-height: 32px;
        }
        .about__contents__wr.about ~ .award__section .award__section__list .award__list__content .award__list__text {
            font-size: 16px;
            line-height: 20px;
        }

        .about__section__title{
            font-size: 48px;
            line-height: 48px;
        }

        .award__section .award__section__body .award__section__list__wr .award__section__list .award__list__logo {
            margin-left: 0;
            height: 16px;
            margin-top: 32px;
            display: flex;
            width: 100%;
            align-items: flex-end;
            justify-content: flex-end;
        }

        .award__section .award__section__body .award__section__list__wr .award__section__list .award__list__logo img {
            height: 100%;
            width: auto;
            object-fit: contain;
        }
    }


/* ==========================================================================
   3) about 페이지 섹션 끝
   ========================================================================== */

/* ==========================================================================
   4) contact 페이지 섹션
   ========================================================================== */

    /* contact visual */
    .workwith .about__wr__box {
        justify-content: flex-end !important;
    }
    .workwith .about__wr__box .about__text__wr.visual__text__wr .about__sub__text {
        margin-right: 0 !important;
    }


    /* contact */

    .contact__info__wrap{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 160px;
    }

    .contact__info__item{
        position: relative;
        height: 480px;
        padding: 50px;
        background: #F4F5F7;
        border-radius: 40px;
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-decoration: none;
        color: inherit;
        overflow: hidden;
        isolation: isolate;
        transition: color .25s ease;
    }

    .contact__info__item::before{
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--color__main);
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(.22,.61,.36,1);
        z-index: 0;
    }

    .contact__info__item > *{
        position: relative;
        z-index: 1;
    }

    @media (hover: hover){
        .contact__info__item:hover{
            color: #fff;
        }
        .contact__info__item:hover::before{
            transform: translateY(0);
        }
        .contact__info__item:hover img{
            filter: brightness(0) invert(1);
        }
    }

    .contact__info__item .info__number{
        font-size: 16px;
    }
    .contact__info__item .info__title{
        font-size: 48px;
        margin-bottom: 24px;
    }
    .contact__info__item .info__text{
        font-size: 24px;
    }

    .contact__info__item img{
        width: 120px;
        height: 120px;
        margin-top: auto;
        align-self: flex-end;
        object-fit: contain;
        transition: filter .25s ease;
    }

    .workwith .about__title.about__title02{
        margin-left: 10%;
    }

    @media screen and (max-width: 1024px) {
        .contact__info__wrap{
            flex-direction: column;
        }

        .contact__info__item{
            position: relative;
            width: 100%;
            height: 480px;
            padding: 25px;
            background: #F4F5F7;
            border-radius: 20px;
            flex:1;

        }
    }

    @media screen and (max-width: 820px) {
        .contact__info__item img{
            width: 48px;
            height: 48px;
            object-fit: contain;
        }

        .contact__section .info__number{
            color: var(--color__main);
            font-size: 12px;
        }

        .contact__section .info__title{
            font-size: 24px;
        }

        .contact__section .info__text{
            font-size: 16px;
        }

        .contact__info__item img[src$="/images/contact_01.svg"],
        .contact__info__item img[src$="/images/contact_02.svg"]{
            content:url('/images/icon_arrow_or.png');
        }

        
    }

/* ==========================================================================
   5) service(목록) 페이지 섹션
   - 상단 비주얼 + 아코디언형 리스트 카드
   ========================================================================== */

    /* service visual */

    .howwehelp .about__visual__inner {
        display: flex;
        position: relative;
        justify-content: space-between;
    }
    .howwehelp .visual__title__wr .about__title02 {
        text-align: left;
        margin-left: 100px;
    }

    .howwehelp .about__wr__box {
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 48px;
    }
    .about__contents__wr.visual__section:not(.about) .about__wr__box .about__text__wr.visual__text__wr .about__sub__text {
        margin-left: 0;
    }

    /* 공통 비주얼 반응형: 1800 / 1300 / 1024 / 820 / 570 */
    @media screen and (max-width: 1800px) {
        .about__contents__wr.visual__section .about__title__wr .about__title{
            font-size: 120px;
            line-height: 104px;
        }
        .about__contents__wr.visual__section .about__text__wr .about__sub__text{
            font-size: 18px;
            line-height: 18px;
            max-width: 500px;
        }
        .about__contents__wr.visual__section .visual__title__wr .about__title02{
            transform: translateX(-72px) translateY(100%);
        }
        .about__contents__wr.visual__section:not(.about) .about__title__wr__box{
            margin-left: 50px;
        }
    }

    @media screen and (max-width: 1300px) {
     
        .about__visual__inner{
            flex-direction: column;
            align-items: flex-start;
            gap: 28px;
        }

        .about__wr__box{
            align-self: flex-end;
        }
    }

    @media screen and (max-width: 1024px) {
        .about__contents__wr.visual__section .about__title__wr .about__title{
            font-size: 112px;
            line-height: 104px;
        }
        .about__contents__wr.visual__section .about__text__wr .about__sub__text{
            font-size: 16px;
            line-height: 30px;
        }
        .about__contents__wr.visual__section .visual__title__wr .about__title02{
            transform: translateX(-72px) translateY(100%);
        }

    }

    @media screen and (max-width: 820px) {
        .about__contents__wr.visual__section .about__title__wr .about__title{
            font-size: 72px;
            line-height: 76px;
        }

        .about__contents__wr.visual__section .visual__title__wr .about__title02{
            transform: translateX(-48px) translateY(100%);
        }
    }

    @media screen and (max-width: 570px) {
        .about__contents__wr.visual__section .about__title__wr .about__title{
            font-size: 52px;
            line-height: 56px;
        }
        .about__contents__wr.visual__section .about__text__wr .about__sub__text{
            font-size: 16px;
            line-height: 24px;
        }
        .about__contents__wr.visual__section .visual__title__wr .about__title02{
            transform: translateX(-28px) translateY(100%);
        }
    }

    /* 공통 비주얼 레이아웃 반응형: 1024 / 820 / 570 */
    @media screen and (max-width: 1024px) {
        .about__contents__wr.visual__section:not(.about) .about__title__wr__box{
            margin-left: 120px;
        }

        .about__wr__box{
            gap: 36px;
        }
    }

    @media screen and (max-width: 820px) {
        .about__visual__inner{
            flex-direction: column;
            align-items: flex-start;
            gap: 28px;
        }
        .visual__title__wr .about__title02{
            margin-left: 0;
        }
        .about__visual__box{
            padding: 20% 0 45%;
            height: auto;
        }
        .about__wr__box{
            align-self: flex-end;
            width: 100%;
            max-width: 100%;
            gap: 28px;
        }

        .about__wr__box.pc__only__btn .about__btn__wr{
            display: none;
        }
    }

    @media screen and (max-width: 570px) {

        .service__subpage__title__wr {
            height: auto;
            padding: 30% 0 35%;
        }


        .about__visual__box{
            padding: 30% 0 35%;
        }
        .about__wr__box{
            gap: 22px;
        }
    }
    /* service visual end */

    /* service content start */

    .service__info__item{
        padding: 120px 0;
        border-bottom: 1px solid #E0E0E0;
    }

    .service__info__item:first-child{
        padding-top: 0;
    }

    .service__info__item:last-child{
        border-bottom: none;
    }

    .service__title__number{
        font-size: 16px;
        color: var(--color__main);
    }

    .service__section{
        background: #F4F5F7;
        padding: 160px 0;
    }

    .service__section .about__section__title__wr{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .service__title__wr{
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .service__item__wr{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 80px;
    }

    .service__img__wr{
        width: 280px;
        height: 280px;
    }

    .service__img__wr img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .service__item__box__wr{
        height: 360px;
        min-height: 0;
    }

    .service__item__box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        box-sizing: border-box;
        padding: 45px 45px;
        background: #fff;
        border-radius: 40px;
        text-decoration: none;
        color: inherit;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transition: color .25s ease;
    }

    .service__item__box::before{
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--color__main);
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(.22,.61,.36,1);
        z-index: 0;
    }

    .service__item__box:hover{
        color: #fff;
    }

    .service__item__box:hover::before{
        transform: translateY(0);
    }

    .service__item__box__title{
        font-size: 48px;
        line-height: 58px;
        align-self: flex-start;
        position: relative;
        z-index: 1;
        transition: color .25s ease;
    }

    .service__item__box__icon{
        align-self: flex-end;
        width: 72px;
        height: 72px;
        position: relative;
        z-index: 1;
    }

    .service__item__box__icon img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: filter .25s ease;
    }

    .service__item__box:hover .service__item__box__icon img{
        filter: brightness(0) invert(1);
    }

    @media screen and (max-width: 1800px) {
        .service__item__wr {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 60px;
        }


        .service__item__box__title {
            font-size: 45px;
            line-height: 45px;
            align-self: flex-start;
        }

        .about__section__sub__title {
            font-size: 20px;
        }

        .service__section .about__section__title__wr .service__img__wr{
            width: 200px;
            height: 200px;
        }
    }

    @media screen and (max-width: 1500px) {
        .service__section .about__section__title__wr .service__img__wr{
            display: none;
        }
    }


    /* 1024: 데스크톱 밀도 유지 + 크기 축소 */
    @media screen and (max-width: 1024px) {

        .service__item__box__title {
            font-size: 40px;
            line-height: 40px;
            align-self: flex-start;
        }
    }

    /* 820: 구조 전환(아코디언/1열 카드) */
    @media screen and (max-width: 820px) {
        .service__section{
            padding: 72px 0;
        }

        .service__info__item{
            padding: 32px 0;
        }

        .service__section .about__section__title__wr{
            position: relative;
            display: block;
            cursor: pointer;
            padding-right: 34px;
        }

        .service__section .about__section__title__wr::after{
            content: "";
            display: block;
            width: 24px;
            height: 24px;
            position: absolute;
            top: 6px;
            right: 0;
            background-image: url('/images/btn_more.png');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
        }

        .service__info__item.is-open .about__section__title__wr::after{
            background-image: url('/images/btn_more_active.png');
        }

        .service__title__wr{
            gap: 14px;
        }

        .service__title__number{
            font-size: 12px;
        }

        .service__section .about__section__title{
            width:200px;
            font-size: 24px;
            line-height: 28px;
        }

        .service__section .about__section__sub__title{
            font-size: 16px;
            line-height: 22px;
            width: 300px;
        }

        .service__img__wr{
            display: none;
        }

        .service__item__wr {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            margin-top: 0;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
        }

        .service__info__item.is-open .service__item__wr{
            margin-top: 24px;
            max-height: 2000px;
            opacity: 1;
        }

        .service__item__box__wr{
            height: auto;
        }

        .service__item__box{
            flex-direction: column;
            border-radius: 20px;
            padding: 24px;
        }

        .service__item__box__title{
            font-size: 24px;
            line-height: 28px;
            min-height: 85px;
        }

        .service__item__box__icon{
            width: 48px;
            height: 48px;
        }
    }


/* ==========================================================================
   6) service 서브페이지 공통 섹션
   ========================================================================== */

    /* ======================================================================
       서비스 서브페이지 공통 토큰/골격
       - 각 service_*.php 페이지가 공유하는 기본 헤더/타이틀 레이아웃
       - 페이지별 내용 차이는 마크업 텍스트 + 비주얼 클래스(.uae 등)로만 분기
    ====================================================================== */
    .service__subpage__title__wr{
        position: relative;
        padding: 15% 0 15%;
        height: auto;
    }
    
    .service__subpage__sub__title{
        font-size: 18px;
        color: var(--color__main);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .service__subpage__sub__title__line{
        width: 60px;
        height: 1px;
        background: linear-gradient(
            to right, 
            #fff 0%, 
            #ddd 50%, 
            var(--color__main) 100%
            );
        }
        
        .service__subpage__title{
            font-size: 160px;
            text-transform: uppercase;
            line-height: 150px;
            font-weight: 400;
            font-family: 'ClashDisplay-Variable';
            position: relative;
            text-align: center;
            margin-top: 10px;
        }

    /* ======================================================================
       섹션 간 기본 간격
       - 순서: visual -> list -> card -> vbanner -> pager
       - 반응형에서 간격만 축소하고 구조는 유지
    ====================================================================== */

    .service__subpage__visual__section{
        padding-bottom: 120px;
    }
    .service__subpage__list__section{
        padding-bottom: 120px;
    }
    .service__subpage__card__list__section{
        padding: 120px 0;
    }
    .service__subpage__vbanner__section{
        padding-top: 223px;
        padding-bottom: 120px;
    }
    .service__subpage__banner__section{
        padding: 120px 0;
    }
    .service__subpage__pager__section{
        padding: 160px 0;
    }

    /* ======================================================================
       비주얼 배경 매핑 규칙
       - 규칙: .service__subpage__visual__wr.[stem]
       - stem은 /images/visual_[stem].jpg 파일명과 1:1 대응
       - 새 페이지 추가 시: 이미지 추가 + 여기 클래스 1줄 추가
    ====================================================================== */
    .service__subpage__visual__wr.uae{
        background-image: url('/images/visual_uae.jpg');
    }
    .service__subpage__visual__wr.analyses{
        background-image: url('/images/visual_analyses.jpg');
    }
    .service__subpage__visual__wr.auditingservices{
        background-image: url('/images/visual_auditingservices.jpg');
    }
    .service__subpage__visual__wr.counselling{
        background-image: url('/images/visual_counselling.jpg');
    }
    .service__subpage__visual__wr.disputes{
        background-image: url('/images/visual_disputes.jpg');
    }
    .service__subpage__visual__wr.foundersurpport{
        background-image: url('/images/visual_foundersurpport.jpg');
    }
    .service__subpage__visual__wr.fundraising{
        background-image: url('/images/visual_fundraising.jpg');
    }
    .service__subpage__visual__wr.management{
        background-image: url('/images/visual_management.jpg');
    }
    .service__subpage__visual__wr.networkintroductions{
        background-image: url('/images/visual_networkintroductions.jpg');
    }
    .service__subpage__visual__wr.recruitment{
        background-image: url('/images/visual_recruitment.jpg');
    }
    .service__subpage__visual__wr.solutions{
        background-image: url('/images/visual_solutions.jpg');
    }
    .service__subpage__visual__wr.support{
        background-image: url('/images/visual_support.jpg');
    }

    /* 비주얼 컨테이너(배경/라운드/중앙정렬) */
    .service__subpage__visual__wr{
        position: relative;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        border-radius: 40px;
        overflow: hidden;
        height: 835px;
        color: var(--color__white);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* GSAP에서 opacity를 제어하는 딤 레이어 */
    .service__subpage__visual__dim{
        position: absolute;
        inset: 0;
        z-index: 0;
        background: rgba(0, 0, 0, 0.795);
        opacity: 0;
        pointer-events: none;
    }

    /* 딤 위 텍스트 레이어 */
    .service__subpage__visual__inner{
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        padding: 48px 40px;
    }

    /* 초기 opacity 0: sub.js 스크롤 진입 시 순차 표시 */
    .service__subpage__visual__title{
        font-size: 90px;
        line-height: 100px;
        text-align: center;
        color: var(--color__main);
        opacity: 0;
    }

    /* 본문도 동일하게 GSAP로 노출 */
    .service__subpage__visual__text{
        margin-top: 40px;
        font-family: 'Inter', dotum, sans-serif;
        font-size: 24px;
        line-height: 34px;
        color: var(--color__white);
        text-align: center;
        max-width: 1192px;
        opacity: 0;
    }

    .service__subpage__visual__text p{
        word-break: keep-all;
    }

    .service__subpage__visual__text p:not(:first-child){
        margin-top: 24px;
    }

    /* 서브페이지 섹션 타이틀 */

    .service__subpage__section__title{
        font-size: 90px;
        line-height: 100px;
        text-align: center;
        color: var(--color__main);
    }

    .service__subpage__section__sub__title{
        font-family: 'Inter', dotum, sans-serif;
        color:#505050;
        font-size: 24px;
        line-height: 34px;
        text-align: center;
        margin:40px 0 60px 0;
    }

    /* ======================================================================
       리스트 섹션 컴포넌트 (회색 행 + 번호)
       - 마크업: .service__subpage__list > li.service__subpage__list__item
       - 현재 기본은 고정 높이, 반응형 오버라이드에서 auto/min-height로 완화
    ====================================================================== */

    .service__subpage__list__wr{
        position: relative;
    }

    .service__subpage__list__wr .service__subpage__list{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .service__subpage__list__item{
        box-sizing: border-box;
        width: 100%;
        height: 148px;
        background: #F4F5F7;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 48px;
        border-radius: 20px;
        padding: 0 60px;
    }

    .service__subpage__list__item .list__number{
        width: 90px;
        font-size: 60px;
        font-weight: 300;
        color: var(--color__main);
    }
    .service__subpage__list__item .list__text{
        font-size: 24px;
        line-height: 30px;
        color: #000;
        max-width:734px;
        word-break: keep-all;
    }


    /* ======================================================================
       카드 섹션 컴포넌트 (오렌지 카드 그리드)
       - 기본 2열, 모바일 1열
       - card__text는 <br> 없이 문장 그대로 입력(운영 규칙)
    ====================================================================== */

    .service__subpage__card__list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .service__subpage__card__list .service__subpage__card__item{
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        background: linear-gradient(to bottom right, rgba(224, 64, 4, 0.8) 0%, #e04004 100%);
        border-radius: 20px;
        padding: 40px 35px;
        display: flex;
        flex-direction: column;
        gap:25px;
    }
    .service__subpage__card__list .service__subpage__card__item .card__icon{
        width: 36px;
        height: 36px;
    }
    .service__subpage__card__list .service__subpage__card__item .card__icon img{
        width: 100%;
        height: 100%;
    }
    .service__subpage__card__list .service__subpage__card__item .card__text{
        min-height: 224px;
        font-size:36px;
        line-height: 44px;
        color: #fff;
    }

    @media screen and (max-width: 1024px) {
        .service__subpage__card__list{
            gap: 20px;
        }
    }

    @media screen and (max-width: 820px) {
        .service__subpage__card__list{
            grid-template-columns: 1fr;
            gap: 16px;
        }
        .service__subpage__card__list .service__subpage__card__item{
            height: 433px;
            min-height: 280px;
            padding: 32px 24px;
        }
    }


    /* 서브페이지 배너 (상단: 좌·우 끝에서 중앙으로 내려오는 V, 꼭짓점 깊이 120px) */
    .service__subpage__vbanner__section{
        position: relative;
        background: linear-gradient(to bottom right, rgba(224, 64, 4, 0.8) 0%, #e04004 100%);
        -webkit-clip-path: polygon(
            0 0,
            50% 120px,
            100% 0,
            100% 100%,
            0 100%
        );
        clip-path: polygon(
            0 0,
            50% 120px,
            100% 0,
            100% 100%,
            0 100%
        );
    }
    
    .service__subpage__vbanner__item{
        position: relative;
        text-align: center;
        color: #fff;
    }

    .service__subpage__vbanner__item__title{
        font-size: 85px;
        width: 100%;
        line-height: 100px;
        margin-bottom: 40px;
    }

    .service__subpage__vbanner__item__text{
        font-family: 'Inter', dotum, sans-serif;
        font-size: 36px;
        line-height: 46px;
        word-break: keep-all;
    }

    /* ======================================================================
       하단 페이저 컴포넌트 (이전/다음 + 전체보기 버튼)
       - 데스크톱 2열, 모바일에서 세로 스택으로 오버라이드
    ====================================================================== */
    .service__subpage__pager__section{
        background: #F4F5F7;
        position: relative;
    }
    .service__subpage__pager__item__wr{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap:24px
    }
    .service__subpage__pager__item{
        flex:1;
        text-align: center;
        background: #fff;
        font-size: 24px;
        line-height: 30px;
        color: #000;
        border-radius: 20px;
        text-decoration: none;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service__subpage__pager__item:hover{
        background: var(--color__main);
    }
    .service__subpage__pager__item:hover a{
        color: #fff;
    }
    
    .service__subpage__pager__item a{
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .service__subpage__pager__section .sub__btn__wr{
        margin-top: 70px;
        text-align: center;
    }

    /* 서브페이지 배너 */
    .service__subpage__banner__section{
        background: #F4F5F7;    
        padding: 120px 0;
    }

    /* ======================================================================
       서브페이지 반응형 오버라이드 (최하단 추가)
       필요 시 이 블록 전체만 제거하면 원복 가능
    ====================================================================== */
    @media screen and (max-width: 1024px) {
        .service__subpage__visual__wr{
            height: 680px;
        }

        .service__subpage__title{
            font-size: 110px;
            line-height: 108px;
        }

        .service__subpage__visual__title,
        .service__subpage__section__title{
            font-size: 64px;
            line-height: 72px;
        }

        .service__subpage__visual__text,
        .service__subpage__section__sub__title{
            font-size: 20px;
            line-height: 30px;
        }

        .service__subpage__list__item{
            height: auto;
            min-height: 132px;
            padding: 28px 36px;
            gap: 28px;
        }

        .service__subpage__list__item .list__number{
            width: 64px;
            font-size: 44px;
        }

        .service__subpage__list__item .list__text{
            max-width: none;
            font-size: 22px;
            line-height: 30px;
        }

        .service__subpage__card__list .service__subpage__card__item .card__text{
            min-height: 0;
            font-size: 32px;
            line-height: 40px;
        }

        .service__subpage__vbanner__section{
            padding-top: 170px;
            -webkit-clip-path: polygon(0 0, 50% 90px, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 50% 90px, 100% 0, 100% 100%, 0 100%);
        }

        .service__subpage__vbanner__item__title{
            font-size: 62px;
            line-height: 70px;
        }

        .service__subpage__vbanner__item__text{
            font-size: 28px;
            line-height: 38px;
        }

        .service__subpage__pager__item{
            height: 104px;
            font-size: 20px;
            line-height: 28px;
        }
    }

    @media screen and (max-width: 820px) {
        .service__subpage__visual__section,
        .service__subpage__list__section,
        .service__subpage__card__list__section,
        .service__subpage__banner__section{
            padding: 72px 0;
        }

        .service__subpage__vbanner__section{
            padding-top: 130px;
            padding-bottom: 72px;
            -webkit-clip-path: polygon(0 0, 50% 72px, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 50% 72px, 100% 0, 100% 100%, 0 100%);
        }

        .service__subpage__pager__section{
            display: none;
        }

        .service__subpage__title__wr{
            height: auto;
            padding: 35% 0 35%;
        }

        .service__subpage__title{
            font-size: 48px;
            line-height: 74px;
        }

        .service__subpage__sub__title{
            flex-direction: column;
            font-size: 16px;
            gap: 8px;
        }

        .service__subpage__sub__title__line{
            width: 1px;
            height: 20px;
            background: linear-gradient(to bottom, #fff 0%, #ddd 50%, var(--color__main) 100%);
        }

        .service__subpage__visual__wr{
            height: auto;
            min-height: 673px;
            border-radius: 24px;
        }

        .service__subpage__visual__inner{
            padding: 32px 24px;
        }

        .service__subpage__visual__title,
        .service__subpage__section__title{
            font-size: 42px;
            line-height: 50px;
        }

        .service__subpage__visual__text,
        .service__subpage__section__sub__title{
            font-size: 18px;
            line-height: 28px;
        }

        .service__subpage__section__sub__title{
            margin: 24px 0 36px;
        }

        .service__subpage__list__wr .service__subpage__list{
            gap: 16px;
        }

        .service__subpage__list__item{
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            min-height: 112px;
            border-radius: 16px;
            padding: 20px 18px;
            gap: 14px;
        }

        .service__subpage__list__item .list__number{
            font-size: 12px;
            line-height: 1;
        }

        .service__subpage__list__item .list__text{
            font-size: 16px;
            line-height: 20px;
        }

        .service__subpage__card__list{
            grid-template-columns: 1fr;
            gap: 11px;
        }

        .service__subpage__card__list .service__subpage__card__item{
            height: auto;
            min-height: 0;
            border-radius: 16px;
            padding: 24px 20px;
            gap: 14px;
        }

        .service__subpage__card__list .service__subpage__card__item .card__icon{
            width: 30px;
            height: 30px;
        }

        .service__subpage__card__list .service__subpage__card__item .card__text{
            font-size: 24px;
            line-height: 32px;
        }

        .service__subpage__vbanner__item__title{
            font-size: 46px;
            line-height: 56px;
            margin-bottom: 24px;
        }

        .service__subpage__vbanner__item__text{
            font-size: 24px;
            line-height: 34px;
        }

        .service__subpage__pager__item__wr{
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .service__subpage__pager__item{
            width: 100%;
            height: 86px;
            font-size: 18px;
            line-height: 24px;
        }

        .service__subpage__pager__section .sub__btn__wr{
            margin-top: 32px;
        }
    }

    /* 570 구간: 타이포 추가 축소 */
    @media screen and (max-width: 570px) {
        .service__subpage__title{
            font-size: 52px;
            line-height: 56px;
        }

        .service__subpage__visual__title,
        .service__subpage__section__title{
            font-size: 34px;
            line-height: 42px;
        }

        .service__subpage__visual__text,
        .service__subpage__section__sub__title{
            font-size: 16px;
            line-height: 24px;
        }

        .service__subpage__list__item .list__text{
            font-size: 16px;
            line-height: 24px;
        }

        .service__subpage__card__list .service__subpage__card__item .card__text{
            font-size: 22px;
            line-height: 30px;
        }
    }

    .page-service .roopimgs{
        background: #F4F5F7;
    }