.city-wrapper{position:fixed;width:100%;height:100%;left:0;top:0;z-index:10}.city-wrapper:after,.city-wrapper:before{position:absolute;width:100%;height:100%;left:0;top:0;content:"";display:block;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .3s cubic-bezier(.75,.02,.5,1);transition:all .3s cubic-bezier(.75,.02,.5,1)}.city-wrapper:before{background-color:#fdb813}.city-wrapper:after{background-color:#2da44a;-webkit-transition-delay:.1s;transition-delay:.1s}.city-wrapper.show:after,.city-wrapper.show:before{-webkit-transform:translateX(0);transform:translateX(0)}.city-wrapper.show .city-container{opacity:1}.city-wrapper.show .city-container .city-bg,.city-wrapper.show .city-container .city-content{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}.city-wrapper .city-container{width:100%;padding-left:25%;position:relative;z-index:3;background-size:cover;background-position:-37.5vw}.city-wrapper .city-container,.city-wrapper .city-container .city-bg{height:100%;opacity:0;-webkit-transition:all .5s cubic-bezier(.75,.02,.5,1) .5s;transition:all .5s cubic-bezier(.75,.02,.5,1) .5s}.city-wrapper .city-container .city-bg{width:75%;background-color:#191c1e;position:fixed;right:0;top:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.city-wrapper .city-container .city-bg .city-name{position:absolute;line-height:1;top:9.1rem;left:calc(50% - 1.25rem);-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:10rem;-webkit-text-stroke:1px #fff;-webkit-text-fill-color:transparent;font-weight:700;white-space:nowrap;opacity:.3;z-index:1}.city-wrapper .city-container .city-content{width:100%;height:100%;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0;-webkit-transition:all .5s cubic-bezier(.75,.02,.5,1) .5s;transition:all .5s cubic-bezier(.75,.02,.5,1) .5s;position:relative;padding:5.6rem 2.5rem 5.6rem 0;overflow:auto}.city-wrapper .city-container .city-content .list-title{text-align:center;line-height:.7;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:5rem;margin-top:5rem}.city-wrapper .city-container .city-content .list-title:first-child{margin-top:9.5rem}.city-wrapper .city-container .city-content .list-title .text-yellow{width:0;-webkit-transform:translateX(.5rem);transform:translateX(.5rem)}.city-wrapper .city-container .city-content .more-btn{margin:0 auto;width:12.5rem;display:block;text-transform:uppercase}.city-wrapper .city-container .city-content .list{display:grid;grid-template-columns:repeat(3,33.33%);padding:0 1rem;margin-top:2.5rem}.city-wrapper .city-container .city-content .list .case{margin:0 1rem 2rem}.city-wrapper .city-container .city-content .list .case .thumb{width:100%;padding-top:50%;background-size:cover;background-repeat:no-repeat;background-position:50%}.city-wrapper .city-container .city-content .list .case .info{padding:0 .5rem;margin-top:1rem}.city-wrapper .city-container .city-content .list .case .info .brief{margin-top:.5rem}.city-wrapper .city-container .city-content .list .case .tags .tag{background-color:#fdb813;margin-right:.5rem}.city-wrapper .city-container .city-content .list .vendor{margin:0 1rem 2rem}.city-wrapper .city-container .city-content .list .vendor .logo{width:5rem;height:5rem;background-size:cover;background-repeat:no-repeat;background-position:50%;margin:0 auto;border-radius:50%}.city-wrapper .city-container .city-content .list .vendor .logo.default{background-image:url(../../assets/img/avatar.c0d38b14.jpg)}.city-wrapper .city-container .city-content .list .vendor .info{padding:0 .5rem;margin-top:1rem;text-align:center}.city-wrapper .city-container .city-content .list .vendor .tags{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.city-wrapper .city-container .city-content .list .vendor .tags .tag{margin:0 .25rem}.city-wrapper .city-container .city-content .list .tags{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:.8rem}.city-wrapper .city-container .city-content .list .tags .tag{background-color:#fdb813}.city-wrapper.portrait .city-container{padding-left:0}.city-wrapper.portrait .city-container .city-bg{width:100%}.city-wrapper.portrait .city-container .city-content{padding-left:2.5rem}.city-wrapper.portrait .city-container .city-content .list{margin-left:-1rem;margin-right:-1rem;padding:0}