body,html{overflow-x: hidden;}
.headernav{width: 100%;z-index: 9999999;}
.headernav_bd{display: flex;justify-content: space-between;align-items: center;}
.headernav_right{display: flex;justify-content: flex-end;align-items: center;}
.headernav_hd{background: #1b1b1b;padding: 15px 0;}
.headernav_hd_con{display: flex;justify-content: space-between;align-items: center;}
.headernav_hd_left ul{display: flex;justify-content: flex-start;align-items: center;}
.headernav_hd_left li{display: flex;justify-content: flex-start;align-items: center;margin-right: 30px;}
.headernav_hd_left li i{color: #fff;font-size: 20px;margin-right: 10px;}
.headernav_hd_left li p{font-size: 16px;color: #fff;}
.headernav_hd_right{display: flex;justify-content: flex-end;align-items: center;}
.headernav_hd_right a{display: block; width: 30px;height: 30px;line-height: 30px;text-align: center;border-radius: 50%;background-color: #606060;margin: 0 5px;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.headernav_hd_right i{color: #fff;font-size: 16px;}
.headernav_hd_right a:hover{background-color: #ffd600;transform: scale(1.2);}
/* 1 */
.indexabout{padding: 100px 0;}
.indexaboutflex{display: flex;align-items: center;flex-wrap: wrap;}
.indexabout_box h2{font-size: 48px;color: #000;font-weight: bold;margin-bottom: 20px;}
.indexabout_box p{font-size: 16px;color: #333;line-height: 28px;text-indent: 2em;margin-bottom: 10px;}
.indexaboutlist{margin-top: 20px;}
.indexaboutlist li{display: flex;justify-content: flex-start;align-items: flex-start;margin-bottom: 20px;}
.indexaboutlist span{ display: block;width: 90px;height: 90px;line-height: 90px;text-align: center;background-color: #f4f4f4;border-radius: 10px;}
.indexaboutlist img{max-width: 100%;vertical-align: middle;}
.indexaboutlisttxt{flex: 1;margin-left: 15px;}
.indexaboutlisttxt h3{font-size: 22px;color: #000;font-weight: bold;margin-bottom: 8px;}
.indexaboutlisttxt p{font-size: 16px;color: #333;}
.indexaboutbtn{display: inline-block;margin-top: 20px;}
.indexaboutmore{display: flex;justify-content: center;align-items: center;padding: 15px 60px;border-radius: 5px;background-color: #ffd600;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexaboutmore p{font-size: 20px;color: #000;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexaboutmore i{font-size: 20px;color: #000;margin-left: 5px;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexaboutmore:hover{background-color: #000;padding: 15px 80px;}
.indexaboutmore:hover p,.indexaboutmore:hover i{color: #ffd600;}
.indexaboutimg img{width: 100%;border-radius: 10px;overflow: hidden;vertical-align: middle;}
/* 2 */
.indexproduct{background-color: #e5e5e5;padding: 90px 0;}
.indexproduct_title{display: flex;flex-direction: column;align-items: center;margin-bottom: 40px;}
.indexproduct_title h2{font-size: 48px;color: #000;font-weight: bold;text-align: center;margin-bottom: 15px;}
.indexproduct_title p{font-size: 24px;color: #000;text-align: center;}
.titleicon {display: flex;justify-content: center;align-items: center;margin-top: 15px;}
.titleicon b{display: block;width: 50px;height: 3px;background-color: #ffd600;margin: 0 10px ;}
.indexproductflex{display: flex;flex-wrap: wrap;}
.indexproductli{margin-bottom: 30px;}
.indexproductbox{height: 100%;background-color: #fff;padding: 20px 15px;border-radius: 10px;}
.indexproductimg{position: relative;overflow: hidden;display: block;width: 100%;border-radius: 5px;height: auto;padding-top: 100%;}
.indexproductimg img{width: 100%;vertical-align: middle;position: absolute;top: 0;left: 0;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexproducttxt{display:block;padding: 15px 15px;text-align: center;background-color: #000;border-radius: 10px;margin-top: 15px;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexproducttxt h3{font-size: 24px;color: #fff;text-align: center;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;overflow: hidden;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexproductli:hover .indexproducttxt{background-color: #ffd600;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexproductli:hover .indexproducttxt h3{color: #000;}
.indexproductli:hover .indexproductimg img{transform: scale(1.2);}
.indexproductbtn{display: flex;justify-content: center;align-items: center;margin-top: 40px;}
.indexproductmore{display: flex;justify-content: center;align-items: center;padding: 15px 60px;border-radius: 10px;border: 1px solid #000;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexproductmore p{font-size: 20px;color: #000;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexproductmore i{color: #000;font-size: 20px;margin-left: 15px;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexproductmore:hover{background-color: #ffd600;border: 1px solid #ffd600;padding: 15px 80px;}
.indexproductmore:hover p,.indexproductmore:hover i{color: #000;}
/* 3 */
.indexcontact{padding: 100px 0;}
.indexcontactflex{display: flex;align-items: center;flex-wrap: wrap;}
.indexcontactmain{padding: 60px 40px;background-color:#eaeaea;border-radius: 10px;}
.indexcontactli input{width: 100%;padding: 0 10px;height: 40px;line-height: 40px;font-size: 16px;color: #000;border: none;outline: none;background-color: #fff;}
.indexcontactli{margin-bottom: 20px;}
.indexcontactli textarea{width: 100%;padding: 15px;height: 120px;font-size: 16px;color: #000;border: none;outline: none;background-color: #fff;resize: none;}
.agree_check{display: flex;justify-content: flex-start;align-items: flex-start;margin: 30px 0;}
.agree_check span{font-size: 16px;color: #666;flex: 1;margin-left: 10px;}
.indexcontactbtn input{padding: 10px 60px;background-color: #ffd600; font-weight: bold; color: #000;border-radius: 30px;font-size: 18px;text-align: center;border: none;outline: none;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexcontactbtn input:hover{background-color: #000;color: #ffd600;}
.indexcontactwenan h2{font-size: 48px;color: #000;font-weight: bold;margin-bottom: 20px;}
.indexcontactwenan p{font-size: 16px;color: #333;line-height: 28px;}
.indexcontactimg{position: relative;overflow: hidden;width: 100%;height: auto;border-radius: 10px;margin-top: 30px;padding-top: 48%;}
.indexcontactimg img{width: 100%;vertical-align: middle;position: absolute;top: 0;left: 0;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexcontactimg:hover img{transform: scale(1.2);}
/* 4 */
.indexserver{padding-bottom: 60px;}
.indexserverli{margin-bottom: 30px;}
.indexserverbox{position: relative;overflow: hidden;border-radius: 10px;}
.indexserverimg{position: relative;overflow: hidden;width: 100%;height: auto;display: block;padding-top: 80%;}
.indexserverimg img{width: 100%;vertical-align: middle;position: absolute;top: 0;left: 0;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexservercover{  z-index: 9; width: 100%;height: 0;background-color: rgba(0,0,0,0.3);position: absolute;bottom: 0;left: 0;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexservertxt{display: block;visibility: hidden;  z-index: 99; position: absolute;top: 50%;left: 50%;transform: translate(-50%,80%);width: 90%;margin: 0 auto;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.indexservertxt h3{font-size: 30px;font-weight: bold;color: #fff;text-align: center;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden;}
.indexserverli:hover .indexservercover{height: 100%;}
.indexserverli:hover .indexservertxt{transform: translate(-50%,-50%);visibility: visible;}
.indexserverli:hover .indexserverimg img{transform: scale(1.2);}
/* 5 */
.indexcustomer{background-color: #e5e5e5;padding: 90px 0; margin-bottom: 70px;}
.indexcustomerflex{display: flex;flex-wrap: wrap;}
.indexcustomerli{position: relative;}
.indexcustomerbox{height: 100%;background-color: #fff;border-radius: 15px;padding: 60px 20px  30px 20px;}
.indexcustomertop{display: flex;justify-content: flex-start;align-items: center;margin-bottom: 20px;}
.indexcustomerimg{width: 100px;height: 100px;line-height: 100px;border-radius: 50%;overflow: hidden;text-align: center;margin-right: 20px;}
.indexcustomerimg img{width: 100%;height: 100%;vertical-align: middle;}
.indexcustomertxt h3{font-size: 18px;color: #000;font-weight: bold;margin-bottom: 10px;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;overflow: hidden;}
.indexcustomertxt p{font-size: 14px;color: #666;}
.indexcustomertxt{flex: 1;}
.indexcustomerwenan p{font-size: 16px;color: #333;line-height: 25px;display: -webkit-box;-webkit-line-clamp: 4; -webkit-box-orient: vertical;overflow: hidden;}
.indexcustomericon{ position: absolute;top: -20px; right: 50px; width: 45px;height: 45px;line-height: 45px;border-radius: 5px;background-color: #ffd600;text-align: center;}
.indexcustomericon i{font-size: 35px;color: #fff;}
/* footer */
.footer{padding: 20px 0  50px 0;}
#indexmap{width: 100%;height: 500px;}
.footer_map{margin-bottom: 60px;}
.copyrights{background-color: #000;padding: 15px 0;}
.copyrights_con{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.copyrights_con p{font-size: 16px;color: #fff;}
.copyrights_con a{font-size: 16px;color: #fff;}
.copyrights_con a:hover{color: #ffd600;}
.headernav_logo img,.footerlogo img{max-height: 100px;}
.footer_list{margin-top: 30px;}
.footer_list li{display: flex;justify-content: flex-start;align-items: center;margin-bottom: 15px;}
.footer_list span{width: 35px;height: 35px;line-height: 35px;text-align: center;  background-color: #ffd600;border-radius: 5px;margin-right: 10px;display: block;}
.footer_list i{font-size: 18px;color: #fff;}
.footer_list p{font-size: 16px;color: #000;font-weight: bold;flex:1;}
.footernavlist h3,.footerwaylist h3{font-size: 20px;color: #000;font-weight: bold;margin-bottom: 20px;}
.footernavlist a{font-size: 16px;color: #000;font-weight: bold;margin-bottom: 10px;display: block;}
.footer_way_icon{margin-top: 20px;display: flex;justify-content: flex-start;align-items: center;}
.footer_way_icon a{display: block;width: 45px;height: 45px;line-height: 45px;text-align: center;background-color: #ffd600;border-radius: 5px;margin-right: 10px;transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}
.footer_way_icon a i{font-size: 24px;color: #fff;}
.footer_nav2{padding-left: 50px;}
.footernavlist a:hover{color: #ffd600;}
.footer_way_icon a:hover{transform: scale(0.9);background-color: #000;}

@media (max-width: 767px){
.headernav_hd{display: none;}
.headernav{padding: 10px 0;}
.indexabout,.indexproduct,.indexcontact{padding: 40px 0;}
.indexaboutimg{margin-top: 30px;}
.indexcontactmain{padding: 30px 15px;}
.indexcontactright {margin-top: 30px;}
.indexcustomer{padding: 40px 0;margin-bottom: 50px;}
.indexcustomerli{margin-bottom: 30px;}
#indexmap{height: 300px;}
.footer_nav2{padding-left: 10px;}
.footer_navtable{display: none;}
.footer_nav {margin: 20px 0;}
.footer_map{margin-bottom: 30px;}
}
@media (min-width: 768px) and (max-width: 992px){
.headernav_hd{display: none;}
.headernav{padding: 10px 0;}
.indexabout,.indexproduct,.indexcontact{padding: 40px 0;}
.indexaboutimg{margin-top: 30px;}
.indexcontactmain{padding: 30px 15px;}
.indexcontactright {margin-top: 30px;}
.indexcustomer{padding: 40px 0;margin-bottom: 50px;}
.indexcustomerli{margin-bottom: 30px;}
#indexmap{height: 300px;}
.footer_nav2{padding-left: 10px;}
.footer_navtable{display: none;}
.footer_nav {margin: 20px 0;}
.footer_map{margin-bottom: 30px;}
}
@media (min-width: 993px) and (max-width: 1200px){
.headernav_hd{display: none;}
.headernav{padding: 10px 0;}
.indexabout,.indexproduct,.indexcontact{padding: 40px 0;}
.indexaboutimg{margin-top: 30px;}
.indexcontactmain{padding: 30px 15px;}
.indexcustomer{padding: 40px 0;margin-bottom: 50px;}
.indexcustomerli{margin-bottom: 30px;}
#indexmap{height: 300px;}
.footer_nav2{padding-left: 10px;}
.footer_navtable{display: none;}
.footer_nav {margin: 20px 0;}
.footer_map{margin-bottom: 30px;}
}
@media (min-width: 1201px) and (max-width: 1600px) {}