/* 이벤트 */
.event-type { display: flex; align-items: center; justify-content: center; background-color: var(--default-gray); padding: 1.5%; border-radius: 0.5rem; }
.event-type button { width: 50%; height: auto; padding: 2.5% 0; border-radius: 0.5rem; font-size: 2rem; font-weight: bold; color:#fff;}
.event-type button.on { background-color: #fff;  color: #303030; }

.btn-sort {margin: 5% 0 3%;}

#event-contents  { background-color: var(--default-background); padding: 4% 4% 6%;}
#event-contents > p {display:inline-block; width:fit-content; font-size: 3rem; font-weight: 700; margin-bottom:5%;}

.board-list.event {padding:0;}
.board-list.event .board-info {border-bottom: none; background-color: #fff; border-radius:2rem; padding: 4%; margin-bottom: 4%; box-shadow: 0px 0px 1px 0px var(--default-gray);}

.other-view {padding:0 0 6%;}

/* 참여형 대결 이벤트 */
#activity-event {}

#activity-event #vote-area {position: relative; width:100%; height:auto; aspect-ratio: 130 / 254; background: url('https://swimg.wowtv.co.kr/stockwinN/event/activity/img-01.jpg') no-repeat center; background-size:contain;}
#activity-event #vote-area #frmVote { position: absolute; display: flex; align-items: center; bottom: 23.7%; left: 0; width: 100%; justify-content: center; gap: 3%; }
#activity-event #vote-area #frmVote figure {width:22.5rem; height:auto; aspect-ratio: 244 / 389; background:url('https://swimg.wowtv.co.kr/stockwinN/event/activity/off.png') no-repeat center; background-size:100%; cursor:pointer;}
#activity-event #vote-area #frmVote figure.clk {background-image: url('https://swimg.wowtv.co.kr/stockwinN/event/activity/on.png');}
#activity-event #vote-area #frmVote figure div { width: 18rem; height: auto; aspect-ratio: 1 / 1; margin: 12% auto 5%; border-radius:50%; overflow:hidden; background:url('https://swimg.wowtv.co.kr/stockwinN/event/activity/empty.png') no-repeat center; background-size:contain;}
#activity-event #vote-area #frmVote figure div img { width: 100%; object-fit: contain; }
#activity-event #vote-area #frmVote figure figcaption { font-size: 2.8rem; font-weight: bold; text-align: center; }

#activity-event #vote-area p { width: 100%; position: absolute; left: 0; bottom: 18.5%; color: #fff; font-size: 3rem; text-align: center; }
#activity-event #vote-area.voted p {bottom: 14%; line-height: 1.35;}

#activity-event #btn-vote {position:absolute; bottom:7%; background-color:#0c0c0c; padding:0;}

#activity-event #vote-rate { display: none; background-color: #0c0c0c; width: 100%; padding: 0 0 9%; margin-top: -6%; z-index: 3; position: absolute; bottom:0; }
#activity-event #vote-rate > div { width: 80%; background-color: rgba(230, 230, 230, 0.3); border-radius: 3rem; margin: 0 auto; overflow: hidden; height: 2rem; }
#activity-event #vote-rate > div > div { background-color: #0090ff; border-radius: 3rem; width:0; height: 100%; }

#activity-event #vote-rate span { float: right; padding-right: 11%; font-size: 2.8rem; font-weight: bold; color: #e6e6e6; margin-top: 3%; }
#activity-event #vote-rate span::after {content:'%';}
#activity-event #vote-rate span.vote { float: left; padding-left: 11%; color: #1c9cff; }

#activity-event #activity-info {position:relative;}
#activity-event #activity-info span { background-color: #fff; position: absolute; bottom: 28.5%; left: calc((25% - 2rem) - 4.5%); font-size: 4rem; font-weight: 800; padding: 2% 5%; }

#activity-event > img:last-child {margin-top:-15%;}

@media (max-width:600px) {
    #activity-event #vote-area #frmVote {}
    #activity-event #vote-area #frmVote figure {width:19rem;}
    #activity-event #vote-area #frmVote figure div {width:16rem;}
    #activity-event #vote-area #frmVote figure figcaption { font-size: 2.4rem; }

    #activity-event #vote-area p {bottom: 18%; font-size: 2.6rem;}

    #activity-event #btn-vote {bottom:7%;}

    #activity-event #vote-rate {margin-top:-10%;}
    #activity-event #vote-rate span {font-size:2.4rem; font-weight:600;}

    #activity-event #activity-info span { bottom: 28.5%; left: calc((25% - 1.25rem) - 4.5%); font-size: 3.5rem;}
}

@media (max-width:400px) {
    #activity-event #vote-area #frmVote {}
    #activity-event #vote-area #frmVote figure {width:17rem;}
    #activity-event #vote-area #frmVote figure div {width:14.5rem;}
    
    #activity-event #vote-area p {font-size: 2.3rem;}

    #activity-event #btn-vote {bottom:7%;}
    
    #activity-event #vote-rate {margin-top:-10%;}
    #activity-event #vote-rate span {font-size:2.4rem; font-weight:600;}
    
    #activity-event #activity-info span { bottom: 28.5%; left: calc((25% - 1.6rem) - 4.5%); font-size: 3.2rem; }
}