// D:\SourceData\zenith\zenith-project\public\static\css\zenith\_layout.scss 백업파일(현재삭제됨)
//제니스 안의 layout.scss 파일이 아님.

body{background:#f7f7f7;}

.left-side{display:flex; flex-direction:column; width:240px; height:100vh; box-sizing:border-box; padding:42px 0; border-radius:0 0 40px 0; background:$color-dark;
    .btn-menu{display:none;}
    .logo{margin:0 auto 40px;}
}

.nav-wrap{flex:1; overflow:auto;
    &::-webkit-scrollbar{width:6px; background:transparent;}
    &::-webkit-scrollbar-thumb{border-radius:3px;  background:#aaa;}
    .nav{
        > li{position:relative; padding:15px 0 0 10px; font-size:1.063rem; transition:all .2s;
            &:not(:last-child){margin:0 0 30px;}
            &:has([aria-expanded="true"]){background:#fff;
                &:before{position:absolute; top:0; left:0; width:6px; height:100%; content:''; background:$color-primary;}
                button{color:$color-dark;
                    &[aria-expanded="true"]{@include bold;}
                }
            }
        }
        button{
            display:block; padding:0 0 0 33px; color:#fff;
            > i.bi {margin:0 10px 0 -37px; font-size:180%; vertical-align:middle;}
        }
        .btn-toggle-nav{padding:18px 0 0;
            li{margin:0 0 12px 32px;}
            a{position:relative; display:inline-block; padding:0 0 2px 10px; font-size:0.875rem; color:#929292;}
            .active{color:$color-primary; border-bottom:2px solid #e58489;}
            .active:before{position:absolute; top:6px; left:0; width:3px; height:3px; content:''; border-radius:50%; background:$color-primary;}
        }
    }
}
.util-nav{display:flex; justify-content:space-between; margin:0 38px; padding:20px 0 0;
    a{font-size:0.813rem; color:#aaa;}
}

.main-contents-wrap{flex:1; padding:80px 6.7708vw; margin-left: 200px;}
.ad-list{
    .row{text-align:left;}
    .row:not(:first-child){margin-top:24px;}
    .type{flex:1; margin-right:12px; padding:1.8229vw 2.5vw; border:1px solid #d1d1d1; border-radius:$radius; background:#fff;}
    .btn-more{display:flex; align-items:center; justify-content:center; width:143px; color:#fff; border-radius:$radius; background:$color-dark;
        span{padding:30px 0 0; @include bg('ico_arrow.png', center, 0);}
    }
    .btn-primary{background:$color-primary;}
    .summary{display:flex; margin:0 0 24px;
        strong{min-width:210px; margin:0 45px 0 0; font-size:1.750rem; @include bold;}
        i{display:inline-block; width:28px; height:28px; margin:0 6px 0 0; vertical-align:top;}
        .facebook{@include bg('ico_facebook.png', center, 0);}
        .kakao{@include bg('ico_kakao.png', center, 0);}
        .google{@include bg('ico_google.png', center, 0);}
        dl{display:flex; align-items:center; margin:0 45px 0 0;}
        dt{margin:0 6px 0 0; font-size:1rem;}
        dd{font-size:1.750rem; @include bold;}
        .percentage{
            dd{color:$color-primary;}
        }
    }
    .detail{
        dl{box-sizing:border-box; margin:0 22px 0 0; padding:7px 10px; text-align:left; background:#f2f2f2;}
        dd{margin:8px 0 0; color:#929292;}
    }
}

@include x-large{
    .main-contents-wrap{padding:30px;}
    .ad-list{
        .type{padding:20px;}
    }
    .ad-detail-info{flex-wrap:wrap;
        .col{flex:0 0 auto; width:25%;
            &:nth-child(n+5){margin-top:15px;}
        }
    }
}
@include large{
    .ad-list{
        .row{position:relative;}
        .summary{flex-wrap:wrap;
            strong{width:100%; margin:0 0 10px;}
        }
        .btn-more{position:absolute; top:15px; right:20px; width:auto; color:$color-dark; background:none;
            span{padding:0; background:none;}
        }
    }
    .left-side{overflow:hidden;}
}
@include medium{
    .wrap{min-width:580px;}
    .main-contents-wrap{padding:30px 30px 30px 70px;}
    .left-side{position:fixed; z-index:1; max-width:40px; height:100%; overflow:hidden; padding:20px 0; border-radius:0; transition:all .2s;
        .logo{margin:0 0 20px 45px;}
        &.open{max-width:240px; width:240px;}
        .btn-menu{position:absolute; top:20px; left:10px; display:block; width:20px; height:20px; overflow:hidden; text-indent:-9999px; border-top:2px solid #fff;
            &:before{position:absolute; top:7px; left:0; width:100%; height:2px; content:''; background:#fff;}
            &:after{position:absolute; bottom:0; left:0; width:100%; height:2px; content:''; background:#fff;}
        }
    }
    .nav-wrap{width:240px;
        .nav{
            > li:not(:last-child){margin:0 0 10px;}
            button{display:block; padding:0 0 0 33px; color:#fff;}
        }
    }
    .util-nav{width:156px;}
    .ad-list{
        .type{margin:0;}
    }
}
@include small{
    
}