@charset "utf-8";
/* CSS Document */
html,body {color:#333;margin:0;height:100%;font-family:"Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:normal;}
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
a {text-decoration:none;color:#000;}
a,label,button,input,select {-webkit-tap-highlight-color:rgba(0,0,0,0);}
body {background:#fff;}
html,body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,p,blockquote,pre,button,fieldset,form,input,legend,textarea,th,td {margin:0;padding:0;}
a {text-decoration:none;}
button {outline:0;}
img {border:0;}
button,input,optgroup,select,textarea {margin:0;font:inherit;color:inherit;outline:none;}
li {list-style:none;}
.clear{ clear:both;}
.pt50{ margin-top:50px;}
.h70{ height:60px;}
.bottom_nav_60{height:calc(55px + constant(safe-area-inset-bottom)); height:calc(55px + env(safe-area-inset-bottom));}
/*====全局连接-link====*/
.header{position:fixed; height:50px;width:100%; z-index: 3;}
.header .back{ position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background: rgba(0,0,0,0.3); border-radius: 50%;display: flex; justify-content: center;align-items: center;}
.header .back img{ width: 20px; }
.header .title{ text-align: center; width: 100%; line-height: 50px; }
.header .share{position: absolute; top: 10px; right: 10px;width: 30px; height: 30px; background: rgba(0,0,0,0.3); border-radius: 50%;display: flex; justify-content: center;align-items: center;}
.header .share img{ width: 20px;}
.header.active{background: rgba(0,0,0,0.8);position: fixed;top:0;left:0;z-index: 11;width: 100%;}



.listtop{height:50px;width:100%; background: #000;}
.listtop .back{ position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background: rgba(0,0,0,0.3); border-radius: 50%;display: flex; justify-content: center;align-items: center;}
.listtop .back img{ width: 20px; }
.listtop .title{ text-align: center; width: 100%; line-height: 50px; color: #fff;}
.listtop.active{background: rgba(0,0,0,0.8);position: fixed;top:0;left:0;z-index: 11;width: 100%;}





.footer {position: fixed;left: 0;bottom: 0;width: 100%;height:calc(55px + constant(safe-area-inset-bottom)); height:calc(55px + env(safe-area-inset-bottom));z-index:1;background: #fff; padding-top: 5px;border-top:1px solid #f3f3f3;display: flex;flex-direction: row;justify-content:space-around;}
.footer .foot_nav {text-align: center;overflow: hidden;position: relative;}
.footer .foot_nav .navico{height: 26px; width: 100%; text-align: center;}
.footer .foot_nav .navico img{ width:26px; height: 26px; text-align: center;}
.footer .foot_nav .foot_txt{ font-size:12px; height: 20px; line-height: 20px; color: #656565;}
.totop{width: 38px; height: 38px; border-radius: 50%;display: flex; justify-content: center;align-items: center; position: fixed; bottom: 150px; right: 10px; background: #000;}
.totop img{width: 24px; height: 24px; display: block;}

.mask{width: 100%; height: 100%; position: fixed; top: 0; background: rgba(0,0,0,0.6); z-index: 12; display: none;}