:root {
    --red: #d01134;
}

.backtop{
    position: fixed;
    z-index: 9999;
    bottom: 3rem;
    right: 3rem;
    transition: transform 400ms ease-out;
    background: #222;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    display: none;
    transform: translateY(200%);
}

.backtop.act{
        transform: translateY(0%);
}
.backtop svg{
    width: 15px;
    height: 15px;
}
.backtop svg path{
    fill: #fff;
}
.backtop:hover{
    background: var(--red);
}
@media screen and (max-width:1200px){
    .backtop{
          width: 44px;
    height: 44px;
    }
}
@media screen and (max-width:768px){
    .backtop{
        display: none!important;
    }
}

@font-face {
    font-family: "Montserrat";
    src: url('../font/Montserrat-Regular.otf');
}

@font-face {
    font-family: "MontserratLight";
    src: url('../font/Montserrat-UltraLight.otf');
}
@font-face {
    font-family: "Montserrat-SemiBold";
    src: url('../font/Montserrat-SemiBold.otf');
}
@font-face {
    font-family: "MiSans";
    src: url('../font/MiSans-Regular.ttf');
}
@font-face {
    font-family: "MiSansBold";
    src: url('../font/MiSans-Semibold.ttf');
}
.fadeInRight{
      opacity: 0;
      transform: translate(100px,0);
     transition: all 1s ;
}

.fadeInUp{
      opacity: 0;
     transform: translate(0,100px);
}
.fadeInUp:nth-child(1){
    transition: all 1s .1s;
}
.fadeInUp:nth-child(2){
    transition: all 1s .2s;
}
.fadeInUp:nth-child(3){
    transition: all 1s .3s;
}
.fadeInUp:nth-child(4){
    transition: all 1s .4s;
}
.fadeInUp:nth-child(5){
    transition: all 1s .5s;
}
.fadeInUp:nth-child(6){
    transition: all 1s .6s;
}
.fadeInUp:nth-child(7){
    transition: all 1s .7s;
}
.fadeInUp:nth-child(8){
    transition: all 1s .8s;
}
.fadeInUp:nth-child(9){
    transition: all 1s .9s;
}
.fadeInUp:nth-child(10){
    transition: all 1s 1s;
}
.animate .fadeInUp{
    opacity: 1;
    transform: translate(0,0px);
}
.animate.fadeInUp{
    opacity: 1;
    transform: translate(0,0px);
}

.fadeInLeft{
    opacity: 0;
    transform: translate(100px,0);
    transition: all 1s ;
}
.animate .fadeInRight,
.animate .fadeInLeft{
    opacity: 1;
      transform: translate(0,0px);
}

body {
    font-family: 'Montserrat', "MiSans";
}

.con-more {
    display: flex;
}

.con-more a {
    display: flex;
    color: #666;
    line-height: 1.2;
    align-items: center;
}

.con-more svg {
    margin-left: 18px;
    height: 14px;
    margin-top: 1px;
    transition: all .5s;
}

.con-more a:hover svg {
  
    transform: translateX(5px);
}

.header .pronav {
    display: flex;
}

.header .pronav1 {
    flex: 0 0 43.72%;
}

.header .pnav1item {
    line-height: calc(12 / 7);
    color: #fff;
    /*font-weight: 500;*/
    position: relative;
    transition: all .5s;
}

.header .pnav1item:after {
    content: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0px;
    height: 1px;
    background-color: #000;
    transition: all .5s;
}

.header .pnav1item.active {
    /*color: var(--red);*/
    font-family: 'Montserrat-SemiBold', "MiSansBold";
}

.header .pnav1item a {
    color: inherit;
}
.header .pnav1item a:hover{
      font-family: 'Montserrat-SemiBold', "MiSansBold";
}
.header-navlf .fnt50{
    color: #fff;
    text-transform: uppercase;
}
.header .pnav1item.active:after {
    width: 66px;
}

.header .pronav2 {
    border-left: 1px solid #000;
    padding-left: 2.1vw;
    display: none;
}

.header .pnav2otem {
    line-height: 2.58;
    color: #000;

}

