.wrap-loading{
    z-index: 9999;
    position: fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: rgba(0,0,0,0.2); /*not in ie */
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */
}
.wrap-loading div{
    position: fixed;
    top:50%;
    left:50%;
    margin-left: -21px;
    margin-top: -21px;
}
.display-none{
    display:none;
}

.wrap-loading img{
    width:50px;
}

.as_strong {
    color: #000;
    font-size: 3.2vw;
    font-weight: 600;
}

.wid150{
    width:150px;
}

.quizbtn{
    width:100%; height: 60px; border:0px; background-color: #80c269; color:white; font-weight: bold; bottom:0; }

.width100{
    width:100%;
}

/* =========================================================
   태블릿(iPad) 퀴즈 화면 보정  —  2026-07-14
   기존 퀴즈 CSS 는 크기를 vw 로 잡아서, 화면이 넓은 태블릿에서
   - 하단 고정 [이전/다음] 바가 200px 넘게 부풀어 문제/답을 덮고
   - 반대로 [시작하기] 는 px 고정(60px)이라 홀로 작아 보인다.
   651px 이상에서만 px 로 다시 잡는다. (모바일에는 영향 없음)
   ========================================================= */
@media only screen and (min-width: 651px) {

    /* 하단 고정 이전/다음 바 */
    .quiz_btnbox { bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
    .quiz_btnbox li a { height: 76px; line-height: 76px; font-size: 26px; }

    /* 고정 바에 문제와 답이 가리지 않도록 아래 여백 확보 */
    .quiz_wrap .quiz_box { margin-bottom: 140px; }
    .quiz_wrap .quiz_box .inner { padding-bottom: 40px; }
    .quiz_wrap .quiz_list_wrap { padding-bottom: 180px; }

    /* 문제 본문이 CMS 인라인 스타일 때문에 작게 박혀 나온다 */
    .quiz_wrap .quiz_box .inner > p,
    .quiz_wrap .quiz_box .inner > p * {
        font-size: 26px !important;
        line-height: 1.6 !important;
    }

    /* 시작하기 */
    .quizbtn { height: 84px; font-size: 26px; }
}

/* =========================================================
   태블릿(iPad) 홈 화면 보정  —  2026-07-14
   main_bg.jpg (750x687) 를 background-size: contain 으로 깔아서,
   폭이 넓은 태블릿에서는 배경 높이가 938px 까지 늘어나고
   검색창(top:105.6vw ≈ 1080px)이 화면 아래로 밀려난다.
   651px 이상에서만 배경을 cover 로 잘라내고 본문을 위로 올린다.
   ========================================================= */
@media only screen and (min-width: 651px) {

    /* 배경: 비율 유지한 채 위쪽 420px 만 보이게 자르고, 그 아래는 흰색 */
    .page_main .main_wrap {
        background-image:
            linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,0) 420px, #fff 420px),
            url("/images/main_bg.jpg");
        background-repeat: no-repeat, no-repeat;
        background-position: 0 0, center top;
        background-size: 100% 100%, cover;
    }

    .page_main .main_wrap h1 { top: 36px; width: 240px; height: 205px; }

    /* 검색 + 퀵메뉴를 배경 바로 아래로 끌어올린다 */
    .page_main .main_wrap .util_box { top: 460px; left: 40px; right: 40px; }

    .page_main .main_wrap .util_box .search_box { padding-right: 72px; }
    .page_main .main_wrap .util_box .search_box .input_box label { height: 56px; line-height: 56px; font-size: 16px; padding: 0 20px; }
    .page_main .main_wrap .util_box .search_box .input_box input { height: 56px; line-height: 56px; font-size: 18px; padding: 0 20px; }
    .page_main .main_wrap .util_box .search_box button { width: 56px; height: 56px; }
    .page_main .main_wrap .util_box .search_box button span.icon {
        width: 28px; height: 28px; margin-top: -14px; margin-left: -14px;
        background-size: 500px; background-position: 0 -238px;
    }

    /* 퀵메뉴 아이콘: vw 라서 태블릿에서 과하게 커진다 */
    .page_main .main_wrap .util_box .quick_list { margin-top: 44px; }
    .page_main .main_wrap .util_box .quick_list ul { justify-content: center; gap: 32px; }
    .page_main .main_wrap .util_box .quick_list ul li { width: 88px; height: 88px; }
    .page_main .main_wrap .util_box .quick_list ul li a { height: 76px; font-size: 16px; }
    .page_main .main_wrap .util_box .quick_list ul li a i { font-size: 44px; }
}