/* 공통 */
#c4_wrap .c_inner{ width: 80%; margin:0 auto; position: relative;   }
#c4_wrap .c_title h1 {font-size:48px; font-weight: 800; color:#000; font-family: 'NanumSquare',sans-serif;}


/*Content CSS*/
/*  #c4_wrap {height: 100vh; min-height: 800px; background-color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; }*/
#c4_wrap .list {display: flex; justify-content: space-between; margin-top:29px; width: 100%;}
#c4_wrap .list li {width: 410px;     padding: 0px 20px;}
#c4_wrap .list li a {display: block;     width: 91%; height: 500px; background-color: #fff; 
   overflow: hidden;  /*  box-shadow: 2.8px 1.2px 24px 0 rgba(108, 154, 255, 0.22);*/ box-shadow: 2.8px 1.2px 24px 0 rgb(237 237 237 / 22%);
position: relative;     margin-bottom: 25px;     border: 1px solid #dfdfdf;}
#c4_wrap .list li .img {width: 100%; height: 250px; }
#c4_wrap .list li .cont .txt {height: 250px; position: relative; padding:55px 30px 0;}
#c4_wrap .list li .cont .txt::before {content: ''; display: block; width: 4px; height: 55px; background-color: #0050ff; position: absolute; left:50%; transform:translateX(-50%);
top:-27px;}
#c4_wrap .list li .txt h1 {font-size:28px; font-weight: 700; color:#000; font-family: 'NanumSquare',sans-serif; }
#c4_wrap .list li .txt p {font-size:16px; font-weight: 300; line-height: 30px; color:#666; margin-top:15px; }
/* cover */
#c4_wrap .list li .cover {    text-align: center; position: absolute; left:0; top:0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
background: url('../img/1-back.jpg') 50% 50% no-repeat;  background-size: cover; transition: opacity .3s ease; opacity: 0; }
#c4_wrap .list li .cover .txt h1, #c4_wrap .list li .cover .txt p {color:#fff;}
#c4_wrap .list li .cover .arrow {margin-top:50px; }
/* cover img */
#c4_wrap .list li:nth-child(2) .cover {background-image:url('../img/1-back.jpg') ;}
#c4_wrap .list li:nth-child(3) .cover {background-image:url('../img/1-back.jpg') ;}
/* hover */
#c4_wrap .list li a:hover .cover {opacity: 1; }


/* arrow */
#c4_wrap .slick-arrow { cursor: pointer; transition: all 0.3s; font-size: 0; width:60px; height: 60px; bottom: 0; transition: all .3s;
border:1px solid #ddd; }
#c4_wrap .slick-arrow.slick-prev { background:url('../img/prev.png') no-repeat center center;  border-right: 0; }
#c4_wrap .slick-arrow.slick-next { background:url('../img/next.png') no-repeat center center;  }
#c4_wrap .slick-arrow:focus {outline: none; }
#c4_wrap .slick-arrow:hover {background-color: #333; border-color:rgba(221, 221, 221, 0.5); }
#c4_wrap .slick-arrow.slick-prev:hover { background-image:url('../img/prev_w.png');}
#c4_wrap .slick-arrow.slick-next:hover { background-image:url('../img/next_w.png');}




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

@media screen and (max-width: 1300px) {
    /* 공통 */
    #c4_wrap .c_inner {width: 100%; padding: 0 80px; }

    #c4_wrap .list li {width: calc(33.3% - 15px);}
    #c4_wrap .list li a {height: 100%; }
    #c4_wrap .list li .img, #c4_wrap .list li .cont .txt {height: auto ;}
    #c4_wrap .list li .img img {width: 100%;}
    #c4_wrap .list li .cont .txt {padding:50px 25px;}
    #c4_wrap .list li .txt h1 {font-size:22px;}
    #c4_wrap .list li .txt p {font-size:14px; letter-spacing: -.5px; line-height: 26px; word-break: keep-all;}
    #c4_wrap .list li .txt p br {display: none; }
    #c4_wrap .list li .cover {padding:0 25px;}

}

