/* CSS Document for home*/


.news{padding: 20px; overflow: hidden; background: #fff; box-shadow: 0 0 15px #ccc;}
.news .left{width: 575px; float: left; margin-right: 24px;}
.news .right{ width: 560px;float: right}

.news .right .tabContainer{ min-height: 290px;width: 100%; margin-top: 5px;}
.news .right .tabContainer .swiper-container {width: 100%;height: 100%;}

.affairsBan { width: 575px;height: 357px;  position: relative;float: left;}
.affairsBan .swiper-slide{position: relative;}
.affairsBan .swiper-slide span{display: block;position: absolute;left: 0;padding: 10px; bottom: 0; right: 0; font-size: 14px;color: #FFFFFF;background: rgba(0,0,0,.6);background: #000000\9;}
#affairsBanPage {text-align: right; z-index: 3;position: absolute;right: 0; bottom: 5px; left: 0; padding: 10px;}
#affairsBanPage .swiper-pagination-switch{ display: inline-block; width: 8px; height: 8px; background: #D9D9D9; margin: 0 5px; border-radius: 100%;}
#affairsBanPage .swiper-pagination-switch.swiper-active-switch{ background: #007AFF;}
.section-affairs {width: 100%;overflow: hidden;}



.functionLink{width: 100%; display: table; margin-top: 26px; overflow: hidden;}
.functionLink ul{width: 105%;}
.functionLink ul li{width: 30.7%; float: left; height: 180px;text-align: center; line-height: 180px; margin: 0 20px 20px 0; overflow: hidden;position: relative;}
.functionLink ul li > a{display: inline-block; vertical-align: middle; font-size: 14px; color: #fff; line-height: 24px;}
.functionLink ul li span.icon-name{font-size: 16px;display: block; text-align: center;transition: ease .3s;}
.functionLink ul li p{ position: absolute;width: 100%; height: 100%; left: 0; top: 0;opacity: 0; transform: translateY(-180px); z-index: -1; transition: ease .3s; line-height: 180px;}
.functionLink ul li p span.pspan{ font-size: 14px; color:#fff; padding: 0 30px;display: inline-block; vertical-align: middle; line-height: 24px;}
.functionLink ul li:nth-last-child(1),.functionLink ul li:nth-last-child(2),.functionLink ul li:nth-last-child(3){width: 30.7%;}
.functionLink ul li:hover p{z-index: 2; opacity: 1; transform: translateY(0);}	
.functionLink ul li:hover span.icon-name,.functionLink ul li:hover i{transform: translateY(180px);}
.icon-1{background: url(/szsi/static/2023res/icons/icon_1.png) no-repeat center center;}
.icon-2{background: url(/szsi/static/2023res/icons/icon_2.png) no-repeat center center;}
.icon-3{background: url(/szsi/static/2023res/icons/icon_3.png) no-repeat center center;}
.icon-4{background: url(/szsi/static/2023res/icons/icon_4.png) no-repeat center center;}
.icon-5{background: url(/szsi/static/2023res/icons/icon_5.png) no-repeat center center;}
.icon-6{background: url(/szsi/static/2023res/icons/icon_6.png) no-repeat center center;}
.icon-7{background: url(/szsi/static/2023res/icons/icon_7.png) no-repeat center center;}
.icon-1,.icon-2,.icon-3,.icon-4,.icon-5,.icon-6,.icon-7{display: inline-block;width: 68px;height: 68px;vertical-align: middle;transition: ease .3s;}

.color1{background-color: #196fd8;}
.color2{background-color: #61cbbf;}
.color3{background-color: #e4b55a;}
.color4{background-color: #e86e6e;}
.color5{background-color: #b967b4;}
.color6{background-color: #5f53bd;}
.color7{background-color: #3aadf5;}


.fastlink{padding: 35px 0 24px 0; background: url(/szsi/static/2023res/bg/bg_home2.jpg) no-repeat top center #fffdfe; -webkit-background-size: auto 100%;background-size: auto 100%;}
.fastlink h6{font-size: 20px; color: #595757;position: relative; padding-bottom: 9px;}
.fastlink h6:before{height: 2px; background: #4a9aef; width: 38px; position: absolute;left: 0; bottom: 0; content: '';}
.fastlink h6:after{height: 2px;background: #005fd4; width: 70px; position: absolute;left: 38px; bottom: 0;content: '';}

/*修改增加二级*/
.business{margin-top: 44px; width: 100%; display: table;}
.business ul{width: 100%;}
.business ul li{float: left;width: 23.6%; height: 57px;position: relative; margin: 0 20px 20px 0; box-shadow: 0 0 15px #ccc; position: relative;}
.business ul li a{display: block;width: 100%; height: 100%; font-size: 16px; background: #fff;text-align: center; line-height: 57px; transition: ease .3s;}
.business ul li:before{width: 12px; height: 100%; background: #005fd4;position: absolute;left: 0; top: 0; content: '';}
.business ul li a:hover{background: #63a5eb; color: #fff;}
.business ul li .second{background: #fff;border-radius: 8px;box-shadow: 0 0 10px #ccc;position: absolute;width: 330px;;left: 95%;top: -24%;padding: 10px 0;display: none; overflow: hidden;}
.business ul li .second.long{width: 480px;}
.business ul li:nth-child(4),.business ul li:nth-child(8){ margin-right: 0;}
.business ul li.hover{ z-index: 9;}
.business ul li .second a{line-height: 16px; display: block; background: none;padding: 15px 10px 15px 30px;text-align: left; position: relative; display: -webkit-box;}
.business ul li .second a:before{width: 5px; height: 5px; display: inline-block; content: ''; vertical-align: middle; margin:0 10px 0 15px; border-radius: 100%; background: #ddd; position: absolute;left: 5px; top: 50%; margin-top: -3px;}
.business ul li .second a:hover{ color: #000; background: #efefef;}
.business ul li:hover{ z-index: 9;}
.business ul li:hover .second{ display: inline-block;}
.icon-more{ display: inline-block; width: 7px; height: 12px; vertical-align: middle; background: url(/szsi/static/2023res/icons/icon_arrow_menu.png) no-repeat center center; -webkit-background-size: 100% 100%;background-size: 100% 100%; margin-left: 5px;}


.motif{padding: 30px 0;background: url(/szsi/static/2023res/bg/bg_home3.jpg) no-repeat top center #fffdfe; }
.scroll{ overflow: hidden;}
.scroll ul{width: 1160px;float: left;}
.scroll li{ width: 270px; height:130px; float:left; margin:0 10px; overflow: hidden;}
.scroll li a{display: block;width: 100%; height: 100%;}
.scroll ul li img{width: 100%; height: 100%; transition: ease .2s;}
.scroll ul li:hover img{ transform: scale(1.1);}
.scroll-prev,.scroll-next{width: 20px; height: 130px;float: left;line-height: 130px;}

.scrollBox{width: 1160px;height:130px; float: left;}
.scrollBox .swiper-slide{height:130px; text-align: center;overflow: hidden;}
.scrollBox .swiper-slide img{width: 270px; height: 100%; transition: ease .2s; display: inline-block;}
.scrollBox .swiper-slide:hover img{ transform: scale(1.1);}



@media screen and (min-width:1001px) and (max-width:1200px) {
	.news .left{float: none; margin: auto; overflow: hidden;}
	.tabTop{text-align: center;}
	.news .right{width: 100%;float: none; margin-top: 20px; overflow: hidden;}
	.functionLink ul li{width: 30.7%;}
	.business ul li a{font-size: 14px;}
	
	.motif{line-height: 120px; height: 120px;}
	.scrollBox{width: 95%;height: 100px; vertical-align: middle;}
	.scroll-prev, .scroll-next{height: 120px; line-height: 120px;}
	.scrollBox .swiper-slide img{width: 90%;}
	
	.business ul li { min-height: 60px; height: auto; width: 23.2%;}
}

@media screen and (max-width:1000px) {
	.news .left{float: none; margin: auto; overflow: hidden; text-align: center;width: auto;}
	.affairsBan{display: inline-block;float: none;}
	.affairsBan img{width: 100%; height: 100%;}
	.tabTop{text-align: center;}
	.news .right{width: 100%;float: none; margin-top: 20px; overflow: hidden;}
	.functionLink ul li,.functionLink ul li:nth-last-child(1), .functionLink ul li:nth-last-child(2), .functionLink ul li:nth-last-child(3){width: 30.1%;}
	.functionLink ul li:nth-child(3){ margin: 0 0 20px 0;}
	.business ul li a{font-size: 14px;}
	
	.functionLink ul li{ height: 140px; line-height: 140px;}
	.functionLink ul li p{ line-height: 140px;}
	
	.motif{line-height: 120px; height: 120px;}
	.scrollBox{width: 93%;height: 100px; vertical-align: middle;}
	.scroll-prev, .scroll-next{height: 120px; line-height: 120px;}
	.scrollBox .swiper-slide img{width: 90%;}
	
	.fastlink{-webkit-background-size: cover;
	background-size: cover;}
	.fastlink h6{padding: 10px;}
	.business ul li { min-height: 60px; height: auto; width: 100%;}
	.business ul li.hasSecond{width: 100%; height: auto;z-index: 0; overflow: hidden; }
	.business ul li.hasSecond .second{display: block; position: inherit;left: 12px; top: auto; width: 100%; border-radius: 0; box-shadow: none; z-index: 0; padding-top: 0;}
	.business ul li a span{line-height: 20px; vertical-align: middle; display: inline-block;}
	.business ul li a{padding: 10px 15px; width: 96%;font-size: 18px;}
	.business ul li.hasSecond > a{border-bottom: 1px dashed #dedede;}
}

@media screen and (max-width: 768px) {
	.newsList ul li{display: block;overflow: hidden;}
	.newsList ul li .right-txt{width: 70%;}
	.newsList ul li .left-date{padding-right: 20px;}	
	
	.business ul li { min-height: 60px; height: auto; width: 100%;}
	.business ul li.hasSecond{width: 100%; height: auto;z-index: 0; overflow: hidden; }
	.business ul li.hasSecond .second{display: block; position: inherit;left: 12px; top: auto; width: 97%; border-radius: 0; box-shadow: none; z-index: 0;}
	.business ul li a span{line-height: 20px; vertical-align: middle; display: inline-block;}
	.business ul li a{padding: 10px 15px; width: 92%;font-size: 18px;}
}

@media screen and (max-width: 480px) {
	.news .left{float: none; margin: auto; overflow: hidden;width: 100%;}
	.tabTop{text-align: center;}
	.tabTop span{margin: 0;}
	.news .right{width: 100%;float: none; margin-top: 20px; overflow: hidden;}
	.business ul li a{font-size: 14px;}
	
	.functionLink ul li{ height: 140px; line-height: 140px;width: 42%;margin: 12px;}
	.functionLink ul li,.functionLink ul li:nth-last-child(1), .functionLink ul li:nth-last-child(2), .functionLink ul li:nth-last-child(3){width: 42%; margin: 0 20px 20px 10px;}
	.functionLink ul li:nth-child(3){margin: 0 20px 20px 10px;}
	.functionLink ul li p{ line-height: 140px;}
	
	.newsList ul li{display: block;overflow: hidden;}
	
	.fastlink{background-size: cover;}
	.motif{line-height: 120px; height: 120px;}
	.scrollBox{width: 90%;height: 100px; vertical-align: middle;}
	.scroll-prev, .scroll-next{height: 120px; line-height: 120px;}
	.scrollBox .swiper-slide img{width: 90%;}
	.newsList ul li .right-txt{width: 60%; white-space: normal;text-overflow: inherit; line-height: 24px;}
	.newsList ul li .left-date{padding-right: 10px;}
	
	.floatRight{display: none;}
	.affairsBan .swiper-slide img{width: 100%; height: 100%;}
	
	.scroll-prev, .scroll-next{width: 12px;}
	
}