body {margin: 0px;}
b, strong {font-weight: 700;}
.roullWrap {max-width:1200px; margin:0 auto; position:relative; overflow:hidden;}
.roullPaperWrap img {position:absolute;}
.roullPaperWrap img:nth-child(1) {left:2%; top:20%;}
.roullPaperWrap img:nth-child(2) {right:0%; top:20%;}
.roullPaperWrap img:nth-child(3) {left:3%; top:70%;}
.roullPaperWrap img:nth-child(4) {right:2%; top:70%;}

.roullTitle {position: relative; text-align:center;}
.roullTitle h2 {width:fit-content; margin:0 auto; padding:10px 0 50px;}
.roullTitle h2 img {max-width:950px; width:95%; margin:0 auto;}
.roullTitle p {margin: 0; font-weight:bold; font-size:35px; font-family: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif}

.imgWrap {position:relative; overflow: hidden; padding: 150px 0 150px;}
.imgWrap .prizeWrap {width:100%; position:absolute; bottom:-90px; left:50%; transform: translateX(-50%);}
.imgWrap .prizeWrap img {width:95%; max-width:1500px; margin:0 auto; object-fit:cover;}
.imgWrap .mainRoullete {width: 820px; display: flex;align-items: center; flex-direction: column; position: relative; margin:0 auto 100px;}
.imgWrap .mainRoullete canvas {width:820px; height:820px; transition: 2s; z-index:1; box-shadow:0 0 10px rgba(0,0,0,0.3); border-radius:50%;}
.imgWrap .mainRoullete button {width:250px; height:250px;font-size: 50px; position:absolute; left:50%; top:50%; border:0; font-weight: bold; border-radius: 50%; transition: 0.5s; cursor: pointer; transform: translate(-50%,-50%); z-index:1;}
.imgWrap .mainRoullete button:hover {background: #fff; color: #febf00;}
.imgWrap .mainRoullete::after {content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50% 50% 0; top: -70px; left: 50%; transform: translateX(-50%) rotate(45deg); z-index: 22;}
.imgWrap .mainRoullete::before {content:""; width:115%; height:115%; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transition:all 2s;}
.roullFooter {width: 80%; margin: 100px auto; background: #ffffffb5; border-radius: 30px; padding: 50px; position: relative; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1;}
.rewardlist {position: relative; text-align: center; z-index: 5;}
.rewardlist a {font-size: 36px;}

.popup {display: none; position: fixed; padding: 50px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; text-align: center; background: #ffffff; font-size: 20px; color: #000;}
#popupGift{width:70%; max-width: 800px; border-radius: 50px;}
#popupGift .present {display: flex; flex-direction: column; align-items: center; text-align:center;}
#popupGift .present img{width: 100%; max-width: 300px; display:block; margin: 0px auto 30px;}
#popupGift p {font-size: 55px;}
  /* 모바일에서 폰트 크기 줄이기 */
  @media only screen and (max-width: 768px) {
    #popupGift p {
      font-size: 40px; /* 모바일 폰트 크기 */
    }
}
#popupReward{width:100%; max-width: 840px; height: 90%; border-radius: 50px;}
#modalInfo{height: 90%; overflow: auto;}
.popup  .reward {font-size: 35px; color: #666;}
.popup  .close{display: inline-block; padding: 20px 60px; line-height: 50px; font-size: 35px; color: #fff; background: #555; margin: 50px 0 0; text-decoration: none; border-radius: 30px;} 
#popupBackground {display: none; width: 100%; height: 100%; overflow-y: auto; position: fixed; top: 0; right: 0; z-index: 23; background: #ffffff1f; backdrop-filter: blur(29px); -webkit-backdrop-filter: blur(29px);}

#rewardList ul {margin: 30px; padding: 0;}
#rewardList ul li {position: relative; display: flex; flex-direction: column; justify-content: space-around; margin: 20px 0; box-shadow: 3px 1px 13px 0px #0000001f; border-radius: 25px; font-size: 26px; overflow: hidden;}
#rewardList .item_name {padding: 20px 20px 5px; height: 40px; line-height: 40px; text-align: left; font-size: 27px;}
#rewardList .item_addr {padding: 5px 20px; height: 40px; line-height: 40px; text-align: left;}
#rewardList .item_hp {padding: 5px 20px; height: 40px; line-height: 40px; text-align: left;}
#rewardList .addrform {width: 100%; padding: 15px 0px; font-size: 20px; color: #fff; background: #555; text-decoration: none;}
#rewardList .item_payment {padding: 5px 20px 20px; height: 40px; line-height: 40px; text-align: left;}
#rewardList .item_date {padding: 5px 20px; height: 40px; line-height: 40px; text-align: left;}

#payformModal ul {margin: 30px; padding: 0;}
#payformModal ul li {position: relative; display: flex; justify-content: space-around; margin: 20px 0; box-shadow: none; border-radius: 0; font-size: 26px; overflow: hidden;}
#payformModal ul li .zip {display: flex;}
#payformModal ul li .zip button {margin-left: 10px; font-size: 20px; padding: 0 15px; background: #555; color: #fff; border: 0; border-radius: 10px;}
#payformModal ul li input {padding: 10px; font-size: 40px; border: 1px solid #b0b0b0; border-radius: 10px;}
#payformModal ul li label {margin-bottom: 10px; text-align: left; border-radius: 10px;}

#rewardList .item_sub {font-size: 20px; color: #8f8f8f;}

#modalInfo::-webkit-scrollbar {display: none;}
#modalInfo {-ms-overflow-style: none; scrollbar-width: none;}

#payformModal {width:80%; max-width: 800px; max-height: 90%; border-radius: 50px; box-shadow: 0px 0px 20px 20px #00000024; overflow: auto;}

@media (max-width: 850px) {
    .imgWrap {padding:100px 0 50px;}
    .imgWrap .prizeWrap {bottom:-45px;}
    .imgWrap .mainRoullete {width:fit-content;}
    .imgWrap .mainRoullete canvas {width:80%; height:80%;}
    .imgWrap .mainRoullete::before {width:115%; height:115%;}
    .imgWrap .mainRoullete::after {top:-50px; width:50px; height:50px;}
    .imgWrap .mainRoullete button {width:150px; height:150px; font-size:30px;}
}
@media (max-width: 480px) {
    .roullTitle p {font-size:20px;}
    .imgWrap {padding:100px 0 20px;}
    .imgWrap .prizeWrap {bottom:-25px;}
    .imgWrap .mainRoullete button {width:100px; height:100px; font-size:20px;}
}