/* css 重置 */
body,p,input,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form {  margin: 0;  padding: 0;  list-style: none;  vertical-align: middle;  font-weight: normal;  font-family: "微软雅黑";}
img {  border: 0;}
body {  margin: 0;  padding: 0;font-size: 16px;  color: #000;  text-align: left;}
header,section,footer,img {  display: block;  margin: 0;  padding: 0;}
a {  text-decoration: none;  color: #000;}
a:hover{text-decoration: none;}
li{list-style: none;}
.clearfix{zoom:1;}
.clearfix::after{content:'';display:block;clear:both;}
:root{--themaGreen:#4bbcc7;}

.wrap{position: relative; width: 100%;height: 100%;}
header{position: relative; width: 100%; height: 90px;z-index:5;}
header .putlogo{float: left;height: 100%; margin-left: 30px;}
header .putlogo img{position: relative; max-width: 100%; top: 50%;transform: translateY(-50%);}

header .navBtn{display: none; position: relative;width: 20px;height: 30px;float: right; top: 50%;right: 30px;transform: translateY(-50%);cursor:pointer;}
header .navBtn div{position: relative; width: 20px;height: 2px;background-color: black;top: 50%; transform: translateY(-50%);}
header .navBtn div:before,header .navBtn div:after{content:"";display: block;position: absolute;width: 100%;height: 2px;background-color: black;transition: all .6s;}
header .navBtn div:before{top:7px;}
header .navBtn div:after{top:-7px;}
header .isopen div{background-color: transparent;}
header .isopen div::before{top: 0;transform: rotate(45deg);}
header .isopen div::after{top: 0;transform: rotate(-45deg);}

header nav{float: right;margin-right: 30px;transition: all .5s;}
header nav ul{display: flex;justify-content: space-around;}
header nav ul li{height: 90px;line-height: 90px;}
header nav ul > li{ margin-right: 5px;}
header nav ul > li:last-child{position: relative;margin-left: 22px;}
header nav > ul > li > a{padding: 5.5px 30px;border-radius:30px;transition: all .4s;font-size: 15px; color:#282828;}
header nav > ul > li > a:hover,header nav > ul > li > a.on{background-color: var(--themaGreen);color:white;}
header nav li ul a{padding: 5px;}
header nav li ul img{position: relative;top: 50%;transform: translateY(-50%);cursor:pointer;}
/* header nav > ul > li:last-child ul{display: none;} */
header li form{display: none; position: absolute; width: 295px;height: 35px;line-height: 35px;top: 50%;right: 0; transform: translateY(-50%);font-size: 0;opacity: 0;transition: all 1s;}
header li form input{width: calc(100% - 35px);height: 100%;border: none;border-top-left-radius: 30px;border-bottom-left-radius: 30px;padding-left: 15px;box-sizing: border-box;background-color: #e5e5e5;}

header li form button{width: 35px;height: 100%;border: none;vertical-align: bottom;border-top-right-radius: 30px;border-bottom-right-radius: 30px;
  background-image: url(../images/search.png);background-position: center center;background-repeat: no-repeat;background-size: 18px 18px;vertical-align: middle;
  cursor:pointer;}

footer{position: relative;display: flex; width: 100%;height: 100px;padding:0 20px; justify-content: space-between;align-items: center;box-sizing: border-box;}
footer .left > div span{margin-right: 15px;font-size: 12px;color:black;line-height: 24px;}
footer .left > div p,footer .left > div a{display: inline-block;font-size: 12px;color:black;line-height: 24px;}
footer .right li{display: inline-block;margin-left: 15px;}
footer .right li a{display: block;width: 33px;height: 33px;text-align: center; border:1px solid #787878;border-radius:50px;}
footer .right li img{display: inline-block;position: relative; max-width: 20px;top: 50%;transform: translateY(-50%);}

/*1*/
.changebig{opacity: 0;}
.changebigH{opacity: 1; animation: cb ease-out 2000ms forwards;}
/*2*/
.toUp{opacity: 0;}
.toUpH{opacity: 1;animation: tp ease-out 800ms forwards;}
/*35*/
.leftToRight{opacity: 0;}
.leftToRightH{opacity: 1;animation: ltr ease-in-out 1200ms forwards;}
/*35*/
.RightToleft{opacity: 0;}
.RightToleftH{opacity: 1;animation: rtl ease-in-out 1200ms forwards;}
/*6*/
.open1{transform-origin: right; animation: leftOpen ease-in-out 1500ms forwards;}
.open2{transform-origin: left; animation: rightOpen ease-in-out 1500ms forwards;}

@keyframes cb{
  0%{opacity: 0;transform: scale(.2);}
  50%{opacity: 1; transform: scale(1.1);}
  100%{transform: scale(1);}
}

@keyframes tp{
  from{opacity: 0; transform: translateY(40px);}
  to{opacity: 1; transform: translateY(0);}
}

@keyframes ltr{
  0%{opacity: 0;transform: translateX(-40px);}
  50%{opacity: 1;transform:translateX(20px);}
  100%{transform:translateX(0px);}
}
@keyframes rtl{
  0%{opacity: 0;transform: translateX(40px);}
  50%{opacity: 1;transform:translateX(-20px);}
  100%{transform:translateX(0px);}
}


@keyframes leftOpen{
  0%{transform: rotateY(90deg);}
  80%{transform:perspective(1000px) rotateY(10deg);}
  to{transform:perspective(1000px) rotateY(0);}
}
@keyframes rightOpen{
  0%{transform: rotateY(-90deg);}
  80%{transform:perspective(1000px) rotateY(-10deg);}
  100%{transform:perspective(1000px) rotateY(0);}
}


@media all and (max-width:1450px){
  header .putlogo img{max-width: 80%;}
  header nav ul > li{margin-right: 0;}
  header nav > ul > li > a{padding: 8px 15px;}
}

@media all and (max-width:1200px){
  header .navBtn{display: block;}
  header nav{position: relative;float: none; height: 0; margin-right: 0;width: 100%;overflow: hidden;background-color: #eeeeee;}
  header nav > ul{flex-direction:column;}
  header nav > ul > li{margin-bottom: 0px;}
  header nav > ul > li:nth-child(-n+7){height: 40px;}
  header nav > ul > li:nth-child(-n+7) a{display: block;height: 100%;line-height: 40px;padding: 0;/* padding-left: 15px;*/text-align: center; box-sizing: border-box;border-radius: 0;}
  header nav > ul > li > a{transition: all .1s;}
  header nav li > ul {justify-content: center;}
  header nav li > ul a{padding: 0 15px;}
  header nav ul > li:last-child{margin-left: 0;}

  header li form{left: 50%;transform:translate(-50%,-50%);}
}

@media all and (max-width:700px){
  header{height: 60px;}
  header .putlogo{max-width: 70%;}
  header .putlogo img{width: 100%;}
  .bn .main p{font-size:0px;}
  .navBar{height: 40px;}
  footer{height: auto;margin-top: 10px; flex-direction: column;padding: 10px 20px;}
}