﻿body, html, .wrap {
 height: 100%;
 overflow: hidden;
  }
  
  .amin-bg {
 overflow: hidden;
  
  }
  
  .mainBg {
  
 background: url('/Content/Areas/css/images/Main/boot-bg.png');
 animation: upin 6s ease;
 z-index: -1;
 height: 100vh;
 background-size: cover;
  }
  
  .wrap .main {
 overflow: hidden;
 position: relative;
  }
  
  @keyframes upin {
 0% {
   transform: scale(1.1)
 }
  
 100% {
   transform: scale(1)
 }
  }
  
  
  .boot-logo {
 text-align: center;
 padding: 145px 0px 70px;
  }
  
  
  .boot_content {
 width: 90%;
 margin: auto;
 display: flex;
 justify-content: space-between;
 padding: 15px 0;
 align-items: center;
  }
  
  .boot-top {
 background: #A12100;
 z-index: 999;
 opacity: .9;
 position: absolute;
 width: 100%;
  }
  
  .boot-top .ul-list {
 text-align: center;
  
 margin: 0px;
  }
  
  .boot-top .ul-list li {
 display: inline-block;
  
 position: relative;
 padding: 0 25px;
 line-height: 45px;
 transition: all 334ms ease-in-out
  }
  
  .boot-top .ul-list li.li4 {
 padding-right: 0;
  }
  
  .boot-top .ul-list li.li1 {
 padding-left: 0;
  }
  .boot-top .ul-list li::after{
 content: '';
 position: absolute;
 width: 1px;
 height: 12px;
 background-color: rgba(255, 255, 255, .7);
 right: 0;
 top: 18px;
  }
  .boot-top .ul-list li.li4::after{
  display: none;
  }
  
  .boot-top .ul-list li img {
 /* margin-right: 5px; */
 opacity: .7;
  }
  
  
  .boot-top .ul-list li:hover img {
 opacity: 1;
 transition: opacity 0.5s ease
  }
  
  .boot-top .ul-list li a {
 color: #fff;
 font-size: 14px;
 width: 100%;
 display: block;
  }
  
  /* .li2 {
 position: relative;
  }
  
  .li2 .con {
 position: absolute;
 bottom: 0px;
 z-index: 100;
 width: 100px;
 left: 50%;
 height: 0;
 transform: translate(-50%, 0px);
 box-shadow: 0 0 15px rgb(0 0 0 / 10%);
 background-color: #fff;
 opacity: 0;
 transition: .3s ease-in-out;
  }
  
  .li2 .con img {
 width: 100px;
 height: 0px;
 vertical-align: top;
 background: #fff;
 box-sizing: border-box;
 border-radius: 5px;
 padding: 4px;
 transition: .3s ease-in-out;
  }
  
  .li2:hover .con {
 visibility: visible;
 bottom: -125px;
 opacity: 1;
  }
  
  .li2:hover .con img, .li2:hover .con {
 height: 100px;
 transition: .3s ease-in;
 border-radius: 5px;
  }
  
  .con:before {
 content: "";
 position: absolute;
 left: 50%;
 border-right: transparent 10px solid;
 border-left: transparent 10px solid;
 border-bottom: #fff 10px solid;
 margin-left: -10px;
 top: -10px;
  } */
  .links-arrow li {
 font-size: 20px;
 float: left;
 position: relative;
 padding: 0 37px;
  }
  .links-arrow li::after{
 content: '';
 position: absolute;
 width: 1px;
 height: 12px;
 background-color: rgba(255, 255, 255, .7);
 right: 0;
 top: 7px;
  }
  .links-arrow li.Li4::after{
 display: none;
  }
  ul.links-arrow li a:hover {
 opacity: 1;
  
  }
  
   ul.links-arrow li a {
 display: inline-block;
 width: 26px;
 height: 25px;
 opacity: .6;
 vertical-align: top;
  }
  
   .links-arrow li.Li1 a,.links-arrow li.Li3 a,.links-arrow li.Li4 a {display: flex;align-items: center;justify-content: center;transition: all 0.2s;}
  
  .links-arrow li.Li2 a {
 background: url('/Sites/Uploaded/UserUpLoad/20231110/20231110143905.png') no-repeat center;
  }
  
   .links-arrow li.Li3 a {
  }
  
   .links-arrow li.Li4 a {
  }
  
  .links-arrow li .con {
 position: absolute;
 bottom: -30px;
 left: 50%;
 z-index: 100;
 padding: 4px;
 margin-left: -54px;
 width: 100px;
 opacity: 0;
 visibility: hidden;
 transition: .3s ease-out;
 box-shadow: 0 0 15px rgb(0 0 0 / 10%);
 background-color: #fff;
 border-radius: 5px;
 /* min-height: 100px; */
 text-align: center;
  }
  .links-arrow li.Li2 .con{
 bottom: -95px;
  }
  .links-arrow li.Li2:hover .con{
 bottom: -142px;
  }
  
  .links-arrow li .con img {
 width: 100px;
 height: 100px;
 vertical-align: top;
 background: #fff;
  }
  
  .links-arrow  li:hover .con {
 opacity: 1;
 bottom: -67px;
 visibility: visible;
  }
  
  .links-arrow li .con:before {
 content: "";
 position: absolute;
 left: 50%;
 border-right: transparent 10px solid;
 border-left: transparent 10px solid;
 border-bottom: #fff 10px solid;
 bottom: 33px;
 margin-left: -10px;
  }
  .links-arrow li.Li2 .con:before{
 content: "";
 bottom: 108px;
  }
  
  .ul_right li {
 display: inline-block;
 line-height: 45px;
 position: relative;
  }
  .ul_right li.xxg::after{
 content: '';
 position: absolute;
 width: 1px;
 height: 12px;
 background-color: rgba(255, 255, 255, .7);
 right: -25px;
 top: 18px;
  }
  
  .ul_right li.xxg {
 margin-right: 50px;
  }
  
  .ul_right li a {
 color: #fff;
 width: 100%;
 display: block;
 text-align: center;
  }
  
  .yd_inside {
 opacity: 0;
 position: absolute;
 top: 40px;
 width: auto;
 /* height: 0; */
 background: #fff;
 left: 50%;
 transform: translate(-50%, 0px);
 transition: all .3s ease-in-out;
  }
  
  .yd_inside::before {
 content: "";
 position: absolute;
 left: 50%;
 border-right: transparent 10px solid;
 border-left: transparent 10px solid;
 border-bottom: #fff 10px solid;
 margin-left: -10px;
 top: -10px;
  }
  
  .ylzx:hover .yd_inside {
 display: block;
 height: auto;
 top: 70px;
 opacity: 1;
 transition: all .3s ease-in;
  
  }
  
  .yd_ul li {
 display: inline-block;
 width: 100%;
 line-height: inherit;
 box-sizing: border-box;
 padding: 0 20px;
  }
  
  .ul_right li .yd_inside a{
 color: #666;
 white-space: nowrap;
 width: 100%;
 box-sizing: border-box;
 line-height: inherit;
 border-bottom: 1px dashed #f57d5d;
  }
  .ul_right li .yd_inside li:hover{
 background: #A12100;
  }
  
  .boot_btm {
 width: 872px;
 margin: 0 auto;
 height: 340px;
  }
  
  .pro_list {
 height: 100%;
  }
  
  .boot_btm .pro_item {
 width: 430px;
 height: 100%;
 float: left;
 text-align: center;
 background: rgba(0, 0, 0, 0.3);
 position: relative;
 transition-delay: 0s !important;
  
 transition: all 0.3s ease;
 -webkit-transform: translateY(100px);
 transform: translateY(100px);
 opacity: 0;
 visibility: hidden;
  }
  
  .pro_item:hover {
 background: rgba(148, 40, 15, .5);
 transform: scaleY(1.06) !important;
 transition-delay: 0s !important;
  
 transition: all 0.3s ease;
  }
  
  .boot_btm .pro_item::after {
 content: "";
 display: block;
 border-left: 1px solid #fff;
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 opacity: 0.1;
  }
  
  .pro_item a {
 align-self: center;
 justify-content: center;
 height: 100%;
 color: #fff;
  }
  
  .pro_item .flex {
 height: 100%;
  }
  
  .pro_item .item_img {
 margin: 0 auto;
  }
  
  .dzb .show .item_img {
 width: 150px;
 height: 150px;
  }
  
  
  
  .dzb:hover .item_img .show_img, .zyb:hover .item_img .show_img, .english:hover .item_img .show_img {
 opacity: 0;
 transition: all 0.5s ease-in-out;
  }
  
  .dzb:hover .transition .piun, .zyb:hover .transition .piun, .english:hover .transition .piun {
 animation: spin 2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  
  .item_img.news .piun {
 width: 145px;
 height: auto;
 z-index: 1000;
 transition: opacity 2s ease;
 opacity: 0;
  }
  
  .pro_item:hover .item_img.news .piun {
 opacity: .5;
  }
  
  @keyframes spin {
 0% {
   transform: rotate(-270deg);
  
 }
  
 100% {
   transform: rotate(-360deg);
  
 }
  }
  
  /* @keyframes rotate-background {  
 0% {  
   transform: rotate(0deg);  
 } 
  
 100% {  
   transform: rotate(360deg);  
 }  
  }   */
  
  
  .news {
 display: flex;
 position: relative;
 align-content: center;
 justify-content: center;
 align-items: center;
  }
  
  .item_img.news .show_img {
 width: 45px;
 /* left: 36%; */
 height: auto;
 position: absolute;
 /* transform: translate(-36%, 0px); */
  }
  
  .zyb .show .item_img {
 width:150px;
 height:150px;
  }
  
  .english .show .item_img {
 width: 61px;
 height: 61px;
  }
  
  .show {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
  }
  
  .pro_item .item_img img {
 width: 100%;
 height: 100%;
  
  }
  
  .item_tit .big_tit {
 margin-top: 25px;
 font-size: 22px;
  
  }
  
  .big_tit.transition {
 padding-right: 25px;
 background: url('/Content/Areas/css/images/Main/xiala.png') no-repeat right center;
 background-size: 12px 22px;
  }
  
  .hover_show .item_tit .big_tit {
 margin-top: 0px;
  }
  
  .item_tit .small_tit {
 font-size: 16px;
 margin-top: 5px;
  }
  
  .transition {
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s ease;
  }
  
  .pro_item_content {
 position: relative;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
  }
  
  .hover_show {
 /* position: absolute; */
 opacity: 0;
 /* top: 50%; */
 /* left: 50%; */
 /* transform: translate(-50%, -50%); */
  }
  
  .hover_show .item_img {
 /* width: 105px; */
 /* height: 105px; */
 margin-top: 35px;
  }
  
  
  .pro_item:hover .pro_item_content .show {
 opacity: 0;
  }
  
  .pro_item:hover .pro_item_content .show .big_tit {
 margin-top: 0px;
  }
  
  .pro_item:hover .pro_item_content .hover_show {
 opacity: 1;
  }
  
  .pro_item:hover .pro_item_content .hover_show .small_tit {
 margin-bottom: 20px;
  }
  
  
  .animate .dzb, .animate .zyb, .animate .english {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
  }
  
  .animate .dzb {
 -webkit-transition-delay: 0.3s;
 transition-delay: 0.3s;
  }
  
  .animate .zyb {
 -webkit-transition-delay: 0.5s;
 transition-delay: 0.5s;
 margin: 0 1px;
  }
  
  .animate .english {
 -webkit-transition-delay: 0.7s;
 transition-delay: 0.7s;
  }
  
  .angle_list {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
  
  }
  
  .angle_list .angle {
 width: 20px;
 height: 20px;
 position: absolute;
 -webkit-transition: all 0.3s ease;
 transition: all 0.3s ease;
  
  
  }
  
  .top_left {
 top: 50px;
 left: 50px;
 opacity: 0;
 background-position: left top;
 border: 1px solid #FFFFFF;
 border-width: 1px 0 0 1px;
  
  
  }
  
  .top_right {
 top: 50px;
 right: 50px;
 opacity: 0;
 background-position: right top;
 border: 1px solid #FFFFFF;
 border-width: 1px 1px 0 0;
  }
  
  .bottom_right {
 bottom: 50px;
 right: 50px;
 opacity: 0;
 background-position: right bottom;
 border: 1px solid #FFFFFF;
 border-width: 0px 1px 1px 0;
  }
  
  .bottom_left {
 bottom: 50px;
 left: 50px;
 opacity: 0;
 background-position: left bottom;
 border: 1px solid #FFFFFF;
 border-width: 0px 0px 1px 1px;
  }
  
  .pro_item:hover .top_left {
 top: 30px;
 left: 30px;
 opacity: 1;
  }
  
  .pro_item:hover .top_right {
 top: 30px;
 right: 30px;
 opacity: 1;
  }
  
  .pro_item:hover .bottom_right {
 bottom: 30px;
 right: 30px;
 opacity: 1;
  }
  
  .pro_item:hover .bottom_left {
 bottom: 30px;
 left: 30px;
 opacity: 1;
  }
  
  .boot_phone {
 display: none;
  }
  
  .boot_footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 130px;
 line-height: 130px;
 text-align: center;
 /* background: url('/Sites/Uploaded/UserUpLoad/20231114/20231114170700.png');
 background-size: cover; */
 background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  }
  
  .boot_footer span, .boot_footer a {
 color: #fff;
 font-size: 16px;
  }
  
  .yd_ul li:nth-last-child(1) a {
   border-bottom: none;
  }
  
  .yd_ul li:hover a {
   color: #fff;
  }
  .menu-name1 {
 transition: all .5s;
 position: absolute;
 top: 0px;
 left: 0;
 right: 0;
 display: flex;
 align-items: center;
 justify-content: center;
  }
  
  .menu-name2 {
 position: absolute;
 bottom: -100%;
 left: 0;
 right: 0;
 font-size: 18px;
 color: #fff;
 transition: all .5s;
 display: flex;
 align-items: center;
 justify-content: center;
  }
  
  .links-arrow li.Li1 a:hover .menu-name2,.links-arrow li.Li3 a:hover .menu-name2,.links-arrow li.Li4 a:hover .menu-name2 {bottom: 0;}
  
  .links-arrow li.Li1 a:hover .menu-name1,.links-arrow li.Li3 a:hover .menu-name1,.links-arrow li.Li4 a:hover .menu-name1 {
 transition: all .5s;
 top: -30px;
 left: 0;
 right: 0;
  }
  
  .links-arrow li.Li1,.links-arrow li.Li3,.links-arrow li.Li4 {
 overflow: hidden;
  }
