@charset "utf-8";
.mauto{width: 70%!important; min-width: 1100px; max-width: 1470px;}
.shop-toper{width: 100%; background: #f8f8f8; border-bottom: #ddd solid 1px; height: 45px; line-height: 45px;}
.shop-toper p{width: auto; float: left;}
.shop-toper p.back{float: right;}
.shop-toper p.back a{background: #fff; color: #1e9fff; padding: 3px 10px; border-radius: 3px;}

/*头部及导航*/
.shop-header{background: #fff; height: 80px; padding: 15px 0;}
.shop-header .mauto{ display: flex; justify-content: space-between;}
.shop-header .shop-logo{width: auto; height: 100%; display: flex; align-items: center;}
.shop-header .shop-logo img{width: 80px; float: left;}
.shop-header .shop-logo h1{margin-left: 15px; font: bold 28px/28px 微软雅黑;}
.shop-header .shop-search{width: auto; display: flex; align-items: center;}
.shop-header .shop-search input{width: 300px; background: #f5f5f5; border:#ddd solid 1px; height: 40px; line-height: 40px; padding-left: 10px;}
.shop-header .shop-search button{width:60px; height:42px; font-size:18px; color:#fff; border-radius:0 4px 4px 0; background:#1e9fff; border: none;}
.shop-menu{width: 100%; height: 55px; line-height: 55px; background: #1e9fff;}
.shop-menu li{float: left;}
.shop-menu li a{display: block; padding: 0 25px; font-size: 16px; color: #fff;}
.shop-menu li a.selected{background: #014e9c;}

/*首页焦点*/
.shop-banner .bd{ width:100%; overflow:hidden;}
.shop-banner{ position:relative; width:100%; height:auto;}
.shop-banner .hd{ position:absolute; left:46%; bottom:20px; z-index:999;}
.shop-banner .hd ul li{ width:75px; height:7px; float:left; margin-right:5px; background:#fff; overflow:hidden;}
.shop-banner .hd .on{ background:#1e9fff;}
.shop-banner .bd ul li{ width:100%; text-align: center;}
.shop-banner .bd ul li img{ height:100%; }

/*公共部分*/
.bgw{background: #fff; padding: 10px 20px; box-sizing: border-box;}
.flex{display: flex;}
.flex-sp{justify-content: space-between}
.flex-sp-c{justify-content: space-between; align-items: center;}
.flex-c-c{justify-content: center; align-items: center;}
.flex--c{align-items: center;}
.shop-box{width: 100%;  margin-top: 20px;}
.shop-box .shop-ts{width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 15px;}
.shop-box .shop-ts .ts-title{font-size: 20px; font-weight: 600;}
.shop-box .shop-ts .ts-search input{width:300px; height:40px; line-height:40px; padding:0 20px; border-radius:4px 0 0 4px; background: #f2f2f2;}
.shop-box .shop-ts .ts-search button{ width:60px; height:40px; font-size:18px; color:#333; border-radius:0 4px 4px 0; background:#f5f5f5}

.shop-sub-banner{width: 100%; background: url('../images/sub-banner.png'); background-size: cover; background-position: center; height: 250px; font-size: 30px; color: #888;}

.shop-left{width:350px; border:#ddd solid 1px; margin-top: 20px;}
.shop-left .shop-left-title{width: 100%; border-bottom: #ddd solid 1px; height: 45px; line-height: 45px; text-indent: 15px; font-size: 18px; font-weight: 500;}
.shop-left .shop-left-con{padding:10px 15px}

.shop-main{flex:1; padding: 25px; margin-top: 20px; background: #fff; min-height: 500px;}
.shop-html-title{width: 100%; text-align: center; font-size: 30px; padding: 30px 0;}
.shop-html-body{font-size: 16px; line-height: 30px; padding: 30px;}
.shop-html-body img{border:#ddd solid 1px; padding: 5px; margin: 5px 0;}

.shop-footer{width: 100%; background: #555; padding: 30px 0; margin-top: 30px;}
.shop-footer p{text-align: center; color: #f9f9f9; margin-top: 5px;}
.shop-footer p span{margin:0 10px}
.shop-footer p a{color:#f9f9f9}

/*产品列表*/
.shop-yarn{width: 100%; display: flex; justify-content: space-between; flex-flow: row wrap;}
.shop-yarn .item{width:23.5%; padding:0; margin:20px 0; border:#eee solid 1px; box-shadow: #f0f0f0 1px 3px;}
.shop-yarn .item span{ position:relative; padding:0; display:block}
.shop-yarn .item span a{ display:block; overflow: hidden;padding:8px}
.shop-yarn .item span img{width:100%; border-radius:4px 4px 0 0;transition: all 0.5s ease-in-out;}
.shop-yarn .item .info{  height:130px; padding:10px 15px 0; overflow:hidden}
.shop-yarn .item h3{ font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
.shop-yarn .item .num{ height:30px; color: #bbb;}
.shop-yarn .item .sort{ height:46px; overflow:hidden; margin-top: 5px;}
.shop-yarn .item .sort .tag{ float:left; color: #bbb; font-size:14px; margin: 0 6px 0 0;text-align: justify;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow:hidden; }
.shop-yarn .item:hover{background: #f9f9f9;}
.shop-yarn .item:hover span img{transform: scale(1.06) rotate(0deg);}

/*关于我们*/

/*产品分类*/
.submenu{padding:30px 0}
.submenu ul li{ float:left}
.submenu ul li a{ display:block; margin:0 10px 10px 0; background:#f2f2f2; padding:5px 30px; border-radius:99px;}
.submenu ul li.on a{ background:#158afe; color:#fff}

/*主搜索*/
.shop-search input{width:400px; height:50px; line-height:50px; padding:0 20px; border-radius:4px 0 0 4px; background: #f2f2f2;}
.shop-search button{ width:60px; height:50px; font-size:18px; color:#333; border-radius:0 4px 4px 0; background:#f0f0f0}

/*产品详情*/
.shop-yarn-detail{width: 100%; position: relative; display: flex;}
.shop-yarn-detail .yarn-litpic{width: 500px; float: left;}
.shop-yarn-detail .yarn-litpic img{width: 100%;}
.shop-yarn-detail .yarn-litpic.fixed{position: fixed; top: 80px;}
.shop-yarn-detail .yarn-detail{flex: 1; margin-left: 40px;}
.shop-yarn-detail .yarn-detail h1{font-size: 30px; font-weight: 500; margin-bottom: 30px;}
.shop-yarn-detail .yarn-detail .item{width: 100%; margin-top: 15px; font-size: 16px;}
.shop-yarn-detail .yarn-detail .item .label{width: 70px; color:#999}
.shop-yarn-detail .yarn-detail .detail{margin-top: 30px;}
.shop-yarn-detail .yarn-detail .active{width: 100%; margin-top: 40px;}

.shop-yarn-detail .title-line{width: 100%; height: 50px; line-height: 50px; text-align: center; background: #f5f5f5; margin: 20px 0; font-size: 18px; font-weight: 500;}
.shop-yarn-detail .yarn-photos{width: 100%; text-align: center;}
.shop-yarn-detail .yarn-photos img{max-width: 100%;}
.shop-yarn-detail .layui-btn-s1{background: #13b27c; color: #fff;}
.shop-yarn-detail .layui-btn-s2{background: #807900; color:#fff}
.shop-yarn-detail .layui-btn-s3{background: #7a297b; color:#fff}
.shop-yarn-detail .layui-btn-s4{background: #e97177; color:#fff}

/*相册*/
.shop-album{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.shop-album .item{width: 31%; border:#eee solid 1px; box-shadow: #f0f0f0 1px 3px; display: flex; flex-direction: column; margin:10px 0 30px 0; border-radius: 6px; overflow: hidden; padding-bottom: 10px;}
.shop-album .item img{width: 100%;transition: all 0.5s ease-in-out;}
.shop-album .item span{padding: 15px 0; text-align: center; display: block; font-size: 18px;}
.shop-album .item:hover{background: #d9f4fd;}
.shop-album .item:hover img{transform: scale(1.06) rotate(0deg);}
.shop-album::after{width: 31%; content: '';}
.shop-album .item.sub{width: 23%; border-radius: 0; padding-bottom: 0;}

/*联系我们*/
.shop-contact{flex:1;}
.shop-contact .panle{width: 100%; border:#eee solid 1px;}
.shop-contact .panle .title{width: 100%; background: #f5f5f5; font-size: 18px; text-indent: 15px; height: 45px; line-height: 45px;}
.shop-contact .panle .body{padding:15px}
.shop-contact .linkman{width: 50%; display: flex; margin: 10px 0; padding: 10px 0;}
.shop-contact .linkman .avatar{width: 80px;}
.shop-contact .linkman .avatar img{width: 80px; height: 80px; border-radius: 50%;}
.shop-contact .linkman .info{flex: 1; margin-left: 15px; display: flex; flex-direction: column; height: 80px;}
.shop-contact .linkman .info span{font-size: 19px; margin-top: 7px; font-weight: 600;}
.shop-contact .linkman .info span.mobile{font-size: 20px; font-weight: normal;}
.shop-contact .item{width: 100%; display: flex; margin: 10px 0; font-size: 16px;}
.shop-contact .item .label{width: 90px; text-align: right; color:#999}
.shop-contact .item .info{flex: 1}
.shop-map{width:650px; margin-left: 30px;}

/*企业招聘*/
.shop-job{float:left; width:100%;}
.shop-job .item{ position:relative; padding: 20px; background: #fff; margin:0 0 20px 0; display:block; border:1px solid #eee; overflow:hidden}
.shop-job .item-head{ padding-bottom: 10px; width:100%; display:block; overflow:hidden}
.shop-job .title{ float:left; margin-right:30px}
.shop-job .title div{ float:left; font-size: 18px;}
.shop-job .title .p{ width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 14px; background: #0c9cfa; color: #fff; border-radius: 2px; margin-right: 20px;}
.shop-job .money{ float:right; margin-right:300px; font-size:18px; color: #f60; font-weight: 700;}
.shop-job .bt{ position:absolute; right:30px}
.shop-job .tags{ display:block; width:100%; overflow:hidden}
.shop-job .tags div{ float:left; color: #666; border-radius: 2px; margin: 5px 3px 10px 0; padding: 0 15px; border-right:1px solid #eee}
.shop-job .text{ width:95%; padding: 5px 15px; color: #999; background:#f8f8f8; border-radius:4px; text-align: justify;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow:hidden;}

.shop-job-detail{ padding:50px; border:1px solid #eee; background:#fff}
.shop-job-detail .info .title div{ float:left}
.shop-job-detail .info .title .p{ width: 42px; height: 42px; line-height: 42px; text-align: center; font-size: 24px; background: #0c9cfa; color: #fff; border-radius: 2px; margin-right: 30px;}
.shop-job-detail .info .title .money{ color:#f60; margin-left:20px; font-size: 18px;}
.shop-job-detail .con .item{ width:33.33%; display: flex; height: 45px; line-height: 45px;}
.shop-job-detail .con .item .label{ width:50px; font-size: 16px; color: #999; margin-right: 20px;}
.shop-job-detail .con .item .title{font-size: 20px;}
.shop-job-detail .con .item .text{font-size: 16px;}