.wrap{
    display: flex;
    flex-direction: column;
    min-width: 1280px;
    min-height: 100vh;
    overflow-x: hidden;
}
.content{
    flex: 1 1 auto;
    padding-top: 46px;
    background-color: #F4F4F7;
}

// header
// nav item 공통
@mixin navitem(){
    position: relative;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    height: 100%;
    padding-right: 12px;
    transition: color .17s ease-in-out;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1600px;
    height: 46px;
    background-color: #1C1C1C;
    border-bottom: 1px solid #000;
    z-index: 9999;
    .header-inner{
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 40px;
        .header-right{
            display: flex;
            height: 100%;
            align-items: center;
            .logo{
                a{
                    display: block;
                    width: 232px;
                    height: 30px;
                    background: url(/static/images/common/Logo.svg)no-repeat center;
                    background-size: contain;
                }
            }
            nav{
                margin-left: 50px;
                height: 100%;
                .nav-list{
                    display: flex;
                    align-items: center;
                    height: 100%;
                    .nav-item{
                        position: relative;
                        margin-right: 62px;
                        height: 100%;
                        a{
                            @include navitem;
                        }
                        button{
                            @include navitem;
                            &:after{
                                content: '';
                                position: absolute;
                                top: 50%;
                                right: 0;
                                transform: translateY(-50%);
                                width: 6px;
                                height: 10px;
                                background: url(/static/images/common/nav-arr.svg)no-repeat center;
                                transition: all .17s ease-in-out;
                            }
                        }
                        &:last-child{
                            margin-right: 0;
                        }
                        .nav-depth2{
                            position: absolute;
                            top: calc(100% - 2px);
                            left: 50%;
                            transform: translateX(-50%);
                            min-width: 100px;
                            background-color: #1C1C1C;
                            border: 1px solid #464646;
                            padding: 24px;
                            opacity: 0;
                            visibility: hidden;
                            transition: all .17s ease-in-out;
                            .nav-depth2-item{
                                margin-bottom: 10px;
                                transition: all .17s ease-in-out;
                                a{
                                    font-size: 13px;
                                    font-weight: normal;
                                    white-space: nowrap;
                                }
                                &:last-child{
                                    margin-bottom: 0;
                                }
                                &.mouse{
                                    opacity: 0.55;
                                }
                            }
                            &::before{
                                content: '';
                                position: absolute;
                                top: -5px;
                                left: 50%;
                                transform: translateX(-50%) rotate(45deg);
                                width: 8px;
                                height: 8px;
                                background-color: #1c1c1c;
                                border-top: 1px solid #464646;
                                border-left: 1px solid #464646;
                            }
                        }
                        &.mouse{
                            > a{
                                color: rgba(255, 255, 255, 0.30);
                            }
                            > button{
                                color: rgba(255, 255, 255, 0.30);
                                &:after{
                                    opacity: 0.3;
                                }
                            }
                        }
                        &:hover{
                            .nav-depth2{
                                opacity: 1;
                                visibility: visible;
                            }
                            > button{
                                &:after{
                                    transform: translateY(-50%) rotate(90deg);
                                }
                            }
                        }
                    }
                }
            }
        }
        .header-left{
            margin-left: auto;
            height: 100%;
            display: flex;
            align-items: center;
            .profile-box{
                position: relative;
                padding-left: 30px;
                height: 100%;
                display: flex;
                align-items: center;
                margin-right: 20px;
                cursor: pointer;
                .profile{
                    font-size: 13px;
                    font-weight: normal;
                    color: #fff;
                }
                &::after{
                    content: '';
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                    width: 24px;
                    height: 24px;
                    background: url(/static/images/common/profile_icon.svg)no-repeat center;
                    background-size: cover;
                }
            }
            .sign-out-box{
                position: relative;
                padding-left: 30px;
                height: 100%;
                display: flex;
                align-items: center;
                margin-right: 20px;
                cursor: pointer;
                .sign-out{
                    font-size: 13px;
                    font-weight: normal;
                    color: #fff;
                }
                &::after{
                    content: '';
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                    width: 24px;
                    height: 24px;
                    background: url(../../public/static/images/common/signout_icon.svg)no-repeat center;
                    background-size: cover;
                }
            }
            .select-box{
                min-width: 165px;
                margin-right: 8px;
                >div{
                    width: 100%;
                }
            }
        }
    }
}

// footer
footer{
    width: 100%;
    background-color: #F4F4F7;
    .footer-inner{
        max-width: 1400px;
        margin: 0 auto;
        padding: 35px 0;
        span{
            display: block;
            font-size: 11px;
            color: #CFCFCF;
            text-align: center;
        }
    }
}