@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap');

* {
  margin:0;   /* 마진 리셋 */
  padding:0;   /* 패딩 리셋 */
  box-sizing: border-box;   /* 박스 영역은 테두리까지 , 
              content-box: 박스 영역은 콘텐츠까지*/ 
}
a {
    text-decoration:none;  /* 텍스트 링크 밑줄 없애기 */ 
}
ul {
  list-style: none;
}

#container {
  margin:0 auto;  /* 화면 중앙에 배치 */
  width:1500px;    /* 너비 */
}


/*********************************/
/* 헤더 영역 - 로고와 내비게이션 */
/*********************************/

header{
  width:100%;    /*  너비 */
  height:100px;   /* 높이 */ 
  background-color:#07c;
}

/* 로고 */
#logo{ 
  float:left;   /* 왼쪽으로 플로팅 */ 
  width:327px;   /*  너비 */ 
  height:100px;   /* 높이 */
  line-height:100px;  /* 세로로 중간에 맞춤 - 줄간격을 높이 값과 같게 */
  padding-left:20px;  /* 왼쪽에 여백 */
}
#logo h1 {
  font-family:'Merienda', cursive;
  font-weight:700;
  font-size:40px;   /* 글자 크기 */
  color:#fff;   /* 글자 색*/
  text-shadow:0 -1px 0 #222;  /* 그림자 색 */
}

/* 내비게이션 */
nav{  
  float:right;   /* 오른쪽으로 플로팅 */
  width:1173px;   /*   너비 */  
  height:100px;   /* 메뉴 영역 높이 */  
  padding-top:40px;  /* 메뉴를 아래로 내리기 위해 */  
}
#topMenu {  
  height:60px; 
}
#topMenu > li {
  float:left;  /* 메뉴 항목을 왼쪽으로 플로팅 */ 
  position: relative;  /* 서브 메뉴를 absolute로 하기 위해, 이 부분을 relative로 */  
}
#topMenu > li > a{
  display:block;  /* 링크 텍스트는 블록으로 */ 
  color:#fff;  /* 글자 색 */
  font-weight:600;  /* 글자 굵기 */
  text-shadow:0 1px #07c;  /* 그림자 추가 */
  padding:20px 60px;  /* 패딩 */ 
}
#topMenu > li > a > span {
  font-size : 0.5em;   /* 서브 메뉴가 있는 항목에 화살표 표시 */   
}
#topMenu > li > a:hover {
  color:#000;  /* 마우스 오버하면 색상 바뀜 */ 
  text-shadow:0 -1px #07c;  /* 글자가 너무 굵어지지 않도록 */
}

#topMenu > li > ul { /* 서브 메뉴 스타일 */
  display: none;  /* 서브 메뉴 처음에는 화면에 안 보이게 */ 
  position:absolute;  /* 서브 메뉴 포지셔닝 */ 
  width:170px;
  background:rgba(255,255,255,0.6);  /* 슬라이드 쇼 비치도록 배경 색 조절 */
  left:20px;     
  margin:0;
}
#topMenu > li > ul > li {    
  padding:5px 5px 5px 30px;   /* 서브 메뉴 항목 */
}
#topMenu > li > ul > li > a { 
  font-size:15px;   
  padding:10px;
  color:#000;  
}
#topMenu > li:hover > ul {
  display: block;  /* 메인 메뉴 항목 위로 오버하면 서브 메뉴 표시 */
  z-index:10;  /* 슬라이드 쇼에 가리지 않게 조절 */ 
}
#topMenu > li > ul > li > a:hover {
  color:#f00;  /* 서브 메뉴 마우스 오버하면 색상 바뀜 */   
} 

/********************************/
/*   이미지 슬라이드 쇼 영역    */
/********************************/

#slideShow {   
  clear:both;   /* 플로팅 해제 */
  width:100%;    /* 너비 */ 
  height:300px;   /* 높이 */ 
  overflow:hidden;  /* 영역 넘치면 감춤 */ 
  position: relative;
}
#slides {
  position: absolute;
}
#slides > img {
  width:100%;  /* 너비 */
  float:left;  /* 가로로 배치 */
}

