@charset "utf-8"; /* CSS Document */ @import url('https://fonts.font.im/css?family=Poppins:300,400,500,600,700,800'); * { font-family:"寰蒋闆呴粦", 'Poppins',"Noto Sans SC","PingFang SC", "arial", sans-serif; word-wrap: normal; word-break: normal; } :focus { outline: none; } button:focus { border: none!important; outline: none; } @font-face { font-family: 'iconfont1'; /* Project id 2304431 */ src: url('//at.alicdn.com/t/c/font_2304431_7ymafym6c8q.woff2?t=1725888017433') format('woff2'), url('//at.alicdn.com/t/c/font_2304431_7ymafym6c8q.woff?t=1725888017433') format('woff'), url('//at.alicdn.com/t/c/font_2304431_7ymafym6c8q.ttf?t=1725888017433') format('truetype'); } .e_icon { font-family: 'iconfont1'; } html, body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, textarea, p, blockquote { margin: 0; padding: 0; list-style-type: none; } .fa_wrapper { width: 96%; max-width: var(--wrapper); padding: 0 10px; margin: auto; } ::-webkit-scrollbar { width: 8px; height: 40px; /* overflow: hidden; */ } ::-webkit-scrollbar-track { background-color: #eee; } ::-webkit-scrollbar-thumb { background-color: var(--main-color); } ::-webkit-scrollbar-thumb:hover { background-color: #333 } ::-webkit-scrollbar-thumb:active { background-color: #333 } /*閫氱敤*/ a{ color:inherit; } a:active, a:hover { color: var(--main-color); text-decoration: none; } a:hover, a:focus { color: var(--main-color); text-decoration: underline; } .container { width: 100%; max-width: 100%; } .hide { display: none!important; } .fa_ani * { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 鍜 Chrome */ -o-transition: all 0.5s; /* Opera */ } .fa_ani *:before { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 鍜 Chrome */ -o-transition: all 0.5s; /* Opera */ } .fa_ani *:after { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 鍜 Chrome */ -o-transition: all 0.5s; /* Opera */ } a { cursor: pointer; } a:focus, a:active, a:hover, a:visited { outline: none !important; text-decoration: none; } svg, { width: 100%; max-width: none; height: auto; vertical-align: top; } svg:where(:not([fill])) { fill: currentcolor; } svg { pointer-events: none; } i { font-style: normal; } .fa_text_c { text-align: center; } .fa_text_l { text-align: left; } .fa_text_r { text-align: right; } .fa_pic img { width: 100%; } :root { --main-color: #0a3190; --main2-color: #15c0f2; --bg:#f3f7fa; --linearY: linear-gradient(#990000, #cb3b3b); --linearX: linear-gradient(90deg, #990000, #cb3b3b); --listbg: #f3f7fa; --tit-color: #272a31; --sum-color: #777777; --wrapper: 1420px; } @media only screen and (min-width: 769px) { .fa_text_pcc { text-align: center; } .fa_text_pcl { text-align: left; } .fa_text_pcr { text-align: right; } .fa_pchide { display: none!important; } .fa_grid { padding: 5vw 10px; } .fa_grid2 { padding: 4vw 10px; } :root { --padding: 4vw 10px; --margin: 80px auto; --f130: 130px; --f80: 80px; --f70: 70px; --f60: 60px; --f50: 50px; --f40: 40px; --f36: 36px; --f32: 32px; --f30: 30px; --f28: 28px; --f26: 26px; --f24: 24px; --f22: 22px; --f20: 20px; --f18: 18px; } .delighter.fa_dl_left { -webkit-clip-path: polygon(0 0%, 0% 100%, 0% 100%, 0% 0%); clip-path: polygon(0 0%, 0% 100%, 0% 100%, 0% 0%); transition: all 1s; } .delighter.fa_dl_left.started { -webkit-clip-path: polygon(0 0%, 0% 100%, 100% 100%, 100% 0%); clip-path: polygon(0 0%, 0% 100%, 100% 100%, 100% 0%); } .delighter.fa_dl_right { -webkit-clip-path: polygon(100% 100%, 100% 100%, 100% 0, 100% 0); clip-path: polygon(100% 100%, 100% 100%, 100% 0, 100% 0); transition: all 1s; } .delighter.fa_dl_right.started { -webkit-clip-path: polygon(100% 100%, 0% 100%, 0% 0, 100% 0); clip-path: polygon(100% 100%, 0% 100%, 0% 0, 100% 0); } .delighter.fa_dl_top { clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); transition: all 1s; } .delighter.started.fa_dl_top { -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0, 0% 0%); clip-path: polygon(0% 100%, 100% 100%, 100% 0, 0% 0%); } .delighter.fa_dl_bottom { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); transition: all 1s; } .delighter.started.fa_dl_bottom { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } } @media only screen and (max-width:768px) { body, html { overflow-x: hidden !important; } .fa_text_moc { text-align: center; } .fa_text_mor { text-align: right; } .fa_text_mol { text-align: left; } :root { --padding: 4vw 10px; --margin: 5vw auto; --f130: 60px; --f80: 22px; --f70: 22px; --f60: 22px; --f50: 22px; --f40: 22px; --f36: 20px; --f32: 20px; --f30: 20px; --f28: 20px; --f26: 18px; --f24: 18px; --f22: 18px; --f20: 18px; --f18: 16px; } .fa_grid, .fa_grid2 { padding: 30px 0px; } .fa_mohide { display: none!important; } input::-webkit-input-placeholder { font-size: 14px; line-height: 1.42857143; } input::-moz-placeholder { font-size: 14px; line-height: 1.42857143; } input:-ms-input-placeholder { font-size: 14px; line-height: 1.42857143; } input:-moz-placeholder { font-size: 14px; line-height: 1.42857143; } } @media only screen and (max-width: 1200px) and (min-width: 769px) { :root { --padding: 50px 10px; --margin: 50px auto; --f130: 70px; --f80: 50px; --f70: 40px; --f60: 30px; --f50: 30px; --f40: 30px; --f36: 24px; --f32: 24px; --f30: 24px; --f28: 22px; --f26: 20px; --f24: 20px; --f22: 18px; --f20: 18px; --f18: 18px; } .fa_grid { padding: 50px 10px; } } /*------------*/ /*寮规€у竷灞€*/ .fa_flexline { display: -webkit-box; /* 鑰佺増鏈娉旡 Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 鑰佺増鏈娉旡 Firefox (buggy) */ display: -ms-flexbox; /* 娣峰悎鐗堟湰璇硶: IE 10 */ display: -webkit-flex; /* 鏂扮増鏈娉旡 Chrome 21+ */ display: flex; /* 鏂扮増鏈娉旡 Opera 12.1, Firefox 22+ */ -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -moz-flex-wrap: nowrap; flex-wrap: nowrap; } .fa_flexwrap { display: -webkit-box; /* 鑰佺増鏈娉旡 Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 鑰佺増鏈娉旡 Firefox (buggy) */ display: -ms-flexbox; /* 娣峰悎鐗堟湰璇硶: IE 10 */ display: -webkit-flex; /* 鏂扮増鏈娉旡 Chrome 21+ */ display: flex; /* 鏂扮増鏈娉旡 Opera 12.1, Firefox 22+ */ -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; } .fa_flex_between { -webkit-box-pack: justify; -moz-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; } .fa_flex_Xend { -webkit-box-pack: end; -moz-justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; } .fa_flex_Xcenter { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .fa_flex_Yend { -webkit-align-items: flex-end; align-items: flex-end; } .fa_flex_Ycenter { -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center; } .fa_centerY { position: relative; top: 50%; /*鍋忕Щ*/ transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); } /*------------*/ /*鍥剧墖闄愬埗*/ .fa_Img { position: relative; width: 100%; overflow: hidden; } .fa_Img img { position: absolute; width: 100%; min-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s; } .fa_Imgmax img { max-width: 100%!important; max-height: 100%!important; min-width: 0%!important; min-height: 0%!important; width: auto!important; height: auto!important; } .fa_Imgmin img { object-fit: cover; } .fa_li:hover .fa_Img img { transform: translate(-50%, -50%) scale(1.1); } .fa_light .fa_Img:before{ content: ""; position: absolute; left: -120%; top: 0; width: 100%; height: 100%; background-image: -moz-linear-gradient(0deg, rgba(0, 145, 215, 0), rgba(255, 255, 255, .3), rgba(0, 145, 215, 0)); background-image: -webkit-linear-gradient(0deg, rgba(0, 145, 215, .0), rgba(255, 255, 255, .3), rgba(0, 145, 215, 0)); transform: skewx(-25deg); z-index: 3; } .fa_light:hover .fa_Img:before{ left: 120%; -moz-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; transition: all 1s ease; } /*------------*/ /*浜у搧鍒嗙被鏍囬*/ .fa_PageCate .fa_CateTit h3 { font-size: 30px; font-weight: bold; margin-bottom: 10px; color: var(--main-color); text-align: center; } .fa_PageCate .fa_CateTit article { font-size: 16px; line-height: 2; margin: auto; max-width: 800px; color: #666; width: 80%; text-align: center; } .fa_PageCate { margin-bottom: 30px; } @media only screen and (max-width:768px) { .fa_PageCate .fa_CateTit h3 { font-size: 20px; } } /*------------------------------------------------------------------------------------------------------------*/ /*鎺掑垪甯冨眬 fa_ln(涓€鎺抧涓?*/ .fa_l2 { display: block; width: calc((100% - 50px) / 2); margin-right: 50px; margin-bottom: 50px; } .fa_l3 { display: block; width: calc((100% - 6rem) / 3); margin-right: 3rem; margin-bottom: 3rem; } .fa_l4 { display: block; width: calc((100% - 9rem) / 4); margin-right: 3rem; margin-bottom: 3rem; } .fa_l5 { display: block; width: calc((100% - 80px) / 5); margin-right: 20px; margin-bottom: 20px; } @media only screen and (min-width: 769px) { .fa_l2:nth-child(2n), .fa_l3:nth-child(3n), .fa_l4:nth-child(4n), .fa_l5:nth-child(5n) { margin-right: 0; } } @media only screen and (max-width:768px) { .fa_l2, .fa_l3, .fa_l4, .fa_l5 { width: 100%; margin: 0 0 20px !important; } } /*------------*/ /*swiper*/ .fa_swp_btn>div { /*banner*/ position: absolute; z-index: 20; transform: translateY(-50%); font-size: 2vw; background: rgba(0, 0, 0, 0.2); color: #fff; text-align: center; transition: all 0.5s; width: 3vw; height: 3vw; border-radius: 50%; top: 50%; opacity: 0.5; line-height: 3vw; cursor: pointer; } .fa_swp_btn>div:hover { opacity: 0.8; } .fa_swp_btn .fa_btn_l { left: 2vw; } .fa_swp_btn .fa_btn_r { right: 2vw; } .fa_pagination { position: absolute; bottom: 5%; width: 100%; left: 0; right: 0; text-align: center; z-index: 10; } .fa_pagination span { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.5); display: inline-block; border-radius: 500px; margin: 0 5px; transition: all 0.5s; cursor: pointer; } .fa_pagination span.swiper-pagination-bullet-active { background: rgba(255, 255, 255, 1); } @media only screen and (max-width: 768px) { .fa_list_btn { font-size: 0; text-align: center; } .fa_list_btn>div { font-size: 26px; color: #aaa; display: inline-block; } .fa_list_btn .fa_btn_r { margin-left: 20px; } } @media only screen and (min-width: 769px) { .fa_list_btn>div { /*鍒楄〃*/ position: absolute; z-index: 20; transform: translateY(-50%); font-size: 20px; text-align: center; transition: all 0.5s; cursor: pointer; top: 50%; /* opacity: 0.5; */ background: rgba(0,0,0,0.2); color: #fff; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 500px; } .fa_list_btn .fa_btn_l { left: 0; } .fa_list_btn .fa_btn_r { right: 0; } .fa_list_btn>div:hover { opacity: 1; } } /*鍔犺浇鐗规晥*/ @keyframes btn-focus-in-left { 0% { -webkit-filter: blur(12px); filter: blur(12px); transform: translateX(-50px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); transform: translateX(0px); opacity: 1; } } @keyframes btn-focus-in-right { 0% { -webkit-filter: blur(12px); filter: blur(12px); transform: translateX(50px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); transform: translateX(0px); opacity: 1; } } @keyframes btn-focus-in-up { 0% { -webkit-filter: blur(12px); filter: blur(12px); transform: translateY(50px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); transform: translateY(0px); opacity: 1; } } @keyframes btn-focus-in-down { 0% { -webkit-filter: blur(12px); filter: blur(12px); transform: translateY(-50px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); transform: translateY(0px); opacity: 1; } } .fa_tag{ position: absolute; left: 0; right:0; top:-150px; opacity: 0; z-index: -9; } .btn_in_right { animation-name: btn-focus-in-right; } .btn_in_left { animation-name: btn-focus-in-left; } .btn_in_up { animation-name: btn-focus-in-up; } .btn_in_down { animation-name: btn-focus-in-down; } .rotate-in-2-cw { -webkit-animation: rotate-in-2-cw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: rotate-in-2-cw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes rotate-in-2-cw { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotate-in-2-cw { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } /**/