/*Content CSS*/
#c3_wrap {position: relative; overflow: hidden; width: 100%; background-color: #f8f9fa; z-index: 1;}
#c3_wrap::before {content: ""; position: absolute; width: 100%; height: 100%; background: url('../img/c3_bg_r.png') right top no-repeat; top: 0; right: 0; z-index: -1;}
#c3_wrap::after {content: ""; position: absolute; width: 100%; height: 100%; background: url('../img/c3_bg_l.png') left bottom no-repeat; top: 0; right: 0; z-index: -1;}
#c3_wrap > article {padding: 124px 0 75px; }
#c3_wrap .c_inner {width: 100%; max-width: 1600px; padding: 0 50px; margin: 0 auto; display: flex; overflow: hidden;}

/* font size */
#c3_wrap .fs_60 {font-size: 60px; line-height: 1; font-weight: 700;}
#c3_wrap .fs_42 {font-size: 42px; line-height: 1.43; letter-spacing: -1.05px; font-weight: 300;}
#c3_wrap .fs_37 {font-size: 37px; line-height: 1.59; letter-spacing: -.93px; font-weight: 300;}
#c3_wrap .fs_25 {font-size: 25px; letter-spacing: -0.63px; color: #fff; font-weight: 500;}
#c3_wrap .fs_22 {font-size: 22px; line-height: 1.2; color: #002446; font-weight: 700;}
#c3_wrap .fs_20 {font-size: 20px; line-height: 1.7; font-weight: 300;}
#c3_wrap .fs_16 {font-size: 16px; line-height: 1.76; letter-spacing: -.32px; font-weight: 500;}

/* flex */
#c3_wrap .left {width: 40%; flex-shrink: 0; padding-top: 30px; z-index: 2;}
#c3_wrap .left .txt {margin-bottom: 70px;}
#c3_wrap .left .txt p:nth-of-type(1) {margin-bottom: 10px;}
#c3_wrap .left .txt h3 {margin-bottom: 31px;}
#c3_wrap .left .line_tit {position: relative; display: inline-block; margin-bottom: 17px;}
#c3_wrap .left .line_tit::before {content: ""; position: absolute; top: -20px; left: 0; width: 34px; height: 5px; background-image: linear-gradient(to right, #4876d5 50%, #002446 50%);}

/* vm_btn */
#c3_wrap .vm_btn a {overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 22px; width: 200px; height: 50px; border: solid 1px #222; border-radius: 25px; position: relative; z-index: 2; transition: .3s; background-color: #fff;}
#c3_wrap .vm_btn a::before {content: ''; display: block; width: 13px; height: 13px; border-radius: 25px; background-color: #002446; position: absolute; top: 50%; transform: translateY(-50%); right: 22px; z-index: -1; transition: .6s;}
#c3_wrap .vm_btn a span {transition: .6s;}

#c3_wrap .vm_btn :hover{border-color:#002446;}
#c3_wrap .vm_btn a:hover::before{transform: scale(50);}
#c3_wrap .vm_btn a:hover span{color: #fff;}

/* tab_list */
#c3_wrap .tab_list li + li {margin-top: 15px;}
#c3_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;}
#c3_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;}
#c3_wrap .tab_list li a:hover,
#c3_wrap .tab_list li a.active {color: #1b1b7f;}
#c3_wrap .tab_list li a:hover::before,
#c3_wrap .tab_list li a.active::before {background-image: url('../img/c1_arrow_hv.png');}

/* slider_wrap */
#c3_wrap .slider_wrap {width: calc(60% - 13px); height: 535px; position: relative; z-index: 1;}
#c3_wrap .tab_slider {display: none;}
#c3_wrap .tab_slider.first {display: block;}

#c3_wrap .tab_slider .swiper-slide {padding: 50px 52px; height: 415px; border: 1px solid #222; background-color: #fff; border-radius: 20px; transition-property: opacity, transform; transition: all .3s ease; opacity: 0; pointer-events: none; transform-origin: top right;}

#c3_wrap .slide a {display: block;}
#c3_wrap .slide .txt {margin: 12px 0 0; transition:  border-color .3s ease;}
#c3_wrap .slide h3 {position: relative; font-size: 25px; font-weight: 700; color:#000; line-height: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
padding-right: 30px;}
#c3_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;}
#c3_wrap .slide p {font-size: 19px; font-weight: 300; color:#000; margin:23px 0 0; line-height: 1.68; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#c3_wrap .slide .txt p {min-height: 116px;}
#c3_wrap .slide .img img {width: 100%;}

#c3_wrap .slide .menu {font-size: 22px; line-height: 1.82; font-weight: 700; color: #002446;}
#c3_wrap .slide .time {display: flex; align-items: center; gap: 6px; margin-top: 43px; border-top: 1px solid #222;}
#c3_wrap .slide .time p {font-size: 16px; font-weight: 500; line-height: 1.5; color: #666;}
#c3_wrap .slide .time i {color: #002446; font-size: 17px; position: relative; top: 10px; font-weight: 600;}

#c3_wrap .tab_slider .swiper-wrapper{overflow:visible;}
#c3_wrap .tab_slider .swiper-slide-active,
#c3_wrap .tab_slider .swiper-slide-next {opacity: 1; pointer-events: auto;}
#c3_wrap .tab_slider .swiper-slide-next + .swiper-slide {opacity: .5;}

#c3_wrap .tab_slider .swiper-slide-next {margin-top: 110px;}
/* @media screen and (min-width: 1401px) {
    #c3_wrap .tab_slider .swiper-slide {transform: scale(.88);}
    #c3_wrap .tab_slider .swiper-slide-active {transform: scale(1);}
} */

/* arrow */
#c3_wrap .arrows {position:absolute; right: 0; top: 15px; z-index: 10; display: flex; justify-content: flex-end; gap: 13px;}
#c3_wrap .arrows > div {cursor: pointer; border:1px solid #222; background-color: #fff; outline: none;  font-size:0; width: 50px; height: 50px; display: block; border-radius: 3px;
transition: all .3s;}
/* #c3_wrap .arrows > div:hover {background-color: #1b1b7f; border-color: #1b1b7f;} */
#c3_wrap .arrows .prev {background:url('../img/c3_prev.png') no-repeat center #fff;}
#c3_wrap .arrows .next {background:url('../img/c3_next.png') no-repeat center #fff;}
#c3_wrap .arrows .prev:hover{background: #002446 url('../img/c3_prev_w.png')no-repeat center;}
#c3_wrap .arrows .next:hover{background: #002446 url('../img/c3_next_w.png')no-repeat center;}

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

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

#c3_wrap .slide a:hover h3::after {background-image:url("../img/c1_plus_hv.png"); transform: rotate(90deg);}
#c3_wrap .slide a:hover .txt {border-color: #1b1b7f;}
#c3_wrap .slide a:hover .time {border-top: 1px solid #fff;}
#c3_wrap .tab_slider .swiper-slide:hover {background-color: #002446;}
#c3_wrap .tab_slider .swiper-slide:hover h3,
#c3_wrap .tab_slider .swiper-slide:hover p,
#c3_wrap .tab_slider .swiper-slide:hover time
 {color: #fff;}
#c3_wrap .tab_slider .swiper-slide:hover .time i,
#c3_wrap .tab_slider .swiper-slide:hover .menu {color: #68a2e9;}
