@charset "UTF-8";

:root {
    --fPrtdd: "Pretendard", sans-serif;
    /* 색상 */
    --cBlack: #1E1E1E;
    --cBlue: #1264C8;
    --cSky: #0B9FE5;
    --cPoint: #08BDF4;
    --cGray: #9E9E9E;
}

/* "Pretendard" 폰트 적용 */
@font-face {
    font-family: "Pretendard";
    src: url(../font/Pretendard-Thin.eot);
    src: url(../font/Pretendard-Thin.woff) format("woff");
    font-weight: 100
}

@font-face {
    font-family: "Pretendard";
    src: url(../font/Pretendard-ExtraLight.woff);
    src: url(../font/Pretendard-ExtraLight.woff) format("woff");
    font-weight: 200
}

@font-face {
    font-family: "Pretendard";
    src: url(../font/Pretendard-Light.eot);
    src: url(../font/Pretendard-Light.woff) format("woff");
    font-weight: 300
}

@font-face {
    font-family: "Pretendard";
    src: url(../font/Pretendard-Regular.woff);
    src: url(../font/Pretendard-Regular.woff) format("woff");
    font-weight: 400
}

@font-face {
    font-family: "Pretendard";
    src: url(../font/Pretendard-Medium.woff);
    src: url(../font/Pretendard-Medium.woff) format("woff");
    font-weight: 500
}

@font-face {
    font-family: "Pretendard";
    src: url(../font/Pretendard-SemiBold.woff);
    src: url(../font/Pretendard-SemiBold.woff) format("woff");
    font-weight: 600
}

@font-face {
    font-family: "Pretendard";
    src: url(../font/Pretendard-Bold.woff);
    src: url(../font/Pretendard-Bold.woff) format("woff");
    font-weight: 700
}

@font-face {
    font-family: "Pretendard";
    src: url(../font/Pretendard-ExtraBold.woff);
    src: url(../font/Pretendard-ExtraBold.woff) format("woff");
    font-weight: 800
}

@font-face {
    font-family: "Pretendard";
    src: url(../font/Pretendard-Black.woff);
    src: url(../font/Pretendard-Black.woff) format("woff");
    font-weight: 900
}

/* 공통 기본 스타일 -----------------*/
html, body {
    font-weight: 400;
    line-height: 1;
    overflow-x: hidden;
    color: var(--cBlack);
}

* {
    margin: 0;
    padding: 0;
    border: none;
    border-collapse: collapse;
    font-family: "Pretendard",sans-serif;
    font-style: normal;
    word-break: keep-all;
    box-sizing: border-box;
    list-style: none;
}

html {
    font-size: 62.5%; /* 폰트사이즈: 10pt */
}

a {
    color: inherit;
    text-decoration: none; /* 메뉴 텍스트 밑줄 제거 */
}

a:hover, a:focus, a:active {
    text-decoration: none;
    outline: none;
}

button {
    border: none;
    cursor: pointer;
    background-color: rgba(0,0,0,0);
}

input:focus, textarea:focus, button:focus {
    outline: none
}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear {
    display: none;
}

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* IE 에서 Select box 화살표 제거 */
select::-ms-expand {
    display: none;
}

img {
    max-width: 100%;
    vertical-align: top
}

/* 스크롤 바 스타일------------------*/
/* 스크롤바 설정*/
::-webkit-scrollbar {
    width: .6rem;
    height: 1rem;
}
/* 스크롤바 막대 설정*/
::-webkit-scrollbar-thumb {
    height: 1rem;
    background-color: #1264C8;
    transition: all .5s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #04A6F9;
}

/* 스크롤바 뒷 배경 설정*/
::-webkit-scrollbar-track {
    background-color: #E8E8E8;
}

.container.body-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 40px 16px;
}
/* 마우스 드래그 글자색, 배경색 변경 */
::selection {
    color: var(--cBlack);
    background-color: cornflowerblue;
}


