/*

    HADE.PHP - CSS

*/


/* 1. GNB 전체 영역 투명화 */
#gnb {
    background-color: rgba(255, 255, 255, 0.7) !important; /* 배경만 70% 투명 */
    backdrop-filter: blur(8px) !important; /* 뒤 배경 흐림 효과 */
    -webkit-backdrop-filter: blur(8px) !important;
    position: relative;
    z-index: 1000 !important;
}

/* 2. 1차 메뉴 리스트 배경 제거 */
.gnb_1dul, .gnb_1dli {
    background: transparent !important;
}

/* 3. 서브 메뉴(2차) 하단으로 내려오는 박스 투명화 */
.gnb_2dul {
    /*
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;*/
}

/* 4. 글자색 강제 고정 (투명 배경에서 잘 보이게) */
.gnb_1da, .gnb_2dul li a {
    color: #222 !important;
    /*text-shadow: 0 0 1px rgba(255,255,255,0.5);  글자 가독성 보조 */
}

/* 기본 상태 */
#tnb {
    border-bottom:0px solid gray !important;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    height: 40px; /* 실제 tnb의 높이에 맞게 조절하세요 (예: 40px) */
    opacity: 1;
}

/* 스크롤 시 사라질 상태 */
.tnb-hide {
    height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    pointer-events: none; /* 클릭 방지 */
}

/** 메뉴 투명 style */
    /* 1. 헤더 전체 영역 투명화 */
#hd {
    position: absolute; /* 배경 이미지 위에 겹치게 배치 */
    top: 0;
    left: 0;
    width: 100%;
    background: transparent !important;
    border: none !important;
    z-index: 1000;
    box-shadow: none !important;
}

/* 2. 헤더 내부 wrapper 투명화 및 여백 조절 */
#hd_wrapper, .hd_sch_wr, #logo {
    background: transparent !important;
    border: none !important;
    
}

/* 3. 로고와 메뉴 글자색 (배경이 어두울 때 대비) */
#logo a {
    color: #fff !important;
    font-size: 24px;
    font-weight: bold;
}   
.gnb {background: transparent !important;}
.gnb_1dul{
        background: transparent !important;
}
#gnb .gnb_1da {
    color: #fff !important; /* 글자색 흰색 강제 */
    /*  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); 가독성을 위한 미세한 그림자 */
}

/* 4. 서브메뉴(2차 메뉴) 스타일 - 가독성을 위해 반투명 블랙 유지 */
#gnb .gnb_2dul {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(8px); /* 뒤 배경 흐림 효과 */
    border: none !important;
}

#gnb .gnb_2dul li a {
    color: #fff !important;
}

/* --------------------------------------------------
[추가] 스크롤 시 헤더에 배경색 넣기 (선택 사항)
만약 아래로 내릴 때 메뉴가 안 보인다면 이 기능을 사용하세요.
-------------------------------------------------- */
.header-fixed {
    position: fixed !important;
    background: rgba(255, 255, 255, 0.9) !important; /* 스크롤 시 흰색 반투명 */
    box-shadow: 0 1px 5px rgba(0,0,0,0.1) !important;
}

.header-fixed #gnb .gnb_1da, 
.header-fixed #logo a {
    color: #333 !important; /* 스크롤 시 글자색 검정으로 변경 */
}

/* 1. 헤더 및 GNB 전체 배경 흐림 효과 제거 */
#hd, #hd_wrapper, #gnb {
    background: transparent !important;
    backdrop-filter: none !important; /* 흐림 효과 강제 제거 */
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. 서브메뉴 (2차 메뉴) 배경 설정 */
/* 흐림 효과 없이 그냥 깨끗한 반투명 색상만 적용 */
#gnb .gnb_2dul {

}

/* 3. 1차 메뉴 호버 시 효과 */
.gnb_1dli:hover .gnb_2dul {
    display: block;
}

