css

@charset "utf-8";

/*초기 설정*/
*{
  margin: 0;
  padding: 0;
  list-style:none;
}
body{
  background: #ffffff;
  color:#333333;
}
a{
  text-decoration:none;
  display:block;
}

/********본문시작*********/
/* header와 bodyWrap을 감싸는 main */
main {
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}

/* 메뉴와 로고가 들어가는 header */
aside {
  display:flex; 
  flex-direction: column;
  justify-content: space-between;
  min-width:200px;
  background: #222222;
}

/*로고 상단+하단 공통 */
.logo {
  display: flex; 
  justify-content: center; 
  align-items: center;
  width:100%;
}
.logo a{width:80%;}
.logo a > img{width:100%;}
/*로고 상단 */
.logoTop { padding:15px 0; background: #ffffff; border-bottom:10px solid #1d7951;}
/*로고 하단 */
.logoBottom {height:100px;  border-top:10px solid #1d7951;}
.logoBottom img {filter: grayscale(1);}

nav{width:100%;}

/*메인메뉴*/
.navi > li{width:100%;}
.navi > li > a{
	width:100%;
	padding:10px;
	font-size:16px;
	font-weight:bold;
	background-color:#222328;
	color:#eeeeee;
  box-sizing: border-box;
}
.navi > li > a:hover{
	background-color:#1d7951;
	color:#ffffff;
}
.subMenu{	width:100%;	display:none;}
.subMenu > li > a{
	width:100%;
  padding:10px 20px;
	font-size:14px;
	font-weight:bold;
	background:#2f2f2f;
  box-sizing: border-box;
	color:#ffffff;
}
.subMenu > li > a:hover{
	background-color:#31a372;
	color: #ffffff;
}
.spotMenu{
  display:flex;
  justify-content: space-around;
  box-sizing: border-box;
  padding:10px 30px;
  margin-top: 40px;
  font-size:14px;
}
.spotMenu > a{color:#ffffff;}


/* 이미지슬라이드 + 컨텐츠 + 푸터 묶음 */
.bodyWrap {
  position:relative;
	width:calc(100% - 200px);
  overflow: hidden;
}

/* 이미지슬라이드 */
.imgSlide{
  position:relative;
  width:100%;
  height:400px;
  overflow: hidden;
  background:#222222;
}
.imgSlide > a {
  position:absolute;
  top:0;
  left:0;
  width:100%; height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
}
.imgSlide > a:nth-of-type(1) {background:url('../img/img1.jpg') center/100% no-repeat ;}
.imgSlide > a:nth-of-type(2) {background:url('../img/img2.jpg') center/100% no-repeat ;}
.imgSlide > a:nth-of-type(3) {background:url('../img/img3.jpg') center/100% no-repeat ;}

.imgText{
  background: rgba(0,0,0, 0.7);
  color:#ffffff;
  padding:16px 100px;
  font-weight: bold;
}

/* 추가 */
.direct{ position:absolute; top:0; right:0; }
.direct > li {padding:30px;  background: rgba(29,121,81, 1); cursor: pointer;}
.direct > li:hover {background:rgba(29,121,81, 0.5);}
.direct > li > p {background:rgba(0,0,0, 0.2); padding:10px;}
.direct > li:nth-of-type(2) {border-block:1px dashed rgba(255,255,255, 0.3); }
.direct  a { color:#fff; text-decoration: none;}

/* 컨텐츠 영역 background:rgba(29, 121, 81, 0.5); */
.contents{
  width: 100%;
  padding:0;
  margin:0;
  
}

.bannerImg{
  width:100%;
  height:200px;
  background:#666666;
  overflow:hidden;
}


/* 각각 컨텐츠 박스의 영역  */
.tabMenuWrap{ 
  height:250px;
  padding:10px;
  box-sizing: border-box;
}

/* 라디오버튼 안보이게 */
.tabMenuWrap > input[type="radio"] {
  display:none;
}

.tabMenuWrap .tab-panel {
  display: none;
}

.tabMenuWrap > input:nth-of-type(1):checked ~ .tabPannels > .tab-panel:nth-of-type(1),
.tabMenuWrap > input:nth-of-type(2):checked ~ .tabPannels > .tab-panel:nth-of-type(2),
.tabMenuWrap > input:nth-of-type(3):checked ~ .tabPannels > .tab-panel:nth-of-type(3)
{
  display: flex;
}

.tabMenuWrap > label {
  display:inline-block;
  padding: 10px 20px;
  background:#ececec;
  font-size:20px;
  color:#333333;
	text-align:center;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
}

.tabMenuWrap > label:hover,
.tabMenuWrap > input:focus + label,
.tabMenuWrap > input:checked + label {
  background:#ffffff;
  color: #1d7951;
  font-weight: bold;
}

.tabMenuWrap > input:checked + label {
  border-color: #ddd;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.tabPannels{ border:1px solid #dddddd; }

.tab-panel {
  position:relative;
  min-height:178px;
  padding:10px ;
  background:#ffffff;
  box-sizing: border-box;
}

/* 공지사항 */
.notice > ul{ width: 100%; padding:0;}
.notice > ul > li{ padding:8px 12px; margin:0; border-bottom: 1px solid #ddd; }
.notice > ul > li:nth-last-of-type(1){border-bottom: 0; padding-bottom: 0 }
.notice > ul > li > a{ font-size:17px; color:#666; }
.notice a:hover{color:#333333;}
.notice li span {float:right;}  /* 날짜 오른쪽 정렬 */
/* 갤러리 */
.gallery{	left:0; }
.gallery {
  justify-content: space-around;
	align-items: center;
}
.gallery a:hover{ opacity:0.5; }

/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */

/* Footer 하단  */
footer{
  width:100%;
  height:100px;
  background:#222222;
  display: flex;
  justify-content: space-between;
}
/* footer안에 있는 각 컨텐츠의 영역 */
footer > div:nth-of-type(1) {width:85%;} /* footerCright */
footer > div:nth-last-of-type(1) {width:15%;} /* footerSNS */
/* 카피라이트 */
.footerCright {
  display:flex;
  align-items: center;
  padding-left:20px;
  color:#ffffff;
}
/* SNS */
.footerSNS{
	display: flex;
	justify-content: center;
  align-items:center;
}
.footerSNS img:hover{opacity:0.7;}

/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */

/* 모달 팝업 */
#modalWrap{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0, 0.7);
  z-index: 1;
}
#modalWrap.active{
  display:block;
}
.modal{
  position:fixed;
  width:450px;
  padding:20px;
  top:40%;
  left:40%;
  background:#ffffff;
}
.modal > h1{
  margin:10px 0;
  text-align: center;
  letter-spacing: -1px;
}
.modal > p{
  text-align:justify;
}

.btn{
  width:100%;
  padding:10px;
  margin-top:20px;
  background: #1d7951;
  color:#ffffff;
  border:0;
  font-weight: bold;
  cursor:pointer;
}
.btn:hover{background:rgba(29, 121, 81, 0.8);}