html {
    font-size: 4.2666666667vw;
    max-width: 46.875rem;
    margin: 0 auto
}

@media (max-width: 767px) {
  body {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  body {
    max-width: 800px;
    margin: 0 auto;
  }
}

.tf_guild .showcase>.content .decor:after {
    background: #a43cff
}

.tf_guild .showcase>.content .link {
    background: #a43cff
}

.tf_guild .showcase>.content .exp {
    border: .0625rem solid #a43cff
}

.main {
    width: 100%;
    height: 100%;
 
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    position: relative
}

.main .view {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    -moz-box-flex: 1;
    flex: 1 1 0;
    
}

.main .coursr_layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 5;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column
}

.main .coursr_layer .scroll {
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    -moz-box-flex: 1;
    flex: 1 1 0;
 
}

.back_nav,
.back_nav .back {
    position: relative
}

.back_nav .back {
    height: 2.8125rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    z-index: 2;
    padding: 0 .9375rem
}

.back_nav .back .img {
    display: block;
    height: .875rem
}

.back_nav .p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    text-align: center;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.post {
    width: 100%;
    display: block
}

.download {
    color: #fff;
    padding: .5rem 0
}

.download,
.download .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center
}

.download .item {
    width: 10.3125rem;
    height: 3rem;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;
    background: -webkit-gradient(linear, left top, right top, from(#e330c4), to(#8820dc));
    background: -webkit-linear-gradient(left, #e330c4, #8820dc);
    background: -moz-linear-gradient(left, #e330c4, #8820dc);
    background: -o-linear-gradient(left, #e330c4, #8820dc);
    background: linear-gradient(90deg, #e330c4, #8820dc);
    margin: 0 .625rem;
    font-size: .875rem;
    font-weight: 700
}

.download .item img {
    width: .9375rem;
    height: 1.125rem;
    display: block;
    margin-right: .3125rem
}

.banner,
.banner .slide,
.banner .slide .item {
    width: 100%
}

.banner .agile__actions {
    position: absolute;
    z-index: 2;
    bottom: 1.875rem;
    left: 0;
    width: 100%
}

.banner .agile__dots {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.banner .agile__dots .agile__dot {
    width: .5rem;
    height: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border-radius: .5rem;
    border: .0625rem solid #323232;
    margin: 0 .3125rem
}

.banner .agile__dots .agile__dot.agile__dot--current {
    border: none;
    background: #fff
}

.banner .agile__dots .agile__dot button {
    opacity: 0!important;
    width: 100%;
    height: 100%
}

.course_choose {
    text-align: center;
    background: #1a1e1f;
    color: #fff;
    padding-top: 3.125rem;
    padding-bottom: 6.25rem
}

.course_choose .items .img {
    display: block;
    width: 6.875rem
}

.course_choose .big {
    font-size: 1.375rem
}

.course_choose .small {
    margin: .9375rem auto;
    font-size: .875rem
}

.course_choose .small.fc_c2c2c2 {
    margin: 0 .875rem 3.125rem .875rem
}

.course_choose .fc_F86503 {
    color: #f86503
}

.course_choose .fc_038EDC {
    color: #038edc
}

.course_choose .fc_c2c2c2 {
    color: #c2c2c2
}

.course_choose .brands {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center
}

.course_choose .brands .items {
    margin: .4375rem
}

.contact {
    margin: .625rem 1.875rem;
    color: #fff
}

.contact,
.contact .right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.contact .right {
    margin-left: .625rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    -moz-box-flex: 1;
    flex: 1 1 0;
    height: 1.625rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    background: hsla(0, 0%, 100%, .3);
    -webkit-border-radius: .8125rem;
    -moz-border-radius: .8125rem;
    border-radius: .8125rem
}

.brand_card {
    width: 6.875rem;
    height: 7.5rem;
    background: #fff;
    -webkit-border-radius: .4375rem;
    -moz-border-radius: .4375rem;
    border-radius: .4375rem;
     
}

.brand_card .box {
    width: 4.5rem;
    height: 1.625rem;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    border-radius: .25rem;
    background: -webkit-gradient(linear, left top, right top, from(#e330c4), to(#8820dc));
    background: -webkit-linear-gradient(left, #e330c4, #8820dc);
    background: -moz-linear-gradient(left, #e330c4, #8820dc);
    background: -o-linear-gradient(left, #e330c4, #8820dc);
    background: linear-gradient(90deg, #e330c4, #8820dc);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    font-size: .75rem;
    color: #fff;
    margin: 1.1875rem auto .8125rem auto
}

.brand_card .big {
    font-size: .75rem;
    color: #1a1e1f
}

.brand_card .small {
    font-size: .625rem;
    color: #038edc;
    margin-top: .625rem
}

.bg-qiezi {
    background: -webkit-gradient(linear, left top, right top, from(#e330c4), to(#8820dc))!important;
    background: -webkit-linear-gradient(left, #e330c4, #8820dc)!important;
    background: -moz-linear-gradient(left, #e330c4, #8820dc)!important;
    background: -o-linear-gradient(left, #e330c4, #8820dc)!important;
    background: linear-gradient(90deg, #e330c4, #8820dc)!important
}

.bg-xiangjiao {
    background: -webkit-gradient(linear, left top, right top, color-stop(1%, #ffd800), color-stop(99%, #ffab00))!important;
    background: -webkit-linear-gradient(left, #ffd800 1%, #ffab00 99%)!important;
    background: -moz-linear-gradient(left, #ffd800 1%, #ffab00 99%)!important;
    background: -o-linear-gradient(left, #ffd800 1%, #ffab00 99%)!important;
    background: linear-gradient(90deg, #ffd800 1%, #ffab00 99%)!important
}

.bg-boluo {
    background: -webkit-linear-gradient(136deg, #f27e19, #ffd64a)!important;
    background: -moz-linear-gradient(136deg, #f27e19 0, #ffd64a 100%)!important;
    background: -o-linear-gradient(136deg, #f27e19 0, #ffd64a 100%)!important;
    background: linear-gradient(-46deg, #f27e19, #ffd64a)!important
}

.bg-caoliu {
    background: #127884!important
}

.bg-caomei {
    background: -webkit-gradient(linear, left top, right top, color-stop(1%, #fe86c9), color-stop(99%, #f73c9b))!important;
    background: -webkit-linear-gradient(left, #fe86c9 1%, #f73c9b 99%)!important;
    background: -moz-linear-gradient(left, #fe86c9 1%, #f73c9b 99%)!important;
    background: -o-linear-gradient(left, #fe86c9 1%, #f73c9b 99%)!important;
    background: linear-gradient(90deg, #fe86c9 1%, #f73c9b 99%)!important
}

.bg-chaopeng {
    background: -webkit-gradient(linear, left top, right top, from(#50dc96), to(#0da798))!important;
    background: -webkit-linear-gradient(left, #50dc96, #0da798)!important;
    background: -moz-linear-gradient(left, #50dc96 0, #0da798 100%)!important;
    background: -o-linear-gradient(left, #50dc96 0, #0da798 100%)!important;
    background: linear-gradient(90deg, #50dc96, #0da798)!important
}

.bg-ganzhe {
    background: -webkit-gradient(linear, left top, right top, color-stop(1%, #8c6cae), color-stop(99%, #2e0038))!important;
    background: -webkit-linear-gradient(left, #8c6cae 1%, #2e0038 99%)!important;
    background: -moz-linear-gradient(left, #8c6cae 1%, #2e0038 99%)!important;
    background: -o-linear-gradient(left, #8c6cae 1%, #2e0038 99%)!important;
    background: linear-gradient(90deg, #8c6cae 1%, #2e0038 99%)!important
}

.bg-f2d {
    background: -webkit-gradient(linear, left top, right top, from(#f882a7), to(#ed2ca6))!important;
    background: -webkit-linear-gradient(left, #f882a7, #ed2ca6)!important;
    background: -moz-linear-gradient(left, #f882a7 0, #ed2ca6 100%)!important;
    background: -o-linear-gradient(left, #f882a7 0, #ed2ca6 100%)!important;
    background: linear-gradient(90deg, #f882a7, #ed2ca6)!important
}

.bg-hmg {
    background: -webkit-linear-gradient(312deg, #7bb03f, #7db33f)!important;
    background: -moz-linear-gradient(312deg, #7bb03f 0, #7db33f 100%)!important;
    background: -o-linear-gradient(312deg, #7bb03f 0, #7db33f 100%)!important;
    background: linear-gradient(138deg, #7bb03f, #7db33f)!important
}

.bg-jiucao {
    background: #ff527b!important
}

.bg-lizhi {
    background: -webkit-gradient(linear, left bottom, left top, from(#161616), color-stop(100%, #353535), to(#353535))!important;
    background: -webkit-linear-gradient(bottom, #161616, #353535 100%, #353535 0)!important;
    background: -moz-linear-gradient(bottom, #161616 0, #353535 100%, #353535 100%)!important;
    background: -o-linear-gradient(bottom, #161616 0, #353535 100%, #353535 100%)!important;
    background: linear-gradient(0deg, #161616, #353535 100%, #353535 0)!important
}

.bg-luobo {
    background: -webkit-gradient(linear, left top, right top, from(#faab70), to(#f66907))!important;
    background: -webkit-linear-gradient(left, #faab70, #f66907)!important;
    background: -moz-linear-gradient(left, #faab70 0, #f66907 100%)!important;
    background: -o-linear-gradient(left, #faab70 0, #f66907 100%)!important;
    background: linear-gradient(90deg, #faab70, #f66907)!important
}

.bg-mangguo {
    background: -webkit-gradient(linear, left top, right top, color-stop(1%, #ffd800), color-stop(99%, #ffab00))!important;
    background: -webkit-linear-gradient(left, #ffd800 1%, #ffab00 99%)!important;
    background: -moz-linear-gradient(left, #ffd800 1%, #ffab00 99%)!important;
    background: -o-linear-gradient(left, #ffd800 1%, #ffab00 99%)!important;
    background: linear-gradient(90deg, #ffd800 1%, #ffab00 99%)!important
}

.bg-miju {
    background: -webkit-linear-gradient(238deg, #fcc83c, #f66d1d)!important;
    background: -moz-linear-gradient(238deg, #fcc83c 0, #f66d1d 100%)!important;
    background: -o-linear-gradient(238deg, #fcc83c 0, #f66d1d 100%)!important;
    background: linear-gradient(212deg, #fcc83c, #f66d1d)!important
}

.bg-myg {
    background: #de1d53!important
}

.bg-mogu {
    background: -webkit-gradient(linear, left top, right top, color-stop(1%, #1b9be7), color-stop(99%, #b911dd))!important;
    background: -webkit-linear-gradient(left, #1b9be7 1%, #b911dd 99%)!important;
    background: -moz-linear-gradient(left, #1b9be7 1%, #b911dd 99%)!important;
    background: -o-linear-gradient(left, #1b9be7 1%, #b911dd 99%)!important;
    background: linear-gradient(90deg, #1b9be7 1%, #b911dd 99%)!important
}

.bg-naicha {
    background: -webkit-gradient(linear, left top, right top, color-stop(1%, #e8c495), color-stop(99%, #b38850))!important;
    background: -webkit-linear-gradient(left, #e8c495 1%, #b38850 99%)!important;
    background: -moz-linear-gradient(left, #e8c495 1%, #b38850 99%)!important;
    background: -o-linear-gradient(left, #e8c495 1%, #b38850 99%)!important;
    background: linear-gradient(90deg, #e8c495 1%, #b38850 99%)!important
}

.bg-putao {
    background: #8d6caf!important
}

.bg-szs {
    background: -webkit-gradient(linear, left top, right top, from(#8ba661), to(#28341e))!important;
    background: -webkit-linear-gradient(left, #8ba661, #28341e)!important;
    background: -moz-linear-gradient(left, #8ba661 0, #28341e 100%)!important;
    background: -o-linear-gradient(left, #8ba661 0, #28341e 100%)!important;
    background: linear-gradient(90deg, #8ba661, #28341e)!important
}

.bg-shuimitao {
    background: #de1d53!important
}

.bg-xigua {
    background: #d70324!important
}

.bg-xiaoyou {
    background: -webkit-gradient(linear, left top, right top, color-stop(1%, #fca7b7), color-stop(99%, #eb7e9b))!important;
    background: -webkit-linear-gradient(left, #fca7b7 1%, #eb7e9b 99%)!important;
    background: -moz-linear-gradient(left, #fca7b7 1%, #eb7e9b 99%)!important;
    background: -o-linear-gradient(left, #fca7b7 1%, #eb7e9b 99%)!important;
    background: linear-gradient(90deg, #fca7b7 1%, #eb7e9b 99%)!important
}

.bg-xingba {
    background: #8dbf2d!important
}

.bg-yingtao {
    background: #fb4d64!important
}

.bg-yumi {
    background: #f5bb23!important
}

.bg-zmw {
    background: #f89433!important
}

.tpost {
    position: relative;
    width: 100%
}

.tpost .link {
    position: absolute;
    display: block;
    width: 18.4375rem;
    height: 3.125rem;
    z-index: 2;
    left: 2.5rem;
    bottom: 1.875rem
}

.tf_guild.caomei .showcase>.content .decor:after {
    background: #ff44a2
}

.tf_guild.caomei .showcase>.content .link {
    background: #ff44a2
}

.tf_guild.caomei .showcase>.content .exp {
    border: .0625rem solid #ff44a2
}

.tf_guild.yingtao .showcase>.content .decor:after {
    background: #fb4d64
}

.tf_guild.yingtao .showcase>.content .link {
    background: #fb4d64
}

.tf_guild.yingtao .showcase>.content .exp {
    border: .0625rem solid #fb4d64
}

.tf_guild.xiaoyou .showcase>.content .decor:after {
    background: #ff7c6a
}

.tf_guild.xiaoyou .showcase>.content .link {
    background: #ff7c6a
}

.tf_guild.xiaoyou .showcase>.content .exp {
    border: .0625rem solid #ff7c6a
}

.tf_guild.xiangjiao .showcase>.content .decor:after {
    background-image: -webkit-gradient(linear, left top, right top, from(#f8e81b), to(#ffd602));
    background-image: -webkit-linear-gradient(left, #f8e81b, #ffd602);
    background-image: -moz-linear-gradient(left, #f8e81b 0, #ffd602 100%);
    background-image: -o-linear-gradient(left, #f8e81b 0, #ffd602 100%);
    background-image: linear-gradient(90deg, #f8e81b, #ffd602)
}

.tf_guild.xiangjiao .showcase>.content .link {
    background-image: -webkit-gradient(linear, left top, right top, from(#f8e81b), to(#ffd602));
    background-image: -webkit-linear-gradient(left, #f8e81b, #ffd602);
    background-image: -moz-linear-gradient(left, #f8e81b 0, #ffd602 100%);
    background-image: -o-linear-gradient(left, #f8e81b 0, #ffd602 100%);
    background-image: linear-gradient(90deg, #f8e81b, #ffd602)
}

.tf_guild.xiangjiao .showcase>.content .exp {
    border: .0625rem solid #ffd602
}

.tf_guild.mangguo .showcase>.content .decor:after {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fb941d), to(#f7b722));
    background-image: -webkit-linear-gradient(top, #fb941d, #f7b722);
    background-image: -moz-linear-gradient(top, #fb941d 0, #f7b722 100%);
    background-image: -o-linear-gradient(top, #fb941d 0, #f7b722 100%);
    background-image: linear-gradient(180deg, #fb941d, #f7b722)
}

.tf_guild.mangguo .showcase>.content .link {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fb941d), to(#f7b722));
    background-image: -webkit-linear-gradient(top, #fb941d, #f7b722);
    background-image: -moz-linear-gradient(top, #fb941d 0, #f7b722 100%);
    background-image: -o-linear-gradient(top, #fb941d 0, #f7b722 100%);
    background-image: linear-gradient(180deg, #fb941d, #f7b722)
}

.tf_guild.mangguo .showcase>.content .exp {
    border: .0625rem solid #fb941d
}

.tf_guild.naicha .showcase>.content .decor:after {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(1%, #e8c495), color-stop(99%, #b38850));
    background-image: -webkit-linear-gradient(left, #e8c495 1%, #b38850 99%);
    background-image: -moz-linear-gradient(left, #e8c495 1%, #b38850 99%);
    background-image: -o-linear-gradient(left, #e8c495 1%, #b38850 99%);
    background-image: linear-gradient(90deg, #e8c495 1%, #b38850 99%)
}

.tf_guild.naicha .showcase>.content .link {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(1%, #e8c495), color-stop(99%, #b38850));
    background-image: -webkit-linear-gradient(left, #e8c495 1%, #b38850 99%);
    background-image: -moz-linear-gradient(left, #e8c495 1%, #b38850 99%);
    background-image: -o-linear-gradient(left, #e8c495 1%, #b38850 99%);
    background-image: linear-gradient(90deg, #e8c495 1%, #b38850 99%)
}

.tf_guild.naicha .showcase>.content .exp {
    border: .0625rem solid #e8c495
}

.tf_guild.luobo .showcase>.content .decor:after {
    background-image: -webkit-gradient(linear, left top, right top, from(#faab70), to(#f66907));
    background-image: -webkit-linear-gradient(left, #faab70, #f66907);
    background-image: -moz-linear-gradient(left, #faab70 0, #f66907 100%);
    background-image: -o-linear-gradient(left, #faab70 0, #f66907 100%);
    background-image: linear-gradient(90deg, #faab70, #f66907)
}

.tf_guild.luobo .showcase>.content .link {
    background-image: -webkit-gradient(linear, left top, right top, from(#faab70), to(#f66907));
    background-image: -webkit-linear-gradient(left, #faab70, #f66907);
    background-image: -moz-linear-gradient(left, #faab70 0, #f66907 100%);
    background-image: -o-linear-gradient(left, #faab70 0, #f66907 100%);
    background-image: linear-gradient(90deg, #faab70, #f66907)
}

.tf_guild.luobo .showcase>.content .exp {
    border: .0625rem solid #f66907
}

.tf_guild.mogu .showcase>.content .decor:after {
    background-image: -webkit-gradient(linear, left top, right top, from(#189de7), to(#bc10dd));
    background-image: -webkit-linear-gradient(left, #189de7, #bc10dd);
    background-image: -moz-linear-gradient(left, #189de7 0, #bc10dd 100%);
    background-image: -o-linear-gradient(left, #189de7 0, #bc10dd 100%);
    background-image: linear-gradient(90deg, #189de7, #bc10dd)
}

.tf_guild.mogu .showcase>.content .link {
    background-image: -webkit-gradient(linear, left top, right top, from(#189de7), to(#bc10dd));
    background-image: -webkit-linear-gradient(left, #189de7, #bc10dd);
    background-image: -moz-linear-gradient(left, #189de7 0, #bc10dd 100%);
    background-image: -o-linear-gradient(left, #189de7 0, #bc10dd 100%);
    background-image: linear-gradient(90deg, #189de7, #bc10dd)
}

.tf_guild.mogu .showcase>.content .exp {
    border: .0625rem solid #bc10dd
}

.tf_guild.ganzhe .showcase>.content .decor:after {
    background-image: -webkit-gradient(linear, left top, right top, from(#5c2f4c), to(#240029));
    background-image: -webkit-linear-gradient(left, #5c2f4c, #240029);
    background-image: -moz-linear-gradient(left, #5c2f4c 0, #240029 100%);
    background-image: -o-linear-gradient(left, #5c2f4c 0, #240029 100%);
    background-image: linear-gradient(90deg, #5c2f4c, #240029)
}

.tf_guild.ganzhe .showcase>.content .link {
    background-image: -webkit-gradient(linear, left top, right top, from(#5c2f4c), to(#240029));
    background-image: -webkit-linear-gradient(left, #5c2f4c, #240029);
    background-image: -moz-linear-gradient(left, #5c2f4c 0, #240029 100%);
    background-image: -o-linear-gradient(left, #5c2f4c 0, #240029 100%);
    background-image: linear-gradient(90deg, #5c2f4c, #240029)
}

.tf_guild.ganzhe .showcase>.content .exp {
    border: .0625rem solid #240029
}

.tf_guild.miju .showcase>.content .decor:after {
    background-image: -webkit-gradient(linear, left top, right top, from(#f2c32b), to(#f58b01));
    background-image: -webkit-linear-gradient(left, #f2c32b, #f58b01);
    background-image: -moz-linear-gradient(left, #f2c32b 0, #f58b01 100%);
    background-image: -o-linear-gradient(left, #f2c32b 0, #f58b01 100%);
    background-image: linear-gradient(90deg, #f2c32b, #f58b01)
}

.tf_guild.miju .showcase>.content .link {
    background-image: -webkit-gradient(linear, left top, right top, from(#f2c32b), to(#f58b01));
    background-image: -webkit-linear-gradient(left, #f2c32b, #f58b01);
    background-image: -moz-linear-gradient(left, #f2c32b 0, #f58b01 100%);
    background-image: -o-linear-gradient(left, #f2c32b 0, #f58b01 100%);
    background-image: linear-gradient(90deg, #f2c32b, #f58b01)
}

.tf_guild.miju .showcase>.content .exp {
    border: .0625rem solid #f58b01
}

.tf_guild.hmg .showcase>.content .decor:after {
    background: #ceef5d
}

.tf_guild.hmg .showcase>.content .link {
    background: #ceef5d
}

.tf_guild.hmg .showcase>.content .exp {
    border: .0625rem solid #ceef5d
}

.tf_guild.putao .showcase>.content .decor:after {
    background: #8d6caf
}

.tf_guild.putao .showcase>.content .link {
    background: #8d6caf
}

.tf_guild.putao .showcase>.content .exp {
    border: .0625rem solid #8d6caf
}

.tf_guild.lizhi .showcase>.content .decor:after {
    background: #d32155
}

.tf_guild.lizhi .showcase>.content .link {
    background: #d32155
}

.tf_guild.lizhi .showcase>.content .exp {
    border: .0625rem solid #d32155
}

.tf_guild.shuimitao .showcase>.content .decor:after {
    background: #fd4681
}

.tf_guild.shuimitao .showcase>.content .link {
    background: #fd4681
}

.tf_guild.shuimitao .showcase>.content .exp {
    border: .0625rem solid #fd4681
}

.tf_guild.xigua .showcase>.content .decor:after {
    background: #d70324
}

.tf_guild.xigua .showcase>.content .link {
    background: #d70324
}

.tf_guild.xigua .showcase>.content .exp {
    border: .0625rem solid #d70324
}

.tf_guild.yumi .showcase>.content .decor:after {
    background: #f5bb23
}

.tf_guild.yumi .showcase>.content .link {
    background: #f5bb23
}

.tf_guild.yumi .showcase>.content .exp {
    border: .0625rem solid #f5bb23
}

.tf_guild.caoliu .showcase>.content .decor:after {
    background: #127884
}

.tf_guild.caoliu .showcase>.content .link {
    background: #127884
}

.tf_guild.caoliu .showcase>.content .exp {
    border: .0625rem solid #127884
}

.tf_guild.chaopeng .showcase>.content .decor:after {
    background: -webkit-gradient(linear, left top, right top, from(#50dc96), to(#0da798));
    background: -webkit-linear-gradient(left, #50dc96, #0da798);
    background: -moz-linear-gradient(left, #50dc96 0, #0da798 100%);
    background: -o-linear-gradient(left, #50dc96 0, #0da798 100%);
    background: linear-gradient(90deg, #50dc96, #0da798)
}

.tf_guild.chaopeng .showcase>.content .link {
    background: -webkit-gradient(linear, left top, right top, from(#50dc96), to(#0da798));
    background: -webkit-linear-gradient(left, #50dc96, #0da798);
    background: -moz-linear-gradient(left, #50dc96 0, #0da798 100%);
    background: -o-linear-gradient(left, #50dc96 0, #0da798 100%);
    background: linear-gradient(90deg, #50dc96, #0da798)
}

.tf_guild.chaopeng .showcase>.content .exp {
    border: .0625rem solid #0da798
}

.tf_guild.f2d .showcase>.content .decor:after {
    background: -webkit-gradient(linear, left top, right top, from(#f882a7), to(#ed2ca6));
    background: -webkit-linear-gradient(left, #f882a7, #ed2ca6);
    background: -moz-linear-gradient(left, #f882a7 0, #ed2ca6 100%);
    background: -o-linear-gradient(left, #f882a7 0, #ed2ca6 100%);
    background: linear-gradient(90deg, #f882a7, #ed2ca6)
}

.tf_guild.f2d .showcase>.content .link {
    background: -webkit-gradient(linear, left top, right top, from(#f882a7), to(#ed2ca6));
    background: -webkit-linear-gradient(left, #f882a7, #ed2ca6);
    background: -moz-linear-gradient(left, #f882a7 0, #ed2ca6 100%);
    background: -o-linear-gradient(left, #f882a7 0, #ed2ca6 100%);
    background: linear-gradient(90deg, #f882a7, #ed2ca6)
}

.tf_guild.f2d .showcase>.content .exp {
    border: .0625rem solid #e330c4
}

.tf_guild.jiucao .showcase>.content .decor:after {
    background: #ff527b
}

.tf_guild.jiucao .showcase>.content .link {
    background: #ff527b
}

.tf_guild.jiucao .showcase>.content .exp {
    border: .0625rem solid #ff527b
}

.tf_guild.myg .showcase>.content .decor:after {
    background: #de1d53
}

.tf_guild.myg .showcase>.content .link {
    background: #de1d53
}

.tf_guild.myg .showcase>.content .exp {
    border: .0625rem solid #de1d53
}

.tf_guild.szs .showcase>.content .decor:after {
    background: -webkit-gradient(linear, left top, right top, from(#8ba661), to(#28341e));
    background: -webkit-linear-gradient(left, #8ba661, #28341e);
    background: -moz-linear-gradient(left, #8ba661 0, #28341e 100%);
    background: -o-linear-gradient(left, #8ba661 0, #28341e 100%);
    background: linear-gradient(90deg, #8ba661, #28341e)
}

.tf_guild.szs .showcase>.content .link {
    background: -webkit-gradient(linear, left top, right top, from(#8ba661), to(#28341e));
    background: -webkit-linear-gradient(left, #8ba661, #28341e);
    background: -moz-linear-gradient(left, #8ba661 0, #28341e 100%);
    background: -o-linear-gradient(left, #8ba661 0, #28341e 100%);
    background: linear-gradient(90deg, #8ba661, #28341e)
}

.tf_guild.szs .showcase>.content .exp {
    border: .0625rem solid #8ba661
}

.tf_guild.xingba .showcase>.content .decor:after {
    background: #8dbf2d
}

.tf_guild.xingba .showcase>.content .link {
    background: #8dbf2d
}

.tf_guild.xingba .showcase>.content .exp {
    border: .0625rem solid #8dbf2d
}

.tf_guild.zmw .showcase>.content .decor:after {
    background: #f89433
}

.tf_guild.zmw .showcase>.content .link {
    background: #f89433
}

.tf_guild.zmw .showcase>.content .exp {
    border: .0625rem solid #f89433
}

.popBox {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 9999
}

.popBox .pop {
    position: fixed;
    background: #fff;
    width: 80%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 1.25rem;
    -webkit-border-radius: 1.125rem;
    -moz-border-radius: 1.125rem;
    border-radius: 1.125rem
}

.popBox .pop h1 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.popBox .pop h1 span {
    font-size: 1.25rem;
    color: #242424;
    letter-spacing: 0;
    font-weight: 700;
    display: block;
    width: 100%;
    text-align: center
}

.popBox .pop h1 a {
    width: 1.25rem;
    height: 1.25rem;
    background: url(data:image/png;
 base64, iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACEklEQVQ4T62UPWtUQRSG33P3J6TwAywUo2InCmIhiBZKTNLFWAgWSnZmWK7oHzA2ltFi957Z2FnIEpsUURQUxCIoEmzCChba2GgrRNxl7yuz7Czr3Q1+bAYuA+fMPHfO1ysYsarV6kSpVJoBMC0iR0juA/Cd5FsA7wFsOudWR92VotF7P0/yLoADAD71vo8kt0RkF4C9AM4BeN5ut6+nafplkPEbUFVvA1gEsNHpdG5VKpXXo16hqmdE5ArJayJy1RjzMJ7rAyNMRJaNMeVRoKJNVW8CWCJ5yTn3OPi7wCzL5kRkJYRhrb3wN7B4ppeiRoR2gaq6TnK3cy7k7Z+Xqj4CcMhae0JU9SyAlyJy0RjzNNJ6rz5qrb0z+IeQGpLNGGLw1ev1k3mevyFZFu/9vTzPp51zk8WLvQItRuhA0fq2gdA3ATQDcIPkV2vt1Iikx6qHyocV9iFYcHjvV0iekizLvgFoOOfSbVokQrvAYgrinX6XqOoPkg92EvgBwOdxQ+69sBJCXgNweCeKQnJdarXafJIkjXHaJg5GYMTGfkdyYozGfiEiW8aY2S7Qez9F8sl/jt59kjcAzFhr18YVh2cAzg+JQ7GX/iRfIaI8z6sisr/Ym0MCm2XZgogsADheENiOiBwkORn24EuSZKlcLte2FdjCLF8GcBrAMQB7glKLSDOIQJIkr1qt1mqapj+L0/UL9rxHDySmhk0AAAAASUVORK5CYII=) no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%
}

.popBox .pop h3 {
    font-size: 1rem;
    color: #242424;
    font-weight: 700;
    padding-top: 1.25rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between
}

.popBox .pop h3 p {
    font-size: .9375rem;
    color: #979797;
    font-weight: 400
}

.popBox .pop ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    padding-top: .625rem
}

.popBox .pop ul button {
    -webkit-border-radius: 1.875rem;
    -moz-border-radius: 1.875rem;
    border-radius: 1.875rem;
    border: .0625rem solid #42adf9;
    font-size: .9375rem;
    color: #42adf9;
    padding: .375rem .9375rem;
    background: none;
    width: 95%;
    margin-right: .3125rem
}

.popBox .pop ul .active {
    background: #42adf9;
    color: #fff;
    padding: .375rem .9375rem!important
}

.popBox .pop textarea {
    margin-top: .9375rem;
    height: 10.3125rem;
    width: 92%;
    padding: .625rem;
    border: .0625rem solid #ccc
}

.popBox .pop .ipnt {
    height: 2.5rem;
    padding: .3125rem;
    border: .0625rem solid #ccc;
    margin: .625rem 0;
    width: 98%
}

.popBox .pop .ipnt:empty:before {
    content: attr(placeholder);
    color: #979797;
    font-size: 1rem;
    width: 92%
}

.popBox .pop button {
    width: 100%;
    border: none
}

.popBox .pop button.submit {
    background-color: #c7c7c7;
    color: #f6f6f6
}

.popBox .pop button.active,
.popBox .pop button.submit {
    -webkit-border-radius: 2.5rem;
    -moz-border-radius: 2.5rem;
    border-radius: 2.5rem;
    font-size: .75rem;
    font-weight: 400;
    padding: 1.25rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center
}

.popBox .pop button.active {
    color: #f6f6f6;
    background-color: #42adf9;
    color: #fff
}

.promotion[data-v-b9fb94ac] {
    display: block;
    width: 100%;
    position: relative;
    max-width: 46.875rem;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.promotion .img[data-v-b9fb94ac] {
    width: 100%;
    height: auto;
    max-height: 2.8125rem;
    display: block
}

.promotion .close[data-v-b9fb94ac] {
    position: absolute;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    padding: .3125rem .625rem;
    font-size: .8rem;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    border-radius: .25rem;
    top: .25rem;
    right: .25rem
}

.agile {
    position: relative
}

.agile--ssr .agile__slides--cloned {
    display: none
}

.agile--ssr .agile__slides>* {
 
    width: 0
}

.agile--ssr .agile__slides>:first-child {
    width: 100%
}

.agile--rtl .agile__actions,
.agile--rtl .agile__dots,
.agile--rtl .agile__slides,
.agile--rtl .agile__track {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    flex-direction: row-reverse
}

.agile:active,
.agile :active,
.agile:focus,
.agile :focus {
    outline: none
}

.agile__list {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%
}

.agile__track {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.agile__actions,
.agile__track {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

.agile__actions {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between
}

.agile--no-nav-buttons .agile__actions {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center
}

.agile__slides {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    flex-grow: 1;
    -webkit-flex-shrink: unset;
    flex-shrink: unset;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start
}

.agile--disabled .agile__slides {
    display: block;
    width: 100%
}

.agile__slide {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.agile__slide,
.agile__slide * {
    -webkit-user-drag: none
}

.agile--fade .agile__slide {
    opacity: 0;
    position: relative;
    z-index: 0
}

.agile--fade .agile__slide--active {
    opacity: 1;
    z-index: 2
}

.agile--fade .agile__slide--expiring {
    opacity: 1;
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
    z-index: 1
}

.agile__nav-button[disabled] {
    cursor: default
}

.agile__dots {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    list-style: none;
    padding: 0;
    white-space: nowrap
}

.agile__dot button {
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0
}

.slide-enter-active[data-v-ee31a1c4] {
    -webkit-transition: all .1s ease-out;
    -o-transition: .1s all ease-out;
    -moz-transition: .1s all ease-out;
    transition: all .1s ease-out;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%)
}

.slide-enter-to[data-v-ee31a1c4] {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

.slide-leave-active[data-v-ee31a1c4] {
    -webkit-transition: all .1s ease-out;
    -o-transition: .1s all ease-out;
    -moz-transition: .1s all ease-out;
    transition: all .1s ease-out;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

.slide-leave-to[data-v-ee31a1c4] {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%)
}

.course_detail {
    position: absolute;
    background: #fff;
    z-index: 999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column
}

.course_detail .post {
    position: relative;
    display: block
}

.course_detail .post.huawei_1 .app_logo {
    position: absolute;
    width: 3.375rem;
    height: 3.375rem;
    bottom: 8.375rem;
    left: 10.0625rem
}

.course_detail .post.huawei_1 .app_name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    bottom: 7.1875rem;
    font-size: .625rem
}

.course_detail .post.huawei_2 .app_logo {
    position: absolute;
    width: 3.375rem;
    height: 3.375rem;
    top: 2.4375rem;
    left: 10.0625rem
}

.course_detail .post.huawei_2 .app_name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    top: 6.25rem;
    font-size: .625rem
}

.course_detail .post.comm_1 .app_logo {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    bottom: 1.25rem;
    left: 4.9375rem
}

.course_detail .post.comm_1 .app_name {
    position: absolute;
    width: 100%;
    left: 7.625rem;
    bottom: 2.5rem;
    font-size: .5rem
}

.course_detail .post.comm_2 .app_logo {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    top: 3.25rem;
    left: 10.4375rem
}

.course_detail .post.comm_2 .app_name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    top: 6rem;
    color: #fff;
    font-size: .625rem
}

.course_detail .post.comm_3 .app_logo {
    position: absolute;
    width: 2.625rem;
    height: 2.625rem;
    top: 3.625rem;
    left: 10.5rem
}

.course_detail .post.comm_3 .app_name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    top: 6.375rem;
    color: #fff;
    font-size: .625rem
}

.course_detail .post.vivo_1 .app_logo {
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: .625rem;
    left: 4.875rem
}

.course_detail .post.vivo_1 .app_name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    top: 1.125rem;
    color: #000;
    font-size: .625rem
}

.course_detail .post.vivo_2 .app_logo {
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: 5.375rem;
    left: 4.75rem
}

.course_detail .post.vivo_2 .app_name {
    position: absolute;
    width: 100%;
    left: 7.5rem;
    top: 5.9375rem;
    color: #fff;
    font-size: .625rem
}

.course_detail .post.oppo_1 .app_logo {
    position: absolute;
    width: 3.375rem;
    height: 3.375rem;
    top: .5rem;
    left: 10.0625rem
}

.course_detail .post.oppo_1 .app_name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    top: 4.1875rem;
    font-size: .625rem
}

.course_detail .post.meizu_1 .app_logo {
    position: absolute;
    width: 3.375rem;
    height: 3.375rem;
    top: .75rem;
    left: 10.0625rem
}

.course_detail .post.meizu_1 .app_name {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    top: 4.375rem;
    font-size: .625rem
}

.course_detail .post.meizu_2 .app_logo {
    position: absolute;
    width: 2.0625rem;
    height: 2.0625rem;
    top: 10.375rem;
    left: 4.5625rem
}

.course_detail .post.meizu_2 .app_name {
    position: absolute;
    width: 100%;
    left: 6.875rem;
    top: 10.9375rem;
    font-size: .625rem
}

.course_detail .post .img {
    display: block
}

.course_detail .h1 {
    font-size: 1.005rem;
    color: #fff;
    text-align: center;
    margin-top: 1.25rem
}

.course_detail .small {
    font-size: .875rem;
    color: #f7990e;
    text-align: center;
    margin: .625rem 0
}

.course_detail .img {
    display: block;
    width: 15rem;
    margin: .625rem auto
}

.course_detail .back_nav {
    width: 100%;
    height: 3.125rem;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    flex: 0 0 auto
}

.course_detail .back_nav,
.course_detail .back_nav .back {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.course_detail .back_nav .back {
    height: 100%;
    z-index: 5;
    padding: 0 .9375rem
}

.course_detail .back_nav .back .img {
    height: 1.25rem;
    width: auto
}

.course_detail .back_nav .p {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center
}

.course_detail .fc_002000 {
    color: #c70000
}

.course_detail .examples {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    -moz-box-flex: 1;
    flex: 1 1 0;
 
}

.course_detail .examples>.content {
    overflow: hidden
}

.course_detail .examples .h1 {
    color: #191e25
}

.course_detail .examples .brand {
    display: block;
    margin: 2.5rem auto 1.875rem auto
}

.course_detail .examples .brand.huawei,
.course_detail .examples .brand.oppo,
.course_detail .examples .brand.vivo {
    width: 4.875rem
}

.course_detail .examples .brand.xiaomi {
    width: 3.1875rem
}

.course_detail .examples .brand.meizu {
    width: 4.625rem
}

.course_detail .examples .brand.other {
    text-align: center;
    font-size: .75rem;
    color: #1a1e1f
}

.course_detail .examples .brand.other .p {
    width: 4.375rem;
    height: 1.5625rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    background-image: -webkit-gradient(linear, left top, right top, from(#e330c4), to(#8820dc));
    background-image: -webkit-linear-gradient(left, #e330c4, #8820dc);
    background-image: -moz-linear-gradient(left, #e330c4 0, #8820dc 100%);
    background-image: -o-linear-gradient(left, #e330c4 0, #8820dc 100%);
    background-image: linear-gradient(90deg, #e330c4, #8820dc);
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    border-radius: .25rem;
    color: #fff;
    font-size: .75rem;
    margin: 0 auto .625rem auto
}

.course_detail .examples .post {
    position: relative;
    margin: .75rem auto
}

.course_detail .examples .list {
    font-size: .2875rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    margin: .75rem 2.1875rem;
    color: #757575;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    align-items: flex-start
}

.course_detail .examples .list,
.course_detail .examples .list .step {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

.course_detail .examples .list .step {
    margin-top: .125rem;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    flex: 0 0 auto;
    font-size: .625rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    width: 1rem;
    height: 1rem;
    background: #e13c31;
    font-size: 10px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    color: #fff;
    margin-right: .375rem
}

.course_layer {
    position: absolute;
    z-index: 99;
    background: #232323;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    overflow: hidden
}

.course_layer.static {
    position: static;
    height: auto
}

.course_layer>.scroll {
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    -moz-box-flex: 1;
    flex: 1 1 0;
    overflow: hidden
}

.course_layer>.scroll .content {
    overflow: hidden;
    padding: 1.25rem 0
}

.course_layer .h1 {
    font-size: 1.375rem;
    color: #fff;
    text-align: center;
    margin-top: 1.25rem
}

.course_layer .small {
    font-size: .875rem;
    color: #f7990e;
    text-align: center;
    margin: .625rem 0
}

.course_layer .img {
    display: block;
    width: 15rem;
    margin: .625rem auto
}

.course_layer .list {
    font-size: .875rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    margin: .625rem 3.125rem;
    color: #fff
}

.course_layer .list .step {
    font-size: .625rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    width: 1rem;
    height: 1rem;
    background: #e13c31;
    font-size: 10px;
    margin-right: .375rem
}

.course_layer .link,
.course_layer .list .step {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    color: #fff
}

.course_layer .link {
    width: 18.75rem;
    margin: .75rem auto;
    height: 3.4375rem;
    -webkit-border-radius: 3.4375rem;
    -moz-border-radius: 3.4375rem;
    border-radius: 3.4375rem;
    background: #f7990e
}

.slide-enter-active[data-v-17eb432a] {
    -webkit-transition: all .1s ease-out;
    -o-transition: .1s all ease-out;
    -moz-transition: .1s all ease-out;
    transition: all .1s ease-out;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%)
}

.slide-enter-to[data-v-17eb432a] {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

.slide-leave-active[data-v-17eb432a] {
    -webkit-transition: all .1s ease-out;
    -o-transition: .1s all ease-out;
    -moz-transition: .1s all ease-out;
    transition: all .1s ease-out;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

.slide-leave-to[data-v-17eb432a] {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%)
}

.tf_guild {
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 90%;
    bottom: 0;
    left: 0;
    background: #fff;
    -webkit-border-radius: .3125rem .3125rem 0 0;
    -moz-border-radius: .3125rem .3125rem 0 0;
    border-radius: .3125rem .3125rem 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column
}

.tf_guild .top {
    height: 3.0625rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    font-size: .9375rem;
    color: #272a2d;
    line-height: 1;
    -webkit-box-shadow: 0 .125rem .25rem 0 hsla(0, 0%, 91%, .5);
    -moz-box-shadow: 0 .125rem .25rem 0 hsla(0, 0%, 91%, .5);
    box-shadow: 0 .125rem .25rem 0 hsla(0, 0%, 91%, .5)
}

.tf_guild .top,
.tf_guild .top .back {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.tf_guild .top .back {
    position: absolute;
    height: 100%;
    left: 0
}

.tf_guild .top .back:before {
    content: "";
    display: block;
    width: .5rem;
    height: .9375rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAcCAMAAABf788oAAAASFBMVEUAAABmZmZmZmZnZ2dmZmZlZWVtbW1nZ2dmZmZmZmZmZmZmZmZkZGRgYGBmZmZra2tmZmZmZmZlZWVlZWVmZmZnZ2dmZmZmZmZpsm60AAAAF3RSTlMA+dHIvbALpJaEcEw6EPITwmliW1VD3shLdxAAAABuSURBVBjTZdFHEsQgDETREeCIsSf/+9/U21Y1u6cqCYVHesd/Sv4FT3UPyiX+QB3iF7RZvEMquMGiXmFVL7CpJ9iFc4O3eFTiK74K0TW/cB5CDXiKF/VvvTFv3Yfz8X1BvkJdco70oA4/VD7l2W4r0QaWz87CFAAAAABJRU5ErkJggg==) 0 0/100% 100%;
    margin: 0 .3125rem 0 .625rem
}

.tf_guild .showcase {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    -moz-box-flex: 1;
    flex: 1 1 0;
    overflow: hidden
}

.tf_guild .showcase>.content {
    padding: 1.25rem .9375rem;
    font-size: .9375rem
}

.tf_guild .showcase>.content .decor {
    color: #272a2d;
    line-height: 1.2;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
    display: inline-block
}

.tf_guild .showcase>.content .decor:after {
    content: "";
    display: block;
    width: 105%;
    height: .375rem;
    background: #ffab00;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1
}

.tf_guild .showcase>.content .p {
    color: #888f9a;
    line-height: 1.3125rem
}

.tf_guild .showcase>.content .link {
    width: 15.625rem;
    height: 3.0625rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    background: #ffab00;
    -webkit-border-radius: .375rem;
    -moz-border-radius: .375rem;
    border-radius: .375rem;
    margin: .375rem auto;
    color: #fff
}

.tf_guild .showcase>.content .link+.fc-FF2525 {
    text-align: center
}

.tf_guild .showcase>.content .small {
    width: 15.625rem;
    font-size: .75rem;
    color: #888f9a;
    margin: .375rem auto
}

.tf_guild .showcase>.content .exp {
    width: 15.625rem;
    display: block;
    margin: .625rem auto;
    -webkit-border-radius: .3125rem;
    -moz-border-radius: .3125rem;
    border-radius: .3125rem;
    border: .0625rem solid #ffab00;
    overflow: hidden
}

.tf_guild .showcase>.content .exp.card {
    height: 10.625rem;
    background: url(../img/exp_bg.b907cb6e.html) 0 0/100% 100%;
    position: relative
}

.tf_guild .showcase>.content .exp.card .icon {
    position: absolute;
    width: 5.25rem;
    height: 5.25rem;
    left: .5rem;
    top: .75rem
}

.tf_guild .showcase>.content .exp.card .name {
    font-size: .875rem;
    position: absolute;
    left: 6.125rem;
    top: .6875rem;
    color: #1b1b1b;
    font-weight: 700
}

.tf_guild .showcase>.content .exp .img {
    width: 100%;
    display: block
}

.slidUp-enter-active[data-v-73e7b99b] {
    -webkit-transition: all .2s ease-out;
    -o-transition: .2s all ease-out;
    -moz-transition: .2s all ease-out;
    transition: all .2s ease-out;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    opacity: .5
}

.slidUp-enter-to[data-v-73e7b99b] {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

.slidUp-leave-active[data-v-73e7b99b] {
    -webkit-transition: all .2s ease-out;
    -o-transition: .2s all ease-out;
    -moz-transition: .2s all ease-out;
    transition: all .2s ease-out;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

.slidUp-leave-to[data-v-73e7b99b] {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    opacity: .5
}

.tf_cover[data-v-73e7b99b] {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 999;
    left: 0;
    top: 0
}

.message[data-v-73e7b99b] {
    position: fixed;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    pointer-events: none
}

.message .state[data-v-73e7b99b] {
    background: rgba(46, 46, 46, .85);
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border-radius: .5rem;
    color: #fff;
    line-height: 1;
    padding: .375rem;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.625rem;
    min-width: 50%;
    min-height: 6.25rem;
    max-width: 90%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center
}