* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: #ffffff;
    overflow: hidden;
}

.home {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.question {
    position: relative;
    width: min(300px, 72vw);
}

.question img {
    width: 100%;
    height: auto;
    display: block;
}

/* 투명 클릭 영역 */
.choice {
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.15s ease;
    border-radius: 2px;
}

/* ㄱ. Z축 모의고사에 관하여 */
.choice-a {
    left: 9%;
    top: 35%;
    width: 40%;
    height: 15px;
}

/* ㄴ. 문제 */
.choice-b-problem {
    left: 42%;
    top: 49%;
    width: 10%;
    height: 15px;
    z-index: 20;
}

/* ㄴ. 답지·해설 */
.choice-b-solution {
    left: 53%;
    top: 49%;
    width: 15%;
    height: 15px;
    z-index: 20;
}

/* ㄷ. 1회 */
.choice-c-1 {
    left: 27%;
    top: 60%;
    width: 7%;
    height: 15px;
}

/* ㄷ. 2회 */
.choice-c-2 {
    left: 36%;
    top: 60%;
    width: 7%;
    height: 15px;
}

/* ㄷ. 공통 */
.choice-c-common {
    left: 45%;
    top: 60%;
    width: 7%;
    height: 15px;
}

/* 마우스를 올렸을 때 형광펜 효과 */
.choice:hover {
    background-color: rgba(255, 225, 80, 0.32);
}