/* Pretendard Webfont */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
/* 기본 스타일 초기화 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* 헤더 높이만큼 스크롤 위치 보정 (헤더가 콘텐츠를 가리는 현상 방지) */
scroll-padding-top: 80px;
}
body {
font-family: 'Pretendard', sans-serif;
background-color: #0a0a1a;
color: #ffffff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 헤더 및 네비게이션 */
.header {
position: fixed; /* 'absolute'에서 'fixed'로 변경 */
top: 0;
left: 0;
width: 100%;
padding: 20px 0;
z-index: 10;
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 헤더 아래에 그림자 추가 (선택 사항) */
}
/* 스크롤 시 헤더에 적용될 새로운 스타일 */
.header.scrolled {
background-color: #0a0a1a; /* 어두운 배경색 지정 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 그림자 효과 */
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
/* font-size: 24px;
font-weight: bold;
color: #fff; */
/* 로고 이미지를 사용할 경우 아래와 같이 수정 */
content: url('../images/kaci-logo.svg');
height: 30px;
}
.nav-menu ul {
list-style: none;
display: flex;
}
.nav-menu ul li {
margin-left: 30px;
}
.nav-menu ul li.menu-separator {
margin-left: 140px; /* 기존보다 더 큰 간격을 주어 그룹을 나눔 */
}
.nav-menu ul li a {
position: relative; /* ::after 요소를 위한 기준점 */
color: #d0d0d0;
font-size: 16px;
transition: color 0.3s;
padding-bottom: 5px; /* 밑줄을 위한 공간 확보 */ font-weight:500;
}
/* 활성화 스타일을 위한 밑줄 기본 상태 (숨김) */
.nav-menu ul li a::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0; /* 평소엔 너비 0 */
height: 3px;
background-color: #0AFADF;
border-radius: 2px;
box-shadow: 0 0 10px #0AFADF, 0 0 5px #0AFADF;
transition: width 0.3s ease-in-out; /* 너비 변경에 애니메이션 효과 */
}
/* 'active' 클래스가 추가되었을 때의 활성화 스타일 */
.nav-menu ul li a.active,
.nav-menu ul li a:hover {
color: #ffffff; /* 활성화 시 텍스트 색상 밝게 */
}
.nav-menu ul li a.active::after {
width: 80%; /* 활성화 시 너비를 80%로 늘림 */
}
/* .nav-menu ul li a:hover {
color: #ffffff;
}
*/
/* 상단 안내 섹션 (Hero) */
.hero {
position: relative;
height: 600px;
background-image: url('../images/header.png'); /* 제공된 이미지와 유사한 배경 */
background-size: cover;
background-position: center;
display: flex;
align-items: center;
text-align: left;
padding-top: 80px;
}
.hero-content {
padding-top: 0px; /* 헤더와의 간격 */
}
.hero-content-line {
background-image: linear-gradient(90deg, rgba(135, 206, 250, 0.5) 5%, transparent 65%);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 2px;
}
.hero h1 {
font-size: 80px;
font-weight: 700;
margin-bottom: 10px;
color: #fff; /* 텍스트의 기본 중심 색은 흰색으로 유지 */
text-shadow:
0 0 5px #08AABF,
0 0 5px #08AABF,
0 0 5px #08AABF,
0 0 5px #08AABF;
}
.hero h2 {
font-size: 28px;
font-weight: 400;
margin-bottom: 0px;
padding-top: 10px;
color: #e0e0e0;
text-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.event-info {
list-style: none;
margin-bottom: 50px; padding-top:20px;
}
.event-info li {
font-size: 18px;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.event-info li::before {
/* 아이콘을 위한 공간 */
content: '';
display: inline-block;
width: 24px;
height: 24px;
margin-right: 12px;
background-size: contain;
background-repeat: no-repeat;
}
.event-info li.date::before {
/* fill 속성을 하늘색(#87CEEB)으로 변경 */
background-image: url('data:image/svg+xml;utf8,');
}
.event-info li.location::before {
/* fill 속성을 하늘색(#87CEEB)으로 변경 */
background-image: url('data:image/svg+xml;utf8,');
}
.register-btn {
display: inline-block;
padding: 15px 40px;
border: none;
border-radius: 30px;
background: linear-gradient(90deg, #4a69bd, #6a82fb);
color: white;
font-size: 18px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.register-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(74, 105, 189, 0.3);
}
/* 인사말 섹션 */
.intro { padding: 80px 0;
position: relative; /* 자식 요소인 비디오의 absolute 위치를 위한 기준점 설정 */
overflow: hidden; /* 비디오가 섹션을 벗어나지 않도록 숨김 */
/* 필요하다면 최소 높이(min-height)를 설정하여 내용이 적더라도 비디오가 보이게 할 수 있습니다. */
/* min-height: 100vh; */ /* 뷰포트 높이만큼 설정 예시 */
display: flex; /* 자식 요소를 중앙에 배치하거나 정렬하기 위해 */
align-items: center; /* 수직 중앙 정렬 (내용과 비디오 모두 해당) */
justify-content: center; /* 수평 중앙 정렬 */
}
#background-video {
position: absolute; /* .intro 섹션 내에서 자유롭게 위치 */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 섹션을 꽉 채우면서 비디오 비율 유지 (크롭될 수 있음) */
z-index: -1; /* 내용을 비디오 위로 올리기 위해 가장 낮은 z-index 설정 */
filter: brightness(1); /* 비디오를 어둡게 하여 그 위에 텍스트가 잘 보이도록 (선택 사항) */
}
/* 비디오 위에 내용이 보이도록 z-index 조정 */
.intro .container,
.intro .intro-content,
.intro .countdown-container { /* PHP include로 들어오는 D-Day 위젯도 포함 */
position: relative; /* z-index를 적용하려면 position이 static이 아니어야 합니다. */
z-index: 1; /* 비디오(z-index: -1) 위에 표시되도록 */
color: white; /* 텍스트 색상을 흰색으로 설정하여 어두운 배경 위에서 잘 보이게 (필요시) */
text-align: center; /* 내용 중앙 정렬 (필요시) */
}
/* 텍스트가 어두운 비디오 배경 위에서 잘 보이도록 그림자 추가 (선택 사항) */
.intro .intro-content h3,
.intro .intro-content p {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.intro-content {
margin: 0 auto;
}
.intro h3 {
font-size: 24px;
font-weight: 500;
margin-bottom: 40px;
line-height: 1.6;
}
.intro p {
font-size: 17px;
line-height: 1.8;
color: #fff;
margin-bottom: 25px;
text-align: center;
}
/* ================== Agenda Section ================== */
.agenda-section {
padding: 100px 0;
background-color: #ffffff;
color: #333;
}
.agenda-section h2 {
font-size: 32px;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 20px;
color: #00035a;
}
.agenda-table {
width: 100%;
}
/* Agenda Header (시간, 주요내용, 비고) */
.agenda-header {
display: flex; text-align:center;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 15px;
text-transform: uppercase;
border-top: 2px #101010 solid;
border-bottom: 1px #101010 solid;
background-image: url('../images/agenta_bak.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Agenda Row (한 줄 전체) */
.agenda-row {
display: flex; text-align:center;
align-items: center;
padding: 25px 15px;
border-bottom: 1px solid #eee;
}
/* Columns (시간, 주요내용, 비고 각각) */
.agenda-row .time,
.agenda-header .time {
flex-basis: 20%; /* 시간 컬럼 너비 */
font-weight: 600;
}
.agenda-row .session,
.agenda-header .session {
flex-basis: 60%; /* 주요내용 컬럼 너비 */
}
.agenda-row .speaker,
.agenda-header .speaker {
flex-basis: 20%; /* 비고 컬럼 너비 */
}
/* Speaker Column (이름, 소속) */
.agenda-row .speaker strong {
display: block;
font-weight: 600;
font-size: 16px;
margin-bottom: 4px;
}
.agenda-row .speaker span {
color: #777;
font-size: 14px;
}
/* Separators (오프닝, 클로징 등) */
.agenda-separator {
padding: 15px;
text-align: center;
font-weight: 600;
font-size: 18px;
background: linear-gradient(to right,
rgba(255, 255, 255, 1) 0%, /* 왼쪽 흰색 */
rgba(224, 242, 255, 1) 20%, /* 연한 파랑 (선명한 영역 시작) */
rgba(224, 242, 255, 1) 80%, /* 선명한 영역 유지 */
rgba(255, 255, 255, 1) 100% /* 오른쪽 흰색 */
);
text-align: center;
color: #333;
}
.agenda-separator-2 {
padding: 15px;
text-align: center;
font-weight: 600;
font-size: 18px;
background: linear-gradient(to right,
rgba(255, 255, 255, 1) 0%, /* 왼쪽 흰색 */
rgba(224, 242, 255, 1) 20%, /* 연한 파랑 (선명한 영역 시작) */
rgba(224, 242, 255, 1) 80%, /* 선명한 영역 유지 */
rgba(255, 255, 255, 1) 100% /* 오른쪽 흰색 */
);
text-align: center;
color: #333;
}
.agenda-break {
background: linear-gradient(to right,
rgba(255, 255, 255, 1) 0%, /* 왼쪽 흰색 */
rgba(232, 236, 245, 1) 20%, /* 연한 파랑 (선명한 영역 시작) */
rgba(232, 236, 245, 1) 80%, /* 선명한 영역 유지 */
rgba(255, 255, 255, 1) 100% /* 오른쪽 흰색 */
);
padding: 15px;
text-align: center;
font-weight: 600;
font-size: 18px;
}
/* --- Speakers Section (수정된 버전) --- */
.speakers-section {
padding: 80px 0;
background-color: #fff;
text-align: center;
}
.speakers-section h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 50px;
text-align: left; color:#00035a;
}
.speaker-content {
position: relative; /* 자식 요소(화살표)를 absolute로 위치시키기 위한 기준점 */
margin-bottom: 0px; height: 480px;
}
.speaker-profile {
display: none;
flex-direction: row;
align-items: end;
text-align: left;
gap: 40px;
}
.speaker-profile.active {
display: flex; height: -webkit-fill-available;
}
.speaker-info {
width:80%
}
.speaker-info h3 {
font-size: 28px;
font-weight: 700;
margin-bottom: 5px; color:#7d7d7d;
}
.speaker-info .speaker-title {
font-size: 20px;
font-weight: 500;
color: #3371dc;
margin-left: 10px;
}
.speaker-info .speaker-company {
font-size: 16px; background: #f1f3f6;
color: #777;
margin-bottom: 30px;
border: 1px solid #ddd;
display: inline-block;
padding: 5px 10px;
border-radius: 15px;
}
.speaker-info .info-block {
margin-bottom: 25px; border-bottom: 1px solid #ededed;
padding-bottom: 10px;
}
.speaker-info .info-block h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
color: #3a86c9;
}
.speaker-info .info-block p,
.speaker-info .info-block ul li {
font-size: 16px;
line-height: 1.7;
color: #444;
}
.speaker-info .info-block ul {
list-style-position: inside;
padding-left: 0;
}
.speaker-info .info-block ul li {
margin-bottom: 0px;
}
.speaker-photo {
width: 90%; bottom: -3px;
position: absolute;
/* right: 20px; */
text-align: right;
}
.speaker-photo img {
width: 350px;
border-radius: 10px;
}
.info-grid {
display: flex; /* Flexbox 레이아웃 적용 */
gap: 20px; /* 목록 사이의 간격 */
}
/* 첫 번째 ul (왼쪽 목록) */
.info-grid ul:nth-child(1) {
width:40%;
}
/* 두 번째 ul (오른쪽 목록) */
.info-grid ul:nth-child(2) {
width:60%;
}
/* --- ▼▼▼ 화살표 스타일 수정된 부분 ▼▼▼ --- */
.speaker-nav {
/* 이 컨테이너는 버튼을 묶어주는 역할만 합니다. */
}
.speaker-nav button {
position: absolute; /* .speaker-content를 기준으로 위치 */
top: 50%;
transform: translateY(-50%); /* 수직 중앙 정렬 */
z-index: 10; /* 다른 요소들 위에 보이도록 설정 */
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #ddd;
border-radius: 50%;
width: 45px;
height: 45px;
font-size: 20px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.speaker-nav button:hover {
background-color: #fff;
border-color: #999;
}
.prev-btn {
left: -60px; /* 왼쪽 바깥으로 20px 이동 */
}
.next-btn {
right: -60px; /* 오른쪽 바깥으로 20px 이동 */
}
/* --- ▲▲▲ 화살표 스타일 수정 완료 ▲▲▲ --- */
.speaker-list {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 0px;
padding-top: 30px;
border-top: 2px solid #007bff;
}
.speaker-thumb {
cursor: pointer;
text-align: center;
transition: transform 0.3s;
opacity: 0.6;
}
.speaker-thumb:hover,
.speaker-thumb.active {
transform: scale(1.1);
opacity: 1;
}
.speaker-thumb img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
}
.speaker-thumb p {
font-weight: 500;
margin: 0; color: #666; padding-bottom:10px;
}
.speaker-thumb span {
font-size: 14px;
color: #3371dc;;
}
/* ================== 반응형 (모바일) 스타일 ================== */
/* 햄버거 메뉴 버튼 기본 스타일 (평소엔 숨김) */
.hamburger-menu {
display: none;
cursor: pointer;
background: none;
border: none;
z-index: 1001; /* 메뉴보다 위에 오도록 */
}
.hamburger-menu .bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background-color: #fff;
transition: all 0.3s ease-in-out;
}
/* 화면 너비가 768px 이하일 때 적용될 스타일 */
@media (max-width: 768px) {
.hero {
/* 반투명 검은색 필터(gradient)를 기존 배경 이미지 위에 겹칩니다. */
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(../images/header.png); height: auto;
}
.hero-content {
width: 100%;
}
/* 메인 타이틀(h1) 폰트 크기를 줄입니다. */
.hero h1 {
font-size: 50px; /* 80px -> 50px */
line-height: 1.2; padding-top: 20px;
}
/* 서브 타이틀(h2) 폰트 크기를 줄입니다. */
.hero h2 {
font-size: 22px; /* 28px -> 22px */
line-height: 1.2;
}
/* 날짜, 장소 정보도 함께 중앙 정렬 */
.event-info {
}
/* 기존 메뉴 숨기기 */
.nav-menu {
position: fixed;
top: 0;
right: -100%; /* 화면 오른쪽 밖에 숨겨둠 */
width: 80%;
height: 100vh;
background-color: rgba(10, 10, 26, 0.95);
backdrop-filter: blur(5px);
transition: right 0.4s ease-in-out;
z-index: 1000;
}
/* 메뉴가 열렸을 때의 스타일 (.is-open 클래스 추가 시) */
.nav-menu.is-open {
right: 0; /* 오른쪽에서 슬라이드 인 */
}
/* 햄버거 버튼 보이기 */
.hamburger-menu {
display: block;
}
/* 메뉴 항목들을 세로로 정렬 */
.nav-menu ul {
flex-direction: column;
align-items: center;
padding-top: 100px;
}
.nav-menu ul li {
margin: 20px 0;
}
.nav-menu ul li a {
font-size: 20px;
}
/* 그룹 분리용 여백 조정 */
.nav-menu ul li.menu-separator {
margin-left: 0;
margin-top: 40px;
}
/* 햄버거 버튼이 'X' 모양으로 바뀌는 애니메이션 */
.hamburger-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
.hamburger-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}