#itsawrap {
    display: block;
    @include size(100%,auto);
}

.site-head {
    position: fixed;
    top: 0;
    left: 0;
    background: $white;
    @include size(100%, 100px);
    border-bottom: 1px solid rgba($black, 0.3);
    z-index: 20000;
    .container, .row { height: 100%; }
    .container { position: relative; }
    .row {
        @extend %flexCenterBetween;
    }
    .head {
        &__logo {
            padding: 10px 0;
            .logo-img {
                display: flex;
                @extend %flexCenterCenter;
                margin: 0;
            }
        }
        &__menu,
        &__login {
            display: flex;
            @extend %flexCenterCenter;
            height: 100%;
        }
        &__menu { width: 60%; }
        &__login {
            justify-content: flex-end;
            .welcome {
                font-size: $f14;
                margin-right: 30px;
                a { color: $red; font-weight: $fBlack; }
            }
        }
    }
    #nav-btn {
        position: fixed;
        top: 25px;
        right: 30px;
        display: none;
        @include size(50px,50px);
        border: 0;
        background: transparent;
        outline: none;
        &:focus { outline: none; }
        .bar {
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            background: $red;
            @include size(40px,6px);
            border-radius: 4px;
            transform: translate(-50%,-50%);
            transition: 300ms linear;
            pointer-events: none;
            &:nth-of-type(1) { margin-top: -12px; }
            &:nth-of-type(3) { margin-top: 12px; }
        }
    }
    .menu {
        display: flex;
        @extend %flexCenterStart;
        height: 100%;
        &__item {
            display: flex;
            @extend %flexCenterCenter;
            height: 100%;
            font-weight: $bold;
            font-size: $f14;
            color: $red;
            padding: 0 20px;
            transition: 300ms linear;
            &.active,
            &:hover {
                background: $red;
                color: $white;
            }
        }
    }
    @media (max-width: 1023px) {
        flex-direction: column;
        height: 100px;
        padding-bottom: 30px;
        transition: 300ms linear;
        .head {
            &__logo {
                position: fixed;
                top: 27px;
                left: 30px;
            }
            &__menu {
                flex-direction: column;
                text-align: left;
                margin-top: 100px;
                width: 100%;
                align-items: flex-start;
                padding: 0 30px;
                pointer-events: none;
                .menu {
                    &__item {
                        padding: 0;
                        margin: 15px 0;
                        opacity: 0;
                        &.active {
                            background: transparent;
                            position: relative;
                            &:before {
                                content: '';
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                display: block;
                                background: $red;
                                @include size(50vw,150%);
                                transform: translate(-60px,-50%);
                                z-index: -1;
                            }
                        }
                        &:hover { background: transparent; color: $red; }
                    }
                }
            }
            &__login {
                flex-direction: column;
                align-items: flex-end;
                width: 100%;
                margin-top: 50px;
                opacity: 0;
                pointer-events: none;
                text-align: right;
                .btn {
                    padding: 10px 40px;
                    line-height: 12px;
                    font-size: $f12;
                }
                .welcome { margin-right: 0; margin-bottom: 20px;}
            }
        }
        #nav-btn { display: block; }
        &.open {
            background: rgba($grey, 0.9);
            height: auto;
            z-index: 10;
            .head {
                &__menu {
                    .menu__item {
                        opacity: 1;
                        pointer-events: all;
                    }
                }
                &__login {
                    opacity: 1;
                    pointer-events: all;
                }
            }
            #nav-btn {
                .bar {
                    transform: translate(-50%,-50%) scaleX(0);
                    &:nth-of-type(1) {
                        margin-top: 0;
                        transform: translate(-50%,-50%) rotate(45deg);
                    }
                    &:nth-of-type(3) {
                        margin-top: 0;
                        transform: translate(-50%,-50%) rotate(-45deg);
                    }
                }
            }
        }
    }
    @media (max-width: 767px) {
        .head {
            &__logo {
                left: 0;
                width: 85%;
                justify-content: flex-start;
            }
            &__menu {
                .menu {
                    &__item {
                        &.active {
                            &:before { width: 105vw; }
                        }
                    }
                }
            }
        }
    }
}
.site-container {
    margin-top: 100px;
    .page {
        position: relative;
        padding-bottom: 6vh;
        &__head {
            display: block;
            padding: 4vh 0;
            margin-bottom: 6vh;
            position: relative;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                @include size(50vw,100%);
                background-image: linear-gradient(to right, $white, transparent);
                z-index: 0;
            }
            .container { position: relative; z-index: 2;}
            .main-title {
                max-width: 60%;
            }
            &.no-margin { margin-bottom: 0; }
        }
    }
    @media (max-width: 767px) {
        .page {
            &__head {
                padding: 4vh 20px;
                .main-title { max-width: 100%; font-size: $f26; }
            }
        }
    }
}