@charset "utf-8"; * { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } html{ overflow-x: hidden; } html, body { color: #333; font-size: 16px; font-family: "微软雅黑"; margin-left: auto !important; margin-right: auto !important; text-align: left; max-width: 1920px; } body{ padding-top: 173px; } @media screen and (min-width:1025) { } h1, h2, h3, h4, h5, h6, i, em { font-style: normal; font-weight: normal; } li { list-style: none; } a { text-decoration: none; color: #000;} img, input { border: 0; outline: none; } .icon img { transition: all 0.3s; } .icon:hover img { animation: icon-yh 0.6s linear; } @keyframes icon-yh { 0% { transform: rotateZ(0); } 10% { transform: rotateZ(10deg); } 20% { transform: rotateZ(0); } 30% { transform: rotateZ(-10deg); } 40% { transform: rotateZ(0); } 50% { transform: rotateZ(10deg); } 60% { transform: rotateZ(0); } 70% { transform: rotateZ(-10deg); } 80% { transform: rotateZ(0); } 90% { transform: rotateZ(10deg); } 100% { transform: rotateZ(0); } } .wap { display: none; } .top>img.wap { display: none; } body .clear { float: none !important; clear: both; height: 0 !important; width: 0 !important; border: none !important; margin: 0 !important; padding: 0 !important; } .px1400 { max-width: 1400px; margin: 0 auto; } .text_r1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .text_r2 { white-space: pre-wrap; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .text_r3 { white-space: pre-wrap; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } /* nav */ .head{ } .head { position: fixed; background: #fff; top: 0; left: 0; right: 0; z-index: 1; box-shadow: 0 10px 10px rgba(0, 0, 0, .2); } .head.t60 { top: 60px; } .head-top { padding-top: 20px; padding-bottom: 20px; position: relative; z-index: 999; } .logo { float: left; } .logo a { display: block; font-size: 0; line-height: 70px; } .logo a img { vertical-align: middle; transition: all 0.3s; } .search { float: right; font-size: 14px; line-height: 20px; overflow: hidden; color: #d6d6d6; font-size: 0; text-align: right; } .search span { display: inline-block; font-size: 12px; color: #999; line-height: 12px; vertical-align: middle; } .search a { display: inline-block; font-size: 14px; color: #999999; vertical-align: middle; margin-left: 10px; vertical-align: middle; padding-left: 10px; line-height: 12px; } .search a img { vertical-align: middle; margin-right: 5px; } .search a:first-child+a { border-left: 1px solid #999; } .search a:hover { color: #163dac; } .search-box { overflow: hidden; } .search-box>div { float: right; background: #fff; padding-left: 10px; border: 1px solid #e6e6e6; } .search-box input[type="text"] { width: 135px; padding: 0 10px 0 0; line-height: 30px; height: 30px; background: none; vertical-align: middle; transition: all 0.3s; font-size: 14px; } .search-box input.p-submit { width: 45px; color: #fff; height: 30px; font-size: 14px; vertical-align: middle; background: url(../images/search2.png) no-repeat; background-position: center center; cursor: pointer; font-size: 0; } .search-box img { display: block; height: 17px; margin-top: 9px; cursor: pointer; } .t-search { background: #223356; padding: 10px 0; display: none; } .t-search>div { max-width: 500px; margin: 0 auto; position: relative; padding-right: 50px; padding: 5px 0; background: #fff; } .t-search>div input[type="text"] { display: block; width: 100%; padding: 0 70px 0 20px; height: 30px; box-sizing: border-box; } .search-btn { position: absolute; right: 0; top: 0; height: 40px; width: 40px; background: #9b0c14; } .search-btn input { display: block; width: 20px; margin: 10px auto; } .head-text { margin-top: 15px; } .head-text img { display: block; } .nav { background: #163dac url(../images/nav-bj.png) no-repeat; background-position: center center; background-size: 1920px 100%; transition: all 0.5s; } .nav>ul { font-size: 0; text-align: center; transition: all 0.5s; } .nav>ul>li { display: inline-block; width: 10%; position: relative; transition: all 0.3s; box-sizing: border-box; } .nav>ul>li::before { content: ""; font-size: 16px; position: absolute; left: 0; top: 50%; transform: translateX(-50%) translateY(-50%); width: 12px; height: 22px; background: url(../images/deg-line2.png) no-repeat; background-position: center center; } .nav>ul>li:first-child::before { content: none; } .nav>ul>li>a { font-size: 16px; line-height: 55px; color: #fff; position: relative; } .nav>ul>li>a:after { content: ""; width: 1px; height: 0; background: #163dac; position: absolute; bottom: 0; left: 50%; transition: all 0.3s; } .nav>ul>li>a:before { content: ""; left: 50%; right: 50%; height: 1px; background: #163dac; position: absolute; bottom: -1px; transition: all 0.3s; } .nav>ul>li ul { display: none; position: absolute; top: 100%; padding: 10px 0; width: 200px; background: #fff; overflow: hidden; border-top: 1px solid #fff; border-top: 1px solid rgba(255, 255, 255, 0.6); border-top: 1px solid transparent; z-index: 99999; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .nav>ul>li ul li { padding: 5px 10px; text-align: center; } .nav>ul>li ul li a { display: block; font-size: 14px; color: #333; padding: 10px 0; } .nav>ul>li ul li a:hover { color: #fff; background: #163dac; } .nav>ul>li:hover { background: #fff; } .nav>ul>li:hover::before { content: none; } .nav>ul>li:hover+li::before { content: none; } .nav>ul>li:hover>a { color: #163dac; } .nav>ul>li.active { background: #fff; } .nav>ul>li.active>a { color: #163dac; } .nav>ul>li.active>a::before { left: 0; right: 0; } .nav>ul>li.on>a:after { height: 15px; bottom: -16px; } .nav>ul>li.on>a::before { left: 0; right: 0; } .pic { display: block; padding-top: 75%; position: relative; overflow: hidden; } .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 0.3s; } .pic img:hover { transform: scale(1.05); } .banner { width: 100%; position: relative; } .banner a { display: block; width: 100%; } .banner img { display: block; width: 100%; } .banner a img { display: block; width: 100%; } .banner .slick-slide a { display: block; position: relative; } .banner .slick-dots { width: 100%; max-width: 1400px; text-align: right; left: 50%; bottom: 25px; transform: translateX(-50%); } .banner .slick-dots li { width: 32px; height: auto; background: rgba(255, 255, 255, 0.4); margin: 0 7px; } .banner .slick-dots li.slick-active { background: #02459f; } .banner .slick-dots li button { display: block; width: 32px; height: 32px; padding: 0; margin: 0; font-size: 18px; color: #fff; } .footer { background: url(../images/foot-bj.png) no-repeat; background-size: cover; background-position: center center; padding: 50px 0 0 0; margin-top: 50px; text-align: center; } .footer>div{ font-size: 0; } .foot-l { display: inline-block; width: 35%; vertical-align: middle; text-align: left; } .foot-l p{ color: #fff; font-size: 16px; line-height: 28px; } .foot-l p img{ vertical-align: middle; margin-right: 10px; } .foot-m { display: inline-block; width: 30%; font-size: 0; text-align: center; vertical-align: middle; } .foot-m a{ display: block; } .foot-m a img{ display: block; max-width: 80%; margin: 0 auto; } .foot-r { display: inline-block; width: 35%; vertical-align: middle; text-align: right; } .foot-r img{ display: block; max-width: 90%; margin: 0 auto; } .bq { font-size: 16px; line-height: 30px; padding: 10px 0; color: #fff; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 30px; } @media screen and (max-width:1420px) { .px1400 { padding-left: 10px; padding-right: 10px; } .search-box input[type="text"] { width: 150px; } .nav>ul>li>a { font-size: 14px; } .banner .slick-dots { bottom: 15px; } } @media screen and (max-width:1200px) { } @media screen and (max-width:1024px) { html, body { font-size: 14px; } body { padding-top: 60px; } .pc { display: none; } .wap { display: block; } .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; } .m-head { position: fixed; top: 0; left: 0; right: 0; background: #f0f2fb; padding: 10px; z-index: 999; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); } .m-logo { font-size: 0; } .m-logo a { font-size: 0; line-height: 40px; } .m-logo img { max-height: 40px; max-width: 85%; line-height: 40px; vertical-align: middle; } .m-tlink { padding: 10px 15px 0 15px; } .m-tlink a { font-size: 12px; margin-right: 10px; color: #fff; display: inline-block; line-height: 24px; background: #fff; color: #163dac; line-height: 24px; padding: 0 15px; border-radius: 5px; } .m-search { margin: 0 15px; padding-right: 50px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; position: relative; line-height: 35px; border: 1px solid #fff; border: 1px solid rgba(255, 255, 255, 0.5); margin-top: 15px; } .m-search input[type="text"] { display: block; width: 100%; line-height: 25px; background: none; color: #fff; } .m-search input[type="text"]::placeholder { color: #fff; } .m-search input[type="image"] { position: absolute; right: 10px; top: 10px; height: 15px; } .m-nav { position: fixed; top: 60px; left: 100%; right: 0; bottom: 0; z-index: 999; background: #163dac; overflow-y: scroll; border-top: 1px solid #fff; } .m-nav ul { padding: 0 15px; /* border-top: 1px solid rgba(255, 255, 255, 0.2); */ } .m-nav ul li { border-bottom: 1px solid #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); position: relative; } .m-nav ul li>span.on { transform: rotateZ(90deg); } .m-nav ul li ul { display: none; overflow: hidden; } .m-nav ul li ul li { border: none; float: left; width: 33%; } .m-nav>ul>li a { display: block; font-size: 14px; line-height: 20px; padding: 15px 0; position: relative; color: #fff; } .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; } .bq{ font-size: 14px; line-height: 36px; } .foot-l p{ font-size: 14px; } } @media screen and (max-width:768px) { .zmd{width:100% !important;} .jgs{width:100% !important;} .jgs li{width: 50% !important;} .banner .slick-dots { bottom: 5px; } .banner .slick-dots li { width: 20px; height: 20px; margin: 0 5px; } .banner .slick-dots li button { width: 20px; height: 20px; font-size: 12px; } .footer{ margin-top: 30px; } .foot-l,.foot-m,.foot-r{ display: block; text-align: center; width: auto; } .foot-m{ margin: 20px 0; } } @media screen and (max-width:480px) { .bq { font-size: 12px; line-height: 30px; } } @media screen and (max-width:320px) { .m-nav ul li ul li { width: 50%; } }