
[v-cloak]{display: none}

.loading{width:44px;height: 44px; background: url(../images/loading.gif) no-repeat; background-size: 100%; position: fixed;left:50%;top:50%;margin-left:-22px;margin-top:-22px; z-index: 99;}
.default-bg,
.default-avatar{ background-color:#e6e6e6 ; background-size: contain; position: relative; background-repeat: no-repeat; background-position: 50% 50%; z-index: 1; overflow: hidden;}
.default-bg{background-image:url(../images/common_nopicture_bg.png)}
.default-avatar{background-image:url(../images/noprofile.png)}
.default-avatar .images-bg,
.default-bg .images-bg{background-size:cover; background-position: 50% 50%; background-repeat: no-repeat; position: absolute;left:0;top:0;width: 100%;height: 100%;}
.mask-bg{width: 100%;height: 100%; position: fixed;left: 0;top:0; background: rgba(0,0,0,0.3); z-index: 101;}
.relative{position: relative;}
.link-trigger:hover{background: #f9f9f9}
.scroll-view{overflow-y: auto; -webkit-overflow-scrolling: touch}
.load-completed{ text-align: center; line-height: 40px; color:#929699; text-align: center; padding-bottom: 10px}
/*标题*/
.common-title{ height: 44px; padding: 0 10px; line-height: 44px; font-size: 16px;}
.common-title .more{float: right; font-size: 14px; color:#575c60; background: url(../images/icon-right.png) no-repeat 100% 50%; background-size:12px 12px; padding-right:16px;}

/*选项卡*/
.common-tab{ height: 49px; line-height: 44px;}
.common-tab li{width: 33.3%;float:left; position: relative;font-size: 16px;color:#929699; text-align: center}
.common-tab li.on{color:#273035}
.common-tab li.on::after{content: '';width: 30px; height: 3px; background: #ff663d; position: absolute;bottom:5px;left:50%;margin-left:-15px;border-radius: 10px;}

/*图标+文字*/
.common-icon-state{ height: 22px; line-height: 22px; overflow: hidden;margin-top:15px; }
.common-icon-state span{width: 33.3%; float:left; text-align: center; color:#929699}
.common-icon-state i{ display: inline-block;width:18px;height:18px;margin-right: 4px;background-size:100%;background-repeat: no-repeat; position: relative;top:4px;}
.common-icon-state .icon-zan{background-image: url(../images/common_btn_thumb.png)}
.common-icon-state .icon-evaluate{background-image: url(../images/common_btn_comments.png);top:6px;}
.common-icon-state .icon-browse{background-image: url(../images/common_btn_view.png);top:5px;}
.common-icon-state .icon-course{background-image: url(../images/class_icon_lesson.png)}
.common-icon-state .icon-student{background-image: url(../images/class_icon_student.png)}

.common-icon-state-mid{height: 24px; line-height: 24px; font-size: 14px;}
.common-icon-state-mid i{width: 20px; height: 20px;top:5px;}

/*===============/index/===============*/
.page-index{padding-top: 44px;}
.index-box{background: #fff;margin-top:10px; padding-bottom: 15px;}
/*头部*/
.header{ height: 44px; background: #fff;  position: fixed; width: 100%;left:0;top:0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); overflow: hidden; z-index: 100;}
.header .logo{ position: absolute;left:0;top:0;}
.header .logo img{height: 40px; position: relative;left:8px;top:2px;}
.header .search{ position: relative;top:6px;margin:0 10px 0 55px;}
.header .search .search-text{width:100%;height:32px; background: #f5f5f5 url(../images/common_icon_search.png) no-repeat 10px 50%;background-size:18px 18px;border-radius: 32px; border:0px; box-sizing: border-box;padding: 0 10px 0 32px; line-height: 32px; color:#929699;}

/*轮播图*/
.index-swiper{height:10.5rem; }
.index-swiper .swiper-slide{ background-size:cover; background-position: 50% 50%; background-repeat: no-repeat}
.index-swiper .swiper-pagination-bullet-active{background: #ff663d}
.index-swiper .swiper-pagination-bullet{width: 7px; height: 7px;}

.index-menu{background: #fff; padding-bottom:15px; color:#575c60;}
.index-menu li{width:25%;float:left; text-align: center; line-height: 16px;padding-top:15px;}
.index-menu li img{height: 36px;}



/*直播课程*/
.index-live .item-wrap{padding: 5px; min-height:110px;}
.index-live .item{margin:0 5px; border-radius: 8px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);padding: 10px 10px 10px 170px; position: relative; height: 90px; overflow: hidden; }
.index-live .default-bg{width:150px;height: 90px; position: absolute;left:10px;top:10px;border-radius: 4px; overflow: hidden;}
.index-live .name{font-size: 14px; height: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.index-live .state{color:#575c60}
.index-live .study-num{color:#929699}
.index-live .state{position: relative; padding-left:12px;}
.index-live .state::before{content: ''; position: absolute;left:0;top:50%;margin-top:-3px;width: 6px; height: 6px; background: #ff663d;border-radius: 50%;}
.index-live .price{ text-align: right;font-size: 14px; color:#ff663d}

/*拼团*/
.index-fight-group .item{border-radius: 8px; padding: 15px 15px 10px 175px; position: relative;  }
.index-fight-group .item:first-child{padding-top: 0px;}
.index-fight-group .item:first-child .default-bg{top:0}
.index-fight-group .default-bg{width:150px;height: 90px; position: absolute;left:15px;top:15px;border-radius: 4px; overflow: hidden;}
.index-fight-group .name{font-size: 16px; max-height: 40px; line-height: 20px; overflow: hidden; }
.index-fight-group .time{color:#929699;font-size: 14px;}
.index-fight-group .time span{ color: #ff663d;padding: 0 3px;}
.index-fight-group .price{ font-size: 16px; color:#ff663d;margin-top:5px; line-height: 20px;}
.index-fight-group em{ text-decoration: line-through; color:#929699; font-style: normal; font-size: 12px; display: block;}
.index-fight-group .btn{ position: absolute;right:15px;bottom:10px; background: #ff663d; color:#fff;width:86px;height:32px; text-align: center; line-height: 32px;border-radius: 32px; font-size: 14px; box-shadow: 0 1px 6px rgba(255, 102, 61, 0.5)}

/*课程、班级*/
.index-list{padding-right: 15px;}
.index-list .item{width: 50%;float:left; box-sizing: border-box;padding:15px 0 0 15px;}
.index-list .clearfix:first-child .item{padding-top: 0px;}
.index-list .default-bg{ border-radius: 4px; overflow: hidden;}
.index-list .name{font-size: 16px; max-height: 40px; line-height: 20px; overflow: hidden; margin-top:10px; }
.index-list .study-num,
.index-list .tname{color:#929699;margin-top:5px;}
.index-list .price{ font-size: 14px; color:#ff663d}


/*老师*/
.index-teacher .item-wrap{padding:5px;}
.index-teacher .item{margin:0 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-radius: 4px; overflow: hidden; text-align: center; padding-bottom: 10px;}
.index-teacher .tname{font-size: 16px; height: 26px; line-height: 26px; overflow: hidden;margin:10px 10px 0 10px; white-space: nowrap;  text-overflow: ellipsis}
.index-teacher .tlevel{height:22px; line-height: 22px; overflow: hidden; color:#929699;}
.index-teacher .mark-recommend{width:40px; height: 20px; background: #ff663d; line-height: 20px; color:#fff;border-radius: 0 0 10px 0; position: absolute;left:0;top:0; z-index: 2;}

/*热门话题*/
.index-club .item{margin:15px 10px 0 10px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);border-radius: 4px; overflow: hidden; }
.index-club .item:first-child{margin-top: 0px}
.index-club .topic{padding: 15px 10px;}
.index-club .topic-title{font-size:16px; line-height: 22px;}
.index-club .from-group{ height: 32px; line-height: 32px; padding: 10px 10px 10px 52px;font-size:14px;}
.index-club .from-group .default-bg{width:32px;height: 32px; position: absolute;left:10px;top:10px;border-radius: 50%; overflow: hidden;}


/*===============/find/===============*/
.find-header-wrap{ position: fixed; width: 100%;left:0;top:0; z-index: 102;}
.find-header-wrap-blank{height:88px; overflow: hidden;}
.find-header{ height: 44px; background: #fff; text-align: center}
.find-header .tab{position: relative;top:7px;height:30px; line-height: 30px;border:1px solid #ff663d; display: inline-block; box-sizing: border-box;overflow: hidden;border-radius: 4px; color:#575c60}
.find-header .tab li{float:left;padding: 0 20px; font-size: 14px;border-left:1px solid #ff663d;}
.find-header .tab li:first-child{border-left:0px;}
.find-header .tab .on{ background: #ff663d;color:#fff;}

.find-filter{ height: 44px; background: #fff; line-height: 44px;}
.find-filter li{width: 33.3%;float:left; text-align: center;font-size: 14px; color:#575c60; position: relative;}
.find-filter li::before{content: '';width:0px; overflow: hidden;height: 18px; position: absolute;left:0;top:50%;margin-top:-9px; border-left:1px solid #ccc; transform: scaleX(0.5)}
.find-filter .icon-filter{width: 14px;height: 14px; display: inline-block; background: url(../images/common_tab_filter_n.png) no-repeat; background-size:100%; position: relative; top:2px;left:4px; }
.find-filter .icon-arrow{ display: inline-block; width: 10px;height: 10px; background: url(../images/bottom.png) no-repeat; background-size: 100%;left:5px;top:1px; position: relative;}
.find-filter li.on .icon-arrow{ background:url(../images/up.png) no-repeat;background-size:100%;}
.find-filter li.on .icon-filter{background:url(../images/common_tab_filter_s.png) no-repeat;background-size:100%;}
.find-filter-sort{ position: absolute;left:0;top:0;width: 100%; background: #fff; max-height: 330px; overflow-y: auto}
.find-filter-sort li{height: 44px; line-height: 44px; padding: 0 15px;font-size: 14px; position: relative;}
.find-filter li.on,
.find-filter-sort .on{color: #ff663d}
.find-filter-sort .on::before{content:'';width:16px;height:16px;background: url(../images/yes.png) no-repeat; background-size: 100%; position: absolute;right:15px;top:50%;margin-top:-9px;}

.find-filter-category { background: #fff;}
.find-filter-category .category-grid{width: 33.3%;float:left;height:240px; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
.find-filter-category .category-grid li{font-size: 14px; text-align: center; line-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.find-filter-category .category-grid li.on{color:#ff663d}
.find-filter-category .category-grid:nth-child(1){background: #f5f5f5}
.find-filter-category .category-grid:nth-child(1) .on,
.find-filter-category .category-grid:nth-child(2){background: #fafafa}
.find-filter-category .category-grid:nth-child(2).on{background: #fff}

.find-filter-other{ background: #fff; padding:0 15px 15px 15px;}
.find-filter-other .name{ line-height: 34px;font-size: 14px;padding-top:10px;}
.find-filter-other .option-list span{ display: inline-block;padding: 3px 12px;font-size:14px;background: #f5f5f5;border-radius: 4px;margin:10px 10px 0 0;}
.find-filter-other .option-list span.on{background: #ff663d;color:#fff;}
.find-filter-other .button{width: 110px;height: 36px; border:1px solid #929699;color:#575c60; box-sizing: border-box;line-height:36px; text-align: center;border-radius: 4px; font-size: 14px; float:left; margin:15px 10px 0 0;}
.find-filter-other .main-button{ background: #ff663d; color:#fff;border:0px;}

.find-list ul{padding-bottom: 15px;background: #fff;}
.find-list li{ padding: 15px 10px 0 170px; position: relative; height: 90px; overflow: hidden; }
.find-list .default-bg{width:150px;height: 90px; position: absolute;left:10px;top:15px;border-radius: 4px; overflow: hidden;}
.find-list .name{font-size: 16px; max-height: 44px; line-height: 22px; overflow: hidden;}
.find-list .name span{padding:2px 5px;border-radius:2px;margin-right:5px;border:1px solid #ff663d;color:#ff663d;font-size: 12px;} 
.find-list .study-num{color:#929699;margin-top:5px;}
.find-list .price{ text-align: right;font-size: 14px; color:#ff663d}
.find-list .price span{ float: left;font-size: 12px;color:#929699}

.find-class-list li{background: #fff; padding: 10px;margin-top: 10px;}
.find-class-list li:first-child{margin-top:0px;}
.find-class-list li .default-bg{ border-radius: 4px; overflow: hidden;}
.find-class-list li .name{font-size: 16px; height: 26px; line-height: 26px; overflow: hidden; margin-top: 10px;}
.find-class-list li .price{ height: 34px; line-height: 34px; overflow: hidden; font-size: 14px; color:#575c60}
.find-class-list li .price span{ color:#ff663d; float: right; font-size: 18px}
.find-class-list .common-icon-state span{position: relative;}
.find-class-list .common-icon-state span::before{ content: ''; width: 0px;border-left:1px solid #ccc; height: 18px; position: absolute; left:0;top:50%;margin-top:-9px; transform: scaleX(0.5)}
.find-class-list .common-icon-state span:first-child::before{ display: none}



/*===============/community/===============*/
.community-hot{margin-top:0px;}
.community-hot .item-wrap{min-height: 100px;}
.community-hot .item{padding-left: 100px; height: 80px;}
.community-hot .item .name{font-size: 16px;}
.community-hot .default-bg{ width: 80px;height:80px;}
.community-hot .price{text-align: left}

.community-list{margin-top:10px;}
.community-list .common-tab{background: #fff;}
.community-list .item{padding: 10px;background: #fff; margin-top:10px;}
.community-list .item:first-child{margin-top:0px;}
.community-list .item .from-user{position: relative;padding-left:46px;}
.community-list .item .from-user .name{font-size: 14px;}
.community-list .item .from-user .name,
.community-list .item .from-user .time{height: 18px; line-height: 18px;overflow: hidden;}
.community-list .item .from-user .time{color: #929699}
.community-list .item .default-avatar{width:36px; height: 36px; position: absolute;left:0;top:0;border-radius: 50%; overflow: hidden;}
.community-list .topic-title{font-size:16px; line-height: 22px;margin-top: 15px;}
.community-list .topic-big-img{margin-top:10px;}
.community-list .topic-big-img img{ display: block; max-width: 100%;max-height: 200px;}



/*===============/exercise/===============*/
.page-exercise{padding-top: 44px;}
.page-exercise .header .search{margin-left: 10px;}

.exam-item{ background:#fff;margin-top:0.5rem;padding-bottom:0.75rem;}
.exam-item h4{height:2.667em; line-height:2.667em; padding:0 0.75rem; background:#f3f3f3; position:relative; padding-bottom:1px;font-weight: normal;}
.exam-item h4 span{ font-size:.7rem;color:#303030;}
.exam-item ul{ padding-right:0.75rem; }
.exam-item li{float:left;margin-top:0.5rem; margin-left:0.5rem;}
.exam-item li a{ font-size:.65rem; display:block; background:#fff;color:#606060;border-radius:25rem; padding:0 .6rem; position:relative;height:1.550rem; line-height:1.550rem; overflow:hidden;border: 1px solid #ededed;}

.sns_box_padding {
  box-sizing: border-box;
  padding: 0 15px;
}
.SNS_top {
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 40px;
  background-image: url("../images/me_school_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 250px;
  width: 100%;
  position: relative;
}
.SNS_top .sns_advices {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 10;
}
.SNS_top .sns_advices img {
  max-width: 100%;
  max-height: 100%;
}
.SNS_top .sns_buddha {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}
.SNS_top .sns_buddha .default-avatar {
width: 100px;
height: 100px;
  border-radius: 100%;
}
.SNS_top .sns_buddha .buddha_name {
  position: absolute;
  left: 50%;
  margin-left: -40%;
  /* margin-left: -37px; */
  bottom: 0;
  width: 90%;
  display: inline-block;
  border-radius: 30px;
  background: #ffc23d;
  color: #fffbf5;
  /* width: 74px; */
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  z-index: 9;
}
.SNS_top .check-ins {
  position: absolute;
  right: 0;
  top: 40%;
  margin-top: -20px;
  display: inline-block;
  line-height: 28px;
  text-align: left;
  box-sizing: border-box;
  padding: 0 10px 0 15px;
  font-size: 14px;
  background: #ffc23d;
  border-radius: 20px 0 0 20px;
  color: #ffffff;
}
.SNS_top .sns_monicker {
  text-align: center;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  margin-top: 15px;
}
.SNS_top .sns_bottom {
  margin-top: 15px;
}
.SNS_top .sns_bottom ul li {
  width: 33.33333333%;
  float: left;
  text-align: center;
  position: relative;
}
.SNS_top .sns_bottom ul li:after {
  content: "";
  position: absolute;
  width: 1px;
  background: rgba(255,255,255,0.4);
  height:36px;
  right: 0;
  top: 50%;
  margin-top: -18px;
  transform: scaleX(0.5);
  z-index: 1;
}
.SNS_top .sns_bottom ul li:last-child:after {
  display: none;
}
.SNS_top .sns_bottom ul li em,
.SNS_top .sns_bottom ul li i {
  display: block;
}
.SNS_top .sns_bottom ul li em {
  color: #fff;
  font-size: 18px;
  line-height: 26px;
}
.SNS_top .sns_bottom ul li i {
  line-height: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
}
.SNS_nav {
  margin-top: 10px;
  background: #ffffff;
}
.SNS_nav ul li {
  padding: 10px 0;
  width: 25%;
  float: left;
  text-align: center;
}
.SNS_nav ul li a{ display: block}
.SNS_nav ul li .icon {
  height: 24px;
  width: 24px;
  margin: 0 auto;
}
.SNS_nav ul li .icon img {
  max-width: 100%;
  max-height: 100%;
}
.SNS_nav ul li .text {
  margin-top: 4px;
  font-size: 12px;
  line-height: 24px;
  
}
.SNS_centre {
  margin-top: 10px;
  background: #fff;
}

.SNS_Management{padding-top: 15px;}
.SNS_Management h2 {
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
}
.SNS_Management .SNS_nav{padding:5px 0;margin-top:0px;}

.SNS_myPlace {
  margin: 10px 0;
  padding: 0 15px 20px 15px;
  background: #fff;
}
.SNS_myPlace h2 {
  padding-top: 15px;
  font-size: 14px;
  line-height: 24px;
  font-weight: normal;
}
.SNS_myPlace h2 a {
  display: inline-block;
  float: right;
  color: #575c60;
  font-size: 12px;
  line-height: 24px;
}
.SNS_myPlace ul {
  margin-top: 15px;
}
.SNS_myPlace ul li {
  width: 33.33333333%;
  float: left;
  text-align: center;
}
.SNS_myPlace ul li em,
.SNS_myPlace ul li i {
  display: block;
}
.SNS_myPlace ul li em {
  font-size: 20px;
  line-height: 28px;
}
.SNS_myPlace .common-title{font-size: 14px; padding: 0px;}
.SNS_myPlace .common-title .more{font-size: 12px;}
.SNS_myPlace ul li i {
  color: #929699;
  font-size: 12px;
  line-height: 22px;
}


/*底部菜单*/
.footer-tabbar-blank{height: 49px; overflow: hidden;}
.footer-tabbar{height: 49px; background: #fff; position: fixed;left:0;bottom:0;width: 100%; z-index: 100;}
.footer-tabbar li{width: 20%;float: left;color:#929699; text-align: center;font-size:10px; line-height: 12px;}
.footer-tabbar li .icon{width:32px;height:32px;margin:0 auto; background-repeat: no-repeat; background-size:24px 24px; background-position: 50% 60%}
.footer-tabbar li .icon-index{background-image: url(../images/common_nav_btn_index_n.png)}
.footer-tabbar li .icon-find{ background-image: url(../images/common_nav_btn_find_n.png)}
.footer-tabbar li .icon-community{ background-image: url(../images/common_nav_btn_social_n.png)}
.footer-tabbar li .icon-exercise{ background-image: url(../images/common_nav_btn_exercise_n.png)}
.footer-tabbar li .icon-me{ background-image: url(../images/common_nav_btn_me_n.png)}

.footer-tabbar li.on{color:#ff663d;}
.footer-tabbar li.on .icon-index{background-image: url(../images/common_nav_btn_index_s.png)}
.footer-tabbar li.on .icon-find{ background-image: url(../images/common_nav_btn_find_s.png)}
.footer-tabbar li.on .icon-community{ background-image: url(../images/common_nav_btn_social_s.png)}
.footer-tabbar li.on .icon-exercise{ background-image: url(../images/common_nav_btn_exercise_s.png)}
.footer-tabbar li.on .icon-me{ background-image: url(../images/common_nav_btn_me_s.png)}


