:root {
   /* --bs-sectionTitleColr: #f0831f; */
}
#fullpageSections .gio-section {
    position: relative;
    width: 100%;
    overflow: hidden; /* 섹션 안 내용이 100vh를 넘어도 섹션 자체에 스크롤이 생기지 않게 */
    background-color: #1b1d22;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#fullpageSections #products {
    /* background-size: 100% auto; 가로 100% 꽉 차게, 잘리지 않고 비율대로 */
    background-size: cover; /* 가로 100% 꽉 차게, 잘리지 않고 비율대로 */
    background-position: center;
    background-repeat: no-repeat;
}
#products, #technology, #contact {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
    padding: 90px 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#fullpageSections #contact {
    padding-left: 0;
    padding-right: 0;
}

#products { background-image: url('../images/bg_products.jpg'); }
/*#technology { background-image: url('../images/bg_technology.jpg'); }*/
#contact { background-image: url('../images/bg_contact.jpg');}


#products .products-intro {
    margin: 0 0 40px;
    text-align: center;
    font-weight: 300;
    line-height: 1.6;
}

#products .products-grid {
    width: 100%;
    max-width: 1680px;
}

#products .product-card {
    position: relative;
    container-type: inline-size; /* .product-name 폰트 크기를 뷰포트가 아닌 카드 자신의 너비에 맞춤 */
}

#products .product-photo {
    display: block;
    width: 100%;
    aspect-ratio: 552 / 596;
    background-size: cover;
    background-position: center;
}
#products .product-photo.g79 {
    background-image: url('../images/bg_products_g79_dark.jpg');
    --bg-dark: url('../images/bg_products_g79_dark.jpg');
    --bg-normal: url('../images/bg_products_g79.jpg');
}
#products .product-photo.g77 {
    background-image: url('../images/bg_products_g77_dark.jpg');
    --bg-dark: url('../images/bg_products_g77_dark.jpg');
    --bg-normal: url('../images/bg_products_g77.jpg');
}
#products .product-photo.g78 {
    background-image: url('../images/bg_products_g78_dark.jpg');
    --bg-dark: url('../images/bg_products_g78_dark.jpg');
    --bg-normal: url('../images/bg_products_g78.jpg');
}
#products .product-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    color: #fff;
}

#products .product-cat {
    display: block;
    font-weight: 300;
    padding: 0.3rem 2rem;
}
#products .product-cat i {
    font-size: 16px;
}

#products .product-name {
    display: block;
    font-size: clamp(3.5rem, 27cqw, 150px);
    font-weight: 900;
    line-height: 1;
    padding: 1.5rem 2rem 2rem;
}

#products .product-name b {
    font-weight: 900;
    font-size: clamp(1.5rem, 10cqw, 55px);
    margin-left: 10px;
}

/* #vision */
#vision {
    min-height: 100vh;
    background-color: #1b1d22;
    color: #fff;
    display: flex;
    align-items: center;
}
#vision .bg {
    width: 100%;
    height: 100%;
    aspect-ratio: 8 / 3;
    background-image: url('../images/bg_vision.jpg');
    background-position: center;
    background-size: cover;
    
    --bg-dark: url('../images/bg_vision_dark.jpg');
    --bg-normal: url('../images/bg_vision.jpg');
}
@media (max-width: 768px) {
    #vision .bg {
        aspect-ratio: 3 / 2;
    }
}
.mainitag {
    font-size: 8px;
    line-height: 1;
}

/* #industry : bg 이미지 대신 부트스트랩 그리드 + 실제 이미지/아이콘 사용 */
#industry {
    min-height: 100vh;
    background-color: #1b1d22;
    color: #fff;
    display: flex;
    align-items: center;
}
#industry .limg {
    border-bottom-left-radius: 1rem !important;
    border-top-left-radius: 1rem !important;
    border: 1px solid #dee2e6 !important;
    border-right: 0 !important;
    overflow: hidden !important;
}
#industry .rtext {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
    border: 1px solid #dee2e6 !important;
    /* border-right: 0 !important; */
    overflow: hidden !important;
}
@media (max-width: 992px) {
    #industry .limg {
        border-radius: 0 !important;
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
        border: 1px solid #dee2e6 !important;
        border-bottom: 0 !important;
        overflow: hidden !important;
    }
    #industry .rtext {
        border-radius: 0 !important;
        border-bottom-right-radius: 1rem !important;
        border-bottom-left-radius: 1rem !important;
        border: 1px solid #dee2e6 !important;
        border-top: 0 !important;
        overflow: hidden !important;
    }
}

