@charset "utf-8"; * { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight: normal; outline: none; } html, body { color: #000; font-size: 16px; font-family: "微软雅黑"; margin-left: auto !important; margin-right: auto !important; text-align: left; } li { list-style: none; } a { text-decoration: none; color: #000; } img, input { border: 0; outline: none; } body .clear { clear: both; height: 0 !important; width: 0 !important; border: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } .clearfix:after { content: ""; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; } .clearfix { zoom: 1; } .fl { float: left; } .fr { float: right; } .px1120 { width: 1120px; max-width: 1120px; margin: 0 auto; } .pic { padding-top: 75%; position: relative; overflow: hidden; } .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 1s; object-fit: cover;} .pic img:hover { transform: scale(1.2); } .wap { display: none !important; } .top>img.wap { display: none; } /*头部*/ .banner { position: relative; } .banner img { width: 100%; height: auto; } .logo22 { position: absolute; left: 4%; top: 4%; } .logo22 a { display: block; font-size: 0; } .logo22 a img { vertical-align: middle; } .logo { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .logo a { display: block; font-size: 0; } .logo a img { vertical-align: middle; } .nav { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; z-index: 1; } .nav:before { content: ""; position: absolute; top: 0; left: 0; right: 50%; margin-right: 560px; height: 60px; background: #2c4780; z-index: -1; } .nav>div { height: 100%; } .nav ul { background: #2c4780; width: 58%; height: 100%; line-height: 60px; position: relative; } .nav ul:after { content: ""; position: absolute; right: -42px; top: 0; border-bottom: 60px solid #2c4780; border-right: 42px solid transparent; } .nav ul li { float: left; width: 20%; font-size: 18px; } .nav ul li a { display: block; color: #fff; } .top { max-width: 1920px; margin: 0 auto; position: fixed; right: 10px; top: 18px; width: 25px; height: 25px; z-index: 9999; } .top>img { display: block; width: 100%; } .wap-menu { position: absolute; top: 0; right: 0; z-index: 99999; font-size: 0; } .wap-menu img { height: 25px; } .close-menu { display: none; position: absolute; right: 0; top: 0; } /*foot*/ .foot { background: #f0f0f0; height: 116px; color: rgba(255, 255, 255, 0.75); position: relative; z-index: 1; } .foot:before { content: ""; position: absolute; left: 42px; right: 0; bottom: 0; top: -35px; background: #2c4780; z-index: -1; } .foot>div { background: #2c4780; } .foot a { color: rgba(255, 255, 255, 0.75); } .foot a:hover { color: #fff; } .foot img { vertical-align: middle; } @media screen and (max-width:1120px) { .px1120 { width: auto; padding-left: 2%; padding-right: 2%; } .nav:before { margin-right: 0; } .logo a img { max-height: 100px; } } @media screen and (max-width:1024px) { .logo22 { left: 2%; top: 2%; } .logo22 a img { max-height: 48px; width: auto;} .foot>div { margin-left: 2%; } .foot:before { left: 2%; } } @media screen and (max-width:768px) { .logo a img { max-height: 65px; } .nav { height: 50px; background: #2c4780; } .nav ul { width: 100%; line-height: 50px; text-align: center; } .nav:before { height: 100%; } .nav ul:after { display: none; } .nav ul li { float: none; display: inline-block; font-size: 16px; } .foot { height: 100px; } .foot:before { top: -20px; } .logo22 a img { max-height: 38px; width: auto;} .logo { transform: translateX(-50%) translateY(-80%); } } @media screen and (max-width:480px) { .logo a img { max-height: 45px; } .nav { position: static; } .foot { height: 75px; } .foot img { max-height: 55px; } .logo22 a img { max-height: 28px; width: auto;} } @media screen and (max-width:375px) { .logo a img { max-height: 30px; } } @media screen and (max-width:320px) {}