/* 4. 스크롤 시 발생하는 흐림 효과도 제거 (스크립트 사용 시) */
.header-fixed {
    background: rgba(255, 255, 255, 1) !important; /* 완전 불투명 흰색으로 변경 */
    backdrop-filter: none !important;
}

/* 스크롤 내렸을시.. */
/* 기본 상태: 투명 헤더 */
#hd {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent !important;
    transition: background 0.3s ease, box-shadow 0.3s ease; /* 부드러운 전환 효과 */
    z-index: 1000;
}

/* 1차 메뉴 기본 글자색 (흰색) */
#hd #gnb .gnb_1da, #hd #logo a {
    color: #fff !important;
    transition: color 0.3s ease;
}

/* --------------------------------------------------
스크롤 시 적용될 클래스 (흰색 배경으로 변경)
-------------------------------------------------- */
#hd.header-fixed {
    position: fixed !important; /* 상단 고정 */
    background: #fff !important; /* 흰색 배경 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; /* 하단 그림자 */
    border-bottom: 1px solid #eee !important;
}

/* 스크롤 시 글자색을 검정색으로 변경 */
#hd.header-fixed #gnb .gnb_1da, 
#hd.header-fixed #logo a {
    color: #333 !important;
}

#hd.header-fixed .hd_icons a, #hd.header-fixed .hd_icons button, #hd.header-fixed .hd_icons i{
    border:1px solid black;
}


/* 스크롤 시 서브메뉴(2차 메뉴) 배경도 조정 가능 */
#hd.header-fixed .gnb_2dul {
    background: #ffffff !important;
    border: 1px solid #eee !important;
}

#hd.header-fixed .gnb_2dul li a {
    color: #333 !important;
}

/* 2차메뉴 마우스 hover 시.. */
#hd.header-fixed .gnb_2dul li a:hover {
    color: #ffffff !important;
}

/* 모바일 메뉴css */
/* 모바일(768px 이하)에서 PC 스타일 강제 이식 */
@media (max-width: 768px) {
    /* 보통 .menu-trigger, .hamburger, .btn-menu 등의 클래스명을 사용합니다 */
.line {
    background-color: #a7a7a7 !important; /* 흰색으로 강제 적용 */
}
}

/** PC_메뉴 **/
#ol_after {
    display:none;
}
    
#gnb { position: relative; height: 80px;}
.gnb_1dul { list-style: none; display: flex; justify-content: center; padding: 0; margin: 0; }
.gnb_1dli { position: relative; width: 150px; text-align: center; } /* 너비 고정으로 흔들림 방지 */

.gnb_1da { display: block; font-weight: 500; font-size: 18px; text-decoration: none; color: #333; }

/* 서브메뉴: 부모 너비에 영향 주지 않도록 absolute 고정 */
.gnb_2dul { 
    display: none; 
    position: absolute; 
    top: 80px; 
    left: 0; 
    width: 100%; 
    background: #fff; 
    border: 1px solid #eee; 
    padding: 10px 0; 
    z-index: 999; 
}
.gnb_2dul li a { display: block; padding: 10px; font-size: 14px; text-decoration: none; color: #666; }
.gnb_2dul li a:hover { background: #38527d; color: #000; }

/* 호버 시 서브메뉴 표시 */
.gnb_1dli:hover .gnb_2dul { display: block; }

/*상단 회원가입/로그인 영역 (작은둥근)*/
/* 1. 기본 상태 (투명 헤더일 때) */
.hd_icons {
    display: flex;
    align-items: center;
    gap: 15px; /* 아이콘 사이 간격 */
    transition: all 0.3s ease;
}

.hd_icons a, 
.hd_icons button, 
.hd_icons i {
    
    border:1px solid white;
    color: #fff !important; /* 투명 배경 위에서는 흰색 아이콘 */
    font-size: 13px; /* 아이콘 크기 조절 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* 가독성 확보 */
    transition: color 0.3s ease;
}

/* 마우스 올렸을 때 효과 */
.hd_icons a:hover, 
.hd_icons button:hover {
    color: #38527d !important; /* 메뉴와 통일감 있는 포인트 컬러 */
}

/* --------------------------------------------------
2. 스크롤 시 (흰색 배경으로 바뀌었을 때)
-------------------------------------------------- */
#hd.header-fixed .hd_icons a, 
#hd.header-fixed .hd_icons button, 
#hd.header-fixed .hd_icons i {
    color: #333 !important; /* 흰색 배경 위에서는 진한 회색/검정 */
    text-shadow: none !important;
}

/* 스크롤 상태에서 호버 시 */
#hd.header-fixed .hd_icons a:hover {
    color: #38527d !important; /* 스크롤 상태에서의 포인트 컬러 (선택 사항) */
}

/* 메인 슬라이드 영역 */
/* 기본 초기화 (테마에 이미 있다면 제외 가능) */
body, h2, p { margin: 0; padding: 0; font-family: 'Pretendard', sans-serif; }

/* 메인 비주얼 섹션 */
#main_visual {
    width: 100%;
    height: 100vh; /* 화면 높이 전체 사용 (VH 단위) */
    position: relative;
    overflow: hidden;
    background-color: #000; /* 이미지 로딩 전 배경색 */
}

