/* 공통 */
#c3_wrap .c_inner { width: 1400px; margin:0 auto; position: relative; padding:0 50px;}
#c3_wrap .c_tit h1 {font-size: 60px; font-weight: 700; color:#000; line-height: 1;}
#c3_wrap .c_p {font-size: 18px; line-height: 30px; font-weight:300; color:#000;  word-break: keep-all; }
#c3_wrap  .wh {color:#fff !important; }
/* btn */
#c3_wrap .c_btn {width: 180px; height: 45px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 14px; padding:0 24px;
font-weight: 300; overflow: hidden; z-index: 1; position: relative;  background: #9c2024; }
#c3_wrap .c_btn::before {content: ""; z-index: -1; position: absolute; background: #000; transition: all .4s; left: 0; top: 0; width: 0; height: 100%;}

/*Content CSS*/
#c3_wrap {background: #fff; padding:100px 0 120px; position: relative; z-index: 1; max-width: 1600px; width: 100%;
overflow: hidden; margin:0 auto; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
#c3_wrap .line {position: absolute; z-index: -1; width: 650px; display: flex; justify-content: space-between; top:0; left: 50%;  transform: translateX(-50%);
height: 100%;}
#c3_wrap .line > span {display: block; width: 1px; height: 100%; background: #ddd; }
#c3_wrap .title {display: flex; justify-content: space-between; align-items: flex-end; }

/* slider */
#c3_slider {position: relative; width: calc(100% + 34px); left: -17px; margin-top:50px;}
.c3_box {margin: 0 17px;}
.c3_box.slick-active {overflow: hidden; }
.c3_box a { background: #fff; text-align: left; outline: none; display: block; min-height: 330px; display: block; width: 100%; height: 100%;
padding:45px; outline: none; border:1px solid #ddd; z-index: 1; position: relative; }
.c3_box a::before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity:0;transition:  opacity .3s ease;
border:3px solid #9c2024;}
.c3_box h2 {font-size:18px; font-weight:700; color:#9c2024; }
.c3_box h1 {font-size:20px; font-weight: 700; color:#000; line-height:32px; margin:20px 0; min-height: 64px;
text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; }
.c3_box p {font-size:16px; font-weight: 300; color:#666; line-height: 27px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; min-height: 54px; }
.c3_box a > span {font-size:14px; font-weight: 300; color:rgba(0, 0, 0, 0.7); display: block; margin-top:40px; transition: all .3s ease;}
.c3_box a > span i {margin-right:8px; color:#9c2024; font-size:20px; position: relative; top:3px; }

/* c3 cutoms */
/* dots */
#c3_wrap .slick-dots {position: absolute; right: -80px; top: 50%;  transform: translateY(-50%); z-index: 2; flex-direction: column; display: flex; }
#c3_wrap .slick-dots li {margin:0 0 28px;}
#c3_wrap .slick-dots li:last-child {margin:0;}
#c3_wrap .slick-dots li button {display: block; width: 9px; height: 9px; background: #ddd; border-radius: 50%; font-size: 0; border:0; outline: none;
transition: all .3s ease;}
#c3_wrap .slick-dots li.slick-active button {background: #9c2024;}

/* arrow */
#c3_wrap .slick-arrow { cursor: pointer; transition: all 0.3s; position:absolute; z-index: 10; opacity: 1; left:-70px; border:0; font-size: 0;}
#c3_wrap .slick-arrow.slick-prev { background:url('../img/prev.png') no-repeat center top; top: calc(50% - 75px); content: 'prev';
padding-top: 20px;}
#c3_wrap .slick-arrow.slick-prev::before {content: 'prev';color:#000; font-size: 13px; font-weight: 400; text-transform: uppercase; }
#c3_wrap .slick-arrow.slick-prev::after {content: ''; display: block; width: 30px; height: 1px; background: #ddd;
position: absolute; left: 0; bottom: -20px; cursor: default;}
#c3_wrap .slick-arrow.slick-next { background:url('../img/next.png') no-repeat center bottom; top: 50%;  padding-bottom: 20px;}
#c3_wrap .slick-arrow.slick-next::before { content: 'next'; color:#000;  font-size: 13px; font-weight: 400;  text-transform: uppercase; }
#c3_wrap .slick-arrow:focus {outline: none; border: none;}



@media screen and (min-width: 1025px) {
    /* hover */
    #c3_wrap .c_btn:hover {border-color: #0053a5; color:#fff; }
    #c3_wrap .c_btn:hover::before {width:100%;}
    .c3_box a:hover::before {opacity: 1;}

}

@media screen and (max-width: 1600px) {
    #c3_wrap {border:0; }
    #c3_wrap .slick-dots {position: static; margin-top: 40px; flex-direction: row; justify-content: flex-end;  padding-right: 12px; transform: none; }
    #c3_wrap .slick-dots li {margin:0 20px 0 0;}

}

@media screen and (max-width: 1400px) {
    /* 공통 */
    #c3_wrap .c_inner {width: 100%; }

    /* content */
    #c3_slider {width: calc(100% + 14px); left: -7px; }
    .c3_box {margin: 0 7px;}
    .c3_box a {padding:35px; min-height: auto; }

}


@media screen and (max-width: 1024px) {
    /* 공통 */
    #c3_wrap {padding:90px 0; }
    #c3_wrap .c_inner { padding: 0 30px; }
    #c3_wrap .c_tit h1 {font-size: 35px;}
    #c3_wrap .c_p {font-size: 15px; line-height: 26px; }


    /* content */
    #c3_slider {margin-top: 40px;}
    #c3_wrap .line {display: none; }

    .c3_box h2,
    .c3_box h1 {font-size: 16px; }
    .c3_box h1 {line-height: 28px; min-height:56px; margin:15px 0;}

    .c3_box p {font-size: 14px; min-height: 44px; line-height: 22px;}
    .c3_box a > span {font-size: 13px; margin-top: 20px; }
    .c3_box a > span i {font-size: 16px; }





}

@media screen and (max-width: 640px) {
    /* 공통*/
    #c3_wrap {padding:60px 0;}
    #c3_wrap .c_inner { padding: 0 15px; }
    #c3_wrap .c_tit h1 {font-size: 30px;}
    #c3_wrap .c_p {font-size: 14px; line-height: 24px; }

    /* content */
    #c3_wrap .title {flex-direction:  column; align-items: center; text-align: center;}
    #c3_wrap .c_btn {display: none;}
    #c3_wrap .slick-dots {justify-content: center; padding:0; }

    .c3_box a {padding:30px; }
    .c3_box h2,
    .c3_box h1 {font-size: 15px; }
    .c3_box h1 {line-height: 24px; min-height:48px; }
    .c3_box p {font-size: 13px; min-height: 40px; line-height: 20px;}




}

@media screen and (max-width: 480px) {
    /* 공통*/

    /* content */
    #c3_wrap .slick-dots li {margin:0 15px 0 0;}
    #c3_slider {width: 100%; left: 0; }
    .c3_box {margin: 0;}




}