@media screen and (min-width: 769px) and (max-width: 1280px)  {
  .wrap .main {
 width: 100%;
 }
  .boot-logo {
 text-align: center;
 padding: 120px 0px 20px;
}
  .boot_btm {
 height: 170px;
}
  .item_img.news .piun {
 width: 105px;
}
  .hover_show .item_img{
 margin-top:10px;
  }
}
  @media screen and (max-width: 768px) {
 .wrap .main{
   padding:0;
 }
 .boot_phone {
   display: block;
 }
  
 .boot-top, .boot_btm,  .boot_footer {
   display: none;
 }
 .boot-logo{
 max-width: 80%;
 padding: 0;
 box-sizing: border-box;
 margin: 30px auto 0;
 }
 .boot-logo img{
 max-width: 100%;
 }
 .mainBg {
   background-size: cover;
   overflow: hidden;
   }
  
 .boot_phone {
   position: absolute;
   transform: translate(-50%, -50%);
   left: 50%;
   top: 50%;
 }
  
 .bPitem {
  
   background: rgba(0, 0, 0, 0.3);
   margin-bottom: 2px
 }
  
 .bPitem img {}
  
 .bPitem {
   width: 160px;
   height: 120px;
 }
  
 .bPitem a {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   flex-direction: column;
   font-family: "黑体";
   position: relative;
 }
  
 .bPitem img {
   width: 30px;
 }
  
 .bPitem h2 {
   color: #fff;
   font-size: 16px;
   margin-top: 10px;
   background: url('/Content/Areas/css/images/Main/xiala.png') no-repeat right;
   background-size: 8px;
   padding-right: 15px;
 }
  
  
  } 