.header .pnav2otem a {
    color: #000;
    transition: all .5s;
}

.header .pnav2otem a:hover {
    /*color: var(--red);*/
   font-family: 'Montserrat-SemiBold', "MiSansBold";
}

.header-top {
    position: fixed;
    z-index: 999;
    padding: 0 60px;
    top: 0;
    height: 102px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: all .8s;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 0px 0px;
}

.header-top.head_act {
    background-color: #fff;
    height: 60px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.header-top.red1{
    background-color: transparent;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 0px 0px;
}

.header-top.hides {
    transform: translateY(-100%);
}

.header .menu {
    display: flex;
    align-items: center;
    color: #fff;
    cursor: pointer;
}

.header-top.head_act .menu {
    color: #000;
}
.header-top.red1 .menu {
       color: #fff;
}
.header-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    background-color:rgba(0,0,0,0.93);
    display: flex;
    transform: translateX(-100%);
    transition: all 1s;
}
.pnav1item svg{
    display: none;
}
.header-nav .headimg{
    width: 40.1%;
}
.header-nav .headrgimg{
    flex: none;
    width: 33.6458%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 11.2%;
}
.header-nav .headrgimg img{
    width: 100%;
    object-fit: contain;
}
.header-nav .headimg .swiper-slide img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.header-nav .header-navlf{
      width: 59.9%;
     padding-left: 7.96vw;
    padding-top: 18.52vh;
}
.header-nav.act {
    transform: translateX(0%);
}

.phone_menu {
    width: 16px;
    height: 10px;
    position: relative;
    display: block;
    margin-right: 10px;
}

.phone_menu span {
    background: #e2002c;
    height: 2px;
    display: block;
    transition: 0.5s;
    width: 100%;
}


.phone_menu span:last-child {
    transition: 0.5s;
    position: absolute;
    transform: translateY(8px);
    top: 0;
}



.menu_act .phone_menu span:first-child {
    transition: 0.5s;
    transform: translateY(4px) rotate(45deg);
}

.menu_act .phone_menu span:last-child {
    transition: 0.5s;
    transform: translateY(4px) rotate(135deg);
}

.header-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
}
.header-logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.header-logo img:nth-child(2){
    display: none;
}

.header-logo svg path {
    transition: all .8s;
}

.header-logo.red1 svg path {
    fill: var(--red);
}
.header-logo.red1 img:nth-child(1){
    display: none;
}
.header-logo.red1 img:nth-child(2){
    display: block;
}
.header-top.head_act .header-logo img:nth-child(1){
    display: none;
}
.header-top.head_act .header-logo img:nth-child(2){
    display: block;
}
.header-top.head_act svg path {
    fill: var(--red);
}

.footer {
    background-color: #222;
}


.footer-top {
    display: flex;
    justify-content: space-between;
}

.footer-nav {
    display: flex;
}

.footer-navitem {
    flex: none;
    margin: 0 68px;
}

.footer .footer-share {
    display: flex;
}

.footer .share-item {
    position: relative;
    margin-right: 12px;
}

.footer .share-item a {
    display: flex;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    transition: all .5s;
}
.footer .share-item:hover a {
     border: 2px solid rgba(255, 255, 255, 1);
     background: #fff;
}
.footer .share-item a path{
    fill: #fff;
}
.footer .share-item:hover a path{
    fill: #000;
}
.footer .share-item .qrcode {
    width: 110px;
    padding: 5px;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top: -60px;
    top: 0px;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
      background: #fff;
}
.footer .share-item .qrcode:after{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
  
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #fff;
}
.footer .share-item:nth-child(1) svg{
        width: 20px;
}
.footer .share-item:nth-child(3) svg{
       width: 24px;
}
.footer .share-item:nth-child(2) svg{
    width: 28px;
}

.footer .share-item:hover .qrcode {
    visibility: visible;
    /* top: -100px; */
    transform: translate(-50%, -110%);
    -webkit-transform: translate(-50%, -110%);
    -moz-transform: translate(-50%, -110%);
    -ms-transform: translate(-50%, -110%);
    opacity: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
}

.footer .share-item .qrcode img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer .ft-l {
    padding-right: 48px;
}

