/**** .secWrap ****/
#wrap{width: 100%; height: 100%; position: relative; top: 0; left: 0;}
#wrap #secWrap{padding: 184px 20px 84px;}
#wrap #secWrap .sec_inner{font-family: "Pretendard"; display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto;}
#wrap #secWrap .wrapTit{margin-bottom: 20px;}
#wrap #secWrap .wrapTit span{color: #333; font-size: 1.75em; font-weight: 600; text-align: center;}


/******** 투표 섹션 ********/
#secWrap .voteWrap{width: 48%; height: 550px; background-color: #fff; border: 1px solid #eee; border-radius: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.07); padding: 40px 30px;}
/* 메뉴 탭 */
#secWrap .voteWrap .tabSec{border: 1px solid #eee; height: 418px;}
#secWrap .voteWrap .tabs{display: flex; flex-wrap: wrap; border: 1px solid #eee;}
#secWrap .voteWrap .tabs li{width: calc(100% / 3); line-height: 50px; color: #01033c; font-size: 1.15em; font-weight: 500; text-align: center; cursor: pointer;}
#secWrap .voteWrap .tabs li.current{background: #01033c; color: #fff;}
#secWrap .voteWrap .tabs li.tab-middle{border-left: 1px solid #eee; border-right: 1px solid #eee;}
#secWrap .voteWrap .tab-content{display: none; width: 100%; height: 1005; color: #222;}
#secWrap .voteWrap .tab-content.current{display: inherit;}
#secWrap .voteWrap .cont_inner ul{overflow-y: scroll; height:302px;}
#secWrap .voteWrap .cont_inner li{padding: 15px 25px; border-bottom: 1px solid #eee;}
#secWrap .voteWrap .date_inner{margin-bottom: 8px;}
#secWrap .voteWrap .date_inner span{color: #555; font-size: 1em; font-weight: 500;}
#secWrap .voteWrap .tit_inner span{color: #242424; font-size: 1.1em; font-weight: 600;}
/* .cont_inner ul 스크롤 커스텀 */
/* 스크롤바 설정 */
#secWrap .voteWrap .cont_inner ul::-webkit-scrollbar{width: 6px;}
/* 스크롤바 막대 설정 */
#secWrap .voteWrap .cont_inner ul::-webkit-scrollbar-thumb{height: 10%; background-color: #01033c; border-radius: 10px;}
/* 스크롤바 뒷 배경 설정 */
#secWrap .voteWrap .cont_inner ul::-webkit-scrollbar-track{background-color: #eee;}


/******** 공지사항 섹션 ********/
#secWrap .notiWrap{width: 48%; height: 550px; background-color: #fff; border: 1px solid #eee; border-radius: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.07); padding: 40px 30px;}
#secWrap .noti_inner{height: 415px; border: 1px solid #eee;}
#secWrap .noti_inner ul{height: 355px; overflow-y: hidden;}
#secWrap .noti_inner li{padding: 20px 25px; border-bottom: 1px solid #eee;}
#secWrap .noti_inner .date_inner{margin-bottom: 8px;}
#secWrap .noti_inner .date_inner span{color: #555; font-size: 1em; font-weight: 500;}
#secWrap .noti_inner .tit_inner span{color: #242424; font-size: 1.1em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;}
#secWrap .more_button button{width: 100%; height: 60px; background-color: #01033c;}
#secWrap .more_button button a{display: block; width: 100%; line-height: 100%; color: #fff; font-size: 1.15em; font-family: "Pretendard"; font-weight: 500;}




