@charset "utf-8";
body{ background-color: #f2f2f2; color: #333; line-height: 24px; font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;}
body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0);}
div{ display: block; }
li {list-style: none;}
a{ text-decoration: none; }
.bg-white{ background-color: #fff !important; }
.pull-left{ float: left;}
.pull-right{ float: right;}
.m-left{ width: 880px; }
.m-right{ width: 300px; }
.align-center{ text-align: center; }
.layui-clear{ clear: both; *zoom: 1;}
.layui-clear:after{ content: '\20'; clear: both; *zoom: 1; display: block; height: 0;}
.layui-nav .layui-nav-item {position: relative;display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;line-height: 60px;}
.layui-form-item {margin-bottom: 15px;clear: both;*zoom: 1;}
.layui-form-pane .layui-input {border-radius: 0 2px 2px 0;}
.layui-input, .layui-textarea {display: block;width: 100%;padding-left: 10px;}
.layui-input, .layui-select, .layui-textarea {height: 38px;line-height: 1.3;line-height: 38px\9;border-width: 1px;border-style: solid;background-color: #fff;border-radius: 2px;box-sizing: border-box;}
.layui-textarea{border-color: #eee;position:relative;outline:0;-webkit-appearance:none;transition:all .3s;-webkit-transition:all .3s;box-sizing:border-box; min-height: 100px; height: auto; line-height: 20px; padding: 6px 10px; resize: vertical;}
.layui-textarea:hover{ border-color: #eee !important;}
.layui-textarea:focus{ border-color:#d2d2d2!important;}
.layui-form-pane .layui-form-label {width: 110px;padding: 8px 15px;height: 38px;line-height: 20px;border-width: 1px;border-style: solid;border-radius: 2px 0 0 2px;text-align: center;background-color: #FBFBFB;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;box-sizing: border-box;}
.layui-form-label {float: left;display: block;padding: 9px 15px;width: 80px;font-weight: 400;line-height: 20px;text-align: right;}

.layui-btn{ height: 38px; line-height: 38px; border: 1px solid transparent;  padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border-radius: 2px; cursor: pointer; }
.contaninter{ width: 1200px; margin: 0 auto; clear: both;}
/* 顶部导航*/
.top-nav{ background-color: #f2f2f2; border-bottom: 1px solid #eaeaea; font-size: 12px; height: 32px; line-height: 32px;}
.top-nav .text span{ padding-left: 15px;  color: #7300ab; position: relative;}
.top-nav .text span i{ padding-right: 5px; }
.top-nav .text span .layui-icon{ font-size: 14px; }
.top-nav .text span:hover .app{ display: block; }
.top-nav .app{ display: none; position: absolute; top: 32px; left: 0; z-index: 10;}
.top-nav .layui-nav{ background-color: transparent;}
.top-nav .layui-nav *{ font-size: 12px;}
.top-nav .layui-nav .layui-nav-item{ line-height: 32px; }
.top-nav .layui-nav .layui-nav-item a{ color: #333; padding: 0 10px;}
.top-nav .layui-nav .layui-nav-item a:hover, .top-nav .layui-nav .layui-this a{ color: #7300ab; }
.top-nav .layui-nav .layui-this:after, .top-nav .layui-nav-bar, .top-nav .layui-nav-tree .layui-nav-itemed:after{ height: 0;}
.top-nav .layui-nav .layui-nav-more{ border-color: #666 transparent transparent; right: -8px;}
.top-nav .layui-nav .layui-nav-mored, .layui-nav-itemed>a .layui-nav-more{ border-color: transparent transparent #666;}
.top-nav .layui-nav-child{ background-color: #f2f2f2; border-top: 0 none; top: 32px; line-height: 28px;}

/* 头部logo+搜索*/
.head{ margin: 15px 0 10px;}
.head .logo{ position: relative; }
.head .logo img{ width: 185px; }
.head .logo span{ position: absolute; bottom: 10px; left: 210px; height: 40px; text-indent: -9999px;}
.head .logo .link-cart{ background: url("../images/cart-icon.png"); width: 80px;}
.head .logo .link-login{ background: url("../images/login-icon.png"); width: 110px;}
.head .search{ display: inline-block; float: left; margin-top: 20px;}
.head .search .layui-form-item{ margin-bottom: 5px; display: inline-block; width: 100%;}
.head .search .layui-form-pane .layui-input-block{ margin: 0; right: -2px; left: 1px; float: left; width: 400px;}
.head .search .layui-form-pane .layui-input-block .layui-input, .head .search .layui-input:hover, .layui-textarea:hover{ border-color: #333 !important; }
.head .search .layui-form-label{ background-color: #333; border: 1px solid #333; color: #fff; border-radius: 0 4px 4px 0; width: 60px; }
.head .search .layui-form-label i{ font-size: 18px; }
.head .search ul li{ float: left; padding-right: 10px; color: #999;}
.head .search ul li a{ font-size: 12px; color: #999;}
.head .cart{ display: inline-block; float: left; margin: 20px 0 0 20px; position: relative;}
.head .cart a{ background-color: #333;  border-radius: 4px; color: #fff; display: inline-block; padding: 0 15px; height: 38px; line-height: 38px;}
.head .cart a:hover{ color: rgba(255, 255, 255, .9)!important; }
.head .cart a i{ padding-right: 5px; }
.head .cart a .cart-hotword{ cursor: pointer; overflow: hidden; position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; color: #fff; background-color: #f42f2f; border-radius: 100%;}

/* 导航*/
.wrap-nav{ border-bottom: 2px solid #6f00af; position: relative;z-index: 9;}
.wrap-nav .contaninter{ position: relative;}
.wrap-nav .h-list ul{ padding-left: 190px; }
.wrap-nav .h-list li{ height: 39px; line-height: 39px; float: left;}
.wrap-nav .h-list li a{ padding: 0 28px 0 28px; font-size: 15px; font-weight: bold;color: #6f00af;}
.wrap-nav .h-list li a:hover{ color: #7300ab;}
.wrap-nav .h-list li .icon-hot{ background-position: 0 -240px; width: 29px; height: 17px; position: absolute; top: -10px; left: 324px;}
.wrap-nav .nav{ position: absolute; top: 0; left: 0; width: 190px;}
.wrap-nav .nav .classify{ background-color: #6f00af; color: #fff; cursor: pointer; display: flex; align-items: center; font-size: 16px; padding: 0 10px; height: 39px; line-height: 39px;}
.wrap-nav .nav .classify i{ font-size: 18px; padding-right: 5px;}
.wrap-nav .nav .classify i.f-icon-list{ background-position: 10px -324px; background-size: 150%; width: 30px; height: 38px;}
.wrap-nav .s-list{ background-color: rgba(111, 0, 175, 0.8); box-shadow: 4px 2px 5px rgba(0, 0, 0, 0.3); height: 450px;}
.wrap-nav .s-list li.s-item{ border-top: 1px #b253c3 solid; padding: 10.7px 9px; }
.wrap-nav .s-list li.s-item.hover{ background-color: #fff; }
.wrap-nav .s-list li.s-item.hover p, .wrap-nav .s-list li.s-item.hover p a{ color: #666; }
.wrap-nav .s-list li.s-item.hover h2{ color: #333; }
.wrap-nav .s-list h2{ font-size: 16px; color: #fff; display: flex; align-items: center; justify-content: space-between;}
.wrap-nav .s-list h2 .layui-icon{ font-size: 14px; }
.wrap-nav .s-list p{ line-height: 20px; margin-top: 5px; color: #fff;}
.wrap-nav .s-list p a{ font-size: 13px; color: #ebc9ff; padding-right: 5px;}

.wrap-nav .s-list li.s-item.hover .model-nav{ display: block; }
.wrap-nav .s-list .model-nav{ background-color: #fff; display: none; width: 798px; height: 448px; /*box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);*/ border: 1px solid #ddd; position: absolute;top: 39px;z-index: -1;left: 190px;overflow: hidden;}
.wrap-nav .s-list .model-nav .model-main{ width: 530px; padding: 0px 20px 500px 20px; border-right: 1px solid #ddd; float: left;}
.wrap-nav .s-list .model-nav .model-main .model-top{ font-size: 16px; border-bottom: #e5e5e5 1px solid;}
.wrap-nav .s-list .model-nav .model-main dl{ padding: 10px 7px; border-bottom: 1px solid #e5e5e5; overflow: hidden;}
.wrap-nav .s-list .model-nav .model-main dl dt{ width: 90px; font-size: 12px; color: #333; line-height: 22px; font-weight: 700; float: left;}
.wrap-nav .s-list .model-nav .model-main dl dd{ line-height: 22px;overflow: hidden;}
.wrap-nav .s-list .model-nav .model-main dl dd a{ color: #666;font-size: 12px;margin: 0 5px 0 5px;float: left;display: inline;white-space: nowrap;width: 75px;}

.wrap-nav .s-list .model-nav .model-side{ width: 217px;padding-top: 5px;padding-left: 10px;float: left;}
.wrap-nav .s-list .model-nav .model-side .model-top{ height: 30px;line-height: 30px;padding-left: 4px;color: #333333;}
.wrap-nav .s-list .model-nav .model-side .model-brand{ display: inline-block; margin: 5px 0 10px 4px;}
.wrap-nav .s-list .model-nav .model-side .model-brand li{ border: 1px solid #eee; margin: -1px 0 0 -1px; padding: 0;float: left;}

/* banner轮播*/
.flexslider{ margin: 0px auto; position: relative; width: 100%; height: 448px;}
.flexslider .slides li{ width: 100%; height: 100%;}
.flexslider .slides li img { width: 100%; height: 448px; display: block;}
.flex-control-nav{ width: 100%; position: absolute; bottom: 10px; text-align: center;}
.flex-control-nav li{ margin: 0 2px; display: inline-block; background-color: rgba(255,255,255,.5); border-radius: 50%;text-indent: -99em;width: 10px;height: 10px;cursor: pointer;}
.flex-control-nav li.active{ background-color: #fff;}

/*tab切换*/
.hotspot{ padding-top: 30px; margin-bottom: 30px; }
.hotspot .hotspot-title{ font-size: 20px; color: #252a33; font-weight: 500; line-height: 24px;}
.hotspot .hotspot-list{ display: flex; flex-flow: row nowrap; height: 80px; line-height: 80px;}
.hotspot .hotspot-list li{ background-color: #fafafa; box-sizing: border-box; color: #6c7480; cursor: pointer; text-align: center; flex: 1; font-size: 20px; line-height: 24px; display: flex; align-items: center; justify-content: center;}
.hotspot .hotspot-list li.current{ background-color: #fff; color: #6f00af;}
.hotspot .hotspot-con .hotspot-item{ display: none; }
.hotspot .tag-ul{ padding: 30px 20px 0; }
.hotspot .tag-ul li{ color: #252a33; display: inline-block; float: left; margin-bottom: 32px; width: 140px; height: 30px; line-height: 32px}
.hotspot .tag-ul li a{ display: block; position: relative; padding-left: 8px; margin-left: 4px; color: #252a33; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.m-hotspot.hotspot{ border: 1px solid #f2f2f2; margin: 0 30px 30px; padding: 0; }
.m-hotspot.hotspot .hotspot-list{ height: 50px; line-height: 50px; }
.m-hotspot.hotspot .hotspot-list li{ font-size: 16px; }
.m-hotspot.hotspot .tag-ul{ padding-top: 20px; }
.m-hotspot.hotspot .tag-ul li{ margin-bottom: 10px; }
/* 最新收录*/
.record .record-title{ font-size: 20px; color: #252a33; font-weight: 500; line-height: 24px; padding-bottom: 20px;}
.record .pull-left, .record .pull-right{ width: 49%; padding: 20px 30px; box-sizing: border-box;}
.record dl{ display: flex; padding-bottom: 20px; }
.record dt{ width: 100px; height: 100px; min-width: 100px; border-radius: 4px; border: 1px solid rgba(0,0,0,.05); margin-right: 10px; overflow: hidden; box-sizing: border-box;}
.record .record-img{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block;}
.record .record-t1{ font-size: 16px; font-weight: 500; line-height: 23px; color: #252a33; margin-bottom: 10px; display: -webkit-box; word-break: break-all; overflow: hidden; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical; white-space: normal!important;}
.record .record-t2{ line-height: 20px; color: #828993; display: -webkit-box; word-break: break-all; overflow: hidden; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; white-space: normal!important;}
.record ul{ margin-left: 20px; }
.record li{ list-style: disc;}
.record li a{ display: block; position: relative; color: #252a33; height: 30px; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

/* 脚注*/
.footer{ color: #333; padding: 30px 0; }
.footer a{ color: #333; }
.footer .footer-flex{ display: flex; padding-bottom: 10px; line-height: 25px; }
.footer .footer-flex:last-child{ padding-bottom: 0; }
.footer .footer-flex span{ font-weight: bold; white-space: nowrap; }
.footer .footer-flex a{ padding: 0 10px; }
.footer .footer-flex a:first-child{ padding-left: 0; }

/* 当前位置*/
.location{ display: flex; align-items: center; padding: 20px 0;}
.location li{ padding-right: 10px; }
.location a{ color: #333; }
.location li i{ font-size: 14px;}
/*****+++++ 文章页 +++++*****/
.composition-info{ padding: 20px; }
.article .article-info{ border-bottom: 1px solid #f2f2f2; color: #999; padding: 15px 0; }
.article .article-info span{ margin-right: 20px; }
.article .article-con{ padding: 20px; }
.article .article-con p{ font-size: 16px; line-height: 30px; }
.article .article-goods{ margin: 10px 0;}
.article .article-goods-caption{ font-size: 16px; font-weight: bold; padding-bottom: 15px;}
.article .article-goods a{ background-color: #f2f2f2; padding: 10px; box-sizing: border-box; display: flex; align-items: center; }
.article .article-goods a:hover{ color: #333; }
.article .article-goods img{ border-radius: 5px; width: 100px; height: 100px; }
.article .article-goods-text{ flex: 1; padding: 10px 10px 10px 20px;}
.article .article-goods-title{ font-size: 16px; font-weight: bold; margin-bottom: 10px; display: -webkit-box; word-break: break-all; overflow: hidden; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical; white-space: normal; box-sizing: border-box; height: 30px; line-height: 30px;}
.article .article-goods-num{ font-size: 15px; display: flex; align-items: center; justify-content: space-between; }
.article .article-goods-num .goods-num-s1{ padding-left: 20px; }
.article .article-goods-num .goods-num-s2{ background-color: #fc69c4; border-radius: 50px; color: #fff; display: inline-block; font-size: 14px; padding: 10px 20px;}

.article-list .article-list-title, .ranking-list .ranking-list-title{ border-bottom: 1px solid #f2f2f2; font-size: 16px; color: #252a33; font-weight: 550; line-height: 24px; padding-bottom: 10px;}
.article-list ul{ padding: 10px 0;}
.article-list li{ border-bottom: 1px dotted #f2f2f2;}
.article-list li a{ display: block; padding: 0 5px; height: 40px; line-height: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
/*****+++++ 成分排行榜页 +++++*****/
.ranking{ padding-top: 20px; }
.ranking .ranking-title{ font-size: 20px; font-weight: 550; text-align: center; padding-bottom: 20px; }
.ranking .ranking-con{ border: 1px solid #f2f2f2; padding: 10px;}
.ranking .ranking-con ul{}
.ranking .ranking-con li{ background-color: #f9f9f9; border-radius: 4px; padding: 10px; margin-bottom: 20px; display: flex; align-items: center; }
.ranking .ranking-con li:last-child{ margin-bottom: 0; }
.ranking .ranking-left{ display: flex; align-items: center; margin-right: 20px; flex: 1;}
.ranking .ranking-constituent{ border-radius: 4px; width: 100px; height: 100px; margin-right: 10px; }
.ranking .ranking-name{ color: #333; font-size: 16px; font-weight: bold; display: -webkit-box; word-break: break-all; overflow: hidden; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical; white-space: normal; box-sizing: border-box; height: 30px; line-height: 30px;}
.article .ranking .ranking-num, .article .ranking .ranking-price{ font-size: 14px; }
.ranking .ranking-right{ text-align: center; }
.ranking .ranking-right span{ background-color: #f2f2f2; border: 1px solid #cdcaca; border-radius: 50px; cursor: pointer; font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; padding: 8px 20px;}
.ranking .ranking-right i{ display: inline-block; width: 20px; height: 20px; margin-right: 10px;}
.ranking .ranking-right i.icon-like{ background: url('../images/icon-like01.png') no-repeat center center; background-size: 100%;}
.ranking .ranking-right span.active{ border-color: #48a358; color: #48a358; }
.ranking .ranking-right span.active i.icon-like{background: url('../images/icon-like02.png') no-repeat center center; background-size: 100%;}
.ranking-more{ padding-top: 20px; text-align: right; }
.ranking-more a{ color: #333; }

.ranking .ranking-right a.active{ border-color: #000; }
.ranking .ranking-right a.active i.icon-zan{ background: url('../images/icon-zan02.png') no-repeat; background-size: 100%; }
.ranking .ranking-right a.active span{ color: #000; }

.ranking-list{ padding: 20px; }
.ranking-list .ranking-content{ display: inline-block; width: 100%; padding-top: 20px;}
.ranking-list .ranking-content ul{ width: 48%; }
.ranking-list .ranking-content li{ border-bottom: 1px solid #f2f2f2; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px;}
.ranking-list .ranking-content p{ margin-bottom: 10px; display: -webkit-box; word-break: break-all; overflow: hidden; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical; white-space: normal;}
.ranking-list .ranking-content span{ color: #666; }
.ranking-list .ranking-content a{ background-color: #ed93cb; border-radius: 50px; color: #fff; display: inline-block; padding: 5px 20px; white-space: nowrap;}
.ranking-list .ranking-content-text{ padding-right: 20px; }

.stars{ font-size: 18px; display: inline-flex; padding-right: 5px;font-family: monospace; color: orange;}
.stars i{ float: left; font-style: normal; padding: 0 2px;}

/*相关内容*/
.correlation{ padding: 20px 0;}
.correlation .correlation-title{ color: #444c57; font-size: 18px; font-weight: 500; line-height: 1.25; padding: 0 20px 10px;}
.correlation .correlation-list{ padding: 0 10px; }
.correlation .correlation-list li a{ border-bottom: 1px solid #f2f2f2; box-sizing: border-box; color: #333; display: inline-block; padding: 10px; width: 100%; }
.correlation .correlation-list li a:hover{ opacity: .8;}
.correlation .correlation-list li a:hover p{ color: #333; }
.correlation .correlation-list li img{ display: block; float: left; width: 80px; height: auto; margin-right: 10px;}
.correlation .correlation-list li p{ color: #2e3540; cursor: pointer; display: -webkit-box; word-break: break-all; overflow: hidden; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; white-space: normal; box-sizing: border-box; height: 75px; line-height: 25px;}
.correlation .correlation-more{ background-color: #f7f7f7; border-radius: 4px; box-sizing: border-box; color: #666; display: inline-block; text-align: center; padding: 10px 0; margin-top: 20px; width: 100%;}
.correlation .correlation-more:hover{ color: #666; opacity:.8;}

/***+++ 排行榜+++***/
.billboard{ padding: 20px; }
.billboard .billboard-info{ font-size: 16px; line-height: 30px; padding: 20px 0;}
.billboard .billboard-con{ border: 1px solid #f2f2f2; padding: 10px;}
.billboard .billboard-list{ background-color: #f9f9f9; border-radius: 4px; color: #333; padding: 10px; margin-bottom: 20px; display: flex; align-items: center;}
.billboard .billboard-left{ display: flex; align-items: center; margin-right: 20px; flex: 1;}
.billboard .billboard-grade{ width: 60px; height: 60px;}
.billboard .billboard-grade span{ display: inline-block; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: 1s clip-path; text-align: center; width: 60px; height: 60px; line-height: 60px; font-size: 20px; font-weight: bold; margin:0 auto; background: #999; color: #fff; }
.billboard .billboard-constituent{ border-radius: 4px; width: 120px; margin: 0 20px;}
.billboard .billboard-text{}
.billboard .billboard-name{ font-size: 22px;font-weight: bold; }
.billboard .billboard-text{ display: -webkit-box; word-break: break-all; overflow: hidden; -webkit-line-clamp: 2; text-overflow: ellipsis; -webkit-box-orient: vertical; white-space: normal; max-height: 60px; line-height: 30px;}
.billboard .billboard-right{ background-color: #999; border-radius: 50px; color: #fff; white-space: nowrap; padding: 8px 20px;}
.billboard .billboard-list:hover{ background-color: #fbf4ff; }
.billboard .billboard-list:hover .billboard-grade span{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); background-color: #7300ab;}
.billboard .billboard-list:hover .billboard-name{ color: #7300ab; }
.billboard .billboard-list:hover .billboard-right{ background-color: #7300ab; }

@font-face{font-family:layui-icon;src:url(../layui/font/iconfont.eot);src:url(../layui/font/iconfont.eot) format('embedded-opentype'),url(../layui/font/iconfont.svg) format('svg'),url(../layui/font/iconfont.woff) format('woff'),url(../layui/font/iconfont.ttf) format('truetype')}.layui-icon{font-family:layui-icon!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.layui-icon-reply-fill:before{content:"\e611"}.layui-icon-set-fill:before{content:"\e614"}.layui-icon-menu-fill:before{content:"\e60f"}.layui-icon-search:before{content:"\e615"}.layui-icon-share:before{content:"\e641"}.layui-icon-set-sm:before{content:"\e620"}.layui-icon-engine:before{content:"\e628"}.layui-icon-close:before{content:"\1006"}.layui-icon-close-fill:before{content:"\1007"}.layui-icon-chart-screen:before{content:"\e629"}.layui-icon-star:before{content:"\e600"}.layui-icon-circle-dot:before{content:"\e617"}
.layui-icon-rate:before {content:"\e67b";}
.layui-icon-rate-solid:before { content:"\e67a";}
.layui-icon-rate-half:before{content:"\e6c9"}
.layui-icon-right:before { content:"\e602";}
.layui-icon-heart:before { content:"\e68c";}
.layui-icon-heart-fill:before { content:"\e68f";}
.layui-rate,.layui-rate *{display:inline-block;vertical-align:middle}
.layui-rate{ font-size:0}
.layui-rate li i.layui-icon{color:#FF8000;margin-right:5px;transition:all .3s;-webkit-transition:all .3s;font-size: 20px;}
.layui-rate li i:hover{cursor:pointer;transform:scale(1.12);-webkit-transform:scale(1.12)}
.layui-rate[readonly] li i:hover{cursor:default;transform:scale(1)}