/**
 * @authors YaoRen (hongjiawei@uworks.cc)
 * @date    2016-07-26 17:32:55
 */

/*右侧导航*/
.side-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    z-index: 1000;
    background: #1f1f22;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -webkit-transform: scale(1);
}

.side-nav .nav {
    width: 100%;
    position: absolute;
    bottom: 50px;
    text-align: center;
}

.side-nav .nav li {
    display: block;
    text-align: center;
    position: relative;
}

.side-nav .nav li.wz {
    margin-top: 26px;
}

.side-nav .nav li .triangle {
    display: none;
    height: 0;
    width: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
}

.side-nav .nav li.active .triangle,
.side-nav .nav li:hover .triangle {
    display: block;
}

.side-nav .nav li.cart:hover .triangle,
.side-nav .nav li.foot:hover .triangle {
    display: none;
}

.side-nav .nav li.cart.active .triangle,
.side-nav .nav li.foot.active .triangle {
    display: block;
}

.side-nav .side-item {
    position: relative;
    display: block;
}

.side-nav .nav-title,
.side-nav .side-item .nav-title {
    font-size: 12px;
    font-family: "微软雅黑", "Microsoft Yahei";
    color: #bebebe;
    line-height: 16px;
}

.side-nav li.active .side-item .nav-title,
.side-nav .side-item:hover .nav-title {
    color: #dddddd;
}

.side-nav .side-item .item-num {
    display: inline-block;
    position: absolute;
    right: 50%;
    top: 50%;
    margin: -32px -23px 0 0;
    font-size: 14px;
    color: #cd0700;
    font-weight: bold;
}

.side-nav .back-top {
    margin-top: 25px;
}

.side-nav .back-top .back-top-icon {
    display: block;
    cursor: pointer;
    height: 27px;
    background: url(../image/00.png) no-repeat center;
}

.side-nav .back-top:hover .back-top-icon {
    background: url(../image/000.png) no-repeat center;
}

.side-nav .back-top .nav-title {
    position: relative;
    top: 10px;
}

.side-nav .side-item .user-pic {
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin: 0 auto 3px;
    width: 32px;
    height: 32px;
    position: relative;
    overflow: hidden;
    background: #7D7D7D;
}

.side-nav .side-item:hover .user-pic {
    background: #D0D0D0;
}

.side-nav .side-item .user-pic img {
    display: block;
    width: 100%;
    height: 100%;
}

.side-nav .side-item .item-icon {
    display: block;
    margin: 0 auto;
    width: 32px;
    height: 32px;
}

.side-nav .side-item .user-icon {
    background: url(../image/11.png) no-repeat center;
}

.side-nav .side-item:hover .user-icon {
    background: url(../image/111.png) no-repeat center;
}

.side-nav .side-item .heart-icon {
    background: url(../image/22.png) no-repeat center;
}

.side-nav .side-item:hover .heart-icon {
    background: url(../image/222.png) no-repeat center;
}

.side-nav .side-item .cart-icon {
    background: url(../image/33.png) no-repeat center;
}

.side-nav li.active .side-item .cart-icon,
.side-nav .side-item:hover .cart-icon {
    background: url(../image/333.png) no-repeat center;
}

.side-nav .side-item .foot-icon {
    background: url(../image/44.png) no-repeat center;
}

.side-nav li.active .side-item .foot-icon,
.side-nav .side-item:hover .foot-icon {
    background: url(../image/444.png) no-repeat center;
}

.side-nav .side-item .message-icon {
    background: url(../image/55.png) no-repeat center;
}

.side-nav .side-item:hover .message-icon {
    background: url(../image/555.png) no-repeat center;
}

.side-nav .side-item .downapp-icon {
    background: url(../image/66.png) no-repeat center;
}

.side-nav .side-item:hover .downapp-icon {
    background: url(../image/666.png) no-repeat center;
}

.side-nav .side-item .wx-icon {
    background: url(../image/77.png) no-repeat center;
}

.side-nav .side-item:hover .wx-icon {
    background: url(../image/777.png) no-repeat center;
}

.side-nav .side-item .peo-icon {
    background: url(../image/88.png) no-repeat center;
}

.side-nav .side-item:hover .peo-icon {
    background: url(../image/888.png) no-repeat center;
}

/*右侧导航栏注册登录样式*/
.nav-centerR {
    margin-top: 8px;
    text-align: center;
}

.nav-centerR .split-line {
    width: 59px;
    height: 1px;
    margin: 0 auto 5px;
    background: #7d7d7d;
}

.nav-centerR p {
    font-family: "微软雅黑", "Microsoft Yahei";
    font-size: 12px;
    line-height: 16px;
}

.nav-centerR a {
    color: #6b6b6b;
}

.nav-centerR a:hover {
    color: #9a9a9a;
}

