/*---- base ----*/
.clear {
    clear: both;
}

* {
    padding: 0;
    margin: 0;
}

em, i, strong, b {
    font-style: normal;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: auto;
}

ol, ul, li {
    list-style: none;
    margin-bottom: 0;
}

img {
    vertical-align: top;
    border: none;
    max-width: 100%;
}

input, textarea, button {
    outline: 0;
    resize: none;
    font-size: inherit;
}

a:link,
a:hover,
a:visited,
a:active,
a:focus {
    text-decoration: none;
    color: inherit;
}

.clear-fix:after {
    content: " ";
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.f-right {
    float: right;
}

.f-left {
    float: left;
}

.ios-switch {
    -webkit-appearance: none;
    background: #e2e2e2;
    width: 48px;
    height: 24px;
    border-radius: 24px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -12px;
}

.ios-switch:focus {
    outline: none !important;
}

.ios-switch:checked {
    background: #9e885d;
}

.ios-switch:before,
.ios-switch:after {
    content: '';
    position: absolute;
    height: 22px;
    left: 1px;
    top: 1px;
    background: #fff;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

.ios-switch:before {
    width: 24px;
    transform: translatex(0);
    -webkit-transform: translatex(0);
    border-radius: 24px;
    border: 1px solid #c3c3c3;
    z-index: 2;
}

.ios-switch:checked:before {
    transform: translatex(22px);
    -webkit-transform: translatex(22px);
    border-color: #ac9968;
}

.ios-switch:after {
    width: 46px;
    border-radius: 24px;
    transform: scale(1);
    -webkit-transform: scale(1);
    z-index: 1;
}

.ios-switch:checked:after {
    transform: scale(0);
    -webkit-transform: scale(0);
}

/*---- header ----*/
.header {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 43px;
    font-size: 15px;
    color: #1f1f1f;
    text-align: center;
    border-bottom: 1px solid #d1c6af;
    background: white;
    background: rgba(255, 255, 255, .95);
}

.header-title {
    line-height: 43px;
    font-size: 12px;
    color: #8c7d5c;
}

.header .back {
    position: absolute;
    left: 0;
    top: 3px;
    padding: 9px 15px;
    width: 40px;
    height: 36px;
    display: block;
}

.header .back:before {
    content: "";
    width: 9px;
    height: 12px;
    background:  no-repeat left top;
    background-size: 8px 12px;
    display: inline-block;
}

.header .home {
    position: absolute;
    right: 0px;
    top: 7px;
    text-align: right;
    width: 57px;
    padding-right: 15px;
    padding-top: 8px;
    height: 26px;
    font-size: 10px;
    color: #8c7d5c;
    display: block;
}
.header .home:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 16px;
    height: 16px;
    background: url(/uploads/image/sltxtwi/goods/ico-nav-new.png) no-repeat left top;
    background-size: 32px 80px;
    display: block;
}


/*---- footer ----*/
.footer-nav {
    position: fixed;
    z-index: 100;
    height: 54px;
    left: 0;
    bottom: 0;
    width: 100%;
    background: white;
    border-top: 1px solid #d9d9d9;
}

.footer-nav .nav-item {
    position: relative;
    padding: 30px 0 0;
    line-height: 24px;
    font-size: 13px;
    color: #4a4a4a;
    text-align: center;
    text-decoration: none;
    display: block;
}

.footer-nav .nav-item.active {
    color: #ff4001;
}

.footer-nav .nav-item:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 7px;
    margin-left: -16px;
    width: 32px;
    height: 24px;
    background: url(/uploads/image/sltxtwi/goods/ico-nav.png) no-repeat;
    background-size: 64px 96px;
    display: block;
}
.footer-nav .nav-item .shopping-num {
    position: absolute;
    left: 50%;
    top: 2px;
    margin-left: 8px;
    height: 16px;
    min-width: 16px;
    text-align: center;
    padding: 0 3px;
    font-size: 11px;
    line-height: 16px;
    color: white;
    background: #ff4001;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    display: none;
}

.footer-nav .nav-category:before {
    background-position: left -24px;
}

