html { font-size: 13px; }
@media screen and (min-width: 320px) {
    html { font-size: 12px; }
}

@media screen and (min-width: 360px) {
    html { font-size: 13px; }
}

@media screen and (min-width: 414px) {
    html { font-size: 14px; }
}

@media screen and (min-width: 480px) {
    html { font-size: 15px; }
}
[v-cloak] { display: none; }
html{height:100%}
body {margin:0px auto;padding:0px;background:#fff;position:relative;max-width:680px;height:100%}
body, input, textarea { font-family: pingfang sc bold,microsoft yahei,宋体, verdana, arial, helvetica, sans-serif !important; }
ul,li,p,dl,dt,dd{list-style:none;margin:0px;padding:0px;}
h1,h2,h3,h4,h5,h6{padding:0px;margin:0}
a:link {color: #000;text-decoration: none;}
a:visited { color: #000; text-decoration: none; }
a:hover { color: #000; text-decoration: none }
a:active { color: #000; text-decoration: none }
.clear{clear:both}
.none { display: none; }
.p100{width:auto;height:auto;overflow:hidden}
.shadow {box-shadow:0 1px 2px rgba(0,0,0,.15);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.15);background:#fff }
img { border:0px }
.bold{font-weight:bold}
em,i { font-style: normal; }
.wrap { height:auto;width:100%;box-sizing:border-box}
.fr { float: right; }
.fl { float: left; }
.b-b-none { border-bottom: 0px!important; }
.greenFont{color:green}
.redFont,.red{color:red!important; }
.orangeFont { color:orange; }
.none { display: none!important; }
.fontshrink{-webkit-text-size-adjust:none;-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
.v-a { display: flex; align-items: center }
#main { min-height: 400px; height:100%}
.clearfix { width: 100%; height:auto}
.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; }
.tipdiv { font-size: 12px;background:#fffefc;color:#ffdbb4;padding:5px;box-sizing:border-box;margin:0 5px;border:1px solid #fff1e7;border-radius:2px }
.animationd05 { animation-duration: 0.5s; -webkit-animation-duration: 0.5s; }
.animationd04 { animation-duration: 0.4s; -webkit-animation-duration: 0.4s; }
.animationd03 { animation-duration: 0.3s; -webkit-animation-duration: 0.3s; }
.animationd02 { animation-duration: 0.2s; -webkit-animation-duration: 0.2s; }
.animationddelay02{-webkit-animation-delay:0.2s;animation-delay:0.2s}
.animationddelay04{-webkit-animation-delay:0.4s;animation-delay:0.4s}
.icon { width: 2em; height: 2em;  fill: currentColor; overflow: hidden; }
.d_loading { position: fixed; width: 100%; height: 100%; background: rgba(255,255,255,1); left: 0; top: 0; z-index: 9999; }
.d_loading p { position: relative; width: 60px; height: 60px; background: url(/images/hsy_logo.png) no-repeat center; left: 50%; top: 50%; z-index: 9999; background-size: 100% auto; margin-top: -30px; margin-left: -30px; border-radius: .6rem; overflow: hidden; -webkit-filter: opacity(80%) }
.d_loading p i { display: block; position: absolute; content: ' '; height: 80px; width: 100%; animation-name: d_loading_move; animation-fill-mode: forwards; animation-duration: 10s; overflow: hidden; top: 0px; }
.d_loading p i::before,
.d_loading p i::after { content: ''; position: absolute; width: 300px; height: 270px; border-radius: 55% 45%; background: rgba(0,0,0,0.6); bottom: 33%; left: 50%; transform: translateX(-50%); animation: d_loading_rotate 5s linear infinite; }
.d_loading p i::after { left: 41%; bottom: 30%; border-radius: 45% 50%; opacity: 0.3; }




.mask { background: rgba(0,0,0,0.55); position: fixed; height: 110%; width: 100%;left:0px }

@-webkit-keyframes d_loading_move {
    0% { top: 0px; }
    100% { top: -60px }
}

@keyframes d_loading_rotate {
    0% { transform: translate(-50%) rotateZ(0deg); }
    100% { transform: translate(-50%) rotateZ(360deg); }
}

.header { height: 3rem; width: 100%; background: var(--bg-color); top: 0px; z-index: 99; padding: 0 3rem 0 3rem; box-sizing: border-box; position: relative }
.header a { display: block; height:100%;width:100%;text-align:center}
.header svg { fill: #fff; font-size: 1rem; width: 1.6em; height: 1.6em; margin-top: .7rem }
.header .fl, .header .fr { width: 3rem; line-height: 3rem; height: 3rem; text-align: center; position: absolute; left: 0px; top: 0 }
.header .fr{right:0px;left:initial}
.header .title { text-align: center;line-height:3rem; font-size: 1.1rem; color: #fff; padding: 0 10px 0 10px; box-sizing: border-box; overflow: hidden; width: 100%; }

.mul-upload{width:100%;height:auto;overflow:hidden;line-height:initial}
.mul-upload .img { width: 19%; margin:.1rem 1% .1rem 0; background: #f6f6f6; color: #999; float: left; position: relative;box-sizing:border-box; }
.mul-upload .img img{width:100%;height:100%;position:absolute;top:0px;left:0px}
.mul-upload .img::after { content: ""; display: block; padding-top: 100%; }
.mul-upload .img:nth-child(5n) { margin-right: 0px }
.mul-upload .img .uping { position: absolute; text-align: center; width: 100%; height: 20px; top: 50%; margin-top: -10px }
.mul-upload .img .del {position:absolute;background:rgba(0,0,0,0.8);color:#fff;top:0px;right:0px;width:1.4rem;height:1.4rem;line-height:1.4rem;text-align:center }
.mul-upload .img .del svg { fill: #fff; width:1rem; height: 1rem;margin-top:.2rem }
.mul-upload .add svg { fill: #999; width: 1.5em; height: 1.5em; margin-bottom: .2rem }
.mul-upload .add { text-align: center; color: #999; position: relative; display: flex; align-items: center }
.mul-upload .add p { width: 100%; }
.mul-upload .add input { position: absolute; top: 0; left: 0px; width: 100%; height: 100%; filter: alpha(opacity:0); opacity: 0; }

.mint-toast, .mint-indicator-wrapper { z-index: 3002 !important }
.mint-toast-icon { font-size: 30px !important }

.btn { background: var(--bg-color); font-size: 1.1rem; text-align: center; display: block; padding: 1rem; border-radius: .5rem; color: #fff!important }
.btn:visited{color:#fff}

.random-ad{width:100%;height:auto;overflow:hidden;position:relative}
.random-ad:after{position:absolute;content:'广告';background:rgba(0,0,0,.8);font-size:.8rem;color:rgba(255,255,255,0.7);right:5px;bottom:5px;border-radius:.2rem;padding:.2rem .5rem}
.random-ad img { width: 100% }

.cus-select { }
.cus-select.exp { position: relative; z-index: 1001; }
.cus-select-box { height: 40px; line-height: 40px; border-bottom: 1px solid #eee; background: #fff; font-size: 13px; box-sizing: border-box; display: none }
.cus-select-box a { color: #646464; display: block; text-align: center; float: left; position: relative; width: 100% }
.cus-select-box a:visited { color: #646464; }
.cus-select-box a em { position: relative; display: inline-block; padding-right: 30px }
.cus-select-box a em:after { content: ""; position: absolute; top: 48%; right: 14px; margin-top: -5px; width: 7px; height: 7px; border-top: 1px solid #ddd; border-right: 1px solid #ddd; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
.cus-select-box.col1 a { width: 100% }
.cus-select-box.col2 a { width: 50% }
.cus-select-box.col3 a { width: 33.3% }
.cus-select-box.col4 a { width: 25% }
.cus-select-box a:after { content: ""; position: absolute; top: 10px; right: 0px; width: 1px; height: 20px; border-left: 1px solid #e9e9e9; }
.cus-select-box a:last-child::after { display: none; }
.cus-select-box a.on em:after { -moz-animation: cus-select-rotate 0.5s; -webkit-animation: cus-select-rotate 0.5s; animation: cus-select-rotate 0.5s; -webkit-transform: rotate(315deg); -webkit-transform-origin: 95% 50% }
.cus-select-box a.on:before { content: ""; background: #fff; position: absolute; bottom: -3px; left: 50%; margin-left: -7px; width: 7px; height: 7px; border-top: 1px solid #ddd; border-right: 1px solid #ddd; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.cus-select-menu { background: #fff; width: 100%; box-sizing: border-box; position: absolute; z-index: 101; height: auto; overflow: hidden; display: none; top: 40px; font-size: 15px }
.cus-select-menu a { display: block; color: #323232; height: 45px; line-height: 45px; padding: 0 15px; border-bottom: 1px solid #eee; overflow: hidden }
.cus-select-menu a.sel { color: var(--front-color); }
.cus-select-menu.sec-class div { float: left; width: 50%; height: auto; overflow: hidden }
.cus-select-menu.sec-class div:first-child { background: #f5f5f5; }
.cus-select-menu.sec-class div:first-child a.sel { background: #fff; color: #323232; border-bottom-color: #eee }
.cus-select-menu.sec-class div:last-child { padding: 0 10px; box-sizing: border-box }
.cus-select-menu p { display: none; }

@-moz-keyframes cus-select-rotate {
    0% { -moz-transform: rotate(135deg); }
    100% { -moz-transform: rotate(315deg); }
}

@-webkit-keyframes cus-select-rotate {
    0% { -webkit-transform: rotate(135deg); }
    100% { -webkit-transform: rotate(315deg); }
}

@keyframes cus-select-rotate {
    0% { transform: rotate(135deg); }
    100% { transform: rotate(315deg); }
}


#b-menu { position: fixed; bottom: 0; left: 0; height: 50px; background: #fff; width: 100%; font-size: 12px; border-top: 1px solid #f0efed; z-index: 2; }
#b-menu a { display: inline-block; float: left; text-align: center; color: #888; position: relative; line-height: 20px; }
#b-menu svg { height: 26px; line-height: 30px; display: block; font-size: 20px; text-align: center; clear: both; width: 26px; margin:2px auto 0 auto; }
#b-menu .sel i { font-size: 24px; background: #f1564e; background: var(--bg-color); color: #fff; border-radius: 50%; position: absolute; top: -14px; left: 50%; margin-left: -22px; width: 38px; height: 38px; line-height: 38px; border: 3px solid #fff; -webkit-box-shadow: 0 -2px 6px rgba(0,0,0,0.12); }
#b-menu .sel { color: #f1564e; color: var(--bg-color); padding-top: 28px }
#b-menu .sel em { color: #fff; border-radius: 50%; position: absolute; top: -14px; left: 50%; margin-left: -22px; width: 38px; height: 38px; border: 3px solid #fff; overflow: hidden }
#b-menu .sel em img { width: 100%; height: 100% }
#b-menu em { width: 30px; height: 28px; line-height: 30px; display: block; clear: both; margin: 0 auto; text-align: center }
#b-menu em img { width: 28px; height: 28px }

.no-more { width: 100%; text-align: center; color: #999; padding: 10px 0; }
.loading-more { margin: auto; display: table; }
.loading-more-txt { display: inline-block; width: 100%; text-align: center; color: #999; height: 3rem; line-height: 3rem; }

/*地图显示*/
.map-show { height: 100%; width: 100%; background: #fff; z-index: 9999 }
.map-show .m-header { height: 46px; line-height: 46px; text-align: center; color: #888; font-size: 16px; background: #fff; position: relative; }
.map-show .m-header .back { color: #888; display: block; position: absolute; left: 5px; top: 10px; width:20px;height:20px; }
.map-show .m-header .go { color: #888; display: block; position: absolute; right: 5px; top: 7px; font-size: 13px; border: 1px solid #ccc; border-radius: 3px; height: 30px; line-height: 30px; padding: 0 10px; }
.map-show #map2 { width: 100%; height: calc(100% - 40px); }

.commentor{width:100%;background:#fff;position:relative;box-sizing:border-box;padding:10px 60px 10px 10px;height:70px}
.commentor .f-l{width:100%;height:100%}
.commentor .f-l textarea { width: 100%; height: 100%; border: 0px; background: #eee; border-radius: .2rem ;line-height:1.6em;padding:5px;box-sizing:border-box}
.commentor .f-r{position:absolute;right:0px;right:0px;top:0px;height:100%;width:45px}
.commentor .f-r p { font-size: 1.1rem; color: var(--text-color); text-align: center;position:absolute;bottom:8px;letter-spacing:.1rem}
.commentor.expand{height:200px}
.commentor .f-r i{color:#999;float:right;margin:10px 15px 0 0;font-size:1.2rem}

.comm-s { width: 100%; height: 100%; border-radius: .9rem .9rem 0 0;}
.comm-s .co-t { height: 3rem; line-height: 3rem; border-bottom: 1px solid #eee; text-align: center;position:relative;font-size:1.1rem;color:#999 }
.comm-s .co-t svg { position: absolute;top:11px; right: 8px; fill: #999; width: 1.1em; height: 1.1em; margin-bottom: .2rem }
.comm-s .co-i { position: relative; padding: 10px 10px 10px 50px; box-sizing: border-box }
.comm-s .co-i .face { width: 30px; height: 30px; position: absolute; left: 10px; top: 12px; }
.comm-s .co-i .face img { width: 100%; border-radius: 50%; }
.comm-s .co-m-t { height: 2rem; line-height: 2rem; font-size: 1rem; color: #999; position: relative }
.comm-s .co-m-m{font-size:1.05rem;color:#333;line-height:1.6em;margin:.1rem 0 .4rem 0}
.comm-s .co-m-date { font-size: .9rem; color: #999;margin-bottom:.3rem }
.comm-s .co-m-d { height: 2rem; line-height: 2rem; color: #333;font-size:.9rem; position:relative}
.comm-s .co-m-d img{width:20px;height:20px;border-radius:50%;margin-right:5px;float:left;margin-top:.1rem}
.comm-s .co-m-d p {float:left }
.comm-s .co-dz { position: absolute; top: 15px; right: 10px;width:25px;text-align:center;z-index:1 }
.comm-s .co-dz svg {  fill: #999; width: 1em; height: 1em; }
.comm-s .co-main { border-bottom: 1px solid #ddd }
.co-sub { position: fixed; bottom: 0px; left: 0px; width: 100%; height: 3.2rem; background: #fff; padding: 5px 10px; box-sizing: border-box;z-index:2 }
.co-sub input { width: 80%; height: 100%; border: 0px; border:1px solid #ddd ;padding: 5px; box-sizing: border-box;float:left;height:2.4rem;border-radius:1.2rem }
.co-sub p { font-size: 1.1rem; color: #fff; text-align: center; width: 18%; float: right; height: 2.4rem; line-height: 2.4rem; text-align: center; background-image: linear-gradient(to right,var(--gradual-start-color),var(--gradual-end-color)); border-radius: 1.2rem }
.co-list { overflow-y: auto; height:90%;margin-bottom:4rem}
.comm-s .load-icon{text-align:center;height:20px;width:100%}
.comm-s .load-icon div{margin:0 auto}
.comm-s .load-finish { text-align: center; padding:5px 0;color:#999; width: 100% }

[v-cloak] { display:none;}

.marquee_box { position: relative; height: 30px; overflow: hidden }
.marquee_list { position: relative; top: 0px; left: 0px }
.marquee_list li { height: 30px }
.marquee_top { animation: marqueetop; }
@keyframes marqueetop {
    from { top: 0px; }
    to { top: -30px; }
}

._notice{ }
._notice .mask { position: fixed; top: 0; z-index: 1000; }
._notice .box { z-index: 1002; position: fixed; top: 50%; width: 80%; overflow: hidden; height: auto; left: 10%; border: 3px solid var(--front-color); box-sizing: border-box; padding: 1.5rem 1.5rem 3.5rem 1.5rem; background: #fff; border-radius: 1rem;margin-top:-15rem }
._notice .box .title {  line-height: 1.6em; font-size: 1.2rem; text-align: center; color: var(--text-color) ;height:auto;overflow:hidden}
._notice .box .time { height: 2rem; line-height: 2rem; font-size: .9rem; text-align: center; color: #999 }
._notice .box .content { margin: 1rem 0 2rem 0; height:auto;max-height:15rem;overflow-y:auto;color: #333; line-height: 1.6em;font-size:1rem }
._notice .box .content img { width: 100% }
._notice .box .bottom { position: absolute; height: 3.5rem; line-height: 3.5rem; text-align: center; bottom: 0; left: 0; box-sizing: border-box; border-top: 1px solid #eee; right: 0; }
._notice .box .bottom .b { width: 50%; float: left; height: 100%; color: #999; font-size: 1.3rem;  letter-spacing: 2px; }
._notice .box .bottom .sel { color: var(--text-color) }

.marker-map { position: absolute; height: 100%; width: 100%; background: #fff; left: 0px; top: 0px; z-index: 1001 }
.marker-map .m-header { height: 40px; line-height: 40px; text-align: center; color: #fff; font-size: 16px; background: var(--bg-color); position: relative; }
.marker-map .m-header a { color: #fff; display: block; width: 40px; position: absolute; left: 0px; top: 0px; font-size: 20px; }
.marker-map .m-header svg { width: 20px;}
.marker-map .m-now { height: 40px; line-height: 40px; overflow: hidden; border-bottom: 1px solid #e8e8e8; padding: 0 10px; box-sizing: border-box; font-size: 14px; color: #666; position: relative }
.marker-map .m-now div { width: 70px; background: #fff; text-align: center; position: absolute; right: 0px; top: 0px; font-size: 12px; color: #ff7f00 }
.marker-map .m-s { height: 40px; line-height: 40px; overflow: hidden; border-bottom: 1px solid #e8e8e8; position: relative; padding: 0 40px 0 10px; box-sizing: border-box; }
.marker-map input { height: 100%; width: 100%; border: 0 }
.marker-map a { display: block; width: 40px; color: #ccc; font-size: 20px; position: absolute; right: 0px; top: 0px; text-align: center }
.marker-map svg{width:24px;}
.marker-map #markermap { width: 100%; /*height:calc(100% - 120px)*/ height: 300px }
.marker-map .as { background: #fff; }
.marker-map .as li { height: 75px; color: #333; box-sizing: border-box; padding: 10px 80px 10px 10px; position: relative; border-bottom: 1px solid #e8e8e8 }
.marker-map .as h3 { font-size: 18px; height: 34px; line-height: 34px; overflow: hidden; font-weight: normal }
.marker-map .as p { font-size: 12px; color: #999; height: 20px; overflow: hidden; line-height: 1.6em }
.marker-map .as em { color: #ff7f00; border: 1px solid #ff7f00; padding: 4px 6px; font-size: 13px; position: absolute; right: 10px; top: 17px; border-radius: 3px }

#footer { text-align: center; padding: 10px 0 50px 0; font-size: 12px; color: #999; line-height: 2.0em }
.free-cr { text-align: center; color: #ccc; padding: 10px 0 5px 0 }
.free-cr a { color: #ccc !important; }

/*客服弹窗*/
.kfbox { position: fixed; top: 3rem; left: 1rem; right: 1rem; z-index:1001;background:#fff;border-radius: 1rem; padding: 2rem; background: -webkit-linear-gradient(90deg, var(--gradual-start-color), var(--gradual-end-color)); background: -o-linear-gradient(90deg, var(--gradual-start-color), var(--gradual-end-color)); background: -moz-linear-gradient(90deg, var(--gradual-start-color), var(--gradual-end-color)); background: linear-gradient(90deg, var(--gradual-start-color), var(--gradual-end-color)); }
.kfbox .title { width: 100%; height: 2rem; line-height: 2rem; text-align: center; font-size: 1.5rem; color: #fff; letter-spacing: 2px; }
.kfbox .tip { width: 100%; font-size: .8rem; text-align: center; color: #FFF; margin-bottom:.6rem;}
.kfbox .mbox { width: 100%; height: auto; padding:2rem;background: #fff; border-radius: 10px; margin-bottom: 5px;box-sizing:border-box; }
.kfbox .mbox .tit { width: 100%; text-align: center; height: 2rem; line-height: 2rem; }
.kfbox .mbox .img { width: 8rem; height: 8rem; margin: auto;display:block }
.kfbox .mbox .tt { color:#999;font-size:.8rem }
.kfbox .mbox.m2 { width: 49%; margin-right: 2%; float: left; padding: 1rem; }
.kfbox .mbox.m2:last-child { margin-right: 0; }
.kfbox .mbox .c { width: 3rem; height: 3rem; border-radius: 50%; display: block; margin: auto; border: 1px solid var(--front-color); margin-bottom: 1rem; }
.kfbox .mbox .c svg { width: 1.6rem; height: 1.6rem; margin: auto; fill: var(--bg-color); display: block; margin: auto; margin-top: .7rem; }
.kfbox .mbox .b { display:block;width: 80%; margin: auto; text-align: center; background: var(--bg-color);font-size:.9rem;color:#fff;border-radius:1rem;padding:.2rem 0; }
.kfbox .cr { color: rgba(255,255,255,.5); text-align: center; width: 100%; margin-top: .5rem }
.kfbox .cr a { color: rgba(255,255,255,.5) !important; }

.actionSheet_wrap { width: 100%; }
.actionSheet_wrap .mask { position: fixed; }
.cus_actionsheet { position: fixed; left: 0; bottom: 0; transform: translate(0, 100%); -webkit-transform: translate(0, 100%); backface-visibility: hidden; z-index: 1000; width: 100%; background-color: #fff; transition: transform .3s; -webkit-transition: transform .3s }
.cus_actionsheet_toggle { transform: translate(0, 0); -webkit-transform: translate(0, 0); }
.actionSheet_wrap .h3 { height: 42px; line-height: 42px; border-bottom: 1px solid #dedede; padding: 0 10px; color: #333; text-align: center; font-size: 16px }
.actionSheet_wrap .h3 em { overflow: hidden; position: absolute; top: 1px; right: 0px; color: #535353; display: block; width: 30px; text-align: center }
.actionSheet_wrap .h3 em i { color: #bbb }