@charset "utf-8";

/********************************************************
■ Side Menu : 사이드 메뉴
********************************************************/
#cnavi {margin-bottom: 68px;}
#cnavi .cinner {display: flex;justify-content: space-between;align-items: baseline;}
.contents__title {font-size: 2.50em;font-weight: 700;}

#cnavi .home {display: flex;justify-content: center;align-items: center;width: 20px;height: 20px;margin-right: 16px;}
#cnavi .home > img {max-width: 33px;}
.cnavi__list {display: flex;align-items: center;}
.cnavi__list [class*=cn-dl] {display: flex;align-items: center;width: 200px;height: 100%;position: relative;}
.cnavi__list [class*=cn-dl]::before {content: '';display: block;width: 10px;width: 1px;height: 15px;margin: 0 16px;background: #D9D9D9;position: absolute;top: 0;bottom: 0;left: 0;margin: auto;}
/* .cnavi__list [class*=cn-dl]::after {height: 10px;border-top: 2px solid #333;border-right: 2px solid #333;transform: rotate(135deg);position: absolute;top: 0;bottom: 0;right: 16px;margin: 4px 4px 0 0;cursor: pointer;} */
/* .cnavi__list [class*=cn-dl]:has(.list.open)::after {transform: rotate(-45deg);margin: 9px 4px 0 0;} */
.cnavi__list [class*=cn-dl] dt {display: block;width: 100%;height: 100%;}
.cnavi__list [class*=cn-dl] .tit {display: flex;align-items: center;width: 100%;height: 100%;font-size: 16px;position: relative;}
.cnavi__list [class*=cn-dl] .tit::after {content: '';display: block;width: 10px;height: 10px;border-top: 2px solid #333;border-right: 2px solid #333;transform: rotate(135deg);position: absolute;top: 0;bottom: 0;right: 0;margin: 4px 4px 0 0;cursor: pointer;}
.cnavi__list [class*=cn-dl]:has(.list.open) .tit::after {transform: rotate(-45deg);margin: 9px 4px 0 0;}
.cnavi__list [class*=cn-dl] .list {display: none;width: 100%;max-height: 0;overflow: hidden;border: 0px solid #D9D9D9;background: #fff;position: absolute;top: 34px;left: 0;z-index: 999;transition: max-height 0.35s ease-in-out, border 0.35s ease-in-out;}
.cnavi__list [class*=cn-dl] .list.open {display: block;border-width: 1px;}
.cnavi__list [class*=cn-dl] .list li {padding: 10px 16px;}
.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 {}
.cnavi__list [class*=cn-dl] .list a {display: block;color: #333;font-size: 16px;}
.cnavi__list [class*=cn-dl] .list a:hover,
.cnavi__list [class*=cn-dl] .list a:focus {color: #666;font-weight: 600;text-decoration: underline;text-underline-offset: 4px;}
.cnavi__list [class*=cn-dl] .list li.active a {color: var(--color-main);font-weight: 600;} 
.cnavi__list .cn-dl1 {padding: 0 16px 0 16px;}
.cnavi__list .cn-dl1 .tit {color: #898989;font-weight: 400;}
.cnavi__list .cn-dl2 {min-width: 182px;padding-left: 16px;box-sizing: border-box;}
.cnavi__list .cn-dl2 .tit {color: var(--color-main);font-weight: 600;}
.cnavi__list .cn-dl2 .tit::after {border-color: var(--color-main);}





@media all and (max-width: 1024px){
	#cnavi .cinner {flex-direction: column;gap: 20px 0;}
}
@media all and (max-width: 768px){
	.contents__title {font-size: 38px;}
}
@media all and (max-width: 480px){
	.cnavi__list {width: 100%;}
	.cnavi__list [class*=cn-dl]::after {right: 0;}
}