
/* 공통 */
/* .layout { width:1300px; margin:0 auto; } */
/* .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; }
.btn_more.mob { display: none; }
/* .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; }

#c3_wrap .c_inner { position: relative; width: 1300px; margin:0 auto; }


/*Content CSS*/
#c3_wrap { padding:100px 0; background: #fff; overflow: hidden; }
#c3_wrap .c3_top { display: flex; justify-content: space-between; align-items: flex-end; }
.c3_btn { display: flex; align-items: flex-end; }
.c3_btn .btn_more { margin:0 20px 0 40px; transition: all .5s; }
.c3_btn .btn_more:hover { transform: translateX(20px);}

/* tab btn */
.c3_btn ul { display: flex ; align-items: center; margin-bottom: 5px; }
.c3_btn ul li a { font-size:18px; font-weight:300; transition: all .3s ease; cursor: pointer;}
.c3_btn ul li a.active { color:#006cb7;}
.c3_btn ul li:first-child a::after { content: ''; display: inline-block; width: 1px; height:18px; background: #c4c6cf;
margin:0 24px; vertical-align: -3px; }


/* c3_bo_list */
.c3_bo_list { display: flex; justify-content:flex-start; margin:55px 0 0;}
.c3_bo_list li { width: 415px; height: 275px; }
.c3_bo_list li ~ li { margin-left: 20px; }
.c3_bo_list li a { display: block; position: relative; width: 100%; height: 100%; background: #fff;
    border:1px solid #ddd; padding:35px 42px 0; transition: all .3s; }
.c3_bo_list li a h1 { display: inline-block; padding:0 20px; height: 25px; line-height: 25px;
    background: linear-gradient(to right, #0088e7, #0060a2); text-align: center; font-size: 12px; font-weight: 500; color:#fff;
    transition: all .3s ease; font-family: 'Montserrat'; text-transform: uppercase; }
.c3_bo_list li a h2 { display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;
    -webkit-line-clamp: 1; word-break: keep-all; margin:30px 0 20px; font-size:18px; color:#333; font-family: 'NanumSquare'; }
.c3_bo_list li a p { display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;
    word-break: keep-all; -webkit-line-clamp: 2; font-size:15px; font-weight: 300; color:#666; line-height: 26px;
    min-height: 48px; }
.c3_bo_list li a span { display: inline-block; margin-top: 40px; font-size: 14px; font-weight: 300; color:#9f9e9e;}

.c3_bo_list li a:hover { border-color: #006cb7; box-shadow: 0 5px 20px rgba(0,0,0,.1); }


@media screen and (max-width: 1350px) {
    #c3_wrap .c_inner { width:100%; padding:0 40px; }
    .c3_bo_list li a { padding:35px 35px 0; }
}

@media screen and (max-width: 1024px) {
    #c3_wrap .c_inner { padding:0 30px; }

    #c3_wrap .main_title { text-align: center; }
    #c3_wrap .c3_top { justify-content: center; flex-direction: column; align-items:center; }
    #c3_wrap .c3_btn { margin-top: 20px; }

    #c3_wrap .main_title .sub { font-size:16px; }
    #c3_wrap .main_title .txt { font-size:38px; }

    .c3_bo_list { flex-direction: column; margin:20px 0 0;}
    .c3_bo_list li { width:100%; height: auto; }
    .c3_bo_list li ~ li { margin-left:0; margin-top: -1px; }
    .c3_bo_list li a { display:flex; padding:15px; }

    .c3_bo_list li a:hover { border-color:#ddd; box-shadow:none; }
    .c3_bo_list li a > div { padding-left: 15px; }
    .c3_bo_list li a h2 { margin:0; }
    .c3_bo_list li a p { margin-top:0; -webkit-line-clamp: 1; min-height: 33px;}
    .c3_bo_list li a span { margin-top:0; }

    #c3_wrap .btn_more.mob { display: block; margin: 30px auto 0;}
    #c3_wrap .btn_more.pc { display: none; }
}

@media screen and (max-width: 640px) {
    #c3_wrap { padding:80px 0; }
    #c3_wrap .c_inner { padding:0 20px; }
    .c3_bo_list li a h1 { padding:0 15px; height: 20px; line-height: 20px; font-size: 10px; }
    .c3_bo_list li a h2 { font-size:17px; }
    .c3_bo_list li a p { font-size:14px; }
    .c3_bo_list li a span { font-size: 12px; }
    #c3_wrap .main_title .txt { font-size:33px; line-height: 40px; }

    .c3_btn ul li a { font-size:16px; }
    #c3_wrap .btn_more { font-size: 14px; }
}
