@charset "UTF-8";

/* SNS 좌측 메뉴 */
.sns_menu {
    position: fixed;
    top:225px;
    left:20px;
    width:46px;
    z-index: 10;
}
.sns_menu .sns_list{
    display:flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #DEDEDE;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.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 .btn_blog {background-image: url("/images/n24/lvt/icon_blog.png");}
.sns_list .btn_sns .btn_facebook {background-image: url("/images/n24/lvt/icon_facebook.png");}
.sns_list .btn_sns .btn_youtube {background-image: url("/images/n24/lvt/icon_youtube.png");}
.sns_list .btn_sns .btn_twitter {background-image: url("/images/n24/lvt/icon_twitter.png");}
.sns_list .btn_sns .btn_instagram {background-image: url("/images/n24/lvt/icon_instagram.png");}
.sns_list .btn_sns .btn_kakao {background-image: url("/images/n24/lvt/icon_kakao.png");}
.sns_list .btn_sns .btn_tictok {background-image: url("/images/n24/lvt/icon_tictok.svg");}
.sns_list .btn_sns.active .btn_blog{ 
    background-color: #2EB80D;
    background-image: url("/images/n24/lvt/icon_blog_white.png");
}
.sns_list .btn_sns.active .btn_facebook{
    background-color: #3A5CA9;
    background-image: url("/images/n24/lvt/icon_facebook_white.png");
}
.sns_list .btn_sns.active .btn_youtube{
    background-color: #E60C13;
    background-image: url("/images/n24/lvt/icon_youtube_white.png");
}
.sns_list .btn_sns.active .btn_twitter{
    background-color: #000;
    background-image: url("/images/n24/lvt/icon_twitter_white.png");
}
.sns_list .btn_sns.active .btn_instagram{
    background-image: url("/images/n24/lvt/icon_instagram_white.png");
}
.sns_list .btn_sns.active .btn_kakao{
    background-image: url("/images/n24/lvt/icon_kakao_white.png");
}
.sns_list .btn_sns.active .btn_tictok{
    background-image: url("/images/n24/lvt/icon_tictok_white.svg");
}

.sns_list .btn_sns > a:focus,
.sns_list .btn_sns > a:focus-visible {
	outline: 2px dashed #000;
	outline-offset:-3px;
}

.sns_menu_mobile {display:block; margin-top:20px;}
.sns_menu_mobile .sns_list {display:flex;flex-direction:row;border:1px solid #DEDEDE;border-radius:12px;}
.sns_menu_mobile .sns_list .btn_sns {width:20%;}
.sns_menu_mobile .sns_list .btn_sns.active [class^='btn_']{background-color:transparent;}


/* 우측 퀵메뉴 */
.right_quick_wrap{
    position: fixed;
    top:50%;
    right:20px;
    width: 78px;
    padding: 8px 13px;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #DEDEDE;
    z-index: 10;
}
.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;
    color: #333;
    padding-top:30px;
    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.q01 > a {background-image: url("/images/n24/lvt/quick_icon01.svg");}
.rquick_list .btn_rquick.q02 > a {background-image: url("/images/n24/lvt/quick_icon02.svg");}
.rquick_list .btn_rquick.q03 > a {background-image: url("/images/n24/lvt/quick_icon03.svg");}
.rquick_list .btn_rquick.q04 > a {background-image: url("/images/n24/lvt/quick_icon04.svg");}
.rquick_list .btn_rquick.q05 > a {background-image: url("/images/n24/lvt/quick_icon05.svg");}
.rquick_list .btn_rquick.q06 > a {background-image: url("/images/n24/lvt/quick_icon06.svg");}
.rquick_list .btn_rquick.q07 > a {background-image: url("/images/n24/lvt/quick_icon07.svg");}
.rquick_list .btn_rquick.q01 > a:hover {background-image: url("/images/n24/lvt/quick_icon01_on.svg");}
.rquick_list .btn_rquick.q02 > a:hover {background-image: url("/images/n24/lvt/quick_icon02_on.svg");}
.rquick_list .btn_rquick.q03 > a:hover {background-image: url("/images/n24/lvt/quick_icon03_on.svg");}
.rquick_list .btn_rquick.q04 > a:hover {background-image: url("/images/n24/lvt/quick_icon04_on.svg");}
.rquick_list .btn_rquick.q05 > a:hover {background-image: url("/images/n24/lvt/quick_icon05_on.svg");}
.rquick_list .btn_rquick.q06 > a:hover {background-image: url("/images/n24/lvt/quick_icon06_on.svg");}
.rquick_list .btn_rquick.q07 > a:hover {background-image: url("/images/n24/lvt/quick_icon07_on.svg");}

.btn_top_wrap {
    display: block;
    height: 48px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid #DEDEDE;
}
.btn_top_wrap .btn_top_link {
    display: flex;
    align-content: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: #333;
    letter-spacing: -0.01em;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 8px;
    background: url("/images/n24/lvt/btn_top.svg") no-repeat center top;
    background-size: 24px 24px;
}