/* 공통 */
#c1_wrap { position:relative; z-index: 2; }
#c1_wrap .c_inner { max-width: 1300px; width:100%; margin:0 auto; }
#c1_wrap .c_tit { position:relative; z-index: 1; line-height: 1; text-align: center; }
#c1_wrap .c_tit h1 { font-size: 55px; font-weight: bold; color: #000000; }
#c1_wrap .c_tit h2 { margin-bottom: 23px; font-size: 18.5px; color: #219914; letter-spacing: 3.7px; text-transform: uppercase; }
#c1_wrap .c_btn.plus { position:absolute; right:0; top:10px; border:1px solid #000; width:73px; height: 73px; text-align: center; line-height: 70px; z-index: 3; }
#c1_wrap .c_btn.plus img { transition: all .3s; }
#c1_wrap .c_btn.mob { display: none; margin:30px auto 0; width:100%; height: 45px; line-height: 43px; background:#f7f7f7; color:#333; font-size: 14px; }


/*Content CSS*/
#c1_wrap { padding:100px 0; position: relative; text-align: center; z-index: 1; overflow: hidden; }
#c1_wrap .top { position:relative; }


/* slider */
.c1_slider_wrap { position:relative; width: 100%; margin-top:50px; }
.c1_slider { width: calc(100% + 35px); position: relative; left: -17.5px;}
.c1_slider .slick-track { min-width: 100%; }
.c1_box { margin:0 17.5px; }

.c1_box a { position: relative; background: #fff; text-align: left; outline: none; display: block; width: 100%; height: 500px; border:1px solid #ddd; }
.c1_box a::before { content:''; display: block; width: calc(100% + 2px); height: calc(100% + 2px); position: absolute; left: -1px; top:-1px; border:4px solid #219914; opacity: 0; transition: all .3s ease; z-index: 2; }


.c1_box a .img { width: 100%; }
.c1_box a .img img { width:100%; }

.c1_box a .txt { position:relative; width: 100%; height:250px; transition: all .3s ease; display: flex; justify-content: center; flex-direction: column; background-color: #fff; padding:0 20px 0 40px; }
.c1_box a .txt i { position:absolute; right:0; top:-37px; width:73px; height: 73px; background:#cdcdcd; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all .3s; }
.c1_box a .txt h3 {font-size:26px; font-weight: 700; color:#000; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
    width: 100%; transition: color .3s ease; margin-bottom: 25px; }
.c1_box a .txt li { display: flex; margin-bottom: 14px; }
.c1_box a .txt li:last-child { margin-bottom: 0; }
.c1_box a .txt b { display: block; width: 80px; height: 26px; line-height: 24px; text-align: center;  font-size: 15.5px; font-weight: 300; letter-spacing: -0.78px; color: #fff;  background-color: #cdcdcd; transition: all .3s; }
.c1_box a .txt p { width: calc(100% - 80px); padding-left: 15px; font-size:15.5px; letter-spacing: -0.78px; font-weight: 300; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; color:#333; word-break:keep-all; }




/* c1_controller */
.c1_controller {display: flex; align-items: center; margin-top:55px;}
.c1_controller .progress_bar { width: 1180px; height: 2px; background: #f4f4f4; margin-right: 40px; position: relative;}
.c1_controller .progress_bar span { position:absolute; top:0; left:0; height:2px; background:#219914; transition:all .3s ease; display: block;}
.c1_controller .num { font-size:17px; font-weight: 400; color:#000; letter-spacing: 0.85px; }
.c1_controller .num span {color:#000; white-space: nowrap; }
.c1_controller .num span::after {content: '/'; display: inline-block; margin:0 10px;  }
.c1_controller .num b {font-weight: 400; white-space: nowrap; }

/* arrow */
.c1_arrow { position: absolute; width: 100%; height: 0; top:38%; transform:translateY(-50%); display: flex; justify-content: space-between; }
.c1_arrow .slick-arrow { width:30px; height: 57px; cursor: pointer; position: absolute; transition: all .3s;  }
.c1_arrow .c1_prev { left:-110px; background:url('../img/btn_prev.png') no-repeat center; }
.c1_arrow .c1_next { right:-110px; background:url('../img/btn_next.png') no-repeat center;}



/* hover animation */
@media screen and (min-width:1024px) {
    #c1_wrap .c_btn.plus:hover img { transform: rotate(90deg); }

    .c1_box a:hover::before {opacity: 1; }
    .c1_box a:hover .txt i { background:#219914; }
    .c1_box a:hover .txt b { background-color: #219914; }

}


/* 반응형 */
@media screen and (max-width:1550px) {
    .c1_arrow .c1_prev { left: -50px; }
    .c1_arrow .c1_next { right: -50px; }
}

@media screen and (max-width:1420px) {
    /* 공통 */
    #c1_wrap .c_inner { max-width: 1420px; padding:0 60px; }
    #c1_wrap .c_btn.plus { right: 60px; }

    /* c1 */
    .c1_box a { height: auto; }
    .c1_box a .txt { height: auto; padding:40px 20px; }

    .c1_arrow .slick-arrow { width: 25px; height: 40px; background-size: contain; }
    .c1_arrow .c1_prev { left: -40px; }
    .c1_arrow .c1_next { right: -40px; }

    .c1_controller .progress_bar { width: calc(100% - 120px);}

}
@media screen and (max-width:1023px) {
    /* 공통 */
    #c1_wrap .c_inner { padding:0 40px; }
    #c1_wrap .c_tit h2 { font-size: 17px; }
    #c1_wrap .c_tit h1 { font-size: 40px; }
    #c1_wrap .c_btn.plus { width: 60px; height: 60px; line-height: 55px; right: 40px; }

    /* c1 */
    #c1_wrap { padding: 80px 0; }

    .c1_arrow { top: 94%; }
    .c1_arrow .c1_prev { left: 0; }
    .c1_arrow .c1_next { right: 0; }

    .c1_box a .txt i { width: 60px; height: 60px; top:-28px; }
    .c1_box a .txt h3 { font-size: 23px; }

    .c1_controller { justify-content: center; }
    .c1_controller .progress_bar { display: none; }

}
@media screen and (max-width:767px) {
    /* 공통 */
    #c1_wrap .c_inner { padding:0 20px; }
    #c1_wrap .c_tit h1 { font-size: 33px; }
    #c1_wrap .c_tit h2 { font-size: 14px; margin-bottom: 20px; }
    #c1_wrap .c_btn.plus { display: none; }
    #c1_wrap .c_btn.mob { display: block; }

    /* c1 */
    #c1_wrap { padding: 60px 0; }

    .c1_slider_wrap { margin-top: 40px; }
    .c1_controller { margin-top: 30px; }
    .c1_controller .num { font-size: 14px;}
    .c1_arrow { top:95%; }
    .c1_arrow .slick-arrow { width: 20px; height: 25px; }

    .c1_box a .txt i { width: 45px; height: 45px; top:-25px; }
    .c1_box a .txt { padding:20px; }
    .c1_box a .txt h3 { font-size: 20px; margin-bottom: 18px; z-index: 3; }
    .c1_box a .txt b { width: 70px; font-size: 15px; background-color: #219914; }
    .c1_box a .txt p { width: calc(100% - 70px); padding-left: 10px; }

}