/* 공통 */
#c1_wrap .c_inner { padding: 0 20px; margin: 0 auto; max-width: 1560px; width: 100%; }
#c1_wrap .c_tit h3 {position: relative; font-weight: 700;line-height: 1; width: fit-content; margin: 0px auto;  margin-bottom: 15px; }
#c1_wrap .c_tit h3::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background-color: #1167b3; left: -12px; top:-3px;  position: absolute; }

/* font size */
#c1_wrap .fs_54 {font-size: 23px; font-weight :800; line-height: 1.43;}
#c1_wrap .fs_36 {font-size: 36px; font-weight :700; line-height: 1.39;}
#c1_wrap .fs_34 {font-size: 34px; font-weight:500; line-height: 1.3; }
#c1_wrap .fs_33 {font-size: 33px; font-weight:700; line-height: 1.3;}
#c1_wrap .fs_32 {font-size: 32px; font-weight:700; line-height: 1.3;  }
#c1_wrap .fs_30 {font-size: 30px; font-weight:700; line-height: 1.3;}
#c1_wrap .fs_28 {font-size: 17px; font-weight:700; line-height: 1.3;}
#c1_wrap .fs_27 {font-size: 27px; font-weight:700; line-height: 1.3;}
#c1_wrap .fs_26 {font-size: 26px; font-weight:700; line-height: 1.3;  }
#c1_wrap .fs_25 {font-size: 17px; font-weight:700; line-height: 1.3;  }
#c1_wrap .fs_24 {font-size: 16px; font-weight:700; line-height: 1.4;}
#c1_wrap .fs_23 {font-size: 23px; font-weight:700; line-height: 1.4;}
#c1_wrap .fs_22 {font-size: 22px; font-weight:600; line-height: 1.4; }
#c1_wrap .fs_21 {font-size: 21px; font-weight:600; line-height: 1.67; }
#c1_wrap .fs_20 {font-size: 14px; font-weight:400; line-height: 1.67; }
#c1_wrap .fs_19 {font-size: 19px; font-weight: 400; line-height: 1.67; }
#c1_wrap .fs_18 {font-size: 18px; font-weight: 400;  line-height: 1.83; }
#c1_wrap .fs_17 {font-size: 17px; font-weight: 400; line-height: 1.72; }
#c1_wrap .fs_16 {font-size: 16px; font-weight: 400;  line-height: 1.72; }
#c1_wrap .fs_15 {font-size: 15px; font-weight: 400;  line-height: 1.72; }


/*Content CSS*/
#c1_wrap { padding: 45px 0 50px; position: relative; z-index: 2; overflow: hidden; }

#c1_wrap .top {}
#c1_wrap .top .c_tit {flex-shrink: 0;}
#c1_wrap .top .c_tit span {color:#0e65b2; }
#c1_wrap .top h2 {text-align: center; margin-bottom: 5px;}
#c1_wrap .top p {color:#232323; font-weight: 400; line-height: 1.5; padding-bottom: 5px; text-align: center;}
#c1_wrap .top p br {display: none;}


#c1_wrap .list {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top:17px; }
#c1_wrap .list > li {width:100%; }
#c1_wrap .list > li:nth-child(n+2) {margin-top: 10px;}
#c1_wrap .list .box {display: flex; position: relative; align-items: center; z-index: 1; border-radius: 25px; background-color: #f7f7f7; height: 100%;
padding: 25px; overflow: hidden; padding-right: 32px;}
#c1_wrap .list .box::before {content: ''; display: block; width: 100%; height: 100%; position: absolute;  background-image: linear-gradient(to right, #095eab, #2285de);
left: -0; top:-0; transition: all .3s; opacity: 0; z-index: -1;}

#c1_wrap .list .txt {text-align: left;  }
#c1_wrap .list .txt h3 {font-weight: 700; color:#000; transition: color .3s ; }
#c1_wrap .list .txt p {color:#4c4c4c; line-height: 1.5; margin-top: 5px;transition: color .3s ; }
#c1_wrap .list .txt p br {display: none;}

#c1_wrap .list .icon {display: flex; align-items: center; justify-content: center; position: relative;  flex-shrink: 0; margin-right: 12px; }
#c1_wrap .list .icon img {height: 42px;}
/* #c1_wrap .list .icon img {transition: opacity .3s; }
#c1_wrap .list .icon img + img {opacity: 0; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); z-index: 2;} */

#c1_wrap .list .arrow {position: absolute; right: 0; bottom: 0; display: block; width: 45px; height: 46px; background:url("../img/arrow_bg.png") 50%/contain no-repeat;
transition: all .3s; display: flex; align-items: flex-end; justify-content: flex-end; padding-bottom: 13px; z-index: 2; background-size: contain;}
#c1_wrap .list .arrow > span { display: block; width: 32px; height: 13px; background:url("../img/c1_arrow.png") 50%/contain no-repeat; transition: all .3s; opacity: .2;}


/* hover */
#c1_wrap .list a:hover .box::before {opacity: 1;}
/* #c1_wrap .list a:hover .icon img  {opacity: 0;}
#c1_wrap .list a:hover .icon img + img {opacity: 1; } */

#c1_wrap .list a:hover .arrow > span {opacity: 1; }
#c1_wrap .list a:hover .txt h3 {color:#fff;}
#c1_wrap .list a:hover .txt p {color: rgba(255, 255, 255, 0.8);}






@media screen and (max-width:1400px) {


}