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

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

******************************************************************/
#container_title {background: #f8f8f8;}
#container_title .gw-sub-theme-visual{width:100vw;height: 600px;}
#container_title .gw-sub-theme-visual > div{position: absolute;top:0;left:0;width: 100vw;height:100%;}
.breadcrumb-container {opacity:0;transform: translateY(30px);transition:all 0.8s ease-in-out;}
.breadcrumb-container > li {position: relative;margin-right:30px;}
.breadcrumb-container > li:last-child{margin-right: 0;}
.breadcrumb-container > li:not(:first-child):before{content:"";display:block;position: absolute; top: 50%; left:-20px; transform:translateY(-50%);width: 10px; height: 2px; background: #fff;}
.breadcrumb-container > li > a {color: rgba(255,255,255,0.8);}
.breadcrumb-container > li > a.active {color: #fff;}
#container_title .gw-sub-theme-title-container{display:flex;flex-direction:column;align-items:center;place-content:center;z-index: 100;gap: 30px;}
#container_title .gw-sub-theme-title {font-size:var(--main-title01);color:#fff;letter-spacing:-0.03em;font-weight: 700;text-align: center;opacity:0;transform: translateY(30px);transition:all 0.8s ease-in-out;}
.sub-theme-img-container{overflow: hidden;}
.sub-theme-bg{height: 100%;transform:scale(1.1,1.1);transition: transform 5s linear;}
.sub-theme-bg > img {object-fit: cover;width: 100%;height: 100%;}
.gw-side-menu-btn{display: none;}
#container_title .gw-sub-theme-visual .gw-side-menu-container {position:absolute; top: auto;bottom: 0;z-index: 110;height: 60px;width: 100vw;}
#container_title.on .sub-theme-bg{transform: scale(1.0,1.0) rotate(0.002deg);}
#container_title.on .gw-sub-theme-title{opacity:1;transform: translateY(0px);}
#container_title.on .breadcrumb-container{opacity:1;transform: translateY(0px);transition-delay: 0.5s;}


.gw-side-menu-depth01{position: relative;text-align: center;width:100%;height: 100%;border-top:3px solid rgba(255,255,255,0.1);background: rgba(255,255,255,0.04);backdrop-filter:blur(10px);}
.gw-side-menu-depth01 > ul {display: flex;align-items:center;position: relative;margin:0 auto;width: 1320px;height:100%;}
.gw-side-menu-depth01 > ul > li{flex:1;}
.gw-side-menu-depth01 > ul > li:first-child{border-top:none;}
.gw-side-menu-depth01 > ul > li > a{position:relative;display:flex;align-items:center;place-content:center;width:100%;height:60px;color: #fff;cursor: pointer;font-size:var(--main-text01);letter-spacing: -0.03em;word-break: keep-all;transition: all 0.3s ease-in-out;}
.gw-side-menu-depth01 > ul > li > a:before{content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:0;height:3px;background:#fff;transition:all 0.3s ease-in-out;}
.gw-side-menu-depth01 > ul > li > a:hover:before{width: 100%;}
.gw-side-menu-depth01 > ul > li > a.active:before{width: 100%;}


@media screen and (max-width:1280px){
    .gw-side-menu-btn{padding-left:3vw;display:flex;align-items: center;text-align: center;width: 100%;height: 100%;color: #fff;}
    .gw-side-menu-depth01{height: 50px;}
    #container_title .gw-sub-theme-visual .gw-side-menu-container{height: 50px;}
    #container_title .gw-sub-theme-visual > .sub-theme-title-container{width: 100%;}
    #container_title .gw-sub-theme-title-container{padding:0 var(--gw-padding);}
    .gw-side-menu-arrow{position:absolute;top:50%;right:3vw;transform: translateY(-50%);}
    .gw-side-menu-depth01 > ul{display:none;flex-direction:column;width:100%;height: auto;background: #fff;}
    .gw-side-menu-depth01 > ul > li{flex: auto;height: 35px;width: 100vw;text-align: left;border-top:1px dashed rgba(0, 0, 0, 0.1);}
    .gw-side-menu-depth01 > ul > li:last-child{border-bottom: 1px solid #ddd;}
    .gw-side-menu-depth01 > ul > li > a{padding:0 3vw;place-content:flex-start;height:100%;color: rgba(0,0,0,0.4);background:#fff;}
    .gw-side-menu-depth01 > ul > li > a:before{display: none;}
    .gw-side-menu-depth01 > ul > li > a.active{color: var(--main-color);font-weight: 700;}
}

@media screen and (max-width:768px){
    .gw-side-menu-container{bottom:-97px;}
    #container_title .gw-sub-theme-title-container{gap: 15px;}
}

@media screen and (max-width:576px){
    #container_title{height: 250px;}
    #container_title .gw-sub-theme-title{font-size: var(--main-title02);}
}