style.css

*{
    margin: 0;
    padding: 0;
}

/* button[disabled] {
    background-color: #cccccc !important;
    color: #8d8d88 !important;
    border-color: #cccccc !important;
    cursor: not-allowed;
} */

button:disabled {
    background-color: #cccccc !important;
    color: #8d8d88 !important;
    border-color: #cccccc !important;
    cursor: not-allowed;
}

.w{
    width: 1300px;
    margin: auto;
}

.header{
    height: 42px;
    /* background-color: white; */
    margin: 30px auto;
    /* border: solid 1px black; */
}

.logo{
    float: left;
    width: 198px;
    height: 42px;
    background-color: #5F9EA0;
    line-height: 42px;
    text-align: center;
    
}

.logo:hover {
    /* 
        左右 上下 模糊程度 阴影大小 颜色 
    */
    box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 20%);
    /* 
        左右 上下 模糊程度 颜色 
    */
    text-shadow: 5px 5px 10px rgb(255 255 255 / 20%);
}


li {
    /* display: inline-block;     一般不用元素属性转换的方法来调节行内显示，因为元素之间的具体距离无法控制，通常使用浮动来进行调整布局，使其同行显示*/
    list-style: none;
    margin: 0 15px;

}

a{
    text-decoration: none;
}

.nav{
    float: left;
    margin-left: 60px;
}

.nav ul li {
    float: left;
    /* margin-right: 10px; */
    position: relative;
}

.nav ul li a {
    display: block;
    /* a 是行内元素，不能直接进行指定高度和宽度，需要进行转换后再进行指定宽度和高度 */
    height: 42px;
    padding: 0 10px;     
    /* 此处仅指定高度，不指定宽度，使用padding将小盒子撑开 */
    line-height: 42px;
    /* 行高等于盒子高度，使文字垂直居中 */
    font-size: 18px;
    color: #050505;
    /* box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.08); */
    /* border-left: 1px solid #ccc ; */
    
}

.nav ul li::after {
    content: "";
    display: inline-block;
    height: 18px;
    border-right: 1px solid rgb(211, 211, 211);
    position: absolute;
    top: 50%;
    margin-top: -9px;
    right: -15px;
}
.nav ul li:nth-last-child(1)::after {
    content: none
}


.nav ul li a:hover{
    background-color: #5F9EA0;
}

.search{
    float: left;
    width: 312px;
    height: 42px;
    /* background-color: #5F9EA0; */
    margin-left: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search input {
    width: 210px;
    height: 32px;
    border: 2px solid #5F9EA0;
    /* color: gray; */
    font-size: 14px;
    padding-left: 15px;
    outline: none;
}

.search input::placeholder {
    color: #5F9EA0;
}

.search button{
    width: 66px;
    height: 32px;
    color: #fff;
    background-color: #5F9EA0;
    border: 2px solid #5F9EA0;
    box-sizing: content-box;
}

body{
    background-color: #f3f5f7;
}

.banner{
    height: 420px;
    background-color: #5F9EA0;
}
.banner .w {
    height: 420px;
    background: url(gene.jpg) no-repeat top center;
}

.subnav{
    width: 190px;
    height: 420px;
    background: rgba(0, 0, 0 ,0.3);
}

.subnav ul li {
    height: 78px;
    font-size: 18px;
}
.subnav ul li a {
    color: white;
} 

.subnav ul li a span {
    float: right;
}

.subnav ul li a:hover {
    color: #ff6700;

}

.box{
    width: 1300px;
    height: 322px;
}



.box .box-hd {
    height: 66px;
    line-height: 66px;
    /* background-color: #5F9EA0; */
    /* text-align: center; */
}
.box .box-bd .photo {
    float: left;
    
    width: 188px;
    height: 199px;

}
.box .box-bd .photo img{
    width: 188px;
    height: 199px;
}

.box .box-bd .wenben {
    float: left;
    width: 888px;
    margin-left: 36px;
    font-size: 18px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.jiewei {

    background-color:  #5F9EA0 ;
    height: 99px;
    
}

.jiewei ul li {
    height: 50px;
    line-height: 50px;
    
}
.jiewei ul li a {
    font-size: 16px;
    color: black;
}