body,html{height:100%}html{width:100%}body{margin:0;padding:0;position:relative;width:100%;font-family:"Open Sans","Helvetica Neue","Microsoft Yahei",sans-serif;background:#e6e9ea}.banner,.banner::after{content:'';position:absolute;left:0;top:0;width:100%}[lang=en]{font-family:HelveticaNeue-Thin,"Helvetica Neue Thin","Helvetica Neue","Open Sans Light",Helvetica,Arial,"Lucida Grande",sans-serif}a{text-decoration:none}@keyframes pulse-border{0%{transform:translate(-50%,-50%) translateZ(0) scale(1);opacity:.7}100%{transform:translate(-50%,-50%) translateZ(0) scale(1.2);opacity:.1}}.banner{height:518px;background-image:url('https://assets.wuyuan.io/common-template/img/all/illustration/home-banner-3.png');background-size:420px;background-repeat:no-repeat;background-position:calc(100% - 50px) 90px;background-color:#081d3a;z-index:0}.banner::after{height:100%;background-color:#000;opacity:.35;z-index:2}.content{top:108px;position:relative;left:50%;width:1098px;margin-left:-549px;z-index:3;float:left;height:auto;min-height:1098px}.content .title{height:198px;width:100%;position:relative;color:#fff}.content .title span{cursor:pointer;height:48px;line-height:48px;font-size:38px;display:inline-block;margin-bottom:12px;font-weight:900;margin-right:36px;padding-bottom:2px}.content .title span.cases{cursor:text;border-bottom:solid 3px #0070ee}.content #case-viewer{width:100%;height:698px;padding:24px 32px;box-sizing:border-box;border-radius:16px;background:rgba(255,255,255,.9)}@media screen and (max-width:840px){.banner,.content::after{background-repeat:no-repeat}header.header{display:none}.banner{background-size:180%;background-position:-138px 0;height:350px}.content{width:100%;margin-left:0;left:0;top:0;height:100%}.content::after{content:'';display:block;z-index:3;position:absolute;top:128px;left:50%;margin-left:-48px;text-align:left;user-select:none;cursor:pointer;height:26px;width:96px;background-image:url('https://assets.wuyuan.io/common-template/img/all/logo-900.png');background-size:100%}.content .title{padding:24px;box-sizing:border-box;margin-top:172px;text-align:center;height:160px}.content .title span.samples{display:none}.content .title span.cases{margin-right:0;border-bottom:none}.content #case-viewer{padding:0;border-radius:0;height:518px}}.wy-footer{display:none;float:left}.case-viewer{width:1024px;height:auto}.case-viewer .case-category{width:100%;float:left;margin-bottom:12px;padding-bottom:12px;border-bottom:solid 1px #007bff}.case-viewer .case-category span{display:inline-block;text-align:center;height:30px;line-height:30px;padding:0 8px;margin:6px 3px;position:relative;color:#007bff;user-select:none}.case-viewer .case-category span a{position:relative;z-index:1;font-size:13px}.case-viewer .case-category span::after,.case-viewer .case-category span::before{content:'';position:absolute;transition:all .3s ease-in-out}.case-viewer .case-category span::before{display:inline-block;z-index:0;border-radius:16px;border:1px solid #007bff;height:100%;width:100%;left:0;top:0}.case-viewer .case-category span.selected::before,.case-viewer .case-category span:hover::before{background-color:#007bff;border:1px solid #007bff}.case-viewer .case-category span.selected,.case-viewer .case-category span:hover{color:#fff}.case-viewer .case-category span:hover::before{box-shadow:3px 2px 3px rgba(0,0,0,.15)}.case-viewer .case-category span::after{height:0;border-left:solid 1px #007bff;left:50%;bottom:-18px}.case-viewer .case-category span.selected::after{height:16px}.case-viewer .case-list{width:20%;height:500px;box-sizing:border-box;float:left;overflow-y:auto;overflow-x:hidden}.case-viewer .case-list span{display:block;height:28px;line-height:28px;width:100%;padding-right:12px;box-sizing:border-box;cursor:pointer;user-select:none;float:left;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#333;position:relative;z-index:1}.case-viewer .case-list span:hover{color:#007bff}.case-viewer .case-list span.selected{color:#007bff;font-weight:900}.case-viewer .case-list::-webkit-scrollbar{width:5px}.case-viewer .case-list::-webkit-scrollbar-track{background-color:#ddd;border-radius:2.5px}.case-viewer .case-list::-webkit-scrollbar-thumb{background-color:#c1c1c1;border-radius:2.5px}.case-viewer .case-views{width:80%;padding:0 10px;position:relative;float:left;box-sizing:border-box;height:480px;user-select:none}.case-viewer .case-views img{width:100%;display:none;border-radius:8px;border:1px solid #eee;background:#fff}.case-viewer .case-views .img-nav{position:relative;height:24px;line-height:24px;margin:0 auto 12px;width:100%;box-sizing:border-box;text-align:center}.case-viewer .case-views .img-nav i.fa-arrow-left{cursor:pointer;float:left;margin-top:4px;color:#ccc}.case-viewer .case-views .img-nav i.fa-arrow-right{float:right;cursor:pointer;margin-top:4px;color:#ccc}.case-viewer .case-views .img-nav a{display:inline-block;margin:0 4px;height:8px;width:48px;background:#ddd;opacity:.85;cursor:pointer;border-radius:4px;transition:all .3s ease-in-out}.case-viewer .case-views .img-nav a.selected{background:#007bff;opacity:.95;cursor:default;width:16px}.case-box i,.case-mask i.fa-times-circle{position:absolute;font-size:32px;cursor:pointer;color:#aaa}.case-mask{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;background:#000;z-index:9999}.case-mask i.fa-times-circle{top:4px;right:4px}.case-box{position:absolute;top:6%;left:6%;width:88%;height:88%;z-index:10000}.case-box img{width:100%;position:absolute;left:0;top:50%;transform:translateY(-50%);box-shadow:0 0 6px 1px #0073ea;border-radius:2px;transition:all .3s ease-in-out;background:#fff}.case-box i.fa-arrow-left{top:50%;left:-42px;margin-top:-18px}.case-box i.fa-arrow-right{top:50%;right:-42px;margin-top:-18px}@media screen and (max-width:840px){.case-viewer{width:100%;height:600px}.case-viewer .case-category{box-sizing:border-box;padding:0 12px;white-space:nowrap;overflow-x:auto;overflow-y:hidden}.case-viewer .case-category span{height:24px;line-height:24px;padding:0 5px}.case-viewer .case-category span a{font-size:14px}.case-viewer .case-list{width:100%;box-sizing:border-box;padding:0 12px;height:120px}.case-viewer .case-list span{line-height:30px;height:30px}.case-viewer .case-views{z-index:2;width:100%;padding:0 4px}.case-viewer .case-views .img-nav a,.case-viewer .case-views .img-nav a.selected{width:8px}}