@charset "utf-8";

#event20251201{ max-width: 700px; margin: 0 auto; }
#event20251201 > div{ display: flex; flex-direction: column;}
#event20251201 .dtl{ background: url(./images/event/20251021/event_dtl.jpg);}
#event20251201 img{ max-width: 100%;}
#event20251201 .btn{ display: flex; width: 100%;}
#event20251201 .btn a{ display: flex; width: 50%; height: 60px; justify-content: center; align-items: center; background: #2181de;}
#event20251201 .btn a.hint{ background: #d66912;}
#event20251201 > div .btn a{ width: 100%;}
#event20251201 .eventForm{ width: 550px; margin: 20px auto 30px}
#event20251201 .eventForm ul{ display: flex; flex-wrap: wrap; gap: 6px;}
#event20251201 .eventForm ul li{ width: calc(50% - 3px); color: #000; display: flex; gap: 15px}
#event20251201 .eventForm ul li:last-child{ width: 100%; border-top: 1px dashed #84563b; padding-top: 20px; margin-top: 15px; position: relative; flex-direction: column; gap: 5px}
#event20251201 .eventForm ul li label{ font-size: 15px; font-weight: 600; white-space: nowrap; display: flex; align-items: center;}
#event20251201 .eventForm .inputData{ background: #ffe5a0; border: 1px solid #84563b; height: 40px; padding: 0 0 0 10px; box-sizing: border-box; font-weight: 600; width: 100%;}
#event20251201 .eventForm .inputData.w60{ width: 60% !important;}
#event20251201 .eventForm textarea.inputData{ height: 100px; padding: 10px;}
#event20251201 .eventForm .agree{ position: absolute; right: 0; top: 10px; display: flex; gap: 8px; line-height: 35px; align-items: center;}

#event20251201 .event_ft{ float:right; padding: 0px; display: block; justify-content: space-between;}
#event20251201 .event_ft p{ display:contents; }
#event20251201 .event_ft label, #event20251201 .event_ft a{ font-size: 13px; font-weight: 600;}

@media (max-width: 699px) {
    #event20251201 .eventForm{ width: 80%; }
    #event20251201 .eventForm ul{ gap: 15px}
    #event20251201 .eventForm ul li{ width: 100%; flex-direction: column; gap: 5px}
    #event20251201 .eventForm .inputData, #event20251201 .eventForm .inputData.w60{ width: 100% !important;}
    #event20251201 .eventForm .agree{ position: static;}
}



.img-wrapper {
    position: relative;
    width: 100%;              /* 부모 기준 100% */
    max-width: 620px;         /* 필요하면 최대 크기 제한 */
}

.img-wrapper img {
    width: 100%;
    display: block;
}

/* 공통 스타일 */
.hit-area {
    position: absolute;
    cursor: pointer;
    /* background: rgba(255,0,0,0.2);  // 디버깅용 눈에 보이게 할 때 */
}

/* 버튼1 */
.btn1 {
    left: 38%;    /* 왼쪽으로부터 20% 위치 */
    top: 60%;     /* 위에서 60% 위치 */
    width: 24%;   /* 이미지 너비의 25% */
    height: 5%;  /* 이미지 높이의 15% */
}

/* 버튼2 */
.btn2 {
    left: 7%;
    top: 86%;
    width: 86%;
    height: 8%;
}