*{ box-sizing: border-box; }
body,ul{ margin: 0; padding: 0; }
h1,h2,h3{ margin: 0; }
body{ padding-top: 86px; font-family: "微软雅黑"; font-size: 16px; color: #111; background: url(bg.jpg) #f5f5f5; background-attachment: fixed; background-size: cover;}
.wrap{ width: 1200px; margin: auto; }
.fl{ float: left; }
.fr{ float: right; }
.clr:after{ content: ""; display: block; clear: both; }
header{ background: #fff; padding: 30px 0; position: fixed; width: 100%; left: 0; top: 0; z-index: 999; box-shadow: 0 0 20px rgba(0,0,0,.3);}
header .fl{ font-size: 20px; font-weight: bold;}
header .fl a{ color: #111; text-decoration: none; }
header .fl a:hover{ color: #39f; }
.switch{ display: block; cursor: pointer;}
.switch span{ display:block; height: 4px; width: 25px; background: #111; margin-bottom: 4px; }
.nav{ position: fixed; width: 100%; left: 0; top: 86px; z-index: 998; background: rgba(255,255,255,.85); display: none; border-bottom: 4px solid #ccc;}
.nav.on{ display:block; }
.nav .wrap{ padding: 55px 0; }
.nav dl,.nav dt,.nav dd{ margin: 0; display:inline-block;}
.nav a{ display: block; padding:4px 6px; margin-right: 2px; text-decoration: none; border-radius: 3px; color: #666;}
.nav dt a{ background: #6eb5fd; color: #fff;}
.nav dt a:hover{ background: #39f; }
.nav dd a:hover{ color: #111; text-decoration: underline; }
.nav dl{ margin:0 10px 16px 0; }
#mainbody .bpart{ padding: 55px 0; }
#mainbody .pics figure{ margin: 12px; display: block; float: left; width: calc(25% - 24px);aspect-ratio: 1 / 1; overflow: hidden; position: relative; border:5px solid #fff;}
#mainbody .pics img,.alist .fl img{ display:block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition:all 0.5s;}
#mainbody .pics figure:hover img,.alist .part:hover img{  opacity: 0.7;}
#mainbody .pics .img-1,.alist .fl .img-1{ width: 100%; }
#mainbody .pics .img0,#mainbody .pics .img1,.alist .fl .img0,.alist .fl .img1{ height: 100%; }
#mainbody .pics figcaption{ position: absolute; width: 100%; height: 100%; z-index: 2; left: 0; top: 0;}
#mainbody .pics a{ height: 100%;display: none; padding:0 10px;align-items: center; justify-content: center; background: transparent; color: transparent; text-decoration: none; transition: all 1s;}
#mainbody .pics figure:hover a{ display: flex; }
#mainbody .pics a:hover{ background: rgba(0,0,0,.6); color: #fff; }
#mainbody .intro{ background: #fff; text-align: center; border:1px solid #cecece;}
#mainbody .intro p{ width: 70%; margin:30px auto; line-height: 1.6em; }
#mainbody .intro a{ background: #111; color: #fff; text-decoration: none; display:inline-block; padding: 6px 12px; transition: all 0.5s;}
#mainbody .intro a:hover{ background: #39f; }
#mainbody .intro ul{  margin:0 auto 20px;display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;}
#mainbody .intro li{ list-style-type: none; font-size: 14px; line-height: 1em; }
#mainbody .intro li:nth-child(odd) { text-align: right; }
#mainbody .intro li:nth-child(even) { text-align: left; }
#mainbody h2{ text-align: center; }
#mainbody .detail ul{display: flex;  flex-wrap: wrap;  gap: 10px; }
#mainbody .detail li{flex: 1 1 calc(25% - 7.5px); min-width: 0; box-sizing: border-box; list-style-type: none;}
#mainbody .detail li img{ display: block; width: 100%; border-radius: 60px; margin: 20px auto;}
#mainbody .make,#mainbody .faq{ background:#fff; }
#mainbody .make article{columns: 2;  gap:20px; padding: 40px 40px 0; line-height: 1.6em;}
#mainbody .make p strong{ display: block; text-indent: 0; color:#39f;  font-weight: bold;}
#mainbody .faq>div{ padding: 40px; }
#mainbody .faq .part{ padding-top: 10px; line-height: 24px; color:#000}
#mainbody .faq .clr span{ float: left; width: 40px; height: 40px; background:url(q.jpg) center #ccc; text-align: center; line-height: 40px; border-radius:3px; margin-right:8px; overflow: hidden; text-indent:-80px;}
#mainbody .faq .a span{ float: right;margin:0 0 0 8px; background:url(a.jpg);}
#mainbody .faq .q div{ background:#fff; padding: 8px; border-radius:3px; display: inline-block; max-width:calc(100% - 88px);}
#mainbody .faq .a{ margin-top:10px;}
#mainbody .faq .a div{ max-width:calc(100% -  88px); background:#7cd64f; padding: 8px; border-radius:3px;}
#mainbody .faq .a div{ float: right;}
#price {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    justify-items: center;
}

#price .part {
    width: 100%;
    max-width: 300px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#price .part:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#price .part img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

#price .part h3 {
    font-size: 16px;
    padding: 10px 15px;
    margin: 0;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#price .part div {
    padding: 0 15px 10px;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

#price .part mark {
    display: block;
    padding: 10px 15px;
    background: #f8f8f8;
    color: #e74c3c;
    font-weight: bold;
    font-size: 18px;
    text-align: right;
}
#search {
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

#search form {
    display: flex;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
}

#search .txt {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: all 0.3s ease;
    min-width: 120px;
}

#search .txt:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
}

#search .btn {
    padding: 12px 25px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

#search .btn:hover {
    background-color: #2980b9;
}

/* 响应式调整 */
@media (max-width: 600px) {
    #search form {
        flex-direction: column;
    }
    
    #search .btn {
        width: 100%;
    }
}

@media (max-width: 400px) {
    #search {
        padding: 15px;
    }
    
    #search .txt, 
    #search .btn {
        padding: 10px 12px;
    }
}#pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 30px 0;
    font-size: 14px;
}

