html, body {
    width: 100%;
    height: 100%;
    font-family: PingFangSC-Regular, sans-serif;
}
* {
    margin:0;
    padding:0;
    list-style-type:none;
    box-sizing:border-box
}
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
    margin: 0;
    padding: 0;
}
img {
    max-width:100%;
}
/* ::-webkit-scrollbar {
    display: none;
} */
.flexs {
    display:flex;
    justify-content: space-between;
    align-items:center;
}
.flex {
    display:flex;
    justify-content: center;
    align-items:center;
}
iframe {
    width: 100%;
    height: 100%;
}
#ui {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /* color: #494949; */
    letter-spacing: 3px;
}
.antique-name {
    font-size:20px;
    text-align:center;
    color:#fff;
    width:70%;
    margin:21vw auto 0;
}
.comment_wrapper {
    position:relative;
    z-index:9999;
    width:83vw;
    margin:0 auto;
    display:none;
}
.introductionWrap {
    width:100%;
    background:#1d1d1d;
    height:28vw;   
    font-size:12px;
    color:#ffffffba;
    padding:4vw;

}
.introductionWrap .introduction {
    overflow:scroll;
    height: 100%;
}
.bg-audio {
    display:block;
    position:absolute;
    z-index:2;
    top:8.5vw;
    right:7.4vw;
    width:7.4vw;
    height:7.4vw;
    background:url(../images/bgmusic_icon_play.png)center/100% no-repeat;
}
.iconAction {
    position:relative;
    width:100%;

    
}
.iconAction ul {
    position: relative;
    z-index: 999;
    width:100%;
    padding:0 17.6vw 9vw;
;
}
.iconAction ul li {
    width:12vw;
    text-align:center;
    cursor:pointer;
}
.iconAction ul li i{
    display:block;
    width:9vw;
    height:9vw;
    width:12vw;
    margin:0 auto;
}
/* .iconAction ul li i.explain_icon{
    background:url(../images/explain_icon.png)center/100% no-repeat;
}
.iconAction ul li i.explain_icon2{
    background:url(../images/explain_icon2.png)center/100% no-repeat;
} */
#explain.active p{
    color:#9a2e2c;
}
#explain .explain_icon {
    background:url(../images/explain_icon.png)center/100% no-repeat;
}
#explain.active .explain_icon {
    background:url(../images/explain_icon2.png)center/100% no-repeat;
}
.iconAction ul li i.comment_icon{
    background:url(../images/comment_icon.png)center/100% no-repeat;
}
#favorite .favorite_icon {
    background:url(../images/favorite_icon1.png)center/100% no-repeat;
}
#favorite.active p {
    color:#9a2e2c;
}
#favorite.active .favorite_icon {
    background:url(../images/favorite_icon2.png)center/100% no-repeat;
    
}
/* .iconAction ul li i.favorite_icon1{
    background:url(../images/favorite_icon1.png)center/100% no-repeat;
}
.iconAction ul li i.favorite_icon2{
    background:url(../images/favorite_icon2.png)center/100% no-repeat;
} */
.iconAction ul li p {
    font-size:16px;
    color:#fff;
}
.info_voice {
    margin:0 auto;
    text-align:center;    
}
.audio_controls .icon_play {
    display:inline-block;
    width:3.4vw;
    margin-right:5px;
}
.audio_controls .progress {
    position:relative;
    display:inline-block;
    width:60vw;
    background:#fff;
    height:2px;
}
.audio_controls .progress i {
    position:absolute;
    top:-3px;
    left:0;
    display:inline-block;
    width:8px;
    height:8px;
    background:#fff;
    border-radius:4px;
    -webkit-border-radius:4px;
}
.audio_controls .audio_time {
    font-size:10px;
    color:#fff;
    margin-left:5px;
}
/* audio::-webkit-media-controls-panel {
    background:rgba(255,255,255,1);
}
audio::-webkit-media-controls-mute-button {}
audio::-webkit-media-controls-play-button {}
audio::-webkit-media-controls-timeline-container {
    background:none;
}
audio::-webkit-media-controls-current-time-display {}
audio::-webkit-media-controls-time-remaining-display {}
audio::-webkit-media-controls-timeline {}
audio::-webkit-media-controls-volume-slider-container {
    background:none;
}
audio::-webkit-media-controls-volume-slider {}
audio::-webkit-media-controls-seek-back-button {}
audio::-webkit-media-controls-seek-forward-button {}
audio::-webkit-media-controls-fullscreen-button {}
audio::-webkit-media-controls-rewind-button {}
audio::-webkit-media-controls-return-to-realtime-button {}
audio::-webkit-media-controls-toggle-closed-captions-button {} */
.animated {
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}
@-webkit-keyframes fadeInBottom {
    0% {
        opacity:0;
        -webkit-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0)
    }
    to {
        opacity:1;
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}
@keyframes fadeInBottom {
    0% {
        opacity:0;
        -webkit-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0)
    }
    to {
        opacity:1;
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}
.fadeInBottom {
    -webkit-animation-name:fadeInBottom;
    animation-name:fadeInBottom
}

@-webkit-keyframes fadeOutBottom {
    0% {
        opacity:1
    }
    to {
        opacity:0;
        -webkit-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0)
    }
}
@keyframes fadeOutBottom {
    0% {
        opacity:1
    }
    to {
        opacity:0;
        -webkit-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0)
    }
}
.fadeOutBottom {
    -webkit-animation-name:fadeOutBottom;
    animation-name:fadeOutBottom
}

.musicRotate {
    -webkit-animation: musicRotate 5s linear infinite;
    animation: musicRotate 5s linear infinite;
} 
@keyframes musicRotate {
    from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
        transition: all 5s;
      }
}