@charset "utf-8";

/********************************************************
■ Side Menu : 사이드 메뉴
********************************************************/
#sub-visual {display: flex;flex-direction: column;align-items: center;height: 500px;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%;color: #fff;text-align: center;position: absolute;top: 0;left: 0;right: 0;bottom: 0;color: #fff;}
.sub-visual__cont .title {margin-bottom: 5px;font-size: 3.0em;font-weight: 600;}
.sub-visual__cont .txt {font-size: 1.25em;font-weight: 500;}
.sub-visual__cont .txt > span {font-weight: 700;}

/* 애니메이션 */
@keyframes fadeUp {
    0% {opacity: 0;transform: translateY(30px);}
    100% {opacity: 1;transform: translateY(0);}
}
.sub-visual__cont .title,
.sub-visual__cont .txt {opacity: 0;transform: translateY(30px);}
.sub-visual__cont .title {animation: fadeUp 0.6s ease-out forwards;animation-delay: 0.3s;}
.sub-visual__cont .txt {animation: fadeUp 0.6s ease-out forwards;animation-delay: 0.7s;}

#cnavi {width: 100%;height: 70px;position: absolute;left: 0;right: 0;bottom: 0;z-index: 1;}
.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%;}
.cnavi__list [class*=cn-dl] .list {height: 100%;}
.cnavi__list [class*=cn-dl] .list ul {display: flex;justify-content: center;gap: 1px;height: 100%;}
.cnavi__list [class*=cn-dl] .list ul > li {display: flex;justify-content: center;align-items: center;width: 100%;background: var(--color-main);position: relative;}
.cnavi__list [class*=cn-dl] .list ul > li::after {content: '';display: none;width: calc(100% + 50px);height: 3px;background: var(--color-main--deep);position: absolute;top: 100%;transform: translateY(-50%);}
.cnavi__list [class*=cn-dl] .list ul > li > a {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;color: #fff;}
.cnavi__list [class*=cn-dl] .list ul > li.active {background: #fff;}
.cnavi__list [class*=cn-dl] .list ul > li.active > a {color: var(--color-main);font-weight: 700;line-height: 1.2;}

#cnavi {position:absolute;left:0;bottom:0;width:100%;z-index:50;}
#cnavi.is-fixed {position:fixed;top:99px;bottom:auto;left:0;width:100%;z-index:10;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.08);}

@media all and (max-width: 1199px){
	#sub-visual {height: 450px}
	#cnavi {height: 65px;}
	.cnavi__list [class*=cn-dl] .list ul > li > a {font-size: 18px;}
}
@media all and (max-width: 1024px){
	#cnavi.is-fixed  {top:79px}

	#sub-visual {height: 400px;}
	.sub-visual__cont .title {font-size: 2.50em;}
	.sub-visual__cont .txt {font-size: 1.11em;}
	#cnavi {height: 60px;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__list .cn-dl1 {display: block;}
	.cnavi__list [class*=cn-dl] {display: flex;align-items: center;max-width: 260px;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: 20px;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: var(--color-main--deep);position: absolute;top: 60px;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, .2) !important;}
	.cnavi__list [class*=cn-dl] .list ul > li.active::after {display: none;}
	.cnavi__list [class*=cn-dl] .list ul > li > a {display: block;color: rgba(255,255,255,0.5);font-size: 17px;font-weight: 500;transition: .35s;}
	.cnavi__list [class*=cn-dl] .list ul > li.active > a {color: #fff;}
	
}
@media all and (max-width: 640px){
	.cnavi__list [class*=cn-dl] {width: calc(100% - 60px);}
	.cnavi__list .cn-dl1 {display: none !important;}
}