/*Content CSS*/
#c4_wrap{position: relative; padding-top: 80px; overflow: hidden; z-index: 2;}
#c4_wrap::before{content: ''; display: block; width: 100%; height: 800px; position: absolute; top: 0; left: 0; background: url('../img/c4_bg_img.jpg') 50% / cover no-repeat; z-index: -1;}
#c4_wrap::after {content: ''; display: block; width: 1px; height: 100%; background-color: rgba(255,255,255,.3); right:99px; bottom: 0; position: absolute;}

#c4_wrap .c4_inner{width: 100%; max-width: 1400px; height: 720px; padding: 0 50px; margin: 0 auto; }
#c4_wrap .c4_inner .fs_60{font-size: 60px; line-height: 1; font-weight: 700; color: #fff; font-family: 'Poppins';}
#c4_wrap .c4_inner .fs_28{font-size: 28px; line-height: 1.5; font-weight: 600; color: #fff; letter-spacing: -.36px; font-family: 'Poppins';}

#c4_wrap .c4_big_tit {display: flex; align-items: flex-end; justify-content: space-between;}

/* more_btn */
#c4_wrap .more_btn {border:1px solid #fff; font-size: 14px; font-weight: 400; color: #fff; font-family: "Poppins", sans-serif; display: block; display: flex;
justify-content: space-between; align-items: center; width: 205px; height: 45px;transition: all .3s; padding: 0 16px;}
#c4_wrap .more_btn i { width:13px; height: 12px; background:url("../img/more_arrow_w.png") 50%/contain no-repeat; transition: background-image .3s;
display: inline-block; }
#c4_wrap .more_btn:hover {background-color: #000; border-color: #000; color:#fff; }
#c4_wrap .more_btn:hover i { background-image:url("../img/more_arrow_w.png"); }

/*Content CSS*/

#c4_wrap .fs_50{font-family: 'GmarketSans'; font-size: 50px; font-weight:700; display: flex; }
#c4_wrap .dot::after{content: ''; display: inline-block; width: 12px; height: 12px; background-color: #034ea2; border-radius: 50%; position: relative; top:-12px; }


#c4_wrap .c4_slider .slick-track {min-width: 100%; margin-top: 20px}
#c4_wrap .c4_slider .slick-active {overflow: hidden; }
.c4_slide_wrap{width: calc(100% + 35px); left: -17.5px; margin-top: 35px; position: relative;}
.c4_slide_wrap .slick-slide{margin: 0 17.5px;}
.c4_slide_wrap .arrows{}

.c4_slider p{margin: 25px 0 14px;}
.c4_slide_wrap .arrows{width: 50px; display: flex; flex-direction: column;justify-content: space-between; align-items: center; position: absolute; top: 250px; left: -7%; transform: translate(-50%, -50%); height: 130px; gap:10px}
.c4_slide_wrap .arrows .slick-arrow{position: relative; font-size: 0; width: 60px; height: 60px; background-color: transparent; border: solid 1px #fff; transition: .3s;}
.c4_slide_wrap .arrows .slick-prev::after { background:url('../img/c4_arrow_up.png') no-repeat center; content: ''; display: block; position: absolute; width: 100%; height: 100%; background-size: 22px 12px; top: 0; left: 0;}
.c4_slide_wrap .arrows .slick-next::after { background:url('../img/c4_arrow_dw.png') no-repeat center; content: ''; display: block; position: absolute; width: 100%; height: 100%; background-size:22px 12px; top: 0; left: 0;}
/* .c4_slide_wrap .noimg{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #eee;} */
.c4_slide_wrap .arrows .slick-arrow:hover{background-color: rgba(255,255,255,.5);}

.c4_slide_wrap .imgbox::before {content: ''; display: block; width: 100%; padding-bottom: 75.7%;}
.c4_slide_wrap .imgbox::after {content: 'NO IMAGE'; font-size: 17px; font-weight: 600; color:#777; position: absolute;left:50%; top:50%; transform: translate(-50%, -50%);
z-index: -1;}
.slick-slide img {width: 100%; height: 280px}

.c4_slide_wrap a:hover .none{ opacity: 1;}
.c4_slide_wrap a:hover .none::before{opacity: .82;}

.c4_slide_wrap .none{position: absolute; width: 100%; height: 100%;   top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 0; transition: 0.3s;}
.c4_slide_wrap .none::before{content: ''; display: block; width: 100%; height: 100%; border: solid 3px #034ea2; position: absolute; top: 0; left: 0; transition: .3s; opacity: 0}
.c4_slide_wrap .none img{position: relative; z-index: 1;}
.c4_slide_wrap .none span{font-size: 22px; font-weight: 600; color: #fff; margin-top: 25px; position: relative; z-index: 1;}

#c4_wrap .dots {}
#c4_wrap .dots ul, #c4_wrap .dots_mob ul{display: flex; flex-direction: column; gap:20px; position: absolute;top: 430px; left: -100px}
#c4_wrap .dots li, #c4_wrap .dots_mob li{margin-right: 15px;}
#c4_wrap .dots li:last-child, #c4_wrap .dots_mob li:last-child{margin-right: 0;}
#c4_wrap .dots li button, #c4_wrap .dots_mob li button{display: block; width: 10px; height: 10px; border: 1px solid #fff; font-size: 0; border-radius: 50%}
#c4_wrap .dots li.slick-active button, #c4_wrap .dots_mob li.slick-active button{opacity: 1; background-color:#fff; }
#c4_wrap .dots li:last-child, #c4_wrap .dots_mob li:last-child{margin-bottom: 0;}

#c4_wrap .c4_slider li {width: 420px; height: 500px; background-color: transparent; border: 1px solid #ddd; box-sizing: border-box; transition: .4s; cursor: pointer; padding: 15px 15px 35px 15px;}
#c4_wrap .c4_slider li:hover {background-color: #fff;}

#c4_wrap .c4_slider li h2 {font-size: 14px; font-weight: 500; color: rgba(255,255,255,.5); padding-left: 20px; margin-top: 30px; margin-bottom: 15px; transition: .4s}
#c4_wrap .c4_slider li:hover h2 {color: #002358;}

#c4_wrap .c4_slider li h4 {font-size: 20px; font-weight: 600; color: #fff; padding-left: 20px; transition: .4s}
#c4_wrap .c4_slider li:hover h4 {color: #000;}

#c4_wrap .c4_slider li .icon::after {width: 31px; height: 31px; background:url('../img/c4_plus_w.png') no-repeat center; content: ''; display: block;  background-size: 31px 31px; margin-right: 30px}
#c4_wrap .c4_slider li:hover .icon::after {background:url('../img/c4_plus.png') no-repeat center;}

#c4_wrap .c4_slider li .icon {display: flex; justify-content: space-between; align-items: center; margin-top: 40px; transition: .3s}
#c4_wrap .c4_slider li .icon .date {color: rgba(255,255,255,.7); font-size: 14px; font-weight: 300; display: flex; align-items: center; gap:5px; padding-left: 20px; transition: .4s;}
#c4_wrap .c4_slider li:hover .icon .date {color: #999;}

#c4_wrap .c4_slider li .icon .date em {color: #fff; font-size: 17px; transition: .4s}
#c4_wrap .c4_slider li:hover .icon .date em {color: #002358}

@media screen and (max-width:1690px) {
	#c4_wrap::after {display: none; }
    .c4_slide_wrap .arrows {flex-direction: row; top: -50px; left: 973px; width: 130px;}
    #c4_wrap .dots ul, #c4_wrap .dots_mob ul {flex-direction: row; top: 557px; left: 619px;}
}