.commonTitleWrapper {
    background: url("../images/solutions/swSolution/smartCity/smartCityBackImg.jpg") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commonTitle {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.69);
    color: #f1f8ff;
}

/*스마트시티 인트로*/
.smartCityIntroWrapper {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.smartCityIntroCommentWrapper {
    width: 80%;
    margin-bottom: 500px;
}


.smartCityIntroBar {
    content: "";
    height: 4px;
    width: 100%;
    background: linear-gradient(
            to right,
            rgba(129, 18, 18, 0) 0%,
            rgba(0, 11, 255, 1) 50%,
            rgba(129, 18, 18, 0) 100%
    );
    border-radius: 2px;
}

.smartCityIntroComment {
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin: 30px 0 0 0;
}

.smartCityIntroComment > span {
    font-weight: 800;
}

.smartCityIntroComment:hover > span {
    color: #006fff;
}

/*스마트시티 인트로 애니메이션*/
.smartCityIntroGif {
    width: 100%;
    height: auto;
    aspect-ratio: 1000/563;
    opacity: 0;
    transform: translateY(400px);
    transition: opacity 1s ease, transform 1s ease;
}

.smartCityIntroGif.animate {
    opacity: 1;
    transform: translateY(0);

}

.smartCityIntroLogo {
    width: 35%;
    height: auto;
    aspect-ratio: 350/50;
    opacity: 0;
    transform: translateY(200px);
    transition: opacity 1s ease, transform 1s ease;
}

.smartCityIntroLogo.animate {
    opacity: 1;
    transform: translateY(0);

}

.smartCityIntroComment {
    opacity: 0;
    transition: opacity 1s ease;
}

.smartCityIntroComment.animate {
    opacity: 1;

}


/*스마트시티 서비스 설명*/
.smartCityServiceWrapper {
    max-width: 1250px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 120px;
    margin-bottom: 500px;
    padding: 0 40px;
    box-sizing: border-box;
}

.smartCityServiceLogo {
    width: 35%;
    height: auto;
    aspect-ratio: 322/44;
    opacity: 0;
    transition: opacity 1s ease;
}

.smartCityServiceCommentWrapper {
    width: 50%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(200px);
    transition: opacity 1s ease, transform 1s ease;
}

.smartCityServiceCommentTitle {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin: 0;
    position: relative;

}

.smartCityServiceCommentTitle::before {
    content: "";
    width: 10px;
    height: 100%;
    position: absolute;
    left: -30px;
    top: 0;
    background-image: linear-gradient(180deg, #ec745c 0%, #4c5ce4 100%);
}

.smartCityServiceCommentTitle > span {
    font-weight: 800;
    background-image: linear-gradient(205deg, #f1f8ff 0%, #9AA4FF63 100%)
}

.smartCityServiceCommentSubTitle {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 20px 0;
}

.smartCityServiceComment {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin: 0
}

/*스마트시티 서비스 애니메이션*/


.smartCityServiceLogo.animate {
    opacity: 1;
}


.smartCityServiceCommentWrapper.animate {
    opacity: 1;
    transform: translateY(0);

}

/*스마트시티 실제 서비스*/
.smartCityRealServiceGridWrapper {
    max-width: 1250px;
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2열 */
    grid-template-rows: repeat(2, auto); /* 2행  */
    column-gap: 10px;
    row-gap: 300px;
    align-items: center;
    padding: 40px;
    box-sizing: border-box;
    margin-bottom: 300px;
}

/*서초*/
.smartCitySeochoImgWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

}

.smartCitySeochoImg {
    max-width: 800px;
    width: 100%;
}

.smartCityRealServiceDescriptionWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: auto;
}

.smartCityRealServiceCommentTitle {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.5px;
    position: relative;
    margin: 0;
}

.smartCityRealServiceCommentTitle > span {
    font-weight: 800;
    background-image: linear-gradient(205deg, #f1f8ff 0%, #9AA4FF63 100%)
}

.smartCityRealServiceCommentTitle::before {
    content: "";
    width: 10px;
    height: 100%;
    position: absolute;
    left: -30px;
    top: 0;
    background-color: #006eff;
}

.smartCityRealServiceComment {
    font-size: 16px;
    line-height: 24px;
    margin: 20px 0 30px 0;
    font-weight: 500;
}

.smartCitySeochoFeatureBoxWrapper {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.smartCitySeochoFeatureBox1 {
    width: 48%;
    height: auto;
    aspect-ratio: 3/2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px -3px rgba(36.13654891304349, 47.139195231273604, 255, 0.22);
    padding-bottom: 5px;
}

.smartCitySeochoFeatureBox1Icon {
    width: 90px;
    height: 90px;
}

.smartCitySeochoFeatureBox1Title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
}

.smartCitySeochoFeatureBox1Comment {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: 0;
}

.smartCitySeochoFeatureBox2 {
    width: 48%;
    height: auto;
    aspect-ratio: 3/2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px -3px rgba(36.13654891304349, 47.139195231273604, 255, 0.22);
    padding-bottom: 5px;
}

.smartCitySeochoFeatureBox2Icon {
    width: 90px;
    height: 90px;
}

.smartCitySeochoFeatureBox2Title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
}

.smartCitySeochoFeatureBox2Comment {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: 0;
}

/*노원*/
.smartCityNowonImgWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.smartCityNowonImg {
    max-width: 800px;
    width: 100%;

}


.smartCityNowonFeatureBoxWrapper {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    /*gap: 20px;*/
}

.smartCityNowonFeatureBox1 {
    width: 48%;
    height: auto;
    aspect-ratio: 3/2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px -3px rgba(36.13654891304349, 47.139195231273604, 255, 0.22);
    padding-bottom: 5px;
}

.smartCityNowonFeatureBox1Icon {
    width: 90px;
    height: 90px;
}

.smartCityNowonFeatureBox1Title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
}

