@-webkit-keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes fadeInUp{
0%{opacity:0;-webkit-transform:translateY(1em);transform:translateY(1em)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{
0%{opacity:0;-webkit-transform:translateY(1em);transform:translateY(1em)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@-webkit-keyframes fadeInDown{
0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown{
0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
section[class^=about-],section[class^=meetup-landing-page-]{padding:4rem 12px;min-height:20rem;text-align:center}
section[class^=about-] .container,section[class^=meetup-landing-page-] .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:1124px}
section[class^=about-] .title,section[class^=meetup-landing-page-] .title{color:#20a890;font-size:26px}
section[class^=about-] .desc,section[class^=meetup-landing-page-] .desc{max-width:33rem;margin-left:auto;margin-right:auto;font-size:1.2rem;line-height:1.7}
section[class^=about-] .desc,section[class^=about-] .desc-en{max-width:1124px;font-size:1.2rem;margin:3rem auto;line-height:1.7}
section[class^=about-] .desc a,section[class^=about-] .desc-en a{color:#20a890}
section[class^=about-] .desc .desc-en,section[class^=about-] .desc-en .desc-en{text-align:center}
section[class^=about-] .round-corner-btn{width:220px;height:60px;background:#20a890;padding:18px;color:#fff;font-size:1.2rem;border:none;border-radius:30px;margin-top:3.5rem;position:relative;z-index:1;-webkit-box-shadow:0 0 8px #487ecb;box-shadow:0 0 8px #487ecb}
section[class^=about-] .round-corner-btn .arrow{visibility:hidden;position:absolute;top:50%;left:20%;-webkit-transform:translateY(-40%);transform:translateY(-40%);-webkit-transition:left .5s ease;transition:left .5s ease}
section[class^=about-] .round-corner-btn .text{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:left .5s ease;transition:left .5s ease}
section[class^=about-] .round-corner-btn:hover{background:#20a890;-webkit-box-shadow:none;box-shadow:none}
section[class^=about-] .round-corner-btn:hover .arrow{visibility:visible;left:30%}
section[class^=about-] .round-corner-btn:hover .text{left:60%}
.about-timeline{background:#fafafa;position:relative}
.about-timeline .time-line{height:1420px;position:absolute;left:50%;top:10rem;border-left:1px solid #20a890}
.about-timeline .time-line .start-node{position:absolute;width:15px;height:15px;border-radius:50%;background:#20a890;bottom:0;margin-left:-8px}
.about-timeline .time-line .event{position:relative;background:#fafafa;left:-30px;margin:3rem 0 4rem}
.about-timeline .time-line .event .event-detail{position:absolute;border:1px dotted #20a890;padding:1rem;left:12rem;min-width:15rem;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);text-align:left}
.about-timeline .time-line .event .event-detail .time{font-size:1.2rem;color:#20a890;font-weight:600}
.about-timeline .time-line .event .event-detail .detail{font-size:15px;margin-top:5px;line-height:1.5}
.about-timeline .time-line .event .event-detail .detail p{margin-top:.5rem;margin-bottom:.5rem}
.about-timeline .time-line .line-with-year-left::after,.about-timeline .time-line .line-with-year-right::after,.about-timeline .time-line .line-without-year-left::after,.about-timeline .time-line .line-without-year-right::after{position:absolute;content:"";border-top:1px solid #20a890;bottom:50%}
.about-timeline .time-line .line-with-year-left .node-with-year,.about-timeline .time-line .line-with-year-right .node-with-year,.about-timeline .time-line .line-without-year-left .node-with-year,.about-timeline .time-line .line-without-year-right .node-with-year{border:1px solid #20a890;border-radius:30px;color:#20a890;padding:5px 10px;font-size:13px;position:relative;width:60px}
.about-timeline .time-line .line-with-year-left .node-without-year,.about-timeline .time-line .line-with-year-right .node-without-year,.about-timeline .time-line .line-without-year-left .node-without-year,.about-timeline .time-line .line-without-year-right .node-without-year{border-left:1px solid #20a890;height:10px;margin-left:29px}
.about-timeline .time-line .line-with-year-right::after{width:8rem;left:60px}
.about-timeline .time-line .line-without-year-right::after{width:calc(8rem + 30px)}
.about-timeline .time-line .line-with-year-left .event-detail{right:12rem;left:auto}
.about-timeline .time-line .line-with-year-left::after{right:60px;width:8rem}
.about-timeline .time-line .line-without-year-left .event-detail{right:12rem;left:auto}
.about-timeline .time-line .line-without-year-left::after{right:30px;width:calc(8rem + 30px)}
.about-company{min-height:auto!important}
.about-company .desc{margin:0 auto!important;text-align:justify}
.about-company-en{background:#fafafa}
.about-founders{background:#fff}
.about-founders .image-wrap{max-width:26rem;margin:4.5rem auto 0}
.about-founders .image-wrap img{display:block;width:100%}
.about-culture{background:#fafafa}
.about-culture .desc{text-align:justify}
.about-culture .details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%}
.about-culture .details .desc{text-align:center}
.about-culture .details h3{font-size:1rem;margin:8px 0;color:#20a890}
.about-culture .details p{max-width:10.5rem;margin:2px auto;font-weight:400}
.about-culture .details .item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-top:3rem;width:33%}
.about-culture .details .item-short p{max-width:7.5rem}
.about-culture .details .image-wrap .icon{height:100px;vertical-align:middle}
.about-culture .details .image-wrap .icon-m{height:40px}
.about-culture .details .image-wrap .icon-s{height:36px}
.about-contact{background:#fff;position:relative}
.about-contact .info{padding:3rem 0;font-size:1.2rem;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;line-height:1.7;position:relative;-ms-flex-pack:distribute;justify-content:space-around}
.about-contact .info .col{width:55%;text-align:left;position:relative;padding:0 0 20px 0}
.about-contact .info .col::after{content:" ";position:absolute;right:0;top:0;width:1px;padding:5rem 0;background:#bfbfbf;margin-left:125px;height:15%}
.about-contact .info .office-info{padding:4px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}
.about-contact .info .col2{text-align:left;line-height:1.7;height:100%}
.about-contact .info .office-name{font-weight:600}
.about-contact .info .item{margin-bottom:1.2rem;position:relative;padding:0 2rem 0 0}
.about-contact .info-2{display:none}
.about-contact .info-en{font-size:.7rem;width:auto}
.about-contact .info-en .row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
.about-contact .info-en::before{display:none}
.about-contact .info-en .item{padding-right:2.4rem}
.about-contact .info-en .item h3{margin:0 0 6px;font-size:.7rem;font-weight:600}
.about-contact .info-en .item::before{content:" ";position:absolute;top:2px;left:-12px;width:2px;height:40px;background:#20a890}
.about-contact .info-en .item-long{padding-right:0}
.mobile-map,.pc-map{width:100%;margin:2rem;position:relative}
.mobile-map img,.pc-map img{width:100%;height:100%}
.mobile-map .m-office,.pc-map .m-office{position:absolute;border-radius:50%;width:13px;height:13px;background:#20a890}
.mobile-map .m-office button,.pc-map .m-office button{position:absolute;width:88px;background:#20a890;border:none;color:#fff;padding:10px 10px;border-radius:4px;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}
.mobile-map .m-office .line,.pc-map .m-office .line{position:absolute;border:1px solid #20a890}
.mobile-map .m-office-hovered button,.pc-map .m-office-hovered button{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-box-shadow:1px 1px 10px #bfbfbf;box-shadow:1px 1px 10px #bfbfbf}
.mobile-map .m-silicon .line,.pc-map .m-silicon .line{-webkit-transform-origin:left;transform-origin:left;top:6px;left:6px;width:100px;-webkit-transform:rotate(125deg);transform:rotate(125deg)}
.mobile-map .m-silicon button,.pc-map .m-silicon button{left:-131px;top:75px}
.mobile-map .m-beijing .line,.pc-map .m-beijing .line{-webkit-transform-origin:left;transform-origin:left;top:6px;left:6px;width:160px;-webkit-transform:rotate(315deg);transform:rotate(315deg)}
.mobile-map .m-beijing button,.pc-map .m-beijing button{left:115px;top:-115px}
.mobile-map .m-shanghai .line,.pc-map .m-shanghai .line{-webkit-transform-origin:left;transform-origin:left;top:6px;left:6px;width:120px}
.mobile-map .m-shanghai button,.pc-map .m-shanghai button{left:120px;top:-10px}
.mobile-map .m-hangzhou .line,.pc-map .m-hangzhou .line{-webkit-transform-origin:left;transform-origin:left;top:6px;left:6px;width:170px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.mobile-map .m-hangzhou button,.pc-map .m-hangzhou button{left:120px;top:100px}
.mobile-map .m-chengdu .line,.pc-map .m-chengdu .line{-webkit-transform-origin:left;transform-origin:left;top:6px;left:6px;width:90px;-webkit-transform:rotate(145deg);transform:rotate(145deg)}
.mobile-map .m-chengdu button,.pc-map .m-chengdu button{left:-130px;top:55px}
.mobile-map .m-guangzhou .line,.pc-map .m-guangzhou .line{-webkit-transform-origin:left;transform-origin:left;top:6px;left:6px;width:120px;-webkit-transform:rotate(125deg);transform:rotate(125deg)}
.mobile-map .m-guangzhou button,.pc-map .m-guangzhou button{left:-100px;top:100px}
.mobile-map .m-shenzhen .line,.pc-map .m-shenzhen .line{-webkit-transform-origin:left;transform-origin:left;top:6px;left:6px;width:170px;-webkit-transform:rotate(60deg);transform:rotate(60deg)}
.mobile-map .m-shenzhen button,.pc-map .m-shenzhen button{left:90px;top:140px}
.mobile-map{display:none}
.underline{color:#20a890}
.underline .office-addr{text-decoration:underline}
.floating-ele{width:100%;position:relative;min-height:14rem}
.floating-ele img{position:absolute}
.floating-ele .ele1{top:2rem;left:10%;width:16px;-webkit-animation:angleMove1 3s infinite .5s alternate;animation:angleMove1 3s infinite .5s alternate}
.floating-ele .ele2{top:10rem;left:15%;-webkit-animation:angleMove2 2s infinite alternate;animation:angleMove2 2s infinite alternate}
.floating-ele .ele3{top:6rem;left:30%;width:10px;-webkit-animation:angleMove1 2s infinite 1s alternate;animation:angleMove1 2s infinite 1s alternate}
.floating-ele .ele4{top:9.5rem;right:50%;width:25px;-webkit-animation:angleMove2 3s infinite 1.5s alternate;animation:angleMove2 3s infinite 1.5s alternate;-webkit-animation:eleScale 3s infinite alternate;animation:eleScale 3s infinite alternate}
.floating-ele .ele5{top:8rem;right:10%;-webkit-animation:angleMove1 2.5s infinite alternate;animation:angleMove1 2.5s infinite alternate}
.floating-ele .ele6{top:12rem;left:70%;width:13px;-webkit-animation:angleMove1 3s infinite 1s alternate;animation:angleMove1 3s infinite 1s alternate}
.floating-ele .ele7{top:2rem;left:75%;-webkit-animation:angleMove2 2s infinite alternate;animation:angleMove2 2s infinite alternate}
.floating-ele .ele8{top:7rem;right:35%;width:14px;-webkit-animation:angleMove1 2s infinite alternate;animation:angleMove1 2s infinite alternate}
.floating-ele .ele9{top:8rem;right:30%;-webkit-animation:angleMove1 2s infinite alternate;animation:angleMove1 2s infinite alternate}
@-webkit-keyframes stretchLine{
100%{width:0}
}
@keyframes stretchLine{
100%{width:0}
}
@-webkit-keyframes angleMove1{
from{-webkit-transform:translate(20px,20px);transform:translate(20px,20px)}
to{-webkit-transform:translate(30px,10px);transform:translate(30px,10px)}
}
@keyframes angleMove1{
from{-webkit-transform:translate(20px,20px);transform:translate(20px,20px)}
to{-webkit-transform:translate(30px,10px);transform:translate(30px,10px)}
}
@-webkit-keyframes angleMove2{
from{-webkit-transform:translate(-5px,-5px);transform:translate(-5px,-5px)}
to{-webkit-transform:translate(-10px,-10px);transform:translate(-10px,-10px)}
}
@keyframes angleMove2{
from{-webkit-transform:translate(-5px,-5px);transform:translate(-5px,-5px)}
to{-webkit-transform:translate(-10px,-10px);transform:translate(-10px,-10px)}
}
@-webkit-keyframes eleScale{
from{-webkit-transform:scale(.7);transform:scale(.7)}
to{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes eleScale{
from{-webkit-transform:scale(.7);transform:scale(.7)}
to{-webkit-transform:scale(1);transform:scale(1)}
}
.map-shotcut{width:100%;height:340px;background:url(https://download.pingcap.com/images/map-office-2955-campus.png);background-size:cover}
@media (min-width:1700px){
.about-timeline{height:1700px}
.about-timeline .time-line{height:1350px}
}
@media (max-width:600px){
.intro-video{height:300px}
.intro-video .video-wrapper{width:100%;height:auto;margin-top:0}
.intro-video .video-wrapper #video{width:100%;height:auto}
.about-culture .details .item{width:45%}
.about-culture .details .image-wrap .icon{height:60px}
.about-contact .info{padding:3rem 1rem}
.about-contact .info .col{width:100%}
.about-contact .info .col::after{display:none}
.about-contact .info .col .office-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:row;-ms-flex:row wrap;flex:row wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:100%}
.about-contact .info .col .office-info .office-name{width:27%}
.about-contact .info .col .office-info .office-addr{width:70%}
.about-contact .info .col2{display:none}
.about-contact .pc-map{display:none}
.about-contact .mobile-map{display:block}
.about-contact .info-2{margin-top:2rem;display:block;line-height:1.7;font-size:1.2rem}
.about-contact-en .container{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}
.about-contact-en .info .item{left:1rem}
.about-timeline{height:1725px}
.about-timeline .time-line{height:1100px;top:10rem}
.about-timeline .time-line .start-node{width:10px;height:10px;margin-left:-5px}
.about-timeline .time-line .event{left:-25px;margin:3rem 0 4.5rem}
.about-timeline .time-line .event .event-detail{padding:5px;left:4rem;min-width:8rem}
.about-timeline .time-line .event .event-detail .time{font-size:14px}
.about-timeline .time-line .event .event-detail .detail{font-size:12px}
.about-timeline .time-line .line-with-year-left .node-with-year,.about-timeline .time-line .line-with-year-right .node-with-year,.about-timeline .time-line .line-without-year-left .node-with-year,.about-timeline .time-line .line-without-year-right .node-with-year{padding:3px;font-size:12px;width:50px}
.about-timeline .time-line .line-with-year-left .node-without-year,.about-timeline .time-line .line-with-year-right .node-without-year,.about-timeline .time-line .line-without-year-left .node-without-year,.about-timeline .time-line .line-without-year-right .node-without-year{margin-left:24px}
.about-timeline .time-line .line-with-year-right::after{width:15px;left:50px}
.about-timeline .time-line .line-without-year-right::after{width:calc(4rem - 25px)}
.about-timeline .time-line .line-with-year-left .event-detail{right:4rem;left:auto}
.about-timeline .time-line .line-with-year-left::after{right:50px;width:15px}
.about-timeline .time-line .line-without-year-left .event-detail{right:4rem;left:auto}
.about-timeline .time-line .line-without-year-left::after{right:25px;width:calc(4rem - 25px)}
section[class^=about-] .desc{padding:0 1rem!important}
section[class^=about-] .title{font-size:1.1rem}
section[class^=about-] .round-corner-btn{width:160px;height:50px}
}
@media (max-width:320px){
.about-timeline{height:1250px}
.about-timeline .time-line{height:1050px;top:10rem}
.about-timeline .time-line .event .event-detail{min-width:7rem}
.about-contact .info .col .office-info .office-name{width:29%}
}