/*Content CSS*/
#c3_wrap {padding: 85px 0 60px; position: relative; overflow: hidden;}
#c3_wrap::before{content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, #fff 65%, #f7f7f7 35%); z-index: 1;}
#c3_wrap::after{content: ''; display: block; position: absolute; top: 0; left: 0; width: 49%; height: 100%; background: url('../img/c3_bg.png') 50% / cover no-repeat; z-index: 2
}

#c3_wrap .c_inner { width: 100%; max-width: 1500px; margin:0 auto; position: relative; padding:0 50px; z-index: 3;}
#c3_wrap .c_tit h1 {font-size: 60px; font-weight: 800; color:#000; position: relative; line-height: 1; font-family: 'SUIT', sans-serif;}

#c3_wrap .top {display: flex; justify-content: space-between; align-items: center; }
#c3_wrap .btn_wr {display: flex; align-items: center; }

#c3_wrap .c_btn {display: flex; justify-content: center; align-items: center; justify-content: space-between; width: 205px; height: 52px; padding: 0 25px; border-radius: 26px; border:1px solid #000; transition: all .3s; font-size: 14px; color:#000; font-family: 'Poppins'; font-weight: 300; line-height: 1;}
#c3_wrap .c_btn i {display: block; position: relative; width: 7px; height: 13px;}
#c3_wrap .c_btn i img{position: absolute; top: 0; left: 0; transition: .3s;}
#c3_wrap .c_btn i img + img{opacity: 0;}

/* slider */
#c3_wrap .c3_slide{}

#c3_wrap .slider {width: 100%; position: relative; width: calc(100% + 15px); left: -7.5px; margin-top: 50px;}
#c3_wrap .slider .slick-track {min-width: 100%; }
#c3_wrap .slide_box {margin: 0 7.5px;}
#c3_wrap .slide_box.slick-active {overflow: hidden; }
#c3_wrap .slide_box a {display: flex; padding: 36px 27px; background: transparent; text-align: left; width: 100%; height: 100%;
outline: none; background-color: #fff; border:1px solid #ddd; z-index: 1; position: relative;  transition: .3s;}
#c3_wrap .slide_box a::before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;
transition:  opacity .3s ease; opacity: 0; border:2px solid #001253; }

#c3_wrap .slide_box a .txt {flex-grow: 1; max-width: calc(100% - 187px);}
#c3_wrap .slide_box h1 {font-size:23px; font-weight: 800; color:#000; line-height:1; padding-bottom: 15px; margin-bottom: 25px; border-bottom: solid 1px #ccc;}
#c3_wrap .slide_box h2 {font-size:16px; font-weight: 700; color:#000033; line-height:1; margin-bottom: 11px;}
#c3_wrap .slide_box p {font-size:15px; font-weight: 400; color:#555; line-height: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#c3_wrap .slide_box .info{position: relative; padding-left: 27px;}
#c3_wrap .slide_box .info::before{content: ''; display: block; position: absolute; top: -2px; left: 0; width: 20px; height: 18px; background: center no-repeat;}
#c3_wrap .slide_box .info1::before{background-image: url('../img/c3_icon1.png');}
#c3_wrap .slide_box .info2::before{background-image: url('../img/c3_icon2.png');}

#c3_wrap .slide_box .info + .info{margin-top: 23px; }


#c3_wrap .slide_box a .img{flex-shrink: 0; margin-right: 24px; overflow: hidden; max-width: 163px;}
#c3_wrap .slide_box a .img img{width: 100%; object-fit: cover;}

#c3_wrap .slide_box a .arrow{position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #000033; opacity: 0; transition: .3s;}
/* arrow */
#c3_wrap .slick-arrow {border:0; background: transparent; outline: none; top:50%; transform: translateY(-50%); font-size:0; width: 25px; height: 47px;  position:absolute;}
#c3_wrap .slick-next { right:-72px; background:url('../img/c3_next.png') no-repeat center;}
#c3_wrap .slick-prev { left:-72px;  background:url('../img/c3_prev.png') no-repeat center;}

/* dots */
#c3_wrap .dots{margin-top: 48px;}
#c3_wrap .slick-dots{display: flex; align-items: center; justify-content: center;}
#c3_wrap .slick-dots li button{font-size: 0; width: 10px; height: 10px; background-color: #ccc; border-radius: 50%;}
#c3_wrap .slick-dots li{margin-right: 8px;}
#c3_wrap .slick-dots li:last-child{margin-right: 0;}
#c3_wrap .slick-dots .slick-active{margin-right: 14px;}
#c3_wrap .slick-dots .slick-active button{background-color: #000033; width: 56px; border-radius: 15px;}




