.sec1 {position: relative; width: 100%; height: auto; z-index: 1;}
.sec1:before {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ''; display: block; width: 100%; height: 360px; background: url(./../img/sec1_bg.webp)no-repeat 50% 50%; background-size: cover; z-index: -1;}

.sec1 .sec1_img {max-width: 306px; width: 100%; height: auto; margin: 0 auto 30px;}
.sec1 .sec1_img img {width: 100%; height: auto;}

.sec1 .sec1_ct {width: 100%; height: auto;}
.sec1 .sec1_ct ul {display: flex; align-items: center; gap: 25px 0; flex-wrap: wrap; margin: 0 -12.5px 160px;}
.sec1 .sec1_ct ul li {width: calc(100% / 3); padding: 0 12.5px; box-sizing: border-box;}
.sec1 .sec1_ct ul li .child-box {display: flex; align-items: center; justify-content: center; flex-flow: column; width: 100%; height: 110px; border: 2px solid var(--gray_2b); border-radius: 12px; background: var(--black_0e); box-sizing: border-box; text-align: center;}
.sec1 .sec1_ct ul li .child-box .txt {font-size: 18px; font-weight: bold; line-height: 1.5; letter-spacing: -0.72px; color: var(--wt);}
.sec1 .sec1_ct ul li .child-box .txt span {display: block; color: var(--wt);}

.sec1 .sec1_ct .ct_txt {width: 100%; height: auto; text-align: center;}
.sec1 .sec1_ct .ct_txt .txt {font-size: 36px; font-weight: 500; line-height: 1.5; letter-spacing: -1.44; color: var(--wt);}
.sec1 .sec1_ct .ct_txt .txt span {font-weight: 800; color: var(--wt);}

/* sec2_ct */
.sec2_ct {width: 100%; height: auto;}
.sec2_ct .img-box {max-width: 720px; width: 100%; height: auto; margin: 0 auto 80px;}
.sec2_ct .img-box img {width: 100%; height: auto;}
.sec2_ct .arrow_d {width: 5.2px; height: auto; margin: 0 auto 30px;}
.sec2_ct .arrow_d img {width: 100%; height: auto;}

.sec2_ct .txt-box {text-align: center;}
.sec2_ct .txt-box .tit {margin-bottom: 30px; font-size: 36px; font-weight: bold; line-height: 1.4; letter-spacing: -1.44px; color: var(--wt);}
.sec2_ct .txt-box .sub {font-size: 24px; font-weight: 400; line-height: 1.6; letter-spacing: -0.48px; color: var(--gray_d5); word-break: keep-all;}

/* sec3 */
.sec3 {width: 100%; height: auto; background: var(--black_19);}
.sec3_ct {width: 100%; height: auto;}
.sec3_ct ul {display: flex; align-items: center; justify-content: center; gap: 31px 0; margin: 0 -15px;}
.sec3_ct ul li {width: calc(100% / 3); padding: 0 15px; box-sizing: border-box;}
.sec3_ct ul li .child-box {position: relative; width: 100%; height: auto; padding: 50px 35px; border-radius: 12px; background: var(--black_28); box-sizing: border-box;}
.sec3_ct ul li .child-box .txt-box {}
.sec3_ct ul li .child-box .txt-box .tit {margin-bottom: 30px; font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -1.04px; color: var(--wt);}
.sec3_ct ul li .child-box .txt-box .txt {font-size: 18px; font-weight: 500; line-height: 1.6; letter-spacing: -0.72px; color: var(--gray_d5);}

.sec3_ct ul li .child-box .ckd_img {position: absolute; top: 52px; right: 35px; width: 30px; height: auto;}

/* sec3_logo */
.sec3_logo {position: relative; display: flex; align-items: center; justify-content: center; flex-flow: column; gap: 40px; margin-bottom: 40px; z-index: 1;}
.sec3_logo .first {position: relative; z-index: 1;}
.sec3_logo .first img:first-child {width: 250px; height: auto;}
.sec3_logo .first img:last-child {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; width: 535px; height: auto;}
.sec3_logo > img {width: 50px; height: auto;}

