/* 공통 */
#c1_wrap .c_inner { width: 100%; max-width: 1400px; margin:0 auto; position: relative; padding:0 50px;}
/* btn */
#c1_wrap .c_btn {width: 180px; height: 45px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 14px; padding:0 24px;
font-weight: 300; overflow: hidden; z-index: 1; position: relative; background: #000; pointer-events:auto; }
#c1_wrap .c_btn::before {content: ""; z-index: -1; position: absolute; background: #1b1b7f; transition: all .4s; left: 0; top: 0; width: 0; height: 100%;}

/* font size */
#c1_wrap .fs_62 {font-size: 62px; font-weight: 700; color:#000; line-height: 1; font-family: 'Play', sans-serif;}
#c1_wrap .fs_18 {font-size: 18px; line-height: 1.83; font-weight:300; color:#000;}


/*Content CSS*/
#c1_wrap {overflow: hidden; position: relative; }
#c1_wrap .c_inner {display: flex; align-items: flex-start;  padding:195px 50px 130px;}
#c1_wrap .cont {width: 433px; position: relative; z-index: 2;padding-top: 30px;}
#c1_wrap .cont p {margin: 40px 0 40px;}
#c1_wrap .c_btn {margin:98px 0 0;}

#c1_wrap .tab_list li + li{margin-top: 15px;}
#c1_wrap .tab_list li a {cursor: pointer; font-size: 20px; font-weight: 700; color: #ddd; line-height: 1.2; transition: .3s; display: inline-block; position: relative;
padding-left: 15px; pointer-events:auto;}
#c1_wrap .tab_list li a::before{content: ''; width: 9px; height: 13px; background: url('../img/c1_arrow.png') 50%/contain no-repeat; position: absolute; left: 0;
top: 5px; transition: .3s;}
#c1_wrap .tab_list li a:hover,
#c1_wrap .tab_list li a.active {color: #1b1b7f;}
#c1_wrap .tab_list li a:hover::before,
#c1_wrap .tab_list li a.active::before {background-image: url('../img/c1_arrow_hv.png');}

#c1_wrap .slide a {display: block; }
#c1_wrap .slide .txt {border-bottom: 3px solid #ddd; padding:35px 20px 35px; transition:  border-color .3s ease; }
#c1_wrap .slide h3 {position: relative; font-size: 27px; font-weight: 700; color:#000; line-height: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
padding-right: 30px; }
#c1_wrap .slide h3::after {content:  ''; position: absolute; right: 0; top:0; display: block; width: 25px; height: 25px;
background:url("../img/c1_plus.png") 50% 50% no-repeat; transition:all .3s ease; }
#c1_wrap .slide p {font-size: 18px; font-weight: 300; color:#000; margin:20px 0 0; line-height: 1.4; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#c1_wrap .slide .img img {width: 100%; }

/* slider */
#c1_wrap .slider_wrap {width: calc(100% - 433px);  position: relative; z-index: 1;  }
#c1_wrap .tab_slider {display: none; height: 446px; overflow: visible;}
#c1_wrap .tab_slider.first {display: block;}

#c1_wrap .tab_slider .swiper-slide {transition-property: opacity, transform; transition-duration: .3s, .3s; opacity: 0; pointer-events: none; transform-origin: top right; }
#c1_wrap .tab_slider .swiper-slide-active,
#c1_wrap .tab_slider .swiper-slide-next {opacity: 1; pointer-events: auto;}
#c1_wrap .tab_slider .swiper-slide-next + .swiper-slide {opacity: .5;}

@media screen and (min-width: 1401px) {
    #c1_wrap .tab_slider .swiper-slide {transform: scale(.88);}
    #c1_wrap .tab_slider .swiper-slide-active {transform: scale(1);}
}



/* arrow */
#c1_wrap .arrows {position:absolute; left:-600px; top:27%; z-index: 10;}
#c1_wrap .arrows > div {cursor: pointer; border:1px solid #ddd;  outline: none;  font-size:0; width: 50px; height: 50px; display: block; border-radius: 50%;
transition: all .3s;}
#c1_wrap .arrows > div:hover {background-color: #1b1b7f; border-color: #1b1b7f;}
#c1_wrap .arrows .prev {background:url('../img/prev.png') no-repeat center #fff; }
#c1_wrap .arrows .next {background:url('../img/next.png') no-repeat center #fff; margin-top: 9px;}
#c1_wrap .arrows .prev:hover {background-image:url('../img/prev_hv.png'); background-color: #000; border-color: #000;}
#c1_wrap .arrows .next:hover {background-image:url('../img/next_hv.png'); background-color: #000; border-color: #000;}


