@charset "utf-8";

.welcome {
    height: 100%;
    background: url(../images/welcome-bj.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding-bottom: 1.03rem;
}

.wel-main {
    padding-top: .6rem;
    padding-bottom: .6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 203px;
}

.wel-l {
    width: 5.35rem;
    background-color: #0c51ab;
}

.title {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: .4rem;
}

.title h2 {
    font-size: 0.3rem;
    font-weight: normal;
    line-height: 0.43rem;
    color: #333333;
    margin-left: 1.4rem;
    position: relative;
    cursor: pointer;
}

.title h2.on {
    color: #0c51ab;
}

.title h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2.42rem;
    height: .62rem;
    transform: translateX(-50%);
    background: url(../images/tit-h2-bj.png) no-repeat;
    background-position: center center;
    background-size: 2.42rem;
    z-index: 0;
}

.title h2:nth-child(1) {
    margin-left: 0;
}

.gg-tit-more {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.title a {
    font-size: 0.16rem;
    font-weight: normal;
    line-height: 0.43rem;
    color: #0c51ab;
    background: url(../images/tit-more.png) no-repeat;
    background-position: left center;
    background-size: .58rem;
    width: .62rem;
    text-align: right;
    display: none !important;
}

.title a.on {
    display: block !important;
}

.wel-l .title {
    margin-bottom: 0;
    padding: 0 .2rem;
    height: 0.7rem;
}

.wel-l .gg-tit-more {
    right: .2rem;
}

.wel-l .title h2 {
    color: #fff;
}

.wel-l .title h2::after {
    background: none;
}

.wel-l .gg-tit-more a {
    color: #fff;
    background: url(../images/tit-more1.png) no-repeat;
    background-position: left center;
    background-size: 0.58rem;
}

.wel-lslick {
    margin-bottom: .13rem;
}

.wel-lslick li a {
    display: block;
    position: relative;
}

.wel-lslick li a .pic {
    padding-top: 56%;
}

.wel-lslick li a .pic::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: url(../images/zzc.png) repeat-x;
    background-position: center bottom;
}

.wel-lslick li a p {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .15rem;
    font-size: 0.15rem;
    line-height: .2rem;
    color: #ffffff;
    padding: 0 1rem 0 .2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wel-lm .slick-dots {
    font-size: 0;
    right: .1rem;
    width: auto;
    bottom: .18rem;
}

.wel-lm .slick-dots li {
    background-color: rgba(255, 255, 255, .3);
    border-radius: 5px;
    transition: all 0.5s;
    width: 0.07rem;
    height: 0.07rem;
}

.wel-lm .slick-dots li.slick-active {
    background-color: #1b8d6e;
    border-radius: .04rem;
    width: 0.14rem;
    background-color: #ffffff;
}

.wel-lm {
    background: #fff;
    padding: .23rem;
}

.wel-l>ul {
    padding: .2rem;
}


.list2 li a {
    display: block;
    position: relative;
    padding-left: .2rem;
    padding-right: .8rem;
    font-size: .15rem;
    line-height: .42rem;
    color: #333333;
    /* background: url(../images/list2-dot.png) no-repeat;
    background-position: left center; */
    transition: all 0.3s;
}

.list2 li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url(../images/list2-dot.png) no-repeat;
    background-position: left center;
}

.list2 li a span {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #8e8e8e;
}

.list2 li a:hover {
  
    background-position: left center; */
    color: #0c51ab;
}