button{
  position: absolute;
  height:100%;  /* 위아래 가득 차게 */ 
  top:0;
  border:none;  /* 테두리 없이 */  
  padding:20px;
  background-color: transparent;  /* 투명 배경 */ 
  color:#000;  /* 화살표 색은 검정 */  
  font-weight:800;  /* 굵게 */ 
  font-size: 24px;  /* 화살표 크기 */ 
  opacity: 0.5;  /* 반투명 */ 
}
#prev {
  left:0;  /* 왼쪽으로 붙여서 */ 
}
#next {
  right:0;  /* 오른쪽으로 붙여서 */ 
}
button:hover {
  background-color:#222;  /* 짙은 회색 배경 */
  color:#fff;   /* 흰색 화살표 */ 
  opacity:0.6;   /* 불투명도를 조금 높임 */ 
  cursor:pointer;  /* 커서 모양을 포인터로 */ 
}
button:focus {
  outline:0;  /* 아웃트라인 없앰 */
}


/**************************************/
/*   콘텐츠 영역  - 탭 메뉴와 퀵 링크 */
/**************************************/

#contents{  
  width:100%;   /* 너비 */
  height:100%;  /* 높이 */   
  margin-top:20px;  /* 마진 추가 */
}

/* 탭 메뉴 */
#tabMenu{  
  float:left;  /* 왼쪽으로 플로팅 */ 
  width: 700px;   /* 너비 */ 
   /* 높이 */
   height: 100%;
  margin-top:5px;  /* 탭 메뉴 위쪽에 여백 두기 */
}
#tabMenu  input[type="radio"] {
  display:none;  /* 라디오 버튼 감춤 */ 
}
#tabMenu label {  /* 탭 제목 스타일 */ 
  display:inline-block;  /* 탭들을 가로로 배치 */
  margin:0 0;  /* 마진 */ 
  padding:5px 15px;  /* 패딩 */
  font-weight:600;   /* 글자 굵기 */
  text-align: left;   /* 글자 정렬 */
  color:#666;  /* 글자 색 */ 
  border:1px solid transparent;  /* 테두리 */ 
}
#tabMenu label:hover {  /* 마우스 오버했을 때 탭 제목 스타일 */
  color:#222;  
  cursor:pointer;
}
#tabMenu input:checked + label {  /* 활성화된 탭 제목 스타일 */ 
  color:#b00;
  border:1px solid #ddd;
  background-color: #eee;
}

.tabContent {  /* 탭 내용 스타일 */
  display:none;
  height:100%;
  padding:20px 20px 0;
  border-top:1px solid #ddd;
  
}
.tabContent h2{  
  display: none; 
}

#love-poem p {
  color:#000;
}

#notice ul {
  list-style: disc;
  margin-left:30px;
}
#notice p {
  font-size:17px;
  
  line-height:2;
  color:#000;
}
#reading-love ul li {
  display:inline;  /* 이미지 가로로 배치 */
}

#gallery ul li {
  display:inline;  /* 이미지 가로로 배치 */
}

#today-book ul {
  font-size:17px;
  list-style: disc;
  margin-left:30px;
}
#today-book ul li {
  line-height: 2.2;
}

#listening-music ul li {
  display:inline; 
  height:400px;
}

#event-performance {
  height:400px;

}
#event-performance ul{
  font-size:17px;
  list-style: disc;
  margin-left:30px;
}
#event-performance ul li {
  line-height: 2.2;
}

#love-poem ul {
  font-size:17px;
  list-style: none;
  margin-left:10px;
}
#love-poem ul li {
  line-height:2.2;
}

#life-maxim ul {
  font-size:17px;
  list-style: none;
  margin-left:10px;
}
#life-maxim ul li {
  line-height:2.2;
}

#bible-maxim ul {
  font-size:17px;
  list-style: none;
  margin-left:10px;
}
#bible-maxim ul li {
  line-height:2.2;
}

