css

@charset "utf-8";

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

/* 확장형 header, headerWrap을 감쌈 */
header {
  width:100%;
  height:100px;
  background: #0076BE;
}
/* 메뉴와 로고가 들어가고 중앙정렬하는  */
.headerWrap{
  width:1200px;
  height:100%;
  margin:0 auto;
  display:flex;
  justify-content: space-between;
}
/*로고*/
.logo {
  width:20%;
  display: flex; /*로고 이미지를 중앙에 위치 시키기 위해 flex로 지정하여 수평, 수직 정렬이 되도록 하기 위해.*/
  justify-content: center; /* 수평 가운데 정렬 */
  align-items: center; /* 수직 가운데 정렬 */
}
/*로고이미지*/
.logo > img{
  width:200px; /*지시사항에 적힌대로 width값 */
  height:40px; /*지시사항에 적힌대로 height값 */
}

/*상단메뉴*/
.mainMenu {
  width:800px; /*서브메뉴랑 동일하게*/
  height:100%; /*header의 높이 그대로 */
  display: flex;
  justify-content: space-between;
  align-items:center;
  position:relative; /*subMenu때문에 반드시 필요*/
}
.mainMenu > a{
  width:25%;
  padding:20px 0;
  text-align: center;
  color:#ffffff;
  font-weight:bold;
}
.mainMenu > a:hover{
  background: rgba(255,255,255, 0.1);
}

.subMenu{
  width:800px; /*메인메뉴랑 동일하게*/
  display:flex;
  justify-content: space-between;
  background: #333333;
  position:absolute;
  right:0;
  top:100px; /*header 높이 만큼 내려옴*/
  z-index:1;
}
.subMenu > ul{
  width:25%;
}
.subMenu > ul > li > a{
  text-align: center;
  padding:10px 0;
  color:#E66B27;
}
.subMenu > ul > li > a:hover{
  background: rgba(255,255,255, 0.1);
  color:#ffffff;
}

/********본문시작*********/
/* 이미지슬라이드와 컨텐츠를 감싸는 main */
main {
  width: 1200px;
  margin:0 auto;
  position:relative;
}


/*이미지슬라이드*/
.imgSlide{
  position:relative;
  width:100%;
  height:300px;
  overflow: hidden;
  background: #eeeeee;
}

.imgSlide > a{
  position:absolute;
  top:0;
  left:0;
  overflow: hidden; /* 이미지슬라이드가 좌우로 움직일때는 반드시 필요 */
}
.imgSlide a > img {height:100%;}
.imgText{
  position:absolute;
  top:40%;
  left:40%;
  margin:-10px -70px;
  background: rgba(0, 118, 190, 0.7);
  color:#ffffff;
  padding:16px 100px;
  font-weight: bold;
}

/*컨텐츠*/
.contents {
  width: 100%;
  height:200px;
  padding:0;
  margin:10px 0;
  display:flex;
  justify-content: space-between;
  position: relative; /* 탭메뉴의 콘텐츠 영역 absolute 때문에 넣어줌 */
}
/*컨텐츠 공통사항*/
.contents div{ width:33.3%;}
.contents > div:nth-of-type(2){margin:0 10px;}

/*탭메뉴 : 공지사항 갤러리 */
.tabMenu{ display:flex;}
.tabMenu>li>a{
	padding:0 10px;
	min-width: 85px;
	line-height:30px;
	font-size:14px;
	text-align:center;
	background:#eeeeee;
	border:1px solid #dddddd;
}
.tabMenu>li>a:hover{ background-color:#eeeeee;}

/* 공지사항과 갤러리 탭 맞닿는 부분에 보더를 없애줌 */
.tabMenu>li:first-child a{border-right:none;}
/* 활성화된 탭의 스타일 */
.tabMenu>li.active>a{ font-weight: bold; background-color:#ffffff;}
/*탭 콘텐츠 영역 스타일*/
.tabBG{
	position:absolute;
	overflow:hidden;
	height:168px; /* chrome inspect(검사) 보고 수치 계산 */
	background:#ffffff;
}
 /*active 클래스가 추가된 탭 콘텐츠 영역 스타일*/
.tabMenu>li.active div{
	border:1px solid #dddddd;
	z-index:1;
}
 /* 공지사항 */
.notice ul{ padding:20px 0;}
.notice ul li{ padding:8px 20px;
	margin:0 10px;
  font-size:14px;
}
/*공지사항 중 2배수 리스트 스타일*/
.notice li:nth-child(even){ background:rgba(230, 107, 39, 0.1); }
.notice li:hover{color:#222328;background:rgba(0, 118, 190, 0.1);  }
.notice li span {float:right;}  /* 날짜 오른쪽 정렬 */

.gallery{	left:0; }
.gallery ul {
	display: flex;
  justify-content: space-around;
	align-items: center;
  height:100%;  /*높이 값이 있어야 수직 정렬 됨*/
}
.gallery li:hover{ opacity:0.5; }

/*배너와 바로가기 공통 */
.banner, .direct{
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.banner > a,
.direct > a{
  width:100px;
  padding:14px 0;
  text-align: center;
	font-weight:bold;
  color:#ffffff;
	background-color:rgba(230, 107, 39, 0.5);
}
.banner > a:hover,
.direct > a:hover{
  background:rgba(0, 118, 190, 0.5);
}

/*배너*/
.banner{
  background: url("../img/banner.jpg") center center ;
}

/*바로가기*/
.direct{
  background: url("../img/direct.jpg") center center ;
}

/* 확장형 footer, footerWrap을 감쌈 */
footer{
  width:100%;
  height:100px;
  background:#333333;
}
/* 하단로고 + 하단메뉴 + 카피라이트 감싸고 중앙정렬 */
.footerWrap{
  width:1200px;
  height:100%;
  margin:0 auto;
  padding:0 40px;
  display: flex;
  justify-content: space-between;
}
/* 공통 */
.footerWrap div { display: flex; }
/* 하단로고 */
.footerLogo{
  width:25%;
  justify-content: center;
  align-items: center;
  opacity: 0.2;
}
/* 하단메뉴와 카피라이트 그룹  */
.footerGroup{
  width:40%;
  height:100%;
	padding:20px 0 ;
  flex-direction: column;
  justify-content: space-around;
}
/* 하단메뉴 */
.footerMenu{
	justify-content: space-between;
}
.footerMenu a {color:#ffffff;}
.footerMenu a:hover {color:#E66B27;}
/* 카피이트 */
.footerCright {
  letter-spacing: 0.4px;
  font-size:16px;
  color:#ffffff;
}
/* 레이어 팝업  */
#modalWrap{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  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;
}
.modal > p{
  text-align:justify;
}
.btn{
  width:100%;
  padding:10px;
  margin-top:20px;
  background: #0076BE;
  color:#ffffff;
  border:0;
  font-weight: bold;
  cursor:pointer;
}
.btn:hover{background:rgba(0, 118, 190, 0.2); color:#0076BE;}