nongzigongxiaowang/assets/css/class.less

/*nzgx_channel农资供销频道*/
* {
    margin: 0;
    padding: 0;
    font-family: "微软雅黑", "microsoft yahei";
}
ul,
ol {
    list-style: none;
}
a:active {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:link {
    text-decoration: none;
}
a:focus {
    text-decoration: none;
}
body {
    position: relative;
}
.clearfix {
    overflow: hidden;
}
.clearfix_2::after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.hiddenColor {
    visibility: hidden;
}
.hand {
    cursor: pointer;
}
.dot1 {
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dot2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.dot3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.dot4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
input,
img {
    border: none;
}
.cover100 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.back100 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
article,
aside,
footer,
header,
time,
video,
main,
nav,
h4,
h3,
section {
    display: block;
}
.index_main {
    margin: 0 auto;
    width: 1200px;
}
.slow_6 {
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
} 
.channel_1_box {
    float: left;
    width: 720px;
}
.channel_2_box {
    float: right;
    width: 450px;
}
.channel_3_box {
    float: left;
    width: 350px;
}
.channel_4_box {
    float: right;
    width: 350px;
}
.channel_5_box {
    float: left;
    width: 170px;
}
.channel_6_box {
    float: right;
    width: 265px;
}
.channel_head_box {
    border-bottom: solid 1px #D8D8D8;
    padding-bottom: 10px;
    margin-bottom: 30px;
    .channel_head_box_left {
          float: left;
          height: 30px;
          border-left: solid 5px #A91B33;
    }
    .channel_head_left_a_btn {
          float: left;
          height: 30px;
          margin-right: 10px;
    }
    .channel_head_left_a {
          display: block;
          height: 30px;
          line-height: 30px;
          color: #999;
          font-size: 20px;
          font-weight: bold;
          text-indent: 10px;
    }
    .channel_head_left_a:hover {
          color: #A91B33;
    }
    .channel_head_left_a_only {
          color: #333;
    }
    .channel_head_box_right {
          float: right;
          height: 30px;
    }
    .channel_head_box_right_1_a {
          display: block;
          height: 30px;
          line-height: 30px;
          color: #999;
          font-size: 16px;
    }
    .channel_head_box_right_1_a:hover {
          color: #A91B33;
    }
}
.channel_nav {
    background: #A91B33;
    margin: 40px auto 0px;
    position: relative;
    z-index: 11;
    height: 61px;
    .channel_nav_a {
          float: left;
          height: 22px;
          line-height: 22px;
          position: relative;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          margin: 20px 29.4px;
          text-align: center;
    }
    .channel_nav_a::after {
          content: '';
          display: block;
          position: absolute;
          width: 1px;
          height: 14px;
          background: #BF3519;
          left: -28px;
          top: 4px;
    }
    .channel_nav_a:nth-of-type(2)::after {
          display: none;
    }
    .channel_nav_a:nth-of-type(1) {
          background: #fff;
          border-top-left-radius: 7px;
          border-top-right-radius: 7px;
          position: relative;
          z-index: 22;
          height: 51px;
          line-height: 42px;
          color: #A91B33;
          margin: 10px 21px 0px 35px;
          padding: 0px 40px;
    }
    .channel_nav_a:nth-of-type(1)::after {
          display: none;
    }
    .channel_nav_a:nth-of-type(1)::before {
          content: '';
          display: block;
          position: absolute;
          width: 64px;
          height: 2px;
          background: #A91B33;
          left: 50%;
          margin-left: -32px;
          bottom: 10px;
    }
    .channel_nav_a:nth-last-of-type(1) {
          margin-right: 0px;
    }
}
.channel_1 {
    margin: 40px auto 20px;
}
.channel_ul_1 {
    margin-top: 4px;
    .channel_ul_1_a {
          height: 24px;
          line-height: 24px;
          color: #333;
          font-size: 18px;
          margin-bottom: 23px;
          box-sizing: border-box;
          text-indent: 16px;
          position: relative;
    }

    .channel_ul_1_a:nth-last-of-type(1){margin-bottom:0px;}


    .channel_ul_1_a::after {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          background: #ddd;
          border-radius: 50%;
          position: absolute;
          left: 0px;
          top: 9px;
          z-index: 11;
    }
    .channel_ul_1_a:nth-of-type(1) {
          font-weight: bold;
    }
    .channel_ul_1_a:hover::after {
          background: #A91B33;
    }
    .channel_ul_1_a:hover {
          color: #A91B33;
    }
}
.channel_banner_1 {
    width: 1200px;
    margin: 20px auto 0px;
    height: 90px;
    overflow: hidden;
    .channel_banner_1_a {
          width: 1200px;
          display: block;
    }
    .channel_banner_1_img {
          width: 1200px;
          display: block;
    }
}
.channel_2 {
    margin: 30px auto 0px;
}
.channel_ul_2_a {
    height: 24px;
    line-height: 24px;
    color: #333;
    font-size: 18px;
    margin-bottom: 27px;
    box-sizing: border-box;
    text-indent: 16px;
    position: relative;
    .channel_ul_2_a::after {
          content: '';
          display: block;
          width: 6px;
          height: 6px;
          background: #ddd;
          border-radius: 50%;
          position: absolute;
          left: 0px;
          top: 8px;
          z-index: 11;
    }
    .channel_ul_2_a:nth-of-type(5n-4) {
          font-weight: bold;
    }
    .channel_ul_2_a:hover::after {
          background: #A91B33;
    }
    .channel_ul_2_a:hover {
          color: #A91B33;
    }
}
.channel_img_ul_1 {
    .channel_img_ul_1_li {
          margin-bottom: 25px;
    }
    .channel_img_ul_1_li_a {}
    .channel_img_ul_1_li_img {
          display: block;
          width: 350px;
          height: 230px;
    }
    .channel_img_ul_1_li_dot2 {
          height: 46px;
          line-height: 23px;
          color: #333;
          font-size: 18px;
          margin-top: 22px;
          font-weight: bold;
          width: 350px;
    }
    .channel_img_ul_1_li_a:hover .channel_img_ul_1_li_dot2 {
          color: #A91B33;
    }
}
.channel_img_ul_even_1_li {
    width: 165px;
    margin-bottom: 0px;
    .channel_img_ul_even_1_li_a {}
    .channel_img_ul_even_1_li_img {
          width: 165px;
          height: 96px;
    }
    .channel_img_ul_even_1_li_dot2 {
          height: 46px;
          line-height: 23px;
          color: #333;
          font-size: 18px;
          margin-top: 13px;
    }
    .channel_img_ul_even_1_li_a:hover .channel_img_ul_even_1_li_dot2 {
          color: #A91B33;
    }
}
.channel_img_ul_even_1_li:nth-of-type(odd) {
    float: left;
}
.channel_img_ul_even_1_li:nth-of-type(even) {
    float: right;
}
.channel_even_img_ul_2 {
    .channel_even_img_ul_2_li {
          width: 220px;
    }
    .channel_even_img_ul_2_li:nth-of-type(odd) {
          float: left;
    }
    .channel_even_img_ul_2_li:nth-of-type(even) {
          float: right;
    }
    .channel_even_img_ul_2_a {}
    .channel_even_img_ul_2_li_img {
          display: block;
          width: 220px;
          height: 130px;
    }
    .channel_even_img_ul_2_dot1 {
          height: 24px;
          line-height: 24px;
          color: #333;
          font-size: 18px;
          margin-top: 20px;
          text-align: center;
    }
    .channel_even_img_ul_2_a:hover .channel_even_img_ul_2_dot1 {
          color: #A91B33;
    }
}
.channel_ul_3 {
    margin-top: 40px;
    .channel_ul_3_a {
          height: 24px;
          line-height: 24px;
          color: #333;
          font-size: 18px;
          margin-bottom: 16px;
          box-sizing: border-box;
          text-indent: 16px;
          position: relative;
    }
    .channel_ul_3_a::after {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          background: #ddd;
          border-radius: 50%;
          position: absolute;
          left: 0px;
          top: 8px;
          z-index: 11;
    }
    .channel_ul_3_a:hover::after {
          background: #A91B33;
    }
    .channel_ul_3_a:hover {
          color: #A91B33;
    }
}
.channel_3 {
    margin: 4px auto 20px;
}
.channel_ul_4 {
    margin-top: 0px;
    .channel_ul_4_a {
          height: 24px;
          line-height: 24px;
          color: #333;
          font-size: 18px;
          margin-bottom: 20px;
          box-sizing: border-box;
          text-indent: 16px;
          position: relative;
    }
    .channel_ul_4_a::after {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          background: #ddd;
          border-radius: 50%;
          position: absolute;
          left: 0px;
          top: 8px;
          z-index: 11;
    }
    .channel_ul_4_a:hover::after {
          background: #A91B33;
    }
    .channel_ul_4_a:hover {
          color: #A91B33;
    }
    .channel_ul_4_a:nth-of-type(1) {
          font-weight: bold;
          color: #333;
    }
    .channel_ul_4_a:nth-of-type(1):hover {
          color: #A91B33;
    }
    .channel_ul_4_a:nth-of-type(1):hover::after {
          background: #A91B33;
    }
    .channel_ul_4_a:nth-last-of-type(1) {
          margin-bottom: 0px;
    }
}
.channel_img_ul_2 {
    .channel_img_ul_2_li {
          margin-bottom: 25px;
    }
    .channel_img_ul_2_li_a {}
    .channel_img_ul_2_li_img {
          display: block;
          height: 267px;
          width: 450px;
    }
    .channel_img_ul_2_li_dot2 {
          height: 46px;
          line-height: 23px;
          color: #333;
          font-size: 18px;
          margin-top: 22px;
          font-weight: bold;
    }
    .channel_img_ul_2_li_a:hover .channel_img_ul_2_li_dot2 {
          color: #A91B33;
    }
    .channel_img_ul_2_li:nth-last-of-type(1) {
          margin-bottom: 0px;
    }
}
.channel_banner_2 {
    width: 1200px;
    margin: 24px auto 0px;
    height: 90px;
    .channel_banner_2_a {
          width: 1200px;
          display: block;
    }
    .channel_banner_2_img {
          width: 1200px;
          display: block;
    }
}
.channel_4 {
    margin: 30px auto 0px;
}
.channel_img_ul_3_ul {
    .channel_img_ul_3_li {
          width: 350px;
          height: 230px;
          margin-bottom: 20px;
          position: relative;
    }
    .channel_img_ul_3_li_a {}
    .channel_img_ul_3_li_img {
          display: block;
          width: 350px;
          height: 230px;
    }
    .channel_img_ul_3_li_dot1 {
          width: 350px;
          height: 44px;
          line-height: 44px;
          color: #fff;
          font-size: 18px;
          padding: 0px 10px;
          box-sizing: border-box;
          position: absolute;
          z-index: 11;
          left: 0px;
          bottom: 0px;
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
    }
}
.channel_2 {
    margin: 30px auto 0px;
}
.channel_ul_2_a {
    height: 24px;
    line-height: 24px;
    color: #333;
    font-size: 18px;
    margin-bottom: 22px;
    box-sizing: border-box;
    text-indent: 16px;
    position: relative;
    .channel_ul_2_a:nth-of-type(5n-4) {
          font-weight: bold;
    }
    &:hover::after {
          background: #A91B33;
    }
    &:hover {
          color: #A91B33;
    }
}
.channel_ul_2_a::after {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          background: #ddd;
          border-radius: 50%;
          position: absolute;
          left: 0px;
          top: 9px;
          z-index: 11;
    }
.channel_ul_5_a {
    height: 24px;
    line-height: 24px;
    color: #333;
    font-size: 18px;
    margin-bottom: 17px;
    box-sizing: border-box;
    text-indent: 16px;
    position: relative;
    &:hover::after {
          background: #A91B33;
    }
    &:hover {
          color: #A91B33;
    }
}
.channel_ul_5_a::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #ddd;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 8px;
    z-index: 11;
}
.channel_ul_5_a:nth-of-type(3n-2) {
    font-weight: bold;
}
.channel_head_box_2 {
    margin-top: 11px;
}
.channel_img_ul_4_ul {
    .channel_img_ul_4_li {
          width: 350px;
          height: 230px;
          margin-bottom: 20px;
          position: relative;
    }
    .channel_img_ul_4_li_a {}
    .channel_img_ul_4_li_img {
          display: block;
          width: 350px;
          height: 230px;
    }
    .channel_img_ul_4_li_dot1 {
          width: 350px;
          height: 44px;
          line-height: 44px;
          color: #fff;
          font-size: 18px;
          padding: 0px 10px;
          box-sizing: border-box;
          position: absolute;
          z-index: 11;
          left: 0px;
          bottom: 0px;
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
    }
}
.channel_ul_6_a {
    height: 24px;
    line-height: 24px;
    color: #333;
    font-size: 18px;
    margin-bottom: 17px;
    box-sizing: border-box;
    text-indent: 16px;
    position: relative;
    &:hover::after {
          background: #A91B33;
    }
    &:hover {
          color: #A91B33;
    }
}
.channel_ul_6_a::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #ddd;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 8px;
    z-index: 11;
}
.channel_ul_6_a:nth-of-type(3n-2) {
    font-weight: bold;
}
.channel_img_ul_5_ul {
    .channel_img_ul_5_li {
          height: 265px;
          margin-bottom: 20px;
          position: relative;
    }
    .channel_img_ul_5_li_a {}
    .channel_img_ul_5_li_img {
          display: block;
          height: 265px;
          width: 100%;
    }
    .channel_img_ul_5_li_dot1 {
          width: 450px;
          height: 44px;
          line-height: 44px;
          color: #fff;
          font-size: 18px;
          padding: 0px 10px;
          box-sizing: border-box;
          position: absolute;
          z-index: 11;
          left: 0px;
          bottom: 0px;
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
    }
}
.index_ul_7 {
    margin-top: 17px;
    .index_ul_7_a {
          height: 24px;
          line-height: 24px;
          color: #333;
          font-size: 18px;
          margin-bottom: 18px;
          box-sizing: border-box;
          text-indent: 16px;
          position: relative;
          &:hover {
                color: #A91B33;
          }
    }

    .index_ul_7_a:nth-last-of-type(1){margin-bottom:0px;}

    .index_ul_7_a::after {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          background: #ddd;
          border-radius: 50%;
          position: absolute;
          left: 0px;
          top: 9px;
          z-index: 11;
    }
    .index_ul_7_a:hover::after {
          background: #A91B33;
    }
    .index_ul_7_a:nth-of-type(-n+3) {
          text-indent: 33px;
    }
    .index_ul_7_a:nth-of-type(-n+3)::after {
          background: aqua;
          width: 24px;
          height: 24px;
          left: 0px;
          top: 0px;
          background: url(@/public/img/2.png) no-repeat left 0px;
          background-size: auto 90%;
    }
}