:root {
    --tit-xxxl: clamp(3rem, 6vw, 7rem);
    --tit-xxl: clamp(2.8rem, 5.5vw, 6rem);
    --tit-xl: clamp(2.6rem, 5vw, 5.2rem);
    --tit-l: clamp(2.2rem, 3vw, 4rem);
    --tit-ml: clamp(2.1rem, 3vw, 3.8rem);
    --tit-m: clamp(2rem, 3vw, 3rem);
    --tit-s: clamp(1.7rem, 2.8vw, 2.4rem);
    --txt-xl: clamp(1.6rem, 2.5vw, 2.2rem);
    --txt-l: clamp(1.5rem, 2.2vw, 2rem);
    --txt-m: clamp(1.4rem, 2vw, 1.8rem);
    --txt-s: clamp(1.3rem, 1.75vw, 1.6rem);
    --txt-xs: clamp(1.2rem, 1.5vw, 1.4rem);
}

/* header */
header {
    position: fixed;
    z-index: 98;
    width: 100%;
    height: var(--header-h);
    margin: 0 auto;
    top: 0;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.logo-wrap {
    position: relative;
    height: 100%;
}

.nav-wrap {
    height: 100%;
    padding: 0 var(--side-space);
    width: 100%;
    box-sizing: border-box;
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.logo {
    width: 147px;
    height: var(--header-h);
    background: var(--logo-w);
    z-index: 1111;
    position: absolute;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.lang {
    right: 0;
}

.lang a {
    opacity: 0.5;
    font-size: 1.8rem;
    margin-left: 10px;
    position: relative;
}

.lang img {
    width: 20px;
}

.lang a.on {
    opacity: 1;
}

.lang a.on:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 2px;
    background: #fff;
}

.lang a:hover {
    opacity: 1;
}

.lang .text-tween {
    height: 18px;
}

.btn-logout {
    opacity: 1;
    position: absolute;
    font-size: 14px;
    padding: 2px 8px;
    right: 80px;
}

.btn-logout::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    bottom: 0;
    border-radius: 100px;
    border: 1px solid #fff;
    opacity: 0.5;
}

@media screen and (max-width:768px) {
    .btn-logout {
        right: 40px;
        font-size:13px;
    }
}



/* pc menu */
.menu_wrap {
    text-align: center;
}

.d_menu {
    text-align: center;
    display: inline-block;
    font-size: 0;

    &>li {
        display: inline-block;
        padding: 0 40px;
        height: var(--header-h);
        line-height: var(--header-h);
        text-align: center;
        position: relative;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;

        &>a {
            font-size: var(--txt-m);
            font-weight: 600;
            color: #fff;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 0.1rem
        }

        &:hover ul {
            opacity: 1;
            pointer-events: auto;
            margin-left: calc((var(--menu-width)/2) * -1);
        }
    }

    & ul {
        --menu-width: 210px;
        position: absolute;
        top: calc(var(--header-h) - 20px);
        left: 50%;
        margin-left: calc((var(--menu-width)/2 + 20px) * -1);
        border-radius: 5px;
        opacity: 0;
        pointer-events: none;
        overflow: Hidden;
        -webkit-transition: 0.5s all 0.1s;
        -moz-transition: 0.5s all 0.1s;
        -ms-transition: 0.5s all 0.1s;
        -o-transition: 0.5s all 0.1s;
        transition: 0.5s all 0.1s;
        background: rgb(var(--dark-rgb)/ 90%);
        will-change: background-color;
        -webkit-backdrop-filter: blur(3ps);
        backdrop-filter: blur(3px);
        padding: 10px 0;

        & li {
            position: relative;
            font-size: var(--txt-s);
            text-align: center;
            min-width: var(--menu-width);
            --padding: 10px;
            line-height: 2;

            &::before {
                content: '';
                position: absolute;
                left: 20px;
                right: 20px;
                bottom: 0;
                height: 1px;
                opacity: 0.3;
                background: rgb(255, 255, 255);
                background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.05) 100%);
                background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.05) 100%);
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.05) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1);
            }

            &:last-child:before {
                display: none;
            }

            a {
                color: var(--font-gray);
                display: block;
                width: 100%;
                font-weight: 500;
                position: relative;
                z-index: 1;
                padding: 10px;

                &:hover {
                    color: #fff;
                }
            }
        }
    }
}


/* mobile menu */
.sidenav {
    display: none;
}

.burger_box {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 111;
    width: var(--header-h);
    height: var(--header-h);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.menu-icon-container {
    width: 100%;
    height: 100%;
}

.menu-icon {
    display: inline-block;
    float: none;
    opacity: 1;
    z-index: 100;
    color: #000;
    font-size: 1.3rem;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-align: center;
}

.menu-icon_box {
    --ham-width: 20px;
    display: inline-block;
    width: var(--ham-width);
    height: calc(var(--ham-width) - 4px);
}

.menu-icon_line {
    background: #fff;
    display: inline-block;
    height: 2px;
    position: absolute;
    left: 0;
    width: 100%;

    &.menu-icon_line--1 {
        top: 0;
        transition: top 200ms 250ms, transform 200ms;
        -webkit-transition: top 200ms 250ms, -webkit-transform 200ms;
    }

    &.menu-icon_line--2 {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        transition: opacity 0ms 300ms;
        -webkit-transition: opacity 0ms 300ms;
    }

    &.menu-icon_line--3 {
        bottom: 0;
        transition: bottom 100ms 300ms, transform 200ms;
        -webkit-transition: bottom 100ms 300ms, -webkit-transform 200ms;
    }
}

.menu-icon.opened .menu-icon_box {
    transform: scale3d(0.9, 0.9, 0.9);
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    margin-top: calc(var(--ham-width)/2 * -1);
    margin-left: calc(var(--ham-width)/2 * -1);
}

.menu-icon.opened .menu-icon_line {
    top: 13px;

    &.menu-icon_line--1 {
        transform: rotate3d(0, 0, 1, 45deg);
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transition: top 100ms, transform 200ms 250ms;
        -webkit-transition: top 100ms, -webkit-transform 200ms 250ms;
    }

    &.menu-icon_line--2 {
        opacity: 0;
        transition: opacity 200ms;
        -webkit-transition: opacity 200ms;
    }

    &.menu-icon_line--3 {
        transform: rotate3d(0, 0, 1, -45deg);
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transition: top 200ms, transform 200ms 250ms;
        -webkit-transition: top 200ms, -webkit-transform 200ms 250ms;
    }
}

.side_menu {
    background: rgb(var(--primary-rgb)/ 50%);
    height: 100%;
    right: -100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.sd-menu-con {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow-y: auto;

    &::before,
    &::after {
        top: 0;
        content: "";
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: rgba(234, 234, 234, 0.2);
        z-index: -1;
        transform: translateX(100%) translateY(0);
    }

    &::after {
        background: rgb(0 0 0 / 50%);
        transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
    }

    &::before {
        background: var(--dark);
        transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
        z-index: 1;
    }
}

/*모바일메뉴 오픈 시*/
.sideOpen:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgb(0, 0, 0, 0.4);
    width: 100%;
    height: 100vh;
    z-index: 90;
}

.sideOpen .side_menu {
    right: 0;
    transition: cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}

.sideOpen .burger_box {
    right: 0;
}

.sideOpen .sd-menu-wrap {
    transition: transform .55s cubic-bezier(.65, .05, 0, 1);
}


.sideOpen .sd-menu-con:before {
    transition-delay: 0.2s;
    transform: translateX(0%) translateY(0%);
}

.sideOpen .sd-menu-con:after {
    transition-delay: 0.1s;
    transform: translateX(0%) translateY(0%);
}

/*모바일 1차메뉴*/
.sd-menu-wrap {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 0 50px;
    height: 100%;
}

.sd-menu-wrap .lang {
    padding-top: 30px;
}

.sd-menu-wrap .lang a.on:before {
    display: none;
}

.sd-menu-wrap .lang a {
    margin-left: 5px;
    margin-right: 7px;
}

.sd-menu-w {
    margin-top: 60px;
    max-height: calc(100% - 210px);
    width: 100%;
}

.wheel-st {
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 0px;
    }

    &::-webkit-scrollbar-thumb {
        background: rgb(255 255 255 / 10%);
        border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
        background: none;
    }
}

.sd-menu-list {
    --sd-space: 30px;
    position: relative;
    cursor: pointer;
    padding-left: 20px;
    border-left: 2px solid var(--gray);
}

.sd-menu-list:before {
    content: '';
    position: absolute;
    left: -2px;
    width: 2px;
    background-color: var(--secondary);
    top: 0;
    height: 0;
    transition: 0.3s;
}

.sd-menu-list.on:before {
    height: calc(100% - var(--sd-space) - 15px);
}

.sd-menu-list> :is(a, span) {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: var(--sd-space);
    color: #fff;
    display: block;
    cursor: pointer;
    text-transform: uppercase;
    cursor: pointer;
}

.sd-menu-list:last-child> :is(a, span) {
    padding-bottom: 0;
}

.sd-menu-list:last-child .sd-smenu {
    margin-top: var(--sd-space);
    padding-bottom: 0 !important;
}

.sd-menu-list:last-child.on:before {
    height: 100% !important;
}

.sd-menu-list:hover> :is(a, span) {
    color: var(--secondary);
}

.sd-menu-list span::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z'%3E%3C/path%3E%3C/svg%3E");
    position: absolute;
    background-size: 100%;
    width: 24px;
    height: 24px;
    top: 7px;
    right: 0;
    transition: .4s;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 100px;
    opacity: 0.5;
}

.sd-menu-list.on span {
    color: var(--secondary);
}

.sd-menu-list.on span::after {
    transition: .4s;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(360deg);
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(10,142,255,1)'%3E%3Cpath d='M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z'%3E%3C/path%3E%3C/svg%3E");
    border: 1px solid rgb(var(--secondary-rgb)/50%);
    opacity: 1;
}

.logo-menu {
    position: absolute;
    width: 90px;
    right: 50px;
    bottom: 0;
    opacity: 0.1;
}

/*모바일 2차메뉴*/
.sd-smenu {
    position: relative;
    z-index: 1;
    display: none;
    padding-bottom: calc(var(--sd-space) + 10px);
    transform: translateY(-10px);
    padding-left: 20px;
}

.sd-smenu li {
    font-size: 1.7rem;
    position: relative;
    text-align: left;
    margin-bottom: 10px;
    color: var(--font-gray);
}

.sd-smenu li:last-child {
    margin-bottom: 0;
}

.sd-smenu li:hover a {
    color: #fff !important;
}

.sd-smenu li a {
    font-weight: 400 !important;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -o-transition: all 0.15s;
    -ms-transition: all 0.15s;
    transition: all 0.15s;
    line-height: 32px !important;
    display: block;
}

.sd-smenu li a:hover {
    color: var(--secondary);
}


/*스크롤했을때 변화*/
.scroll header {
    height: var(--header-h-s);
}

.scroll header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgb(var(--dark-rgb)/ 50%);
    will-change: background-color;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.scroll .logo {
    width: 90px;
    height: var(--header-h-s);
}

.scroll .d_menu ul {
    top: var(--header-h-s);
}

.scroll .d_menu>li {
    height: var(--header-h-s);
    line-height: var(--header-h-s);
}

.scroll .burger_box {
    height: var(--header-h-s);
}

.scroll :is(.d_menu>li, .logo, .lang) {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}


.menu-sns {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 50px;
}

.menu-sns li {
    margin-right: 10px;
    opacity: 0.5;
}

.menu-sns li:hover {
    opacity: 1;
}

.menu-sns li img {
    width: 36px;
}

/* 반응형 */
@media screen and (max-width:1500px) {
    .d_menu li {
        padding: 0 20px;
    }

    .logo {
        width: 100px;
    }
}

@media screen and (max-width:1000px) {
    .logo {
        width: 90px;
        height: var(--header-h-s);
    }

    .d_menu li a {
        font-size: var(--txt-s);
    }

    .d_menu li {
        padding: 0 10px;
    }
}

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

    .d_menu,
    .logo-wrap .lang {
        display: none;
    }

    .sidenav {
        display: block
    }

    .logo {
        width: 90px;
        height: var(--header-h-s);
    }

    .sd-menu-wrap {
        padding: 0 30px;
    }

    .sd-menu-w {
        margin-top: 40px;
    }

    .menu-sns {
        padding: 20px 30px
    }
}

@media screen and (max-width:600px) {
    .scroll #tothetop {
        display: none;
    }
}

#tothetop {
    position: fixed;
    z-index: 90;
    right: 20px;
    bottom: 30px;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    text-align: center;
    font-size: var(--txt-xs);
}

#tothetop span {
    display: block;
    width: 40px;
    height: 40px;
    background: url(../images/common/icon_top.svg) no-repeat center/ auto 100%;
    opacity: 0.5;
}

#tothetop:hover span {
    opacity: 1;
}

.scroll #tothetop {
    opacity: 1;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}


footer {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 60px var(--side-space);

    padding-bottom: 0;
    position: relative;
    background: #0a0a0a;
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    margin-top: calc(var(--radius-s)*-1) !important;
    z-index: 1;


    .footer-con {
        font-size: var(--txt-l);

        span {
            padding: 0 10px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                left: 50%;
                top: 2px;
                bottom: 2px;
                width: 1px;
                background: rgb(255 255 255 / 20%);
                transform: translateX(-50%);
            }
        }

        p {
            margin-top: 5px;
            font-weight: 300;
            margin-bottom: 10px;
        }
    }

    .family-site button {
        width: 150px;
        height: 61px;
        text-align: center;
        display: block;
        transition: 0.3s;
        border-radius: 100px;

        img {
            margin: 0 auto;
        }
    }

    .f-sns {
        ul li {
            transition: 0.3s;
            border-radius: 100px;

            a {
                padding: 5px;
                display: block;
            }
        }

        img {
            width: 48px;
        }
    }

    @media (hover: hover) and (pointer: fine) {

        .family-site button:hover,
        .f-sns ul li:hover {
            background: var(--gray);
        }

        .footer-contact ul li:hover {
            color: #eee;
        }
    }
}

