@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,address,em,img,strong,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,footer,header,hgroup,menu,#header,section,summary,video {margin:0; padding:0; border:0; font-size:100%; vertical-align:middle;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,section {display:block;}
body {font-family:'Nanum Gothic','맑은 고딕',dotum,arial,verdana,sans-serif; font-size:12px; line-height:1.2;}
ol,ul {list-style:none;}
table {border-collapse:collapse; border-spacing:0;}
a {color:inherit; font-family:inherit; font-weight:normal; text-decoration:none;}
a:active,a:visited,a:hover {text-decoration:none; outline:none;}
button {background:none; border:0 none; color:inherit; font-size:inherit; cursor:pointer; outline:none;}
img {max-width:100%;}
.blind {display:block; overflow:hidden; position:absolute; top:-9999em; left:-9999em; width:0.1rem; height:0.1rem;}
fieldset {border:0 none !important;}
em {font-style:normal;}
input[type='number']::-webkit-outer-spin-button,input[type='number']::-webkit-inner-spin-button {-webkit-appearance:none;}
* {outline:none;}
body, html{height: 100%;}
/* 투표 페이지 */
#wrap {background:#101620; min-height: 100%;}
/* 헤더 */
#header {position:relative;}
#header h1 {position:absolute; top:38px; left:60px;}
#header h1 .logo {display:block; background:url(/afevent/promotion/dest_vote/images/logo.png) 0 0 no-repeat; width:116px; height:20px; font:0/0 a;}
#header .login {display:block; position:absolute; top:38px; right:60px; height:23px; padding:0 8px; padding:2px 20px; border:1px solid #fff; border-radius:15px; color:#fff; line-height:23px; text-align:center; font-size:14px;}
#header .login:hover {background:#fff; color:#192230;}

#header .game_visual {max-width:900px; margin:0 auto; text-align:center;}