/* 헤더 (전체) 영역 ------------------------------------ */
.site_header {
    background-color: rgba(0,0,0,0.0);
    border-bottom: 1px solid rgba(255,255,255,0.5); /* 하단 얇은 흰색 줄 */
    position: fixed;
    z-index: 1001;
    width: 100%;
    height: 100px;
    line-height: 0;
    transition: background .5s;
}

    /* 헤더에 마우스 올렸을 때 */
    .site_header:hover {
        background-color: #FFFFFF;
    }

    .site_header:hover .nav_container {
        color: var(--cBlack);
        transition: all .5s;
    }

    .site_header:hover .nav_container .nav_logo {
        background-image: url(../images/logo_02.png);
    }
        .site_header:hover .nav_container .nav_logo a {
            display: block;
            width: 19.8rem;
            height: 4.4rem;
        }

    .site_header:hover .nav_container .menu_app .xi-apps {
        color: var(--cBlack);
    }

    .site_header:hover .nav_container .nav_link {
        font-weight: 700;
        letter-spacing: -0.03rem;
    }
        /* 메뉴 영역 */
        .nav_container {
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            box-sizing: border-box;
            transform: translateY(50%);
        }

    /* CI 영역 (좌측 고정) */
    .nav_container .nav_logo {
        width: 198px;
        height: 44px;
        background-image: url(../images/logo_01.png);
    }

    /* 우측 app 아이콘 */
    .nav_container .menu_app {
        display: block;
        width: 50px;
        height: 50px;
        padding: 0;
        margin-top: 0;
        cursor: pointer;
    }

    .nav_container .menu_app .xi-apps {
        display: block;
        color: #FFFFFF;
        font-size: 5rem;
    }

        /* 가운데 메뉴 */
    .nav_container .nav_level1 {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center; /* CI 제외한 1단 메뉴 가운데 정렬 */
        gap: var(--gap-50);
        width: fit-content;
    }

    .nav_container .nav_item {
        position: relative;
        font-size: 2rem;
    }

