@charset "utf-8";

/********************************************************
■ Side Menu : 사이드 메뉴
********************************************************/
#cnavi {position: absolute;top: 50%;right: 0;transform: translateY(-50%);z-index: 990;}
#cnavi .home {flex: 0 0 auto;display: flex;justify-content: center;align-items: center;width: 44px;aspect-ratio: 1 /1;border-radius: 50%;background: #fff;}
.cnavi-in {}
.cnavi__list {display: flex;align-items: center;gap: 30px;}
.cnavi__list [class*=cn-dl] {display: flex;align-items: center;min-width: 220px;box-sizing: border-box;position: relative;}
.cnavi__list [class*=cn-dl] dt {display: block;width: 100%;height: 100%;position: relative;}
.cnavi__list [class*=cn-dl] dt > .arrow {display: block;width: 13px;height: 13px;border-top: 2px solid #FFF;border-right: 2px solid #FFF;transform: rotate(135deg);position: absolute;top: 2px;right: 4px;margin: auto;cursor: pointer;transition: .35s;}
.cnavi__list [class*=cn-dl]:has(.list.open) dt > .arrow {transform: rotate(-45deg);top: 9px;}
.cnavi__list [class*=cn-dl] .tit {display: flex;align-items: center;width: 100%;height: 100%;color: #fff;font-weight: 500;line-height: 1.2;}
.cnavi__list [class*=cn-dl] .list {display: none;width: 100%;max-height: 500px;overflow-y: auto;background: #FFF;position: absolute;top: calc(100% + 12px);left: 0;z-index: 999;transition: max-height 0.35s ease-in-out, border 0.4s ease-in-out;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);}
.cnavi__list [class*=cn-dl] .list.open {display: block;border-width: 1px;}
.cnavi__list [class*=cn-dl] .list::-webkit-scrollbar {width: 6px;}
.cnavi__list [class*=cn-dl] .list::-webkit-scrollbar-thumb {background: rgba(0,0,0,.25);}
.cnavi__list [class*=cn-dl] .list li {padding: 14px 28px;}
.cnavi__list [class*=cn-dl] .list a {display: block;color: #303030;font-size: .90em;font-weight: 500;transition: .35s;}
.cnavi__list [class*=cn-dl] .list a:hover,
.cnavi__list [class*=cn-dl] .list a:focus,
.cnavi__list [class*=cn-dl] .list li.active a {color: var(--color-main);}


@media all and (max-width: 1199px){
	#cnavi .home {width: 38px;}
	.cnavi__list {gap: 20px;}
	.cnavi__list [class*=cn-dl] {min-width: 185px;}
	.cnavi__list [class*=cn-dl] .list li {padding: 14px 20px;}
}
@media all and (max-width: 1024px){
	#cnavi {position: relative;top: auto;right: auto;transform: none;}
	#cnavi .home {width: 32px;}
	.cnavi__list [class*=cn-dl] {min-width: 165px;}
}
@media all and (max-width: 768px){
	#cnavi .home {width: 28px;}
	.cnavi__list [class*=cn-dl] {min-width: 150px;}
	.cnavi__list [class*=cn-dl] dt > .arrow {width: 10px;height: 10px;}
	.cnavi__list [class*=cn-dl] .tit {font-size: 17px;}	
}
@media all and (max-width: 640px){
	.cnavi__list {gap: 15px;}
	#cnavi .home {width: 22px;}
	.cnavi__list [class*=cn-dl] {width: 50%;}
	/* .cnavi__list [class*=cn-dl] {width: 100%;}
	.cnavi__list .cn-dl1 {display: none !important;}
	.cnavi__list .cn-dl2 {max-width: 350px;}
	.cnavi__list .cn-dl2  .tit {padding: 0 44px 0 20px;} */
}