/*一、1280分辨率以上（大于1200px）*/
@media screen and (min-width:1200px)
{
    body { 
        width: 1100px!important; /* !important覆盖优先级，*/
        margin-left:100px;
        margin-right:100px;
        /*column-count:2;*/ /* 以两列显示内容 */
    }
    *{
        padding:0; /* 修改默认填充为0--指框内 */
        margin:0; /* 修改默认边距0--指框外 */
    }
    /*右悬浮开始*/
    .youxuanfu{
        position:fixed; /* 固定位置 */
        top:50%; /* 距离上方 */
        right:90px; /* 距离右边 */
        display:inline-block; /* 生成块，并做行内元素 */
    }
    
    .youxuanfu img{
        height:40px; /* 高度*/
        width:auto; /* 宽度 */
        opacity:0.5; /* 50%透明度 */
    }
    
    .youxuanfu:hover img{ /* 当鼠标滑过youxuanfu时，图片时的状态转换 */
        height:50px; /* 高度 */
        width:auto; /* 宽度 */
        opacity:0.9; /* 透明度 */
    }
    
    .youxuanfucanggui{
        display:none; /* 该模块不显示 */
        float:left; /* 左面漂浮 */
        left:-120px; /* 距本框左侧xx距离 */
        top:-200px; /* 距本框顶部xx距离 */
        justify-content:flex-start; /* 排列方式，从首行开始排列 */
        position:absolute; /* 生成绝对位置元素配合父元素fixed或absolute使用 */
        background-color:#f9f9f9; /* 背景色*/
        box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); /* 设置阴影 */
        padding:12px 16px; /* 上和下的填充量不能有负值 */
        opacity:0.9;
    }
    
    .youxuanfucanggui img{
        height:30px; /* 高度 */
        width:auto; /* 宽度 */
        opacity:0.8; /* 透明度*/
    }
    
    .youxuanfu:hover .youxuanfucanggui{ /*当有鼠标滑过youxuanfu时，youxuanfucanggui转换状态*/
        display:block; /* 生成盒子--（将隐藏的元素显示） */
    }
    /*右悬浮结束*/
    /*开始左悬浮目录*/
    .zhuocemulu{
        /*
        display:-webkit-box;
        -webkit-line-clamp:3;*/ /* 文本截断成两行 */
        /*-webkit-box-orient:vertical;
        */
        overflow:hidden; /* 内容溢出的处理 visible呈现在框外 hidden修剪后不可见 scroll一定会修剪，并出现滚动条 auto如果内容被修剪出滚动条 inherit继承父属性*/
        max-height:3; /* 设置段落的最低高度 默认0，或对应块级%，inherit继承父级属性*/
        width:7em;/*宽度7字符*/
        line-height:1.2em; /*行高1.2个字符*/
        transition: .50s max-height; /*过渡效果 以0.5秒的速度变换max-height段落高度*/
    }
    .btn{ /*按钮样式*/
        float:right; /*按钮位置*/
        /*margin-top:90%;*//*按钮离上边框的距离*/
        clear:both;/* 指定段落不允许浮动，left左侧不浮动,right右侧，both两侧，none允许两侧，inherit继承父级*/
    }
    .btn::after{ /* 在btn元素后面插入内容 */
        content:'展⬇开'  /* 配合：before前面和：after后面使用，用来插入内容，*/
    }
    .exp:checked+.zhuocemulu .btn::after{ /*checked选中紧挨着的zhuocemulu元素中 btn插入内容，+号为紧挨着的起作用，其他不起作用*/
        content:'收⬆起' /* 配合before前面和after后面使用插入内容*/
    }
    .zhuocemulu::before{ /* 在zhuocemulu元素前面插入内容*/
        content:'';/* 插入空白信息，等同于值none*/
        float:right; /* 右侧对齐*/
        height:calc(100% - 1.2em);/* calc（）计算元素100%高度减去1.2em的位置*/
    }
    .zhuocemulukuang{
        display:flex; /* 固定位置 */
        top:20%; /* 距上侧20%的距离 */
        left:10px; /* 据左侧10px */
        position:fixed; /* 生成盒子 */
        /*font-size:20px;*/ /* 设置字体大小 */
        background-color:#f9f9f9; /* 设置背景颜色 */
        opacity:0.7; /* 设置透明度 */
    }
    [line-clamp="1"]{ /* 当现实1行时，line-clamp显示的行数*/
        max-height:1.2em; /*高度*/
    }
    [line-clamp="2"]{ /*当显示2行时，*/
        max-height:2.4em; /* 高度*/
    }
    [line-clamp="3"]{ /*当显示3行时 */
        max-height:3.6em; /*高度*/
    }
    .exp{ 
        display:none; /* 块内元素不显示，*/
    }
    .exp:checked+.zhuocemulu{
        /*-webkit-line-clamp:9;*/ /*第一种方法设置段落的最大行数*/
        max-height:500px; /* 显示段落的最大高度*/
    }
    /*悬浮目录结束*/
}
  