.list2 li a p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wel-r {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.wel-r>div {
    padding: .1rem;
    background: rgba(51, 51, 51, .3);
    margin-top: .15rem;
    position: relative;
}
.wel-r>div:nth-child(1){
    margin-top: 0;
}
.wel-r>div .wel-block-main {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 7.96rem;
    opacity: 0;
    transition: all 1s;
    background: rgba(0, 73, 181, .9);
    margin-bottom: 0;
    z-index: -1;
    visibility: hidden;
    padding: 0.1rem;
}

.wel-r>div:hover>.wel-block {
    opacity: 0;
}

.wel-r>div:hover .wel-block-main {
    opacity: 1;
    z-index: 1;
    visibility: visible;
    overflow: hidden;
}

.wel-r>div:hover .wel-block-main .wel-list ul li {
    opacity: 1;
    transform: translateX(0);
    transition: all 2s;
}


.wel-block {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    opacity: 1;
    transition: all 0.5s;
}

.wel-block .wel-link {
    height: 1.47rem;
    display: flex;
    align-items: center;
    padding: 0 .35rem;
    width: 3.8rem;
}
.wel-block .wel-list{
    flex:1;
    min-width:0;
}
.wel-block .wel-link .icon {
    width: 0.75rem;
}

.wel-block .wel-link .icon img {
    max-width: 100%;
}

.wel-block .wel-link p {
    font-size: 0.24rem;
    font-weight: normal;
    line-height: 0.43rem;
    color: #ffffff;
    padding-left: .25rem;
}


.wel-list ul {
    display: flex;
    flex-wrap: wrap;
}

.wel-list ul li {
 width: 48%;

    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s;
}

.wel-list ul li a {
    font-size: 0.18rem;
    font-weight: normal;
    line-height: 0.43rem;
    padding-left: .2rem;
    background: url(../images/list2-dot2.png) no-repeat;
    background-position: left center;
    color: #ffffff;
    display: block;
}
.wel-list ul li a:hover{
    text-decoration: underline;
}
.welcome .footer1 {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}


/* 讲好一堂课 ------------- */

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

.banner a {
    display: block;
}

.banner>img {
    display: block;
    width: 100%;
}

.banner .slick {
    position: relative;
    z-index: 9;
}

.banner .slick-slide a {
    display: block;
    position: relative;
}

.banner .slick-slide a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: url(../images/zzc2.png) repeat-x;
    background-position: center bottom;
    z-index: 9;
}

.banner .slick-slide a img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 7;
    transition: all 8s;
}

.banner .slick-slide a p {
    position: absolute;
    width: 100%;
    left: 50%;
    max-width: 1300px;
    transform: translateX(-50%);
    font-size: 30px;
    bottom: 40px;
    color: #fff;
    z-index: 9;
}

.banner .slick-dots {
    font-size: 0;
    text-align: center;
    bottom: .3rem;
}

.banner .slick-dots li {
    display: inline-block;
    border-radius: 50%;
    margin: 0 .16rem;
    transition: all 0.3s;
    vertical-align: middle;
    width: 0.14rem;
    height: 0.14rem;
    background-color: #ffffff;
    opacity: 0.2;
}

@keyframes cilcle {
    0% {
        transform: rotateZ(0);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.banner .slick-dots li button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    margin: 0;
    padding: 0;
    display: none;
}

.banner .slick-dots li.slick-active {
    background-color: #ffffff;
    opacity: 1;
}

.banner .slick-dots li.slick-active button {
    background: #fff;
}


.jm1 {
    margin-top: .6rem;
}

.jm1 .title h2::after {
    background: none;
}

.jm1 .title h2.on::after {
    background: url(../images/tit-h2-bj.png) no-repeat;
    background-position: center center;
    background-size: 2.42rem;
}

.jm1-c {
    position: relative;
    overflow: hidden;
}

.jm1-cbox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    z-index: 1;
}

.jm1-cbox.on {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 9;
    opacity: 1;
    transition: all 0.5s;
}

.jm1-l {
    width: 48%;
}

.jm1-r {
    width: 48%;
}

.jm1-l a {
    display: block;
}

.jm1-l a .pic {
    padding-top: 65%;
}

.pic.play::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 0.44rem;
    height: 0.44rem;
 background: url(../images/play.png) no-repeat;
    background-position: center center;
    background-size: .44rem;
    z-index: 9;
    transition: all 0.3s;
}

.jm-info {
    padding: .05rem 0;
}

