*{ 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;}

.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%;}
}