.sec_txt {margin-top: 80px;}
.sec_txt .tit {margin-bottom: 30px; font-size: 36px; font-weight: bold; line-height: 1.4; letter-spacing: -1.44px; color: var(--wt); text-align: center; word-break: keep-all;}

/* sec4 */
.sec4 {width: 100%; height: auto; background: url(./../img/sec4_bg.webp)no-repeat 50% 50%; background-size: cover;}
.sec4_ct {width: 100%; height: auto;}
.sec4_ct ul {display: flex; align-items: center; gap: 40px 0; flex-wrap: wrap; margin: 0 -20px;}
.sec4_ct ul li {width: calc(100% / 2); padding: 0 20px; box-sizing: border-box;}
.sec4_ct ul li .child-box {width: 100%; height: auto; text-align: center; border-radius: 12px; background: var(--black_28); overflow: hidden;}
.sec4_ct ul li .child-box .top {display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 80px; background: var(--pr); font-size: 26px; font-weight: bold; line-height: 1.3; letter-spacing: -1.04px; color: var(--black);}
.sec4_ct ul li .child-box .top img {width: 30px; height: auto;}

.sec4_ct ul li .child-box .txt {display: flex; align-items: center; justify-content: center; width: 100%; height: 138px; font-size: 22px; font-weight: 600; line-height: 1.6; letter-spacing: -0.88px; color: var(--gray_d5);}


/* sec5 */
.sec5 {width: 100%; height: auto; background: var(--black_19);}
.sec5_ct {width: 100%; height: auto;}
.sec5_ct ul {display: flex; align-items: center; justify-content: center; gap: 30px 0; margin: 0 -15px;}
.sec5_ct ul li {width: calc(100% / 3); padding: 0 15px; box-sizing: border-box;}
.sec5_ct ul li .child-box {display: flex; align-items: center; justify-content: center; flex-flow: column; gap: 20px; width: 100%; height: 200px; border-radius: 12px; background: var(--black_28);}
.sec5_ct ul li .child-box .lb {display: flex; align-items: center; justify-content: center; width: 200px; height: 56px; border-radius: 60px; background: var(--pr); font-size: 24px; font-weight: 800; line-height: 1.5; letter-spacing: -0.96px; color: var(--wt);}
.sec5_ct ul li .child-box .txt {font-size: 26px; font-weight: 400; line-height: 1.5; letter-spacing: 1.04px; color: var(--wt);}
.sec5_ct ul li .child-box .txt span {font-size: 36px; font-weight: 900; color: var(--pr);}

/* sec6 */
.sec6 {width: 100%; height: auto; border-bottom: 1px solid var(--black_3);}
.sec6_ct {width: 100%; height: auto;}
.sec6_ct ul {display: flex; flex-flow: column;}
.sec6_ct ul li {width: 100%; height: auto;}
.sec6_ct ul li:after {content: ''; display: block; width: 30px; height: auto; aspect-ratio: 1/1; margin: 25px auto; background: url(./../img/arrow_icon.webp)no-repeat 50% 50%; background-size: cover;}
.sec6_ct ul li:last-of-type:after {display: none;}
.sec6_ct ul li .child-box {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 180px; padding: 56px 60px; border-radius: 12px; background: rgba(241, 90, 36, 0.25); box-sizing: border-box;}
.sec6_ct ul li .child-box .left-box {display: flex; align-items: center; gap: 20px;}
.sec6_ct ul li .child-box .lb {display: flex; align-items: center; justify-content: center; width: 150px; height: 56px; border-radius: 60px; background: var(--pr); font-size: 24px; font-weight: 800; line-height: 1.5; letter-spacing: -0.96px; color: var(--wt);}
.sec6_ct ul li .child-box .txt-box {}
.sec6_ct ul li .child-box .txt-box .tit {margin-bottom: 6px; font-size: 26px; font-weight: bold; line-height: 1.5; letter-spacing: -1.04px; color: var(--wt);}
.sec6_ct ul li .child-box .txt-box .sub {font-size: 18px; font-weight: 300; line-height: 1.5; letter-spacing: -0.72px; color: var(--wt);}

