/*reset and clearfix
---------------------------*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
a{text-decoration:none; color: #333;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}.clearfix,.wrapper,.home_box{*zoom:1;}
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,/*PingFang SC,*/Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif; font-size: 14px;}
/*清除 iPhone Safari 按钮默认样式*/
input[type="submit"],input[type="reset"],input[type="button"],button,select,textarea {-webkit-appearance: none;}
input::-webkit-input-placeholder{
	color:#666;
} 
/* 主题色：#fd9802 */


:root{
     --orange: #fd9802;
     --orange-10: rgba(253, 153, 2, 0.18);
          --orange-5: rgba(253, 153, 2, 0.106);
     --green:#75b536;
     --green-10: rgba(117, 181, 54, 0.18);
     --blue:#008aef;
     --blue-10: rgba(0, 138, 239, 0.18);
}
 
body{min-width: 1200px; min-height: 100vh;   position: relative;}
body{
	background: #fffbf4 ;
 
	color: #333;
}
.left{
	float: left;
}
.right{
	float: right;
}
 

.header{
    background-color: #fff;
	height: 76px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
}
.header .nav{
    display: flex;
    padding-left: 20px;
}

.header .nav li a{
    color: #333;
    font-size: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
     padding:  10px 15px;
    border-radius: 10px;
}

.header .nav li a.active{
    color: var(--orange);
    background-color: var(--orange-10);
   
}
.header_left,.header_right{
    display: flex;
    align-items: center;
}
.header_right{
    gap: 20px;
}
.wrapper{
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
}

