@charset "utf-8";












#bottom-fixed{display:block; position:fixed; border-top:1px solid #ddd; left:0; bottom:0; width:100%; background:#fff;  box-sizing:border-box; z-index:11; transition:0.2s;}
#bottom-fixed ul{text-align:center;}
#bottom-fixed ul li{width:calc(100% / 5);}
#bottom-fixed ul li a{font-size:15px; height:65px; display:flex; justify-content:center;   align-items:center; flex-direction:column;;}
#bottom-fixed ul li a i{display:block; font-size:22px;}
#bottom-fixed ul li a p{width:100%; margin-top:5px;}

#bottom-fixed ul li:nth-child(3) a i{font-size:30px;}

body[scrolling="down"] #bottom-fixed{bottom:-70px;}

@media all and (min-width:768px){
  #bottom-fixed{display:none; }
}



body:not(.scrolled) #bottom-recent{right:-80px;}

#bottom-recent{position:fixed; bottom:73px; right:10px; z-index:12; transition:0.2s;}
#bottom-recent .list{display:none; width:90px;  background:#fff; border:1px solid #ddd; box-sizing:border-box; padding:10px;}
#bottom-recent .list h2{font-size:13px; text-align:center;}
#bottom-recent .list ul{ }
#bottom-recent .list ul a{position:relative; right:0px; display:block; width:70px; height:70px; overflow:hidden; box-sizing:border-box; border-radius:5px; background:#fff; border:1px solid #ddd;}
#bottom-recent .list ul li + li{margin-top:3px;}
#bottom-recent .list ul li:focus a,
#bottom-recent .list ul li:hover a{width:220px; right:150px; padding-left:150px; box-shadow:5px 5px 5px rgba(0,0,0,0.05); border:1px solid #999; }
#bottom-recent .list ul li:focus a .info,
#bottom-recent .list ul li:hover a .info{position:absolute; left:0; top:0; width:150px; padding:8px; box-sizing:border-box; text-align:left; }
#bottom-recent .list ul .prd_thumb{overflow:hidden; width:100%; height:100%; }
#bottom-recent .list ul .prd_thumb img{width:100%; height:100%; object-fit:cover; object-position:center;}
#bottom-recent .list ul .info{display:none; position:absolute;left:0;top:0;width:150px;padding:5px;box-sizing:border-box;text-align:left;overflow:hidden;}
#bottom-recent .list ul li:hover .info{display:inline-block;}
#bottom-recent .list ul .info strong{margin:0 0 1px 0;font-size:13px;line-height:15px;letter-spacing:0.5px;color:#333; width:100%; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#bottom-recent .list ul .info p{line-height:15px; font-size:11px;}
#bottom-recent .list ul .info p span{display:block; line-height:15px; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#bottom-recent a.top{display:inline-block; width:35px; height:35px; display:flex; justify-content:center; align-items:center; color:#fff; font-size:17px; background:#222; border-radius:50%;}

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

  body:not(.scrolled) #bottom-recent{right:-100px;}

  #bottom-recent{bottom:20px;}
  #bottom-recent .list{display:block; margin-bottom:20px;}
  #bottom-recent a.top{width:40px; height:40px; font-size:20px;}
}




















#footer{padding:10px 0 60px 0; box-sizing:border-box; background:#24292d; text-align:center;}
#footer>.in{position:relative; max-width:1400px; margin:0 auto; box-sizing:border-box; padding:0 15px;}

#footer .top{margin-bottom:30px; border-bottom:1px solid #444; padding-bottom:10px; }
#footer .top>.in{position:relative; max-width:1400px; margin:0 auto; box-sizing:border-box; padding:0 15px;}
#footer .top h1{ }
#footer .top h1 a{color:#fff; font-size:15px; }
#footer .top h1 a span{display:inline-block; margin-left:10px; font-size:11px; color:#ccc; font-weight:300; }

#footer .util{}
#footer .util li{margin-right:20px;  }
#footer .util li + li:after{top:40%; transform:rotate(15deg); left:-10px;}
#footer .util li a{color:#fff;}
#footer .box{position:relative;  margin-bottom:20px; box-sizing:border-box; padding:0 20px; line-height:2;}
#footer .box p{color:#aaa;}
#footer .box p b{color:#fff;}
#footer .box p .toggle-info{cursor:pointer;}
#footer .box p .toggle-info i{transition:0.3s;}
#footer .box p .toggle-info.on i{transform:rotate(180deg);}
#footer .box p span{margin-right:15px;}
#footer .box p span.mo{display:none;}
#footer .box p span.call a{color:#b08f40; font-size:30px; font-weight:bold;}
#footer .box strong{color:#aaa; font-weight:normal;}

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

  #footer{text-align:left;}
  #footer .mo-only{display:none;}
  #footer>.in{}
  #footer .top{}
  #footer .top h1 a{font-size:25px; }
  #footer .top h1 a span{margin-left:15px; font-size:14px;}

  #footer .util{padding:15px 0;}

  #footer .box{margin:0; font-size:16px; padding:0;}
  #footer .box h2{font-size:25px;}
  #footer .box p{}
  #footer .box p .toggle-info{display:none;}
  #footer .box p span{margin-right:25px;}
  #footer .box p span.mo{margin-top:20px; display:block !important;}


}
























/**/