@import "//at.alicdn.com/t/font_2390838_l794vtwjbng.css";
@import "tags.css";
*{
    padding:0;margin:0; box-sizing: border-box;
}
html,body{ height: 100%; overflow: hidden;}
ul,li,dl,dt,dd,ol{ list-style: none;}
body{background-color: #fff;}
a{ text-decoration: none; color:inherit}
.root{
    max-width:750px; margin: 0 auto; height: 100%; overflow: auto;
}
html{
    font-size:3.2vw;
}
.flashimg{ width:100%;}
.color-red{ color:#d82817;}
.header{ background-color: #fff; padding: .75rem;}
.search-bar input{ 
    border-radius: 1rem; background: #e2e2e2 url(../images/icon-search.png) no-repeat 1rem center; background-size: 1rem auto; border:none; 
    outline: none; width: 100%; font-size: 1rem; height: 2rem; padding: 0 1em 0 2.2rem;
}
.banner-swiper{
    background-color:#efefef ; padding: 0.575rem;
}
.banner-swiper .swiper-container{ border-radius: .35rem;}
.banner-swiper .swiper-slide{
    height: 13.25rem; color: #fff; display: flex; font-size:2rem; align-items: center; justify-content: center;
}
.banner-swiper .bg-1{ background-color: #4e6ef2; }
.banner-swiper .bg-2{ background-color: #e91e63; }
.banner-swiper .bg-3{ background-color: #9c27b0; }
.banner-swiper .bg-4{ background-color: #ff9800; }
.banner-swiper .bg-5{ background-color: #009688; }

.nav { display: flex; flex-wrap: wrap; padding: 1rem 0; }
.nav .nav-item{ width:20%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.nav .nav-item img{ width:3.5rem;}
.nav .nav-item span{ margin:0.75rem 0 1.1rem;}

.local-hot-list{ padding:1.5rem 1rem; background-color: #efefef;}
.hot-list .hot-item{ background-color: #fff; padding: 1.25rem 0.75rem; display: flex; position: relative; overflow: hidden; margin-bottom: 10px; border-radius: 0.35rem;}
.hot-list .hot-item-thumb{ width:50%; overflow: hidden; border-radius: 0.35rem; border:1px solid #f5f5f5; flex:0 0 auto; display: flex; align-items: center;}
.hot-list .hot-item-thumb img{ max-width:100%;}
.hot-list .hot-item-info{ min-height: 8rem;justify-content: space-around; padding-left: 1.5rem; display: flex; font-size:0.75rem; flex-direction: column; white-space: nowrap;}
.hot-list .hot-item-info h1{ font-weight: 500; font-size:1rem;}
.hot-list .hot-item-slogan span{ display: inline-block; padding: 0 5px; background-color: #fff4e1; color: #fea100;}
.hot-list .hot-item-info .color-red{ font-size:120%;}
.hot-list .hot-item-tricon{ position: absolute;right:-1.25rem;top:0.85rem;line-height: 2; background-color: #2eafdf; color:#fff;transform:rotate(45deg);width: 8rem; transform-origin: bottom;text-align: center;}

body.has-fix-footer{ padding-bottom: 5.5rem;}

.fix-footer{
    position: fixed;left:0; bottom:0; width: 100%; background-color: #fff; border-top:0.167rem; padding: 1rem 0;
}
.footer-list{ display: flex; justify-content: space-around;}
.footer-list li{ flex:1 1 auto;}
.footer-list .footer-item{ display: flex; flex-direction: column; justify-content: center;align-items: center; grid-gap:3px;}
.footer-list .footer-icon{height:2rem;}
.footer-list[column=c5] li{width:20%;}
.full-nav{
    position: fixed; left:100%;top:0; width:100%; height: 100%; overflow: auto; background-color: #efefef; z-index: 1100;color:#5c5c5c; transition: left 0.35s;
}
.full-nav .titlebar{ background-color: #fff; margin-top:1rem; display: flex; align-items: center; padding: 0.5rem 0;}
.full-nav .titlebar span{ flex:1 1 auto; font-size: 150%; font-weight: 600;  text-align: center; text-indent: -1rem;}
.back-btn{ position: relative; display: inline-block; width:3rem; height: 2rem; cursor: pointer; --color:#5c5c5c}
.back-btn:before,.back-btn:after{
    content:''; position: absolute; left:20%; top:50%; width:1rem;height:0.25rem; background-color:var(--color);
}
.back-btn:before{
    transform: rotate(45deg) translate(0.4rem,0);
}
.back-btn:after{
    transform: rotate(-45deg) translate(0.4rem,0);
}
.nav-cate-title{
    font-size:120%; padding-left:1rem; margin-top:1.5rem; margin-bottom: 0.25rem; font-weight: 600;
}
.full-nav .nav{ background-color: #fff;}
.full-nav-open{
    display: block; left:0;
}
.text-center{ text-align: center;}
.page-titlebar{ display: flex; background-color: #f4524f; color:#fff; align-items: center; padding: 1em 0;}
.page-titlebar .back-btn{ --color:#fff; }
.page-titlebar span{ flex:1 1 auto; font-size:130%; font-weight: 500;}
.page-titlebar .share-icon{width:1em; height: 1em; margin-right: 1em; font-size:1.2rem;}
.page-titlebar .share-icon path{ stroke:#fff; fill:#fff;}
.page-title-center .page-title{ text-align: center; text-indent: -3rem;}
.xm-main-img{padding:1rem;}
.xm-main-img img{max-width: 100%; border-radius: 0.35rem;}
.xm-main-img .placeholder{ min-height: 15rem; border-radius: 0.35rem; background-color:#f4524f ;}
.xm-info-top{ display: flex; align-items: center; padding: 0 1rem 1rem;}
.xm-info-text{ display: flex; flex-direction: column; justify-content: space-between; min-height: 5rem;}
.xm-info-name{ color:#000}
.xm-info-zx{ text-align: right; flex:1 1 auto;}
.xm-info-money span{ color:#b02421; font-size:120%;}
.zx-btn{ display: inline-block; background-color:#b02421; border-radius: 1em; color:#fff; padding: 0.25em 0.75em;}
.xm-info-main{ background-color: #efefef; padding: 1em 0;}
.xm-info-main .tab-nav{ background-color: #fff;display: flex; justify-content: space-around; color:#646464; font-size:120%; padding:0.5em 0 ;}
.xm-info-title{ padding:1rem; display: flex; align-items: center; color:#404040; font-size:125%;}
.xm-info-title:before{ content:''; display: inline-block;border-left: 0.2em solid #b02421; height: 1em; margin-right: 0.2em;}
.xm-img-list{padding:1rem; background-color: #fff;}
.xm-img-swiper .swiper-wrapper{ transition-timing-function: linear;}
.xm-img-item{ display: flex; background-color: #f46b6a; border-radius: 0.5rem; align-items: center; justify-content: center; color:#fff; min-height: 10rem;overflow: hidden;}
.xm-img-item img{ max-width: 100%; max-height: 100%;}
.xm-grid-list{ display: flex; flex-wrap: wrap; background-color: #fff;}
.xm-grid-item{ width:50%;border-right:1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;padding:1rem 0 1rem 1rem;}
.xm-grid-item:nth-of-type(even){ border-right:0;}
.xm-grid-last{ background-color: #fff;height:1px; width: 100%; margin-top: -1px;}

.xm-info-content{ background-color: #fff; padding: 1rem;}
.xm-info-content h1{ text-align: center; font-size:150%; margin: 0.25em 0;}
.xm-info-content p{ line-height: 1.75;}
.xm-info-title2{padding:1rem; color:#404040; font-size:125%;color:#404040;}
.xm-info-title2 span{display: block; border-bottom: 0.25rem solid #404040; padding-bottom: 0.25rem; }
.xm-recomend-list{padding:1rem; background-color: #fff;}
.xm-recomend-item{ display: flex; }
.xm-rec-thumb{ width:35%; flex:0 0 auto; margin-right: 1rem; background-color: #ffda9a; border-radius: 0.5rem;}
.xm-rec-text{ line-height: 1.5; margin-bottom: 0.5rem;}
.xm-rec-text span{ color:#d82817}
.xm-rec-zan{ background: url(../images/icon-zan.png) no-repeat left center; background-size:1rem auto; padding-left:1.2rem;}
.zx-btn-fw{ background:#f4524f; font-size:125%; font-weight:600; width:100%; display: block; padding:1em 0; text-align: center; letter-spacing: 2px; color:#fff;}
.lesson-title{ background-color: #f46b6a; color:#fff; display: flex; align-items: center; justify-content: center; font-size:150%; padding: 1.5rem 0; }
.switch-tab-box{background-color: #efefef; padding-top: 10px; }
.switch-tab{ display: flex; background-color: #fff; }
.switch-content{ background:#fff;}
.switch-tab .tab-item { flex:1 1 auto; text-align: center;}
.switch-tab .tab-item span{ display: inline-block; border-bottom: 0.25rem solid transparent; padding:0.5em 0.2em;}
.switch-tab .tab-active span{border-bottom-color: #b02421; color:#f46b6a;}
.lesson-chapter-item{ margin:0.5rem 0;background-color: #efefef; display: flex; padding:1rem;}
.chapter-thumb{ width:33%;flex:0 0 auto; margin-right: 1rem; background-color: #f46b6a; border-radius: 0.5rem; min-height: 6rem; }

.chapter-info{ display: flex; flex-direction: column; justify-content: space-between;padding: 2px 0;}
.chapter-info-icon{ font-size:12px; display: flex; grid-gap:15px;}
.chapter-views{ background:url(../images/icon-view.png) left center no-repeat; background-size: 1em auto; padding-left: 1.2em; display: inline-block; }

.page-list{ background: #efefef}
.page-list-titlebar{ display: flex;background-color: #f4524f;color: #fff;align-items: center;padding: 1em 0;}
.page-list-titlebar .back-btn{ --color:#fff; }
.page-list-titlebar span{ flex:1 1 auto; font-size:130%; font-weight: 500;}
.page-list-titlebar .share-icon{width:1em; height: 1em; margin-right: 1em; font-size:1.2rem;}
.page-list-titlebar .share-icon path{ stroke:#fff; fill:#fff;}
.page-category-name{ padding:1rem; display: flex; align-items: center; color:#404040; font-size:125%;}
.page-category-name:before{ content:''; display: inline-block;border-left: 0.2em solid #b02421; height: 1em; margin-right: 0.2em;}
.archive-list{ padding:0 1em 1em;}
.archive-list-item{ padding:1.25rem 0.75rem; background: #fff; display: flex; flex-direction: column; position: relative; overflow: hidden; margin-bottom: 10px; border-radius: 0.35rem;}
.archive-list-title{ font-weight: 500;font-size: 1rem;text-align: center; margin: 0.5em 0;}
.archive-list-desc{ font-size: 0.75rem;  text-indent: 2em; line-height: 1.75; padding: 0.5em 0;}
.archive-list-desc:empty{ display: none;}
.archive-list-addon{ color: #787878; }
.load-more-wrap{ text-align: center;}
.load-more{ display: inline-block; background: #fff; border-radius: 1em; color:#787878; padding: 0.5em 2em; }
.iconfont{ font-size: inherit!important;}
.load-more .iconfont{margin-right: 5px; display: inline-block}

.lesson-list{  padding:1em 1em; }
.lesson-item{ padding:0.85rem 0.75rem; background: #fff; display: flex;  position: relative; overflow: hidden; margin-bottom: 10px; border-radius: 0.35rem;}
.lesson-item-thumb{ width: 28%; max-width: 230px; display: flex; flex:0 0 auto;margin-right: 1em; align-items: center; justify-content: center;}
.lesson-item-thumb img{max-width: 100%; max-height: 100%;}
.lesson-item-title{ font-size: 1.2em;margin-bottom: 10px;}
.lesson-item-desc{ margin-bottom: 10px;}
.lesson-tags{ display: flex; }
.lesson-tags .ui-tag{ margin-right:8px;}

.lesson-chap-page{ background: #f5f5f5;}
.lession-image{ min-height: 2rem; display: flex; align-items: center; justify-content: center;}
.lession-image img{ max-width: 100%;}
.lesson-chap-title{ font-size:150%; margin:0 0 0.5em 0; background:#fff; padding:0.5em 1em;}
.lesson-chap-list{ padding:0.5em 1em 0.5em 1em; box-sizing:border-box; }
.lesson-chap-list .chap-item{ margin-bottom: 10px; position: relative}
.lesson-chap-list .chap-item a{border-radius: 5px; display: flex; border: 1px solid #e8e8e8; box-sizing: border-box; background: #fff; padding: 1.5em 0.5em 1em;  }
.lesson-chap-list .chap-item .chap-name{ flex:1 1 auto;}

.lesson-chap-list .chap-free:after{ content:'免费'; position: absolute; left:0;top:0; background: #e74c3c; color:#fff; padding: 2px; font-size:80%;}
.chap-type-icon{ align-self: baseline; font-style: normal; }

.chap-icon-video:before{ content:'[视频]'; margin-right:2px; font-size:90%; align-self: baseline; color:#dc8a09;}
.chap-icon-article:before{ content:'[文档]'; margin-right:2px; font-size:90%; align-self: baseline; color:#2196f3;}
.chap-icon-audio:before{ content:'[音频]'; margin-right:2px; font-size:90%; align-self: baseline;color:#4caf50;}
.chap-icon-imageset:before{ content:'[图集]'; margin-right:2px; font-size:90%; align-self: baseline;color:#0C7FCC;}
.lesson-chap-list .chap-item  .process{ font-size:75%; color:#AEAEAE}


.video-panel{padding-top:300px;}
.video-box{ position:fixed; top:0; z-index: 100; overflow: hidden; height: 300px; width: 100%;max-width: 750px;}

.video-top{ background:#fff;}
.video-title{ padding:1em 0.5em; font-size: 1.5em;}
.video-nav{ display: flex; align-items: center; padding-bottom: 1em;}
.back-to-menu{padding: 0 0.75em; flex: 0 0 auto;}
.back-to-menu a{ color: #dc8a09}
.relatived-list{  padding:0em 1em; flex:1 1 auto;}
.relatived-list li{ padding:0.5em 0;  box-sizing:border-box; }
.relatived-list li a{ display:inline-block; padding-right:1.5em; background-size:1em; background-repeat:no-repeat; background-position:right center;}
.relatived-list li a.prev{ background-image:url(../images/prev.jpg); color:#e60012;}
.relatived-list li a.next{ background-image:url(../images/next.jpg);}
.video-article{ padding:0.75em 0; line-height:1.75; position: relative;}
.video-article-content{ background: #fff; padding: 0.75em; position: relative;}

.chapter-panel{}
.chapter-top{ background:#fff;}
.chapter-title{ padding:1em 0.5em; font-size: 1.5em;}
.chapter-nav{ display: flex; align-items: center; padding-bottom: 1em;}
.chapter-body{ padding:0.75em 0; line-height:1.75; position: relative;}
.chapter-content{ background: #fff; padding: 0.75em; position: relative;}


.chapter-mask,.article-mask{ position: absolute; background-size:contain; z-index: 1; top:0; width:100%; height: 100%; left:0; opacity: 0.25;}

.imageset-content{background-color:#fff; font-size:125%;}
.imageset-content p{ margin: 0.75em 0;}
.imageset-content img{ vertical-align: middle;}
.imageset-content .show-image{ display: block; max-width: 100%; margin: 0 auto 1em;}
.chapter-content-imageset{ display: grid; gap:10px; grid-template-columns:1fr 1fr; text-align: center}
.chapter-content-imageset .imageset-item{}
.chapter-content-imageset .imageset-item img{max-width: 100%; min-height: 2em;}
.coupon-list{ padding: 1em; color: #fff;}
.coupon-list-item{padding:0.85rem 0; background: #f4524f; display: flex;  position: relative; overflow: hidden; margin-bottom: 15px; border-radius: 0.35rem;}
.coupon-item-value{ flex:0 0 auto; display: flex;align-items: center;font-size:200%; width: 3em; justify-content: center}
.coupon-item-value .coupon-item-unit{ font-size:50%}
.coupon-item-title{ font-size:1.35rem;}
.coupon-item-center{ border-left:1px dashed #fff; margin:-0.85rem 8px; position: relative; }
.coupon-item-center:after,.coupon-item-center:before {background: #fff;font-size:10px;border-radius: 50%;content: "";display: block;height: 1em;left:-0.5em;position: absolute;width: 1em}
.coupon-item-status{ position: absolute;}
.coupon-item-used{ background: #00c78e}
.coupon-item-expired{ background: #afafaf}
.coupon-item-status{ pointer-events: none; right:0;top:0;bottom:0; background: no-repeat right center; width: 50%; background-size:auto 100%; }
.coupon-item-used .coupon-item-status{ background-image: url(../images/coupon-used.png);}
.coupon-item-expired .coupon-item-status{ background-image: url(../images/coupon-expired.png);}
.coupon-item-center:before {
    top: -0.5em
}

.coupon-item-center:after {
    bottom: -0.5em
}
.coupon-item-status .ui-tag{ margin-top: 5px;}
.list-tab-nav { display: flex; font-size: 120%;margin-top: 10px;}
.list-tab-nav .tab-item{ flex:1 1 auto; text-align: center; padding: 0.5em 0;border-bottom:1px solid #e5e5e5;}
.list-tab-nav .tab-item-active{border-width: 2px; border-color:#07f; color: #07f;}

.page-flex{ display: flex; flex-direction: column;}
.image-view-stage{ display: flex; flex:1 1 auto;}
.image-view-stage .image-view-list{ flex:1 1 auto;}
.image-view-list{ padding: 1em;  background: #efefef;}
.list-side-nav{ background: #fff;}
.list-side-nav-sticky{ position: sticky; top:0;}
.list-side-nav .list-side-navitem{ min-width: 7em; display: block; line-height: 2.5; font-size:120%; padding: 0.2em 1em;color: #010101;}
.list-side-nav .on{ background: #efefef; }
.image-view-thumb{ width: 25%;flex:0 0 auto; max-height: 9em; margin-right: 10px; display: flex; justify-content: center; align-items: center;}
.image-view-thumb img{ max-height: 100%; max-width: 100%; border-radius: 5px;}
.image-view-list-item {display: flex; margin-bottom: 10px; background: #fff; border-radius: 5px;padding: 0.5em;color: #010101;}
.image-view-info{ flex:1 1 auto;}
.image-vertical-list .image-view-list-item{ flex-direction: column; }
.image-vertical-list .image-view-thumb{ width: auto; max-height: initial; margin-right: 0;}
.image-view-buyLinks{ display: flex;}
.image-view-buyLinks .buylink-item{ padding:0.4em 0.75em; border-radius: 5px; background: #ff1c1c; color: #fff;}
.image-view-buyLinks .buylink-item:not(:first-child){ margin-left: 10px;}





@keyframes Rolling {
    0% {
        transform:rotate(0deg);
    }

    to {
        transform:rotate(359deg);
    }
}
.animation-rolling{
    animation:Rolling 1s linear infinite ;
}


@media (min-width:751px){
    html{
        font-size:24px;
    }
    .fix-footer{
        width: 750px; left:50%; transform: translateX(-50%);
    }
}
@media (max-width:375px){
    html{
        font-size:12px;
    }
}