@import url("iconfont.css");
/* banner inner*/
.banner-inner{position: relative;background: #FAFAFA;min-height: 100px;display: flex;flex-direction: column;width: 100%;justify-content: flex-end;}
.banner-inner img{width: 100%}
.banner-inner .banner-content{width: 100%}
.banner-inner .banner-content .container{width: 100%;max-width: 1500px;margin: 0px auto;display: flex;align-items: center;justify-content: space-between}
.banner-inner .banner-content .banner-title-h1{font-size: 20px;font-weight: 700;margin: 0;}
.banner-inner .banner-content .banner-breadcrumbs a{color: inherit;transition: all .2s linear}
.banner-inner .banner-content .banner-breadcrumbs a em{margin-right: 5px}
.banner-inner .banner-content .banner-breadcrumbs a:hover{color: var(--color)}
.common-main{padding: 50px 0 80px}
article p{color: var(--fontcolortitle)}
article a{color: var(--color);text-decoration: underline}
table{border-collapse: collapse;width: 100%}
table td, table th{border: 1px solid #ddd;padding: 4px 10px}
.table-wrap{overflow-x: auto;width: 100%}
/* company introduction*/
.company-about-wrap{display: flex;flex-wrap: wrap;justify-content: space-between;padding-bottom: 3%}
.company-about-wrap > div{width: 50%}
.company-about-wrap .about-img{position: relative;padding: 10px 3% 0px 10px}
.company-about-wrap .about-img > img{width: 100%;height: 100%;object-fit: contain}
.company-about-wrap .about-info{padding-top: 15px}
.company-about-wrap .about-info .home-des, .company-about-wrap .about-info .home-title{text-align: left}
.company-about-wrap .about-info ul{list-style: none;display: flex;flex-wrap: wrap;margin-bottom: 30px;padding-left: 0;}
.company-about-wrap .about-info ul li{width: 50%;margin-bottom: 10px;display: flex;align-items: center}
.company-about-wrap .about-info ul li img{margin-right: 10px}
.company-about-wrap .about-info ul li p{margin: 0px}
.company-about-wrap .about-info .about-content{margin-top: 30px}
.company-about-wrap .about-info .about-content p{margin-bottom: 15px}
.company-about-wrap .color{font-weight: var(--fontweight);font-size: 18px;color: #080808;display: flex;align-items: center}
.company-about-wrap .color span{color: var(--color);font-size: 24px;padding-left: 15px}
.company-logo{position: relative;z-index: 1;text-align: center;}
.company-logo:after{content: "";position: absolute;left: 50%;top: 50%;width: 100%;height: 100%;transform: translate(-50%, -50%);background: #FFFbfa;z-index: -1}
.elementor-heading-title{text-transform: uppercase;text-align: center;}
.company-logo ul{list-style: none;flex-wrap: wrap;display: flex;justify-content: space-between;align-items: center}
.company-logo ul li{width: 14%}
.company-list{padding-bottom: 4%;}
.company-list ul{display: flex;flex-wrap: wrap;justify-content: space-between;list-style: none;margin-top: 50px;padding-left: 0;}
.company-list ul li{margin-bottom: 20px;width: 30%;background: #FFF;box-shadow: 0 6px 13px 0 rgba(19, 20, 21, .2);padding: 30px 30px;position: relative;transition: all .1s linear}
.company-list ul li:hover{box-shadow: 0 6px 13px 0 rgba(19, 20, 21, .4)}
.company-list ul li::before{content: "";position: absolute;left: 0px;top: 0px;width: 100%;height: 2px;background: var(--color)}
.company-list ul li .title{font-weight: var(--fontweight);padding: 0px 0px 20px;color: var(--fontcolortitle);font-size: 22px}
.company-list ul li em{font-size: 50px;color: var(--color)}
.stepBar{height: 40px;position: relative;line-height: 40px;color: #fff;margin-bottom: 20px;text-align: center;}
.active-ba{background: #264476;}
.stepBar::before{content:" ";width: 0;height: 0;border: solid;border-color: transparent transparent transparent #e3edf6;border-top-width: 20px;border-right-width: 20px;border-bottom-width: 20px;border-left-width: 14px;position: absolute;right: -33px;top: 0px;z-index: 1;}
.active-ba::before{border-color: transparent transparent transparent #264476;}
.stepBar::after{content:" ";width: 0;height: 0;border: solid;border-color: transparent transparent transparent #fff;border-top-width: 20px;border-right-width: 20px;border-bottom-width: 20px;border-left-width: 14px;position: absolute;left: 0px;top: 0px;}
.cirle1{display: inline-block;width: 22px;height: 22px;line-height: 21px;background-color: #fff;border-radius: 50%;color: #264476;}
/* Company Vision*/
.about-vision-wrap{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between}
.about-vision-wrap > div{width: 50%}
.about-vision-wrap .about-img{position: relative;padding: 10px 3% 0px 10px}
.about-vision-wrap .about-img > img{width: 100%}
.about-vision-wrap .about-info{padding-top: 30px}
.about-vision-wrap .about-info .home-des, .about-vision-wrap .about-info .home-title{text-align: left}
.about-vision-wrap .vision-list{margin-top: 20px}
.about-vision-wrap .vision-list .item{border-bottom: 1px solid #EEE}
.about-vision-wrap .vision-list .item:nth-child(1) .content{display: block}
.about-vision-wrap .vision-list .item.open .link em{transform: rotate(180deg)}
.about-vision-wrap .vision-list .item .link{display: flex;justify-content: space-between;align-items: center;cursor: pointer;padding: 20px 0px}
.about-vision-wrap .vision-list .item .link p{margin: 0px;font-weight: var(--fontweight);font-size: 18px;color: var(--fontcolortitle)}
.about-vision-wrap .vision-list .item .link em{font-weight: var(--fontweight);transition: all .2s linear}
.about-vision-wrap .vision-list .item .content{margin-bottom: 20px;display: none;line-height: 24px}
/* Our Team*/
.team-member .team-member-list{display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 50px}
.team-member .team-member-list .team-member-item{width: 23%;background: #FFF;margin-bottom: 20px}
.team-member .team-member-list .team-member-item:hover .info{box-shadow: 0 6px 13px 0 rgba(19, 20, 21, .4)}
.team-member .team-member-list .team-member-item img:nth-child(1){width: 100%;height: auto}
.team-member .team-member-list .team-member-item .info{transition: all .2s linear;box-shadow: 0 6px 13px 0 rgba(19, 20, 21, .2);text-align: center;padding: 20px}
.team-member .team-member-list .team-member-item .info p{margin-bottom: 5px}
.team-member .team-member-list .team-member-item .info p:nth-child(1){font-size: 22px;font-weight: 700}
.team-member .team-member-list .team-member-item .info p:nth-child(2){color: var(--fontcolorintro)}
.team-member .team-member-list .team-member-item .info .links{display: flex;align-items: center;justify-content: center;margin-top: 20px}
.team-member .team-member-list .team-member-item .info .links a{width: 34px;height: 34px;background: #FFF;border: 1px solid #DCDCDC;border-radius: 50%;color: #ABABAB;display: inline-flex;align-items: center;justify-content: center;margin: 0px 5px;transition: all .2s linear;text-decoration: none}
.team-member .team-member-list .team-member-item .info .links a:hover{background: #DCDCDC;color: var(--fontcolortitle)}
.team-number{max-width: 1200px;margin: 100px auto 0px;background: var(--color);display: flex;flex-wrap: wrap;justify-content: space-between;padding: 4% 6%}
.team-number .team-number-item{text-align: center}
.team-number .team-number-item p{color: #FFF;margin: 0px;font-weight: 700}
.team-number .team-number-item p:nth-child(1){font-size: 36px}
.team-number .team-number-item p:nth-child(2){text-transform: uppercase}
.team-took{position: relative;padding: 10% 0px 0px;margin-top: -80px}
.team-took .bg{background: no-repeat center;background-size: cover;width: 100%;height: 500px;position: absolute;top: 0px;left: 50%;transform: translateX(-50%);z-index: -1}
.team-took .home-title{color: #FFF}
.team-took #teamTookSwiper{margin-top: 50px;padding: 0px 20px 80px}
.team-took .swiper-slide{position: relative}
.team-took .swiper-slide::after{content: "";position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;background: rgba(19, 20, 21, 0);z-index: 0;transition: all .2s linear;cursor: pointer}
.team-took .swiper-slide:hover::after{background: rgba(19, 20, 21, .4)}
.team-took .swiper-slide .name{position: absolute;bottom: 10px;left: 10px;color: #FFF;font-size: 20px;z-index: 1}
.team-took .took-pagination .swiper-pagination-bullet{width: 28px;height: 8px;background: var(--color);opacity: .3;border-radius: 0}
.team-took .took-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity: 1}
/* R & D*/
.rd-cap{position: relative}
.rd-cap .rd-bg{width: 100%}
.rd-cap .rd-wrap{position: absolute;top: 50%;transform: translateY(-50%);right: 10%;background: #FFF;padding: 3%;width: 700px;border-radius: 4px}
.rd-cap .rd-wrap .title{font-size: 36px;font-weight: var(--fontweight);position: relative;padding-left: 20px;text-transform: uppercase}
.rd-cap .rd-wrap .title::before{content: "";position: absolute;left: 0px;top: 50%;transform: translateY(-50%);width: 5px;height: 35px;background: var(--color)}
.rd-cap .rd-wrap .content{margin-top: 20px;line-height: 2}
.rd-international{padding-top: 4%}
.rd-international-list{margin-top: 50px;display: flex;flex-wrap: wrap;justify-content: space-between}
.rd-international-list .rd-international-item{width: 32%;position: relative;cursor: pointer}
.rd-international-list .rd-international-item:hover::after{background: rgba(0, 0, 0, .4)}
.rd-international-list .rd-international-item::after{content: "";position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 0);z-index: 0;transition: all .2s linear}
.rd-international-list .rd-international-item img{width: 100%}
.rd-international-list .rd-international-item .info{z-index: 1;position: absolute;left: 28px;bottom: 12px;max-width: 300px}
.rd-international-list .rd-international-item .info p{color: #FFF;opacity: .8;margin: 0px}
.rd-international-list .rd-international-item .info p.top{font-size: 18px;text-transform: uppercase}
.rd-international-list .rd-international-item .info p.bottom{line-height: 1.4;margin-top: 8px}
.page-container{display: flex;flex-wrap: nowrap;}
.pro-container{/*width: 81%;*/}
/* aside*/
.sidebar{width: 380px}
.sidebar-item{border-radius: 4px;background: #FFF;box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .17);padding: 30px;margin-bottom: 30px}
.sidebar-item .sidebar-title{/*position: fixed;*/color: var(--fontcolortitle);font-size: 20px;font-weight: 700;position: relative;padding-bottom: 10px;margin-bottom: 10px}
.sidebar-item .sidebar-title::after{content: "";position: absolute;left: 0px;bottom: 0px;width: 81px;height: 2px;background: var(--color)}
.sidebar-item.search .sidebar-search{display: flex;align-items: center;height: 45px}
.sidebar-item.search .sidebar-search input{height: 100%;flex: 1;outline: 0;border: none;background: #F7F7F7;border: 1px solid #F7F7F7;padding: 0px 10px;transition: all .1s linear}
.sidebar-item.search .sidebar-search input:focus{border-color: #DAD8D8}
.sidebar-item.search .sidebar-search .search-btn{width: 45px;height: 100%;background: var(--color);border: 1px solid var(--color);color: #FFF;display: inline-flex;align-items: center;justify-content: center;cursor: pointer;transition: all .1s linear}
.sidebar-item.search .sidebar-search .search-btn:hover{opacity: .9}
.sidebar-item.search .sidebar-search .search-btn em{font-size: 22px}
.sidebar-item.category .sidebar-cate{list-style: none;padding: 0;margin: 0;}
.sidebar-item.category .sidebar-cate > li{border-bottom: 1px solid #DCDCDC;position: relative;padding-left: 20px}
.sidebar-item.category .sidebar-cate > li > em{font-size: 12px;font-weight: 700;position: absolute;left: -8px;top: 10px;color: var(--fontcolorintro);cursor: pointer;transition: all .2s linear;width: 30px;height: 30px;display: inline-flex;align-items: center;justify-content: center}
.sidebar-item.category .sidebar-cate > li a{color: var(--fontcolortitle);padding: 12px 0px;display: inline-flex}
.sidebar-item.category .sidebar-cate > li a:hover{color: var(--color)}
.sidebar-item.category .sidebar-cate > li ul{display: none;list-style: none;padding-bottom: 20px;padding-left: 20px;}
.sidebar-item.category .sidebar-cate > li ul li.active a{color: var(--color)}
.sidebar-item.category .sidebar-cate > li ul a{padding: 4px 0px}
.sidebar-item.category .sidebar-cate > li.active > em{transform: rotate(90deg);color: var(--color)}
.sidebar-item.category .sidebar-cate > li.active > a{color: var(--color)}
.sidebar-item.recent-news .recentnews-list{padding: 0;list-style-type: none;}
.sidebar-item.recent-news .recentnews-list li{margin: 15px 0px;padding-bottom: 15px;border-bottom: 1px solid #DCDCDC}
.sidebar-item.recent-news .recentnews-list li:last-child{margin-bottom: 0px;border-bottom: none}
.sidebar-item.recent-news .recentnews-list li a{position: relative;color: var(--fontcolortitle);padding-left: 18px;line-height: 22px}
.sidebar-item.recent-news .recentnews-list li a:hover{color: var(--color)}
.sidebar-item.recent-news .recentnews-list li a em{font-size: 12px;font-weight: 700;position: absolute;left: 0px;top: 0px}
.sidebar-prolist{padding: 0;}
.sidebar-prolist li{display: flex;align-items: center;margin-top: 1em}
.sidebar-prolist li:hover img{transform: scale(1.05)}
.sidebar-prolist li > a{width: 35%;overflow: hidden}
.sidebar-prolist li img{transition: all 0.1s linear}
.sidebar-prolist li > div{flex: 1;padding-left: 10px}
.sidebar-prolist li > div p{color: var(--fontcolorintro)}
.sidebar-prolist li > div a{font-weight: bold}
.sidebar-prolist li:hover a{color: var(--color)}
.page-main{flex: 1;width: 100%;padding-left: 30px}
/* product list*/
.pro-list{display: flex;flex-wrap: wrap;padding: 0}
.pro-list li{margin-bottom: 20px;border: 1px solid #E1E1E1;overflow: hidden;text-align: center;transition: all .1s linear;display: flex;position: relative}
.pro-list li:hover{border-color: var(--color)}
.pro-list li.pro-item-checked .pro-img img, .pro-list li:hover .pro-img img{transform: translate(-50%, -50%) scale(1.05)}
.pro-list li.pro-item-checked .pro-info .title a, .pro-list li:hover .pro-info .title a{color: var(--color);text-transform: capitalize}
.pro-list li.pro-item-checked .pro-info .icon, .pro-list li:hover .pro-info .icon{opacity: 1;transform: translateY(0)}
.pro-list li .pro-img a{display: block;overflow: hidden;position: relative;height: 0px;padding-bottom: 100%}
.pro-list li .pro-img a img{width: 100%;height: 100%;object-fit: cover;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: all .1s linear}
.pro-list li .pro-img a .icon-hottitle{position: absolute;z-index: 9;color: var(--color);line-height: 1;font-size: 40px;left: 2px;top: 2px}
.pro-list li .pro-img a .icon-hottitle:hover{animation: scaleproicon 2s linear infinite}
@keyframes scaleproicon{0%{transform: scale(1)}
35%{transform: scale(1.05)}
70%{transform: scale(0.95)}}
.pro-list li .pro-info{flex: 1;padding: 10px}
.pro-list li .pro-info .title a{display: inline-block;margin-bottom: 10px;color: var(--fontcolortitle);line-height: 20px;font-size: 16px}
.pro-list li .pro-info .pro-btn{color: var(--color)}
.pro-list li .pro-info .icon{border: 1px solid #E8E8E8;background: #FFF;color: #666;position: absolute;top: 5px;right: 5px;width: 35px;height: 35px;display: inline-flex;align-items: center;justify-content: center;cursor: pointer;opacity: 0;transform: translateY(10px);transition: all .2s linear}
.pro-list li .pro-info .icon.pro-checked{color: var(--color)}
.pro-list li .pro-info .data-price{display: none;font-size: 14px}
.pro-list.list1 li{width: 32%;margin-right: 2%;flex-direction: column}
.pro-list.list1 li:nth-child(3n){margin-right: 0px}
.pro-list.list1 li .pro-info{display: flex;flex-direction: column;justify-content: space-between}
.pro-list.list1 li .pro-info .text{display: none}
.pro-list.list0 li{width: 100%;align-items: center}
.pro-list.list0 li .pro-img{width: 300px}
.pro-list.list0 li .pro-info{display: flex;flex-direction: column;justify-content: center;text-align: left;padding: 20px;padding-right: 50px}
.pro-list.list0 li .pro-info .title a{font-size: 18px}
.pro-list.list0 li .pro-info .text{margin-bottom: 10px}
/*分页*/
.mypages{clear: both;margin: 20px 0px 20px 0px;text-align: center;height: 40px;line-height: 40px;}
.mypages ul{display: inline-block;margin: 0 auto;}
.mypages li{padding: 0 15px;line-height: 30px;display: inline-block;font-size: 14px;border: 1px solid #ddd;border-radius: 5px;margin: 0 3px;float: left;background-color: #FFF;cursor: pointer;}
.page-num{padding: 0 15px;line-height: 30px;display: inline-block;font-size: 14px;border: 1px solid #ddd;border-radius: 5px;margin: 0 3px;float: left;background-color: #FFF;cursor: pointer;}
.page-num-current, .page-num-current a, .page-num-current a:hover{color: #fff;background-color: var(--color);;}
/* feedbackForm*/
#toinquiry{position: fixed;width: 380px;}
#feedbackForm input, #feedbackForm textarea, #feedbackForm select{width: 100%;outline: 0;border: 1px solid #E5E5E5;padding: 10px;border-radius: 4px;margin-top: 1em;font-size: 14px;transition: all .1s linear;box-shadow: none}
#feedbackForm input::placeholder, #feedbackForm textarea::placeholder{color: #999}
#feedbackForm input.input-error, #feedbackForm textarea.input-error{border-color: red}
#feedbackForm input:focus, #feedbackForm textarea:focus{box-shadow: 1px 2px 10px rgba(0, 0, 0, .05)}
#feedbackForm input{height: 40px}
#feedbackForm .feed-verification{width: 100%;display: flex;align-items: flex-end}
#feedbackForm .feed-verification input{width: 150px !important}
#feedbackForm .feed-verification .verification-box{margin-left: 10px;height: 40px;padding: 4px 0px}
#feedbackForm .feed-verification .verification-box img{width: auto;height: 100%}
#feedbackForm textarea{height: 140px;font-family: inherit;resize: none}
#feedbackForm .send-btn{width: 150px;height: 40px;background: var(--color);border-radius: 4px;margin-top: 10px;display: flex;align-items: center;justify-content: center;color: #FFF;cursor: pointer;transition: all .1s linear;font-size: 16px;}
#feedbackForm .send-btn:hover{opacity: .8}
#feedbackForm .select-menu{width: 100%;margin-top: 1em;position: relative}
#feedbackForm .select-menu .select-menu-div{position: relative;width: 100%}
#feedbackForm .select-menu .select-menu-div em{margin-right: 5px;position: absolute;right: 24px;top: 20px;transition: all .4s ease}
#feedbackForm .select-menu .select-menu-div em.select-menu-i{transform: rotateX(180deg)}
#feedbackForm .select-menu .select-menu-div em::after, #feedbackForm .select-menu .select-menu-div em::before{content: "";width: 10px;height: 2px;background: var(--color);position: absolute;top: 50%;left: 0px;transform: rotate(45deg)}
#feedbackForm .select-menu .select-menu-div em::after{transform: rotate(-45deg);left: 6px}
#feedbackForm .select-menu .select-menu-div .select-menu-input{margin: 0px !important;width: 100% !important;cursor: pointer;user-select: none;padding-right: 40px;user-select: none;color: #999}
#feedbackForm .select-menu .select-menu-ul{box-shadow: 0 1px 15px 0 rgba(15, 19, 39, .1);list-style: none;opacity: 0;display: none;width: 100%;text-align: left;border: 1px solid #ddd;background: #FFF;position: absolute;z-index: 1}
#feedbackForm .select-menu .select-menu-ul li{padding: 0px 20px;line-height: 2.5;cursor: pointer;font-size: 13px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden}
#feedbackForm .select-menu .select-menu-ul li:hover{background: #F2FAEA}
#feedbackForm .select-menu .select-menu-ul li:nth-child(2n){background: #f5f4f4}
#feedbackForm .select-menu .select-menu-ul li:nth-child(2n):hover{background: #F2FAEA}
#feedbackForm .select-menu .select-menu-ul li.select-this{background: #F2FAEA}
#feedbackForm .select-menu .select-menu-ul li.select-this:hover{background: #F2FAEA !important}
/* products details*/
.prodetails-top{display: flex;flex-wrap: wrap}
.page-box-shadow{background: #FFF;box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .17);border-radius: 4px;padding: 30px;margin-bottom: 25px;/*width: 80%;*/}
.singglepic{width: 400px}
.singglepic img{width: 100%}
.preview-container{width: 400px;position: relative}
.preview-container #media{height: 400px !important;width: 100%;display: none;border: 1px solid #DFDFDF}
.preview-container .small-box{width: 100%;height: 400px;border: 1px solid #DFDFDF;position: relative}
.preview-container .small-box img{width: 100%;height: 100%;object-fit: contain}
.preview-container .small-box .hover{position: absolute;width: 180px;height: 180px;background-color: rgba(204, 204, 204, .6);border: 1px solid #EEE;display: none;cursor: move;z-index: 9}
.preview-container .small-box .vPlay{position: absolute;right: 0px;bottom: 0px;z-index: 9;width: 40px;height: 40px;text-align: center;line-height: 40px;background: rgba(0, 0, 0, .4);cursor: pointer;color: #FFF;display: none;font-size: 24px}
.preview-container .thumbnail-box{margin-top: 20px;position: relative;padding: 0px 40px}
.preview-container .thumbnail-box .item{height: 85px;display: flex;align-items: center;justify-content: center;border-radius: 3px;border: 1px solid #DCDCDC;cursor: pointer;overflow: hidden}
.preview-container .thumbnail-box .item .imgalt{display: none}
.preview-container .thumbnail-box .item.item-cur{border-color: var(--color)}
.preview-container .thumbnail-box .prodetails-button-next, .preview-container .thumbnail-box .prodetails-button-prev{display: block;position: absolute;left: 0px;top: 50%;transform: translateY(-50%);display: inline-flex;align-items: center;justify-content: center;cursor: pointer;width: 30px;height: 30px;transition: all .2s linear}
.preview-container .thumbnail-box .prodetails-button-next:hover, .preview-container .thumbnail-box .prodetails-button-prev:hover{color: var(--color)}
.preview-container .thumbnail-box .prodetails-button-next{left: auto;right: 0px}
.preview-container .banner-page{display: none}
.preview-container .big-box{display: none;border: 1px solid #DFDFDF;border-left: none;width: 420px;height: 400px;position: absolute;left: 100%;top: 0px;overflow: hidden;z-index: 999;background: #FFF}
.preview-container .big-box img{display: block;max-width: none;max-height: none;width: 150%}
.prodetails-info{flex: 1;width: 100%;padding-left: 5%}
.prodetails-info .prodetails-name{font-size: 22px;font-weight: 700;color: var(--fontcolortitle);border-bottom: 1px solid #E5E5E5;padding-bottom: 10px;margin-bottom: 20px}
.prodetails-info .prodetails-price{color: var(--fontcolorintro)}
.prodetails-info .prodetails-text{margin-bottom: 20px;color: var(--fontcolorintro)}
.prodetails-info .prodetails-btnlist{margin-top: 30px;display: flex;flex-wrap: wrap}
.prodetails-info .prodetails-btnlist > *{margin-right: 20px;margin-bottom: 10px}
.prodetails-info .prodetails-btnlist .addToCart, .prodetails-info .prodetails-btnlist .pro-btn, .prodetails-info .prodetails-btnlist > *{display: inline-flex;align-items: center;justify-content: center;color: #FFF;width: 180px;height: 40px;background: none;border-radius: 18px;cursor: pointer;transition: all .1s linear;border: 1px solid var(--color);color: var(--color)}
.prodetails-info .prodetails-btnlist .addToCart i{margin-left: 5px}
.prodetails-info .prodetails-btnlist .addToCart:hover, .prodetails-info .prodetails-btnlist .pro-btn:hover{opacity: .8}
.prodetails-info .prodetails-btnlist .addToCart.added{background: var(--color);color: #FFF}
.product-catelist{width: 100%;display: flex;flex-wrap: wrap}
.product-cateitem{width: calc(33.33% - 17px);margin: 0px 25px 25px 0px;overflow: hidden;position: relative;border: solid 1px #EEE}
.product-cateitem:hover .cate-img img{transform: scale(1.02)}
.product-cateitem:hover .cate-img::after{opacity: .5}
.product-cateitem:hover .cate-info{background: var(--color);color: #FFF}
.product-cateitem:nth-child(3n){margin-right: 0px}
.product-cateitem .cate-img{overflow: hidden}
.product-cateitem .cate-img img{width: 100%;height: 100%;object-fit: cover;transition: all .2s linear}
.product-cateitem .cate-img::after{content: "";display: block;position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;background-color: rgba(0, 0, 0, .5);opacity: 0;transition: opacity .3s;z-index: 1}
.product-cateitem .cate-info{position: absolute;left: 30px;bottom: 30px;background: #FFF;width: 70%;color: var(--fontcolortitle);padding: 4% 6%;transition: all .1s linear;z-index: 2;border-radius: 4px}
.product-cateitem .cate-info .cate-title{font-size: 20px;font-weight: 700;line-height: 26px;text-transform: capitalize}
.product-cateitem .cate-info .cate-text{line-height: 1.6;margin: 10px 0px;opacity: .8}
.product-cateitem .cate-info .cate-more{width: 120px;height: 36px;border-radius: 30px;border: 1px solid #E5E5E5;color: var(--fontcolorintro);display: inline-flex;align-items: center;justify-content: center;font-size: 14px;background: #FFF}
.product-cateitem .cate-info .cate-more em{margin-left: 10px}
.prodetails-content{/*margin-top: 40px*/}
#tagTabs{display: flex;align-items: center}
#tagTabs .tagItem{white-space: nowrap;background: #F2F2F2;border-radius: 30px;margin-right: 20px;display: flex;align-items: center;justify-content: center;height: 44px;padding: 0px 30px;font-weight: 700;cursor: pointer}
#tagTabs .tagItem.current{background: var(--color);color: #FFF}
.tagContent{/*padding: 20px 0px 0px*/}
.pagelink{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center}
.pagelink .pagelink-item{width: 50%;border: 1px solid #ddd;display: flex}
.pagelink .pagelink-item .pagelink-info{display: flex;align-items: center;width: 100%}
.pagelink .pagelink-item .pagelink-info p{flex: 1}
.pagelink .pagelink-item .pagelink-info .link-intro{flex: none;padding: 10px 10px;width: 80px;text-align: center;margin-right: 10px}
.pagelink .pagelink-item .pagelink-info a{flex: 1;color: #888;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden}
.pagelink .pagelink-item .pagelink-info a:hover{text-decoration: underline}
.pagelink .pagelink-item.next .pagelink-info p:nth-child(1){text-align: right}
.pagelink .pagelink-item.prev .link-intro{border-right: 1px solid #d1d1d1}
.pagelink .pagelink-item.next{justify-content: flex-end}
.pagelink .pagelink-item.next .link-intro{border-left: 1px solid #d1d1d1;margin-right: 0px;margin-left: 10px}
.prodetails-related{margin-top: 40px}
.prodetails-related .title{color: var(--fontcolortitle);font-size: 24px;font-weight: 700;position: relative;padding-bottom: 10px;margin-bottom: 10px}
.prodetails-related .related-list{display: flex;flex-wrap: wrap}
.prodetails-related .related-item{width: 16.6666%;border: 1px solid #E5E5E5;overflow: hidden;text-align: center;transition: all .1s linear;display: flex;flex-direction: column}
@media (min-width: 501px){.prodetails-related .related-item:nth-child(n+2){border-left: none}}
@media (max-width: 500px){.prodetails-related .related-item:nth-child(n+2){border-top: none}}
.prodetails-related .related-item:hover{border-bottom: solid 1px var(--color)}
.prodetails-related .related-item:hover .related-img img{transform: translate(-50%, -50%) scale(1.05)}
.prodetails-related .related-item:hover .related-info .related-title a{color: var(--color)}
.prodetails-related .related-item .related-img a{display: block;overflow: hidden;position: relative;height: 0px;padding-bottom: 100%}
.prodetails-related .related-item .related-img a img{width: 100%;height: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: all .1s linear}
.prodetails-related .related-item .related-info{flex: 1;font-size: 14px;padding: 10px;display: flex;flex-direction: column;justify-content: space-between}
.prodetails-related .related-item .related-title a{margin-bottom: 10px;color: var(--fontcolortitle);line-height: 20px}
.prodetails-related .related-item .related-btn{color: var(--color);font-size: 16px;padding-left: 15px}
/* news list*/
.newslist{display: flex;flex-wrap: wrap}
.newslist .newsitem{margin-bottom: 30px;background: #FFF;box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .1);border-radius: 4px;transition: all .1s linear}
.newslist .newsitem:hover{box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .17)}
.newslist .newsitem:hover .news-img img{transform: scale(1.02)}
.newslist .newsitem:hover .news-info .news-title a{color: var(--color)}
.newslist .newsitem:hover .news-info .news-btn{background: var(--color);color: #FFF}
.newslist .newsitem .news-img{overflow: hidden}
.newslist .newsitem .news-img img{width: 100%;height: auto;transition: all .2s linear}
.newslist .newsitem .news-info{padding: 20px;flex: 1}
.newslist .newsitem .news-info .news-title a{font-size: 18px;font-weight: 700;color: #121025;line-height: 26px;text-transform: capitalize}
.newslist .newsitem .news-info .news-date{color: var(--fontcolortitle);font-size: 14px;margin-top: 10px}
.newslist .newsitem .news-info .news-text{margin-top: 10px;color: var(--fontcolorintro);line-height: 24px}
.newslist .newsitem .news-info .news-btn{display: inline-flex;align-items: center;justify-content: center;width: 110px;height: 38px;margin-top: 15px;color: var(--fontcolorintro);border: 1px solid #d2d2d2;transition: all .1s linear;border-radius: 4px}
.newslist.list1 .newsitem{width: 32%;margin-right: 2%}
.newslist.list1 .newsitem:nth-child(3n){margin-right: 0px}
.newslist.list0 .newsitem{width: 49%;display: flex;align-items: center;margin: 5px;}
.newslist.list0 .newsitem .news-img{width: 200px;height: 100%}
.newslist.list0 .newsitem .news-img img{height: 100%;object-fit: cover}
.newslist.list0 .newsitem .news-info .news-title a{font-size: 18px}
/* news details*/
.newscontent-title{font-size: 24px;font-weight: 700;margin-bottom: 20px}
.newscontent-date{color: var(--fontcolorintro);font-size: 14px}
.newscontent-date em{color: var(--color);margin-right: 10px}
.newscontent-date .news-views{margin-left: 20px}
.newscontent-details{margin-top: 20px;margin-bottom: 30px}
/* solution*/
.solution-1-list{display: flex;flex-wrap: wrap;justify-content: flex-end;margin-bottom: 30px}
.solution-1-list .info{flex: 1}
.solution-1-list .info *{text-align: left}
.solution-1-list .info .text{margin: 20px 0px}
.solution-1-list .item{margin-left: 20px;width: 20%;background: #FFF;box-shadow: 0 5px 10px 0 rgba(19, 20, 21, .15);padding: 50px 30px;position: relative;transition: all .1s linear}
.solution-1-list .item:hover{box-shadow: 0 6px 13px 0 rgba(19, 20, 21, .4)}
.solution-1-list .item::before{content: "";position: absolute;left: 0px;bottom: 0px;width: 100%;height: 3px;background: var(--color)}
.solution-1-list .item em{font-size: 52px;color: var(--color);line-height: 1}
.solution-1-list .item img{width: auto;height: 50px}
.solution-1-list .item .title{font-weight: var(--fontweight);padding: 20px 0px;color: var(--fontcolortitle);font-size: 22px}
.solution-2{z-index: 1;position: relative;display: flex;justify-content: flex-end;background-size: 1920px}
.solution-2::before{content: "";position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;background: linear-gradient(270deg, var(--fontcolortitle) 0, rgba(0, 0, 0, 0) 100%);z-index: -1}
.solution-2 .activity-wrap{width: 50%;color: #FFF;padding: 100px 0px;z-index: 9}
.solution-2 .activity-wrap .text{font-size: 18px}
.solution-2 .activity-wrap .title{font-size: 48px;font-weight: var(--fontweight);line-height: 1.2;margin: 10px 0px 20px}
.solution-2 .activity-wrap .content{font-size: 16px;line-height: 24px;margin-bottom: 20px}
.solution-2 .activity-wrap .content p{color: #FFF}
.solution-2 .activity-wrap .img{display: flex;flex-wrap: wrap;margin-bottom: 30px}
.rich_media_content{position: relative;overflow: hidden;}
.rich_media_content *{max-width: 100%!important;box-sizing: border-box!important;-webkit-box-sizing: border-box!important;word-wrap: break-word!important;}
.rich_media_content table{margin-bottom: 10px;border-collapse: collapse;display: table;width: 100%!important}
.rich_media_content td,th{word-wrap: break-word;word-break: break-all;padding: 5px 10px;border: 1px solid #DDD}
.rich_media_content caption{border: 1px dashed #DDD;border-bottom: 0;padding: 3px;text-align: center}
.rich_media_content th{border-top: 2px solid #BBB;background: #f7f7f7}
.rich_media_content td p{margin: 0;padding: 0}
.rich_media_content form{display: none!important}
@media screen and (min-width: 0\0) and (min-resolution:72dpi){.rich_media_content table{table-layout:fixed!important}
.rich_media_content td,.rich_media_content th{width: auto!important}}
.rich_media_content .tc{text-align: center}
.rich_media_content .tl{text-align: left}
.rich_media_content .tr{text-align: right}
.solution-2 .activity-wrap .img img{height: 200px;margin-right: 15px;transition: all .2s linear}
.solution-2 .activity-wrap .img img:hover{transform: translateY(-5px)}
.solution-3{padding-top: 4%}
.solution-3 .solution-3-list{margin-top: 50px;justify-content: center}
/* video*/
#pagevideo{padding: 0px 0px 100px;margin-top: 50px}
.page-video{padding: 0px 60px;position: relative}
.page-video .item:hover .info{background: var(--color)}
.page-video .item:hover .info a, .page-video .item:hover .info p{color: #FFF}
.page-video .item .video{z-index: -1}
.page-video .item .video img{width: 100%}
.page-video .item .info{height: 100px;z-index: 9;background: #FBFBFB;transition: all .2s linear;width: 80%;text-align: center;position: absolute;left: 50%;transform: translateX(-50%);bottom: -100px;padding: 10px 20px}
.page-video .item .info p{font-size: 20px;height: 48px;font-weight: 700;line-height: 24px;margin-bottom: 10px}
.page-video .item .info a{text-decoration: none;color: var(--color);font-size: 16px;display: flex;align-items: center;justify-content: center}
.page-video .item .info a em{margin-left: 10px}
.page-video .video-button-next, .page-video .video-button-prev{position: absolute;top: 50%;left: 0px;background: var(--color);display: inline-flex;align-items: center;justify-content: center;color: #FFF;width: 40px;height: 40px;border-radius: 4px;cursor: pointer;transition: all .1s linear}
.page-video .video-button-next.swiper-button-disabled, .page-video .video-button-prev.swiper-button-disabled{background: #bababa}
.page-video .video-button-next em, .page-video .video-button-prev em{font-size: 20px}
.page-video .video-button-next:hover, .page-video .video-button-prev:hover{opacity: .9}
.page-video .video-button-next{left: auto;right: 0px}
/* faq*/
.page-faq .wrapper{margin-top: 50px;display: flex}
.page-faq .wrapper .img{width: 45%}
.page-faq .wrapper .right{flex: 1;padding-left: 30px}
.page-faq .wrapper .pagefaq-list .item{background: #FFF;box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .17);margin-bottom: 20px;border-radius: 4px}
.page-faq .wrapper .pagefaq-list .item .link{display: flex;align-items: center;justify-content: space-between;padding: 15px 20px;cursor: pointer;transition: all .2s linear}
.page-faq .wrapper .pagefaq-list .item .link p{margin: 0px;color: inherit;font-weight: 700;font-size: 18px}
.page-faq .wrapper .pagefaq-list .item .link em{font-weight: var(--fontweight);transition: all .2s linear}
.page-faq .wrapper .pagefaq-list .item .content{color: var(--fontcolorintro);padding: 20px 20px;display: none}
.page-faq .wrapper .pagefaq-list .item.open .link{background: var(--color);color: #FFF}
.page-faq .wrapper .pagefaq-list .item.open .link em{transform: rotate(180deg)}
/* contact*/
.contact-list{display: flex;flex-wrap: nowrap;}
.contact-list .contact-item{background: #FFF;box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .17);padding: 2%;text-align: center;transition: all .1s linear}
.contact-list .contact-item:hover{box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .25)}
.contact-list .contact-item:hover em{font-size: 28px}
.contact-list .contact-item em{background: var(--color);width: 50px;height: 50px;display: inline-flex;align-items: center;justify-content: center;color: #FFF;font-size: 22px;transition: all .2s linear;    border-radius: 35px;}
.contact-list .contact-item .contact-item-title{font-weight: 700;font-size: 22px;margin: 20px 0px}
.contact-list .contact-item .contact-item-text{margin-bottom: 0px}
.contact-list .contact-item .contact-item-text a{color: var(--fontcolortitle);text-decoration: none;margin-right: 10px}
.contact-list .contact-item .contact-item-text a:hover{color: var(--color)}
.contact-box{margin-top: 70px;box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .17)}
.contact-box .contact-img{/*width: 45%*/height: 600px;}
.contact-box .contact-img img{width: 100%;height: 100%;object-fit: cover}
.contact-box .contact-img iframe{width: 100%;height: 100%}
.contact-main{background: #FFF;box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .17);padding: 2%;text-align: center;transition: all .1s linear;width: 100%;}
.contact-main .title{color: var(--fontcolortitle);font-size: 26px;font-weight: 700;position: relative;padding-bottom: 10px;margin-bottom: 10px;text-transform: capitalize}
.contact-main .title::after{content: "";position: absolute;left: 0px;bottom: 0px;width: 100%;height: 2px;background: var(--color);}
.contact-main #feedbackForm .inquiry-form{display: flex;flex-wrap: wrap;justify-content: space-between}
.contact-main #feedbackForm .inquiry-form input, .contact-main #feedbackForm select{width: 49%}
.contact-main #feedbackForm .send-btn{margin-top: 20px}
/* download*/
.download-list{display: flex;flex-wrap: wrap;justify-content: space-between}
.download-list li{width: 49%;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;box-shadow: 1px 2px 10px rgba(0, 0, 0, .1);transition: all .1s linear;padding: 15px;margin-bottom: 20px}
.download-list li:hover{box-shadow: 1px 2px 10px rgba(0, 0, 0, .2)}
.download-list li .download-img{width: 80px}
.download-list li .download-img img{width: 100%}
.download-list li .download-info{flex: 1;padding: 0px 20px}
.download-list li .download-btn{background: var(--color);display: flex;align-items: center;justify-content: center;color: #FFF;border-radius: 4px;width: 140px;height: 36px;transition: all .2s linear;white-space: nowrap;overflow: hidden;padding: 0px 10px}
.download-list li .download-btn:hover{box-shadow: 1px 2px 10px var(--color)}
.project-list{display: flex;list-style-type: none;flex-direction: column;align-items: center;padding: 0;cursor: pointer;}
.project-name{font-size:1.25rem;}
.toggle-container{overflow: hidden;height: auto;transition: height 0.5s ease;color: #666;}
.toggle-show{height: 100%;/* 根据实际内容调整高度*/}
.project-list li{width: 100%;box-shadow: 1px 2px 10px rgba(0, 0, 0, .05);transition: all .1s linear;margin-bottom: 20px}
.project-list li:hover{box-shadow: 1px 2px 10px rgba(0, 0, 0, .15)}
.project-list li:hover .project-info .project-name{color: var(--color)}
.project-list li:nth-child(4n){margin-right: 0px}
.project-list li .project-img{overflow: hidden}
.project-list li .project-img img{width: 100%;transition: all .1s linear}
.project-list li .project-info{padding: 15px}
.project-list li .project-info a{color: var(--fontcolortitle)}
.project-list li .project-info a .project-name{font-size: 18px;height: 50px;font-weight: 700;margin-bottom: 10px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden}
.project-list li .project-info a .project-content{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden}
.faqs-list li{width: 100%;box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .17);margin-right: 0px;padding: 0px}
.faqs-list li .project-info{background: #FFF;border-radius: 4px;padding: 0px}
.faqs-list li .project-info.open .project-name{background: var(--color);color: #FFF}
.faqs-list li .project-info.open .project-content{display: block}
.faqs-list li .project-info .project-name{background: #FFF;display: flex;align-items: center;justify-content: space-between;padding: 15px 20px;cursor: pointer;transition: all .2s linear}
.faqs-list li .project-info .project-content{color: var(--fontcolorintro);padding: 20px 20px;display: none}
/* inquiry*/
.inquiry-prolist{margin: 20px 0px}
.inquiry-prolist .inquiry-pro-item{display: flex;align-items: center;box-shadow: 1px 2px 10px rgba(0, 0, 0, .1);padding: 20px}
.inquiry-prolist .inquiry-pro-item:nth-child(n+2){margin-top: 20px}
.inquiry-prolist .inquiry-pro-item .pro-item-img{width: 160px}
.inquiry-prolist .inquiry-pro-item .pro-item-img img{border: 1px solid #EEE}
.inquiry-prolist .inquiry-pro-item .pro-item-name{flex: 1;padding: 20px;color: #999}
.inquiry-prolist .inquiry-pro-item .pro-item-name a{color: var(--color);font-size: 18px;font-weight: 700}
.inquiry-prolist .inquiry-pro-item .pro-item-del{background: var(--color);margin-right: 30px;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;color: #FFF;cursor: pointer;border-radius: 4px;transition: all .2s linear}
.inquiry-prolist .inquiry-pro-item .pro-item-del:hover{box-shadow: 1px 2px 10px var(--color)}
.inquiry-feedbackForm #feedbackForm .inquiry-form{display: flex;flex-wrap: wrap;justify-content: space-between}
.inquiry-feedbackForm #feedbackForm input{width: 49%}
.pro-bottom{margin-top: 50px;box-shadow: 0 3px 8px 0 rgba(19, 20, 21, .17);padding: 20px 10px;border-radius: 4px}
.pro-bottom .type-intro{margin-bottom: 10px}
.pro-bottom table td, .pro-bottom table th{padding: 2px 10px}
.pro-bottom a{color: var(--color);text-decoration: underline}
@media (max-width: 1280px){.sidebar{width: 320px}
.sidebar-item{padding: 20px}
#toinquiry{width: 320px;}
.page-main{padding-left: 20px}
.pro-list.list1 li .pro-img{width: 250px}
.singglepic{width: 300px}
.preview-container{width: 300px}
.preview-container #media{height: 300px}
.preview-container .small-box{height: 300px}
.preview-container .big-box{width: 400px;height: 300px}
.preview-container .thumbnail-box .item{height: 65px}
.prodetails-info{padding-left: 2%}
.download-list li{width: 100%}}
.newsendinquiry{margin-left: 20px;cursor: pointer}