@import url(//at.alicdn.com/t/font_1880707_i2nsilc35d.css);
@import url(/include/css/pub.css);
#newBridge { display: none !important; }

.pv-log-error { display: none !important }

.overparent { width: 100% }
.overdot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block !important; width: 100%; }
.smalltitle { white-space: nowrap }

.pv-controls-right div { display: block }

.mydialogvocab .el-dialog { width: 80%; max-width: 500px; height: 80%; max-height: 400px }
.mydialogvocab .el-dialog__body { height: 100% }

.el-cascader-panel .el-radio { position: absolute; width: calc(100% - 50px); height: 100%; top: 0px; left: 20px }
    .el-cascader-panel .el-radio .el-radio__input { display: none }

.transmask { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; }
.winmask { position: absolute; width: 100%; height: 100%; background: #000; top: 0px; left: 0px; z-index: 9999 }
.myspace { width: 10px; display: inline-block }

.transiderightdefault { width: 510px; }
.transideright { transition: all .5s ease; transform-origin: center; width: 60px; }
.transiderightback { transition: all .5s ease; transform-origin: center; width: 510px; }

.polyvvideowrap { width: 100%; background-color: #000; border-radius: 20px; }
    .polyvvideowrap .winmask { border-radius: 20px }
.polyvvideobg { width: 100%; padding-bottom: 56.25%; position: relative }
.polyvvideo { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; }

.appfull { position: fixed; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-flow: column nowrap }
    .appfull .realwrap { width: 100%; padding-left: 20px; padding-right: 20px; }

.appnormal .realwrap { width: 100%; max-width: 1240px; padding-left: 20px; padding-right: 20px; margin: 0 auto; }
.mainbody { width: 100%; flex-flow: column nowrap }
.appfull .mainbody { width: 100%; height: calc(100% - 132px); flex-flow: column nowrap; background: #3D3D3D }

.mainmobile { width: 100%; max-width: 750px; margin: 0 auto; flex-flow: column nowrap }
.subwrap { width: 100%; padding-top: 20px; padding-bottom: 30px; background-color: #f3f5f7 }
.subbody { position: relative }

.concenter { width: 100%; height: 100%; justify-content: center; align-items: center }
    .concenter img { max-width: 90%; max-height: 90% }

.listbtn { display: inline-block; padding: 0px 10px; height: 24px; line-height: 24px; background: #1dacfa; border-radius: 6px; color: #FFF !important }

.btn1 { display: inline-block; padding-left: 15px; padding-right: 15px; height: 30px; line-height: 30px; border-radius: 5px; background-color: #e3aa24; color: #FFF; font-size: 14px; }
    .btn1:hover { color: #FFF; }

.imglinkzoom { position: relative; display: inline-block; overflow: hidden }
    .imglinkzoom .imgzoom { display: block; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; overflow: hidden }
        .imglinkzoom .imgzoom img { width: 100%; height: 100%; transition: all .5s ease; }
            .imglinkzoom .imgzoom img:hover { transform: scale(1.1) }

.header { width: 100%; flex-flow: column nowrap }
.langbarwrap { width: 100%; }
.appfull .langbarwrap { background-color: #666; height: 30px; line-height: 30px; }
.appnormal .langbarwrap { background-color: #F2F2f2; height: 40px; line-height: 40px; }
.langbar { height: 100%; justify-content: flex-end; font-size: 16px; color: #808080 }
    .langbar span { display: inline-block; padding-left: 10px; padding-right: 10px; }
.appfull .langbar a { font-size: 16px; color: #FFFFFF }
.appnormal .langbar a { font-size: 16px; color: #808080 }

.langbar a.cs, .langbar a:hover { color: #e2a824 }
.topbarwrap { width: 100%; }
.appfull .topbarwrap { background-color: #2F2F2F; padding-top: 10px; height: 62px; }
.appnormal .topbarwrap { background-color: #FFF; padding-top: 30px; height: 102px; }
.topbarbox { width: 100%; }
.appfull .topbarbox { height: 52px; background-color: #2F2F2F; }
.appnormal .topbarbox { height: 72px; background-color: #FFF; }
.topfixed { position: fixed; top: 0px; left: 0px; z-index: 99999; box-shadow: 5px 5px 10px 0px #CCC; }
.appfull .topfixed { padding-top: 5px; }
.appnormal .topfixed { padding-top: 15px; }

.topbar { height: 100%; justify-content: space-between; font-size: 16px; }

    .topbar .logo { height: 42px; overflow: hidden }
        .topbar .logo img { height: 100%; }
    .topbar .nav { }
        .topbar .nav ul { }
            .topbar .nav ul li { margin-left: 40px; position: relative; line-height: 42px; }
            .topbar .nav ul .msg .iconfont { color: #e3aa24; font-size: 20px; }
            .topbar .nav ul .me { display: inline-block; width: 80px; padding-left: 0px; line-height: 16px; text-align: right; font-size: 12px; text-align: center; position: relative; margin-top: -10px; }
                .topbar .nav ul .me img { width: 40px; height: 40px; border-radius: 20px; }
.appfull .topbar .nav ul .me .nickname { display: none }
.topfixed .topbar .nav .nickname { display: none }
.topbar .nav ul li span { display: inline-block; padding-left: 5px; padding-right: 5px; }
.topbar .nav ul li a { color: #4D4D4D; display: block; line-height: 42px; }

.appfull .topbar .nav ul li a { color: #FFF; }
.appnormal .topbar .nav ul li a { color: #4D4D4D; }

.topbar .nav ul li .navmore { width: 180px; position: absolute; left: -40px; z-index: 9999; box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2); padding-bottom: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

.appfull .topbar .nav ul li .navmore { top: 46px; }
.appnormal .topbar .nav ul li .navmore { top: 66px; }

.appfull .topfixed .topbar .nav ul li .navmore { top: 41px; }
.appnormal .topfixed .topbar .nav ul li .navmore { top: 51px; }

.topbar .nav ul li .navmore.menav { left: -80px; width: 160px; }
.topbar .nav ul li .navmore dl { width: 100%; flex-flow: column nowrap }
    .topbar .nav ul li .navmore dl dd { width: 100%; }
        .topbar .nav ul li .navmore dl dd a { font-size: 14px; color: #9A9A9A; display: inline-block; height: 40px; line-height: 40px; width: 100%; padding-left: 40px; background-color: #FFF; }
            .topbar .nav ul li .navmore dl dd a:hover, .topbar .nav ul li .navmore dl dd a.cs { color: #e2a824 }
    .topbar .nav ul li .navmore dl .mem a { padding-left: 20px }
        .topbar .nav ul li .navmore dl .mem a .iconfont { color: #e2a824; display: inline-block; width: 14px; font-size: 14px; padding-right: 10px; }
.topbar .nav ul li a.cs, .topbar .nav ul li a:hover { color: #e2a824 }
.topbar .navsmall { display: none; position: relative; font-size: 14px; }
    .topbar .navsmall .navmenu { width: 40px; height: 40px; margin-right: 20px; }
        .topbar .navsmall .navmenu .iconfont { font-size: 40px; }
        .topbar .navsmall .navmenu img { width: 40px; height: 40px; border-radius: 50% }
    .topbar .navsmall .navinfo { width: 180px; position: absolute; z-index: 10001; right: -20px; top: 66px; background-color: #FFF; box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2); padding-bottom: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

        .topbar .navsmall .navinfo ul { width: 100%; flex-flow: column nowrap }
            .topbar .navsmall .navinfo ul li { width: 100%; line-height: 42px; }
                .topbar .navsmall .navinfo ul li span { display: inline-block; padding-left: 5px; padding-right: 5px; }
                .topbar .navsmall .navinfo ul li a { color: #4D4D4D; display: inline-block; width: 100%; line-height: 42px; padding-left: 20px }
                    .topbar .navsmall .navinfo ul li a .iconfont { color: #e2a824; display: inline-block; width: 14px; font-size: 14px; padding-right: 10px; }
            .topbar .navsmall .navinfo ul .navlogin { padding-left: 40px; }
                .topbar .navsmall .navinfo ul .navlogin a { width: auto; padding: 0 }

            .topbar .navsmall .navinfo ul li .navmore { width: 180px; position: absolute; top: 0px; right: 180px; z-index: 9999; background-color: #FFF; box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2); padding-bottom: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
                .topbar .navsmall .navinfo ul li .navmore dl { width: 100%; flex-flow: column nowrap }
                    .topbar .navsmall .navinfo ul li .navmore dl dd { width: 100%; }
                        .topbar .navsmall .navinfo ul li .navmore dl dd a { font-size: 14px; color: #9A9A9A; display: inline-block; height: 40px; line-height: 40px; width: 100%; padding-left: 40px; background-color: #FFF; }
                            .topbar .navsmall .navinfo ul li .navmore dl dd a:hover, .topbar .navsmall .navinfo ul li .navmore dl dd a.cs { color: #e2a824 }
                    .topbar .navsmall .navinfo ul li .navmore dl .mem a { padding-left: 20px }
                        .topbar .navsmall .navinfo ul li .navmore dl .mem a .iconfont { color: #e2a824; display: inline-block; width: 14px; font-size: 14px; padding-right: 10px; }
            .topbar .navsmall .navinfo ul li a.cs, .topbar .navsmall .navinfo ul li a:hover { color: #e2a824 }


.appnormal .footer { width: 100%; background: #000000 url(include/images/footerbg.png); min-height: 48px; padding-bottom: 10px; padding-top: 15px; }
    .appnormal .footer a { color: #FFF; }
    .appnormal .footer .copyright { color: #FFF; }
.appfull .footer { width: 100%; background: #2f2f2f; height: 40px; align-items: center; line-height: 20px; }
    .appfull .footer a { color: #B3B3B3; }
    .appfull .footer .copyright { color: #B3B3B3; }
.footer .copyright { color: #FFF; width: 100%; justify-content: center; font-size: 14px; text-align: center }

.subframe { width: 100%; height: 100%; overflow: hidden; border: 0; margin: 0; padding: 0 }
.subfull { position: fixed; left: 30px; top: 30px; width: calc(100% - 60px); height: calc(100% - 60px); z-index: 10000 }
.subfullmask { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-color: #FFF }
.subclose { position: fixed; z-index: 10001; right: 20px; top: 20px; }
    .subclose a { display: block; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; text-align: center; background-color: rgba(0,0,0,.7) }
        .subclose a i { font-size: 20px; color: #FFF; margin-top: 5px; }

.banner { width: 100%; position: relative; overflow: hidden; }
    .banner .bannerimg { width: 100%; line-height: 0; }
        .banner .bannerimg img { width: 100%; }
    .banner .bannerimgbg { width: 100%; height: 250px; background-size: cover; background-position: center center; background-repeat: no-repeat }
    .banner .sloganwrap { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; flex-flow: column nowrap; justify-content: flex-end }
    .banner .slogan { padding: 60px 70px; background-color: rgba(4,27,51,0.7); font-size: 26px; color: #FFF; line-height: 40px; }

    .banner .sloganboxcollege { height: 100%; }
    .banner .slogancollege { padding: 0px 50px; height: 100%; max-width: 70%; align-items: center; background-color: rgba(4,27,51,0.7); font-size: 20px; color: #FFF; line-height: 40px; }

    .banner .bannertitle { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; flex-flow: column nowrap; align-items: center; justify-content: center; color: #FFF }
        .banner .bannertitle .main { font-size: 40px; color: #e3aa24; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px solid #FFF }
        .banner .bannertitle .sub { font-size: 24px; color: #FFF }

.infowrap { width: 100%; flex-flow: column nowrap; padding-top: 40px; }
.infowrap2 { width: 100%; flex-flow: column nowrap; padding-bottom: 40px; }
.infobox { flex-flow: column nowrap }
    .infobox .title { width: 100%; padding-bottom: 30px; flex-flow: column nowrap; position: relative }
        .infobox .title .word { font-size: 30px; color: #4D4D4D; padding-bottom: 20px; justify-content: center; }
        .infobox .title .line { justify-content: center; }
            .infobox .title .line span { width: 50px; height: 3px; overflow: hidden; background-color: #e2a824; }
.infotype1 { width: 100%; padding-top: 40px; padding-bottom: 40px; background-color: #FFF }
    .infotype1 .infobox { box-shadow: 5px 5px 10px 0px #CCC; border-radius: 10px; }
    .infotype1 .title { margin-top: -23px; }
        .infotype1 .title .word span { background-color: #FFF; display: inline-block; padding-left: 30px; padding-right: 30px; }
    .infotype1 .content { width: 100%; padding: 0px 80px 50px; line-height: 27px; }
.infotype2 { width: 100%; padding-top: 40px; padding-bottom: 40px; background-color: #FFF }
    .infotype2 .swiper { width: 100%; overflow: hidden }
    .infotype2 .swiperbtn { width: 100%; padding-top: 30px; justify-content: center }
        .infotype2 .swiperbtn a { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: #CCC; border-radius: 50%; margin-left: 10px; margin-right: 10px; color: #FFF }
            .infotype2 .swiperbtn a:hover { color: #e2a824 }
            .infotype2 .swiperbtn a i { font-size: 20px; }
.infotype3 { width: 100%; padding-top: 40px; padding-bottom: 40px; background-color: #F4F8FB }
    .infotype3 .swipercon { width: 100%; flex-flow: row nowrap; align-items: center }
    .infotype3 .swiperleft { width: 80px; }
        .infotype3 .swiperleft a { color: #CCC; }
            .infotype3 .swiperleft a:hover { color: #e2a824 }
            .infotype3 .swiperleft a i { font-size: 30px; }
    .infotype3 .swiper { width: calc(100% - 160px); overflow: hidden; font-size: 16px; color: #666 }
    .infotype3 .swiperright { width: 80px; justify-content: flex-end }
        .infotype3 .swiperright a { color: #CCC; }
            .infotype3 .swiperright a:hover { color: #e2a824 }
            .infotype3 .swiperright a i { font-size: 30px; }

.infotype4 { width: 100%; padding-top: 40px; padding-bottom: 20px; background-color: #F4F8FB }
    .infotype4 .infocollege { width: 100%; flex-flow: row wrap; justify-content: space-between }
        .infotype4 .infocollege li { width: calc(50% - 10px); margin-bottom: 20px; box-shadow: 5px 5px 10px 0px #CCC; border-bottom-right-radius: 10px; }
            .infotype4 .infocollege li dl { width: 100%; align-items: center; }
                .infotype4 .infocollege li dl dt { width: 35%; line-height: 0px; }
                    .infotype4 .infocollege li dl dt img { width: 100%; }
                .infotype4 .infocollege li dl dd { width: 65%; padding-left: 10%; flex-flow: column nowrap }
                    .infotype4 .infocollege li dl dd span { display: block }
                    .infotype4 .infocollege li dl dd .a { }
                        .infotype4 .infocollege li dl dd .a img { height: 100%; max-height: 42px; }
                    .infotype4 .infocollege li dl dd .b { margin-top: 15px; margin-bottom: 45px; font-size: 24px; }
                        .infotype4 .infocollege li dl dd .b a { color: #808080 }
                            .infotype4 .infocollege li dl dd .b a:hover { color: #e2a824; }
                    .infotype4 .infocollege li dl dd .c a { display: inline-block; width: 90px; height: 30px; line-height: 30px; background-color: #e2a824; color: #FFF; font-size: 14px; text-align: center; border-radius: 15px; }

.infotype6 { width: 100%; padding-top: 40px; padding-bottom: 40px; background-color: #FFF }
    .infotype6 .title { margin-top: 0px; padding-bottom: 15px; }
        .infotype6 .title .word span { background-color: #FFF; display: inline-block; padding-left: 30px; padding-right: 30px; }
    .infotype6 .subtitle { font-size: 24px; width: 100%; justify-content: center; text-align: center; margin-bottom: 30px; }
    .infotype6 .content { width: 100%; padding: 0px; line-height: 27px; }

.infowrapcollege { width: 100%; padding-top: 40px; background-color: #F4F8FB; flex-flow: column nowrap }
.infotypecollege { width: 100%; padding-top: 40px; padding-bottom: 40px; background-color: #F4F8FB }
.levellist { width: 100%; flex-flow: column nowrap; }
    .levellist li { width: 100%; padding: 40px 30px 0px; margin-bottom: 40px; box-shadow: 5px 5px 10px 0px #CCC; border-radius: 10px; flex-flow: column nowrap; background-color: #FFF; flex: none }
        .levellist li .levelitem { width: 100%; flow-from: row nowrap; align-items: center; margin-bottom: 40px; flex: none }
            .levellist li .levelitem dt { width: 450px; padding-right: 50px; }
                .levellist li .levelitem dt img { width: 400px }
            .levellist li .levelitem dd { width: 30%; flex: auto; flex-flow: column nowrap }
                .levellist li .levelitem dd .a { font-size: 26px; color: #666; padding-bottom: 30px; }
                .levellist li .levelitem dd a.a { color: #e2a824 }
                .levellist li .levelitem dd .b { font-size: 16px; color: #808080; padding-bottom: 40px; }
                .levellist li .levelitem dd .c a { display: inline-block; width: 150px; height: 30px; line-height: 30px; background-color: #e2a824; color: #FFF; font-size: 14px; text-align: center; border-radius: 15px; }
                    .levellist li .levelitem dd .c a .iconfont { font-size: 14px; margin-left: 15px; }
        .levellist li .courselistwrap { width: 100%; overflow: hidden }
        .levellist li .courselist { width: 84%; margin: 0px 8% 40px; padding: 30px 50px 0px; flex-flow: row wrap; background-color: #EEE; border-radius: 10px; overflow: hidden }
            .levellist li .courselist dl { width: 50%; margin-bottom: 30px; align-items: flex-start }
                .levellist li .courselist dl dt { margin-top: 5px; margin-right: 10px; width: 80px; flex: 0 0 auto }
                    .levellist li .courselist dl dt span { display: inline-block; padding: 2px 5px; width: 100%; text-align: center; background-color: #6c86a1; color: #FFF; font-size: 14px; }
                .levellist li .courselist dl dd { font-size: 14px; color: #808080; line-height: 20px; flex-flow: column nowrap }
                .levellist li .courselist dl .single { margin-top: 6px; }
                .levellist li .courselist dl dd a { display: flex }
                .levellist li .courselist dl dd .iconfont { font-size: 22px; margin-left: 5px; color: #e2a824 }


.infomore { display: block; padding-left: 32px; padding-right: 32px; font-size: 18px; color: #FFF; background-color: #f49928; line-height: 32px; border-radius: 16px; }
    .infomore:hover { color: #FFF; background-color: #FFB559 }

.infopage { width: 100%; flex-flow: column nowrap; margin-bottom: 60px; }
    .infopage .infonews { width: 100%; flex-flow: column nowrap; margin-top: 0px; background-color: #FFF; color: #1a1a1a; }
        .infopage .infonews:nth-child(2n) { background-color: #2f2f2f; color: #FFF; }
        .infopage .infonews .infosub { width: 100%; justify-content: space-between }
        .infopage .infonews .subtitle { margin-bottom: 30px; flex-flow: row nowrap; justify-content: space-between; position: relative; }
            .infopage .infonews .subtitle .word { font-size: 24px; line-height: 24px; padding-left: 15px; color: #002B46; border-left: 10px solid #f49928; align-items: center }

        .infopage .infonews .editor2 { color: #FFF }
        .infopage .infonews .infosub { flex-flow: row-reverse nowrap }
        .infopage .infonews .infosubnews .b { padding-left: 20px; font-size: 16px; color: #999999 }
        .infopage .infonews .infosubnews .c { padding-left: 20px; font-size: 16px; color: #1a1a1a; line-height: 2em; min-height: 80px; align-items: flex-start }
        .infopage .infonews .infosubnews .d { padding-left: 20px; justify-content: flex-end }
            .infopage .infonews .infosubnews .d a { font-size: 16px; color: #f49928 }
        .infopage .infonews .infosubnewsimg { width: 48%; flex-flow: column nowrap; margin-top: 60px; margin-bottom: 60px; overflow: hidden }
            .infopage .infonews .infosubnewsimg .infosubnewsimg { width: 100%; }

        .infopage .infonews:nth-child(2n) .subtitle .word { color: #FFF; }
        .infopage .infonews:nth-child(2n) .infosub { flex-flow: row nowrap }
        .infopage .infonews:nth-child(2n) .infosubnews .a { color: #FFF }
            .infopage .infonews:nth-child(2n) .infosubnews .a a { color: #FFF }
        .infopage .infonews:nth-child(2n) .infosubnews .b { color: #FFF }
        .infopage .infonews:nth-child(2n) .infosubnews .c { color: #FFF; }



.infosub .infosubmewswrap { width: 48%; flex-flow: column nowrap; padding-top: 60px; padding-bottom: 60px; }
.infosubnews { width: 100%; flex-flow: column nowrap }
    .infosubnews dd { width: 100%; padding-bottom: 10px; align-items: center; }
    .infosubnews .a { font-size: 24px; color: #1a1a1a }
        .infosubnews .a a { font-size: 24px; color: #1a1a1a; width: calc(100% - 30px) }
        .infosubnews .a .iconfont { font-size: 12px; margin-right: 8px; }


.infosubnewsall { width: 100%; justify-content: flex-end; }
.infosubnewsmorewrap { box-shadow: 5px 5px 10px 0px #ccc; margin-bottom: 80px !important; position: relative }
.infosubnewsmore { flex-flow: row wrap; justify-content: space-between; width: 100%; padding-left: 40px; padding-right: 40px; position: relative; margin-top: -10px; background-color: #FFF }
    .infosubnewsmore .infosubmewswrap { width: 48%; flex-flow: column nowrap; padding-bottom: 60px; }

.infoblank { width: 100%; height: 80px }

.infostu1 { width: 100%; flex-flow: column nowrap }
.infostu1item { width: 100%; position: relative; box-shadow: 5px 5px 10px 0px #CCC; border-radius: 10px; margin-top: 80px; flex-flow: row nowrap; align-items: flex-start; background-color: #FFF }
.infostu1img { width: 200px; margin-left: 30px; margin-right: 30px; margin-bottom: 40px; position: relative; margin-top: -30px; flex: none }
    .infostu1img img { width: 100%; border-radius: 10px; position: relative; z-index: 2 }
    .infostu1img .infostu1imgbg { width: 100%; height: 100%; position: absolute; left: -8px; top: 8px; background-color: #ff4906; border-radius: 10px; z-index: 1 }
.infostu1con { width: 50%; flex: auto; margin-top: 40px; color: #4c4c4c; font-size: 16px; line-height: 2em; padding-right: 40px; padding-left: 40px; }
.infostu1conname { width: 100%; justify-content: flex-end; margin-bottom: 30px; text-align: right }
.infostu1item:first-child { margin-top: 40px }
.infostu1item:nth-child(2n) { flex-flow: row-reverse nowrap }
    .infostu1item:nth-child(2n) .infostu1img .infostu1imgbg { left: 8px }

.infostu2 { width: 100%; }
    .infostu2 dl { width: 100%; flex-flow: row wrap; justify-content: space-between }
        .infostu2 dl dd { width: calc(25% - 20px) }
        .infostu2 dl .infostu2item { margin-top: 20px; margin-bottom: 20px; box-shadow: 5px 5px 10px 0px #CCC; border-top-left-radius: 50%; border-top-right-radius: 50% }
            .infostu2 dl .infostu2item img { width: 100% }

.infostu3 { width: 100%; box-shadow: 5px 5px 10px 0px #CCC; }
    .infostu3 img { width: 100% }

.pagemain { padding-top: 80px; flex: 0 0 auto }
.pagecontact { width: 100%; padding-bottom: 80px; align-items: center }
    .pagecontact .map { width: 50%; }
        .pagecontact .map .mapwrap { width: 100%; height: 400px; }
    .pagecontact .info { width: 50%; padding-left: 8% }
        .pagecontact .info em { width: 40px; display: inline-block; font-size: 20px; }

.pagenews { width: 100%; padding-bottom: 80px; }
    .pagenews .listwrap { width: calc(100% - 360px); flex-flow: column nowrap; }
    .pagenews .list { width: 100%; flex-flow: column nowrap; flex: 0 0 auto }
        .pagenews .list ul { width: 100%; padding-bottom: 40px; border-bottom: 1px dotted #e6e6e6; margin-bottom: 40px; flex: 0 0 auto }
            .pagenews .list ul .newscover { width: 35%; padding-right: 5%; }
                .pagenews .list ul .newscover img { width: 100%; }
            .pagenews .list ul .newssimple { width: 65%; }
                .pagenews .list ul .newssimple dl { width: 100%; flex-flow: column nowrap }
                    .pagenews .list ul .newssimple dl dd { width: 100%; padding-bottom: 20px; line-height: 20px; }
                    .pagenews .list ul .newssimple dl .a, .pagenews .list ul .newssimple dl .a a { font-size: 16px; color: #666 }
                    .pagenews .list ul .newssimple dl .b { font-size: 14px; color: #999 }
                    .pagenews .list ul .newssimple dl .c { font-size: 12px; color: #999; line-height: 25px; }
                    .pagenews .list ul .newssimple dl .d, .pagenews .list ul .newssimple dl .d a { font-size: 12px; color: #e3aa24; }

    .pagenews .info { width: calc(100% - 360px); flex-flow: column nowrap }
        .pagenews .info .title { font-size: 18px; line-height: 40px; align-items: center; padding-bottom: 30px; flex-flow: column nowrap }
            .pagenews .info .title .sub { font-size: 14px; }
 .pagenews .info .content { width: 100%;line-height: 40px }

    .pagenews .top { width: 360px; padding-left: 60px; flex-flow: column nowrap; flex: 0 0 auto }
        .pagenews .top .titlewrap { width: 100%; height: 29px; border-bottom: 1px solid #CCC; position: relative; }
        .pagenews .top .title { width: 100%; height: 30px; position: absolute; left: 0px; top: 0px; justify-content: space-between }
            .pagenews .top .title .t { display: inline-block; height: 100%; border-bottom: 2px solid #e3aa24; font-size: 16px; color: #999; }
            .pagenews .top .title .m { color: #999; font-size: 14px; }
                .pagenews .top .title .m a { color: #999; }
        .pagenews .top ul { width: 100%; padding-top: 30px; flex: 0 0 auto }
            .pagenews .top ul .newscover { width: 32%; padding-right: 5%; padding-top: 5px; }
                .pagenews .top ul .newscover img { width: 100%; }
            .pagenews .top ul .newssimple { width: 63%; }
                .pagenews .top ul .newssimple dl { width: 100%; flex-flow: column nowrap }
                    .pagenews .top ul .newssimple dl dd { width: 100%; padding-bottom: 10px; }
                    .pagenews .top ul .newssimple dl .a, .pagenews .top ul .newssimple dl .a a { font-size: 14px; color: #666 }
                    .pagenews .top ul .newssimple dl .b { font-size: 12px; color: #999 }
                    .pagenews .top ul .newssimple dl .d, .pagenews .top ul .newssimple dl .d a { font-size: 12px; color: #e3aa24; }

.poplogin { width: 450px; padding: 20px 0px; background-color: #f5f5f5; font-size: 14px; flex-flow: column nowrap; border-radius: 10px; }
    .poplogin .loginlogo { width: 100%; padding-left: 30px; padding-bottom: 10px; margin-bottom: 30px; border-bottom: 1px solid #e5e5e5; }
    .poplogin dl { width: 100%; flex-flow: column nowrap; padding-left: 45px; padding-right: 45px; }
        .poplogin dl dd { width: 100%; margin-bottom: 30px; }
        .poplogin dl .input { line-height: 40px; }
            .poplogin dl .input .el-input-group__prepend { width: 50px; flex: 0 0 auto; padding: 0; justify-content: center; line-height: 38px; }
            .poplogin dl .input .vcode { width: 200px; }
            .poplogin dl .input .vcodesend { width: 160px; padding-left: 20px; }
                .poplogin dl .input .vcodesend a { background-color: #76bb39; color: #FFF; display: inline-block; width: 100%; height: 40px; line-height: 40px; font-size: 14px; text-align: center; }
                .poplogin dl .input .vcodesend span { background-color: #BBB; color: #FFF; display: inline-block; width: 100%; height: 40px; line-height: 40px; font-size: 14px; text-align: center; }

        .poplogin dl .remeber { padding-left: 18px; margin-bottom: 20px; }
        .poplogin dl .btn { width: 100%; margin-bottom: 20px; }
            .poplogin dl .btn a { display: inline-block; width: 100%; height: 45px; line-height: 45px; font-size: 16px; color: #FFF; text-align: center; background-color: #72af2d; border-radius: 8px; }
                .poplogin dl .btn a:hover { background-color: #ffc600; }
        .poplogin dl .link { justify-content: space-between }
            .poplogin dl .link a { display: inline-block; height: 25px; line-height: 25px; color: #72af2d }
                .poplogin dl .link a .iconfont { font-size: 14px; padding-right: 10px }

.sdlogin { width: 100%; height: 450px; float: left; color: #555; background: #f5f5f5; font-size: 14px; }
    .sdlogin div { float: left; }
.sdloginform { width: 100%; padding-top: 20px; }
    .sdloginform .loginlogo { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 30px; height: 55px; overflow: hidden; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px; }
        .sdloginform .loginlogo img { }

    .sdloginform dl { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 45px; padding-right: 45px; }
        .sdloginform dl .a1 { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 58px; height: 43px; line-height: 40px; border: 1px solid #e5e5e5; background: #FFF url(include/images/bguser.png) no-repeat 10px center; }
            .sdloginform dl .a1 input { width: 98%; height: 40px; padding-left: 58px; border: 0; padding: 0; margin: 0; font-size: 14px; }
        .sdloginform dl .a2 { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height: 43px; line-height: 40px; border: 1px solid #e5e5e5; background: #FFF url(include/images/bgpwd.png) no-repeat 10px center; padding-left: 58px; }
            .sdloginform dl .a2 input { width: 98%; height: 40px; border: 0; padding: 0; margin: 0; font-size: 14px; }

        .sdloginform dl .a3 { width: 50%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height: 43px; line-height: 40px; border: 1px solid #e5e5e5; background: #FFF url(include/images/bgpwd.png) no-repeat 10px center; padding-left: 58px; }
            .sdloginform dl .a3 input { width: 98%; height: 40px; border: 0; padding: 0; margin: 0; font-size: 14px; }
        .sdloginform dl .b { color: #72af2d; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 59px; padding-top: 5px; height: 30px; }
        .sdloginform dl .c { width: 50%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 20px; }
            .sdloginform dl .c a { background-color: #76bb39; color: #FFF; display: inline-block; width: 100%; height: 43px; line-height: 43px; font-size: 14px; text-align: center; }

    .sdloginform .loginremember { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 60px; padding-right: 60px; padding-bottom: 20px; }
    .sdloginform .loginbtn { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 45px; padding-right: 45px; padding-bottom: 20px; text-align: center; }
        .sdloginform .loginbtn a { display: inline-block; width: 100%; height: 45px; line-height: 45px; font-size: 16px; color: #FFF; text-align: center; background-color: #72af2d; border-radius: 8px; }
            .sdloginform .loginbtn a:hover { background-color: #ffc600; }
    .sdloginform .loginlink { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 45px; padding-right: 45px; padding-top: 10px; }
        .sdloginform .loginlink span { float: right; }
        .sdloginform .loginlink a { display: inline-block; height: 25px; line-height: 25px; color: #72af2d }
            .sdloginform .loginlink a.mobile { background: url(include/images/bgmobile.jpg) no-repeat 5px center; padding-left: 30px; }
            .sdloginform .loginlink a.pc { background: url(include/images/bgpc.png) no-repeat 5px center; padding-left: 45px; }

.memnorecord { width: 100%; justify-content: center; padding-top: 230px; margin-top: 70px; margin-bottom: 70px; background: url(include/images/norecord.png) no-repeat center top; font-size: 16px; }

.memnavwrap { background-color: #FFF; width: 300px; padding-bottom: 30px; flex-flow: column nowrap }
    .memnavwrap .memface { width: 100%; padding-top: 50px; padding-bottom: 100px; justify-content: center; text-align: center; background: url(include/images/membg.png) no-repeat; font-size: 14px; color: #4c4c4c; }
        .memnavwrap .memface img { width: 100px; height: 100px; border: 1px solid #eecc7c; border-radius: 50%; margin-bottom: 10px; }
    .memnavwrap .memnav { width: 100%; flex-flow: column nowrap }
        .memnavwrap .memnav dd { width: 100%; padding-top: 2px; padding-bottom: 2px; }
            .memnavwrap .memnav dd a { display: inline-block; width: 100%; height: 48px; line-height: 48px; padding-left: 40px; background-color: #FFF }
                .memnavwrap .memnav dd a .iconfont { color: #e3aa24 }
                .memnavwrap .memnav dd a.cs, .memnavwrap .memnav dd a:hover { background-color: #fcf7ec; }
                .memnavwrap .memnav dd a .iconfont { display: inline-block; width: 16px; padding-right: 10px; }
.meminfo { width: calc(100% - 320px); margin-left: 20px; padding-bottom: 20px; background-color: #FFF; flex-flow: column nowrap }
.memsubnav { width: 100%; height: 53px; margin-bottom: 30px; position: relative; z-index: 1; }
    .memsubnav .navline { width: 100%; height: 51px; border-bottom: 1px solid #e6e6e6; position: absolute; left: 0px; top: 0px; z-index: -1 }
    .memsubnav dl { width: 100%; height: 53px; }
        .memsubnav dl dd { padding-left: 40px; }
            .memsubnav dl dd a { display: inline-block; padding-left: 5px; padding-right: 5px; height: 50px; line-height: 50px; font-size: 1em; color: #4c4c4c; }

                .memsubnav dl dd a.cs, .memsubnav dl dd a:hover { color: #e3aa24; border-bottom: 3px solid #e3aa24 }

    .memsubnav .memnavbox { height: 50px; padding-left: 10px; flex-flow: column nowrap; position: relative }
        .memsubnav .memnavbox .memnavtop { width: 100%; height: 50px; line-height: 50px; }
            .memsubnav .memnavbox .memnavtop .iconfont { font-size: 14px; }
            .memsubnav .memnavbox .memnavtop a { display: inline-block; padding-left: 10px; padding-right: 10px; height: 50px; line-height: 50px; font-size: 1em; color: #e3aa24; }
                .memsubnav .memnavbox .memnavtop a .iconfont { font-size: 16px; margin-right: 10px }
        .memsubnav .memnavbox .memmainnavmore { width: 200px; position: absolute; left: 0px; top: 50px; z-index: 10001; background-color: #FFF; box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2); padding-bottom: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden }
            .memsubnav .memnavbox .memmainnavmore dl { width: 100%; flex-flow: column nowrap; height: auto }
                .memsubnav .memnavbox .memmainnavmore dl dd { width: 100%; }
                    .memsubnav .memnavbox .memmainnavmore dl dd a { display: inline-block; padding-right: 10px; height: 25px; line-height: 25px; font-size: 0.875em; }
                    .memsubnav .memnavbox .memmainnavmore dl dd .iconfont { font-size: 16px; margin-right: 10px }
                    .memsubnav .memnavbox .memmainnavmore dl dd a.cs, .memsubnav .memnavbox .memmainnavmore dl dd a:hover { color: #e3aa24; border-bottom: 0px solid #e3aa24 }

        .memsubnav .memnavbox .memsubnavmore { width: 160px; position: absolute; left: 120px; top: 50px; z-index: 10001; background-color: #FFF; box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2); padding-bottom: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden }
            .memsubnav .memnavbox .memsubnavmore dl { width: 100%; flex-flow: column nowrap; height: auto }
                .memsubnav .memnavbox .memsubnavmore dl dd { width: 100%; }
                    .memsubnav .memnavbox .memsubnavmore dl dd a { display: inline-block; padding-left: 10px; padding-right: 10px; height: 25px; line-height: 25px; font-size: 0.875em; }
                        .memsubnav .memnavbox .memsubnavmore dl dd a.cs, .memsubnav .memnavbox .memsubnavmore dl dd a:hover { color: #e3aa24; border-bottom: 0px solid #e3aa24 }

.memcourse { width: 90%; margin-left: 5%; flex-flow: column nowrap; padding-top: 20px; }
    .memcourse .title { width: 100%; margin-bottom: 10px; font-size: 16px; padding-bottom: 10px; border-bottom: 1px solid #CCC }
    .memcourse .list { width: 100%; flex-flow: row wrap; justify-content: space-between }
        .memcourse .list dl { width: 180px; padding-bottom: 20px; overflow: hidden; flex-flow: column nowrap }
        .memcourse .list .placeholder { height: 0px; padding-bottom: 0px; }
        .memcourse .list dl dt { width: 100%; height: 120px; text-align: center; overflow: hidden }
            .memcourse .list dl dt img { width: 100%; height: 100%; }
        .memcourse .list dl dd { width: 100%; text-align: center }
        .memcourse .list dl .a { padding-top: 10px; padding-bottom: 15px; height: 40px; line-height: 20px; font-size: 0.875em; overflow: hidden; text-align: left }
        .memcourse .list dl .b { text-align: center; font-size: 12px; color: #808080; align-items: center; justify-content: space-between }
            .memcourse .list dl .b .b2 { display: inline-block; width: 60px; background-color: #E5E5E5; height: 10px; border-radius: 5px; margin-top: 2px; margin-right: 10px; font-size: 0px; line-height: 0px; text-align: left; overflow: hidden }
            .memcourse .list dl .b .b2now { display: inline-block; height: 100%; background-color: #72A530; border-radius: 5px; }

.myoptions { width: 90%; margin-left: 5%; margin-bottom: 20px; justify-content: space-between }

    .myoptions .memselect { max-width: 40%; margin-left: 10px; }
        .myoptions .memselect:first-child { margin-left: 0px; }

    .myoptions .myoptionleft { width: 80% }
    .myoptions .myoptionright { width: 20%; max-width: 150px; min-width: 150px; justify-content: flex-end }
        .myoptions .myoptionright .memsearch { width: 100%; }
    .myoptions .el-range-separator { line-height: 18px; padding-right: 10px; }

.el-drawer__body { height: 100% !important }
    .el-drawer__body .mylistwrap { height: calc(100% - 100px); padding: 0px 30px; }
.mylistwrap { width: 100%; flex-flow: column nowrap }
.mylist { width: 90%; margin-left: 5%; font-size: 14px; padding-bottom: 30px; flex-flow: column nowrap }
    .mylist dl { width: 100%; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px dotted #f2f2f2 }
    .mylist .listheader { font-weight: bold; line-height: 20px; margin-bottom: 20px; background-color: #f5f5f5; border-bottom: 0px; }
        .mylist .listheader .sorttitle { cursor: pointer }
        .mylist .listheader .sort { display: flex; flex-flow: column nowrap; justify-content: space-between; height: 20px; width: 8px; line-height: 0px; margin-left: 5px; }
            .mylist .listheader .sort .up { display: inline-block; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid #333; cursor: pointer }
                .mylist .listheader .sort .up.cs { border-bottom: 8px solid #e3aa24; }
            .mylist .listheader .sort .down { display: inline-block; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 8px solid #333; cursor: pointer }
                .mylist .listheader .sort .down.cs { border-top: 8px solid #e3aa24; }

    .mylist .listinfo { width: 100%; flex-flow: column nowrap; min-height: 350px; margin-bottom: 30px; }
    .mylist dl a { color: #E3AB24 }
    .mylist .listinfo dl:nth-child(2n) { background-color: #f5f5f5; }
    .mylist dl dd { justify-content: center; align-items: center; flex: 1 1 auto }

    .mylist .writing dt { width: 120px; justify-content: center; flex: 0 0 auto }
    .mylist .writing .a { width: 160px }
    .mylist .writing .b { width: 120px }
    .mylist .writing .c { width: 120px }
    .mylist .writing .d { width: 120px; }
    .mylist .writing .e { width: 160px }

    .mylist .student dt { width: 120px; justify-content: center; flex: 0 0 auto }
    .mylist .student .a { width: 120px }
    .mylist .student .b { width: 120px }
    .mylist .student .c { width: 80px }
    .mylist .student .d { width: 120px; }

    .mylist .avg dt, .mylist .avg dd { width: 150px; justify-content: stretch; text-align: center; line-height: 24px; flex-flow: column; height: 24px; overflow: hidden }
    .mylist .avg .progress { flex-flow: row nowrap; justify-content: center; }
    .mylist .progress .box { display: inline-block; width: 50%; margin-right: 5px; background-color: #E5E5E5; height: 10px; border-radius: 5px; margin-top: 2px; font-size: 0px; line-height: 0px; text-align: left; overflow: hidden }
    .mylist .progress .past { display: inline-block; height: 100%; background-color: #72A530; border-radius: 5px; }

    .mylist .avg .ztwrap { height: 24px; position: relative; overflow: visible }
        .mylist .avg .ztwrap .zt { width: 100%; height: 100%; overflow: hidden; display: block; text-align: center; position: relative }
        .mylist .avg .ztwrap .ztshow { position: absolute; left: 0px; top: -10px; width: 100%; display: block; text-align: center; z-index: 2; background: #ccc; padding: 10px; box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2); }
        .mylist .avg .ztwrap span i { font-size: 10px; position: absolute; right: 10px; top: 2px }
        .mylist .avg .ztwrap span span { line-height: 36px; width: 100%; display: block; text-align: center }
        .mylist .avg .ztwrap .zt span { line-height: 24px }


.el-drawer__body .mylistwrap .mylist { width: 100%; margin: 0; height: 100%; }
    .el-drawer__body .mylistwrap .mylist .mylistcon { width: 100%; height: calc(100% - 60px); flex-flow: column nowrap }
.mylist .learningcourse.listheader { padding-left: 20px; }
.mylist .listlearningtran { width: 100%; flex-flow: column nowrap; overflow: hidden }
.mylist .listlearning { width: 100%; padding-left: 20px; flex-flow: column nowrap }
.mylist .learningcourse dt { width: 180px; flex: 0 0 auto }
.mylist .learningcourse .a { width: 120px }
.mylist .learningcourse .b { width: 150px }
.mylist .listlearning .a { width: 120px }
.mylist .listlearning .b { width: 150px }

.mylist .listlearning2 { width: 100%; padding-left: 20px; flex-flow: column nowrap }
.mylist .learningtopic dt { width: 160px; flex: 0 0 auto }

.mylist .listlearning3 { width: 100%; padding-left: 20px; flex-flow: column nowrap }
.mylist .learninglesson dt { width: 140px; flex: 0 0 auto }

.mylist .listlearning4 { width: 100%; padding-left: 20px; flex-flow: column nowrap }
.mylist .learningpage dt { width: 120px; flex: 0 0 auto }

.myprogress { width: 90%; margin-left: 5%; font-size: 14px; padding-bottom: 30px; flex-flow: column nowrap }
    .myprogress .courselist { width: 100%; border-bottom: 1px solid #E6E6E6; margin-top: 10px; line-height: 20px; flex-flow: column nowrap }
        .myprogress .courselist .course { width: 100%; padding-bottom: 20px; align-items: baseline; justify-content: space-between }
        .myprogress .courselist .hasprogress { padding-top: 70px; }
        .myprogress .courselist .course .title { width: 120px; flex: 0 0 auto; }
        .myprogress .courselist .course .bar { width: 100%; padding-left: 20px; padding-right: 20px; flex: 1 1 auto; flex-flow: column nowrap; cursor: pointer }
            .myprogress .courselist .course .bar .line { width: 100%; height: 10px; background-color: #CCC; border-radius: 5px; line-height: 0px; font-size: 0px; }
                .myprogress .courselist .course .bar .line .now { transition: all .5s ease; width: 0px; height: 100%; background-color: #1A98CA; border-radius: 5px; position: relative }
                    .myprogress .courselist .course .bar .line .now .end { position: absolute; right: 0px; bottom: 5px; justify-content: center; flex-flow: column nowrap; font-size: 12px; align-items: center; margin-right: -80px; line-height: 20px; }
                        .myprogress .courselist .course .bar .line .now .end a { display: block; width: 150px; padding: 5px 5px; color: #FFF; background-color: #1A98CA; border-radius: 6px; text-align: center }
                        .myprogress .courselist .course .bar .line .now .end .arrow { display: block; width: 0px; height: 0px; border-width: 10px; border-style: solid; border-color: #1A98CA transparent transparent transparent; }
            .myprogress .courselist .course .bar .start { width: 100%; padding-top: 10px; }
        .myprogress .courselist .course .time { width: 100px; flex: 0 0 auto; }

        .myprogress .courselist .topiclisttran { width: 100%; flex-flow: column nowrap; overflow: hidden }
        .myprogress .courselist .topiclist { width: 100%; padding-left: 10%; padding-right: 10%; flex-flow: column nowrap; padding-top: 5px; border-top: 5px solid #E6E6E6; border-bottom: 4px solid #E6E6E6; padding-bottom: 20px; }
            .myprogress .courselist .topiclist .topicwrap { width: 100%; flex-flow: column nowrap; }
                .myprogress .courselist .topiclist .topicwrap .topic { width: 100%; border-bottom: 1px solid #CCC; padding-top: 10px; padding-bottom: 10px; cursor: pointer; }
                    .myprogress .courselist .topiclist .topicwrap .topic dl { width: 100%; align-items: center; justify-content: space-between }
                        .myprogress .courselist .topiclist .topicwrap .topic dl .a { width: 150px; flex: 0 0 auto }
                        .myprogress .courselist .topiclist .topicwrap .topic dl .b { width: 100%; justify-content: center }
                        .myprogress .courselist .topiclist .topicwrap .topic dl .c { width: 90px; flex: 0 0 auto; justify-content: flex-end }
                        .myprogress .courselist .topiclist .topicwrap .topic dl .circle { width: 32px; height: 32px; border: 1px solid #CCC; border-radius: 50%; position: relative }
                            .myprogress .courselist .topiclist .topicwrap .topic dl .circle span { display: block; font-size: 0px; line-height: 0px; position: absolute; }
                            .myprogress .courselist .topiclist .topicwrap .topic dl .circle .ready { top: 5px; left: 8px; width: 0px; height: 0px; border: 10px solid transparent; border-left: 20px solid #72A530 }
                            .myprogress .courselist .topiclist .topicwrap .topic dl .circle .done { top: 0px; left: 0px; width: 30px; height: 30px; background-color: #72A530; border-radius: 50%; }
                            .myprogress .courselist .topiclist .topicwrap .topic dl .circle .doing { top: 0px; left: 0px; width: 30px; height: 30px; background-color: #71A530; clip: rect(0px 15px 30px 0px); border-radius: 50%; z-index: 1 }
                            .myprogress .courselist .topiclist .topicwrap .topic dl .circle .fanless { top: 0px; left: 0px; width: 30px; height: 30px; background-color: #FFF; clip: rect(0px 15px 30px 0px); border-radius: 50%; z-index: 2 }
                            .myprogress .courselist .topiclist .topicwrap .topic dl .circle .fanmore { top: 0px; left: 0px; width: 30px; height: 30px; background-color: #71A530; clip: rect(0px 15px 30px 0px); transform: rotate(180deg); border-radius: 50%; z-index: 2 }

                .myprogress .courselist .topiclist .topicwrap .lessonlisttran { width: 100%; overflow: hidden; flex-flow: column nowrap; }
                .myprogress .courselist .topiclist .topicwrap .lessonlist { width: 100%; background-color: #F2F2F2; flex-flow: column nowrap; }

                    .myprogress .courselist .topiclist .topicwrap .lessonlist .lessonwrap { width: 100%; flex-flow: column nowrap; }
                        .myprogress .courselist .topiclist .topicwrap .lessonlist .lessonwrap .lesson { width: 100%; cursor: pointer; }

                    .myprogress .courselist .topiclist .topicwrap .lessonlist dl { width: 100%; padding-left: 5%; padding-right: 5%; align-items: center; justify-content: space-between; border-bottom: 1px solid #FFF; padding-top: 8px; padding-bottom: 8px; }
                        .myprogress .courselist .topiclist .topicwrap .lessonlist dl .a { width: 150px; flex: 0 0 auto }
                        .myprogress .courselist .topiclist .topicwrap .lessonlist dl .b { width: 100%; justify-content: center }
                        .myprogress .courselist .topiclist .topicwrap .lessonlist dl .c { width: 90px; flex: 0 0 auto; justify-content: flex-end }
                        .myprogress .courselist .topiclist .topicwrap .lessonlist dl .circle { width: 24px; height: 24px; border: 1px solid #CCC; border-radius: 50%; position: relative }
                            .myprogress .courselist .topiclist .topicwrap .lessonlist dl .circle span { display: block; font-size: 0px; line-height: 0px; position: absolute; }
                            .myprogress .courselist .topiclist .topicwrap .lessonlist dl .circle .ready { top: 3px; left: 5px; width: 0px; height: 0px; border: 8px solid transparent; border-left: 16px solid #72A530 }
                            .myprogress .courselist .topiclist .topicwrap .lessonlist dl .circle .done { top: 0px; left: 0px; width: 24px; height: 24px; background-color: #72A530; border-radius: 50%; }
                            .myprogress .courselist .topiclist .topicwrap .lessonlist dl .circle .doing { top: 0px; left: 0px; width: 24px; height: 24px; background-color: #71A530; clip: rect(0px 12px 24px 0px); border-radius: 50%; z-index: 1 }
                            .myprogress .courselist .topiclist .topicwrap .lessonlist dl .circle .fanless { top: 0px; left: 0px; width: 24px; height: 24px; background-color: #FFF; clip: rect(0px 12px 24px 0px); border-radius: 50%; z-index: 2 }
                            .myprogress .courselist .topiclist .topicwrap .lessonlist dl .circle .fanmore { top: 0px; left: 0px; width: 24px; height: 24px; background-color: #71A530; clip: rect(0px 12px 24px 0px); transform: rotate(180deg); border-radius: 50%; z-index: 2 }


                .myprogress .courselist .topiclist .topicwrap .pagelisttran { width: 100%; overflow: hidden; flex-flow: column nowrap; }
                .myprogress .courselist .topiclist .topicwrap .pagelist { width: 100%; background-color: #E2E2E2; flex-flow: column nowrap; }
                    .myprogress .courselist .topiclist .topicwrap .pagelist dl { width: 100%; padding-left: 8%; padding-right: 8%; align-items: center; justify-content: space-between; padding-top: 4px; padding-bottom: 4px; }
                        .myprogress .courselist .topiclist .topicwrap .pagelist dl .a { width: 150px; flex: 0 0 auto }
                        .myprogress .courselist .topiclist .topicwrap .pagelist dl .b { width: 100%; justify-content: center }
                        .myprogress .courselist .topiclist .topicwrap .pagelist dl .c { width: 90px; flex: 0 0 auto; justify-content: flex-end }
                        .myprogress .courselist .topiclist .topicwrap .pagelist dl .circle { width: 24px; height: 24px; border: 1px solid #CCC; border-radius: 50%; position: relative }
                            .myprogress .courselist .topiclist .topicwrap .pagelist dl .circle span { display: block; font-size: 0px; line-height: 0px; position: absolute; }
                            .myprogress .courselist .topiclist .topicwrap .pagelist dl .circle .ready { top: 3px; left: 5px; width: 0px; height: 0px; border: 8px solid transparent; border-left: 16px solid #72A530 }
                            .myprogress .courselist .topiclist .topicwrap .pagelist dl .circle .done { top: 0px; left: 0px; width: 24px; height: 24px; background-color: #72A530; border-radius: 50%; }
                            .myprogress .courselist .topiclist .topicwrap .pagelist dl .circle .doing { top: 0px; left: 0px; width: 24px; height: 24px; background-color: #71A530; clip: rect(0px 12px 24px 0px); border-radius: 50%; z-index: 1 }
                            .myprogress .courselist .topiclist .topicwrap .pagelist dl .circle .fanless { top: 0px; left: 0px; width: 24px; height: 24px; background-color: #FFF; clip: rect(0px 12px 24px 0px); border-radius: 50%; z-index: 2 }
                            .myprogress .courselist .topiclist .topicwrap .pagelist dl .circle .fanmore { top: 0px; left: 0px; width: 24px; height: 24px; background-color: #71A530; clip: rect(0px 12px 24px 0px); transform: rotate(180deg); border-radius: 50%; z-index: 2 }

.profile { width: 100%; }
    .profile .face { width: 40%; min-width: 240px; justify-content: center; flex: 0 0 auto }
        .profile .face .faceimg { width: 200px; height: 200px; justify-content: center; flex: 0 0 auto }
    .profile .info { width: 60%; flex-flow: column nowrap }
        .profile .info .view { width: 100%; flex-flow: column nowrap }
        .profile .info .edit { width: 100%; flex-flow: column nowrap }
        .profile .info dl { width: 100%; align-items: center; margin-bottom: 20px; }
            .profile .info dl dt { width: 120px; justify-content: flex-end; flex: 0 0 auto }
            .profile .info dl dd { width: 100%; padding-left: 10px; max-width: 220px; }

.mymobile { width: 100%; flex-flow: column nowrap }
    .mymobile dl { width: 100%; margin-bottom: 30px; align-items: center; }
        .mymobile dl dt { width: 200px; justify-content: flex-end; }
        .mymobile dl dd { padding-left: 10px; width: 320px; align-items: center }
            .mymobile dl dd dl { flex-flow: row nowrap; margin-bottom: 0px }
                .mymobile dl dd dl dd { padding-left: 0px; margin-top: 0px; }

.meminfo dl .vcode { width: 160px; }
.meminfo dl .vcodesend { width: 160px; padding-left: 20px; }
    .meminfo dl .vcodesend a { background-color: #76bb39; color: #FFF; display: inline-block; width: 100%; height: 40px; line-height: 40px; font-size: 14px; text-align: center; }
    .meminfo dl .vcodesend span { background-color: #BBB; color: #FFF; display: inline-block; width: 100%; height: 40px; line-height: 40px; font-size: 14px; text-align: center; }

.mypwd { width: 100%; flex-flow: column nowrap }
    .mypwd dl { width: 100%; margin-bottom: 30px; align-items: center; }
        .mypwd dl dt { width: 200px; justify-content: flex-end; }
        .mypwd dl dd { width: 100%; padding-left: 10px; max-width: 320px; align-items: center }
            .mypwd dl dd dl { flex-flow: row nowrap; margin-bottom: 0px }
                .mypwd dl dd dl dd { padding-left: 0px; margin-top: 0px; }

.subbody .coursenav .switch { display: none }
.coursenav { height: 100%; width: 265px; background-color: #FFF; flex-flow: column nowrap; }
.coursenavwrap { width: 100%; height: 100%; flex-flow: column nowrap; position: relative }
.coursenavmask { width: 100%; height: 100%; background: #FFF; opacity: 0.3; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; }
.coursenav .coursetitle { width: 100%; height: 80px; background-color: #3b1638; color: #FFF; justify-content: center; align-items: center; flex-flow: column nowrap; text-align: center }
    .coursenav .coursetitle .a { font-size: 20px; }
    .coursenav .coursetitle .b { font-size: 16px; padding-top: 10px; }
.coursenav .topicwrap { width: 100%; height: calc(100% - 80px); padding-top: 30px; position: relative }
    .coursenav .topicwrap .linetop { width: 1px; height: 30px; background-color: #CCC; position: absolute; left: 72px; top: 0px; z-index: 0 }
.coursenav .topiclist { width: 100%; flex-flow: column nowrap; font-size: 14px; position: relative }
    .coursenav .topiclist .line { width: 1px; height: 100%; background-color: #CCC; position: absolute; left: 72px; top: -30px; z-index: 0 }
    .coursenav .topiclist .topic { width: 100%; flex-flow: column nowrap }
        .coursenav .topiclist .topic .title { width: 100%; }
        .coursenav .topiclist .topic .lesson { width: 100%; flex-flow: column nowrap; overflow: hidden }
        .coursenav .topiclist .topic dl { width: 100%; margin-bottom: 12px; margin-top: 12px; height: 24px; align-items: center; color: #4D4D4D }
            .coursenav .topiclist .topic dl dt { width: 60px; padding-left: 10px; justify-content: center; font-size: 14px; font-weight: bold; }
            .coursenav .topiclist .topic dl .a { width: 32px; }
                .coursenav .topiclist .topic dl .a .circle { display: inline-block; width: 24px; height: 24px; line-height: 24px; border: 1px solid #CCC; border-radius: 50%; text-align: center; position: relative; overflow: hidden; background-color: #FFF }
            .coursenav .topiclist .topic dl .b { width: 145px; overflow: hidden }
            .coursenav .topiclist .topic dl .c { }
                .coursenav .topiclist .topic dl .c i { transition: all .5s ease; }
        .coursenav .topiclist .topic .lesson dl { padding-left: 60px; margin-top: 0px; }
            .coursenav .topiclist .topic .lesson dl .a .circle { width: 16px; height: 16px; line-height: 16px; margin-left: 4px; }
                .coursenav .topiclist .topic .lesson dl .a .circle span { display: block; font-size: 0px; line-height: 0px; position: absolute; }
                .coursenav .topiclist .topic .lesson dl .a .circle .ready { top: 3px; left: 4px; width: 0px; height: 0px; border: 4px solid transparent; border-left: 8px solid #72A530 }
                .coursenav .topiclist .topic .lesson dl .a .circle .done { top: 2px; left: 2px; width: 10px; height: 10px; background-color: #72A530; border-radius: 50%; }
                .coursenav .topiclist .topic .lesson dl .a .circle .doing { top: 2px; left: 2px; width: 10px; height: 10px; background-color: #71A530; clip: rect(0px 5px 10px 0px); border-radius: 50%; z-index: 1 }
                .coursenav .topiclist .topic .lesson dl .a .circle .fanless { top: 2px; left: 2px; width: 10px; height: 10px; background-color: #FFF; clip: rect(0px 5px 10px 0px); border-radius: 50%; z-index: 2 }
                .coursenav .topiclist .topic .lesson dl .a .circle .fanmore { top: 2px; left: 2px; width: 10px; height: 10px; background-color: #71A530; clip: rect(0px 5px 10px 0px); transform: rotate(180deg); border-radius: 50%; z-index: 2 }
        .coursenav .topiclist .topic .lesson dl { color: #999 }
            .coursenav .topiclist .topic .lesson dl.cs, .coursenav .topiclist .topic .lesson dl:hover { color: #72A530 }

.linkvocab { font-weight: bold }
.coursemain { height: 100%; width: calc(100% - 285px); padding: 30px; margin-left: 20px; background-color: #FFF; flex-flow: column nowrap; position: relative; }
    .coursemain .top { width: 100%; flex-flow: column nowrap }
        .coursemain .top .title { font-size: 20px; color: #4D4D4D; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 2px solid #E2A824 }
        .coursemain .top .artititle { justify-content: space-between; align-items: flex-end }
            .coursemain .top .artititle a { font-size: 16px; color: #E2A824 }
        .coursemain .top .titletest { padding-bottom: 10px; margin-bottom: 20px; border-bottom: 2px solid #E2A824; justify-content: space-between }
            .coursemain .top .titletest .titleleft { font-size: 20px; color: #4D4D4D; }
            .coursemain .top .titletest .titleright { align-items: center }
                .coursemain .top .titletest .titleright .iconfont { font-size: 20px; color: #E2A824; margin-right: 10px; }
                .coursemain .top .titletest .titleright a { display: inline-block; margin-left: 30px; padding-left: 20px; padding-right: 20px; margin-left: 30px; height: 30px; line-height: 30px; background-color: #397efd; color: #FFF; font-size: 16px; border-radius: 5px; }
                    .coursemain .top .titletest .titleright a.disable { background-color: #CCC }
        .coursemain .top .link { width: 100%; }
            .coursemain .top .link a { display: inline-block; padding-left: 24px; padding-right: 24px; height: 24px; line-height: 24px; border-radius: 12px; font-size: 12px; background-color: #72A530; color: #FFF; margin-right: 20px; }
                .coursemain .top .link a.info { background-color: #f47A30; color: #FFF; }
                .coursemain .top .link a.ready { background-color: #FFF; color: #666; border: 1px solid #72A530 }
                .coursemain .top .link a.done { background-color: #72A530; color: #FFF; }




    .coursemain .conwrap { width: 100%; height: calc(100% - 82px); padding-top: 20px; flex-flow: column nowrap }
    .coursemain .con { width: 100%; height: calc(100% - 50px); }
        .coursemain .con .info { width: 100%; height: 100%; }
            .coursemain .con .info .artiwrap { width: 100%; height: 100%; align-items: center }
            .coursemain .con .info .content { padding-right: 25px; }


        .coursemain .con .sidewrap { width: 170px; height: 100%; padding-left: 10px; flex: 0 0 auto }
        .coursemain .con .side { width: 100%; padding-right: 10px; flex-flow: column nowrap; }
            .coursemain .con .side dl { width: 100%; flex-flow: column nowrap }
                .coursemain .con .side dl dd { width: 100%; margin-bottom: 10px; }
                    .coursemain .con .side dl dd img { width: 150px; }
                .coursemain .con .side dl .video a { display: block; position: relative }
                    .coursemain .con .side dl .video a span { position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px }
                        .coursemain .con .side dl .video a span .iconfont { font-size: 40px; color: #FFF }



    .coursemain .conwrap .page { width: 100%; justify-content: center; margin-top: 20px; }
        .coursemain .conwrap .page a { border-radius: 4px; margin-left: 3px; margin-right: 3px; padding: 0px 10px; height: 22px; line-height: 22px; font-size: 14px; display: inline-block; background-color: #FFF; color: #999999; border: 1px solid #999999; }

            .coursemain .conwrap .page a.cs { background-color: #E3AB24; color: #FFF; border: 1px solid #E3AB24; }

.mydialogwrap { width: 100%; height: 100%; padding-bottom: 40px; flex-flow: column nowrap }
    .mydialogwrap .title { width: 100%; height: 40px; margin-bottom: 40px; flex: 0 0 auto }
        .mydialogwrap .title .arrow { border: 20px solid #E3AB24; border-left: 20px solid #FFF; border-top-left-radius: 20px; }
        .mydialogwrap .title .word { display: inline-block; height: 40px; line-height: 40px; background-color: #E3AB24; color: #FFF; font-size: 18px; padding-right: 50px; }
            .mydialogwrap .title .word .iconfont { font-size: 18px; padding-right: 10px }
    .mydialogwrap .staticrail { flex-flow: row-reverse nowrap }
    .mydialogwrap .con { width: 100%; height: calc(100% - 80px); padding-right: 30px; }

        .mydialogwrap .con .info { width: 100%; padding-left: 30px; height: 100%; }
            .mydialogwrap .con .info .content { width: 100%; padding-right: 30px; flex-flow: column nowrap }
                .mydialogwrap .con .info .content .spline { width: 100%; height: 1px; line-height: 0px; margin-top: 30px; margin-bottom: 30px; background-color: #E3AB24 }
                .mydialogwrap .con .info .content .answer { width: 90%; margin-left: 5%; flex-flow: column nowrap }
                .mydialogwrap .con .info .content .input { width: 100%; justify-content: center }
                    .mydialogwrap .con .info .content .input textarea { width: 80%; height: 150px; padding: 10px; border-radius: 10px; }
                .mydialogwrap .con .info .content .btn { width: 100%; justify-content: center; padding-top: 20px; }
                    .mydialogwrap .con .info .content .btn a { display: inline-block; padding-left: 15px; padding-right: 15px; height: 30px; line-height: 30px; border-radius: 5px; background-color: #e3aa24; color: #FFF; font-size: 14px; margin-left: 10px; margin-right: 10px; }
                .mydialogwrap .con .info .content .feedback { width: 90%; margin-left: 5%; flex-flow: column nowrap }

.mypopinfo { width: 100%; height: 100%; padding: 30px; flex-flow: column nowrap }

.mempopwrap { width: 100%; height: 100%; flex-flow: column nowrap }
.mempopnav { width: 100%; height: 53px; margin-bottom: 20px; position: relative; z-index: 1; }
    .mempopnav .navline { width: 100%; height: 51px; border-bottom: 1px solid #e6e6e6; position: absolute; left: 0px; top: 0px; z-index: -1 }
    .mempopnav dl { width: 100%; height: 53px; }
        .mempopnav dl dd { padding-left: 40px; }
            .mempopnav dl dd a { display: inline-block; padding-left: 5px; padding-right: 5px; height: 50px; line-height: 50px; font-size: 16px; color: #4c4c4c; }
                .mempopnav dl dd a.cs, .mempopnav dl dd a:hover { color: #e3aa24; border-bottom: 3px solid #e3aa24 }


.mempopbodywrap { width: 100%; height: calc(100% - 100px); padding-left: 40px; padding-right: 40px; flex-flow: column nowrap }
.mempopbody { width: 100%; height: 50%; flex: auto; padding-top: 20px; flex-flow: column nowrap }


.mempopnav .memnavbox { width: 100%; padding-left: 5px; position: relative; flex-flow: column nowrap }
    .mempopnav .memnavbox a { display: inline-block; height: 50px; padding-left: 20px; line-height: 50px; font-size: 16px; color: #e3aa24; }
    .mempopnav .memnavbox .memmainnavmore { position: absolute; z-index: 10001; left: 5px; top: 50px; width: 150px; background-color: #FFF; box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2); padding-bottom: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden; flex-flow: column nowrap }
    .mempopnav .memnavbox dl { width: 100%; flex-flow: column nowrap; padding-top: 10px; padding-bottom: 10px; height: auto }
        .mempopnav .memnavbox dl dd { width: 100%; padding-left: 0px; }
            .mempopnav .memnavbox dl dd a { display: inline-block; width: 100%; padding-left: 20px; padding-right: 0px; height: 30px; line-height: 30px; font-size: 14px; color: #4c4c4c; }
                .mempopnav .memnavbox dl dd a.cs, .mempopnav .memnavbox dl dd a:hover { color: #e3aa24; border-bottom: 0px; }


.learnwrap { width: 100%; height: 100%; padding-bottom: 30px; padding-top: 30px }

.learnmainwrap { width: 100%; height: 100%; padding-left: 20px; }
    .learnmainwrap .learnmain { width: 100%; height: 100%; position: relative; }
    .learnmainwrap .learnimg { width: calc(100% - 30px); padding: 30px; }

.learnimg { border: 1px solid #CCC; margin-top: 10px; margin-bottom: 10px; }
    .learnimg img { width: 100%; object-fit: contain }
.learnvideo { width: 100%; }

.learnside { height: 100%; flex: none; padding-left: 10px; overflow: hidden }
    .learnside .learnsidebtn { width: 50px; height: 100%; align-items: center; flex: none }
        .learnside .learnsidebtn ul { width: 100%; flex-flow: column nowrap }
            .learnside .learnsidebtn ul li { width: 100%; flex-flow: column nowrap; margin-bottom: 10px; }
                .learnside .learnsidebtn ul li a { display: flex; width: 100%; color: #FFF; justify-content: center; text-align: center; background: #919395; padding-top: 10px; padding-bottom: 10px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; }
                .learnside .learnsidebtn ul li .b { background: #323232; margin-top: 20px; }
                .learnside .learnsidebtn ul li a.cs { background-color: #f49928 }
                .learnside .learnsidebtn ul li i { display: block; font-size: 24px; margin-bottom: 5px }
                .learnside .learnsidebtn ul li span { display: block; font-size: 12px; }

    .learnside .learnsideinfo { width: 450px; padding: 20px; height: 100%; overflow: hidden; background: #2E2E2E; flex-flow: column nowrap; flex: none; }

        .learnside .learnsideinfo .learncourseinfo { width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #FFF; flex: none }
            .learnside .learnsideinfo .learncourseinfo .cover { width: 40%; padding-right: 20px }
                .learnside .learnsideinfo .learncourseinfo .cover img { width: 100%; object-fit: contain; }
            .learnside .learnsideinfo .learncourseinfo .info { width: 60%; color: #FFF; flex-flow: column nowrap }
                .learnside .learnsideinfo .learncourseinfo .info dt { width: 100%; font-size: 14px; padding-bottom: 5px; }
                .learnside .learnsideinfo .learncourseinfo .info dd { width: 100%; padding-bottom: 5px; }
                .learnside .learnsideinfo .learncourseinfo .info .a { font-size: 12px }
                .learnside .learnsideinfo .learncourseinfo .info .b { font-size: 10px }
                .learnside .learnsideinfo .learncourseinfo .info .c { font-size: 10px }

        .learnside .learnsideinfo .learncon { width: 100%; height: 50%; flex: auto; flex-flow: column nowrap; color: #FFF; font-size: 16px; line-height: 1.5em; position: relative }
            .learnside .learnsideinfo .learncon .linkright { width: 100%; justify-content: flex-end; margin-top: 20px; }
                .learnside .learnsideinfo .learncon .linkright .upbtn { display: inline-block; padding: 0px 30px; font-size: 16px; line-height: 40px; color: #FFF; background: #f49928; border-radius: 5px }
            .learnside .learnsideinfo .learncon .linesp { width: 100%; border-bottom: 1px dotted #7f7f7f; height: 20px; margin-bottom: 20px; }
            .learnside .learnsideinfo .learncon .attach { width: 100%; align-items: center }
                .learnside .learnsideinfo .learncon .attach a { display: flex; align-items: center; color: #FFF }
                .learnside .learnsideinfo .learncon .attach .icon { width: 40px; height: 40px; margin-right: 30px; }
            .learnside .learnsideinfo .learncon .hwbacktitle { width: 100%; margin-top: 50px; margin-bottom: 10px; font-size: 16px; color: #f49928 }
            .learnside .learnsideinfo .learncon .hwback { display: block; width: 100%; padding: 30px; border-radius: 5px; color: #FFF; font-size: 14px; line-height: 1.5em; background: #595959 }

            .learnside .learnsideinfo .learncon .list { width: 100%; flex-flow: column nowrap; padding-left: 10px; padding-right: 10px; }
                .learnside .learnsideinfo .learncon .list a { font-size: 14px; color: #FFF }
                .learnside .learnsideinfo .learncon .list dl:hover, .learnside .learnsideinfo .learncon .list dl.cs { background: #595959; }
                .learnside .learnsideinfo .learncon .list dl { width: 100%; line-height: 30px; margin-top: 2px; margin-bottom: 2px }

                    .learnside .learnsideinfo .learncon .list dl dt { width: 90%; font-size: 16px; }
                    .learnside .learnsideinfo .learncon .list dl dd { font-size: 16px }
                    .learnside .learnsideinfo .learncon .list dl .a { width: 30px; height: 30px; align-items: center }
                    .learnside .learnsideinfo .learncon .list dl .b { width: calc(100% - 30px); overflow: hidden }
                        .learnside .learnsideinfo .learncon .list dl .b i { font-size: 16px; margin-right: 10px; }
                    .learnside .learnsideinfo .learncon .list dl .open { width: 10%; justify-content: flex-end }
                .learnside .learnsideinfo .learncon .list .courselink { flex-flow: row wrap; padding-bottom: 5px }
                    .learnside .learnsideinfo .learncon .list .courselink .c { width: 100%; padding-left: 60px; overflow: hidden; font-size: 12px; line-height: 12px; height: 15px; }

                .learnside .learnsideinfo .learncon .list dl .circle { width: 16px; height: 16px; border: 1px solid #CCC; border-radius: 50%; position: relative }
                    .learnside .learnsideinfo .learncon .list dl .circle span { display: block; font-size: 0px; line-height: 0px; position: absolute; }
                    .learnside .learnsideinfo .learncon .list dl .circle .ready { top: 2px; left: 4px; width: 0px; height: 0px; border: 5px solid transparent; border-left: 10px solid #72A530 }
                    .learnside .learnsideinfo .learncon .list dl .circle .done { top: 1px; left: 1px; width: 12px; height: 12px; background-color: #72A530; border-radius: 50%; }
                    .learnside .learnsideinfo .learncon .list dl .circle .doing { top: 1px; left: 1px; width: 12px; height: 12px; background-color: #71A530; clip: rect(0px 6px 12px 0px); border-radius: 50%; z-index: 1 }
                    .learnside .learnsideinfo .learncon .list dl .circle .fanless { top: 1px; left: 1px; width: 12px; height: 12px; background-color: #FFF; clip: rect(0px 6px 12px 0px); border-radius: 50%; z-index: 2 }
                    .learnside .learnsideinfo .learncon .list dl .circle .fanmore { top: 1px; left: 1px; width: 12px; height: 12px; background-color: #71A530; clip: rect(0px 6px 12px 0px); transform: rotate(180deg); border-radius: 50%; z-index: 2 }

                .learnside .learnsideinfo .learncon .list .sublistwrap { width: 100%; flex-flow: column nowrap; padding-left: 20px; }
                .learnside .learnsideinfo .learncon .list .sublist { width: 100%; flex-flow: column nowrap; }

.learntest { width: 100%; height: 100%; flex-flow: column nowrap }

.learntesttitle { padding: 20px; background: #FFF; border-bottom: 2px solid #E2A824; flex: none }

.learntestcon { width: 100%; height: 50%; flex: auto; background: #FFF; padding: 30px; }
    .learntestcon .learntestsidewrap { width: 200px; padding-left: 0px; margin-right: 30px; }

.learntestdeswrap { width: 100%; flex-flow: column nowrap }
.learntestdes { width: 100%; font-size: 18px; color: #333; margin-bottom: 20px; }
.learntestdes2 { width: 100%; font-size: 16px; color: #333; padding-bottom: 10px; }
    .learntestdes2 span { display: inline-block; padding-left: 20px; font-size: 14px; color: #4D4D4D }

.learntestinfo { width: 100%; height: 100%; flex-flow: column nowrap }
    .learntestinfo .qpart { width: 100%; font-size: 18px; color: #333; align-items: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #CCC }
        .learntestinfo .qpart span { display: inline-block; padding-left: 20px; font-size: 16px; color: #4D4D4D }
    .learntestinfo .qstem { width: 100%; font-size: 16px; margin-bottom: 30px; }
        .learntestinfo .qstem dt { width: 30px; }

    .learntestinfo .qstemsub { width: 100%; font-size: 14px; margin-bottom: 30px; padding-left: 30px; }
        .learntestinfo .qstemsub dt { padding-right: 3px; flex: none }
    .learntestinfo .choice { width: 100%; padding-left: 40px; padding-right: 40px; font-size: 14px; margin-bottom: 30px; align-items: flex-start }
        .learntestinfo .choice dt { margin-right: 10px; align-items: center }
            .learntestinfo .choice dt input { margin-right: 10px; }
            .learntestinfo .choice dt span { display: inline-block; width: 16px; height: 16px; margin-right: 20px; border-radius: 50% }
            .learntestinfo .choice dt .error { background-color: #F00 }
            .learntestinfo .choice dt .right { background-color: #00CC00 }
    .learntestinfo .testanswerarea { width: 100%; padding-left: 40px; padding-right: 40px; font-size: 14px; margin-bottom: 30px; align-items: flex-start; flex-flow: column nowrap }
        .learntestinfo .testanswerarea .testmyanswerwrap { width: 100%; flex-flow: column nowrap }
        .learntestinfo .testanswerarea .testmyanswer { width: 100%; padding-bottom: 20px; }
        .learntestinfo .testanswerarea .testmarkgrade { width: 100%; padding-bottom: 20px; font-weight: bold }
        .learntestinfo .testanswerarea .testmark { width: 100%; font-style: italic; font-size: 0.875em }

.examattach { width: 100%; padding: 20px; }

.learntestsidewrap { width: 170px; height: 100%; padding-left: 10px; flex: none }
.learntestside { width: 100%; padding-right: 10px; flex-flow: column nowrap; }
    .learntestside .progressbar { width: 100%; flex: none; padding: 20px; background-color: #EFF5FF; flex-flow: column nowrap }
        .learntestside .progressbar .title { justify-content: space-between; align-items: center }
            .learntestside .progressbar .title .a { font-size: 14px; color: #333 }
            .learntestside .progressbar .title .b { font-size: 12px; color: #808080 }
        .learntestside .progressbar .bar { background-color: #397efd; height: 2px; border-radius: 1px; line-height: 0px; margin-top: 15px; margin-bottom: 15px; position: relative }
            .learntestside .progressbar .bar .cur { position: absolute; left: 0px; top: -3px; align-items: center; width: 100%; border-radius: 50%; }
                .learntestside .progressbar .bar .cur .line { display: inline-block; height: 4px; border-radius: 2px; background-color: #397efd; }
                .learntestside .progressbar .bar .cur .circle { display: inline-block; width: 8px; height: 8px; background-color: #FFF; border: 1px solid #397efd; border-radius: 50%; position: relative; margin-left: -4px; }
        .learntestside .progressbar .tip { font-size: 12px; color: #808080 }
    .learntestside .answertype { width: 100%; flex: none; justify-content: flex-end; font-size: 12px; color: #4D4D4D; margin-top: 15px; margin-bottom: 20px; }
        .learntestside .answertype dd { padding-left: 5px; padding-right: 5px; align-items: center }
            .learntestside .answertype dd span { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 10px; }
            .learntestside .answertype dd .cs { border: 2px solid #54047e }
            .learntestside .answertype dd .ready { background-color: #B1CBFC }
            .learntestside .answertype dd .done { background-color: #397efd }
            .learntestside .answertype dd .right { background-color: #00cc00 }
            .learntestside .answertype dd .error { background-color: #F00 }
    .learntestside .answersheet { width: 100%; height: 50%; flex: auto; flex-flow: column nowrap; overflow: hidden }
        .learntestside .answersheet .aspart { width: 100%; flex-flow: column nowrap }
        .learntestside .answersheet .qtype { width: 100%; margin-bottom: 20px; font-size: 16px; color: #4D4D4D; align-items: center }
            .learntestside .answersheet .qtype span { display: inline-block; margin-right: 10px; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; background-color: #FCAF3A; font-size: 12px; color: #FFF; text-align: center }
        .learntestside .answersheet dl { width: 100%; padding-left: 36px; margin-bottom: 12px; flex-flow: row wrap }
        .learntestside .answersheet dd { width: 16px; height: 16px; border-radius: 50%; margin-right: 10px; margin-bottom: 10px; cursor: pointer }
        .learntestside .answersheet .cs { border: 2px solid #54047e }
        .learntestside .answersheet .ready { background-color: #B1CBFC }
        .learntestside .answersheet .done { background-color: #397efd }
        .learntestside .answersheet .right { background-color: #00cc00 }
        .learntestside .answersheet .error { background-color: #F00 }

.learntestbtn { width: 100%; height: 50px; flex: none; padding: 10px 50px; margin-top: 20px; background: #397efd; justify-content: flex-end; border-radius: 5px; align-items: center }

    .learntestbtn a { display: inline-block; padding-left: 20px; padding-right: 20px; margin-left: 30px; height: 30px; line-height: 30px; background-color: #FFF; color: #397efd; font-size: 16px; border-radius: 5px; }
    .learntestbtn .disable { background-color: #CCC; cursor: default }
    .learntestbtn .learntestbtnhastime { width: 100%; height: 100%; justify-content: space-between }
        .learntestbtn .learntestbtnhastime .learntestremain { color: #FFF; height: 100%; align-items: center }
            .learntestbtn .learntestbtnhastime .learntestremain .iconfont { font-size: 16px; margin-right: 10px; }

.learnnote { width: 100%; padding-left: 20px; padding-right: 20px; flex-flow: column nowrap }
.learnnoteform { width: 100%; flex-flow: column nowrap }
.learnnotetime { width: 100%; justify-content: space-between }
.learnnoteinput { width: 100%; margin-top: 10px; margin-bottom: 10px; }
.learnnotebtn { width: 100%; justify-content: flex-end; align-items: center }
    .learnnotebtn a { margin-left: 20px; color: #FFF }
    .learnnotebtn .btnsave { display: inline-block; padding: 2px 16px; background: #ff8d00; border-radius: 5px; text-align: center; color: #fff; }
.learnnotetopic { font-size: 14px; }

.learnotedel { width: 100%; justify-content: flex-end }
    .learnotedel a { font-size: 12px; color: #ff8d00 }

.learnnotelist { width: 100%; padding: 20px 20px 0px; flex-flow: column nowrap }
    .learnnotelist dl { width: 100%; flex-flow: column nowrap; padding-bottom: 10px; line-height: 24px; }
        .learnnotelist dl dt { width: 100%; font-size: 14px; cursor: pointer }
        .learnnotelist dl dd { width: 100%; font-size: 12px; }

.learnnotemorewrap { width: 100%; padding: 20px; flex-flow: column nowrap; }
.learnnotemore { width: 100%; flex-flow: column nowrap; border-top: 1px solid #FFF }
    .learnnotemore dl { width: 100%; flex-flow: column nowrap; padding-top: 20px; }
        .learnnotemore dl dt { width: 100%; font-size: 12px; cursor: pointer }
        .learnnotemore dl .learnnotetime { width: 100%; font-size: 12px; }

.mypoplearnerwrap { width: 100%; height: 100%; padding: 50px 10px; }


.navinfowconrap { width: 100%; background-color: #F4F8FB; flex-flow: column nowrap }
.navinfowco { width: 100%; flex-flow: column nowrap }

.ff-uploader { cursor: pointer; position: relative; overflow: hidden; justify-content: center; align-items: center }
.ff-img { width: 100%; height: 100%; border: 1px dashed #CCC; }
    .ff-img .el-upload { width: 100%; justify-content: center }
.ff-uploader:hover { border-color: #409EFF; }
.ff-uploader .el-icon-plus { font-size: 28px; color: #8c939d; }
.ff-uploader .upimg { width: 90%; height: 90%; display: block; margin-left: 5% }

.ff-uploader .imgupmask { position: absolute; z-index: 2; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,.5) }
    .ff-uploader .imgupmask .imgupprogress { position: absolute; z-index: 3; left: 0px; bottom: 5px; width: 100%; height: 10px; padding: 0px 10px; flex-flow: column nowrap }


.ffuploadimg { width: 100%; flex-flow: row wrap !important }

    .ffuploadimg .ff-img { width: 80px; height: 80px; border: 1px dashed #CCC; margin: 10px; }
    .ffuploadimg .imgitem { width: 80px; height: 80px; margin: 10px; flex-flow: column nowrap; position: relative; align-items: center }
        .ffuploadimg .imgitem .imgitembox { border: 1px dashed #CCC; width: 100%; height: 100%; padding: 5px; flex-flow: column nowrap; position: relative; align-items: center }
        .ffuploadimg .imgitem .itemdel { display: block; position: absolute; z-index: 1; top: 0px; right: 0px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #1095ed; text-align: center; line-height: 15px; }
            .ffuploadimg .imgitem .itemdel i { font-size: 12px; color: #1d0634 }


        .ffuploadimg .imgitem img { width: 100%; height: 100%; object-fit: contain; }
        .ffuploadimg .imgitem .imgupwrap { width: 100%; height: calc(100% - 30px); }
        .ffuploadimg .imgitem .imgupmask { position: absolute; z-index: 2; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,.5) }
            .ffuploadimg .imgitem .imgupmask .imgupprogress { position: absolute; z-index: 3; left: 0px; bottom: 5px; width: 100%; height: 10px; padding: 0px 10px }
        .ffuploadimg .imgitem .imgchoose { width: 100%; height: 20px; padding-top: 10px; flex-flow: row nowrap; justify-content: center }
            .ffuploadimg .imgitem .imgchoose a { display: inline-block; margin-left: 10px; margin-right: 10px; color: #e3aa24 }


.meminfo .profile { width: 100%; flex-flow: row wrap; padding-top: 30px; }
    .meminfo .profile dl { width: 50%; align-items: center; margin-bottom: 50px; }
        .meminfo .profile dl dt { width: 120px; justify-content: flex-end; flex: 0 0 auto; font-size: 16px; color: #4D4D4D }
        .meminfo .profile dl dd { width: 100%; padding-left: 20px; max-width: 220px; }


@media screen and (max-width: 1200px) {
    .banner .slogan { font-size: 22px; line-height: 40px; padding: 40px 50px }
    .infotype4 .infocollege li dl dd .a img { max-height: 35px; }
}

@media screen and (max-width: 960px) {
    .topbar .nav { display: none }
    .topbar .navsmall { display: flex; }
    .infotype4 .infocollege li dl dd .a img { max-height: 28px; }
    .pagecontact { flex-flow: column nowrap }
        .pagecontact .map { width: 100%; }
        .pagecontact .info { width: 100%; margin-top: 40px; }

    .levellist li .levelitem dt { width: 40%; padding-right: 5%; }
        .levellist li .levelitem dt img { width: 100%; }

    .levellist li .courselist { flex-flow: column nowrap }
        .levellist li .courselist dl { width: 100%; }
    .subbody .memnavwrap { display: none }
    .subbody .meminfo { width: 100%; margin-left: 0px; }

    .learnwrap { height: calc(100% - 60px); padding-bottom: 10px; }

    .learnside .learnsideinfo { width: 250px; padding: 10px; }
    .transiderightdefault { width: 310px; }
    .transiderightback { width: 310px; }

    .learnside .learnsideinfo .learncourseinfo .cover { display: none }
    .learnside .learnsideinfo .learncourseinfo .info { width: 100% }

    .learnside .learnsideinfo .learncon .list dl dt { font-size: 14px; }
    .learnside .learnsideinfo .learncon .list dl dd { font-size: 14px }
    .learnside .learnsideinfo .learncon .list dl .b i { display: none; }
    .learnside .learnsideinfo .learncon .list dl .c { display: none }
    .learnside .learnsideinfo .learncon .list .sublistwrap { padding-left: 10px; }


    .infopage .infonews .subtitle .word { font-size: 20px; line-height: 20px; }
    .infopage .infonews .infosubnews .b { font-size: 14px; }
    .infopage .infonews .infosubnews .c { font-size: 14px; line-height: 1.5em }
    .infopage .infonews .infosubnews .d a { font-size: 14px; }
    .infosubnews .a { font-size: 18px; }
        .infosubnews .a a { font-size: 18px; }


    .infostu1item { margin-top: 60px; }
    .infostu1img { margin-left: 20px; margin-right: 20px; margin-bottom: 30px; margin-top: -20px; }
    .infostu1con { margin-top: 30px; line-height: 1.5em; padding-right: 30px; padding-left: 30px; }
    .infostu1conname { width: 100%; justify-content: flex-end; margin-bottom: 20px; text-align: right }

    .infosub .infosubmewswrap { padding-top: 40px; padding-bottom: 40px; }
}

@media screen and (max-width: 800px) {
    .banner .slogan { font-size: 16px; line-height: 30px; padding: 30px }
    .banner .slogancollege { font-size: 16px; line-height: 30px; }
    .infotype1 .content { padding-left: 10px; padding-right: 10px; }
    .infotype4 .infocollege li { width: 100%; }
        .infotype4 .infocollege li dl dd { padding-left: 20px }
            .infotype4 .infocollege li dl dd .a img { max-height: 42px; }
    .pagenews .listwrap, .pagenews .info { width: 100%; }
    .pagenews .top { display: none }
    .myprogress .courselist .topiclist .topicwrap .topic dl .b { display: none }
    .myprogress .courselist .topiclist .topicwrap .lessonlist dl .b { display: none }
    .subbody .coursenav { position: absolute; z-index: 9; left: -265px; transition: all .5s ease; box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2); }
        .subbody .coursenav .switch { display: flex; position: absolute; right: -20px; top: 50%; width: 20px; height: 100px; overflow: hidden; margin-top: -50px; background-color: #3b1638; color: #FFF; align-items: center; justify-content: center; cursor: pointer }
            .subbody .coursenav .switch i { transition: all .5s ease; }
    .subbody .coursemain { width: 100%; margin-left: 0 }

    .learnwrap { flex-flow: column nowrap; height: 100%; padding-bottom: 0px; }

    .learnmainwrap { width: 100%; height: 0px; padding-bottom: 56.25%; position: relative; overflow: hidden; margin-bottom: 20px; flex: none }
        .learnmainwrap .learnmain { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
        .learnmainwrap .learnimg { width: calc(100% - 30px); padding: 20px; margin-left: 10px; }

    .learnside { width: 100%; height: 50%; padding-left: 0px; flex-flow: column nowrap; flex: auto }
    .transiderightdefault { width: 100%; }
    .transiderightback { width: 100%; }
    .learnside .learnsidebtn { width: 100%; height: 75px; }
        .learnside .learnsidebtn ul { flex-flow: row nowrap; justify-content: center; background: #919395; }
            .learnside .learnsidebtn ul li { width: 50px; flex-flow: column nowrap; margin: 10px; }
                .learnside .learnsidebtn ul li a { border-bottom-left-radius: 0px; border-top-left-radius: 0px; padding-top: 5px; padding-bottom: 5px; }
                .learnside .learnsidebtn ul li .b { display: none }

    .learnside .learnsideinfo { width: 100%; padding: 10px; height: calc(100% - 75px); }
        .learnside .learnsideinfo .learncon { width: 100%; height: 100%; flex-flow: column nowrap; color: #FFF; font-size: 16px; line-height: 1.5em; position: relative }
        .learnside .learnsideinfo .learncourseinfo { display: none }

    .footer .copyright { padding-left: 20px; padding-right: 20px; }

    .infotypecollege { padding-top: 30px; padding-bottom: 30px; }



    .infopage { margin-bottom: 40px; }
        .infopage .infonews .subtitle { margin-bottom: 20px; }
        .infopage .infonews .infosubnewsimg { margin-top: 30px; margin-bottom: 30px; }
    .infosub .infosubmewswrap { padding-top: 30px; padding-bottom: 30px; }

    .infostu1con { font-size: 14px; }
    .infostu2 dl dd { width: calc(50% - 10px) }

    .meminfo .profile dl { width: 100%; align-items: center; margin-bottom: 20px; }
        .meminfo .profile dl dt { width: 100px; }
        .meminfo .profile dl dd { width: calc(100% - 100px) }

    .mempopbodywrap { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 600px) {
    .banner .slogan { font-size: 14px; line-height: 25px; padding: 20px }
    .banner .slogancollege { font-size: 14px; line-height: 25px; }
    .infotype4 .infocollege li dl dd .a img { max-height: 35px; }
    .pagecontact .info { font-size: 12px }
    .levellist li .levelitem { flex-flow: column nowrap }
        .levellist li .levelitem dt { width: 100%; }
        .levellist li .levelitem dd { width: 100%; margin-top: 20px; }
    .levellist li .courselist { width: 90%; margin: 0px 5% 20px; padding: 10px 10px 0px; }
    .memsubnav dl dd { margin-left: 5px; padding: 10px; }
    .mylist .writing .b { display: none }
    .mylist .writing .c { display: none }
    .coursemain .conwrap .page a { padding: 0px 8px; font-size: 12px; }


    .infotype3 .swiperleft { width: 20px; }
        .infotype3 .swiperleft a i { font-size: 20px; }
    .infotype3 .swiper { width: calc(100% - 40px); overflow: hidden; font-size: 12px; color: #666 }
    .infotype3 .swiperright { width: 20px; }
        .infotype3 .swiperright a i { font-size: 20px; }

    .infotype6 .subtitle { font-size: 16px; }

    .coursemain { padding: 10px }
        .coursemain .top { flex: none }
            .coursemain .top .title { margin-bottom: 10px; }
            .coursemain .top .link { flex-flow: row wrap; }
                .coursemain .top .link a { padding-left: 12px; padding-right: 12px; border-radius: 5px; margin-right: 10px; margin-top: 10px; }

        .coursemain .conwrap { height: calc( 100% - 116px) }
        .coursemain .con { flex-flow: column nowrap }
            .coursemain .con .info { width: 100%; height: 100%; }
            .coursemain .con .infohasmedia { height: calc(100% - 100px) }
            .coursemain .con .sidewrap { width: 100%; height: 100px; padding-top: 10px; flex: 0 0 auto }

            .coursemain .con .side { padding: 0; }
                .coursemain .con .side dl { flex-flow: row nowrap; justify-content: space-around }
                    .coursemain .con .side dl dd { max-width: 150px; margin-bottom: 0px; }
                        .coursemain .con .side dl dd img { width: 90%; }

    .mypopinfo { padding: 10px; }
    .mydialogwrap .con { padding-right: 10px; }
    .mydialogwrap .staticrail { flex-flow: column-reverse nowrap }
    .mydialogwrap .con .info { padding-left: 10px; }
        .mydialogwrap .con .info.infocolumn { height: 50% }
            .mydialogwrap .con .info.infocolumn:nth-child(1) { padding-top: 20px }
        .mydialogwrap .con .info .content { padding-right: 10px; }

    .myoptions { margin-bottom: 10px }
        .myoptions .myoptionleft { width: 100%; flex-flow: row wrap; justify-content: flex-start }
        .myoptions .memselect { width: 120px; margin-bottom: 10px; }

    .mylist .avg { flex-flow: row wrap; padding-left: 10px; padding-right: 10px; }
        .mylist .avg dt, .mylist .avg dd { width: 100%; justify-content: flex-start; align-items: baseline; text-align: left; flex-flow: row nowrap; height: auto; line-height: 20px; font-size: 12px; }

    .profile { flex-flow: column nowrap }
        .profile .face { width: 100%; min-width: 200px; margin-bottom: 30px; }
            .profile .face .faceimg { width: 160px; height: 160px; }
        .profile .info { width: 100%; flex-flow: column nowrap; font-size: 0.875em }
            .profile .info dl dt { width: 100px; }
            .profile .info dl dd .el-input { width: 180px; }



    .mymobile dl { flex-flow: column nowrap }
        .mymobile dl dt { width: 100%; padding-left: 20px; justify-content: flex-start }
        .mymobile dl dd { padding-left: 60px; width: 100%; max-width: 280px; justify-content: flex-start; margin-top: 20px; }
            .mymobile dl dd dl { padding-left: 0px; width: 100%; justify-content: flex-start; }

    .mypwd dl { flex-flow: column nowrap }
        .mypwd dl dt { width: 100%; padding-left: 20px; justify-content: flex-start }
        .mypwd dl dd { padding-left: 60px; width: 100%; max-width: 280px; justify-content: flex-start; margin-top: 20px; }


    .myprogress .courselist .course { width: 100%; padding-bottom: 20px; align-items: initial; justify-content: flex-start; flex-flow: column nowrap }
        .myprogress .courselist .course .title { width: 100%; margin-bottom: 15px; }
    .myprogress .courselist .topiclist .topicwrap .lessonlist dl .a { width: 60%; max-width: 150px; }
    .myprogress .courselist .topiclist .topicwrap .lessonlist dl .c { width: 40%; max-width: 90px; }


    .mylist .avg .ztwrap { height: auto; align-items: baseline }
        .mylist .avg .ztwrap span span { text-align: left }

    .footer .copyright { font-size: 10px; line-height: 16px; }

    .infotypecollege { padding-top: 20px; padding-bottom: 20px; }

    .infostu1item { margin-top: 80px; flex-flow: column nowrap; align-items: center; }
    .infostu1img { width: 200px; margin-bottom: 20px; margin-top: -40px; }
        .infostu1img img { width: 100%; border-radius: 10px; position: relative; z-index: 2 }
    .infostu1con { width: 100%; margin-top: 20px; font-size: 16px; line-height: 2em; padding-right: 20px; padding-left: 20px; }
    .infostu1conname { margin-bottom: 40px; }
    .infostu1item:first-child { margin-top: 40px }
    .infostu1item:nth-child(2n) { flex-flow: column nowrap }
        .infostu1item:nth-child(2n) .infostu1img .infostu1imgbg { left: 8px }

    .infopage .infonews .infosubnewsimg { width: 0%; display: none; }
    .infosub .infosubmewswrap { width: 100%; }
    .infosubnewsmore { padding: 0 }
    .infosubnewsmorewrap .infosubmewswrap { width: 100%; padding-bottom: 20px; }

    .infopage .infonews .subtitle { margin-bottom: 40px; }

    .infostu1con { font-size: 14px; }
    .infostu2 dl dd { width: calc(50% - 10px) }

    .banner .bannertitle .main { font-size: 28px; padding-bottom: 16px; margin-bottom: 16px; }
    .banner .bannertitle .sub { font-size: 20px; }



    .learntesttitle { padding: 5px 10px; }
    .learntestcon { padding: 10px; }
    .learntestsidewrap { display: none !important; }

    .learntestdes { font-size: 16px; margin-bottom: 10px; }
    .learntestdes2 { font-size: 14px; padding-bottom: 5px; }
        .learntestdes2 span { padding-left: 10px; font-size: 14px; }

    .learntestinfo .qpart { font-size: 16px; margin-bottom: 10px; padding-bottom: 10px; }
        .learntestinfo .qpart span { padding-left: 10px; font-size: 14px; }
    .learntestinfo .qstem { font-size: 14px; margin-bottom: 10px; }
        .learntestinfo .qstem dt { width: 15px; }

    .learntestinfo .qstemsub { font-size: 14px; margin-bottom: 10px; padding-left: 10px; }
    .learntestinfo .choice { padding-left: 20px; padding-right: 20px; font-size: 14px; margin-bottom: 10px; }
        .learntestinfo .choice dt { margin-right: 5px; }
            .learntestinfo .choice dt input { margin-right: 5px; }
            .learntestinfo .choice dt span { margin-right: 10px; }
    .learntestinfo .testanswerarea { padding-left: 20px; padding-right: 20px; font-size: 14px; margin-bottom: 10px; }
        .learntestinfo .testanswerarea .testmyanswer { padding-bottom: 10px; }
        .learntestinfo .testanswerarea .testmarkgrade { padding-bottom: 10px; }

    .examattach { padding: 10px; }
    .learntestbtn { height: 30px; padding: 5px 20px; margin-top: 10px; }
        .learntestbtn a { padding-left: 20px; padding-right: 20px; margin-left: 10px; height: 20px; line-height: 20px; font-size: 12px; }
}


@media screen and (max-width: 480px) {
    .banner .slogancollege { font-size: 10px; line-height: 18px; padding: 0 20px; }
    .infotype4 .infocollege li dl dd .a img { max-height: 25px; }
    .banner .slogan { font-size: 12px; line-height: 25px; padding: 10px }
    .infotype4 .infocollege li dl dd .b { font-size: 20px; margin-bottom: 20px; }
    .poplogin { width: 300px }
        .poplogin dl { padding-left: 20px; padding-right: 20px; }

    .memcourse .list { width: 100%; }
        .memcourse .list dl { width: 100%; }
            .memcourse .list dl dt { height: auto }
}