@charset "utf-8";

.hero { position: relative; width: 100%; height: 100dvh; min-height: 600rem; background: radial-gradient(circle at 20% 0, #648de3 10%, #6768e3) 0 / cover no-repeat; color: #fff; &::before { content: "히어로"; position: absolute; inset: 0; margin: auto; align-content: center; text-align: center; font: 200 var(--font-size-32) var(--font-sans); } }

/* main-hero */
.main-hero{
    --base-height: unset;contain: content;position:relative;align-content: center;height: 100dvh;padding-top: .3%;background: #000;color: #fff;isolation: isolate;
    
    .swiper{ position: absolute; inset: 0; z-index: -1; }
    .swiper-slide{ position: relative; height: var(--base-height); }
    .swiper-slide::after { content: ''; position: absolute; background: #000; opacity: 30%; top: 0; left: 0; width: 100%; height: 100%; }
    .slide-1::before{ background-image: url('/assets/images/main/hero-slide-01.webp'); }
    .slide-2::before{ background-image: url('/assets/images/main/hero-slide-02.webp'); }
    .heading{display: grid;gap: 20rem;text-align: unset;text-wrap: balance;}
    .heading small{font-size: var(--font-size-32);font-weight: 200;}
    .heading b{font-weight: 800;font-family: 'Pretendard';font-size: var(--font-size-65);line-height: 1.3;}
    .heading b strong {color: #4290CC;}
    .hero-video { width: 100%; height: 100%; object-fit: cover; }
    .control-block{margin-top: 50rem;display: flex;align-items: center;justify-content: flex-start;gap: 1.25em;}
    .pagination{ display: inline-flex; align-items: center; gap: .625em; width: auto; font: 300 var(--fs16) var(--font-pre); }
    .swiper-pagination-current, .swiper-pagination-total{ min-width: 2ch; }
    .swiper-pagination-current{ font-weight: 700; }
    .swiper-pagination-total{ margin-left: .4ch; }
    .progress{ contain: content; position: relative; display: block; width: 180rem; height: 2px; background: linear-gradient(#fff, #fff) left / calc(var(--progress, 0) * 100%) 100% no-repeat, #FFFFFF4D; border-radius: 5em; }
    .play-toggle{ flex-shrink: 0; align-items: center; width: 40rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; }
    .play-toggle::before{ content: ''; display: inline-block; width: 30%; aspect-ratio: 1; background: currentColor; }
    .play-toggle:not(.is-pause)::before{ --p-1: 20%; --p-2: 37.5%; --p-3: 62.5%; --p-4: 80%; clip-path: polygon(0 100%, var(--p-1) 100%, var(--p-1) 0, var(--p-2) 0, var(--p-2) 100%, var(--p-3) 100%, var(--p-3) 0, var(--p-4) 0, var(--p-4) 100%); }
    .play-toggle.is-pause::before{ clip-path: polygon( 10% 0, 90% 50%, 10% 100%); }

    .scroll-wrap {
        position: absolute; width: 100%; height: auto; display: flex; left: 0; bottom: 50rem; align-items: center; justify-content: center;

        .scroll-down{position: relative;inset: unset;font: 300 14rem var(--font-pre);text-transform: unset;text-align: center;display: flex;width: 100%;flex-direction: column;gap: 15rem;align-items: center;}
        .text{margin: 0;}
        .arrow-line {}
        .arrow{margin-inline: 0;display: block;width: 13rem;height: auto;}
    }

    .slider-arrow { position: absolute; width: calc(var(--container-scale) * 100%); max-width: calc(var(--container-wide) * 1rem); margin-inline: auto; display: flex; justify-content: space-between; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .slider-arrow > div { position: relative; inset: unset; margin: 0; width: 100%; max-width: 65rem; height: auto; aspect-ratio: 1; background: rgb(255 255 255 / 20%); padding: 21rem; border-radius: 100rem; }
    .slider-arrow > div svg path { fill: #fff; }

    @media(max-width: 1600px){
        .heading { text-align: center; }
        .control-block { justify-content: center; }
    }
    @media(max-width: 767px){
        .scroll-wrap {
            inset: unset;bottom: 100rem;width: 100%;height: auto;
            
            .scroll-down { flex-direction: row; justify-content: center; }
            .text { writing-mode: unset; }
        }
        .slider-arrow {display: none;}
    }
}

/* main-about */
.main-about { 
    position: relative; padding-block: clamp(60rem, calc(150 / var(--container) * 100vw), 150rem); 

    &::before { content: ''; position: absolute; width: 510rem; height: 100%; background: #173b69; top: 0; right: 0; }
    .main-about-section { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap;}
    .main-about-section hgroup { display: flex; flex-direction: column; justify-content: center; max-width: 750rem; }
    .main-about-section hgroup>h2 {font-size: var(--font-size-50);margin-bottom: 30rem;color: #488fcb;line-height: 1.2;}
    .main-about-section hgroup p { font-size: var(--font-size-20); }
    .main-about-section .btn-view-more {position: relative;display: flex;gap: 20rem;font-size: 16rem;font-weight: 600;color: #777;align-items: center;margin-top: clamp(40rem, calc(80 / var(--container) * 100vw), 80rem);transition: all .3s;}
    .main-about-section .btn-view-more:hover { gap: 30rem; }
    .main-about-section .btn-view-more::before { content: ''; display: block; height: 1rem; width: 80rem; background: #999; }
    .main-about-section>figure { position: relative; display: flex; aspect-ratio: 1; max-width: 500rem; height: auto; overflow: hidden; border-radius: 10rem; }
    .main-about-section>figure img { width: 100%; height: 100%; object-fit: cover; transition: all .3s; }
    .main-about-section>figure:hover img {transform: scale(1.1);transition: all .3s;}

    @media(max-width: 1279px) {
        &::before { width: 100%; height: 200rem; inset: unset; bottom: 0; }
        .main-about-section>figure { margin-top: 50rem; max-width: unset; width: 100%; max-height: 300rem; aspect-ratio: unset; }
    }

}

/* main-product */
.main-product { 
    position: relative; padding-block: clamp(60rem, calc(150 / var(--container) * 100vw), 150rem); background: #fafafa; 

    .main-product-section { position: relative; }
    .main-product-section .title { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20rem; margin-bottom: clamp(40rem, calc(80 / var(--container) * 100vw), 80rem); }
    .main-product-section .title h2 {font-size: var(--font-size-50);}
    .main-product-section .title p { font-size: var(--font-size-20); color: #777; }
    .main-product-section .product-category { display: flex; gap: 20rem; }
    .main-product-section .product-category li { position: relative; flex: 1 1 0; min-width: 0; height: 500rem; overflow: hidden; border-radius: 10rem; transition: flex .5s ease; }
    .main-product-section .product-category:hover li { flex: 1 1 0; }
    .main-product-section .product-category li:hover { flex: 2 1 0; }
    .main-product-section .product-category li .card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; }
    .main-product-section .product-category li .card img { width: 100%; height: 100%; object-fit: cover; z-index: 0; }
    .main-product-section .product-category li .card hgroup { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10rem; padding: clamp(25rem, calc(50 / var(--container) * 100vw), 50rem); color: #fff; background: linear-gradient(0deg, rgb(0 0 0 / 50%), transparent); }
    .main-product-section .product-category li .card hgroup::after { content: ''; position: absolute; right: 50rem; bottom: 80rem; width: 30rem; height: 30rem; background: url('/assets/images/components/ico-arrow.svg') no-repeat center / contain; opacity: 0; }
    .main-product-section .product-category li:hover .card hgroup::after { opacity: 1; transform: rotate(-45deg); transition: all .6s; }
    .main-product-section .product-category li .card hgroup h4 { font-size: var(--font-size-28); }
    .main-product-section .product-category li:hover .card hgroup h4 { font-size: var(--font-size-35); }
    .main-product-section .product-category li .card hgroup p { opacity: 0; font-size: 0; }
    .main-product-section .product-category li:hover .card hgroup p { display: block; opacity: 1; font-size: var(--font-size-20); transition: all .3s; }

    @media(max-width: 1023px){
        .main-product-section .product-category { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20rem; }
        .main-product-section .product-category li {height: 200rem;}
    }
    @media(max-width: 767px){
        .main-product-section .product-category { grid-template-columns: repeat(1, 1fr);}
    }
}

/* main-esg */
.main-esg { 
    position: relative; padding-block: clamp(60rem, calc(150 / var(--container) * 100vw), 150rem); 

    .main-esg-section { position: relative; display: flex; justify-content: space-between; }
    .main-esg-section .title { display: flex; flex-direction: column; gap: 20rem; position: sticky; top: clamp(60rem, calc(150 / var(--container) * 100vw), 150rem); height: fit-content; }
    .main-esg-section .title h2 {font-size: var(--font-size-50);}
    .main-esg-section .title p { font-size: var(--font-size-20); color: #777; }
    .main-esg-section .title .btn-view-more {position: relative;display: flex;gap: 20rem;font-size: 16rem;font-weight: 600;color: #777;align-items: center;margin-top: clamp(40rem, calc(80 / var(--container) * 100vw), 80rem);transition: all .3s;}
    .main-esg-section .title .btn-view-more:hover { gap: 30rem; }
    .main-esg-section .title .btn-view-more::before { content: ''; display: block; height: 1rem; width: 80rem; background: #999; }
    .main-esg-section .esg-card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50rem; }
    .main-esg-section .esg-card .card { position: relative; display: flex; width: 335rem; height: 400rem; background: url(/assets/images/home/img-esg-01.jpg) no-repeat center / cover; border-radius: 10rem; overflow: hidden; transition: all .3s; }
    .main-esg-section .esg-card .card:hover { transform: scale(1.05); transition: all .3s; }
    .main-esg-section .esg-card .card::after { content: ''; background: linear-gradient( 0deg, black, transparent); position: absolute; width: 100%; height: 100%; top:0; opacity: 75%; transition: all .3s; }
    .main-esg-section .esg-card .card:hover::after { background: linear-gradient( 0deg, #4290CC, transparent); transition: all .3s; }
    .main-esg-section .esg-card .card.c02 { margin-top: 200rem; background-image: url(/assets/images/home/img-esg-02.jpg); }
    .main-esg-section .esg-card .card.c03 { margin-top: -200rem; background-image: url(/assets/images/home/img-esg-03.jpg); }
    .main-esg-section .esg-card .card.c04 { background-image: url(/assets/images/home/img-esg-04.jpg); }
    .main-esg-section .esg-card .card.c05 { margin-top: -200rem; background-image: url(/assets/images/home/img-esg-05.jpg); }
    .main-esg-section .esg-card .card hgroup { position: absolute; display: flex; flex-direction: column; width: 100%; bottom: 0; color: #fff; z-index: 1; padding: 35rem; gap: 10rem; font-size: var(--font-size-18); }
    .main-esg-section .esg-card .card hgroup span { font-size: var(--font-size-28); font-weight: 600; }
    .main-esg-section .esg-card .card hgroup::after {content: '';position: absolute;background: url(/assets/images/components/ico-arrow.svg) no-repeat center / contain;width: 25rem;height: 25rem;right: 35rem;top: 50%;transform: translateY(-50%) rotate(0deg);transition: all .3s;opacity: 0; display: none;}
    .main-esg-section .esg-card .card:hover hgroup::after {transform: translateY(-50%) rotate(-45deg);transition: all .3s;opacity: 1;}

    @media(max-width: 1023px){
        .main-esg-section { flex-direction: column; gap: 50rem; }
        .main-esg-section .title { top: unset; position: relative; }
        .main-esg-section .esg-card { grid-template-columns: repeat(2, 1fr); gap: 10rem; }
        .main-esg-section .esg-card .card { margin-top: auto !important; width: 100%; height: 200rem; }
    }
    @media(max-width: 767px){
        .main-esg-section .esg-card { grid-template-columns: repeat(1, 1fr); }
    }
}

/* main-board */
.main-board { 
    position: relative; padding-block: clamp(60rem, calc(150 / var(--container) * 100vw), 150rem); background: #fafafa; 

    .main-board-section {position: relative;display: flex;gap: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem);}
    .main-board-section > div { width: 100%; }
    .main-board-section > div .title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 40rem; border-bottom: 1rem solid #000; }
    .main-board-section > div .title h2 {font-size: var(--font-size-50);line-height: 1;}
    .main-board-section > div .title .btn-view-more {position: relative;display: flex;gap: 20rem;font-size: 16rem;font-weight: 600;color: #999;align-items: center;}
    .main-board-section .board-notice .list-notice { display: flex; flex-direction: column; }
    .main-board-section .board-notice .list-notice li a { padding-block: 30rem; display: flex; flex-direction: column; border-bottom: 1rem solid #ddd; gap: 10rem; }
    .main-board-section .board-notice .list-notice li a .date {font-size: 16rem;color: #555;}
    .main-board-section .board-notice .list-notice li a p { font-size: var(--font-size-18); font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
    .main-board-section .online-inquiry .form > form { position: relative; display: flex; flex-direction: column; gap: 60rem; margin-top: 30rem; }
    .main-board-section .online-inquiry .form .input-form { display: flex; flex-direction: column; gap: 20rem; }
    .main-board-section .online-inquiry .form .input-form li { display: flex; gap: 30rem; }
    .main-board-section .online-inquiry .form .input-form li .input-wrap { display: flex; gap: 10rem; align-items: center; font-size: var(--font-size-18); width: 100%; }
    .main-board-section .online-inquiry .form .input-form li .input-wrap > label { font-weight: 700; min-width: 80rem; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 5rem; }
    .main-board-section .online-inquiry .form .input-form li .input-wrap > input { background: transparent; border: 0; border-bottom: 1rem solid #ddd; min-height: 50rem; width: 100%; padding-inline: 10rem; }
    .main-board-section .online-inquiry .form .cta {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 20rem;}
    .main-board-section .online-inquiry .form .cta .agree { display: block; font-weight: 500; }
    .main-board-section .online-inquiry .form .cta .agree>a { display: inline-block; text-decoration: underline; padding-left: 20rem; margin-left: 20rem; border-left: 1rem solid #222; }
    .main-board-section .online-inquiry .form .cta .btn-submit { display: flex; padding: 20rem 50rem; font-weight: 600; font-size: var(--font-size-18); background: #222; color: #fff; border-radius: 5rem; }

    @media(max-width: 767px){
        .main-board-section { flex-direction: column; }
        .main-board-section .online-inquiry .form .input-form li { flex-wrap: wrap; }
        .main-board-section .online-inquiry .form .cta .agree { font-size: 12rem; }
        .main-board-section .online-inquiry .form .cta .agree>a { padding-left: 10rem; margin-left: 10rem; }
    }
}