/* 初始化 */
   fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

body,div,img,td,table,form {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 16px;
}
/* a连接定义颜色 */
a{
   color: #000;
  }
/* 文字左右对齐 */
.p {
	text-align: justify;
    text-indent: 2em; 
	line-height: 31px;
    margin-top:20px;
    font-size: 1rem;
}
/* 文字左右对齐 */
.p2 {
	text-align: justify;
	line-height: 31px;
    margin-top:20px;
    font-size: 1rem;
}
/* 去除点 */
ul,ol,li {
	list-style: none;
}
/* 去除a链接下划线 */
a {
	text-decoration: none;
}
/* 清除 */
.clear {
	clear:both;
}
.width_all {
	width: 100%;
}

.width1200 {
    width:90vw;
	margin: 0 auto;

}
@media screen and (max-width: 899px) {
  .width1200 {
	width: 100%;
	margin: 0 auto;

}
}
.biaoti {
	margin: 0 0 0 20px;
	color: #fff;
}


/*首页公司简介*/
.about_left {
	float: left;
	width: 80%;

}

.about_right {
	float: right;
	width: 18%;

}

.column {
	margin-top: 10px;
	height: 48px;
	line-height: 48px;
	padding: 0 0 0 0;
	background: #01459a;
}
@media screen and (max-width: 899px) {
  .about_left {

	width: 100%;

}

.about_right {

	width: 100%;

}
}

/*服务项目*/
.fuwu{
    text-align: center;
    font-size: 31px;
    color: red;
    width: 100%;
    height: 48px;
    line-height: 48px;
    color: #FF6600;
    margin-bottom: 20px;
}
.fuwubiaoti{
    font-size: 20px;
}
.fuwujiage{
    font-size: 31px;
    color: #FF6600;
}
.wangzhankaifa{
    text-align: center;
    float: left;
    width: 20vw;
    margin: 10px;
    padding: 5px;
    border: 1px solid #eee;
    transition: transform 0.3s ease; /* 平滑的过渡效果 */
    transform: translateY(0); /* 初始状态，不位移 */
}
.wangzhankaifa:hover{
    transform: translateY(-18px); 
    background-color: #F6F6F6;
}
@media (max-width: 600px){
    .wangzhankaifa{
    text-align: center;
    float: left;
    width: 95%;
    margin: 10px;
    padding: 5px;
    border: 1px solid #eee;
    transition: transform 0.3s ease; /* 平滑的过渡效果 */
    transform: translateY(0); /* 初始状态，不位移 */
}
.wangzhankaifa:hover{
    transform: translateY(-6px); 
    background-color: #F6F6F6;
}
}
/*600-900屏幕*/
@media screen and (min-width: 600px) and (max-width: 900px){
     .wangzhankaifa{
    text-align: center;
    float: left;
    width: 47%;
    margin: 10px;
    padding: 5px;
    border: 1px solid #eee;
    transition: transform 0.3s ease; /* 平滑的过渡效果 */
    transform: translateY(0); /* 初始状态，不位移 */
}
.wangzhankaifa:hover{
    transform: translateY(-18px); 
    background-color: #F6F6F6;
}
}
.fubiaoti{
    height: 20px;
    line-height: 20px;
    color: #262626;
    margin-top: 10px;
    margin-bottom: 36px;
}
.text{
    line-height: 23px;
    margin-bottom: 15px;
}

/* 首页产品推荐 */
.container {
    max-width: 90vw;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 修改为靠左排列 */
    /*border: 1px solid black;*/
}

.image-container {
    flex: 0 0 calc(25% - 20px); /* 修改为减去两个外边距的宽度 */
    margin-bottom: 20px;
    margin-right: 10px; /* 添加右侧外边距 */
    position: relative;
    overflow: hidden;
    height: 25vh; /* 假设你想要的高度 */
}

.image-container:nth-child(4n) { /* 选择每四个项目的最后一个，移除其右侧外边距 */
    margin-right: 0;
}

