@charset "utf-8";
/* CSS Document */
.banner{ width: 100%; height: auto; overflow: hidden; position: relative;}
.banner .swiper-container{ width: 100%; height: 0; padding-bottom: 34.8%; }
.swiper-banner .swiper-slide img{ width: 100%; }
.swiper-banner .pagination{ position: absolute; background: rgba(0,0,0,.3); border-radius: 20px; text-align: center; padding: 4px 16px; overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%);  bottom: 10px; z-index: 1; }
.swiper-banner .swiper-pagination-switch{ display: inline-block; float: left; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.4); opacity: .4; margin: 4px 5px; cursor: pointer;  }
.swiper-banner .swiper-active-switch{width: 30px; height: 12px; border-radius: 6px; background: rgba(255,255,255,.8); opacity: .8;}

.course-type{ padding: 34px 0 30px; }
.course-type .wrap{ overflow:hidden;}
.course-type ul li{ display: inline-block; width: 272px; float: left; margin-right: 16px; border-radius: 10px; overflow: hidden; font-size: 24px; font-weight: 500; text-align: center; background-repeat: no-repeat; background-position: center; background-size: cover; }
.course-type ul li:last-child{ margin-right: 0; }
.course-type ul li a{ display: block; line-height: 96px; color: #fff;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-type ul .icon1{ background-image: url(../images/type_01.jpg); }
.course-type ul .icon2{ background-image: url(../images/type_02.jpg); }
.course-type ul .icon3{ background-image: url(../images/type_03.jpg); }
.course-type ul .icon4{ background-image: url(../images/type_04.jpg); }
.course-type ul .icon5{ background-image: url(../images/type_05.jpg); }

.online{ width: 100%; height: 750px; background: url(../images/online_bg01.jpg) no-repeat center; }
.online .wrap{ padding-top: 75px; position: relative; }
.online-left{ position: relative; margin-right: 350px; height: 600px; overflow:hidden; }
.online-img{width: 100%; height: 100%; border-radius: 8px; overflow: hidden;}
.online-img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.online-left:after{content: ""; position: absolute; left: 0; top:0; width: 100%; height: 100%; border-radius: 8px; background: rgba(0,0,0,.6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C8000000,endColorstr=#C8000000);}
.online-des{ position: absolute; z-index: 2; top:50%; width: 100%; height: 164px; margin-top: -82px; text-align: center; color: #f6f6f6; }
.online-des h3{ font-size: 24px; font-weight: normal;margin-bottom: 15px; }
.online-des-box{ font-size: 16px; margin-bottom: 45px;}
.online-des-text{ display: inline-block; }
.online-des-live{ padding-left: 26px; background: url(../images/live.gif) no-repeat left center;}
.online-des-text span{ margin: 0 10px; }
.join-class{ font-size: 16px; display: inline-block; width: 120px; height: 40px; line-height: 40px; text-align: center; background: #04a7ec; color: #fff; border-radius: 20px; box-shadow:0px 10px 16px 0px rgba(4,167,236,.2); }
.join-default{ background: #e6e6e6; color: #666; cursor: default; }
.online-list{ position: absolute; right: 0; top:75px; width: 340px; height: 600px; overflow: hidden; border-radius: 8px; background:rgba(0,0,0,0.45); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); color:rgba(255,255,255,0.65); }
.online-list-scorll{  width: 360px; height: 600px; overflow-y: scroll; }
.online-list h3{ width: 340px; padding-left: 25px; background: rgba(0,0,0,.85); color:rgba(255,255,255,0.85); }
.online-date{ position: relative; display: block; line-height: 60px; padding-left: 25px; border-left: 1px dashed rgba(255,255,255,0.85); }
.online-date:after{ content: ""; position: absolute; left: -5px; top:27px; display: block; width: 8px; height: 8px; border: 1px solid #fff; border-radius: 50%; background:#020911;}
.today{ border-left: none; }
.today:after{ content: ""; display: none; }
.online-list ul{ width: 340px; }
.online-list ul li{ position: relative; height: 60px; padding-left: 25px; cursor: pointer; }
.online-time{ position: relative; display: inline-block; width: 88px; line-height: 60px; float: left; border-left: 1px dashed rgba(255,255,255,0.85); text-align: center; font-size: 16px; }
.online-time .circle{ content: ""; position: absolute; left: -5px; top:27px; display: block; width: 10px; height: 10px; border-radius: 50%; background:#a8b1bb; }
.online-name{padding-top: 10px; line-height: 60px; margin-left: 88px; padding-left: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-open{ background: url(../images/icon_public.png) no-repeat left center; }
.course-vip{ height: 100%; background: url(../images/icon_vip.png) no-repeat left center; }
.online-list ul li.active,.online-list ul li:hover{ background: #04a7ec; color: #fff; }
.online-list ul li.active .course-des,.online-list ul li:hover .course-des{ color:#fff; }
.online-list ul li.active .online-time .circle,.online-list ul li:hover .online-time .circle{ background: #fff; }
.no-live-box:after{ background: none; filter: none; }
.no-live-box .nolive-img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.online-list .no-live{ line-height: 600px; text-align: center; font-size: 16px; }

.course-item{ padding: 50px 0; }
.excellent-course .wrap{ padding-bottom: 80px; border-bottom: 1px solid #eaeaea;}
.course-item-tit{ padding-bottom: 20px; }
.course-item-tit h3{ font-size: 30px; text-transform: uppercase; font-weight: normal; text-align: center; }
.course-item-tit .title{ font-size: 18px; text-align: center; }
.course-item-tit .title-des{ font-size: 16px; color: #acacac; text-align: center; padding: 10px 0 15px; }
.course-hd{ text-align: center; margin-bottom: 35px; }
.course-hd li{ display: inline-block; margin: 0 25px; }
.course-hd li a{ display: block; padding: 6px 12px; }
.course-hd li.active a{ background: #04a7ec; color: #fff; }
.course-item .more{ font-size: 18px; }
.course-item .more:hover{ color: #04a7ec; }

.teacher-box{ padding-bottom: 130px; }
.teacher-slide{ position:relative;}
.teacher-slide .swiper-teacher{ height: 400px; }
.swiper-teacher .swiper-slide{ position: relative;display: inline-block; width: 272px !important; height: 400px; float: left; margin: 0 6.4px; }
.teacher-slide .teacher-img,.teacher-slide .teacher-img img{ width: 100%; height: 100%; }
.teacher-slide .prev,.teacher-slide .next{ position: absolute; z-index: 2; top:50%; margin-top: -30px; display: block; width: 60px; height: 60px; border-radius: 50%; overflow:hidden; cursor:pointer;}
.teacher-slide .prev{ left: -20px; background: rgba(0,0,0,.26) url(../images/icon_l.png) no-repeat 20px center; }
.teacher-slide .next{ right:-20px; background: rgba(0,0,0,.26) url(../images/icon_r.png) no-repeat 25px center; }
.teacher-des{ position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px 0; border-radius: 0 0 10px 10px; background: rgba(0,0,0,.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); color: #fff; text-align: center;}
.teacher-des h4{ font-size: 18px; font-weight: normal; }
.teacher-des-text{ height: 0; display: block; display: -webkit-box;overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3;-webkit-box-orient: vertical; transition: height .3s; }
.swiper-teacher .swiper-slide:hover .teacher-des-text{ height: 73px; padding: 5px 10px; }

.study-box{ width: 100%; height: 264px; background: red url(../images/study_bg.jpg) no-repeat center; }
.study-box .wrap{ padding: 0 50px; }
.study-text{ float: left; padding-top: 75px; color: #fff; }
.study-text p{ line-height: 20px;}
.study-text h3{ line-height: 42px; font-size: 26px; font-weight: normal; letter-spacing: 1px; }
.study-download{ float: right; padding-top: 90px; }
.study-item{ float: left; margin-right: 30px; border-radius: 25px; }
.study-item span{ display: inline-block; width: 180px; height: 50px; padding-left: 30px; line-height: 50px; text-align: center; color: #fff; cursor: pointer; }
.study-download .iphone{ position: relative; background: #333 url(../images/icon_iphone.png) no-repeat 25px center; }
.study-download .android{ position: relative; margin-right: 0; background: #333 url(../images/icon_android.png) no-repeat 25px center; }
.down-box{ display: none; position: absolute; top:50px; left: 15px; width: 150px; height: 140px; text-align: center; background: #fff; box-shadow: 0 0px 15px 0px rgba(0,0,0,.3); }
.iphone-img img,.android-img img,.app-img img{ width: 115px; padding-top: 12.5px; }
.study-download .iphone:hover{ background: #04a7ec url(../images/icon_iphone.png) no-repeat 25px center; transition: all .3s;}
.study-download .android:hover{ background: #04a7ec url(../images/icon_android.png) no-repeat 25px center; transition: all .3s; }
.phone{ float: left; position: relative; width: 28px; height: 50px; background: url(../images/icon_app.png) no-repeat center; cursor: pointer; }
.app-img{ left: -61px; }

.pop-box{ position: fixed; z-index: 9; right: 0; top:50%; width: 60px; }
.pop-box ul li{ display: block; }
.pop-box ul li a{ display: block; width: 100%; height: 80px; }
.pop-box ul li .qq{ background: #04a7ec url(../images/icon_qq.png) no-repeat center; border-radius: 2px 2px 0 0; }
.pop-box ul li .return-top{ border: 1px solid #acacac; border-top: none; background: #fff url(../images/top.png) no-repeat center; border-radius: 0 0 2px 2px; }

/*2019.6.25新增*/
.news-tip{ height: 62px; padding: 15px 0; background: #f4fcff; }
.news-tit{ float: left; line-height: 32px; padding-left: 35px; background: url(../images/icon_news.png) no-repeat left center; font-size: 16px; font-weight: bold; letter-spacing: 2px; color: #04a7ec; }
.news-scroll{ margin-left: 140px; height: 32px; overflow: hidden; }
.news-scroll li{ position: relative; padding-left: 15px; height: 32px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-scroll li:before{ position: absolute; content: ''; display: block; left: 0; top:50%; margin-top: -2px; width: 4px ; height: 4px; border-radius: 50%; background: #04a7ec; }
.news-scroll li a{ font-weight: 400; letter-spacing: 1px; }

.information{ background: #f4fcff; }
.info-new,.info-hot{ padding: 0 44px; border-radius: 20px; background: #fff; box-shadow:0px 3px 6px rgba(0,0,0,0.16); }
.info-new{ float: left; width: 68%; }
.info-title{ height: 100px; padding: 25px 0 14px; border-bottom: 1px solid #ececec; }
.info-hot{ float: right; width: 29%; } 
.info-title h4{ float: left; font-size: 18px; font-weight: normal; line-height: 60px; }
.info-title .tip{ float: left; margin-left: 15px; line-height: 60px; font-size: 12px; text-transform: uppercase; color:rgba(4,167,236,.4); }
.info-title .more{ float: right; font-size: 14px; line-height: 60px; }
.info-hot .info-title .tip{ color: rgba(254,81,73,.4); }
.info-item,.hot-list{ height: 400px; padding-top: 40px; }
.info-item{ position: relative; overflow: hidden; zoom:1; }
.info-item .hd{ float: right; width: 354px; margin-left: 18px; }
.info-item .hd li{ position: relative; padding-left: 30px; line-height: 35px; margin-bottom: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-item .hd li a{ font-size: 16px; }
.info-item .hd li:before{ position: absolute; content: ''; left: 0; top:50%; margin-top: -4px; display: block; width: 7px; height: 7px; border: 1px solid #acacac; border-radius: 4px; }
.info-item .hd li.on a,.info-item .hd li:hover a{ color: #04a7ec; }
.info-item .hd li.on:before{ border-color: #04a7ec; background: #04a7ec; }
.info-item .bd{ float: left; width: 508px; height: 313px; overflow: hidden; }
.info-item .bd .item-img{ position: relative; width: 508px; height: 313px; border-radius: 10px; overflow: hidden; }
.info-item .bd .item-img img{ max-width: 100%; }
.item-img-mask{ position: absolute; left: 0; bottom: 0; width: 100%; padding: 0 30px; height: 54px; line-height: 54px; background: rgba(0,0,0,.54); }
.item-img-mask .item-tit{ float: left; display: block; line-height: 54px; max-width: 340px; letter-spacing: 1px; color: #fff; }
.item-scan{ float: right; display: block; line-height: 54px; padding-left: 30px; background: url(../images/icon_scan.png) no-repeat left center; color: #acacac; }

@media screen and (max-width: 1500px) {
	.course-type ul li{ width: 18.8%; margin-right: 1.5%; }
	.course-type ul li a{ line-height: 80px; }
	.online{ height: 650px; }
	.online-left,.nolive-img{ height: 500px; }
	.online-list,.online-list-scorll{ height: 500px; }
	.online-list .no-live{ line-height: 500px; }
	.teacher-slide .swiper-teacher{ height: 332px; } 
	.swiper-teacher .swiper-slide{ width: 226px !important; height: 332px; margin: 0 5px; }
	.info-new, .info-hot{ padding: 0 20px; }
	.info-item .bd{ width: 380px; height: 312px; }
	.info-item .bd .item-img{ width: 380px; height: 312px; }
	.info-item .bd .item-img img{ width: 100%; height: 100%; object-fit: cover; }
	.hot-list-info .scan{ display: none; }
}
@media screen and (max-width: 1280px) {
	.course-type ul li{ font-size: 20px; }
	.course-type ul li a{ line-height: 66px; }
	.course-type{ padding: 24px 20px; }
	.online{ height: 530px; }
	.online .wrap{ padding-top:40px; }
	.online-left,.nolive-img{ height: 450px; }
	.online-list,.online-list-scorll{ height: 450px; top:40px;}
	.online-list .no-live{ line-height: 450px; }
	.course-item{ padding: 35px 0; }
	.teacher-box{ padding-bottom: 80px; }
	.excellent-course .wrap{ padding-bottom: 50px; }
	.teacher-slide .swiper-teacher{ height: 279px; }
	.swiper-teacher .swiper-slide{ width: 190px !important; height: 279px; margin: 0 5px; }
	.teacher-slide .prev, .teacher-slide .next{ width: 50px; height: 50px; }
	.teacher-slide .prev{ background-position: 16px center;}
	.teacher-slide .next{ background-position: 20px center; }
	.study-text h3{ font-size: 20px; }
	.study-download{ padding-right: 30px; }
	.info-item .bd{ width: 258px; height: 312px; }
	.info-item .bd .item-img{ width:258px; height: 312px; }
	.hot-list-info .scan{ display: none; }
}