#bg {position: fixed;top: -5%;left: -4%;width: 100%;height: 100%;z-index: 1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -moz-filter: blur(0.125rem);
    -webkit-filter: blur(0.125rem);
    -ms-filter: blur(0.125rem);
    filter: blur(0.125rem);
    -moz-transition: all .75s ease-in-out;
    -webkit-transition: all .75s ease-in-out;
    -ms-transition: all .75s ease-in-out;
    transition: all .75s ease-in-out;
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);

}
#bg:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;left: 0;width: 100%;height: 100%;
    -moz-transition: all 1.25s ease-in-out;
    -webkit-transition: all 1.25s ease-in-out;
    -ms-transition: all 1.25s ease-in-out;
    transition: all 1.25s ease-in-out;
    background-image: linear-gradient(to top, rgba(19, 21, 25, 0.75), rgba(19, 21, 25, 0.45));
    z-index: 2;
}
#bg:after {
    -moz-transform: scale(1.125);
    -webkit-transform: scale(1.125);
    -ms-transform: scale(1.125);
    transform: scale(1.125);

    z-index: 1;
}
#wrapper {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 4rem 2rem;
    z-index: 3; cursor: pointer;
    
}
@media screen and (max-width: 1680px) {
    #wrapper {
        padding: 3rem 2rem;
    }
}

@media screen and (max-width: 736px) {
    #wrapper {
        padding: 2rem 1rem;
    }
}
@media screen and (max-width: 480px) {
    #wrapper {
        padding: 1rem;
    }
}
/* Header */

#header {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
    -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
    -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
    transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;

    max-width: 100%;
    text-align: center;
}

#header>* {
    -moz-transition: opacity 0.325s ease-in-out;
    -webkit-transition: opacity 0.325s ease-in-out;
    -ms-transition: opacity 0.325s ease-in-out;
    transition: opacity 0.325s ease-in-out;
    position: relative;
    margin-top: 3.5rem;
}

#header>*:before {
    content: '';
    display: block;
    position: absolute;
    top: calc(-3.5rem - 1px);
    left: calc(50% - 1px);
    width: 1px;
    height: calc(3.5rem + 1px);
    background: #ffffff;
}

#header> :first-child {
    margin-top: 0;
}

#header> :first-child:before {
    display: none;
}
#header .logo {
    width: 5.5rem;
    height: 5.5rem;
    line-height: 5.5rem;
    border-radius: 100%;
    background: url(//oss.alextu.cn/studio/assets/img/logo2.png);
    background-size: contain;
}

#header .content {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    max-width: 100%;
    color: #fff;
    font: inherit;
}
h1 {
    font-size: 2.25rem;
    line-height: 1.3;
    letter-spacing: 0.5rem;
}

#header .content .inner {
    -moz-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
    -webkit-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
    -ms-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
    transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
    -moz-transition-delay: 0.25s;
    -webkit-transition-delay: 0.25s;
    -ms-transition-delay: 0.25s;
    transition-delay: 0.25s;
    padding: 3rem 2rem;
    max-height: 40rem;
    overflow: hidden;
}

#header .content .inner> :last-child {
    margin-bottom: 0;
}

#header .content p {
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size: 0.8rem;
    line-height: 2;
}

#header nav {
    background:rgba(255,255,255,0.85); font-size: 12px; 
    color: #000;padding:0.2em 1em;
}

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

    #header>* {
        margin-top: 2rem;
    }

    #header>*:before {
        top: calc(-2rem - 1px);
        height: calc(2rem + 1px);
    }

    #header .logo {
        width: 4.75rem;
        height: 4.75rem;
        line-height: 4.75rem;
    }
    #header .content .inner {
        padding: 2.5rem 1rem;
    }

    #header .content p {
        line-height: 1.875;
    }

}

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

    #header {
        padding: 1.5rem 0;
    }

    #header .content .inner {
        padding: 2.5rem 0;
    }
}


#footer {
    -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
    -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
    -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
    transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
    width: 100%;
    max-width: 100%;
    margin-top: 2rem;
    text-align: center;
}

#footer .copyright {
    letter-spacing: 0.2rem;
    font-size: 0.6rem;
    opacity: 0.75;
    margin-bottom: 0;
    text-transform: uppercase;
    color: #fff;
}

body.on #bg{
    -moz-filter:none;
    -webkit-filter: none;
    -ms-filter: none;
    filter:none;
}
body.on #bg:before{
    opacity: 0.5;
}