/* 公共样式 */

html,
body {
  width: 100%;
  background: #f2f3f5;
}

/* 布局 */

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-just-around {
  justify-content: space-around;
}

.flex-just-between {
  justify-content: space-between;
}

.flex-just-center {
  justify-content: center;
}

.flex-just-start {
  justify-content: flex-start;
}

.flex-just-end {
  justify-content: flex-end;
}

.flex-align-center {
  align-items: center;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.container {
  padding: 0 0.3rem;
}

/* 滚动条 */

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 1px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background-color: #c2dcff;
  /*background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);*/
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #fff;
}

/* 定义头部样式 ==========================================================================*/

#header {
  position: relative;
  height: auto;
  width: 100%;
  z-index: 999;
  background: #fff;
}

#header .container {
  padding: 0.3rem;
}

#header .container .logo {
  width: 1.84rem;
}

#header .container .search {
  margin-right: 0.3rem;
}
#header .container .menu-option {
  width: 0.38rem;
  height: 0.34rem;
  transition: all 0.2s;
}
#header .container .menu-option div {
  width: 0.38rem;
  height: 0.04rem;
  background: #0060eb;
}
#header .container .menu-option.active {
  transform: rotate(90deg);
}
#header .sub-menu1 {
  width: 100%;
  position: absolute;
  background: #f2f3f5;
  padding: 0.3rem 0;
  box-sizing: border-box;
  height: 100vh;
}
#header .sub-menu1 .menu-ul .menu-li {
  box-sizing: border-box;
  height: 0.86rem;
  overflow: hidden;
}
#header .sub-menu1 .menu-ul .menu-li > div {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  border-bottom: 1px solid #cfcfcf;
}
#header .sub-menu1 .menu-ul .menu-li > div > a {
  font-size: 0.32rem;
  font-weight: 500;
  color: #333333;
  width: 80%;
}
#header .sub-menu1 .menu-ul .menu-li > div > .cret {
  width: 0.2rem;
  height: 0.16rem;
  transition: all 0.2s;
  transform: rotate(90deg);
}
#header .sub-menu1 .menu-ul .menu-li.active {
  height: auto;
}
#header .sub-menu1 .menu-ul .menu-li.active > div > a {
  color: #0060eb;
}
#header .sub-menu1 .menu-ul .menu-li.active > div > .cret {
  transform: rotate(-90deg);
}
#header .sub-menu1 .menu-ul .menu-li .menu-li-ul .menu-li-ul-li {
  padding-left: 0.6rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-right: 0.3rem;
  box-sizing: border-box;
  height: 0.8rem;
  overflow: hidden;
  transition: all 0.2s;
}
#header .sub-menu1 .menu-ul .menu-li .menu-li-ul .menu-li-ul-li.active {
  height: auto;
}
#header .sub-menu1 .menu-ul .menu-li .menu-li-ul .menu-li-ul-li > div > a {
  font-size: 0.28rem;
  color: #333333;
  position: relative;
}
#header
  .sub-menu1
  .menu-ul
  .menu-li
  .menu-li-ul
  .menu-li-ul-li.active
  > div
  > a {
  font-weight: bold;
}
#header
  .sub-menu1
  .menu-ul
  .menu-li
  .menu-li-ul
  .menu-li-ul-li
  > div
  > a::after {
  content: "";
  position: absolute;
  left: -0.3rem;
  top: 0.12rem;
  width: 0.1rem;
  height: 0.1rem;
  background: #0060eb;
}
#header .sub-menu1 .menu-ul .menu-li .menu-li-ul .menu-li-ul-li > div > .cret {
  width: 0.2rem;
  height: 0.16rem;
  transition: all 0.2s;
  transform: rotate(90deg);
}
#header
  .sub-menu1
  .menu-ul
  .menu-li
  .menu-li-ul
  .menu-li-ul-li.active
  > div
  > .cret {
  transform: rotate(-90deg);
}
#header .sub-menu1 .menu-ul .menu-li .menu-li-ul .menu-li-ul-li ul {
  padding-top: 0.2rem;
}
#header .sub-menu1 .menu-ul .menu-li .menu-li-ul .menu-li-ul-li ul li {
  padding: 0;
  height: 0.7rem;
  line-height: 0.7rem;
  padding-left: 0.3rem;
}
#header .sub-menu1 .menu-ul .menu-li .menu-li-ul .menu-li-ul-li ul li a {
  font-size: 0.28rem;
  color: #666666;
  display: block;
  width: 100%;
}
#header .sub-menu2 {
  width: 100%;
  position: absolute;
  background: #fff;
  padding: 0.3rem;
  box-sizing: border-box;
}
#header .sub-menu2 input {
  width: 100%;
  height: 0.6rem;
  display: block;
  margin: 0 auto;
  border: 1px solid #cbcbcb;
  padding: 0.1rem;
  font-size: 0.24rem;
  border-radius: 0.08rem;
  outline: none;
}

/* 定义脚部样式 ==========================================================================*/

#footer {
  height: auto;
  width: 100%;
  background: #181818;
}

#footer .container {
  padding: 0.2rem 0.3rem 0.4rem;
}

#footer .details-info {
  width: 100%;
  padding: 0.2rem 0;
  border-bottom: 1px solid #404040;
}

#footer .details-info span {
  color: #fff;
  font-size: 0.24rem;
}
#footer .details-info span a {
  color: #fff;
  font-size: 0.24rem;
  text-decoration: underline;
}

#footer .details-info img {
  margin-right: 0.2rem;
}

#footer .details-logo {
  width: 100%;
  margin-top: 0.4rem;
}

#footer .details-logo .logo {
  width: 1.84rem;
}

#footer .details-logo .code {
  width: 0.88rem;
  height: 0.88rem;
}

#footer .details-webinfo {
  margin-top: 0.4rem;
  margin-left: auto;
  margin-right: auto;
}

#footer .details-webinfo span {
  color: #858585;
  font-size: 0.24rem;
}