@media screen and (max-width: 1024px) {
    /* 공통 */
    #c4_wrap {height:auto; min-height: auto; padding:100px 0;}
    #c4_wrap .c_inner {width: 100%; padding: 0 50px; }
    #c4_wrap .c_title h1 {font-size:38px;}

    #c4_wrap .list {margin-top:50px;}
    #c4_wrap .list {flex-direction: column;}
    #c4_wrap .list li {width: 100%; margin-bottom: 30px; }
    #c4_wrap .list li:last-child {margin-bottom: 0; }
    #c4_wrap .list li .cont {display: flex; width: 100%;}
    #c4_wrap .list li .cont .img {width: 40%;overflow: hidden; }
    #c4_wrap .list li .cont .img img {height: 100%; width: auto; position: relative; left:50%; transform:translateX(-50%);}
    #c4_wrap .list li .cont .txt {width: 60%; padding:40px 25px; text-align: left; }
    #c4_wrap .list li .cont .txt::before {display: none;}
    #c4_wrap .list li .cont .txt h1::before {content: ''; display: block; width: 40px; height: 3px; background-color: #0050ff; margin:0 0 20px;}
    #c4_wrap .list li .cover {display: none;}

}

/* c1 */
#c4_wrap {width: 100%;  margin: 0 ; background-color: ; padding:90px 0 100px; position: relative; z-index: 1;}
#c4_wrap::after {content: ''; display: block; width:1px; height: 100%; position: absolute; left:90px; top:0; background-color:#ddd;}
#c4_wrap .txt_area { margin-bottom: 40px; display: flex; justify-content: space-between;}
#c4_wrap .txt_area .arrows { margin-left:30px; flex-shrink: 0;    padding-top: 40px;}
#c4_wrap .slide_area { width:100%; position:relative; z-index: 1; }


/* font size */
#c4_wrap .fs_60 {font-size: 40px; font-weight :700; line-height: 1.2; color:#000; }
#c4_wrap .fs_35 {font-size: 35px; font-weight :800; line-height: 1.2; color:#000; }
#c4_wrap .fs_18 {font-size: 18px; font-weight :400; line-height: 1.67; color:#333; }
#c4_wrap .fs_17 {font-size: 17px; font-weight :400; line-height: 1.67; color:rgba(51, 51, 51, 0.8); }
#c4_wrap .fs_16 {font-size: 16px; font-weight :400; line-height: 1.67; color:#333; }
#c4_wrap .fs_15 {font-size: 15px; font-weight :400; line-height: 1.67; color:rgba(51, 51, 51, 0.8); }



/*#c5_wrap .c_inner { padding: 0 50px; margin: 0 auto; max-width: 1400px; width: 100%; }*/
#c4_wrap .c_tit h3 {font-size: 20px; font-weight:500; color: #c82124; font-family: "Poppins", sans-serif; margin-bottom:20px; line-height: 1; }

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

}

@media screen and (max-width: 640px) {
    /* 공통*/
    #c4_wrap {padding:50px 0;}
    #c4_wrap .c_inner {width: 100%; padding: 0 30px; }
    #c4_wrap .c_title h1 {font-size:32px;}

    #c4_wrap .list {margin-top:40px;}
    #c4_wrap .list .cont {flex-direction: column;}
    #c4_wrap .list li .cont .img {width: 100%;overflow: hidden; }
    #c4_wrap .list li .cont .img img {height: auto; width: 100%; left:0%; transform:translateX(-0%);}
    #c4_wrap .list li .cont .txt {width: 100%; text-align: center; }
    #c4_wrap .list li .cont .txt h1::before {margin:0 auto 20px;}

}

@media screen and (max-width: 375px) {
    /* 공통*/
    #c4_wrap .c_inner  {padding: 0 15px; }
    #c4_wrap .c_title h1 {font-size:26px;}

}