#achievementPK > ul, #achievementPK > ul > li, #startPK, .mineInfo, .otherInfo, .currentUser, .cotherUser, #pkResultInfo,
#pkResultInfo .score, #pkResultList .leftMineRes, #pkResultList .rightOther {
    display: flex;
    align-items: center;
}
/* 个人信息部分 */
#userInfo {
    line-height: 1.8rem;
    align-items: center;
    margin-top: 18%;
}
#userInfo .headPhoto {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    margin-bottom: 0.6rem;
}
#userInfo .schoolAndClassInfo .school {
    padding-right: 0.8rem;
}
#achievementPK {
    flex-direction: row;
}
#achievementPK > ul {
    width: 100%;
    justify-content: space-around;
}
#achievementPK > ul > li {
    flex-direction: column;
}
#achievementPK .number {
    color: #52cc8f;
    font-size: 1.6rem;
}
#matchRandom {
    display: flex;
    align-items: center;
    margin: 8% 0 5% 0;
}
#matchRandom .matchBtn {
    width: 90%;
    border: none;
    background-image: url(../images/svg/btn.png);
    background-size: auto;
    border-radius: 0.5rem;
    color: #fff;
    text-align: center;
    line-height: 3.5rem;
    font-size: 1rem;
}
/* 等待页面 */
#searchContainer {
    width: 100%;
    height: inherit;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#searchContainer .bigCircle, #searchContainer .smallCircle, .headerPhoto {
    border-radius: 50%;
}
#searchContainer .bigCircle {
    width: 100%;
    height: 25rem;
    height: inherit;
    background-image: url(../images/svg/scan.svg);
    position: absolute;
    margin-top: -10%;
}
#searchContainer .smallCircle {
    border: 2px solid #fff;
    width: 6rem;
    height: 6rem;
    border-width: 5px;
    position: absolute;
    flex: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
#searchContainer .text {
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 1rem;
    font-size: 1rem;
    left: 0;
    right: 0;
}
#searchContainer .youHaveJoined {
    color: red;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}
