@import "./normalize.css";

/*:root -> 获取根元素html*/
/* :root {
  --color-text: #666;
  --color-high-text: #ff5777;
  --color-tint: #ff8198;
  --color-background: #fff;
  --font-size: 14px;
  --line-height: 1.5;
} */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-size: 14px;
  color: #333333;
  background-color: #FFFFFF;
  /* font-family: "Poppins", "HelveticaNeue", "Helvetica Neue", sans-serif; */
  /* font-family: '等线'; */
  font-family: 'Microsoft YaHei';
  /* user-select: none;  禁止用户鼠标在页面上选中文字/图片等 
  -webkit-tap-highlight-color: transparent;  webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节 
  background: var(--color-background);
  color: var(--color-text);
   rem vw/vh 
  width: 100vw; */
}


/* a {
  color: var(--color-text);
  text-decoration: none;
} */


.clear-fix::after {
  clear: both;
  content: '';
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
}

.clear-fix {
  zoom: 1;
}

.left {
  float: left;
}

.right {
  float: right;
}

/*单行文本超出隐藏*/
 .ellipsis-1{   
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 两行文本超出隐藏*/
.ellipsis-2{
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.ellipsis-3{
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
li{
  list-style: none;
}
/* 分页 */
.page_box{
  width: 100%;
  text-align: right;
  padding: 37px 0;
}
/* 背景 */
.bg{
  background-color: #666566;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  opacity: 0.68;
}
a{
  text-decoration: none;
  color: #333333;
}
.el-input__inner:focus{
  border-color: #111111;
}

[v-cloak]{
  display: none;
}

/* 自适应布局样式 */
/*

  自适应样式说明：
  1、共两套布局，容器宽度大于750px为PC端布局，小于750px切换为mobile端布局
  2、PC端布局，rem进行布局（容器宽度大于750px,header&&footer可以使用px布局，main使用rem布局）
  3、mobile布局，以750px为设计稿再写两套样式，一套使用rem或者px进行布局（容器宽度等于750），另一套把设计稿px转换成vw进行布局（容器宽度小于750，用于自适应手机）
*/

/* 头部样式 */
.parent .header {
  /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
}
.parent .header .PC {
  position: relative;
  /* border-bottom: 1px solid #EEEEEE; */
}
.parent .header .PC .tip {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
}
.parent .header .PC .nav .logo {
  width: 233px;
  height: 56px;
}
.parent .header .PC .nav .logo img {
  width: 100%;
  height: 100%;
}
.parent .header .PC .nav .menu {
  flex: 1;
  height: 100%;
  color: #333333;
}
.parent .header .PC .nav .item .son{
  padding-top: 28px;
  height: 403px;
  background-color: #FFFFFF;
  position: fixed;
  top: 116px;
  left: 0;
  right: 0;
  z-index: 100;
  display: none;
}
.parent .header .PC .nav .son .menu_list{
  padding-left: 9.5rem;
  display: flex;
}
.parent .header .PC .nav .son .menu_list ul{
  color: #666666;
  font-size: 13px;
  line-height: 40px;
  margin-right: 100px;
}
.parent .header .PC .nav .son .menu_list .two{
  font-size: 15px;
}
.parent .header .PC .nav .son .menu_list a:hover{
  color: #B0D5D2;
}
.parent .header .PC .nav .item_box .bg_head{
  background-color: #666566;
  height: calc(100vh - 190px);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  opacity: 0.68;
  display: none;
}
.parent .header .PC .nav .item_box .item:hover ~ .bg_head{
  display: block;
}
.parent .header .PC .nav .item_box .item:hover .son{
  display: block;
  animation:move 0.5s 0s;
}
@keyframes move{
  /*设置animation动画参数*/
  0%{
    /*动画开始时*/
    height:0px;
  }
  100%{
    /*动画结束时*/
    height: 403px;
  }
}
.parent .header .PC .nav .user{
  height: 100%;
  display: flex;
}
.parent .header .PC .nav .user > div{
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.parent .header .PC .nav .user img {
  /* width: 20px; */
  /* height: 20px; */
  margin-left: 36px;
}
.parent .header .PC .nav .user span{
  font-size: 16px;
  margin-left: 5px;
}
.parent .header .PC .nav .user .el-badge .el-badge__content{
  background-color: #0C0C0C;
}
/* .parent .header .PC .nav .user .login_box{
  display: none;
  width: 188px;
  height: 208px;
  background: #FFFFFF;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  padding: 15px 19px;
  position: absolute;
  top: 60px;
  right: -85px;
  z-index: 100;
}
.parent .header .PC .nav .user .login:hover .login_box{
  display: block;
}
.parent .header .PC .nav .user .login_box li{
  font-size: 15px;
  margin-bottom: 12px;
  cursor: pointer;
}
.parent .header .PC .nav .user .login_box .el-button{
  width: 142px;
  height: 35px;
} */
.parent .header .PC .search_box{
  height: 403px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #FFFFFF;
  padding-top: 88px;
}
.parent .header .PC .search_box>div{
  width: 728px;
  border-bottom: 1px solid #2C2C2C;
  padding-bottom: 8px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.parent .header .PC .search_box>div span{
  margin: 0 6px;
}
.parent .header .PC .search_box>div input{
  width: 100%;
  border: 0;
  outline: none;
}
.parent .header .PC .search_box>div img{
  cursor: pointer;
}
.parent .header .PC .bg_head{
  background-color: #666566;
  height: calc(100vh - 116px);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  opacity: 0.68;
}
/* 移动端样式（容器为750px） */
.parent .header .mobile {
  min-height: 104px;
  border-bottom: 1px solid #EEEEEE;
}
.parent .header .mobile .nav {
  width: 100%;
  height: 104px;
  padding: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parent .header .mobile .nav .menu {
  display: flex;
  align-items: center;
}
.parent .header .mobile .nav .menu img {
  margin-right: 33px;
}
.parent .header .mobile .nav .menu .img1 {
  width: 17px;
  height: 33px;
}
.parent .header .mobile .nav .menu .img2 {
  width: 37px;
  height: 35px;
}
.parent .header .mobile .nav .menu .img3 {
  width: 233px;
  height: 56px;
}
.parent .header .mobile .nav .user {
  display: flex;
}
.parent .header .mobile .nav .user img {
  width: 35px;
  height: 35px;
  margin-left: 42px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.parent .header .mobile .nav .user .el-badge .el-badge__content {
  background-color: #0C0C0C;
}
.parent .header .mobile .menu_list{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  display: flex;
}
.parent .header .mobile .menu_list .left{
  width: 601px;
  height: 100%;
  background: #F5F5F5;
}
.parent .header .mobile .menu_list .left .el-collapse-item__header{
  padding: 0 29px;
  font-size: 28px;
  height: 95px;
}
.parent .header .mobile .menu_list .left .two{
  font-size: 26px;
}
.parent .header .mobile .menu_list .left .three{
  font-size: 24px;
  color: #666666;
}
.parent .header .mobile .menu_list .left .el-collapse-item__content{
  padding: 0 29px;
  padding-bottom: 25px;
}
.parent .header .mobile .menu_list .left .top{
  height: 102px;
  background: #F5F5F5;
  padding: 33px;
  font-size: 30px;
  display: flex;
  align-items: center;
}
.parent .header .mobile .menu_list .left .top img{
  width: 63px;
  height: 63px;
  margin-right: 13px;
}
.parent .header .mobile .menu_list .right{
  flex: 1;
  height: 100%;
  background: #666566;
  opacity: 0.68;
  position: relative;
}
.parent .header .mobile .menu_list .right img{
  width: 55px;
  height: 55px;
  position: absolute;
  top: 54px;
  right: 27px;
  cursor: pointer;
}
.parent .header .mobile .search_box{
  height: 124px;
  padding: 24px 38px;
  background-color: #FFFFFF;
}
.parent .header .mobile .search_box>div{
  width: 100%;
  height: 100%;
  border: 1px solid #ABABAB;
  padding-left: 80px;
  position: relative;
}
.parent .header .mobile .search_box>div input{
  width: 100%;
  border: 0;
  outline: none;
  display: inline-block;
  line-height: 74px;
  font-size: 26px;
}
.parent .header .mobile .search_box>div img{
  cursor: pointer;
}
.parent .header .mobile .search_box>div .img1{
  width: 28px;
  height: 28px;
  position: absolute;
  top: 25px;
  left: 37px;
}
.parent .header .mobile .search_box>div .img2{
  width: 18px;
  height: 18px;
  position: absolute;
  top: 25px;
  right: 23px;
}
/* 移动端自适应（容器小于750px） */
@media screen and (max-width: 750px) {
  .parent .header .mobile {
    min-height: 13.6vw;
    border-bottom: 1px solid #EEEEEE;
  }
  .parent .header .mobile .nav {
    width: 100%;
    height: 13.6vw;
    padding: 3.33vw;
    padding-right: 6vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .parent .header .mobile .nav .menu {
    display: flex;
    align-items: center;
  }
  .parent .header .mobile .nav .menu img {
    margin-right: 4.4vw;
  }
  .parent .header .mobile .nav .menu .img1 {
    width: 2.27vw;
    height: 4.40vw;
  }
  .parent .header .mobile .nav .menu .img2 {
    width: 4.93vw;
    height: 4.67vw;
  }
  .parent .header .mobile .nav .menu .img3 {
    width: 31vw;
    height: 6.8vw;
  }
  .parent .header .mobile .nav .user img {
    width: 4.7vw;
    height: 4.7vw;
    min-width: 18px;
    min-height: 18px;
    margin-left: 5.6vw;
  }
  .parent .header .mobile .menu_list{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    display: flex;
  }
  .parent .header .mobile .menu_list .left{
    width: 80.13vw;
    height: 100%;
    background: #F5F5F5;
  }
  .parent .header .mobile .menu_list .left .el-collapse-item__header{
    padding: 0 3.87vw;
    font-size: 4.00vw;
    height: 12.67vw;
  }
  .parent .header .mobile .menu_list .left .two{
    font-size: 3.73vw;
  }
  .parent .header .mobile .menu_list .left .three{
    font-size: 3.73vw;
    color: #666666;
  }
  .parent .header .mobile .menu_list .left .el-collapse-item__content{
    padding: 0 3.87vw;
    padding-bottom: 3.33vw;
  }
  .parent .header .mobile .menu_list .left .top{
    height: 13.6vw;
    background: #F5F5F5;
    padding: 4.4vw;
    font-size: 4vw;
    display: flex;
    align-items: center;
  }
  .parent .header .mobile .menu_list .left .top img{
    width: 8.4vw;
    height: 8.4vw;
    margin-right: 1.73vw;
  }
  .parent .header .mobile .menu_list .right{
    flex: 1;
    height: 100%;
    background: #666566;
    opacity: 0.68;
    position: relative;
  }
  .parent .header .mobile .menu_list .right img{
    width: 7.33vw;
    height: 7.33vw;
    position: absolute;
    top: 7.2vw;
    right: 3.6vw;
    cursor: pointer;
  }
  .parent .header .mobile .search_box{
    height: 16.80vw;
    padding: 3.20vw 5.07vw;
    background-color: #FFFFFF;
  }
  .parent .header .mobile .search_box>div{
    width: 100%;
    height: 100%;
    border: 1px solid #ABABAB;
    padding-left: 10.67vw;
    position: relative;
  }
  .parent .header .mobile .search_box>div input{
    width: 100%;
    border: 0;
    outline: none;
    display: inline-block;
    line-height: 9.87vw;
    font-size: 3.47vw;
  }
  .parent .header .mobile .search_box>div img{
    cursor: pointer;
  }
  .parent .header .mobile .search_box>div .img1{
    width: 3.73vw;
    height: 3.73vw;
    position: absolute;
    top: 3.33vw;
    left: 4.93vw;
  }
  .parent .header .mobile .search_box>div .img2{
    width: 2.40vw;
    height: 2.40vw;
    position: absolute;
    top: 3.33vw;
    right: 3.07vw;
  }

  /* logo */
  .img3.img_black{
    width: 24.8vw;
    height: 6.00vw;
  }
} 
/* 页尾样式 */
.parent .footer .PC {
  min-height: 491px;
  padding-top: 50px;
  color: #FFFFFF;
}
.parent .footer .PC .top {
  display: flex;
  padding-left: 85px;
}
.parent .footer .PC .top div {
  margin-bottom: 20px;
}
.parent .footer .PC .top li{
  margin-right: 100px;
}
.parent .footer .PC .top .title {
  font-size: 16px;
  margin-bottom: 30px;
}
.parent .footer .PC .send_email {
  display: flex;
  justify-content: space-between;
}
.parent .footer .PC .send_email .email_box{
  width: 445px;
  position: relative;
}
.parent .footer .PC .send_email .email_box .el-checkbox{
  color: #ffffff;
  font-size: 14px;
  margin-top: 11px;
}
.parent .footer .PC .send_email .el-input__inner{
  width: 445px;
}
.parent .footer .PC .send_email .send_img{
  width: 25px;
  height: 25px;
  position: absolute;
  top: 8px;
  right: 5px;
  cursor: pointer;
}
.parent .footer .PC .send_email .select_box{
  width: 110%;
  margin-top: 9px;
  display: flex;
  align-items: center;
}
.parent .footer .PC .send_email .select_box .select_img{
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.parent .footer .PC .bottom .img_box {
  text-align: center;
  margin-top: 94px;
}
.parent .footer .PC .bottom .img_box img{
  width: 80px;
  height: 44px;
  margin-right: 30px;
}
.parent .footer .mobile {
  min-height: 636px;
  color: #FFFFFF;
  font-size: 28px;
  padding-bottom: 20px;
}
.parent .footer .mobile .add_text{
  font-size: 40px;
}
.parent .footer .mobile .top li {
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255,0.23);
}
.parent .footer .mobile .top li .first {
  height: 69px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parent .footer .mobile .top li .second {
  font-size: 24px;
}
.parent .footer .mobile .top li .second div {
  margin-bottom: 12px;
}
.parent .footer .mobile .bottom {
  margin-top: 61px;
  text-align: center;
}
.parent .footer .mobile .bottom img {
  width: 105px;
  height: 60px;
  margin-right: 41px;
}
.parent .footer .mobile .bottom .email_box{
  position: relative;
}
.parent .footer .mobile .bottom .email_box .send_img{
  width: 37px;
  height: 37px;
  position: absolute;
  top: 58px;
  right: 40px;
}
.parent .footer .mobile .bottom .email_box .el-checkbox__input{
  bottom: 4px;
  transform: scale(2);
}
.parent .footer .mobile .bottom .email_box .el-checkbox__label{
  color: #ffffff;
  font-size: 20px;
  margin-top: 18px;
}
.parent .footer .mobile .bottom .send_email {
  position: relative;
}
.parent .footer .mobile .bottom .send_email .send_img{
  width: 37px;
  height: 37px;
  position: absolute;
  top: 58px;
  right: 40px;
  cursor: pointer;
}
.parent .footer .mobile .bottom .send_email div{
  font-size: 20px;
  margin-top: 9px;
}
.parent .footer .mobile .bottom .send_email div .select_box {
  display: flex;
  align-items: center;
  padding-left: 50px;
}
.parent .footer .mobile .bottom .send_email div .select_box .select_img{
  width: 28px;
  height: 28px;
  margin-right: 9px;
}
.parent .footer .mobile .bottom input {
  width: 643px;
  height: 62px;
  margin-top: 44px;
  outline: none;
  border: 0;
  padding-left: 24px;
  border-radius: 6px;
}
.parent .footer .mobile .bottom .bottom_tip {
  margin-top: 23px;
  font-size: 18px;
}
@media screen and (max-width: 750px) {
  .parent .footer .mobile {
    /* background-color: #B0D5D2; */
    min-height: 84.8vw;
    color: #FFFFFF;
    font-size: 3.74vw;
    padding-bottom: 2.67vw;
  }
  .parent .footer .mobile .add_text{
    font-size: 5.33vw;
  }
  .parent .footer .mobile .top li {
    padding: 0 2.67vw;
    border-bottom: 1px solid rgba(255, 255, 255,0.23);
  }
  .parent .footer .mobile .top li .first {
    height: 9.2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .parent .footer .mobile .top li .second {
    font-size: 3.20vw;
  }
  .parent .footer .mobile .top li .second div {
    margin-bottom: 1.6vw;
  }
  .parent .footer .mobile .bottom {
    margin-top: 8.13vw;
    text-align: center;
  }
  .parent .footer .mobile .bottom img {
    width: 14vw;
    height: 8vw;
    margin-right: 5.47vw;
    margin-bottom: 5.87vw;
  }
  .parent .footer .mobile .bottom .send_email {
    position: relative;
  }
  .parent .footer .mobile .bottom .send_email .send_img{
    width: 4.93vw;
    height: 4.93vw;
    position: absolute;
    top: 1.73vw;
    right: 5.33vw;
    cursor: pointer;
  }
  .parent .footer .mobile .bottom .send_email div{
    /* display: flex;
    align-items: center;
    justify-content: center; */
    font-size: 2.67vw;
    margin-top: 1.2vw;
  }
  .parent .footer .mobile .bottom .send_email div .select_box {
    align-items: flex-start;
    padding-left: 6.67vw;
  }
  .parent .footer .mobile .bottom .send_email div .select_box .select_img{
    width: 3.73vw;
    height: 3.73vw;
    margin-right: 1.20vw;
  }
  .parent .footer .mobile .bottom .send_email div .select_box span{
    text-align: left;
  }
  .parent .footer .mobile .bottom input {
    width: 85.73vw;
    height: 8.27vw;
    outline: none;
    border: 0;
    padding-left: 3.2vw;
    margin-top: 0;
    border-radius: 0.8vw;
  }
  .parent .footer .mobile .bottom .bottom_tip {
    margin-top: 3.07vw;
    font-size: 2.40vw;
  }
}
/* 公共样式 */
.mobile{
    display: none;
}
.container{
    margin: 0 auto;
}
/* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
@media screen and (max-width: 750px) {
    .container {
        width: 100%;
    }
    .mobile{
        display: block;
    }
    .PC{
        display: none;
    }
}
/* 2. 小屏幕下  大于等于768  布局容器改为 750px */

@media screen and (min-width: 750px) {
    .container {
        width: 750px;
    }
    html{
      font-size: 25px;
    }
    .mobile{
        display: block;
    }
    .PC{
        display: none;
    }
}
/* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */

@media screen and (min-width: 992px) {
    .container {
        width: 970px;
    }
    html{
      font-size: 32.3px;
    }
    .mobile{
        display: none;
    }
    .PC{
        display: block;
    }
}
/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */

@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
    html{
      font-size: 39px;
    }
}
/* 5. 超大屏幕下 大于等于1500 布局容器修改为 1500 */

@media screen and (min-width: 1500px) {
    .container {
        width: 1500px;
    }
    html{
      font-size: 50px;
    }
}


/* 不同主题独立样式 */

/* 绿色主题 */

/* 页头 */

.parent .header .PC .theme_green.tip{
  background: #B0D5D2;
}
.parent .header .PC .theme_green.nav {
  width: 100%;
  height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parent .header .PC .theme_green.nav .menu .item_box {
  width: fit-content;
  width: -moz-fit-content;
  display: flex;
}
.parent .header .PC .theme_green.nav .item_box .item:hover{
  border-bottom: 2px solid #B0D5D2;
}
.parent .header .PC .theme_green.nav .menu .item_box .item {
  width: fit-content;
  width: -moz-fit-content;
  height: 76px;
  line-height: 76px;
  font-size: 16px;
  margin: 0 20px;
  padding-bottom: 9px;
}

/* 页尾 */
.parent .theme_green.footer {
  background-color: #B0D5D2;
}

/********************************************************************************************************************************************/

/* 黑色主题 */

/* 页头 */
/*PC*/
.parent .header .PC .theme_black.tip{
  background: #111111;
}
.parent .header .PC .theme_black.nav{
  width: 100%;
  height: 150px;
  padding-top: 24px;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
}
.parent .header .PC .theme_black.nav .item .son{
  /* background-color: rgba(255, 255, 255); */
  top: 190px;
}
.parent .header .PC .theme_black .user4{
  position: absolute;
  top: 31px;
  right: 61px;
  cursor: pointer;
}
.parent .header .PC .theme_black .img_box{
  width: 186px;
  height: 45px;
  margin: 0 auto;
  margin-bottom: 30px;
}
.parent .header .PC .theme_black .img_box img{
  width: 100%;
  height: 100%;
}
.parent .header .PC .theme_black .item_box{
  display: flex;
  justify-content: center;
}
.parent .header .PC .theme_black .item_box .item{
  margin-right: 60px;
  padding-bottom: 30px;
}
.parent .header .PC .theme_black.nav .item_box .item:hover .one{
  padding-bottom: 10px;
  border-bottom: 2px solid #ffffff;
}
.parent .header .PC .theme_black .item_box .item a{
  color: #FFFFFF;
  font-size: 18px;
}
.parent .header .PC .theme_black .item_box .item .son a{
  color: #333333;
  font-size: 13px;
}
.parent .header .PC .theme_black .item_box .item .son .two{
  font-size: 15px;
}
/*mobile*/
.parent .header .mobile .theme_black.nav{
  background-color: #111111;
}



/* 页尾 */
.parent .theme_black.footer {
  background-color: #111111;
}