*{box-sizing: border-box;}
html{font-size: 10px;} /*跟轮播图有关*/
body{margin: 0px; font-size: 16px;}  /* 设置默认的字体为16px */
button:focus{outline: none;}
a{text-decoration: none; color: black;} /* 颜色设置 */
ul{margin: 0; padding: 0; list-style: none;}
img{display: block;}

.l{float: left;}
.r{float: right;}
.clear::after{content: '';display: block; clear: both;}
/* 以上是初始化部分 */

/* 以下是header部分 */
nav{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
.navbar-header{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    margin-left: 5%; /* 左边的间距 */
    margin-right: 5%; /* 右边的间距 */
}

.navbar-header img{height: 100px;}  /* 限定图片的大小,这样也限制了nav的高度*/

.navbar-toggle{
    background-color: white;
    border: none;
    display: none;
}

.navbar-toggle span{
    display: block; /* 上下排列 */
    width: 30px; /* 线段长度 */
    margin: 4px 0; /* 间距 */
    border-bottom: 4px solid black; /* 线段的宽度和颜色 */
}

.navbar-nav-container{
    margin-right: 5%; /* 设置与页面右边的距离 */
    font-weight: bolder; /* 字体加粗 */
}

.navbar-nav > li  a{
    display: block;
    padding: 0 0.5em; /* 设置间距 */
    height: 100px; /* 与图片高度一致 */
    line-height: 100px;
}
.navbar-nav > li  a:hover{
    background-color: rgb(0,133,88);
    color: white;
}


/* 子菜单 */
.navbar-nav .dropdown{
    position: relative;
    z-index: 10;  /* 在上面显示 */
}
.navbar-nav .dropdown .navbar-subnav{
    position: absolute;
    background-color: black;
    white-space: nowrap; /* 文字不换行 */
    display: none; /* 鼠标未放在上面时不显示 */
}
.navbar-nav .dropdown .navbar-subnav a{ /* 定义高度和颜色,文字居中 */
    height: 30px;
    line-height: 30px;
    color: white;
}
.navbar-nav .dropdown:hover .navbar-subnav{
    display: block;
}
.navbar-nav .dropdown:hover >a{
    background-color: rgb(0,133,88);
    color: white;
}
/* 子菜单 */

.active{
    color: rgb(128,128,128);
}

.navbar-nav .dropdown .navbar-subnav .active{
    color: rgb(128,128,128);
}

@media (max-width:768px){
    nav{display: block;}
    .navbar-nav-container{display: none; margin-right: 0;} /* 先关闭导航栏 */
    .navbar-toggle{display: block;}  /* 显示开关 */

    .navbar-nav{
        background-color: rgb(0,133,88);
    }
    .navbar-nav li{
        float: none;/*  去浮动 */
        border-bottom: 1px dotted rgb(0,159,105);
    }
    .navbar-nav li a{  /* 更改高度 */
        height: 30px;
        line-height: 30px;
    }

    /* 子菜单的设置 */
    .navbar-nav .dropdown{
        position: static; /*  改为默认的情况 */
    }
    .navbar-nav .dropdown .navbar-subnav{
        display: block;
        position: static; /*  改为默认的情况 */
        background-color: rgb(0,133,88);
    }
    .navbar-nav .dropdown .navbar-subnav a{
        margin-top: 1px; /*  是为了重叠 */
        color: black;
    }
    .navbar-nav .dropdown .navbar-subnav a:hover{
        color: white;
    }
    .navbar-nav .dropdown .navbar-subnav li{
        padding-left: 2em;
    }
    .navbar-nav .dropdown .navbar-subnav li:first-of-type{
        border-top: 1px dotted rgb(0,159,105);
    }
    .navbar-nav .dropdown .navbar-subnav li:last-of-type{
        border-bottom: none;
    }
     /* 子菜单的设置 */
}

/* 以上是header部分 */

/* 以下为轮播图的rem设置，这部分是独立的 */
/* 下面是电脑端的设计 */
@media (min-width: 576px) {
    html { font-size: 12.5px; } /* 比原来大1.25 */
}
@media (min-width: 768px) {
    html { font-size: 15px; } /* 比原来大1.5 */
}
@media (min-width: 992px) {
    html { font-size: 17.5px; } /* 比原来大1.75 */
}
@media (min-width: 1200px) {
    html { font-size: 20px; } /* 比原来大2 , 如果是设计电脑端的网页则以这个为参考, 1rem=20px*/  
}
/* 以上为轮播图的rem设置 */

/* 以下是footer部分 */
#footerContainer{
    background-color: rgb(0,15,42);
    padding: 0 10%;
    padding-top: 2em;
    padding-bottom: 1em;
    font-size: 0.8em;
    line-height: 1.8em;
    text-align: center;
}
#footerContainer a{
    color: white;
    font-weight: bold;
}
#footerContainer .botnav li{
    display: inline-block;
}
#footerContainer hr{
    border-color: #a0a0a0;
    margin-top: 1em;
    margin-bottom: 0.5em;
}
#footerContainer .copyright{
    color: #a0a0a0;
    margin-bottom: 1em;
}

#footerContainer a:hover{
    text-decoration: underline;
}
/* 以上是footer部分 */


/* 以下是箭头部分 */
#arrow{
    width: 40px;height: 40px;
    padding: 4px;
    position: fixed;
    right: 40px;
    bottom: 40px;
    border: 1px solid green;
    background-color: #078b6a65;
    border-radius: 50%;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
#arrow:hover{
    background-color: green;
    color:white
}
/* 以上是箭头部分 */