.footer-menu {
    margin-top: 160px;
}

.footer-menu ul li {
    margin-right: 30px;
}

.footer-con1 {
    font-size: var(--txt-m);
    font-weight: 500;
    text-transform: uppercase;
}

.footer-con2 {
    border-top: 1px solid rgb(255 255 255 / 30%);
    margin-top: 30px;
    padding: 15px 0;
    font-size: var(--txt-xs);
    color: rgb(255 255 255 / 50%);
    gap:20px;

    & a:hover {
        color: rgb(255 255 255 / 100%);
    }
}

.footer_symbol {
    width: 50px;
    margin-bottom: 30px;
}

.lower-case {
    text-transform: lowercase !important;
}

.footer-con a {
    text-decoration: underline;
    font-size: var(--tit-xxl);

    &:hover {
        opacity: 0.9;
    }
}

.family-site p {
    font-size: 1.4rem;
    text-transform: uppercase;
    opacity: 0.5;
    text-align: center;
}

.footer-menu .text-tween {
    height: 18px;
}

.text-tween {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
    overflow: hidden;
    line-height: 1;
}


@media screen and (max-width:1000px) {
    .footer-con {
        width: 100%;
    }

    .footer-btn {
        width: 100%;
        margin-top: 30px;
    }

    .family-site p {
        text-align: left;
        margin-bottom: 5px;
    }

    footer .family-site button {
        border-radius: var(--radius-8) !important;
        width: 100px;
    }
}


@media screen and (max-width:600px) {
    .footer-menu {
        margin-top: 50px;
    }

    .footer-con1 ul,
    .footer-con1 p.lower-case {
        display: none;
    }

    .footer_symbol {
        width: 30px;
        margin-bottom: 5px;
    }

    .footer-con2 {
        margin-top: 10px;
        padding: 10px 0 15px 0;
    }

    footer .f-sns img {
        width: 40px;
    }

    footer .family-site button {
        height: 40px;
    }

    .footer-con1 {
        font-size: var(--txt-xs)
    }
}

/*공통*/
.con {
    width: var(--con-m-w);
    margin: 0 auto;
    max-width: 90%;
}

.con.wide {
    width: var(--con-w);
}

.main-pad {
    padding: var(--main-padding) 0;
}

.main-tit {
    font-size: var(--tit-xxxl);
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.main-tit2 {
    font-size: var(--tit-xl);
}

.main-tit em {
    display: block;
    font-style: italic;
    font-weight: 500;
}

span.line {
    overflow: hidden;
}

.main-txt {
    font-size: var(--txt-l);
    color: var(--font-gray);
}



/*메인 비주얼*/
.main-visual {
    --visual-padding: 30vh;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 700px;
    height: calc(100vh + var(--visual-padding));
    position: relative;
}

.main-video {
    width: 100%;
    height: calc(100vh + var(--visual-padding));
    position: absolute;
    z-index: 1;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    mix-blend-mode: plus-lighter;
    opacity: 0.7;
}

.main-video::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--secondary);
    mix-blend-mode: overlay;
    opacity: 0.6;
}

/* .main-visual .bg-01 {
    width: 100%;
    height: 100%;
    position: relative;
    background: url(../images/main/main_visual01.jpg) no-repeat center/cover;
    transform: scale3d(1, 1, 1);
    -webkit-animation: mainFadeIn 3s 4s forwards;
    -o-animation: mainFadeIn 3s 4s forwards;
    animation: mainFadeIn 3s 4s forwards;
    opacity: 0;
    z-index: 2;
    display: none;
} */

.noise {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 100%);
    mix-blend-mode: difference;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-repeat: repeat;
}


.main-visual::before {
    content: '';
    position: absolute;
    z-index: 3;
    right: 0;
    left: 0;
    bottom: 0;
    height: calc(var(--visual-padding)*2);
    background: rgb(19, 19, 19);
    background: -moz-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
    background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131313", endColorstr="#131313", GradientType=1);
}

.main-visual-con {
    margin-top: calc((var(--visual-padding)/2) * -1);
    z-index: 11
}

.main-visual-con div {
    text-transform: uppercase;
    font-size: var(--tit-m);
    font-weight: 300;
}

.main-visual-con h2 {
    font-size: clamp(2.4rem, 4vw, 5.5rem);
    overflow: hidden;
}

.copy span {
    display: inline-block;
    overflow: hidden;
}


.showT {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    line-height: 1.3;
}

.showT>span {
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    animation: fade-up-txt .8s var(--d) ease-in-out both
}



@keyframes fade-up-txt {
    0% {
        transform: translateY(120%);
    }

    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes fade-up-txt {
    0% {
        transform: translateY(120%);
    }

    100% {
        transform: translateY(0);
    }
}

@-moz-keyframes fade-up-txt {
    0% {
        transform: translateY(120%);
    }

    100% {
        transform: translateY(0);
    }
}

@-ms-keyframes fade-up-txt {
    0% {
        transform: translateY(120%);
    }

    100% {
        transform: translateY(0);
    }
}

@-o-keyframes fade-up-txt {
    0% {
        transform: translateY(120%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-moz-keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-ms-keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-o-keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mainFadeIn {
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }

    0% {
        transform: scale3d(1.1, 1.1, 1.1);
        opacity: 0;
    }
}

@-webkit-keyframes mainFadeIn {
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }

    0% {
        transform: scale3d(1.1, 1.1, 1.1);
        opacity: 0;
    }
}

@-moz-keyframes mainFadeIn {
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }

    0% {
        transform: scale3d(1.1, 1.1, 1.1);
        opacity: 0;
    }
}

@media screen and (max-width:768px) {
    .main-visual-con h2 {
        max-width: 400px;
        width: 90%;
        margin: 0 auto;
    }
}

@media screen and (max-width:600px) {
    .main-visual {
        min-height: 500px;
        height: 100dvh;
    }

    .main-video {
        height: 100dvh;
    }

    .main-visual::before {
        height: 20dvh;
    }

    .main-visual-con {
        margin-top: 0;
    }
}

@media screen and (max-width:320px) {
    .main-visual-con h2 {
        font-size: 2rem;
    }
}


/*인트로*/
.intro-w {
    position: relative;
}

.intro-txt {
    /* position: absolute;
    top: 50px; */
    padding-top: var(--header-h);
    text-align: center;
    width: 100%;
    position: relative !important;
    left: auto !important;
    transform: none !important;
}

/* .intro-txt p {
    display: block !important;
    font-size: 0
}

.intro-txt p>span {
    font-size: 0;
    margin: 0 3px;
}

.intro-txt p>span>span {
    font-size: var(--tit-m);
} */

.intro-txt p {
    display: block !important;
    font-size: var(--tit-m);
}

[text-split] {
    opacity: 0;
}

.zoom-wrap {
    overflow: hidden;
}

.zoom-img {
    width: 100%;
    height: 100dvh;
    min-height: 600px;
    border-radius: var(--radius-s);
    /* background: url(../images/main/main_about.jpg) no-repeat center/cover; */
    transform: scale(0.4, 0.4);
    position: relative;
    z-index: -1;
    border-radius: 50px;
    overflow:hidden;
}


.image-cover {
    object-fit: cover;
    width: 100%;
    max-width: none;
    height: 100%;
    position: relative;
}

.zoom-title {
    opacity: 0;
    position: absolute;
    width: 90%;
    text-align: center;
    top: 35%;
    left: 5%;
    font-size: 20px;
}

.zoom-title h3 {
    font-size: var(--tit-xl);
    font-weight: 700;
}

.zoom-title p {
    font-size: var(--txt-xl);
    opacity: 0.3;
}

@media screen and (max-width:600px) {
    .zoom-img {
        transform: scale(1, 1);
        border-radius: 0;
    }

    .zoom-title {
        z-index: 1;
    }

    .zoom-wrap {
        margin-top: var(--main-padding);
        position: relative;
    }

    .zoom-img::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 50%;
        background: rgb(19, 19, 19);
        background: -moz-linear-gradient(0deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
        background: -webkit-linear-gradient(0deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
        background: linear-gradient(0deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131313", endColorstr="#131313", GradientType=1);
    }
}

/*핵심가치*/
.main-core-value {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.main-core-value::before,
.main-core-value::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--main-padding);
    background: rgb(19, 19, 19);
    background: -moz-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
    background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131313", endColorstr="#131313", GradientType=1);
}

.main-core-value::after {
    bottom: auto;
    top: 0;
    transform: rotate(180deg);
}

.main-value-content {
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    padding: var(--main-padding) 0;
}

.value-left,
.value-right {
    width: 50%;
}

.value-left .main-tit {
    font-weight: 100;
}

.main-value-box {
    --value-box-size: 440px;
}

.right-content {
    width: 100%;
    max-width: var(--value-box-size);
    margin-bottom: 220px;
}

.value02 {
    margin-left: auto;
}

/* .value01 .main-value-img {
    background-image: url(../images/main/value01.webp);
} 

.value02 .main-value-img {
    background-image: url(../images/main/value02.webp);
}

.value03 .main-value-img {
    background-image: url(../images/main/value03.webp);
}*/

.main-value-img {
    width: var(--value-box-size);
    height: var(--value-box-size);
    border-radius: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.main-value-img:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 400px 400px;
    background-repeat: repeat;
    z-index: 1;
}

.main-value-img img {
    position: absolute !important;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
}

.main-value-con {
    margin-top: -80px;
    position: relative;

    h2 {
        line-height: 1;
        font-size: var(--tit-m);

        b {
            font-size: 85px;
            font-weight: 800;
        }
    }

    p {
        margin: 20px 0 10px 0;
        font-size: var(--txt-m)
    }

    span {
        opacity: 0.3;
        font-weight: 300;
    }
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: -1;
    opacity: 0.4;
}

.bg-video:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: var(--primary);
    mix-blend-mode: darken;
    opacity: 0.8;
}

.bg-video-content {
    height: 100%;
    width: 100%;
    object-fit: cover;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
    -webkit-playsinline: true;
}

.video-mb {display:none;}


@media screen and (min-width:1921px) {
    .main-value-box {
        --value-box-size: 460px;
    }
}

@media screen and (max-width:1500px) {
    .main-value-box {
        --value-box-size: 70%;
    }

    .main-value-img {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }
}

@media screen and (max-width:1000px) {
    .main-value-con h2 b {
        font-size: 60px
    }

}

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

    .value-left,
    .value-right {
        width: 100% !important;
        max-width: inherit !important
    }

    .value-left .main-txt br {
        display: none;
    }

    .main-value-content {
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 100%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 0 !important;
        position: relative;
        z-index: 1;
    }

    .value-left .main-tit {
        text-align: center;
    }

    .value-left .main-tit em {
        display: inline-block;
        margin: 0 10px
    }

    .value-left .main-txt {
        text-align: center;
    }

    .main-value-box {
        --value-box-size: 60%;
    }

    .right-content {
        margin-bottom: 100px;
    }

    .value-right {
        padding: 5%;
        margin-top: 50px;
    }
}

@media screen and (max-width:600px) {
    .main-value-con h2 b {
        font-size: 8vw;
        display: block;
    }

    .right-content {
        margin-bottom: 40px;
        position: relative;
    }

    .right-content:last-child {
        margin-bottom: 0;
    }

    .main-value-con {
        margin-top: 0;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translateY(-50%);
    }

    .main-value-con p {
        display: none;
    }

    .main-value-con h2 {
        font-weight: 300;
    }

    .main-value-box {
        --value-box-size: 75%;
    }

    .value-right {
        padding: 5%;
        margin-top: 20px;
    }
    
    .video-pc {
        display: none !important;
    }
    
    .video-mb {
        display: block !important;
    }
}



/*OUR BUSINESS*/

