/*公用样式*/ .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;} } /* */ {width: 100%;clear:both;} .section .section-wrapper{width: 1210px;margin: 0 auto;text-align: center;font-weight: lighter;} .section .title{padding-top:50px;color: #333;} .section .title p.blue{font-size: 28px;line-height: 50px;color: #00b194;} .section .title p.up{font-size: 36px;line-height: 70px;color: #434A54;} .section .title p.down{font-size: 16px;line-height: 180%;padding-top: 10px;color:#82939e;} .section-1{ background: #fff; } .section-1 ul{ margin-bottom: 35px; } .section-1 li{ float: left; width: 24%; text-align: left; border-right: 1px solid #ddd;} .section-1 li:last-child{ border-right: 0 none; } .section-1 li i{ float: left; width: 61px; height: 53px; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/index_f_1.png") no-repeat; margin-right: 20px; margin-left: 40px; transition: all .4s;} .section-1 li:hover i{ transform: translate(0, -3px); } .section-1 li:nth-child(1) i{ background-position: 0 0; margin-left: 20px;} .section-1 li:nth-child(2) i{ background-position: -64px 0; } .section-1 li:nth-child(3) i{ background-position: -126px 0; } .section-1 li:nth-child(4) i{ background-position: -188px 0; } .section-1 li div{ padding-top: 10px; } .section-1 li div h3{ color: #333; transition: all .4s;} .section-1 li:hover div h3{ color: #00a2ff; } .section-1 li div h3 s{ background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/index_f_1.png") no-repeat 0px -66px; width: 31px; height: 15px; display: inline-block; margin-left: 10px;} .section-1 li div p{ color: #82939e; } .section-2{ background: #FAFAFA; padding-top: 55px; height: 590px;} .section-2 .img{ width: 621px; height: 525px; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/index_f_2_img.png") no-repeat; float: left;margin-left: -45px;} .section-2 .text{ margin-left: 615px; text-align: left} .section-2 .text .title{ padding-top: 20px; margin-bottom: 45px;} .section-2 .text .title h2{font-size: 36px;line-height: 75px;font-weight: lighter;color: #434A54;} .section-2 .text .title p{ color: #333;font-size: 16px; line-height: 28px; } .section-2 .text li{ overflow: hidden; margin-bottom: 26px; font-size: 16px; color: #82939e; line-height: 1.8;} .section-2 .text li i{ float: left; width: 42px; height: 42px; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/index_f_2_icon.png") no-repeat; margin-right: 20px; margin-top: 10px;} .section-2 .text li:nth-child(1) i{ background-position: 0 0; } .section-2 .text li:nth-child(2) i{ background-position: -47px 0; } .section-2 .text li:nth-child(3) i{ background-position: -93px 0; } .section-2 .text li div{ margin-left: 60px; } .section-2 .text li h3{ color: #333; font-weight: bold; } .section-3{ background: #fff; height: 480px; width: 100%; position: relative;} .section-3 iframe {position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .section-3 .section-wrapper{ position: relative; z-index: 2; overflow: hidden;} .section-3 .img{ width: 883px; height: 227px; margin: 75px auto 40px; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/index_f_3_text.png") no-repeat center;background-size: contain;} .section-3 .img-btn{ display: block; width: 160px; height: 60px; margin: 60px auto; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/index_f_3_btn.png") no-repeat;} .section-4{ background: #FAFAFA; } .section-4 .list1{ text-align: left; margin-right: -20px; margin-top: 35px;} .section-4 .list1 li{ float: left; width: 384px; margin-right: 20px; -webkit-transition: all .2s linear; transition: all .2s linear;} .section-4 .list1 li:hover{ -webkit-box-shadow: 0 3px 20px rgba(0,0,0,.1); box-shadow: 0 3px 20px rgba(0,0,0,.1); -webkit-transform: translate3d(0,-2px,0); transform: translate3d(0,-2px,0);} .section-4 .list1 li .intro{ padding: 37px 13px 33px 33px; color: #fff;} .section-4 .list1 li:nth-child(1) .intro{ background: #46A34B; } .section-4 .list1 li:nth-child(2) .intro{ background: #FD4F73; } .section-4 .list1 li:nth-child(3) .intro{ background: #F69200; } .section-4 .list1 .intro h3{ font-size: 24px; margin-bottom: 20px;} .section-4 .list1 .intro div{ font-size: 16px; margin-bottom: 29px;} .section-4 .list1 .intro p{ font-size: 14px; } .section-4 .list1 .product{ background: #fff; padding: 15px 25px; overflow: hidden;} .section-4 .list1 .product i{ float: left; width: 50px; height: 50px; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/index_f_4.png") no-repeat; margin-right: 18px;} .section-4 .list1 li:nth-child(1) .product i{ background-position: 0 0; } .section-4 .list1 li:nth-child(2) .product i{ background-position: -59px 0; } .section-4 .list1 li:nth-child(3) .product i{ background-position: -120px 0px; } .section-4 .list1 .product .text{ padding-top: 5px; } .section-4 .list1 .product .text h3{ font-size: 16px; color: #333;} .section-4 .list1 li:hover .product .text h3{ color: #00a2ff;} .section-4 .list1 .product .text p{ color: #82939e; } .section-4 .small-title{ margin-top: 50px; font-size: 24px; margin-bottom: 25px;} .section-4 .list2{ text-align: left; margin-right: -10px; padding-bottom: 70px;} .section-4 .list2 li{ float: left; padding: 15px; width: 200px; background: #fff; border: 1px solid #ddd; margin-right: 10px; -webkit-transition: all .2s linear; transition: all .2s linear;} .section-4 .list2 li:hover{ border-color: #00a2ff; } .section-4 .list2 li i{ width: 62px; height: 62px; float: left; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/index_f_4.png") no-repeat;} .section-4 .list2 li:nth-child(1) i{ background-position: 0 -58px; } .section-4 .list2 li:nth-child(2) i{ background-position: -78px -58px; } .section-4 .list2 li:nth-child(3) i{ background-position: -159px -58px; } .section-4 .list2 li:nth-child(4) i{ background-position: -234px -58px; } .section-4 .list2 li:nth-child(5) i{ background-position: -312px -58px; } .section-4 .list2 li .text{ margin-left: 75px; padding-top: 10px; } .section-4 .list2 li .text h3{ font-size: 16px; margin-bottom: 7px; color: #333; -webkit-transition: all .2s linear; transition: all .2s linear; } .section-4 .list2 li:hover .text h3{ color: #00a2ff; } .section-4 .list2 li .text p{ color: #82939e; white-space: nowrap;} .section-5{background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/index_f_5_bg.jpg") no-repeat top center;height:860px;} .section-5 .section-wrapper div.title{padding-bottom: 50px;} .section-5 .section-wrapper div.title h2, .section-5 .section-wrapper div.title p{color: #fff;} .section-5 .section-wrapper div.img-bg{background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/index_f_5.png") no-repeat center;height:561px;width: 975px;} .section-5 .section-wrapper div.img-bg iframe{padding-top: 32px;padding-left: 1px;} .section-6{ background: #fff; padding-bottom: 80px;} .section-6 .img{ width: 1142px; height: 531px; margin: 30px auto 0; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/css/module/images/index_f_6.png") no-repeat center; } .section-7{ background: #333333; color: #fff;} .section-7 .title h2{ color: #fff; margin-bottom: 62px;} .section-7 .swiper-slide{ width: 242px; height: 350px; background: #000; position: relative;} .section-7 .swiper-slide .img{ width: 100%;height: 100%; } .section-7 .swiper-slide .mask{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; transition: all .4s;} .section-7 .swiper-slide .mask i{ display: block; transform: translate(0, 90px); transition: all .4s; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;} .section-7 .swiper-slide .mask i img{ } .section-7 .swiper-slide .mask .text { transform: translate(0, 120px); transition: all .4s;} .section-7 .swiper-slide .mask .text h2{ font-size: 24px; margin-bottom: 5px;} .section-7 .swiper-slide .mask .qrcode{ transform: translate(0, 220px); opacity: 0; transition: all .4s;} .section-7 .swiper-slide .mask .qrcode img{ width: 120px; height: 120px; } .section-7 .swiper-slide .mask:hover{ background: rgba(255, 255, 255, .3); } .section-7 .swiper-slide .mask:hover i{ transform: translate(0, 90px); -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none;} .section-7 .swiper-slide .mask:hover .text { transform: translate(0, 110px); } .section-7 .swiper-slide .mask:hover .qrcode { transform: translate(0, 130px); opacity: 1;} .section-7 .swiper-container .swiper-button-next, .section-7 .swiper-container .swiper-button-prev{ top: 0; height: 100%; margin-top: 0; opacity: 1; background: rgba(0,0,0,.5) url("/wwwwystzxcom/template/Home/161Default/PC/Static/css/module/images/index_f7_arrow.png") no-repeat center center; width: 37px;} .section-7 .swiper-container .swiper-button-prev{ left: 0; } .section-7 .swiper-container .swiper-button-next{ right: 0; transform: rotate(180deg); } .section-7 .swiper-container:hover .swiper-button-next, .section-7 .swiper-container:hover .swiper-button-prev{ opacity: 1; } .section-7 .swiper-container .swiper-button-next:hover, .section-7 .swiper-container .swiper-button-prev:hover{background-color: rgba(0,0,0,.9);} .section-8{ background: #fff url("/wwwwystzxcom/template/Home/161Default/PC/Static/css/module/images/index_f8_bg.jpg") no-repeat center top; height: 260px; color: #fff; } .section-8 .flag{ width: 202px; height: 86px; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/css/module/images/index_f_8_flag.png") no-repeat center top; margin: 0 auto;} .section-8 .flag h2{ font-size: 24px; padding-top: 12px; } .section-8 ul{ margin-top: 42px; } .section-8 li{ float: left; width: 25%; text-align: left;} .section-8 li:nth-child(1){ width: 31%; } .section-8 li:nth-child(2){ width: 33%; } .section-8 li:nth-child(3){ width: 19%; } .section-8 li:nth-child(4){ width: 17%; } .section-8 li .num{ float: left; font-size: 72px; line-height: 1; margin-right: 30px; font-family: "Arial";} .section-8 li .info{ font-size: 24px; } .section-8 .an-tr-2-5 {-moz-transition: 2.5s ease; -o-transition: 2.5s ease; -webkit-transition: 2.5s ease } .section-8 .index-num {width: 40px; height: 54px; display: inline-block; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/css/module/images/number-min.png") no-repeat; margin-top: 10px; opacity: 1; filter: alpha(opacity=100); margin-right: -15px;} .section-8 .index-num.active {width: 40px; height: 54px; display: inline-block; background-position: 2px -660px; opacity: 0; filter: alpha(opacity=0);} .section-8 .index-num-0 {background-position: 2px 0 } .section-8 .index-num-1 {background-position: 2px -66px } .section-8 .index-num-2 {background-position: 2px -133px } .section-8 .index-num-3 {background-position: 2px -198px } .section-8 .index-num-4 {background-position: 2px -265px } .section-8 .index-num-5 {background-position: 2px -332px } .section-8 .index-num-6 {background-position: 2px -399px } .section-8 .index-num-7 {background-position: 2px -466px } .section-8 .index-num-8 {background-position: 2px -533px } .section-8 .index-num-9 {background-position: 2px -600px } .section-71{ background: #fff; padding-bottom: 70px;} .section-71 ul{ overflow: hidden; margin-top: 12px;} .section-71 li{ float: left; width: 126px; margin: 18px 37px;} .section-71 li i{ display: block; width: 126px; height: 126px; background: url("/wwwwystzxcom/template/Home/161Default/PC/Static/css/module/images/f7_icon.png") no-repeat; } .section-71 li.item1 i{ background-position: 0 0; } .section-71 li.item2 i{ background-position: -182px 0; } .section-71 li.item3 i{ background-position: -364px 0; } .section-71 li.item4 i{ background-position: -546px 0; } .section-71 li.item5 i{ background-position: -728px 0; } .section-71 li.item6 i{ background-position: -910px 0; } .section-71 li.item7 i{ background-position: 0 -180px; } .section-71 li.item8 i{ background-position: -182px -180px; } .section-71 li.item9 i{ background-position: -364px -180px; } .section-71 li.item10 i{ background-position: -546px -180px; } .section-71 li.item11 i{ background-position: -728px -180px; } .section-71 li.item12 i{ background-position: -910px -180px; } .section-71 li.item13 i{ background-position: 0 -360px; } .section-71 li.item14 i{ background-position: -182px -360px; } .section-71 li.item15 i{ background-position: -364px -360px; } .section-71 li.item16 i{ background-position: -546px -360px; } .section-71 li.item17 i{ background-position: -728px -360px; } .section-71 li.item18 i{ background-position: -910px -360px; } .section-71 li p{ font-size: 16px; } /*footer*/ /* */ #service1 { padding-bottom: 40px } #service1 ul { margin-top: 37px } #service1 ul:after { content: ""; display: block; clear: both } #service1 ul li { float: left; border: 1px solid #e4e4e4; width: 283px; height: 348px; transition: all 0.5s ease-in-out; position: relative; /* window 的Safari下会有模糊效果 因为这个动画属性引起的字体渲染问题*/ -webkit-font-smoothing:antialiased; } #service1 ul li .ysicon { width: 68px; position: absolute; height: 68px; top: 0; right: 0; background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/f1-f2.png") } #service1 ul li .ysicon.new { background-position: -152px -174px } #service1 ul li .ysicon.line { background-position: -154px -4px } #service1 ul li h3 { text-align: center; line-height: 22px; font-size: 22px; margin: 35px 0 30px; font-weight: 400 } #service1 ul li .img { height: 82px; position: relative } #service1 ul li .img .icon { height: 80px; width: 135px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/f1.png"); *position: static; *top: auto; *left: static; *right: static; *bottom: static } #service1 ul li .img .color { display: none } #service1 ul li .img .f11 { background-image: url("/wwwwystzxcom"/wwwwystzxcom/template/Home/Default/PC/Static/img/index_vhost.png""); background-position: -1px 0; } #service1 ul li .img .f12 { background-image: url("/wwwwystzxcom"/wwwwystzxcom/template/Home/Default/PC/Static/img/index_vhost.png""); background-position: -174px 0 } #service1 ul li .img .f21 { background-position: 0 -122px } #service1 ul li .img .f22 { background-position: -174px -122px } #service1 ul li .img .f31 { background-position: 0 -232px } #service1 ul li .img .f32 { background-position: -174px -232px } #service1 ul li .img .f41 { background-position: 0 -356px } #service1 ul li .img .f42 { background-position: -174px -356px } #service1 ul li .describe { margin-top: 31px } #service1 ul li .describe p { text-align: center; padding-bottom: 10px; color: #999 } #service1 ul li .details { margin-top: 10px } #service1 ul li .details a { display: block; width: 180px; box-sizing: border-box; height: 42px; border: 1px solid #e4e4e4; text-align: center; line-height: 42px; margin: 0 auto; border-radius: 4px; color: #666666 } #service1 ul li+li { margin-left: 20px } #service1 ul .shadow { border-color: #e6e6e6; box-shadow: 0 0 10px #e6e6e6 } #service1 ul .shadow .img .color { display: block } #service1 ul .shadow .img .nocolor { display: none } #service1 ul .shadow .details a { border: 0; background: #e2383a; color: #fff } #service2 { background: #f5f5f5; padding-bottom: 55px } #service2 .service-lis { position: relative; width: 600px; height: 40px; margin: 25px auto 50px; z-index: 1 } #service2 .service-lis .link:after { content: ""; display: block; clear: both } #service2 .service-lis .link li { float: left; height: 40px; width: 100px; line-height: 40px; font-size: 16px; cursor: pointer } #service2 .service-lis .link li+li { margin-left: 150px } #service2 .service-lis .link .show { font-weight: 700 } #service2 .service-lis .line { width: 100%; height: 1px; position: relative; bottom: 0; left: 0; z-index: 0; background: #d9d9d9 } #service2 .service-lis .show-line { width: 100px; position: absolute; left: 0; bottom: 0; height: 3px; background: #f00909 } #service2 .services { position: relative; z-index: 2 } #service2 .services ul:after { content: ""; display: block; clear: both } #service2 .services ul .services2-lis { float: left; position: relative; z-index: 2; width: 33.3333333333%; height: 450px; border: 1px solid #eee; box-sizing: border-box; background: #fff; transition: transform 0.25s ease-in-out; -webkit-transform: translate3d(0,0,0); *height: 480px; *width: 33% } #service2 .services ul .services2-lis .ysicon { position: absolute; right: 0; top: 0; width: 77px; height: 77px; background-image: url("/wwwwystzxcom/template/Home/161Default/PC/Static/img/f1-f2.png"); background-position: -154px -88px } #service2 .services ul .services2-lis .services2-top { padding-bottom: 18px; border-bottom: 1px solid #eee } #service2 .services ul .services2-lis .services2-top h2 { padding: 30px 0 5px; text-align: center; font-weight: 400; font-size: 26px } #service2 .services ul .services2-lis .services2-top p { text-align: center; font-size: 12px; color: #999 } #service2 .services ul .services2-lis .services2-datal { padding: 22px 0 } #service2 .services ul .services2-lis .services2-datal:after { content: ""; display: block; clear: both } #service2 .services ul .services2-lis .services2-datal li { float: left; height: 44px; width: 33.3333333%; box-sizing: border-box; text-align: center } #service2 .services ul .services2-lis .services2-datal li .num { font-size: 24px } #service2 .services ul .services2-lis .services2-datal li .num span { font-size: 12px } #service2 .services ul .services2-lis .services2-datal li p { color: #a9a9a9 } #service2 .services ul .services2-lis .services2-datal li+li { border-left: 1px solid #eee } #service2 .services ul .services2-lis .describe { padding-left: 25px } #service2 .services ul .services2-lis .describe li { color: #666; line-height: 20px; padding-bottom: 10px } #service2 .services ul .services2-lis .describe li .red { color: #f00909 } #service2 .services ul .services2-lis .price { padding-top: 10px } #service2 .services ul .services2-lis .price h3 { text-align: center; color: #f00909; font-size: 36px } #service2 .services ul .services2-lis .price h3 span { font-size: 14px } #service2 .services ul .services2-lis .buyButton { margin-top: 15px } #service2 .services ul .services2-lis .buyButton a { width: 178px; height: 40px; border: 1px solid #eee; text-align: center; line-height: 40px; color: #666; display: block; margin: 0 auto; border-radius: 4px } #service2 .services ul .services2-lis.now { z-index: 5; transform: scale(1.1, 1.1); border-color: #e84047; box-shadow: 0 0 10px #e84047 } #service2 .services ul .services2-lis.now .services2-top { background: #e84047 } #service2 .services ul .services2-lis.now .services2-top h2, #service2 .services ul .services2-lis.now .services2-top p { color: #fff } #service2 .services ul .services2-lis.now .buyButton a { background: #e84047; color: #fff } #service2 .services ul.box-ul { display: none } #service2 .services ul.box-ul.show { display: block }