/* CSS Document */ /*===========================header=============================*/ /* .bg1{ position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: url(../images/bg1.png) top left no-repeat; background-size: contain; } */ .index_bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden;} .bg1{position: absolute; left: 0; top: 0; width:100vw; height:100vw; } .bg1 .bubble{ display: block; position: absolute; width: 56.875%; padding-top: 56.875%; left:-15%; top:-35%; animation: spin2 8s infinite linear; transform-origin: 50% 40%;} .bg1 .bubble .circle{ display: block; position: absolute; left: 0; top: 0; width:100%; height: 100%; border-radius: 100%; background: #a2d8f3; filter: blur(8rem); animation: spin-reverse2 8s infinite linear; transform: translate3d(0, 0, 0); } .bg2{position: absolute; left: 0; top: 100vh; width:100vw; height:100vw; } .bg2 .bubble{ display: block; position: absolute; width:40%; padding-top: 40%; left:-20%; top:-5%; animation: spin2 8s infinite linear; transform-origin: 45% 35%;} .bg2 .bubble .circle{ display: block; position: absolute; left: 0; top: 0; width:100%; height: 100%; border-radius: 100%; background: #f7d1c5; filter: blur(5rem); animation: spin-reverse2 8s infinite linear; transform: translate3d(0, 0, 0); } .bg3{position: absolute; left: 0; top:120vh; width:100vw; height:100vw; } .bg3 .bubble{ display: block; position: absolute; width: 50%; padding-top: 50%; right:-35%; top:0; animation: spin2 8s infinite linear; transform-origin: 50% 40%;} .bg3 .bubble .circle{ display: block; position: absolute; left: 0; top: 0; width:100%; height: 100%; border-radius: 100%; background: #a2d8f3; filter: blur(10rem); animation: spin-reverse2 8s infinite linear; transform: translate3d(0, 0, 0);} .bg4{position: absolute; left: 0; top:0; width:100vw; height:100vw; pointer-events: none; } .bg4 .bubble{ display: block; position: absolute; width: 50%; padding-top: 50%; left:-40%; top:0%; animation: spin2 8s infinite linear; transform-origin: 50% 40%;} .bg4 .bubble .circle{ display: block; position: absolute; left: 0; top: 0; width:100%; height: 100%; border-radius: 100%; background: #a2d8f3; filter: blur(10rem); animation: spin-reverse2 8s infinite linear; transform: translate3d(0, 0, 0);} .bg5{position: absolute; left: 0; top: 0; width:100vw; height:100vw; pointer-events: none; } .bg5 .bubble{ display: block; position: absolute; width:40%; padding-top: 40%; right:-30%; top:-5%; animation: spin2 8s infinite linear; transform-origin: 45% 35%;} .bg5 .bubble .circle{ display: block; position: absolute; left: 0; top: 0; width:100%; height: 100%; border-radius: 100%; background: #f7d1c5; filter: blur(5rem); animation: spin-reverse2 8s infinite linear; transform: translate3d(0, 0, 0); } @keyframes spin{ to{transform: rotate(1turn);} } @keyframes spin2{ to{transform: rotate(-1turn);} } @keyframes spin-reverse{ from{ transform:rotate(1turn); } } @keyframes spin-reverse2{ from{ transform:rotate(-1turn) translate3d(0, 0, 0); } } .banner_bg2{ position: absolute; right: 0; top: 0; width: 100%; z-index: -1; } #header{ height: 9.5rem; z-index: 999; position: fixed; left: 0; top: 0; width: 100%; transition: .5s; } #header .m{ display: flex; align-items: center; justify-content: space-between;} #header .fr{ display: flex; align-items: center; flex-grow: 1; max-width:70rem; justify-content: flex-end;} #logo{ flex-shrink:0; width: 11.75rem; transition: .5s; } #nav{ flex-grow: 1; max-width: 750px; position: relative; margin-right: 1rem;} #nav ul{ display: flex; justify-content: space-around;} #nav ul li{ flex-grow: 1; text-align: center;} #nav ul li a{ display: block; } #nav ul li a h3{ line-height: 5.25rem; font-size: 1.25rem; color: #2a292d; font-weight:bold; transition: .5s;} #nav ul li .sub{position: absolute; text-align: left; transition: 0s;opacity: 0;visibility: hidden;width: 57.8125rem;left: 0;top: 99.8%;display: grid;column-gap: 2rem;row-gap: 1rem;grid-template-columns: repeat(2,1fr);border-radius: .625rem;background: rgba(255, 255, 255, 0.98);box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);padding: 1.5rem 2rem;} #nav ul li .sub a{ display: flex; align-items: center; height: 2.5rem; border-bottom: 1px solid #e6e7eb;} #nav ul li .sub dd{ margin-top: .5rem;} #nav ul li .sub dd a{ /* padding-left: 1.875rem; */ height: 2.5rem; border: 0; font-size: .9375rem; color: #67728d;} #nav ul li .sub dd a:hover{ color: #ee766d;} #nav ul li .sub a img{ width: 1.125rem; height: 1.125rem; margin-right: .75rem; flex-shrink: 0; transition: .5s;} #nav ul li .sub a svg path{ fill: url("#jianbian01"); } #nav ul li .sub a svg{ width: 1.125rem; height: 1.125rem; margin-right: .75rem; flex-shrink: 0; transition: .5s;} #nav ul li .sub a h4{flex-grow: 1;transition: .5s;font-weight:bold;display: block;font-size: 1rem;color: #555;} #nav ul li .sub a h5{flex-grow: 1;transition: .5s; display: block;font-size: 1rem;color: #555;} #nav ul li .sub a i{ display: block; width: 1rem; height: .875rem; flex-shrink: 0; background: url(../image/arr_left.svg) center no-repeat; background-size: contain; transition: .5s;} #nav ul li .sub a:hover i{ background: url(../image/arr_left_on.svg) center no-repeat; background-size: contain;} #nav ul li:hover .sub{ opacity: 1; visibility: visible; transition: .2s;} #nav ul li .sub a:hover svg{ } #nav ul li.on a h3{ color: #d6322a !important;} #nav ul li:hover a h3{ color: #d6322a !important;} #header .top_btn{ display: flex; width: 8.4375rem; height: 3.1875rem; border-radius: 1.625rem; align-items: center; justify-content: center;font-weight:bold; color: #fff; font-size: 1.0625rem; } #nav ul li .sub a:hover h4{ color: #d6322a;} #nav ul li .sub a:hover h5{ color: #d6322a;} #nav ul li.onlyone{ position:relative;} #nav ul li.onlyone .sub{ width:auto; width: 25rem;grid-template-columns: 1fr; transform: translateX(-50%); left: 50%;} .btn_language{ display: flex; margin-left: 10px; align-items: center; position: relative; z-index: 1; border-radius: 50%; } .btn_language>a{ font-size: 1.0625rem; display: flex; align-items: center; transition: .5s; justify-content: center; font-size: 1rem; font-weight:bold; color: #080808; width: 8.4375rem; height: 3.1875rem; border-radius: 1.625rem; border: 1px solid #3a4042; } .btn_language svg{ width: 1.25rem; height: 1.25rem;} .btn_language.btn_language svg path{ fill: #282728;} .btn_language svg:nth-child(3){ width: .625rem; height: .625rem;} .btn_language span{ margin-right: .75rem; color: #282728; transition: .5s;} .btn_language.btn_search svg{ width: 1.5rem; height: 1.5rem;} .btn_language.on svg path{ fill: #fff;} .language_sub{ position: absolute; left: 0; top: 100%; padding-top: 10px; transform: translateY(10px); width: 100%; min-width: 90px; opacity: 0; visibility: hidden; transition: .5s; } .language_sub .box{ border-radius: 1.625rem; position: relative; z-index: 1;padding: 10px 0;border: 1px solid rgba(131, 131, 131, 0.2); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04); background: #fff; border-top: 0;} .language_sub .box .bd_top{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .language_sub .box .bd_top:before{ content: ""; display: block; width: 100%; height: 100%; border-top: 1px solid rgba(131, 131, 131, 0.2); border-radius: 1.625rem; position: absolute; left: 0; top: 0; clip-path: inset(0 calc(50% + 6px) 0 0);} .language_sub .box .bd_top:after{ content: ""; display: block; width: 100%; height: 100%; border-top: 1px solid rgba(131, 131, 131, 0.2); border-radius: 1.625rem; position: absolute; left: 0; top: 0; clip-path: inset(0 0 0 calc(50% + 6px));} .language_sub .box:before{content: "";display: block;width: 10px;height: 10px;position: absolute; z-index: -2;bottom: calc(100% - 5px); background: #fff; left: 50%;transform: translateX(-50%) rotate(45deg); border: 1px solid rgba(131, 131, 131, 0.2); border-bottom: 0; border-right: 0;} .language_sub .box:after{ position: absolute; content: ""; width: 100%; height: 100%; left: 0; bottom: 0; z-index: -1;border-radius: 1.625rem; } .btn_language:hover .language_sub{ opacity: 1; visibility: visible; transform: translateY(0);} .language_sub a{ display: block; text-align: left; justify-content: flex-start !important; padding: .5rem 1rem; text-transform: uppercase; font-size: .9375rem; color: #666; position: relative; z-index: 1; transition: .5s;} .language_sub a.on{color: #ee766d; } .language_sub a:hover{color: #ee766d; } #logo .img01{ display: none;} #header.white{} #header.white #logo .img01{ display: block;} #header.white #logo .img02{ display: none;} #header.white #nav ul li a h3{ color: #fff;} #header.white .btn_language>a{color: #fff; border: 1px solid #fff;} #header.white .btn_language span{color: #fff;} #header.white .btn_language.btn_language svg path{ fill: #fff;} #header.xg{} #header.xg #logo .img01{ display: none;} #header.xg #logo .img02{ display: block;} #header.xg #nav ul li a h3{ color: #2a292d;} #header.xg .btn_language>a{color: #080808; border: 1px solid #3a4042;} #header.xg .btn_language span{ color: #282728;} #header.xg .btn_language.btn_language svg path{ fill: #282728;} #header.xg{ background: #fff; height: 5.5rem; box-shadow: 0 0 5px rgba(0,0,0,.2); } #header.xg #logo{ width: 7rem;} #header.xg2{ background: #fff; height: 5.5rem; box-shadow: 0 0 5px rgba(0,0,0,.2); } #header.xg2 #logo{ width: 7rem;} /*手机导航开始*/ #m_header{ display:none; height:4.5rem; position:fixed; top:0; width:100%; z-index:996; transition:.5s; background: #fff; } #m_header .m{ position:relative; height:100%; display: flex; align-items: center;} #m_logo img{ height: 3.75rem;} .m_nav_list{/* flex-direction:column; *//* justify-content: flex-start; */width:100%;/* overflow: auto; */} .m_nav_list::-webkit-scrollbar {display:none} #m_nav {z-index: 997;position: fixed;background: #ffffff;background-size: cover;width: 100%;height:100vh;right: 0;top: 0;display:none;padding:50px 0;overflow:hidden;pointer-events: none;transition: all 0.5s .5s cubic-bezier(0.445, 0.145, 0.355, 1);display: block;overflow: auto;visibility: hidden;opacity: 0;transform-origin: left;} #m_nav::-webkit-scrollbar{ display: none;} #m_nav.act{pointer-events: auto;top:0; visibility: visible; opacity: 1;transition: all 0.5s cubic-bezier(0.445, 0.145, 0.355, 1); } #m_nav>ul>li{width: 80%;overflow:hidden;padding: 0;margin: 0 auto;} #m_nav>ul>li+li{border-top: 1px solid rgb(220 220 220 / 10%);} #m_nav li .a{ display: block; } #m_nav li h3{line-height:4.5rem;height:4.5rem;color: #000;padding:0;font-size: 1.375rem; font-family: Franklin-Gothic-Demi-Regular; display: flex;justify-content: space-between;overflow: hidden;transition: all 0.5s cubic-bezier(0.445, 0.145, 0.355, 1);} #m_nav li .a{ flex-grow: 1;} #m_nav li .a span{ display:block; position:absolute; top:0; right:10px; width: 20px; height: 50px; text-align:center;} #m_nav li i{ font-size:0;} #m_nav .title i{opacity:1;filter:alpha(opacity=100);display:inline-block;width: 30px;height:4.5rem;opacity: .8;float:right;display:inline-block;background: url(../image/arrow_down.svg) center no-repeat;background-size:14px;} #m_nav li.on.title i{ transform:rotate(-90deg);-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg);} #m_nav .on.title i{ transform:rotate(-90deg);-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg);} #m_nav li{display:block;width:100%;} #m_nav .slide_nav{ position: absolute; left:0; height: 70px; z-index: 998; padding:15px; top:0; width: 100%; } #m_nav .title .list{display:none;position:relative;width:100%;z-index:9;left:0;margin-left:1rem;background:none;border:0;clear: both;padding-bottom: 1rem;} #m_nav .title .list div{ padding-left: 1rem;} #m_nav .title .list div a{ font-size: 1rem; color: #666;} #m_nav .title .list span{ background:none; } #m_nav .title .list span a:hover{ color: #014085;} #m_nav .title .list a{display:block;font-size: 1.125rem;color: #333;text-align:left;line-height: 2.5rem;border:0;transition: all 0.5s cubic-bezier(0.445, 0.145, 0.355, 1);} /*三级导航 开始*/ #m_nav .title .list .void>a{background-size:10px; position:relative;} #m_nav .title .list .void>a:before{ content:"·"; position:absolute; left:-1em; font-size:12px; font-weight:bold;} #m_nav .title .list span{ position:relative; display:block;} #m_nav .title .list span .sub{ position: static; width:100%;display: block !important; overflow:hidden;} #m_nav .title .sub a{ background:none; font-size:.875rem; opacity:.8; min-width:50%; float:left; display:inline-block; color:#999;} .nav_mask { position: fixed; top: 0; left: 0;width: 100%;height: 100%;z-index: 1000;background-color: rgba(0,0,0,0.4);display: none;} #m_nav li h3{transform: translateY(50px);opacity: 0;} #m_nav li .list a{transform: translateY(50px);opacity: 0;} #m_nav.act li h3{ transform: translateY(0);transition: all 0.5s .6s cubic-bezier(0.445, 0.145, 0.355, 1); opacity: 1; } #m_nav.act .list a{ transform: translateY(0);transition: all 0.5s .6s cubic-bezier(0.445, 0.145, 0.355, 1); opacity: 1; } .search-dialog-box{position:fixed;left:0;top:0;width:100%;height:70vh;z-index:1000000;opacity:0;visibility:hidden;transition:.6s}.search-dialog-box:before{content:"";position:absolute;top:0;height:0;transition:.6s;left:0;right:0;z-index:1;background-image:-moz-linear-gradient(270deg,#af1e28 30%,rgba(175,30,40,0) 100%);background-image:-webkit-linear-gradient(270deg,#af1e28 30%,rgba(175,30,40,0) 100%);background-image:-ms-linear-gradient(270deg,#af1e28 30%,rgba(175,30,40,0) 100%)}.search-dialog-box.on:before{height:100%}.search-dialog-box .bubbles-bg{opacity:0;visibility:hidden;display:none}.search-dialog-box .search-bg{position:absolute;left:0;top:0;width:100%;height:0;margin:0;background:rgba(0,0,0,.7);background-size:cover;background-repeat:no-repeat;transform-origin:center center;transition:height .8s cubic-bezier(.77,0,.175,1)}.search-dialog-box .wrap-inner{transform:translateY(100%);transition:.6s}.header-right .bubbles-bg{opacity:0;visibility:hidden;transition:all .5s .8s}.search-dialog-box .bubbles-bg .bubble{position:absolute}.search-dialog-box .bubbles-bg .bubble .circle{border-radius:100%;position:absolute;left:0;top:0;width:100%;height:100%}.search-dialog-box .bubbles-bg .bubble1{width:6%;padding-top:6%;left:26.875%;top:-6.67%}.search-dialog-box .bubbles-bg .bubble1 .circle{border:1px solid #fff}.search-dialog-box .bubbles-bg .bubble2{width:12px;padding-top:12px;left:13.54%;top:18%}.search-dialog-box .bubbles-bg .bubble2 .circle{background-color:#ff495f}.search-dialog-box .bubbles-bg .bubble3{width:36px;padding-top:36px;left:8.854%;top:30.55%}.search-dialog-box .bubbles-bg .bubble3 .circle{background-color:#fff}.search-dialog-box .bubbles-bg .bubble4{width:56.875%;padding-top:56.875%;left:-28.6458%;top:51.85%}.search-dialog-box .bubbles-bg .bubble4 .circle{background:-webkit-linear-gradient(45deg,rgba(255,255,255,0),rgba(255,255,255,.05) 100%);background:-ms-linear-gradient(45deg,rgba(255,255,255,0),rgba(255,255,255,.05) 100%);background:linear-gradient(45deg,rgba(255,255,255,0),rgba(255,255,255,.05) 100%)}.search-dialog-box .bubbles-bg .bubble5{width:54px;padding-top:54px;left:26.3%;top:70.83%}.search-dialog-box .bubbles-bg .bubble5 .circle{background-color:#fff;opacity:.1}.search-dialog-box .bubbles-bg .bubble6{width:56.875%;padding-top:56.875%;left:73.4375%;top:-52.77%}.search-dialog-box .bubbles-bg .bubble6 .circle{background:-webkit-linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.1) 100%);background:-ms-linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.1) 100%);background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.1) 100%)}.search-dialog-box .bubbles-bg .bubble7{width:2rem;padding-top:2rem;left:60.9375%;top:18.5%}.search-dialog-box .bubbles-bg .bubble7 .circle{background-color:#ff495f}.search-dialog-box .bubbles-bg .bubble8{width:1.35rem;padding-top:1.35rem;left:95.83%;top:70.83%}.search-dialog-box .bubbles-bg .bubble8 .circle{border:1px solid #fff}.search-dialog-box .bubbles-bg .bubble9{width:16px;padding-top:16px;left:76.5625%;top:96.296%}.search-dialog-box .bubbles-bg .bubble9 .circle{background-color:#fff}.search-dialog-box .bubbles-bg .bubble10{width:56.875%;padding-top:56.875%;left:71.354%;top:87%}.search-dialog-box .bubbles-bg .bubble10 .circle{background:-webkit-linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.3) 100%);background:-ms-linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.3) 100%);background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.3) 100%)}.search-dialog-box .bubbles-bg .bubble{animation:spin 8s infinite linear;transform-origin:50% 45%}.search-dialog-box .bubbles-bg .bubble:nth-child(2n){animation:spin2 8s infinite linear}.search-dialog-box .bubbles-bg .bubble .circle{animation:spin-reverse 8s infinite linear}.search-dialog-box .bubbles-bg .bubble:nth-child(2n) .circle{animation:spin-reverse2 8s infinite linear}.search-dialog-box .bubbles-bg .sm-bubble{transform-origin:30% 30px}.search-dialog{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;z-index:2}.search-dialog .search-tit{font-size:2.75rem;line-height:3.5rem;color:#fff;text-align:center;overflow:hidden;display:none}.search-dialog .search-inner{overflow:hidden;margin-top:0}.search-dialog .search-input{width:50rem;margin:0 auto;padding:0 .5rem 0 1.5rem;background-color:rgba(255,255,255,.1);box-sizing:border-box;transition:all .3s;max-width:94%}.search-dialog .search-input input[type=text]{float:left;height:4.5rem;width:calc(100% - 3.5rem);background-color:transparent;font-size:1.25rem;color:#fff;transition:all .3s}.search-dialog .search-input input[type=text]::-webkit-input-placeholder{color:rgba(255,255,255,0.5)}.search-dialog .search-input input[type=text]:-moz-placeholder{color:rgba(255,255,255,0.5)}.search-dialog .search-input input[type=text]::-moz-placeholder{color:rgba(255,255,255,0.5)}.search-dialog .search-input input[type=text]:-ms-input-placeholder{color:rgba(255,255,255,0.5)}.search-dialog .search-input input[type=submit],.search-dialog .search-input .clear-btn{float:right;height:4.5rem;width:3.5rem}.search-dialog .search-input input[type=submit]{background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:1.5rem;background-image:url('../image/search-btn.svg')}.search-dialog .search-input .clear-btn{background-color:rgba(0,0,0,.2);background-repeat:no-repeat;background-position:center;background-image:url('../image/close-btn.svg');background-size:3.5rem;border-radius:100%;margin-right:1rem;display:none}.search-dialog .search-input.on{background-color:#fff}.search-dialog .search-input.on input[type=submit]{background-image:url('https://www.huameisoft.cn/static/style/pc/images/search-btn2.svg')}.search-dialog .hot-search{font-size:0;width:19.5rem;margin:.6rem auto 0;box-sizing:border-box;padding:0 .6rem;overflow:hidden}.search-dialog .hot-search .hot-tit,.search-dialog .hot-search .hot-link{display:inline-block;*display:inline;zoom:1;vertical-align:top}.search-dialog .hot-search .hot-tit{font-size:.375rem;line-height:.5rem;color:#fff;font-weight:bold;padding-left:.6rem;background-repeat:no-repeat;background-position:left center;background-size:.5rem;background-image:url(https://www.huameisoft.cn/static/style/pc/images/hot-icon.png)}.search-dialog .hot-link{margin-left:1rem}.search-dialog .hot-link a{display:inline-block;*display:inline;zoom:1;font-size:.375rem;line-height:.5rem;margin-right:.75rem;color:#fff;padding-bottom:5px;position:relative}.search-dialog .hot-link a:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:#fff;transform:scaleX(0);transform-origin:left center;transition:transform .3s}.search-dialog-box .bottom-box{position:absolute;left:0;bottom:5.1%;width:100%}.search-dialog-box .bottom-box .share-box{overflow:hidden}.search-dialog-box .bottom-box .copy{font-size:.35rem;line-height:.5rem;color:#fff;margin-top:.5rem;overflow:hidden}.header-right.is-open .bubbles-bg{visibility:visible;opacity:1}.header-right.is-open .search-btn .con-box{display:none}.header-right.is-open .close-btn{display:block}.header-right.is-open .item .search-bg{transform:scale(1)}.search-dialog-box.on{opacity:1;visibility:visible}.search-dialog-box.on .search-bg{height:100vh}.search-dialog-box.on .bubbles-bg{opacity:1;visibility:visible}.search-dialog-box.on .wrap-inner{transform:translateY(0)}.pub-close{position:absolute;width:3rem;height:3rem;z-index:10;right:1.5rem;top:1.35rem;background-color:rgba(255,255,255,.1);border-radius:100%}.pub-close .bg{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#1c5ab7;transform:scale(0);border-radius:100%;transition:transform .3s}.pub-close i{position:absolute;left:0;top:0;width:100%;height:100%;background-position:center;background-size:.75rem;background-repeat:no-repeat;background-image:url(../image/close-btn.svg);transition:.6s}.pub-close i:hover{transform:rotate(180deg)}@keyframes spin{to{transform:rotate(1turn)}}@keyframes spin2{to{transform:rotate(-1turn)}}@keyframes spin-reverse{from{transform:rotate(1turn)}}@keyframes spin-reverse2{from{transform:rotate(-1turn)}} /*====移动端导航====*/ #m_n_nav {display: none;line-height: 50px;position: relative;z-index: 9; width: 100%; background: #af1e28;} #m_n_nav .m{ display: flex; align-items: center; justify-content: space-between;} #bnt_back { } #bnt_back svg { fill: #fff; vertical-align: middle; width: 26px; height: 26px; } #m_n_nav i { } #m_n_nav h1 { font-size: 14px; color: #fff; text-align: center; margin: 0; line-height: 50px; } #bnt_sub_nav { cursor: pointer; color: #fff; font-size: 18px; } #bnt_sub_nav svg {fill: #fff;height: 20px;vertical-align: middle;width: 20px;} #bnt_sub_nav img { display: block; height: 15px; } #bnt_sub_nav.on img { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } #sub_nav_content {background: #f0f3f5;display: none;box-shadow: 0 0 5px #999;z-index: 9;} #sub_nav_content ul { padding: 10px; } #sub_nav_content ul li { display: block; line-height: 28px; margin: 1rem 0; } #sub_nav_content ul li a { display: block; border-left: 2px solid #af1e28; height: 30px; line-height: 30px; font-size: 14px; padding-left: 10px; color: #535455; } #sub_nav_content ul li.on a { color: #af1e28; } #sub_nav_content dl { font-size: 0; overflow: hidden; background: #fff; padding: 10px 0; border-top: 1px solid #e7e7e7; } #sub_nav_content dt { position: relative; background: #fff; z-index: 999; margin-bottom: 0; } #sub_nav_content dt a { margin: 0 20px; display: block; color: #5b5349; line-height: 30px; font-size: 15px; font-weight: 400; vertical-align: top; font-family:Alibaba-PuHuiTi-Regular; } #sub_nav_content dt a i { position: absolute; right: 15px; top: 0; opacity: 0; filter: alpha(opacity=0); display: none; } #sub_nav_content dt a { } #sub_nav_content dt.title { background: #fafafb; } #sub_nav_content dt.title i { opacity: 1; filter: alpha(opacity=100); } #sub_nav_content dt.title_on { background: #fafafb; } #sub_nav_content dt.title_on a { color: #af1e28; border-top: 1px solid #fff; } #sub_nav_content dt.title_on a i { color: #af1e28; } #sub_nav_content dt.last a { border-top: 1px solid #f8f8f8; } #sub_nav_content dt.on a, #sub_nav_content dt.title_on a {color: #af1e28;} #sub_nav_content dd { } #sub_nav_content dd .box { padding: 0px 0px 0px 0px; } #sub_nav_content dd a { padding: 0 25px; line-height: 30px; font-size: 13px; color: #5b5349; display: block; height: 30px; } #sub_nav_content dd a.on { color: #af1e28; } /*首页banner*/ #banner{ position: relative; z-index: 0;} #banner .swiper { height:100vh; } #banner .swiper-slide { overflow: hidden;} #banner a{ height: 100%;} #banner .slide-inner { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;left: 0; top: 0; background-size: cover !important; background-position: center; background-repeat: no-repeat !important;} #banner .slide-inner .pic{ overflow: visible; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0% , rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0% , rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%); animation: spin 50s infinite linear;} #banner .slide-inner img{max-width: 80%; max-height: 80%; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0% , rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0% , rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%); animation: spin 50s infinite linear; } #banner .txt{ color: #fff; flex-shrink: 0; height: 100%; display: flex; flex-direction: column; align-items:center; text-align: center; justify-content: center; padding-bottom:6rem;} #banner .txt h3{ opacity: 0; } #banner .txt p{ opacity: 0; } #banner .txt .btn_play2{ opacity: 0; } #banner .txt .btn_more{ opacity: 0; margin-top: 2.625rem; } #banner .txt h3{ font-size: 5.3125rem; line-height: 5.625rem; color: #223029; font-weight: bold; margin-bottom: 3rem; display: flex; align-items: center;} #banner .txt p{ font-size: 1.25rem; line-height: 1.875rem; color: #67728d; max-width: 700px; } #banner .swiper-button-prev{ opacity:.8; left:4%; position: absolute;} #banner .swiper-button-next{ opacity:.8; right:4%; position: absolute;} #banner .swiper-button-white{ border-radius: 50%; width: 4rem; height: 4rem; border: 1px solid rgba(70, 70, 70, 0.6);} #banner .swiper-slide.swiper-slide-active .txt h3{ animation: enter 1.2s forwards .1s;} #banner .swiper-slide.swiper-slide-active .txt p{ animation: enter 1.2s forwards .2s;} #banner .swiper-slide.swiper-slide-active .txt .btn_play2{ animation: enter 1.2s forwards .3s;} #banner .swiper-slide.swiper-slide-active .txt .btn_more{ animation: enter 1.2s forwards .3s;} @keyframes spin{ 0%{transform: rotate(0); } /* 50%{transform: rotate(.5turn)skew(30deg,-30deg);} */ 100%{transform: rotate(1turn); } } @-webkit-keyframes enter { 0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); } 20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); } 100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } } @keyframes enter { 0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); } 20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); } 100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } } #banner .text_white h3{ color: #fff;} #banner .text_white p{ color: rgba(255, 255, 255, 0.5);} .btn_more{ display: flex; align-items: center; justify-content: center; width: 12.0625rem; height: 3.0625rem; border-radius: 1.625rem; overflow: hidden;} .btn_play2{ width: 3.125rem; height: 3.125rem; margin-top: 2.375rem; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;} .btn_play2 svg{ width: 1.25rem; height: 1.25rem; margin-left: .5rem;} .btn_play2:before{ content:""; display: block; transform: rotate(45deg); transition: .5s; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; border-radius: .625rem; background: #ee766d;} .btn_play2:hover:before{ transform: rotate(135deg);} .s_gonggao{ margin-top: -4.375rem;} .s_gonggao .outbox{ display: flex; width: 100%; height: 51px; padding: 0 2.25rem; align-items: center;background-color: rgb(255, 255, 255); opacity: 0.902; border-radius: .625rem; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.05);} .s_gonggao .bd{ display: flex; align-items: center;} .s_gonggao .tt{ display: flex; align-items: center; margin-right: 3rem; flex-shrink: 0;} .s_gonggao .tt svg{ margin-right: 1rem;} .s_gonggao .tt h3{ font-weight:bold;} .s_gonggao .box{ display: flex; align-items: center;} .s_gonggao .box i{ display: block; margin-right: 5px; width: 4px; height: 4px; background: #67728d; border-radius: 50%; flex-shrink: 0;} .s_gonggao .box h4{ font-size: .9375rem; margin-right: 2.25rem; line-height: 2; color: #67728d; transition: .5s;white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .s_gonggao .box span{ flex-shrink: 0; font-size: .8125rem; color: #67728d; } .s_gonggao .swiper-slide{ width: auto;} .s_gonggao .arr{ cursor: pointer; flex-shrink: 0; width: 1.125rem;} .s_gonggao .swiper{ margin-right: 2rem; flex-grow: 1;} .s_gonggao .arr:hover svg path{ fill: hsl(4, 79%, 68%);} .s_gonggao .box:hover h4{ color: #ee766d;} .ovh{ overflow: hidden;} .s_tt{ text-align: center; margin-bottom: 6rem;} .s_tt h3{background:linear-gradient(to right, #db0706, #db0706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.625rem; line-height: 2.625rem; font-weight: bold; font-family: "Russo One", sans-serif; text-transform: uppercase; } .s_tt p{ font-size: 1.125rem; line-height: 1.5; color: #858ea4; margin-top: .75rem; max-width: 900px; text-align: center; margin-left: auto; margin-right: auto;} .s_pro{ position: relative;} .s_pro .outbox{ display: flex; justify-content: space-between; align-items: flex-start; position: relative;} .s_pro .left{ width: 37.5rem; position: relative; flex-shrink: 0;} .s_pro .left .swiper{ height: 37rem;} .s_pro .left .swiper-slide{ } .s_pro .btnbox{ padding-left: 3.5rem; margin-top:0; justify-content: flex-start;} .s_pro .left .box{ position: relative; padding: 0.15rem 0.5rem 0.15rem 3.5rem; cursor: pointer;} .s_pro .left .swiper:before{ content: ""; display: block; width: 1px; height: 100%; background: #ede7e5; transform: translateX(-50%); position: absolute; left: 3px; top: 0;} .s_pro .left .box:before{ content: ""; display: block; width: 5px; border-radius: 2.5px; height: 0; opacity: 0; transition: .5s; background-image: -moz-linear-gradient( -90deg, #df8280 0%, #70b9e2 100%); background-image: -webkit-linear-gradient( -90deg, #df8280 0%, #70b9e2 100%); background-image: -ms-linear-gradient( -90deg, #df8280 0%, #70b9e2 100%); position: absolute; left: 0; bottom: 0;} .s_pro .left .box h4{ font-size: 1.375rem; transition: .5s; margin-bottom: 1rem; color: #2a292d; font-weight:bold;} .s_pro .left .box .con{ font-size: 1.15rem; color: #67728d; line-height: 2rem; } .s_pro .left .swiper-slide-thumb-active .box:before{ opacity: 1; top: 0; bottom: auto; height: 100%;} .s_pro .right .swiper{ max-width: 709px;} .s_pro .left .swiper-slide-thumb-active .box h4{ font-size: 1.375rem; color: #d13c37;} /* .s_pro .btn_more2{ margin-left: 3.5rem;} */ .s_pro .right .box{ transform: scale(.8); transition: .5s;} .s_pro .right .swiper-slide-active .box{ transform: scale(1);} .s_pro .swiper-scrollbar{ display: none !important; width: 1px; height: 100%; background: #ede7e5; transform: translateX(-50%); position: absolute; left: 3px; top: 0; } .s_pro .swiper-scrollbar-drag{ width: 5px; border-radius: 2.5px; left: -2.5px; background-image: -moz-linear-gradient( -90deg, #df8280 0%, #70b9e2 100%); background-image: -webkit-linear-gradient( -90deg, #df8280 0%, #70b9e2 100%); background-image: -ms-linear-gradient( -90deg, #df8280 0%, #70b9e2 100%); } .btn_more2{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #67728d; width: 12.0625rem; height: 3.0625rem; border-radius: 1.625rem; overflow: hidden; background: #ee766d; /* background-image: -moz-linear-gradient( -0deg, #df8280 0%, #70b9e2 100%); background-image: -webkit-linear-gradient( -0deg, #df8280 0%, #70b9e2 100%); background-image: -ms-linear-gradient( -0deg, #df8280 0%, #70b9e2 100%); */ } .btn_more2:before{ content: ""; opacity: 1; transition: .5s; display: block; position: absolute; z-index: -1; left: 1px; top: 1px; right: 1px; bottom: 1px; background: #fff; border-radius: 1.5rem;} .btn_more2:hover:before{ opacity: 0;} .btn_more2:hover{ color: #fff;} .s_fuwu{ width: 100%; /* background: url(../images/s_fuwu_bg.png) center bottom no-repeat; */ background-size: 100%; position: relative;} .s_fuwu ul{ display: grid; grid-template-columns: 1fr 1fr; gap: 5rem 8.5rem;} .s_fuwu ul li{} .s_fuwu ul li .box{ display: flex;} .s_fuwu ul li .ico{ width: 6rem; height: 6rem; margin-right: 1.5rem; border-radius: 50%; border: 1px solid #dfdfe0; transition: .5s; flex-shrink: 0; display: flex; align-items: center; justify-content: center;} .s_fuwu ul li .ico img{ transition: .7s;} .s_fuwu ul li .txt{} .s_fuwu ul li .txt h4{ font-size: 1.375rem; color: #d13c37; font-weight:bold; margin-bottom: 1rem; transition: .3s;} .s_fuwu ul li:hover .txt h4{ color: #d13c37;} .s_fuwu ul li .txt .con{font-size: 1.15rem; color: #67728d; line-height: 2rem; } .s_fuwu .flexcenter{ margin-bottom: 4.5rem; margin-top: 5rem;} .s_fuwu ul li:hover .ico{ box-shadow: 0 0 10px rgba(58, 56, 80, 0.08); } .s_fangan{ position: relative; z-index: 99;} .s_fangan .s_tt{ text-align: left;} .s_fangan .s_tt h3{ color: #fff;} .s_fangan .bd{} .s_fangan .bd .bg{ background-size: cover !important; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%;} .s_fangan .bd .box{ position: relative; height: 50.375rem; z-index: 1; display: flex; align-items: center;} .s_fangan .bd .txtbox{ width: 100%; padding-bottom: 6%;} .s_fangan .bd .txtbox .m{ display: grid; grid-template-columns: 1fr 1fr;} .s_fangan .bd .tt{ font-size: 2.625rem; color: #fff; font-weight:bold;} .s_fangan .bd .txt{ color: #fff; transition: 1s; transform: translateY(7rem); opacity: 0; transition: .7s;} .s_fangan .bd .txt h4{ font-size: 2.0625rem; font-weight:bold; margin-bottom: 1rem;} .s_fangan .bd .txt p{font-size: 1.15rem; line-height: 2rem; margin-bottom: 2.25rem; } .s_fangan .bd .txt .btn_more2{ background: transparent ; color: #fff;} .s_fangan .bd .txt .btn_more2:before{ background: transparent; border: 1px solid #fff;} .s_fangan .bd .txt .btn_more2:hover:before{ background: #e77d77; border: 1px solid #e77d77; opacity: 1;} /* .s_fangan .bd .txt .btn_more2:hover{ color: #67728d;} */ .s_fangan .bd .swiper-slide-active .txt{transform: translateY(0); opacity: 1; } .s_fangan .hd{ margin-top: -12.875rem; position: relative; z-index: 3;} .s_fangan .hd .outbox{ position: relative;} .s_fangan .hd .box{ height: 12.875rem; transition: .5s; cursor: pointer; padding: 2.5rem 2.25rem; border-radius: 5px 5px 0 0; background: url(../image/fangan_li.png) center no-repeat; background-size: cover !important;} .s_fangan .hd .box h4{ font-size: 1.5rem; color: #111111; font-weight:bold;} .s_fangan .hd .swiper-slide-thumb-active{ z-index: 9;} .s_fangan .hd .swiper-slide-thumb-active .box{ background: url(../image/fangan_li_on.png) center no-repeat; box-shadow: 0 0 30px rgba(146, 145, 165, 0.6);} .s_fangan .hd .swiper-slide-thumb-active .box h4{ color: #fff;} .s_fangan .hd .arr{ position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;} .s_fangan .hd .arr_left{ left: -3rem;} .s_fangan .hd .arr_right{ right: -3rem;} #s_main{ width: 100%; overflow: hidden;} .s_news{ position: relative; z-index: 1;} .s_news .swiper{ margin: -.5rem;} .s_news .box{ transition: .5s; border-radius: .625rem; margin: .5rem; overflow: hidden;} .s_news .box .img{ border-radius: .625rem .625rem 0 0;} .s_news .box .img:after{ padding-top: 55.46%;} .s_news .box .tag{ position: relative; z-index: 1; display: inline-block; float: right; margin-right: 1.25rem; margin-top: -3rem; padding: 0 1rem; line-height: 1.5625rem; border-radius: 5px; background: #0093dd; color: #fff; font-size: .75rem;} .s_news .box .txt{ padding: 3rem 2rem; border: 1px solid #f3f6f8; background: #fff; border-top: 0; border-radius: 0 0 .625rem .625rem; position: relative;} .s_news .box .txt h4{ font-size: 1.375rem; line-height: 2rem; height: 4rem; margin-bottom: .75rem; color: #000000; font-weight:bold;} .s_news .box .txt p{ font-size: 1.105rem; opacity: .7; line-height: 1.75rem; color: #67728d;} .s_news .box .txt span{ font-size: 1rem; color: #9e9fa1; display: block; margin-top: 1.875rem;} .s_news .box .txt:before{ content: ""; display: block; width: 100%; height: .375rem; position: absolute; left: 0; bottom: 0; background: #ee766d; opacity: 0; visibility: hidden;} .s_news .box:hover{ box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);} .s_news .box:hover .txt:before{ opacity: 1; visibility: visible;} .s_news .btn_more2{ margin-top: 4.875rem;} .s_news .box .tag.tag2{ background: #da251c;} .s_coop{} .s_coop .s_tt{} .s_coop .s_tt h3{ text-align: left;} .s_coop .bd{ overflow: hidden;} .s_coop .str_move>img{display: inline-block; height: 3.75rem; width: 8rem !important; object-fit: contain; margin-left: 6rem;} .dowebok2{ margin-top: 4rem;} .dowebok .item{ display: inline-block;} .dowebok .item img{ display: block; max-width: 6rem; max-height: 3.75rem;} .dowebok .item img:nth-child(even){ margin-left: 6rem; margin-top: 4.5rem;} #foot{ width: 100%; overflow: hidden; padding-top: 4.375rem; background: url(../image/foot_bg.jpg) center no-repeat; background-size: cover; color: #fff;} #foot .box1{ display: flex; justify-content: space-between; } #foot .box1 .left{ width: 40%; flex-shrink: 0;} .foot_lianxi{ font-size: .9375rem; line-height: 1.625rem; margin-top: 1.25rem; opacity: .8;} .foot_lianxi p{ display: flex; margin-bottom: .5rem;} .foot_lianxi p svg{ flex-shrink: 0; margin-right: .5rem; transform: translateY(2px);} .foot_rongyu{ width: 220px; } .foot_nav{ display: flex; flex-grow: 1; justify-content: space-between; margin-right: 3.125rem; } .foot_nav dl{ } .foot_nav dl dt{ font-size: 1.25rem; margin-bottom: 1.5rem; font-weight: bold;} .foot_nav dl dd{} .foot_nav dl dd a{ font-size: 1rem; line-height: 2.25rem; display: block;} .foot_nav dl dd a:hover{ color: #ee766d;} .foot_btn{ display: block; margin-bottom: 1rem; transition: .5s; display: flex; align-items: center; justify-content: center; width: 8.4375rem; height: 3.1875rem; border: 2px solid #fff; border-radius: 26px; } .foot_btn:hover{ border: 2px solid #ee766d; background: #ee766d; color: #fff !important;} #foot .box2{} #foot .box3{ margin-bottom: 2.25rem; gap: 1rem; line-height: 1.5; display: flex; justify-content: space-between; align-items: flex-end; font-size: 1rem; color: rgba(255, 255, 255, 0.45); } #foot a{ transition: .5s;} #foot a:hover{ color: #ee766d;} .copyright{ flex-grow: 1;} .s_float{ position: fixed; z-index: 996; right: 1.5rem; bottom: 10%; border-radius: 1.625rem; width: 3.25rem; height: 3.25rem; transition: .5s; } .s_float .outbox{ position: absolute; left: 0; bottom: 0; width: 100%; height: auto; border-radius: 1.625rem; padding: .25rem 0; transition: .5s; background-image: -moz-linear-gradient( -90deg, #df8280 0%, #70b9e2 100%); background-image: -webkit-linear-gradient( -90deg, #df8280 0%, #70b9e2 100%); background-image: -ms-linear-gradient( -90deg, #df8280 0%, #70b9e2 100%);} .s_float .sbtn{ width: 3.25rem; height: 2.625rem; transition: .5s; } .s_float .sbtn a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .s_float .sbtn svg{ width: 1.625rem; height: 1.625rem;} /* .s_float .sbtn#gotop.hide{ height: 0;} */ /*.s_float:hover{ height: 192px;}*/ /*.s_float:hover .outbox{ padding: .75rem 0;}*/ .headline-bg{ position: absolute; left: 0; bottom: -10rem; width: 100%; height:25rem; } /* canvas#waves{ left: -25%; position: absolute;} */ .n_banner{ height: 48.125rem; width: 100%; overflow: hidden; margin-bottom: 3.875rem; background-size: cover !important;} .n_banner .m{ display: flex; height: 100%; align-items: center; } .n_banner .txt{ max-width: 970px; padding-top: 7rem;} .n_banner h4{ font-size: 4.25rem; line-height: 1; color: #223029; font-weight: bold; margin-bottom: 1.75rem; display: flex; align-items: center;} .n_banner p{ font-size: 1.45rem; line-height: 1.875rem; color: #737576; max-width: 700px; } .n_banner .btn_view{ margin-top: 2.75rem;} .btn_view{ display: flex; align-items: center; justify-content: center; background: #e77d77; font-size: 1.25rem; font-weight:bold; width: 11.5625rem; height: 3.75rem; border-radius: 1.875rem; position: relative; z-index: 1; overflow: hidden; color: #fff;} .btn_view:before{ content: ""; display: block; width: 200%; height: 100%; position: absolute; left: 0; top: 0; transition: .5s; z-index: -1; background-image: -moz-linear-gradient( 0deg, #e77d77 0%, #69bde8 50%, #e77d77 98%); background-image: -webkit-linear-gradient( 0deg, #e77d77 0%, #69bde8 50%, #e77d77 98%); background-image: -ms-linear-gradient( 0deg, #e77d77 0%, #69bde8 50%, #e77d77 98%);} /* .btn_view:hover:before{ left: -100%;} */ .btn_view:hover:before{ opacity: 0;} .n_title {padding: 0;position: relative; z-index: 1;} .n_title:after{ content: ""; display: block; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; background: #e5e5e5;} .n_title .m { position: relative; display: flex; justify-content: space-between; align-items: center;} .position { left: 0;bottom: 0; font-size: .9375rem;color: #747679; display: flex; align-items: center;} .position>svg{ margin-right: 5px;} .position span, .position a, .position i {font-size: .8125rem;color: #828386; flex-shrink: 0; -moz-transition: all 0.36s ease-in-out;-webkit-transition: all 0.36s ease-in-out;-o-transition: all 0.36s ease-in-out;-ms-transition: all 0.36s ease-in-out;transition: all 0.36s ease-in-out;} .position i{margin: 0px .5rem;font-style: normal; width: 8px; height: 8px; } .position span { color: #af1e28;font-style: normal;} .position em { color: #af1e28;font-style: normal;} .position a:hover {color: #af1e28;} .n_nav { position: relative; flex-grow: 1; } .n_nav ul{ display: flex; position: relative; z-index: 1;} .n_nav ul:before{ content: ""; display: block; width: 100%; height: 1px; background: #d1d5d7; position: absolute; left: 0; bottom: 0; z-index: -1;} .n_nav li{ position: relative; z-index: 1; flex-grow: 1;} .n_nav li:before{ content: ""; opacity: 0; visibility: hidden; display: block; width: 100%; height: 3px; position: absolute; left: 0; top: 0; z-index: 1; background-image: -moz-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -webkit-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -ms-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background: #d96d6a;} .n_nav li:after{ content: ""; opacity: 0; visibility: hidden; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1;border-left: 1px solid #d1d5d7; border-right: 1px solid #d1d5d7;} .n_nav li a{ display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: bold; color: #2a292d; line-height: 1.5; text-align: center; padding: 0 2.25rem; height: 5rem; } .n_nav li.on{ background: #fff;} .n_nav li.on a{ color: #d96d6a; /* background: linear-gradient(to right, #d96d6a, #58aedc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; */ } .n_nav li.on:before{ opacity: 1; visibility: visible;} .n_nav li.on:after{ opacity: 1; visibility: visible;} .lc_nav{ background: #fff; position: sticky !important; top: 0; z-index: 995;} .fuwu_container01{} .fw_bd{ display: flex; justify-content: space-between; align-items: center; gap: 5rem;} .fuwu_container01 .left{ width: 50%; padding-bottom: 1rem;} .fuwu_container01 .right{ width: 46%; max-width: 711px;} .fuwu_container01 .fw_bd{ align-items: flex-start;} .fuwu_container01 .right{ position: sticky; top: 7rem;} .fuwu_list{ max-width: 770px;} .fuwu_list ul{} .fuwu_list ul>li{ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05); transition: .5s; border-radius: .625rem; overflow: hidden; background: rgba(255, 255, 255, 0.9);} .fuwu_list ul>li+li{ margin-top: .9375rem;} .fuwu_list ul>li .box{ display: flex; align-items: center; padding: 3rem; position: relative;} .fuwu_list ul>li .ico{ flex-shrink: 0; margin-right: 2rem; display: flex; align-items: center; justify-content: center; width: 5.625rem; height: 5.625rem; border-radius: 50%; border: 1px solid #e2e2e2;} .fuwu_list ul>li .ico img{ width: 3.75rem; display: block;} .fuwu_list ul>li .txt{ flex-grow: 1; } .fuwu_list ul>li .txt h4{ font-size: 1.375rem; color: #2a292d; margin-bottom: .625rem; font-weight:bold;} .fuwu_list ul>li .txt p{font-size: 1.0625rem; line-height: 2rem; color: #67728d;} .fuwu_list ul>li .txt ol{font-size: 1.0625rem; line-height: 1.5rem; color: #67728d;} .fuwu_list ul>li .txt ol li{ list-style: disc; margin-left: 1.125rem;} .fuwu_list ul>li:hover{ box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);} .fuwu_list .box:before{ content: ""; display: block; width: 100%; height: .375rem; position: absolute; left: 0; bottom: 0; background: #ee766d; opacity: 0; visibility: hidden;} .fuwu_list .box:hover:before{ opacity: 1; visibility: visible;} .btnbox{ display: flex; justify-content: center; margin-top:3rem;} .btnbox a+a{ margin-left: 1.25rem;} .btn_size2{ width: 10.9375rem; height: 3.1875rem; font-size: 1rem; display: flex; align-items: center; justify-content: center; border-radius: 1.625rem; font-weight:bold;} .ar_article h3{ line-height: 1.3;} .btn_view2{ border: 1px solid #737373; color: #282728; transition: .5s;} .btn_view2:hover{ border: 1px solid #ee766d; background: #ee766d; color: #fff;} .fuwu_container02{ background: #eef5f9;} .fuwu_container02 .left{ width: 694px; flex-shrink: 0; max-width: 46%;} .fuwu_container02 .right{ max-width: 50%;} .fu_txt{} .fu_txt h5{ font-size: 1.375rem; color: #2a292d; font-weight:bold; margin-bottom: 1.875rem;} .fu_txt h4{ font-size: 1.5rem; color: #50a3cd; font-weight:bold; margin-bottom: 1rem;} .fu_txt p{ font-size: 1.25rem; line-height: 1.5; color: #67728d; } .fuwu_container04 { background: #eef5f9;} .fuwu_container04 .m{ max-width: 1500px;} .fuwu_container04 .left{ max-width: 52%; } .fuwu_container04 .right{ max-width: 44%; } .fuwu_container04 .pic{ flex-grow: 1; margin: 0 -15px; } .fuwu_container04 .bd.reverse{ flex-direction: row-reverse;} .fuwu_container05{ background: url(../image/fw_con05_bg.jpg) center bottom no-repeat; background-size: cover;} .fuwu_container05 .right{ max-width: 569px;} .fuwu_container06{} .fuwu_container06 ul{ display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem;} .fuwu_container06 ul li{ border-radius: 5px; overflow: hidden;} .fuwu_container06 ul li .box{ position: relative; padding: 3.5rem 2.5rem 8rem; height: 100%;} .fuwu_container06 ul li .ico{ margin-left: -.5rem; width: 3.75rem; height: 3.75rem; margin-bottom: 1.25rem; display: flex; align-items: center; } .fuwu_container06 ul li .ico img{} .fuwu_container06 ul li h4{ font-size: 1.5rem; color: #2a292d; font-weight:bold; margin-bottom: 1.5rem;} .fuwu_container06 ul li p{ padding-left: 2.25rem; font-size: 1.0625rem; color: #67728d; line-height: 1.625rem; margin-bottom: 10px; letter-spacing: 1px; background: url(../image/fw_con06_duihao.png) left top no-repeat; background-size: 1.5rem; } .fuwu_container06 ul li .box>img{ position: absolute; right: 2rem; bottom: -10%; max-width: 70%;animation: 20s roll linear infinite paused;} .fuwu_container06 ul li:nth-child(1){ background: #f5f5ff;} .fuwu_container06 ul li:nth-child(2){ background: #fff5f5;} .fuwu_container06 ul li:nth-child(3){ background: #f9f6e8;} .fuwu_container06 ul li:nth-child(4){ background: #f1f7ff;} .fuwu_container06 ul li:hover .box>img{ animation: roll 20s infinite linear normal;} .fuwu_container06 ul li{ transition: .5s;} .fuwu_container06 ul li:hover{ box-shadow: 0px 13px 25px 0px rgba(76, 107, 165, 0.13);} .about_banner{ height: 39.75rem;} .about_banner .m{} .about_banner .txt{ padding-top: 6.5rem; height: 100%; width: 100%; flex-direction: column; display: flex; align-items: center; justify-content: center; text-align: center;} .about_banner .txt h3{ max-width: 80.375rem; font-size: 3.25rem; line-height: 4.5rem;font-family:Franklin-Gothic-Demi-Regular; margin-bottom: 2rem; } .about_banner .txt p{ font-size: 1.45rem; color: #717b95; max-width: 876px; line-height: 2.85rem; } .about_container01{ padding-top: 2rem;} .about_container01 .bd{ display: flex; justify-content: space-between; align-items: center;} .about_container01 .bd .left{ width: 46%;mix-blend-mode: multiply;} .about_container01 .bd .right{ width: 48%; position: relative; padding-right: 3.875rem;} .about_container01 .bd .left img{ display: block; margin-top: 3rem; } .about_video{ position: relative; z-index: 9; border-radius: 1.25rem; overflow: hidden; box-shadow: 0px 11px 27px 0px rgba(0, 0, 0, 0.16);} .about_video:after{} .about_video .mask{ position: absolute; background: rgba(0, 0, 0, 0.2); left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;} .about_container01_bg{ position: absolute; top: -3.375rem; right: 0;} .about_video .btn_play2{ margin-top: 0; transform: none !important;} .about_txt{} .about_txt h5{ font-size: 1.875rem; color: #393939; font-weight:bold; margin-bottom: 1.875rem;} .about_txt h4{ font-size: 1.5rem; color: #50a3cd; font-weight:bold; margin-bottom: 1rem;} .about_txt p{ font-size: 1.25rem; line-height: 2.25rem; } .about_txt h6{ font-size: 1.25rem; line-height: 1.5rem; color: #2a292d; margin-bottom: 2.25rem; } .n_lianxi{ width: 100%; padding-top: 12rem; padding-bottom: 8.5rem; overflow: hidden; background: url(../image/n_lianxi_bg.jpg) center no-repeat; background-size: cover;} .n_lianxi .outbox{ display: flex; justify-content: space-between;} .n_lianxi .outbox .left{ margin-right: 4rem;} .n_lianxi .outbox .right{ max-width: 760px; padding-right: 5rem;} .n_lianxi .txt01{ color: #fff;} .n_lianxi .txt01 h3{ font-size: 2.625rem; line-height: 3.5rem;font-weight:bold; margin-bottom: 17rem; } .n_lianxi .txt01 h4{ font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem;} .n_lianxi .txt01 .con{ font-size: 1.125rem; line-height: 2.75rem;} .n_lianxi .txt01 .con a{ transition: .3s;} .n_lianxi .txt01 .con a:hover{ color: #e77d77;} .n_lianxi .txt02{ color: #fff; margin-bottom: 2.25rem;} .n_lianxi .txt02 h4{ font-weight:bold;font-size: 2.625rem; font-weight:bold; margin-bottom: 2rem; } .n_lianxi .txt02 p{ font-size: 1.0625rem; line-height: 2rem;} .lianxi_form{ display: grid; grid-template-columns: 1fr 1fr; gap: .875rem;} .lianxi_form .group{} .lianxi_form .input{ font-size: 1.0625rem; color: #68728d; width: 100%; height: 3.6875rem !important; background: #fff; border: 1px solid #cdcdd0; border-radius: 5px; padding: 0 1.25rem;} .lianxi_form .group:nth-child(5){ grid-column: 1/3;} .lianxi_form .group:nth-child(6){ grid-column: 1/3; max-width:100%;} .lianxi_form .group:nth-child(7){ grid-column: 1/3;} .lianxi_form textarea.input{ padding-top: 1.25rem; height: 9rem !important;} .lianxi_form .yzmbox{ position: relative;} .lianxi_form .yzmbox .yzm{ position: absolute; right: 5px; top: 5px; bottom: 5px; display: flex; align-items: center; justify-content: center;} .lianxi_form .input::-webkit-input-placeholder{ color: #68728d;} .lianxi_form .button{ width: 13.4375rem; height: 3.625rem; border-radius: 5px; margin-top: 1.75rem; font-size: 1.0625rem;font-family:Swiss721BT-Roman;} .danxuan label {cursor:pointer;margin-left:10px; line-height: 1.125rem; display: flex; font-size: 1rem;} .danxuan label i { flex-shrink: 0; padding: 3px; border-radius: 2px; font-style:normal;display:inline-block;width:1.125rem;height:1.125rem;text-align:center;line-height:18px;color:#fff;border: #ffffff 1px solid;vertical-align:middle;margin:-2px 5px 1px 0px;color:#7d7d7d;position:relative;} .danxuan label i:before{ content:""; width:8px; height:8px; display:block; border-radius:50%; background:none; position:absolute; top:4px; left:4px; } .danxuan input[type="checkbox"],input[type="radio"] {display:none;} .danxuan input[type="radio"] + i {border-radius:50%;} .danxuan input[type="checkbox"]:checked + i,input[type="radio"]:checked + i:before{ background:#d96d6a;border: #d96d6a 1px solid;} .danxuan input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;} .danxuan input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;} .n_coop01{ padding: 4rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1);} .n_coop01 .str_move>img{display: inline-block; width: 6rem; height: 3.75rem; object-fit: contain; margin-left: 6rem;} .n_news{} .n_news ul{ display: grid; grid-template-columns: repeat(3,1fr); gap: 3.75rem;} .n_news ul li{} .n_news .box{ transition: .5s; border-radius: .625rem; display: block;} .n_news .box .img{ border-radius: .625rem .625rem 0 0;} .n_news .box .img:after{ padding-top: 55.46%;} .n_news .box .tag{ position: relative; z-index: 1; display: inline-block; float: right; margin-right: 1.25rem; margin-top: -3rem; padding: 0 1rem; line-height: 1.5625rem; border-radius: 5px; background: #0093dd; color: #fff; font-size: .75rem;} .n_news .box .txt{ padding: 3rem 2rem; position: relative; overflow: hidden; border: 1px solid #f3f6f8; background: #fff; border-top: 0; border-radius: 0 0 .625rem .625rem;} .n_news .box .txt h4{ font-size: 1.375rem; line-height: 1.5rem; height: 3rem; margin-bottom: .75rem; color: #000000; font-weight:bold;} .n_news .box .txt p{ font-size: .9375rem; opacity: .7; line-height: 1.375rem; height: 2.75rem; color: #67728d;} .n_news .box .txt span{ font-size: .875rem; color: #9ea3b3; display: block; margin-top: 1.875rem;} .n_news .box:hover{ box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);} .n_news .btn_more2{ margin-top: 4.875rem;} .n_news .box .tag.tag2{ background: #da251c;} .n_news .box .txt:before{ content: ""; display: block; width: 100%; height: .375rem; position: absolute; left: 0; bottom: 0; background: #ee766d; opacity: 0; visibility: hidden;} .n_news .box:hover .txt:before{ opacity: 1; visibility: visible;} .news_xq_banner{ display: flex; position: relative; z-index: 1; background: url(../image/news_xq_bn_bg.jpg) center no-repeat; background-size: cover;} .news_xq_banner .left{ width: 50%; height: 44.625rem;} .news_xq_banner .right{ position: absolute; right: 0; top: 0; bottom: 0; width: calc(50% + 9rem); display: flex; align-items: center; } .news_xq_banner .img{ width: 100%; height: 100%;} .news_xq_banner .img img{ clip-path: circle(49vw at 0% 50%);} .news_xq_banner .txt{ margin-left: 14rem; max-width: 840px;} .news_xq_banner .txt .m{ padding-left: 0 !important;} .news_xq_banner .txt h4{ font-size: 1.5rem; color: #d6322a; font-weight: bold;} .news_xq_banner .txt h2{ font-size: 3rem; line-height: 3.625rem; color: #060606; font-weight:bold; margin: 1.5rem 0 1.875rem;} .news_xq_banner .txt div{ font-size: 1.125rem; color: #565657; display: flex; align-items: center; flex-wrap: wrap; line-height: 1.5;} .news_xq_banner .txt div span{} .news_xq_banner .txt div i{ font-size: 0; width: 4px; height: 4px; background: #0091dd; border-radius: 50%; margin: 0 9px;} .n_news_xq{} .news_xq_con{ display: flex; align-items: flex-start;} .n_news_xq .left_con{ flex-grow: 1; border-right: 1px solid #e2e4e9; padding-right: 4.5rem;} .n_news_xq .right_con{ width: 26.875rem; flex-shrink: 0; position: sticky; top: 8rem; padding-left: 4rem;} .ar_fot{ margin-top: 9rem;} .ar_fot ul{ display: flex; justify-content: space-between; position: relative; z-index: 1;} .ar_fot ul li{ padding: 1.25rem 0; width: 50%;} .ar_fot ul:before{ content: ""; display: block; width: 50%; position: absolute; z-index: -1; left: 0; top: 0; height: 100%; border-right: 1px solid #e2e4e9; pointer-events: none;} .ar_fot ul li span{ display: block; font-size: 1.125rem; color: #67728d; margin-bottom: 7px;} .ar_fot ul li a{ font-size: 1.125rem; color: #67728d; line-height: 1.5; transition: .3s;} .ar_fot ul li:first-child{ padding-right: 2rem;} .ar_fot ul li+li{ padding-left: 2rem;} .ar_fot ul li a:hover{color: #d6322a;} .news_right{} .news_right .tt{ margin-bottom: 1rem;} .news_right .tt h3{ font-size: 2rem; font-weight:bold;} .news_right ul{} .news_right ul li{ padding-top: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e5e5;} .news_right ul li a{ display: block; position: relative; padding-left: 2.25rem;} .news_right ul li i{ position: absolute; left: 0; top:3px; display: block; width: 16px; height: 16px; border-radius: 50%; background-image: -moz-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); display: flex; align-items: center; justify-content: center; background-image: -webkit-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -ms-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%);} .news_right ul li i:before{ content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; position: absolute; left: 1px; top: 1px;} .news_right ul li i:after{ content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; position: relative; z-index: 9; background-image: -moz-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -webkit-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -ms-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%);} .news_right ul li .txt{} .news_right ul li .txt h4{ font-size: 1.125rem; line-height: 1.625rem; color: #5b5a5f; margin-bottom: .875rem; transition: .3s;} .news_right ul li .txt span{ font-size: .875rem; color: #81848d;} .news_right ul li a:hover .txt h4{ color: #d6322a;} .about_container02{} .about_container02 .m{ max-width: 1870px; padding-left: 0 !important; margin-left: 1rem !important;} .about_container02 .bd{ display: flex; justify-content: space-between; align-items: center;} .about_container02 .bd .left{ width: 55%;mix-blend-mode: multiply;} .about_container02 .bd .right{ width: 40%; position: relative; padding-right: 3.875rem;} .about_container02 .bd .left img{ display: block; margin-top: 3rem; } .about_shuzi{ width: 100%; overflow: hidden; background: url(../image/about_shuzi_bg.jpg) center no-repeat; background-size: cover;} .about_shuzi .bd{ display: flex; color: #fff; gap: 7vw;} .about_shuzi .item{ width: 50%;} .about_shuzi .i{ height: auto; width: 1px; background: rgba(255,255,255,.22); margin: 1.25rem 0;} .about_shuzi .tt{ text-align: center; font-size: 1.5rem; font-weight: bold; margin-bottom: 3rem; } .about_shuzi ul{ display: flex; justify-content: space-between;} .about_shuzi ul li{ display: flex; flex-direction: column; align-items: center; width: 33.333%;} .about_shuzi ul li .ico{ display: flex; align-items: center;justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1rem;} .about_shuzi ul li .ico img{} .about_shuzi ul li .txt{ display: flex; font-size:3rem; font-weight: bold;} .about_shuzi ul li .txt>span{} .about_shuzi ul li .txt>i{} .about_shuzi ul li p{ font-size: .9375rem; margin-top: .75rem;} .n_history{ padding-bottom: 2rem; position: relative; z-index: 1;} .n_history .bg3{ top:60%; z-index: -1;} .n_history .bg3 .bubble{ right: -50%; } .n_history .m{ max-width: 1838px;} .n_history .box{ position: absolute; } .n_history .box .con{ position: relative; padding: 0 2rem 0 1.25rem; } .n_history .box .ico{ margin-bottom: 1.5rem; width: 2.5rem;} .n_history .box .ico img{} .n_history .box .year{ font-size: 3rem; margin-bottom: 1rem; color: #f17c77; font-weight:bold;} .n_history .box .txt{font-size: 15px;margin-right: -1rem;color: #858ea4;line-height: 1.5rem;} .n_history .swiper-slide{height:600px; width: 273px; background-size: 100% !important;} .n_history .swiper-slide:nth-child(6n+1){ background: url(../image/licheng_line_011.png) center no-repeat; } .n_history .swiper-slide:nth-child(6n+2){ background: url(../image/licheng_line_022.png) center no-repeat; } .n_history .swiper-slide:nth-child(6n+3){ background: url(../image/licheng_line_033.png) center no-repeat; } .n_history .swiper-slide:nth-child(6n+4){ background: url(../image/licheng_line_044.png) center no-repeat; } .n_history .swiper-slide:nth-child(6n+5){ background: url(../image/licheng_line_055.png) center no-repeat; } .n_history .swiper-slide:nth-child(6n+6){ background: url(../image/licheng_line_066.png) center no-repeat; } .n_history .swiper-slide:nth-child(6n+1) .box{top: 279px;} .n_history .swiper-slide:nth-child(6n+2) .box{bottom: 223px;} .n_history .swiper-slide:nth-child(6n+3) .box{top: 230px;} .n_history .swiper-slide:nth-child(6n+4) .box{bottom: 272px;} .n_history .swiper-slide:nth-child(6n+5) .box{top: 251px;} .n_history .swiper-slide:nth-child(6n+6) .box{bottom: 267px;} .n_history .swiper-scrollbar{ position: relative !important; max-width: 51.25rem; margin: 0 auto; margin-top: 5rem; height: 3px;} .n_history .swiper-scrollbar-drag{background-image: -moz-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -webkit-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -ms-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%);} .lc_dot{ width: 1px; height: 1px; position: absolute; left: 1rem; padding: 20px;} .lc_dot:before{ content: ""; display: block; width: 2.5rem; height: 2.5rem; background: url(../image/lc_dot.png) center no-repeat; background-size: contain; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .n_history .swiper-slide:nth-child(odd) .box .lc_dot{ top: 0; } .n_history .swiper-slide:nth-child(even) .box .lc_dot{ bottom: 0; } .n_history .swiper-slide:nth-child(odd) .con{ padding-top:5rem;} .n_history .swiper-slide:nth-child(even) .con{ padding-bottom: 5rem;} .lichengbox{ margin: -5rem 0; mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0% , rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0% , rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);} .n_history_wap{ display: none;} .n_history_wap .bd{ position: relative; z-index: 1;} .n_history_wap .bd:before{ content: ""; display: block; position: absolute; z-index: -1; opacity: .2; left: 19px; top: 0; height: 100%; width: 2px; background-image: -moz-linear-gradient( 270deg, #d96d6a 0%, #58aedc 100%); background-image: -webkit-linear-gradient( 270deg, #d96d6a 0%, #58aedc 100%); background-image: -ms-linear-gradient( 270deg, #d96d6a 0%, #58aedc 100%);} .n_history_wap .box+.box{ margin-top: 1.75rem; } .n_history_wap .box .con{ position: relative; padding-left: 4rem; padding-top: .5rem; } .n_history_wap .box .ico{ margin-bottom: .5rem; width: 2rem;} .n_history_wap .box .lc_dot{ left: 0; top: 0 !important; background: #fff;} .n_history_wap .box .ico img{} .n_history_wap .box .year{ font-size: 2rem; margin-bottom: .5rem; color: #f17c77; font-weight:bold;} .n_history_wap .box .txt{ font-size: .9375rem; color: #858ea4; line-height: 1.25rem;} .n_honor{ position: relative; z-index: 7;} .n_honor .bd{ display: flex; gap: 8rem;} .n_honor .left{} .n_honor .right{ width: 32.875rem; flex-shrink: 0;} .n_honor .left img{ margin-top: 2rem;} .honor_slide{ position: relative; z-index: 1; margin-top: -1rem;} .honor_slide .box{ display: flex; justify-content: center; padding:1rem 3rem 3rem;} .honor_slide .box .img{ width: 20.625rem;} .honor_slide .box .img:after{ padding-top: 141.5%;} .honor_slide .arr{ position: absolute; width: 2.25rem; height: 2.25rem; z-index: 9; cursor: pointer; top: 50%; transform: translateY(-50%);} .honor_slide .arr_left{ left: 0;} .honor_slide .arr_right{ right: 0;} .honor_slide .arr path{ fill: #595a5b;} .honor_slide .arr:hover path{ fill: #f17c77;} .n_wenhua{ position: relative; z-index: 11;} .n_wenhua .bd{ display: grid; grid-template-columns: .55fr .45fr; column-gap: 5rem; row-gap: 5rem;} .n_wenhua .item:nth-child(2){ align-self: center;} .wenhua_slide{position: relative;border-radius: 0 16.0625rem 16.0625rem 0;overflow: hidden;margin-left: -180px;box-shadow: 0px 11px 27px 0px rgba(0, 0, 0, 0.16);align-self: center;} .wenhua_slide .img{ height: 33.25rem; } .n_wenhua .item{ display: flex;} .n_wenhua .item .ico{ flex-shrink: 0; width: 3.9375rem; height: 3.9375rem; margin-right: 1.875rem;} .n_wenhua .item .ico img{} .n_wenhua .item h4{ font-size: 1.875rem; color: #393939; font-weight:bold; margin-bottom: .25rem; } .n_wenhua .item .txt{ font-size: 1.0625rem; color: #858ea4; } .n_wenhua .item .txt p{ line-height: 1.7; font-size: 1.105rem;} .n_wenhua .item .txt ul{} .n_wenhua .item .txt ul li{} .n_wenhua .item .txt ul li:before{ content: ""; display: inline-block; margin-right: 1rem; vertical-align: middle; width: 1.1875rem; height: 1.1875rem; background: url(../image/duihao.png) center no-repeat; background-size: contain;} .wenhua_slide .swiper-pagination{ width: auto; left: auto; right: 6.5rem; bottom: auto; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column;} .wenhua_slide .swiper-pagination .swiper-pagination-bullet{ margin: 7px 0; width: 9px; height: 9px; background: transparent; border: 2px solid #fff; opacity: 1;} .wenhua_slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #fff;} .lefttxt{} .lefttxt h3{ font-size: 2.625rem; font-weight:bold; margin-bottom: 3.25rem;} .lefttxt .txt{} .lefttxt ul{ margin-left: -1.5rem;} .lefttxt ul li{ display: flex; font-size: 1.0625rem; border-radius: 3px; color: #858ea4; font-weight: bold; padding: 1.25rem 1.5rem; transition: .5s;} .lefttxt ul li .ico{ width: 2rem; height: 1.75rem; flex-shrink: 0; margin-right: 1.75rem; display: flex; align-items: center; justify-content: center;} .lefttxt ul li .ico img{} .lefttxt ul li p{ line-height: 1.75rem; font-size: 1.105rem;;} .lefttxt ul li p span{ color: #6dbbe5; font-style: italic;} .lefttxt ul li:hover{ box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.13);} .n_team .m{ display: flex; align-items: center; justify-content: space-between;} .n_team .m .left{ width: 47%;} .n_team .m .right{ width: 47%;} .n_team .about_txt h5{ font-size: 2.625rem; color: #2a292d;} .n_team ul+ul{ margin-top: 2.5rem;} .n_team ul{ justify-content: center; display: flex; flex-wrap: wrap; row-gap: 2.5rem;} .n_team ul li{ width: 25%;} .n_team ul li .box{ display: flex; justify-content: center;} .n_team ul li .img{ border-radius: 50%; width: 6.125rem; box-shadow: 0px 11px 20px 0px rgba(0, 0, 0, 0.16); overflow: hidden; transition: .5s;} .n_team ul li .img:after{ padding-top: 100%;} .n_team ul li .img img{ transform: none;} .n_team ul li .box:hover .img{ box-shadow: 0px 11px 20px 0px rgba(0, 0, 0, 0.3);} .about_form{ position: relative; z-index: 9;} .about_form form{ display: grid; grid-template-columns: 1fr 1fr; width: 55.875rem; margin: 0 auto; gap: 1.25rem 1.5rem; } .about_form form .group{ height: 54px; border-radius: 27px; position: relative; z-index: 1; background-image: -moz-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -webkit-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -ms-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%);} .about_form form .group:before{ content: ""; display: block; position: absolute; z-index: -1; border-radius: 25px; left: 2px; top: 2px; right: 2px; bottom: 2px; background: #fff;} .about_form form .group .input{ height: 50px; width: 100%; padding: 0 2.25rem; font-size: .9375rem; color: #858ea4; } .about_form form .group.textareabox{ height: 4.8125rem; grid-column: 1/3; border-radius: 2.5rem;} .about_form form .group.textareabox:before{ border-radius: 2.5rem;} .about_form form .group.selectbox{ z-index: 9;} textarea{ width: 100%; background: none;} .about_form form .group .input::-webkit-input-placeholder{ color: #858ea4;} .about_form .select-down{ right: 1.5rem;} .about_form form .group textarea.input{ padding-top: 1.125rem; width: 100%;} .about_form form .yzmbox{ position: relative; } .about_form form .yzmbox .yzm{ position: absolute; border-radius: 0 20px 20px 0; overflow: hidden; right: 10px; top: 2px; bottom: 2px; display: flex; align-items: center; justify-content: center;} .about_form form .button{ width: 8.6875rem; height: 3rem; border-radius: 1.5rem; color: #fff; font-size: 1rem; align-self: flex-end; display: flex; align-items: center; justify-content: center; background-image: -moz-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -webkit-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -ms-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%);} .fangan_banner{ height: 49.875rem; width: 100%; overflow: hidden; background-size: cover !important;} .fangan_banner .m{ display: flex; height: 100%; align-items: center; } .fangan_banner .txt{ max-width: 1027px; padding-top: 7rem;} .fangan_banner h4{ font-size: 4.375rem; line-height: 1; color: #fff; font-weight: bold; margin-bottom: 1.75rem; align-items: center;} .fangan_banner p{ font-size: 1.25rem; line-height: 2rem; color: #fff; max-width: 740px; } .fangan_banner .btn_view3{ margin-top: 3.25rem;} .btn_view3{ display: flex; align-items: center; justify-content: center; font-size: 1.0625rem; font-weight:bold; width: 11.5625rem; height: 3rem; border-radius: 1.5rem; position: relative; z-index: 1; overflow: hidden; color: #fff; background: #f08b86;} .btn_view3:before{ content: ""; display: block; width: 200%; height: 100%; position: absolute; left: 0; top: 0; transition: .5s; z-index: -1; background-image: -moz-linear-gradient( 0deg, #e77d77 0%, #e77d77 50%, #69bde8 98%); background-image: -webkit-linear-gradient( 0deg, #e77d77 0%, #e77d77 50%, #69bde8 98%); background-image: -ms-linear-gradient( 0deg, #e77d77 0%, #e77d77 50%, #69bde8 98%); } /* .btn_view3:hover:before{ left: -100%;} */ .btn_view3:hover:before{ opacity: 0;} .solution_con01{} .solution_con01 .bd{ display: flex; justify-content: space-between; align-items: flex-start; padding-top: 3rem;} .solution_con01 .left{ width: 47%;} .solution_con01 .right{ width: 47.5%; } .solution_con01 .right .right_bg{ position: absolute; right: 0; top: -3rem; z-index: -1;} .solution_txt{ max-height: 35rem;} .solution_txt ul{} .solution_txt ul li{ margin-bottom: 1.875rem;} .solution_txt ul li:last-child{ margin-bottom: 0 !important;} .solution_txt ul li .box{ display: flex;} .solution_txt ul li .ico{ flex-shrink: 0; width: 2.875rem; height: 2.875rem; margin-right: 2.5rem; display: flex; align-items: center; justify-content: center;} .solution_txt ul li .ico img{padding:0.2rem;} .solution_txt ul li .txt{} .solution_txt ul li .txt h4{ font-size: 1.4375rem; line-height: 2.25rem; color: #0093dd; font-weight: bold; margin-bottom: .5rem; } .solution_txt ul li .txt p{ font-size: 1.25rem; color: #67728d; line-height: 1.8rem;} .solution_con01 .right .imgbox{ position: relative; z-index: 1; padding-right: 3rem;} .solution_con01 .right .img{ position: relative; max-width: 667px; border-radius: 1.25rem; box-shadow: 0px 7px 27px 0px rgba(0, 0, 0, 0.3);} .solution_con02{ background: #eef5f9;} .solution_con02 .bd{ display: flex; justify-content: space-between; } .solution_con02 .bd+.bd{ margin-top: 4rem;} .solution_con02 .bd:nth-child(even){ flex-direction: row-reverse;} .solution_con02 .bd .left{ width: 47%; } .solution_con02 .bd .right{ width: 47%; display: flex; align-items: center;} .solution_con02 .ar_article h3{ line-height: 1.3;} .solution_video{ position: relative; height: 27.125rem; z-index: 9; border-radius: 1.25rem; overflow: hidden; box-shadow: 0px 7px 27px 0px rgba(0, 0, 0, 0.3);} .solution_video:after{} .solution_video .mask{ position: absolute; background: rgba(0, 0, 0, 0.4); left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;} .solution_video .btn_play2{ margin-top: 0; width: 5.5rem; height: 5.5rem; transition: .5s;} .solution_video .btn_play2:before{ border-radius: 50%; transition: .5s;} .solution_video .btn_play2 svg{ width: 1.5rem; height: 1.5rem; } .btn_play2:hover:before{ transform: scale(.8);} .solution_con02 .scrollbox{ max-height: 35rem;} .solution_con02_slide{ margin-top: 4.625rem; position: relative;} .solution_con02_slide .swiper{ display: flex; justify-content: center;} .solution_con02_slide .swiper-wrapper { width: auto; max-width: 100%; } .solution_con02_slide .box{} .solution_con02_slide .ico{ width: 3.125rem; height: 3.125rem; display: flex; align-items: center; justify-content: center;} .solution_con02_slide .ico img{} .solution_con02_slide h4{ font-size: 1.375rem; font-weight:bold; margin-top: 1.5rem; margin-bottom: 1rem;} .solution_con02_slide p{ font-size: 1.25rem; color: #67728d; line-height: 1.75rem;} .solution_con02_slide .arr{ position: absolute; width: 2.25rem; height: 2.25rem; z-index: 9; cursor: pointer; top: 50%; transform: translateY(-50%);} .solution_con02_slide .arr_left{ left: -4.75rem;} .solution_con02_slide .arr_right{ right: -4.75rem;} .solution_con02_slide .arr path{ fill: #67728d;} .solution_con02_slide .arr:hover path{ fill: #e77d77;} .solution_con02 .ar_article{ line-height: 2.25rem; font-size: 1.25rem;} .solution_con02 .ar_article h4{ margin-bottom: 0 !important;} .solution_con03{} .solution_con03 .bd{ display: flex; justify-content: space-between;} .solution_con03 .left{ width: 45%;} .solution_con03 .right{ width: 49%;} .solution_slide_tgl{ position: relative; z-index: 1; padding: 3.25rem 0;} .solution_slide_tgl:before{ content: ""; display: block; position: absolute; top: 0; z-index: -1; width: 4px; height: 100%; left: 1.75rem; margin-left: -2px; background-image: -moz-linear-gradient( 90deg, transparent 0%, #d2dff4 10%, #d2dff4 90%, transparent 100%); background-image: -webkit-linear-gradient( 90deg, transparent 0%, #d2dff4 10%, #d2dff4 90%, transparent 100%); background-image: -ms-linear-gradient( 90deg, transparent 0%, #d2dff4 10%, #d2dff4 90%, transparent 100%); } .solution_slide_tgl dl+dl{ margin-top: 1.25rem; } .solution_slide_tgl dt{ display: flex; align-items: center; margin-bottom: .25rem; cursor: pointer;} .solution_slide_tgl dt .ico{ width: 3.5rem; height: 3.5rem; flex-shrink: 0; margin-right: 1.875rem; border-radius: 50%; background: #eef5f9; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;} .solution_slide_tgl dt .ico:before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; background: #a1b2cd; border-radius: 50%; transform: scale(.8);} .solution_slide_tgl dt .ico:after{ opacity: 0; visibility: hidden; content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; border-radius: 50%; transform: scale(.8); background-image: -moz-linear-gradient( 0deg, #e77d77 0%, #69bde8 98%); background-image: -webkit-linear-gradient( 0deg, #e77d77 0%, #69bde8 98%); background-image: -ms-linear-gradient( 0deg, #e77d77 0%, #69bde8 98%); } .solution_slide_tgl dt .ico img{ width: 20px; height: 20px;} .solution_slide_tgl dt h4{ font-size: 1.4375rem; font-weight: bold; color: #2a292d; } .solution_slide_tgl dd{ padding-left: 5.375rem; font-size: 1.15rem; line-height: 1.75rem; color: #67728d; display: none;} .solution_slide_tgl dl dt.on .ico:after{ opacity: 1; visibility: visible;} .solution_slide_tgl dl dt.on h4{ color: #0093dd;} .slide_for{ position: relative;} .slide_for .li{ position: relative; transition: .2s; opacity: 1; visibility: visible;} .slide_for .li+.li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .slide_for .li.hide{ opacity: 0; visibility: hidden;} .slide_for2{ position: relative;} /* .slide_for2 .li2{ position: relative; transition: .2s; opacity: 1; visibility: visible;} .slide_for2 .li2+.li2{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .slide_for2 .li2.hide{ opacity: 0; visibility: hidden;} */ .slide_for4{ position: relative;} /* .slide_for4 .li{ position: relative; transition: .2s; opacity: 1; visibility: visible;} .slide_for4 .li+.li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .slide_for4 .li.hide{ opacity: 0; visibility: hidden;} */ .tgl_nav { position: relative; flex-grow: 1; margin-bottom: 5rem; } .tgl_nav ul{ display: flex; justify-content: center; position: relative; z-index: 1;} .tgl_nav ul:before{ content: ""; display: block; width: 100%; height: 1px; background: #d1d5d7; position: absolute; left: 0; bottom: 0; z-index: -1;} .tgl_nav li{ position: relative; z-index: 1;} .tgl_nav li:before{ content: ""; opacity: 0; visibility: hidden; background: #66beeb; display: block; width: 100%; height: 3px; position: absolute; left: 0; top: 0; z-index: 1; /* background-image: -moz-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -webkit-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); background-image: -ms-linear-gradient( 0deg, #d96d6a 0%, #58aedc 100%); */ } .tgl_nav li:after{ content: ""; opacity: 0; visibility: hidden; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1;border-left: 1px solid #d1d5d7; border-right: 1px solid #d1d5d7;} .tgl_nav li a{ display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #2a292d; font-weight: bold; line-height: 1.5; text-align: center; padding: 0 3.5rem; height: 4.375rem; } .tgl_nav li.on{ background: #fff;} .tgl_nav li.on a{ color: #66beeb; /* background: linear-gradient(to right, #d96d6a, #58aedc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; */ } .tgl_nav li.on:before{ opacity: 1; visibility: visible;} .tgl_nav li.on:after{ opacity: 1; visibility: visible;} .solution_con04_01{ display: flex;} .solution_con04_01 .slide_nav2{ width: 21.625rem; flex-shrink: 0; margin-right: 7.875rem;} .slide_nav2 .s_tt h3{ text-align: left; padding-left: .5rem;} .solution_con04_01 .slide_nav2 ul{} .solution_con04_01 .slide_nav2 ul li{ margin-top: 1.25rem;} .solution_con04_01 .slide_nav2 ul li a{ transition: .3s; font-size: 1.25rem; border-radius: 2.5rem; color: #2a292d; display: flex; align-items: center; padding: 1rem 1.875rem; height: 100%; min-height: 4.375rem; font-weight: 700;} .solution_con04_01 .slide_nav2 ul li.on a{ color: #fff; background: #66beeb;} .solution_con04_01 .slide_for2{ flex-grow: 1;} .solution_con04 .li .ar_article{ padding: 0 2rem;} .solution_con04 .li.solution_con04_01 .ar_article{ padding: 0;} .solution_con04 .li,.solution_con04 .li2{ background: #fff;} .solution_con04 .hd{ background: #eef5f9; padding: 3rem 15px; margin-bottom: 5.25rem; position: relative;} .solution_con04 .hd:before{ content: ""; display: block; width: 0; height: 0; position: absolute; border: 2.5rem solid transparent; border-top: 1.5rem solid #eef5f9; left: 50%; transform: translateX(-50%); top: 100%;} .solution_con04 .hd .s_tt{ margin-bottom: 0;} .solution_con04 .hd .s_tt h3{ font-size: 2.25rem;} .n_client{ position: relative; z-index: 1;} .n_client .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover !important;} .n_client .box{ height: 47.25rem; max-width: 720px; margin-left: 2rem; display: flex; align-items: center; color: #fff;} .n_client .arr{ position: absolute; width: 2.25rem; height: 2.25rem; z-index: 9; cursor: pointer; top: 50%; transform: translateY(-50%);} .n_client .arr path{ fill: #fff;} .n_client .arr_left{ left: 5.75rem;} .n_client .arr_right{ right: 5.75rem;} .n_client .box .s_tt h3{ color: #fff; text-align: left;} .n_client .box .txt{ opacity: 0; position: relative; z-index: 1; font-size: 1.25rem; line-height: 1.75rem;max-width: 49rem; /* padding: 2.25rem 3.25rem 1rem; */ } .n_client .box .txt .scrollbox{ max-height: 8.75rem;line-height: 2.25rem;} /* .n_client .box .txt:before{ content: ""; display: block; position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.625rem; background: url(../images/client_yinhao01.png) center no-repeat; background-size: contain;} .n_client .box .txt:after{ content: ""; display: block; position: absolute; right: 0; bottom: 0; width: 1.75rem; height: 1.625rem; background: url(../images/client_yinhao02.png) center no-repeat; background-size: contain;} */ .n_client .clientinfo{ opacity: 0; display: flex; padding-left: 3.25rem; margin-top: 1.625rem; display: none;} .n_client .clientinfo .ico{ flex-shrink: 0; width: 50px; height: 50px; margin-right: 1.375rem; border-radius: 50%; border: 2px solid #fff; overflow: hidden;} .n_client .clientinfo .ico img{ display: block; width: 100%; height: 100%;} .n_client .clientinfo h5{ font-size: 1.0625rem; line-height: 1.625rem; } .n_client .clientinfo p{ font-size: 1.0625rem;line-height: 1.625rem;} .n_client .swiper-slide.swiper-slide-active .txt{ animation: enter 1.2s forwards .1s;} .n_client .swiper-slide.swiper-slide-active .clientinfo{ animation: enter 1.2s forwards .2s;} .scrollbox{ overflow: auto; padding-right: 5px; margin-right: -5px;} .n_solution_computer{ background: #eef5f9; position: relative; z-index: 1;} .n_solution_computer .bd{ display: flex; flex-direction: column; align-items: center; justify-content: center;} .computerbox{ position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 10%;} .quxian{ position: absolute; left:50%; top: 50%; transform: translateY(-50%) translateX(-51%); } .computerbox .computer{position: relative;z-index: 99; pointer-events: none;} .computerbox .computer_slide{position: absolute;z-index: 95;width: 78%;left: 50%;top: 4%;transform: translateX(-50%);height: 86%; background: #fff;} .computerbox .arrbox{ display: flex; align-items: center; justify-content: center; gap: 10px;} .computerbox .arrbox .arr{ box-shadow: 0px 13px 9px 0px rgba(48, 117, 224, 0.09); display: block; width: 3.5625rem; height: 3.5625rem; border-radius: 50%; margin-top: 2.5rem; cursor: pointer; transition: .5s;} .computerbox .arrbox .arr_left{ background: url(../image/computer_left.png) center no-repeat; background-size: contain !important;} .computerbox .arrbox .arr_right{ background: url(../image/computer_right.png) center no-repeat; background-size: contain !important;} .computerbox .arrbox .arr_left:hover{ background: url(../image/computer_left_on.png) center no-repeat;} .computerbox .arrbox .arr_right:hover{ background: url(../image/computer_right_on.png) center no-repeat;} .n_solution_computer .box{ position: relative;} .n_solution_computer .box img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain;} .n_solution_computer .box:before{content: "";display: block;width: 100%;height: 0;padding-top: 60%;} .n_solution_computer .box .mask{ position: absolute; opacity: 0; visibility: hidden; padding-top: 6rem; transition: .5s; padding: 3rem; background: rgba(0, 0, 0, 0.6); color: #fff; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;} .n_solution_computer .box .mask h4{ font-size: 2rem; line-height: 1.5; margin-bottom: 1.5rem; font-weight:bold;} .n_solution_computer .box .mask p{ font-size: 1.25rem; line-height: 1.7; color: rgba(255,255,255,0.8);} .n_solution_computer .box:hover .mask{ opacity: 1; visibility: visible; padding-top: 0;} .n_solution_computer .btn_view3{ margin-top: 2rem; text-transform: uppercase;} .n_story{} .n_story .box{ display: block; position: relative; z-index: 1; border-radius: .625rem; overflow: hidden;} .n_story .box .img{} .n_story .box .img img{} .n_story .box .txt{ padding: 0 3.3125rem; background: rgba(0, 0, 0, 0.4); color: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;} .n_story .box .txt h4{ font-size: 1.75rem; font-weight:bold; margin-bottom: 2rem; } .n_story .box .txt p{ font-size: 1.125rem; line-height: 1.8rem; height: 3.25rem;} .n_story .box .txt i{ width: 1.125rem; height: 1.125rem; transition: .5s; background: url(../image/arr_tr.svg) center no-repeat; background-size: 1.125rem; margin-top: 3.75rem;} .n_story .box:hover .txt i{ transform: translateY(-1rem) translateX(1rem);} .n_story .box:hover .img img{ transform: scale(1.05);} .n_story .swiper{ display: flex; justify-content: center;} .n_story .swiper-wrapper{ width: auto; max-width: 100%;} .n_story .top_btn{ position: absolute; right: 2rem; bottom: 2rem; width: 9rem;} .n_story .swiper-pagination{ position: relative; margin-top: 2.5rem; bottom: 0 !important;} .n_story .swiper-pagination .swiper-pagination-bullet{ width:13px; height: 13px; margin: 0 6.5px !important; border-radius: 50%; border-radius: 50%; border: 1px solid #000000; background: none; opacity: 1;} .n_story .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ border: 1px solid #000000; background: #000000;} .about_coop{ padding-top: 0;} .about_coop .bd{ border-top: 1px solid #ededed; padding-top: 3.75rem;} #about_news .bg3{ top:60%; z-index: -1;} #about_news .bg3 .bubble{ right: -50%; } .n_team{ position: relative; z-index: 1;} .n_team .bg5{ z-index: -1; top: 40%;} .n_team .bg5 .bubble{ right: auto; left: -50%;} .tc_story{ width: 75rem; max-width: 90%; background: #fff; border-radius: .625rem; padding: 5rem; position: relative;} .tc_story .tt{ font-size: 1.75rem; margin-bottom: 1.75rem; color: #2a292d; line-height: 1.3; font-weight:bold;} .tc_story .img{ width: 19.75rem; border-radius: 50%; margin: 2rem auto 0;} .tc_story .img:after{ padding-top: 100%;} .tc_story .con{ font-size: 1.0625rem; line-height: 1.625rem; color: #67728d; overflow: auto;} .tc_story .tc_close{ display: block; right: 1.875rem; top: 1.875rem; width: 2.0625rem; height: 2.0625rem; background: url(../image/close.png) center no-repeat; background-size: contain;} .fa_tagbox{ display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .fa_tagbox span{font-size: 1rem; color: #fff; line-height: 1.75rem; transition: .5s; padding: 0 1.125rem; border-radius: 1rem; border: 1px solid #fff;} .fa_tagbox span:hover{ border: 1px solid #e77d77; background: #e77d77;} .pro_bnner{ height: 48.125rem;} .pro_bnner p{ font-size: 1.25rem; margin-bottom: 3rem;} .pro_con01{ background: #eef5f9; padding: 4.5rem 0;} .pro_con01 .bd{ position: relative;} .pro_con01 .bd .arr{ position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;} .pro_con01 .bd .arr svg{ width: 2.875rem; height: 2.875rem;} .pro_con01 .bd .arr svg path{ fill: #67728d;} .pro_con01 .bd .arr_left{ left: -4.25rem;} .pro_con01 .bd .arr_right{ right: -4.25rem;} .pro_con01 .bd .arr:hover path{ fill: #e77d77;} .pro_con01 .bd .box{ display: flex;} .pro_con01 .bd .box .ico{ width: 7.3125rem; height: 7.3125rem; margin: .625rem; transition: .5s; margin-right: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(0,0,0,.05); flex-shrink: 0;} .pro_con01 .bd .box .ico img{ width: 3.5rem; height: 3.5rem;} .pro_con01 .bd .box .txt{ padding-top: 1rem;} .pro_con01 .bd .box .txt h4{ font-size: 1.5rem;font-weight:bold; color: #2a292d; font-weight: bold; text-transform: uppercase; margin-bottom: 1.5rem;} .pro_con01 .bd .box .txt p{ font-size: 1.15rem; color: #67728d; line-height: 1.75rem;} .pro_con01 .bd .box:hover .ico{ box-shadow: 0px 3px .625rem 0px rgba(107, 109, 111, 0.3);} .pro_video{ position: relative; z-index: 9; border-radius: 1.25rem; overflow: hidden; box-shadow: 0px 7px 27px 0px rgba(0, 0, 0, 0.3);} .pro_video:after{} .pro_video .mask{ position: absolute; background: rgba(0, 0, 0, 0.2); left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;} .pro_video .btn_play2{ margin-top: 0; width: 5.5rem; height: 5.5rem; transform: none;} .pro_video .btn_play2:before{ border-radius: 50%; transition: .5s;} .pro_video .btn_play2 svg{ width: 1.5rem; height: 1.5rem;} .pro_video .btn_play2:hover:before{ transform: scale(.8);} .pro_con02{} .pro_con02 .item{ display: flex; justify-content: space-between;} .pro_con02 .item+.item{ margin-top: 6rem;} .pro_con02 .item .imgbox{ flex-shrink: 0; width: 43.75%;} .pro_con02 .item .txt{ flex-shrink: 0; width: 49.375%; display: flex; align-items: center;} .pro_con02 .item .txt h4{ font-size: 2rem; color: #2a292d; font-weight:bold; margin-bottom: 2.25rem;} .pro_con02 .item .txt p{ font-size: 1.25rem; color: #67728d; line-height: 2rem;} .pro_con02 .item:nth-child(even){ flex-direction: row-reverse;} .pro_con03{ background: #eef5f9;} .pro_con03 .s_tt{} .pro_con03 .s_tt p{ font-size: 1.25rem; line-height: 2rem; color: #2a292d; max-width: 1040px; margin: 0 auto; margin-top: 2rem;} .slide_for3{ position: relative;} .slide_for3 .li{ position: relative; transition: .2s; opacity: 1; visibility: visible;} .slide_for3 .li+.li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .slide_for3 .li.hide{ opacity: 0; visibility: hidden;} .pro_con03{} .pro_con03 .bd{ display: flex; justify-content: space-between; align-items: flex-start; } .pro_con03 .bd .left{ width: 40.625%;} .pro_con03 .bd .right{ width: 53.25%; } .pro_con03 .bd .right{ width: 53.25%; position: relative; margin-bottom: 2rem; } /* .pro_con03 .bd .right:before{ content: ""; display: block; width: 100%; height: 0; padding-top: 58.1%;} */ .pro_con03 .bd .right .ipadbox{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .pro_con03 .bd .right .ipad{ position: relative;} .img_ipad img{ padding: 1rem 1.125rem 1rem;} .img_ipad:after{ padding-top: 58% !important;} .pro_con03 .right h4{ text-align: center; font-size: 1.125rem; color: #2a292d; margin-top: 1.75rem; line-height: 1.5;} .ipad{ position: absolute; z-index: 9; width: 100%; height: auto; pointer-events: none; border-radius: 1rem;} .slide_nav3{} .slide_nav3 ul{} .slide_nav3 ul li+li{ margin-top: 2.5rem;} .slide_nav3 ul li{ padding-left: 2.5rem; position: relative;} .slide_nav3 ul li i{ display:block; width: 1.25rem; height: 1.25rem; position: absolute; left: 0; top: .375rem;} .slide_nav3 ul li i:before{ content: ""; display: block; width: 100%; height: 2px; background: #75757a; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: .5s; } .slide_nav3 ul li i:after{ content: ""; display: block; width: 100%; height: 2px; background: #75757a; position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(90deg); transition: .5s; } .slide_nav3 ul li .dt{ font-size: 1.4375rem; line-height: 1.5; color: #2a292d; transition: .5s; font-weight: bold; cursor: pointer;} .slide_nav3 ul li .dd{ font-size: 1.0625rem; color: #67728d; line-height: 1.75rem; display: none; padding-top: 1.75rem;} .slide_nav3 ul li.on i:before{ background: #5db0dc;} .slide_nav3 ul li.on i:after{ background: #5db0dc; transform: translateY(-50%) rotate(0deg);} .slide_nav3 ul li.on .dt{ color: #5db0dc;} .pro_con03 .swiper-pagination{ position: relative; margin-top: 1.5rem; bottom: 0 !important;} .pro_con03 .swiper-pagination .swiper-pagination-bullet{ width:12px; height: 12px; margin: 0 6.5px !important; border-radius: 50%; border-radius: 50%; border: 1px solid #000000; background: none; opacity: 1;} .pro_con03 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ border: 1px solid #000000; background: #000000;} .pro_con03 .mask{ position: absolute; border-radius:1rem; overflow: hidden; background: rgba(0, 0, 0, 0.4); left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;} .pro_con03 .btn_play2{ margin-top: 0; width: 5.5rem; height: 5.5rem; transition: .5s;} .pro_con03 .btn_play2:before{ border-radius: 50%; transition: .5s;} .pro_con03 .btn_play2 svg{ width: 1.5rem; height: 1.5rem; } .btn_play2:hover:before{ transform: scale(.8);} .pro_con04{} .pro_con04 .bd{ display: flex; justify-content: space-between;} .pro_con04 .bd .left{ width: 53.25%; position: relative; border-radius: 1.25rem; overflow: hidden;} .pro_con04 .bd .right{ width: 40.625%; display: flex; align-items: center;} .pro_con04 .bd .right .ar_article{ width: 100%;} .pro_con04 .bd .right .ar_article table{ margin-top: 1rem;} .pro_con04 .bd .right .ar_article td, .pro_con04 .bd .right .ar_article th{ padding: 5px 0;} .pro_con05{ background: #eef5f9;} .pro_con05 .s_tt{ margin-bottom: 1.5rem;} .pro_con05 .s_tt h3{ text-align: left;} .pro_con05 .bd{ display: flex; justify-content: space-between;} .pro_con05 .left{ width: 48%;} .pro_con05 .right{ width: 48%;} .pro_con05 ul{ display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem 1.75rem;} .pro_con05 ul li{ box-shadow: 0px 3px 8px 0px rgba(107, 109, 111, 0.3); border-radius: .625rem; overflow: hidden; } .pro_con05 ul li .box{ display: block; position: relative; padding: 3.125rem 2.25rem; height: 100%; width: 100%;} .pro_con05 ul li .ico{ transition-delay: .2s; width: 4.375rem; height: 4.375rem; margin-bottom: 1.5rem; transition: .5s;} .pro_con05 ul li .ico img{} .pro_con05 ul li h4{ transition-delay: .2s; font-size: 1.5rem; line-height: 2.25rem; color: #2a292d; font-weight:bold; transition: .5s;} .pro_con05 ul li .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #eef5f9; padding: 2.5rem 2.25rem; font-size: 1.0625rem; line-height: 1.75rem; color: #67728d; opacity: 0; visibility: hidden; transition: .6s; } .pro_con05 ul li .mask:before{ content: ""; display: block; width: 100%; height: 7px; position: absolute; left: 0; top: 0; background-image: -moz-linear-gradient( 180deg, #d96d6a 0%, #58aedc 100%); background-image: -webkit-linear-gradient( 180deg, #d96d6a 0%, #58aedc 100%); background-image: -ms-linear-gradient( 180deg, #d96d6a 0%, #58aedc 100%); } .pro_con05 ul li .mask .scrollbox{ max-height: 100%;} .pro_con05 ul li:hover .mask{ opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition-delay: .2s;} .pro_con05 ul li:hover .ico{ transform: translateY(1.5rem); opacity: 0; transition-delay: 0s;} .pro_con05 ul li:hover h4{ transform: translateY(2rem); opacity: 0; transition-delay: 0s;} .str_move.str_move_clone{ display: flex;} .checkbox{ grid-column: 1/3; font-size: .875rem; color: #fff; margin-top: .5rem;} .pro_con04 .left{ overflow: visible !important;} .pro_con04 .img{ overflow: visible; margin-bottom: 2.5rem;} .pro_con04 .swiper{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .pro_con04 .swiper-pagination{ position: absolute; bottom: -2.5rem !important;} .pro_con04 .swiper-pagination .swiper-pagination-bullet{ width:12px; height: 12px; margin: 0 6.5px !important; border-radius: 50%; border-radius: 50%; border: 1px solid #000000; background: none; opacity: 1;} .pro_con04 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ border: 1px solid #000000; background: #000000;} @media (max-width: 480px) { .pro_con04 .swiper-pagination .swiper-pagination-bullet{ width: 8px; height: 8px;} } .fangan_banner,.n_banner{ height: 88vh; box-shadow: 10px 10px 10px rgba(0,0,0,.1); position: relative; z-index: 99;} .honorpicbox { display: grid; max-width: 820px; margin-top: 1rem; justify-content: space-between; align-items: flex-start; gap: 1rem; grid-template-columns: 1fr 1fr 1fr; } .honorpicbox img{ border-radius: .625rem; box-shadow: 0px 0px 20px 0px rgba(67, 75, 95, 0.11); transition: .5s;} .honorpicbox img:nth-child(2){ margin-top: 5.875rem;} .honorpicbox img:hover{ box-shadow: 0px 0px 30px 0px rgba(67, 75, 95, 0.2);} .keywords{ line-height: 2rem; display: flex; margin-bottom: 2rem;} .keywords b{ flex-shrink: 0; font-size: 1rem; text-transform: capitalize; margin-right: 1rem;} .keywords div{ font-size: 1rem; color: #555; gap: 1rem; display: flex; flex-wrap: wrap;} .keywords div span{ border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px; height: 2rem; padding: 0 1rem; transition: .3s;} .keywords div span:hover{ background: #e77d77; color: #fff; border: 1px solid #e77d77;} section.fangan_banner.pro_bnner{ box-shadow: 10px 10px 10px rgba(0,0,0,.1); position: relative; z-index: 99;} .foot_ewm { display: flex; gap: 1.2rem; flex-shrink: 0 } .foot_ewm .ewm { display: flex; flex-direction: column; align-items: center; justify-content: center } .foot_ewm .ewm img { width: 7rem; height: 7rem; padding: 5px; background: #fff } .foot_ewm .ewm p { font-size: 1rem; color: #85888b; margin-top: 7px } .btn_link path{ fill: #fff;} .btn_link:hover path{ fill: #d96d6a;} .fuwu_list_row2{ height: 30rem; padding: 1.25rem; margin: -1.25rem; overflow-y: scroll;} .fuwu_list_row3{ height: 39rem; padding: 1.25rem; margin: -1.25rem; overflow-y: scroll;} .fuwu_list::-webkit-scrollbar{ display: none;} .fuwu_container05 .fuwu_list_row2{ height: 34rem;}