/* CSS Document */
.bgf8{ background: #f8f8f8;}

.fix{ clear:both; height:1px; line-height:1px; overflow:hidden;}
.fullimg{  height: auto; width: auto;max-width: 100%; margin: 0px auto;}

.pd-t120{ padding-top: 30px;}
.pd-t100{ padding-top: 36px;}
.pd-b100{ padding-bottom: 36px;}
.pd-tb100{padding-top: 36px; padding-bottom: 36px;}
.mg-t100{ margin-top: 36px;}
.pd-t80{ padding-top: 25px;}
.pd-b80{ padding-bottom: 25px;}
.pd-tb80{padding-top: 25px; padding-bottom: 25px;}
.mg-t80{ margin-top: 25px;}
.pd-l60{ padding-left: 23px;}
.mg-t60{ margin-top: 20px;}
.pd-t60{ padding-top: 20px;}
.pd-b60{ padding-bottom: 20px;}
.pd-t40{ padding-top: 15px;}
.pd-b40{ padding-bottom: 15px;}
.pd-tb40{ padding-top: 15px; padding-bottom: 15px;}
.mg-t40{ margin-top: 15px;}
.mg-t30{ margin-top: 10px;}
.mg-b30{ margin-bottom: 10px;}
.pd-tb30{ padding-top: 10px; padding-bottom: 10px;}
.pd-lr30{ padding-left: 10px; padding-right: 10px;}
.pd-b30{ padding-bottom: 10px;}
.pd-t25{ padding-top: 9px;}
.pd-b25{ padding-bottom: 9px;}
.pd-tb25{ padding-top: 9px; padding-bottom: 9px;}
.pd-t20{ padding-top: 8px;}
.pd-tb20{ padding-top: 8px; padding-bottom: 8px;}
.mg-t20{ margin-top: 8px;}
.pd-t15{ padding-top: 6px;}
.mg-t10{ margin-top: 4px;}
.mg-t5{ margin-top: 5px;}

h1, .h1, .ft36-26 {font-size: 1.625rem;}/*26px*/
h2, .h2, .ft32-24 {font-size: 1.5rem;}/*24px*/
h3, .h3, .ft28-22 {font-size: 1.375rem;}/*22px*/
h4, .h4, .ft24-18 {font-size: 1.125rem;}/*18px*/
h5, .h5, .ft20-16 {font-size: 1rem;}/*16px*/
h6, .h6, .ft16-14 {font-size: 0.875rem;}/*14px*/
.ft_52{ font-size:1.875rem;/*30px*/}
.ft_48{ font-size:1.5rem;/*24px*/}
.ft_36{font-size:1rem;/*20px*/}/*tcl专题特殊设置，原20px*/
.ft_32{font-size:1.1875rem;/*19px*/}
.ft_30{font-size:1.125rem;/*18px*/}
.ft_24{ font-size:1rem;/*16px*/}
.ft_22{ font-size:0.875rem;/*14px*/  }
.ft_20{font-size:0.75rem;/*12px*/}
.ft_16{ font-size: 0.75rem;/*12px*/}
@media (min-width: 576px) {
	.ft_52{ font-size:2.25rem;/*36px*/}
	.ft_48{ font-size:1.75rem;/*28px*/}
	.ft_30{font-size:1.25rem;/*20px*/}
	.ft_24{ font-size:1.125rem;/*18px*/}
	.ft_22{ font-size:1rem;/*16px*/}
	.ft_20{font-size:0.875rem;/*14px*/}
}
@media (min-width: 768px) {
	.pd-t120{ padding-top: 50px;}
	.pd-t100{ padding-top: 60px;}
	.pd-b100{ padding-bottom: 60px;}
	.pd-tb100{padding-top: 60px; padding-bottom: 60px;}
	.mg-t100{ margin-top: 60px;}
	.pd-t80{ padding-top: 40px;}
	.pd-b80{ padding-bottom: 40px;}
	.pd-tb80{padding-top: 40px; padding-bottom: 40px;}
	.mg-t80{ margin-top: 40px;}
	.pd-l60{ padding-left: 30px;}
	.mg-t60{ margin-top: 30px;}
	.pd-t60{ padding-top: 30px;}
	.pd-b60{ padding-bottom: 30px;}
	.pd-t40{ padding-top: 20px;}
	.pd-b40{ padding-bottom: 20px;}
	.pd-tb40{ padding-top: 20px; padding-bottom: 20px;}
	.mg-t40{ margin-top: 20px;}
	.mg-t30{ margin-top: 15px;}
	.mg-b30{ margin-bottom: 15px;}
	.pd-tb30{ padding-top: 15px; padding-bottom: 15px;}
	.pd-lr30{ padding-left: 15px; padding-right: 15px;}
	.pd-b30{ padding-bottom: 15px;}
	.pd-t25{ padding-top: 15px;}
	.pd-b25{ padding-bottom: 15px;}
	.pd-tb25{ padding-top: 15px; padding-bottom: 15px;}
	.pd-t20{ padding-top: 10px;}
	.pd-tb20{ padding-top: 10px; padding-bottom: 10px;}
	.mg-t20{ margin-top: 10px;}
	.pd-t15{ padding-top: 5px;}
	.mg-t10{ margin-top: 5px;}
	
	h1, .h1, .ft36-26 {font-size: 1.875rem;}/*30px*/
	h2, .h2, .ft32-24 {font-size: 1.625rem;}/*26px*/
	h3, .h3, .ft28-22 {font-size: 1.5rem;}/*24px*/
	h4, .h4, .ft24-18 {font-size: 1.25rem;}/*20px*/
	h5, .h5, .ft20-16 {font-size: 1.125rem;}/*18px*/
	h6, .h6, .ft16-14 {font-size: 1rem;}/*16px*/
	.ft_52{ font-size:2.625rem;/*42px*/}
	.ft_48{ font-size: 1.875rem;/*30px*/}
	.ft_36{font-size:1.5625rem;/*25px*/}
	.ft_32{font-size:1.4375rem;/*23px*/}
	.ft_30{font-size:1.375rem;/*22pxpx*/}
	.ft_24{ font-size:1.25rem;/*20px*/}
	.ft_22{ font-size:1.125rem;/*18px*/}
	.ft_20{font-size:1rem;/*16px*/}
	.ft_16{ font-size: 0.875rem;/*14px*/}
}
@media (min-width: 992px) {
	.pd-t120{ padding-top: 80px;}
	.pd-t100{ padding-top: 80px;}
	.pd-b100{ padding-bottom: 80px;}
	.pd-tb100{padding-top: 80px; padding-bottom: 80px;}
	.mg-t100{ margin-top:80px;}
	.pd-t80{ padding-top: 60px;}
	.pd-b80{ padding-bottom: 60px;}
	.pd-tb80{padding-top: 60px; padding-bottom: 60px;}
	.mg-t80{ margin-top: 60px;}
	.pd-l60{ padding-left: 45px;}
	.mg-t60{ margin-top: 45px;}
	.pd-t60{ padding-top: 45px;}
	.pd-b60{ padding-bottom: 45px;}
	.pd-t40{ padding-top: 30px;}
	.pd-b40{ padding-bottom: 30px;}
	.pd-tb40{ padding-top: 30px; padding-bottom: 30px;}
	.mg-t40{ margin-top: 30px;}
	.mg-t30{ margin-top: 23px;}
	.mg-b30{ margin-bottom: 23px;}
	.pd-tb30{ padding-top: 23px; padding-bottom: 23px;}
	.pd-lr30{ padding-left: 23px; padding-right: 23px;}
	.pd-b30{ padding-bottom: 23px;}
	.pd-t25{ padding-top: 20px;}
	.pd-b25{ padding-bottom: 20px;}
	.pd-tb25{ padding-top: 20px; padding-bottom: 20px;}
	.pd-t20{ padding-top: 15px;}
	.pd-tb20{ padding-top: 15px; padding-bottom: 15px;}
	.mg-t20{ margin-top: 15px;}
	.pd-t15{ padding-top: 10px;}
	.mg-t10{ margin-top: 8px;}

	h1, .h1, .ft36-26{font-size: 2.25rem;}/*36px*/
	h2, .h2, .ft32-24{font-size: 2rem;}/*32px*/
	h3, .h3, .ft28-22{font-size: 1.75rem;}/*28px*/
	h4, .h4, .ft24-18{font-size: 1.5rem;}/*24px*/
	h5, .h5, .ft20-16{font-size: 1.25rem;}/*20px*/
	h6, .h6, .ft16-14 {font-size: 1rem;}/*16px*/
	.ft_52{ font-size: 2.875rem;/*46px*/}
	.ft_48{ font-size:2.375rem;/*38px*/}
	.ft_36{font-size:1.875rem;/*30px*/}
	.ft_32{font-size:1.6875rem;/*27px*/}
	.ft_30{font-size:1.875rem;/*26pxpx*/}
	.ft_24{ font-size:1.5rem;/*24px*/}
	.ft_22{ font-size:1.25rem;/*20px*/}
	.ft_20{font-size:1.125rem;/*18px*/}
}
@media (min-width: 1230px) {
	.pd-t120{ padding-top: 120px;}
	.pd-t100{ padding-top: 100px;}
	.pd-b100{ padding-bottom: 100px;}
	.pd-tb100{padding-top: 100px; padding-bottom: 100px;}
	.mg-t100{ margin-top: 100px;}
	.pd-t80{ padding-top: 80px;}
	.pd-b80{ padding-bottom: 80px;}
	.pd-tb80{padding-top: 80px; padding-bottom: 80px;}
	.mg-t80{ margin-top: 80px;}
	.pd-l60{ padding-left: 60px;}
	.mg-t60{ margin-top: 60px;}
	.pd-t60{ padding-top: 60px;}
	.pd-b60{ padding-bottom: 60px;}
	.pd-t40{ padding-top: 40px;}
	.pd-b40{ padding-bottom: 40px;}
	.pd-tb40{ padding-top: 40px; padding-bottom: 40px;}
	.mg-t40{ margin-top: 40px;}
	.mg-t30{ margin-top: 30px;}
	.mg-b30{ margin-bottom: 30px;}
	.pd-tb30{ padding-top: 30px; padding-bottom: 30px;}
	.pd-lr30{ padding-left: 30px; padding-right: 30px;}
	.pd-b30{ padding-bottom: 30px;}
	.pd-t25{ padding-top: 25px;}
	.pd-b25{ padding-bottom: 25px;}
	.pd-tb25{ padding-top: 25px; padding-bottom: 25px;}
	.pd-t20{ padding-top: 20px;}
	.pd-tb20{ padding-top: 20px; padding-bottom: 20px;}
	.mg-t20{ margin-top: 20px;}
	.pd-t15{ padding-top: 15px;}
	.mg-t10{ margin-top: 10px;}

	h5, .h5, .ft20-16{font-size: 1.375rem;}/*22px*/
	h6, .h6, .ft16-14 {font-size:1.125rem;}/*18px*/
	.ft_52{ font-size: 3.25rem;/*52px*/}
	.ft_48{ font-size: 3rem;/*48px*/}
	.ft_36{font-size:2.25rem;/*36px*/}
	.ft_32{font-size:2rem;/*32px*/}
	.ft_30{font-size:1.875rem;/*20px*/}
	.ft_22{ font-size: 1.375rem;/*22px*/}
	.ft_20{font-size:1.25rem;/*20px*/}
	.ft_16{ font-size: 1rem;/*16px*/}
}

.ft12{ font-size: 12px;}
.ft14{ font-size: 14px;}
.ft16{ font-size: 16px;}
.fts28{ font-size: 20px;}
.fts20{ font-size: 14px;}
.fts18{ font-size: 14px;}
.fts16{ font-size: 12px;}
.fts14{ font-size: 12px;}
@media (min-width: 576px) {
	.fts28{ font-size: 22px;}
	.fts16{ font-size: 14px;}
}
@media (min-width: 768px) {
	.fts28{ font-size: 24px;}
	.fts20{ font-size: 18px;}
	.fts18{ font-size: 16px;}
}
@media (min-width: 992px) {
	.fts28{ font-size: 28px;}
	.fts20{ font-size: 20px;}
	.fts18{ font-size: 18px;}
	.fts16{ font-size: 16px;}
	.fts14{ font-size: 14px;}
}



/*专题banner图*/
.banner{ clear:both; width:100%; height:210px; background:url(../img/banbg.jpg) no-repeat center;background-size:auto 100%; }
@media (min-width: 480px) {
.banner{  height:280px;}
}
@media (min-width: 576px) {
.banner{  height:350px;}
}
@media (min-width: 640px) {
	.banner{  height:400px;}
}
@media (min-width: 768px) {
	.banner{  height:480px;}
}
@media (min-width: 992px) {
	.banner{  height:620px;}
}
@media (min-width: 1230px) {
	.banner{  height:873px;}
}


/*专题板块标题*/
.tbar{ display: flex; flex-direction: row; justify-content: flex-start; align-items:center;  width: 100%; text-align: center;font-size:1.375rem; font-weight: bold; color: #851b06;}
@media (min-width: 768px) {
	.tbar{ font-size:1.625rem;}
}
@media (min-width: 1230px) {
	.tbar{ font-size: 2rem;}
}
.fbit{display: flex; flex-direction: row; justify-content:center; align-items:center;  width: 100%; text-align: center; color: #999999; font-size: 0.75rem; padding: 0px 15px; box-sizing: border-box;}
@media (min-width: 768px) {
	.fbit{ font-size:0.875rem;}
}


/*专题导航*/
.menu{text-align:center; background: #ffffff; }
.menu ul{ display: flex; flex-direction:row; justify-content: space-between; align-items:stretch;}
.menu li{ width:25%; background:url(../img/line.png) no-repeat right; background-size:2px auto; text-align: center; box-sizing: border-box; padding: 0px 10px;}
.menu li:last-child {  background: none; }

.menu li a{ display: flex; flex-direction: column; align-items: center; text-transform:Uppercase; color: #e50012;font-size: 0.625rem;}
.menu li a img{ width:40%; max-width: 100px; margin-bottom: 5px;}
.menu li a b{ font-size: 1.125rem;}
.menu li a p{ font-size: 0.625rem;}

@media (min-width: 576px) {
	.menu li a img{ width:30%;}
}
@media (min-width: 768px) {
	.menu ul{ justify-content: center;}
	.menu li{padding: 0px 10px;background-size:3px auto;width:auto;}
	.menu li a{ flex-direction: row;font-size: 0.75rem; text-align: left;}
	.menu li a img{ width:60px;margin-right: 5px;margin-bottom: 0px;}
	.menu li a b{ font-size: 1.25rem;}
	.menu li a p{ font-size: 0.875rem;}
}
@media (min-width: 992px) {
	.menu ul{ justify-content: center;}
	.menu li{padding: 0px 16px;}
	.menu li a img{ width:70px;margin-right: 10px;}
	.menu li a b{ font-size: 1.375rem;}
	.menu li a p{ font-size: 1.125rem;}
}
@media (min-width: 1230px) {
	.menu li{padding: 0px 30px;}
	.menu li a img{ width:110px; margin-right: 12px;}
}
.menu li a div{ display: flex; flex-direction: column;}



/*数字导航 -上下结构*/
.nav_sz{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.nav_sz a{ display:flex; flex-direction: column; align-items: center; justify-content: center; width: 33.333%; flex-grow: 1; box-sizing: border-box; border-left: 1px solid #bbbbbb;}
.nav_sz a div{ background-position: center; background-size: auto 32px; height:32px; background-repeat: no-repeat;background-image: url(../img/m2.png); width: 100%;}
.nav_sz a:first-child div{ background-image: url(../img/m1.png);}
.nav_sz a:nth-child(2) div{ background-image: url(../img/m1.png);}
.nav_sz a:last-child div{background-image: url(../img/m3.png);}
.nav_sz a:last-child{  border-right: 1px solid #bbbbbb;}

.nav_sz a:hover{ background-color: #e50012; color: #ffffff;border-left: 1px solid #e50012;}
.nav_sz a:last-child:hover{  border-right: 1px solid #bbbbbb;}
.nav_sz a:hover div{background-image: url(../img/m2h.png);}
.nav_sz a:first-child:hover div{ background-image: url(../img/m1h.png);}
.nav_sz a:nth-child(2):hover div{ background-image: url(../img/m1h.png);}
.nav_sz a:last-child:hover div{background-image: url(../img/m3h.png);}
@media (min-width: 576px) {
	.nav_sz a div{background-size: auto 42px; height:42px;}
}
@media (min-width: 768px) {
	.nav_sz a div{background-size: auto 50px; height:50px;}
}
@media (min-width: 992px) {
	.nav_sz a div{background-size: auto 55px; height:55px;}
}
@media (min-width: 1230px) {
	.nav_sz a div{background-size: auto 63px; height:63px;}
}

/*文字导航 -左右结构*/
.nav_hg{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: #ffffff; line-height: 1; border-top: 5px solid #009ea1; }
.nav_hg a{ display:flex; flex-direction: row; align-items: center; justify-content: center; width: 33.333%; flex-grow: 1; box-sizing: border-box; border-right: 1px solid #009ea1;}
.nav_hg a div{  }
.nav_hg h4{ line-height: 1; color: #009ea1; font-family:'宋体',sans-serif; font-weight: bolder;}
.nav_hg a:last-child{  border-right: 0px solid #bbbbbb;}

.nav_hg a:hover{ color: #000000; }
.nav_hg a:last-child:hover{ }

.nav_hg  span{color: #009ea1; font-size: 22px;}

@media (min-width: 576px) {

}
@media (min-width: 768px) {

}
@media (min-width: 992px) {

}
@media (min-width: 1230px) {
.nav_hg  span{ font-size: 30px;}
}



/*返回顶部*/
#gotop{ z-index:20; bottom:30px;_margin-bottom:30px;
  width:29px;height:29px;position:fixed;right:15px;cursor:pointer;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

.hide{ display:none;}
div.hide{ display: none;}
.anmt{ transition: all 200s ease;}


/*布局格式*******************************************************************************************************************************/
/*布局1列*/
.col1{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;}
.col1 li{ width: 100%;}

/*布局2列：电脑端横向，手机端纵向*/
.col2s{ display:  flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; width: 100%; }
.col2s li{ width: 100%;}
@media (min-width: 576px) {
	.col2s li{ width: 50%;}
}

/*布局3列：电脑端横向，手机端纵向*/
.col3s{ display:  flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; width: 100%; }
.col3s li{ width: 100%;}
@media (min-width: 768px) {
	.col3s li{ width: 32%;}
}

/*布局4列：电脑端横向，手机端纵向*/
.col4s{ display:  flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; width: 100%; }
.col4s li{ width: 48%;}
.col4s_1 li{ width: 100%;}
@media (min-width: 576px) {
	.col4s li{ width: 48%;}
	.col4s_1 li{ width:48%;}
}
@media (min-width: 768px) {
	
}
@media (min-width: 992px) {
	.col4s li{ width: 23.5%;}
	.col4s_1 li{ width:23.5%;}
}



/*按钮样式*******************************************************************************************************************************/
.bt_1{display: inline-block;  background:#3140fc; color: #ffffff; border-radius:18px; height: 30px; box-sizing: border-box; line-height: 30px; padding: 0px 20px; font-size: 12px;}

.bt_2{ display: inline-block; line-height: 1.5; box-sizing: border-box; border: 1px solid #ffffff; color: #ffffff; text-align: center; border-radius: 4px;transition: all linear 0.3s;padding: 3px 10px;}
.bt_2:hover{ background: #ffffff; color: #404040;}


/*图片*******************************************************************************************************************************/
.img{position: relative; width: 100%; box-sizing: border-box; flex-shrink: 0;}
.img img{ width: 100%; height: auto; object-fit: cover;margin: 0px auto;}

/*图片比例*/
.img_s{ width: 100%;  position: relative;padding-top: 100%; height: 100%;}
.sz1_1{padding-top: 100%;height: 0;}/*图片宽高1:1*/
.sz3_2{padding-top: 66.66666%;height: 0;}/*图片宽高3:2*/
.sz5_6{padding-top: 120%;height: 0;}/*图片宽高5:6*/
.sz5_7{padding-top: 140%;height: 0;}/*图片宽高5:7*/
.sz5_4{padding-top: 80%;height: 0;}/*图片宽高5:6*/
.sz4_3{padding-top: 75%;height: 0;}/*图片宽高4:3*/
.sz100_56{padding-top: 56%;height: 0;}/*图片宽高10:5.6*/
.img_s img{position: absolute;top: 0;left: 0;width: 100%;height: 100%; object-fit: cover;}

.sz10_7{padding-top: 70%;height: 0;}/*图片宽高10:7*/




/*层文本*******************************************************************************************************************************/
/*文本1  p字体大小14号*/
p{ width: 100%; box-sizing: border-box;}

.text{ width: 100%;}
.text h5{font-weight: bold;}
.text h6{ margin-top:4px; color: #666666;}
.text p{ margin-top:4px;color: #999999;}

/*文本2  p字体大小12-14号*/
.text2{ width: 100%;}
.text2 h5{ height: 1.5; overflow: hidden; line-height: 1.5;}
.text2 span{ color: #cccccc; font-size: 12px;display: block;margin-top: 2px; }
.text2 p{font-size: 12px; color: #999999;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin-top: 2px;}
@media (min-width: 768px) {
.text2 p{ font-size: 14px;}
}
@media (min-width:992px) {
	.text2 span{  margin-top: 5px;}
	.text2 p{  margin-top: 8px;}
}

/*文本3,p字体大小12px*/
.text3{ width: 100%; box-sizing: border-box;}
.text3 span{ color: #cccccc; font-size: 12px;display: block;margin-top: 2px;}
.text3 p{font-size: 12px; color: #999999;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin-top: 2px; }
@media (min-width:992px) {
	.text3 span{  margin-top: 5px;}
	.text3 p{  margin-top: 8px;}
}

/*文本4  p字体大小12-14-16号*/
.text4{ width: 100%;}
.text4 p{font-size: 12px;}
@media (min-width: 768px) {
.text4 p{ font-size: 14px;}
}
@media (min-width:992px) {
	.text4 p{  margin-top: 8px;font-size: 16px;}
}

/*文本5  p字体大小12-14-16-18-20号*/
.text5{ width: 100%;}
.text5 p{font-size: 12px;margin-top: 6px; background: url(../img/dot.png) no-repeat left top 7px; background-size: 4px 4px;padding-left: 10px;}
.text5 span{ font-size: 12px;}
.text5 h4{ font-weight: bold; margin-top: 8px;}
@media (min-width:576px) {
	.text5 p{  margin-top: 8px;font-size: 14px;background: url(../img/dot.png) no-repeat left top 8px;background-size: 4px 4px;}
}
@media (min-width: 768px) {
.text5 p{ font-size: 16px;margin-top: 8px;background: url(../img/dot.png) no-repeat left top 9px;background-size: 4px 4px;}
.text5 span{ font-size: 16px;} 
}
@media (min-width:992px) {
	.text5 p{  margin-top: 8px;font-size: 18px;background: url(../img/dot.png) no-repeat left top 10px;background-size: 5px 5px;padding-left: 12px;}
	.text5 span{ font-size: 18px;} 
}
@media (min-width:1230px) {
	.text5 p{  margin-top: 10px;font-size: 20px;background: url(../img/dot.png) no-repeat left top 11px;background-size: 6px 6px;padding-left: 14px;}
}


/*多图文样式******************************************************************************************************************************/
/*多图文形式一：电脑端上下布局，手机端左右*/
.imgtt{ display: flex; flex-direction: row; flex-wrap: wrap;  align-items: center; justify-content: space-between; width: 100%; position: relative;}
.imgtt .img{background: #f6f6f6; border-radius: 5px; padding: 4px; width: 35%; }
.imgtt .text{ width: 10px; flex-grow: 1; padding-left: 15px; }
@media (min-width: 768px) {
	.imgtt .img{ width: 100%; border-radius: 5px; padding: 8px;}
	.imgtt .text{ padding-left: 0px;text-align: center; padding-top: 10px;}
}

/*多图文形式二：图文左右布局*/
.imgtt2{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; position: relative;}
.imgtt2 .img{ border-radius: 5px; width: 35%;}
.imgtt2 .text2{ width:10%; flex-grow: 1; padding-left: 15px; box-sizing: border-box;}
@media (min-width: 768px) {
.imgtt2 .img{ width: 25%;}
.imgtt2 .text2{ padding-left: 25px;}
}
@media (min-width:1230px) {
	.imgtt2 .img img{ height: 160px; }
}

/*多图文形式三：图文上下布局*/
.imgtt3{ display: flex; flex-direction: row; flex-wrap: wrap;  align-items: center; justify-content: space-between; width: 100%; position: relative;}
.imgtt3 .text3{  padding-top: 10px; }
@media (min-width: 768px) {
}

/*多图文形式四：文本定位图片底部显示*/
.imgtt4{ display: flex; flex-direction: row;flex-wrap: wrap;  justify-content: space-between; align-items: center; width: 100%;position: relative;overflow: hidden;}
.imgtt4 img{ border-top-left-radius: 10px; border-top-right-radius: 10px;transition: 0.5s;}
.imgtt4 .text3{ width: 100%; box-sizing: border-box; padding: 8px 10px; background: rgba(9,19,148,0.7); color: #ffffff;position: absolute; bottom: 0px; height: auto; left: 0; }
.imgtt4 .text3 h6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
.imgtt4 .text3 p{  margin-top: 5px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.imgtt4:hover img{opacity: 1; transform: scale(1.2)}





/*多图文形式五：文本浮于图片显示，文本显示在下方*/
.imgtt5{ display: flex; flex-direction: row;flex-wrap: wrap;  justify-content: space-between; align-items: center; width: 100%;position: relative;}
.imgtt5 .img img{ height: 250px;}
.imgtt5 .text3{  height: 0px; overflow: hidden;font-size: 12px;position: absolute; top: 0px; left: 0px; width: 100%; display: flex; flex-direction:column; justify-content:center; align-items: center; transition: all ease 0.5s;}
.imgtt5:hover .text3{height: 100%;  padding: 8px 12px; box-sizing: border-box; background: #fff200;transform: scale(1);}
.imgtt5 .text{ padding-top: 10px; text-align: center;}


/*多图文形式六：图文上下布局，带底色*/
.imgtt6{ display: flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; width: 100%; position: relative;  background: #f7f7f7; height: 100%;-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;}
.imgtt6:hover{ background-color: #fbf2f2;-webkit-animation-name:bounceIn;animation-name:bounceIn;}

.imgtt6 .text3{  padding-top: 10px; padding-left: 8px ; padding-right: 8px; padding-bottom: 10px;}
@media (min-width: 768px) {
}


/*多图文形式七：文本浮于图片上方
.qcontainer{-webkit-perspective:400;-moz-perspective:400;-ms-perspective: 400;perspective: 400; }
.imgtt7{width:100%;height:300px;-webkit-transform-style:preserve-3d;-webkit-transition:1.5s;-moz-transform-style:preserve-3d;-moz-transition:1.5s;transition:1.5s;transform-style:preserve-3d; position: relative;-ms-transition:1.5s;-ms-transform-style:preserve-3d;}
.qcontainer:hover .imgtt7{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);transform:rotateY(180deg);}
.imgtt7 .img,.imgtt7 .text3{position:absolute;top: 0; left: 0; width: 100%; height: 100%;}
.imgtt7 img{ width: 100%; height:300px; object-fit:cover;}
.imgtt7 .text3{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box;  }
.imgtt7 .text3 p{ width: 100%; }
.back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);transform:rotateY(180deg);background:-webkit-gradient(linear,left top,left bottom,from(#fdbb5a),to(#db5726));background:-moz-linear-gradient(top,#fdbb5a,#db5726);width:100%;height:300px;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden; backface-visibility:hidden;background:-ms-linear-gradient(top,#fdbb5a,#db5726);}
.qcontainer:hover .back{ }*/

/*多图文形式七：文本浮于图片上方*/
.qcontainer{-webkit-perspective:400;-moz-perspective:400;-ms-perspective: 400;perspective: 400; }
.imgtt7{width:100%;height:300px;-webkit-transform-style:preserve-3d;-webkit-transition:1.5s;-moz-transform-style:preserve-3d;-moz-transition:1.5s;transition:1.5s;transform-style:preserve-3d; position: relative;-ms-transition:1.5s;-ms-transform-style:preserve-3d;}
.qcontainer:hover .imgtt7{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);transform:rotateY(180deg);}
.imgtt7 .img,.imgtt7 .text3{position:absolute;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden; top: 0; left: 0; width: 100%; height: 100%;}
.imgtt7 img{ width: 100%; height:300px; object-fit:cover;}
.imgtt7 .text3{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; }

.back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);transform:rotateY(180deg);background:-webkit-gradient(linear,left top,left bottom,from(#fdbb5a),to(#db5726));background:-moz-linear-gradient(top,#fdbb5a,#db5726);background:-ms-linear-gradient(top,#fdbb5a,#db5726);width:100%;height:300px;}


/*多图文形式八：文本在图片上方*/
.imgtt8{ display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap;width: 100%; position: relative; height: 100%;}
.imgtt8 .text{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to top, rgba(27,35, 155, 1) 0%,rgba(0, 0, 0, 0.2) 80%); display: flex; flex-direction: column; align-items:flex-start; justify-content:center; color: #ffffff; padding: 10px 10% 10px 5%; box-sizing: border-box; transition: all ease 0.5s; transform:rotateX(1deg)}
.imgtt8 .text:hover{background: linear-gradient(to top, rgba(155,129, 27, 1) 0%,rgba(0, 0, 0, 0.2) 80%); transform:rotateX(90deg)}
.imgtt8 .text h5{ font-weight: bold;}
.imgtt8 .text p{ margin-top: 10px; color: #f1f1f1;}
.imgtt8 .text a{ margin-top: 15px;}

@media (min-width:1230px) {
	.imgtt8 .text{padding: 10px 40% 10px 10%;}
}

/*多图文形式九：简单图文浮在图片底部*/
.imgtt9{ display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap;width: 100%; position: relative; height: 100%; border-radius: 10px;}
.imgtt9 .text{ position: absolute; bottom: 0px; left: 0px; width: 100%; height:100%; background: linear-gradient(to top, rgba(0,78, 161, 1) 0%,rgba(255, 255, 255, 0.1) 30%); display: flex; flex-direction: column; align-items:center; justify-content:flex-end; color: #ffffff; box-sizing: border-box; padding-bottom: 10px; border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
.imgtt9 .text h5{ font-weight: bold;}
.imgtt9 .text p{ margin-top: 10px; color: #f1f1f1; padding: 0px 10px;}
.imgtt9 .text a{ margin-top: 15px;}
.imgtt9 .img{ height: 320px; width: 100%;}
.imgtt9 .img img{ width: 100%; height: 100%; object-fit: cover;border-radius: 10px;}

@media (min-width:1230px) {

}

/*多图文形式十*/
.imgtt_1{width:100%; position: relative; border: 1px solid #000996; box-sizing: border-box; background: url(../img/rbg.jpg) no-repeat top center; background-size: 100% auto; height: auto; margin-top: 20px;  transition: all linear 0.3s;}
.imgtt_1 .img{ height: 100%;}
.imgtt_1 .img img{ height: 100%;}
.imgtt_1 .text{ position: absolute; bottom: 0; left: 0; width: 100%; height:auto; background: #edeef8; box-sizing: border-box; padding: 13px 10px;  color: #666666;line-height: 1.45;transition: all linear 0.2s;}
.imgtt_1 .text h6{ color: #000996; margin-bottom: 4px; line-height: 1.5; letter-spacing: 2px; font-weight: bold;}
.imgtt_1 .ftext{ position: absolute; top: 0;width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0, 0, 1) 0%,rgba(0, 0, 0, 0.7) 50%);opacity: 0;transition: all linear 0.2s; color: #ffffff; padding: 18px; box-sizing: border-box; line-height: 2; display: flex; flex-direction: column; align-items:flex-end; justify-content:space-between;}
.imgtt_1 .ftext h6{ font-style: italic; font-weight: normal; line-height: 2; margin-bottom: 5px; width: 100%;}
.imgtt_1 .ftext p{width: 100%;}

.imgtt_1:hover{height: auto; margin-top: 0; background: none; border: none;}

.imgtt_1:hover .text{ opacity: 0;}
.imgtt_1:hover .ftext{ opacity: 1;}

/*多图文形式11*/
.xmli{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.xmli li{ width: 14%; height: 340px;transition: all linear 0.3s; position: relative;}
.xmli li img{ height: 100%; object-fit: cover; width: 100%;}
.xmli li .xtit{ position: absolute;top: 0; left: 0; width: 100%; height: 100%; background: rgba(64,64,64,0.8); display: flex; flex-direction: row; justify-content: center; align-items: center; transition: all linear 0.3s; box-sizing: border-box; padding: 0px 5px; writing-mode: vertical-rl;}
.xmli li .xtit b{ color: #ffffff; font-weight: normal; }
.xmli li .text{ position: absolute; bottom: 0; left: 0; width: 100%; height: auto;background: linear-gradient(to top, rgba(0,158,161, 1) 10%,rgba(255, 255, 255, 0.01) 90%); padding:65px 15px 15px 15px; box-sizing: border-box; color: #ffffff; display: flex; flex-direction:column; justify-content: space-between; align-items: flex-end; opacity: 0;transition: all linear 0.3s;}

.xmli li .text .ctit{ width: 100%; margin-bottom: 5px; font-size: 12px; }
.xmli li .text .ctit h6{  font-weight: normal; margin-bottom: 8px; color: #ffffff; font-weight: bold;}
.xmli li .text .ctit span{ display:inline-block; padding-bottom: 3px; border-bottom: 1px solid #ffffff; margin-bottom: 8px;}
.xmli li .text a{ width: 80px; height: 26px; box-sizing: border-box; line-height: 24px; box-sizing: border-box; border: 1px solid #ffffff; color: #ffffff; text-align: center; border-radius: 4px;transition: all linear 0.3s; font-size: 12px;}
.xmli li .text a:hover{ background: #ffffff; color: #404040;}

.xmli li.cur{ width: 55%;}
.xmli li.cur .xtit{opacity: 0;}
.xmli li.cur .text{ opacity: 1;}

@media (min-width:768px) {
.xmli li{ width: 12.5%;}
.xmli li.cur{ width: 59.6%;}
.xmli li .text{flex-direction: row;  }
.xmli li .text .ctit{ width: 100px; flex-grow: 1; padding-right: 20px; margin-bottom: 0px;}
}
@media (min-width:992px) {
.xmli li{ width: 12.5%;height: 460px;}
.xmli li.cur{ width: 54.6%;}
.xmli li .text{ padding:65px 15px 30px 15px;}
}

/*多图文形式12*/
.yfimgt{ position: relative; width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;}
.yfimgt img{ position: absolute; bottom: 0px; left: 0px; width: 50%; height: auto;}
.yfimgt .text{ width: 55%; height:auto; background: url(../img/bk.png) no-repeat center bottom; background-size: 100% 100%; box-sizing: border-box; padding: 15px 15px 0px 15px; display: flex; flex-direction: column; align-items:flex-end; justify-content: flex-end;}
.yfimgt .text .tx{ width: 100%; color: #666666; background: url(../img/line1.png) no-repeat left center; box-sizing: border-box; padding-left: 17px; }
.yfimgt .text .tx b{ display: block; color: #000996; font-size: 18px; margin-bottom: 3px;}
.yfimgt .text h6{  color: #000996; width: 100%; font-style: italic; font-weight: normal; margin-bottom: 4px;}
.yfimgt .text p{ line-height: 2; text-indent: 2em; margin-bottom: 8px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;}

.yfimgt .text a{ width: 80px; height: 30px; box-sizing: border-box; line-height: 28px; box-sizing: border-box; border: 1px solid #b4b4b4; color: #b4b4b4; text-align: center; border-radius: 4px;transition: all linear 0.3s;}
.yfimgt .text a:hover{ background: #000996; color: #ffffff; border: 1px solid #000996;}
@media (min-width:992px) {
	.yfimgt .text{padding: 30px 30px 0px 30px;}
}

/*多图文形式13-全浮图层文本*/
/**/

.tx_fz{ perspective: 500px;}
.tx_fz:hover .text3{opacity: 0;}

.tx_sf{text-align: center; display: block;display: flex; align-items: center; justify-content: space-between; align-items: auto;flex-direction: row; flex-wrap: wrap;}


.fdtext{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;background: rgba(0,146,245,0.8); color: #ffffff; padding: 15px; display: flex; flex-direction:column; justify-content: center; align-items: center;  top: -100%; transition: 0.5s; transform: rotateX(80deg);transform-origin: center top 0;  opacity: 0;}
.fdtext.nullrw{ top: 0; opacity: 1;transform: rotateX(0deg);}
.imgtt4:hover .fdtext{top: 0;transform: none;opacity: 1;}
.fdtext a{ display: inline-block; background: #98deff; color: #005a85; font-size: 18px; padding: 2px 8px; border-radius: 5px; margin-top: 15px;}



/*文本样式******************************************************************************************************************************/
/*样式一*/
.tt1{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;color: #1a1e66;}
.tt1 h2{ width: 30%; font-weight: bold;}
.tt1 h2 span{ color: #3140fc;}
.tt1 p{  width: 60%;}

/*样式二*/
.tt2{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.tt2 li{ background-color: #091496; color: #ffffff; padding: 20px 20px 20px 80px; width: 100%; box-sizing: border-box; background-position: left 20px center; background-repeat: no-repeat; background-size: 45px auto;}
.tt2 li.ic1{ background-image: url(../img/ic_1.png);}
.tt2 li.ic2{ background-image: url(../img/ic_2.png);}
.tt2 li.ic3{ background-image: url(../img/ic_3.png);}
@media (min-width:768px) {
.tt2 li{ width: 32%; padding: 80px 20px 30px 20px;  background-position: top 20px center;background-size:  auto 45px; text-align: center;}
}
@media (min-width:1230px) {
.tt2 li{ width: 31%; padding: 30px 20px 30px 80px;  background-position: left 20px center;background-size: 45px auto; text-align:left; }
}

/*样式三*/
.tt3{  color: #1a1e66;}
.tt3 h2{ font-weight: bold;}
.tt3 h2 span{ color: #3140fc;}
.tt3 p{ margin-top:8px;}
@media (min-width:1230px) {
.tt3 p{ margin-top:24px;}
}
.tt3 i{ display: block; margin-top: 8px; padding-top:5px; border-top: 1px dashed #1a1e66; font-size: 16px; font-style: normal;}
.tt3 i span{ font-weight: bold; font-size: 24px;}

@media (min-width:768px) {
.tt3 i{  margin-top: 28px; padding-top: 20px;  }
}


/*样式四*/
.tt4{ display: flex; flex-direction:column; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.tt4 li{ background-color: #291674; color: #ffffff; padding: 20px; width: 100%; box-sizing: border-box; display: flex; flex-direction: row;justify-content: space-between; align-items: flex-start; }
.tt4 li span{ width: 40px; height: 40px; border-radius: 20px; background: #7d60f9; display:flex; flex-direction: row; justify-content: center;align-items: center; font-size:24px;}
.tt4 li div{ width: 500px; flex-grow: 1;-ms-flex-grow:1; margin-left: 18px; font-size: 0.75rem; color: #8781a0;}
.tt4 li div h6{ color: #ffffff; margin-bottom: 8px; font-weight: bold;}

/*样式5*/
.tt5{ width: 100%; height: 100%;margin-right: 50px; display: flex; flex-direction: column; align-items: center; justify-content:flex-start; background: url(../img/line2.png) no-repeat left bottom;}
.tt5 h5{font-style: italic; color: #000996;display: block; line-height: 1; width: 100%; text-align: left;}
.tt5 p{  line-height:1.7; width: 100%; text-align: left; text-indent: 2em;}
.tt5 a{ line-height: 1.6; text-align: right; display:inline-block; align-self: flex-end; }


/*单图文形式******************************************************************************************************************************/
/*图文形式一*/
.ttimg{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap;color: #1a1e66;}
.ttimg .tt3{ width: 100%;}

.ttimg .img{ width: 100%;}
.ttimg .img img{ width: 100%; height: 400px; object-fit: cover; border-radius: 20px; box-shadow: 0px 0px 35px rgba(0,0,0,0.4);}

@media (min-width:768px) {
.ttimg .tt3{ width: 50%;}
.ttimg .img{ width: 42%;}
}


/*折叠图文**********************************************************************************************************************************************/
.zdtw{  column-count:3;  column-gap: 8px;}
.zdtw li{ width: 100%; background-color: #2c2c2c; color: #ffffff; break-inside: avoid;  box-sizing: border-box;margin-bottom: 8px; padding: 10px;}
.zdtw li:hover{ cursor: pointer;}
.zdtit{ padding: 0px 0px; font-size:0.875rem; background: url(../img/ic_rjt.png) no-repeat right 0px center; padding-right: 15px;}
.zdmore{  padding-top: 10px; display: none; font-size: 0.75rem;}
.zdtw li.changebg{background-color:#f26c4f;}
.zdtw li.changebg .zdtit{ font-weight: bold; background: url(../img/ic_xjt.png) no-repeat right center;}
@media (min-width:576px) {
	.zdtw{column-gap: 10px;}
	.zdtw li{margin-bottom: 10px; padding: 15px;}
	.zdtit{ padding: 5px 0px; padding-right: 15px;}
	.zdmore{  padding-top: 10px;}
	
}
@media (min-width:768px) {
	.zdtw{column-gap: 15px;}
	.zdtw li{margin-bottom: 15px; padding: 15px;}
	.zdtit{ padding: 5px 0px;}
	.zdmore{  padding-top: 10px;}
	
}
@media (min-width:992px) {
	.zdtw li{margin-bottom: 20px; padding: 30px;}
	.zdtit{ font-size: 1rem; padding: 5px 0px; padding-right: 15px;}
	.zdmore{  font-size: 0.875rem;padding-top: 20px;}
}
@media (min-width:1230px) {
	.zdtw li{margin-bottom: 20px; padding: 30px;}
}

/*背景颜色**********************************************************************************************************************************************/
.bgf7{ background: #f7f7f7;}
.bgde{ background-color: #e6e6e6;}
.bgfz{ background-color: #0f0240;}
.bgfz .tbar{ color: #ffffff;}
.bgpic{background-color: #3e88f1;background-image: url(../img/bgpic.png);background-repeat: no-repeat;background-position: center;background-size: 100%;}
.f-w{color: #ffffff;}

/*幻灯片样式**********************************************************************************************************************************************/
.hdp1 .swiper-container {width: 100%;height: 100%; }
.hdp1 .swiper-slide { background: #fff; }
.imgt2{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 15px; position:relative}
.imgt2 img{ width: 100%; height: auto;flex-shrink:0;}
.imgt2 h6{ padding: 0px 15px; margin-top:10px;}
.imgt2 span{ color: #cccccc; font-size: 12px;padding: 0px 15px; margin-top: 5px;}
.imgt2 p{ color: #999999;padding: 0px 15px; margin-top: 10px;font-size: 12px;}

.hdp2 .swiper-container {width: 100%;height: 100%; }
.hdp2 .swiper-slide { background: #fff; }
.hdp2 .imgt2{ padding-bottom: 0px;}
.hdp2 .imgt2 img{ height: 350px; object-fit: cover;}
.imgt2 div{ position: absolute; display: none; width: 100%; height: 100%; top: 0px; left: 0px;transition: all 1s;}
.imgt2:hover div{ display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(8,104,21,0.8); color: #ffffff; }
.hdp2 .imgt2 p{ color: #eaecea;}


.hdp3{ width: 100%; position: relative; padding-left: 50px; padding-right: 50px;}
.hdp3 .swiper-container {width: 100%;height:auto; }
.hdp3 .swiper-slide { text-align: center;}

.hdp3 .swiper-slide img{ width:100%; height:370px; object-fit: cover;}
.hdp3 .swiper-slide h5{color:  #1a1e66; font-weight: bold; font-size: 1.125rem; margin-top: 15px;}
.hdp3 .swiper-slide span{ color: #666666;}


.hdp4 .swiper-container { width: 100%;height: 100%; }
.hdp4 .swiper-wrapper{/* 通过改变animation-timing-function 制作弹性切换效果 */transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;}
.hdp4 .swiper-slide {background: url(../img/s_imgs.png) no-repeat bottom center; background-size:100% 45px ; padding-bottom: 45px;border-radius: 5px; }
.hdp4 .swiper-slide img{ width: 100%; height: auto; border-radius: 5px;}

.hdp4 .swiper-button-prev:after,.hdp4 .swiper-container-rtl .swiper-button-next:after{content:''}/*prev*/
.hdp4 .swiper-button-next:after,.hdp4 .swiper-container-rtl .swiper-button-prev:after{content:''}/*next*/

.hdp4 .swiper-button-next,.hdp4 .swiper-button-prev{top:auto;bottom: 0px;width:13px;height:23px;margin-top:0px;z-index:10;cursor:pointer;background-size:13px 23px ; background-repeat: no-repeat;}
.hdp4 .swiper-button-next{background-image:  url(../img/ic_next4.png); right:auto;right:50%; margin-right: -50px; }
.hdp4 .swiper-button-prev{background-image: url(../img/ic_prve4.png);left:50%;right:auto; margin-left: -50px;}

@media (min-width: 576px) {
	.hdp4 .swiper-slide { background-size:100% 65px ; padding-bottom: 65px; }
}



.hdp5 .swiper-container {width: 100%;height: auto;margin-left: auto;margin-right: auto; padding-bottom: 40px;}
.hdp5 .swiper-slide { height: auto;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: flex-start;align-items: flex-start;}

.hdp5 .swiper-button-next{background-image: url(../img/btnanext.jpg);right:50%;left:auto; margin-right: -60px;}
.hdp5 .swiper-button-prev{background-image: url(../img/btnaprev.jpg);left:50%;right:auto; margin-left: -60px;}
.hdp5 .swiper-button-next,.hdp5 .swiper-button-prev{top:auto; bottom: 0px;width:20px;height:20px;margin-top:0px;z-index:10;cursor:pointer;background-size:20px 20px;background-position:center;background-repeat:no-repeat; color:#000000 }
.hdp5 .swiper-button-next:after,.hdp5 .swiper-button-prev:after{ font-size: 20px;  font-weight: bold;}
.hdp5 .swiper-pagination-fraction{ bottom:0px;left:0;width:100%; font-size: 16px; color: #000000; font-weight: bold;line-height: 24px;}

.hdp5 .swiper-pagination-bullet{width:8px;height:8px;display:inline-block; background:#999999;opacity:1}
.hdp5 .swiper-pagination-bullet-active{opacity:1;background:#19419b; }
.hdp5 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}
@media (min-width:1230px) {
	.hdp5 .swiper-pagination-fraction{ font-size: 20px; }
	
	.hdp5 .swiper-pagination-bullet{width:40px;height:2px;  border-radius: 0; }
	.hdp5 .swiper-pagination-bullet-active{opacity:1; height: 4px;}
}





.hdp6 .swiper-container { width: 100%;}
.hdp6 .swiper-slide {background-position: center;background-size: cover;width:636px;height:auto;  border-radius: 0px;  background: #ffffff; overflow: hidden; position: relative;}
.hdp6 .swiper-slide img{ width: 100%; height: auto;   }

.hdp6 .zztext{ position: absolute;bottom: 0; left: 0; width: 100%; height: 100%; /*background: rgba(0,158,161,0.5);*/ color: #f2f2f2; text-align: center;display:flex; flex-direction:column; justify-content:flex-end; align-items: auto;background:linear-gradient(to top, rgba(0,158,161, 1) 10%,rgba(255, 255, 255, 0.01) 90%); -webkit-transition: all .3s linear;-moz-transition: all .3s linear;transition: all .3s linear; opacity: 0; }
.hdp6 .swiper-slide-active:hover .zztext{  opacity: 1;height: 100%;bottom: 0; left: 0; }
.hdp6 .zztext p{ text-align: left; box-sizing: border-box;  }

.hdp6 .swiper-button-next{background-image: url(../img/ic_next6.png); }
.hdp6 .swiper-button-prev{background-image: url(../img/ic_prve6.png); }
.hdp6 .swiper-button-next,.hdp6 .swiper-button-prev{width:46px;height:46px; background-size:46px 46px;background-position:center;background-repeat:no-repeat; color:#000000 }
.hdp6 .swiper-button-prev:after,.hdp6 .swiper-container-rtl .swiper-button-next:after{content:''}
.hdp6 .swiper-button-next:after,.hdp6 .swiper-container-rtl .swiper-button-prev:after{content:''}
.hdp6 .imgtt4 .img{ width: 100%; overflow: hidden; }


.hdp6 .imgtt4{ border-radius: 0px;}

.hdp6 .imgtt4 img{ border-radius: 0px;}
.hdp6 .imgtt4 .text2{ padding: 8px 15px; background:#00cfd7; color: #ffffff;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;text-align: center; width: 100%; box-sizing: border-box;  height: auto;}
.hdp6 .imgtt4 .text2 h5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
.hdp6 .imgtt4 .text2 p{margin-top: 5px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;color: #ffffff; text-align: left;}
@media (max-width:767.98px) {
	.hdp6 .swiper-slide{width: 80%;}
	.hdp6 .imgtt4 .text2{  position: relative; bottom: 0px; height: auto; left: 0; }
	.hdp6 .swiper-button-next,.hdp6 .swiper-button-prev{width:30px;height:30px; background-size:30px 30px; }
	.hdp6 .imgtt4 img{border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}
}


.hdp7 .swiper-container { width: 100%;height:auto; }
.hdp7 .swiper-wrapper{ }
.hdp7 .swiper-slide { width: 100%;height:auto; align-items: center; }
.hdp7 .swiper-slide img{ width: 100%; height: 280px; border-radius: 5px;object-fit: cover;}

@media (min-width:576px) {
	.hdp7 .swiper-slide img{ height: 240px; }}
@media (min-width:1230px) {
	.hdp7 .swiper-slide img{ height: 300px; }}


.hdp7 .swiper-button-prev:after,.hdp7 .swiper-container-rtl .swiper-button-next:after{content:''}/*prev*/
.hdp7 .swiper-button-next:after,.hdp7 .swiper-container-rtl .swiper-button-prev:after{content:''}/*next*/

.hdp7 .swiper-button-next,.hdp7 .swiper-button-prev{width:50px;height:50px;background-size:50px 50px ; margin-top: -25px;}
.hdp7 .swiper-button-next{background-image:  url(../img/ic_next7.png); right: 0px;}
.hdp7 .swiper-button-prev{background-image: url(../img/ic_prve7.png); left: 0px; }



  .hdp8 .swiper-container {    width: 100%;    height: 100%;  }
 .hdp8 .swiper-slide {    text-align: center;    font-size: 18px;    background:none; height: auto;
    /* Center slide text vertically */    display: -webkit-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -webkit-box-pack: center;    -ms-flex-pack: center;    -webkit-justify-content: center;    justify-content: center;    -webkit-box-align: center;    -ms-flex-align: center;    -webkit-align-items: center;    align-items: center; padding: 15px; padding-bottom: 40px; width: 20%;  }
	
	.hdp8 .swiper-slide .wpbox{   height: 100%; background: #ffffff; box-shadow: 5px 0px 10px rgba(17,17,17,0.3);   width: 100%; box-sizing: border-box; padding-bottom: 30px; border-bottom: 2px solid #e6bc8b;}
	.hdp8 .swiper-slide .wpbox img{ width: 100%; height: auto;}
	.hdp8 .swiper-slide .wpbox h5{ display: block; font-weight: bold; margin-top: 15px; color: #b18d5a; padding:0px 5px}
	.hdp8 .swiper-slide .wpbox h6{ display: block; margin-top: 20px; padding:0px 5px}
	

	
	.hdp9 .swiper-container { width: 100%;height:auto; padding: 14px 0px;  }
	.hdp9 .swiper-wrapper{ }
	.hdp9 .swiper-slide { width: 100%;height:auto;border: 1px solid #dddddd; border-radius: 10px; padding-bottom: 14px;}
	.hdp9 .swiper-slide img{ width: 100%; height: auto; border-radius: 10px;}

	.hdp9 .swiper-button-prev:after,.hdp9 .swiper-container-rtl .swiper-button-next:after{content:''}/*prev*/
	.hdp9 .swiper-button-next:after,.hdp9 .swiper-container-rtl .swiper-button-prev:after{content:''}/*next*/
	
	.hdp9 .swiper-button-next,.hdp9 .swiper-button-prev{width:125px;height:28px;background-size:125px 28px ; margin-top: auto;   }
	.hdp9 .swiper-button-next{background-image:  url(../img/ic_next.jpg); right:50%; left: auto; margin-right: -65px; bottom: 0px;}
	.hdp9 .swiper-button-prev{background-image: url(../img/ic_prve.jpg); left: 50%; top: 0px; margin-left: -65px; }
	
	.hdp9  .swiper-button-next.swiper-button-disabled{opacity:1;background-image:  url(../img/ic_next1.jpg);}
	.hdp9  .swiper-button-prev.swiper-button-disabled{opacity:1;background-image: url(../img/ic_prve1.jpg);}



.hdp10 .swiper-container { width: 100%;height:auto; }
.hdp10 .swiper-wrapper{ }
.hdp10 .swiper-slide { width: 100%;height:auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex;display: flex;-webkit-box-pack: center; -ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center; box-sizing: border-box;  }
.hdp10 .swiper-slide img{  }
@media (min-width:768px) {
.hdp10 .swiper-slide {  padding: 0px 5%;}
}
.hdp10 .swiper-button-prev:after,.hdp10 .swiper-container-rtl .swiper-button-next:after{content:''}/*prev*/
.hdp10 .swiper-button-next:after,.hdp10 .swiper-container-rtl .swiper-button-prev:after{content:''}/*next*/
.hdp10 .swiper-button-next,.hdp10 .swiper-button-prev{width:34px;height:34px;background-size:34px 34px ; margin-top: -17px;   }
.hdp10 .swiper-button-next{background-image:  url(../img/ic_next3.png);  }
.hdp10 .swiper-button-prev{background-image: url(../img/ic_prve3.png);  }


.hdp11{}

.hdp11{ height: auto;}
.hdp11 .swiper-container {width: 100%;height:100%;}
.hdp11 .swiper-slide {width:95%;background-position: center;background-size: cover; position: relative; opacity: 0.4;}
.hdp11 .swiper-slide  img{width: 100%;object-fit: cover;}
.hdp11 .swiper-button-prev:after,.hdp11 .swiper-container-rtl .swiper-button-next:after{content:''} 
.hdp11 .swiper-button-next:after,.hdp11 .swiper-container-rtl .swiper-button-prev:after{content:''}

.hdp11 .swiper-button-next, .hdp11 .swiper-button-prev{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; }
.hdp11 .swiper-button-prev, .hdp11 .swiper-container-rtl .swiper-button-next{left: 50%; right:auto; background-image: url(../img/jt_l.png); margin-left: -46%;}
.hdp11 .swiper-button-next, .hdp11 .swiper-container-rtl .swiper-button-prev{right:50%;left:auto;background-image: url(../img/jt_r.png); margin-right: -46%;}

.hdp11 .swiper-slide-active{opacity: 1;}
.hdp11 .swiper-slide-active  li .text{  opacity: 0;}
.hdp11 .swiper-slide-active  li .text{ opacity: 1;}
@media (min-width:576px) {
.hdp11 .swiper-slide {width:65%;}
.hdp11 .swiper-button-prev, .hdp11 .swiper-container-rtl .swiper-button-next{  margin-left: -31.5%;}
.hdp11 .swiper-button-next, .hdp11 .swiper-container-rtl .swiper-button-prev{ margin-right: -31.5%;}
}

.hdp11 .swiper-slide .col2s li{ width: 40%; flex-grow: 1; margin-right: 20px;}
.hdp11 .swiper-slide .col2s li:last-child{ margin-right: 0px;}
.hdp11 .imgtt9 .text{opacity: 0;}
.hdp11 .swiper-slide-active .imgtt9 .text{ opacity: 1;}


.imgt3{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%;}
.imgt3 li{ width: 32.8%; position: relative;}
.imgt3 li img{ width: 100%; height: auto; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.imgt3 li .text{ width: 100%; box-sizing: border-box; padding: 8px 10px; background: rgba(9,19,148,0.7); color: #ffffff;}
.imgt3 li .text h6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
.imgt3 li .text p{ font-size: 12px; margin-top: 5px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}

@media (min-width:992px) {
.imgt3 li .text{ position: absolute; bottom: 0px; height: auto; left: 0;  }
}





.btn1{ padding: 5px 20px; color:#ffffff; background: #ff5c23; display: inline-block;}

.rimgt{ position: relative; width: 100%; height: auto;}
.rimgt img{ width:475px; max-width: 100%; height: auto;}
.rimgt div{ position: absolute; right: 0px; bottom:20px; width: 80%; max-width: 380px; box-sizing: border-box;background: #ff5c23; color: #ffffff; padding: 10px;}
.rimgt div h3{ margin-bottom: 10px;}

@media (min-width:768px) {
.rimgt div{  padding: 20px;}
}
@media (min-width:1230px) {
.rimgt{padding-left: 20px;}
.rimgt div{  padding: 40px;}
}

.bgfz .col-md-6{}




/********************************************************** 数字必要布局样式css ********************************************************************************/
.num-box{width: 100%;margin: 0 auto;text-align: center; }
.num-title{padding-top: 110px;margin-bottom: 30px;font-size: 42px;color: #fff;line-height: 45px;}
.num-text{font-size: 16px;color: #fff;line-height: 28px;}
.num-head{display: flex; flex-direction:row; justify-content: space-between; align-items: center;flex-wrap: wrap;}

.num-item{text-align: center; width: 50%;color: #fff;display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (min-width:768px) {
	.num-item{width: 25%;}
}
.num-nub{display: inline-block;font-size: 58px;color: #fff;}
.num-add{font-size: 18px;color: #fff;}
.num-inf{font-size: 18px;color: #fff;}

.num-jus{display: inline-block;margin: 80px 0;width: 162px;height: 56px;font-size: 22px;color: #fff;line-height: 48px;letter-spacing: 2px;border: 4px solid #fff;cursor: pointer;font-weight: 500;-webkit-transition: all .3s linear;-moz-transition: all .3s linear;transition: all .3s linear;text-decoration: none;}
.num-jus:hover{background-color: #fff;color: #3e88f1;}
.num-wan{}


/********************************************************** 图文动画效果样式css ********************************************************************************/
.text-desc .btn{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #4d92d9; background-color: #4d92d9; text-decoration: none; transition: 0.4s;}
.text-desc .btn:hover{background-color: transparent; color: #4d92d9; transition: 0.4s;}
.text-desc{position: absolute; left: 0; top: 0; background-color: #f1f1f1; height: 100%; opacity: 0; width: 100%; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.text-desc h3{font-size: 20px; margin: 5px 0 10px;}
.text-desc p{font-weight: 300; line-height: 20px; font-size: 14px; margin-bottom: 15px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.image-box img{width: 100%; vertical-align: middle;}

/* effect-1 css */
.port-1{ width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);box-shadow: 1px 1px 3px rgb(0 0 0 / 30%);}
.port-1 .text-desc{opacity: 0.9; top: -100%; transition: 0.5s; color: #000;padding: 10px; }
.port-1 img{transition: 0.5s;}
.port-1:hover img{transform: scale(1.2);}

.port-1.effect-1:hover .text-desc{top: 0;}

.port-1.effect-2 .text-desc{top: auto; bottom: -100%;}
.port-1.effect-2:hover .text-desc{bottom: 0;}

.port-1.effect-3 .text-desc{top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;}
.port-1.effect-3:hover .text-desc{width: 100%; top: 0; left: 0; height: 100%; padding: 10px;  }
/* effect-1 css end */

/* effect-2 css */
.port-2{width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 800px;box-shadow: 1px 1px 3px rgb(0 0 0 / 30%); }
.port-2 .text-desc{z-index: -1; transition: 0.6s; padding-bottom: 20%; box-sizing: border-box;}
.port-2 .image-box{transition: 0.4s;}
.port-2:hover .image-box{transform: rotateX(80deg); transform-origin: center bottom 0; transition: 0.4s;}

.port-2.effect-1:hover .text-desc{opacity: 1;}

.port-2.effect-2 .text-desc{opacity: 1; top: -100%;}
.port-2.effect-2:hover .text-desc{top: 0;}

.port-2.effect-3 .text-desc{opacity: 1; top: auto; bottom: -100%;}
.port-2.effect-3:hover .text-desc{bottom: 0;}
/* effect-2 css end */

/* effect-3 css */
.port-3{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 500px;box-shadow: 1px 1px 3px rgb(0 0 0 / 30%);}
.port-3 img{transition: 0.5s;}

.port-3.effect-1 .text-desc{z-index: 1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0;  opacity: 0;}
.port-3.effect-1:hover .text-desc{transform: none;opacity: 1;}
.port-3.effect-1:hover img{opacity: 0; transform: scale(1.2)}

.port-3.effect-2 .text-desc{z-index: 1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center bottom 0; top: auto; bottom: 0; }
.port-3.effect-2:hover .text-desc{transform: none; opacity: 1;}
.port-3.effect-2:hover img{transform: translateY(-100%)}

.port-3.effect-3 .text-desc{z-index: 1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0; }
.port-3.effect-3:hover .text-desc{transform: none; opacity: 1;}
.port-3.effect-3:hover img{transform: translateY(100%)}
/* effect-3 css end */

/* effect-4 css */
.port-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); z-index: 10;box-shadow: 1px 1px 3px rgb(0 0 0 / 30%);}

.port-4.effect-1 img{transition: 0.5s; transform: rotateY(360deg) scale(1, 1);}
.port-4.effect-1 .text-desc{transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0;  }
.port-4.effect-1:hover .text-desc{transform: rotateY(360deg) scale(1, 1);  opacity: 1;}
.port-4.effect-1:hover img{transform: rotateY(0deg) scale(0, 0);}

.port-4.effect-2{z-index: 12;}
.port-4.effect-2 img{transition: 0.5s; transform: rotateX(360deg) scale(1, 1);}
.port-4.effect-2 .text-desc{transform: rotateX(0deg) scale(0, 0); transition: 0.5s; opacity: 0;  }
.port-4.effect-2:hover .text-desc{transform: rotateX(360deg) scale(1, 1);  opacity: 1;}
.port-4.effect-2:hover img{transform: rotateX(0deg) scale(0, 0);}

.port-4.effect-3 img{transition: 0.5s; transform: rotate(360deg) scale(1, 1);}
.port-4.effect-3 .text-desc{transform: rotate(0deg) scale(0, 0); transition: 0.5s; opacity: 0;  }
.port-4.effect-3:hover .text-desc{transform: rotate(360deg) scale(1, 1);  opacity: 1;}
.port-4.effect-3:hover img{transform: rotate(0deg) scale(0, 0);}
/* effect-4 css end */

/* effect-5 css */
.port-5{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: visible;box-shadow: 1px 1px 3px rgb(0 0 0 / 30%);}

.port-5.effect-1{z-index: 9;}
.port-5.effect-1 img{transition: 0.5s;}
.port-5.effect-1:hover img{transform: scale(0.5) translateX(-100%); position: relative; z-index: 9; border: 6px solid rgba(255, 255, 255, 0.9);}
.port-5.effect-1 .text-desc{transform: translateX(100%); opacity: 0; padding-left:27%; transition: 0.5s;}
.port-5.effect-1:hover .text-desc{transform: translateX(0px); opacity: 1;}

.port-5.effect-2{z-index: 10;}
.port-5.effect-2 img{transition: 0.5s; transform: none;}
.port-5.effect-2:hover img{transform: scale(0.5) translateY(100%); position: relative; z-index: 9; border: 6px solid rgba(255, 255, 255, 0.9);}
.port-5.effect-2 .text-desc{transform: translateY(-100%); opacity: 0; padding-bottom:25%; transition: 0.5s;}
.port-5.effect-2:hover .text-desc{transform: translateY(0px); opacity: 1;}

.port-5.effect-3 img{transition: 0.5s;}
.port-5.effect-3:hover img{transform: scale(0.5) translateX(100%); position: relative; z-index: 9; border: 6px solid rgba(255, 255, 255, 0.9);}
.port-5.effect-3 .text-desc{transform: translateX(-100%); opacity: 0; padding-right: 27%; transition: 0.5s;}
.port-5.effect-3:hover .text-desc{transform: translateX(0px); opacity: 1;}
/* effect-5 css end */

/* effect-6 css */
.port-6{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: visible;box-shadow: 1px 1px 3px rgb(0 0 0 / 30%);}

.port-6.effect-1{z-index: 8;}
.port-6.effect-1 img{transition: 0.5s;}
.port-6.effect-1:hover img{transform: scale(0.3) translateY(110%); position: relative; z-index: 9;}
.port-6.effect-1 .text-desc{transform: translateY(-100%); opacity: 0; padding-bottom: 30%; transition: 0.5s;}
.port-6.effect-1:hover .text-desc{transform: translateY(0px); opacity: 1;}

.port-6.effect-2{z-index: 7;}
.port-6.effect-2 img{transition: 0.6s; z-index: 1;}
.port-6.effect-2:hover img{transform: scale(0.3) translateX(110%); position: relative; z-index: 9;}
.port-6.effect-2 .text-desc{transform: translateX(-100%); opacity: 0; padding-right:33.5%; transition: 0.6s;}
.port-6.effect-2:hover .text-desc{transform: translateX(0px); opacity: 1;}

.port-6.effect-3 img{transition: 0.5s;}
.port-6.effect-3:hover img{transform: scale(0.3) translateY(-110%); position: relative; z-index: 9;}
.port-6.effect-3 .text-desc{transform: translateY(100%); opacity: 0; padding-top: 33%; transition: 0.5s;}
.port-6.effect-3:hover .text-desc{transform: translateY(0px); opacity: 1;}
/* effect-6 css end */

/* effect-7 css */
.port-7{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: hidden;box-shadow: 1px 1px 3px rgb(0 0 0 / 30%);}
.port-7 .text-desc{opacity: 0; transition: 0.5s; color: #000;}

.port-7.effect-1 img{transition: 0.5s; position: relative; width: 100%; left: 0;}
.port-7.effect-1:hover img{left: 50%;}
.port-7.effect-1 .text-desc{transform: perspective(600px) rotateY(90deg); transform-origin: left center 0; width: 50%; position: absolute; left: 0; top: 0;  padding: 18px 10px;}
.port-7.effect-1:hover .text-desc{opacity: 1; transform: perspective(600px) rotateY(0deg); z-index: 99;}

.port-7.effect-2 img{transition: 0.5s; position: relative; width: 100%; top: 0;}
.port-7.effect-2:hover img{top: 50%;}
.port-7.effect-2 .text-desc{transform: perspective(600px) rotateX(90deg); transform-origin: top center 0; width: 100%; position: absolute; left: 0; top: 0; height: 50%; padding: 5px 10px;}
.port-7.effect-2:hover .text-desc{opacity: 1; transform: perspective(600px) rotateX(0deg); z-index: 99;}

.port-7.effect-3 img{transition: 0.5s; position: relative; width: 100%; right: 0;}
.port-7.effect-3:hover img{right: 50%;}
.port-7.effect-3 .text-desc{transform: perspective(600px) rotateY(-90deg); transform-origin: right center 0; width: 50%; position: absolute; left: auto; right: 0; top: 0;  padding: 18px 10px;}
.port-7.effect-3:hover .text-desc{opacity: 1; transform: perspective(600px) rotateY(0deg); z-index: 99;}
/* effect-7 css end */

/* effect-8 css */
.port-8{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: hidden;box-shadow: 1px 1px 3px rgb(0 0 0 / 30%);}
.port-8 .text-desc{opacity: 0; transition: 0.5s; color: #000; padding: 45px 20px 20px;}

.port-8.effect-1 img{transition: 0.5s;}
.port-8.effect-1:hover img{transform: scale(1.1);}
.port-8.effect-1 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0);  backface-visibility: hidden;}
.port-8.effect-1:hover .text-desc{opacity: 1; transform: scale(1); border-radius: 20%;}

.port-8.effect-2 img{transition: 0.5s;}
.port-8.effect-2:hover img{transform: scale(1.1);}
.port-8.effect-2 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0);  backface-visibility: hidden;}
.port-8.effect-2:hover .text-desc{opacity: 1; transform: scale(1); border-radius: 50% 0 50% 0;}

.port-8.effect-2 img{transition: 0.5s;}
.port-8.effect-2:hover img{transform: scale(1.1);}
.port-8.effect-2 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0);  backface-visibility: hidden;}
.port-8.effect-2:hover .text-desc{opacity: 1; transform: scale(1); border-radius: 50% 0 50% 0;}

.port-8.effect-3 img{transition: 0.5s;}
.port-8.effect-3:hover img{transform: scale(1.1);}
.port-8.effect-3 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0);  backface-visibility: hidden; background: none; padding: 40px 70px 20px;}
.port-8.effect-3 .text-desc:before, .port-8.effect-3 .text-desc:after{background-color: #fff; border-radius: 50% 50% 0 0; content: ""; height: 100%; left: 50%; position: absolute; top: 0; transform: rotate(-50deg); transform-origin: 0 100% 0; width: 50%; z-index: -1;}
.port-8.effect-3 .text-desc:after {left: 0; transform: rotate(50deg); transform-origin: 100% 100% 0;}
.port-8.effect-3:hover .text-desc{opacity: 1; transform: scale(1);}
/* effect-8 css end */


/**************************************************************************************************/
.main-group{position: relative; align-items: center;display: flex;justify-content: space-between;flex-wrap: wrap;margin: 0 auto;text-align: center;}

.main-group .item-group{position: relative;overflow: hidden; width: 33.33%;text-align: center;color: #fff;font-size: 16px;background: #fff; padding:0 10px;box-sizing: border-box;}
.main-group .item-group *::before,
.main-group .item-group *::after
{-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.50s ease;transition: all 0.50s ease;}

.main-group .item-group img{width: 100%;backface-visibility: hidden;vertical-align: top; height: 100%; object-fit: cover;}

.main-group .item-group figcaption{position:absolute;bottom:25px;right: 25px;padding:5px 10px 10px;}

.main-group .item-group figcaption::before,
.main-group .item-group figcaption::after{content: '';height: 2px;width: 600px;position: absolute;background: #fff;}

.main-group .item-group figcaption::before{top:0;left:0;-webkit-transform: translateX(100%);transform: translateX(100%);}
.main-group .item-group figcaption::after{bottom:0;right:0;-webkit-transform: translateX(-100%);transform: translateX(-100%);}

.main-group .item-group figcaption div::before,
.main-group .item-group figcaption div::after{content: '';height: 300px;width: 2px;position: absolute;background: #fff;}
.main-group .item-group figcaption div::before{top:0;left:0;-webkit-transform: translateY(100%);transform: translateY(100%);}
.main-group .item-group figcaption div::after{bottom:0;right:0;-webkit-transform: translateY(-100%);transform: translateY(-100%);}

.main-group .item-group figcaption h5,
.main-group .item-group figcaption h6{text-transform: uppercase;}
.main-group .item-group figcaption h5{font-weight: 400;}
.main-group .item-group figcaption h6{display: block;font-weight: 700;background: #fff;padding: 4px 10px;color: #000;margin-top:4px;}
.main-group .item-group a{position: absolute;left:0;top:0;bottom: 0;right: 0;}

.main-group .item-group:hover img{zoom:1;filter: alpha(opacity=50);-webkit-opacity: 0.5;opacity: 0.5;}

.main-group .item-group:hover figcaption::before,
.main-group .item-group:hover figcaption::after,
.main-group .item-group:hover figcaption div::before,
.main-group .item-group:hover figcaption div::after{-webkit-transform: translate(0,0);transform: translate(0,0);}

@media screen and (max-width: 890px) {
	.main-group .item-group{width: 100%;}
}

/**************按钮***************************************************************/
/*:active, :hover, :focus {outline: 0!important;outline-offset: 0;}*/
.btn-holder *::before,.btn-holder *::after {position: absolute;content: "";}

.btn-holder {display: flex;flex-wrap: wrap;justify-content:space-between; margin: 10px auto 35px;}
.btns { position: relative;display: inline-block;width: auto; height: auto;background-color: transparent;border: none;cursor: pointer;margin: 0px 25px 15px;min-width: 150px;box-sizing: border-box;}
.btns span {position: relative; display: inline-block;font-size: 14px;font-weight: bold;letter-spacing: 2px;text-transform: uppercase;top: 0; left: 0;width: 100%;padding: 15px 20px;transition: 0.3s;}

/*--- btn-1 ---*/
.btn-1::before {background-color: rgb(28, 31, 30);transition: 0.3s ease-out;height: 100%; width: 100%;}
.btn-1 span {color: rgb(255,255,255);border: 1px solid rgb(28, 31, 30);transition: 0.2s 0.1s;}
.btn-1 span:hover { color: rgb(28, 31, 30); transition: 0.2s 0.1s;}

/* 1.hover-filled-slide-down */
.btns.hover-filled-slide-down::before { bottom: 0; left: 0; right: 0;  }
.btns.hover-filled-slide-down:hover::before { height: 0%;}

/* 2.hover-filled-slide-up */
.btns.hover-filled-slide-up::before {top: 0; left: 0; right: 0; }
.btns.hover-filled-slide-up:hover::before {height: 0%;}

/* 3.hover-filled-slide-left */
.btns.hover-filled-slide-left::before { top: 0; bottom: 0; left: 0;  }
.btns.hover-filled-slide-left:hover::before { width: 0%;}

/* 4. hover-filled-slide-right */
.btns.hover-filled-slide-right::before {top:0; bottom: 0; right: 0; }
.btns.hover-filled-slide-right:hover::before {width: 0%;}

/* 5. hover-filled-opacity */
.btns.hover-filled-opacity::before {top:0; bottom: 0; right: 0; opacity: 1;}
.btns.hover-filled-opacity:hover::before { opacity: 0;}

/*--- btn-2 ---*/
.btn-2::before { background-color: rgb(28, 31, 30); transition: 0.3s ease-out;}
.btn-2 span { color: rgb(28, 31, 30); border: 1px solid rgb(28, 31, 30); transition: 0.2s;}  
.btn-2 span:hover { color: rgb(255,255,255);transition: 0.2s 0.1s;}

/* 6. hover-slide-down */
.btns.hover-slide-down::before { top: 0; left: 0; right: 0;  height: 0%; width: 100%;}
.btns.hover-slide-down:hover::before { height: 100%; }

/* 7. hover-slide-up */
.btns.hover-slide-up::before {bottom: 0; left: 0; right: 0; height: 0%; width: 100%;}
.btns.hover-slide-up:hover::before {height: 100%;}

/* 8. hover-slide-left */
.btns.hover-slide-left::before { top: 0; bottom: 0; right: 0; height: 100%; width: 0%;}
.btns.hover-slide-left:hover::before { width: 100%;}

/* 9. hover-slide-right */
.btns.hover-slide-right::before {top: 0; bottom: 0; left: 0; height: 100%; width: 0%;}
.btns.hover-slide-right:hover::before {width: 100%;}

/* 10. hover-opacity */
.btns.hover-opacity::before { top:0; bottom: 0; right: 0; height: 100%; width: 100%; opacity: 0;}
.btns.hover-opacity:hover::before { opacity: 1;}

/*--- btn-3 ---*/
.btn-3 {padding: 5px;}
.btn-3 span {color: rgb(255, 255, 255); background-color: rgb(54, 56, 55);}
.btn-3::before,.btn-3::after {background: transparent;z-index: 2;}

/* 11. hover-border-1 */
.btns.hover-border-1::before,.btns.hover-border-1::after {width: 10%; height: 25%;transition: 0.35s;}
.btns.hover-border-1::before {top: 0; left: 0;border-left: 1px solid rgb(28, 31, 30);border-top: 1px solid rgb(28, 31, 30);}
.btns.hover-border-1::after {bottom: 0; right: 0;border-right: 1px solid rgb(28, 31, 30);border-bottom: 1px solid rgb(28, 31, 30);}
.btns.hover-border-1:hover::before,.btns.hover-border-1:hover::after {width: 99%;height: 98%;}

/* 12. hover-border-2 */
.btns.hover-border-2::before,
.btns.hover-border-2::after {width: 10%; height: 25%;transition: 0.35s;}
.btns.hover-border-2::before {bottom: 0; left: 0;border-left: 1px solid rgb(28, 31, 30);border-bottom: 1px solid rgb(28, 31, 30);}
.btns.hover-border-2::after {top: 0; right: 0;border-right: 1px solid rgb(28, 31, 30);border-top: 1px solid rgb(28, 31, 30);}
.btns.hover-border-2:hover::before,
.btns.hover-border-2:hover::after {width: 99%;height: 99%;}

/* 13. hover-border-3 */
.btns.hover-border-3::before,
.btns.hover-border-3::after {width: 0%; height: 0%;opacity: 0;transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;}
.btns.hover-border-3::before {top: 0; right: 0;border-top: 1px solid rgb(28, 31, 30);border-left: 1px solid rgb(28, 31, 30);}
.btns.hover-border-3::after {bottom: 0; left: 0;border-bottom: 1px solid rgb(28, 31, 30);border-right: 1px solid rgb(28, 31, 30);}
.btns.hover-border-3:hover::before,
.btns.hover-border-3:hover::after {width: 100%; height: 99%;opacity: 1;transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;   }

/* 14. hover-border-4 */
.btns.hover-border-4::before,
.btns.hover-border-4::after {width: 0%; height: 0%;opacity: 0;transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;}
.btns.hover-border-4::before {bottom: 0; left: -1px;border-top: 1px solid rgb(28, 31, 30);border-left: 1px solid rgb(28, 31, 30);}
.btns.hover-border-4::after {top: 0; right: 0;border-bottom: 1px solid rgb(28, 31, 30);border-right: 1px solid rgb(28, 31, 30);}
.btns.hover-border-4:hover::before,
.btns.hover-border-4:hover::after {width: 100%; height: 99%;opacity: 1;transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;   }

/* 15. hover-border-5 */
.btns.hover-border-5::before,
.btns.hover-border-5::after {width: 0%; height: 0%;opacity: 0;}
.btns.hover-border-5::before {top: 0; right: 0;border-top: 1px solid rgb(28, 31, 30);border-left: 1px solid rgb(28, 31, 30);transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear, opacity 0s 0.7s;}
.btns.hover-border-5::after {bottom: 0; left: 0px;border-bottom: 1px solid rgb(28, 31, 30);border-right: 1px solid rgb(28, 31, 30);transition: width 0.2s 0.15s linear, height 0.15s ease-in, opacity 0s 0.35s;}
.btns.hover-border-5:hover::before,
.btns.hover-border-5:hover::after {width: 100%; height: 96%;opacity: 1;}
.btns.hover-border-5:hover::before {transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s;   /* 1,2 */}
.btns.hover-border-5:hover::after {transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out, opacity 0s 0.3s; } 

/*--- btn-4 ---*/
.btn-4 span {color: rgb(28, 31, 30);background-color: rgb(245,245,245);}
.btn-4 span:hover {color: rgb(54, 56, 55);}
.btn-4::before,
.btn-4::after {width: 15%; height: 2px;background-color: rgb(54, 56, 55);z-index: 2;}

/* 16. hover-border-6 */
.btns.hover-border-6::before,
.btns.hover-border-6::after {top: 0;transition: width 0.2s 0.35s ease-out;}
.btns.hover-border-6::before {right: 50%;}
.btns.hover-border-6::after {left: 50%;}
.btns.hover-border-6:hover::before,
.btns.hover-border-6:hover::after {width: 50%;transition: width 0.2s ease-in;   }

.btns.hover-border-6 span::before,
.btns.hover-border-6 span::after {width: 0%; height: 0%;background: transparent;opacity: 0;z-index: 2;transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;}
.btns.hover-border-6 span::before {top: 0; left: 0;border-left: 2px solid rgb(54, 56, 55);border-bottom: 2px solid rgb(54, 56, 55);}
.btns.hover-border-6 span::after {top: 0; right: 0;border-right: 2px solid rgb(54, 56, 55);border-bottom: 2px solid rgb(54, 56, 55);}
.btns.hover-border-6 span:hover::before,
.btns.hover-border-6 span:hover::after {width: 50%; height: 96%;opacity: 1;transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;   }

/* 17. hover-border-7 */
.btns.hover-border-7::before,
.btns.hover-border-7::after {bottom: 0;transition: width 0.2s 0.35s ease-out;}
.btns.hover-border-7::before {right: 50%;}
.btns.hover-border-7::after {left: 50%;}
.btns.hover-border-7:hover::before,
.btns.hover-border-7:hover::after {width: 50%;transition: width 0.2s ease-in;   }

.btns.hover-border-7 span::before,
.btns.hover-border-7 span::after {width: 0%; height: 0%;background: transparent;opacity: 0;z-index: 2;transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;}
.btns.hover-border-7 span::before {bottom: 0; left: 0;border-left: 2px solid rgb(54, 56, 55);border-top: 2px solid rgb(54, 56, 55);}
.btns.hover-border-7 span::after {bottom: 0; right: 0;border-right: 2px solid rgb(54, 56, 55);border-top: 2px solid rgb(54, 56, 55);}
.btns.hover-border-7 span:hover::before,
.btns.hover-border-7 span:hover::after {width: 50%; height: 96%;opacity: 1;transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;   }

/* 18. hover-border-8 */
.btns.hover-border-8::before,
.btns.hover-border-8::after {bottom: 0;width: 15%;transition: width 0.2s 0.35s ease-out;}
.btns.hover-border-8::before {right: 50%;}
.btns.hover-border-8::after {left: 50%;}
.btns.hover-border-8:hover::before {width: 50%;transition: width 0.2s ease-in;   }
.btns.hover-border-8:hover::after {width: 50%;transition: width 0.1s ease-in;   }

.btns.hover-border-8 span::before,
.btns.hover-border-8 span::after {width: 0%; height: 0%;bottom: 0;background: transparent;opacity: 0;z-index: 2;}
.btns.hover-border-8 span::before {left: 0%;border-left: 2px solid rgb(54, 56, 55);transition: height 0.25s ease-in, opacity 0s 0.35s;   }
.btns.hover-border-8 span:hover::before {height: 96%;opacity: 1;transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;   }
.btns.hover-border-8 span::after {right: 0%;border-right: 2px solid rgb(54, 56, 55);border-top: 2px solid rgb(54, 56, 55);transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;   }
.btns.hover-border-8 span:hover::after {width: 99%; height: 96%;opacity: 1;transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;   }

/* 19. hover-border-9 */
.btns.hover-border-9::before,
.btns.hover-border-9::after {bottom: 0;width: 15%;transition: width 0.2s 0.35s ease-out;}
.btns.hover-border-9::before {right: 50%;}
.btns.hover-border-9::after {left: 50%;}
.btns.hover-border-9:hover::before {width: 50%;transition: width 0.1s ease-in;   }
.btns.hover-border-9:hover::after {width: 50%;transition: width 0.2s ease-in;   }

.btns.hover-border-9 span::before,
.btns.hover-border-9 span::after {width: 0%; height: 0%;bottom: 0;background: transparent;opacity: 0;z-index: 2;}
.btns.hover-border-9 span::after {right: 0%;border-right: 2px solid rgb(54, 56, 55);transition: height 0.25s ease-in, opacity 0s 0.35s;   }
.btns.hover-border-9 span:hover::after {height: 96%;opacity: 1;transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;   }
.btns.hover-border-9 span::before {left: 0%;border-left: 2px solid rgb(54, 56, 55);border-top: 2px solid rgb(54, 56, 55);transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;   }
.btns.hover-border-9 span:hover::before {width: 98.5%; height: 96%;opacity: 1;transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;   }

/* 20. hover-border-10 */
.btns.hover-border-10::before,
.btns.hover-border-10::after {left: 0%;height: 30%;width: 2px;transition: height 0.2s 0.35s ease-out;}
.btns.hover-border-10::before {top: 50%;}
.btns.hover-border-10::after {bottom: 50%;}
.btns.hover-border-10:hover::before {height: 50%;transition: height 0.2s ease-in;   }
.btns.hover-border-10:hover::after {height: 50%;transition: height 0.1s ease-in;   }

.btns.hover-border-10 span::before,
.btns.hover-border-10 span::after {width: 0%; height: 0%;background: transparent;opacity: 0;z-index: 2;}
.btns.hover-border-10 span::after {bottom: 0; left: 0%;border-bottom: 2px solid rgb(54, 56, 55);transition: width 0.25s ease-in, opacity 0s 0.35s;   }
.btns.hover-border-10 span:hover::after {width: 100%;opacity: 1;transition: width 0.25s 0.2s ease-out, opacity 0s 0.2s;   }
.btns.hover-border-10 span::before {top: 0%; left: 0%;border-top: 2px solid rgb(54, 56, 55);border-right: 2px solid rgb(54, 56, 55);transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;   }
.btns.hover-border-10 span:hover::before {width: 98.5%; height: 96%;opacity: 1;transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;   }

/*--- btn-5 ---*/
.btn-5 span {color: rgb(28, 31, 30);border: 2px solid rgb(249, 211, 27);transition: 0.2s;}
.btn-5 span:hover {background-color: rgb(245,245,245);}

/* 21. hover-border-11 */
.btns.hover-border-11::before,
.btns.hover-border-11::after {width: 100%; height: 2px;background-color: rgb(54, 56, 55);z-index: 2;transition: 0.35s; }
.btns.hover-border-11::before {top: 0; right: 0;}
.btns.hover-border-11::after {bottom: 0; left: 0;}
.btns.hover-border-11:hover::before,.btns.hover-border-11:hover::after {width: 0%;transition: 0.2s 0.2s ease-out; }

.btns.hover-border-11 span::before,.btns.hover-border-11 span::after {width: 2px; height: 100%;background-color: rgb(54, 56, 55);z-index: 2;transition: 0.25s; }
.btns.hover-border-11 span::before {bottom: 0; right: -2px;}
.btns.hover-border-11 span::after {top: 0; left: -2px;}
.btns.hover-border-11 span:hover::before,.btns.hover-border-11 span:hover::after {height: 0%;}