.mySwiper {
    width: 100%;
    height: 100%;
}

.slide-item {
    width: 100%;
    height: 100%;
    background-size: cover; /* 이미지를 비율 깨짐 없이 꽉 채움 */
    background-position: center; /* 이미지 중앙 배치 */
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 이미지 위 어두운 오버레이 (글자 가독성 확보) */
.slide-item::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.45); /* 어둡기 조절 */
    z-index: 1;
}

/* 텍스트 콘텐츠 영역 */
.slide-content {
    position: relative;
    z-index: 10; /* 오버레이보다 위에 배치 */
    text-align: center;
    color: #fff;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 💥 움직이면서 나타나는 핵심 CSS --- */

/* 1. 초기 상태 설정 (평소에는 숨김) */
.slide-content h2,
.slide-content p,
.slide-content a {
    opacity: 0; /* 투명하게 */
    transform: translateY(40px); /* 아래로 40px 내려가 있음 */
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 부드럽고 찰진 움직임 */
}

/* 2. 애니메이션 실행 상태 (.ani-done 클래스가 붙으면 실행) */
.swiper-slide-active .slide-content h2,
.swiper-slide-active .slide-content p,
.swiper-slide-active .slide-content a {
    opacity: 1; /* 나타남 */
    transform: translateY(0); /* 원래 위치로 복귀 */
}

/* 3. 각 요소별 시간차(Delay) 설정 (퀄리티 업) */
.swiper-slide-active .slide-content h2 { transition-delay: 0.1s; } /* 제목 먼저 */
.swiper-slide-active .slide-content p { transition-delay: 0.3s; } /* 그 다음 설명 */
.swiper-slide-active .slide-content a { transition-delay: 0.5s; } /* 마지막 버튼 */


/* --- 기본 텍스트 스타일 (커스텀 가능) --- */
.slide-content h2 {
    font-size: clamp(2.2rem, 5vw, 4.2rem); /* 반응형 폰트 크기 */
    font-weight: 900;
    margin-bottom: 25px;
    letter-spacing: -1.5px;
    line-height: 1.2;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

.slide-content p {
    font-size: clamp(1rem, 2vw, 1.4rem);
    margin-bottom: 40px;
    font-weight: 300;
    opacity: 0.85;
    line-height: 1.6;
}

.btn-link {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid rgba(255,255,255,0.8);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-link:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* --- 좌우 화살표 버튼 커스텀 (퀄리티 업) --- */
.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
    opacity: 0.3; /* 평소엔 반투명 */
    transition: 0.3s;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1); /* 배경 원형 효과 */
    border-radius: 50%;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 32px !important; /* 화살표 크기 */
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    opacity: 1; /* 호버 시 진하게 */
    background: rgba(255,255,255,0.2);
}
.swiper-button-prev { left: 40px; }
.swiper-button-next { right: 40px; }

/* --- 하단 점 버튼(Pagination) 커스텀 (퀄리티 업) --- */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #fff !important;
    opacity: 0.4;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.swiper-pagination-bullet-active {
    opacity: 1;
    width: 35px; /* 활성 상태 시 길쭉하게 늘어남 */
    border-radius: 10px;
    background: #fff !important;
}
.swiper-pagination { bottom: 40px !important; }

/* --- 모바일 최적화 (퀄리티 핵심) --- */
@media (max-width: 768px) {
    #main_visual { height: 75vh; } /* 모바일은 화면의 75% 높이만 사용 (부담 줄임) */
    .slide-content h2 { font-size: 2rem; margin-bottom: 15px; }
    .slide-content p { font-size: 0.95rem; margin-bottom: 25px; }
    .btn-link { padding: 10px 30px; font-size: 0.9rem; }
    .swiper-button-next, .swiper-button-prev { display: none; } /* 모바일은 화살표 숨김 */
    .swiper-pagination-bullet { width: 8px; height: 8px; }
    .swiper-pagination-bullet-active { width: 25px; }
    .swiper-pagination { bottom: 25px !important; }
}

/* 유튜브슬라이드 css */
#main_visual {
    width: 100%;
    height: 100vh; /* 화면 꽉 차게 */
    position: relative;
    overflow: hidden;
}

