.swiper { overflow: hidden; } .qd_hide_con { display: none !important; } /*鍒嗕韩榛樿鏍峰紡淇敼*/ .bsTop { width: 208px !important; } .bshare-custom a { background: none !important; outline: none; opacity: 1; } .bshare-custom a:hover { opacity: 1; } .bsFrameDiv div { width: 208px !important; height: 208px !important; display: -webkit-flex !important; display: -ms-flex !important; display: flex !important; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .bsFrameDiv img { margin: 0 !important; } .bshare-custom { display: -webkit-flex !important; display: -ms-flex !important; display: flex !important; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; font-size: 16px; color: #b2b2b2; } .bshare-custom.icon-medium-plus a { padding-left: 0 !important; color: #999999; margin: 0 0 0 22px !important; width: 40px !important; height: 40px !important; display: -webkit-flex !important; display: -ms-flex !important; display: flex !important; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; outline: none; -webkit-transition: all .5s cubic-bezier(.165, .84, .44, 1); transition: all .5s cubic-bezier(.165, .84, .44, 1); } .bshare-custom a:hover { text-decoration: none !important; opacity: 1; color: #36adad; } /*鍦板浘榛樿鏍峰紡淇敼*/ .BMap_Marker img { width: auto; display: inline-block; } .BMap_bubble_content img { width: auto; display: inline-block; } .BMap_bubble_pop { border: none !important; box-sizing: border-box !important; padding: 15px 20px !important; border-radius: 10px !important; height: auto !important; width: 300px !important; } .BMap_bubble_pop:after { content: ""; position: absolute; bottom: -20px; left: 40%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 0; width: 0; border-right: 15px solid transparent; border-left: 15px solid #fff; border-bottom: 20px solid transparent; } .BMap_bubble_pop img { display: none !important; } .BMap_bubble_top { height: auto !important; line-height: 30px !important; } .BMap_bubble_buttons { display: none; } .BMap_bubble_title { font-weight: bold !important; color: #333 !important; width: 100% !important; height: auto !important; position: relative !important; font-size: 16px !important; white-space: initial !important; line-height: 30px !important; } .BMap_bubble_center, .BMap_bubble_content { width: 100% !important; height: auto !important; position: relative !important; color: #999 !important; line-height: 24px !important; } .BMap_stdMpZoom .BMap_button_new { left: 0 !important; top: 0 !important; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: none !important; border: none !important; } .BMap_stdMpZoom .BMap_button_new .BMap_smcbg { background: none !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .BMap_stdMpZoom .BMap_button_new .in:after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); width: 50%; height: 2px; background: rgba(255, 255, 255, 1); } .BMap_stdMpZoom .BMap_button_new .in:before { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); height: 50%; width: 2px; background: rgba(255, 255, 255, 1); } .BMap_stdMpZoom .BMap_button_new .out:before { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); width: 50%; height: 2px; background: rgba(255, 255, 255, 1); } .BMap_stdMpZoom { background: rgba(255, 255, 255, .4) !important; } /*婊氬姩鏉¢粯璁ゆ牱寮忎慨鏀?/ #ascrail2000 { padding: 20px 0; } .nicescroll-cursors { border: none !important; opacity: 1 !important; } .nicescroll-rails { cursor: pointer !important; } /*css绯荤粺榛樿鏍峰紡*/ article, aside, dialog, footer, header, section, footer, nav, figure, menu { display: block } .SC-ExtraLight { font-family: "鎬濇簮榛戜綋 cn e", "SourceHanSanscn-Extralight", "Microsoft YaHei", 寰蒋闆呴粦, "Arial", "Helvetica", "sans-serif" !important; } .Roboto-Thin { font-family: "ROBOTO-THIN-15", "Microsoft YaHei", 寰蒋闆呴粦, "Arial", "Helvetica", "sans-serif" !important; } .Roboto-Blod { font-family: "Roboto-Blod", "Microsoft YaHei", 寰蒋闆呴粦, "Arial", "Helvetica", "sans-serif" !important; } .Roboto-Medium { font-family: "Roboto-Medium", "Microsoft YaHei", 寰蒋闆呴粦, "Arial", "Helvetica", "sans-serif" !important; } .Roboto-Regulatr { font-family: "Roboto-Regulatr", "Microsoft YaHei", 寰蒋闆呴粦, "Arial", "Helvetica", "sans-serif" !important; } @font-face { font-family: "ROBOTO-THIN-15"; src: url(../fonts/ROBOTO-THIN-15.TTF); } @font-face { font-family: "SourceHanSanscn-Extralight"; src: url(../fonts/SOURCEHANSANSCN-EXTRALIGHT.OTF); } @font-face { font-family: "Roboto-Blod"; src: url(../fonts/ROBOTO-BOLD-3.TTF), url(../fonts/ROBOTO-BOLD-3.svg); } @font-face { font-family: "Roboto-Medium"; src: url(../fonts/ROBOTO-MEDIUM-12.TTF), url(../fonts/ROBOTO-MEDIUM-12.svg); } @font-face { font-family: "Roboto-Regulatr"; src: url(../fonts/ROBOTO-REGULAR-14.TTF); } * { margin: 0; padding: 0; box-sizing: border-box; word-wrap: break-word !important; word-break: normal !important; -webkit-touch-callout: none; } html, body { font-family: "Roboto-Regulatr", "Microsoft YaHei", 寰蒋闆呴粦, "Arial", "Helvetica", "sans-serif" !important; font-size: 14px; color: #333; overflow: hidden; margin: 0 auto; max-width: 100%; -webkit-overflow-scrolling: touch; } /*#ascrail2000 {*/ /* height: calc(100vh - 20px) !important;*/ /* top: 10px!important;*/ /* right: 3px!important;*/ /* overflow: hidden!important;*/ /*}*/ .BMap_cpyCtrl { display: none; } .anchorBL { display: none; } .body_flex { position: fixed; width: 100%; } img { border: none; display: block; width: 100%; } i { font-style: normal; } div { display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } table { border-collapse: collapse; } a { display: inline-block; text-decoration: none; color: #000; cursor: hand; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); } h1, h2, h3, h4, h5 { font-weight: normal; } video { outline: none; } a:focus { outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } li { list-style: none; } input, select, button, textarea { vertical-align: middle; border-radius: 0; outline: none; background: none; border: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: "Microsoft YaHei", 寰蒋闆呴粦, Arial, Helvetica, sans-serif; } select::-ms-expand { display: none; } textarea { resize: none; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } textarea { resize: vertical; } /*娓呴櫎娴姩*/ .clear:after { content: ""; width: 0; height: 0; clear: both; display: block; } /*input楂樹寒*/ .salient-input { padding: 7px 0 7px 5px; -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s } .salient-input:focus { border-color: #4faad6; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(10, 201, 245, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(10, 201, 245, .6); } /*鍗曡瓒呭嚭鐪佺暐*/ .space-over { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*澶氳瓒呭嚭鐪佺暐*/ .space-list-over { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #8c8c8c; } input:-moz-placeholder, textarea:-moz-placeholder { color: #8c8c8c; } input::-moz-placeholder, textarea::-moz-placeholder { color: #8c8c8c; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #8c8c8c; } .cover { position: relative; height: 0; overflow: hidden; } .cover img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; } .flex { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .swiper-animation { opacity: 0; } .banner_box .swiper-slide { background: #fff; overflow: hidden; } /*!*婊氬姩鏉℃暣浣撻儴鍒嗭紝鍙互璁剧疆瀹藉害绛?!*/ /*::-webkit-scrollbar {*/ /*}*/ /*!*婊氬姩鏉′袱绔殑鎸夐挳*!*/ /*::-webkit-scrollbar-button {*/ /*}*/ /*!*澶栧眰杞ㄩ亾*!*/ /*::-webkit-scrollbar-track {*/ /*}*/ /*!*鍐呭眰婊氬姩妲?!*/ /*::-webkit-scrollbar-track-piece {*/ /*}*/ /*!*婊氬姩鐨勬粦鍧?!*/ /*::-webkit-scrollbar-thumb {*/ /*}*/ /*!*杈硅*!*/ /*::-webkit-scrollbar-corner {*/ /*}*/ /*!*瀹氫箟鍙充笅瑙掓嫋鍔ㄥ潡鐨勬牱寮?!*/ /*::-webkit-resizer {*/ /*}*/ /*-------------------------------cursor play-------------------------------*/ .cursorDiv { width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; position: fixed; left: 0; top: 0; z-index: 9999999; pointer-events: none; opacity: 0; } .cursorDiv_circle_box { width: 48%; height: 48%; left: 26px; top: 26px; position: absolute; -webkit-transition: all .6s .2s ease; transition: all .6s .2s ease; } .cursorDiv_circle_hide { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } .cursorDiv_circle_box .cursorDiv_circle_load { position: absolute; left: 0; top: 0; stroke: rgba(255, 255, 255, 1); stroke-dasharray: 144px; stroke-dashoffset: 144px; -webkit-transition: all .3s ease; transition: all .3s ease; -webkit-animation: 1s CursorRotate infinite normal both linear; animation: 1s CursorRotate infinite normal both linear; } @-webkit-keyframes CursorRotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes CursorRotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .cursorDiv_circle_item { width: 100%; height: 100%; fill: rgba(0, 0, 0, 0); stroke-width: 1px; stroke: rgba(255, 255, 255, .2); } .cursorDiv_text_load { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .cursorDiv_text_box { font-size: 12px; color: #fff; } .cursor_banner_wrap { width: 30%; height: 30%; position: absolute; top: 35%; left: 35%; pointer-events: none; -webkit-border-radius: 100%; border-radius: 100%; overflow: hidden; -webkit-transition: all .6s ease; transition: all .6s ease; } .cursor_banner_item { position: absolute; width: 100%; height: 100%; fill: rgba(0, 0, 0, 0); stroke-width: 2px; } .cursor_banner_load { stroke-dashoffset: 0; stroke-dasharray: 156px; stroke-width: 0; fill: rgba(209, 90, 68, 1); -webkit-transition: all .6s ease; transition: all .6s ease; } /*banner榧犳爣锛堟鑹?灏忥級*/ .cursor_banner_current { width: 52%; height: 52%; top: 24%; left: 24%; } .cursor_banner_current .cursor_banner_item { position: absolute; width: 100%; height: 100%; fill: rgba(0, 0, 0, 0); stroke-width: 2px; } .cursor_banner_current .cursor_banner_svg { stroke: rgba(255, 255, 255, .2); } .cursor_banner_current .cursor_banner_load { stroke-dashoffset: 0; stroke-dasharray: 156px; stroke: rgba(209, 90, 68, 1); -webkit-transition: all .6s ease; transition: all .6s ease; } .cursor_banner_current .cursor_banner_number { opacity: 1; } .cursor_button_hide { -webkit-transform: scale(0); transform: scale(0); } /*banner榧犳爣锛堢櫧鑹?锛?/ .cursor_button_hover { width: 50%; height: 50%; top: 25%; left: 25%; } .cursor_button_hover .cursor_banner_item { stroke-width: 0; } .cursor_button_hover .cursor_banner_load { fill: rgba(255, 255, 255, .3); -webkit-transition: all .6s ease; transition: all .6s ease; } .cursor_button_hover .cursor_banner_number { opacity: 0; } /*banner榧犳爣锛堟鑹?澶э級*/ .cursor_orange { width: 70%; height: 70%; top: 15%; left: 15%; box-shadow: 0 0 10px rgba(0, 0, 0, .1); -webkit-transform: scale(1); transform: scale(1); } .cursor_orange .cursor_banner_item { stroke-width: 0; } .cursor_orange .cursor_banner_load { fill: rgba(231, 94, 69, .8); -webkit-transition: all .6s ease; transition: all .6s ease; } .cursor_orange .cursor_banner_number { opacity: 0; } .cursor_banner_rotate { width: 100%; height: 100%; } .cursor_banner_box { width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; } .cursor_banner_active { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .cursor_banner_number { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; color: #e75e45; opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; } /*-------------------------------loading-------------------------------*/ .loading_wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; /*background: #1f1f1f;*/ z-index: 999; opacity: 0; cursor: none; } .loading_wrap:after { content: ""; position: absolute; left: -100%; top: 0; width: 300%; height: 100%; z-index: 9; background-image: linear-gradient(to right, rgba(31, 31, 31, 0), rgba(31, 31, 31, 1) 30%, rgba(31, 31, 31, 1) 70%, rgba(31, 31, 31, 0)); } .loading_box { height: 100%; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: relative; z-index: 10; } .loading_logo_en svg { fill: rgba(255, 255, 255, 0); stroke-width: .5px; stroke: #fff; } /*.loading_stroke {*/ /* stroke: rgba(255, 255, 255, 0);*/ /*}*/ .loading_active { opacity: 1; } .loading_active .loading_logo_en svg path { -webkit-transition: all .6s ease; transition: all .6s ease; } .loading_fade .loading_logo_en svg .loading_stroke { fill: #E60012; } .loading_fade .loading_logo_en svg path { fill: rgba(255, 255, 255, 1); -webkit-transition: all .3s ease; transition: all .3s ease; stroke: rgba(255, 255, 255, 0); } .loading_fade .loading_logo_en { -webkit-transform: translateY(0); transform: translateY(0); } .loading_fade .loading_logo_cn { -webkit-transform: translateY(0); transform: translateY(0); fill: rgba(255, 255, 255, 1); opacity: 1; } .loading_content { width: 300px; position: fixed; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .loading_logo_box { width: 100%; } .loading_logo_en { width: 100%; position: relative; top: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); -webkit-transition: all .6s 1.1s ease-in-out; transition: all .6s 1.1s ease-in-out; } .loading_logo_cn { fill: rgba(255, 255, 255, 0); width: 65.333333%; margin: 0 auto 0; padding: 6.66667% 0 0 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; -webkit-transition: all .6s 1.1s ease-in-out; transition: all .6s 1.1s ease-in-out; } .loading_hide { -webkit-transform: translateX(-300%); transform: translateX(-300%); -webkit-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .loading_hide .loading_content { -webkit-transform: translateX(-100%) translateY(-50%); transform: translateX(-100%) translateY(-50%); opacity: 0; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } /*.loading_scale {*/ /* width: 5000%;*/ /* top: 200%;*/ /* left: 84%;*/ /* -webkit-transition: all 2s ease-in-out;*/ /* transition: all 2s ease-in-out;*/ /*}*/ /*.loading_scale .loading_logo_en svg .loading_stroke {*/ /* fill: #E60012;*/ /*}*/ /*.loading_scale .loading_logo_en svg path {*/ /* fill: #171717;*/ /* -webkit-transition: all 1.5s ease;*/ /* transition: all 1.5s ease;*/ /*}*/ .loading_bar_box { position: relative; width: 46.6667%; height: 1px; overflow: hidden; opacity: 0.6; margin: 50px auto 0; } .loading_bar_img { position: absolute; width: 300%; height: 100%; background-image: url(../images/loading_bar.png); background-repeat: no-repeat; background-size: 100% 100%; -webkit-animation: loading-bar-anim 0.8s linear infinite; -moz-animation: loading-bar-anim 0.8s linear infinite; animation: loading-bar-anim 0.8s linear infinite; } @-webkit-keyframes loading-bar-anim { 0% { transform: translateX(0) } 100% { transform: translateX(-280px) } } @-moz-keyframes loading-bar-anim { 0% { transform: translateX(0) } 100% { transform: translateX(-280px) } } @keyframes loading-bar-anim { 0% { transform: translateX(0) } 100% { transform: translateX(-280px) } } /*-------------------------------css play-------------------------------*/ .html_page_wrap { width: 100%; min-height: 100vh; overflow-x: hidden; } .web_center { padding: 0 120px; } .index_page_wrap { width: 100vw; height: 100vh; opacity: 0; pointer-events: none; } .index_page_active { opacity: 1; pointer-events: auto; } .index_page_swiper { height: 100%; width: 100%; cursor: initial !important; } .index_page_swiper .swiper-slide { overflow: hidden; } .index_slide_inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; z-index: 9; background: #262626; } .index_banner_wrap { width: 100%; height: 100%; } .index_banner_swiper { height: 100%; width: 100%; z-index: 97; } .index_banner_swiper .swiper-slide { -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; /*background: #666;*/ /*opacity: 1!important;*/ } .index_banner_swiper .swiper-slide-active { z-index: 9; } .wap_banner_swiper { display: none; } .index_banner_content { height: 100%; width: 100%; } .index_banner_back { height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; } .index_canvas { position: relative; pointer-events: none; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 1s ease; transition: all 1s ease; } .index_canvas_active { opacity: .1; -webkit-transition: all 1s 1.8s ease; transition: all 1s 1.8s ease; } .header_wrap { position: fixed; width: 100%; top: 0; left: 0; z-index: 99; /*z-index: 99999;*/ -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; pointer-events: none; } .header_wrap:after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; background: rgba(0, 0, 0, .9); z-index: -1; } .header_wrap .HeaderFadeIn { -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } .header_current .HeaderFadeIn { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .header_box { -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; } .header_logo_box a { display: block; width: 144px; pointer-events: auto; } .header_btn_list { width: 144px; -webkit-justify-content: flex-end; justify-content: flex-end; } .header_logo_box a svg { fill: #fff; } .head_logo_red { fill: #E60012; } .header_nav_box { -webkit-transition-delay: 100ms !important; transition-delay: 100ms !important; } .header_nav_wrap { width: calc(100% - 288px); -webkit-justify-content: center; justify-content: center; -webkit-transition: all .6s ease; transition: all .6s ease; } .header_nav_hide { opacity: 0; pointer-events: none !important; } .header_nav_item { margin: 60px 38px; -webkit-transition: all .5s ease; transition: all .5s ease; } .header_nav_link { pointer-events: auto; font-size: 15px; line-height: 30px; color: #fff; -webkit-transition: all .5s ease; transition: all .5s ease; } .header_nav_current .header_nav_link { color: #e65e44; } .header_button_wrap { width: 60px; height: 60px; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-transition-delay: 200ms !important; transition-delay: 200ms !important; pointer-events: auto; } .nav_svg_button { width: 100%; height: 100%; overflow: hidden; cursor: pointer; -webkit-transform: translateX(20px); transform: translateX(20px); } .nav_svg_box { width: 100%; height: 100%; } .nav_svg_box path { fill: rgba(255, 255, 255, 0); stroke: rgba(255, 255, 255, 1); stroke-width: 1.2px; stroke-linecap: round; -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1); transition: all .6s cubic-bezier(.645, .045, .355, 1); } .nav_svg_label1 { stroke-dasharray: 18, 200; stroke-dashoffset: 0; } .nav_svg_label2 { stroke-dasharray: 18, 200; stroke-dashoffset: 0; } .nav_svg_label3 { stroke-dasharray: 18; stroke-dashoffset: 8; opacity: 1; -webkit-transition: all .3s .5s cubic-bezier(.645, .045, .355, 1); transition: all .3s .5s cubic-bezier(.645, .045, .355, 1); } .nav_svg_button_active .nav_svg_box .nav_svg_label1 { stroke-dasharray: 28, 127; stroke-dashoffset: -102; -webkit-transition: all .8s cubic-bezier(.645, .045, .355, 1); transition: all .8s cubic-bezier(.645, .045, .355, 1); } .nav_svg_button_active .nav_svg_box .nav_svg_label2 { stroke-dasharray: 28, 127; stroke-dashoffset: -102; -webkit-transition: all 1.4s cubic-bezier(.645, .045, .355, 1); transition: all 1.4s cubic-bezier(.645, .045, .355, 1); } .nav_svg_button_active .nav_svg_box .nav_svg_label3 { -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); transition: all .3s cubic-bezier(.645, .045, .355, 1); stroke-dasharray: 28; stroke-dashoffset: -28; opacity: 0; } .index_banner_title { position: relative; } .index_banner_center { padding: 0 120px; } .index_content_wrap { -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 100%; z-index: 9; } .index_content_box { width: 100%; position: relative; z-index: 9; } .index_en_box { margin-right: 35px; } .index_en_box:last-child { margin-right: 0; } .index_banner_en { margin-top: 10px; } .index_btn_wrap { z-index: 97; position: fixed; width: 100%; top: 50%; transform: translateY(-50%); pointer-events: none; } .index_btn_box { -webkit-justify-content: space-between; justify-content: space-between; } .index_banner_button { width: 35px; height: 35px; pointer-events: none; outline: none; } .index_banner_btn { width: 100%; height: 100%; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; color: #fff; opacity: 0; pointer-events: none; outline: none; cursor: pointer; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; position: relative; } .index_banner_icon { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .index_banner_icon:nth-child(1) { -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .index_banner_icon:nth-child(2) { left: 0; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .banner_jt_top { width: 50%; height: 2px; background: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; position: absolute; left: 25%; top: 50%; } .banner_jt_bottom { width: 50%; height: 2px; background: #fff; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: left top; transform-origin: left top; left: 25%; top: 50%; } .banner_icon_top { width: 0; height: 2px; position: absolute; right: 25%; top: 50%; -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .banner_icon_bottom { width: 0; height: 2px; position: absolute; right: 25%; top: 50%; -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .banner_icon_top:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transition: all .5s ease; transition: all .5s ease; } .banner_icon_bottom:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: all .5s ease; transition: all .5s ease; } .index_banner_btn:hover .index_banner_icon:nth-child(1) { left: -20px; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; } .index_banner_btn:hover .index_banner_icon:nth-child(2) { left: 0; opacity: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .index_banner_btn:hover .index_banner_icon:nth-child(2) .banner_icon_top { width: 50%; -webkit-transition: all .5s ease; transition: all .5s ease; } .index_banner_btn:hover .index_banner_icon:nth-child(2) .banner_icon_bottom { width: 50%; -webkit-transition: all .5s ease; transition: all .5s ease; } .index_banner_btn:hover .index_banner_icon:nth-child(2) .banner_icon_top:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all .2s ease; transition: all .2s ease; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .index_banner_btn:hover .index_banner_icon:nth-child(2) .banner_icon_bottom:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .2s ease; transition: all .2s ease; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .index_banner_btn { -webkit-transform: translateX(-45px); transform: translateX(-45px); } .index_swiper_next { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .index_btn_fixed { position: fixed; left: -25px; top: -25px; } .index_read_list { position: relative; margin-top: 30px; width: 36%; } .index_read_item { position: relative; } /*.index_read_text {*/ /* -webkit-transform: translateY(-100%);*/ /* transform: translateY(-100%);*/ /*}*/ /*.index_title_box {*/ /* -webkit-transform: translateY(-100%);*/ /* transform: translateY(-100%);*/ /*}*/ /*.index_en_box {*/ /* -webkit-transform: translateY(-100%);*/ /* transform: translateY(-100%);*/ /*}*/ /*.index_animate_active .index_title_box {*/ /* -webkit-transform: translateY(0);*/ /* transform: translateY(0);*/ /* -webkit-transition: all .6s ease-in-out;*/ /* transition: all .6s ease-in-out;*/ /*}*/ /*.index_animate_active .index_en_box {*/ /* -webkit-transform: translateY(0);*/ /* transform: translateY(0);*/ /* -webkit-transition: all .6s ease-in-out;*/ /* transition: all .6s ease-in-out;*/ /*}*/ /*.index_animate_active .index_read_text {*/ /* -webkit-transform: translateY(0);*/ /* transform: translateY(0);*/ /* -webkit-transition: all .6s ease-in-out;*/ /* transition: all .6s ease-in-out;*/ /*}*/ .index_title_item { font-size: 50px; line-height: 60px; color: #fff; position: relative; -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } .index_en_item { font-size: 68px; line-height: 80px; min-width: 20px; color: #e75e45; position: relative; text-transform: uppercase; -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } .index_read_label { font-size: 18px; line-height: 28px; color: #ffffff; -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } .index_banner_more { margin-top: 60px; } .index_banner_more a { display: inline-block; line-height: 60px; padding: 1px; position: relative; overflow: hidden; -webkit-border-radius: 4px; border-radius: 4px; box-shadow: 3px 1px 8px rgba(231, 94, 69, 1); -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; margin: 10px 0; } .index_banner_more a:before { content: ""; position: absolute; left: 0; top: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); width: 130%; height: 100%; background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); z-index: 3; transition: all 1s ease-in-out; } .index_banner_more a:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background-image: linear-gradient(135deg, #e75e45, #f5745d); } /*-----------------------------------------------*/ .index_animate_active .index_title_item { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .index_animate_active .index_en_item { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .index_animate_active .index_read_item .index_read_label { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .index_animate_active .index_banner_more a { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition: all .6s .15s ease-in-out; transition: all .6s .15s ease-in-out; } .index_animate_active .index_title_load { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } /*.index_animate_end .index_title_box {*/ /* -webkit-transform: translateY(100%);*/ /* transform: translateY(100%);*/ /* -webkit-transition: all .6s .6s ease-in-out;*/ /* transition: all .6s .6s ease-in-out;*/ /*}*/ /*.index_animate_end .index_en_box {*/ /* -webkit-transform: translateY(100%);*/ /* transform: translateY(100%);*/ /* -webkit-transition: all .6s .6s ease-in-out;*/ /* transition: all .6s .6s ease-in-out;*/ /*}*/ /*.index_animate_end .index_read_text {*/ /* -webkit-transform: translateY(100%);*/ /* transform: translateY(100%);*/ /* -webkit-transition: all .6s .6s ease-in-out;*/ /* transition: all .6s .6s ease-in-out;*/ /*}*/ .index_animate_end .index_title_item { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } .index_animate_end .index_en_item { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } .index_animate_end .index_read_item .index_read_label { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } .index_animate_end .index_banner_more a { -webkit-transition: all .6s .15s ease-in-out; transition: all .6s .15s ease-in-out; -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } .index_animate_end .index_title_load { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } /*.index_animate_remove .index_title_item {*/ /* -webkit-transition-delay: 0ms !important;*/ /* transition-delay: 0ms !important;*/ /*}*/ /*.index_animate_remove .index_en_item {*/ /* -webkit-transition-delay: 0ms !important;*/ /* transition-delay: 0ms !important;*/ /*}*/ /*.index_animate_remove .index_read_item .index_read_label {*/ /* -webkit-transition-delay: 0ms !important;*/ /* transition-delay: 0ms !important;*/ /*}*/ .index_more_box { position: relative; z-index: 4; color: #fff; -webkit-border-radius: 4px; border-radius: 4px; background-image: linear-gradient(135deg, #e75e45, #f5745d); } .index_more_text { font-size: 16px; position: relative; } .index_more_box:nth-child(2) { position: absolute; top: 0; left: 0; width: 100%; } .public_item { font-size: 16px; } .index_banner_more .public_btn_label { -webkit-justify-content: center; justify-content: center; padding: 0 36px; width: 100%; } .index_banner_more .index_more_label { width: 100%; } .index_banner_more .public_btn_label:nth-child(2) { position: absolute; left: 0; top: 0; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } .index_banner_more .public_btn_label:nth-child(2) .index_more_icon { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } .index_banner_hover:before { -webkit-animation: hoverBtnBefore 1.5s forwards ease-in-out; animation: hoverBtnBefore 1.5s forwards ease-in-out; } .index_banner_hover .public_btn_label:nth-child(1) .index_more_label span { -webkit-animation: hoverBtn .6s forwards ease-in-out; animation: hoverBtn .6s forwards ease-in-out; } .index_banner_hover .public_btn_label:nth-child(1) .index_more_icon { -webkit-animation: hoverBtn .6s forwards ease-in-out; animation: hoverBtn .6s forwards ease-in-out; } .index_banner_hover .public_btn_label:nth-child(2) .index_more_label span { -webkit-animation: hoverBtn2 .6s forwards ease-in-out; animation: hoverBtn2 .6s forwards ease-in-out; } .index_banner_hover .public_btn_label:nth-child(2) .index_more_icon { -webkit-animation: hoverBtn2 .6s forwards ease-in-out; animation: hoverBtn2 .6s forwards ease-in-out; } .index_banner_default:before { -webkit-transform: translateX(-100%) !important; transform: translateX(-100%) !important; -webkit-animation: DefaultBtnBefore 1.5s forwards ease-in-out; animation: DefaultBtnBefore 1.5s forwards ease-in-out; } .index_banner_default .public_btn_label:nth-child(1) .index_more_label span { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation: DefaultBtn .6s forwards ease-in-out; animation: DefaultBtn .6s forwards ease-in-out; } .index_banner_default .public_btn_label:nth-child(1) .index_more_icon { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation: DefaultBtn .6s forwards ease-in-out; animation: DefaultBtn .6s forwards ease-in-out; } .index_banner_default .public_btn_label:nth-child(2) .index_more_label span { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-animation: DefaultBtn2 .6s forwards ease-in-out; animation: DefaultBtn2 .6s forwards ease-in-out; } .index_banner_default .public_btn_label:nth-child(2) .index_more_icon { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-animation: DefaultBtn2 .6s forwards ease-in-out; animation: DefaultBtn2 .6s forwards ease-in-out; } @keyframes hoverBtnBefore { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes DefaultBtnBefore { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes hoverBtn { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes DefaultBtn { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes hoverBtn2 { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes DefaultBtn2 { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } .index_banner_more .public_btn_label:nth-child(1) .index_more_icon { -webkit-animation-delay: 0ms; animation-delay: 0ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(12) { -webkit-animation-delay: 30ms; animation-delay: 30ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(11) { -webkit-animation-delay: 60ms; animation-delay: 60ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(10) { -webkit-animation-delay: 90ms; animation-delay: 90ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(9) { -webkit-animation-delay: 120ms; animation-delay: 120ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(7) { -webkit-animation-delay: 150ms; animation-delay: 150ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(6) { -webkit-animation-delay: 180ms; animation-delay: 180ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(5) { -webkit-animation-delay: 210ms; animation-delay: 210ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(4) { -webkit-animation-delay: 240ms; animation-delay: 240ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(3) { -webkit-animation-delay: 270ms; animation-delay: 270ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(2) { -webkit-animation-delay: 300ms; animation-delay: 300ms; } .index_banner_more .public_btn_label:nth-child(1) .index_more_label span:nth-child(1) { -webkit-animation-delay: 330ms; animation-delay: 330ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_icon { -webkit-animation-delay: 630ms; animation-delay: 630ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(12) { -webkit-animation-delay: 660ms; animation-delay: 660ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(11) { -webkit-animation-delay: 690ms; animation-delay: 690ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(10) { -webkit-animation-delay: 720ms; animation-delay: 720ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(9) { -webkit-animation-delay: 750ms; animation-delay: 750ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(7) { -webkit-animation-delay: 780ms; animation-delay: 780ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(6) { -webkit-animation-delay: 810ms; animation-delay: 810ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(5) { -webkit-animation-delay: 840ms; animation-delay: 840ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(4) { -webkit-animation-delay: 870ms; animation-delay: 870ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(3) { -webkit-animation-delay: 900ms; animation-delay: 900ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(2) { -webkit-animation-delay: 930ms; animation-delay: 930ms; } .index_banner_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(1) { -webkit-animation-delay: 960ms; animation-delay: 960ms; } .public_btn_box .public_item { min-width: 5px; -webkit-transition: all .6s .2s ease; transition: all .6s .2s ease; } .public_btn_last_box .public_item { min-width: 5px; opacity: 0; -webkit-transform: translateY(70%); transform: translateY(70%); -webkit-transition: all .6s ease; transition: all .6s ease; } .index_more_icon { font-size: 8px; margin-left: 22px; } .index_banner_line { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 97; -webkit-justify-content: center; justify-content: center; height: 120px; } .index_line_center { width: 1px; height: 0; opacity: 0; position: relative; overflow: hidden; } .index_line_after { width: 100%; height: 100%; background: rgba(255, 255, 255, .2); } .index_line_before { width: 100%; height: 100%; position: absolute; top: -120%; left: 0; background: #e75e45; } .index_btn_init .index_banner_button { pointer-events: auto; } .index_btn_init .index_banner_btn { -webkit-transform: translateX(-10px); transform: translateX(-10px); opacity: 1; pointer-events: auto; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .index_line_init .index_line_center { height: 100%; opacity: 1; -webkit-transition: all 1s ease; transition: all 1s ease; } .index_line_init .index_line_before { -webkit-animation: before_infinite 2s infinite normal ease; animation: before_infinite 2s infinite normal ease; } @keyframes before_infinite { 0% { top: -120%; } 100% { top: 120%; } } .page_img_wrap { height: 100%; width: 100%; position: relative; } .page_nav_wrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; /*z-index: 999;*/ z-index: 98; pointer-events: none; -webkit-transition: all .6s ease; transition: all .6s ease; } .page_nav_box { width: 100%; height: 100%; } .page_nav_item { width: 20%; height: 100%; position: relative; padding-top: 34vh; pointer-events: auto; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .page_nav_item:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: rgba(231, 94, 69, 1); z-index: 1; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; opacity: 0; } .page_nav_item:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; z-index: 3; } .page_nav_item:nth-child(2n+1):after { background: #141414; } .page_nav_item:nth-child(2n):after { background: #1a1a1a; } .page_nav_item:hover:nth-child(2n+1):after { background: rgba(20, 20, 20, 0); } .page_nav_item:hover:nth-child(2n):after { background: rgba(26, 26, 26, 0); } .page_nav_item:nth-child(2) { -webkit-transition-delay: 30ms; transition-delay: 30ms; } .page_nav_item:nth-child(3) { -webkit-transition-delay: 60ms; transition-delay: 60ms; } .page_nav_item:nth-child(4) { -webkit-transition-delay: 90ms; transition-delay: 90ms; } .page_nav_item:nth-child(5) { -webkit-transition-delay: 120ms; transition-delay: 120ms; } .page_nav_item .page_nav_content { -webkit-transition-delay: 500ms; transition-delay: 500ms; } .page_nav_item:nth-child(2) .page_nav_content { -webkit-transition-delay: 530ms; transition-delay: 530ms; } .page_nav_item:nth-child(3) .page_nav_content { -webkit-transition-delay: 560ms; transition-delay: 560ms; } .page_nav_item:nth-child(4) .page_nav_content { -webkit-transition-delay: 590ms; transition-delay: 590ms; } .page_nav_item:nth-child(5) .page_nav_content { -webkit-transition-delay: 620ms; transition-delay: 620ms; } .page_nav_current .page_nav_item { -webkit-transform: translateY(0); transform: translateY(0); } .page_nav_current .page_nav_item .page_nav_content { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .page_nav_item:hover .page_nav_img img { -webkit-transform: scale(1); transform: scale(1); } .page_nav_item:hover .page_item_text { color: #fff; } .page_nav_item:hover .page_nav_line:after { top: 0; } .page_nav_img { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 2; } .page_nav_img img { -webkit-transform-origin: top center; transform-origin: top center; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all .6s ease; transition: all .6s ease; } .page_nav_content { position: relative; z-index: 9; -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; -webkit-transition: all .8s ease; transition: all .8s ease; } .page_nav_title { font-size: 18px; line-height: 30px; margin-bottom: 20px; color: #fff; text-align: center; } .page_nav_line { height: 30px; width: 1px; background: #727272; margin: 0 auto; overflow: hidden; position: relative; } .page_nav_line:after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #e75e45; -webkit-transition: all .6s ease; transition: all .6s ease; } .page_nav_list { margin-top: 30px; } .page_item_link { text-align: center; margin-bottom: 20px; } .page_item_link a { display: inline-block; position: relative; } .page_item_link a:after { content: ""; position: absolute; left: -50px; top: 50%; transform: translateY(-50%); width: 30px; height: 1px; opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #e05b44 70%, #e05b44); } .page_item_link a:before { content: ""; position: absolute; right: -50px; top: 50%; transform: translateY(-50%); width: 30px; height: 1px; opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; background-image: linear-gradient(90deg, #e05b44, #e05b44 30%, rgba(255, 255, 255, 0)); } .page_item_link a:hover .page_item_text { color: #e05b44; } .page_item_link a:hover:after { opacity: 1; left: -40px; } .page_item_link a:hover:before { opacity: 1; right: -40px; } .page_item_text { font-size: 15px; line-height: 28px; color: #666666; -webkit-transition: all .6s ease; transition: all .6s ease; } .index_title_center { -webkit-align-items: center; align-items: center; } .index_title_load { width: 52px; height: 52px; position: relative; margin-left: 25px; -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } .title_load_box { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .title_load_text { width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; color: #e75e45; } .title_load_box svg { width: 100%; height: 100%; fill: rgba(0, 0, 0, 0); stroke-width: 2px; stroke: rgba(255, 255, 255, .2); } .title_load_box:nth-child(2) svg { stroke: #df5d45; stroke-dashoffset: 0; stroke-dasharray: 156px; } .index_animate_load .title_load_box:nth-child(2) svg { -webkit-animation: BannerCursor 13s forwards normal linear; animation: BannerCursor 13s forwards normal linear; } @-webkit-keyframes BannerCursor { 0% { stroke-dashoffset: 156px; } 100% { stroke-dashoffset: 0; } } @keyframes BannerCursor { 0% { stroke-dashoffset: 156px; } 100% { stroke-dashoffset: 0; } } .advantage_wrap { height: 100%; width: 100%; position: relative; background: url(../images/grid.png) repeat #1f1f1f; } .advantage_wap_center { height: 100%; width: 100%; position: absolute; left: 0; top: 0; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .advantage_title_box { font-size: 40px; color: #fff; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; margin: 100px 0 70px 0; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } .advantage_title_active { color: #e75e45; } .advantage_wap_wrap { width: 1025px; } .advantage_wap_box { padding-bottom: 51.29007%; position: relative; height: 0; width: 100%; pointer-events: none; } .advantage_wap_list { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .advantage_wap_back { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; } .advantage_wap_item1 { position: absolute; left: 34.296875%; top: 6.55487%; width: 30.9375%; } .advantage_wap_shadow { position: absolute; left: -3.0303%; bottom: -6%; width: 106.0606%; z-index: -1; opacity: 0; } .advantage_run_list { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .advantage_run_item { position: absolute; width: 8px; height: 27.13936%; border-radius: 4px; opacity: 0; background-image: linear-gradient(to bottom, rgba(255, 143, 135, 0), rgba(255, 143, 135, .5)); } .advantage_run_item:nth-child(1) { left: 27%; } .advantage_run_item:nth-child(2) { left: 35%; } .advantage_run_item:nth-child(3) { left: 43%; } .advantage_run_item:nth-child(4) { left: 51%; } .advantage_run_item:nth-child(5) { left: 59%; } .advantage_run_item:nth-child(6) { left: 67%; } .advantage_wap_item2 { position: absolute; left: 13.90625%; top: 3.04878%; width: 19.0625%; } .advantage_wap_item3 { position: absolute; right: 13.640625%; top: -5%; width: 21.25%; } .advantage_wap_item4 { position: absolute; left: 5.703125%; bottom: 18.902439%; width: 25.234375%; } .advantage_wap_item5 { position: absolute; right: 5.703125%; bottom: 18.902439%; width: 27.34375%; } .advantage_wap_face { width: 12%; position: absolute; left: 36%; top: 27%; z-index: 3; -webkit-transform: skew(0, 30deg); transform: skew(0, 30deg); opacity: 0; pointer-events: none; } .advantage_wap_face:after { content: ""; position: absolute; left: 15%; top: 20%; width: 70%; height: 1px; background: #ed725c; z-index: -1; -webkit-animation: Scan 3s infinite linear normal both; animation: Scan 3s infinite linear normal both; } @keyframes Scan { 0% { top: 20%; opacity: 1; } 50% { top: 80%; opacity: .4; } 100% { top: 20%; opacity: 1; } } .advantage_wap_img { position: relative; left: 0; width: 100%; z-index: 3; opacity: 0; } .advantage_wap_index { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } .advantage_wap_light { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; } .advantage_img_label { width: 9.22509%; position: absolute; } .advantage_img_label1 { left: 19%; top: 20.5%; animation: LabelTranslateY 2.4s infinite linear normal both; } .advantage_img_label2 { left: 45.3%; top: 3%; animation: LabelTranslateY 2.4s 1s infinite linear normal both; } .advantage_img_label3 { left: 45%; top: 41.5%; animation: LabelTranslateY 2.4s 1.5s infinite linear normal both; } .advantage_img_label4 { left: 70%; top: 21%; animation: LabelTranslateY 2.4s 2s infinite linear normal both; } @keyframes LabelTranslateY { 0% { /*-webkit-transform: rotateY(0);*/ /*transform: rotateY(0);*/ transform: translateY(0); opacity: 1; } 50% { /*-webkit-transform: rotateY(360deg);*/ /*transform: rotateY(360deg);*/ transform: translateY(-5px); opacity: .6; } 100% { opacity: 1; transform: translateY(0); } } .advantage_line_list { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .advantage_animate_line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .advantage_text_list { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; } .advantage_text_item { color: rgba(255, 255, 255, 0); font-size: 16px; position: absolute; width: 100%; } .about_map_box { -webkit-align-items: flex-start; align-items: flex-start; } .advantage_text_item:nth-child(1) { left: 27%; top: 77.5%; transform: rotate(54deg) skewY(337deg); } .advantage_text_item:nth-child(2) { left: 84%; top: 25.5%; transform: rotate(326deg) skewX(22deg); } .advantage_text_item:nth-child(3) { left: -8%; top: 71.5%; transform: rotate(328deg) skewX(22deg); } .advantage_text_item:nth-child(4) { left: 69%; top: 120.5%; transform: rotate(54deg) skewY(337deg); } .advantage_line_item { position: absolute; } .advantage_line_item svg { fill: none; stroke-width: 1px; } .advantage_animate_item { position: absolute; } .advantage_animate_item svg { fill: none; stroke-width: 3px; } .advantage_line_item1 { width: 100%; left: -55%; top: 45%; } .advantage_animate_item1 { width: 100%; left: -55%; top: 45%; } .advantage_line_item1 .advantage_line_svg, .advantage_animate_item1 .advantage_animate_svg { stroke-dasharray: 240; stroke-dashoffset: -240; -webkit-transform: rotate(33deg); transform: rotate(33deg); stroke: rgba(237, 150, 107, 0); } .advantage_line_item2 { width: 100%; left: -47%; top: 41%; } .advantage_animate_item2 { width: 100%; left: -47%; top: 41%; } .advantage_line_item2 .advantage_line_svg { stroke-dasharray: 240; stroke-dashoffset: -240; -webkit-transform: rotate(33deg); transform: rotate(33deg); stroke: rgba(237, 150, 107, 0); } .advantage_animate_item2 .advantage_animate_svg { stroke-dasharray: 240; stroke-dashoffset: -240; -webkit-transform: rotate(-147deg); transform: rotate(-147deg); stroke: rgba(237, 150, 107, 0); } .advantage_line_item3 { width: 40%; right: -20%; top: 42%; } .advantage_animate_item3 { width: 40%; right: -20%; top: 42%; } .advantage_line_item3 .advantage_line_svg, .advantage_animate_item3 .advantage_animate_svg { stroke-dasharray: 240; stroke-dashoffset: -240; -webkit-transform: rotate(-33deg); transform: rotate(-33deg); stroke: rgba(237, 150, 107, 0); } .advantage_line_item4 { width: 54.57413%; left: -27%; bottom: -16%; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .advantage_animate_item4 { width: 54.57413%; left: -27%; bottom: -16%; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .advantage_line_item4 .advantage_line_svg, .advantage_animate_item4 .advantage_animate_svg { stroke-dasharray: 236; stroke-dashoffset: -236; stroke: rgba(237, 150, 107, 0); } .advantage_line_item5 { width: 54.57413%; right: -23%; bottom: -15%; } .advantage_animate_item5 { width: 54.57413%; right: -23%; bottom: -15%; } .advantage_line_item5 .advantage_line_svg, .advantage_animate_item5 .advantage_animate_svg { stroke-dasharray: 236; stroke-dashoffset: -236; stroke: rgba(237, 150, 107, 0); } .advantage_read_list { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; } .advantage_read_item { opacity: 0; position: absolute; pointer-events: none; width: 30px; height: 30px; cursor: pointer; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .advantage_read_item:nth-child(1) { right: 13%; top: 11%; } .advantage_read_item:nth-child(2) { left: 10%; top: 46%; } .advantage_read_item:nth-child(3) { right: 26%; top: 51%; } .advantage_read_item:nth-child(4) { left: 37%; top: 30%; } .advantage_read_icon { position: relative; width: 6px; height: 6px; } .advantage_read_label { position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); background: #ed725c; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; opacity: 1; box-sizing: border-box; } .advantage_read_label:nth-child(1) { background: #fff; z-index: 1; } .advantage_read_label:nth-child(2) { -webkit-animation: jing_scale 2.4s linear infinite normal both; animation: jing_scale 2.4s linear infinite normal both; } .advantage_read_label:nth-child(3) { -webkit-animation: jing_scale 2.4s .8s linear infinite normal both; animation: jing_scale 2.4s .8s linear infinite normal both; } .advantage_read_label:nth-child(4) { -webkit-animation: jing_scale 2.4s 1.6s linear infinite normal both; animation: jing_scale 2.4s 1.6s linear infinite normal both; } @-webkit-keyframes jing_scale { 0% { width: 100%; height: 100%; opacity: 0; } 20% { width: 200%; height: 200%; opacity: 0.6; } 40% { width: 300%; height: 300%; opacity: 0.4; } 60% { width: 400%; height: 400%; opacity: .2; } 80% { width: 500%; height: 500%; opacity: 0; } 100% { width: 100%; height: 100%; opacity: 0; } } @keyframes jing_scale { 0% { width: 100%; height: 100%; opacity: 0; } 20% { width: 200%; height: 200%; opacity: 0.6; } 40% { width: 300%; height: 300%; opacity: 0.4; } 60% { width: 400%; height: 400%; opacity: .2; } 80% { width: 500%; height: 500%; opacity: 0; } 100% { width: 100%; height: 100%; opacity: 0; } } .advantage_content_list { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; pointer-events: auto; } .advantage_content_item { width: 410px; position: absolute; -webkit-transition: all .6s ease; transition: all .6s ease; min-height: 132px; height: auto; } .advantage_opacity_box { position: relative; min-height: 132px; height: auto; width: 0; overflow: hidden; -webkit-transition: all .6s .3s ease; transition: all .6s .3s ease; } .advantage_content_text { font-size: 14px; line-height: 28px; color: #fff; text-align: right; margin-bottom: 15px; opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all .6s ease; transition: all .6s ease; } .advantage_content_active .advantage_opacity_box { width: 100%; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .advantage_content_active .advantage_content_text { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .6s .8s ease; transition: all .6s .8s ease; } .advantage_opacity_read { width: 410px; -webkit-align-items: flex-end; align-items: flex-end; margin-bottom: 60px; } .advantage_content_item:nth-child(1) .advantage_opacity_read { position: absolute; left: 0; top: 0; } .advantage_content_item:nth-child(2) .advantage_opacity_read { position: absolute; right: 0; top: 0; } .advantage_content_item:nth-child(3) .advantage_opacity_read { position: absolute; left: 0; top: 0; } .advantage_content_item:nth-child(4) .advantage_opacity_read { position: absolute; right: 0; top: 0; } .advantage_content_item:nth-child(1) { right: -24%; bottom: 82%; } .advantage_content_item:nth-child(2) { right: 87%; left: auto; bottom: 48%; } .advantage_content_item:nth-child(3) { right: -11%; bottom: 42%; } .advantage_content_item:nth-child(4) { right: 60%; left: auto; bottom: 63%; } .advantage_after { position: relative; bottom: 0; width: 80px; } .advantage_content_item:nth-child(1) .advantage_after { width: 20%; height: 1px; transform-origin: right bottom; transform: rotate(-45deg); background-image: linear-gradient(to right, rgba(231, 94, 68, 0), rgba(231, 94, 68, .6)); } .advantage_content_item:nth-child(2) .advantage_after { width: 20%; height: 1px; transform-origin: left bottom; transform: rotate(45deg); background-image: linear-gradient(to right, rgba(231, 94, 68, .6), rgba(231, 94, 68, 0)); } .advantage_content_item:nth-child(3) .advantage_after { width: 20%; height: 1px; transform-origin: right bottom; transform: rotate(-45deg); background-image: linear-gradient(to right, rgba(231, 94, 68, 0), rgba(231, 94, 68, .6)); } .advantage_content_item:nth-child(4) .advantage_after { width: 20%; height: 1px; transform-origin: left bottom; transform: rotate(45deg); background-image: linear-gradient(to right, rgba(231, 94, 68, .6), rgba(231, 94, 68, 0)); } .advantage_content_item:nth-child(1) .advantage_content_read { width: 80%; } .advantage_content_item:nth-child(2) .advantage_content_read { width: 80%; } .advantage_content_item:nth-child(3) .advantage_content_read { width: 80%; } .advantage_content_item:nth-child(4) .advantage_content_read { width: 80%; } .advantage_content_item:nth-child(2) .advantage_content_text { text-align: left; } .advantage_content_item:nth-child(4) .advantage_content_text { text-align: left; } .advantage_content_item:nth-child(2) .advantage_opacity_box { position: absolute; top: 0; right: 0; } .advantage_content_item:nth-child(4) .advantage_opacity_box { position: absolute; top: 0; right: 0; } .advantage_content_line { width: 100%; height: 1px; background: rgba(231, 94, 68, .6); } @-webkit-keyframes DownUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 0; } 40% { -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 1; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } } @keyframes DownUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 0; } 40% { -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 1; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } } @-webkit-keyframes BreatheShow { 0% { opacity: .4; } 50% { opacity: 1; } 100% { opacity: .4; } } @keyframes BreatheShow { 0% { opacity: .4; } 50% { opacity: 1; } 100% { opacity: .4; } } @-webkit-keyframes Breathe { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes Breathe { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .advantage_wap_active .advantage_wap_item1 .advantage_run_item { -webkit-animation: DownUp 3.6s infinite linear normal both; animation: DownUp 3.6s infinite linear normal both; } .advantage_wap_active .advantage_wap_item1 .advantage_run_item:nth-child(2) { -webkit-animation-delay: 5s; animation-delay: 5s; } .advantage_wap_active .advantage_wap_item1 .advantage_run_item:nth-child(3) { -webkit-animation-delay: 3s; animation-delay: 3s; } .advantage_wap_active .advantage_wap_item1 .advantage_run_item:nth-child(4) { -webkit-animation-delay: 8s; animation-delay: 8s; } .advantage_wap_active .advantage_wap_item1 .advantage_run_item:nth-child(5) { -webkit-animation-delay: 10s; animation-delay: 10s; } .advantage_wap_active .advantage_wap_item1 .advantage_run_item:nth-child(6) { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } .advantage_wap_active .advantage_title_box { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .6s ease; transition: all .6s ease; } .advantage_wap_active .advantage_wap_item1 .advantage_wap_img { opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .advantage_wap_active .advantage_wap_item1 .advantage_text_item:nth-child(1) { color: rgba(255, 255, 255, 1); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .advantage_wap_active .advantage_wap_item1 .advantage_wap_index { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .advantage_wap_active .advantage_wap_item1 .advantage_wap_light { -webkit-animation: BreatheShow 6s infinite linear normal both; animation: BreatheShow 6s infinite linear normal both; -webkit-animation-delay: 400ms; animation-delay: 400ms; } .advantage_wap_active .advantage_wap_item1 .advantage_wap_shadow { -webkit-animation: Breathe 6s infinite linear normal both; animation: Breathe 6s infinite linear normal both; -webkit-animation-delay: 400ms; animation-delay: 400ms; } .advantage_wap_active .advantage_line_item1 .advantage_line_svg { stroke-dasharray: 3, 5; stroke-dashoffset: 0; -webkit-transition: all .6s ease; transition: all .6s ease; stroke: rgba(237, 150, 107, .5); -webkit-transition-delay: 500ms; transition-delay: 500ms; } .advantage_wap_active .advantage_animate_item1 .advantage_animate_svg { stroke: #e75e45; -webkit-animation: CurrentAnimate1 4s 2s infinite linear normal both; animation: CurrentAnimate1 4s 2s infinite linear normal both; } .advantage_wap_active .advantage_animate_item2 .advantage_animate_svg { stroke: #e75e45; -webkit-animation: CurrentAnimate1 4s 2s infinite linear normal both; animation: CurrentAnimate1 4s 2s infinite linear normal both; } .advantage_wap_active .advantage_line_item2 .advantage_line_svg { stroke-dasharray: 3, 5; stroke-dashoffset: 0; -webkit-transition: all .6s ease; transition: all .6s ease; stroke: rgba(237, 150, 107, .5); -webkit-transition-delay: 500ms; transition-delay: 500ms; } .advantage_wap_active .advantage_wap_item2 .advantage_wap_img { opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 700ms; transition-delay: 700ms; } .advantage_wap_active .advantage_line_item3 .advantage_line_svg { stroke-dasharray: 7, 7; -webkit-transition: all .6s ease; transition: all .6s ease; stroke: rgba(237, 150, 107, 1); -webkit-transition-delay: 800ms; transition-delay: 800ms; } .advantage_wap_active .advantage_animate_item3 .advantage_animate_svg { stroke: #e75e45; -webkit-animation: CurrentAnimate3 4s 3s infinite linear normal both; animation: CurrentAnimate3 4s 3s infinite linear normal both; } .advantage_wap_active .advantage_wap_item1 .advantage_text_item:nth-child(2) { color: rgba(255, 255, 255, 1); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 900ms; transition-delay: 900ms; } .advantage_wap_active .advantage_wap_item3 .advantage_wap_img { opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .advantage_wap_active .advantage_read_item:nth-child(1) { opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .advantage_wap_active .advantage_line_item4 .advantage_line_svg { stroke-dasharray: 3, 5; -webkit-transition: all .6s ease; transition: all .6s ease; stroke: rgba(237, 150, 107, 1); -webkit-transition-delay: 1300ms; transition-delay: 1300ms; } .advantage_wap_active .advantage_animate_item4 .advantage_animate_svg { stroke: #e75e45; -webkit-animation: CurrentAnimate4 4s 3s infinite linear normal both; animation: CurrentAnimate4 4s 3s infinite linear normal both; } .advantage_wap_active .advantage_wap_item1 .advantage_text_item:nth-child(3) { color: rgba(255, 255, 255, 1); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } .advantage_wap_active .advantage_wap_item4 .advantage_wap_img { opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 1500ms; transition-delay: 1500ms; } .advantage_wap_active .advantage_read_item:nth-child(2) { opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 1600ms; transition-delay: 1600ms; } .advantage_wap_active .advantage_line_item5 .advantage_line_svg { stroke-dasharray: 3, 5; -webkit-transition: all .6s ease; transition: all .6s ease; stroke: rgba(237, 150, 107, 1); -webkit-transition-delay: 1700ms; transition-delay: 1700ms; } .advantage_wap_active .advantage_animate_item5 .advantage_animate_svg { stroke: #e75e45; -webkit-animation: CurrentAnimate5 4s 3s infinite linear normal both; animation: CurrentAnimate5 4s 3s infinite linear normal both; } .advantage_wap_active .advantage_wap_item1 .advantage_text_item:nth-child(4) { color: rgba(255, 255, 255, 1); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 1800ms; transition-delay: 1800ms; } .advantage_wap_active .advantage_wap_item5 .advantage_wap_img { opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 1900ms; transition-delay: 1900ms; } .advantage_wap_active .advantage_read_item:nth-child(4) { opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 2000ms; transition-delay: 2000ms; } .advantage_wap_active .advantage_wap_item5 .advantage_wap_face { opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 2100ms; transition-delay: 2100ms; } .advantage_wap_active .advantage_read_item:nth-child(3) { opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 2100ms; transition-delay: 2100ms; } .advantage_wap_active .advantage_wap_back { opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 2200ms; transition-delay: 2200ms; } .advantage_wap_active .advantage_read_item:nth-child(4) { opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 2300ms; transition-delay: 2300ms; } .advantage_wap_active .advantage_wap_more { opacity: 1; -webkit-transform: translateY(-40px); transform: translateY(-40px); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 2300ms; transition-delay: 2300ms; } .advantage_wap_active .advantage_m_more { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 2300ms; transition-delay: 300ms; } .advantage_m_more { margin: 0 auto; -webkit-justify-content: center; justify-content: center; } .partner_swiper_pagination { display: none; } .advantage_wap_more { -webkit-justify-content: center; justify-content: center; opacity: 0; margin: 0; display: none; } .advantage_wap_more a { display: inline-block; line-height: 60px; padding: 1px; position: relative; overflow: hidden; -webkit-border-radius: 4px; border-radius: 4px; box-shadow: 3px 1px 8px rgba(231, 94, 69, 1); margin: 10px 0; opacity: 1 !important; -webkit-transform: translateX(0); transform: translateX(0); } .advantage_wap_more a:before { content: ""; position: absolute; left: 0; top: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); width: 130%; height: 100%; background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); z-index: 3; transition: all 1s ease-in-out; } .advantage_wap_more a:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background-image: linear-gradient(135deg, #e75e45, #f5745d); } .advantage_wap_more a:hover:before { -webkit-transform: translateX(100%); transform: translateX(100%); } .feature_page_wrap { position: relative; width: 100%; height: 100%; background: #1a1a1a; } .feature_icon_box { width: 100px; height: 100px; overflow: hidden; position: relative; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-transform: translateY(20px); transform: translateY(20px); opacity: 0; margin: 0 auto; } .feature_page_box { width: 100%; height: 100%; } .feature_page_content { width: 100%; height: 100%; -webkit-align-items: center; align-items: center; } .feature_page_center { width: 100%; } .feature_page_list { width: 100%; padding: 0 60px; } .feature_icon_list { position: relative; } .feature_page_item { width: 16.66666%; -webkit-justify-content: center; justify-content: center; -webkit-align-items: flex-start; align-items: flex-start; pointer-events: none; } .feature_page_item:nth-child(3n+2) { margin-top: 80px; } .feature_page_item a { display: block; } .feature_page_border { font-size: 78px; margin: 0 auto; background-image: linear-gradient(10deg, #939393, #dadada); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .feature_icon_mark { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; } .feature_icon_default { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; -webkit-transition: all .6s ease; transition: all .6s ease; } .feature_icon_hover { position: absolute; bottom: 0; left: 0; height: 0; width: 100%; overflow: hidden; -webkit-transition: all .6s ease; transition: all .6s ease; } .feature_icon_top { position: absolute; bottom: 0; left: 0; height: 0; width: 100%; overflow: hidden; -webkit-transition: all .6s ease; transition: all .6s ease; } .feature_icon_bottom { position: absolute; bottom: 0; left: 0; height: 0; width: 100%; overflow: hidden; -webkit-transition: all .6s ease; transition: all .6s ease; } .feature_icon_color { position: absolute; bottom: 0; left: 0; font-size: 78px; color: #e75e45; } .feature_icon_current { position: absolute; bottom: 0; left: 0; font-size: 78px; background-image: linear-gradient(10deg, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .feature_icon_label { font-size: 78px; color: #e75e45; position: absolute; top: 0; left: 0; } .feature_icon_item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .feature_item_title { font-size: 16px; line-height: 24px; text-align: center; color: #ffffff; margin: 20px 0 30px 0; -webkit-transform: translateY(20px); transform: translateY(20px); opacity: 0; } .feature_small_wrap { -webkit-transform: scale(0); transform: scale(0); -webkit-justify-content: center; justify-content: center; } .feature_small_circle { position: relative; width: 5px; height: 5px; } .feature_small_label { width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); background: rgba(231, 94, 69, 1); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; border-radius: 50%; color: rgba(0, 0, 0, 0); } .feature_small_label:nth-child(5) { opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .feature_small_label:nth-child(4) { opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .feature_small_label:nth-child(3) { opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .feature_small_label:nth-child(2) { -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .feature_small_label:nth-child(1) { -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .feature_line_wrap { height: 180px; width: 1px; position: relative; margin: 0 auto; overflow: hidden; } .feature_line_box { height: 100%; width: 100%; position: absolute; bottom: 0; left: 0; overflow: hidden; } .feature_line_hover { position: relative; bottom: 0; left: 0; height: 100%; width: 100%; z-index: 2; overflow: hidden; } .feature_line_label { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .6s ease; transition: all .6s ease; } .feature_line_label:after { content: ""; height: 200%; position: absolute; left: 0; top: 100%; width: 100%; background-image: linear-gradient(to bottom, rgba(231, 94, 69, 0) 12.5%, rgba(231, 94, 69, .6) 50%, rgba(231, 94, 69, .6) 87.5%, rgba(231, 94, 69, 0)); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .feature_line_hover:after { content: ""; height: 200%; position: absolute; left: 0; top: 100%; width: 100%; background-image: linear-gradient(to bottom, rgba(218, 218, 218, 0) 12.5%, rgba(218, 218, 218, 1) 50%, rgba(218, 218, 218, 1) 87.5%, rgba(218, 218, 218, 0)); -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .feature_big_circle { width: 21px; height: 21px; margin: 0 auto; position: relative; -webkit-transform: scale(0); transform: scale(0); } .feature_rotate_circle { width: 100%; height: 100%; transform: rotateX(70deg); position: relative; } .feature_big_label { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; background: none; -webkit-transition: all .6s ease; transition: all .6s ease; } .feature_big_label:after { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; -webkit-border-radius: 50%; border-radius: 50%; box-sizing: border-box; -webkit-transform: scale(.4); transform: scale(.4); border: 1px solid rgba(231, 94, 69, 1); -webkit-transition: all .6s ease; transition: all .6s ease; } .feature_big_label:nth-child(1) { background: rgba(231, 94, 69, 1); opacity: .8; } .feature_big_label:nth-child(1):after { display: none; } .feature_big_label:nth-child(2) { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } .feature_page_back { position: absolute; left: 0; top: 50%; width: 100%; opacity: 0; pointer-events: none; } .feature_page_active .feature_page_back { top: 20%; opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; } .featureAnimate { -webkit-animation: PointerBtn 1s 1s forwards ease-in-out; animation: PointerBtn 1s 1s forwards ease-in-out; } @-webkit-keyframes PointerBtn { 0% { pointer-events: none; } 100% { pointer-events: auto; } } @keyframes PointerBtn { 0% { pointer-events: none; } 100% { pointer-events: auto; } } .featureAnimate .feature_big_label:nth-child(2) { transform: scale(2); opacity: .5; -webkit-transition: all .6s ease; transition: all .6s ease; } .featureAnimate .feature_big_label:nth-child(3) { transform: scale(4); opacity: .2; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .featureAnimate .feature_big_circle { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .featureAnimate .feature_line_label:after { top: -100%; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .featureAnimate .feature_small_wrap { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .featureAnimate .feature_small_label:nth-child(2) { width: 400%; height: 400%; opacity: .2; } .featureAnimate .feature_item_title { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .featureAnimate .feature_icon_box { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .featureAnimate .feature_icon_default { height: 0; -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-transition-delay: 700ms; transition-delay: 700ms; } .featureAnimate .feature_icon_top { height: 100%; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 800ms; transition-delay: 800ms; } .featureAnimate .feature_icon_bottom { height: 100%; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .featureAnimate .feature_icon_top .feature_icon_current { opacity: 0; -webkit-transition: all .3s ease; transition: all .3s ease; -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } @-webkit-keyframes icon_scale { 0% { width: 100%; height: 100%; opacity: 0; } 20% { width: 300%; height: 300%; opacity: 0.6; } 40% { width: 500%; height: 500%; opacity: 0.4; } 60% { width: 700%; height: 700%; opacity: .2; } 80% { width: 900%; height: 900%; opacity: 0; } 100% { width: 100%; height: 100%; opacity: 0; } } @keyframes icon_scale { 0% { width: 100%; height: 100%; opacity: 0; } 20% { width: 300%; height: 300%; opacity: 0.6; } 40% { width: 500%; height: 500%; opacity: 0.4; } 60% { width: 700%; height: 700%; opacity: .2; } 80% { width: 900%; height: 900%; opacity: 0; } 100% { width: 100%; height: 100%; opacity: 0; } } /*.feature_page_item a:hover .feature_big_label:nth-child(1) {*/ /* background: #fff;*/ /*}*/ /*.feature_page_item a:hover .feature_big_label:nth-child(2):after {*/ /* border-color: #fff;*/ /*}*/ /*.feature_page_item a:hover .feature_big_label:nth-child(3):after {*/ /* border-color: #fff;*/ /*}*/ /*.feature_page_item a:hover .feature_big_label:nth-child(4):after {*/ /* border-color: #fff;*/ /*}*/ /*.feature_page_item a:hover .feature_line_hover:after {*/ /* top: -200%;*/ /* -webkit-transition-delay: 0ms;*/ /* transition-delay: 0ms;*/ /*}*/ /*.feature_page_item a:hover .feature_line_label {*/ /* top: -100%;*/ /* -webkit-transition-delay: 300ms;*/ /* transition-delay: 300ms;*/ /*}*/ /*.feature_page_item a:hover .feature_small_label:nth-child(1):after {*/ /* -webkit-transition-delay: 300ms;*/ /* transition-delay: 300ms;*/ /*}*/ /*.feature_page_item a:hover .feature_small_label:nth-child(2):after {*/ /* opacity: 0;*/ /* -webkit-transition-delay: 300ms;*/ /* transition-delay: 300ms;*/ /*}*/ /*.feature_page_item a:hover .feature_item_title {*/ /* color: rgba(231, 94, 69, 1);*/ /* -webkit-transition-delay: 500ms;*/ /* transition-delay: 500ms;*/ /* -webkit-transition: all 1s ease;*/ /* transition: all 1s ease;*/ /*}*/ .feature_title_label { -webkit-transition: all .6s ease; transition: all .6s ease; } .feature_page_hover .feature_line_hover:after { top: -200%; -webkit-transition-delay: 0ms; transition-delay: 0ms; } .feature_page_hover .feature_small_label:nth-child(2) { opacity: 0; } .feature_page_hover .feature_small_label:nth-child(3) { -webkit-animation: icon_scale 2.4s linear infinite normal both; animation: icon_scale 2.4s linear infinite normal both; } .feature_page_hover .feature_small_label:nth-child(4) { -webkit-animation: icon_scale 2.4s .8s linear infinite normal both; animation: icon_scale 2.4s .8s linear infinite normal both; } .feature_page_hover .feature_small_label:nth-child(5) { -webkit-animation: icon_scale 2.4s 1.6s linear infinite normal both; animation: icon_scale 2.4s 1.6s linear infinite normal both; } .feature_page_hover .feature_title_label { color: rgba(231, 94, 69, 1); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .partner_wrap { position: relative; width: 100%; height: 100%; background: #1a1a1a; } .partner_box { width: 100%; height: 100%; -webkit-align-items: center; align-items: center; } .partner_content { width: 100%; } .partner_tab_list { position: relative; } .partner_tab_item { width: 20%; opacity: 0; z-index: 9; position: relative; } .partner_tab_item:nth-child(9) a { transform-origin: left top; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .partner_tab_item:nth-child(3) { transform-origin: left top; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .partner_tab_item:nth-child(6) { transform-origin: right top; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .partner_tab_item:nth-child(9) { margin-left: 20%; transform-origin: center top; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .partner_tab_item:nth-child(2) { transform-origin: center bottom; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .partner_tab_item:nth-child(7) { transform-origin: center top; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .partner_tab_item:nth-child(5) { margin-left: 20%; margin-right: 20%; transform-origin: left top; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .partner_tab_item:nth-child(8) { transform-origin: center top; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .partner_tab_item:nth-child(4) { margin-left: 20%; transform-origin: right top; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .partner_tab_item:nth-child(1) { margin-left: 40%; transform-origin: center bottom; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .partner_tab_list:after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); width: 20%; height: 33.34%; background: #e75e45; opacity: 0; } .partner_list_hover:after { background: #292929; -webkit-transition: all .6s ease !important; transition: all .6s ease !important; } /*.partner_tab_list:before {*/ /* content: "";*/ /* position: absolute;*/ /* left: 50%;*/ /* top: 50%;*/ /* -webkit-transform: translateY(-50%) translateX(-50%);*/ /* transform: translateY(-50%) translateX(-50%);*/ /* width: 20%;*/ /* height: 33.34%;*/ /* background: #292929;*/ /* z-index: 1;*/ /* opacity: 0;*/ /*}*/ .partner_tab_item a { display: block; overflow: hidden; position: relative; background: #292929; } .partner_tab_item:nth-child(1) a, .partner_tab_item:nth-child(3) a, .partner_tab_item:nth-child(4) a, .partner_tab_item:nth-child(5) a, .partner_tab_item:nth-child(6) a, .partner_tab_item:nth-child(8) a, .partner_tab_item:nth-child(9) a { background: #212121; } .partner_tab_img { position: relative; } .partner_gray_img { padding-bottom: 57.6388889%; z-index: 3; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .partner_color_img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 3; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .partner_tab_img img { z-index: 2; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .partner_tab_img:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: #fff; opacity: 0; -webkit-transform: translateY(60%); transform: translateY(60%); -webkit-transition: all .6s ease; transition: all .6s ease; } .partner_tab_icon { position: absolute; bottom: 0; left: 0; width: 100%; background: #e75e45; -webkit-transform: translateY(110%); transform: translateY(110%); z-index: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .partner_icon_box { width: 50px; height: 50px; position: relative; margin: 0 auto; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; color: #fff; -webkit-transform: translateX(-20px); transform: translateX(-20px); opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; } .partner_tab_item a:hover .partner_tab_img:after { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; } .partner_tab_item a:hover .partner_tab_img img { height: 80%; left: 10%; width: 80%; -webkit-transition: all .6s 100ms ease; transition: all .6s 100ms ease; } .partner_tab_item a:hover .partner_tab_icon { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .partner_tab_item a:hover .partner_gray_img { opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .partner_tab_item a:hover .partner_color_img { opacity: 1; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .partner_tab_item a:hover .partner_icon_box { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .partner_read { padding: 0 120px; } .partner_swiper_wrap { position: relative; } .partner_title_box { position: absolute; left: 0; top: 0; z-index: 9; opacity: 0; pointer-events: none; -webkit-transform: translateY(40px); transform: translateY(40px); } .partner_title_text { font-size: 40px; line-height: 48px; color: #fff; } .partner_tab_button { padding-left: 30px; } .partner_prev { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .partner_tab_after { width: 48px; height: 48px; background: #292929; margin-left: 1px; position: relative; cursor: pointer; outline: none; overflow: hidden; } .partner_tab_after:after { content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: #e75e45; transition: all .6s ease; } .partner_next:after { left: 0; } .partner_tab_default:after { left: -100%; } .partner_tab_hover:after { left: 0; } .partner_tab_label { position: relative; width: 100%; height: 100%; z-index: 1; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; font-size: 16px; color: #fff; } .partner_active .partner_tab_item { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; -webkit-transition: all .5s cubic-bezier(.27, .48, .51, .95); transition: all .5s cubic-bezier(.27, .48, .51, .95); } .partner_active .partner_tab_list:after { opacity: 1; -webkit-transition: all .6s cubic-bezier(.27, .48, .51, .95); transition: all .6s cubic-bezier(.27, .48, .51, .95); } .partner_active .partner_tab_item:nth-child(1) { -webkit-transition-delay: 100ms; transition-delay: 100ms; } .partner_active .partner_tab_item:nth-child(4) { -webkit-transition-delay: 200ms; transition-delay: 200ms; } .partner_active .partner_tab_item:nth-child(8) { -webkit-transition-delay: 300ms; transition-delay: 300ms; } .partner_active .partner_tab_item:nth-child(5) { -webkit-transition-delay: 400ms; transition-delay: 400ms; } .partner_active .partner_tab_item:nth-child(7) { -webkit-transition-delay: 500ms; transition-delay: 500ms; } .partner_active .partner_tab_item:nth-child(2) { -webkit-transition-delay: 600ms; transition-delay: 600ms; } .partner_active .partner_tab_item:nth-child(6) { -webkit-transition-delay: 700ms; transition-delay: 700ms; } .partner_active .partner_tab_item:nth-child(9) { -webkit-transition-delay: 800ms; transition-delay: 800ms; } .partner_active .partner_tab_item:nth-child(3) { -webkit-transition-delay: 900ms; transition-delay: 900ms; } .partner_active .partner_tab_item:nth-child(9) a { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all .5s cubic-bezier(.27, .48, .51, .95); transition: all .5s cubic-bezier(.27, .48, .51, .95); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } /*.partner_active .partner_tab_list:before {*/ /* opacity: 1;*/ /* -webkit-transition: all .8s cubic-bezier(.27, .48, .51, .95);*/ /* transition: all .8s cubic-bezier(.27, .48, .51, .95);*/ /* -webkit-transition-delay: 1000ms;*/ /* transition-delay: 1000ms;*/ /*}*/ .partner_title_active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .5s cubic-bezier(.27, .48, .51, .95); transition: all .5s cubic-bezier(.27, .48, .51, .95); pointer-events: auto; -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .partner_swiper_box .swiper-slide { background: #1a1a1a; } .index_tab_wrap { position: relative; width: 100%; height: 100%; } .index_tab_box { position: relative; width: 100%; height: 100%; } .index_tab_box:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 30; } .tab_item_back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; } .tab_back_svg { width: 100vw; height: 100vw; position: absolute; right: -80%; top: 0; } .tab_back_active2 { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .index_tab_active .tab_back_svg { right: 0; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .index_tab_active .tab_back_circle { cx: -80%; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .index_tab_active .index_tab_list { opacity: 1; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition-delay: 900ms; transition-delay: 900ms; } .index_tab_active .tab_back_active { cx: -8%; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .index_tab_active .index_tab_box:before { left: 100%; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .index_tab_active .tab_content_item { opacity: 1; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .index_tab_current .tab_back_active { -webkit-transition-delay: 0ms !important; transition-delay: 0ms !important; } .tab_back_hide { width: 0; } .tab_svg_active .tab_back_active { cx: -8%; } .tab_svg_active .tab_back_active2 { cx: 190%; } .tab_svg_current .tab_back_active { cx: -90%; } .tab_svg_current .tab_back_active2 { cx: 108%; } .index_tab_list { position: relative; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .index_tab_item { width: 50vw; height: 100%; pointer-events: auto; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; position: relative; overflow: hidden; z-index: 10; } .index_tab_hover { position: relative; height: 100%; width: 100%; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .tab_item_active { pointer-events: auto; } .index_tab_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .index_tab_img:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); pointer-events: none; } .index_tab_content { position: relative; z-index: 99; width: 76%; } .tab_read_item { width: 33.33333%; padding: 25px 0; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .tab_read_item a { width: 100%; } .tab_read_item a:hover .tab_read_title { color: #e75e45; } .tab_read_item a:hover .tab_read_label:after { background: #e75e45; } .tab_read_item a:hover .tab_read_label:before { background: #e75e45; } .tab_read_title { font-size: 18px; line-height: 30px; color: #fff; -webkit-transition: all .6s ease; transition: all .6s ease; } .index_tab_head { /*-webkit-transform: translateY(60px);*/ /*transform: translateY(60px);*/ -webkit-transition: all .6s ease; transition: all .6s ease; } .index_tab_icon { font-size: 55px; line-height: 60px; text-align: center; color: #fff; -webkit-transform: translateY(40px); transform: translateY(40px); -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .index_tab_title { font-size: 40px; line-height: 52px; margin-top: 30px; text-align: center; color: #fff; -webkit-transform: translateY(40px); transform: translateY(40px); -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transition-delay: 50ms; transition-delay: 50ms; } .index_tab_read { position: relative; left: 0; margin-top: 35px; opacity: 0; height: 240px; -webkit-transform: translateY(40px); transform: translateY(40px); pointer-events: none; -webkit-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; align-content: flex-start; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .tab_content_active .index_tab_icon { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .tab_content_active .index_tab_title { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transition-delay: 50ms; transition-delay: 50ms; } .tab_content_active .index_tab_read { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .tab_content_active .index_tab_read .tab_read_item a { pointer-events: auto; } .tab_read_icon { width: 30px; height: 30px; position: relative; } .tab_read_label { position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); height: 1px; width: 8px; } .tab_read_label:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: all .6s ease; transition: all .6s ease; } .tab_read_label:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transition: all .6s ease; transition: all .6s ease; } .tab_content_list { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 20; } .tab_content_item { width: 50%; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; opacity: 0; } .index_footer_wrap { width: 100%; height: 100%; position: relative; background: #1a1a1a; } .index_footer_box { width: 100%; height: 100%; position: relative; } .index_footer_back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; } .footer_back_img { width: 130.15625%; position: absolute; left: -15.078125%; top: -134%; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .index_footer_content { position: relative; z-index: 9; width: 100%; height: 100%; } .index_footer_top { width: 100%; position: absolute; left: 0; top: 28%; } .index_footer_head { padding-bottom: 50px; } .index_footer_title { font-size: 38px; line-height: 50px; font-weight: bold; color: #fff; text-align: center; margin-bottom: 10px; -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; pointer-events: none; } .index_footer_text { font-size: 16px; line-height: 28px; color: #666666; text-align: center; -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; pointer-events: none; } .index_footer_more { -webkit-justify-content: center; justify-content: center; -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; pointer-events: none; margin: 0; } .index_footer_more a { display: inline-block; line-height: 60px; padding: 1px; position: relative; overflow: hidden; -webkit-border-radius: 4px; border-radius: 4px; box-shadow: 3px 1px 8px rgba(231, 94, 69, 1); margin: 10px 0; opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); cursor: pointer; } .index_footer_more .public_text { font-size: 16px; font-weight: bold; } .index_footer_more a:before { content: ""; position: absolute; left: 0; top: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); width: 130%; height: 100%; background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); z-index: 3; transition: all 1s ease-in-out; } .index_footer_more a:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background-image: linear-gradient(135deg, #e75e45, #f5745d); } .index_footer_more .public_btn_label { -webkit-justify-content: center; justify-content: center; padding: 0 36px; width: 100%; } .index_footer_more .index_more_label { width: 100%; } .index_footer_more .index_more_label span { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; min-width: 5px; } .index_footer_more .index_more_icon { -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .index_footer_more .public_btn_label:nth-child(2) { position: absolute; left: 0; top: 0; } .index_footer_more .public_btn_label:nth-child(2) .index_more_label span { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } .index_footer_more .public_btn_label:nth-child(2) .index_more_icon { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } .index_footer_more .public_btn_label:nth-child(2) .index_more_icon { -webkit-animation-delay: 540ms; animation-delay: 540ms; } .index_footer_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(4) { -webkit-animation-delay: 570ms; animation-delay: 570ms; } .index_footer_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(3) { -webkit-animation-delay: 600ms; animation-delay: 600ms; } .index_footer_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(2) { -webkit-animation-delay: 630ms; animation-delay: 630ms; } .index_footer_more .public_btn_label:nth-child(2) .index_more_label span:nth-child(1) { -webkit-animation-delay: 660ms; animation-delay: 660ms; } .index_footer_bottom { width: 100%; height: auto; position: absolute; bottom: 0; } .footer_address_wrap { height: 100%; overflow: hidden; width: 25%; -webkit-align-items: flex-start; align-items: flex-start; } .footer_ewm_wrap { width: 31.666667%; } .footer_wap_wrap { width: 21.180555%; } #ascrail2001 .nicescroll-cursors { border: none !important; opacity: 1 !important; } .footer_center_wrap { height: 150px; margin-bottom: 40px; width: 100%; } .index_footer_center { padding: 0 240px; width: 100%; } .footer_content_box { position: absolute; left: 0; top: 24%; width: 100%; } .footer_center_box { width: 100%; height: 100%; -webkit-justify-content: space-between; justify-content: space-between; -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; pointer-events: none; -webkit-align-items: flex-start; align-items: flex-start; } .footer_center_box a { position: relative; } .footer_center_box a:after { content: ""; position: absolute; width: 0; left: 0; bottom: 0; height: 1px; background: #fff; -webkit-transition: all .6s ease; transition: all .6s ease; } .footer_center_box a:hover:after { width: 100%; } .footer_address_box { height: 100%; width: 60px; padding-right: 1px; position: relative; } .footer_address_box:after { content: ""; position: absolute; right: 0; top: 0; background: rgba(255, 255, 255, .2); width: 1px; height: 100%; } .footer_address_after { position: absolute; right: 0; top: 0; background: #fff; width: 1px; height: 30px; -webkit-transition: all .6s ease; transition: all .6s ease; } .footer_address_tab { padding-left: 25px; width: calc(100% - 60px); } .footer_address_label { color: #666; font-size: 16px; line-height: 30px; cursor: pointer; -webkit-transition: all .6s ease; transition: all .6s ease; } .footer_address_current { color: #fff; } .footer_address_title { font-size: 18px; line-height: 30px; font-weight: bold; color: #e75e45; margin-bottom: 10px; } .footer_address_line { height: 1px; width: 100%; border-bottom: 1px dashed rgba(255, 255, 255, .3); } .footer_address_tel { padding: 13px 0; } .footer_public_box { -webkit-align-items: flex-start; align-items: flex-start; } .footer_address_tel a { font-size: 20px; line-height: 32px; color: #fff; pointer-events: auto !important; } .footer_address_text { font-size: 15px; line-height: 24px; height: 48px; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .footer_ewm_img { width: 150px; height: 150px; padding: 10px; } .footer_address_read { margin-top: 13px; } .footer_wap_read { margin-top: 13px; } .footer_address_mail { font-size: 15px; line-height: 31px; color: #fff; } .footer_address_mail a { font-size: 15px; line-height: 31px; color: #fff; } .footer_address_content { margin-left: 25px; } .footer_wap_item { width: 33.3333%; padding-right: 32px; } .footer_wap_item a { font-size: 15px; line-height: 31px; color: #fff; display: inline-block; max-width: 100%; pointer-events: auto; } .index_footer_bottom_line { width: 100%; height: 1px; background: rgba(255, 255, 255, .1); -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; pointer-events: none; } .index_footer_bq { width: 100%; font-size: 14px; line-height: 26px; color: #4c4c4c; text-align: center; padding: 50px 0; -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; pointer-events: none; -webkit-justify-content: center; justify-content: center; } .index_footer_bq a { font-size: 14px; line-height: 26px; color: #4c4c4c; margin: 0 15px; -webkit-transition: all .6s ease; transition: all .6s ease; } .index_footer_bq a:hover { color: #fff; } .index_footer_by a { margin: 0; } .index_footer_active .index_footer_title { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; } .index_footer_active .index_footer_text { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .index_footer_active .index_footer_more { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .index_footer_active .footer_center_box { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .index_footer_active #ascrail2001 { top: 0 !important; opacity: 1 !important; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .index_footer_active .index_footer_bottom_line { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 400ms; transition-delay: 400ms; } .index_footer_active .index_footer_bq { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: auto; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .index_hide_text { display: none; opacity: 0; } /*.index_footer_svg {*/ /* width: 157.6vw;*/ /* height: 157.6vw;*/ /* position: absolute;*/ /* !*top: -170%;*!*/ /* !*left: -28.8%;*!*/ /* top: -110%;*/ /* left: -28%;*/ /* -webkit-transition: all 1s ease-in-out;*/ /* transition: all 1s ease-in-out;*/ /* transform: rotate(175deg);*/ /*}*/ /*.f_c {*/ /* cx: 50%;*/ /* cy: 50%;*/ /* -webkit-transition: all 2s ease-in-out;*/ /* transition: all 2s ease-in-out;*/ /*}*/ /*.f_c1 {*/ /* r: 50%;*/ /*}*/ /*.f_c2 {*/ /* r: 44.27%;*/ /*}*/ /*.f_c3 {*/ /* r: 38.75%;*/ /*}*/ /*.f_c4 {*/ /* r: 33.958333%;*/ /*}*/ /*.f_c5 {*/ /* r: 29.583333%;*/ /*}*/ /*.f_c6 {*/ /* r: 25.46875%;*/ /*}*/ /*.f_c7 {*/ /* r: 21.71875%;*/ /*}*/ /*.f_c8 {*/ /* r: 18.28125%;*/ /*}*/ /*.f_c9 {*/ /* r: 14.6354%;*/ /*}*/ /*.f_c10 {*/ /* r: 10.36458%;*/ /*}*/ /*.f_c11 {*/ /* r: 6.666666%;*/ /*}*/ .animate_pjax_none a { pointer-events: none !important; } .animate_pjax { position: fixed; left: 0; top: 100%; width: 100%; height: 300%; z-index: 999999; background-image: linear-gradient(to bottom, rgba(4, 4, 4, 0), rgba(4, 4, 4, 1) 20%, rgba(4, 4, 4, 1) 80%, rgba(4, 4, 4, 0)); } .animate_pjax_active { top: -100%; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .animate_pjax_remove { top: 100%; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .loading_wap_text { display: none; } #content { background: rgba(31, 31, 31, 1); min-height: 100vh; } .header_active { pointer-events: auto; } .header_active:after { top: 0; } .header_active .header_nav_item { margin: 30px 38px; } .header_active .header_box { padding: 0; } .header_page_active { pointer-events: auto; } .header_page_active:after { top: 0; } .header_page_active .header_nav_item { margin: 30px 38px; } .header_page_active .header_box { padding: 0; } .header_read_active { pointer-events: auto; } .header_read_active:after { top: 0; } .header_read_active .header_nav_item { padding: 30px 38px; } .header_read_active .header_box { padding: 0; } .header_after:after { top: -100%; } .public_page_banner { height: 100vh; position: relative; overflow: hidden; } .public_page_pic { height: 100%; position: relative; } .public_page_img { width: 100%; height: 100%; } .core_public_center { padding: 0 12.5vw; } .public_banner_content { width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .public_banner_title { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .public_banner_cn { font-size: 40px; line-height: 52px; font-weight: bold; color: #fff; margin-right: 15px; } .public_banner_en { font-size: 48px; line-height: 52px; text-transform: uppercase; color: #e65e44; } .public_banner_line { width: 70px; height: 2px; position: relative; margin: 30px 0; } .public_line_after { position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #e65e44; opacity: 0; -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } .public_banner_text { font-size: 52px; line-height: 90px; color: #fff; -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out;; } .public_nav_wrap { position: absolute; bottom: 0; left: 0; z-index: 9; width: 100%; height: 200px; -webkit-align-items: flex-end; align-items: flex-end; } .public_nav_wrap:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url(../images/nav_after.png) repeat-x; -webkit-transform: translateY(100%); transform: translateY(100%); } .public_nav_box { width: 100%; -webkit-justify-content: center; justify-content: center; position: relative; z-index: 9; -webkit-transform: translateY(100%); transform: translateY(100%); } .public_nav_box:after { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; width: 0; height: 1px; background: rgba(255, 255, 255, .1); } .public_nav_link, .news_head_link { position: relative; } .public_nav_link:after, .news_head_link:after { content: ""; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 20px; border-left: 1px dotted rgba(246, 246, 246, .6); } .public_nav_link:last-child:after, .news_head_link:last-child:after { display: none; } .public_nav_link a { font-size: 18px; line-height: 80px; color: #fff; padding: 0 50px; -webkit-transition: all .6s ease; transition: all .6s ease; } .public_nav_link a:hover { color: #e65e44; } .news_head_link a { font-size: 14px; line-height: 60px; color: rgba(255, 255, 255, .7); padding: 0 50px; -webkit-transition: all .6s ease; transition: all .6s ease; } .news_head_link a:hover { color: rgba(255, 255, 255, 1); } .public_nav_current a { font-weight: bold; color: #e65e44; } .core_platform_content { padding-top: 140px; position: absolute; width: 100%; left: 0; top: 0; z-index: 2; } .core_platform_head { position: relative; } .core_platform_back { position: relative; padding-bottom: 69.41544885%; width: 100%; } .core_platform_title { text-align: center; } .core_platform_cn { font-size: 40px; line-height: 52px; color: #ffffff; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out;; } .core_platform_en { font-size: 48px; line-height: 60px; text-transform: uppercase; color: rgba(255, 255, 255, .2); -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out;; } .core_platform_line { width: 50px; height: 2px; position: relative; margin: 20px auto 0; } .core_line_after { position: absolute; left: 50%; top: 0; width: 0; opacity: 0; height: 100%; background: #e65e44; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } .city_features_item .core_line_after { position: absolute; left: 0; top: 0; width: 0; opacity: 0; height: 100%; background: #e65e44; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } .core_platform_text { font-size: 24px; line-height: 36px; margin-top: 50px; color: #fff; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .core_platform_item { height: 220px; -webkit-align-items: flex-end; align-items: flex-end; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .core_wap_tab .swiper-wrapper { -webkit-flex-wrap: wrap; flex-wrap: wrap; } .core_wap_tab .swiper-wrapper .swiper-slide { width: 29.58333333%; margin: 0 5.625% 70px 0; } .core_wap_tab .swiper-wrapper .swiper-slide:nth-child(3n) { margin: 0 0 70px 0; } .core_plat_box { width: 100%; } .plat_service_box { width: 100%; } .plat_item_icon { font-size: 50px; line-height: 60px; color: #ffffff; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .core_tab_box { -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .plat_item_title { margin-top: 15px; font-size: 20px; line-height: 30px; font-weight: bold; color: #e65e44; } .plat_item_content { margin-top: 20px; height: 0; overflow: hidden; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .plat_item_text { font-size: 15px; line-height: 24px; color: #fff; } .plat_item_line { height: 1px; width: 100%; position: relative; margin-top: 45px; overflow: hidden; } .plat_item_line:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .2); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .plat_item_line:before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #e65e44; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_platform_list { margin-top: 90px; align-items: flex-end; } .core_platform_current .plat_item_icon { color: #e65e44; } .core_platform_current .plat_item_content { height: 48px; } .core_platform_current .plat_item_line:before { width: 100%; } .core_platform_current .plat_item_line:after { left: 100%; } .core_tab_title { width: 20.8333333%; position: relative; z-index: 9; background: #1f1f1f; } .core_plat_tab { width: 79.1666667%; overflow: hidden; } .core_plat_tab .swiper-slide { background: #fff; } .core_tab_link { position: relative; z-index: 10; cursor: pointer; } .core_tab_label { font-size: 16px; line-height: 100px; text-align: center; color: #fff; } .core_tab_after { position: absolute; left: 0; top: 0; width: 100%; height: 100px; background: #e65e44; z-index: 9; -webkit-transition: all .6s ease; transition: all .6s ease; } .core_tab_after:after { content: ""; position: absolute; z-index: -1; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -6px; width: 0; height: 0; border-left: 6px solid #e65e44; border-top: 6px solid transparent; border-bottom: 6px solid transparent; -webkit-transition: all .6s ease; transition: all .6s ease; } .core_tab_link:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; z-index: 9; background: rgba(255, 255, 255, .1); } .core_platform_foot { background: #1a1a1a; } .plat_tab_img { height: 100%; position: relative; } .plat_tab_img img { left: -10%; top: -10%; width: 120%; height: 120%; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .plat_tab_img:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #1a1a1a; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_tab_active .plat_tab_img:after { height: 0; -webkit-transition-delay: .6s; transition-delay: .6s; } .core_tab_active .plat_tab_img img { width: 100%; height: 100%; left: 0; top: 0; -webkit-transition-delay: .6s; transition-delay: .6s; } .core_chip_black { padding-bottom: 62.5%; } .core_chip_wrap { position: relative; overflow: hidden; } .core_chip_box { position: absolute; width: 100%; z-index: 9; top: 0; left: 0; margin-top: 140px; } .core_chip_bottom { position: absolute; bottom: 0; width: 100%; z-index: 9; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .chip_item_box { width: 33.055555%; margin-right: 0.4166675%; background-image: linear-gradient(135deg, #e75e45, #f5745d); font-size: 18px; line-height: 90px; text-align: center; color: #fff; } .chip_item_box:nth-child(3n) { margin-right: 0; } .about_head_wrap { background: #1a1a1a; } .about_head_left { width: 31.25%; padding-left: 240px; position: relative; z-index: 6; } .about_head_left:after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #e65e44; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .about_title_box { padding: 169px 0; position: relative; z-index: 9; } .about_head_right { width: 68.75%; } .about_head_title { -webkit-align-items: center; align-items: center; margin-bottom: 40px; -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .about_head_read { -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .about_title_cn, .about_vision_cn { font-size: 40px; line-height: 52px; color: #fff; } .about_title_en, .about_vision_en { margin-left: 5px; font-size: 48px; line-height: 60px; text-transform: uppercase; color: rgba(255, 255, 255, .2); } .about_head_read { -webkit-align-items: center; align-items: center; } .about_head_text { font-size: 30px; line-height: 42px; font-weight: bold; color: #fff; } .about_head_icon { margin-left: 25px; position: relative; } .about_head_label { width: 0; height: 0; padding-right: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid rgba(255, 255, 255, 1); } .about_head_label:nth-child(1) { -webkit-animation: LableAnimate1 3s infinite linear normal both; animation: LableAnimate1 3s infinite linear normal both; } .about_head_label:nth-child(2) { -webkit-animation: LableAnimate2 3s infinite linear normal both; animation: LableAnimate2 3s infinite linear normal both; } .about_head_label:nth-child(3) { -webkit-animation: LableAnimate3 3s infinite linear normal both; animation: LableAnimate3 3s infinite linear normal both; } .about_head_label:nth-child(4) { position: absolute; right: -10px; top: 0; opacity: 0; -webkit-animation: LableAnimate4 3s infinite linear normal both; animation: LableAnimate4 3s infinite linear normal both; } .about_head_label:nth-child(5) { position: absolute; left: -10px; top: 0; opacity: 0; -webkit-animation: LableAnimate5 3s infinite linear normal both; animation: LableAnimate5 3s infinite linear normal both; } @keyframes LableAnimate1 { 0% { opacity: .1; } 20% { opacity: .4; -webkit-transform: translateX(100%); transform: translateX(100%); } 40% { opacity: 1; -webkit-transform: translateX(200%); transform: translateX(200%); } 60% { opacity: 0; -webkit-transform: translateX(300%); transform: translateX(300%); } 80% { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: .1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes LableAnimate2 { 0% { opacity: .4; } 20% { opacity: 1; -webkit-transform: translateX(100%); transform: translateX(100%); } 40% { opacity: 0; -webkit-transform: translateX(200%); transform: translateX(200%); } 60% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 80% { opacity: .1; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { opacity: .4; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes LableAnimate3 { 0% { opacity: 1; } 20% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 40% { opacity: 0; -webkit-transform: translateX(-200%); transform: translateX(-200%); } 60% { opacity: .1; -webkit-transform: translateX(-200%); transform: translateX(-200%); } 80% { opacity: .4; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes LableAnimate4 { 0% { opacity: 0; } 20% { opacity: 0; -webkit-transform: translateX(-300%); transform: translateX(-300%); } 40% { opacity: .1; -webkit-transform: translateX(-300%); transform: translateX(-300%); } 60% { opacity: .4; -webkit-transform: translateX(-200%); transform: translateX(-200%); } 80% { opacity: 1; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes LableAnimate5 { 0% { opacity: 0; } 20% { opacity: .1; -webkit-transform: translateX(100%); transform: translateX(100%); } 40% { opacity: .4; -webkit-transform: translateX(200%); transform: translateX(200%); } 60% { opacity: 1; -webkit-transform: translateX(300%); transform: translateX(300%); } 80% { opacity: 0; -webkit-transform: translateX(400%); transform: translateX(400%); } 100% { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0); } } .about_head_box { height: 100%; } .about_head_item { width: 25%; height: 100%; overflow: hidden; position: relative; -webkit-align-items: center; align-items: center; -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .about_head_item:nth-child(1) { -webkit-transition-delay: 700ms; transition-delay: 700ms; z-index: 5; } .about_head_item:nth-child(2) { -webkit-transition-delay: 900ms; transition-delay: 900ms; z-index: 4; } .about_head_item:nth-child(3) { transition-delay: 1100ms; -webkit-transition-delay: 1100ms; z-index: 3; } .about_head_item:nth-child(4) { transition-delay: 1300ms; -webkit-transition-delay: 1300ms; z-index: 2; } .about_item_content { width: 100%; position: relative; z-index: 9; padding: 0 20px; text-align: center; } .about_item_tit { margin: 15px 0; font-size: 30px; line-height: 42px; color: #fff; font-weight: bold; } .about_item_read { height: 0; overflow: hidden; -webkit-transition: all .6s ease; transition: all .6s ease; } .about_item_line { width: 7.6%; height: 2px; background: #fff; margin: 0 auto; } .about_item_text { margin-top: 15px; font-size: 14px; line-height: 30px; color: #fff; } .about_head_back { height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .about_head_back img { -webkit-transition: all .6s ease; transition: all .6s ease; } .about_head_back:after { content: ""; position: absolute; left: 0; top: -10%; width: 100%; height: 130%; background: rgba(0, 0, 0, .85); z-index: 2; -webkit-transition: all .6s ease; transition: all .6s ease; } .about_item_current .about_head_back:after { top: -130%; } .about_head_back:before { content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 100%; background: rgba(230, 94, 68, .8); z-index: 2; -webkit-transition: all .6s ease; transition: all .6s ease; } .about_item_current .about_head_back:before { top: 0; } .about_item_current .about_head_back img { -webkit-transform: scale(1.1); transform: scale(1.1); } .about_vision_back { padding-bottom: 45.8333333%; } .about_vision_box { position: absolute; width: 100%; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .vision_item_icon { width: 60px; height: 60px; margin: 70px auto 0; position: relative; cursor: pointer; -webkit-transform: scale(.8); transform: scale(.8); opacity: 0; pointer-events: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .vision_item_label { width: 100%; height: 100%; box-sizing: border-box; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); transform-origin: center center; } .vision_item_label:nth-child(1) { background: #e65e44; } .vision_item_label:nth-child(1):after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 0; height: 0; border-left: 15px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .vision_item_label:nth-child(2) { border: 1px solid #e65e44; -webkit-animation: label_scale 2.4s linear infinite normal both; animation: label_scale 2.4s linear infinite normal both; } .vision_item_label:nth-child(3) { border: 1px solid #e65e44; -webkit-animation: label_scale 2.4s .8s linear infinite normal both; animation: label_scale 2.4s .8s linear infinite normal both; } .vision_item_label:nth-child(4) { border: 1px solid #e65e44; -webkit-animation: label_scale 2.4s 1.6s linear infinite normal both; animation: label_scale 2.4s 1.6s linear infinite normal both; } @-webkit-keyframes label_scale { 0% { width: 100%; height: 100%; opacity: 0; } 20% { width: 125%; height: 125%; opacity: 0.6; } 40% { width: 150%; height: 150%; opacity: 0.4; } 60% { width: 175%; height: 175%; opacity: .2; } 80% { width: 200%; height: 200%; opacity: 0; } 100% { width: 100%; height: 100%; opacity: 0; } } @keyframes label_scale { 0% { width: 100%; height: 100%; opacity: 0; } 20% { width: 125%; height: 125%; opacity: 0.6; } 40% { width: 150%; height: 150%; opacity: 0.4; } 60% { width: 175%; height: 175%; opacity: .2; } 80% { width: 200%; height: 200%; opacity: 0; } 100% { width: 100%; height: 100%; opacity: 0; } } .about_vision_wrap { position: relative; } .about_vision_title { -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .vision_item_title { text-align: center; margin-top: 90px; } .about_vision_line { width: 3.472222222%; height: 2px; background: #e65e44; margin: 0 auto; } .vision_item_cn { font-size: 50px; line-height: 62px; color: #fff; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .vision_item_en { font-size: 60px; line-height: 72px; text-transform: uppercase; color: #e65e44; margin-top: 20px; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .about_social_wrap { background: #1f1f1f; padding: 170px 0; } .social_img_item { padding: 0 30px; } .social_img_content { position: relative; } .about_social_swiper { position: relative; } .about_social_swiper:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #1f1f1f; z-index: 9; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .social_img_content:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .85); -webkit-transition: all .6s ease; transition: all .6s ease; } .social_img_box { padding-bottom: 63.636363%; } .social_img_box img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .about_social_tab { padding-top: 80px; position: relative; } .social_img_title { padding: 0 30px; font-size: 18px; line-height: 80px; background: #e65e44; color: #fff; text-align: center; } .social_img_current:after { background: rgba(0, 0, 0, 0); } .about_social_button { position: absolute; width: 100%; left: 0; top: 50%; z-index: 9; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-justify-content: space-between; justify-content: space-between; padding: 0 100px; pointer-events: none; } .about_social_icon { width: 60px; height: 60px; position: relative; pointer-events: auto; cursor: pointer; outline: none; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-transform: translateX(30px); transform: translateX(30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .about_social_next { -webkit-transform: translateX(-30px) rotate(180deg); transform: translateX(-30px) rotate(180deg); } .about_social_label { width: 33.33334%; height: 3.33334%; position: relative; } .about_social_label:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: left top; transform-origin: left top; } .about_social_label:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; } .about_development_swiper { position: relative; width: 100%; } .core_chip_list { margin-top: 90px; padding: 0 190px; } .core_chip_head { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .core_chip_item { width: 20%; text-align: center; } .core_chip_icon { font-size: 50px; color: #e65e44; } .core_chip_text { margin: 10px 0; font-size: 24px; line-height: 44px; color: #ffffff; } .core_chip_round { width: 21px; height: 21px; position: relative; margin: 0 auto; } .chip_round_item { position: absolute; left: 50%; top: 50%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .chip_round_border { width: 100%; height: 100%; position: relative; } .chip_round_border:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; -webkit-border-radius: 50%; border-radius: 50%; border: 1px dashed rgba(40, 253, 254, .4); -webkit-animation: RoundRotate 5s infinite linear normal both; animation: RoundRotate 5s infinite linear normal both; } @-webkit-keyframes RoundRotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes RoundRotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .chip_round_max { width: 72%; height: 72%; background: rgba(40, 253, 254, .2); } .chip_round_min { width: 25%; height: 25%; background: rgba(40, 253, 254, 1); } .chip_line_box { position: relative; } .chip_line_back { width: 79.90566%; margin: 0 auto; position: relative; } .chip_line_back svg { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1px; stroke-dasharray: 4, 4; } .chip_current_box { width: 79.90566%; margin: 0 auto; position: relative; } .chip_line_max { overflow: hidden; height: 0; -webkit-transition: all .8s linear; transition: all .8s linear; -webkit-transition-delay: .6s; transition-delay: .6s; } .chip_line_current { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; height: 100%; -webkit-transition: all .8s linear; transition: all .8s linear; -webkit-transition-delay: .6s; transition-delay: .6s; } .chip_light_box { width: 73.9583333%; position: absolute; bottom: 11.2%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .chip_current_box svg { fill: none; stroke: #28fcfd; stroke-width: 1.5px; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .chip_current_box .chip_svg1 { stroke-dasharray: 0, 590; stroke-dashoffset: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .chip_current_box .chip_svg2 { stroke-dasharray: 0, 410; stroke-dashoffset: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .chip_current_box .chip_svg3 { stroke-dasharray: 0, 620; stroke-dashoffset: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .chip_current_box .chip_svg4 { stroke-dasharray: 0, 410; stroke-dashoffset: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .chip_current_box .chip_svg5 { stroke-dasharray: 0, 590; stroke-dashoffset: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_data_wrap { position: relative; } .core_data_back { padding-bottom: 72.9166666%; } .core_data_box { width: 100%; position: absolute; z-index: 9; top: 0; padding-top: 150px; } .footer_page_wrap { padding-top: 100px; background: #0f0f0f; } .footer_page_wrap .footer_center_box, .footer_page_wrap .index_footer_bottom_line, .footer_page_wrap .index_footer_bq { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: auto; } .core_round_list { position: relative; } .core_round_box { position: relative; width: 100%; margin-top: 25px; } .core_round_max { width: 48.611111%; margin: 0 auto; position: relative; opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_round_center { width: 34.7222222%; opacity: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%) rotateX(180deg); transform: translateY(-50%) translateX(-50%) rotateX(180deg); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_round_min { width: 29.166666%; opacity: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_round_mini { width: 25%; opacity: 0; box-sizing: border-box; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_round_img { padding-bottom: 100%; border: 3px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; } .core_round_content { width: 18.0555555%; box-sizing: border-box; position: absolute; top: 50%; left: 50%; opacity: 0; -webkit-transform: translateY(-50%) translateX(-50%) scale(.7); transform: translateY(-50%) translateX(-50%) scale(.7); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_round_read { height: 0; padding-bottom: 100%; -webkit-align-items: center; align-items: center; background-image: linear-gradient(-90deg, #e84a2e, #f5745d); -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; } .core_round_back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; } .core_round_back img { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 200%; height: 200%; object-fit: cover; } .core_round_title { width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .core_round_cn { font-size: 28px; line-height: 40px; font-weight: bold; text-align: center; color: #fff; } .core_round_en { font-size: 30px; line-height: 42px; color: #fff; text-align: center; text-transform: uppercase; } .core_round_tab { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .core_round_item { -webkit-align-items: center; align-items: center; position: absolute; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_round_item1, .core_round_item2, .core_round_item3, .core_round_item4 { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity: 0; } .core_round_item5, .core_round_item6, .core_round_item7, .core_round_item8 { -webkit-transform: translateX(40px); transform: translateX(40px); opacity: 0; } .core_round_item1 { left: -29.7%; top: 17%; } .core_round_item2 { left: -33.5%; top: 36%; } .core_round_item3 { left: -39.4%; top: 55%; } .core_round_item4 { left: -27.5%; top: 74%; } .core_round_item5 { right: -18.5%; top: 17%; } .core_round_item6 { right: -27.5%; top: 36%; } .core_round_item7 { right: -28%; top: 55%; } .core_round_item8 { right: -26%; top: 74%; } /*.core_round_item1 .core_round_item_tit,*/ /*.core_round_item2 .core_round_item_tit,*/ /*.core_round_item3 .core_round_item_tit,*/ /*.core_round_item4 .core_round_item_tit {*/ /* -webkit-transform: translateX(20px);*/ /* transform: translateX(20px);*/ /* opacity: 0;*/ /* -webkit-transition: all .6s ease;*/ /* transition: all .6s ease;*/ /*}*/ /*.core_round_item5 .core_round_item_tit,*/ /*.core_round_item6 .core_round_item_tit,*/ /*.core_round_item7 .core_round_item_tit,*/ /*.core_round_item8 .core_round_item_tit {*/ /* -webkit-transform: translateX(-20px);*/ /* transform: translateX(-20px);*/ /* opacity: 0;*/ /* -webkit-transition: all .6s ease;*/ /* transition: all .6s ease;*/ /*}*/ .core_round_item_tit { -webkit-align-items: center; align-items: center; margin-left: 25px; } .core_round_item_text { font-size: 18px; color: #fff; } .core_round_item1 .core_round_item_text, .core_round_item2 .core_round_item_text, .core_round_item3 .core_round_item_text, .core_round_item4 .core_round_item_text { padding-left: 25px; } .core_round_item5 .core_round_item_text, .core_round_item6 .core_round_item_text, .core_round_item7 .core_round_item_text, .core_round_item8 .core_round_item_text { padding-right: 25px; } .core_round_active .core_round_item_tit { transform: translateX(0); opacity: 1; } .core_round_item_read { width: 6px; height: 6px; position: relative; margin-left: 25px; cursor: pointer; } .core_round_item_icon { width: 40px; height: 40px; color: #e65e44; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .core_round_item_icon:before { font-size: 40px; } .core_round_item_icon.icon-guanxichouqu:before { -webkit-transform: scale(.8); transform: scale(.8); } .core_round_item_icon.icon-shishiquxian:before { -webkit-transform: scale(.8); transform: scale(.8); } .core_round_item_icon.icon-dashujuzhongxin1:before { -webkit-transform: scale(.92); transform: scale(.92); } .core_round_item_icon.icon-a-Asset1:before { -webkit-transform: scale(.92); transform: scale(.92); } .core_round_item_label { width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); background: #e65e44; } .core_round_item_label:nth-child(1) { background: #fff; z-index: 9; } .core_round_item_label:nth-child(2) { -webkit-animation: round_scale 2.4s linear infinite normal both; animation: round_scale 2.4s linear infinite normal both; } .core_round_item_label:nth-child(3) { -webkit-animation: round_scale 2.4s .8s linear infinite normal both; animation: round_scale 2.4s .8s linear infinite normal both; } .core_round_item_label:nth-child(4) { -webkit-animation: round_scale 2.4s 1.6s linear infinite normal both; animation: round_scale 2.4s 1.6s linear infinite normal both; } @-webkit-keyframes round_scale { 0% { width: 100%; height: 100%; opacity: 0; } 20% { width: 200%; height: 200%; opacity: 0.6; } 40% { width: 300%; height: 300%; opacity: 0.4; } 60% { width: 400%; height: 400%; opacity: .2; } 80% { width: 500%; height: 500%; opacity: 0; } 100% { width: 100%; height: 100%; opacity: 0; } } @keyframes jing_scale { 0% { width: 100%; height: 100%; opacity: 0; } 20% { width: 200%; height: 200%; opacity: 0.6; } 40% { width: 300%; height: 300%; opacity: 0.4; } 60% { width: 400%; height: 400%; opacity: .2; } 80% { width: 500%; height: 500%; opacity: 0; } 100% { width: 100%; height: 100%; opacity: 0; } } .core_content_wrap { background: #1a1a1a; } .core_content_item { width: 48.6111%; margin: 0 2.7778% 2.7778% 0; position: relative; overflow: hidden; } .core_content_item:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #1a1a1a; z-index: 9; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_content_item:nth-child(2n) { margin: 0 0 2.7778% 0; } .core_foot_item { width: 31.45833333%; margin-right: 2.812500005%; position: relative; overflow: hidden; } .core_foot_item:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 120%; background: #1a1a1a; z-index: 9; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_foot_item:nth-child(3n) { margin-right: 0; } .core_foot_img { padding-bottom: 66.2251655%; } .core_foot_img img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_content_img { padding-bottom: 57.14285%; } .core_content_img img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .core_content_tit { position: absolute; bottom: 0; left: 0; height: 45%; width: 100%; z-index: 9; -webkit-align-items: flex-end; align-items: flex-end; -webkit-transform: translateY(26px); transform: translateY(26px); -webkit-transition: all .6s ease; transition: all .6s ease; background-image: linear-gradient(to top, rgba(0, 0, 0, .8) 45%, rgba(0, 0, 0, 0)); } .core_content_item:hover .core_content_tit, .core_foot_item:hover .core_content_tit { -webkit-transform: translateY(0); transform: translateY(0); } .core_content_item:hover .core_content_min, .core_foot_item:hover .core_content_min { opacity: 1; } .core_content_label { width: 100%; padding: 30px 40px; } .core_content_max { font-size: 20px; line-height: 32px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .core_content_min { font-size: 14px; line-height: 26px; max-height: 26px; overflow: hidden; color: #fff; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; } .city_smart_wrap { position: relative; } .city_public_box { position: absolute; top: 0; left: 0; width: 100%; padding: 140px 100px 0 100px; } .city_public_box .core_platform_line { width: 50px; } .city_features_item { width: 50%; } .city_features_pop { width: 100%; height: 100%; -webkit-align-items: center; align-items: center; background: #292929; } .city_features_read { width: 100%; padding: 0 0 0 240px; } .city_features_title { text-align: left; } .city_features_title .core_platform_line { width: 50px; margin: 20px 0 0 0; } .city_features_img { padding-bottom: 112.5%; position: relative; } .city_features_img:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #292929; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .AddFeaturesItem:after { width: 0; } /*.city_features_img:after {*/ /* content: "";*/ /* position: absolute;*/ /* left: 0;*/ /* top: 0;*/ /* width: 100%;*/ /* height: 100%;*/ /* background: rgba(0, 0, 0, .7);*/ /*}*/ .city_features_list { padding-right: 100px; margin-top: 80px; } .features_list_wrap { width: 100%; } .features_item_box { width: 33.3333%; margin-bottom: 35px; -webkit-align-content: flex-start; align-content: flex-start; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .features_item_box:nth-child(1) { -webkit-transition-delay: 500ms; transition-delay: 500ms; } .features_item_box:nth-child(2) { -webkit-transition-delay: 600ms; transition-delay: 600ms; } .features_item_box:nth-child(3) { -webkit-transition-delay: 700ms; transition-delay: 700ms; } .features_item_box:nth-child(4) { -webkit-transition-delay: 800ms; transition-delay: 800ms; } .features_item_box:nth-child(5) { -webkit-transition-delay: 900ms; transition-delay: 900ms; } .features_item_box:nth-child(6) { -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .features_item_big { text-align: center; width: 100%; } .features_item_icon { font-size: 48px; color: #e65e44; } .features_item_text { font-size: 16px; line-height: 28px; margin-top: 15px; color: #fff; } .city_features_line { width: 100%; height: 1px; position: relative; } .city_features_line:after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #545454; transition: all .8s ease-in-out; webkit-ransition: all .8s ease-in-out; } .features_text_box { margin-top: 60px; } .features_text_item { width: 50%; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .features_text_tit { margin: 9px 0; position: relative; } .features_text_label { font-size: 18px; line-height: 30px; color: #fff; position: relative; z-index: 1; } .features_text_tit:before { content: ''; position: absolute; bottom: 2px; right: 0; width: 0; height: 8px; background: #e65e44; -webkit-transition: all .6s ease; transition: all .6s ease; } .features_text_tit:hover:before { left: 0; width: 100%; } .city_scenario_wrap { background: #1a1a1a; padding: 140px 0 0 0; } .scenario_img { padding-bottom: 51.388888%; } .scenario_img img { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .scenario_tab { margin: 60px 0 140px 0; position: relative; overflow: hidden; } .scenario_tab:after { content: ""; position: absolute; z-index: 9; left: 0; bottom: 0; width: 100%; height: 100%; background: #1a1a1a; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .scenario_list { -webkit-justify-content: center; justify-content: center; position: absolute; top: 0; width: 100%; z-index: 9; padding-top: 40px; } .scenario_list:after { content: ""; position: absolute; z-index: -1; left: 0; top: -3px; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); border-bottom: 1px solid rgba(255, 255, 255, .2); } .scenario_item { cursor: pointer; } .scenario_text { font-size: 18px; line-height: 60px; margin: 0 45px; color: #ffffff; text-align: center; -webkit-transition: all .6s ease; transition: all .6s ease; } .scenario_icon { margin: 0 auto; width: 7px; height: 7px; position: relative; } .scenario_label { width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); -webkit-transition: all .6s ease; transition: all .6s ease; } .scenario_label:nth-child(1) { background: #fff; z-index: 9; } .scenario_label:nth-child(2) { width: 250%; height: 250%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .8); } .scenario_current .scenario_text { color: #e65e44; font-weight: bold; } .scenario_current .scenario_label:nth-child(2) { background: #e65e44; border: 1px solid #e65e44; -webkit-animation: scenario_scale 2.4s linear infinite normal both; animation: scenario_scale 2.4s linear infinite normal both; } .scenario_current .scenario_label:nth-child(3) { background: #e65e44; -webkit-animation: scenario_scale 2.4s .8s linear infinite normal both; animation: scenario_scale 2.4s .8s linear infinite normal both; } .scenario_current .scenario_label:nth-child(4) { background: #e65e44; -webkit-animation: scenario_scale 2.4s 1.6s linear infinite normal both; animation: scenario_scale 2.4s 1.6s linear infinite normal both; } @-webkit-keyframes scenario_scale { 0% { width: 100%; height: 100%; opacity: 0; } 20% { width: 200%; height: 200%; opacity: 0.6; } 40% { width: 300%; height: 300%; opacity: 0.4; } 60% { width: 400%; height: 400%; opacity: .2; } 80% { width: 500%; height: 500%; opacity: 0; } 100% { width: 100%; height: 100%; opacity: 0; } } @keyframes scenario_scale { 0% { width: 100%; height: 100%; opacity: 0; } 20% { width: 200%; height: 200%; opacity: 0.6; } 40% { width: 300%; height: 300%; opacity: 0.4; } 60% { width: 400%; height: 400%; opacity: .2; } 80% { width: 500%; height: 500%; opacity: 0; } 100% { width: 100%; height: 100%; opacity: 0; } } .city_scenario_box { padding-bottom: 60px; } .case_back { padding-bottom: 44.79166666%; } .case_back img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .case_wrap { position: relative; overflow: hidden; } .case_wrap:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #1a1a1a; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .case_box { position: absolute; top: -100%; left: 0; width: 100%; z-index: 9; -webkit-transition: all 1.2s ease; transition: all 1.2s ease; } .case_content { background: rgba(230, 94, 68, .9); padding: 80px; } .case_title { font-weight: bold; width: 40%; font-size: 24px; line-height: 36px; color: #fff; } .case_read { width: 60%; } .case_item_text { width: 50%; font-size: 16px; line-height: 36px; color: #fff; padding-left: 20px; } .features_item_min { width: 100%; } .features_item_read { width: 100%; overflow: hidden; -webkit-transition: all .6s ease; transition: all .6s ease; opacity: 0; } .features_item_current .features_item_read { opacity: 1; } .features_item_line { height: 20px; width: 1px; background: #e65e44; margin: 0 auto 15px; } .features_item_detail { font-size: 14px; line-height: 22px; color: #999999; } .features_item_center { margin: 0 auto; } .features_life_wrap { width: 100%; position: relative; margin-bottom: 35px; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; -webkit-transition-delay: 800ms; transition-delay: 800ms; } .features_life_min { width: 100%; position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; } .features_life_current { opacity: 1; } .features_life_center { min-height: 66px; } .features_life_min:nth-child(1) { position: relative; } .features_life_min:nth-child(1) .features_life_add { width: 33.3333%; } .features_life_min:nth-child(3) .features_life_add { width: 33.3333%; margin-left: 66.6667%; } .features_life_read { width: 100%; overflow: hidden; -webkit-transition: all .6s ease; transition: all .6s ease; } .features_life_line { height: 20px; width: 1px; background: #e65e44; margin: 0 auto 15px; } .features_life_detail { font-size: 14px; line-height: 22px; color: #999999; } /*妯℃澘2*/ .case_template2 .features_text_item { width: 65%; } .case_template2 .features_text_item:nth-child(2n) { width: 35%; } /*妯℃澘3*/ .case_template3 .features_text_item { width: 100%; } /*妯℃澘4*/ .case_template4 .features_text_item { width: 100%; } /*妯℃澘5*/ .case_template5 .case_item_text { width: 100%; } .case_template5 .features_text_item { width: 100%; } /*妯℃澘6*/ .case_template6 .features_text_item { width: 50%; } .case_template6 .features_item_big { margin-bottom: 15px; } /*妯℃澘7*/ .case_template7 .features_item_box { margin-bottom: 15px; } .case_template7 .features_text_item { width: 100%; } /*妯℃澘8*/ .case_template8 .features_text_item { width: 100%; } .case_template8 .case_item_text { width: 100%; } /*妯℃澘8*/ .case_template9 .features_text_item { width: 100%; } .case_template9 .case_item_text { width: 100%; } .culture_wrap { background: #242424; padding: 150px 0; } .culture_head { -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-end; align-items: flex-end; position: relative; z-index: 9; } .culture_title_box { -webkit-align-items: center; align-items: center; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .culture_title_cn { font-size: 40px; line-height: 100px; color: #fff; } .culture_title_en { margin-left: 15px; font-size: 48px; line-height: 100px; color: rgba(255, 255, 255, .2); text-transform: uppercase; } .culture_list { -webkit-transform: translateX(25px); transform: translateX(25px); } .culture_item .culture_tlt_text { font-size: 18px; line-height: 60px; color: #fff; padding: 0 25px; cursor: pointer; -webkit-transition: all .6s ease; transition: all .6s ease; } .culture_current .culture_tlt_text { color: #e65e44; } .culture_line_box { -webkit-align-items: center; align-items: center; position: relative; top: -7px; } .culture_line_round { width: 13px; height: 13px; } .culture_line_after { width: calc(100% - 13px); height: 1px; position: relative; } .culture_line_after:after { content: ""; position: absolute; width: 0; height: 100%; left: 0; top: 0; background: rgba(255, 255, 255, .1); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .culture_line_round svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, 0); stroke-width: 2px; stroke: #e65e44; stroke-dashoffset: 35; stroke-dasharray: 35; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .culture_tab { margin-top: 50px; position: relative; overflow: hidden; } .culture_tab:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 9; background: #242424; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .culture_swiper { -webkit-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .culture_slide_img { padding-bottom: 51.38888888%; } .culture_slide_img img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .culture_slide_box { position: relative; } .culture_slide_read { padding: 0 100px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 100%; z-index: 9; } .culture_slide_tit { font-size: 30px; line-height: 42px; font-weight: bold; color: #000000; -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; } .culture_slide_head { -webkit-align-items: center; align-items: center; } .culture_slide_line { margin-right: 10px; width: 64px; height: 3px; position: relative; } .culture_slide_line:after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #e65e44; } .culture_slide_en { font-size: 32px; line-height: 44px; color: #e65e44; text-transform: uppercase; -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; } .culture_slide_text { margin-top: 10px; font-size: 22px; line-height: 34px; color: #000000; -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; } .culture_slide_current .culture_slide_line:after { width: 100%; -webkit-transition: all .8s ease; transition: all .8s ease; } .culture_slide_current .culture_slide_tit { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition: all .8s ease; transition: all .8s ease; -webkit-transition-delay: .3s; transition-delay: .3s; } .culture_slide_current .culture_slide_en { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition: all .8s ease; transition: all .8s ease; -webkit-transition-delay: .4s; transition-delay: .4s; } .culture_slide_current .culture_slide_text { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition: all .8s ease; transition: all .8s ease; -webkit-transition-delay: .5s; transition-delay: .5s; } .culture_list { position: relative; } .culture_big { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .culture_tit_after { position: absolute; bottom: 0; left: 0; padding: 0 25px; -webkit-transition: all .6s ease; transition: all .6s ease; } .culture_tit_label { width: 100%; height: 1px; background: #e65e44; } .atmosphere_wrap { padding: 150px 0; position: relative; background: #1a1a1a; } .atmosphere_wrap:after { content: ""; position: absolute; left: 0; top: 0; height: 0; background: #0f0f0f; z-index: 1; width: 100%; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .atmosphere_box { position: relative; z-index: 9; } .atmosphere_tab { margin-top: 50px; } .atmosphere_img { padding-bottom: 134.52914%; } .atmosphere_img img { -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; -webkit-transform: scale(1.1); transform: scale(1.1); } .atmosphere_list { width: 100%; } .atmosphere_content_tab { width: 100%; } .atmosphere_content_tab .swiper-slide { width: 30.9722222%; margin-right: 3.5416667%; } .atmosphere_content_tab .swiper-slide:nth-child(3n) { margin-right: 0; } .atmosphere_item { width: 100%; position: relative; } .atmosphere_item:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; background: #1a1a1a; z-index: 9; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .atmosphere_bottom_box { overflow: hidden; position: relative; } .atmosphere_title { font-size: 16px; line-height: 80px; text-align: center; color: #999999; background: #141414; transform-origin: center top; -webkit-transition: all .6s ease; transition: all .6s ease; } .atmosphere_current .atmosphere_title { background: #e65e44; color: #fff; } .welfare_wrap { background: #141414; padding: 150px 0; } .welfare_item_img { padding-bottom: 69.4444444%; } .welfare_item_tab { width: 50%; position: relative; } .welfare_item_tab:after { content: ""; position: absolute; width: 100%; height: 100%; right: 0; top: 0; background: #1a1a1a; z-index: 9; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .family_item_box .welfare_item_tab:after { left: 0; } .welfare_item_content { width: 50%; -webkit-align-items: center; align-items: center; background: #1a1a1a; } .welfare_list { margin-top: 50px; } .welfare_item_title { font-size: 28px; font-weight: bold; color: #e65e44; -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .welfare_item_text { margin-top: 40px; font-size: 16px; line-height: 30px; color: #ffffff; -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .family_item_box .welfare_item_title { -webkit-transform: translateX(30px); transform: translateX(30px); } .family_item_box .welfare_item_text { -webkit-transform: translateX(30px); transform: translateX(30px); } .welfare_item_read { padding: 0 100px; width: 100%; } .welfare_item_swiper { position: relative; } .family_item_swiper { position: relative; } .family_item_box { margin-top: 60px; } .welfare_item_pagination { width: 100%; height: 70px; position: absolute; z-index: 9; bottom: 0; left: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); padding: 0 30px; -webkit-align-items: center; align-items: center; } .welfare_pagination_wrap { position: relative; width: 100% } .welfare_pagination_tab { width: 100%; } .welfare_pagination_after { position: absolute; bottom: 0; height: 2px; pointer-events: none; background: #fff; -webkit-transition: all .6s ease; transition: all .6s ease; } .welfare_item_label { margin-right: 35px; line-height: 26px; font-size: 16px; color: rgba(255, 255, 255, .4); cursor: pointer; position: relative; -webkit-transition: all .6s ease; transition: all .6s ease; } .welfare_pagination_current { color: rgba(230, 94, 68, 1); } .society_box { position: relative; } .society_back { position: absolute; left: 0; top: 0; width: 100%; } .society_back img { position: relative; } .society_content_box { position: relative; left: 0; top: 0; width: 100%; padding: 280px 0 180px 0; } .society_content_title { font-size: 52px; line-height: 64px; color: #ffffff; text-align: center; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .society_content_button { -webkit-justify-content: center; justify-content: center; margin: 80px 0 55px 0; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .society_content_btn { width: 150px; background: rgba(0, 0, 0, .2); overflow: hidden; margin: 0 10px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all .6s ease; transition: all .6s ease; } .society_content_active { background-image: linear-gradient(135deg, #e75e45, #f5745d); } .society_content_active a { border: 1px solid rgba(255, 255, 255, 1); } .society_content_btn a { display: block; border: 1px solid rgba(255, 255, 255, .3); -webkit-border-radius: 4px; border-radius: 4px; line-height: 48px; font-size: 15px; color: #fff; text-align: center; -webkit-transition: all .6s ease; transition: all .6s ease; } .society_content_search { width: 45.83333333%; margin: 0 auto; -webkit-align-items: center; align-items: center; background: rgba(0, 0, 0, .2); -webkit-border-radius: 35px; border-radius: 35px; position: relative; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .society_content_search:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, .5); -webkit-border-radius: 35px; border-radius: 35px; z-index: 1; box-sizing: border-box; } .society_search_box { width: 100%; position: relative; z-index: 9; -webkit-align-items: center; align-items: center; } .society_search_icon { font-size: 20px; line-height: 70px; color: #fff; width: 56px; padding-right: 10px; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: center; align-items: center; } .society_search_input { padding: 10px 10px; width: calc(100% - 150px); } .society_search_input input { font-size: 16px; line-height: 46px; width: 100%; color: #fff; } .society_search_input input::placeholder { color: #fff; } .society_search_but { margin-right: 4px; cursor: pointer; } .society_search_but button { cursor: pointer; width: 90px; line-height: 58px; font-size: 18px; font-weight: bold; color: #fff; -webkit-border-radius: 29px; border-radius: 29px; background-image: linear-gradient(-135deg, #e75e45, #f5745d); -webkit-transition: all .6s ease; transition: all .6s ease; } .society_search_but button:hover { box-shadow: 0 0 5px rgba(0, 0, 0, .6); } .society_list_wrap { margin-top: 180px; padding: 40px; background: rgba(255, 255, 255, .08); } .society_list_box { background: rgba(20, 20, 20, .8); padding: 60px; width: 100%; } .society_list_head { padding-bottom: 30px; } .society_list_item { -webkit-align-items: flex-start; align-items: flex-start; line-height: 36px; width: 100%; margin-bottom: 20px; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .society_list_item:nth-child(2) { -webkit-transition-delay: 100ms; transition-delay: 100ms; } .society_list_line { width: 100%; height: 1px; position: relative; } .society_list_line:after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #262626; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .society_list_title { -webkit-align-items: center; align-items: center; } .society_list_icon { font-size: 22px; color: #fff; width: 25px; -webkit-justify-content: center; justify-content: center; } .society_list_text { font-size: 16px; color: #fff; padding-left: 15px; width: 115px; } .society_list_list { width: calc(100% - 140px); } .society_list_list a { font-size: 16px; color: #fff; margin: 0 30px; -webkit-transition: all .6s ease; transition: all .6s ease; } .society_list_list a:hover { color: #e65e44 !important; } .society_list_current { color: #e65e44 !important; } .society_item_tit { font-size: 18px; line-height: 40px; color: #fff; font-weight: bold; } .society_item_label { color: rgba(255, 255, 255, .6); font-size: 16px; line-height: 40px; padding: 0 45px; position: relative; } .society_item_label:first-child { padding: 0 45px 0 0; } .society_item_label:after { content: ""; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 36%; width: 1px; background: rgba(255, 255, 255, .6); } .society_item_label:last-child:after { display: none; } .society_list_content { margin-top: 50px; } .society_item_box { background: #1a1a1a; margin-bottom: 30px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .society_item_icon { width: 30px; height: 30px; position: relative; } .society_item_icon:after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); width: 100%; height: 1px; background: #e65e44; } .society_item_icon:before { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); width: 1px; height: 100%; background: #e65e44; -webkit-transition: all .6s ease; transition: all .6s ease; } .society_item_head { -webkit-align-items: center; align-items: center; width: 100%; padding: 30px 40px; } .society_item_read { width: calc(100% - 30px); } .society_item_line { width: 100%; height: 1px; position: relative; } .society_item_line:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #262626; } .society_item_content { width: 100%; height: 0; overflow: hidden; -webkit-transition: all .6s ease; transition: all .6s ease; } .society_item_detail { padding: 0 40px; } .society_item_bjq { font-size: 16px; line-height: 32px; color: rgba(255, 255, 255, .6); padding: 30px 0; } .society_item_current .society_item_icon:before { height: 0; } .society_list_page { -webkit-justify-content: center; justify-content: center; margin: 60px 0 30px 0; } .society_list_page a { color: #cccccc; width: 30px; font-size: 20px; line-height: 30px; margin: 0 20px; text-align: center; } .society_list_page a.current { color: #e65e44; } .page_prev { font-size: 12px !important; } .page_next { font-size: 12px !important; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .society_wrap { background: #0d0d0d; } .news_item_box { width: 31.458333%; margin: 0 2.8125005% 2.8125005% 0; position: relative; -webkit-transform: scale(.8); transform: scale(.8); -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: all .8s ease; transition: all .8s ease; opacity: 0; overflow: hidden; } .news_item_box a { display: block; } .news_item_box:nth-child(3n+2) { -webkit-transition-delay: 100ms; transition-delay: 100ms; } .news_item_box:nth-child(3n) { -webkit-transition-delay: 200ms; transition-delay: 200ms; margin: 0 0 2.8125005% 0; } .news_item_img { padding-bottom: 70.6401766%; } .news_item_img img { -webkit-transition: all .8s ease; transition: all .8s ease; } .news_item_read { padding: 35px 40px; position: relative; } .news_item_read:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #e65e44; z-index: 9; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all .8s ease; transition: all .8s ease; } .news_item_read:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #333333; -webkit-transition: all .8s ease; transition: all .8s ease; } .news_item_box:hover { background: #1f1f1f; box-shadow: 0 0 10px rgba(0, 0, 0, .2); } .news_item_box:hover .news_item_read:before { -webkit-transform: translateX(0); transform: translateX(0); } .news_item_box:hover .news_item_read:after { -webkit-transform: translateX(100%); transform: translateX(100%); } .news_item_box:hover .news_item_img img { -webkit-transform: scale(1.1); transform: scale(1.1); } .news_item_title { font-size: 20px; line-height: 30px; height: 60px; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news_item_time { color: rgba(255, 255, 255, .4); line-height: 40px; margin-top: 10px; } .news_time_icon { font-size: 20px; width: 30px; } .news_time_text { font-size: 16px; width: calc(100% - 30px); } .news_page_wrap { padding: 80px 0 110px 0; background: #1a1a1a; } .news_read_wrap { background: #1a1a1a; padding: 260px 0 200px 0; } .news_read_center { padding: 0 240px 0 360px; } .news_red_left { width: 45.45454%; padding-right: 100px; } .news_red_right { width: 54.54546%; } .news_red_title { font-size: 28px; line-height: 40px; color: #ffffff; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .news_head_icon { font-size: 20px; line-height: 32px; color: rgba(255, 255, 255, .4); } .news_head_text { font-size: 16px; line-height: 32px; color: rgba(255, 255, 255, .4); margin-left: 10px; } .news_head_time { -webkit-align-items: center; align-items: center; } .news_head_item { -webkit-align-items: center; align-items: center; margin-left: 30px; } .news_share_box { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .news_red_pad { margin: 30px 0; -webkit-transition: all .6s ease; transition: all .6s ease; } .news_red_head { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; -webkit-transition-delay: 0ms; transition-delay: 0ms; } .news_share_tit { font-size: 16px; line-height: 92px; text-transform: uppercase; color: rgba(255, 255, 255, .4); -webkit-transition: all .6s ease; transition: all .6s ease; } .news_share_line { height: 1px; background: rgba(255, 255, 255, .1); } .news_share_list { -webkit-align-items: center; align-items: center; } .news_share_item { padding-left: 20px; } .news_share_item a { color: #666666 !important; font-size: 32px; line-height: 32px; height: auto !important; display: block; margin-right: 30px !important; padding: 0 !important; -webkit-transition: all .6s ease; transition: all .6s ease; } .news_share_item a:hover { color: #b3b3b3 !important; } .news_btn_item { line-height: 30px; -webkit-align-items: center; align-items: center; } .news_btn_item a:hover .news_btn_text { color: #fff !important; } .news_btn_item a:hover .news_btn_icon { color: #fff !important; } .news_button_pad { margin-top: 50px; -webkit-transition: all .6s ease; transition: all .6s ease; } .news_button_box { -webkit-justify-content: space-between; justify-content: space-between; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .news_btn_return a { font-size: 16px; line-height: 30px; color: #e65e44; } .news_btn_icon { color: rgba(255, 255, 255, .4); font-size: 14px; -webkit-align-items: center; align-items: center; -webkit-transition: all .6s ease; transition: all .6s ease; } .news_btn_item a .news_btn_text { color: rgba(255, 255, 255, .4); font-size: 16px; -webkit-transition: all .6s ease; transition: all .6s ease; } .news_btn_prev .news_btn_text { margin-left: 10px; -webkit-transition: all .6s ease; transition: all .6s ease; } .news_btn_next .news_btn_text { margin-right: 10px; } .news_btn_next .news_btn_icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .news_red_bjq { font-size: 16px; line-height: 34px; min-height: 35vh; color: #e5e5e5; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .news_red_bjq p { font-size: 16px; line-height: 34px; color: #e5e5e5; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .news_red_bjq img { max-width: 100%; width: auto; margin: 0 auto; padding: 30px 0; } .plat_box { position: relative; } .plat_min_height { position: relative; } .plat_min_height img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .plat_content { position: absolute; left: 0; top: 0; width: 100%; z-index: 9; } .city_smart_img { position: relative; padding-bottom: 56.25%; height: 0; } .city_smart_img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; -webkit-filter: grayscale(70%); filter: grayscale(70%); } .plat_content_max { padding: 140px 0 0 0; } .plat_tab_box { width: 100%; margin: 100px 0 20px 0; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .plat_tab_item { width: 100%; text-align: center; padding-bottom: 80px; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .wap_plat_icon_tab { width: 100%; } .wap_plat_icon_tab .swiper-wrapper { -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-align-items: flex-start; align-items: flex-start; } .wap_plat_icon_tab .swiper-slide { width: 25%; } .plat_icon_box { font-size: 44px; line-height: 50px; color: #e45d44; } .plat_icon_text { font-size: 18px; line-height: 30px; color: #ffffff; margin-top: 15px; } .plat_process_list { background: #e65e44; position: relative; } .plat_process_list:after { content: ""; position: absolute; top: 100%; height: 100%; width: 100%; margin-top: 2px; background-image: linear-gradient(to bottom, rgba(230, 94, 68, .2), rgba(255, 255, 255, 0)); } .plat_process_box { line-height: 65px; width: 33.3333%; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end; position: relative; } .plat_process_box:nth-child(3) { -webkit-justify-content: center; justify-content: center; } .plat_process_content { -webkit-align-items: center; align-items: center; } .plat_process_title { font-size: 18px; color: #fff; font-weight: bold; padding: 0 20px; } .plat_process_label { width: 2px; height: 2px; border-radius: 50%; background: #fff; margin-left: 12px; } .plat_process_label:nth-child(2) { opacity: .9; } .plat_process_label:nth-child(3) { opacity: .8; } .plat_process_label:nth-child(4) { opacity: .7; } .plat_process_label:nth-child(5) { opacity: .6; } .plat_process_label:nth-child(6) { opacity: .5; } .plat_process_label:nth-child(7) { opacity: .4; } .plat_process_label:nth-child(8) { opacity: .3; } .plat_process_label:nth-child(9) { opacity: .2; } .plat_process_label:nth-child(10) { opacity: .15; } .plat_process_label:nth-child(11) { opacity: .1; } .plat_process_read { position: relative; } .plat_process_jt:nth-child(1) { width: 100%; position: absolute; left: -30px; top: 0; opacity: 0; } .plat_process_jt:nth-child(2) { opacity: .4; } .plat_process_jt:nth-child(3) { width: 100%; position: absolute; left: 30px; top: 0; } .plat_advantage_box { position: relative; } .plat_advantage_back { padding-bottom: 56.40625%; } .plat_advantage_content { position: absolute; left: 0; top: 0; width: 100%; z-index: 9; padding: 140px 0; } .AddBanner .public_banner_title { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 1s; transition-delay: 1s; } .AddBanner .public_line_after { width: 100%; opacity: 1; -webkit-transition-delay: .7s; transition-delay: .7s; } .AddBanner .public_banner_text { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 1s; transition-delay: 1s; } /**/ .AddPublicMbxTop:after { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition-delay: 1.3s; transition-delay: 1.3s; } .AddPublicMbxTop .public_nav_box { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } .AddPublicMbxTop .public_nav_box:after { width: 100%; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transition-delay: 1.3s; transition-delay: 1.3s; } /**/ .AddPageTitle .core_platform_cn { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: .1s; transition-delay: .1s; } .AddPageTitle .core_platform_en { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: .3s; transition-delay: .3s; } .AddPageTitle .core_line_after { width: 100%; opacity: 1; -webkit-transition-delay: .5s; transition-delay: .5s; } .AddPageTitle .core_platform_text { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: .7s; transition-delay: .7s; } /**/ .AddPlatList { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); } /**/ .AddChipTab .core_chip_head { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: .1s; transition-delay: .1s; } .AddChipTab .chip_light_box { opacity: .7; -webkit-transition-delay: 1s; transition-delay: 1s; } .AddChipTab .chip_light_box img { -webkit-animation: LightOpacity 2s infinite linear normal both; animation: LightOpacity 2s infinite linear normal both; -webkit-animation-delay: 1s; animation-delay: 1s; } .AddChipTab .chip_current_box .chip_svg1 { -webkit-animation: LineColor1 5s 2s infinite linear normal both; animation: LineColor1 5s 2s infinite linear normal both; } .AddChipTab .chip_current_box .chip_svg2 { -webkit-animation: LineColor2 5s 2s infinite linear normal both; animation: LineColor2 5s 2s infinite linear normal both; } .AddChipTab .chip_current_box .chip_svg3 { -webkit-animation: LineColor3 5s 2s infinite linear normal both; animation: LineColor3 5s 2s infinite linear normal both; } .AddChipTab .chip_current_box .chip_svg4 { -webkit-animation: LineColor2 5s 2s infinite linear normal both; animation: LineColor2 5s 2s infinite linear normal both; } .AddChipTab .chip_current_box .chip_svg5 { -webkit-animation: LineColor1 5s 2s infinite linear normal both; animation: LineColor1 5s 2s infinite linear normal both; } @keyframes LineColor1 { 0% { opacity: 0; stroke-dasharray: 20, 590; stroke-dashoffset: 0; } 20% { opacity: 1; } 40% { stroke-dasharray: 80, 590; stroke-dashoffset: -295; } 60% { opacity: 1; } 80% { stroke-dasharray: 20, 590; stroke-dashoffset: -590; opacity: 0; } 100% { opacity: 0; stroke-dasharray: 0, 590; stroke-dashoffset: 0; } } @keyframes LineColor2 { 0% { opacity: 0; stroke-dasharray: 20, 410; stroke-dashoffset: 0; } 20% { opacity: 1; } 32% { stroke-dasharray: 80, 410; stroke-dashoffset: -164; } 60% { opacity: 1; } 80% { stroke-dasharray: 20, 410; stroke-dashoffset: -410; opacity: 0; } 100% { opacity: 0; stroke-dasharray: 0, 410; stroke-dashoffset: 0; } } @keyframes LineColor3 { 0% { opacity: 0; stroke-dasharray: 40, 620; stroke-dashoffset: 0; } 20% { opacity: 1; } 60% { opacity: 1; } 80% { stroke-dasharray: 40, 620; stroke-dashoffset: -310; opacity: 0; } 100% { opacity: 0; stroke-dasharray: 0, 620; stroke-dashoffset: 0; } } @-webkit-keyframes LightOpacity { 0% { opacity: .7; } 50% { opacity: 1; } 100% { opacity: .7; } } @keyframes LightOpacity { 0% { opacity: .7; } 50% { opacity: 1; } 100% { opacity: .7; } } .AddChipBottom { -webkit-transform: translateY(0); transform: translateY(0); } .AddChipRoundBox .core_round_content { opacity: 1; -webkit-transform: translateY(-50%) translateX(-50%) scale(1); transform: translateY(-50%) translateX(-50%) scale(1); } .AddChipRoundBox .core_round_mini { opacity: 1; -webkit-transition-delay: .4s; transition-delay: .4s; } .AddChipRoundBox .core_round_min { opacity: 1; -webkit-transition-delay: .6s; transition-delay: .6s; } .AddChipRoundBox .core_round_center { opacity: 1; -webkit-transition-delay: .8s; transition-delay: .8s; } .AddChipRoundBox .core_round_max { opacity: 1; -webkit-transition-delay: 1s; transition-delay: 1s; } .AddChipRoundBox .core_round_item1, .AddChipRoundBox .core_round_item2, .AddChipRoundBox .core_round_item3, .AddChipRoundBox .core_round_item4, .AddChipRoundBox .core_round_item5, .AddChipRoundBox .core_round_item6, .AddChipRoundBox .core_round_item7, .AddChipRoundBox .core_round_item8 { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 2s; transition-delay: 2s; } .AddChipRoundBox .core_round_min img { -webkit-animation: RoundImgRotate 90s infinite linear normal both; animation: RoundImgRotate 90s infinite linear normal both; -webkit-animation-delay: .6s; animation-delay: .6s; } .AddChipRoundBox .core_round_center img { -webkit-animation: RoundImgRotate 140s infinite linear normal both; animation: RoundImgRotate 140s infinite linear normal both; -webkit-animation-delay: .8s; animation-delay: .8s; } .AddChipRoundBox .core_round_max img { -webkit-animation: RoundImgRotate 160s infinite linear normal both; animation: RoundImgRotate 160s infinite linear normal both; -webkit-animation-delay: 1s; animation-delay: 1s; } .AddChipRoundBox .core_round_back img { -webkit-animation: RoundImgBack 6s infinite linear normal both; animation: RoundImgBack 6s infinite linear normal both; -webkit-animation-delay: .6s; animation-delay: .6s; } @keyframes RoundImgBack { 0% { top: 0; opacity: 0.4; } 20% { top: 20%; opacity: 1; } 40% { top: 40%; opacity: .6; } 60% { top: 60%; opacity: 1; } 80% { top: 80%; opacity: .6; } 100% { top: 100%; opacity: .4; } } @-webkit-keyframes RoundImgRotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes RoundImgRotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } .core_content_box { -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .AddPlatItemImg:after { height: 0; -webkit-transition-delay: .2s; transition-delay: .2s; } .AddPlatItemImg .core_content_img img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: .4s; transition-delay: .4s; } .AddPlatFootItem:after { height: 0; -webkit-transition-delay: .2s; transition-delay: .2s; } .AddPlatFootItem .core_foot_img img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: .4s; transition-delay: .4s; } .AddPlatTabItem { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: .8s; transition-delay: .8s; } .AddFeaturesList .features_item_box { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); } .AddFeaturesList .features_life_wrap { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); } .AddFeaturesList .city_features_line:after { width: 100%; -webkit-transition-delay: .9s; transition-delay: .9s; } .AddFeaturesList .features_text_item { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .AddScenarioTab:after { height: 0; -webkit-transition-delay: 700ms; transition-delay: 700ms; } .AddScenarioTab .scenario_img img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 800ms; transition-delay: 800ms; } /**/ .AddCaseWrap .case_box { top: 0; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .AddCaseWrap:after { height: 0; -webkit-transition-delay: 700ms; transition-delay: 700ms; } .AddCaseWrap .case_back img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 800ms; transition-delay: 800ms; } .AddAboutHead .about_head_left:after { width: 100%; } .AddAboutHead .about_head_title { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .AddAboutHead .about_head_read { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 700ms; transition-delay: 700ms; } .AddAboutHead .about_head_item { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } /**/ .AddAboutVision .about_vision_title { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); } .AddAboutVision .core_line_after { width: 100%; opacity: 1; -webkit-transition-delay: 400ms; transition-delay: 400ms; } .AddAboutVision .vision_item_cn { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 600ms; transition-delay: 600ms; } .AddAboutVision .vision_item_en { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 800ms; transition-delay: 800ms; } .AddAboutVision .vision_item_icon { -webkit-transform: scale(1); transform: scale(1); opacity: 1; pointer-events: auto; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } /**/ .AddAboutSocialTab:before { height: 0; -webkit-transition-delay: 800ms; transition-delay: 800ms; } .AddAboutSocialTab .social_img_box img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 900ms; transition-delay: 900ms; } .AddAboutSocialTab .about_social_prev { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 1300ms; transition-delay: 1300ms; } .AddAboutSocialTab .about_social_next { opacity: 1; -webkit-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg); -webkit-transition-delay: 1300ms; transition-delay: 1300ms; } /**/ .AddCultureBox .culture_title_box { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .AddCultureBox .culture_big { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .AddCultureBox .culture_line_round svg { stroke-dashoffset: 0; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .AddCultureBox .culture_line_after:after { width: 100%; -webkit-transition-delay: 700ms; transition-delay: 700ms; } .AddCultureBox .culture_tab:after { height: 0; -webkit-transition-delay: 900ms; transition-delay: 900ms; } .AddCultureBox .culture_swiper { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 900ms; transition-delay: 900ms; } .AddCultureBox .culture_slide_img img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } /**/ .AddAtmosphereWrap:after { height: 50%; } .AddAtmosphereWrap .culture_title_box { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .AddAtmosphereWrap .culture_big { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .AddAtmosphereWrap .culture_line_round svg { stroke-dashoffset: 0; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .AddAtmosphereWrap .culture_line_after:after { width: 100%; -webkit-transition-delay: 700ms; transition-delay: 700ms; } .AddAtmosphereWrap .atmosphere_item:after { height: 0; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .AddAtmosphereWrap .atmosphere_img img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 700ms; transition-delay: 700ms; } /**/ .AddWelfareBox .culture_title_box { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .AddWelfareBox .culture_big { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .AddWelfareBox .culture_line_round svg { stroke-dashoffset: 0; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .AddWelfareBox .culture_line_after:after { width: 100%; -webkit-transition-delay: 700ms; transition-delay: 700ms; } /**/ .AddWelfareItem .welfare_item_tab:after { width: 0; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .AddWelfareItem .welfare_item_title { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .AddWelfareItem .welfare_item_text { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } /**/ .AddFamilyItem .welfare_item_tab:after { width: 0; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .AddFamilyItem .welfare_item_title { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .AddFamilyItem .welfare_item_text { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } /**/ .AddNewsItem { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } /**/ .AddSocietyBox .society_content_title { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 700ms; transition-delay: 700ms; } .AddSocietyBox .society_content_button { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 900ms; transition-delay: 900ms; } .AddSocietyBox .society_content_search { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } /**/ .AddSocietyHead .society_list_item { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); } .AddSocietyHead .society_list_line:after { width: 100%; -webkit-transition-delay: 200ms; transition-delay: 200ms; } /**/ .AddSocietyItem { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); } /**/ .AddNewsFixed .news_red_title { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 700ms; transition-delay: 700ms; } .AddNewsFixed .news_red_head { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 900ms; transition-delay: 900ms; } .AddNewsFixed .news_share_box { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .AddNewsFixed .news_button_box { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 1300ms; transition-delay: 1300ms; } /**/ .news_red_bjq .AddNewsBjqItem { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); } /**/ .AddNewsContent { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 700ms; transition-delay: 700ms; } .news_fixed_current { position: fixed; left: 0; top: 170px; width: 100%; padding: 0 240px 0 360px; } .news_fixed_current .news_fixed_content { width: 45.45454%; padding-right: 100px; } .news_fixed_current .news_red_pad { margin: 20px 0; } .news_fixed_current .news_button_pad { margin-top: 30px; } .news_fixed_current .news_share_tit { font-size: 16px; line-height: 70px; } /**/ /*.news_red_fixed {*/ /* transition: all .8s ease-in-out;*/ /*}*/ .news_fixed_fade { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); } /**/ .AddPublicMbx { position: fixed; width: 100%; left: 0; top: 90px; z-index: 99; height: 60px; -webkit-transition: all 0s linear !important; transition: all 0s linear !important; -webkit-transition-delay: 0ms !important; transition-delay: 0ms !important; } .AddPublicDefault { -webkit-transition: all .6s ease !important; transition: all .6s ease !important; -webkit-transition-delay: 0ms !important; transition-delay: 0ms !important; } .AddPublicDefault .public_nav_box { -webkit-transition: all .6s ease !important; transition: all .6s ease !important; -webkit-transition-delay: 0ms !important; transition-delay: 0ms !important; } .AddBanner .AddPublicMbx { /*transform: translateY(0) !important;*/ -webkit-transition: all 0ms linear !important; transition: all 0ms linear !important; -webkit-transition-delay: 0ms !important; transition-delay: 0ms !important; } .AddPublicMbx:after { display: none; } .AddPublicMbx .public_nav_box { background: rgba(230, 94, 68, .9); -webkit-transition-delay: 0ms; transition-delay: 0ms; } .AddPublicMbx .public_nav_link a { line-height: 60px; font-size: 14px; color: rgba(255, 255, 255, .7); } .AddPublicMbx .public_nav_link a:hover { color: rgba(255, 255, 255, 1); } .AddPublicMbx .public_nav_current a { color: #fff; font-weight: bold; } .plat_advantage_round { position: absolute; left: 13.54167%; top: 33.35%; width: 72.91666%; padding-bottom: 72.91666%; pointer-events: none; } .plat_round_label { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; } .plat_round_after { width: 7px; height: 7px; -webkit-border-radius: 50%; border-radius: 50%; background: #e45d44; box-shadow: 0 0 5px #e45d44; } .plat_round_label1 .plat_round_after { position: absolute; left: 9%; top: 21%; } .plat_round_label2 .plat_round_after { position: absolute; left: 97.2%; top: 34.3%; } .plat_round_label3 .plat_round_after { position: absolute; left: 83%; top: 12.4%; } .plat_round_label1 { -webkit-animation: 30s roundRotate infinite linear; animation: 30s roundRotate infinite linear; } .plat_round_label2 { -webkit-animation: 45s roundRotate2 infinite linear; animation: 45s roundRotate2 infinite linear; } .plat_round_label3 { -webkit-animation: 40s roundRotate3 infinite linear; animation: 40s roundRotate3 infinite linear; } @keyframes roundRotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 0; } 5% { opacity: 1; } 15% { -webkit-transform: rotate(30deg); transform: rotate(30deg); } 70% { -webkit-transform: rotate(110deg); transform: rotate(110deg); opacity: 1; } 80% { opacity: 0; -webkit-transform: rotate(130deg); transform: rotate(130deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 0; } } @keyframes roundRotate2 { 0% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 0; } 5% { opacity: 1; } 15% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 70% { -webkit-transform: rotate(-110deg); transform: rotate(-110deg); opacity: 1; } 80% { opacity: 0; -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 0; } } @keyframes roundRotate3 { 0% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 0; } 5% { opacity: 1; } 15% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 70% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 1; } 90% { opacity: 0; -webkit-transform: rotate(-110deg); transform: rotate(-110deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 0; } } .plat_advantage_read { position: absolute; z-index: 9; left: 13.54167%; top: 47.2%; width: 72.91666%; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .AddAdvantageFade { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: .7s; transition-delay: .7s; } .plat_advantage_text { font-size: 28px; line-height: 48px; color: #fff; text-align: center; } .plat_advantage_pagination { position: absolute; top: 78.3%; width: 100%; z-index: 9; } .plat_advantage_pagination:after { content: ""; height: 2px; width: 0; background: #e65e44; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 11px; z-index: -1; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .plat_pagination_box { -webkit-justify-content: center; justify-content: center; -webkit-transform: translateY(-60px); transform: translateY(-60px); } .plat_pagination_item { position: relative; width: 100%; /*width: 10.416667%;*/ -webkit-justify-content: center; justify-content: center; cursor: pointer; opacity: 0; margin-top: 60px; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .plat_pagination_item:nth-child(1) { -webkit-transition-delay: .2s; transition-delay: .2s; } .plat_pagination_item:nth-child(2) { -webkit-transition-delay: .3s; transition-delay: .3s; } .plat_pagination_item:nth-child(3) { -webkit-transition-delay: .4s; transition-delay: .4s; } .plat_pagination_item:nth-child(4) { -webkit-transition-delay: .5s; transition-delay: .5s; } .plat_pagination_line { position: absolute; top: -60px; width: 1px; height: 60px; margin: 0 auto; overflow: hidden; } .plat_pagination_line:after { content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 100%; background-image: linear-gradient(to top, rgba(230, 90, 68, 1), rgba(230, 90, 68, 0)); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .plat_pagination_icon { width: 24px; height: 24px; position: relative; background: rgba(230, 90, 68, .2); -webkit-border-radius: 50%; border-radius: 50%; box-sizing: border-box; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; border: 1px solid transparent; } .plat_pagination_icon:after { content: ""; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); background: #e65e44; border: 1px solid #fff; box-sizing: border-box; -webkit-border-radius: 50%; border-radius: 50%; } .plat_pagination_text { width: 100%; text-align: center; font-size: 18px; line-height: 40px; margin-top: 20px; color: #fff; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .plat_advantage_item { margin: 50px 0; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); filter: blur(2px); } .plat_advantage_active { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .AddAdvantagePagination:after { width: 100%; } .AddAdvantagePagination .plat_pagination_item { opacity: 1; } .plat_icon_line { height: 20px; width: 1px; background: #e65e44; margin: 15px auto; } .plat_icon_read { font-size: 14px; line-height: 24px; color: #999999; } .public_page_wrap { width: 100vw; overflow: hidden; } .plat_images_box { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .plat_images_box img { max-width: 100%; width: auto; margin: 0 auto; } .AddPlatImg { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: .8s; transition-delay: .8s; } .plat_tab_wrap { padding: 0 200px; } .plat_tab_wrap .plat_tab_item { width: 100% !important; } .plat_tab_wrap .swiper-slide { width: 20% !important; } .about_map_wrap { background: #191919; padding: 90px 0 150px 0; } .about_map_list { width: 50%; position: relative; } .about_map_label { position: absolute; left: 24.7%; top: 31.8%; width: 60.8333333%; opacity: 0; z-index: 8; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .about_map_point { fill: #e65e44; fill-rule: evenodd; } .about_map_back { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .about_map_content { position: absolute; top: 49.3%; left: 51.4%; width: 27.71458%; height: 34.263959%; z-index: 9; -webkit-transform-origin: 78% bottom; transform-origin: 78% bottom; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .about_map_content svg { fill: #e65847; fill-rule: evenodd; } .about_map_icon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .about_map_jt { position: absolute; fill: #e65e44; fill-rule: evenodd; } .about_map_jt svg { width: 100%; } .about_map_icon:nth-child(1) .about_map_jt { width: 20.1492%; right: 0; bottom: 0; } .about_map_icon:nth-child(2) .about_map_jt { width: 26.865671%; left: 54.5%; bottom: 0; } .about_map_icon:nth-child(3) .about_map_jt { width: 77.61194%; left: 2%; bottom: 5%; } .about_map_icon:nth-child(4) .about_map_jt { width: 47.761194%; left: 30.22388%; bottom: 0; } .about_map_icon:nth-child(5) .about_map_jt { width: 52.985074%; left: 24.25373%; bottom: 0; } .about_mark_box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .about_mark_item { -webkit-align-items: center; align-items: center; position: absolute; opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .about_mark_item:nth-child(1) { left: 63.8%; top: 82.9%; } .about_mark_item:nth-child(2) { left: 66.5%; top: 33.8%; } .about_mark_item:nth-child(3) { left: 75.5%; top: 43.6%; } .about_mark_item:nth-child(4) { left: 57.5%; top: 49.6%; } .about_mark_item:nth-child(5) { left: 66%; top: 50%; } .about_mark_item:nth-child(6) { left: 76.2%; top: 54%; } .about_mark_item:nth-child(7) { left: 81.2%; top: 59%; } .about_mark_item:nth-child(8) { left: 78.8%; top: 62.5%; } .about_mark_item:nth-child(9) { left: 65.5%; top: 65.3%; } .about_mark_item:nth-child(10) { left: 68.9%; top: 58.9%; } .about_mark_item:nth-child(11) { left: 45.8%; top: 61.2%; } .about_mark_icon { width: 18px; fill: #e65e44; } .about_mark_tit { font-size: 12px; line-height: 24px; color: #fff; margin: 0 0 0 5px; } .about_mark_max .about_mark_tit { font-weight: bold; font-size: 14px; } .about_mark_box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; } .about_map_read { width: 50%; padding: 0 360px 0 75px; margin-top: 4%; -webkit-align-items: center; align-items: center; } .about_map_center { width: 100%; } .about_map_read .core_platform_title { width: 100%; text-align: left; } .about_map_read .core_platform_line { width: 50px; margin: 20px 0 0 0; } .about_map_read .core_line_after { left: 0; -webkit-transform: translateX(0); transform: translateX(0); } .about_number_list { margin-top: 35px; } .about_number_item { width: 50%; padding-bottom: 30px; margin-top: 65px; position: relative; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .about_number_item:first-child .about_number_icon { display: none; } .about_number_item:nth-child(2n) { -webkit-justify-content: flex-start; justify-content: flex-start; } .about_number_item:after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, .1); } .about_number_max { -webkit-justify-content: flex-start; justify-content: flex-start; } .about_number_title { font-size: 68px; line-height: 80px; color: #e65e44; } .about_number_icon { font-size: 22px; line-height: 44px; margin-left: 10px; color: #e65e44; } .about_number_text { font-size: 15px; line-height: 28px; color: #ffffff; } .about_development_wrap { position: relative; } .about_development_box { position: absolute; left: 0; top: 0; width: 100%; z-index: 9; padding: 170px 0 0 0; } /**/ .AddAboutMap .about_map_back { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); } .AddAboutMap .about_map_label { opacity: 1; -webkit-transition-delay: 700ms; transition-delay: 700ms; } .AddAboutMap .about_mark_max { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 900ms; transition-delay: 900ms; } .AddAboutMap .about_map_content { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .AddAboutMap .about_mark_item:nth-child(2) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1500ms; transition-delay: 1500ms; } .AddAboutMap .about_mark_item:nth-child(3) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1600ms; transition-delay: 1600ms; } .AddAboutMap .about_mark_item:nth-child(4) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1700ms; transition-delay: 1700ms; } .AddAboutMap .about_mark_item:nth-child(5) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1800ms; transition-delay: 1800ms; } .AddAboutMap .about_mark_item:nth-child(6) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1900ms; transition-delay: 1900ms; } .AddAboutMap .about_mark_item:nth-child(7) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2000ms; transition-delay: 2000ms; } .AddAboutMap .about_mark_item:nth-child(8) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2100ms; transition-delay: 2100ms; } .AddAboutMap .about_mark_item:nth-child(9) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2200ms; transition-delay: 2200ms; } .AddAboutMap .about_mark_item:nth-child(10) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2300ms; transition-delay: 2300ms; } .AddAboutMap .about_mark_item:nth-child(11) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } /**/ .AddAboutNumber .about_number_item { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: .3s; transition-delay: .3s; } /**/ @keyframes CurrentAnimate1 { 0% { stroke-dasharray: 20, 240; stroke-dashoffset: -240; opacity: 0; } 10% { opacity: 1; } 50% { opacity: 1; } 60% { stroke-dasharray: 20, 240; stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dasharray: 20, 240; stroke-dashoffset: 0; opacity: 0; } } @keyframes CurrentAnimate3 { 0% { stroke-dasharray: 30, 240; stroke-dashoffset: 240; opacity: 0; } 10% { opacity: 1; } 40% { opacity: 1; } 60% { stroke-dasharray: 30, 240; stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dasharray: 30, 240; stroke-dashoffset: 0; opacity: 0; } } @keyframes CurrentAnimate4 { 0% { stroke-dasharray: 30, 236; stroke-dashoffset: 236; opacity: 0; } 10% { opacity: 1; } 40% { opacity: 1; } 60% { stroke-dasharray: 30, 236; stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dasharray: 30, 236; stroke-dashoffset: 0; opacity: 0; } } @keyframes CurrentAnimate5 { 0% { stroke-dasharray: 20, 236; stroke-dashoffset: -236; opacity: 0; } 10% { opacity: 1; } 50% { opacity: 1; } 60% { stroke-dasharray: 20, 236; stroke-dashoffset: -472; opacity: 0; } 100% { stroke-dasharray: 20, 236; stroke-dashoffset: -472; opacity: 0; } } .form_pop_wrap { position: fixed; z-index: 99; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; opacity: 0; pointer-events: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .form_pop_box { width: 43.75%; background: #fff; padding: 65px 0; -webkit-border-radius: 6px; border-radius: 6px; position: relative; -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .form_pop_wrap_for_qd .form_pop_box, .form_pop_wrap_first_qd .form_pop_box { width: 33.333%; } .form_pop_close { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; background: #ea6349; -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; -webkit-transition: all .6s ease; transition: all .6s ease; } .form_pop_close:after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 50%; height: 1px; background: #fff; -webkit-transition: all .6s ease; transition: all .6s ease; } .form_pop_close:before { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg); transform: translateX(-50%) translateY(-50%) rotate(-45deg); width: 50%; height: 1px; background: #fff; -webkit-transition: all .6s ease; transition: all .6s ease; } .form_pop_close:hover { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .form_pop_close:hover:after { width: 60%; } .form_pop_close:hover:before { width: 60%; } .form_pop_title { font-size: 38px; margin-bottom: 40px; font-weight: bold; color: #333333; text-align: center; } .form_pop_content { overflow: auto; max-height: 62vh; padding: 0 90px; } .form_head_title { font-size: 16px; line-height: 30px; color: #666666; } .form_head_list { padding: 10px 0 20px 0; } .form_head_item { margin-right: 30px; font-size: 15px; color: #666666; -webkit-transition: all .4s ease; transition: all .4s ease; } .form_head_item label { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; } .form_head_item:last-child { margin-right: 0; } .form_head_item input { width: 14px; height: 14px; margin-right: 5px; -webkit-border-radius: 50%; border-radius: 50%; position: relative; border: 1px solid #cccccc; background: #fff; -webkit-transition: all .4s ease; transition: all .4s ease; } .form_head_item input:after { content: ""; position: absolute; left: 50%; top: 50%; /*background: #cccccc;*/ -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); -webkit-border-radius: 50%; border-radius: 50%; box-sizing: border-box; width: 50%; height: 50%; -webkit-transition: all .4s ease; transition: all .4s ease; } .form_head_current { color: #ea6349; } .form_head_item input:checked { border: 1px solid #ea6349; } .form_head_item input:checked:after { background: #ea6349; } .form_pop_item { width: 48.484848%; margin: 0 3.030304% 3.030304% 0; } .form_pop_item:nth-child(2n) { margin: 0 0 3.030304% 0; } .form_pop_long_item { width: 100%; margin-bottom: 3.030304%; } .form_pop_input { width: 100%; } .form_pop_input .form_input_box { width: 100%; border: 1px solid #dedede; box-sizing: border-box; color: #333; font-size: 15px; line-height: 44px; padding: 0 15px; } .form_input_current { -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .form_input_current:focus { border-color: rgba(230, 94, 68, 1); outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(230, 94, 68, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(230, 94, 68, .6); } .form_input_check { border: 1px solid #dedede; box-sizing: border-box; color: #333; font-size: 15px; line-height: 44px; padding: 0 15px; width: 46.875%; margin: 0 6.25% 0 0; } .form_pop_check { width: 46.875%; cursor: pointer; height: 44px; } .form_pop_input::placeholder { color: #999; } .form_pop_textarea { width: 100%; } .form_pop_textarea textarea { width: 100%; border: 1px solid #dedede; box-sizing: border-box; color: #333; font-size: 15px; line-height: 26px; height: 100px; padding: 10px 15px; resize: none; } .form_table_read, .form_table_read table p { font-size: 16px; line-height: 30px; color: #777; } .form_table_read p, .form_table_read h1, .form_table_read h2, .form_table_read h3, .form_table_read h4, .form_table_read h5, .form_table_read h6 { font-size: 18px; line-height: 36px; color: #222; padding-top: 26px; padding-bottom: 20px; } .form_table_read table { width: 100%; } .form_table_read table p { padding: 0; } .form_table_read table td { padding: 10px 28px 10px 18px; } .form_table_read tr:nth-child(odd) { background-color: #f5f5f5; } .form_table_read table td { border-right: 3px solid #fff; } .form_pop_bottom { padding-top: 30px; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; } .form_pop_wrap_first_qd .form_pop_bottom { -webkit-justify-content: center; justify-content: center; } .form_pop_button { width: 150px; line-height: 50px; font-size: 16px; color: #fff; text-align: center; background: #f5745d; cursor: pointer; box-shadow: 3px 1px 8px rgba(230, 90, 68, .3); } .form_pop_book label { -webkit-align-items: center; align-items: center; font-size: 14px; color: #999999; } .form_pop_book label a { -webkit-transition: all .4s ease; transition: all .4s ease; color: #999999; } .form_pop_book label a:hover { color: #f5745d; } .form_pop_book input { width: 14px; height: 14px; margin-right: 5px; position: relative; border: 1px solid #cccccc; background: #fff; -webkit-transition: all .4s ease; transition: all .4s ease; } .form_pop_book input:after { content: ""; position: absolute; left: 50%; top: 50%; background: #cccccc; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); box-sizing: border-box; width: 50%; height: 50%; -webkit-transition: all .4s ease; transition: all .4s ease; } .form_pop_book input:checked { background: #ea6349; border: 1px solid #ea6349; } .form_pop_book input:checked:after { background: url(../images/cd-icon-check.svg) no-repeat; background-size: 100% 100%; width: 150%; height: 150%; } .form_pop_active { opacity: 1; pointer-events: auto; -webkit-transition-delay: 0ms; transition-delay: 0ms; } .form_pop_active .form_pop_box { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 200ms; transition-delay: 200ms; } .form_inner_active { opacity: 0; pointer-events: none; } .form_pop_wrap_first_qd .form_pop_box { max-height: 90vh; } .form_success_box { padding: 30px 0; font-size: 24px; line-height: 40px; color: #333; text-align: center; } .form_pop_inner { -webkit-transition: all .6s ease; transition: all .6s ease; } .form_success_reply { opacity: 0; pointer-events: none; position: absolute; top: 50%; left: 20%; width: 60%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .6s ease; transition: all .6s ease; } .form_success_active { opacity: 1; pointer-events: auto; } .core_scrap_title { text-align: center; margin-bottom: 10px; } .core_scrap_icon { width: 0.625vw; height: 0.625vw; background: #e65e44; -webkit-border-radius: 50%; border-radius: 50%; position: relative; margin: 0 auto; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all .3s ease; transition: all .3s ease; } .core_scrap_icon:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-border-radius: 50%; border-radius: 50%; box-sizing: border-box; border: 3px solid #fff; } .core_scrap_text { font-size: 0.8333vw; line-height: 1.458333vw; font-weight: bold; color: #e65e44; -webkit-transition: all .6s ease; transition: all .6s ease; opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } .core_scrap_time { font-size: 0.7291666vw; line-height: 1.3541666vw; color: rgba(255, 255, 255, 1); -webkit-transition: all .6s ease; transition: all .6s ease; opacity: 0; -webkit-transform: translateY(-0.5208333vw); transform: translateY(-0.5208333vw); } .scrap_item_back { width: 6.5625vw; height: 6.5625vw; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-transform: scale(.8); transform: scale(.8); opacity: 0; margin: 0 0.36458333vw; -webkit-transition: all .6s ease; transition: all .6s ease; } .scrap_item_center { width: 60%; font-size: 0.7291666vw; line-height: 0.9375vw; color: #ffffff; text-align: center; } .core_scrap_item1 { width: 20.83333%; } .core_scrap_item2 { width: 13.888888%; } .core_scrap_item3 { width: 13.888888%; } .core_scrap_item4 { width: 30.5555%; } .scrap_item_box { width: 100%; -webkit-justify-content: center; justify-content: center; margin-bottom: 20px; } .core_scrap_list { width: 100%; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-end; align-items: flex-end; position: relative; z-index: 9; } .core_scrap_item2 .core_scrap_title { margin-bottom: 1.82291666vw; } .core_scrap_item3 .core_scrap_title { margin-bottom: 4.1666vw; } .core_scrap_item4 .core_scrap_title { margin-bottom: 6.25vw; } .core_scrap_wrap { padding: 200px 0; background: #1a1a1a; } .core_scrap_box { position: relative; } .core_scrap_read { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .core_line_box1 { width: 23.5%; position: absolute; top: 13%; left: 10.5%; } .core_line_box1 .core_line_san { top: 32%; right: 0; } .core_line_box1 .core_line_item svg { stroke-dasharray: 431; stroke-dashoffset: -431; -webkit-transition: all .4s ease; transition: all .4s ease; } .core_line_box2 .core_line_item svg { stroke-dasharray: 600; stroke-dashoffset: -600; -webkit-transition: all .4s ease; transition: all .4s ease; } .core_line_box2 { width: 18.958333%; position: absolute; top: 2.5%; left: 35.3%; } .core_line_box2 .core_line_san { top: 24%; right: -3.5%; } .core_line_box3 .core_line_item svg { stroke-dasharray: 600; stroke-dashoffset: -600; -webkit-transition: all .4s ease; transition: all .4s ease; } .core_line_box3 { width: 27.36111%; position: absolute; top: -9.5%; left: 56.3%; } .core_line_box3 .core_line_san { top: 35%; right: -2.5%; } .core_line_item svg { width: 100%; height: 100%; display: block; fill: none; stroke: #fff; stroke-linecap: round; stroke-width: 1px; stroke-dasharray: 1, 7; fill-rule: evenodd; } .core_line_san { position: absolute; z-index: 9; width: 0.5208333vw; height: 0.5208333vw; opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; } .core_line_san svg { width: 100%; } .AddCoreScrapFade .core_scrap_item1 .core_scrap_icon { -webkit-transform: scale(1); transform: scale(1); } .AddCoreScrapFade .core_scrap_item1 .core_scrap_text { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 100ms; transition-delay: 100ms; } .AddCoreScrapFade .core_scrap_item1 .core_scrap_time { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 200ms; transition-delay: 200ms; } .AddCoreScrapFade .core_scrap_item1 .scrap_item_back:nth-child(1) { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .AddCoreScrapFade .core_scrap_item1 .scrap_item_back:nth-child(2) { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 400ms; transition-delay: 400ms; } .AddCoreScrapFade .core_scrap_item1 .core_scrap_button { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .AddCoreScrapFade .core_line_box1 .core_line_item svg { stroke-dasharray: 1, 7; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .AddCoreScrapFade .core_line_box1 .core_line_san { opacity: 1; -webkit-transition-delay: 900ms; transition-delay: 900ms; } .AddCoreScrapFade .core_scrap_item2 .core_scrap_icon { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .AddCoreScrapFade .core_scrap_item2 .core_scrap_text { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .AddCoreScrapFade .core_scrap_item2 .core_scrap_time { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .AddCoreScrapFade .core_scrap_item2 .scrap_item_back:nth-child(1) { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 1300ms; transition-delay: 1300ms; } .AddCoreScrapFade .core_scrap_item2 .core_scrap_button { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } .AddCoreScrapFade .core_line_box2 .core_line_item svg { stroke-dasharray: 1, 7; -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } .AddCoreScrapFade .core_line_box2 .core_line_san { opacity: 1; -webkit-transition-delay: 1800ms; transition-delay: 1800ms; } .AddCoreScrapFade .core_scrap_item3 .core_scrap_icon { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 1900ms; transition-delay: 1900ms; } .AddCoreScrapFade .core_scrap_item3 .core_scrap_text { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2000ms; transition-delay: 2000ms; } .AddCoreScrapFade .core_scrap_item3 .core_scrap_time { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2100ms; transition-delay: 2100ms; } .AddCoreScrapFade .core_scrap_item3 .scrap_item_back:nth-child(1) { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 2200ms; transition-delay: 2200ms; } .AddCoreScrapFade .core_scrap_item3 .core_scrap_button { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 2200ms; transition-delay: 2200ms; } .AddCoreScrapFade .core_line_box3 .core_line_item svg { stroke-dasharray: 1, 7; -webkit-transition-delay: 2200ms; transition-delay: 2200ms; } .AddCoreScrapFade .core_line_box3 .core_line_san { opacity: 1; -webkit-transition-delay: 2600ms; transition-delay: 2600ms; } .AddCoreScrapFade .core_scrap_item4 .core_scrap_icon { -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 2700ms; transition-delay: 2700ms; } .AddCoreScrapFade .core_scrap_item4 .core_scrap_text { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2800ms; transition-delay: 2800ms; } .AddCoreScrapFade .core_scrap_item4 .core_scrap_time { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 2900ms; transition-delay: 2900ms; } .AddCoreScrapFade .core_scrap_item4 .scrap_item_back:nth-child(1) { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 3000ms; transition-delay: 3000ms; } .AddCoreScrapFade .core_scrap_item4 .scrap_item_back:nth-child(2) { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 3100ms; transition-delay: 3100ms; } .AddCoreScrapFade .core_scrap_item4 .scrap_item_back:nth-child(3) { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 3200ms; transition-delay: 3200ms; } .AddCoreScrapFade .core_scrap_item4 .core_scrap_button { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 3300ms; transition-delay: 3300ms; } .society_item_btn { width: 100%; padding-bottom: 30px; } .society_item_button { position: relative; overflow: hidden; } .society_item_button:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; -webkit-border-radius: 4px; border-radius: 4px; background-image: linear-gradient(135deg, #e75e45, #f5745d); } .society_item_button:before { content: ""; position: absolute; right: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); z-index: 1; pointer-events: none; background: #1a1a1a; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all .6s ease; transition: all .6s ease; } .society_item_button:hover:before { width: 0; } .society_item_button:hover .society_item_link a { color: #fff; } .society_item_link a { line-height: 50px; display: block; padding: 0 30px; position: relative; z-index: 9; color: rgba(255, 255, 255, .6); font-size: 16px; -webkit-transition: all .6s ease; transition: all .6s ease; } .news_head_wrap { position: fixed; width: 100%; top: 90px; left: 0; z-index: 97; opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .news_head_box { width: 100%; position: relative; } .news_nav_item_box { position: absolute; left: 0; top: 0; width: 100%; background: rgba(230, 94, 68, .9); display: none; } .news_nav_item_active { display: block !important; } .news_head_list { justify-content: center; } .news_nav_current { font-weight: bold; } /**/ .AddNewsHeadFade { opacity: 1; -webkit-transition-delay: 700ms; transition-delay: 700ms; } .develop_box { position: relative; } .develop_back_wrap { position: relative; } .develop_back_content { position: relative; width: 65.97222222%; margin: 0 auto; } .develop_back_box { width: 100%; padding-bottom: 50.5263157%; margin: 80px auto 0; position: relative; left: 0; top: 0; } .develop_back_item { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #262626; opacity: 0; } .develop_back_item:nth-child(1) { z-index: 5; opacity: 0; } .develop_back_item:nth-child(6) { z-index: 1; opacity: 0; } .develop_back_img { width: 100%; height: 100%; background: url(../images/develop_back.jpg) no-repeat; background-size: cover; opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; } .develop_back_item:nth-child(2) .develop_back_img { opacity: 1; } .develop_back_button { position: absolute; width: 100%; left: 0; top: 50%; z-index: 9; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-justify-content: space-between; justify-content: space-between; pointer-events: none; } .develop_back_icon { width: 60px; height: 60px; position: relative; pointer-events: auto; cursor: pointer; outline: none; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; -webkit-transform: translateX(30px); transform: translateX(30px); opacity: 0; } .button_none { pointer-events: none; } .develop_back_next { -webkit-transform: rotate(180deg) translateX(30px); transform: rotate(180deg) translateX(30px); } .develop_back_icon.swiper-button-disabled { opacity: .3; } .develop_back_label { width: 33.33334%; height: 3.33334%; position: relative; } .develop_back_label:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: left top; transform-origin: left top; } .develop_back_label:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; } .develop_back_tab { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; -webkit-transition: all .6s ease; transition: all .6s ease; opacity: 0; -webkit-transform: scale(.9); transform: scale(.9); } /*.develop_next_scale {*/ /* -webkit-transform: scale(1.085);*/ /* transform:scale(1.085);*/ /* -webkit-transition: all .6s ease;*/ /* transition: all .6s ease;*/ /*}*/ /*.develop_prev_scale {*/ /* -webkit-transform: scale(0.915);*/ /* transform: scale(0.915);*/ /* -webkit-transition: all .6s ease;*/ /* transition: all .6s ease;*/ /*}*/ .develop_tab_box { padding: 40px; height: 100%; position: relative; opacity: 0; -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-transform: scale(.8); transform: scale(.8); } .develop_animate .develop_back_item { -webkit-transition-delay: 0ms !important; transition-delay: 0ms !important; } .develop_animate .develop_tab_box { -webkit-transition-delay: 0ms !important; transition-delay: 0ms !important; } .develop_animate .develop_back_icon.swiper-button-disabled { -webkit-transition-delay: 0ms !important; transition-delay: 0ms !important; opacity: .3; } .develop_current { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0ms !important; transition-delay: 0ms !important; } .develop_tab_title { font-size: 80px; line-height: 120px; color: #e65e44; text-align: center; } .develop_tab_content { height: 144px; overflow: auto; margin: 20px 0; } .develop_tab_read { font-size: 16px; line-height: 36px; text-align: center; color: #fff; } .develop_tab_line { margin: 0 auto; width: 1px; height: 20px; background: rgba(255, 255, 255, .4); position: relative; overflow: hidden; } .develop_tab_line:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: #e65e44; -webkit-animation: 2s TabLine infinite linear normal both; animation: 2s TabLine infinite linear normal both; } @keyframes TabLine { 0% { height: 0; } 30% { height: 100%; top: 0; } 60% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } } .develop_tab_text { font-size: 12px; line-height: 36px; text-align: center; color: #fff; } .develop_back_tab .nicescroll-rails { opacity: 0 !important; pointer-events: none; } .develop_pagination_box { position: relative; } .develop_pagination_svg { position: absolute; left: 50%; top: 50%; width: 0; height: 1px; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .develop_pagination_svg svg { width: 100%; height: 100%; position: absolute; top: 0; } .develop_pagination_svg svg path { width: 0; fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1px; stroke-dasharray: 2, 2; } /*.develop_pagination_box:after {*/ /* content: "";*/ /* position: absolute;*/ /* left: 50%;*/ /* top: 50%;*/ /* width: 0;*/ /* -webkit-transform: translateX(-50%);*/ /* transform: translateX(-50%);*/ /* border-bottom: 1px dotted #6d6d6d*/ /*}*/ .develop_pagination_tab { width: 67.7083333%; margin: 50px auto 0; position: relative; } .develop_pagination_number { -webkit-justify-content: center; justify-content: center; position: relative; } .develop_pagination_year { width: 140px; font-size: 40px; line-height: 66px; color: #4c4c4c; cursor: pointer; text-align: center; -webkit-transition: all .6s ease; transition: all .6s ease; position: relative; } .develop_pagination_year:after { content: ""; position: absolute; left: 0; height: 4px; background: #141414; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } .develop_pagination_active .develop_pagination_year { color: #fff; } .develop_pagination_focus .develop_pagination_year { color: #fff; } .AddDevelopBox .develop_back_item { -webkit-transition: all .6s ease; transition: all .6s ease; } .AddDevelopBox .develop_back_item:nth-child(1) { -webkit-transform: scaleX(0.915) scaleY(1.21); transform: scaleX(0.915) scaleY(1.21); } .AddDevelopBox .develop_back_item:nth-child(2) { -webkit-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); z-index: 4; opacity: 1; } .AddDevelopBox .develop_back_item:nth-child(3) { -webkit-transform: scaleX(1.085) scaleY(.79); transform: scaleX(1.085) scaleY(.79); opacity: .7; z-index: 3; } .AddDevelopBox .develop_back_item:nth-child(4) { -webkit-transform: scaleX(1.17) scaleY(.58); transform: scaleX(1.17) scaleY(.58); opacity: .4; z-index: 2; } .AddDevelopBox .develop_back_item:nth-child(5) { -webkit-transform: scaleX(1.255) scaleY(.37); transform: scaleX(1.255) scaleY(.37); opacity: .2; z-index: 1; } .AddDevelopBox .develop_back_item:nth-child(6) { -webkit-transform: scaleX(1.34) scaleY(.16); transform: scaleX(1.34) scaleY(.16); } .AddDevelopBox .develop_back_tab { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 700ms; transition-delay: 700ms; } .AddDevelopBox .develop_back_icon { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 900ms; transition-delay: 900ms; } .AddDevelopBox .develop_back_next { -webkit-transform: rotate(180deg) translateX(0); transform: rotate(180deg) translateX(0); } .AddDevelopBox .develop_pagination_svg { width: 100%; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .develop_pagination_tab .swiper-slide .develop_pagination_number { -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .AddDevelopBox .develop_pagination_tab .swiper-slide .develop_pagination_number { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .AddDevelopBox .develop_pagination_tab .swiper-slide:nth-child(1) .develop_pagination_number { -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .AddDevelopBox .develop_pagination_tab .swiper-slide:nth-child(2) .develop_pagination_number { -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .AddDevelopBox .develop_pagination_tab .swiper-slide:nth-child(3) .develop_pagination_number { -webkit-transition-delay: 1300ms; transition-delay: 1300ms; } .AddDevelopBox .develop_pagination_tab .swiper-slide:nth-child(4) .develop_pagination_number { -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } .AddDevelopBox .develop_pagination_tab .swiper-slide:nth-child(5) .develop_pagination_number { -webkit-transition-delay: 1500ms; transition-delay: 1500ms; } .develop_tab_bottom { opacity: 0; } .develop_animate_active { opacity: 1; } .core_scrap_button { width: 100%; line-height: 3.125vw; font-size: 1.3541666vw; color: #ffffff; background-image: linear-gradient(to left, #e84a2e, #f5745d); -webkit-border-radius: 0.208333vw; border-radius: 0.208333vw; text-align: center; opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .video_pop_wrap { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 99999; background: rgba(0, 0, 0, .8); -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; opacity: 0; pointer-events: none; -webkit-transition: all .5s .2s ease; transition: all .5s .2s ease; } .video_pop_box { width: 65%; } .index_video_item { width: 100%; padding-bottom: 63.15789%; overflow: hidden; position: relative; pointer-events: none; opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); -webkit-transition: all .5s .1s ease; transition: all .5s .1s ease; } .index_video_item video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .index_video_active { opacity: 1; pointer-events: auto; -webkit-transition: all .5s ease; transition: all .5s ease; } .index_video_active .index_video_close { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .5s .2s ease; transition: all .5s .2s ease; } .index_video_active .index_video_item { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .5s .1s ease; transition: all .5s .1s ease; } .index_video_close { position: absolute; right: 30px; top: 30px; width: 60px; height: 60px; pointer-events: none; opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); -webkit-transition: all .5s ease; transition: all .5s ease; cursor: pointer; } .index_video_close:hover:after { -webkit-transform: rotate(30deg); transform: rotate(30deg); } .index_video_close:hover:before { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .index_video_close:after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .3s ease; transition: all .3s ease; } .index_video_close:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all .3s ease; transition: all .3s ease; } .footer_wap_address { display: none; } .company_pop_wrap { display: none; } .wap_nav_wrap { display: none; } .advantage_m_more { display: none; } .index_footer_btn { display: none; } .about_social_pagination { display: none; } .core_wap_pagination { display: none; } .plat_pagination_tab { width: 100%; } .plat_pagination_tab .swiper-slide { min-width: 10.416667%; width: auto; } .plat_pagination_current .plat_pagination_icon { background: #3f241e; border: 1px solid #e65e44; } .plat_pagination_current .plat_pagination_line:after { top: 0; } .plat_pagination_current .plat_pagination_text { color: #e65e44; font-weight: bold; } .wap_scenario_tab { overflow: initial; } .wap_scenario_tab .swiper-slide { width: auto; } .wap_core_head { display: none; } .news_wap_box { display: none; } .culture_swiper_pagination { position: absolute; left: 0; bottom: 50px; display: flex; width: 100%; margin-top: 30px; -webkit-justify-content: center; justify-content: center; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .culture_swiper_pagination .swiper-pagination-bullet { margin: 0 6px; width: 10px; height: 10px; opacity: 1; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; position: relative; background: none; } .culture_swiper_pagination .swiper-pagination-bullet:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-border-radius: 5px; border-radius: 5px; z-index: 8; border: 1px solid #fff; box-sizing: border-box; background: rgba(0, 0, 0, .4); -webkit-transition: all .6s ease; transition: all .6s ease; } .culture_swiper_pagination .swiper-pagination-bullet-active:before { border: 1px solid #e65e44; background: #e65e44; } .AddWapCulturePagination { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .public_banner_btn_box { margin-top: 35px; -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; filter: blur(2px); -webkit-transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; transition: transform .7s ease-in-out, opacity 1s ease-in-out, filter 1.1s ease-in-out; } .public_banner_btn_box_app_wrap { position: relative; padding-top: 35px; } .public_banner_btn_text { position: relative; z-index: 8; } .public_banner_btn_box_app_wrap { -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } .public_banner_btn_box_app { position: relative; } .public_banner_btn_box_app .public_banner_btn_item { position: relative; cursor: pointer; } .public_banner_btn_box_app .public_banner_btn_item + .public_banner_btn_item { margin-left: 1px; } .public_banner_btn_item a, .public_banner_btn_item .lnk, .public_banner_btn_box_app:after { display: block; width: 120px; line-height: 52px; font-size: 16px; color: #fff; background: #292929; text-align: center; overflow: hidden; position: relative; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .public_banner_btn_box_app:after { content: ''; position: absolute; left: 0; top: 0; height: 100%; } .public_banner_btn_box_app .public_banner_btn_item .lnk, .public_banner_btn_box_app:after { width: 160px; } .public_banner_btn_box_app.at0:after { left: 0; } .public_banner_btn_box_app.at1:after { left: 161px; } .public_banner_btn_box_app.at2:after { left: 322px; } .public_banner_btn_box_app.at3:after { left: 483px; } .public_banner_btn_box_app.at4:after { left: 644px; } .public_banner_btn_box_app.at5:after { left: 805px; } .public_banner_btn_box_app:after { background: #e65e44; } .public_banner_btn_item:first-child a { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .public_banner_btn_item:first-child a .public_banner_btn_text { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .public_banner_btn_item a:after { content: ""; position: absolute; right: 0; top: 0; width: 0; height: 100%; background: #e65e44; -webkit-transition: all .6s ease; transition: all .6s ease; } .public_banner_btn_current a:after { left: 0; width: 100%; } /*.public_banner_btn_default a:after {*/ /* right: 0;*/ /* width: 0;*/ /*}*/ /*.public_banner_btn_hover a:after {*/ /* left: 0;*/ /* width: 100%;*/ /*}*/ .AddBanner .public_banner_btn_box { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; filter: blur(0); -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .qd_nav_xgl_lnk { cursor: pointer; } .core_platform_box_h_auto .core_platform_content { position: relative; } .core_platform_qd_content { position: relative; margin-top: 40px; height: 33.333vw; -webkit-transform: translateY(20vh); transform: translateY(20vh); opacity: 0; -webkit-transition: -webkit-transform 1.5s ease-in-out 1.3s, transform 1.5s ease-in-out 1.3s, opacity 1.8s ease-in-out 1.3s; transition: -webkit-transform 1.5s ease-in-out 1.3s, transform 1.5s ease-in-out 1.3s, opacity 1.8s ease-in-out 1.3s; } .AddBanner .core_platform_qd_content { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .core_platform_box_h_auto .public_page_banner { height: auto; } .core_platform_qd_content .app_qd_item { position: absolute; bottom: 0; left: 50%; width: 100%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; -webkit-transition: all linear .3s; transition: all linear .3s; } .core_platform_qd_content .app_qd_item_current { opacity: 1; } .core_platform_qd_content .app_qd_item img { display: block; object-fit: contain; max-height: 100%; max-width: 100%; } .core_platform_box_qd1 { background: #1a1a1a; } .core_platform_current_back5, .core_platform_current_back { position: absolute; left: 0; bottom: 0; width: 100%; } .core_platform_box_qd2 { background: #292929; } .core_platform_box_qd5 { position: relative; background: #1a1a1a; overflow: hidden; } .core_platform_qd_chips { padding-top: 75px; padding-bottom: 80px; } .qd_chips_nav_wrap_wrap { height: 43px; overflow: hidden; } .society_item_center { -webkit-justify-content: center; justify-content: center; } .qd_cus_box { margin-bottom: -2.6041666vw; } .qd_chips_nav_wrap { width: 100%; height: 64px; } .qd_chips_nav { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: transform .9s ease-in-out .5s, opacity 1.2s ease-in-out .5s; transition: transform .9s ease-in-out .5s, opacity 1.2s ease-in-out .5s; } .self_moved .qd_chips_nav { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .qd_chips_item { padding-bottom: 7px; font-size: 24px; line-height: 36px; cursor: pointer; position: relative; margin: 0 20px; } .qd_chips_item:after { content: ''; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 1px; background-color: #e65e44; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; } .qd_chips_item:hover:after, .qd_chips_item_current:after { width: 100%; } .qd_chips_item .lnk { position: relative; z-index: 2; white-space: nowrap; color: #fff; -webkit-transition: color .3s linear; -moz-transition: color .3s linear; transition: color .3s linear; } .qd_chips_item_current .lnk, .qd_chips_item:hover .lnk { color: #e65e44; } .qd_chips_content { width: 1440px; margin: 0 auto; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: transform 1.2s ease-in-out .8s, opacity 1.5s ease-in-out .8s; transition: transform 1.2s ease-in-out .8s, opacity 1.5s ease-in-out .8s; } .self_moved .qd_chips_content { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .qd_chips_avatar_wrap { padding: 64px 120px 50px; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .qd_chips_avatar { width: 362px; position: relative; } .qd_chips_avatar img { display: block; width: auto; max-width: 100%; } .qd_chips_con { width: 740px; } .qd_chips_con_inner { display: inline-block; vertical-align: top; max-width: 100%; } .qd_chips_tit_wrap { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #545454; } .qd_chips_tit { font-size: 38px; line-height: 78px; color: #fff; } .qd_chips_info { font-size: 16px; line-height: 28px; color: #ccc; } .qd_chips_mycon { font-size: 14px; line-height: 24px; height: 96px; color: #999; overflow: hidden; } .swiper-qd-chips2 .qd_chips_mycon { height: auto; } .qd_lay_btn { padding-top: 24px; } .qd_btn { display: inline-block; vertical-align: top; cursor: pointer; font-size: 14px; line-height: 38px; height: 38px; padding: 0 14px; border-radius: 3px; color: #fff; -webkit-transition: all 1s cubic-bezier(.165, .84, .44, 1); transition: all 1s cubic-bezier(.165, .84, .44, 1); position: relative; overflow: hidden; } .qd_btn:after { content: ""; position: absolute; left: 0; top: 0; width: 200%; height: 100%; z-index: -1; -webkit-transition: all 1s cubic-bezier(.165, .84, .44, 1); transition: all 1s cubic-bezier(.165, .84, .44, 1); background: -webkit-linear-gradient(90deg, #f5745d, #e84a2e, #e84a2e, #f5745d); background: linear-gradient(90deg, #f5745d, #e84a2e, #e84a2e, #f5745d); } .qd_btn:hover:after { left: -100%; } .core_platform_box_qd3 { background: #141414 url(../images/xgl.jpg) no-repeat center center; backgoroun-size: cover; } @media screen and (min-width: 1200px) { .swiper-qd-chips2 .qd_chips_avatar_inner { position: absolute; top: 0; right: 0; width: 428px; } } .core_platform_box_qd4 { padding-bottom: 110px; position: relative; overflow: hidden; background: #292929; } .core_platform_qd_ips { margin-top: 195px; padding-bottom: 100px; } .core_platform_qd_ips_inner { padding: 0 240px; } .core_ips_item { width: 25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; text-align: center; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: transform 1.2s ease-in-out .8s, opacity 1.5s ease-in-out .8s; transition: transform 1.2s ease-in-out .8s, opacity 1.5s ease-in-out .8s; } .self_moved .core_ips_item { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .icon_ips_svg { font-size: 108px; line-height: 118px; margin-bottom: 40px; color: #e65e44; } .core_platform_qd_ips_inner .core_ips_item:first-child .icon_ips_svg { font-size: 118px; } .icon_ips_tit { font-size: 18px; line-height: 2; margin-bottom: 25px; color: #fff; } .icon_ips_info { font-size: 16px; line-height: 28px; color: #999; } .core_platform_qd_cus { padding-top: 100px; padding-bottom: 150px; } .core_platform_qd_cus_inner { padding-top: 160px; position: relative; } .qd_cus_arc { position: relative; width: 100%; padding-bottom: 24.375%; overflow: hidden; } .qd_cus_arc svg { position: absolute; left: 0; top: 0; width: 100vw; height: 100vw; } .qd_cus_arc svg .qd_cus_arc_path { fill: none; stroke: #e65e44; stroke-width: 0.32; stroke-dasharray: 0.32, 1.21; stroke-dashoffset: 0; } .qd_cus_point { position: absolute; z-index: 10; width: 0; height: 0; overflow: visible; } .qd_cus_point1 { left: 19%; } .qd_cus_point5 { right: 19.1%; } .qd_cus_point1, .qd_cus_point5 { bottom: 15.8vw; } .qd_cus_point4 { right: 33.9%; } .qd_cus_point2 { left: 33.75%; } .qd_cus_point2, .qd_cus_point4 { bottom: 21.61vw; } .qd_cus_point3 { left: 49.55%; bottom: 23.7vw; } .qd_cus_tit_wrap { position: absolute; left: 50%; top: -160px; width: 200px; margin-left: -100px; } .qd_cus_dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin-left: -3px; margin-top: -3px; } .qd_cus_tit_icon img { display: block; width: 92px; height: 92px; margin: 0 auto; } .qd_cus_info_wrap { position: absolute; top: 56px; left: 50%; width: 300px; margin-left: -150px; } .qd_cus_tit_wrap .icon_ips_tit { text-align: center; white-space: nowrap; } .qd_cus_mail_lnk { position: absolute; bottom: 66px; left: 50%; width: 360px; margin-left: -180px; z-index: 20; font-size: 18px; line-height: 2; padding: 14px; color: #e65e44; border: 1px solid #e65e44; border-radius: 6px; overflow: hidden; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: transform 1.2s ease-in-out .8s, opacity 1.5s ease-in-out .8s, color .3s ease-in-out, background .3s ease-in-out, border .3s ease-in-out; transition: transform 1.2s ease-in-out .8s, opacity 1.5s ease-in-out .8s, color .3s ease-in-out, background .3s ease-in-out, border .3s ease-in-out; } .qd_cus_info_wrap .icon_ips_info { text-align: center; } .qd_cus_mail_lnk:hover { background: #e65e44; color: #fff; } .order_shade_wrap { position: fixed; z-index: 99; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; opacity: 0; pointer-events: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .order_shade_box { width: 43.75%; background: #fff; padding: 65px 0; -webkit-border-radius: 6px; border-radius: 6px; position: relative; -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .order_shade_close { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; background: #ea6349; -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; -webkit-transition: all .6s ease; transition: all .6s ease; } .order_shade_close:before { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg); transform: translateX(-50%) translateY(-50%) rotate(-45deg); width: 50%; height: 1px; background: #fff; -webkit-transition: all .6s ease; transition: all .6s ease; } .order_shade_close:after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 50%; height: 1px; background: #fff; -webkit-transition: all .6s ease; transition: all .6s ease; } .order_shade_wrap .form_pop_item { width: 100%; margin: 0 0 3.030304% 0; } .order_shade_pop_read { margin-top: 0.78125vw; } .order_shade_pop_list { -webkit-align-items: center; align-items: center; margin-top: 0.78125vw; } .order_shade_pop_list .form_head_title { width: 2.6041666vw; } .order_shade_pop_list .order_shade_pop_tab { width: calc(100% - 2.6041666vw); } .order_shade_wrap .form_pop_bottom { -webkit-justify-content: flex-start; justify-content: flex-start; } .order_shade_wrap .form_pop_book { width: calc(100% - 150px); padding-left: 20px; } .order_shade_active { opacity: 1; pointer-events: auto; -webkit-transition-delay: 0ms; transition-delay: 0ms; } .order_shade_active .order_shade_box { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 200ms; transition-delay: 200ms; } .order_shade_close:hover { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .form_pop_inner_active { opacity: 0; pointer-events: none; }