/* =========================================
   BUSINESS AREA
========================================= */

.business-area-section {
    --business-blue: #2878ee;
    --business-blue-dark: #165fc7;
    --business-dark: #272b31;
    --business-text: #555b64;
    --business-gray: #f5f6f8;

    width: 100%;

    /*padding: 90px 20px 110px;*/

    background-color: #ffffff;
}


/* =========================================
   TITLE
========================================= */

.business-title {
    text-align: center;

    margin-bottom: 55px;
}

.section-label {
    display: block;

    margin-bottom: 7px;

    color: var(--business-blue);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 4px;
}

.business-title h1 {
    margin: 0;

    color: var(--business-dark);

    font-size: 38px;
    font-weight: 800;

    letter-spacing: -1px;
}

.title-line {
    display: block;

    width: 38px;
    height: 2px;

    margin: 17px auto;

    background-color: var(--business-blue);
}

.business-title p {
    margin: 0;

    color: #555c67;

    font-size: 18px;

    line-height: 1.55;

    word-break: keep-all;
}


/* =========================================
   TOP CARDS
========================================= */

.business-cards {
    width: 100%;
    max-width: 900px;

    margin: 0 auto 80px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}


/* 카드 */

.business-card {
    position: relative;

    min-height: 220px;

    padding: 25px 25px 23px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    background-color: #f4f5f6;

    border: 1px solid transparent;
    border-radius: 7px;

    color: inherit;
    text-decoration: none;

    overflow: hidden;

    transition:
	transform 0.3s ease,
	                box-shadow 0.3s ease,
	                border-color 0.3s ease;
}


/* 카드 위쪽 파란 라인 */

.business-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 3px;

    background-color: var(--business-blue);

    transform: translateX(-50%);

    transition: width 0.3s ease;
}


.business-card:hover {
    transform: translateY(-5px);

	background:
	        linear-gradient(
	            145deg,
	            #ffffff 0%,
	            #f2f7ff 100%
	        );

    border-color: rgba(40, 120, 238, 0.25);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.08);
}


.business-card:hover::before {
    width: 100%;
}

/* 카드 숫자 */

.card-number {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 6px;
}

.card-number span {
    color: var(--business-blue);

    font-size: 17px;
    font-weight: 700;
}

.card-number i {
    display: block;

    width: 25px;
    height: 1px;

    background-color: var(--business-blue);
}


/* 카드 제목 */

.business-card h2 {
    min-height: 45px;

    margin: 0 0 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #343941;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.25;
}


/* 카드 설명 */

.business-card p {
    flex: 1;

    margin: 0;

    color: #656b74;

    font-size: 13px;

    line-height: 1.6;

    word-break: keep-all;
}



/* =========================================
   BUSINESS DETAIL 01
========================================= */

.business-detail {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 42% 58%;

    align-items: center;

    gap: 65px;

    padding: 65px 6px;

    border-top: 1px solid #eceef1;
}

.business-detail-inner{
	margin: 0 auto;
	padding: 65px 6px;
	max-width: 1200px;
	display: grid;

	/* 왼쪽 설명 / 이미지 / 오른쪽 목록 */
	grid-template-columns: 1.4fr 1fr 1.4fr;
	align-items: center;
	gap: 30px;
}

.business-detail-gray {
	width: 100%;
	
    background-color: #f3f4f6;
}
/* =================================
   CENTER IMAGE
================================= */
.business-image {
    width: 100%;
    height: 155px;

    overflow: hidden;

    background-color: #e9eaec;
}

.business-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

/* 이미지에만 아주 약한 효과 */
.business-detail:hover .business-image img {
    transform: scale(1.035);
}
/* =========================================
   LEFT INFO
========================================= */

.detail-info {
    position: relative;

    padding: 15px 0 20px;
}


/* 번호 */

.detail-number {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 8px;
}

.detail-number span {
    color: var(--business-blue);

    font-size: 27px;
    font-weight: 500;
}

.detail-number i {
    display: block;

    width: 48px;
    height: 3px;

    background-color: var(--business-blue);
}


/* 제목 */

.detail-info h2 {
    margin: 0 0 4px;

    color: var(--business-dark);

    font-size: 34px;
    font-weight: 800;

    letter-spacing: -0.8px;

    line-height: 1.2;
}


/* 한글 제목 */

.detail-info h3 {
    margin: 0 0 23px;

    color: #555b64;

    font-size: 20px;
    font-weight: 500;
}


/* 설명 */

.detail-info p {
    position: relative;
    z-index: 2;

    max-width: 420px;

    margin: 0;

    color: #555b64;

    font-size: 16px;

    line-height: 1.7;

    word-break: keep-all;
}


/* 뒤에 희미한 01 */