#bud-maxim ul {
  font-size:17px;
  list-style: none;
  margin-left:10px;
}
#bud-maxim ul li {
  line-height:2.2;
}

#humor ul {
  font-size:17px;
  list-style: none;
  margin-left:10px;
}
#humor ul li {
  line-height:2.2;
}

#idiom ul {
  font-size:17px;
  list-style: none;
  margin-left:10px;
}
#idiom ul li {
  line-height:2.2;
}

#tab1:checked ~ #notice, 
#tab3:checked ~ #today-book, 
#tab10:checked ~ #event-performance,
#tab13:checked ~ #reading-love,
#tab2:checked ~ #gallery,
#tab15:checked ~ #listening-music {
  display:block;
}


/* 퀵 링크 */ 
#links{  
  float:right;   /* 오른쪽으로 플로팅 */
  width:800px;   /* 너비 */
  height:100%;   /* 높이 */
  margin-top:20px;  /* 마진 추가 */
}
#links ul{
  padding:0;  /* 패딩 */ 
  overflow: hidden;  /* 넘치는 것은 감춤 */
}
#links ul li{
  float:left;  /* 가로로 배치 */
  width:20%;  /* 1/5크기만큼씩 */
  text-align:center;  /* 가운데 정렬 */
  margin:5px 0;  /* 마진 */
}

#links ul li a span{
  display:block;  /* 블록 레벨로 */ 
  margin:0 auto;  /* 가운데 배치 */ 
  width:150px;  /* 가로 크기 */ 
  height:150px;  /* 세로 크기 */
  border-radius:100%;  /* 테두리 둥글게. border-radius: 150px로 해도 됨 */ 
  border:1px solid #ddd;  /* 테두리 스타일 */
  line-height:150px;  /* 수직으로 중간에 오게 */ 
}

#quick-icon1 {
  background-image:url('../images/flowers/야생화5.jpg'); 
}
#quick-icon2 {
  background-image:url('../images/flowers/야생화3.jpg'); 
}
#quick-img-1 {
  background-image:url('../images/flowers/야생화28.jpg'); 
}
#quick-img-2 {
  background-image:url('../images/flowers/야생화29.jpg'); 
}
#quick-img-3 {
  background-image:url('../images/flowers/야생화26.jpg'); 
}
#quick-icon4 {
  background-image:url('../images/flowers/야생화24.jpg') ;
}
#quick-icon5 {
  background-image:url('../images/flowers/야생화9.jpg') ;
}
#quick-icon6 {
  background-image:url('../images/flowers/야생화7.jpg') ;
}
#quick-icon7 {
  background-image:url('../images/flowers/야생화8.jpg') ;
}

#links ul li a p {
  margin-top:15px;  /* 위쪽 마진 */
  font-weight:600;  /* 글자 굵기 */
  color :#000;  /* 글자 색 */
}

/* 명화 영역*/

#famousPainting {  /*  내용 스타일 */
  width:1500px;
  
  display:inline-block;
  padding:10px 0 0;
 
  border-top:1px solid #ddd;
}
.paintingContent {
  display:none;
  padding: 5px 10px;
  border-top:1px solid #ddd;
}

#land-scape1 {
  width:100%;
  height:100%;
  display:none;
 

 }
 #land-scape1 ul li{
  display:inline;  /* 이미지 가로로 배치 */
}


#famousPainting  input[type="radio"] {
  display:none;  /* 라디오 버튼 감춤 */ 
}
#famousPainting label {  /* 탭 제목 스타일 */ 
  display:inline-block;  /* 탭들을 가로로 배치 */
  margin:0 0;  /* 마진 */ 
  padding:5px 25px;  /* 패딩 */
  font-weight:600;   /* 글자 굵기 */
  text-align: center;   /* 글자 정렬 */
  color :#666;  /* 글자 색 */ 
  border:1px solid transparent;  /* 테두리 */ 
}
#famousPainting label:hover {  /* 마우스 오버했을 때 탭 제목 스타일 */
  color:#222;  
  cursor:pointer;
}
#famousPainting input:checked + label {  /* 활성화된 탭 제목 스타일 */ 
  color:#b00;
  border:1px solid #ddd;
  background-color: #eee;
}
#tab5:checked ~ #land-scape1,
#tab8:checked ~ #bible-maxim,
#tab9:checked ~ #bud-maxim,
#tab7:checked ~ #love-poem, 
#tab11:checked ~ #humor,
#tab6:checked ~ #life-maxim, 
#tab12:checked ~ #idiom {
  display: block;
}

