/*e_IndexOrdinaryStyleBox-001*/ .e_IndexOrdinaryStyleBox-001{ /* position: absolute;*/ width: 100%; height: auto; width-uint:%; } /*stylebox_top*/ .e_IndexOrdinaryStyleBox-001 .stylebox_top{ background-color: transparent; } /*stylebox_link*/ .e_IndexOrdinaryStyleBox-001 .stylebox_link{ color: #666666; font-size: 14px; display: table; height: inherit; border-width: 0; } .e_IndexOrdinaryStyleBox-001 .stylebox_link:hover{ color: rgba(101,190,186,1); } .e_IndexOrdinaryStyleBox-001 .stylebox_link:active{ color: rgba(101,190,186,1); } .e_IndexOrdinaryStyleBox-001 .stylebox_top{ width: auto; height: 40px; } .e_IndexOrdinaryStyleBox-001 .title_icon{ display: inline-block; vertical-align: middle; line-height: 40px; color: rgba(255,255,255,1); margin-right: 10px; font-size:medium; } .e_IndexOrdinaryStyleBox-001 .title_icon::before{ content: ""; } .e_IndexOrdinaryStyleBox-001 .title_main{ display: inline-block; vertical-align: middle; line-height: 40px; color: rgba(255,255,255,1); font-weight: normal; font-size: 16px; max-width: 600px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .e_IndexOrdinaryStyleBox-001 .title_sub{ display: inline-block; vertical-align: middle; line-height: 40px; color: rgba(255,255,255,1); font-size: 14px; font-weight: normal; margin-left: 10px; } .e_IndexOrdinaryStyleBox-001 .stylebox_title{ display: inline-block; width: auto; height: inherit; background-color: rgba(101, 190, 186, 1); padding-left: 15px; padding-right: 15px; font-size: 0; vertical-align: bottom; white-space: nowrap; } .e_IndexOrdinaryStyleBox-001 .stylebox_link{ float: right; vertical-align: middle; margin-right: 15px; } .e_IndexOrdinaryStyleBox-001 .stylebox_link a{ color: inherit; display: table-cell; vertical-align: middle; } .e_IndexOrdinaryStyleBox-001 .link_icon{ display: inline-block; margin-left: 5px; } .e_IndexOrdinaryStyleBox-001 .link_icon::before{ content: '\e6af'; } .e_IndexOrdinaryStyleBox-001 .stylebox_top_line{ height: 1px; background-color: rgba(240,240,240,1); } .e_IndexOrdinaryStyleBox-001 .stylebox_content { border-style: solid; border-width: 1px; border-color: #f0f0f0; width: 100%; height: calc(100% - 48px); width-uint:%; } .e_IndexOrdinaryStyleBox-001 .stylebox_bottom_line{ height: 1px; background-color: rgba(240,240,240,1); }/*图片标题列表*/ .w_img-001 .p_title{ display:inline-table; margin:0; min-width:37px; padding:0; color:rgba(51,51,51,1); font-size:16px; font-weight:400; cursor:pointer; } .w_img-001 .p_title .font{ vertical-align:middle; line-height: 21px; } .w_img-001 .p_title:hover{ color:rgba(87,177,173,1); } .w_img-001 .p_title:active{ color:rgba(69,165,161,1); } .w_img-001 .p_title .iconfont:before{ display: inline-block; content:""; }/*单张正文图片边框*/ .w_img-001 .p_dimage{ padding:0; border-width:0px; border-style:solid; border-color:rgba(228,228,228,1); background-color: transparent; overflow: hidden; } .w_img-001 .p_dimage:hover{ border-width:0px; border-style:solid; border-color:rgba(228,228,228,1); background-color: transparent; } .w_img-001 .p_dimage:active{ border-width:0px; border-style:solid; border-color:rgba(228,228,228,1); background-color: transparent; } /*普通短链接*/ .e_title.w_img-001 .p_link002{ display:inline-block; padding:0; color:#707070; font-size:14px; text-align:left; } .e_title.w_img-001 .p_link002{ white-space:nowrap; vertical-align:middle; line-height: 19px; } a>.e_title.w_img-001 .p_link002:hover{ text-decoration:underline; font-weight:bold; cursor:pointer; color: #60a9d7; } a>.e_title.w_img-001 .p_link002:active{ color:#60a9d7; font-weight:400; } a>.e_title.w_img-001 .p_link002:active{ text-decoration:none; margin-top:0; } .e_title.w_img-001 .p_link002 .iconfont:before{ display: inline-block; content:""; } /*普通短链接*/ .e_title.w_img-001 .p_link001{ display:inline-block; padding:0; color:#707070; font-size:14px; text-align:left; } .e_title.w_img-001 .p_link001{ white-space:nowrap; vertical-align:middle; line-height: 19px; } a>.e_title.w_img-001 .p_link001:hover{ text-decoration:underline; font-weight:bold; cursor:pointer; color: #60a9d7; } a>.e_title.w_img-001 .p_link001:active{ color:#60a9d7; font-weight:400; } a>.e_title.w_img-001 .p_link001:active{ text-decoration:none; margin-top:0; } .e_title.w_img-001 .p_link001 .iconfont:before{ display: inline-block; content:""; } /*无效果/分组*/ .w_img-001 .p_box{ margin:0; width: 236px; height:317px; padding:0; border-width:1px; border-style: none; border-color:rgba(228,228,228,0); background-color:transparent; overflow: hidden; } .w_img-001{ position:absolute; width:280px; height:250px; } .w_img-001 .animated{ width:100%; height:100%; } .w_img-001 .font { white-space: nowrap; } .w_img-001 .p_link001{ width:100%; height:calc(100% - 30px); } .w_img-001 .p_link002{ width:100%; height:30px; } .w_img-001 .p_box{ width: 100%; height: 100%; text-align:center; } .w_img-001 .p_dimage{ height: inherit; overflow: hidden; font-size: 0; } .w_img-001 .e_image:hover:after { background: transparent; }@CHARSET "UTF-8"; *{ padding: 0; margin: 0; }/*page property_start*/.pagebox,#-remove--flag{margin:0px auto;}/*page property_end*//*page property_start*/body,#-remove--flag{}/*page property_end*/ .topNav { position: fixed ; position: absolute; z-index: 99999; width:100%; } .logo { padding:30px 0 0 20px; float:left; } .nav { padding:30px 0 0 20px; float:right; } .nav li { display:inline-block; } .nav li a:hover{ color:#f00; } .nav li a { display:block; padding:10px 30px; color: #fff; text-decoration: none; font-size: 16px; } #bg1 video { filter:brightness(85%); width:100%; height: 100%; object-fit: cover; } .content { width: 1200px; height: 500px; left:0; right:0; top:0; bottom:0; margin:auto; position:absolute; text-align:center; } .bigLogo { margin-top:50px; } .content>p { margin-top:80px; font:600 42px "微软雅黑"; color:#fff; } /***biglogo区域开始***/ .bigLogoWrap { width: 320px; height: 330px; position: absolute; display: inline-block; left: 0; right: 0; bottom: 0; top: 0; margin: auto } .bigLogo { position: absolute; transform-origin:top; transform:rotateX(-90deg); width: 60%; top: 0; left: 0; right: 0; bottom: 0; height: 60px; margin: auto; opacity:0; transition:all 1s linear 1s; } .bigLogo img { width:100%; } .bigLogoRotate { width: 250px; height: 250px; border1: #fff 1px solid; position: absolute; left: 50%; margin-left: -125px; top: 50%; margin-top: -125px; transform:rotate(45deg); } .bigLogoRotate li:nth-child(1) { position: absolute; width: 0; height: 1px; background: #fff; transition: all 1s linear 0.8s; } .bigLogoRotate li:nth-child(2) { position: absolute; width: 1px; height: 0; right:0; background: #fff; transition: all 1s linear 0.6s; } .bigLogoRotate li:nth-child(3) { position: absolute; width: 0; height: 1px; bottom:0; background: #fff; transition: all 1s linear .4s; } .bigLogoRotate li:nth-child(4) { position: absolute; width: 1px; height: 0; left:0; background: #fff; transition: all 1s linear .2s; } .rotateLongLine,.rotateShortLine,.rotateStaticLine { height:290%; width:1px; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; } .rotateStaticLine { height:200%; } .rotateLongLine { opacity:0; transition:opacity 1s ease 1s; animation:rotateLine 10s linear 0s infinite; } .rotateShortLine { height:250%; opacity:0; transition:opacity 1s ease 1s; animation:rotateLine 20s linear 0s infinite; } .rotateLongLine:after,.rotateShortLine:after,.rotateStaticLine:after { content:""; height:6%; width:100%; position:absolute; top:0; background:#fff; } .rotateLongLine:before,.rotateShortLine:before,.rotateStaticLine:before { content:""; height:6%; width:100%; position:absolute; bottom: 0; background:#fff; } .rotateStaticLine:after,.rotateStaticLine:before { height:0%; transition:all 1s linear 0s; } /***效果****/ .active .bigLogoRotate li:nth-child(1) { position: absolute; width: 100%; height: 1px; background: #fff; transition: all 1s linear 2s; } .active .bigLogoRotate li:nth-child(2) { position: absolute; width: 1px; height: 100%; right:0; background: #fff; transition: all 1s linear 3s; } .active .bigLogoRotate li:nth-child(3) { position: absolute; width: 100%; height: 1px; bottom: 0px; right: 0px; background: #fff; transition: all 1s linear 4s; } .active .bigLogoRotate li:nth-child(4) { position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; background: #fff; transition: all 1s linear 5s; } .active .bigLogo { opacity:1; transform:rotateX(0deg); transition:all 1s ease 1s; } .active .rotateLongLine, .active .rotateShortLine { opacity:1; transition:opacity 1s ease 1s; } .active .rotateStaticLine:after,.active .rotateStaticLine:before { height:20% ; transition:all 1s ease 6s; } @keyframes rotateLine { 0% { transform:rotate(0); } 50% { transform:rotate(90deg); } 0% { transform:rotate(180deg); } } /******第一屏css结束******/ .company>p { color:white; font-size:14px; text-align:center; line-height:30px; margin-top:60px; margin-bottom:80px; } .company { transform:translate(0,-300px); opacity:0; transition: all 2s ease 0s; } /**公司简介结束**/ .rotateWrap { transition: all 1s ease 0.6s; display:flex; justify-content:space-around; width:1200px; } .rotateClose { width: 270px; height: 270px; background1: #4E4E4E; position: relative; text-align: center; display: inline-block; transition: all 0.8s ease 0s; } .productRotate { width: 185px; height: 185px; position: absolute; top: 50%; margin-top: -92px; left: 50%; margin-left: -93px; transform: perspective(1000px) rotate(45deg); transition: all 0.8s ease 0s; } .productRotate li { transform:rotate(40deg); opacity:0; visibility:hidden; } .productRotate li:nth-child(1) { position: absolute; width: 100%; height: 1px; background: #fff; transition: all 1.5s ease 1.8s; } .productRotate li:nth-child(2) { position: absolute; width: 1px; right:0; height: 100%; background: #fff; transition: all 1.5s ease 1.2s; } .productRotate li:nth-child(3) { position: absolute; width: 100%; height: 1px; bottom:0; background: #fff; transition: all 1.5s ease 0.8s; } .productRotate li:nth-child(4) { position: absolute; width: 1px; height: 100%; background: #fff; transition: all 1.5s ease 0.4s; } .rotateContent { position:absolute; width:100%; top:0; bottom:0; height:30%; margin:auto 0; text-align:center; display:block; opacity:0; cursor:pointer; z-index: 2; transition: all 4s ease .7s; } .rotateContent p { color:white; padding:5px 0; } .line { height: 1px; width: 100px; margin:auto; transition:all .7s ease-in-out; background: #FFFFFF; position: relative; } /*效果**/ .active .company { transform:translate(0,0); opacity:1; transition: all 2s ease 1s; } .active .rotateWrap li { transform:rotate(0); opacity:1; visibility:visible; } .rotateClose:hover .productRotate { transform: perspective(1000px) rotateX(0deg) rotateY(180deg) rotate(45deg); } .active .rotateContent { opacity:1; } .rotateClose:hover .line { width: 150px; } .active .productRotate li:nth-child(1) { transition: all 1.5s ease 1.5s; } .active .productRotate li:nth-child(2) { transition: all 1.5s ease 1.9s; } .active .productRotate li:nth-child(3) { transition: all 1.5s ease 2.3s; } .active .productRotate li:nth-child(4) { transition: all 1.5s ease 2.7s; } /***第二屏结束***/ /*.solution { width:100%; height:100%; background:rgba(255,255,255,0); text-align:left; display:flex; justify-content:space-between; align-content: space-between; flex-wrap: wrap; transition:all 0.5s ease 0s; } .solution li { position:relative; overflow:hidden; text-align:center; cursor:pointer; transform: perspective(1000px) scale(1) rotateY(-90deg); -webkit-transform: perspective(1000px) scale(1) rotateY(-90deg); transform-origin: right; } .solution li:nth-child(1) { width:600px; height:290px; background:#000; transition:all 1s ease 0.9s; } .solution li:nth-child(2) { width:290px; height:290px; background:#000; text-align:left; transition:all 1s ease 0.5s; } .solutionTitle { font:bold 24px "微软雅黑"; color:#fff; padding:0 15px; margin-top:20px; } .solutionTitle p { margin-top:20px; font:200 14px/24px "微软雅黑"; } .solution li:nth-child(3) { width:290px; height:290px; transition:all 1s ease 0.2s; } .solution li:nth-child(4) { width:290px; height:290px; transition:all 1s ease 1.8s; } .solution li:nth-child(5) { width:290px; height:290px; transition:all 1s ease 1.5s; } .solution li:nth-child(6) { width:600px; height:290px; transition:all 1s ease 1.2s } .shade { position:absolute; top:100%; width:100%; height:100%; opacity:0; visibility:hidden; background:rgba(0,0,0,0.7); transition:all .5s ease-in-out; } .before { top:100%; left: 0; right: 0; position:absolute; font:bold 24px "微软雅黑"; color:#fff; opacity:0; transition:all .5s ease-in-out 0.5s; } .after { cursor:pointer; bottom:100%; left: 0; right: 0; border: 1px solid #fff; display: block; width: 120px; height: 40px; margin: auto; position: absolute; font: 14px/40px "微软雅黑"; color: #fff; opacity:0; transition:all .5s ease-in-out 0.5s; }*/ .popWrap { position:absolute; width:100%; height:100%; left:0; top:0; z-index:0; } .popTitle { font-size:16px; } .popContent { margin-top:10px; font-size:15px; } .pop { position:absolute; width:15px; height:15px; top: 45.5%; left: 18.2%; color:white; cursor:pointer; border-radius:50%; text-align:center; opacity:0; transition:all 2s ease-in-out 3s; visibility:hidden; background:rgba(255, 193, 7,1); } .pop:after { content:""; display:block; border-radius:50%; width:100%; height:100%; animation:scale 2s ease-out infinite; background: rgba(255, 193, 7,.5); z-index:-1; } .popWrap div.pop:nth-of-type(2) { top: 45%; left: 33.5%; } .popWrap div.pop:nth-of-type(3) { top: 41%; left: 59%; } .popWrap div.pop:nth-of-type(4) { top: 35%; left: 66.2%; } .popWrap div.pop:nth-of-type(5) { top: 15%; left: 53%; } .popWrap div.pop:nth-of-type(6) { top: 29%; left: 73%; } .popWrap div.pop:nth-of-type(7) { top: 79.4%; left: 42%; } .popWrap div.pop:nth-of-type(8) { top: 69%; left: 33.5%; } .popWrap div.pop:nth-of-type(9) { top: 31.4%; left: 79.5%; } .popWrap div.pop:nth-of-type(10) { top: 29.4%; left: 83.5%; } .popWrap div.pop:nth-of-type(11) { top: 51.4%; left: 43.5%; } .popFrame { width:250px; padding:10px; position:absolute; bottom:200%; left: -117px; visibility:hidden; opacity:0; z-index:2; transition:all 1s ease-in-out; background:rgba(0,0,0,.5); } .popFrame:after { content:""; border:10px solid transparent; border-top-color: rgba(0,0,0,.5); position:absolute; top:100%; left:50%; margin-left:-10px; } .popWrap div.pop:nth-of-type(5) .popFrame { top:200%; bottom:auto; } .popWrap div.pop:nth-of-type(5) .popFrame:after { top:auto; bottom:100%; border-bottom-color: rgba(0,0,0,.5); border-top-color: rgba(0,0,0,0); } /**动画效果**/ .pop:hover .popFrame,.active .pop { visibility:visible; opacity:1; } @keyframes scale { 0% { transform:scale(1,1); } 50% { transform:scale(1.5,1.5); } 100% { transform:scale(1,1); } } /*.active .solution { background:rgba(255,255,255,1); transition:all 1s ease-in-out 2s; } .solution li:hover .shade { top:0; opacity:1; visibility:visible; } .solution li:hover .shade .before { top:80px; opacity:1; } .solution li:hover .shade .after { bottom:70px; opacity:1; } .active .solution li { transform: perspective(1000px) scale(1) rotateY(0deg); -webkit-transform: perspective(1000px) scale(1) rotateY(0deg); transform-origin: right; opacity: 1; } .shade .after:hover { transition-delay:0s; color:#000; background: #fff; }*/ /**********第三屏结束****************/ .wrapper{ width: 100%; transform:translate(0,600px); opacity:0; transition:all 2s ease 0s; margin: 120px auto 120px auto; max-width: 80rem; } .cols{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .col{ width: calc(100%/3 - 2rem); margin: 1rem; cursor: pointer; } .container{ -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; perspective: 1000px; } .front, .back{ background-size: cover; background-position: center; -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: center; min-height: 400px; height: auto; border-radius: 10px; color: #fff; font-size: 1.5rem; } .back{ background: #cedce7; background: -webkit-linear-gradient(45deg, #cedce7 0%,#596a72 100%); background: -o-linear-gradient(45deg, #cedce7 0%,#596a72 100%); background: linear-gradient(45deg, #cedce7 0%,#596a72 100%); } .front:after{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; content: ''; display: block; opacity: .6; background-color: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 10px; } .container:hover .front, .container:hover .back{ -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); } .back{ position: absolute; top: 0; left: 0; width: 100%; text-align:left; } .inner{ -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94); transform: translateY(-50%) translateZ(60px) scale(0.94); top: 50%; position: absolute; left: 0; width: 100%; padding: 2rem; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 1px solid transparent; -webkit-perspective: inherit; perspective: inherit; z-index: 2; } .container .back{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .container .front{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .container:hover .back{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .container:hover .front{ -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .container a .front .inner p{ font-size: 2rem; margin-bottom: 2rem; position: relative; } .front .inner p:after{ content: ''; width: 4rem; height: 2px; position: absolute; background: #C6D4DF; display: block; left: 0; right: 0; margin: 0 auto; bottom: -.75rem; } .front .inner span{ color: rgba(255,255,255,0.7); font-family: 'Montserrat'; font-weight: 300; } @media screen and (max-width: 64rem){ .col{ width: calc(33.333333% - 2rem); } } @media screen and (max-width: 48rem){ .col{ width: calc(50% - 2rem); } } @media screen and (max-width: 32rem){ .col{ width: 100%; margin: 0 0 2rem 0; } } /***动画效果***/ .active .wrapper { transform:translate(0,0); opacity:1; transition:all 2s ease 1s; } /******第四屏结束****/ .connect { width:1200px; margin:150px auto 0 auto; height:305px; overflow:hidden; } .connect li { float:left; list-style:none; transform: perspective(1000px) scale(1) rotateY(90deg); -webkit-transform: perspective(1000px) scale(1) rotateY(90deg); transform-origin: left; opacity: 0; } .connect li:nth-child(1) { transition:all 1s ease 0.2s; } .connect li:nth-child(2) { transition:all 1s ease 0.5s; } .connect li:nth-child(3) { transition:all 1s ease 0.8s; } .connect li:nth-child(4) { transition:all 1s ease 1.1s; } .active .connect li { transform: perspective(1000px) scale(1) rotateY(0deg); -webkit-transform: perspective(1000px) scale(1) rotateY(0deg); transform-origin: left; opacity: 1; }