/* 教培机构 */

.vjs-poster {
    background-color: #fff !important;
}

.tensystem {
    width: 100%;
    height: 1066px;
    background-color: #F6FAFF;
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/jpbj1.png') no-repeat center center;
    padding-top: 100px;
    background-size: auto 100%;
    box-sizing: border-box;
}

.tensystem .center_title {
    width: 180px;
    height: 180px;
    text-align: center;
    position: absolute;
    left: 510px;
    top: 422px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.tensystem .tensystem_title {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #333333;
}

.tensystem .tensystem_classification {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #1472ff;
    margin-top: 20px;
}

.tensystem .tensystem_introduce {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #666666;
    margin-top: 8px;
}

.tensystem ul li {
    position: absolute;
    width: 100px;
    height: 132px;
    cursor: pointer;
    z-index: 9;
}

.tensystem ul li img {
    width: 109px;
    height: 117px;
    z-index: 9;
    margin-left: 5px;
}

.tensystem ul li div {
    width: 180px;
    height: 72px;
    position: absolute;
    top: 16px;
    left: 40px;
    z-index: -1;
    text-align: center;
    line-height: 72px;
    color: #fff;
    transition: 1s;
    opacity: 0;
    padding-left: 30px;
    box-sizing: border-box;
    margin-left: -30px;
}

.tensystem ul li .word1 {
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/jyword.png') no-repeat center center;
    background-size: cover;
}

.tensystem ul li .word2 {
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/crmword.png') no-repeat center center;
    background-size: cover;
}

.tensystem ul li .word3 {
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/yyword.png') no-repeat center center;
    background-size: cover;
}

.tensystem ul li .word4 {
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/cwword.png') no-repeat center center;
    background-size: cover;
}

.tensystem ul li .word5 {
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/bbword.png') no-repeat center center;
    background-size: cover;
}

.tensystem ul li .word6 {
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/wpword.png') no-repeat center center;
    background-size: cover;
}

.tensystem ul li .word7 {
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/jxword.png') no-repeat center center;
    background-size: cover;
}

.tensystem ul li .word8 {
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/skword.png') no-repeat center center;
    background-size: cover;
}

.tensystem ul li .word9 {
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/jwword.png') no-repeat center center;
    background-size: cover;
}

.tensystem ul li .word10 {
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/xyword.png') no-repeat center center;
    background-size: cover;
}

.tensystem .bj2 {
    width: 624px;
    height: 624px;
    position: absolute;
    top: 199px;
    left: 287px;
    animation: rotate 7s linear infinite;
}

.tensystem .bj3 {
    position: absolute;
    top: 265px;
    left: 358px;
    animation: rotate2 7s linear infinite;
}

.tensystem .center_title p:nth-child(2) {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
}

.tensystem .center_title p:nth-child(3) {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    color: #ffffff !important;
}

.tensystem .img1 {
    animation: lo1 1.2s linear infinite alternate-reverse;
}

.tensystem .img2 {
    animation: lo2 2s linear infinite alternate-reverse;
}

.tensystem .img3 {
    animation: lo3 1.5s linear infinite alternate-reverse;
}

.tensystem .img4 {
    animation: lo4 1.4s linear infinite alternate-reverse;
}

.tensystem .img5 {
    animation: lo1 1.5s linear infinite alternate-reverse;
}

.tensystem .img6 {
    animation: lo2 1.2s linear infinite alternate-reverse;
}

.tensystem .img7 {
    animation: lo3 1.4s linear infinite alternate-reverse;
}

.tensystem .img8 {
    animation: lo4 1.6s linear infinite alternate-reverse;
}

.tensystem .img9 {
    animation: lo1 1.2s linear infinite alternate-reverse;
}

.tensystem .img10 {
    animation: lo2 1.3s linear infinite alternate-reverse;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes lo1 {
    0% {
        transform: translateY(0);
    }

    0% {
        transform: translateY(-15px);
    }
}

@keyframes lo2 {
    0% {
        transform: translateY(0);
    }

    0% {
        transform: translateY(-15px);
    }
}

@keyframes lo3 {
    0% {
        transform: translateY(0);
    }

    0% {
        transform: translateY(-15px);
    }
}

@keyframes lo4 {
    0% {
        transform: translateY(0);
    }

    0% {
        transform: translateY(-15px);
    }
}

.tensystem ul li p {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    text-align: center;
    margin-top: -8px;
}

.tensystem ul li:nth-child(1) {
    top: 214px;
    left: 287px;
}

.tensystem ul li:nth-child(2) {
    top: 210px;
    left: 660px;
}

.tensystem ul li:nth-child(3) {
    top: 300px;
    left: 899px;
}

.tensystem ul li:nth-child(4) {
    top: 485px;
    left: 964px;
}

.tensystem ul li:nth-child(5) {
    top: 670px;
    left: 881px;
}

.tensystem ul li:nth-child(6) {
    top: 816px;
    left: 650px;
}

.tensystem ul li:nth-child(7) {
    top: 745px;
    left: 383px;
}

.tensystem ul li:nth-child(8) {
    top: 682px;
    left: 142px;
}

.tensystem ul li:nth-child(9) {
    top: 523px;
    left: 200px;
}

.tensystem ul li:nth-child(10) {
    top: 345px;
    left: 138px;
}


/* 系统功能 */

.system_function {
    width: 100%;
    height: 863px;
    padding-top: 100px;
    box-sizing: border-box;
    overflow: hidden;
}

.system_function_title {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    color: #333333;
}

.advantage_icon {
    /* width: 55px; */
    height: 57px;
    margin: 0 auto;
}

.system_function_tabs {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    border-bottom: 1px solid #cdddfe;
    padding-bottom: 16px;
}

.system_function_tabs li {
    text-align: center;
    width: 240px;
    cursor: pointer;
    height: 110px;
    position: relative;
}

.system_function_tabs li:hover {
    color: #1472ff;
}

.system_function_tabs li p {
    margin-top: 8px;
}

.li_p_active {
    color: #1472FF;
}

.system_function_tabs li i {
    display: inline-block;
    width: 100%;
    height: 4px;
    background: #1472ff;
    border-radius: 100px 100px 0px 0px;
    position: absolute;
    bottom: -16px;
    left: 0;
    transform: scaleX(0);
    transition: .3s;
}

.system_function_tabs_li_active {
    transform: scale(1) !important;
}

.advantage1 {
    background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/tinifiedjp.png") no-repeat;
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    margin-bottom: 8px;
}

.advantage_leave {
    animation: advantage-icon-leave .2s steps(16) forwards
}

.advantage_enter {
    animation: advantage-icon-enter .2s steps(16) forwards
}

@keyframes advantage-icon-leave {
    0% {
        background-position: 0 -1152px
    }

    to {
        background-position: 0 0
    }
}

@keyframes advantage-icon-enter {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -1152px
    }
}

.system_function_tabs_content {
    opacity: 0;
    padding-top: 30px;
    justify-content: space-between;
    position: absolute;
    top: 198px;
    left: 0;
    display: flex;
}

.system_function_tabs_content_active {
    opacity: 1;
    z-index: 2;
}

.system_function_tabs_content .content_left img {
    width: 639px;
    height: 510px;
}

.system_function_tabs_content .content_left {
    position: absolute;
    left: -600px;
    top: 10px;
    /* margin-left: -200px; */
}

.system_function_tabs_content .content_right {
    width: 480px;
    height: 354px;
    position: absolute;
    top: 116px;
    /* margin-top: 60px;
    margin-left: 387px; */
    left: 1400px;
}
.system_function_tabs_content .content_right1 {
    width: 480px;
    height: 354px;
    position: absolute;
    top: 62px;
    /* margin-top: 60px;
    margin-left: 387px; */
    left: 1400px;
}
.tabs_content_margin {
    left: 0px !important;
    transition: all 1s;
    transition-timing-function: ease
}

.tabs_content_margin2 {
    left: 720px !important;
    transition: all 1s;
    transition-timing-function: ease
}

.content_right .icon {
    display: inline-block;
    padding: 0 12px;
    line-height: 26px;
    height: 26px;
    background: #e1eefe;
    border-radius: 0px 13px 13px 13px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #1472ff;
}

.content_right .title {
    font-size: 22px;
    font-weight: 500;
    color: #333333;
    margin-top: 13px;
}

.content_right .title2 {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
}

.content_right .listof {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
}

.content_right .listof i {
    width: 8px;
    height: 8px;
    background: #1472ff;
    border-radius: 50%;
    margin-right: 10px;
}

.content_right .listof span {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin-right: 20px;
}

.foot_button {
    margin-top: 69px;
    display: flex;
}

.foot_button .trial {
    width: 148px;
    height: 44px;
    border: 1px solid #1472ff;
    border-radius: 27px;
    text-align: center;
    line-height: 44px;
    font-size: 16px;
    font-weight: 400;
    color: #1472ff;
    margin-right: 18px;
    margin-left: 0;
    cursor: pointer;
}

.foot_button .consulting {
    width: 148px;
    height: 44px;
    background: #1472ff;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    line-height: 44px;
    cursor: pointer;
}

.tabs_content_active {
    opacity: 1 !important;
    z-index: 2;
}

.tabs_content_active1 {
    opacity: 0 !important;
    z-index: 0;
}


/* 教研中心 */

.teaching_research {
    width: 100%;
    height: 724px;
    padding-top: 100px;
    box-sizing: border-box;
    background-color: #f6f9fd;
}

.teaching_research_title {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    color: #333333;
}

.teaching_research_bj {
    width: 1151px;
    height: 350px;
    position: absolute;
    top: 119px;
    left: 70px;
}

.teaching_research ul {
    height: 250px;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 160px;
    left: 15px;
}

.teaching_research ul li {
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    color: #666666;
    font-weight: 400;
    width: 150px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background: rgba(255, 255, 255, 0.60);
    border: 2px solid #ffffff;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0px 4px 16px -2px rgba(55, 99, 170, 0.08);
}

.teaching_research ul li:hover {
    color: #1472FF;
}

.teaching_research_li_active {
    background: linear-gradient(90deg, #31a8ff, #1472ff) !important;
    box-shadow: 0px 4px 16px -2px rgba(55, 99, 170, 0.08) !important;
    border: none !important;
    color: #fff !important;
}

.teaching_research_video {
    position: absolute;
    display: none;
    top: 100px;
    left: 210px;
    width: 640px;
    height: 374px;
    border: 10px solid #fff;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0px 8px 20px 0px rgba(55, 99, 170, 0.08);
}

.teaching_research_video .video {
    width: 100%;
    height: 100%;
}

.teaching_research_video_active {
    display: block;
}

.teaching_research_content {
    width: 300px;
    position: absolute;
    right: 22px;
    top: 170px;
    display: none;
}

.teaching_research_content_active {
    display: block;
}

.teaching_research_content img {
    width: 36px;
    height: 36px;
    margin-right: 12px;
}

.teaching_research_content p {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    display: flex;
    align-items: center;
}

.teaching_research_content .solid {
    width: 100%;
    height: 1px;
    background-color: #c6efff;
    margin-top: 16px;
}

.teaching_research_word {
    margin-top: 24px;
}

.teaching_research_word div {
    display: flex;
    margin-bottom: 18px;
}

.teaching_research_word div span {
    display: block;
    width: 4px;
    height: 4px;
    background: #b1d2ff;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 8px;
    text-align: center;
}

.teaching_research_word div p {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

.teaching_research .foot_button {
    width: 360px;
    height: 48px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    position: absolute;
    left: 50%;
    margin-left: -180px;
    bottom: -536px;
}

.teaching_research .foot_button div {
    width: 170px !important;
    height: 48px;
    box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
}

.teaching_research .foot_button .trial {
    border: 1px solid #1472ff;
    color: #1472ff;
}

.teaching_research .foot_button .consulting {
    background: #1472ff;
    color: #fff;
}

.teaching_research .foot_button .consulting:hover {
    background: linear-gradient(180deg, #2dabff, #1472ff) !important;
    box-shadow: 0px 8px 16px 0px rgb(55 99 170 / 10%) !important;
}

/* 客户管理 */

.customer_management {
    padding-top: 100px;
    margin-bottom: 100px;
}

.customer_management_title {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    color: #333333;
    margin-bottom: 40px;
}

.customer_management ul li {
    width: 234px;
    height: 550px;
    border: 1px solid #c3dbff;
    box-sizing: border-box;
    border-radius: 24px;
    border-right: none;
    transition: .4s;
    position: relative;
}

.customer_management_li_active {
    width: 498px !important;
    border: 1px solid #1472ff !important;
    transition: .4s;
    position: relative;
    overflow: hidden;
}

.customer_management ul li .clues p {
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    color: #333333;
    margin-top: 52px;
}

.customer_management ul li .clues span {
    display: block;
    width: 192px;
    margin: 0 auto;
    margin-top: 36px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #333333;
}

.customer_management ul li .clues img {
    width: 100%;
    position: absolute;
    bottom: 150px;
    left: 0;
}

.customer_management ul li .clues_active {
    width: 498px;
    opacity: 0;
    position: absolute;
    top: 0;
}

.customer_management ul li .clues_active p {
    height: 60px;
    background: url('https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/btd.png') no-repeat center center;
    background-size: 101% 102%;
    line-height: 60px;
    display: flex;
    align-items: center;
    padding-left: 27px;
    box-sizing: border-box;
    color: #fff;
    font-weight: 500;
    font-size: 20px;
}

.customer_management ul li .clues_active p img {
    width: 30px;
    height: 30px;
    margin-right: 12px;
}

.customer_management ul li .clues_active .wrod {
    padding: 0 24px;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
}

.customer_management ul li .clues_active .bigimg {
    width: 476px;
    display: block;
    margin: 0 auto;
    margin-top: 26px;
}

.customer_management ul li .foot_button {
    width: 228px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -114px;
    opacity: 0;
}

.customer_management ul li .foot_button div {
    width: 104px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    box-sizing: border-box;
    font-weight: 400;
    border-radius: 27px;
    cursor: pointer;
    font-size: 14px;
}

.clues_active .foot_button .trial {
    color: #1472FF;
    border: 1px solid #1472ff;
}

.clues_active .foot_button .consulting {
    background-color: #1472FF;
    color: #fff;
}


/* 缴费对账 */

.payment_reconciliation {
    margin-bottom: 100px;
}

.payment_reconciliation .payment_reconciliation_title {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    color: #333333;
}

.payment_reconciliation .payment_reconciliation_tabs {
    width: 660px;
    height: 40px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    margin-top: 40px;
}

.payment_reconciliation_tabs li {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #333333;
    cursor: pointer;
    position: relative;
}

.payment_reconciliation_tabs li i {
    display: inline-block;
    width: 80px;
    height: 4px;
    /* margin: 0 auto; */
    background: #1472ff;
    border-radius: 100px 100px 0px 0px;
    transform: scaleX(0);
    transition: .2s;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -40px;
}

.payment_reconciliation_p_active {
    color: #1472FF;
}

.payment_reconciliation_tabsLi_active {
    transform: scale(1) !important;
}

.payment_reconciliation_tabs_content {
    height: 560px;
    width: 100%;
    background-color: #F6F9FD;
    position: relative;
    overflow: hidden;
}

.tabs_content {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.tabs_content_left {
    position: absolute;
    left: -800px;
    top: 0;
    /* margin-left: -300px; */
}

.tabs_content_left img {
    width: 624px;
    height: 498px;
    margin-top: 36px;
}

.tabs_content_right {
    width: 425px;
    top: 118px;
    left: 1200px;
    position: absolute;
}

.tabs_content_right .title {
    font-size: 22px;
    font-weight: 500;
    text-align: left;
    color: #333333;
    margin-bottom: 40px;
}

.tabs_content_right ul li {
    margin-top: 24px;
    display: flex;
    /* align-items: center; */
}

.tabs_content_right ul li span {
    width: 8px;
    height: 8px;
    background: #1472ff;
    border-radius: 50%;
    margin-right: 12px;
    margin-top: 8px;
}

.tabs_content_right ul li p {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
}

.tabs_content_right .foot_button {
    display: flex;
    position: absolute;
    bottom: -110px;
}

.tabs_content_right .foot_button div {
    width: 148px;
    height: 44px;
    cursor: pointer;
    border-radius: 27px;
    line-height: 44px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.tabs_content_right .foot_button .trial {
    border: 1px solid #1472ff;
    box-sizing: border-box;
    color: #1472FF;
    margin-right: 18px;
}

.tabs_content_right .foot_button .consulting {
    background-color: #1472FF;
    color: #fff;
}

.advantage_icon {
    width: 72px;
    height: 70px;
    /* margin-right: 13px; */
}

.advantage1 {
    background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/tinifiedjp.png") no-repeat;
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    margin-bottom: 4px;
}

.advantage2 {
    background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/tinifiedyxy.png") no-repeat;
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    margin-bottom: 4px;
}

.advantage3 {
    background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/tinifiedcrm.png") no-repeat;
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    margin-bottom: 4px;
}

.advantage4 {
    background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/tinifieddx.png") no-repeat;
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    margin-bottom: 4px;
}

.advantage5 {
    background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao-pc/tinifiedjxhl.png") no-repeat;
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    margin-bottom: 4px;
}

.advantage_leave {
    animation: advantage-icon-leave .3s steps(16) forwards
}

.advantage_enter {
    animation: advantage-icon-enter .3s steps(16) forwards
}

.consulting:hover {
    background: linear-gradient(180deg, #2dabff, #1472ff);
    box-shadow: 0px 8px 16px 0px rgba(55, 99, 170, 0.10);
}

.trial:hover {
    background: rgba(20, 114, 255, 0.10);
    box-shadow: 0px 8px 16px 0px rgba(55, 99, 170, 0.10);
}