/* content_css */
#c1_wrap {position: relative; isolation: isolate; overflow: hidden; padding: 115px 0 230px; background: #fff;}
#c1_wrap::before {position: absolute; inset: 0; z-index: -1; background: url("../img/c1_bg.png") center no-repeat; content: "";}
#c1_wrap .c_inner {position: relative; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 50px;}

/* font_size */
#c1_wrap .fs_80 {font-size: 80px; font-weight: 700; line-height: 1.26; font-family: 'Poppins';}
#c1_wrap .fs_40 {font-size: 40px; font-weight: 700; line-height: 1.4; color: rgba(0, 0, 0, 0.35); font-family: 'Poppins';}
#c1_wrap .fs_33 {font-size: 33px; font-weight: 700; line-height: 1.52; font-family: 'Poppins';}
#c1_wrap .fs_26 {font-size: 26px; font-weight: 700; line-height: 1.92;}
#c1_wrap .fs_23 {font-size: 23px; font-weight: 400; line-height: 1.74;}
#c1_wrap .fs_18 {font-size: 18px; font-weight: 500;}

/* vm_btn */
#c1_wrap .vm_btn a {overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 36px; width: 271px; height: 64px; border: solid 1px #000; border-radius: 32px; position: relative; z-index: 2; transition: .5s; background-color: #fff;}
#c1_wrap .vm_btn a::before {content: ''; display: block; width: 11px; height: 11px; border-radius: 25px; background-color: #ee7910; position: absolute; top: 50%; transform: translateY(-50%); right: 36px; z-index: -1; transition: .5s;}
#c1_wrap .vm_btn a span {transition: .5s;}
#c1_wrap .vm_btn a:hover span {color: #fff;}
#c1_wrap .vm_btn a:hover {border-color: #ee7910;}
#c1_wrap .vm_btn a:hover::before {transform: scale(50);}

/* top */
#c1_wrap .top {display: flex; justify-content: space-between; margin-bottom: 68px;}

/* card_list */
#c1_wrap .card_list {display: grid; margin: 0; padding: 0; gap: 33px; grid-template-columns: repeat(3, minmax(0, 1fr));  list-style: none;}
#c1_wrap .card_list li {min-width: 0; text-align: center;}
#c1_wrap .card_list .txt p:nth-child(1) {margin-top: 50px;}
#c1_wrap .card_list .txt p:nth-child(2) {margin-top: 10px;}


#c1_wrap .card_list .img {position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 30px; transition: border-radius .45s ease;}
#c1_wrap .card_list .img img {display: block; width: 100%; height: 100%; object-fit: cover;}
#c1_wrap .card_list .img > p {position: absolute; top: 50%; left: 50%; z-index: 1; margin: 0; color: rgba(255, 255, 255, 0.25);transform: translate(-50%, -50%); transition: opacity .2s ease;}
#c1_wrap .card_list .img:hover > p, #c1_wrap .card_list .img:focus-within > p {opacity: 0;}

#c1_wrap .card_list .img > a {position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 20px; border-radius: inherit; background-image: linear-gradient(180deg, rgba(25, 120, 166, 0.78) 0%, rgba(27, 105, 139, 0.70) 38%, rgba(106, 112, 91, 0.55) 58%, rgba(220, 112, 22, 0.76) 78%, rgba(239, 111, 0, 0.88) 100%); color: #fff; opacity: 0; text-decoration: none; transition: opacity .35s ease;}
#c1_wrap .card_list .img > a strong {margin-bottom: 61px; position: relative; top: 43px;}
#c1_wrap .card_list .img > a::before {position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; content: ""; pointer-events: none;}
#c1_wrap .card_list .img > a span {width: 199px; height: 50px; padding: 12px 30px; border: 1px solid #fff; border-radius: 30px; font-size: 16px; display: flex; justify-content: space-between; align-items: center;}

#c1_wrap .card_list .img > a span i {vertical-align: middle;}
#c1_wrap .card_list .img > a span i img {display: block; width: auto; height: auto; max-width: none; transition: transform 0.3s ease;}
#c1_wrap .card_list .img > a:hover span i img {animation: cardImageMove 0.4s ease-in-out infinite alternate;}
@keyframes cardImageMove {
  from {transform: translateX(0);}
  to {transform: translateX(8px);}
}

#c1_wrap .card_list .img:hover {border-radius: 50%;}
#c1_wrap .card_list .img:hover > a, #c1_wrap .card_list .img:focus-within > a {opacity: 1; backdrop-filter: blur(5px);}
