@charset "utf-8";
/* CSS Document */

/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
h2{  position: relative;
    left: -1.75rem;
    padding-left: 1.75rem;
    background: url(https://www.cnicif.com/img/real-circle_ic.526202f8.svg) no-repeat 0 / 3.5rem 3.5rem;
	height: 100%;
font-size: 2.75rem;
line-height: 3.875rem;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #333;}
h2 span{font-size: 1.5rem;
    line-height: 2.0625rem;
    margin-left: 1.25rem;}
.gengduo a{border-bottom: .125rem solid #0d7dfc;
    font-size: 1rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d1f24;
    line-height: 1.875rem;
text-decoration: none;}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
	 position: fixed;
	 backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1; /*确保导航栏在其他内容之上*/
	 width: 100%;
	height: 100px
}

.logo {
  font-size: 20px;
  font-weight: bold;
	padding-left: 79px;
}

.search-box {
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
}

.main-nav a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
}

.user-links a {
  color: white;
  text-decoration: none;
  margin: 0 5px;
	border-right: 1px solid white;
    padding-right: 10px;
}

/* 轮播图样式 */
.slider {
  position: relative;
  overflow: hidden;

}
.slider img{width: 100vw}

.slider-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;

}

.slider-image.active {
  opacity: 1;
}
.full-browser-image{
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
   
    }

/* 第三屏样式 */
.section3 {
  display: flex;
  background-color: white;
  padding: 20px;
  position: relative;
  top: -10px;
	margin: 0 auto; /* 实现水平居中 */
	width: 1200px;
	 box-shadow: 2px 2px 18px 1px rgba(0, 0, 2, 0.3);
}

.left-image {
  width: 760px;
  margin-right: 20px;
}

.right-content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.right-content a::before {
       content: "·"; /* 插入一个实心圆点 */
       margin-right: 5px; /* 调整圆点与链接文字之间的间距 */
   }

.item {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.item img {
  margin-right: 10px;
}

/* 第四屏样式 */
.section4 {
  background-image: url('background-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  width: 1200px;
	margin: 0 auto; /* 实现水平居中 */
}

.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
	    height: 60px;
}

.content {
  display: flex;
	background: url(https://www.cnicif.com/img/dynamic_bg@2x.577f99c4.png) no-repeat 50% / 100% 100%;
	
}


.left-content {
  position: relative;
  width: 600px;
  margin-right: 20px;
}

.left-content img {
  width: 100%;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
}

.right-content a {
font-size: 1rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333;
    line-height: 1.5rem;
    letter-spacing: .0625rem;
  text-decoration: none;

}

/* 第五屏样式 */
.section5 {
  background-image: url('background-image2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  width: 1200px;
  margin: 0 auto;
}

  /* 整体布局容器样式 */
  .image-layout {
        display: flex;
        justify-content: space-between;
    }

   

    /* 左侧大图样式 */
  .big-image {
        width: 48%;
        height: auto;
	    transition: transform 0.2s ease-out;
    }
.big-image :hover {
       transform: translateY(-5px); /* 向上移动5px，可根据需求调整此值 */
   }
.small-image{transition: transform 0.2s ease-out;}
.small-image :hover {
       transform: translateY(-5px); /* 向上移动5px，可根据需求调整此值 */
   }

    /* 右侧小图容器样式 */
  .right-images {
        width: 48%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* 右侧每行小图容器样式 */
  .right-images-row {
        display: flex;
        justify-content: space-between;
    }

    /* 右侧小图样式 */
  .right-images img {
        width: 49%;
        height: auto;
    }

/* 第六屏样式 */
.section6 {
  width: 100%;
}

.section6 img {
  width: 100%;
}

/* 第七屏样式（修改部分） */
.section7 {
  background-image: url('background-image3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  width: 1200px;
  margin: 0 auto;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-container img {
  width: 19%; /* 每张图片占据约19%的宽度，考虑到间隙会有一点微调 */
  margin-bottom: 10px; /* 图片之间的纵向间距 */
}

/* 第八屏样式 */
.section8 {
  width: 1200px;
margin: 0 auto; /* 实现水平居中 */
}

.section8 img {
  width: 100%;
}


/* 底部 */
.container-3 {
    background-image: url('http://www.cnicif.com.cn/images/footer_bg_v2.png');
    background-size: cover;
    background-position: center;
    padding: 20px;
	
}
/* 第十一行到第十三行样式 */
.eleventh-row {
    display: flex;
    justify-content: space-between;

	    width: 1200px;
    margin: 0 auto;
}

.eleventh-row ul,
.twelfth-row ul,
.thirteenth-row ul {
    padding: 0;
    list-style: none;
}

.column {
max-width: 37.375rem;
    margin-top: 4.75rem;
}
.column ul li{font-size: 1.125rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333;
    line-height: 2.5625rem;}
.column-title {
    font-weight: bold;
	font-size: 1.25rem;
}

.image-container {
  display: flex;
}

.image-wrapper {
  margin-right: 20px; /* 图片之间的间距 */
	padding: 20px;
	
}

.caption {
  text-align: left;
  margin-top: 10px; /* 图注与图片之间的间距 */
  color: #ffffff; /* 图注文字颜色 */
	font-size: .875rem;
}


.twelfth-row{
    text-align: center;
    margin-top: 20px;
    width: 1200px;
    margin: 0 auto;
    margin-top: 40px;}
.thirteenth-row {
    text-align: center;
    margin-top: 20px;
    width: 1200px;
    margin: 0 auto;

    margin-top: 10px;}
.image-container1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-container1 img {
  width: 100%; /* 每张图片占据约19%的宽度，考虑到间隙会有一点微调 */
  margin-bottom: 10px; /* 图片之间的纵向间距 */
}