/* dots */
#c1_wrap .dots {position: absolute; left: 80px; top:210px; z-index: 2;}
#c1_wrap .dots > span {cursor: pointer; display: block; width: 9px; height: 9px; background: #ddd; opacity: 1; margin:0 0 28px; transition: background-color .3s ease;}
#c1_wrap .dots > span:last-child {margin: 0;}
#c1_wrap .dots > span.swiper-pagination-bullet-active {background-color: #1b1b7f; }

/* hover */
#c1_wrap .c_btn:hover {border-color: #1b1b7f; color:#fff; }
#c1_wrap .c_btn:hover::before {width:100%;}

#c1_wrap .slide a:hover h3::after {background-image:url("../img/c1_plus_hv.png"); transform: rotate(90deg);}
#c1_wrap .slide a:hover .txt {border-color: #1b1b7f; }


@media screen and (max-width:1699px) {
    #c1_wrap .cont {pointer-events: none;}
    #c1_wrap .arrows {left: -200px; top:auto; bottom: 0; display: flex;}
    #c1_wrap .arrows > div {transform: rotate(-90deg);}
    #c1_wrap .arrows .next {margin: 0 0 0 9px;}

}

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

    /* content */
    #c1_wrap .cont {width: 380px; padding-top: 0;}

    #c1_wrap .slider_wrap { width: calc(100% - 380px); }
    #c1_wrap .tab_slider .swiper-slide {transform:scale(.9);}
    #c1_wrap .tab_slider .swiper-slide-active {transform:scale(1);}
    #c1_wrap .slide .txt {padding: 25px 15px 25px;}
    #c1_wrap .slide h3 {font-size: 24px; }
    #c1_wrap .arrows {left: -170px; bottom: 15px;}

    #c1_wrap .tab_slider {height: 433px;}

}

@media screen and (max-width: 1024px) {
    /* 공통 */
    /* #c1_wrap {padding:90px 0; } */
    #c1_wrap .c_inner { padding: 0 30px; }
    /* font size */
    #c1_wrap .fs_62 {font-size: 45px;}
    #c1_wrap .fs_18 {font-size: 16px;}

    /* btn */
    #c1_wrap .c_btn { width:100%; text-align: center;  margin: 0 auto; height: 40px; }
    #c1_wrap .c_btn a {justify-content: center; width:100%; height: 40px; text-align: center; font-size: 14px; padding: 0 20px;}

    /* content */
    #c1_wrap {padding:130px 0 70px; }
    #c1_wrap .c_inner {flex-direction: column; align-items: center; text-align: center;}
    #c1_wrap .cont {width: 100%; pointer-events: auto;}
    #c1_wrap .cont p {margin: 20px 0;}
    #c1_wrap .c_btn {  margin: 30px auto 0}
    #c1_wrap .arrows {justify-content: center; position: static; margin: 30px 0 0;}

    #c1_wrap .slider_wrap {width: 100%; margin-top: 40px; overflow: hidden;}
    #c1_wrap .tab_slider {height: auto;}
    #c1_wrap .tab_slider .swiper-slide {transform:scale(1); text-align: left; }
    #c1_wrap .slide .txt {padding: 25px 15px 25px;}
    #c1_wrap .slide h3 {font-size: 22px; }
    #c1_wrap .slide h3::after {width: 22px; height: 22px; }
    #c1_wrap .slide p {font-size: 16px; margin-top: 15px;}

    /* hover */





}

@media screen and (max-width: 640px) {
    /* 공통*/
    #c1_wrap {padding:100px 0 50px;}
    #c1_wrap .c_inner { padding: 0 20px; }
    /* font size */
    #c1_wrap .fs_62 {font-size: 32px;}
    #c1_wrap .fs_18 {font-size: 14px;}


    /* content */
    #c1_wrap .cont p {margin: 15px 0;}
    #c1_wrap .tab_list li a {font-size: 16px; padding-left: 12px; }
    #c1_wrap .tab_list li a::before {width: 7px; top:2px; background-size: contain;}
    #c1_wrap .tab_list li + li {margin-top: 10px;}

    #c1_wrap .slider_wrap {margin-top: 30px;}
    #c1_wrap .arrows {margin:25px 0 0;}
    #c1_wrap .slide h3 {font-size: 17px; padding-right: 20px;}
    #c1_wrap .slide h3::after {width: 17px; height: 17px; }
    #c1_wrap .slide p {font-size: 14px; margin-top: 10px;}
    #c1_wrap .slide .txt {padding: 20px 10px;}


}

@media screen and (max-width: 480px) {
    /* 공통*/
    #c1_wrap .slide .txt {padding: 15px 5px;}


}