#c3_wrap { position:relative; overflow: hidden; text-align: center; padding:150px 0; background-color: #f7f7f7; }

/* top */
#c3_wrap .top { position:relative; }
#c3_wrap .top h1 { position:absolute; left:50%; transform: translateX(-50%); top:-15px; font-size:48px; color:#212122; font-family: 'S-CoreDream-7ExtraBold'; line-height: 1; }

/* arrow */
#c3_wrap .c3_contr { display: flex; justify-content: space-between; }
.slick-arrow { cursor: pointer; font-size: 16px; font-family: 'Karla', sans-serif; color: #000; }
.slick-arrow img { display: inline-block; }
.c3_prev img { margin-right: 15px; }
.c3_next img { margin-left: 15px; }

/* dots */
#c3_wrap .c3_contr .right { display: flex; align-items: center; }
#c3_wrap .slick-dots { display: flex; font-size:0; margin-right: 35px; }
#c3_wrap .slick-dots li ~ li { margin-left: 20px; }
#c3_wrap .slick-dots button { width:10px; height: 10px; background:rgba(0,0,0,0.1); transition: all .2s; }
#c3_wrap .slick-dots .slick-active button { background:#009bdd; }


/* btn */
.c3_btn { position:absolute; left:0; top:55%; transform: translateY(-50%); width:60px; height: 340px; background-color: #222; writing-mode: vertical-rl; text-orientation: mixed; color:#fff; display:flex; align-items: center; justify-content: center; font-size:16px; transition: all .3s; font-family: 'S-CoreDream-3Light'; }
.c3_btn img { display: inline-block; position:relative; margin-top: 15px; left:-2px; }
.c3_btn:hover { background:#009bdd; }


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

.c3_box a { outline: none; display: block; position: relative; width: 100%; height: 340px; z-index: 1; overflow: hidden; background:#000; }
.c3_box a .img { overflow: hidden; position:absolute; z-index: 1; left:0; width:100%; top:0; height: 100%; }
.c3_box a .img img { width:100%; height: 100%; }

.c3_box .cover { position:absolute; left:0; width:100%; top:280px; height: 100%; background:rgba(0,0,0,.8); z-index: 2; transition: all .4s; padding:17px 40px 0; }
.c3_box .cover h2 { width:100%; font-size: 18px; text-align: center; color: #fff; font-family: 'S-CoreDream-4Regular'; z-index: 2; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: all .4s; }
.c3_box .cover span { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.34); letter-spacing: 2.8px; line-height: 1; margin:13px 0 0; text-transform: uppercase; font-family: 'Karla', sans-serif; opacity: 0; transition: all .4s; }
.c3_box .cover .arrow { position:absolute; right:0; top:0; width:70px; height:70px; background:url('../img/c1_arrow.png') no-repeat center / 23px auto #fff; opacity: 0; transition: all .4s; }


/* hover */
.c3_box a:hover .cover { top:0; padding-top:145px; }
.c3_box a:hover .cover h2 { font-size: 24px; font-family: 'S-CoreDream-5Medium'; }
.c3_box a:hover .cover .arrow { opacity: 1; }
.c3_box a:hover .cover span { display: block; opacity: 1; }