#bar_container {
    float: left;
    color: #ffffff;
    width: 50%;
}

#box02_text {
    float: left;
}

.bar {
    height: 40px;
    width: 0;
    transition: width 1.2s ease-in-out;
    -webkit-transition: width 1.2s ease-in-out;
    -moz-transition: width 1.2s ease-in-out;
    -ms-transition: width 1.2s ease-in-out;
    position: relative;
    margin: 30px 0;
    border-radius: 4px;
}

.bar.mint {
    background-color: #14c3a2;
    background-image: repeating-linear-gradient(-45deg, #14c3a2, #14c3a2 30px, #22e8c3 30px, #22e8c3 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    -webkit-animation: barberpole 12s linear infinite;
    -moz-animation: barberpole 12s linear infinite;
    -o-animation: barberpole 12s linear infinite;
    -ms-accelerator: barberpole 12s linear infinite;
    border-bottom: 5px solid #0d7e68;
}

.bar.red {
    background-color: #cf4647;
    background-image: repeating-linear-gradient(-45deg, #cf4647, #cf4647 30px, #da6e6f 30px, #da6e6f 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    -webkit-animation: barberpole 12s linear infinite;
    -moz-animation: barberpole 12s linear infinite;
    -o-animation: barberpole 12s linear infinite;
    -ms-accelerator: barberpole 12s linear infinite;
    border-bottom: 5px solid #9f292a;
}

.bar.orange {
    background-color: #eb7b59;
    background-image: repeating-linear-gradient(-45deg, #eb7b59, #eb7b59 30px, #f09f87 30px, #f09f87 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    -webkit-animation: barberpole 12s linear infinite;
    -moz-animation: barberpole 12s linear infinite;
    -o-animation: barberpole 12s linear infinite;
    -ms-accelerator: barberpole 12s linear infinite;
    border-bottom: 5px solid #dd481b;
}

.bar.lila {
    background-color: #524656;
    background-image: repeating-linear-gradient(-45deg, #524656, #524656 30px, #6d5d72 30px, #6d5d72 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    -webkit-animation: barberpole 12s linear infinite;
    -moz-animation: barberpole 12s linear infinite;
    -ms-accelerator: barberpole 12s linear infinite;
    -o-animation: barberpole 12s linear infinite;
    border-bottom: 5px solid #2a242c;
}

.bar.gray {
    background-color: #595b5a;
    background-image: repeating-linear-gradient(-45deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    -webkit-animation: barberpole 12s linear infinite;
    -moz-animation: barberpole 12s linear infinite;
    -ms-accelerator: barberpole 12s linear infinite;
    -o-animation: barberpole 12s linear infinite;
    border-bottom: 5px solid #333434;
}

.bar.blue {
    background-color: blueviolet;
    background-image: repeating-linear-gradient(-45deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    -webkit-animation: barberpole 12s linear infinite;
    -moz-animation: barberpole 12s linear infinite;
    -o-animation: barberpole 12s linear infinite;
    -ms-accelerator: barberpole 12s linear infinite;
    border-bottom: 5px solid #333434;
}

.bar.green {
    background-color: green;
    background-image: repeating-linear-gradient(-45deg, #cf4647, #cf4647 30px, #da6e6f 30px, #da6e6f 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    -webkit-animation: barberpole 12s linear infinite;
    -moz-animation: barberpole 12s linear infinite;
    -o-animation: barberpole 12s linear infinite;
    -ms-accelerator: barberpole 12s linear infinite;
    border-bottom: 5px solid #dd481b;
}

.bar.active:after,
.bar.active:before {
    opacity: 1;
    font-size: 16px;
}

.bar:before {
    content: attr(data-skill);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    height: 40px;
    font-style: italic;
    opacity: 0;
    transition: opacity 2s 0.6s;
    -webkit-transition: opacity 2s 0.6s;
    -moz-transition: opacity 2s 0.6s;
    -ms-transition: opacity 2s 0.6s;
    -o-animation: opacity 2s 0.6s;
}

.bar:after {
    content: attr(data-percent) "%";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    padding: 10px;
    opacity: 0;
    transition: opacity 2s 0.6s;
    -webkit-transition: opacity 2s 0.6s;
    -moz-transition: opacity 2s 0.6s;
    -ms-transition: opacity 2s 0.6s;
    -o-animation: opacity 2s 0.6s;
}

@keyframes barberpole {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 600px 0%;
    }
}

@-webkit-keyframes barberpole {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 600px 0%;
    }
}

@-moz-keyframes barberpole {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 600px 0%;
    }
}

@-ms-keyframes barberpole {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 600px 0%;
    }
}

@-o-keyframes barberpole {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 600px 0%;
    }
}

.bar.active[data-percent="5"] {
    width: 5%;
}

.bar.active[data-percent="10"] {
    width: 10%;
}

.bar.active[data-percent="15"] {
    width: 15%;
}

.bar.active[data-percent="20"] {
    width: 20%;
}

.bar.active[data-percent="25"] {
    width: 25%;
}

.bar.active[data-percent="30"] {
    width: 30%;
}

.bar.active[data-percent="35"] {
    width: 35%;
}

.bar.active[data-percent="40"] {
    width: 40%;
}

.bar.active[data-percent="45"] {
    width: 45%;
}

.bar.active[data-percent="50"] {
    width: 50%;
}

.bar.active[data-percent="55"] {
    width: 55%;
}

.bar.active[data-percent="60"] {
    width: 60%;
}

.bar.active[data-percent="65"] {
    width: 65%;
}

.bar.active[data-percent="70"] {
    width: 70%;
}

.bar.active[data-percent="75"] {
    width: 75%;
}

.bar.active[data-percent="80"] {
    width: 80%;
}

.bar.active[data-percent="85"] {
    width: 85%;
}

.bar.active[data-percent="90"] {
    width: 90%;
}

.bar.active[data-percent="95"] {
    width: 95%;
}

.bar.active[data-percent="100"] {
    width: 100%;
}

/* 留言板 */
.form-box .banner-img{
    width: 95%;
    height: 70%;
    margin-left: 2%;
    margin-right: -2%;
}
.form-box .textarea{
    width: 93%;
    height: 100px;
    margin-top: 3%;
    font-size: 16px;
    margin-left: 2%;
    padding-top: 2px;
    margin-right: -2%;
    padding-left: 4px;
}
.form-box .layuiBtn{
    background-color: deepskyblue;
    width: 50px;
    height: 35px;
    border-radius: 5%;
    border: none;
    font-size: 16px;
    float: right;
    margin-right: 5%;
  
}
.form-box ul{
    width: 95%;
    margin-top: 12%;
}
.remark li{
    width: 95%;
    margin-bottom: 3%;
    height: 35px;
    background-color: lightgrey;
    margin-left: 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    box-shadow: 1px 0 6px #d4ebe0;
}
/* 响应式按钮 */
.article{
    position: absolute;
    top: 15%;
    left: 88%;
    
}