|
@@ -142,13 +142,13 @@
|
|
|
}
|
|
|
.handle ul li .handleBox .handleMask{
|
|
|
overflow: hidden;
|
|
|
- height: 0;
|
|
|
+ height:100%;
|
|
|
position: absolute;
|
|
|
- background: rgba(104, 127, 176, .7);
|
|
|
+ background: rgba(141, 150, 168, 0.5);
|
|
|
width: 100%;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
- transition: all .3s ease-in-out;
|
|
|
+ transition: all .5s ease-in-out;
|
|
|
}
|
|
|
.handle ul li .handleBox .handleMask .maskTxt{
|
|
|
position: absolute;
|
|
@@ -158,7 +158,7 @@
|
|
|
top: 55%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
-.handle ul li .handleBox .handleMask .maskTxt p{
|
|
|
+.handle ul li .handleBox .handleMask .maskTxt>p{
|
|
|
font-size: 22px;
|
|
|
color: #ffffff;
|
|
|
margin-top: 20px;
|
|
@@ -169,6 +169,7 @@
|
|
|
height: 2px;
|
|
|
background: #b3bed7;
|
|
|
}
|
|
|
+
|
|
|
.handle ul li a{
|
|
|
width: 110px;
|
|
|
height: 34px;
|
|
@@ -189,10 +190,6 @@
|
|
|
.handle ul li:hover{
|
|
|
box-shadow: 0 4px 15px #ccc;
|
|
|
}
|
|
|
-.handle ul li:hover .handleBox .handleMask{
|
|
|
- height: 100%;
|
|
|
- transition: all .2s ease-in;
|
|
|
-}
|
|
|
.handle .more{
|
|
|
clear: both;
|
|
|
overflow: hidden;
|
|
@@ -202,6 +199,34 @@
|
|
|
margin-top: 15px;
|
|
|
margin-bottom: 64px;
|
|
|
}
|
|
|
+.handle ul li:hover .handleBox .maskTxt {
|
|
|
+ top: 60px;
|
|
|
+ transition: all .5s ease-in-out;
|
|
|
+}
|
|
|
+.handle ul li .handleBox .maskTxt img{
|
|
|
+ width: 65px;
|
|
|
+ height: 55px;
|
|
|
+}
|
|
|
+.handle ul li:hover .handleBox .maskTxt img{
|
|
|
+ width: 0px;
|
|
|
+ height: 0px;
|
|
|
+ transition: all .5s ease-in-out;
|
|
|
+}
|
|
|
+.handle ul li:hover .handleBox .maskTxt .contentTxt{
|
|
|
+ top:100px;
|
|
|
+}
|
|
|
+.maskTxt .contentTxt{
|
|
|
+ width: 200px;
|
|
|
+ position: absolute;
|
|
|
+ top: 202px;
|
|
|
+ margin-left: -40px;
|
|
|
+ transition: all .5s ease-in-out;
|
|
|
+}
|
|
|
+.maskTxt .contentTxt p{
|
|
|
+ color:#ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
.handle .more:hover{
|
|
|
color: #1697e9;
|
|
|
}
|
|
@@ -259,6 +284,59 @@
|
|
|
height: 420px;
|
|
|
text-align: center;
|
|
|
background: #f9f9f9;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.RecommendTxtBottom p{
|
|
|
+ font-size: 22px;
|
|
|
+ color: #1f1f1f;
|
|
|
+ margin-top: 24px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding: 0 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.RecommendTxt .RecommendTxtImg{
|
|
|
+ position: relative;
|
|
|
+ width: 295px;
|
|
|
+ height: 296px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.RecommendTxt .RecommendTxtImg img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.RecommendTxtImg .txts{
|
|
|
+ opacity: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(152, 154, 156, 0.7);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+.RecommendBody .RecommendTxt:hover .txts{
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+.RecommendBody .RecommendTxt:hover .txts p{
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0%,-50%);
|
|
|
+ transition: all .5s ease-in-out;
|
|
|
+}
|
|
|
+.RecommendTxtImg .txts p{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ width: 200px;
|
|
|
+ position: absolute;
|
|
|
+ margin-left: -100px;
|
|
|
+ left: 50%;
|
|
|
+ top: 100%;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
.RecommendBody .RecommendImg{
|
|
|
width: 586px;
|
|
@@ -301,14 +379,19 @@
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
- width: 110px;
|
|
|
+ width: 270px;
|
|
|
text-align: center;
|
|
|
- transform: translate(-50%,-50%)
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+
|
|
|
}
|
|
|
.RecommendImg .RecommendRemask .remaskImg div p{
|
|
|
font-size: 22px;
|
|
|
color: #1f1f1f;
|
|
|
margin-bottom: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
.RecommendImg .RecommendRemask .remaskImg div a{
|
|
|
display: inline-block;
|
|
@@ -350,12 +433,19 @@
|
|
|
height: 296px;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
-.RecommendBody .RecommendTxt p{
|
|
|
+.RecommendBody .RecommendTxt>p{
|
|
|
font-size: 22px;
|
|
|
color: #1f1f1f;
|
|
|
margin-top: 24px;
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
+.RecommendTxtBottom {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ height: 122px;
|
|
|
+ width: 100%;
|
|
|
+ left: 0
|
|
|
+}
|
|
|
.RecommendBody .RecommendTxt a{
|
|
|
display: inline-block;
|
|
|
width: 110px;
|
|
@@ -376,6 +466,7 @@
|
|
|
}
|
|
|
.RecommendTxt a:hover{
|
|
|
background: #1697e9;
|
|
|
+ border-color: #1697e9;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
@@ -472,7 +563,8 @@
|
|
|
.news div h4{
|
|
|
font-size: 18px;
|
|
|
color: #323131;
|
|
|
- font-weight: normal
|
|
|
+ font-weight: normal;
|
|
|
+ margin-bottom: 24px;
|
|
|
}
|
|
|
.news div h4 img{
|
|
|
float: right;
|
|
@@ -527,6 +619,9 @@
|
|
|
.news div ul li a:hover .time{
|
|
|
background: #1697e9;
|
|
|
}
|
|
|
+.new .policy h4{
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
.new .policy>img{
|
|
|
width: 565px;
|
|
|
height: 115px;
|
|
@@ -543,6 +638,33 @@
|
|
|
.consultation ul li{
|
|
|
margin-bottom: 24px;
|
|
|
}
|
|
|
+.news h4 a{
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+.news h4 a span:nth-child(2){
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ border: 1px solid #cecece;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ float: right;
|
|
|
+ color: #cecece
|
|
|
+}
|
|
|
+.news h4 a:hover .line{
|
|
|
+ background: #1697e9;
|
|
|
+}
|
|
|
+.news h4 a:hover span{
|
|
|
+ border-color:#1697e9;
|
|
|
+ color:#1697e9;
|
|
|
+}
|
|
|
+.news h4 .line{
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 470px;
|
|
|
+ height: 1px;
|
|
|
+ background: #cecece;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
.publicNumber{
|
|
|
margin-top: 26px;
|
|
|
display: flex;
|