css css file @charset "utf-8";
/*초기 설정*/
*{
margin: 0;
padding: 0;
list-style:none;
}
body{
background: #ffffff;
color:#333333;
overflow-x:hidden;
}
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: #46392e;
}
/*로고 상단+하단 공통 */
.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 #74c346;}
/*로고 하단 */
.logoBottom {height:120px; border-top:10px solid #74c346;}
.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:#46392e;
color:#eeeeee;
box-sizing: border-box;
}
.navi > li > a:hover{
background-color:#74c346;
color:#ffffff;
}
/* 서브메뉴 */
.subMenu{
display:flex;
width:100%;
}
.subMenu > li > a{
min-width:140px;
padding:12px 20px;
font-size:14px;
font-weight:bold;
background:#46392e;
box-sizing: border-box;
color:#ffffff;
white-space: nowrap;
}
.subMenu > li > a:hover{
background-color:rgb(116,195,70, 0.5);
color: #ffffff;
}
.subMenuBG {
width: calc(100% - 190px);
position:absolute;
top:77px;
background:#46392e;
z-index:-1;
left:220px;
transition: all 0.8s;
}
.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 .imgIndex1 {background:url('../img/img1.jpg') center/100% no-repeat ;}
.imgSlide .imgIndex2 {background:url('../img/img2.jpg') center/100% no-repeat ;}
.imgSlide .imgIndex3 {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: rgb(116,195,70, 1); cursor: pointer;}
.direct > li:hover {background:rgba(116,195,70, 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: #74c346;
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;} /* 날짜 오른쪽 정렬 */
/* 갤러리 */
.galleryImg {
display: flex;
justify-content: space-between;
align-items: center;
min-height: inherit;
}
.galleryImg a{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.galleryImg a:hover{ opacity:0.5; }
.galleryImg img {width:180px; height:120px;}
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/* Footer 하단 */
footer{
width:100%;
height:120px;
background:#f1f0ef;
display: flex;
flex-direction: column;
}
/* footer안에 있는 각 컨텐츠의 영역 */
footer > div {height:50%; padding-left:20px;} /* footerCright */
/* FOOTER MENU */
.footerMenu{
display: flex;
align-items:center;
}
.footerMenu a { color:#333333; }
.footerMenu div {padding:0 10px;}
/* 카피라이트 */
.footerCright {
display:flex;
align-items: center;
color:#333333;
}
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/* 모달 팝업 */
#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: #74c346;
color:#ffffff;
border:0;
font-weight: bold;
cursor:pointer;
}
.btn:hover{background :rgb(116,195,70, 0.8); }