@charset "utf-8";



/*레이아웃*/


#wrap { width: 100%; min-width:1400px; }
.inner { width:1400px; margin:0 auto;}

.web {display: block; }
.mob { display: none; }



.MobileNavWrap {display:none; }




/*헤더*/
#AreaHeader {position: fixed; width: 100%;  top:0; height: 185px; z-index: 10;}
#AreaHeader h1 a{ display: block; width:300px; height: auto;   }
#AreaHeader h1 a img {width:100%; }
#AreaHeader .headerWrap {position: relative; transition: all 0.2s ease;  background: #fff;  }
#AreaHeader .headerWrap:hover {background: rgba(255, 255, 255,1) ; }
#AreaHeader .header_top {height: 100px; border-bottom:1px solid #dbdbdb; }
#AreaHeader .header_top .inner { height: 115px; display: flex;  justify-content: space-between; align-items: center; }
#AreaHeader .header_top img {width: 100%; }
#AreaHeader .header_top .inner > div {display: flex; align-items: center; gap:8px; }

#AreaHeader .header_top .inner > div:after {content:''; width: 52px; height: 54px; display: inline-block; background: url(../images/main/top_icon.svg)no-repeat center;  }

#AreaHeader .header_top .inner > div > a {position: relative; padding-right: 20px;  }
#AreaHeader .header_top .inner > div > a:after {content:'' ; position: absolute; top:50%; transform: translateY(-50%); right:0; width: 1px; height: 16px; background: #666; display: block;}
#AreaHeader .header_top .inner > div > a:last-child:after {display: none;}
#AreaHeader .header_top  span {font-size: 16px; color:#666 }

