@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2020-11-25
******************************************************** */


/* -------- 메인 컨텐츠 :: 컨텐츠6(CONTACT) -------- */
#mainContactCon{padding: 100px 0; background-color: #f3f3f3;}

.main-contact-wrapper{}
.main-contact-list{display: flex; flex-wrap:wrap;}
.main-contact-item{position: relative; width: 25%; transition: all 0.3s; background-color: #fff;}
.main-contact-item a{padding: 58px 20px 60px; display: block; text-align: center;}
.main-contact-item a:before{position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; display: block; content: ''; content: ''; border: 1px solid #d5d5d5; transition: border-color 0.3s;}
.main-contact-img{}
.main-contact-img img{display: inline-block; height: 48px;}
.main-contact-txt{margin-top: 35px;}
.main-contact-txt h5{font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.5px; color: var(--main-color);}
.main-contact-txt p{margin-top: 20px; font-size: 16px; line-height: 1.8; letter-spacing: -0.5px; color: #646464;}

.main-contact-item.active{z-index: 1; box-shadow: 30px 30px 49px -15px rgba(0,0,0,0.11);}
.main-contact-item.active a:before{border-color: var(--main-color);}

@media all and ( min-width: 801px ){
	.main-contact-item a:hover .main-contact-img img{animation: navani 0.3s ease-in-out;}
}