.mySwiper {
    width: 100%;
    height: 100%;
}

/* --- 유튜브 iframe 최적화 --- */
.video-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none; /* 영상 위 클릭 차단 (슬라이드 원활하게) */
}

.video-wrapper iframe {
    width: 100vw;
    height: 56.25vw; /* 16:9 비율 유지 */
    min-height: 100vh;
    min-width: 177.77vh; /* 비율 유지하며 꽉 채움 */
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}



/*

    INDEX.PHP - CSS

*/



/* 기본 설정 */
:root {
    --primary: #38527d;
    --dark: #1a1a1a;
    --white: #ffffff;
    --gap: 2vw; /* 화면 크기에 비례하는 간격 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard', sans-serif; color: var(--dark); line-height: 1.5; overflow-x: hidden; }

/* 공통: 좌우 여백을 최소화하고 화면을 넓게 사용 */
.full-container {
    border:0px solid red;
    width: 100%;
    padding: 0 var(--gap);
}

/* --- 1. 대화면 히어로 섹션 (화면 꽉 채움) --- */
.hero-full {
    width: 100%;
    height: 100vh; /* 화면 높이 꽉 채움 */
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-video-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; /* 배경 꽉 채우기 */
    z-index: -1;
}

.hero-content {
    z-index: 2;
    color: var(--white);
}

.hero-content h1 {
    font-size: clamp(3rem, 10vw, 8rem); /* 화면 크기에 따라 가변적인 초거대 폰트 */
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    margin-bottom: 2rem;
}

/* --- 2. 와이드 이미지 & 텍스트 섹션 (잡지 스타일) --- */
.wide-intro {
    padding: 150px 0;
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.wide-intro .image-area {
    flex: 1.2;
    height: 80vh;
}

.wide-intro .image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 100px 100px 0; /* 시각적 포인트 */
}

.wide-intro .text-area {
    flex: 1;
    padding-right: var(--gap);
}

.text-area h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 2rem;
    word-break: keep-all;
}

/* --- 3. 갤러리 그리드 (여백 없는 꽉 찬 레이아웃) --- */
.full-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}

.grid-item {
    position: relative;
    height: 60vh;
    overflow: hidden;
    border-radius:10%;
    margin-left:10px;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s transform;
}

.grid-item:hover img {
    transform: scale(1.1);
}

.grid-overlay {
    position: absolute;
    bottom: 0; left: 0; padding: 40px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    width: 100%;
}

/* --- 반응형 (모바일) --- */
@media (max-width: 992px) {
    .wide-intro { flex-direction: column; padding: 80px 0; }
    .wide-intro .image-area { width: 100%; height: 50vh; }
    .wide-intro .image-area img { border-radius: 0; }
    .full-grid { grid-template-columns: 1fr; } /* 모바일은 1열 */
    .hero-full { height: 80vh; }
}

