/* 整体基础样式 */

html{
	/* 设置背景图像是否固定或者随着页面的其余部分滚动 */
    background-attachment: fixed;
	/* 按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放 */
    background-size: cover;
}


/* 导航栏 */

/* 导航栏背景 */
.top-bar{
	/* 高度 */
    height: 70px;
	/* 宽度 */
    width: 100%;
	/* 弹性布局 */
    display: flex;
	/* 在弹性盒对象的 <div> 元素中的各项周围留有空白 */
    justify-content: space-around;
	/* 背景颜色 */
    background-color: #920000;
	/* 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动： */
    position: fixed;
	/* 设置元素的堆叠顺序-导航栏居上 */
    z-index: 999;
	/* 导航栏距离顶部距离 */
	top:0;
}

/* logo样式 */
.logo img{
	/* 高度 */
    height: 50px;
	/* 宽度 */
    width: 309px;
	/* 设置元素的上外边距。 */
    margin-top: 10px;
}

/* 无序列表样式 */
.nav ul{
	/* 弹性布局 */
    display: flex;
	margin-top: 22px;
}

/* 定义列表项目标签 */
.nav li{
	/* 宽度 */
    width: 100px;
	/* 文本居中 */
    text-align: center;
}

/* 超链接样式 */
.nav a{
	/* 字体颜色 */
    color: white;
	/* 字体行高 */
    line-height: 70px;
	/* 字体大小 */
    font-size: 18px;
	/* 字体粗细 */
    font-weight: bold;
}

.nav li:hover{
	/* 背景颜色 */
    background-color: #C81E25;
	/* 鼠标指针放到 div 元素上的变化 */
    transition: 0.4s all;
}

/* 版权栏 */
.copyright{
	/* 宽度 */
    width: 100%;
	/* 高度 */
    height: 350px;
	/* 设置元素的上外边距 */
    margin-top: 35px;
	/* 背景颜色 */
    background-color: rgba(0, 0, 0, 0.767);
	/* 生成相对定位的元素，相对于其正常位置进行定位。 */
    position: relative;
}

/* 版权栏内部文字样式 */
.frind-link{
	/* 生成相对定位的元素，相对于其正常位置进行定位。 */
    position: relative;
	/* 距离顶部距离 */
    top:20%;
	/* 宽度 */
    width: 70%;
	/* 外边距默认 */
    margin:0 auto;
}

/* 版权栏内部文字样式 */
.frind-link ul{
	/* 弹性布局 */
    display: flex;
	/* 在弹性盒对象的 <div> 元素中的各项周围留有空白 */
    justify-content: space-between;
}

.frind-link li{
    /* 设置竖向排列文字 */
    writing-mode: tb-rl;
}

.frind-link a{
	/* 字体颜色 */
    color: gray;
	/* 字体大小 */
    font-size: 20px;
}

.frind-link a:hover{
	/* 字体颜色 */
    color: white;
}

/* 版权栏下方图片样式 */
.CPC-bottom-flag img{
	/* 高度 */
    height: 100px;
	/* 宽度 */
    width: 100px;
	/* 绝对定位 */
    position: absolute;
	/* 规定元素的底部边缘。 */
    bottom: 10%;
	/* 左距离 */
    left: 45%;
}

/* 版权所有文字样式 */
.copyright-description{
	/* 绝对定位 */
    position: absolute;
	/* 规定元素的底部边缘 */
    bottom: 10px;
	/* 左距离 */
    left: 30%;
	/* 字体大小 */
    font-size: 15px;
	/* 字体粗细 */
    font-weight: bold;
	/* 字体颜色 */
    color: white;
}

a{
	/* 过度样式 */
    transition:0.2s all;
}
