/*Content CSS*/
#c4_wrap {height:100vh; min-height:720px; overflow: hidden; position: relative;}
#c4_wrap::after {content: ''; display: block ;width:1px; height: 100%; background: #ddd; position: absolute; right: 100px;bottom:0;}
#c4_wrap .c_inner { max-width: 1400px; width: 100%; margin:0 auto; position: relative; padding:0 50px;}
#c4_wrap .c_title::after {content: '.'; color:#2fc4ef; }
#c4_wrap .c_btn {display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; color:#808080; font-family: 'Play', sans-serif; transition: color .3s;}
#c4_wrap .c_btn .cir {width: 66px; height: 66px; border-radius: 50%; background-color: rgba(128,128,128,.21); display: flex; align-items: center; justify-content: center;
position: relative; margin-left: 17px; transition: background-color .3s;}
#c4_wrap .c_btn .cir::before {content: ''; display: block; width: calc(100% - 26px); height: calc(100% - 26px); position: absolute; left: 13px; top: 13px;
border-radius: 50%; background-color: #a5a5a5; transition: background-color .3s;}
#c4_wrap .c_btn .cir i {display: block; width: 9px; height: 14px; background:url("../img/brn_arrow.png") 50%/contain no-repeat; position: relative; z-index: 2;}
#c4_wrap .c_btn:hover {color:#000; }
#c4_wrap .c_btn:hover .cir {background-color: rgba(47,196,239,.21);}
#c4_wrap .c_btn:hover .cir::before {background-color:#2fc4ef;}

/* fs */
#c4_wrap .fs_70 {font-size: 70px; font-weight: 700; color:#000; font-family: 'Play', sans-serif;}
#c4_wrap .fs_20 {font-size: 20px; font-weight: 300; color:#000; line-height: 1.9; }

/* Content */
#c4_wrap {display: flex;  align-items: center; justify-content: center; z-index: 1; padding-top: 100px;}
#c4_wrap .line {display:flex; justify-content: space-between; height: 100%; width: 990px; position: absolute; top:0; left: 50%;  transform: translateX(-50%); z-index: -1;}
#c4_wrap .line > span {width: 1px; height: 100%; background-color: #ddd; }
#c4_wrap .top {display: flex; justify-content: space-between; align-items: center; }

#c4_wrap .mob {display: none;}

/* slider */
#c4_wrap .slider {width: 100%; position: relative; width: calc(100% + 20px); left: -10px; margin-top:65px;}
#c4_wrap .slider .slick-track {min-width: 100%; }
#c4_wrap .slide_box {margin: 0 10px;}
#c4_wrap .slide_box.slick-active {overflow: hidden; }
#c4_wrap .slide_box a { background: transparent; text-align: left; outline: none; display: block; min-height:370px; width: 100%; height: 100%;
padding:50px 40px; z-index: 1; position: relative;  background: #f7f7f7; transition: background-color .3s;}
#c4_wrap .slide_box a::before {content: ''; display: block; position: absolute; left: 0; top:0; transition: opacity .3s; width: 100%; height: 100%; border:4px solid #2fc4ef;
opacity: 0;}
#c4_wrap .slide_box h2 {font-size:16px; color:#0d374e; line-height: 1.1; white-space: nowrap; font-weight: 700; font-family: 'Play', sans-serif; text-transform: uppercase;
transition: color .3s ease;}
#c4_wrap .slide_box h1 {font-size:20px; font-weight:700; color:#000; line-height:30px; margin:15px 0 25px; min-height: 60px;  font-family: 'Play', 'Pretendard';
text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; }
#c4_wrap .slide_box p {font-size:14px; font-weight: 300; color:#666; line-height: 24px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; display: -webkit-box; min-height: 72px;  transition: color .3s ease; letter-spacing: -.14px; }
#c4_wrap .slide_box .date {font-size: 16px; font-weight: 400; color:#666; transition: color .3s ease; display: block; margin-top: 40px; line-height:1.1;
font-family: 'Play', sans-serif; }
#c4_wrap .slide_box .date i {margin-right: 10px; transition: color .3s; color:#2fc4ef; font-size: 18px; position: relative; top:3px;}
/* hover */
#c4_wrap .slide_box a:hover {background-color: #fff;}
#c4_wrap .slide_box a:hover::before {opacity: 1; }
#c4_wrap .slide_box a:hover h2 {color:#2fc4ef; }

/* arrow */
#c4_wrap .slider .slick-arrow {border:0; background: transparent; outline: none; top:37%; transform: translateY(-50%); font-size:0; width: 30px; height: 57px;  position:absolute;}
#c4_wrap .slider .slick-next { right:-100px; background:url('../img/next.png') no-repeat center;}
#c4_wrap .slider .slick-prev { left:-100px;  background:url('../img/prev.png') no-repeat center;}

