/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

*{ padding: 0;margin: 0;font-family: "微软雅黑","黑体","宋体"; font-size: 14px; color: #333;}
a{ text-decoration: none;}
ul,ol{ list-style: none;}
img{ border: none;}
input,textarea{ outline: none;}


.pubCon{ width: 1200px; margin: 0 auto;}
.pubTit{ text-align: center;padding-bottom: 60px;}
.pubTit h2{ font-size: 32px;font-weight: 400; line-height: 1.6em; padding-top: 30px;}
.pubTit .line{ width: 50px;height: 2px;background: #00abd9;display: inline-block;}
.bodyBg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);z-index: 9;display: none;}

/* 头部模块 */
.header{ height: 86px; width: 100%; background: rgba(56, 58, 54, 0.681);position: fixed;top: 0;left: 0;z-index: 10;border-bottom: 1px solid #00abd9}
.hdCon{ height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}

.hdNav ul{ display: -webkit-box; display: -ms-flexbox; display: flex; height: 60px;}
.hdNav li a{ display: block; font-size: 18px;padding: 0 30px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;position: relative;line-height: 60px;color: #ffffff;}
.hdNav li:hover a,.hdNav li.active a{ color: #0f0e13;-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}
.hdNav li a::after{ display: block; content: ""; width: 6px; height: 6px; background:#00abd9 ; border-radius: 50%; position: absolute; bottom: 6px;left: calc(50% - 3px);opacity: 0;-webkit-transition: 0.8s;-o-transition: 0.8s;transition: 0.8s;}
.hdNav li:hover a::after,.hdNav li.active a::after{ opacity: 0;}
.hdMenu{ width: 40px;border: 1px solid #eee;border-radius: 3px;cursor: pointer;display: none}
.hdMenu i{ display: block; width: 26px;height: 2px;background: #eee;margin: 6px auto;}


.header .down{position: absolute;width: 130px;background:rgba(230, 225, 225, 0.6);display: none;}
.header .down a{display: block;line-height: 50px;color:#aaa;font-size: 14px;padding-left: 30px;position: relative;}
.header .down a:hover{color:#e6e6e6;background: #494343;}
.header .down a:hover::before{background: none;border-color: #009fe7;}
.header .hdNav li:hover .down{display: block;}

.header .downs{position: absolute;width: 188px;background:rgba(230, 225, 225, 0.6);display: none;}
.header .downs a{display: block;line-height: 50px;color:#aaa;font-size: 14px;padding-left: 30px;position: relative;}
.header .downs a:hover{color:#e6e6e6;background: #494343;}
.header .downs a:hover::before{background: none;border-color: #009fe7;}
.header .hdNav li:hover .downs{display: block;}

/* 海报模块 */
.banner{ height: 700px;}
.banner a{ display: block; height: 700px; background: no-repeat center;background-size: cover;}
.banner a.small{ display: none;}
.banner .swiper-pagination-bullet{ background: #fff;}

/* 服务模块 */
.service{ padding: 30px 0 30px;}
.serCon{ display: -webkit-box; display: -ms-flexbox; display: flex;text-align: center;padding-right: 110px;padding-bottom: 30px;}
.serCon .box{ display: block;height: 410px;padding: 0 30px;-webkit-box-sizing: border-box;box-sizing: border-box;}
.serCon .boxIcon{width: 200px;height: 200px;border: 1px black solid;border-radius: 50%;margin: 0 auto;line-height: 200px;-webkit-transition: 0.8s;-o-transition: 0.8s;transition: 0.8s;} 
.serCon .boxIcon .iconfont{font-size: 100px;color: #605656;-webkit-transition: 0.8s;-o-transition: 0.8s;transition: 0.8s;}
.serCon h3{padding: 50px 0 25px;font-size: 22px;font-weight: 400;-webkit-transition: 0.8s;-o-transition: 0.8s;transition: 0.8s;}
.serCon p{line-height: 1.6em;color: #666;}

.serCon .box:hover h3{color: #779e6d;-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}
.serCon .box:hover .boxIcon{background: #779e6d;-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}
.serCon .box:hover .boxIcon .iconfont{color: #e8faf9;-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}

/* 关于我们模块 */
.about{ padding: 90px 0;background: url(../images/aboutBg.jpg) no-repeat center fixed;}
.abtTit h2{ color: #fff;} 
.abtTit .line{ background: #fff;}
.abtText{ font-size: 18px;color: #fff;line-height: 2em;opacity: 0.8;text-align: center;padding: 0 70px;}
.btnGroup{ width: 100%;text-align: center;padding-top: 100px;}
.btnGroup .btn{ display: inline-block;width: 150px;height: 50px;background: -o-linear-gradient(left,rgb(111, 68, 28),yellow);background: -webkit-gradient(linear,left top, right top,from(rgb(158, 106, 57)),to(rgb(224, 224, 72)));background: -o-linear-gradient(left,rgb(158, 106, 57),rgb(224, 224, 72));background: linear-gradient(to right,rgb(158, 106, 57),rgb(224, 224, 72));color: #fff;border-radius: 5px;line-height: 50px;font-size: 20px;margin: 0 10px;opacity: 0.8;-webkit-transition: 0.6s;-o-transition: 0.6s;transition: 0.6s;}
.btnGroup .btnRight{background: -o-linear-gradient(left,rgb(118, 118, 188),rgb(36, 225, 36));background: -webkit-gradient(linear,left top, right top,from(rgb(78, 38, 185)),to(rgb(63, 145, 203)));background: -o-linear-gradient(left,rgb(78, 38, 185),rgb(63, 145, 203));background: linear-gradient(to right,rgb(78, 38, 185),rgb(63, 145, 203));}

.btnGroup .btn:hover{ opacity: 1;-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}

/* 项目案例模块 */
.case{ padding: 10px 0;}
.caseCon{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.caseCon .box{ display: block;width: 32%;margin-bottom: 30px;position: relative;-webkit-perspective: 600px;perspective: 600px;overflow: hidden;}
.caseCon .pic{ width: 100%;display: block;}
.caseCon .ceng{ display: block;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);color: #fff;position: absolute;top: 0;left: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;padding: 0 30px;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-transform: skewX(90deg);-ms-transform: skewX(90deg);transform: skewX(90deg);-webkit-transform-origin: bottom;-ms-transform-origin: bottom;transform-origin: bottom;-webkit-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;}
.caseCon .ceng h3{ color: #fff;font-size: 20px;font-weight: 400;}
.caseCon .ceng .line{ width: 30px;height: 1px;background:#fff ;margin: 10px 0 20px;}
.caseCon .ceng p{ color: #fff;opacity: 0.6;text-align: center;line-height: 1.8em;}
.caseCon .box:hover .ceng{-webkit-transform: skewX(0deg);-ms-transform: skewX(0deg);transform: skewX(0deg);}

/* 底部模块 */
.footer{ background: rgb(80,88,101);}
.ftMain{ background: rgb(80,88,101); min-height: 100px;padding: 30px 0;}
.ftMain i{ color: #fff;font-size: 16px;}
.ftMain p{ font-size: 12px;}
.ftCon{ display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between}
.copyright{ background: #000; color: rgba(255, 255, 255, 0.6);padding: 10px 0;text-align: center;}
.ftCon h4{color: rgb(195,199,204);font-size: 18px;padding-bottom: 20px;}
.ftCon p{ color: rgb(195,199,204);}
.copyright span{ color:rgba(255, 255, 255, 0.6);}
.copyright a{ color: #fff;}

/* 内页公共样式 */
.smlBanner{ position:relative;height: 280px;overflow: hidden;}
.smlBanner img{display: block;position: absolute;top: 0;left: 41%;-webkit-transform: translateX(-860px);-ms-transform: translateX(-860px);transform: translateX(-860px);max-width: 200%;}

.smlNav{ background: #e6e3e3;width: 100%;text-align: center;}
.smlNav a{ display: inline-block;height: 50px;color:#333;font-size: 18px;line-height: 50px;padding: 0 20px;position: relative;}
.smlNav a:hover{ color: #1f90ef;background: #ffffff;}
.smlNav a:hover::after{ content: "";display: block;width: 16px;height: 2px;background: #ffffff;position: absolute;left: 50%;margin-left: -8px;bottom: 0;}

/* 公共内容区域 */
.pubMain{ padding: 40px 0;width: 1560px;margin: 0 auto;min-height: 400px;}

/* 关于我们样式 */
.abtMain { width: 100%;padding: 0 50px;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 30px;}
.abtMain img{ width: 80%;padding: 0 50px;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 30px;}
.abtMain  h3{ font-size: 26px;}
.abtMain .line{ width: 80px;height: 2px;background: #000; margin: 15px 0 30px;}

.abtMain .txt1{padding-top: 0;}
.abtMain .txt1 .line{ margin-bottom: 10px;width:80px;}
.abtMain .txt1 .time{ font-size: 12px;color: #7e7b7b;line-height: 1.8em;padding-top: 0px}
.abtMain .txt1 .content{padding-top: 0px;padding-bottom: 20px;}
.abtMain .txt1 img { display: block;margin: 20px auto;max-width: 100%; height: auto;}
.abtMain .txt1 h1{ font-size: 16px;color: #555;}
.abtMain .txt1 h2{ font-size: 18px;color: red;}
.abtMain .txt1 p{ font-size: 16px;color: #555;line-height: 1.8em;padding-top: 30px;}
.abtMain .txt2{ padding-bottom: 40px;}
.abtMain .txt2 p{ font-size: 16px;color: #555;line-height: 1.8em;}

/* 应用案例样式 */
.caseMain .boxOut::after{ content: "";display: block;clear: both;}
.caseMain .boxOut{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;padding-left: 150px;}
.caseMain .box{ width: 400px;height: 300px;border: 1px solid red; display: block;float: left;margin-bottom: 36px;;margin-right: 30px;-webkit-box-sizing: border-box;box-sizing: border-box;}
.caseMain .box:nth-child(3n){ margin-right: 0;}
.caseMain .pic img{display: block;width: 400px;height: 300px;}
.caseMain .txt h3{padding-left: 150px;-webkit-transition: color 0.3s;-o-transition: color 0.3s;transition: color 0.3s;}
.caseMain .box:hover h3{ color: #009fe7;}

/* 手机端 */
/* 在现有样式基础上添加以下媒体查询 */
@media (max-width: 768px) {
    /* 1. 调整Banner整体高度，适配手机屏幕 */
    .banner {
        height: 450px !important; /* 覆盖原有固定高度，根据small1.jpg比例调整（建议300-400px） */
        width: 100%;
        overflow: hidden;
    }
    
    /* 2. 显示small图片（small1.jpg），隐藏PC端big图片 */
    .banner .carousel-slide .small {
        display: block !important; /* 强制显示small1.jpg */
        height: 100% !important; /* 图片高度占满Banner */
        width: 100% !important;
        background-size: cover !important; /* 图片自适应，避免拉伸 */
        background-position: center !important;
    }
    .banner .carousel-slide .big {
        display: none !important; /* 隐藏PC端图片 */
    }
    
    /* 3. 仅保留第一张幻灯片，隐藏其他幻灯片 */
    .carousel-slide:not(:first-child) {
        display: none !important; /* 隐藏第二张及以后的幻灯片 */
    }
    
    /* 4. 隐藏轮播交互元素（分页器、前进后退按钮），简化手机端界面 */
    .carousel-dots,
    .carousel-btn {
        display: none !important;
    }
    
    /* 5. 固定第一张幻灯片位置，避免轮播偏移 */
    .carousel-slides {
        -webkit-transform: translateX(0) !important;
            -ms-transform: translateX(0) !important;
                transform: translateX(0) !important; /* 强制停在第一张，覆盖JS动态位移 */
    }
}

@media(max-width:1220px){
.pubCon{ width: 100%;padding: 0 20px;-webkit-box-sizing: border-box;box-sizing: border-box;}
.pubTit{padding-bottom: 40px;}
.pubTit h2{ font-size: 28px;}
.pubTit .line{ width: 40px;}

/* 手机端头部模块 */
.hdNav { display: none; position: absolute;top: 60px;width: 100%;left: 0;}
.hdNav ul{height: auto;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;text-align: center;}
.hdNav li a{ line-height: 50px;background: rgba(56, 58, 54, 0.681);border-bottom: 1px solid #929292;color: #ffffff;}
.hdNav li:first-child a {margin-top: 28px;}
.hdMenu{ display: block}
.hdMenu i{-webkit-transform-origin:left ;-ms-transform-origin:left ;transform-origin:left ;-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
.header .hdNav li:hover .down{display: none;}
.smlBanner{ position:relative;height: 180px;overflow: hidden;}
.smlBanner img{display: block;position: absolute;top: 0;left: 50%;-webkit-transform: translateX(-860px);-ms-transform: translateX(-860px);transform: translateX(-860px);max-width: 300%;}

.hdMenu.active i:nth-child(1){ -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);width: 33px;}
.hdMenu.active i:nth-child(2){ opacity: 0;}
.hdMenu.active i:nth-child(3){ -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg);width: 33px;}

/* 手机端海报模块 */
.banner{ height: 481px;}
.banner a{ height: 481px;background-size: cover;}
.banner a.small{ display: block;}
.banner a.big{ display: none;}

/* 手机端服务模块 */
.service{ padding: 5px 0 10px;}
.serCon{ -ms-flex-wrap: wrap; flex-wrap: wrap;}
.serCon .box{ height: auto;width: 50%;margin-bottom: 20px;padding: 0 10px;}
.serCon .boxIcon{width: 130px;height: 130px;line-height: 130px;} 
.serCon .boxIcon .iconfont{font-size: 60px;}
.serCon h3{padding: 30px 0 15px;font-size: 20px;}

/* 手机端关于我们模块 */
.about{ padding: 40px 0;background: url(../images/aboutBg.jpg) no-repeat center fixed;}
.abtTit{ padding: 0 20px;-webkit-box-sizing: border-box;box-sizing: border-box;}
.btnGroup{ width: 100%;text-align: center;padding-top: 60px;}

/* 手机端项目案例模块 */
.case{ padding: 20px 0;}
.caseCon .box{ width: 49%;margin-bottom: 20px;}
.caseCon .box:last-child {display: none;}
.caseCon .ceng{ display: none;}

/* 手机端底部模块 */
.ftMain{padding-top: 20px;}
.ftCon{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.ftCon img{padding: 20px 0 20px;}
.ftCon h4{display: none;}

/* 手机端应用案例样式 */
.caseMain .boxOut::after{ content: "";display: block;clear: both;}
.caseMain .box{ width: 320px;height: 240px;border: 1px solid red; display: block;float: left;margin-bottom: 26px;;margin-right: 20px;-webkit-box-sizing: border-box;box-sizing: border-box;}
.caseMain .pic{-webkit-box-sizing: border-box;box-sizing: border-box;}
.caseMain .pic img{display: block;width: 320px;height: 240px;}


}

/* 小屏显示器 */
@media(min-width:1220px){
.pubCon{ width: 1200px;}
.pubTit{ padding-bottom: 50px;}
.pubTit h2{ font-size: 30px;}

/* 小屏显示器服务模块 */
.service{ padding: 70px 0;}
.serCon .box{ padding: 0 10px;height: auto;}
.serCon .boxIcon{width: 140px;height: 140px;line-height: 140px;} 
.serCon .boxIcon .iconfont{font-size: 80px;}
.serCon h3{padding: 40px 0 20px;}

}

/* 大屏显示器 */
@media(min-width:1300px){
.pubCon{ width: 1200px;}
.pubTit{ padding-bottom: 60px;}
.pubTit h2{ font-size: 32px;}

/* 大屏显示器服务模块 */
.service{ padding: 30px 0 30px;}
.serCon .box{ height: 410px;padding: 0 30px;}
.serCon .boxIcon{width: 200px;height: 200px;line-height: 200px} 
.serCon .boxIcon .iconfont{font-size: 90px;}
.serCon h3{padding: 50px 0 25px;}
}