.smartCityNowonFeatureBox1Comment {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: 0;
}

.smartCityNowonFeatureBox2 {
    width: 48%;
    height: auto;
    aspect-ratio: 3/2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px -3px rgba(36.13654891304349, 47.139195231273604, 255, 0.22);
    padding-bottom: 5px;
}

.smartCityNowonFeatureBox2Icon {
    width: 90px;
    height: 90px;
}

.smartCityNowonFeatureBox2Title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
}

.smartCityNowonFeatureBox2Comment {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: 0;
}

/*스마트 시티 실제 서비스 애니메이션*/
.upAnimation {
    opacity: 0;
    transform: translateY(200px);
    transition: opacity 1s ease, transform 1s ease;
}

.upAnimation.animate {
    opacity: 1;
    transform: translateY(0px);
}

.smartCityRealServiceCommentWrapper {
    opacity: 0;
    transform: translateY(-200px);
    transition: opacity 1s ease, transform 1s ease;
}

.smartCityRealServiceCommentWrapper.animate {
    opacity: 1;
    transform: translateY(0px);
}


/*스마트시티 주요 기능*/
.smartCityFeaturesWrapper {
    max-width: 1250px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 350px;
    box-sizing: border-box;
    right: -100px;
}

.smartCityFeatureIcons {
    width: 34%;
    height: auto;
    aspect-ratio: 550/650;
    opacity: 0;
    transform: translateY(300px);
    transition: opacity 1s ease, transform 1s ease;
}


.smartCityFeaturesTitle {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin: 0;
}

