@charset "utf-8";

/* 정당별color */
/* 더불어민주당 */ .party_100_fc {color:#162583;}     .party_100_bg {background:#162583;}
/* 국민의힘 */      .party_200_fc {color:#e60024;}     .party_200_bg {background:#e60024;}
/* 조국혁신당 */   .party_5077_fc {color:#17479e;}    .party_5077_bg {background:#17479e;}
/* 진보당 */        .party_5010_fc {color:#d9061f;}     .party_5010_bg {background:#d9061f;}
/* 개혁신당 */     .party_5070_fc {color:#ed6c00;}     .party_5070_bg {background:#ed6c00;}
/* 기본소득당 */  .party_5035_fc {color:#00d2c3;}     .party_5035_bg {background:#00d2c3;}
/* 사회민주당 */  .party_5071_fc {color:#f58400;}     .party_5071_bg {background:#f58400;}
/* 무소속 */       .party_9999_fc {color:#6a6a6a;}     .party_9999_bg {background:#6a6a6a;}


/* etc */
.moreNewsList_sub {display: block;width:145px;margin:0 auto;background:#fff;border: 1px solid #d6d6d6;border-radius: 18px;padding: 10px 0;color: #000;font-size: 13px;line-height: 13px;font-weight: 400;}
.elec_line_group {width:calc(100% - 32px);height:2px;background:#46474a;margin:20px 16px;overflow:hidden;display:inline-block;}
.banner_box {width: 100%;text-align:center;}

/* 아투 모바일용 */

 /* mainbar */
.elec_title_bar {width:100%;height:60px;background:#e3ecff url(https://img.asiatoday.co.kr/election2026/mo/background9th_2.png) center no-repeat;background-size:cover;overflow:hidden;}
.elec_title_bar .title_box {width:100%;max-width:800px;height:65px;position:relative;margin:0 auto}
.elec_title_bar .title_box h2 {font-size:22px;font-weight:700;color:#4e00a6;position:relative;top:16px;left:20px;letter-spacing: -0.5px;}
.elec_title_bar .title_box h2 .thtit {font-size:24px;line-height:26px;display:inline-block;color:#3a007c;position:relative;top:1px;}
.elec_title_bar .title_box h2 .thtit span {display:inline-block;position:relative;top:-5px;left:1px;}
.elec_title_bar .title_box .dday_box {position:absolute;top:17px;right:15px;text-align:center;}
.elec_title_bar .title_box .dday_box h4 {font-size:13px;font-weight:600;color:#5b00cb;letter-spacing:-1px;} 
.elec_title_bar .title_box .dday_box h4 span {color:#470089;}
.elec_title_bar .title_box .dday_box .count_box .dday {font-size:24px;font-weight:700;background: linear-gradient(110deg, #470097 11%, #960adb 65%), linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));background-clip:text;color:transparent;} 
 

 
.elec_voter_box {width:125px;position:absolute;right:0;top:9px;text-align:center;overflow:hidden;}
.elec_voter_box .elec_voter {width:80px;padding:2px 0 2px 0;margin:0 auto;border-radius:15px;background:#781eaf;display:flex;align-items:center;justify-content: center;} 
.elec_voter_box .elec_voter span {font-size:12px;line-height:16px;color:#fff;}
.elec_voter_box .info {width:125px;text-align:center;padding-top:6px;overflow:hidden;}
.elec_voter_box .info label {font-size:16px;font-weight:600;padding:0 2px;letter-spacing:-0.5px;color:#8426b5;}
.elec_voter_box .info span {font-size:13px;padding-right:3px;}
 
 
 /* 선거대결 */
.election_vote_wrap {width:100%;margin-bottom:5px;padding:0 15px 16px 15px;overflow:hidden;background:#e8e8ff;}
.election_vote_wrap .more_info {font-size:13px;float:right;position:relative;top:6px;color:#494949;}
.election_vote_box {width:100%;max-width:767px;margin:0 auto 5px auto;padding:15px;overflow:hidden;position:relative;background:#fff;border-radius:8px;}
.election_vote_box h3 {font-size:20px;font-weight:700;letter-spacing:-0.5px;margin-bottom:5px;text-align:center;} 
.election_vote_box .slide_left {width:45px;text-align:right;background:#fff;position:absolute;left:0;top:17px;z-index:1000;cursor:pointer;}
.election_vote_box .slide_right {width:45px;text-align:left;background:#fff;position:absolute;right:0;top:17px;z-index:1000;cursor:pointer;}
.election_vote_board_wrap {width:100%;overflow:hidden;position:relative;}
.election_vote_board_wrap  .loc_tit {font-size:18px;font-weight:400;text-align:center;}
.election_vote_board_wrap  .loc_tit span {color:#8d1eff;font-weight:600;letter-spacing:-0.5px;}
   .election_vote_board_main  {width:100%;height:110px;position:relative;display:flex;justify-content: space-between;}     
       .elec_win {position:absolute;top:77px;left:55px;z-index:300;}
       .elec_win img {width:35px;}
   .election_vote_board_main dl {overflow:hidden;}    
   .election_vote_board_main dl.vote_left_box {width:150px;}
   .election_vote_board_main dl.vote_right_box  {width:150px;}
   .election_vote_board_main dl dt {height:110px;position:relative;}
   .election_vote_board_main dl.vote_left_box dt .num {display:block;background:#919191;color:#fff;padding:2px 0 1px 0;text-align:center;width:25px;font-size:12px;text-align:center;position:absolute;bottom:0px;left:0px;z-index:1000;}  
   .election_vote_board_main dl.vote_right_box dt .num {display:block;background:#919191;color:#fff;padding:2px 0 1px 0;text-align:center;width:25px;font-size:12px;text-align:center;position:absolute;bottom:0px;right:0px;z-index:1000;} 
   .election_vote_board_main dl dt img {border:1px solid #ccc;border-radius:8px;overflow:hidden;width:80px;height:95px;padding-top:5px;position:absolute;bottom:0;z-index:100;}
   .election_vote_board_main dl dt img.leftimg {left:0;}
   .election_vote_board_main dl dt img.rightimg {right:0;}
   .election_vote_board_main dl dt .tit_l {position:absolute;top:31px;left:86px;z-index:200;text-align:left;}
   .election_vote_board_main dl dt strong {font-size:12px;font-weight:600;}
   .election_vote_board_main dl dt .tit_r {position:absolute;top:31px;right:86px;z-index:200;text-align:right;}   
   .election_vote_board_main dl dt p span {display:block;font-size:20px;padding:2px 0 1px 0;line-height:20px;font-weight:700;white-space:nowrap;}
   .election_vote_board_main dl dt p label {display:block;font-size:11px;font-weight:600;padding-top:3px;white-space:nowrap;}
   .per_graph {width:100%;height:60px;margin:0 auto;position:relative;overflow:hidden;}
   .per_graph .vote_margin {width:100px;position:absolute;top:5px;left:-50px;z-index:100;margin:0 50%;padding:3px 0 3px 0;font-size:12px;border:1px solid #ddd;background:#fff;border-radius:5px;text-align:center;}
   .per_graph .vote_margin p {color:#000;font-weight:600;}
   .per_graph .vote_margin label {color:#000;font-weight:500;}
   .per_graph .vote_l {font-size:17px;line-height:17px;font-weight:700;position:absolute;top:7px;left:0;}
   .per_graph .vote_r {font-size:17px;line-height:17px;font-weight:700;position:absolute;top:7px;right:0;text-align:right;}
      .per_graph .vote_p {font-size:12px;font-weight:400;}
      .per_graph .vote_t {display:block;font-size:12px;font-weight:400;}
   .per_graph .bar_box_left {height:14px;position:absolute;left:0;top:47px;}
   .per_graph .bar_box_right {height:14px;position:absolute;right:0;top:47px;text-align:right;}
   .per_graph .bar_box_left, .bar_box_right {animation: fillbg 1.0s ease-out forwards;}
   .bar_box_left {transform-origin: left;}
   .bar_box_right {transform-origin: right;}

@keyframes fillbg {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}



   /* 선거랭킹 */
   .dashboard_rank_atoo {width:100%;;padding-right:5px;overflow-y:auto;touch-action: pan-x;}
   .dashboard_rank_atoo::-webkit-scrollbar {height: 5px;}
   .dashboard_rank_atoo::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #fff; border-radius: 10px;}
   .dashboard_rank_atoo::-webkit-scrollbar-thumb {background: #e8e8e8; border-radius: 10px;}
   .dashboard_rank_atoo dl {width:850px;overflow:hidden;display:flex;}
   .dashboard_rank_atoo dl dd {width:170px;padding:10px 0;overflow:hidden;}
   .dashboard_rank_atoo dl dd ul {display:flex;}   
   .dashboard_rank_atoo dl dd ul li {position:relative;}
   .dashboard_rank_atoo dl dd ul li.thum {width:70px;position:relative;} 
   .dashboard_rank_atoo dl dd ul li.thum span {display:block;background:#919191;color:#fff;padding:2px 0 1px 0;text-align:center;width:25px;font-size:12px;text-align:center;position:absolute;bottom:5px;left:5px;}  
   .dashboard_rank_atoo dl dd ul li.thum .imgbox {width:60px;height:70px;margin:0 auto;border:1px solid #bdbdbd;padding-top:10px;border-radius:8px;overflow:hidden;}
   .dashboard_rank_atoo dl dd ul li.thum .imgbox img {width:100%;}   
   .dashboard_rank_atoo dl dd ul li.name {width:80px;color:#353535;} 
   .dashboard_rank_atoo dl dd ul li.name h5 {font-size:16px;padding-bottom:4px;font-weight:600;}
   .dashboard_rank_atoo dl dd ul li.name label {display:block;font-size:12px;font-weight:600;letter-spacing:-0.5px;}
   .dashboard_rank_atoo dl dd ul li.name .vote_per {font-size:16px;line-height:16px;font-weight:600;padding-top:5px;}
   .dashboard_rank_atoo dl dd ul li.name .vote_data {font-size:12px}

 
 
 

/* 선거페이지용  */

 /* mainbar */
.elec_title_topbar {width:100%;height:60px;background:url(https://img.asiatoday.co.kr/election2026/mo/background9th_2.png) center no-repeat;background-size:cover;overflow:hidden;}
.elec_title_topbar .title_box {width:100%;max-width:800px;height:65px;position:relative;margin:0 auto}
.elec_title_topbar .title_box h2 {font-size:22px;font-weight:700;color:#4e00a6;position:relative;top:16px;left:20px;letter-spacing: -0.5px;}
.elec_title_topbar .title_box h2 .thtit {display:inline-block;color:#3a007c;font-size:24px;}
.elec_title_topbar .title_box h2 .thtit span {position:relative;top:-6px;left:3px;}
.elec_title_topbar .title_box .dday_box {position:absolute;top:17px;right:15px;}
.elec_title_topbar .title_box .dday_box h4 {font-size:14px;font-weight:600;color:#5b00cb;letter-spacing:-1px;} 
.elec_title_topbar .title_box .dday_box h4 span {color:#470089;}
.elec_title_topbar .title_box .dday_box .count_box .dday {font-size:24px;font-weight:700;background: linear-gradient(110deg, #470097 11%, #960adb 65%), linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));background-clip:text;color:transparent;}
 
 
/* main topnews */
.elec_top_box_news {width:100%;overflow:hidden;padding:0 16px;margin:16px 0 0 0;}
.elec_top_box_news .img_box {width:100%;height:54vw;position:relative;overflow:hidden;margin-bottom:12px;}
.elec_top_box_news .img_box img {width:100%;height:100%;object-fit:cover;}
.elec_top_box_news .tit_box {overflow:hidden;position:relative;}
.elec_top_box_news .tit_box label {display:block;font-size:17px;font-weight:600;line-height:16px;margin-top:4px;padding-bottom:5px;color:#7443d7;white-space:nowrap;overflow:hidden;}
.elec_top_box_news .tit_box h2 {font-size:25px;font-weight:700;line-height:32px;color:#000;letter-spacing:-0.3px;}
.elec_top_box_news .related_news {font-size:16px;line-height:22px;color:#000;padding-top:10px;position:relative;padding-left:15px;padding-right:10px;}
.elec_top_box_news .related_news::before {content: "";position: absolute;left: 5px;top: 19px;width: 4px;height: 4px;border-radius: 50%;background-color: #898989;}


/* main thum list */
.elec_news_list {width:100%;padding:0 16px;}
.elec_news_list dl {width:100%;overflow:hidden;}
.elec_news_list dd {width:100%;overflow:hidden;padding: 16px 0;border-bottom:1px solid #f0f0f0;}
.elec_news_list dd a {display:flex;align-items:center;flex-wrap:wrap;}
.elec_news_list dd:first-child {padding-top:0;}
/* .elec_news_list dd:last-child {border-bottom:0;padding-bottom:0;} */
.elec_news_list dd .txt_box {flex:1;margin-left:10px;}
.elec_news_list dd .txt_box label {font-size:15px;font-weight:600;color:#7443d7;display:block;padding-bottom:2px;}
.elec_news_list dd .txt_box .tit {font-size:18px;line-height:24px;font-weight:600;letter-spacing:-0.3px;overflow:hidden;}
.elec_news_list dd .img_box {width:110px;height:73px;}
.elec_news_list dd .img_box img {width:100%;height:100%;object-fit :cover;}
.elec_news_list dt {padding-top: 20px;}


/* elec schedule */
.elec_ec_list {width:100%;padding:0 16px;}
.elec_ec_list h3 {font-size:20px;font-weight:600;padding-bottom:15px;}
.elec_ec_list dl {overflow:hidden;position:relative;}
.elec_ec_list dl dt {position:absolute;top:5px;left:6px;width:3px;height:345px;background:#e8e8e8;}
.elec_ec_list dl dd {margin-left:25px;padding-bottom:20px;position:relative;}
.elec_ec_list dl dd .date.active {color:#6029cf;font-weight:700;}
.elec_ec_list dl dd .txt {background:#ede9fc;padding:7px 8px;border-radius:8px;margin-top:5px;}
.elec_ec_list dl dd .txt.active {background: #7443d7;color:#fff;}
.elec_ec_list dl dd .txt.active span {color:#fff;}
.elec_ec_list dl dd .txt span {font-size:14px;}
.elec_ec_list dl dd .dot_box {position:absolute;top:1px;left:-25px;width:16px;height:16px;border-radius:50%;background:#e8e8e8;display:flex;align-items:center;justify-content:center;}
.elec_ec_list dl dd .dot_box.active {background:#7443d7;}
.elec_ec_list dl dd .dot_box label {display:block;width:10px;height:10px;border-radius:50%;border:2px solid #fff;}

/* elec per */
.electorale_box {width:100%;padding:0 16px 10px 16px;overflow:hidden;}
.electorale_box h4{font-size: 20px;font-weight: 600;color: #000;letter-spacing: -0.5px;margin-bottom:5px;}
.electorale_box h4 span {font-size:16px;color:#a19fa3;}
.electorale_box dl {display:flex;flex-wrap:wrap;padding-top:15px;max-width:360px;margin:0 auto;}
.electorale_box dl dt.head_per {width:100%;height:25px;position:relative;}
.electorale_box dl dt.head_per label {position:absolute;top:0;z-index:100;font-size:14px;color:#9b9b9b;}
.electorale_box dl dt.head_per label.b01 {left:34px;}
.electorale_box dl dt.head_per label.b02 {left:128px;}
.electorale_box dl dt.head_per label.b03 {right:60px;}
.electorale_box dl dt.headbox {width:35px;margin-bottom:25px;}
.electorale_box dl dd {width:calc(100% - 95px);margin-bottom:25px;background:#dfe3e9;border-radius:15px;overflow:hidden;position:relative;}
.electorale_box.active dl dd .per_bar {background: linear-gradient(to left, #6448b4 35%, #b380c9 85%);border-radius:15px;height:19px;position:absolute;top:0;left:0;z-index:100;transform-origin: left;animation: fillBar 1.0s ease-out forwards;transform: scaleX(0);}
.electorale_box dl dt.percentagebox {width:60px;margin-bottom:25px;text-align:right;}
.electorale_box dl dd:nth-of-type(5) {margin-bottom:0;}
.electorale_box dl dt:nth-of-type(10) {margin-bottom:0;}
.electorale_box dl dt:nth-of-type(11) {margin-bottom:0;}

@keyframes fillBar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}


.electorale_result  {width:100%;padding:0 16px;overflow:hidden;}
.electorale_result h4 {font-size: 20px;font-weight: 600;color: #000;letter-spacing: -0.5px;margin-bottom:10px;padding-bottom:5px;}
.electorale_result h4 span {font-size:16px;color:#a19fa3;}
.electorale_result .result_box01 {width:100%;}
.electorale_result .result_box01 h5 {font-size:18px;}
.electorale_result .result_box01 dl {overflow:hidden;max-width:360px;margin:0 auto;}
.electorale_result .result_box01 dl dd {width:100%;height:100px;overflow:hidden;position:relative;}
.electorale_result .result_box01 dl dd p {border-radius:50%;position:absolute;z-index:100;text-align:center;transform: scaleX(0);}
.electorale_result .result_box01 dl dd p label {color:#fff;font-weight:600;font-size:16px;position:relative;}
.electorale_result .result_box01 dl dd p label.party01 {top:32px}
.electorale_result .result_box01 dl dd p label.party02 {top:16px;}
.electorale_result .result_box01.active dl dd p.party01 {width:150px;height:150px;background:#ff0000;top:30px;left:20px;animation: growUp 1s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;}
.electorale_result .result_box01.active dl dd p.party02 {width:90px;height:90px;background:#1858b9;top:55px;left:210px;animation: growUp 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;}
.electorale_result .result_box01 dl dt {height:50px;border-top:1px solid #000;position:relative;}
.electorale_result .result_box01 dl dt span {font-size:14px;position:absolute;top:10px;}
.electorale_result .result_box01 dl dt span.party01 {left:70px} 
.electorale_result .result_box01 dl dt span.party02 {left:220px} 

.electorale_result .result_box02 {width:100%;}
.electorale_result .result_box02 h5 {font-size:18px;}
.electorale_result .result_box02 dl {overflow:hidden;max-width:360px;margin:0 auto;}
.electorale_result .result_box02 dl dd {width:100%;height:100px;overflow:hidden;position:relative;}
.electorale_result .result_box02 dl dd p {border-radius:50%;position:absolute;z-index:100;text-align:center;transform: scaleX(0);}
.electorale_result .result_box02 dl dd p label {color:#fff;font-weight:600;font-size:16px;position:relative;}
.electorale_result .result_box02 dl dd p label.party01 {top:32px}
.electorale_result .result_box02 dl dd p label.party02 {top:20px;}
.electorale_result .result_box02 dl dd p label.party03 {top:5px;}
.electorale_result .result_box02 dl dd p label.party04 {top:12px;}
.electorale_result .result_box02.active dl dd p.party01 {width:150px;height:150px;background:#ff0000;top:25px;left:10px;animation: growUp 1s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;}
.electorale_result .result_box02.active dl dd p.party02 {width:95px;height:95px;background:#1858b9;top:50px;left:110px;animation: growUp 1s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;}
.electorale_result .result_box02.active dl dd p.party03 {width:50px;height:50px;background:#ea3d00;top:75px;left:200px;animation: growUp 1s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;}
.electorale_result .result_box02.active dl dd p.party04 {width:65px;height:65px;background:#4c4c4c;top:65px;left:250px;animation: growUp 1s 1s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;}
.electorale_result .result_box02 dl dt {height:30px;border-top:1px solid #000;position:relative;}
.electorale_result .result_box02 dl dt span {font-size:14px;position:absolute;top:10px;}
.electorale_result .result_box02 dl dt span.party01 {left:35px} 
.electorale_result .result_box02 dl dt span.party02 {left:120px} 
.electorale_result .result_box02 dl dt span.party03 {left:207px} 
.electorale_result .result_box02 dl dt span.party04 {left:262px} 

@keyframes growUp {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}


/* 미디어쿼리 */
@media only screen and (min-width:800px) {
	.elec_top_box_news .img_box {height:430px;}

}