/* html,body{
    height:100%;
} */

.content{
    width:100%;
    min-height:468px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: 0 auto;
    background:#314ff2;
    overflow: hidden;
  }
  .scene {
    position: absolute;
}
.hw-panel_3{
    padding:90px 0 153px 0;
    /* height:906px; */
    color:#2E2F36;
}
.kol_tab{
    margin: 0 auto;
    margin-top:72px;
    margin-bottom: 30px;
    width:1062px;
    opacity:0;
}
.kol_tab ul{
    display: flex;
    justify-content:space-between;
    align-items: flex-end;
}
.kol_tab li{
    list-style: none;
}
#ltab {
    margin:0 auto;
    margin-top:60px;
    display: flex;
    justify-content:space-between;
    width:1200px;
    clear: both;
}
#ltab div {
    width:100%;
    display: flex;
    align-items: flex-end;
    display:none;
}
#ltab p{
    width:100%;
    height:160px;
    display: flex;
    justify-content: space-between;
}
#ltab div#ltab_0 {
    display:block;
}
.kol_tab p{
    text-align:center;
    color:#2E2F36;
    font-weight:600;
}
.tabBar{
    position: relative;
    display: flex;
    margin:0 auto;
    width:1200px;
    height:6px;
    background:rgba(37,39,42,.1);
    opacity:0;
}
.selected{
    position: absolute;
    top:0;
    left:0;
    width:300px;
    height:6px;
    background: #5669E0;
    transition: all 5 ease;
    -webkit-transition: all .5s ease;
}
#ltab img{
    opacity: 0;
}
#ltab_0 .font-ol{
    height:195px;
}
.hw-panel_3_tab{
    width:100%;
    height:195px;
    display: flex;
    justify-content: space-between;
}
.commonAni2.kol_tab,.commonAni2.tabBar{
    animation: fadeliftup 1s .3s ease both;
}
.commonAni2 p img:nth-child(1){
    animation: fadeliftup 1s .4s ease both;
}
.commonAni2 p img:nth-child(2){
    animation: fadeliftup 1s .7s ease both;
}
.commonAni2 p img:nth-child(3){
    animation: fadeliftup 1s .8s ease both;
}
.commonAni2 p img:nth-child(4){
    animation: fadeliftup 1s .9s ease both;
}
.commonAni2 p img:nth-child(5){
    animation: fadeliftup 1s 1s ease both;
}
.commonAni2 p img:nth-child(6){
    animation: fadeliftup 1.5s 1.1s ease both;
}
.commonAni2 p img:nth-child(7){
    animation: fadeliftup 1.5s 1.2s ease both;
}

.hw-panel_4{
    padding:45px 0 63px 0;
    height: 866px;
    background:#25272A;
    color:#fff;
    box-sizing: border-box;
}
.hw-panel_5{
    padding:106px 0 116px 0;
    margin:0 auto;
    width:1200px;
    color: #2E2F36;

}
.othersLogoCon{
    margin-top: 99px;
    /* padding:0 119px; */
}
.othersLogoCon ul li img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width:175px;
}

