body,html{height:100%}.banner,body{width:100%;background-color:#e8ebef}html{width:100%}body{background-position:center;margin:0;padding:0;position:relative;font-family:"Open Sans","Helvetica Neue","Microsoft Yahei",sans-serif}[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{content:'';position:absolute;left:0;top:0;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% - 120px) 30px;z-index:0}.content{top:108px;position:relative;left:50%;width:1098px;margin-left:-549px;margin-bottom:120px;z-index:3;float:left;height:auto;min-height:1098px}.content .title{height:158px;width:100%;position:relative}.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{float:left;width:100%;height:698px;padding:24px 32px;box-sizing:border-box;border-radius:16px;background:rgba(255,255,255,.9)}.content #recommendation{font-size:18px;text-align:center;cursor:pointer;color:#0070ee;margin-top:32px;position:relative;float:left;width:100%}.content #recommendation span{position:relative;display:inline-block;height:42px;line-height:42px;width:480px;font-weight:900}.content #recommendation span::after{content:"";animation:pulse-border 2s ease-out infinite;position:absolute;top:20px;left:50%;background:#fff;width:100%;border-radius:24px;height:100%}.user-comments{margin:60px 0;float:left}.user-comments:after{display:none}.user-comments .sub-title{font-size:32px;text-align:center;display:block;margin:auto}.user-comments .reviews{position:relative;width:1080px;margin:auto;display:flex}.user-comments .reviews .comments-wrap{flex:1;box-sizing:border-box;padding:24px 32px;line-height:28px;position:relative}.user-comments .reviews .comments-wrap .comments{position:relative;float:left;width:100%;height:auto}.user-comments .reviews .comments-wrap .comments i{font-size:36px}.user-comments .reviews .comments-wrap .comments i:first-child{margin-left:-18px;margin-top:-2px;float:left}.user-comments .reviews .comments-wrap .comments i:last-child{float:right}.user-comments .reviews .comments-wrap .comment-by{text-align:right;display:block;margin-top:12px;width:100%;float:left}.user-comments .reviews .comments-wrap:nth-child(2):after,.user-comments .reviews .comments-wrap:nth-child(2):before{content:'';height:200px;border-left:solid 1px #333;position:absolute;top:50%;margin-top:-100px}.user-comments .reviews .comments-wrap:nth-child(2):before{left:0}.user-comments .reviews .comments-wrap:nth-child(2):after{right:0}body[lang=en] .b-7{height:700px}body[lang=en] .b-7 .reviews .comments-wrap{font-size:14px;line-height:28px}@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;min-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}.content #recommendation span{width:92%}.user-comments{height:auto}.user-comments .reviews{width:100%;display:block}.user-comments .reviews .comments-wrap{float:left;display:block;box-sizing:border-box;margin-bottom:24px}.user-comments .reviews .comments-wrap:after,.user-comments .reviews .comments-wrap:before{display:none}}.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}}