/******** 인증이 필요한 모달창 ********/
.certiWrap{display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 301; background: rgba(0, 0, 0, 0.5); font-family: "Pretendard";}
.certiWrap .certiBox{width: 600px; padding: 80px 50px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.certiWrap .certiBox .certiTit{text-align: center; font-size: 24px; font-weight: 600; margin-bottom: 20px; color: #01033c;}
.certiBox form{margin-bottom: 50px;}
.certiBox .certi_inner label{display: flex; padding: 8px; font-size: 1.05em; font-weight: 500;}
.certiBox .certi_inner label span{color: rgb(177, 12, 12);}
.certiBox .nameBox{margin-bottom: 20px;}
.certiBox .nameBox input{width: 100%; padding: 10px; border: 1px solid #ccc; outline-style: none;}
.certiBox .numberBox{margin-bottom: 10px;}
.certiBox .numberBox .certiCheck{display: flex;}
.certiBox .numberBox input{width: 70%; padding: 10px; border: 1px solid #ccc; outline-style: none;}
.certiBox .numberBox button{width: 30%; background-color: #01033c; color: #fff; font-weight: 500; font-family: 'Pretendard'; font-size: 0.9em;}
.certiBox .certify_number{display: flex; position: relative;}
.certiBox .certify_number input{width: 70%; padding: 10px; padding-right: 20%; border: 1px solid #ccc; outline-style: none;}
.certiBox .certify_number button{width: 30%; background-color: #01033c; color: #fff; font-weight: 500; font-family: 'Pretendard'; font-size: 0.9em;}
.certiBox .timeBox{position: absolute; top: 50%; right: 33%; transform: translateY(-50%); display: flex; align-items: center;}
.certiBox .timeBox .timeNum{color: #888; font-size: 0.9em;}
.certiBox .timeBox .resend{color: #888; font-size: 0.8em; border: 1px solid #888; padding: 3px; margin-left: 5px; }
.certiBox .btnWrap{display: flex; justify-content: space-between; align-items: center;}
.certiBox .btnWrap button{border: 1px solid #01033c; padding: 13px 20px; font-weight: 500; font-size: 1em;}
.certiBox .goVote{width: 63%; background-color: #01033c; color: #fff;}
.certiBox .cancelBtn{width: 35%; background-color: #fff; color: #01033c;}


/******** 인증이 필요없는 모달창 ********/
.certinoWrap{display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 301; background: rgba(0, 0, 0, 0.5); font-family: "Pretendard";}
.certinoWrap .certiBox{width: 600px; padding: 80px 50px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.certinoWrap .certiBox .certiTit{text-align: center; font-size: 24px; font-weight: 600; margin-bottom: 20px; color: #01033c;}
.certinoWrap .certiBox .numberBox input{width: 100%; padding: 10px; border: 1px solid #ccc; outline-style: none;}


/* input type=number일 때 위아래 버튼 없애기  */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none;}



/******** 공통 모달창 ********/
.certiWrap{display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 301; background: rgba(0, 0, 0, 0.5); font-family: "Pretendard";}
.certiWrap .certiBox{width: 40%; padding: 80px 50px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.certiWrap #modal_text{padding: 20px 0; font-family: "Pretendard"; font-size: 1.1em; font-weight: 500; margin-bottom: 10px;}
.certiBox #modal_btn{width: 40%; background-color: #01033c; padding: 15px 0; color: #fff; font-weight: 500; font-size: 1.05em; font-family: "Pretendard"; margin-left: 50%; transform: translateX(-50%);}



/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){
   
    
}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){

 
}

/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){

  
}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){

  
}

/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){
    #wrap #secWrap .sec_inner{display: block;}
    #secWrap .voteWrap{width: 100%; margin-bottom: 40px;}
    #secWrap .notiWrap{width: 100%; height: 450px;}
    #secWrap .noti_inner{height: 315px;}
    #secWrap .noti_inner ul{height: 255px;} 
    #secWrap .noti_inner li{padding: 18px 25px;}   


}

/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){

 

}

@media screen and (max-width: 768px){
    .certiBox #modal_btn{width: 50%;}




}

/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
    #wrap #secWrap{padding: 140px 20px 70px;}
    #secWrap .noti_inner{height: 305px;}
    #wrap #secWrap .wrapTit span{font-size: 1.5em;}
    #secWrap .voteWrap{padding: 30px 20px;}
    #secWrap .notiWrap{padding: 30px 20px; height: 430px;}
    #secWrap .voteWrap .tabs li{font-size: 1.05em;}
    #secWrap .voteWrap .tit_inner span{font-size: 1em;}
    #secWrap .noti_inner .tit_inner span{font-size: 1em;}
    #secWrap .more_button button{height: 50px;}
    #secWrap .more_button button a{font-size: 1em;}
    footer{padding: 25px 0;}
	

}

/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){
    .certiWrap .certiBox{width: 70%;}
    .certiBox #modal_btn{width: 70%;}

  
}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){
    #secWrap .voteWrap .date_inner span{font-size: 0.9em;}
    #secWrap .noti_inner .date_inner span{font-size: 0.9em;}
    #secWrap .noti_inner{height: 295px;}
    #secWrap .noti_inner ul{height: 244px;}
    #secWrap .notiWrap{height: 410px;}
    #secWrap .voteWrap .cont_inner li{padding: 18px 15px;}
    #secWrap .noti_inner li{padding: 18px 15px;}

    .certiBox #modal_btn{font-size: 1em;}
    .certiWrap .certiBox{padding: 60px 25px;}


}