/* 공통 */
#c5_wrap .layout { width:1300px; margin:0 auto; }
#c5_wrap .se_con { padding:100px 0; }

.main_title { line-height: 1; }
.main_title .sub { padding:0 0 18px 7px; font-size:17px; color:#006cb7; font-family: 'Montserrat'; text-transform: uppercase; }
.main_title .sub .ico { display: inline-block; position:relative; width:7px; height:7px; margin-right:15px; border-radius: 50%; background:#006cb7; vertical-align: 3px; }
.main_title .sub .ico::before { content:""; position:absolute; left:-4px; top:-4px; width:15px; height:15px; border-radius: 50%;
background:#006cb7; opacity: .4; }
.main_title .txt { font-size:43px; color:#000; font-family: 'NanumSquare'; font-weight: 300; text-transform: uppercase;
word-break: keep-all; }

/* .btn_more { display: inline-block; width:135px; padding-bottom: 10px; font-size:15px; color:#006cb7; font-weight: 500;
    transition: all .3s; font-family: 'Montserrat'; background:url('../img/btn_more.png') no-repeat left bottom; }
 .c1_wrap .btn_more { margin-top: 60px; transition: all .5s; }
.c1_wrap .btn_more:hover { transform: translateX(50%); } */

.view_more { font-size:14px; color:#006cb7; font-weight:500; font-family: 'Montserrat';}

.bu_arrow { display: inline-block; position: relative; width: 20px; height: 1px; background: #006cb7; margin:2px 0 0 10px;
    transition: all .3s; }
.bu_arrow:after { content:""; position: absolute; top: -3px; width: 8px; right: 0; height: 1px; background: #006cb7;
    transform: rotate(43deg); transition: all .3s ease; }


/*Content CSS*/
#c5_wrap { position:relative; z-index: 1; text-align: center;  }
#c5_wrap:before { content:""; position:absolute; left:0; width:100%; bottom:0; height: 100%; background:url('../img/c5_bg.png') no-repeat center / cover; }
#c5_wrap .c5_bg { position:absolute; left:0; right:0; bottom:0; height:240px; background:#006cb7; z-index: -1; }

.c5_con { margin-top: 60px; }
.c5_con ul { display: flex; justify-content: space-between; }
.c5_con li { width:305px; box-shadow: 0 0 9px 0 rgba(0, 108, 183, 0.1); }
.c5_con li a { position:relative; display: block; cursor: pointer; height: 246px; background:#fff; transition: all .3s; }
.c5_con li a:before { transition: all .3s; }

.c5_con .ico { position:relative; z-index: 1; display: flex; align-items: center; justify-content: center; width:100%; height: 133px;
 transition: all .3s; }
.c5_con li:nth-child(1) .ico { background:url('../img/c5_ico1.png') no-repeat center; }
.c5_con li:nth-child(2) .ico { background:url('../img/c5_ico2.png') no-repeat center; }
.c5_con li:nth-child(3) .ico { background:url('../img/c5_ico3.png') no-repeat center; }
.c5_con li:nth-child(4) .ico { background:url('../img/c5_ico4.png') no-repeat center; }


.c5_con .txt { position:relative; font-size:15px; }
.c5_con .txt::before { content:''; display: block; margin:0 auto; width:20px; height: 1px; background:#006cb7; transition: all .3s; }
.c5_con .txt h2 { padding:25px 0 5px; color:#333; font-weight: 500; transition: all .3s; word-break: keep-all; font-size:15px; }
.c5_con .txt span { color:#666; font-weight: 300; transition: all .3s;  }

.c5_con p { font-size:16px; color:#fff; font-weight: 300; padding-top: 40px; word-break: keep-all; }

/* hover */
.c5_con li a:before { content:""; position:absolute; left:0; right:0; top:0; bottom:0;
background:no-repeat center / cover; opacity: 0; }
.c5_con li:hover a:before { opacity: 1; }
.c5_con li:nth-child(1) a:before { background-image: url('../img/c5_img1.jpg'); }
.c5_con li:nth-child(2) a:before { background-image: url('../img/c5_img2.jpg'); }
.c5_con li:nth-child(3) a:before { background-image: url('../img/c5_img3.jpg'); }
.c5_con li:nth-child(4) a:before { background-image: url('../img/c5_img4.jpg'); }

.c5_con li:nth-child(1) a:hover .ico { background-image: url('../img/c5_ico1h.png'); }
.c5_con li:nth-child(2) a:hover .ico { background-image: url('../img/c5_ico2h.png'); }
.c5_con li:nth-child(3) a:hover .ico { background-image: url('../img/c5_ico3h.png'); }
.c5_con li:nth-child(4) a:hover .ico { background-image: url('../img/c5_ico4h.png'); }

.c5_con li:hover a .txt * { color:#fff; }
.c5_con li:hover a .txt::before { background:#fff; }



@media screen and (max-width: 1350px) {
    #c5_wrap .layout { width:100%; padding-left: 40px; padding-right: 40px; }
    .c5_con li { width:calc(25% - 10px); }
}

@media screen and (max-width: 1024px) {
    #c5_wrap:before { display: none; }
    #c5_wrap .c5_bg { height: 100%; width:100%; }

    #c5_wrap .layout { width:100%; padding-left: 30px; padding-right: 30px; }
    .c5_con { margin-top: 40px; }
    .c5_con ul { flex-wrap: wrap; }
    .c5_con li { width:50%; }

    #c5_wrap .main_title .sub { color:#fff; }
    #c5_wrap .main_title .sub .ico { background:#fff; }
    #c5_wrap .main_title .sub .ico:before { background:#fff;}
    #c5_wrap .main_title .txt { color:#fff; }

    .main_title .txt { font-size:40px; line-height: 52px; }
    .c5_con .txt h2 { padding:25px 20px 5px; }
    .c5_con li a { display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .c5_con .ico { height: 80px; }

}

@media screen and (max-width: 640px) {
    #c5_wrap .se_con { padding:80px 0; }
    #c5_wrap .layout { padding-left: 20px; padding-right: 20px; }
    .c5_con { margin-top: 30px; }

    .main_title .txt { font-size:33px; line-height: 42px; }
}