@charset "utf-8";
/********************************************************
■ Side Menu : 사이드 메뉴
********************************************************/
#sub-visual { display: flex; flex-direction: column; align-items: center; height: 700px; position: relative; } 
.sub-visual__img { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; } 
.sub-visual__cont { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 
.sub-visual__cont .cinner { height: 100%; display: flex; justify-content: flex-start; align-items: flex-end; padding-bottom: 100px; } 
.sub-visual__cont .title { color: #fff; font-size: 4em; font-weight: 600; text-align: center; } 
.sub-visual__cont .txt { color: #fff; text-align: center; letter-spacing: .3em; opacity: .3; } 


#cnavi { height: 80px; position: absolute; left: 0; right: 0; bottom: -40px; z-index: 990; } 
.cnavi-in { height: 100%; } 
#cnavi .home { display: none; } 
.cnavi__list { height: 100%; } 
.cnavi__list .cn-dl1 { display: none; } 
.cnavi__list [class*=cn-dl] { height: 100%; /* border: 1px solid #E9E9E9; *//* border-radius: 5px; *//* box-sizing: border-box; *//* overflow: hidden; */ } 
.cnavi__list [class*=cn-dl] .list { height: 100%; } 
.cnavi__list [class*=cn-dl] .list ul { display: flex; height: 100%; } 
.cnavi__list [class*=cn-dl] .list ul > li { display: flex; justify-content: center; align-items: center; width: 100%; border-bottom: 1px solid #E9E9E9; background: #fff; } 
.cnavi__list [class*=cn-dl] .list ul > li:not(:last-child) { border-right: 0; /* box-sizing: border-box; */ } 
.cnavi__list [class*=cn-dl] .list ul > li > a { color: #000; font-size: 1.10em; } 
.cnavi__list [class*=cn-dl] .list ul > li.active { border: 0; background: #ff1d00; background: linear-gradient(-90deg, #ff1d00 0%, #991100 100%); background: -webkit-linear-gradient(-90deg,#ff1d00 0%, #991100 100%); background: -moz-linear-gradient(-90deg, #ff1d00 0%, #991100 100%); } 
.cnavi__list [class*=cn-dl] .list ul > li.active > a { color: #fff; font-weight: 700; } 
.cnavi__list .cn-dl2 .list ul > li:first-child { border-radius: 5px 0 0 5px; } 
.cnavi__list .cn-dl2 .list ul > li:last-child { border-radius: 0 5px 5px 0; } 
/* #cnavi .home { /flex: 0 0 auto; display: flex; justify-content: center; align-items: center; height: 100%; aspect-ratio: 1 /1; border-left: 1px solid rgba(255,255,255,.3); border-right: 1px solid rgba(255,255,255,.3); box-sizing: border-box; } 
#cnavi .home > img { max-width: 33px; } */

/* .cnavi__list { display: flex; align-items: center; height: 100%; } 
.cnavi__list [class*=cn-dl] { display: flex; align-items: center; max-width: 358px; width: calc((100% - 70px) / 3); height: 100%; border-right: 1px solid rgba(255,255,255,.3); box-sizing: border-box; position: relative; } 
.cnavi__list [class*=cn-dl] dt { display: block; width: 100%; height: 100%; } 
.cnavi__list [class*=cn-dl] dt > .arrow { display: block; width: 15px; height: 15px; border-top: 1px solid #FFF; border-right: 1px solid #FFF; transform: rotate(135deg); position: absolute; top: 25px; right: 34px; margin: auto; cursor: pointer; } 
.cnavi__list [class*=cn-dl]:has(.list.open) dt > .arrow { transform: rotate(-45deg) translateY(4px); } 
.cnavi__list [class*=cn-dl] .tit { display: flex; align-items: center; width: 100%; height: 100%; padding: 0 30px; color: #FFF; font-weight: 500; line-height: 1.2; } 
.cnavi__list [class*=cn-dl] .list { display: none; width: 100%; max-height: 0; overflow: hidden; background: rgba(0, 0, 0, 0.6); position: absolute; top: 70px; left: 0; z-index: 999; transition: max-height 0.35s ease-in-out, border 0.4s ease-in-out; } 
.cnavi__list [class*=cn-dl] .list.open { display: block; border-width: 1px; } 
.cnavi__list [class*=cn-dl] .list li { padding: 14px 28px; } 
.cnavi__list [class*=cn-dl] .list li:has(a:hover),
.cnavi__list [class*=cn-dl] .list li:has(a:focus),
.cnavi__list [class*=cn-dl] .list li.active { background: rgba(0, 0, 0, .3); } 
.cnavi__list [class*=cn-dl] .list a { display: block; color: #fff; font-size: .90em; font-weight: 500; transition: .35s; } 
 */


@media all and (max-width: 1399px) { 
     .sub-visual__cont .cinner {width:92%}
} 
@media all and (max-width: 1024px) {#sub-visual { height: 340px;margin-top:80px } 
#cnavi { height: 70px; bottom: -35px; } 
.cnavi__list [class*=cn-dl] .list ul > li > a { font-size: 18px; } 
.sub-visual__cont .title {font-size:3em}
 }
@media all and (max-width: 768px) {#sub-visual { /* height: 360px; */ } 
.sub-visual__cont .title {width:100%}
.sub-visual__cont { height: calc(100% - 70px); } 
#cnavi { height: 70px; background: #fff; border-bottom: 1px solid #E9E9E9; box-sizing: border-box; bottom: 0; } 
#cnavi > .cinner { margin: 0; } 
.cnavi__list { display: flex; align-items: center; } 
#cnavi .home { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; height: 100%; aspect-ratio: 1 /1; border-left: 1px solid rgba(255,255,255,.3); border-right: 1px solid rgba(255,255,255,.3); box-sizing: border-box; background: var(--color-main); } 
#cnavi .home > img { max-width: 33px; } 
.cnavi__list .cn-dl1 { display: block; } 
.cnavi__list [class*=cn-dl] { display: flex; align-items: center; max-width: 297px; width: 100%; /* width: calc((100% - 70px) / 2); */height: 100%; border: 0; border-right: 1px solid #E9E9E9; border-radius: 0; box-sizing: border-box; position: relative; } 
.cnavi__list [class*=cn-dl] dt { display: block; width: 100%; height: 100%; } 
.cnavi__list [class*=cn-dl] dt > .arrow { display: block; width: 12px; height: 12px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(135deg); position: absolute; top: 24px; right: 34px; margin: auto; cursor: pointer; transition: .35s; } 
.cnavi__list [class*=cn-dl]:has(.list.open) dt > .arrow { top: 31px; transform: rotate(-45deg); } 
.cnavi__list [class*=cn-dl] .tit { display: flex; align-items: center; width: 100%; height: 100%; padding: 0 30px; color: #000; font-size: 18px; font-weight: 500; line-height: 1.2; } 
.cnavi__list [class*=cn-dl] .list { display: none; width: 100%; max-height: 0; overflow: hidden; background: rgba(0, 0, 0, 0.6); position: absolute; top: 70px; left: 0; z-index: 999; transition: max-height 0.35s ease-in-out, border 0.4s ease-in-out; } 
.cnavi__list [class*=cn-dl] .list.open { display: block; height: 500px; border-width: 1px; } 
.cnavi__list [class*=cn-dl] .list ul { display: block; height: auto; border: 1px solid #E9E9E9; border-bottom: 0; border-top: 0; } 
.cnavi__list [class*=cn-dl] .list ul > li { display: block; width: 100%; padding: 14px 28px; border-bottom: 0; background: transparent; } 
.cnavi__list [class*=cn-dl] .list ul > li:has(a:hover),
.cnavi__list [class*=cn-dl] .list ul > li:has(a:focus),
.cnavi__list [class*=cn-dl] .list ul > li.active { background: rgba(0, 0, 0, .3) !important; } 
.cnavi__list [class*=cn-dl] .list ul > li > a { display: block; color: #fff; font-size: 17px; font-weight: 500; transition: .35s; } 
.cnavi__list .cn-dl2 .list ul > li:first-child,
.cnavi__list .cn-dl2 .list ul > li:last-child { border-radius:0; } 
 }
@media all and (max-width: 640px) {#sub-visual { height: 300px; margin-top:70px} 
.sub-visual__cont .title{font-size:2em}
.sub-visual__cont { height: calc(100% - 60px); } 
#cnavi { height: 60px; } 
.cnavi__list [class*=cn-dl] { width: calc(100% - 60px); } 
.cnavi__list [class*=cn-dl] .list { top: 60px; } 
.cnavi__list .cn-dl1 { display: none !important; } 
 }