锘縝ody, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, form, button, input, textarea, th, td { font-weight: normal; margin: 0; padding: 0; } body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, i { font: normal 12px/1.5 "Helvetica Neue", "Microsoft YaHei", Helvetica, STHeiTi, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @font-face {font-family:"096MKS"; src: url('../font/096MKS_.TTF'); src:url('../font/096MKS_.TTF') format('woff'), url('../font/096MKS_.TTF') format('truetype'), url('../font/096MKS_.TTF') format('svg'); } ul, ol, li { list-style: none; } a { text-decoration: none; color: #333; } a:hover { text-decoration: none; } img { vertical-align: top; border: 0; } button, input, textarea { font-size: 100%; vertical-align: middle; outline: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } table { border-spacing: 0; border-collapse: collapse; } div, a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .main{ width: 1200px; margin: 0 auto; padding: 0; } .ww768 { display: none; } @media only screen and (max-width: 1200px) { .main{ width: 100%; padding: 0 10px; box-sizing: border-box; margin: 0 auto; } } @media only screen and (max-width: 768px){ body{padding-top:70px;background:#fff;} .ww768 { /* padding-top:70px; */ display: block; } .banner { display: none; } } .left{ float: left; } .right { float: right; } .clearfloat{ clear: both; zoom: 1; } .clearfloat:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } .banner .swiper-slide{width:100%} .banner .swiper-slide img { width: 100%; height: 400px; object-fit: cover; text-align: center; } .phone_banner .swiper-slide { height: 164px; background-size: auto 100%; background-position: center; } .phone_banner .swiper-slide a { display: block; width: 100%; height: 100%; } .banner .swiper-pagination-bullet{ width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 1; transition: all .5s; margin: 0 8px !important; } .banner .swiper-pagination-bullet-active{ background: #004885; } .swiper-container{ width:100% } .phone_banner .swiper-pagination-bullet{ width: .3rem; height: 3px; background: #fff; border-radius: 0; opacity: 1; transition: all .5s; } .phone_banner .swiper-pagination-bullet-active{ background: #004885; } .nav-btn img { margin: .25rem 0; } .mob-nav{ display: none; width: 100%; height: 100%; position: fixed; top: 1rem; left: 0; background: #333; padding: 15px; box-sizing: border-box; z-index: 99999999999999999; } .mob-nav ul li{ font-size: 16px; width: 100%; border-bottom: 2px solid #000; } .mob-nav ul li a{ color: #fff; line-height: 3em; } .banner .swiper-slide img { width: 100%; } .header{ clear: both; /* overflow: hidden; */ padding: 15px 0; } .header .logo{ float: left; } .header .nav{ float: left; padding-top: 10px; } .header .main { width: 1366px; /* overflow: auto; */ } .header .nav ul{ clear: both; overflow: hidden; } .header .nav ul li{ float: left; text-align: center; margin-left: 22px; } .header .nav ul li h3 { font-size: 16px; color: #004885; } .header .nav ul li p{ font-size: 12px; letter-spacing: -1px; color: #004885; } .header .nav ul li:hover h3,.header .nav ul li:hover p{ color: #333; } .header .top_s_rightBox span{ display: inline-block; /* padding-left:6px; */ margin-left:-7px; padding-top:10px; box-sizing:border-box; color:#333; font-weight: bold; } .content{ /* padding-top:70px; */ } .box1 { background: #e8ebec; clear: both; overflow: hidden; } .box1 ul li { float: left; width: 314px; height: 98px; padding-top: 18px; box-sizing: border-box; } .box1 ul li:nth-child(1){ width: 256px; border-right: 2px dashed #273244; text-align: center; } .box1 ul li:nth-child(2):hover,.box1 ul li:nth-child(3):hover,.box1 ul li:nth-child(4):hover{ background-color: #ddd; } .box1 ul li img { float: left; margin-left: 28px; margin-right: 20px; } .box1 ul li:nth-child(1) h3 { font-size: 22px; font-weight: bold; } .box1 ul li:nth-child(1) p{ font-size: 16px; color: #c8152b; } .box1 ul li p{ font-size: 14px; text-transform: uppercase; } .box1 ul li h3{ margin-top: 10px; font-size: 16px; } .box-top { text-align: center; margin-bottom: 40px; } .box-top h3 { font-size: 26px; color: #004885; font-weight: bold; } .box-top p span { display: inline-block; width: 250px; font-size: 16px; text-transform: uppercase; font-weight: bold; color: #a0a0a0; margin-top: 5px; } .box-top p img { margin-top: 10px; } .box2 { padding: 40px 0; } .box2 .list{ clear: both; overflow: hidden; } .box2 .list ul li{ width: 25%; float: left; position: relative; } .box2 .list ul li:hover .img { display: none; } .box2 .list ul li .img { padding-bottom: 42%; background-size: 100% auto; background-position: center; background-repeat: no-repeat; } .box2 .list ul li .imgHover { display: none; } .box2 .list ul li:hover .imgHover { display: block; padding-bottom: 42%; background-size: 100% auto; background-position: center; background-repeat: no-repeat;} .box2 .list ul li h3{ position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; color: #fff; background: rgba(0,0,0,.5); height: 32px; line-height: 32px; font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; } .box2 .list ul li:hover h3{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp:8; -webkit-box-orient: vertical; } .box3{ clear: both; overflow: hidden; padding-bottom: 40px; } .box3 .list ul li{ position: relative; width: 25%; float: left; } .box3 .list ul li:hover .img_box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background-color: rgba(12, 52, 74, 0.53); } .box3 .list ul li .img{ padding-bottom: 57%; background-size: 100% auto; background-position: center; background-repeat: no-repeat; } .box3 .list ul li h3 { background: #004885; padding: 0 8px; color: #fff; font-size: 16px; line-height: 28px; display: inline-block; position: relative; } .box3 .list ul li:nth-child(4) .p{ box-sizing: border-box; padding-top: 20px; } .box3 .list ul li .text{ position: relative; z-index: 3; background: #dee2e5; padding: 20px 10px; } .box3 .list ul li h3:after{ position: absolute; display: block; content: ''; top: -6px; left: 50%; border: 6px solid; border-color: transparent transparent #004885 #004885; transform: rotate(135deg); } .box3 .list ul li p{ color: #004885; font-size: 14px; } .box3 .list ul li .p{ line-height: 20px; font-size: 14px; height: 80px; overflow: hidden; display: -webkit-box; -webkit-line-clamp:4; -webkit-box-orient: vertical; } .box3 .list ul li:nth-child(even) h3:after{ bottom: -14px; top: auto; margin-bottom: 10px; transform: rotate(-45deg); } .box4 { padding-bottom: 40px; } .box4 .left { width: 550px; padding-right: 50px; box-sizing: border-box; } .box4 .left video{ width: 100%; } .box4 .left h3{ background: #004885; text-align: center; color: #fff; font-size: 16px; display: inline-block; padding: 3px 20px; line-height: 16px; margin-bottom: 30px; } .box4 .left h3 p{ text-transform: uppercase; font-size: 12px; letter-spacing: -1px; } .box4 .right { width: 650px; } .box4 .right h3{ background: #eeeeee; margin-bottom: 30px; } .box4 .right h3 span{ background: #004885; text-align: center; color: #fff; font-size: 16px; display: inline-block; padding: 3px 20px; line-height: 16px; } .box4 .right h3 span p{ text-transform: uppercase; font-size: 12px; letter-spacing: -1px; } .box4 .right .new_list ul li { clear: both; overflow: hidden; padding: 18px 0; border-bottom: 1px solid #eee; } .box4 .right .new_list ul li h4{ font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; margin-bottom: 4px; } .box4 .right .new_list ul li p{ font-size: 14px; color: #666; margin-bottom: 10px; } .box4 .right .new_list ul li h5{ font-size: 12px; color: #666; } .box4 .right .new_list ul li .img { width: 110px; height: 75px; display: flex; justify-content: center; align-items: center; float: left; margin-right: 15px; } .box4 .right .new_list ul li .img img{ max-width: 100%; } .box4 .right .new_list ul{ display: none; } .box4 .right .href { width: 150px; margin: 0 auto; display: block; border: 1px solid #004885; padding: 1px 0; border-radius: 30px; text-align: center; margin-top: 20px; } .box4 .right .href h6 { color: #4284d9; } .box4 .right .href p{ color: #666; } .box4 .right .href:hover{ color: #666; border-color: #666; } .box4 .right .href:hover h6{ color: #666; } .box5 .left{ width: 600px; margin-right: 40px; } .box5 .left h3{ font-size: 18px; font-weight: bold; color: #004885; margin-bottom: 20px; } .box5 .left h3 span{ font-weight: normal; } .box5 .left h4{ font-size: 14px; } .box5 .left h4 p{ font-size: 12px; color: #666; } .box5 .left img{ margin-top: 30px; max-width: 100%; } .box5 .right{ width: 560px; } .box5 .right label { display: block; width: 100%; margin-bottom: 25px; } .box5 .right label span{ display: block; font-size: 14px; margin-bottom: 5px; } .box5 .right label input{ width: 100%; background: #fafafa; border: 1px solid #dcdcdc; line-height: 28px; padding: 0 8px; box-sizing: border-box; } .box5 .right label textarea{ width: 100%; height: 120px; background: #fafafa; border: 1px solid #dcdcdc; line-height: 28px; padding: 0 8px; box-sizing: border-box; } .box5 .right button{ float: right; padding: 4px 4px; color: #fff; font-size: 14px; background: #e95a4c; border: none; outline: none; cursor: pointer; margin-left: 10px; } .box6 .list{ border: 1px solid #eee; padding: 20px; margin: 40px 0; } .box6 .list img{ margin-right: 10px; margin-bottom: 10px; } .footer{ margin-top: 40px; background: #223648; padding: 20px 0; clear: both; overflow: hidden; } .footer .img { float: left; text-align: center; margin-right: 20px; } .footer .img img { border-radius: 3px; overflow: hidden; } .footer .img p { font-size: 12px; color: #fff; margin-top: 10px; } .footer .text{ float: left; width: 800px; padding-top: 15px; } .footer .text ul li h3{ float: left; font-size: 14px; color: #fff; padding: 0 15px; border-right: 1px solid #fff; line-height: 14px; } .footer .text ul li:nth-last-child(1) h3{ border-right: 1px solid transparent; } .footer .text p { padding-left: 15px; color: #fff; font-size: 14px; } .box{ clear: both; overflow: hidden; } .box .left { width: 250px; } .box .proleft { width: 300px; } .box .left ul li{ width: 100%; margin-bottom: 25px; background: #e8ebec; padding: 15px 10px; box-sizing: border-box; clear: both; overflow: hidden; } .box .left ul li:hover, .box .left ul li.on { box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3); } .box .left ul li:hover, .box .left ul li:hover a, .box .left ul li.on, .box .left ul li.on a { background: #004885; color: #fff; } .box .left ul li img { float: left; margin-right: 15px; } .box .left ul li h3{ font-size: 16px; margin-top: 10px; } .box .left ul li p{ /* text-transform: uppercase; */ font-size: 12px; } .box .right{ width: 950px; float: left; padding-left: 50px; box-sizing: border-box; } .box .proright{ width: 900px; } .box .right > div{ border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding-bottom:10px; } .box .right h3{ font-size: 26px; line-height: 50px; /*border-top: 1px solid #eee; border-bottom: 1px solid #eee;*/ text-align: center; } .box .right p { font-size: 15px; text-align:center;} .box .right img { max-width: 100%; } .box .right .p{ font-size: 14px; line-height: 26px; /* text-align:center; */ } .box .right .p p{ text-indent:2em; } .box .right .p p:last-child{text-indent:0} .box .main div:nth-child(1) p:first-child{ text-indent:0em !important; } .box .main div:nth-child(2) p:first-child{ text-indent:2em; } .box .paging em + p{padding-top:20px;} .pro .box .left ul li h3{ font-size: 16px; margin-top: 0; } .pro .box .left ul li{ position: relative; } .pro .box .left ul li:after{ display: block; content: ''; position: absolute; border: 4px solid; border-color: transparent transparent #004885 #004885; transform: rotate(225deg); top: 50%; right: 10px; margin-top: -4px; } .pro .box .left ul li:hover h3, .pro .box .left ul li.on h3, .pro .box .left ul li:hover p, .pro .box .left ul li.on p{ color: #fff; } .pro .box .left ul li:hover:after, .pro .box .left ul li.on:after{ border-color: transparent transparent #fff #fff; } .pro .box .right ul li{ width: 48%; margin: 0 1% 15px; float: left; border: 1px solid #eee; box-sizing: border-box; overflow: hidden; } .pro .box .right ul li .img{ padding-bottom: 60%; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .pro .box .right ul li .text{ padding: 10px; border-top: none; } .pro .box .right ul li h3 { border: none; font-size: 16px; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; line-height: 30px; } .pro .box .right ul li p { font-size: 12px; overflow: hidden; text-align:left; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; } .pro .box .right ul li:hover{ border-color: #C8152B; } .pro .box .right ul li:hover .img{ transition: all .6s; transform: scale(1.08); } .pro_details .right{ width: 100% !important; } .news .box .left ul li{ position: relative; } .news .box .left ul li:after{ display: block; content: ''; position: absolute; border: 4px solid; border-color: transparent transparent #004885 #004885; transform: rotate(225deg); top: 50%; right: 10px; margin-top: -4px; } .news .box .left ul li:hover { background: #004885; color: #fff; } .news .box .left ul li:hover h3,.news .box .left ul li:hover p{ color: #fff; } .news .box .left ul li:hover:after{ border-color: transparent transparent #fff #fff; } .news .box .right ul li{ clear: both; overflow: hidden; margin-bottom: 20px; } .news .box .right ul li .img{ width: 150px; height: 120px; background-size: auto 100%; background-position: center; background-repeat: no-repeat; float: left; } .news .box .right ul li h3 { border: none; font-size: 16px; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; line-height: 30px; /* padding-left:10px; */ } .news .box .right ul li p{ color: #666; font-size: 14px; text-align:left; /* padding-left:10px; */ } .news .box .right ul li p:nth-last-child(1){ margin-top: 40px; } .sma-swiper{ margin-top: 30px; } .sma-swiper .swiper-slide img { width: 100%; } .honor .tab_top ul{ clear: both; overflow: hidden; } .honor .tab_top ul li { width: 33.3%; text-align: center; float: left; background: #eee; border: 1px solid #ccc; box-sizing: border-box; line-height: 24px; } .honor .tab_top ul li.on{ border-bottom: none; border-top: 2px solid #004885; } .honor .tab_down ul{ border: 1px solid #ccc; border-top: none; padding: 25px; box-sizing: border-box; } .paging { text-align: center; margin: 30px 0; } .paging a{ padding: 5px 12px; background: #fff; color: #333; border: 1px solid #e2e2e2; } .footer .text p span{font-family:Arial !important} .top_s_rightBox { display: none; float: right; width: 20px; height: 20px; margin-top: 23px; margin-right: 20px; } .top_s_right { width: 20px; position: relative; margin-top: 7px; float: right; } .top_s_right, .top_s_right:before, .top_s_right:after { cursor: pointer; display: block; height: 2px; background-color: #333; -moz-transition-property: background-color, -moz-transform; -o-transition-property: background-color, -o-transform; -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, transform; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } .top_s_right:before { top: -7px; } .top_s_right:after { top: 7px; } .top_s_right:before, .top_s_right:after { width: 20px; position: absolute; content: ""; } .top_s_rightBox.on { position: relative; z-index: 9999999; } .top_s_rightBox.on .top_s_right { width: 0; margin-right: 16px; } .top_s_rightBox.on .top_s_right:before { transform: translateY(7px) rotate(45deg); } .top_s_rightBox.on .top_s_right:after { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1400px) { .header .nav { float: right; } .header .nav ul li { margin-left: 0; margin-right: 19px; } .header .main { width: 100%; } } @media (max-width: 1300px) { .header .nav { padding-top: 13px; } .header .nav ul li h3 { font-size: 14px; } .header .nav ul li p { font-size: 12px; } } @media (max-width: 1210px) { .box4 .left { width: 45%; padding-right: 3%; } .box4 .right { width: 55%; } .box5 .left { width: 50%; margin-right: 3.3%; } .box5 .right { width: 46.7%; } .box-top h3 { font-size: 18px; } .box-top p { background: url(../img/index_20.png) 0 50% repeat-x; } .box-top p span { font-size: 15px; background-color: #fff; } .box-top p img { display: none; } .box .left { width: 100%; } .box .right { width: 100%; padding-left: 0; } .box .left ul li { display: inline-block; width: 250px; } } /*鍦 992 鍜 1199 鍍忕礌涔嬮棿鐨勫睆骞曢噷锛屼腑绛夊睆骞曪紝鍒嗚鲸鐜囦綆鐨 PC*/ @media (max-width: 1199px) { .header .nav { display: none; } .header .nav.on { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999997;-webkit-mask-position: fixed;-webkit-overflow-scroll:touch;} .header .nav.on .zzc {opacity: 0.5;filter:alpha(opacity=50); display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; z-index: 9999998;-webkit-mask-position: fixed;} .header .nav.on .iPhonenav{ display: block; position: fixed; right: 0; top: 0; width: 38%; height: 100%; background-color: #fff; z-index: 9999999;-webkit-mask-position: fixed;} .header .nav ul { position: absolute; top: 48%; text-align: center; width: 100%; } .header .nav ul li { float: inherit; display: inline-block; } /*.header .nav ul li h3 { font-size: 16px; } .header .nav ul li p { font-size: 14px; }*/ .top_s_rightBox { display: inline-block; } .banner .swiper-slide img { object-fit:cover;height: 400px} .box1 ul li:nth-child(1) { display: none;} .footer .text { width: 100%; } .footer .text ul li h3 { margin-bottom: 10px; } } /*鍦 768 鍜 991 鍍忕礌涔嬮棿鐨勫睆骞曢噷锛屽皬灞忓箷锛屼富瑕佹槸 PAD*/ @media (max-width: 995px) { .box2 .list ul li { width: 50%; } .box3 .list ul li { width: 50%; } .box4 .left { width: 100%; padding-right: 0%; margin-bottom: 15px; } .box4 .right { width: 100%; } .header .nav ul { /*top: 10vh; */top:70px} .header .nav ul li { width: 100%; /*padding:1.5vh 0;*/ padding:10px 0} .box .left ul li { width: 100%; margin-bottom: 10px; } .box1 ul,.box1 ul a{display:flex;} .box1 ul li img{margin-right:10px;margin-left:0;} } /*鍦 480 鍜 767 鍍忕礌涔嬮棿鐨勫睆骞曢噷锛岃秴灏忓睆骞曪紝涓昏鏄墜鏈?/ @media (max-width: 767px) { .box5 .left { width: 100%; margin-right: 0%; margin-bottom: 20px; } .box5 .right { width: 100%; } .header .logo { width: 250px; } .top_s_rightBox { margin-top: 5px; margin-right: 0; width:35px;} .header .logo img { width: 100%; } .header .top_s_rightBox span{ padding-left:13px; } .header{ position: fixed; top:0; width:100%; background:#fff; z-index:9; } .header .nav.on .zzc {opacity: 0.5;display: block; position: fixed; z-index: 9999998;-webkit-mask-position: fixed;} .header .nav.on .iPhonenav{ display: block; position: fixed; z-index: 9999999;-webkit-mask-position: fixed;} .box6 .list>img { display: none; } .box6 .list { padding:10px; } .box6 .list a { display: inline-block; width: 48%; margin-bottom: 10px; margin-left: 1%; margin-right: 1%; text-align: center; } .box6 .list a img { width: 100%; height: 44px; } .box1 ul{display:flex;} .box1 ul li { height: 75px; padding-top: 18px; box-sizing: border-box; width:33%; margin-right:10px; overflow: hidden; } .box1 ul li img { width:40px; padding-right:5px; margin-left:0; margin-right:0; } .box1 ul li a{ display:flex; width:100%; } .box1 ul li a div:first-child{ width:35%; margin-right:8px; } .box1 ul li a div:last-child{ width:65%; } .box1 ul li p{ font-size: 12px; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .box1 ul li h3{font-size: 12px;margin-top:0} .footer .text ul li h3{padding:0 5px;font-size:12px;} .footer .text p{padding-left:0;} .footer .text p span{font-size:12px !important;font-family:Arial !important} } /*鍦ㄥ皬浜 480 鍍忕礌鐨勫睆骞曪紝寰皬灞忓箷锛屾洿浣庡垎杈ㄧ巼鐨勬墜鏈?/ @media (max-width: 479px) { } /*鍦ㄥ皬浜 480 鍍忕礌鐨勫睆骞曪紝寰皬灞忓箷锛屾洿浣庡垎杈ㄧ巼鐨勬墜鏈?/ @media (max-width: 399px) { }