body,html{background-color:#fff}
.clearfix:after,.warp::after{width:100%;height:1px;display:block;clear:both;content:''}
@font-face{font-family:templateIcon;src:url(../font/font_973178_5ngknmv0rqb.eot);src:url(../font/font_973178_5ngknmv0rqb.eot) format('embedded-opentype'),url(../font/font_973178_5ngknmv0rqb.woff2) format('woff2'),url(../font/font_973178_5ngknmv0rqb.woff) format('woff'),url(../font/font_973178_5ngknmv0rqb.ttf) format('truetype'),url(../font/font_973178_5ngknmv0rqb.svg) format('svg')}
._templateIcon{font-family:templateIcon;font-style:inherit}
.container{position:relative;max-width:640px;height:auto;background:#fff;margin:auto}
.map{width:100%;height:40vh;position:relative;background:#0cc}
.search_box{width:90%;height:45px;position:absolute;left:5%;background:#fff;border-radius:3px;top:25px}
.search_box input{width:calc(100% - 45px);height:100%;border:none;outline:0;text-indent:15px}
.search_box .search_btn{width:45px;height:45px;position:absolute;right:0;top:0;line-height:45px;text-align:center;font-size:22px}
.local_pos{width:100%;height:auto;position:relative;overflow:hidden;border-bottom:10px solid #f5f5f5}
.local_pos .icon{width:20px;height:auto;float:left;margin-left:5px;margin-top:12.5px}
.local_pos .txt{width:calc(36% - 25px);float:left;line-height:45px;font-size:14px;font-weight:700;height:45px;padding:0 5px;box-sizing:border-box}
.local_pos .tips{width:35%;float:left;line-height:45px;padding:0 5px;box-sizing:border-box}
.local_pos .change_city{float:right;width:29%;line-height:45px;background:#b82837;padding:0 5px;color:#fff;box-sizing:border-box;text-align:center}
.main{width:100%;height:auto;position:relative}
.main .tips{width:100%;height:auto;position:relative;color:#b82837;line-height:20px;box-sizing:border-box;padding:10px 3%;border-bottom:1px solid #f5f5f5}
.main .tips b{padding:0 3px}
.main .tips::after{width:150px;height:1px;background:#b82837;content:'';position:absolute;left:3%;bottom:0}
.shop_list{width:100%;height:auto;position:relative;box-sizing:border-box;padding:0 3%}
.shop_list .li{display:block;width:100%;height:auto;position:relative;overflow:hidden;border-bottom:5px solid #f5f5f5}
.shop_list .li:last-child{border-bottom:none}
.shop_list .li .shop_top{width:100%;height:auto;padding:10px 0;overflow:hidden}
.shop_list .li .shop_top .num{width:25px;height:25px;float:left;background:#b82837;color:#fff;line-height:25px;font-size:12px;text-align:center;border-radius:50%}
.shop_list .li .shop_top .name{width:calc(100% - 35px);height:auto;float:left;margin-left:10px;font-weight:700;font-size:16px;line-height:25px}
.shop_list .li .shop_add{width:100%;height:auto;line-height:1.4;opacity:.7;margin-bottom:10px}
.shop_list .li .shop_dis{width:100%;height:auto;position:relative;overflow:hidden;}
.shop_list .li .shop_dis .dis{width:auto;padding:0 10px;line-height:30px;float:left;border:1px solid #b82837;color:#b82837;border-radius:30px}
.shop_list .li .shop_dis .icon{width:20px;height:20px;float:right;background:url(../image/more.png) no-repeat;background-size:cover;opacity:.3}
.banner{width:100%;height:auto;position:relative}
.target{font-weight:700;font-size:16px;line-height:25px;width:calc(100% - 25px);border-bottom:1px solid rgba(0,0,0,.05);padding-bottom:5px;margin-bottom:10px;padding-left:25px;position:relative}
.target::after{width:20px;height:20px;position:absolute;left:0;top:2.5px;background:url(../image/pos_icon.png) no-repeat;background-size:cover;content:''}
.sub_con{width:100%;box-sizing:border-box;padding:10px 3%}
.sub_con .info{overflow:hidden}
.sub_con .goon{line-height:50px;margin:25px auto;float:right;width: 49%;height:50px;background:#b82837;color:#fff;text-align:center;font-size:16px;position: relative;}
.sub_con .goon::after{content:'';background-image: url(../image/iconNav.png);border-radius: 50%;background-position: center center;background-repeat: no-repeat;background-size: cover;width: 30px;height: 30px;position: absolute;left: 16px;margin-left: 0;top: 10px;}
.adds{width:100%;height:auto}
.adds ul li{width:100%;height:auto;line-height:20px;font-size:14px;overflow:hidden;margin-bottom:10px;color:rgba(0,0,0,.5)}
.adds ul li .icon{width:20px;height:20px;float:left;opacity:.5}
.adds ul li .t{width:65px;height:20px;float:left;margin-left:5px;position:relative}
.adds ul li .txt{width:calc(100% - 100px);height:auto;float:left;margin-left:10px}
.adds ul li .t::after{width:10px;height:1px;position:absolute;right:-5px;bottom:50%;content:'';background:rgba(0,0,0,.5);display:block}
.shop_tel{width: 49%;height:50px;background:#b82837;color:#fff;line-height:50px;margin:25px auto;text-align:center;font-size: 16px;position:relative;display:block;float:left;text-indent: 3rem;}
.shop_tel::after{width:30px;height:30px;position:absolute;left:16px;margin-left:0;top:10px;content:'';display:block;background:url(../image/tel_icon1.png) no-repeat;background-size:cover}
.shop_tel::before{position:absolute;left:16px;margin-left:0;top:10px;width:30px;border-radius:50%;height:30px;border:1px solid #fff;box-sizing:border-box;content:'';display:block;opacity: 0;}
.loding{position:fixed;top:0;height:100%;width:100%;left:0;z-index:20;transition:ease .5s}
.loding.active{opacity:0;visibility:hidden}
.loding img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;width:40%}
._citys0{width:100%;height:34px;display:block;padding:0;margin:0;border-bottom:1px solid #0ab78d}
._citys0 li{float:left;height:34px;line-height:34px;overflow:hidden;font-size:15px;color:#888;width:80px;text-align:center;cursor:pointer}
.citySel{background-color:#b21118;color:#fff!important}
._citys1{width:100%;height:calc(100% - 35px);display:block;overflow:auto;margin-top:1px;padding-bottom:25px}
._citys1 a{height:35px;display:block;color:#666;padding-left:25px;line-height:35px;cursor:pointer;font-size:13px;overflow:hidden;border-bottom:1px solid #e3e3e3;width:96%;margin:0 auto;position:relative;box-sizing:border-box}
#cityList{height:100px;border-bottom:1px solid #ccc;position:absolute;width:100%;background:#fff;z-index:20;opacity:0;top:0;visibility:hidden}
#cityList.active{opacity:1;visibility:inherit}
.btnSearchCity{height:40px;width:30%;background:#0ab78d;color:#fff;position:absolute;bottom:2%;left:35%;text-align:center;line-height:40px;font-size:14px;cursor:pointer}
#PoPy{height:calc(100% - 60px)!important;bottom:auto!important;top:0}
._citys{width:100%;height:100%;display:block;position:relative;background:#fff;overflow:hidden}
._citys span{color:#0ab78d;height:20px;width:20px;line-height:22px;text-align:center;border-radius:3px;position:absolute;right:10px;top:6px;border:1px solid #0ab78d;cursor:pointer;font-size:13px}
._citys0 li{float:left;height:34px;line-height:34px;overflow:hidden;font-size:15px;color:#888;width:80px;text-align:center;cursor:pointer}
.citySel{background-color:#0ab78d;color:#fff!important}
._citys1{width:100%;height:calc(100% - 35px);display:block;overflow:auto;margin-top:1px;padding-bottom:25px}
.ui-content{line-height:30px;background:#fff;margin:10px;border:1px solid #e4e4e4;padding:10px}
.cityListli{background:#fff;position:absolute;top:100%;z-index:5;width:100%;max-height:250px;overflow-y:auto;box-shadow:0 0 13px rgba(0,0,0,.3)}
.cityListli li{padding:10px 25px}
.Linkage{border-bottom:1px solid #0ab78d;overflow:hidden}
.Linkage .input{height:34px;line-height:34px;float:left;width:calc(100% / 3)}
.Linkage select{-webkit-appearance:none}
.Linkage select{height:34px;line-height:34px;background-color:#fff;color:#888;border:none;width:100%;font-size:16px;text-align:center;}
@-webkit-keyframes loops{
0%{-webkit-transform:scale(1);opacity:1}
100%{-webkit-transform:scale(1.8);opacity:0}
}

.dibu{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 15px;   
}

.uerdh{
    display: flex;
    line-height: 30px;
    border: 1px solid #b82837;
    border-radius: 30px;
    margin-left: 10px;
    align-items: center;
    padding-right: 10px;
    color: #b82837;
}

.uerdh:hover{
    color: #b82837;
}

.uerdh .dh{
    width: 20px;
    height: auto;
    margin-left: 8px;
    margin-right: 5px;
}


@media screen and (max-width:320px){
.local_pos .tips{font-size:12px}
}


  body {
            
            color: #333;
            line-height: 1.6;
            padding-top: 80px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
     
		
		
		 .top {
            width: 100%;max-width: 640px;
            padding: 10px 15px;
         background:linear-gradient(69deg, #333 -36%, #b82837 51%);
            box-shadow: 0 4px 15px rgba(106, 74, 165, 0.25);
			 position: fixed;
          
            top: 0;
            z-index: 100;
        }
        
		 .top::after {
               content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ccc, #b82837, #ccc);
        }
        .logo {
            text-align: center;
            padding: 2px 0;
        }
        
        .logo img {
            height: 22px; /* 根据实际logo调整高度 */
            width: auto;
            max-width: 100%;margin: 0 auto;
        }
        
        .toptit {
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            color: #fff;
            padding: 3px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* 响应式调整 */
        @media (max-width: 480px) {
            .logo img {
                height: 25px;margin: 0 auto;
            }
            
            .toptit {
                font-size: 20px;
            }
        }
        
        /* 搜索区域 */
        .search-box {
            padding: 20px 15px 15px;
            position: relative;
        }
        
        .search-container {
            background: white;
            border-radius: 30px;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 5px 15px rgba(138, 108, 192, 0.2);
            transition: all 0.3s ease;
        }
        
        .search-container:focus-within {
            box-shadow: 0 5px 20px rgba(138, 108, 192, 0.4);
        }
        
        .search-container i {
            color: #b82837;
            font-size: 20px;
            margin-right: 10px;
        }
        
        .search-container input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 16px;
            color: #5a4a72;
            background: transparent;
        }
        
        .search-container input::placeholder {
            color: #ccc;
        }
        
        /* 位置区域 */
        .location-section {
            padding: 0 15px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .location-info {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.8);
            padding: 8px 15px;
            border-radius: 20px;
            box-shadow: 0 3px 8px rgba(138, 108, 192, 0.15);
        }
        
        .location-info i {
            color: #b82837;
            margin-right: 8px;
            font-size: 18px;
        }
        
        .location-text {
            font-size: 15px;
            font-weight: 500;
        }
        
        .location-change {
            background: linear-gradient(135deg, #ff8eb4 0%, #b82837 100%);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(255, 107, 156, 0.3);
            cursor: pointer;
        }
        
        /* 地图容器 */
        .map-container {
            height: 200px;
            margin: 0 15px 20px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(106, 74, 165, 0.2);
            background: linear-gradient(135deg, #a993e0 0%, #8a6cc4 100%);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .map-placeholder {
            text-align: center;
            padding: 20px;
        }
        
        .map-placeholder i {
            font-size: 48px;
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .map-placeholder p {
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0.5px;
        }
        
        /* 门店列表 */
        .store-list {
            padding: 0 15px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 700;
            margin: 15px;
            padding-left: 10px;
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: linear-gradient(180deg, #ff8eb4, #b82837);
            border-radius: 4px;
        }
        
        .store-count {
            background: #d4af37;
            color: white;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 10px;
            font-weight: 600;
        }
        
        .store-card {
            background: white;
            border-radius: 16px;
            padding: 18px;
            margin-bottom: 15px;
            box-shadow: 0 5px 15px rgba(138, 108, 192, 0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .store-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(138, 108, 192, 0.25);
        }
        
        .store-name {
           font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #b82837;
    display: flex;
    align-items: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
        }
        
        .store-name i {
            color: #b82837;
            margin-right: 8px;
        }
        
        .store-address {
            font-size: 14px;
            color: #333;
            margin-bottom: 12px;
            line-height: 1.5;
        }
        
        .store-info {
            display: flex;
            justify-content: space-between;
            border-top: 1px dashed #e6e0f0;
            padding-top: 12px;
            margin-top: 12px;
        }
        
        .store-distance {
            display: flex;
            align-items: center;
            color: #d97583;
            font-weight: 600;
            font-size: 14px;
        }
        
        .store-phone {
            display: flex;
            align-items: center;
            color: #d97583;
            font-weight: 500;
            font-size: 14px;
        }
        
        .store-phone i {
            margin-right: 5px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 70px;
            background: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -3px 15px rgba(106, 74, 165, 0.1);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #b8b0cc;
            font-size: 12px;
            transition: all 0.3s ease;
        }
        
        .nav-item.active {
            color: #b82837;
        }
        
        .nav-item i {
            font-size: 22px;
            margin-bottom: 4px;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .store-card {
            animation: fadeIn 0.5s ease-out forwards;
        }
        
        .store-card:nth-child(2) { animation-delay: 0.1s; }
        .store-card:nth-child(3) { animation-delay: 0.2s; }
        .store-card:nth-child(4) { animation-delay: 0.3s; }
        
        /* 响应式调整 */
        @media (max-width: 340px) {
            .toptit { font-size: 18px; }
            .store-name { font-size: 16px; }
        }