@charset "UTF-8";

nav {
    position: fixed;
    height: 50px;
    width: 100%;
    /*overflow: hidden;*/
    z-index: 999;
}
/*nav.navExpand {
    height: 100%;
}*/
.burgerBar {
    position: absolute;
    width: 100%;
    height: 50px;
    background: rgba(176,138,80,1);
}
.burgerBar > .burgerBtn {
    position: absolute;
    width: 30px;
    height: 30px;
    top:10px;
    right:10px;
    cursor: pointer;

}
.burgerBar > .burgerBtn > span {
    position: absolute;
    top:12px;
    width: 30px;
    height: 3px;
    background: #fff;
    border-radius: 2px;

    transform: scale(1,1);
    -webkit-transform: scale(1,1);

    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
}
.burgerBar > .burgerBtn::before {
    content: " ";
    position: absolute;
    top:2px;
    width: 30px;
    height: 3px;
    background: #fff;
    border-radius: 2px;

    transform: rotate(0deg) translate(0px,0px);
    -webkit-transform: rotate(0deg) translate(0px,0px);

    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
}
.burgerBar > .burgerBtn::after {
    content: " ";
    position: absolute;
    top:22px;
    width: 30px;
    height: 3px;
    background: #fff;
    border-radius: 2px;

    transform: rotate(0deg) translate(0px,0px);
    -webkit-transform: rotate(0deg) translate(0px,0px);

    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
}
nav.navExpand > .burgerBar > .burgerBtn > span {
    position: absolute;
    top:12px;
    width: 30px;
    height: 3px;
    background: #fff;
    border-radius: 2px;

    transform: scale(0,0);
    -webkit-transform: scale(0,0);
}
nav.navExpand > .burgerBar > .burgerBtn::before {
    transform: rotate(45deg) translate(7px,7px);
    -webkit-transform: rotate(45deg) translate(7px,7px);
}
nav.navExpand > .burgerBar > .burgerBtn::after {
    transform: rotate(-45deg) translate(7px,-7px);
    -webkit-transform: rotate(-45deg) translate(7px,-7px);
}
nav > .logo {
    position: absolute;
    width: 180px;
    height: 35px;
    left:20px;
    top:8px;
    background:url(../images/logo_logo2.svg) no-repeat 0 0;
    background-size: contain;
}
nav > .navBox {
    position: fixed;
    width: 100%;
    max-width: 300px;
    height: calc(100% - 50px);
    top:50px;
    right: -300px;
    background: #000;
    overflow-y: auto;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
}
nav.navExpand > .navBox {
    right: 0px;
}
nav > .navBox > ul.memberBtnBox {
    position: relative;
    text-align: center;
    margin: 20px 0 0 0;
}
nav > .navBox > ul.memberBtnBox > li {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 15px 0 15px;
    cursor: pointer;
}
nav > .navBox > ul.memberBtnBox > li:hover {
    background: rgba(199,159,98,0.3);
}
nav > .navBox > ul.memberBtnBox > li.login {
    border:1px solid rgba(199,159,98,1);
    border-radius: 5px;
}
nav > .navBox > ul.memberBtnBox > li.login::before {
    content: "";
    position: absolute;
    top:20%;
    left:20%;
    width: 60%;
    height: 60%;
    background: url(../images/member_icon1.png) no-repeat center center;
    background-size: contain;
    z-index: 1;
}
nav > .navBox > ul.memberBtnBox > li.login::after {
    content: "會員登入";
    position: absolute;
    width: 70px;
    top:65px;
    left:50%;
    margin: 0 0 0 -35px;
    text-align: center;
    color:#fff;
}
nav > .navBox > ul.memberBtnBox > li.viewlist {
    border:1px solid rgba(199,159,98,1);
    border-radius: 5px;
}
nav > .navBox > ul.memberBtnBox > li.viewlist:hover {
    background:rgba(199,159,98,0.3);
}
nav > .navBox > ul.memberBtnBox > li.viewlist::before {
    content: "";
    position: absolute;
    top:20%;
    left:20%;
    width: 60%;
    height: 60%;
    background: url(../images/member_icon4.png) no-repeat center center;
    background-size: contain;
    z-index: 1;
}
nav > .navBox > ul.memberBtnBox > li.viewlist::after {
    content: "關注清單";
    position: absolute;
    width: 70px;
    top:65px;
    left:50%;
    margin: 0 0 0 -35px;
    text-align: center;
    color:#fff;
}
nav > .navBox > ul.memberBtnBox > li.tip {
    border:1px solid rgba(199,159,98,1);
    border-radius: 5px;
}
nav > .navBox > ul.memberBtnBox > li.tip::before {
    content: "";
    position: absolute;
    top:20%;
    left:20%;
    width: 60%;
    height: 60%;
    background: url(../images/member_icon3.png) no-repeat center center;
    background-size: contain;
    z-index: 1;
}
nav > .navBox > ul.memberBtnBox > li.tip::after {
    content: "聯絡我們";
    position: absolute;
    width: 70px;
    top:65px;
    left:50%;
    margin: 0 0 0 -35px;
    text-align: center;
    color:#fff;
}
nav > .navBox > dl {
    position: relative;
    width: 100%;
    margin: 40px 0 0 0;
}
nav > .navBox > dl > dt {
    position: relative;
    display: block;
    padding: 15px 25px 5px 25px;
    border-bottom: 1px solid rgba(199,159,98,0.7);
    text-align: left;
    font-size: 14px;
    color:rgba(199,159,98,1);
    cursor: pointer;
}
nav > .navBox > dl > dt:last-of-type {
    border-right: 0px;
}
nav > .navBox > dl > dt > span {
    position: relative;
    display: block;
    font-size: 18px;
}
nav > .navBox > dl > dt:hover {
    color:rgba(255,255,255,1);
    opacity: 1;
}
nav > .navBox > dl > dt.currentExpand {
    color:rgba(255,255,255,1);
    opacity: 1;
}
nav > .navBox > dl > dt.currentPage {
    color:rgba(199,159,98,1);
    opacity: 1;
}
nav > .navBox > dl > dt.currentExpand + dd {
    display: block;
}
nav > .navBox > dl > dd {
    position: relative;
    display: none;
    width: 100%;
}
nav > .navBox > dl > dd > span.navBg {
    position: absolute;
    display: none;
}
nav > .navBox > dl > dd > h1 {
    display: none;
}

