* {
    margin: 0px;
    padding:  0px;
}

body {
    width: 100%;
    /* display: flex; */

    /* margin: 10px; */
}

/* body > div.page {
    flex-grow: 0;
} */

div.header{
    /* margin-top: 20px; */
    display: flex;
    flex-direction: column;
    background-image: url(../assets/topbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

div.header > .top {
    display: flex;
    flex-direction: row;
    align-items: center;
}
div.top {
    margin-top: 20px;
}
div.top .title {
    margin-left: 20px;
    margin-right: auto;
}

div.top .nav {
    margin-right: 20px;
}

div.header > .abstract  {
    margin: auto;
    margin-top: 80px;
    margin-bottom: 20px;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
}

.abstract_title {
    /* background-color: bisque; */
    margin: auto;
    justify-content: center;
}

.abstract_desc {
    margin: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.abstract_desc > div {
    
    justify-content: center;
    margin-left: 10px;
    margin-top: 10px;

}

div.project_case {

    background: url(../assets/AD0Ik9fwBRACGAAg0ZfewgUo4Z2_ywIwgA84mAs.jpg);
}

div.case_f_title {
    display: flex;
    flex-direction: column;
    /* margin-top: 20px; */
    padding-top: 20px;
    /* background-color: aqua; */
}

div.case_f_title > div.title {
    margin-left: 30px;
}

div.case_f_title > div.case_box {
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    margin-right: 20px;
    margin-top:20px;
    margin-bottom: 20px;
    /* overflow: hidden; */
    /* background-color: blueviolet; */
}

div.case_box > div.case_item {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    flex:1;
    display: flex;
    flex-direction: column;
    /* background-color: aqua; */

    /* justify-content: center; */
    /* align-content: flex-start;   这2个属性都是作用在父元素上的*/ 

    /* overflow: auto; 当子元素高度超过父元素最大高度时出现滚动条 */
    /* max-height: 70px; */
}

div.case_item > img {
    /* flex:0 0 90px; */
    flex-grow: 0;
    width: 30%;
    aspect-ratio: 1/1;
    
    margin: auto;
}

.case_item > div {
    margin: auto;
    margin-top: 10px;
    /* background-color: aqua; */
    flex-grow: 1;/*1,保证该元素自适应高度  flex-grow: 0;保证该元素高度在页面尺寸发生改变时，高度不改变*/
}

div.case_s_title {
    /* flex: 1 1 auto; */
    flex-grow: 0;/*保证该元素高度在页面尺寸发生改变时，高度不改变*/
}

div.case_item_desc{
    /* flex: 1 1 auto; */
    flex-grow: 1;/*保证该元素自适应高度*/
    margin-top: 5px;
}




/* footer部分 */

div.footer {
    background: url(../assets/AD0Ik9fwBRACGAAghqPewgUoy868nQcwgA840QU.jpg);
    /* background-color: aquamarine; */
}

div.footer_top {
    /* background-color: aqua; */
    margin: 0px 10px 10px 10px;
    padding-top: 10px;
    
}

div.footer_top >div {
    margin: 15px;
}

div.footer_center {
    display: grid;
    /* place-items: center; 让子项居中对齐*/
    grid-template-columns: 1fr 1fr;
    /* grid-template-columns: repeat(auto-fill,300px); 子项宽固定，列随着父视图宽度动态变化 */
    /* grid-template-rows: 1fr 1fr; */

    row-gap: 20px;
    column-gap: 20px;
    margin-top: 40px;
}

div.footer_center_item {
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

div.footer_center_item  .desc {
    margin-top: 5px;
}

div.footer_center_item > div > img {
    aspect-ratio: 1/1;
    width: 20px;
    margin-right: 10px;

}



hr.line {
    border: none;
    border-bottom: 2px solid gray;
    margin: 10px auto;
}

div.icp {
    padding-bottom: 10px;
    margin-left: 20px;
}







/* 字体 */

a{ 
    text-decoration: none;
    color:white;
}
a:hover{ 
    color:blue;
}

/* a{ color:#00F}
a:hover{ color:#458} */

div.nav > a {
    font-size:20px;
	font-family: SimHei;
	font-weight: bold;
	font-style: italic;
    margin: 0px 5px;
}

div.top > div.title {
    font-size:33px;
    font-family: SimHei;
    font-weight: bold;
    color:white;
    font-style: italic;
}

div.abstract_title {
    text-align: center;
     font-size: 55px; 
     font-family: fontface__幼圆__7__459005627440;
     color: white;
}

div.abstract_desc {
    font-size: 19px;
    /* text-align: center;  */
    color: white;margin: 
    5px auto;

    
}


div.case_f_title > div.title {

    height: 30px;font-size: 22px;color: rgb(40, 40, 40);
    
}

div.case_s_title {
text-align: center;
    font-size: 18px; 
    color: rgb(40, 40, 40);
}

div.case_item_desc {
color: rgb(122, 122, 122);font-size: 15px;text-align: center;
}


div.footer_title{height: 40px; color: white;font-size: 30px;margin-top: 80px;}
div.footer_desc{color:white; margin: 20px auto;}
.footer_center .title{color: white;text-align: left;}
.footer_center .desc{color:  rgb(122, 122, 122);text-align: left;font-size: 14px;}
div.icp{color: white;}


















@media (max-width:768px) {
    div.header > .top {
        flex-direction: column;
        
    }


    div.top .title {
        margin: auto;
    }

    div.top .nav {
        /* margin-right: auto;
        margin-top: 10px;
        margin-left: 10px; */

        margin: 10px auto;
    }

    div.header > .abstract {
        margin-left: 10px;
        margin-right: 10px;
    }

    div.abstract_desc {
        font-size: 16px;
        /* text-align: center;  */
        color: white;margin: 
        5px auto;
    
        
    }




    div.case_f_title > div.case_box {
        flex-direction: column;
    }


    div.case_box > div.case_item {
        flex-direction: row;
        align-content: flex-start;
        justify-content: flex-start;
    }

    div.case_item > img {
        margin-top: 0px;
    }

    div.case_s_title {
        text-align: left;
    }

    div.case_item_desc {
        text-align: left;
    }


    .case_item > div {
    
        margin-left: 10px;
        margin-top: 0px;
    }
    

}