.bgMask{
    width: 330px;
    height: 330px;
    background: #102988;
    margin: -260px 0 0 -260px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    z-index: 6;
    transition: all 100ms 0s ease;
    /* -webkit-backface-visibility: hidden;
    backface-visibility: hidden; */
}
.name{
    width: 100%;
    display: inline-block;
    font-size: 45px;
    color: #fff;
    font-weight:bold;
    position: absolute;
    z-index: 6;
    line-height: 1.4;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: all 100ms 0ms ease;
    letter-spacing: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.commonAni2 .groups_logo{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* height:606px; */
    animation: fadeliftup .8s .3s ease both;
}
.groups_logo{
    opacity:0;
    overflow: hidden;
}
.groups_logo li {
    float: left;
    width:192px;
    height:192px;
    border: 8px solid rgba(50,73,188,.38);
    border-radius: 50%;
    text-align: center;
    /* margin: 0 15px 40px 0; */
    position: relative;
    overflow: hidden;
    box-sizing:border-box;
}
.groups_logo li:hover .bgMask {
    visibility: visible;
    margin: -40px 0 0 -40px;
    transition: all 250ms 0s ease; }
  .groups_logo li:hover .name {
    opacity: 1;
    filter: alpha(opacity=100);
    transition: all 250ms 0s ease; }
.grid{
    position: relative;
    /* display: flex; */
    margin:0 auto;
    width:1200px;
    margin-top:79px;
    /* flex-wrap: wrap;
    justify-content: space-between; */
} 
.grid__item a{
    display: block;
    width: 100%;
    height:100%;
    overflow: hidden;
    cursor: default;
}
.grid__item a span,.grid__item p{
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    font-size: 26px;
    color:#fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:9;
}
.grid__item p{
    top:23px;
    font-size:95px;
    z-index: 8;
    opacity:.12;
    line-height: 34px;
}
.grid__item:nth-child(4) p{
    font-size:65px;
}
.grid__item:nth-child(7) p,.grid__item:nth-child(8) p{
    font-size: 60px;
}
.grid__item:nth-child(6) p{
    font-size:80px;
}
.grid__item{
    position:absolute;
    overflow: hidden;
    opacity: 0;
}  
.grid__item:nth-child(1){
    width:428px;
    height:317px;
    top:0;
    left:0;
}
.grid__item:nth-child(2){
    top:0;
    left:433px;
}
.grid__item:nth-child(3){
    top:0;
    left:738px;
}
.grid__item:nth-child(4){
    top:322px;
    left:0;
}
.grid__item:nth-child(5){
    top:322px;
    left:256px;
}
.grid__item:nth-child(6){
    top:184px;
    left:737px;
}
.grid__item:nth-child(7){
    top:184px;
    left:960px;
}
.grid__item:nth-child(8){
    top:357px;
    left:960px;
}
.grid__reveal{
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    opacity: 0;
    transition: all .4s ease;
}
.grid__reveal1,.grid__reveal2{
    top:320px;
    height:317px;
}
.grid__reveal3{
    top:185px;
    height: 179px;
}
.grid__reveal4{
    top:255px;
    height:251px;
}
.grid__reveal5{
    top:183px;
    height:178px;
}
.grid__reveal6{
    top:320px;
    height:317px;
}
.grid__reveal7{
    top:168px;
    height:168px;
}
.grid__reveal8{
    top:147px;
    height:144px;
}
.grid__reveal::before{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(38,61,177,.9);
    content: "";
}
.grid__item:hover .grid__reveal{
    top:0;
    opacity: 1;
}
.commonAni2 .grid__item:nth-child(1){
    animation: fadeliftup .8s .1s ease both;
}
.commonAni2 .grid__item:nth-child(2){
    animation: fadeliftup .8s .3s ease both;
}
.commonAni2 .grid__item:nth-child(3){
    animation: fadeliftup .8s .5s ease both;
}
.commonAni2 .grid__item:nth-child(4){
    animation: fadeliftup .8s .7s ease both;
}
.commonAni2 .grid__item:nth-child(5){
    animation: fadeliftup .8s .9s ease both;
}
.commonAni2 .grid__item:nth-child(6){
    animation: fadeliftup .8s 1.2s ease both;
}
.commonAni2 .grid__item:nth-child(7){
    animation: fadeliftup .8s 1.4s ease both;
}
.commonAni2 .grid__item:nth-child(8){
    animation: fadeliftup .8s 1.6s ease both;
}

#hwResources .hw-panel_2{
    display: flex;
    flex-direction:column;
    align-items:center;
    background: linear-gradient(120deg, #1F2350, #2A3377);
}
#hwResources .containers{
    margin-left:-14px;
    margin-top:-13px;
    display: flex;
    flex-wrap: wrap;
    /* justify-content:center; */
    width: 1216px;
}
#hwResources .containers dl{
    margin-left:14px;
    margin-top:13px;
    padding:60px 14px 40px 14px;
    width:290px;
    /* height: 360px; */
    background: rgba(255,255,255,.06);
    border-radius: 10px;
    box-sizing:border-box;
}
#hwResources .containers dl dt{
    margin:0 auto;
    width:150px;
    height:150px;
    margin-bottom:30px;
}
#hwResources .containers dl dt img{
    width:100%;
}
#hwResources .containers dl dd h3{
    margin-bottom:30px;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 16px;
    text-align:center;
}
#hwResources .containers dl dd p{
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,.7);
    line-height: 22px;
    text-align:center;
}