html {
    background: #f5f5f5;
}

body {
    width: 100%;
    max-width: 640px;
    min-height: 100vh;
    margin: 0 auto;
    overflow-x: hidden !important;
    box-sizing: border-box;
}

body .swiper-container {
    width: 100%;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
    overflow: hidden !important;
    box-sizing: border-box;
}

body .swiper-slide {
    min-height: calc(100vh - 70px);
    overflow: hidden;
    box-sizing: border-box;
}

body .swiper-slide section {
    width: 100% !important;
    max-width: 600px;
    margin: 0 auto !important;
    padding: 0 16px 170px !important;
    box-sizing: border-box;
}

body .exam_top,
body header,
body .vip_footer {
    max-width: 640px;
    left: 50% !important;
    margin-left: 0 !important;
    transform: translateX(-50%);
}

body .syt,
body .getresults {
    width: calc(100% - 32px) !important;
    max-width: 600px;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: translateX(-50%);
    bottom: 16px !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
}

body .mbti_exam_pay_btn {
    max-width: 600px;
    left: 50% !important;
    margin-left: 0 !important;
    transform: translateX(-50%);
}

body .tabs {
    max-width: 100%;
    box-sizing: border-box;
}

body .tabs label {
    box-sizing: border-box;
}

body .exam_imgs,
body .timubox {
    max-width: 100%;
    box-sizing: border-box;
}

body .exam_imgs img,
body .timubox img,
body .tabs img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media screen and (max-width: 639px) {
    body .exam_top,
    body header,
    body .vip_footer {
        left: 0 !important;
        transform: none;
    }

    body .swiper-slide section {
        padding: 0 12px 190px !important;
        padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important;
    }
}