@charset "utf-8";
@import url(color.css);
body {
	margin: 0;
	padding: 0;
	font-size: 12px;
/*	font-size: 0.75em;*/
	line-height: 1.4; /*normal*/
	font-family:Dotum, "돋움", Verdana, Arial, sans-serif;
	/* part 1 of 2 centering hack */
	background: #fff;
}

body.main { background:url(../images/bgcopy.gif) center top repeat-x #c5b4a1;}
body.sub { background:url(../images/bgsub.gif) center top repeat-x #c5b4a1;}
body.board {background:#c5b4a1;}
td.bgcopy {background:url(../images/bgcopy.gif) left top repeat-x;}
td.branch_title { background:url(../images/branch_line.gif) left bottom repeat-x;}
td.page_title {border-bottom:1px solid #978877; padding-bottom:10px;}
td.history {border-bottom:1px solid #978877; padding-bottom:10px;}
p.pro_name {text-align:center; color::#1d1d1d; font-size:12px; font-weight:bold; padding:5px 0px 3px 0px;}
p.pro_class {text-align:center; font-size:11px; color:#71553c; padding:0px 0px 10px 0px;}
span.pro_class {text-align:center; font-size:11px; color:#71553c; padding:0px 0px 10px 0px;}
p.branch_add {font-size:12px; color:#1d1d1d; padding:2px 0px 1px 5px;}
span.branch_kor {font-weight:bold; color:#1d1d1d; font-size:14px;}
span.branch_eng {font-weight:bold; color:#1d1d1d; font-size:14px; font-family:Arial, Helvetica, sans-serif;}
img.branch_proimg {border:6px solid #ad9685; margin:0px 10px 5px 0px;}
div.branch_intro_tab {padding:0px 0px 0px 0px;}
span.branch_intro_con {margin:10px 0px 0px 0px; line-height:18px;}
div.line_b {background:url(../images/line_b.gif) left center repeat-x; height:30px; border:none; }
div.probtn {padding:0px 10px 15px 10px; width:95%; margin:0 auto;}
input.brown {border:1px solid #b3a08b; background:#e6dbcf; color:#555; font-size:12px; padding:3px;}
select.brown {border:1px solid #b3a08b; background:#e6dbcf; color:#555; font-size:12px; padding:3px;}
textarea.brown {border:1px solid #b3a08b;scrollbar-face-color:#DDDDDD;scrollbar-highlight-color:#CCCCCC;scrollbar-shadow-color:#CCCCCC;scrollbar-3dlight-color:#F5F5F5;scrollbar-darkshadow-color:#F5F5F5;scrollbar-track-color:#F0F0F0;scrollbar-arrow-color:#FFFFFF; background:#e6dbcf;}
td.line {border-bottom: 1px solid #a69787;}

select.small {font-size:11px;}
input.branch {border:4px solid #9f9a89; color:#685f94; padding:3px;}

/* common */
h3 {display:none;}	/*타이틀표시*/
h1,h2,h3,h4,h5,h6,form,p {margin:0;padding:0;}
fieldset, img { border: none; vertica-align:middle;}
table { border-collapse: collapse; font-size:12px; }
input,select {vertical-align:middle;}
input.solid {border:1px solid #c4c4c4;padding:3px; background:#fdfdfc}
textarea {border:1px solid #c4c4c4;scrollbar-face-color:#DDDDDD;scrollbar-highlight-color:#CCCCCC;scrollbar-shadow-color:#CCCCCC;scrollbar-3dlight-color:#F5F5F5;scrollbar-darkshadow-color:#F5F5F5;scrollbar-track-color:#F0F0F0;scrollbar-arrow-color:#FFFFFF; background:#fdfdfc;}
textarea.solid {border:1px solid #c4c4c4;scrollbar-face-color:#DDDDDD;scrollbar-highlight-color:#CCCCCC;scrollbar-shadow-color:#CCCCCC;scrollbar-3dlight-color:#F5F5F5;scrollbar-darkshadow-color:#F5F5F5;scrollbar-track-color:#F0F0F0;scrollbar-arrow-color:#FFFFFF; background:#fdfdfc;}
hr {clear:both;}

a img {vertical-align:top;}

div.h5 {height:5px;}
div.h10 {height:10px;}
div.h20 {height:20px;}
div.h50 {height:50px;}

#innerFrame{height:300px;background-color:#fff;color:#000000;width:700px;
    /* 300px + 16px(scrollbar width)1 */
	overflow:auto;
	/*
	CSS3 module: The box model (opera8.02버전에선 미구현)
	overflow-x:scroll;
	overflow-y:scroll;
	*/
}
#innerWindow{width:auto;height:1000px;background-color:#fff; padding:5px; line-height:19px;}

/* Style specifically for the calendar row */
#calendar-row {
  background:url(../images/bgcopy.gif) center top repeat-x #c5b4a1;
  border-top: 2px solid #FF4081; /* Accent line */
  border-bottom: 2px solid #FF4081; /* Accent line */
}

#calendar-row td {
  vertical-align: center;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

/* Individual calendars */
.calendar-box {
  border: 1px solid #FF4081;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 90%; /* To keep a consistent width */
  margin: 0 auto; /* Center the calendar */
}

/* Table inside each calendar */
.calendar-box table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.calendar-box th {
  background-color: #FF4081;
  padding: 5px;
}

/* Add transition effects */
.calendar-box td {
  transition: background-color 0.3s ease;
  font-weight: bold;
}

/* Highlight current day */
.calendar-box td.today {
  background-color: #FF4081;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
}

/* Add hover animation */
.calendar-box td:hover {
  background-color: #FFCDD2;
}

.today {
    background-color: #ff4081; /* Highlight color */
    color: white; /* Text color */
    border-radius: 60%; /* Make it circular */
    width: 20px; /* Adjust as needed */
    height: 20px; /* Adjust as needed */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.history-section {
    display: flex;
    justify-content: space-between; /* 내용과 이미지 양쪽 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    padding: 20px;
    border-left: 5px solid #007bff; /* 세로 라인 */
    margin: 20px 0;
    background-color: #f8f9fa; /* 배경색 */
    border-radius: 10px;
    padding-left: 15px;
}

.history-section:nth-child(odd) {
    border-color: #28a745; /* 홀수번째 섹션 색상 변경 */
}

.history-section:nth-child(even) {
    border-color: #ffc107; /* 짝수번째 섹션 색상 변경 */
}

/* 왼쪽 텍스트 영역 */
.history-content {
    flex: 1; /* 나머지 공간 차지 */
}

/* 오른쪽 이미지 영역 */
.history-image {
    flex-shrink: 0; /* 크기가 줄어들지 않도록 설정 */
	display: flex;
	flex-direction: column;  /* 세로 정렬 */
    gap: 10px; /* 이미지 간격 추가 */
    margin-left: 20px; /* 왼쪽 여백 추가 */
}

.history-image img {
    width: 180px; /* 최대 너비 */
    height: auto; /* 세로 비율 유지 */
    max-height: 150px; /* 최대 높이 설정 (너무 커지는 것 방지) */
    object-fit: contain; /* 이미지 비율 유지하며 잘리지 않게 */
	display: block; /* 블록 요소로 만들어서 세로 배치 */
    margin-bottom: 5px; /* 이미지 간격 추가 */
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.history-title {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

body { font-family: Arial, sans-serif; }
.tab-container { width: 90%; margin: 20px auto; }
.tab-buttons {
	display: flex;
	border-bottom: 2px solid #555;
}
.tab-button {
	flex: 1;
	font-size: 15pt;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	border: 1px solid #ccc;
	background-color: #f9f9f9;
}
.tab-button.active {
	font-size: 15pt;
	background-color: #ddd;
	font-weight: bold;
}
.tab-content {
	display: none;
	padding: 15px;
	border: 1px solid #ccc;
	border-top: none;
}
.tab-content.active { display: block; }
.tab-content table {
	font-size: 16pt;
	border: 1px solid #555;
	width: 100%;
	border-collapse: collapse;
}
.tab-content th, 
.tab-content td {
	padding: 5px;
	border: 1px solid #555;
	text-align: center;
}
.tab-content li {
	font-size: 16pt;
}

.bottom_link {padding:0;}
.bottom_link .sitemap {float:none; width:100%; padding:25px;}
.bottom_link .select_link {clear:both; width:100%; padding:15px 25px 10px 25px;}
.bottom_link .select_link select {clear:both; width:auto; margin-right:10px;}
.bottom_link .select_link ul { margin:0 auto;}
.bottom_link .select_link li {float:left; padding:5px 3% 5px 0;}
.bottom_link .select_link li a {font-weight:400;}