@charset "utf-8";
/* CSS Document */
body{ background-color:#FFF; }

/**/
.float{ width: 80%; height: 100vh; background-color: #ebebeb; position: fixed; right:0; top:0;animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out; display: none; z-index: 1000; box-sizing: border-box; padding-top: 70px;}
.moveTo{animation: moveLeft 0.5s ease-in-out forwards; -webkit-animation: moveLeft 0.5s ease-in-out forwards;}
@-webkit-keyframes moveLeft {
  0% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
  }
  100% {
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
  }
  100% {
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
  }
}
.moveLeft {
  -webkit-animation-name: moveLeft;
          animation-name: moveLeft;
}
.fNav{ width: 100%; height: 100%; }
.fNav > ul{ width: 100%; height: 100%; box-sizing: border-box; padding-left:20px; position: relative;}
.fNav > ul > li{ width: 100%; height: 44px; line-height: 44px; box-sizing: border-box; padding:0 0; border-bottom:1px solid #d2d2d2; text-align: left; font-size: 14px; }
.fNav > ul > li.subNav{ cursor: pointer; }
.fNav > ul > li.subNav > a{ display: inline-block; width:100%; height: 44px; line-height: 44px; text-align: left; font-size: 14px; position: relative; color: #333 !important;}
.fNav > ul > li.subNav > a::after{content:'\e6a3'; width:48px; height: 44px; line-height: 43px; box-sizing: border-box; border-left:1px solid #d2d2d2; position: absolute; right:0; top:0; z-index: 1220; font-family:"iconfont" !important;  font-size:14px; text-align: center;}
.fNav > ul > li > .sNavList{ width: 80%; height: 100%; box-sizing: border-box; padding-left:10px; padding-bottom: 10%; animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out; display: none; background-color: #ebebeb; position: absolute; right:0; top:0; z-index: 1320; border-left:1px solid #d2d2d2; padding-top: 0;}
.fNav > ul > li > .sNavList > strong{width:20%;float:left; font-family:"iconfont" !important;  font-size:14px; text-align: center;}
.fNav > ul > li > .sNavList > strong::after{content:'\e6c4'; width:48px; height: 48px; line-height: 47px; box-sizing: border-box;  }
.fNav > ul > li > .sNavList > h4{ width:100%; height: 48px; line-height: 48px; font-weight: 550; font-size: 14px; z-index: 1230; text-align: center; border-bottom:1px solid #d2d2d2;}

.fNav > ul > li > .sNavList > h4 > a{display:block;width:75%;float:right;}
.fNav > ul > li > .sNavList > p{ width: 100%; padding:0 10px; text-align: left; font-size: 14px;height: 44px; line-height: 44px; box-sizing: border-box; padding:0 0; border-bottom:1px solid #d2d2d2; text-align: left; font-size: 14px; }

.header{ width:100%; height:auto; box-sizing:border-box; background-color:rgba(255,255,255,1); position:relative; left:0; top:0;  z-index:1100;  transition:all 0.3s linear; -webkit-transition:all 0.3s linear; /*animation: fadeInUp 0.5s ease-in-out; -webkit-animation: fadeInUp 0.5s ease-in-out;*/}
.header .hd-con{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:space-between; align-items:stretch; }
.logo{ display:block; width:80px; padding-top:5px; padding-bottom:5px; flex-shrink: 0; }
.logo img{ width:100%;}
/*.logo img:nth-of-type(1){ display: block; }
.logo img:nth-of-type(2){ display: none; }*/
.header .hd-right{ width:100%; box-sizing: border-box; text-align: right; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:space-between; align-items:stretch; height: auto;}
.header .hd-right > .nav{ box-sizing: border-box; width:100%; height: 100%; padding-left:15%;  padding-right: 5%;}
.header .hd-right > .nav > ul{ width:100%; height: 100%;  display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: stretch; }
.header .hd-right > .nav > ul > li{ width:14.2857%; text-align: center; font-size: 16px; position: relative; flex-direction: column; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; height: 100%; }
.header .hd-right > .nav > ul > li > a{ display: inline-block; box-sizing: border-box; text-align: center;  box-sizing: border-box; border-bottom: 1px solid transparent;width:100%; color: #333 !important;}
.header .hd-right > .nav > ul > li > p{ width: 100%; height: auto; position: absolute; left:0; top:110px; z-index: 180; background-color: #4eb234; animation: fadeInUp 0.5s ease-in-out; -webkit-animation: fadeInUp 0.5s ease-in-out; display: none;}
.header .hd-right > .nav > ul > li > p > a{ display: block; width: 100%; height: 40px; line-height: 40px; box-sizing: border-box; padding:0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #FFF !important; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
.header .hd-right > .nav > ul > li > p > a:hover{ background-color: #34931b; }
.header .hd-right > .nav > ul > li.on > a,.header .hd-right > .nav > ul > li:hover > a{ color: #333 !important; /*background-color: #34931b;*/}
.header .hd-right > .nav > ul > li:hover > p{ display: block; }
.header .hd-right > .chat{ display: block; width: 24px;height: 24px; line-height: 20px; flex-shrink: 0; font-size: 20px; text-align: center; align-self: center; margin-left: 10px; }
/*.header .hd-right > .language{ flex-shrink: 0; height: 30px; line-height: 30px; margin-left:20px; font-size: 16px; padding-left:32px; background-image: url(../images/icon-language.png); background-repeat: no-repeat; background-position: left center; align-self: center; }*/

.header .hd-right > .language {
    width: auto;
    display: flex;
    padding: 0 20px;
    height: 100px;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}

.langHeader {
    display: flex;
    height: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.langHdIcon {
    width: 22px;
    height: 22px;
    overflow: hidden;
}

.langHdIcon {
    margin-right: 10px;
}

.langHdArrow {
    width: 15px;
    height: 12px;
    margin-left: 10px;
}

.langHdIcon > img,.langHdArrow > img {
    width: 100%;
    height: 100%;
}

.langHdTitle {
    line-height: 1;
    font-size: 16px;
    color: #123e87
}

.header .hd-right > .language > .langList {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;
    background-color: #4eb234;
    position: absolute;
    right: 0;
    top: 110px;
    padding: 10px 20px;
    display: none;
    animation: fadeInUp 0.5s ease-in-out;
    -webkit-animation: fadeInUp 0.5s ease-in-out;
    box-shadow: 0 10px 10px rgba(200,200,200,0.5)
}

.header .hd-right > .langActive > .langList {
    display: block;
}

.langList > p {
    width: 100%;
    line-height: 2;
    font-size: 16px;
    text-align: right;
}
.langList > p a{color:#fff;}

.header .nav-btn { width: 24px; height: 16px; cursor: pointer; display: none; flex-direction: column; justify-content: space-between; position: absolute; right:10px; top:50%; margin-top: -8px; }
.header .nav-btn span {height: 2px; width: 100%; background-color: #333; display: flex; position: absolute; transition: .5s;}
.header .nav-btn span:nth-child(1) {top: 0; left: 0;}
.header .nav-btn span:nth-child(2) {top: 50%; left: 0; transform: translate(0, -50%);}
.header .nav-btn span:nth-child(3) {bottom: 0; left: 0;}
.header .nav-btn-active span:nth-child(1) { left: 50%;  top: 50%; transform: translate(-50%, -50%) rotate(45deg);}
.header .nav-btn-active span:nth-child(2) { opacity: 0;}
.header .nav-btn-active span:nth-child(3) { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg);}
.header-blank{ background-color:transparent; height:100px;}

/*滚动后导航*/
.scrolltop{ background-color:#FFF !important /*rgba(29,71,159,1)*/; /*animation: fadeInDown 0.5s ease-in-out; -webkit-animation: fadeInDown 0.5s ease-in-out;*/ }
/*.scrolltop .logo img:nth-of-type(2){ display: block; }
.scrolltop .logo img:nth-of-type(1){ display: none; }*/
.scrolltop .hd-right > .nav > ul > li > a{color: #333 !important;}
/*焦点图*/
.colFlash{ width: 100%; min-width: 320px;  position: relative; }
.colFlash > a{ display: block; width: 100%; }
.colFlash > a > img{ width: 100%; }
.colFlash > p{ width: 1200px; height: 100%; position: absolute; left:50%; top:0; margin-left:-600px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; font-size: 72px; font-weight: 550; color: #FFF; text-align: left; }
/***子菜单***/
.menu{ width: 100%; height: auto; box-sizing: border-box; padding-top: 1.4%; padding-bottom: 1.4%; background-color: #4eb234;  }
.menuList{ width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;  box-sizing: border-box; padding:0 10%;}
.menuList > p{ height: auto;  text-align: center; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; margin:0 10px;}
.menuList > p > a{ width:100%; box-sizing: border-box; display: inline-block; height: 36px; line-height: 36px; border-radius: 16px; font-size: 24px; padding:0 20px; font-size: 16px; cursor: pointer; color: #FFF !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.menuList > p.active > a,.menuList > p:hover > a{ background-color: #FFF; color: #4eb234 !important; }

/*主体*/
.main{   height:auto; }

/*****/
.service{ width:100%; height: auto; box-sizing: border-box; padding-top: 2%; padding-bottom: 2%; background-color: #333; min-width: 320px; color: #999;}
.service > .c-con{ display: flex; flex-direction: row;flex-wrap: nowrap; justify-content: center; align-items: stretch; }
.service > .c-con > .servMenu{ height: auto; line-height: 36px; font-size: 14px; flex-shrink: 0; margin-right: 5.5%;}
.service > .c-con > .servMenu > a{ color: #999 !important; }
.service > .c-con > .servMenu > a:hover{ color: #FFF !important; }
.service > .c-con > .servRight{ width:100%; display: flex; flex-direction: row;flex-wrap: nowrap; justify-content: space-between; align-items: stretch; box-sizing: border-box; /*padding:0 10%;*/ border-left:1px solid #999;}
.servOnline{ width:100%; box-sizing: border-box; padding-left: 10%; line-height: 30px; text-align: left; font-size: 14px; }
.servQTCode{ width:108px; height: 108px; overflow: hidden; flex-shrink: 0; margin-left:10%; }
.servQTCode > img{ width: 108px; height: 108px; }

/*******/
.newsList{ width:100%; height: auto; }
.newsList > ul > li{ width:100%; height: auto; box-sizing: border-box; box-shadow: 0 0 10px rgba(200,200,200,0.6); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; cursor: pointer;}
.newsList > ul > li > .nlItem-img{ width:284px; flex-shrink: 0; order:3; }
.newsList > ul > li > .nlItem-img > p{ width: 100%; height: 0; padding-top: 70.4225%; position: relative; overflow: hidden;}
.newsList > ul > li > .nlItem-img > p > a > img{ width: 100%; height: 100%; position: absolute; left:0; top:0; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.newsList > ul > li:hover > .nlItem-img > p > a > img{ transform: scale(1.02,1.02); -webkit-transform: scale(1.02,1.02); }
.newsList > ul > li > .nlItem-about{ width:100%; order:2; box-sizing: border-box; padding:0 3%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: left;}
.newsList > ul > li > .nlItem-about > h3{ width:100%; height: 24px; line-height: 24px; overflow: hidden; font-weight: 550; font-size: 20px; text-align: left; min-width:0; white-space: nowrap; text-overflow: ellipsis; }
.newsList > ul > li > .nlItem-about > div{ width: 100%; line-height: 28px; height: 56px; font-size: 16px; text-align: left; overflow: hidden; margin-top: 10px; margin-bottom: 10px;}
.newsList > ul > li > .nlItem-about > p{ height: 24px; line-height: 24px; text-align: left; text-transform: uppercase;  }
.newsList > ul > li:hover > .nlItem-about > h3{ animation: fadeInDown 0.5s ease-in-out; -webkit-animation: fadeInDown 0.5s ease-in-out; }
.newsList > ul > li:hover > .nlItem-about > div{ animation: fadeInUp 0.5s ease-in-out; -webkit-animation: fadeInUp 0.5s ease-in-out;}
.newsList > ul > li:hover > .nlItem-about > p{animation: fadeInUp 0.5s ease-in-out; -webkit-animation: fadeInUp 0.5s ease-in-out;}
.newsList > ul > li > .nlItem-about > p > a{ color: #f29600; }
.newsList > ul > li > .nlItem-about > h4{ width:100%; height: 24px; line-height: 24px; font-size: 14px; text-align: left; color: #999; overflow: hidden; display: none; font-weight: normal;margin-top: 6px; }
.newsList > ul > li > .nlItem-date{ width:150px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; flex-shrink: 0; order:1; position: relative; }
.newsList > ul > li > .nlItem-date > h3{ font-weight: 550; font-size: 30px; }
.newsList > ul > li > .nlItem-date > p{ font-size: 16px; margin-top: 6px; color: #333;}
.newsList > ul > li > .nlItem-date::after{ content: ' '; width:1px; height: 80%; background-color: #EEE; position: absolute; right:0; top:10%; }
.newsList > ul > li + li{ margin-top: 20px; }

/**大事记**/
.histroyList{ width:100%; height: auto; position: relative; z-index: 200; padding-top: 50px; padding-bottom: 6%; margin:5% 0;}

.histroyList::after{content:  ' ';width:0;height:0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 16px solid #4eb234;position: absolute;left:251px;top:0;z-index: 600;}

.histroyList::before{content:  '';width:1px;height: 100%;background-color: #4eb234;position: absolute;left:260px;top:0;z-index: 240;}


.histroyList > ul > li{ width:100%; height: auto; box-sizing: border-box; padding:3% 60px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; position: relative; z-index: 260; background-color: #ededed}

.histroyList > ul > li::after{content:  '';width:1px;height: 100%;background-color: #4eb234;position: absolute;left:260px;top:0;z-index: 240;}

.histroyList > ul > li:nth-of-type(2n){ background-color: #f9f9f9; }
.hlItemDate{width: 150px;height: 32px;line-height: 32px;font-size: 30px;text-overflow: hidden;flex-shrink: 0;text-align: center;margin-right: 30px;font-weight: bold;}

.hlItemIcon{ width: 42px; height: 32px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; box-sizing: border-box; padding:5px 10px; flex-shrink: 0; position: relative; z-index: 280;} 

.hlItemIcon > p{width: 22px;height: 22px;box-sizing: border-box;border: 1px solid #4eb234;border-radius: 50%;background-color: #ededed;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center;align-items: center;}

.hlItemIcon > p > span{width:12px;height: 12px;background-color: #4eb234;border-radius: 50%;}

.hlItemRight{width:100%;font-size: 24px;line-height: 1.6;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;box-sizing: border-box;padding-left:6%;/* color: #4eb234; */}

/****/

/****分页****/
.page{ width: 100%; height: auto; line-height: 30px; font-size: 4px; text-align: center; font-size: 16px; margin-top: 3%; }

/*底部*/

.foot-blank{ height:auto; width:100%; }
.footer{ box-sizing:border-box; background-color: #222; height: auto; }
.footer > .c-con{ padding-top: 15px; padding-bottom:15px; }
.copyright{ width: 100%; height: auto; line-height: 24px; font-size: 14px; text-align: center; color: #999; }
.copyright a{ color: #999 !important; }
.copyright a:hover{ color: #FFF !important; }



/********/
.colAbout{ width: 100%;height: auto; box-sizing: border-box; padding-top: 4%;padding-bottom: 4%; }
.ca-header{ width:100%; box-sizing: border-box; text-align: center; }
.ca-header > p{ font-weight: 550; display: inline-block; height: auto; line-height: 2.3; font-size: 36px; position: relative; }
.ca-header > p::after{ content: " "; width:50%; height: 6px; background-color: #F60; position: absolute; left:50%; bottom:0;margin-left:-25%; }
.ca-content{ width:100%; height: auto; line-height: 30px; font-size: 16px; text-align: left; padding-top: 3%; }
.ca-content img{max-width:100%;height: auto;}
/*******/
.colContact{ width: 100%; height: auto; margin-top:3%;}
.colContact-about{ width: 100%; height: auto; }
.colContact-about > h3,.colContact-about > div{ width: 100%;font-weight: 550; font-size: 20px; text-align: left; }
.colContact-about > div{ height: auto;line-height: 32px; font-size: 16px; font-weight: normal; margin-top:6px;}
.colContact-items{ width: 100%; height: auto; margin-top: 2%;}
.colContact-items > ul{ width:100%; height: auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; }
.colContact-items > ul > li{ width:32%; box-sizing: border-box; background-color: #EEE; /*margin-right: 2%;*/ padding:30px;}
.colContact-items > ul > li:nth-of-type(3n){ margin-right: 0; }
.colContact-items > ul > li > p{ width: 40px;height: 40px; overflow: hidden; }
.colContact-items > ul > li > p > img{ width: 40px; height: 40px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.colContact-items > ul > li:hover > p > img{transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1);  }
.colContact-items > ul > li > section{ width: 100%;display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; margin-top: 5px;}
.colContact-items > ul > li > section > div{ flex-shrink: 0; margin-right: 20px; }
.colContact-items > ul > li > section > div > h4,.colContact-items > ul > li > section > div > p{ font-weight: normal; font-size: 16px;line-height: 30px; }
.colContact-items > ul > li:hover > section > div > h4{ font-weight: 550; }
.colContact-items > ul > li > section > h5{ width:60px;height: 60px; overflow: hidden; }
.colContact-items > ul > li > section > h5 > img{ width:60px; height: 60px; }


/*******/
.colMap{ width: 100%; height: 0; padding-top: 20%; position: relative;overflow:hidden; }
.colMap > p{ width: 100%; height: 100%;position: absolute; left:0; top:0; background-color: #DDD; }
.colMap > p img{max-width: 100%;height: auto;}

/*******/
.colProd{ width:100%; min-width: 320px; background-color: #459131; box-sizing: border-box; padding:3% 0 1% 0; }
.cProd-header{ width: 100%; height: auto; padding-bottom: 2%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; position: relative; margin-bottom: 3%;}
.cProd-header::after{ content: ' '; width:5%; height: 5px; background-color: #FFF; position:absolute; left:50%; bottom:0; margin-left:-2.5%; }
.cProd-header > p{ width:100%; height: 1px; font-size: 0; background-color: rgba(255,255,255,0.6); }
.cProd-header > h3{ padding:0 10px; font-weight: 550; flex-shrink: 0;  font-size: 36px; color: #FFF; }
.box,.box3{ width:100%;height: auto; overflow: hidden;}
.swiper5{ padding-bottom: 60px; }
.swiper5 .swiper-pagination {right:0; display:inline-block;  padding-top:0; padding-bottom:0; bottom:20px; left:auto; text-align:center; padding-right:10px; box-sizing:border-box; }
.swiper5 .swiper-pagination-bullet{opacity:1; margin:0 5px!important;width:12px; height:12px; border-radius:50%; box-sizing:border-box; background-color: rgba(255,255,255,0.6); }
.swiper5 .swiper-pagination-bullet-active{background-color:rgba(255,255,255,1);}
.swiper5 .swiper-slide{  box-sizing: border-box; box-sizing: border-box;}
.swiper5 .swiper-slide > a{ width:100%; height: auto; display: block; box-sizing: border-box;  position: relative; box-sizing: border-box; border:0px solid #FFF; background-color: #FFF; padding-bottom: 10%; }
.swiper5 .swiper-slide > a > div{ width: 100%; box-sizing: border-box; background-color: #FFF; }
.swiper5 .swiper-slide > a > div > p{ width:100%;height:0; padding-top: 69.230%;  position:relative; }
.swiper5 .swiper-slide > a > div > p > img{ width: 100%; height: 100%; position: absolute; left:0; top:0;
 transition: all 0.5s linear; -webkit-transition: all 0.5s linear; cursor: pointer;}
.swiper5 .swiper-slide > a:hover > div > p > img{ transform: scale(1.02,1.02); -webkit-transform: scale(1.02,1.02); }
.swiper5 .swiper-slide > a > h3{ width:100%; font-size: 18px; height: 68px; line-height: 68px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; text-align: center; color: #333 !important;}
.swiper5 .swiper-slide > a > h4{ width:136px; line-height: 42px; border-radius: 24px;  height: 42px; position: relative; font-weight: normal; font-size: 16px; margin:0 auto; background-color: #f29600; text-align: center; color: #FFF !important;position: relative;}
.swiper5 .swiper-slide > a:hover > h4{ font-weight: 550; }
.swiper5 .swiper-slide > a > h4::after{ content: ' '; width: 100%; height: 100%; box-sizing: border-box; border:1px solid #FFF; position: absolute; left:0; top:0; display: none; border-radius: 24px;transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.swiper5 .swiper-slide > a:hover > h4::after{ display: block;}
.swiper5 .swiper-button-next,.swiper5 .swiper-button-prev{   color:rgba(255,255,255,0.2); background-color:#f5f5f5; height:24px; width:24px; line-height:24px; border-radius: 50%; text-align:center; background-image:url(none); top:auto; bottom:0; cursor:pointer; margin-top:-12px; box-sizing:border-box; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; border:1px solid #d1d1d1; z-index: 320; display: none;}  
.swiper5 .swiper-button-next i,.swiper5 .swiper-button-prev i{ font-size:0;}
.swiper5 .swiper-button-next:hover,.swiper5 .swiper-button-prev:hover{ color:rgba(255，255，255，1) !important; background-color: #9c9a9a;} 
.swiper5  .swiper-button-next.swiper-button-disabled,.swiper5 .swiper-button-prev.swiper-button-disabled {opacity: 0.85;}
.swiper7{ padding-bottom: 60px; }
.swiper7 .swiper-pagination {right:0; display:inline-block;  padding-top:0; padding-bottom:0; bottom:20px; left:auto; text-align:center; padding-right:10px; box-sizing:border-box; }
.swiper7 .swiper-pagination-bullet{opacity:1; margin:0 5px!important;width:12px; height:12px; border-radius:50%; box-sizing:border-box; background-color: rgba(255,255,255,0.6); }
.swiper7 .swiper-pagination-bullet-active{background-color:rgba(255,255,255,1);}
.swiper7 .swiper-slide{  box-sizing: border-box; box-sizing: border-box;}
.swiper7 .swiper-slide > a{ width:100%; height: auto; display: block; box-sizing: border-box;  position: relative; box-sizing: border-box; border:0px solid #FFF; background-color: #FFF; padding-bottom: 10%; }
.swiper7 .swiper-slide > a > div{ width: 100%; box-sizing: border-box; background-color: #FFF; }
.swiper7 .swiper-slide > a > div > p{ width:100%;height:0; padding-top: 69.230%;  position:relative; }
.swiper7 .swiper-slide > a > div > p > img{ width: 100%; height: 100%; position: absolute; left:0; top:0;
 transition: all 0.5s linear; -webkit-transition: all 0.5s linear; cursor: pointer;}
.swiper7 .swiper-slide > a:hover > div > p > img{ transform: scale(1.02,1.02); -webkit-transform: scale(1.02,1.02); }
.swiper7 .swiper-slide > a > h3{ width:100%; font-size: 18px; height: 68px; line-height: 68px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; text-align: center; color: #333 !important;}
.swiper7 .swiper-slide > a > h4{ width:136px; line-height: 42px; border-radius: 24px;  height: 42px; position: relative; font-weight: normal; font-size: 16px; margin:0 auto; background-color: #f29600; text-align: center; color: #FFF !important; position: relative;}
.swiper7 .swiper-slide > a:hover > h4{ font-weight: 550; }
.swiper7 .swiper-slide > a > h4::after{ content: ' '; width: 100%; height: 100%; box-sizing: border-box; border:1px solid #FFF; position: absolute; left:0; top:0; display: none; border-radius: 24px;transition: all 0.5s linear; -webkit-transition: all 0.5s linear;}
.swiper7 .swiper-slide > a:hover > h4::after{ display: block;}
.swiper7 .swiper-button-next,.swiper7 .swiper-button-prev{   color:rgba(255,255,255,0.2); background-color:#f5f5f5; height:24px; width:24px; line-height:24px; border-radius: 50%; text-align:center; background-image:url(none); top:auto; bottom:0; cursor:pointer; margin-top:-12px; box-sizing:border-box; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; border:1px solid #d1d1d1; z-index: 320; display: none;}  
.swiper7 .swiper-button-next i,.swiper7 .swiper-button-prev i{ font-size:0;}
.swiper7 .swiper-button-next:hover,.swiper7 .swiper-button-prev:hover{ color:rgba(255，255，255，1) !important; background-color: #9c9a9a;} 
.swiper7  .swiper-button-next.swiper-button-disabled,.swiper7 .swiper-button-prev.swiper-button-disabled {opacity: 0.85;}
.box2,.box4{ width:100%;height: 0; overflow: hidden; }
.swiper6{ padding-bottom: 60px; }
.swiper6 .swiper-pagination {right:0; display:inline-block;  padding-top:0; padding-bottom:0; bottom:20px; left:auto; text-align:center; padding-right:10px; box-sizing:border-box; }
.swiper6 .swiper-pagination-bullet{opacity:1; margin:0 5px!important;width:10px; height:10px; border-radius:50%; box-sizing:border-box; background-color: rgba(255,255,255,0.6); }
.swiper6 .swiper-pagination-bullet-active{background-color:rgba(255,255,255,1);}
.swiper6 .swiper-slide{  box-sizing: border-box; box-sizing: border-box;}
.swiper6 .swiper-slide > a{ width:100%; height: auto; display: block; box-sizing: border-box;  position: relative; box-sizing: border-box; border:0px solid #FFF; background-color: #FFF; padding-bottom: 10%; }
.swiper6 .swiper-slide > a > div{ width: 100%; box-sizing: border-box; background-color: #FFF; }
.swiper6 .swiper-slide > a > div > p{ width:100%;height:0; padding-top: 69.230%;  position:relative; }
.swiper6 .swiper-slide > a > div > p > img{ width: 100%; height: 100%; position: absolute; left:0; top:0;
 transition: all 0.5s linear; -webkit-transition: all 0.5s linear; cursor: pointer;}
.swiper6 .swiper-slide > a:hover > div > p > img{ transform: scale(1.02,1.02); -webkit-transform: scale(1.02,1.02); }
.swiper6 .swiper-slide > a > h3{ width:100%; font-size: 18px; height: 68px; line-height: 68px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; text-align: center; color: #333 !important;}
.swiper6 .swiper-slide > a > h4{ width:136px; line-height: 42px; border-radius: 24px;  height: 42px; position: relative; font-weight: normal; font-size: 16px; margin:0 auto; background-color: #f29600; text-align: center; color: #FFF !important;}
.swiper6 .swiper-button-next,.swiper6 .swiper-button-prev{   color:rgba(255,255,255,0.2); background-color:#f5f5f5; height:24px; width:24px; line-height:24px; border-radius: 50%; text-align:center; background-image:url(none); top:auto; bottom:0; cursor:pointer; margin-top:-12px; box-sizing:border-box; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; border:1px solid #d1d1d1; z-index: 320; display: none;}  
.swiper6 .swiper-button-next i,.swiper6 .swiper-button-prev i{ font-size:0;}
.swiper6 .swiper-button-next:hover,.swiper6 .swiper-button-prev:hover{ color:rgba(255，255，255，1) !important; background-color: #9c9a9a;} 
.swiper6  .swiper-button-next.swiper-button-disabled,.swiper6 .swiper-button-prev.swiper-button-disabled {opacity: 0.85;}
.swiper8{ padding-bottom: 60px; }
.swiper8 .swiper-pagination {right:0; display:inline-block;  padding-top:0; padding-bottom:0; bottom:20px; left:auto; text-align:center; padding-right:10px; box-sizing:border-box; }
.swiper8 .swiper-pagination-bullet{opacity:1; margin:0 5px!important;width:10px; height:10px; border-radius:50%; box-sizing:border-box; background-color: rgba(255,255,255,0.6); }
.swiper8 .swiper-pagination-bullet-active{background-color:rgba(255,255,255,1);}
.swiper8 .swiper-slide{  box-sizing: border-box; box-sizing: border-box;}
.swiper8 .swiper-slide > a{ width:100%; height: auto; display: block; box-sizing: border-box;  position: relative; box-sizing: border-box; border:0px solid #FFF; background-color: #FFF; padding-bottom: 10%; }
.swiper8 .swiper-slide > a > div{ width: 100%; box-sizing: border-box; background-color: #FFF; }
.swiper8 .swiper-slide > a > div > p{ width:100%;height:0; padding-top: 69.230%;  position:relative; }
.swiper8 .swiper-slide > a > div > p > img{ width: 100%; height: 100%; position: absolute; left:0; top:0;
 transition: all 0.5s linear; -webkit-transition: all 0.5s linear; cursor: pointer;}
.swiper8 .swiper-slide > a:hover > div > p > img{ transform: scale(1.02,1.02); -webkit-transform: scale(1.02,1.02); }
.swiper8 .swiper-slide > a > h3{ width:100%; font-size: 18px; height: 68px; line-height: 68px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; text-align: center; color: #333 !important;}
.swiper8 .swiper-slide > a > h4{ width:136px; line-height: 42px; border-radius: 24px;  height: 42px; position: relative; font-weight: normal; font-size: 16px; margin:0 auto; background-color: #f29600; text-align: center; color: #FFF !important;}
.swiper8 .swiper-button-next,.swiper8 .swiper-button-prev{   color:rgba(255,255,255,0.2); background-color:#f5f5f5; height:24px; width:24px; line-height:24px; border-radius: 50%; text-align:center; background-image:url(none); top:auto; bottom:0; cursor:pointer; margin-top:-12px; box-sizing:border-box; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; border:1px solid #d1d1d1; z-index: 320; display: none;}  
.swiper8 .swiper-button-next i,.swiper8 .swiper-button-prev i{ font-size:0;}
.swiper8 .swiper-button-next:hover,.swiper8 .swiper-button-prev:hover{ color:rgba(255，255，255，1) !important; background-color: #9c9a9a;} 
.swiper8  .swiper-button-next.swiper-button-disabled,.swiper8 .swiper-button-prev.swiper-button-disabled {opacity: 0.85;}


/****/
.prods{ width:100%; min-width: 320px; background-color: #f1f3f5; box-sizing: border-box; padding-bottom: 3%;}
.prodList{ height:auto; background-color: #eff1f4; display: none;padding-top: 2%; }
.prodList > ul > li{ width:23.5%; float: left;margin-right: 2%; margin-top: 2%;}
.prodList > ul > li:nth-of-type(4n){ margin-right: 0;  }
.prodList > ul > li > .plAbout{ width:100%; height:auto; box-sizing: border-box;  background-color: #FFF; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;}
.prodList > ul > li > .plAbout > .plaImg{ width:100%;  }
.prodList > ul > li > .plAbout > .plaImg > img{ width:100%; }
.prodList > ul > li > .plAbout > .plaAbout{ width:100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; box-sizing: border-box;}
.prodList > ul > li > .plAbout > .plaAbout > .plaTitle{ width:100%;background-color: #4eb234; }
.prodList > ul > li > .plAbout > .plaAbout > .plaTitle > h3{ line-height: 2.2; font-weight: 550; font-size: 18px;text-align: center;color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.prodList > ul > li > .plAbout > .plaAbout > .plaTitle > h3.plaTitleH3{-webkit-line-clamp:3;}
.prodList > ul > li > .plAbout > .plaAbout > .plaTitle > h3 >p{text-align:left;padding-left:5%;line-height:30px;max-height:30px;}
.prodList > ul > li > .plAbout > .plaAbout > .plaTitle > p{ width:190%; line-height: 2; font-size: 18px; text-align: left; }
.plaIcon{ width:24%; flex-shrink: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.plaIcon > img{ width:100%; }
.prodList > ul > li > .plHot{ width:100%; height:100%; background-color: #4eb234; background-image: url(../images/footer.png); background-repeat: no-repeat;  background-position: right bottom; background-size: 50% auto; position: absolute; left:0; top:0; box-sizing: border-box; padding:8%; display: none; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: center; animation:fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.prodList > ul > li:hover > .plHot{ display: flex; }
.prodList > ul > li > .plHot > .plHotHeader{ width:100%; height:auto; }
.prodList > ul > li > .plHot > .plHotHeader > h4,.prodList > ul > li > .plHot > .plHotHeader > h3{ width:100%; line-height: 1.5; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; font-weight: normal; font-size: 18px; text-transform: uppercase; color: #FFF;}
.prodList > ul > li > .plHot > .plHotHeader > h3{ font-size: 28px; }
.prodList > ul > li > .plHot > .plHotMemo{ width:100%; height:auto; line-height: 1.8; text-align: left; color: #FFF; overflow: hidden;  display: -webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; font-size: 18px; margin-top: 3%; margin-bottom: 3%;}
.prodList > ul > li > .plHot > .plHotBtn{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center;}
.prodList > ul > li > .plHot > .plHotBtn > a{ display: inline-block; width:160px; height:56px; line-height: 56px; font-size: 18px; text-align: center; color: #FFF; background-color: #b82425; }

/*****/
.page,.page > ul{ width: 100%; font-size: 0; text-align: center; }
.page{ margin-top: 5%; margin-bottom:5%; }
.page > ul > li{ width:auto; display: inline-block; margin:5px; }
.page > ul > li > a,.page > ul > li > h3,.page > ul > li > span{ display: block; width: 100%; height: 30px; line-height: 28px; text-align: center; padding:0 10px; box-sizing: border-box; font-size: 14px; border:1px solid #EEE; border-radius: 2px; }
.page > ul > li > a:hover,.page > ul > li > a.on{ background-color: #c40001; border:1px solid #c40001; color: #FFF !important; }
.page > ul > li > h3{font-weight: normal;}
.page > ul > li > p{ width: auto; display: block; }
.page > ul > li > p > input{ width: 60px; height: 30px; line-height: 28px; font-size: 14px;  text-align: center; border:1px solid #EEE; border-radius: 2px;}
.page > ul > li > p.formSubmit > input{ width: 48px; background-color: #DDD; border:0; }