#AreaHeader .header {  width: 100%; display: flex; align-items: center; justify-content: space-between;  height: 70px;  
background: linear-gradient(90.08deg, #064BCB -1.27%, #6598F7 50.16%, #0441B0 101.6%);}



.mobile_headerWrap {display: none; }




.MenuWrap {  display: flex; padding: 0 55px; justify-content: space-between;  }
.MenuWrap > a {font-size: 20px; font-weight: 700;  color:#fff;  font-family: 'GmarketSans'; transition: all 0.3s ease;   }
.MenuWrap > a:hover {  color:#FFEA2F;  }









/*배너*/


#AreaBanner { width: 100%;  height: 500px; background:url(../images/main/main_bg.png)no-repeat center;  background-size: cover; margin-top: 170px; 
}

.bannerWrap {display: flex; height: 500px; flex-direction: column; justify-content: center; align-items: center }
.bannerWrap h3 { font-size: 46px; color:#fff; font-family: 'GmarketSans'; }
.bannerWrap h2 { font-size: 80px; color:#fff; font-weight: 900; font-family: 'GmarketSans'; }





#section1 { padding: 160px 0; }

.sec1Wrap { display: flex; gap:25px; justify-content: space-between; align-items: center; }
.vote_container {display: flex; flex-direction: column; width: 829px; gap:26px;   }

.going_vote { position: relative; border: 1px solid #dbdbdb; border-radius: 30px;padding: 52px 52px 32px 52px;  }
.going_vote h4 {position: relative; display: inline-block; padding: 8px 26px 6px 68px; ;  border-radius: 50px; background: #3BAFC9; color:#fff;  font-size: 20px; font-weight: 700; margin-bottom: 26px;    }
.going_vote h4:before {content:''; position: absolute; bottom:-4px; left:-10px; background: url(../images/main/sect1_tit_bg.svg)no-repeat top center; width: 62px; height: 68px;  display: inline-block; }

.vote_slide {overflow: hidden; }


.vote_slide .tit { font-weight: 700;  font-size: 24px;  
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;min-height: 56px; 
max-height: 56px;  margin-bottom: 18px; 

}


.vote_slide .txt { font-size: 16px; min-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; margin-bottom: 26px;  }

.vote_slide .swiper-slide  div {display: flex; align-items: center ; justify-content: space-between; }
.datebx {display: flex; align-items: center; gap:12px; }
.calendar {  background: #0441B0 ; color:#Fff;  border-radius: 50%; width: 32px; height: 32px;    text-align: center; line-height: 32px; font-size: 20px;  }


.vote_count { display: flex; justify-content: center; align-items: center; padding: 8px 16px; background:  #0441B0; color:#CBDEFA; border-radius: 25px; gap:4px; }
.vote_count span {color:#fff;}
.vote_count em {color:#CBDEFA;} 



.vote_slide  .swiper-button-prev { background: url(../images/main/going_prev_btn.svg)no-repeat center !important; }
.vote_slide  .swiper-button-next { background: url(../images/main/going_next_btn.svg)no-repeat center !important; }

.vote_slide:hover .tit { color:#3B64A3}


.end_vote { padding: 44px 52px 40px 52px; height: 216px;  border-radius: 30px; background: #234F8F;   }
.end_vote h4 {color:#fff; font-size: 20px; font-weight: 700; margin-bottom: 26px;  }
.end_vote p {color:#fff; }

.end_vote .tit {font-size: 24px;  overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; margin-bottom: 18px; }
.end_vote .txt { font-size: 16px;  }
.end_vote:hover {background: #3B64A3;}


.mid_banner { position: relative; border: 1px solid #dbdbdb;width: 100%;  height: 546px; border-radius: 30px; overflow: hidden;  width: 546px; }
.mid_banner  a {line-height: 0; font-size: 0; display: block;  }
.mid_banner img {width: 100%; height: 100%; object-fit: cover; }
.mid_banner .swiper-pagination { display: flex ;gap:4px; justify-content: center;  width: 100%;  z-index: 999; bottom:20px;  }
.mid_slide  {  }
.mid_banner .swiper-pagination-bullet {width: 16px; height: 16px; }
.mid_banner  .swiper-pagination-bullet-active { background: #666}






/*공지사항*/

#section2 { padding: 136px 0; background: #FCFCFC}


.noticeWrap { }
.noticeWrap > div:first-child { display: flex; align-items: center; justify-content: center; margin-bottom: 26px;  }
.noticeWrap h3 { position: relative; padding-left: 100px;
text-align: center;
font-size: 54px;
font-weight: 900;
color: #555; }
.noticeWrap h3:before { content:'';  position: absolute; top:-15px ; left:0; width: 82px; height: 65px; background: url(../images/main/noti_tit_icon.svg)no-repeat top center; display: inline-block; }
.noticeWrap  .noti_more { display: inline-block; width: 50px; height: 50px;  background: url(../images/main/not_more_btn.svg)no-repeat top center; margin-left: 24px;  }

.notiBox{margin-top: 60px;  border-top: 1px solid #dbdbdb; }
.notiBox li {height: 108px; border-bottom: 1px solid #DBDBDB ; display: flex; justify-content: space-between;  align-items:  center; padding: 0 24px; }

.notiBox li a {position: relative; width:  calc( 100% - 180px);  font-size: 18px;    overflow: hidden; line-height: 48px;  text-overflow: ellipsis;  font-weight:600;  white-space: nowrap; }
.notiBox li span {font-size: 16px; color: #999; }






/*푸터*/


#Areafooter { background: #333}
.footinfoWrap a {color:#fff;}
.footperson { border-bottom: 1px solid #4F5272;  padding: 20px 0;}

.footinfo {padding: 30px 0;}
.footinfo .inner { display: flex;  align-items: center ; justify-content: space-between  }
.footinfo p {color:#fff ; font-weight: 300; font-size: 14px; }
.footinfo span  {color:#fff ; }
.personstats {     display: inline-block;
text-align: center;
font-size: 14px;
background: #4659C0;
padding: 10px 24px;
margin-top: 20px;
color: #fff !important;
border-radius: 20px; }














/*서브*/
#subWrap {margin-top:170px; padding: 100px 0;  }
.sub_top { width: 100%;  background-size: cover ;  display: flex; align-items: center; justify-content: center;  gap:20px;   flex-direction: column; }
.sub_top h2 { font-size: 40px; font-weight: 800; }
.home { display: inline-block; width: 18px; height: 16px; background: url(../images/contents/home_icon.svg)no-repeat right center;  }
.sub_top span {position: relative;  padding-left: 40px; line-height: 16px; font-size: 16px; vertical-align: middle;   }
.sub_top span:after {  content:''; position: absolute; top:50%; transform: translateY(-50%);  left:12px; width: 9px; height: 16px; background: url(../images/contents/snav_next_icon.svg)no-repeat center; display: inline-block;  }
.sub_top span:first-child:after {display: none;}
.sub_top span:first-child {padding-left:0; }



.introWrap { margin-top: 120px;   }
.introWrap .tit {font-size: 42px; font-weight: 900; letter-spacing: -0.1rem; color:#6598F7  }


.purposeBox {margin-top:120px; }
.purposeBox > div { display: flex; justify-content: space-between; align-items: center; padding: 60px 0; border-bottom: 1px solid #dbdbdb;  }
.purposeBox > div:first-child {padding-top: 0;}

.purposeBox .titbx { display: flex;  align-items: center; justify-content: space-between; gap:10px;width:400px;  }
.purposeBox .titbx .number { width: 60px; height: 60px; border-radius: 50%; background: #515DC6;   display: flex; align-items:center;justify-content: center; }
.purposeBox .titbx .number span {font-size: 28px; color:#fff; font-weight: 900; line-height: 1;  }

.purposeBox .titbx p {font-size: 24px; font-weight: 600; width: calc( 100% - 64px);  line-height:2rem;    word-break: keep-all; }
.purposeBox .txtbx { width: 960px; }
.purposeBox .txtbx p {font-size: 18px; line-height: 2rem;  }



.box4ea {display: flex; gap:20px; margin-top:120px;  }
.box4ea > div { width: 335px;  border: 1px solid #d1d1d1; padding: 60px 42px 40px 42px; border-radius: 15px; display: flex; flex-direction: column; text-align: center; }
.box4ea .imgbx  {  }
.box4ea  img {width: 100%;  height:96px; object-fit: contain; }

.box4ea  p.tit{ font-size: 22px; font-weight: 800; margin: 32px 0 ;  line-height:2rem; word-break: keep-all;   }




/*게시판*/
.board_wrap { margin-top:60px; }
.board_schbx {  }
.vote_list { display: flex; flex-direction: column;   gap: 60px; margin-top:40px; }

.vote_list > div { width: 100%; border: 1px solid #dbdbdb; border-radius: 15px; padding: 36px 40px;display:flex; gap:60px;   }

.vote_list .imgbx { width:460px; height:300px; border-radius: 10px; overflow:hidden;  border: 1px solid #dbdbdb;   }
.vote_list .imgbx img {width: 100%; height: 100%; object-fit: cover; }
.vote_list .txtbx {  width: calc( 100% - 520px); display:flex; flex-direction: column; justify-content: space-around; padding: 0 20px; }
.vote_list .txtbx .tit {font-size: 20px; font-weight:700; margin-bottom: 46px;word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-height: 56px; }
.vote_list .datebx {margin-top:12px; }
.vote_list a { width: 100%; text-align:center;}


.voteWrap {  margin-top:60px;  }

.s_vote_container {display:flex;flex-direction: column; }
.s_vote_top { padding: 40px 0 100px 0; text-align:center; border-top: 2px solid #787878; }
.s_vote_top h5 {  font-size: 28px; font-weight: 500; margin-bottom:16px;}
.s_vote_top p { font-size: 18px;color:#787878; font-weight: 500; }
.s_vote_top .area  { padding: 16px 30px ; border-bottom: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb;  margin-top:40px;  }
.s_vote_top .area span {font-weight:600;}
.s_vote_top .imgbx { padding: 60px 0; width: 80%; margin:0 auto;  }
.s_vote_top .imgbx img { width: 100%;  }
.s_vote_top .txtbx {text-align:left; padding: 0 40px; }

.s_vote_contents  {border: 1px solid #dbdbdb; margin-bottom:32px; }
.s_vote_contents .questionbx {display:flex; gap:24px; align-items: center; padding: 30px; background: #f9f9f9;    }
.s_vote_contents .questionbx > div  {width: calc(100% - 100px )}
.s_vote_contents .questionbx span { padding:6px 12px; background: #283593; border-radius: 5px; color:#fff;  } 
.s_vote_contents .questionbx p {font-size: 18px; font-weight: 700; }
.s_vote_contents .questionbx em {font-size: 14px;  display:inline-block; margin-top:6px; }
.s_vote_contents .answerbx {padding: 60px 40px ; display:flex;  flex-direction: column; gap:40px;}
.s_vote_contents .answerbx span {  }

.s_vote_contents .answerbx .imgbx  {width: 100%; height: 380px;  display:inline-block; margin: 16px 0 32px 0; }
.s_vote_contents .answerbx .imgbx img {    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left; }
.voteWrap .btnbx {display:flex;     justify-content: center;  gap:12px}

/*체크박스 커스텀*/

.ans_item { display:flex; align-items: center; position: relative; padding-left: 30px; cursor: pointer; font-size: 16px; line-height: 24px; color:#767676; font-size: 16px;  }
.ans_item input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkboxmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px;  border: 1px solid #dbdbdb;  }

.ans_item:hover input ~ .checkboxmark {
border: 1px solid  #234F8F;
}

.ans_item input:checked ~ .checkboxmark {
border: 1px solid  #234F8F;
}

.checkboxmark:after {
content: "";
position: absolute;
display: none;
}

.ans_item input:checked ~ .checkboxmark:after {
display: block;
}

.ans_item .checkboxmark:after {content:'';  width: 10px; height: 10px; background: #234F8F; 
top:50%; left:50%; transform: translate(-50%, -50%) ;
}

.answerbx .radio .checkboxmark{ border-radius: 50%;  }
.answerbx .radio .checkboxmark:after {content:''; border-radius: 50% }


/**/
.ans_txt { display:flex; width:100%; align-items:center; gap:20px; }
.ans_txt span:nth-child(2) { width: calc(100% - 100px)}
.ans_txt input[type="text"] { border:1px solid #dbdbdb ; font-size: 16px; line-height: 42px; padding:0 16px; border-radius: 25px; width: 100%; box-sizing:border-box;  }
.ans_txt textarea { width:100%; box-sizing: border-box;  border:1px solid #dbdbdb; padding:16px; border-radius: 15px; min-height: 120px;}


.ans_score {display:flex; gap:32px; align-items: center;}
.ans_score p { padding: 0 10px;  border-radius: 5px; line-height: 32px; color:#fff;  }
.ans_order {text-align: center;  }

.ans_order .ans_item { position:static; }
.ans_order table {  padding:0; margin:0; table-layout: fixed; width:100%; }
.ans_order table tr th { padding: 16px; background: #f8f8f8; color:#000; border: 1px solid #dbdbdb;}
.ans_order table tr td { height: 50px;    position: relative;  padding: 10px; border: 1px solid #dbdbdb;  }

.ans_order .checkboxmark {left: 50%; top:50%;  transform:translate(-50% , -50%);}
.ans_star {display:flex; align-items: center;  gap:12px;}
.ans_star span {
    width: 30px;
    height: 30px;
    color: transparent;
    text-shadow: 0 0 0 #99ccff;
    font-size: 1.8em;
    box-sizing: border-box; cursor:pointer;}




.vote_result .btnbx { display:flex; align-items:center; gap:8px;} 


.dot {padding-left: 12px; position: relative; margin-top: 8px; /*margin-left: 10px !important;*/ }
.dot:before { content:' '; position: absolute; top: 6px; left:0;  display: inline-block; width: 6px; height: 6px; background: #1A6DE7; border-radius: 50%; }


.vote_view_box { display:flex; flex-direction: column; gap:48px; margin-bottom:120px;  }
.vote_view_box .tit {font-size: 20px; margin-bottom:16px; font-weight:700;  }
.vote_view_box > div {display:flex; flex-direction: column; gap:24px;  }
.graph {padding: 0 8px; margin-top: 10px;  }
.graph p {margin-bottom:6px; }
.bar { position:relative;  width: 100%; height:42px; background: #f0f0f0; border-radius: 10px; overflow:hidden;   }
.fill { position: absolute; top:0; left:0;  display:flex; align-items: center ; justify-content: flex-end; height: 42px; padding-right: 6px; 
background: linear-gradient(45.48deg, #FFD753 15.97%, #FFEFB9 53.15%, #FFC402 90.33%); border-radius: 10px 0 0 10px; font-weight: 700; color:#333;  width: 0; /* 초기 너비 */ }
.fill:before { content:''; width:48px; height: 42px; display:block; background: url(../images/contents/graph_icon.svg)no-repeat center;   }
.fill em {position:absolute; left: 10px;  }

.vote_view_box .imgbx { width: 80%; margin: 0 auto; }

.vote_view_box .dot:before {top:10px; }





/*로그인,회원가입*/



.loginWrap { width:600px;  margin:0 auto 0 auto;  }
.loginWrap h5 {font-size: 36px; text-align:center; font-weight:900; padding-bottom:40px;  border-bottom: 1px solid #dbdbdb; margin-bottom:60px; }
.loginWrap input[type="text"] { width:100%; font-size: 14px;padding-left: 12px;line-height: 48px;border-radius: 10px; border: 1px solid #ccc;box-sizing: border-box; }
.loginbox span {color:#ddd; line-height:0;   }


.loginWrap .btnbx { text-align:center;  flex-direction: row !important;  border-top: 1px solid #dbdbdb; margin-top:60px; padding-top:40px; display:flex; justify-content: center; gap:12px;}
.loginWrap .btnbx a { width:36%; display:inline-block; color:#fff; } 
.loginbox {display:flex; align-items:center; justify-content: space-between;gap:10px;  margin-bottom:10px; }
.loginbox > div { width: calc( 100% - 192px) ; display:flex; align-items:center; justify-content: space-between; gap:12px}
.loginbox > div:first-child label {  width:110px; }
.loginbox > button { width: 162px}

.loginWrap .formbox  {display:flex;  flex-direction: column; gap:32px;  }
.loginWrap .formbox > div { display:flex; flex-direction: column; gap:8px;  }
.loginWrap .formbox input[type="radio"] {width: 14px; height:14px;}

.loginWrap .formbox .add { display: flex;
    flex-direction: column; gap:12px;  }
.loginWrap .formbox .add > div:first-child {display:flex; gap:12px;   }
.loginWrap .formbox .add > div button { width: 140px; }

.loginWrap .formbox .select-selected {box-shadow:none; border-radius: 10px; font-size: 14px; height:50px;   line-height:50px;   border: 1px solid #ccc;}
.loginWrap .formbox  .select-items {box-shadow:none; border-radius: 10px; top:54px;   border: 1px solid #ccc; max-height:200px; overflow-y:auto;}

.loginWrap .formbox .gender { display:flex;  gap:40px;}
.loginWrap .formbox  .select-items div { height: 42px; line-height :42px; font-size: 14px; }

.loginWrap .formbox .telbx { width: 100% ; display:flex; align-items:center; justify-content: space-between; gap:12px}
.loginWrap .formbox .telbx label {  width:30%; }


.loginWrap .tit{ font-size: 16px; font-weight:600; color:#18A35A; }

.loginWrap .btnbx  button{ width: 100%;  }

.person_rule_box { padding: 20px 16px; border: 1px solid #dbdbdb; border-radius: 10px; background: #f9f9f9;     }
.person_rule_box p { font-size:12px; line-height: 1.4rem; margin-bottom:16px;  }


.loginWrap p { font-size: 14px; }


.loginWrap .answerbx { display:flex;  gap:20px; margin-top:12px;  border-bottom: 1px solid #dbdbdb; padding-bottom:16px;  }
.loginWrap .answerbx .radio .checkboxmark { width:18px; height:18px; }
.loginWrap .ans_item { font-size: 14px ; line-height:18px; padding-left: 24px; }

.loginWrap .gender .answerbx { padding-bottom:0; border:none; }


.mid_txtbx { margin-top:120px;  }

.mid_txtbx h5 { font-size: 32px; font-weight:400; text-align:center; line-height:3rem; margin-bottom:60px; word-break: keep-all;}
.mid_txtbx h5 span {color:#0441B0; font-size: 40px; }


.mid_contents {  display:flex;flex-direction: column; gap:32px; border: 3px dotted #dbdbdb ; border-radius: 15px; width: 80%; margin:0 auto; padding: 40px 52px; }
.mid_contents > div { display:flex; gap:40px; align-items: center; }
.mid_contents > div  span {font-size: 18px;  word-break: keep-all;}
.mid_contents > div  span:first-child { width: 120px; text-align:center; padding: 4px 0; color:#fff; font-weight:700;   background: #FFC960; border-radius: 5px; }


.introWrap .btnbx { margin-top:60px; text-align:center;  }


.my_vote_list { margin-top:120px; }
.my_vote_list .tit {font-size: 20px; font-weight:700; }
.my_vote_list .dot:before {top:8px; }
/*반응형*/

@media (max-width: 1440px){ 

#wrap { width: 100%; min-width: auto;}
.inner { width: 100%; height: auto; padding: 0 16px;  }
 

}  







@media (max-width: 1024px){ 
#AreaHeader { height: 70px; }

.mobile_nav {display: none; }

#AreaHeader .header {display: none; }

.header_top{display: none; }
.all_btn {  background: url(../images/main/all_btn.svg)no-repeat center;  width: 50px;
height: 50px;
background-size: contain;}


.headerWrap  {height: 70px; border-bottom: 1px solid #dbdbdb;  }
.header .all_btn {display:none; }
.MobileNavWrap { display:block; }

.mobclose {  background: url(../images/main/mob_close_btn.svg)no-repeat center;  width: 50px; height: 50px; background-size: contain;  }


/*모바일메뉴*/

.MobileNavWrap .all_btn {position: absolute;  top: 50%; right: 16px; transform: translateY(-50%);  }
#AreaHeader .MobileNavWrap  .logo { position: absolute;  top: 50%; left: 16px; transform: translateY(-50%); width: 300px; height: 42px;   }
#AreaHeader .MobileNavWrap  .logo  img{ width: 100%; height: 100%; background-size: contain;  }

.MobNav_container {display:none;  position:fixed ;  left:0; top: 0; width: 100%; height: 100%; background: #fff;  }
.MobNavTop { position: relative; display:flex;justify-content: space-between; align-items: center; height:70px; padding:0 16px; background: #fff;   }
.MobNavTop > div { display:flex ; gap:12px; align-items: center;  }
.MobNavTop > div a {font-size: 12px; }
.MobNavbox {border-bottom:1px solid #dbdbdb; max-height: calc(100% - 70px);
overflow-y: auto; }
.MobNavbox button {width: 100%;}
.MobNavbox a { display:block; width: 100%; text-align:center; }
.submenu {padding: 20px;   display:none; border-top: 1px solid #dbdbdb;}
.mnav_1dep { padding: 22px  0; border-top: 1px solid #dbdbdb; font-size: 16px; color:#555;  }
.mnav_1dep.active { background: #ff2222; color:#fff; }
.submenu > li { margin-bottom:10px;  }
.submenu .mnav_2dep { border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;  padding: 10px 0; background:#3993E7; color:#fff; display: block;        text-align: center;  }
.submenu2 {  display:none;   padding: 10px 20px; background:#f9f9f9 ; border-radius:10px; margin-top:20px;  max-height: 240px; overflow-y:auto;  }
.submenu2 li a {position:relative;  padding: 10px 0 10px 10px;; display:block;  }
.submenu2 li a:before { content:''; position:absolute; top:16px; left:0px;  display:block;  width:4px; height:4px; background: #000;  border-radius: 50%; }


    
    #AreaBanner { margin-top: 70px; height: 360px;   }    
    .bannerWrap {height: 360px ; }
    .bannerWrap h3 { font-size: 30px;}
    .bannerWrap h2 {font-size: 52px; }
    
    #section1 { padding: 60px 0; }
    .sec1Wrap { flex-direction: column; }
    .vote_container { width: 100%; }
    .mid_banner {width: 100%;}
    #section2{ padding: 60px 0; }
    
    .vote_slide .tit { font-size: 20px; }
    .end_vote .tit {font-size: 20px; }
    .end_vote {height: auto; padding: 40px 52px 44px 52px; }
    .mid_banner {height: auto; }
    
    
    .noticeWrap h3 {font-size: 30px;  padding-left: 68px; }
    .noticeWrap > div:first-child {align-items: flex-start; }
    .noticeWrap .noti_more {width: 30px; height: 30px; background-size: cover; margin-left: 16px;  }
    .noticeWrap h3:before { width: 52px; height: 45px; background-size: contain; top:-10px;}
    .notiBox { margin-top: 20px; }
    .notiBox li { padding: 20px 16px ; height: auto}
    .notiBox li a { width: calc( 100% - 120px ); line-height: 1.2; font-size: 14px; }
    .notiBox li span {font-size: 13px; }


	

#subWrap {margin-top:70px; padding: 32px 0;}
.vote_list { gap: 24px; }
.vote_list > div { padding: 26px 32px;     flex-direction: column; gap:40px;}
.vote_list .imgbx { width:100%; }
.vote_list .txtbx { width:100%;  }
.vote_list .txtbx > div { margin-bottom:24px;  }
.vote_list button {margin-top:32px;}





.box4ea {flex-wrap: wrap;}
.box4ea > div { width: calc( 50% - 10px); }

.introWrap {margin-top:60px; }
.introWrap .tit {font-size: 20px; }
.purposeBox{margin-top:30px} 
    .purposeBox > div {padding: 16px 10px ; gap: 12px; flex-direction: column;}
    .purposeBox .titbx { width: 100%; }
    .purposeBox .titbx .number {width: 40px; height: 40px; }
    .purposeBox .titbx .number span {font-size: 16px; }
    .purposeBox .txtbx { width: 100%; }
    .purposeBox .titbx p {font-size: 16px; width: calc( 100% - 50px); line-height: 1.6rem; }
    .purposeBox .txtbx p {font-size: 14px; line-height: 1.6rem; }

.box4ea {margin-top:30px; }



} 


@media (max-width: 720px){  
    #AreaHeader .MobileNavWrap .logo { width: 160px;
        height: auto;
        background-size: contain;   }
    .MobNavTop > div {gap:4px; }
    #AreaBanner { margin-top: 70px; height: 220px;  }    
    .bannerWrap {height: 220px ; }
    .bannerWrap h3 { font-size: 22px;}
    .bannerWrap h2 {font-size: 36px; }
    #section1 {padding: 30px 0;}
    .going_vote { padding: 30px 16px; border-radius: 15px;  }
    .going_vote h4 { padding: 10px 26px 4px 34px; font-size: 18px; margin-bottom: 32px;  }
    .going_vote h4:before { width: 42px; height: 48px; background-size: contain;  left: -5px}
    .vote_slide .tit {font-size: 18px; margin-bottom: 0;  }
    .vote_slide .txt {display: none; }
    
    .vote_slide .swiper-button-next {right: 0; }
    .vote_slide .swiper-button-prev {left:0; }
    
    .vote_slide .swiper-slide  div {flex-direction: column; width: 100%;  }
    
    .datebx {gap:12px; }
    .datebx span { font-size: 14px;  }
    .vote_count { width: 100%; margin-top: 10px;  flex-direction: row !important; justify-content: center !important}
    .vote_count span {font-size: 14px; }
    
    
    .end_vote { padding: 30px 16px; border-radius: 15px; }
    .end_vote h4  {text-align: center; }
    .end_vote .tit {font-size: 18px; }
    .end_vote .txt {font-size: 14px; }
    
    #section2 { padding: 30px 0 60px 0; }
    
    
    
    .notiBox li { padding: 16px 10px; }
    .notiBox li span {display: none; }
    .notiBox li a { width: 100%; }
    
    .footinfo  {text-align: center; }
    .footinfo .inner { flex-direction: column;  gap:20px;}
    .footinfoWrap a {font-size: 14px; }
    





.sub_top h2 { font-size: 26px; }
.voteWrap {margin-top:60px; }
.s_vote_top { padding: 20px 0 30px 0; }
 
/*투표*/
.sub_top {gap:12px}
.s_vote_top h5 {font-size: 18px; padding: 0 10px; }
.s_vote_top p {font-size: 13px; }
.sub_top span {font-size: 13px; }

.s_vote_top .area {margin-top:20px; padding: 12px 10px; font-size: 12px;   }
.s_vote_top .imgbx { padding: 30px 20px; }
.s_vote_top .txtbx { padding: 0 20px;}

.s_vote_contents .questionbx { padding: 16px 12px; align-items: flex-start; flex-direction: column; gap:8px;}
.s_vote_contents .questionbx span {font-size: 12px; }
.s_vote_contents .questionbx p { font-size: 15px; }


.s_vote_contents .answerbx { padding: 26px 12px; gap:20px;  }
.s_vote_contents .answerbx .imgbx { margin:12px 0 ; height: auto ; }

.checkboxmark { width: 16px; height:16px; }
.ans_item {font-size: 14px; padding-left: 20px;  }
.ans_txt {gap:4px; }
.s_vote_contents .answerbx span {font-size: 14px; }
.ans_txt input[type="text"] {line-height: 38px; font-size: 14px;  width:100%; }
.ans_txt span:nth-child(2) {width: calc(100% - 24%);}
.ans_txt span:nth-child(2) input{ width: 100%;}
.ans_txt textarea {font-size: 14px; min-height: 90px; width: 100% !important;;  }
.ans_score { gap:2px;  flex-wrap: wrap; }
.ans_score > span { width: 50%; }
.ans_score p {font-size: 12px; line-height: 28px;  width:100%; }

.ans_order table { table-layout: auto;}
.ans_order table tr th { font-size: 12px; }
.ans_star {flex-wrap: wrap; gap:0; }
.ans_star p {width: 100%; margin-bottom:10px; font-size: 14px; margin:0 auto;   }
.ans_star span {text-align:center;  width: 20px; height:20px; }



.board_schbx { margin-top:30px}
.vote_list { margin-top:20px; }
.vote_list > div {padding: 16px 20px; gap:32px;}
.vote_list .imgbx {height:200px; }
.vote_list .txtbx { padding:0;}
.vote_list .txtbx .tit {font-size: 16px; margin-bottom:24px;word-break: break-all;  }


.vote_result .btnbx {flex-direction: column; margin-top:20px; }



.vote_view_box { gap:24px; margin-bottom:30px; }
.vote_view_box .tit { font-size: 14px; }
.vote_view_box > div {gap:8px; }
.fill:before { display:none; }
.dot {padding-left:8px; }
.dot:before { top:6px; width:4px; height:4px;  }
.fill em {font-size: 13px; }



.loginWrap { width: 100%; padding:0 20px; }

.loginWrap .tit{ font-size: 14px;  }
.loginWrap h5 { margin-bottom: 32px;  font-size: 26px; }
.loginWrap p {font-size: 12px; line-height: 1.2rem} 
.person_rule_box {padding: 16px 12px;  }
.loginWrap .formbox { gap:24px; }
.loginWrap .btnbx {border-top:0; margin-top:0; gap:4px;  }


.box4ea > div { width: 100%; }

.mid_txtbx {margin-top:30px; }
.mid_txtbx h5 {font-size: 16px;  line-height: 1.8rem; margin-bottom:20px; }
.mid_txtbx h5 span {font-size: 20px; }

.mid_contents {width:100%; padding: 32px 16px;  }
.mid_contents > div {flex-direction: column; gap:16px; }
.mid_contents > div span {font-size: 14px; text-align:center; ; }
.introWrap .btnbx {margin-top:30px; }


.s_vote_contents .questionbx > div { width :100%; }
.my_vote_list { margin-top:40px; }
.my_vote_list .tit {font-size: 16px; }
.loginbox { flex-direction: column;}
.loginbox > div {width: 100%; }

.loginWrap input[type="text"] { line-height: 42px; }

.loginWrap .answerbx {    flex-direction: column; }
}