.main {
    width: 1300px;
    margin: 30px auto 100px;
}
.main .jump {
    width: 240px;
    height: 51px;
    line-height: 51px;
    text-align: center;
    background-color: #CC8A5E;
    border-radius: 4px;
    border: none;
    color: #fff;
    font-size: 18px;
}

.user-info {
    width: 1111px;
    height: auto;
    /* background: url(../img/intro/intro-bg.png) no-repeat; */
    margin: 20px auto 0;
    border-width: 20px;
    border-style: solid;
    border-image-source: url(../img/archives/intro-bg.png);
    border-image-slice: 20 20 20 20 fill;
    border-image-repeat: stretch;
}
.user-info .box {
    display: flex;
    justify-content: flex-start;
    padding: 30px 26px;
}
.box .box-left {
  
}
.box .box-right {
    margin-left: 20px;
}
.box .box-title {
    margin-bottom: 30px;
}
.box .box-title span {
    border-left: 5px solid #CF9B7F;
    border-right: 4px solid #CF9B7F;
    border-top: 4px solid #CF9B7F;
    border-bottom: 1px solid #CF9B7F;
    border-radius: 4px;
}
.user-info .box i {
    font-size: 24px;
    color: #7E5E59;
    padding-left: 14px;
}
.box .basic-info {
    width: 200px;
    height: 770px;
    background: #EFE9E5;
    border-radius: 4px 4px 4px 4px;
    position: relative;
}
.box .basic-info img {
    width: 94px;
    height: 94px;
    position: absolute;
    top: -18px;
    left: 52px;
    border-radius: 50%;
}
.box .basic-info button {
    width: 100px;
    height: 25px;
    position: absolute;
    top: 92px;
    left: 50px;
    font-size: 14px;
    color: white;
    border-radius: 10px;
    border: none;
    background-color: #CF9B7F;
}
.box .basic-info .content {
    padding: 134px 20px 20px 20px;
    font-size: 14px;
    color: #B67750;
}
.basic-info .content li {
    margin-bottom: 5px;
}
.basic-info .content li:nth-child(2n+1) {
    margin-bottom: 4px;
}
.basic-info .select-box {
    position: relative;
}
.basic-info .select-sex,.select-sort {
    background-color: #fff;
    width: 160px;
    height: 30px;
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    color: gray;
}
.select-sex::after,.select-sort::after {
    position: absolute;
    top: 10px;
    right: 0.8em;
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top-color: #7E7775;
    transition: transform 0.3s ease 0s;
}
.on .select-sex::after,.on .select-sort::after {
    transform: translateY(-10px) rotate(180deg);
}

.select-box .select-layer {
    position: absolute;
    left: 0;
    top: 30px;
    cursor: pointer;
    background-color: #fff;
    width: 160px;
    height: auto;
    border: none;
    border-radius: 4px;
    display: none;
    z-index: 99;
    text-indent: 5px;
}   
.select-box .select-layer li:nth-child(2n):hover {
    background-color: #CFECF5;
}
.select-box .select-layer li:nth-child(2n+1):hover {
    background-color: #FBEFF9;
}
.select-box .select-layer.status li:hover {
    background-color: #D7D7D7;
}
.on .select-layer {
     display: block;
}
.select-box .select-layer li {
    margin: 0;
}
.select-box .word {
    text-indent: 5px;
}
.box .basic-info .content input {
    width: 160px;
    border: none;
    border-radius: 4px;
    height: 26px;
    text-indent: 5px;
    color: gray;
}
.basic-info .content .days input {
    width: 130px;
}
.basic-info .content .days span {
    margin-left: 6px;
}

.box .basic-info .content .tips {
    font-size: 12px;
    color: #989898;
    padding: 0;
}
.box .intro-info {
    width: 802px;
    height: 770px;
    background: #EFE9E5;
    border-radius: 4px 4px 4px 4px;
}
.box .intro-info ul {
    font-size: 14px;
    color: #B67750;
    padding: 17px 26px;
}
.box .intro-info ul li:nth-child(2n+1) {
    margin-bottom: 4px;
}
.box .intro-info ul input, .box .intro-info ul textarea {
    padding: 12px;
    border: none;
    border-radius: 4px;
    resize: none;
    width: 750px;
    height: 180px;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 16px;
    color: grey;
}
.box .intro-info ul input {
    height: 26px;
}
.box .intro-info ul .low-text {
    height: 180px;
}
.add-file {
    padding: 0 26px;
}
.add-file .add-title {
    display: flex;
    justify-content: space-between;
    font-size: 22px;
    color: #CC8A5E;
}
.add-file .add-title .line {
    border-top: 2px dashed #DDD4D3;
    margin-top: 14px;
    width: 427px;
    background: #FFFFFF;
    border-radius: 1px;
}
.add-file .add-box {
    width: 1023px;
    height: 136px;
    background: #EFE9E5;
    border-radius: 4px 4px 4px 4px;
    margin: 20px 0;
    font-size: 18px;
    color: #CC8A5E;
}
.add-file .add-box .add-box-ul {
    padding: 30px 50px;
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
}
.add-file .add-box input {
    text-indent: 0.5em;
    width: 191px;
    height: 29px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: none;
    color: grey;
}

.add-box .select-box {
    /* margin-right: 85px; */
    position: relative;
}
.add-box .select-sex,.select-sort {
    background-color: #fff;
    width: 191px;
    height: 29px;
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    color: gray;
}
.add-box .add-box-ul .select-layer {
    width: 191px;
}
.add-box .add-box-ul li button {
    width: 100px;
    height: 25px;
    font-size: 14px;
    color: white;
    border-radius: 10px;
    border: none;
    background-color: #CF9B7F;
}
.add-box .add-box-ul .row-btn {
    margin-top: 20px;
}
.add-box .add-box-ul li:nth-child(2n)  {
    margin-right: 78px;
}
.add-box .add-box-ul li:nth-child(2n+1)  {
    margin-right: 15px;
}

