@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
    font-family: 'Pretendard';
    font-weight: 500;
}

html {
    overflow-x: hidden;
    font-size: 10px;
}

a {
    color: #1c1c1c;
    text-decoration: none;
}

/* 모든 요소 초기화 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 기본 글꼴 상속 및 정렬 개선 */
html, body {
    height: 100%;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* 폰트 부드럽게 */
}

/* 이미지, 비디오 등 반응형 기본값 */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* 입력요소 폰트 상속 */
input, button, textarea, select {
    font: inherit;
}

/* 리스트 스타일 제거 */
ul, ol {
    list-style: none;
}

/* 링크 밑줄 제거 */
a {
    text-decoration: none;
    color: inherit;
}

/* 버튼 기본 스타일 제거 */
button {
    background: none;
    border: none;
    cursor: pointer;
}

.blind {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}


/*--------------------------------------- header --------------------------------------- */
#header {width: 100%; height: auto; position: fixed; top: 0; left: 0; z-index: 999; transition: transform 0.3s ease;}
/* 헤더 스크롤감지 */
#header.scrolled .hd_bot{
    background: #fff;
    border-bottom: 2px solid #EF4023;
}
#header.scrolled .hd_bot a p {
    color: #4C4D4F;
    position: relative;
}
#header.scrolled .hd_bot a p::after, li:has(>.hd_bot.active) > a > p::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 2px;
    width: 0;
    background: #4C4D4F;
    transition: width 0.3s ease;
}
#header.scrolled nav .main_tit:hover p::after {
    width: 100%;
}

#header.scrolled .sch_bar {
    border: 2px solid #EF4023;
}
#header.scrolled .hd_bot .sch .sch_bar input {
    color: #4C4D4F;
}
#header.hide {
    transform: translateY(-100%);
}

