@import url('/resource/css/basic.css');
/*-----------------------------------------------------------
Author : SY,CHo
Creative date :2022. 08. 22
-----------------------------------------------------------*/

#wrap {position: relative; overflow: hidden;}
.container {position: relative; margin: 0 auto; width: 100%; max-width: 60rem;}
.container:after {clear: both; display: block; content: "";}

/* header */
#header {position: relative; height: 4.5rem; background: #d4e9ff;}
#header .container {height: 100%;}
#header h1 {float: left; margin-top: 1.25rem; display: inline-block;}
#header h1 a {position: relative; display: inline-block; height: 2.3rem; line-height: 2.3rem; font-size: 1.1rem; font-weight: 700; color: #000; letter-spacing: -0.1rem;}
#header h1 a:before {display: inline-block; width: 11.5rem; height: 2.3rem; vertical-align: top; background: url('/resource/images/schl/vote/logo.png') no-repeat left top / auto 100%; content: "";}
#header .topUtil {float: right; margin-top: 1.25rem; display: inline-block; height: 2rem; line-height: 2rem;}
#header .topUtil .mem_info {vertical-align: middle; font-weight: 500; color: #000;}
#header .topUtil .mem_info strong {font-weight: 700; color: #0d69cd;}
#header .topUtil [class*="btn_"] {margin: 0 0 0 0.25rem; height: 2rem; font-size: 0.8rem; border-radius: 1rem;}
#header .topUtil [class*="btn_"] i {padding-left: 0; padding-right: 0.35rem;}
#header .topUtil .btn_bl {background: #0d69cd; border: 1px solid #0d69cd;}
#header .topUtil .btn_bl:hover, 
#header .topUtil .btn_bl:focus {background: #fff; color: #0d69cd;}
#header .topUtil .btn_grL {border-width: 1px; border-color: #fff;}
#header .topUtil .btn_grL:hover, 
#header .topUtil .btn_grL:focus {border-color: #666;}

/* footer */
#footer {position: relative; padding: 1.25rem 0; text-align: center; font-size: 0.75rem; font-weight: 400; color: #444; background: #f9f9f9;}
#footer address {line-height: 2;}
#footer address span {display: inline-block; margin-right: 1rem;}
#footer address span strong {font-weight: 600; color: #000;}

/* sub layout */
#sub_container {position: relative; background: #fff;}
#sub_container:after {clear: both; display: block; content: "";}
.subCntBody {position: relative; margin: 1.25rem auto 3.5rem; padding: 0 1rem; max-width: 62rem; overflow: hidden;}