.footer a {
    color: inherit;
    transition: all .5s;
}

.footer .ft-c,
.footer .ft-r {
    margin-top: 10px;
}

.footer-nav1 {
    color: rgba(255, 255, 255, .5);
    line-height: 1.5;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 12px;
}

.footer-nav1 a {
    transition: all .5s;
}

.footer-nav1 a:hover {
    color: rgba(255, 255, 255, 1);
}

.footer-nav1:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 14px;
    background-color: #e2002c;
    height: 1px;
}

.footer-nav2 {
    color: #fff;
    line-height: 2;
    margin-bottom: 14px;
     display: flex;
}
.footer-nav2 a{
    display: block;
    position: relative;
}
.footer-nav2 a:after{
    content: '';
    position: absolute;
    left:50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #fff;
    transform: translateX(-50%);
    transition: all .5s;
}
.footer-nav2 a:hover:after{
    width: 100%;
}


.footer .ftr-item {}

.footer .ftr-t {
    color: rgba(255, 255, 255, .5);
    line-height: 1.5;
}

.footer .phone {
    color: #fff;
    line-height: 1.25;
    margin-top: 2px;
    font-family: 'Montserrat-SemiBold', "MiSansBold";
}
.footer .phone a,
.footer .address a,
.footer .email a{
    position: relative;
        display: block;
}
.footer .phone  ,
.footer .address  ,
.footer .email{
    display: flex;
}
.footer .phone a:after ,
.footer .address a:after ,
.footer .email a:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #fff;
    transform: translateX(-50%);
    transition: all .5s;
}
.footer .phone a:hover:after,
.footer .address a:hover:after,
.footer .email a:hover:after{
   width: 100%;
}

.footer .address,
.footer .email {
    line-height: 1.5;
    margin-top: 2px;
    color: #fff;
}

