@charset "UTF-8";

/* artifact */

.af_item{
	width: 280px;
  height: 172px;
  border-width: 2px;
  position: relative;
  float: left;
  background-color: #282828;
  border: 2px solid #bd8e2d;
  border-radius: 8px;
  padding-top: 0px;
  margin:10px 10px 10px 10px; 
  list-style: none;
}
dl.af_link {
    height: 6px;
}
.af_no{
	top: 4px;
	left: 95px;
	font-size: 12px;
	font-weight: normal;
	position: absolute;
	line-height: 1.5em;
	color: #ffffff;
	padding-top: 43px
	display: block;
	text-decoration: none;
	outline: none;

}

dt.star {
  position: absolute;
  left: 94px;
  top: 60px;
}

.af_inner{
  height: 81px;
  border-radius: 0 0 6px 6px;
  padding: 7px 12px 0;
  margin: 0px;
  border-top: 2px solid #bd8e2d;
  background-color: #ffffff;
  margin-top: 81px;
}
	    

.af_name{
  left: 94px;
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  line-height: 1.5em;
  color: #ffffff;
  text-decoration: none;
  outline: none;
  width: 168px;
  height: 36px;
  top: 37%;
  line-height: 1.4;
  margin-top: -2.7em;
}

.af_image{
	position: absolute;
	top: -2px;
	left: -2px;
}

.af_lv{
	top: 4px;
	right: 6px;
	font-size: 13px;
	font-weight: bold;
	position: absolute;
	line-height: 1.5em;
	color: #e4c223;
	text-decoration: none;
	outline: none;
}

.af_text{
   font-size: 14px;
   font-weight: normal;
   text-decoration: none;
   padding-bottom: 0px;
   word-break: normal;
   padding:1px 0; 
   line-height:1.5em;
   display:inline;
}





@media (min-width: 818px){
  .list_artifact {
    width: 900px;
    margin: 0 auto;
  }
  .af_item{
    margin:10px 10px 10px 10px; 
  }
}


@media (max-width: 817px){
  .list_artifact {
      width: 600px;
      margin: 0 auto;
  }
  .af_item{
      margin:10px 10px 10px 10px; 
  }
}

@media (max-width: 570px){
  .list_artifact {
      width: 280px;
      margin: 0 auto;
  }
  .af_item{
      margin:10px 10px 10px 0px; 
  }

}