/* 1단 메뉴 링크 */
.nav_item .nav_link {
    position: relative;
    font-weight: 500;
    white-space: nowrap;
    font-size: 2rem; /*    ← 메뉴 폰트*/
    height: 100%;
    transition: background .5s;
    text-align: center;
}

    .nav_item .nav_link::before {
        content: "";
        display: block;
        width: 0;
        height: .2rem;
        background-color: var(--cBlue);
        transition: width .5s;
        bottom: -.5rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .nav_item .nav_link:hover {
        letter-spacing: -0.03rem;
        transition: all 0.1s;
    }

    .nav_item .nav_link:hover::before {
        width: 80%;
    }

    /* 서브 메뉴 */
    .nav_item .nav_level2 {
        list-style: none;
        margin: 0;
        padding: 1rem 0;
        position: absolute;
        top: 1.5rem; /* 기존 top:100%; → 110% 로 내려서 밑줄과 간섭 제거 */
        left: -50%;
        min-width: 13rem;
        background-color: #FFFFFF;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid #e0e0e0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(1rem);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
        z-index: 10;
        padding: 1.5rem 2rem;
        border-radius: 1.2rem;
    }

    /* 2단 메뉴 항목: 좌측 여백, 좌측 정렬 */
        .nav_item .nav_level2 li {
            line-height: 2;
            width: 100%;
            display: block;
        }
            .nav_item .nav_level2 li a {
                display: block;
                font-size: 1.8rem;
                text-align: center;
                white-space: nowrap;
                transition: all .3s;
                color: var(--cGray);
            }
                .nav_item .nav_level2 li a:hover {
                    color: #1646B9;
                }

    /* 1단 메뉴 Over 시 2단 메뉴 Fade-in */
    .nav_item.has_sub:hover > .nav_level2 {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

/* 스크롤 시 헤더 스타일 클래스 */
.scroll_on {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--cGray);
}
    .scroll_on .nav_container {
        color: var(--cBlack);
        transition: all .5s;
    }

        .scroll_on .nav_container .nav_logo {
            background-image: url(../images/logo_02.png);
        }

        .scroll_on .nav_container .menu_app .xi-apps {
            color: var(--cBlack);
        }

        .scroll_on .nav_container .nav_link {
            font-weight: 700;
            letter-spacing: -0.03rem;
        }

/* 전체 메뉴 */
.allMenu {
    position: fixed;
    width: 100%;
    height: 100%;
    top: -120%;
    left: 0;
    z-index: 1002;
    visibility: hidden;
    transition: all .5s;
    overflow-y: scroll;
}

@media screen and (min-width: 960px) {
    .allMenu {
        background-color: #051129;
        overflow-y: hidden;
    }

        .allMenu.showAll {
            top: 0;
            visibility: visible;
        }

        .allMenu::after {
            content: "";
            display: block;
            width: 52.4rem;
            height: 73.4rem;
            right: 0;
            z-index: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

    .allMenu_center {
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .allMenu_close {
        position: absolute;
        right: 0;
        top: 6rem;
    }

        .allMenu_close i {
            font-size: 6rem;
            color: #FFFFFF;
        }

    .allMenu_wrap {
        font-size: var(--fs-50);
        display: flex;
        align-items: flex-start;
        -moz-column-gap: clamp(12rem,8vw,16rem);
        column-gap: clamp(12rem, 8vw, 16rem);
    }

        .allMenu_wrap .menu {
            display: flex;
            flex-direction: column;
            row-gap: 5rem
        }

        .allMenu_wrap .menu_depth1 {
            line-height: 1;
            color: #FFFFFF;
            position: relative;
            font-weight: 200;
        }

            .allMenu_wrap .menu_depth1 a {
                opacity: 0.5;
                transition: all .3s;
                position: relative;
            }
            .allMenu_wrap .menu_depth1 > a:hover {
                opacity: 1;
                font-weight: 700;
            }

            /* 밑줄 */
            .allMenu_wrap .menu_depth1 > a::after {
                content: attr(title);
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 70px;
                line-height: 70px;
                border-bottom: 5px solid var(--cPoint);
                max-width: 0;
                overflow: hidden;
                transition: all .3s;
            }

            .allMenu_wrap .menu_depth1 > a:hover::after {
                max-width: 100%;
            }

        .allMenu_wrap .menu .sub_menu {
            display: block;
            margin: 2.5rem 0 0 2.5rem;
        }
        .allMenu_wrap .menu .sub_menu li {
            margin-bottom: 1.5rem;
            font-size: var(--fs-40);
        }

        .allMenu_wrap .menu_depth1 a:hover {
            opacity: 1;
        }

        .allMenu_wrap .menu .sub_menu li:last-of-type {
            margin-bottom: 0;
        }
}



/* TOP 버튼 */
#btnTop {
    width: 7.5rem;
    height: 7.5rem;
    background-color: #1928AA;
    position: fixed;
    bottom: 5rem;
    right: 2.5%;
    border-radius: 1rem;
    transition: all .3s;
    z-index: 1001;
}
    #btnTop:hover {
        background-color: var(--cBlue);
    }
    #btnTop i {
        color: #FFFFFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -52%);
    }

    /* ============================
   Footer (검은색 배경)
============================ */
    .site_footer {
        background-color: var(--cBlack); /* 검은색 배경 */
        color: #ccc; /* 밝은 회색 글자 */        
    }
    
    .ft_center {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        row-gap: 10rem;
    }

        .ft_center img {
            margin-right: 10rem;
        }

        .ft_center .ft_texts p {
            display: flex;
            line-height: 2;
            color: #FFFFFF;
        }
            .ft_center .ft_texts p span {
                color: var(--cGray);
                display: block;
                width: 7.3rem;
                margin-right: 2.5rem;
            }

        .ft_center .ft_texts .copyright {
            color: var(--cGray);
        }


/* 서브페이지 -------------------------------- */
.sub_center {
    width: 95%;
    max-width: 130rem;
    margin-inline: auto;
    padding: 0rem 0rem 10rem;
}

.tit_area {
    position: relative;
    margin: 20rem 0rem 10rem 0rem;
}

.sub_tit {
    line-height: 1;
    position: relative;
    color: var(--cBlack);
    font-weight: 900;
}


.tit_area .subTit_en {
    position: absolute;
    bottom: 0;
    color: var(--cBlack);
    opacity: 0.1 !important;
    font-weight: 900;
}

/* 인사말 'GREETING' 위치 */        
.text_gt {
    left: 18.5rem;
    top: 1.5rem;
}

.tit_area .subTit_desc {
    color: var(--cGray);
    margin-top: 5rem;
}

.gt_tit {
    color: var(--cBlue);
    font-weight: 900;
    margin-bottom: 5rem;
}

.greeting {
    line-height: 1.5;
    font-weight: 300; /* light */
}

