.h1 {
    text-align: center;
}

.voice-box {
    box-sizing     : border-box;
    display        : flex;
    justify-content: center;
    margin         : 50px auto;
    padding        : 50px;
    width          : 60%;
    border         : 1px solid gray;
    border-radius  : 3px;
}

.voice-box input {
    box-sizing   : border-box;
    padding      : 10px;
    width        : 70%;
    height       : 50px;
    font-size    : 18px;
    color        : #187cff;
    border       : 1px solid #187cff;
    border-radius: 3px 0px 0px 3px;
}

.voice-box button {
    width        : 30%;
    height       : 50px;
    line-height  : 50px;
    font-size    : 18px;
    color        : white;
    background   : #187cff;
    border       : none;
    border-radius: 0px 3px 3px 0px;
    cursor       : pointer;
}

.voice-box button::before {
    content        : "";
    display        : inline-block;
    width          : 23px;
    height         : 26px;
    vertical-align : middle;
    background     : url(../img/voice.png) no-repeat;
    background-size: contain;

}

.fixed-box {
    box-sizing: border-box;
    display   : none;
    align-items: center;
    justify-content: center;
    position  : fixed;
    top       : 0px;
    right     : 0px;
    bottom    : 0px;
    left      : 0px;
    border    : .04rem solid #e0e7ff;
    background: rgba(16, 22, 62, .2);
    z-index: 1;
}

.fixed-close {
    position       : absolute;
    top            : 0px;
    right          : 0px;
    padding        : 20px;
    width          : 20px;
    height         : 20px;
    border         : none;
    background     : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABeklEQVRIibXWsWoVQRQA0LObgGCTFFr6env9h/yETSz0tclrBEUJWhjzAqkV/A9/QrC2CtgIYqk2DwvdMExm991ZJrdaZoY53Bnm3u0Wy80BPuI21jjRPjqc4il+4FG3WG4ucS9ZtMaqMfoej5OxLz3uZAuPcXaDKNzt/TuCPFrgYyi87fEK543xKfQFLvoEaYVvQ19DnwxO4euWaA5P4UcBPIzCbmHRcYLleDqfox9wGEG5nnGKRzOvRilnnOIDluPD/BT6HG/GNp+CI/j+HDQCR/BqlPE7LuGlO5+F1sARPIzWwh32Jub3K/YKw1PFYYgV3rWEI2iKh2r7NnhbGZzdWKaeU03tzZ/W8ARH/2TGMq5BZ7XUElzVZebiOTzU3ho0RUqts4in8Kwuk8Uqig/wti4TQSP41XgfQMNlMIBf9fPd/x8t0RTn+h/LEX52i+XmN241RtM4K+Dfe3y7QZTysV/u7D18+RkP8AfPxPpubXzCL9zHVzz5C8ecbD1n3xuUAAAAAElFTkSuQmCC) no-repeat center center;
    background-size: 12px;
    transition     : all .5s;
    cursor         : pointer;
    outline        : none;
}

.fixed-close:hover {
    transform        : rotate(270deg);
    -webkit-transform: rotate(270deg);
}


.fixed-main {
    box-sizing   : border-box;
    position     : absolute;
    /*left         : 20%;*/
    bottom       : 50px;
    padding      : 30px;
    width        : 40%;
    /*height       : 240px;*/
    display      : flex;
    align-items  : center;
    justify-content: center;
    flex-flow    : column;
    font-size    : 18px;
    background   : white;
    /*border       : 2px solid #e0e7ff;*/
    border-radius: 10px;
    overflow-y   : auto;
}

@media (max-width:450px)  {
    .fixed-main {
        width: 80%;
        bottom: 40px;
    }
}

.fixed-txt {
    width: 100%;
    min-height: 0px;
    max-height: 200px;
    margin-bottom: 50px;
    font-size: 14px;
    line-height: 1.6;
    overflow: auto;
}

.fixed-icon {
    box-sizing     : border-box;
    display        : flex;
    justify-content: center;
    align-items    : center;
    /*position       : absolute;
    top            : 50%;
    left           : 50%;
    margin-top     : -50px;
    margin-left    : -50px;*/
    width          : 60px;
    height         : 60px;
    margin-bottom  : 50px;
    flex           : none;
    background     : linear-gradient(115deg, #56d8e4 5%, #9f01ea 95%);
    border         : 1px solid #e0e7ff;
    border-radius  : 50%;
}

.fixed-icon::before {
    content      : "";
    position     : absolute;
    display      : inline-block;
    width        : 100px;
    height       : 100px;
    border       : 1px solid #9f01ea;
    box-shadow   : 0px 0px 6px 0px #9f01ea;
    border-radius: 50%;
    animation    : move 1.5s infinite;
}

.fixed-icon::after {
    content      : "";
    position     : absolute;
    display      : inline-block;
    width        : 100px;
    height       : 100px;
    border       : 1px solid #56d8e4;
    box-shadow   : 0px 0px 6px 0px #56d8e4;
    border-radius: 50%;
    animation    : move 1.5s .5s infinite;

}

.fixed-icon img {
    width : auto;
    height: 30px;
}

@keyframes move {
    0% {
        opacity  : 1;
        transform: scale(1);
    }

    100% {
        opacity  : 0;
        transform: scale(2);
    }
}

/*::-webkit-scrollbar {
    width           : 6px;
    height          : 6px;
    background-color: #f9f9f9;
}

::-webkit-scrollbar-thumb {
    border-radius   : 6px;
    background-color: #187cff;
}*/