@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: #333; 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: #333; } 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; } .titline i { display: inline; font-style: normal; position: relative; background-image: linear-gradient(#c00000, #c00000); background-position: right bottom; background-size: 0 1px; background-repeat: no-repeat; transition: background-size .8s; font-weight: inherit; } a:hover .titline { color: #c00000; } a:hover .titline i { background-position: left bottom; background-size: 100% 1px; font-weight: inherit; color: inherit; } .clearfix { zoom: 1; } .fl { float: left; } .fr { float: right; } .px1300 { max-width: 1300px; 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 0.5s; } a:hover .pic img { transform: scale(1.1); } a:hover .icon img { animation: jello 1s linear 1; } @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); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; -moz-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } @keyframes ygd { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .wap { display: none !important; } /*头部*/ .head { line-height: 35px; font-size: 14px; color: #fff; padding-top: 20px; margin-bottom: 48px; } .head-l ul li { float: left; position: relative; margin-left: 20px; } .head-l ul li a { display: block; font-size: 0; } .head-l ul li a img { display: inline-block; vertical-align: middle; } .head-l ul li:hover div { display: block; } .head-l ul li div { position: absolute; left: 50%; transform: translateX(-50%); display: none; background: #fff; padding: 5px; border-radius: 2px; } .head-l ul li div img { display: block; width: 100px; } .head-r a { display: inline-block; margin-left: 20px; padding-left: 15px; padding-right: 15px; position: relative; transition: all 0.3s; background-color: rgb(237 252 255 / 20%); border-radius: 4px; font-size: 16px; color: #c80b0d; } .head-r a:first-child img { vertical-align: -2px; padding-right: 10px; } .head-r a::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 15px; background-color: #fff; } .head-r a:first-child::after { display: none; } .head-r a:hover { background: #c80b0d; color: rgba(255, 255, 255, 0.8); } .banner img { display: block; width: 100%; } .logo { float: left; } .logo a { display: block; width: 485px; margin: 0 auto; font-size: 0; } .logo a img { display: inline-block; vertical-align: middle; max-width: 100%; } .search { width: 360px; background: #edfcff; margin: 0 auto; margin-top: 10px; position: relative; float: right; padding: 8px 0; } input, button { border: none; outline: none; } .search .text { padding-left: 15px; padding-right: 120px; height: 34px; font-size: 16px; background: none; color: #333; display: block; width: 100%; } .search .button { width: 100px; height: 34px; position: absolute; top: 50%; transform: translateY(-50%); right: 0; cursor: pointer; font-size: 18px; font-weight: normal; color: #c80b0d; padding-left: 36px; border-left: 1px solid #c9c9c9; } .search input::-webkit-input-placeholder { color: #999999; } .search input::-moz-input-placeholder { color: #999999; } .search input::-ms-input-placeholder { color: #999999; } /*nav*/ .nav { height: 55px; line-height: 55px; background-color: #c80b0d; clear: both; } .nav>ul { font-size: 0; } .nav>ul>li { float: left; position: relative; z-index: 1; width: 20%; } .nav>ul>li:first-child { margin-left: 0; } .nav>ul>li:first-child img { vertical-align: -3px; padding-right: 10px; } .nav>ul>li:nth-child(7) { margin-right: 0; } .nav>ul>li::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65px; background-color: #d6231e; display: none; transition: all 0.3s; z-index: -1; } .nav>ul>li.active::before { display: block; } .nav>ul>li::after { content: ""; position: absolute; left: 100%; top: -10px; border-bottom: 6px solid #9e0401; border-left: 5px solid #9e0401; border-right: 5px solid transparent; border-top: 5px solid transparent; z-index: -1; display: none; } .nav>ul>li.active::after { display: block; } .nav>ul>li.active>a { top: -5px; } .nav>ul>li>a { display: block; /* font-family: 'sySong'; */ font-size: 20px; font-weight: bold; line-height: 55px; color: #fff; text-align: center; position: relative; cursor: pointer; top: 0; z-index: 1; transition: all 0.3s; } .nav>ul>li:hover>a { background-color: #d6231e; } .nav>ul>li.on>div { border-top: 3px solid #ffffff; } .nav>ul>li>a::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; border-bottom: 5px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; } .nav>ul>li.on>a::after { border-bottom: 5px solid #ffffff; } .nav>ul>li.on>a>span { transform: rotate(-180deg); } .nav>ul>li>div { position: absolute; top: 100%; width: 100%; min-width: 120px; left: 50%; transform: translateX(-50%); background: #fff; background: rgb(255 255 255); z-index: 9999; overflow: hidden; line-height: normal; display: none; box-shadow: 0 0 10px rgba(0, 0, 0, .2); } .nav>ul>li>div>ul { overflow: hidden; } .nav>ul>li>div>ul>li>a { display: block; text-align: center; /* font-family: 'sySong'; */ font-size: 16px; line-height: 40px; transition: .3s; } .nav>ul>li>div>ul>li a:hover { background: #c80b0d; color: #fff; } .wap-menu { position: fixed; top: 0; right: 0; z-index: 99999; font-size: 0; width: 40px; height: 40px; justify-content: center; align-items:center; text-align: center; background: #fff; } .wap-menu.on{ background: #fff; } .wap-menu img { height: 20px; margin: 10px auto; } .close-menu { display: none; position: absolute; right: 10px; top: 0; } #link { margin-top: 40px; } .links { background: #fff0f0; } .home_links { padding: 25px 0; height: auto; overflow: hidden; } .home_links .link { margin: 0 auto; text-align: center; } .dhlj { font-size: 0; } .dhlj li { display: inline-block; text-align: left; padding: 0 40px; font-size: 20px; color: #c80b0d; line-height: 26px; cursor: pointer; font-weight: 600; } .dhlj li p { padding-right: 25px; background: url(../images/link.png) right center no-repeat; font-weight: 600; } .dhlj li.on p { background: url(../images/linkxz.png) right center no-repeat; } .home_links_drop { background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, .05); } .home_links_drop ul { display: none; font-size: 16px; padding: 20px 10px; overflow: hidden; max-width: 1200px; margin: 0 auto; } .home_links_drop ul li { float: left; width: 20%; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; } .home_links_drop ul li a { display: block; } .home_links_drop ul li a:hover { color: #245399; } /*foot*/ .footer { padding: 30px 10px; position: relative; background: #b6080a; } .footer p { line-height: 30px; text-align: center; font-size: 18px; font-weight: normal; color: #ffffff; } /* backtop*/ .goTop a { display: block; position: absolute; right: 20px; top: -140px; width: 73px; height: 73px; background-size: cover; text-align: center; font-size: 18px; font-weight: 600; line-height: 73px; color: #ffffff; } .goTop a::before { content: ''; width: 0; height: 0; border: 5px solid #fff; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; border-bottom-color: #fff; position: absolute; left: 31px; top: 21px; } .tabBox .hd { height: 40px; border-bottom: 1px solid #c80b0d; position: relative; margin-bottom: 20px; overflow: hidden; } .tabBox .hd ul { top: 0; overflow: hidden; padding-bottom: 10px; overflow-x: auto; white-space: nowrap; font-size: 0; float: left; max-width: 100%; } .tabBox .hd ul li { display: inline-block; color: #111; margin-right: 20px; position: relative; padding: 0 15px; font-size: 22px; line-height: 30px; } .tabBox .hd ul li.on::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-style: solid; border-width: 0 7px 9px 7px; border-color: transparent transparent #cc0500 transparent; bottom: -11px; background: transparent; } .tabBox .hd ul li a { display: block; } .tabBox .hd ul .on a { color: #c80b0d; font-weight: bold; } .tabBox .hd ul .on a { display: block; /* 修复Android 4.0.x 默认浏览器当前样色无效果bug */ } .tabBox .hd dl { position: absolute; right: 0; top: 5px; } .tabBox .hd dl dd.on { display: block; font-size: 14px; color: #111; } .tabBox .hd dl dd { display: none; } .tabBox .hd dl dd a { display: block; color: #999999; } .tabBox .hd dl dd a:hover { color: #c80b0d; } .tabBox .bd { display: table; table-layout: fixed; } .tabBox .bd ul { position: relative; } .tabBox .bd li { line-height: 33px; } .tabBox .bd li a { color: #666; } .tabBox .bd li a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* 去掉链接触摸高亮 */ .tabBox .bd { display: table; table-layout: fixed; } .tabBox .bd .gd { text-align: center; margin-top: 10px; display: none; } .tabBox .bd .gd a { display: block; font-size: 14px; color: #111; } .public-list dd { font-size: 16px; line-height: 44px; } .public-list dd:first-child { border-top: none; } .public-list dd span { float: right; padding-left: 15px; } .public-list dd a { display: block; padding-left: 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .public-list dd a:hover { color: #c80b0d; font-weight: bold; } .public-list-lh40 dd { line-height: 40px; } .public-list-lh42 dd { line-height: 42px; } .public-list-lh40 dd { line-height: 40px; } .public-list-nospan dd span { display: none; } .public-list-icon2 dd a { display: block; background: url(../images/icon-hsj2.png) no-repeat left center; padding-left: 20px; } .public-list2 {} .public-list2 li { float: left; width: 48%; } .public-list2 li:nth-child(2n) { margin-left: 4%; } .public-list2 li a { display: block; background-color: #ffffff; box-shadow: 0px 0px 30px 0px rgba(106, 106, 106, 0.2); padding: 35px 15px 50px 15px; } .public-list2 li a span { display: block; padding-left: 20px; font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 0px; color: #333333; background: url(../images/icon-time.png) no-repeat; background-position: left center; } .public-list2 li a h3 { font-size: 16px; font-weight: normal; line-height: 30px; height: 90px; overflow: hidden; color: #333333; margin: 15px 0 25px 0; } .public-list2 li a p { font-size: 14px; line-height: 26px; height: 104px; color: #999999; overflow: hidden; } .public-list2 li a:hover h3 { color: #c80b0d; } .public-list3 li a { display: block; position: relative; } .public-list3 li a .pic { padding-top: 70%; } .public-list3 li a span { position: absolute; right: 20px; top: 20px; width: 102px; height: 30px; background-color: rgba(36, 36, 36, .6); text-align: center; line-height: 30px; font-size: 14px; font-weight: normal; color: #ffffff; } .public-list3 li a p { font-size: 18px; font-weight: normal; line-height: 30px; letter-spacing: 1px; max-height: 60px; overflow: hidden; color: #333333; margin-top: 20px; padding: 0 10px; } .public-list3 li a:hover span { background: rgba(200, 11, 13, .9); } .public-list3 li a:hover p { color: #c80b0d; } .public-list4 { overflow: hidden; } .public-list4 li { float: left; width: 48%; margin-top: 50px; } .public-list4 li:nth-child(2n) { margin-left: 4%; } .public-list4 li:nth-child(-n+2) { margin-top: 20px; } .public-list4 li a { display: block; overflow: hidden; } .public-list4 li a .pics { float: left; width: 210px; margin-right: 20px; } .public-list4 li a .pics .pic { padding-top: 70%; } .pl4-info { overflow: hidden; } .pl4-info h3 { font-size: 16px; font-weight: normal; line-height: 26px; height: 52px; overflow: hidden; color: #333333; } .pl4-info p { font-size: 14px; font-weight: normal; line-height: 24px; height: 48px; overflow: hidden; color: #999999; margin: 10px 0; } .pl4-info span { display: block; padding-left: 20px; font-size: 14px; font-weight: normal; line-height: 26px; color: #999999; background: url(../images/icon-time2.png) no-repeat; background-position: left center; } .public-list4 li a:hover .pl4-info h3 { color: #c80b0d; } /* 响应 */ @media screen and (max-width:1300px) { .px1300 { width: auto !important; padding-left: 15px !important; padding-right: 15px !important; } .nav>ul>li { } .dhlj li { padding: 0 25px; } .tabBox .hd ul li { padding: 0 5px; margin-right: 10px; font-size: 20px; } .public-list dd { line-height: 40px; } } @media screen and (max-width:1260px) { .nav>ul>li { margin: 0; } .nav>ul>li>a { padding: 0; font-size: 16px; } } @media screen and (max-width:1100px) { .tabBox .hd ul li::after { bottom: -14px; } } @media screen and (max-width:1024px) { .pc { display: none !important; } .wap { display: block !important; } .m-head { position: fixed; top: 0; left: 0; right: 0; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); 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-tlink { padding: 10px 15px 0 15px; color: rgba(255, 255, 255, 0.8); font-size: 12px; } .m-tlink a { display: inline-block; font-size: 12px; color: #fff; line-height: 28px; } .m-tlink a:first-child img { vertical-align: -2px; padding-right: 5px; } .m-tlink a:nth-child(2) { margin-left: 5px; } .m-search { margin: 0 15px; padding-right: 50px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; position: relative; line-height: 35px; /* background: #fff; */ margin-top: 15px; border: 1px solid #fff; } .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: 0; right: -100%; bottom: 0; z-index: 999; background: #c80b0d; overflow-y: scroll; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 50px; } .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; } .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; } .home_links_drop ul { font-size: 14px; } .home_links_drop ul li { width: auto; margin-right: 10px; } .tabBox .hd { font-size: 18px; margin-bottom: 20px; } .tabBox .hd ul li { font-size: 18px; } .tabBox .hd ul li::after { bottom: -16px; } .public-list3 li a p { font-size: 16px; margin-top: 10px; } .public-list4 li { float: none; width: auto; margin-top: 20px; } .public-list4 li:nth-child(2n) { margin-left: 0; } .public-list4 li:nth-child(1) { margin-top: 0; } .footer{ padding: 15px 10px; } .footer p{ font-size: 16px; } } @media screen and (max-width:768px) { .dhlj li { width: 48%; padding: 0 15px; line-height: 30px; } } @media screen and (max-width:640px) { .tabBox .hd dl { display: none; } .tabBox .bd .gd { display: block; } .tabBox .hd ul li { margin-right: 5px; padding-left: 0; } } @media screen and (max-width:480px) { .tabBox .hd { font-size: 16px; } .tabBox .hd ul li { font-size: 16px; } .tabBox .hd ul li::after { bottom: -19px; } .tabBox2 .bd .tw-list .date { width: 70px; height: 70px; } .tabBox2 .bd .tw-list .date p { line-height: 44px; } .tabBox2 .bd .tw-list .date span { line-height: 26px; } .tabBox2 .tw-list .tw-r { height: 70px; padding: 10px 0 0 20px; } .public-list4 li a .pics { float: none; width: auto; margin-right: 0; margin-bottom: 10px; } } @media screen and (max-width:375px) {}