/* 공통  */
#c3_wrap .c_inner {width: 1300px; margin:0 auto; }

/*Content CSS*/
#c3_wrap {text-align: left; padding:120px 0 115px; background: #fff; }
.c3_top {display: flex; align-items: center; }
.c3_top h1 {font-size:60px; font-weight: 700; color:#333; font-family: 'Montserrat'; }
.c3_top span {display: block; width: 1px; height: 44px; background: #0053a5; margin:0 45px;}
.c3_top p {font-size:16px; font-weight: 300; color:#666; line-height: 28px; }

/* c3_list */
.c3_list {display: flex; flex-wrap:wrap; margin:45px 0 0;}
.c3_list li {width: 16.6%; position: relative;  }
.c3_list li a {display: flex ;align-items: center ;justify-content: center; width: 100%; height: 160px; border:1px solid #ddd; border-bottom: 0; border-right: 0; position: relative;}
.c3_list li:nth-child(n+7) a {border-bottom: 1px solid #ddd; }
.c3_list li:nth-child(6n) a {border-right: 1px solid #ddd; }

/* border animation */
.c3_list li a::before, .c3_list li a::after {position: absolute; content: ""; right: 0; top: 0; background: #0053a5; transition: all .4s ease;}
.c3_list li a::before {height: 0%; width: 1px;}
.c3_list li a::after {width: 0%; height: 1px; right:1px; }
.c3_list li a:hover::before {height: 100%;}
.c3_list li a:hover::after {width: 100%;}

.c3_list li::before, .c3_list li::after {position: absolute; content: ""; left: 0; bottom: 0; background: #0053a5; transition: all .4s ease;}
.c3_list li::before {height: 0%; width: 1px; left:-1px ;}
.c3_list li::after {width: 0%; height: 1px;}
.c3_list li:hover::before {height: 100%;}
.c3_list li:hover::after {width: 100%;}




@media screen and (max-width:1300px) {

}

@media screen and (max-width:1200px) {

}

@media screen and (max-width: 960px) {
}

@media screen and (max-width:640px) {

}