.pages { text-align: center; width: 100%; font-size: 0; display: block; padding-top: 0.3rem; }

.pages .page { display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem; line-height: 0.6rem; text-align: center; color: #666; cursor: pointer; border: solid 1px #dddddd; background-color: #fff; margin: 0 0.05rem; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; }

.pages .page.ltn { background-image: url(/static/home/images/b1.png); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }

.pages .page.rtn { background-image: url(/static/home/images/b2.png); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }

.pages .page.on { background-color: #e6001e; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; border: solid 1px #e6001e; color: #fff; }

.pages .page.on.ltn, .pages .page.ltn:hover { background-image: url(/static/home/images/b3.png); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; opacity: 1; border: solid 1px #e6001e; color: #fff; }

.pages .page.on.rtn, .pages .page.rtn:hover { background-image: url(/static/home/images/b4.png); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; opacity: 1; }

.pages .page:hover { background-color: #e6001e; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; border: solid 1px #e6001e; color: #fff; }

@media (max-width: 900px) { .pages .page { width: 0.7rem; height: 0.7rem; line-height: 0.7rem; } }