/* AB模板网 整站模板下载 */
/* 模板：Www.AdminBuy.Cn */
/* 仿站：Fang.AdminBuy.Cn */
/* 素材：Sc.AdminBuy.Cn */
/* QQ：9490489 */
@media screen and (min-width: 1024px) and (max-width: 1170px) {
.box, .advantage { width: 96% }
.about p { width: auto; padding-right: 50px }
}
@media only screen and (max-width: 1023px) {
.box, .advantage { width: 96% }
.about p { width: auto; padding-right: 50px }
header#header { background: rgb(0, 0, 0, .8); padding: 20px 0; width: 100%; overflow-x: visible; }
.white-bg.slideDown { background: rgb(0, 0, 0, .8) !important; }
#mnavh { display: block; position: fixed; right: 15px; top: 20px; height: 36px; z-index: 10000; width: 36px; }
.navicon { margin-top: 15px; }
#starlist { display: none; width: 100%; }
nav li { width: 100%; margin-left: 0; }
nav li a { display: block }
nav li:nth-child(1) { margin-top: 30px }
nav li:last-child { margin-bottom: 200% }
.open { top: 15px; position: absolute; right: 20px; }
.slideDown { padding: 20px 0 }
.header-container { flex-direction: column; padding: 0 5px; }
.logo { float: none; display: flex; align-items: center; justify-content: center; }
.logo a { display: flex; align-items: center; white-space: nowrap; font-size: 18px; }
.logo a:after { display: none; }
.logo img { height:36px; margin-right: 10px; }
.header-top { flex-direction: row; justify-content: center; width: 90%; align-items: center; }
.company-name { color: #fff; font-size: 18px; font-weight: bold; white-space: nowrap; margin-left: 10px; position: relative; }
.company-name:before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 2px; height: 16px; background-color: #e60012; }
/* 已将公司名称移至logo链接内部 */
/* 已移除 */
nav { width: 100%; float: none; }
.list-bg { margin-top: 0; }
.white-bg #starlist li a { color: #fff }
}
 @media only screen and (max-width: 768px) {
header#header { padding: 10px 0; }
#mnavh, .open { top: 6px; }
.logo a { font-size: 15px; }
.company-name { font-size: 15px; }
.company-name:before { height: 14px; width: 2px; left: -6px; }
/* 已移除 */
.banner { background: url(../images/bg.jpg) no-repeat center center; background-size: cover; height: 267px !important; font-size: 15px; }
/* 标题靠右、slogan靠左（平板） */
.banner > div { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
 .banner > div h2:first-of-type { grid-column: 1; text-align: left; font-style: italic; color: #f22645; }
 .banner > div h2:nth-of-type(n+2), .banner > div p { grid-column: 2; text-align: right; }
.advantage li section span { overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
.news-list p { margin-right: 140px; }
.h-title span { width: 80% }
.list-bg { margin-top: 0; }
ul.page-case-list li a { margin: 10px; }
.right-box { display: none }
.left-box { margin-right: 0 }
/* page-case-list1 responsive (tablet) */
ul.page-case-list1 > li, #contract-list > li { flex: 0 0 50%; max-width: 50%; }
ul.page-case-list1 h2, #contract-list h2 { font-size: 16px; margin-bottom: 10px; }
ul.page-case-list1 p, #contract-list p { margin-bottom: 8px; }
}
 @media only screen and (max-width: 480px) {
header#header { padding: 5px 0; width: 100%; position: relative; }
body { overflow-x: hidden; width: 100%; }
#mnavh { top: 9px; right: 15px; z-index: 10000; position: absolute; width: 36px; }
.open { top: 9px; right: 15px; z-index: 10000; position: absolute; }
.logo a { font-size: 13px; }
.company-name { font-size: 13px; }
.company-name:before { height: 12px; width: 2px; left: -5px; }
/* .logo a:after { height: 14px; margin: 0 5px 0 3px; width: 2px; } */
/* 已移除 */
.header-top { height: 30px; }
.navicon:before, .navicon:after { height: 3px; }
.navicon, .open .navicon:before, .open .navicon:after { height: 3px; }
 .banner { background: url(../images/bg.jpg) no-repeat center center; background-size: cover; height: 267px !important; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0 20px; position: relative; }
 .banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.60) 100%); }
 .banner > div { position: relative; z-index: 1; text-align: center; background: rgba(0,0,0,0.45); border-radius: 10px; padding: 12px 16px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); display: block; }
 .banner h2 { font-size: 24px; font-weight: bold; margin-bottom: 8px; letter-spacing: 0.3px; text-shadow: 0 2px 8px rgba(0,0,0,0.35); }
 .banner p { font-size: 15px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; font-weight: bold; text-shadow: 0 1px 6px rgba(0,0,0,0.3); }
/* 标题靠右、slogan靠左（手机） */
.banner > div h2:first-of-type { text-align: right; color: #f22645; }
.banner > div p { text-align: left; color: #fff; }
.advantage ul { height: 120px; top: -60px; width: 100%; }
.advantage li:nth-child(2) section:before { left: -10px; }
.advantage li:nth-child(2) section:after { right: -10px }
.advantage { height: 100px; }
.advantage li section img { height: 50px; }
.advantage li section { margin: 10px; padding: 10px; }
.advantage li section span { display: none; }
.advantage p { font-size: 15px; margin: 5px 0; }
.h-title h2 { font-size: 22px; }
.h-title span { overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
.h-title h2 { font-size: 22px; }
.service-a li, .service-b li { width: 100%; }
.service-a img { width: 100%; }
.service-a i { float: left; width: 120px; margin-bottom: 0; overflow: hidden; margin-right: 10px; }
.service-a section { padding: 10px; margin-bottom: 10px; }
.service-a span, .service-b span { padding: 0; text-align: left; margin-bottom: 0; }
.service-a p, .service-b p { font-size: 16px; text-align: left; }
.service-b i { float: left; margin-bottom: 0; }
.service-b img { width: 90px; }
.service-b li { }
.service-b section { margin: 10px; padding: 10px; box-shadow: 0px 5px 9px 1px rgba(144, 161, 180, 0.2); }
.service-a { margin-bottom: 0; }
.service-b { margin-bottom: 30px; }
.case-list li h3{ font-size:14px}
.case-list p {    display: none;}
.case-list li:nth-child(1), .case-list li:nth-child(2), .case-list li:nth-child(5), .case-list li:nth-child(6) { width: 50%; }
.case-list li:nth-child(3), .case-list li:nth-child(4) { width: 100%; }
.case-list li { height: 200px; }
.bth-text { height: 36px; line-height: 36px; font-size: 15px; width: 160px; }
.case-list ul { margin-bottom: 30px; }
.about-section { margin: 30px 0; background-size: 100%; }
.about { margin-top: 160px; width: 100%; }
.about h2 { font-size: 22px; margin: 20px 0 20px 50px; }
.btn-blue { margin: 20px 0 0 50px; }
.news-list li i { width: 100px; height: auto; margin-right: 10px; }
.news-list span { display: none; }
.news-list h2 { margin-right: 0; font-size: 16px; margin-top: 6px; }
.news-list p { margin-right: 0; float: left; margin-top: 10px; -webkit-line-clamp: 2; }
.news-list li { margin: 20px 10px; }
.news { margin-bottom: 30px; }
.contact-list li { width: 50%; font-size: 14px; }
.ft-img { float: none; }
.end-logo { margin: 20px auto; height: 30px; }
.end-nav { text-align: center; }
.end-nav li { margin-right: 5px; padding-right: 5px; }
.end-nav li:after { right: 0px; }
p.copyright { text-align: center; padding: 0 20px; }
.banner ul { top: 20%; }
.list-bg { margin-top: 0; height: 200px; }
.content { padding: 0 10px; }
.list-title { margin-bottom: 20px; }
ul.page-case-list li { width: 100%; }
ul.page-case-list li i { height: auto; }
ul.page-case-list li i img { height: auto; width: 100%; }
.tell-tit h2 { font-size: 18px; }
.tell-tit p { padding: 0 30px; line-height: 24px; }
.kefu li { width: 100%; }
.kefu li img { float: left; width: 100px; margin-right: 10px; }
.kefu li a { margin: 10px; box-shadow: 0px 3px 9px 1px rgba(144, 161, 180, 0.2); padding: 5px; border: 1px solid #f4f4f4; }
.kefu li h3 { text-align: left; margin: 20px 0 10px 0; }
.kefu p { text-align: left; }
ul.form-sq { width: 80%; }
.news-info { box-shadow: 0px 3px 9px 1px rgba(144, 161, 180, 0.2); border: 1px solid #f4f4f4; margin: 0 10px; }
.news-info p:last-child { display: block; clear: both; margin-top: 20px; }
.news-info i { width: 80px; }
.nextinfo { margin: 10px; }
.nextinfo li{width:100%}
/* page-case-list1 responsive (mobile) */
ul.page-case-list1 > li, #contract-list > li { flex: 0 0 100%; max-width: 100%; }
ul.page-case-list1 h2, #contract-list h2 { font-size: 16px; margin-bottom: 8px; }
ul.page-case-list1 p, #contract-list p { font-size: 14px; margin-bottom: 6px; }
  }
@media only screen and (max-width: 768px) {
    .jinni8_kefu_style { display: flex; justify-content: space-between; }
    .jinni8_kefu_nth { width: 40%; border-left: 0 !important; }

    .contact-selector {
        flex-direction: column;
        align-items: flex-start;
    }

    .selectors {
        flex-direction: column;
        width: 100%;
    }

    .selectors select {
        width: 100%;
    }

    #company-info {
        border-left: none;
        padding-left: 0;
        margin-top: 20px;
        border: 1px solid white;
        padding: 10px;
    }

    .footer-top {
        flex-direction: column;
    }

    .logo-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the items horizontally */
    margin-bottom: 10px; /* Add some space below the logo container */
}

.logo-container .company-name {
    display: block; /* Show company name on mobile */
    margin-left: 10px;
    color: white;
    font-weight: bold;
    font-size: 24px; /* Match the logo height */
    line-height: 30px; /* Vertically center the text */
}

    /* Fix for productlist layout */
    /* Cleaned up styles for productlist layout */
    .page-case-list li a {
        display: flex;
        align-items: flex-start; /* Align items to the top */
        margin: 15px 0;
    }

    .page-case-list li i {
        flex: 0 0 100px; /* Image container with fixed width */
        margin-right: 15px;
    }

    .page-case-list li .text-content {
        flex: 1; /* Text content takes remaining space */
    }

    .page-case-list li i img {
        width: 100%;
        height: auto;
        display: block;
    }
}