@charset "utf-8";

.item_box {
    padding: 0 0% 10%;
}

.item_box>ul {
    margin-bottom: 10%;
}

.item_box>ul>li {
    width: 30.6%;
    margin: 0 4% 7% 0;
}

.item_box>ul>li:last-child {
    margin-left: auto;
    margin-right: 34%;
}

.item_box>ul>li:nth-child(3n) {
    margin-right: 0;
}

.item_box>ul>li>a {
    display: block;
    padding: 0 0% 0;
    position: relative;
}

.item_box>ul>li>a:hover {
    
}
.item_box>ul>li>a>.img_box {
    width: 100%;
    max-width: 100%;
    padding: 102% 0 0;
    padding: 0;
    min-height: 240px;
    /* max-height: 240px; */
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #e6e6e6; */
}
.item_box>ul>li>a>.img_box:not(:target) {
    display:block\9;
}

@media all and (-ms-high-contrast: none) {
    .item_box>ul>li>a>.img_box {
        display:block;
        text-align:center;
    }
}


.item_box>ul>li>a>.img_box img {
    max-height: 240px;
    /* width: auto; */
}

.item_box>ul>li>a>h3 {
    /* background: #6b6b6b; */
    color: #464646;
    font-size: 16px;
    padding: 4% 3%;
    font-weight: bold;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    /*     position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: none; */
}

.page_navi {
    text-align: center;
}

.page_navi>img {
}

/*--pager(number)--*/
.pagination {
    text-align: center;
}

.pagination li {
    font-size: 18px;
    display: inline-block;
    font-weight: bold;
}

.pagination li.pages {
    display: none;
}

.pagination > a {
    font-size: 18px;
    display: inline-block;
}

.pagination li.active {
    padding: 0px 4px;
    display: inline-block;
    font-weight: bold;
    margin-right: 3px;
    border-bottom: 2px solid #000;
    font-size: 22px;
}

.pagination li a {
    padding: 8px 10px;
    display: inline-block;
    color: #000;
    transition: 0.2s;
}

.pagination > a {
    padding: 8px 10px;
    display: inline-block;
    color: #000;
    transition: 0.2s;
    margin-right: 3px;
    font-weight: bold;
}

.pagination > a.next, .pagination > a.prev {
    border: none;
}

.pagination li a:hover {
    color: #fff;
    background: #000;
}

.pagination li.prev, .pagination li.next {
    border: none;
}

.pagination li.prev a:hover, .pagination li.next a:hover {
    color: #999;
    background: none;
}

/*--pager prev next*/
.pager-prevNext {
    padding: 4% 0 5%;
    border-bottom: 1px solid #000000;
    text-align: center;
}

.pager-prevNext li {
    font-size: 18px;
    position: relative;
    line-height: 1.3;
    display: inline-block;
    margin: 0 2% 0;
}

.pager-prevNext li.prev {
    padding-left: 1em;
    float: left;
}

.pager-prevNext li.next {
    padding-right: 1em;
    float: right;
    text-align: right;
}

.pager-prevNext a {
    color: #000000;
    font-weight: bold;
}
.pager-prevNext a:hover {
    opacity:0.6;
}

.pager-prevNext .prev:before {
    display: inline-block;
    content: "<";
    color: #c71c31;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.pager-prevNext .next:after {
    display: inline-block;
    content: ">";
    color: #c71c31;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 0;
}
.sort_box {
    margin:0 0 10%;
}
.sort_box>p {
    font-size:18px;
    text-align:center;
    font-weight:bold;
    margin:0 0 3%;
}
.sort_box>ul {
    text-align:center;
}
.sort_box>ul>li {
    margin: 0 3% 3%;
    display:inline-block;
    background:#ddd;
    width:200px;
}
div.sort_box>ul>li>a {
    font-size:14px;
    padding: 2% 5%;
    display:block;
}
.tf_img {
  margin: 0 0 3%;
}

.page_box h3 {
  margin: 0 0 2%;
  font-size: 20px;
}

.page_box p {
  margin: 0 0 2%;
  font-size: 16px;
}