/* 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: 95.83vw; left: 50%; transform: translate(-50%, 0);
    width:85%; height: 85.0000vw;
}
/* 룰렛 크기 */
.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: 100%; height: 100%; top: 0px; left: 0px;
    z-index: 10; border-radius: 50%;
    background: url(../img/event/app/roulette_20220915/edge_new.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_20220915/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.3; margin-top: 3.3333vw;
}
.r-count .yellow{
    color: #ffed26; font-size: 6.1111vw; font-weight: 300;
}
.r-count .yellow .count{
    color: #ffed26; font-size: 11.11vw; font-weight: bold; 
    vertical-align: baseline;
}
.r-count .color{
    color: #583c31; font-size: 6.1111vw; font-weight: 300;
}
.r-count .color .count{
    color: #583c31; font-size: 11.11vw; font-weight: bold;
    vertical-align: baseline;
}
.r-count p:last-child{
    color: #222222; font-size: 3.3380vw;
}
.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: white;
    transform: rotate(90deg);
}
.roulette-box .board_2 {
    background: #EAEAEA;
    transform: rotate(162deg);
}
.roulette-box .board_3 {
    background: white;
    transform: rotate(234deg);
}
.roulette-box .board_4 {
    background: #EAEAEA;
    transform: rotate(306deg);
}
.roulette-box .board_5 {
    background: #ff7900;
    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_20220915/text_500.png)no-repeat;
    background-size: 100% 100%;
    width: 64px; height: 50px; top: 75px; left: 40px;
    width: 27.5382vw; height: 13.9082vw; top: 22vw; left: 8vw;
}
.roulette-box .board_2::after{
    background: url(../img/event/app/roulette_20220915/text_1000.png)no-repeat;
    background-size: 100% 100%;
    width: 27.5382vw; height: 13.9082vw; top: 24vw; left: 8vw;
}
.roulette-box .board_3::after{
    background: url(../img/event/app/roulette_20220915/text_5000.png)no-repeat;
    background-size: 100% 100%;
    width: 27.5382vw; height: 13.9082vw; top: 24vw; left: 9vw;
}
.roulette-box .board_4::after{
    background: url(../img/event/app/roulette_20220915/text_50000.png)no-repeat;
    background-size: 100% 100%;
    width: 27.5382vw; height: 13.9082vw; top: 23.8333vw; left: 8.1111vw;
}
.roulette-box .board_5::after{
    background: url(../img/event/app/roulette_20220915/text_100000.png)no-repeat;
    background-size: 100% 100%;
    width: 27.5382vw; height: 13.9082vw; top: 22.5vw; left: 7.1111vw;
}
/* 룰렛 끝 */
@media (min-width: 719px){
    .r-absol{
        width: 80%; top: 635px;
    }
    .r-count{
        margin-top: 30px;
    }
    .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: 198px; height: 100px; top: 140px; left: 43px;
    }
    .roulette-box .board_2::after{
        /* width: 85px; height: 50px; top: 80px; left: 25px; */
        width: 198px; height: 100px; top: 150px; left: 38px;
    }
    .roulette-box .board_3::after{
        width: 198px; height: 100px; top: 148px; left: 35px;
    }
    .roulette-box .board_4::after{
        width: 198px; height: 100px; top: 144px; left: 39px;
    }
    .roulette-box .board_5::after{
        width: 198px; height: 100px; top: 146px; left: 38px;
    }
    /*.r-count .yellow{*/
    /*    font-size: 40px;*/
    /*}*/
    /*.r-count .yellow .count{*/
    /*    font-size: 73px;*/
    /*}*/
    .r-count .color{
        font-size: 50px;
    }
    .r-count .color .count{
        font-size: 100px;
    }
    .r-count p:last-child{
        font-size: 24px;
    }
}
.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;
}
@media (max-width: 719px){
.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;
}
}
/* 상미 */
.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%; 

} */