layui_toolnb/public/static/css/fly/store.css-t=111.css

/**

 @Name: 应用市场
 @Author: xuxinyu

 */


/** 图标字体 **/
@font-face {font-family: 'layui-icon';
  src: url('font/iconfont.eot-v=1')/*tpa=https://res.layui.com/static/css/fly/font/iconfont.eot?v=1*/;
  src: url('font/iconfont.eot-v=1#iefix')/*tpa=https://res.layui.com/static/css/fly/font/iconfont.eot?v=1#iefix*/ format('embedded-opentype'),
  url('font/iconfont.svg-v=1#iconfont')/*tpa=https://res.layui.com/static/css/fly/font/iconfont.svg?v=1#iconfont*/ format('svg'),
  url('font/iconfont.woff-v=1')/*tpa=https://res.layui.com/static/css/fly/font/iconfont.woff?v=1*/ format('woff'),
  url('font/iconfont.ttf-v=1')/*tpa=https://res.layui.com/static/css/fly/font/iconfont.ttf?v=1*/ format('truetype');
}

/* font-class */
.layui-icon-shop-download:before{content:"\e69f"}
.layui-icon-shop-eye:before{content:"\e63a"}
.layui-icon-shop-buy:before{content:"\e601"}
.layui-icon-shop-color:before{content:"\e62a"}
.layui-icon-shop-fenlei:before{content:"\e602"}
.layui-icon-shop-dianpu:before{content:"\e7dc"}
.layui-icon-shop-more:before{content:"\e9c2"}

