/* event css */
/* event-detail default 클래스 내에서 작업 */


.event-detail .down-link{
    display: flex; width: 100%;
}
/* 웹 다운로드 링크 */
.event-detail .down-link a{
    width: 50%; 
    /* height: 100%; */
    height: auto;
}
/* 이벤트 페이지 이동 */
.event-detail .e-link img{
    width: 100%;
}
.event-detail .down-link .e-link img{
    object-fit: contain;
    /*width: 99.9%;*/
}


/* 룰렛 */
.r-absol {
    position: absolute;
    top: 89.6389vw; /* 기존 top 값을 유지 */
    left: 50%;
    transform: translate(-50%, 0);
    width: 85%;
    height: 85.6389vw;
}

/* 룰렛 크기 */
.roulette-box {
    width: 100%; height: 100%;
    margin: 0 auto; box-sizing: content-box; 
    /* border: 3px solid black;  */
}
/* 룰렛 레이어 */
.roulette-box .roulette-layer {
    position: relative;
    width: 100%; height: 100%;
    /* 반응형으로 다시 설정 */
}
/* 룰렛 top */
.roulette-top {
    position: absolute;
    top: 0.5556vw;
    width: 8.8889vw; height: 7.8889vw;
    left: 50%;
    transform: translate(-50%, 0px);
    z-index: 3;
}
.roulette-box .roulette{
    position: relative;
    width: 100%; height: 100%;
    border-radius: 50%;
    transform: rotate(0);
    z-index: 2; box-sizing: border-box; background: white;
}
.roulette-box .roulette::after{
    position: absolute; content: '';
    width: 101%; height: 101%; top: -3px; left: -3px;
    z-index: 10;
    /*border-radius: 50%;*/
    background: url(../img/event/app/roulette_20250616/edge.png)no-repeat center center;
    background-size: 100% 100%;
}
.roulette-box .event-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-clip-path: polygon(0% 34%, 50% 50%, 0% 120%, 0% 0%);
    clip-path: polygon(0% 34%, 50% 50%, 0% 120%, 0% 0%);
    z-index: 2;
    overflow: hidden;
}
.roulette-box .start-btn{
    position: absolute;
    width: 22.2531vw; height: 22.2531vw; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: url(../img/event/app/roulette_20250616/btn_start.png)no-repeat;
    background-size: 100% 100%;
    display: inline-block; padding: 0;
    z-index: 2; border: 0;
}
.r-count{
    text-align: center; line-height: 1.2; margin-top: 4vw;
}
.r-count .yellow{
    color: #ffed26; font-size: 6.1111vw; font-weight: 300;
}
.r-count .yellow .count{
    color: #ffed26; font-size: 13.194vw; font-weight: bold;
    vertical-align: baseline;
}
.r-count .color{
    color: #ffffff; font-size: 6.1111vw; font-weight: 400;
}
.r-count .color .count{
    color: #8afe5b; font-size: 16vw; font-weight: bold; margin-right: 2px;
    vertical-align: baseline;
}
.r-count p:last-child{
    color: #ffffff; font-size: 4.583vw;
}
.roulette-box .event-content .event-text {
    position: absolute;
    left: -999px;
    z-index: -1;
}
.roulette-box .board{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-clip-path: polygon(31.5% 0%, 50% 50%, 0% 55.5%, 0% 0%);
    clip-path: polygon(31.5% 0%, 50% 50%, 0% 55.5%, 0% 0%);
}
.roulette-box .board .content {
    font-size: 8.3333vw; font-weight: bold; text-indent: -999vw;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 20px;
    left: 20px;
    text-align: center;
    transform: rotate(-60deg);
}
.roulette-box .board_1 {
    background: #ffffff;
    transform: rotate(90deg);
}
.roulette-box .board_2 {
    background: #F7F5F5;
    transform: rotate(162deg);
}
.roulette-box .board_3 {
    background: #ffffff;
    transform: rotate(234deg);
}
.roulette-box .board_4 {
    background: #F7F5F5;
    transform: rotate(306deg);
}
/*1만엔 코인 영역*/
.roulette-box .board_5 {
    background: #232B26;
    transform: rotate(380deg);
}
.roulette-box .board::after{
    display: inline-block; content: ''; 
    position: absolute; top: 55px; left: 20px;
    transform: rotate(-56deg);
}
.roulette-box .board_1::after{
    background: url(../img/event/app/roulette_20250616/text_500.png)no-repeat;
    background-size: 100% 100%;
    /*width: 64px; height: 50px; top: 75px; left: 40px;*/
    width: 27vw; height: 14vw; top: 21.5vw; left: 8vw;
}
.roulette-box .board_2::after{
    background: url(../img/event/app/roulette_20250616/text_1000.png)no-repeat;
    background-size: 100% 100%;
    width: 27vw; height: 14vw; top: 25vw; left: 7.75vw;
}
.roulette-box .board_3::after{
    background: url(../img/event/app/roulette_20250616/text_5000.png)no-repeat;
    background-size: 100% 100%;
    width: 28vw; height: 15vw; top: 22.5vw; left: 8vw;
}
.roulette-box .board_4::after{
    background: url(../img/event/app/roulette_20250616/text_50000.png)no-repeat;
    background-size: 100% 100%;
    width: 28vw; height: 15vw; top: 22.8333vw; left: 8.1111vw;
}
.roulette-box .board_5::after{
    background: url(../img/event/app/roulette_20250616/text_100000.png)no-repeat;
    background-size: 100% 100%;
    width: 34.5vw; height: 19vw; top: 20vw; left: 4vw;
}
/* 룰렛 끝 */
@media (min-width: 719px){

    .r-count {
        margin-top: 33px; /* 추가: 이 값을 조정하여 아래로 이동 */
    }

    .r-absol{
        width: 80%; top: 595px;
    }

    .r-absol{
        width: 561px; height: 561px;
    }
    .roulette-box .board{
        /* clip-path: polygon(27.5% 0%, 50% 50%, 0% 55%, 0% 0%); */
    }
    .roulette-top{
        width: 58.7px; height: 52.7px; top: 4px;
    }
    .roulette-box .start-btn{
        width: 160px; height: 160px;
    }
    .roulette-box .board_1::after{
        /* width: 64px; height: 50px; top: 75px; left: 40px; */
        width: 200px; height: 100px; top: 138px; left: 44px;
    }
    .roulette-box .board_2::after{
        /* width: 85px; height: 50px; top: 80px; left: 25px; */
        width: 200px; height: 100px; top: 157px; left: 44px;
    }
    .roulette-box .board_3::after{
        width: 210px; height: 105px; top: 145px; left: 40px;
    }
    .roulette-box .board_4::after{
        width: 210px; height: 105px; top: 144px; left: 41px;
    }
    .roulette-box .board_5::after{
        width: 225px; height: 119px; top: 134px; left: 24px;
    }
    /*.r-count .yellow{*/
    /*    font-size: 40px;*/
    /*}*/
    /*.r-count .yellow .count{*/
    /*    font-size: 73px;*/
    /*}*/
    .r-count .color{
        font-size: 44px;
        font-weight: 400;
    }
    .r-count .color .count{
        font-size: 95px;
        margin-right: 2px;
    }
    .r-count p:last-child{
        font-size: 34px;
        margin-top: 10px;
        font-weight: 500;
    }
}
.event-detail .youtube-url{
    width: 100%; height: 58.8889vw;
    height: 424px;
}
/* check event */
.event-detail .check-list{
    background: url(../img/event/web/pungja/pungja07.jpg)no-repeat;
    background-size: 99.9% 100%;
    height: 260px;
    padding: 0 80px;
}
.event-detail .check-list label{
    position: relative;
    display: block;
}
.event-detail .check-list input{
    display: none;
}
.event-detail .check-list .radio-span{
    position: absolute;
    width: 34px; height: 34px;
    border: 3px solid #000;
}
.event-detail .check-list input[type="radio"]:checked + .radio-span{
    border: 3px solid #000;
}
.event-detail .check-list input[type="radio"]:checked + .radio-span::after{
    width: 20px; height: 20px;
}
.event-detail .check-list .label-text{
    font-size: 28px;
    text-indent: 52px;
}