.jm-info h3 {
    font-size: 0.18rem;
    font-weight: normal;
    line-height: 0.43rem;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jm-info h4 {
    font-size: 0.16rem;
    font-weight: normal;
    line-height: 0.24rem;
    height: 0.48rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #666666;
}

.jm-info div p {
    padding-left: .25rem;
    font-size: 0.16rem;
    font-weight: normal;
    line-height: 0.3rem;
    color: #666666;
}

.jm-info div p.user {
    background: url(../images/user.png) no-repeat;
    background-position: left center;
    background-size: .2rem auto;
}

.jm-info div p.time {
    background: url(../images/time.png) no-repeat;
    background-position: left center;
    background-size: .16rem auto;
}

.jm1-l .jm-info {
    background: rgba(228, 228, 228, .3);
    padding: .2rem;
}

.jm1-l .jm-info h3 {
    font-size: 0.2rem;
}

.jm1-l .jm-info h4 {
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jm1-l .jm-info div {
    margin-top: .2rem;
    display: flex;
}

.jm1-l .jm-info div p.user {
    margin-right: .5rem;
}

.jm1-r ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.jm1-r ul li {
    width: 48%;
}

.jm1-r ul li:nth-child(-n+2) {
    margin-bottom: .15rem;
}

.jm1-r ul li a {
    display: block;
}

.jm1-r ul li a .pic {
    padding-top: 57%;
}

.jm2 {
    padding: .6rem 0;
    background: url(../images/jm2-bj.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: .5rem;
}

.jm2 .title h2 {
    color: #fff;
}

.jm2 .title h2.on::after {
    background: url(../images/tit-h2-bj2.png) no-repeat;
    background-position: center center;
    background-size: 2.42rem;
}

.jm2 .gg-tit-more a {
    color: #fff;
    background: url(../images/tit-more1.png) no-repeat;
    background-position: left center;
    background-size: 0.58rem;
}

.jm2-c ul {
    justify-content: space-between;
    margin: 0 -.2rem;
}

.jm2-c ul li {}

.jm2-c ul li a {
    margin: 0 .2rem;
    display: block;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.jm2-c ul li a .pic {
    padding-top: 125%;
}

.jm2-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    bottom: 0;
    background: url(../images/zzc2.png) repeat-x;
    background-position: center bottom;
    z-index: 1;
    transition: all 0.3s;
}

.jm2-name p {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1rem;
    font-size: 0.18rem;
    font-weight: normal;
    line-height: 0.43rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
    padding: 0 .2rem;
}

.jm2-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff url(../images/jm2-item-bj.png) no-repeat;
    background-position: right bottom;
    padding: 0.2rem;
    transform: translateY(100%);
    z-index: 2;
    transition: all 0.5s;
}

.jm2-info::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    bottom: 100%;
    border-width: 0 .13rem .14rem 0.13rem;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.jm2-info .jm-info {
    padding: 0;
}

.jm2-info .jm-info h4, .jm2-info .jm-info div p {
    color: #0c51ab;
}

.jm2-info .jm-info div {
    margin-top: .2rem;
}

.jm2-c ul li a:hover {
    border-radius: 0rem 0rem 0.2rem 0.2rem;
}

.jm2-c ul li a:hover .jm2-name {
    transform: translateY(100%);
}

.jm2-c ul li a:hover .jm2-info {
    transform: translateY(0);
}

.jm2-c ul li a:hover .jm2-info::before {
    transform: translateX(-50%) translateY(0);
}

.jm2-c ul li a .pic.play::after {
    top: auto;
    bottom: 50%;
    transform: translateX(-50%) translateY(100%);
}

.jm2-c ul li a:hover .pic.play::after {
    bottom: calc((100% - 2.11rem) / 2 + 2.33rem);
}

.jm3 {
    background: url(../images/jm3-bj.png) no-repeat;
    background-position: right center;
    padding: .55rem 0;
}

.jm3-c>ul {
    margin: 0 -.2rem;
}

.jm3-c ul li a {
    display: block;
    margin: 0 .2rem;
    position: relative;
    padding-bottom: .2rem;
}

.jm3-c ul li a .pic {
    padding-top: 59.7%;
}

.jm3-c ul li a::after {
    content: "";
    position: absolute;
    height: 0.03rem;
    left: 0;
    right: 0;
    background-color: #dfdfdf;
    z-index: 1;
    bottom: 0;
}

.jm3-c ul li a::before {
    content: "";
    position: absolute;
    height: 0.03rem;
    /* left: 50%;
    transform: translateX(-50%); */
    left: 0;
    width: 0;
    transition: all 0.5s;
    bottom: 0;
    background-color: #0c51ab;
    z-index: 2;
}

.jm3-c ul li a:hover::before {
    content: "";
    width: 100%;
}


.jm3-c .slick-dots {
    position: static;
    font-size: 0;
    text-align: center;
    margin-top: .45rem;
}

.jm3-c .slick-dots li {
    width: 0.14rem;
    height: 0.14rem;
    background-color: #0c51ab;
    opacity: 0.2;
    border-radius: 0.07rem;
    transition: all 0.3s;
}

.jm3-c .slick-dots li.slick-active {
    width: 0.34rem;
    border-radius: 0.07rem;
    opacity: 1;
}

/* 讲好一堂课 -------------end */


/* 讲好一门课 -------------start */
.jt1 {
    margin-top: .6rem;
    position: relative;
    z-index: 2;
}

.jt1-c {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.jt1-l {
    width: 48.5%;
}

.jt1-l ul li a {
    display: block;
}

.jt1-l ul li a .pic {
    padding-top: 65%;
}

.jt1-r {
    width: 48.5%;
}

.jt1-rt ul li a {
    display: block;
}

.jt1-rt .jm-info {
    padding: 0;
}

.jt1-rt .jm-info h3 {
    font-size: .2rem;
    font-weight: 600;
}

.jt1-rt .jm-info h4 {
    line-height: 0.36rem;
    height: 0.72rem;
    font-size: .18rem;
    margin-top: .05rem;
}

.jt1-rt .jm-info div {
    margin-top: .15rem;
}

.jt1-rt .jm-info div p {
    line-height: .36rem;
}


.jt1-rt .slick-dots {
    position: relative;
    width: auto;
    z-index: 2;
    margin-top: .35rem;
    padding: 0 .35rem;
}

.jt1-rt .slick-dots li {
    display: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left;
}

.jt1-rt .slick-dots li.slick-active {
    display: block;
}

.jt1-rt .slick-dots li div {
    display: flex;
    align-items: flex-end;
    font-size: .16rem;
    font-weight: normal;
    letter-spacing: 1px;
    color: #999999;
}

.jt1-rt .slick-dots li div span {
    float: left;
    font-size: 0.24rem;
    font-weight: 600;
    line-height: .24rem;
    color: #1563a9;
    vertical-align: middle;
    margin-right: .05rem;
}

.jt1-rt .slick-prev, .jt1-rt .slick-next {
    width: .16rem;
    height: .24rem;
    top: auto;
    left: auto;
    right: auto;
    bottom: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    z-index: 10;
}

.jt1-rt .slick-prev {
    background: url(../images/jt1-rtprev.png) no-repeat;
    background-position: center center;
    left: 0;
    background-size: .16rem;
}

.jt1-rt .slick-next {
    background: url(../images/jt1-rtnext.png) no-repeat;
    background-position: center center;
    left: 1rem;
    background-size: .16rem;
}



.jt1-rb {
    overflow: hidden;
    margin-top: .4rem;
}

.jt1-rb ul {
    margin: 0 -.05rem;
}

.jt1-rb ul li a {
    display: block;
    margin: 0 .05rem;
}

.jt1-rb ul li a .pic {
    padding-top: 65%;
}

.jt2 {
    background: #f6f6f6 url(../images/jt2-bj.jpg) no-repeat;
    background-position: right center;
    background-size: cover;
    padding: 1.73rem 0 .6rem 0;
    margin-top: -1.1rem;
    position: relative;
    z-index: 1;
}

.jt2-c {
    overflow: hidden;
    position: relative;
}

.jt2-c>ul {
    margin: 0 -.2rem;
    padding-bottom: 20px;
}

.jt2-c>ul li {
    position: relative;
}

.jt2-c>ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, .12);
}

.jt2-c>ul li a {
    display: block;
    position: relative;
    margin: 0 .2rem;
    padding: .3rem 0 .35rem 0;
}

.jt2-c>ul li a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    transition: all 0.5s;
    width: 0;
    height: 2px;
    background: #0c51ab;
}

