*{
    margin: 0;
    padding: 0;
}
body {
    /*网页背景色*/
    background: #d2f8fd;
}
ol,ul,li{
    /*列表标签清除样式*/
    list-style-type: none;
}
a{
    /*a连接设置样式*/
    font-size: 1.1em;
    font-weight: bold;
    color: rgb(53, 144, 172);
    text-decoration: none;
}
nav{
    width: 100%;
    /*设置导航栏的高度*/
    height: 50px;
    /*居中*/
    margin: 0 auto;
    /*设置弹性盒*/
    display: flex;
    /*调整弹性盒主轴对齐方向——space-around距离环绕、space-between两端对其、flex-start默认样式、center居中*/
    /*这里实现的是img 和ul之间的等间距分隔（距离环绕）*/
    justify-content: center;
    /*设置导航栏背景色*/
    background: white;
}
nav>img{
    /*导航栏图片设置宽高*/
    height: 50px;
    width: 225px;
}
nav>ul{
    /*设置导航栏列表宽高*/
    width: 800px;
    height: 50px;
    /*设置字体行高——实现字体的垂直居中*/
    line-height: 50px;
    /*给列表设置弹盒*/
    display: flex;
    /*侧轴居中——实现li的垂直居中、但是下面设置了li的高度为50px，所以这里是否设置效果都不会改变*/
    align-items: center;
    /*调整弹性盒主轴对齐方向——space-around距离环绕、space-between两端对其、flex-start默认样式、center居中*/
    /*这里实现的是ul列表中的li的等间距分隔（距离环绕）*/
    justify-content: space-around;
}
nav>ul>li{
    /*设置li高度——上面提到此处为达到的效果和上面有所重复，可选择省略*/
    height: 50px;
    /*因为存在二级菜单跃出ul的界限 不设置会使二级菜单鼠标上去后 鼠标作用范围跑到轮播图部分 故提升层级*/
    z-index: 1  ;
}
nav>ul>li:nth-child(3){
    /*给ul中的第三个li设置样式——因为之前统一设置了a连接的样式，
    而此处为二级菜单没有用到a连接所以单独设置样式*/

    /*li中字体的水平居中*/
    text-align: center;
    /*设置字体大小*/
    font-size: 1.1em;
    /*设置字体粗细*/
    font-weight: bold;
    /*字体颜色*/
    color: rgb(53, 144, 172);
    /*因为这里不是a连接所以默认样式不是鼠标小手而设置鼠标小手*/
    cursor: pointer;
}
nav>ul>li:nth-child(3)>.hidden{
    /*设置二级菜单的基本样式*/
    /*将初始的高度设置为0，以达到隐藏的目的，在鼠标经过之后在重新设置高度*/
    height: 0;
    /*设置溢出隐藏*/
    overflow: hidden;
    /*设置动画——过渡属性*/
    transition: all 0.5s linear;
    /*设置二级菜单的背景色,rgba的第四位为透明度百分比*/
    background: rgba(255, 255, 255, 0.3);
    /*test*/
    /*position: absolute;*/
}
nav>ul>li:nth-child(3)>.hidden>li{
    /*设置ul（hidden）列表中li的高度*/
    height: 45px;
}
nav>ul>li:nth-child(3):hover>.hidden{
    /*设置ul（hidden）列表的高度——（45*6）*/
    height: 270px;
}
nav>ul>li:nth-child(3)>ul>li:hover{
    /*设置ul(hidden)中li在鼠标经过之后的背景色*/
    background: rgba(0,0,0,0.75);
}

/*轮播图样式部分*/
section{
    /*轮播图盒子设置宽高*/
    width: 1300px;
    height: 400px;
    /*居中*/
    margin: 0 auto;
}
section>ul{
    /*设置轮播图图片集盒子的宽高以及相对定位*/
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    perspective:4000px;
}
section>ul>li{
    /*设置单个图片盒子的宽高*/
    width: 600px;
    height: 300px;
    /*设置绝对定位——水平垂直居中于ul*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -300px;
    /*给盒子设置圆角*/
    border-radius: 20px;
    overflow: hidden;
    /*过渡*/
    transition: all 0.5s linear;
    cursor: pointer;
}
section>ul>li>img{
    width: 100%;
    height: 100%;
}



/*mian*/
main{
    width: 1300px;
    margin: 0 auto;
    background: #f2f2f2;
}
/*top*/
main>.top{
    width: 80%;
    margin: 0 auto;
    height: 250px;
}
main>.top>ul{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: -25px;
}
main>.top>ul>li{
    width: 30%;
    height: 100%;
    background: #fdfdfd;
    border-radius: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
main>.top>ul>li>span{
    height: 50px;
    width: 50px;
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    color: #27b3c6;
}
main>.top>ul>li>h4{
    color: #8c7e82;
    cursor: default;
}
main>.top>ul>li>p{
    height: 40%;
    width: 80%;
    text-align: center;
    color: #bfbfbf;
    cursor: default;
}
/*second*/
main>.second{
    width: 80%;
    height: 550px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
main>.second>h4{
    border-left: solid 10px #2cc3dc;
    color: #353535;
    text-indent: 1em;
    cursor: default;
    font-size: 24px;
}
main>.second>div{
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-radius: 20px;
    overflow: hidden;
}
main>.second>div>img{
    width:25%;
    height: 100%;
}
main>.second>div>div{
    width: 75%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
main>.second>div>div>ul{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #d2f8fd;
}
main>.second>div>div>ul>li{
    height: 25%;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 30px;
    /*border: 3px dashed #2cc3dc;*/
    /*margin-right: 30px;*/
    /*border-radius: 20px;*/
}
main>.second>div>div>ul>li>p{
    /*text-indent: 2em;*/
    color: black;
    font-size: 20px;
    /*margin-bottom: 10px;*/
    /*font-weight: bold;*/
    font-style: italic;
    cursor: default;
}
main>.second>div>div>ul>li>h4{
    color: #534f4f;
    text-align: right;
    cursor: default;
}
/*last*/
main>.last{
    width: 1300px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0 auto;
}
main>.last>h4{
    width: 80%;
    border-left: solid 10px #2cc3dc;
    color: #353535;
    text-indent: 1em;
    cursor: default;
    margin: 0 auto;
    font-size: 24px;
}
main>.last>ul{
    width: 80%;
    height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
main>.last>ul>li{
    width: 250px;
    height: 250px;
}
main>.last>ul>li>a>img{
    width: 100%;
    height: 100%;
}
main>.last>ul>li>a>img:hover{
    opacity: 0.6;
}
/*footer*/
footer{
    height: 150px;
    width: 1300px;
    background: white;
    margin: 0 auto;
    display: flex; 
    align-items: center;
    justify-content: space-around;
}
footer>img{
    width: 300px;
    height: 50px;
}