/* 전체 영역 */
#BusinessOverview {
   margin-top: 80px;
   position: relative;
}
#BusinessOverview::before {
   content: "";
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 100vw;
   height: 120%;
   top: -80px;
   z-index: -1;
   background:
      linear-gradient(
         to right,
         #fff 0%,
         #fff 2%,
         rgba(255, 255, 255, 0.6) 20%,
         rgba(255, 255, 255, 0.6) 80%,
         #fff 98%,
         #fff 100%
      ),
      linear-gradient(
         to bottom,
         #fff 0%,
         #fff 2%,
         rgba(255, 255, 255, 0.5) 20%,
         rgba(255, 255, 255, 0.5) 80%,
         #fff 98%,
         #fff 100%
      ),
      url("../../../img/BusinessOverview_bg.jpg") center/cover no-repeat;
}

#BusinessOverview article {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px 0px;
}

/* 메인 제목 */
#BusinessOverview article > header h1 {
   font-size: 36px;
   font-weight: 800;
   text-align: center;
   position: relative;
}

#BusinessOverview .top_logo {
   display: none;
}

#BusinessOverview article > header::after {
   content: "";
   position: absolute;
   width: 40px;
   height: 3px;
   bottom: 0px;
   left: 50%;
   margin-left: -20px;
   background-color: var(--maincolor);
}

#BusinessOverview section {
   margin-bottom: 80px;
   text-align: center;
   min-height: 560px;
}
#BusinessOverview header {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 80px;
   gap: 20px;
   position: relative;
   padding-bottom: 20px;
   border-bottom: 1px solid #f2f2f2;
}
#BusinessOverview header img {
   max-width: 140px;
}

/* 본론 */
.system-wrap {
   position: relative;
   max-width: 1200px;
   margin: auto;
   /* padding: 120px 0; */
}

.system-center {
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.5);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: auto;
   position: absolute;
   z-index: 5;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.logo {
   font-size: 36px;
   font-weight: 700;
}

.logo span {
   color: #ff7a00;
}

.system-list {
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   height: 100%;
   transform: translateY(-50%);
}

.item {
   position: absolute;
   display: flex;
   align-items: center;
   gap: 15px;
   width: 340px;
}

.item .num {
   width: 60px;
   min-width: 60px;
   height: 60px;
   border-radius: 50%;
   background: white;
   border: 5px solid #2f6db7;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 20px;
}

.item h4 {
   font-size: 18px;
   margin: 0;
   font-weight: 500 !important;
}

.item p {
   font-size: 13px;
   margin-top: 4px;
   color: #444;
}

.left {
   text-align: right;
   flex-direction: row-reverse;
}

.right {
   text-align: left;
}

/* 위치 */
.item1 {
   top: 20px;
   left: 20px;
}
.item2 {
   top: 160px;
   left: 20px;
}
.item3 {
   top: 300px;
   left: 20px;
}
.item4 {
   top: 440px;
   left: 20px;
}

.item5 {
   top: 20px;
   right: 20px;
}
.item6 {
   top: 160px;
   right: 20px;
}
.item7 {
   top: 300px;
   right: 20px;
}
.item8 {
   top: 440px;
   right: 20px;
}

/* ===== 모바일 반응형 ===== */
@media (max-width: 900px) {
   .system-list {
      position: static;
      transform: translateY(0%);
   }
   #BusinessOverview .top_logo {
      display: block;
   }

   .item {
      position: static;
      width: 100%;
      margin-top: 20px;
   }

   .left,
   .right {
      flex-direction: row;
      text-align: left;
   }

   .system-center {
      width: 200px;
      height: 200px;
      margin-bottom: 40px;
      opacity: 0;
   }
}
@media (max-width: 768px) {
}
@media (max-width: 500px) {
   #BusinessOverview {
      margin-top: 40px;
   }
   #BusinessOverview header img {
      max-width: 80px;
   }
   /* 메인 제목 */
   #BusinessOverview article > header h1 {
      font-size: 26px !important;
   }
   #BusinessOverview article > header h1.en {
      font-size: 22px !important;
      letter-spacing: -1px;
   }
}