@charset "utf-8";

/* event list */

.event-list > li { border: 0.05rem solid rgba(143, 135, 170, 0.5); margin-bottom: 10px; width: 100%; background-color: rgba(20, 20, 30, 0.5); }
.event-list li:hover { background-color: rgba(30, 30, 40, 0.5); }
.event-list li a { position: relative; padding: 20px; display: block; }
.event-list li a:after { content: ''; display: block; clear: both; visibility: hidden; }

.event-tit:after { content: ''; display: block; clear: both; visibility: hidden; }
.event-tit p { color: #aaa; font-size: 16px; font-size: 1.6rem; margin-right: 10px; padding: 0 15px; float: left; background-color: #191919; line-height: 36px; border-radius: 18px; }
.event-tit h1 { float: left; line-height: 36px; color: #aaa; font-size: 20px; font-size: 2.0rem; }
.event-tit span { float: right; font-size: 12px; font-size: 1.2rem; color: #999; line-height: 36px; }

.event-info { margin-top: 10px; border-top: 0.05rem solid rgba(143, 135, 170, 0.5); }
.event-info:after { content: ''; display: block; clear: both; visibility: hidden; }
.event-price { color: #999; font-size: 16px; font-size: 1.6rem; line-height: 36px; float: left; }
.event-price strong { color: #ffcc00; }
.event-stat { color: #555; font-size: 16px; font-size: 1.6rem; line-height: 36px; float: right; }

.event-list li:hover .event-tit h1 { color: #fff; }

.event-attend-info { margin-top: 10px; padding-top: 10px; width: 100%; border-top: 0.05rem solid rgba(143, 135, 170, 0.5); }
.event-attend-info:after { content: ''; display: block; clear: both; visibility: hidden; }
.event-attend-info li { font-size: 14px; font-size: 1.4rem; line-height: 24px; float: left; width: 50%; }
.event-attend-info li em { margin-right: 10px; color: #999; }
.event-attend-info li span { color: #aaa; }


@media all and (max-width:640px){
    .event-list > li { margin-bottom: 0; border-bottom: 0.05rem solid rgba(143, 135, 170, 0.5); }
	.event-tit p { width: auto; float: left; font-size: 12px; font-size: 1.2rem; line-height: 24px; border-radius:12px; margin-right: 0; padding: 0 15px; }
    .event-tit h1 { color: #fff; float: none; clear: both; display: block; width: 100%; line-height: 36px; font-size: 18px; font-size: 1.8rem; }
    .event-tit span { display: block; position: absolute; top: 20px; right: 20px; font-size: 11px; font-size: 1.1rem; line-height: 24px; }
    .event-info { margin: 0; }
    .event-price,
    .event-stat { font-size: 14px; font-size: 1.4rem; }

    .event-attend-info li em { margin-right: 0; display: block; width: 100%; }
    .event-attend-info li span { color: #aaa; }
}


/* event view */
.event-view-tit-wrap { position: relative; }
.event-view-tit { padding: 15px 20px; border-bottom: 0.05rem solid rgba(143, 135, 170, 0.5); }
.event-view-tit h1 { font-size: 24px; font-size: 2.4rem; line-height: 1.5; }
.event-view-tit span { display: block; color: #999; font-size: 14px; font-size: 1.4rem; line-height: 1.5; }

.event-view-price { position: absolute; top: 50%; right: 20px; margin-top: -25px; text-align: right; }
.event-view-price span { margin-right: 20px; vertical-align: middle; display: inline-block; font-size: 16px; font-size: 1.6rem; color: #aaa; line-height: 50px; }
.event-view-price h2 { font-weight: normal; vertical-align: middle; display: inline-block; font-family: 'khand'; font-size: 34px; font-size: 3.4rem; color: #ffcc00; line-height: 50px; }

.event-view-content { padding: 20px; font-size: 16px; font-size: 1.6rem; color: #aaa; }

.event-bet-wrap { padding: 20px; background: rgba(0, 0, 0, 0.5); }
.event-bet-wrap > li { padding: 20px 0; border-top: 0.05rem solid rgba(143, 135, 170, 0.5); }
.event-bet-wrap > li:first-child { border-top: none; }
.event-bet-wrap > li:after { content: ''; display: block; clear: both; visibility: hidden; }
.event-bet-wrap > li > div { margin: 15px 0; text-align: center; position: relative; float: left; width: 33.333333%; height: 200px; }
.event-bet-wrap > li > div.sub_box { height: auto; }
.event-bet-wrap > li > div > img { position: absolute; top: 50%; left: 50%; margin-top: -70px; margin-left: -70px;}
.event-bet-wrap .team-win { z-index: 1; transform: rotate(-30deg); position: absolute; top: 0; left: 0; width: 50px; height: 50px; text-align: center; border-radius: 50%; background-color: #810185; }
.event-bet-wrap .team-win i { font-size: 26px; font-size: 2.6rem; line-height: 50px; }
.event-bet-wrap .event-bet { font-size: 16px; font-size: 1.6rem; padding-top: 160px; position:relative; margin: 0 auto; border-radius: 10px; width: 50%; height: 200px; display: block; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; }
.event-bet-wrap .event-bet:hover { margin-top: -10px; background-color: #2f2f2f; }
.event-bet-wrap .event-bet.active { background-color: #810185; }
.event-bet-wrap .event-bet.disabled:hover,
.event-bet-wrap .event-bet.disabled.active { cursor: default; background-color: transparent; }
.event-bet-wrap .event-bet > img { position: absolute; top: 10px; left: 50%; margin-left: -40%; width: 80%; max-height: 140px; }
.event-bet-wrap > li > div.conNull { width: 100%; }

.event-attend-list-tit { font-size: 20px; font-size: 2.0rem; font-weight: normal; line-height: 40px; }

.event-attend-list:after { content: ''; display: block; clear: both; visibility: hidden; }
.event-attend-list dt,
.event-attend-list dd { vertical-align: center; font-size: 0; width: 50%; float: left; }
.event-attend-list dt { background-color: #000; }
.event-attend-list dd { border-bottom: 0.05rem solid rgba(143, 135, 170, 0.5); }
.event-attend-list dt > div,
.event-attend-list dd > div { line-height: 36px; text-align: center; display: inline-block; width: 33.333333%; font-size: 14px; font-size: 1.4rem; color: #aaa; }
.event-attend-list dt > div { color: #fff; }
.event-attend-list dd > div { color: #aaa; }
.event-attend-list dd > div i { color: #810185; }

@media all and (max-width:640px){
    .event-view-tit { padding: 15px; }
    .event-view-tit h1 { font-size: 18px; font-size: 1.8rem; }
    .event-view-tit span { font-size: 11px; font-size: 1.1rem; }
    .event-view-price { border-bottom: 0.05rem solid rgba(143, 135, 170, 0.5); padding: 15px; position: relative; width: 100%; top: 0; left: 0; margin: 0; }
    .event-view-price h2 { line-height: 40px; font-size: 24px; font-size: 2.4rem; }
    .event-view-price span { line-height: 40px; }
    .event-view-content { padding: 15px; font-size: 12px; font-size: 1.2rem; }

    .event-bet-wrap { padding: 10px; }
    .event-bet-wrap > li { padding: 10px 0; }
    .event-bet-wrap .event-bet { width: 96%; }
    .event-bet-wrap > li > div { height: 130px; margin: 0; }
    .event-bet-wrap > li > div > img { width: 70px; margin-top: -35px; margin-left: -35px;}
    .event-bet-wrap .event-bet { padding-top: 90px; height: 130px; }
    .event-bet-wrap .event-bet > img { width: 70px; margin-left: -35px; }

    .event-attend-list-tit { font-size: 16px; font-size: 1.6rem; }
    .event-attend-list dt.mobile { display: none; }
    .event-attend-list dt,
    .event-attend-list dd { width: 100%;}
    .event-attend-list dt > div,
    .event-attend-list dd > div { font-size: 10px; font-size: 1.0rem; }
}


/* 스코어 이벤트 페이지 */
.sc_re_box {
	display: block; width: 100%; text-align: center;
	position: relative;
}
.sc_re {
	display: block; width: 100%; text-align: center;
	font-size: 40px; font-weight: bold; color: #00ccff;
	height: 80px; line-height: 80px; background-color: #222;
	border-radius: 10px;
}
.sc_num_btn {
	display: inline-block; outline: none; border: none;
	background-color: transparent;
	color: #ddd; font-weight: bold; font-size: 40px;
	width: 40px; height: 40px; text-align: center;
	line-height: 40px; position: absolute;
	top: 50%; margin-top: -20px; cursor: pointer;
	vertical-align: middle;
}
.sc_num_btn.mi { left: 0px; }
.sc_num_btn.pl { right: 0px; }

.sc_sel_box { margin-top: 5px; width: 100%; display: block; font-size: 0; word-spacing: 0; }
.sc_sel_box * { box-sizing: border-box; }
.sc_sel_box li {
	display: inline-block;
	width: 20%;
	padding: 2.5px;
}
.sc_sel_box li input[type="radio"] { display: none; }
.sc_sel_box li label.sc_sel_btn {
	display: block; width: 100%;
	background-color: #222;
	border-radius: 4px;
	font-size: 16px; color: rgb(209, 209, 209); text-align: center;
	height: 40px; line-height: 40px;
    cursor: pointer;
}
.sc_sel_box li label.sc_sel_btn:hover {
	background-color: #333; color: #fff;
}
.sc_sel_box li input[type="radio"]:checked + label.sc_sel_btn {
	background-color: #810185; color: #fff;
	font-weight: bold;
}
@media all and (max-width:860px){
    .sc_sel_box { display: none; }
    .sc_re {
        font-size: 30px;
        height: 40px;
        line-height: 40px;
    }
    .sc_num_btn {
        font-size: 30px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin-top: -15px;
    }
}
/* 스코어 이벤트 페이지 */

/*  로또 이벤트 페이지 */
.lotto-event-wrap { padding: 20px; background: rgba(0, 0, 0, 0.5); }
.lotto-event-wrap h3 { line-height: 36px; color: #fff; font-size: 16px; font-size: 1.6rem; font-weight: normal; text-align: left; }
.lotto-event-list { margin-bottom: 20px; width: 100%; box-sizing: border-box; padding: 0 0.5%; overflow: hidden; background-color: #1f1f1f; }
.lotto-event-list li { width: 10%; padding-top: 8%; position: relative; float: left; }
.lotto-event-list li input[type=checkbox] { display: none; }
.lotto-event-list li input[type=checkbox] + label {
    display: block; width: 60px; height: 60px; border-radius: 50%;
    position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px;
    text-align: center; line-height: 60px; color: #aaa; font-size: 14px; font-size: 1.4rem;
    background: #000; cursor: pointer;
}
.lotto-event-list li input[type=checkbox] + label:hover { color: #fff; line-height: 70px; width: 70px; height: 70px; margin-top: -35px; margin-left: -35px; background: #333; }
.lotto-event-list li input[type=checkbox]:checked + label {
    background: #810185; color: #fff; font-weight: bold; line-height: 70px; width: 70px; height: 70px; margin-top: -35px; margin-left: -35px;
}
.checked-number-list {text-align: center; box-sizing: border-box; width: 100%; height: 90px; padding: 15px; background: #333; }
.checked-number-list .checked-number { border-radius: 30px; color: #fff; font-size: 16px; font-size: 1.6rem; font-weight: bold; display: inline-block; width: 60px; height: 60px; background: #d31d3f; text-align: center; line-height: 60px; }
.checked-number-list .checked-number:nth-child(2n+1) { background: #2196f3; }
/*  로또 이벤트 페이지 */

@media all and (max-width:1030px){
    .lotto-event-list li input[type=checkbox] + label {
        line-height: 44px; width: 44px; height: 44px; margin-top: -22px; margin-left: -22px; 
    }
    .lotto-event-list li input[type=checkbox] + label:hover,
    .lotto-event-list li input[type=checkbox]:checked + label {
        line-height: 50px; width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; 
    } 
}

@media all and (max-width:640px){
    .lotto-event-list li { width: 20%; padding: 2px; }
    .lotto-event-list li input[type=checkbox] + label {
        width: 100%; border-radius: 4px;
        position: relative; top: 0; left: 0; margin-top: 0; margin-left: 0;
    }
    .lotto-event-list li input[type=checkbox] + label:hover {
        color: #fff; line-height: 44px; width: 100%; height: 44px; margin-top: 0; margin-left: 0; background: #555;
    }
    .lotto-event-list li input[type=checkbox]:checked + label {
        line-height: 44px; width: 100%; height: 44px; margin-top: 0; margin-left: 0;
    }
    .checked-number-list { height: 70px; padding: 15px 0; }
    .checked-number-list .checked-number {
        border-radius: 18px; color: #fff; font-size: 12px; font-size: 1.2rem; font-weight: bold;
        display: inline-block; width: 36px; height: 36px; line-height: 36px;
    }
}