#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}#nav{padding:30px}#nav a{font-weight:700;color:#2c3e50}#nav a.router-link-exact-active{color:#42b983}html{margin:0}body,html{width:100%}body{margin:0!important;box-sizing:border-box}.app{background:#939393}.home,.top-bg{position:relative}.top-bg{left:0;top:0;z-index:88;display:block;color:#fff;width:100%;height:auto;padding:100px 0 85px 0;background-position:top;background-repeat:no-repeat;background-size:cover;background-color:hsla(0,0%,100%,.5);box-shadow:0 5px 25px 0 rgb(180 180 180/68%)}.top-bg .title-warp{text-align:center}.top-bg .title{color:#fff;text-align:center;font-size:28px;font-weight:700;margin-bottom:15px}.top-bg .sub-title{margin-top:8px;color:#fff;font-size:14px;font-weight:700}.content{margin:0 auto;padding:0 15px;position:relative}.content .left{position:relative;width:300px;margin-top:60px;height:500px;background:#fff;border-radius:3px}.content{display:flex}.content .middle{width:80%}.content .left{width:20%}section.project{width:auto;padding:0}section header{text-align:left}.section-title{color:#256fb8;opacity:0}.section-line{position:relative;width:100%;height:5px;background:#ccc}.section-line .inner{position:absolute;left:0;top:0;display:inline-block;height:100%;width:25%;background:#256fb8}article{outline:none}.projects-container{display:grid;grid-template-columns:repeat(3,31.88%);justify-items:left;grid-row-gap:20px;grid-column-gap:20px;padding-top:15px;padding-bottom:20px}.projects-container .item{width:100%;box-sizing:border-box;border:none;outline:none;cursor:pointer;border-radius:2px;box-shadow:0 1px 3px 0 rgba(0,0,0,.33);overflow:hidden;transform:scale(1);transition:all .4s}.projects-container .item:hover{transform:scale(1.04)}.projects-container .item:nth-child(4n+1){margin-left:0}.projects-container .item .item-content{height:210px}.projects-container .item .item-content img{width:100%;height:100%}.projects-container .item .item-content img:hover{outline:none}.projects-container .item footer{padding:15px 0}.mycard{font:15px Microsoft YaHei,Arial,Helvetica,sans-serif;color:#2c3e50;margin:0;padding:0;margin-top:50px;height:500px;background:#fff;border-radius:3px;position:relative}.mycard section{margin:20px 0 20px 20px}.mycard .ewm{position:absolute;right:20px;top:30px;border:1px solid #f3f2f2}.mycard .ewm img{width:70px}.mycard i{display:block;margin:20px 0;height:150px;border-radius:3px;overflow:hidden;position:relative}.mycard i:before{content:"";position:absolute;top:0;left:-150px;width:100px;height:100%;transform:skewX(-30deg);background-image:linear-gradient(270deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0))}.mycard i:hover:before{left:340px;transition:all .5s ease-in}.mycard i img{width:100%}.mycard i.normal-show{display:block}.mycard i.phone-show{display:none}.mycard ul{padding-left:10px;vertical-align:baseline;list-style:none}.mycard ul li{position:relative;vertical-align:baseline;text-align:left;font-size:13px;line-height:24px}.mycard ul li::marker{vertical-align:baseline;position:absolute;top:0}.mycard ul li span.label{text-transform:uppercase;color:#b29f7d;width:50px;display:block;float:left}.mycard-title{color:#b29f7d;font-size:18px;letter-spacing:.3em;margin-bottom:20px}.mycard-title,.mycard-title-en{font-weight:700;text-align:left}.mycard-title-en{color:#55603d;text-transform:uppercase;font-style:italic;font-size:32px;letter-spacing:.2em}.footer{background:#333;padding:0 25px;color:#575757;font-size:14px;text-align:center;position:relative}.copyright,.copyright a{color:#fff}.box{width:1200px;margin:auto;overflow:hidden}.content .left li a{word-wrap:break-word}@media screen and (min-width:768px){.content{min-width:1200px;max-width:1300px;flex-direction:row;flex-wrap:nowrap;align-items:flex-start}.content .middle{margin-top:40px}.box-icp,.box-tec{display:inline-block}}@media screen and (max-width:768px){.content{flex-direction:column-reverse;flex-wrap:nowrap;align-self:flex-start;padding:0 5px}.content .left{width:100%;height:auto;margin-top:20px}.content .left .mycard{margin-top:0;height:auto}.content .left .mycard section{margin-left:0;margin-top:0;position:relative}.content .left .mycard i{margin-top:5px}.content .left .title-wrap{justify-content:center}.content .left .title-en-wrap,.content .left .title-wrap{display:flex;flex-direction:row;align-items:baseline}.content .left .mycard-title-en{margin-left:5px;vertical-align:bottom}.content .left .mycard-title,.content .left .mycard-title-en{font-size:20px;margin-top:5px;margin-bottom:5px}.content .left .mycard ul{list-style-type:none;margin-left:0;margin-top:80px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.mycard i{position:absolute;height:300px}.mycard i.normal-show{display:none}.mycard i.phone-show{display:block}.mycard ul li{margin-top:2px;margin-bottom:2px}.mycard ul li span.label{display:inline;float:none}.mycard ul li,.mycard ul li a,.mycard ul li span{color:#fff;font-weight:700;font-size:16px}.mycard ul li span.label{color:#fff}.mycard i img{height:100%}.content .middle{margin-top:50px;width:100%}section header{text-align:center}.content .middle .projects-container{grid-template-columns:repeat(2,48%);grid-row-gap:10px;grid-column-gap:10px;justify-content:center}.projects-container .item .item-content{height:110px}.content .middle .section-title{margin-top:15px;margin-bottom:10px}.footer .box{width:auto}.box-icp,.box-tec{display:block}}.particles-wrap{top:0;height:calc(100% - 10px);bottom:0}.content-bg,.particles-wrap{position:absolute;left:0;right:0;width:100%}.content-bg{height:100%;background:#fff}.animate__myFadeInUp{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:myFadeInUp;animation-name:myFadeInUp}@-webkit-keyframes myFadeInUp{0%{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes myFadeInUp{0%{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translateZ(0)}}.animate__myFadeInLeft{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:myFadeInLeft;animation-name:myFadeInLeft}@-webkit-keyframes myFadeInLeft{0%{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes myFadeInLeft{0%{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:translateZ(0)}}.animate__myProgressBarOn{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:progressBarOn;animation-name:progressBarOn}@-webkit-keyframes progressBarOn{0%{opacity:0;width:0}to{opacity:1;width:25%}}@keyframes progressBarOn{0%{opacity:0;width:0}to{opacity:1;width:25%}}.project-detail{position:relative}.project-detail section{width:auto;padding:0 50px}main{width:100%;box-sizing:border-box;position:relative}.project-detail section.project-info{position:relative;width:100%!important;padding:0;overflow:hidden}.head-bg{position:absolute;top:0;right:0;width:100%;height:100%;background-position:50%;background-clip:border-box}.project-info-wrap{height:auto;padding-top:50px;padding-bottom:130px;display:flex;flex-direction:column}.project-info-wrap header{margin-top:30px}.project-title{color:#fff;text-align:center;-moz-text-shadow:0 2px 5px #334960;-webkit-text-shadow:0 2px 5px #334960;text-shadow:0 2px 5px #334960}.introduction-wrap{margin-top:20px;display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative;-moz-text-shadow:0 2px 3px #334960;-webkit-text-shadow:0 2px 3px #334960;text-shadow:0 2px 3px #334960}.intr-img-wrap{width:220px;height:290px;box-shadow:0 1px 5px 5px rgba(0,0,0,.33);border-radius:2px;position:relative}.introduction-wrap.widerStyle .intr-img-wrap{width:410px;height:290px}.intr-img-wrap img{width:100%;height:100%}.intr-text-wrap{padding-bottom:40px;width:550px;font-size:15px;color:#fff;margin-left:70px;text-align:left;box-sizing:border-box;position:relative}.introduction-wrap.widerStyle .intr-text-wrap{margin-right:-10px}.intr-text{margin-top:15px}.project-detail section.screentshot-list{position:relative;padding-top:10px;padding-bottom:40px}.screentshot-list .screentshot-title{margin-bottom:0;color:#00bbd3;-moz-text-shadow:0 0 10px #c06;-webkit-text-shadow:0 0 10px #c06;text-shadow:0 1px 2px #ccc}.detail-list{display:grid;grid-template-columns:repeat(4,25%);justify-items:center}.detail-list .item{width:330px;border:none;outline:none;margin:25px 25px;cursor:pointer;transform:scale(1);transition:all .4s}.detail-list .item:hover{transform:scale(1.04)}.detail-list .item .item-content{height:210px;border-radius:2px;box-shadow:0 1px 3px 0 rgba(0,0,0,.33)}.detail-list .item .item-content .img{width:100%;height:100%;background-position:50%;background-size:100%}.detail-list .item .item-content .img:hover{outline:none}.project-detail .back-btn{height:35px;width:35px;position:fixed;cursor:pointer;right:20px;top:60px;border-radius:999px;opacity:.6;transform:scale(1);transition:all .4s}.project-detail .back-btn.hidden{opacity:0}.project-detail .back-btn:hover{background-color:#fff;transform:scale(1.5);opacity:1}.project-detail .back-btn img{width:100%;height:100%}@media screen and (max-width:768px){.introduction-wrap.widerStyle .intr-text-wrap{margin-right:0}.project-detail section{padding:0}.project-info-wrap{height:auto;display:flex;flex-direction:column;justify-content:center;padding-top:20px;padding-bottom:20px}.project-info-wrap header{margin-top:0}.project-title{font-size:20px}.introduction-wrap{flex-direction:column;margin-bottom:40px;margin-top:0}.intr-img-wrap{display:none;width:auto}.intr-text-wrap{width:100%;margin-left:0;margin-right:0;font-size:14px;padding:0 15px;text-align:left}.project-detail section.screentshot-list{padding-left:10px;padding-right:10px}.screentshot-list .title{font-size:22px}.detail-list{grid-template-columns:100%}.detail-list .item{width:100%;margin:10px 0}.detail-list .item .item-content{height:250px}.project-detail .back-btn{top:30px;right:10px}}@media screen and (min-width:768px) and (max-width:992px){.project-detail section{padding:0 25px}.detail-list{grid-template-columns:repeat(2,50%)}.detail-list .item{width:auto;margin:15px 20px}}@media screen and (min-width:992px) and (max-width:1200px){.project-detail section{padding:0 25px}.detail-list{grid-template-columns:repeat(3,33.33%)}.detail-list .item{width:300px;margin:15px}}@media screen and (min-width:1200px) and (max-width:1450px){.detail-list{grid-template-columns:repeat(3,33.33%)}}@media screen and (min-width:1450px){.project-detail section{width:1380px;margin:auto}}