/* CSS Document */ body { font:14px "microsoft Yahei","Arial",sans-serif; color: #333; word-wrap:break-word; -webkit-tap-highlight-color:rgba(0,0,0,0); background: #fff;} body,form,input,p,ol,ul,li,h1,h2,h3,h4,h5,h6,table,th,td,dl,dt,dd{padding:0;margin:0;} img{border:0; vertical-align: middle;} ul,li{list-style:none;} dl,dt,dd{display: block;} a{text-decoration:none; transition: 0.5s; outline: none;} a:hover{color: #f60} input,textarea{ box-sizing: border-box; outline:none; border: 0; background:none; font:14px "microsoft Yahei","Arial",sans-serif; width: 100%; } input[type="button"], input[type="submit"], input[type="text"] {-webkit-appearance: none; outline: none; } h2{font-weight:400;} i{ font-style:normal;} b{ font-weight:normal;} /*文本框默认颜色*/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #333; opacity: 1} input:-moz-placeholder, textarea:-moz-placeholder {color: #333; opacity: 1} input::-moz-placeholder, textarea::-moz-placeholder {color: #333; opacity: 1} input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #333; opacity: 1;} /* clear 页头，页脚，内容区都不用再加清除样式 */ .cf:before, body:before, .header:before, .main:before, .footer:before, .wrap:before { content: ''; display: table } .cf:after, after, .header:after, .main:after, .footer:after, .wrap:after { content: ''; display: table; clear: both } .cf, .header, .main, .footer, .wrap { *zoom: 1 } .clear{ width: 100%; height: 0; overflow: hidden; clear: both; } /* barba过场动画 */ .barba_ba{ width: 100%; height: 100%; background: #000; opacity: 1; z-index: 100000; position: fixed; left: 0; top: 0; visibility: hidden; opacity: 0; transition:0.6s;} .barba_ba_one{ opacity: 1; visibility: visible;} .barba_ba .barba_con{ width: 400px; height: 173px; position: absolute; left: 50%; top: 50%; margin: -87px 0 0 -200px; background: url(../image/baeba_logo.png) no-repeat center top ; opacity: 0; transform: scale(2); transition:transform 1s, opacity 1s;} .barba_ba_one .barba_con{ opacity: 1; transform: scale(1);} /*图片放大*/ @media screen and (max-width: 1920px) and (min-width: 1200px){ .tr_sc{ overflow:hidden; display:block;} .tr_sc img{transition:0.5s all;} .tr_sc:hover img{transform:scale(1.1,1.1);} } /*其他公用*/ .wrap{width: 1200px; margin: 0 auto; } #top{position:fixed; bottom:25%; right:20px; cursor:pointer; width:50px; height:50px; background: #666 url(http://www.1feel.cn/Template/sy2022/images/top.png) center no-repeat; z-index:9;} .hidden{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width: 100%; display: inline-block;} .back_img{background-repeat: no-repeat; background-position:top center; background-size: cover; } /* load */ .load_body{ width: 100%; position: absolute; height: 100%; overflow: hidden;} .load{ position: fixed; width: 100%; height: 100%; left: 0; top:0; background:#f0f2f5 url(../image/back_load.png); z-index: 9999; display: none;} .load .img img{ display: none;} /*.load .icon{ position: absolute; width: 300px; height: 300px; left: 50%; top:50%; margin: -150px 0 0 -150px; } .load .icon1{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/load1.png) no-repeat center; background-size: 80px auto; } .load .icon2{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/load2.gif) no-repeat center; background-size: 100px auto;}*/ .load_box{position: fixed; top: 50%; width: 100%; margin-top: -20px;} .load_box .txt{text-align: center; font-size: 16px; color: #8892a0;} /* load加载动画 */ .container { left: 50%; position: absolute; top: 40px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } /* PROGRESS */ .progress { background-color: #e5e9eb; height: 0.25em; position: relative; width: 30em; } .progress-bar { animation-duration: 3s; animation-name: width; background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); background-size: 30em 0.25em; height: 100%; position: relative; } .progress-shadow { background-image: linear-gradient(to bottom, #eaecee, transparent); background-image: -webkit-linear-gradient(to bottom, #eaecee, transparent); height: 4em; position: absolute; top: 100%; transform: skew(45deg); transform-origin: 0 0; width: 100%; } /* ANIMATIONS */ @keyframes width { 0%, 100% { transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); } 0% { width: 0; } 100% { width: 100%; } } /* 网站头/尾 */ .header{width: 100%; height: 60px; position: fixed; z-index: 9; } .header .part1{float: left; padding: 30px 0 0 50px} .header .part2{float: right} .header .part2 .tel{float: left; background: url(../image/xx_01.png) repeat-y; width: 267px; text-align: center; height: 60px; line-height: 60px} .header .part2 .tel i{color: #fff; background: url(../image/ico_01.png) center left no-repeat; padding-left: 35px; display: inline-block; font-family: 'DIN-REGULAR'; font-size: 22px;} .header .part2 .nav_but{float: left; width: 60px; height: 60px; cursor: pointer; background: #fff;} .header .part2 .nav_but i{width: 24px; height: 2px; margin: 29px 0 0 20px; background: #333; display: block; position: relative; transition: 0.5s;} .header .part2 .nav_but i:before, .header .part2 .nav_but i:after{content:""; position:absolute; left:0; top:0; display:block; width:100%; height:2px; background: #333; transition: 0.5s;} .header .part2 .nav_but i:before{ margin-top: -8px;} .header .part2 .nav_but i:after{ margin-top: 8px;} .header .part2 .nav_but.one i{background: none} .header .part2 .nav_but.one i:before{ transform: rotate(45deg); margin: 0;} .header .part2 .nav_but.one i:after{ transform: rotate(-45deg); margin: 0;} .header::before{contain: ""; position: absolute; left: 0; top: 0; width: 100%; height: 200px; z-index: -1; background: url(../image/xx_07.png) repeat-x;} /*头部*/ .head{ width:100%; position:fixed; top:0; left:0;z-index:90; height: 104px; padding:40px 60px; box-sizing: border-box; transition: 0.3s;} .head::before{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,1); opacity: 0; z-index: -1; transition: 0.3s;} .head .logo{ float: left;transition: 0.3s;} .head .logo img{ width: 150px;transition: 0.3s;} .head .r{ line-height:44px;transition: 0.3s; overflow: hidden; display: flex; justify-content: space-between;} .head .nav{float: left; margin: 0 auto;} .head .nav a{ display:block; float:left; font-size:15px; font-weight: bold; color:#fff; margin:0 40px;transition: 0.3s; position: relative; } .head .nav a:hover, .head .nav a.one{ color:#25c4d1;} .head .nav a::after{ content: ""; position: absolute; bottom: 4px; left: 0; width: 0%; height: 2px; background: #10c4cb; transition: 0.3s;} .head .nav a:hover:after, .head .nav a.one:after{ width: 100%;} .head .phone{float: left; font-size:26px; font-weight: bold; background: url(../image/ico_01a.png) no-repeat left center; padding: 0 0 0 40px; color: #fff; font-family: 'bahnschrift','Arial';transition: 0.3s; letter-spacing: 0.03em; } .phone_nav{ display: none;} .head.head_top{ padding: 7px 40px; height: 50px;} .head.head_top::before{ opacity: 1;} .head.head_top .logo{ line-height:36px;} .head.head_top .logo img{ width: 120px;} .head.head_top .r{ line-height:36px;} .head.head_top .nav{ } .head.head_top .phone{ font-size: 18px;} .head.head_top .nav a{ margin:0 50px 0 0;} /* 底部 */ .footer{height: 630px; background-image: url(../image/footer_01.jpg); background-size: cover; background-position: center; position: relative; z-index: 1; overflow: hidden;} .footer .footer_yun{opacity: .5; position: absolute; left: 0; top: 0; width: 200%; height: 100%; background-repeat: repeat-x; background-position: 0 0;background-size: 50% auto;} .footer .footer_yun.div1{background-image: url(../image/footer_02.png); animation: footerCloudAnim 35s infinite linear; } .footer .footer_yun.div2{background-image: url(../image/footer_03.png); animation: footerCloudAnim 20s infinite linear; } .footer .footer_zf{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-size: cover; background-position: center;} .footer .footer_zf.div1{background-image: url(../image/footer_04.png); animation: footeropacity 10s 3s infinite;} .footer .footer_zf.div2{background-image: url(../image/footer_05.png); animation: footeropacity 10s 1s infinite;} .footer .footer_zf.div3{background-image: url(../image/footer_06.png); animation: footeropacity 10s 2s infinite;} .footer .wrap{position: relative; z-index: 1; padding-top: 340px} .footer .part1{float: left;} .footer .part1 .nav {padding-bottom: 40px;} .footer .part1 .nav li{float: left; padding-right: 60px;} .footer .part1 .nav li:last-child{padding: 0} .footer .part1 .nav a{color: #fff; font-weight: bold} .footer .part1 .nav a:hover{color: #333} .footer .part1 .tet{font-size: 12px; line-height: 24px; color: #e0e8f3} .footer .part1 .tet a{color: #e0e8f3;} .footer .part2{float: right} .footer .part2 .logo{padding-bottom: 25px} .footer .part2 .but {float: right} .footer .part2 .but i{float: left; margin-left: 20px; cursor: pointer;} .footer .part1{ transform: translateX(-100px); transition: all 1s; opacity: 0;} .footer .part2{ transform: translateX(100px); transition: all 1s; opacity: 0;} .footer .footer_kuai1{position: absolute;left: 0;top: 0;width: 100%;height: 100%; transform: translateY(50px); transition: all 0.6s; opacity: 0; } .footer .footer_kuai2{position: absolute;left: 0;top: 0;width: 100%;height: 100%; transform: translateY(50px); transition: all 0.6s 0.2; opacity: 0;} .footer .footer_zf{ transform: translateY(50px); transition: all 0.6s 0.4s; opacity: 0;} /* .footer.footer_an .footer_kuai1, .footer.footer_an .footer_kuai2, .footer.footer_an .footer_zf, .footer.footer_an .part1, .footer.footer_an .part2{ transform: translateX(0); opacity: 1;} */ .footer .footer_kuai1, .footer .footer_kuai2, .footer .footer_zf, .footer .part1, .footer .part2{ transform: translateX(0); opacity: 1;} .footer_black .footer{ background: #000;} .footer_black .footer .footer_yun{ display: none;} .footer_black .footer_zf.div1{ display: none;} .footer_black .footer_zf.div2{ display: none;} .footer_black .footer_zf.div3{background-image: url(../image/footer_07.jpg); animation: none;} /*底部-老板*/ /*.Photo{ padding:0 50px;}*/ .Photo{ position: relative; z-index: 10;} .Photo li{ float:left; width:25%; } .Photo li img{ width:100%;} .foot{ padding:0 10px; height:380px; background:#252525; clear:both; overflow:hidden; text-align:center; color:#fff; position: relative; z-index: 10;} .foot .b_logo{ padding:69px 0 21px 0} .foot b{ display:block; font-size:18px;} .foot b a{ color: #fff;} .foot b i{ padding:0 10px;} .foot em{ font-style:normal; font-size:12px; padding:30px 0 30px 0; display:block; color:#999;} .foot .bq i{ display:block; color:#999; line-height:18px; font-size:12px;} .foot .nav{padding-bottom: 20px} .foot .nav a{color: #999; margin:0 10px} .foot .nav a:hover{color: #fff;} /* 右侧悬浮窗-在线咨询 */ .right_btn{ position: fixed; right:60px; bottom: 60px; width: 60px; z-index: 999;} .right_btn .zxxz{ width: 100%; height: 60px; background: #000; box-shadow: 0px 0px 32px rgba(19,165,191,0.83); position: relative; border-radius: 50%; animation: zxxzBoxShadow 2s infinite; transition: all 0.6s; cursor: pointer;} .right_btn .zxxz .iconfont{ width: 100%; height: 100%; display: block; color: #fff; font-size: 30px; text-align: center; line-height: 1; padding-top: 16px; transition: all 0.6s;} .right_btn .zxxz .dian_bg{ display: block; position: absolute; top: 0; text-align: center; width: 100%; height: 4px;padding-top: 16px;} .right_btn .zxxz .dian_bg .dian{ display: inline-block; background: #25c4d1; width: 4px; height: 4px; border-radius: 50%; margin: 0 1.5px;} .right_btn .zxxz.zxxz2{ background: #fff;} .right_btn .zxxz.zxxz2 .iconfont{ color: #000; } @keyframes zxxzBoxShadow{ 0%{ box-shadow: 0px 0px 15px rgba(19,165,191,0)} 50%{ box-shadow: 0px 0px 50px rgba(19,165,191,1)} 100%{ box-shadow: 0px 0px 15px rgba(19,165,191,0)} } /* 左侧进度条 */ .left_scroll{position: fixed; left: 80px; bottom: 30px; width: 1px; height: 95px; z-index: 9999; mix-blend-mode: difference;} .left_scroll::after{ content: "Roll down"; font-weight: 300; color: #fff; position: absolute; right: 6px; bottom: 120%; width: 100px; transform:rotate(90deg); font-size: 14px; text-align: right; transform-origin: right bottom; line-height: 1;} .left_scroll .scroll{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.2); overflow: hidden;} .left_scroll .scroll::before{ content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: #fff; animation: left_scroll 3s infinite normal;} @keyframes left_scroll { 0% {transform: translate3d(0, -100%, 0);} 15% {transform: translate3d(0, -98%, 0);} 85% { transform: translate3d(0, 98%, 0);} 100% {transform: translate3d(0, 100%, 0);} } /* 左侧进度条2 */ .left_scroll2{position: fixed; left: 50px; bottom: 50px; width: 100px; height: 100px; z-index: 9999; mix-blend-mode: difference; background: url(../image/btn_zx5.png) no-repeat; background-size: contain;} .left_scroll2 .nav_outline{ width: 100%; height: 100%; } .left_scroll2 .nav_outline rect{ fill: none; width: calc(100% - 2px); height: calc(100% - 2px); transform-origin: 50% 50%; stroke: #fff; opacity: 0.2; stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 2;} .left_scroll2 .nav_outline rect+rect{stroke-dashoffset: 1;opacity: 1; transition: all 0.4s cubic-bezier(.01,.22,.41,.99);} /* .left_scroll2 .nav_outline rect+rect{ animation: left_scroll2 6s infinite normal;} @keyframes left_scroll2 { 0% { stroke-dashoffset: 1;opacity: 1;} 90% { stroke-dashoffset: 0;opacity: 1;} 100% { stroke-dashoffset: 0;opacity: 0;} } */ /* 头部及左右入场 */ @media screen and (min-width:758px){ .head{ transform: translateY(-80px); opacity: 0;} .head.on{ transform: translate(0); opacity: 1; transition: 1s;} .left_scroll{ transform: translateX(-40px); opacity: 0;} .left_scroll.on{ transform: translate(0); opacity: 1; transition: 1s;} .right_icon{ transform: translateX(40px); opacity: 0;} .right_icon.on{ transform: translate(0); opacity: 1; transition: 1s;} } /*首页*/ .body_scrollbar{ height:100%;} .in_part1 {position: fixed; width: 100%; height: 100vh; left: 0; top: 0; overflow: hidden; background: no-repeat center; background-size: cover; background-color: #000;} .in_part1::after{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 10; pointer-events: none;} .in_part1::before{ content: ""; position: absolute; width: 100%; height: 40%; left: 0; bottom: 0; background-image: linear-gradient(to top, #000 0%, transparent 100%);z-index: 20; pointer-events: none;} .in_part1::before, .in_part1::after{ display: none \9;} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .in_part1::before, .in_part1::after{ display: none;} } .in_part1 video{position: absolute; left: 0; top: -0; width: 100%; height: 100%; display: block; object-fit:cover} /*.in_part1::before{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/back_01.png) center no-repeat; background-size: cover; z-index: 1;}*/ .in_part1 .wrap{height: 100%; position: relative; z-index: 30;} .in_part1 .txt{color: #fff; font-size: 60px; line-height: 1.4; position: absolute; left: -40px; top: 50%; } .in_part1 .txt .pxx2{ font-size: 26px; font-weight: 300; line-height: 1;} .in_part1 .txt .pxx_xian{ height: 1px; width: 0; transition: all 0.4s 0.2s; background: #fff; opacity: 0.2;} .in_part1 .txt .pxx_xian.one{ width: 100%;} .in_part1 .txt span{ display: inline-block;} .in_part1 .back{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 15;} .in_part1 .back li{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0;} .in_part1 .back .li1{z-index: 6; animation: footeropacity 20s 0s infinite;} .in_part1 .back .li2{z-index: 5; animation: footeropacity 30s 0s infinite;} .in_part1 .back .li3{z-index: 4; animation: footeropacity 30s 0s infinite;} .in_part1 .back .li4{z-index: 3; animation: footeropacity 10s 0s infinite;} .in_part1 .back .li5{z-index: 2; animation: footeropacity 20s 0s infinite;} .in_part1 .back .li6{z-index: 1; animation: footeropacity 40s 0s infinite;} .in_part2{ background: rgba(0,0,0,0); padding: 300px 0;position: relative; z-index: 1;} .in_part2::before{content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 8px; background: #47e1ed; transition: 1s; } .in_part2.xx::before{width: 100%} .in_part2 .txt{ text-align: center; padding-bottom: 120px; opacity: 1;} .in_part2 .txt span{ font-size: 46px; line-height: 46px; color: #25c4d1; text-transform: uppercase; font-weight: bold; letter-spacing: 4px; padding-bottom: 25px; display: inline-block;} .in_part2 .txt h2{font-size: 18px; font-weight: bold; color: #fff; letter-spacing: 4px;} .in_part2 .list ul{margin: -60px 0} .in_part2 .list li{float: left; width: 50%; text-align: center; color: #fff; padding: 60px 0; opacity: 0;} .in_part2 .list dt{margin-bottom: 15px; height: 100px; } .in_part2 .list dd{ width: 75%; margin: 0 auto;} .in_part2 .list b{font-weight: bold; display: block; font-size: 18px; padding-bottom: 13px; letter-spacing: 2px;} .in_part2 .list i{ font-size: 16px; opacity: 0.5; letter-spacing: 1px; line-height: 1.5;} /* .in_part2 .list .li_svg path{stroke-width:1;stroke:#fff;fill: none;stroke-dasharray: 0;stroke-dashoffset: 0;} .in_part2 .list .li_svg .cls-1-blue{stroke:#2bdefc;} @keyframes lineMove1 { to {stroke-dashoffset: 0;} } */ .in_part2 li.li1{ opacity: 0; transition: 1s; transform: scale(0.6);} .in_part2 li.li1.one{ opacity: 1; transform: scale(1);} .in_part2 li.li2{ opacity: 0; transition: 1s; transform: scale(0.6);} .in_part2 li.li2.one{ opacity: 1; transform: scale(1);} /* 4个icon */ .in_part2 .li_svg{width: 100px; height: 100px; position: relative; margin: 0 auto;} .in_part2 .li_svg > div{position: absolute; left: 0; top: 0;} .in_part2 .li_svg1 .li1{animation: in_icon_1 1.5s infinite ease-in-out; animation-direction:alternate; transform-origin:50% 90%;} .in_part2 .li_svg1 .li2{animation: in_icon_1 1.5s infinite ease-in-out; animation-direction:alternate; transform-origin:50% 90%;} .in_part2 .li_svg1 .li2 span{animation: in_icon_1a 1.5s 0.5s infinite ease-in-out; animation-direction:alternate; transform-origin:50% 20%; display: block;} @keyframes in_icon_1 { 0% {transform: rotate(20deg);} 100% {transform: rotate(-20deg);} } @keyframes in_icon_1a { 0% {transform: rotate(-20deg);} 100% {transform: rotate(20deg);} } .in_part2 .li_svg2 > div{ transition: 0.4s;} .in_part2 .li_svg2 > div img{vertical-align:initial } .in_part2 .li_svg2 .li1{ left: auto; right: 10px; top: 10px;} .in_part2 .li_svg2 .li2{ left: auto; right: 10px; top: 10px;} .in_part2 .li_svg2 .li3{ left: auto; right: 6px; top: auto; bottom: 15px; transition-duration:0.3s; transform: rotate(90deg) scale(1.5); opacity: 0; z-index: 1; } .in_part2 .li_svg2 .li4{ left: auto; right: 6px; top: auto; bottom: 15px; transform: rotate(90deg); opacity: 0;} .in_part2 .li_svg2 .li5{ left: 11px; top: auto; bottom: 10px; transform: rotate(180deg); opacity: 0; } .in_part2 .li_svg2 .li6{ left: 6px; top: 15px; transform: rotate(270deg) scale(1.5); transition-duration:0.3s; opacity: 0; } .in_part2 .li_svg2.on .li2{transform: rotate(90deg) translate(31px,-5px) } .in_part2 .li_svg2.on .li3{opacity: 1; transition-delay: 0.4s; transition-timing-function: ease-in; transform: rotate(90deg) scale(1);} .in_part2 .li_svg2.on .li4{transform: rotate(180deg) translate(31px,-5px); opacity: 1; transition-delay: 0.4s;} .in_part2 .li_svg2.on .li5{transform: rotate(270deg) translate(31px,-5px); opacity: 1; transition-delay: 0.8s;} .in_part2 .li_svg2.on .li6{opacity: 1; transform: rotate(270deg) scale(1); transition-timing-function: ease-in; transition-delay: 1.3s;} .in_part2 .li_svg3 .li1{top: 7px; right: 10px; left: auto; z-index: 1;transform: translate(0,0); } .in_part2 .li_svg3 .li2{top: 33px; left: 10px; z-index: 1; transform: translate(0,0); } .in_part2 .li_svg4 > div{ opacity: 0; transition: 0.5s;} .in_part2 .li_svg5{ overflow: hidden;} .in_part2 .li_svg5 .icon_box{ box-sizing: border-box; animation: div5_icon_box 2s infinite linear; width: 62px; height: 100px; margin: 0 auto; background: #080606; border: 1px solid #fff; border-radius: 5px; position: relative; } .in_part2 .li_svg5 .icon_box .li{ position: absolute; left: 0; top:0; width:100%; height: 100%; text-align: center; display: flex; justify-content: center;align-items: center;} .in_part2 .li_svg5 .icon_box .li1{} .in_part2 .li_svg5 .icon_box .li2{ transform: scale(0); transform-origin: 20% 80%;} .in_part2 .li_svg5 .icon_box .li3{flex-direction:column} .in_part2 .li_svg5 .icon_box .li3 .dian{ height: 1px; width: 46px; background: #fff; margin:7px auto; position: relative; opacity: 0; } .in_part2 .li_svg5 .icon_box .li3 .dian::after{ content: ""; position: absolute; width: 12px; height: 12px; border:1px solid #fff; background: #2bdffd; border-radius: 50%; top: -6px; left: 80%; box-sizing: border-box; } .in_part2 .li_svg5 .icon_box .li3 .dian.dian2:after{ right: 80%; left: auto;} .in_part2 .li_svg5 .icon_box .li3a{ width: 24px; height: 18px; border-left: 1px solid #fff; border-right: 1px solid #fff; background: #080606; position: absolute; left: 50%; margin-left: -12px; bottom: 2px; box-sizing: border-box; z-index: -1; } .in_part2 .li_svg5 .icon_box .li3a::after{ content: ""; position: absolute; width: 50px; height: 2px; background: #fff; left: -13px; bottom: -2px;} .in_part2 .li_svg5 .icon_box_1{ width: 62px; height: 100px; transition: 0.6s 0.2s; overflow: hidden;} .in_part2 .li_svg5 .icon_box_2{ width: 84px; height: 100px; margin-top: 0; transition: 0.6s; overflow: hidden;} .in_part2 .li_svg5 .icon_box_3{ width: 100px; height: 66px; margin-top: 8px; transition: 0.6s;} .in_part2 .li_svg5 .icon_box_1 .li3a{ bottom: 2px;transition: 0.4s;} .in_part2 .li_svg5 .icon_box_1 .li1{ transform: translateX(0); transition: 0.4s 0.4s;} .in_part2 .li_svg5 .icon_box_1 .li3 .dian{ opacity: 0;transition: 0.4s;} .in_part2 .li_svg5 .icon_box_1 .li3 .dian::after{ left: 80%; transition: 0.4s 0s;} .in_part2 .li_svg5 .icon_box_1 .li3 .dian.dian2:after{ right: 80%;} .in_part2 .li_svg5 .icon_box_2 .li1{ transform: translateX(100%); transition: 0.6s;} .in_part2 .li_svg5 .icon_box_2 .li2{ transform: scale(1);transition: 0.6s 0.4s;} .in_part2 .li_svg5 .icon_box_3 .li1{ transform: translateX(-100%); transition: 0s;} .in_part2 .li_svg5 .icon_box_3 .li2{ opacity: 0;transition: 0.6s;} .in_part2 .li_svg5 .icon_box_3 .li3a{ bottom: -18px;transition: 0.4s 0.6s;} .in_part2 .li_svg5 .icon_box_3 .li3 .dian{ opacity: 1;transition: 0.4s 0.2s;} .in_part2 .li_svg5 .icon_box_3 .li3 .dian::after{ left: -4px; transition: 0.6s 0.2s;} .in_part2 .li_svg5 .icon_box_3 .li3 .dian.dian2:after{ right: -4px;} .in_part3 {text-align: center; padding: 350px 0 280px 0; background: #fff; position: relative; z-index: 1; } .in_part3 .wrap { position: relative; z-index: 10; } .in_part3 .txt{font-size: 56px; line-height: 1.1; color: #000; padding-bottom: 50px;} .in_part3 .tet{font-size: 20px; line-height: 40px; color: #666; padding-bottom: 50px; letter-spacing: 2px; font-weight: lighter} .in_part3 .tat a{display: inline-block; width: 180px; position: relative; height: 52px; line-height: 49px; font-size: 16px; color: #fff; background: #25c4d1; border: 2px solid #25c4d1; letter-spacing: 2px;} .in_part3 .tat i{position: relative; z-index: 1;} .in_part3 .tat a::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.4s;} .in_part3 .tat a:hover::before{transform: scaleX(1); transform-origin: 0 50%;} .in_part3 .tat a:hover{ color: #25c4d1} .in_part3 .tet_pc{ display: block;} .in_part3 .tet_iphone{ display: none;} .in_part4 .yun_box{display: none;} .in_part4{background: #fff; position: relative; z-index: 1; overflow: hidden;} .in_part4 .box{margin: 0 60px; position: relative; padding: 150px 0; z-index: 10;} .in_part4 .box .xx{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-left: 1px solid #f60; box-sizing: border-box; z-index: -9999;} .in_part4 .box .xx li{width: 16.6%; height: 100%; float: left; border-right: 1px solid #f60; box-sizing: border-box;} .in_part4 .top_con{position: absolute; right: 0%; top: 0; width: 45%;} .in_part4 .top_con .txt{font-size: 56px; line-height: 1.42; color: #000; padding-bottom: 40px;} .in_part4 .top_con .tet{font-size: 21px; line-height: 40px; color: #666; padding-bottom: 50px; font-weight: lighter; letter-spacing: 4px;} .in_part4 .top_con .tat a{display: inline-block; position: relative; width: 180px; height: 52px; line-height: 49px; font-size: 16px; color: #fff; background: #25c4d1; border: 2px solid #25c4d1; box-sizing: border-box; text-align: center; letter-spacing: 2px;} .in_part4 .top_con i{position: relative; z-index: 1;} .in_part4 .top_con a::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.4s;} .in_part4 .top_con a:hover::before{transform: scaleX(1); transform-origin: 0% 50%;} .in_part4 .top_con a:hover{ color: #25c4d1} .in_part4 .list li{float: left; width: 16.6%; } .in_part4 .list .maxli{width: 33.2%;} .in_part4 .list .maxli .li_box{ position: relative; z-index: 1;} .in_part4 .list .li_box{position: relative; width: 100%; padding-bottom: 100%; opacity: 0; transition: 0.8s; transform-origin: right bottom} .in_part4 .list .li_box .img_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: left bottom; transform: scaleX(0); transition:transform 0.4s cubic-bezier(.5,.12,1,.99),box-shadow 0.4s 0.3s;} .in_part4 .list .li_box .img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .in_part4 .list .li_box .img img{width: 100%;} .in_part4 .list .li_box .img i{position: absolute; right: 0; top: 0; width: 100%; height: 100%; opacity: 1; display: block; z-index: 1; transition: 0.4s 0.3s cubic-bezier(.5,.12,1,.99); background: #f3f3f3} .in_part4 .list .li_box .img video{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} .in_part4 .list .li_box .maximg img{position: absolute; left: 0; bottom: 0; width: 140%; height: 140%; left: -20%;} .in_part4 .list .ul2 .li3 .li_box .maximg img{ right:0; left: auto;} .in_part4 .list .ul1 .li2 .li_box .maximg img{ right:0; left: auto;} .in_part4 .list .ul4 .li1 .li_box .maximg img{ right:0; left: auto;} .in_part4 .list .li_box .img_vid video{ display: block;} .in_part4 .list .li_box .img_vid img{ display: none;} .in_part4 .list .li_box .maximg::before { content: ''; position: absolute; left: -120%; top: -120%; width: 200%; height: 200%; z-index: 2; background: radial-gradient(ellipse at center,#e60012 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%); opacity: 0; transition:0.4s 0.3s} .in_part4 .list .li_box .maximg::after { content: ''; position: absolute; left: -75%; bottom: -50%; width: 150%; height: 100%; z-index: 2; background: radial-gradient(ellipse at center,#00396a 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%); opacity: 0; transition:0.4s 0.3s} .in_part4 .list .logo{position: absolute; left: 40px; top: 40px; z-index: 3; opacity: 0;} .in_part4 .list .con{position: absolute; left: 40px; bottom: 40px; color: #fff; z-index: 3; opacity: 0;} .in_part4 .list .con .txt{font-weight: bold; font-size: 20px; padding-bottom: 10px; letter-spacing: 2px; } .in_part4 .list .con .tet{font-size: 16px; line-height: 23px; width: 60%; letter-spacing: 2px; } .in_part4 .list .maxli .li_box_wrap{position: relative; width: 50%; height: 50%;} .in_part4 .list .maxli .li_box_wrap .li_box{box-shadow:none; z-index: 0;} .in_part4 .li_more{width: 100%; padding-bottom: 100%; background: #25c4d1; position: relative; margin-top: 100%; box-shadow: 0 67px 180px rgba(4,105,128,0.6)} .in_part4 .li_more .txt{position: absolute; left: 0; top: 50%; color: #fff; width: 100%; text-align: center; margin-top: -20px; letter-spacing: 2px } .in_part4 .li_more .txt span{text-align: left; width: 90px; display: inline-block; font-size: 20px} .in_part4 .li_more .txt b{display: inline-block;} .in_part4 .list a{position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: block;} .in_part4 .list .ul_one{opacity: 1;} .in_part4 .list .li_hover.ul_one .img_box{ box-shadow: 0 67px 180px rgba(4,105,128,0.6)} .in_part4 .list .ul_one .img_box{ transform: scaleX(1);} .in_part4 .list .ul_one .logo, .in_part4 .list .ul_one .con{opacity: 1; transition-delay: 0.3s;} .in_part4 .list .ul_one .img i{width: 0%;} .in_part4 .list .li_box.ul_one .maximg::before{opacity: 1; transition-delay: 1s;} .in_part4 .list .li_box.ul_one .maximg::after{opacity: 1; transition-delay: 1s;} .in_part4 .list .li_hover.ul_one_hove:hover{transform: scale(1.07)} .in_part4 .ul2 .li1{margin-left: 16.6%} .in_part4 .ul2 .li1 .li_box{margin-top: 100%} .in_part4 .ul2 .li4 .li_box{margin-top: 100%} .in_part4 .ul3 .li1 .li_box_wrap{margin-left: 50%} .in_part4 .ul3 .li3 .li_box_wrap{margin-top: 50%} .in_part4 .ul4 .li1{margin-left: 16.6%} .in_part4 .ul4 .li3 .li_box{margin-top: 100%} .in_part4 .ul5 .li1{margin-left: 16.6%} .in_part4 .ul5 .li1 .li_box{margin-top: 100%} .in_part4 .ul5 .li4 .li_box{margin-top: 100%} .in_part4 .ul6 .li1{margin-left: 16.6%} .in_part4 .ul6 .li3 .li_box{margin-top: 100%} .in_part4 .ul7 .li2 .li_box{margin-top: 100%} .in_part4 .ul8 .li1{margin-left: 16.6%} .in_part4 .ul8 .li3 .li_box{margin-top: 100%} .in_part4 .list .ul1 .li_box .maximg::before {background: radial-gradient(ellipse at center,#001e74 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%); } .in_part4 .list .ul1 .li_box .maximg::after {background: radial-gradient(ellipse at center,#630ce7 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul2 .li_box .maximg::before {background: radial-gradient(ellipse at center,#00befc 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul2 .li_box .maximg::after {background: radial-gradient(ellipse at center,#95530c 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul3 .li1 .li_box .maximg::before {background: radial-gradient(ellipse at center,#09af6f 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul3 .li1 .li_box .maximg::after {background: radial-gradient(ellipse at center,#8c3301 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul3 .li2 .li_box .maximg::before {background: radial-gradient(ellipse at center,#e60012 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul3 .li2 .li_box .maximg::after {background: radial-gradient(ellipse at center,#00396a 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul3 .li3 .li_box .maximg::before {background: radial-gradient(ellipse at center,#0a741d 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul3 .li3 .li_box .maximg::after {background: radial-gradient(ellipse at center,#a15905 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul4 .li_box .maximg::before {background: radial-gradient(ellipse at center,#0173a8 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul4 .li_box .maximg::after {background: radial-gradient(ellipse at center,#1b64ba 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul5 .li_box .maximg::before {background: radial-gradient(ellipse at center,#096966 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul5 .li_box .maximg::after {background: radial-gradient(ellipse at center,#56068e 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} /* .in_part4 .list .ul6 .li_box .maximg::before {background: radial-gradient(ellipse at center,#0a741d 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul6 .li_box .maximg::after {background: radial-gradient(ellipse at center,#e48600 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} */ .in_part4 .list .ul6 .li_box .maximg::before { background: url(../image/in_bg.png) no-repeat center; background-size: cover; width: 100%; height: 100%; left: 0; top: 0;} .in_part4 .list .ul6 .li_box .maximg::after {background: radial-gradient(ellipse at center,#005096 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul7 .li_box .maximg::before {background: radial-gradient(ellipse at center,#fe9a2a 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul7 .li_box .maximg::after {background: radial-gradient(ellipse at center,#fc6500 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul8 .li_box .maximg::before {background: radial-gradient(ellipse at center,#8a3cff 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part4 .list .ul8 .li_box .maximg::after {background: radial-gradient(ellipse at center,#000 0%,rgba(239,168,173,0) 60%,rgba(255,255,255,0) 100%);} .in_part5{background: #fff; position: relative; z-index: 1; overflow: hidden; height: 1200px;} /* .in_part5::before{content: ""; position: absolute; left: 0; top: 0; background: url(../image/xx_02.png) repeat-x; width: 100%; height: 100%; z-index: 1;} */ .in_part5 .img{position: absolute; left: 0; top: 0; width: 100%; background: url(../image/xx_03a.jpg) center; background-size: auto; overflow: hidden;} .in_part5 .img.pf{ position: fixed; } .in_part5 .img ul{position: absolute; left: -10%; top: -50%; width: 100%; height: 100%; transform: rotate(0)} .in_part5 .img li{float: left; width: 25%; box-sizing: border-box; padding:0 20px;} .in_part5 .img li img{width: 100%; margin-bottom: 40px;} .in_part5 .xx{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../image/xx_03b.png) repeat-x; z-index: 1; opacity: 0; background-size: auto 100%; } .in_part5 .xx.pf{ position: fixed;} .in_part5 .list{position: absolute; left: 0; top: 50%; margin-top: -200px; transform: translateY(300px); width: 100%; z-index:1; opacity: 0; padding-top: 100px;} .in_part5 .list.pf{ position: fixed; } .in_part5 .list::before{content: ""; background: url(../image/ico_02.png) center top no-repeat; width: 100%; height: 50px; position: absolute; left: 0; top: 0; transition: 0.8s;} .in_part5 .list ul{width: 1100px; height: 300px; margin: 0 auto; position: relative;} .in_part5 .list li{position: absolute; left: 0; top: 0; color: #fff; text-align: center; transition: 0.6s; width: 100%;} .in_part5 .list dt{ margin-bottom: 80px; font-size: 36px; line-height: 1.55; letter-spacing: 0.1em; transition: 0.6s;} .in_part5 .list dt .tit{ font-size: 14px; color: #25c4d1; font-weight: 300; padding-bottom: 20px;} .in_part5 .list dt .tit b{ font-weight: bold;} .in_part5 .list dd{ transition: 0.8s; font-size: 14px; opacity: 0.6;} .in_part5 .list dd b{ font-weight: bold;} .in_part5 .list dd span{ padding: 0 10px;} .in_part5 .list .but{display: block; width: 46px; height: 46px; background: url(../image/ico_03.png) center no-repeat; margin: 0 auto; cursor: pointer; transition: 0.3s linear;} .in_part5 .list.one::before{ transform: scale(0.8); opacity: 0;} .in_part5 .list.one dt{ transform: scale(0.8); opacity: 0; transition-delay: 0.2s;} .in_part5 .list.one dd{ transform: scale(0.8); opacity: 0; transition-delay: 0.3s;} .in_part5 .img_box{ position: fixed !important; width: 100%; left: 0; height: 100%; overflow: hidden; top: 100%; transition: all 0s linear;} .in_part5 .img_box::before{content: ""; position: absolute; left: 0; top: 0; background: url(../image/xx_02.png) repeat-x; width: 100%; height: 100%; z-index: 1;} .in_part5 #part5_canvas{ position: absolute; width: 100vw; height: 100vh; left: 0; bottom: 0;} .in_part5 #part5_canvas canvas{ position: absolute; width: 100%; height: 100%;} .in_part5 .xx2{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; z-index: 1; opacity: 0; } /* .in_part6{background: #fff; position: relative; z-index: 2; padding: 300px 0 130px 0; overflow: hidden; } */ .in_part6{background: #fff; position: relative; z-index: 2; padding: 0; height: 0; overflow: hidden; } .in_part6 .txt{font-size: 52px; color: #000; padding-bottom: 60px; letter-spacing: 2px;} .in_part6 .swiper-container{overflow: initial; margin: 0 -20px;} .in_part6 li a{ display: inline-block; margin: 0 20px;} .in_part6 dt i{display: block; color: #25c4d1; font-weight: bold; padding-bottom: 15px;} .in_part6 dt b{display: block; transition: 0.5s; } .in_part6 dt b:hover{box-shadow: 0 50px 114px rgba(4, 105, 128, 0.6)} .in_part6 dd{display: block; color: #000; font-size: 22px; padding-top: 25px; transition: all 0.3s; } .in_part6 dd:hover{ color: #25c4d1;} .in_part6 .yun_box{display: none;} /* 公用云彩动画 */ .yun_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;} .yun_box .div{ position: absolute; left: 0; top: 0; background-repeat: repeat; background-position: 0 0; background-size: 2000px 1136px; height: 300%; width: 300%; margin-left: -200%;} .yun_box .div1{opacity: 0.3; background-image: url(../image/clouds_01.png); animation: cloudAnim 20s infinite linear; display: none;} .yun_box .div2{opacity: 0.2; background-image: url(../image/clouds_02.png); animation: cloudAnim 10s infinite linear;} .yun_box .div3{opacity: 0.6; background-image: url(../image/clouds_03.png); animation: cloudAnim 5s infinite linear; z-index: 9;} .yun_box::after, .yun_box::before {content: ""; left: 0; display: block; position: absolute; width: 100%; height: 150px; z-index: 1;} .yun_box::before{top: 0; background: linear-gradient(180deg,#fff 0,hsla(0,0%,100%,0));} .yun_box::after{bottom: 0; background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff);} .in_part4 .yun_box{top: auto; bottom: 1290px; height: 960px;} @keyframes cloudAnim{ 0%{-webkit-transform:translate(0);transform:translate(0)} to{-webkit-transform:translate(2000px,-1136px);transform:translate(2000px,-1136px)} } /* 底部云彩动画 */ @keyframes footerCloudAnim{ 0%{ transform:translateX(-50%)} to{ transform:translateX(0)} } @keyframes footeropacity{ 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } /* 首页-入场动画 */ .in_part3 .wrap .tet{transform: translateY(80px); opacity: 0; transition: 1s; } .in_part3 .wrap .tat{transform: translateY(80px); opacity: 0; transition: 1s; } .in_part3 .wrap.one .tet{ transform: translate(0); opacity: 1; } .in_part3 .wrap.one .tat{ transform: translate(0); opacity: 1; transition-delay: 0.3s; } .in_part4 .top_con .tet{transform: translateY(80px); opacity: 0; transition: 1s; } .in_part4 .top_con .tat{transform: translateY(80px); opacity: 0; transition: 1s; } .in_part4 .top_con.one .tet{ transform: translate(0); opacity: 1; } .in_part4 .top_con.one .tat{ transform: translate(0); opacity: 1; transition-delay: 0.3s; } .in_part6 .swiper-container{transform: translateX(200px); opacity: 0; transition: 0.8s; } .in_part6.one .swiper-container{ transform: translate(0); opacity: 1; } .pxx{position: relative; display: inline-block; overflow: hidden; transform: scaleX(0); transition: 0.4s cubic-bezier(.08,.12,.21,.99); overflow: hidden; transform-origin: left } .pxx::before{ content: ""; position: absolute; right: 0; top: 0; transform: scaleX(1); width: 100%; height: 100%; background: #4ae3ef; transition: 0.4s 0.5s cubic-bezier(.08,.12,.21,.99); transform-origin: right } .pxx2{transform-origin: right; transition-duration: 0.4s; transition-delay: 0.2s} .pxx2::before{transform-origin: left; transition-duration: 0.4s; transition-delay: 0.6s; background: #1fc3d1} .pxx3{transform-origin: left; transition-duration: 0.4s; transition-delay: 0.4s} .pxx3::before{transform-origin: right;transition-duration: 0.4s; transition-delay: 0.7s; background: #04b1bf} .pxx.one{ transform: scaleX(1);} .pxx.one::before {transform: scaleX(0);} /* 留言表单页 */ .message_bg{ padding: 130px 0; background: url(../image/back_02.jpg) no-repeat center; background-size:cover;} .message_con{ margin: 0 auto; box-sizing: border-box; width: 620px; padding: 110px 100px 130px 100px; background: #fff; text-align: center; font-weight: lighter; position: relative;} .message_con .h2{ font-size: 32px; color: #000; font-weight: lighter; padding-bottom: 60px;} .message_con .h3{ font-size: 16px; color: #666666; padding-bottom: 20px;} .message_con .form .inba{ height: 30px;} .message_con .form .text{ border:1px solid #bebebe;color: #333; height: 46px; line-height: 46px; padding: 0 20px 0 45px; font-size: 16px;} .message_con .form .text::-webkit-input-placeholder{color: #666;} .message_con .form .text::-moz-placeholder{color: #666;} .message_con .form .text:-ms-input-placeholder{color: #666;} .message_con .form .text_name{ background: url(../image/btn_ly1.png) no-repeat 12px center;} .message_con .form .text_cp{ background: url(../image/btn_ly3.png) no-repeat 12px center;} .message_con .form .text_phone{ background: url(../image/btn_ly2.png) no-repeat 12px center;} .message_con .txt2{ color: #ffae00; font-weight: bold; background: url(../image/btn_dun2.png) no-repeat left center; padding-left: 20px; text-align: left; margin-top: 15px; } .message_con .btn_list{ padding-top: 30px;} .message_con a.btn{ font-size: 18px; height: 48px; line-height: 48px; position: relative; transition: all 0.4s;border: 2px solid #24c4d0; box-sizing: border-box; color: #fff; text-align: center; background: #24c4d0; border-radius: 0px; display: block; cursor: pointer;} .message_con a.btn span{ position: relative; z-index: 1;} .message_con a.btn::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.4s;} .message_con a.btn:hover::before{transform: scaleX(1); transform-origin: 0 50%;} .message_con a.btn:hover{ color: #25c4d1} .message_con .formFail{border-color: #f00 !important;} .message_con .formErrorContent{ text-align: left; font-size: 12px; color: #f00; font-weight: bold; padding: 4px 0 0 0;} .message_con .con_2{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 30% 0 0 0; background: #fff; z-index: 1; box-sizing: border-box; display: none; } .message_con .con_2 .h2_tit{ font-size: 40px; font-weight: bold; color: #ffce66; display: inline-block; margin: 0 auto; padding: 80px 0 14px 0; border-bottom: 1px solid #ffce66; background: url(../image/btn_chenggong.png) no-repeat center top;} .message_con .con_2 .h3_txt{ font-size:22px; color: #666; line-height: 2; font-weight: lighter; padding-top: 23px; } /* 案例-详情页 */ .case_details_banner{ width: 100%; height: 100vh; position: relative; z-index: 0;letter-spacing: 1px; padding-top: 16%; box-sizing: border-box;} .case_details_banner .banner{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: no-repeat center #000; background-size:cover ; overflow: hidden;} .case_details_banner .banner .video{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit:cover; z-index: 10;} .case_details_banner .banner::after{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.7); z-index: 15;} .case_details_banner .banner::before{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background:url(../image/al_bg3.png) no-repeat center; background-size: cover; z-index: 20;} .case_details_banner .banner2::before{ background-image: url(../image/al_bg7.png);} .case_details_banner .banner2 .canvas_particle{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; } .case_details_banner .txt{ position: relative; z-index: 30; line-height: 1.4; color: #fff; } .case_details_banner .txt h1{ font-size: 70px;font-weight: 400; padding-bottom: 6%;letter-spacing: 5px;} .case_details_banner .txt .h3{ font-size: 21px;font-weight: lighter; padding-bottom: 2%;} .case_details_banner .url a{ width: 188px; height: 50px; line-height: 50px; border:1px solid #fff; font-size: 16px; display: block; text-align: center; color: #fff; position: relative;transition: 0.3s;} .case_details_banner .url a::before{ content: ""; position: absolute; width: 0; height: 100%; left: 0; top: 0; z-index: -1; background: #25c4d1;transition: 0.3s;} .case_details_banner .url a span{ background: url(../image/ico_05.png) no-repeat left center;padding: 0 15px;transition: 0.3s;} .case_details_banner .url a:hover{ color: #fff; border-color: #25c4d1;} .case_details_banner .url a:hover span{ padding: 0; opacity: 0;} .case_details_banner .url a:hover::before{ width: 100%;} .case_details_next{ width: 100%; height: 475px; position: relative; overflow: hidden;} .case_details_next a{display: block; line-height: 475px;} .case_details_next .bg{ position: absolute; width: 100%; height: 100%; background:url(../image/al_bg7.png) no-repeat center rgba(0,43,54,1); background-size: cover;transition: 6s;} .case_details_next .btn{ position: relative; z-index: 1; font-size: 60px; color: #fff; text-align: center;} .case_details_next .btn img{ margin-left: 40px; width: 27px; transition: all 0.6s;} .case_details_next a:hover .bg{ transform: scale(1.1);} .case_details_next a:hover .btn img{width: 0; margin-left: 0;} .case_details_next2{ padding: 120px 0;} .case_details_next2 .h3{ font-size: 40px; color: #000; font-weight: bold; padding: 0 0 30px 30px;} .case_details_next2 a{ display: block; height: 600px; position: relative; padding: 14% 55% 0 12%; box-sizing: border-box; overflow: hidden;} .case_details_next2 a div{ position: relative; z-index:2 ;} .case_details_next2 a .bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: no-repeat center; background-size: cover; transition: 4s;} .case_details_next2 a .bg::before{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url(../image/al_next.png) no-repeat center; background-size: cover;} .case_details_next2 a .tit{ font-size: 36px; color: #fff; padding-bottom: 28px;} .case_details_next2 a .tit::before{ content: ""; position: absolute; width: 100%; height: 1px; left: 0; bottom: 0; background-image: linear-gradient(to right, #fff 0%, #fff 50%, transparent 100%); opacity: 0.2;} .case_details_next2 a .txt{ font-size: 16px; color: #fff; line-height: 1.8; font-weight: lighter; padding: 20px 0 20px 0;} .case_details_next2 a .btn{ width: 52px; height: 52px; background: url(../image/btn_next.png) no-repeat center; background-size: contain; margin-top: 30px; transition: 0.6s;} .case_details_next2 a:hover .bg{ transform: scale(1.1);} .case_details_next2 a:hover .btn{ transform: translateX(10px);} .case_details_frist{ width: 100%; background: #fff;} .case_details_box{ padding: 120px 0; box-sizing: border-box; position: relative; overflow: hidden;} .case_details_box .bg{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: no-repeat center top; z-index: 0;} .case_details_box .wrap{ position: relative; z-index: 10;} .case_details_box .h2_con h2{ font-size: 52px; color: #000; line-height: 1.4; padding-bottom: 32px; position: relative; font-weight: bold;} .case_details_box .h2_con h2::after{ content: ""; position: absolute; width: 24px; height: 6px; background: #e60012; bottom: 6px; left: 0;} .case_details_box .h2_con h2 .h3{ font-size: 28px; font-weight: 400; padding-top: 16px;} .case_details_box .h2_con .txt{ font-size: 16px; font-weight: lighter; color: #666666; line-height: 1.75;} .case_details_box .h2_con .txt p{ padding: 15px 0;} .case_details_box .h2_con .txt b{ color: #333333; font-weight: bold; display: inline-block; margin-top: 10px;} .case_details_box .h2_con2 h2{ color: #fff;} .case_details_box .h2_con2 .txt{ color: #dddddd;} .case_details_box1{ width: 1440px; margin: 0 auto; background: #fff; position: relative; margin-top: -90px; padding: 100px 0 100px 0; overflow: visible;} .case_details_box1::before, .case_details_box1::after{ content: ""; width: 30px; height: 210px; position: absolute; top: 90px;} .case_details_box1::before{ left: -30px; background: url(../image/al_bg1.png) no-repeat right top;} .case_details_box1::after{ right:-30px; background: url(../image/al_bg2.png) no-repeat left top;} .case_details_box1 .con_l{ width: 60%; float: left;} .case_details_box1 .con_r{ width: 23%; padding-right: 9%; box-sizing: border-box; float: right;} .case_details_box1 .con_r .logo{ padding-bottom: 50px;} .case_details_box1 .con_r .logo img{ max-width: 100%;} .case_details_box1 .con_r .tit1{ padding-bottom: 20px; color: #000; line-height: 1.85; font-weight: bold; width:200%;} .case_details_box1 .con_r .tit2{ padding: 10px 0; color: #666666; border-top:1px solid #e0e0e0;line-height: 1.85;} .case_details_box1 .con_r .tit2 li{ padding: 10px 0;} .case_details_box1 .con_r .tit2 li a{ color: #666666;} .case_details_box1 .con_r .tit2 li a:hover{ color: #25c4d1;} .case_details_box1 .con_r .tit2 li strong{ color: #333333;} .case_details_box1 .web_page_list{ padding: 80px 0 40px; width: 900px; margin: 0 auto; text-align: center;} .case_details_box1 .web_page_list video, .case_details_box1 .web_page_list img{ margin: 50px 0; max-width: 100%; height: auto; border: 6px solid #000; border-radius: 15px;overflow: hidden; box-shadow: 0px 0px 62px rgba(34,34,34,0.36)} .case_details_box1 .web_page_list2{ padding: 120px 0; position: relative; width: 100%; text-align:initial;} .case_details_box1 .web_page_list2 img{ width: 700px; position: relative; z-index: 2;} .case_details_box1 .web_page_list2 img:nth-child(2){ position: absolute; right: 0; top: 60px; z-index: 1;} .case_details_box1 .web_page_list3{ margin: 0 -120px; width: auto; text-align:initial;} .case_details_box1 .web_page_video{ position: relative; overflow: hidden;} .case_details_box1 .web_page_list3 img{ width: 100%; border:none; box-shadow: none;} .case_details_box1 .web_page_list3 video{ position: absolute;width: 65.15%; right: 5.15%;top: 13.4%; margin: 0; border: none; border-radius: 0px; box-shadow: none;} .case_details_box1 .web_page_list3a video{width: 78.3%;right: 10.7%;top: 22.5%;} .case_details_box2{ width: 100%; height: 820px; background: url(../image/al_bg8.jpg) no-repeat center; background-size: cover;} .case_details_box2 .bg{ background-position: center -10%; background-size: 100% auto; } .case_details_box2 .bg::before{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url(../image/al_bg8a.png) no-repeat center; background-size: cover; z-index: 1;} .case_details_box3 .con_l{ width:50%; float: left;} .case_details_box3 .con_l img{ max-width: 100%;} .case_details_box3 .con_r{ width:50%; float: left; padding: 50px 0 0 65px; box-sizing: border-box;} .case_details_box3 .sc_list{ clear: both; width: 100%; padding-top: 80px;} .case_details_box3 .sc_list .li{ width: 20%; float: left; text-align: center;} .case_details_box3 .sc_list .li span{ display: block; width: 94px; height: 94px; border-radius: 16px; margin: 0 auto; background-size: cover !important; box-shadow: #007aff;} .case_details_box3 .sc_list .li b{ display: block; padding-top: 26px; color: #999999; font-size: 16px; text-transform: uppercase;} .case_details_box3 .sc_list4 .li{ width: 25%;} .case_details_box3 .sc_list3 .li{ width: 33%;} .case_details_box3 .sc_list2 .li{ width: 50%;} .case_details_box4{ height: 800px; padding: 0;} .case_details_box4 .bg{ background-size: cover;} .case_details_box4 .con_l{ width: 35%; float: left; padding-top: 80px;} .case_details_box4 .con_r{ width: 65%; float: right; text-align: right; } .case_details_box4 .con_r img{ max-width: 100%;} .case_details_box5{ padding: 210px 0; } .case_details_box5 .con_l{ width:52.5%; float: left; padding-left: 30px; box-sizing: border-box;} .case_details_box5 .con_l img{ max-width: 100%;box-shadow: 0px 0px 62px rgba(34,34,34,0.36);border: 6px solid #000; border-radius: 15px; box-sizing: border-box;} .case_details_box5 .con_r{ width:37%; float: right; padding: 30px 0 0 0; box-sizing: border-box;} .case_details_box6{ height: 900px; background: #ececec;} .case_details_box6 .bg{ background-size: cover;} .case_details_box6 .h2_con h2{ padding:0 0 0 52px;} .case_details_box6 .h2_con h2::after{ top: 50%; bottom: auto;} .case_details_box7{ padding-bottom: 0;} .case_details_box7 .h2_con h2{ text-align: center;} .case_details_box7 .h2_con h2::after{ left: 50%; margin-left: -12px;} .case_details_box7 .con_t{ padding-top: 30px;} .case_details_box7 .con_t img{ max-width: 100%;} .case_details_box7_video{ background: url(../image/al_bg9.jpg) no-repeat center top; background-size: 100% auto;} .case_details_box7_video .con_t{ padding:70px 120px;} .case_details_box7_video .video{border: 6px solid #000; border-radius: 15px; line-height: 0; overflow: hidden; box-sizing: border-box; background:no-repeat center #fff; background-size: cover; position: relative;} .case_details_box7_video .video .play{ position: absolute; width: 100%; height: 100%; background: url(../image/btn_play.png) center no-repeat rgba(0,0,0,0.7); cursor: pointer; z-index: 2; left: 0; top: 0; } .case_details_box7_video .video_bg{ width: 100%;padding-top: 25%; background: url(../image/al_bg9a.png) no-repeat center top; background-size: 100% auto; margin-top: -1px;} .case_details_box7_video .video video{ width: 100%;} .case_details_box8{ height: 800px;} .case_details_box8 .bg{ background-color: #333;} .case_details_box9{ padding: 160px 0 0 0; padding-bottom: 0 !important;} .case_details_box9 .h2_con h2{ padding:0 0 0 52px; line-height: 1.4;} .case_details_box9 .h2_con h2::after{ top:32px; bottom: auto;} .case_details_box9 .con_t img{ max-width: 100%;} /* 案例-详情页-h3c */ .case_h3c_banner{ padding-top: 17%;} .case_h3c_banner .banner::after{ background: rgba(0,0,0,0.1);} .case_h3c_banner .banner::before{ background:url(../image/al_h3c_bg1.png) no-repeat center;} .case_h3c_banner .txt{ margin-left: -70px;} .case_h3c_banner .txt .h3{ color: #e60012; font-size: 14px; font-weight: bold; border-bottom: 2px solid #e60012; display: inline-block; padding-bottom: 15px;} .case_h3c_banner .txt h1{ font-size: 56px;font-weight: 400; padding-top: 2%; line-height: 1.4;} .case_h3c_box{ box-sizing: border-box; position: relative; overflow: hidden;} .case_h3c_box .wrap{ position: relative; z-index: 10; padding: 0 30px; box-sizing: border-box;} .case_h3c_box .h2_con h2{ font-size: 40px; color: #000; line-height: 1.4; padding-bottom: 32px; position: relative; font-weight: bold;} .case_h3c_box .h2_con .txt{ font-size: 18px; font-weight: lighter; color: #000000; line-height: 1.8;} .case_h3c_box .h2_con .txt p{ padding: 15px 0;} .case_h3c_box .h2_con2 h2{ color: #fff;} .case_h3c_box .h2_con2 .txt{ color: #fff;} .case_h3c_box1{ padding: 110px 0;} .case_h3c_box1 .wrap{ padding: 0 60px; box-sizing: border-box;} .case_h3c_box1 .con_l{ width: 71%; float: right;} .case_h3c_box1 .con_r{ width: 29%; float: left;} .case_h3c_box1 .con_r .tit2{line-height: 1.85; font-size: 16px; margin-top: -10px;} .case_h3c_box1 .con_r .tit2 li{ padding: 22px 0; color: #666666;} .case_h3c_box1 .con_r .tit2 li strong{ color: #333333; font-size: 14px;} .case_h3c_box1 .con_r .tit2 li a{ color: #666666;} .case_h3c_box1 .con_r .tit2 li a:hover{ color: #25c4d1;} .case_h3c_box2{ padding: 150px 0 600px 0; position: relative; } .case_h3c_box2 .wrap{ position: relative; z-index: 5;} .case_h3c_box2 .bg1{ position: absolute; width: 100%; height: 1300px; top: 0; left: 0; z-index: 1;} .case_h3c_box2 .bg1 .yuan{ position: absolute; width:400%; height: 400vw; bottom:0; left: 50%; margin-left: -200%; background: #c91c1d; border-radius: 0 0 50% 50%; z-index: 1000; transform-origin: bottom; } .case_h3c_box2 .bg2{ position: absolute; width: 100%; height: 800px; bottom: 0; left: 0; z-index: 1;} .case_h3c_box2 .bg2 .yuan{ position: absolute; width:400%; height: 400vw; top:0; left: 50%; margin-left: -200%; background: #c91c1d; border-radius:50% 50% 0 0 ; z-index: 1000;transform-origin: top; } .case_h3c_box2 .con_t{ width: 60%;} .case_h3c_box2 .con_t .txt{ padding-left: 90px;} .case_h3c_box2 .con_b{ position: relative; padding-top: 120px;} .case_h3c_box2 .con_b .img img{ width: 100%; box-shadow: 0px 0px 135px rgba(34,34,34,0.6);} .case_h3c_box2 .con_b .img1{ width:770px; position: relative; left: 20px; z-index: 5;} .case_h3c_box2 .con_b .img2{ width:620px; position: absolute; top: 240px; right: -100px; z-index: 4;} .case_h3c_box3{ padding: 200px 0 800px 0; position: relative; overflow: hidden; } .case_h3c_box3 .wrap{ position: relative; z-index: 5;} .case_h3c_box3 .bg{ position: absolute; width: 100%; height: 50%; background: #f0f0f0; bottom: 0; left: 0; z-index: 1;} .case_h3c_box3 .con_t{ padding-bottom: 180px; } .case_h3c_box3 .con_t .txt{ margin: 0 -30px;} .case_h3c_box3 .con_t .txt p{ float: left; padding: 0 30px; width: 50%; box-sizing: border-box;} .case_h3c_box3 .con_b{ margin: 0 -210px; clear: both; position: relative; z-index: 5;} .case_h3c_box3 .con_b .img{ width: 25%; float: left; box-sizing: border-box; padding: 0 67px;} .case_h3c_box3 .con_b .img img{ width: 100%;box-shadow: 0px 0px 62px rgba(34,34,34,0.36)} .case_h3c_box3 .con_b .img1{ margin-top: 90px;} .case_h3c_box3 .con_b .img2{ margin-top: 220px;} .case_h3c_box3 .con_b .img3{ margin-top: 0;} .case_h3c_box3 .con_b .img4{ margin-top: 100px;} .case_h3c_box4{ background:url(../image/al_h3c_bg2.jpg) repeat-x bottom #464646; overflow:visible;overflow-x: hidden;} .case_h3c_box4 .wrap{ position: relative;} .case_h3c_box4 .con_1{ position: relative; z-index: 5; height: 900px;} .case_h3c_box4 .con_1 .img{ position: absolute;} .case_h3c_box4 .con_1 .img img{ width: 100%;} .case_h3c_box4 .con_1 .img1{ width: 1300px; left: -65%; top:-40%;} .case_h3c_box4 .con_1 .img2{ width: 900px; right: -63%; top: 0%;} .case_h3c_box4 .con_1 .img3{ width: 380px; left: 50%; top: 40%;} .case_h3c_box4 .con_2{ text-align: center; padding: 200px 0 300px 0;} .case_h3c_box4 .con_2 .txt{ color: #b0b0b0;} .case_h3c_box4 .con_3{ padding: 0 140px;} .case_h3c_box4 .con_3 .img{ width: 100%; position: relative;} .case_h3c_box4 .con_3 .img img{ width: 100%; position: relative; z-index: 10; box-shadow: 0px 0px 62px rgba(34,34,34,0.42);} .case_h3c_box4 .con_3 .img::after{ content: ""; position: absolute; width: 92%; height: 90%; bottom: -54px; left: 4%; background: #282830; z-index: 8;} .case_h3c_box4 .con_3 .img::before{ box-shadow: 0px 0px 62px rgba(34,34,34,0.42); content: ""; position: absolute; width: 84%; height: 80%; bottom: -100px; left: 8%; background: #1f1f27; box-shadow: 0px 0px 62px rgba(34,34,34,0.42); z-index: 6;} .case_h3c_box4 .con_4{ height: 1800px; position: relative; width: 100%; overflow: hidden;} .case_h3c_box4 .con_4 .h2_con{ padding: 260px 220px 0 0; box-sizing:border-box ; float: right; width: 50%;} .case_h3c_box4 .con_4 .txt{ color: #b0b0b0;} .case_h3c_box4 .con_4 .img{ position: absolute; bottom: -26%; left: -5%;} .case_h3c_box5{ padding: 260px 0 0 0; overflow: hidden;} .case_h3c_box5 .con_t{ padding-bottom: 160px;} .case_h3c_box5 .con_t .txt{ margin: 0 -30px;} .case_h3c_box5 .con_t .txt p{ float: left; padding: 0 30px; width: 50%; box-sizing: border-box;} .case_h3c_box5 .con_b .img{ width: 79%; float: right;} .case_h3c_box5 .con_b .img img{ width: 100%;} /* 案例-列表 */ .case_list_banner{ width: 100%; position: relative; z-index: 0;letter-spacing: 1px; padding-top: 16%; box-sizing: border-box;} .case_list_banner .banner{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: no-repeat center #000; background-size:cover ; overflow: hidden;} .case_list_banner .banner .video{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit:cover; z-index: 10;} .case_list_banner .banner span{ position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.6);z-index: 15;} .case_list_banner .banner::after{ content: ""; position: absolute; width: 100%; height: 200px; left: 0; top: 0;background-image: linear-gradient(to top, transparent 0%, #000 100%); z-index: 15;} .case_list_banner .banner::before{ content: ""; position: absolute; width: 100%; height: 400px; left: 0;bottom: 0;background-image: linear-gradient(to bottom, transparent 0%, #000 100%); z-index: 15;} .case_list_banner .txt{ position: relative; z-index: 30; line-height: 1.66; color: #fff; } .case_list_banner .txt h1{font-size: 60px; text-align: center; font-weight: lighter;letter-spacing: 5px;} .case_list_banner .bottom{ width: 74px; height:74px; border:1px solid rgba(255,255,255,0.3); position: absolute; left: 50%; bottom: 50px; border-radius: 50%; background: url(../image/btn_bottom.png) no-repeat center; margin-left: -37px; z-index: 20; cursor: pointer; animation: case_list_banner_bottom 2s ease-out infinite;} @keyframes case_list_banner_bottom{ 0%{transform: translateY(0) ; opacity: 1; } 60%{transform: translateY(15px) ; opacity: 0.5;} 100%{transform: translateY(0px); opacity:1;} } .case_list{ background: #000;} .case_list .li{ width: 100%; height: 400px; border-bottom: 1px solid #000; position: relative;} .case_list .li a{ display: block; height: 100%; width: 100%; left: 0; top:0 ; position: absolute;} .case_list .li .bg{position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; background: no-repeat center; background-size: cover; background-color: #000;} .case_list .li .bg::after{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0;background: url(../image/al_list_bg1.png) no-repeat center; background-size: cover; z-index: 15; transition: 0.6s;} .case_list .li .bg::before{ content: ""; position: absolute; width: 100%; height: 100%; left: 0;bottom: 0;background:rgba(0,0,0,0.7); z-index: 15; transition: 0.6s; z-index: 10;} .case_list .li .bg .video{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index:0; object-fit: cover; opacity: 0; transition: 0.6s;} .case_list .li .logo_bai{position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 20; transition: 0.6s;} .case_list .li .logo_bai img{ max-width: 300px; max-height: 200px; position: absolute;top: 0;left: 0;right: 0;bottom:0;margin: auto;} .case_list .li .wrap{ position: relative; z-index: 50; height: 100%;} .case_list .li .con_l{ float: left; position: relative; top: 50%; margin-top: -80px; width: 40%; opacity: 0; transform: translateX(-20px); transition: 0.6s;} .case_list .li .con_l .img{ padding:0 0 20px 0; position: relative; line-height: 0;} .case_list .li .con_l .img img{ max-height: 80px; min-height: 60px;} .case_list .li .con_l .img::after{ content: ""; position: absolute; width: 100%; height: 1px; left: 0; bottom: 0;background-image: linear-gradient(to left, transparent 0%, #fff 50%, #fff 100%); z-index: 15; opacity: 0.2;} .case_list .li .con_l .txt{ width: 80%; font-size: 16px; line-height: 1.875; font-weight: lighter; color: #fff; padding: 18px 0 0 0;} .case_list .li .con_r{ position: absolute; right:0; top: 0; background: url(../image/btn_next.png) no-repeat center right; width: 50%; height: 100%; opacity: 0; transform: translateX(30px); transition: 0.6s;} .case_list .li a:hover .bg::after{ opacity: 0;} .case_list .li a:hover .bg::before{ opacity: 0.3;} .case_list .li a:hover .logo_bai{ opacity: 0; transform: scale(0.8);} .case_list .li a:hover .con_l, .case_list .li a:hover .con_r{ transform: translateX(0); opacity: 1;transition: 0.6s 0.3s;} .case_list .li a:hover .bg .video{ opacity: 1;} .case_list .li.url{ z-index:300;} .case_list .li.url a .con_l{ opacity: 0;transform: translateX(-20px);transition: 0.6s;} .case_list .li.url a .con_r{ opacity: 0;transform: translateX(20px);transition: 0.6s;} #list_video_box{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1000; display: none; pointer-events: none;} #list_video_box .bg::before{ content: ""; position: absolute; width: 100%; height: 100%; left: 0;bottom: 0;background:rgba(0,0,0,0.3); z-index: 15; transition: 0.6s; z-index: 10;} #list_video_box .bg .video{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index:0; object-fit: cover; transition: 0.6s;} .case_load{ width: 100%; padding: 40px 0; font-size: 24px; color: #fff; text-align: center;} /* 关于我们-公用 */ .lm_about{ width: 100%; overflow: hidden;} /*************add-index*********/ .index_news_list{ position: relative; z-index: 10; padding: 105px 160px 135px 160px; background: #F0F1F2;} .index_news_list .h1{ font-size: 56px; line-height: 1.1; color: #000;} .index_news_list .v_list{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: -5px;} .index_news_list .v_list .vli .t{ font-size: 14px; color: #666; line-height: 1;} .index_news_list .v_list .vli .h{ font-size: 16px; line-height: 28px; color: #000; margin-top: 15px; height: 56px; transition: all 0.5s;} .index_news_list .v_list .vli:hover .h{ color: #25c4d1;} .index_news_list .v_list .vli .p{ font-size: 14px; line-height: 1; color: #666; margin-top: 20px;} .index_news_list .v_list .vli{ width: 21%; margin-right: 5.3%; margin-top: 60px;} .index_news_list .v_list .vli:nth-child(4n){ margin-right: 0;} body .footer .footy_opem{ width: 1200px; border-top: 1px solid hsla(0,0%,100%,0.20); margin: 30px auto 0 auto; padding: 25px 0 50px 0; display: flex; justify-content: flex-start; flex-wrap: wrap;} .footy_opem .h1, .footy_opem p{ font-size: 12px; /*font-weight: bold;*/ color: #fff; line-height: 26px; /*margin-left: 4px; width: 80px;*/} /*.footy_opem .ope{ width: calc(100% - 84px); display: flex; justify-content: flex-start; flex-wrap: wrap;}*/ .footy_opem a{ font-size: 12px; line-height: 26px; margin-right: 30px; position: relative; color: hsla(0,0%,100%,0.80); margin-bottom: 5px; transition: all 0.5s;} .footy_opem a::after{ font-size: 14px; color: #fff; text-align: center; width: 30px; position: absolute; top: 0; right: -30px; content: '|'; opacity: 0.8;} .footy_opem a:last-child::after{ display: none;} .footy_opem a:hover{ color: #fff;} body .footer{ height: auto; min-height: 630px;} .news_max_list{ padding: 60px; background: #F0F1F2;} .news_max_list .scont{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 55px; border-bottom: 1px solid hsla(0,0%,47%,0.15);} .news_max_list .scont .li{ margin-bottom: 75px; width: 23%; margin-right: 2.6%;} .news_max_list .scont .li:nth-child(4n){ margin-right: 0;} .news_max_list .scont .li .m{ overflow: hidden;} .news_max_list .scont .li .m img{ display: block; width: 100%; transition: all 0.5s;} .news_max_list .scont .li:hover .m img{ transform: scale(1.05);} .news_max_list .scont .li .ter{ padding: 20px 8px 0 5px;} .news_max_list .scont .li .ter .h{ font-size: 17px; line-height: 30px; height: 60px; color: #000; transition: all 0.5s;} .news_max_list .scont .li:hover .ter .h{ color: #0FB4BD;} .news_max_list .scont .li .bot{ display: flex; justify-content: space-between; line-height: 20px; margin-top: 50px;} .news_max_list .scont .li .bot .t, .news_max_list .scont .li .bot .p{ font-size: 14px; color: #666;} .news_max_list .scont .li .bot .t{ padding-right: 21px; background: url(../image/3.png) no-repeat right center; background-size: 14px auto;} /* .news_max_list .page{ display: flex; justify-content: center; flex-wrap: wrap;} .news_max_list .page a{ font-size: 15px; color: hsla(0,0%,15%,0.80); border-radius: 3px; border: none; background: #fff; box-shadow: 0 0 10px hsla(0,0%,0%,0.05); margin: 0 3px;} .news_max_list .page a:hover, .news_max_list .page a.cur{ border: none; background: #0FB4BD; color: #fff;} */ .news_max_data{ padding: 60px 160px 80px 160px; display: flex; justify-content: space-between; background: #F0F1F2; margin-top: -320px; position: relative; z-index: 10;} .news_max_data .right_l{ width: 360px; } .news_max_data .left_l{ width: calc(100% - 420px);} .news_max_data .right_l .h1{ font-size: 26px; line-height: 30px; font-weight: bold; color: #131313;} .news_max_data .right_l .s_lisr{ margin-top: 25px;} .news_max_data .right_l .s_lisr .li{ margin-top: 35px;} .news_max_data .right_l .s_lisr .li:first-child{ margin-top: 0;} .news_max_data .right_l .s_lisr .li .m{ width: 100%; overflow: hidden;} .news_max_data .right_l .s_lisr .li .m img{ display: block; width: 100%; transition: all 0.5s;} .news_max_data .right_l .s_lisr .li:hover .m img{ transform: scale(1.05);} .news_max_data .right_l .s_lisr .li .p{ padding: 15px 9px 0 9px; font-size: 17px; line-height: 30px; color: #000; transition: all 0.5s;} .news_max_data .right_l .s_lisr .li:hover .p{ color: #0FB4BD;} .news_max_data .left_l .h1{ font-size: 32px; line-height: 1.3; color: #131313;} .news_max_data .left_l .icon{ display: flex; margin-top: 35px;} .news_max_data .left_l .icon .li{ margin-left: 30px; display: flex;} .news_max_data .left_l .icon .li:first-child{ margin-left: 0;} .news_max_data .left_l .icon .li .p{ font-size: 15px; line-height: 30px; color: hsla(0,0%,7%,0.70); padding-left: 26px;} .news_max_data .left_l .icon .li1 .p{ background: url(../image/4.png) no-repeat left center; background-size: 20px auto;} .news_max_data .left_l .icon .li2 .p{ background: url(../image/5.png) no-repeat left center; background-size: 20px auto;} .news_max_data .left_l .icon .li3 .p{ background: url(../image/6.png) no-repeat left center; background-size: 20px auto;} .news_max_data .left_l .icon .li4 .p{ background: url(../image/7.png) no-repeat left center; background-size: 20px auto;} .news_max_data .left_l .data{ padding: 30px 0 60px 0; margin-top: 25px; border-top: 1px solid #DEDEDE; font-size: 15px; color: hsla(0,0%,7%,0.90); line-height: 2.1;} .news_max_data .left_l .data img{ display: block; margin: auto; max-width: 100%;} .news_max_data .left_l .more{ display: flex; justify-content: space-between; padding: 30px 2px; border-top: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE;} .news_max_data .left_l .more a{ width: 45%; display: flex; white-space: nowrap;} .news_max_data .left_l .more a, .news_max_data .left_l .more a i{ color: hsla(0,0%,7%,0.60); font-size: 15px; line-height: 20px; transition: all 0.5s;} .news_max_data .left_l .more a:hover i{ color: #0FB4BD;} .news_max_data .left_l .tuibox{ margin-top: 50px;} .news_max_data .left_l .tuibox .h{ font-size: 32px; line-height: 1.1; color: #131313; margin-bottom: 30px;} .news_max_data .left_l .tuibox .kpi{ display: flex; justify-content: space-between; flex-wrap: wrap;} .news_max_data .left_l .tuibox .kpi .li{ width: 45%;} .news_max_data .left_l .tuibox .kpi .li a{ font-size: 16px; color: #131313; line-height: 42px; display: block; padding-left: 20px; position: relative; transition: all 0.5s;} .news_max_data .left_l .tuibox .kpi .li a::after{ content: '◆'; font-size: 16px; color: #131313; opacity: 0.5; position: absolute; top: 0; left: 0;} .news_max_data .left_l .tuibox .kpi .li:hover a{ color: #0FB4BD;} .news_max_data .left_l .more a, .news_max_data .left_l .more a i, .news_max_data .left_l .tuibox .kpi .li a{ overflow: hidden; white-space: nowrap; text-overflow : ellipsis;} .index_news_list .tp{ display: flex; justify-content: space-between; align-items: flex-end;} .index_news_list .tp a{display: inline-block; width: 180px; position: relative; height: 52px; line-height: 49px; font-size: 16px; color: #fff; background: #25c4d1; border: 2px solid #25c4d1; letter-spacing: 2px; text-align: center;} .index_news_list .tp i{position: relative; z-index: 1;} .index_news_list .tp a::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.4s;} .index_news_list .tp a:hover::before{transform: scaleX(1); transform-origin: 0 50%;} .index_news_list .tp a:hover{ color: #25c4d1} .index_news_list .v_list .vli .h{ overflow: hidden; white-space: nowrap; text-overflow : ellipsis; height: auto;} .index_news_list .v_list .vli .s{ font-size: 14px; line-height: 28px; color: #000; opacity: 0.8; margin-top: 8px; height: 56px;} .index_news_list .v_list .vli .s{ word-bread: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} /*************************************************************/ @media screen and (min-width: 470px){ /* 案例-详情页-动画 */ .case_details_banner .banner::before{ opacity: 0; transition: 1s;} .case_details_banner.on .banner::before{ opacity: 1;} .case_details_banner .banner::after { opacity: 0.3;} .case_details_banner.on .banner::after { opacity: 0.5; transition: 1s;} .case_details_banner .txt h1{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_details_banner .txt .h3{ transform: translateX(40px);opacity: 0; transition: 1s 0.2s;} .case_details_banner .url{ transform: translateX(40px);opacity: 0; transition: 1s 0.4s;} .case_details_banner.on .txt h1, .case_details_banner.on .txt .h3, .case_details_banner.on .txt .url{ transform: translate(0);opacity: 1;} .case_details_box1{ transform: translateY(90px); opacity: 0; transition: 1s;} .case_details_box1.on{ transform: translate(0); opacity: 1;} .case_details_box2 .bg{ transform:scale(1.1); transition:transform 1s;} .case_details_box2 .con_l{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_details_box2.on .bg{ transform: scale(1); } .case_details_box2.on .con_l{ transform: translate(0); opacity: 1;} .case_details_box3 .con_l{ transform: translateX(-40px); opacity: 0; transition: 1s;} .case_details_box3 .con_r{ transform: translateX(0); opacity: 0; transition:opacity 1s;} .case_details_box3 .sc_list{ transform: translateY(40px); opacity: 0; transition: 1s;} .case_details_box3.on .con_l{ transform: translate(0); opacity: 1;} .case_details_box3.on .con_r{ transform: translate(0); opacity: 1;} .case_details_box3.on .sc_list{ transform: translate(0); opacity: 1;} .case_details_box4 .bg{ transform:scale(1.1); transition: 2s;} .case_details_box4 .con_l{ transform: translateX(0); opacity: 0; transition:opacity 1s;} .case_details_box4 .con_r{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_details_box4.on .bg{ transform: scale(1); } .case_details_box4.on .con_l{ transform: translate(0); opacity: 1;} .case_details_box4.on .con_r{ transform: translate(0); opacity: 1;} .case_details_box5 .con_l{ transform: translateX(-40px); opacity: 0; transition: 1s;} .case_details_box5 .con_r{ transform: translateX(0); opacity: 0; transition: opacity 1s;} .case_details_box5.on .con_l{ transform: translate(0); opacity: 1;} .case_details_box5.on .con_r{ transform: translate(0); opacity: 1;} .case_details_box6 .bg{ transform:scale(1.1); transition: 2s;} .case_details_box6 .con_l{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_details_box6.on .bg{ transform: scale(1); } .case_details_box6.on .con_l{ transform: translate(0); opacity: 1;} .case_details_box7{ padding-bottom: 0;} .case_details_box7 .con_l{ transform: translateY(-40px); opacity: 0; transition: 1s;} .case_details_box7 .con_t{ transform: translateY(40px); opacity: 0; transition: 1s;} .case_details_box7.on .con_l{ transform: translate(0); opacity: 1;} .case_details_box7.on .con_t{ transform: translate(0); opacity: 1;} .case_details_box8 .bg{ transform:scale(1.1); transition: 2s;} .case_details_box8.on .bg{ transform: scale(1); } .case_details_box9 .bg{ transform:scale(1.1); transition: 2s;} .case_details_box9 .con_l{ transform: translateY(-40px); opacity: 0; transition: 1s;} .case_details_box9 .con_t{ transform: translateY(40px); opacity: 0; transition: 1s;} .case_details_box9.on .bg{ transform: scale(1); } .case_details_box9.on .con_l{ transform: translate(0); opacity: 1;} .case_details_box9.on .con_t{ transform: translate(0); opacity: 1;} /* 案例-详情页-h3c-动画 */ .case_h3c_bo .bg{ transform:scale(1.1); transition: 2s;} .case_h3c_bo .con_l{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_h3c_bo.on .bg{ transform: scale(1); } .case_h3c_bo.on .con_l{ transform: translate(0); opacity: 1;} .case_h3c_box1 .con_r{ transform: translateX(-40px); opacity: 0; transition: 1s;} .case_h3c_box1 .con_l{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_h3c_box1.on .con_r, .case_h3c_box1.on .con_l{ transform: translate(0); opacity: 1;} .case_h3c_box2 h2{ transform: translateX(-40px); opacity: 0; transition: 1s;} .case_h3c_box2 .txt{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_h3c_box2.on h2, .case_h3c_box2.on .txt{ transform: translate(0); opacity: 1;} .case_h3c_box2 .con_b{opacity: 0; transition: 1s;} .case_h3c_box2 .con_b.on{opacity: 1;} .case_h3c_box3 h2{ transform: translateX(-40px); opacity: 0; transition: 1s;} .case_h3c_box3 .txt{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_h3c_box3.on h2, .case_h3c_box3.on .txt{ transform: translate(0); opacity: 1;} .case_h3c_box3 .con_b{opacity: 0; transition:opacity 1s;} .case_h3c_box3 .con_b.on{opacity: 1;} .case_h3c_box4 .con_1{opacity: 0; transition:opacity 1s;} .case_h3c_box4 .con_1.on{opacity: 1;} .case_h3c_box4 .con_2 h2{ transform: translateX(-40px); opacity: 0; transition: 1s;} .case_h3c_box4 .con_2 .txt{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_h3c_box4 .con_2.on h2, .case_h3c_box4 .con_2.on .txt{ transform: translate(0); opacity: 1;} .case_h3c_box4 .con_3 img{ transform: scale(0.8); opacity: 0; transition: 0.6s;} .case_h3c_box4 .con_3 .img::after{ transform: scale(0.8) translateY(-50px); opacity: 0; transition: 0.6s 0.1s;} .case_h3c_box4 .con_3 .img::before{ transform: scale(0.8) translateY(-100px); opacity: 0; transition: 0.6s 0.2s;} .case_h3c_box4 .con_3.on img{transform: scale(1);opacity: 1;} .case_h3c_box4 .con_3.on .img::before{transform: scale(1) translateY(0);opacity: 1;} .case_h3c_box4 .con_3.on .img::after{transform: scale(1) translateY(0);opacity: 1;} .case_h3c_box4 .con_4 h2{ transform: translateX(-40px); opacity: 0; transition: 1s;} .case_h3c_box4 .con_4 .txt{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_h3c_box4 .con_4.on h2, .case_h3c_box4 .con_4.on .txt{ transform: translate(0); opacity: 1;} .case_h3c_box4 .con_4 .img{ transform: translate(-100px,100px) scale(0.9); opacity: 0;transition: 1s 0.6s;} .case_h3c_box4 .con_4.on .img{ transform: translate(0) scale(1); opacity: 1;} .case_h3c_box5 .con_t h2{ transform: translateX(-40px); opacity: 0; transition: 1s;} .case_h3c_box5 .con_t .txt{ transform: translateX(40px); opacity: 0; transition: 1s;} .case_h3c_box5 .con_t.on h2, .case_h3c_box5 .con_t.on .txt{ transform: translate(0); opacity: 1;} .case_h3c_box5 .con_b{transform: translateX(40px); opacity: 0; transition:1s;} .case_h3c_box5 .con_b.on{transform: translateX(0);opacity: 1;} /* 案例-列表页-动画 */ .case_list_banner .txt{ transform: scale(0.8); opacity: 0; transition: 1s;} .case_list_banner.on .txt{ transform: scale(1);opacity: 1;} } /* 小PC */ @media screen and (max-width:1600px){ /* 案例-详情页 */ .case_details_box1{ width: 1340px;} .case_details_box1{ padding-top: 80px;} } @media screen and (max-width:1500px){ /* 公用部分 */ .wrap{width: 1200px;} .footer{height: 580px;} .footer .wrap{padding-top: 300px;} .left_scroll{ left: 40px; bottom: 20px;} .left_scroll2{ left: 30px; bottom: 30px; width: 80px; height: 80px;} /* 首页 */ .in_part1 .txt{font-size: 60px; line-height: 80px; margin-top: -70px; left: 0;} .in_part2{padding: 250px 0} .in_part3{padding: 250px 0} .in_part3 .txt{font-size: 70px; } .in_part4 .box{padding: 140px 0;} .in_part4 .top_con{right:0;} .in_part4 .top_con .txt{font-size: 45px; line-height: 60px;} .in_part5 .img ul{ width: 120%; left: -20%;} .in_part6{padding-top: 0;} .in_part6 li dl{width: 550px;} .in_part6 li img{width: 100%;} .in_part6 dd{padding-top: 20px;} /* 案例-详情页 */ .case_details_box1 .web_page_list3{ margin: 0 -60px;} /* 案例-详情页-h3c */ .case_h3c_banner .txt{ margin-left: -30px;} .case_h3c_box3 .con_t{ padding-bottom: 80px;} .case_h3c_box4 .con_4{ height: 1600px;} .case_h3c_box4 .con_4 .img img{ width:1300px ;} /* 案例-列表页 */ .case_list_banner{ padding-top: 20%;} .case_list_banner .txt h1{ font-size: 50px;} } @media screen and (max-width:1400px){ /* 公用部分 */ .wrap{ width: 1100px;} /* 首页 */ .in_part5 .list dt{ font-size: 30px;} /* 案例-详情页 */ .case_details_banner .txt h1{ font-size: 54px;} .case_details_next{ height: 400px;} .case_details_next a{ line-height: 400px; } .case_details_next .btn{ font-size: 40px;} .case_details_box{ padding: 100px 0;} .case_details_box .h2_con h2{ font-size: 40px;} .case_details_box1{ width: 1200px; padding-top: 60px;} .case_details_box1 .web_page_list video, .case_details_box1 .web_page_list img{ margin: 30px 0;} .case_details_box2{ height: 700px;} .case_details_box4 .con_l{ padding-top: 30px;} .case_details_box5 .con_r{ padding-top: 30px;} .case_details_box6{ height: 760px;} .case_details_box7{ padding-bottom: 0;} .case_details_box1 .web_page_list3 video{ top: 12%;} .case_details_box1 .web_page_list3a video{top: 18.5%;} /* 案例-详情页-h3c */ .case_h3c_box2 .con_t{ width: 80%;} .case_h3c_box2 .con_b .img1{ width: 600px;} .case_h3c_box2 .con_b .img1 img{ width: 100%;} .case_h3c_box2 .con_b .img2{ width: 500px; right: -60px;} .case_h3c_box2 .con_b .img3 img{ width: 100%;} .case_h3c_box4 .con_1{ height: 700px;} .case_h3c_box4 .con_1 .img1{ width: 1000px; left: -50%; top: -50%;} .case_h3c_box4 .con_1 .img2{ width: 600px; right: -35%;} .case_h3c_box4 .con_1 .img3{ width: 240px;} .case_h3c_box4 .con_2{ padding: 200px 0;} .case_h3c_box5{ padding: 200px 0 0 0;} /* 案例-列表页 */ .case_list .li{ height: 300px;} .case_list .li .con_l{ width: 50%;} } @media screen and (max-width:1400px){ .case_details_box1::before, .case_details_box1::after{ display: none; } } /* ipad横 */ @media screen and (max-width:1200px){ /* 公用部分 */ .wrap{width: auto; margin: 0 50px;} .header .part1{padding-left: 30px ;} .head::before { background-size: auto 100%; } .footer{height: auto;} .footer .wrap{padding: 180px 0 100px 0;} /* 首页 */ /* .in_part1 .back{ display: none;} */ .in_part1 video{ display: none; visibility: hidden;} .in_part1 .txt{left: 30px; font-size: 50px; line-height: 65px; margin-top: -50px ;} .in_part2{padding: 150px 0;} .in_part2::before{height: 5px;} .in_part2 .txt{padding-bottom: 90px;} .in_part2 .txt span{font-size: 40px; line-height: 40px; padding-bottom: 10px; letter-spacing: 2px;} .in_part2 .list ul{margin-top: -80px;} .in_part2 .list li{padding: 80px 0 0 0;} .in_part3{padding: 150px 0;} .in_part3 .txt{font-size: 55px; padding-bottom: 30px;} .in_part3 .tet{font-size: 18px; letter-spacing: 2px;} .in_part3 .tat a{width: 160px; height: 45px; line-height: 44px;} .in_part4 .box{ margin: 0;} .in_part4 .top_con .txt{ font-size: 36px; line-height: 1.6; padding-bottom: 20px;} .in_part4 .list .li_hover.ul_one_hove:hover{transform: scale(1)} .in_part4 .list .con{ left: 15px; bottom: 15px;} .in_part4 .list .logo{ left: 15px; top: 15px;} .in_part4 .list .logo img{ max-width: 150px; max-height: 30px;} .in_part4 .list .li_box .img_vid video{ display: none;} .in_part4 .list .li_box .img_vid img{ display: block;} .in_part4 .list .con .txt{ font-size: 18px;} .in_part4 .list .con .tet{ font-size: 14px; line-height: 1.4;} .in_part5 .list ul{ width: 100%;} .in_part5 .list dt{letter-spacing: 2px;} .in_part5 .img ul{ top: 0%; width: 200%; left: -50%;} .in_part6{padding-top: 0;} .in_part6 .txt{font-size: 50px; line-height: 65px; padding-bottom: 30px;} .in_part6 li dl{width: 420px;} .in_part6 dd{font-size: 20px;} /* 案例-详情页 */ .case_details_next{ height: 300px;} .case_details_next a{ line-height: 300px; } .case_details_next2{ padding: 80px 0;} .case_details_next2 .h3{ font-size: 30px;} .case_details_next2 a{ height: 500px;padding: 10% 50% 0 10%;} .case_details_next2 a .tit{ font-size: 26px;} .case_details_next2 a .btn{ width: 40px; height: 40px;} .case_details_box{ padding: 80px 0;} .case_details_box1{ width: 100%;} .case_details_box1 .web_page_list{ width: 700px;} .case_details_box1 .web_page_list2{ width: auto;} .case_details_box3 .con_r{ padding-top: 30px;} .case_details_box4{ height: 760px;} .case_details_box4 .con_r{ width: 63%;} .case_details_box6{ height: 600px;} .case_details_box7{ padding-bottom: 0;} .case_details_box7_video .con_t{ padding: 40px 100px;} .case_details_box8{ height: 600px;} .case_details_box8 .bg{ background-size: cover;} .case_details_box9 .bg{ background-size: cover;} .case_details_box1 .web_page_list3{ width: auto; margin: 0 -30px; } .case_details_box1 .web_page_list3 video{ top:12.8%} .case_details_box1 .web_page_list3a video {top: 18.6%;} /* 案例-详情页-h3c */ .case_h3c_banner{ padding-top: 21%;} .case_h3c_banner .txt{ margin: 0;} .case_h3c_box2 .con_b .img1{ width: 500px;} .case_h3c_box2 .con_b .img2{ width: 400px; right: -20px;} .case_h3c_box3{ padding-bottom: 600px;} .case_h3c_box3 .con_b .img{ padding: 0 30px;} .case_h3c_box3 .con_b{ margin:0 -120px ;} .case_h3c_box4 .con_1 .img1{ width: 800px;} .case_h3c_box4 .con_1 .img2{ width: 500px;} .case_h3c_box4 .con_1 .img3{ width: 200px;} .case_h3c_box4 .con_4 { height: 1400px;} .case_h3c_box4 .con_4 .h2_con{ padding-right: 100px;} .case_h3c_box4 .con_4 .img img{ width: 1000px;} /* 案例-列表页 */ .case_list_banner{ padding-top: 30%;} .case_list_banner .txt h1{ font-size: 40px;} .case_list .li .con_l .txt{ width: 100%;} } /* ipad竖 */ @media screen and (max-width:1002px){ /* 公用部分 */ .head{ padding: 30px;} .head.head_top{ padding: 7px 20px;} .head .nav a{ margin:0 20px;} .head .phone{ font-size: 18px;} .footer .wrap{padding: 200px 0 50px 0; position: relative;} .footer .part1{float: none; text-align: center; opacity: 1; transform: translate(0);} .footer .part1 .nav{padding-bottom: 20px;} .footer .part1 .nav li{float: none; padding: 0 20px; display: inline-block;} .footer .part2{position: absolute; left: 0; top: 130px; width: 100%; text-align: center; opacity: 1; transform: translate(0);} /* 首页 */ .in_part2 .txt span{font-size: 38px; line-height: 38px;} .in_part2 .list ul{margin-top: -60px;} .in_part2 .list li{padding-top: 60px;} .in_part2 .list i{font-size: 14px;} .in_part3{padding: 120px 0;} .in_part3 .txt{font-size: 50px;} .in_part3 .tet{font-size: 16px; letter-spacing: 1px; line-height: 30px;} .in_part5 .list ul{width: auto; margin: 0 30px;} .in_part5 .list dt br{ display: none;} .in_part6{padding-top: 0;} .in_part6 .txt{font-size: 40px; line-height: 40px;} .in_part6 .swiper-container{margin: 0 -15px;} .in_part6 li a{margin: 0 15px;} .in_part6 li dl{width: 330px;} .in_part6 dd{font-size: 16px; padding-top: 15px;} /* 案例-详情页 */ .case_details_banner { height: 500px !important;} .case_details_banner .txt h1{ font-size: 36px;} .case_details_banner .txt .h3{font-size: 18px; } .case_details_banner .url a{ width: 140px; height: 40px; line-height: 40px; font-size: 14px;} .case_details_next .btn{ font-size:36px } .case_details_next2 a{ height: 400px;padding: 10% 40% 0 10%;} .case_details_box{ margin: 0; } .case_details_box .h2_con h2{ font-size: 32px;} .case_details_box .h2_con h2 .h3{ font-size: 22px;} .case_details_box .h2_con .txt br{ display: none;} .case_details_box .h2_con_fd .txt br{ display: block;} .case_details_box1 .con_r{ padding-right: 2%;} .case_details_box1 .web_page_list{ width: 600px; padding: 40px 0 20px 0;} .case_details_box1 .web_page_list2{ width: auto; padding: 80px 0;} .case_details_box1 .web_page_list2 img{ width:500px;} .case_details_box1 .web_page_list2 img:nth-child(2){ top: 30px;} .case_details_box1 .web_page_list3{ width: auto; } .case_details_box2{ height: 600px; } .case_details_box2 .bg{ opacity: 0.4;} .case_details_box3 .con_r{ padding: 70px 0 0 40px;} .case_details_box3 .sc_list{ padding-top: 60px;} .case_details_box3 .sc_list .li span{ width: 80px;height: 80px; } .case_details_box4{ height: 520px; } .case_details_box4 .con_l{ width: 45%; padding-top: 80px;} .case_details_box4 .con_r{ width: 55%;} .case_details_box5 .con_r{ padding-top: 20px;} .case_details_box6{ height: 450px;} .case_details_box8{ height: 500px;} /* 案例-详情页-h3c */ .case_h3c_box .wrap{ padding: 0;} .case_h3c_box .h2_con h2{ font-size: 32px;} .case_h3c_box .txt {font-size: 16px; } .case_h3c_box1{ padding: 80px 0;} .case_h3c_box1 .wrap{ padding: 0;} .case_h3c_box1 .con_l{ width: 65%;} .case_h3c_box2{ padding: 80px 0 550px 0;} .case_h3c_box2 .con_t{ width: 100%;} .case_h3c_box2 .con_b{ padding-top: 60px;} .case_h3c_box2 .con_b .img1{ width: 400px;} .case_h3c_box2 .bg1{ height: 900px;} .case_h3c_box2 .bg2{ height: 600px;} .case_h3c_box3{ padding: 80px 0 200px 0;} .case_h3c_box3 .con_b .img{ padding: 0 15px;} .case_h3c_box3 .con_b .img1{ margin-top: 50px;} .case_h3c_box3 .con_b .img2{ margin-top: 100px;} .case_h3c_box3 .con_b .img4{ margin-top: 30px;} .case_h3c_box4 .con_1{ height: 500px;} .case_h3c_box4 .con_1 .img1{ width: 600px;left: -40%; top: 10%;} .case_h3c_box4 .con_1 .img2{ width: 300px; right: -16%; top: 16%;} .case_h3c_box4 .con_1 .img3{ width: 140px;} .case_h3c_box4 .con_2{ padding: 60px 0;} .case_h3c_box .h2_con h2{ padding-bottom: 20px;} .case_h3c_box4 .con_3{ padding: 0 40px;} .case_h3c_box4 .con_4 .h2_con{float: none; text-align: center; width: 100%; padding: 200px 50px 0 50px;} .case_h3c_box .h2_con2 h2 br{ display: none;} .case_h3c_box4 .con_4{ height: 1500px;} .case_h3c_box4 .con_4 .img{ left: -15%; bottom: -15%;} .case_h3c_box5{ padding: 80px 0 0 0;} .case_h3c_box5 .con_t{ padding-bottom: 60px;} .case_h3c_box5 .con_b .img{ width: 90%;} /* 案例-列表页 */ .case_list_banner{ padding-top: 50%;} .case_list_banner .txt h1{ font-size: 40px;} .case_list_banner .txt h1 br{ display: none;} .case_list .li{ height: 200px; } } /* 手机导航 */ @media screen and (max-width:758px){ .body_on{overflow:hidden; width:100%; height:100%; } .phone_nav{display: none;} .phone_nav .height{height: 50px;} .phone_nav .top{ background: #000; height: 50px; position:fixed; left: 0; top: 0; width: 100%; z-index:9999;} .phone_nav .top .a{float: left; width: 90px; margin: 15px 20px; position: relative;} .phone_nav .top .a img{width:100%; position: absolute; left: 0; top: 0; transition: 0.5s;} .phone_nav .top .a .a_logo1{opacity: 1;} .phone_nav .top .a .a_logo2{opacity: 0;} .phone_nav .but{ float:right; width:22px; height: 30px; margin: 8px 10px; padding: 0 5px; display: block;} .phone_nav .but i{width:100%; height: 2px; background: #fff; display: block; margin-top: 15px; position: relative; border-radius: 10px; transition: 0.4s; -webkit-transition: 0.4s; } .phone_nav .but i:before,.but i:after{content:""; position:absolute; left:0; top:0; display:block; width:100%; height:2px; background: #fff; border-radius: 10px; transition: 0.4s; -webkit-transition: 0.4s;} .phone_nav .but i:before{ margin-top: -6px;} .phone_nav .but i:after{ margin-top: 6px;} .phone_nav .box{ width:100%; height: 100%; background:rgba(0,0,0,1); position: fixed; left: 0; top: 0; z-index: 999; transform: translateY(-100%); opacity: 0; transition: translateY,.5s cubic-bezier(.54,.41,.59,.91),opacity,.5s cubic-bezier(.54,.41,.59,.91); transition-delay: .5s; } .phone_nav .box_con{ padding:50px 40px 0px 40px; overflow-x: hidden; transform:translateY(-30px); opacity: 0;transition: .5s; position: relative;} .phone_nav .box_con>ul{ padding:20px 0 0 0;} .phone_nav .box_con>ul>li{padding: 12px 0; position: relative;} .phone_nav .box_con>ul>li>i{position:absolute; right:10px; top:14px; font-style: normal; width: 20px; height: 20px; background: url(http://www.1feel.cn/Template/sy2022/images/iphone_nav_xia.png) right no-repeat; transition:0.4s; -webkit-transition:0.4s; transform: rotate(-90deg); -webkit-transform: rotate(-90deg)} .phone_nav .box_con>ul>li>ul{ max-height: 0; overflow: hidden; transition: 0.5s; -webkit-transition: 0.5s;} .phone_nav .box_con>ul>li>ul>li{padding:5px 10px;} .phone_nav .box_con>ul>li>ul>li{ border-bottom: 1px solid rgba(225,225,225,0.7); padding: 10px; position: relative;} .phone_nav .box_con>ul>li>ul>li i{position:absolute; right:10px; top:14px; font-style: normal;width: 20px; height: 20px; background: url(http://www.1feel.cn/Template/sy2022/images/iphone_nav_xia.png) right no-repeat; transition: 0.4s; -webkit-transition: 0.4s; transform: rotate(-90deg); -webkit-transform: rotate(-90deg)} .phone_nav .box_con>ul>li>ul>li>ul{max-height: 0; overflow: hidden; transition: 0.5s; -webkit-transition: 0.5s;} .phone_nav .box_con>ul>li>ul>li>ul>li{ padding: 5px;} .phone_nav .box_con>ul>.i_on>i{transform: rotate(0deg); -webkit-transform: rotate(0deg) } .phone_nav .box_con>ul>li>ul>.i_on>i{ transform: rotate(0deg); -webkit-transform: rotate(0deg)} .phone_nav .box_con>ul>.i_on>ul{ max-height:300px; padding-top: 10px;} .phone_nav .box_con>ul>li>ul>.i_on>ul{ max-height:300px; padding-top: 10px;} .phone_nav .box_con>ul>li:last-child{border-bottom: 0;} .phone_nav .box_con>ul>li>ul>li:last-child{border-bottom: 0;} .phone_nav .box_con li a{color:#fff; font-size: 30px; font-weight: bold; letter-spacing: 5px;} .phone_nav .box_con>ul.ul2>li{padding: 16px 0;} .phone_nav .box_con .ul2 li a{ font-size: 16px; } .phone_nav .box_con>ul{ overflow: hidden;} .phone_nav .box_con>ul>li{ width: 50%; float: left;} .phone_nav .phone_bg{ overflow: hidden; position: absolute; bottom: 30px; width: 100%;} .phone_nav .phone_bg a{ width: 40%; box-sizing: border-box; float: left;} .phone_nav .phone_bg .t1{ color: #fff;display: block;font-size:28px;padding: 10px 0 10px 40px; font-family: 'DIN-BOLD'; background: url(../image/phone1.png) no-repeat left center;} .phone_nav .phone_bg .t2{ position: relative;display: block;font-weight: 800;padding: 14px 24px 14px 24px;font-size: 18px;color: #0b131a;background-color: #fff; letter-spacing: 5px; margin-top:0;} .phone_nav .phone_bg .t2::before{content: ""; background: url(../image/btn_right2.png) no-repeat center; width: 12px; background-size: 11px; position: absolute; right: 20px; height: 100%; top: 0;} /*打开样式*/ .phone_on .but i:before{ transform: rotate(45deg); -webkit-transform: rotate(45deg); margin: 0;} .phone_on .but i:after{ transform: rotate(-45deg);-webkit-transform: rotate(-45deg); margin: 0;} .phone_on .but i{ background:#000;} .phone_on .box{transform: translateY(0%); opacity: 1; transition-delay: 0ms;transition: .5s cubic-bezier(.54,.41,.59,.91);} .phone_on .box_con{transform: translateZ(0) translateY(0);opacity: 1;} .phone_on .box_con .ul1 li:nth-child(1) {animation: c 2.3s 1 ease-out;} .phone_on .box_con .ul1 li:nth-child(2) {animation: d 2.3s 1 ease-out;} .phone_on .box_con .ul1 li:nth-child(3) {animation: e 2.3s 1 ease-out;} .phone_on .box_con .ul1 li:nth-child(4) {animation: f 2.3s 1 ease-out;} /* .phone_on .box_con .ul2 li:nth-child(1) {animation: f 2.3s 1 ease-out;} .phone_on .box_con .ul2 li:nth-child(2) {animation: g 2.3s 1 ease-out;} */ .phone_on .phone_bg .t1{ animation: h 2.3s 1 ease-out;} .phone_on .phone_bg .t2{ animation: i 2.3s 1 ease-out;} .phone_on .top .a .a_logo1{opacity: 0;} .phone_on .top .a .a_logo2{opacity: 1;} @keyframes c{0%{opacity:0;transform:translateZ(0) translateY(30px)}13%{opacity:0;transform:translateZ(0) translateY(30px)}30%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes d{0%{opacity:0;transform:translateZ(0) translateY(30px)}16%{opacity:0;transform:translateZ(0) translateY(30px)}33%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes e{0%{opacity:0;transform:translateZ(0) translateY(30px)}19%{opacity:0;transform:translateZ(0) translateY(30px)}36%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes f{0%{opacity:0;transform:translateZ(0) translateY(30px)}22%{opacity:0;transform:translateZ(0) translateY(30px)}39%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes g{0%{opacity:0;transform:translateZ(0) translateY(30px)}25%{opacity:0;transform:translateZ(0) translateY(30px)}42%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes h{0%{opacity:0;transform:translateZ(0) translateY(30px)}28%{opacity:0;transform:translateZ(0) translateY(30px)}45%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes i{0%{opacity:0;transform:translateZ(0) translateY(30px)}32%{opacity:0;transform:translateZ(0) translateY(30px)}48%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes j{0%{opacity:0;transform:translateZ(0) translateY(30px)}35%{opacity:0;transform:translateZ(0) translateY(30px)}51%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes k{0%{opacity:0;transform:translateZ(0) translateY(30px)}38%{opacity:0;transform:translateZ(0) translateY(30px)}54%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes l{0%{opacity:0;transform:translateZ(0) translateY(30px)}41%{opacity:0;transform:translateZ(0) translateY(30px)}57%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes m{0%{opacity:0;transform:translateZ(0) translateY(30px)}44%{opacity:0;transform:translateZ(0) translateY(30px)}60%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} @keyframes n{0%{width:0;opacity:0}47%{width:0;opacity:0}63%{width:100%;opacity:1}to{width:100%;opacity:1}} @keyframes o{0%{opacity:0;transform:translateZ(0) translateY(30px)}47%{opacity:0;transform:translateZ(0) translateY(30px)}63%{opacity:1;transform:translateZ(0) translateY(0)}to{transform:translateZ(0) translateY(0);opacity:1}} .head{display: none;} .phone_nav{display: block;} } /* 手机 */ @media screen and (max-width:758px){ /* 公用部分 */ .wrap{margin: 0 20px;} .header{height: 50px;} .header .part1{padding: 12px 0 0 15px;} .header .part1 img{width: 100px;} .header .part2 .tel{background: none; height: auto; line-height: inherit; width: auto; padding-top: 15px;} .header .part2 .tel i{font-size: 14px; color: #333; background-size: 20px; height: 20px; line-height: 20px; padding-left: 30px;} .header .part2 .nav_but{width: 50px; height: 50px;} .header .part2 .nav_but i{margin: 25px 0 0 14px;} .footer{margin-bottom: 50px;} .footer .wrap{padding: 150px 0 20px 0;} .footer .part2{top: 100px} .footer .part1 .nav li{padding: 0 5px;} .footer .part1 .tet{line-height: 16px;} .footer .part1 .tet p{padding-bottom: 10px;} .Photo{ padding:0 0 0 0; overflow:hidden;} .Photo ul{ padding-left:0; width:100%;} .Photo li{ float:left; width:100%; padding-top:0; margin-right:0;} .Photo li img{ width:100%; } .Photo li.iphone_none{ display:none;} .foot .b_logo{ padding:35px 0 15px 0} .foot em{ padding:4px 0 25px 0;} .foot .bq i{ padding:0 10px;} .left_scroll{display: none;} .left_scroll2{display: none;} .right_btn{width: 40px; height: 40px; right: 10px; bottom: 20px; } .right_btn .zxxz{height: 40px;} .right_btn .zxxz .iconfont{font-size: 18px; padding-top: 11px;} .right_btn .zxxz .dian_bg .dian{width: 2px; height: 2px;} .right_btn .zxxz .dian_bg{padding-top: 6px;} /* 首页 */ .in_part1{ background-color: #000;} .in_part1 .txt{font-size: 36px; line-height: 55px; left: 20px;} .in_part1 .txt .pxx2{ font-size: 20px; line-height: 1.4; margin-top: 10px;} .in_part1 .txt span{ position: relative;} .in_part1 .txt span::after{content:""; position: absolute; width: 20px; height: 20px; border: 1px solid #fff; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 1px; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 1px; border-top: none; border-left: none; transform: rotate(45deg); left: 50%; margin-left: -10px; top: 40vh; animation: header_h_tips 0.8s ease infinite alternate; } @keyframes header_h_tips{ 0%{ margin-top:0; } 100%{ margin-top:10px;} } .in_part2{padding: 100px 0;} .in_part2 .txt{padding-bottom: 40px;} .in_part2 .txt span{font-size: 20px; line-height: 20px; letter-spacing: 1px;} .in_part2 .txt h2{font-size: 16px;} .in_part2 .list b{font-size: 16px; letter-spacing: 1px;} .in_part2 .list i{font-size: 12px; letter-spacing: 0;} .in_part2 .list ul{margin: -30px -5px 0 -5px;} .in_part2 .list li{padding: 30px 5px 0 5px; box-sizing: border-box;} .in_part2 .list dt{ transform: scale(0.8);} .in_part2 .list dd{ width: 90%;} .in_part3{padding: 80px 0;} .in_part3 .txt{font-size: 28px; } .in_part3 .tet{font-size: 14px; line-height: 24px;} .in_part3 .tat a{font-size: 14px; width: 120px; height: 35px; line-height: 35px;} .in_part4 .box{ padding: 0;} .in_part4 .top_con{ width: 100%; position: relative; display: none;} .in_part4 .list .li_box .maximg img{ width: 150%; height: 150%;} .in_part4 .list .li_hover.ul_one .img_box{ box-shadow: 0 30px 80px rgba(4,105,128,0.6)} .in_part4 .ul1{ width: 100%; position: relative;} .in_part4 .ul1 .li1{ width: 50%; position: absolute; left:0; bottom:-50%; } .in_part4 .ul1 .li2{width: 100%;} .in_part4 .ul2{ position: relative; margin-top: 100%;} .in_part4 .ul2 .li1{ position: absolute; top: -50%; right: 0; width: 50%;} .in_part4 .ul2 .li1 .li_box{ margin: 0;} .in_part4 .ul2 .li2{ position: absolute; bottom: -100%; left: 0; width: 50%;} .in_part4 .ul2 .li3{ width: 100%;} .in_part4 .ul2 .li4{ position: absolute; bottom: -50%; right: 0; width: 50%;} .in_part4 .ul2 .li4 .li_box{ margin: 0;} .in_part4 .ul3 .li1{ width: 100%; margin-top: 100%; position: relative;} .in_part4 .ul3 .li1 .li_box_wrap{ position: absolute; width: 50%; left:0;bottom: -50%; margin-left: 0;} .in_part4 .ul3 .li2{ width: 100%; margin-top: 100%; position: relative;} .in_part4 .ul3 .li2 .li2_1{ position: absolute; width: 50%; right: 0; top: -50%;} .in_part4 .ul3 .li2 .li2_3{ position: absolute; width: 50%; right:0; bottom: -50%;} .in_part4 .ul3 .li3{ width: 100%; margin-top: 100%; position: relative;} .in_part4 .ul3 .li3 .li_box_wrap{ position: absolute; top: -50%; left: 0; margin: 0;} .in_part4 .ul4{ position: relative; margin-top: 100%;} .in_part4 .ul4 .li1{ width: 100%; margin-left: 0; } .in_part4 .ul4 .li2{ position: absolute; top: -100%; left: 0; width: 50%;} .in_part4 .ul4 .li2 .li_box{ margin: 0;} .in_part4 .ul4 .li3{ position: absolute; top: -50%; right: 0; width: 50%;} .in_part4 .ul4 .li3 .li_box{ margin: 0;} .in_part4 .ul5{ position: relative; margin-top: 100%;} .in_part4 .ul5 .li3{ width: 100%; margin-left: 0; } .in_part4 .ul5 .li1{ position: absolute; top: -100%; right: 0; width: 50%; margin: 0;} .in_part4 .ul5 .li1 .li_box{ margin: 0;} .in_part4 .ul5 .li2{ position: absolute; top: -50%; left: 0; width: 50%;} .in_part4 .ul5 .li2 .li_box{ margin: 0;} .in_part4 .ul5 .li4{ display: none;} .in_part4 .ul6{ position: relative; margin-top: 100%;} .in_part4 .ul6 .li1{ width: 100%; margin-left: 0; } .in_part4 .ul6 .li2{ position: absolute; top: -100%; left: 0; width: 50%;} .in_part4 .ul6 .li2 .li_box{ margin: 0;} .in_part4 .ul6 .li3{ position: absolute; top: -50%; right: 0; width: 50%;} .in_part4 .ul6 .li3 .li_box{ margin: 0;} .in_part4 .ul7{ position: relative; margin-top: 100%;} .in_part4 .ul7 li:nth-child(1){ display: none;} .in_part4 .ul7 .li1{ width: 100%; margin-left: 0; } .in_part4 .ul7 .li2{ position: absolute; top: -100%; right: 0; width: 50%;} .in_part4 .ul7 .li2 .li_box{ margin: 0;} .in_part4 .ul7 .li3{ position: absolute; top: -50%; left: 0; width: 50%;} .in_part4 .ul7 .li3 .li_box{ margin: 0;} .in_part4 .ul8{ position: relative; padding-top: 100%; width: 100%;} .in_part4 .ul8 .li1{ width: 100%; margin-left: 0; display: none; } .in_part4 .ul8 .li2{ position: absolute; top: 0%; left: 0; width: 50%;} .in_part4 .ul8 .li2 .li_box{ margin: 0;} .in_part4 .ul8 .li3{ display: none;} .in_part4 .li_more{ position: absolute; right: -100%; margin-top: 0;} .in_part5 #part5_canvas{ width: 200vw; left: -50vw;} .in_part5 .list{padding-top: 80px;} .in_part5 .list ul{height: 210px; margin: 0 15px;} .in_part5 .list::before{background-size: 40px; height: 40px;} .in_part5 .list dt{letter-spacing: 1px; font-size: 22px; margin-bottom: 20px;} .in_part5 .list dt .tit{ padding-bottom: 10px;} .in_part6{padding-top: 0;} .in_part6 .txt{font-size: 30px; line-height: 30px; padding-bottom: 20px;} .in_part6 .swiper-container{margin: 0 -5px;} .in_part6 li a{margin: 0 5px;} /* 留言表单页 */ .message_bg{ padding: 50px 0;} .message_con{ width: 90%; padding:60px 20px;} .message_con .con_2{ padding-top: 60px;} .message_con .con_2 .h2_tit{ font-size: 22px; padding: 80px 0 14px 0; } .message_con .con_2 .h3_txt{ font-size:16px;} /* 案例-列表页 */ .case_list_banner{ padding-top: 10%;} .case_list_banner .txt h1{ font-size: 30px;} .case_list_banner .txt h1 br{ display: none;} .case_list{ overflow: hidden; width: 100%;} .case_list_banner .bottom{ bottom: 120px; width: 30px; height: 30px; background-size:30%; margin: 0 0 0 -15px;} .case_list .li .con_l .img{ padding-bottom: 10px;} .case_list .li .con_l .img img{ max-height: 40px; min-height: 30px;} .case_list .li .con_l .txt{ font-size: 14px; padding-top: 10px;} .case_list .li .con_l .txt br{ display: none;} .case_list .li .con_r{ background-size:30px;} .case_load{ font-size: 16px; padding: 20px 0;} /********************cell 8.11*********/ .news_max_data{ padding: 50px 20px; display: block;} .news_max_data .left_l, .news_max_data .right_l{ width: 100%;} .news_max_data .left_l .h1{ font-size: 22px; line-height: 1.7;} .news_max_data .left_l .icon{ justify-content: space-between; flex-wrap: wrap;} .news_max_data .left_l .icon .li{ margin: 0; min-width: 45%;} .news_max_data .left_l .more{ display: block;} .news_max_data .left_l .more a{ width: 100%;} .news_max_data .left_l .more a:nth-child(2){ margin-top: 15px;} .news_max_data .left_l .tuibox .h{ font-size: 22px; margin-bottom: 20px;} .news_max_data .left_l .tuibox .kpi{ display: block;} .news_max_data .left_l .tuibox .kpi .li{ width: 100%;} .news_max_data .left_l .tuibox .kpi .li a{ font-size: 15px; line-height: 38px;} .news_max_data .right_l .h1{ font-size: 22px; font-weight: normal;} .news_max_data .right_l{ margin-top: 50px;} body .footer .footy_opem{ padding: 25px 20px 50px 20px; display: block;} .footy_opem .ope{ width: 100%;} .footy_opem .ope a{ font-size: 12px; margin-right: 24px;} .footy_opem .ope a::after{ width: 24px; right: -24px;} .footy_opem .h1{ width: auto; margin: 0 0 5px 0;} .news_max_data .right_l .s_lisr .li .p{ font-size: 15px; line-height: 28px; padding: 10px 5px 0 5px;} .news_max_list{ padding: 50px 20px;} .news_max_list .scont{ display: block;} .news_max_list .scont .li{ width: 100%; margin: 30px 0 0 0;} .news_max_list .scont .li:first-child{ margin: 0;} .news_max_list .scont .li .ter{ padding: 10px 0 0 0;} .news_max_list .scont .li .ter .h{ font-size: 15px; line-height: 28px;} .news_max_list .scont .li .bot{ margin-top: 15px;} .news_max_list .page a{ display: block; margin: 6px 3px 0 3px; line-height: 1;} .index_news_list{ padding: 50px 20px;} .index_news_list .h1{ font-size: 22px; text-align: center;} .index_news_list .v_list{ display: block; margin-top: 30px;} .index_news_list .v_list .vli{ width: 100%; margin: 0; padding: 25px 0; border-bottom: 1px solid #fff;} .index_news_list .v_list .vli:first-child{ border-top: 1px solid #fff;} .footer .footer_zf.div3{ background-image: url(../image/footer_07.jpg); animation: none;} /*************************************/ .index_news_list .tp a{ display: none;} } /* 手机-竖 */ @media screen and (max-width:470px){ /* 手机导航 */ .phone_nav .box_con>ul>li{ width: 100%; float: none;} .phone_nav .phone_bg{ bottom: 60px; width: auto;} .phone_nav .phone_bg a{ width: auto; box-sizing: border-box; float: none;} .phone_nav .phone_bg .t2{ margin-top:30px;} /* 首页 */ .progress{ width: 22em; } .in_part3 .tet_pc{ display: none;} .in_part3 .tet_iphone{ display: block;} /* 留言表单页 */ .message_bg{ padding: 50px 0;} .message_con{ width: 90%; padding:40px 20px;} .message_con .h2{ font-size: 24px; padding-bottom: 30px;} .message_con .h3{ font-size: 14px; padding-bottom: 10px;} .message_con .form .text{ font-size: 14px;} .message_con .txt2{ font-size: 12px;} .message_con .btn_list{ padding-top: 20px;} .message_con a.btn{ line-height: 40px; height: 40px; font-size: 16px;} /* 案例-详情页 */ .case_details_banner{ height: auto !important; padding-top: 20%; padding-bottom: 15%; min-height: 400px;} .case_details_banner .txt h1{ padding-bottom: 30px; font-size: 30px; } .case_details_banner .txt h1 br{ display: none;} .case_details_banner .txt .h3{ font-size: 16px; padding-bottom: 30px;} .case_details_next{ height: 200px; } .case_details_next a{ line-height: 200px;} .case_details_next .btn{ font-size: 26px;} .case_details_next .btn img{ width: 20px; margin-left: 20px;} .case_details_next2{ padding: 30px 0;} .case_details_next2 .h3{ padding: 0 0 10px 10px; font-size: 22px;} .case_details_next2 a .tit{ font-size: 20px; padding-bottom: 20px;} .case_details_next2 a .txt{ padding: 10px 0; font-size: 14px;} .case_details_next2 a{ height: 300px;padding: 10% 10% 0 10%;} .case_details_next2 a .btn{ width:30px; height: 30px; margin-top: 10px;} .case_details_box{ padding: 40px 0;} .case_details_box .h2_con .txt{ font-size: 14px;} .case_details_box .h2_con .txt p{ padding: 10px 0;} .case_details_box .h2_con h2{ font-size: 28px; padding-bottom: 30px; } .case_details_box .h2_con h2::after{ width: 20px; height: 4px;} .case_details_box1 .con_l{ width: 100%; float: none;} .case_details_box1 .con_r{ width: 100%; padding: 0; float: none; padding-top: 20px;} .case_details_box1 .con_r .logo{ padding-bottom: 20px; width: 40%; float: left;} .case_details_box1 .con_r .tit1{ padding-bottom: 20px; width: 50%; float: right;} .case_details_box1 .con_r .tit2{ clear: both;} .case_details_box1 .web_page_list{ width: 100%; padding: 20px 0;} .case_details_box1 .web_page_list video, .case_details_box1 .web_page_list img{ margin: 10px 0;box-shadow: 0px 0px 28px rgba(34,34,34,0.36); box-sizing: border-box; } .case_details_box1 .web_page_list2 img{ width: 100%; box-sizing: border-box; } .case_details_box1 .web_page_list2 img:nth-child(2){ display: none;} .case_details_box1 .web_page_list3{ margin: 0 -20px; width: auto; } .case_details_box1 .web_page_list3 img{ margin: 0; border:none; box-shadow: none;} .case_details_box1 .web_page_list3 video{ top: 7.8%;} .case_details_box1 .web_page_list3a{ padding: 0;} .case_details_box1 .web_page_list3a video {top: 16.6%;} .case_details_box2{ height: auto; padding-bottom: 120px;} .case_details_box2 .bg{ background-size: 100% auto; background-position: bottom; background-color: #000; } .case_details_box3 .con_l{ width: 35%; } .case_details_box3 .con_r{ width: 65%; padding: 0 0 0 20px; } .case_details_box3 .sc_list{ padding-top: 30px;} .case_details_box3 .sc_list .li span{ width: 40px; height: 40px; border-radius: 8px; } .case_details_box3 .sc_list .li b{ font-size: 12px; padding-top: 18px;} .case_details_box4{ height: auto; padding-bottom: 0;} .case_details_box4 .con_l{ width: 100%; padding: 0; float: none;} .case_details_box4 .con_r{ width: 100%; float: none;} .case_details_box5 .con_l{ width: 100%; padding: 0; float: none;} .case_details_box5 .con_l{box-shadow: 0px 0px 28px rgba(34,34,34,0.36);} .case_details_box5 .con_r{ width: 100%; float: none; padding-top: 30px;} .case_details_box6{ height: 350px;} .case_details_box7{ padding-bottom: 0;} .case_details_box7_video{ background-size: auto 50%;} .case_details_box7_video .con_t{ padding:20px 0;} .case_details_box8{ height: 400px;} .case_details_box7_video .video .play{ background-size: 40px;} /* 案例-详情页-h3c */ .case_h3c_banner .txt .h3{ padding-bottom: 10px;} .case_h3c_box .h2_con .txt{ font-size: 14px;} .case_h3c_box .h2_con .txt p{ padding: 10px 0;} .case_h3c_box .h2_con h2{ font-size: 28px; } .case_h3c_box1{ padding: 40px 0; } .case_h3c_box1 .con_r{ float: none; width: 100%; overflow: hidden;} .case_h3c_box1 .con_r .tit2{ margin: 0; font-size: 14px;} .case_h3c_box1 .con_r .tit2 li{ width: 50%; float: left; padding:0 0 15px 0; box-sizing:border-box;} .case_h3c_box1 .con_l{ width: 100%; float: none;} .case_h3c_box2{ padding: 40px 0 160px 0;} .case_h3c_box2 .con_t .txt{ padding-left: 0;} .case_h3c_box2 .con_b{ padding-top: 30px;} .case_h3c_box2 .con_b .img1{ width: 200px; margin-left: -20px;} .case_h3c_box2 .con_b .img2{ width: 160px; top: 100px;} .case_h3c_box2 .con_b .img img{ box-shadow: 0px 0px 28px rgb(34 34 34 / 36%);} .case_h3c_box2 .bg1{ height: 700px;} .case_h3c_box2 .bg2{ height: 260px;} .case_h3c_box3{ padding: 40px 0;} .case_h3c_box3 .con_t .txt{ margin: 0;} .case_h3c_box3 .con_t .txt p{ float: none; width: 100%;} .case_h3c_box3 .con_t{ padding-bottom: 50px;} .case_h3c_box3 .con_b .img{ padding: 0 8px;} .case_h3c_box3 .con_b .img img{box-shadow: 0px 0px 28px rgb(34 34 34 / 36%);} .case_h3c_box3 .con_b .img1{ margin-top: 40px;} .case_h3c_box3 .con_b .img2{ margin-top: 60px;} .case_h3c_box4{ padding: 30px 0;} .case_h3c_box4 .con_1{ height: auto;} .case_h3c_box4 .con_1 .img1{ width: 100%; left: 0; top: 0; right: 0; position: relative; clear: both;} .case_h3c_box4 .con_1 .img2{ width: 70%; float: left; left: 0; right: 0; top: -10px; position: relative;} .case_h3c_box4 .con_1 .img3{ width: 30%; float: right; left: 0; right: 0; top: 0; position: relative;} .case_h3c_box4 .con_2{ padding: 30px 0;} .case_h3c_box4 .con_3{ padding: 0;} .case_h3c_box4 .con_3.on .img::after{ bottom: -30px;} .case_h3c_box4 .con_3.on .img::before{ bottom: -54px;} .case_h3c_box4 .con_4{ height: auto;} .case_h3c_box4 .con_4 .h2_con{ padding: 100px 20px 0 20px;} .case_h3c_box4 .con_4 .img{ position: relative; left: -25%; top: 0; bottom: auto;} .case_h3c_box4 .con_4 .img img{ width: 150%;} .case_h3c_box5{ padding: 40px 0 0 0;} .case_h3c_box5 .con_t{ padding-bottom: 30px;} .case_h3c_box5 .con_t .txt{ margin: 0;} .case_h3c_box5 .con_t .txt p{ float: none; width: 100%;} .case_h3c_box5 .con_b .img{ width: 100%;} .case_list_banner{ padding-top: 40%;} .case_list_banner .txt h1{ font-size: 30px;} .case_list .li .con_l{width: 70%;} } /* 右侧按钮及弹出层 */ .right_icon{ position: fixed; right:20px; bottom: 30px; width: 80px; z-index: 2000; animation: zxxzBoxShadow 4s infinite;} .right_icon a{ display: block; width: 80px; height: 80px; background: #172b3c; border-bottom: 1px solid #718daa; float: right; box-shadow: 0px 0px 20px rgba(53,95,134,0.5); transition: 0.4s;} .right_icon .btn{ display: block; width: 80px; height: 80px; text-align: center; font-size: 12px; color: #fff; float: left;} .right_icon .btn img{ width: 30px; margin: 15px 0 7px 0; transition: 0.4s;} .right_icon .btn b{ display: block; transition: 0.4s;} .right_icon .zk{ width: 0; transition: 0.4s; overflow: hidden; float: left; display: block; font-size: 24px; line-height: 80px; font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; color: #fff;} #newBridge{ display: none !important; } .tc_bg{ width: 660px; height: 540px; position: fixed; z-index: 12000; left: 50%; top: 50%; margin: -270px 0 0 -330px; background: url(../image/tc_bg.jpg) no-repeat; background-size: cover; box-sizing: border-box; border:2px solid rgba(108,231,240,0.6); box-shadow: 0px 0px 76px 4px rgba(63,110,179,0.8); display: none ; } .tc_bg .xx{ width: 40px; height: 40px; background: url(../image/btn_xx.png) no-repeat center; right: 20px; top: 20px; position: absolute; cursor: pointer; z-index: 10;} .tc_bg .con{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 50px 76px 70px 76px; box-sizing: border-box;} .tc_bg .con_1{ display: block;} .tc_bg .tit{ font-size: 28px; line-height: 1.5; font-weight: 300; color: #fff; padding-bottom: 20px;} .tc_bg .phone{ font-size: 20px; line-height: 1.5; font-weight: bold; color: #ffce66; float: left; padding-bottom: 38px;} .tc_bg .phone a{ font-size: 42px; font-family: "DIN-REGULAR"; color: #ffce66; border-bottom: 1px solid rgba(255,206,102,0.5);} .tc_bg .zxyy{ overflow: hidden; clear: both;} .tc_bg .zxyy .txt1{ color: #ffffff; font-weight: lighter; font-size: 16px;} .tc_bg .zxyy .txt2{ color: #ffcf67; font-weight: bold; background: url(../image/btn_dun.png) no-repeat left center; padding-left: 20px;} .tc_bg .zxyy .form{ margin: 10px 0; overflow: hidden; position: relative; padding-right: 136px;} .tc_bg .zxyy .text{border: 1px solid #24c4d0; border-right: none; line-height: 48px; height: 48px; width: 100%; box-sizing: border-box; padding:0 20px; font-size: 16px; color: #ffffff; border-radius: 0px; background: rgba(225,225,225,0.06);} .tc_bg .zxyy .text::-webkit-input-placeholder{color: #cacaca;} .tc_bg .zxyy .text::-moz-placeholder{color: #cacaca;} .tc_bg .zxyy .text:-ms-input-placeholder{color: #cacaca;} .tc_bg .zxyy .button{ position: absolute; right: 0; top: 0; width: 136px; line-height: 44px; height: 48px; float: left; font-size: 16px;} .tc_bg .zxyy .formErrorContent{ text-align: left; font-size: 12px;font-weight: bold; color: #f00; padding-top: 5px;} .tc_bg .btn_list{ padding-top: 50px;} .tc_bg .btn_list a.btn2{line-height: 44px; height: 48px; width: 100%; font-size: 18px;} .tc_bg a.btn{ position: relative; transition: all 0.4s;border: 2px solid #24c4d0; box-sizing: border-box; color: #fff; text-align: center; background: #24c4d0; border-radius: 0px; display: block; cursor: pointer;} .tc_bg a.btn span{ position: relative; z-index: 1;} .tc_bg a.btn::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.4s;} .tc_bg a.btn:hover::before{transform: scaleX(1); transform-origin: 0 50%;} .tc_bg a.btn:hover{ color: #25c4d1} .tc_bg .con_2{ display: none; text-align: center; padding-top: 130px;} .tc_bg .h2_tit{ font-size: 40px; font-weight: bold; color: #ffce66; display: inline-block; margin: 0 auto; padding: 80px 0 14px 0; border-bottom: 1px solid #ffce66; background: url(../image/btn_chenggong.png) no-repeat center top;} .tc_bg .h3_txt{ font-size:22px; color: #fff; line-height: 2; font-weight: lighter; padding-top: 23px; } /* 右侧按钮及弹出层-2023.1.5更新样式 */ .right_icon{ width: 92px; background:rgba(255,255,255,0.2); padding: 2px; border-radius: 10px; bottom: 38px; right: 38px; animation: none;} .right_icon .con_box{ background:rgba(0,0,0,0.8); border-radius: 8px; overflow: hidden;} .right_icon a{ width: 100%; height: 120px; background: none; box-shadow: none; border: none; } .right_icon a:first-child{ border-bottom: 2px solid rgba(255,255,255,0.2);} .right_icon .btn{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; font-size: 14px;} .right_icon .btn img{ display: none;} .right_icon .btn .img{ display: block; width: 40px; height: 40px;} .right_icon .btn .img1{ background: url(../image/btn_zx3.png) no-repeat center; background-size: contain;} .right_icon .btn .img2{ background: url(../image/btn_zx4.png) no-repeat center; background-size: contain;} .right_icon .btn b{ padding-top: 8px;} .right_icon a:hover .btn{ color: #10c4cb;} .right_icon a:hover .btn .img1{ background-image: url(../image/btn_zx3a.png);} .right_icon a:hover .btn .img2{ background-image: url(../image/btn_zx4a.png);} .right_icon a .phone_tc{ position: absolute; right:calc(100% - 4px); padding-right: 20px; width: 320px; height: 144px; opacity: 0; visibility: hidden; } .right_icon a .phone_tc::after{ content: ""; position: absolute; width: 0; height: 0; border: 10px solid transparent; border-left-color: #fff; right: 0; top: 65px} .right_icon a .phone_tc .tit{ line-height: 44px; padding: 0 15px; background: #f4f4f4; color: #888888;} .right_icon a .phone_tc .txt{ background: url(../image/ico_07.png) no-repeat 25px center #fff ; padding: 34px 0 30px 70px; line-height:26px;} .right_icon a .phone_tc .phone{font-family: 'bahnschrift'; font-size: 29px; font-weight: bold; color: #05c0be; letter-spacing: 0.1em; border-bottom: 1px solid #82dfde;} .right_icon a:hover .phone_tc{ opacity: 1; visibility: visible; transition: 0.4s;} @media screen and (min-width:758px){ /* .right_icon a.dh:hover{ width: 280px;} .right_icon a:hover .btn img{ width: 34px; margin: 24px 0 7px 0;} .right_icon a:hover .btn b{ display: block; opacity: 0;} .right_icon a.dh:hover .zk{ width: 200px;} */ } @media screen and (max-width:758px){ .right_icon{ position: fixed; right:0; bottom:0; width: 100%; margin-top: 0; z-index: 50;} .right_icon a{ width: 50%; float: left; height: 50px; border-top: 1px solid #718daa; border-right: 1px solid #718daa; box-sizing:border-box;} .right_icon .btn{ width: 100%; height: 50px; line-height: 50px; float: left; font-size: 14px; text-align: center;} .right_icon .btn img{ margin: 0 20px 0 0; display: inline-block;} .right_icon .btn b{display: inline-block;} /* 右侧按钮及弹出层-2023.1.5更新样式 */ .right_icon{ padding: 0; border: none; border-radius: 0px;} .right_icon .con_box{ border-radius: 0px;} .right_icon a:first-child{ border-bottom: none;} .right_icon .btn{ flex-direction: row;} .right_icon .btn .img{ width: 30px; height: 30px;} .right_icon .btn b{ padding-top: 0; padding-left: 10px;} .foot{ margin-bottom: 50px;} .tc_bg{ width: 90%;height:340px;left: 5%;top: 50%;margin: -170px 0 0 0; background-size: cover; background-position: center;} .tc_bg .con{padding: 30px 20px;} .tc_bg .tit{font-size: 22px; padding-bottom: 10px;} .tc_bg .phone{ font-size: 16px; padding-bottom: 15px;} .tc_bg .phone a{ font-size: 24px;} .tc_bg .btn_list{ font-size: 16px; right: 30px; bottom: 20px;} .tc_bg .btn_list a{ padding-left: 20px;} .tc_bg .xx{ right: 0; top: 0;} .tc_bg .zxyy .txt1{ font-size: 12px;} .tc_bg .zxyy .txt2{ font-size: 12px;} .tc_bg .zxyy .form{margin: 6px 0; padding-right: 80px;} .tc_bg .zxyy .text{ font-size: 14px; line-height: 36px; height: 36px; padding: 0 5px;} .tc_bg .zxyy .button{ width: 80px; font-size: 14px; line-height: 32px; height: 36px;} .tc_bg .btn_list{padding-top: 20px;} .tc_bg .btn_list a.btn2{ font-size: 16px; height: 40px; line-height: 36px;} .tc_bg .con_2{ padding-top: 60px;} .tc_bg .h2_tit{ font-size: 22px; padding: 80px 0 14px 0; } .tc_bg .h3_txt{ font-size:16px;} } .news_max_list .page{ display: flex; justify-content: center; flex-wrap: wrap;} .news_max_list .page div{ font-size: 15px; color: hsla(0,0%,15%,0.80); background: #fff; box-shadow: 0 0 10px hsla(0,0%,0%,0.05);border-radius: 3px; border: none;margin: 0 3px;padding: 8px 12px; } .news_max_list .page div:hover, .news_max_list .page div.active{ border: none; background: #0FB4BD; color: #fff;} .news_max_list .page div a{color:hsla(0,0%,15%,0.80); line-height: 24px;} .news_max_list .page div.active a,.news_max_list .page div:hover a{color: #fff;} #btn_baiduqiao{ position: relative;} #btn_baiduqiao .gr{ width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 5; display: none;} #btn_baiduqiao .gr input{ display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; opacity: 0; border: none;} #btn_baiduqiao .gr textarea{ display: block; width: 0; height: 0; overflow: hidden;} .biaoqoan{ display: flex; justify-content: space-between; padding-top: 140px; width: 80%; margin: auto;} .biaoqoan .h1{ display: block; font-size: 24px; margin-bottom: 15px; color: #000;} .biaoqoan a{ display: block; margin-bottom:10px; line-height:30px;font-size:14px; color:#666; padding:0 15px; border:1px solid #cccccc; margin-right:10px;} .biaoqoan a:hover{ border:1px solid #131415; color:#fff; background: #131415;} .biaoqoan .pull-left{ width: 65%;} .biaoqoan .pull-right{ width: 25%;} .biaoqoan .more{ display: flex; justify-content: flex-start; flex-wrap: wrap;} @media screen and (max-width:758px){ #btn_baiduqiao .gr{ display: block;} body .footer .footy_opem{ display: none;} body .footer{ min-height: auto!important;} .biaoqoan{ padding: 60px 20px; display: block; width: auto;} .biaoqoan .pull-left, .biaoqoan .pull-right{ width: auto;} .biaoqoan .h1{ font-size: 18px; font-weight: bold; line-height: 30px;} .biaoqoan a{ line-height: 28px; padding: 0 8px; margin-right: 8px; margin-bottom: 8px; font-size: 12px;} .biaoqoan .pull-right{ margin-top: 50px;} } .news_max_data .left_l .icon .li3 .p a, .news_max_data .left_l .data a{ color: #25c4d1; color: hsla(0,0%,7%,0.90);} .news_max_data .left_l .icon .li3 .p a:hover, .news_max_data .left_l .data a:hover{ text-decoration: underline;color: #25c4d1;} .news_max_data .left_l .data p{ font-size: 14px; line-height: 24px; margin-bottom: 27px; letter-spacing: 2px;} .biaotbov{ font-size: 15px; line-height: 30px; padding-left: 26px; background: url(../image/6.png) no-repeat left center; background-size: 20px auto; display: flex; margin-bottom: 30px;} .biaotbov a{ font-size: 15px; color: #25c4d1; margin-right: 10px;} .biaotbov a:hover{ text-decoration: underline;} .moresbox{ position: absolute; top: 0;left: 50%;transform: translateX(-50%);z-index: 5;} .news_max_data .left_l .icon .mores{position: relative;z-index: 5;margin-top: 35px;background: #fff;width: 130px;border: 1px solid #ebebeb;box-shadow: 0 5px 20px hsl(0deg 0% 7% / 10%);padding: 6px 0;display: none;} .news_max_data .left_l .icon .li:hover .mores{ display: block;} .news_max_data .left_l .icon .mores::after{ width: 16px; height: 16px; background: #fff; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); z-index: -1; content: '';} .news_max_data .left_l .icon .mores button{ width: 100%; height: 40px; background: #fff; border: none; border-radius: 0; display: flex; justify-content: flex-start; align-items: center; font-size: 14px; color: #8590a6; padding: 0 0 0 18px; transition: all 0.5s;} .news_max_data .left_l .icon .mores .lis1{ display: flex; box-sizing: border-box;} .news_max_data .left_l .icon .mores .lis svg{ transform: scale(0.75); margin-right: 3px;} .news_max_data .left_l .icon .mores .lis .v img{ display: block; width: 94px; margin: 0 20px;} .news_max_data .left_l .icon .mores .lis1:hover button{ cursor: pointer; background: #f6f6f6;} .news_max_data .left_l .icon .li{ position: relative;}