nav > .navBox > dl > dd > dl {
    position: relative;
}

nav > .navBox > dl > dd > dl > dt {
    position: relative;
    display: block;
    padding: 15px 0 15px 15%;
    margin: 2px 0 2px 0;
    font-size: 14px;
    line-height: 14px;
    background: rgba(23,20,17,1);
    color:rgba(199,159,98,1);
    white-space:nowrap;
    cursor: pointer;
}
nav > .navBox > dl > dd > dl > dt>a {
    color:rgba(199,159,98,1);
    text-decoration: none;
}
nav > .navBox > dl > dd > dl > dt:hover {
    color:#fff;
}
nav > .navBox > dl > dd > dl > dt.attachChild::after {
    content: " + ";
}
nav > .navBox > dl > dd > dl > dt.expandChild {
    background: rgba(23,20,17,0);
}
nav > .navBox > dl > dd > dl > dt.expandChild::after {
    content: "X";
    position: absolute;
    right:15%;
}
nav > .navBox > dl > dd > dl > dt.expandChild + dd {
    display: block;
}
nav > .navBox > dl > dd > dl > dd {
    position: relative;
    display: none;
    padding: 0 0 10px 0;
}
nav > .navBox > dl > dd > dl > dd > ul {
    position: relative;
    width: 70%;
    margin: 0 0 0 15%;
}
nav > .navBox > dl > dd > dl > dd > ul > br {
    display: none;
}
nav > .navBox > dl > dd > dl > dd > ul > li {
    position: relative;
    display: block;
    width: 100%;
    margin:2px 0 2px 0;
    padding: 10px 0 10px 0;
    font-size: 14px;
    line-height: 14px;
    background: rgba(23,20,17,1);
    color:rgba(199,159,98,1);
}
nav > .navBox > dl > dd > dl > dd > ul > li > span {
    margin: 0 0 0 20px;
    cursor: pointer;
}
nav > .navBox > dl > dd > dl > dd > ul > li > span > a {
    color: #808080;
    text-decoration: none;
}
nav > .navBox > dl > dd > dl > dd > ul > li > span:hover {
    color:#fff;
}