* {
    margin: 0;
    padding: 0
}

img {
    display: block;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: url('../images/videoCallBg.png') no-repeat center;
    background-size: cover;
}

.box {
    width: 1317px;
    height: 100%;
    margin: 0 auto;
}

.top {
    width: 100%;
    height: 145px;
    box-sizing: border-box;
    padding: 0 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top .login {
    width: 221px;
    height: 44px;
    color: #fff;
    background: #5a56c785;
    border-radius: 23px;
    text-align: center;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 44px;
    margin-top: -25px;
}

.top .login span:nth-child(2) {
    color: #3549C8;
    border-radius: 3px;
}

.center {
    width: 100%;
    height: 784px;
    background: url('../images/callBg.png') no-repeat center;
    /* background-size: 100% 100%; */
    position: relative;
}

.mute {

    background: url('../images/muteBg.png') no-repeat center;
    /* background-size: 100% 100%; */

}

.center .left {
    position: absolute;
    width: 752px;
    height: 621px;
    left: 58px;
    top: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center .left .inputBox {
    width: 366px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.center .left .inputBox input {
    border: none;
    outline: none;
    border-radius: 47px;
    width: 286px;
    height: 56px;
    text-align: center;
    font-size: 18px;
}

.center .left .inputBox img {
    display: inline-block;
}

.center .right {
    position: absolute;
    width: 412px;
    height: 621px;
    right: 59px;
    top: 48px;
}

.rightVideoWindow {
    /* width: 412px; */
    height: 341px;
    border-radius: 20px;
    /* background: #3549C8; */
    position: relative;
}

.rightVideoWindow .name {
    width: 181.65px;
    height: 44.71px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0px 20px;
    position: absolute;
    bottom: 0;
    font-family: 'Microsoft YaHei';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 46px;
    color: #fff;
    text-align: center;
}

.rightVideoControlsBox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 133px;
}


/* @media screen and (max-width:1440px) { */
.box {
    width: 988px;
}

.top {
    height: 136px;
}

.top .logo {
    width: 254px;
}

.top .login {
    width: 166px;
    height: 33px;
    font-size: 12px;
    line-height: 34px;
}

.center {
    height: 558px;
    background-size: 100% 100%;
}

.center .left {
    width: 551px;
    height: 445px;
    left: 54px;
    top: 33px;

}

.center .left .inputBox {
    width: 274px;
}

.center .left .inputBox input {
    border: none;
    outline: none;
    border-radius: 35px;
    width: 214px;
    height: 42px;
    text-align: center;
    font-size: 14px;
}

.center .left .inputBox img {
    width: 42px;
}

.center .right {
    position: absolute;
    width: 302px;
    height: 446px;
    right: 55px;
    top: 33px;
}

.rightVideoWindow {
    /* width: 412px; */
    height: 244px;
    border-radius: 20px;
    /* background: #3549C8; */
    position: relative;
}

.rightVideoWindow .name {
    width: 133.65px;
    height: 33.71px;
    font-weight: 400;
    font-size: 12px;
    border-radius: 0 15px;
    line-height: 34px;
}

.rightVideoControlsBox {
    margin-top: 108px;
}

.rightVideoControlsBox img {
    width: 64px;
}

.rightVideoControlsBox .hangUp {
    width: 82px;
}

/* } */





/* video */

.video {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: black;

}

.inputContainer {
    position: absolute;

}

#hangup-container {
    width: 300px;
    text-align: center;
}

#hangup-container img {
    display: inline-block;
}