/*nav-right:二维码弹窗样式*/
.qrcode-tc {
    display: none;
    position: absolute;
    left: -201px;
    top: 50%;
    margin-top: -58px;
    background: #fff;
    width: 165px;
    height: 80px;
    padding: 18px;
}

.side-nav .nav li.downapp:hover .qrcode-tc,
.side-nav .nav li.wx:hover .qrcode-tc {
    display: block;
}

.qrcode-tc .qrcode-tc-l {
    width: 80px;
    height: 80px;
    margin-right: 14px;
}

.qrcode-tc .qrcode-tc-l img {
    display: block;
    width: 100%;
    height: 100%;
}

.qrcode-tc .qrcode-tc-r {
    padding-left: 14px;
    border-left: solid 1px #e6e6e6;
    width: 55px;
    height: 80px;
}

.qrcode-tc .qrcode-tc-r span {
    display: block;
    padding: 5px 0;
}

.qrcode-tc .qrcode-tc-r span img {
    display: block;
    margin: 0 auto;
}

.qrcode-tc .qrcode-tc-r p {
    font-size: 12px;
    line-height: 14px;
}

.downapp .qrcode-tc .qrcode-tc-r p {
    text-align: center;
}

.wx .qrcode-tc .qrcode-tc-r p {
    text-align: left;
}

/*nav-right:cart弹框样式*/
.popup-sidenav {
    display:none;
    position: fixed;
    right: 120px;
    top: 0;
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    box-shadow: -3px 0px 5px #ccc;
}

/*.popup-sidenav::-webkit-scrollbar {
    width: 8px;
}

.popup-sidenav::-webkit-scrollbar-thumb {
    background-color: #aaa;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

.popup-sidenav::-webkit-scrollbar-track {
    background-color: #ccc;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}*/

.popup-sidenav::-webkit-scrollbar-button {
    /*background-color: #ccc;*/
} /* 滑轨两头的监听按钮颜色 */

.popup-sidenav::-webkit-scrollbar-corner {
    /*background-color: black;*/
} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

.cart-tc {
    width: 284px;
}

.cart-tc-box {
    padding: 24px 17px 24px 14px;
}

.cart-tc-title {
    text-align: left;
    font-family: "微软雅黑", "Microsoft Yahei";
    font-size: 14px;
    color: #444;
    padding-bottom: 12px;
    border-bottom: solid 1px #bbb;
}

.cart-popup-close {
    background: url(../image/popup_sidenav_close15.png) no-repeat;
    display: inline-block;
    width: 15px;
    height: 15px;
    float: right;
    margin-top: 2px;
    padding-right:5px;
}

.cart-tc-null {
    font-size: 14px;
    color: #444444;
    line-height: 20px;
    text-align: center;
    margin-top: 25px;
}

.cart-tc-ul {
    padding-top: 15px;
    padding-bottom: 20px;
}

/*css美化滚动条样式*/
/*.cart-tc-ul::-webkit-scrollbar {
	width: 8px;
}
.cart-tc-ul::-webkit-scrollbar-thumb {
	background-color: #ff4400;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.cart-tc-ul::-webkit-scrollbar-track {
	background-color: #808080;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}*/

.cart-ul-li {
    border: solid 1px #bbbbbb;
    padding: 8px 6px 9px 9px;
    margin-bottom: 6px;
}

.cart-ul-li:hover {
    background-color: #dcdcdc;
    border: 1px solid #dcdcdc;
}

.cart-ul-li {

}

.cart-ul-li > a > img {
    margin-right: 12px;
    width: 102px;
    height: 129px;
}

.cart-ul-li > div {
    width: 120px;
    text-align: left;
}

.cart-ul-li .cart-tc-close {
    background: url(../image/cart_close.png) no-repeat center center;
    background-size: 100% 100%;
    display: block;
    width: 15px;
    height: 15px;
}

.cart-brand {
    /*font-family:"微软雅黑", 'Microsoft YaHei';*/
    font-weight: bold;
    font-size: 12px;
    color: #222;
    margin-bottom: 4px;
}

.cart-shop {
    font-size: 12px;
    font-family: "微软雅黑", "Microsoft Yahei";
    color: #222;
    line-height: 14px;
}

.cart-shop-name {
    font-weight: bold;
    margin-bottom: 9px;
    width: 96px;
}

.cart-shop-size {
    font-weight: normal;
    margin-bottom: 6px;
}
.cart-shop-color {
    font-weight: normal;
    margin-bottom: 6px;
}

.cart-price {
    font-family: "NeoSansStd Bold";
    font-size: 12px;
    color: #333;
    margin-bottom:5px;
}

.to-collection{
    font-family:"微软雅黑", "Microsoft Yahei";
    font-weight:bold;
    font-size:12px;
    background-color:#8a8a8a;
    padding:2px 3px 3px 4px;
    width: 60px;
    height: 12px;
    line-height: 12px;
    cursor:pointer;
    color:#fff;
}

