/*compile*/
/* list letter1*/
.letter_list_container {
  position: relative;
  width: 110%;
  left: -5%;
  border-bottom: 1px solid #ccc;
}

.letter_list_container .letter-list {
  border-top: 1px solid #CCC;
}

.letter_list_container .letter-list li {
  border-bottom: 1px solid #CCC;
}

.letter_list_container .letter-list li:last-child {
  border-bottom: none;
}

.letter_list_container .letter-list li a {
  color: #777;
  padding: 3.10945%;
  display: block;
  width: 100%;
  text-decoration: none;
  line-height: 2em;
}

.letter_list_container .letter-list li a:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.letter_list_container .letter-list li a:hover, .letter_list_container .letter-list li a:focus {
  background-color: #ededed;
}

.letter_list_container .letter-list li a:active {
  box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.2);
}

.letter_list_container .letter-list li a:before {
  content: '>';
  display: inline-block;
  width: 1em;
  vertical-align: text-bottom;
  text-align: center;
  font-size: 200%;
  line-height: 1em;
  border-radius: 1em;
  -webkit-transform: translateY(-10%);
  transform: translateY(-10%);
  float: right;
}

/*list detail*/
.letter_detail_container {
  border-top: 1px solid #CCC;
}

.letter_detail_container section {
  border-bottom: 1px solid #CCC;
}

.letter_detail_container h2 {
  font-size: 3.75vw;
  line-height: normal;
  margin: 4.6875% 0;
  color: #08546b;
}

.letter_detail_container .letter-image {
  margin: 4.6875% 0;
  text-align: center;
}

.letter_detail_container .letter-image img {
  width: 36.25%;
  border: 1px solid #CCC;
  box-shadow: 0 2px 5px #CCC;
}

.letter_detail_container .letter-image img:hover, .letter_detail_container .letter-image img:focus {
  background-color: #ededed;
}

.letter_detail_container .letter-image img:active {
  box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.2);
}