@media only screen and (max-width: 800px) {
    nav {
        background: #fff;
        left: -25rem;
        transition: .5s ease-out;
    }

    nav[state=true] {
        left: 0
    }

    nav:after {
        width: 0;
        height: inherit;
        background: rgba(255,255,255,0.8);
        float: left;
        position: absolute;
        top: 0;
        left: 25rem;
        transition: .5s ease-out;
    }

    nav[state=true]:after {
        width: calc(100vw - 25rem);
        width: -moz-calc(100vw - 25rem);
        width: -webkit-calc(100vw - 25rem);
    }

    nav .mobile-menu-close {
        width: 100%;
        height: 5rem;
        text-align: center;
        display: block;
    }

    nav .mobile-menu-close label {
        width: 3rem;
        height: 3rem;
        margin-top: 2rem;
        display: inline-block;
        float: none;
    }

    nav > ul {
        width: 100%;
        height: calc(100vh - 20rem);
        height: -moz-calc(100vh - 20rem);
        height: -webkit-calc(100vh - 20rem);
    }


    article {width: 100%}


    header,
    #home header {
        width: calc(100% - 8rem);
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    header > * {
         position: static;
    }
    header .tool {
        width: calc(100% - 7rem);
    }

    header .mobile-menu-open {
        width: 3rem;
        height: 100%;
        display: block;
    }

    header .mobile-menu-open label,
    header .mobile-menu-open label:before,
    header .mobile-menu-open label:after {
        width: inherit;
        height: .1rem;
        background: #000;
    }

    header .mobile-menu-open label {
        position: absolute;
        bottom: 5.9rem;
    }

    header .mobile-menu-open label:before,
    header .mobile-menu-open label:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

    header .mobile-menu-open label:before {margin-top: -.8rem}
    header .mobile-menu-open label:after {margin-bottom: -.8rem}

    body > article {
        margin-bottom: 7rem
    }



    #home {width: 100%}


    #banner {height: 40rem}



    /*
    ------------------------------
        PRODUCT DETAIL
    ------------------------------
    */

    #product-detail .other .product-list {
        grid-template-columns: 1fr 1fr;
    }

    #article-detail {
        max-width: 100%;
    }


    /*
    -----------------------------------
        User Interface
    -----------------------------------
    */
    #tpl-mobile {
        --mBackground: #fff;
        --mBackgroundPrimary: #000;
        --mBackgroundSecondary: #f0f0f0;
        --mIconSize: 20px;
        --mButtonSize: 40px;
        --mSpacing: 10px;
        --mColor: #fff;
        --mRadius: 10px;
        --mWidth: 320px;

        display: block;
    }
    #tpl-mobile ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    #tpl-mobile .m-contact-more .social,
    #tpl-mobile .m-contact > *,
    #tpl-mobile .m-contact {
        display: inline-flex;
        align-items: center;
    }
    #tpl-mobile .m-contact {
        width: 100%;
        max-width: var(--mWidth);
        justify-content: space-between;
        box-sizing: border-box;

        background: var(--mBackground);
        padding: calc(2*var(--mSpacing)) var(--mSpacing);
        border-top-left-radius: var(--mRadius);
        border-top-right-radius: var(--mRadius);

        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;

        transition: .3s ease-out;
        transform: translateY(100%);
    }
    #tpl-mobile .m-contact[show] {
        transform: translateY(0);
    }
    #tpl-mobile .m-contact > * {
        justify-content: center;
        border-radius: 5px;
    }
    #tpl-mobile .m-contact .icon {
        width: var(--mIconSize);
        height: var(--mIconSize);
        display: inline-block;
    }
    #tpl-mobile .m-contact .m-button {
        width: var(--mButtonSize);
        height: var(--mButtonSize);
        background: var(--mBackgroundSecondary)
    }

    #tpl-mobile .m-contact .call {
        width: calc(100% - 2*var(--mButtonSize) - 4*var(--mSpacing));
        height: var(--mButtonSize);
        background: var(--mBackgroundPrimary);
    }
    #tpl-mobile .m-contact .call .icon {
        margin-right: var(--mSpacing);
        fill: var(--mColor)
    }
    #tpl-mobile .m-contact .call .phone {
        font-size: 1.1em;
        font-weight: 500;
        color: var(--mColor);
        letter-spacing: .1em;
    }


    #tpl-mobile .m-contact-more {
        width: 100%;
        max-width: var(--mWidth);
        max-height: calc(90% - 3*var(--mSpacing) - var(--mButtonSize));
        overflow-x: hidden;
        overflow-y: auto;
        border-top-left-radius: var(--mRadius);
        border-top-right-radius: var(--mRadius);
        box-sizing: border-box;
        padding: calc(2*var(--mSpacing));
        background: var(--mBackground);
        /*border: solid thin #e5e5e5;*/
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 98;
        transition: .3s ease-out;
        transform: translateY(100%);
    }
    #tpl-mobile .m-contact-more[show] {
        transform: translateY(0);
        bottom: calc(3*var(--mSpacing) + var(--mButtonSize) - var(--mRadius));
		box-shadow: 1rem -1rem 2rem -.2rem rgba(0,0,0,.2)
    }
    #tpl-mobile .m-contact-more > :nth-child(n+2) {
        margin-top: calc(3*var(--mSpacing));
    }

    #tpl-mobile .m-contact-more .block > h2 {
        font-size: 1.3em;
        font-weight: 400;
        text-transform: uppercase;
    }
    #tpl-mobile .m-contact-more .block .wrapper {
        padding-left: 10px;
    }

    #tpl-mobile .m-contact-more .social {
        width: 100%;
        justify-content: center;
		margin-top: 2rem;
    }
    #tpl-mobile .m-contact-more .social > a {
        width: 40px;
        height: 40px;
        margin: 0 10px;
        border-radius: 5px;
        background: var(--mBackgroundSecondary);
        position: relative;
    }
    #tpl-mobile .m-contact-more .social > a svg {
        max-width: 50%;
        max-height: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #tpl-mobile .m-contact-more .social > a.in svg {
        max-height: 42%;
    }

    #tpl-mobile .m-contact-more .support li,
    #tpl-mobile .m-contact-more .info li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 0;
    }

    #tpl-mobile .m-contact-more .info li span:first-child {
        max-width: 25%;
        color: hsl(0, 0%, 50%)
    }
    #tpl-mobile .m-contact-more .info li span:last-child {
        max-width: 70%;
        text-align: right;
    }


    #tpl-mobile .m-contact-more .support li .name {
        max-width: 50%;
        color: hsl(0, 0%, 50%)
    }
    #tpl-mobile .m-contact-more .support li .phone {
        font-size: 1em;
        letter-spacing: .1em;
        padding: 10px 15px;
        background: var(--mBackgroundPrimary);
        color: var(--mColor);
        border-radius: 3px;
    }
}