.footer-nav .nav-cart:before {
    background-position: left -48px;
}

.footer-nav .nav-ucenter:before {
    background-position: left -72px;
}

.footer-nav .nav-home.active:before {
    background-position: -32px top;
}

.footer-nav .nav-category.active:before {
    background-position: -32px -24px;
}

.footer-nav .nav-cart.active:before {
    background-position: -32px -48px;
}

.footer-nav .nav-ucenter.active:before {
    background-position: -32px -72px;
}


/*---- 新版页脚导航 ----*/
.footer-nav.latest {
    border-color: #d1c6af;
}
.footer-nav.latest .footer-menu {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.footer-nav.latest .nav-item {
    padding: 26px 0 4px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-size: 12px;
    color: #a38d6b;
}
.footer-nav.latest .nav-item:before {
    width: 16px;
    height: 16px;
    top: 8px;
    margin-left: -8px;
    background-image: url(/uploads/image/sltxtwi/goods/main_nav.png);
    background-size: 32px 80px;
}
.footer-nav.latest .nav-cake:before {
    background-position: left -16px;
}
.footer-nav.latest .nav-gift:before {
    background-position: left -32px;
}
.footer-nav.latest .nav-cart:before {
    background-position: left -48px;
}
.footer-nav.latest .nav-ucenter:before {
    background-position: left -64px;
}
.footer-nav.latest .nav-home.active:before {
    background-position: -16px top;
}
.footer-nav.latest .nav-cake.active:before {
    background-position: -16px -16px;
}
.footer-nav.latest .nav-gift.active:before {
    background-position: -16px -32px;
}
.footer-nav.latest .nav-cart.active:before {
    background-position: -16px -48px;
}
.footer-nav.latest .nav-ucenter.active:before {
    background-position: -16px -64px;
}
.footer-nav.latest .nav-item .shopping-num {
    margin-left: 4px;
    height: 14px;
    min-width: 14px;
    line-height: 14px;
    font-size: 10px;
    background-color: #ff4001;
}


/*---- animation ----*/
@keyframes loading {
	from {transform: rotate(0deg)}
	to {transform: rotate(360deg)}
}
@-webkit-keyframes loading {
	from {-webkit-transform: rotate(0deg)}
	to {-webkit-transform: rotate(360deg)}
}


/*---- main ----*/
.main {
    position: relative;
    z-index: 10;
    margin-top: 43px;
    width: 100%;
}

/*---- loading ----*/
.loading {
	position: fixed;
	z-index: 1006;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.5);
}
.loading:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	margin-left: -32px;
	margin-top: -32px;
	background: url(/uploads/image/sltxtwi/goods/loading.png) no-repeat;
	background-size: 64px 64px;
	display: block;
	animation: loading 1.2s infinite ease;
	-webkit-animation: loading 1.2s infinite ease;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
    padding-right: 15px;
    bottom: 5px;
    text-align: right;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 2px;
}

.swiper-pagination-bullet {
    width: 6px;
    height: 6px;
}

.swiper-pagination-bullet {
    background: white;
    opacity: .8;
}
.swiper-pagination-bullet-active {
    background: #a79774;
}

/*---- 甜度 ----*/
.sweet-level {
    display: inline-block;
    font-size: 11px;
    color: #444;
}

.sweet-icon {
    width: 68px;
    height: 11px;
    background-image: ;
    background-repeat: no-repeat;
    background-size: 65px 11px;
    display: inline-block;
    vertical-align: -2px;
}

.sweet-0 {
    background-position: -65px top;
}

.sweet-1 {
    background-position: -52px top;
}

.sweet-2 {
    background-position: -39px top;
}

.sweet-3 {
    background-position: -26px top;
}

.sweet-4 {
    background-position: -13px top;
}

.sweet-5 {
    background-position: left top;
}

/*---- goods specif ----*/
.goods-specif {
    position: relative;
    padding-left: 24px;
    height: 16px;
    line-height: 16px;
    color: #515151;
    font-size: 11px;
    display: inline-block;
    white-space: nowrap;
}
.goods-flavor {
    position: relative;
    height: 16px;
    line-height: 16px;
    color: #515151;
    font-size: 11px;
    display: inline-block;
    white-space: nowrap;
}