#industry .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: #fff;
    --bs-list-group-border-color: #fff;
    --bs-list-group-active-bg: transparent;
}

/* #technology : background-image, w992px 이하에서 background-image 어둡게 */
#technology.ani-bgimg {
    width: 100%;
    height: 100%;
    background-image: url('../images/bg_technology.jpg');
    background-position: left bottom;
    background-size: cover;
    
    --bg-dark: url('../images/bg_technology_dark.jpg');
    --bg-normal: url('../images/bg_technology.jpg');
}
@media (max-width: 992px) {
    #technology.ani-bgimg {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/bg_technology.jpg');
        --bg-dark: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/bg_technology_dark.jpg');
        --bg-normal: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/bg_technology.jpg');
    }
}

/* footer S */
.fCon dl > * {
    display: inline-block;
    font-weight: 400;
}
.fCon dl > dt {
    margin-right: .5rem;
}
@media (min-width: 768px) {
    .fCon dl:not(:first-child) {
        margin-left: 3rem;
    }
}
@media (max-width: 768px) {
    .fCon dl > dt {
        min-width: 3rem;
    }
}
/* footer E */

/* 버튼 위치 */
.mBtn {
    padding:0.625rem 1.5rem;
    margin-top:9.5rem
}
/* 마우스 오버 시 배경/텍스트 색 반전 */
#industry .list-group-item {
    background-color: transparent;
    color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#industry .list-group-item:hover {
    background-color: #fff;
    color: #000;
}

/* 오버 시 아이콘 교체 (반전 이미지 경로만 지정, 실제 파일은 추후 교체) */
#industry .list-group-item .icon-hover {
    display: none;
}
#industry .list-group-item:hover .icon-default {
    display: none;
}
#industry .list-group-item:hover .icon-hover {
    display: block;
}

#technology .container-xxl {
    position: relative;
    top: -50px;
}

#contact .container-xxl {
    position: relative;
    top: 74px;
}

@media (max-width: 576px) {
    #fullpageSections .gio-section {
      overflow: visible;
   }
   .mBtn {        
        margin-top:3rem
    }
}

@media (max-width: 991px) {
    #fullpageSections .gio-section {
        height: auto !important;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: visible; /* 세로 스크롤 허용 */
        padding-top: 120px !important;
        padding-bottom: 80px !important;
    }
    #products .product-name {
        padding: 1rem 1.5rem 1.5rem; /* 텍스트 여백 약간 축소 */
    }
    #contact .container-xxl {
        top: 0; /* 모바일에서는 하향 이동 해제하여 레이아웃 무너짐 방지 */
    }
    #fullpageSections #technology {
        /* #fullpageSections .gio-section(우선순위 1,1,0)보다 명시도를 높여야 이김 */
        /*background-position: left;*/ /* 모바일에서는 배경 이미지를 왼쪽 기준으로 노출 */
        padding-left: 0; /* 원래 5vw + 내부 컨테이너 12px가 더해져 다른 섹션(12px)보다 좌우 여백이 넓었던 것 보정 */
        padding-right: 0;
    }
    .display-3 {
        font-size: calc(2rem + 3vw); /* 모바일 디스플레이 폰트 보정 */
    }
    img[src*="logo_footer.png"] {
        width: 10rem; /* footer 로고 크기 */
    }
}

@media (min-width: 992px) {
    #fullpageSections .gio-section {
        min-height: 100vh; /* 화면 세로 길이가 작아 내용이 100vh보다 커져도 잘리지 않고 항상 화면을 100% 채움 */
        overflow: visible;
        scroll-snap-align: start;
    }
}
/************************************************
모바일에서 br 태그 없애기
************************************************/
@media (max-width: 576px) {
   br {
      display: none;
   }
   .br_m {
      display: none;
   }
}



