@charset "utf-8";

/********************************************************
■ SideBar : 사이드바(모바일 메뉴)
********************************************************/

/* sidebar Box */
#nt_sidebar {position: fixed;bottom: 0;left: 0;width: 100%;height: calc(100% - 70px);z-index: 500;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0s linear 0.3s;	background: #fff;padding: 10px 20px 20px;display: flex;justify-content: space-between;flex-flow: column-reverse;}
#nt_sidebar.open {opacity: 1;visibility: visible;	transition: opacity 0.3s ease,visibility 0s linear 0s;}
#nt_sidebar .sidebar-content { height: 100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }

/* Icon */
.sidebar-icon i { font-size:22px; line-height:22px; }

/* Menu */
#nt_sidebar .side_user_menu{display: flex; justify-content: center; align-items: center;margin-top: 20px;}
#nt_sidebar .side_user_menu p{width: 50%; text-align: center; line-height: 50px; border: 1px solid #eee; font-size: var(--font-size18);cursor: pointer;}
#nt_sidebar .side_user_menu p:first-child{border-right: unset;}
#sidebar-menu{height: calc(100% - 70px); overflow-y: auto;}
.sidebar-list h5 { padding:0.55rem 1.0rem; margin:0; font-weight:bold !important; border-top:1px solid #dee2e6; margin-top:-1px; }
.sidebar-list ul.off { display:none; }
.sidebar-list li { position:relative; }
.sidebar-list li a { display:block; padding:0.45rem 1.0rem; overflow:hidden;color: #000; }
.sidebar-list li .me-a {font-size: var(--font-size20); padding: 20px 0px; position: relative; top: 0; left: 0;}
.sidebar-list .fa-caret-down {position: absolute; z-index: 1; top: 50%; right: 20px; text-align: center; cursor: pointer; color: #a5a5a5; font-size: var(--font-size20) !important; transform: translateY(-50%);}

.sidebar-list .me-ul { background:#fff;border: unset !important; }
.sidebar-list .me-ul>.me-li{border-bottom: 1px solid #eee;}
.sidebar-list .me-ul1 { background:#fff; }
.sidebar-list .me-ul2 { }
.sidebar-list .me-li1 .me-a1,
.sidebar-list .me-li2 .me-a2 {font-size: var(--font-size20); padding: 20px 20px 20px 20px; color: #787878;}
.sidebar-list .me-li.active .me-a{ font-weight:bold; color: var(--blue-main); }
.sidebar-list .me-li.active .me-a .fa-caret-down,
.sidebar-list .me-li1.active .me-a1,
.sidebar-list .me-li2.active .me-a2 {color: var(--blue-main); }
.toggle_atv .fa-caret-down{transform: translateY(-50%) rotate(180deg);}
.sidebar-list .me-line1 .me-a1 { background:#eee; font-weight:bold; }
.sidebar-list .me-line2 .me-a2 { background:#eee; font-weight:bold; }

/* Mask */
#nt_sidebar_mask { display:none; position:fixed; z-index:499; background:rgba(0,0,0,0.75); left:0; top:0; width:100%; height:100%; }

/* Noti Tack */
#nt_sidebar_noti { position: fixed; z-index: 100; }
@media (min-width: 768px) {
	#nt_sidebar_noti { top:40%; right: 0; border-top-left-radius: 50rem !important; border-bottom-left-radius: 50rem !important; }
}
@media (max-width: 767px) {
	#nt_sidebar_noti { left:0; bottom:25px; border-top-right-radius: 50rem !important; border-bottom-right-radius: 50rem !important; }
}

/* Go to Top */
#nt_sidebar_move {position: fixed; width: var(--font-size60); height: var(--font-size60); background: #5b5b5b; bottom: 20px; right: 20px; z-index: 3; border-radius: 15px; box-shadow: 2px 2px 5px #00000047;}
#nt_sidebar_move span {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;}
#nt_sidebar_move span img{width: 50%;filter: brightness(0) invert(1);}
#nt_sidebar_move:hover{background: var(--blue-dip);}
#nt_sidebar_move .sidebar-move-bottom { display:none !important; }
.ft_sns_wrap{position: fixed; bottom: 90px; right: 20px; display: flex; justify-content: space-between; flex-flow: column; gap: 10px; width: var(--font-size60);z-index: 3;}
.ft_sns_wrap img{width: 100%; border-radius: 15px;box-shadow: 2px 2px 2px #00000047; transform-origin: 50% 0%; animation-name: shake; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 0.5s;cursor: pointer;}
.ft_sns_wrap:hover img{animation-name: "";}
@media all and (max-width:1200px) {
	.ft_sns_wrap{bottom: 80px;}
	.ft_sns_wrap img,
	#nt_sidebar_move{border-radius: 12px;}
}

@media all and (max-width:700px) {/* 호버효과 사라지는 구간 */
	#nt_sidebar_move {right: 10px;}
	.ft_sns_wrap{bottom: 70px;right: 10px;}
	.ft_sns_wrap img,
	#nt_sidebar_move{border-radius: 10px;}
  #nt_sidebar_move:hover{background: #5b5b5b;}}

@keyframes shake{
      0%{
          transform: rotate(0deg);
        }
        10%{
          transform: rotate(20deg);
        }
        20%{
          transform: rotate(-20deg);
        }
        30%{
          transform: rotate(15deg);
        }
        40%{
          transform: rotate(-15deg);
        }
        50%{
          transform: rotate(5deg);
        }
        60%{
          transform: rotate(-5deg);
        }
        70%{
          transform: rotate(0deg);
        }
        100%{
          transform: rotate(0deg);
        }
    }