.spe-main { position: relative; margin: 30px auto; width: 960px; }
.special-top { position: relative; height: 501px; }
.special-top > .main-bg { position: absolute; top: 0; left: 0; z-index: 2; }
.special-top .taiji-info { display: flex; position: absolute; bottom: 20px; left: 0; right: 0; z-index: 3; margin: 0 50px; padding: 20px; background: #f5f5f5; }
.special-top .taiji-info p { flex: 1; width: 570px; line-height: 26px; font-size: 17px; }
.special-top .taiji-info figure { float: right; margin-left: 15px; width: 260px; }
.resume { position: relative; margin-top: 20px; padding: 40px; min-height: 358px; background: #f1f1f1; }
.resume p { margin-top: 15px; padding-right: 470px; line-height: 26px; font-size: 19px; }
.resume .resume-img { position: absolute; z-index: 2; right: 0; top: 0; bottom: 0; margin: auto; width: 468px; height: 358px; }
.special-top .taiji-info p a, .resume p a { color: #c72128; text-decoration: underline; }

.spe-list { margin-top: 40px; }
.spe-list li { position: relative; margin-top: 25px; padding: 25px; background: #f5f5f5; }
.spe-list li > a { display: block; position: absolute; z-index: 2; left: 25px; top: 0; bottom: 0; margin: auto; width: 399px; height: 232px; }
.spe-list li .spe-list-con { padding-left: 430px; min-height: 232px; }
.spe-list li .spe-list-con h3 { font-size: 24px; font-weight: bold; }
.spe-list li .spe-list-con p, .spe-list li .spe-list-con div { margin-top: 20px; font-size: 19px; line-height: 24px; }
.spe-list li .spe-list-con table { margin: 15px 0; text-align: center; }
.spe-list li .spe-list-con table th { padding: 5px 25px; background: #dee0e1; border: 1px solid #f5f5f5; }
.spe-list li .spe-list-con table td { padding: 5px 25px; background: #ebebeb; border: 1px solid #f5f5f5; }
.spe-list li .spe-list-con p a.but-detail { display: inline-block; float: right; margin-top: 15px; width: 202px; height: 40px; line-height: 40px; background: #c72128; text-align: center; font-weight: bold; color: #fff; border-radius: 5px; }

.spe-tour li a { display: block; padding: 8px 0; font-size: 20px; }
.spe-tour li a:hover { color: #c72128; }
.spe-tour li a span { margin-right: 10px; }

.special-detail { margin-bottom: 50px; }
.special-detail p, .special-detail li { margin-top: 20px; font-size: 19px; line-height: 28px; }
.special-detail li { float: left; width: 33.33%; text-align: center; }

.special-detail p img { display: block; margin: 0 auto; }

.product { margin-bottom: 50px; }
.product li { margin-top: 25px; background: #f5f5f5; }
.product li > a { float: left; width: 399px; height: 232px; }
.product li > a img { width: 100%; height: auto; }
.product li .product-con { float: right; padding: 20px 30px; width: 760px; height: auto; }
.product li .product-con h3 { font-size: 26px; font-weight: bold }
.product li .product-con p, .product li .product-con div { margin-top: 20px; font-size: 19px; line-height: 24px; }
.product li .product-con p a.but-detail { display: inline-block; float: right; margin-top: 15px; width: 300px; height: 40px; line-height: 40px; background: #c0261a; text-align: center; font-weight: bold; color: #fff; border-radius: 5px; }
.product li .product-con table { margin: 15px 0; text-align: center; overflow: hidden; }
.product li .product-con table th { padding: 5px 25px; background: #dee0e1; border: 1px solid #f5f5f5; }
.product li .product-con table td { padding: 5px 25px; background: #ebebeb; border: 1px solid #f5f5f5; }
a.more-product { display: block; float: right; padding-left: 15px; background: url(../jiao.html) left center no-repeat; font-size: 16px; }



@media (max-width: 768px) {
    .spe-main { width: 100%; }
    .special-top { height: auto; }
    .special-top > .main-bg, .special-top .taiji-info { position: relative; }
    .special-top .taiji-info { flex-direction: column; margin: 0; }
    .special-top .taiji-info p { margin-bottom: 10px; width: 100%; font-size: 16px; line-height: 30px; }
    .resume { padding: 20px; min-height: auto; }
    .resume p { padding: 0; font-size: 16px; line-height: 30px; }
    .resume .resume-img { position: relative; width: auto; height: auto; }
    .spe-list li > a { position: relative; left: 0; margin-bottom: 20px; width: 100%; height: auto; }
    .spe-list li .spe-list-con { padding: 0; width: 100%; min-height: auto; }
    .spe-list li .spe-list-con table th, .spe-list li .spe-list-con table td { padding: 8px; text-align: center; }
    .special-detail p img { width: 100%; height: auto; }
    .special-detail li { margin-bottom: 10px; width: 100%; }
    .product li > a, .product li .product-con { width: 100%; height: auto; }
    .product li .product-con p a.but-detail { margin: 0 auto; width: 80%; }
}
