:root {
    --text: #222;
    --title: #333;
    --primary: #4cae4f;
    --background: #fff;
    --color-black: #333;
    --color-white: #fff;
    --color-green: #4cae4f;
    --color-yellow: #f1dc15;
    --color-orange: #ffa724;
    --color-purple: #ab47bd;
    --color-red: #ff2c06;
}

html {
    box-sizing: border-box;
    font-size: 80%;
}

body {
    color: var(--text);
    background-color: var(--background);
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.8em;
    padding: 0;
    margin: 0.5em 0 1em 0;
}

@media only screen and (max-width:660px) {
    body {
        
    }
}

img {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
video{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

figcaption {
    font-size: 75%;
    font-weight: 700;
    text-align: center;
}



small {
    color: var(--text);
}

*,
*:after,
*:before {
    box-sizing: inherit;
}


a {
    color: var(--text);
    text-decoration: none;
    margin-right: 0.5em;
}

a:focus,
a:hover {
    color: #00F;
    text-decoration: underline;
}

p {
    margin: 1.6rem 0;
    color: var(--text);
}

p a {
    font-weight: 400;
    color: var(--text);
    text-decoration: underline;
    text-underline-position: under;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--title);
/*    letter-spacing: 0.0625em;*/
    margin: 3.2rem 0 1.6rem;
/*    text-transform: uppercase;*/
}

h1 {
    font-size: 3.2rem;
    line-height: 3.2rem;
}

h2 {
    font-size: 2.8rem;
    line-height: 2.8rem;
}

h3 {
    font-size: 2.4rem;
    line-height: 2.4rem;
}

h4 {
    font-size: 2.2rem;
    line-height: 2.2rem;
}


h5 {
    font-size: 2rem;
    line-height: 2rem;
}

h6 {
    font-size: 1.4rem;
    line-height: 1.4rem;
}

blockquote {
    border-left: 2px solid #dcdcdc;
    padding-left: 1.6rem;
    font-style: italic;
}

td,
th {
    padding: 1rem;
}

table {
    border-collapse: collapse;
}

table td,
table th {
    border: 2px solid var(--primary);
}

table tr:first-child th {
    border-top: 0;
}

table tr:last-child td {
    border-bottom: 0;
}

table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}

table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}

/********************************
 * 代码块
 *******************************/

.language-text{
    padding: 0.5rem;
    color: #333;
    background-color: #eee;
    tab-size: 2;
/*    overflow-y: auto;*/
    display: block;
}

code {
    background-color: #eee;
    padding: 0.4rem 0.8rem;
    white-space: pre-wrap; /* 保留空白符，自动换行 */
    word-wrap: break-word; /* 如果需要的话，长单词或URL会被打断换行 */
}

pre {
    margin: 1.6rem 0 1rem;
    padding: 1.6rem;
    overflow-x: auto;
    background-color: #eee;
    tab-size: 2;
/*    word-wrap: break-word;*/
/*    white-space: pre-wrap; *//* 保留空白符，自动换行 */
/*    word-wrap: break-word; *//* 如果需要的话，长单词或URL会被打断换行 */
    overflow: hidden;
    overflow-x: auto;
}

pre code {
    padding: 0;
}

.content-not-found{
    line-height: 2em;
    font-size: 2em;
}

/********************************
 * 总框
 *******************************/

.main-content-box{
    margin-left: 2em;
    margin-right: 2em;
}

/********************************
 * 顶部
 *******************************/
.header_box{
    text-align: center;
/*    border-bottom: solid 1px #ccc;*/
    padding: 0 10px 0px 0;
    display: flex;
    align-items: center;
}

.header_box_logo{
    width: 220px;
}



.header_box_search{
/*    padding: 10px;*/
    display: flex;
}

.search-input {
    border: 1px solid var(--primary);
    line-height: 2em;
    width: 20em;
}

.search-button {
    border: 1px solid var(--primary);
    background-color: var(--primary);
    color: #fff;
    line-height: 2em;
    width: 5em;
    margin-top:1em ;
    margin-bottom: 1em;
}

.search-button:hover {
    background-color: var(--color-green);
    border: 1px solid var(--color-green);
}



.header_box_bar{
    text-align: right;
    flex: 1 1 auto;
    display: flex;
    justify-content:flex-end;
    align-items: center;
    gap: 1em;
}

.login-button {
    border: 1px solid var(--primary);
    background-color: var(--primary);
    color: #fff;
    line-height: 2em;
    width: 5em;
    margin-top:1em ;
    margin-bottom: 1em;
    text-align:center;
}

.login-button:hover {
    background-color: #FFF;
    color:var(--color-green);
    border: 1px solid var(--color-green);
    text-decoration:none;
}

.site_nav{
    display: flex;
    align-items: center;
    gap: 0.2em;
}
.site_nav img{
    width: 1em;
    height: 1em;
    line-height: 1em;
}

@media screen and (max-width:660px) {

    .header_box{
        display: block;
    }

    .header_box_logo{
        width: 100%;
        text-align: center;
    }

    .header_box_search{
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .header_box_bar{
        justify-content:center;
    }
}

/********************************
 * 顶部菜单框
 *******************************/
.top-menu-box{
    background-color: var(--color-green);
    padding-left: 2em;
    padding-right: 2em;
    color: var(--color-white);
    display: flex;
    justify-content:flex-start;
    align-items: center;
    gap: 1em;
    flex-wrap:wrap;

}
.top-menu-box a{
    padding: 0.5em;
    color: #FFF;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.top-menu-box a:hover{
    text-decoration: underline;
}

.top-menu-box .current{
    background-color: #1a0639;
}

.svg_icon{
    color: #FFF;
    fill: #FFF;
    width: 1em;
    height: 1em;
}

/********************************
 * 底部
 *******************************/
#footer_menu{
    line-height: 3.5em;
    font-weight: bold;
}

