/* 기본 스타일 설정 */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #f4f4f4;
    height: 100%;
}

/* 전체 페이지 레이아웃 */
#fullpage {
    height: 100%;
    position: relative;
}

.section {

    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.4);

}

/* 로케이션 스타일 */
.location {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.loca_home a {
    font-size: 14px;
    color: #999;
    text-decoration: none;
    padding-right: 10px;
}

.loca_sel {
    position: relative;
    font-size: 16px;
    cursor: pointer;
}

.loca_sel:hover .hidden_div {
    display: block;
}

/* 서브 메뉴 */
.hidden_div {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.hidden_loca {
    list-style: none;
    padding: 10px 0;
    margin: 0;
}

.hidden_loca li {
    padding: 8px 20px;
}

.hidden_loca li a {
    font-size: 14px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.hidden_loca li:hover {
    background-color: #f9f9f9;
}


/* 브랜드 섹션 */
/* 브랜드 섹션을 좌우 배치하는 Wrapper */
/* .brand-content {
    max-height: 650px;
    min-height: 150px;
} */
.brandContent ul {
    padding-inline-start: 0px
}
.brandWrapper {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: lighten;
    opacity: 0.85;
    background-position: 12% 70%;
    background-size: 20%;
}
.brandWrapper-vertical {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: lighten;
    opacity: 0.85;
    background-position: 90% 5%;
    background-size: 12%;
}
.titleImg{
    margin: 50px;
    max-width: 50%;  /* 부모 요소의 너비를 넘지 않도록 설정 */
    max-height: 100%; /* 부모 요소의 높이를 넘지 않도록 설정 */
    text-align: center;
    height: auto;     /* 비율을 유지하면서 크기 조정 */
    object-fit: contain; /* 이미지 비율 유지 */
}
.titleImg img{
    max-width: 100%;  /* 부모 요소의 너비를 넘지 않도록 설정 */
    max-height: 100%; /* 부모 요소의 높이를 넘지 않도록 설정 */
}
/* 왼쪽 섹션 */
.secBrand01 {
    width: 50%; /* 왼쪽 섹션 크기 */
    padding-right: 20px;
    overflow: hidden; /* 넘치는 이미지를 숨김 */
    max-height: 500px;
    min-height: 150px;
}


.secBrand01 .titleBox strong {
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
    font-size: 45px;
    color: #000;
}
.description {
    margin: 40px 0px;
}
.description span { 
    font-size: 18px;
    color: black;

}

.secBrand01 p, .secBrand_top p {
    font-size: 18px;
    color: #666;
    margin-bottom: 0px;
}

/* 오른쪽 섹션 */
.secBrand02 {
    width: 50%; /* 오른쪽 섹션 크기 */
    padding-left: 20px;
}
/* 상단 섹션 */
.secBrand_top{
    width: 100%; /* 왼쪽 섹션 크기 */
    padding-right: 20px;
    overflow: hidden; /* 넘치는 이미지를 숨김 */
    max-height: 500px;
    min-height: 150px;
}
.secBrand_top .titleBox strong {
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
    font-size: 45px;
    color: #000;
}
/* 하단 섹션 */
.secBrand_bottom {
    width: 100%; /* 오른쪽 섹션 크기 */
    padding-left: 20px;
}

/* 아이콘 리스트 */
.brand_icons {
    display: flex;
    flex-wrap: wrap;        /* 박스가 두 줄로 배치되도록 설정 */
    justify-content: space-between; /* 박스 간의 간격 균등하게 배치 */
    gap: 20px;              /* 박스 간격 */
    max-width: 800px;        /* 전체 섹션의 최대 너비 */
    margin: 0 auto;          /* 섹션을 중앙에 배치 */
    list-style: none;
}

.brand_icons li {
    width: calc(50% - 10px); /* gap의 반만큼 여유를 줌 */
    box-sizing: border-box;
    text-align: center;
}

.brand_icons li img {
    width: 100px; /* 아이콘 크기 */
    height: auto;
    margin-bottom: 10px;
}

.brand_icons li p {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    white-space: nowrap; /* 줄바꿈 안되게 설정 */
}

/* 아이콘 박스 */

.brand_box {
    display: flex;
    flex-direction: column;  /* 세로로 배치 */
    align-items: center;     /* 박스를 중앙 정렬 */
    gap: 20px;               /* 박스 간격 */
    max-width: 100%;         /* 전체 너비를 100%로 설정 */
    margin: 0 auto;          /* 섹션을 중앙에 배치 */
}

.icon_box {
    width: 100%;              /* 박스의 너비를 100%로 설정 */
    padding: 20px;           /* 박스 내부 여백 */
    border-radius: 10px;     /* 둥근 모서리 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 박스 그림자 */
    background-color: rgba(255 255 255 / 92%); /* 배경색 */
    transition: transform 0.2s ease-in-out;  /* 호버 시 부드러운 움직임 */
}

.icon_box:hover {
    transform: scale(1.02);  /* 호버 시 박스를 약간 확대 */
}

.icon_box strong {
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: bold;
}

.icon_box p {
    font-size: 14px;
    color: #333;
    margin: 0;
}
.arrow {
    font-size: 24px;
    color: #666;
    margin-bottom: 20px;
}

/* 슬라이드 박스 */

.slider-container {
    overflow: hidden;
    max-width: 800px; /* 슬라이더 전체 너비 설정 */
    margin: 0 auto;
}

.slider {
    display: flex;
    gap: 20px; /* 아이템 간의 간격 */
    transition: transform 0.3s ease;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.slider_box {
    flex: 0 0 300px; /* 각 박스의 고정 너비 설정 */
    background-color: #FFFCF3;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    scroll-snap-align: start;
}

.slider_box strong {
    font-size: 22px;
    color: #333;
}

.slider_box p {
    font-size: 16px;
    color: #666;
    margin-top: 10px;
}

.arrow {
    font-size: 24px;
    color: #666;
    align-self: center;
}


/* 하단 단계 섹션 스타일 */
.steps-wrapper {
    display: flex;
    justify-content: space-around;
    /* flex-direction: column; */
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    gap: 15px
}

.rectangle_box {
    width: 100%;
    max-width: 500px;
    height: 250px;
    background-color: rgba(255 255 255 / 92%);
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin: 10px 0;
}

.rectangle_box strong {
    font-size: 16px;
    color: #333;
    margin: 20px 0;
    display: block;
}

.step-divider {
    border: 0;
    height: 1px;
    background-color: #616161;
    width: 80%;
    margin: 30px auto;
}

.rectangle_box p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* 가로 화살표 스타일 */
.arrow-horizontal {
    width: 40px;
    height: 10px;
    background-color: transparent;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    transform: rotate(45deg);
    /* margin: 10px auto; */
}



/* 반응형 설정: 작은 화면에서는 상하 배치 */
@media screen and (max-width: 768px) {
    .description {
        margin: 10px 0px;
    }
    .brandWrapper {
        flex-direction: column;
    }
    .secBrand01 .titleBox strong, .secBrand_top .titleBox strong{
        font-size: clamp(20px, 1em, 40px);
        white-space: nowrap;
    }
    .description span { 
        font-size: 15px;
    
    }
    .brand_icons li p {
        font-size: 11px;
    }
    .secBrand01 p, .secBrand_top p {
        font-size: clamp(12px, 1vw, 14px);
    }

    .secBrand01, .secBrand02, .secBrand_top {
        width: 100%; /* 작은 화면에서는 전체 폭 차지 */
        padding: 0;
        text-align: center;
        min-height: 0;
    }

    .secBrand02 {
        padding-top: 20px;
    }
    .brandWrapper, .brandWrapper-vertical {
        background-position: center bottom; /* 모바일에서 가운데 아래 */
        background-size: 50%; /* 크기 조정 */
    }
    .steps-wrapper {
        flex-direction: column;
    }
    .step-divider {
        margin: 10px auto;
    }
    .rectangle_box {
        height: auto;
        padding: 12px;
        margin: 1px;

    }
    .rectangle_box strong {
        margin: 10px 0px;
    }
    .arrow-horizontal {
        width: 10px;
        transform: rotate(135deg);
    }
    .icon_box strong, .rectangle_box strong {
        font-size: 15px;
    }
    
    .icon_box p, .rectangle_box p {
        font-size: 11px;
    }
    .brand_icons li img {
        width: 60px;
    }
}


/* 슬라이드 버튼 */
.slideBtn a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #ccc;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.slideBtn a:hover {
    background-color: #888;
}

/* 탭 메뉴 */
.secBrandTab ul {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.secBrandTab li {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.secBrandTab li a {
    text-decoration: none;
    color: #666;
}

.secBrandTab li a.on {
    color: #000;
    font-weight: bold;
}

.secBrand04DescArea {
    margin-top: 40px;
}

.brTab01 {
    display: none;
}

.brTab01.on {
    display: block;
}

.secBrand04DescArea p {
    font-size: 18px;
    color: #555;
}