.cart-total {
    padding-bottom: 17px;
    /*border-bottom: solid 1px #bbb;*/
    margin-bottom: 18px;
    height: 23px;
    line-height: 23px;
}

.cart-total > span {
    width: 50%;
    font-size: 12px;
    font-family: "微软雅黑", "Microsoft Yahei";
    color: #1f1f1f;
    text-align: left;
}

.cart-total > span:last-child {
    text-align: right;
}

.cart-total-price {
    font-size: 18px;
    font-family: "微软雅黑", "Microsoft Yahei";
    font-weight: bold;
    color: #1f1f1f;
}

.cart-tc a.cart-settlement {
    padding: 9px 84px 10px;
    background:url(../image/cart_tc_money.png) no-repeat center center;
    background-size:100% 100%;
    display:block;
    height:14px;
    line-height:14px;
    font-size: 14px;
    font-family: "微软雅黑", "Microsoft Yahei";
    color: #fff;
    text-align: center;
    border-radius: 3px;
}
.cart-tc a.cart-settlement:hover{
    background:url(../image/cart_tc_money2.png) no-repeat center center;
    background-size:100% 100%;
    display:block;
    height:14px;
}

/*nav-right:foot足迹弹框样式*/
.foot-tc {
    width: 284px;
}

.foot-tc-box {
    padding: 24px 17px 24px 14px;
}

.foot-tc-title {
    text-align: left;
    font-family: "微软雅黑", "Microsoft Yahei";
    font-size: 14px;
    color: #444;
    padding-bottom: 12px;
    border-bottom: solid 1px #bbb;
}

.foot-popup-close {
    background: url(../image/popup_sidenav_close15.png) no-repeat;
    display: inline-block;
    width: 15px;
    height: 15px;
    float: right;
    margin-top: 2px;
    padding-right:5px;
}

.foot-tc-ul {
    padding-top: 15px;
    padding-bottom: 20px;
}

/*css美化滚动条样式*/
/*.foot-tc-ul::-webkit-scrollbar {
	width: 8px;
}
.foot-tc-ul::-webkit-scrollbar-thumb {
	background-color: #ff4400;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.foot-tc-ul::-webkit-scrollbar-track {
	background-color: #808080;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}*/

.foot-ul-li {
    border: solid 1px #bbbbbb;
    padding: 8px 6px 9px 9px;
    margin-bottom: 6px;
}

.foot-ul-li:hover {
    background-color: #dcdcdc;
    border: 1px solid #dcdcdc;
}

.foot-ul-li > a {
    cursor: pointer;
}

.foot-ul-li > a > img {
    margin-right: 12px;
    width: 102px;
    height: 129px;
}

.foot-ul-li > div {
    width: 120px;
    text-align: left;
}

.foot-ul-li .foot-tc-close {
    background: url(../image/cart_close.png) no-repeat center center;
    background-size: 100% 100%;
    display: block;
    width: 15px;
    height: 15px;
    /*cursor: pointer;*/
}

.foot-brand {
    /*font-family:"微软雅黑", 'Microsoft YaHei';*/
    font-weight: bold;
    font-size: 12px;
    color: #222;
    margin-bottom: 4px;
}

.foot-shop {
    font-size: 12px;
    font-family: "微软雅黑", "Microsoft Yahei";
    color: #222;
    line-height: 17px;
}

.foot-shop-name {
    font-weight: bold;
    margin-bottom: 9px;
    width: 96px;
    margin-top: -5px;
}

.foot-price {
    font-family: "NeoSansStd Bold";
    font-size: 12px;
    color: #333;
    margin-top: 13px;
    margin-bottom: 27px;
}

.foot-total {
    height: 23px;
    line-height: 23px;
    padding-top: 11px;
}

.foot-total > span {
    width: 50%;
!important;
    font-family: "微软雅黑", 'Microsoft YaHei';
!important;
}

.foot-total > span:first-child {
    font-size: 12px;
    color: #1f1f1f;
    text-align: left;
}

.foot-total > span:last-child {
    text-align: right;
    font-size: 14px;
    color: #b81c22;
    cursor: pointer;
}

.foot-joinCart {
    padding: 6px 7px 6px 9px;
    background-color: #b81c22;
    color: #fff;
    cursor: pointer;
    text-align: center;
    width: 70px;
    height: 11px;
    line-height: 11px;
}

@media screen and (max-height: 820px) {
    .side-nav .nav li.wz {
        margin-top: 15px;
    }
}

@media screen and (max-height: 700px) {
    .side-nav .nav li.wz {
        margin-top: 20px;
    }

    .side-nav .side-item .nav-title {
        display: none;
    }

    .side-nav .side-item .item-num {
        margin: -25px -20px 0 0;
    }

    .side-nav .nav .nav-centerR {
        margin-top: 10px;
    }
}

@media screen and (max-height: 500px) {
    .side-nav .back-top {
        display: none;
    }
}