.problem-container {
    .intro-banner {
        position: relative; width: 100%; padding: 40px 60px; overflow: hidden; border-radius: 10px; border: 1px solid var(--theme); border-left: 7px solid var(--theme); margin-bottom: 40px;
        .tit {
            font-size: 3.5rem; padding-bottom: 15px; font-family: 'Gmarket Sans', sans-serif; color: var(--navy);
           span {
                position: relative; display: inline-block; z-index: 1;
                &:after {
                    content: ''; position: absolute; bottom: 0; left: -10px; width: calc(100% + 25px); height: 15px; border-radius: 50px; background: #d3e1f3; display: inline-block; z-index: -1;
                }
           }
        }
        .s-txt {
            font-size: 2.3rem; line-height: 1.5; word-break: keep-all; margin-bottom: 20px;
        }
        .txt {
            position: relative; font-size: 1.6rem; line-height: 1.5; word-break: keep-all; font-weight: 400; padding-left: 13px; margin-top: 3px; color: #444;
            &:before {
                content: ''; width: 4px; height: 4px; background: #999; border-radius: 50%; display: inline-block; position: absolute; left: 0; top: 9px;
            }
        } 
        .btn {
            color: #fff; background: var(--theme); border-radius: 50px; padding: 10px 0; width: 150px; max-width: 100%; text-align: center; font-size: 1.7rem; font-weight: 700; display: inline-block; margin-top: 20px;
            &:active {
                transform: scale(0.98);
            }
        }
    }
}

@media (max-width: 1024px) {
    .problem-container {
        .intro-banner {
            padding: 30px 40px; margin-bottom: 30px;
            .tit {
                font-size: 2.8rem; 
                span {
                    &:after {
                        height: 12px;
                    }
                }
            }
            .s-txt {
                font-size: 2rem; margin-bottom: 15px;
            }
            .txt {
                font-size: 1.5rem;
            }
            .btn {
                font-size: 1.6rem;
            }
        }
    }
}

@media (max-width: 768px) {
    .problem-container {
        .intro-banner {
            padding: 25px 30px; margin-bottom: 25px; border-left-width: 5px;
            .tit {
                font-size: 2.2rem; 
                span {
                    &:after {
                        height: 10px; left: -8px; width: calc(100% + 20px);
                    }
                }
            }
            .s-txt {
                font-size: 1.7rem; margin-bottom: 12px;
            }
            .txt {
                font-size: 1.4rem;
                &:before {
                    width: 3px; height: 3px;
                }
            }
            .btn {
                font-size: 1.5rem; width: 100%;
            }
        }
    }
}

@media (max-width: 475px) {
    .problem-container {
        .intro-banner {
            padding: 25px 15px 15px; margin-bottom: 20px; border-left-width: 4px;
            .tit {
                font-size: 2rem; text-align: center;
                span {
                    &:after {
                        height: 8px; left: -6px; width: calc(100% + 15px);
                    }
                }
            }
            .s-txt {
                font-size: 1.5rem; margin-bottom: 10px;
            }
            .txt {
                font-size: 1.3rem;
            }
            .btn {
                font-size: 1.4rem; margin-top: 15px; padding: 7px 0;
            }
        }
        .filter-select {
            .filter-group {
                .checkbox {
                    .input-check {
                        flex: 1;
                    }
                }
            }
        }
    }
}