@charset "utf-8";

/*** 탭메뉴 ***/
.tabWrap { display: grid; grid-template-columns: 220px auto; gap: 80px;} 

.tabMenu {border-right: 1px solid #e5e5e5; } 
.tabMenu ul { display: block; position: sticky; top: 120px;  list-style: none; padding: 0; margin: 0; } 
.tabMenu li { position: relative; width: 100%; background: #f5f5f5; } 
.tabMenu li+li {margin-top: 10px;}
.tabMenu li a { width: 220px; height: 50px; display: block; color: #777; font-size: var(--fs17); text-align: center; line-height: 50px; } 
.tabMenu li.active { background: var(--base1); } 
.tabMenu li.active a {position:relative;color:#fff;font-weight:600;}
.tabMenu li a::before {content:""; position:absolute; left:15px; top:16px; width:0; height:0; border-style:solid; border-width:7px 0 7px 10px; border-color:transparent transparent transparent #fff; opacity:0; transform:translateX(-10px); transition:all .4s ease;}
.tabMenu li.active a::before {opacity:1;transform:translateX(0);}


.tabContents { flex: 1; padding: 10px 20px; } 
.tabCon { display: none; } 
.tabCon.active { display: block; } 

.tabCon h2 { font-size: var(--fs24); margin-bottom: 25px; color: #000; text-align: left;} 



.prepare {text-align:center;}


/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {

    .tabWrap {display: block;}
    .tabMenu ul {margin-bottom: 30px;}
    .tabMenu li a {text-align: left; padding-left: 40px;}


    .tabCon h2 {font-size: 22px; margin-bottom: 10px;}

   
}

/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {

    .tabMenu li a {height: 45px; line-height: 45px;}


   
}


/* ************************ 모바일 (0~500) ************************ */
@media screen and (max-width: 500px) {



}