.footer-btm {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.footer .link,
.footer .link a {

    line-height: 30px;
    color: rgba(255, 255, 255, .5);
    transition: all .5s;
}

.footer .link a:hover {
    color: rgba(255, 255, 255, 1);
}

.footer .ftext {
    display: flex;
}

.footer .fbr {
    flex: none;
}

.footer .copyright {
    margin-right: 8px;
    color: rgba(255, 255, 255, .5);
    line-height: 30px;
}
.footer .record{
    margin-right: 20px;
}

.footer .record a {
    color: rgba(255, 255, 255, .5);
    line-height: 30px;
    transition: all .5s;
}

.footer .record a:hover {

    color: rgba(255, 255, 255, 1);
}

.footer .beian a {
    display: flex;
    color: rgba(255, 255, 255, .5);
    line-height: 30px;
    transition: all .5s;
    align-items: center;
}

.footer .beian a:hover {
    color: rgba(255, 255, 255, 1);
}

.footer .beian img {
    margin-right: 6px;
}

.footer .ftext {
    flex-wrap: wrap;
}
.footer-logo{
    width: 155px;
}
.footer-logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.footer .phone-share{
    display: none;
}
.footer .language {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
}
.footer .language svg{
    width: 20px;
    height: 20px;
    margin-right: 8px;
}
@media screen and (max-width:1600px) {
    .footer .ft-l {
        padding-right: 2.5vw;
    }

    .footer-navitem {
        margin: 0 3.5vw;
    }
}

@media screen and (max-width:1024px) {
    .footer .ft-l {
        padding-right: 0vw;
    }

    .footer-navitem {
        margin: 0 3.5vw;
    }
    .header-top,
    .header-top.head_act {
        height: 60px;
    }

    .header .pnav1item.active:after {
        width: 40px;
    }
}

@media screen and (max-width:768px) {
    .footer-top {
        flex-wrap: wrap;
    }

    .footer-top>* {
        flex: 0 0 100%;
    }

    .footer-navitem {
        margin-left: 4vw;
        margin-right: 4vw;
    }

    .footer-logo  {
        width: 120px;
    }

    .footer-nav {
        margin-top: 6vw;
    }

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

    .footer-btm>* {
        flex: 0 0 100%;
    }

    .footer .copyright,
    .footer .record {
        flex: 0 0 100%;
        margin-right: 0;
    }

   .header-top.head_act,
   .header-top{
        height: 60px;
        padding: 0 5%;
    }

    .header-logo {
        left: 5%;
        width: 100px;
        transform: translate(0, -50%);
    }

    .header-logo svg {
        width: 100px;
    }

    .header-nav {
        padding-top: 80px;
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
   
    }

    .header .pnav1item.active:after {
        width: 20px;
    }

    .header .pronav1 {
        flex: 0 0 100%;
    }
    .header-nav .headimg{
        display: none;
    }
    .header-nav .header-navlf{
        width: 100%;
        padding-left: 0;
        padding-top: 0;
    }
    
    .footer .share-item a{
        width: 36px;
        height: 36px;
    }
    .footer-logo{
        /*margin: 0 auto;*/
    }
    .footer-nav{
        flex-wrap: wrap;
    }
    .footer-nav1:after{
        display: none;
    }
      .footer-nav1:before{
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          width: 14px;
          height: 9px;
          background: url('../img/fojt.png') no-repeat center center / contain;
          transform: translateY(-50%) ;
          transition: all .5s;
          
      }
      .footer-nav1.act:before{
          transform: translateY(-50%) rotate(0deg);
      }
      .footer-nav1{
          padding-bottom: 0;
          margin-bottom: 0;
          line-height: 2;
          font-size: 16px;
      }
      /*.footer-nav2box{
          display: none;
      }*/
      .footer-navitem{
          padding-bottom: 18px;
          margin-bottom: 18px;
          border-bottom: 1px solid rgba(255,255,255,.1);
      }
   /*.footer .footer-share{
       justify-content: center;
   }*/
   .footer .share-item{
       margin-left: 0;
       margin-right: 12px;
   }
   .footer .share-item:nth-child(1) svg{
           width: 16px;
   }
   .footer .share-item:nth-child(3) svg {
    width: 18px;
}
   .footer .share-item:nth-child(2) svg{
           width: 22px;
   }
   .footer .ftr-item *{
      /* text-align: center;*/
   }
   .footer-navitem{
       flex: 0 0 100%;
       margin-left: auto;
       margin-right: auto;
   }
   .footer .copyright, .footer .record,
   .footer .link{
      /* text-align: center;*/
   }
   .footer .fbr{
       flex: 0 0 100%;
   }
   .footer .beian a{
       /*justify-content: center;*/
   }
   /*.footer-nav1,
   .footer-nav2{
       text-align: center;
   }*/
   .footer-nav1:after{
       left: 50%;
       transform: translateX(-50%);
   }
     .footer-nav2box{
         padding-top: 10px;
     }
     
   .footer-nav2{
      
      margin-bottom: 0;
   }
   /*.header .menu.menu_act{
       color: #333;
   }*/
   .footer-btm{
       margin-bottom: 10vw;
               flex-direction: column-reverse;
        align-items: flex-start;
   }
   .footer .language{
       margin-bottom: 5vw;
   }
   .con-more svg{
       width: 7px;
      margin-left: 12px;
   }
    .footer  .pc-share{
        display: none;
    }
   .footer  .phone-share{
       display: flex;
   }
   
   
   .footer .share-item .qrcode {

    left: 0%;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
  
}
.footer .share-item .qrcode:after{

    left: 13px;
  
    transform: translateX(0%);

}

.footer .share-item:hover .qrcode {

    transform: translate(0%, -110%);
    -webkit-transform: translate(0%, -110%);
    -moz-transform: translate(0%, -110%);
    -ms-transform: translate(0%, -110%);

}
.header-nav{
    flex-wrap: wrap;
}
.header-nav .header-navlf{
    flex: 0 0 100%;
}
.header-nav .headrgimg{
    height: auto;
    width: 88.95%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}/*
.pnav1item a{
    width: 100%;
    display: flex;
    justify-content:space-between;
   align-items: center;
}
.pnav1item a svg{
    width: 10px;
    height: 20px;
      display: block;
}*/
.header .pnav1item{
    margin-bottom: 5px;
}
}