@media only screen and (min-width: 1660px) {
 .mode-banner {
 width: 100%;
 position: relative;
 }
 .mode-banner img {
 width: 100%;
 }
 .mode-banner .txt {
 width: 9.86rem;
 position: absolute;
 right: 0;
 top: 50%;
 }
 .mode-banner .txt .mode-title {
 font-family: shs_medium;
 font-size: 0.4583rem;
 color: #ffffff;
 }
 .mode-banner .txt .mode-content {
 margin-top: 0.5rem;
 font-family: shs_normal;
 font-size: 0.2708rem;
 color: #ffffff;
 line-height: 0.5rem;
 }
 .webcontent {
 width: 100%;
 background: #fafafa;
 }
 .webcontent div.web-box {
 width: 16.6rem;
 margin: 0 auto;
 }
 .webcontent div.web-box img {
 width: 100%;
 height: auto;
 margin: 0 auto;
 }
 .webcontent div.web-box img.marg {
 margin-bottom: 0.3rem;
 }
 .webcontent div.web-box img.mode-img-header {
 position: relative;
 margin-top: -1rem;
 }
 .webcontent div.web-box img.mode-img-bottom {
 position: relative;
 margin-bottom: -1rem;
 }
 .mode-footer {
 width: 100%;
 height: 2.52rem;
 position: relative;
 }
 .mode-footer .mf-box {
 width: 3.64rem;
 margin: 0 auto 0 -1.82rem;
 position: absolute;
 bottom: 0;
 left: 50%;
 }
 .mode-footer .mf-box a {
 width: 1.72rem;
 height: 0.5rem;
 text-decoration: none;
 border-radius: 5px;
 border: 1px solid #8e8e8e;
 text-align: center;
 line-height: 0.5rem;
 font-family: shs_normal;
 font-size: 0.1875rem;
 color: #2a2a2a;
 }
 .mode-footer .mf-box a:hover,
 .mode-footer .mf-box a:focus {
 text-decoration: none;
 font-family: shs_medium;
 }
 .mode-footer .mf-box .mf-list {
 float: left;
 }
 .mode-footer .mf-box .mf-qq {
 float: right;
 background: #ffff00;
 }
}
@media only screen and (min-width: 769px) and (max-width: 1659px) {
 .mode-banner {
 width: 100%;
 position: relative;
 }
 .mode-banner img {
 width: 100%;
 }
 .mode-banner .txt {
 width: 7.69rem;
 position: absolute;
 right: 0;
 top: 50%;
 }
 .mode-banner .txt .mode-title {
 font-family: shs_medium;
 font-size: 0.4583rem;
 color: #ffffff;
 }
 .mode-banner .txt .mode-content {
 margin-top: 0.5rem;
 font-family: shs_normal;
 font-size: 0.2708rem;
 color: #ffffff;
 line-height: 0.5rem;
 }
 .webcontent {
 width: 100%;
 background: #fafafa;
 }
 .webcontent div.web-box {
 width: 95%;
 margin: 0 auto;
 }
 .webcontent div.web-box img {
 width: 100%;
 height: auto;
 margin: 0 auto;
 }
 .webcontent div.web-box img.marg {
 margin-bottom: 0.3rem;
 }
 .webcontent div.web-box img.mode-img-header {
 position: relative;
 margin-top: -1rem;
 }
 .webcontent div.web-box img.mode-img-bottom {
 position: relative;
 margin-bottom: -1rem;
 }
 .mode-footer {
 width: 100%;
 height: 2rem;
 position: relative;
 }
 .mode-footer .mf-box {
 width: 3.64rem;
 margin: 0 auto 0 -1.82rem;
 position: absolute;
 bottom: 0;
 left: 50%;
 }
 .mode-footer .mf-box a {
 width: 1.72rem;
 height: 0.5rem;
 text-decoration: none;
 border-radius: 5px;
 border: 1px solid #8e8e8e;
 text-align: center;
 line-height: 0.5rem;
 font-family: shs_normal;
 font-size: 0.1875rem;
 color: #2a2a2a;
 }
 .mode-footer .mf-box a:hover,
 .mode-footer .mf-box a:focus {
 text-decoration: none;
 font-family: shs_medium;
 }
 .mode-footer .mf-box .mf-list {
 float: left;
 }
 .mode-footer .mf-box .mf-qq {
 float: right;
 background: #ffff00;
 }
}
@media only screen and (max-width: 768px) {
 .mode-banner {
 width: 100%;
 position: relative;
 }
 .mode-banner img {
 width: 100%;
 }
 .mode-banner .txt {
 position: absolute;
 right: 0.2rem;
 top: 50%;
 }
 .mode-banner .txt .mode-title {
 font-family: shs_medium;
 font-size: 0.18rem;
 color: #ffffff;
 }
 .mode-banner .txt .mode-content {
 margin-top: 0.1rem;
 font-family: shs_normal;
 font-size: 0.14rem;
 color: #ffffff;
 line-height: 0.2rem;
 }
 .webcontent {
 width: 100%;
 background: #fafafa;
 }
 .webcontent div.web-box {
 width: 95%;
 margin: 0 auto;
 }
 .webcontent div.web-box img {
 width: 100%;
 height: auto;
 margin: 0 auto;
 }
 .webcontent div.web-box img.marg {
 margin-bottom: 0.15rem;
 }
 .webcontent div.web-box img.mode-img-header {
 position: relative;
 margin-top: -0.5rem;
 }
 .webcontent div.web-box img.mode-img-bottom {
 position: relative;
 margin-bottom: -0.5rem;
 }
 .mode-footer {
 width: 100%;
 height: 1.5rem;
 position: relative;
 }
 .mode-footer .mf-box {
 width: 3.64rem;
 margin: 0 auto 0 -1.82rem;
 position: absolute;
 bottom: 0;
 left: 50%;
 }
 .mode-footer .mf-box a {
 width: 1.72rem;
 height: 0.5rem;
 text-decoration: none;
 border-radius: 5px;
 border: 1px solid #8e8e8e;
 text-align: center;
 line-height: 0.5rem;
 font-family: shs_normal;
 font-size: 0.1875rem;
 color: #2a2a2a;
 }
 .mode-footer .mf-box a:hover,
 .mode-footer .mf-box a:focus {
 text-decoration: none;
 font-family: shs_medium;
 }
 .mode-footer .mf-box .mf-list {
 float: left;
 }
 .mode-footer .mf-box .mf-qq {
 float: right;
 background: #ffff00;
 }
}