@charset "utf-8";

.con_tab ul li a{color:#fff;background:#77797e;border-color:#77797e ;}


/**** 투표프로그램css ****/

/* 공통 */
#e_container{font-size:1.6rem;}
#e_container .tab_con{width:100%;background:#fff;height:59px;font-weight:600;color:#777;}
#e_container .tab_con ul{display:flex; justify-content:center;}
#e_container .tab_con ul li{ width:200px;height:59px;text-align:center;}
#e_container .tab_con ul li.on a{font-weight:700;color:#fff;border-bottom:none; background:#192747;}

#e_container .tab_con ul li a{display:block;margin-top:15px; width:100%; max-width:180px;height:44px;line-height:44px;}
#e_container p.tit{text-align:center;font-size:3rem;font-weight:700;line-height:34px;color:#f5ff4d;}
#e_container p.txt{margin:20px 0;text-align:center;font-size:1.8rem;color:#fff;}
#e_container p.txt2{margin-top:5px;text-align:center;font-size:1.8rem;color:#fff;}

#e_container table{margin:0 auto;}
#e_container .vote_number{padding:10px;font-size:1.9rem;font-weight:700;color:#000; background:#ecf3f9;border-bottom:1px solid #e9e9e9;box-sizing:border-box}

.e_btn_con {display: flex;justify-content: center;align-items: center;gap: 15px;text-align: center;}
.e_btn_b{text-align:center;display:inline-block;width:100%;height:50px;font-size:2rem;font-weight:600;border-radius:7px;border:none;background:#15294c;color:#fff;cursor:pointer}
.e_btn_b:hover{background:#081732;}

/* 흰색 버튼 */
.e_btn_w {text-align:center; display:inline-block; width:100%; height:50px; font-size:2rem; font-weight:600; border-radius:7px; border:2px solid #ddd; background:#fff; color:#333; cursor:pointer; transition:all 0.3s ease;}
.e_btn_w:hover {background:#f8f9fa; border-color:#bbb; color:#000;}

/* 회색 버튼 (비활성화용) */
.e_btn_g {text-align:center; display:inline-block; width:100%; height:50px; font-size:2rem; font-weight:600; border-radius:7px; border:none; background:#6c757d; color:#fff; cursor:not-allowed; transition:all 0.3s ease;}
.e_btn_g:hover {background:#5a6268;}

/* 밝은 회색 버튼 (대기용) */
.e_btn_lg {text-align:center; display:inline-block; width:100%; height:50px; font-size:2rem; font-weight:600; border-radius:7px; border:none; background:#e9ecef; color:#6c757d; cursor:not-allowed; transition:all 0.3s ease;}
.e_btn_lg:hover {background:#dee2e6;}

.e_btn_s{text-align:center;display:inline-block;width:150px;height:48px; line-height:48px;font-weight:600;border-radius:7px;border:none;background:#ffdb4d; color:#5c452d !important;}

#poll,
#poll_end,
#result{position:relative;background:url(/nanum/site/election/img/election_rbg.jpg) no-repeat left top; height:721px;background-size:cover;}
#poll::-webkit-scrollbar {width: 5px;}
#poll::-webkit-scrollbar-thumb {background-color: #525252;border-radius: 10px; background-clip: padding-box;}
#poll::-webkit-scrollbar-track {background-color: #f7f7f7;border-radius: 10px;}
  

#poll form{padding-bottom:140px;}

.logo{position:absolute;text-align:center;top:410px;left:0;width:100%;}



/* 로그인 */
#login {position:relative; display:flex; overflow:hidden;}
#login::after{content:""; display:block; width:50%; height:970px; background:url(/nanum/site/election/img/election_lbg.jpg) no-repeat right -420px center; background-size:cover;}
#login .login_guide{position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; width:60%; padding:50px; background-color:#213464; box-shadow:2px 2px 15px rgba(0,0,0,0.5); box-sizing:border-box; z-index:1;}
#login .guide{width:100%; padding:20px 15px;  font-size:1.7rem; border-radius:15px; background:rgba(0,0,0,0.5); box-sizing:border-box;}
#login .guide dl dt{font-weight:600;color:#f5ff4d;margin-bottom:5px;}
#login .guide dl dd{color:#fff}
#login .con_area{width:100%;}
#login table{width:100%;margin-bottom:5px;font-size: 1.6rem;}
#login table td{width:100%;position:relative;padding:5px 0;}
#login table td label{position:absolute;top:50%;left:15px; color:#333;transform: translate(0, -50%);}
#login table td input.txt{width:100%; height:48px; border-radius:7px;border:1px solid #ccc;padding-left:30px; box-sizing:border-box;}
#login table td input.txt:focus{background-color:#f0f4f9;border:1px solid #869eca;}

#login table td.num_code{display:flex; gap:10px;}


/* 투표하기 */
#poll{width:100%; max-width: 1000px;height: calc(100vh - 90px); padding:50px; box-sizing:border-box;overflow-y:auto}
#poll .con_area{padding-top:360px;}
#poll table{margin:30px auto;}
#poll table td{padding:20px 0;border:1px solid #fff;}
#poll table td .check_obj input{margin-right:5px;vertical-align:middle;}
#poll table td .check_obj label{font-size:2rem;font-weight:600;line-height:30px;color:#fff;}

.vote{display:flex;flex-wrap:wrap;background:#fff;/* border:1px solid #fff; box-sizing:border-box;*/}
.vote li{flex-grow: 1;}
.vote li:nth-child(n+2){border-left:1px solid #e9e9e9;box-sizing:border-box}
.vote li p{padding:15px 10px; text-align:center;}
.vote li .inp_rd[type="radio"].default + label::before,
.vote li .inp_chk[type="checkbox"].default + label::before{top: 0;margin-top:3px}
.vote li .inp_rd[type="radio"]:checked.default + label::after{top:0;margin-top:8px;}
.vote li label{color:#333;line-height:1.5 !important;}


/* 투표리스트 */
#poll .vote_list_container .vote_table{width: 100%;border-right: 1px solid #e9e9e9;text-align:center;}
#poll .vote_list_container .vote_table th{padding:14px 10px;font-size: 1.9rem;font-weight: 700;color: #000;background: #ecf3f9;}
#poll .vote_list_container .vote_table td{padding: 15px 10px;font-size: 1.5rem;font-weight: 500;background:#fff;border:0;}
#poll .vote_list_container .vote_table tr > *{border-left:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;}
#poll .vote_list_container .vote_table .btn_small.blue{display: inline-block;padding: 8px 15px;font-size: 1.5rem;font-weight:600;color:#fff;background:#15294c;border-radius:7px;text-align:center;border:none;cursor:pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
#poll .vote_list_container .vote_table .btn_small.blue:hover{background:#081732;}
#poll .vote_list_container .vote_table .btn_small.gray{display: inline-block;padding: 8px 15px;font-size: 1.5rem;font-weight:600;color:#6c757d;background:#e9ecef;border-radius:7px;text-align:center;border:none;cursor:pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;}



/* 투표완료 */
#poll_end{padding-top:200px;}
#poll_end .box{color:#666;margin:50px 0;padding-top:15px;width:290px;height:75px;border:1px solid #d3d3d3;}
#poll_end .box span{font-weight:600;color:#333;}


/* 투표결과 */
#result{width: 1000px;padding-top:20px;text-align:center;overflow-y: scroll;height:750px;}
#result .result_list {margin-top:50px;}
#result .result_list ul li{display:inline-block;text-align:center;margin-bottom:10px;}
#result .result_list ul li span.name{float:left;font-size:20px;font-weight:600;color:#fff;}
#result .result_list ul li span.num{float:right;font-size:22px;font-weight:600;color:red;}

#result .box{color:#666;margin:20px auto;padding-top:20px;width:290px;height:80px;border:1px solid #d3d3d3;font-weight:600;color:#fff;}


/* 팝업 기본 스타일 */
.dim-layer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
}

.dimBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}

.pop-layer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
	min-width: 320px;
}

.pop-container {
	padding: 30px 20px 20px;
}

.pop-conts {
	text-align: center;
}

.ctxt {
	font-size: 15px;
	line-height: 1.5;
	color: #333;
	margin-bottom: 20px;
}

.btn-r {
	text-align: center;
}

.btn-r a {
	display: inline-block;
	padding: 8px 20px;
	margin: 0 5px;
	background: #007bff;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	font-size: 13px;
}

.btn-r a:hover {
	background: #0056b3;
}

.btn-r a.btn-cancel {
	background: #6c757d;
}

.btn-r a.btn-cancel:hover {
	background: #545b62;
}

.loading-content {
	text-align: center;
	padding: 20px;
}

.loading-content img {
	height: 20px;
	margin-bottom: 10px;
}

.loading-text {
	font-size: 12px;
	color: #666;
}

/********************모바일********************/
@media all and (max-width:1024px){

	#poll{padding: 40px}
	#poll form{padding-bottom:120px;}
	
	.e_btn_con .e_btn_b,
	.e_btn_con .e_btn_w,
	.e_btn_con .e_btn_g {width: 200px; /* 고정 너비 */flex-shrink: 0;}

}
/********************모바일********************/
@media all and (max-width:767px){

	#login::after{display:none;}
	#login .login_guide{width:100%; padding:20px;}

	#poll{padding:30px 20px;}
	#e_container p.tit{font-size:2.5rem;line-height: 1.4;}
	#e_container p.txt{margin:15px 0 20px;font-size:1.7rem;line-height: 1.5;}
	#poll form{padding-bottom:100px;}

	.vote{flex-wrap:wrap;}
	.vote li{width: 50%;flex: auto;border-bottom:1px solid #e9e9e9;box-sizing:border-box;}
	.vote li p{padding:12px 8px}

	.e_btn_con {flex-direction: column;gap: 10px;}
	.e_btn_con .e_btn_b,
	.e_btn_con .e_btn_w,
	.e_btn_con .e_btn_g {width: 100%;}
}

/********************모바일********************/
@media all and (max-width:480px){
	
	#poll .vote_list_container .vote_table tr > *{word-break:break-all;}
	#poll .vote_list_container .vote_table th{font-size:1.7rem;}
	
	#poll form{padding-bottom:30px;}

	.vote li{width: 100%;}

}