@charset "utf-8";

/********************************************************
■ Side Menu : 사이드 메뉴
********************************************************/
#sub-visual {/* display: flex; *//* flex-direction: column; *//* align-items: center; */width: 100%;height: 606px;/* overflow: hidden; */position: relative;}
.sv-inner {display: flex;flex-direction: column;align-items: center;width: 100%;height: 100%;/* height: 606px; */overflow: hidden;position: absolute;top: 0;left: 0;/* bottom: 0; */right: 0;/* margin: auto; */}
.sub-visual__img {width: 100%;height: 100%;}
.sub-visual__img video {width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1.05);aspect-ratio: 16 / 9;}
.sub-visual__img img {width: 100%;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%) scale(1.05);}
.sub-visual__cont {width: 100%;}
.sub-visual__cont .title {color: #fff;font-size: 3.50em;font-weight: 700;position: absolute;left: 0;bottom: 158px;}
.sub-visual__cont .txt {color: #fff;text-align: center;line-height: 1.3;}
#cnavi {width: 100%;height: 70px;background: rgba(0, 0, 0, 0.1);backdrop-filter: blur(16px);position: absolute;left: 0;right: 0;bottom: 0;z-index: 990;}
#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-in {height: 100%;}
.cnavi__list {display: flex;align-items: center;height: 100%;}
.cnavi__list [class*=cn-dl] {display: flex;align-items: center;/* min-width: 358px; */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;/* padding-right: 72px; */color: #FFF;font-weight: 500;line-height: 1.2;/* position: relative; */}
.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 {height: 480px;}
}
@media all and (max-width: 1024px){
	#sub-visual {height: 420px;}
	.sub-visual__cont .title {font-size: 3.0em;}
	#cnavi .home img {max-width: 30px;}
	.cnavi__list [class*=cn-dl] {/* min-width: 250px; */}
	.cnavi__list [class*=cn-dl] .list {top: 70px;}
}
@media all and (max-width: 768px){
	#sub-visual {height: 360px;}
	.sub-visual__cont .title {font-size: 2.67em;bottom: 118px;}
	#cnavi {height: 60px;}
	#cnavi > .cinner {margin: 0;}
	#cnavi .home {border-left: 0;}
	.cnavi__list [class*=cn-dl] {min-width: auto;/* width: calc((100% - 60px) / 2); */}
	.cnavi__list [class*=cn-dl] dt > .arrow {width: 12px;height: 12px;top: 22px;}
	.cnavi__list [class*=cn-dl] .list {top: 60px;}
	.cnavi__list [class*=cn-dl] .list a {font-size: 16px;}
	.cnavi__list .cn-dl2 {/* border-right: 0; */}
}
@media all and (max-width: 640px){
	.sub-visual__img video {width: auto;height: 100%;}
	#cnavi .home img {max-width: 26px;}
	.cnavi__list [class*=cn-dl] {width: 100%;/* border-right: 0; */}
	.cnavi__list [class*=cn-dl] .tit {padding: 0 20px;}
	.cnavi__list [class*=cn-dl] dt > .arrow {right: 23px;}
}