.goods-specif:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 16px;
    background:  no-repeat;
    background-size: 18px 75px;
    display: inline-block;
}

.goods-specif.goods-size:before {
    background-position: left -16px;
}

.goods-specif.goods-peoples:before {
    background-position: left -32px;
}

.goods-specif.goods-weight:before {
    background-position: left -48px;
}

.promotion {
    position: relative;
    font-size: 11px;
    color: #ff4001;
}
.promotion > span:first-child,    
.goods-mark {
    padding: 2px 4px;
    height: 14px;
    font-size: 10px;
    line-height: 11px;
    color: white;
    background: #ff4001;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    display: inline-block;
}

/*---- city selector ----*/
.city-selector {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.city-selector .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: .6;
}

.cities-modal {
    position: absolute;
    left: 50%;
    top: 105px;
    width: 270px;
    margin-left: -135px;
    background: white;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.cities-header,
.cities-content {
    padding: 12px 18px;
}

.cities-header p {
    margin: 0;
    font-size: 14px;
    color: #9b9b9b;
}

.cities-header p > span {
    font-size: 16px;
    color: #4a4a4a;
}

.cities-content {
    background: #f5f5f5 url(/uploads/image/sltxtwi/goods/bg-cities.png);
    background-size: 271px auto;
    border-radius: 0px 0px 4px 4px;
}

.cities-content .cities {
    width: 270px;
    margin-left: -18px;
}

.cities-heading {
    margin: 0;
    padding: 5px 0 12px;
    text-align: center;
    font-size: 15px;
    color: #4a4a4a;
}

.cities-modal h3 {
    margin: 0 0 10px;
    font-size: 14px;
    color: #9b9b9b;
}

.cities-modal .city-item {
    margin-bottom: 5px;
    padding: 3px 0;
    float: left;
    width: 25%;
    font-size: 14px;
    white-space: nowrap;
    color: #515151;
    text-align: center;
    display: block;
    text-decoration: none;
}

.cities-modal .city-item.active {
    color: #a38d6b;
}

.cities-modal .btn-wrap {
    padding: 12px 0;
    width: 100%;
    text-align: center;
}

.cities-modal .btn-choose-city {
    width: 92px;
    font-size: 16px;
    height: 32px;
    color: white;
    background: #ff4001;
    display: inline-block;
    border: none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}

.cities-modal .btn-choose-city:disabled {
    background: #a1a1a1;
}


/*---- lecake dialog ----*/
.lecake-dialog {
	position: fixed;
	z-index: 1006;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.lecake-dialog .dialog-mask {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: .6;
}
.lecake-dialog .dialog-content {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 280px;
	margin-left: -140px;
	margin-top: -100px;
	background: white;
	background: rgba(255,255,255,.95);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	overflow: hidden;
}
.lecake-dialog .dialog-message {
	margin: 0;
	padding: 32px 20px;
	font-size: 12px;
	color: #4a4a4a;
}
.lecake-dialog .dialog-footer {
	position: relative;
	border-top: 1px solid #e1dbcc;
	height: 40px;
}
.lecake-dialog .dialog-button {
	position: absolute;
	top: 0;
	width: 50%;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	color: #8c7d5c;
	background: white;
	background: rgba(255,255,255,.95);
	display: block;
	border: none;
}
.lecake-dialog .dialog-button.full {
    width: 100%;
}
.lecake-dialog .dialog-button.hide {
    display: none;
}
.lecake-dialog .dialog-button.cancel {
	left: 0;
    border-right: 1px solid #e1dbcc;
}
.lecake-dialog .dialog-button.confirm {
	right: 0;
}

/*---- go top ----*/
.go-top {
    position: fixed;
    z-index: 1000;
    right: 15px;
    bottom: 75px;
    width: 40px;
    height: 40px;
    background: url(/uploads/image/sltxtwi/goods/ico-top.png) no-repeat;
    background-size: 40px 40px;
    display: block;
    visibility: visible;
}

.go-top.hide {
    visibility: hidden;
}

/*---- popup layer ----*/
.popup-layer .modal-content {
    box-shadow: none;
    border-radius: 0;
}

.popup-layer h4.modal-title {
    font-size: 15px;
    color: #380d06;
}

.popup-layer .modal-body .form-group {
    margin-bottom: 0;
}

.popup-layer .modal-body {
    padding: 10px 20px;
}

.popup-layer .modal-body p {
    font-size: 12px;
    color: #000;
    margin-bottom: 5px;
}

.popup-layer .modal-body p.price {
    font-size: 18px;
    color: #cf0000;
    margin-bottom: 0px;
}

.popup-layer .modal-body .clean-input {
    width: 23px;
    height: 23px;
    background: url(/uploads/image/sltxtw/images/close-btn.png) no-repeat;
    background-size: 100%;
    margin-top: -30px;
    margin-right: 10px;
}

.popup-layer .modal-body span.error-msg {
    font-size: 12px;
    color: #eb6c73;
}

.popup-layer .modal-footer {
    text-align: center;
    border-top: 0;
    margin: 0;
    padding: 10px 20px;
}

.popup-layer .modal-footer .popup-btn-wrap {
    width: 50%;
    margin-left: 25%;
}

.popup-layer .modal-footer .pull-left {
    padding-left: 0;
}

.popup-layer .modal-footer .pull-right {
    padding-right: 0;
}

.popup-layer .shopping-cart-img {
    width: 99px;
    height: 66px;
    border: 1px solid #444;
}

.popup-layer .close {
    color: #380d06;
    font-size: 12px;
    opacity: 1;
    margin-top: 5px;
}

.popup-layer .btn {
    margin: 12px 2px;
    width: 100%;
    line-height: 24px;
    height: 36px;
    text-shadow: none;
}

.popup-layer .add-shopping-cart {
    background: white;
    border: 1px solid #ff4001;
    color: #ff4001;
}

.popup-layer .buy-btn {
    background: #ff4001;
    border: none;
    color: white;
}

#udesk_btn > a {
    z-index: 100 !important;
    margin: 0;
    padding: 10px 12px;
}
#udesk_btn > a img {
    width: 22px;
    height: 20px;
}
#udesk_panel {
    top: 0 !important;
}

