@charset "utf-8";
/* CSS Document */
@font-face { 
font-family: 'Calibri'; 
src:url('CalibriRegular.ttf'); 
} 
/*通用*/
*{ box-sizing:border-box; font-family:Calibri !important;}
*::before, *::after{ box-sizing:border-box;}
*:focus{ outline:none;}
html{ -ms-touch-action: none;  /* 阻止windows Phone 的默认触摸事件 */}
/*兼容iphone去除默认input表单默认设置*/
input[type="submit"],input[type="reset"],input[type="button"],button { -webkit-appearance: none;}
/*图片默认样式*/
img{border:0;vertical-align: middle; max-width:100%;}
/*动画效果*/
*{transition-property:all;}
.com-img{ display:block; width:100%; overflow:hidden;}
.com-img img{ transition:all 0.4s ease-in 0s; -webkit-transition:all 0.4s ease-in 0s; -moz-transition:all 0.4s ease-in 0s; -o-transition:all 0.4s ease-in 0s;}
.com-img:hover img{transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1);-ms-transform:scale(1.1);}

.fl{float:left;}
.fr{float:right;}
.cl{clear:both;}
.show{display:block;}
.hide{display:none;}

.f18{font-size:18px !important;}
.f16{font-size:16px !important;}
.f14{font-size:14px !important;}
.f12{font-size:12px !important;}

.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}

.ml5{margin-left:5px;}

.taC{text-align:center;}
.taL{text-align:left;}
.taR{text-align:right;}

.ttU{text-transform:uppercase;}

.ofH{overflow:hidden;}
.ofA{overflow:visible !important;}

.fwB{font-weight:600;}

.vaM{vertical-align:middle;}

.pr{position:relative;}


ul{width:100%;height:auto;position:relative;}
ul li{position:relative;}

