/* 공통 */
#c1_wrap .c_inner {width: 1300px; margin:0 auto; position: relative;}
#c1_wrap .c_title {text-align: center;}
#c1_wrap .c_title h2 {font-size:14px; font-weight: 400; color:#0867ae; letter-spacing: 7px; font-family: 'Montserrat'; margin-bottom: 20px; text-transform: uppercase;}
#c1_wrap .c_title h1 {font-size:55px; font-weight: 800; color:#333; font-family: 'NanumSquare',sans-serif; }


/*Content CSS*/
#c1_wrap {background: #fff;position: relative;z-index: 1;}
#c1_wrap .main_typo {position: absolute;top: 35%;left: 50%;transform: translateX(-50%);}
/* slider */
#c1_slider {width: 100%;}
.c1_slide {outline: none;transition: 0;}
#c1_slider li {height: 60vh;position: relative;z-index: 1;position:relative;background: url('../img/main1.jpg?v=211112') 50% 50% no-repeat;background-size:cover;width: inherit;width: 1300px;}
#c1_slider li.img01 { background-image:url('../img/main1.jpg?v=211112');}
#c1_slider li.img02 { background-image:url('../img/main2.jpg?v=211112');}
#c1_slider li.img03 { background-image:url('../img/main3.jpg?v=211112');}
.c1_img {}
.c1_img > div {position: absolute; left:0; top:0; z-index: -1; }
.c1_img h2 {font-size:18px; font-weight: 800; color:rgba(255,255,255,.3); margin-bottom: 20px; font-family: 'NanumSquare',sans-serif;}
.c1_img h1 {font-size:36px; font-weight: 800; color:#fff; font-family: 'NanumSquare',sans-serif;}
.c1_img > div .cover {content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.7); position: absolute; left:0; top:0; transition: all .3s ease;
opacity: 1;}
.c1_slide.slick-current {}
/* .c1_slide.slick-active .c1_img > div::before {opacity: 0;} */

.c1_txt {width: 800px; height: 250px; background: #fff; padding:70px 0 0 55px; position: relative; z-index: 3; margin-top:-185px;}
.c1_txt::before {content: ''; display: block; width: 1px; height: 98px; background: #0768af; position: absolute; left:60px; top:-80px;}
.c1_txt h1 {font-size:24px; font-weight: 800; color:#333;font-family: 'NanumSquare',sans-serif;  }
.c1_txt p {font-size:15px; font-weight: 300; line-height: 30px; color: #666; margin:30px 0 0;}
.c1_txt a {display: flex; width: 101px; height: 101px; background: #333; transition: all .3s ease; justify-content: center; align-items: center; position: absolute;
top:-30px; right: -30px; }
.c1_txt a img {transition: all .3s ease;}
.c1_txt a:hover {background: #0768af;}
.c1_txt a:hover img {transform: rotate(90deg);}

/* c1_arrow */
#c1_arrow {position: absolute; top:475px; width:1300px; display: flex; justify-content: space-between; left:50%; transform:translateX(-50%);  height: 0;}
#c1_arrow button {border:0; box-shadow: none; font-size:0; width: 30px; height: 57px;  cursor: pointer; outline: none;}
#c1_arrow .slick-prev {background: url('../img/c1_prev.png') 50% 50% no-repeat;}
#c1_arrow .slick-next {background: url('../img/c1_next.png') 50% 50% no-repeat;}

/* c1_dots */
#c1_dots {position: absolute; left:50%; transform:translateX(-50%); bottom: 110px; width: 1100px; padding-left:55px;}
#c1_dots ul {display: flex; }
#c1_dots ul li {width: 50px; height: 5px; margin-right: 15px;}
#c1_dots ul li:last-child {margin-right: 0;}
#c1_dots ul li button {border:0; box-shadow: none; font-size:0; background: #e0e5e9; transition: all .3s ease; width: 100%; height: 100%; outline: none;}
#c1_dots ul li.slick-active button {background: #0768af;}

/* bg ptn */
.c1_ptn_wr {position: absolute;  height: 0; top:0; left:50%; transform:translateX(-50%); z-index: -1; width: 1300px;}
.c1_ptn_wr > img {position: absolute; z-index: -1;}
.c1_ptn1 {top:95px; left:-135px;}
.c1_ptn2 {top:95px; right:-135px;}


#c1_wrap .controller {position: absolute;top: 41%;transform: translatex(-50%);width: 1500px;left: 50%;display: flex;justify-content: space-between;}
#c1_wrap .controller > div {cursor: pointer;position: relative;}
#c1_wrap .controller > div::before {content: '';position: absolute;top: -5px;width: 36px;height: 36px;background: #e9502e;border-radius: 50%;z-index: -1;}
#c1_wrap .controller > #m_prev::before {left: -15px;}
#c1_wrap .controller > #m_next::before{right: -15px;}
#vis_controller {position: absolute;left:50%;transform:translateX(-50%);bottom: 30px;display: flex;justify-content: center;width: 1300px;align-items:center;z-index: 3;padding:0 20px;}
#vis_dots .slick-dots { display: flex; }
#vis_dots .slick-dots li {}
#vis_dots .slick-dots li + li {margin-left: 15px;}
#vis_dots .slick-dots button {border:0px;background: transparent;font-size: 18px;font-weight: 600;font-family: 'Montserrat';color: rgba(255, 255, 255, 0.5);outline: none;overflow:hidden;}

#vis_dots .slick-dots button::before {content: '';display: inline-block;width: 0px;height: 1px;background: #fff;margin: 0 5px;position: relative;top: -5px;opacity: 0.5;display: none;}
/* #vis_dots .slick-dots button::after {content: ''; display: inline-block;width: 0px; height: 1px; background: #000;margin: 0 10px; position: relative; top: -27px;} */
#vis_dots .slick-dots button::after {content: ''; display: inline-block;width: 0px; height: 0px; background: #000;margin: 0 5px; position: relative; top: -27px;}
#vis_dots .slick-active button {color:#fff; }
#vis_dots .slick-dots li.slick-active button {color:#fff;/* width:310px; */transition: all .4s ease;}
#vis_dots .slick-dots li.slick-active button::before {width: 270px; margin:0px 5px 0px 10px;}
/* #vis_dots .slick-dots li.slick-active button::after {width: 100px;margin:0 10px; right: 96px;z-index: 1; transition: all .1s ease;} */

#redbar {width:1px; height:1px; opacity: 1; background: #FFF; position:absolute;  z-index:10;  transition-property: width; transition-duration: 3000ms; transition-timing-function: ease;}
#redbar.redbar_active{width:280px; height:1px; opacity: 1; background: #FFF; transition-property: width; transition-duration: 3000ms; transition-timing-function: ease;}
#redbar.redbar_remove{width:0px; height:1px; opacity: 1; background: #FFF; transition-property: width; transition-duration: .1s; transition-timing-function: ease;}


@media screen and (max-width:1200px) {

}

@media screen and (max-width: 960px) {

}

@media screen and (max-width: 640px) {

}