.game_info {max-width: 800px; margin:0 auto; color:#fff; font-size:16px;}
.game_info h2 {padding:50px 0 40px; text-align:center; font-size:30px; word-break:keep-all;}
.game_info .noti {padding:20px; background: #06080b; max-height:115px; overflow-y:auto; line-height: 1.6;}

.search-wrap {overflow:hidden; max-width:800px; margin:20px auto;}
.search-wrap .search-inner {display:table; float:right; border:solid 1px #1c346c; border-radius:3px; width:193px;}
.search-wrap .search-inner input {display:table-cell; background:transparent; padding:12px; border:0; color:#eee; font-size:14px; vertical-align: middle; width:150px; box-sizing:border-box; height:36px;}
.search-wrap .search-inner input::placeholder {color:#eee;}
.search-wrap .search-inner label {display:table-cell; padding:2px 9px 0; vertical-align: middle; cursor:pointer;}

.search {background:#1559ff; box-sizing:border-box; color:#fff; text-decoration:none; vertical-align:baseline;}

.inner {background:#0a0d13; max-width:900px; min-height:600px; margin:0 auto; border-radius:20px;}

.vote_list {max-width:800px; margin:0 auto; padding-bottom:100px; clear:both;}
.vote_list > ul:after {content:""; display:block; clear:both;}
.vote_list > ul {display:flex; flex-wrap:wrap; max-width:810px; margin-left:-10px;}
.vote_list > ul > li {overflow:hidden; width:192px; margin-bottom:12px; margin-left:10px; padding-bottom:18px; border:2px solid #323439; border-radius:8px; box-sizing:border-box; text-align:center; cursor:pointer;}
.vote_list > ul > li h2 {padding:30px 5px 0; color:#eee; font-size:20px;}
.vote_list > ul > li hr {display:block; position:relative; background:url(/afevent/promotion/dest_vote/images/sp_line.png) 0 0 no-repeat; width:141px; height:9px; margin:15px auto; border:0;}
.vote_list > ul > li .team_list li {margin-bottom:11px;}
.vote_list > ul > li .team_list a {color:#ededed; font-size:15px;}


.vote_list > ul > li:hover .check_vote input[type="checkbox"] + label { border-color:#0d2f82 }
.vote_list > ul > li:hover .check_vote input[type="checkbox"] + label svg { fill:#1559ff }
.vote_list > ul > li:hover {border-color:#103389;}

.vote_list > ul > li.active {background:#050609 !important; border-color:#103389 !important;}
.vote_list > ul > li.active h2 {color:#eee;}
.vote_list > ul > li.active .team_list a {color:#eee;}
.vote_list > ul > li.active .check_vote input[type="checkbox"] + label {background:#1559ff; border-color: #1559ff !important;}
.vote_list > ul > li.active:hover .check_vote input[type="checkbox"] + label svg {fill:#fff !important;}


.vote_list > ul > li.fixed {background:transparent;}
.vote_list > ul > li.fixed hr {background-position:0 -10px;}
.vote_list > ul > li.fixed h2 {color:#666666;}
.vote_list > ul > li.fixed .team_list a {color:#666666;}
.vote_list > ul > li.fixed .check_vote {display:none;}
.vote_list > ul > li.fixed .vote_end {display:block; padding:16px 0 15px; color:#666666; font-size:20px;}
.vote_list > ul > li.fixed .vote_end svg {fill: #666666; margin-right: 4px;}

.vote_list > ul > li .game_thum img {width:100%; height:155px; vertical-align:top;}

.vote_list .check_vote {padding-top:5px; pointer-events:none;}
.vote_list .check_vote input[type="checkbox"] {display:none;}
.vote_list .check_vote input[type="checkbox"] + label {display:block; position:relative; width:48px; height:48px; margin:0 auto; border:solid 1px #797a7c; border-radius:50%; text-align:center; font:0/0 a;}
.vote_list .check_vote input[type="checkbox"] + label svg {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); fill:#fff;}

.vote_list .vote_end {display:none;}

.btn_vote {position:fixed; left:0; bottom:0; background:#1559ff; width:100%; height:82px; padding:0; color:#fff; font:0/0 a; font-size:30px; font-weight:bold; transition:all 0.5s;}
.btn_vote.end {background:#434343; color:#bebebe;}

#footer {height:104px; color:#969696; line-height:104px; text-align:center; font-size:14px;}


/* 이미지 투표 */
.vote_list > ul.img > li > h2 {display:flex; height:100px; padding-top:0; font-size:20px; align-items:center; justify-content:center;}

/* 개인투표 */
.vote_list > ul.solo > li > h2 {font-size:20px; padding:20px 0 30px;}
.vote_list > ul.solo > li > h2 a:hover {border-bottom:1px solid #8a8b8d; padding-bottom:1px;}
.vote_list > ul > li .thum {overflow:hidden; width:120px; height:120px; border-radius:50%; margin:0 auto; margin-top:30px;}
.vote_list > ul > li .thum img {width: 100%; height: 100%;}


/* 820이상 오버시  */
@media (min-width:821px) {
	.vote_list > ul > li .team_list li:hover a {border-bottom:1px solid #8a8b8d;}
	.vote_list > ul > li:hover .check_vote input[type="checkbox"] + label span {background-position:0 -49px;}
	.vote_list > ul > li .check_vote input[type="checkbox"]:checked + label span {background-position:0 -98px;}
}

@media (max-width:820px) {

	#header h1 , #header .login {display:none;}
	#container {padding:0 11px;}
	.game_info h2 {font-size:20px;}
	.game_info .noti {font-size:14px;}
	/* 투표  */
	.app_wrap {width:100%;}
	.app_wrap .btn_bs {background-size:100%; width:84px; height:26px; margin-bottom:17px;}

	.vote_list {padding-bottom:80px; clear:both;}
	.vote_list > ul {width:100%; margin-left:0;}
	.vote_list > ul > li {width:32%; margin:0 0 15px 0; padding:0 0 19px; box-sizing:border-box; cursor:auto;}
	.vote_list > ul > li:nth-child(3n-1) {margin:0 2% 15px;}
	.vote_list > ul > li h2 {font-size:15px; font-weight:900; padding-top:15px;}

	.vote_list .check_vote input[type="checkbox"] + label {width:37px; height:37px;}
	
	.vote_list > ul > li.fixed .vote_end {padding:10px 0 12px; font-size:19px;}
	.vote_list > ul > li.fixed .vote_end:before {background-size:100%; width:17px; height:12px;}
	.btn_vote {height:45px; font-size:19px;}

	#footer {height:50px; line-height:50px; font-size:10px;}
}

@media (max-width:640px) {
	.game_info h2 {font-size:18px;}
	.game_info .noti {font-size:12px;}
	.vote_list > ul > li hr {background-size:100%; width:80px; height:5px; border:0;}
	.vote_list > ul > li.active hr {background-position:0 -5px;}
	.vote_list > ul > li.fixed hr {background-position:0 -10px;}
	.vote_list > ul > li {width:49%; margin:0 0 15px 0; }
	.vote_list > ul > li:nth-child(3n-1) {margin:0;}
	.vote_list > ul > li:nth-child(odd) {margin-right:2%;}
	.vote_list > ul > li .team_list {width:80%; margin:0 auto;}


	.vote_list > ul > li:hover .check_vote input[type="checkbox"] + label {border-color:#797a7c;}
	.vote_list > ul > li:hover .check_vote input[type="checkbox"] + label svg {fill:#fff;}
	.vote_list > ul > li:hover {border-color:#323439;}

	.vote_list > ul.img > li > h2 {font-size:15px; height:69px;} 
}