/*!
 * jquery-drawer v3.2.2
 * Flexible drawer menu using jQuery, iScroll and CSS.
 * http://git.blivesta.com/drawer
 * License : MIT
 * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
 */

/*!------------------------------------*\
    Base
\*!------------------------------------*/

.drawer-open {
    overflow: hidden !important;
}

.drawer-nav {
    position: fixed;
    top: 0;
    z-index: 999;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #fff;
}

.menu-wrap {
    position: relative;
    padding: 0 0 25px;
    width: 100%;
    height: 100%;
    line-height: 1;
}
.menu-wrap .inner{ position: relative; display: flex; min-height: 65px; font-size: 1.2rem; justify-content: space-between; align-items: center;}
.menu-wrap .inner h1{ position: absolute; top: 0; left: 0;  display: flex; padding: 0 0 0 20px; height: 65px; line-height: normal; align-items: center;}
.menu-wrap .inner h1 a{ display: inline-block; height: 30px;}
.menu-wrap .inner h1 img{ height: 100%; vertical-align: top;}
.menu-wrap .inner aside{ position: absolute; top: 0; right: 60px;}
.menu-wrap .inner aside ul{ display: flex; height: 65px; align-items: center;}
.menu-wrap .inner aside a{ display: flex; height: 20px; align-items: center;}
.menu-wrap .inner aside i{ display: inline-block; margin: 0 5px 0 0; height: 18px; vertical-align: middle;}
.menu-wrap .inner aside i img{ height: 100%; vertical-align: middle;}
.menu-wrap .inner .switch{ position: absolute; top: 0; right: 0; z-index: 999999; display: block;}

.ht{ border-top: 1px solid #efefef;}
.ht li{ position: relative;}
.ht a,
.ht .nolink{ display: flex; width: 100%; height: 70px;}
.ht > li{ border-bottom: 1px solid #efefef; font-size: 1.8rem;}
.ht > li > a,
.ht > li > .nolink{ position: relative; padding: 25px;}
.ht > li > a small,
.ht > li > .nolink small{ position: absolute; top: 50%; right: 90px; font-size: 1rem;transform: translate(0,-50%); }

.ht span{ position: absolute; top: 0; right: 0; display: inline-block; width: 70px; height: 70px; cursor: pointer;}
.ht span:before{ position: absolute; top: 35px; right: 25px; width: 15px; height: 1px; background: #000; content: "";}
.ht span:after{ position: absolute; top: 35px; right: 25px; width: 15px; height: 1px; background: #000; content: ""; transition: all .2s ease-in-out; transform: rotate(90deg);}
.ht span.open:after{ transform: rotate(180deg);}

.ht .block{ display: none; font-size: 1.2rem;}
.ht .block a{ height: 50px;}
.ht .block span{ position: absolute; top: 0; right: 0; display: inline-block; width: 50px; height: 50px; cursor: pointer;}
.ht .block span:before{ top: 25px; right: 25px; width: 10px;}
.ht .block span:after{  top: 25px; right: 25px; width: 10px;}

.ht .block1 > ul > li{ border-top: 1px solid #efefef;}
.ht .block1 > ul > li > a{ display: flex; padding: 0 25px; align-items: center;}
.ht .block1 > ul > li > .search{ display: flex; padding: 0 25px; height: 50px; align-items: center;}
.ht .block1 > ul > li > .searchbox{ position: absolute; top: 10px; right: 16px; width: 50%;}
.ht .block1 > ul > li > .searchbox input[type="text"]{ width: 80%;}

.ht .block2{ padding: 0 15px; font-size: 1rem;}
.ht .block2 > ul{ display: flex; border-top: 1px solid #efefef; flex-wrap: wrap;}
.ht .block2 > ul > li{ width: calc(100% / 3); border-bottom: 1px solid #efefef;}
.ht .block2 > ul > li > a{ display: flex; height: 50px; text-align: center; line-height: 1.4; align-items: center; justify-content: center;}

.nav-shop .block2 > ul{ display: block; border-top: 1px solid #efefef;}
.nav-shop .block2 > ul > li{ width: 100%; border-bottom: 1px solid #efefef;}
.nav-shop .block2 > ul > li > a{ padding: 0 10px; height: 40px;text-align: left; justify-content: flex-start; }

.ht a i{ display: inline-block; margin: 0 0 0 6px; height: 12px; vertical-align: middle; line-height: 1;}
.ht a i img{ width: auto; height: 100%; vertical-align: baseline;}
.ht .ttl{ padding: 0 10px 10px; font-weight: 700;}
.ht ul + .ttl{ padding: 25px 10px 10px;}

.menu-wrap .other{ position: relative; margin: 25px 0 0; padding: 0 25px 25px;}
.menu-wrap .other ul{ display: flex; font-size: 1.2rem; justify-content: flex-start;}
.menu-wrap .other ul a{ display: block;}
.menu-wrap .other ul i{ display: inline-block; height: 18px;}
.menu-wrap .other ul i img{ height: 100%;}
.menu-wrap .other ul > li{ padding: 0 10px 0 0;}

.drawer-dropdown > a:before,
.drawer-dropdown > a:after{ position: absolute; top: 50%; right: 9px; width: 9px; height: 1px; background: #fff; content: "";}
.drawer-dropdown > a:before{ transform: translate(0,-50%);}
.drawer-dropdown > a:after{ transform: translate(0,-50%) rotate(90deg);}

/*!------------------------------------*\
    Right
\*!------------------------------------*/

.drawer--right .drawer-nav {
    right: -100%;
    -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
    right: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.drawer--right.drawer-open .drawer-nav .link1 {
    display: inline-block;
}

/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/

.drawer-hamburger {
    display: block;
    box-sizing: content-box;
    padding: 0 20px;
    width: 1.8rem;
    height: 64px;
    outline: 0;
    border: 0;
    background-color: transparent;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.drawer-hamburger:hover {
    background-color: transparent;
    cursor: pointer;
}

.drawer-hamburger-icon {
    position: relative;
    display: block;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
    width: 100%;
    height: 1px;
    background-color: #000;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
    position: absolute;
    top: -8px;
    left: 0;
    content: ' ';
}

.drawer-hamburger-icon:after {
    top: 8px;
}

.drawer-open .drawer-hamburger-icon {
    background-color: transparent;
}

.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after {
    top: 0;
}

.drawer-open .drawer-hamburger-icon:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.drawer-open .drawer-hamburger-icon:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*!------------------------------------*\
    Dropdown
\*!------------------------------------*/

.drawer-dropdown-menu {
    display: none;
}

/*! open */
.drawer-dropdown.open > .drawer-dropdown-menu {
    display: block;
}