@charset "UTF-8";

/* SNS 좌측 메뉴 */
.sns_menu {
    position: fixed;
    top:222px;
    left:0;
    width:46px;
    z-index: 9;
}
.sns_list{
    display:flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #fff;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: 1px solid #DEDEDE;
    border-right: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
}
.sns_list .btn_sns {
    width:46px;
    height:46px;
}
.sns_list .btn_sns > a {
    display: flex;
    width:100%;
    height:100%;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.sns_list .btn_sns > a:focus,
.sns_list .btn_sns > a:focus-visible {
	outline: 1px solid #000;
	outline-offset:-2px;
}
.sns_list .btn_sns .btn_blog {background-image: url("/images/n24/rvt/quick/icon_blog.png");}
.sns_list .btn_sns .btn_facebook {background-image: url("/images/n24/rvt/quick/icon_facebook.png");}
.sns_list .btn_sns .btn_youtube {background-image: url("/images/n24/rvt/quick/icon_youtube.png");}
.sns_list .btn_sns .btn_twitter {background-image: url("/images/n24/rvt/quick/icon_twitter.png");}
.sns_list .btn_sns .btn_instagram {background-image: url("/images/n24/rvt/quick/icon_instagram.png");}
.sns_list .btn_sns .btn_kakao {background-image: url("/images/n24/rvt/quick/icon_kakao.png");}
.sns_list .btn_sns.active .btn_blog{
    background-color: #2EB80D;
    background-image: url("/images/n24/rvt/quick/icon_blog_white.png");
}
.sns_list .btn_sns.active .btn_facebook{
    background-color: #3A5CA9;
    background-image: url("/images/n24/rvt/quick/icon_facebook_white.png");
}
.sns_list .btn_sns.active .btn_youtube{
    background-color: #E60C13;
    background-image: url("/images/n24/rvt/quick/icon_youtube_white.png");
}
.sns_list .btn_sns.active .btn_twitter{
    background-color: #000;
    background-image: url("/images/n24/rvt/quick/icon_twitter_white.png");
}
.sns_list .btn_sns.active .btn_instagram{
    background-image: url("/images/n24/rvt/quick/icon_instagram_white.png");
}
.sns_list .btn_sns.active .btn_kakao{
	background-color: #6A5CFF;
    background-image: url("/images/n24/rvt/quick/icon_kakao_white.png");
}


/* 우측 퀵메뉴 */
.btn_right_quick_wrap {
	position: fixed;
	right:22px;
	top:93%;
	width:76px;
	height:72px;
	background-color:#2F3B52;
	border-radius:12px;
	padding:10px;
	transform: translateY(-50%);
	box-shadow:0 0 8px 0 rgba(47,59,82,0.4);
	z-index:12;
}
.btn_right_quick_wrap .btn_right_quick {
	display:flex;
	width:100%;
	height:100%;
	align-items:flex-end;
	justify-content:center;
	color:#fff;
	font-size:13px;
	font-weight:500;
	letter-spacing:-0.1em;
	background-image: url("/images/n24/rvt/quick/icon_quick_close.png");
	background-repeat: no-repeat;
	background-position:top center;
	background-size: 12px;	
}
.btn_right_quick_wrap.active .btn_right_quick {
	background-image: url("/images/n24/rvt/quick/icon_quick_open.png");
}
.btn_right_quick_wrap.active + .right_quick_wrap {
	right:-120px;
	-webkit-transition: right 1s;
	transition: right 1s;
}
.right_quick_wrap{
    position: fixed;
    top:49%;
    right:0;
    width: 120px;
    padding:16px 8px;
    overflow: hidden;
    transform: translateY(-50%);
    background-color: #fff;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top: 1px solid #DEDEDE;
    border-left: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
    z-index: 10;
    -webkit-transition: right 1s;
    transition: right 1s;
}
.right_quick_wrap .rquick_list{
    display:flex;
    flex-direction: column;
}
.rquick_list .btn_rquick{
    margin-top:12px;
    border-bottom: 1px solid #DEDEDE;
}
.rquick_list li:first-child{
    margin-top:0;
}
.rquick_list li:last-child{
    border-bottom: 0;
}
.rquick_list .btn_rquick > a {
    display:flex;
    justify-content: center;
    font-size:14px;
    padding-top:34px;
    letter-spacing: -0.01em;
    text-align: center;
    padding-bottom:8px;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: top center;
}
.rquick_list .btn_rquick[data='선거법령정보'] > a {background-image: url("/images/n24/rvt/quick/icon_quick_01.png");}
.rquick_list .btn_rquick[data='정책공약마당'] > a {background-image: url("/images/n24/rvt/quick/icon_quick_02.png");}
.rquick_list .btn_rquick[data='선거통계시스템'] > a,
.rquick_list .btn_rquick[data='선거통계<br>시스템'] > a {background-image: url("/images/n24/rvt/quick/icon_quick_03.png");}
.rquick_list .btn_rquick[data='후보자토론회'] > a {background-image: url("/images/n24/rvt/quick/icon_quick_04.png");}
.rquick_list .btn_rquick[data='여론조사결과'] > a {background-image: url("/images/n24/rvt/quick/icon_quick_05.png");}
.rquick_list .btn_rquick[data='인터넷선거보도'] > a,
.rquick_list .btn_rquick[data='인터넷<br>선거보도'] > a {background-image: url("/images/n24/rvt/quick/icon_quick_06.png");}
.rquick_list .btn_rquick[data='선거실시지역'] > a {background-image: url("/images/n24/rvt/quick/icon_quick_07.png");}
.sns_menu_mobile {display:none;}
@media screen and (max-width:1024px) {
    .right_quick_wrap, .sns_menu {
        display: none;
    }
    .btn_right_quick_wrap {
    	display: none;
    }
}
@media screen and (max-width:768px) {
	.sns_menu_mobile {display:block;margin-top:20px;}
	.sns_menu_mobile .sns_list {flex-direction:row;border:1px solid #DEDEDE;border-radius:12px;}
	.sns_menu_mobile .sns_list .btn_sns {width:20%;height:68px;}
	.sns_menu_mobile .sns_list .btn_sns.active [class^='btn_']{background-color:transparent;}
    .rquick_list .btn_rquick[data='선거법령정보'] > a>div {background-image: url("/images/n24/rvt/mobile/popup/icon.png");}
	.rquick_list .btn_rquick[data='정책공약마당'] > a>div {background-image: url("/images/n24/rvt/mobile/popup/icon-1.png");}
	.rquick_list .btn_rquick[data='선거통계시스템'] > a>div,
	.rquick_list .btn_rquick[data='선거통계<br>시스템'] > a>div {background-image: url("/images/n24/rvt/mobile/popup/icon-2.png");}
	.rquick_list .btn_rquick[data='후보자토론회'] > a>div {background-image: url("/images/n24/rvt/mobile/popup/icon-3.png");}
	.rquick_list .btn_rquick[data='여론조사결과'] > a>div {background-image: url("/images/n24/rvt/mobile/popup/icon-4.png");}
	.rquick_list .btn_rquick[data='인터넷선거보도'] > a>div,
	.rquick_list .btn_rquick[data='인터넷<br>선거보도'] > a>div {background-image: url("/images/n24/rvt/mobile/popup/icon-5.png");}
	.rquick_list .btn_rquick[data='선거실시지역'] > a>div {background-image: url("/images/n24/rvt/mobile/popup/icon-6.png");}
}