.jt2-c>ul li a .jm-info h3 {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: .3rem;
    height: 0.6rem;
}

.jt2-c>ul li a .jm-info div {
    margin: .1rem 0;
}

.jt2-c>ul li a .pic {
    padding-right: 60%;
}

.jt2-c>ul li a .pic::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.48rem;
    height: 0.48rem;
    background: url(../images/item-rt.png) no-repeat;
    background-size: 100% 100%;
    transform: translateX(100%) translateY(100%);
    transition: all 0.3s;
}

.jt2-c>ul li a:hover .pic::after {
    transform: translateX(0) translateY(0);
}

.jt2-c>ul li a:hover::before {
    width: 100%;
}

.jt2-c .slick-prev, .jt2-c .slick-next {
    width: .1rem;
    height: .2rem;
    bottom: 0;
    top: auto;
    left: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    background-color: #999999;
    z-index: 10;
}

.jt2-c .slick-prev {
    background: url(../images/arrow-prev.png) no-repeat;
    background-position: center center;
    background-size: .1rem auto;
    right: .6rem;
}

.jt2-c .slick-next {
    background: url(../images/arrow-next.png) no-repeat;
    background-position: center center;
    background-size: .1rem auto;
    right: .2rem;
}


.slick-speed {
    position: absolute;
    bottom: 9px;
    left: 0;
    right: .8rem;
    z-index: 2;
}

.slick-speed div {
    height: 3px;
    background-color: rgba(0, 0, 0, .12);
    border-radius: 1px;
    position: relative;
}

