/*
@author: sunke
*/
body,input,textarea,button{font:14px/1.5 "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1,\9ED1\4F53","PingFang SC","Heiti SC",tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;}
body{margin:0 auto;color:#333;min-width:1530px;background:#F8F8F8;}
p,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,button,textarea,iframe{margin:0;padding:0;}
img{border:0 none;vertical-align:top;}
ul,li,ol{list-style-type:none;}
i,em,address,caption,cite,code,dfn,th,var{font-style: normal;}
a{text-decoration:none;color:#333;}
a:hover{ color:#A77D44; text-decoration:none;}
input,button,textarea,a,a:hover{outline:none;}
textarea{resize:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}
.fl{float:left; _display:inline;}
.fr{float:right; _display:inline;}
.pr{position:relative;}
.abs{position:absolute;}
.layout{width:1530px;margin:0 auto;}
.main-layout{width:1220px;margin:0 auto;}
.header-wrap{ background:#fff;}

/**/
.courseList-mod{}
.courseList-mod .top-ad{ margin:46px 0 0;}
.courseList-mod .top-ad img{ width:100%;}
.courseList-mod .tab-tit{ padding:60px 0 0;}
.courseList-mod .tab-tit .region-tit{ padding:0 10px 15px 10px; border-bottom:1px solid #DEDEDE;}
.courseList-mod .tab-tit .region-tit .btn{ display:block; float:left; line-height:28px; font-size:20px; margin-right:32px;}
.courseList-mod .tab-tit .region-tit .btn.on{ font-weight:bold; color:#A77D44; position:relative;}
.courseList-mod .tab-tit .region-tit .btn.on:before{ content:""; width:4px; height:4px; border:2px solid #A77D44; border-radius:50%; position:absolute; left:50%; transform: translate(-50%,0); -webkit-transform:translate(-50%,0);  bottom:-12px;}
.courseList-mod .tab-tit .screen-tit{ padding:33px 0 0;}
.courseList-mod .tab-tit .screen-tit .box{ padding-bottom:27px;}
.courseList-mod .tab-tit .screen-tit .tit{ float:left; line-height:22px; padding:0 0 0 19px; width:65px; font-size:16px; font-weight:bold;}
.courseList-mod .tab-tit .screen-tit .con{ margin-left:85px;}
.courseList-mod .tab-tit .screen-tit .con .btn{ display:block; float:left; line-height:22px; font-size:16px; margin-right:50px;}
.courseList-mod .tab-tit .screen-tit .con .btn.on{ font-weight:bold; color:#A77D44;}
.courseList-mod .list{ width:1565px;}
.courseList-mod .list .box{ float:left; width:357px; background:#fff; border-radius:10px; border:2px solid #F5F5F5; margin:0 30px 30px 0;}
.courseList-mod .list .box .top-con{ height:199px; padding:23px 30px 0;}
.courseList-mod .list .box .top-con h3{ height:28px; line-height:28px; font-size:20px; font-weight:normal; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.courseList-mod .list .box .top-con h3 .offline-tags{ display:inline-block; line-height:22px; margin-right:7px; vertical-align:1px; border:1px solid #E4213A; border-radius:2px; font-size:16px; color:#E4213A; padding:0 5px;}
.courseList-mod .list .box .top-con .time{ line-height:22px; font-size:16px; color:#777; padding-top:6px;}
.courseList-mod .list .box .top-con .tags{ padding:10px 0 0;}
.courseList-mod .list .box .top-con .tags span{ display:inline-block; margin:0 8px 9px 0; font-size:12px; color:#9D5923; background:#f7f1ec; border-radius:2px; padding:0 4px;}
.courseList-mod .list .box .top-con .tags span.listening-tips{ padding-left:15px; position:relative; color:#fff; background:linear-gradient( 270deg, #DFB471 0%, #EAC88F 100%); background:-webkit-linear-gradient( 270deg, #DFB471 0%, #EAC88F 100%);}
.courseList-mod .list .box .top-con .tags span.listening-tips:before{ content:""; width:8px; height:9px; position:absolute; left:5px; top:5px; background:url("/images/index2024/courseRecommendation-ico01.png") no-repeat;}
.courseList-mod .list .box .top-con .teacher{ padding:20px 0 0;}
.courseList-mod .list .box .top-con .teacher .btn{ display:block; float:left; width:44px; margin-right:23px; text-align:center;}
.courseList-mod .list .box .top-con .teacher .btn img{ display:block; width:44px; height:44px;}
.courseList-mod .list .box .top-con .teacher .btn p{ line-height:18px; font-size:12px; color:#777; padding-top:8px;}
.courseList-mod .list .box .bottom-con{ height:58px; line-height:58px; border-top:1px solid #F2F2F2; padding:0 25px 0 30px;}
.courseList-mod .list .box .bottom-con .nums{ float:left; color:#777;}
.courseList-mod .list .box .bottom-con .pirze{ float:right; color:#E6213A;}
.courseList-mod .list .box .bottom-con .pirze i{ font-size:10px;}
.courseList-mod .list .box .bottom-con .pirze strong{ font-size:20px;}

/**/
.paging-con{ text-align:center; font-size:0; padding:12px 0 0;}
.paging-con .btn{ display:inline-block; color:#999; line-height:26px; font-size:14px; margin:0 6px; padding:0 10px;}
.paging-con .btn.on{ background:#EAC58A; border-radius:50%; color:#333;}

/**/
.crumbs-mod{ line-height:47px; margin:35px 0 0; font-size:12px; color:#999; padding-left:17px; background:url("/images/template/newsList2024/ico01.png") no-repeat left center;}
.crumbs-mod a{ color:#999;}

/**/
.course-mod{}
.course-mod .top-con{ background:#fff; border-radius:10px; padding:36px 30px;}
.course-mod .top-con .pic{ width:490px;}
.course-mod .top-con .con{ width:630px;}
.course-mod .top-con .con h2{ line-height:38px; font-size:24px; font-weight:normal;}
.course-mod .top-con .con .tags{}
.course-mod .top-con .con .tags span{ display:block; float:left; line-height:18px; font-size:12px; color:#A77D44; margin:0 8px 6px 0; background:#FFF9EF; border-radius:2px;}
.course-mod .top-con .con .time{ padding:4px 0 0; line-height:20px; color:#999;}
.course-mod .top-con .con .time span{ display:inline-block; line-height:18px; font-size:12px; color:#E4213A; padding:0 5px; border-radius:2px; border:1px solid #E4213A; margin-right:10px;}
.course-mod .top-con .con .prize-con{ height:66px; background:#F8F8F8; margin:10px 0 0;}
.course-mod .top-con .con .prize-con .prize{ line-height:66px; padding-left:20px; font-size:16px; font-weight:bold; color:#E4213A;}
.course-mod .top-con .con .prize-con .prize strong{ font-size:30px;}
.course-mod .top-con .con .prize-con .nums{ line-height:66px; padding-right:35px;}
.course-mod .top-con .con .choice-con{ padding:14px 0 0;}
.course-mod .top-con .con .choice-con .btn{ float:left; line-height:28px; border:1px solid #DCDCDC; border-radius:2px; margin-right:8px; padding:0 20px;}
.course-mod .top-con .con .choice-con .btn.on{ background:#FFF8EE; color:#A77D44; border-color:#A77D44;}
.course-mod .top-con .con .buy-con{ padding:22px 0 0;}
.course-mod .top-con .con .buy-con .buy-btn{ display:block; float:left; height:44px; line-height:44px; padding:0 42px; background:#E4233A; border-radius:2px; font-size:18px; color:#fff;}
.course-mod .top-con .con .buy-con .service-btn{ display:block; float:left; line-height:44px; margin-left:30px; padding-left:26px; font-size:18px; background:url("/images/template/course2024/ico02.png") no-repeat left center;}
.course-mod .main-con{ margin-top:32px;}
.course-mod .main-con .left-con{ width:800px; background:#fff; border-radius:10px;}
.course-mod .main-con .left-con .tab-tit{ padding:22px 0 18px 52px;box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.04);}
.course-mod .main-con .left-con .tab-tit .btn{ display:block; float:left; line-height:25px; margin-left:30px;}
.course-mod .main-con .left-con .tab-tit .btn.on{ color:#A77D44; position:relative; font-weight:bold;}
.course-mod .main-con .left-con .tab-tit .btn.on:before{ content:""; width:16px; height:2px; background:#A77D44; border-radius:1px; position:absolute; left:50%; transform: translate(-50%,0); -webkit-transform:translate(-50%,0);  bottom:-20px;}
.course-mod .main-con .left-con .con{ padding:32px;}
.course-mod .main-con .left-con .con img{ max-width:100%;}
.course-mod .right-con{ width:370px;}
.course-mod .right-con .title{ padding:22px 0 20px;}
.course-mod .right-con .title h3{ float:left; line-height:25px; font-size:18px; padding-left:28px;}
.course-mod .right-con .title h3.ico01{ background:url("/images/template/newsList2024/title-ico01.jpg") no-repeat left center;}

/**/
.recommendCourse-mod{}
.recommendCourse-mod .box{ background:#fff; border-radius:10px; margin-bottom:34px;}
.recommendCourse-mod .box .top-con{ padding:25px 20px 0;}
.recommendCourse-mod .box h4{ line-height:25px; font-size:18px; font-weight:normal;}
.recommendCourse-mod .box .time{ line-height:18px; font-size:12px; color:#666; padding-top:6px;}
.recommendCourse-mod .box .tags{ padding:8px 0 0;}
.recommendCourse-mod .box .tags span{ display:block; float:left; line-height:18px; font-size:12px; color:#A77D44; margin:0 8px 6px 0; background:#FFF9EF; border-radius:2px;}
.recommendCourse-mod .box .teacher{ padding:20px 0;}
.recommendCourse-mod .box .teacher .btn{ display:block; float:left; width:44px; margin-right:23px; text-align:center;}
.recommendCourse-mod .box .teacher .btn img{ display:block; width:44px; height:44px;}
.recommendCourse-mod .box .teacher .btn p{ line-height:18px; font-size:12px; color:#777; padding-top:8px;}
.recommendCourse-mod .box .bottom-con{ height:58px; line-height:58px; border-top:1px solid #F2F2F2; padding:0 25px 0 30px;}
.recommendCourse-mod .box .bottom-con .nums{ float:left; color:#777; font-size:12px;}
.recommendCourse-mod .box .bottom-con .pirze{ float:right; color:#E6213A; text-align:right;}
.recommendCourse-mod .box .bottom-con .pirze i{ font-size:10px;}
.recommendCourse-mod .box .bottom-con .pirze strong{ font-size:20px;}
.recommendCourse-mod .box .bottom-con .pirze p{ line-height:20px; padding-top:10px;}
.recommendCourse-mod .box .bottom-con .pirze del{ line-height:16px; font-size:11px; color:#C5C5C5;}

@media screen and (max-width: 1530px) {
    body{ min-width:1200px;}
    .layout{ width:1200px;}
    
    .courseList-mod .tab-tit .region-tit .btn{ font-size:18px; margin-right:22px;}
    .courseList-mod .tab-tit .screen-tit{ padding-top:16px;}
    .courseList-mod .tab-tit .screen-tit .con .btn{ margin-right:25px;}
    .courseList-mod .tab-tit .screen-tit .box{ padding-bottom:13px;}
    .courseList-mod .list{ width:1200px;}
    .courseList-mod .list .box{ width:275px; margin:0 15px 15px 0}
    .courseList-mod .list .box .top-con{ height:186px; padding:11px 15px 0;}
    .courseList-mod .list .box .top-con h3 .offline-tags{ line-height:18px; font-size:14px;}
    .courseList-mod .list .box .top-con h3{ font-size:18px;}
    .courseList-mod .list .box .top-con .time{ font-size:14px;}
    .courseList-mod .list .box .top-con .tags{ padding-top:6px;}
    .courseList-mod .list .box .top-con .teacher{ padding-top:12px;}
}