.main-business {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.main-business-list {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    display: block;
}

.business-box {
    height: 50vh;
    width: 50vh;
    min-width: 350px;
    min-height: 350px;
    margin: 0 15px;
    display: inline-block;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--radius-s);
    position: relative;
    overflow: hidden;

    &:first-child {
        margin-left: var(--side-space);
    }

    &:last-child {
        margin-right: var(--side-space);
    }

    .bs-bg {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    a {
        display: block;
        width: 100%;
        height: 100%;

        &::after {
            content: '';
            z-index: 1;
            opacity: 0.2;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            mix-blend-mode: screen;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");    background-size: 400px 400px;
            background-repeat: repeat;
        }

        &::before {
            content: '';
            z-index: 2;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: rgb(19, 19, 19);
            background: -moz-linear-gradient(180deg, rgba(19, 19, 19, 0.2) 0%, rgba(19, 19, 19, 0) 33%, rgba(19, 19, 19, 0.3) 66%, rgba(19, 19, 19, 1) 100%);
            background: -webkit-linear-gradient(180deg, rgba(19, 19, 19, 0.2) 0%, rgba(19, 19, 19, 0) 33%, rgba(19, 19, 19, 0.3) 66%, rgba(19, 19, 19, 1) 100%);
            background: linear-gradient(180deg, rgba(19, 19, 19, 0.2) 0%, rgba(19, 19, 19, 0) 33%, rgba(19, 19, 19, 0.3) 66%, rgba(19, 19, 19, 1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131313", endColorstr="#131313", GradientType=1);
            opacity: 0.9;
        }
    }
}

@media (hover: hover) and (pointer: fine) {
    .business-box:hover a::before {
        background: var(--secondary);
        opacity: 0.7;
        transition: 0.3s;
        -o-transition: 0.3s;
        -ms-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
}


.bs-con {
    position: relative;
    z-index: 10;
    padding: 50px;
    height: 100%;
    white-space: normal;
}

.bs-con>* {
    width: 100%;
}

.bs-con img {
    width: 15px;
}

.txt-point {
    font-weight: 300;
    opacity: 0.5;
}

.txt-normal {
    font-weight: 300;
}

.bs-con h2 {
    font-size: var(--tit-m);
    margin-bottom: 10px;
    font-weight: 800;
}

.btn-more {
    display: flex;
    flex-wrap: wrap;
    font-weight: 300;
}

.btn-more img {
    margin-left: 10px;
}

.bs-box01:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #19AAED;
    opacity: 0.2;
}

.bs-box01 .bs-bg {
    /* background-image: url(../images/main/main_business01.webp); */
    opacity: 0.2;
}

.bs-box02 .bs-bg {
    /* background-image: url(../imag/es/main/main_business02.png); */
}

.bs-box03 .bs-bg {
    /* background-image: url(../images/main/main_business03.png); */
}

.bs-box04 .bs-bg {
    /* background-image: url(../images/main/main_business04.webp); */
    opacity: 0.2;
}

.bs-box05 .bs-bg {
    /* background-image: url(../images/main/main_business05.png); */
}

@media screen and (max-width:768px) {
    .business-box {
        height: auto;
        width: 100%;
        margin: 0;
        min-height: auto;
        min-width: auto;

        &:first-child {
            margin-left: 0;
        }
    }

    .main-business-list {
        width: 90%;
        margin: 0 auto;
        white-space: normal;
    }

    .btn-more {
        margin-top: 40px;
    }
}

@media screen and (max-width:600px) {
    .business-box .txt-normal {
        display: none;
    }

    .bs-con {
        padding: 20px;
    }

    .bs-con .btn-more img {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .bs-con .btn-more span {
        display: none;
    }

    .bs-con h2 {
        margin-bottom: 40px;
    }

    /* .bs-box02 .bs-bg,
    .bs-box03 .bs-bg,
    .bs-box05 .bs-bg {
        background-size: 60%;
        background-position: center right;
    } */
   .bs-box02 .image-cover,
   .bs-box03 .image-cover,
   .bs-box05 .image-cover {
       width: 60%;
       margin-left: 40%;
    }

    .btn-more {
        margin-top: 0px;
    }
}

/*하단배너*/
.main-banner {
    position: relative;
    padding: calc(var(--main-padding)*2) 0;
    overflow: hidden;
    ;
}

.main-banner::before,
.main-banner::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    height: 15%;
    background: rgb(19, 19, 19);
    background: -moz-linear-gradient(0deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
    background: linear-gradient(0deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131313", endColorstr="#131313", GradientType=1);
    display: none;
}

.main-banner::before {
    top: 0;
}

.main-banner::after {
    bottom: 0;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}


.blob,
.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background: var(--primary);
    filter: blur(200px);
    transition: all 450ms ease-out;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(calc(-50% + 15px), -50%);
    z-index: -3;
}

/* .circle {display: none} */




.blob.sub-blob {

    width: 500px;
    height: 500px;

    filter: blur(200px);
}

.banner-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

.banner-txt {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.banner-txt h2 {
    font-size: clamp(2rem, 5.5vw, 6rem);
}

.banner-txt h2 span {
    display: block;
    font-weight: 300;
}

.banner-txt p {
    color: rgb(255 255 255 / 50%);
    font-size: var(--txt-xl);
    font-weight: 100;
    margin-top: 10px;
}

/*Products*/
/* .main-product { border-top:1px solid } */
.main-product-wrap {
    flex: 1 0 auto;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 80;
}

.main-pd-tit {
    margin-bottom: var(--con-space-m);
}

.main-pd-tit .main-txt {
    border-bottom: 1px solid;
    padding-bottom: var(--con-space-s);
    margin-bottom: var(--con-space-s);
}

.main-tit2.t-right a {
    justify-content: flex-end;
}

.main-tit2.t-right img {
    width: 50px;
    margin-left: 20px;
    transition: 0.3s;
}

.main-tit2.t-right a:hover img {
    margin-left: 40px;
}

.pd-item {
    width: 100%;
    height: 70vh;
    display: flex;
    position: relative;
}

.pd-item-con {
    --pd-padding: 50px;
    --top-ps: calc(var(--pd-padding)/1.5);
}

.pd-item-con>div {
    width: 49.5%;
    height: 55vh;
    border-radius: var(--radius-s);
    box-shadow: 0 -106px 100px rgb(var(--dark-rgb) / 70%);
}

.item01 .pd-item-con>div {
    box-shadow: none !important;
}

.pd-item-txt {
    background: var(--dark2);
    padding: 0 var(--pd-padding);
    padding-bottom: var(--pd-padding);
}

.pd-item-txt>div {
    width: 100%;
}

.pd-item-txt p {
    display: flex;
    width: fit-content;
    border: 1px solid rgb(255 255 255 / 40%);
    font-weight: 200;
    border-radius: 100px;
    padding: 5px 12px;
    margin-bottom: 8px;
}

.pd-item-title {
    padding: var(--top-ps) 0 0 0;
    position: relative;
    margin-bottom: var(--top-ps);
}

.pd-item-title span {
    position: absolute;
    right: 0;
    top: var(--top-ps);
}

.pd-item-txt h2 {
    display: block;
    font-size: var(--tit-l);
    font-weight: 700;
}

.pd-item-img {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow:hidden;
}

/* .item01 .pd-item-img {
    background-image: url(../images/main/pd01.webp);
}

.item02 .pd-item-img {
    background-image: url(../images/main/pd02_2.webp);
}

.item03 .pd-item-img {
    background-image: url(../images/main/pd03.webp);
}

.item04 .pd-item-img {
    background-image: url(../images/main/pd04.webp);
} */

.pd-more a {
    display: inline-block;
    text-align: center;
    background: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    color: var(--dark);
    font-weight: 600;
    position: relative;
    padding-right: 50px;
}

.pd-more.line a {
    color: #fff;
    background: none;
    border: 1px solid rgb(255 255 255 / 50%);
}

.pd-more.line a:hover {
    border-color: #fff;
}

.pd-more span {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1 !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    right: 20px;
    transition: 0.3s;
}

.pd-more a:hover span {
    transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) rotate(90deg);
    -o-transform: translateY(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) rotate(90deg);
}

@media screen and (max-width:1000px) {
    .pd-item-txt p {
        border-radius: var(--radius-8)
    }

    .pd-item-con {
        --pd-padding: 30px;
    }
}

@media screen and (max-width:768px) {
    .pd-item-con>div {
        width: 100%;
        height: 50vh !important;
    }

    .pd-item-txt p {
        display: none
    }

    .pd-item-con>div.pd-item-txt {
        border-radius: var(--radius-s) var(--radius-s) 0 0 !important;
        height: 20vh !important;
    }

    .pd-item-img {
        border-radius: 0 0 var(--radius-s) var(--radius-s) !important;
        height: 50vh !important;
    }

    .pd-more a {
        padding: 5px 10px;
        padding-right: 40px;
    }

    .pd-more span {
        right: 10px;
    }

    .main-pd-tit .main-tit2.t-right {display: subgrid;}
    .main-tit2.t-right a:hover img {
        margin-left: 20px;
    }

    .main-tit2.t-right img {
        width: 30px;
    }
}

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

    .pd-item-con {
        --pd-padding: 20px;
    }

    .blob,
    .circle {
        width: 210px;
        height: 210px;
        filter: blur(110px);
    }
    .sub-con-wrap .circle {display: none;}
}

/*스크롤바 커스텀*/
.scroll-bar-wrap {
    position: fixed;
    display: flex;
    bottom: 2.5px;
    right: 2.5px;
    top: 2.5px;
    z-index: 99;
    width: 6px;
    justify-content: center;
}

.scroll-bar {
    height: 30px;
    min-height: 20px;
    width: 100%;
    cursor: grab;
    border-radius: 9999px;
    background: rgb(102 102 102 / 70%);
    opacity: 0;
    transition: 0.3s;
}

.lenis-scrolling .scroll-bar {
    opacity: 1;
}

.drag .scroll-bar,
.scroll-bar-wrap:hover .scroll-bar,
.scroll-bar:hover {
    opacity: 1 !important;
    background: rgb(136, 136, 136);
}

/*Identity*/
.tab-container {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
}

.tab-layout-container {
    width: 100%;
    height: 100%;
    padding-left: 80px;
    padding-top: 10px;
    padding-bottom: 20px;
    max-width: calc(var(--con-m-w)/2);
}

.tab-container-bottom {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    width: 100%;
}

.tab-container-top {
    grid-row-gap: 10px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.tab-layout-col {
    width: 50%;
}

.tab-content-wrap {
    width: 100%;
    position: relative;
}

.content-p {
    font-size: var(--txt-m);
}

.tab-button__bg {
    z-index: 0;
    background-color: #efeeec0f;
    border-radius: .25em;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.tab-content-item {
    z-index: 1;
    grid-column-gap: 1.25em;
    grid-row-gap: 1.25em;
    visibility: hidden;
    flex-flow: column;
    display: flex;
    position: absolute;
    inset: auto 0% 0%;
    color: var(--font-gray-l);
    padding-left: 20px;
}

.tab-content-item.active {
    visibility: visible;
}

.tab-layout {
    z-index: 1;
    grid-row-gap: 3em;
    flex-flow: wrap;
    width: 100%;
    min-height: 600px;
    display: flex;
    position: relative;
}

.filter-button {
    position: relative;
    width: 100%;
    text-align: left;
    border-radius: .25em;
}

.filter-button__p {
    z-index: 1;
    font-size: var(--tit-ml);
    position: relative;
    display: block;
    padding: 15px 20px;
    font-weight: 700;
    color: rgb(255 255 255 / 20%);
}

.filter-button.active .filter-button__p {
    color: #fff;
}

.tab-visual-wrap {
    border-radius: .5em;
    width: 100%;
    height: 100vh;
    max-height: 700px;
    position: relative;
    overflow: hidden;
}

.tab-visual-item {
    visibility: hidden;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
}

.tab-visual-item.active {
    visibility: visible;
}

.tab-image {
    object-fit: cover;
    border-radius: .5em;
    width: 100%;
    max-width: none;
    height: 100%;
    position: relative;
}

.tab-visual-item:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");    
    background-size: 400px 400px;
    background-repeat: repeat;
}

.tab-content__heading {
    font-size: var(--txt-l);
    font-weight: 700;
}

.tab-layout-heading {
    font-size: var(--txt-s);
    font-weight: 600;
    color: var(--secondary);
    margin-left: 20px;
    text-transform: uppercase;
}

@media screen and (max-width:1300px) {
    .filter-button__p {
        font-size: (2.1rem, 2vw, 3.8rem)
    }

    .tab-layout-container {
        padding-left: 40px;
    }

    .tab-visual-wrap {
        min-height: 600px;
    }
}

@media screen and (max-width:1000px) {
    .tab-layout-container {
        padding-left: 40px;
    }

    .tab-visual-wrap {
        height: 100%;
        max-height: auto;
    }
}

@media screen and (max-width:768px) {
    .tab-layout-col {
        width: 100%;
    }

    .tab-layout-container {
        padding-left: 0;
    }

    .tab-layout-col:last-child {
        order: -1;
    }

    .tab-visual-wrap {
        height: 0;
        padding-bottom: 60%;
        min-height: auto;
    }

    .tab-layout {
        grid-row-gap: 0rem;
    }

    .tab-container-bottom {
        padding: 20px;
        position: absolute;
        bottom: 0;
    }

    .tab-container-top {
        padding: 0;
    }

    .tab-container-bottom::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1000%;
        background: rgb(19, 19, 19);
        background: -moz-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 0.9) 100%);
        background: -webkit-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 0.9) 100%);
        background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 0.9) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131313", endColorstr="#131313", GradientType=1);
    }

    .tab-content__heading {
        color: #fff;
    }

    .tab-content-item {
        grid-row-gap: 0.5em;
        padding: 10px;
    }

}

@media screen and (max-width:600px) {
    .filter-button__p {
        padding: 10px;
    }

    .tab-container-bottom {
        margin-top: 110px;
        padding: 10px;
    }

    .tab-layout {
        min-height: inherit;
    }

    .tab-visual-wrap {
        height: 0;
        padding-bottom: 100%;
    }

    .content-p {
        font-size: 1.2rem;
    }

    .tab-layout-heading {
        margin-left: 10px
    }

    .filter-button__p {
        color: rgb(255 255 255 / 50%);
    }

    .scroll-bar-wrap {
        width: 3px;
    }

}



/*news*/
.main-news {
    /* background: var(--dark); */
    position: relative;
    width: 100%;
    overflow: hidden;
}

.main-news-wrap {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgb(255 255 255 / 10%);
    border-right: none;
    border-bottom: none;
    margin-top: 40px;
}

.main-news-wrap li {
    width: 25%;
    position: relative;
    border-right: 1px solid rgb(255 255 255 / 10%);
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.main-news-wrap li a {
    padding: var(--con-space-s);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 400 / 360;
}

.main-news-wrap li h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
    font-weight: 500;
}