.slick-speed span {
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    background: #0c51ab;
    border-radius: 1px;
    transition: all 0.3s;
}

.jt3 {
    margin-top: .65rem;
}

.jt3-c {
    overflow: hidden;
    position: relative;
}

.jt3-c>ul {
    padding-bottom: .7rem;
    margin: 0 -.25rem;
}

.jt3-c ul li a {
    display: block;
    margin: 0 .25rem;
    opacity: .6;
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
}

.jt3-c ul li a .pic {
    padding-top: 67%;
}

.jt3-c ul li a .pic::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.85rem;
    height: 0.85rem;
    background: url(../images/item-rt.png) no-repeat;
    background-size: 100% 100%;
    transform: translateX(100%) translateY(100%);
    transition: all 0.3s;
}

.jt3-c ul li a .jt3-info {
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .8);
    border-left: 3px solid #0c51ab;
    padding: .2rem .25rem;
    width: 3.4rem;
    transform: translateX(-100%);
    transition: all 0.5s;
    opacity: 0;
}

.jt3-c ul li a .jt3-info .jm-info {
    padding: 0;
}

.jt3-c ul li a .jt3-info .jm-info h3 {
    white-space: pre-wrap;
    font-weight: 600;
    color: #333;
    font-size: .18rem;
    line-height: .24rem;
    height: 0.48rem;
    margin-bottom: .05rem;
}


.jt3-c ul li.slick-current a {
    opacity: 1;
}

.jt3-c ul li.slick-current a .jt3-info {
    transform: translateX(0);
    opacity: 1;
}

.jt3-c ul li.slick-current a .jt3-info .jm-info h3 {
    color: #0c51ab;
}

.jt3-c ul li.slick-current a .pic::after {
    transform: translateY(0) translateX(0);
}


.jt3-c .slick-speed {
    width: 100%;
    max-width: 4.65rem;
    left: 50%;
    transform: translateX(-50%);
}


.jt3-c .slick-prev, .jt3-c .slick-next {
    width: .1rem;
    height: .2rem;
    bottom: 0;
    top: auto;
    left: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    background-color: #999999;
    z-index: 10;
}

.jt3-c .slick-prev {
    background: url(../images/arrow-prev.png) no-repeat;
    background-position: center center;
    background-size: .1rem auto;
    right: 50%;
    margin-right: 2.5rem;
}

.jt3-c .slick-next {
    background: url(../images/arrow-next.png) no-repeat;
    background-position: center center;
    background-size: .1rem auto;
    left: 50%;
    margin-left: 2.5rem;
}


.jt4 {
    background: url(../images/jt4-bj.png) no-repeat;
    background-position: center bottom;
    padding: .6rem 0 .9rem 0;
}


.jt4-c ul {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.jt4-c ul li {
    font-size: .18rem;
    line-height: .96rem;
    position: relative;
    width: 48%;
}

.jt4-c ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    height: 1px;
    background: #0c51ab;
    transition: all 0.5s;
    z-index: 9;
    width: 0;
}

.jt4-c ul li::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    background: #0c51ab;
    transition: all 0.5s;
    z-index: 9;
    width: 0;
}

.jt4-c ul li:nth-child(-n+2) a {
    border-top: 1px dashed #d3d3d3;
}

.jt4-c ul li:nth-child(-n+2)::before {
    top: 0;
}



.jt4-c ul li a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #333333;
    position: relative;
    padding-left: .18rem;
    padding-right: 1.2rem;
    border-bottom: 1px dashed #d3d3d3;
}


.jt4-c ul li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: .06rem;
    height: .06rem;
    background: #0068b7;
    border-radius: 50%;
}

.jt4-c ul li span {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: .16rem;
    color: #999999;
}

.jt4-c ul li:hover::before {
    width: 100%;
}

.jt4-c ul li:hover::after {
    width: 100%;
}

.jt4-c ul li:hover a {
    color: #0c51ab;
    font-weight: 600;
}

/* 讲好一门课 -------------end */

/* 赛好一堂课 -------------start */

.st1 {
    margin-top: .6rem;
}

.st1-c>ul {
    margin: 0 -.2rem;
}

.st1-c ul li a {
    display: block;
    margin: 0 .2rem;
    padding: .08rem;
}

.st1-c ul li a .pic {
    padding-top: 60%;
}

.st1-info {
    background: url(../images/st1-info-bj.png) no-repeat;
    background-position: center center;
    background-size: cover;
    box-shadow: 0px 0px .08rem 0px rgba(0, 0, 0, 0.07);
    padding: .1rem .25rem .2rem .25rem;
    transition: all 0.3s;
}

