* { position: relative; box-sizing: border-box; margin:0; padding:0; box-sizing: border-box;}
html { width:100%; height:100%;  }
body { width:100%; height:100%;  }
#gnb{ background: rgba( 0,0,0,0.3); padding:3px; text-align: center; z-index: 1;}
#gnb a { text-decoration: none; color:#fff; padding:3px;}
#gnb a:hover { color:#FF0;}

#title { position: absolute; z-index: 1; width:100%; text-align: center; margin-top: 45px;
        font-size: 45px; color:#ff33ff; font-style: italic;font-weight: bold; text-shadow: 2px 2px #000 }

#banner { overflow: hidden; height:40px;}
#banner img { width:100%; height:auto; margin-top: -30%; position: absolute; z-index: 0; }

.form { max-width: 700px;  margin:0 auto; margin-top: 30px; background: #f7f7f7; border-radius: 6px; border:1px solid #ddd; padding:5px; font-size: 13px; }
#write_form { }
#write_form item { margin:0; display:block; padding:5px; 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 { padding:3px;  width: 100%; border:1px solid #ccc;}
input[type="radio"] { width:50px; 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); }
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; }

#board {font-size:12px; max-width: 700px;  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:5px;  }
#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:3px; }
#paging .page_item{ padding:3px; 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: 700px) {
  #banner { height:120px; }
  #title { display:none; }
}