@charset "utf-8"; * { padding: 0; margin: 0; } li { list-style: none; } a { text-decoration: none; } h2, h3, i, em { font-style: normal; } html, body { font-family: 微软雅黑; } input, img, a { outline: none; border: 0; } .clear { clear: both; } .px1300 { max-width: 1300px; margin: 0 auto; } .pic { padding-top: 70%; position: relative; overflow: hidden; } .pic img { position: absolute; left: 0; top: 0; width: 100%; object-fit: cover; height: 100%; transition: all 1s; } .pic img:hover { transform: scale(1.05); } .banner a { position: relative; display: block; } .banner a>img { display: block; width: 100%; } @-webkit-keyframes move1 { 0% { transform: scale(0); } 95% { transform: scale(1.01); } 100% { transform: scale(1); } } @-ms-keyframes move1 { 0% { transform: scale(0); } 95% { transform: scale(1.01); } 100% { transform: scale(1); } } .banner .b-txt { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; } .banner .b-txt p img { -webkit-animation: move1 2s ease-in-out; -moz-animation: move1 2s ease-in-out; -ms-animation: move1 2s ease-in-out; -o-animation: move1 2s ease-in-out; animation: move1 2s ease-in-out; } .banner .b-txt p:first-child img { display: block; width: 460px; margin-left: auto; margin-right: auto; } .banner .b-txt p:last-child img { display: block; max-width: 1298px; width: 100%; margin-left: auto; margin-right: auto; } @-o-keyframes move1 { 0% { transform: scale(0); } 95% { transform: scale(1.01); } 100% { transform: scale(1); } } @-moz-keyframes move1 { 0% { transform: scale(0); } 95% { transform: scale(1.01); } 100% { transform: scale(1); } } @keyframes move1 { 0% { transform: scale(0); } 95% { transform: scale(1.01); } 100% { transform: scale(1); } } #nav { background-color: #fff; box-shadow: 0px 0px 10px rgba(0 0 0 /20%); } .nav>ul>li { position: relative; float: left; width: 16.6%; text-align: center; } .nav>ul>li>a { display: block; padding-top: 15px; padding-bottom: 20px; font-size: 20px; color: #333; font-weight: normal; border-bottom: 5px solid transparent; } .nav>ul>li::after{ content:""; position:absolute; width: 2px; height: 20px; background: #aac1e5; right:0; top:50%; transform:translateY(-50%); } .nav>ul>li:first-child>a { } .nav>ul>li:hover { /* background-color: #0a0d6e; */ } .nav>ul>li:hover>a { font-weight: 700; } .nav>ul>li>ul { position: absolute; left: 50%; width: 100%; background-color: #fff; display: none; box-shadow: 0 0px 10px #b4b5e2; padding: 0 10px; box-sizing: border-box; z-index: 999; transform: translateX(-50%); } .nav>ul>li>ul>li:last-child{ border-bottom:none; } .nav>ul>li>ul>li { position: relative; line-height: 40px; border-bottom: 1px dashed #d3cbcb; } .nav>ul>li>ul>li>span { position: absolute; background: url() no-repeat center center; background-size: 12px auto; width: 20px; height: 20px; right: 5px; top: 13px; } .nav>ul>li>ul>li>span.on { background: url() no-repeat center center; background-size: 12px auto; } .nav>ul>li>ul>li>ul { display: none; } .nav>ul>li>ul>li>ul>li { line-height: 30px; } .nav>ul>li>ul>li>ul>li>a { font-size: 14px; color: #e3dede; } .nav>ul>li>ul>li>a { font-size: 14px; color: #333; } .nav>ul>li>ul>li:hover>a { color: #1d2081; } .footer { background-color: #1d2081; } .footer p { padding: 25px 0; text-align: center; font-size: 18px; color: #fff; } /* 移动端 */ .wap { display: none; } .top { max-width: 1920px; margin: 0 auto; position: absolute; right: 10px; top: 10px; width: 25px; height: 25px; z-index: 9999; } .top>img { display: block; width: 100%; } .wap-menu { position: absolute; top: 20px; right: 0; z-index: 99999; font-size: 0; } .wap-menu img { height: 25px; } .close-menu { display: none; position: absolute; right: 0; top: 0; } @media screen and (max-width: 1300px) { .px1300 { padding-left: 15px; padding-right: 15px; } .banner .b-txt p:first-child img { max-width: 385px; } } @media screen and (max-width: 1024px) { .yd { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; } .yd.on { background: rgba(0, 0, 0, .6); } .wap { display: block !important; } #nav { display: none; } .m-head { position: absolute; top: 19px; right: 0; width: 50px; height: 45px; background: #1d2081; z-index: 999; } .m-logo { font-size: 0; } .m-logo a { font-size: 0; line-height: 40px; display: block; } .m-logo img { max-height: 40px; max-width: 80%; vertical-align: middle; } .m-nav { position: fixed; top: 102px; right: -100%; bottom: 0; z-index: 999; background: #272a90; overflow-y: scroll; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.2); } .m-nav ul { padding: 0 15px; /* border-top: 1px solid rgba(255, 255, 255, 0.2); */ } .m-nav ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: relative; } .m-nav ul li>span.on { transform: rotateZ(90deg); } .m-nav ul li ul { display: none; } .m-nav ul li ul li { border: none; } .m-nav>ul>li a { display: block; font-size: 14px; line-height: 20px; padding: 15px 0; position: relative; color: #fff; margin-top: 20p; } .m-nav>ul>li ul li a { padding: 10px 0; } .m-nav>ul>li>span { position: absolute; width: 20px; height: 20px; background: url(../images/m-nav_down.png) no-repeat; background-size: 14px 14px; background-position: center center; right: 0; top: 15px; cursor: pointer; display: block; color: #fff; transition: all 0.3s; } .yd.on .m-head { left: 0; width: 100%; } } @media screen and (max-width: 700px) { .banner .b-txt p:first-child img { width: 140px; } } @media (min-width: 320px) and (max-width: 560px) { .m-nav{top:75px;} } .head{ background: #1d2081; padding: 20px 0; } .logo{ width: calc(100% - 50px); } .logo img{ max-width: 100%; } .foot a{color:#fff;}