/*---- 购物车效果 ----*/
@keyframes cart-anim {
    from { transform: rotate(0deg) }
    to { transform: rotate(-180deg) }
}
@keyframes goods-anim {
    0% { transform: rotate(0deg) scale(.5); opacity: 0; }
    50% { transform: rotate(-1000deg) scale(1); opacity: 1; }
    100% { transform: rotate(-1200deg) scale(.5); opacity: .5; }        
}
@-webkit-keyframes cart-anim {
    from { -webkit-transform: rotate(0deg) }
    to { -webkit-transform: rotate(-180deg) }
}
@-webkit-keyframes goods-anim {
    0% { -webkit-transform: rotate(0deg) scale(.5); opacity: 0; }
    50% { -webkit-transform: rotate(-1000deg) scale(1); opacity: 1; }
    100% { -webkit-transform: rotate(-1200deg) scale(.5); opacity: .5; }        
}
.cart-effect {
    position: fixed;
    z-index: 1000;
    bottom: 30px;
    left: 15%;
    width: 51%;
    height: 30px;
    animation: cart-anim 1s ease;
    animation-fill-mode: forwards;
    -webkit-animation: cart-anim 1s ease;
    -webkit-animation-fill-mode: forwards;
}
.cart-effect .goods-img {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;   
    overflow: hidden;
    transform: translate(0,0) scale(.5);    
    animation: goods-anim 1s ease;
    animation-fill-mode: forwards;
    -webkit-transform: translate(0,0) scale(.5);    
    -webkit-animation: goods-anim 1s ease;
    -webkit-animation-fill-mode: forwards;
}
.cart-effect .goods-img img {
    position: absolute;
    left: 50%;
    top: 0;
    height: 30px;
    width: auto;
    transform: translatex(-50%);
    -webkit-transform: translatex(-50%);
}