/* 이벤트메뉴 */
/* 타이틀 섹션 스타일 */
.event-menu-section {
    padding-top: 100px; /* 위 섹션과의 간격 */
    background-color: #fff;
}

.section-header-wide {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px;
}

.main-title-large {
    font-size: clamp(2.5rem, 3vw, 4.5rem); /* 반응형 거대 폰트 */
    font-weight: 800;
    color: var(--dark);
    margin: 10px 0 20px;
    letter-spacing: -0.02em;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto;
    word-break: keep-all;
    line-height: 1.6;
}

/* 기존 full-grid와의 연결을 위해 마진 제거 */
.full-grid {
    margin-top: 20px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .event-menu-section { padding-top: 60px; }
    .main-title-large { font-size: 2.2rem; }
    .section-desc { font-size: 0.95rem; }
    .grid-item {margin-top:20px; margin-left:0px;}
}

/** 멀티슬라이드 영역 **/
.multi-slider-section {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.section-header-center { text-align: center; margin-bottom: 50px; }

/* 슬라이더 뷰포트 */
.multi-slider-view {
    width: 100%;
    overflow: visible; /* 양옆이 살짝 보이게 하려면 visible, 아니면 hidden */
}

.multi-slider-track {
    display: flex;
    gap: 24px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 카드 스타일 (PC 5개 기준) */
.card-item {
    flex: 0 0 calc(20% - 20px); /* 화면 폭에 맞춰 5개 노출 */
    min-width: 280px;
    border-radius: 20px;
    background: #fdfdfd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: 0.3s;
}

.card-item:hover { transform: translateY(-10px); }
.card-item img { width: 100%; height: 350px; object-fit: cover; }
.card-info { padding: 25px; text-align: center; }
.card-info h3 { font-size: 1.2rem; margin-bottom: 8px; }
.card-info p { color: var(--primary); font-weight: 700; }

/* 하단 버튼 배치 핵심 */
.slider-controls-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

.m-btn {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s;
    display: flex; align-items: center; justify-content: center;
}

.m-btn:hover {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
}

.counter {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

/* 반응형 개수 조절 */
@media (max-width: 1400px) { .card-item { flex: 0 0 calc(25% - 18px); } } /* 4개 */
@media (max-width: 1024px) { .card-item { flex: 0 0 calc(33.33% - 16px); } } /* 3개 */
@media (max-width: 768px) { 
    .card-item { flex: 0 0 calc(50% - 12px); } /* 2개 */
    .slider-controls-bottom { gap: 15px; }
}

/** 리뷰 영역 **/
.review-section {
    border:0px solid red;
    padding: 0px 0;
    background-color: #fcfcfc;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.review-card {
    background: #fff;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
    border: 1px solid #f0f0f0;
}

/* 마우스 올렸을 때 효과 */
.review-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* 강조된 리뷰 (가운데 등) */
.review-card.highlight {
    border: 1px solid var(--primary);
}

.review-user {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.user-thumb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info h4 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.stars {
    color: #f1c40f; /* 별점 노란색 */
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.review-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
    min-height: 100px; /* 카드 높이 균일화 */
}

.review-date {
    font-size: 0.85rem;
    color: #aaa;
}

.review-footer {
    text-align: center;
    margin-top: 60px;
}

.btn-more-review {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-more-review:hover {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
}

/* 반응형 */
@media (min-width: 1024px) {
    .brand-ticker-container { margin-top:100px;}
}

@media (max-width: 1024px) {
    .review-grid { grid-template-columns: repeat(2, 1fr); }
    
}

@media (max-width: 768px) {
    .review-grid { grid-template-columns: 1fr; }
    .review-section { padding: 80px 0; }
    .review-card { padding: 30px; }
}

/** 파트너스 배너 띠 **/
/* 1. 컨테이너: 전체 너비 및 양 끝 페이드 효과 */
.brand-ticker-container {
    width: 100%;
    overflow: hidden;
    background: #fff; /* 배경색에 맞춰 조절 */
    padding: 30px 0;
    position: relative;
    white-space: nowrap;
}

/* 양 끝을 흐릿하게 만드는 마스크 (완성도의 핵심) */
.brand-ticker-container::before,
.brand-ticker-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
}
.brand-ticker-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.brand-ticker-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* 2. 트랙: 실제로 움직이는 부분 */
.brand-ticker-track {
    display: inline-flex;
    align-items: center;
    animation: ticker-scroll 30s linear infinite; /* 30초 동안 무한 반복 */
}

/* 마우스 올리면 일시 정지 (선택 사항) */
.brand-ticker-track:hover {
    animation-play-state: paused;
}

/* 3. 개별 아이템 */
.brand-item {
    padding: 0 40px; /* 로고 사이 간격 */
    flex-shrink: 0;
}

.brand-item img {
    height: 40px; /* 로고 높이 통일 */
    width: auto;
    filter: grayscale(100%); /* 기본은 흑백 */
    opacity: 0.5;
    transition: all 0.4s ease;
}

.brand-item img:hover {
    filter: grayscale(0%); /* 마우스 올리면 컬러 */
    opacity: 1;
    transform: scale(1.1); /* 살짝 커지는 효과 */
}

/* 4. 애니메이션 키프레임 (절반만큼 이동) */
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 전체 트랙의 딱 절반까지 가야 무한 루프 완성 */
}

/* 모바일 대응 */
@media (max-width: 767px) {
    .brand-item { padding: 0 20px; }
    .brand-item img { height: 30px; }
    .brand-ticker-container::before, .brand-ticker-container::after { width: 50px; }
}



/*

    TAIL.PHP - CSS

*/

/* --- Footer 기초 설정 --- */
#footer { background: #1a202c; color: #a0aec0; font-size: 14px; line-height: 1.6; }
#footer .inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }

/* 푸터 상단 링크 */
.ft_top { border-bottom: 1px solid #2d3748; padding: 15px 0; }
.ft_links { list-style: none; padding: 0; margin: 0; display: flex; gap: 25px; }
.ft_links a { color: #cbd5e0; text-decoration: none; }
.ft_links a:hover { color: #fff; }
.ft_links b { color: #fff; }

.ft_sns { display: flex; gap: 15px; }
.ft_sns a { font-size: 12px; color: #718096; text-decoration: none; border: 1px solid #2d3748; padding: 3px 8px; border-radius: 4px; transition: 0.3s; }
.ft_sns a:hover { border-color: #fff; color: #fff; }

/* 푸터 메인 정보 */
.ft_main { padding: 50px 0 60px; }
.ft_main .inner { align-items: flex-start; gap: 40px; }

.ft_logo { width: 150px; opacity: 0.6; filter: grayscale(1); }
.ft_logo img { width: 100%; }

.ft_info { flex: 1; }
.address_box p { margin-bottom: 10px; }
.address_box span { margin-right: 15px; display: inline-block; }
.address_box b { color: #718096; margin-right: 5px; font-weight: 500; }
.copyright { margin-top: 25px; font-size: 13px; color: #4a5568; }

.ft_cs { text-align: right; }
.ft_cs h3 { color: #fff; font-size: 16px; margin-bottom: 10px; }
.ft_cs .tel { font-size: 28px; color: #fff; font-weight: 800; margin-bottom: 10px; }
.ft_cs .time { font-size: 13px; color: #718096; }

/* 상단 이동 버튼 */
#top_btn {
    position: fixed; bottom: 30px; right: 24px; width: 50px; height: 50px;
    background: #3182ce; color: #fff; border: none; border-radius: 50%;
    cursor: pointer; display: none; z-index: 999; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* --- 풀 반응형 미디어 쿼리 --- */
@media (max-width: 1024px) {
    .ft_main .inner { flex-wrap: wrap; }
    .ft_cs { text-align: left; width: 100%; border-top: 1px solid #2d3748; padding-top: 30px; }
}

@media (max-width: 768px) {
    .ft_top .inner { flex-direction: column; gap: 20px; text-align: center; }
    .ft_links { gap: 15px; justify-content: center; font-size: 13px; }
    .ft_main .inner { flex-direction: column; text-align: center; align-items: center; }
    .ft_info p span { display: block; margin-right: 0; margin-bottom: 5px; }
    .ft_cs { text-align: center; }
}


/* 퀵메뉴 컨테이너 */
#fixed_quick {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 공통 버튼 스타일 */
.quick_btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    text-decoration: none;
    transition: all 0.3s ease;
}

.quick_btn i { font-size: 20px; margin-bottom: 2px; }
.quick_btn span { font-size: 10px; }

/* 버튼별 색상 */
.tel_btn { background: #2ecc71; color:black; } /* 초록색 */
.kakao_btn { background: #ffeb00; color: #3c1e1e; } /* 카카오 노란색 */
#top_btn { background: #333; display: none; } /* 기본 숨김 (스크롤 시 노출) */

/* 호버 효과 */
.quick_btn:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.3); }

/* --- 모바일 반응형 (화면 하단 고정 바 형태) --- */
@media (max-width: 768px) {
    #fixed_quick {
        right: 0;
        bottom: -6px;
        width: 100%;
        flex-direction: row; /* 가로 나열 */
        gap: 0;
    }
    
    .quick_btn {
        flex: 1; /* 등분 분할 */
        height: 60px;
        border-radius: 0; /* 사각형으로 변경 */
        box-shadow: none;
    }
    
    .quick_btn:hover { transform: none; }
    
    /* 모바일에서는 TOP 버튼을 항상 보이게 하거나, 디자인에 따라 조정 가능 */
    #top_btn { border-left: 1px solid rgba(255,255,255,0.1); }
}


/** float 전화하기 물결효과 **/
/* 전화문의 css(물결) */
/* 시승문의 물결 효과 */
/* 2. [핵심] 시승문의(.tel_btn)에만 물결 효과 부여 */


/* 오직 .tel_btn의 가상 요소에만 애니메이션 정의 */
.tel_btn::before {
    content: "";
    position: absolute;
    top: 6;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #48fb57; /* 버튼과 같은 색상 파동 */
    z-index: -1; /* 버튼 뒤에서 퍼짐 */
    animation: tel-wave-only 2s infinite; /* 전용 애니메이션 */
}

/* 시승문의 전용 물결 애니메이션 */
@keyframes tel-wave-only {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}



#top_btn {
    background-color: #333 !important;
    width: 45px !important; /* 위로가기는 작게 */
    height: 45px !important;
    margin: 0 auto;
}

.quick_btn i { font-size: 20px !important; margin-bottom: 2px !important; }

/* 마우스 올렸을 때 버튼 살짝 커지는 효과 (물결 대신 피드백) 
.quick_btn:hover {
    transform: scale(1.05);
}*/

/* 시승문의 전용 스타일 */
.tel_btn {
    background-color: #48fb57 !important;
    z-index: 10;
}



/* 1. 마우스 호버(Hover) 시 물결 제거 */
.tel_btn:hover::before {
    display: none !important;
    animation: none !important;
}

/* 2. 모바일 환경(1024px 미만)에서 물결 제거 */
@media (max-width: 1024px) {
    .tel_btn::before {
        display: none !important;
        animation: none !important;
    }
    /* 모바일에서는 퀵메뉴 사이즈를 조금 더 줄여 가독성 확보 */
    .quick_btn {
        width: 50px !important;
        height: 50px !important;
    }
}

/* 전화문의 & 카톡문의 */
.tel_btn { position: relative; }
  .tel_btn:hover::after {
    content: "02-123-4567";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
  }

/* 회원가입 css */
#fregister p {background-color: #38527d !important;}
#fregister p:before { background-color: #38527d;}
.btn_submit {background-color: #38527d;}