@charset "utf-8";
/* CSS Document */
img { width:100%;}

.teaspecies { background:#fff; margin-top:15px;}
.teaspecies ul { display:-webkit-box; padding:0.2rem; box-sizing:border-box;}
.teaspecies ul li { text-align:center;-webkit-box-flex: 1.0; -webkit-flex-grow: 1; flex-grow: 1; font-size:0.35rem;}
.teaspecies ul li a { display:block;padding:0.2rem; box-sizing:border-box; max-width:70px; margin: 0 auto;}
.teaspecies ul li img { width:100%;}
.teaspecies ul li span { margin-top:8px; display:block; white-space: nowrap;}


.tm_level { display:-webkit-box; overflow:hidden; border-top:1px solid #f4f4f4;}
.tm_level a { display:block; -webkit-box-flex: 1;-ms-flex: 1;flex: 1; position:relative;}
.tm_level a:before { content:""; position:absolute; z-index:2; right:-1px; top:0; height:100%; border-left:1px solid #f4f4f4;}
.tm_level a img { width:100%;}

.group { background:#fff; margin-top:15px;}
.group > .title { text-align:center; padding:0.5rem 0;}
.group .title span{ color:#b0352f; height:30px; line-height:30px; font-size:0.4rem; padding:5px 15px;}
.group .title em { display: inline-block; border-radius:10px; width:0.18rem; height:0.45rem;}
.group .title em:nth-child(1){ background:#f4d2d1;-webkit-transform: translate3d(0,0.08rem,0) rotateZ(135deg); margin-right:15px;}
.group .title em:nth-child(2){ background:#cc1717;-webkit-transform: translate3d(0,0.08rem,0) rotateZ(135deg);}
.group .title em:nth-child(4){ background:#cc1717;-webkit-transform: translate3d(0,0.08rem,0) rotateZ(45deg);}
.group .title em:nth-child(5){ background:#f4d2d1;-webkit-transform: translate3d(0,0.08rem,0) rotateZ(45deg); margin-left:15px;}


/*预售*/
.yushou {border-bottom: 15px solid #f3f3f3;}
.yushou:last-of-type { border-bottom:0;}
.yushou .pic { position:relative;}
.yushou .pic .name {position:absolute;bottom:0;width:100%;z-index:2;background:rgba(0,0,0,0.6);box-sizing:border-box;height:1rem;line-height:1rem;color:#fff;font-size:0.4rem;-webkit-box-orient: vertical;-webkit-box-pack: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.yushou .pic .name i {vertical-align: middle;margin:0 5px;font-size: 0.3rem;height: 0.4rem;line-height: 0.4rem;border-radius:20px;padding: 0 5px;color:#fff; margin-top:1px;}
.yushou .pic .name i.lv1 { background:#e0774e; border:1px solid #e0774e;}
.yushou .pic .name i.lv2 { background:#d4b05d; border:1px solid #d4b05d;}
.yushou .pic .name i.lv3 { background:#abae77; border:1px solid #abae77;}
.yushou .pic .name span {max-width:8rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;line-height: 0.4rem;height: 0.4rem; margin-top:1px;}
.yushou .pic .name em {color:#af8e76;font-size:0.3rem;border:1px solid #af8e76;border-radius:15px;padding:0 5px;margin: 0 5px 0 0;vertical-align: middle;height: 0.4rem;line-height: 0.4rem;}
.yushou .pricebd { padding:20px 10px; border-bottom:1px solid #f4f4f4;}
.yushou .pricebd { display: -webkit-box; height:0.7rem; line-height:0.7rem;}
.yushou .pricebd .price {-webkit-box-flex: 1; font-size:0.35rem;}
.yushou .pricebd .price .new-price { display:inline-block; color:#555555;white-space: nowrap;}
.yushou .pricebd .price .new-price span{ color:#b0352f;}
.yushou .pricebd .price .new-price b{ color:#b0352f; font-size:0.6rem;}
.yushou .pricebd .price .old-price { display:inline-block; color:#999999;white-space: nowrap;}
.yushou .pricebd .gobuy { background:#b0352f; color:#fff; padding:0 15px; border-radius:20px; font-size:0.4rem;}
.yushou .pricebd .yure { background:#ffac13; color:#fff; padding:0 15px; border-radius:20px; font-size:0.4rem;}
.yushou .pricebd .jieshu { background:#bbbbbb; color:#fff; padding:0 15px; border-radius:20px; font-size:0.4rem;}
.yushou .percent { width: 100%; box-sizing: border-box; padding:0 .2rem; height:1.05rem;}
.yushou .percent .line-wapper { position: relative; padding-top: .4rem;}
.yushou .percent .line-wapper .line { position: absolute; z-index: 3; min-width: .9rem!important; left: 0; height: .25rem; background: #d7be67; border-radius: .21333333rem;}
.yushou .percent .line-wapper .line .circle { position: absolute; right: 0; top: -.12rem; width: .9rem; height: .44rem; line-height: .44rem; vertical-align: middle; text-align: center; background-color: #fff; border: solid #d7be67 .04rem; border-radius: 1rem; color: #d7be67; font-size: .3rem; box-shadow:0px 1px 1px rgba(0,0,0,0.2)}
.yushou .percent .line-wapper .line .circle p { display: inline; color: #d7be67; font-size: .3rem; text-align: center; font-weight:bold;}
.yushou .percent .line-wapper .line .circle p span { font-size:10px; font-weight:normal;}
.yushou .percent .line-wapper .line-bg { z-index: 2; position: absolute; width: 100%; left: 0; height: .25rem; background-color: #eaeaea; border-radius: .21333333rem;}
.yushou .single-b { margin:0 .2rem;}
.yushou .single-b li { float: left; width: 33.33333%; padding:.2rem 0; position: relative;}
.yushou .single-b li .p1 { color: #555555; font-size: 18px; text-align: center;}
.yushou .single-b li .p1 span { font-size: 18px;}
.yushou .single-b li .p1 i { font-size: 18px;}
.yushou .single-b li .p2 { text-align: center; margin-bottom:10px; line-height: 0.36rem;}
.yushou .single-b li .p2 span { color: #999999; font-size: 0.36rem;}
.yushou .single-b li .border { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: .46666667rem; background-color: #d9d9d9;}




/*热门茶师*/
.hotcs .bigpic{ position:relative; display:block;}
.hotcs .bigpic .more { position:absolute; right:5px; bottom:5px; color:#999999; padding-right:12px; padding-left:2px; background:rgba(0,0,0,.8); border-radius:3px;}
.hotcs .bigpic .more:before {
    content: "";
    position: absolute;
    right:5px;
    top: 50%;
	margin-top:-2px;
    width: 8px;
    height: 8px;
    border-left: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: translate3d(0,-50%,0) rotateZ(135deg);
    -webkit-transform: translate3d(0,-50%,0) rotateZ(135deg);
}
.hotcs .pd_bd { padding:10px 0; margin:0 10px; position:relative; display:block;}
.hotcs .pd_bd:before { content: ''; height:1px; width: 100%; border-top: 1px solid #e7e7e7; position: absolute; left:0; bottom:-1px; transform: scaleY(.5); -webkit-transform: scaleY(.5); z-index: 10;}
.hotcs .pd_bd:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;clear:both}
.hotcs .pd_bd .pic { float:left; width:3rem; box-sizing:border-box;}
.hotcs .pd_bd .pic img{ width:100%;}
.hotcs .pd_bd .pd_bdxx { height:3rem; padding-left:12px; margin-left:3rem; font-size:0.36rem; display:block; position:relative;}
.hotcs .pd_bd .pd_bdxx .pd_title { padding-bottom:5px; overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; font-weight:bold; color:#555555; font-size: 0.4rem;}
.hotcs .pd_bd .pd_bdxx .pd_des {  padding-bottom:5px; color:#999999; display: block;}
.hotcs .pd_bd .pd_bdxx .pd_price { color:#b0352f; position:absolute; bottom:0;}
.hotcs .pd_bd .pd_bdxx .pd_price b { font-size:0.6rem;}
.hotcs .pd_bd .pd_bdxx .pd_price em { color:#999999; margin-left:5px;}



/*推荐茶师*/

.cs_item { border-top:1px solid #f4f4f4; background:#fff; border-bottom:1px solid #f4f4f4; margin-top:-2px;}
.cs_info {display: box; display: -webkit-box; padding:10px;}
.cs_info .face{ width:2rem; height:2rem; overflow:hidden; display:block; border:2px solid #cccccc; border-radius:50%; }
.cs_info .face img { border-radius:50%; width:100%;}
.cs_info .person-info { font-size:0.36rem; -webkit-box-flex: 1; box-flex: 1; -webkit-box-pack: center; -webkit-flex-direction: column; flex-direction: column; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width:70%;}
.cs_info .person-info { padding-left:15px;}
.cs_info .person-info .name {}
.cs_info .person-info .name p { font-size:20px; line-height:20px; overflow:hidden; display:block;vertical-align: middle; padding-bottom:5px;}
.cs_info .person-info .name i { overflow:hidden; display:inline-block; border-radius:0.8rem; padding:0px 8px; box-sizing: border-box; vertical-align: middle; color:#fff; font-size:12px;}
.cs_info .person-info .name i.lv1 { background:#e0774e; border:1px solid #e0774e;}
.cs_info .person-info .name i.lv2 { background:#d4b05d; border:1px solid #d4b05d;}
.cs_info .person-info .name i.lv3 { background:#abae77; border:1px solid #abae77;}
.cs_info .person-info .name em{ overflow:hidden; display:inline-block; border-radius:0.8rem; padding:0px 8px; margin-left:5px;  box-sizing: border-box; vertical-align: middle;font-size:12px;}
.cs_info .person-info .name em.lc{ color:#98b14f; border:1px solid #98b14f;}
.cs_info .person-info .name em.hc{ color:#b84941; border:1px solid #b84941;}
.cs_info .person-info .name em.tgy{ color:#687c9d; border:1px solid #687c9d;}
.cs_info .person-info .name em.dhp{ color:#67635f; border:1px solid #67635f;}
.cs_info .person-info .name em.bc{ color:#d9d2bd; border:1px solid #d9d2bd;}
.cs_info .person-info .name em.pe{ color:#96776a; border:1px solid #96776a;}
.cs_info .person-info .introduce{ color:#af8e76; padding-top:5px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.cs_info .focus { width:80px; -webkit-box-pack: center; -webkit-flex-direction: column; flex-direction: column; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center;}
.cs_info .focus span { font-size:14px; color:#555555; border-radius:20px; padding:2px 5px; text-align:center; display: inline-block; box-sizing:border-box;}
.cs_info .focus span i { color:#555555; position: relative; top: -1px; }
.cs_item .par { border-top:1px dashed #999999; padding:10px 0 10px 25px; position:relative; margin:0 10px;}
.cs_item .par:before { content:''; position:absolute; left:1px; top:0.4rem; width:0.3rem; height:20px; background: url(http://imgcon.tea7.com/6363564873439040557004731.png) left top no-repeat; background-size:contain;}
.cs_item .par p{ text-align:justify; text-justify: inter-ideograph; font-size:0.36rem; line-height:1.5;}
.cs_info .focus span a.morebtn{ display:block; color:#333; position:relative; border-radius:20px;}
.cs_info .focus span a.morebtn em { position: absolute; right:-8px; top:-8px; display: block; padding: 2px 4px; font-size: 12px; background-color: #b54f4a; color: #fff; border-radius: 40px; line-height: 1;}


/*--没有更多--*/
.gray-text {
    position: relative;
    display: -webkit-box;
    margin: 0.5rem;
    color: #cbcbcb;
    font-size: 0.4rem;
    -webkit-box-pack: center;
}
.gray-layout {
    padding: 0 10px;
    background-color: #f5f5f5;
    z-index: 10;
    position: relative;
    display: block;
}
.gray-text:after {
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #cbcbcb;
    -webkit-transform: scaleY(0.5);
}



.tmbtm-btn { text-align:center; margin:10px 0;}
.tmbtm-btn a { text-align: center; padding: 5px 15px; border: 1px solid #b0352f; border-radius: 20px; font-size:14px; box-sizing: border-box; color: #b0352f; display: inline-block; margin: 10px;}
.tmbtm-btn img { width:1.2em; height:1.2em; margin-right:5px; position:relative; top:-1px;}


/*茶师介绍页-------*/

.tm_person_info { position:relative; background:#fff; padding-bottom:10px; margin-bottom:15px;}
.tm_person_info .back_btn { position:absolute; left:10px; top:10px; z-index:2;}
.tm_person_info .back_btn a { display:block; font-size:18px; height:44px; width:44px; line-height:42px; text-align:center; color:#fff; background:rgba(0,0,0,0.7); border-radius:50%;}
.tm_person_info .bg { position:relative;}
.tm_person_info .follow_btn { position:absolute; right:10px; bottom:10px; background:rgba(255,255,255,0.8); border:1px solid rgba(51,51,51,0.8); display:-webkit-box; display:-webkit-flex; display:flex; justify-content:center; align-items:center; padding:5px 13px; border-radius:25px; font-size:0.35rem;}
.follow_btn span { margin:0 2px;}
.follow_btn .icon{ width:0.35rem; height:0.35rem; background:url(http://imgcon.tea7.com/6363743980206050764650487.png) center center no-repeat; background-size:contain;}
.tm_person_info .headpic { position:absolute; width:3rem; bottom:-1.5rem; left:50%; margin-left:-1.5rem; border:3px solid #fff; border-radius:50%; overflow:hidden; box-shadow:0px 5px 10px rgba(0,0,0,0.2);}
.tm_person_info .name { text-align:center; margin-top:1.8rem; font-size:0.5rem;}
.tm_person_info .label {display:-webkit-box; display:-webkit-flex; display:flex; justify-content:center; align-items:center; padding:0 10px; margin-top:5px;}
.tm_person_info .label i, .tm_person_info .label span {  font-size: 14px;height: 14px; line-height: 14px; border-radius:20px; padding:3px 10px;margin: 5px;}
.tm_person_info .label i { color:#fff;}
.tm_person_info .label i.lv1 { background:#e0774e; border:1px solid #e0774e;}
.tm_person_info .label i.lv2 { background:#d4b05d; border:1px solid #d4b05d;}
.tm_person_info .label i.lv3 { background:#abae77; border:1px solid #abae77;}
.tm_person_info .label span.lc{ color:#98b14f; border:1px solid #98b14f;}
.tm_person_info .label span.hc{ color:#b84941; border:1px solid #b84941;}
.tm_person_info .label span.tgy{ color:#687c9d; border:1px solid #687c9d;}
.tm_person_info .label span.dhp{ color:#67635f; border:1px solid #67635f;}
.tm_person_info .label span.bc{ color:#d9d2bd; border:1px solid #d9d2bd;}
.tm_person_info .label span.pe{ color:#96776a; border:1px solid #96776a;}
.tm_person_info .subtitle { text-align:center; color:#d7be67; margin-top:5px; padding:0 10px; font-size:0.386rem;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

.tm_jstab { background:#fff; }
.tm_jstab ul { display:-webkit-box; display:-webkit-flex; display:flex; justify-content:center; align-items:center; border-bottom:1px solid #f4f4f4;}
.tm_jstab ul li{ position:relative; padding:10px 5px; font-size:0.386rem; margin:0 15px;}
.tm_jstab ul li.active:after { position:absolute; content:""; bottom:0; left:0; width:100%; height:2px; border-bottom:2px solid #b0352f;}
.tm_jstab ul li.zuopin:before { position: absolute; right: -.2rem; top: -.133333rem; line-height: 1; background-color: #b0352f; color: #fff; border-radius: .32rem;  padding: .053333rem .133333rem; content: attr(attr-quantity); font-size: .266667rem;}
.tm_js_wrap { margin-bottom:15px;}
.pd_wrap { padding:10px; background:#fff;}

.b_product { display:block; padding:10px; background:#fff;}
.b_product .pic { position:relative;}
.b_product .pic .shouqing { position: absolute; width: 2rem; height: 2rem;display: block; left: 50%; margin-left: -1rem; top: 50%; margin-top: -1rem; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.5); line-height: 2rem; border-radius: 50%; font-size: 0.5rem; text-shadow: 0px 1px 2px rgba(0,0,0,1);}
.b_product .name { padding:10px 0; font-size:0.4rem;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.b_product .txt { color:#999; font-size:0.34rem; overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.b_product .price { padding:8px 0 0; font-size:0.34rem;}
.b_product .price > span { color:#b0352f;}
.b_product .price > span b { font-size:0.5rem;}
.b_product .price > span.fs { color:#999; margin-left:5px;}



/*茶师等级分类页*/
.tmbarheader {}
.tmbarheader .bd{ position:relative; background-color: #b0352f; height: 44px; line-height: 44px; z-index:9;}
.tmbarheader .bd a { display: block; width: 44px; height: 44px; text-align:center; color: #fff; font-size: 18px;}
.tmbarheader .bd h2 { font-size:16px; color:#fff; position:absolute; top:50%; width:100px; max-width:50%; left: 50%;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background:rgba(0,0,0,0.2); border-radius:10px; box-sizing:border-box; padding:0 22px 0 10px; height:24px; line-height:24px; text-align:center;}
.tmbarheader .bd h2:before {
	width: 0;
    height: 0;
    content: "";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    position: absolute;
    top:9px;
    right:10px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: transform .3s ease-in-out; -webkit-transition: transform .3s ease-in-out;
}
.tmbarheader .bd h2.show:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.category-list {
    position: absolute;
    width: 100%;
	max-width:640px;
    background: #fff;
    top: 44px;
    overflow: hidden;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
    transition-timing-function: cubic-bezier(.1,.57,.1,1);
    transition-duration: .3s;
	z-index:8;
}
.category-list.show {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.category-list ul li { position:relative; padding-left:15px; height:44px; line-height:44px;}
.category-list ul li:not(:last-child):after {
    position: absolute;
    content: "";
    bottom: 0;
    left:15px;
    right: 0;
    height: 1px;
    background-color: #ddd;
}
.overlay {
    position: fixed;
	width:100%;
	height:100%;
    z-index:2;
    top: 0px;
    left: 0;
    bottom: 0px;
    right: 0;
    background-color: rgba(0,0,0,.6);
	transition-duration: 0.2s;
	opacity:0;pointer-events:none;
}
.overlay.show { opacity:1;pointer-events:auto;}
.tm_level_list { margin-top:5px;}
.tm_level_list .cs_item { margin-bottom:15px;}


/*----------------*/
.tm-list-nav { border-bottom: 1px solid #ddd; background:#fff; width:100%; overflow:hidden;}
.tm-list-nav ul { height:40px;transition-property: transform; transform-origin: 0px 0px 0px;}
.tm-list-nav li { float:left;height:40px; line-height:40px;
    padding:0 15px;
    text-align: center;
    font-size: 16px;
    background: #fff;
}
.tm-list-nav li.active {
    color: #b0352f;
    border-bottom: 2px solid #b0352f;
}
.fix-list-nav-fixed {position: fixed;
    box-shadow: 0px 0px 0px #ABABAB;
    left: 0px;
    right: 0;
    top: 0px;
    width: 100%;
    z-index: 3;
    max-width: 640px;
    margin: 0px auto;
    border-top: 0px solid #ddd;}