.st1-info .jm-info {
    padding: 0;
}

.st1-info .jm-info div {
    margin-top: .1rem;
}

.st1-info .jm-info h3 {
    font-size: .2rem;
}

.st1-info .jm-info h3 i {
    background-image: linear-gradient(#fff, #fff);
}

.st1-c ul li a:hover .st1-info {
    background: url(../images/st1-info-bj2.png) no-repeat;
    background-position: center center;
    background-size: cover;
}

.st1-c ul li a:hover .st1-info h3 {
    color: #fff;
}

.st1-c ul li a:hover .st1-info h4 {
    color: #d6d6d6;
}

.st1-c ul li a:hover .jm-info div p {
    color: #d6d6d6;
}

.st1-c ul li a:hover .jm-info div p.user {
    background: url(../images/user2.png) no-repeat;
    background-position: left center;
    background-size: 0.16rem auto;
}

.st1-c ul li a:hover .jm-info div p.time {
    background: url(../images/time2.png) no-repeat;
    background-position: left center;
    background-size: 0.16rem auto;
}

.st1-c .slick-dots {
    position: relative;
    margin: 0 auto;
    display: flex !important;
    justify-content: space-between;
    margin-top: .55rem;
    padding-bottom: .04rem;
    width: .7rem;
}

.st1-c .slick-dots li {
    width: 0.11rem;
    height: 0.11rem;
    background: #0c51ab;
    opacity: 0.2;
    border-radius: 50%;
    overflow: hidden;
    margin: 0;
}

.st1-c .slick-dots li.slick-active {
    opacity: 1;
}

.st1-c .slick-prev, .st1-c .slick-next {
    width: .1rem;
    height: .2rem;
    bottom: 0;
    top: auto;
    left: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    background-color: #999999;
    z-index: 10;
}

.st1-c .slick-prev {
    background: url(../images/arrow-prev.png) no-repeat;
    background-position: center center;
    background-size: .1rem auto;
    right: 50%;
    margin-right: .6rem;
}

.st1-c .slick-next {
    background: url(../images/arrow-next.png) no-repeat;
    background-position: center center;
    background-size: .1rem auto;
    left: 50%;
    margin-left: .6rem;

}



.st-block {
    background: url(../images/st2-bj.png) no-repeat;
    background-position: center top;
    padding-top: .6rem;
    padding-bottom: 1.25rem;
    margin-top: .55rem;
}

.st2-c {
    display: flex;
    justify-content: space-between;
}

.st2-l {
    width: 48.5%;
}

.st2-r {
    width: 48.5%;
}

.st2-l a {
    display: block;
    position: relative;
}

.st2-l a .pic {
    padding-top: 65%;
}

.st2-l a .pic::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../images/zzc2.png) repeat-x;
    background-position: center bottom;
    z-index: 9;
}

.st2-linfo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .1rem .2rem;
    z-index: 9;
}

.st2-linfo .jm-info h3 {
    color: #fff;
}

.st2-linfo .jm-info h3 i {
    background-image: linear-gradient(#fff, #fff);
}

.st2-linfo .jm-info div {
    display: flex;
}

.st2-linfo .jm-info div p {
    color: #fff;
}

.st2-linfo .jm-info div p.user {
    background: url(../images/user2.png) no-repeat;
    background-position: left center;
    background-size: 0.2rem auto;
    margin-right: 0.5rem;
}

.st2-linfo .jm-info div p.time {
    background: url(../images/time2.png) no-repeat;
    background-position: left center;
    background-size: 0.16rem auto;
}

.st2-r ul {
    display: flex;
    justify-content: space-between;
}

.st2-r ul li {
    width: 48%;
}

.st2-r ul li a {
    display: block;
}

.st2-r ul li a .pic {
    padding-top: 60%;
}

.st2-rinfo {
    background: #fff;
    padding: .1rem .2rem;
}

.st2-rinfo .jm-info {
    padding: 0;
}

.st2-rinfo .jm-info h4 {
    margin: .05rem 0 .15rem 0;
}

.st2-rinfo .st2-rmore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.6rem;
    border-top: 1px solid #cccccc;
    margin-top: .1rem;
}

.st2-rinfo .st2-rmore span {
    font-size: 0.16rem;
    font-weight: normal;
    line-height: 0.24rem;
    color: #999999;
}

.st2-r ul li a:hover .st2-rinfo .jm-info h3 {
    font-weight: 600;
}

