* {
    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;
}
.rounded-container {
    width: 260px; /* 容器宽度 */
    height: 116px; /* 容器高度 */
    margin-top: 15px;
    overflow: hidden; /* 隐藏超出部分 */
    border-radius: 15px; /* 圆角 */
}
.rounded-container img {
    width: 100%; /* 图片宽度 */
    height: 100%; /* 图片高度 */
    object-fit: cover; /* 图片填充方式 */
}
#box {
    /* background-color:red;
    */
    width:100%;
    height:100px;
    margin:0 auto;
    padding-top:5%;
}
.meBox {
    float:left;
    width:20rem;
    height:30rem;
    background-color:white;
    margin-top:100px;
    margin-left:10%;
    border-radius:2%;
    transition:all 0.3s;
    text-align:center;
}
.meBox:hover {
    width:21rem;
    height:31rem;
    margin:95px 0 0 9.5%;
}
.headPhoto {
    width:8rem;
    height:8rem;
    background:url(https://oss.imaae.com/filedb/storage/pictures/avatar-1.png) no-repeat;
    background-size:cover;
    border-radius:50%;
    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(360deg);
}
.headPhoto:hover {
    box-shadow:0 0 10px rgba(0,0,0,0.3);
}
.meBox-title {
    width:auto;
    margin:0 auto;
}
@keyframes typing {
    from {
    width:0;
}
}@keyframes blink-caret {
    50% {
    border-color:transparent;
}
}.meBox-title p {
    font-size:1.2rem;
    border-right:.1em solid;
    width:12ch;
    white-space:nowrap;
    overflow:hidden;
    animation:typing 2s steps(20,end),blink-caret .3s step-end infinite alternate;
    margin:-30px 0 0 90px;
    transition:all 0.3s;
}
.meBox:hover .meBox-title p {
    font-size:1.3rem;
}
.meBox-title .fg {
    width:80%;
    height:2px;
    background-image:linear-gradient(to left,#3498db,#2980b9);
    margin:5% 0 0 10%;
}
.meBox-text {
    background:url(https://oss.imaae.com/filedb/storage/pictures/obsession-1.png) no-repeat right 5px;
    background-size:72px 72px;
    width:80%;
    height:48%;
    overflow:hidden;
    text-align:left;
    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:5px;
}
.meBox:hover .meBox-text {
    font-size:1.05rem;
}
@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:13px;
    line-height:50px;
    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:720px;
    height:560px;
    float:right;
    margin-right:5%;
    /* background-color:green;
    */
}
.cmd {
    width:600px;
    height:480px;
    border-radius:10px 10px 5px 5px;
    overflow:hidden;
    background-color:rgba(255,255,255,0.9);
    transition:all 0.3s;
    font-size:14px;
    line-height:1.5;
    /*letter-spacing:1px;
    */

    color:rgb(88,89,92);
    position:relative;
    top:0;
    left:0;
}
.cmd:hover {
    width:610px;
    height:490px;
    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;
    /* background-color:red;
    */
}
.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:15px;
    padding-left:20px;
    padding-right:20px;
}
.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;
    position:fixed;
    bottom:0;
    margin-bottom:30px;
    /* background-color:blue;
    */
}
#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:31rem;
    margin:95px 0 0 2.5%;
}
#cmdBox {
    margin-right:3%;
}
}@media screen and (max-width:1110px) {
    .meBox {
    float:none;
    margin:100px auto 100px;
}
.meBox:hover {
    width:21rem;
    height:31rem;
    margin:95px auto 95px;
}
#cmdBox {
    float:none;
    margin:0 auto 100px;
}
}@media screen and (max-width:768px) {
    .meBox {
    width:300px;
}
.meBox:hover {
    width:300px;
    height:31rem;
    margin:100px auto 100px;
}
.meBox-Button a:hover {
    color:rgb(0,132,255);
}
.meBox:hover .meBox-Button a {
    width:150px;
    margin-top:0;
}
.meBox:hover .meBox-title p {
    font-size:1.2rem;
}
.meBox:hover .headPhoto {
    width:8rem;
    height:8rem;
    margin:-0.5rem 0 0 -4rem;
    transform:rotate(360deg);
}
.meBox:hover .meBox-text {
    font-size:1rem;
}
.meBox-Button a {
    width:150px;
}
#cmdBox {
    width:100%;
    height:950px;
}
.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;
}
}