.wid1200 {
    width: 1200px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.pr {
    position: relative;
}

.mr0 {
    margin-right: 0px !important;
}

.container {
    background: linear-gradient(0deg, #E4F0FE 0%, #F6F9FF 100%);
    /* position: absolute;
    z-index: -1;
    width: 100%; */
}

html {
    scroll-behavior: smooth;
}

.header2 {
    position: relative;
}

.header_img {
    width: 100%;
    min-width: 1200px;
}

.header_buy_btn {
    position: absolute;
    /* Based on banner 1920x800 */
    left: calc(580 / 1920 * 100%);
    top: calc(507 / 800 * 100%);
    width: calc(208 / 1920 * 100%);
    /* Keep button image ratio 208:70 so height scales with width */
    aspect-ratio: 208 / 70;
    background: url(../images/2025/立即购买静态_03.png) no-repeat center center;
    background-size: 100% 100%;
}

.header_buy_btn:hover {
    background: url(../images/2025/立即购买鼠标经过_03.png) no-repeat center center;
    background-size: 100% 100%;
}

.teacher_tag {
    /* Scale with banner width (270/1920) */
    width: calc(270 / 1920 * 100%);
    position: absolute;
    left: calc(780 / 1920 * 100%);
    top: calc(500 / 800 * 100%);
}


.nav {
    height: 100px;
    background: url(../images/2025/navbg.png) no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    min-width: 1200px;
    z-index: 100;

}

.nav a {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.nav a:hover {
    color: #336EFA;
}


.nav .nav_content {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    color: #333333;
}

.nav_logo {
    width: 116px;
    height: 46px;
}

.course_img {
    display: block;
    margin: 20px auto 0;
}

.dividing_line {
    display: block;
    width: 1200px;
    height: 2px;
    margin: 20px auto 0;
}

.advantage_img {
    display: block;
    margin: 76px auto 0;
}


.title-teacher {
    text-align: center;
    font-weight: 800;
    font-size: 36px;
    color: #326DFA;
    margin-top: 20px;
}

.teacher-subtitle {
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    color: #9298B0;
    margin-bottom: 60px;
}

/*  */

.teacher-bg {
    width: 100%;
    height: 500px;
    background: url(../images/2025/固定背景_02.png) no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*  */

.teacherCon {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.50);
    border: 3px solid #ffffff;
    border-radius: 50px;
    padding: 0 19px;
    padding-top: 59px;
    box-sizing: border-box;
    margin-bottom: 100px;
    position: relative;
}



.TeacherCon {
    width: 1400px;
    /* overflow: hidden; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.TeacherCon .swiper-container {
    width: 1200px;
    height: 440px;
    margin: 80px 0 0 0 !important;

}

.TeacherCon .swiper-slide {
    width: 260px;
}


.TeacherCon .swiper-button-prev {
    background: none;
    left: 60px;
    top: 276px;
    width: 30px;
}

.TeacherCon .swiper-button-next {
    background: none;
    top: 276px;
    right: 60px;
    width: 30px;

}

.TeacherCon .swiper-button-prev img,
.TeacherCon .swiper-button-next img {
    width: 100%;
}

.TeacherCon .swiper-button-next:visited {
    border: 1px solid red;
}

.explainCon {
    margin-top: 100px;
    background: rgba(255, 255, 255, 0.50);
    border: 3px solid #ffffff;
    border-radius: 50px;
    padding: 57px 38px;
    box-sizing: border-box;
    /* height: 552px; */
    /* overflow: hidden;
    padding-bottom: 118px; */
}

.explainCon .ConWrap {
    font-size: 24px;
    font-weight: 400;
    text-align: left;
    color: #081b51;
    line-height: 32px;
    margin-top: 65px;
}

.explainCon .ConWrap p {
    padding: 7px 0 7px 17px;
    background: url(/acthtml/resources/images/home/kqjl/2023/23kqmy_dian.png) no-repeat left center;
    background-position: 0 19px;
}

.explainCon .ConWrap p span {
    display: block;
    text-indent: 43px;
    line-height: 40px;
}


/*  */




/* 听课说明 */
.listen-section {
    width: 1150px;
    color: #2B3A55;
    margin: auto;
}

.listen-section .title {
    text-align: center;
    font-weight: 800;
    font-size: 36px;
    color: #326DFA;
    line-height: 52px;
    margin-top: 70px;
    margin-bottom: 45px;
}


.listen-item {
    font-size: 20px;
    color: #555555;
    line-height: 34px;
}

.listen-item img {
    display: inline;
    padding: 0 5px 0 19px;
}

.listen-item p {
    padding-left: 40px;
}

.bottom-section {
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, #326DFA 0%, #4F6DFA 100%);
    margin-top: 66px;
}


/* 课程 */

.course-list {
    width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}



.course-item {
    margin-right: 13px;
    margin-bottom: 20px;
    position: relative;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.course-item:hover {
    transform: scale(1.05);
    z-index: 1;
}

.course-item .course_img {
    width: 387px;

}

.buy_btn,
.wait_open_btn,
.study_btn {
    width: 150px;
    height: 50px;
    position: absolute;
    bottom: 20px;
    left: 24px;
}

.buy_btn {

    background: url(../images/2025/course/立即购买_21.png) no-repeat center center;
    background-size: 100% 100%;

}

.buy_btn:hover {
    background: url(../images/2025/course/立即购买鼠标经过_21.png) no-repeat center center;
    background-size: 100% 100%;
}


.wait_open_btn {
    background: url(../images/2025/course/待开课_21.png) no-repeat center center;
    background-size: 100% 100%;
}

.wait_open_btn:hover {
    background: url(../images/2025/course/待开课鼠标经过_21.png) no-repeat center center;
    background-size: 100% 100%;
}

.study_btn {
    background: url(../images/2025/course/开始学习_21.png) no-repeat center center;
    background-size: 100% 100%;
}

.study_btn:hover {
    background: url(../images/2025/course/开始学习鼠标经过_21.png) no-repeat center center;
    background-size: 100% 100%;
}