/*字体*/
@font-face {
    font-family:'DINCond-Bold';
    src: url('../fonts/dincond-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/*flex*/
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-2{-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2;}
.flex-3{-webkit-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

.flex-1
{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

.vertical-container
{display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;}


/*限制行数 -- 一行*/
.line1,
.iCase-block .t1,
.iCase-block .t2,
.iNews-list a,
.cSel-cur span,
.cSel-list a,
.case-list li .name,
.case-list li .con,
.aCase-swiper .swiper-slide .name,
.aCase-swiper .swiper-slide .con,
.nlist-box .name,
.nIr-Hnews .name,
.footer-flink ul li a,
.pInfoNav-cur
{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/*限制行数 -- 当字号为12px,line-height为25时，限制高为50，如有改变，自行设置高度,为了兼容不支持line-clamp属性的浏览器*/
.line2,
.iNews-1st .name,
.nlist-box .con,
.nIr-Hnews .con
{height:50px;-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-moz-line-clamp:2;-o-line-clamp:2;-webkit-box-orient:vertical;}

.line3
{height:90px;-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-moz-line-clamp:3;-o-line-clamp:3;-webkit-box-orient:vertical;}


/*动画*/
a:hover
{-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}


.animation,
.Hnav a .box span,
.iCase-block,
.I-more.btn span,
.iCust-box img,
.cSel-cur:after,
.p-rtn-btn span,
.cInfo-float .go-prev:after,
.cInfo-float .go-next:after,
.cInfo-float .go-prev,
.cInfo-float .go-next,
.cIalbum-swiper .swiper-pagination .swiper-pagination-bullet .pr:after,
.cCul-icon img
{-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}


/*滚动条*/
.viewport { overflow: hidden; position: relative; /*width:0px; height: 0px;*/}/*内容可视区域的宽高*/
.overview { list-style: none; position: absolute; left: 0; top: 0; /*width:0px; height: 0px;*/}  /*内容可视区域的宽高*/
.scrollbar{position: relative;  float: right; position:relative;  display:inline; z-index:400; z-index:2;/*width:0px; height:0px;background-color:#afafaf;*/}/*滚动条的宽高颜色*/
.track{ position: relative; /*width:0px;*/}/*滚动条的宽*/
.thumb{cursor: pointer; position: absolute; top:0; left:0px; z-index:400;/*width:0px;background-color:#afafaf;*/}/*滚动条-当前条的宽 left 颜色*/
.disable{ display: none; }  
.noSelect { user-select:none;}

/*分页*/
.pagebar { padding:20px; overflow:hidden}
.pagebar .pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.pagination a {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-size: 12px;
  padding: 7px 10px;
  margin: 0 2px;
  border-radius: 3px;
}
.pagination span {
    color: #333;
    font-size: 12px;
    padding: 7px 2px;
    margin: 0 2px;
    border-radius: 3px;
}
.pagination a:hover {
  color: #333;
  border: 1px solid #333;
}
.pagination a.page-num-current {
  color: #fff;
  background: #333;
  border: 1px solid #333;
}
.pagination .st{ font-family:宋体}
.text-secondary{ text-align:center; padding:20px 0}
    .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 强制手机端两列 */
        gap: 15px;
        padding: 10px;
		text-align:center;
		color:#999;
    }

    .gallery-image {
        height: 120px;
		text-align:center; /* 手机端图片高度调小 */
    }

    @media (min-width: 768px) {
        .gallery {
            grid-template-columns: repeat(4, 1fr); /* PC端四列 */
            gap: 20px;
        }
        .gallery-image {
            height:200px;
			text-align:center; /* PC端图片更大 */
        }
        .gallery-title {
            font-size: 1.2em;
			text-align:center;
			color:#999; /* PC端字号稍大 */
        }
    }

    @media (max-width: 480px) {
        .gallery {
            gap: 10px; /* 超小屏幕缩小间距 */
        }
        .gallery-title {
            font-size: 0.9em; /* 超小屏幕字号缩小 */
            padding: 10px;
			text-align:center;
			color:#999;
        }
    }

        .galleryx {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            padding: 20px;
            animation: slideUp 1s ease-out;
        }

        .gallery-itemx {

            display: flex;
            flex-direction: column;
            position: relative;
			text-align:center;
        }



        .image-containerx {
            width:30px;
            height: 30px;
		    text-align:center;
            overflow: hidden;
            position: relative;
			margin:0 auto;
        }

        .gallery-imagex {
           width:30px;
            height: 30px;
            object-fit: cover;
			margin:0 auto;
			text-align:center;
            transition: transform 0.5s ease;
        }

        .gallery-itemx:hover .gallery-imagex {
            transform: scale(1.1);
        }

        .gallery-contentx {
            padding: 20px;
            text-align: center;
        }

        .gallery-titlex {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #fff;
        }

        .gallery-descriptionx {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.6;
        }

        .gallery-iconx {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.3);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }

        .gallery-itemx:hover .gallery-iconx {
            opacity: 1;
            transform: translateY(0);
        }

        .device-infox {
            margin-top: 40px;
            text-align: center;
            padding: 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            max-width: 600px;
            margin: 40px auto 0;
            animation: pulse 2s infinite;
        }

        .device-infox i {
            margin-right: 10px;
            color: #a1c4fd;
        }
		        /* 响应式调整 */
        @media (max-width: 900px) {
            .galleryx {
                gap: 15px;
            }
            .image-containerx {
                width:30px;
                height: 30px;
				text-align:center;
            }
            .gallery-contentx {
                padding: 15px;
            }
            .gallery-titlex {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 600px) {
            .galleryx {
                gap: 10px;
                padding: 10px;
            }
            .image-containerx {
                width:30px;
                height: 30px;
				text-align:center;
            }
            .gallery-titlex {
                font-size: 1.1rem;
            }
            .gallery-descriptionx {
                font-size: 0.85rem;
            }
            .headerx h1 {
                font-size: 2.4rem;
            }
            .headerx p {
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .image-containerx {
                width:30px;
                height: 30px;
				text-align:center;
            }
            .gallery-contentx {
                padding: 10px;
            }
        }
		@media (min-width: 1200px) {
            .galleryx {
				width:30% !important;
				margin:0 auto;
            }
        }

        /* 确保在超小屏幕上依然保持四列布局 */
        @media (max-width: 400px) {
            .galleryx {
                grid-template-columns: repeat(4, 1fr);
            }
            .image-containerx {
				width:30px;
                height: 30px;
				text-align:center;
            }
            .gallery-titlex {
                font-size: 0.9rem;
            }
            .gallery-descriptionx {
                display: none;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(161, 196, 253, 0.4); }
            70% { box-shadow: 0 0 0 15px rgba(161, 196, 253, 0); }
            100% { box-shadow: 0 0 0 0 rgba(161, 196, 253, 0); }
        }
		
		
        .gallery-containerc {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .galleryc {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            margin-bottom: 50px;
        }
        
        .gallery-itemc {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            aspect-ratio: 4/3;
            background: rgba(0, 0, 0, 0.3);
            transition: all 0.4s ease;
            cursor: pointer;
        }
        
        .gallery-itemc:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            z-index: 10;
        }
        
        .gallery-imgc {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s ease;
        }
        
        .gallery-itemc:hover .gallery-imgc {
            transform: scale(1.1);
            filter: brightness(0.7);
        }
        
        .gallery-titlec {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            padding: 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
            text-align: center;
            font-size: 0.2rem;
            font-weight: 600;
        }
        
        .gallery-itemc:hover .gallery-titlec {
            transform: translateY(0);
        }
        

        
        /* 平板设备样式 */
        @media (max-width: 992px) {
            .galleryc {
                grid-template-columns: repeat(2, 1fr);
            }
            
        }
        
        /* 手机设备样式 */
        @media (max-width: 768px) {
            .galleryc {
                gap: 15px;
            }
            
            .gallery-titlec {
                font-size: 0.2rem;
                padding: 15px;
            }
            

        }
        
        /* 小手机设备样式 */
        @media (max-width: 480px) {
            .galleryc {
                gap: 10px;
            }
           
        }
       
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .gallery-itemc {
            animation: slideUp 0.6s ease-out forwards;
            opacity: 0;
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 为每个项目添加延迟动画 */
        .gallery-itemc:nth-child(1) { animation-delay: 0.1s; }
        .gallery-itemc:nth-child(2) { animation-delay: 0.2s; }
        .gallery-itemc:nth-child(3) { animation-delay: 0.3s; }
        .gallery-itemc:nth-child(4) { animation-delay: 0.4s; }
        .gallery-itemc:nth-child(5) { animation-delay: 0.5s; }
        .gallery-itemc:nth-child(6) { animation-delay: 0.6s; }
        .gallery-itemc:nth-child(7) { animation-delay: 0.7s; }
        .gallery-itemc:nth-child(8) { animation-delay: 0.8s; }
		
.adaptive-container {
            width: 100%;
            max-width: 1920px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
        }
        
        .background-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba(0, 0, 0, 0.7), 
                rgba(0, 0, 0, 0.7)), 
                url('../pp1.jpg');
            background-size: cover;
            background-position: center;
            z-index: 1;
        }
        
        .content-wrapper {
            position: relative;
            z-index: 2;
            padding: 40px 20px;
            text-align: center;
        }
        
        .header-section {
            margin-bottom: 50px;
        }
        
        .main-title {
            font-size: 2.8rem;
            margin-bottom: 15px;
            background: linear-gradient(90deg, #ff9a9e, #fad0c4, #a1c4fd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 1px;
        }
        
        .subtitle {
            font-size: 1.3rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.7;
            opacity: 0.9;
        }
        
        .image-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 25px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .image-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.4s ease;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            flex: 1;
            min-width: 200px;
            max-width: 350px;
        }
        
        .image-card:hover {
            transform: translateY(-10px) scale(1.05);
            background: rgba(255, 255, 255, 0.2);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            z-index: 10;
        }
        
        .card-image {
            width: 100%;
            height: 380px;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }
        
        .image-card:hover .card-image {
            transform: scale(1.1);
        }
        
        .card-content {
            padding: 20px;
        }
        
        .card-title {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #fff;
        }
        
        .card-description {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.6;
        }
        
        .layout-indicator {
            background: rgba(0, 0, 0, 0.5);
            padding: 12px 25px;
            border-radius: 30px;
            font-size: 1rem;
            margin: 40px auto 20px;
            display: inline-block;
        }
        
        .indicator-icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4caf50;
            margin-right: 10px;
        }
        
        .footer-note {
            margin-top: 30px;
            padding: 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* 电脑端布局 - 四个平铺 */
        @media (min-width: 992px) {
            .image-grid {
                flex-direction: row;
            }
            .layout-indicator::after {
                content: "电脑端布局：四个图片平铺显示";
            }
        }
        
        /* 平板和手机端布局 - 两个一排 */
        @media (max-width: 991px) {
            .image-grid {
                flex-wrap: wrap;
            }
            .image-card {
                flex: 0 0 calc(50% - 25px);
                max-width: calc(50% - 25px);
            }
            .layout-indicator::after {
                content: "平板/手机端布局：两个图片一排";
            }
            .indicator-icon {
                background: #ff9800;
            }
        }
        
        /* 小手机优化 */
        @media (max-width: 576px) {
            .main-title {
                font-size: 2rem;
            }
            .subtitle {
                font-size: 1.1rem;
            }
            .image-card {
                flex: 0 0 100%;
                max-width: 100%;
            }
            .layout-indicator::after {
                content: "手机端布局：单列显示";
            }
            .indicator-icon {
                background: #f44336;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .image-card {
            animation: slideUp 0.6s ease-out forwards;
            opacity: 0;
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .image-card:nth-child(1) { animation-delay: 0.1s; }
        .image-card:nth-child(2) { animation-delay: 0.2s; }
        .image-card:nth-child(3) { animation-delay: 0.3s; }
        .image-card:nth-child(4) { animation-delay: 0.4s; }