#footPage.cq-footer {
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    padding: var(--cq-5) 0 var(--cq-4);
    background: var(--cq-dark);
    color: var(--cq-on-dark-2);
    font-size: var(--cq-fs-2);
    line-height: 1.6;
}
#footPage.cq-footer a { color: var(--cq-on-dark-2); text-decoration: none; transition: color .15s ease; }
#footPage.cq-footer a:hover { color: var(--cq-on-dark); }

.cq-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--cq-6) 48px;
    padding: 0 var(--cq-gutter);
}

.cq-footer__brand { flex: 1 1 300px; max-width: 380px; }
.cq-footer__credit { margin: 0; font-size: var(--cq-fs-2); line-height: 1.7; color: var(--cq-on-dark-2); }

.cq-footer__cols { display: flex; flex-wrap: wrap; gap: var(--cq-6) 48px; }
.cq-footer__col { min-width: 150px; }
.cq-footer__coltitle {
    display: block;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--cq-fs-1);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cq-on-dark);
    margin-bottom: var(--cq-4);
}
a.cq-footer__coltitle:hover { color: var(--cq-on-dark); text-decoration: underline; }
.cq-footer__col ul { list-style: none; margin: 0; padding: 0; }
.cq-footer__col li { margin: 0 0 var(--cq-2); }
.cq-footer__col li a { font-size: var(--cq-fs-2); color: var(--cq-on-dark-2); }
.cq-footer__col li a:hover { color: var(--cq-on-dark); }

.cq-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cq-2) var(--cq-5);
    max-width: 1300px;
    margin: var(--cq-6) auto 0;
    padding: var(--cq-4) var(--cq-5) 0;
    border-top: 1px solid rgba(255, 255, 255, .10);
    font-size: var(--cq-fs-1);
    color: var(--cq-on-dark-3);
}
.cq-footer__ver {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--cq-on-dark-3);
    letter-spacing: .02em;
}

@media (max-width: 767px) {
    #footPage.cq-footer { padding: var(--cq-6) 0 var(--cq-4); }
    .cq-footer__inner { gap: var(--cq-5); padding: 0 var(--cq-4); }
    .cq-footer__cols { gap: var(--cq-5) var(--cq-6); }
    .cq-footer__bottom {
        margin-top: var(--cq-5);
        padding: var(--cq-4) var(--cq-4) 0;
        flex-direction: column;
        align-items: flex-start;
    }
}

:root {
    --cq-footer-h: 48px;}

#footPage {

    margin-top: var(--cq-4);
    line-height: 1.8em;
    background: rgba(74, 85, 96, .88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--cq-on-dark-2);
    padding-top: var(--cq-4);
    height: var(--cq-footer-h);
    overflow: hidden;
    -webkit-transition: height 1s;
    transition: height 1s;
    position: fixed;
    bottom: 0px;
    width: 100%;
    -webkit-transition: height 1s;    transition: height 1s;
    z-index: 10;
}
#footPage:hover {

        height: 250px;
        background: rgba(58, 68, 78, .96);
}

#footPage a {

        color: var(--cq-on-dark-2);
}

@media (max-width: 1279px) {

    #footPage {

        display: none;
    }

    :root { --cq-footer-h: 0px; }
}

@media screen and (max-width: 680px) {

    #footPage {

        position: relative;
        height: 100%;
        background: black;
    }
}