@charset "utf-8"; body,div,ul,li,p,a,span,h1,h2,h3,h4,h5,h6{ font-family:arial ,'黑体', simhei, "microsoft yahei"; } .section_body{ max-width: 1920px; margin: auto; } .top_line{ display: block; width: 100%; height: 4px; background: linear-gradient(to right,#005aff,#5aa8ff); } .w-r{ width: 1200px; margin: auto; } .w-b{ width: 100%; } .top_con{ background-color: #fff; position: relative; } .logo_con{ padding: 16px 0; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; } .ewm{ width: 120px; position: absolute; right: 0; top:90%; z-index: 9; display: none; } .ghz:hover .ewm{ display: block; } /*.top_menu{ color: #005aff; display: inline-block; width: 30px; height: 20px; padding: 4px 0; border-top: 4px solid #005aff; border-bottom: 4px solid #005aff; background-color: currentcolor; background-clip: content-box; display: none; } .top_menu_list{ position: absolute; right: 0; top: 100%; width: 150px; padding: 12px 0; background-color: #005aff; z-index: 9; } .top_menu_list a{ display: block; line-height: 32px; color: #fff; font-size: 14px; text-align: center; } .menu_act{ background-color: #fff; } a.menu_act{color: #005aff;}*/ /*.top_fixed{ position: fixed; width: 100%; top: 0; z-index: 12; border-bottom: 1px solid #e3dfdf; }*/ /*二维码*/ .ewm_con{ width: 18%; padding: 10px; background-color: #2d9efb; border-radius: 3px; position: fixed; right: 0; top: 30%; z-index: 11; display: none; } .ewm_con img{ width: 100%; } .ewm_con p{ margin-top: 5px; font-size: 14px; color: #fff; text-align: center; } .ewm_con i{ position: absolute; width: 20px; height: 20px; padding: 6px 0; border-radius: 50%; left: -6%; top: -4%; cursor: pointer; background-color: #2d9efb; } .ewm_con i img{ width: 50%; margin: auto; } /*导航*/ /*.nav_con{ position: absolute; top: 0; width: 100%; z-index: 9; }*/ .nav_list{ position: absolute; top: 0; transform: translatex(-50%); left: 50%; width: 70%; /*margin: auto;*/ background-color: #fff; display: flex; justify-content: space-between; } .nav_list a{ display: block; width: 25%; line-height: 100px; font-size: 26px; color: #3f4f7d; text-align: center; position: relative; } .nav_list a:after{ position: absolute; content: ''; right: 0; top:50%; transform: translatey(-50%); width: 1px; height: 66%; background-color: #005aff; opacity: 0.3; } .nav_list a.act{ background-color: #005aff; color: #fff; } .fix_class{ width: 100%; height: 100px; background-color: #fff; position: fixed; top: 0; /*border: 1px solid #e3dfdf;*/ box-shadow: 0px 0px 7px 0px #005aff; z-index: 999; } .fix_class .nav_list{ width: 100%; } .hot img{ position: absolute; right: -28px; top: -10px; } /*头图轮播*/ .swiper-banner .swiper-pagination-bullet{ width: 30px; border-radius: 4px; background: #fff; opacity: .5; } .swiper-banner .swiper-pagination-bullet-active{ opacity: 1; background: #fff; } .st{ position: absolute; bottom: 50px; left: 50%; transform: translatex(-50%); transition: all 0.8s ease 0s; } .slide_txt{ width: 95%; padding: 25px; border-radius: 5px; background-color: rgba(0,11,124,0.5); } .slide_txt p{ font-size: 16px; color: #fff; } .txt_btn{ font-size: 14px; color: #3ce6fa; padding-bottom: 3px; border-bottom: 1px solid #3ce6fa; cursor: pointer; display: none; } .title{ padding: 120px 0 50px; } .title img{ margin: auto; } /*选型指南*/ .zhinan_con{ margin-bottom: -40px; } .zn_list{ display: flex; flex-wrap: wrap; justify-content: space-between; } .zn_item{ width: 48%; margin-bottom: 40px; /*box-shadow: 3px -3px 2px 0px rgba(40,107,231,0.21);*/ } .zn_top{ width: 100%; overflow: hidden; } .jianjie_txt,.zn_img{ width: 92%; } .jianjie_txt{ height: 100%; bottom: -100%; padding:20px 40px; background: rgba(62,85,128,0.8); border-radius: 4px; font-size: 16px; color: #fff; transition: all 0.8s ease 0s; } .zn_item:hover .jianjie_txt{ bottom: 0; } .zn_bot{ padding: 20px 14px 14px; display: flex; align-items: center; box-shadow: 3px 3px 2px 0px rgba(40,107,231,0.21); border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; margin-right: 3px; margin-top: -5px; position: relative; z-index: 3; } .zn_txt{ width: 80%; margin-left: 20px; } .zn_txt p{ font-size: 20px; color: #262626; height: 48px; line-height: 1.2; -webkit-line-clamp: 2; } .gjz_txt{ margin-top: 12px; } .gjz_txt span{ display: inline-block; padding: 4px 6px; margin-right: 10px; border: 1px solid #005aff; border-radius: 4px; color: #005aff; font-size: 16px; line-height: 1; margin-bottom: 10px; } .zn_xz{ right:3px; /*top: calc(-100% - 45px);*/ bottom: 0; background: #fff; padding: 20px 20px 15px; box-shadow: 3px -3px 2px 0px rgba(40,107,231,0.21); border-top-right-radius: 3px; } /*挑战和需求*/ .xq_con{ padding-left: 40px; width: 92%; position: relative; } .swiper_con{ /*width: 95%;*/ height: 620px; /*position: absolute;*/ /*top:0; overflow: hidden; z-index: 9;*/ } .swiper-txt{ width: 100%; margin: inherit; height: 100%; } .txt_item{ width: 98%; padding: 50px 30px 30px; height: 190px; min-height: 190px; position: relative; margin: auto; } .txt_item span,.txt_item p{ /*color: #4e5576;*/ color: #fff; position: relative; z-index: 3; } .txt_item span{ font-size: 16px; } .txt_item p{ margin-top: 8px; font-size: 20px; font-weight: bold; text-align: right; } .bg1_img,.bg3_img,.bg2_img,.bg4_img{ width: 100%; position: absolute; } .bg1_img,.bg2_img{ z-index: 2; } .bg1_img,.bg3_img{ top: 0; left: 0; } .bg3_img{ top:10px; left: 10px; } .bg2_img{ top: 0; } .bg2_img,.bg4_img{ right: 0; } .bg4_img{ top:10px; left: -10px; } /*.bg3_img,.bg4_img{ display: none; }*/ .swiper-txt .swiper-slide-active .bg3_img, .swiper-txt .swiper-slide-active .bg4_img{ display: block; } /*.img2{ margin-top: 30px; } .img1,.img2{ position: relative; } .txt_bg1{ position: relative; z-index: 2; } .txt_bg3{ position: absolute; top:8px; left: 8px; z-index: -1; }*/ /*.test{ width:100%; height: 100%; padding:30px 20px; border:1px solid #beceeb; position:relative; } .test span{ width:0; height:0; font-size:0; overflow:hidden; position:absolute; } .test span.bot{ border-width:20px 50px; border-style:solid dashed dashed; border-color:#beceeb transparent transparent; right:80px; bottom:-40px; } .test span.top{ border-width:20px 40px; border-style:solid dashed dashed; border-color:#ffffff transparent transparent; right:80px; bottom:-33px; } */ .top_icon,.bot_icon{ position: absolute; } .top_icon{ top:20px; left: 25px; } .bot_icon{ top:50%; right: 35px; } /*.swiper-txt .swiper-slide-active span,.swiper-txt .swiper-slide-active p{ color: #fff; }*/ .navigation_btn{ position: absolute; bottom: 6%; right: -5%; } .navigation_btn img{ cursor: pointer; } /*7*/ .qi_con{ margin-top: 50px; position: relative; } .tz_bg{ width: 100%; position: absolute; top: 0; z-index: -1; } .tz_con{ padding-top: 3%; } .tz_con.w-r{ overflow: hidden; } .qi_list{ display: flex; /*flex-wrap: wrap;*/ justify-content: space-between; position: relative; z-index: 2; margin-top: 50px; } .icon_con{ width: 18%; text-align: center; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; } .icon_con img{ margin:0 auto 8px; } .icon_con p{ padding: 5px 10px; background-color: #fff; border-radius: 4px; font-size: 16px; color: #223266; display: inline; } .icon2{ margin-top: -36px; } .icon3{ margin-top: 30px; margin-left: -20px; } .icon4{ margin-top: -60px; margin-left: -26px; } .icon5{ margin-top: 10px; margin-left: -16px; } .icon6{ margin-top: 40px; } .icon7{ margin-top: 45px; } .qline{ position: absolute; left: 50%; transform: translatex(-50%); margin-top: -10px; display: none; } .qline i,.qline span{ vertical-align: middle; } .qline i{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; background:linear-gradient(#005aff,#3cb4fa); } .qline span{ display: inline-block; height: 1px; background-color: #005fff; position: relative; z-index: -1; } .qline1 span{ width: 120px; transform: rotate(90deg); margin-top: 46%; } .qline2 span{ width: 168px; transform: rotate(70deg); margin-top: 43%; left: 18%; } .qline3 span{ width: 90px; transform: rotate(90deg); margin-top: 42%; } .qline4 span{ width: 190px; transform: rotate(90deg); margin-top: 42%; } .qline5 span{ width: 153px; transform: rotate(128deg); margin-top: 35%; left: -32%; } .qline6{ left: 30%; } .qline6 span{ width: 253px; transform: rotate(151deg); margin-top: 20%; left: -43%; } .qline7{ left: 30%; } .qline7 span{ width: 412px; transform: rotate(165deg); margin-top: 11%; left: -49%; } .line_block{ display: block; } .tz_txt{ margin-top: 80px; display: flex; align-items: center; } .l_txt{ position: relative; margin-right: 15px; /*background-color: #fff;*/ z-index: 2 } .txt_list{ position: absolute; top:13%; } .txt_list p{ padding: 0 36px; font-size: 16px; color: #223266; } .hide{ display: none; } /*案例*/ .anli_con{ margin-bottom: -30px; } .anli_list{ display: flex; flex-wrap: wrap; justify-content: space-between; } .anli_item{ display: flex; width: 46%; padding: 20px 15px; margin-bottom: 30px; box-shadow: 0 0 10px 1px rgba(57,109,203,0.3); background-color: #fff; } .anli_item p{ line-height: 1.2; } .left_con p{ margin-top: 15px; font-size: 18px; color: #333; text-align: center; } .right_con{ /*width: 80%;*/ margin-left: 20px; } .al_tit,.al_int{ -webkit-line-clamp: 2; } .al_tit{ height: 43px; font-size: 18px; } .al_tit a{color: #333;} .al_int{ margin-top: 12px; padding-top: 13px; border-top: 1px solid #bdc1d3; font-size: 16px; color: #828282; } .btn_con{ width: 100%; /*bottom: 0;*/ margin-top: 15px; text-align: right; } .btn_con a{ margin-left: 10px; padding: 3px 8px; border:1px solid #005aff; border-radius: 3px; font-size: 16px; color: #005aff; } a.vbtn{ background-color: #005aff; color: #fff; } /*精品活动*/ .active_con{ background: url(/uploads/image/sis209/hd_bg.jpg) no-repeat top; background-size: cover; margin-top: 100px; padding-bottom: 120px; } .active_con .title{ padding: 100px 0 60px; } .swiper_active{ width: 84%; } .hd_item{ width: 31%; padding: 20px 30px 12px; background-color: #fff; border-radius: 3px; } .hd_item img{ margin: auto; } .hd_item p{ margin: 14px 0 10px; font-size: 18px; color: #333; line-height: 1; } .hd_item span{ font-size: 16px; color: #b3b3b3; display: block; -webkit-line-clamp: 2; } .hd_item i{ display: inline-block; margin-top: 10px; width: 100%; text-align: right; font-size: 14px; color: #b7b6cc; font-style: normal; } .hd_list{ position: relative; } .left_btn,.right_btn{ display: block; position: absolute; top: 50%; width: 50px; height: 50px; transform: translatey(-50%); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; background-color: #0617a9; border-radius: 50%; } .right_btn{ right: 0; } .right_btn img{ transform: rotate(180deg); } .act_more{ margin: 50px auto 0; display: flex; align-items: center; justify-content: center; width: 220px; padding: 10px 0; background-color: #fff; border-radius: 4px; } .act_more span{ font-size: 20px; color: #0617a9; margin-right: 5px; } .footer { background-color: #0617a9; } .footer span { height: 70px; line-height: 70px; color: #fff; font-size: 18px; } .txt_tk{ width: 100%; height: 100%; position: absolute; top: 0; background-color: rgba(0,11,124,0.8); padding:50px 20px; z-index: 99; } .txt_tk p{ font-size: 12px; color: #fff; } @media screen and (max-width: 1500px) { .slide_txt p{ font-size: 14px; } } @media screen and (max-width: 1200px) { .w-r{ width: 100%; padding: 0 20px; } .logo_con{ padding: 16px 20px; } /*.txt_bg1, .txt_bg2,.txt_bg3{ width: 100%; }*/ .hd_item img{ width: 100%; } .ewm{ right: 20px; } .slide_txt p{ font-size: 12px; } .st { width: 100%; } .txt_more{ font-size: 12px; } .zn_txt p{ height: 48px; } } @media screen and (max-width: 1150px) { .txt_item{ padding: 20px 30px 30px; } } @media screen and (max-width: 1124px) { .icon_con p{ font-size: 14px; } } @media screen and (max-width: 1000px) { .title { padding: 12% 0 5%; } .active_con .title{ padding: 10% 0 6%; } .active_con{ margin-top: 10%; padding-bottom: 12%; } .nav_list a{ line-height: 90px; font-size: 24px; } .fix_class{ height: auto; } .fix_class .nav_list{ box-shadow: 0px 0px 7px 0px #005aff; } /*.txt_item span { font-size: 15px; } .txt_item p{ font-size: 18px; }*/ .navigation_btn{ right: -7%; } .logo_img,.gzh_img{ height: 28px; } .r_img{ width: 30%; } .hd_item{ padding: 20px 20px 12px; } /*.img1, .img2{ height: 200px; border-radius: 40px; border:1px solid #3f4f7d; } .img1{ background:linear-gradient(to right,#005aff,#3bb3fa) }*/ /*.txt_bg1,.txt_bg2,.txt_bg3{ display: none; }*/ .bg1_img,.bg2_img,.bg3_img,.bg4_img, .swiper-txt .swiper-slide-active .bg3_img, .swiper-txt .swiper-slide-active .bg4_img { display: none; } .txt_item{ width: 100%; border-radius: 20px; border: 1px solid #3f4f7d; } /*.swiper-txt .swiper-slide-active{ background: linear-gradient(to right,#005aff,#3bb3fa); }*/ .txt_item{ background: linear-gradient(to right,#005aff,#3bb3fa); } /*.txt_item{ height: auto; }*/ .swiper_con{ height: 450px; } .slide_txt{ width: 100%; padding: 12px; } .slide_txt p { font-size: 12px; } .txt_more{ display: inline-block; } .phide{ display: none; } .txt_show .w-r,.txt_show .slide_txt{ height: 100%; } .txt_show{ bottom: 100%; top: 20%; height: 100%; background-color: rgba(0,11,124,0.5); } .txt_show .phide{ display: block; } .txt_show .slide_txt{ background-color: transparent; } .icon_con{ width: 14%; } .icon_con p{ display: block; width: 75%; margin: auto; } .icon_con img{ width: 70%; margin: 0 auto 4px; } .top_icon{ display: none; } .zn_item{ width: 67%; margin:0 auto 40px; } .zn_txt p{ height: auto; } } @media screen and (max-width: 900px) { .nav_list a { line-height: 80px; font-size: 20px; } .hot img{ width: 20px; right: -20px; top: -6px; } .zn_logo{ width: 30%; } .zn_txt p{ font-size: 18px; } .zn_xz img{ width: 40px; } /*.zn_xz{ top: calc(-100% - 15px); }*/ .gjz_txt span{ font-size: 14px; } .left_con p,.al_tit{ font-size: 16px; } .al_int{ font-size: 14px; } .left_con>img{ width: 100%; } .right_con{ width: 75%; } .icon_con p{ font-size: 12px; } .txt_list p{ font-size: 14px; } } @media screen and (max-width: 800px) { .ghz{ display: none; } .logo_con { padding: 10px 20px; } .logo_img{ margin: auto; } .nav_list{ top:48px; width: 100%; border-top:1px solid #ccc; } .fix_class .nav_list { border-top:inherit; top: 0; } /*.top_menu{ display: block; margin-top: 6px; }*/ .ewm_con{ display: block; } .swiper-banner{ margin-top: 80px; } .txt_item span { font-size: 14px; } .txt_item p{ font-size: 18px; } .top_icon{ width: 40px; top: 15px; left: 15px; } .bot_icon{ width: 56px; bottom: 20px; right: 16px; } .navigation_btn{ right: -50px; } .navigation_btn img{ width: 40px; } .navigation_btn img:first-child{ margin-bottom: 15px; } .swiper_con{ height: 380px; } .txt_show{ top: 0; } .icon_con p,.qline{ display: none; } .icon_con img{ width: 77%; } .tz_txt{ margin-top: 1%; flex-direction: column-reverse; } .r_img{ margin-bottom: 20px; } .icon7 { margin-top: 20px; } .l_txt{ margin-right: 0; } .zn_item{ width: 85%; } } @media screen and (max-width: 750px) { .anli_item{ width: 80%; margin:0 auto 30px; } /*.zn_item{ width: 80%; margin:0 auto 40px; }*/ /*.swiper_con{ width: 94%; }*/ .title img{ width: 70%; } .txt_item { padding: 20px 20px 30px; } .swiper_con { height: 450px; } .al_tit{ height: auto; } } @media screen and (max-width: 640px) { .ewm_con{ width: 24%; } /*.swiper_con { width: 93%; }*/ .swiper-banner{ margin-top: 65px; } .txt_item { padding: 20px 20px 30px; } .swiper_active { width: 76%; } .left_btn, .right_btn{ width: 40px; height: 40px; } .left_btn img, .right_btn img{ width: 10px; } .footer span{ height: 50px; line-height: 50px; font-size: 16px; } .act_more span{ font-size: 18px; } .swiper-banner .swiper-pagination-bullet{ height: 6px; width: 20px; } .nav_con .w-r{ padding: 0; } .nav_list a { line-height: 65px; font-size: 18px; } .st{ bottom: 25px; } .slide_txt{ padding: 6px; } .st .w-r{ padding: 0; } /*.p1txt{ overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }*/ .txt_list p{ padding: 0 16px; } .icon_con img { width: 90%; } .jianjie_txt{ padding: 20px 40px 0 10px; font-size: 14px; } } @media screen and (max-width: 600px) { /*.img1, .img2{ height: 240px; }*/ .swiper_con { height: 510px; } } @media screen and (max-width: 500px) { .nav_list a { line-height: 56px; font-size: 16px; } .swiper-banner{ margin-top: 56px; } .logo_con { padding: 10px 20px; } .ewm_con{ width: 28%; } .zn_item,.anli_item{ width: 100%; } .xq_con{ padding-left: 0; } .swiper_con { width: 100%; } .navigation_btn { right: -45px; } .txt_item span { font-size: 12px; display: block; line-height: 1.5; } .txt_item { padding: 20px 13px 20px; } /*.img1, .img2{ height: 210px; }*/ .txt_item p { font-size: 16px; } .hd_item { padding: 10px 10px 12px; } .act_more span{ font-size: 16px; } .footer span{ height: 40px; line-height: 40px; font-size: 14px; } .hd_item p{ font-size: 16px; } .hd_item span{ font-size: 14px; } .hd_item i{ margin-top: 6px; font-size: 12px; } .left_con p, .al_tit { font-size: 14px; } .al_int ,.btn_con a{ font-size: 12px; } .right_con{ margin-left: 10px; } .anli_item{ padding: 15px; margin: 0 auto 20px; } .anli_con { margin-bottom: -20px; } .zn_txt p { font-size: 16px; } .gjz_txt span { font-size: 12px; } .zn_xz{ padding: 14px 15px 15px; /*top: calc(-100% - 10px);*/ } .zn_xz img { width: 35px; } .title img{ width: 80%; } .title { padding: 15% 0 6%; } .active_con .title { padding: 10% 0 6%; } .active_con{ margin-top: 15%; } /*.txt_show{ bottom: -60%; top:auto; height: auto; background-color: rgba(0,11,124,1); }*/ .txt_list p { font-size: 12px; } .l_txt img{ display: none; } .txt_list{ position: inherit; } .l_txt{ padding: 10px 0; background: linear-gradient(45deg,#005aff,#0a83fe); border-radius: 10px; } .txt_list p{ color: #fff; } .icon_con img { width: 110%; } .r_img{ width: 40%; } .tz_bg{ top: 10px; } .icon4{ margin-top: -50px; } .icon1{ margin-top: 20px; margin-left: -15px; } .icon3 { margin-top: 50px; margin-left: -5px; } .icon5 { margin-top: 15px; margin-left: -2px; } .icon6{ margin-left: 5px; } .icon7 { margin-top: 0; } .jianjie_txt{ font-size: 14px; } /*.txt_more{ display: none; }*/ .swiper-banner .swiper-pagination-bullet { height: 4px; width: 16px; } } @media screen and (max-width: 450px) { .txt_show{ bottom: -80%; } .jianjie_txt { font-size: 12px; padding: 10px 40px 0 10px; } } @media screen and (max-width: 400px) { .swiper-banner{ margin-top: 50px; } .footer span{ font-size: 12px; } .act_more{ width: 180px; padding: 8px 0; } .act_more span { font-size: 16px; } .left_btn, .right_btn { width: 30px; height: 30px; } .left_btn img, .right_btn img { width: 7px; } .nav_list a { line-height: 50px; font-size: 14px; } .hot img { right: -15px; top: -8px; } .txt_item p { font-size: 14px; } .icon_con img { width: 120%; } /*.jianjie_txt{ padding: 5% 20px; }*/ .zn_txt p { font-size: 14px; } .slide_txt p { font-size: 10px; } /*.img1, .img2 { height: 240px; }*/ .txt_item { padding: 15px 13px; } .navigation_btn { right: -40px; } .zn_bot{ padding: 20px 14px 6px; } .zn_logo { width: 20%; } .jianjie_txt{ padding: 0 40px 0 5px; } }