.main-news-wrap li::after {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100%);
    height: calc(100%);
    pointer-events: none;
    content: "";
    border: 1px solid transparent;
    transition: border-color .2s linear
}

.main-news-wrap li:hover:after {
    border-color: #fff;
    transition: border-color .5s linear
}

.main-news-wrap li span {
    background: rgb(255 255 255 / 10%);
    padding: 3px 10px;
    display: inline-block;
    border-radius: 4px;
    font-size: var(--txt-xs);
    font-weight: 300;
}

.main-news-wrap li h3 {
    font-size: var(--tit-s);
    margin: 10px 0 20px 0;
}

.main-news-wrap li p {
    color: var(--font-gray);
    font-size: var(--txt-s);
    margin-bottom: 20px;
}

.main-news-wrap li .news-more {
    width: 100%;
    text-align: center;
    background: rgb(255 255 255 / 10%);
    padding: 10px;
    border-radius: 4px;
}

.main-news-wrap li:hover .news-more {
    background: rgb(255 255 255 / 100%);
    color: var(--dark);
}

.news-all a {
    text-align: center;
    justify-content: center !important;
}

.main-news-wrap li.news-all h3 {
    font-size: var(--tit-m);
}

.main-news-wrap li.news-all .news-more {
    background: none !important;
}

.main-news-wrap li.news-all .news-more span {
    background: #fff;
    color: var(--dark);
    font-weight: 700;
    padding: 10px 20px;
}

@media screen and (max-width:1000px) {
    .main-news-wrap li {
        width: 50%;
    }

    .main-news-wrap li a {
        aspect-ratio: 1
    }
}

@media screen and (max-width:600px) {
    .main-news-wrap li {
        width: 100%;
    }

    .main-news-wrap li a {
        aspect-ratio: 5/3;
        padding: 20px;
    }

    .main-news-wrap li:nth-child(3) {
        display: none;
    }
}

/*privacy*/
.terms {
    color: #ffffff8f;
    font-size: var(--txt-s);
    font-weight: 300
}

.terms h3 {
    margin-top: var(--con-space-m);
    font-size: var(--tit-s);
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

.terms p {
    --term-margin: 10px;
    margin: 5px 0;
    text-indent: -1.6rem;
    padding-left: 1.6rem;
    width: calc(100% - var(--term-margin));
}

.terms div {
    padding-left: 1rem;
    margin: 2px 0 10px 0;
}

.terms div span {
    visibility: hidden;
}

/*서브페이지*/
.sub-con-wrap {
    width: 100%;
    overflow: hidden !important;
    position: relative;
}

.sub-top {
    width: var(--con-w);
    margin: 0 auto;
    margin-top: calc(var(--header-h));
    padding: var(--con-space-l) 0;
    text-align: center;
}

.sub-navi {
    justify-content: center;
}

.t-left .sub-navi {
    justify-content: left;
}

.sub-top-title {
    font-size: var(--tit-xxxl);
}

.sub-top-txt {
    font-size: var(--txt-l);
    margin-top: var(--con-space-s);
}

.sub-tit {
    font-size: var(--tit-xxl);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 50px;
}

.sub-tit2 {
    font-size: var(--txt-l);
    margin-bottom: var(--con-space-l);
    margin-top: 10px;
}

.sub-pt {
    display: block;
    font-size: var(--txt-s);
    font-weight: 600;
    color: var(--secondary);
    text-transform: uppercase;
    margin-bottom: 1px;
}

.sub-pad {
    padding: var(--sub-padding) 0;
}

.color-dark {
    color: var(--dark);
}

.color-dark .ft-con h3 {
    margin-bottom: var(--con-space-l);
}

.color-dark.type2 .ft-con h3 {
    margin-bottom: 0 !important;
}

.feature-list.type2 li {
    justify-content: normal
}

@media screen and (max-width:768px) {
    .sub-tit {
        margin-bottom: 30px;
    }
}

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

    .sub-tit {
        margin-bottom: 20px;
    }

    .sub-navi {
        opacity: 0.5;
    }

    .sub-navi span:nth-child(4),
    .sub-navi .sub-navi-tit:last-child {
        display: none;
    }

    .sub-navi img {
        width: 10px;
    }
}

/*문의하기*/
.contact-form {
    width: 100%;
    overflow: hidden;
}

.contact-form li {
    width: 48%;
    overflow: hidden;
    padding: 10px 0;
    margin: 7px 0;
}

.group {
    position: relative;
}

.group.w100 {
    width: 100% !important;
}

.group input,
.group textarea {
    background: none;
    font-size: 18px;
    padding: 15px 0;
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #4F4F4F;
    font-weight: 500;
}

.group label.focused {
    top: 0;
    font-size: 12px;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}

.group input:focus~.bar:before,
textarea:focus~.bar:before {
    width: 100%;
}

.group label {
    color: var(--gray2);
    font-size: 18px;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: 300ms ease all;
    transition: 300ms ease all;
}

.bar {
    position: relative;
    display: block;
    width: 100%;
}

.bar:before {
    content: '';
    height: 2px;
    width: 0;
    bottom: 0px;
    position: absolute;
    background: var(--dark);
    -webkit-transition: 300ms ease all;
    transition: 300ms ease all;
    left: 0%;
}

.file {
    position: relative;
    border-bottom: 1px solid #4F4F4F;
    height: 54px;
    font-size: 18px;
}

.file label {
    position: absolute;
    font-size: 14px;
    top: 50%;
    right: 0 !important;
    left: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: 300ms ease all;
    transition: 300ms ease all;
    color: var(--gray2);
}

#file-chosen {
    display: inline-block;
    color: var(--gray2);
    background: none;
    height: 54px;
    line-height: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    width: 100%;
    padding-right: 70px;
    font-weight: 500;
}

.file input[type="file"] {
    position: absolute;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    height: 54px;
    width: 100%;
    cursor: pointer;
}

#file-chosen.focused2 {
    color: var(--dark);
}


.contact-wrap .sub-txt {
    width: 36%;
}

.contact-wrap .sub-top-title {
    text-align: left;
}

.contact-con {
    width: 55%;
    background: #fff;
    padding: var(--con-space-m);
    border-radius: var(--radius-s);
    border: 1px solid rgb(255 255 255 / 5%);
    color: var(--dark);
}

.contact-form textarea {
    width: 100%;
}

.alertbox {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transition: 1s;
    opacity: 0;
    z-index: -1;
    text-align: right;
    padding: var(--con-space-xs);
    padding-right: calc(var(--con-space-xs) + 25px);
    color: var(--secondary);

}

.alertbox .box {
    opacity: 1;
}

.contact-info input {
    opacity: 0;
}

.contact-info {
    margin-top: var(--con-space-m);
}

.contact-info li {
    width: 49%;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--radius-s);
    padding: var(--con-space-s);
    position: relative;
    transition: 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .contact-info li:hover {
        border: 1px solid rgb(var(--secondary-rgb)/50%);
    }
}

.contact-info li button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.contact-info .text {
    font-size: var(--tit-s);
    font-weight: 600;
}

.contact-info li:before {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    background: url(../images/sub/file-copy-line.svg) no-repeat center/100%;
    right: var(--con-space-xs);
    top: var(--con-space-xs);
}

.contact-info li p {
    margin-bottom: 10px;
    opacity: 0.5;
}

.pv_btn {
    font-size: var(--txt-xs);
}

.pv_btn a {
    text-decoration: underline;
    margin-left: 5px;
}

.pv_btn a:hover {
    opacity: 0.8;
}

.submit_btn button {
    background: var(--primary);
    color: #fff;
    padding: 10px 30px;
    font-size: var(--txt-m);
    border-radius: var(--radius-xs);
    transition: 0.3s;
}

.submit_btn button:hover {
    background: var(--secondary);
}


@media screen and (min-width:1921px) {
    .contact-form textarea {
        height: 500px;
    }
}

@media screen and (max-width:1500px) {
    .contact-info {
        margin-bottom: var(--con-space-m);
    }

}


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

    .contact-form li {
        width: 100%;
        margin: 0
    }

    .group label {
        font-size: 1.6rem
    }

    .group label,
    #file-chosen,
    .group textarea {
        font-size: 1.6rem;
    }

    .group input,
    .group textarea {
        padding: 6px 0;
    }

    #file-chosen.focused2 {
        font-size: 1.8rem;
    }
}

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

    .group label,
    #file-chosen {
        font-size: 1.4rem
    }

    #file-chosen.focused2,
    .group textarea {
        font-size: 1.6rem;
    }

    .group label.focused {
        font-size: 1rem;
    }

    .submit_btn {
        width: 100%;
        margin-top: var(--con-space-m);
    }

    .submit_btn button {
        width: 100%;
        font-size: var(--tit-m);
        padding: 15px;
        ;
    }

    .contact-info li {
        border-radius: var(--radius-xs);
        width: 100%;
        margin-top: 10px;
        ;
    }

    .contact-info li p {
        margin-bottom: 0;
    }

    .contact-info li:before {
        width: 17px;
    }

    .group input,
    .group textarea,
    .group label,
    .file {
        font-size: 1.6rem;
    }
}

/*인사말*/
.navi-dot {
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 100px;
    margin: 0 10px;
}

.greeting-bg {
    background: url(../images/sub/greeting_bg.jpg) no-repeat center/cover;
    width: 100%;
    height: var(--sub-img-height);
    border-radius: var(--radius-8);
}

.greeting-con>div {
    width: 50%;
}

.greeting-left {
    padding-right: 100px;
    font-size: var(--tit-l);
    font-weight: 300;
}

.greeting-left b {
    font-weight: 700;
}

.greeting-right {
    border-top: 1px solid rgb(255 255 255 / 50%);
    padding-top: var(--con-space-m);
}

.greeting-right p {
    font-size: var(--tit-m);
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 600;
    ;
}

.greeting-right div {
    color: rgb(255 255 255 / 50%);
    font-size: var(--txt-l)
}

.greeting-right div b {
    color: #fff;
    margin-left: 10px;
}

.greeting-right div img {
    margin-left: 30px;
}

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

    .greeting-con>div {
        width: 100%;
    }

    .greeting-right {
        border-top: none
    }

    .greeting-right div img {
        width: 100px;
    }
}

@media screen and (max-width:768px) {
    .greeting-left br {
        display: none
    }

    .greeting-left {
        padding-right: 0;
    }

    .greeting-left b {
        display: block;
    }

    .greeting-con {
        max-width: 100% !important;
        padding-top: 30px !important;
    }
}


/*공지 · 뉴스*/
.board-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px
}

.board-list li {
    min-width: 0;
    --date-w: 80px;
    background: var(--dark2);
    transition: 0.3s;
    position: relative;
    border-radius: var(--radius-8);
}

.board-list li:hover {
    background: none;
}

.board-list li::after {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100%);
    height: calc(100%);
    pointer-events: none;
    content: "";
    border: 1px solid transparent;
    transition: border-color .2s linear;

    border-radius: var(--radius-8);
}

.board-list li:hover:after {
    border-color: #fff;
    transition: border-color .5s linear
}

.board-list li a {
    display: block;
    padding: var(--con-space-s);
    width: 100%;
}

.board-list li input.select-item {
    margin: 10px;
    margin-bottom: 0;
    display: block;
}

.toastui-editor-contents h1 {
    font-size: var(--tit-l) !important
}

.toastui-editor-contents h2 {
    font-size: var(--tit-ml) !important
}

.toastui-editor-contents h3 {
    font-size: var(--tit-m) !important
}

.toastui-editor-contents h4 {
    font-size: var(--tit-s) !important
}

.toastui-editor-contents h5 {
    font-size: var(--txt-xl) !important
}

.toastui-editor-contents h6 {
    font-size: var(--txt-l) !important
}

.toastui-editor-contents p {
    font-size: var(--txt-m) !important;
    margin: 0;
}

.b-subject {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 2 / 1;
}

.b-list-cate {
    text-align: center;
    width: var(--date-w);
    background: rgb(255 255 255 / 10%);
    border-radius: var(--radius-xs);
    margin-bottom: 10px;
}

.b-list-cate.type2 {
    background: rgb(255 255 255 / 10%);
}

.board-list li h3 {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
    font-size: var(--tit-s);
    margin-bottom: 5px;
    font-weight: 500;
}

.board-list li span {
    color: rgb(255 255 255 / 30%);
}

.search-wrap {
    --box-height: 40px;
    margin-bottom: var(--con-space-m);
    border-bottom: 1px solid #fff;
}

.search-field input {
    background: none;
    padding: 0 10px;
    font-size: var(--txt-s);
}

.search-wrap select {
    background: none;
    color: #fff;
    border: none;
    display: block;
    height: var(--box-height);
    font-size: var(--txt-s);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 20px;
    padding-right: 20px;
}

.search-wrap select option {
    color: var(--dark);
}

.search-wrap input {
    height: var(--box-height);
}

.search-submit {
    position: relative;
    background: url(../images/sub/search-line.svg) no-repeat center/50%;
}

.search-submit input {
    opacity: 0;
    cursor: pointer;
}

.page {
    margin-top: var(--con-space-m);
}

.page img {
    width: 30px;
}

.page .next img,
.page .last img {
    transform: rotate(180deg);
}

.page a {
    display: flex;
    width: 4rem;
    height: 4rem;
    text-align: center;
    align-items: center;
    line-height: 4rem;
    justify-content: center;
    font-size: var(--txt-l);
    margin: 4px;
    color: rgb(255 255 255 / 50%);
}

.page a:hover {
    color: #fff;
}

