/*-------------------------
     编辑：黄灿平
     此样式表主要用于
     在线教育主页样式
--------------------------*/
@charset "utf-8";
/* 四模块区（培训班/课程资源/模拟考核/讲师风采） */
.index-main{ padding:20px 0; background:#fff;}
.index-main h3.index-mk-h{ width:1180px; margin:20px auto 25px;}
.index-main .w1200{ width:1180px; margin:0 auto;}
.index-main .index-swiperJsfc{ margin:0 auto;}
/*-----swiper 3.2.4切换-----*/
.swiper-slide {
	/* 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;
}

/*-------------------------
          幻灯片广告图
--------------------------*/
.banner{ position:relative; width:100%; height:360px; overflow:hidden;}
.banner .banner-wrapper { width:100%; height:360px;}
/*左右翻页*/
.swiper-button-prev,.swiper-button-next{ width:15%; height:100%; top:0; background:none;}
.swiper-button-prev{ left:0;}	
.swiper-button-next{ right:0;}	
.swiper-button-prev span,.swiper-button-next span{
	display:block; position:absolute; left:20px; top:50%; width:64px; height:64px; margin-top:-32px; border-radius:100%; background: rgba(180,180,180,0.25) url(../img/index/banner/arrows.png) no-repeat center 17px;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
.swiper-button-next span{ left:auto; right:20px; background: rgba(180,180,180,0.25) url(../img/index/banner/arrows.png) no-repeat center -71px;}
.swiper-button-prev:hover span,.swiper-button-next:hover span{ opacity:.6;}
/*分页器*/
.banner .swiper-pagination{ top:auto; bottom:10px; background:none;}
.banner .swiper-pagination-bullet { display: inline-block; width:50px; height:10px; margin:0 3px; border-radius:0; cursor:pointer; background:none; opacity:1;}
.banner .swiper-pagination-bullet span { width:50px; height:3px; display:block; background:rgba(255,255,255,0.2);}
.banner .swiper-pagination-bullet-active span{ background:#fff}
.banner .autoplay .swiper-pagination-bullet-active span{ background: rgba(255,255,255,0.2);}
.banner .swiper-pagination-bullet i{ display:block; height:3px; background:#fff; transform:scaleX(0); transform-origin:0;}
.banner .autoplay .firsrCurrent i{ transition:transform 2.9s linear; transform:scaleX(1);}
.banner .autoplay .current i{ transition:transform 4s linear; transform:scaleX(1);}
.banner .autoplay .replace span{ background:#fff;}
/*内容样式*/
.slide1 { background-size: auto 100%; background:url(../img/index/banner/banner1.jpg) no-repeat 50% 10%;}
.slide2 { background-size:auto 100%; background:url(../img/index/banner/banner2.jpg) no-repeat center 50%;}

/*-------------------------
          课程模块
--------------------------*/
.index-mk{}
.index-mk:last-child{margin-bottom: 70px;}
h3.index-mk-h{ position:relative; margin:20px 0 25px 0; font-size:24px;}
h3.index-mk-h a{ position:absolute; right:0; bottom:0; font-size:14px; font-weight:normal; color:#999;}
h3.index-mk-h a:hover{ color:#108cee;}
/*课程内容模块*/
.video-mk{ display:block;float:left; width:280px; margin:0 20px 20px 0; box-shadow: 0 1px 6px 0 rgba(0,0,0,.08); transition: all .3s ease; cursor:pointer;}
.video-mk:nth-child(4n){ margin-right:0;}
#jskcPageContentDiv .video-mk{cursor: inherit;}
.video-mk:hover{
        -webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;
        transform:translateY(-6px);-webkit-transform:translateY(-6px);-moz-transform:translateY(-6px);box-shadow:0 26px 40px -24px rgba(0,36,100,.3);-webkit-box-shadow:0 26px 40px -24px rgba(0,36,100,.3);-moz-box-shadow:0 26px 40px -24px rgba(0,36,100,.3)
}
#jskcPageContentDiv .video-mk:hover{
	-webkit-transition:all .0s ease;-moz-transition:all .0s ease;-o-transition:all .0s ease;transition:all .0s ease;
	transform:translateY(0px);-webkit-transform:translateY(0px);-moz-transform:translateY(0px);box-shadow: 0 1px 6px 0 rgba(0,0,0,.08);-webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,.08);-moz-box-shadow: 0 1px 6px 0 rgba(0,0,0,.08)
}
.video-mk h4{ width:100%; line-height:30px; font-weight:normal; font-size:16px; color:#333; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.video-mk .p{ border-radius:2px;}
.video-mk .p img{ width:280px; height:160px; border-radius:4px 4px 0 0;}
.video-mk h4, .video-mk .t1, .video-mk .t2, .video-mk .t3{ padding:0 10px;}
.video-mk .t1{}
.video-mk .t1 span{ display:inline-block; font-size:12px; color:#737373;}
.video-mk .t1 .t1l{ float:left;}
.video-mk .t1 .t1r{ float:right;}
.video-mk .t2{ padding-top:10px; font-size:16px;}
.video-mk .t3{ position:relative; margin-top:10px; padding-top:10px; border-top:1px solid #f2f2f2;}
.video-mk .t3 .mk-user{ padding-bottom:10px;}
.video-mk .t3 .mk-user i, .video-mk .t3 .mk-user span{ display:inline-block; vertical-align:middle;}
.video-mk .t3 .mk-user i{ width:24px; height:24px; border-radius:50%; background:url(../img/global/20X20.png)center center #f5f8fa no-repeat;}
.video-mk .t3 .mk-user i img{ width:24px; height:24px; border-radius:50%;}
.video-mk .t3 .mk-user span{ font-size:14px; color:#333;}
.video-mk .t3 .mk-rq{ position:absolute; top:13px; right:10px; font-size:14px; color:#999;}
.video-mk .t3 .mk-rq::before{ padding-right:5px; color:#999;}
/*正在更新中*/
.video-mk .video-loading{ height:298px; background:url(../img/global/video-loading.png) center center #f5f8fa no-repeat;}

/*-------------------------
          讲师风采模块
--------------------------*/
.jiangshi-mk{ /*float:left;*/ width:226px; margin:0 12px 10px 0;}
.jiangshi-mk .p{ width:100%; height:270px; background:url(../img/global/mr-logo.png) center center #f5f8fa no-repeat;}
.jiangshi-mk .p img{ width:226px; height:270px;}
.jiangshi-mk .t{ text-align:center; line-height:40px;}
.jiangshi-mk .t .n1{ font-size:18px; color:#333;}
.jiangshi-mk .t .n2{ font-size:14px; color:#999;}
/*滚动*/
.index-swiperJsfc{ width:1180px; height:322px; overflow:hidden;}


/*-------------------------
          分类展示卡片
---------------------------*/
.index-category-show{ padding:30px 0 10px 0; background:#f2f6fc;}
.index-category-show .w1180{}
.category-card{ display:block; position:relative; float:left; width:280px; height:158px; margin:0 20px 20px 0; border-radius:4px; overflow:hidden; box-shadow:0 8px 35px rgba(0,0,0,.08); transition: all .3s ease; cursor:pointer; text-shadow:0 3px 3px rgba(27,144,96,.36);}
.category-card:nth-child(4n){ margin-right:0;}
.category-card .p{ width:100%; height:100%;}
.category-card .p img{ width:100%; height:100%; object-fit:cover; transition: all .3s ease;}
.category-card .t{ position:absolute; left:0; top:0; right:0; padding:20px 100px 20px 20px; box-sizing:border-box;}
.category-card .t .t1{ display:block; padding-bottom:20px; font-size:18px; font-weight:500; color:#fff;}
.category-card .t .t2{ display:block; color:#fff; font-size:16px; line-height:1.4;}
.category-card:hover{
	-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;
	transform:scale(1.05);-webkit-transform:scale(1.05);-moz-transform:scale(1.05);box-shadow:0 8px 35px rgba(0,0,0,.2);
}

/*-------------------------
          学员操作指南
--------------------------*/
.indexZn{ padding:0 0 30px 0; background:#f2f6fc;}
.indexZn .zn-t{ margin:0; padding:20px 0;}
.indexZn .zn-t img{ width:auto; height:29px; max-width:none; vertical-align:middle;}
.zn-box{ display:flex; display:-webkit-flex; justify-content:space-between; -webkit-justify-content:space-between; align-items:center; -webkit-align-items:center; width:100%; border-radius:4px; box-shadow:0 8px 35px rgba(0,0,0,.08); background:#fff; transition:all .3s ease;}
.zn-box:hover{ box-shadow:0 8px 35px rgba(0,0,0,.2);}
.zn-pic{ flex-shrink:0; padding:0 50px;}
.zn-pic img{ width:66px; height:66px; border:0; display:block;}
.zn-desc{ flex:1; -webkit-flex:1; margin:0; color:#666; font-size:18px;}
.zn-desc span{ position:relative; display:block; padding-bottom:20px; color:#333; font-size:22px; font-weight:700;}
.zn-desc span:before{ position:absolute; top:-35px; left:0; content:""; width:93px; height:2px; background-color:#199fff;}
.zn-box .zn-more{ padding:55px 40px; color:#fff; font-size:22px; font-weight:500; box-shadow:0 8px 35px rgba(0,0,0,.08); background:#199fff;}
/*学员操作指南-响应式*/
@media (max-width:1200px){
	.indexZn .w1180{ width:auto; padding:0 10px; box-sizing:border-box;}
}
@media (max-width:992px){
	.zn-box{ display:block; height:auto;}
	.zn-pic{ padding:20px 50px;}
	.zn-desc{ padding:35px 20px 20px;}
	.zn-box .zn-more{ display:block; text-align:center; padding:20px;}
}

/*-------------------------
          我们的优势
--------------------------*/
.Hicon{ width:1200px; margin:0 auto; padding:20px 0;}
.Hicon img{ width:auto; height:29px;}
.indexYs{ padding:20px 0 20px; background:#f2f6fc;}
.indexYs ul{ display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; width:1200px; margin:0 auto; padding:30px 20px; border-radius:4px; box-sizing:border-box; box-shadow:0 4px 30px rgb(0 80 179 / 3%); background:#fff;}
.indexYs ul li{ text-align:center;}
.indexYs ul li img{ width:42px; height:auto;}
.indexYs ul li h4{ padding:10px; font-size:18px; font-weight:700; color:#333;}
.indexYs ul li p{ font-size:14px; color:#999;}

/*-------------------------
          友情链接(首页)
--------------------------*/
.footerLink{ padding:30px 0 90px; background:#f2f6fc;}
.footerLink-box{ width:1200px; margin:0 auto; padding:25px 30px 30px; border-radius:4px; box-sizing:border-box; box-shadow:0 4px 30px rgb(0 80 179 / 3%); background:#fff;}
.footerLink h4{ position:relative; margin:0 0 15px; padding-left:14px; font-size:18px; font-weight:700; color:#333;}
.footerLink h4:before{ content:""; position:absolute; left:0; top:4px; width:4px; height:16px; border-radius:2px; background:#199fff;}
.footerLink h4 em{ margin-left:6px; font-style:normal; font-size:14px; font-weight:400; color:#999;}
.footerLink p{ margin:0;}
.footerLink p a{ display:inline-block; margin:0 12px 12px 0; padding:6px 18px; border:1px solid #e5eefb; border-radius:3px; font-size:14px; color:#666; line-height:20px; background:#f7faff; transition:all .3s ease;}
.footerLink p a:hover{ color:#199fff; border-color:#199fff; background:#ecf7ff;}

/*友情链接-响应式*/
@media (max-width:1200px){
	.footerLink-box{ width:auto; margin:0 10px;}
}