/*---------------------------
[Template Structure]

Project:	 SlideOut
Version:	 1.0
Primary Use: Site Template 
Layout:      Responsive
Platforms:   Mobile & Tablet
-----------------------------


@charset "UTF-8";

/* 1. General */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

body{
	height:100%;
    background-color:#FFFFFF;
}

.disabled{display:none;}

.larger-font{
    font-size:13px;
    line-height:30px!important;
}

.larger-font li{
    font-size:13px;
    line-height:30px!important;
}

::-webkit-scrollbar { 
    display: none; 
}

/*Bottom Ball Menu*/

.menu-wrapper-background{
    position:fixed;
    z-index:99999;
    background-color:rgba(0,0,0,0.6);
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    display:none;
}

/*Top Sliding Menu*/

.menu-top{
    position:fixed!important;
    z-index:999999999;
    max-height:428px;
    width:300px!important;
    left:50%;
    margin-left:-150px;
    border:solid 1px #cacaca;
}


.active-submenu{
    display:block;
    min-height:100%;
    max-height:500px!important;
}

.active-menu .fa-circle{
    color:#2ecc71!important;
    margin-top:26px;
}


.menu-top li{list-style:none; margin-bottom:0px;}
.menu-top li a:hover{background-color:rgba(0,0,0,0.05)!important; }
.submenu{margin-bottom:0px;}


.page-content{
    -webkit-transform:translateY(0px);
    transform:translateY(0px);
    transition:all 350ms ease;
}

.menu-top{
    border-top:solid 1px rgba(0,0,0,0.1);   
    background-color:rgba(255,255,255,1);
    position:absolute;
    width:100%;
    z-index:99999999;
    height:100%;
    top:-500px;
    overflow:scroll!important;
    -webkit-overflow-scrolling: touch!important;
    transition:all 350ms ease;
    border-radius:10px;
}

.show-menus{
    top:50%;
    margin-top:-210px;
    transition:all 350ms ease;
}

.menu-top span{
    border-bottom:solid 1px rgba(0,0,0,0.01); 
    display:block;
    font-size:11px;
    font-family:'Roboto', sans-serif;
    text-align:Center;
    padding-top:5px;
    padding-bottom:5px;
}

.menu-top a i{
    position:absolute;
    margin-top:24px;
    margin-left:-40px;
    font-size:14px;
}

.menu-top .fa-circle{
    /*position:absolute!important;*/
    float:right;
    right:0px;
    margin-right:25px;
    font-size:8px;
    margin-top:29px;
}

.menu-top .fa-angle-right{  
    position:absolute;
    left:40px;
    top:-3px;
}

.menu-top .fa-plus{
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg);
    position:absolute!important;
    right:0px;
    margin-right:24px;
    font-size:11px;
    margin-top:27px;
    transition:all 350ms ease;
}

.menu-top a{
    font-size:13px;
    font-weight:500;
    padding-left:70px;
    color:#3b4043;
    line-height:60px;
    border-bottom:solid 1px rgba(0,0,0,0.1); 
}

.submenu li:last-child{
    border-bottom:solid 1px rgba(0,0,0,0.08)!important;
}