.add-box .add-box-ul li.last-li {
    margin-right: 0;
}

.add-box .add-box-ul li span.red {
    color: #ED827E;
}
.add-box .add-box-ul li span.blue {
    color: #4FA3FC;
}
.add-box .add-box-ul li span.yellow {
    color: #CC8A5E;
}

.add-box .add-box-ul li.add-sound-li {
    margin-left: 107px;
}

.add-box .add-box-ul .row-btn .tips {
    margin-top: 2px;
    font-size: 14px;
    color: #ABAAA9;
}
.add-box .add-box-ul .row-btn i {
    margin-top: 2px;
    margin-left: 10px;
    font-size: 14px;
}
.add-box .add-box-ul .row-btn .add-sound {
   background-color:  rgb(235, 104, 105);
   font-size: 14px;
   width: 110px;
   height: 30px;
   line-height: 30px;
   border-radius: 14px;
}
.audio-list .box-title {
    margin-bottom: 12px;
}
.audio-list .box-title span {
    border-left: 5px solid #CF9B7F;
    border-right: 4px solid #CF9B7F;
    border-top: 4px solid #CF9B7F;
    border-bottom: 1px solid #CF9B7F;
    border-radius: 4px;
}
.audio-list .box-title i {
    font-size: 24px;
    color: #7E5E59;
    padding-left: 14px;
}
.audio-list .box-title .save-info i {
    margin-right: 80px;
    font-size: 14px;
    color: #ABAAA9;
}
.audio-list .box-title .save-info button {
    width: 100px;
    height: 25px;
    font-size: 14px;
    color: white;
    border-radius: 10px;
    border: none;
    background-color: #CF9B7F;
}



.audio-list {
    padding: 0 26px;
}
.audio-list img {
    margin: auto;
}
.audio-box-bg {
    height: 322px;
    background: url(../img/intro/audio-list-bg.png) no-repeat;
    background-size: contain;
}
.audio-box {
    padding: 20px;
}
.audio-list ul {
    width: 100%;
    height: 264px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-y: scroll;
}
.audio-list ul li {
    margin: 0 6px 50px;
    width: 302px;
    height: 87px;
    background: url(../img/archives/item-bg.png) no-repeat;
    background-size: contain;
    position: relative;
}
.audio-list ul li .sort {
    position: absolute;
    bottom: -35px;
    left: 0;
}
.audio-list ul li .sort input {
    width: 60px;
    height: 30px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #E8CCBA;
}
.audio-list ul li .sort i {
    font-size: 14px;
    color: #CC8A5E;
}
.audio-list ul li .tags {
    width: 274px;
    position: absolute;
    top: 6px;
    left: 14px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    color: #AB5D3A;
}
.tags .left-tag .slash {
    margin: 0 4px;
}
.tags .left-tag .red {
    color: #ED827E;
}
.tags .left-tag .blue {
    color: #4FA3FC;
}

.play-list {
    position: absolute;
    top: 38px;
    left: 12px;
    display: flex;
}
.play-list .del-btn button {
    width: 52px;
    height: 26px;
    font-size: 14px;
    color: white;
    border-radius: 14px;
    border: none;
    background-color: #EA6767;
    margin: 4px 0 0 7px;
}
.play-list .play-list-box {
    width: 216px;
    height: 35px;
    background: #CE997C;
    border-radius: 35px 35px 35px 35px;
    position: relative;
}
 .play-list .play-list-box .img-play {
    position: absolute;
    left: 16px;
    top: 11px;
    width: 11px;
    height: 12px;
    cursor: pointer;
}
.play-list .play-list-box .img-sound {
    position: absolute;
    right: 17px;
    top: 12px;
    width: 14px;
    height: 10px;
    cursor: pointer;
}


.play-list .play-list-box .timer {
    position: absolute;
    left: 34px;
    top: 6px;
    width: 90px;
    height: 23px;
    font-size: 14px;
    color: #fff;
    line-height: 23px;
    text-align: left;
    text-transform: none;
}

/* 自定义进度条样式 */
.play-list .play-list-box .progress-bar-bg {
    position: absolute;
    left: 126px;
    top: 14px;
    width: 50px;
    height: 4px;
    color: #555;
    background-color: #F0F0F0;
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) inset;
    cursor: pointer;
}
.progress-bar {
    background-color: #AB5D3A;
    width: 0;
    height: 6px;
    border-radius: 10px;
}
.progress-bar-bg span {
    content: " ";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #AB5D3A;
    position: absolute;
    left: 0;
    top: 80%;
    margin-top: -4px;
    margin-left: -5px;
}


.audio-list .experience:nth-child(2n) {
    margin-top: 16px;
}
.experience .title {
    display: flex;
    color: #F89296;
    margin: 0 10px;
}
.experience .title .title-words {
    width: 5em;
}
.experience .title .title-line {
    width: 100%;
    height: 20px;
    background: url(../img/intro/line-short.png);
    background-repeat: repeat-x;
    background-position: center;
}
.experience .content {
    margin: 10px auto;
    width: 1111px;
    height: 160px;
    background-color: #FAECE2;
    color: #7E5E59;
    padding: 18px 24px;
    box-sizing: border-box;
    font-size: 14px;
}
.experience .content-box {
    height: 100%;
    overflow: hidden;
}

.footer-btn {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 20px;
    cursor: pointer;
}
.footer-btn img {
    width: 181px;
    height: 63px;
}
.footer-btn img:nth-child(2n) {
    margin-left: 100px;
}