* { padding: 0; margin: 0; box-sizing: border-box; } @font-face { font-family: sySong; font-weight: normal; font-style: normal; } .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); } } html, body { color: #000; font-size: 16px; margin-left: auto !important; margin-right: auto !important; text-align: left; overflow-x: hidden; } li { list-style: none; } a { text-decoration: none; } img, input { border: 0; outline: none; } .wap { display: none; } .flex { display: flex; justify-content: space-between; flex-wrap: wrap } .flex-left { display: flex; flex-wrap: wrap } .flex-center { display: flex; flex-wrap: wrap; justify-content: center; } .flex-right { display: flex; flex-wrap: wrap; justify-content: flex-end; } .flex-v-center { display: -webkit-flex; display: flex; flex-direction: column; justify-content: center } .flex-v { display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-between; } .flex-v-bottom { display: -webkit-flex; display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: left; } .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; } .pic { padding-top: 75%; position: relative; overflow: hidden; } .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 0.5s; } .pic img:hover { transform: scale(1.2); cursor: pointer; } .px1500 { max-width: 1500px; margin: 0 auto; position: relative; } .tops { padding-top: 34px; padding-bottom: 34px; background: url(../images/bg_header.jpg) bottom center #073D97 no-repeat; background-size: 100% 100%; height: auto; overflow: hidden; } .tops>div { display: flex; justify-content: space-between; align-items: center; } .head_box { z-index: 999; width: 100%; } .fl { float: left; } .logo a { display: block; } .logo a img { display: block; width: 100%; } .fr { float: right; } .linkhome { background: url(../images/ico_home.png) left center no-repeat; position: absolute; left: calc(100% - 290px); } .linkhome a { color: #fff; font-size: 14px; line-height: 36px; padding-left: 20px; } .linkhome a:hover { opacity: 0.8; } .search { position: relative; width: 302px; height: 44px; border: 0; margin-top: 0; line-height: 44px; overflow: hidden; background: #ffffff60; border-radius: 50px; border: 1px solid #073D97; } .search div { margin-left: 40px; } .search a { display: inline-block; } .search a:hover { opacity: 0.85; } .search span { display: inline-block; font-size: 14px; color: #16397b; margin-right: 20px; } .search span:nth-child(1) { margin-right: 15px; } .search input[type="text"] { font-size: 16px; width: 240px; height: 42px; padding-left: 15px; color: #073D97; line-height: 42px; background: none; border-radius: 0; float: left; } .search input[type="text"]::placeholder { font-size: 14px; color: #073D97 } .search .btn { float: right; width: 55px; height: 42px; line-height: 42px; padding: 0 0 0 0; position: absolute; color: #fff; font-size: 16px; background: url(../images/search.png) center no-repeat; cursor: pointer; float: left; right: 0; } .search img { position: absolute; right: 15px; top: 50px; } .head.on .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; border: none; box-shadow: 0 10px 10px rgb(0 0 0 / 20%); } /* */ .nav { height: 70px; line-height: 70px; box-shadow: 0 3px 3px #71717142; position: relative; z-index: 9; background: url(../images/nav_bg.png) center no-repeat; } .nav>ul { font-size: 0; } .nav>ul>li { display: block; text-align: center; position: relative; width: 11.5%; line-height: 70px; height: 70px; margin-bottom: 0; float: left; transition: all 0.6s; } .nav>ul>li:hover { transition: all 0.6s; font-weight: bold; } .nav>ul>li:hover::after { position: absolute; content: ""; width: 100%; height: 7px; bottom: 0; left: 0; background: url(../images/nav_subtop.png) bottom center no-repeat; border-bottom: #fff 2px solid; } .nav>ul>li:first-child { margin-left: 0; border: 0; width: 8%; } .nav>ul>li>a { font-size: 20px; color: #fff; text-align: center; position: relative; display: block; height: 70px; line-height: 70px; } .nav>ul>li.on>a::after { width: 100%; } .nav>ul>li.active>a { color: #a10509; } .nav>ul>li:hover>a { color: #fff; /* font-weight: bold; */ } .nav>ul>li:hover>a:after { width: 100%; } .nav>ul>li>div { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); width: 100%; min-width: 130px; z-index: 9999; display: none; padding: 0; } .nav>ul>li>div>ul { overflow: hidden; background: #073D97; line-height: normal; padding: 15px 0; } .nav>ul>li>div>ul>li a { display: block; font-size: 16px; line-height: 40px; transition: 0.3s; color: #fff; font-weight: normal; } .nav>ul>li>div>ul>li:hover { background: #f9f9f9; color: #073D97; } .nav>ul>li>div>ul>li:hover a { color: #073D97; font-weight: bold; } /* footer */ .footbox { background: url(../images/footer_bg.png) bottom repeat-x; background-size: 100% 100%; height: auto; overflow: hidden; padding: 50px 0 0 0; } .footer { width: 100%; height: auto; overflow: hidden; padding: 50px 0 20px 0; } .foot_left { width: 64%; float: left; position: relative; overflow: hidden; color: #fff; } .foot_left h2 { color: #fff; font-size: 20px; line-height: 50px; position: relative; padding-left: 20px; } .foot_left h2:before { content: ""; position: absolute; left: 0; top: 14px; width: 5px; height: 23px; background: #fff; } .foot_left li { width: 33.33%; float: left; color: #fff; margin: 10px 0; } .foot_left li a { color: #fff; } .foot_right { float: right; color: #fff; line-height: 36px; font-size: 16px; display: table-cell; vertical-align: middle; } .foot_right p { margin: 0; padding: 0; font-size: 16px; line-height: 36px; height: 36px; vertical-align: middle; } .foot_right img { margin-right: 15px; line-height: 36px; width: 20px; height: 20px; vertical-align: middle; } .copyright { height: 64px; line-height: 64px; text-align: center; color: #fff; border-top: #3462af 1px solid; } .copyright p { color: #fff; } .copyright p a { color: #fff; } @media screen and (max-width: 1440px) {} @media screen and (max-width: 1340px) {} @media screen and (max-width: 1200px) { .logo a { width: 700px; } } @media screen and (max-width: 1100px) { .search { width: 300px; } .search input[type="text"] { width: 205px; } } @media screen and (max-width: 1420px) { .px1400 { padding-left: 10px; padding-right: 10px; } .logo a img { width: auto; } } @media screen and (max-width: 1024px) { .footbox { padding: 0 0 0 0; background: #073d97; } .footer { padding: 20px 0 20px 0; } .foot_left { padding-bottom: 20px; } .foot_left, .foot_right { width: 100%; float: none; margin: 0 auto; } body { padding-top: 60px; } .pc { display: none; } .wap { display: block; } .b-top { display: none; } .m-head { position: fixed; top: 0; left: 0; right: 0; background: #073D97; padding: 10px; z-index: 999; box-shadow: 0 5px 5px rgb(0 0 0 / 20%); } .m-logo { font-size: 0; } .m-logo a { font-size: 0; line-height: 40px; } .m-logo img { max-height: 40px; max-width: 80%; vertical-align: middle; } .m-tlink { padding: 10px 15px 0 15px; } .m-tlink a { font-size: 14px; margin-right: 15px; margin: 5px 0; color: #fff; display: inline-block; font-size: 14px; line-height: 24px; background: #fff; color: #333; line-height: 30px; padding: 0 15px; border-radius: 5px; margin: 0 4px; } .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: 60px; left: 100%; right: 0; bottom: 0; z-index: 999; background: #073D97; 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 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; } .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; } } @media screen and (max-width: 768px) { .px1500 { width: 96%; } .picnewbox .linfo p { line-height: 50px; height: 50px; width: 80%; padding-right: 3%; font-size: 16px; } .picnewbox .slick-dots li { width: 15px; height: 15px; background-size: cover; margin: 0; } .picnewbox .slick-dots li.slick-active { width: 15px; height: 15px; background-size: cover; } .public-list li a { font-size: 16px; } .i_title { height: 40px; line-height: 40px; background-size: auto 90%; } .section2 .i_title { margin: 0 0 10px 0; } .i_title h2 { font-size: 24px; margin-top: -10px; } .i_title .more a { background: url(../images/more_bg.png) right bottom no-repeat; background-size: auto 90%; height: 40px; line-height: 40px; padding-left: 30px; font-size: 14px; } .section2 .qtbk { padding-bottom: 20px; } .qtbk-list { padding: 0 0; } .copyright { height: 30px; line-height: 30px; } .foot_left li { width: 50%; } .foot_left li { font-size: 14px; margin: 5px 0; } .foot_right p { font-size: 14px; line-height: 30px; height: 30px; } .copyright p { font-size: 14px; line-height: 30px; } }