/* 공통 */
#c3_wrap .c_inner { width: 100%; max-width: 1420px; margin:0 auto; position: relative; padding:0 60px;}
#c3_wrap .c_tit h1 {font-size: 60px; font-weight: 700; color:#000; font-family: 'Play', sans-serif;}
#c3_wrap .c_tit p {font-size: 20px; font-weight: 300; color:#000; line-height: 35px; margin:35px 0 0;}
#c3_wrap .c_btn {display: flex; align-items: center;}
#c3_wrap .c_btn span {display: block; font-size: 18px; font-weight: 400; color:#000; font-family: 'Play', sans-serif; margin-right: 12px; transition: color .3s;}
#c3_wrap .c_btn i {display: block; position: relative; left: 0; }
#c3_wrap .c_btn:hover i {animation: btn_arrow 1s ease-in-out infinite;}
#c3_wrap .c_btn:hover span {color:#53b1d4; }
@keyframes btn_arrow {
    0% {left: 1px;}
    50% {left: -5px;}
    100% {left: 1px;}
}

/*Content CSS*/
#c3_wrap {padding: 100px 0;}
#c3_wrap .title {display: flex ; align-items: center; justify-content: space-between; }
#c3_wrap .title .c_tit {display: flex; align-items: center; }
#c3_wrap .title .c_tit p {margin:0 0 0 55px; padding: 15px 0 0;}
#c3_wrap .title .right {display: flex; align-items: center; }

#c3_wrap .swiper {position: relative; margin-top:45px; }
#c3_wrap .swiper-slide {transition: all .5s ease; opacity: 0; pointer-events: none; }
#c3_wrap .swiper .swiper-slide-active,
#c3_wrap .swiper .swiper-slide-next,
#c3_wrap .swiper .swiper-slide-next + .swiper-slide {opacity: 1; pointer-events: auto;}

#c3_wrap .slide a {position: relative; overflow: hidden; display: block; z-index: 1; background: #000; }
#c3_wrap .slide a img {width: 100%; transition: all .3s;}
#c3_wrap .slide a::before {content: ''; position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; z-index: 1;  mix-blend-mode: multiply;
background-image: linear-gradient(to top, rgba(0,0,0,.8), rgba(255,255,255,.8)); }
#c3_wrap .slide a .txt {position: absolute; left: 0; bottom: 0; width: 100%; padding: 45px 40px; z-index: 2;}
#c3_wrap .slide a .txt .head {font-size: 18px; font-weight: 400; color:#fff; display: block; font-family: 'Play', sans-serif; }
#c3_wrap .slide a .txt h3 {font-size: 25px; font-weight: 700; color:#fff; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
margin:30px 0 15px; line-height: 1;}
#c3_wrap .slide a .txt p {font-size: 18px; font-weight: 300; color:#fff; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 1;}
#c3_wrap .slide a .txt .date {display: block; font-size: 14px; font-weight: 300; color:#e2e2e2; margin-top: 40px; }
#c3_wrap .slide a .txt .date i {margin-right: 8px; }
/* hover */
#c3_wrap .slide a:hover img {transform: scale(1.1);}


/* arrow */
#c3_wrap .arrow_wr {display: flex; align-items: center; flex-direction: column; position: absolute; left: -130px; top: 50%;  transform: translateY(-50%);
 z-index: 3;}
#c3_wrap .arrow {display: block;width: 50px; height: 50px; border-radius: 50%; transition: all .3s; border:1px solid rgba(153, 153, 153, 0.7);
background:url("../img/prev.png") 50% 50% no-repeat; cursor: pointer; }
#c3_wrap .next {margin-top: 12px; }
#c3_wrap .next .arrow {background-image:url("../img/next.png"); }
#c3_wrap .arrow_wr > div {display: flex; align-items: center; cursor: pointer;}
#c3_wrap .arrow_wr > div:nth-child(2) {flex-direction: row-reverse;}
#c3_wrap .arrow_wr > div:hover .arrow {background-color: #f0f0f0; }

/* dots */
#c3_wrap .dots {display: flex; margin-right: 45px;}
#c3_wrap .dots.pc {display: flex;}
#c3_wrap .dots.mob {display: none;}
#c3_wrap .dots > span {cursor: pointer; display: block; width: 10px; height: 10px; background: #ddd; opacity: 1; margin:0 15px 0 0; transition:all .3s ease;
border-radius: 50%; }
#c3_wrap .dots > span:last-child {margin: 0;}
#c3_wrap .dots > span.swiper-pagination-bullet-active {background-color: #333; border-radius: 5px; width: 30px; }



@media screen and (max-width: 1420px) {
    /* 공통 */
    #c3_wrap .c_inner {padding: 0 50px;}

    /* content */
    #c3_wrap .title .c_tit p { margin: 0 0 0 35px;}

}

@media screen and (max-width: 1024px) {
    /* 공통 */
    #c3_wrap {padding:90px 0; }
    #c3_wrap .c_inner { padding: 0 30px; }
    #c3_wrap .c_tit h1 {font-size: 45px; }
    #c3_wrap .c_tit p {font-size: 16px; line-height: 28px; margin: 15px 0 0;}
    #c3_wrap .c_btn span {font-size: 15px;}
    #c3_wrap .c_btn i img {height: 40px; }

    /* content */
    #c3_wrap .title {flex-direction: column; text-align: center; }
    #c3_wrap .title .c_tit {flex-direction: column; }
    #c3_wrap .title .c_tit p {padding: 0; margin:15px 0 0;}
    #c3_wrap .c_btn {margin: 20px 0 0;}

    #c3_wrap .swiper {margin-top:35px; }
    #c3_wrap .swiper .swiper-slide-next + .swiper-slide {opacity: 0; pointer-events: none;}
    #c3_wrap .slide a .txt .head {font-size: 14px; }
    #c3_wrap .slide a .txt h3 {font-size: 18px; letter-spacing: -.5px; margin:15px 0 15px;}
    #c3_wrap .slide a .txt p {font-size: 14px; letter-spacing: -.5px; }
    #c3_wrap .slide a .txt .date {font-size: 12px; margin-top: 20px;}
    #c3_wrap .slide a .txt {padding: 30px 25px; }


    #c3_wrap .arrow_wr {display: none;}
    #c3_wrap .dots.pc {display: none;}
    #c3_wrap .dots.mob {display: flex;}
    #c3_wrap .dots {margin:50px 0 0; justify-content: center; }




}

@media screen and (max-width: 640px) {
    /* 공통*/
    #c3_wrap {padding:60px 0; }
    #c3_wrap .c_inner { padding: 0 15px; }
    #c3_wrap .c_tit h1 {font-size: 35px; }
    #c3_wrap .c_tit p {font-size: 14px; line-height: 24px; margin: 15px 0 0; letter-spacing: -.5px ;}
    #c3_wrap .c_btn span {font-size: 14px;}
    #c3_wrap .c_btn i img {height: 30px; }

    /* content */
    #c3_wrap .slide a .txt .head {font-size: 13px; }
    #c3_wrap .slide a .txt h3 {font-size: 16px;  }
    #c3_wrap .slide a .txt p {font-size: 13px;  }
    #c3_wrap .slide a .txt .date {font-size: 11px; margin-top: 15px;}

    #c3_wrap .dots {margin:40px 0 0; justify-content: center; }



}

@media screen and (max-width: 480px) {
    /* 공통*/

    /* content */
    #c3_wrap .arrow_wr {display: none;}
    #c3_wrap .swiper-slide h3 {font-size: 18px;}

}