.page .on a {
    color: #fff;
    border: 1px solid rgb(255 255 255 / 50%);
    border-radius: 100%;
    font-weight: 600;
}

.page .arrow {
    opacity: 0.2;
}

.page .arrow:hover {
    opacity: 1;
}

.board-category a {
    color: rgb(255 255 255 / 40%);
    display: inline-block;
    font-size: var(--tit-s);
    margin-right: 10px;
    padding: 4px 16px;
}

.board-category a.on {
    color: #fff;
    background: var(--gray-blue);
    border-radius: var(--radius-xs);
}

.board-category a:hover {
    color: #fff;
}

.board-btn {
    margin-top: var(--con-space-s);
}

.board-btn .btn {
    padding: 10px 20px;
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 10%);
    font-size: var(--txt-m);
    border-radius: 4px;
}

.board-con-tit h2 {
    font-size: var(--tit-l);
    font-weight: 600;
}

.board-con-tit span {
    color: var(--gray2);
    font-weight: 500;
    display: block;
}

.board-con-tit b {
    color: var(--secondary);
    text-transform: uppercase;
    display: block;
    font-size: var(--txt-m)
}

.board-con-tit {
    padding: var(--con-space-s) 0;
    border-top: 1px solid rgb(255 255 255 / 100%);
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.board-con {
    margin: var(--con-space-m) 0;
    font-size: var(--txt-m);
}

.list-direction {
    border-top: 1px solid rgb(255 255 255 / 10%);
}

.list-direction a {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.list-direction div {
    --list-d-padding: 15px;
    padding: var(--list-d-padding) 30px;
    position: relative;
}

.list-direction div:first-child {
    width: 110px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
    ;
}

.list-direction div:last-child {
    color: var(--gray2);
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: 0.3s;
}

.list-direction li:hover div:last-child {
    color: #fff;
}

.list-direction li {
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.list-direction div:first-child:before {
    content: '';
    position: absolute;
    right: -0.5px;
    top: var(--list-d-padding);
    bottom: var(--list-d-padding);
    width: 1px;
    background: rgb(255, 255, 255);
    opacity: 0.4;
}

.btn-wrap {
    margin-top: var(--con-space-s);
    gap: 10px;
}

.btn-wrap .bg {
    background: #fff;
    color: var(--dark);
    text-align: center;
    font-weight: 600;
}

.btn-wrap .bg:hover {
    background: var(--secondary);
    color: #fff;
    border: 1px solid var(--secondary)
}

.btn-wrap a {
    display: block;
    padding: 10px 30px;
    border-radius: 4px;
    /* font-size: var(--txt-s); */
    border: 1px solid rgb(255 255 255 / 30%);
    color: rgb(255 255 255 / 60%);
    transition: 0.3s;
}

.btn-wrap a:hover {
    color: #fff;
    border: 1px solid;
}

.btn-wrap.view-btn a {
    font-size: var(--txt-l);
}

.btn-wrap.view-btn {
    margin-top: var(--con-space-m);
}

.btn-wrap.view-btn .bg {
    min-width: 180px;
}

.btn-wrap .delete {
    color: #ff6b6b;
    border: 1px solid #ff6b6b69;
}

.board-write {
    --input-height: 5.5rem;
}

.board-write>div {
    width: 48%;
    margin-bottom: 3%;
}

.board-write>div.w100 {
    width: 100%;
}

.board-write dt {
    margin-bottom: 10px;
}

.notice-type-list {
    width: 100%;
    gap: 10px
}

.notice-type-list li label {
    width: 100%;
    position: relative;
    display: block;
    height: var(--input-height);
    line-height: var(--input-height);
    border-radius: var(--radius-xs);
    transition: all 0.4s;
    text-align: center;
    background: rgb(var(--gray-rgb)/30%);
    border: 1px solid var(--gray);
}

.notice-type-list li {
    width: 150px
}

.notice-type-list li input {
    display: none;
}

.notice-type-list li input[type="radio"]:checked+label {
    color: #fff;
    background: var(--secondary);
    border-color: var(--secondary);
}

.input-field input,
.input-field textarea {
    border-radius: var(--radius-xs);
    width: 100%;
    background: none;
    border: 1px solid var(--gray);
    background: rgb(var(--gray-rgb)/30%);
    transition: 0.3s;
    font-size: var(--txt-m);
    padding: 20px
}

.input-field input {
    height: var(--input-height);
}

.input-field input:focus,
.input-field textarea:focus {
    border-color: var(--secondary);
    background: var(--dark);
    box-shadow: 0 0 30px rgb(var(--secondary-rgb)/10%)
}

.bd-view-file-w {
    width: 100%;
    padding-bottom: var(--con-space-m);
    font-size: var(--txt-xs);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bd-view-file-w a {
    display: block;
    width: 100%;
    min-width: 100px;
}

.bd-file {
    max-width: 100%;
    background: #222831;
    padding: 8px 10px;
    border-radius: var(--radius-s);
}

.bd-file i {
    vertical-align: middle;
    font-size: 20px;
}

.bd-file1 {
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    border-radius: var(--radius-xs);
    background: url(../images/sub/file-text-fill.svg) no-repeat center/60% rgb(var(--secondary-rgb)/20%);
}

.bd-file2 {
    width: calc(100% - 64px);
    padding: 0 15px;
    font-weight: 500;
    line-height: 1.2;
}

.bd-file2 span {
    opacity: 0.5;
    font-size: 12px;
    display: block;
    font-weight: 400;
}

.bd-file3 {
    width: 30px;
    height: 30px;
    background: url(../images/sub/download-line.svg) no-repeat center/70%;
    opacity: 0.3;
}

.bd-view-file-w a:hover .bd-file {
    background: #303845;
}

.bd-view-file-w a:hover .bd-file3 {
    opacity: 1;
}

.b-file {
    position: relative;
    gap: 10px;
}

.b-file .file__input {
    padding: 0 !important;
}

.file__input_w {
    position: relative;
    width: 150px;
    cursor: pointer;
}

.file__input {
    width: 100%;
    position: relative;
    height: var(--input-height);
}

.file__input,
.file__value {

    border-radius: var(--radius-xs);
    color: rgba(255, 255, 255, 0.3);
    padding: 0.9375rem 1.0625rem;
}

.file__value {
    background-color: rgba(255, 255, 255, 0.1);
}

.file__input--file {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.file__input--label {
    display: flex;
    cursor: pointer;
    text-align: center;
}

.file__input--label:after {
    content: attr(data-text-btn);
    border-radius: var(--radius-xs);
    background-color: var(--gray-blue);
    padding: 0 2rem;
    color: white;
    cursor: pointer;
    height: var(--input-height);
    line-height: var(--input-height);
    width: 100%;
}

.file__input--label:hover {
    opacity: 0.9;
}

.file__value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: var(--txt-s);
}

.file__value:hover:after {
    color: white;
}

.file__value:after {
    content: "";
    cursor: pointer;
    background: url(../images/sub/close-circle-fill.svg) no-repeat center/100%;
    width: 20px;
    height: 20px;
    opacity: 0.5;
}

.file__value:hover:after {
    opacity: 1;
}

.file__remove {
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
}

.file__value--text {
    margin-right: 10px;
}

@media screen and (max-width:1500px) {
    .board-list {
        gap: 20px;
    }
}

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

    .board-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .bd-view-file-w {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width:768px) {
    .board-category {
        width: 100%;
    }

    .search-wrap {
        width: 100%;
        margin-top: var(--con-space-m);
    }

    .search-wrap select {
        width: 100PX;
    }

    .search-field {
        flex: 1;
    }

    .search-submit {
        width: 50px;
    }

    .search-submit input {
        width: 100%;
    }

    .seach-bar {
        flex: 1;
    }

    .search {
        width: 100%;
    }

    .board-write>div {
        width: 100%;
    }
}

@media screen and (max-width:600px) {
    .board-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .board-list li a {
        padding: var(--con-space-m);
        --date-w: 60px;
    }

    .b-subject {
        aspect-ratio: 5 / 1;
    }

    .board-list li h3 {
        margin-bottom: 8px;
    }

    .notice-type-list {
        justify-content: space-between;
    }

    .notice-type-list li {
        width: calc(50% - 5px);
    }

    .file__input_w {
        width: 100px;
    }

    .file__input--label:after {
        padding: 0;
    }

    .file__input--label:after,
    .file__input {
        height: 40px;
        line-height: 40px;
    }

    .page a {
        width: 3.5rem;
        height: 3.5rem;
        margin: 1px;
    }

    .bd-view-file-w {
        grid-template-columns: repeat(1, 1fr);
    }

    .bd-file {
        border-radius: var(--radius-8)
    }

    .list-direction div:first-child {
        width: 60px;
        text-align: center;
    }

    .list-direction div {
        --list-d-padding: 10px;

        padding: var(--list-d-padding) 10px;
    }

    .btn-wrap.view-btn .bg {
        min-width: 110px;
    }

    .btn-wrap.view-btn a {
        font-size: var(--txt-m);
    }

    .btn-wrap a {
        padding: 10px 20px;
    }

    .board-con-tit span {
        font-size: 1.2rem;
    }

    .search-wrap select {
        width: 60px;
    }

    .seach-bar {
        width: calc(100% - 40px)
    }

    .search-submit {
        width: 40px;
    }

    .board-con-tit b {
        font-size: var(--txt-s);
    }

    .board-con-tit h2 {
        font-size: var(--tit-m);
        margin-top: 5px;
    }

    .bd-file1 {
        width: 24px;
        height: 24px;
        line-height: 24px;
    }

    .bd-file2 {
        width: calc(100% - 54px);
        padding: 0 10px;
    }

    .bd-file2 span {
        font-size: 10px;
    }

    .list-direction a {
        padding: 5px 0;
    }

}

/*찾아오시는 길*/
.contact_w {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.contact_w>div {
    float: left;
    overflow: hidden;
    position: relative;
}

.contact_map {
    width: 100%;
    border-radius: var(--radius-s);
    overflow: hidden;
    ;
}

.contact_map .root_daum_roughmap .wrap_map,
.contact_map .root_daum_roughmap {
    width: 100% !important;
    height: var(--sub-img-height) !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #ddd !important;
}

.contact_map .root_daum_roughmap .wrap_btn_zoom {
    right: auto !important;
    left: 8px !important;
}

.contact_info {
    margin-bottom: 30px;
    margin-top: var(--con-space-m);
}

.contact_info p {
    font-size: var(--tit-l);
}

.contact_info ol li {
    margin-top: 10px;
    font-weight: 300;
    text-indent: -29px;
    padding-left: 30px;
    margin-right: 30px;
}

.contact_info ol li span {
    font-weight: 600;
    padding-right: 10px;
}


.tab_wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.tab2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tab2 li {
    padding: 10px 30px;
    background: var(--dark2);
    border-radius: 100px;
    font-size: var(--txt-l);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    color: rgb(255 255 255 / 50%);
    text-align: center;
}

.tab2 li:hover {
    background: var(--gray);
}

.tabcontent2 {
    display: none;
    width: 100%;
    height: 100%;
}

ul.tab2 li.current2 {
    font-weight: 700;
    color: #fff;
    background: var(--secondary);
}

.tabcontent2.current2 {
    display: block;
}

@media screen and (max-width:1500px) {
    .contact-wrap .sub-txt {
        width: 100%;
    }

    .contact-con {
        width: 100%;
    }
}

@media screen and (max-width:600px) {
    .tab2 {
        justify-content: space-between;
    }

    .tab2 li {
        flex: 1;
        background: var(--gray);
    }
}

/*사업실적*/
.performance-wrapper {
    position: relative;
    padding-bottom: var(--sub-padding);
}

.p-year-item li img {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
    z-index: -1;
    border-radius: var(--radius-8)
}

.performance-timeline {
    position: relative;
}

.p-year-item {
    position: relative;
}

.p-year-item h2 {
    text-align: center;
    font-weight: bold;
    font-size: 70px;
    color: var(--secondary)
}

.p-year-item h2 span {
    writing-mode: vertical-rl;
}

.p-year-item ul li {
    position: relative;
    width: 50%;
    padding: clamp(20px, 1vw, 1vw) 0;
}

.p-year-item ul {
    margin-top: -100px;
    border-top: 2px dashed rgb(255 255 255 / 10%);
    padding-top: 50px;
}

.p-year-item:first-child ul {
    border-top: none
}

.p-year-item ul li:nth-child(2n) {
    right: clamp(-17px, -1.3vw, -1.3vw);
    padding-right: clamp(100px, 8vw, 8vw);
    text-align: right;
}

.p-year-item ul li:nth-child(2n-1) {
    margin-left: 50%;
    padding-left: clamp(100px, 8vw, 8vw);
}

.project-name {
    font-size: var(--tit-s);
    font-weight: 700;
    text-shadow: 0 0 5px rgb(0 0 0 / 100%);
}

.project-disc {
    color: var(--font-gray);
    ;
    max-width: 600px;
    display: inline-block;
    font-size: var(--txt-l)
}

.performance-wrapper::before {
    --p-line-width: 150px;
    content: '';
    position: absolute;
    left: 50%;
    margin-left: calc(var(--p-line-width)/2*-1);
    top: 0;
    bottom: 0;
    width: var(--p-line-width);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 00%, rgba(0, 9, 139, 1) 50%, rgba(255, 255, 255, 0) 100%);
    border-radius: 100px;
}

.p-year-item:nth-child(2n) h2 {
    color: #fff;
}


@media screen and (max-width:1500px) {
    .performance-wrapper::before {
        --p-line-width: 100px;
    }
}

@media screen and (max-width:768px) {
    .performance-wrapper::before {
        --p-line-width: 50px;
        left: 0;
        margin-left: 0;
        ;
    }

    .p-year-item h2 {
        text-align: left;
        font-size: 40px;
        line-height: 1.2;
    }

    .p-year-item ul li {
        width: 100%;
        padding: 10px 0;
    }

    .p-year-item ul li:nth-child(2n),
    .p-year-item ul li:nth-child(2n-1) {
        right: clamp(-17px, -1.3vw, -1.3vw);
        padding-left: 60px;
        padding-right: 0;
        text-align: left;
        margin-left: 0;
    }

    .p-year-item li img {
        position: relative;
        opacity: 1 !important;
        transform: none;
        max-width: 300px;
        width: 100%;
        margin-top: 5px;
        z-index: 1;
        left: auto !important;
        top: auto !important;
    }

    .project-disc {
        font-size: var(--txt-s)
    }

    .p-year-item ul {
        padding-top: 0;
    }

    .performance-wrapper {
        padding-bottom: 0;
    }
}


/*연혁*/
.history-wrapper {
    display: flex;
    overflow: hidden;
}

.left-year {
    width: 50%;
    padding: 20px;
    font-size: 10px;
    padding-left: 20%
}

.left-year p {
    position: absolute;
    left: 0;
    top: 100px;
    width: 31%;
    font-size: 24px;
    font-weight: 300
}

.year-display {
    position: relative;
    height: 210px;
    overflow: hidden;
}

.year-text {
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 6vw;
    font-weight: 600;
    height: 210px;
    margin-top: 40px;
}

.right-history {
    flex: 1;
    padding: 100px 0 0 0;
    position: relative;

}

.history-w {
    position: relative;
}

.history-w::before {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -0.5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 00%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}

.history-section {
    margin-bottom: 180px;
    border-top: 1px solid rgb(255 255 255 / 50%);
    padding-top: 20px;
}

.history-section:first-child {
    border-top: none
}

.history-section:last-child {
    margin-bottom: 0;
}

.history-section li {
    font-size: var(--ttx-l);
    padding: 20px 40px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    display: flex;
    flex-wrap: wrap;
}

.history-section li:last-child {
    border-bottom: none;
}

.history-section b {
    display: inline-block;
    width: 50px;
    text-align: center;
    opacity: 0.5;
    font-weight: 600;
    margin-right: 5px
}

.history-section span {
    display: block;
    flex: 1;
}

.history-bg {
    background: url(../images/sub/history_bg.jpg) no-repeat center/cover;
    width: 100%;
    height: 100vh;
    border-radius: var(--radius-s);
    position: relative;
    z-index: -2
}

.organ::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -100%;
    bottom: 0;
    height: 200%;
    background: rgb(19, 19, 19);
    background: -moz-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 75%);
    background: -webkit-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 75%);
    background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 75%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131313", endColorstr="#131313", GradientType=1);
    z-index: -1;
}


.organ {
    --organ-line: #444;
    position: relative;
}

.organ_wrap {
    position: relative;
    width: 100%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    padding: 50px;
    border-radius: 10px;
}

.organ_depth {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.organ_depth li {
    position: relative;
    width: calc(100%/3);
}

.ceo,
.part {
    position: relative;
    padding-bottom: 80px;
}

.ceo div {
    border-radius: 100px;
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 340px;
    text-align: center;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding: 25px 0;
}

.organ_wrap .ceo:before {
    content: '';
    position: absolute;
    background: var(--organ-line);
    z-index: -1;
    width: 2px;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.organ_wrap .part:before {
    content: '';
    position: absolute;
    background: var(--organ-line);
    z-index: -1;
    width: 2px;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.organ_wrap .part:after {
    content: '';
    position: absolute;
    background: var(--organ-line);
    z-index: -1;
    width: 20%;
    top: calc(50% - 40.5px);
    left: 50%;
    bottom: 0;
    height: 2px;
    margin-left: -1px;
}

.part div {
    position: relative;
    display: inline-block;
    width: 30%;
    max-width: 250px;
    margin-left: 40%;
    text-align: center;
    background: var(--secondary);
    /* color: #000; */
    font-size: 18px;
    font-weight: 600;
    padding: 20px 0;
    border-radius: 8px;
}

.depth2-2 {
    display: flex;
    justify-content: center;
}

.depth2-1,
.depth2-2 {
    padding: 40px 10px;
    position: relative;
    margin-top: -1px;
}

.depth2-1 div {
    background: #fff;
    color: #000;
    /* border: 2px solid #0074e5; */
    font-size: 18px;
    max-width: 300px;
    margin: 0 auto;
    position: relative;
    font-weight: 600;
    padding: 20px 10px;
    border-radius: 8px;
}


.depth2-2 div {
    color: #fff;
    max-width: 200px;
    margin: 0 5px;
    font-size: 18px;
    width: 100%;
    position: relative;
    background: var(--gray-blue);
    font-weight: 600;
    padding: 15px 10px;
    border-radius: 8px;
}

.depth2-2 div:before {
    content: '';
    position: absolute;
    background: var(--organ-line);
    z-index: -1;
    width: 2px;
    height: 40px;
    top: -40px;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.depth2-1:before {
    content: '';
    position: absolute;
    background: var(--organ-line);
    z-index: -1;
    width: 2px;
    top: 0;
    bottom: -1px;
    left: 50%;
    margin-left: -1px;
}

.dep1-3 .depth2-1:before {
    bottom: 50% !important;
}

.dep1-1 .depth2-2 div:after,
.dep1-2 .depth2-2 div:after {
    content: '';
    position: absolute;
    background: var(--organ-line);
    z-index: -1;
    height: 2px;
    left: -10px;
    right: -10px;
    top: -40px;
}

.depth2-2 div:nth-child(1):after {
    left: 50% !important
}

.depth2-2 div:last-child:after {
    right: 50% !important;
}

.dep1-1 .depth2-1:after {
    content: '';
    position: absolute;
    background: var(--organ-line);
    z-index: -1;
    height: 2px;
    left: 50%;
    right: -10px;
    top: 0;
}

.dep1-2 .depth2-1:after {
    content: '';
    position: absolute;
    background: var(--organ-line);
    z-index: -1;
    height: 2px;
    left: 0%;
    right: 0;
    top: 0;
}

.dep1-3 .depth2-1:after {
    content: '';
    position: absolute;
    background: var(--organ-line);
    z-index: -1;
    height: 2px;
    left: -10px;
    right: 50%;
    top: 0;
}

.dep1-3 a {
    display: block;
    width: 100%;
    max-width: 300px;
    position: relative;
    margin: 0 auto;
}

.dep1-3 a:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../images/sub/btn_link_organ.svg) no-repeat center/100%;
    z-index: 1;
    right: 5px;
    top: 5px;
}

.dep1-3 .depth2-1 a:hover div {
    background-color: rgb(213, 213, 213);
    border-color: rgb(255 255 255 / 80%);
    transition: 0.3s;
}


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

    .part div {
        width: calc((100%/3) - 20px);
        margin-left: calc((100%/3)*2 + 10px);
        margin-right: 10px;
    }

    .depth2-2 {
        display: block;
        padding-top: 0;
    }

    .depth2-2 div {
        margin: 10px 0 0 0;
        max-width: 100%;
    }

    .dep1-1 .depth2-2 div:after,
    .dep1-2 .depth2-2 div:after {
        display: none;
    }

    .depth2-1 {
        padding-bottom: 0;
    }

    .left-year {
        padding-left: 0;
    }

    .left-year p {
        width: 100%;
        top: 200px;
        padding-right: 20px;
    }

    .year-display {
        height: 120px;
    }

    .year-text {
        height: 150px;
    }

}


@media screen and (max-width:768px) {
    .organ_wrap {
        padding: calc(5% + 10px) 5%;
    }

    .ceo div {
        font-size: 18px;
        max-width: calc(100% - 20px);
    }

    .ceo,
    .part {
        padding-bottom: 40px;
    }

    .part div,
    .depth2-1 div,
    .depth2-2 div {
        font-size: 16px;
    }

    .left-year {
        width: 150px !important
    }

    .history-w::before {
        left: 150px;
        margin-left: 0;
        ;
    }

    .year-text {
        font-size: 40px
    }

    .left-year p {
        top: 130px
    }
}

@media screen and (max-width:600px) {
    .organ {
        text-align: center;
    }

    .organ_depth li {
        width: 100%;
    }

    .depth2-1 {
        padding-top: 20px;
    }

    .depth2-1 div,
    .dep1-3 a {
        max-width: 100%;
    }

    .depth2-1:after,
    .organ_wrap .part:after {
        display: none;
    }

    .depth2-2 {
        padding-bottom: 0;
    }

    .part div {
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        max-width: inherit;
        margin-bottom: 20px;
    }

    .part {
        padding-bottom: 0;
    }

    .depth2-2 div {
        margin: 3px 0 0 0;
        border-width: 1px;
    }

    .organ_wrap {
        margin-bottom: 0;
    }

    .ceo div {
        padding: 20px 0;
    }

    .depth2-1 div,
    .part div {
        padding: 15px 10px;
    }

    .depth2-2 div {
        padding: 10px;
    }

    .depth2-1,
    .depth2-2 {
        margin-top: 0;
    }

    .right-history {
        flex: auto;
        width: 100%;
    }

    .history-section {
        margin-bottom: 50px;
    }

    .history-w::before {
        display: none;
    }

    .left-year {
        width: 150px !important;
        max-width: 150px !important;
    }

    .right-history {
        width: 90%;
        margin-left: -150px;
        z-index: -1;
    }

    .left-year p {
        display: none
    }

    .year-text {
        z-index: 1;
        margin-top: 0;
        text-align: center;
        font-size: 30px;
        height: 60px;
    }

    .year-display {
        background: var(--dark);
        border-radius: 100px;
        overflow: hidden;
        margin-top: var(--header-h-s);
        height: 45px;
        border: 1px solid
    }

    .history-section li {
        padding: 20px 0
    }

}

/*복리후생*/
.benefit-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.benefit-wrap img {
    width: 50px;
    margin-bottom: 20px;
}

.benefit-wrap li h3 {
    font-size: var(--tit-m);
    margin-bottom: 40px;
    font-weight: 600;
    line-height: 1.3;
}

.benefit-wrap li p {
    font-weight: 300;
    color: rgb(255 255 255 / 50%);
    font-size: var(--txt-s)
}

.benefit-wrap li {
    background: rgb(var(--gray-rgb)/10%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 20px 2px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-8);
    padding: 40px;
    transition: all 0.3s;
    /* min-height: 396px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 45.5vmin
}

.benefit-wrap li:hover {
    border: 1px solid rgb(255 255 255 / 100%);
    background: none;
}

.benefit-wrap li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent);
}

.benefit-wrap li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.3),
            transparent,
            rgba(255, 255, 255, 0));
    opacity: 1;
}

@media screen and (max-width:1500px) {
    .benefit-wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width:1000px) {
    .benefit-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width:768px) {
    .benefit-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .benefit-wrap li {
        padding: 20px;
        min-height: auto;
    }

    .benefit-wrap img {
        width: 40px;
    }
}

.sub-identity {
    height: 100vh;
    display: flex;
    background: url(../images/main/identity01.jpg) no-repeat center/cover;
    border-radius: var(--radius-s) var(--radius-s) 0 0;
}

.identity-text {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: end;
}

#text-a {
    background: url(../images/main/identity01.jpg) no-repeat center/cover;
}

#text-b {
    background: url(../images/main/identity02.jpg) no-repeat center/cover;
}

#text-c {
    background: url(../images/main/identity03.jpg) no-repeat center/cover;
}

.identity-text div {
    width: var(--con-w);
    margin-bottom: var(--header-h);
    z-index: 1;
}

.identity-text h3 {
    font-size: var(--tit-xl);
    margin-bottom: 20px;
}

.identity-text p {
    font-size: var(--txt-l);
    padding-right: 60%;
}

.identity-text span {
    position: absolute;
    top: 100px;
    z-index: 1;

}

.identity-text::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    background: rgb(19, 19, 19);
    background: -moz-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 0.8) 100%);
    background: -webkit-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 0.8) 100%);
    background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131313", endColorstr="#131313", GradientType=1);
}

.sub-core-value {
    --h3-space: 70px;
    width: 100%;
    margin-top: var(--con-space-m);
}

.sub-core-value ul {
    gap: 12px
}

.sub-core-value ul li {
    flex: 1;
    background: #fff;
    border-radius: var(--radius-8);
    padding: 50px;
    color: var(--dark);
    position: relative;
    box-shadow: 0 0 20px rgb(255 255 255 / 10%);
}

.sub-core-value ul li div::before {
    position: absolute;
    content: '';
    width: var(--h3-space);
    height: var(--h3-space);
    top: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 80%;
}

.sub-core-value ul li.value-we div::before {
    background-image: url(../images/sub/value01.png)
}

.sub-core-value ul li.value-make div::before {
    background-image: url(../images/sub/value02.png);
}

.sub-core-value ul li.value-stadt div::before {
    background-image: url(../images/sub/value03.png);
    background-size: 70%;
}

.sub-vision {
    background: var(--dark);
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    margin-top: calc(var(--radius-s))*-1;
}

.sub-vision .sub-tit {
    font-weight: 700;
    font-size: var(--tit-xxxl);
}

.sub-core-value ul li div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1.5/1;
    position: relative;
}

.sub-core-value h3 {
    font-size: var(--tit-m);
    font-weight: 500;
    line-height: 1.3;
    padding-right: var(--h3-space);
    margin-bottom: 20px;
}

.value-img-wrap {
    overflow: hidden;
    display: inline-flex;
    width: max-content;
    gap: 4em;
}

.value-img-list {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4em;
}

.value-img {
    width: 21vw;
    background-color: var(--dark2);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 0;
    border-radius: var(--radius-s);
}

.value-img.img01 {
    padding-bottom: 30vh;
    background-image: url(../images/sub/s-value03.jpg);
}

.value-img.img02 {
    padding-bottom: 50vh;
    background-image: url(../images/sub/s-value01.jpg);
}

.value-img.img03 {
    padding-bottom: 40vh;
    background-image: url(../images/main/value01.jpg);
}

.value-img.img04 {
    padding-bottom: 55vh;
    background-image: url(../images/sub/s-value02.jpg);
}

.value-img.img05 {
    padding-bottom: 45vh;
    background-image: url(../images/main/value03.jpg);
}


.ci-tit {
    width: 400px;
}

.ci-con {
    flex: 1;
    gap: 20px;
    margin-left: 80px;
}

.ci-con>div {
    background: var(--dark);
    padding: 50px;
    margin-bottom: 2;
    border-radius: var(--radius-8);
    background: #fff;
    flex: 1;
    gap: 50px;
}

.ci-con>div.ci-b {
    background: var(--dark2);
}

.ci-long {
    height: 70px;
}

.ci-short {
    height: 100px;
}

.ci-wrap .pd-more {
    margin-top: var(--con-space-m);
}

.ci-wrap .pd-more a {
    margin: 0 5px;
    border-radius: 100px;
}

.ci-wrap .pd-more img {
    width: 20px;
    opacity: 0.5;
}

.ci-wrap .pd-more a:hover span {
    transform: translateY(-50%) rotate(0);
}

.ci-wrap .pd-more a:hover img {
    opacity: 1;
}

@media screen and (min-width:1921px) {

    .ci-tit {
        width: 500px;
    }
}

@media screen and (max-width:1500px) {
    .ci-con {
        flex: auto;
        width: 100%;
        margin-left: 0;
    }

    .ci-tit {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .ci-wrap .pd-more {
        margin: 10px 0;
    }
}

@media screen and (max-width:1000px) {
    .value-img {
        width: 32vw;
    }
}

@media screen and (max-width:768px) {
    .ci-con>div {
        width: 100%;
        flex: auto;
    }

    .ci-wrap .sub-tit2 {
        margin-bottom: 20px;
    }

    .ci-wrap .pd-more {
        margin-bottom: 40px;
    }
}

@media screen and (max-width:600px) {
    .sub-identity {
        flex-wrap: wrap;
        height: auto;
        gap: 20px;
        background: none;
        padding: 20px;
    }

    .identity-text {
        position: relative;
        opacity: 1 !important;
        flex: inherit;
        height: 400px;
        ;
        border-radius: var(--radius-s);
    }

    .identity-text span {
        top: 20px;
        opacity: 0.5;
    }

    .identity-text div {
        margin-bottom: 20px;
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 20px;
        padding-top: 40px;
    }

    .identity-text::after {
        background: -moz-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
        background: -webkit-linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
        background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131313", endColorstr="#131313", GradientType=1);
    }

    .identity-text p {
        padding-right: 0;
        font-size: inherit;
    }

    .sub-core-value ul li {
        padding: 20px;
        width: 100%;
        flex: auto;
    }

    .sub-core-value ul li div {
        aspect-ratio: auto;
    }

    .sub-core-value h3 {
        margin-bottom: 100px;
    }

    .sub-core-value ul li div::before {
        background-size: 50% !important;
    }

    .value-img {
        width: 42vw;
    }

    .value-img-list {
        gap: 2rem;
    }

    .value-img.img01 {
        padding-bottom: 20vh;
    }

    .value-img.img02 {
        padding-bottom: 40vh;
    }

    .value-img.img03 {
        padding-bottom: 30vh;
    }

    .value-img.img04 {
        padding-bottom: 45vh;
    }

    .value-img.img05 {
        padding-bottom: 35vh;
    }

    .ci-wrap .pd-more {
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }

    .ci-wrap .pd-more a {
        flex: 1;
        text-align: left;
        margin: 0;
        border-radius: var(--radius-8);
        padding: 10px;
    }

    .ci-con {
        gap: 10px;
    }

    .ci-con>div {
        padding: 30px 10px;
    }

    .ci-long {
        height: auto;
        width: 150px;
        ;
    }

    .ci-short {
        height: 60px;
    }

    
}

/*product-윈드맵*/
.sub-pd-bg {
    width: 100%;
    height: var(--sub-img-height);
    border-radius: var(--radius-8);
}

.windmap-bg {
    background: url(../images/main/pd01.jpg) no-repeat center / cover;
}

.wfa-bg {
    background: url(../images/sub/wfa-bg.jpg) no-repeat center top / cover;
}

.tea-bg {
    background: url(../images/sub/tea-bg.jpg) no-repeat center bottom/ cover;
}

.pm-bg {
    background: url(../images/main/pd04.jpg) no-repeat 50% 80% / cover;
}

.box-ow {
    border-top: 1px solid rgb(255 255 255 / 10%);
    border-left: none !important;
    border-right: none !important;
}

.bgW .box-ow {
    border: 1px solid rgb(0 0 0 /10%)
}

.sub-pd-bg {
    margin-bottom: var(--con-space-m);
}

.z1 {
    position: relative;
    z-index: 1;
}

.box-ow>div {
    padding-top: 30px;
}

.sub-pt2 {
    background: #fff;
    color: var(--dark);
    border-radius: 100px;
    padding: 0 10px;
    font-weight: 500;
    letter-spacing: -0.01rem;
    margin-bottom: 5px;
    display: inline-block;
    font-size: var(--txt-l);
}

.sub-pt3 {
    font-size: var(--tit-m);
    margin-top: 10px;
}

.sub-pt3 .mb-block {
    display: none;
}

.sub-ow-l {
    width: 50%;
}

.sub-ow-l img {
    margin-bottom: 10px;
    border-radius: var(--radius-8)
}

.sub-ow-r {
    flex: 1;
    border-left: 1px solid rgb(255 255 255 /10%);
    padding-left: 30px !important;
    padding-bottom: var(--con-space-l)
}

.bgW .sub-ow-r {
    border-left: 1px solid rgb(0 0 0/ 10%) !important
}

.bgW .reverse .sub-ow-r {
    border-right: 1px solid rgb(0 0 0/ 10%) !important
}

.bbn {
    border-bottom: none !important
}

.reverse .sub-ow-r {
    padding-left: 0 !important;
    padding-right: 30px !important;
    border-left: none !important;
    border-right: 1px solid rgb(255 255 255 /10%);
}

.reverse .sub-ow-l {
    padding-left: 30px;
}

.sub-ow-r h3 {
    font-size: var(--tit-xxl);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 10px;
}

.sub-ow-r h4 {
    font-size: var(--tit-m);
    margin-bottom: 50px;
    font-weight: 500;
    line-height: 1.2;
}

.sub-ow-r p {
    font-size: var(--txt-l);
    margin-top: 20px;
    color: var(--font-gray-l);
}

.bgW .sub-ow-r p {
    color: #333;
}

.sub-ow-r .pd-more {
    margin-top: var(--con-space-s);
}

.ow-img {
    width: 80%;
    margin: 0 auto;
    margin-top: var(--con-space-l);
    position: relative;
    border: 20px solid #000;
    border-radius: 10px;
    box-shadow: 0 0 100px rgb(0 0 0 / 100%);
}

.ow-img2-wrap>div {
    width: 48%;
    overflow: hidden;
}

.ow-img2-wrap p {
    margin-top: 5px;
    font-weight: 500;
    ;
}

.ow-img2-wrap .imgbox {
    height: 0;
    padding-bottom: 138%;
    overflow: hidden;
    border-radius: var(--radius-8);
    border: 1px solid rgb(0 0 0 /10%)
}

.ow-img2-wrap .imgbox img {
    width: 100%
}

.ow-con {
    margin: var(--con-space-m) 0 var(--sub-padding) 0;
    background: rgb(var(--gray-rgb) / 10%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 20px 2px rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-s);
}

.ow-con span {
    display: block;
    width: 11vw;
    height: 7vw;
    background: #2d2d2d;
    margin: 0 auto;
}

.bgW {
    background: rgb(237, 239, 241);
    color: var(--dark) !important;
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    margin-top: calc(var(--radius-s)*-1);
    position: relative;
}

.bgG {
    background: var(--dark2);
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    margin-top: calc(var(--radius-s)*-1);
    position: relative;
}

.bgD {
    background: var(--dark);
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    margin-top: calc(var(--radius-s)*-1);
    position: relative;
}

.bgW .sub-pt2,
.color-dark .sub-pt2 {
    background: var(--primary);
    color: #fff;
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.feature-list.w4 {
    grid-template-columns: repeat(4, 1fr);
}

.feature-list.w2 {
    grid-template-columns: repeat(2, 1fr);
}

.feature-list.w2 .ft-bg {
    padding-bottom: 45% !important;
}

.feature-list li {
    min-width: 0;
    background: #fff;
    transition: 0.3s;
    position: relative;
    border-radius: var(--radius-s);
    overflow: hidden;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ft-con {
    padding: 24px;
}

.ft-con h3 {
    font-size: var(--tit-m);
    font-weight: 600;
    margin-bottom: 10px;
}

.ft-con p {
    color: var(--gray-blue);
    margin-top: 10px;
}

.ft-bg {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 0;
    padding-bottom: 95%;
    transition: 0.3s;
    position: relative;
}

.feature-list.widde {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--con-space-m);
}

.feature-list.widde li {
    background: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.feature-list.widde .ft-bg {
    width: 65%;
    padding-bottom: 32% !important;
    border-radius: var(--radius-s);
}

.feature-list.widde .ft-con {
    width: 34.5%;
    background: #fff;
    border-radius: var(--radius-s);
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature-list.widde.color-white .ft-con {
    background: var(--dark2);
    border: 1px solid rgb(255 255 255/ 10%)
}

.feature-list.widde.color-white .ft-con p {
    color: var(--font-gray-l);
}

.feature-list.widde .ft-con h3 {
    font-size: var(--tit-l)
}

.feature-list.widde .ft-con p {
    font-size: var(--txt-l);
}

.feature-list.widde li:nth-child(2n) .ft-con {
    order: -1
}

.windmap01 .ft-bg {
    background-image: url(../images/sub/windmap_01.png);
}

.windmap02 .ft-bg {
    background-image: url(../images/sub/windmap_02.png);
}

.windmap03 .ft-bg {
    background-image: url(../images/sub/windmap_03.png);
}

.tea01 .ft-bg {
    background-image: url(../images/sub/tea_01.jpg);
}

.tea02 .ft-bg {
    background-image: url(../images/sub/tea_02.jpg);
}

.tea03 .ft-bg {
    background-image: url(../images/sub/tea_03.jpg);
}


.pm01 .ft-bg {
    background-image: url(../images/sub/pm_01.jpg);
}

.pm02 .ft-bg {
    background-image: url(../images/sub/pm_02.jpg);
}

.pm03 .ft-bg {
    background-image: url(../images/sub/pm_03.jpg);
}

.uav01 .ft-bg {
    background-image: url(../images/sub/uav01.jpg);
}

.uav02 .ft-bg {
    background-image: url(../images/sub/uav02.jpg);
}

.uav03 .ft-bg {
    background-image: url(../images/sub/uav03.jpg);
}

.uav04 .ft-bg {
    background-image: url(../images/sub/uav04.jpg);
}

.dc01 .ft-bg {
    background-image: url(../images/sub/dc01.jpg);
}

.dc02 .ft-bg {
    background-image: url(../images/sub/dc02.jpg);
}

.dc03 .ft-bg {
    background-image: url(../images/sub/dc03.jpg);
}

.dc04 .ft-bg {
    background-image: url(../images/sub/dc04.jpg);
}


.uep01 .ft-bg {
    background-image: url(../images/sub/uep01.png);
    background-position: 50% 10%;
}

.uep02 .ft-bg {
    background-image: url(../images/sub/uep02.jpg);
    background-position: 50% 100%;
}

.uep03 .ft-bg {
    background-image: url(../images/sub/uep03.png);
}

.uep04 .ft-bg {
    background-image: url(../images/sub/uep04.jpg);
}


.windflow01 .ft-bg {
    background-image: url(../images/sub/windflow01.jpg);
}

.windflow02 .ft-bg {
    background-image: url(../images/sub/windflow02.jpg);
    background-position: 50% 71% !important;
}

.windflow03 .ft-bg {
    animation: coldwind 10s ease infinite;
}

@keyframes coldwind {
    0% {
        background-image: url(../images/sub/windflow_02.png);
    }

    10% {
        background-image: url(../images/sub/windflow_03.png);
    }

    20% {
        background-image: url(../images/sub/windflow_04.png);
    }

    30% {
        background-image: url(../images/sub/windflow_05.png);
    }

    40% {
        background-image: url(../images/sub/windflow_06.png);
    }

    50% {
        background-image: url(../images/sub/windflow_07.png);
    }

    60% {
        background-image: url(../images/sub/windflow_08.png);
    }

    70% {
        background-image: url(../images/sub/windflow_09.png);
    }

    80% {
        background-image: url(../images/sub/windflow_10.png);
    }

    90% {
        background-image: url(../images/sub/windflow_11.png);
    }

    100% {
        background-image: url(../images/sub/windflow_02.png);
    }
}



.mini_img_box img,
.big_img_box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.big_img_box.ani {
    background-image: url(../images/sub/uep_08.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: sunlight_ani 20s infinite;
    position: relative;

}

.time_stamp {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 150px;
    height: 40px;
    animation: timestamp_ani 20s infinite;
    background-image: url(../images/sub/uep_08-2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--primary);
    mix-blend-mode: luminosity;
    border-radius: var(--radius-8);
}


@keyframes sunlight_ani {
    12.5% {
        background-image: url(../images/sub/uep_09.png);
    }

    25% {
        background-image: url(../images/sub/uep_10.png);
    }

    37.5% {
        background-image: url(../images/sub/uep_11.png);
    }

    50% {
        background-image: url(../images/sub/uep_12.png);
    }

    62.5% {
        background-image: url(../images/sub/uep_13.png);
    }

    75% {
        background-image: url(../images/sub/uep_14.png);
    }

    87.5% {
        background-image: url(../images/sub/uep_15.png);
    }

    100% {
        background-image: url(../images/sub/uep_08.png);
    }
}

@keyframes timestamp_ani {
    12.5% {
        background-image: url(../images/sub/uep_09-2.png);
    }

    25% {
        background-image: url(../images/sub/uep_10-2.png);
    }

    37.5% {
        background-image: url(../images/sub/uep_11-2.png);
    }

    50% {
        background-image: url(../images/sub/uep_12-2.png);
    }

    62.5% {
        background-image: url(../images/sub/uep_13-2.png);
    }

    75% {
        background-image: url(../images/sub/uep_14-2.png);
    }

    87.5% {
        background-image: url(../images/sub/uep_15-2.png);
    }

    100% {
        background-image: url(../images/sub/uep_08-2.png);
    }
}

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

    .feature-list.widde .ft-bg {
        width: 49.5%;
        padding-bottom: 40% !important;
    }

    .feature-list.widde .ft-con {
        width: 49.5%;
    }

    .feature-list.w4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-list.w4 .ft-bg {
        padding-bottom: 50%;
    }
}

@media screen and (max-width:1000px) {
    .feature-list.widde .ft-con {
        padding: 40px;
    }

    .feature-list.widde .ft-bg {
        padding-bottom: 60% !important;
    }
}

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

    .sub-ow-l,
    .sub-ow-r,
    .reverse .sub-ow-r,
    .reverse .sub-ow-l,
    .bgW .reverse .sub-ow-r,
    .bgW .reverse .sub-ow-l {
        width: 100%;
        padding-right: 0 !important;
        padding-left: 0 !important;
        border-right: none !important;
        border-left: none !important;
    }

    .reverse .sub-ow-l {
        order: -1;
    }

    .reverse.order-n .sub-ow-l {
        order: 1;
    }

    .sub-ow-l.t-right {
        text-align: left !important;
    }

    .feature-list {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .feature-list li {
        width: 100%;
        flex-direction: row;
    }

    .feature-list li>div {
        width: 50%;
    }

    .ft-bg {
        height: 100%;
        padding-bottom: 0;
    }

    .feature-list.widde .ft-con {
        padding: 30px;
    }
}

@media screen and (max-width:600px) {
    .feature-list {
        gap: var(--con-space-m);
    }

    .feature-list li {
        aspect-ratio: inherit;
    }

    .feature-list li>div {
        width: 100%;
    }

    .ft-bg {
        height: 0%;
        padding-bottom: 68%;
    }

    .sub-ow-r h4 {
        margin-bottom: 30px;
    }

    .ft-con {
        padding: 20px;
    }

    .ow-con {
        margin-bottom: var(--radius-s);
        margin-top: 0;
        border: none;
        background: none;
        box-shadow: none;
    }

    .ow-img {
        border-width: 8px;
        width: 100%;
        border-color: #1a1a1a;
        margin-top: 0;
    }

    .feature-list.widde .ft-con {
        padding: 20px;
        width: 100%;
        border-radius: var(--radius-s) var(--radius-s) 0 0;
    }

    .feature-list.widde .ft-bg {
        width: 100%;
        border-radius: 0 0 var(--radius-s) var(--radius-s);
    }

    .feature-list.widde li:nth-child(2n-1) .ft-con {
        order: -1;
    }

    .sub-pt3 {
        font-size: var(--txt-l);
        color: var(--font-gray-l)
    }

    .sub-pt3 br {
        display: none;
    }

    .time_stamp {
        width: 80px;
        height: 30px
    }

}




/*business*/
.bs-m {
    margin-top: calc(var(--header-h)*-1)
}

.business-left {
    width: 49.5%;
    padding-top: var(--header-h);
}

.business-right {
    width: 49.5%;
    padding-top: var(--header-h);
    padding-left: 4%;
}

.bs-img {
    height: calc(100vh - (var(--header-h)*2));
    background: url(../images/sub/business01_type.jpg) no-repeat center/cover;
    border-radius: var(--radius-s);
}

.bs-type {
    margin-top: var(--header-h);
}

.bs-type li {
    padding: var(--con-space-l) 0;
    border-top: 1px solid;
}

.bs-type h3 {
    font-size: var(--tit-xl);
    margin-bottom: var(--con-space-m);
    line-height: 1.2;
    font-weight: 600;
}

.bs-type p {
    font-size: var(--txt-l);
    color: var(--font-gray-l);
}

.pr50 {
    padding-right: 50%;
}

.business-box2-w {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    grid-row-gap: var(--con-space-l);
}

.business-box2-w.w3 {
    grid-template-columns: repeat(3, 1fr);
}

.business-box2-w>div>div {
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    border-radiuS: var(--radius-8)
}

.business-box2-w.sd-box>div>div {
    padding-bottom: 51% !important;
    margin-bottom: 20px;
}

.business01-a2-1 {
    background: url(../images/sub/business01_a2_1.jpg) no-repeat center/cover;
}

.business01-a2-2 {
    background: url(../images/sub/business01_a2_2.jpg) no-repeat center/cover;
}

.business-box2-w p {
    font-size: var(--tit-s);
    margin-bottom: 10px;
    font-weight: 600;
}

.business-box2-w span {
    color: var(--font-gray-l);
}

.bgW .business-box2-w p {
    font-weight: 700;
}

.business01-a3-1 {
    background: url(../images/sub/um_09.jpg) no-repeat center/cover;
}

.business01-a3-2 {
    background: url(../images/sub/um_10.jpg) no-repeat center/cover;
}

.business01-a3-3 {
    background: url(../images/sub/um_11.png) no-repeat center/cover;
}

.business01-a3-4 {
    background: url(../images/sub/um_12.png) no-repeat center/cover;
}

.business01-a3-5 {
    background: url(../images/sub/um_13.png) no-repeat center/cover;
}

.business01-a3-6 {
    background: url(../images/sub/um_14.png) no-repeat center/cover;
}

.sd-bg-01 {
    background: url(../images/sub/sd_10.jpeg) no-repeat center/cover;
}

.sd-bg-02 {
    background: url(../images/sub/sec03_9_main.jpg) no-repeat center/cover;
}

.sd-bg-03 {
    background: url(../images/sub/sd_07.jpeg) no-repeat center/cover;
}

.sd-bg-04 {
    background: url(../images/sub/sd_11.jpeg) no-repeat center/cover;
}

.sd-bg-05 {
    background: url(../images/sub/um_05.jpg) no-repeat center/cover;
}

.sd-bg-06 {
    background: url(../images/sub/sd_05.jpeg) no-repeat center/cover;
}

.sd-bg-07 {
    background: url(../images/sub/sd_06.jpeg) no-repeat center/cover;
}

.sd-bg-08 {
    background: url(../images/sub/sd_09.jpeg) no-repeat center/cover;
}

.uav-bg-01 {
    background: url(../images/sub/uav_pf01.jpg) no-repeat center/cover;
}

.uav-bg-02 {
    background: url(../images/sub/uav_pf02.jpg) no-repeat center/cover;
}

.uav-bg-03 {
    background: url(../images/sub/uav_pf03.jpg) no-repeat center/cover;
}

.uav-bg-04 {
    background: url(../images/sub/uav_pf04.jpg) no-repeat center/cover;
}

.uav-bg-05 {
    background: url(../images/sub/uav_pf05.jpg) no-repeat center/cover;
}

.uav-bg-06 {
    background: url(../images/sub/uav_pf06.jpg) no-repeat center/cover;
}

@media screen and (max-width:768px) {
    .business-left {
        width: 100%
    }

    .business-right {
        width: 100%;
        padding-left: 0;
    }

    .bs-img {
        height: var(--sub-img-height);
    }
}

@media screen and (max-width:600px) {
    .business-box2-w {
        grid-template-columns: repeat(1, 1fr);
    }
}

/*404*/
.main-content {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    height: 100vh;
    color: #fff;
    text-align: center;
}

.vignette {
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    -webkit-animation: vignette-anim 3s infinite;
    -moz-animation: vignette-anim 3s infinite;
    -o-animation: vignette-anim 3s infinite;
    animation: vignette-anim 3s infinite;
}

.noise2 {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .15;
}

.line404 {
    position: absolute;
    height: 100%;
    width: 1px;
    opacity: 0.1;
    background-color: rgba(255, 255, 255, 0.3);
}

.titleCont {
    position: relative;
    z-index: 1;
}

.main-title {
    padding: .3em 1em .25em;
    font-weight: 400;
    font-size: 2.5vw;
    margin-top: 40%;
    color: white;
    position: relative;
    line-height: 1.3;
}

.overTitle {
    position: absolute;
    top: 0;
    left: 0;
}

.dot {
    width: 2px;
    height: 2px;
    background-color: white;
    position: absolute;
}

.main-title>span {
    display: block;
}

.p404 div {
    width: 100%;
    line-height: 1.4;
    left: 0;
    font-size: 21vw;
    animation: scale_t 4.3s infinite;
    -webkit-animation: scale_t 4.3s infinite;
    -moz-animation: scale_t 4.3s infinite;
    -o-animation: scale_t 4.3s infinite;
    letter-spacing: 1vw;
    font-weight: 900;
    position: absolute;
    margin-top: -5%;
}

.dot:nth-child(2n) {
    opacity: 0.8;
}

.dot:nth-child(8n) {
    width: 1px;
    height: 2px;
}

.dot:nth-child(10n) {
    width: 3px;
    height: 2px;
}

.error404 {
    letter-spacing: 3px;
    font-size: 22px;
    /* font-weight: 900; */
}

@-webkit-keyframes scale_t {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.15;
    }

    50% {
        transform: scale(1.02);
        opacity: 0.15;
    }
}

@-moz-keyframes scale_t {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.15;
    }

    50% {
        transform: scale(1.02);
        opacity: 0.6
    }
}

@-o-keyframes scale_t {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.15;
    }

    50% {
        transform: scale(1.02);
        opacity: 0.6
    }
}

@keyframes scale_t {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.15;
    }

    50% {
        transform: scale(1.02);
        opacity: 0.6
    }
}

@-webkit-keyframes vignette-anim {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@-moz-keyframes vignette-anim {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@-o-keyframes vignette-anim {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes vignette-anim {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* back_home */
.back_home {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin-top: 40px;
    color: #fff;
}

.back_home a {
    padding: 5px 0;
    display: block;
}

.back_home:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #fff;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.back_home:hover:before {
    width: 100%;
}

@media screen and (max-width:1000px) {
    .p404 div {
        font-size: 38vw
    }

    .main-title {
        font-size: 5.5vw;
    }
}

/* 팝업 */
.popup-con {
    --pop-radius: 12px;
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99;
    max-width: 380px;
    overflow: hidden;
    box-shadow: 0 0 80px rgb(0 0 0 / 50%);
    border-radius: var(--pop-radius);
    border: 1px solid #333;
}

.pop-img {
    overflow: hidden;
    
}

.pop-btn {
    border-top: none;
    border-radius: var(--pop-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: var(--dark2);
}

.popup-con .swiper-pagination {
    width: inherit;
    padding: 0 10px;
    background: var(--primary);
    border-radius: 80px;
    right: 8px;
    left: auto;
    font-size: var(--txt-s);
}

.checkbox-con {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 16px;
}

.popup-con input[type="checkbox"] {
    display: none;
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    background: rgb(255 255 255 / 20%);
    border-radius: 6px;
    position: relative;
    flex-shrink: 0;
}

.popup-con input[type="checkbox"]:checked+.custom-checkbox {
    background: linear-gradient(135deg, var(--secondary) 0%, #2933c5 100%);
    border-color: var(--secondary);
}

.popup-con input[type="checkbox"]+.custom-checkbox::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    opacity: 0.4;
}

.popup-con input[type="checkbox"]:checked+.custom-checkbox::after {
    opacity: 1;
}

.checkbox-label {
    margin-left: 8px;
    font-size: var(--txt-xs);
    color: rgb(255 255 255 / 60%);
    user-select: none;
    padding-top: 2px;
}

.checkbox-label:hover {
    color: rgb(255 255 255 / 70%);
}

.popup-con input[type="checkbox"]:checked~.checkbox-label {
    color: rgb(255 255 255 / 90%);
}

.pop-btn button {
    height: 100%;
    padding: 16px 24px;
    font-size: var(--txt-s);
}

.pop-btn button:hover {
    color: rgb(255 255 255 / 80%);
}

@media screen and (max-width:500px) {
    .popup-con {
        max-width: 100%;
        width: calc(100% - 40px);
        left: 20px;
        bottom: 50%;
        transform: translateY(50%);
    }

    .pop-btn button {
        font-size: var(--txt-l);
        padding: 12px 24px;
    }
}