@charset "utf-8";



.shoplb ul li{width:25%;text-align:center; float:left;list-style: none; margin: 0px; padding: 0px;}

.shoplb ul li.onli a{color:#00c1de; }  

.shoplb ul li a{color: #63686B;font-size:20px}

.shoplb i{font-size:46px; padding-right:20px}

.shopbg{background:#F8F8F8; padding:20px 0px 0px}

.shopbg p{padding:0px 10%}



.shopdivimg

{padding-bottom:0px; overflow:hidden; text-align: center}

.shopdivimg img{margin:0px auto;}

.shopdivimg ul

{margin:0; padding:0;}

.shopdivimg ul li

{width:20%; text-align:center; float:left; position:relative; cursor:pointer; list-style:none; overflow:hidden;}

.shopdivimg ul li a

{display:block;}

.shopdivimg ul li .item-bg

{width:100%;}

.shopdivimg ul li .mask

{width:100%; position:absolute; left:0;right:0;top:0;bottom:0;}



.shopdivimg .mask .bg

{position:absolute;left:0;right:0;top:0;bottom:0;background:#161a1d;opacity:.6;filter:alpha(opacity=60);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(60));transition:all .4s cubic-bezier(.4,0,.2,1)}

.shopdivimg .mask .bg.other-bg

{opacity:.82;filter:alpha(opacity=82);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(82))}

.shopdivimg .mask .content

{position:absolute;left:0;right:0;top:100px;bottom:0;transition:all .4s cubic-bezier(.4,0,.2,1)}

.shopdivimg .mask .content .line-panel

{padding:0;margin:0;font-size:0;line-height:0;margin-top:20px;transition:all .4s cubic-bezier(.4,0,.2,1)}

.shopdivimg .mask .content .line-panel .item-line

{width:20px;height:2px;background:#fff;display:inline-block;opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100));transition:all .4s cubic-bezier(.4,0,.2,1)}

.shopdivimg .mask .content .item-img-panel

{position:relative;width:25%;height:54px;display:inline-block; font-size:50px; color:#fff; text-align:center; font-family: "iconfont" !important;}

.shopdivimg .mask .content .item-img-panel .item-img,.shopdivimg .mask .content .item-img-panel .item-img-hover

{position:absolute;left:0;right:0;top:0;width:100%;display:inline-block;opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100));transition:all .4s cubic-bezier(.4,0,.2,1)}

.shopdivimg .mask .content .item-img-panel .item-img-hover

{opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0));transition:all .4s cubic-bezier(.4,0,.2,1)}

.shopdivimg .mask .content .item-title

{color:#fff;font-size:22px;line-height:24px;margin:0;padding:0;margin-top:24px;font-weight:700;transition:all .4s cubic-bezier(.4,0,.2,1)}

.shopdivimg .mask .content .item-desc

{font-size:14px;color:#fff;text-align:center;margin-top:30px;padding:0 23px;line-height:24px;height:72px}

.shopdivimg .mask .content .item-link

{display:inline-block;border:1px solid #fff;width:120px;height:36px;line-height:36px;font-size:14px;color:#fff;text-decoration:none;margin-top:62px}

.shopdivimg .mask .content .item-link:hover

{color:#00c1de;background:#fff}

.shopdivimg .mask .content .item-desc,.shopdivimg .content .item-link

{opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0));transition:all .4s cubic-bezier(.4,0,.2,1)}

.shopdivimg ul li:hover .bg

{background:#00c2de;opacity:.9;filter:alpha(opacity=90);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(90))}

.shopdivimg ul li:hover .bg.other-bg

{opacity:.9;filter:alpha(opacity=90);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(90))}

.shopdivimg ul li:hover .content{top:13%}

.shopdivimg ul li:hover .content .item-img-panel .item-img

{opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0))}

.shopdivimg ul li:hover .content .item-img-panel .item-img-hover

{opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100))}

.shopdivimg ul li:hover .content .line-panel

{margin-top:10px}

.shopdivimg ul li:hover .content .line-panel .item-line

{opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0))}

.shopdivimg ul li:hover .content .item-title

{margin-top:12px}

.shopdivimg ul li:hover .content .item-desc,.shopdivimg ul li:hover .content .item-link

{opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100))}

.shopdivimg ul li:hover .content .item-desc

{margin-top:22px}

.shopdivimg ul li:hover .content .item-link

{margin-top:14%}



.shoplm i{font-size:30px; border:1px solid #E9E9E9; border-radius:50%; width:75px; height:75px; text-align:center; display: inline-block; line-height:80px; color:#9D9B9B}

.shoplm{text-align:center;padding:20px 0px}

.shoplm  h4{font-size:16px; font-weight:bold}

.shoplm p{font-size:12px; color:#838383;padding-bottom:10px}

.shoplb1{background:#525252;padding-bottom:0px;}

.shoplb1 h2,.shoplb1 p{color:#FFFFFF}

/*手机超小屏幕下的单独样式 xs < 768px */





@media (min-width: 300px) and (max-width: 766px){

  .shopbg p{display:block}

.shoplb ul li a{color: #63686B;font-size:14px}

  .shoplb i{font-size:26px; padding-right:0px; display:block; text-align:center}

  .shoplb span{display:none}  

  

/*代理分销商城*/  

.shopdivimg  ul li

{width:50%;}

.shopdivimg  ul .li5

{display:none;}

.shopdivimg .mask .content{top:50px;}

.shopdivimg .mask .content .item-img-panel

{height:40px; font-size:40px;}

.shopdivimg .mask .content .item-title

{margin-top:20px; font-size:18px; font-weight:normal;}

.shopdivimg .mask .content .item-desc 

{margin-top:20px; padding: 0 10px; font-size:12px;}

.shopdivimg ul li:hover .content{top:10px;}

.shopdivimg ul li:hover .content .item-title 

{margin-top:8px;}

.shopdivimg ul li:hover .content .line-panel

{margin-top:0px}

.shopdivimg ul li:hover .content .item-desc

{margin-top:5px}  

}





/*平板小屏幕样式 768px <= sm < 992px */

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

/*代理分销商城*/

.shopdivimg  ul li

{width:25%;}

.shopdivimg  ul .li5

{display:none;}

.shopdivimg .mask .content{top:50px;}

.shopdivimg .mask .content .item-title

{margin-top:20px; font-size:20px; font-weight:normal;}

.shopdivimg .mask .content .item-desc 

{margin-top:20px;}

.shopdivimg ul li:hover .content{top:20px;}

.shopdivimg ul li:hover .content .line-panel

{margin-top:0px}

.shopdivimg ul li:hover .content .item-desc

{margin-top:5px}



}



/*大于992px以上固定宽度为970px md >= 992px */

@media (min-width: 992px) and (max-width: 1199px){

/*代理分销商城*/

.shopdivimg .mask .content{top:50px;}

.shopdivimg .mask .content .item-title

{margin-top:20px; font-size:20px; font-weight:normal;}

.shopdivimg .mask .content .item-desc 

{margin-top:20px;}

.shopdivimg ul li:hover .content{top:20px;}

.shopdivimg ul li:hover .content .line-panel

{margin-top:0px}

.shopdivimg ul li:hover .content .item-desc

{margin-top:5px}



}