html,
body {
  padding: 0px;
  margin: 0px;
  height: 100%;
}
body {
  background: url(./bg.png) no-repeat;
  background-size: cover;
}

.container {
  width: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.container .top {
  height: 100px;
  display: flex;
}

.header {
  border-top: 2px solid #d7deeb;
  border-left: 2px solid #d7deeb;
  border-right: 2px solid #d7deeb;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  min-height: 22px;
  background-color: #fff;
  position: relative;
  display: none;
}
.header::before{
    content: ' ';
    width: 88px;
    height: 12px;
    border-radius: 12px;
    background-color: #d7deeb;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.header::after{
    content:' ';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #000;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.time{
    position: absolute;
    left: 12px;
    line-height: 22px;
    color: #d7deeb;
    font-weight: bold;
}
.sign{
    position: absolute;
    width: 107px;
    height: 20px;
    right: 12px;
    background: url(./sign.png);
}
.body {
  position: relative;
  background-color: #fff;
  border-bottom: 2px solid #d7deeb;
  border-left: 2px solid #d7deeb;
  border-right: 2px solid #d7deeb;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-top: -1px;
}
.iframe{
    transition: all .5s;
    height: 0px;
}
.iframe iframe {
  border: none;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}