/************************************************
애니메이션, hover TEST
************************************************/
/* .product-card hover */
.product-card:hover .product-photo {
    animation: .75s bgimag-size ease-out forwards;
}
@keyframes bgimag-size {
    from {
        background-image: var(--bg-dark);
        background-size: 100%;
    }
    to {
        background-image: var(--bg-normal);
        background-size: 105%;
    }
}
.product-card .product-label {
    background-color: rgba(33, 37, 41, 0.75);
}
.product-card:hover .product-label {
    animation: 1s bg-opacity ease-out forwards;
    background-color: rgba(33, 37, 41, 0.75);
}
@keyframes bg-opacity {
    from {
        background-color: rgba(33, 37, 41, 0.75);
    }
    to {
        background-color: rgba(33, 37, 41, 0.85);
    }
}
.product-card:hover .product-name {
    animation: 1s fadein-glow ease-out forwards;
}
@keyframes fadein-glow {
    from {
        opacity: 0;
        text-shadow: 0 0 0, 0 0 0;
    }
    to {
        opacity: 1;
        text-shadow: 0 0 10px #ffffff66, 0 0 10px #ffffff66;
    }
}

/* 텍스트 fade-in
   스크롤로 섹션에 들어올 때만(= .in-view일 때만) 재생되고, 다른 섹션으로 갔다가 다시 돌아오면
   ani-observer.js(IntersectionObserver)가 .in-view를 껐다 켜면서 애니메이션이 처음부터 다시 재생됨 */
.ani-text {
    opacity: 0;
}
.ani-text.in-view {
    animation: fadein .8s ease-out forwards;
}
@keyframes fadein {
    0%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 텍스트 fade-in + glow + transY */
h2.ani-text {
    opacity: 0;
}
h2.ani-text.in-view {
    animation: fadein-glow-transY 1s linear forwards;
}
@keyframes fadein-glow-transY {
    0%{
        transform: translateY(50px);
        opacity: 0;        
    }
    60% {
        transform: none;
        opacity: 1;
        text-shadow: 0 0 20px #ffffff66, 0 0 20px #ffffff66;
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 0 #ffffff00, 0 0 0 #ffffff00;
    }
}

/* 이미지 fade-in + transY */
.ani-transY {
    transform: translateY(50px);
    opacity: 0;
}
.ani-transY.in-view {
    animation: transY 1s ease-in-out forwards;
}
@keyframes transY {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    60% {
        transform: none;
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

/* 이미지 background-image + transY*/
.ani-bgimg.in-view {
    animation: bgimag 1s ease-in-out forwards;
}
@keyframes bgimag {
    0% {
        background-image: var(--bg-dark);
    }
    40% {
        background-image: var(--bg-dark);
    }
    100% {
        background-image: var(--bg-normal);
    }
}
.ani-trbgimg {
    transform: translateY(50px);
    opacity: 0;
}
.ani-trbgimg.in-view {
    /* opacity/transform과 background-image(크로스페이드)를 한 애니메이션에 같이 넣으면
       background-image 보간(cross-fade) 때문인지 forwards가 끝난 뒤 opacity가 0으로
       되돌아가 이미지가 안 보이는 현상이 실측으로 확인됨 — 두 애니메이션으로 분리해서 해결
       (bgimag는 .ani-bgimg에서 이미 쓰는 것과 동일한 keyframes 재사용) */
    animation: transY-reveal 1s ease-in-out forwards, bgimag 1s ease-in-out forwards;
}
@keyframes transY-reveal {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    60% {
        transform: none;
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

/* animation-delay */
.delay-2 {
    animation-delay: .15s;
}
.delay-3 {
    animation-delay: .3s;
}

/* #products 카드 3개는 동시에 나타나지 않고 하나씩 순서대로 실행되도록
   (앞 카드 애니메이션 1s가 끝난 뒤 다음 카드가 시작) 더 구체적인 선택자로 delay-2/3을 재정의 */
#products .product-card.delay-2 {
    animation-delay: .2s;
}
#products .product-card.delay-3 {
    animation-delay: .6s;
}

/* #vision의 텍스트/버튼 영역(.col-lg-3)과 이미지(.col-lg-9 안의 .bg)는
   "Shaping the Future..." 제목(h2.ani-text, 1s) 애니메이션이 끝난 뒤, 두 col이
   서로 동시에 시작하도록 더 구체적인 선택자로 공용 delay-3(.3s)를 둘 다 재정의 */
#vision .col-lg-3.pe-5.delay-3,
#vision .col-lg-9 .ani-trbgimg.delay-3 {
    animation-delay: .3s;
}
/* 조금 더 빠르게 작동하도록 두 col의 재생 시간(1s)을 축소 */
#vision .col-lg-3.pe-5.ani-transY,
#vision .col-lg-9 .ani-trbgimg {
    animation-duration: .7s;
}