body {
    background-color: #fff;
    color: #333;
    line-height: 1.6;
    max-width: 750px;
}
.fl {float: left;}
.fr {float: right;}
.myred {color: #cd225a;}
/**title**/
.mtitle {
    width: 100%;
    text-align: center;
    margin: 35px 0 25px;
    overflow: hidden;
}
.mtitle h1 {
    display: inline-block;
    line-height: 30px;
    font-size: 1.5em;
    color: #111;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.mtitle h1:after {
    display: block;
    content: '';
    width: 40px;
    height: 3px;
    background: linear-gradient(to right, transparent, #cd225a);
    position: absolute;
    left: -45px;
    top: 13px;
    z-index: 2;
}
.mtitle h1:before {
    display: block;
    content: '';
    width: 40px;
    height: 3px;
    background: linear-gradient(to left, transparent, #cd225a);
    position: absolute;
    right: -45px;
    top: 13px;
    z-index: 2;
}
.mtitle p {
    display: block;
    font-size: 0.875em;
    line-height: 20px;
}
/**btn**/
.mybtn {width: 60%; margin: 25px auto 0 auto; overflow: hidden;}
.mybtn a {
    display: block;
    width: 100%;
    line-height: 40px;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    background: linear-gradient(to bottom, #ff84a1, #cd225a);
}

.zhbanner {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.mywhy {width: 100%; padding: 0 15px; overflow: hidden;}
.mywhy .mbox {overflow: hidden;}
.mywhy .showpic {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    background: #faf3f2;
    border-radius: 5px;
    margin-bottom: 15px;
    overflow: hidden;
}
.mywhy .showpic:last-child {margin-bottom: 0;}
.mywhy .show {
    flex: 1;
    padding-right: 15px;
    padding-left: 15px;
    text-align: left;  
}
.mywhy .show h3 {
    display: block;
    line-height: 26px;
    font-size: 1em;
    font-weight: bold;
    padding-bottom: 10px;
    position: relative;
    z-index: 1;
}
.mywhy .show h3:before {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background: #cd225a;
    position: absolute;
    left: 0;
    bottom: 4px;
    z-index: 2;
}
.mywhy .show p {
    display: block;
    font-size: 0.875em;
    line-height: 20px;
}
.mywhy .pic {
    width: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.myadv {width: 100%; padding: 0 15px; overflow: hidden;}
.myadv .showimg {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    overflow: hidden;
}
.myadv .img { width: 48%; flex-shrink: 0;}
.myadv .show {
    flex: 1;
    padding-left: 15px;
    text-align: left;      
}
.myadv .show h3 {
    display: block;
    font-size: 1em;
    line-height: 16px;
    padding-left: 10px;
    color: #cd225a;
    margin-bottom: 8px;
    border-left: 5px solid #cd225a;
}
.myadv .show p {
    font-size: 0.8em;
    line-height: 18px;
    text-indent: 1em;
}
.myadv .listbox {
    padding: 10px;
    font-size: 0.875em;
    color: #111;
    line-height: 26px;
    background: #faf3f2;
    border-radius: 5px;
    margin-top: 15px;
    overflow: hidden;
}
.myadv .listbox li {
    display: block;
    padding-left: 20px;
    background: url(../images/check.png) no-repeat left center;
    background-size: 18px 18px;
}

.mywho {width: 100%; padding: 0 15px; overflow: hidden;}
.mywho .mbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;   
    overflow: hidden; 
}
.mywho .items {
    width: calc(50% - 10px);
    margin-bottom: 20px;
    background: #faf3f2;
    padding: 20px 15px;
    text-align: center; 
    border-radius: 5px;
    overflow: hidden;
}
.mywho .items img {width: 49px; height: 57px; margin: 0 auto;}
.mywho .items p {
    display: block;
    font-size: 0.8em;
    padding: 10px 0;
    color: #111;
}
.mywho .items span {
    display: inline-block;
    width: 80%;
    line-height: 30px;
    border-radius: 18px;
    overflow: hidden;
    background: #cd225a;
    font-size: 0.875em;
    color: #fff;
}
.mywho .mybtn {margin-top: 10px;}

.mybmh {width: 100%; padding: 0 15px; overflow: hidden;}
.mybmh .mbox { text-align: center; overflow: hidden;}
.mybmh .mbox img {border-radius: 5px; overflow: hidden;}
.mybmh .mbox p {
    display: block;
    font-size: 0.875em;
    line-height: 16px;
    text-indent: 1em;
    color: #111;
    padding-top: 10px;
    text-align: left;
}
.mybmh .tdian {
    display: flex; 
    background: #faf3f2;
    padding: 10px;
    border-radius: 5px;
    margin-top: 15px;
    overflow: hidden;
}
.mybmh .tdian li {
    width: 33.3%;
    text-align: center;
    padding: 0 20px;
}
.mybmh .tdian li:nth-child(2) {
    border-left: 1px solid #333;
    border-right: 1px solid #333;
}
.mybmh .tdian h3 {font-size: 1em; color: #111;}
.mybmh .tdian span {
    display: block;
    font-size: 0.875em; 
    color: #333; 
    line-height: 20px;
}

.myad {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 35px;
    overflow: hidden;
}

.mycourse{width: 100%; padding: 0 15px; overflow: hidden;}
.mycourse .tab-container {
    width: 100%;
    max-width: 100%;
    background: #faf3f2;
    box-shadow: 0 3px 10px #e6e6e6;
    overflow: hidden;
}
.mycourse .tab-header {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}
.mycourse .tab-item {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 0.875em;
    color: #666;
    transition: all 0.3s ease;
    border-right: 1px solid #eee;
}
.mycourse .tab-item:last-child {border-right: none;}
.mycourse .tab-item.active {
    color: #fff;
    background-color: #cd225a;
}
.mycourse .tab-content { padding: 15px;}
.mycourse .content-item { display: none;}
.mycourse .content-item.active {
    display: block;
    animation: fadeIn 0.3s ease;
}
.mycourse .course-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
}
.mycourse .course-list li {
    width: 32%;
    border-radius: 5px;
    overflow: hidden;
}
.mycourse .course-list li:nth-child(2) {margin: 0 2%;}
.mycourse .texts {margin-top: 15px; overflow: hidden;}
.mycourse .texts span {
    display: block;
    font-size: 1em;
    font-weight: bold;
    color: #111;
    line-height: 20px;
    padding-left: 10px;
    border-left: 5px solid #cd225a;
}
.mycourse .texts p {
    display: block;
    font-size: 0.875em;
    line-height: 18px;
    color: #333;
    padding-top: 8px;
}

.myteach {
    padding: 0 15px 35px 15px; 
    margin-top: 35px;
    background: #faf3f2; 
    overflow: hidden;
}
.myteach .swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;   
    padding-bottom: 15px;
}
.myteach .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;    
    overflow: hidden;
}
.myteach .swiper-container-horizontal>.swiper-pagination-bullets { bottom: -5px;}
.myteach .swiper-pagination-bullet-active {background: #cd225a;}
.myteach .img {width:45%;}
.myteach .des {padding-left: 5px; padding-right: 5px;}
.myteach .des h2 {
    display: block;
    font-size: 1em;
    line-height: 20px;
}
.myteach .des span {
    display: block;
    font-size: 0.875em;
    color: #cd225a;
    padding: 5px 0;
}
.myteach .des p {
    display: block;
    font-size: 0.8em;
    line-height: 20px;
}
.myteach .myprocess {
    background: #fff; 
    border-radius: 5px; 
    margin: 15px 0;
    overflow: hidden;
}
.myteach .myhead {
    width: 100%;
    line-height: 30px;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    background: #cd225a;
}
.myteach .listbox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 15px 5px;
    overflow: hidden;
}
.myteach .lists1 { font-size: 0.75em; text-align: center;}
.myteach .lists1 span {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: #cd225a;
    margin: 0 auto;
    overflow: hidden;
}
.myteach .lists1 img {
    width: 38px;
    height: 38px;
    margin: 12px 0 0 12px;
}
.myteach .lists2 img {width: 62%; margin: 0 auto;}
.myteach .myshicao {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.myteach .myshicao .shicao {padding: 10px;}

.myhuanj {padding: 0 15px; overflow: hidden;}
.myhuanj .swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;
}
.myhuanj .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 5px; 
    overflow: hidden;
}
.myhuanj .swiper-container-horizontal>.swiper-pagination-bullets { bottom: -5px;}
.myhuanj .swiper-pagination-bullet-active {background: #cd225a;}

.myjiuy {padding: 0 15px; overflow: hidden;}
.myjiuy .mbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
}
.myjiuy .items {
    width: calc(50% - 10px);
    margin-bottom: 20px;
    background: #faf3f2;
    text-align: center;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    overflow: hidden;    
}
.myjiuy .items .bq {
    width: 60px;
    font-size: 0.875em;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background: url(../images/bq.png) no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 2;
}
.myjiuy .items .des {
    font-size: 0.875em;
    line-height: 22px;
    padding: 10px 0;
}
.myjiuy .sbox {overflow: hidden;}
.myjiuy .showimg {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #faf3f2;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
    overflow: hidden;
}
.myjiuy .showimg:last-child {margin-bottom: 0;}
.myjiuy .showimg .icons {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background: #cd225a;
}
.myjiuy .showimg .icons img {width: 62%;}
.myjiuy .showimg .show {width: 72%;}
.myjiuy .showimg .show span {
    display: block;
    font-size: 1em;
    font-weight: bold;
}
.myjiuy .showimg .show p {
    display: block;
    font-size: 0.8em;
    line-height: 22px;
    padding-top: 5px;
}

.mybm {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 35px;
    overflow: hidden;
}

/**报名**/
.myforms {padding: 0 15px; overflow: hidden;}
.myinput {overflow: hidden;}
.myinput .inputbox {margin-bottom: 15px; line-height: 35px; overflow: hidden; font-size: 14px;}
.myinput .inputs {
    width: 100%; 
    line-height: 35px; 
    padding-left: 5px; 
    border: 1px solid #d4d4d4; 
    border-radius: 5px; 
    overflow: hidden;
}
.mybtns .anbtn {
    display: block; 
    width: 100%; 
    line-height: 40px; 
    background: #cd225a;
    color: #fff; 
    font-size: 16px; 
    font-weight: bold;
    text-align: center; 
    border-radius: 5px; 
    overflow: hidden; 
    border: none;
}
.myheads {margin: 35px auto 25px auto; overflow: hidden;}
.myheads h1 {
    font-size: 24px; 
    font-weight: bold; 
    color: #cd225a;
    text-align: center;
    margin-bottom: 10px;
}
.myheads .rep {
    width: 100%; 
    font-size: 16px; 
    overflow: hidden; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    text-align: center;
}
.myheads .rep img {display: inline-block; width: 18px; height: 24px; float: left;; overflow: hidden;}
.myheads .rep p {display: inline-block; line-height: 16px; color: #999; padding: 0 5px; float: left;}
.myheads .rep span {
    display: inline-block; 
    padding: 2px 8px;
    line-height: 18px;
    border-radius: 5px;
    color: #fff; 
    background-image: linear-gradient(to right, #e75484 , #cd225a);
    float: left;
    overflow: hidden;
}
.mybottom {background: #eaeaea; padding: 20px 15px 85px 15px; margin-top: 30px; margin-bottom: 60px; font-size: 14px; overflow: hidden;}
.mybottom span {color: #111; float: left;}
.mybottom p {color: #111; float: right;}

/* 底部悬浮栏样式 */
.nav_list {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    background-color: #f8f8f8;
    border-top: 1px solid #e0e0e0;
    z-index: 1000;
    padding: 10px;
    box-sizing: border-box;
    /* 添加投影效果 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}
.nav_xf,
.nav_dh {
    flex: 1;
    text-align: center;
    cursor: pointer;
}

.nav_xf::before,
.nav_dh::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 5px;
    background-size: cover;
}
.nav_xf::before {
    background-image: url('../images/navl1.png');
}
.nav_dh::before {
    background-image: url('../images/navl2.png');
}
.nav_list a {
    text-decoration: none;
    color: #333;
}
.nav_lq { flex: 1.5; text-align: center;}

.nav_lq a {
    display: inline-block;
    line-height: 35px;
    height: 35px;
    border-radius: 50px;
    font-size: 14px;
    color: #fff;
    background: #cd225a;
    width: 80%;
    animation: mscale 1s infinite;
    margin-top: 8px;
}

/* 定义动画关键帧 */
@keyframes mscale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}