/* dots */
#c4_wrap .slick-dots {display: flex; justify-content: center; margin-top: 70px;}
#c4_wrap .slick-dots li {margin-right:17px;}
#c4_wrap .slick-dots li:last-child {margin-right: 0;}
#c4_wrap .slick-dots button {font-size: 0; width: 15px; height: 15px; background: #c9c9c9; border-radius: 50%; transition: all .3s; }
#c4_wrap .slick-dots .slick-active button {background-color: #2fc4ef; width: 35px; border-radius: 7.5px;}


@media screen and (max-width: 1760px) {
    #c4_wrap .slider .slick-next {right: calc(-30px + -1%);}
    #c4_wrap .slider .slick-prev {left: calc(-30px + -1%);}

}

@media screen and (max-width: 1600px) {
    #c4_wrap .c_inner { padding:0 120px 0 50px;}
}

@media screen and (max-width:1400px) {
    /* #c4_wrap .c_inner {padding: 0 150px 0 50px; } */

    /* content */
    #c4_wrap .slider .slick-arrow { transform: none; top:auto; bottom: 0; height: 30px; }
    #c4_wrap .slider .slick-next {right: 13px;}
    #c4_wrap .slider .slick-prev {left: 13px;}
    #c4_wrap .slick-dots {justify-content: center;}

}

@media screen and (max-width:1279px) {
    /* common */
    #c4_wrap {min-height: 0; height: auto; padding:90px 0;}
    #c4_wrap::after {display: none; }
    #c4_wrap .c_inner {padding: 0 50px; }

    /* content */
    #c4_wrap .line {display: none; }

}

@media screen and (max-width: 1024px) {
    /* 공통 */
    #c4_wrap  {padding: 60px 0 ; text-align: center;}
    #c4_wrap .c_inner {padding: 0 30px;}
    #c4_wrap .c_btn {color:#000;}
    #c4_wrap .c_btn .cir {background-color: rgba(47,196,239,.21);}
    #c4_wrap .c_btn .cir::before {background-color:#2fc4ef;}

    /* fs */
    #c4_wrap .fs_70 {font-size: 45px;}
    #c4_wrap .fs_20 {font-size: 18px; line-height: 1.65; }

    /* content */
    #c4_wrap .pc {display: none;}
    #c4_wrap .mob {display: inline-flex; }
    #c4_wrap {padding: 60px 0;}
    #c4_wrap .top {flex-direction: column; align-items: center; }

    #c4_wrap .slider {margin-top: 40px; padding-bottom: 0;}
    #c4_wrap .slide_box a {min-height: auto; padding:30px; }
    #c4_wrap .slide_box h1 {margin: 20px 0; }

    #c4_wrap .slick-dots {margin-top: 50px;}
    #c4_wrap .slick-dots button {width: 12px; height: 12px; }

    #c4_wrap .slider .slick-arrow {bottom: -90px; }
    #c4_wrap .c_btn { margin:40px 0 0;}



}


@media screen and (max-width: 640px) {
    /* 공통*/
    #c4_wrap  {padding:50px 0 ;}
    #c4_wrap .c_inner {padding: 0 20px;}
    #c4_wrap .c_btn {font-size: 14px;}
    #c4_wrap .c_btn .cir {width: 50px; height: 50px; margin-left: 10px;}
    #c4_wrap .c_btn .cir::before {  width: calc(100% - 18px); height: calc(100% - 18px); top:9px; left: 9px;}
    #c4_wrap .c_btn .cir i {height: 12px;}
    /* fs */
    #c4_wrap .fs_70 {font-size: 35px;}
    #c4_wrap .fs_20 {font-size: 16px;}

    /* content */
    #c4_wrap {padding: 50px 0;}
    #c4_wrap .slider {width: calc(100% + 10px);  left: -5px;}
    #c4_wrap .slide_box {margin:0 5px;}
    #c4_wrap .slider .slick-arrow {bottom: -80px; height: 25px; }
    #c4_wrap .slider .slick-next {right: 0;}
    #c4_wrap .slider .slick-prev {left: 0;}

    #c4_wrap .slide_box h2 {font-size: 14px;}
    #c4_wrap .slide_box h1 {font-size: 16px;  margin:15px 0;}
    #c4_wrap .slide_box p {font-size: 13px; line-height: 22px; min-height: 66px;}
    #c4_wrap .slide_box .date {font-size: 13px; margin-top: 30px;}

    #c4_wrap .slick-dots {margin-top: 40px;}



}

@media screen and (max-width: 480px) {
    /* 공통*/
    #c4_wrap .slider {width:100%;  left: -0; margin-top: 30px;}
    #c4_wrap .slider .slick-arrow {bottom: -57px;  }
    #c4_wrap .slide_box {margin:0;}
    #c4_wrap .c_btn {margin:20px 0 0;}
    #c4_wrap .slick-dots {margin-top: 30px;}
    #c4_wrap .slick-dots li,
    #c4_wrap .slick-dots li:last-child {margin: 6px;}
    #c4_wrap .slick-dots button {width: 10px; height: 10px; }
    #c4_wrap .slick-dots .slick-active button {width: 25px;}

}