@charset "utf-8"; /* CSS Document */ html {} body { font-size: 63%; /*font-family:"\5FAE\8F6F\96C5\9ED1", SimSun;*/ color: #333; font-family: "微软雅黑", 'Microsoft YaHei', SimSun, SimHei, "STHeiti Light", STHeiti, "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif; } html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dl, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0px; padding: 0px; -webkit-font-smoothing: subpixel-antialiased; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } fieldset, img { border: 0; } img, object { max-width: 100%; /*height:auto;*/ width: auto\9; /* for ie8 */ -ms-interpolation-mode: bicubic; } a { outline: none; blr: expression(this.onFocus=this.blur()); text-decoration: none; color: #333; transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -webkit-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s } a:hover { color: #7f0102; text-decoration: none; } input[type='button'] { outline: none; border: 0 none; background-color: transparent; cursor: pointer; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: 400; } /*定义清除浮动样式 方法一*/ .clearfix:after { content: '\20'; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { zoom: 1; } ul, ol, li { list-style: none outside none; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } q:before, q:after { content: ''; content: none; } input, textarea, select { font-weight: inherit; } input, select, textarea, button { vertical-align: middle } .fs36 { font-size: 36px; } .fs30 { font-size: 30px; } .fs24 { font-size: 24px; } .fs22 { font-size: 22px; } .fs20 { font-size: 20px; } .fs18 { font-size: 18px; } .fs16 { font-size: 16px; } .fs15 { font-size: 15px; } .fs14 { font-size: 13px; } .fs13 { font-size: 13px; } .fs12 { font-size: 12px; } @media screen and (max-width:1024px) { .fs36 { font-size: 28px; } .fs30 { font-size: 24px; } .fs24 { font-size: 22px; } .fs22 { font-size: 20px; } .fs20 { font-size: 18px; } } @media screen and (max-width:768px) { .fs36 { font-size: 24px; } .fs30 { font-size: 22px; } .fs24 { font-size: 20px; } .fs22 { font-size: 18px; } .fs18 { font-size: 16px; } .fs16 { font-size: 15px; } .fs14, .fs15 { font-size: 13px; } } @media screen and (max-width:414px) { .fs36 { font-size: 20px; } .fs30 { font-size: 19px; } .fs24 { font-size: 18px; } .fs22, .fs20 { font-size: 16px; } .fs18 { font-size: 15px; } .fs16 { font-size: 14px; } .fs14, .fs13, .fs15 { font-size: 12px; } } .ul-inline { font-size: 0; } .ul-inline li { display: inline-block; *display: inline; *zoom: 1; font-size: 14px; vertical-align: top; } .ul-inline li a { display: block; } .title { display: block; overflow: hidden; text-overflow: ellipsis; } .info { display: block; overflow: hidden; } .img { display: block; overflow: hidden; width: 100%; height: 0; } .imgCentered { display: block; overflow: hidden; width: 100%; height: 0; position: relative; } .img img { width: 100%; display: block; } .imgCentered img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; max-height: 100%; width: auto; margin: auto; } .img img:hover { transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); transition: all ease-in 0.2s; -ms-transition: all ease-in 0.2s; -moz-transition: all ease-in 0.2s; -webkit-transition: all ease-in 0.2s; -o-transition: all ease-in 0.2s; } .time { font-family: 'Arial'; } .clear { clear: both; } .rightDate { float: right; } .row { width: 1200px; margin: 0px auto; *width: 1200px; } @media screen and (max-width:1386px) { .row { width: 1000px; } } @media screen and (max-width:1040px) { .row { width: auto; overflow: hidden; padding-left: 20px !important; padding-right: 20px !important; } } @media screen and (max-width:480px) { .row { padding-left: 10px !important; padding-right: 10px !important; } } /*头部样式*/ .wrap_header { width: 100%; position: absolute; top: 0; z-index: 9; background: url(../../images/gb20200714/header_bg.png) bottom center repeat-x; height: 240px; } .header { max-width: 1400px; min-width: 320px; margin: 0 auto; padding: 0 25px; z-index: 999; position: relative; } #btn_ser { display: none; } .links { float: right; text-align: right; margin-top: 43px; } .links01 ul li { display: inline; height: 25px; } .links01 a { color: #fff; padding: 0 10px; } .links01 a:hover { color: #c81622; } .btn_ser { display: inline-block; width: 34px; height: 31px; cursor: pointer; } .btn_ser img { vertical-align: middle; } .tanchukuang { display: none; top: 10%; position: fixed; width: 36%; height: 400px; left: 50%; margin: 0 0 0 -19%; background: #fff; border: 1px solid #ccc; z-index: 99; } .tanchukuang::before { content: ''; display: block; width: 100%; height: 18px; background: #c81622; position: absolute; left: 0; top: 0; } .tanchukuangin { color: #000; padding: 18px 10px; margin-top: 17px; font-size: 20px; } .close { width: 10px; height: 10px; font-size: 12px; padding: 8px; border: 1px solid #ccc; line-height: 10px; text-align: center; background: #fff; position: absolute; right: -10px; top: -10px; border-radius: 50%; } .topNav { position: absolute; top: 14px; right: 40px; } .topNav a { display: inline-block; height: 30px; line-height: 30px; position: relative; opacity: 0.7; } .topNav a, .mtopNav a { font-size: 14px; display: block; color: #fff; padding: 0px 14px; float: left; /*! width: 28%; */ /*! text-align: center; */ } .topNav a:first-child::after { content: ''; position: absolute; right: 0; top: 10px; bottom: 6px; background: #ba0405; width: 1px; } .topNav a:hover { opacity: 1; } .mtopNav { padding: 15px; overflow: hidden; margin: 0 auto; } .mtopNav a { font-size: 12px; } .serBtn { cursor: pointer; display: inline-block; *display: inline; *zoom: 1; height: 30px; color: #fff; margin-left: 18px; text-align: center; position: relative; z-index: 99992; line-height: 30px; } .serBtn i { display: inline-block; width: 32px; height: 30px; background: url(../../images/gb20200714/ser.png) no-repeat center; *display: inline; *zoom: 1; *width: 30px; *height: 40px; } .serBtn i:before { display: inline-block; vertical-align: middle; } .ser { width: 0; height: 28px; line-height: 26px; float: left; position: relative; overflow: hidden; } .search input { position: absolute; height: 26px; line-height: 26px; color: #262626; border: none; background: none; top: 0px; padding-left: 0px; } .search input.notxt { color: #bbbdc3; padding: 0 0 0 10px; width: 78%; right: 0; border: 1px solid #fff; border-radius: 15px; } .search input.notxt1 { position: absolute; width: 15%; height: 26px; left: 0; border: none; cursor: pointer; overflow: hidden; padding-right: 0; color: #bbbdc3; border: none; background: url(../../images/gb20200714/ser.png) no-repeat center; } .snav { display: block; } .mbtn { display: block; } .logo { max-width: 450px; height: auto; padding: 23px 0; float: left; } /* .logo .logo_01{width: 50%; float: left; } */ /* .logo .logo_02{width: 50%; float: left; } */ .links { position: absolute; right: 10px; top: 0; z-index: 1005; margin-top: 43px; } .links li { float: right; height: 30px; } .links a.btn_ser { padding: 0 2px; height: 30px; } #btn_ser { display: block; } /*导航*/ .nav { width: 61.6%; height: 50px; position: relative; float: right; margin: 53px -25px 0 0; } .nav ul { height: 50px; } .nav ul li { float: left; width: 12.28%; height: 50px; line-height: 50px; text-align: center; position: relative; } .nav ul li a { color: #fff; font-size: 18px; display: block; transition: all 0.3s ease; } .nav ul li .subNav { position: absolute; left: 0; top: 50px; left: 0px; display: none; background: #7f0102; overflow: hidden; width: 100%; z-index: 99; } .nav ul li.on { border-bottom: #7f0102 3px solid; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .nav ul li.on a { color: #fff; } .nav ul li.on .subNav { display: block; } .nav ul li .subNav dl { overflow: hidden; } .nav ul li .subNav dl dd { height: auto; line-height: 18px; text-align: center; } .nav ul li .subNav dl dd:hover { background: #af3233; } .nav ul li .subNav dl dd a { font-size: 1.5em; line-height: 18px; padding: 16px 5px; text-align: center; font-weight: normal; } .nav ul li .subNav dl dd:hover a { color: #fff; } /*手机端导航*/ .mobile { width: 100%; position: absolute; display: none; top: 0px; right: 0; z-index: 99991 } .mobile_title { width: 100%; float: left; color: #fff; position: absolute; left: 0; top: 0; width: 50%; height: 50px; line-height: 50px; text-align: center; font-size: 14px; font-weight: normal; } .mobile_title a { float: left; margin-left: 10px; color: #fff; line-height: 31px; height: 31px; } .mobile-inner-header { width: 100%; height: 24px; position: absolute; top: 22px; right: 20px; } .mobile-inner-header-icon { color: #ffffff; height: 40px; font-size: 20px; text-align: center; float: right; width: 40px; position: relative; -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; transition: background 0.5s; } .mobile-inner-header-icon:hover { opacity: 0.8; cursor: pointer; } .mobile-inner-header-icon span { position: absolute; left: calc((100% - 20px) / 2); top: calc((100% - 1px) / 3); width: 25px; height: 2px; background-color: rgba(255, 255, 255, 1); } .mobile-inner-header-icon span:nth-child(1) { transform: translateY(4px) rotate(0deg); } .mobile-inner-header-icon span:nth-child(2) { transform: translateY(-4px) rotate(0deg); } .mobile-inner-header-icon-click span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickfirst; } .mobile-inner-header-icon-click span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clicksecond; } .mobile-inner-header-icon { color: #fff; height: 20px; float: right; width: 22px; position: relative; cursor: pointer; background: url(../../images/gb20200714/menu.png) no-repeat center; text-align: center; z-index: 9999; } .mobile-inner-header-icon-out span { width: 20px; height: 2px; background-color: #ff5b3a; display: none; } .mobile-inner-header-icon-out span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; } .mobile-inner-header-icon-out span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; } .mobile-inner-header-icon-out span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outthird; } .mobile-inner-header-icon-click { background: none; margin-top: 10px; } .mobile-inner-header-icon span:nth-child(1) { transform: translateY(4px) rotate(0deg); } .mobile-inner-header-icon span:nth-child(2) { transform: translateY(-4px) rotate(0deg); } .mobile-inner-header-icon span:nth-child(3) { transform: translateY(-4px) rotate(0deg); } .mobile-inner-header-icon-click span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickfirst; } .mobile-inner-header-icon-click span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clicksecond; } .mobile-inner-header-icon-click span:nth-child(3) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickthird; } @keyframes clickfirst { 0% { transform: translateY(4px) rotate(0deg); } 100% { transform: translateY(0) rotate(45deg); } } @keyframes clicksecond { 0% { transform: translateY(-4px) rotate(0deg); } 100% { transform: translateY(0) rotate(-45deg); } } @keyframes clickthird { 0% { opacity: 0 } 100% { opacity: 0 } } .mobile-inner-header-icon-out span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; } .mobile-inner-header-icon-out span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; } .mobile-inner-header-icon-out span:nth-child(3) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outthird; } @keyframes outfirst { 0% { transform: translateY(0) rotate(-45deg); } 100% { transform: translateY(-4px) rotate(0deg); } } @keyframes outsecond { 0% { transform: translateY(0) rotate(45deg); } 100% { transform: translateY(4px) rotate(0deg); } } @keyframes outthird { 0% { transform: translateY(0) rotate(90deg); } 100% { transform: translateY(12px) rotate(0deg); } } .mobile-inner-nav { background: #7f0102; width: 100%; position: absolute; top: 0; left: 0px; padding-top: 60px; padding-bottom: 25px; display: none; z-index: 999; } .mobile-inner-nav li a { display: inline-block; line-height: 50px; text-decoration: none; width: 84%; font-size: 1.6em; border-bottom: solid 1px #9c2021; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; padding: 0 8%; } .mobile-inner-nav li { position: relative; padding: 0 15px; } .mobile-inner-nav li a { text-indent: 0; } .mobile-inner-nav li strong { color: #fff; position: absolute; right: 20px; top: 0; font-size: 1.8em; cursor: pointer; width: 40px; height: 45px; text-align: center; line-height: 45px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .mobile-inner-nav li a { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: returnToNormal; animation-name: returnToNormal; color: #fff; } @-webkit-keyframes returnToNormal { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes returnToNormal { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .mobile_subNav { display: none; padding-left: 35px; } .mobile-inner-nav dd a { height: 35px; line-height: 35px; border-bottom: none; font-size: 1.4em; color: #ffe2e3; /*! padding-left: 48px; */ } .mobile_search { clear: both; position: relative; height: 36px; margin: 0 15px; border-bottom: #9c2021 2px solid; /*! border-radius: 30px; */ overflow: hidden; } .mobile_search input.notxt { width: 79%; color: #fff; margin-left: 28px; border: none; height: 34px; background: none; font-size: 16px; } .mobile_search input.notxt1 { width: 45px; background-color: #fff; right: auto; position: absolute; top: 10px; right: 0; background: url(../../images/gb20200714/ser.png) no-repeat center center; border: none; cursor: pointer; } .mobile-links { width: auto; overflow: hidden; border-bottom: solid 1px #747474; padding: 6px 0; text-align: center; } .mobile-links span { padding: 0 30px; display: inline-block; } .mobile-links span:first-child { display: none; } .mobile-links span a { border: none; line-height: 25px; padding: 4px 0; } @keyframes rotate { from { transform: rotateX(90deg) translateY(0%); top: 43px; } to { transform: rotateX(0deg) translateY(0%); top: 43px; } } @-moz-keyframes rotate { from { -moz-transform: rotateX(90deg) translateY(0%); top: 43px; } to { -moz-transform: rotateX(0deg) translateY(0%); top: 43px; } } @-webkit-keyframes rotate { from { -webkit-transform: rotateX(90deg) translateY(0%); top: 43px; } to { -webkit-transform: rotateX(0deg) translateY(0%); top: 43px; } } .wrap_footer { background: #7f0102; border-top: 5px solid #c30505; padding: 22px 0 0; } .footerTop { border-bottom: 1px solid #ac5a5a; padding: 0 0 21px; } .footerTop .rightBox { float: right; margin: 13px 1px 0px; } .footerTop .sina { width: 60px; height: 60px; background: url(../../images/gb20200714/sina.png) center center no-repeat #6c0102; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; display: block; float: right; margin: 0 0 0 32px; } .footerTop .wechat { width: 60px; height: 60px; background: url(../../images/gb20200714/wechat.png) center center no-repeat #6c0102; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; position: relative; float: right; } .footerTop .wechat .code { width: 80px; height: 80px; position: absolute; right: 0; bottom: 80px; display: none; } .footerTop .wechat .code img { display: block; width: 100%; } .footerTop .wechat:hover .code { display: block; } .footerTop .footerLogo { /* float: left; */ } .friendLinks { float: left; margin: 9px 0 0 0; width: 1000px; max-width: 100%; } .friendLinks .title { color: #fff; margin: 0 0 11px; font-weight: bold; } .friendLinks .footerlink { color: #c7a6a6; } .friendLinks .footerlink a { display: block; color: #fff; opacity: 0.7; padding: 5px 0; width: 20%; float: left; } .friendLinks .footerlink a:first-child { /* padding-left: 0; */ } .friendLinks .footerlink a:hover { opacity: 1; } .copyRight { color: #930203; padding: 22px 0 35px 3px; } .copyRight span { color: #fff; opacity: 0.8; padding: 0 14px; display: inline-block; *display: inline; *zoom: 1; } .copyRight span:first-child { padding-left: 0; } @media screen and (max-width:1386px) { .logo, .footerTop .footerLogo { width: 330px; } .nav { margin: 42px 0 0 0; } .friendLinks { margin: 9px 0 0 0; } } @media screen and (max-width: 992px) { .wrap_header { position: static; background: #7f0102; overflow: hidden; height: auto; } .logo { max-width: 270px; padding: 15px 0; } .nav { display: none; } .topNav, .ser { display: none; } .mobile { display: block; } .friendLinks .footerlink a { width: auto; padding: 5px 15px; } .footer { overflow: visible; } .friendLinks { margin: 9px 0 0 0; } .footerTop .footerLogo { float: none; margin: 0 auto 20px; max-width: 70%; } .footerTop .wechat { width: 50px; height: 50px; } .footerTop .sina { width: 50px; height: 50px; margin: 0 0 0 24px; } } @media screen and (max-width:767px) { .friendLink h3 a { font-size: 1.6em; } .friendLink ul li { width: 33.3%; } } @media screen and (max-width:640px) { .logo { margin-right: 60px; max-width: 200px; padding: 11px 0; } .copyRight { font-size: 0; } .copyRight span { display: block; padding: 0; text-align: center; font-size: 14px; line-height: 2; } } @media screen and (max-width:480px) { .friendLinks { float: none; text-align: center; } .footerTop .rightBox { float: none; text-align: center; margin: 20px 0 0; } .footerTop .sina, .footerTop .wechat { display: inline-block; *display: inline; *zoom: 1; float: none; margin: 0 12px; } }