#famousPainting {  
  width:100%;   /* 너비 */
  height:100%;  /* 높이 */  
  background-color: #e7e5e5;
}
#famous-painting ul li{
  display:inline;  /* 이미지 가로로 배치 */
}
#famous-painting h4{  
  display: none; 
}
#maxim h3 {
  margin-left: 10px;
  color:#07c;
}
#maxim p {
  margin-top: 5px;
  margin-left: 10px;
  font-size:17px;  /* 글자 크기 */
  color:black;    /* 글자 색*/ 
}

#land-scape {
  width: 100%;   /* 너비 */
  height:510px;   /* 높이 */
  line-height: 10px;
  color: blue;
  padding:5px 30px;  /* 패딩 */
  border:1px solid rgb(124, 123, 123);   /* 테두리 */
  background-image:url('../images/landscape/풍경-28.jpg');  /* 배경 이미지 */

   background-size:auto; /* 배경 이미지 크기 */
}


#music-cafe img{
  width:1500px;
  height: 300px;
}


/******************/
/*   푸터 영역    */
/******************/

footer{   
  width:100%;   /* 너비 */
  height:150px;  /* 높이 */
  border-top:2px solid #222;
}
#bottomMenu{
  width:100%;
  height:40px;
  position:relative;  
}
#bottomMenu ul {
  margin-top:15px;  
}
#bottomMenu > ul > li{
  float:left;  /* 가로로 배치 */ 
  padding:5px 20px;
  border-right:1px solid #ddd;   /* 항목 오른쪽에 테두리 */ 
}

#bottomMenu > ul > li > {
   position: relative;  /* 서브 메뉴를 absolute로 하기 위해, 이 부분을 relative로 */  
}
#bottomMenu ul > li:hover > ul  {
  display: block;  /* 메인 메뉴 항목 위로 오버하면 서브 메뉴 표시 */
   
}
#bottomMenu > ul > li > ul { 
  display: none;  /* 서브 메뉴 처음에는 화면에 안 보이게 */ 
  position: absolute;  /* 서브 메뉴 포지셔닝 */ 
  width:100px;
  background:rgba(255,255,255,0.6);  /* 슬라이드 쇼 비치도록 배경 색 조절 */
  left:370px;     
  margin:0; 
  padding:5px 5px 5px 30px;   /* 서브 메뉴 항목 */
}

#bottomMenu > ul > li >  a:hover {
  color:#000;  /* 마우스 오버하면 색상 바뀜 */ 
  text-shadow:0 -1px #07c;  /* 글자가 너무 굵어지지 않도록 */
}
#bottomMenu > ul > li > ul > li > a:hover {
  color:#f80707;  /* 마우스 오버하면 색상 바뀜 */ 
  
}

#bottomMenu ul li:last-child{
  border:none;  /* 마지막 항목에는 오른쪽 테두리 없음 */  
}
#bottomMenu ul li a:visited {  
  font-size:15px;  /* 글자 크기 */ 
  color:#666;   /* 글자 색 */ 
}


#sns {
  position:absolute;  
  right:0;  /* 오른쪽 끝에 배치 */ 
}
#sns > ul > li{
  float:right;
  border:none;  /* 테두리 없이 */
  padding:5px;   
} 
#company{
  clear:left;  /* 플로팅 해제. clear:both도 가능 */
  margin-top:25px;  /* 위쪽 마진 */
  margin-left:20px;  /* 왼쪽 마진 */ 
}
p {
  font-size:17px;  /* 글자 크기 */
  color:black;    /* 글자 색*/ 
}