.smartCityFeaturesTitle > span {
    font-weight: 800;
    transition: color 0.5s ease;
    background-image: linear-gradient(205deg, #f1f8ff 0%, #9AA4FF63 100%)
}

.smartCityFeaturesTitle:hover > span {
    color: #4c5ce4;

}

.smartCityFeaturesSubTitle {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.smartCityTitleFeaturesWrapper {
    width: 60%;
}

.smartCityFeaturesGrid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 2열 */
    grid-template-rows: repeat(2, auto); /* 2행  */
    gap: 20px;
    align-items: center;
}


.smartCityFeatureBox {
    height: auto;
    aspect-ratio: 3/2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px -3px rgba(36.13654891304349, 47.139195231273604, 255, 0.22);
    opacity: 0;
    transform: translateY(300px);
    transition: opacity 1s ease, transform 1s ease;
    box-sizing: border-box;
    padding: 10px;
}

.smartCityFeatureBoxIcon {
    width: 90px;
    height: 90px;
}

.smartCityFeatureBoxTitle {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
}

.smartCityFeatureBoxComment {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: 0;
}

/*스마트시티 주요기능 애니메이션*/


/*opacity: 0;*/
/*transform: translateY(300px);*/
/*transition: opacity 0.5s ease, transform 0.5s ease;*/

.smartCityFeatureIcons.animate {
    opacity: 1;
    transform: translateY(0);
}

.smartCityTitleWrapper {
    opacity: 0;
    transform: translateY(-300px);
    transition: opacity 1s ease, transform 1s ease;
}

.smartCityTitleWrapper.animate {
    opacity: 1;
    transform: translateY(0);
}

.smartCityFeatureBox.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 순차 딜레이 */
.smartCityFeatureBox.animate:nth-child(1) {
    transition-delay: 0.1s;
}

.smartCityFeatureBox.animate:nth-child(2) {
    transition-delay: 0.3s;
}

.smartCityFeatureBox.animate:nth-child(3) {
    transition-delay: 0.5s;
}

.smartCityFeatureBox.animate:nth-child(4) {
    transition-delay: 0.7s;
}

.smartCityFeatureBox.animate:nth-child(5) {
    transition-delay: 0.9s;
}

.smartCityFeatureBox.animate:nth-child(6) {
    transition-delay: 1.1s;
}


@media screen and (max-width: 1150px) {
    .smartCityIntroComment {
        font-size: 22px;
    }

    .smartCityServiceCommentTitle {
        font-size: 32px;
    }

    .smartCityRealServiceGridWrapper {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 30px;
    }

    .smartCityRealServiceDescriptionWrapper{
        margin-bottom: 200px;
    }

    /* 1행: 1, 2 순서 유지 */
    .smartCityRealServiceGridWrapper > div:nth-child(1) {
        order: 1;
    }

    .smartCityRealServiceGridWrapper > div:nth-child(2) {
        order: 2;
    }

    /* 2행: 3, 4 순서 바꾸기 */
    .smartCityRealServiceGridWrapper > div:nth-child(3) {
        order: 4;
    }

    .smartCityRealServiceGridWrapper > div:nth-child(4) {
        order: 3;
    }

    .smartCitySeochoImgWrapper{
        padding-bottom: 30px;
    }

    .smartCityNowonImgWrapper{
        padding-bottom: 30px;
    }

    .smartCityFeaturesWrapper{
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .commonTitle {
        font-size: 36px;
    }

    .smartCityIntroComment {
        font-size: 18px;
    }

    .smartCityServiceWrapper {
        flex-direction: column;
        gap: 60px;
    }

    .smartCityServiceCommentTitle {
        font-size: 24px;
    }

    .smartCityServiceCommentSubTitle {
        font-size: 16px;
    }

    .smartCityServiceComment {
        font-size: 14px;
    }

    .smartCityFeaturesGrid{
        grid-template-columns: 1fr 1fr
    }
}

@media screen and (max-width: 480px) {
    .commonTitle {
        font-size: 30px;
    }

    .smartCityIntroComment {
        font-size: 16px;
    }

    .smartCityServiceCommentTitle {
        font-size: 16px;
    }

    .smartCityServiceCommentSubTitle {
        font-size: 14px;
    }

    .smartCityServiceComment {
        font-size: 12px;
    }

    .smartCitySeochoFeatureBox1Title{
        font-size: 16px;
    }

    .smartCitySeochoFeatureBox2Title{
        font-size: 16px;
    }

    .smartCitySeochoFeatureBox1Comment{
        font-size: 10px;
    }

    .smartCitySeochoFeatureBox2Comment{
        font-size: 10px;
    }

    .smartCityNowonFeatureBox1Title{
        font-size: 16px;
    }

    .smartCityNowonFeatureBox2Title{
        font-size: 16px;
    }

    .smartCityNowonFeatureBox1Comment{
        font-size: 10px;
    }

    .smartCityNowonFeatureBox2Comment{
        font-size: 10px;
    }

    .smartCityRealServiceCommentTitle{
        font-size: 30px;
    }

    .smartCityFeaturesGrid{
        grid-template-columns: 1fr
    }

    .smartCityFeaturesTitle{
        font-size: 30px;
    }
}