#header{position: relative; width: 100%;left: 0; top: 0;  background-color: rgba(255,255,255,1); color: #232323; z-index: 1000; box-shadow: 0px 10px 10px rgba(0,0,0,0.03);}
#header .inner{height: 60px;}
#header .inner .logo{width: 11rem;}
#header .inner .logo .img01{display: none;}
#header .inner .logo .img02{display: block;}
#header .inner .nav li:hover a{color: var(--pointcolor);}

#header .inner .rightNav, #header .inner .callBtn { display: none; }

#header .inner .menuBtn{position: relative; display: none; width: 28px; height: 22px;}
#header .inner .menuBtn span{display: block; width: 100%; height: 3px; position: absolute; left: 0; background-color: #232323;}
#header .inner .menuBtn span:nth-child(1){top: 0;}
#header .inner .menuBtn span:nth-child(2){top: 10px;}
#header .inner .menuBtn span:nth-child(3){top: 20px;}
#header .inner .menuBtn.open{z-index: 3000;}
#header .inner .menuBtn.open span{background-color: #fff;}
#header .inner .menuBtn.open span:nth-child(1){top: 10px; transform:rotate(45deg);}
#header .inner .menuBtn.open span:nth-child(2){display: none;}
#header .inner .menuBtn.open span:nth-child(3){top: 10px; transform:rotate(-45deg);}


/* on 되었을 때 */
#header.on{position: fixed; color: #232323; background-color: rgba(255,255,255,1); }
#header.on .inner .logo .img01{display: none;}
#header.on .inner .logo .img02{display: block;}
#header.on .inner .menuBtn span{background-color: #232323;}
#header.on .inner .menuBtn.open span{background-color: #fff;}
#header.on .inner .callBtn svg, #header.on .inner .callMenu svg.main { mix-blend-mode: difference; }


/* 모바일 메뉴 */
.m_menu{background-color: rgba(0,0,0,0.8);  position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 2000; padding-top: 60px; display: none;}
.m_menu .line{width: 100%; height: 1px; background-color: #fff;}
.m_menu .nav{margin-top: 14rem;}
.m_menu .nav .menu{font-size: 3rem; flex-wrap: wrap; color: #fff;}
.m_menu .nav .menu li{width: 100%; padding-right: 0; text-align: right; margin-bottom: 6rem;}
.m_menu .nav .menu li:last-child{margin-bottom: 0;}
.m_menu .nav .menu li:hover a{color: var(--pointcolor2);}

.m_menu.open{display: block;}


@media (max-width:768px) {
    #header .inner{height: 60px;}
    #header .inner .logo{width: 16rem;}
    #header .inner .nav{display: none;}
    #header .inner .rightNav { display: flex; }
    #header .inner .callBtn, #header .inner .menuBtn { display: block; }

    .fixedCallBtn { position: fixed; left: 0; bottom: 0; width: 100%; padding: 1.5rem 0; background: #000; color: #fff; z-index: 999; }

}
@media (max-width:500px) {
    .m_menu .nav{margin-top: 10rem;}
    .m_menu .nav .menu li{margin-bottom: 4rem;}
}