@font-face {
  font-family: "iconfont"; /* Project id 3224189 */
  src: url('../fonts/SourceHanSansCN-Regular.woff2') format('woff2'),
       url('../fonts/SourceHanSansCN-Regular.woff') format('woff'),
       url('../fonts/SourceHanSansCN-Regular.ttf') format('truetype');
}
body { font-size: 1.6rem; background-color: #f5f5f5; overflow-x: hidden; padding-top: clamp(5rem, 8vw, 9.6rem);font-family: 'SourceHanSansCN';}
img {display: block ; width: 100%; height: auto;}
                             
.container {max-width: 120rem; margin: 0 auto; padding: 0 1rem; box-sizing: border-box;.content-item img }
.bg-white{ background-color: #fff;}


.header { width:100%; z-index: 8;  top: 0; left: 0; transition: all 0.2s linear;  -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear;  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear; padding: clamp(1rem, 2vw, 2rem) 0;background: #fff;  position: absolute; z-index: 9;}   
 
.header h1 { height: clamp(3rem, 4vw, 5.2rem);}                   
.header h1 img { width: auto !important; height: 100%;}

/* 自适应导航 */
.nav-menu { display: flex; justify-content: center;   position: relative; /* 作为蓝色容器的定位参考 */ cursor: pointer; opacity: 1; transition:opacity 0.3s linear;transform: translate(0px,0);  display: flex; }
.nav-menu > li { position: relative; padding: 0 3rem; cursor: pointer; transition: background-color 0.3s ease;        }
.nav-menu > li >a{ display: block;  padding: 2rem 0; font-size: 16px; color: #333; font-weight: bold; opacity: 0.95; -webkit-transition:color 0.3s linear; position: relative; z-index: 2;}
.nav-menu > li > a:after{ display:block; content:""; height: 4px; width: 100%; position: absolute; bottom: 4px; left: 0px; background: #194ac3; opacity: 0; -webkit-transition: transform 0.2s ease-out,opacity 0.2s ease-out; transform-origin: 50% 0%; transform:scale(0.01,1);}
.nav-menu >li:hover a:after{ transform:scale(1,1); opacity: 1;}
.sub-nav {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 1rem 0; min-width: 200px; border-radius: 4px; opacity: 0; text-align: center; visibility: hidden; transition: all 0.3s ease;
            z-index: 101; }
.sub-nav li {padding: 0 20px; height: 40px; line-height: 40px; white-space: nowrap; opacity: 0.8;        }
.sub-nav li:hover {opacity: 1; }
.blue-container { position: fixed; top: 7rem; left: -5000%; width: 10000%; height: 0;  background-color: #fff;  opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 99;}
.nav-menu > li:hover ~ .blue-container{ opacity: 1; visibility: visible; height: calc(6 * 4rem + 20px); /* 3个li*40px + 上下padding 10px*2 */        }
.nav-menu > li:hover .sub-nav { opacity: 1; visibility: visible; }
.main-nav > li:nth-child(1):hover {            --sub-nav-height: calc(0 * 40px + 0px) !important; /* 首页：3个li */        }
.hamburger, .mobile, .flag_num{    display: none; margin-right: 1rem;}
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #666;}


/* tab */
/*.shortcut-nav {background-color: #f5f5f5;  color: #333; position: relative; z-index: 8; transition: all 0.3s ease; }*/
/*.shortcut-nav ul{white-space: nowrap;  width: auto; overflow-x: auto;}*/
/*.mod-tab li { display: inline-block;  margin-right:clamp(2.5rem, 3.5vw, 5rem); position: relative; cursor: pointer;}*/
/*.mod-tab li a{  padding: 1.2rem 0;  display: block;  font-size:clamp(1.6rem, 3vw, 1.8rem);  position: relative;  line-height:3.2rem;  color: #5F6464;}*/
/*.mod-tab li.active-tab a{  color: #2a2e2e;}*/
/*.mod-tab li.active-tab a:after{  content: ' '; height: 2px; width: 100%; background: #0052d9; position: absolute; left: 0; right: 0; bottom: 2px;}*/
/*.shortcut-nav.fixed { position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }*/

/* 首页关于我们 */
.cont-box{ padding:clamp(1rem, 2vw, 3rem) 1rem;}
.titleh2 {font-size: clamp(3rem, 3vw, 4.2rem); transform: skewX(-10deg); margin:clamp(1.6rem, 3vw, 3rem) 0; color: #333; transition: ease all 0.3s; }
.titleh2:hover {color: #3c388c; transition: ease all 0.3s; } 

.home-about {width: 100%; padding-top:clamp(1.6rem, 3vw, 5rem); box-sizing: border-box; color: #666;} 
.home-about p {margin:clamp(1rem, 1.5vw, 2rem) 0; line-height: 3rem; text-align: justify;}                   
.more {display: inline-block; border: 1px solid #3c388c; color: #3c388c; padding: 1.5rem 3rem; border-radius: 70px; margin:clamp(1.6rem, 3vw, 4rem) 0;}

.ten_links{ padding:clamp(0rem, 2vw, 4rem) 0 0;}
.ten_img{ position: relative; overflow: hidden; width:31%;  margin:clamp(1rem, 2vw, 3rem) 0; margin-right: 3.5%;}


.ten_img:before{ content: ""; display: block; padding-bottom: 66.66%; }
.ten_img > img, .ten_img > a > img{ position: absolute; top:0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
.ten_img .ten_img_txt{ position: absolute; top:0px; left: 0px; width: 100%; height: 100%;    display: flex; align-items: center; flex-direction: row;}

.ten_links .ten_img:before{ padding-bottom: 60%; }
.ten_links .ten_img:after{    content: ""; display: block;    position: absolute; top:0px; left: 0px; width: 100%; height: 100%;    background: rgba(25,74,195,0);}
.ten_links .ten_img:hover:after{ background: rgba(60,56,140,0.8); transition: ease all 0.3s;}
.ten_links .ten_img:hover img{ transform: scale(1.1); transition: ease all 0.3s;}
.ten_links .ten_img .ten_img_txt{ color: #FFF; z-index: 1; justify-content: center; }
.ten_links .ten_img .ten_img_txt h2{ display: inline-block; width: auto; padding-top: 1.2rem; font-size: clamp(2rem, 2vw, 3.2rem); font-style: italic;    line-height: 1.2em;}
.ten_links .ten_img .ten_img_txt h2:after{    content: ""; display: block;    margin: 12px 0px 0px 0px; width: 1%; height: 2px;   background: #FFF; opacity: 0;}
.ten_links .ten_img:hover .ten_img_txt h2:after{ width: 100%; opacity: 1; transition: ease all 0.3s; }

/* 核心业务 */
.tab-container{ justify-content: space-between; display: flex;}
/* 左侧Tab标题栏 */
.tab-nav {padding: clamp(5rem, 7vw, 9rem) 0; box-sizing: border-box; width: 34%; overflow: hidden;}
.tab-item a{ display: block; margin: clamp(3rem, 4vw, 5rem) 0; opacity: 0.5; transition: ease all 0.3s; color: #fff; }
.tab-item h3, .mobile-item h3{ font-size: clamp(2rem, 3vw, 3.2rem); font-style: italic; position: relative;  transition: ease all 0.3s;}
.tab-item p, .mobile-item p{ margin: clamp(1.5rem, 2vw, 2rem) 0;}
.xiagnyou{ display: block; width: clamp(3rem, 4vw, 5rem);  }
.tab-item i, .mobile-item  i{  opacity: 0; transform: translateX(-4rem); }
/* 激活状态 */
.tab-item.active a{opacity: 1;  font-weight: 500; padding-left: 4rem; box-sizing: border-box;}
.tab-item.active i{opacity: 1;  transition: all 1s ease; transform: translateX(0); }
.tab-item.active h3::after{ content: ""; display: block; position: absolute; top:0; background: #f08705; left:-4rem; height: 4rem; width: 8px; transition: ease all 0.3s;}

  /* 右侧内容区域 - 移除padding */
.tab-content { width: 65.5%; position: relative; overflow: hidden; margin-left: 3.5%; }
.content-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transform: translateX(20px); transition: all 0.3s ease; /* 图片容器居中+适配 - 无内边距 */
            display: flex; align-items: center; justify-content: center; }
.content-item a{ display: block; width: 100%; height: 100%; overflow:hidden}
.content-item.active { opacity: 1; visibility: visible; transform: translateX(0);        }
.content-item img { object-fit: cover;  position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%);  transition: ease all 0.3s; } 
.content-item a:hover img{ width:105%;  transition: ease all 0.3s; }

/* 首页成功案例 */
.case a{ display: block; background-color: #fff; }
.case_txt{padding: clamp(1rem, 3vw, 4rem) clamp(1rem, 2vw, 2.5rem); transition: ease all 0.3s;} 
.case_txt h3{font-size: clamp(2rem, 2vw, 2.4rem); line-height: 1.6em; margin: 1rem 0;}
.case_txt p{ line-height: 2.6rem; font-size: 1.6rem; margin-top: 2rem; transition: ease all 0.3s;}

/* 鼠标指上去的效果 */
.list a{ display: block; transition: ease all 0.3s;}
.list a:hover{ background-color: #3c388c; color: #fff; transition: ease all 0.3s;}
.list a:hover span img{ width: 104% !important; transition: ease all 0.3s;}
.list a:hover h3, .list a:hover h4, .list a:hover b, .list a:hover p{ color: #fff !important;}


/* 一行三个内容的百分比 */
.case li, .work dl, .notice a{ width: 32%; margin-right: 2%; }
.ten_img:nth-child(3n), .case li:nth-child(3n), .work dl:nth-child(3n), .Refer dl:nth-child(3n), .notice a:nth-child(3n){ margin-right: 0%;}
/* 一行两个内容的百分比 */
.class-cont a{ width: 49%; display: block;}
/* 人才 */
#home-Talent{  width: 100%; overflow: hidden; margin-top:clamp(1rem, 2vw, 10em)}
.Talent{ position: absolute; z-index: 2; top:clamp(3rem, 7vw, 10em);  width:90%;}
.Talent p{ font-size:clamp(1rem, 1.5vw, 2rem); margin-bottom: clamp(1rem, 1.5vw, 3rem);}

/* 底部 */
.footer{ line-height: 3rem; padding-bottom: 2rem;}
.foot-top {  border-bottom:1px solid #ddd; line-height: 6rem; align-items: center;}
.foot-top a{ display: inline-block; margin-left:clamp(1rem, 1.5vw, 2rem); position: relative;}
.foot-top a i{ display: block; width: 28px; -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    -moz-filter: grayscale(100%); /* Firefox */
    -ms-filter: grayscale(100%); /* IE 9 */
    -o-filter: grayscale(100%); /* Opera */
    filter: grayscale(100%); 
    opacity: .6;/* Standard syntax */}
.erweima{ width: 176px;
    position: absolute;
    left: 0;
    top: -186px;
    z-index: 2; display: none;  transition: opacity 0.2s linear;}
.foot-top a:hover i{-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
    -moz-filter: grayscale(0%); /* Firefox */
    -ms-filter: grayscale(0%); /* IE 9 */
    -o-filter: grayscale(0%); /* Opera */
    filter: grayscale(0%); /* Standard syntax */ opacity: 1;}
.foot-top a:hover img.erweima{
    display: block;}
.foot-center { padding: 6rem 0 3rem; color: #666; position: relative; overflow: hidden;}
.foot-center dl{  width: 25rem; line-height: 4rem; color: #666; display: inline-block; float: left;}
.foot-center dt{ font-size: 2.4rem; font-weight: normal; margin-bottom: 1rem;}
.foot-center dl a, .links li a{color: #666;}
.foot-logo{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.foot-logo img{ height: 5rem !important; width: auto !important;}
.links li {display: inline-block; margin-right: 20px;}
.icon { display: none }

 /* 返回顶部按钮核心样式 */
.back-to-top {
            /* 固定定位 */
            position: fixed;
            bottom: 8rem;
            right: clamp(1rem, 3vw, 5rem);
            /* 按钮样式 */
            width: 50px;
            height: 50px;
            color: #333; 
            border: 1px solid #ddd;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            cursor: pointer;
            /* 初始隐藏 */
            opacity: 0;
            visibility: hidden;
            /* 过渡动画 */
            transition: all 0.3s ease;
            /* 层级保证 */
            z-index: 9999;
            /* 禁止文字选中 */
            user-select: none;
        }

        /* 按钮显示状态 */
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        /* 悬停动画 */
        .back-to-top:hover {
            background-color: #3c388c;
            color: #fff;
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
        }

        /* 点击按压效果 */
        .back-to-top:active {
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
        }

/* 简介 */
.banner{ width: 100%; overflow: hidden;}
.banner .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 8; color: #fff; max-width: 120rem; width: 100%;}
.banner h2{ font-size: clamp(2rem, 4vw, 5.2rem); transform: skewX(-10deg); margin-bottom:2rem}
.banner p{ font-size: clamp(1rem, 2vw, 2.6rem); }


.titleh3 {font-size: clamp(3rem, 3vw, 4.2rem); font-weight: normal;  transform: skewX(-10deg); margin: clamp(1rem, 2vw, 3rem) 0 1rem;  color: #333; transition: ease all 0.3s; }
.about-cont h4{ color: #333; font-size: 1.8rem; line-height: 2.8rem; margin-top: 2rem;}
.about-foot{ color: #666; background: #fbfbfb url(../images/about-bg.png) no-repeat center bottom; position: relative;  flex-wrap: wrap; background-size: auto 80%; 
    line-height: 2.4rem; width: 100%; padding: clamp(1rem, 4vw, 6rem) clamp(2rem, 4vw, 5rem) clamp(3rem, 8vw, 15rem);  font-size: 1.8rem;  margin: clamp(1rem, 4vw, 10rem) 0; box-sizing: border-box;}
.about-foot::after{ content: ''; width: 1px; height: 50%; background-color: #ddd; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.about-foot li{width: 43%; box-sizing: border-box;}
.title4{font-size: clamp(2.2rem, 2.2vw, 2.4rem);  line-height: clamp(2.8rem, 2.5vw,4rem);; margin: clamp(1rem, 2vw, 3rem) 0;   color: #333; transition: ease all 0.3s; font-weight: normal;}
.list .title4{ margin-top: 0;}
.Concept{ background: url(../images/about2.jpg)  no-repeat; background-size: 100% 100%; padding: clamp(2rem, 6vw, 10rem) 0; width: 100%; position: relative;}
.Concept ul{ width: 70%; margin: 7rem auto 0; text-align: center;} 
.Concept ul li { position: relative;}
.Concept ul li::before{ content: ''; position: absolute; width: calc(100% - 18px); height: 1px; background-color: rgba(255, 255, 255, 0.5); margin-top: 9px; margin-left: 18px;}
.Concept ul li:last-child::before{ display: none;}
.Concept ul span{ display: inline-block;  width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.8);  cursor: pointer; transition: ease all 0.3s; }
.Concept ul p{ margin-top: 2rem;}
 .Concept ul li span::after{ content: '';  display: block; opacity: 0; width: 26px; height: 26px; margin-left: -4px; margin-top: -4px;  border-radius: 50%; background: rgba(255, 255, 255, 0.5); transition: ease all 0.5s;}
 .Concept ul li:hover span::after{ opacity: 1;transition: ease all 0.5s;} 

.Organization{ padding:  clamp(1rem, 3vw, 5rem) 1rem; color: #3c388c; position: relative;}
.organ-cont{ padding-left: 46%; position: relative; margin: 3rem 0;  z-index: 3;}
.organ-cont h4{ display: inline-block; color: #3c388c; padding:1rem 0; background:#fff;}
.organ-cont span{font-size: clamp(1rem, 1.5vw, 2rem); transform: skewX(-10deg); display: inline-block; position:relative; z-index:3}
.organ-cont p{ display: inline-block; width: 10rem; border-bottom: 1px dashed #3c388c; margin: 0 1rem;}
.organ-cont:first-child p{ display:none}
.organ dl{ background: #f5f5f5;  margin-left: 0.8rem; padding: 0 2rem clamp(0rem, 1vw, 1rem); box-sizing: border-box; text-align: center; margin-top: 6rem; position: relative; }
.organ dl:first-child{ margin-left:0 ;}
.organ dl dt{ font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: clamp(1rem, 1vw, 2rem); color: #3c388c; }
.organ dl dd{ line-height: 2rem;  color: #666; text-align: center; box-sizing: border-box; justify-content: center;} 
.organ dl dd span{ display: inline-block;  width: 2rem; margin: 0 0.5rem; text-align: center;}
.organ dl::before{ content: '';  display: block; height: 6rem; width: 1px; background: #D8D9DC; position: absolute; top: -6rem; left: 50%; }
.organ dl:nth-of-type(3)::before{ display:none}
.xian{ height: 1px; width: 81%; background: #D8D9DC; border: none; box-sizing: border-box; margin: 4.5rem auto 0;}
.xian2{ transform: skewX(0deg); display: block; height: 37rem;  border: none;   width: 1px;  position: absolute;   background: #D8D9DC;  top:28%;  left: 49%; margin-left:-1px;}
.organ dl:hover{ background-color: #f4f3f8;}

.list-container{ margin-top:clamp(1.5rem, 3vw, 3rem);}
.team li{position: relative; width: 25%;}
.team li span{position: absolute;    right: 0;    top: 0; display: block;} 
.team li span img {    width: 120px;    height: 120px;}
.team li span i {
    display: block;
    width: 28px;
    height: 28px;
    background-color: #3c388c;
    position: absolute;
    left: -14px;
    bottom: -14px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
}
.team li:hover span i {
    left: 0px;
    bottom: 0px;
}

.team li .renwu{
    margin-top: 8rem;
    width: 100%; padding: 3rem 4rem 5rem; color: #666; box-sizing: border-box;}
    
.team li .renwu h5{ color: #3c388c; font-size: 2.3rem;  margin-bottom: 2rem; }
.team li:hover{ background-color: #f4f3f8;}
.renwu p{ line-height: 3rem;}

.contact{ padding: clamp(2rem, 4vw, 4rem) 1rem clamp(1rem, 3vw, 10rem); line-height: 3rem;}
.contact dt{ font-size: 2rem; color: #333; margin: clamp(1rem, 3vw, 3rem) 0 1rem;}
.contact h5{ color: #3c388c;}

/* 业务 */
.box{ padding:clamp(1rem, 3vw, 5rem) 1rem; }
.box p{ margin-bottom: 2rem;  line-height:2.6rem; font-size: 1.6rem; color: #666; text-align: justify;}
.box-title{ margin-bottom:  clamp(1rem, 1vw, 4rem); overflow:hidden}
/*.box-title h3.titleh3{ margin-bottom: 2rem; }*/
.addbg{ background: url(../images/busbg.jpg) no-repeat; background-size: 100%  auto}
.doc-img{ width: 48%; overflow:hidden}
.doc-text{ width: 46%; font-size: 1.8rem;}
.doc-text li{ margin-bottom: 3rem;}
.doc-img:hover img{ width:105% !important; transition: ease all 0.3s; }
/*.doc-text .title4{  margin:0 0 2rem ; transform: skewX(0deg);}*/

.Refer dl{  width: 32.6%;  margin-right: 1.1%; background-color: #fff; padding:2%; box-sizing: border-box; line-height: 2.8rem; overflow: hidden;}

.Refer dl dt{ color: #3c388c; font-size: 2rem; font-weight: normal;  transform: skewX(-10deg); margin-bottom: 1rem;}

/* 员工 */
.team{ position: relative;}
.team-cont {
    position: absolute;
    padding: 3rem 8rem 6rem 5rem;
    width: 36%;
    background: #3c388c;
    box-sizing: border-box; transform: translateY(-50%); color: #FFF;
    top: 50%;
    z-index: 5; 
}
.team-cont h3{ color: #fff; }
.team-cont p{line-height: 2.8rem; text-align: justify;}


.row{ position: relative;
    height: 0;
    overflow: hidden;
    display: block;
    background: #fff; padding-top: 18%}

.row-item{ position: absolute;
    top: 0 !important;
    left: 0 !important;
    width: 101% !important;
    height: 100% !important;
    display: block;
}

.row .item-1{ width: 66.66%; overflow: hidden;}
.row .item-2{ width: 33.33%; overflow: hidden;}
.item-2 img{ height: 100% !important; width: auto; opacity: 0.6; transition: ease all 0.3s; }
.row-item h4{ color: #fff;} 

.item{ position: relative; opacity: 1;}
.item-tet{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding:2% 4%; line-height: 2.8rem; box-sizing: border-box; color: #fff; z-index: 3;}
.item-tet p{ opacity: 0; transition: ease all 0.3s; }
.item:hover .item-tet p{ opacity: 1;}
.item-tet .mask-bg{
	width: 100%;
	height: 500%;
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	top: 0;
    left: 0;
    z-index: -1;
    transform: translate(0, 100%);
    transform-origin: bottom;
    transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1);
    -webkit-transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1);
    -moz-transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1);
    -ms-transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1);
    -o-transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1);
}
.row-1 .item-1 .mask-bg{
	background: rgba(0,82,217,1)
}
.row-1 .item-2  .mask-bg{
	background: #9B26B6
}
.row-2 .item-1 .mask-bg{
	background: rgba(121,192,0,1)
}
.row-2 .item-2 .mask-bg{
	background:#00a9ce ;
}
.row-3 .item-1 .mask-bg{
		background: rgba(255,103,31,1)
}
.row-3 .item-2 .mask-bg{

background: #00A9CE}

.item p{
	font-size: 16px;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 26px;
	position: relative;
	opacity: 0;
	transform: translate(0, 80px);
    transform-origin: bottom;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transition: transform .5s cubic-bezier(0.2, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.2, 0.0, 0.2, 1);
    -webkit-transition: transform .5s cubic-bezier(0.2, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.2, 0.0, 0.2, 1);
    -moz-transition: transform .5s cubic-bezier(0.2, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.2, 0.0, 0.2, 1);
    -ms-transition: transform .5s cubic-bezier(0.2, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.2, 0.0, 0.2, 1);
    -o-transition: transform .5s cubic-bezier(0.2, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.2, 0.0, 0.2, 1);
}
.item:hover .item-tet .mask-bg{
	transform: translate(0, 0px);
	-webkit-transform: translate(0, 0px);
	-moz-transform: translate(0, 0px);
	-ms-transform: translate(0, 0px);
	-o-transform: translate(0, 0px);
}
.item:hover p{
	opacity: 1;
    transform: translate(0, 0px);
	-webkit-transform: translate(0, 0px);
	-moz-transform: translate(0, 0px);
	-ms-transform: translate(0, 0px);
	-o-transform: translate(0, 0px);
}

.work dd{font-size: clamp(2rem, 1.8vw, 2.6rem);margin: clamp(1rem, 2vw, 3rem) 0; color: #333; transition: ease all 0.3s; font-weight: normal; line-height: 2.8rem;}
.work dt:hover img{ width:105% !important;  transition: ease all 0.3s;}
/* 员工结束 */

.View{ background: url(../images/more-awart.png) no-repeat right center; padding-right: 2rem; box-sizing: auto; display: inline-block;}

.Angle a:hover h4{ color: #3c388c;}
.Angle time{ color: #999;}
.Angle h4{ font-size: clamp(2rem, 2vw, 2.6rem) ; color: #333; margin-bottom: 2rem;}

.video-wrap {width: 50%; /* 占屏幕宽度的90% */    }
    /* 核心：视频自适应 */
    .video-wrap video {
      width: 100%; /* 宽度跟随父容器100% */
      height: 100%; /* 高度自动，保持宽高比 */
      max-width: 1200px; /* 大屏下最大宽度（按需调整） */
      display: block; /* 消除视频底部默认空白 */
    }

.vido-text{  width:100%;  padding: 0 clamp(1rem, 3vw, 6rem); box-sizing: border-box; color: #fff;}

.video-cont{  background-size: 50% 100%;  background-position: right;}

.job a{  background: #fff; box-sizing: border-box; padding:2rem; display: block; margin-bottom: clamp(1rem, 2vw, 3rem);}
.job a:hover{ background-color: rgba(60,56,140,0.02);}
.job-name h4{ color: #3c388c; font-size: 2.4rem; font-weight: bold; margin: 3rem 0 1rem;}
/*.job-name span{ background-color: #f5f5f5; padding: 1rem 2rem; display: inline-block} */
.job-zhize{ }
.job-zhize h5{  margin: 3rem 0 2rem;}
.job-zhize p{  font-size: 1.4rem; line-height: 2.8rem; margin-bottom: 0; }

.joblist a{ background-color: #f5f5f5; margin-bottom:clamp(1rem, 2vw, 3rem) ;}

time{ color: #999; font-size: 1.4rem;}
.message{ width: 80%; margin: clamp(1rem, 3vw, 6rem) auto;}
.message ul{ flex-wrap: wrap; color: #333; align-self: start;}
.message li{ width: 47%; margin: 1.5rem 0;  font-size: 1.6rem; position: relative; padding-left: 10rem;  box-sizing: border-box;}
.message li label{  width: 10rem; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.message li label span{color: #e20000;  width: 20px; display: inline-block; margin-top: 2px;}
.message li input, .message li select{ border: 1px solid #ebebeb; height: 4rem; line-height: 4rem; width: 100%; outline: none; box-sizing: border-box; padding-left: 15px;}
.message li option{ line-height: 4rem; padding: 1rem 0; display: block;}
.message li:last-child{ width: 100%;}
.message li:last-child label{  width: 10rem; display: block; position: absolute; left: 0; top: 2rem;}
.message li textarea{ border: 1px solid #ebebeb; height: 15rem; line-height: 3rem; width: 100%; outline: none; box-sizing: border-box; padding-left: 15px;}
.submit{  background-color: #3c388c; opacity: 0.8; color: #fff;  padding: 1.6rem 4rem; display: block; margin: 0rem auto; width: 4rem; text-align: center;}
.submit:hover{ opacity: 1;}

.root-tab a::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    margin-left: 12px;
    border-top: 1px solid #2b2e2e;
    border-right: 1px solid #2b2e2e;
    transform: rotate(45deg);
}
.root-tab li:last-child a::after{ display: none !important;}
.root-tab a:hover{ color: #194ac3;}
/* 列表页导航 */
.ten-media-tab{ padding: 2rem 0 4rem;}
.ten-media-tab a{ margin-right: 3rem; padding:1rem 0; box-sizing: border-box; display: inline-block; overflow: hidden;}
.ten-media-tab a.active{ color: #3c388c; font-weight: bold;    border-bottom: 3px solid #3c388c;}

.search{ border-bottom: 1px solid #ebebeb; background-size: 100% 0; height: 3rem;  min-width: 30rem;}
.search img{ display: inline-block !important; width: auto; height: 80% !important;}
.search input{ border:none; margin-left: 1rem; outline: none; line-height: 3rem; display: inline-block; width:calc(100% - 5rem);}

.detalis{ max-width: 120rem; margin: 0 auto;}
.detalis-cont{ max-width: 84rem; padding: 0 1rem; margin-left: 14rem; box-sizing: border-box;}
.title-3{ margin-bottom:clamp(4rem, 4vw, 7rem);
    margin-top: 5rem; padding:1rem 0px; border-bottom: 1px solid #D8D9DC ;}
.title-3 .main{ font-size:  clamp(3rem, 4vw, 4rem); line-height:  clamp(4rem, 4vw, 5.6rem); font-weight: 500; font-variant-ligatures: no-common-ligatures;}
.title-3 .date{ line-height: 3rem;  color: #999; margin-top: 3rem;}
.title-3 .date span{ display:inline-block; margin-right: 2rem; color: #3c388c;}
.data {    padding-bottom: 5rem;  line-height: 2.8rem; font-size: 1.6rem;}

.share{ text-align: center; position: absolute;  right: 0; top: 12%; }
.share a{ display: block; height: 40px; width: 40px; color: #5F6464 ; margin-bottom: 24px;cursor: pointer;position: relative;}
.share img{ display: block; margin: auto; padding-top: 6px;}
.share .in{ padding-top: 7px;}
.share .xl{ padding-top: 8px;}
.share .lz{ padding-top: 9px;}

.share .icon{ display: block; width: 32px; height: 32px; background: url(../images/wx.png) no-repeat 0 0; background-size: contain; margin: 0 auto; transition: background 0.2s linear;}
.share .icon_in{ background-image: url("../images/in.png");}
.share .icon_xl{ background-image: url("../images/xl.png");}
.share .icon_lz{ background-image: url("../images/lz.png");}
.share .icon_mail{ width: 30px; height: 30px; background-image: url("../images/mail.png");}

.share a:hover .icon_wx{ background-image: url("../images/wx_hover.png");}
.share a:hover .icon_in{ background-image: url("../images/in_hover.png");}
.share a:hover .icon_xl{ background-image: url("../images/xl_hover.png");}
.share a:hover .icon_lz{ background-image: url("../images/lz_hover.png");}
.share a:hover .icon_mail{ background-image: url("../images/mail_hover.png");}
#qrcode{
  display: none;
}
#qrcode img{
    width: 90px;
  position: absolute;
  left: -120px;
  bottom: 0;
  border: 10px solid #fff;
  padding: 0;
}
.share a.wx:hover #qrcode{
  display: block;
}
.code-img{
  width: 200px;
}

 /* 弹窗遮罩层 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
            z-index: 999;
        }

        /* 弹窗显示状态 */
        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* 弹窗主体 */
        .modal-content {
            width: 80%;
            max-width: 800px;
            background-color: #fff;
            border-radius: 12px;
            display: flex;
            overflow: hidden;
            transform: scale(0.9);
            transition: transform 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .modal-overlay.active .modal-content {
            transform: scale(1);
        }

        /* 弹窗图片区域 - 适配img标签 */
        .modal-image-wrapper {
            width: 34%;
            height: 400px;
            overflow: hidden; /* 防止图片超出容器 */
        }

        .modal-image {

            object-fit: cover; /* 保持图片比例并填充容器 */
            object-position: center;
        }

        /* 弹窗内容区域 */
        .modal-info {
            width: 60%;
            padding: clamp(2rem, 3vw, 3rem);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* 关闭按钮 */
        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #f0f0f0;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #666;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .close-btn:hover {
            background-color: #ff4444;
            color: #fff;
        }

        /* 弹窗名字样式 */
        .modal-name {
            font-size: 28px;
            color: #333;
            font-weight: 600;
            margin-bottom: 15px;
        }

        /* 弹窗职位样式 */
        .modal-jobs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }

        .modal-jobs span {
            font-size: 14px;
            color: #666;
            background-color: #f5f5f5;
            padding: 6px 12px;
            border-radius: 20px;
        }

        /* 弹窗简介样式 */
        .modal-brief {
            max-height: 25rem;
            overflow-y: auto;
            font-size: 16px;
            line-height: 1.8;
            color: #666;
            border-top: 2px solid #eee;
            padding-top: 20px;
            text-align: justify;
        }


        
        /* 布局1：大图在上+文字在下，一行3个 */
.layout-1 { display: flex; flex-wrap: wrap;}
.layout-1 a {width:32%; /* 减去两个gap的宽度，均分3列 */ margin-right: 2%; display: flex; flex-direction: column;        }
.layout-1 h4{ margin-top: 0;}      
.layout-1 a:nth-child(3n){ margin-right: 0;}
        /* 布局2：大图在右+文字在左，一行1个 */
.layout-2 { flex-wrap: nowrap; /* 不换行 */ flex-direction: column; /* 纵向排列（一行一个） */ gap: 20px;        }
      
.layout-2 a { width: 100%; display: block; margin: 3rem 0; flex-direction: row; /* 横向排列 */        }
.layout-2 a:hover{ background: none; color: #333;}
.layout-2 a:hover h4{ color: #3c388c !important;}
.layout-2 a:hover p{ color: #666 !important;}
.layout-2 dl{ display: flex; }
.layout-2 dd {flex: 1; /* 文字部分占剩余宽度 */ padding: 0;}
.layout-2 dt { width: 27%; /* 固定图片宽度 */ margin-right: 5%; }
.btn-group{ position: absolute; right: 0; top: 2rem;}
.btn{ width: 32px; display: inline-block; margin-left:clamp(0rem, 1vw, 1rem);  opacity: 0.5;}
 .btn.active {
            opacity: 1;
        }
        /* 响应式适配（可选） */
 @media (max-width: 992px) {
            .layout-1 a {
                width: calc((98%) / 2); /* 小屏幕一行2个 */
            }
            .layout-1 a:nth-child(3n){ margin-right: 2%;}
            .layout-1 a:nth-child(2n){ margin-right: 0;}
        }

 @media (max-width: 576px) {
    .btn-group{ display: none;}
 .layout-1 a{
                width: 100%; /* 超小屏幕一行1个 */ margin-right: 0;
            }
.layout-1 a:nth-child(3n){ margin-right: 0;}
 .layout-2 .list-item {
                flex-direction: column; /* 小屏幕恢复上下布局 */
            }
.layout-2 dt {
                width: 100%;
            }
        }


         /* 分页容器样式 - 基础样式 */
        .pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px; /* 基础间距 */
            list-style: none;
            padding: 10px 0;
            flex-wrap: wrap; /* 防止小屏溢出 */
        }
  /* 分页按钮通用样式 - 基础样式 */
        .page-item a{
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            color: #333;
            background-color: #fff;
            border: 1px solid #e5e7eb;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px; /* 基础字体大小 */
            font-weight: 500;
            padding: 13px 16px;
        }
        
        .page-item span{
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            color: #333;
            background-color: #fff;
            border: 1px solid #e5e7eb;
            transition: all 0.2s ease;
            font-size: 14px; /* 基础字体大小 */
            font-weight: 500;
            padding: 13px 16px;
        }

        /* 鼠标悬停效果 */
        .pagination .page-link:hover{
            background-color: #f9fafb;
            border-color: #d1d5db;
            color: #165dff;
        }

        /* 激活状态（当前页码） */
        .pagination .active span{
            background-color: #165dff;
            color: #fff;
            border-color: #165dff;
            cursor: default;
        }

        /* 禁用状态 */
        .pagination .disabled span{
            color: #9ca3af;
            cursor: not-allowed;
            background-color: #fff;
            border-color: #e5e7eb;
        }
        /* 激活状态（当前页码） */
        .pagination .active span{
            background-color: #165dff;
            color: #fff;
            border-color: #165dff;
            cursor: default;
        }
       
       

        /* ========== 响应式适配 - 分设备精细化调整 ========== */
        
        /* 1. 手机端 (超小屏) - 宽度 ≤ 576px */
        @media (max-width: 576px) {
            .pagination {
                gap: 4px; /* 更小的间距 */
            }
            .page-item a{
                width: 36px;
                height: 36px;
                font-size: 13px; /* 更小的字体 */
                border-radius: 3px; /* 更圆润的边角 */
            }
            /* 上一页/下一页文字适配 */
            .page-item a.page-link {
                width: 68px; /* 专门适配文字按钮宽度 */
                font-size: 12px;
            }
        }

        /* 2. 平板端 (中屏) - 576px < 宽度 ≤ 768px */
        @media (min-width: 577px) and (max-width: 768px) {
            .pagination {
                gap: 6px;
            }
            .page-item a{
                width: 38px;
                height: 38px;
                font-size: 14px;
            }
           .page-item a.page-link {
                width: 80px;
            }
        }

        /* 3. 平板/电脑端 (大屏) - 768px < 宽度 ≤ 992px */
        @media (min-width: 769px) and (max-width: 992px) {
            .pagination {
                gap: 7px;
            }
            .page-item a{
                width: 40px;
                height: 40px;
                font-size: 14px;
            }
            .page-item a.page-link {
                width: 85px;
            }
        }

        /* 4. 电脑端 (超大屏) - 宽度 > 992px */
        @media (min-width: 993px) {
            .pagination {
                gap: 8px;
            }
            /*.page-item a{*/
            /*    width: 42px;*/
            /*    height: 42px;*/
            /*    font-size: 15px;*/
            /*}*/
            /*.page-item a.page-link {*/
            /*    width: 90px;*/
            /*}*/
        }
        
        
    /* 新增 */
        .mod-nav-wrap {
      width: 100%;
      transition: all 0.3s ease;
    }

    .mod-nav {
      background-color: #f5f5f5;
      border-bottom: 1px solid #eee;
      width: 100%;
    }

    .mod-nav ul {
      display: flex; overflow-x: auto;
      gap: 2rem; white-space: nowrap;
    width: auto;
    }

    .mod-nav a {
        display: block;
      color: #333;
      font-size: 1.6rem;
      padding: 2rem 0 1.8rem;
      transition: color 0.2s;
    }

    /* 导航固定样式 */
.mod-nav.mod-nav-fixed {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important; /* 补充right确保宽度100% */
      z-index: 9999 !important; /* 提高z-index避免被遮挡 */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
     .mod-link.active {
       border-bottom: 2px solid #3c388c;
        }

        /* 鼠标悬停效果 */
        .mod-link:hover:not(.active) {
            color: #3c388c;
        }