.header .ai_btn{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #fff;
      background-image: -moz-linear-gradient( 0deg, rgb(0,138,255) 0%, rgb(133,4,242) 99%);
  background-image: -webkit-linear-gradient( 0deg, rgb(0,138,255) 0%, rgb(133,4,242) 99%);
  background-image: -ms-linear-gradient( 0deg, rgb(0,138,255) 0%, rgb(133,4,242) 99%);
  background-image: linear-gradient( 0deg, rgb(0,138,255) 0%, rgb(133,4,242) 99%);
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  border-radius: 15px;
  position: relative;
  padding-left: 40px;
}
.header .ai_btn img{
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
}
.header_right a{
    color: var(--orange);
    font-size: 18px;
}
/* 顶部用户名悬停下拉：个人中心 / 退出 */
.user_menu{
    position: relative;
    display: inline-flex;
    align-items: center;
}
.user_menu .user{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.user_dropdown{
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 8px;
    z-index: 100;
}
.user_dropdown_inner{
    min-width: 120px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    overflow: hidden;
}
.user_dropdown a{
    display: block;
    padding: 9px 18px;
    color: #333;
    font-size: 15px;
    white-space: nowrap;
}
.user_dropdown a:hover{
    background: #f6f6f8;
    color: var(--orange);
}
.user_menu:hover .user_dropdown,
.user_menu:focus-within .user_dropdown{
    display: block;
}

.btn{
    border-radius: 10px;
    background-color: var(--orange);
    color: #fff !important;
    padding: 10px 20px;
    font-size: 16px;
    text-align:center;
}
.btn_light{
    background-color: var(--orange-10);
    color: var(--orange) !important;
}
.banner{
    height: 340px;
    overflow: hidden;
    width: 100%;
}
.swiper_banner,.swiper_banner .swiper-slide{
    height: 340px;
    overflow: hidden;
    width: 100%;
}
.swiper_banner .swiper-slide img{
    width: 100%;    
    height: 340px;
 
    object-fit: cover;
}

.swiper_banner .swiper-button-prev, .swiper_banner .swiper-button-next{
    width: 50px;
    height: 50px;
    top: 138px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    opacity: 0;
    transition: all .3s ;
}
.swiper_banner:hover .swiper-button-prev, .swiper_banner:hover .swiper-button-next{
    opacity: 1;
}
.swiper_banner .swiper-button-prev::after, .swiper_banner .swiper-button-next::after{
    color: #fff;
    font-size: 24px;
}
.swiper_banner .swiper-pagination,.pagination_orange .swiper-pagination.swp_banner{
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.swiper_banner .swiper-pagination-bullet{
    background-color: #fff;
}
.swiper_banner .swiper-pagination-bullet-active,.pagination_orange .swiper-pagination-bullet-active{
    width:50px;
    border-radius: 10px;
}
.footer_container{
    background-color: #fff4e3;
}
.footer{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding: 50px 0;

    
}
.foot_logo{
    display: flex;
    align-items: center;
    gap: 10px;
}
.foot_logo img{
   margin-right: 0px;
}
.foot_logo span{
    font-size: 20px;
    color: var(--orange);
    padding-left: 20px;
    border-left: solid 1px var(--orange);
}
.footer_left p{
    padding-top: 15px;
}
.footer_right{
    display: flex;
 
   
}
.link_list{
    border-left: solid 1px var(--orange);
    padding: 0 30px;
}
.link_list h4{
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 10px;
}
.link_list a{
    font-size: 14px;
    padding: 6px 0;
    display: block;
}
.link_list a:hover{
    color: var(--orange);
}
.beian{
    text-align: center;
    padding: 20px;
    background-color: #ffefd5;
    color: #666;
}

.float_bar{
    position: fixed;
    top: auto;
    bottom: 40px;
    right: 6px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.float_bar_item_container{
    display: flex;
    flex-direction: column;
 
      box-shadow: 0px 3px 20px 0px rgba(242, 106, 6, 0.15);
      border:solid #ccc 1px;
      background-color: #fff;
      border-radius: 30px;
      width: 60px;
      padding: 0 6px;
}
.float_bar_item_container a{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 15px 0;
    border-bottom: solid #ddd 1px;
    position: relative;
}
.float_bar_item_container a:last-child{
    border-bottom: none;
    padding-bottom: 20px;
}
.float_bar_item_container a .qr_code{
     width: 140px;
     height: 140px;
     padding: 10px;
     background: #fff;
     border-radius: 10px;
     border: solid #ccc 1px;
     position: absolute;
     top: 50%;
     left: -157px;
     transform: translateY(-50%);
     display: none;
}
.float_bar_item_container a:hover .qr_code{
    display: block;
}
.badge{
    position: absolute;
    top: 5px;
    right: 0;
    border: solid #fff 1px;
    min-width: 18px;
    padding: 0 2px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 8.5px;
    background-color: #ff2929;
    color: #fff;
    font-size: 14px;
}
.page_main{
    position: relative;
}
.page_main::before{
    content: '';
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    width: 1280px;
    max-width: 100%;
    height: 500px;
    background-color:#fff9f4;
    border-radius: 40px;
    z-index: 0;
}
.page_main .wrapper{
    position: relative;
    z-index: 1;
}
.page_main .sec_title h2{
    color: #fff;
}

.search_box{
width: 250px;
height: 50px;
border-radius: 10px;
background:rgba(255, 255, 255, 0.9) url(../img/search.png) no-repeat 10px center;
background-size: 22px auto;
border: none;
outline: none;
font-size: 16px;
padding-left: 40px;
}
.tab_list,.second_tab_list{
    display: flex;
    align-items: center;
    gap: 40px;
}
.second_tab_list{
    gap: 20px;
}
.tab_list li a{
    font-size: 18px;
    padding: 15px 0;
    display: block;
}
.tab_list li a.active{
    color: var(--orange);
    border-bottom: solid 3px var(--orange);

}
.second_tab_list li a{
    font-size: 16px;
    padding:5px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
 }

 .second_tab_list li a.active{
    color: var(--orange);
    background: var(--orange-10);
 }

 .ellipsis{
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}

/*页码相关css=============================================*/

.edu_pager{
 
 
 
    padding: 20px 0;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
 
}
.edu_pager p,.edu_pager span,.edu_pager a{
	color: #666;
	font-size: 16px;
	line-height: 32px;
    text-indent: 0;
    background-color: #fff;
        min-width: 32px;
}	
.edu_pager_bar{
	float:right;
	 
	height:32px;
	line-height:32px;
 
 
	overflow: hidden;
}
.edu_pager_bar a{
	padding:0 11px;
	height:32px;
	/* border:1px solid #dedede; */
    float:left;
    border-radius: 6px;
    margin-left: 3px;
}

.edu_pager_bar a.disable{
    background: #f5f5f5;
    color: #b7b7b7;
}
 
.edu_pager_bar a.checked{
	background:var(--orange);
    color:#fff;
    border: none;
}
.edu_pager_bar a:hover{
	text-decoration:none;
	color:var(--orange);
}
.edu_pager_bar a.checked:hover{
	/* text-decoration:none; */
	color:#fff;
}
.edu_pager_bar a.pager_btn{
	padding:0 9px;
} 
.grey_pager a{
    background-color: #fafafa;
}

/*页码相关css-END=============================================*/

.page_banner{
    width: 1200px;
    height: 305px;
    border-radius: 20px;
    margin-top: 80px;
    /* overflow: visible; */
}
.page_banner .swiper-slide{
    border-radius: 20px;
    height: 305px;
    overflow: hidden;
}
.page_banner .swiper-slide img{
    height: 305px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    /* border-radius: 20px; */
}
.page_banner .swiper-pagination-bullet ,.pagination_orange .swiper-pagination-bullet{
   background-color: var(--orange);
}
    
.pagination_orange .swiper-pagination.swp_banner{
    bottom: -15px;
}

.bread{
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
}
.bread a{
    color: #666;
}
.bread em{
    color: var(--orange);
}
.bread span{
    color: #333;
}
.share_float{
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    top:136px;
    left: max(10px, calc(50vw - 670px));
    align-items: center;
}
.share_float span{
    font-size: 16px;
    color: #666;
}
.share_float a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: var(--orange-10);
    border-radius: 50%;
}

    .course_list a{
        background-color: #fff;
        border-radius: 20px;
        width: 360px;
        position: relative;
    }
    .course_list a .cover{
        width: 100%;
        height: 176px;
    object-position: center;
    border-radius: 18px;
    object-fit: cover;
    }
    .course_list a > span{
        position: absolute;
        left: 0;
        top:130px;
         background-image: -moz-linear-gradient( 0deg, rgb(255,99,0) 0%, rgb(255,143,11) 100%);
  background-image: -webkit-linear-gradient( 0deg, rgb(255,99,0) 0%, rgb(255,143,11) 100%);
  background-image: -ms-linear-gradient( 0deg, rgb(255,99,0) 0%, rgb(255,143,11) 100%);
  background-image: linear-gradient( 0deg, rgb(255,99,0) 0%, rgb(255,143,11) 100%);
 
    }

    .course_list a i{
       font-style: normal;
       font-size: 18px;
       padding: 15px;
       display: block;
    }
    .course_list a .price{
        padding: 0 15px 15px;
        display: block;
        font-size: 24px;
        color: #ff6c00;
        font-weight: bold;
    }
    .course_list a .price em{
        font-size: 16px;
    }
    .course_list a .cart_btn{
        position: absolute;
        right: 20px;
       bottom: 20px;
        display: block;
    
    
         width: 24px;
        height: 24px;
    }
     .course_list a .buyy{
        background-color: var(--green-10);
        color: var(--green);
        border-radius: 5px;
        font-size: 16px;
        width: 60px;
        text-align: center;
         padding: 0 ;
    }

    /* 列表页「已购买」标签（与移动端 buyy 样式一致） */
    .buy_tag{
        display: inline-block;
        position: static;
        left: auto;
        top: auto;
        background-image: none;
        background-color: var(--green-10);
        color: var(--green);
        border-radius: 5px;
        font-size: 13px;
        line-height: 20px;
        height: 20px;
        padding: 0 6px;
        margin-right: 6px;
        font-style: normal;
        font-weight: 400;
        vertical-align: middle;
        white-space: nowrap;
    }

    /* 列表页 VIP 标识（已购买 或 已激活有使用权限） */
    .vip_tag{
        display: inline-block;
        background-image: linear-gradient(135deg, #f7c948 0%, #e79a10 100%);
        color: #fff;
        border-radius: 5px;
        font-size: 11px;
        line-height: 18px;
        height: 18px;
        padding: 0 6px;
        margin-right: 6px;
        font-style: normal;
        font-weight: 700;
        letter-spacing: .5px;
        vertical-align: middle;
        white-space: nowrap;
    }

    .course_list a:hover{
 
  box-shadow: 0px 15px 15px 0px rgba(238, 95, 0, 0.1);
 
 

    }
 .course_list a .fav_btn{
    position: absolute;
    right: 20px;
   top: 4px;
    display: block;
    width: 29px;
    height: 30px;
    border-radius: 0;
    transition: all 0.5s ;
   opacity: 0;
   pointer-events: none;
 }
  .course_list a:hover .fav_btn{
    opacity: 1;
    pointer-events: auto;
 }
 .course_list a .fav_s{
    opacity: 1;
    pointer-events: auto;
 }

  .online{
    background-color: var(--orange-10);
    padding:3px 5px;
    border-radius: 5px;
    font-size: 16px;
    color: var(--orange) !important;
 }
 .offline{
    background-color: var(--blue-10);
    padding:3px 5px;
    border-radius: 5px;
    font-size: 16px;
    color: var(--blue);
 }
 .header .user{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
 }
 .header .user img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
 }