/*二、1100分辨率（大于960px，小于1199px）*/
@media screen and (min-width: 960px) and (max-width: 1199px) 
{
    body{ 
        width: 960px;
        margin-left:100px;
        margin-right:100px;
    }
    *{
        padding:0; /* 修改默认填充为0--指框内 */
        margin:0; /* 修改默认边距0--指框外 */
    }
    /*右悬浮开始*/
    .youxuanfu{
        position:fixed; /* 固定位置 */
        top:50%; /* 距离上方 */
        right:90px; /* 距离右边 */
        display:inline-block; /* 生成块，并做行内元素 */
    }
    
    .youxuanfu img{
        height:40px; /* 高度*/
        width:auto; /* 宽度 */
        opacity:0.5; /* 50%透明度 */
    }
    
    .youxuanfu:hover img{ /* 当鼠标滑过youxuanfu时，图片时的状态转换 */
        height:50px; /* 高度 */
        width:auto; /* 宽度 */
        opacity:0.9; /* 透明度 */
    }
    
    .youxuanfucanggui{
        display:none; /* 该模块不显示 */
        float:left; /* 左面漂浮 */
        left:-120px; /* 距本框左侧xx距离 */
        top:-200px; /* 距本框顶部xx距离 */
        justify-content:flex-start; /* 排列方式，从首行开始排列 */
        position:absolute; /* 生成绝对位置元素配合父元素fixed或absolute使用 */
        background-color:#f9f9f9; /* 背景色*/
        box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); /* 设置阴影 */
        padding:12px 16px; /* 上和下的填充量不能有负值 */
        opacity:0.9;
    }
    
    .youxuanfucanggui img{
        height:30px; /* 高度 */
        width:auto; /* 宽度 */
        opacity:0.8; /* 透明度*/
    }
    
    .youxuanfu:hover .youxuanfucanggui{ /*当有鼠标滑过youxuanfu时，youxuanfucanggui转换状态*/
        display:block; /* 生成盒子--（将隐藏的元素显示） */
    }
    /*右悬浮结束*/
    /*开始左悬浮目录*/
    .zhuocemulu{
        /*
        display:-webkit-box;
        -webkit-line-clamp:3;*/ /* 文本截断成两行 */
        /*-webkit-box-orient:vertical;
        */
        overflow:hidden; /* 内容溢出的处理 visible呈现在框外 hidden修剪后不可见 scroll一定会修剪，并出现滚动条 auto如果内容被修剪出滚动条 inherit继承父属性*/
        max-height:3; /* 设置段落的最低高度 默认0，或对应块级%，inherit继承父级属性*/
        width:7em;/*宽度7字符*/
        line-height:1.2em; /*行高1.2个字符*/
        transition: .50s max-height; /*过渡效果 以0.5秒的速度变换max-height段落高度*/
    }
    .btn{ /*按钮样式*/
        float:right; /*按钮位置*/
        /*margin-top:90%;*//*按钮离上边框的距离*/
        clear:both;/* 指定段落不允许浮动，left左侧不浮动,right右侧，both两侧，none允许两侧，inherit继承父级*/
    }
    .btn::after{ /* 在btn元素后面插入内容 */
        content:'展⬇开'  /* 配合：before前面和：after后面使用，用来插入内容，*/
    }
    .exp:checked+.zhuocemulu .btn::after{ /*checked选中紧挨着的zhuocemulu元素中 btn插入内容，+号为紧挨着的起作用，其他不起作用*/
        content:'收⬆起' /* 配合before前面和after后面使用插入内容*/
    }
    .zhuocemulu::before{ /* 在zhuocemulu元素前面插入内容*/
        content:'';/* 插入空白信息，等同于值none*/
        float:right; /* 右侧对齐*/
        height:calc(100% - 1.2em);/* calc（）计算元素100%高度减去1.2em的位置*/
    }
    .zhuocemulukuang{
        display:flex; /* 固定位置 */
        top:20%; /* 距上侧20%的距离 */
        left:10px; /* 据左侧10px */
        position:fixed; /* 生成盒子 */
        /*font-size:20px;*/ /* 设置字体大小 */
        background-color:#f9f9f9; /* 设置背景颜色 */
        opacity:0.7; /* 设置透明度 */
    }
    [line-clamp="1"]{ /* 当现实1行时，line-clamp显示的行数*/
        max-height:1.2em; /*高度*/
    }
    [line-clamp="2"]{ /*当显示2行时，*/
        max-height:2.4em; /* 高度*/
    }
    [line-clamp="3"]{ /*当显示3行时 */
        max-height:3.6em; /*高度*/
    }
    .exp{ 
        display:none; /* 块内元素不显示，*/
    }
    .exp:checked+.zhuocemulu{
        /*-webkit-line-clamp:9;*/ /*第一种方法设置段落的最大行数*/
        max-height:500px; /* 显示段落的最大高度*/
    }
    /*悬浮目录结束*/
}
  
