@charset "UTF-8";
/*****************************************************************



******************************************************************/
.breadcrumb-container{place-content: center;gap:5px;}
.breadcrumb-container > li {position: relative;}
.breadcrumb-container > li:not(:first-child):before {font-family:xeicon;content: "\e93f";display: inline-block;margin-right: 5px;color: #9a9a9a}
.breadcrumb-container > li > a {color: rgba(255,255,255,0.8);}
.breadcrumb-container > li > a.active {color: #fff;}

#container_title {background: #f8f8f8;height:405px;}
/*#container_title .moon-sub-theme-visual > div{position: absolute;top:0;left:0;width: 100%;height:100%;}*/
#container_title .moon-sub-theme-title-container{display:flex;flex-direction:column;align-items:center;place-content:center;z-index:100;}
#container_title .moon-sub-theme-title {margin-bottom:15px;font-size: var(--main-title01);text-align: center;color:#fff; }
.sub-theme-bg{height: 100%;}
.sub-theme-bg:before{content: "";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.35);}
.sub-theme-bg > img {object-fit: cover;width: 100%;height: 100%;}
.moon-side-menu-container {position: absolute;bottom: -30px;left: 50%;transform: translateX(-50%);z-index: 200;}
.moon-side-menu-container > .moon-flex {place-content: center;}
[class*="moon-side-menu-depth"]{position: relative;}
[class*="moon-side-menu-depth"] > button{position:relative;z-index:1;text-align: left;padding:0 28px;width: 315px;height:68px;font-size:var(--main-title04);font-family: "NotoKr_M", sans-serif;}
[class*="moon-side-menu-depth"] > button:after{font-family:xeicon;content: "\e942";color:#666;font-weight: 600;transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);position: absolute;right: 20px;top: 50%;transform: translateY(-50%);}
.moon-side-menu-depth01 > button{background: var(--main-color);color:#fff;border-top-left-radius:50px;border-bottom-left-radius:50px;transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);}
.moon-side-menu-depth01 > button:after{color: #fff;}
.moon-side-menu-depth01.on > button{border-bottom-left-radius:0;}
.moon-side-menu-depth02{background: #fff;border-top-right-radius:50px;border-bottom-right-radius:50px;box-shadow:0px 10px 20px rgba(0,0,0,.05);}
.moon-side-menu-depth02 > button{color:#000;}
[class*="moon-side-menu-depth"] > ul {display:none;position: absolute;padding: 28px;padding-top:48px;width: 100%;top: 50%;border-bottom-left-radius:50px;border-bottom-right-radius:50px;}
[class*="moon-side-menu-depth"] > ul > li:not(:last-child) {padding-bottom: 28px;}
.moon-side-menu-depth01 > ul {background: var(--main-color);}
.moon-side-menu-depth02 > ul {background: #fff;box-shadow: 0px 10px 20px rgba(0,0,0,.05);}
.moon-side-menu-depth01 > ul > li > a {color: rgba(255,255,255,0.6);}
.moon-side-menu-depth01 > ul > li > a.active {color: rgba(255,255,255,1);font-family: "NotoKr_B", sans-serif;}
.moon-side-menu-depth02 > ul > li > a{color: #666;}
.moon-side-menu-depth02 > ul > li > a.active {color: var(--main-color);font-family: "NotoKr_B", sans-serif;}

/*다크모드*/
body.dark-mode .moon-side-menu-depth02{background: #111;color:#fff;}
body.dark-mode .moon-side-menu-depth02 > button{color: #fff;}
body.dark-mode .moon-side-menu-depth02 > button:after{color: #fff;}
body.dark-mode .moon-side-menu-depth02 > ul{background: #111;}
body.dark-mode .moon-side-menu-depth02 > ul > li > a{color: rgba(255,255,255,0.6);}
body.dark-mode .moon-side-menu-depth02 > ul > li > a.active{color: rgba(255,255,255,1);}

@media screen and (max-width:768px){
    .moon-side-menu-container{bottom:-97px;}
    .moon-side-menu-container > .moon-flex{flex-direction:column;}
    [class*="moon-side-menu-depth"]{display: block;width:calc(100vw - 20px);}
    [class*="moon-side-menu-depth"] > button{width:calc(100vw - 20px);height: 60px;}
    [class*="moon-side-menu-depth"] > ul{padding-top: 40px;}
    .moon-side-menu-depth01{margin-bottom: 10px;}
    .moon-side-menu-depth01 > button{border-radius: 50px;}
    .moon-side-menu-depth01.on {z-index: 300;}
    .moon-side-menu-depth02{border-radius:50px;}

}

@media screen and (max-width:576px){
    #container_title{height: 250px;}
}