@charset "utf-8";

/* header */
.header.color-w { background-color: transparent;}
.header.color-w .logo { background-image: url("/img/common/logo_main_w.png"); }
.header.color-w.on { background-color: rgba(0, 48, 136, 0.6); }
.header.color-w #btn-all-menu > span { width: 100%; height: 3px; background-color: #fff; transition: 0.6s; }
.header.color-w .gnb .gnb__list > li { color: #fff; }

/* main */
.main > .section:not(.main-visual) {overflow: hidden; position: relative; min-height: 100vh;  }
.section-bg { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; background: no-repeat center center/cover; transform: translate(-50%, -50%) scale(1.083); transition: transform 5s ease-in; z-index: -1; }
.main > .section.ani .section-bg{ transform: translate(-50%, -50%) scale(1.001); }
.main > .section .wrap{ opacity: 0; transform: translateY(100px); transition: 0.6s ease-in; }
.main > .section.ani .wrap{ opacity: 1; transform: translateY(0); }
.visual-swiper { height: 100vh; }
@supports (height: 100svh) {
    .main-visual { height: 100svh;  }
}
.visual-swiper .swiper-slide img { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); }
.visual-swiper .swiper-slide .mo-view { display: none; }
.visual-swiper .inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; z-index: 5; text-align: center; }
.visual-title > * + * { margin-top: 10px; }
.visual-title > span { font-size: clamp(18px,1.98vw,38px); font-weight: 600; }
.visual-title > img { width: clamp(150px,22.91vw,440px); }
.visual-title > p { font-size: clamp(28px,3.75vw,72px); font-weight: 600; }
.visual-swiper .swiper-opt__area { position: absolute; right: 100px; bottom: 40px; display: flex; align-items: center; gap: 10px; z-index: 10; }
.visual-swiper .swiper-pagination { position: static; display: flex; align-items: center; gap: 10px; width: fit-content; }
.visual-swiper .swiper-pagination > span:not(.slash) { width: auto; min-width: 21px; height: auto; background-color: transparent; font-size: 17px; font-weight: 600; text-align: left; color: #fff; }
.visual-swiper .swiper-pagination > .swiper-pagination-total { opacity: 0.3; }
.visual-swiper .swiper-pagination > .slash { display: inline-block; width: 1px; height: 10px; background-color: #fff; opacity: 0.3; }
.visual-swiper .progress-bar { position: relative; width: 80px; height: 2px; background-color: rgba(255, 255, 255, 0.2); }
.visual-swiper .progress-bar .bar { position: absolute; left: 0; top: 0; width: var(--progress); height: 100%; background-color: #fff; }
.visual-swiper .btn-swiper-pause { width: 8px; height: 10px; border: none; background: url("/img/common/icon_pause.svg") no-repeat center center/contain; }
.visual-swiper .scroll-text { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 10; }
.visual-swiper .scroll-text .word { display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: 0; color: #fff; opacity: 0.3; animation: textUp 2.75s infinite ease-out both; animation-delay: calc(0.1s* var(--time));  }
.visual-swiper .swiper-slide-active.swiper-slide img { animation: visualScale 1.5s ease-in both; }

.title-box { text-align: center; }
.title-box .sub-title { display: inline-block; margin-bottom: 0.5em; font-family: var(--font-set-2); font-size: 20px; font-weight: 600; color: var(--main-color2); }
.title-box .title { font-family: var(--font-Outfit); font-size: clamp(30px,4.06vw,78px); font-weight: 600; }

.main-business { padding: 150px 0 80px; }
.main-business .inner { width: 100%; max-width: 1920px; padding: 0 100px; }
.main-business .section-bg { background-image: url("/img/main/business_bg_01.jpg"); }
.tab-type-block { max-width: 50%; gap: 10px; }
.tab-type-block .tab__item { flex-direction: column; width: 135px; aspect-ratio: 1/1; border-radius: 10px; border: none; background-color: transparent; transition: 0.2s ease-in; }
.tab-type-block .tab__item img { transition: 0.2s ease-in; }
.tab-type-block .tab__item > span { font-family: var(--font-set-2); margin-top: 1.11em; font-size: 18px; font-weight: 600; transition: 0.2s ease-in; }
.tab-type-block .tab__item.on, .tab-type-block .tab__item:hover { background-color: var(--main-color2); }
.tab-type-block .tab__item.on img, .tab-type-block .tab__item:hover img  { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.tab-type-block .tab__item.on > span, .tab-type-block .tab__item:hover > span {color: #fff; }
.main-business .title-box { text-align: left; }
.main-business .top { display: flex; justify-content: space-between; margin-bottom: 50px; }
.m-business__list { display: flex; flex-wrap: wrap; gap: 20px; }
.m-business__list > li { overflow: hidden; position: relative; width: calc((100% - 60px)/4); min-height: 440px; border-radius: 10px; }
.m-business__list > li::before { content: ""; display: block; padding-top: 125.3%; }
.m-business__list > li > a { position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; }
.m-business__list > li .bg { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); transition: transform 0.4s; }
.m-business__list > li > p { position: absolute; left: 40px; bottom: 40px; width: calc(100% - 80px); font-size: 36px; font-weight: 600; color: #fff; transition: 0.4s; z-index: 3; }
.m-business__list > li .cover { position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 40px; background-color: rgba(0, 48, 136, 0.8); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); color: #fff; opacity: 0; visibility: hidden; transition: 0.4s; z-index: 5; }
.m-business__list > li .cover .title { font-size: 36px; font-weight: 600; }
.m-business__list > li .cover .text { margin: 40px 0; font-size: 18px; font-weight: 500; line-height: 1.65; }
.m-business__list > li .cover .arrow { display: inline-block; width: 40px; height: 15px; background: url("/img/main/main_swiper_next.svg") no-repeat center center/contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }

.swiper-opt__area { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 50px; }
.swiper-opt__area .slider-button-next, .swiper-opt__area .slider-button-prev { position: static; width: 40px; height: 15px; border: none; margin-top: 0; }
.swiper-opt__area .slider-button-prev { background: url("/img/main/main_swiper_prev.svg") no-repeat center center/contain; }
.swiper-opt__area .slider-button-next { background: url("/img/main/main_swiper_next.svg") no-repeat center center/contain; }
.swiper-opt__area .slider-pagination {display: flex; justify-content: center; align-items: center; gap: 10px; width: auto; }
.swiper-opt__area .slider-pagination > span:not(.slash) { min-width: 24px; font-family: var(--font-Outfit); font-size: 19px; font-weight: 600; color: var(--main-color2); }
.swiper-opt__area .slider-pagination > span.total { color: #CCC; }
.swiper-opt__area .slider-pagination > .slash { display: inline-block; width: 1px; height: 15px; background-color: #E5E5E5; }
.main-business .swiper-opt__area { justify-content: left; height: fit-content; margin-top: 80px; }

.main-esg { padding: 195px 0 40px; }
.main-esg .section-bg { background-image: url("/img/main/esg_bg_01.jpg"); }
.main-esg .title-box .sub-title, .main-esg .title-box .title { color: #fff; }
.main-esg .title-box .sub-title { margin-bottom: 0; }
.esg__list { display: flex; justify-content: center; gap: 40px; margin-top: 120px; }
.esg__item { flex: 1; max-width: 400px; color: #fff; text-align: center; }
.esg__item > a { display: block; width: fit-content; margin: 0 auto; }
.esg__item .icon-box { display: flex; justify-content: center; align-items: center; width: 150px; aspect-ratio: 1/1; margin-bottom: 60px; border-radius: 50%; margin-inline: auto; background-color: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 2px solid transparent; transition: 0.3s ease-in , opacity 1s ease-in;}
.esg__item .text-box { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.esg__item .text-box .title { font-family: var(--font-Outfit); font-size: 37px; font-weight: 500; }
.esg__item .text-box .sub-title { font-size: 21px; opacity: 0.8; margin-top: 15px; }
.esg__item .text-box > .more-text { display: flex; align-items: center; margin-top: 60px; font-family: var(--font-Outfit); font-size: 17px; font-weight: 500; transform: translateY(10px); visibility: hidden; opacity: 0; transition: 0.3s ease-in; }
.esg__item .text-box > .more-text::after { content: ""; width: 8px; height: 12px; margin-left: 10px; background: url("/img/main/arrow_right_white.svg") no-repeat center center/contain; }
.esg__item > a:hover .icon-box {background-color: rgba(0, 48, 136, 0.6); border-color: var(--main-color2); } 
.esg__item > a:hover .text-box > .more-text { transform: translateY(0px); visibility: visible; opacity: 1; }

.main-notice { padding: 145px 0; height: 100vh; }
@supports (height: 100svh) {
    .main-notice { height: 100svh;  }
}
.main > .section.main-notice { min-height: 850px; }
.main-notice .section-bg { background-image: url("/img/main/notice_bg_01.jpg"); }
.main-notice .inner { width: 100%; max-width: initial; padding: 0 100px; }
.main-notice .inner.slider { padding-right: 0; }
.main-notice .top__area { display: flex; justify-content: space-between; align-items: flex-end; }
.main-notice .title-box { text-align: left; }
.main-notice .title-box .sub-title, .main-notice .title-box .title { color: #fff; }
.main-notice .tab__area { display: none; }
.main-notice .tab__area.on { display: block; }
.notice-slider { overflow: hidden; margin-top: 50px; padding-right: 100px; }
.notice-slider .slick-list { overflow: visible; margin-right: -50px; }
.notice-slider .slick-track { display: flex; align-items: stretch; margin: 0; }
.notice-slider .slick-slide { float: none; height: auto; margin-right: 50px; }
.notice-slider .slider-item { height: 100%; }
.notice-slider .slider-item > a { display: flex; flex-direction: column; justify-content: space-between; height: 100%; border-radius: 10px; color: #fff; padding: 50px; background-color: rgba(255, 255, 255, 0.2); }
.notice-slider .slider-item .category { position: relative; margin-bottom: 20px; padding-left: 16px; font-size: 17px; font-weight: 600; }
.notice-slider .slider-item .category::before { content: ""; position: absolute; left: 0; top: 0.5em; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; }
.notice-slider .slider-item .notice-title { overflow: hidden; font-size: 26px; font-weight: 500; min-height: 3em; line-height: 1.5; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.notice-slider .slider-item .notice-text { overflow: hidden; margin-top: 40px; font-size: 18px; line-height: 1.65; opacity: 0.5;  white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.notice-slider .slider-item .date { margin-top: 40px; font-family: var(--font-Outfit); font-size: 18px; line-height: 1.3; opacity: 0.5; }
.main-notice .swiper-opt__area { margin-top: 50px; }
.main-notice .swiper-opt__area .slider-button-prev { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.main-notice .swiper-opt__area .slider-button-next { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);  }
.main-notice .swiper-opt__area .slider-pagination > span:not(.slash) { color: #fff; }
.main-notice .swiper-opt__area .slider-pagination > span.total { opacity: 0.3; }
.main-notice .swiper-opt__area .slider-pagination > .slash {background-color: #fff; opacity: 0.3;  }
.slick-arrow.slick-hidden + .slider-pagination { display: none; }
.notice-list__wrap { margin-top: 50px; padding-right: 100px; }
.notice__list { display: flex; flex-wrap: wrap; gap: 0 60px; }
.notice__list > li { display: flex; flex-direction: column; row-gap: 10px; width: calc(50% - 30px); padding: 35px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.notice__list > li:nth-child(1), .notice__list > li:nth-child(2) { border-top: 2px solid #fff; }
.notice__list > li .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 21px; font-weight: 600; color: #fff; }
.notice__list > li .date { font-size: 19px; font-weight: 500; color: #fff; opacity: 0.5; }
.notice-list__wrap .button__wrap { margin-top: 50px; }
.notice-list__wrap .btn-link-arrow { width: fit-content; font-family: var(--font-Outfit); font-size: 17px; font-weight: 500; color: #fff; }
.notice-list__wrap .btn-link-arrow::after { content: ""; display: block; width: 8px; height: 12px; margin-left: 10px; background: url("/img/main/btn_link_arrow.svg") no-repeat center center/contain; }

.main-nav { position: fixed; left: 50px; top: 50%; transform: translateY(-50%); z-index: 100; }
.main-nav__item { font-size: 17px; font-weight: 500; color: #fff; writing-mode: vertical-rl; }
.main-nav__item + .main-nav__item { margin-top: 30px; }
.main-nav__item > a { display: flex; align-items: flex-end; }
.main-nav__item > a::before { content: ""; width: 14px; height: 10px; background: url("/img/common/point_marker.svg") no-repeat center center/contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); opacity: 0.2; }
.main-nav__item > a > span { font-family: var(--font-Outfit); font-size: 0; margin-top: 15px; opacity: 0; transform: translateY(-10px); transition: transform 0.6s, opacity 0.6s; }
.main-nav__item > a.on::before { -webkit-filter:none; filter:none; opacity: 1; }
.main-nav__item > a.on > span { font-size: 17px; transform: translateY(0); opacity: 1; }
.main-nav__list.color .main-nav__item { color: #111; }
.main-nav__list.color .main-nav__item > a:not(.on)::before{ -webkit-filter: brightness(0); filter: brightness(0); opacity: 0.07; }

/* intro ani */
.intro .header { transform: translateY(-50px); opacity: 0; animation: introAni 0.6s 0.3s ease-in both; } 
.intro .scroll-text { transform: translate(-50%, 31px); opacity: 0; animation: introAni2 0.6s 0.3s ease-in both; } 
.intro .visual-swiper .swiper-opt__area { transform: translateY(31px); opacity: 0; animation: introAni 0.6s 0.3s ease-in both; } 
.intro .visual-title { transform: scale(1.147); opacity: 0; animation: introTitle 0.6s 0.3s ease-in both; }
.intro .visual-swiper .slide-01 img { transform: translate(-50%, -50%) scale(1.0317); animation: introVisual 0.6s 0.3s ease-in both; }
.intro .main-nav { opacity: 0; animation: introOpacity 0.6s 0.3s ease-in both; }

/* keyframe */
@keyframes visualScale {
    0%{ transform: translate(-50%, -50%) scale(1.04);}
    100%{ transform: translate(-50%, -50%) scale(1.001);}
}
@keyframes textUp {
    0%{ transform: translateY(0); opacity: 0.3;  }
    7%{ transform: translateY(-5px); opacity: 1;  }
    14%{ transform: translateY(0); opacity: 0.3; }
}

@keyframes introAni {
    100%{ transform: translateY(0px); opacity: 1; }
}
@keyframes introAni2 {
    100%{ transform: translate(-50%,0px); opacity: 1; }
}
@keyframes introTitle {
    100%{ transform: scale(1); opacity: 1; }
}
@keyframes introVisual {
    100%{ transform: translate(-50%, -50%) scale(1.001);}
}
@keyframes introOpacity {
    100%{ opacity: 1; }
}
@media screen and (max-width:1740px) {
    .tab-type-block .tab__item img { transform: scale(0.8); }
    .tab-type-block .tab__item > span { margin-top: 0.2em; font-size: 16px; }
    .main-business .swiper-opt__area { margin-top: clamp(20px,4.597vw,80px); }
}
@media screen and (max-width:1600px) {
    .main-business .inner.slider { padding-right: 100px; }

    .m-business__list > li { min-height: initial; }
    .m-business__list > li > p { left: 25px; bottom: 25px; }
    .m-business__list > li .cover { padding: 25px; }
    .m-business__list > li > p, .m-business__list > li .cover .title { font-size: 28px; }
    .m-business__list > li .cover .text { margin: 20px 0; font-size: 15px; }
    .notice-slider .slick-list { margin-right: -30px; }
    .notice-slider .slick-slide { margin-right: 30px; }
}
@media screen and (max-width:1400px) {
    .visual-swiper .swiper-opt__area { right: 30px; }
    .main-nav { left: 14px; }
    .main-business .inner,.main-business .inner.slider,.main-notice .inner { padding-left: 50px; padding-right: 50px; }
    
    .m-business__list > li { min-height: 360px; }
    .tab-type-block .tab__item img { margin-top: 0; transform: scale(0.7); }
    .tab-type-block .tab__item > span { margin-top: -0.2em; font-size: 14px; }
    .notice-slider .slider-item > a { padding: 35px; } 
    .notice-slider .slider-item .category { font-size: 16px; }
    .notice-slider .slider-item .notice-title { font-size: 22px; }
    .notice-slider .slider-item .notice-text,.notice-slider .slider-item .date { font-size: 16px; }
    .notice-list__wrap { padding-right: 50px; }
}
@media screen and (max-width:1200px) { 
    .main > .section:not(.main-visual) { min-height: initial; padding: 80px 0; }
    .main > .section.main-notice { min-height: 710px; }
    .title-box .sub-title { font-size: 16px; }
    .main-nav { display: none; }
    .main-business .inner, .main-notice .inner, .main-notice .inner.slider { padding-left: 20px; padding-right: 20px; }

    .main-business .top { flex-direction: column; row-gap: 20px; margin-bottom: 40px; }
    .tab-type-block { max-width: initial; }
    .m-business__list > li > p { left: 20px; bottom: 20px; }
    .m-business__list > li .cover { padding: 20px; }
    .m-business__list > li > p, .m-business__list > li .cover .title { font-size: 22px; }
    .m-business__list > li .cover .text { margin: 20px 0; font-size: 14px; }

    .esg__list { margin-top: 60px; }
    .esg__item .icon-box { width: 100px; margin-bottom: 30px; }
    .esg__item .icon-box img { max-width: 35%; }
    .esg__item .text-box .title { font-size: 28px; }
    .esg__item .text-box .sub-title { font-size: 16px; }
    .esg__item .text-box > .more-text { margin-top: 30px; font-size: 14px; }

    .main-notice { height: auto;  }
    .notice-slider { padding-right: 0; }
    .notice-slider .slick-list { margin-right: -15px; }
    .notice-slider .slick-slide { margin-right: 15px; }
    .notice-list__wrap { padding-right: 0; }
    .notice__list { gap: 0 40px; }
    .notice__list > li { width: calc(50% - 20px); padding: 20px; }
    .notice__list > li .title { font-size: 18px; }
    .notice__list > li .date { font-size: 16px; }
}
@media screen and (min-width:1025px) {
    .m-business__list > li:hover > p { opacity: 0; visibility: hidden; }
    .m-business__list > li:hover .bg { transform: translate(-50%, -50%) scale(1.15); }
    .m-business__list > li:hover .cover{ opacity: 1; visibility: visible; }
}
@media screen and (max-width:1024px) {
    .main-business .swiper-opt__area { position: absolute; left: auto; right: 0; top: 40px; margin-top: 0; }
    .m-business__list > li { width: calc(50% - 10px); min-height: initial; border-radius: 10px; background-color: rgba(0, 48, 136, 0.8); }
    .m-business__list > li::before,.m-business__list > li > p { display: none; }
    .m-business__list > li .bg, .m-business__list > li .cover { position: static; transform: none; }
    .m-business__list > li .bg { height: 300px; }
    .m-business__list > li .cover { height: auto; opacity: 1; visibility: visible; -webkit-backdrop-filter: none; backdrop-filter: none; background-color: transparent; padding-bottom: 35px; }
    .m-business__list > li .cover .arrow { position: absolute; left: 20px; bottom: 20px; width: 30px; height: 12px; }
    .main > .section.main-notice { min-height: 500px; }
    .notice-slider .slider-item .category { margin-bottom: 14px; padding-left: 12px; font-size: 14px; }
    .notice-slider .slider-item .category::before { width: 4px; height: 4px; }
    .notice-slider .slider-item .notice-title { font-size: 18px; }
    .notice-slider .slider-item .notice-text { margin-top: 20px; }
    .notice-slider .slider-item .notice-text,.notice-slider .slider-item .date { font-size: 14px; }
    .swiper-opt__area .slider-pagination > span:not(.slash) { min-width: 20px; font-size: 16px; }
    .swiper-opt__area .slider-button-next, .swiper-opt__area .slider-button-prev { width: 30px; height: 12px; }
    .notice__list > li { width: 100%; }
    .notice__list > li:nth-child(2) { border-top: none; }
}
@media screen and (max-width:768px) {
    .visual-swiper .swiper-slide .pc-view { display: none; }
    .visual-swiper .swiper-slide .mo-view { display: block; }
    .visual-swiper .swiper-slide::after { content: ""; position: absolute; left: 50%; top: 50%; display: block; width: 100%; min-height: 100%;  background-color: rgba(0,0,0,0.3); transform: translate(-50%, -50%); }
    .visual-swiper .scroll-text { bottom: 60px; }
    .visual-swiper .swiper-opt__area { right: 50%; bottom: 20px; transform: translateX(50%); }
    .visual-swiper .swiper-pagination { gap: 5px; }
    .visual-swiper .swiper-pagination > span:not(.slash) { min-width: 18px; font-size: 14px; }
    .visual-swiper .progress-bar { width: 60px; }

    .tab-type-block { flex-wrap:wrap; }
    .tab-type-block .tab__item { width: calc((100% - 20px)/3); aspect-ratio: initial; height: 80px; }

    .main-business .swiper-opt__area { top: 14px; }
    .main-esg .section-bg { background-image: url("/img/main/esg_bg_01_mo.jpg"); }
    .esg__list { gap: 20px; }
    .esg__item .icon-box { width: 80px; }
    .esg__item .text-box .title { font-size: 18px; }
    .esg__item .text-box .sub-title { font-size: 14px; }

    .main-notice .section-bg { background-image: url("/img/main/notice_bg_01_mo.jpg"); }
    .main-notice .top__area { flex-direction: column; align-items: center; row-gap: 40px; }
    .main-notice .title-box { width: 100%; text-align: center; }
    .notice-slider { margin-top: 20px; }
    .notice-slider .slider-item > a { padding: 20px; }
    .notice__list > li { padding: 10px; row-gap: 6px; }
    .notice__list > li .title { font-size: 16px; }
    .notice__list > li .date { font-size: 14px; }
    .notice-list__wrap .button__wrap { margin-top: 30px; }
    .notice-list__wrap .btn-link-arrow { font-size: 14px; }
    .notice-list__wrap .btn-link-arrow::after { width: 6px; height: 9px; margin-left: 8px; }
}
@media screen and (max-width:640px) {
    .m-business__list > li { width: 100%; }
    .m-business__list > li .bg { height: 200px; }
    .m-business__list > li .cover .title { font-size: 20px; }
    .m-business__list > li .cover .text { margin: 15px 0; font-size: 14px; }
}