@charset "utf-8";

.overview { display: grid; grid-template-columns: 290px auto; gap:30px; } 

.overview .sideBtn ul {position: sticky; top: 100px;}
.overview .sideBtn li+li { margin-top: 10px; } 
.overview .sideBtn li a { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 65px; background: #ECECEC url(/images/overview/sideArrowG.svg) no-repeat right 30px center; border-radius: 20px; opacity: 50%; font-weight: 700;}
.overview .sideBtn li.on a {background: var(--base3) url(/images/overview/sideArrow.svg) no-repeat right 30px center; color: #fff; opacity: 1;}
.overview .sideBtn li.on a:before {position: absolute; top:46%; left: 30px; content: ""; width: 20px; height: 3px; background: #fff;}

.overview .overviewWrap ul li+li {margin-top: 20px;}
.overview .overviewWrap ul li {padding: 50px; padding-left: 150px; border: 1px solid #DEE0EC; border-radius: 30px; background: url(/images/overview/serviceB1.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(2) {background: url(/images/overview/serviceB2.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(3) {background: url(/images/overview/serviceB3.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(4) {background: url(/images/overview/serviceB4.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(5) {background: url(/images/overview/serviceB5.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(6) {background: url(/images/overview/serviceB6.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(7) {background: url(/images/overview/serviceB7.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(8) {background: url(/images/overview/serviceB8.svg) no-repeat left 60px top 50px;}

.overview .overviewWrap ul li p {line-height: 1; font-size: var(--fs30); font-weight: 800; opacity: 50%;}
.overview .overviewWrap ul li span {display: inline-block; margin: 20px 0 30px 0;}
.overview .overviewWrap ul li dl dd {position: relative; opacity: 50%; padding-left: 15px;}
.overview .overviewWrap ul li dl dd:before {position: absolute; content: ""; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 100px; background: var(--black); opacity: 50%;}

.overview .overviewWrap ul li.on {background: url(/images/overview/service1.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(2).on {background: url(/images/overview/service2.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(3).on {background: url(/images/overview/service3.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(4).on {background: url(/images/overview/service4.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(5).on {background: url(/images/overview/service5.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(6).on {background: url(/images/overview/service6.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(7).on {background: url(/images/overview/service7.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li:nth-child(8).on {background: url(/images/overview/service8.svg) no-repeat left 60px top 50px;}
.overview .overviewWrap ul li.on p {color: var(--base3); opacity: 1;}
.overview .overviewWrap ul li.on dl dd {color: var(--base3); opacity: 1;}
.overview .overviewWrap ul li.on dl dd:before {background: var(--base3);}





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

    .overview {grid-template-columns: 195px auto; gap: 20px;}
    .overview .overviewWrap ul li {background-position:left 40px top 40px !important; padding-left: 130px;}
    .overview .overviewWrap ul li.on {background-position:left 40px top 40px;}

}


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

    .overview {grid-template-columns: auto;}
    .overview .overviewWrap ul li {background-position:left 30px top 30px !important; padding: 30px; padding-top:100px;}
    .overview .overviewWrap ul li.on {background-position:left 30px top 30px;}

    .overview .sideBtn {width: 100vw; position: relative; left: 50%; transform: translateX(-50%); overflow-x: scroll; display: none;}
    .overview .sideBtn ul {display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px;}
    .overview .sideBtn li+li {margin: 0;}
    .overview .sideBtn li a {width: 200px;}


}



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


 }