/*@font-face{ font-family:'tesla', src : url('/res/font/tesla.woff') format('woff'), url('/res/font/tesla.woff2') format('woff2'), url('/res/font/tesla.ttf') format('truetype'), url('/res/font/tesla.otf') format('opentype'); font-weight:400; }*/ .w100{ width:100%; } .banner_list{ margin-top:5px; text-align:center; } .ulist{ position:sticky; top:6rem; } .video-container{ position:relative; width:100%; height:0; padding-bottom:56.25%; margin-bottom:15px; } .video-container>iframe{ position:absolute; top:0; left:0; width:100%; height:100%; } html{ overflow:hidden; width:100%; max-height:100vh; } body{ height:100%; position:fixed; overflow-y:scroll; width:100%; max-width:100%; } .wrap{ max-width:100%; } .clear{ clear:both; } .btn-youtube{ cursor:pointer; } .clear{ clear:both; } .popup{ display:inline-block; position:absolute; z-index:999; box-shadow:0 0 5px rgba(0,0,0,0.8); background:black; max-width:80%; } .popup_title{ display:inline-block; float:left; color:white; } .popup_bottom{ padding:5px; } .popup_bottom .popup_title{ float:none; } .popup_close{ display:inline-block; float:right; cursor:pointer; } .popup_top{ width:100%; height:25px; color:white; background:black; line-height:25px; padding-left:10px; padding-right:10px; font-weight:bold; font-size:14px; } /* 분리하신 커스텀 CSS 파일 예시 */ .hero-bg { /* 라이트 모드일 때의 배경 색상 또는 스타일 */ background-color: #f8f9fa; } /* [다크모드 전용 대응] 에 데이터 속성이 dark로 바뀔 때 */ [data-bs-theme="dark"] .hero-bg { background-color: #1a1d20; /* 다크모드에 걸맞은 어두운 배경색 */ color: #ffffff; } /* 태그에 data-bs-theme="dark" 가 붙었을 때 내부 요소 강제 전환 */ [data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; } /* btn-light 버튼이 다크 모드일 때 너무 밝게 튀는 현상 방지 */ [data-bs-theme="dark"] .btn-light { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border); color: var(--bs-body-color); } /* table-right 클래스 대응 (라이트/다크 자동 전환) */ .table-right { background-color: #ffffff; /* 라이트 모드 기본값 */ } [data-bs-theme="dark"] .table-right { background-color: var(--bs-body-bg); /* 다크 모드 배경색과 동기화 */ color: var(--bs-body-color); } /* ========================================== 우측 하단 플로팅 테마 토글 버튼 스타일 ========================================== */ .theme-toggle-btn { position: fixed; bottom: 25px; right: 25px; z-index: 1050; /* 부트스트랩 내비게이션바보다 위에 위치 */ width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(0, 0, 0, 0.05); /* 라이트 모드일 때 버튼 색상 (기본 흰색 바탕에 노란 해) */ background-color: #ffffff; color: #ffc107; } .theme-toggle-btn:hover { transform: scale(1.1); /* 마우스 올렸을 때 살짝 커지는 효과 */ } /* [다크 모드] 일 때 버튼 자체의 색상 변경 (어두운 바탕에 보라색/흰색 달) */ [data-bs-theme="dark"] .theme-toggle-btn { background-color: #2b3035; color: #a5a5f5; border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } /* 1. 다크모드(data-bs-theme="dark")일 때, 네비게이션바의 검은 로고를 흰색으로 완전 반전 */ [data-bs-theme="dark"] .navbar-brand img, [data-bs-theme="dark"] .offcanvas-header img { filter: brightness(0) invert(1); } /* 2. 푸터(footer.bg-dark)는 테마와 상관없이 늘 어두우므로, 항상 로고를 흰색으로 반전 */ footer.bg-dark img[alt="EvPrice"] { filter: brightness(0) invert(1); } /* 윗 카드들과 아래 한달 체감 박스 간의 마찰을 줄이는 정밀 갭 제어 */ .mt-4-5 { margin-top: 2rem !important; } /* mb-4.5 대체 */ .mb-4-5 { margin-bottom: 2rem !important; } /* mt-5.5 대체 */ .mt-5-5 { margin-top: 2.8rem !important; } /* 소셜 로그인 버튼 전용 스타일 */ .btn-kakao { background-color: #FEE500; color: #191919; border: none; padding: 0.65rem 1rem; } .btn-kakao:hover { background-color: #E6CE00; color: #191919; } .btn-naver { background-color: #03C75A; color: #FFFFFF; border: none; padding: 0.65rem 1rem; } .btn-naver:hover { background-color: #02B150; color: #FFFFFF; } .fs-8 { font-size: 0.75rem; } /* ==================== 소셜 로그인 버튼 색상 보정 ==================== */ /* 1. 카카오 로그인 버튼 */ .btn-kakao, [data-bs-theme="dark"] .btn-kakao { background-color: #FEE500 !important; color: #191919 !important; border: none !important; padding: 0.65rem 1rem; } .btn-kakao:hover, [data-bs-theme="dark"] .btn-kakao:hover { background-color: #E6CE00 !important; color: #191919 !important; } /* 2. 네이버 로그인 버튼 */ .btn-naver, [data-bs-theme="dark"] .btn-naver { background-color: #03C75A !important; color: #FFFFFF !important; border: none !important; padding: 0.65rem 1rem; } .btn-naver:hover, [data-bs-theme="dark"] .btn-naver:hover { background-color: #02B150 !important; color: #FFFFFF !important; } /* 3. 구글 로그인 버튼 (다크모드에서도 테두리와 배경 유지) */ .btn-google, [data-bs-theme="dark"] .btn-google { background-color: #ffffff !important; color: #1f1f1f !important; border: 1px solid #dadce0 !important; padding: 0.65rem 1rem; } .btn-google:hover, [data-bs-theme="dark"] .btn-google:hover { background-color: #f8f9fa !important; color: #1f1f1f !important; }