/* 서브비주얼 */
.subvisual {position: relative; margin-top: -20px; width: 100%; line-height: 0; background: #d4e9ff; overflow: hidden;}
.subvisual img {position: relative; width: auto; max-width: 100%; height: auto; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}

/* 타이틀 */
.voteContent > .tit:first-child {margin-bottom: 2rem; padding-bottom: 1.5rem; text-align: center; background: url('/resource/images/schl/vote/pttrn01.png') repeat-x bottom;}
.voteContent > .tit:first-child h2 {font-size: 1.3rem; font-weight: 700; color: #000;}

/* 페이지 네비게이션 */
/* .voteContent .pager_wrap {margin-top: 1rem; text-align: center;}
.voteContent .pager_wrap .pagination {display: inline-block; margin: -0.15rem;}
.voteContent .pager_wrap .pagination > li {display: inline-block; padding: 0.15rem;}
.voteContent .pager_wrap .pagination > li > a {display: inline-block; width: 1.9rem; height: 1.9rem; line-height: 1.9rem; vertical-align: middle; font-size: 0.75rem; font-weight: 600; color: #666; background: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 50%;}
.voteContent .pager_wrap .pagination > li > a.first,
.voteContent .pager_wrap .pagination > li > a.prev,
.voteContent .pager_wrap .pagination > li > a.next,
.voteContent .pager_wrap .pagination > li > a.last {position: relative; line-height: calc(1.9rem - 2px); background: #fff no-repeat center center; border: 1px solid #c5c9d6;}
.voteContent .pager_wrap .pagination > li > a.first {background-image: url('/resource/images/schl/vote/pager_first.png');}
.voteContent .pager_wrap .pagination > li > a.prev {background-image: url('/resource/images/schl/vote/pager_prev.png');}
.voteContent .pager_wrap .pagination > li > a.next {background-image: url('/resource/images/schl/vote/pager_next.png');}
.voteContent .pager_wrap .pagination > li > a.last {background-image: url('/resource/images/schl/vote/pager_last.png');}

.voteContent .pager_wrap .pagination > li.active > a {color: #fff; background: #0d69cd; border-color: #0d69cd;} */

/* 타이틀(공통) */
*:not(h3) + h4[class^='tit'] {margin-top: 2rem !important;}
*:not(h4) + h5[class^='tit'] {margin-top: 1.75rem !important;}

/* 박스 :박스 기본 타입 */
.box_st3 {background-color: #f9f9f9; border-color: #c5c9d6;}

/* 테이블 :테이블 기본 타입 */
div[class*='tbl_st'] > table {margin-left: 0; border-top-color: #000;}
div[class*='tbl_st'] > table th {border-left: none;}
div[class*='tbl_st'] > table td {padding: 0.5rem; line-height: 1.5; color: #555; border-bottom-color: #c5c9d6; border-left: none;}
div[class*='tbl_st'] > table thead th {background: #f9f9f9; border-bottom-color: #a4a9bd;}
div[class*='tbl_st'] > table tbody th {background: #f9f9f9; border-bottom-color: #c5c9d6;}
div[class*='tbl_st'] > table tbody th + td {border-left: 1px solid #c5c9d6;}

/* 테이블 : 폼테이블 */
div[class*='tbl_st'].tbl_form > table * + p {margin-top: 0.25rem;}

/* 폼요소 */
select,
input[type="text"],
input[type="password"],
table select,
table input[type="text"],
table input[type="password"] {padding: 0 0.5rem; height: 1.9rem; line-height: calc(1.9rem - 2px); font-size: 0.75rem; font-weight: 600; color: #555; border: 1px solid #e2e4ea;}
textarea {font-size: 0.75rem; color: #555; border: 1px solid #e2e4ea;}
span.date {position: relative; display: inline-block; padding-right: 1.9rem;}
span.date:after {position: absolute; top: 0; right: 0; width: 1.9rem; height: 1.9rem; line-height: 1.9rem; text-align: center; font-family: 'xeicon'; font-size: 1rem; font-weight: normal; color: #fff; background: #525c6e; content: "\e9a4";}
/* 라디오버튼, 체크박스 */
.form_ele_group {position: relative; display: inline-block; margin-right: 1.5rem; padding-left: 1.4rem; min-height: 1rem; font-size: 0.75rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
div[class*='tbl_st'] tbody tr > td:first-child > .form_ele_group {margin-right: 0;}
.form_ele_group input {position: absolute; width: 0; height: 0; opacity: 0; cursor: pointer;}
.checkmark {position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; background: #fff; border: 2px solid #989898;}
.checkmark:after {position: absolute; display: none; content: "";}
.form_ele_group input:checked + .checkmark {border-color: #027ceb;}
.form_ele_group input:checked + .checkmark + span {font-weight: 600; color: #000;}
.form_ele_group input:checked ~ .checkmark:after {display: block;}
.form_ele_group input[type="radio"] + .checkmark {border-radius: 50%;}
.form_ele_group input[type="radio"] + .checkmark:after {top: 50%; left: 50%; margin: -0.2rem 0 0 -0.2rem; width: 0.4rem; height: 0.4rem; background: #027ceb; border-radius: 50%;}
.form_ele_group input[type="checkbox"] + .checkmark {border-radius: 0.25rem;}
.form_ele_group input[type="checkbox"] + .checkmark:after {top: 50%; left: 50%; margin: -0.3rem 0 0 -0.1rem; width: 0.25rem; height: 0.5rem; border: solid #027ceb; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* 버튼 */
.btns {margin-bottom: 0;}
/* 버튼 :기본 */
.btn_gr, .btn_grL, .btn_bl, .btn_red, .btn_pur, .btn_org, .btn_mint, .btn_navy, .btn_grn, .btn_yel {margin: 0 0.1rem;}
[class*='box_'] [class*='btn_'] {padding: 0.3rem 0.9rem;}
/* 검색영역 안의 검색 버튼 */
[class*='box_'] [class*='btn_'] i {padding-left: 0; padding-right: 0.25rem; font-size: 1rem;}
/* 테이블 안의 버튼 */
table a[class^='btn_'] {padding: 0.4rem 1rem;}
table span[class^='btn_'] {min-width: 4.5rem; line-height: 20px; font-size: 0.75rem;}
table .btn_bl {background: #0d69cd; border: 1px solid #0d69cd; border-radius: 1rem;}
table .btn_org {background: #ff9b0b; border: 1px solid #ff9b0b; border-radius: 1rem;}
table .btn_gr {color: #444; background: #f6f6f6; border: 1px solid #f6f6f6; border-radius: 1rem;}
table .btn_grL {color: #555; border: 1px solid #c5c9d6; border-radius: 1rem;}
table .btn_gr.ico.round {padding: 0.4rem 0.5rem;}
table span.btn_bl:hover, 
table span.btn_bl:focus {background: #0d69cd; color: #fff;}
table span.btn_org:hover, 
table span.btn_org:focus {background: #ff9b0b; color: #fff;}
table span.btn_gr:hover,
table span.btn_gr:focus {background: #f6f6f6; color: #444;}
/* 버튼 : 작은버튼 */
a[class^="btn_"].mid,
button[class^="btn_"].mid {padding: .35rem 1rem; border-radius: 0.2rem;}
a[class^="btn_"].round,
button[class^="btn_"].round {width: 2rem; height: 2rem;}

.filebox {display: inline-block;}
.filebox input[type="file"] {position: absolute; margin: -1px; padding: 0; width: 1px; height: 1px; clip:rect(0,0,0,0); border: 0; overflow: hidden;}
.filebox label {display: inline-block; padding: 0.35rem 0.5rem; line-height: normal; vertical-align: middle; color: #555; cursor: pointer; background: #fff; border: 1px solid #cdcdcd;}
.filebox .upload-name {display: inline-block; padding: 0.35rem 0.5rem; font-size: inherit; font-family: inherit; line-height: normal; vertical-align: middle; background-color: #eee; border: 1px solid #cdcdcd; -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none;}
.filebox .upload-display {margin-bottom: 5px;}

/* 테이블 컬럼 넓이 조절 */
.tbl_st .colBtn {width: 13rem;}

/* == 학교투표기능 3페이지 == */
/* 사이즈 추가 */
.InpSel_90 {width: 90px !important;}
.InpSel_180 {width: 180px !important;}
/* 검색영역 검색어입력 영역 */
.InpSel_type01 {width: calc(100% - 625px);}
/* 테이블 상단 여백 */
.tit2 + .box_st3,
.tit2 + .block_type02,
.tit2 + .list_candidate {margin-top: 0.75rem;}
.btns + .tbl_st {margin-top: 0.5rem;}
/* 박스 내용 */
.box_st4 > .list_st1.type01 > li {display: inline-block; margin-top: 0; width: 33%; font-weight: 600; color: #000;}
.box_st4 > .list_st1.type01 > li:before {background: #000;}
.box_st4 > .list_st1.type01 > li span {margin-left: 0.75rem;}

/* == 학교투표기능 4페이지 == */
.block_type01 dl {border-top: 2px solid #000;}
.block_type01 dt,
.block_type01 dd {padding: 1rem 1.5rem; border-bottom: 1px solid #c5c9d6;}
.block_type01 dd.box_st4 {margin-top: 0;}
.block_type01 dt {font-size: 1rem; font-weight: 700; color: #000; border-bottom-width: 2px; border-bottom-style: dotted;}
.box_st4 > .list_st1.type02 > li {display: inline-block; margin-top: 0; width: 49%; font-weight: 500; color: #000;}
.box_st4 > .list_st1.type02 > li:before {background: #000;}
.box_st4 > .list_st1.type02 > li:nth-of-type(n+3) {margin-top: 0.5rem;}
.box_st4 > .list_st1.type02 > li strong {display: inline-block; margin-right: 0.75rem; font-weight: 600;}
.block_type02 {padding: 0 1rem; color: #444; border: 1px solid #c5c9d6;}
.block_type02 > p,
.block_type02 > div {padding: 1rem 0;}
.block_type02 > .line {border-bottom: 1px solid #c5c9d6;}
.block_type02 > .top_line {border-top: 1px solid #c5c9d6;}
.block_type02 > .line.dot {border-bottom: 2px dotted #c5c9d6;}
.block_type02 > .btns {margin-top: 0;}
.block_type02 .tit3 {margin-bottom: 0.5rem;}
/* 후보자 */
.list_candidate {font-size: 0.75rem; font-weight: 500; overflow: hidden;}
.list_candidate > li {float: left; display: inline-block; margin-left: 2%; width: 32%; border: 1px solid #e2e4ea;}
.list_candidate > li:nth-of-type(3n+1) {margin-left: 0;}
.list_candidate.half > li {width: 49%;}
.list_candidate.half > li:nth-of-type(3n+1) {margin-left: 2%;}
.list_candidate.half > li:nth-of-type(2n+1) {margin-left: 0;}
.list_candidate > li:nth-of-type(n+4),
.list_candidate.half > li:nth-of-type(n+3) {margin-top: 1rem;}
.inBox {padding: 1rem; overflow: hidden;}
.inBox .pic {float: left; width: 5rem; height: 6rem; border: 1px solid #c5c9d6; border-radius: 0.2rem; overflow: hidden;}
.inBox .pic img {max-width: 100%; max-height: 100%;}
.inBox .info {float: left; margin-left: 1.5rem; width: calc(100% - 6.5rem); color: #444;}
.inBox .info > li + li {margin-top: 0.4rem;}
.inBox .info > li.elected {padding: 0.15rem 0 0.15rem 1.75rem; background: url('/resource/images/schl/vote/elected.png') no-repeat left center;}
.inBox .info strong {font-weight: 600; color: #000;}
.inBox .info .btn_grL.mini {width: 100%; text-align: center; font-size: 0.75rem; font-weight: 600; color: #313131; border-width: 1px; border-color: #333; border-radius: 0.2rem;}
.inBox .info .btn_grL.mini i {margin-right: 0.25rem; padding-left: 0;}
.list_candidate > li .vote {padding: 0.5rem 1rem; font-weight: 600; color: #333; background: #e2e4ea; overflow: hidden;}
.list_candidate > li .vote [class*="InpSel_"] {float: left; display: inline-block; margin-right: 0;}
.list_candidate > li .vote [class*="InpSel_"] + [class*="InpSel_"] {position: relative; padding-left: 1rem;}
.list_candidate > li .vote [class*="InpSel_"] + [class*="InpSel_"]:before {position: absolute; top: 10%; left: 0; width: 1px; height: 80%; background: rgba(51,51,51,0.2); content: "";}

/***** 레이어팝업 *****/
.lyrPop {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999;}
.lyrWrap {position: absolute; top: 50%; left: 50%; width: 100%; max-width: 30rem; background: #fff; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.lyrPop .tit {padding: 0 1rem; height: 3rem; line-height: 3rem; background: #0d69cd;}
.lyrPop .tit h2 {font-size: 1rem; font-weight: 700; color: #fff;}
.lyrPop .btnClose {position: absolute; top: 0.5rem; right: 0.5rem; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; font-size: 1.2rem; color: #fff; background: #003268; border-radius: 50%;}
.lyrPop .popCont {padding: 1rem;}
.lyrPop .popCont .inBox {display: flex; margin-bottom: 1rem; padding-bottom: 1rem; align-items: center; border-bottom: 2px dotted #c5c9d6;}

/* 레이어팝업 : 로그인 */
.lyrPop .loginWrap {height: 5.5rem; overflow: hidden;}
.lyrPop .loginWrap ul {float: left; width: calc(100% - 5rem);}
.lyrPop .loginWrap li ~ li {margin-top: 0.5rem;}
.lyrPop .loginWrap li input[type="text"],
.lyrPop .loginWrap li input[type="password"] {width: 100%; height: 2.5rem; line-height: 2.5rem;}
.lyrPop .loginWrap .btnLogin {float: left; margin-left: 1rem; padding-top: 2.5rem; width: 4rem; height: 100%; color: #fff; font-weight: 600; background: #0073d0 url('/resource/images/member/ico_btnlogin.png') no-repeat center 0.8rem;}

/* media query mobile */
@media screen and (max-width: 1240px){
    .container,
	.subvisual {padding: 0 1rem;}
}

@media screen and (max-width: 1200px){
	/* == 학교투표기능 4페이지 == */
	.block_type01 dt,
	.block_type01 dd {padding: 1rem;}
	/* 후보자 */
	.inBox .info {margin-left: 1rem; width: calc(100% - 6rem);}
}

@media screen and (max-width: 1060px){
	/* 후보자 */
	.list_candidate > li {width: 49%;}
	.list_candidate > li:nth-of-type(3n+1) {margin-left: 2%;}
	.list_candidate > li:nth-of-type(2n+1) {margin-left: 0;}
	.list_candidate > li:nth-of-type(n+3) {margin-top: 1rem;}
}

@media screen and (max-width: 940px){
	.filebox [class*='InpSel_'] {width: auto !important;}
}

@media screen and (max-width: 860px){
	.btns.clearfix .fl,
	.btns.clearfix .fr {width: 100%;}
	.btns.clearfix .fl + .fr {margin-top: 0.5rem;}
}

@media screen and (min-width: 768px) {
	.filebox .upload-display {display: inline-block; margin-right: 5px; margin-bottom: 0;}
}

@media screen and (max-width: 768px){ 
	/* header */
	#header {height: 6rem; overflow: hidden;}
	#header h1 {margin-top: 3.25rem;}
	#header h1 a {height: 2rem; line-height: 2rem;}
	#header h1 a:before {width: 9.8rem; height: 2rem;}
	#header .topUtil {position: absolute; top: 0; left: 0; margin-top: 0; padding: 0 1rem; width: 100%; height: 2.75rem; line-height: 2.75rem; text-align: right; background: #c1e0ff;}
	#header .topUtil [class*="btn_"] {padding: 0.4rem 0.75rem;}

	/* 서브비주얼 */
	.subvisual {margin-top: 0;}

	/* 테이블 : 폼테이블 */
	div[class*='tbl_st'].tbl_form > table thead {display: none;}
	div[class*='tbl_st'].tbl_form > table,
	div[class*='tbl_st'].tbl_form > table tbody, 
	div[class*='tbl_st'].tbl_form > table tbody tr, 
	div[class*='tbl_st'].tbl_form > table tbody th, 
	div[class*='tbl_st'].tbl_form > table tbody td {display: block; width: 100%;}
	div[class*='tbl_st'].tbl_form > table tbody th + td {border-left: none;}

	[class*='btn_']:not(#header .topUtil [class*="btn_"]),
	textarea, 
	select, 
	input[type="text"],
	input[type="password"],
	span[class*='InpSel_'],
	.filebox [class*='InpSel_'], 
	textarea[class*='InpSel_'], 
	select[class*='InpSel_'], 
	input[type="text"][class*='InpSel_'],
	input[type="password"][class*='InpSel_'] {width: 100% !important;}
	table a[class^='btn_'] + a[class^='btn_'],
	* + [class*='btn_'],
	* + textarea, 
	* + select, 
	* + input[type="text"],
	* + input[type="password"] {margin-top: 0.5rem;}
	[class*='btn_'] {text-align: center;}

	/* 첨부파일 */
	.filebox {width: 100%;}
	.filebox .upload-display {margin-right: 0;}
	.filebox {margin-top: 0.5rem; width: 100%;}
	.filebox label {margin-top: 0.5rem; width: 100%;}

	/* 테이블 컬럼 넓이 조절 */
	.tbl_st .colBtn {width: 8rem;}

	/* 박스 내용 */
	.box_st4 > .list_st1.type01 > li,
	.box_st4 > .list_st1.type02 > li {margin-right: 1rem; width: auto;}
}

@media screen and (max-width: 640px){
	/* 후보자 */
	.list_candidate > li,
	.list_candidate.half > li {margin-left: 0; width: 100%;}
	.list_candidate > li:nth-of-type(3n+1),
	.list_candidate.half > li:nth-of-type(3n+1) {margin-left: 0;}
	.list_candidate > li:nth-of-type(n+2) {margin-top: 1rem;}
}

@media screen and (max-width: 480px){ 
	.container,
	.subvisual {padding: 0 0.5rem;}

	/* header */
	#header .topUtil {padding: 0 0.5rem;}

	/* sub layout */
	.subCntBody {margin: 1.25rem auto; padding: 0 0.5rem;}
}

@media screen and (max-width: 360px){ 
	#header h1 a:before {width: 2.2rem;}

	/* 후보자 */
	.inBox .pic {width: 100%; height: auto; line-height: 0;}
	.inBox .pic img {max-width: none; max-height: none; width: 100%; height: auto;}
	.inBox .info {margin-top: 1rem; margin-left: 0; width: 100%;}
}