@charset "utf-8"; img{ max-width: 100%; } .m_img{ display: none; } .bdb{ box-sizing:border-box; } .bn1720{ max-width: 89.58%; margin: 0 auto; } .bn1640{ max-width: 85.416%; margin: 0 auto; } .bn1520{ max-width: 80%; margin: 0 auto; } .bn1440{ max-width: 75%; margin: 0 auto; } @font-face { font-family: "PINGFANG REGULAR-subfont"; src: url("../dcfonts/PINGFANG REGULAR-subfont.woff2") format("woff2"), url("../dcfonts/PINGFANG REGULAR-subfont.woff") format("woff"), url("../dcfonts/PINGFANG REGULAR-subfont.ttf") format("truetype"), url("../dcfonts/PINGFANG REGULAR-subfont.eot") format("embedded-opentype"), url("../dcfonts/PINGFANG REGULAR-subfont.svg") format("svg"); font-weight: normal; font-style: normal; } .pinfang{ font-family: "PINGFANG REGULAR-subfont"; font-weight: 600; } @media(max-width: 1024px){ .bn1720{ max-width:100%; width: 90%; } .bn1640{ max-width:100%; width: 90%; } .bn1520{ max-width:100%; width: 90%; } .bn1440{ max-width:100%; width: 90%; } } .main_con{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; } .bn_banner img{ width: 100%; } .bn_title{ text-align: center; font-size: 0.8rem; line-height: 1.15rem; position: relative; font-family: "PINGFANG REGULAR-subfont"; font-weight: 600; } .bn_title:before{ content: ''; position: absolute; width: 1.75rem; height: 2px; background: #CCCCCC; border-radius: 2px; left:50%; transform:translateX(-50%); bottom: -0.4rem; } .bn_first{ padding: 2rem 0 1.6rem; } .bn_first .bn_title{ margin-bottom: 1.35rem; } .bn_first .bn_maincon .bn_item{ width: 29.16%; height: 14.5rem; margin-right: 6.26%; } .bn_first .bn_maincon .bn_item:first-child{ background: url('../../web/dcimg/Module1_bg_floor.png')no-repeat center center; background-size:contain; } .bn_first .bn_maincon .bn_item:nth-child(2){ background: url('../../web/dcimg/Module1_bg_data.png')no-repeat center center; background-size:contain; } .bn_first .bn_maincon .bn_item:last-child{ background: url('../../web/dcimg/Module1_bg_security.png')no-repeat center center; background-size:contain; margin-right: 0; } .bn_first .num_box{ color: #E5D8BF; line-height: 1.4rem; font-size: 1rem; font-family: "PINGFANG REGULAR-subfont"; font-weight: 600; } .bn_first .num_box .span{ transform: translateX(-13px); display: inline-block; } .bn_first .tit{ color: #E5D8BF; font-size: 0.5rem; line-height: 0.7rem; font-family: "PINGFANG REGULAR-subfont"; font-weight: 600; } .bn_first .bn_item{ padding: 2.05rem 0 0 1.5rem; } .bn_first .bn_item p{ margin-top: 0.45rem; line-height: 0.55rem; color: rgba(255,255,255,0.9); } .bn_first .bn_item .iconimg{ right: 0; bottom: 0; animation: ghostUpdown 1s infinite alternate; } .bn_first .bn_item .iconimg.ico1{ width: 6rem; } .bn_first .bn_item .iconimg.ico2{ width: 7.1rem; animation-delay: 0.3s; } .bn_first .bn_item .iconimg.ico3{ width: 7.1rem; animation-delay: 0.6s; } .bn_second .bn_title{ margin-bottom: 1.6rem; } .bn_second .bn_maincon{ display: flex; height: 17.5rem; overflow: hidden; } .bn_second .item:before{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); transition:all 1s ease 0s; z-index: 2; } .bn_second .item_box{ height: 100%; } .bn_second .itembox1{ overflow: hidden; width: 36.46%; } .bn_second .itembox1 .item1{ height: 100%; } .bn_second .itembox1 .item2{ height: 50%; } .bn_second .itembox1 .item3{ height: 50%; } .bn_second .item_box .item{ float: left; overflow: hidden; } .bn_second .item_box .item img{ width: 100%; height: 100%; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } .bn_second .itembox1 .item1{ width: 48.57%; } .bn_second .itembox1 .item2{ width: 51.43%; } .bn_second .itembox1 .item3{ width: 51.43%; } .bn_second .itembox2{ width: 18.75%; } .bn_second .itembox2 .item{ width: 100%; height: 100%; } .bn_second .itembox3{ width: 44.79%; position: relative; } .bn_second .itembox3 .item1{ width: 60.46%; height: 50%; } .bn_second .itembox3 .item2{ width: 60.46%; height: 50%; } .bn_second .itembox3 .item3{ width:39.54%; height: 100%; position: absolute; right: 0; top: 0; } .bn_second .item .main_con{ box-sizing:border-box; padding: 1.1rem 0 0 1rem; } .bn_second .item .tit-t{ font-size: 1rem; color: #D1BB91; margin-bottom: 1.4rem; position: relative; font-family: "PINGFANG REGULAR-subfont"; font-weight: 600; } .bn_second .item .tit-t:before{ content: ''; position: absolute; width: 1rem; height: 2px; background: #666666; border-radius: 2px; left: 0; bottom: -0.5rem; transition:all 0.3s ease 0s; } .bn_second .item .tit-t span{ font-size: 0.5rem; font-family: Microsoft YaHei; font-weight: normal; } .bn_second .item .con-t{ line-height: 0.55rem; color: #fff; width: 5.85rem; transition:all 0.5s ease 0s; opacity: 0; visibility: hidden; } @media(min-width: 1025px){ .bn_second .item .con-t{ transform:translateY(20px); } } .bn_second .item:hover:before{ opacity: 0; } .bn_second .item:hover .con-t{ opacity: 1; visibility: visible; } .bn_second .item_box .item:hover img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: none; } @media(min-width: 1025px){ .bn_second .item:hover .con-t{ transform:translateY(0); } } .bn_third{ padding: 2rem 0; } .bn_third .bn_title{ margin-bottom: 1.6rem; } .third_list{ display: flex; justify-content: space-between; } .third_list .ico_item{ width: 5rem; height: 4.25rem; background: #FBF7F0; border-radius: 0.4rem; color: #D1BB91; font-size: 0.5rem; transition:all 0.3s ease 0s; display: flex; flex-direction: column; justify-content: center; align-items: center; } .third_list .ico_item img{ max-height: 1.75rem; margin-bottom: 0.3rem; } @media(min-width: 1025px){ .third_list .ico_item:hover{ transform:translateY(3px); } } .bn_four .case_prev{ width: 1rem; height: 1rem; background: url('../../web/dcimg/Module4_icon_lower_routine.png')no-repeat center center; background-size: contain; transition:all 0.3s ease 0s; top: 45%; left: -1.7rem; } .bn_four .case_prev:hover{ background: url('../../web/dcimg/Module4_icon_lower_Select.png')no-repeat center center; background-size: contain; } .bn_four .case_next{ width: 1rem; height: 1rem; background: url('../../web/dcimg/Module4_icon_right_routine.png')no-repeat center center; background-size: contain; transition:all 0.3s ease 0s; top: 45%; right: -1.7rem; } .bn_four .case_next:hover{ background: url('../../web/dcimg/Module4_icon_right_Select.png')no-repeat center center; background-size: contain; } .swiper-button-next.swiper-button-disabled{ opacity: 1!important; } .swiper-button-prev.swiper-button-disabled{ opacity: 1!important; } .bn_four .case_swiper{ padding:1.6rem 1rem 2rem; } .bn_four .case_swiper .swiper-slide.slide{ transform: scale(0.726); box-sizing:border-box; transition:all 0.35s linear 0s; } @media(min-width: 1025px){ .bn_four .case_swiper .swiper-slide.slide{ width: 36.95%; } } .bn_four .case_swiper .swiper-slide-active.slide{ transform: scale(1); } .bn_four .case_swiper .pic_box{ box-sizing:border-box; margin-bottom: 0.6rem; border-radius: 0.6rem; overflow: hidden; max-height: 10.5rem; box-shadow: 0 1px 1rem 0 rgba(0, 0, 0, .1); transition:all 0.3s ease 0s; } .bn_four .case_swiper .swiper-slide-active.slide .pic_box{ -padding: 0.1rem; position: relative; box-shadow: 0 1px 1rem 0 rgba(0, 0, 0, .2); } .bn_four .case_swiper .swiper-slide-active.slide .pic_box:before{ content: ''; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; background: url('../../web/dcimg/Module4_bg_ipad.png')no-repeat center center; background-size: 100% 100%; z-index: 2; transform:translate(-50%,-50%); } .bn_four .case_swiper .swiper-slide-active.slide .pic_con{ background: none; } .bn_four .case_swiper .pic_box .img{ position: relative; padding-bottom:53.47% ; overflow: hidden; border-top-left-radius: 0.35rem; border-top-right-radius: 0.35rem; } .bn_four .pic_swiper{ width: 100%; height: 100%; position: absolute; left:0; top: 0; } .bn_four .pic_swiper .swiper-slide{ width: 100%; height: 100%; } .bn_four .pic_swiper .swiper-slide span{ display: none; } .bn_four .pic_swiper img{ width: 100%; } .bn_four .pic_next{ width: 1rem; height: 1rem; background: url('../../web/dcimg/Module4_icon_right_routine1.png')no-repeat center center; background-size: contain; transition: all 0.3s ease 0s; top: 39.5%; right: 1rem; display: none; } @media(min-width: 1025px){ .bn_four .pic_next:hover{ background: url('../../web/dcimg/Module4_icon_right_Select1.png')no-repeat center center; background-size: contain; } } .bn_four .pic_prev{ width: 1rem; height: 1rem; background: url('../../web/dcimg/Module4_icon_Left_routine.png')no-repeat center center; background-size: contain; transition: all 0.3s ease 0s; top: 39.5%; left: 1rem; display: none; } @media(min-width: 1025px){ .bn_four .pic_next:hover{ background: url('../../web/dcimg/Module4_icon_right_Select1.png')no-repeat center center; background-size: contain; } .bn_four .pic_prev:hover{ background: url('../../web/dcimg/Module4_icon_Left_Select.png')no-repeat center center; background-size: contain; } } .bn_four .page_box{ display: inline-block; left: 50%; transform: translateX(-50%); font-size: 12px; color: #fff; background: rgba(0,0,0,0.5); z-index: 10; padding: 0.025rem 0.45rem; border-radius: 0.5rem; bottom: 0.2rem; visibility: hidden; letter-spacing: -1px; transition: all 0.5s ease 1s; opacity: 0; } @media(max-width: 767px){ .bn_four .page_box{ font-size: 12px; padding: 0.025rem 0.2rem; } .bn_four .page_box span{ display: inline-block; transform: scale(0.8); } } .case_swiper .swiper-slide-active .pic_next{ display: block; z-index: 20; } .case_swiper .swiper-slide-active .pic_prev{ display: block; z-index: 20; } .case_swiper .swiper-slide-active .page_box{ visibility: visible; opacity: 1; } .bn_four .case_swiper .pic_box .img:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; } .bn_four .case_swiper .swiper-slide-active.slide .pic_box .img:before { background: rgba(0,0,0,0); z-index: -1; } .bn_four .case_swiper .pic_box .img img{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } .bn_four .case_swiper .swiper-slide-active.slide .pic_box .img img{ width: 98%; left: 1%; top: 1%; } .bn_four .case_swiper .swiper-slide-active.slide .pic_box .img img{ filter: none; } .bn_four .case_swiper .pic_con{ box-sizing:border-box; height: 2.4rem; background: #fff; display: flex; padding: 0 1rem; align-items: center; justify-content: space-around; } .bn_four .pic_con .pic_item{ text-align: center; } @media(min-width: 1025px){ .bn_four .pic_con .pic_item{ transform: translateY(-4px); } } .bn_four .pic_con .pic_item .t{ font-size: 0.6rem; color: #333; font-family: "PINGFANG REGULAR-subfont"; font-weight: 600; margin-bottom: -0.3rem; } .bn_four .pic_con .pic_item p{ font-size: 0.35rem; color: #999; } .bn_four .case_swiper .bot_con{ text-align: center; } .bn_four .case_swiper .bot_con .t{ font-size: 0.5rem; color: #333; margin-bottom: -0.2rem; font-family: "PINGFANG REGULAR-subfont"; font-weight: 600; } .bn_four .case_swiper .bot_con p{ color: #999; font-size: 0.35rem; } .bn_five{ background: #f5f5f5; height:13.95rem; position: relative; } .bn_five .bn_title{ position: absolute; top: 1.25rem; width: 100%; text-align: center; left: 0; } .bn_five .five_item{ width: 12.644%; } .bn_five .five_item.item1{ left: 26.6%; top: 41.218%; } .bn_five .five_item.item2{ left: 35.156%; top: 23.835%; } .bn_five .five_item.item3{ left: 35.156%; top: 58.243%; } .bn_five .five_item.item4{ left: 43.958%; top: 41.218%; } .bn_five .five_item.item5{ right: 34.7%; top: 23.835%; } .bn_five .five_item.item6{ right: 34.7%; top: 58.243%; } .bn_five .five_item.item7{ right: 26.198%; top: 41.218%; } .bn_six{ padding: 2rem 0 1.6rem; } .bn_six .bn_title{ margin-bottom: 1.1rem; } .bn_six_list li{ width: 20%; height: 2.75rem; display: flex; align-items: center; justify-content: center; } .bn_six_list li img{ transition:all 0.3s ease 0s; } .bn_six_list li:hover img{ transform:scale(1.02); } @keyframes ghostUpdown { 0% { transform:translateY(20px); } 100% { transform:translateY(10px); } } @media(max-width: 1440px){ .bn_first .num_box .span { transform: translateX(-10px); } } @media(max-width: 1024px){ .bn_banner .pc_img{ display: none; } .bn_banner .m_img{ display: block; } .bn_first .bn_maincon .bn_item{ width: 100%; } .bn_first .bn_item { padding: 3.05rem 0 0 2.5rem; } .bn_first .bn_maincon .bn_item:first-child { background: url('../../web/dcimg/Module1_bg_floorm.png')no-repeat center center; background-size: contain; } .bn_first .bn_maincon .bn_item:nth-child(2) { background: url('../../web/dcimg/Module1_bg_datam.png')no-repeat center center; background-size: contain; } .bn_first .bn_maincon .bn_item:last-child { background: url('../../web/dcimg/Module1_bg_securitym.png')no-repeat center center; background-size: contain; } .bn_first .num_box { line-height: 2.4rem; font-size: 2rem; } .bn_first .tit { font-size: 1rem; line-height: 1.7rem; } .bn_first .bn_item p { line-height: 1.6; font-size: 16px; } .bn_title { font-size: 0.8rem; line-height: 1.3rem; } .bn_second .bn_maincon { height: 352px; } .bn_second .item .con-t { width: 4.5rem; } .bn_five .five_item { width: 13.083%; } .bn_five .five_item.item4 { left: 43.5%; } .bn_four .case_prev { left: -1rem; } .bn_four .case_next { right: -1rem; } .bn_four .case_swiper .swiper-slide.slide{ width: 36.95%; } } @media(max-width: 992px){ .bn_first .bn_maincon .bn_item { height: 10rem; } .bn_first .bn_item { padding: 1.5rem 0 0 1.5rem; } .bn_first .num_box { line-height: 1.5rem; font-size: 1.2rem; } .bn_first .tit { font-size: 0.6rem; line-height: 1rem; } .bn_first .bn_item p { line-height: 1.6; font-size: 14px; } .bn_first .bn_item .iconimg.ico1 { width: 5rem; } .bn_first .bn_item .iconimg.ico2 { width: 6.1rem; } .bn_first .bn_item .iconimg.ico3 { width: 6.1rem; } .third_list{ display: block; overflow: hidden; box-sizing: border-box; padding-left: 87px; } .third_list .ico_item { float: left; width: 140px; height: 120px; margin: 0 50px 50px 0; } .bn_third { padding: 2rem 0 1rem; } .bn_four .case_swiper .swiper-slide.slide { width: 60%; transform: scale(0.8); } .bn_four .case_swiper .swiper-slide-active.slide { transform: scale(1); } .bn1720 { width: 100%; } .bn_four .case_next{ display: none; } .bn_four .case_prev{ display: none; } .bn_five .five_item.item1 { left: 28.5%; top: 41.218%; } .bn_five .five_item.item2 { left: 36.156%; top: 25.835%; } .bn_five .five_item.item3 { left: 36.156%; top: 56.243%; } .bn_five .five_item.item5 { right: 28.5%; top: 41.218%; } .bn_five .five_item.item6 { right: 36.156%; top: 25.835%; } .bn_five .five_item.item7 { right: 36.156%; top: 56.243%; } .bn_second .bn_maincon{ display: block; height: auto; } .bn_second .itembox1 { overflow: hidden; width:100%; height: 490px; } .bn_second .itembox2 { width:100%; height: 250px; } .bn_second .itembox3 { width:100%; height: 600px; } .bn_second .item_box .item .pc_img{ display: none; } .bn_second .item_box .item .m_img{ display: block; } .bn_second .item .con-t { width: 6.5rem; font-size: 0.5rem; line-height: 1.6; } } @media(max-width: 767px){ .bn1440 { max-width: 100%; width: 94%; } .bn_title { font-size: 0.46rem; line-height: 1; } .bn_title:before { width: 1rem; height: 2px; bottom: -0.3rem; } .bn_first .bn_maincon .bn_item { height: 2.8rem; padding: 0.35rem 0 0 0.775rem; margin-bottom: 0.2rem; } .bn_first .bn_maincon .bn_item:last-child{ margin-bottom: 0; } .bn_first .num_box { line-height: 1.2; font-size: 0.44rem; } .bn_first .num_box .span { transform: translateX(-0.14rem); display: inline-block; } .bn_first .tit { font-size: 0.3rem; line-height: 1.6; } .bn_first { padding: 0.75rem 0 0.75rem; } .bn_first .bn_item p { margin-top: 0.1rem; line-height: 1.6; font-size: 0.24rem; } .bn_first .bn_item .iconimg.ico1 { width: 2rem; } .bn_first .bn_title { margin-bottom: 0.75rem; } .bn_first .bn_item .iconimg.ico2 { width: 2.8rem; } .bn_first .bn_item .iconimg.ico3 { width: 2.8rem; } @keyframes ghostUpdown { 0% { transform:translateY(5px); } 100% { transform:translateY(2px); } } .bn_third { padding: 0.75rem 0 0.5rem; } .bn_third .bn_title { margin-bottom: 0.75rem; } .third_list { display: block; overflow: hidden; box-sizing: border-box; padding-left: 0; flex-wrap: wrap; flex: 2; justify-content: space-between; } .third_list .ico_item img { max-height: 0.8rem; margin-bottom: 0.1rem; } .third_list .ico_item { border-radius: 0.2rem; float: left; height: 90px; margin: 0 2% 20px 0; font-size: 0.26rem; width: 32%; } .third_list .ico_item:nth-child(3n){ margin-right: 0; } .bn_four .case_swiper .swiper-slide.slide { width:auto; transform: scale(0.9); } .bn_four .case_swiper .pic_con { height: 1.1rem; padding: 0 0.1rem; } .bn_four .case_next { width: 0.75rem; height: 0.75rem; top: 40%; right: 0.1rem; display: none; } .bn_four .case_prev { width: 0.75rem; height: 0.75rem; top: 40%; left: 0.1rem; display: none; } .bn_four .pic_con .pic_item .t { font-size: 0.36rem; margin-bottom: -0.2rem; } .bn_four .pic_con .pic_item p { font-size: 0.24rem; } .bn_four .case_swiper .swiper-slide-active.slide .pic_box { -padding: 0.075rem; } .bn_four .case_swiper .pic_box { margin-bottom: 0.25rem; border-radius: 0.25rem; box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.1); } .bn_four .case_swiper .swiper-slide-active.slide .pic_box{ box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.2); } .bn_four .case_swiper .swiper-slide-active.slide { transform: scale(1); } .bn_four .case_swiper { padding: 0.6rem 0 0.6rem; } .bn_four .case_swiper .bot_con .t { font-size: 0.34rem; } .bn_four .case_swiper .bot_con p { font-size: 0.28rem; } .bn_six_list li{ width: calc(100%/3); height: 1.15rem; } .bn_six .bn_title { margin-bottom: 0.75rem; } .bn_six { padding: 0.75rem 0 0.75rem; } .bn_five { height: 300px; } .bn_five .bn_title { top: 0.75rem; } .bn_five .five_item { width: 100px; } .bn_five .five_item.item1 { left: 3.25%; top: 48%; } .bn_five .five_item.item2 { left: 20%; top: 33%; } .bn_five .five_item.item3 { left: 20%; top: 63.243%; } .bn_five .five_item.item4 { top: 48%; left: 50%; transform: translateX(-50%); } .bn_five .five_item.item5 { right: 3.25%; top: 48%; } .bn_five .five_item.item6 { right: 20%; top: 33%; } .bn_five .five_item.item7 { right: 20%; top: 63.243%; } .bn_second .bn_title{ margin-bottom: 0.75rem; } .bn_second .item .con-t { width: 96%; font-size: 0.24rem; line-height: 1.6; } .bn_second .item .tit-t { font-size: 0.34rem; margin-bottom: 0.2rem; } .bn_second .item .tit-t:before { width: 0.33rem; height: 2px; bottom: -0.1rem; } .bn_second .item .tit-t span { font-size: 0.26rem; } .bn_second .item .main_con { padding: 0.2rem 0 0 0.2rem; } .bn_second .itembox1 { height: 4.6rem; } .bn_second .itembox2 { height: 2.44rem; } .bn_second .itembox3{ height: 4.4rem; } .bn_second .itembox2 .item .tit-t{ margin-bottom: 0.3rem; } .bn_second .itembox2 .item .con-t{ width: 60%; } .bn_second .itembox1 .item1 .tit-t{ margin-bottom: 0.5rem; } .bn_second .itembox3 .item3 .tit-t{ margin-bottom: 0.5rem; } .bn_four .case_swiper .pic_box .img { border-top-left-radius: 0.2rem; border-top-right-radius: 0.2rem; overflow: hidden; } .bn_four .case_swiper .pic_con{ border-bottom-left-radius: 0.2rem; border-bottom-right-radius: 0.2rem; overflow: hidden; } .bn_four .pic_swiper{ border-top-left-radius: 0.2rem; border-top-right-radius: 0.2rem; overflow: hidden; } .bn_four .pic_prev { width: 0.65rem; height: 0.65rem; top: 37.5%; left: 0.3rem; } .bn_four .pic_next { width: 0.65rem; height: 0.65rem; top: 37.5%; right: 0.3rem; } .bn_four .pic_con .pic_item { transform: scale(0.8); } .bn_four .case_swiper .swiper-slide-active.slide .pic_box:before{ width: 101%; height: 101%; } .bn_four .case_swiper .swiper-slide-active.slide .pic_box .img img { width: 100%; left: 0; top: 0%; } .bn_four .case_swiper .swiper-slide.slide{ transition:all 0.6s ease 0s; } .bn_four .case_swiper .swiper-slide.slide{ -overflow: hidden; -border-top-left-radius: 0.25rem; -border-top-right-radius: 0.25rem; } .bn_four .case_swiper .pic_box{ overflow: visible; } } .third_list{ transform: translateX(2%); } @media(max-width: 1024px){ .third_list{ transform: translateX(1%); } } @media(max-width: 992px){ .third_list{ transform: translateX(0); } }