/*三、880分辨率（大于768px，小于959px）*/
@media screen and (min-width: 768px) and (max-width: 959px) 
{
    body{
        width: 700px;
        margin-left:100px;
        margin-right:100px;
    }
    *{
        padding:0; /* 修改默认填充为0--指框内 */
        margin:0; /* 修改默认边距0--指框外 */
    }
    /*右悬浮开始*/
    .youxuanfu{
        position:fixed; /* 固定位置 */
        top:50%; /* 距离上方 */
        right:90px; /* 距离右边 */
        display:inline-block; /* 生成块，并做行内元素 */
    }
    
    .youxuanfu img{
        height:40px; /* 高度*/
        width:auto; /* 宽度 */
        opacity:0.5; /* 50%透明度 */
    }
    
    .youxuanfu:hover img{ /* 当鼠标滑过youxuanfu时，图片时的状态转换 */
        height:50px; /* 高度 */
        width:auto; /* 宽度 */
        opacity:0.9; /* 透明度 */
    }
    
    .youxuanfucanggui{
        display:none; /* 该模块不显示 */
        float:left; /* 左面漂浮 */
        left:-120px; /* 距本框左侧xx距离 */
        top:-200px; /* 距本框顶部xx距离 */
        justify-content:flex-start; /* 排列方式，从首行开始排列 */
        position:absolute; /* 生成绝对位置元素配合父元素fixed或absolute使用 */
        background-color:#f9f9f9; /* 背景色*/
        box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); /* 设置阴影 */
        padding:12px 16px; /* 上和下的填充量不能有负值 */
        opacity:0.9;
    }
    
    .youxuanfucanggui img{
        height:30px; /* 高度 */
        width:auto; /* 宽度 */
        opacity:0.8; /* 透明度*/
    }
    
    .youxuanfu:hover .youxuanfucanggui{ /*当有鼠标滑过youxuanfu时，youxuanfucanggui转换状态*/
        display:block; /* 生成盒子--（将隐藏的元素显示） */
    }
    /*右悬浮结束*/
    /*开始左悬浮目录*/
    .zhuocemulu{
        /*
        display:-webkit-box;
        -webkit-line-clamp:3;*/ /* 文本截断成两行 */
        /*-webkit-box-orient:vertical;
        */
        overflow:hidden; /* 内容溢出的处理 visible呈现在框外 hidden修剪后不可见 scroll一定会修剪，并出现滚动条 auto如果内容被修剪出滚动条 inherit继承父属性*/
        max-height:3; /* 设置段落的最低高度 默认0，或对应块级%，inherit继承父级属性*/
        width:7em;/*宽度7字符*/
        line-height:1.2em; /*行高1.2个字符*/
        transition: .50s max-height; /*过渡效果 以0.5秒的速度变换max-height段落高度*/
    }
    .btn{ /*按钮样式*/
        float:right; /*按钮位置*/
        /*margin-top:90%;*//*按钮离上边框的距离*/
        clear:both;/* 指定段落不允许浮动，left左侧不浮动,right右侧，both两侧，none允许两侧，inherit继承父级*/
    }
    .btn::after{ /* 在btn元素后面插入内容 */
        content:'展⬇开'  /* 配合：before前面和：after后面使用，用来插入内容，*/
    }
    .exp:checked+.zhuocemulu .btn::after{ /*checked选中紧挨着的zhuocemulu元素中 btn插入内容，+号为紧挨着的起作用，其他不起作用*/
        content:'收⬆起' /* 配合before前面和after后面使用插入内容*/
    }
    .zhuocemulu::before{ /* 在zhuocemulu元素前面插入内容*/
        content:'';/* 插入空白信息，等同于值none*/
        float:right; /* 右侧对齐*/
        height:calc(100% - 1.2em);/* calc（）计算元素100%高度减去1.2em的位置*/
    }
    .zhuocemulukuang{
        display:flex; /* 固定位置 */
        top:20%; /* 距上侧20%的距离 */
        left:10px; /* 据左侧10px */
        position:fixed; /* 生成盒子 */
        /*font-size:20px;*/ /* 设置字体大小 */
        background-color:#f9f9f9; /* 设置背景颜色 */
        opacity:0.7; /* 设置透明度 */
    }
    [line-clamp="1"]{ /* 当现实1行时，line-clamp显示的行数*/
        max-height:1.2em; /*高度*/
    }
    [line-clamp="2"]{ /*当显示2行时，*/
        max-height:2.4em; /* 高度*/
    }
    [line-clamp="3"]{ /*当显示3行时 */
        max-height:3.6em; /*高度*/
    }
    .exp{ 
        display:none; /* 块内元素不显示，*/
    }
    .exp:checked+.zhuocemulu{
        /*-webkit-line-clamp:9;*/ /*第一种方法设置段落的最大行数*/
        max-height:500px; /* 显示段落的最大高度*/
    }
    /*悬浮目录结束*/
}
  
