/* Theme Name: huaan Version: 1.0 Description: 安徽领聚数字作为Google中国区核心合作伙伴,拥有安徽省唯一的一家Google出海体验中心,为安徽本土化外贸企业出海提供一站式服务——网站搭建,谷歌SEO优化,谷歌竞价,谷歌SNS社媒营销等。 Author: 版权所有：安徽领聚 */ @charset "utf-8"; html { scroll-behavior: smooth } .wrap { width: 83.3333%; margin: 0 auto } .wrap_74{ width: 74%; margin: 0 auto; } .wrap_60{ width: 60%; margin: 0 auto; } .wrap_top { width: 94%; margin: 0 auto } @media screen and (max-width:1600px) { .wrap { width: 88% } .wrap_74{width: 80%;} .wrap_60{ width: 65%; } } @media screen and (max-width:1440px) { .wrap { width: 90% } .wrap_74{width: 88%;} .wrap_60{ width: 70%; } } @media screen and (max-width:1366px) { .wrap_top { width: 96%; } .wrap_74{width: 90%;} } @media screen and (max-width:1024px) { .wrap { width: 94% } .wrap_top { position: initial; } .wrap_74{width: 94%;} .wrap_60{ width: 94%; } } :root { --i_color: rgba(69,162,255,1); /* 全局颜色 */ --i_color2: rgba(145,200,255,1); --i_color3: rgb(69, 162, 255); /* 副颜色 */ --header_height: 1rem; /* 头部高度 */ --border_color: rgba(0, 0, 0, .1); /* 默认边框颜色 */ --f_menu_height: 50px; /* 移动端底部菜单 */ --linear-gradien:linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); --linear-gradien2:linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); } @media screen and (max-width:1024px) { :root, header { --header_height: .6rem; } } @media screen and (max-width:768px) { :root { --border_color: rgba(0, 0, 0, .06) } } @font-face { font-family: 'sy'; src: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/webfonts/SourceHanSansCN-VF-2.otf') format('opentype'); } @font-face { font-family: 'sy_bold'; src: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/webfonts/SourceHanSansOLD-Bold-2.otf') format('opentype'); } body { font-family: 'sy', sans-serif; } /* header */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 2014; background-color: transparent; border-bottom: 1px solid #DBDBDB; } /* header::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--border_color); z-index: 2014; } */ .TopHeader{ background-color: rgba(255, 255, 255,0.95); } .top_cont { position: relative; z-index: 2013; } .top { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; position: relative; } /* .TopHeader .top_cont { background: #222; } */ @media screen and (max-width:1024px) { header { top: 0; top: 0; width: 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, .1); } header {border-radius:0} /* .top_cont { background: #333 !important; } */ .top_search_ico::after {height: 0rem !important;} } /* logo */ .logo { display: -webkit-flex; display: flex; align-items: center; height: var(--header_height); } .logo a { display: -webkit-flex; display: flex; align-items: center; height: 97%; } .logo img { max-height: 100%; } @media screen and (max-width:1440px) { .logo a { height: 60%; } } @media screen and (max-width:1024px) { .logo a { height: 70%; } } /* 导航 */ @media screen and (min-width:1025px) { .i_nav { margin-left: auto; display: -webkit-flex; display: flex; flex-wrap: nowrap; z-index: 2014; } .i_nav>li { position: relative; margin: 0 .26rem; } .i_nav>li>a { display: block; font-size: .2rem; color: #222; line-height: var(--header_height); white-space: nowrap; -webkit-border-radius: .08rem; border-radius: .08rem; text-transform: uppercase; } .i_nav>.current-menu-item>a, .i_nav>.current-category-ancestor>a, .i_nav>.current-post-ancestor>a, .i_nav>.current-menu-ancestor>a, .i_nav>.current-menu-parent>a, .i_nav>li:hover>a, .i_nav .curr>a { transition: all 0.3s ease; position: relative; color: var(--i_color); } .i_nav .sub-menu { display: none; position: absolute; border-top: 2px solid var(--i_color); background: #fff; min-width: 1.6rem; overflow: hidden; } .i_nav .sub-menu li { position: relative; } .i_nav .sub-menu li::before, .i_nav .sub-menu li::after { content: ''; position: absolute; bottom: 0; height: 1px; } .i_nav .sub-menu li::before { left: 0; width: 100%; background: rgb(0 0 0 / 8%); } .i_nav .sub-menu li::after { right: 0; width: 0; background: var(--i_color); } .i_nav .sub-menu a { display: block; padding: 0 .8rem 0 .2rem; font-size: 0.15rem; color: #333; line-height: 0.44rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; left: 0; } .i_nav .sub-menu a::before { content: "\f324"; font-family: "Font Awesome 5 Pro"; font-weight: 300; position: absolute; top: 50%; transform: translate(0, -50%); left: -.16rem; font-size: 0.14rem; color: var(--i_color); } .i_nav .sub-menu li:hover::after { right: initial; left: 0; width: 100%; } .i_nav .sub-menu li:hover a { left: .16rem; } .i_nav .sub-menu li:hover a { color: var(--i_color); } .i_nav .sub-menu li:hover a::before { left: 0; } .i_nav .sub-menu li, .i_nav .sub-menu li::after, .i_nav .sub-menu a, .i_nav .sub-menu a::before { -webkit-transition: all .5s ease; transition: all .5s ease } } @media screen and (max-width:1440px) { .i_nav>li { margin: 0 .2rem; } } @media screen and (max-width:1366px) { .i_nav>li { margin: 0 .16rem; } .i_nav>li>a { font-size: 0.15rem; } } @media screen and (max-width:1200px) { .i_nav>li { margin: 0 .14rem; } } @media screen and (max-width:1024px) { .i_nav { display: none; position: fixed; top: var(--header_height); left: 0; width: 100%; width: 100vw; max-height: calc(100vh - var(--header_height)); background: #FFF; overflow-y: auto; z-index: 2 } /*滚动条*/ .i_nav::-webkit-scrollbar { width: 3px; height: 8px } .i_nav::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #555 } .i_nav::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } .i_nav>li { margin: 0 0 !important; border-bottom: 1px solid var(--border_color); position: relative } .i_nav>.menu-item-has-children i { display: block; position: absolute; top: 0; right: 0; width: .44rem; height: .44rem; background: #F1F1F1; } .i_nav>.menu-item-has-children i::before { content: '\f107'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.26rem; color: #222; } .i_nav>.menu-item-has-children i.on::before { content: '\f106'; } .i_nav>li>a { padding: 0 .2rem; font-size: .15rem; color: #222; line-height: .44rem; text-transform: uppercase; } .i_nav>li>.sub-menu { display: none } .i_nav>li>.sub-menu li { position: relative; } .i_nav .sub-menu a { padding: 0 .4rem; font-size: .14rem; color: #555; line-height: .4rem; position: relative } .i_nav .sub-menu li:not(:last-child) { border-bottom: 1px solid var(--border_color) } .i_nav>li>.sub-menu b { position: absolute; top: 0; right: 0; width: .4rem; height: .4rem; background: url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/public/arrow_down_hollow_hei.svg) no-repeat center; background-size: .16rem; } .i_nav>li>.sub-menu b.on { background: url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/public/arrow_up_hollow_hei.svg) no-repeat center; background-size: .16rem; } .i_nav .sub-menu .sub-menu { display: none; } .i_nav .sub-menu .sub-menu a { padding: 0 .6rem; font-size: .13rem; color: #888; line-height: .36rem; position: relative; } .i_nav a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } } @media screen and (max-width:768px) {} @media screen and (max-width:560px) {} /* 移动端导航按钮 */ .nav_menu { /* position: absolute; right: 0; top: 50%; transform: translateY(-50%); */ position: relative; width: 22px; height: 16px; display: none; cursor: pointer } .nav_menu i { display: block; width: 100%; height: 2px; position: absolute; top: 50%; margin-top: -1px; background: #222; border-radius: .1rem; transition: 0.5s } .nav_menu::before, .nav_menu::after { content: ""; width: 100%; height: 2px; background: #222; position: absolute; left: 0; border-radius: .1rem; transition: 0.5s } .nav_menu::before { top: 0; } .nav_menu::after { bottom: 0; } .nav_menu.on i { opacity: 0 } .nav_menu.on::before { transform: rotate(45deg); top: 50%; margin-top: -2px } .nav_menu.on::after { transform: rotate(-45deg); top: 50%; margin-top: -2px } @media screen and (max-width:1024px) { .nav_menu { display: block !important } } .top_r { --size: .24rem } .top_r { margin-left: 0.3rem; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; height: var(--header_height) } .top_search_ico { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; height: var(--header_height); margin-right: 0.3rem; position: relative; } .top_search_ico::after{ content: ''; position: absolute; top: 50%; right: -0.15rem; transform: translate(0,-50%); width: 0.01rem; height: 0.22rem; background-color: #222; } .top_search_ico i { font-size: var(--size); color: #222; cursor: pointer; } .top_search_ico.on i { color: var(--i_color); } .top_language { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; height: var(--header_height); position: relative; } .top_language>i { font-size: var(--size); cursor: pointer; color: #222; } .top_language.on>i { color: var(--i_color); } .top_language_list { visibility: hidden; opacity: 0; position: absolute; top: calc(var(--header_height) - .2rem); right: 0; z-index: 2; -webkit-transition: all .3s ease; transition: all .3s ease } .top_language_list.on { visibility: visible; opacity: 1; top: var(--header_height); box-shadow: .04rem .06rem .1rem rgb(0 0 0 / 10%); } .top_language_list ul { overflow: hidden; } .top_language_list li { background: #FFF; } .top_language_list a>span { display: block; padding: 0 14px; min-width: 100px; overflow: hidden } .top_language_list img, .top_language_list .trp-ls-language-name { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: .12rem; color: #666; line-height: .3rem } .top_language_list li:hover { background: var(--i_color) } .top_language_list li:hover .trp-ls-language-name { color: #FFF; } .top_language, .top_language>i { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } @media screen and (max-width:1024px) { .top_language { margin: 0 .2rem; } } @media screen and (max-width:768px) {} @media screen and (max-width:560px) {} header, .top_cont, .logo, .logo img, .i_nav>li, .i_nav>li>a, .top_r { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease } /* search main */ .top_search { --search_height: .38rem } .top_search { position: fixed; top: 1.2rem; left: 0; width: 100%; padding: .16rem 0; background: #FFF; -webkit-transition: all .3s ease; transition: all .3s ease; z-index: 6; opacity: 0; visibility: hidden; } .top_search.on { top: var(--header_height); box-shadow: 0 0.06rem 0.1rem rgb(0 0 0 / 8%); opacity: 1; visibility: visible; } .top_search form { width: 80%; margin: 0 auto; max-width: 5rem; display: -webkit-flex; display: flex; flex-wrap: wrap; box-sizing: border-box; border: 1px solid var(--i_color); overflow: hidden; } .top_search_ipt { width: calc(100% - var(--search_height)); height: var(--search_height); box-sizing: border-box; padding: 0 0 0 .12rem; } .top_search_btn { font-size: 0; width: calc(var(--search_height)); height: var(--search_height); background: var(--i_color) url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/search.svg) no-repeat center; background-size: .2rem; cursor: pointer; } @media screen and (max-width:1366px) { .top_r { margin-left: 0.5rem; } .top_search_ico { margin-right: 0.3rem; } } @media screen and (max-width:1200px) {} @media screen and (max-width:1024px) { .top_r { margin-left: auto; } .top_search_ico { margin-right: 0; } } @media screen and (max-width:768px) { .top_search { --search_height: .34rem } .top_search { padding: .12rem 0; } } @media screen and (max-width:560px) { .top_search form { width: 94%; } .top_search_btn {} } /* 导航下拉 */ /* products */ @media screen and (min-width:1025px) { .drop{ display: none; width: 100%; position: fixed; top: var(--header_height); left: 0; background-color: #4F4F4F; box-sizing: border-box; padding: 0.4rem 0; z-index: 99999999; } .drop_ul{ display: flex; display: -webkit-flex; box-sizing: border-box; padding: 0 3%; justify-content: center; overflow: hidden; } /*滚动条*/ .drop_ul::-webkit-scrollbar { width: 3px; height: 2px } .drop_ul::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #555 } .drop_ul::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } .drop_ul li{ width: 2.25rem; margin-right: 3%; } .drop_ul li:last-child{ margin-right: 0; } .drop_ul li>a{ display: block; width: 100%; } .drop_ul h2{ font-size: 0.2rem; color: white; text-align: center; margin-bottom: 0.2rem; transition: all 0.3s ease; } .drop_ul li>a:hover h2{ color: var(--i_color); } .drop_ul_img{ width: 100%; position: relative; overflow: hidden; } .drop_ul_img::after{ content: ''; display: block; padding-bottom: 100%; } .drop_ul_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .drop_dl{ margin-top: 0.2rem; display: flex; display: -webkit-flex; flex-direction: column; align-items: center; } .drop_dl dt{ margin-bottom: 0.1rem; } .drop_dl dt a{ font-size: 0.16rem; line-height: 0.26rem; color: white; text-align: center; display: inline-block; position: relative; transition: all 0.3s ease; } .drop_dl dt a::after{ content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 1px; background-color: var(--i_color); transition: all 0.5s ease; } .drop_dl dt a:hover::after{ width: 100%; right: auto; left: 0; } .drop_dl dt a:hover{ color: var(--i_color); } @media screen and (max-width:1600px) { } @media screen and (max-width:1440px) { } @media screen and (max-width:1366px) { } @media screen and (max-width:1200px) { .drop_ul li{margin-right: 2%;} } } @media screen and (max-width:1024px) { .drop{display: none;} } /* -=---------------------banner--------------------------- */ /* banner */ .banner_fixed{ position: fixed; top: 0; left: 0; width: 100%; overflow: hidden; } .banner{width:100%; position:relative;} .banner .swiper-slide{height:0; overflow:hidden; padding-bottom:100vh; position:relative} .banner .swiper-slide>img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover} .banner .swiper-slide video{position:absolute; left:0; top:0; width:100%; height:100%!important; object-fit:cover; z-index:2} .banner .swiper-slide{ width: 100%; display: block; transition:all 0.3s ease; } .banner .swiper-button-prev, .banner .swiper-button-next{ position:absolute; top:50%; transform:translate(0,-50%); width:60px; height:60px; z-index:999; outline:none; cursor:pointer; -moz-user-select:none; /*火狐*/ -webkit-user-select:none; /*webkit浏览器*/ -ms-user-select:none; /*IE10*/ -khtml-user-select:none; /*早期浏览器*/ user-select:none; -webkit-border-radius:200px; -moz-border-radius:200px; border-radius:200px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } .banner .swiper-button-prev{left:-60px; background:rgba(0,0,0,.6) url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/arrow_left_kx_bai.svg) no-repeat center; background-size:26px} .banner .swiper-button-next{right:-60px; background:rgba(0,0,0,.6) url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/arrow_right_kx_bai.svg) no-repeat center; background-size:26px} .banner:hover .swiper-button-prev{left:4%} .banner:hover .swiper-button-next{right:4%} .banner .swiper-button-prev:hover, .banner .swiper-button-next:hover{background-color:var(--i_color)} .banner .pagination-all{ position:absolute; bottom: 3%; left: 50%; transform:translate(-50%,0); cursor:pointer; z-index:10; } .banner .swiper-pagination { position: relative; display: flex; display: -webkit-flex; align-items: center; text-align: left; } .banner .swiper-pagination-bullet { width: 1.1rem; height: 0.02rem; border-radius: 50%; box-sizing: border-box; background: #C8C8C8; opacity: 1; margin: 0 10px; position: relative; z-index: 4; transition: all 0.5s ease; } .banner .swiper-pagination-bullet::after{ content: ''; position: absolute; top: 50%; right: 0; width: 0; height: 100%; background-image: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); transform: translate(0,-50%); transition: all 0.7s linear; z-index: 2; } .banner .swiper-pagination-bullet-active::after { width: 100%; right: auto; left: 0; } .banner .swiper-container{ } /* .banner_container{ clip-path: inset(0 0 0 0) !important; -webkit-clip-path: inset(0 0 0 0) !important; } */ /* .banner .swiper-slide-active{ animation: banner_img_in 1s cubic-bezier(.35,.01,.37,.96) both; opacity: 1; z-index: 10; transition: opacity .4s cubic-bezier(.215,.61,.355,1); } .banner .swiper-slide-prev,.banner .swiper-slide-next{ opacity: 1; z-index: 2; transition: opacity .4s cubic-bezier(.215,.61,.355,1); animation: banner_img_out 1s cubic-bezier(.35,.01,.37,.96) forwards; animation-delay: 1s; } */ @keyframes banner_img_in { 0%, 5% { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); transform: scale(1.2); transform-origin: 0 50%; } 100% { -webkit-clip-path: inset(0 -1px 0 0); clip-path: inset(0 -1px 0 0); transform: scale(1); transform-origin: 0 50%; } } @keyframes banner_img_out{ 0% { transform: scale(1); transform-origin: 100% 50%; } 100% { transform: scale(1.1); transform-origin: 100% 50%; } } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ .banner .swiper-button-prev, .banner .swiper-button-next{display:none!important} .banner .pagination-all{bottom:30px;} .banner .swiper-pagination-bullet {width: 80px;} } @media screen and (max-width:767px){ .banner .swiper-slide{padding-bottom:88%} .banner .swiper-pagination-bullet {width: 60px;} } @media screen and (max-width:560px){ .banner .pagination-all{bottom:26px} .banner .swiper-pagination-bullet {width: 40px;} } @media screen and (max-width:425px){ .banner .swiper-pagination-bullet {width: 20px;} } /* --------------------banner文字------------------- */ .banner_text1{ position: absolute; top: 50%; left: 13%; transform: translate(0,-50%); } .banner_text1 h2{ font-size: 0.6rem; display: inline-block; color: transparent; background-image: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } .banner_text1 h3{ font-size: 0.35rem; color: rgba(97,97,97,44%); margin: 0.1rem 0 0.7rem 0; } /* 按钮 */ .home_button_div{ position: relative; z-index: 10; } .home_button{ display: inline-block; box-sizing: border-box; padding: 0.125rem 0.45rem; border-radius: 0.3rem 0 0 0; background-image: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); transition: 31ms cubic-bezier(.5, .7, .4, 1); overflow: hidden; } .home_button_p{ display: flex; display: -webkit-flex; position: relative; } .home_button_p p{ font-size: 0.2rem; color: white; transition: all 0.3s ease; } .home_button_p::before { content: ''; position: absolute; top: 50%; left: -190%; width: 0.5rem; height: 1.4rem; background: rgb(255 255 255 / 30%); -webkit-transform: translate(0, -50%) rotate(130deg); transform: translate(0, -50%) rotate(130deg); -webkit-transition: all .8s ease; transition: all .5s ease; } .home_button_p:hover::before { left: 210%; } @media screen and (max-width:1600px){ .banner_text1 h2 {font-size: 0.7rem;} .banner_text1 h3 {font-size: 0.4rem;} } @media screen and (max-width:1440px){ .banner_text1 h2 {font-size: 0.65rem;} .banner_text1 h3 {font-size: 0.38rem;} } @media screen and (max-width:1366px){ .banner_text1 h2 {font-size: 0.6rem;} .banner_text1 h3 {font-size: 0.35rem;} } @media screen and (max-width:1200px){ .banner_text1 h2 {font-size: 0.55rem;} .banner_text1 h3 {font-size: 0.32rem;margin: 0.1rem 0 0.6rem 0;} } @media screen and (max-width:1024px){ .banner_text1 h2 {font-size: 0.5rem;} .banner_text1 h3 {font-size: 0.3rem;margin: 0.1rem 0 0.5rem 0;} } @media screen and (max-width:959px){ .banner_text1 h2 {font-size: 0.45rem;} .banner_text1 h3 {font-size: 0.28rem;margin: 0.1rem 0 0.4rem 0;} .home_button{padding: 0.12rem 0.4rem;} .home_button_p:before {font-size: 18px;} .home_button_p p {font-size: 18px;} } @media screen and (max-width:767px){ .banner_text1 h2 {font-size: 35px;} .banner_text1 h3 {font-size: 20px;margin: 0.1rem 0 0.3rem 0;} .home_button{padding: 0.1rem 0.35rem;border-radius: 20px 0 0 0 ;} .home_button_p:before {font-size: 16px;} .home_button_p p {font-size: 16px;} } @media screen and (max-width:560px){ .banner_text1 h3 {font-size: 16px;margin: 0.1rem 0 0.2rem 0;} .home_button{padding: 0.1rem 0.3rem;border-radius: 18px 0 0 0 ;} .banner_text1 h2 {font-size: 25px;} .home_button_p:before {font-size: 14px;} .home_button_p p {font-size: 14px;} } @media screen and (max-width:425px){ .banner_text1 h3 {font-size:14px;} .banner_text1 h2 {font-size: 20px;} .home_button{padding: 0.07rem 0.25rem;} } main { position: relative; background: #FFF; overflow: hidden; z-index: 5; } /* home_about */ .home_about_all{ box-sizing: border-box; padding-top: 1.2rem; position: relative; } .home_about_bac{ background-size: cover; box-sizing: border-box; } .home_about{ display: flex; display: -webkit-flex; position: relative; z-index: 7; flex-wrap: wrap; } .home_about_left{ width: 13%; } .title{ } .title_center{ display: flex; display: -webkit-flex; justify-content: center; } .title p{ display: inline-block; font-size: 0.48rem; font-weight: bold; color: transparent; background-image: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .home_about_right{ width: 87%; box-sizing: border-box; padding-left: 9%; } .home_about_right h2{ font-size: 0.18rem; line-height: 0.3rem; color: #616161; } .home_about_dl{ display: flex; display: -webkit-flex; justify-content: space-between; margin: 0.6rem 0 0.7rem 0; } .home_about_dl dt{ } .home_about_div{ display: flex; display: -webkit-flex; align-items: flex-end; margin-bottom: 0.1rem; } .home_about_dl dt:hover .home_about_div p,.home_about_dl dt:hover .home_about_div span{ background: url(//cdn.xuansiwei.com/mingx11998/1759031661010/5509e27c962d401583e1259a6e2f8f17preview.jpeg~tplv-a9rns2rl98-downsize_watermark_1_6_r__384-216_c__0a76fb_.png?x-oss-process=style/png_small); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .home_about_div p{ font-size: 0.6rem; color: #222; } .home_about_div span{ font-size: 0.18rem; color: #222; margin-bottom: 0.12rem; } .home_about_dl h3{ font-size: 0.18rem; color: #616161; text-align: center; } .index-about-point{ --color_img:linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); } .index-about-point {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;overflow: hidden;} .about-point-content {width: 100%;height: 100%;} .circular {position:absolute;left:0;top:0;margin-left: -300px;margin-top:-20%;width:6.38rem;height:6.38rem;border-radius:100%;background-image: var(--color_img);opacity:0.06;z-index:5;} .circular-xiao1,.circular-xiao2,.circular-xiao3,.circular-xiao4,.circular-xiao5,.circular-xiao6,.circular-xiao7,.circular-xiao8,.circular-xiao9,.circular-xiao0 {border-radius: 100%;position: absolute;z-index: 1;left: 0;top: 0;} .circular-xiao1 {background-image: var(--color_img);width: 29px;height: 29px;opacity: .5;margin-left: 16%;margin-top: 14%;} .circular-xiao2 {background-image: var(--color_img);width: 13px;height: 13px;opacity: .4;margin-left: 33%;margin-top: 16%;} .circular-xiao3 {border-color: rgba(69,162,255,1);border-width: 1px;border-style: solid;width: 44px;height: 44px;opacity: .4;margin-left: 23%;margin-top: 25%;} .circular-xiao4 {background-image: var(--color_img);width: 13px;height: 13px;opacity: .4;margin-left: 6%;margin-top: 30%;} .circular-xiao5 {background-image: var(--color_img);width: 29px;height: 29px;opacity: .4;margin-left: 42%;margin-top: 20%;} .circular-xiao6 {background-image: var(--color_img);width: 51px;height: 51px;opacity: .4;margin-left: 65%;margin-top: 28%;} .circular-xiao7 {border-color: rgba(69,162,255,1);border-width: 1px;border-style: solid;width: 21px;height: 21px;opacity: .4;margin-left: 78%;margin-top: 30%;} .circular-xiao8 {background-image: var(--color_img);width: 10px;height: 10px;opacity: .4;margin-left: 80%;margin-top: 23%;} .circular-xiao9 {background-image: var(--color_img);width: 13px;height: 13px;opacity: .4;margin-left: 95%;margin-top: 30%;} .circular-xiao0 {border-color: rgba(69,162,255,1);border-width: 1px;border-style: solid;width: 106px;height: 106px;opacity: .2;margin-left: 90%;margin-top: 15%;} .home_about_end{ position: absolute; bottom: -7%; left: 0; z-index: 2; width: 100%; } .home_about_end img{ width: 100%; height: auto; } @media screen and (max-width:1600px){ .title p {font-size: 0.45rem;} .home_about_right {padding-left: 8%;} } @media screen and (max-width:1440px){ .title p {font-size: 0.4rem;} .home_about_right {padding-left: 6%;} .home_about_dl {margin: 0.6rem 0;} .home_about_div p {font-size: 0.5rem;} } @media screen and (max-width:1366px){ .home_about_right {padding-left: 4%;} } @media screen and (max-width:1200px){ .title p {font-size: 0.35rem;} .home_about_right {padding-left: 3%;} .home_about_dl {margin: 0.5rem 0;} } @media screen and (max-width:1024px){ } @media screen and (max-width:959px){ .home_about_left {width: 100%;margin-bottom: 0.2rem;} .home_about_right {width: 100%;padding-left: 0%;} .home_about_dl {margin: 0.4rem 0;} .home_about_div p {font-size: 0.4rem;} .home_about_end {bottom: -4%;} .home_about_right h2{font-size: 16px;} .home_about_dl h3 {font-size: 16px;} } @media screen and (max-width:767px){ .title p {font-size: 0.3rem;} .home_about_end img{height: 2.7rem;object-fit: cover;} .home_about_end {bottom: -7%;} } @media screen and (max-width:560px){ .home_about_dl h3 {font-size: 14px;} .home_about_div p {font-size: 20px;} .home_about_div span {font-size: 0.14rem;margin-bottom: 0.1rem;} } @media screen and (max-width:425px){ .home_about_dl h3 {font-size: 12px;} .home_about_div span {font-size: 12px;} .home_about_div p {font-size: 18px;} } /* -----------------home_field------------------- */ .home_field_area{ box-sizing: border-box; padding: 1.4rem 0 1rem 0; } .home_field_title{ display: flex; display: -webkit-flex; justify-content: space-between; } .home_field_ul{ margin-top: 0.7rem; border: 1px solid #E2E2E2; border-radius: 0.3rem 0 0 0; display: flex; display: -webkit-flex; } .home_field_ul li{ position: relative; width: 15.7%; box-sizing: border-box; padding: 1rem 0.6rem 0.6rem 0.6rem; border-right: 1px solid #E2E2E2; transition: all 0.5s linear; flex-grow: 1; overflow: hidden; } .home_field_ul li::after{ content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0.1rem; background-image:linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%) ; z-index: 2; transition: all 0.5s linear; } .home_field_ul li:nth-child(1)::after{ border-radius: 0.5rem 0 0 0; } .home_field_ul .home_field_top{ font-size: 0.28rem; color: #222; font-weight: bold; } .home_field_dl{ margin: 0.3rem 0 0.6rem 0; height: 3.14rem; } .home_field_dl dt{ margin-bottom: 0.1rem; } .home_field_dl dt a{ font-size: 0.18rem; color: #616161; transition: all 0.3s ease; } .home_field_dl dt a:hover{ color: var(--i_color); } .home_field_last{ width: 1rem; height: 1rem; object-fit: contain; } .home_field_img{ position: absolute; right: -2%; top: 0%; transition:all 0.3s linear; opacity: 0; } .home_field_img img{ width: 4.8rem; height: 5.75rem; object-fit: contain; transition:all 0.1s linear; } .home_field_imgs{ position: absolute; right: -2%; top: 0%; transition:all 0.15s linear; opacity: 0.15; } .home_field_imgs img{ width: 3.4rem; height: 5rem; object-fit: contain; transition:all 0.1s linear; } .home_field_active .home_field_imgs{ opacity: 0; } .home_field_ul .home_button_div{ height: 1rem; } .hide{ display: none; } .home_field_dl.on .hide{ display: block; } .home_field_active::after{ width: 100% !important; } .home_field_active{ background-color: #F9F9F9; } .home_field_active .home_field_img{ opacity: 1; transition: all .5s .3s; } .home_field_ul .home_button_div{ display: none; } .home_field_active .home_field_top{ color: transparent; background-image: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .home_field_ul i{ display: block; width: 50px; height: 50px; background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/right_icon.svg') center no-repeat; background-size: 30px; position: absolute; top: 30px; right: 14px; z-index: 2; } @media screen and (min-width:960px){ .home_field_active .home_button_div{ display: block; display: flex; display: -webkit-flex; align-items: center; } .home_field_active .home_field_last{ display: none; } } @media screen and (max-width:1600px){ .home_field_ul li {padding: 1rem 0.5rem 0.6rem 0.5rem;} .home_field_ul .home_field_top {font-size: 0.26rem;} } @media screen and (max-width:1440px){ .home_field_ul li {padding: 0.8rem 0.4rem 0.6rem 0.4rem;} .home_field_ul .home_field_top {font-size: 0.24rem;} .home_field_area {padding: 1.2rem 0 0.8rem 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .home_field_ul li {padding: 0.6rem 0.3rem 0.6rem 0.3rem;} .home_field_area { box-sizing: border-box; padding: 1rem 0 0.6rem 0; } .home_field_ul {margin-top: 0.6rem;} } @media screen and (max-width:1024px){ } @media screen and (max-width:959px){ .home_field_active .home_field_img{display: none;} .home_field_ul li {padding: 0.6rem 0.2rem;} .home_field_dl dt a {font-size: 0.16rem;} .home_field_ul .home_field_top {font-size: 0.22rem;} .home_field_last {width: 0.8rem;height: 0.8rem;margin: 0 auto;display: block;} } @media screen and (max-width:767px){ .home_field_dl dt a {font-size: 0.14rem;} .home_field_ul .home_field_top {font-size: 0.2rem;} .home_field_ul li {padding: 0.4rem 0.1rem;} .home_field_last {width: 0.6rem;height: 0.6rem;} .home_field_ul {margin-top: 0.4rem;} .home_field_ul li{width: 100%;border-bottom: 1px solid #E2E2E2;} .home_field_ul {flex-wrap: wrap;} .home_field_img{display: none;} .home_field_dl{height: unset;display: none;} .home_field_last{display: none;} .home_field_dl {margin: 0.3rem 0 0 0;} .home_field_imgs img{display: none;} } @media screen and (max-width:560px){ .home_field_ul li{display: flex;display: -webkit-flex;flex-direction: column;justify-content: space-between;} .home_field_ul li {padding: 0.3rem 0.1rem;} .home_field_ul i{background-size: 20px;top: 20px; } .home_field_ul .home_field_top {font-size: 0.18rem;} } @media screen and (max-width:425px){ .home_field_ul .home_field_top {font-size: 0.16rem;} } /* home_project */ .home_project_area{ } .home_project{ width: 100%; position: relative; height: 7.6rem; overflow: hidden; margin-top: 0.7rem; } .home_project_ul{ position: absolute; width: 300%; height: 100%; display: inline-flex; overflow: hidden; } .slide1,.slide2,.slide3{ position: absolute; background-position: center; background-size: cover; width: 33.33%; height: 100%; transition: 0.5s; opacity: 0; } .slide1{ background-image: url('//cdn.xuansiwei.com/mingx11998/wp-content/uploads/huaan/2023/08/solution1.webp'); } .slide2{ background-image: url('//cdn.xuansiwei.com/mingx11998/wp-content/uploads/huaan/2023/08/solution2.webp'); } .slide3{ background-image: url('//cdn.xuansiwei.com/mingx11998/wp-content/uploads/huaan/2023/08/solution3.jpg'); } svg { position: absolute; z-index: 1; width: 100%; height: 7.6rem; } circle { /* stroke: url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/#gradient) ; */ stroke:rgba(255, 255, 255,0.95); fill: none; transition: 0.3s; } #svg1 circle { transition-timing-function: linear; } #svg2 circle { transition-timing-function: linear; } .tran { transform: scale(1.3); } .up1 { opacity: 1; } .up2 { z-index: 40; } .steap { stroke-width: 0; } .streak { stroke-width: 102px; } @media (max-width: 700px) { .parent { margin-left: 1%; } } .home_project_dl{ position: absolute; top: 0; right: 0; width: 16.5%; height: 100%; background-color: rgba(55, 55, 55,0.1); z-index: 52; box-sizing: border-box; border: 1px solid white; border-top: 0px; } .home_project_dl dt{ display: flex; display: -webkit-flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100% / 3); width: 100%; border-top: 1px solid white; box-sizing: border-box; cursor: pointer; transition: all 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .home_project_dl dt a{ display: flex; display: -webkit-flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; } .home_project_dl dt:nth-child(1){ border-top: 0px; } .home_project_dl dt img{ width: 0.5rem; height: 0.5rem; object-fit: contain; margin-bottom: 0.2rem; } .home_project_dl dt p{ font-size: 0.2rem; color: white; } .home_project_text{ position: absolute; top: 48%; left: 9%; transform: translate(0,-50%); width: 70%; z-index: 39; } .zIndex{ z-index: 41 !important; } .home_project_text h2{ font-size: 0.4rem; color: rgba(34,34,34,0.9); font-weight: 500; } .home_project_text h3{ font-size: 0.2rem; color: #616161; margin: 0.15rem 0 0.7rem 0; } .home_project_op{ animation: opt 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19); } @keyframes opt{ 0%{ opacity: 0; } 100%{ opacity: 1; } } .home_project_dl .current{ border-radius: 0.3rem 0 0 0; background-image: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); } @media screen and (max-width:1600px){ .home_project_text {left: 4%;width: 76%;} } @media screen and (max-width:1440px){ svg {height: 7rem;} .home_project {height: 7rem;} .home_project_text h2 {font-size: 0.38rem;} .home_project_text h3 {font-size: 0.18rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ svg {height: 6rem;} .home_project {height: 6rem;} .home_project_dl dt p{width: 100% ;box-sizing: border-box;padding: 0 2%;font-size: 0.18rem;text-align: center;} .home_project_dl dt img {width: 0.45rem;height: 0.45rem;} .home_project_text h2 {font-size: 0.35rem;} } @media screen and (max-width:1024px){ } @media screen and (max-width:959px){ svg {height: 5rem;} .home_project {height: 5rem;} .home_project_dl dt p{font-size: 0.16rem;} .home_project_dl dt img {width: 0.4rem;height: 0.4rem;} .home_project_text h2 {font-size: 30px;} .home_project_text h3 {font-size: 0.16rem;} .home_project_text h3 {margin: 0.15rem 0 0.6rem 0;} } @media screen and (max-width:767px){ .home_project_dl {width: 23.5%;} .home_project_dl dt img {width: 0.3rem;height: 0.3rem;margin-bottom: 0.1rem;} .home_project_dl dt p{font-size: 0.14rem;} .home_project_text h2 {font-size: 25px;} .home_project_text {left: 3%;width: 70%;} .home_project_text h3 {margin: 0.14rem 0 0.5rem 0;} .home_project {height: 400px;} } @media screen and (max-width:560px){ .home_project_dl {width: 25%;} .home_project_dl dt img {width: 0.2rem;height: 0.2rem;} .home_project_text h3 {font-size: 0.12rem;} .home_project_text h3 {margin: 0.1rem 0 0.4rem 0;} .home_project_text h2 {font-size: 20px;} .home_project_dl dt p{font-size: 12px;} } @media screen and (max-width:425px){ .home_project_dl {width: 30%;} .home_project_text {width: 64%;} .home_project_text h2 {font-size: 18px;} } /* home_news */ .home_news{ box-sizing: border-box; padding: 1rem 0; position: relative; overflow: hidden; } .home_news_area{ box-sizing: border-box; padding-top: 1rem; } .i_news_list { position: relative; overflow: hidden } .i_news_list .swiper-wrapper { display: -webkit-flex; display: flex; position: relative; width: 100% } .i_news_list .swiper-slide { flex-shrink: 0; position: relative } .i_news_list .img { width: 100%; position: relative; overflow: hidden } .i_news_list .img::before { content: ""; display: block; padding-bottom: 48.8% } .i_news_list .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; -webkit-transition: all .5s ease; transition: all .5s ease } .i_news_list .n_time { position: absolute; bottom: -.4rem; right: 0; padding: .05rem .2rem .05rem .3rem; background: var(--linear-gradien); font-size: 0.14rem; color: #FFF; -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; -webkit-transition: all .5s ease; transition: all .5s ease } .i_news_list .txt { margin: 0.4rem 0; } .i_news_list .txt p { font-size: 0.24rem; font-weight: bold; color: #222; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; margin-bottom: 0.15rem; transition: all 0.3s ease; } .i_news_list .txt h2{ font-size: 0.16rem; line-height: 0.24rem; color: #616161; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 0.48rem; } .i_news_list .swiper-slide:hover img { width: 110%; height: 110%; } .i_news_list .swiper-slide:hover .n_time { bottom: 0; } .i_news_list .swiper-slide:hover p { color: transparent; background-image: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .news-pagination { display: block; text-align: center } .news-pagination .swiper-pagination-bullet { width: .7rem; height: .02rem; display: inline-block; margin: 0 6px; background: #C8C8C8; -webkit-border-radius: 1rem; border-radius: 1rem; outline: none; cursor: pointer; position: relative; } .news-pagination .swiper-pagination-bullet::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; -webkit-transition: all .5s ease; transition: all .5s ease } .news-pagination .swiper-pagination-bullet-active::before { width: 100%; background: var(--linear-gradien); } /* 左右箭头 */ .news-button-prev, .news-button-next{position:absolute; top:30%; transform:translate(0,-50%); width:40px; height:50px; background:rgba(0,0,0,.3); z-index:999; cursor:pointer; outline:none} .news-button-prev:before, .news-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:#FFF; font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .news-button-prev{left:1px} .news-button-prev:before{content:"<"} .news-button-next{right:1px} .news-button-next:before{content:">"} .home_news_i{ } .home_news_i i{ position: absolute; display: block; border-radius: 50%; animation: top_bottom 3s ease-in-out infinite; } .home_news_i i:nth-child(1){ width: 0.3rem; height: 0.3rem; background: var(--linear-gradien); top: 81%; left: 3%; } .home_news_i i:nth-child(2){ width: 0.8rem; height: 0.8rem; background: var(--linear-gradien); top: 8%; left: 40%; opacity: 0.4; animation-delay: 0.3s; } .home_news_i i:nth-child(2)::after{ content: ''; width: 0.78rem; height: 0.78rem; border-radius: 50%; background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: 0.6s; } .home_news_i i:nth-child(3){ width: 0.47rem; height: 0.47rem; background: var(--linear-gradien); top: 93%; left: 69%; opacity: 0.7; animation-delay: 1s; } .home_news_i i:nth-child(4){ width: 2.7rem; height: 2.7rem; background: var(--linear-gradien); top: 13%; right: -10%; opacity: 0.2; animation-delay: 0.7s; } @keyframes top_bottom{ 0% { transform: translatey(0px); } 50% { transform: translatey(-30px); } 100% { transform: translatey(0px); } } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .home_news {padding: 0.8rem 0;} .home_news_area {padding-top: 0.8rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .home_news {padding: 0.6rem 0;} .home_news_area {padding-top: 0.6rem;} .news-pagination .swiper-pagination-bullet {width: .6rem;} } @media screen and (max-width:1024px){ .news-button-prev, .news-button-next{display: none;} } @media screen and (max-width:959px){ .news-pagination .swiper-pagination-bullet {width: .5rem;} .i_news_list .txt p {font-size: 0.2rem;} .i_news_list .txt {margin: 0.3rem 0;} } @media screen and (max-width:767px){ .home_news_i i:nth-child(3) {top: 90%;} .news-pagination .swiper-pagination-bullet {width: .4rem;} .i_news_list .txt p {font-size: 0.18rem;} .i_news_list .txt h2 {font-size: 14px;} } @media screen and (max-width:560px){ .news-pagination .swiper-pagination-bullet {width: .3rem;} .i_news_list .txt p {font-size: 0.16rem;} .i_news_list .txt {margin: 0.2rem 0;} } @media screen and (max-width:425px){ } /* --------------------------------------Footer ------------------------------*/ footer{ position: relative; z-index: 5; } .footer_hide{ overflow: hidden; } .footer{ background-color: #F3F3F3; box-sizing: border-box; padding-top: 0.5rem; } .footer_top{ display: flex; display: -webkit-flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; box-sizing: border-box; padding-bottom: 0.3rem; border-bottom: 1px solid #C8C8C8; } .footer_top>img{ height: 0.54rem; } .footer_icon{ display: flex; display: -webkit-flex; align-items: center; } .footer_icon li{ margin-left: 0.25rem; position: relative; } .wx_tc{ position: absolute; width: 1.5rem; height: 1.5rem; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); bottom: 0.6rem; left: 50%; transform: translate(-50%,0); opacity: 0; visibility: hidden; transition: all 0.3s ease; } .wx_tc img{ width: 100%; height: auto; } .wx_tc::before { position: absolute; content: ""; height: 8px; width: 8px; background: #fff; bottom: -3px; left: 50%; transform: translate(-50%) rotate(45deg); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wx_tc.on{ opacity: 1; bottom: 0.5rem; visibility: visible; } .footer_icons{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: all 0.3s ease; } .footer_icon li:hover a .footer_icons{ opacity: 1; } .footer_icon li a{ display: block; cursor: pointer; position: relative; } .footer_icon li a img{ width: 0.37rem; height: 0.37rem; object-fit: contain; } .footer_icon li:nth-child(3) a img{ width: 0.28rem; height: 0.28rem; object-fit: contain; } .footer_center{ box-sizing: border-box; padding: 0.5rem 0 1.5rem 0; display: flex; display: -webkit-flex; justify-content: space-evenly; position: relative; } .footer_center::after{ content: ''; position: absolute; bottom: -2.5rem; right: -0.8rem; width: 5rem; height: 5rem; border-radius: 50%; background:linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,0.08) 58%, #91c8ff 0.08) ; } .footer_center dt{ position: relative; z-index: 2; } .footer_center_l{ display: flex; display: -webkit-flex; flex-direction: column; gap: 0.1rem; } .footer_center_l h2{ font-size: 0.18rem; color: #616161; line-height: 0.24rem; } .footer_center_l>a{ font-size: 0.2rem; line-height: 0.24rem; color: #222; } .footer_center_l>a:hover{ color: var(--i_color3); } .footer_center_ll>h3{ font-size: 0.24rem; color: #222; margin-bottom: 0.2rem; } .footer_center_ll>ul{ display: flex; flex-direction: column; gap: 0.1rem; } .footer_center_ll ul li{ } .footer_center_ll ul li a{ font-size: 0.18rem; line-height: 0.24rem; color: #616161; } .footer_center_ll ul li a:hover{ color: var(--i_color3); } .footer_bto{ background: var(--linear-gradien); box-sizing: border-box; border-radius: 0.5rem 0 0 0; padding: 0.4rem 0; } .footer_bto_flex{ display: flex; display: -webkit-flex; justify-content: space-between; } .footer_bto_flex p{ font-size: 0.16rem; color: white; } .footer_bto_flexs{ display: flex; display: -webkit-flex; gap: 0.3rem; } .footer_bto_flexs li{ position: relative; } .footer_bto_flexs li>a{ font-size: 0.16rem; color: white; display: flex; display: -webkit-flex; align-items: center; cursor: pointer; } .footer_bto_flexs li ion-icon{ font-size: 0.18rem; color: white; margin-left: 0.03rem; } .link_a{ position: absolute; bottom: 0.5rem; right: 0; box-sizing: border-box; padding: 0.15rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); background-color: white; width: 1.5rem; display: flex; display: -webkit-flex; flex-direction: column; gap: 0.1rem; align-items: center; border-radius: 0.1rem; opacity: 0; transition: all 0.3s ease; visibility: hidden; } .link_a.on{ opacity: 1; bottom: 0.4rem; visibility: visible; } .link_a a{ font-size: 0.16rem; color: #616161; } .link_a::before { position: absolute; content: ""; height: 8px; width: 8px; background: #fff; bottom: -3px; left: 64%; transform: translate(-50%) rotate(45deg); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .link_a a:hover{ color: transparent; background-image: var(--linear-gradien); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media screen and (max-width:1600px){ .footer_center {padding: 0.5rem 0 1.3rem 0;} } @media screen and (max-width:1440px){ .footer_center {padding: 0.5rem 0 1rem 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .footer_center {padding: 0.5rem 0 0.8rem 0;} } @media screen and (max-width:1024px){ header {background-color: rgba(255, 255, 255,0.95);} .footer_center::after{bottom: -200px;right: -60px;width: 400px;height: 400px;} } @media screen and (max-width:959px){ .footer_bto_flex {flex-direction: column-reverse;align-items: center;} .footer_bto_flex p{margin-top: 0.1rem;} .footer_bto_flex p{text-align: center;} .footer_center {padding: 0.5rem 0 0.6rem 0;} .footer_top>img {height: 0.5rem;} .footer_center_l>a {font-size: 0.18rem;} .footer_center_ll>h3 {font-size: 0.2rem;} .footer_center_ll ul li a{font-size: 0.16rem;} .footer_center::after{bottom: -150px;right: -40px;width: 300px;height: 300px;} } @media screen and (max-width:767px){ .footer_center dt:nth-child(4),.footer_center dt:nth-child(5){display: none;} .footer_center {padding: 0.5rem 0;} .footer_icon li a img{width: 0.3rem;height: 0.3rem;} .footer_top>img {height: 45px;} .footer_bto_flexs li>a{font-size: 0.14rem;} .footer_bto_flex p {font-size: 0.14rem;} .footer_bto { border-radius: 0.4rem 0 0 0; padding: 0.3rem 0; } .link_a a{font-size: 0.16rem;} .footer_center_l>a {font-size: 0.16rem;} .footer_center_ll>h3 {font-size: 0.18rem;} .footer_center_ll ul li a{font-size: 0.14rem;} .footer_center::after{bottom: -100px;right: -20px;width: 200px;height: 200px;} } @media screen and (max-width:560px){ .footer_center dt:nth-child(3){display: none;} .footer_center {justify-content: space-around;} .footer_center {padding: 0.4rem 0;} .footer_bto { border-radius: 0.3rem 0 0 0; padding: 0.2rem 0; } .link_a a{font-size: 0.14rem;} .wx_tc{width: 1.3rem;height: 1.3rem;} .footer_bto_flex p {font-size: 0.12rem;} } @media screen and (max-width:425px){ .footer_top { justify-content: center; } .footer_top>img{margin-bottom: 0.2rem;} .footer_icon li:nth-child(3) a img { width: 0.28rem; height: 0.28rem; } .wx_tc{width: 1rem;height: 1rem;} } /* ------------------------------------speech------------------------------------------*/ .b_full_header { display: block; background: none; border: none; } @media screen and (max-width:1024px) { .b_full_header { padding-top: var(--header_height); } } /* Inside Banner */ .in_banner { font-size: 0; width: 100%; position: relative; overflow: hidden; z-index: 4; } .banner_fixed { position: fixed; top: 0; left: 0; } .in_b_cont { position: relative; } .in_b_cont>img { width: 100vw; height: 66vh; object-fit: cover; position: relative; } .in_b_t { position: absolute; top: 46%; transform: translate(0, -50%); left: 0; width: 100%; } .in_b_t h2 { margin-bottom: 0.1rem; font-size: 0.48rem; color: #333; display: inline-block; font-weight: bold; text-transform: uppercase; color: transparent; background-image: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .in_b_t h3{ font-size: 0.2rem; line-height: 0.4rem; color: #616161; } .breadcrumb { max-width: 50%; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; } .breadcrumb p { margin-right: 0.1rem; } .breadcrumb p, .breadcrumb a { font-size: 0.2rem; } .breadcrumb a:not(:last-child):after { content: '>'; margin: 0 .04rem; } .breadcrumb a:hover { color: var(--i_color3); } @media screen and (max-width:1440px) { .in_b_t h2 { font-size: 0.45rem; } .breadcrumb p, .breadcrumb a { font-size: 0.18rem; } .in_b_t h3{font-size: 0.18rem;} } @media screen and (max-width:1366px) { .in_b_t h2 { font-size: 0.4rem; } } @media screen and (max-width:1200px) { .in_b_t h2 { font-size: 0.38rem; } } @media screen and (max-width:1024px) { .banner_fixed { top: var(--header_height); } .in_b_cont>img { height: auto; } .in_b_t { top: 44%; } .in_b_t h2 { font-size: 0.32rem; } .breadcrumb p, .breadcrumb a { font-size: 0.16rem; } .in_b_t h3{font-size: 16px;line-height: 30px;} } @media screen and (max-width:768px) { .in_b_t { top: 40%; } .in_b_t h2 { font-size: 0.24rem; } .breadcrumb { max-width: 80%; } .breadcrumb p, .breadcrumb a { font-size: 0.15rem; } .in_b_t h3{font-size: 15px;line-height: 20px;} } @media screen and (max-width:560px) { .in_b_t h2 { margin-bottom: .04rem; font-size: 0.18rem; } .breadcrumb p, .breadcrumb a { font-size: 0.14rem; } .in_b_t h3{font-size: 14px;} } .in_nav { width: 100%; background: var(--linear-gradien); -webkit-border-radius: .6rem 0 0 0; border-radius: .6rem 0 0 0; position: relative; z-index: 5; opacity: 0.95; } .in_nav_tit { display: none; } .in_nav_list { padding: .3rem 0; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; } .in_nav_list li { position: relative; } .in_nav_list li:not(:last-child):before { content: ''; position: absolute; top: 50%; transform: translate(0, -50%); right: -.3rem; width: 1px; height: 0.2rem; background: #FFF; } .in_nav_list a { font-size: 0.2rem; color: #FFF; position: relative; } .in_nav_list a::before { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 1px; background: #FFF; -webkit-transition: all .5s ease; transition: all .5s ease } .in_nav_list .curr a::before, .in_nav_list a:hover::before { right: initial; left: 0; width: 100%; } @media screen and (max-width:1440px) { .in_nav_list a { font-size: 0.18rem; } } @media screen and (max-width:1366px) {} @media screen and (max-width:1200px) { .in_nav { -webkit-border-radius: 0.4rem 0 0 0; border-radius: 0.4rem 0 0 0; } .in_nav_list { padding: .24rem 0; } .in_nav_list a { font-size: 0.17rem; } } @media screen and (max-width:1024px) { .in_nav { position: relative; -webkit-border-radius: 0; border-radius: 0; background: #EFEFEF; margin-top: 0px !important; } .in_nav.navFix { position: fixed; top: var(--header_height); left: 0; width: 100%; margin-top: 0 !important; z-index: 999; } .in_nav_tit { display: block; background: var(--linear-gradien); } .in_nav_tit span { padding: 0.14rem 0; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .1rem; } .in_nav_tit p { font-size: 0.2rem; color: #FFF; } .in_nav_tit i { font-size: 0.26rem; color: #FFF; -webkit-transition: all .5s ease; transition: all .5s ease } .in_nav_tit.on i { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .in_nav_list { display: none; padding: .14rem 0; } .in_nav_list li { text-align: center; } .in_nav_list li:before { display: none; } .in_nav_list a { display: block; padding: .06rem 0; font-size: 0.16rem; color: #555; } .in_nav_list .curr a { color: var(--i_color3); } .in_nav_list a::before { display: none; } } @media screen and (max-width:768px) {} @media screen and (max-width:560px) { .in_nav_tit span { padding: .1rem 0; } .in_nav_tit p { font-size: 0.18rem; } .in_nav_list { padding: .08rem 0; } .in_nav_list a { font-size: 0.15rem; } } .in_nav_all{ display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } /* 当前位置 */ .in_position{padding:14px 0;} .in_position a{display:block; float:left; font-size:14px; color:#fff; position:relative; line-height:20px; text-transform:uppercase} .in_position a:first-child{padding-left:24px; background:url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/home_b.svg) no-repeat left center; background-size:16px} .in_position a:not(:last-child):after{content:">"; margin:0 4px; color:#fff} /* .in_position a:last-child{color:var(--i_color)!important} .in_position a:hover{color:var(--i_color)} */ @media screen and (max-width:1024px){ .in_position{display: none;} } @media screen and (max-width:959px){ .in_position a{font-size:15px} } @media screen and (max-width:767px){ .in_position a{font-size:14px} } @media screen and (max-width:560px){ .in_position a{font-size:12px} } /* ----------------------------speech ------------------------------*/ .speech_all{ box-sizing: border-box; padding: 1rem 0; position: relative; } .speech_area{ box-sizing: border-box; padding-top: 1rem; } .speech_area_text{ display: flex; display: -webkit-flex; flex-wrap: wrap; align-items: center; } .speech_area_img{ width: 5.8rem; position: relative; box-sizing: border-box; padding: 0.42rem 0.5rem 0.5rem 0; } .speech_area_img img{ width: 100%; } /* .speech_area_img::after{ content: ''; width: 80%; height: 84%; border-radius: 0.7rem 0 0.7rem 0; border: 2px dashed var(--i_color); position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1); } */ .speech_area_img::before{ content: ''; width: 80%; height: 84%; border-radius: 0.7rem 0 0.7rem 0; position: absolute; bottom: 0; right: 0; z-index: -1; background: #F2F2F2; transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1); } .speech_area_img:hover::after{ top: 50%; left: 50%; transform: translate(-50%,-50%); } .speech_area_img:hover::before{ bottom: 50%; right: 50%; transform: translate(50%,50%); } .speech_area_p{ width: calc(100% - 5.8rem); box-sizing: border-box; padding-left: 4.5%; display: flex; display: -webkit-flex; flex-direction: column; } .speech_area_p h2{ font-size: 0.38rem; color: #222; box-sizing: border-box; padding-bottom: 0.2rem; border-bottom: 1px solid #D8D8D8; font-weight: 600; } .speech_h3{ font-size: 0.2rem; color: #222; margin: 0.2rem 0 0.4rem 0; } .speech_p_p{ display: flex; display: -webkit-flex; flex-direction: column; gap: 0.4rem 0; margin-top: 0.4rem; } .speech_p{ font-size: 0.18rem; line-height: 0.36rem; color: #616161; } .speech_p span{ font-weight: bold; color: #222; } .speech_area_pp{ margin-top: 0.5rem; display: flex; display: -webkit-flex; flex-direction: column; } .speech_i{ } .speech_i i{ position: absolute; border-radius: 50%; z-index: -2; } .speech_i i:nth-child(1){ top: 31%; left: 42%; width: 2.7rem; height: 2.7rem; background: var(--linear-gradien); opacity: 0.1; } .speech_i i:nth-child(2){ width: 4.5rem; height: 4.5rem; background: var(--linear-gradien); opacity: 0.06; bottom: 7%; right: -13%; } .speech_ul{ margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem 0; } .speech_ul li{ display: flex; align-items: center; } .speech_ul li i{ display: block; width: 0.12rem; height: 0.12rem; background: var(--linear-gradien); border-radius: 50%; margin-right: 0.1rem; } .speech_ul li p{ font-size: 0.2rem; color: #222; } @media screen and (max-width:1600px){ .speech_area_pp{margin-top: 0.4rem;gap: 0.4rem 0;} .speech_all {padding: 0.8rem 0;} .speech_area {padding-top: 0.8rem;} } @media screen and (max-width:1440px){ .speech_p_p {gap: 0.3rem 0;} .speech_area_pp{margin-top: 0.3rem;gap: 0.3rem 0;} .speech_all {padding: 0.6rem 0;} .speech_area {padding-top: 0.6rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .speech_p_p {gap: 0.2rem 0;} .speech_area_pp{margin-top: 0.2rem;gap: 0.2rem 0;} } @media screen and (max-width:1024px){ .speech_area_p {width: 100%;padding-left: 0%;} .speech_area_img { width: 55%; margin: 0 auto; margin-bottom: 40px; } .speech_all {padding: 0.4rem 0;} .speech_area {padding-top: 0.4rem;} .speech_area_p h2{font-size: 0.3rem;} .speech_h3 {font-size: 0.18rem;} .speech_ul{margin-top: 30px;gap: 30px 0;} .speech_ul li p{font-size: 18px;} } @media screen and (max-width:959px){ .speech_area_img {width: 70%;padding: 0.4rem 0.4rem 0.4rem 0;} .speech_p {font-size: 0.16rem;line-height: 0.3rem;} .speech_i i:nth-child(1){display: none;} .speech_area_p h2{font-size: 0.25rem;} } @media screen and (max-width:767px){ .speech_area_img {width: 80%;} .speech_area_p h2{font-size: 0.22rem;} } @media screen and (max-width:560px){ .speech_area_img {width: 90%;padding: 0.3rem 0.3rem 0.3rem 0;} .speech_p {font-size: 14px;line-height: 24px;} .speech_area_p h2{font-size: 0.2rem;} .speech_ul{margin-top: 20px;gap: 20px 0;} } @media screen and (max-width:425px){ .speech_area_img {width: 100%;} } /*------------------------------------- about------------------------------- */ .about_us_bac{ box-sizing: border-box; padding: 1rem 0; } .about_us{ box-sizing: border-box; padding-bottom: 0.6rem; position: relative; z-index: 2; } .about_us_dl{ display: flex; display: -webkit-flex; flex-wrap: wrap; align-items: center; margin-bottom: 1.4rem; } .about_us_dl dt{ } .about_us_dl1{ width: 20%; } .about_us_dl2{ width: 80%; font-size: 0.18rem; color: #616161; line-height: 0.3rem; } .about_us_ul{ display: flex; display: -webkit-flex; position: relative; flex-wrap: wrap; } .about_us_ul li{ width: 20%; display: flex; display: -webkit-flex; flex-direction: column; align-items: center; position: relative; } .about_us_ul li img{ width: 0.6rem; height: 0.6rem; object-fit: contain; transition: all 0.3s ease; } .about_us_ul li:hover img{ transform: rotateY(180deg); } .about_us_ul li:nth-child(2) img{ width: 0.5rem; height: 0.6rem; } .about_us_div{ display: flex; display: -webkit-flex; align-items: flex-end; margin-bottom: 0.1rem; } .about_us_div h2{ font-size: 0.6rem; color: #222; transition: all 0.3s ease; } .about_us_div h3{ font-size: 0.18rem; color: #222; transition: all 0.3s ease; margin-bottom: 0.12rem; } .about_us_ul li h4{ font-size: 0.18rem; color: #616161; } .about_us_i{ display: block; width: 100%; background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/about_i.png') center no-repeat; background-size: cover; height: 0.34rem; } .about_active{ width: 1.7rem; height: 0.67rem; background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/about_i_active.png') center no-repeat; background-size: cover; position: absolute; bottom: -0.9rem; left: 50%; transform: translate(-50%,0); transition: all 0.5s linear; } .about_us_ul li:nth-child(1).active ~ .about_active{ left: 10.5%; } .about_us_ul li:nth-child(2).active ~ .about_active{ left: 30.5%; } .about_us_ul li:nth-child(3).active ~ .about_active{ left: 50.5%; } .about_us_ul li:nth-child(4).active ~ .about_active{ left: 70.5%; } .about_us_ul li:nth-child(5).active ~ .about_active{ left: 90.5%; } .about_us_ul li:hover .about_us_div h2, .about_us_ul li:hover .about_us_div h3{ background: url(//cdn.xuansiwei.com/mingx11998/1759031661010/5509e27c962d401583e1259a6e2f8f17preview.jpeg~tplv-a9rns2rl98-downsize_watermark_1_6_r__384-216_c__0a76fb_.png?x-oss-process=style/png_small); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .about_us_cricle{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .about_us_sss{ width: 100%; height: 100%; } .about_us_sss>div{ position: absolute; border-radius: 50%; background: var(--linear-gradien); z-index: -1; } .cricle_1{ width: 0.2rem; height: 0.2rem; top: 36% !important; left: 4% !important; opacity: 0.5; } .cricle_2{ width: 0.46rem; height: 0.46rem; top: 5% !important; left: 13% !important; } .cricle_quan::after{ content: ''; width: calc(100% - 1px); height: calc(100% - 1px); border-radius: 50%; background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cricle_3{ width: 0.4rem; height: 0.4rem; top: 20% !important; left: 36% !important; opacity: 0.1; } .cricle_4{ width: 0.22rem; height: 0.22rem; top: 11% !important; left: 62% !important; } .cricle_5{ width: 0.16rem; height: 0.16rem; top: 22% !important; left: 87% !important; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ .about_us_div h2 {font-size: 40px;} .about_us_div h3 {font-size: 16px;} .about_us_ul li h4 {font-size: 16px;} .about_us_ul li img {width: 50px;height: 50px;} .about_us_ul li:nth-child(2) img {width: 0.4rem;height: 0.5rem;} .about_us_dl2 {font-size: 16px;} .about_us_dl {margin-bottom: 100px;} .about_us_bac {padding:80px 0;} .about_us {padding-bottom: 50px;} } @media screen and (max-width:959px){ .about_active{display: none;} .about_us_dl {margin-bottom: 80px;} .about_us_div h2 {font-size: 35px;} .about_us_bac {padding:60px 0;} .about_us {padding-bottom: 40px;} } @media screen and (max-width:767px){ .about_us_dl1 {width: 100%;} .about_us_dl2 {width: 100%;font-size: 14px;line-height: 24px;} .about_us_dl {margin-bottom: 60px;} .about_us_ul li:nth-child(4),.about_us_ul li:nth-child(5){width: 50%;margin-top: 20px;} .about_us_ul {justify-content: space-around;} .about_us_ul li img {width: 40px;height: 40px;} .about_us_ul li:nth-child(2) img {width: 0.3rem;height: 0.4rem;} .about_us_div h2 {font-size: 30px;} .about_us_ul li h4 {font-size: 14px;text-align: center;} } @media screen and (max-width:560px){ .about_us_dl {margin-bottom: 40px;} .about_us_bac {padding:40px 0;} .about_us {padding-bottom: 20px;} } @media screen and (max-width:425px){ .about_us_ul li h4 {font-size: 12px;} } /* about_video */ .about_video_bac{ } .about_video_bac h2{ font-size: 0.3rem; box-sizing: border-box; padding: 0 3%; color: #222; text-align: center; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ .about_video_bac h2{font-size: 25px;} } @media screen and (max-width:959px){ .about_video_bac h2{font-size: 22px;} } @media screen and (max-width:767px){ .about_video_bac h2{font-size: 20px;} } @media screen and (max-width:560px){ .about_video_bac h2{font-size: 18px;} } @media screen and (max-width:425px){ .about_video_bac h2{font-size: 16px;} } /* 删除 */ .market {} .market_cont { box-sizing: border-box; padding-top: .8rem; padding-left: 0.2rem; padding-right: 0.2rem; position: relative; overflow: hidden; } .market_cont .img { width: 88.4%; max-width: 1612px; margin-left: auto; margin-right: auto; position: relative; z-index: 2; } .market_cont .img>img { width: 100%; } .market_dian { position: absolute; } .market_dian.d1 { top: 42.5%; left: 14.5%; } .market_dian.d2 { top: 50.5%; left: 33%; } .market_dian.d3 { top: 30.5%; left: 53%; } .market_dian.d4 { top: 12.6%; right: 44.7%; } .market_dian.d5 { top: 18.5%; right: 24%; } .market_dian.d6 { bottom: 25%; right: 21.8%; } .market_dian .round { width: 0.1rem; height: 0.1rem; margin: 0 auto; background: var(--i_color); -webkit-border-radius: 50%; border-radius: 50%; position: relative; } .market_dian .round::before { opacity: 0; content: ''; position: absolute; top: 50%; left: 50%; margin: -130% 0 0 -130%; width: 260%; height: 260%; background: rgb(245 134 32 / 50%); -webkit-border-radius: 50%; border-radius: 50%; -webkit-animation: warn 1.2s ease-out; animation: warn 1.2s ease-out; animation-iteration-count: infinite } @keyframes warn { 0% { transform: scale(0); opacity: 0.5; } 25% { transform: scale(0.15); opacity: 0.7; } 50% { transform: scale(0.33); opacity: 0.8; } 75% { transform: scale(0.66); opacity: 1; } 100% { transform: scale(1); opacity: 0.2; } } .market_dian p { position: absolute; left: 50%; transform: translate(-50%, 0); margin-top: 0.1rem; font-size: 0.18rem; white-space: nowrap; overflow: hidden; } .market_dian.d4 p { left: initial; top: 50%; transform: translate(0, -50%); right: calc(100% + .1rem); margin-top: 0; } .market_dian.d5 p { bottom: calc(100% + .1rem); margin-top: 0; } .market_round { --round_size: .24rem } .market_round { position: absolute; top: .2rem; left: 0; width: 100%; height: 0; padding-bottom: 100%; box-sizing: border-box; border: 1px dashed #D1D1D1; -webkit-border-radius: 50%; border-radius: 50%; animation: round 56s linear infinite; -webkit-animation: round 56s linear infinite; } .market_round i { position: absolute; width: var(--round_size); height: var(--round_size); -webkit-border-radius: 50%; border-radius: 50%; background: var(--linear-gradien); } .market_round i:nth-child(1) { top: calc(-1 * var(--round_size) / 2); left: 50%; transform: translate(-50%, 0); } .market_round i:nth-child(2) { left: 50%; transform: translate(-50%, 0); bottom: calc(-1 * var(--round_size) / 2); } .market_round i:nth-child(3) { top: 50%; transform: translate(0, -50%); left: calc(-1 * var(--round_size) / 2); } .market_round i:nth-child(4) { top: 50%; transform: translate(0, -50%); right: calc(-1 * var(--round_size) / 2); } .market_num { margin-top: -.9rem; display: -webkit-flex; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0 6%; position: relative; z-index: 2; } .market_num dt { flex-shrink: 0; display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: center; position: relative; } .market_num dt::before { content: ''; position: absolute; top: 50%; transform: translate(0, -50%); left: -.24rem; width: 0.1rem; height: 0.1rem; background: var(--linear-gradien); -webkit-border-radius: 50%; border-radius: 50%; } .market_num i { font-size: 0.26rem; font-weight: bold; } .market_num b { font-size: 0.22rem; font-weight: bold; } .market_num p { margin-left: 0.1rem; font-size: 0.18rem; } @media screen and (max-width:1440px) { .market_cont .img { width: 83%; } .market_cont { padding-top: 0.7rem; } .market_num { margin-top: -0.6rem; } } @media screen and (max-width:1366px) { .market_dian p { font-size: 0.17rem; } .market_num { margin-top: -0.4rem; } } @media screen and (max-width:1200px) { .market_cont .img { width: 80%; } .market_num i { font-size: 0.22rem; } .market_num p { font-size: 0.17rem; } } @media screen and (max-width:1024px) { .market_round { --round_size: .16rem } .market_cont { padding-top: 0.6rem; } .market_dian p { font-size: 0.14rem; } .market_num { box-sizing: border-box; padding: 0 5%; margin-top: 0; flex-wrap: wrap; justify-content: initial; gap: .1rem 6%; } .market_num dt { width: 47%; } } @media screen and (max-width:768px) { .market .i_tit { margin-bottom: 0.2rem; } .market_cont { padding-top: 0.4rem; } .market_cont .img { width: 88%; } .market_dian p { display: none; } .market_num { margin-top: 0.4rem; } .market_num i, .market_num b { font-size: 0.18rem; } .market_num p { font-size: 0.16rem; } } @media screen and (max-width:560px) { .market_round { --round_size: 8px } .market_dian .round { width: 0.06rem; height: 0.06rem; } .market_num dt { width: 100%; } .market_num dt::before { width: 0.06rem; height: 0.06rem; } .market_num p { font-size: 0.15rem; } } /* about_advantage */ .about_advantage{ box-sizing: border-box; padding-bottom: 0.6rem; } .text_center{ text-align: center; } .about_advantage_ul{ display: flex; display: -webkit-flex; justify-content: space-between; margin-top: 0.8rem; flex-wrap: wrap; } .about_advantage_ul li{ width: 30%; box-sizing: border-box; padding: 0.2rem 2%; display: flex; display: -webkit-flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); min-height: 4.2rem; position: relative; border-radius: 0.1rem; overflow: hidden; } .about_advantage_ul li::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.07rem; background: var(--linear-gradien); z-index: -1; transition: all 0.5s ease; } .about_advantage_active::after{ height: 100% !important; } .about_advantage_ul li::before{ content: ''; position: absolute; top: 0%; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); } .about_advantage_active::before{ animation: gradient-rectangle 1.4s forwards; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.18, 0.96); } @keyframes gradient-rectangle { 0% { top: 0%; opacity: 1; } 100% { top: 100%; opacity: 0; } } .about_advantage_img{ width: 0.95rem; height: 0.95rem; display: flex; display: -webkit-flex; justify-content: center; align-items: center; border-radius: 50%; position: relative; z-index: 2; } .about_advantage_img::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0%; height: 0%; border-radius: 50%; opacity: 0; background-color: white; transition: all 0.5s ease; z-index: -1; transition-delay: 0.6s; } .about_advantage_img::before{ content: ""; width: 100%; height: 100%; position: absolute; border-radius: 50%; opacity: 1; background-color: white; } .about_advantage_ul li img{ width: 0.8rem; height: 0.8rem; object-fit: contain; position: relative; z-index: 4; } .about_advantage_ul li h2{ font-size: 0.32rem; color: #222; margin-top: 0.2rem; transition: all 0.3s ease; font-weight: 500; } .about_advantage_active h2{ color: white !important; } .about_advantage_ul li p{ font-size: 0.16rem; line-height: 0.26rem; color: white; display: none; margin-top: 0.2rem; } .about_advantage_active p{ display: block !important; } .about_advantage_active .about_advantage_img::before { animation: animateLoader38 2s ease-out infinite 0.6s; } .about_advantage_active .about_advantage_img::after { -webkit-animation: cardAnimacion 1.4s infinite; animation: cardAnimacion 1.4s infinite; box-shadow: 0 0 0 0.8em rgb(255 255 255 / 0%) !important; animation-delay: 0.5s; opacity: 1 !important; width: 1.1rem !important; height: 1.1rem !important; } @keyframes opt{ 0%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes cardAnimacion { 0% { box-shadow: 0 0 0 0 rgb(230, 19, 19); } } @keyframes animateLoader38 { 0% { transform: scale(1); opacity: 1; } 50%, 75% { transform: scale(1.5); } 80%, 100% { opacity: 0; } } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .about_advantage_ul li {width: 32%;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ .about_advantage_ul li img {width: 50px;height: 50px;} .about_advantage_img {width: 70px;height: 70px;} .about_advantage_active .about_advantage_img::after { width: 70px !important; height: 70px !important; } .about_advantage_ul li h2 {font-size: 25px;} .about_advantage_ul li p {font-size: 14px;line-height: 20px;} .about_advantage_ul li { padding: 30px 2%; min-height: unset; } .about_advantage_ul {margin-top: 60px;} .about_advantage {padding-bottom: 40px;} } @media screen and (max-width:959px){ .about_advantage_ul li{width: 100%;margin-bottom: 20px;} .about_advantage_ul {margin-top: 40px;} .about_advantage {padding-bottom: 20px;} } @media screen and (max-width:767px){ .about_advantage_ul {margin-top: 20px;} .about_advantage {padding-bottom: 10px;} } @media screen and (max-width:560px){ .about_advantage {padding-bottom: 0px;} } @media screen and (max-width:425px){ } /* about_business */ .about_business{ } .about_business dt{ box-sizing: border-box; padding: 0.8rem 0; } .about_business_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .about_business_left{ width: 50%; position: relative; } .about_business_left img{ width: 100%; object-fit: contain; } /* 合作伙伴 */ .xxx_partner_box{} .xxx_partner{position:relative} .xxx_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .xxx_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .xxx_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; } .xxx_partner_list .img{width:100%; box-sizing:border-box; position:relative; overflow:hidden} .xxx_partner_list .img:before{content:""; display:block; padding-bottom:68%} .xxx_partner_list .img img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .xxx_partner_list .img img{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} /* 指示器 */ .xxx_partner .pt-pagination{display:none; text-align:center; margin:20px auto 0} .xxx_partner .pt-pagination .swiper-pagination-bullet{width:12px; height:12px; display:inline-block; margin:0 5px; background:#BBB; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .xxx_partner .pt-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} /* 左右箭头 */ .xxx_partner .pt-button-prev, .xxx_partner .pt-button-next{position:absolute; top:50%; transform:translate(0,-50%); width:40px; height:50px; background:rgba(0,0,0,.3); z-index:999; cursor:pointer; outline:none} .xxx_partner .pt-button-prev:before, .xxx_partner .pt-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:#FFF; font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .xxx_partner .pt-button-prev{left:1px} .xxx_partner .pt-button-prev:before{content:"<"} .xxx_partner .pt-button-next{right:1px} .xxx_partner .pt-button-next:before{content:">"} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .xxx_partner .pt-button-prev, .xxx_partner .pt-button-next{display:none} .xxx_partner .pt-pagination{display:block} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .xxx_partner .pt-pagination{margin:14px auto 0} .xxx_partner .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} } .about_business_right{ width: 50%; box-sizing: border-box; padding-left: 3%; display: flex; display: -webkit-flex; flex-direction: column; justify-content: center; } .about_business_right h2{ font-size: 0.18rem; line-height: 0.3rem; color: #616161; box-sizing: border-box; padding-bottom: 0.3rem; position: relative; } .about_business_right h2::after{ content: ''; position: absolute; width: 100%; height: 1px; background: var(--linear-gradien); bottom: 0; left: 0; } .about_business_right h3{ font-size: 0.18rem; line-height: 0.3rem; color: #616161; box-sizing: border-box; padding-bottom: 0.3rem; border-bottom: 1px solid #C8C8C8; } .about_business2 .about_business_ul{ display: flex; display: -webkit-flex; } .about_business2 .about_business_right{ padding-left: 0; padding-right: 3%; } .about_business_bac{ background: linear-gradient(to bottom,#F6F6F6,rgba(255,244,234,0)); } .about_business_right h4{ font-size: 0.18rem; line-height: 0.3rem; color: #616161; } .about_business3{ position: relative; } .about_business3::after{ content: ''; width: 4rem; height: 4rem; border-radius: 50%; background: var(--linear-gradien); position: absolute; right: -9%; top: 47%; opacity: 0.1; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ .about_business_right h2,.about_business_right h3,.about_business_right h4 {font-size: 16px;line-height: 25px;} .about_business_right h2 {padding-bottom: 0.2rem;} .about_business_right h3 {padding-bottom: 0.2rem;} .about_business dt {padding: 0.8rem 0;} } @media screen and (max-width:959px){ .about_business_right h2,.about_business_right h3,.about_business_right h4 {font-size: 14px;line-height: 20px;} .about_business_left {width: 70%;} .about_business_right {width: 100%;padding-left: 0%;margin-top: 20px;} .about_business_ul {justify-content: center;} .about_business2 .about_business_ul {flex-direction: column-reverse;align-items: center;} .about_business dt {padding: 0.6rem 0;} } @media screen and (max-width:767px){ .about_business dt {padding: 0.4rem 0;} .about_business_left {width: 80%;} } @media screen and (max-width:560px){ .about_business_left {width: 100%;} } @media screen and (max-width:425px){ } /* 合作伙伴 */ .hz_partner_box{} .hz_partner{position:relative} .hz_partner_list{width:100%; padding:0.1rem !important;box-sizing: border-box; margin:0 auto; position:relative; overflow:hidden; z-index:1} .hz_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .hz_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; } .hz_partner_list .img{width:100%; box-sizing:border-box;position:relative; overflow:hidden} .hz_partner_list .img:before{content:""; display:block; padding-bottom:50%} .hz_partner_list .img img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:contain} .hz_partner_list .img img{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} /* 指示器 */ /* .hz_partner .pt-pagination{display:none; text-align:center; margin:20px auto 0} .hz_partner .pt-pagination .swiper-pagination-bullet{width:12px; height:12px; display:inline-block; margin:0 5px; background:#BBB; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; outline:none} .hz_partner .pt-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} */ /* 左右箭头 */ /* .hz_partner .pt-button-prev, .hz_partner .pt-button-next{position:absolute; top:50%; transform:translate(0,-50%); width:40px; height:50px; background:rgba(0,0,0,.3); z-index:999; cursor:pointer; outline:none} .hz_partner .pt-button-prev:before, .hz_partner .pt-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:#FFF; font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .hz_partner .pt-button-prev{left:1px} .hz_partner .pt-button-prev:before{content:"<"} .hz_partner .pt-button-next{right:1px} .hz_partner .pt-button-next:before{content:">"} */ @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .hz_partner .pt-button-prev, .hz_partner .pt-button-next{display:none} .hz_partner .pt-pagination{display:block} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ .hz_partner .pt-pagination{margin:14px auto 0} .hz_partner .pt-pagination .swiper-pagination-bullet{width:10px; height:10px} } /* about_last */ .about_last_bac{ background: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,0.08) 58%, #91c8ff 100%); box-sizing: border-box; padding: 1.4rem 0; position: relative; } .about_last{ position: relative; opacity: 1; } .about_last p{ font-size: 0.3rem; line-height: 0.5rem; color: var(--i_color); position: relative; font-weight: 500; } .about_last p::after{ content: ''; width: 0.35rem; height: 0.32rem; background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/dou1.png') center no-repeat; background-size: contain; position: absolute; top: -0.6rem; left: 0%; } .about_last p::before{ content: ''; width: 0.35rem; height: 0.32rem; background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/dou2.png') center no-repeat; background-size: contain; position: absolute; bottom: -0.6rem; right: 0; } .about_last_i{ } .about_last_i i{ display: block; border-radius: 50%; position: absolute; animation: top_bottom 3s ease-in-out infinite; } .about_last_i1{ width: 0.2rem; height: 0.2rem; top: 83%; left: 8%; opacity: 0.4; background: var(--linear-gradien); } .about_last_i2{ width: 0.4rem; height: 0.4rem; top: 57%; left: 40%; opacity: 0.12; background: var(--linear-gradien); animation-delay: 0.3s; } .about_last_i3{ width: 0.22rem; height: 0.22rem; top: 28%; left: 69%; border: 1px solid rgba(69,162,255,1); animation-delay: 0.7s; } .about_last_i4{ width: 0.22rem; height: 0.22rem; top: 14%; left: 95%; opacity: 0.7; border: 1px solid rgba(69,162,255,1); animation-delay: 0.5s; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ .about_last p {font-size: 25px;line-height: 40px;} .about_last p::after,.about_last p::before {width:28px;height: 28px;} } @media screen and (max-width:959px){ .about_last p {font-size: 22px;line-height: 30px;} .about_last p::after,.about_last p::before {width:25px;height: 25px;} } @media screen and (max-width:767px){ .about_last p {font-size: 20px;line-height: 28px;} } @media screen and (max-width:560px){ .about_last p {font-size: 16px;line-height: 24px;} } @media screen and (max-width:425px){ } /* -----------------------------------history-------------------------------------------- */ .history_bac{ position: relative; box-sizing: border-box; padding: 1rem 0 0 0; } .history{ position: relative; } .history_all{ margin-top: 0.7rem; display: flex; display: -webkit-flex; align-items: flex-start; position: relative; } .history_all::after{ content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,0); width: 0.01rem; height: 100%; background-color:#D8D8D8 ; } .history_left_flex{ width: 50%; position: relative; } .history_left{ width: 100%; box-sizing: border-box; padding-bottom: 1.4rem; } .history_left>li{ box-sizing: border-box; position: relative; } .history_left>li::after{ content: ''; position: absolute; top: 0; right: 0; width: 120%; height: 1px; background-color: #D8D8D8; } .history_left>li:nth-child(1)::after{ height: 0; } .history_left>li::before{ content: ''; width: 0.04rem; height: 0%; background: var(--linear-gradien); position: absolute; top: 0; right: 0; transition: all 0.5s ease; } .history_left h2{ font-size: 0.36rem; color: rgba(34,34,34,0.5); font-weight: bold; display: inline-block; } .history_left h3{ font-size: 0.2rem; line-height: 0.3rem; color: #222; margin-top: 0.1rem; display: none; } .history_left .history_left_p{ box-sizing: border-box; padding:0 3% 0.3rem 0; } .history_left_p p{ font-size: 0.14rem; line-height: 0.24rem; color: #616161; margin: 0.15rem 0; } .history_left_p p span{ font-weight: bold; } .history_left_div{ box-sizing: border-box; padding: 0.3rem 3% 0.3rem 0; cursor: pointer; position: relative; } .history_left_div::after{ content: ''; width: 0; height: 100%; background: var(--linear-gradien); opacity: 0.06; position: absolute; top: 0; right: 0; transition: all 0.7s ease 0.3s; } .history_left>.current h2{ color: transparent; background-image: var(--linear-gradien); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .history_left>.current::after{ height: 0; } .history_left>.current::before{ height: 100%; } .history_left>.current .history_left_div::after{ width: 120%; } .history_right{ width: 50%; box-sizing: border-box; padding-bottom: 1.4rem; } .history_right_all{ box-sizing: border-box; padding-left: 15%; } .history_right_all h4{ font-size: 0.36rem; color: #222; } .history_right_all h5::after{ content: ''; position: absolute; width: 0.16rem; height: 0.16rem; border-radius: 50%; background: var(--linear-gradien); left: 0; top: 50%; transform: translate(0,-50%); } .history_right_text{ margin-bottom: 0.2rem; } .history_right_text h5{ font-size: 0.24rem; color: #616161; font-weight: 500; box-sizing: border-box; padding-left: 0.3rem; position: relative; margin: 0.3rem 0 0.2rem 0; } .history_right_ul{ box-sizing: border-box; padding-left: 0.3rem; margin-bottom: 0.3rem; display: flex; display: -webkit-flex; flex-direction: column; align-items: flex-start; } .history_right_ul li{ } .history_right_ul li p{ font-size: 0.16rem; line-height: 0.36rem; color: #616161; display: inline-block; cursor: pointer; } .history_right_img{ position: relative; overflow: hidden; } .history_right_img::after{ content: ''; display: block; padding-bottom: 59%; } .history_right_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: contain; } .history_right_ul .current p{ color: #1382c1; } .history_right_xia{ display: block; margin: 0 auto; width: 0.25rem; height: 0.12rem; background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/xia.png') center no-repeat; background-size: contain; margin-top: 0.6rem; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .history_right_all {padding-left: 10%;} } @media screen and (max-width:1366px){ .history_right_all {padding-left: 8%;} } @media screen and (max-width:1200px){ .history_right_all {padding-left: 6%;} } @media screen and (max-width:1024px){ .history_right_all {padding: 0 3%;} .history_right{display: none;} .history_left_flex {width: 100%;} .history_all::after {left: 100%;} .history_left h2 {font-size: 30px;} .history_left h3 {font-size: 18px;line-height: 26px;} .history_right_all h4 {font-size: 32px;} .history_right_xia { margin: 0 auto; margin-top: 40px; margin-bottom: 40px; } .history_bac {padding: 60px 0 0 0;} .history_all {margin-top: 60px;} } @media screen and (max-width:959px){ .history_left h2 {font-size: 28px;} .history_left h3 {font-size: 16px;line-height: 24px;} .history_right_all h4 {font-size: 30px;} } @media screen and (max-width:767px){ .history_left h2 {font-size: 26px;} .history_left h3 {font-size: 14px;line-height: 20px;} .history_right_all h4 {font-size: 28px;} .history_right_text h5 {font-size: 20px;padding-left: 20px;margin: 20px 0 10px 0;} .history_right_ul {padding-left: 20px;margin-bottom: 20px;} .history_right_xia { margin: 0 auto; margin-top: 20px; margin-bottom: 20px; } .history_bac {padding: 40px 0 0 0;} .history_all {margin-top: 40px;} } @media screen and (max-width:560px){ .history_left h2 {font-size: 22px;} .history_right_all h4 {font-size: 26px;} .history_all {margin-top: 20px;} } @media screen and (max-width:425px){ } .honor_bac{ box-sizing: border-box; padding: 1rem 0; } .title_center{ } .honor_list{ display: flex; display: -webkit-flex; justify-content: center; margin: 0.4rem 0 0.9rem 0; } .honor_list li{ font-size: 0.18rem; width: 1.74rem; height: 0.5rem; border-radius: 0.3rem; display: flex; display: -webkit-flex; justify-content: center; align-items: center; margin: 0 0.2rem; border: 1px solid #C8C8C8; transition: all 0.3s ease; background: transparent; cursor: pointer; } .honor_list li:hover{ color: white; background: var(--linear-gradien); border: 1px solid white; } .honor_list .current{ color: white; background: var(--linear-gradien); border: 1px solid white; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .honor_bac {padding: 0.8rem 0;} .honor_list {margin: 0.4rem 0 0.8rem 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .honor_bac {padding: 0.6rem 0;} .honor_list {margin: 0.4rem 0 0.6rem 0;} } @media screen and (max-width:1024px){ .honor_list li {font-size: 16px;width: 150px;height: 45px;} .honor_bac {padding: 50px 0;} .honor_list {margin: 30px 0 50px 0;} } @media screen and (max-width:959px){ .honor_list li {font-size: 14px;width: 120px;height: 40px;margin: 0 15px;} .honor_list {margin: 30px 0 40px 0;} } @media screen and (max-width:767px){ .honor_list li {font-size: 13px;width: 100px;height: 35px;margin: 0 10px;} .honor_bac {padding: 40px 0;} .honor_list {margin: 30px 0;} } @media screen and (max-width:560px){ .honor_list li {font-size: 12px;width: 80px;margin: 0 5px;} } @media screen and (max-width:425px){ .honor_list li {margin: 0 3px;} } /* 证书1 */ .x_partner_box{} .x_partner{position:relative} .x_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .x_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .x_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; flex-direction: column; } .x_partner_list .img{width:100%; box-sizing:border-box;border-radius: 0.1rem; border:1px solid #EAEAEA; position:relative; overflow:hidden;background:linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,0.05) 58%, #91c8ff 0.05) ;} .x_partner_list .img:before{content:""; display:block; padding-bottom:140%} .x_partner_list .img img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% - 0.3rem); height:calc(100% - 0.4rem); object-fit:contain} .x_partner_list .img img{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} .x_partner_list .swiper-slide p{ font-size: 0.18rem; color: #616161; text-align: center; box-sizing: border-box; padding: 0.2rem 2% 0 2%; } /* 指示器 */ .x_partner .pt-pagination{display:block; text-align:center; margin:0.7rem auto 0} .x_partner .pt-pagination .swiper-pagination-bullet{width:0.8rem; height:1px; display:inline-block; margin:0 5px; background:#BBB;outline:none} .x_partner .pt-pagination .swiper-pagination-bullet-active{position:relative; background:var(--i_color)} /* 左右箭头 */ .x_partner .pt-button-prev, .x_partner .pt-button-next{position:absolute; top:37%; transform:translate(0,-50%); width:40px; height:50px; background:rgba(0,0,0,.3); z-index:999; cursor:pointer; outline:none} .x_partner .pt-button-prev:before, .x_partner .pt-button-next:before{ position:absolute; top:50%; left:50%; font-size:30px; line-height:30px; color:#FFF; font-family:-apple-system, simsun, system-ui, sans-serif; letter-spacing:-2px; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .x_partner .pt-button-prev{left:-3%} .x_partner .pt-button-prev:before{content:"<"} .x_partner .pt-button-next{right:-3%} .x_partner .pt-button-next:before{content:">"} @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .x_partner .pt-button-prev, .x_partner .pt-button-next{display:none} .x_partner .pt-pagination{display:block} } @media screen and (max-width:1024px){ .x_partner .pt-pagination .swiper-pagination-bullet{width:60px;} .x_partner_list .swiper-slide p {font-size: 16px;} .x_partner .pt-pagination{margin:60px auto 0} } @media screen and (max-width:959px){ .x_partner .pt-pagination .swiper-pagination-bullet{width:50px;} .x_partner_list .swiper-slide p {font-size: 14px;} .x_partner .pt-pagination{margin:50px auto 0} } @media screen and (max-width:767px){ .x_partner .pt-pagination .swiper-pagination-bullet{width:40px;} .x_partner .pt-pagination{margin:40px auto 0} } @media screen and (max-width:560px){ .x_partner .pt-pagination .swiper-pagination-bullet{width:20px;} } /* company */ .company_us{ box-sizing: border-box; padding: 1rem 0; } .company_us_ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; margin-top: 0.7rem; overflow: hidden; border-radius: 0.8rem 0 0 0; } .company_us_ul li{ width: 50%; } .company_us_left{ position: relative; overflow: hidden; } .company_us_left::after{ content: ''; display: block; padding-bottom: 75%; } .company_us_left img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .company_us_right{ background-color:#F3F3F3; box-sizing: border-box; padding: 0.8rem 4.5% 0.4rem 4.5%; } .company_title{ } .company_title p{ font-size: 0.38rem; color: #222; font-weight: 500; display: inline-block; box-sizing: border-box; padding-bottom: 0.1rem; position: relative; } .company_title p::after{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); width: 0.5rem; height: 0.03rem; background: var(--linear-gradien); } .company_us_text{ margin-top: 0.6rem; } .company_us_text h2{ margin-top: 0.2rem; font-size: 0.18rem; line-height: 0.3rem; color: #616161; } .company_us_dl{ } .company_us_dl dt{ display: flex; display: -webkit-flex; align-items: flex-start; } .company_us_dl i{ display: block; width: 0.12rem; min-width: 0.12rem; height: 0.12rem; border-radius: 50%; background: var(--linear-gradien); margin-right: 0.12rem; margin-top: 0.1rem; } .company_us_dl h2{ margin-top: 0; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .company_us_text {margin-top: 0.4rem;} .company_us_right {padding: 0.6rem 4% 0.4rem 4%;} } @media screen and (max-width:1366px){ .company_title p {font-size: 0.35rem;} .company_us_right {padding: 0.4rem 3%;} } @media screen and (max-width:1200px){ .company_us_text h2 {margin-top: 0.1rem;font-size: 0.16rem;line-height: 0.25rem;} .company_us_dl i {margin-top: 0.17rem;} } @media screen and (max-width:1024px){ .company_title p {font-size: 30px;} .company_us_text h2 {font-size: 14px;line-height: 24px;} .company_us_dl i {margin-top: 18px;} .company_us_text {margin-top: 20px;} } @media screen and (max-width:959px){ .company_us_ul li {width: 100%;} .company_us_left::after {padding-bottom: 30%;} .company_title p {font-size: 28px;} } @media screen and (max-width:767px){ .company_title p {font-size: 26px;} .company_us_left::after {padding-bottom: 40%;} } @media screen and (max-width:560px){ .company_title p {font-size: 24px;} .company_us_left::after {padding-bottom: 50%;} } @media screen and (max-width:425px){ .company_us_left::after {padding-bottom: 60%;} } /* value */ .value{ background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/flay.jpg') center no-repeat; background-size: cover; background-attachment: fixed; height: 7.6rem; margin-bottom: 1rem; } .value{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .value li{ width: calc(100% / 3); box-sizing: border-box; display: flex; display: -webkit-flex; justify-content: center; align-items: center; height: 100%; flex-direction: column; transition: all 0.3s ease; overflow: hidden; position: relative; } .company_title_center{ text-align: center; display: block; transition: all 0.3s ease; } .value_h2{ font-size: 0.2rem; color: #616161; margin: 0.2rem 0 0.5rem 0; text-align: center; } .value_dl{ height: 3.75rem; overflow: auto; box-sizing: border-box; padding: 0 2% 0rem 0; } /*滚动条*/ .value_dl::-webkit-scrollbar { width: 2px; height: 8px } .value_dl::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: var(--linear-gradien) } .value_dl::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } .value_dl dt{ } .value_dl dt h3{ font-size: 0.2rem; color: #222; text-align: center; margin-bottom: 0.1rem; font-weight: 500; } .value_dl dt h4{ font-size: 0.16rem; color: #616161; text-align: center; margin-bottom: 0.3rem; } .value_pos{ padding: 0.4rem 6%; box-sizing: border-box; height: 100%; background:linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,0.08) 58%, #91c8ff 100%) ; display: flex; display: -webkit-flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 100%; transition: all 0.7s ease; } .company_title_value{ transition: all 0.3s ease; opacity: 1; } .value_active .value_pos{ top: 0; } .value_active .company_title_value{ opacity: 0; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .value {height: 7rem;} .value_dl dt h4 {margin-bottom: 0.2rem;} .value {margin-bottom: 0.8rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .value {height: 6.5rem;} .value {margin-bottom: 0.6rem;} } @media screen and (max-width:1024px){ .value_dl dt h3 {font-size: 16px;} .value_dl dt h4 {font-size: 14px;margin-bottom: 10px;} } @media screen and (max-width:959px){ .value li{width: 100%;height: calc(100% / 3);} .value_dl{display: none;} .value_pos{width: 100%;} .value_h2 {font-size: 14px;margin: 20px 0 0rem 0;} .value {height: 6rem;} .value {margin-bottom: 40px;} } @media screen and (max-width:767px){ .value {height: 5.5rem;} } @media screen and (max-width:560px){ .value {height: 5rem;} } @media screen and (max-width:425px){ } /* core */ .core{ margin-bottom: 1rem; display: flex; display: -webkit-flex; flex-wrap: wrap; } .core>div{ width: 50%; } .core_left{ background: linear-gradient(to right,rgba(243,243,243,0.5),rgba(225,225,225,0)); box-sizing: border-box; padding: 2rem 5%; } .core_left h2{ font-size: 0.24rem; color: #222; font-weight: 500; margin: 0.2rem 0 0.4rem 0; } .core_left h3{ font-size: 0.18rem; line-height: 0.3rem; color: #616161; } .core_right{ display: flex; display: -webkit-flex; align-items: center; justify-content: center; } .core_right_cricle{ width: 6.1rem; height: 6.1rem; border-radius: 50%; background: radial-gradient(circle, rgba(63,94,251,0) 0%, rgba(255,241,229,1) 100%); position: relative; animation: yuan 15s linear infinite; } .core_right_cricle::after{ content: ''; position: absolute; top: -0.075rem; left: 50%; transform: translate(-50%,0); width: 0.15rem; height: 0.15rem; border-radius: 50%; background: var(--linear-gradien); z-index: -1; } .core_right_cricle::before{ content: ''; width: 5rem; height: 5rem; border-radius: 50%; border: 1px dashed rgba(245,134,32,0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } @keyframes yuan { 0%{ transform: rotate(0); } 100%{ transform: rotate(360deg); } } @keyframes _yuan { 0%{ transform:translate(-50%,-50%) rotate(0); } 100%{ transform:translate(-50%,-50%) rotate(-360deg); } } .core_right_cricle .core_right_area{ animation: _yuan 15s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .core_right_area img{ width: 2.65rem; height: 2.65rem; object-fit: contain; } .core_right_area p{ color: #1382c1; font-size: 0.25rem; line-height: 0.4rem; text-align: center; margin-top: -20px; } .core_right_ul{ animation: _yuan 15s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; } .core_right_ul li{ position: absolute; border-radius: 50%; background-color: #1382c1; z-index: 8; color: white; font-weight: 700; display: flex; display: -webkit-flex; justify-content: center; align-items: center; text-align: center; line-height: 0.24rem; transition: all 0.3s ease; width: 1.2rem; height: 1.2rem; font-size: 0.2rem; } .core_right_ul li:hover{ background: var(--linear-gradien); } .core_right_ul li::after{ content: ''; width: 100%; height: 100%; position: absolute; background: transparent; z-index: -1; border-radius: 50%; } .core_right_ul li:hover::after{ background: var(--linear-gradien2); animation: sunshines 2s infinite; } .core_right_lia::after{ background: var(--linear-gradien2) !important; animation: sunshines 2s infinite; } .core_right_li1{ top: 19%; left: 3%; animation: bounceIn-infinite2 4s linear infinite; } .core_right_li2{ top: 59%; left: 7%; animation: bounceIn-infinite2 3s linear infinite; } .core_right_li3{ top: 79%; left: 60%; animation: bounceIn-infinite2 5s linear infinite; } .core_right_li4{ top: 40%; left: 81%; animation: bounceIn-infinite2 5.5s linear infinite; } .core_right_li5{ top: 7%; left: 62%; animation: bounceIn-infinite2 4s linear infinite; } @keyframes bounceIn-infinite2{ 0% { transform: translate(0, 0); } 20% { transform: translate(0, 12px); } 50% { transform: translate(0, 0); } 70% { transform: translate(0, -12px); } 100% { transform: translate(0, 0); } } @keyframes sunshines { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .core{margin-bottom: 0.8rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .core{margin-bottom: 0.6rem;} } @media screen and (max-width:1024px){ .core>div {width: 100%;} .core {flex-direction: column-reverse;} .core_right_cricle {width: 5rem;height: 5rem;} .core_right_cricle::before {width: 4rem;height: 4rem;} .core_right_ul li {width: 1rem;height: 1rem;font-size: 0.16rem;} .core_left {padding: 60px 5%;margin-top: 40px;} .core_left h2 {font-size: 0.2rem;margin: 0.2rem 0;} .core_left h3 {font-size: 0.16rem;line-height: 0.25rem;} .core_right_area img {width: 2rem;height: 2rem;} .core_right_area p {font-size: 0.2rem;line-height: 0.3rem;margin-top: -10px;} .core_right_cricle .core_right_area{display: flex;display: -webkit-flex;flex-direction: column;justify-content: center;align-items: center;} } @media screen and (max-width:959px){ .core_right_area img {width: 1.8rem;height: 1.8rem;} .core_right_area p {font-size: 0.18rem;line-height: 0.28rem;margin-top:0px;} } @media screen and (max-width:767px){ .core_left {padding: 40px 5%;margin-top: 20px;} .core_left h2 {font-size: 0.18rem;margin: 0.1rem 0;} .core_left h3 {font-size: 0.14rem;line-height: 0.22rem;} .core_right_area img {width: 1.5rem;height: 1.5rem;} .core{margin-bottom: 0.4rem;} .core_right_ul li {width: 0.8rem;height: 0.8rem;font-size: 0.14rem;} } @media screen and (max-width:560px){ .core_right_area img {width: 1rem;height: 1rem;} .core_right_cricle {width: 4rem;height: 4rem;} .core_right_cricle::before {width: 3rem;height: 3rem;} } @media screen and (max-width:425px){ .core_right_area img {width: 0.8rem;height: 0.8rem;} .core_right_area p {font-size: 14px;line-height: 22px;} .core_right_cricle {width: 3rem;height: 3rem;} .core_right_cricle::before {width: 2rem;height: 2rem;} .core_right_ul li {width: 0.65rem;height: 0.65rem;font-size: 0.12rem;} } /* cultural */ .cultural{ box-sizing: border-box; padding-bottom: 1rem; display: flex; display: -webkit-flex; flex-wrap: wrap; } .cultural>div{ width: 50%; } .cultural_right{ background: linear-gradient(to left,rgba(243,243,243,0.5),rgba(225,225,225,0)); box-sizing: border-box; padding: 2rem 5%; } .cultural_ul{ margin-top: 0.4rem; } .cultural_ul li{ display: flex; display: -webkit-flex; } .cultural_ul i{ display: block; min-width: 0.12rem; width: 0.12rem; height: 0.12rem; border-radius: 50%; background: var(--linear-gradien); margin-top: 0.11rem; } .cultural_ul h2{ font-size: 0.18rem; color: #616161; line-height: 0.3rem; box-sizing: border-box; padding-left: 0.12rem; } .cultural_left{ display: flex; display: -webkit-flex; justify-content: center; align-items: center; } .cultural_img{ position: relative; } .cultural_img img{ width: 5rem; height: 5rem; position: relative; object-fit: contain; } .cultural_left_ul{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .cultural_left_ul li{ } .cultural_left_ul1{ } .cultural_left_ul2{ width: 1.24rem; height: 1.24rem; border-radius: 50%; background: linear-gradient(to top, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); display: flex; display: -webkit-flex; justify-content: center; align-items: center; color: white; font-size: 0.2rem; position: absolute; top: 53%; left: -4%; transform: translate(0,-50%); } .cultural_left_ul2::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: linear-gradient(to top, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); animation: sunshiness 2s infinite; border-radius: 50%; } .cultural_left_ul3{ width: 1.24rem; height: 1.24rem; border-radius: 50%; background: linear-gradient(to top, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); display: flex; display: -webkit-flex; justify-content: center; align-items: center; color: white; font-size: 0.2rem; position: absolute; top: 53%; right: -4%; transform: translate(0,-50%); } .cultural_left_ul3::after{ content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: linear-gradient(to top, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); animation: sunshiness 2s infinite; border-radius: 50%; } @keyframes sunshiness { 0% { transform:translate(-50%,-50%) scale(1); opacity: 0.6; } 100% { transform:translate(-50%,-50%) scale(1.4); opacity: 0; } } .cultural_left_ul1{ color: #1382c1; font-size: 0.2rem; position: absolute; top: 52%; left: 50%; transform: translate(-50%,-50%); } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .cultural {padding-bottom:0.8rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .cultural {padding-bottom:0.6rem;} } @media screen and (max-width:1024px){ .cultural>div {width: 100%;} .cultural_right {padding: 60px 5%;margin-top: 40px;} } @media screen and (max-width:959px){ .cultural_img img{width: 4rem;height: 4rem;} .cultural_left_ul2,.cultural_left_ul3 {width: 1rem;height: 1rem;font-size: 18px;} .cultural_left_ul1 {font-size: 18px;} } @media screen and (max-width:767px){ .cultural_left_ul1 {font-size: 16px;} .cultural_img img{width: 3.5rem;height: 3.5rem;} .cultural_left_ul2,.cultural_left_ul3 {width: 0.8rem;height: 0.8rem;font-size: 16px;} } @media screen and (max-width:560px){ .cultural_img img{width: 3rem;height: 3rem;} .cultural_left_ul2,.cultural_left_ul3 {width: 0.6rem;height: 0.6rem;font-size: 14px;} } @media screen and (max-width:425px){ } /* news_top */ .news_top_all{ background-color: #F7F7F7; box-sizing: border-box; padding: 1rem 0; } .news_top{ } /* 置顶新闻 */ .newsTop_partner_box{ margin-top: 0.7rem; } .newsTop_partner{position:relative} .newsTop_partner_list{width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; z-index:1} .newsTop_partner_list .swiper-wrapper{display:flex; position:relative; width:100%; z-index:1} .newsTop_partner_list .swiper-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-shrink:0; position:relative; cursor:pointer; } .newsTop_partner_list .swiper-slide a{ display: block; width: 100%; display: flex; display: -webkit-flex; flex-wrap: wrap; } .newsTop_partner_list .img{width:50%; box-sizing:border-box; position:relative;border-radius: 0.5rem 0 0.5rem 0; overflow:hidden} .newsTop_partner_list .img:before{content:""; display:block; padding-bottom:52%} .newsTop_partner_list .img img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover} .newsTop_partner_list .swiper-slide:hover .news_top_text h2{ color: transparent; background-image: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .newsTop_partner_list .img img{-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease} .news_top_text{ width: 50%; box-sizing: border-box; padding-left: 4.7%; } .news_top_text h2{ font-size: 0.26rem; color: #222; font-weight: bold; margin: 0.3rem 0 0.2rem 0; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .news_top_text h3{ font-size: 0.2rem; color: #222; font-weight: bold; } .news_top_text h4{ font-size: 0.18rem; line-height: 0.25rem; color: #616161; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; height: 1rem; margin-top: 0.6rem; } /* 指示器 */ .newsTop_partner .pt-pagination{ display:block; text-align:center; position: absolute; bottom: 0; left: 54.7%; z-index: 9; } .newsTop_partner .pt-pagination .swiper-pagination-bullet{width:0.8rem; height:2px; display:inline-block; margin:0 5px; background:#BBB;} .newsTop_partner .pt-pagination .swiper-pagination-bullet-active{position:relative; background:var(--linear-gradien)} @media screen and (max-width:1440px){ .news_top_text h4 {margin-top: 0.4rem;} .news_top_text h2 {font-size: 0.24rem;margin: 0.2rem 0;} .news_top_all {padding: 0.8rem 0;} .newsTop_partner_box {margin-top: 0.6rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .news_top_text h4 {margin-top: 0.2rem;} .news_top_text h2 {margin: 0.1rem 0;} .newsTop_partner .pt-pagination .swiper-pagination-bullet {width: 0.6rem;} .news_top_all {padding: 0.6rem 0;} .newsTop_partner_box {margin-top: 0.5rem;} } @media screen and (max-width:1024px){ .news_top_text h2 {font-size: 20px;} .news_top_text h3 {font-size: 16px;} .news_top_text h4 {font-size: 14px;line-height: 20px;-webkit-line-clamp: 3;height: 60px;} .newsTop_partner .pt-pagination .swiper-pagination-bullet {width: 40px;} .newsTop_partner_box {margin-top: 50px;} } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ .newsTop_partner_list .img {width: 100%;} .news_top_text {width: 100%;padding-left: 0%;margin-top: 20px;} .newsTop_partner .pt-pagination {bottom: -40px;left: 50%;transform: translate(-50%,0);} .newsTop_partner_box {margin-top: 40px;} } @media screen and (max-width:560px){ } /* News_list */ .News_list_all{ box-sizing: border-box; padding: 1rem 0; } .News_list{ display: flex; display: -webkit-flex; gap: 0 0.8rem; box-sizing: border-box; padding-bottom: 0.2rem; border-bottom: 1px solid rgba(51, 51, 51, 0.1); } .News_list li{ } .News_list li a{ font-size: 0.28rem; color: #333; box-sizing: border-box; padding-bottom: 0.2rem; position: relative; font-weight: 500; transition: all 0.3s ease; } .News_list li a::after{ content: ''; position: absolute; bottom: 0; right: 0; width: 0%; height: 2px; background: var(--linear-gradien); transition: all 0.3s ease; } .News_list_active a::after{ right: auto !important; left: 0 !important; width: 100% !important; } .News_list li:hover a::after{ right: auto; left: 0; width: 100%; } .News_list li:hover a{ color: #1382c1; } .News_list_active a{ color: #1382c1 !important; } /* .News_list_all i{ display: block; margin: 0 auto; width: 0.25rem; height: 0.12rem; background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/xia.png') center no-repeat; background-size: contain; margin-top: 0.6rem; } */ @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .News_list_all {padding: 0.8rem 0;} /* .News_list_all i {margin-top: 0.4rem;} */ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .News_list_all {padding: 0.6rem 0;} } @media screen and (max-width:1024px){ /* .News_list_all i {margin-top: 20px;} */ .News_list li a {font-size: 20px;padding-bottom: 10px;} .News_list {gap: 0 60px;padding-bottom: 10px;} } @media screen and (max-width:959px){ .News_list {gap: 0 40px;} .News_list li a {font-size: 18px;} } @media screen and (max-width:767px){ .News_list_all {padding: 40px 0;} } @media screen and (max-width:560px){ .News_list {gap: 0 30px;} .News_list li a {font-size: 16px;} } @media screen and (max-width:425px){ } /* news_huanan */ .news_huanan{ display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; } .news_huanan li{ width: 100%; } .news_huanan1{ display: none; } .news_huanan li:nth-child(1),.news_huanan li:nth-child(2){ width: 47%; } .news_huanan li:nth-child(1) .news_huanan1,.news_huanan li:nth-child(2) .news_huanan1{ display: block; } .news_huanan li:nth-child(1) .news_huanan2,.news_huanan li:nth-child(2) .news_huanan2{ display: none; } .news_huanan li a{ display: block; width: 100%; } .news_huanan_img{ position: relative; overflow: hidden; } .news_huanan_img::after{ content: ''; display: block; padding-bottom: 38.5%; } .news_huanan_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; } .news_huanan_img p{ font-size: 0.14rem; color: white; font-weight: 500; box-sizing: border-box; padding: 0.09rem 0.4rem; border-radius: 0.8rem 0 0 0; background: var(--linear-gradien); position: absolute; bottom: -0.4rem; right: 0; transition: all 0.3s ease; } .news_huanan_text{ box-sizing: border-box; padding-bottom: 0.6rem; position: relative; border-bottom: 1px solid rgba(0, 0, 0, .1); } .news_huanan_text::after{ content: ''; position: absolute; bottom: 0; right: 0; width: 0%; height: 2px; background: var(--linear-gradien); transition: all 0.5s ease; } .news_huanan_text h2{ font-size: 0.24rem; color: #222; font-weight: 500; margin: 0.4rem 0 0.2rem 0; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; } .news_huanan_text h3{ font-size: 0.16rem; color: #616161; line-height: 0.24rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 0.48rem; } .news_huanan li:hover .news_huanan_text::after{ right: auto; left: 0; width: 100%; } .news_huanan li:hover .news_huanan_img p{ bottom: 0; } .news_huanan_txt{ } .news_huanan_txts{ box-sizing: border-box; padding: 0.5rem 0; display: flex; display: -webkit-flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, .1); position: relative; } .news_huanan_txts::after{ content: ''; position: absolute; bottom: -0.01rem; right: 0; width: 0%; height: 0.02rem; background: var(--linear-gradien); transition: all 1s ease; } .news_huanan_txts i{ display: block; width: 0.12rem; height: 0.12rem; border-radius: 50%; background: var(--linear-gradien); } .news_huanan_txts h4{ font-size: 0.24rem; width: calc(100% - 1.12rem); color: #222; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; padding: 0 0.2rem; } .news_huanan_txts h5{ font-size: 0.2rem; color: #999999; font-weight: 500; } .news_huanan li:hover .news_huanan_txts::after{ right: auto; left: 0; width: 100%; } .news_huanan li:hover .news_huanan_txts h4,.news_huanan li:hover .news_huanan_text h2{ color: transparent; background-image: linear-gradient(267deg, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .news_huanan li:nth-child(1), .news_huanan li:nth-child(2) {width: 48%;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ .news_huanan_text h2 {font-size: 20px;margin: 20px 0;} .news_huanan_text h3 {font-size: 14px;line-height: 20px;height: 40px;} .news_huanan_text {padding-bottom: 40px;} .news_huanan_txts {padding: 40px 0;} .news_huanan_txts h4 {font-size: 20px;} .news_huanan_txts h5 {font-size: 18px;} } @media screen and (max-width:959px){ .news_huanan_txts {padding: 30px 0;} .news_huanan_txts h4 {font-size: 18px;padding: 0 15px;} .news_huanan_txts h5 {font-size: 16px;} .news_huanan_text h2 {font-size: 18px;margin: 15px 0;} } @media screen and (max-width:767px){ .news_huanan_text {padding-bottom: 30px;} .news_huanan_txts {padding: 20px 0;} .news_huanan_txts h4 {font-size: 16px;padding: 0 10px;} .news_huanan_txts h5 {font-size: 14px;} .news_huanan_text h2 {font-size: 16px;margin: 10px 0;} } @media screen and (max-width:560px){ .news_huanan_text {padding-bottom: 20px;} .news_huanan_txts h4 {font-size: 14px;padding: 0 0px;} .news_huanan_text h2 {font-size: 14px;} } @media screen and (max-width:425px){ } /* 页数 */ /* Number of pages */ .in_page_box { text-align: center; overflow: hidden; margin: 0.7rem 0; } .in_page { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .in_page li { margin: 0 .04rem; } .in_page a, .in_page span { display: block; padding: 0 .17rem; line-height: .4rem; font-size: .14rem; color: #666; background: #FFF; border: 1px solid var(--border_color); overflow: hidden; transition: background 0.3s ease; border-radius: 0.4rem; } .in_page li{ margin:0 0.04rem; } .in_page>i { margin-left: 0.1rem; font-size: 0rem; color: #888; } .in_page a:hover, .in_page .active_page a, .in_page .active_page span { border-color:var(--i_color2) !important; background: var(--linear-gradien); color: #FFF !important } @media screen and (max-width:1024px) { .in_page a, .in_page span { padding: 0 0.15rem; line-height: 0.35rem; font-size: 0.14rem; border-radius: 0.3rem; } .in_page_box {margin: 60px 0;} } @media screen and (max-width:767px) { .in_page>i { display: block; width: 100%; margin-top: 0.1rem; font-size: 0rem; } .in_page_box {margin: 40px 0;} } @media screen and (max-width:560px){ } .Banner_top{ margin-top: var(--header_height); } /* Article */ .in_news_artBac{ background-color: #F7F7F7; padding: 0.6rem 0; } .in_news_art { box-sizing: border-box; padding: 0.6rem 2%; background-color: #fff; } .in_news_art_tit { border-bottom: 1px solid #DDD; margin-bottom: .3rem; text-align: center; position: relative; } .in_news_art_tit h1 { margin-left: auto; margin-right: auto; font-size: .34rem; font-weight: bold; } .n_tit_time { margin: .4rem 0 .26rem; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .n_tit_time>p { font-size: 0.16rem; color: #363636; margin-right: 0.28rem; padding-right: 0.28rem; position: relative; } .n_tit_time>p::before { content: ''; position: absolute; top: 50%; transform: translate(0, -50%); right: 0; width: 1px; height: 0.1rem; background: #AAA; } .n_share { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; } .n_share p { font-size: 0.16rem; color: #363636; } .n_share a { margin-left: 0.2rem; } .n_share a i { font-size: 0.2rem; } .n_share a:hover i { color: var(--i_color); } .n_article, .n_article * { text-align: left; font-size: .16rem; color: #555; line-height: .24rem } .n_article img { display: block; margin: .2rem auto; max-width: 100% !important; /* max-height: 75vh !important; */ height: initial !important } @media screen and (max-width:1440px) { .in_news_art_tit h1 { font-size: 0.28rem; } .n_tit_time { margin: 0.3rem 0 .26rem; } } @media screen and (max-width:1200px) { .in_news_art_tit h1 { font-size: 0.24rem; } } @media screen and (max-width:1024px) { .in_news_art_tit h1 { font-size: 0.22rem; } .n_tit_time { margin: 0.2rem 0 .22rem; } } @media screen and (max-width:768px) { .in_news_art_tit h1 { font-size: 0.18rem; } .n_tit_time>p, .n_share p { font-size: 0.15rem; } } @media screen and (max-width:560px) { .in_news_art_tit h1 { font-size: 0.17rem; } .n_tit_time>p { margin-right: 0.14rem; padding-right: 0.14rem; } .n_tit_time>p, .n_share p { font-size: 0.14rem; } .n_share a i { font-size: 0.18rem; } .in_news_artBac{ padding: 0.4rem 0; } .in_news_art { padding: 0.4rem 2%; } } .n_navigation { margin-top: 0.4rem; padding-top: 0.2rem; border-top: 1px solid var(--border_color); display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; } .n_navigation ul { width: 100%; } .n_navigation li { margin: .12rem 0; } .n_navigation li a { display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: baseline; } .n_navigation li p { margin-right: 0.06rem; font-size: 0.16rem; color: #363636; font-weight: bold; } .n_navigation li a:hover p { color: var(--i_color); } .n_back { padding: .12rem .3rem; background: var(--i_color); -webkit-border-radius: .3rem; border-radius: .3rem; } .n_back i { font-size: 0.16rem; color: #FFF; } .n_back b { margin-left: 0.06rem; font-size: 0.15rem; color: #FFF; font-weight: bold; } .n_back_back{ margin-top: 0.4rem; display: flex; display: -webkit-flex; justify-content: center; } @media screen and (max-width:1024px) { .n_navigation ul { width: 100%; } .n_back b { font-size: 0.14rem; } } @media screen and (max-width:768px) { .n_navigation { margin-top: 0.2rem; } .n_navigation ul { width: 100%; } .n_navigation li p { font-size: 0.15rem; } .n_back { margin: .14rem 0 0 0; } } @media screen and (max-width:560px) { .n_navigation li p { font-size: 0.14rem; } .n_back { padding: .08rem .22rem; margin: .1rem 0 0 0; } .n_back i { font-size: 0.15rem; } } /* ------------------products------------- */ .products{ box-sizing: border-box; padding: 1rem 0; } .products_ul{ margin-top: 0.4rem; } .products_ul li{ display: flex; display: -webkit-flex; } .products_ul_img{ width: 50%; position: relative; overflow: hidden; } .products_ul_img::after{ content: ''; display: block; padding-bottom: 62.5%; } .products_ul_img img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: contain; } .products_ul_txt{ width: 50%; box-sizing: border-box; padding: .8rem 1rem; } .products_ul_txt img{ width: 1.1rem; height: 1.1rem; object-fit: contain; } .products_ul_txt h2{ font-size: 0.34rem; color: #222; font-weight: bold; margin: 0.4rem 0 0.2rem 0; } .products_dl{ box-sizing: border-box; padding-left: 2%; position: relative; } .products_dl::after{ content: ''; width: 0.04rem; height: 100%; background-image:linear-gradient(to bottom, #1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%) ; background-size: 100% 200%; position: absolute; top: 0; left: 0; animation: maskedAnimation 5s linear infinite; background-origin: border-box; } @keyframes maskedAnimation{ 0% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } } .products_dl dt{ } .products_dl dt a{ display: block; display: flex; display: -webkit-flex; align-items: center; box-sizing: border-box; padding: 0.1rem 0; border-bottom: 1px dashed #D8D8D8; position: relative; } .products_dl dt a::after{ content: ''; position: absolute; right: 0; bottom: -1px; width: 0; height: 2px; background: var(--linear-gradien); transition: all 0.5s ease; } .products_dl dt:hover a::after{ width: 100%; right: auto; left: 0; } .products_dl dt a p{ width: calc(100% - 0.25rem); font-size: 0.22rem; color: #616161; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; transition: all 0.3s ease; } .products_dl dt a p:hover{ color: var(--i_color); } .products_dl1 i{ display: block; width: 0.25rem; height: 0.25rem; background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/link.png') center no-repeat; background-size: 0.16rem; } .products_dl2 i{ display: block; width: 0.25rem; height: 0.25rem; background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/right.png') center no-repeat; } .products_ul_tag ion-icon{ display: none; } .products_ul li:nth-child(even){ display: flex; display: -webkit-flex; flex-direction: row-reverse; } .products_ul li:nth-child(2) .products_dl{ display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; } .products_ul li:nth-child(2) .products_dl dt{ width: 49%; } @media screen and (max-width:1600px){ .products_ul_txt {padding: 0.6rem 0.8rem;} } @media screen and (max-width:1440px){ .products_ul_txt {padding: 0.4rem 0.6rem;} .products_ul_txt h2 {font-size: 0.3rem;margin: 0.3rem 0 0.2rem 0;} .products_dl dt a p {font-size: 0.2rem;} .products_ul_txt img {width: 1rem;height: 1rem;} .products {padding: 0.8rem 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .products_ul_txt {padding: 0.4rem;} .products_ul_txt h2 {font-size: 0.25rem;margin: 0.2rem 0;} .products_dl dt a p {font-size: 0.18rem;} .products_ul_txt img {width: 0.8rem;height: 0.8rem;} .products {padding: 0.6rem 0;} } @media screen and (max-width:1024px){ .products_ul_txt img {width: 60px;height: 60px;} .products_ul_txt h2 {font-size: 20px;margin: 10px 0;} .products_dl dt a p {font-size: 14px;} .products_dl {padding-left: 4%;} .products_ul_txt {padding: 20px;} } @media screen and (max-width:959px){ .products_dl dt a p { font-size: 13px; } } @media screen and (max-width:767px){ .products_ul_img{display: none;} .products_ul_txt{width: 100%;} .products_ul_tag{ display: flex; display: -webkit-flex; justify-content: flex-start; align-items: center; box-sizing: border-box; padding: 10px 20px; background-color: #f5f5f5; border-radius: 30px; } .products_ul_txt h2{box-sizing: border-box;padding: 0 2%;} .products_ul_txt img {width: 50px;height: 50px;} .products_ul_txt h2 {font-size: 18px;} .products_ul_tag ion-icon{ display: block; font-size: 18px; color: #222; margin-left: auto; } .products_ul_txt {padding: 10px;} } @media screen and (max-width:560px){ .products_ul_txt img {width: 40px;height: 40px;} .products_ul_txt h2 {font-size: 16px;} .products_ul_tag ion-icon {font-size: 16px;} .products_ul li:nth-child(2) .products_dl dt {width: 100%;} .products_ul {margin-top: 20px;} } @media screen and (max-width:425px){ .products_ul_txt h2 { font-size: 14px; } } /* import */ .import_all{ box-sizing: border-box; padding: 1rem 0; background:linear-gradient(135deg, #1a5fb4 0%, rgba(69,162,255,0.03) 58%, #91c8ff 0.03) ; } .import{ } .import_area{ background-color: white; margin-top: 0.7rem; display: flex; display: -webkit-flex; flex-wrap: wrap; box-sizing: border-box; padding: 0.8rem; border-radius: 0.8rem 0 0 0; box-shadow: 0 0 10px #FDECE6; align-items: flex-end; } .import_ul{ width: calc(100% - 3rem); display: flex; display: -webkit-flex; flex-direction: column; gap: 0.5rem 0; } .import_ul li{ display: flex; display: -webkit-flex; } .import_area img{ display: block; width: 3rem; height: 3rem; } .import_cricle{ width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--linear-gradien); font-size: 0.24rem; color: white; font-weight: bold; display: flex; display: -webkit-flex; justify-content: center; align-items: center; margin-top: 0.02rem; } .import_text{ box-sizing: border-box; padding-left: 0.2rem; width: calc(100% - 0.45rem); } .import_text h2{ font-size: 0.3rem; color: #222; font-weight: bold; margin-bottom: 0.2rem; } .import_text h3{ color: #666666; font-size: 0.22rem; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .import_all {padding: 0.8rem 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .import_all {padding: 0.6rem 0;} } @media screen and (max-width:1024px){ .import_area img{width: 200px;height: 200px;} .import_area {margin-top: 60px;padding: 60px;border-radius: 60px 0 0 0;} .import_ul {width: calc(100% - 200px);gap: 40px 0;} .import_text h2 {font-size: 22px;margin-bottom: 10px;} .import_text h3 {font-size: 18px;} .import_cricle {width: 40px;height: 40px;font-size: 20px;margin-top: 0rem;} } @media screen and (max-width:959px){ .import_area img{width: 100px;height: 100px;} .import_ul {width: calc(100% - 100px);gap: 30px 0;} .import_text h2 {font-size: 20px;} .import_text h3 {font-size: 16px;} } @media screen and (max-width:767px){ .import_area img{display: none;} .import_ul {width: 100%;gap: 20px 0;} .import_cricle {width: 30px;height: 30px;font-size: 14px;} .import_area {margin-top: 40px;padding: 40px;border-radius: 40px 0 0 0;} } @media screen and (max-width:560px){ .import_area {padding: 20px;} .import_text h3 {font-size: 14px;} } @media screen and (max-width:425px){ } /* @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ } @media screen and (max-width:959px){ } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } */ /* --------------------------contact_us-------------------- */ .contact_us{ box-sizing: border-box; padding: 1rem 0 0 0; } .contact_us_ul{ box-sizing: border-box; padding: 0.7rem 0 0.4rem 0; border-bottom: 1px solid rgba(51, 51, 51, .1); display: flex; display: -webkit-flex; justify-content: space-between; margin-bottom: 0.4rem; flex-wrap: wrap; } .contact_us_ul li{ display: flex; display: -webkit-flex; align-items: center; } .contact_us_ul li img{ display: block; width: 0.8rem; height: 0.8rem; object-fit: contain; } .contact_us_ul li:hover img{ transform: translate(); } .contact_us_text{ margin-left: 0.15rem; } .contact_us_text h2{ font-size: 0.2rem; color: #2C2C2C; font-weight: bold; } .contact_us_text a{ font-size: 0.2rem; color: #2C2C2C; transition: all 0.3s ease; } .contact_us_text a:hover{ color: var(--i_color); } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .contact_us_ul li img {width: 0.6rem;height: 0.6rem;} .contact_us_text a,.contact_us_text h2 {font-size: 0.18rem;} .contact_us {padding: 0.8rem 0 0 0;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .contact_us {padding: 0.6rem 0 0 0;} } @media screen and (max-width:1024px){ .contact_us_text a, .contact_us_text h2 {font-size: 14px;} .contact_us_ul li img {width: 50px;height: 50px;} .contact_us_ul {padding: 40px 0 20px 0;margin-bottom: 20px;} } @media screen and (max-width:959px){ .contact_us_ul li{width: 50%;} .contact_us_ul{gap: 20px 0;} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ .contact_us_ul li{width: 100%;} } /* contact_map */ .contact_map_bac{ background: var(--linear-gradien); box-sizing: border-box; padding: 0.05rem; border-radius: 0.08rem; } .contact_map{ height: 5.2rem; } .department{ box-sizing: border-box; padding: 1rem 0; } .department_h2{ font-size: 0.48rem; font-weight: bold; text-align: center; color: #333333; } .department_ul{ margin-top: 0.8rem; display: flex; display: -webkit-flex; gap: 0.2rem; flex-wrap: wrap; } .department ul li{ width: calc((100% - 0.6rem) / 4); position: relative; overflow: hidden; background-color: #F7F7F7; box-sizing: border-box; transition: all 0.3s ease; max-height: 1.99rem; } .department ul li::after{ content: ''; position: absolute; top:100%; left: 0; width: 100%; height: 100%; background: var(--linear-gradien); z-index: 3; transition: all 0.7s ease; } .department ul li:hover::after{ top: 0; } .department ul li:hover .department_text h3,.department ul li:hover .department_text h4,.department ul li:hover .department_text h5{ position: relative; z-index: 4; color: white; border-bottom: 1px solid rgba(51,51,51,0); } .department ul li .department_text h3::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: white; } .department ul li:hover .department_text h3::after{ animation: dd 0.7s linear forwards 0.2s; } @keyframes dd { 0%{ width: 0%; } 100%{ width: 100%; } } .department ul li a{ display:block; width: 100%; box-sizing: border-box; padding: 0.4rem 1.07rem 0.3rem 0.3rem; } .department_text{ } .department_text h3{ font-size: 0.24rem; color: #333; font-weight: bold; box-sizing: border-box; padding-bottom: 0.2rem; border-bottom: 1px solid rgba(51,51,51,0.1); } .department_text h4{ font-size: 0.2rem; color: #333; box-sizing: border-box; padding-top: 0.2rem; position: relative; z-index: 3; } .department_text h5{ font-size: 0.2rem; color: #333; margin-top: 0.05rem; } .department_img{ width: 1.1rem; height: 1.1rem; border-radius: 50%; position: absolute; bottom: -0.2rem; right: -0.2rem; background: #F6EBE1; transition: all 1s linear; z-index: 0; } .department_img img{ width: 0.5rem; height: 0.5rem; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1); transition: all 1s linear; } .department ul li:hover{ border-radius: 0.3rem 0 0 0; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .department_ul {margin-top: 0.6rem;} .department_h2 {font-size: 0.4rem;} .department {padding: 0.8rem 0;} .department_text h4,.department_text h5 {font-size: 0.18rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .department_h2 {font-size: 0.35rem;} .department {padding: 0.6rem 0;} } @media screen and (max-width:1024px){ .department_ul {margin-top: 0.4rem;gap: 20px;} .department ul li {width: calc((100% - 40px) / 3);} .department_img {width: 80px;height: 80px;} .department ul li a{padding: 30px 80px 20px 20px;} .department_text h4 {font-size: 14px;padding-top: 10px;} .department_text h5 {font-size: 14px;} .department_text h3 {font-size: 18px;padding-bottom: 10px;} .department_h2 {font-size: 30px;} .department_img img {width: 40px;height: 40px;} } @media screen and (max-width:959px){ .department_h2 {font-size: 28px;} } @media screen and (max-width:767px){ .department_h2 {font-size: 26px;} .department ul li {width: calc((100% - 20px) / 2);} } @media screen and (max-width:560px){ .department_img {width: 60px;height: 60px;} .department ul li a{padding: 20px 60px 20px 20px;} .department_img img {width: 30px;height: 30px;} .department_img {bottom: -10px;right: -10px;} .department ul li {width: 100%;} } @media screen and (max-width:425px){ } /* contact_from */ .contact_from_all{ background: url('//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/contact_from.webp') center no-repeat; background-size: cover; box-sizing: border-box; padding: 0.4rem 0 0.7rem 0; } .contact_from_title{ } .contact_from_title h2{ font-size: 0.48rem; color: #333; font-weight: bold; text-align: center; margin-bottom: 0.1rem; } .contact_from_title h3{ font-size: 0.18rem; line-height: 0.3rem; color: #333; text-align: center; } .contact_from_from{ margin-top: 0.4rem; } @media screen and (max-width:1600px){ } @media screen and (max-width:1440px){ .contact_from_title h2{font-size: 0.4rem;} .contact_from_title h3{font-size: 0.16rem;line-height: 0.26rem;} } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .contact_from_title h2{font-size: 0.35rem;} } @media screen and (max-width:1024px){ .contact_from_title h2{font-size: 30px;} .contact_from_title h3{font-size: 14px;line-height: 24px;} } @media screen and (max-width:959px){ .contact_from_title h2{font-size: 28px;} } @media screen and (max-width:767px){ .contact_from_title h2{font-size: 26px;} } @media screen and (max-width:560px){ } @media screen and (max-width:425px){ } #wpforms-519 { --input_font_size: 14px; --input_height: .52rem } #wpforms-form-519{ width: 100%; margin-left: auto; margin-right: auto; position: relative; overflow: hidden } #wpforms-519 input, #wpforms-519 button { margin: 0; padding: 0; border: none; background: none } #wpforms-519 .wpforms-field { padding: 0; margin: 0 } #wpforms-519 .wpforms-field-label { font-size: 0; } #wpforms-519 .wpforms-required-label { position: absolute; top: .17rem; left: .1rem; font-size: .16rem; color: #F00 } #wpforms-519 .wpforms-field { width: 100%; background: transparent; padding-bottom: .26rem; position: relative; overflow: hidden } #wpforms-519 .wpforms-field-container input, #wpforms-519 textarea { width: 100%; max-width: 100% !important; min-width: 100%; font-size: var(--input_font_size); color: #333; height: var(--input_height); box-sizing: border-box; border: 1px solid var(--border_color); background: #FFF; padding: 0 .24rem; overflow: hidden; -webkit-transition: all .5s ease; transition: all .5s ease } #wpforms-519 input { line-height: var(--input_height) } #wpforms-519 textarea { line-height: .22rem; min-height: 1.8rem; padding: .06rem .24rem } #wpforms-519 .wpforms-field-container input:hover, #wpforms-519 .wpforms-field-container textarea:hover { border-color: var(--i_color2); } #wpforms-519-field_1-container input { -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; } #wpforms-519-field_1-container, #wpforms-519-field_2-container { width: 49% !important; } #wpforms-519-field_3-container, #wpforms-519-field_4-container { width: 49% !important; } #wpforms-519 input::-webkit-input-placeholder, #wpforms-519 textarea::-webkit-input-placeholder { color: rgb(0 0 0 / 40%); font-size: var(--input_font_size) } #wpforms-519 input::-moz-placeholder, #wpforms-519 textarea::-moz-placeholder { color: rgb(0 0 0 / 40%); font-size: var(--input_font_size) } #wpforms-519 input::-ms-input-placeholder, #wpforms-519 textarea::-ms-input-placeholder { color: rgb(0 0 0 / 40%); font-size: var(--input_font_size) } #wpforms-519-field_1-error, #wpforms-519-field_2-error, #wpforms-519-field_3-error, #wpforms-519-field_4-error, #wpforms-519-field_5-error, #wpforms-519-field_6-error { position: absolute; font-size: 12px; color: #A90909; } #wpforms-519 .wpforms-field-container { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden } #wpforms-519 .wpforms-submit-container { width: 4rem; margin-left: auto; margin-right: auto; text-align: center; padding: 0; -webkit-border-radius: .3rem 0 0 0; border-radius: .3rem 0 0 0; overflow: hidden; position: relative; } #wpforms-519 .wpforms-submit-container::before { content: ''; position: absolute; top: 50%; left: -80%; width: 0.5rem; height: 1.4rem; background: rgb(255 255 255 / 30%); -webkit-transform: translate(0, -50%) rotate(130deg); transform: translate(0, -50%) rotate(130deg); -webkit-transition: all .8s ease; transition: all .8s ease } #wpforms-519 .wpforms-submit-container button { width: 100%; height: .5rem; font-size: .16rem; color: #FFF; line-height: .5rem; background: var(--linear-gradien); background: var(--linear-gradien2); cursor: pointer; } #wpforms-519 .wpforms-submit-container:hover::before { left: 150%; } #wpforms-519 .wpforms-submit-container img { position: absolute; top: 50%; transform: translate(0, -50%); right: 4px; z-index: 2 } @media screen and (max-width:1440px) {} @media screen and (max-width:1366px) {} @media screen and (max-width:1200px) {} @media screen and (max-width:1024px) { #wpforms-519 { --input_height: .46rem } #wpforms-519 .wpforms-submit-container { width: 3rem; } #wpforms-519 .wpforms-submit-container button { height: 0.46rem; line-height: 0.46rem; font-size: 0.15rem; } } @media screen and (max-width:768px) { #wpforms-519 .wpforms-field { padding-bottom: 0.2rem; } } @media screen and (max-width:560px) { #wpforms-519 .wpforms-field { width: 100% !important } #wpforms-519 .wpforms-submit-container { width: 2.1rem; -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; } #wpforms-519 .wpforms-submit-container button { height: 0.42rem; line-height: 0.42rem; font-size: 0.15rem; } } /* ---------------------solution -------------------------*/ .in_solutions {} .in_solutions_flex{ display: flex; display: -webkit-flex; flex-wrap: wrap; } .sol_cont { --horizontal-menu-num: 4; --horizontal-menu-margin: 1%; --horizontal-menu-width: calc((100% - (var(--horizontal-menu-margin) * (var(--horizontal-menu-num) - 1))) / 4); --item_num: 7; --item_height: .9rem; --item_margin: .1rem; --item_box_height: calc(var(--item_num) * var(--item_height) + (var(--item_num) - 1) * var(--item_margin)); } .sol_cont { display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: flex-end; } .sol_aside { flex-shrink: 0; width: .8rem; height: var(--item_box_height); background: -webkit-linear-gradient(top, var(--i_color2), var(--i_color)); background: linear-gradient(to bottom, var(--i_color2), var(--i_color)); -webkit-clip-path: polygon(50% 0%, 100% 6%, 100% 100%, 0 100%, 0% 6%); clip-path: polygon(50% 0%, 100% 6%, 100% 100%, 0 100%, 0% 6%); overflow: hidden; } .sol_aside li:nth-child(1) { height: 15%; } .sol_aside li:nth-child(2) { height: 27.5%; } .sol_aside li:nth-child(3) { height: 57.5%; } .sol_aside li { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; } .sol_aside li:not(:last-child)::before, .sol_aside li:not(:last-child)::after { content: ''; position: absolute; bottom: .1rem; width: 70%; height: 2px; background: #FFF; } .sol_aside li:not(:last-child)::before { left: -14%; -webkit-transform: rotate(-34deg); transform: rotate(-34deg); } .sol_aside li:not(:last-child)::after { right: -14%; -webkit-transform: rotate(34deg); transform: rotate(34deg); } .sol_aside p { text-align: center; font-size: .15rem; color: #FFF; } .sol_table_box { margin-left: .3rem; width: 100%; display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: flex-end; } .sol_table_box .vertical_menu { flex-shrink: 0; width: 12%; display: -webkit-flex; display: flex; flex-wrap: wrap; } .sol_table_box .vertical_menu dt { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center } .sol_table_box .vertical_menu dt p { padding: 0 .1rem; text-align: center; font-size: 0.16rem; font-weight: bold; } .sol_table { margin-left: .2rem; width: 100%; position: relative; } .sol_table .horizontal-menu { margin-bottom: 0.2rem; display: -webkit-flex; display: flex; flex-wrap: nowrap; justify-content: space-between; } .sol_table .horizontal-menu dt { width: var(--horizontal-menu-width); text-align: center; position: relative; overflow: hidden; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease } .sol_table .horizontal-menu dt::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--i_color3); } .sol_table .horizontal-menu p { padding: .12rem 0; font-size: 0.18rem; color: var(--i_color3); position: relative; } .sol_table .horizontal-menu dt.curr { background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; } .sol_table .horizontal-menu dt.curr::before { border-color: transparent; } .sol_table .horizontal-menu dt.curr p { color: #FFF; } .sol_table_t { height: var(--item_box_height); display: -webkit-flex; display: flex; flex-wrap: nowrap; position: relative; } .sol_table_t dt { position: absolute; top: 0; width: var(--horizontal-menu-width); height: 100%; -webkit-transition: all .7s ease; transition: all .7s ease } .sol_table_t dt:nth-child(1) { left: 0; } .sol_table_t dt:nth-child(2) { left: calc(1 * var(--horizontal-menu-width) + var(--horizontal-menu-margin)); } .sol_table_t dt:nth-child(3) { left: calc(2 * var(--horizontal-menu-width) + var(--horizontal-menu-margin) * 2); } .sol_table_t dt:nth-child(4) { left: calc(3 * var(--horizontal-menu-width) + var(--horizontal-menu-margin) * 3); } .sol_table_t ul { display: -webkit-flex; display: flex; flex-wrap: wrap; } .sol_table_t li { width: 100%; box-sizing: border-box; padding: 0 .14rem; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; } .sol_table_t li::-webkit-scrollbar { width: 2px; } .sol_table_t li::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #333 } .sol_table_t li::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } .sol_table_t li p { font-size: 0.14rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .sol_table_bottom_t { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--item_height); -webkit-border-radius: .3rem 0 0 0; border-radius: .3rem 0 0 0; background: var(--linear-gradien); background: var(--linear-gradien2); display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; z-index: 3; } .sol_table_bottom_t p { padding: 0 .3rem; font-size: 0.15rem; color: #FFF; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; text-align: center; width: 100%; } .sol_table_box .vertical_menu, .sol_table_t ul { gap: var(--item_margin) 0; } .sol_table_box .vertical_menu dt, .sol_table_t li { height: var(--item_height); } .sol_table_box .vertical_menu dt:nth-child(1), .sol_table_t li:nth-child(1) { background: rgb(255 221 109 / 20%); } .sol_table_box .vertical_menu dt:nth-child(2), .sol_table_t li:nth-child(2) { background: rgb(253 203 94 / 20%); } .sol_table_box .vertical_menu dt:nth-child(3), .sol_table_t li:nth-child(3) { background: rgb(248 155 56 / 20%); } .sol_table_box .vertical_menu dt:nth-child(4), .sol_table_t li:nth-child(4) { background: rgb(243 104 33 / 20%); } .sol_table_box .vertical_menu dt:nth-child(5), .sol_table_t li:nth-child(5) { background: rgb(240 70 34 / 20%); } .sol_table_box .vertical_menu dt:nth-child(6), .sol_table_t li:nth-child(6) { background: rgb(239 50 34 / 20%); } .sol_table_box .vertical_menu dt:nth-child(7) { background: rgb(238 36 35 / 20%); } .sol_table_t:hover dt { opacity: 0; } .sol_table_t dt:hover { left: 0; width: 100%; opacity: 1; z-index: 2; } .sol_table_t dt:hover li { justify-content: center; } .sol_table_t dt:hover p { text-align: center; } .sol_table_t dt:hover p br { display: none; } .sol_table_t ul li { opacity: .3; } .sol_table_t dt.curr li, .sol_table_t ul:hover li { opacity: 1; } @media screen and (max-width:1440px) { .sol_table .horizontal-menu p { font-size: 0.17rem; } } @media screen and (max-width:1366px) { .sol_aside p { font-size: 0.14rem; } .sol_table_box .vertical_menu dt p { font-size: 0.15rem; } .sol_table_bottom_t p { font-size: 0.14rem; } } @media screen and (max-width:1200px) {} /* Solutions --- Mobile Style */ .mb_sol_cont, .last_item, .mb_sol_aside { display: none; } @media screen and (max-width:1024px) { .sol_cont { display: none; } .mb_sol_cont, .last_item, .mb_sol_aside { display: block; } } @media screen and (max-width:1024px) { .mb_sol_cont { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: flex-end; } .mb_vertical_menu { display: -webkit-flex; display: flex; flex-wrap: wrap; flex-shrink: 0; width: 24%; } .mb_vertical_menu dt { padding: 0 .1rem; } .mb_vertical_menu p { text-align: center; font-size: .14rem; font-weight: bold; } .mb_sol_table { margin-left: auto; width: 74%; position: relative; } .mb_sol_list { width: 100%; position: relative; overflow: hidden } .mb_sol_list .swiper-wrapper { display: -webkit-flex; display: flex; position: relative; width: 100% } .mb_sol_list .swiper-slide { flex-shrink: 0; position: relative } .mb_horizontal-menu { margin-bottom: 0.1rem; width: 100%; background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; } .mb_horizontal-menu p { text-align: center; padding: .1rem 0; font-size: 0.16rem; color: #FFF; } .mb_table_t_list { display: -webkit-flex; display: flex; flex-wrap: wrap; } .mb_vertical_menu, .mb_table_t_list { gap: .08rem 0; } .mb_vertical_menu dt, .mb_table_t_list dt { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; width: 100%; height: .9rem; } .mb_vertical_menu dt { justify-content: center; } .mb_table_t_list dt { padding: 0 .3rem; } .mb_vertical_menu dt:nth-child(1), .mb_table_t_list dt:nth-child(1) { background: rgb(255 221 109 / 20%); } .mb_vertical_menu dt:nth-child(2), .mb_table_t_list dt:nth-child(2) { background: rgb(253 203 94 / 20%); } .mb_vertical_menu dt:nth-child(3), .mb_table_t_list dt:nth-child(3) { background: rgb(248 155 56 / 20%); } .mb_vertical_menu dt:nth-child(4), .mb_table_t_list dt:nth-child(4) { background: rgb(243 104 33 / 20%); } .mb_vertical_menu dt:nth-child(5), .mb_table_t_list dt:nth-child(5) { background: rgb(240 70 34 / 20%); } .mb_vertical_menu dt:nth-child(6), .mb_table_t_list dt:nth-child(6) { background: rgb(239 50 34 / 20%); } .mb_vertical_menu dt:nth-child(7) { background: rgb(238 36 35 / 20%); } .mb_table_t_list dt p { font-size: 0.14rem; } .mb_table_t_list dt p br { display: none; } .mb_sol-prev, .mb_sol-next { position: absolute; top: 51%; z-index: 3; cursor: pointer; outline: none; -webkit-user-select: none; user-select: none } .mb_sol-prev.swiper-button-disabled, .mb_sol-next.swiper-button-disabled { display: none; } .mb_sol-prev { left: 10px; } .mb_sol-next { right: 10px; } .mb_sol-prev i, .mb_sol-next i { font-size: 0.4rem; color: var(--i_color3); } .mb_sol-prev.shake, .mb_sol-next.shake { -webkit-animation: move_lr 1s infinite linear; animation: move_lr 1s infinite linear } @keyframes move_lr { 0% { transform: translateX(0); } 50% { transform: translateX(10px); } 100% { transform: translateX(0); } } .last_item { margin-top: 0.08rem; display: -webkit-flex; display: flex; flex-wrap: wrap; } .mb_vertical_menu_last { width: 24%; background: rgb(238 36 35 / 20%); display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .mb_vertical_menu_last p { padding: 0 .1rem; text-align: center; font-size: 0.14rem; font-weight: bold; } .mb_table_t_list_last { margin-left: auto; width: 74%; background: var(--linear-gradien); background: var(--linear-gradien2); display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; } .mb_table_t_list_last p { padding: .1rem .3rem; font-size: 0.14rem; color: #FFF; } .mb_sol_aside { margin-top: 0.2rem; -webkit-border-radius: .1rem; border-radius: .1rem; overflow: hidden; } .mb_sol_aside ul { padding: .1rem 0; display: -webkit-flex; display: flex; flex-wrap: nowrap; background: var(--linear-gradien); background: var(--linear-gradien2); } .mb_sol_aside li { text-align: center; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .mb_sol_aside li:nth-child(1) { width: 20%; } .mb_sol_aside li:nth-child(2) { width: 30%; } .mb_sol_aside li:nth-child(3) { width: 50%; } .mb_sol_aside p { text-align: center; color: #FFF; } } @media screen and (max-width:768px) { .mb_vertical_menu p, .mb_vertical_menu_last p { font-size: 0.13rem; } .mb_table_t_list dt, .mb_table_t_list_last p { padding-left: 0.2rem; padding-right: 0.2rem; } .mb_table_t_list dt p, .mb_table_t_list_last p { font-size: 0.13rem; } } @media screen and (max-width:560px) { .mb_horizontal-menu p { font-size: 0.15rem } .mb_vertical_menu dt, .mb_table_t_list dt { height: 0.8rem; } .mb_sol-prev, .mb_sol-next { top: 52%; } .mb_sol-prev i, .mb_sol-next i { font-size: 0.26rem; } } /* -------------------------------------- 侧边客服 -------------------------------------- */ .aside_right{position:fixed; right:-50px; bottom:20%; z-index:999999;transition: all 0.5s ease;} .aside_right.on{ right:10px; } .aside_right ul{} .aside_right li{position:relative; cursor:pointer;} .aside_right li>a{display:block;transition: all 0.3s ease; width:48px;margin-top: 5px;border-radius: 0.05rem; height:48px; background: #222;display:flex; justify-content:center; align-items:center; z-index:3} .aside_right em{display:block; margin:0 auto; width:20px; height:20px;} .aside_right li:nth-child(1) em{background:url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/aside_ico_whatsapp.svg) no-repeat center; background-size:contain} .aside_right li:nth-child(2) em{background:url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/aside_ico_tel.svg) no-repeat center; background-size:contain} .aside_right li:nth-child(3) em{background:url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/email.svg) no-repeat center; background-size:contain} .aside_right li:nth-child(4) em{background:url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/top1.svg) no-repeat center; background-size:contain} .aside_right li>a:hover{background:var(--i_color);} .side_tel_box, .side_qr_box{position:absolute; box-shadow:-1px 2px 6px rgba(0,0,0,.2); display:flex; justify-content:center; align-items:center; z-index:-1} .side_tel_box{top:7px; right:-300px; width:180px; background:#FFF} .side_qr_box{top:50%; transform:translate(0,-50%); right:-180px; width:120px; height:120px; background:#FFF} .side_tel_box h6{padding:8px 0; font-size:14px; color:#666} .side_tel_box h6 a{line-height:20px;color: #222;} .side_tel_box a:hover{color:var(--i_color)} .side_qr_box img{width:90%; height:90%} .aside_right li:hover .side_tel_box, .aside_right li:hover .side_qr_box{right:48px} .side_tel_box, .side_qr_box{-webkit-transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease} /* 侧边客服 表单 */ #aside_mask_bg{display:none; position:fixed; top:0%; left:0%; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:9999999999998} #aside_sc_from{display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; padding:0.6rem 0.4rem;border-radius: 0.2rem; background:#e2e2e2; z-index:9999999999999; overflow:auto} #aside_sc_from .tit{margin-bottom:40px} #aside_sc_from .tit h1{font-size:26px; color:#333; text-align: center;text-transform: uppercase; font-weight:bold; line-height:30px} #wpforms-515{--input_font_size:16px; --input_height:42px} #wpforms-515{width:100%; margin:0 auto; padding:0} #wpforms-form-515{width:100%; overflow:hidden} #wpforms-515 input, #wpforms-515 button{margin:0; padding:0; border:none; background:none} #wpforms-515 .wpforms-field{padding:0; margin:0} #wpforms-515 .wpforms-error-container{line-height:16px} #wpforms-515 .wpforms-field-container{width:100%; display:-webkit-flex; display:flex; flex-wrap:wrap; overflow:hidden} #wpforms-515 .wpforms-submit-container{padding:0!important; width:170px; height:var(--input_height); background:var(--linear-gradien);border-radius: 0.2rem; position:relative;margin:0 auto;overflow: hidden;} #wpforms-515 .wpforms-field{ position: relative; } #wpforms-515 .wpforms-field-label{ font-size: 0; } #wpforms-515 .wpforms-field-label span{ position: absolute; top: 15px; left: 3px; font-size: 0.14rem; color: red; } #wpforms-515 .wpforms-field{width:100%; margin-bottom:10px; padding-bottom:20px; background:transparent; overflow:hidden} #wpforms-515 .wpforms-field:nth-child(1){margin-right:20px} #wpforms-515 .wpforms-field:nth-child(1), #wpforms-515 .wpforms-field:nth-child(2){width:calc(50% - 10px)} #wpforms-515 input{height:var(--input_height)} #wpforms-515 textarea{min-height:100px} #wpforms-515 input, #wpforms-515 textarea{width:100%;border: 0; max-width:100%!important; font-size:var(--input_font_size);border-radius: 0.1rem;background-color: white; color:#222; box-sizing:border-box; line-height:var(--input_height); padding:0 10px} #wpforms-515 input::-webkit-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-515 input::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-515 input::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-515 input::-ms-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-515 textarea::-webkit-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-515 textarea::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-515 textarea::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-515 textarea::-ms-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-515 #wpforms-515-field_1-error, #wpforms-515 #wpforms-515-field_2-error, #wpforms-515 #wpforms-515-field_3-error, #wpforms-515 #wpforms-515-field_4-error{position:absolute; font-size:14px} #wpforms-515 .wpforms-submit-container button{overflow: hidden;border-radius: 0.2rem; width:100%; height:var(--input_height); font-size:16px; color:#FFF; line-height:var(--input_height); cursor:pointer; text-transform:uppercase; position:relative; z-index:2} #wpforms-515 .wpforms-submit-container img{position:absolute; top:50%; transform:translate(0,-50%); right:4px} .close{position:absolute; top:20px; right:30px; display:block; width:50px; height:50px; background:url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/close_1_hei.svg) no-repeat center; background-size:contain} .close:hover{-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg)} .close{-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease} #wpforms-515 .wpforms-submit-container:hover::before { left: 150%; } #wpforms-515 .wpforms-submit-container::before { content: ''; position: absolute; top: 50%; left: -80%; width: 0.5rem; height: 1.4rem; background: rgb(255 255 255 / 30%); -webkit-transform: translate(0, -50%) rotate(130deg); transform: translate(0, -50%) rotate(130deg); -webkit-transition: all .8s ease; transition: all .8s ease; } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ .aside_right a{width:42px; height:42px} .aside_right em{width:18px; height:18px} } @media screen and (max-width:959px){ /* .aside_right{display:none} */ #aside_sc_from {width: 80%;} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ #aside_sc_from {width: 87%;} } /* 移动端底部 */ .footer_phone_show{ display: none; } .footer_phone{ position: fixed; bottom: 0; left: 0; width: 100%; background-color: white; z-index: 999; } .footer_phone{ width: 100%; display: flex; display: -webkit-flex; flex-direction: row; } .footer_phone li{ width: 32%; padding: 13px; border-right: 1px solid rgba(211,211,211,1); border-top: 1px solid rgba(211,211,211,1); } .footer_phone li:nth-child(3){ border-right: 0px; } .footer_phone a{ display: block; width: 100%; display: flex; display: -webkit-flex; justify-content: center; } .footer_phone ion-icon { font-size: 23px; color: #222; } .footer_phone p{ font-size: 12px; color: #333333; font-family: Arial; line-height: 23px; margin-left: 10px; } @media screen and (max-width:959px){ .footer_phone_show{display: block;} footer{margin-bottom: 50px;} } /* 产品详情 表单 */ #aside_mask_bg1{display:none; position:fixed; top:0%; left:0%; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:9999999999998} #aside_sc_from1{display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; padding:0.6rem 0.4rem;border-radius: 0.2rem; background:#e2e2e2; z-index:9999999999999; overflow:auto} #aside_sc_from1 .tit{margin-bottom:40px} #aside_sc_from1 .tit h1{font-size:26px; color:#333; text-align: center;text-transform: uppercase; font-weight:bold; line-height:30px} #wpforms-210{--input_font_size:16px; --input_height:42px} #wpforms-210{width:100%; margin:0 auto; padding:0} #wpforms-form-130{width:100%; overflow:hidden} #wpforms-210 input, #wpforms-210 button{margin:0; padding:0; border:none; background:none} #wpforms-210 .wpforms-field{padding:0; margin:0} #wpforms-210 .wpforms-error-container{line-height:16px} #wpforms-210 .wpforms-field-container{width:100%; display:-webkit-flex; display:flex; flex-wrap:wrap; overflow:hidden} #wpforms-210 .wpforms-submit-container{padding:0!important; width:170px; height:var(--input_height); background:var(--i_color);border-radius: 0.2rem; position:relative;margin:0 auto;} #wpforms-210 .wpforms-field{ position: relative; } #wpforms-210 .wpforms-field-label{ font-size: 0; } #wpforms-210 .wpforms-field-label span{ position: absolute; top: 15px; left: 3px; font-size: 0.14rem; color: red; } #wpforms-210 .wpforms-field{width:100%; margin-bottom:10px; padding-bottom:20px; background:transparent; overflow:hidden} #wpforms-210 .wpforms-field:nth-child(1){margin-right:20px} #wpforms-210 .wpforms-field:nth-child(1), #wpforms-210 .wpforms-field:nth-child(2){width:calc(50% - 10px)} #wpforms-210 input{height:var(--input_height)} #wpforms-210 textarea{min-height:100px} #wpforms-210 input, #wpforms-210 textarea{width:100%;border: 0; max-width:100%!important; font-size:var(--input_font_size);border-radius: 0.1rem;background-color: white; color:#222; box-sizing:border-box; line-height:var(--input_height); padding:0 10px} #wpforms-210 input::-webkit-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-210 input::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-210 input::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-210 input::-ms-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-210 textarea::-webkit-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-210 textarea::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-210 textarea::-moz-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-210 textarea::-ms-input-placeholder{color:rgba(0,0,0,.3); font-size:var(--input_font_size)} #wpforms-210 #wpforms-210-field_1-error, #wpforms-210 #wpforms-210-field_2-error, #wpforms-210 #wpforms-210-field_3-error, #wpforms-210 #wpforms-210-field_4-error{position:absolute; font-size:14px} #wpforms-210 .wpforms-submit-container button{overflow: hidden;border-radius: 0.2rem; width:100%; height:var(--input_height); font-size:16px; color:#FFF; line-height:var(--input_height); cursor:pointer; text-transform:uppercase; position:relative; z-index:2} #wpforms-210 .wpforms-submit-container img{position:absolute; top:50%; transform:translate(0,-50%); right:4px} .close{position:absolute; top:20px; right:30px; display:block; width:50px; height:50px; background:url(//cdn.xuansiwei.com/mingx11998/wp-content/themes/huaan/static/imgs/close_1_hei.svg) no-repeat center; background-size:contain} .close:hover{-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg)} .close{-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease} #wpforms-210 .wpforms-submit-container:hover{ background-color: var(--i_color2); animation: a 0.5s 1 linear; animation-delay: 0.01s; } @media screen and (max-width:1440px){ } @media screen and (max-width:1366px){ } @media screen and (max-width:1200px){ } @media screen and (max-width:959px){ /* .aside_right{display:none} */ #aside_sc_from1 {width: 80%;} } @media screen and (max-width:767px){ } @media screen and (max-width:560px){ #aside_sc_from1 {width: 87%;} } .link_hidden{display: none !important;} /* -----------------------------thanks----------------------------- */ .banner_top{ margin-top: var(--header_height); } /* 隐私政策 */ .privacy{margin-bottom: 1rem;padding-top: 0.7rem;} #header{background-color: rgb(0 0 0 / 57%) !important;} .privacy_cont{} .privacy_cont .tit{margin-bottom:30px} .privacy_cont .tit h2{font-size:24px; text-align:center; font-weight:bold} .privacy_cont article, .privacy_cont article *{font-size:14px; color:#666; line-height:24px} .foot {top: 130px;} .privacy ol {padding: 0px;} @media screen and (max-width:1200px){ .privacy{margin-bottom: 0.5rem;} } @media screen and (max-width:959px){ .privacy{margin-bottom: 0.3rem;} } /* 感谢页面 */ .thanks{padding-top: 1rem; margin:0px auto 1rem; text-align:center;box-sizing: border-box; } .thanks h2{margin-bottom:20px; font-size:0.3rem; color:#222; font-weight:bold} .thanks a{z-index: 2; display: flex;display: -webkit-flex;justify-content: center; position: relative; transition: all 1s ease;} .btns { height: 4em; width: 12em; display: flex; align-items: center; justify-content: center; background: transparent; border: 0px solid black; cursor: pointer; } .btns:hover p{ color: var(--i_color); } .wrapperss { height: 2em; width: 8em; position: relative; background: transparent; display: flex; justify-content: center; align-items: center; } .thanks .text { font-size: 17px; z-index: 1; color: #000; padding: 4px 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.7); transition: all 0.5s ease; } .flower { display: grid; grid-template-columns: 1em 1em; position: absolute; transition: grid-template-columns 0.8s ease; } .flower1 { top: -12px; left: -13px; transform: rotate(5deg); } .flower2 { bottom: -5px; left: 8px; transform: rotate(35deg); } .flower3 { bottom: -15px; transform: rotate(0deg); } .flower4 { top: -14px; transform: rotate(15deg); } .flower5 { right: 11px; top: -3px; transform: rotate(25deg); } .flower6 { right: -15px; bottom: -15px; transform: rotate(30deg); } .petal { height: 1em; width: 1em; border-radius: 40% 70% / 7% 90%; background: linear-gradient(#1a5fb4 0%, rgba(69,162,255,1) 58%, #91c8ff 100%); border: 0.5px solid #ffffff; z-index: 0; transition: width 0.8s ease, height 0.8s ease; } .two { transform: rotate(90deg); } .three { transform: rotate(270deg); } .four { transform: rotate(180deg); } .btns:hover .petal { background: linear-gradient(#E870A5, #FFEFF6); border: 0.5px solid #FFEFF6; } .btns:hover .flower { grid-template-columns: 1.5em 1.5em; } .btns:hover .flower .petal { width: 1.5em; height: 1.5em; } .btns:hover .text { background: rgba(255, 255, 255, 0.4); } .btns:hover div.flower1 { animation: 15s linear 0s normal none infinite running flower1; } @keyframes flower1 { 0% { transform: rotate(5deg); } 100% { transform: rotate(365deg); } } .btns:hover div.flower2 { animation: 13s linear 1s normal none infinite running flower2; } @keyframes flower2 { 0% { transform: rotate(35deg); } 100% { transform: rotate(-325deg); } } .btns:hover div.flower3 { animation: 16s linear 1s normal none infinite running flower3; } @keyframes flower3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .btns:hover div.flower4 { animation: 17s linear 1s normal none infinite running flower4; } @keyframes flower4 { 0% { transform: rotate(15deg); } 100% { transform: rotate(375deg); } } .btns:hover div.flower5 { animation: 20s linear 1s normal none infinite running flower5; } @keyframes flower5 { 0% { transform: rotate(25deg); } 100% { transform: rotate(-335deg); } } .btns:hover div.flower6 { animation: 15s linear 1s normal none infinite running flower6; } @keyframes flower6 { 0% { transform: rotate(30deg); } 100% { transform: rotate(390deg); } } @media screen and (max-width:1200px){ .thanks{padding-top: 60px;} } @media screen and (max-width:767px){ .thanks{padding-top: 40px;margin:0px auto 70px} } @media screen and (max-width:560px){ } /* 搜索页 */ .search{background-color: white;} .in_search_tit{padding-bottom:70px; text-align:center;background-color: white;} .in_search_tit h2{font-size:34px; color:var(--i_color); font-weight:bold; text-transform:uppercase;padding-top: 0.4rem;} .in_search_tit p{margin:16px 0; font-size:24px; color:#757575} .in_search{width:510px; margin:0 auto; border:1px solid var(--border_color); overflow:hidden} .in_search .search_ipt{float:left; box-sizing:border-box; padding-left:10px; width:calc(100% - 110px); font-size:15px; color:#333; line-height:46px} .in_search .search_btn{float:right; width:110px; height:46px; line-height:46px; background:var(--i_color); font-size:18px; color:#FFF;cursor: pointer;} @media screen and (max-width:1440px){ .in_search_tit{} .in_search_tit h2{font-size:32px} .in_search_tit p{font-size:22px} .pd_other li{width: 23%;margin-bottom: 0.6rem;} } @media screen and (max-width:1366px){ .in_search_tit h2{font-size:28px} .in_search_tit p{font-size:20px} .in_search .search_btn{font-size:16px} } @media screen and (max-width:1200px){ .in_search_tit{padding-bottom:60px} .in_search_tit h2{font-size:26px} .in_search_tit p{margin:10px auto 16px; font-size:18px} .pd_other li{width: 23%;margin-bottom: 0.4rem;} } @media screen and (max-width:959px){ .in_search_list li{margin-bottom:30px} .in_search_tit h2{font-size:24px} .in_search_tit p{font-size:17px} .pd_other li{width: 23%;margin-bottom: 0.2rem;} } @media screen and (max-width:767px){ .in_search_tit{padding-bottom:40px} .in_search{width:90%} .in_search_tit h2{font-size:22px} .in_search_tit p{font-size:16px} } @media screen and (max-width:560px){ .in_search_tit{padding-bottom:34px} .in_search{width:94%} .in_search_tit h2{font-size:20px} .in_search_tit p{font-size:14px} .in_search .search_ipt{line-height:38px} .in_search .search_btn{height:38px; line-height:38px} } /* search results list */ .in_search_list { padding-bottom: .6rem; overflow: hidden; } .in_search_list li { box-sizing: border-box; border: 1px solid var(--border_color); margin-bottom: 0.26rem; } .in_search_list a { display: block; padding: .2rem; } .in_search_list h2 { font-size: 0.18rem; color: #212121; font-weight: bold; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .in_search_list h6 { margin: .1rem 0; font-size: 0.14rem; color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .in_search_list i { display: inline-block; padding: .06rem .1rem; font-size: 0.13rem; color: var(--i_color); background: #EDEDED; -webkit-border-radius: .04rem; border-radius: .04rem; } @media screen and (max-width:1024px) { .in_search_list h2 { font-size: 0.15rem; white-space: initial; } .in_search_list h6 { font-size: 0.13rem; } .in_search_list i { font-size: 0.12rem; } } @media screen and (max-width:959px) {} @media screen and (max-width:767px) { .in_search_list li { margin-bottom: 0.2rem; } } @media screen and (max-width:560px) { .in_search_list { padding-bottom: .3rem } } .form_hide{ display: none; } @keyframes round{ 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } /* 404 */ .in404{position:absolute; top:0; left:0; width:100%; height:100%; background:#FFF} .in404_text{position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); width:80%; text-align:center} .in404_text h1{font-size:220px; color:#BBB} .in404_text h6{margin:10px auto 30px; font-size:18px; color:#999} .in404_text a{display:inline-block; padding:0 40px; line-height:32px; font-size:15px; color:#999; border:2px solid #DDD; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px} @media screen and (max-width:959px){ .in404_text h1{font-size:180px} } @media screen and (max-width:767px){ .in404_text h1{font-size:140px} .in404_text h6{font-size:16px} .in404_text a{font-size:14px} } @media screen and (max-width:560px){ .in404_text h1{font-size:70px} .in404_text h6{margin:10px auto 18px; font-size:14px; line-height:20px} .in404_text a{font-size:13px} } .solution_Imgs{ width: 100%; } .center p{ text-align: center; } .in_solutions {} .sol_cont { --horizontal-menu-num: 4; --horizontal-menu-margin: 1%; --horizontal-menu-width: calc((100% - (var(--horizontal-menu-margin) * (var(--horizontal-menu-num) - 1))) / 4); --item_num: 7; --item_height: .9rem; --item_margin: .1rem; --item_box_height: calc(var(--item_num) * var(--item_height) + (var(--item_num) - 1) * var(--item_margin)); } .sol_cont { display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: flex-end; } .sol_aside { flex-shrink: 0; width: .8rem; height: var(--item_box_height); background: -webkit-linear-gradient(top, var(--i_color2), var(--i_color)); background: linear-gradient(to bottom, var(--i_color2), var(--i_color)); -webkit-clip-path: polygon(50% 0%, 100% 6%, 100% 100%, 0 100%, 0% 6%); clip-path: polygon(50% 0%, 100% 6%, 100% 100%, 0 100%, 0% 6%); overflow: hidden; } .sol_aside li:nth-child(1) { height: 15%; } .sol_aside li:nth-child(2) { height: 27.5%; } .sol_aside li:nth-child(3) { height: 57.5%; } .sol_aside li { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; } .sol_aside li:not(:last-child)::before, .sol_aside li:not(:last-child)::after { content: ''; position: absolute; bottom: .1rem; width: 70%; height: 2px; background: #FFF; } .sol_aside li:not(:last-child)::before { left: -14%; -webkit-transform: rotate(-34deg); transform: rotate(-34deg); } .sol_aside li:not(:last-child)::after { right: -14%; -webkit-transform: rotate(34deg); transform: rotate(34deg); } .sol_aside p { text-align: center; font-size: .15rem; color: #FFF; } .sol_table_box { margin-left: .3rem; width: 100%; display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: flex-end; } .sol_table_box .vertical_menu { flex-shrink: 0; width: 12%; display: -webkit-flex; display: flex; flex-wrap: wrap; } .sol_table_box .vertical_menu dt { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center } .sol_table_box .vertical_menu dt p { padding: 0 .1rem; text-align: center; font-size: 0.16rem; font-weight: bold; } .sol_table { margin-left: .2rem; width: 100%; position: relative; } .sol_table .horizontal-menu { margin-bottom: 0.2rem; display: -webkit-flex; display: flex; flex-wrap: nowrap; justify-content: space-between; } .sol_table .horizontal-menu dt { width: var(--horizontal-menu-width); text-align: center; position: relative; overflow: hidden; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease } .sol_table .horizontal-menu dt::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--i_color3); } .sol_table .horizontal-menu p { padding: .12rem 0; font-size: 0.18rem; color: var(--i_color3); position: relative; } .sol_table .horizontal-menu dt.curr { background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; } .sol_table .horizontal-menu dt.curr::before { border-color: transparent; } .sol_table .horizontal-menu dt.curr p { color: #FFF; } .sol_table_t { height: var(--item_box_height); display: -webkit-flex; display: flex; flex-wrap: nowrap; position: relative; } .sol_table_t dt { position: absolute; top: 0; width: var(--horizontal-menu-width); height: 100%; -webkit-transition: all .7s ease; transition: all .7s ease } .sol_table_t dt:nth-child(1) { left: 0; } .sol_table_t dt:nth-child(2) { left: calc(1 * var(--horizontal-menu-width) + var(--horizontal-menu-margin)); } .sol_table_t dt:nth-child(3) { left: calc(2 * var(--horizontal-menu-width) + var(--horizontal-menu-margin) * 2); } .sol_table_t dt:nth-child(4) { left: calc(3 * var(--horizontal-menu-width) + var(--horizontal-menu-margin) * 3); } .sol_table_t ul { display: -webkit-flex; display: flex; flex-wrap: wrap; } .sol_table_t li { width: 100%; box-sizing: border-box; padding: 0 .14rem; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; } .sol_table_t li::-webkit-scrollbar { width: 2px; } .sol_table_t li::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #333 } .sol_table_t li::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: #F1F1F1 } .sol_table_t li p { font-size: 0.14rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .sol_table_bottom_t { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--item_height); -webkit-border-radius: .3rem 0 0 0; border-radius: .3rem 0 0 0; background: var(--linear-gradien); background: var(--linear-gradien2); display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; z-index: 3; } .sol_table_bottom_t p { padding: 0 .3rem; font-size: 0.15rem; color: #FFF; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .sol_table_box .vertical_menu, .sol_table_t ul { gap: var(--item_margin) 0; } .sol_table_box .vertical_menu dt, .sol_table_t li { height: var(--item_height); } .sol_table_box .vertical_menu dt:nth-child(1), .sol_table_t li:nth-child(1) { background: rgb(255 221 109 / 20%); } .sol_table_box .vertical_menu dt:nth-child(2), .sol_table_t li:nth-child(2) { background: rgb(253 203 94 / 20%); } .sol_table_box .vertical_menu dt:nth-child(3), .sol_table_t li:nth-child(3) { background: rgb(248 155 56 / 20%); } .sol_table_box .vertical_menu dt:nth-child(4), .sol_table_t li:nth-child(4) { background: rgb(243 104 33 / 20%); } .sol_table_box .vertical_menu dt:nth-child(5), .sol_table_t li:nth-child(5) { background: rgb(240 70 34 / 20%); } .sol_table_box .vertical_menu dt:nth-child(6), .sol_table_t li:nth-child(6) { background: rgb(239 50 34 / 20%); } .sol_table_box .vertical_menu dt:nth-child(7) { background: rgb(238 36 35 / 20%); } .sol_table_t:hover dt { opacity: 0; } .sol_table_t dt:hover { left: 0; width: 100%; opacity: 1; z-index: 2; } .sol_table_t dt:hover li { justify-content: center; } .sol_table_t dt:hover p { text-align: center; } .sol_table_t dt:hover p br { display: none; } .sol_table_t ul li { opacity: .3; } .sol_table_t dt.curr li, .sol_table_t ul:hover li { opacity: 1; } @media screen and (max-width:1440px) { .sol_table .horizontal-menu p { font-size: 0.17rem; } } @media screen and (max-width:1366px) { .sol_aside p { font-size: 0.14rem; } .sol_table_box .vertical_menu dt p { font-size: 0.15rem; } .sol_table_bottom_t p { font-size: 0.14rem; } } @media screen and (max-width:1200px) {} /* Solutions --- Mobile Style */ .mb_sol_cont, .last_item, .mb_sol_aside { display: none; } @media screen and (max-width:1024px) { .sol_cont { display: none; } .mb_sol_cont, .last_item, .mb_sol_aside { display: block; } } @media screen and (max-width:1024px) { .mb_sol_cont { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: flex-end; } .mb_vertical_menu { display: -webkit-flex; display: flex; flex-wrap: wrap; flex-shrink: 0; width: 24%; } .mb_vertical_menu dt { padding: 0 .1rem; } .mb_vertical_menu p { text-align: center; font-size: .14rem; font-weight: bold; } .mb_sol_table { margin-left: auto; width: 74%; position: relative; } .mb_sol_list { width: 100%; position: relative; overflow: hidden } .mb_sol_list .swiper-wrapper { display: -webkit-flex; display: flex; position: relative; width: 100% } .mb_sol_list .swiper-slide { flex-shrink: 0; position: relative } .mb_horizontal-menu { margin-bottom: 0.1rem; width: 100%; background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; } .mb_horizontal-menu p { text-align: center; padding: .1rem 0; font-size: 0.16rem; color: #FFF; } .mb_table_t_list { display: -webkit-flex; display: flex; flex-wrap: wrap; } .mb_vertical_menu, .mb_table_t_list { gap: .08rem 0; } .mb_vertical_menu dt, .mb_table_t_list dt { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; width: 100%; height: .9rem; } .mb_vertical_menu dt { justify-content: center; } .mb_table_t_list dt { padding: 0 .3rem; } .mb_vertical_menu dt:nth-child(1), .mb_table_t_list dt:nth-child(1) { background: rgb(255 221 109 / 20%); } .mb_vertical_menu dt:nth-child(2), .mb_table_t_list dt:nth-child(2) { background: rgb(253 203 94 / 20%); } .mb_vertical_menu dt:nth-child(3), .mb_table_t_list dt:nth-child(3) { background: rgb(248 155 56 / 20%); } .mb_vertical_menu dt:nth-child(4), .mb_table_t_list dt:nth-child(4) { background: rgb(243 104 33 / 20%); } .mb_vertical_menu dt:nth-child(5), .mb_table_t_list dt:nth-child(5) { background: rgb(240 70 34 / 20%); } .mb_vertical_menu dt:nth-child(6), .mb_table_t_list dt:nth-child(6) { background: rgb(239 50 34 / 20%); } .mb_vertical_menu dt:nth-child(7) { background: rgb(238 36 35 / 20%); } .mb_table_t_list dt p { font-size: 0.14rem; } .mb_table_t_list dt p br { display: none; } .mb_sol-prev, .mb_sol-next { position: absolute; top: 51%; z-index: 3; cursor: pointer; outline: none; -webkit-user-select: none; user-select: none } .mb_sol-prev.swiper-button-disabled, .mb_sol-next.swiper-button-disabled { display: none; } .mb_sol-prev { left: 10px; } .mb_sol-next { right: 10px; } .mb_sol-prev i, .mb_sol-next i { font-size: 0.4rem; color: var(--i_color3); } .mb_sol-prev.shake, .mb_sol-next.shake { -webkit-animation: move_lr 1s infinite linear; animation: move_lr 1s infinite linear } @keyframes move_lr { 0% { transform: translateX(0); } 50% { transform: translateX(10px); } 100% { transform: translateX(0); } } .last_item { margin-top: 0.08rem; display: -webkit-flex; display: flex; flex-wrap: wrap; } .mb_vertical_menu_last { width: 24%; background: rgb(238 36 35 / 20%); display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .mb_vertical_menu_last p { padding: 0 .1rem; text-align: center; font-size: 0.14rem; font-weight: bold; } .mb_table_t_list_last { margin-left: auto; width: 74%; background: var(--linear-gradien); background: var(--linear-gradien2); display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; } .mb_table_t_list_last p { padding: .1rem .3rem; font-size: 0.14rem; color: #FFF; } .mb_sol_aside { margin-top: 0.2rem; -webkit-border-radius: .1rem; border-radius: .1rem; overflow: hidden; } .mb_sol_aside ul { padding: .1rem 0; display: -webkit-flex; display: flex; flex-wrap: nowrap; background: var(--linear-gradien); background: var(--linear-gradien2); } .mb_sol_aside li { text-align: center; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .mb_sol_aside li:nth-child(1) { width: 20%; } .mb_sol_aside li:nth-child(2) { width: 30%; } .mb_sol_aside li:nth-child(3) { width: 50%; } .mb_sol_aside p { text-align: center; color: #FFF; } } @media screen and (max-width:768px) { .mb_vertical_menu p, .mb_vertical_menu_last p { font-size: 0.13rem; } .mb_table_t_list dt, .mb_table_t_list_last p { padding-left: 0.2rem; padding-right: 0.2rem; } .mb_table_t_list dt p, .mb_table_t_list_last p { font-size: 0.13rem; } } @media screen and (max-width:560px) { .mb_horizontal-menu p { font-size: 0.15rem } .mb_vertical_menu dt, .mb_table_t_list dt { height: 0.8rem; } .mb_sol-prev, .mb_sol-next { top: 52%; } .mb_sol-prev i, .mb_sol-next i { font-size: 0.26rem; } } /* ----------------------------------------- */ .sol2_cont{ --horizontal-menu-num: 5; --horizontal-menu-margin: 1%; --horizontal-menu-width: calc((100% - (var(--horizontal-menu-margin) * (var(--horizontal-menu-num) - 1))) / 5); --item1_height: .8rem; --item2_height: 1.4rem; --item_bottom1_height: 1rem; --item_bottom2_height: 1.2rem; --item_margin: .14rem; --item_box_height: calc(var(--item1_height) + var(--item2_height) + var(--item_bottom1_height) + var(--item_bottom2_height) + var(--item_margin) * 3) } .sol2_cont{display:-webkit-flex; display:flex; flex-wrap:nowrap;} .sol2_aside{width: 1.3rem;flex-shrink: 0;display:-webkit-flex; display:flex; flex-wrap:wrap;flex-direction: column;gap: var(--item_margin) 0;} .sol2_aside dt{text-align: center;display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;justify-content: center;} .sol2_aside p{ box-sizing: border-box; padding: 0 .1rem; font-size: 0.16rem;color: #FFF} .sol2_aside dt:nth-child(1){ height: 0.54rem; background: #1382c1; } .sol2_aside dt:nth-child(2){ height: calc(.54rem + var(--item1_height) + var(--item_margin)); background:-webkit-linear-gradient(top, #1382c1, #1382c1); background:linear-gradient(to bottom, #1382c1, #1382c1); } .sol2_aside dt:nth-child(3){ height: calc(var(--item2_height) + var(--item_bottom1_height) + var(--item_margin)); background:-webkit-linear-gradient(top, #F36521, #EE1F23); background:linear-gradient(to bottom, #F36521, #EE1F23); } .sol2_aside dt:nth-child(4){ height: var(--item_bottom2_height); background: #EE1F1F; } .sol2_table_box{width: 100%;margin-left: 2%;} .sol2_table_tit{ margin-bottom: var(--item_margin); background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; text-align: center; position: relative; } .sol2_table_tit p{ font-size: 0.18rem; color: #FFF; line-height: 0.54rem; } .sol2_table_box .horizontal-menu{ margin-bottom: var(--item_margin); display:-webkit-flex; display:flex; flex-wrap:nowrap;justify-content: space-between; } .sol2_table_box .horizontal-menu dt { width:var(--horizontal-menu-width); text-align: center; position: relative; overflow: hidden; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease } .sol2_table_box .horizontal-menu dt::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--i_color3); } .sol2_table_box .horizontal-menu p { font-size: 0.18rem; color: var(--i_color3); line-height: 0.54rem; position: relative; } .sol2_table_box .horizontal-menu dt.curr { background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; } .sol2_table_box .horizontal-menu dt.curr::before { border-color: transparent; } .sol2_table_box .horizontal-menu dt.curr p { color: #FFF; } .sol2_table_t{ height: var(--item_box_height); display: -webkit-flex; display: flex; flex-wrap: nowrap; position: relative; } .sol2_table_t dt { position: absolute; top: 0; width: var(--horizontal-menu-width); -webkit-transition: all .7s ease; transition: all .7s ease } .sol2_table_t dt:nth-child(1) { left: 0; } .sol2_table_t dt:nth-child(2) { left: calc(1 * var(--horizontal-menu-width) + var(--horizontal-menu-margin)); } .sol2_table_t dt:nth-child(3) { left: calc(2 * var(--horizontal-menu-width) + var(--horizontal-menu-margin) * 2); } .sol2_table_t dt:nth-child(4) { left: calc(3 * var(--horizontal-menu-width) + var(--horizontal-menu-margin) * 3); } .sol2_table_t dt:nth-child(5) { left: calc(4 * var(--horizontal-menu-width) + var(--horizontal-menu-margin) * 4); } .sol2_table_t ul{display:-webkit-flex; display:flex; flex-wrap:wrap;gap: var(--item_margin) 0;} .sol2_table_t li{ width: 100%; box-sizing: border-box; padding: 0 .14rem; display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center; } .sol2_table_t li:nth-child(1){height: var(--item1_height);background: #FFF8E2;} .sol2_table_t li:nth-child(2){height: var(--item2_height);background: #FEEBD7;} .sol2_table_t li p{ font-size: 0.14rem; } /* .sol2_table_t dt:hover { opacity: 0; } */ .sol2_table_t dt:hover { left: 0; width: 100%; opacity: 1; z-index: 2; } .sol2_table_t dt:hover li { justify-content: center; } .sol2_table_t dt:hover p { text-align: center; } .sol2_table_t dt:hover p br { display: none; } .sol2_table_t ul li { opacity: .3; } .sol2_table_t dt.curr li, .sol2_table_t ul:hover li { opacity: 1; } .sol2_table_bottom_t_box{ position: absolute;left: 0;bottom: 0;width: 100%; } .sol2_table_bottom_t_box .sol2_table_bottom_t{ display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center; z-index: 3; } .sol2_table_bottom_t_box .sol2_table_bottom_t p{ width: 100%; box-sizing: border-box; padding: 0 .3rem;font-size: 0.15rem; } .sol2_table_bottom_t_box .sol2_table_bottom_t:nth-child(1){ height: var(--item_bottom1_height); background: rgb(232 23 23 / 20%); } .sol2_table_bottom_t_box .sol2_table_bottom_t:nth-child(2){ margin-top: var(--item_margin); height: var(--item_bottom2_height); background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius:.3rem 0 0 0; border-radius:.3rem 0 0 0; } .sol2_table_bottom_t_box .sol2_table_bottom_t:nth-child(1) p{color: #333;} .sol2_table_bottom_t_box .sol2_table_bottom_t:nth-child(2) p{ color: #FFF; text-align: center; } @media screen and (max-width:1440px) { .sol2_table_box .horizontal-menu p{ font-size: 0.17rem; } } @media screen and (max-width:1366px) { .sol2_aside p { font-size: 0.15rem; } .sol2_table_tit p{font-size: 0.17rem;} } @media screen and (max-width:1200px) { .sol2_table_box .horizontal-menu p { font-size: 0.16rem; } } .mb_sol2_cont { display: none; } @media screen and (max-width:1024px) { .sol2_cont { display: none; } .mb_sol2_cont { display:-webkit-flex; display:flex; flex-wrap:wrap; } } @media screen and (max-width:1024px) { .mb_sol2_aside{width: 20%; display:-webkit-flex; display:flex; flex-wrap:wrap;flex-direction: column; flex-shrink: 0;gap: .1rem 0; } .mb_sol2_aside dt{ width: 100%; text-align: center;display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;justify-content: center;} .mb_sol2_aside p{ box-sizing: border-box; padding: 0 .1rem; font-size: 0.16rem;color: #FFF} .mb_sol2_aside dt:nth-child(1){ height: 0.44rem; background: #1382c1; } .mb_sol2_aside dt:nth-child(2){ height: calc(.4rem + .1rem + .8rem); background:-webkit-linear-gradient(top, #1382c1, #1382c1); background:linear-gradient(to bottom, #1382c1, #1382c1); } .mb_sol2_aside dt:nth-child(3){ height: calc(1.8rem + 2.6rem + .1rem); background:-webkit-linear-gradient(top, #F36521, #EE1F23); background:linear-gradient(to bottom, #F36521, #EE1F23); } .mb_sol2_table_box{width: 78%;margin-left: auto} .mb_sol2_table_tit{ width: 100%; margin-bottom: 0.1rem; background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius:.1rem 0 0 0; border-radius:.1rem 0 0 0; } .mb_sol2_table_tit p{ font-size: 0.17rem;color: #FFF;text-align: center; line-height: 0.44rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .mb_sol2_list_box{} .mb_sol2_list { width: 100%; position: relative; overflow: hidden } .mb_sol2_list .swiper-wrapper { display: -webkit-flex; display: flex; position: relative; width: 100% } .mb_sol2_list .swiper-slide { flex-shrink: 0; position: relative } .mb_horizontal-menu2{ width: 100%; margin-bottom: 0.1rem; background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius:.1rem 0 0 0; border-radius:.1rem 0 0 0; } .mb_horizontal-menu2 p{ font-size: 0.16rem;color: #FFF;text-align: center; line-height: 0.4rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .mb_table_t_list2{ display:-webkit-flex; display:flex; flex-wrap:wrap; flex-direction: column; gap: .1rem 0; } .mb_table_t_list2 dt{ width: 100%; box-sizing: border-box; padding: 0 .14rem; display:-webkit-flex; display:flex; flex-wrap:wrap; align-items: center; } .mb_table_t_list2 dt:nth-child(1){ height: .8rem; background: #FFF8E2; } .mb_table_t_list2 dt:nth-child(2){ height: 1.8rem; background: #FEEBD7; } .mb_table_t_list2 dt p{font-size: 0.14rem;} .mb_sol2_table_bottom_t1{ height: 2.6rem; margin-top: 0.1rem; background: rgb(232 23 23 / 20%); display:-webkit-flex; display:flex; flex-wrap:wrap; align-items: center; justify-content: center; } .mb_sol2_table_bottom_t1 p{ width: 100%; box-sizing: border-box; padding: 0 .14rem; font-size: 0.14rem; } .mb_last_box{ margin-top: 0.1rem; display:-webkit-flex; display:flex; flex-wrap:wrap;width: 100%;} .mb_last_box dt{ width: 20%; background: #EE1F1F; display:-webkit-flex; display:flex; flex-wrap:wrap; align-items: center;justify-content: center; } .mb_last_box dt p{ text-align: center; box-sizing: border-box; padding: 0 .1rem;font-size: 0.16rem;color: #FFF; } .mb_last_box dd{ width: 78%; margin-left: auto; background: var(--linear-gradien); background: var(--linear-gradien2); display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;justify-content: center; -webkit-border-radius:.1rem 0 0 0; border-radius:.1rem 0 0 0; } .mb_last_box dd p{ padding: .14rem; font-size: 0.14rem;color: #FFF;} } @media screen and (max-width:768px) { .mb_sol2_aside p,.mb_last_box dt p{font-size: 0.14rem;} .mb_sol2_table_tit p{font-size: 0.14rem;} .mb_horizontal-menu2 p{font-size: 0.14rem;} .mb_table_t_list2 dt p,.mb_sol2_table_bottom_t1 p,.mb_last_box dd p{font-size: 0.13rem;} } .sol_about {} .sol_about .wrap { display: -webkit-flex; display: flex; flex-wrap: wrap; } .sol_ab_t { width: 49%; } .sol_ab_t .tit { font-size: 0.38rem; text-transform: uppercase; font-weight: bold; } .sol_ab_p { margin-left: auto; width: 46%; height: 100%; position: relative; } .sol_ab_p::before { content: ''; position: absolute; left: 0; top: 0; width: 30%; height: 70%; background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius: .4rem 0 0 0; border-radius: .4rem 0 0 0; } .sol_ab_p .img { position: relative; padding: .26rem 0 0 .26rem; } .sol_ab_p .img img { width: 100%; -webkit-border-radius: .3rem 0 0 0; border-radius: .3rem 0 0 0; } .sol_num {} .sol_num dl { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; } .sol_num dt { max-width: 30%; } .sol_num span { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: baseline; } .sol_num .roll_num { font-size: 0.48rem; } .sol_num b, .sol_num p { font-size: 0.16rem; font-weight: normal; } .sol_num h6 { font-size: 0.16rem; } @media screen and (max-width:1440px) { .sol_ab_t .tit { font-size: 0.34rem; } } @media screen and (max-width:1366px) { .sol_num .roll_num { font-size: 0.42rem; } .sol_num h6 { font-size: 0.15rem; } } @media screen and (max-width:1200px) { .sol_num .roll_num { font-size: 0.38rem; } .sol_num h6 { font-size: 0.14rem; } } @media screen and (max-width:1024px) { .sol_ab_t { width: 100%; } .sol_ab_t .tit { max-width: 70%; font-size: 0.28rem; } .sol_ab_t .tit br { display: none; } .sol_ab_p { margin: .4rem 0 0 0; width: 100%; } .sol_ab_p .img { padding: .14rem 0 0 .14rem; } .sol_num dl { gap: .3rem 5%; } .sol_num .roll_num { font-size: 0.32rem; } .sol_num h6 { font-size: 0.14rem; } } @media screen and (max-width:768px) { .sol_ab_t .tit { font-size: 0.22rem; } .sol_ab_t article { margin: .2rem auto .3rem; } .sol_num .roll_num { font-size: 0.28rem; } .sol_num h6 { font-size: 0.14rem; } } @media screen and (max-width:560px) { .sol_ab_t .tit { max-width: 100%; font-size: 0.18rem; } .sol_ab_p .img { padding: .1rem 0 0 .1rem; } .sol_num .roll_num { font-size: 0.26rem; } .sol_num h6 { font-size: 0.13rem; } } /* ------------------------------------- */ .sol3_cont{ --horizontal-menu-num: 3; --horizontal-menu-margin: 1%; --horizontal-menu-width: calc((100% - (var(--horizontal-menu-margin) * (var(--horizontal-menu-num) - 1))) / 3); --item_margin: .1rem; --item_span_height: .46rem; --item1_height: 0.6rem; --item2_height: calc(5 * var(--item_span_height) + 4 * var(--item_margin)); --item3_height: calc(5 * var(--item_span_height) + 4 * var(--item_margin)); --item_box_height: calc(var(--item1_height) + var(--item2_height) + var(--item3_height) + 2 * var(--item_margin)) } .sol3_cont{ display:-webkit-flex; display:flex; flex-wrap:nowrap; } .sol3_aside{width: 1.3rem;flex-shrink: 0; display:-webkit-flex; display:flex; flex-wrap:wrap;flex-direction: column;gap: var(--item_margin) 0;} .sol3_aside dt{text-align: center;display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;justify-content: center;} .sol3_aside p{ box-sizing: border-box; padding: 0 .1rem; font-size: 0.16rem;color: #FFF} .sol3_aside dt:nth-child(1){ height: 0.54rem; background: #1382c1; } .sol3_aside dt:nth-child(2){ height: var(--item1_height); background:-webkit-linear-gradient(top, #1382c1, #1382c1); background:linear-gradient(to bottom, #1382c1, #1382c1); } .sol3_aside dt:nth-child(3){ height: calc(var(--item2_height) + var(--item3_height) + var(--item_margin)); background:-webkit-linear-gradient(top, #F36521, #EE1F23); background:linear-gradient(to bottom, #F36521, #EE1F23); } .sol3_table_box{width: 100%;margin-left: 2%;} .sol3_table_box .horizontal-menu{ margin-bottom: var(--item_margin); display:-webkit-flex; display:flex; flex-wrap:nowrap;justify-content: space-between; } .sol3_table_box .horizontal-menu dt { width:var(--horizontal-menu-width); text-align: center; position: relative; overflow: hidden; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease } .sol3_table_box .horizontal-menu dt::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--i_color3); } .sol3_table_box .horizontal-menu p { font-size: 0.18rem; color: var(--i_color3); line-height: 0.54rem; position: relative; } .sol3_table_box .horizontal-menu dt.curr { background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius: .2rem 0 0 0; border-radius: .2rem 0 0 0; } .sol3_table_box .horizontal-menu dt.curr::before { border-color: transparent; } .sol3_table_box .horizontal-menu dt.curr p { color: #FFF; } .sol3_table_t{ height: var(--item_box_height); display:-webkit-flex; display:flex; flex-wrap:nowrap; position: relative; } .sol3_table_t dt{ position: absolute; top: 0; width: var(--horizontal-menu-width); height: 100%; -webkit-transition: all .7s ease; transition: all .7s ease } .sol3_table_t dt:nth-child(1) { left: 0; } .sol3_table_t dt:nth-child(2) { left: calc(1 * var(--horizontal-menu-width) + var(--horizontal-menu-margin)); } .sol3_table_t dt:nth-child(3) { left: calc(2 * var(--horizontal-menu-width) + var(--horizontal-menu-margin) * 2); } .sol3_table_t ul{display:-webkit-flex; display:flex; flex-wrap:wrap;gap: var(--item_margin) 0;} .sol3_table_t dt:nth-child(3) ul{width: 100%;height: 100%;} .sol3_table_t li{ width: 100%; box-sizing: border-box; } .sol3_table_t li span{ display: block; height: 0.46rem; } .sol3_table_t li p{ text-align: center; padding: 0 .14rem; font-size: 0.14rem; height: 100%; display:-webkit-flex; display:flex; flex-wrap:wrap; align-items: center; justify-content: center; } .sol3_t_1_1,.sol3_t_2_1,.sol3_t_3_1{ display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;justify-content: center; background: #FFF8E2; } .sol3_t_1_1,.sol3_t_2_1{height: var(--item1_height);} .sol3_t_3_1{height: 100%;} .sol3_t_1_2, .sol3_t_1_3, .sol3_t_2_2, .sol3_t_2_3{ display:-webkit-flex; display:flex; flex-wrap:wrap;flex-direction: column; gap: var(--item_margin) 0; } .sol3_t_2_2{flex-direction: row;justify-content: space-between !important;} .sol3_t_2_2 .h_t{ width: calc((100% - var(--item_margin)) / 2); height: calc(5 * var(--item_span_height) + 4 * var(--item_margin)); } .sol3_t_1_2 span p,.sol3_t_2_2 span p,.sol3_t_2_2 .h_t{background: #FEEBD7;} .sol3_t_1_3 span p,.sol3_t_2_3 span p{background: #FDEAE9;} .sol3_table_t:hover dt { opacity: 0; } .sol3_table_t dt:hover { left: 0; width: 100%; opacity: 1; z-index: 2; } .sol3_table_t dt:hover li { justify-content: center; } .sol3_table_t dt:hover p { text-align: center; } /* .sol3_table_t dt:hover p br { display: none; } */ .sol3_table_t ul li { opacity: .3; } .sol3_table_t dt.curr li, .sol3_table_t ul:hover li { opacity: 1; } .sol3_bottom_t{ margin-top: .1rem; display:-webkit-flex; display:flex; flex-wrap:nowrap; } .sol3_bottom_t dt{width: 1.3rem;flex-shrink: 0;background: #EE1F1F;display:-webkit-flex; display:flex; flex-wrap:wrap; align-items: center;justify-content: center;} .sol3_bottom_t dt p{ text-align: center; box-sizing: border-box; padding: 0 .1rem;font-size: 0.16rem;color: #FFF; } .sol3_bottom_t dd{width: 100%;margin-left: 2%;background: var(--linear-gradien); background: var(--linear-gradien2); display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;justify-content: center; -webkit-border-radius:.2rem 0 0 0; border-radius:.2rem 0 0 0; } .sol3_bottom_t dd p{ padding: .2rem; font-size: 0.18rem;color: #FFF; } @media screen and (max-width:1440px) { .sol3_table_box .horizontal-menu p{ font-size: 0.17rem; } } @media screen and (max-width:1366px) { .sol3_table_box .horizontal-menu p{ font-size: 0.16rem; } .sol3_bottom_t dd p{font-size: 0.17rem;} } .mb_sol3_cont { display: none; } @media screen and (max-width:1024px) { .sol3_cont,.sol3_bottom_t { display: none; } .mb_sol3_cont { display:-webkit-flex; display:flex; flex-wrap:wrap; } } @media screen and (max-width:1024px) { .mb_sol3_aside{width: 20%; display:-webkit-flex; display:flex; flex-wrap:wrap;flex-direction: column; flex-shrink: 0;gap: .1rem 0; } .mb_sol3_aside dt{ width: 100%; text-align: center;display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;justify-content: center; } .mb_sol3_aside dt{ width: 100%; text-align: center;display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;justify-content: center;} .mb_sol3_aside p{ box-sizing: border-box; padding: 0 .1rem; font-size: 0.16rem;color: #FFF} .mb_sol3_aside dt:nth-child(1){ height: 0.44rem; background: #1382c1; } .mb_sol3_aside dt:nth-child(2){ height: .9rem; background:-webkit-linear-gradient(top, #1382c1, #1382c1); background:linear-gradient(to bottom, #1382c1, #1382c1); } .mb_sol3_aside dt:nth-child(3){ height: calc(5 * .46rem * 2 + 4 * .1rem * 2 + .1rem); background:-webkit-linear-gradient(top, #F36521, #EE1F23); background:linear-gradient(to bottom, #F36521, #EE1F23); } .mb_sol3_table_box{width: 78%;margin-left: auto} .mb_sol3_list { width: 100%; position: relative; overflow: hidden } .mb_sol3_list .swiper-wrapper { display: -webkit-flex; display: flex; position: relative; width: 100% } .mb_sol3_list .swiper-slide { flex-shrink: 0; position: relative } .mb_horizontal-menu3{ width: 100%; margin-bottom: 0.1rem; background: var(--linear-gradien); background: var(--linear-gradien2); -webkit-border-radius:.1rem 0 0 0; border-radius:.1rem 0 0 0; } .mb_horizontal-menu3 p{ font-size: 0.16rem;color: #FFF;text-align: center; line-height: 0.44rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .mb_table_t_list3{ height: calc(100% - .44rem - .1rem); display:-webkit-flex; display:flex; flex-wrap:wrap; flex-direction: column; gap: .1rem 0; } .mb_table_t_list3 p{ padding: 0 .14rem; font-size: 0.14rem; } .mb_sol3_t_1_1,.mb_sol3_t_2_1,.mb_sol3_t_3_1{ height: .9rem; background: #FFF8E2; display:-webkit-flex; display:flex; flex-wrap:wrap; align-items: center; justify-content: center; } .mb_sol3_t_1_2, .mb_sol3_t_1_3, .mb_sol3_t_2_2, .mb_sol3_t_2_3 { display:-webkit-flex; display:flex; flex-wrap:wrap;flex-direction: column; gap: .1rem 0; } .mb_sol3_t_2_2{ flex-direction: row; justify-content: space-between; } .mb_sol3_t_2_2 .h_t{ width: calc((100% - .1rem) / 2); height: calc(5 * .46rem + 4 * .1rem); } .mb_sol3_t_1_2 span, .mb_sol3_t_1_3 span, .mb_sol3_t_2_2 span, .mb_sol3_t_2_3 span{height: 0.46rem;} .mb_sol3_t_1_2 p, .mb_sol3_t_1_3 p, .mb_sol3_t_2_2 p, .mb_sol3_t_2_3 p { text-align: center; height: 100%; display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;justify-content: center; } .mb_sol3_t_1_2 p, .mb_sol3_t_2_2 p{background: #FEEBD7;} .mb_sol3_t_1_3 p, .mb_sol3_t_2_3 p{background: #FDEAE9;} .mb_sol3_t_3_1{height: 100%;} .mb_sol3_last_box{ width: 100%; margin-top: 0.1rem; display:-webkit-flex; display:flex; flex-wrap:wrap;} .mb_sol3_last_box dt{ width: 20%; background: #EE1F1F; display:-webkit-flex; display:flex; flex-wrap:wrap; align-items: center;justify-content: center; } .mb_sol3_last_box dt p{ text-align: center; box-sizing: border-box; padding: 0 .1rem;font-size: 0.16rem;color: #FFF; } .mb_sol3_last_box dd{ width: 78%; margin-left: auto; background: var(--linear-gradien); background: var(--linear-gradien2); display:-webkit-flex; display:flex; flex-wrap:wrap;align-items: center;justify-content: center; -webkit-border-radius:.1rem 0 0 0; border-radius:.1rem 0 0 0; } .mb_sol3_last_box dd p{ text-align: center; padding: .14rem; font-size: 0.14rem;color: #FFF;} } @media screen and (max-width:768px) { .mb_sol3_aside p,.mb_sol3_last_box dt p{font-size: .14rem;} .mb_horizontal-menu3 p{font-size: 0.15rem;} .mb_table_t_list3 p{font-size: 0.13rem;} } .sol_honor { background: -webkit-linear-gradient(top, transparent 50%, #FFF4EA); background: linear-gradient(to bottom, transparent 50%, #FFF4EA); } .sol_honor_list { position: relative; overflow: hidden } .sol_honor_list .swiper-wrapper { display: -webkit-flex; display: flex; position: relative; width: 100% } .sol_honor_list .swiper-slide { flex-shrink: 0; position: relative } .sol_honor_list .img { width: 100%; position: relative; overflow: hidden } .sol_honor_list .img::before { content: ""; display: block; padding-bottom: 136.8% } .sol_honor_list .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; -webkit-transition: all .5s ease; transition: all .5s ease; cursor: pointer; } .sol_honor_list .txt { margin-top: 0.1rem; text-align: center; } .sol_honor_list .txt p { font-size: 0.15rem; } .sol_honor-prev, .sol_honor-next { position: absolute; top: 42%; transform: translate(0, -50%); width: .4rem; height: .6rem; background: rgb(0 0 0 / 40%); z-index: 3; cursor: pointer; outline: none; -webkit-user-select: none; user-select: none } .sol_honor-prev { left: 0; } .sol_honor-next { right: 0; } .sol_honor-prev i, .sol_honor-next i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.34rem; color: #FFF; } .sol_honor_list .swiper-button-disabled { cursor: not-allowed } .sol_honor-prev:hover, .sol_honor-next:hover { background: var(--i_color3); } .sol_honor-pagination { display: block; margin-top: 0.6rem; text-align: center } .sol_honor-pagination .swiper-pagination-bullet { width: .7rem; height: .02rem; display: inline-block; margin: 0 6px; background: #E1E1E1; -webkit-border-radius: 1rem; border-radius: 1rem; outline: none; cursor: pointer; position: relative; } .sol_honor-pagination .swiper-pagination-bullet::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; -webkit-transition: all .5s ease; transition: all .5s ease } .sol_honor-pagination .swiper-pagination-bullet-active::before { width: 100%; background: var(--linear-gradien); background: var(--linear-gradien2); } @media screen and (max-width:1200px) { .sol_honor-pagination .swiper-pagination-bullet { width: 0.4rem; } } @media screen and (max-width:1024px) { .sol_honor-prev, .sol_honor-next { display: none; } .sol_honor_list .txt p { font-size: 0.14rem; } .sol_honor-pagination { margin-top: 0.4rem; } } @media screen and (max-width:768px) { .sol_honor-pagination .swiper-pagination-bullet { width: 0.2rem; } } @media screen and (max-width:560px) { .sol_honor_list .txt p { font-size: 0.13rem; } } .sol_app {} .app_list { position: relative; overflow: hidden } .app_list .swiper-wrapper { display: -webkit-flex; display: flex; position: relative; width: 100% } .app_list .swiper-slide { flex-shrink: 0; position: relative; overflow: hidden; } .app_list .img { width: 100%; position: relative; overflow: hidden } .app_list .img::before { content: ""; display: block; padding-bottom: 60% } .app_list .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; -webkit-transition: all .5s ease; transition: all .5s ease; cursor: pointer; } .app_list .txt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; } /* .app_list .txt::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: rgb(0 0 0 / 30%); -webkit-transition: all .5s ease; transition: all .5s ease } */ .app_list .txt p { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; font-size: 0.16rem; color: #FFF; -webkit-transition: all .5s ease; transition: all .5s ease } .app_list .swiper-slide:hover .txt::before { height: 100%; } .app_list .swiper-slide:hover p { opacity: 1; } .app-prev, .app-next { position: absolute; top: 46%; transform: translate(0, -50%); width: .4rem; height: .6rem; background: rgb(0 0 0 / 40%); z-index: 3; cursor: pointer; outline: none; -webkit-user-select: none; user-select: none } .app-prev { left: 0; } .app-next { right: 0; } .app-prev i, .app-next i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.34rem; color: #FFF; } .app_list .swiper-button-disabled { cursor: not-allowed } .app-prev:hover, .app-next:hover { background: var(--i_color3); } .app-pagination { display: block; margin-top: 0.6rem; text-align: center } .app-pagination .swiper-pagination-bullet { width: .7rem; height: .02rem; display: inline-block; margin: 0 6px; background: #E1E1E1; -webkit-border-radius: 1rem; border-radius: 1rem; outline: none; cursor: pointer; position: relative; } .app-pagination .swiper-pagination-bullet::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; -webkit-transition: all .5s ease; transition: all .5s ease } .app-pagination .swiper-pagination-bullet-active::before { width: 100%; background: var(--linear-gradien); background: var(--linear-gradien2); } @media screen and (max-width:1200px) { .app-pagination .swiper-pagination-bullet { width: 0.4rem; } } @media screen and (max-width:1024px) { .app_list .txt { position: relative; height: auto; margin-top: 0.1rem; } .app_list .txt::before { display: none; } .app_list .txt p { opacity: 1; position: initial; transform: none; width: 100%; font-size: 0.13rem; color: #888; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .app-prev, .app-next { display: none; } .app-pagination { margin-top: 0.4rem; margin-bottom: 0.24rem; } } @media screen and (max-width:768px) {} @media screen and (max-width:560px) {} .singleNews_position{ background-color: rgba(0,0,0,.3); } .white_header header{ background-color: white !important; } /* Map update */ .mk_cont{} .mk_cont .img{display: table; width: 100%;max-width: 1588px; margin-left: auto;margin-right: auto;position: relative;} .mk_cont .img img{width: 100%;} .mk_dian{position: absolute;} .mk_dian.d1{top: 39.6%;left:19%;} .mk_dian.d2{top: 69.6%;left:31.3%;} .mk_dian.d3{top: 65.2%;left: 53.4%;} .mk_dian.d4{top: 32.4%;left: 49.6%;} .mk_dian.d5{top: 20.1%;right: 23.1%;} .mk_dian.d6{top:78%;right: 15.3%;} .mk_dian p { position: absolute; left: 50%; transform: translate(-50%, 0); margin-top: 0.1rem; font-size: 0.18rem; white-space: nowrap; overflow: hidden; } .mk_dian .round { width: 0.1rem; height: 0.1rem; margin: 0 auto; background: var(--i_color3); -webkit-border-radius: 50%; border-radius: 50%; position: relative; } .mk_dian .round::before { opacity: 0; content: ''; position: absolute; top: 50%; left: 50%; margin: -130% 0 0 -130%; width: 260%; height: 260%; background: rgb(245 134 32 / 50%); -webkit-border-radius: 50%; border-radius: 50%; -webkit-animation: warn 1.2s ease-out; animation: warn 1.2s ease-out; animation-iteration-count: infinite } @keyframes warn { 0% { transform: scale(0); opacity: 0.5; } 25% { transform: scale(0.15); opacity: 0.7; } 50% { transform: scale(0.33); opacity: 0.8; } 75% { transform: scale(0.66); opacity: 1; } 100% { transform: scale(1); opacity: 0.2; } } @media screen and (max-width:1024px) { .mk_dian p{font-size: 0.15rem;} } @media screen and (max-width:768px) { .mk_dian p{display: none;} } @media screen and (max-width:560px) { .mk_dian .round{width: 6px;height: 6px;} } .abc {}