.sec6_ct ul li .child-box .icon {width: 68px; height: auto;}
.sec6_ct ul li .child-box .icon img {width: 100%; height: auto;}

/* sec7_ct */
.sec7_ct {width: 100%; height: auto;}
.sec7_ct ul {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 60px 0; margin: 0 -30px;}
.sec7_ct ul li {width: calc(100% / 2); padding: 0 30px; box-sizing: border-box;}
.sec7_ct ul li .child-box {display: flex; align-items: center; justify-content: center; flex-flow: column; gap: 30px; width: 100%; height: 470px; border: 3px solid var(--black_28); border-radius: 12px; box-sizing: border-box; text-align: center;}
.sec7_ct ul li .child-box .img-box {width: auto; height: 200px;}
.sec7_ct ul li .child-box .img-box img {width: auto; height: 100%;}
.sec7_ct ul li .child-box .txt-box {}
.sec7_ct ul li .child-box .txt-box .txt {font-size: 24px; font-weight: 800; line-height: 1.5; letter-spacing: -0.9px; color: var(--wt);}
.sec7_ct ul li .child-box .txt-box .txt span {color: var(--pr);}


/*  */
/* 전체 컨테이너 */
.competition-structure {position: relative; display: flex; align-items: center; justify-content: center; max-width: 760px; width: 100%; height: 608px; margin: 0 auto; /* overflow: hidden; */}

/* 중앙 사용자 요소 */
.center-user {position: absolute; top: 50.35%; left: 50%; transform: translate(-50%, -50%); max-width: 604px; width: 100%; height: auto; display: flex; justify-content: center; align-items: center; z-index: 1; /* 중앙 이미지가 뒤에 깔리도록 설정 */}

.center-user img {width: 100%; height: auto;}

/* 궤도 회전 영역 */
.orbit-container {position: absolute; width: 100%; height: 100%; /* 궤도 전체를 30초 동안 일정한 속도로 시계 방향 회전시킵니다 */ animation: spin 30s linear infinite; z-index: 2; /* 텍스트 박스가 중앙 이미지 위로 지나가게 설정 */}

/* 개별 금융사 위치 잡기 */
.company-wrapper {position: absolute; top: 50%; left: 50%; /* company-box와 동일한 크기로 설정하여 정확히 중앙을 축으로 삼습니다 */ width: 140px; height: 56px; margin-top: -28px; /* height(56px)의 절반 */ margin-left: -70px; /* width(140px)의 절반 */ transform: rotate(calc(360deg / 7 * var(--i))) translateY(-277px) rotate(calc(-360deg / 7 * var(--i))); /* 1. calc(360deg / 7 * var(--i))로 360도를 7등분한 각도만큼 회전시킵니다. 2. translateY(-250px)로 반지름(250px)만큼 바깥으로 밀어냅니다. (컨테이너 높이 608px 고려) 3. 다시 반대 각도만큼 회전시켜 텍스트 상자의 수평을 맞춥니다.*/}

/* 개별 금융사 박스 디자인 및 역회전 */
.company-box {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 60px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--gray_d5); background: var(--black_28); /* 궤도가 도는 반대 방향(반시계)으로 돌아야 글씨가 뒤집히지 않습니다 */ animation: counter-spin 30s linear infinite;}

/* 시계 방향 회전 (부모 궤도용) */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 반시계 방향 회전 (자식 텍스트 박스용) */
@keyframes counter-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}