#pages a {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 36px;
    text-align: center;
}

#pages a:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

#pages a.on {
    background-color: #3498db;
    border-color: #3498db;
    color: white;
    font-weight: bold;
}

#pages a.on:hover {
    background-color: #2980b9;
    border-color: #2980b9;
}

/* 响应式调整 */
@media (max-width: 600px) {
    #pages {
        gap: 3px;
    }
    
    #pages a {
        padding: 6px 8px;
        min-width: 30px;
    }
}

@media (max-width: 400px) {
    #pages {
        font-size: 13px;
    }
    
    #pages a {
        padding: 5px 7px;
        min-width: 28px;
    }
    
    /* 隐藏文字只显示数字 */
    #pages a:not(.on):not([href*="p="]) {
        display: none;
    }
    
    #pages a[href*="p="] {
        display: inline-block;
    }
}
/* 响应式调整 */
@media (max-width: 1200px) {
    #price {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    #price {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 480px) {
    #price {
        grid-template-columns: 1fr;
    }
    
    #price .part {
        max-width: 100%;
    }
}
.cols{ margin: 55px 0;  position: relative;}
.cols aside{ width:calc(35% - 30px);}
.cols #side{ width:360px; }
.cols aside.fixed { position: fixed; top: 86px; right:calc(((100vw - 1200px) / 2) - 10px);z-index: 1000; }
aside .part{ background: #fff; padding: 20px;border:1px solid #cecece; }
aside .part h3,.comment-section h3{ padding: 30px 0; font-weight: 100; text-align: center; }
aside .part ul{ list-style-position: inside; }
aside .part ul li{ padding-bottom: 10px; }
aside .part li a{ color:#111; text-decoration: none; font-size: 14px; line-height: 1.4em;}
aside .part li a:hover{ text-decoration: underline; }

.cols .fl{ width: 65%; }
.cols .fl .part{ padding: 20px; margin-bottom: 20px; background: #fff; border:1px solid #cecece;}
.cols .alist h3{ font-weight: normal; margin-bottom: 20px;}
.cols .alist h3 a{ color: #111; text-decoration: none;  display: block;}
.cols .alist h3 a:hover{ color: #39f; text-decoration: underline; }
.cols .alist .fl{ width: 220px; aspect-ratio: 1 / 1; overflow: hidden; position: relative; background: #000;}
.cols .alist .fr{ width: calc(100% - 240px); margin: 0 0 1em; }
.cols .alist .fr p{ font-weight: 100;  line-height: 1.6em;}
.cols .alist .fr div{ font-size: 12px; color: #999; font-family: "arial";}
article h1{ font-size: 36px; padding-bottom: 20px;}
article p.desc{ border:1px dashed #99ccff; padding: 20px; background: #d6ebff; margin-top: 0; font-size: 14px; text-indent: 0; color: #00182f;}
article div.desc{ font-size: 14px; color: #999; }
article p{ text-indent: 2em; line-height: 1.6em; }
article img{ display:block; margin: auto; max-width: 100%;}
footer{ background: #111; font-size: 14px; color: #999; text-align: center; padding: 25px 0; }
footer a{ color: #ccc; text-decoration: none;}
footer a:hover{ color: #fff;}
#pn{ list-style-type: none; font-size: 16px; color: #666; line-height: 2em; }
#pn a{ color: #111; text-decoration: none; }
#pn a:hover{ color: #e41248; text-decoration: underline; }
.comment-section {margin: 30px auto; padding: 20px; background: #f9f9f9; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.comment-form { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 14px; color: #666; }
.form-group input, .form-group textarea { padding: 10px; border: 1px solid #cecece; font-size: 14px;}
.form-group textarea { min-height: 100px; resize: vertical; }
.submit-btn { padding: 10px 20px; background: #39f; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background 0.3s; }
.submit-btn:hover { background: #0056b3; }
.result-message { margin-top: 10px; padding: 10px; border-radius: 4px; display: none; }
.success { background: #d4edda; color: #155724; }
.error { background: #f8d7da; color: #721c24; }
.comments-list { margin-top: 30px; }
.comments-list h4 { color: #444; margin-bottom: 15px; }
.comment-item { padding: 15px; background: white; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 15px; }
.comment-item p { margin: 5px 0; line-height: 1.5; }
.comment-meta { display: flex; justify-content: space-between; color: #888; font-size: 12px; margin-top: 10px; }
.-comments { margin-top: 20px; padding-top: 15px; border-top: 1px dashed #eee; }
.-comments .comment-item { background: #f5f5f5; position: relative; }
.right-bottom-container { position: fixed; right: 20px; bottom: 90px; display: flex; flex-direction: column; gap: 10px; z-index: 999; }
.fixed-btn { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.wechat-btn { position: relative; }
.wechat-qrcode { position: absolute; right: 50px; bottom: 0; width: 120px; height: 120px; background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 5px; display: none; z-index: 1000; }
.wechat-btn:hover .wechat-qrcode { display: block; }
.phone-btn { font-size: 20px; }
.back-to-top-btn { font-size: 20px; }
@media screen and (max-width: 1200px){
	.wrap{ width:98%; }
	#side{ position: fixed; right: 0; width:calc(35% - 20px) !important; }
}
@media screen and (max-width: 800px){
	#mainbody .pics figure{ width:calc(50% - 24px); }
	.cols aside,.cols .fl{ width:100%; }
	.cols .alist .fr p{ font-weight: normal;}
	#side{ position: static !important; width:100% !important; }
	#mainbody .detail li{flex: 1 1 calc(50% - 5px);}
}
@media screen and (max-width: 480px){
	.cols .alist .fl{  display:none;}
	.cols .alist .fr{ width:100%; }
	#mainbody .intro ul{grid-template-columns: 1fr;}
	#mainbody .intro li{ text-align: center !important; }
	#mainbody .detail li{flex: 1 1 100%;}
}