.ceo {
    display: block;
    margin-top: 5rem;
}    

    .ceo span {
        margin-left: 1.5rem;
        letter-spacing: 1rem;
        font-weight: 700;
    }


/* 회사연혁 영역 ------------------------------------------ */

/* 연혁 'COMPANY HISTORY' 위치 */
.text_history {
    left: 25.5rem;
    top: 1.5rem;
}

.container {
    display: flex;
/*    flex-direction:row-reverse;*/
    position: relative;
    padding-left: 2.5rem;
}

.history_area {
    width: calc(60%);
/*    margin-right: 5rem;*/
    min-height: 50rem;
}

.const_img {
    position: absolute;
    right: -30.7rem;
    bottom: -10rem;
    z-index: 1;
    width: calc(40% + 30.7rem);
    height: calc(100% + 10rem);
    min-height: 50rem;
    transition: all 1.5s;
}

.history_img {
    background: url('../images/history/history.jpg') top no-repeat;
}

.history_tab {
    width: 100%;
    height: 7rem;
/*    transition: all .3s;*/
}

.history_tab_wrap {
    display: flex;
/*    justify-content: center;*/
    align-items: center;
/*    border-bottom: 0.1rem solid var(--cGray);*/
    height: 7rem;
    padding: 1.5rem 1.5rem 1.5rem 0;
    box-sizing:border-box;
    transition: all .5s;
}

.history_tab_link {
    color: var(--cGray);
    padding: 0rem 1.5rem;
    position: relative;
}

    .history_tab_link:first-child {
        padding: 0 1.5rem 0 0;
    }
    .history_tab_link:after {
        content: "|";
        position: absolute;
        right: 0rem;
        font-weight: 100;
        color: var(--cGray);
    }

    .history_tab_link:last-of-type:after {
        content: "";
    }


.on {
    font-weight: 900;
    color: var(--cBlue);
}

.history_year {
    margin: 0 0 1.5rem 0;
    padding: 0;
    line-height: 1;
    color: var(--cBlue);
}

.history_list {
    padding-left: 2.5rem;
    position: relative;    
}

.history_list_cont p {
    margin: 0 0 1.5rem 5rem;
    line-height: 1.25;
    position: relative;
    transition: all ease-in-out .3s;
    
}
    .history_list_cont p:hover {
        font-weight: 700;
        font-size: var(--fs-23);
    }

    .history_list_cont p::before {
        content: "\e929";
        font-size: 2.5rem;
        font-family: xeicon;
        position: absolute;
        left: -3.5rem;
        top: -0.3rem;
        color: var(--cBlue);
    }

    .history_list_cont p:last-of-type {
        margin-bottom: 0;
    }

.history_list_cont p i {
    color: var(--cBlue);
    margin-right: 0.5rem;
}

