@charset "utf-8"; /* CSS Document */
/*#toggleButton{display: none;}*/
/* 퀵 메뉴 */
#quick_menu {
 	position: fixed;
    top: auto;
    bottom: 2rem;
    z-index: 999;

    /* 우측 여백 계산: 전체에서 wrap 너비 기준으로 맞춤 */
    right: calc((100vw - var(--WrapWidth)) / 2 - 0.5rem); /* padding 고려 */
}
#quick_menu nav {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
}

    #quick_menu nav a {
        transition: all .2s ease-out;
		border: 1px solid rgba(255,255,255,0.15);
        box-shadow:  0px 1px 3px 0px rgba(0,0,0,0.1),  0px 4px 5px 0px rgba(0,0,0,0.1)!important;
    }

        #quick_menu nav a.expandable {
            display: block;
            align-items: center;
            /*position: relative;*/
            border-radius: 500rem;
            overflow: hidden;
            cursor: pointer;
        }

            #quick_menu nav a.expandable .inner_ctr {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }

                #quick_menu nav a.expandable .inner_ctr .icon {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.6em;
                }

                #quick_menu nav a.expandable .inner_ctr p {
                    opacity: 0;
                    font-weight: 500;
                    text-align: left;
                    font-size: 1.05em;
					display: none;
                }

    #quick_menu .top {
        display: inline-flex;
        align-items: center;
        border-radius: 500rem;
        justify-content: center;
        font-weight: 400;
        font-size: 1.4em;
        background-color: var(--white);
        /*color: rgba(0,0,0,0.5);padding-top: 6px;*/
        margin-top: 0.5rem;
        color: var(--gray_6);
        border: var(--op_black);
        box-shadow: 0px 2px 12px 0px rgb(0 13 57 / 10%);
    }

    #quick_menu nav a, #quick_menu nav a.expandable .inner_ctr .icon {
        width: 60px;
        height: 60px;
    }
		#quick_menu nav a.expandable:hover .inner_ctr{
			background-color: #0b4fc7!important;
			color: var(--white)!important;
		}
        #quick_menu nav a.expandable .inner_ctr, #quick_menu nav a.expandable:hover {
            /*width: 175px;*/
        }

        #quick_menu nav a.expandable:hover {
            /*border-bottom-right-radius: 0;*/
        }

            #quick_menu nav a.expandable:hover .inner_ctr p {
                opacity: 1;
            }

    #quick_menu .top:hover {
        border-bottom-right-radius: 0;
    }

/* ==================== 해상도 1380px 이상 ==================== */
@media screen and (min-width: 1380px) {

}


/* ==================== 모바일 레이아웃 ==================== */

@media ( max-width: 1280px ) {
	#quick_menu {
		/* 우측 여백 계산: 전체에서 wrap 너비 기준으로 맞춤 */
		right:  1rem /* padding 고려 */
	}	
}

@media ( max-width: 900px ) {
    /* 퀵 메뉴 */
    #quick_menu {
        bottom: 1rem;
        right: 1rem;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

        #quick_menu nav a.expandable:hover, #quick_menu nav a.expandable:hover .inner_ctr, #quick_menu .top:hover {
           /* border-bottom-right-radius: 999px!important;*/
        }

        #quick_menu nav a.expandable .inner_ctr p {
            display: none !important;
        }

        #quick_menu nav a.expandable .inner_ctr, #quick_menu nav a.expandable:hover, #quick_menu nav a, #quick_menu nav a.expandable .inner_ctr .icon {
            width: 50px;
            height: 50px;
        }

            #quick_menu nav a.expandable .inner_ctr .icon {
                font-size: 1.4em;
            }

            #quick_menu nav a.top {
                width: 34px;
                height: 34px;
                margin-top: 0.3rem;
            }
}

@media ( max-width: 600px ) {
}
/***** 가로모드 *****/
@media screen and (orientation: landscape) and ( max-width: 900px ) {
}
