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: 20px 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 30px;
      }

      .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: 30px 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;
      height: 159px;
      margin-bottom: 0px;
      position: relative;

      .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 {
            position: absolute;
            left: 0px;
            bottom: 0px;
            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: 30px;

      .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;
      height: 420px;
}

.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;
      height: 570px;
}

.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%;
      }
}

.boxheight1 {
      height: 590px;
}

.boxheight2 {
      height: 249px;
}