#shap_menu{
position: relative;
width: 100%;
height: 45px;
background: #144552;
top:40px;

}
.shap_menu{
    width: 1170px;
    height: 100%;
    margin: 0 auto;
    
 }
 .shap_menu>ul{
        width: 100%;
        height: 100%;
        
        }
.shap_menu>ul>li{
     height: 100%;
      

    float: right;

}
.shap_menu>ul>li>a{
    margin-left:30px;
    color:#f1fffa;
    line-height: 45px;
    font-size: 18px;
    
 }
 .shap_menu>ul>li>a:hover{
        color:#8bbbb9;

        
        }

 .shap_menu>ul>li>ul{
         position: absolute;
         width: 100%;
         right: 0;
         top: 100%;
         background: #fafafa;
         z-index: 98;
         display: flex;
         flex-flow: wrap;
         justify-content: space-around;
            border-bottom: 3px solid #8bbbb9;
            box-shadow: 0 0 30px #144552;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            

         }
         
 .shap_menu>ul>li>ul>li>a{
    font-size: 16px;
    line-height: 16px;
  

    }
    .shap_menu .title{
    margin-top: 20px;
    color: #3a6463;
     margin : 0 auto;
     text-align: center;
    font-size: 16px;
}
.shap_menu>ul>li>ul>li>a>img{
border-radius: 10px;

}

.shap_menu>ul>li>ul>li:hover>a>img{
box-shadow: 2px 2px 15px #144552;    
    }

.shap_menu>ul>li>ul>li:hover>.title{
    color: #0a252c;
font-size: 18px;

}
.shap_menu>ul>li:hover>ul{
    
       visibility: visible;
       opacity: 100%;
     
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;

    }