/* ±âº» ÃʱâÈ­ */
* { 
  position: relative; 
  box-sizing: border-box; 
  margin:0; 
  padding:0; 
}

/* html, body */
html { width:100%; height:100%; }
body { width:100%; height:100%; padding-top:220px; font-family:Arial,sans-serif; }

/* ¹è³Ê Àüü °íÁ¤ */
#banner { 
  position: fixed;   /* »ó´Ü °íÁ¤ */
  top:0;
  left:0;
  width:100%;
  height:220px;
  overflow: hidden;
  z-index: 9999;    /* ¸ðµç ¿ä¼Ò À§ */
}

/* ¹è³Ê À̹ÌÁö */
#banner img { 
  position: absolute; 
  top:50px;
  left:0;
  width:100%; 
  height:auto; 
  margin-top: -30%; 
  z-index: 0; 
}

/* »ó´Ü ¸Þ´º */
#gnb{ 
  background: rgba( 0,0,0,0.3); 
  padding:7px; 
  text-align: center; 
  z-index: 2; 
  position: relative;
}

#gnb a { text-decoration: none; color:#fff; padding:10px; }
#gnb a:hover { color:#FF0; }

/* ŸÀÌƲ */
#title { 
  position: absolute; 
  z-index: 3; 
  width:100%; 
  text-align: center; 
  margin-top: 40px;
  font-size: 45px; 
  color:#ff33ff; 
  font-style: italic;
  font-weight: bold; 
  text-shadow: 2px 2px #000; 
}

/* ±Û¾²±â Æû */
.form { 
  max-width: 800px;  
  margin:0 auto; 
  margin-top: 30px; 
  background: #f7f7f7; 
  border-radius: 6px; 
  border:1px solid #ddd; 
  padding:20px; 
  font-size: 13px; 
}

#write_form { }
#write_form item { 
  margin:0; 
  display:block; 
  padding:6px; 
  background: #fff; 
  border:1px solid #ddd; 
}

#write_form item span:nth-child(1) { width:30%;  display: inline-block;}
#write_form item span:nth-child(2) { width:65%;  display: inline-block;}

/* ÀÔ·ÂÆû °øÅë */
input , select, textarea { 
  padding:5px;  
  width:100%; 
  max-width:800px;
  border:1px solid #ccc;
  box-sizing: border-box;
}

input[type="radio"] { width:25px; vertical-align: middle; }
label { margin-right:20px; }

button { 
  padding:3px; 
  border:1px solid #aaa; 
  border-radius: 4px; 
  width:80px;
  background: linear-gradient(#fff,#ddd); 
  cursor:pointer;
}
button:hover { background: #eef; }

#write_form #button_submit { 
  margin-left: 20px;   
  background: linear-gradient(#777,#333); 
  color:#fff; 
  border:1px solid #000;   
}
#write_form #button_back { float:right; }

/* ÆÄÀÏ ¸®½ºÆ® */
#file_list { padding:10px; }
#file_list .file_item { padding:12px; font-size: 14px; margin:2px; background: #eee; }
#file_list .file_item button { float:right; bottom:4px; }

/* °Ô½ÃÆÇ */
#board { font-size:12px; max-width: 800px; margin:0 auto; margin-top: 10px; }
#board item { display: block; width: 100%; border-bottom: 1px solid #999; overflow: auto; }
#board item:hover { color:#048; cursor: pointer; }
#board item a { float:right; padding:5px; text-decoration: none; color:#000; }
#board item a:hover { color:#048; }
#board item:nth-child(1) { background: #aaa; color:#fff; pointer-events : none; }
#board item span { display: inline-block; text-align: center; padding:7px; }
#board item span:nth-child(5n+1){ width:10%; }
#board item span:nth-child(5n+2){ width:25%; text-align: left; }
#board item span:nth-child(5n+2) b { color:#940; }
#board item span:nth-child(5n+3){ width:15%; }
#board item span:nth-child(5n+4){ width:25%; }
#board item span:nth-child(5n+5){ width:10%; }

/* ÆäÀÌ¡ */
#paging { text-align: center; padding:5px; }
#paging .page_item{ padding:5px; background: #eee; display: inline-block; margin:2px; cursor: pointer; width:25px; }
#paging .selected { background: #888; color:#fff; }

/* ǪÅÍ */
#foot { 
  background: #fff; 
  color:#444; 
  padding:10px; 
  font-size:12px; 
  padding-bottom:10px; 
  bottom:0px;
  margin-top: 10px; 
  text-align: center; 
  width:100%;  
  border-top: 1px solid #eee;
}

/* ¸ð¹ÙÀÏ ´ëÀÀ */
@media (max-width: 800px) {
  #banner { height:120px; }
  #title { display:none; }
  body { padding-top:120px; }
}