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

Copyright C 위브온 테마 All rights reserved.
weevon@naver.com & master@weevon.com
본 페이지는 유료콘텐츠 위브온 테마 CSS입니다. 불법복제시 법적인 제제를 받으실 수 있습니다.
라이센스를 삭제하지 마세요. 라이센스 삭제시 불법 사용으로 간주될 수 있습니다.

******************************************************************/

.breadcrumb-container{margin-bottom:15px;gap:5px; -webkit-filter: blur(20px);filter: blur(20px);opacity: 0;transition: filter 1s, opacity 1s, letter-spacing 1s;transition-delay: 0.3s}
.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;vertical-align:middle;}
.breadcrumb-container > li > a {color: rgba(255,255,255,0.8);}
.breadcrumb-container > li > a.active {color: #fff;}

#container_title {background: #f8f8f8;}

#container_title .wv-sub-con-1200 {padding-bottom: 100px;margin-bottom: 0;align-items: flex-end;position: absolute;top: 0;left: 50%;transform: translateX(-50%);z-index:99;height: 100%;}

/* --- [수정 시작] --- */
/* 이미지 컨테이너의 position을 relative로 변경하여 영역을 차지하도록 수정 */
#container_title .wv-sub-theme-visual > div {
    position: relative;
    width: 100%;
    height: auto;
    animation: zoom-in 1s ease-in-out forwards;
}
@keyframes zoom-in {   0% { transform: scale(0.9); }  100% { transform: scale(1.0); }}

#container_title .wv-sub-theme-title-container{display:flex;flex-direction:column;align-items:center;place-content:center;z-index:100;}
#container_title .wv-sub-theme-title {font-size: 60px;color:#fff;filter: blur(20px);-webkit-filter: blur(20px);opacity: 0;transition: filter 0.7s, opacity 0.7s, letter-spacing 0.7s;font-family: 'NanumSquareNeoExtraBold', sans-serif;}
#container_title.on .wv-sub-theme-title{filter: blur(0);-webkit-filter: blur(0);opacity: 1;}
#container_title.on .breadcrumb-container{filter: blur(0);-webkit-filter: blur(0);opacity: 1;}

/* 컨테이너들의 고정 height를 제거하고 auto로 변경 */
.wv-sub-theme-visual {
    overflow: hidden;
    height: auto;
}
.sub-theme-bg {
    height: auto;
}
/* --- [수정 끝] --- */

.sub-theme-bg:before{content: "";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.35);}

/* --- [수정 시작] --- */
/* 이미지의 너비는 100%, 높이는 auto로 설정하고 display: block 추가 */
.sub-theme-bg > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial; /* object-fit 속성 초기화 */
}
/* --- [수정 끝] --- */

.wv-side-menu-container{filter: blur(20px);-webkit-filter: blur(20px);opacity: 0;transition: filter 0.7s, opacity 0.7s, letter-spacing 0.7s;}
.wv-side-menu-container.on{filter: blur(0);-webkit-filter: blur(0);opacity: 1;}
.wv-side-menu-container > .wv-flex {place-content: center;}
.wv-side-menu-container > .wv-flex > div {position: relative;}
.wv-side-menu-container > .wv-flex > div:not(:first-child):before {content: "";display: block;position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 1px;height: 12px;background: rgba(255,255,255,0.5);}
.wv-side-menu-container .wv-home {margin-right: 20px;display:flex;justify-content:center;align-items:center;background:var(--main-color);border-radius:50px;width:40px;height:40px;}
.wv-side-menu-container .wv-home > a {display: flex;place-content: center;justify-content: center;}
[class*="wv-side-menu-depth"]{padding:0 20px;position: relative;}
[class*="wv-side-menu-depth"] > button{position:relative;z-index:1;text-align: left;color:#fff;padding:18px 20px 18px 0;width: 200px;font-size:18px;font-family: "NotoKr_M", sans-serif;border-bottom: 1px solid rgba(255,255,255,0.2);}
[class*="wv-side-menu-depth"] > button:after{font-family:xeicon;content: "\e942";font-weight: 600;transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.wv-side-menu-depth01 > button{transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);}
.wv-side-menu-depth01 > button:after{color: #fff;}
.wv-side-menu-depth01.on > button{}
.wv-side-menu-depth02{box-shadow:0px 10px 20px rgba(0,0,0,.05);}
[class*="wv-side-menu-depth"] > ul {display:none;position: absolute;left:0;padding: 28px;width: 100%;background: #fff;box-shadow: 0px 10px 20px rgba(0,0,0,.05);}
[class*="wv-side-menu-depth"] > ul > li:not(:last-child) {padding-bottom: 28px;}
[class*="wv-side-menu-depth"]  > ul > li > a{color: #666;}
[class*="wv-side-menu-depth"]  > ul > li > a.active {color: var(--main-color);font-family: "NotoKr_B", sans-serif;}

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

@media screen and (max-width:1200px) {
    #container_title .wv-sub-con-1200{align-items:center;padding-bottom: 0;flex-direction: column;justify-content: center;}
}

@media screen and (max-width:768px){
    [class*="wv-side-menu-depth"]{display: block;}
    [class*="wv-side-menu-depth"] > ul{padding-top: 40px;}
}

@media screen and (max-width:576px){
    #container_title .wv-sub-theme-title{font-size: 35px;}
    .wv-side-menu-container{width: 100%;}
    .wv-side-menu-container > .wv-flex > div{width:50%;}
    .wv-side-menu-container > .wv-flex > div.wv-side-menu-depth01:before{display: none;}
    .wv-side-menu-container .wv-home{display: none;}
    [class*="wv-side-menu-depth"] > button{width: 100%;}
}

/* PC/모바일 서브헤더 이미지 교체용 CSS */
.sub-theme-pc {
    display: block;
}
.sub-theme-mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    /* PC용 이미지는 숨기고, 모바일용 이미지를 보여줌 */
    .sub-theme-pc {
        display: none;
    }
    .sub-theme-mobile {
        display: block;
    }
}