@charset "utf-8";
/* voice CSS
---------------------------------- */

/* sec-voice 
--------------------------*/
#sec-voice .feedback-box {
	border: 2px solid rgba(0,0,0,0.1);
	padding: 30px 40px; 
}
#sec-voice .feedback-box:not(:first-child) {
	margin-top: 30px;
}
#sec-voice .feedback-box .c-txt {
	padding: 20px;
}
#sec-voice .feedback-box .bottom-info {
	display: flex;
	gap: 15px 10%;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
#sec-voice .feedback-box .customer {
	position: relative;
	padding-left: 23px;
}
#sec-voice .feedback-box .customer::before {
	position: absolute;
	content: "";
	background: url(../img/common/ico-customer.svg) no-repeat center / cover;
	top: 0.8em;
	left: 0;
	transform: translateY(-50%);
	width: 18px;
	aspect-ratio: 23 / 25;
}
#sec-voice .feedback-box .recommend {
	margin-left: auto;
}
#sec-voice .feedback-box .reco-num {
	color: #f5646e;
}
@media (max-width: 576px) {
	#sec-voice .cate-list li {
		display: block;
        width: 50%;
        margin-bottom: 10px;
	}
	#sec-voice .cate-list li:nth-child(2n-1) {
		border-left: 1px solid #dfdfdf;
	}
}
@media (max-width: 480px) {
	#sec-voice .feedback-box {
		padding: 30px 5%;
	}
}



/* -------------------------------------- 
    pager
 -------------------------------------- */
.pager {
	padding: 30px 0;
}

.pager ul {
	display: flex;
    flex-wrap: wrap;
	margin: 0 auto;
    width: 100%;
    justify-content: flex-end;
}

.pager ul li {
	display: table-cell;
	vertical-align: top;
	height: 60px;
    width: 60px;
    margin-right: 2px;
}

.pager ul li:first-child {
    margin-right: 20px;
}

.nav-current {
	text-align: center;
}

.nav-current span {
	line-height: 60px;
}

.pager ul li a,
.pager ul li > span {
	display: inline-block;
	height: 60px;
	position: relative;
}

.nav-pre {
	text-align: left;
}

.nav-next {
	text-align: right;
}

.nav-next i,
.nav-pre i,
.pager .nav-backlist i {
	position: absolute;
	display: inline-block;
	width: 60px;
	height: 60px;
	overflow: hidden;
	background: #e1f4ff;
	text-align: center;
}

.nav-pre i {
	left: 0;
}

.nav-next i {
	right: 0;
}

.nav-pre > span i,
.nav-next > span i {
    background: #f7f7f7;
}

.nav-pre a,
.nav-pre > span,
.nav-backlist a {
	text-align: left;
}

.nav-pre a span,
.nav-pre > span span {
	line-height: 60px;
	padding-left: 60px;
}

.nav-backlist a span {
	line-height: 60px;
	padding-left: 80px;
}

.nav-next a,
.nav-next > span {
	text-align: right;
}

.nav-next a span,
.nav-next > span span {
	line-height: 60px;
	padding-right: 60px;
}

.nav-pre i::before,
.nav-backlist i::before, 
.nav-next i::before {
	content:"";
	position: absolute;
	top: 50%;
	display: block;
	width: 10px;
	height: 10px;
}

.nav-pre i:before,
.nav-backlist i:before {
	left: 50%;
	border-top: 2px solid #0d94fb;
	border-left: 2px solid #0d94fb;
	transform: translate(-50%,-50%) rotate(-45deg);
}

.nav-next i:before {
	left: 50%;
	border-top: 2px solid #0d94fb;
	border-right: 2px solid #0d94fb;
	transform: translate(-50%,-50%) rotate(45deg);
}

.nav-pre span i:before {
	border-top: 2px solid #a0a0a0;
	border-left: 2px solid #a0a0a0;
}

.nav-next span i:before {
	border-top: 2px solid #a0a0a0;
	border-right: 2px solid #a0a0a0;
}

.pager ul .nav-pre a:hover i:before,
.pager .nav-backlist a:hover i:before {
	animation: move-left-anim .5s ease 0s 1 forwards;
}

.pager ul .nav-next a:hover i:before {
	animation: move-right-anim .5s ease 0s 1 forwards;
}

@keyframes move-left-anim {
	0%{transform: translate(-50%,-50%) rotate(-45deg); opacity:1;}
	50%{transform: translate(-100%,-50%) rotate(-45deg); opacity:0;}
	50.1%{transform: translate(0%,-50%) rotate(-45deg); opacity:0;}
	100%{transform: translate(-50%,-50%) rotate(-45deg); opacity:1;}
}

@keyframes move-right-anim {
	0%{transform: translate(-50%,-50%) rotate(45deg); opacity:1;}
	50%{transform: translate(0%,-50%) rotate(45deg); opacity:0;}
	50.1%{transform: translate(-100%,-50%) rotate(45deg); opacity:0;}
	100%{transform: translate(-50%,-50%) rotate(45deg); opacity:1;}
}

@media screen and (max-width: 767px) {
	.nav-pre a span {
		display: none;
	}

	.nav-next a span {
		display: none;
	}

	.nav-pre > span span,
	.nav-next > span span {
		display: none;
	}

	.nav-pre a:hover,
	.nav-next a:hover,
	.nav-backlist a:hover {
		background: none !important;
	}
}

@media screen and (max-width: 480px) {
	.pager ul {
		width: 100%;
		table-layout: auto;
	}
	.nav-current {
		width: 19%;
	}
}