.image-container img {
    width: 100%;
    height: auto; /* 修改为auto以保持图片比例 */
    object-fit: cover;
    display: block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.image-container:hover img {
    transform: scale(1.3);
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    font-size: 1rem;
}
.caption:hover {
    background-color: rgba(1, 2, 3, 0.8);
}

@media (max-width: 600px) {
    .image-container {
        flex: 0 0 100%;
        margin-right: 0; /* 在小屏幕上移除右侧外边距 */
    }
}
/* 底部版权 */
.footer{
  width: 100%;
  background: #27303f;
}
.footer_txt{
  color:#6a6a6a;
}
/* 内页通用：公司简介/产品展示/新闻页面/联系方式/留言 */
.class_left{
	float: left;
	width: 18%;
}
.content_right{
	float: right;
	width: 80%;
}
@media screen and (max-width: 899px){
  .class_left{
	width: 100%;
}
.content_right{
	width: 100%;
}
}
/* 左侧公用栏目 */
.public_left_menu {
	float: left;
	padding: 0px;
	line-height: 24px;
	width: 100%;
}

.public_left_menu_list {
	background: #000;
}

.public_left_menu_list_li {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 45px;
	line-height: 45px;
	margin-top: 2px;
	display: block;
	color: #000;
	background: #F2F2F2;
}
@media screen and (max-width: 899px){
  .public_left_menu_list_li {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 45px;
	line-height: 45px;
	margin-top: 2px;
	display: block;
	color: #000;
	background: #F2F2F2;
}
}
.public_left_menu_list_li_a {
	color: #333;
	padding-left: 20px;
	background: #F2F2F2 url(../images/list_icon.png) no-repeat 200px center;
	font-size: 16px;
	color: #000;
	display: block;
	transition: all .3s ease;
}

.public_left_menu_list_li_a:hover {
	color: #fff;
	background: #e91e63 url(../images/list_icon.png) no-repeat 200px center;
}




/* 产品展示 */

.product {
	float: left;
	width: 1200px;
    background: #f8f8f8;
	/* border: 1px solid #01459A; */
}
.product_list{
    float: left;
    margin-right: 15px;
    margin-bottom: 20px;
    width: 208px;
    height: 270px;
    background-color: #fff;
    box-shadow: 1px 2px 3px 0px rgba(118, 118, 118, 0.5);
	display: inline-block;
    /* border: #000 solid 1px; */
    display: inline-block；
}

/* 删除右边第四个图片的边距 备用暂时没有用到*/
product_list li:nth-child (n){
	margin: 0;
}

.product_list img{
 width: 100%;
}
.news_left {
	float: left;
	width: 600px;
	height: 300px;
}

.news_right {
	float: right;
	width: 600px;
	height: 300px;
}


/*Product*/
.productList {
	width: 100%;
	float: left;
}
.productList_row {
	margin-left: -15px;
	margin-right: -15px;
}
.pro_list {
	float: left;
	width: 20%;
	text-align: center;
	margin-bottom: 40px;
	padding: 0 15px;
}
.pro_list_box {
	float: left;
	width: 100%;
	box-shadow: 0 0 1px #ccc;
	padding: 10px;
	transition: all .3s ease;
}
.pro_list_box:hover {
	box-shadow: 0 0 7px #ccc;
}
.pro_list_img {
	float: left;
	width: 100%;
}
.pro_list_img a {
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-size: contain !important;
}
.pro_list_title {
	float: left;
	width: 100%;
	height: 30px;
	line-height: 30px;
	overflow: hidden;
}
.pro_list_title a {
	transition: all .3s ease;
}
.pro_list_box:hover .pro_list_title a {
	color: #01459A;
}
.productTitle {
	line-height: 35px;
	font-weight: bold;
	text-align: center;
	font-size: 18px;
}
.productImg {
	width: 100%;
	text-align: center;
	float: left;
	margin: 10px auto;
}
.productImg img {
	max-width: 100%;
}
.productBuy {
	width: 100%;
	text-align: center;
	float: left;
	margin: 10px auto;
}
.productBuy a {
	margin: 0 10px;
}


/* 轮播图幻灯片 */
.fader {
	position: relative;
	padding-top: 20%;
	font-family: futura,arial;
	overflow: hidden
}

.fader .slide {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 1;
	opacity: 0
}
.fader .slide_no {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 1;
	opacity: 1
}

.fader img.slide {
	height: auto
}

.fader .next,.fader .prev {
	position: absolute;
	height: 80px;
	line-height: 55px;
	width: 50px;
	font-size: 100px;
	text-align: center;
	color: #fff;
	top: 45%;
	left: 0;
	/*z-index: 4;*/
	margin-top: -25px;
	cursor: pointer;
	opacity: .7;
	transition: all 150ms
}

.fader .next:hover,.fader .prev:hover {
	opacity: 1
}

.fader .next {
	left: auto;
	right: 0
}

.fader .pager_list {
	position: absolute;
	width: 100%;
	height: 40px;
	padding: 0;
	line-height: 40px;
	bottom: 0;
	text-align: center;
	z-index: 4
}

.fader .pager_list li {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: 0 7px;
	/*background: #fff;*/
	opacity: .7;
	text-indent: -9999px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 150ms
}

.fader .pager_list li.active,.fader .pager_list li:hover {
	opacity: 1
}
/*页码*/
.pages {
	font-size: 12px;
	text-align: center;
	padding: 10px 0px 10px 0px;
}
.pages li {
	display: inline-block;
	margin: 3px;
}
.pages a {
	font-size: 14px;
	padding: 6px 12px;
	background: #f5f5f5;
	display: block;
}
.pages a:hover {
	background: #01459A;
	color: #fff;
}
.pages li.active a {
	background: #01459A;
	color: #fff;
}
.pages select {
	vertical-align: middle;
	font-size: 8pt;
	padding: 0px;
}
.pages b {
	font-weight: normal;
}

.pagination {
	display: inline-block;
	padding-left: 0;
	margin: 20px 0;
	border-radius: 4px
}
.pagination>li {
	display: inline
}
.pagination>li>a, .pagination>li>span {
	position: relative;
	float: left;
	padding: 6px 12px;
	margin-left: -1px;
	line-height: 1.42857143;
	color: #337ab7;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ddd
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
	margin-left: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
	z-index: 3;
	color: #23527c;
	background-color: #eee;
	border-color: #ddd
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
	z-index: 2;
	color: #fff;
	cursor: default;
	background-color: #337ab7;
	border-color: #337ab7
}
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
	color: #777;
	cursor: not-allowed;
	background-color: #fff;
	border-color: #ddd
}
.pagination-lg>li>a, .pagination-lg>li>span {
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.3333333
}
.pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px
}
.pagination-lg>li:last-child>a, .pagination-lg>li:last-child>span {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px
}
.pagination-sm>li>a, .pagination-sm>li>span {
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5
}
.pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px
}
.pagination-sm>li:last-child>a, .pagination-sm>li:last-child>span {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px
}
/*end*/



 /* 重置默认样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* 通用样式 */
  body {
    font-family: Arial, sans-serif;
  }


