.page5 .img, .page5 .img img, .page5 .mask, .page5 .mask img {
    width: 100%;
}

.page5 span h1 {
    padding-top: 10px;
    font-size: 20px;
    line-height: 25px;
    display: none;
    color:#fff;
}

.page5 .item:hover span h1 {
    display: block;
}

.item:hover {
    border: 0px solid #a3d3ff;
}

.item {
    border: 0px solid #d9d9d9;
}

.page5 .mask {
    position: absolute;
    left: 50%;
top: 200px;
    margin-left: -600px;
    max-width: 1200px;
}

.page5 .item {
    width: 40px;
    position: absolute;
}

.page5 .item.i1 {
    top: 50%;
    left: 3%;
}

.page5 .item.i2 {
    top: 54%;
    left: 15%;
}

.page5 .item.i3 {
top: 25%;
    left: 23%;
}

.page5 .item.i4 {
       top: 30%;
    right: 63%;
}

.page5 .item.i5 {
  top: 45%;
    right: 44%;
}

.page5 .item.i6 {
    top: 55%;
    right: 20%;
}

.page5 .item.i7 {
      top: 50%;
    right: 12%;
}

.page5 .item.i8 {
    top:34%;
    right: 13%;
}

.page5 .item.i9 {
    top: 23%;
    right: 5%;
}

.page5 .item .img {
    width: 32px;
    height: 32px;
    border: 1px #0301fc solid;
    float: left;
    border-radius: 160px;
    padding: 6px;
    position: relative;
    left: 50%;
    
}

.page5 .item .img img {
    opacity: 0;
}

.page5 .item .img img, .page5 .item .img font {
    width: 100%;
    border-radius: 160px;
    float: left;
}

.page5 .item .img font {
    background-color: #0301fc;
}

.page5 .item .text {
    width: 100%;
    position: relative;
    float: left;
    left:15%;
    text-align: center;
    font-size: 18px;
    color: #454545;
}

.page5 .item .text:before {
    content: "";
    width: 1px;
    height: 0px;
    position: relative;
    float: left;
    left: 50%;
   
    border-left: 1px #0301fc solid;
}

.page5 .item .text font {
    width: 100%;
    float: left;
    padding-top: 6px;
}

.page5 .item:hover {
    margin-top: -73px;
}

.page5 .item:hover .img {
    width: 200px;
    height: 200px;
    padding: 14px;
    margin-left: -94px;
    background-color: rgba(0,0,245,0.1);
}

.page5 .item:hover img {
    opacity: 1;
}

.page5 .item:hover .text:before {
    height: 60px;
}

.page5 .info {
    width: 100%;
    position: absolute;
    top: 10%;
    left: 0px;
    z-index: 10;
}

.page5 .line {
    width: 30px;
    height: 1px;
    border-top: 2px #454545 solid;
    display: inline-block;
    margin: 20px 0;
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}



.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.fadeInUp,.fadeInRight,.fadeInLeft,.fadeInDown,.fadeIn {
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.item .img, .page5 .item {
    -webkit-transition: all 0.65s ease-in-out;
    -moz-transition: all 0.65s ease-in-out;
    -ms-transition: all 0.65s ease-in-out;
    -o-transition: all 0.65s ease-in-out;
    transition: all 0.65s ease-in-out;
}




.ad-sl{
	background: rgba(138,138,138,0.08);border: 1px solid #454646;margin-top: 70px;height: 560px;
}

.al-list ul{
	background: url(/img/lico23.png) no-repeat center;position: relative;padding: 0;overflow: hidden;padding-top: 33px;text-align: center;
}
.al-list ul li{
	width: 167px;
	text-align: center;
	list-style: none;
	display: inline-block;
}

.al-list ul li .ico{
	position: relative;height: 110px;
}
.al-list ul li .ico img{
	position: absolute;left: 0;top: 0;right: 0;margin: 0 auto;
}
.al-list ul li .ico .img1{
	opacity: 0;transition: all 0.5s;
}
.al-list ul li.on .img1,
.al-list ul li:hover .img1{
	opacity: 1;
}
.al-list ul li.on h2,
.al-list ul li:hover h2{
	color: #ffcf17;
}
.al-list ul li:hover h3{
	color: #ffcf17;
}
.al-list ul li h2{
	font-size: 18px;color:#cccccc ;transition: all 0.5s;margin: 0;
}
.al-list ul li h3{
	font-size: 14px;color:#999999 ;line-height: 22px;margin-top: 28px;transition: all 0.5s;
}

.bd h2 {
    font-size: 20px;
    color: #1890ff;
    margin: 0;
    margin-top: 35px;
    padding: 0;
    margin-bottom: 30px;
}
.bd {
    overflow: hidden;
    padding: 2% 4%;
}

 .bd dd p {
    font-size: 14px;
    color: #cccccc;
    line-height: 24px;
    float: left;
    margin: 0;
}

.al-list ul li.on h2, .al-list ul li:hover h2 {
     color: #1890ff;
}


.bd dd{overflow: hidden;margin-bottom: 20px;}
 .bd dd .l,
 .bd dd .r{float: left;width: 50%;overflow: hidden;}
.bd dd h4{font-size: 20px;color: #ffcf17;line-height:1;padding-bottom: 20px;margin: 0;}
.bd dd h5{font-size: 18px;color: #1890ff;line-height:38px;margin: 0;}
 .bd dd h5 span{
	font-size: 18px;line-height: 38px;padding: 0;
}



@media screen and (max-width: 520px) {
    .page5 .mask {
        padding: 0px;
        width: 80%;
    }

    .page5 .mask img, .page5 .img img, .page5 span.img, .page5 .item .text:before {
        display: none;
    }

    .page5 .item.i1, .page5 .item.i2, .page5 .item.i3, .page5 .item.i4 , .page5 .item.i5, .page5 .item.i6, .page5 .item.i7, .page5 .item.i8 {
        width: 50%;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        float: left;
    }

    .page5 .item .text font {
        width: 100px;
        height: 100px;
        line-height: 100px;
        float: none;
        display: inline-block;
        padding: 0px;
        border: 1px #fe0000 solid;
        border-radius: 100px;
        background-color: #d3e1f5;
    }

    .page5 .item .text, .page5 {
        text-align: center;
    }

    .page5 .info, .page5 .mask {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        padding: 22px 0;
        display: inline-block;
    }

    .page5 .item {
        margin-bottom: 20px;
    }

    .f-c {
        text-align: center;
    }
  
 #c_portalResPublic_codeContainer-16353242511900508 .il-p2 .text {
    width: auto;
    position: static;
    padding: 0;
}
  
  #c_portalResPublic_codeContainer-16353242511900508 .il-p2 .text{

width:100%;

}
  
  
}