*{margin:0;padding:0}body{background-image:linear-gradient(to left,rgba(255,0,149,0.2),rgba(0,247,255,0.2)),url(../img/bg.jpg);background-repeat:no-repeat;background-attachment:fixed;background-size:cover;display:flex;flex-direction:column;min-height:100vh;margin:0}#box{width:100%;height:100px;margin:0 auto;padding-top:5%;flex:1}.meBox{float:left;width:20rem;height:25rem;background-color:white;margin-top:100px;margin-left:10%;border-radius:2%;transition:all 0.3s;text-align:center}.meBox:hover{width:21rem;height:26rem;margin:95px 0 0 9.5%}.headPhoto{width:8rem;height:8rem;background:url('../img/123.png') no-repeat;background-size:cover;border-radius:16%;position:relative;top:-15%;left:50%;margin-left:-4rem;transition:all 0.3s}.meBox:hover .headPhoto{width:9rem;height:9rem;margin:-0.5rem 0 0 -4.5rem;transform:rotate(0deg)}.headPhoto:hover{box-shadow:0 0 10px rgba(0,0,0,0.3)}.meBox-title{max-width:400px;width:auto;margin:0 auto}@keyframes typing{from{width:0}}@keyframes blink-caret{50%{border-color:transparent}}.meBox-title p{font-size:1.8rem;border-right:.1em solid;width:13ch;white-space:nowrap;overflow:hidden;animation:typing 2s steps(20,end),blink-caret .3s step-end infinite alternate;margin:-32px 0 0 53px;transition:all 0.3s}.meBox:hover .meBox-title p{font-size:2rem}.meBox-title .fg{width:80%;height:2px;background-image:linear-gradient(to left,#3498db,#2980b9);margin:5% 0 0 10%}.meBox-text{width:80%;height:45%;overflow:hidden;text-align:center;color:rgb(70,70,70);animation-name:meBox-text;animation-duration:2s;animation-fill-mode:forwards;margin:5% 0 0 10%;transition:all 0.3s}.meBox-text p{margin-top:8px}.meBox:hover .meBox-text{font-size:1.05rem}.meBox-text .large-text{font-size:1.75rem}.meBox:hover .meBox-text .large-text{font-size:1.78rem}@keyframes meBox-text{0%{transform:translateY(50px);color:white}100%{transform:translateY(0);color:rgb(70,70,70)}}.meBox-Button{width:100%}.meBox-Button a{display:inline-block;float:left;width:158px;height:50px;margin-top:5px;line-height:15px;text-decoration:none;color:gray;transition:all 0.3s}.meBox-Button a:hover{color:rgb(0,132,255);font-size:1.2rem}.meBox:hover .meBox-Button a{width:165px;margin-top:10px}#cmdBox{width:710px;height:550px;float:right;margin-right:5%}.cmd{width:600px;height:400px;border-radius:10px 10px 5px 5px;overflow:hidden;background-color:rgba(255,255,255,0.9);transition:all 0.3s;font-size:15px;color:rgb(88,89,92);position:relative;top:0;left:0}.cmd:hover{width:610px;height:410px;box-shadow:0 0 10px rgba(0,0,0,0.4);margin:-5px 0 0 -5px;z-index:1}.cmd .title{width:100%;height:25px;background-image:linear-gradient(to top,rgb(184,184,184),white);font-size:14px;line-height:25px}.cmd .title span{display:inline-block;width:70%;text-align:center}.cmd .click{margin-left:10px;float:left}.cmd .click div{width:10px;height:10px;border-radius:50%;margin:8px 0 0 10px;float:left}.cmd .click .red{background-color:#ff1b22;box-shadow:0 0 1px #ff1b22}.cmd .click .red:hover{background-color:#ff6268;box-shadow:0 0 3px #ff1b22}.cmd .click .yellow{background-color:#ffaf00;box-shadow:0 0 1px #ffaf00}.cmd .click .yellow:hover{background-color:#ffd373;box-shadow:0 0 3px #ffaf00}.cmd .click .green{background-color:#00931a;box-shadow:0 0 1px #00931a}.cmd .click .green:hover{background-color:rgb(0,196,36);box-shadow:0 0 3px #00931a}.cmdText{padding-top:10px;padding-left:15px}.cmd2{position:relative;top:-280px;left:100px}.cmd2 .cmdText .ul{margin-left:15px}.cmd2 .cmdText .ul a{text-decoration:none;color:rgb(88,89,92)}.cmd2 .cmdText .ul a:hover{color:rgb(0,132,255)}#footer{width:100%;color:white;float:left;text-align:center;bottom:0;margin-bottom:30px}#footer a{text-decoration:none;color:white}#footer a:hover{color:rgb(0,81,255)}@media screen and (max-width:1250px){.meBox{margin-left:3%}.meBox:hover{width:21rem;height:26rem;margin:95px 0 0 2.5%}#cmdBox{margin-right:3%}}@media screen and (max-width:1110px){.meBox{float:none;margin:95px auto 95px}.meBox:hover{width:21rem;height:26rem;margin:95px auto 95px}#cmdBox{float:none;margin:0 auto 100px}}@media screen and (max-width:768px){.meBox-title p{margin:-33px 0 0 45px}.meBox{width:300px}.meBox:hover{width:300px;height:25rem;margin:100px auto 100px}.meBox-Button a:hover{color:rgb(70,70,70)}.meBox:hover .meBox-Button a{width:150px;margin-top:-1px}.meBox:hover .meBox-title p{font-size:1.8rem}.meBox:hover .headPhoto{width:8rem;height:8rem;margin:-0.5rem 0 0 -4rem;transform:rotate(0deg)}.meBox:hover .meBox-text{font-size:1rem}.meBox-Button a{width:150px}#cmdBox{width:100%;height:850px}.cmd{width:90%;margin:0 auto}.cmd2{position:relative;top:20px;left:0}.cmd:hover{width:90%;box-shadow:0 0 10px rgba(0,0,0,0.4);margin:0 auto;z-index:1}}.weixin{position:relative}.weixin::after{background-image:url('../img/456.png');background-size:contain;background-repeat:no-repeat;content:'';position:absolute;right:-9px;top:-135px;z-index:99;width:30vw;height:30vw;max-width:320px;max-height:320px;border:5px solid rgb(0,190,0);border-radius:12px;transform-origin:top right;transform:scale(0);opacity:0;transition:all .4s ease-in-out}.weixin.show-image::after{transform:scale(1);opacity:1}@media (max-width:768px){.weixin::after{width:50vw;height:50vw;right:-10px;top:-75px}}.meBox-Button a .icon{width:15.5px;height:15.5px;margin-right:-1px;transform:translateY(2.8px);filter:brightness(0) saturate(100%) invert(35%) sepia(2%) saturate(1108%) hue-rotate(185deg) brightness(92%) contrast(86%);transition:filter 0.3s ease}.meBox-Button a:hover .icon{filter:brightness(0) saturate(100%) invert(40%) sepia(90%) saturate(2000%) hue-rotate(200deg) brightness(90%) contrast(90%);width:16px;height:16px;transform:translateY(0.8px)}