.sec_area {display:grid; grid-template-columns:0.3fr 0.7fr; grid-gap:20px; }
.sec_area .bot_area {position:absolute; bottom:-96px; width:100%; max-width:240px;}
.sec_area .bn_total {float:left; width:100%; position:relative; overflow:hidden; padding-top:5px;}
.sec_area .bn_left {float:left; width:40%; z-index:2; }
.sec_area .bn_left ul{position:absolute; z-index:2; width:40%;}
.sec_area .bn_left li:last-child {margin-bottom:0;}
.sec_area .bn_left li h1 {font-size:1.35rem;}
.sec_area .bn_left li p { text-transform:uppercase; font-size:0.84rem; margin-top:0.25rem;}
.sec_area .bn_left li {
    padding: 1.2rem 4rem 1.2rem 2rem;
	margin-bottom:0.15rem;
    color: #a3a3a3;
    border: 1px solid transparent;
    transition: all 0.3s ease; /* 전환 효과 추가 */
    transform: translateY(0); /* 슬라이드 기본값 */
}

.sec_area .bn_left li.active {
    border: 1px solid #111;
    color: #000;
    background: #fff;
    transform: translateY(-5px); /* 위로 살짝 올라가는 효과 */
    transition: all 0.3s ease; /* 전환 효과 */
}


.sec_area .bn_right {float:right; width:65%;  margin-left:-10%; z-index:-1; margin-top:-5px;}

.sec_area .bn_right li {transform:translateY(-100%);}
.sec_area .bn_right li.active {width:100%; height:495px; z-index:-1;  transform:translateY(0%); transition:all .2s;}


@media (max-width:1200px) {
	.sec_area {grid-template-columns:initial;}
	.sec_area .bot_area {position:initial; margin-top:2rem;}
	.sec_area .bn_right {width:100%; margin-top:-4px;}

	.sec_area .bn_left {width:50%; }
	.sec_area .bn_left li {padding:1.5rem 1rem;  margin:0; }
	.sec_area .bn_left li h1 {font-size:1.14rem;}
	.sec_area .bn_left li.active {  background:rgba(255,255,255,0.85);}
	.sec_area .bn_left li p {display:none;}
}