@charset "utf-8"; /*@import url('//fonts.loli.net/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap'); @import url('//fonts.loli.net/css?family=Montserrat:400,500,600,700,800,900'); */ /* CSS Document */ * { font-family:'微软雅黑', sans-serif; font-weight: normal; word-break: normal; word-wrap: normal; } /*通用*/ 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%; } .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 */ } .p_PromptNoneData .prompt_title .first { color: var(--main-color); } a { cursor: pointer; } body{ background:#ffffff; } body, html { overflow-x: hidden; } a:focus, a:active, a:hover, a:visited { outline: none !important; text-decoration: none; } i { font-style: normal; } /* .w_grid-000 > div > .p_gridbox { overflow: visible; } .w_grid-000 > div > .p_gridbox:before, .w_grid-000 > div > .p_gridbox:after { clear: both; display: table; content: " "; min-height: 0px; } */ .fa_detail img,.fa_detail video{ max-width:100!important; height:auto!important; } #easy_zoom { transition: all 0s; -moz-transition: all 0s; /* Firefox 4 */ -webkit-transition: all 0s; /* Safari 和 Chrome */ -o-transition: all 0s; } .fa_wordline { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #easy_zoom * { transition: all 0s; -moz-transition: all 0s; /* Firefox 4 */ -webkit-transition: all 0s; /* Safari 和 Chrome */ -o-transition: all 0s; /* Opera */ } :root { --border: rgba(255,255,255,0.2) solid 1px; --wrapper: 1440px; --wrapper1: 1600px; --main-color: #005bab; --main2-color: #ffffff; --main3-color:#000000; --linearX: linear-gradient(#06479b, #0599c8); --linearY: linear-gradient(90deg, #245442, #009944); --listbg: transparent; --tit-color: #ffffff; --sum-color: #8b8b8b; } @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; } :root { --padding: 120px 10px; --margin: 120px auto; --m80: 80px 0; --m50: 50px 0; --f80: 80px; --f70: 70px; --f60: 60px; --f50: 50px; --f56: 56px; --f48: 48px; --f44: 44px; --f40: 40px; --f38: 38px; --f36: 36px; --f32: 32px; --f30: 30px; --f28: 28px; --f26: 26px; --f24: 24px; --f22: 22px; --f20: 20px; --f18: 18px; } .fa_pchide { display: none!important; } .fa_NewsdtTit { font-size: 26px!important; } .fa_pctit { font-size: 26px!important; } .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) { .fa_text_moc { text-align: center; } .fa_text_mor { text-align: right; } .fa_text_mol { text-align: left; } :root { --padding: 40px 10px; --margin: 40px auto; --m80: 30px 0; --m50: 30px 0; --f80: 24px; --f70: 24px; --f60: 24px; --f50: 24px; --f56: 24px; --f44: 24px; --f48: 24px; --f40: 22px; --f38: 24px; --f36: 20px; --f32: 20px; --f30: 20px; --f28: 20px; --f26: 20px; --f24: 20px; --f22: 18px; --f20: 16px; --f18: 16px; } .fa_NewsdtTit { font-size: 22px!important; } .fa_motit { font-size: 20px!important; } .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: 70px 10px; --margin: 70px auto; --f80: 50px; --f70: 40px; --f60: 30px; --f50: 30px; --f56: 30px; --f44: 30px; --f40: 30px; --f38: 30px; --f36: 24px; --f32: 24px; --f30: 24px; --f28: 22px; --f26: 20px; --f24: 20px; --f22: 18px; --f20: 18px; --f18: 18px; } .fa_grid { padding: 50px 10px; } } /*------------------------------------------------------------------------------------------------------------*/ /*btn*/ .fa_More a { display: inline-block; font-size: 16px; box-shadow: 5px 5px 30px rgba(104, 131, 170, 0.3); background: var(--linearX); padding: 10px 20px; min-width: 180px; text-align: center; color: #fff; border-radius: 5px; } /*弹性布局*/ .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 { min-width: 101%!important; min-height: 101%!important; object-fit: cover!important; } .fa_li:hover .fa_Img img { transform: translate(-50%, -50%) scale(1.2); } /*排列布局 fa_ln(一排n个)*/ .fa_l2 { display: block; width: calc((100% - 50px) / 2); margin-right: 50px; margin-bottom: 50px; } .fa_l3 { display: block; width: calc((100% - 100px) / 3); margin-right: 50px; margin-bottom: 50px; } .fa_l4 { display: block; width: calc((100% - 90px) / 4); margin-right: 30px; margin-bottom: 30px; } .fa_l5 { display: block; width: calc((100% - 80px) / 5); margin-right: 20px; margin-bottom: 20px; } .fa_l6 { display: block; width: calc((100% - 100px) / 6); 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), .fa_l6:nth-child(6n) { margin-right: 0; } } @media only screen and (max-width:768px) { .fa_l2, .fa_l3 { display: block; width: 100%; margin: 10px 0; } .fa_l5, .fa_l6, .fa_l4 { display: block; width: calc((100% - 10px) / 2); margin-right: 10px; margin-bottom: 10px; } .fa_l5:nth-child(2n), .fa_l6:nth-child(2n), .fa_l4:nth-child(2n) { margin-right: 0; } } /*------------------------------------------------------------------------------------------------------------*/ /*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; background:var(--main-color); } .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: 30px; text-align: center; transition: all 0.5s; cursor: pointer; top: 50%; opacity: 0.5; /* background: #d2d2d2; */ color: #333; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: #999 solid 1px; border-radius: 500px; } .fa_list_btn .fa_btn_l { left: -5vw; } .fa_list_btn .fa_btn_r { right: -5vw; } .fa_list_btn>div:hover { opacity: 1; } } /*----------------------*/ /*更多按钮*/ @media only screen and (min-width: 769px) {.mouse_bac:hover { background-color: #f5f5f5; color: var(--main-color); } ::-webkit-scrollbar { width: 10px; height: 40px; } ::-webkit-scrollbar-track { background-color: #eee; } ::-webkit-scrollbar-thumb { background-color: var(--main-color); } ::-webkit-scrollbar-thumb:hover { background-color: #eee } ::-webkit-scrollbar-thumb:active { background-color: #eee } } @media only screen and (max-width: 768px) { } /*------------------------------------------------------------------------------------------------------------*/ /*按钮*/ .c-view { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; position: relative; } .c-view::before { content: ''; width: 100%; height: 100%; border: 1px solid #ddd; border-radius: 50%; position: absolute; top: 0; left: 0; -webkit-animation: leave-default 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards; animation: leave-default 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards; } .c-view::after { content: ''; width: 100%; height: 100%; border-radius: 50%; background: var(--main-color); position: absolute; top: 0; left: 0; opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-animation: leave-hover 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s forwards; animation: leave-hover 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s forwards; } .c-view__dots { display: flex; justify-content: space-between; width: 20px; } .c-view__dots::before { /* content: ''; */ font-family: 'iconfont1'; content: "\e643"; /* width: 20px; */ /* height: 1.1rem; */ position: absolute; top: 0%; left: 0%; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; z-index: 1; margin: auto; opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); /* background: url(/img/eye_white.png) 0 0/cover no-repeat; */ } .c-view__dot { display: block; width: 3px; height: 3px; border-radius: 50%; background: #aaa; -webkit-animation: leave-dot 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s both; animation: leave-dot 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s both; opacity: 1; transition: opacity 0.1s linear; } .c-view__dot:nth-child(1) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .c-view__dot:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .c-view__dot:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .c-view[data-color="inverted"] .c-view__dot { background: #ffffff; } .c-view[data-color="inverted"] .c-view__dot::before { border-color: #ffffff; } @-webkit-keyframes enter-default { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes enter-default { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } } @-webkit-keyframes enter-hover { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes enter-hover { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes leave-default { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes leave-default { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes leave-hover { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes leave-hover { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes enter-dot { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(1rem, 0, 0); transform: translate3d(1rem, 0, 0); } } @keyframes enter-dot { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(1rem, 0, 0); transform: translate3d(1rem, 0, 0); } } @-webkit-keyframes leave-dot { 0% { opacity: 0; -webkit-transform: translate3d(-1rem, 0, 0); transform: translate3d(-1rem, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes leave-dot { 0% { opacity: 0; -webkit-transform: translate3d(-1rem, 0, 0); transform: translate3d(-1rem, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes enter-icon { 0% { opacity: 0; -webkit-transform: scaleY(0) translate3d(0, 0.5rem, 0); transform: scaleY(0) translate3d(0, 0.5rem, 0); } 100% { opacity: 1; -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } } @keyframes enter-icon { 0% { opacity: 0; -webkit-transform: scaleY(0) translate3d(0, 0.5rem, 0); transform: scaleY(0) translate3d(0, 0.5rem, 0); } 100% { opacity: 1; -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } } @media screen and (max-width: 767px) { .c-view { width: 8vw; height: 8vw; } .c-view__dots { width: 3.2vw; } .c-view__dot { width: 2px; height: 2px; } } .fa_text_l { text-align: left; } .fa_text_c { text-align: center; } .fa_text_r { text-align: right; } .fa_ani_big{ animation-name: img-big-in; max-height:700px; } @keyframes img-big-in { 0% { transform:scale(1); } 100% { transform:scale(1.2); } } @-webkit-keyframes img-big-in { 0% { transform:scale(1); } 100% { transform:scale(1.2); } } @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; } } .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; } /* ---------------------------------------------- * Generated by Animista on 2021-12-16 14:57:0 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation text-focus-in * ---------------------------------------- */ @-webkit-keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } .fa_tag{ position:absolute; top:-150px; left:0; right:0; z-index:-20; opacity:0; } .fa_morelink{ display: inline-block; padding:0 20px; background:rgba(35,184,188,0.5); line-height:50px; width: 180px; border-radius: 500px; position: relative; text-align: center; border: var(--main-color) 1px solid; } .fa_morelink span{ display: inline-block; margin-right:40px; color:#fff; font-size: var(--f16); position: relative; /* padding-bottom:8px; */ overflow: hidden; transition: all 0.5s; vertical-align: middle; } .fa_morelink i{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:var(--main-color); color:#fff; border-radius:50%; font-size:20px; position:absolute; right:10px; top:50%; transform:translateY(-50%); overflow:hidden; transition:all 0.5s; } .fa_morelink:hover i{ background:#28b1b2; } .fa_morelink i:before,.fa_morelink i:after{ content:"\e739"; position:absolute; color:#fff; font-family:"iconfont1"; left:50%; top:50%; transition:all 0.5s; transform:translate(-50%,-50%) rotate(-45deg); } .fa_morelink i:after{ transform:translate(-150%,50%) rotate(-45deg); } .fa_morelink:hover i:after{ transform:translate(-50%,-50%) rotate(-45deg); transition-delay:0.2s; } .fa_morelink i:before{ transition-delay:0.2s; } .fa_morelink:hover i:before{ transform:translate(50%,-150%) rotate(-45deg); transition-delay:0s; } /*二级*/ .fa_treeNav { width:100%; } .fa_treeNav .fa_treeNav_box .fa_ejtreeUl { display: none; } .fa_treeNav .fa_treeNav_box .fa_tree_yjli .fa_tree_yjtt .a_icon.fa_on{ transform: translateY(-50%) rotate(90deg); } .fa_treeNav .fa_treeNav_box .fa_tree_yjtt .a_icon{ position: absolute; right: 10px; top:50%; transform: translateY(-50%); color:#333; font-size: 16px; color: #aaa; display: block; /* line-height: 1; */ /* width: 40px; */ text-align: center; cursor: pointer; /* border-left: solid 1px #f2f6fa; */ transition: all 0.5s; height: auto; line-height: 1; } .fa_treeNav .fa_treeNav_box .fa_treeNav_list a{ display:block; } @media screen and (max-width: 768px) { .fa_morelink{ display:inline-block; padding:0 20px; line-height:36px; width:140px; } .fa_morelink i{ display:none; } .fa_morelink span{ margin-right: 0; } .fa_gridbox .fa_box_left{ width: 100%; } .fa_gridbox .fa_box_right { width: 100%; margin-top: 20px; } .fa_treeNav .fa_treeMobtn { /* background: var(--main-color); */ position: relative; /* overflow: hidden; */ /* border-radius: 5px; */ width: auto; /* background: var(--main-color); */ } .fa_treeNav .fa_treeMobtn span { color: #fff; font-size: 14px; display: inline-block; padding: 5px 20px; /* border-radius: 5px; */ width: 100%; background: var(--main-color); border-radius: 2px; position:relative; } .fa_treeNav .fa_treeMobtn span:before{ content:"\e665"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-family:"iconfont1"; font-size:20px; color:#fff; } .fa_treeNav .fa_treeNav_box { display: block; position: fixed; top: 0; right: 0; left: 0; bottom: 0; overflow-y: scroll; background: rgba(0,0,0,0.2); transition: all 0.5s; visibility: hidden; z-index: -99; opacity: 0; } .fa_treeNav .fa_treeNav_box.fa_on { visibility: visible!important; z-index: 999!important; opacity: 1!important; } .fa_treeNav .fa_treeNav_box .fa_wrap { width: 70%; background: #fff; width: 70%; background: #fff; margin-right: 0; margin-left: auto; min-height: 100%; position: relative; padding-left: 40px; transform: translateX(100%); transition: all 0.5s; } .fa_treeNav .fa_treeNav_box.fa_on .fa_wrap{ transform: translateX(0%); } .fa_treeNav .fa_treeNav_box .fa_treeNav_close { background: #aaa; color: #fff; align-items: center; display: flex; height: 100%; justify-content: center; width: 40px; position: absolute; left: 0; top: 0; bottom: 0; } .fa_treeNav .fa_treeNav_box .fa_treeNav_list { width: 100%; } .fa_treeNav .fa_treeNav_box .fa_tree_yjli p{ font-size: 12px; line-height: 36px; border-top:#f7f7f7 solid 1px; border-bottom:#eee solid 1px; background:#f5f5f5; padding: 0 36px 0 20px; position: relative; color: #000; } .fa_treeNav .fa_treeNav_box .fa_tree_ejli p{ background:#ebeff2; padding-left: 30px; color: #777; } .fa_treeNav .fa_treeNav_box .fa_tree_yjtt a{ border-right:#eee solid 1px } } @media screen and (min-width: 769px) { .fa_gridbox .fa_box_left{ width: 260px; } .fa_gridbox .fa_box_right { width: calc(100% - 260px); padding-left: 2vw; } .fa_treeNav .fa_treeNav_list .fa_tree_yjli{ /* border-bottom: #f2f6fa solid 1px; */ } .fa_treeNav .fa_treeNav_list .fa_tree_yjtt{ font-size: 14px; line-height: 50px; position: relative; padding-right:30px; text-align: left; color: #666; border-bottom: #f2f6fa solid 1px; padding-left: 20px; } .fa_treeNav .fa_treeNav_box .fa_tree_ejli p{ /* background:#ebeff2; */ padding-left: 40px; color: #777; line-height: 40px; position: relative } .fa_treeNav .fa_treeNav_box .fa_tree_ejli p:before{ content: ""; position: absolute; left: 20px; top:50%; transform: translateY(-50%); width:5px; height:5px; background:#ddd; border-radius:2px; display: block; } .fa_treeNav .fa_treeNav_box .fa_tree_yjli:hover .fa_tree_yjtt{ color:var(--main-color); } .fa_treeNav .fa_treeNav_box .fa_tree_ejli p:hover:before{ background:var(--main-color); } }