@charset "utf-8";

/* ============================================
    공통
============================================ */

.sub-contents{
    --subpage-sec-gap: 215px;
    --sec-tit-bottom: 85px;

    /* 섹션 */
    & .sec{}
    & .sec + .sec{padding-top: var(--subpage-sec-gap);}

    /* 섹션 타이틀 */
    & .sec-tit{
        
        font-size: 72px; padding: 0 0 var(--sec-tit-bottom);
        & h3{
            font-weight: var(--fwb); letter-spacing: -0.03em; color: #777; line-height: 1.28;
            & span[data-text]{position: relative;}
            & span[data-text]:after{content: attr(data-text); position: absolute; left: 0; width: 0; white-space: nowrap; overflow: hidden; transition: width 1.0s 0.2s;}

            & span[data-color="white"]:after{color: #fff;}
            & span[data-color="blue"]:after{color: var(--theme-blue);}

            & br{display: none;}

            &.on{
                & span[data-text]:after{width: 100%;}
            }
        }
        & .sub{padding: 19px 0 0; letter-spacing: -0.03em; font-size: 0.3334em; color: #a6b1bf;}
        & .des{
            display: flex; flex-direction: column; gap: 28px; padding: 82px 0 0; font-size: 16px; color: var(--white);
            & dl{
                & dt{margin: 0 0 3px; color: rgba(255,255,255,0.5);}
            }
        }
        & .des + .des{
            padding: 30px 0 0; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.4);
        }

        &.light{
            & h3{color: #a6b1bf;}
            & .sub{color: #757575;}
        }

        @media (width <= 1600px){
            font-size: clamp(54px,5vw,72px);
        }
        @media (width <= 1024px){
            font-size: clamp(40px,5.5vw,56px);
            & .sub{font-size: 18px;}
            & .des{
                padding: 20px 0 0; gap: 10px; font-size: 15px;
                & dl{
                    & dt{margin: 0 0 5px;}
                }
            }
        }
        @media (width <= 860px){
            & h3{
                & br{display: block;}
            }
        }
        @media (width <= 640px){
            font-size: 30px;
            & .sub{font-size: 15px;}
        }
    }

    @media (width <= 1280px){
        --subpage-sec-gap: 180px;
        --sec-tit-bottom: 60px;
    }
    @media (width <= 860px){
        --subpage-sec-gap: 120px;
        --sec-tit-bottom: 50px;
    }
    @media (width <= 640px){
        --subpage-sec-gap: 80px;
    }
}


/* ============================================
    greeting
============================================ */
#sub-greeting{
    & .greeting{
        background: url("/assets/site/img/contents/greeting-bg.png") no-repeat center;

        & .tit{
            
            & .sup{color: var(--theme-blue); padding: 0 0 18px;}
            & h3{font-size: 36px; font-weight: var(--fwm);}
        }
        & .txt{padding: 47px 0 0; line-height: 1.75; color: #bdbdbd;}
        & .name{
            padding: 42px 0 0; line-height: 1.75; font-weight: var(--fwb);
            & .company{}
        }

        @media (width <= 640px){
            & .tit{
                & .sup{font-size: 14px; padding: 0 0 10px;}
                & h3{font-size: 30px;}
            }
            & .txt{padding: 6% 0 0;}
            & .name{padding: 6% 0 0;}
        }
    }
}


/* ============================================
    intro
============================================ */
#sub-intro{
    background-image: url("/assets/site/img/contents/intro-bg.png");
    background-position: top center;
    background-repeat: no-repeat;
}


/* ============================================
    history
============================================ */
#sub-history{
    background-image: url("/assets/site/img/contents/history-bg.png");
    background-position: top 25% center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}


/* ============================================
    workplace
============================================ */
#sub-workplace{

}