/* Style Reset */
*{ margin:0; padding:0}
ul, ol, li, dl, dt, dd {list-style:none;}
a{text-decoration:none;outline:0px; color:#333}
img{ border:0;max-width: 100%;}
.ccsl{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block;}
.clear {clear:both;}
body{ width:100%;max-width:512px; margin:0 auto; background:#fff; font-size:12px; line-height:24px; color:#333; }
.m-slider {
	overflow-x: hidden;
	width: 96%;
	height: 14.5rem;
	position: relative;
	border-radius: 5px;
	margin-top: 3rem;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.slider-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    position: relative;
    z-index: 1;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}

.slider-item {
    width: 100%;
    height: 100%;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: #f6f6f6;
}

.slider-item img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
}

.slider-pagination {
    text-align: right;
    position: absolute;
    width: 100%;
    z-index: 2;
    right: 0;
    bottom: 10px;
    pointer-events: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.slider-pagination > .slider-pagination-item {
    margin: 0 .25rem;
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background-color: rgba(255,255,255,0.4);
}

.slider-pagination > .slider-pagination-item.slider-pagination-item-active {
    background-color: #fff;
    border-radius: 100%;
}
.headerbox{
	width: 100%;
	max-width: 512px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.headerbox img.bg{ display:block; width:100%}
.headerbox .topBox{
	top: 10px;
	width: 100%;
	z-index: 1;
	clear: both;
	font-size: 1rem;
	line-height: 30px;
	font-weight: bold;
	color: #808000;
	height: 30px;
	text-align: center;
}
.headerbox .topBox .L{ flex:1; height:35px; line-height:35px; background:#fff; border-radius:5px;}
.headerbox .topBox .L img{ display:block; float:left; height:25px; margin:5px;}
.headerbox .topBox .L input{ height:35px; line-height:35px;outline:none; float:left; border:0; background:none; color:#666; width:70%;letter-spacing:1px}
.headerbox .topBox .R{ height:35px; padding-left:10px;}
.headerbox .topBox .R img{ display:block; height:25px; margin-top:5px;}


.h54{ width:100%; height:54px; overflow:hidden}
.footerBox{width:100%; max-width:512px; margin:0 auto;}
.footerBox .footer{position:fixed;width:100%;max-width:512px;bottom:0;height:54px;z-index:999;}
.footerBox .footer ul{ overflow:hidden; border-top:1px solid #E7E7E7;box-sizing: border-box; background:#fff}
.footerBox .footer ul li{width:20%; height:54px; float:left; overflow:hidden}
.footerBox .footer ul li a{ display:block; overflow:hidden}
.footerBox .footer ul li img{height:26px;display:block; margin:0 auto; margin-top:3px}
.footerBox .footer ul li p{ text-align:center; height:24px; line-height:24px; color:#969696; letter-spacing:1px}
.footerBox .footer ul li.on p{ color:#0E4ACD} 


.typebox{ overflow:hidden}
.typebox ul{ overflow:hidden; padding:15px 0}
.typebox ul li{ float:left; width:25%;}
.typebox ul li img{ display:block; margin:0 auto; height:50px;}
.typebox ul li p{ text-align:center; line-height:30px; font-size:13px; letter-spacing:1px}

.allbox{ background:#F1F1F1; width:100%; height:10px}

.courseBox{ padding:0 15px; overflow:hidden; background:#fff}
.courseBox .titbox{ display:flex; height:50px; overflow:hidden}
.courseBox .titbox img{ display:block; height:20px; margin:15px 0;}
.courseBox .titbox p{ flex:1; height:50px; line-height:50px; font-size:15px; padding-left:5px; color:#000; letter-spacing:1px}

.courseBox ul.ul_1{ overflow:hidden; border-bottom:1px solid #eee; padding-bottom:15px}
.courseBox ul.ul_1 li{ float:left; width:49%;}
.courseBox ul.ul_1 li:nth-child(2n){ margin-left:2%}
.courseBox ul.ul_1 li img{ display:block; width:100%; height:8rem;border-radius:.6rem;}
.courseBox ul.ul_1 li .tit{ font-size:14px; line-height:30px}
.courseBox ul.ul_1 .price{ color:#F34B06; height:24px;line-height:24px; font-size:16px}
.courseBox ul.ul_1 .price span{ float:right; font-size:12px; color:#bbb; padding-right:5px}


.courseBox ul.ul_2{overflow:hidden;  padding-bottom:15px}
.courseBox ul.ul_2 li{ overflow:hidden;border-bottom:1px solid #eee; padding:10px 0}
.courseBox ul.ul_2 li:first-child{ padding-top:0}
.courseBox ul.ul_2 li:last-child{ border-bottom:none}
.courseBox ul.ul_2 li .L{ float:left; width:160px; height:115px; margin-right:15px}
.courseBox ul.ul_2 li .L img{ display:block; width:160px; height:115px;border-radius:.6rem;}
.courseBox ul.ul_2 li .R{ flex:1}
.courseBox ul.ul_2 li .R .tit{ font-size:14px; padding-top:10px;}
.courseBox ul.ul_2 li .R .sub{ color:#bbb;}
.courseBox ul.ul_2 li .R .pri{padding-top: 20px;font-size: 16px; color:#F34B06}
.courseBox ul.ul_2 li .R .pri a{ display:block; float:right; width:100px; height:26px; background:#0E4ACD; color:#fff; text-align:center; line-height:26px; font-size:12px; border-radius:15px; letter-spacing:1px}


.header{width:100%; max-width:512px; margin:0 auto;}
.header .box{height:46px;position:fixed;width:100%;max-width:512px;top:0;z-index:9999;border-bottom:1px solid #eee;background:#fff}
.header .box .L{position:absolute; left:0; top:0; height:46px; padding-left:15px;}
.header .box .L img{ display:block;height:22px;padding-top:14px;}
.header .box .C{
	width: 100%;
	height: 46px;
	line-height: 46px;
	text-align: center;
	font-weight: bold;
}
.header .box .C p{ text-align:center; font-size:16px; color:#333; letter-spacing:1px}
.hbox{ width:100%; height:46px; overflow:hidden}

.videoBox{ padding:15px 0; overflow:hidden}
.videoBox .video_1{ padding:0 15px}
.videoBox .video_1 img{ display:block; width:100%;}
.videoBox .titbox{ padding:15px 15px 5px; overflow:hidden}
.videoBox .titbox p{ font-size:15px; color:#000;letter-spacing: 1px;}
.videoBox .titbox span{ color:#999; font-size:12px;letter-spacing: 1px; padding-top:3px; display:block}
.videoBox ul{ overflow:hidden; padding:10px 15px}
.videoBox ul li{width: 100%;height:90px;box-shadow: #eee 0px 0px 10px 2px;border-radius: 10px;margin-bottom: 10px; padding-top:20px; overflow:hidden}
.videoBox ul li .L{ float:left; padding:0 15px;}
.videoBox ul li .L .date1{ height:30px; line-height:30px;}
.videoBox ul li .L .date1 img{ display:block; float:left; width:14px; margin-top:8px;} 
.videoBox ul li .L .date1 p{ float:left; padding-left:5px}
.videoBox ul li .L .date2{ font-size:16px; color:#000; padding-left:20px; padding-top:8px; letter-spacing:1px; font-weight:bold}
.videoBox ul li .C{ float:left; padding-right:15px}
.videoBox ul li .C img{ display:block; height:70px}
.videoBox ul li .R{ flex:1;}
.videoBox ul li .R .tit{ color:#000; font-size:14px; letter-spacing:1px}
.videoBox ul li .R .sub{ padding-top:15px;}
.videoBox ul li .R .sub img{ display:block; float:left; width:35px; height:35px; border-radius:100%}
.videoBox ul li .R .sub p{ float:left;height:35px; line-height:35px; padding-left:10px}
.videoBox ul li .R .sub a.a1{ float:right; display:block; border:1px solid #0E4ACD; width:70px; height:24px; line-height:24px; text-align:center; color:#0E4ACD; border-radius:5px;font-size:12px; letter-spacing:1px; margin-top:5px; margin-right:15px}
.videoBox ul li .R .sub a.a2{ float:right; display:block; background:#666;border:1px solid #666; width:70px; height:24px; line-height:24px; text-align:center; color:#fff;border-radius:5px; font-size:12px; letter-spacing:1px; margin-top:5px; margin-right:15px}



.courseBox ul.ul_3{overflow:hidden;  padding:15px 0}
.courseBox ul.ul_3 li{ overflow:hidden;border-bottom:1px solid #eee; padding:10px 15px}
.courseBox ul.ul_3 li:first-child{ padding-top:0}
.courseBox ul.ul_3 li:last-child{ border-bottom:none}
.courseBox ul.ul_3 li .L{ float:left; height:80px; margin-right:15px}
.courseBox ul.ul_3 li .L img{ display:block; height:80px;}
.courseBox ul.ul_3 li .R{ flex:1}
.courseBox ul.ul_3 li .R .tit{ font-size:14px; padding-top:5px;}
.courseBox ul.ul_3 li .R .sub{ color:#bbb;}
.courseBox ul.ul_3 li .R .xx{ overflow:hidden; height:30px; line-height:30px;}
.courseBox ul.ul_3 li .R .xx span{ display:block; float:left; width:70%; height:10px; margin-top:10px; background:#E9ECF6;border-radius:10px;}
.courseBox ul.ul_3 li .R .xx p{ float:right; font-size:12px;}


.subscribebox{ padding:0 15px; overflow:hidden}
.subscribebox .item{ overflow:hidden;height:60px; display:flex; padding:10px 0; border-bottom:1px solid #eee}
.subscribebox .item .L{ float:left; width:60px; height:60px;}
.subscribebox .item .L img{ display:block; width:60px; height:60px; border-radius:100%}
.subscribebox .item .C{ flex:1; padding:0 10px;}
.subscribebox .item .C p{ letter-spacing:1px; font-size:14px; padding-top:5px; color:#000}
.subscribebox .item .C span{ color:#666; font-size:12px; letter-spacing:1px;}
.subscribebox .item .R{ float:right;height:60px; line-height:60px; font-size:12px;color:#666;}


.myHeader{ width:100%;max-width:512px; background:url(../images/mybg.jpg) no-repeat; background-size:100% 100%}
.myHeader .my_1{ display:flex; padding:40px 0 30px; width:100%; height:76px; line-height:76px; color:#fff;}
.myHeader .my_1 .tx{ float:left; display:block; margin-right:10px; width:70px; height:70px; border:3px solid #fff; border-radius:100%; margin-left:20px;}
.myHeader .my_1 span{
	flex: 1;
	display: block;
	font-size: 1.1rem;
	letter-spacing: 1px;
	font-weight: bold;
	color: #FFF;
}
.myHeader .my_1 .more{ display:block; float:right; margin-right:20px; height:24px; margin-top:26px}
.myHeader .my_2{ padding:0 35px 20px; overflow:hidden}
.myHeader .my_2 a{ border:1px solid #fff; border-radius:25px; height:36px; line-height:36px; text-align:center; color:#fff; letter-spacing:1px; font-size:14px; display:block; width:40%}
.myHeader .my_2 a.L{ float:left;}
.myHeader .my_2 a.R{ float:right;}






.mybox_1{overflow:hidden; padding:13px 15px 0}
.mybox_1 .box{ display:flex;box-shadow: #eee 0px 0px 10px 2px;border-radius: 10px;margin-bottom: 10px; padding:10px 0; overflow:hidden}
.mybox_1 .box .L{ float:left; width:50px; margin-right:10px; margin-left:10px}
.mybox_1 .box .L img{ display:block; width:50px; height:50px;}
.mybox_1 .box .C{ flex:1}
.mybox_1 .box .C p{ color:#000; letter-spacing:1px; font-size:15px}
.mybox_1 .box .C span{ letter-spacing:1px; font-size:12px; color:#666; display:block}
.mybox_1 .box .R{ float:right; padding-right:15px}
.mybox_1 .box .R a{ display:block; border:1px solid #3F81F1; color:#3F81F1; width:65px; height:26px; line-height:26px; text-align:center; letter-spacing:1px; border-radius:5px; margin-top:11px}


.mybox_2{overflow:hidden; padding:10px 15px}
.mybox_2 ul{ box-shadow: #eee 0px 0px 10px 2px;border-radius: 10px;margin-bottom: 10px; padding:10px 0; overflow:hidden}
.mybox_2 ul li{ width:49%; float:left}
.mybox_2 ul li p{
	text-align: center;
	color: #333;
	font-size: 1.3rem;
	letter-spacing: 1px;
	font-weight: bold;
}
.mybox_2 ul li span{
	text-align: center;
	color: #990;
	display: block;
	font-size: 1.1rem;
	letter-spacing: 1px;
	font-weight: bold;
}


.mybox_3{overflow:hidden; padding:10px 15px}
.mybox_3 ul{box-shadow: #eee 0px 0px 10px 2px;border-radius: 10px;margin-bottom: 10px; padding:10px 0; overflow:hidden}
.mybox_3 ul li{ float:left; width:33%; padding:15px 0}
.mybox_3 ul li img{ display:block; width:60px; margin:0 auto}
.mybox_3 ul li p{
	text-align: center;
	letter-spacing: 1px;
	line-height: 30px;
	font-size: 1.1rem;
	font-weight: bold;
	color: #333;
}

.mybox_4{
	overflow: hidden;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
.mybox_4 ul{margin-bottom: 3px; padding:3px 0; overflow:hidden}
.mybox_4 ul li{
	width: 32.3%;
	float: left;
	background-color: #E7E7E7;
	margin: 2px;
	height: 30px;
	line-height: 30px;
	border-radius:.8rem;
}
.mybox_4 ul li span a{
	text-align: center;
	color: #333;
	display: block;
	font-size: 13px;
	letter-spacing: 1px;
}

.mybox_5{
	overflow: hidden;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
.mybox_5 ul{margin-bottom: 3px; padding:3px 0; overflow:hidden}
.mybox_5 ul li{
	width: 23.5%;
	float: left;
	background-color: #E7E7E7;
	margin: 2px;
	height: 30px;
	line-height: 30px;
	border-radius:.8rem;
}
.mybox_5 ul li span a{
	text-align: center;
	color: #333;
	display: block;
	font-size: 13px;
	letter-spacing: 1px;
}
.feedbackBox{ overflow:hidden; padding:5px 15px 0}
.feedbackBox .titbox{ font-size:14px; letter-spacing:1px; height:35px; line-height:35px; padding-left:10px}
.feedbackBox .sub{ padding:10px; overflow:hidden; background:#fff; border-radius:5px; height:150px;}
.feedbackBox .sub textarea{ width:100%; height:150px; border:0; outline:none;}
.feedbackBox .btn{ overflow:hidden; padding-top:40px}
.feedbackBox .btn a{ background:#3F82ED; color:#fff; display:block; height:40px; line-height:40px; letter-spacing:1px; font-size:14px; border-radius:5px; text-align:center;} 


.chartsBox{ overflow:hidden}
.chartsBox .charts_1{ width:170px; margin:0 auto; padding:30px 0; height:50px; line-height:50px; overflow:hidden}
.chartsBox .charts_1 .L{ float:left;color:#666; letter-spacing:1px;}
.chartsBox .charts_1 .L span{ color:#4486FF; font-weight:bold; padding:0 3px; font-size:16px;}
.chartsBox .charts_1 .R{ float:left; color:#666; letter-spacing:1px;}
.chartsBox .charts_1 img{ float:left; display:block; width:50px; height:50px; border-radius:100%; margin:0 5px}
.chartsBox ul{ border-top:1px solid #eee;padding:0 15px; }
.chartsBox ul li{ border-bottom:1px solid #eee; height:50px; line-height:50px; overflow:hidden}
.chartsBox ul li .num{ width:42px; float:left; text-align:center; font-size:14px}
.chartsBox ul li .num img{ display:block; height:34px; margin:8px auto;}
.chartsBox ul li .num p{ text-align:center; font-size:14px}
.chartsBox ul li .tx{ float:left; width:50px}
.chartsBox ul li .tx img{ display:block; width:34px;border-radius:100%; margin:8px auto}
.chartsBox ul li .tit{ float:left; padding-left:5px}
.chartsBox ul li .R{ float:right; color:#666;}
.chartsBox ul li .R span{ font-size:16px; color:#F83B32; padding-right:3px}


.helpBox{ padding:18px 15px; overflow:hidden}
.helpBox ul{ overflow:hidden}
.helpBox ul li{ height:46px; line-height:46px; background:#fff; margin-bottom:10px}
.helpBox ul li .icon{ float:left; display:block; height:30px; margin:8px}
.helpBox ul li p{ float:left}
.helpBox ul li .go{ display:block; float:right; height:18px; margin-top:14px; margin-right:10px}



.setBox{  overflow:hidden}
.setBox ul{overflow:hidden; background:#fff; padding:10px}
.setBox ul li{height:46px; line-height:46px;border-bottom:1px solid #eee; font-size:14px;}
.setBox ul li:last-child{ border:0}
.setBox ul li p{ float:left;}
.setBox ul li span{ float:right; display:block;}
.setBox ul li span.blue{ color:#3F82ED}
.setBox ul li img{ display:block; float:right;height:18px; margin-top:14px;}
.setBox .btn{ overflow:hidden; height:45px; background:#fff; margin-top:25px}
.setBox .btn a{ display:block; text-align:center;line-height:45px; height:45px;font-size:14px; letter-spacing:1px; color:#3F82ED}


.meansBox{ overflow:hidden}
.meansBox ul.ul_1{ background:#fff; overflow:hidden; padding:10px 0 3px; margin-bottom:10px}
.meansBox ul.ul_1 li{ float:left; text-align:center; width:33.3%}
.meansBox ul.ul_1 li img{ display:block; margin:0 auto; width:50px;}
.meansBox ul.ul_1 li p{ text-align:center; height:30px; line-height:30px; color:#666; letter-spacing:1px;}
.meansBox ul.ul_2{ overflow:hidden;}
.meansBox ul.ul_2 li{ margin-bottom:2px; padding:5px; background:#fff; padding-right:10px; overflow:hidden}
.meansBox ul.ul_2 li .L{ float:left;width:110px; height:80px; margin-right:10px}
.meansBox ul.ul_2 li .L img{ display:block; width:110px; height:80px;}
.meansBox ul.ul_2 li .R{ flex:1;}
.meansBox ul.ul_2 li .R .tit{ font-size:14px; letter-spacing:1px; line-height:1.5; color:#333;}
.meansBox ul.ul_2 li .R .sub{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical; line-height:1.5; color:#666; letter-spacing:1px;}
.meansBox ul.ul_2 li .R .date{ color:#666; font-size:12px; float:right}
.meansBox ul.ul_2 li .R .date span{ display:inline-block; background:#EC482D; color:#fff; border-radius:5px;height: 16px; width:40px; margin-left:5px;line-height: 16px;text-align: center;}
        /* 重置样式 */
        
        /* 页面加载前显示的遮罩层 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .loading-overlay.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        /* 加载动画容器 */
        .loader-container {
            text-align: center;
        }
        
        .loader-title {
            font-size: 18px;
            color: #333;
            margin-bottom: 20px;
            font-family: 'Arial', sans-serif;
        }
        
        /* 旋转渐变加载动画 */
        .gradient-loader {
            width: 60px;
            height: 60px;
            border: 6px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: #3498db;
            animation: spin 1s ease-in-out infinite, colorChange 3s ease-in-out infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        @keyframes colorChange {
            0% { border-top-color: #3498db; }
            25% { border-top-color: #e74c3c; }
            50% { border-top-color: #2ecc71; }
            75% { border-top-color: #f39c12; }
            100% { border-top-color: #3498db; }
        }