/* common */
#c3_wrap { overflow: hidden; }
#c3_wrap .c_tit { line-height: 1; text-align: left; }
#c3_wrap .c_tit h1 { font-family: 'Poppins', sans-serif; font-size: 45px; font-weight: 600; color: #000; text-transform: uppercase; }
#c3_wrap .c_tit h1::before { content:""; display: block; width:30px; height: 3px; background-color: #287fd7; margin:0 0 30px; }

#c3_wrap .c_btn { position:relative; display: block; margin:0; width: 236px; height: 52px; line-height: 50px; text-align: center; transition: .3s; font-size: 14px; color: #fff; text-transform: uppercase; font-family: 'Poppins', sans-serif; z-index: 1; border:0; background:#000; }
#c3_wrap .c_btn img { margin-left: 13px; position:relative; top:-1px; }
#c3_wrap .c_btn::before { content:""; position:absolute; left:0; width:100%; top:0; height: 100%; background-image: linear-gradient(to left, #072c7d, #46c7ff); opacity:0; transition: .3s; z-index: -1; }
#c3_wrap .c_btn:hover { }
#c3_wrap .c_btn:hover::before { width: 100%; opacity: 1; }



/*Content CSS*/
#c3_wrap { position:relative; padding:80px 0 100px; }
#c3_wrap .inner { position:relative; z-index: 2; }
#c3_wrap .top { display: flex; justify-content: space-between; align-items: flex-end; }

#c3_wrap .line { position:absolute; left:50%; transform: translateX(-50%); width:1500px; top:0; height: 100%; display: flex; justify-content: space-between; z-index: 1; }
#c3_wrap .line span { width:1px; height: 100%; background:#ddd; }

.c3_slider { width:calc(100% + 30px); margin-left: -15px; margin-top: 30px; z-index: 3; }
.c3_slider .slick-slide { margin:15px; height: 510px; border:1px solid #dcdcdc; background:#fff; }
.c3_slider .slick-slide .img { width:100%; height: 245px; overflow: hidden; }
.c3_slider .slick-slide .img img { transition: all .3s; }

.c3_slider .slick-slide .txt { padding:40px 30px; position:relative; }
.c3_slider .slick-slide .txt h2 { position:absolute; left:0; width:111px; top:-15px; height: 27px; line-height: 27px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 300; color: #fff; background-color: #000; text-align: center; z-index: 1; }
.c3_slider .slick-slide .txt h2::after { content:""; position:absolute; left:0; width:100%; top:0; height: 100%; background-image: linear-gradient(to left, #072c7d, #46c7ff); transition: all .3s; z-index: -1; opacity: 0; }
.c3_slider .slick-slide .txt h1 { width:100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; height: 62px; font-size: 20px; font-weight: 500; line-height: 31px; }
.c3_slider .slick-slide .txt p { margin:15px 0 35px; font-size: 14px; font-weight: 300; letter-spacing: -0.35px; color: #666; line-height: 25px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; height: 50px; }
.c3_slider .slick-slide .txt .date { display: block; font-size: 14px; font-weight: 300; color: #ababab; }


/* arrow */
.c3_con { position:relative; }
.c3_con .c3_arrow { position:absolute; z-index: 2; left:50%; top:46%; transform: translate(-50%,-50%); font-size:0; width: calc(100% + 255px); display: flex; justify-content: space-between; }
.c3_con .slick-arrow { position:relative; transition: all 0.3s; width:55px; height: 55px; cursor: pointer; z-index: 1; display: flex; align-items: center; justify-content: center; background-color: #e2e2e2; }
.c3_con .slick-arrow i { font-size:25px; color:#fff; transition: all .3s; }
.c3_con .slick-arrow::after { content:""; position:absolute; left:0; width:100%; top:0; height: 100%; background-image: linear-gradient(to top, #072c7d, #46c7ff); opacity: 0; transition: all .3s; z-index: -1; }


/* dots */
.c3_slider .slick-dots { position:absolute; left:50%; transform: translateX(-50%); top:15px; width: 1600px; text-align: right; }
.c3_slider .slick-dots li ~ li { margin-top: 8px; }
.c3_slider .slick-dots button { font-size:0; width:8px; height: 8px; background:#ddd; }
.c3_slider .slick-dots .slick-active button { background-color: #287fd7; }


/* hover */
.c3_slider .slick-slide:hover .img img { transform: scale(1.15); }
.c3_slider .slick-slide:hover .txt h2::after { opacity: 1; }
.c3_con .slick-arrow:hover::after { opacity: 1; }