body {
	width:100%;
	max-width: 100%;
    margin: 0 auto;
    padding: 0px;
    background-color: #FFF;
	color:#000;
	font-size:16px;
	}

img {
	display:block;
	width:100%;
	}
.main_contents {
	max-width:900px;
	margin:0 auto;
	}
.imagemap {
	position:relative;
	width:100%;
	}

* {
	box-sizing: border-box;
	}

.container {
	max-width:1024px;
	width:100%;
	margin:0 auto;
	padding:10px;
	}
	
.logo img {
    width: 60%;
    min-width: 200px;
    max-width: 360px;
    margin: 60px auto;
	}

.logo p {
	text-align:center;
	}
	
.bg img {
	position:fixed;
	bottom:0px;
	right:0px;
	width:20%;
	height:auto;
	z-index:-1;
	opacity:0.2;
	}

.link01 {
    position: absolute;
    top: 45.5%;
    left: 50%;
	transform:translateX(-50%);
    width: 34%;
    height: 5.4%;
    cursor: pointer;
}

.link02 {
    position: absolute;
    top: 52.6%;
    left: 50%;
	transform:translateX(-50%);
    width: 34%;
    height: 5.4%;
    cursor: pointer;
}

.link03 {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 34%;
    height: 4%;
	transform:translateX(-50%);
    cursor: pointer;
    background: #343434;
	color:#FFF !important;
    border-radius: 20px;

    /* 텍스트 중앙 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* a 태그 기본 스타일 제거 */
    text-decoration: none;
    color: inherit;
    font-size: 1.2em; /* 필요 시 조정 */
    font-weight: bold;
}

@media screen and (max-width: 600px) {
    .link01, .link02, .link03 {
        width: 60%;
    }
	
	.link02 {
		top:56%
		}
	.link03 {
		top: 70%;
		height:5%;
		}
}

	
.drsg {
	padding-left:30px;
	padding-right:30px;
	}
	
.pcy label {
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end; /* 오른쪽 정렬 유지 */
	font-weight:700;
}
	
        .input_psn {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 20px;
        }

        .input_psn {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 20px;
        }

        .left_side, .right_side {
            width: 48%;
        }

        .left_side label, .right_side label {
            display: block;
            margin-bottom: 5px;
        }



input, select, option {
    margin: 0px;
    padding: 5px;
    background: none;
    border: none;
    border-bottom: 1px solid #000;
    color: #000;
    margin-bottom: 20px;
	}

input:focus {
            outline: none;
            border-color: red; /* 포커스 상태 테두리 색 */
        }
		
input, select, option {
	font-size:1.0rem;
	}
	
input:focus, select:focus {
	outline: none;
	}


canvas {
	border: 2px solid #ccc;
	border-radius: 8px;
	background-color: #fff;
	cursor: crosshair;
	width: 100%;
}

.controls {
	margin-top: 10px;
}

button {
	padding: 8px 16px;
	margin: 0 5px;
	border: none;
	border-radius: 4px;
	background-color: #007bff;
	color: white;
	font-size: 14px;
	cursor: pointer;
}

button:hover {
	background-color: #0056b3;
}

	
input[type=checkbox] {
    margin-bottom: 0px;
	margin-right:5px;
}
#name, #hp, #datepicker, #jumin, #corps_name, #corps_hp, #corps_jumin {
	width:100%;
	}
	
.inner {
	padding-left:10px;
	margin-bottom:10px;
	}
	
.box-content {
	margin-bottom:50px;
	}

table {
	width: 100%;
	border-collapse: collapse;
	}

td {
	border: 1px solid #000;
	padding:10px;
	}
	
	
.td_head {
	text-align: center; border-bottom: 2px solid #000;
	font-size:1.1rem;
	}
	
h3 {
	text-align:center;
	font-size:1.7rem;
	}
	
@media (max-width: 800px) {
	.left_side, .right_side {
		width: 100%;
	}
	body {
		font-size:12px;
		}

	.logo img {
		width: 70%;
		}
	.td_head {
		font-size:0.9rem;
		}
	h3 {
		font-size:1rem;
		}
}


#addMember, #removeMember {
	background:green;
	}
	
.member_box {
	width:90%;
	margin:0 auto;
	border:1px solid #EAEAEA;
	background:#EAEAEA;
	padding:10px;
	margin-bottom:10px;
	}
	

.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.popup-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.popup-content input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
}

.popup-content button {
  padding: 10px 20px;
  background: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}



/* 맵버튼 */
.map_btn2{margin-top: 60px; text-align: center; display: flex; justify-content: center;}
.map_btn2 a{display: flex; align-items: center; justify-content: center; width: 250px; height: 55px; font-size: var(--fs20); font-weight: 500; color: #fff;}
.map_btn2 a > i{font-size: 30px; margin-right: 10px;}
.map_btn2 a:first-child{border: 1px solid #004b83; background:#004b83; margin-right: 15px;}
.map_btn2 a:last-child{border: 1px solid #bcd36c; background: #bcd36c; color: #3d1d1c;}

.map_btn2{margin-top: 60px; text-align: center; display: flex; justify-content: center;}
.map_btn2 div{display: flex; align-items: center; justify-content: center; width: 250px; height: 55px; font-size: var(--fs20); font-weight: 500; color: #fff;}
.map_btn2 div > i{font-size: 30px; margin-right: 10px;}
.map_btn2 div:first-child{border: 1px solid #004b83; background:#004b83; margin-right: 15px;}
.map_btn2 div:last-child{border: 1px solid #bcd36c; background: #bcd36c; color: #3d1d1c;}


.common {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

.schedule {
	max-width: 100%;
	margin: 0 auto;
	background: #fff;
	padding: 20px;
	border-radius: 8px;
	margin-top:20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.schedule h1 {
	text-align: center;
	color: #333;
}
.schedule ul {
	list-style-type: none;
	padding: 0;
}
.schedule ul li {
	padding: 10px;
	border-bottom: 1px solid #ddd;
}
.schedule ul li:last-child {
	border-bottom: none;
}
.time {
	font-weight: bold;
	color: #555;
}
.event {
	color: #333;
}
@media (max-width: 600px) {
	.schedule {
		padding: 15px;
	}
	.schedule h1 {
		font-size: 24px;
	}
	.schedule ul li {
		padding: 8px;
	}
}


.course_set {
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
	border: 1px solid #ddd;
	margin-top:20px;
}

.course_set th,
.course_set td {
	padding: 15px;
	text-align: left;
	border: 1px solid #ddd;
	color: #333;
}

.course_set th {
	background-color: #f9f9f9;
	font-weight: 500;
	color: #364F6B;
}


@media screen and (max-width: 768px) {
	.course_set th,
	.course_set td {
		padding: 10px;
	}
}