css基础的样式
/*css reset 初始化*/
body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
margin: 0;
padding: 0;
/*所有的元素采用内减模式*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
font-size: 14px;
color: #333;
font-family: 'Microsoft Yahei', 'Times New Roman', Times, serif;
/*后面都是备胎*/
}
ul,
ol {
list-style: none;
}
a,
a:hover {
text-decoration: none;
color: #333;
}
input {
border: none;
/*去除边框*/
outline: none;
/*去除轮廓线*/
-webkit-appearance: none;
/*去除 表单在移动端 阴影 立体 效果 */
}
/*css common 公共样式*/
.fl {
float: left;
}
.fr {
float: right;
}
/*清除浮动*/
.clearfix::before,
.clearfix::after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
line-height: 0;
}
.jd-sprite {
background-image: url(../images/jd-sprites.png);
background-size: 200px 200px;
/*压缩背景图片*/
}

body {
  /* height: 2000px; */
}
a,
a:hover {
  text-decoration: none;
  color: #333;
}
ul li{
  list-style: none;
}
/*头部*/
.wjs-header {
  height: 40px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  line-height: 40px;
}
.wjs-header .row > div {
  height: 40px;
  border-right: 1px solid #ccc;
}
.wjs-header .row > div:last-child {
  border: none;
}
.wjs-header .row .btn-register {
  padding: 2px 10px;
  font-size: 14px;
}
/*导航*/

/* .wjs-nav .wjs-navbar .navbar-brand {
  color: #777;
  height: 80px;
  line-height: 50px;
}
.wjs-nav .wjs-navbar .navbar-brand .wjs-icon-logo {
  font-size: 50px;
  color: red;
  vertical-align: middle;
}
.wjs-nav .wjs-navbar .navbar-brand .wjs-icon-text {
  font-size: 30px;
  color: #000;
  vertical-align: middle;
}
.wjs-nav .wjs-navbar .navbar-brand:hover,
.wjs-nav .wjs-navbar .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}
.wjs-nav .wjs-navbar .navbar-text {
  color: #777;
}
.wjs-nav .wjs-navbar .navbar-nav > li > a {
  color: #fff;
  height: 80px;
  line-height: 50px;
}
.wjs-nav .wjs-navbar .navbar-nav > li > a:hover,
.wjs-nav .wjs-navbar .navbar-nav > li > a:focus {
  border-bottom: 3px solid blue;
  background-color: #000;
}
.wjs-nav .wjs-navbar .navbar-nav > .active > a,
.wjs-nav .wjs-navbar .navbar-nav > .active > a:hover,
.wjs-nav .wjs-navbar .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #fff;
}
.wjs-nav .wjs-navbar .navbar-nav > .disabled > a,
.wjs-nav .wjs-navbar .navbar-nav > .disabled > a:hover,
.wjs-nav .wjs-navbar .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.wjs-nav .wjs-navbar .navbar-toggle {
  border-color: #ddd;
  margin-top: 23px;
}
.wjs-nav .wjs-navbar .navbar-toggle:hover,
.wjs-nav .wjs-navbar .navbar-toggle:focus {
  background-color: #ddd;
}
.wjs-nav .wjs-navbar .navbar-toggle .icon-bar {
  background-color: #888;
} */
 .wjs-nav{

   position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;   
    height: 100px;
        display: flex;
    align-items: center;
 }
 .navigation .center li{
  margin-right: 2rem;
   padding: 0 10px;
   

 }
 .navigation .center li:hover{
    background: #0088FF;
    border-radius: 10px;
 }

.navigation .center li a{
    color: #fff;
  height: 80px;
  line-height: 50px;
}

.navbar2 {
    background-color: transparent; /* 初始颜色 */
    transition: background-color 0.5s ease; /* 平滑过渡效果 */
  /* display: block; */
   transition: all 2s linear;


}

.navbar-scrolled {

 background-color: rgba(0, 0, 0, 0.4); /* 滚动后的颜色 */
}
/* 导航的展示 隐藏 */
.navbar2_yinc{
  /* display: block; */
  display: none;
   /* transition: all 2s linear; */
}

/*轮播图模块*/
.wjs-banner{
  margin-top: -100px;

}
.wjs-banner .pc-img {
  
  height: 100vh;
  object-fit: cover;
  /* background-position: center center; */
  background-size: 100% 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  
}
.wjs-banner .m-img {
  width: 100%;
  height: 100%;
}
/*信息*/
.wjs-info {
  padding: 30px 0;
}
.wjs-info .row > div {
  margin-bottom: 20px;
}
.wjs-info .row > div .media .media-left {
  font-size: 32px;
}
/*在中屏以上,设置版心 970*/
@media screen and (min-width: 992px) {
  .wjs-info .container {
    width: 970px;
  }
}


@media screen and (max-width: 991px) {
  .wjs-news .news-tabs > li {
    margin-bottom: 0px;
    width: 25%;
  }
  /*a标签居中*/
  .wjs-news .news-tabs > li a {
    margin: 0 auto;
  }
}
.classification{

    /* margin: 0 162px;
    box-sizing: border-box; */
}
.classification ul{
  display: flex;
    box-sizing: border-box;
    justify-content: space-between;
       padding: 0 22px;
    padding-bottom: 15px;
    border-bottom: 7px solid #ccc;
}
.classification ul li{
  position: relative;

display: flex;
flex-direction: column;
    align-items: center;
     color: #666;
} 
.classification .active::before {
    content:  '';
    position: absolute;
    left: -23px;
    bottom: -22px;
    width: 112px;
    height: 9px;
    background-color: #0088FF;
    border-radius: 6px;
   }
.classification ul li img{
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
}
.point::before{
   content:  '';
    position: absolute;
       left: 0px;
    bottom: 7px;
    width: 6px;
    height: 6px;
    background-color: #0088FF;
    border-radius: 50%;
}
/* 底部 */
.bottom{
display: flex;
color:#fff;
    justify-content: space-between;
   padding-bottom: 50px;

    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.bottom dl{
color:#fff;
margin-right: 50px;

}
.bottom dl dt{
color:#ccc;
margin-bottom: 20px;
font-size: 18px;

}
.bottom dl dd span{
color:#ccc;
margin-bottom: 5px;
font-size: 13px;
 white-space: nowrap;


}
.bottom dl dd img{
  width: 30%;
  height: 30%;
}
.bottom dl dd img:nth-child(1){
  margin-right:50px;
}
/* 第二页的css */

.dw::before{
   content:  '';
    position: absolute;
width: 52px;
height: 52px;
background: linear-gradient( 180deg, #0088FF 0%, rgba(0,136,255,0) 100%);
border-radius: 0px 0px 0px 0px;
opacity: 0.6;
    left: -20px;
border-radius: 50%;
}
.select_active{
  color: #FFFFFF;background-color: #0088FF;
}

.toggle_a{
  background-color: #0088FF;
}
.toggle_b{
  background-color: #FFFFFF;

}
.row-reverse:nth-child(even){
  flex-direction: row-reverse;
}