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

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

#container {
  margin:0 auto;  /* 화면 중앙에 배치 */
  width:1200px;    /* 너비 */    
  background-color: #fff;
}

/*********************************/
/* 헤더 영역 - 로고와 내비게이션 */
/*********************************/
header{
  width:100%;    /*  너비 */
  height:100px;   /* 높이 */ 
  background-color:#045;  
}

/* 로고 */
#logo{ 
  float:left;   /* 왼쪽으로 플로팅 */ 
  width:250px;   /*  너비 */ 
  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:900px;   /*   너비 */  
  height:100px;   /* 메뉴 영역 높이 */  
  padding-top:40px;  /* 메뉴를 아래로 내리기 위해 */  
}
#topMenu {  
  height:60px; 
}
#topMenu > li {
  float:left;  /* 메뉴 항목을 왼쪽으로 플로팅 */ 
  position: 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: 200px;
  background-color: rgba(255, 255, 255, 0.9);
  left: 20px;
  margin: 0;
}
#topMenu > li > ul > li {
  padding: 10px 10px 10px 30px;
  width: 200px;
}
#topMenu > li > ul > li > a {
  font-size: 14px;
  padding: 10px;
  color: #000;
}
#topMenu > li:hover > ul {
  display: block;
  z-index: 10;
}
#topMenu > li > ul > li > a:hover {
  color: #f00;
}

.detail {
  text-align: center;
  border-radius:20px;
  margin: auto;
  width:100%;  /* 너비 */
  float:left;  /* 가로로 배치 */
}

/* 본문 */
img {
  width: 50%;
  margin: auto;
  padding: 10px;
  display: block;
  float:left;  /* 가로로 배치 */
  object-fit: cover;
}