.contain { min-width:75rem; width:100%; background:#ffffff; } /*Banner*/ .banner-product { margin-top:3.75rem; box-sizing:border-box; padding:5rem 0 0; width:100%; height:27.5rem; background:url("../../../uploads/p_hzero/hzero-banner.png") no-repeat center; background-size:cover; -webkit-background-size:cover; -o-background-size:cover; } .banner-product-content { margin:0 auto; width:75rem; } .banner-product-logo { width:11.625rem; height:3.5625rem; background:url("../../../uploads/p_hzero/hzero-logo.svg") no-repeat center; background-size:cover; -webkit-background-size:cover; -o-background-size:cover; } .banner-product-title { font-size:2.25rem; font-weight:500; color:rgba(9,15,33,1); line-height:3.125rem; } .content-label { display:flex; align-items:center; } .content-label span { margin:1.875rem 1.25rem 0 0; font-size:1rem; font-weight:400; color:rgba(9,15,33,0.2); line-height:1.375rem; } .content-label span:after { display:inline-block; margin-left:1.25rem; vertical-align:middle; content:''; width:0.0625rem; height:0.75rem; background-color:rgba(9,15,33,0.2); } .last-label:after { display:none !important; } .banner-product-content h1 { margin-top:1.25rem; font-size:1.5rem; font-weight:400; color:#4DB7DD; line-height:2.0625rem; } .banner-product-content p { margin-top:1rem; width:47.5rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.875rem; word-break:break-all; } .banner-product-Button { box-sizing:border-box; padding:0.9375rem; margin-top:1.25rem; display:flex; align-items:center; justify-content:space-around; width:10.625rem; height:2.5rem; border:1px solid #4DB7DD; } .banner-product-Button span { font-size:1rem; font-weight:400; color:#4DB7DD; line-height:1.375rem; } .banner-product-Button img { width:2rem; } .banner-product-re { font-size:1.25rem; font-weight:300; color:rgba(9,15,33,1); line-height:1.75rem; margin-top:1.25rem; opacity:.5; } .button { margin:1.875rem auto 0; width:20.25rem; height:2.5rem; } .btn { width:8.75rem; height:2.5rem; border:1px solid rgba(9,15,33,1); line-height:2.5rem; text-align:center; float:left; } .btn:first-child { margin-right:2.5rem; } .btn:hover { border:1px solid #4DB7DD; background:#4DB7DD; color:#ffffff; } /* 娌℃湁浜や簰鐨刡tn */ .no-link-btn-white { margin-top:1.5625rem; width:9.625rem; height:2.5rem; border:1px solid #ffffff; font-size:1rem; font-weight:400; line-height:1.6875rem; color:#ffffff; display:flex; align-items:center; justify-content:center; } .no-link-btn-black { margin-top:1.5625rem; width:9.625rem; height:2.5rem; border:.1px solid #0A0F20; font-size:1rem; font-weight:400; line-height:1.6875rem; color:#090F21; display:flex; align-items:center; justify-content:center; } /*骞冲彴鏋舵瀯*/ .card { background:rgba(248,249,250,1); position:relative; font-weight:400; text-align:center; padding:3.75rem 0; } .card .hd-h2 { height:1.25rem; font-size:.875rem; color:#090F21; margin-top:1.25rem; line-height:1.25rem; } .card h1 { position:relative; z-index:99; font-size:1.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:2.625rem; } .card h2 { position:relative; z-index:99; margin-top:.5rem; font-size:.875rem; font-weight:400; color:rgba(9,15,33,0.2); line-height:1.25rem; letter-spacing:.625rem; text-indent:.625rem; } .card > p { position:relative; z-index:99; margin-top:1.25rem; font-size:.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.875rem; opacity:.5; } .card-content { transform:translateY(3.125rem); opacity:0; } .card-content-show { transform:translateY(0); opacity:1; } .square-item1 { position:absolute; top:-3.75rem; left:0; width:7.875rem; } .square-item2 { position:absolute; top:2rem; left:7.875rem; width:4.625rem; } .square-item3 { position:absolute; top:2.75rem; right:2rem; width:17.625rem; } .blowUp-style { top:-2.5rem !important; transform:scale(1.2); } /*icon鍒楄〃缁勪欢*/ /*1.icon+鏂囧瓧+浠嬬粛锛岀珫鍚戞帓鍒?/ .vertical-icon-box { display:flex; flex-direction:column; align-items:center; width:18.125rem; } .vertical-icon-box > .icon-box { box-sizing:border-box; padding:1.875rem; border-radius:50%; width:7.5rem; height:7.5rem; background:rgba(255,255,255,1); box-shadow:0 0.375rem 1.25rem 0 rgba(10,44,115,0.08); } .vertical-icon-box > .icon-box > img { width:3.75rem; height:3.75rem; } .vertical-icon-box > h2 { margin-top:1.875rem; font-size:1rem; font-weight:500; color:rgba(9,15,33,1); line-height:1.375rem; letter-spacing:0; } .vertical-icon-box > p { margin-top:0.75rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,.4); line-height:1.5rem; } /*2.icon+鏂囧瓧+浠嬬粛锛屾í鍚戞帓鍒?/ .cross-icon-box { box-sizing:border-box; margin:0 auto; padding:1.4375rem 1.875rem; display:flex; align-items:flex-start; width:75rem; height:5.875rem; transition:all .5s; } .cross-icon-box > .icon-box { width:3rem; height:3rem; } .cross-icon-box > .icon-box > img { width:100%; height:100%; } .cross-icon-box > .icon-content { margin-left:1.875rem; text-align:left; } .cross-icon-box > .icon-content > h2 { margin-top:0; font-size:1rem; font-weight:500; color:rgba(9,15,33,1); line-height:1.375rem; letter-spacing:0; } .cross-icon-box > .icon-content > p { margin-top:0.5rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.25rem; opacity:.5; } .cross-icon-box:hover { background:rgba(255,255,255,1); box-shadow:0 0.25rem 0.875rem 0 rgba(12,37,91,0.1); transition:all .5s; } /*3.icon+鏂囧瓧+浠嬬粛锛屾í鍚戞帓鍒?浠嬬粛閮ㄥ垎鍙繘琛岄摼鎺ヨ烦杞?/ .link-icon-box { padding:1.25rem 1.875rem; width:37.1875rem; height:5.875rem; background:rgba(255,255,255,1); box-sizing:border-box; margin:0 auto; display:flex; align-items:center; transition:all .5s; } .link-icon-box > .icon-box { width:2.75rem; height:2.75rem; } .link-icon-box > .icon-box > img { width:100%; height:100%; } .link-icon-box > .icon-content { margin-left:1.875rem; text-align:left; } .link-icon-box > .icon-content h2 { margin-top:0; font-size:1rem; font-weight:500; color:rgba(9,15,33,1); line-height:1.375rem; letter-spacing:0; text-indent:0; } .link-icon-box > .icon-content div { margin-top:0.75rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,.4); line-height:1.25rem; } .icon-content .symbol-span:last-child { display:none; } .link-li-content:last-child .symbol-span { display:none; } .link-li-content > .content-span { cursor:pointer; } .link-icon-box:hover { transition:all .5s; background:rgba(255,255,255,1); box-shadow:0 0.25rem 0.875rem 0 rgba(12,37,91,0.1); } .link-li-content > .content-span:hover { color:#4DB7DD; } /*4.icon+缂栧彿+鏍囬锛宧over鍚庢樉绀鸿缁嗕俊鎭?/ .center-line { position:absolute; z-index:1; width:100%; height:0.0625rem; background:rgba(223,226,228,1); } .feature-box { position:relative; width:75rem; margin:1.25rem auto 0; z-index:99; display:flex; align-items:flex-start; } .honour-icon-box { position:relative; display:flex; box-sizing:border-box; padding:0 1.875rem; flex-direction:column; align-items:center; text-align:center; width:18.75rem; height:24.5625rem; background:rgba(255,255,255,1); } .honour-icon-box > .icon-box { margin-top:3.4375rem; width:3.75rem; height:3.75rem; } .honour-icon-box > .icon-box > img { width:100%; height:100%; } .honour-icon-box > .icon-circle { position:relative; z-index:99; margin-top:1.875rem; width:0.625rem; height:0.625rem; border-radius:50%; box-sizing:border-box; padding:0; border:0px solid #C0EEFF; background:#4DB7DD; transform:translateY(0rem); } .honour-icon-box:hover > .icon-circle { width:2.875rem; height:2.875rem; padding:0.5625rem 0.625rem; border:5px solid #C0EEFF; transform:translateY(-1.125rem); } .honour-icon-box:hover > .icon-rect { width:6.875rem; height:1.75rem; border-radius:0.25rem; padding:0; border:4px solid rgba(192,238,255,1); margin-top:2.4375rem; } .icon-circle > span { opacity:0; font-size:0.875rem; font-weight:400; color:rgba(255,255,255,1); line-height:1.25rem; } .honour-icon-box > .icon-number { margin-top:0.625rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,.5); line-height:1.25rem; height:1.875rem; } .honour-icon-box > .icon-title { margin-top:1.25rem; font-size:1rem; font-weight:500; color:rgba(9,15,33,1); line-height:1.375rem; opacity:1; transition:all .5s; } .honour-icon-box > .icon-underline { margin-top:1.25rem; width:2.5rem; height:0.0625rem; background:rgba(223,226,228,1); } .honour-icon-box .icon-description { opacity:0; margin-top:1.25rem; overflow:hidden; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,.4); line-height:1.875rem; transition:all .5s; text-align:left; } .honour-icon-box .icon-content-line { position:absolute; z-index:1; top:9.375rem; width:100%; height:0.0625rem; background:rgba(223,226,228,1); } .honour-icon-box:hover { background:rgba(255,255,255,1); box-shadow:0 0.25rem 0.875rem 0 rgba(12,37,91,0.1); height:auto; padding-bottom:1.25rem; z-index:200; } .honour-icon-box:hover .icon-box { transform:translateY(-0.9375rem); } .honour-icon-box:hover .icon-circle span { opacity:1; transition:all .5s; } .honour-icon-box:hover .icon-number { height:0rem; opacity:0; } .honour-icon-box:hover .icon-title { transform:translateY(-0.4375rem); } .honour-icon-box:hover .icon-underline { width:5rem; } .honour-icon-box:hover .icon-description { height:auto; opacity:1; } /*鍏徃浠嬬粛banner閮ㄥ垎*/ .banner-single { margin-top:3.75rem; box-sizing:border-box; width:100%; height:27.5rem; background:url("../../../uploads/introduct/company-banner.png") no-repeat center; background-size:120rem 27.5rem; -webkit-background-size:120rem 27.5rem; -o-background-size:120rem 27.5rem; } .banner-single div { padding-top:8.75rem; margin:0 auto; width:75rem; } .banner-single div h1 { font-size:2.75rem; font-weight:400; color:rgba(9,15,33,1); line-height:3.875rem; letter-spacing:0.125rem; } .banner-single div h2 { margin-top:0.75rem; font-size:1.375rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.875rem; letter-spacing:0.625rem; text-indent:0.625rem; } /*Swiper*/ /*鍔熻兘灞曠ずswiper,杞挱鏈夌炕椤垫晥鏋?/ .function-swiper { position:relative; z-index:99; margin:1.5rem auto 0; width:75rem; } .function-swiper .swiper-container { width:60.625rem; height:26.25rem; } .function-swiper .swiper-container .swiper-slide { display:flex; justify-content:space-between; align-items:flex-start; box-sizing:border-box; padding:2.875rem 2.5rem; width:55.625rem; height:23.75rem; background:rgba(255,255,255,1); box-shadow:0 0.375rem 1.25rem 0 rgba(12,37,91,0.1); } .function-swiper .swiper-content { margin:1.875rem 0 0 2.3125rem; width:15.3125rem; text-align:left; } .function-swiper .swiper-content .content-bg { position:absolute; top:4.375rem; left:2.5rem; width:2.6875rem; height:7rem; background:url("../../../uploads/innovative/quo-top.png") no-repeat; background-size: 100% 100%; } .function-swiper .swiper-slide .swiper-img { width:28.75rem; height:17.9375rem; } .function-swiper .swiper-content .swiper-content-title { font-size:1.25rem; font-weight:500; color:rgba(9,15,33,1); line-height:1.75rem; letter-spacing:0; } .function-swiper .swiper-content li { margin-top:1rem; width:14.6875rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.25rem; } .function-swiper .swiper-button-prev,.swiper-button-next { top:10.625rem; transform:scale(0.5); width:6.5rem; height:6.5rem; border-radius:50%; background-color:#ffffff; } .function-swiper .swiper-button:hover { background-color:#4DB7DD; color:#fff; transition:all .3s; } .swiper-pagination-bullet-active { background:#4DB7DD } /*娣峰悎浜戝钩鍙皊wiper,骞崇Щ杞挱鏁堟灉*/ .contain-swiper { }/*搴曢儴鏂伴椈*/ .news-box { padding:3.75rem 0 2.5rem 0; text-align:center; background:#ffffff; } .news-contain { width:75rem; height:25.625rem; margin:3.625rem auto 0; display:flex; } .news-contain li { position:relative; margin-left:2.5rem; width:23.75rem; height:22.5rem; text-align:left; background:rgba(255,255,255,1); box-shadow:0 0.25rem 0.875rem 0 rgba(12,37,91,0.1); transition:.5s; } .news-item-box:first-child { margin-left:0; } .news-item-box img { width:23.75rem; height:10rem; display:block; } .news-item-box h2 { margin:1.5rem 1.875rem 0 1.875rem; width:20rem; height:3.75rem; overflow:hidden; font-weight:500; letter-spacing:0; font-size:1rem; color:rgba(9,15,33,1); line-height:1.875rem; } .news-item-box p { margin:0.875rem 1.875rem 0 1.875rem; width:20rem; font-weight:400; letter-spacing:0; font-size:0.875rem; color:rgba(9,15,33,0.4); line-height:1.625rem; height:5rem; overflow:hidden; transition:.3s; word-break:break-all; } .hover-date { display:none; box-sizing:border-box; position:absolute; top:-0.375rem; left:0; padding:0.625rem 0.9375rem; width:6rem; height:2.875rem; font-size:1.25rem; font-weight:400; color:rgba(255,255,255,1); line-height:1.75rem; background:url("../../../uploads/hzero/news-time.svg") no-repeat center; background-size:cover; -webkit-background-size:cover; -o-background-size:cover; display:inline-block; opacity:0; transform:translateX(0.3125rem); transition:.3s; } .news-item-box:hover { transition:0.5s; margin-top:-1.375rem; /*width:25rem; */ height:25.625rem; background:rgba(255,255,255,1); box-shadow:0 0.375rem 1.25rem 0 rgba(129,225,237,0.3); } .news-item-box:hover .hover-date { transform:translateX(0rem); opacity:1; } .news-item-box:hover p { height:6.375rem; } .news_box { display:none; } /*鏌ョ湅鏇村鎸夐挳*/ .see-more { position:relative; box-sizing:border-box; margin:0 auto; padding:0.5625rem 1.25rem; width:9.625rem; height:2.5rem; border:1px solid rgba(9,15,33,1); display:flex; align-items:center; transition:all .5s; } .see-more p { z-index:1; font-size:1rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.375rem; } .see-more img { z-index:1; width:2.25rem; margin-left:0.5625rem; } .see-more span { background:url("../../../uploads/hzero/Arrow锛弐ight-black.svg") 100% 100% no-repeat; background-size: 100% 100%; z-index:1; width:2rem; height:0.375rem; margin-left:0.5625rem; display:inline-block; transition:all .5s; } .see-more-color { position:absolute; z-index:0; top:-0.0625rem; left:-0.0625rem; content:''; width:0; height:2.5rem; background-color:#4DB7DD; transition:all .5s; } .see-more:hover { padding:0.5625rem 0.9375rem; } .see-more:hover .see-more-color { width:9.625rem; transition:all .5s; } .see-more:hover span { background:url("../../../uploads/join/arrow.svg") 100% 100% no-repeat; background-size: 100% 100%; margin-left:1.1875rem; transition:.5s; } .see-more:hover p { color:#ffffff; transition:.5s; } .hand-button { position:relative; box-sizing:border-box; width:9.625rem; height:2.5rem; border:1px solid rgba(9,15,33,1); display:block; color:rgba(0,0,0,0); margin-top:1.25rem; } .hand-button::after { position:absolute; top:-0.0625rem; left:-0.0625rem; content:attr(title); width:9.625rem; height:2.5rem; color:#000; line-height:2.5rem; padding-left:1.5rem; background-image:url('../../img/button-arrow-black.svg'); background-size: 100% 100%; background-repeat:no-repeat; background-position:6.125rem center; transition:all .5s .2s; } .hand-button:hover::after { padding-left:1.1875rem; background-image:url('../../img/button-arrow-white.svg'); background-size: 100% 100%; background-position:6.5625rem center; color:#fff; } .hand-button::before { position:absolute; top:-0.0625rem; left:-0.0625rem; content:""; width:0; height:2.5rem; background-color:#4DB7DD; transition:all .5s; } .hand-button:hover::before { width:9.625rem; } /*骞冲彴鏋舵瀯鍐呭閮ㄥ垎*/ .structure { position:relative; z-index:99; margin:2.625rem auto 0; display:flex; justify-content:space-around; align-items:center; width:75rem; height:30rem; } .structure .structure-img { width:36.25rem; height:25rem; cursor:url("../../../uploads/p_hzero/blowUp.svg"),pointer; } .structure .structure-content { box-sizing:border-box; padding:0 1.875rem 1.5rem; margin-left:6.25rem; width:27.1875rem; height:30rem; text-align:left; background:rgba(255,255,255,1); box-shadow:0 0.25rem 0.875rem 0 rgba(12,37,91,0.1); overflow-y:scroll; } .structure-content h2 { margin-top:1.25rem; z-index:1; letter-spacing:0; font-size:1rem; font-weight:500; color:rgba(9,15,33,1); line-height:1.375rem; } .structure-content p { z-index:1; margin-top:0.625rem; font-weight:400; font-size:0.875rem; color:rgba(9,15,33,0.4); line-height:1.875rem; } /*婊氬姩鏉℃牱寮?/ .structure-content::-webkit-scrollbar { width:0.375rem; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉$殑灏哄*/ height:0.25rem; } .structure-content::-webkit-scrollbar-thumb { /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ -webkit-box-shadow:inset 0 0 0.3125rem rgba(0,0,0,0.1); background:rgba(0,0,0,0.1); width:0.25rem; border-radius:0.1875rem; opacity:0.1; } .structure-content::-webkit-scrollbar-track { /*婊氬姩鏉¢噷闈㈣建閬?/ -webkit-box-shadow:inset 0 0 0.3125rem rgba(0,0,0,0.2); border-radius:0; background:rgba(0,0,0,0.1); opacity:0; } .none-scroll { overflow-y:hidden !important; } /*number*/ .compete_box { width:100%; position:relative; background:rgba(248,249,250,1); text-align:center; } .compete { margin:0 auto; } .compete_tips { display:flex; justify-content:space-between; margin:0 auto; } .compete_tip1 { /*钃濊壊鏁板瓧*/ width:8rem; height:5.375rem; } .compete_tip1_number { font-size:1.875rem; font-weight:bold; color:#4DB7DD; line-height:2.5625rem; text-align:left; } .compete_tip1_line { width:2.125rem; height:0.0625rem; background:rgba(9,15,33,1); opacity:0.2; margin:1rem 0; } .compete_tip1_txt { font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.375rem; text-align:left; } .compete_tip2 { /*榛戣壊鏁板瓧*/ width:21.625rem; height:10.3125rem; z-index:99; } .compete_tip2_tit { font-size:2.25rem; font-weight:600; color:rgba(9,15,33,1); text-align:center; line-height:3.125rem; } .compete_tip2_re { margin-top:1.375rem; font-weight:500; color:rgba(9,15,33,1); font-size:1rem; line-height:1.375rem; text-align:center; } .compete_tip2_txt { margin:0.75rem auto 0; width:17.5rem; font-weight:400; text-align:center; font-size:0.875rem; color:rgba(9,15,33,.5); line-height:1.375rem; } .img-compete { /*鑳屾櫙鍥剧墖*/ position:absolute; } .compete_tip3 { /*绔栨妗嗙殑榛戣壊鏁板瓧*/ width:10.9375rem; height:20.9375rem; background:rgba(255,255,255,1); box-shadow:0rem 0.25rem 0.875rem 0rem rgba(12,37,91,0.1); border-radius:0.625rem 0.625rem 0rem 0rem; text-align:center; } .compete_tip3_num { font-size:2.25rem; font-weight:600; color:rgba(9,15,33,1); line-height:3.125rem; margin-top:2.5rem; } .compete_tip3_tit { margin-top:1.875rem; font-size:1.125rem; font-weight:500; color:rgba(9,15,33,1); line-height:1.5625rem; } .compete_tip3_txt { margin-top:1.25rem; } .compete_tip3_txt li { font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.875rem; opacity:.5; } /* Tabs缁勪欢 */ .hand_tabs { clear:both; } .hand_tabs .hand_tabs_header { display:flex; } .hand_tabs .hand_tabs_content { position:relative; } .hand_tabs .hand_tabs_content.selected { display:block; } /*Content*/ .product { width:78.75rem; margin:6.25rem auto 0; } .product-word { width:28.75rem; text-align:left; float:left; } .product-word > h2 { font-size:1.5rem; font-weight:500; color:rgba(9,15,33,1); line-height:2.0625rem; letter-spacing:0rem; } .product-word > p { font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.875rem; margin-top:1.25rem; } .product-img { float:left; } .hand_tabs .hand_tabs_content .tabpanel { position:absolute; display:none; } /* 浜у搧鐗规€?&骞冲彴鎶€鏈爤Tab */ .hzero-technology { box-sizing:border-box; width:75rem; margin:0 auto; padding:3.75rem 0 6.25rem; text-align:center; font-weight:400; background:#ffffff; } .hzero-technology > div { margin-top:2.5rem; display:flex; align-items:center; } .hzero-technology ul li { margin:1.875rem 0 0 1.875rem; font-weight:normal; text-align:left; font-size:1.25rem; color:rgba(29,35,37,0.4); line-height:1.75rem; } .hzero-technology ul li:first-child { margin:0 0 0 1.875rem; } .type-light { color:rgba(29,35,37,1) !important; font-weight:500 !important; } .hzero-technology .hzero-technology-content { box-sizing:border-box; padding:1.25rem 3.125rem 0; margin-left:6rem; width:62.125rem; height:19.9375rem; background:rgba(255,255,255,1); box-shadow:0 0.25rem 0.875rem 0 rgba(12,37,91,0.1); } .hzero-technology-content > p { width:55.875rem; margin-bottom:1rem !important; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.875rem; text-align:left; } /*鑳屾櫙鍥剧墖婊氬姩*/ .scroll-background { z-index:1; position:absolute; top:0; left:0; width:100%; height:18.6875rem; } .scroll-background .bg-img1 { position:absolute; z-index:2; top:0; left:5.625rem; width:14.1875rem; height:14.1875rem; background:url("../../../static/img/common/compete1.svg"); background-size: 100% 100%; } .scroll-background .bg-img2 { position:absolute; z-index:1; top:0; left:0; width:22.75rem; height:18.6875rem; background:url("../../../static/img/common/compete2.svg"); background-size: 100% 100%; } .scroll-background .bg-img3 { position:absolute; z-index:2; top:0; right:16.5625rem; width:7.9375rem; height:6.9375rem; background:url("../../../static/img/common/compete3.svg"); background-size: 100% 100%; } .scroll-background .bg-img4 { position:absolute; z-index:2; bottom:0; right:0; width:9.3125rem; height:11rem; background:url("../../../static/img/common/compete4.svg"); background-size: 100% 100%; } /*number绫?/ .number-contain1 { display:flex; flex-direction:column; align-items:flex-start; width:9.375rem; } .number-contain1 > .number { font-size:1.875rem; color:#4DB7DD; line-height:2.25rem; } .number-contain1 > .number-line { margin:1rem 0; width:2.125rem; height:0.0625rem; background:rgba(9,15,33,1); opacity:0.2; } .number-contain1 > p { font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.25rem; } /*浜у搧绠€浠嬮儴鍒?/ /*铻嶅悎涓彴浠嬬粛*/ .overview-intro { width:75rem; height:16.875rem; margin:0 auto; padding:3.75rem 0; } .overview-intro-left { float:left; width:41.25rem; height:16.875rem; } .overview-intro-left h2 { font-size:1.5rem; font-weight:500; color:rgba(9,15,33,1); line-height:2.0625rem; text-align:left; margin-top:1.1875rem; letter-spacing:0rem; } .overview-intro-left > p { width:41.25rem; height:7.5rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.875rem; margin-top:1.25rem; } .overview-intro-right { float:right; width:30rem; height:16.875rem; } .overview-re { width:31.25rem; height:1.75rem; font-size:1.25rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.75rem; opacity:0.5; margin-top:1.25rem; } /*宸﹀彸鍏ュ満閮ㄥ垎锛氫竴璇哄悎鍚岀珵浜変紭鍔?/ .hcbm-advantage { background:#ffffff; } .hcbm-advantage-con { width:75rem; margin:2.5rem auto 0; } .hcbm-advantage-tip { height:13.5rem; margin-bottom:6.1875rem; } .hcbm-advantage-tip-left { float:left; width:28.75rem; height:13.5rem; text-align:left; margin-left:3rem; } .hcbm-advantage-icon { margin-top:0.625rem; width:4.5rem; } .hcbm-advantage-tip-left h1 { font-size:1.5rem; font-weight:500; color:rgba(9,15,33,1); line-height:2.0625rem; margin-top:1.375rem; } .hcbm-advantage-tip-left p { margin-top:0.625rem; opacity:.5; width:28.75rem; height:3.75rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.875rem; } .hcbm-advantage-tip-right { float:left; width:36.25rem; height:13.5rem; background:rgba(255,255,255,1); box-shadow:0rem 0.25rem 0.875rem 0rem rgba(12,37,91,0.1); position:relative; } .hcbm-advantage-img { position:absolute; width:12.9375rem; height:12.9375rem; top:1.75rem; left:28.125rem; z-index:2; } .hcbm-advantage-txt { margin:1.875rem 0 0 2.5rem; } .hcbm-advantage-txt ul { float:left; margin-right:2.5rem; } .hcbm-advantage-txt li { font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.5rem; margin-bottom:1.25rem; text-align:left; } .hcbm-advantage-num { position:absolute; width:5.0625rem; height:7rem; font-size:5rem; font-weight:600; color:rgba(9,15,33,1); line-height:7rem; top:0.75rem; left:25rem; z-index:1; opacity:0.05; } /*鏈嶅姟琛屼笟*/ .hcmb-industry { background:#ffffff; } .hcmb-industry-con { margin:1.25rem auto 0; display:flex; align-content:space-between; justify-content:space-between; width:75rem; height:40.875rem; flex-wrap:wrap; } .hcmb-industry-tips { width:23.75rem; height:19.5rem; background:rgba(255,255,255,1); box-shadow:0rem 0.25rem 0.875rem 0rem rgba(12,37,91,0.1); position:relative; /*margin-left:1.875rem; */ } .hcmb-industry-tip { width:23.75rem; height:19.5rem; transition:all .3s; } .hcmb-industry-tip-img { width:23.75rem; height:10rem; } .hcmb-industry-tip-icon { width:2.5rem; height:2.5rem; margin:1.875rem 0 0 1.875rem; } .hcmb-industry-tip p { margin:1.75rem 0 0 1.875rem; text-align:left; font-size:1.125rem; color:rgba(9,15,33,1); line-height:1.5rem; } .hcmb-industry-tip-hover { width:20rem; height:15.75rem; padding:1.875rem; position:absolute; top:0; left:0; opacity:0; transition:all .3s; } .hcmb-industry-tip-icon1 { width:2.5rem; height:2.5rem; margin:0; } .hcmb-industry-tip-hover h1 { height:1.5rem; font-size:1.125rem; color:rgba(9,15,33,1); line-height:1.5rem; text-align:left; margin-top:1.125rem; } .hcmb-industry-tip-hover h3 { width:20.125rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.875rem; text-align:left; margin-top:1.25rem; } .hcmb-industry-tip-hover p { width:20.125rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,.5); line-height:1.875rem; text-align:left; margin-top:1.25rem; } .hcmb-industry-tips:hover .hcmb-industry-tip { opacity:0; transition:all .3s; } .hcmb-industry-tips:hover .hcmb-industry-tip-hover { opacity:1; transition:all .3s; } /*鏈嶅姟琛屼笟*/ .hcmb-industry { background:#ffffff; } .case { margin-top:0; } .hcmb-industry-con { margin:1.25rem auto 0; display:flex; align-content:space-between; justify-content:space-between; width:75rem; height:40.875rem; flex-wrap:wrap; } .hcmb-industry-tips { width:23.75rem; height:19.5rem; background:rgba(255,255,255,1); box-shadow:0rem 0.25rem 0.875rem 0rem rgba(12,37,91,0.1); position:relative; overflow:hidden; /*margin-left:1.875rem; */ } .hcmb-industry-tip { width:23.75rem; height:19.5rem; transition:all .3s; } .hcmb-industry-tip-img { width:23.75rem; height:10rem; } .hcmb-industry-tip-icon { width:2.5rem; height:2.5rem; margin:1.875rem 0 0 1.875rem; } .hcmb-industry-tip p { margin:1.75rem 0 0 1.875rem; text-align:left; font-size:1.125rem; color:rgba(9,15,33,1); line-height:1.5rem; } .hcmb-industry-tip-hover { width:20rem; height:15.75rem; padding:1.875rem; position:absolute; top:0; left:0; opacity:0; transform:translateY(19.5rem); transition:all .3s; } .hcmb-industry-tip-icon1 { width:2.5rem; height:2.5rem; margin:0; } .hcmb-industry-tip-hover h1 { height:1.5rem; font-size:1.125rem; color:rgba(9,15,33,1); line-height:1.5rem; text-align:left; margin-top:1.125rem; } .hcmb-industry-tip-hover h3 { width:20.125rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.875rem; text-align:left; margin-top:1.25rem; } .hcmb-industry-tip-hover p { width:20.125rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,.5); line-height:1.875rem; text-align:left; margin-top:1.25rem; } .hcmb-industry-tips:hover .hcmb-industry-tip { opacity:0; transform:translateY(-19.5rem); transition:all .3s; } .hcmb-industry-tips:hover .hcmb-industry-tip-hover { transform:translateY(0); opacity:1; transition:all .3s; } .hcmb-industry-tip-txt img { width:20rem; margin-top:0.625rem; } /*闈㈠寘灞戝鑸?/ .hd-breadcrumb-bg { width:100%; background:#F8F9FA; margin-top:3.75rem; } .hd-breadcrumb { width:75rem; height:3.125rem; margin:0 auto; line-height:3.125rem; } .hd-breadcrumb-item { font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.25rem; margin-right:1.25rem; } .hd-breadcrumb-item::after { content:''; width:0.625rem; height:0.625rem; margin-left:1.25rem; background:url("/uploads/case/rightRow.svg") 0.625rem 0.625rem; background-size: 100% 100%; display:inline-block; } .hd-breadcrumb-item:last-child::after { display:none; } /* 灏忓緱鐟熷挩璇 */ .dese-concact { position:relative; height:16.125rem; background:#FCFAF1; overflow:hidden; z-index:0; } .dese-content { z-index:1; width:75rem; height:100%; margin:0 auto; display:flex; /* justify-content:space-between; */ } .dese-concact img { display:inline; width:100%; height:100%; } .dese-tit { display: flex; margin:4.6875rem 0 0 4.125rem; } .dese-tit img{ width:18.625rem; height:7.5625rem; } .xiaodese { width:46.5625rem; height:15.625rem; position:absolute; bottom:0; right:0; } .dese-content .more-see { position:absolute; z-index:11; margin: 5.125rem 0 0 24.3125rem; /* left: 536px; top: 158px; */ background:rgba(255,255,255); box-shadow:0.3125rem 0.3125rem 1.25rem rgba(26,39,59,0.1); border-radius:0.625rem; border:none; transition:all .5s; } .dese-content .more-black-see:hover{ border: none; } @media (min-width:1680px) { .dese-content .more-see { margin: 90px 0 0 417px; } } @media (min-width:1920px) { .dese-content .more-see { margin-left: 500px; margin-top: 104px; } } /* .dese-see-more { z-index:11; margin-top:9.8125rem; margin-left:5.625rem; position:relative; box-sizing:border-box; padding:0.5625rem 1.25rem; width:9.625rem; height:2.5rem; display:flex; align-items:center; transition:all .5s; background:#ffffff; box-shadow:0.3125rem 0.3125rem 1.25rem rgba(26,39,59,0.1); border-radius:0.625rem; } */ /* .see-more-color { position:absolute; z-index:0; top:-0.0625rem; left:-0.0625rem; content:''; width:0; height:2.5rem; background-color:#4DB7DD; transition:all .5s; } */ /* .dese-see-more p { font-size:1rem; font-weight:400; line-height:1.375rem; color:#090F21; } .dese-see-more>span { z-index:1; width:2rem; height:0.375rem; margin-left:0.5625rem; display:inline-block; transition:all .5s; background:url("../../static/img/index-page/black-arrow.svg") no-repeat; background-size:100% 100%; } */ /* .dese-see-more:hover { background:#F79A18; } .dese-see-more:hover p { color:#fff; } .dese-see-more:hover>span { background:url("../img/pageimage/c2m-marketing/arrow.svg") no-repeat; background-size:100% 100%; } */ .dese-bg1 { z-index:-1; position:absolute; top:-5.8125rem; left:-5.3125rem; width:14.9375rem; height:14.9375rem; background:radial-gradient(circle,#F6ECA9 0%,#F7D5B3 100%,#F7D5B3 100%); border-radius:50%; opacity:0.22; } .dese-bg2 { z-index:-1; position:absolute; top:10.9375rem; left:13.8125rem; width:14.9375rem; height:14.9375rem; background:radial-gradient(circle,#F6ECA9 0%,#F7D5B3 100%,#F7D5B3 100%); border-radius:50%; opacity:0.22; } .dese-bg3 { z-index:-1; position:absolute; top:4rem; left:40.75rem; width:10.5625rem; height:10.5625rem; background:radial-gradient(circle,#F6ECA9 0%,#F7D5B3 100%,#F7D5B3 100%); border-radius:50%; opacity:0.1; } .dese-content .more-black-see { overflow:hidden; display:flex; align-items:center; justify-content:space-between; padding:0.5625rem 1.4375rem 0.5625rem 1.5rem; width:9.625rem; height:2.5rem; box-sizing:border-box; } /* .more-black-see:hover { border:1px solid #58A9C0; } */ .dese-content .more-black-see>div { background:url("../../img/index-page/black-arrow.svg") no-repeat; background-size:100% 100%; width:2.0625rem; height:0.3125rem; transition:all 0.3s; position:relative; z-index:99; } .dese-content .more-see-black-txt { font-size:1rem; font-weight:400; line-height:1.375rem; color:#090F21; transition:all 0.3s; position:relative; z-index:99; } .dese-content .more-see:hover .more-see-black-bg,.dese-content .more-see .more-see-black-bg { position:absolute; display:block; width:0; height:0; border-radius:50%; background-color:#F79A18; transition:width 0.3s ease-in-out,height 0.3s ease-in-out; transform:translate(-50%,-50%); } .dese-content .more-black-see:hover .more-see-black-bg { width:225%; height:36.875rem; } .dese-content .more-black-see:hover .more-see-black-txt { color:rgba(255,255,255,1); } .dese-content .more-black-see:hover>div { background:url("../../img/index-page/white-arrow.svg") no-repeat; background-size:100% 100%; } .hcmb-industry-tip-icon img,.made-partner-tip .rightblack img,.hcbm-advantage-tip .rightblack img, .htms-function-logo img,.rzh-icon-box > a img,.hcm-function .hcmb-industry-tip-img img,.hcmb-industry-tip-img img, .hcbm-advantage-img img,.hcbm-advantage-icon img{ width: 100%; height: 100%; }