@media screen and (min-width: 1025px) {
    #c3_wrap .slide_box a:hover{border-color: #001253;}
    #c3_wrap .slide_box a:hover::before {opacity: 1;}
    #c3_wrap .slide_box a:hover .arrow{opacity: 1;}
    #c3_wrap .c_btn:hover {background-color: #002D8F; border-color: #002D8F; color: #fff;}
    #c3_wrap .c_btn:hover i img{opacity: 0;}
    #c3_wrap .c_btn:hover i img + img{opacity: 1;}



}


@media screen and (min-width: 1800px) {
    #c3_wrap::before{left: 90px; width: calc(100% - 180px); background-image: linear-gradient(to right, #fff 1031px, #f7f7f7 705px); }
    #c3_wrap::after{width: 842px; left: 91px;}

    #c3_wrap .c_line{position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% + 100px); display: flex; justify-content: space-between; padding: 0 90px; z-index: 1;}
    #c3_wrap .c_line span{display: block; width: 1px; height: 100%; background-color: #ccc;}
    #c3_wrap .slide_box a .txt {max-width: 194px; padding-top: 20px;}

}
@media screen and (max-width: 1800px) {
    #c3_wrap{padding: 80px 0;}
    #c3_wrap .slide_box a{align-items: center;}
}

@media screen and (max-width: 1600px) {
    #c3_wrap::after{background-position: right;}

    #c3_wrap .slick-arrow{width: 18px; height: 34px; background-size: cover;}
    #c3_wrap .slick-prev{left: -30px; }
    #c3_wrap .slick-next{right: -30px;}

    #c3_wrap .c_tit h1 {font-size: 50px;}
    #c3_wrap .slide_box a{padding: 30px 20px;}
    #c3_wrap .slide_box a .img{margin-right: 20px;}
    #c3_wrap .slide_box .info + .info{margin-top: 20px;}
}




@media screen and (max-width: 1400px) {
    #c3_wrap::before{background-image: linear-gradient(to right, #fff 70%, #f7f7f7 30%); z-index: 1;}

    #c3_wrap .c_tit h1 {font-size: 45px;}

    #c3_wrap .slick-arrow{width: 15px; height: 28px;}
    #c3_wrap .slick-prev{left: -25px; }
    #c3_wrap .slick-next{right: -25px;}

    #c3_wrap .slide_box h1{font-size: 21px;}
    #c3_wrap .slide_box .info::before{transform: scale(.9);}
    #c3_wrap .slide_box a .arrow{width: 50px; height: 50px;}
    #c3_wrap .slide_box a .arrow img{width: 14px; height: 14px;}
    #c3_wrap .slide_box a .img{width: 40%;}
    #c3_wrap .slide_box a .txt{max-width: calc(60% - 20px);}


}

@media screen and (max-width: 1280px) {
    #c3_wrap .slider{margin-top: 40px;}

    #c3_wrap .c_tit h1 {font-size: 42px;}
    #c3_wrap .c_btn{width: 200px; height: 40px; padding: 20px;}

    #c3_wrap .slide_box a{padding: 20px;}
    #c3_wrap .slide_box a .arrow{width: 45px; height: 45px;}
    #c3_wrap .slide_box a .arrow img{width: 13px; height: 13px;}
    #c3_wrap .slide_box h2{margin-bottom: 10px;}
    #c3_wrap .slide_box p{font-size: 14px;}
    #c3_wrap .slide_box a .txt{max-width: calc(100% - 183px);}


}

@media screen and (max-width: 1024px) {
    #c3_wrap{margin-top: 0; padding: 50px 0;}
    #c3_wrap::before{background: #fff;}
    #c3_wrap::after{width: 65%;}
    #c3_wrap .c_inner{padding: 0 30px;}

    #c3_wrap .dots{display: block; margin-top: 30px;}

    #c3_wrap .top{display: block; text-align: center;}
    #c3_wrap .c_tit h1 {font-size: 40px;}
    #c3_wrap .c_btn{width: 100%; margin-top: 25px;}
    #c3_wrap .slider{margin-top: 30px;}






}


@media screen and (max-width: 640px) {
    #c3_wrap .c_tit h1 {font-size: 35px;}

    #c3_wrap .c_inner{padding: 0 20px;}
    #c3_wrap .slider{margin-top: 20px;}
    #c3_wrap .c_btn{padding: 0 15px; font-size: 13px;}


}

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

    #c3_wrap .slide_box a {display: block;}
    #c3_wrap .slide_box a .img{width: 100%; max-width: 100%; height: 350px; margin-right: 0; margin-bottom: 20px; border: solid 1px #dbdbdb;}
    /* #c3_wrap .slide_box a .img img{height: 100%;} */
    #c3_wrap .slide_box a .txt{max-width: 100%;}

}