.detail-watermark {
    position: absolute;

    left: -10px;
    bottom: -47px;

    color: #f3f4f6;

    font-size: 105px;
    font-weight: 900;

    line-height: 1;

    z-index: 0;

    user-select: none;
}
.detail-watermark-2 {
    position: absolute;

    left: -10px;
    bottom: -47px;

    color: #ffffff;

    font-size: 105px;
    font-weight: 900;

    line-height: 1;

    z-index: 0;

    user-select: none;
}

/* =========================================
   SERVICE GRID
========================================= */

.service-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;
}


/* 서비스 박스 */

.service-card {
    position: relative;

    min-height: 105px;

    padding: 20px 24px;

    display: flex;
    align-items: center;

    gap: 17px;

    background:
        linear-gradient(
            135deg,
            #f7f8fa,
            #f1f3f6
        );

    border: 1px solid #f0f1f2;

    border-radius: 8px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}


/* 오른쪽 장식 */

.service-card::after {
    content: "";

    position: absolute;

    right: -20px;
    bottom: -35px;

    width: 90px;
    height: 90px;

    border: 18px solid rgba(40, 120, 238, 0.025);

    border-radius: 50%;
}


.service-card:hover {
    transform: translateY(-4px);

    background: #ffffff;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.07);
}


/* 아이콘 */

.service-icon {
    position: relative;
    z-index: 2;

    width: 47px;
    height: 47px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background-color: #e9f2ff;

    color: var(--business-blue);

    font-size: 17px;
    font-weight: 700;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


.service-card:hover .service-icon {
    background-color: var(--business-blue);

    color: #ffffff;
}


/* 텍스트 */

.service-text {
    position: relative;
    z-index: 2;
}

.service-text strong {
    display: block;

    margin-bottom: 4px;

    color: #333942;

    font-size: 16px;
    font-weight: 700;
}

.service-text span {
    display: block;

    color: #646b74;

    font-size: 15px;
}

/* =================================
   RIGHT LIST
================================= */

.business-list {
    display: flex;
    align-items: center;
}

.business-list ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.business-list li {
    position: relative;

    padding-left: 12px;

    color: #444950;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.55;

    word-break: keep-all;
	white-space: nowrap;
}

/* 앞에 · 표시 */
.business-list li::before {
    content: "·";

    position: absolute;
    left: 0;
    top: 0;

    color: #454a50;

    font-weight: 700;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .business-detail {
        grid-template-columns: 1fr;

        gap: 40px;

        max-width: 800px;
    }

    .detail-info p {
        max-width: 600px;
    }

    .detail-watermark {
        display: none;
    }
	.business-detail-inner {
	      grid-template-columns: 1.2fr 1fr;

	      gap: 30px;
	  }

	  .business-list {
	      grid-column: 1 / -1;
	  }

	  .business-list ul {
	      display: grid;
	      grid-template-columns: repeat(2, 1fr);

	      gap: 4px 30px;

	      width: 100%;
	  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .business-area-section {
        padding:
            65px 20px
            80px;
    }


    /* 제목 */

    .business-title {
        margin-bottom: 40px;
    }

    .business-title h1 {
        font-size: 30px;
    }

    .business-title p {
        font-size: 15px;
    }


    /* 카드 */

    .business-cards {
        grid-template-columns: 1fr;

        max-width: 450px;

        gap: 14px;

        margin-bottom: 60px;
    }

    .business-card {
        min-height: auto;

        padding: 25px;
    }

    .business-card h2 {
        min-height: auto;

        margin-bottom: 12px;
    }


    /* 상세 */

    .business-detail {
        padding: 35px 0;

        gap: 30px;
    }

    .detail-info h2 {
        font-size: 29px;
    }

    .detail-info h3 {
        font-size: 18px;
    }

    .detail-info p {
        font-size: 15px;
    }


    /* 서비스 */

    .service-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .service-card {
        min-height: 90px;
    }
	.business-detail-inner {
	       display: flex;
	       flex-direction: column;

	       align-items: stretch;

	       min-height: auto;

	       padding: 50px 20px;

	       gap: 25px;
	   }

	   .business-number span {
	       font-size: 21px;
	   }

	   .business-number i {
	       width: 45px;
	   }

	   .business-info h2 {
	       font-size: 25px;
	   }

	   .business-info h3 {
	       font-size: 17px;

	       margin-bottom: 18px;
	   }

	   .business-info p {
	       font-size: 15px;
	   }

	   .business-info p br {
	       display: none;
	   }

	   .business-image {
	       height: 220px;
	   }

	   .business-list ul {
	       display: block;
	   }

	   .business-list li {
	       font-size: 15px;
	       margin-bottom: 4px;
		   white-space: normal;
	   }
}