* { font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; padding: 0; margin: 0; box-sizing: border-box; overflow-scrolling: touch; -webkit-overflow-scrolling: touch } body { padding: 0; margin: 0; font-family: Arial, "Microsoft Yahei", Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; line-height: 1; font-size: 14px; overflow-x: hidden; background: url(../images/top_nav_bg.jpg); } html,body { min-height: 100vh } html { overflow: -moz-scrollbars-vertical } html::-webkit-scrollbar { width: 4px; height: 8px; background-color: #F5F5F5 } html::-webkit-scrollbar-track { border-radius: 10px; background-color: #E2E2E2 } html::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #333 } table { border-collapse: collapse; border-spacing: 0 } table td { line-height: 1.25; padding: 5px; padding-left: 15px } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden } .clearfix { *zoom: 1 } a { text-decoration: none; bblr: expression(this.onFocus=this.blur()); outline-style: none; outline: none } a,input,img,:focus { mayfish: expression(this.onfocus=this.blur); cursor: handbblr:expression(this.onFocus=this.blur()); outline-style: none } input{background: none;} ul { list-style: none } img { border: 0px; vertical-align: middle } ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,p { padding: 0; margin: 0; font-weight: normal } h3,h4,h5 { font-weight: normal } h4 a:hover,h5 a:hover { -moz-transition: all 0.36s ease-in-out; -webkit-transition: all 0.36s ease-in-out; -o-transition: all 0.36s ease-in-out; -ms-transition: all 0.36s ease-in-out; transition: all 0.36s ease-in-out } hr { display: block; height: 1px; border: 0; background: #d8d8d8; padding: 0; margin-bottom: 3.25rem; margin-top: 2.5rem } abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video { display: block } .fl { float: left } .fr { float: right } .clear { clear: both; height: 0px; font-size: 1px; line-height: 0px } .container01,.container02,.container03,.container04,.container05,.container06,.container07,.container08,.n-container01,.n-container03,.n-container04 { margin: 0 auto } .slow img:hover { transform: scale(1.05) } .slow img { -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out } h5 a,.more a { -moz-transition: all 0.36s ease-in-out; -webkit-transition: all 0.36s ease-in-out; -o-transition: all 0.36s ease-in-out; -ms-transition: all 0.36s ease-in-out; transition: all 0.36s ease-in-out } .slow01 { -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out } .slow02 { -moz-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -ms-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s } .shadow { -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=90, Color='#999999')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=90, Color='#999999'); -moz-box-shadow: 1px 1px 10px #999999; -webkit-box-shadow: 1px 1px 10px #999999; box-shadow: 1px 1px 10px #999999 } .radius { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px } .opacity { filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1; -khtml-opacity: 1 } .overfloat-dot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .overfloat-dot-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } .overfloat-dot-3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical } .overfloat-dot-4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical } .overfloat-dot-5 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical } .overfloat-dot-6 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical } .overfloat-dot-7 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical } .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; -khtml-opacity: 0.6 } .ar_wap { display: none } .a_body { position: relative; z-index: 0 } .section { overflow: hidden } .w1470 { margin: 0 auto; padding: 0 0px; max-width: 1470px } .header_box_li { height: 8.625rem; position: relative; z-index: 1; transition: 0.4s } .header_box_li.sticky { position: fixed; height: 3.75rem; box-shadow: 0 8px 8px rgba(0, 55, 59, 0.25); top: 0; left: 0; right: 0; z-index: 999 } @-webkit-keyframes sticky { 0% { top: -200px } 100% { top: 0 } } @keyframes sticky { 0% { top: -200px } 100% { top: 0 } } .header_box_li.sticky .header_top { display: none } #nav .search_btn { margin-top: 5px } .header_box_li.sticky #nav .search_btn { display: block; height: 35px; width: 35px; border-radius: 50%; background: url(../images/sticky_ss.png) no-repeat center center; margin: 6px 0rem 0 2rem } .header_box_li.sticky #nav .search_btn img { display: none } .header_box_li.sticky .w1720 { width: 1470px } .header_box_li.sticky #nav ul li .sub { box-shadow: 0 8px 8px rgba(0, 55, 59, 0.25) } .header_box_li.sticky #nav ul li { height: 2.75rem; line-height: 2.5rem } .header_box_li.xg { height: 4.625rem } .header_box_li.xg #header { height: 4.625rem } .header_box_li.xg #header .header_top { height: 1.3rem } .header_box_li.xg #header .header_top .tianqi { display: none } .header_box_li.xg #header .header_top .list_box0 { display: none } .header_box_li.xg #logo img { width: 70% } .header_box_li.xg #logo .xx { opacity: 0 !important } .header_box_li.xg #logo .box_table { height: 100% !important } .header_box { position: relative; z-index: 10000 } #header { position: absolute; z-index: 999; width: 100%; background-size: cover; transition: 0.4s; background: url(../images/top_nav_bg.jpg); } #header.xg:before { opacity: 0; visibility: hidden } .head_bottom { padding: 1rem 12.5rem 0rem } .header_top { position: relative; height: 2.5rem; padding: 0; text-align: right; z-index: 10000; transition: 0.4s; padding: 0 0 } .header_top .tianqi { display: inline-block; height: 4rem } .header_top .search_btn { display: inline-block; float: none; font-size: 14px; color: #fff } .header_top .search { width: 20px; height: 20px; position: relative; z-index: 20 } .header_top .search .input { position: absolute; z-index: 1; left: auto; right: -.5rem; top: -12px; bottom: auto; height: 40px; width: 0; background: #fff; opacity: 0; visibility: hidden; transition: .5s } .header_top .search .input input { width: 100%; height: 100%; font-size: 13px; padding: 0 2rem 0 1rem; color: #333 } .header_top .search .btn { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 5 } .header_top .search .btn input { cursor: pointer; position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; height: 100%; width: 100% } .header_top .search .btn svg { width: 18px; height: 18px; fill: #fff } .header_top .search:hover .btn svg { fill: #6510AD } .header_top .search:hover .input { width: 16.25rem; opacity: 1; visibility: visible } .header_top .zc_lj a { font-size: 14px; display: inline-block; transition: .6s; margin-left: 1rem; position: relative; line-height: 2.5rem; color: rgba(255, 255, 255, 0.7) } .header_top .zc_lj a:hover { color: #ffba00 } .list_box0 { display: inline-block; vertical-align: top } .list_box0 .li { font-size: 14px; display: inline-block; transition: .6s; margin-left: 1rem; position: relative; line-height: 2.5rem } .list_box0 .li>a { display: block; color: rgba(255, 255, 255, 0.7); transition: 0.5s } .list_box0 .li>a:hover { color: #ffba00 } .list_box0 .li a>img { margin: -1px .625rem 0 0 } .list_box0 .li a .ewm_box { display: inline-block; border: #d3d3d3 1px solid; background: #fff; position: absolute; left: 50%; transform: translateX(-50%) scaleY(1); top: 3.5rem; opacity: 1; visibility: visible; transform-origin: top; display: none } .list_box0 .li a .ewm_box:before { content: ""; position: absolute; border-left: transparent 6px solid; border-right: transparent 6px solid; border-bottom: #fff 6px solid; top: -6px; left: 50%; margin-left: -6px } #m_header .list_box0 { float: right } #m_header .list_box0 .li { line-height: 60px; display: none } #m_header .list_box0 .li a .ewm_box { top: 60px } #m_header .list_box0 .li a>img { height: 16px } .list_box_01 { font-size: 0; white-space: nowrap; padding: .625rem } .list_box_01 li { display: block !important; margin: 0 15px !important; text-align: center } .list_box_01 li h3 img { border: #ededed 1px solid; width: 85px; height: 85px } .list_box_01 li h5 { font-size: .75rem; color: #666666; line-height: 20px; margin: 0 } .list_box0 .li+.li+.li:after { display: none } .list_box0 .li:first-child:after { display: none } .list_box0 .li input.txt { background: none; border-bottom: 1px solid #fff; width: 7.8125rem; padding: 0px 5px 5px; outline: none; border-left: 0; border-right: 0; border-top: 0; color: #fff; float: left } .list_box0 .li input.img { width: 20px; height: 18px; background: url() no-repeat center center; float: left } .header_box .w1470 { height: 100%; position: relative; max-width: 1650px } #header { border-bottom: 1px solid #fb0102 } #header #logo .box_table { width: 202px; display: table } #header #logo .box_table .box_table_cell { display: table-cell; vertical-align: middle } #header #logo .xx p { line-height: 15px !important } #header #logo .xx { color: #fff; transition: 0.4s; opacity: 1; font-family: "楷体"; font-size: 24px; text-align: center } #logo { float: left; /* height: 100%; */ position: relative; } #logo img { transition: 0.4s; max-width: 100% } #logo img.img2 { display: none } #nav { float: right; padding-top: 2px; margin-right: -1.125rem } #nav ul { float: left } #nav ul li { float: left; position: relative; z-index: 0; height: 2.6rem } #nav ul li:before { content: ""; position: absolute; left: 0; width: 100%; height: 41px; bottom: 0; transition: .6s } #nav ul li.on:before,#nav ul li:hover:before { width: 140%; left: -20% } #nav ul li a { display: block; padding: 0.3rem 1.125rem; transition: 0.4s } #nav ul li h3 { font-size: 1.375rem; color: #505050; line-height: 2.125rem; position: relative; transition: .36s; display: inline-block; font-weight: bold; padding-bottom: 9px } #nav ul li h3::after { content: ""; display: block; width: 0%; height: 5px; background: #fb0102; position: absolute; left: 0; bottom: 0; transition: 0.4s } #nav ul li.on h3::after,#nav ul li:hover h3::after { width: 100% } #nav ul li.on h3 { color: #fb0102 } #nav ul li a i { margin: -3px 0 0 .625rem; display: inline-block; width: 10px; height: 5px; background: url() center no-repeat; transition: .5s } #nav ul li.on a i,#nav ul li:hover a i { background: url() center no-repeat } #nav ul li a i { display: inline-block; width: 9px; height: 6px; background-size: contain; vertical-align: middle; margin-left: 8px } #nav ul li .sub { position: absolute; top: 100%; width: auto; left: 50%; z-index: 10000; transform: translateX(-50%) scaleY(0); visibility: hidden; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; transition: .5s; transform-origin: top } #nav ul li .sub .box { padding: 0; text-align: center } #nav ul li .sub a { padding: 8px 1.665rem; line-height: 28px; transition: .6s; font-size: 14px; color: #666666; text-align: center; white-space: nowrap; background: #fff } #nav ul li .sub a:hover { color: #fff; background: #a71313 } #nav ul li:hover .sub { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; visibility: visible; transform: translateX(-50%) scaleY(1) } #nav>ul>li h3:before { content: ""; display: block; position: absolute; width: 21px; height: 12px; left: 50%; margin-left: -10px; bottom: 10px; transition: .3s; opacity: 0; visibility: hidden } #nav>ul>li:hover h3:after,#nav ul li.on h3:after { transform: scale(1) } #nav>ul>li:hover h3:before,#nav>ul>li.on h3:before { opacity: 1; visibility: visible; display: none } .search_btn { cursor: pointer; text-align: center; float: left; transition: .6s; margin: 0 0 0 15px; position: relative } .search_btn img { margin: 0 } #header .dw2 { float: left; height: 90px; width: 53px; cursor: pointer; position: relative; margin-right: 1.5rem; transition: .6s; margin-left: 1rem } #header .dw2:after { content: ""; width: 1px; height: 16px; display: block; position: absolute; background: rgba(255, 255, 255, .75); right: -1.5rem; top: 50%; margin-top: -8px } #header .dw2.yuyan:before { content: ""; width: 1px; height: 100%; display: block; position: absolute; left: 0; top: 0; display: none } #header .dw2 .dh { height: 23px; line-height: 23px; text-align: center; font-size: 13px; color: #fff; cursor: pointer; transition: .6s } #header .dw2 .dh span { padding-right: 14px; width: 53px; height: 23px; display: inline-block; font-style: italic } #header .dw2 .dd { padding-bottom: 10px; padding-top: 10px; position: absolute; top: 100%; width: 100%; text-align: center; background: #acce22; left: 0; border: 1px solid #acce22; opacity: 0; visibility: hidden; transition: 400ms; transform: translateY(15px) } #header .dw2 .dd:before { content: ""; display: inline-block; border: 8px solid transparent; border-bottom: 8px solid #acce22; position: absolute; top: -16px; left: 50%; margin-left: -8px } #header .dw2 .dd a { display: block; text-align: center; line-height: 30px; color: #fff; font-size: 13px; padding: 0 10px } #header .dw2 .dd a:hover { font-weight: bold } #header .dw2.on .dd { opacity: 1; visibility: visible; transform: translate(0) } .search_btn { margin-left: 1rem; cursor: pointer } .search_btn svg { display: inline-block; fill: #fff; width: 16px; height: 16px; vertical-align: middle } .search-dialog-box { position: fixed; left: 0; top: 0; width: 100%; height: 18rem; z-index: 1000000; opacity: 0; visibility: hidden; transition: .6s } .search-dialog-box:before { content: ""; position: absolute; top: 0; height: 0; background: #a71313; transition: .6s; left: 0; right: 0; z-index: 1 } .search-dialog-box.on:before { height: 100% } .search-dialog-box .bubbles-bg { opacity: 0; visibility: hidden; display: none } .search-dialog-box .search-bg { position: absolute; left: 0; top: 0; width: 100%; height: 0; margin: 0; background: rgba(0, 0, 0, .7); background-size: cover; background-repeat: no-repeat; transform-origin: center center; transition: height .8s cubic-bezier(.77, 0, .175, 1) } .search-dialog-box .wrap-inner { transform: translateY(100%); transition: .6s } .header-right .bubbles-bg { opacity: 0; visibility: hidden; transition: all .5s .8s } .search-dialog-box .bubbles-bg .bubble { position: absolute } .search-dialog-box .bubbles-bg .bubble .circle { border-radius: 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100% } .search-dialog-box .bubbles-bg .bubble1 { width: 6%; padding-top: 6%; left: 26.875%; top: -6.67% } .search-dialog-box .bubbles-bg .bubble1 .circle { border: 1px solid #fff } .search-dialog-box .bubbles-bg .bubble2 { width: 12px; padding-top: 12px; left: 13.54%; top: 18% } .search-dialog-box .bubbles-bg .bubble2 .circle { background-color: #ff495f } .search-dialog-box .bubbles-bg .bubble3 { width: 36px; padding-top: 36px; left: 8.854%; top: 30.55% } .search-dialog-box .bubbles-bg .bubble3 .circle { background-color: #fff } .search-dialog-box .bubbles-bg .bubble4 { width: 56.875%; padding-top: 56.875%; left: -28.6458%; top: 51.85% } .search-dialog-box .bubbles-bg .bubble4 .circle { background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05) 100%); background: -ms-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05) 100%); background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05) 100%) } .search-dialog-box .bubbles-bg .bubble5 { width: 54px; padding-top: 54px; left: 26.3%; top: 70.83% } .search-dialog-box .bubbles-bg .bubble5 .circle { background-color: #fff; opacity: .1 } .search-dialog-box .bubbles-bg .bubble6 { width: 56.875%; padding-top: 56.875%; left: 73.4375%; top: -52.77% } .search-dialog-box .bubbles-bg .bubble6 .circle { background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .1) 100%); background: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .1) 100%); background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .1) 100%) } .search-dialog-box .bubbles-bg .bubble7 { width: 2rem; padding-top: 2rem; left: 60.9375%; top: 18.5% } .search-dialog-box .bubbles-bg .bubble7 .circle { background-color: #ff495f } .search-dialog-box .bubbles-bg .bubble8 { width: 1.35rem; padding-top: 1.35rem; left: 95.83%; top: 70.83% } .search-dialog-box .bubbles-bg .bubble8 .circle { border: 1px solid #fff } .search-dialog-box .bubbles-bg .bubble9 { width: 16px; padding-top: 16px; left: 76.5625%; top: 96.296% } .search-dialog-box .bubbles-bg .bubble9 .circle { background-color: #fff } .search-dialog-box .bubbles-bg .bubble10 { width: 56.875%; padding-top: 56.875%; left: 71.354%; top: 87% } .search-dialog-box .bubbles-bg .bubble10 .circle { background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .3) 100%); background: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .3) 100%); background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .3) 100%) } .search-dialog-box .bubbles-bg .bubble { animation: spin 8s infinite linear; transform-origin: 50% 45% } .search-dialog-box .bubbles-bg .bubble:nth-child(2n) { animation: spin2 8s infinite linear } .search-dialog-box .bubbles-bg .bubble .circle { animation: spin-reverse 8s infinite linear } .search-dialog-box .bubbles-bg .bubble:nth-child(2n) .circle { animation: spin-reverse2 8s infinite linear } .search-dialog-box .bubbles-bg .sm-bubble { transform-origin: 30% 30px } .search-dialog { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2 } .search-dialog .search-tit { font-size: 2.75rem; line-height: 3.5rem; color: #fff; text-align: center; overflow: hidden; display: none } .search-dialog .search-inner { overflow: hidden; margin-top: 0 } .search-dialog .search-input { width: 50rem; margin: 0 auto; padding: 0 0.5rem 0 1.5rem; background-color: rgba(255, 255, 255, .1); box-sizing: border-box; transition: all .3s; max-width: 94% } .search-dialog .search-input input[type=text] { float: left; height: 4.5rem; width: calc(100% - 3.5rem); background-color: transparent; font-size: 1.25rem; line-height: .5rem; color: #fff; transition: all .3s; outline: none; border: 0 } .search-dialog .search-input input[type=text]::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5) } .search-dialog .search-input input[type=text]:-moz-placeholder { color: rgba(255, 255, 255, 0.5) } .search-dialog .search-input input[type=text]::-moz-placeholder { color: rgba(255, 255, 255, 0.5) } .search-dialog .search-input input[type=text]:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) } .search-dialog .search-input input[type=image],.search-dialog .search-input .clear-btn { float: right; height: 4.5rem; width: 3.5rem } .search-dialog .search-input input[type=image] { background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 1.5rem; background-image: url('../images/search.png') } .search-dialog .search-input .clear-btn { background-color: rgba(0, 0, 0, .2); background-repeat: no-repeat; background-position: center; background-image: url('../images/close-btn.svg'); background-size: 3.5rem; border-radius: 100%; margin-right: 1rem; display: none } .search-dialog .search-input.on { background-color: #fff } .search-dialog .search-input.on input[type=image] { background-image: url('') } .search-dialog .hot-search { font-size: 0; width: 19.5rem; margin: .6rem auto 0; box-sizing: border-box; padding: 0 .6rem; overflow: hidden } .search-dialog .hot-search .hot-tit,.search-dialog .hot-search .hot-link { display: inline-block; *display: inline; zoom: 1; vertical-align: top } .search-dialog .hot-search .hot-tit { font-size: .375rem; line-height: .5rem; color: #fff; font-weight: bold; padding-left: .6rem; background-repeat: no-repeat; background-position: left center; background-size: .5rem; background-image: url() } .search-dialog .hot-link { margin-left: 1rem } .search-dialog .hot-link a { display: inline-block; *display: inline; zoom: 1; font-size: .375rem; line-height: .5rem; margin-right: .75rem; color: #fff; padding-bottom: 5px; position: relative } .search-dialog .hot-link a:before { content: ""; position: absolute; left: 0%; bottom: 0; width: 100%; height: 2px; background-color: #fff; transform: scaleX(0); transform-origin: left center; transition: transform .3s } .search-dialog-box .bottom-box { position: absolute; left: 0; bottom: 5.1%; width: 100% } .search-dialog-box .bottom-box .share-box { overflow: hidden } .search-dialog-box .bottom-box .copy { font-size: .35rem; line-height: .5rem; color: #fff; font-family: "gilroy-regular"; margin-top: .5rem; overflow: hidden } .header-right.is-open .bubbles-bg { visibility: visible; opacity: 1 } .header-right.is-open .search-btn .con-box { display: none } .header-right.is-open .close-btn { display: block } .header-right.is-open .item .search-bg { transform: scale(1) } .search-dialog-box.on { opacity: 1; visibility: visible } .search-dialog-box.on .search-bg { height: 100vh } .search-dialog-box.on .bubbles-bg { opacity: 1; visibility: visible } .search-dialog-box.on .wrap-inner { transform: translateY(0) } .pub-close { position: absolute; width: 3rem; height: 3rem; z-index: 10; right: 1.5rem; top: 1.35rem; background-color: rgba(255, 255, 255, .1); border-radius: 100% } .pub-close .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #1c5ab7; transform: scale(0); border-radius: 100%; transition: transform .3s } .pub-close i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-size: 0.75rem; background-repeat: no-repeat; background-image: url(../images/close-btn.svg); transition: .6s } .pub-close i:hover { transform: rotate(180deg) } @keyframes spin { to { transform: rotate(1turn) } } @keyframes spin2 { to { transform: rotate(-1turn) } } @keyframes spin-reverse { from { transform: rotate(1turn) } } @keyframes spin-reverse2 { from { transform: rotate(-1turn) } } .tc_search { margin: 2rem 1.3rem 0; width: calc(100% - 2.6rem); position: relative } .tc_search form { height: 40px; border-radius: 0; background: rgba(255, 255, 255, .1); position: relative; width: 100%; margin-bottom: 1rem } .tc_search .keyword { font-size: .875rem; color: #fff; height: 40px; line-height: 40px; padding: 0 1rem; box-shadow: none; -webkit-appearance: none; border-right: 0; background: none; width: 100%; outline: none; border: 1px solid rgba(255, 255, 255, 0.5); padding: 0 51px } .tc_search .btn_blue { position: absolute; top: 0; right: 0; width: 40px; height: 40px; line-height: 38px; border: 0; background: url(../images/search_white.svg) center center no-repeat; background-size: 1.2rem } .tc_search .btn_blue.fr { background: #e9edef; color: #4e4f53 } .tc_search input::-webkit-input-placeholder { color: #fff; color: rgba(255, 255, 255, .7) } .tc_search input::-moz-placeholder { color: #fff; color: rgba(255, 255, 255, .7) } .tc_search input:-moz-placeholder { color: #fff; color: rgba(255, 255, 255, .7) } .tc_search input:-ms-input-placeholder { color: #fff; color: rgba(255, 255, 255, .7) } .tc_search input:focus::-webkit-input-placeholder { color: transparent } .tc_search input:focus:-moz-placeholder { color: transparent } .tc_search input:focus::-moz-placeholder { color: transparent } .tc_search input:focus:-ms-input-placeholder { color: transparent } #nav_btn_box { height: 100%; z-index: 999999999; float: right; margin-left: 28px } #nav_btn_box.on { background: none } #nav_btn .point.on .navbtn::after,#nav_btn .point.on .navbtn::before { background: #fff } #nav_btn { cursor: pointer; text-align: center; z-index: 99999; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; outline: none; box-shadow: none } #nav_btn .point { display: inline-block; width: 1.875rem; height: 22px; position: relative; outline: none } #nav_btn .point:hover .navbtn,#nav_btn .point:hover .navbtn::after,#nav_btn .point:hover .navbtn::before { width: 1.75rem } #nav_btn .navbtn { position: absolute; top: 12px; left: 0; display: inline-block; width: 14px; height: 1px; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; background: #fb0102 } #nav_btn .navbtn::after,#nav_btn .navbtn::before { position: absolute; left: 0; display: inline-block; width: 1.75rem; height: 1px; content: ''; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; background: #fb0102 } #nav_btn .navbtn::after { top: -8px } #nav_btn .navbtn::before { top: 8px } #nav_btn .point.on .navbtn { background: transparent } #nav_btn .point.on .navbtn::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 0px } #nav_btn .point.on .navbtn::before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 0px } .m_nav_list { flex-direction: column; justify-content: flex-start; width: 100%; margin: 30px 0 0 } .m_nav_list::-webkit-scrollbar { display: none } #m_nav { z-index: 99999; position: fixed; width: 100%; height: 100vh; right: -105%; top: 0; display: none; padding: 1.5rem 0 1.5rem; overflow: hidden; pointer-events: none; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; background: #a71313 } #m_nav .close { position: absolute; top: 6px; right: 15px; font-size: 28px; color: #fff; z-index: 10000 } #m_nav.act { pointer-events: auto; right: 0; overflow: auto } #m_nav>ul>li { width: 100%; overflow: hidden; padding: 0 0 0 2.3rem; position: relative } #m_nav>ul>li { border-bottom: 1px solid rgba(255, 255, 255, 0.1) } #m_nav li .a { display: inline-block; width: calc(100% - 30px) } #m_nav li .a { line-height: 4rem; height: 4rem; color: #fff; padding: 0; font-size: 14px; float: left } #m_nav li .a span { display: block; position: absolute; top: 0; right: 10px; width: 20px; height: 50px; text-align: center } #m_nav li .a span i { font-size: 0 } #m_nav li i { opacity: 1; filter: alpha(opacity=100); display: inline-block; width: 5rem; height: 4rem; display: inline-block; background: url(../images/arrow_down.svg) calc(100% - 2rem) center no-repeat; background-size: 13px 13px !important; position: absolute; display: block; right: 0 } #m_nav li.on i { background: url(../images/arrow_down_on.svg) calc(100% - 2rem) center no-repeat } #m_nav .on.title .a i { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg) } #m_nav li { display: block; width: 100% } .slide_nav { position: absolute; left: 0; height: 70px; z-index: 998; padding: 15px; top: 0; width: 100% } #m_nav .title .list { display: none; position: relative; width: 100%; z-index: 9; left: 0; margin-left: 0; background: none; border: 0; clear: both; padding-bottom: 10px } #m_nav .title .list span { background: none } #m_nav .title .list span a:hover { color: #c21d1b } #m_nav .title .list a { display: block; font-size: 1rem; color: rgba(255, 255, 255, .6); text-align: left; line-height: 40px; height: 40px; border: 0; font-weight: 300 } #m_nav .title .list .void>a { background-size: 10px; position: relative } #m_nav .title .list .void>a:before { content: "·"; position: absolute; left: -1em; font-size: 12px; font-weight: bold } #m_nav .title .list span { position: relative; display: block } #m_nav .title .list span .sub { position: static; width: 100%; display: block !important; overflow: hidden } #m_nav .title .sub a { background: none; font-size: .875rem; opacity: .8; min-width: 50%; float: left; display: inline-block; color: #999 } .nav_mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 888; background-color: rgba(0, 0, 0, 0.4); display: none } .m_header_box { transition: .6s; display: none; height: 60px } #m_header #logo .box_table { width: auto; float: left; display: table; height: 100% } #nav_btn_box .box_table { width: auto; float: left; display: table; height: 100%; height: 100% } #nav_btn_box .box_table .box_table_cell { vertical-align: middle; display: table-cell } #m_header #logo .box_table .box_table_cell { vertical-align: middle; display: table-cell; margin: 0 auto } #m_header #logo .box_table .box_table_cell a { display: block } .m_header_box header { padding: 0 5%; top: 0; height: 60px; box-shadow: 0 8px 8px rgba(0, 55, 59, 0.25); position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; background-size: cover } #m_header #logo { float: left } #m_header #logo img { max-height: 50px; width: auto } #m_header .yuyan { height: 4.5rem; float: right; margin-right: 4rem } #m_header .yuyan span { display: block; width: 24px; height: 24px; line-height: 24px; color: #fff; font-size: .9rem; text-align: center; margin-left: 17px; background: rgba(255, 255, 255, .3) } @font-face { font-family: 'times';src: url(../font/times.ttf) } .ej .toubu_div { position: initial } .ej #nav ul li h3 { color: #333 } .ej #nav ul li.on h3,.ej #nav ul li:hover h3 { color: #fff } .ej .list_box0 .li { line-height: 3rem } .ej .list_box0 .li>a { color: #666 } .ej .list_box0 .li input.txt { border-bottom: 1px solid #666 } .ej .header_top { height: 2.5rem } .ej #header #logo .box_table { height: 132px } .ej #header { height: 8.18rem } .ej .header_box_li { height: 8.18rem } #fp-nav.fp-right { display: none } .toubu_div { position: absolute; top: 0; width: 100%; left: 0; z-index: 8 } .toubu_div_bai { position: fixed } .toubu_div_bai .list_box0 .li>a { color: #000 } .yc_gd_dh { z-index: 2000; top: 0 !important; transition: 0.4s; } .yc_gd_dh .head_bottom { background: #a71313; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); padding: 0.5rem 12.5rem 0.5rem; height: 70px } .yc_gd_dh .header_top { transition: 0.4s; overflow: hidden } .yc_gd_dh .header_top.lit { height: 0 } .img img { transition: 0.4s } .img { overflow: hidden } a:hover .img img { transform: scale(1.05) } .w1720 { width: 1720px; margin: 0 auto } .w1720::after { clear: both; content: ""; display: block } .w1470 { width: 1470px; margin: 0 auto } .w1470::after { clear: both; content: ""; display: block } .w1520 { width: 1520px; margin: 0 auto; position: relative } .w1520::after { clear: both; content: ""; display: block } .tit { text-align: center; position: relative; width: 100% } .top_nav { padding: 0rem 0%; width: 100%; top: 0; left: 0; z-index: 10; position: relative; height: 75px; display: flex; justify-content: space-between; align-items: center; width: 1470px; margin: 0 auto } .top_nav .logo { float: left } .top_nav .right { float: right; height: 75px } .top_nav .right .r_top { float: right; margin-top: 11px } .top_nav .right .top_lj { float: left } .top_nav .right .top_lj a { font-size: 14px; color: #505050; transition: 0.4s } .top_nav .right .top_lj a:hover { color: #fb0102 } .top_nav .right .top_lj a img { margin-right: 10px } .top_nav .right .r_top .pc_ss { float: left; margin-right: 2rem } .top_nav .right .r_top .pc_ss .pc_ss_txt { width: 147px; border: none; border-bottom: 1px solid #bcbcbc } .top_nav .right .r_top .pc_ss .btn { width: 14px; height: 14px; background: url(../images/search.png) no-repeat center center } .top_nav .right #nav { clear: both } .swiper-slide { filter: brightness(1) } .banner { position: relative; height: 100%; width: 100%; overflow: hidden } .banner .swiper-slide { width: 100% } .banner .swiper-slide a { position: relative; display: block; height: 374px } .banner .swiper-slide a .bg_img { display: block; position: relative; height: 100%; background-size: auto 100%; z-index: 1; background-position: center center; } .banner .swiper-slide a img { position: absolute; max-width: 70%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 2 } .banner .swiper-pagination { display: none } .banner .swiper-pagination span { width: 13px; height: 13px; border: 1px solid #fff; opacity: 1; background: none } .banner .swiper-pagination span.swiper-pagination-bullet-active { background: #fff } .swiper-button-prev,.swiper-button-next { top: 44% } .swiper-button-prev { left: 2%; margin: 0; background: url() no-repeat center center; border: 0; opacity: 1 } .swiper-button-next { right: 2%; margin: 0; background: url() no-repeat center center; border: 0; opacity: 1; left: auto } .swiper-button-disabled { pointer-events: auto !important } .part { width: 100%; height: 100vh; overflow: hidden } .part1 { position: relative } .img { overflow: hidden; padding-bottom: 50%; position: relative } .img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover } #m_nav .head_lj { width: 100%; border-top: 0; padding: 0 } #m_nav .db_rc_lj { position: relative; width: 100%; top: 0; display: flex; justify-content: space-around; margin-top: 1.9rem } #m_nav .db_rc_lj li { display: table; border: 1px solid rgba(255, 255, 255, 0.1); padding-left: 0; width: auto } #m_nav .db_rc_lj li a { color: #fff } a .bt { transition: 0.4s } a:hover .bt { color: #fd3f3f !important } .sy_tit_d img { width: auto } .swiper { position: relative; overflow: hidden } .sy_p1_tit { position: relative; margin-bottom: 1rem; } .sy_p1_tit .on p{color:#d40001;} .sy_p1_tit::after { content: ""; clear: both; display: block } .sy_p1_tit p { font-size: 30px; color: #313131; display: table; font-weight: bold; position: relative; padding-bottom: 0px; float: left } .sy_p1_tit span{font-size: 52px; color: #666666; margin: -1rem 1rem;} .sy_p1_tit p img { position: relative; z-index: 4 } .sy_p1_tit p::after { content: ""; display: block; width: 100%; height: 1px; background: #c1c1c1; position: absolute; left: 0; bottom: 0 } .sy_p1_tit p.fr { float: right } .sy_p1_tit a { font-size: 14px; color: #fff; background: #fd3f3f; padding: 5px 6px; display: block; border-radius: 50px; float: right; margin-top: 0.5rem; transition: 0.4s } .sy_p1_tit a:hover { background: #e7c144 } .sy_p1_tit.cen{padding-top:2.5rem;} .sy_p1_tit.cen p { border-bottom: none; float: none; width: 100%; text-align: center } .sy_p1_tit.cen a { position: absolute; right: 0; top: 30% } .part2 { padding: 1.875rem 0 3rem } .part2 .left { width: 65.3%; float: left; display: flex; flex-wrap: wrap; justify-content: space-between } .part2 .p1_nr1 { width: 59.375%; padding: 1.875rem; background: #fff } .part2 .p1_lb1 { padding-top: 8px } .part2 .p1_lb1 a { display: block } .part2 .p1_lb1 .sj { width: 80px; height: 80px; background: url(../images/p1_left_sj.png) no-repeat; position: absolute; top: -8px; left: 20px; z-index: 3 } .part2 .p1_lb1 .sj p { font-size: 14px; color: #fff; text-align: center; padding-top: 5px; margin-bottom: 15px; font-family: 'times' } .part2 .p1_lb1 .sj span { font-size: 36px; color: #fff; text-align: center; display: block; font-family: 'times' } .part2 .p1_lb1 .img { overflow: hidden; padding-bottom: 67%; position: relative; margin-bottom: 1rem } .part2 .p1_lb1 .bt { font-size: 18px; color: #464646; width: calc(100% - 70px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .part2 .p1_lb1 .swiper-button-next,.part2 .p1_lb1 .swiper-button-prev { width: 23px; height: 20px; top: auto; bottom: 0; right: 0; left: auto; background: url(../images/p1_left_jt_r.png) no-repeat right center; z-index: 10; opacity: 1 } .part2 .p1_lb1 .swiper-button-prev { background: url(../images/p1_left_jt_l.png) no-repeat center left; right: 30px; width: 32px; border-right: 1px solid #cbcbcb; border-radius: 0 } .part2 .p1_nr2 { width: 40.625%; background: #fff; background-size: 100% auto; padding: 2.1rem; border-radius: 0 35px 35px 0 } .part2 .p1_nr2l{width: 100%;} .part2l{padding:0;} .part2 .p1_nr2{display:none;} .part2 .on{display:block;} .part2 .p1_nr2 ul li { margin-bottom: 1rem } .part2 .p1_nr2l ul li { margin-bottom: 1.65rem } .part2 .p1_nr2 ul li a { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 7px 0; border-bottom: 1px dashed #dadada } .part2 .p1_nr2 ul li .sj { width: 50px } .part2 .p1_nr2 ul li .sj p { font-size: 30px; color: #fb1a1b; text-align: right; margin-bottom: 6px; font-family: 'times' } .part2 .p1_nr2 ul li .sj span { font-size: 14px; color: #565656; display: block; text-align: right; font-family: 'times' } .part2 .p1_nr2 ul li .con { width: calc(100% - 70px) } .part2 .p1_nr2 ul li .con .bt { font-size: 1rem; line-height: 1.625rem; color: #333333; transition: 0.4s; height: 3.25rem; overflow: hidden } .part2 .p1_nr2 ul li a:hover .bt { color: #fb1a1b } .part2 .right { width: 31.97%; float: right; background: #fff; padding: 2rem 2rem 2.6rem } .part2 .p1_nr3 { margin-bottom: 1.875rem; min-height: 250px; } .part2 .p1_nr3 .p1_xxk_xx { display: flex; position: relative; z-index: 2; justify-content: center; width: 100%; padding-top: 0.8rem; } .part2 .p1_nr3 .p1_xxk_xx li { font-size: 18px; color: #929292; font-weight: bold; margin: 0 5px; margin-top: -1rem; padding-bottom: 0.5rem; cursor: pointer; margin-right: 3.5rem; } .part2 .p1_nr3 .p1_xxk_xx li.on { color: #d40001; border-bottom: 3px solid #fb2c2d } .part2 .p1_nr3 .p1_xxk_box .box { display: none } .part2 .p1_nr3 .p1_xxk_box .box.on { display: block } .part2 .p1_nr3 .p1_xxk_box .box a { width: 20%; float: left; } .part2 .p1_nr3 .p1_xxk_box .box .img { width: 30.5%; padding-bottom: 39.7% } .part2 .p1_nr3 .p1_xxk_box .box .con { } .part2 .p1_nr3 .p1_xxk_box .box .con .bt { margin: .8rem 0.8rem; font-size: 18px; color: #444444; transition: 0.4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .part2 .p1_nr3 .p1_xxk_box .box .con .zy { font-size: 14px; line-height: 26px; color: #444444; text-indent: 2em; height: 130px; overflow: hidden; margin-top: 0.5rem } .part2 .p1_nr3 .p1_xxk_box .box a:hover .con .bt { color: #000 !important; } .part2 .p1_lb2 a { display: flex; justify-content: space-between } .part2 .p1_lb2 .zc { width: 31.3% } .part2 .p1_lb2 .img { width: 100%; padding-bottom: 67.3% } .part2 .p1_lb2 .sj { font-size: 14px; color: #9e9e9e; text-align: center; margin-top: 0.5rem } .part2 .p1_lb2 .sj img { margin-right: 0.5rem } .part2 .p1_lb2 .con { width: 63% } .part2 .p1_lb2 .con .bt { font-size: 18px; line-height: 24px; color: #333333; height: 48px; margin-top: 0.5rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -moz-box; -moz-line-clamp: 2; -moz-box-orient: vertical; word-break: break-all; white-space: normal; text-overflow: ellipsis; } .part2 .p1_lb2 .swiper-pagination { display: table; right: 0; left: auto; width: auto; bottom: 0 } .part2 .p1_lb2 .swiper-pagination span { width: 15px; height: 15px; background: url(../images/p1_lb2_dian.png) no-repeat center center; opacity: 1 } .part2 .p1_lb2 .swiper-pagination span.swiper-pagination-bullet-active { background: url(../images/p1_lb2_dian_on.png) no-repeat center center } .part3 { background: url(../images/part3_bg.png) no-repeat center bottom; background-size: cover; padding-bottom: 2.5rem } .pzlm{width: 48%;float:left;margin-right:2%} .pzlmr{width: 32%;float:left;} .pzlmr1{width: 100%;float:left; } .pzlmrbg{ background: #fff; width: 65%; padding: 2rem 2rem 0rem; float: right; } .pzlmlf{margin-left:2%;} .p3_ul1 { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 2rem; width: 100%; } .p3_ul1 li { width: 98%; margin: 0 2% } .p3_ul1 li a { display: block } .p3_ul1 li .img { padding-bottom: 62% } .p3_ul1 li .con { padding: 1rem 0rem; transition: 0.4s } .p3_ul1 li .bt { font-size: 18px; color: #2b2b2b !important; font-weight: bold; margin-bottom: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .p3_ul1 li .zy { font-size: 14px; color: #929292; line-height: 20px; height: 40px; overflow: hidden } .p3_ul1 li .sj_box { margin-top: 2.5rem; display: flex; justify-content: space-between } .p3_ul1 li .sj_box .jt { width: calc(100% - 120px); background: url(../images/part3_ul1_jt.png) no-repeat bottom right; height: 15px; margin-top: -0.3rem } .p3_ul1 li .sj_box .jt p { font-size: 14px; color: #b21922; text-align: right; padding-right: 2rem; line-height: 0; opacity: 0 } .p3_ul1 li .sj_box .sj { width: 100px; display: flex; align-items: center } .p3_ul1 li .sj_box .sj img { margin-right: 0.5rem } .p3_ul1 li .sj_box .sj p { display: inline; font-size: 14px; color: #9e9e9e } .p3_ul1 li a:hover { background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, .2) } .p3_ul1 li a:hover .con { padding: 1rem 2rem } .p3_ul1 li a:hover .sj_box { flex-direction: row-reverse } .p3_ul1 li a:hover .sj_box .jt p { opacity: 1 } .p3_ul2 { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; } .p3_ul2 li { width: 98%; margin: 0 2% 2rem } .p3_ul2 li .sj { font-size: 14px; color: #9e9e9e; margin-bottom: 0.5rem } .p3_ul2 li .sj img { margin-right: 0.5rem } .p3_ul2 li .bt { font-size: 18px; color: #2b2b2b; line-height: 30px; transition: 0.4s; height: 60px; overflow: hidden } .p3_ul2 li a:hover .bt { color: #b21922 } .sy_4gj { position: relative } .sy_4gj .sjk_bg1::before { content: ""; width: 16px; height: 16px; position: absolute; top: 0; left: 0; background: url(../images/part4_4gj_1.png) no-repeat; display: block } .sy_4gj .sjk_bg1::after { content: ""; width: 16px; height: 16px; position: absolute; top: 0; right: 0; background: url(../images/part4_4gj_2.png) no-repeat; display: block } .sy_4gj .sjk_bg2::before { content: ""; display: block; width: 16px; height: 16px; bottom: 0; right: 0px; background: url(../images/part4_4gj_3.png) no-repeat; position: absolute } .sy_4gj .sjk_bg2::after { content: ""; display: block; width: 16px; height: 16px; bottom: 0; left: 0; background: url(../images/part4_4gj_4.png) no-repeat; position: absolute } .sy_4gj .sjk_bg_line1,.sy_4gj .sjk_bg_line2 { width: calc(100% - 16px); height: 1px; background: #866b6b; background-size: 101% 100%; position: absolute; top: 0px; left: 16px } .sy_4gj .sjk_bg_line2 { bottom: 0px; left: 16px; top: auto; width: calc(100% - 16px) } .sy_4gj .sjk_bg_line3,.sy_4gj .sjk_bg_line4 { width: 1px; height: calc(100% - 16px); background: #866b6b; position: absolute; right: 0px; top: 16px; left: auto } .sy_4gj .sjk_bg_line4 { width: 1px; height: calc(100% - 16px); background: #866b6b; position: absolute; left: 0; top: 16px; right: auto } .part4 { background: url(../images/part4_bg.png) no-repeat bottom left; padding-bottom: 4.4rem; } .p4_main .left { width: 32%; float: left; padding: 2rem 2rem 0rem; background: #fff; } .sy_4gj_in { padding: 2rem 1rem 0 1rem; } .p4_left_a1 { display: inline-block; position: relative; margin-bottom: 2.5rem; width:48%; } .p4_left_a1 .sj { width: 80px; height: 80px; background: url(../images/p1_left_sj.png) no-repeat; position: absolute; top: -8px; left: 3px; z-index: 3 } .p4_left_a1 .sj p { font-size: 14px; color: #fff; text-align: center; padding-top: 5px; margin-bottom: 15px; font-family: 'times' } .p4_left_a1 .sj span { font-size: 36px; color: #fff; text-align: center; display: block; font-family: 'times' } .p4_left_a1 .img { padding-bottom: 64%; margin-bottom: 0.5rem } .p4_left_a1 .bt { font-size: 18px; line-height: 28px; color: #333333; font-weight: bold; height: 56px; overflow: hidden; margin-bottom: 1rem } .p4_left_a1 .zy { font-size: 14px; line-height: 20px; color: #333333; height: 40px; overflow: hidden } .p4_left_ul li { padding-bottom: 1.8745rem; border-bottom: 1px solid #c0b3b3; margin-bottom: 1.875rem } .p4_left_ul li+li { margin-bottom: 0; padding-bottom: 0; border: none } .p4_left_ul li a { display: flex; justify-content: space-between } .p4_left_ul li .img { width: 35%; padding-bottom: 24% } .p4_left_ul li .con { width: 58% } .p4_left_ul li .con .sj { font-size: 14px; color: #e60001; margin-bottom: 0.5rem } .p4_left_ul li .con .sj img { margin-right: 0.5rem } .p4_left_ul li .con .bt { font-size: 18px; line-height: 24px; color: #333333; height: 72px; overflow: hidden } .p4_main .right { width: 64.62%; float: right; } .p4_r_box { width: 100%; margin-bottom: 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0rem 1rem; } .p4_r_box+.p4_r_box { margin-bottom: 0 } .p4_r_box .box { width: 44%; padding: 0.5rem 0 } .p4_r_box .box ul li { margin-bottom: 1.8rem } .p4_r_box .box ul li+li+li+li { margin: 0 } .p4_r_box .box ul li a { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center } .p4_r_box .box ul li .sj { width: 60px; border-right: 1px solid #e60001; padding-right: 7px } .p4_r_box .box ul li .sj p { font-size: 30px; color: #fb1a1b; text-align: right; margin-bottom: 6px; font-family: 'times' } .p4_r_box .box ul li .sj span { font-size: 14px; color: #e60001; display: block; text-align: right; font-family: 'times' } .p4_r_box .box ul li .con { width: calc(100% - 70px) } .p4_r_box .box ul li .con .bt { font-size: 1rem; line-height: 1.625rem; color: #333333; transition: 0.4s; height: 3.25rem; overflow: hidden } .part5 { padding-top: 27px; background: url(../images/part5_bg.png) no-repeat top left; background-size: cover; padding-bottom: 2.5rem } .p5_main .sy_p1_tit { width: 95%; margin: 0 0 1.5rem; } .p5_tit { width: auto; display: table } .p5_main .left { display: flex; justify-content: space-between; width: 72.1%; float: left } .p5_left_main { width: calc(100% - 82px) } .p5_ul1 { display: flex; flex-wrap: wrap; justify-content: space-between } .p5_ul1 li { width: 43.9%; margin-bottom: 1.6rem } .p5_ul1 li:nth-child(2n) { margin-right: 4% } .p5_ul1 li a { position: relative; display: block } .p5_ul1 li .img { padding-bottom: 66.6% } .p5_ul1 li .x_bt { width: 53px; height: 97px; background: url(../images/part5_ul_li_bg.png) no-repeat; font-size: 16px; padding: 15px 11px 0; text-align: center; color: #fff; position: absolute; top: 20px; right: -28px } .p5_ul1 li .bt { font-size: 18px; line-height: 24px; color: #333333; height: 48px; overflow: hidden; margin-top: 0.5rem } .p5_main .right { width: 25%; float: right; display: flex; justify-content: space-between; padding-top: 9.6rem } .p5_ul2 { width: calc(100% - 92px); margin-top: 4.875rem } .p5_ul2 li { margin-bottom: 2rem } .p5_ul2 li a { height: 75px; padding: 9px; border-radius: 100px; background: url(../images/part5_right_li_bg.jpg) no-repeat; background-size: cover; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 0 16px rgba(222, 210, 199, 0.46); transition: 0.4s } .p5_ul2 li img { width: 58px } .p5_ul2 li p { width: calc(100% - 75px); font-size: 34px; font-family: "隶书"; color: #886b4c } .p5_ul2 li a:hover { box-shadow: 0 0 16px rgba(0, 0, 0, 0.5) } .foot { background: #545454; padding: 22px 0 } .foot_main { display: flex; margin: 0 auto; justify-content: center; align-items: center } .foot_main .f_zy_box p { font-size: 14px; color: #ffffff; line-height: 24px } .foot_main .f_zy_box.txt_right p { text-align: right } .foot_main .foot_logo { width: 24%; text-align: center } @media(min-width: 1920px) { .part4 { background-size: cover } } @media(max-width: 1600px) { .head_bottom { padding: 1rem 8.5rem 0rem } .yc_gd_dh .head_bottom { padding: 0.5rem 8.5rem 0.5rem } .sy_fyjt { right: 4px } .sy_tit .tit_in { font-size: 2.2rem } } @media(max-width: 1500px) { #nav ul li a { padding: 0.3rem 0.5rem } } @media(max-width: 1470px) { .w1470 { width: 97% !important } .top_nav { width: 97% !important } .part2 .p1_nr3 .p1_xxk_xx { margin: 2rem 0 1rem 0rem } .sy_p1_tit p { font-size: 26px } .part4 { background: url(../images/part4_bg.png) no-repeat bottom center } .part5 { background: url(../images/part5_bg.png) no-repeat top center } } @media(max-width: 1450px) { .p5_ul2 li p { font-size: 26px } } @media(max-width: 1200px) { .top_nav { display: none } .part1 .nav li { margin-left: 13% !important } .db_rc_lj { top: 66px } .part1 .logo { display: none } .header_box { display: none } .m_header_box { display: block } .m_header_box header { padding: 0 3% } .banner .swiper-slide a { height: 300px } .yc_gd_dh { display: block } #dowebok { margin-top: 60px } .part2 .left { width: 100%; margin-bottom: 2rem } .part2 .right { width: 100% } .p4_main .left { width: 100%; margin-bottom: 1.875rem } .sy_4gj_in { display: flex; flex-wrap: wrap; justify-content: space-between } .sy_4gj_in .sy_p1_tit { width: 100% } .p4_left_a1 { width: 48%; margin-bottom: 0 } .p4_left_ul { width: 48% } .p4_left_a1 .zy { margin-bottom: 0 } .p4_main .right { width: 100% } .p5_main .left { width: 100% } .p5_main .right { width: 100%; padding-top: 0 } .p5_ul2 { display: flex; justify-content: space-between; flex-wrap: wrap } .p5_ul2 li { width: 24% } .part4 { background: url(../images/part4_bg.png) no-repeat bottom center; background-size: cover } .part5 { background: url(../images/part5_bg.png) no-repeat top center; background-size: cover } } @media(max-width: 1024px) { .banner .swiper-slide a { height: 250px } .pzlmr,.pzlmrbg{width:100%;padding: 0;} .p3_ul1r,.p3_ul2r{width:50%;float:left;} } @media(max-width: 960px) { .w1520 { width: 94% !important } .banner .swiper-slide a { height: 200px } .p5_ul2 li { width: 48% } .foot_main { flex-wrap: wrap; justify-content: center } .foot_main .f_zy_box { width: 100% } .foot_main .f_zy_box p { text-align: center !important } .foot_main .foot_logo { width: 100%; margin: 1rem 0 } } @media(max-width: 850px) { .firstScreen { height: auto } .body_main { position: relative } .part2 .p1_nr1 { width: 100% } .part2 .p1_nr2 { width: 100% } .p3_ul1 li { width: 100%; margin: 0 0 1rem } .p3_ul2 li { width: 46% } .p4_left_a1 { width: 100%; margin-bottom: 1rem } .p4_left_ul { width: 100% } .p4_r_box .box { width: 100%; margin-bottom: 1.875rem } .p4_r_box .box+.box { margin-bottom: 0 } .p5_ul1 li { width: calc(100% - 27px) } .p3_ul1r,.p3_ul2r{width:100%;} } @media(max-width: 700px) { .tit { text-align: left; font-size: 1.7rem } } @media(max-width: 650px) { .banner .swiper-slide a { height: 10rem; } .w1470 { width: 100% !important } .sy_fyjt { display: none } #m_header #logo { width: 75% } .part2 .p1_lb2 .zc { width: 33.3% } .part2 .right { padding: 2rem 1rem 2.2rem } .part2 .p1_nr2 { padding: 1.1rem } .p3_ul2 li { width: 100%; margin: 0 6% 1.5rem } .p3_ul1 { padding: 0 4% } .p4_main .left { padding: 1rem } .p4_r_box { padding: 1rem; margin-bottom: 1rem } .p4_r_box .box { padding: 1rem; margin-bottom: 1rem } .part3{padding-bottom: 0rem;} .part4 { padding-bottom: 2.4rem; padding-top: 2.5rem } .p5_main .sy_p1_tit { width: 90%; margin: 0 0rem 1rem } .p5_tit { width: 40px } .p5_tit img { width: 100% } .p5_left_main { width: calc(100% - 50px) } .p5_ul2 { margin-top: 0; margin-left: 10% } .p5_ul2 li { width: 100% } .part5 { padding-bottom: 0 } .part2 .p1_nr3 .p1_xxk_box .box .con .bt{ margin: .8rem 0.2rem; } .pzlm,.pzlmr{ width: 100%; padding: 2rem 1rem 2.2rem; } .part2{ padding: 1.875rem 0 0rem;} } @media(max-width: 520px) { .banner .swiper-slide a { height: 7rem; } .banner .swiper-slide a .bg_img .con p { font-size: 1.3rem; line-height: 1.5rem } } @media(max-width: 348px) { .banner .swiper-slide a { height: 6rem } } @media(max-width: 442px) { .part2 .p1_nr3 .p1_xxk_xx li { margin-right: 1.1rem; } }