/* 开始游戏--等待对方准备页面 */
#startPK {
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    margin: 4rem 0 2rem 0;
}
.mineInfo, .otherInfo {
    width: 95%;
    animation: change linear 1s;
    -webkit-animation: change linear 1s;
    animation-fill-mode: forwards;
}
@keyframes change {
    0%{ width: 200%; }
    50%{ width: 150%; }
    100%{ width: 95%; }
}
@-webkit-keyframes change {
    0%{ width: 200%; }
    50%{ width: 150%; }
    100%{ width: 95%; }
}
.otherInfo, .cotherUser {
    justify-content: flex-end;
}
.currentUser, .cotherUser {
    height: 4.5rem;
    background-size: contain;
    animation-fill-mode: forwards;
}
.currentUser {
    background-image: url(../images/svg/current_user.svg);
    background-position: left center;
    justify-content: flex-start;
    animation: left_to_right .5s ease-in-out;
    -webkit-animation: left_to_right .5s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes left_to_right {
    0%{ margin-left: -3rem; }
    50%{ margin-left: -2rem; }
    100%{ margin-left: 0rem; }
}
@-webkit-keyframes left_to_right {
    0%{ margin-left: -3rem; }
    50%{ margin-left: -2rem; }
    100%{ margin-left: 0rem; }
}
@keyframes right_to_left {
    0%{ margin-right: -3rem; }
    50%{ margin-right: -2rem; }
    100%{ margin-right: 0rem; }
}
@-webkit-keyframes right_to_left {
    0%{ margin-right: -3rem; }
    50%{ margin-right: -2rem; }
    100%{ margin-right: 0rem; }
}
.cotherUser {
    background-image: url(../images/svg/other_user.svg);
    background-position: right center;
    animation: right_to_left .5s ease-in-out;
    -webkit-animation: right_to_left .5s ease-in-out;
    animation-fill-mode: forwards;
}
.currentUser .headerPhoto, .cotherUser .headerPhoto {
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    border: 3px solid #fff;
}
.currentUser .headerPhoto {
    margin-left: 2.2rem;
}
.cotherUser .headerPhoto {
    margin-right: 2.2rem;
}
#startPK .name, #startPK .text {
    color: #fff;
    font-family: PingFang-SC-Heavy;
}
#startPK .name {
    margin: 0 1.5rem;
}
/* pk结果页 */
#pkResult {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
}
#pkResult .whoWin {
    background-image: url(../images/YOUWIN.png);
    background-size: contain;
    height: 3rem;
    min-height: 3rem;
    margin-bottom: 0.8rem;
}
#pkResult .Ilosed {
    background-image: url(../images/YOULOSE.png);
}
#pkResultInfo {
    justify-content: space-around;
}
#pkResultInfo .score {
    flex-direction: column;
    color: #fff;
    font-size: 0.6rem;
}
.score > .getScore {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
#pkResultInfo .isWinCrown {
    background-image: url(../images/crown.png);
    background-size: contain;
    width: 2.5rem;
    height: 2rem;
    position: absolute;
    top: -0.8rem;
    right: -0.5rem;
}
#pkResultInfo .cotherUser .isWinCrown {
    transform: rotateY(180deg);
    left: -0.5rem;
}
div.pkName {
    color: #fff;
    font-size: 0.9rem;
    height: auto;
}
div.pkName > div {
    width: 47%;
    margin: 0.5rem 1%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
#pkResultList > ul {
    margin: 0 0.8rem;
    height: 100%;
    background: #fff;
    border-radius: 8px;
}
ul span {
    font-size: 0.8rem;
}
#pkResultList > ul li {
    margin: 0 1rem;
    border-bottom: 1px solid #f0f0f0;
    color: #515854;
    display: flex;
    justify-content: space-between;
    line-height: 2.4rem;
}
#pkResultList .leftMineRes {
    width: 40%;
    justify-content: flex-start;
}
#pkResultList .leftMineRes .word {
    padding-left: 0.5rem;
}
#pkResultList .rightOther {
    width: 57%;
    justify-content: space-between;
}
#pkResultList .leftMineRes .word, #pkResultList .rightOther .means {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 85%;
}
#pkResultList .bingo, .choosedRight .otherYes, .choosedRight .mineYes {
    width: 1rem;
    height: 1rem;
}
#pkResultList .wrong, .choosedWrong .otherYes, .choosedWrong .mineYes  {
    width: 0.8rem;
    height: 0.8rem;
}
#pkResultList .bingo {
    background-image: url(../images/svg/right.svg);
}
#pkResultList .wrong {
    background-image: url(../images/svg/error.svg);
}
.choosed, .rightAnswer {
    color: #fff !important;
}
.hide {
    visibility: hidden;
}
.hidden {
    display: none;
}
.rightAnswer {
    visibility: visible !important;
}
.choosedRight, .rightAnswer {
    background: #52cc8f !important;
}
.choosedRight .otherYes, .choosedRight .mineYes {
    background-image: url(../images/svg/right_white.svg);
}
.choosedWrong {
    background: #ff8e93 !important;
    animation: error_fade_in .3s ease-in-out;
}
.choosedWrong .otherYes, .choosedWrong .mineYes {
    background-image: url(../images/svg/error_white.svg);
}
.playAgin {
    color: #fff;
    background: #52cc8f;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    margin: 0.6rem 0;
    font-size: 0.9rem;
    border: none;
    padding: 0.5rem 0;
}
/*错误答案抖动动画*/
@keyframes error_fade_in {
    0% {
      transform: rotateZ(-6deg);
    }
    20% {
      transform: rotateZ(0deg);
    }
    40% {
      transform: rotateZ(6deg);
    }
    50% {
      transform: rotateZ(0deg);
    }
    60% {
      transform: rotateZ(-6deg);
    }
    80% {
      transform: rotateZ(6deg);
    }
    100% {
      transform: rotateZ(0deg);
    }
  }