.heading {
    background-color: white;
    /* background: linear-gradient(#fff, #ffffff00);  */
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.02);
    position: fixed; top:0; right: 0; left: 0; z-index: 10;
    transition: transform 0.3s ease;
    /* font-family: "Nanum Gothic", sans-serif; */
}
.backhead {height: 100px; width: 100%; transition: transform 0.3s ease;}

nav {height: 100px; transition: .5s ease-in-out;
/* position:relative; */
}
nav:hover {background: #ffffff; transition: .5s ease-in-out;}
nav .logo img {max-width: 270px; width: 100%; height: auto;}

@media screen and (max-width:768px) {
    .backhead {height: 60px; width: 100%; transition: transform 0.3s ease;}
    nav {height: 60px; background-color: #fff;}
    nav .logo img {max-width: 180px; width: 100%; height: auto;}
}

/* #navbar.hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
} */

/* ------------------------------------ 토글메뉴 */

nav .offcanvas {
    /* background-color: #FF7E31; */ /*기존색깔*/
    background: #EE7B38;
    color: white;
}
nav .offcanvas-body, nav .offcanvas-header {
    padding: 36px; /*토글메뉴 전체 테두리*/
}
nav .accordion {
    text-align: left;
}
nav .accordion-item {
    background: none;
    border: none;
    padding-bottom: 24px;
    /* margin-bottom: 14px; 메뉴사이간격 */
}
nav .accordion-header button {
    background: none;
    border: none;
    color:#fff;
    font-family: 'Paperlogy-6SemiBold';
    font-weight: 600;
    font-size: 24px;
}
nav .accordion-body {
    padding: 0;
    color:#fff;
}
nav .accordion-body .submenuFlex {
    display: flex;
    margin-bottom: 16px;
}
nav .accordion-body .submenuFlex span:nth-of-type(1) {
    /* border: 1px solid white; */
    width: 100px;
}
nav .toggleLogin li {
    display: inline-block;
    border-right: 1px solid white;
    padding-right: 8px;
    padding-left: 5px;
    font-size: 0.8rem;
}
nav .toggleLogin li.toggleSubmenu {
    font-size: 0.6rem;
}
nav .toggleLogin li:last-of-type {
    border-right: none;
    padding-left: 8px;
}














/* ------------------------------------ 상단로그인 */
nav .toplogin {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10%;
}
nav .toplogin li {
    display: inline-block;
    border-right: 1px solid rgb(0, 0, 0);
    padding-right: 8px;
    padding-left: 8px;
    font-size: 0.8rem;
}
nav .toplogin li:last-of-type {
    border-right: none;
    padding-right: 0;
}


/* ------------------------------------ 상단메뉴 */



/* 기본 */
.topmenuBox {    
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    /* border: 1px solid red;  */
}
.topmenuBox span {
    font-size: 1.2rem;
    white-space: nowrap;
}
.topmenuBox .submenu span {
    font-size: 1rem;
    font-weight: 400;
}
.topmenuBox .topmenu { 
    display: flex; 
}
.topmenuBox .topmenu .menu-item {
    position: relative;
    /* border: 1px solid blue; */
    padding: 37px 16px 30px 17px;
    margin: 0 10px;
}
/* 하위메뉴, 하위의하위메뉴 기본상태 */
.topmenuBox .topmenu .menu-item .submenu {
    /* display: none; */
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 5;
    width: 200px;
    padding: 20px 0 16px 0; /* submenu와 동일한 높이에서 시작 */
    background-color:rgb(255, 255, 255);
    box-shadow: 1px 1px 20px 10px rgba(0, 0, 0, 0.05);    
}
.topmenuBox .topmenu .menu-item .submenu a {
    display: block;
    padding: 0 16px;
    /* border: 1px solid blue; */
}

.topmenuBox .topmenu .menu-item .submenu a > span {
    display: block;
    padding: 4px;
}
.topmenuBox .topmenu .menu-item .submenu a > span:hover {
    /* background:rgb(230, 230, 230); */
    background: #fcd9c83a;
    transition-duration : 0.3s;
}
.plustSpan {
    display: flex;
    justify-content: space-between;
    /* border: 1px solid blue; */
}
.plustSpan span {
    display: inline-block;
    width: 50%;
    /* border: 1px solid red; */
}
.plustSpan span:nth-of-type(2) {
    text-align: right;
    font-size: 0.8rem;
}
/* submenu-bottom 펼쳐짐 */

.topmenuBox .topmenu .menu-item:hover .submenu-bottom {
    /* display: block; */
    visibility: visible;
    opacity: 1;
    top: 100%;
    left: 0;
    
}
.topmenuBox .topmenu .menu-item .submenu-bottom .sub-menu-item {
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.5s ease;
}
.topmenuBox .topmenu .menu-item:hover .submenu-bottom .sub-menu-item {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* submenu-right 펼쳐짐 */
.topmenuBox .topmenu .sub-menu-item:hover .submenu-right {
    /* display: block; */
    visibility: visible;
    opacity: 1;
    left: 100%; /* submenu의 오른쪽으로 펼쳐짐 */
    top: -20px; /* submenu와 동일한 높이에서 시작 */
}

.topmenuBox .topmenu .sub-menu-item .submenu-right li {
    visibility: hidden;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.3s ease, transform 0.5s ease;
}
.topmenuBox .topmenu .sub-menu-item:hover .submenu-right li {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}



@media screen and (max-width:1400px) {
    nav .toplogin, nav .topmenuBox {display: none;}
    nav .offcanvas-body, nav .offcanvas-header {
        padding: 20px; /*토글메뉴 전체 테두리*/
    }
}
@media screen and (max-width:576px) {
    nav {padding: 0 !important;}

}

.navbar-toggler {
    padding-right: 0;
}


#foldMenu {
    visibility: hidden;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.5s ease;
}
.offcanvas.show #foldMenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
#foldMenu button {border: none; background: none; color: white;}
#foldMenu .oneMenu {padding:5px; font-size: 24px; font-family: 'Paperlogy-6SemiBold';}
#foldMenu .twoMenu {padding:5px 10px; font-size: 1.2rem; font-family: 'Paperlogy-6SemiBold';}
#foldMenu .threeMenu {padding:5px 10px; font-size: 1rem;}