@charset "utf-8";

:root {
    --TopBax-padding-left: 161px;
}

/*HomeTop*/
.TopBax{ display:block; width:100%; max-width:1550px; padding-right:30px; padding-left: calc(var(--TopBax-padding-left) + 140px); margin:230px auto 0 auto; position:relative;}
.TopBax .BannerArea{ position:relative; z-index:1;}
.TopBax .BannerArea .Slide{ display: flex; align-items: center; }
.TopBax .BannerArea .Photo{ overflow:hidden; display:block;}
.TopBax .BannerArea .Photo img{ border-radius:100px; width:100%; aspect-ratio: 1142/716; }
.TopBax .BannerArea .pointBox{ padding: 10px 0 0 0; display: flex; grid-gap:15px; justify-content: center; }
.TopBax .BannerArea .pointBox .points{ font-size: 0; width: 28px; height: 16px; border-radius: 50px; background-color: #dcdcdc; cursor: pointer; transition: width 0.2s; }
.TopBax .BannerArea .pointBox .points.hold{ width: 70px; background-color: #ff9048; }
.TopBax .BannerArea .pointBox .points:focus,.banner .pointBox .points:hover{ background-color: #ff9048; }
.TopBax .QuickMenu{ width:50%; display:flex; flex-direction: column; position:absolute; top:0; left:30px; bottom:0; gap:5px; justify-content: center;}
.TopBax .QuickMenu .TopTitle{ width:266px;}
.TopBax .QuickMenu .Item{ position:relative; padding:10px 10px 10px 70px; margin-left:30px; display:block; border-radius:100px 0 0 100px; background: linear-gradient(to bottom, #cddc39 0%,#2a9454 100%);}
.TopBax .QuickMenu .Item::before{ content:""; display:block; width:72px; height:72px; background:url(../images/index/icon-top-play.png) no-repeat center; background-size:72px; position:absolute; top:0; left:-30px; bottom:0; border-radius:50%;}
.TopBax .QuickMenu .Item .ZH{ font-size:1.875rem; color:#fff; font-weight:bold; line-height:1;}
.TopBax .QuickMenu .Item .EN{ font-size:1.375rem; color:#fff; line-height:1;}
.TopBax .QuickMenu .Item:hover::before{ transform: translateX(10px);}
.SrarchBox{ margin:auto; width:100%; max-width:1200px; padding:5px 30px 20px 30px;}
.SrarchBox .Bar{ width:100%; border:1px solid #aaa; height:57px; border-radius:100px; background-color:#fff; display:flex;}
.SrarchBox .Bar input[type="text"]{ border-radius:100px 0 0 100px; width:100%; border:none; background:none; height:55px; line-height:55px; font-size:1.25rem; flex:1; padding:0 20px;}
.SrarchBox .Bar button{ border-radius:0 100px 100px 0; color:#fff; background-color:#90ac50; font-size:1.5rem; border:none; height:55px; line-height:55px; padding:0 20px; cursor:pointer;}

/*Main*/
section{ width:100%; padding:60px 30px;}
section.twoBg:before,
section.twoBg:after{ display:none;}
.ContentBox{ max-width:1240px; width:100%; margin:auto; padding:50px 0;}
.centerBlock.spacing{ margin-bottom:50px;}
.indexEbookBox .flexBox.ebook .grids .gs .textbox .pText{ background-color:#ff9048; position:absolute; bottom:0; left:4px; right:4px; border-radius:5px; padding:5px 35px; display:flex;}
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2{ font-size:1.5rem;}
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .Type{ font-size:1.125rem; color:#ff9048; font-weight:bold;}
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .en{ font-size:1.125rem; min-height:35px; -webkit-line-clamp:2; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; white-space: normal;}
.indexEbookBox .flexBox .grids .gs .imgs{ background-size:cover; padding-bottom:60%;}
.indexEbookBox .flexBox .grids .gs .textbox{ padding:10px 10px 40px 10px;}
.indexEbookBox .flexBox .grids .gs .textbox .p{ width:25%; color:#fff;}
.indexEbookBox .flexBox.ShortBottom .grids .gs .textbox{ padding-bottom:10px;}

.indexEbookBox .flexBox.Theme{ flex-wrap: wrap;}
.indexEbookBox .flexBox.Theme .gridsWrapper{ width:33%;}
.indexEbookBox .flexBox.Theme .gridsWrapper .grids{ width:100%; padding:0 0 20px 20px;}
.indexEbookBox .flexBox.Theme .gridsWrapper .grids .stateDiv{ background:none; padding:0; left: 25px; top: -10px;}
.indexEbookBox .flexBox.Theme .gridsWrapper .grids .stateDiv img{ width:55px;}
.indexEbookBox .flexBox.Theme .grids .gs .imgs{ padding-bottom:60%; background-size:cover;}
.indexEbookBox .flexBox.Theme .grids .gs .textbox{ text-align:center;}
.indexEbookBox .flexBox.Theme .grids .gs .textbox .h2{ height:auto;}
.indexEbookBox .flexBox.Theme .grids .gs .textbox .h3{ color:#a0a0a0;}
.ExclusiveStories{ background:url(../images/index/bg-selected-books.png) no-repeat center bottom; margin-bottom:100px; padding-bottom:20px;}
.ExclusiveStories .indexEbookBox .flexBox.Theme .gridsWrapper{ width:20%;}
.ExclusiveStories .indexEbookBox .flexBox.Theme .grids .gs{ box-shadow:none; border-radius:0; overflow:inherit; background:none;}
.ExclusiveStories .indexEbookBox .flexBox.Theme .grids .gs .imgs{ border-radius:10px; border:10px solid #fff; box-shadow:0 4px 16px 23px rgba(99,99,99,.1); padding-bottom:123%;}
.ExclusiveStories .indexEbookBox .flexBox.Theme .grids .gs .textbox{ padding:10px;}
.ExclusiveStories .indexEbookBox .flexBox.Theme .grids .gs .textbox .h2{ margin-bottom:0;}
.ExclusiveStories .indexEbookBox .flexBox.Theme .grids .gs .textbox .h3{ color:#636363;}

/*Page*/
.banner{ background:no-repeat center;}
.banner .bg01,.banner .bg02{ display:none;}

.indexEbookBox .flexBox.ebook.ListStyle .gridsWrapper{ width:25%;}

.indexEbookBox .flexBox.ebook.ListStyle .grids .gs .textbox .pText{ left:16px; right:-4px;}
.indexEbookBox .flexBox.ebook.ListStyle .grids .gs .imgs{ background-size:cover; padding-bottom:60%;}
.indexEbookBox .flexBox.ebook.ListStyle .grids .gs .pText{ left:16px; right:-4px;}
.indexEbookBox .flexBox.ebook.ListStyle .grids .gs{ width:100%;}

.indexEbookBox .flexBox.video2 .grids{ width:100%;}
.indexEbookBox .flexBox.ebook.ListStyle.video2 .grids .gs .textbox .pText{ left:8px; right:8px;}

.episodeBox .flexBox .grids.BlueStyle,
.episodeBox .flexBox .grids.GreenStyle{ width:25%;}
.episodeBox .flexBox .grids.BlueStyle .gs{ border:2px solid #2896e8; background-color:#fff; color:#2896e8; line-height:70px; font-weight:bold; font-size:1.5rem;}
.episodeBox .flexBox .grids.BlueStyle .gs.Focus{ background-color:#2896e8; color:#fff;}
.episodeBox .flexBox .grids.GreenStyle .gs{ border:2px solid #90ac50; background-color:#fff; color:#90ac50; line-height:70px; font-weight:bold; font-size:1.5rem;}
.episodeBox .flexBox .grids.GreenStyle .gs.Focus{ background-color:#90ac50; color:#fff;}
.trainingTitle .shareBox .Types{ background-color:#ff9048; border-radius:10px; padding:5px 20px; display:flex; align-items: center;}
.trainingTitle .shareBox .Types .p{ color:#fff; padding:0 10px; font-size:1.25rem;}

.eBookBox{ padding:30px; box-shadow:0 0 20px 0 rgba(0,0,0,.1); margin-bottom:50px;}
.eBookBox .img{ padding: 2px; background: #fff; border-radius: 20px; position: relative; z-index: 2; overflow: hidden; display: block;}
.eBookBox .Dashboard{ display:flex; gap:20px; align-items: center; justify-content: center;}
.eBookBox .Dashboard .Btn{ width:100px; height:100px; background:no-repeat center; background-size:100px; cursor:pointer;}
.eBookBox .Dashboard .Btn.Back{ background-image:url(../images/page/icon-detail-back.png)}
.eBookBox .Dashboard .Btn.Next{ background-image:url(../images/page/icon-detail-next.png)}
.eBookBox .Dashboard .Btn.Play{ background-image:url(../images/page/icon-detail-play.png)}
.eBookBox .Dashboard .Btn.Stop{ background-image:url(../images/page/icon-detail-Stop.png)}
.eBookBox .Dashboard .Btn:disabled{ filter: contrast(0.6);}



@media screen and (max-width:1400px) and (min-width: 1281px) {

.TopBax .QuickMenu{ justify-content: flex-start;}
.TopBax .QuickMenu .Item{ padding-left:60px;}
.TopBax .QuickMenu .Item::before{ width:60px; height:60px; background-size:60px;}
.TopBax .QuickMenu .Item .ZH{ font-size:1.5rem;}
.TopBax .QuickMenu .Item .EN{ font-size:1rem;}

}


@media screen and (max-width:1280px) and (min-width: 768px) {
/*HomeTop*/
.TopBax{ padding:0 30px;  margin:90px auto 0 auto;}
.TopBax .QuickMenu{ position:static; width:100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap:0; padding:20px 0;}
.TopBax .QuickMenu .TopTitle{ display:none;}
.TopBax .QuickMenu .Item{ background:none; padding:10px; margin:0; width:25%;}
.TopBax .QuickMenu .Item::before{ display:none;}
.TopBax .QuickMenu .Item .ZH{ color:#000;}
.TopBax .QuickMenu .Item .EN{ color:#668a13;}

}



@media screen and (max-width:767px) {
footer{ padding:56px 0 70px 0;}
section.pad70{ padding:30px 10px;}

/*HomeTop*/
.TopBax{ padding:0 10px; margin:70px auto 0 auto;}
.TopBax .BannerArea .Photo img{ border-radius: 15px;}
.TopBax .QuickMenu{ position:static; width:100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap:0; padding:20px 5px;}
.TopBax .QuickMenu .TopTitle{ display:none;}
.TopBax .QuickMenu .Item{ background:none; padding:10px 5px; margin:0; width:25%;}
.TopBax .QuickMenu .Item::before{ display:none;}
.TopBax .QuickMenu .Item .ZH{ font-size:1rem; color:#000;}
.TopBax .QuickMenu .Item .EN{ font-size:0.75rem; color:#668a13;}
.TopBax .BannerArea .pointBox{ grid-gap: 10px; }
.TopBax .BannerArea .pointBox .points{ height: 10px; width: 20px; }
.TopBax .BannerArea .pointBox .points.hold{ width: 45px; }
.SrarchBox { margin: auto; width: 100%; padding: 10px 30px 20px 30px;}
.SrarchBox .Bar { width: 100%; border: 1px solid #aaa ;height: 45px; border-radius: 100px; background-color: #fff; display: flex;}
.SrarchBox .Bar input[type="text"] { border-radius: 100px 0 0 100px; width: 100%; border: none; background: none; height: 45px; line-height: 45px; font-size: 1rem;    flex: 1; padding: 0 20px;}
.SrarchBox .Bar button { border-radius: 0 100px 100px 0; color: #fff; background-color: #90ac50; font-size: 1rem; border: none; height: 45px; line-height: 45px;    padding: 0 20px; cursor: pointer;}

.centerBlock.spacing{ margin-bottom:30px;}
.indexEbookBox.RwdStyle{}
.indexEbookBox.RwdStyle .flexBox.Theme .gridsWrapper{ width:100%; padding:0 10px 20px 20px;}
.indexEbookBox.RwdStyle .flexBox.Theme .gridsWrapper .grids{ left:0; right:0; margin-bottom:10px; padding:0;}
.indexEbookBox.RwdStyle.RwdRow2 .flexBox{ margin:0;}
.indexEbookBox.RwdStyle.RwdRow2 .flexBox.Theme .gridsWrapper{ width:50%; padding:0 5px 20px 10px;}
.indexEbookBox.RwdStyle.RwdRow2 .flexBox.Theme .gridsWrapper .grids{ padding:0;}
.indexEbookBox .flexBox .grids{ padding: 0 0 0 10px; left: 4px; right: 0;}
.indexEbookBox .flexBox.ebook .grids .gs .textbox .pText{ padding:5px 10px; left: 7px; right: -3px;}
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .Type{ font-size:0.875rem;}
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .ch{ font-size:1rem;}
.indexEbookBox .flexBox.ebook .grids .gs .textbox .h2 .en{ display:block; font-size:0.75rem;}
.indexEbookBox .flexBox.Theme .gridsWrapper .grids .stateDiv img{ width:35px;}
.indexEbookBox .flexBox.ebook.ListStyle .grids .gs .textbox .pText{ padding:5px 10px; left: 7px; right: -3px;}
/*Page*/
.banner{ background-size: auto 170px; background-position:-220px 0px;}

.briefTextBox .titleBox .h3{ padding:10px 10px;}
.trainingTitle .shareBox{ flex-direction: column; width:100%;}
.trainingTitle .shareBox .shareCommunity{ margin:0;}
.trainingTitle .shareBox .Types{ width:100%; margin-bottom:15px;}
.trainingTitle .shareBox .Types .p{ flex:1;}
.episodeBox .flexBox .grids.BlueStyle, .episodeBox .flexBox .grids.GreenStyle{ width:50%;}
.episodeBox .flexBox .grids.BlueStyle .gs,
.episodeBox .flexBox .grids.GreenStyle .gs{ line-height:35px; font-size:1rem; height:auto;}

.indexEbookBox .flexBox.video2{ flex-wrap: wrap; flex-direction: row; margin:0 -15px;}
.indexEbookBox .flexBox.video2 .grids{ width:47%; padding:5px;}
.indexEbookBox .flexBox.video2 .grids .gs{ flex-direction: column; box-shadow:0 2px 10px 3px rgba(99,99,99,.1);}
.indexEbookBox .flexBox.video2 .grids .gs .imgs{ width:100%;}
.indexEbookBox .flexBox.video2 .grids .gs .textbox .pText{ background-color:#ff9048; position:absolute; bottom:0; left:4px; right:4px; border-radius:5px; padding:5px 10px; display:flex;}
.indexEbookBox .flexBox.video2 .grids .gs .textbox .h2{ font-size:1.5rem; height:auto;}
.indexEbookBox .flexBox.video2 .grids .gs .textbox .h2 .Type{ font-size:0.875rem; color:#ff9048; font-weight:bold;}
.indexEbookBox .flexBox.video2 .grids .gs .textbox .h2 .ch{ font-size:1.25rem;}
.indexEbookBox .flexBox.video2 .grids .gs .textbox .h2 .en{ font-size:0.75rem; min-height:35px;}
.indexEbookBox .flexBox.video2 .grids .gs .textbox{ padding:10px 10px 40px 10px;}
.indexEbookBox .flexBox.video2 .grids .gs .textbox .p{ width:25%; color:#fff;}
.indexEbookBox .flexBox.video2 .grids:last-child{ margin-bottom:auto;}

.ExclusiveStories{ background:none; margin-bottom:0; margin-top:-50px;}

.briefTextBox .titleBox .h3 .ch{ font-size:1.25rem;}

.eBookBox{ padding:10px; margin-bottom:20px;}
.eBookBox .Dashboard .Btn{ width:50px; height:50px; background-size:50px;}
}

@media screen and (max-width:220px) {
    .indexEbookBox .flexBox.video2 .grids{ width:100%;}
}