.responsive-container {
max-width: 100%;
padding: 2rem;
background: #1a1f2e;
box-sizing: border-box;
}
.responsive-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
}
.responsive-box {
flex: 1;
background: #2a3142;
padding: 2rem;
border-radius: 0.5rem;
text-align: center;
}
.responsive-box h3 {
font-size: 1.8rem;
font-weight: 600;
color: #ffd700;
margin-bottom: 1rem;
}
/* PC 버전 - 한 줄 유지 */
.time-display {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
flex-wrap: nowrap;
white-space: nowrap;
}
.time-unit {
display: inline-flex;
align-items: baseline;
}
.time-unit .number {
font-size: 2.5rem;
font-family: 'Courier New', monospace;
color: white;
}
.time-unit .label {
font-size: 1.2rem;
font-family: 'Courier New', monospace;
color: #94a3b8;
margin-left: 0.2rem;
}
/* 태블릿 및 모바일 환경 */
@media (max-width: 768px) {
.responsive-container {
padding: 1rem;
}
.responsive-row {
flex-direction: column;
}
.responsive-box {
padding: 1rem;
}
.time-display {
gap: 0.5rem;
/* 화면이 작을 경우 한 줄 고정 대신 줄바꿈 허용 */
flex-wrap: wrap;
white-space: normal;
}
.time-unit .number {
font-size: 1.8rem;
}
.time-unit .label {
font-size: 1rem;
}
}
/* 추가로 작은 모바일 대응 */
@media (max-width: 480px) {
.time-unit .number {
font-size: 1.5rem;
}
.time-unit .label {
font-size: 0.8rem;
}
}
한홀: 기원전 6년
ㅣ
백제 시조 온조왕의 첫 도읍지
ㅣ
하남위례성 494년의 역사
수도권 동부 교통 요충지
ㅣ
광주향교 l 스타필드 하남 l 하남유니온타워
ㅣ
하남 두미강변 생태환경도시
하남시 승격: 1989년 1월 1일
ㅣ
살기 좋은 도시 도약하는 하남
ㅣ
시의 상징 : 은행나무·꿩·은방울꽃
function updateTimes() {
const now = new Date();
// 현재 시각 업데이트
document.getElementById('currentTime').innerHTML = `
${now.getFullYear()}
년
${String(now.getMonth() + 1).padStart(2, '0')}
월
${String(now.getDate()).padStart(2, '0')}
일
${String(now.getHours()).padStart(2, '0')}
시
${String(now.getMinutes()).padStart(2, '0')}
분
`;
// 한홀 건국 시점 (기원전 6년: 천문학적 연도상 -5)
const hanholStart = new Date(0);
hanholStart.setFullYear(-5, 0, 1);
hanholStart.setHours(0, 0, 0, 0);
const timeDiff = now - hanholStart;
const minutesDiff = Math.floor(timeDiff / (1000 * 60));
const yearsDiff = Math.floor(minutesDiff / 525600);
const monthsDiff = Math.floor((minutesDiff % 525600) / 43800);
const daysDiff = Math.floor((minutesDiff % 43800) / 1440);
const hoursDiff = Math.floor((minutesDiff % 1440) / 60);
const remainingMinutes = minutesDiff % 60;
document.getElementById('timeSinceHanhol').innerHTML = `
${yearsDiff}
년
${monthsDiff}
개월
${daysDiff}
일
${String(hoursDiff).padStart(2, '0')}
시
${String(remainingMinutes).padStart(2, '0')}
분
`;
}
updateTimes();
setInterval(updateTimes, 1000);
쿠팡 파트너스 광고
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