.history_list > div {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

.container .history_line {
    position: absolute;
    top: 0;
    left: 1.25rem;
    height: 100%;
    width: 0.1rem;
    background-color: var(--cGray);
    opacity: .5;
    display: block;
    z-index: -1;
}

.history_list .circle {
    display: block;
    width: 2rem;
    height: 2rem;
    background-color: var(--cBlue);
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    left: -4.75rem;
}

.history_list .circle.first {
    width: 2.5rem;
    height: 2.5rem;
    top: .6rem;
    left: -5rem;
}

    .history_list .circle.first::after {
        content: "";
        width: 1.25rem;
        height: 1.25rem;
        position: absolute;
        background-color: #FFFFFF;
        display: block;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

/*주요사례 -------------------------------- */
.text_projects {
    left: 26rem;
    top: 1.5rem;
}

.projects_img {
    position: absolute;
    left: calc(50% + 5rem);
    bottom: 0rem;
    z-index: 1;
    width: calc(100vw + 17.7rem);
    min-width: 192rem;
    height: 100%;
    /*    min-height: 50rem;*/
    transition: all 1.5s;
    background: url('../images/Business/bg_projects.jpg') left -30rem top -20rem no-repeat;
}

.projects_area {
    width: calc(50% - 5rem);
}

.projects_area .projects_list {
    padding-right: 2rem;
    width: 100%;
}

    .projects_area .projects_list li {
        position: relative;
        padding: 1.4rem 2rem 1.6rem 4.5rem;
        border-bottom: 0.1rem solid var(--cGray);
        font-size: var(--fs-20);
        height: 5.1rem;
    }

        .projects_area .projects_list li:hover {
            font-size: var(--fs-22)
        }

        .projects_area .projects_list li::before {
            content: "\e92c";
            font-family: xeicon;
            color: var(--cBlue);
            left: 1.5rem;
            position: absolute;
        }

        .projects_area .projects_list li:hover {
            color: #FFF;
            background-color: var(--cBlue);
            transition: all ease-in-out .3s;
        }
        .projects_area .projects_list li:hover::before {
            color: #FFF;
        }

/*데모 ------------------------------- */
.text_demo {
    left: 12.5rem;
    top: 1.5rem;
}

.demo_list {
    display: grid;
    row-gap: 5rem;
}

.demo_items {
    position: relative;
}

.demo_items .new_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.5rem;
    height: 5.5rem;
    background-color: var(--cBlue);
    border-radius: 50%;
    line-height: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFF;
    position: absolute;
    top: -2rem;
    z-index: 1;
}

.demo_thumb {
    position: relative;
    border-radius: 1.2rem;
    margin-bottom: 2.5rem;
    overflow: hidden;
    width: 100%;
    height: 30rem;
    background-color: var(--cGray);
}

.demo_name {
    margin-bottom: 2.5rem;
    text-align: center;
}

.demo_sns {
    display: flex;
    justify-content: center;
    width: 100%;
    column-gap: 1rem;
}

.demo_link {
    width: 5rem;
    height: 5rem;
    display: block;
    background-color: var(--cGray);
    border-radius: 0.8rem;
}
    .demo_link a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFF;
        border-radius: 0.8rem;
        transition: all ease-in .3s;
    }
        .demo_link a:hover {
            background-color: var(--cBlue);
        }

        .demo_items i {
            color: #FFFFFF;
            font-family: "Font Awesome 7 Brands";
            font-style: normal;
            font-size: 2.8rem;
        }

/*오시는길 -------------------*/
.text_location {
    left: 27.5rem;
    top: 1.5rem;
}

.location_info ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: -2.5rem;
}

.location_info li {
    padding: 0 0 0 2.8rem;
    position: relative;
    margin-top: 2.5rem;
    margin-right: 2.5rem;
    line-height: 1.5;
}

    .location_info li::before {
        position: absolute;
        left: -.3rem;
        color: var(--cBlue);
        font-family: xeicon;
    }

    .location_info li.map_marker::before {
        content: "\eb59";
    }

    .location_info li.call::before {
        content: "\e9d3";
    }

    .location_info li.fax::before {
        content: "\e9bc";
    }
    .location_info li.mail::before {
        content: "\ea06";
    }

.location_area .location {
    display: block;
    width: 100%;
    height: 45rem;
}

    .location_area .location iframe {
        width: 100%;
        height: 100%;
        background-color: #FFF;
    }

/*사업영역----------------------------*/
.text_business {
    left: 26rem;
    top: 1.5rem;
}

.business_tab_area {
    width: 100%;
}

.business_tab_wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: -4rem;
}

.tab_item {
    cursor: pointer;
    padding-bottom: 0.5rem;
    color: var(--cGray);
    font-weight: 500;
    margin-right: 5rem;
    margin-top: 1.5rem;
}

    .tab_item:hover {
        color: var(--cBlue);
/*        font-weight: 800;*/
        transition: all .3s;
    }

    .tab_item.active {
        border-bottom: 0.2rem solid var(--cBlue);
        color: var(--cBlue);
        font-weight: 800;
    }

.business_img_area {
    border: 0.1rem solid var(--cGray);
}

    .business_img_area img {
        display: none;
    }
        .business_img_area.pc {
            display: block;
        }

        .business_img_area.mobile {
            display: none;
        }

        .business_img_area .img_active {
            display: block;
        }

@media screen and (min-width: 960px) {
    .demo_list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 768px) {
    .demo_list {
        -moz-column-gap: 3.3rem;
        column-gap: 3.3rem;
    }

    .new_icon {
        right: -2rem;
    }
}
/*서브페이지 타이틀 영역 애니메이션 -------------------- */

.focus-in-expand {
    -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}