.single-service-intro{
    background-color: var(--color-secondary-1);
    >div{
        padding: 80px 24px;
        max-width: 1044px;
        margin: 0 auto;
        >h2{
            text-align: center;
            margin-bottom: 60px;
            &::after{
                content: "";
                display: block;
                width: 60px;
                height: 4px;
                margin: 12px auto 0;
                background-color: var(--color-primary-3);
            }
        }
        >.content{
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 24px;
            margin-bottom: 60px;
            >p{
                white-space: pre-line;
                padding-left: 36px;
            }
        }
        >.flex-content-container{
            margin-bottom: 60px;
			strong{
				font-weight: 500;
			}

			ul, ol{
				list-style: initial;
				padding-left: 28px;
				>li{
					font-family: "Noto Sans TC", sans-serif;
					color: var(--color-gray-1);
					font-size: 16px;
					line-height: 1.8;
					font-weight: 350;
					letter-spacing: 2px;
				}
			}
			table{
				td{
					border: 1px solid var(--color-gray-1);
					padding: 12px;
					font-family: "Noto Sans TC", sans-serif;
					font-size: 16px;
					line-height: 1.8;
					font-weight: 350;
					letter-spacing: 2px;
				}
			}
        }
        >p{
            font-weight: 500;
            text-align: center;
            padding: 24px;
            background-color: color-mix(in oklab, white 50%, transparent);
        }
    }
}

@media screen and (width < 1024px) {
    .single-service-intro > div{
        >.content{
            >p{
                padding-left: 0;
            }
        }
    }
}
@media screen and (width < 768px) {
    .single-service-intro > div{
        >h2{
            margin-bottom: 40px;
        }
        >.content{
            grid-template-columns: 100%;
            margin-bottom: 40px;
        }
        >.flex-content-container{
            margin-bottom: 40px;
			ul, ol{
				padding-left: 24px;
				>li{
					font-size: 14px;
				}
			}
			table td{
				font-size: 14px;
			}
        }
        >p{
            padding: 12px;
        }
    }
}
@media screen and (width < 576px) {
    .single-service-intro > div{
        padding: 60px 24px;
    }
}