/* 颜色 */
.store-bg-green{background-color: #5CD47D;}
.store-bg-orange{background-color: #FF9434;}
.store-bg-blue{background-color: #5694E9;}

/* 辅助 */
.fly-html-store .layui-card-header{height: 50px; line-height: 50px;}
.fly-html-store .layui-card-body{padding: 15px;}
.store-color-bar{display: inline-block; width: 30px; height: 8px; background-color: #009688;}

/* 商城模板 */
.shop-nav{background-color: #fff;}

.topbar-logo{display: none;}
.topbar-logo img{width: 82px;}

.shop-nav .input-search{width: 100%; padding: 30px 0 10px; text-align: center; background-color: #FFF;}
.shop-nav .input-search > div{position: relative; display: inline-block;}
.shop-nav .input-search input{vertical-align: middle; width: 500px; height: 40px; background: #eff4f5; border: none; outline: none; padding-left: 10px; border-top-left-radius: 2px; border-bottom-left-radius: 2px;}
.shop-nav .input-search button.layui-btn-shop{vertical-align: middle; width: 80px; height: 40px; background: #5eba78; border-top-left-radius: 0px; border-bottom-left-radius: 0px;}
.shop-nav .input-search button.layui-btn-shop i{font-size: 22px; line-height: 40px;}
.shop-nav .input-search dl{position: relative; text-align: left; font-size: 12px; line-height: 30px; top: 5px; left: 10px;}
.shop-nav .input-search dl dd, .shop-nav .input-search dl dt{display: inline-block; color: #9495a4;}
.shop-nav .input-search dl dd a{color: #b3b6b8; margin-right: 10px;}
.shop-nav .input-search dl dd a:hover{color: #9495a4;}
.shop-nav .input-search a.userBtn{width: 60px; padding: 0; text-align: center; height: 40px; font-size: 12px; margin-left: 20px;}
.shop-nav .input-search .layui-container{display: none;}
.shop-nav .input-search.scroll{position: fixed; top: 60px; z-index: 999; top: 0; padding-top: 10px; box-shadow: 0px 3px 3px rgba(0,0,0,0.15);}
.shop-nav .input-search.scroll .layui-container{display: block;}
.shop-nav .input-search.scroll .topbar-logo{display: block; position: absolute; left: 15px; bottom: 5px; z-index: 10;}
.shop-nav .input-search.scroll>div{display: block;}
.shop-nav .input-search.scroll>div>*{display: inline-block;}
.shop-nav .input-search.scroll input{width: 350px;}


.shop-nav .shop-banner{ margin-top: 70px; background: #677ee4; text-align: center;}
.shop-nav .shop-banner .layui-carousel{height: 460px; background: #5694E9;}
.shop-nav .shop-banner .layui-carousel img{width: 100%;}

.shop-nav .shop-banner .layui-carousel .layui-container{width: 1400px!important;}
.shop-banner .layui-carousel>*[carousel-item] > *{background: none;}
.shop-banner .layui-carousel>*[carousel-item]:before{color: #fff; color: rgba(255,255,255,.6);}

.shop-nav .product-list{position: absolute; left: 0; width: 220px; z-index: 100; height: 520px; top: -60px; background: #fff;  box-shadow: 0px 1px 5px rgba(0,0,0,0.15);}

.shop-nav .product-list dl{font-size: 0;}
.shop-nav .product-list dl dt{display: none; font-size: 16px; background: #5eba78; line-height: 60px;}
.shop-nav .product-list dl dt a{color: #FFF;}
.shop-nav .product-list dl dd{display: inline-block; font-size: 16px; color: #666; border: 1px solid #f0f0f0; border-radius: 2px; width: 30%; margin-left: 1.5%; margin-bottom: 10px;}
.shop-nav .product-list dl dd a{display: block; line-height: 40px;}
.shop-nav .product-list dl dd a:hover{color: #5eba78; background: #f0f0f0;}

/*热门模板*/
.shop-temp .temp-hot{padding-top: 80px; padding-bottom: 80px; background: #FFF; text-align: center;}
.shop-temp .temp-hot p{padding-bottom: 10px; text-align: center; font-size: 16px;}
.temp-title-cn{margin-bottom: 52px; color: #333; font-size: 28px!important; line-height: 36px; position: relative; text-align: center; font-weight: 300;}
.temp-title-cn span{width: 35px; height: 2px; background: #333; display: inline-block; position: absolute; top: 16px; left: 50%; margin-left: -110px;}
.temp-title-cn span:last-child{margin-left: 70px;}
.temp-title-en{display: inline-block; color: #6e6e6e; font-size: 24px; line-height: 60px; margin-bottom: 52px;}
.shop-temp .temp-hot .temp-img{overflow: hidden;}
.shop-temp .temp-hot .temp-img img{width: 100%; transition: 2s}
.shop-temp .temp-hot .temp-img img:hover{transform: scale(1.1); transition: 2s;}
.shop-temp .temp-hot .temp-img + p{color: #333; font-size: 18px; line-height: 60px;}
.shop-temp .temp-hot p.price span{line-height: 14px; color: #f44e2d; margin-right: 15px;}
.shop-temp .temp-hot p.price del{line-height: 14px; color: #9c9c9c;}

/*所有模板*/
.shop-temp .temp-normal{padding-top: 60px;}
.shop-temp .temp-normal .title{font-size: 26px; color: #333; letter-spacing: 3px; margin-bottom: 55px; font-weight: 300;}
.shop-temp .temp-normal .title a i{font-size: 28px; color: #5eba78;}
.shop-temp .temp-normal .layui-btn-group{position: absolute; top: 0; right: 0; border: 1px solid #5eba78; border-radius: 2px;}
.shop-temp .temp-normal .layui-btn-group .layui-btn-shop-cost{font-size: 16px; color: #5eba78; border-left: none; background-color: transparent; height: 34px; line-height: 34px; padding: 0 14px;}
.shop-temp .temp-normal .layui-btn-group .layui-btn-shop-cost.active{color: #f2f2f2; background-color: #5eba78;}
.store-list-box{display: block; background-color: #FFF; transition: all .5s; -webkit-transition: all .5s; padding-bottom: 6px;}
.store-list-box:hover{box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.05);}
.store-list-box img{max-width: 100%;}
.store-list-box .store-list-cover{width: 100%}
.shop-temp .temp-normal .shop-more{text-align: center; margin-top: 20px; line-height: 130px;}
.shop-temp .temp-normal .shop-more i{font-size: 50px; color: #a9a9a9;}

/*详情页*/
.store-detail-info{position: absolute; right: 15px; top: 0; font-size: 0}
.store-detail-info .item{display: inline-block; vertical-align: middle; font-size: 14px;}

.store-self-product{position: relative; display: inline-block; vertical-align: middle; font-size: 0;}
.store-self-product span{font-size: 14px; height: 26px; line-height: 26px; padding: 0 10px; border-radius: 2px 0 0 2px; vertical-align: middle;}
.store-self-product span:last-child{border-radius: 0 2px 2px 0;}

.shop-nav.shopdata{padding-bottom: 0;}
/*.shop-nav.shopdata .input-search input{width: 50%;}
.shop-nav.shopdata .input-search button.layui-btn-shop{padding: 0; text-align: center; width: 60px;}*/
.shopdata-intro{margin: 30px 0; background-color: #fff;}
.shopdata-intro .intro-img{position: relative; margin: 15px; margin-right: 50px; min-height: 268px; text-align: center; background-color: #fbfbfb;}
.shopdata-intro .intro-img{display: flex; justify-content: center; align-items: center;}

.shopdata-intro .intro-img img{max-width: 100%;}
.shopdata-intro .intro-img:after{content:''; position: absolute; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid rgba(0,0,0,.05); transition: all .3s; -webkit-transition: all .3s; pointer-events: none;}
.shopdata-intro .intro-txt{padding: 10px;}
.shopdata-intro .intro-txt .title{line-height: 35px; padding: 30px 0 20px; font-size: 32px; color: #333;}
.shopdata-intro .intro-txt .title span{display: inline-block; font-size: 18px; line-height: 30px; padding: 0 10px; color: #FFF; background-color: #383e49; border-radius: 3px; vertical-align: top; margin-top: 24px; margin-right: 10px;}
.shopdata-intro .intro-txt p.desc{font-size: 16px; color: #8b8b8b; line-height: 28px; letter-spacing: 1px;}
.store-attrs{padding: 20px 0 15px;}
.store-attrs li{display: inline-block; margin-right: 30px; color: #bbb; vertical-align: middle;}
.store-attrs li i{margin-right: 12px;}
.store-attrs li span,
.store-attrs li img{margin-left: 10px;}
.store-attrs li img{width: 20px; position: relative; top: -3px;}
.store-attrs li:last-child span{display: inline-block; width: 30px; height: 8px; background-color: #009688;}
.shopdata-intro .intro-txt #introrate{margin-bottom: 45px;}
.shopdata-intro .intro-txt #shopEvent a{display: inline-block; width: 120px; margin-right: 25px; line-height: 32px; font-size: 14px; color: #FFF; text-align: center; border-radius: 2px;}
.shopdata-intro .intro-txt #shopEvent a i{font-size: 20px; margin-right: 10px; display: inline-block; vertical-align: top;}
.shopdata-intro .intro-txt .collect-price{color: #f44e2d; font-size: 26px; padding-top: 15px; padding-bottom: 20px; line-height: 22px;}
.shopdata-intro .intro-txt.collect .collect-price span{font-size: 14px;}

.store-detail-price{padding-top: 15px;}
.store-detail-price span{ font-size: 26px; color: #EF4E33;}
.store-detail-price cite{font-style: normal;}
.store-detail-active{padding: 50px 0 20px;}
.shopdata-content .layui-card-body{padding: 30px;}
.shopdata-content .detail-body img{border: 1px solid #f6f6f6; cursor: default;}


.shopdata-reply{background: #FFF; padding: 40px 30px 20px; border-top: 1px solid #f2f2f2;}
.shopdata-reply dt{color: #333; font-size: 18px; line-height: 58px; font-weight: bold;}
.shopdata-reply dd{border-bottom: 1px solid #f2f2f2; position: relative; padding-top: 38px; padding-bottom: 40px;}
.shopdata-reply dd:last-child{border-bottom: none;}
.shopdata-reply dd .reply-img{width: 58px; margin-right: 25px;}
.shopdata-reply dd .reply-img img{width: 100%;}
.shopdata-reply dd .reply-img + p{font-size: 18px; color: #555; line-height: 18px; position: absolute; top: 40px; left: 83px;}
.shopdata-reply dd .reply-img + p span{color: #cacaca; font-size: 14px; display: inline-block; vertical-align: middle; margin-left: 20px;}
.shopdata-reply dd .reply-content{color: #868686; line-height: 14px; position: absolute; top: 80px; left: 83px;}
.shopdata-reply dd .reply-content + span{color: #cacaca; font-size: 14px; position: absolute; top: 40px; right: 20px;}
.shopdata-reply dd .reply-content + span i{font-size: 14px;margin-right: 10px;}

/*列表页*/
.shop-temp.shoplist .temp-normal{padding-top: 45px;}
.shop-temp.shoplist div.shoplist{padding-top: 45px;}

.store-list-box h2{font-size: 18px; padding: 20px 15px; line-height: 26px;}
.temp-hot .store-list-box h2{padding: 20px 10px;}
.store-list-box>div{position: relative; padding: 0 15px 15px;}
.store-list-pay{border-color: #FF5722; color: #FF5722;}
.store-list-colorbar{position: absolute; right: 15px; top: 2px;}

.shop-temp.shoplist #shopList{margin-bottom: 100px;}
.shop-temp.shoplist #shopList .layui-laypage{display: block; text-align: center; margin-top: 70px;}
.shop-temp.shoplist #shopList .layui-laypage a
,.shop-temp.shoplist #shopList .layui-laypage span{padding: 0 12px; font-size: 14px; line-height: 30px; height: 30px; margin-right: 4px; border-radius: 3px; color: #e3e3e3;}
.shop-temp.shoplist #shopList .layui-laypage span em{background-color: #5eba78 !important;}
.shop-temp.shoplist .temp-normal .layui-form{padding-bottom: 30px; border-bottom: 1px solid #e9e9e9;}
.shop-temp.shoplist .temp-normal .layui-form input{width: 160px; border: none; background-color: transparent; font-size: 16px; color: #8a8a8a;}
.shop-temp.shoplist .temp-normal .layui-form dl{border: none; border-radius: 2px; box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1); color: #8a8a8a; text-align: center;}

.shoplist-filter{margin-top: 30px;}
.shoplist-filter .layui-card-body{padding-left: 25px;}

.store-cat-item{font-size: 14px; line-height: 26px; padding: 15px 0 0;}
.store-cat-item span{color: #555; width: 100px; vertical-align: top;}
.store-cat-item span, 
.store-cat-item ul,
.store-cat-item ul li{display: inline-block; vertical-align: middle;}
.store-cat-item ul{width: 80%; vertical-align: top;}
.store-cat-item ul li{margin-right: 10px; cursor: pointer;}
.store-cat-item span i{font-size: 14px; margin-right: 8px;}

.shoplist-filter .layui-container li.active a, 
.shoplist-filter .layui-container li a:hover{color: #5eba78;}

.store-cat-item.colorFilt li{width: 20px; height: 12px; line-height: 12px; margin-right: 2px; position: relative;}
.store-cat-item.colorFilt li a{display: block; height: 12px;}
.store-cat-item.colorFilt li img{display: block;}
.store-cat-item.colorFilt li i{position: absolute; top: 1px; left: 4px; color: #FFF; font-size: 8px; font-weight: bold;}
.shoplist-filter .layui-container p.filtEnd{margin-top: 10px; line-height: 48px;}
.shoplist-filter .layui-container p.filtEnd span{margin: 0 7px; color: #ffa921;}


/* footer */
.site-union{margin-top: 10px; color: #999;}
.site-union>*{display: inline-block; vertical-align: middle;}
.site-union a[upyun] img{width: 80px;}
.site-union span{position: relative; top: 3px;}
.site-union span a{padding: 0; display: inline; color: #999;}
.site-union span a:hover{text-decoration: underline;}

@media screen and (min-width: 480px){
  .shop-nav .input-search input,/* .shop-nav.shopdata .input-search input*/{width: 300px; display: inline-block;}
  .shop-temp .temp-hot img + p{font-size: 20px;}
  .shop-temp.shoplist #shopList .layui-laypage a,.shop-temp.shoplist #shopList .layui-laypage span{padding: 0 15px; font-size: 18px; line-height: 40px; height: 40px; margin-right: 20px;}
  .shoplist-filter .layui-container div span{width: 100px;}
}

@media screen and (max-width: 768px){
  

  .shop-nav .input-search input{width: 60%!important;}
  .shop-nav .shop-banner{margin-top: 20px;}

  .shop-nav .shop-banner .layui-carousel .layui-container{width: 350px!important;}
  .shop-nav .shop-banner .layui-carousel img{width: 350px; height: 115px;}
  .shop-nav .shop-banner .layui-carousel{height: 115px;}


  .shop-nav .product-list{display: none;}
  .shop-temp .temp-hot{padding-top: 30px;}
  .temp-title-cn{margin-bottom: 30px; font-size: 20px;}
  .temp-title-cn span{height: 2px; margin-left: -105px;}
  .temp-title-cn span:last-child{margin-left: 55px;}

  .store-list-box .store-list-cover{height: auto;}

  .store-cat-item span{width: 80px;}
  .store-cat-item ul{width: 60%;}
}


@media screen and (min-width: 768px){
  .shop-nav.shop-index{padding-bottom: 0;}

  .shop-nav .input-search input,/*.shop-nav.shopdata .input-search input*/{width: 550px;}
  /*.shop-nav.shopdata .input-search button.layui-btn-shop{width: 80px;}*/
  .shop-nav .input-search a.userBtn{width: 80px; font-size: 14px; margin-left: 20px;}
  .shop-nav .product-list dl dt{display: block;}
  .shop-nav .product-list dl dd{display: block; width: 100%; margin: 0; line-height: 60px; border: none; border-radius: none; border-bottom: 1px solid #f0f0f0;}
  .shop-nav .product-list dl dd a{line-height: 65px;}
  .shop-nav .product-list dl dd:last-child{border-bottom: none;}
  .shopdata-intro .intro-txt #shopEvent a{width: 200px; line-height: 52px; font-size: 18px;}
  .shopdata-intro .intro-txt #shopEvent a i{font-size: 26px;}
  .shopdata-reply{padding: 40px 100px 20px;}
  .shopdata-reply dd .reply-img + p span{margin-left: 40px;}
  .shopdata-reply dd .reply-content + span{top: 80px; right: 20px;}

  .store-cat-item
  ,.store-cat-item span i{font-size: 16px;}
  .store-cat-item ul li{margin-right: 27px;}
  .store-cat-item{padding-bottom: 15px;}
  .store-cat-item span{width: auto;}

  .store-list-box .store-list-cover{height: 218px;}
}

@media screen and (min-width: 992px){
  .shop-nav .input-search a.userBtn{width: 120px; font-size: 16px; margin-left: 80px;}
  .shopdata-intro .intro-txt #introrate{margin-bottom: 15px;}
  .shopdata-intro .intro-txt #shopEvent.scroll{width: 240px; height: 187px; position: fixed; top: 220px; right: 0; z-index: 999; border-radius: 2px; background-color: rgba(255,255,255, 0.45); }
  .shopdata-intro .intro-txt #shopEvent.scroll a:first-child{position: absolute; top: 105px; left: 20px;}
  .shopdata-intro .intro-txt #shopEvent.scroll a:last-child{position: absolute; top: 32px; left: 20px; margin-left: 0;}
  .shopdata-intro .intro-txt.collect .collect-price{padding-top: 0; padding-bottom:0;}
  .shopdata-intro .intro-txt.collect #introrate{margin-bottom: 0;}

  .store-list-box .store-list-cover{height: 185px;}
}

@media screen and (min-width: 992px) and (max-width: 1200px){
  .raise-detail{height: 388px;}
  .raise-project .project-sup ul li img{margin-right: 5px;}
  .raise-project .project-sup ul li span{letter-spacing: 0;}
  .raise-project .project-sup ul li span:nth-child(3){right: 70px;}
  .shopdata-intro .intro-txt .title{font-size: 22px; line-height: 56px;}
  .shopdata-intro .intro-txt .title span{font-size: 16px; line-height: 26px; margin-top: 14px;}
  .shopdata-intro .intro-txt p + ul{padding: 10px 0 5px;}
  .shopdata-intro .intro-txt.collect p + ul{padding: 5px 0;}
}

@media screen and (min-width: 1200px){
  .raise-detail > p{line-height: 122px;}
  .raise-detail{height: 468px;}
  .raise-detail .detail-target{margin-bottom: 52px;}
  .shop-nav .shop-banner .layui-carousel img{margin-left: -15%;}

  .store-list-box .store-list-cover{height: 165px;}
}

@media screen and (min-width: 1366px){
  .layui-container{width: 1320px;}
  .raise-detail{height: 480px;}

  .store-list-box .store-list-cover{height: 188px;}
}

@media screen and (min-width: 1440px){
  .layui-container{width: 1400px;}
  .shopdata-intro .intro-txt #introrate{margin-bottom: 45px;}
  .shopdata-intro .intro-txt.collect #introrate{margin-bottom: 20px;}
  .shopdata-intro .intro-txt.collect .collect-price{padding-top: 15px; padding-bottom: 20px;}
  .shop-nav .shop-banner .layui-carousel img{margin-left: 0;}

  .store-list-box .store-list-cover{height: 200px;}
}