@charset "utf-8";
*{box-sizing:border-box;}
html,body{ -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
html{ font-family: sans-serif; font-size: 50px; font-size: calc(100vw/7.5); background: #fff;}
body{ margin: 0; font-size: .28rem; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); max-width: 7.5rem; margin: 0 auto;}

* { margin: 0; padding: 0; font-family: "Microsoft Yahei", Helvetica, sans-serif; background-repeat: no-repeat; }
ul,li { list-style-type: none; }
a { text-decoration: none; font-family: "Microsoft Yahei", Helvetica, sans-serif }
p,h2,h3,h4,h5,span { font-family: "Microsoft Yahei", Helvetica, sans-serif }
img { border: none; } 
body { overflow-x: hidden} 

.head { width: 1200px; height: 80px; margin: 0 auto;}
.head img:first-child { width: 200px; height: 45px; margin-top:15px; display: block; float: left; margin-top: 10px}
.head ul { width: 800px; padding: 0 76px; float: left;}
.head ul li { position: relative; width: 64px; height: 80px; margin-left: 72px; float: left; } 
.head ul li a { width: 64px; height: 80px; display: block; font-size: 16px; line-height: 80px; color: #333333; text-align: center;}
.head ul li.on a,.head ul li:hover a { color: #009BE8; } 
.head ul li.on::after,.head ul li:hover::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 64px; background: #009BE8; } 
.head img:last-child { width: 155px; height: 44px; display: block; float: left; margin-top: 16px}

.banner { width: 1920px; height: 480px; margin: 0 auto;}
.banner img { width: 100%;}

.about { width: 1200px; height: 427px; margin: 0 auto; } 
.about img { width: 500px; height: 427px; display: block; float: left;} 
.about .con { width: 660px; height: 427px; float: left; margin-left: 40px; } 
.about .con img { width: 352px; height: 75px; margin: 80px auto 45px auto; float: none; display: block; }
.about .con p { color: #333333; font-size: 18px; line-height: 28px}  

.bar { width: 1920px; margin: 0 auto; height: 120px;} 

.culture { width: 1200px; margin: 0 auto;}
.culture .cultureImg { width: 352px; height: 75px; margin: 80PX auto 50PX auto; display: block;}  
.culture .cultureCon { width: 1161px; height: 210px; margin: 0 auto; display: block; margin-bottom: 20px} 

.cooperation { width: 1200px; margin: 0 auto;}
.cooperation .cooperationImg { width: 352px; height: 75px; margin: 80PX auto 50PX auto; display: block;}  
.cooperation .cooperationCon { width: 1161px; height: 217px; margin: 0 auto; display: block; margin-bottom: 20px} 

.foot { width: 100%; background: #004466; min-width: 1200px; margin: 0 auto; height: 200px;} 
.foot .con { width: 1200px; margin: 0 auto; padding: 39px 0 } 
.foot .con p { font-size: 14px; color: #99DDFF; line-height: 14px} 
.foot .con p:first-child { margin-bottom: 19px; }
.foot .ba { width: 1200px; border-top: 1px solid #99DDFF; margin: 0 auto; padding-top: 20px}
.foot .ba img { width: 20px; height: 20px; float: left; display: block; margin-top: -3px;  margin-right:10px}
.foot .ba p { font-size: 14px; color: #99DDFF; line-height: 14px; float: left; margin-right: 86px} 


.product { width: 100%;} 
.product img { width: 100%;} 

.productCon { width: 1200px; margin: 0 auto; margin-bottom: 50px}
.productCon img { width: 100%; } 

.productCon2 { width: 100px; min-width: 100%; background: #F3FAFB; } 
.productCon2 img { width: 1200px; margin: 0 auto; display: block;} 

.aboutCon { width: 1200px; margin: 0 auto; margin-bottom: 40px}
.aboutCon p { font-size: 18px; color: #333333; line-height: 28px; margin-bottom: 30px} 
.aboutCon img { width: 1200px; display: block;} 
.aboutCon .aboutImg { width: 351px; height: 75px; margin: 80px auto 40px auto;}