/*电脑-版导航栏样式*/
  /*头部样式*/
  header {
    width: 100vw;
    background-color: #b00343
  }
  /* Logo样式 */
.logo {
height: 70px;
background-image: url('/app/index/view/images/logo.png');
background-repeat: no-repeat;
background-color: #fff;
margin: 0 6.5vw;
margin-top: 6px;: ;
  }
nav {
	width: 100%;
	height: 48px;
	background-color: #01459a;
}
.nav-menu  {
	width: 90vw;
	height: 48px;
	line-height: 48px;
	text-align: center;
	background-color: #01459a;
	margin: 0 auto;
}
.nav-menu li a {
    float: left;
	width: 14%;
	height: 48px;
	background: #01459a;
	display: block;
	color: #fff;
}
.nav-menu a:hover {
	width: 14%;
	height: 48px;
	background: #9a2421;
	display: block;
	color: #dedcdb;
}
.anniu {
	float: left;
	width: 14%;
	line-height: 48px;
	text-align: center;
}

@media screen and (max-width:500px){
  /* Logo样式 */
  .logo {
    height:70px;
    line-height: 70px;
    background-image: url('/app/index/view/images/logo.png');
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    }
}
@media screen and (max-width: 900px){
      /*头部样式*/
  header {
    width: 100vw;
    /*height: 50px;*/
    background-color: #b00343
  }
      /* 导航栏样式 */
  nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5vw;
    height: 80px;
    background-color: rgba(11, 71, 183, 0.0);
  }

  /* Logo样式 */
  .logo {
    height:70px;
    line-height: 70px;
    background-image: url('/app/index/view/images/logo.png');
    /*background-size: cover;*/
    background-position: center;
    background-repeat: no-repeat;
    }

  /* 导航菜单样式 */
  .nav-menu {
    flex: 1;
    display: flex;
    justify-content: space-between;
    max-width: 550px;
  }

  /* 导航菜单项样式 */
  .nav-menu li {
    list-style: none;
    color: #046161;
    font-weight: 600;
  }
.nav-menu li a {
    float: left;
	width: 190px;
	height: 48px;
	color: #fff;
	background-color: rgba(11, 71, 183, 0.0);
	display: block;
}
.nav-menu a:hover {
	width: 190px;
	height: 48px;
	background-color: rgba(0, 0, 0, 0.0);
	display: block;
	color: #dedcdb;
}
  /* 汉堡图标样式 */
  .burger {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    cursor: pointer;
  }

  /* 汉堡图标线条样式 */
  .burger div {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 4px 0;
  }

    .nav-menu {
      position: fixed;
      top: 80px;
      right: -100%; /* 初始时导航菜单在屏幕右侧之外 */
      width: 30%;
      height: calc(100vh - 80px);
      background-color: rgba(65, 81, 101, 0.4);
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      transition: right 0.3s ease-in-out;
    }

    /* 导航菜单打开状态 */
    .nav-menu.open {
     right: 0; /* 导航菜单滑出时显示在屏幕右侧 */
     z-index: 9999;
    }

    /* 导航菜单项动画 */
    .nav-menu li {
      margin: 3vh;
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

    /* 汉堡图标在小屏幕上的显示 */
    .burger {
      display: block;
    }

    /* 汉堡图标激活状态 */
    .burger.active .top-line {
      transform: rotate(45deg) translate(4px, 6px);
    }

    .burger.active .middle-line {
      opacity: 0;
      transform: translate(10px);
    }

    .burger.active .bottom-line {
      transform: rotate(-45deg) translate(4px, -6px);
    }
  }

  /* 动画定义 */
  @keyframes slidein {
    from {
      transform: translateX(20px);
      opacity: 0;
    }
    to {
    transform: translateX(0);
    opacity: 1;
}
}