body {
    margin: 0;
    padding: 0;
}
@font-face{
    font-family: 'Libre Franklin-Bold';
    src : url('../font/LibreFranklin-Bold-4.ttf') format('truetype');
}
@font-face{
    font-family: 'Libre Franklin-Medium';
    src : url('../font/LibreFranklin-Medium-13.ttf') format('truetype');
}
@font-face{
    font-family: 'Libre Franklin-Regular';
    src : url('../font/LibreFranklin-Regular-15.ttf') format('truetype');
}
@font-face{
    font-family: 'Libre Franklin-SemiBold';
    src : url('../font/LibreFranklin-SemiBold-16.ttf') format('truetype');
}
@font-face{
    font-family: 'Londrina Solid-Black';
    src : url('../font/londrina-solid-black.ttf') format('truetype');
}
@font-face{
    font-family: 'Londrina Solid-Regular';
    src : url('../font/LondrinaSolid-Regular.ttf') format('truetype');
}
@font-face{
    font-family: 'Londrina Solid-Light';
    src : url('../font/londrina-solid-light.ttf') format('truetype');
}
@font-face{
    font-family: 'Lilita One';
    src : url('../font/LilitaOne.woff2.ttf') format('truetype');
}
@font-face{
    font-family: 'NanumGothic-ExtraBold';
    src : url('../font/NanumGothic-ExtraBold.ttf') format('truetype');
}
.frame-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;}
.pl20{
    padding-left:20px;
}
.pb20{
    padding-bottom:20px;
}
.frame-background {
    width: 100vw;
    max-width: 600px;
    min-height:100vh;
    margin: 0 auto;
    background: url(../pic/24-beijing.png) center center / 100% 100% no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-white{
    width:92%;
    background:#fff;
    border-radius: 24px;
}
.desc-content{
    background: rgba(244,244,244,0.94);
    border-radius: 24px 24px 0 0;
    width:100%;
    padding:20px 15px 15px ;
    box-sizing: border-box;
}
.title{
    font-family: NanumGothic-ExtraBold;
    font-weight: 800;
    font-size: 1.4rem;
    color: #E20305;
    text-align: center;
}
.subtitle{
    background: #E20305;
    border-radius: 6px;
    font-family: NanumGothic-ExtraBold;
    font-weight: 800;
    font-size: 1.5rem;
    color: #FFFFFF;
    text-align: center;
    width:65%;
    padding:5px 0;
    margin:0 auto;
}
.desc-main{
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:1rem;
}
.desc-title{
    font-family: Libre Franklin-Bold;
    font-weight: bold;
    font-size: 1.25rem;
    color: #0F172A;
    border-bottom:1px solid #0F172A;
}
.desc-subtitle{
    font-family:Libre Franklin-SemiBold;
    font-weight: bold;
    font-size: 1rem;
    color: #0F172A ;
    margin-top:.3rem;
    line-height: 1.3;
}
.color1,.color2{
    font-family: Libre Franklin-Bold;
}
.color1{
    color:#E20305;
}
.color2{
    color:#32B745;
}
.desc-bottom-word{
    font-family: Libre Franklin-Bold;
    font-weight: bold;
    font-size: 0.95rem;
    color: #0F172A;
    text-align: center;
    margin-top:1rem;
    line-height: 1.35;
}
.question-main-box{
    padding:15px;
}
.question{
    font-family: Libre Franklin-Bold;
    font-weight: bold;
    font-size: 1.15rem;
    color: #0F172A;
    line-height: 1.3;
    text-align: center;
    width:95%;
    margin:.5rem auto 1rem;
    letter-spacing: -0.01em;
}
.gap-4 {
    gap: 1rem;
}
.items-center {
    align-items: center;
}
.flex {
    display: flex;
}
.german-option-text{
    font-family: Libre Franklin-Bold;
    font-weight: bold;
    font-size: 1rem;
    color: #0F172A;
}
.answer{
    display:flex;
    justify-content: center;
    align-items: center;
    background: #606060;
    border-radius: 8px;
    padding:10px 0;
    font-family: Lilita One-Regular;
    font-weight: 400;
    font-size: 1.3rem;
    color: #FFFFFF;
    margin-top:.5rem;
}
.german-error-text{
   text-align: center;
   color: #0f172a !important;
   font-size:.9rem;
   padding:0.5rem 0;
   display:none;
}
.active{
    background: linear-gradient( 180deg, #22C76A 0%, #1D9A7C 100%) !important;
    border:none !important;
}
.answer-active{
   background: linear-gradient( 270deg, #008CFF 0%, #05EFEF 100%), rgba(255,255,255,0.2);
}
.german-option-card {
    background: #F1F5F9;
    border: 2px solid #C3DAF8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: .5rem;
    cursor: pointer;
    border-radius:8px;
    padding: 1rem .5rem;
}
.modern-radio-wrapper {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.answer img{
    width: 28px;
    height: 28px;
}
.img2{
    display:none;
}
.content-bottom{
    font-family:Libre Franklin-Regular;
    font-weight: 400;
    font-size: .8rem;
    color: #0F172A;
    text-align: center;
    padding-top:1rem;
}
.modern-radio {
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
    background: #ffffff;
}
.box.german-option-card.active .modern-radio, .box.german-option-card.modern-option-card.active .modern-radio {
    border-color: #D4AF37 !important;
    background: #ffffff !important;
}

.box.german-option-card.active .radio-dot, .box.german-option-card.modern-option-card.active .radio-dot {
    background:#D4AF37 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}
.radio-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #475569;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.radio-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(71, 85, 105, 0.1);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.3s ease;
}
@keyframes btn-breath {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}
/* 基础响应式优化 */

@media screen and (max-width: 600px) {
    .desc-subtitle{
        font-size: 0.95rem;
        line-height: 1.3;
    }
    .desc-bottom-word{
        font-size: 0.9rem;
        line-height: 1.3;
    }
    .question{
        font-size: 1.1rem;
        line-height: 1.25;
        width: 96%;
        letter-spacing: -0.015em;
    }
}
@media screen and (max-width: 480px) {
    .desc-subtitle{
        font-size: 0.9rem;
        line-height: 1.25;
    }
    .desc-bottom-word{
        font-size: 0.85rem;
        line-height: 1.25;
    }
    .question{
        font-size: 1.05rem;
        line-height: 1.22;
        width: 97%;
        letter-spacing: -0.02em;
    }
}
@media screen and (max-width: 400px) {
    .desc-title{
        font-size: 1.15rem;
    }
    .question{
        font-size: 1rem;
        line-height: 1.2;
        width: 98%;
        letter-spacing: -0.02em;
    }
    .desc-subtitle,.german-option-text{
        font-size: .85rem;
        line-height: 1.2;
    }
    .desc-bottom-word{
        font-size: .8rem;
        line-height: 1.2;
    }
}
@media screen and (max-width: 390px) {
    .question{
        font-size: 0.98rem;
        line-height: 1.18;
        width: 98%;
        letter-spacing: -0.022em;
    }
}
@media screen and (max-width: 375px) {
    .question{
        font-size: 0.96rem;
        line-height: 1.18;
        width: 98%;
        letter-spacing: -0.023em;
    }
}
@media screen and (max-width: 360px) {
    .desc-subtitle{
        font-size: 0.8rem;
        line-height: 1.2;
    }
    .desc-bottom-word{
        font-size: 0.75rem;
        line-height: 1.15;
    }
    .question{
        font-size: 0.95rem;
        line-height: 1.18;
        width: 98%;
        letter-spacing: -0.025em;
    }
}