.pagination {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.pag_list {
list-style-type: none;
width: 450px;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: bold;
}
.pag_list > li {
width: 52px;
height: 52px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
}
.pag_list > li.pag_item_t {
width: 40px;
height: 52px;
}
.pag_list > li.pag_item_n1,
.pag_list > li.pag_item_n2 {
width: 60px;
height: 52px;
font-size: 22px;
border: 1px solid var(--color-blue);
}
.pag_list > li.pag_item_n1 {
margin-right: 20px;
}
.pag_list > li.pag_item_n2 {
margin-left: 20px;
}
.pag_list > li.pag_item_n {
border: 1px solid var(--color-blue);
}
.pag_list > li.pag_item {
border: 1px solid lightgrey;
}
.pag_list > li.pag_item:hover {
background-color: lightgray;
border: 1px solid var(--color-blue);
}
.pag_list > li a,
div.a2 {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--color-graphite);
}
.a1,
.a2 {
background-image: var(--img-arrow);
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: center;
}
.a1 {
transform: rotate(180deg);
}
.pag_list > li.pag_item_n1:hover,
.pag_list > li.pag_item_n2:hover {
background-color: lightgray;
}
@media screen and (max-width: 800px) {
.pag_list {
width: 340px;
}
.pag_list > li {
width: 50px;
height: 46px;
}
.pag_list > li.pag_item_t {
width: 40px;
height: 46px;
}
.pag_list > li.pag_item_n1,
.pag_list > li.pag_item_n2 {
width: 50px;
height: 46px;
font-size: 22px;
}
.pag_list > li.pag_item_n1 {
margin-right: 15px;
}
.pag_list > li.pag_item_n2 {
margin-left: 15px;
}}