/*公用样式*/ .m-auto{ margin-left: auto; margin-right: auto; } .hide{ display: none; } .center{ width: 1200px; margin: 0 auto; } .f_left{ float: left; } .f_right{ float: right; } .slh{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } p { margin: 0 0 10px; } .footer p{ margin: 0; } .gw-banner{ height: 840px; -webkit-background-size: cover; background-size: cover; position: relative; overflow: hidden; } .gw-bg-video { position: absolute; width: 100%; left: 0; top: 0; z-index: 0; } .gw-banner-title { margin-top: 250px; font-size: 48px; text-align: center; color: #fff; font-family: "微软雅黑", Helvetica, sans-serif; z-index: 1; width: 100%; position: absolute; } .gw-banner-desc { margin-top: 40px; color: #fffefe; text-align: center; font-size: 18px; z-index: 1; width: 100%; position: absolute; top: 37%; } .gw-creat-btn a{ display: inline-block; width: 200px; height: 60px; text-align: center; font-size: 28px; color: rgb(255, 255, 255); line-height: 60px; margin-top: 60px; font-family: '微软雅黑', Helvetica, sans-serif; z-index: 1; position: absolute; left: 45%; top: 50%; background: #e2383a; text-decoration: none; border-radius: 5px; } /*建站流程*/ .gw-process{ width: 100%; /*height: 626px;*/ box-sizing: border-box; background: #f5f5f5; overflow: hidden; padding-bottom: 80px; } .sc-border { position: absolute; width: 1200px; height: 1px; left: 0px; top: 82px; border-top: 1px solid #e4e4e4; color: red; z-index: 1; } .h1-title { display: inline-block; background: #F5F5F5; z-index: 2; position: relative; padding-left: 20px; padding-right: 20px; text-align: center; font-weight: 400; font-size: 32px; padding-top: 60px; padding-bottom: 60px; } .process-list .process-li{ width: 260px; height: 280px; border-radius: 5px; overflow: hidden; float: left; position: relative; opacity: 0; } .img_wrap{ position: absolute; top: 48px; left: 56px; width: 144px; height: 144px; box-sizing: border-box; border: solid 8px rgba(0,0,0,0.1); border-radius: 72px; background-color: transparent; } .img_box{ width: 100%; height: 100%; border-radius: 68px; background-repeat: no-repeat; background-position: center center; background-size: 66px 66px; } .process-li-top{ height: 124px; width: 100%; } .process-li-bottom{ height: 156px; overflow: hidden; background-color: #fff; } .process-li-bottom p{ margin: 0; margin-top: 70px; color: #333; font-size: 20px; text-align: center; line-height: 86px; } .process-list .process-li.icon_1{ background-color: #eb7375; } .icon_1 .img_box{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-1.png"); background-color: #e2383a; } .process-list .process-li.icon_2{ background-color: #7fb7fe; } .icon_2 .img_box{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-2.png"); background-color: #4998fd; } .process-list .process-li.icon_3{ background-color: #feb56e; } .icon_3 .img_box{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-3.png"); background-color: #fe9631; } .process-list .process-li.icon_4{ background-color: #93daa3; } .icon_4 .img_box{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-4.png"); background-color: #65ca7c; } .process-list .process-icon{ width: 52px; height: 280px; float: left; background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-5.png"); background-repeat: no-repeat; background-size: 40px 40px; background-position: center center; } /*我们的优势*/ .our_advantage{ overflow: hidden; padding-bottom: 80px; background: #fff; } .advantage-list{ width: 1191px; box-sizing: border-box; height: 460px; margin: 0 auto; } .advantage-list li{ width: 238px; height: 230px; float: left; box-sizing: border-box; border: solid 1px #E6E6E6; margin-right: -1px; background: #fff; } .advantage-list li .icon{ width: 80px; height: 80px; display: block; margin: 16px auto; background-repeat: no-repeat; background-position: center center; background-size: 60px 60px; } .advantage-list li.adv-1 .icon{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-adv-1.png"); background-size: 50px 50px; } .advantage-list li.adv-2 .icon{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-adv-2.png"); } .advantage-list li.adv-3 .icon{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-adv-3.png"); } .advantage-list li.adv-4 .icon{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-adv-4.png"); } .advantage-list li.adv-5 .icon{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-adv-5.png"); } .advantage-list li.adv-6 .icon{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-adv-6.png"); background-size: 50px 50px; } .advantage-list li.adv-7 .icon{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-adv-7.png"); } .advantage-list li.adv-8 .icon{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-adv-8.png"); background-size: 50px 50px; } .advantage-list li.adv-9 .icon{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-adv-9.png"); background-size: 50px 50px; } .advantage-list li.adv-10 .icon{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/gw-adv-10.png"); background-size: 50px 50px; } .advantage-list li:hover{ cursor: pointer; position: relative; border:solid 1px #fa686a; /*transform: scale(1.1);*/ } .advantage-list li h3{ font-size: 20px; color: #333; text-align: center; line-height: 36px; margin-bottom: 6px; font-weight: normal; font-family: '微软雅黑'; } .advantage-list li p{ text-align: center; color: #999; font-size: 12px; line-height: 20px; margin: 0 auto; width: 168px; } /*行业解决方案*/ .plan_hangye{ background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/servicebg.jpg"); -webkit-background-size: cover; background-size: cover; background-attachment: fixed; background-size: 100%; background-repeat: no-repeat; background-position: center top; position: relative; min-height: 660px; max-height: 950px; overflow: hidden; z-index: 1; } .plan_hangye div.plan_show { margin-top: 184px; font-size: 32px; text-align: center; color: #fff; font-family: "微软雅黑", Helvetica, sans-serif; } .plan_hangye p.plan_abstract { margin-top: 20px; color: #fffefe; text-align: center; font-size: 16px; } .plan_hangye div.plan_btn { text-align: center; } .plan_hangye div.plan_btn a { margin-top: 80px; } /*简单易用的编辑器*/ .editor { height: 645px; background: #f5f5f5; } .editor-text-desc{ width: 350px; height: 330px; padding: 42px 32px; background:transparent url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/aa01.png") no-repeat center center; background-size: contain; box-sizing: border-box; position: relative; opacity: 0; top: 170px; } .h3-desc-text{ font-size: 32px; font-weight: normal; color: #333333; padding-bottom: 36px; border-bottom: solid 1px #ccc; } .p-desc-text{ margin: 32px; line-height: 28px; font-size: 18px; color: #666666; } .editor-image-desc { background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/bjq.png"); background-size: cover; width: 750px; height: 492px; margin-top: 80px; position: relative; opacity: 0; } .merge { height: 645px; background: #ffffff; } /*案例展示*/ .plan_btn a{ display: inline-block; width: auto; padding: 0 30px; height: 60px; text-align: center; font-size: 24px; color: #fff; background: #E2383A; text-decoration: none; border-radius: 5px; line-height: 60px; margin-top: 60px; margin-bottom: 60px; margin-left: auto; margin-right: auto; font-family: "微软雅黑", Helvetica, sans-serif; } .example-list{ width: 100%; background: #F5F5F5; } .example-list .swiper-button-prev1,.example-list .swiper-button-next1{ top: 28%;opacity: 0.4;width: 60px;height: 60px;border-radius: 40px;background-color: #666; } .example-list .swiper-button-prev1{ left: -36px; } .example-list .swiper-button-next1{ right: -36px; } .example-list .h1-title{ padding: 72px 20px; } .example-list .sc-border{ top: 96px; } .example-list-ul{ } .example-list-li{ padding-bottom: 15px; } .example-list-li .example-div{ width: 355px; height: 260px; float: left; margin-right: 22px; margin-left: 22px; border-radius: 10px; background: #fff; position: relative; overflow: hidden; box-shadow: 0 0 10px #ddd; } .div-top{ width: 100%; height: 40px; background: #2e323d; padding: 0 14px; box-sizing: border-box; } .div-img { position: absolute; top: 40px; z-index: 10; width: 355px; height: 220px; padding: 0; box-sizing: border-box; text-align: center; } .hover-img{ position: absolute; top: 40px; left: 0; z-index: 100; width: 100%; height: 220px; padding: 50px 60px; background: rgba(0,0,0,0.5); box-sizing: border-box; display: none; } .img_left{ width: 48%; text-align: left; border-right: solid 1px #fff; } .img_right{ width: 50%; text-align: right; } .m-example-preview{ width: 28%; text-align: center;line-height: 20px;color: #fff;font-size: 14px; } .pc-example-preview{ width: 70px; margin-top: 10px; margin-right: 4px; border: solid 1px rgba(253,253,253,0.8); border-radius: 20px; text-align: center;line-height: 24px;color: #fff;font-size: 14px; } .example-img-wrap:hover .hover-img{ display: block; } .div-img img{ width: 355px; height: 220px; } .example-con-desc{ color: #fff; line-height: 40px; font-size: 18px; } .radius-point{ text-align: right; line-height: 40px; } .radius-point i{ width: 6px; height: 6px; background: #7f8186; border-radius: 6px; margin-right: 4px; display: inline-block; } /*常见问题*/ .often-problem{ height: 406px; width: 100%; box-sizing: border-box; padding-top: 70px; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/bg4.png") no-repeat center center; background-size: cover; } .problem-title{ margin: 0; line-height: normal; font-weight: normal; font-size: 32px; color: #fff; text-align: center; position: relative; margin-bottom: 60px; } .problem-title::before,.problem-title::after{ content: ""; width: 502px; height: 1px; background: #B3B3B3; position: absolute; top: 50%; } .problem-title::before{ left: 0; } .problem-title::after{ right: 0; } .problem-list li{ width: 100%; line-height: 42px; } .problem-list li a{ float: left; width: 33%; padding-left: 120px; box-sizing: border-box; font-size: 16px; color: #fff; } .problem-list li a i{ color: #fff; } .problem-list li a i:hover{ color: #fe9631; } .jump-animation{ animation: my_jump_animation .75s ease-in; -moz-animation: my_jump_animation .75s ease-in; -webkit-animation: my_jump_animation .75s ease-in; -o-animation: my_jump_animation .75s ease-in; opacity: 1!important; } @keyframes my_jump_animation{ 0%,20%,40%,60%,80%,to { animation-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1) } 0% { opacity: 0; transform: scale3d(.3,.3,.3) } to { opacity: 1; transform: scaleX(1) } } .left-animation{ animation : my_animation_left 1s ease-in ; -moz-animation : my_animation_left 1s ease-in ; -webkit-animation : my_animation_left 1s ease-in ; -o-animation : my_animation_left 1s ease-in ; opacity: 1!important;; } @keyframes my_animation_left { 0% {left:-400px; top:0px;opacity: 0;} 100% {left:0px; top:0px;opacity: 1;} } .up-animation { animation: my_up_animation 1s ease-in; -moz-animation: my_up_animation 1s ease-in; -webkit-animation: my_up_animation 1s ease-in; -o-animation: my_up_animation 1s ease-in; opacity: 1!important; } .right-animation { animation: my_animation_right 1s ease-in; -moz-animation: my_animation_right 1s ease-in; -webkit-animation: my_animation_right 1s ease-in; -o-animation: my_animation_right 1s ease-in; opacity: 1!important; } @keyframes my_animation_right{ 0% {right:-400px; top:0px;opacity: 0;} 100% {right:0px; top:0px;opacity: 1;} } @keyframes my_up_animation{ 0% {left:0px; top:400px;opacity: 0;} 100% {left:0px; top:170px;opacity: 1;} }