#footer_links{
    color:#555;
    font-size:0.9em;
}
#footer_links a{
    color:#555;
}
/********************************
 * 导航站点
 *******************************/
.nav_link{
    padding: 0.5em;
    padding: 1em;
    color: #00F;
    text-decoration: none;
}

/********************************
 * 404
 *******************************/
.page-not-found-box{
    text-align:center;
    font-size: 2em;
}

/********************************
 * 文档主内容框
 *******************************/
.document-box{
    display:flex;
    padding: 2em;
}


/********************************
 * 目录
 *******************************/
.document-contents-box{
    border: solid 1px #CCC;
    padding: 1em;
    border-radius: 1em;
    margin-right: 2em;
    flex-shrink: 0;
    width: 20em;
}

@media screen and (max-width:1000px) {
    .document-contents-box{
        display:none;
    }
}

.document-contents-box li{
    border-bottom: 1px solid #EEE;
    padding-top:0.5em;
    padding-bottom:0.5em;
}

.contents_current{
    background:var(--color-green);
    color:#FFF;
}

.contents_current a{
    color:#FFF;
}

.contents-level-1{
    list-style:none;
    font-weight: bold;
}

.contents-level-2{
    list-style:none;
    padding-left: 1em;
}


/********************************
 * 内容正文及分页框
 *******************************/
.document-content-box{
    flex-grow: 1;
}

#document-content{

}
/********************************
 * 分页
 *******************************/
#document-pagination-box{
    margin-top: 1em;
    line-height: 3em;
}

#document-pagination-box a{
    color: #FFF;
}

#document-pagination-box .pre {
    display: block;
    border: solid 1px #eee;
    text-align:center;
    margin-bottom: 1em;
    background-color: var(--color-green);
}

#document-pagination-box .pre:before{
    content:"上一页:  ";
    padding-right:1em;
}

#document-pagination-box .next {
    display: block;
    border: solid 1px #eee;
    text-align:center;
    background-color: var(--color-green);
}

#document-pagination-box .next:before{
    content:"下一页:  ";
    padding-right:1em;
}


/********************************
 * 支付
 *******************************/
.pay-button{
    background-color: var(--color-green);
    color:#FFF;
    padding-left:1em;
    padding-right:1em;
    padding:1em;
}

.pay-button:hover{
    color:#FFF;
}

/********************************
 * 底部框
 *******************************/
#component-footer{
    text-align: center;
    border-top: solid 1px #ddd;
    padding: 10px;
    margin-top: 30px;
}

.copyright{
    font-size:0.8em;
    color:#555;
}

.certificate{
    font-size:0.8em;
    color:#555;
}

.certificate a{
    color:#555;
}


/********************************
 * 首页顶部banner
 *******************************/
.main_banner_box{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    background:#1a0639;
}
.main-banner-img{
    width: 1000px;
    height: 500px;
}

.slideshow {
  width: 1000px;
  height: 500px;
  margin: auto;
}

@media screen and (max-width:1000px) {
    .main-banner-img{
        width: 100%;
        height:auto;
    }

    .slideshow {
      width: 100%;
      height:auto;
      margin: auto;
    }
}

.slide {
  width: 100%;
  height: 100%;
  display:none;
}

.slide.active {
  display:inline;
}

/********************************
 * 首页推荐
 *******************************/
.recommend-box{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    width:80%;
}

.recommend-box-list{
    display:flex;
    gap: 30px;
    flex-wrap:wrap;
    justify-content:center;
}


.recommend-box-list-item{
    width: 150px;
}

.recommend-box-list-item-icon{

}

.recommend-box-list-item-title{

}

/********************************
 * 首页推荐
 *******************************/
 @media screen and (max-width:1000px) {
    .can-hidden{
        display:none;
    }
}

/********************************
 * vip页
 *******************************/
 .vip-title-box{
    line-height:2em;
 }

  .vip-title-box-item{

  }

 .vip-desc-box{
    line-height:2em;

 }

.vip-desc-box-item{
     line-height:2em;
     border: 1px solid #eee;
     margin-top:0.3em;
}

/********************************
 * 课程主页
 *******************************/
.course_index-box{
    width:80%;
    margin-top:1em;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    padding-bottom:2em;
}

.course_index-block-title-box{
    border-bottom: 1px solid #1a0639;
    margin-top:3em;
    margin-bottom: 2em;
    padding:0;
}

.course_index-block-title{
    font-size:1.1em;
    font-weight:bold;
    border-bottom: 1px solid #ddd;
    background-color: #1a0639;
    color:#FFF;
    margin:0;
    padding:0.5em;
}

.course_index-block{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    justify-content: space-between;
}

.course_index-block-item{
    width: 310px;
    height: 260px;
    border: 1px solid #ddd;
    margin-bottom: 1em;
}

.course_index-block:after{
    content:"";
    width:300px;
}

.course_index-block-item-icon{
    width:310px;
}

.course_index-block-item-icon img{

}

.course_index-block-item-title{
    font-weight:bold;
}

.course_index-block-item-desc{
    font-size:0.8em;
}


/********************************
 * 支付
 *******************************/
.wx-login-error-box{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    padding:1em;
}

 .wx-login-error-message{
    line-height:5em;
 }

.wx-re-login-button{
    background-color: var(--color-green);
    color:#FFF;
    padding:0.5em;
}

.wx-re-login-button:hover{
    color:#FFF;
}