/*四、720分辨率（大于480px，小于767px）*/
@media only screen and (min-width: 480px) and (max-width: 767px)
{
    body{ 
        width: 450px;
        margin-left:100px;
        margin-right:100px;
    }
    *{
        padding:0; /* 修改默认填充为0--指框内 */
        margin:0; /* 修改默认边距0--指框外 */
    }
    /*右悬浮开始*/
    .youxuanfu{
        position:fixed; /* 固定位置 */
        top:50%; /* 距离上方 */
        right:90px; /* 距离右边 */
        display:inline-block; /* 生成块，并做行内元素 */
    }
    
    .youxuanfu img{
        height:40px; /* 高度*/
        width:auto; /* 宽度 */
        opacity:0.5; /* 50%透明度 */
    }
    
    .youxuanfu:hover img{ /* 当鼠标滑过youxuanfu时，图片时的状态转换 */
        height:50px; /* 高度 */
        width:auto; /* 宽度 */
        opacity:0.9; /* 透明度 */
    }
    
    .youxuanfucanggui{
        display:none; /* 该模块不显示 */
        float:left; /* 左面漂浮 */
        left:-120px; /* 距本框左侧xx距离 */
        top:-200px; /* 距本框顶部xx距离 */
        justify-content:flex-start; /* 排列方式，从首行开始排列 */
        position:absolute; /* 生成绝对位置元素配合父元素fixed或absolute使用 */
        background-color:#f9f9f9; /* 背景色*/
        box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); /* 设置阴影 */
        padding:12px 16px; /* 上和下的填充量不能有负值 */
        opacity:0.9;
    }
    
    .youxuanfucanggui img{
        height:30px; /* 高度 */
        width:auto; /* 宽度 */
        opacity:0.8; /* 透明度*/
    }
    
    .youxuanfu:hover .youxuanfucanggui{ /*当有鼠标滑过youxuanfu时，youxuanfucanggui转换状态*/
        display:block; /* 生成盒子--（将隐藏的元素显示） */
    }
    /*右悬浮结束*/
    /*开始左悬浮目录*/
    .zhuocemulu{
        /*
        display:-webkit-box;
        -webkit-line-clamp:3;*/ /* 文本截断成两行 */
        /*-webkit-box-orient:vertical;
        */
        overflow:hidden; /* 内容溢出的处理 visible呈现在框外 hidden修剪后不可见 scroll一定会修剪，并出现滚动条 auto如果内容被修剪出滚动条 inherit继承父属性*/
        max-height:3; /* 设置段落的最低高度 默认0，或对应块级%，inherit继承父级属性*/
        width:7em;/*宽度7字符*/
        line-height:1.2em; /*行高1.2个字符*/
        transition: .50s max-height; /*过渡效果 以0.5秒的速度变换max-height段落高度*/
    }
    .btn{ /*按钮样式*/
        float:right; /*按钮位置*/
        /*margin-top:90%;*//*按钮离上边框的距离*/
        clear:both;/* 指定段落不允许浮动，left左侧不浮动,right右侧，both两侧，none允许两侧，inherit继承父级*/
    }
    .btn::after{ /* 在btn元素后面插入内容 */
        content:'展⬇开'  /* 配合：before前面和：after后面使用，用来插入内容，*/
    }
    .exp:checked+.zhuocemulu .btn::after{ /*checked选中紧挨着的zhuocemulu元素中 btn插入内容，+号为紧挨着的起作用，其他不起作用*/
        content:'收⬆起' /* 配合before前面和after后面使用插入内容*/
    }
    .zhuocemulu::before{ /* 在zhuocemulu元素前面插入内容*/
        content:'';/* 插入空白信息，等同于值none*/
        float:right; /* 右侧对齐*/
        height:calc(100% - 1.2em);/* calc（）计算元素100%高度减去1.2em的位置*/
    }
    .zhuocemulukuang{
        display:flex; /* 固定位置 */
        top:20%; /* 距上侧20%的距离 */
        left:10px; /* 据左侧10px */
        position:fixed; /* 生成盒子 */
        /*font-size:20px;*/ /* 设置字体大小 */
        background-color:#f9f9f9; /* 设置背景颜色 */
        opacity:0.7; /* 设置透明度 */
    }
    [line-clamp="1"]{ /* 当现实1行时，line-clamp显示的行数*/
        max-height:1.2em; /*高度*/
    }
    [line-clamp="2"]{ /*当显示2行时，*/
        max-height:2.4em; /* 高度*/
    }
    [line-clamp="3"]{ /*当显示3行时 */
        max-height:3.6em; /*高度*/
    }
    .exp{ 
        display:none; /* 块内元素不显示，*/
    }
    .exp:checked+.zhuocemulu{
        /*-webkit-line-clamp:9;*/ /*第一种方法设置段落的最大行数*/
        max-height:500px; /* 显示段落的最大高度*/
    }
    /*悬浮目录结束*/
}
  
/*五、1100分辨率（大于960px，小于1199px）*/
@media screen and (min-width: 960px) and (max-width: 1199px) 
{
    body{ 
        width: 960px;
        margin-left:100px;
        margin-right:100px;
    }
}
  
/*六、880分辨率（大于768px，小于959px）*/
@media screen and (min-width: 768px) and (max-width: 959px) 
{
    body{
        width: 700px;
        margin-left:100px;
        margin-right:100px;
    }
}
  
/*七、440分辨率以下（小于479px）*/
@media only screen and (max-width: 479px) 
{
    body{ 
        width: 300px;
        margin-left:100px;
        margin-right:100px;
    }
}