.hd_top {width: 100%; height: 30px; background-color: #EF4023; display: flex; justify-content: end; align-items: center; padding-right: 155px;}
.hd_top  a {font-weight: 600; color: #fff; font-size: 1.4rem;}
.hd_top ul {display: flex; gap: 25px; }

.hd_bot {width: 100%; height: 90px; background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 0 155px; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.4s ease;}
nav > ul {display: flex; gap: 0px; position: relative; z-index: 10;}
nav .main_tit { padding: 30px 40px;}
nav .main_tit p {font-size: 2rem; color: #fff; font-weight: 600; position: relative;}
nav .main_tit p::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 2px;
    width: 0;
    background: #fff;
    transition: width 0.3s ease;
}
nav .main_tit:hover p::after, nav .main_tit:focus p::after, li:has(>.nav_submenu_wrap.active) > .main_tit > p::after {
    width: 100%;
}

.hd_bot .sch {display: flex; gap: 30px; align-items: center;}
.hd_bot .sch .sch_bar {width: 350px; height: 45px; border-radius: 30px; border: 2px solid #fff; display: flex; align-items: center; padding: 5px 15px; gap: 10px;}
.hd_bot .sch .sch_bar input {border: none; background:transparent; outline: none; box-shadow: none; width: 330px; height: 40px; font-size: 2rem; color: #fff;}

/* 서브네비 펼침 */
nav > ul > li > a {
    display: block;
    padding: 10px; 
    font-weight: 500;
    font-size: 16px;
    color: #222;
    text-decoration: none;
}

nav > ul > li > a:hover {
    color: #EF4023;
}
nav > ul > li:nth-child(2) ul {
    padding: 15px 0;
} 
nav > ul > li:nth-child(3) ul {
    padding: 15px 0;
} 

/* ▼ 서브메뉴 래퍼 */
.nav_submenu_wrap {
    position: fixed;
    left: 0;
    top: 90px;
    z-index: 2;
    background: #fff;
    width: 100vw; /* 전체 폭 확장형 드롭다운 */
    padding: 15px 60px;
    display: flex;
    justify-content: center;
    gap: 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.4s ease;
    border-bottom: 2px solid #E6E6E6;
}

/* 내부 선 및 구조 */
.nav_submenu_wrap .line {
    width: 1px;
    background: #E6E6E6;
}

.nav_submenu {
    min-width: 100px;
    display: flex;
    gap: 30px;
    padding: 15px 0;
}

.nav_submenu .tit {
    font-weight: 700;
    font-size: 1.8rem;
    color: #2D2D2D;
}

.nav_submenu > ul li a {
    display: block;
    padding: 3px 5px;
    font-size: 1.8rem;
    color: #6E6E6E;
    text-decoration: none;
    transition: color 0.2s;
}

.nav_submenu_wrap > ul li a {
    display: block;
    padding: 3px 5px;
    font-weight: 700;
    font-size: 1.8rem;
    color: #2D2D2D;
    text-decoration: none;
    transition: color 0.2s;
}
.nav_submenu_wrap > ul:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.nav_submenu_wrap > ul:nth-child(4) {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.nav_submenu > ul li a:hover, .nav_submenu > ul li a:focus {
    color: #000;
}
.nav_submenu_wrap > ul li a:hover, .nav_submenu_wrap > ul li a:focus {
    color: #EF4023;
}
/* 활성화 시 (JS에서 toggle) */
.nav_submenu_wrap.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* -------------------------------- main visual ------------------------------------ */
.main_vs {width: 100%; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/main_bg_img.png) no-repeat ; background-size: cover; display: flex; align-items: center; justify-content: space-between; padding: 0 280px; }
.main_vs .letter {margin-top: -190px; position: relative; overflow: hidden;}
.main_vs .letter p {font-size: 8.5rem; color: #fff; font-weight: 700;  line-height: 1.2;}
.main_vs .letter span {font-size: 2rem; color: #fff; font-weight: 400;}

/* 글자 효과 */
.main_vs .letter p {
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}
.main_vs .letter span {
    opacity: 0;
    transform: translateY(80px);
    transition: all 0.8s ease-out;
}

.main_vs .letter .line {
    width: 0;
    height: 8px;
    background: #fff; /* 강조색 */
    margin: 20px auto;
    transition: width 0.6s cubic-bezier(0.7, 0, 1, 1) 0.3s;
    position: absolute;
    left: 440px;
    top: 40px;
}

/* ▶ 등장할 때 적용되는 클래스 */
.main_vs .letter.active p {
    transform: translateY(0);
}
.main_vs .letter.active span {
    opacity: 1;
    transform: translateY(0);
}

.main_vs .letter.active .line {
    width: 250px; /* 원하는 길이 */
}

.main_vs .letter .line { transition-delay: 0.6s; }
.main_vs .letter span { transition-delay: 0.4s; }

.main_vs .link {margin-top: 100px;}

/* 배치 */
.main_vs .link ul {
    display: grid;
    grid-template-columns: repeat(2, 270px);
    grid-template-rows: repeat(2, 310px);
    gap: 10px;
}
.main_vs .link ul li:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
}

.main_vs .link ul li:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.main_vs .link ul li:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}
.main_vs .link li a {width: 270px; height: 310px;  display: inline-block; border-radius: 20px; position: relative; transition: .3s;}
.main_vs .link li a:hover {transform: scale(.95); transition: .3s;}
.main_vs .link li a p {font-size: 2.2rem; color: #fff; font-weight: 600; position: absolute; bottom: 25px; left: 25px;}
.main_vs .link ul li:nth-child(1) a {background: linear-gradient(to top, rgba(0, 0, 0, .2) 0 10%, transparent 50% 100%), url(../images/main_img_01.png) no-repeat center center,  linear-gradient(280deg, rgba(205, 205, 205, 1), rgba(244, 197, 189, 1));}
.main_vs .link ul li:nth-child(2) a {background: linear-gradient(to top, rgba(0, 0, 0, .2) 0 10%, transparent 50% 100%), linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(../images/main_img_02.png) no-repeat -50px; background-size: cover;}
.main_vs .link ul li:nth-child(3) a {background: linear-gradient(to top, rgba(0, 0, 0, .2) 0 10%, transparent 50% 100%), linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(../images/main_img_03.png) no-repeat -20px ; background-size: cover;}
.main_vs .link li a .arrow {width: 40px; height: 40px; display: flex; justify-content: center; border: 2px solid #fff; border-radius: 50px; position: absolute; top: 15px; right: 15px;}
.main_vs .link li a .arrow img {width: 20px; height: auto;}

.link li {
    opacity: 0;
    transform: translateY(-80px); /* 위쪽에서 시작 */
    transition: all 0.8s ease-out;
}

/* 활성화 시 */
.link.active li {
    opacity: 1;
    transform: translateY(0);
}

/* 순차 등장 */
.link.active li:nth-child(1) { transition-delay: 0.5s; }
.link.active li:nth-child(2) { transition-delay: 0s; }
.link.active li:nth-child(3) { transition-delay: 0.3s; }


/* ---------------------------------------- brand --------------------------------------- */
.brand {width: 100%; height: 1020px; background: url(../images/brand_bg_01.png) no-repeat top -220px left, url(../images/brand_bg_02.png) no-repeat bottom -700px right; background-attachment: fixed; display: flex; gap: 60px; align-items: center; justify-content: center;}
.brand .left .letter {display: flex; flex-direction: column; margin-bottom: 80px;}
.brand .left .letter > div {overflow: hidden;}
.brand .left .letter .tit {font-size: 7rem; font-weight: 700; color: #202020; line-height: 100%; opacity: 0; transform: translateY(40px); transition: .6s;}
.brand .left .letter.active .tit {
    opacity: 1;
    transform: translateY(0);
}
.brand .left .letter span {font-size: 2rem; color: #5C5C5C; font-weight: 500;}
.brand .left .letter a {margin-top: 20px;}
.brand .left .letter a p {font-size: 1.8rem; position: absolute; color: #5C5C5C; display: inline-block;}
.brand .left .letter a p::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #5C5C5C;}

.brand .left .letter a:hover p { font-weight: 700;}
.brand .left .letter a:hover p::after {animation: ddd 1.6s ease-in-out infinite;}

.brand .left .list {width: 320px;}
.brand .left .list ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.brand .left .list ul li {display: inline-block; opacity: 0; transform: translateY(30px); transition: opacity .3s ease, transform .3s ease;}

/* active 클래스가 붙으면 보이도록 */
.brand .left .list ul li.active {
    opacity: 1;
    transform: translateY(0);
}

.brand .right .banner img {
    transition: opacity 0.4s ease;
}

.brand .right .banner {
    position: relative;
    width: 900px;
    height: 545px;
    border-radius: 30px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: .6s;
    box-shadow: 0 0 4px rgba(0, 0, 0, .25);
}

.brand .right.active .banner {
    opacity: 1;
    transform: translateY(0);
}

.brand .right .banner .main-banner {
    width: 100%;
    height: 545px;
    object-fit: none;
    transition: transform 0.5s ease;
}

.brand .right .banner a {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    width: 69px;
    height: 69px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: .4s;
    transform: rotate(0) translateZ(0);
}

.brand .right .banner a:hover {transform: rotate(-30deg) translateZ(0);}

/* -------- company ------------ */
.company {background:linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)), url(../images/company_bg.png) no-repeat center; background-size: 108%; height: 1100px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.company .letter {display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 80px;}
.company .letter .tit {font-size: 8rem; color: #fff; font-weight: 700; line-height: 120%; display:inline-block; text-align: center; opacity: 0; transform: translateY(40px);}
.company .letter.active .tit {transform: translateY(0); opacity: 1; transition: .6s;} 
.company .letter span {font-size: 2rem; color: #fff; font-weight: 400; line-height: 100%;}
.company .p_l_wrap {display: flex; gap: 30px;}
.company .p_l_wrap .posting {width: 555px; height: 570px; border-radius: 5px; padding: 0 30px; background:#fff url(../images/post_bg.png) no-repeat top right;}
.company .posting .tit {margin-top: 45px; text-align: center;}
.company .posting .tit p {font-size: 3.8rem; font-weight: 700; color: #373737;}
.company .posting .cont {text-align: left; margin-top: 40px;}

.company .posting .cont li {
    border-bottom: 1px solid #BABABA;
}
.company .posting .cont li:first-child {
    border-top: 1px solid #bababa;
}
.company .posting .cont a {display: inline-block; gap: 10px; padding: 20px 0px;}
.company .posting .cont a span {display: inline-block; font-size: 1.8rem; font-weight: 600; color: #fff; background-color: #F2A008; padding: 3px 15px; border-radius: 50px; margin-bottom: 10px;}
.company .posting .cont a p:nth-child(2) {font-size: 1.6rem; color: #808080; font-weight: 500;}
.company .posting .cont a p:nth-child(3) {font-size: 2rem; color: #333; font-weight: 600;  transition: text-shadow 0.3s ease, transform 0.3s ease;}
.company .posting .cont a > div {float: right;}
/* more버튼 */
.company .posting .cont a > div p {font-size: 1.8rem; color: #8D8D8D; position: relative; display: inline-block; overflow: hidden; }
.company .posting .cont a > div p::after {content: ""; width: 100%; height: 1.5px; background-color: #8D8D8D; position: absolute; left: 0; bottom: 0;}
.company .posting .cont a:hover p:nth-child(3) {transform: scale(1.02); text-shadow: 0 0 0.01px #333, 0 0 0.01px #333;}
.company .posting .cont a:hover p::after {animation: ddd 1.4s ease-in-out infinite; }

@keyframes ddd {
    0% {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: right;
    }
    30% {
        transform: scaleX(0);
        transform-origin: right;
    }
    60% {
        opacity: 0;
        transform: scale(0);
        transform-origin: left;
    }
    100% {
        transform: scaleX(1);
        transform-origin: left;
    }
}


.company .links {display: flex; flex-direction: column; gap: 10px;}
.company .links p {font-size: 3.5rem; color: #fff; font-weight: 700;}


.box {
    width: 555px;
    border-radius: 10px;
    overflow: hidden;           /* 중요: small에서 잘리게 */
    cursor: pointer;
    color: #fff;
    transition: height 0.5s ease;
    display: flex;
    justify-content: space-between;
    align-items: start;
    font-size: 3.5rem;
    font-weight: 700;
    padding: 0 30px 0 40px;
    transition: height 0.5s ease, background 0.5s ease; /* background도 자연스럽게 전환 */
}

/* big: 이미지 전체 보이도록 높이 */
.big {
    height: 415px;
    padding-top: 40px;
}

.big p {
    margin-top: 270px;
    float: right;
    transition: all 0.5s ease;
}


/* small: 높이에 맞춰 일부만 보이도록 */
.small {
    height: 145px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* 변경 포인트 */
    background-size: cover; /* cover로 하면 박스 크기에 맞춰 이미지가 늘어남 */
    background-position: center bottom;
}

/* background 이미지 설정 */
#box1 {
    background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url('../images/company_img_01.png') no-repeat center top;
    background-size: auto 415px;  /* 이미지 원래 높이를 big 높이에 맞춤 */
    background-position: center top;
}

#box2 {
    background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url('../images/company_img_02.png') no-repeat center top;
    background-size: auto 415px;  /* big 높이 기준 */
    background-position: center center; 
}

/* hover 시 gradient 제거 */
#box1:hover {
    background: url('../images/company_img_01.png') no-repeat center top;
    background-size: auto 415px;
}

#box2:hover {
    background: url('../images/company_img_02.png') no-repeat center top;
    background-size: auto 415px;
}



/* ------------ esg -------------- */

section.esg {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 160px;
    padding-top: 120px;
}



.esg .bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.esg .bg img {
    width: 100vw;
    height: auto;
    max-width: none;
    transform-origin: center center; 
    position: relative;
    object-fit: cover;
}


.esg .text {position: absolute;}
.esg .text .tit,
.esg .text .esg_link > div a {color: #fff;}
.esg .text .tit {font-size: 4.8rem; font-weight: 700;  margin-left: -60px; margin-top: 0px;}
.esg .text .tit span {font-size: 6.8rem; font-weight: 700;}

.tit .dot {
    display: inline-block;
    position: relative;
    font-style: normal;
    font-weight: 700;
}

.tit .dot b {
    position: relative;
    display: inline-block;
    font-weight: inherit;
}

/* 각 글자 위에 점 찍기 */
.tit .dot b::after {
    content: "";
    position: absolute;
    top: -5px;           /* 글자 위쪽 간격 조정 */
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background-color: #EF4023;  /* 강조 색상 */
    border-radius: 50%;
}

.esg .text .esg_link {display: flex; flex-direction: column; align-items: center; margin-top: 50px;}
.esg .text .esg_link a {display: flex; align-items: center; gap: 20px;}
.esg .text .esg_link a p {font-size: 10rem; color: #fff; font-weight: 700; transition: .6s;}
.esg .text .esg_link a:hover p {color: #ff5537; transition: .6s;}
.esg .text .esg_link a:hover > div {transform: scale(1.05); transition: .3s;}
.esg .text .esg_link a:hover img {animation: moved .6s ease-in infinite;}
@keyframes moved {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(3px);
    }
    100% {
        transform: translateX(0px);
    }
}
.esg .text .esg_link a > div {width: 50px; height: 50px; border-radius: 50px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; transition: .3s;}
.esg .text .esg_link a img {width: 26px; height: auto;}
.esg .text .esg_link > div {font-size: 2rem; color: #fff; width: 680px; text-align: center; transition: .3s; font-weight: 400;}

.esg .side img {border-radius: 10px; position: absolute; transform: translateY(100vh); box-shadow: 0 0 4px rgba(0, 0, 0, .25);}


.esg .side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    pointer-events: none;
    inset: 0;
}


.esg .side img:nth-child(1) {
    width: 267px;
    height: 400px;
    right: 10%;
    bottom: 0;
}
.esg .side img:nth-child(2) {
    width: 263px;
    height: 373px;
    left: 10%;
    bottom: 0;
}
.esg .side img:nth-child(3) {
    width: 345px;
    height: 230px;
    right: 20%;
    bottom: 0;
}


/* ------- footer ---------- */
footer {margin-top: 60px; width: 100%; background: #1B1B1B; display: flex; flex-direction: column; justify-content: center; align-items: center;}

footer .ft_links ul {display: flex; gap: 40px; padding: 30px 0;} 
footer .ft_links a {font-size: 1.8rem; color: #fff; font-weight: 400;}
footer .ft_links a:hover {color: #fff; font-weight: 600; transition: .3s;}

footer .sns_wrap {border-top: 1px solid #787878; display: flex; justify-content: space-between; align-items: center; width: 1360px;}
footer .sns_wrap > div > div  {margin-top: 20px; }
footer .sns_wrap p {font-size: 2.4rem; font-weight: 700; color: #fff; margin-bottom: 5px;}
footer .sns_wrap a {font-size: 1.8rem; font-weight: 300; color: #fff; position: relative; margin-right: 40px;}
footer .ft_links li:nth-child(2) a {color: #FF4222; font-weight: 600;}
footer .sns_wrap ul {display: flex; margin-left: 20px;}
footer .sns_wrap a::after {content: ""; width: 1px; height: 80%; background: #A1A1A1; position: absolute; right: -20px; top: 10%; transform: translateX(-10%);}
footer .sns_wrap li:last-child a::after {content: none;}
footer .sns_wrap li a:hover {font-weight: 600;}

footer .copyright {font-size: 1.8rem; color: #fff; margin-top: 40px; margin-bottom: 30px; text-align: center; font-weight: 400;}
footer .copyright span {font-size: 1.8rem; color: #fff; font-weight: 700;}