.menu-top a:hover{color:#000000;}

/*.submenu{display:none;}*/

.submenu{
    max-height:0px;
    overflow:hidden;
    transition:all 350ms ease;
}

.show-submenu{
    max-height:500px!important;
    transition:all 350ms ease;
}

.submenu a{
    font-size:12px;
    line-height:60px!important;
    opacity:0.8;
    padding-left:90px;
}

.submenu li:hover{
    background-color:rgba(0,0,0,0.02);
}

.submenu .fa-angle-right{
    margin-left:26px;
    margin-top:27px;
}

.active-plus{
    color:#c0392b;
    -ms-transform: rotate(135deg)!important; 
    -webkit-transform: rotate(135deg)!important; 
    transform: rotate(135deg)!important;
    transition:all 350ms ease;
    margin-top:25px!important;
}

.submenu .fa-circle{
    position:absolute;
    z-index:999999;
    margin-top:28px;
    font-size:6px!important;
}

.has-submenu .fa-mobile{
    font-size:22px;
    margin-top:20px;
}

/*Header*/

.header{
    position:fixed;
    width:100%;
    z-index:99999;
    height:60px;
    background-color: #fff
}

.header-clear{
    height:60px;
}

.header-clear-big{
    height:90px;
}

.header-logo{
    float:left;
    width:60%;
    height:auto;
    margin-top:18px;
    margin-left:20px;
}

.header-navigation{
    float:right;
    color:#FFFFFF;
    height:60px;
    width:60px;
    padding-top: 15px;
    text-align:center;
    line-height:60px;
}

.header-navigation i{
    width:60px;
    height:60px;
    line-height:60px;
    text-align:center;
}

.header-navigation:hover{
    color:#FFFFFF;
    background-color:rgba(255,255,255,0.1);
}


.top-section{
    height:100%;
    display:block;
    background-image:url(../images/pictures/4t.jpg);
    background-size:cover;
    position:relative;
}

.top-call-to-action{
    height:50px;
    background-image:url(../images/misc/menu-bg.png);
}

.top-call-to-action a{
    width:33%;
    text-align:center;
    float:left;
    font-size:12px;
    line-height:50px;
    color:#FFFFFF;
    opacity:0.9;
}

.top-call-to-action a i{
    padding-right:13px;
    font-size:14px;
}

.top-call-to-action a:hover{
    color:#FFFFFF;
    background-color:rgba(255,255,255,0.05);
    opacity:1;
}

.top-call-to-action a:first-child{
    border-right:solid 1px rgba(255,255,255,0.1);
}

.top-call-to-action a:last-child{
    border-left:solid 1px rgba(255,255,255,0.1);
}


/*Center Socials*/

.center-socials{
    width:168px;
    margin-left:auto;
    margin-right:auto;  
    margin-bottom:0px;
    padding-top:10px;
    margin-top:-10px;
}

.center-socials a{
    transition:all 250ms ease;
    margin-bottom:30px;
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
    border-radius:40px;
    float:left;
    margin-left:8px;
    margin-right:8px;
}

.center-socials a:hover{
    color:#FFFFFF;
    transform:scale(1.2, 1.2);
    -webkit-transform:scale(1.2, 1.2);
    transition:all 250ms ease;
}

.center-socials a i{
    width:40px;
    height:40px;
    line-height:40px;
}


/*Color Strip*/

.content-strip{
    background-image:url(../images/pictures/5.jpg);
    background-size:cover;
}

.content-strip-content{
    position:relative;
    z-index:9999;
    padding-top:50px;
    padding-bottom:20px;
}

.content-strip-content h1{
    color:#FFFFFF!important;
    text-align:center;
    font-weight:500;
    font-size:22px;
    padding-bottom:15px;
    position:relative;
    z-index:9999;
}

.content-strip-content h4{
    color:#FFFFFF;
    opacity:0.7;
}

.content-strip-content div{
    color:#FFFFFF;
    position:relative;
    z-index:999;
}

.content-strip-content p{
    width:300px;
    margin-left:auto;
    margin-right:auto;
    color:#FFFFFF;
    text-align:center;
    font-size:14px;
    opacity:0.7;
    position:relative;
    z-index:99999;
}

.content-strip-overlay{
    position:absolute!important;
    height:100%;
    background-color:rgba(0,0,0,0.8);
    width:100%;
    z-index:999!important;
    top:0px;
}

.skeleton-button{
    width:150px;
    height:40px;
    font-size:13px;
    color:rgba(255,255,255,0.8);
    line-height:38px;
    text-align:center;
    border:solid 1px rgba(255,255,255,0.8);
    margin-left:auto;
    margin-right:auto;
    margin-bottom:30px;
    transition:all 250ms ease;
}

.skeleton-button:hover{
    color:#FFFFFF;
    background-color:rgba(255,255,255,0.1);
    transition:all 250ms ease;
}


/*Fullscreen Slider Image*/

.slider-image-1{background-image:url(../images/pictures/3.jpg);}
.slider-image-2{background-image:url(../images/pictures/1.jpg);}
.slider-image-3{background-image:url(../images/pictures/5.jpg);}
.bg1{background-image:url(../images/pictures/3.jpg);}
.bg2{background-image:url(../images/pictures/1.jpg);}
.bg3{background-image:url(../images/pictures/5.jpg);}


/*Thumbnails Columns*/

.thumb-clear{
	height:40px;
	display:block;
	width:100%;
}

.thumb-left{
	line-height:24px;
	display:block;
	padding-bottom:10px;
}

.thumb-left a{
	display:block;
	text-align:right;
}

.thumb-left img{
	width:100px;
	height:100px;
	border-radius:100px;
	float:left;
	margin-right:20px;
    transition:all 500ms ease;
}

.thumb-left img:hover{
    transform:scale(0.9, 0.9);
    -webkit-transform:scale(0.9, 0.9);
    transition:all 500ms ease;
}

.thumb-left strong{
	color:#1a1a1a;
	display:inline-block;
	padding-bottom:5px;
	font-size:13px;
}

.thumb-left em{
	font-style:normal;
}

.thumb-right{
	line-height:24px;
	display:block;
	padding-bottom:10px;
}

.thumb-right img{
	width:100px;
	height:100px;
	border-radius:100px;
	float:right;
	margin-left:20px;
    transition:all 500ms ease;
}

.thumb-right img:hover{
    transform:scale(0.9, 0.9);
    -webkit-transform:scale(0.9, 0.9);
    transition:all 500ms ease;
}

.thumb-right strong{
	color:#1a1a1a;
	display:inline-block;
	padding-top:5px;
	padding-bottom:5px;
	font-size:13px;
}

.thumb-right em{
	font-style:normal;
}


@media (min-width:600px){
	.thumb-left img{
		width:140px;
		height:140px;
		border-radius:150px;	
	}
	
	.thumb-left em{
		line-height:28px;	
	}
	
	.thumb-left strong{
		padding-top:10px;	
	}
	
	.thumb-right img{
		width:140px;
		height:140px;
		border-radius:150px;	
	}
	
	.thumb-right em{
		line-height:28px;	
	}
	
	.thumb-right strong{
		padding-top:10px;	
	}	
}

/*Content Heading*/
/*///////////////*/

.content-heading{
	margin-bottom:30px;	
}

.content-heading h4{
	color:#FFFFFF;
	position:absolute;	
	z-index:999;
	text-transform:uppercase;
	margin-top:27px;
	padding-left:30px;
    pointer-events:none;
    font-weight:800;
}

.content-heading{
	max-height:100px;	
}

.content-heading p{
	color:#FFFFFF;
	position:absolute;	
	z-index:999;
	margin-top:48px;
	padding-left:30px;
	opacity:0.5;
    pointer-events:none;
}

.content-heading .overlay{
	z-index:99;
	background-color:rgba(0,0,0,0.8);
}

.content-heading i{
	font-size:32px;
	position:absolute;
	color:#FFFFFF;
	right:30px;	
	z-index:999;
	margin-top:36px;
    pointer-events:none;
}

.content-heading img{
	width:100%;
	display:block;
	position:relative;
	z-index:2;
    transition:all 300ms ease;
}

.content-heading img:hover{
    filter: blur(3px);  
    -webkit-filter:blur(3px);
    transition:all 300ms ease;
}

@media (min-width:768px){
	.content-heading{
		max-height:140px;	
	}
	
	.content-heading h4{
		font-size:20px;	
		margin-top:45px;
		padding-left:50px;
	}
	
	.content-heading p{
		font-size:13px;	
		margin-top:75px;
		padding-left:50px;
	}
	
	.content-heading i{
		font-size:40px;
		margin-top:53px;
		right:50px;	
	}
}

/*////////////////////*/
/*Quote & Staff Slider*/
/*////////////////////*/

.staff-item img{
	border-radius:300px;	
	max-width:150px;
	margin-left:auto;
	margin-right:auto;
    transition:all 500ms ease;
    margin-top:10px;
}

.staff-item img:hover{
    transform:scale(1.1, 1.1);
    -webkit-transform:scale(1.1, 1.1);
    transition:all 500ms ease;
}

.staff-item h4{
	text-align:center;
	margin-top:20px;	
	font-size:16px;
}

.staff-item em{
	text-align:center;
	font-size:12px;
	color:#e34e47;
	display:block;
	margin-top:-10px;
	margin-bottom:10px;
	font-style:normal;
}

.staff-item strong{
	display:block;	
	font-weight:400;
	text-align:center;
	padding-left:20px;
	padding-right:20px;
	line-height:28px;
}

/* Quote Slider */

.quote-slider h4{
	font-family:'Source Sans Pro', sans-serif;
	font-size:15px;
	font-weight:300;	
	width:87%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	line-height:36px;
}

.quote-slider a{
	text-align:center;
	margin-top:20px;	
}


/*Homepage Gallery Effect*/

.homepage-gallery img{
    transform:scale(0.9, 0.9);
    -webkit-transform:scale(0.9, 0.9);
    transition:all 350ms ease;
}

.homepage-gallery img:hover{
    transform:scale(1,1);
    -webkit-transform:scale(1,1);
    transition:all 350ms ease;
}

/*//////*/
/*Footer*/
/*//////*/

.footer p{
    clear:both;
}

.footer-socials{
    width:300px;
    margin-left:auto;
    margin-right:auto;
    padding-left:10px;
    padding-right:10px;
    padding-top:20px;
    padding-bottom:20px;
    margin-top:-15px;
    margin-bottom:-10px!important;
}

.footer-socials a:hover{
    transform:scale(1.15, 1.15  );
    -webkit-transform:scale(1.15, 1.15  );
    color:#FFFFFF;
    transition:all 200ms ease;
}

.footer-socials a{
    width:35px;
    height:35px;
    text-align:center;
    line-height:35px;
    border-radius:35px;
    float:left;
    margin-left:10px;
    margin-right:10px;
    font-size:12px;
    color:#FFFFFF;
    transition:all 200ms ease;
}

.footer-socials a i{
    width:35px;
    height:35px;
    line-height:35px;
}

.footer-facebook{
    background-color:#3b5998;
}

.footer-share{
    background-color:#27ae60;
}

.footer-twitter{
    background-color:#4099FF;
}

.footer-google{
    background-color:#d34836;
}

.footer-up{
    background-color:#2c3e50;
    line-height:32px!important;
}


.footer-menu{
    position:fixed;
    z-index:9999999;
    background-image:url(../images/misc/menu-bg.png);
    background-size:100px 100px;
    width:100%;
    height:60px;
    bottom:0px;
}

.footer-menu a{
    border-right:solid 1px rgba(255,255,255,0.08);  
    color:#FFFFFF;
    font-size:14px;
}

.footer-menu a:hover{
    color:#FFFFFF;
    background-color:rgba(255,255,255,0.05);
}

.footer-menu-clear{
    height:60px;
}

.footer-menu a i{
    height:60px;
    line-height:60px;
}

.footer-menu-three-icons a{
    width:33.3%;
    float:left;
    text-align:center;
}

.footer-menu-four-icons a{
    width:25%;
    float:left;
    text-align:center;
}

.footer-menu-five-icons a{
    width:20%;
    float:left;
    text-align:center;
}

.footer-menu-six-icons a{
    width:16.7%;
    float:left;
    text-align:center;
}
.menu_list{
    position:fixed;
    width:100%;
    z-index:99999;
    height:80px;
    background-color: #fff;
    bottom: 0px;
    box-shadow:0 -5px 10px rgba(0, 0, 0, 0.1);
}
    /* 门店覆盖区域 */
      .locations {
        padding: 10px 20px;
        background-color: #fff;
        margin-bottom: 20px;
      }
         .location-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
      }
      
      .location-btn {
        height: 36px;
        line-height: 36px;
        text-align: center;
        background-color: #fff;
        border: 1px solid #2c2b2b;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #2c2b2b;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      
      .location-btn:hover {
        background-color: #f5f5f5;
      }
       .more-btn {
        display: block;
        width: 160px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        margin: 0 auto;
        border: 1px solid #999;
        color: #fff;
        font-size: 16px;
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.3s ease;
        background-color: #b4b3b2;
      }
      
      .more-btn:hover {
        background-color: #f5f5f5;
      }

/*关于唐森*/
/* 搜索栏样式 */
    .search-bar {
      padding: 15px;
    }
    
   .search-bar .search-input-container {
      position: relative;
      background-color: white;
      border-radius: 20px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.5);
      padding: 0 15px;
    }
    
   .search-bar .search-input {
      width: 100%;
      height: 45px;
      border: none;
      outline: none;
      padding-left: 35px;
      font-size: 14px;
      border-radius: 30px;
    }
    
   .search-bar .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      z-index: 999;
      font-size: 14px;
    }
    
    
  .search-bar .search_btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #999;
      border: none;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
    }
        /* 底部导航样式 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 1000;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 10px;
      flex: 1;
      height: 100%;
      cursor: pointer;
    }
    
    .nav-item.active {
      color: #ffcc00;
    }
    
    .nav-icon {
      margin-bottom: 3px;
      font-size: 20px;
    }
       /* 门店分布样式 */
    .store-distribution {
      padding: 0 15px 20px;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: bold;
      color: #db5824;
      margin-bottom: 15px;
      text-align: center;
    }
    
    .districts-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    
    .district-btn {
      height: 45px;
      background-color: white;
      border: 1px solid #eee;
      border-radius: 12px;
      font-size: 14px;
      color: #555;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
      line-height: 45px;
    }
    
    .district-btn:hover {
      border-color: #db5824;
    }
    
    .district-btn.active {
      background-color: #db5824;
      color: white;
      border-color: #db5824;
      font-weight: bold;
    }

     /* 城市轮播样式 */
    .city-carousel {
      padding: 0 15px 20px;
    }
    
    .carousel-container {
      display: flex;
      align-items: center;
    }
    
    .carousel-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #8d949c;
      border: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
     
      cursor: pointer;
      z-index: 10;
    }
    
    .carousel-btn i {
       color: #fff;
    }
    
    .carousel-wrapper {
      flex: 1;
      overflow: hidden;
      margin: 0 10px;
    }
    
    .carousel-track {
      display: flex;
      transition: transform 0.3s ease;
    }
    
    .city-card {
      flex: 0 0 33.333%;
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .city-img-container {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid white;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      margin-bottom: 8px;
    }
    
    .city-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .city-name {
      font-weight: bold;
      color: #333;
      font-size: 14px;
    }

    /*新闻列表-1*/
     .news_container {
        min-height: 100vh;
        background-color: white;
        padding: 24px 16px;
        max-width: 380px;
        margin: 0 auto;
      }
      
      /* 分类标签样式 */
      .category-tabs {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-bottom: 32px;
      }
      
      .tab-button {
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 18px;
        font-weight: bold;
        transition: all 0.3s ease;
        cursor: pointer;
      }
      
      .tab-button.active {
        background-color: #d05625;
        color: white;
        border: none;
      }
      
      .tab-button.inactive {
        background-color: white;
        color: #1f2937;
        border: 1px solid #d1d5db;
      }
      
      /* 文章网格样式 */
      .article-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
      
      /* 文章卡片样式 */
      .article-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
        border-radius: 12px;
        overflow: hidden;
      }
      
      .article-card:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
      
      .article-image-container {
        width: 100%;
        height: 100px;
        background-color: #f3f4f6;
        border-radius: 8px;
        overflow: hidden;
      }
      
      .article-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .article-title {
        font-size: 14px;
        font-weight: bold;
        color: #1f2937;
        margin-bottom:2px;
      }
      
      .article-description {
        color: #4b5563;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
       margin-bottom: 20px;
           line-height: 18px;
      }
      /*分页*/
       .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
          }
          
          .a1 {
            width: 5rem;
            height: 2.5rem;
            border: 1px solid #d1d5db;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4b5563;
            background-color: white;
            cursor: pointer;
            transition: all 0.2s ease;
          }
          
          .page-btn:hover:not(:disabled) {
            background-color: #f3f4f6;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            transform: translateY(-0.125rem);
          }
          
          .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
          
          .pagination  a {
            width: 2.5rem;
            height: 2.5rem;
            border: 1px solid #d1d5db;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4b5563;
            background-color: white;
            cursor: pointer;
            transition: all 0.2s ease;
          }
          
          .page-number:hover:not(.active) {
            background-color: #f3f4f6;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            transform: translateY(-0.125rem);
          }
          
          .pagination  span {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            border-color: #ea5721;
            background-color: #ea5721;
            color: white;
            font-weight: bold;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
          }
          /*表单*/
          .form_container {
            max-width: 400px;
            margin: 0 auto;
            background-color: white;
            padding: 30px 20px;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        
       .form_container h2 {
            text-align: center;
            font-size: 24px;
            color: #333;
            margin-bottom: 30px;
            padding: 10px 0;
        }
        
       .form_container .form-group {
            margin-bottom: 20px;
        }
        
       .form_container label {
            display: block;
            font-size: 16px;
            color: #333;
            margin-bottom: 8px;
        }
        
       .form_container label span.required {
            color: #ff3b30;
        }
        
       .form_container input, textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
       .form_container input:focus, textarea:focus {
            outline: none;
            border-color: #ff9500;
            box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
        }
        
      .form_container  textarea {
            min-height: 150px;
            resize: vertical;
        }
        
     .form_container   button {
            width: 100%;
            background-color: #ff9500;
            color: white;
            border: none;
            border-radius: 12px;
            padding: 14px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
       .form_container button:hover {
            background-color: #e08400;
        }
        
       .form_container .form-message {
            margin-top: 15px;
            text-align: center;
            font-size: 14px;
            color: #666;
        }
        
       .form_container .error-message {
            color: #ff3b30;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        
       .form_container .success-message {
            color: #34c759;
            font-size: 16px;
            text-align: center;
            margin-top: 20px;
            display: none;
        }
        .product_container {
        max-width: 420px;
        margin: 0 auto;
        margin-top: 30px;
        padding-bottom: 80px;
      }
      
      .product_container .product-series-title {
        background-color: #d05625;
        color: white;
        text-align: center;
        font-weight: bold;
        padding: 12px 0;
        border-radius: 8px;
        margin-bottom: 24px;
        font-size: 18px;
        width: 50%;
        margin: 0 auto;
      }
      
      .product_container .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding-top: 30px;
        width: 90%;
        margin: 0px auto;
      }
      
      .product_container .product-card {
        background-color: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
      }
      
      .product_container .product-card:hover {
        transform: translateY(-4px);
      }
      
      .product_container .product-image {
        width: 100%;
        height: 180px;
        object-fit: cover;
      }
      
      .product_container .product-info {
        padding: 12px;
        text-align: center;
      }
      
      .product_container .product-name {
        font-weight: 300;
        color: #0f0f0f;
        margin-bottom: 4px;
        font-size: 14px;
      }
      
      .product_container .product-spec {
        color: #0f0f0f;
        font-size: 12px;
         font-weight: 300;
      }
      /*幻灯*/
      /* 店铺环境幻灯片样式 */
      .store-slideshow {
        position: relative;
        width: 90%;
        height: 180px;
        border-radius: 12px;
        overflow: hidden;
        margin: 0 auto;
        
      }
      
      .store-slideshow  .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s ease-in-out;
      }
      
      .store-slideshow  .slide.active {
        opacity: 1;
      }
      
      .store-slideshow  .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .store-slideshow  .slide-indicators {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 8px;
      }
      
      .store-slideshow  .indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.3s ease;
      }
      
      .store-slideshow  .indicator.active {
        background-color: #ffffff;
        width: 24px;
        border-radius: 4px;
      }
      
      .store-slideshow  .slide-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
        border: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      
      .store-slideshow  .slide-prev {
        left: 10px;
      }
      
      .store-slideshow  .slide-next {
        right: 10px;
      }
      .h-20{
        height: 60px;
        clear: both;
      }