.st2-r ul li a:hover .st2-rinfo .jm-info h4 {
    color: #0c51ab;
}


.st-block .title h2 {
    color: #fff;
}

.st-block .title h2::after {
    transform: translateX(-50%);
    background: url(../images/tit-h2-bj2.png) no-repeat;
    background-position: center center;
    background-size: 2.42rem;
}

.st-block .title a {
    color: #fff;
    background: url(../images/tit-more1.png) no-repeat;
    background-position: left center;
    background-size: 0.58rem;
}

.st3 {
    margin-top: .55rem;
}

.st3-c {
    display: flex;
    justify-content: space-between;
}

.st3-l {
    width: 48.5%;
}

.st3-l ul li a {
    display: block;
    position: relative;
}

.st3-l ul li a .pic {
    padding-top: 64%;
}

.st3-r {
    width: 48.5%;
}

.st3-linfo {
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(12, 81, 171, .9);
    padding: .15rem .25rem;
    width: 80%;
    max-width: 4.62rem;
}

.st3-linfo .jm-info {
    padding: 0;
}

.st3-linfo .jm-info h3 {
    color: #fff;
}

.st3-linfo .jm-info h3 i {
    background-image: linear-gradient(#fff, #fff);
}

.st3-linfo .jm-info div p {
    color: #fff;
}

.st3-linfo .jm-info div p.user {
    background: url(../images/user2.png) no-repeat;
    background-position: left center;
    background-size: 0.2rem auto;
    margin-right: 0.5rem;
}

.st3-linfo .jm-info div p.time {
    background: url(../images/time2.png) no-repeat;
    background-position: left center;
    background-size: 0.16rem auto;
}

.st3-lmore {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.6rem;
    margin-top: .1rem;
    width: 1.74rem;
    height: 0.39rem;
    background: rgba(255, 255, 255, .2);
    padding: 0 .3rem;
}

.st3-lmore span {
    font-size: 0.14rem;
    font-weight: normal;
    line-height: 0.43rem;
    color: #dcdcdc;
}

.st3-l .slick-dots {
    display: flex !important;
    justify-content: flex-end;
    bottom: 0.3rem;
    right: 0.3rem;
    border-radius: 50%;
}

.st3-l .slick-dots li {
    width: 0.11rem;
    height: 0.1rem;
    background-color: #ffffff;
    opacity: 0.2;
    margin: 0 .1rem;
    border-radius: 50%;
}

.st3-l .slick-dots li.slick-active {
    opacity: 1;
}

.st3-r ul {
    background-color: #ffffff;
    box-shadow: 0rem 0rem 0.08rem 0rem rgba(0, 0, 0, 0.15);
    padding: .25rem;
}

.st3-r .list2 li a {
    font-size: .18rem;
    line-height: 0.52rem;
    padding-right: 1.1rem;
}

.st3-r .list2 li a span {
    border-left: 1px solid rgba(0, 102, 204, .5);
    width: 1.05rem;
    text-align: right;
    line-height: .19rem;
    font-size: 0.16rem;
    color: #666666;
}

/* 赛好一堂课 -------------end */


@media screen and (max-width:1400px) {
    .wel-main {
        margin-top: 0;
    }

    .title h2 {
        font-size: .26rem;
    }

    .jt1-rt .slick-dots {
        margin-top: .2rem;
    }

    .jt1-rb {
        margin-top: .25rem;
    }

    .jt1-rt .jm-info h4 {
        line-height: .3rem;
        height: 0.6rem;
    }

    .jt1-rt .jm-info div p {
        line-height: .3rem;
    }

    .st1-info {
        padding: .1rem .15rem;
    }

    .st2-rinfo .st2-rmore {
        height: 0.5rem;
    }


}

@media screen and (max-width:1200px) {
    .st3-r ul {
        padding: .15rem;
    }
}

@media screen and (max-width:1024px) {
    .wel-main {
        margin-top: 0;
    }

    .wel-block {
        display: block;
    }

    .wel-r {
        display: block;
        overflow: hidden;
        flex: 1;
        padding-left: .2rem;
    }

    .wel-list {
        padding: 0 0.35rem .15rem .35rem;
    }

    .wel-block .wel-link .icon {
        width: 0.5rem;
    }

    .wel-block .wel-link {
        height: 1.1rem;
    }

    .wel-block .wel-link p {
        font-size: .2rem;
    }

    .wel-lm {
        padding: .23rem .15rem;
    }

    .wel-list ul li {
        width: 50%;
    }

    .wel-r>div .wel-block-main {
        position: static;
        height: 0;
        width: 100%;
        padding: 0;
        background: none;
    }

    .wel-r>div:hover {
        background: rgba(0, 73, 181, .9);
    }

    .wel-r>div:hover .wel-block-main {
        height: auto;
    }

    .wel-r>div:hover>.wel-block {
        height: 0;
        overflow: hidden;
    }

    .title h2 {
        font-size: .22rem;
    }

    .banner .slick-dots {
        bottom: 0.15rem;
    }

    .banner .slick-dots li, .jm3-c .slick-dots li {
        width: 0.1rem;
        height: 0.1rem;
    }

    .title {
        margin-bottom: .25rem;
    }

    .title h2 {
        margin-left: .35rem;
    }

    .jm1 {
        margin-top: .35rem;
    }

    .jm2-c ul {
        flex-wrap: wrap;
    }

    .jm2-c ul li {
        width: 48%;
    }

    .jm2-c ul li:nth-child(-n+2) {
        margin-bottom: .2rem;
    }

    .jt2-c>ul, .jt3-c>ul {
        margin: 0 -.1rem;
    }

    .jt2-c>ul li a, .jt3-c ul li a {
        margin: 0 .1rem;
    }

    .jt1, .jt3 {
        margin-top: .35rem;
    }

    .jt2, .jt4 {
        padding-top: .35rem;
        margin-top: 0;
        padding-bottom: .35rem;
    }

    .st1-c>ul {
        margin: 0 -0.1rem;
    }

    .st1-c ul li a {
        margin: 0 .0.1rem;
    }

    .st2-c, .st3-c {
        display: block;
    }

    .st2-l, .st3-l {
        width: auto;
    }

    .st2-r, .st3-r {
        width: auto;
        margin-top: .25rem;
    }

    .st-block {
        background: #0c51ab;
        padding: .35rem 0;
    }

    .st3, .st-block, .st1 {
        margin-top: .35rem;
    }

}


@media screen and (max-width:768px) {
    .wel-main {
        display: block;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    .wel-l {
        width: auto;
    }

    .wel-r {
        padding-left: 0;
        margin-top: .2rem;
    }

    .welcome {
        padding-bottom: 0;
    }

    .welcome .footer1 {
        position: static;
    }


    .jm1-cbox.on {
        display: block;
    }

    .jm1-l, .jm1-r {
        width: auto;
    }

    .jm1-l .jm-info div {
        display: block;
        margin-top: 0.1rem;
    }

    .jm1-l .jm-info {
        padding: .1rem .2rem;
    }

    .jm1-r ul li {
        width: 49%;
    }

    .jm2-info {
        padding: .1rem .15rem;
    }

    .jm2-c ul li a:hover .pic.play::after {
        bottom: calc((100% - 2.11rem) / 2 + 2.23rem);
    }

    .jm2-c ul, .jm3-c>ul {
        margin: 0 -.1rem;
    }

    .jm2-c ul li a, .jm3-c ul li a {
        margin: 0 .1rem;
    }

    .jt1-c {
        display: block;
    }

    .jt1-l, .jt1-r {
        width: auto;
    }

    .jt3-c ul li a .pic::after {
        display: none;
    }

    .jt3-c ul li a .jt3-info {
        padding: .15rem;
        width: 100%;
    }

    .jt3-c ul li a .jt3-info .jm-info h3 {
        height: auto;
        white-space: nowrap;
    }

    .jt3-c .slick-speed {
        width: auto;
        left: .3rem;
        right: 0.3rem;
        transform: translateX(0);
        max-width: none;
    }

    .jt3-c .slick-prev {
        right: auto;
        left: 0.2rem;
    }

    .jt3-c .slick-next {
        left: auto;
        right: 0.2rem;
    }

    .jt4-c ul {
        display: block;
    }

    .jt4-c ul li {
        width: auto;
        line-height: .58rem;
    }

    .jt4-c ul li:nth-child(2) a {
        border-top: none;
    }

    .jt4-c ul li:nth-child(2)::before {
        top: -1px;
    }
}


@media screen and (max-width:480px) {
    .st1-c .slick-prev {
        right: auto;
        margin: 0;
        left: .2rem;
    }

    .st1-c .slick-next {
        left: auto;
        margin: 0;
        right: .2rem;
    }

    .st1-c .slick-dots {
        width: auto;
        margin-left: .5rem;
        margin-right: .5rem;
        justify-content: center;
    }

    .st1-c .slick-dots li {
        margin: 0 .05rem;
    }
}