.placeholder-text {
    display: block;
    height: 1em;
    margin: 0.25em 0px;
    background: rgba(0, 0, 0, 0.1);
}

.placeholder-img {
    display: block;
    background: rgba(0, 0, 0, 0.1);
}

.banner {
    background: #4955f5 url(https://wx.100xuexi.com/images/aicourse/banner.jpg) center top no-repeat;
    text-align: center;
    position: relative;
}

.banner .banner-inner {
    width: 1120px;
    margin: 0px auto;
}

.banner .banner-btns {
    position: absolute;
    bottom: 160px;
    left: 0px;
    right: 0px;
    text-align: center;
}

.banner .banner-btns .btn-join {
    display: inline-block;
    border-radius: 100px;
    background: #ffffff;
    color: #e53737;
    padding: 10px 1em;
    font-weight: bold;
    font-size: 20px;
    background: linear-gradient(#ffffff, #efebff);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}


.mid {
    width: 1120px;
    margin: -100px auto 0px auto;
    position: relative;
    z-index: 10;
    font-size: 15px;
}
.fandq{
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 40px;
}
.fandq .fandq-inner{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.fandq .fandq-inner .fandq-item .item-inner{
    text-align: center;
    display: block;
}
.fandq .fandq-inner .fandq-item .item-inner .icon{
    display: block;
    width: 80px;
    height: 80px;
    margin: 0px auto 10px auto;
}
.fandq .fandq-inner .fandq-item .item-inner .icon img{
    width: 100%;
    height: 100%;
}
.fandq .fandq-inner .fandq-item .item-inner .item-title{

}

.advantages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    background: #e1e2ff;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 40px;
}

.advantages .advantages-item {
    text-align: left;
}

.advantages .advantages-item .item-inner {
    border-radius: 8px;
    background: #ffffff;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    position: relative;
}

.advantages .advantages-item .item-des {
    flex: 1;
    margin-left: 5px;
}

.advantages .advantages-item .item-title {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.advantages .advantages-item .item-no {
    color: #ffffff;
    border-radius: 100px;
    background: #000000;
    border-radius: 100px 100px 0px 100px;
    width: 1.5em;
    height: 1.5em;
    display: block;
    text-align: center;
    margin-right: 5px;
    font-size: 18px;
}

.advantages .advantages-item .item-title-text {
    flex: 1;
    font-weight: bold;
}

.advantages .advantages-item .item-sub {}

.advantages .advantages-item-copy .item-inner {
    background: linear-gradient(45deg, #ecf2ff, #ffffff);
    border-radius: 20px 0px 0px 20px;
}

.advantages .advantages-item-copy .item-title {
    color: #0055cc;
}

.advantages .advantages-item-copy .item-no {
    background: #0055cc;
}

.advantages .advantages-item-money .item-inner {
    background: linear-gradient(45deg, #fff5e4, #ffffff);
    border-radius: 0px;
}

.advantages .advantages-item-money .item-title {
    color: #cc3300;
}

.advantages .advantages-item-money .item-no {
    background: #cc3300;
}

.advantages .advantages-item-tool .item-inner {
    background: linear-gradient(45deg, #f0edff, #ffffff);
    border-radius: 0px;
}

.advantages .advantages-item-tool .item-title {
    color: #806bea;
}

.advantages .advantages-item-tool .item-no {
    background: #806bea;
}

.advantages .advantages-item-doc .item-inner {
    background: linear-gradient(45deg, #eefae9, #ffffff);
    border-radius: 0px 20px 20px 0px;
}

.advantages .advantages-item-doc .item-title {
    color: #4da12f;
}

.advantages .advantages-item-doc .item-no {
    background: #4da12f;
}

.advantages .advantages-item .item-icon {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    opacity: 0.1;
}

.advantages .advantages-item .item-icon img {
    width: 100%;
    height: 100%;
}

.lastest-task {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #ffffff;
    background: #f0f0f0;
    margin-bottom: 40px;
}

.lastest-task .lastest-task-tabs {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.lastest-task .lastest-task-tabs .tab-item {
    text-align: center;
    line-height: 20px;
    border-radius: 18px 18px 0px 0px;
    font-size: 20px;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

.lastest-task .lastest-task-tabs .tab-item .item-inner {
    display: block;
    padding: 20px 30px;
}

.lastest-task .lastest-task-tabs .tab-item.selected {
    font-weight: bold;
    background: #ffffff;
    color: #e53737;
    border: 2px solid #e53737;
    border-bottom: none;
}

.lastest-task .lastest-task-tabs .tab-item.selected .item-inner {
    background: linear-gradient(#ffe3e3, #ffffff);
    color: #e53737;
}

.lastest-task .lastest-task-tabs .tab-item.selected::after {
    display: none;
}

.lastest-task .lastest-task-content {
    border: 2px solid #e53737;
    border-radius: 0px 20px 20px 20px;
    overflow: hidden;
    margin-top: -2px;
    background: #ffffff;
}

.lastest-task .lastest-task-title {
    display: flex;
    align-items: center;
    padding: 16px 16px 0px 16px;
}

.lastest-task .lastest-task-title .title-text {
    font-weight: bold;
    font-size: 17px;
    flex: 1;
}

.lastest-task .lastest-task-title .btn-more {
    background: url(https://wx.100xuexi.com/images/Mobile_bg0019_3.png) right center no-repeat;
    background-size: auto 20px;
    display: block;
    padding-right: 10px;
}

.lastest-task .btn-container {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0px;
}

.lastest-task .btn-container .btn {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    line-height: 40px;
    display: block;
    border-radius: 100px;
    font-size: 15px;
    color: #e53737;
    background: #ffe3e3;
    margin: 0px 5px;
    padding: 0px 3em;
}

.lastest-task .getting-list {
    margin: 16px 16px 16px 16px;
    border-radius: 8px;
    /* background: rgba(0, 0, 0, 0.05); */
    background: #fff6e4;
    padding: 10px;
    display: none;
}

.lastest-task .getting-list .swiper {
    height: 1.5em;
    overflow: hidden;
}

.lastest-task .getting-list .getting-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lastest-task .getting-list .getting-item .bi {
    color: #cc6600;
    margin-right: 3px;
}

.lastest-task .task-list {
    padding: 6px 16px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.lastest-task .task-list .task-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin: 10px;
}

.lastest-task .task-list .task-item:hover {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.lastest-task .task-list .task-item .bi {
    line-height: 1;
    color: #5c35ca;
    margin-right: 5px;
}

.lastest-task .task-list .task-item .task-name {
    position: relative;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lastest-task .task-list .task-item  .task-coin{
    flex: 1;
    white-space: nowrap;
    margin-left: 10px;
}
.lastest-task .task-list .task-item  .task-coin .coin-body{
    display: inline-block;
    background: #fff6e4;
    color: #cc6600;
    border-radius: 4px;
    padding: 2px 3px;
    line-height: 1;
    font-size: 12px;
}
.lastest-task .task-list .btn-get {
    border-radius: 100px;
    background: #e53737;
    color: #ffffff;
    padding: 5px 1em;
    white-space: nowrap;
    margin-left: 10px;
}






.all-task-list .task-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin: 10px;
}

.all-task-list .task-item:hover {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.all-task-list .task-item .bi {
    line-height: 1;
    color: #5c35ca;
    margin-right: 5px;
}

.all-task-list .task-item .task-name {
    position: relative;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.all-task-list .task-item  .task-coin{
    flex: 1;
    white-space: nowrap;
    margin-left: 10px;
}
.all-task-list .task-item  .task-coin .coin-body{
    display: inline-block;
    background: #fff6e4;
    color: #cc6600;
    border-radius: 4px;
    padding: 2px 3px;
    line-height: 1;
    font-size: 12px;
}
.all-task-list .task-item .btn-get {
    border-radius: 100px;
    background: #ffe3e3;
    color: #e53737;
    padding: 5px 1em;
    white-space: nowrap;
    margin-left: 10px;
}

.all-task-list .load-status {
    padding: 16px;
}

.all-task-list .load-status .btn-load-more {
    background: #f5f5f5;
    border-radius: 8px;
    text-align: center;
    display: block;
    line-height: 48px;
    color: #336699;

}

.all-task-list .load-status .is-loading {
    text-align: center;
    display: block;
    line-height: 48px;
    color: #888888;
}

.all-task-list .load-status .is-loading::before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    background: url(https://wx.100xuexi.com/images/loading-1.gif) center center no-repeat;
    background-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.all-task-list .load-status .has-loaded-all {
    text-align: center;
    display: block;
    line-height: 48px;
    color: #888888;
}

.report-form {
    padding: 20px;
}
.report-form .form-item {
    padding: 10px 0px;
}

.report-form .form-item .item-title {
    margin-bottom: 5px;
}

.report-form .text-area {
    width: 100%;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 15px;
    height: 80px;
    resize: none;
}

.report-form .text-area:focus {
    background: #ffffff;
}

.report-form .text-box {
    width: 100%;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0px 10px;
    box-sizing: border-box;
    font-size: 15px;
    height: 40px;
}

.report-form .text-box:focus {
    background: #ffffff;
}

.report-form .other-contact {
    padding-top: 10px;
}

.report-form .other-contact a {
    color: #336699;
    border-bottom: 1px solid;
}



.task-tips {
    text-align: center;
    padding: 16px;
    display: none;
}

.task-tips a {
    color: #336699;
    border-bottom: 1px solid;
}


.task-seach {
    background: #f5f5f5;
    z-index: 1000;
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0px 50px;
    border-radius: 100px;
    overflow: hidden;
}

.task-seach .text-search-box {
    flex: 1;
    background: #f3f3f3 url(https://wx.100xuexi.com/images/Mobile_bg0333.png) 10px center no-repeat;
    background-size: 12px 12px;
    height: 36px;
    padding: 0px 10px 0px 30px;
}

.task-seach .text-search-box input {
    border: none;
    border-radius: 0px;
    height: 36px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    background: transparent;
}

.task-seach .btn-search {
    padding: 0px 10px;
    line-height: 30px;
    font-size: 14px;
    background: #e53737;
    color: #ffffff;
    border-radius: 100px;
}

.common-dialog {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.75);
    display: none;
}

.common-dialog .dialog {
    background: #ffffff;
    border-radius: 20px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 80%;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;

}

.common-dialog .dialog .dialog-title {
    display: flex;
    align-items: center;
    padding: 20px;
    justify-content: space-between;
}

.common-dialog .dialog .dialog-title .title-text {
    font-weight: bold;
    font-size: 20px;
}

.common-dialog .dialog .dialog-title .btn-close {
    font-size: 20px;
}

.common-dialog .dialog .dialog-content {
    flex: 1;
    overflow: auto;
}

.common-dialog .dialog .foot-btns {
    display: flex;
    padding: 20px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.common-dialog .dialog .foot-btns .btn {
    background: #e53737;
    color: #ffffff;
    display: inline-block;
    border-radius: 100px;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    padding: 0px 2em;
    margin: 0px 1em;
}

.common-dialog .dialog .foot-btns .btn-my-task {
    background: #ffe3e3;
    color: #e53737;
}
.award-tips{
    padding: 15px 20px;
    color: #ffffff;
    text-align: center;
    background: #e53737;
    display: none;
}
.award-tips .num{
    font-weight: bold;
    padding: 0px 5px;
}
.task-require {
    padding: 20px;
}

.task-require .require-title {
    text-align: center;
    font-size: 17px;
}

.task-require .require-title .title-sub-text {
    /* font-size: 14px; */
    text-align: center;
}

.task-require .require-title .title-text {
    position: relative;
    display: inline-block;
    z-index: 1;
    font-weight: bold;
}

.task-require .require-title .title-text::before {
    content: "";
    display: block;
    left: -0.5em;
    right: -0.5em;
    bottom: 0px;
    height: 10px;
    z-index: -1;
    position: absolute;
    background: #ffcc00;
    border-radius: 10px;
}

.task-require .require-content {
    font-size: 15px;
}

.task-require .require-content ol {
    /* list-style:decimal; */
    margin-left: 1.5em;
}

.task-require .require-content ol li {
    padding: 0.25em 0px;
    list-style: decimal;
}

.task-require .require-content a {
    color: #336699;
}

.require-content-body {
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgba(230, 0, 0, 0.2);
    border-top: 3px solid #e53737;
}


.task-step {
    background: #ffffff;
    padding: 10px 16px;
    border: 1px dashed rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin: 20px auto;

}

.task-step .task-step-title {
    margin-bottom: 10px;
    text-align: center;
}

.task-step .step-content {
    display: flex;
    text-align: center;
}

.task-step .step-content .step-item {
    flex: 1;
    position: relative;
}

.task-step .step-content .step-item .item-no {
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    display: block;
    margin: 0px auto 5px auto;
    background: #f5f5f5;
    border-radius: 100%;
    position: relative;
    z-index: 1;
}

.task-step .step-content .step-item::before {
    content: "";
    display: block;
    height: 2px;
    margin-top: -1px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 1em;
    background: rgba(0, 0, 0, 0.05);
    z-index: 0;
}



.lastest-course {
    background: #ffffff;
    border-radius: 20px;
    background: linear-gradient(#e1e2ff, #ffffff 20%);
    border: 1px solid #ffffff;
    margin-bottom: 40px;
}

.lastest-course .lastest-course-title {
    display: flex;
    align-items: center;
    padding: 30px 30px 0px 30px;
}

.lastest-course .lastest-course-title .title-text {
    font-weight: bold;
    font-size: 20px;
    flex: 1;
}

.lastest-course .lastest-course-title .btn-more {
    background: url(https://wx.100xuexi.com/images/Mobile_bg0019_3.png) right center no-repeat;
    background-size: auto 12px;
    display: block;
    padding-right: 10px;
}

.lastest-course .course-list {
    padding: 0px 15px;
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

.lastest-course .course-list .item {
    overflow: hidden;
    flex: 1;
    min-width: 20%;
    max-width: 20%;
}

.lastest-course .course-list .item-inner {
    display: block;
    margin: 15px;
    overflow: hidden;
}

.lastest-course .course-list .item-imgbox {
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 8px;
}

.lastest-course .course-list .item-img {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.lastest-course .course-list .placeholder-img {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.lastest-course .course-list .item-imgbox::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.lastest-course .course-list .item-imgbox::after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.lastest-course .course-list .item-imgbox .item-imgbox-bg {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    filter: blur(20px);
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    background: #ffffff center center no-repeat;
    background-size: cover;
}

.lastest-course .course-list .item-imgbox .item-imgbox-main {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: center center no-repeat;
    background-size: contain;
}


.lastest-course .course-list .free-tag {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    background: url(https://wx.100xuexi.com/images/Mobile_bg0691.png) right top no-repeat;
    background-size: 100% 100%;
    text-indent: -9999em;
    overflow: hidden;
    z-index: 10;
}

.lastest-course .course-list .item-des {
    padding-top: 10px;
}

.lastest-course .course-list .item-title {
    margin-bottom: 10px;
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
    min-height: 3em;
}
.lastest-course .course-list .product-type {
    border: 1px solid;
    border-radius: 3px;
    margin-right: 3px;
    font-size: 12px;
    color: #999999;
    padding: 0px 3px;
}
.lastest-course .course-list .product-name {


}


.tool-entry {
    display: grid;
    /* 两列 */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    background: linear-gradient(#e1e2ff, #e9deff, #eaebff, rgba(255, 255, 255, 0));
    padding: 30px;
    border-radius: 12px 12px 0px 0px;
    margin-bottom: 20px;
}


.tool-entry .tool-item .item-inner {
    display: block;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 1px solid #ffffff;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}

.tool-entry .tool-item.tool-item-video .item-inner{
    background: linear-gradient(120deg, #ffffff,  #eaebff);
}

.tool-entry .tool-item.tool-item-picbook .item-inner{
    background: linear-gradient(120deg, #ffffff,  #fff6e4);
}


.tool-entry .tool-item .item-inner .item-imgbox {
    border-radius: 8px 0px 8px 8px;
    background: center center no-repeat;
    background-size: cover;
    width: 180px;
    margin-right: 10px;
    transform: skewX(-20deg);
    margin-left: -20px;
}

.tool-entry .tool-item .item-inner .item-imgbox::before {
    display: block;
    content: "";
    padding-top: 60%;
}

.tool-entry .tool-item .item-inner .item-body {
    padding: 20px;
    flex: 1;
}

.tool-entry .tool-item .item-inner .item-title {
    display: block;
    font-size: 20px;
    position: relative;
    z-index: 1;
    font-weight: bold;
}

.tool-entry .tool-item .item-inner .item-des {
    /* margin-top: 5px; */
    display: block;
    position: relative;
    z-index: 1;
}

.tool-entry .tool-item.tool-item-video .item-title {
    color: #0664ff;
}

.tool-entry .tool-item.tool-item-picbook .item-title {
    color: #e38800;
}


.tool-entry .tool-item .item-inner .btn-entry {
    display: block;
    margin-right: 20px;
    padding: 8px 15px;
    background: #0664ff;
    color: #ffffff;
    border-radius: 20px;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.tool-entry .tool-item.tool-item-video .btn-entry {
    background: #0664ff;
}

.tool-entry .tool-item.tool-item-picbook .btn-entry {
    background: #e38800;
}

.tool-entry .tool-item.tool-item-video .item-inner .item-imgbox {
    background: #0664ff url(https://wx.100xuexi.com/images/entry-video.png) center bottom no-repeat;
    background-size: auto 100%
}

.tool-entry .tool-item.tool-item-picbook .item-inner .item-imgbox {
    background: #e38800 url(https://wx.100xuexi.com/images/entry-picbook.png) center bottom no-repeat;
    background-size: auto 100%
}
/* 
.tool-entry .tool-item .item-inner {
    padding: 15px;
    display: block;
    border-radius: 12px;
    background: var(--el-fill-color);
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.tool-entry .tool-item .item-inner .item-title {
    display: block;
    font-size: 17px;
    color: #fff;
    position: relative;
    z-index: 1
}

.tool-entry .tool-item .item-inner .item-des {
    margin-top: 5px;
    display: block;
    color: #ffffffbf;
    position: relative;
    z-index: 1
}

.tool-entry .tool-item .item-inner .btn-entry {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 15px;
    background: #fff3;
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    position: relative;
    z-index: 1;
    transition: background .3s
}

.tool-entry .tool-item .item-inner .btn-entry:hover {
    background: #fff6
}

.tool-entry .tool-item .item-inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0
}

.tool-entry .tool-item.tool-item-video .item-inner {
    background: #0664ff url(https://wx.100xuexi.com/images/entry-video.png) right center no-repeat;
    background-size: 60% auto
}

.tool-entry .tool-item.tool-item-video .item-inner:before {
    background: linear-gradient(to right,#0664ff 50%,rgba(0,0,0,0) 80%)
}

.tool-entry .tool-item.tool-item-picbook .item-inner {
    background: #e38800 url(https://wx.100xuexi.com/images/entry-picbook.png) right center no-repeat;
    background-size: 60% auto
}

.tool-entry .tool-item.tool-item-picbook .item-inner:before {
    background: linear-gradient(to right,#e38800 50%,rgba(0,0,0,0) 80%)
} */


.task-tip {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    display: none;
}

.task-tip .task-title {
    display: flex;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}


.about-us{
    background: #ffffff;
    padding:30px;
    border-radius: 12px;
}
.about-us .about-us-title{
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    position: relative;
    padding-bottom: 10px;
}
.about-us .about-us-title::before{
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    width: 2em;
    margin-left: -1em;
    bottom: 0;
    border-radius: 100%;
    height: 20px;
    border: 3px solid #e53737;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    box-sizing: border-box;
}
.about-us .about-us-content{
    margin-top: 10px;
}
.about-us .about-us-content p{
    padding: 0.3em 0px;
}


.bot {
    text-align: center;
    padding: 50px 0px 250px 0px;
}

.quick-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    ;
    background: #ffffff;
    z-index: 100;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: all 0.3s;

}

.quick-entry .quick-entry-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-entry .quick-item {
    display: block;
    padding: 10px;
    width: 10em;
}

.quick-entry .quick-item .item-inner {
    background: #5c35ca;
    border-radius: 100px;
    display: block;
    text-align: center;
    color: #ffffff;
    line-height: 40px;
}

.quick-entry .quick-item .btn-plat-rule {
    background: #efeaff;
    color: #5c35ca;
}

.quick-entry.show {
    transform: translateY(0);
}

.confirm-maker-agreement{
    max-width: 800px;
}
.confirm-maker-agreement .msg-con{
    padding: 0px;
}
.iframe-agreement{
    width: 100%;
    border: none;
    padding: 0px;
    margin: 0px;
    height: 400px;
    display: block;
}
.confirm-maker-editorreward{
    border: 5px solid #e53737;
    border-radius: 20px;
    padding: 0px 20px 20px 20px;
}
.confirm-maker-editorreward .msg-title{
    padding: 0px 0px 20px 0px
}
.confirm-maker-editorreward .msg-title .msg-title-text{
    display: inline-block;
    color: #ffffff;
    border-radius: 0px 0px 15px 15px;
    background: #e53737;
    padding: 10px 20px;
    vertical-align: top;
}
.confirm-maker-editorreward .msg-title .msg-title-text .bi {
    margin-right: 5px;
}
.confirm-maker-editorreward .reward-strong{
    font-weight: bold;
    color:#e53737;
    font-size: 24px;
}

.confirm-maker-editorreward .reward-progress{
    border-radius: 100px;
    background: #d5d5d5;
    height: 10px;
    margin-top: 10px;
}
.confirm-maker-editorreward .reward-progress .progress-inner{
    background: #e53737;
    height: 100%;
    border-radius: 100px;
    width: 0%;
    transition: all 0.5s;
}
.confirm-maker-editorreward .msg-foot .confirm-btns{
    overflow: visible;
}
.confirm-maker-editorreward .msg-foot:after{
    display: none;
}
.confirm-maker-editorreward .msg-foot .confirm-btns li:after{
    display: none;
}
.confirm-maker-editorreward .msg-foot li{
    padding: 0px 5px;
    box-sizing: border-box;
}
.confirm-maker-editorreward .msg-foot .btn-no{
    border-radius: 100px;
    background: #f5f5f5;
}
.confirm-maker-editorreward .msg-foot .btn-ok{
    background: #e53737;
    color: #ffffff;
    border-radius: 100px;
    animation: AmtClick 1s ease-in-out infinite normal;
    -webkit-animation: AmtClick 1s ease-in-out infinite normal;
}
@keyframes AmtClick {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}