body {
  margin: 1px;
  padding: 1px;
  background-color: #E0E2E2;
  font-family: dotum, sans-serif;
  font-size: 14px;
}

a {
  text-decoration: none;
}

hr {
  border: 0;
  height: 1px;
  background-color: #96A8AF;
}

img {
  vertical-align: middle;
}

.header {
  clear: both;
  padding: 5px;
  color: #E6E6FA;
  background-color: #006699;
  font-size: 140%;
  font-weight: bold;
  font-family: 'Malgun Gothic', '맑은 고딕', Vernada, dotum;
  text-align: center;
  vertical-align: middle;
}

.channels {
  clear: both;
}

.channel_pair {
  clear: both;
}

.channel {
  margin: 0.2%;
  padding: 0.5%;
  width: 48.5%;
  line-height: 140%;
  float: left;
  background-color: #FFFFFF;
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1px;
}

.channel .title {
  color: #006699;
  font-weight: bold;
}

.rss a {
  color: gray;
  font-size: 80%;
}

.item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.item .date {
  padding-left: 4px;
  color: gray;
  font-size: 10px;
  text-align: right;
}

.item .new {
  color: #F7B55B;
  font-size: 80%;
}

.item .old {
  color: #CACACA;
  font-size: 80%;
}

.item a {
  color: #30323F; /*#0022AA;*/
}

.item a:hover {
  border-bottom-style: dashed;
  border-bottom-width: 1px;
  color: #4559E9;
}

.menu {
  clear: both;
  width: 100%;
  background-color: #96A8AF;
  border-bottom: 1px solid #7E7567;
  border-top: 1px solid #7E7567;
  overflow: hidden;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  text-align: center;
}

.menu ul li {
  display: block;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
}

.menu ul li a {
  display: block;
  padding: 8px 20px 8px 20px;
  border-left: 1px solid #ECE9D8;
  border-right: 1px solid #7E7567;
  color: #E6E6FA;
  font-weight: bold;
  line-height: 1.3em;
  vertical-align: middle;
}

.menu ul li a:hover {
  color: #006699;
  background-color: #ECE9D8;
  border-left: 1px solid #fff;
}

.menu ul li.active a,.menu ul li.active a:hover {
  color: #fff;
  background-color: #CBC396;
}

.footer {
  clear: both;
  padding: 5px;
  font-size: 80%;
  background-color: #C8C5AD;
  text-align: right;
  vertical-align: middle;
}

@MEDIA screen and (max-width: 800px) {
  body {
    margin: 0;
    padding: 0;
    font-family: 'Malgun Gothic', dotum, sans-serif;
    font-size: 87.5%;
  }
  hr {
    margin: 1px;
  }
  .header {
    padding: 2px;
    font-size: 100%;
  }
  .menu {
    border-bottom: ;
    border-top: ;
  }
  .menu ul li {
    width: 20%;
  }
  .menu ul li a {
    padding: 8px 1px 8px 1px;
    font-size: 90%;
  }
  .channel_pair {
    clear: none;
  }
  .channel {
    width: 98.5%;
    float: center;
    border-color: #96A8AF;
  }
  .channel .title {
    padding-left: 2px;
    font-size: 100%;
  }
  .item .date {
    padding-left: 1px;
  }
  .item .new {
    font-size: 9px;
  }
  .item .old {
    font-size: 9px;
  }
  .footer {
    display: none;
  }
}