.banner{
	background: url(../img/4.jpg) no-repeat center center;
	height:475px;
}
.banner_tit{
	color: #fff;
	z-index: 1;
}
.banner_tit h3{
	font-size: 36px;
    margin: 335px 0 20px 0;
}
.banner_tit h5{
    max-width: 620px;
    font-size: 24px;
}


.floor1{
	margin: 50px 0;
}
.left_list{
    background-color: rgba(0,0,0,.8);
}
.left_list a{
	color: #fff;
	display: block;
}
.left_list li{
	height: 52px;
    font-size: 14px;
    color: #fff;
    line-height: 52px;
    cursor: pointer;
    padding-left: 20px;
    transition: all linear .3s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.left_list .left_active{
	background: linear-gradient(45deg,#00c5f4,#008af4);
    background-color: #00c5f4;
}
.left_list li:not(.left_active):hover{
	background: linear-gradient(45deg,rgba(0,197,244,.5),rgba(0,138,244,.5));
    background-color: rgba(0,197,244,.5);
}
.solution_tit{
	color: #339beb;
	font-size: 24px;
	margin-bottom: 15px;
	padding-left: 10px;
}

.solution_list li{
	width: 270px;
    float: left;
    margin: 10px;
}
.solution_list li a{
	display: block;
}
.solution_list li .figure {
    background-color: #eee;
    height: 180px;
    display: block;
    line-height: normal;
    overflow: hidden;
    position: relative;
}
.solution_list li .figure .mark {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: rgba(51,155,235,.2);
    background: #eb6123\9;
    filter: alpha(opacity=20);
    z-index: 20;
    opacity: 0;
    transform: skewX(45deg);
    visibility: hidden;
    transition: 360ms;
}
.solution_list li f.igure .mark:before {
    content: "";
    width: 100%;
    height: 0%;
    border-left: 3px solid #339beb;
    border-right: 3px solid #339beb;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    transition: 320ms;
}
.solution_list li .figure .mark:after {
    content: "";
    width: 0%;
    height: 100%;
    border-top: 3px solid #339beb;
    border-bottom: 3px solid #339beb;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    transition: 320ms;
}
.solution_list li .figure .mark b {
    display: block;
    width: 46px;
    height: 46px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -23px;
    margin-top: -23px;
    z-index: 30;
}
.solution_list li .figure .mark b:before{
	content: "";
    width: 100%;
    height: 1px;
    background: #339beb;
    position: absolute;
    left: 0;
    top: 23px;
    transform: translateX(-200px);
    -webkit-transform: translateX(-200px);
    -moz-transform: translateX(-200px);
}
.solution_list li .figure .mark b:after{
	content: "";
    width: 1px;
    height: 100%;
    background: #339beb;
    position: absolute;
    left: 23px;
    top: 0;
    transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
}
.solution_list li .figure img {
    display: block;
    width: 270px;
    height: 180px;
    transition: 424ms linear;
}
.solution_list li p{
	display: block;
    color: #5d5d5d;
    font-size: 14px;
    line-height: normal;
    margin-top: 14px;
    transition: 350ms;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


.solution_list li:hover .figure .mark {
	opacity: 1;
	transform: skewX(0);
	visibility: visible;
}

.solution_list li:hover .figure .mark:before {
	height: 100%;
	transition: 330ms 200ms;
}

.solution_list li:hover .figure .mark:after {
	width: 100%;
	transition: 330ms 200ms;
}

.solution_list li:hover .figure img {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
}

.solution_list li:hover .figure .mark b:before {
	transition: 355ms 180ms;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
}

.solution_list li:hover .figure .mark b:after {
	transition: 355ms 240ms;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
}

.solution_list li:hover p {
	color: #339beb;
}



/*解决方案详情*/
.solution_txt img{
	max-width: 100%;
}
.pro_others{
	color: #969696;
}

.pro_others a:hover{
	color: #0080ff;
}

.pro_others .pro_empty{
	color: #969696 !important;
	cursor: default;
}
.back{
    display: block;
    width: 160px;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
    background: #339beb;
    color: #fff;
    text-align: center;
    margin: 0 auto;
}


@media screen and (max-width: 1000px){
	.banner{
		height: 280px;
	}
	.banner_tit h3 {
	    font-size: 28px;
	    margin: 145px 0 20px 0;
	}
	.banner_tit h5 {
	    font-size: 20px;
	}
	.solution_tit{
		margin-top: 20px;
	}
	.solution_list li{
		width: 100%;
		margin: 0;
		
	}
	.solution_list li .figure img{
		width: 100%;
		height: auto;

	}
}