.event-detail .youtube-url{
    width: 100%; height: 58.8889vw;
}
.event-detail .check-list{
    height: 42.6389vw;
    padding: 0 11.1111vw;
    background-size: 100% 100%; 
}
.event-detail .check-list .radio-span{
    width: 5vw; height: 5vw;
    border: 0.6944vw solid #000;
}
.event-detail .check-list input[type="radio"]:checked + .radio-span{
    border: 0.6944vw solid #000;
}
.event-detail .check-list input[type="radio"]:checked + .radio-span::after{
    width: 2.7778vw; height: 2.7778vw;
}
.event-detail .check-list .label-text{
    font-size: 4.444vw;
    text-indent: 7.7778vw;
}
.roulette-box .roulette::after {
    top: -2px; left: -2px;
}

/* 상미 */
.event-detail .check-div {
    background: url(../img/event/web/pungja/pungja07.jpg)no-repeat;
    background-size: 100% 100%;
    padding-left: 11vw;
    width: 100%; height: 100%; top: 101%; left: 100%; 
}
.check-div label{
    text-indent: 1vw;
    display: block;
    height: 7vw;
    padding: 1vw;
}
.check-div label .radio-span{
    display: block;
    width: 90%;
}
.check-div label .radio-span p{
    display: contents;
    font-size: 4vw;
    width: 100%;
    text-indent: 1vw;
}
.check-div label .radio-span .fake-radiobutton{
    display: inline-block;
    width: 5vw;
    height: 5vw;
    background: white;
    border: 0.6vw solid black;
    border-radius: 50%;
}
/* .check-div label input[type="radio"]:checked + .check-div label .radio-span .fake-radiobutton::after {
    display: inline-block;
}
.check-div label .radio-span .fake-radiobutton::after {
    border-radius: 50%;
    width: 2.5vw; height: 2.5vw; top: 50%; left: 50%; 

} */