@charset "utf-8";

.customer-contact {display:flex; gap:40px;}
.customer-contact-item {padding:35px 20px; width:calc((100% - 80px)/3); gap:35px; display: flex; flex-direction:column; justify-content: center;align-items: center; border-radius:10px;border: 1px solid #DDD;background: #FFF;}

.customer-contact-item .icon {margin:0 auto; display: flex;width: 100px;height: 100px;justify-content: center;align-items: center; border-radius: 100px;border: 1px solid #DDD; transition:var(--ani);}
.customer-contact-item .icon img {}
.customer-contact-item .txt {text-align: center;}
.customer-contact-item .txt h4 {color: #000; font-size: var(--fs24);font-weight: 700; line-height: normal;}
.customer-contact-item .txt p {padding:10px 0 0; color: #000; line-height: normal;}

.customer-contact-item:hover {background:#f7f7f7; border-color:var(--base1);}
.customer-contact-item:hover .icon { border-color:var(--base1);}

@media (max-width: 1199px) {
	.customer-contact {gap:10px;}
	.customer-contact-item {width:calc((100% - 20px)/3); gap:30px;}
	.customer-contact-item .icon {width:90px; height:90px;}
	
}

@media (max-width: 767px) {
	.customer-contact {gap:5px; flex-direction:column;}
	.customer-contact-item {width:100%; gap:20px;}
	.customer-contact-item .icon {width:80px; height:80px;}
	.customer-contact-item .icon img {height:30px;}
	.customer-contact-item .txt p {padding:5px 0 0;}
}