@charset "utf-8";
body{ color: #333;}
.contaninter{ width: 1200px; margin: 0 auto; clear: both;}
a:hover{ color: #f42f2f !important;}

.pull-left{ float: left; }
.pull-right{ float: right; }

.red{ color: #f42f2f !important; }
.green{ color: #5dc540 !important; }
.purple{ color: #7300ab !important; }
.layui-bg-red{ background-color: #f42f2f !important; }
.layui-btn-red{ background-color: #f42f2f; }
.layui-btn-red:hover{ color:#fff !important; }
.layui-btn-primary:hover{ border-color: #f42f2f;}
.elip-two{ overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.f-icon{ background: url("../images/icon.png") no-repeat; display: inline-block;}
.bottom-fixed{ position: fixed; bottom: 0;width: 100%;z-index: 99999;}

/* 顶部导航*/
.top-nav{ background-color: #f2f2f2; border-bottom: 1px solid #eaeaea; font-size: 12px; 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;}
.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;}
.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;}

/* 登录*/
.login-wrap{ background:url("../images/login-banner.jpg") no-repeat center center; height: 450px;}
.login-wrap .contaninter{ position: relative; }
.login-box{ background-color: #fff; border-radius: 5px; padding: 30px 20px; width: 320px; position: absolute; right: 0; top: 70px;}
.login-box h1{ color: #8b898a; text-align: center; font-size: 28px; margin: 0 0 20px;}
.login-box .layui-form-pane .layui-form-label{ background-color: #f4f4f4; border-color: #bdbdbd;  padding: 8px 0; width: 38px;}
.login-box .layui-form-pane .layui-input-block{ margin-left: 38px;}
.login-box .layui-form-pane .layui-input{ border-color: #bdbdbd; }
.login-box .layui-form-item{ position: relative; margin-bottom: 20px;}
.login-box .code{ background-color: #f4f4f4; border-left: 1px solid #bdbdbd; cursor: pointer; display: inline-block; height: 36px; line-height: 36px; margin: 1px; padding: 0 10px; position: absolute; right: 0; top: 0;}
.login-box .btn-area{ margin: 20px 0;}
.login-box .btn-area button{ background-color: #f42f2f; width: 100%; opacity: .5;}
.login-box .login-hint{ margin-top: 20px; font-size: 12px; color: #737373; margin: 0 auto; width: 100%; position: relative;}
.login-box .login-hint input{ margin-right: 5px; position: absolute; top: 2px; }
.login-box .login-hint a{ color: red; }
.login-box .login-hint p{ display:inline; padding-left: 20px; }
/* 脚注*/
.footer{ margin-top: 40px;}
.footer .f-pret01{ background-color: #fff; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;}
.footer .f-pret01 ul{ padding: 20px 0; display: flex; justify-content: space-around;}
.footer .f-pret01 ul li{ position: relative; display: inline-block; float: left;width: 25% \9;*width: 25%;_width: 25%;}
.footer .f-pret01 ul li .f-icon{ width: 46px; height: 46px; position: absolute; left: 0; top: 0;}
.footer .f-pret01 ul li .f-icon01{ background-position: 0 0;}
.footer .f-pret01 ul li .f-icon02{ background-position: 0 -56px;}
.footer .f-pret01 ul li .f-icon03{ background-position: 0 -112px;}
.footer .f-pret01 ul li .f-icon04{ background-position: 0 -168px;}
.footer .f-pret01 ul li strong{ color: #333; display: block; font-size: 18px; padding-left: 55px;}
.footer .f-pret01 ul li span{ display: block; font-size: 14px; color: #999; padding-left: 55px;}

.footer .f-pret02{ background-color: #fff; padding: 30px 0; text-align: center;}
.footer .f-pret02 .f-left{ display: inline-block; width: 600px;}
.footer .f-pret02 .f-left dl{ border-right: 1px solid #eaeaea; margin: 0 34px 0 0; width: 115px; height: 130px; float: left; text-align:left;}
.footer .f-pret02 .f-left dl:last-child{ border-right: 0 none; margin: 0; }
.footer .f-pret02 .f-left dl dt{ font-size: 18px; color: #666; margin-bottom: 6px;}
.footer .f-pret02 .f-left dl dd a{ font-size: 14px; color: #999; line-height: 24px;}

.footer .f-pret02 .f-middle{ display: inline-block; width: 200px; height: 67px; margin: 20px 20px 0 5px; vertical-align: top;}
.footer .f-pret02 .f-middle .txt1{ border-bottom: 1px solid #8e38c0;color: #8e38c0;font-size: 32px;font-weight: 700;line-height: 38px;white-space: nowrap;font-family: arial;text-align: center;}
.footer .f-pret02 .f-middle .txt2{ color: #8e38c0;font-size: 14px;height: 28px;line-height: 28px;}

.footer .f-pret02 .f-right{ display: inline-block; width: 270px;}
.footer .f-pret02 .f-right p{ width: 110px; display: block; float: left; text-align: center; margin-left: 15px; font-size: 12px;}

.footer .f-pret03{ background-color: #333; color: #fff; text-align: center; }
.footer .f-pret03 a{ color: #fff; }
.footer .f-pret03 .about{ padding: 15px 0; }
.footer .f-pret03 .copy{ font-size: 12px; }
.footer .f-pret03 .copy p{ padding-bottom: 5px; }
.footer .f-pret03 .copy a{ padding: 0 5px; }
.footer .f-pret03 .pic{ padding-bottom: 5px; }
.footer .f-pret03 .pic img{ width: 35px; height: 35px; }

.footer .f-pret03.login-footer, .footer .f-pret03.login-footer a{ background-color: #fff; color: #333;}

/* 悬浮客服*/
.web-model{ background-color: #fff; border: 1px solid #ddd; border-bottom: 0 none; width: 58px; position: fixed; top: 50%; left: 50%; margin-top: -145px; margin-left: 600px; z-index: 9999;display: none;}
.web-model li{ border-bottom: 1px solid #ddd; width: 58px; height: 58px; }
.web-model li:last-child{ border-bottom: 0 none; }
.web-model li a{ width: 58px; height: 58px;}
.web-model li a.lqhb-link{ background: url("../images/icon-lqhb.jpg?n=1") no-repeat; display: inline-block; position: relative;}
.web-model li a.lqhb-link:hover{ background: url("../images/icon-lqhb-red.jpg?n=1") no-repeat; display: inline-block;}
.web-model li a.lqhb-link .lqhb{ border-radius: 8px; width: 135px; position: absolute; top: -75px; right: 75px; display: none;}
.web-model li a.cart-link{ background-position: 0 -618px; position: relative;}
.web-model li a.cart-link:hover{ background-position: -59px -618px;}
.web-model li a.cart-link .cart-link-hotword{ cursor: pointer; overflow: hidden; position: absolute; top: 0; right: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; color: #fff; background-color: #f42f2f; border-radius: 100%;}
.web-model li a.call-link{ background-position: 0 -677px; position: relative;}
.web-model li a.call-link:hover{ background-position: -59px -677px; color: #333 !important;}
.web-model li a.cart-link .smxd{ width: 135px; position: absolute; top: -35px; right: 60px; display: none; transform: rotate(90deg);-ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); }
.web-model li a.call-link .kimt{ background-color: #fff; border: 1px solid #ddd; font-size: 16px; text-align: center; width: 175px; padding: 5px; position: absolute; top: 0; right: 68px; display: none;}
.web-model li a.call-link .kimt em{ color: #999; font-style: normal; font-size: 14px; }
.web-model li a.call-link .kimt i{ color: #ddd; position: absolute; right: -12px; top: 20px; }
.web-model li a.fklink{ background-position: 0 -736px;}
.web-model li a.fklink:hover{ background-position: -59px -736px;}
.web-model li a.top-link{ background-position: 0 -795px;}
.web-model li a.top-link:hover{ background-position: -59px -795px;}
.web-model li a.kflink{ background-position: 0 -559px;-webkit-animation: mymove 1s ease infinite alternate;-moz-animation: mymove 1s ease infinite alternate;-ms-animation: mymove 1s ease infinite alternate;-o-animation: mymove 1s ease infinite alternate;animation: mymove 1s ease infinite alternate;}
@-webkit-keyframes mymove {
	0% {background-position: -59px -555px;}
	48% {background-position: -59px -559px;}
	100% {background-position: -59px -555px;}
}
@-moz-keyframes mymove {
	0% {background-position: -59px -555px;}
	48% {background-position: -59px -559px;}
	100% {background-position: -59px -555px;}
}
@-o-keyframes mymove {
	0% {background-position: -59px -555px;}
	48% {background-position: -59px -559px;}
	100% {background-position: -59px -555px;}
}
@-ms-keyframes mymove {
	0% {background-position: -59px -555px;}
	48% {background-position: -59px -559px;}
	100% {background-position: -59px -555px;}
}
@keyframes mymove {
	0% { background-position: -59px -555px;}
	48% {background-position: -59px -559px;}
	100% {background-position: -59px -555px;}
}

/* 计算*/
.shop-arithmetic{ width:120px; box-sizing:border-box; white-space:nowrap; border:1px solid #e0e0e0; border-radius: 4px; height: 30px; line-height: 30px; display: flex; justify-content: space-between; align-items: center; align-self: center;}
.shop-arithmetic a{display:inline-block;width:30px;height:30px; line-height:30px; text-align:center;}
.shop-arithmetic .minus{border-right:1px solid #e0e0e0;}
.shop-arithmetic .failed{color:#d1d1d1;}
.shop-arithmetic .plus{border-left:1px solid #e0e0e0;}
.shop-arithmetic .num{width:100px;text-align:center;border:none;display: inline-block; box-sizing:border-box;vertical-align:top;margin:0 -6px;}

/* 动态线框*/
.border {position: relative;}
/*.border .inner {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}*/
.border:before,.border:after,.border .inner:before,.border .inner:after {background-color: #f42f2f;position: absolute;content: "";display: block;-webkit-transition: -webkit-transform .5s;transition: -webkit-transform .5s;transition: transform .5s;transition: transform .5s,-webkit-transform .5s;}
.border:before,.border:after {left: 0;width: 100%;height: 1px;-webkit-transform: scaleX(0);transform: scaleX(0);}
.border:before {top: 0; -webkit-transform-origin: right center;transform-origin: right center;}
.border:after {bottom: 0;-webkit-transform-origin: left center;transform-origin: left center;}
.border .inner:before,.border .inner:after {top: 0;width: 1px;height: 100%;-webkit-transform: scaleY(0);transform: scaleY(0);}
.border .inner:before {left: 0;}
.border .inner:after {right: 0;}
.border:hover:before,.border:hover:after {-webkit-transform: scaleX(1);transform: scaleX(1);}
.border:hover .inner:before,.border:hover .inner:after {-webkit-transform: scaleY(1);transform: scaleY(1);}
.border .inner:hover:before,.border .inner:hover:after {-webkit-transform: scaleY(1);transform: scaleY(1);}
.border .inner:before {-webkit-transform-origin: top center;transform-origin: top center;}
.border .inner:after {-webkit-transform-origin: bottom center;transform-origin: bottom center;}
.border:hover .inner:before {-webkit-transform-origin: bottom center;transform-origin: bottom center;}
.border:hover .inner:after {-webkit-transform-origin: top center;transform-origin: top center;}
.border:hover:before {-webkit-transform-origin: left center;transform-origin: left center;}
.border:hover:after {-webkit-transform-origin: right center;transform-origin: right center;}

/* 产品展示-形式1*/
.goods ul li{ width: 24%; margin: 0.5%; float: left; padding: 0 0 1%;}
.goods ul li img{ width: 99%; padding: 1px;}
.goods ul .proinfo{ padding: 10px 10px 0;}
.goods ul .proinfo h3{ font-weight: normal;font-size: 14px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 5px 0;}
.goods ul .proinfo h5{ color: #777; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.goods ul .proinfo .row{ display: flex; align-items: center; }
.goods ul .proinfo .price{ font-size: 18px; color: #f42f2f;}
.goods ul .proinfo .targ{ border: 1px dotted #f42f2f; color: #f42f2f; margin-left: 5px; padding: 0 3px;}
.goods ul .proinfo .num{ padding: 5px 0 0; display: flex; align-items: center; justify-content: space-between; font-size: 12px;}
.goods ul .proinfo .num .comment{ color: #f42f2f;}
.goods ul .proinfo .num .comment i{ color: #ccc; margin-right: 3px;}

/* 友情链接*/
.blogroll{ border: 1px solid #eaeaea; margin-top: 20px; background-color: white;}
.blogroll .layui-tab{ margin: 0; }
.blogroll .layui-tab-brief .layui-tab-title .layui-this{ color: #f42f2f; }
.blogroll .layui-tab-brief .layui-tab-more li.layui-this:after, .blogroll .layui-tab-brief .layui-tab-title .layui-this:after{ border-color: #f42f2f; }
.blogroll .layui-tab-content a{ font-size: 13px; color: #666; line-height: 24px; margin: 0 20px 0 0;}

.blogroll .blogroll-news{ display: inline-block; width: 100%; }
.blogroll .blogroll-news li{ width: 30%; padding:5px 1.5%; font-size: 14px; float: left;}
.blogroll .blogroll-news li strong a{ color: #333; display: inline-block; width: 100%;}
.blogroll .blogroll-news li p a{ color: #666; margin: 0; height: 40px; line-height: 20px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}