@import url(//at.alicdn.com/t/font_1973954_qdxq30khp7d.css);
@import url(/include/css/pub.css);

.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 }

.memnorecord { width: 100%; margin-top: 50px; margin-bottom: 50px; padding-top: 210px; justify-content: center; background: url(include/images/norecord.png) no-repeat center top; font-size: 16px; }
.pv-controls-right div { display: block }

.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; }
.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 }
.norecord { width: 100%; margin-top: 50px; margin-bottom: 50px; padding-top: 210px; justify-content: center; background: url(include/images/norecord.png) no-repeat center top; font-size: 16px; }

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

.mydialogwork .el-dialog { width: 80%; max-width: 800px; height: 80%; max-height: 600px }
.mydialogwork .el-dialog__body { height: 100% }

.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; }
.csite { width: 100%; height: 60px; }
    .csite .info { font-size: 16px; color: #FFF; line-height: 60px; }
        .csite .info a { color: #FFF; margin-right: 10px; }
        .csite .info span { margin-right: 10px; }
.mainbody { width: 100%; flex-flow: column nowrap }
.appfull .mainbody { width: 100%; height: calc(100% - 160px); flex-flow: column nowrap; background: #3D3D3D }
    .appfull .mainbody .csite { width: 100%; height: 60px; padding-left: 20px; padding-right: 20px; flex: none }
.subframe { width: 100%; height: 100%; overflow: hidden; border: 0; margin: 0; padding: 0 }


.maintitle { margin-bottom: 60px !important; flex-flow: column nowrap; position: relative; }
    .maintitle .word { font-size: 30px; line-height: 30px; padding-left: 15px; border-left: 10px solid #f49928 }
.subtitle { margin-bottom: 30px; flex-flow: row nowrap; justify-content: space-between; position: relative; }
    .subtitle .word { font-size: 24px; line-height: 24px; padding-left: 15px; color: #002B46; border-left: 10px solid #f49928; align-items: center }
.thirdtitle { margin-bottom: 30px; }
    .thirdtitle dl { align-items: center }
        .thirdtitle dl dt { width: 140px; height: 12px; background-color: #f49928 }
        .thirdtitle dl dd { padding-left: 20px; font-size: 20px; color: #f49928 }

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

.header { width: 100%; flex-flow: column nowrap; flex: none }
.langbarwrap { width: 100%; height: 30px; line-height: 30px; background-color: #666; }
.langbar { height: 100%; justify-content: flex-end; font-size: 14px; color: #808080 }
    .langbar span { display: inline-block; padding-left: 10px; padding-right: 10px; }
    .langbar a { color: #FFFFFF }
        .langbar a.cs, .langbar a:hover { color: #f49928 }
.topbarwrap { width: 100%; background-color: #2f2f2f; padding-top: 16px; height: 80px; }

.topbarbox { width: 100%; background-color: #2F2F2F; height: 70px; }
.topfixed { position: fixed; top: 0px; left: 0px; z-index: 99999; box-shadow: 5px 5px 10px 0px #333; padding-top: 8px; }

.topbar { height: 100%; justify-content: space-between; font-size: 16px; }
    .topbar .logo { height: 48px; overflow: hidden; flex: none }
        .topbar .logo img { height: 100%; }
    .topbar .nav { width: 50%; padding-left: 50px; flex: auto; }
        .topbar .nav ul { width: 100%; justify-content: flex-end }
            .topbar .nav ul li { margin-left: 4.3%; position: relative; line-height: 48px; color: #FFF; }
            .topbar .nav ul .msg .iconfont { color: #e3aa24; font-size: 20px; }
            .topbar .nav ul .me { display: inline-block; width: 60px; padding-left: 0px; line-height: 20px; text-align: right }
                .topbar .nav ul .me img { width: 40px; height: 40px; border-radius: 20px; }
            .topbar .nav ul li span { display: inline-block; padding-left: 5px; padding-right: 5px; font-size: 16px; line-height: 48px; }
            .topbar .nav ul li .mainnav { color: #FFF; display: block; font-size: 16px; line-height: 48px; height: 64px; }
                .topbar .nav ul li .mainnav.cs, .topbar .nav ul li .mainnav:hover { color: #f49928; border-bottom: 3px solid #f49928; }
                .topbar .nav ul li .mainnav .showname { color: #f49928; }
.topfixed .topbar .nav ul li .navmore { top: 56px; }
.topbar .nav ul li .navmore { width: 200px; position: absolute; top: 64px; left: -20px; z-index: 9999; box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2); padding-bottom: 30px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: rgba(47,47,47,0.85); overflow: hidden }
    .topbar .nav ul li .navmore.menav { left: -100px; width: 160px; }
    .topbar .nav ul li .navmore dl { width: 100%; flex-flow: column nowrap }
        .topbar .nav ul li .navmore dl dd { width: 100%; margin-top: 30px; }
            .topbar .nav ul li .navmore dl dd a { font-size: 14px; line-height: 14px; color: #FFF; display: inline-block; width: 100%; padding-left: 20px; }
                .topbar .nav ul li .navmore dl dd a:hover { color: #f49928 }
        .topbar .nav ul li .navmore dl .mem a .iconfont { color: #f49928; display: inline-block; width: 14px; font-size: 14px; padding-right: 10px; }

.topbar .navsmall { display: none; position: relative; font-size: 14px; }
    .topbar .navsmall .navmenu { width: 40px; height: 40px; padding-top: 4px; }
        .topbar .navsmall .navmenu .iconfont { font-size: 30px; color: #FFF }
        .topbar .navsmall .navmenu img { width: 40px; height: 40px; border-radius: 50% }
    .topbar .navsmall .navinfo { width: 160px; position: absolute; z-index: 10001; right: -20px; top: 64px; 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: #f49928; 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: 160px; position: absolute; top: 0px; right: 160px; 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 .mem a { padding-left: 20px }
                        .topbar .navsmall .navinfo ul li .navmore dl .mem a .iconfont { color: #f49928; 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: #f49928 }

.dropdownbox { width: 375px; background: #2f2f2f; border-radius: 0 0 8px 8px; position: absolute; top: 60px; right: 0px; flex-flow: column nowrap; line-height: 24px; z-index: 9999 }
    .dropdownbox a { color: #FFF; line-height: 24px; }
        .dropdownbox a:hover { color: #f49928; }
.dropdowntop { width: 100%; padding: 20px 30px 20px; border-bottom: solid 1px #4c4c4c; }
    .dropdowntop .ddexit { width: 40px; text-align: right; }
        .dropdowntop .ddexit a { font-size: 14px; }
    .dropdowntop .ddinfo { width: 275px; }
        .dropdowntop .ddinfo dt { width: 80px; text-align: left; line-height: 0; }
            .dropdowntop .ddinfo dt img { width: 60px; border-radius: 50%; }
        .dropdowntop .ddinfo dd { width: 195px; font-size: 14px; flex-flow: column nowrap; justify-content: center }
            .dropdowntop .ddinfo dd a { display: inline-block; width: 100%; padding-top: 3px; padding-bottom: 3px; }
.dropdownbottom { width: 100%; padding: 20px; justify-content: space-between }
    .dropdownbottom dd a { display: flex; flex-flow: column nowrap; justify-content: center; text-align: center; font-size: 12px; }
    .dropdownbottom .iconfont { display: inline-block; color: #f49928; margin-bottom: 5px; font-size: 18px; }


.appnormal .footer { width: 100%; background: #2f2f2f; min-height: 48px; padding-bottom: 10px; padding-top: 15px; line-height: 24px; }
.appfull .footer { width: 100%; background: #2f2f2f; height: 50px; padding-top: 10px; align-items: center; line-height: 20px; }
.footer a { color: #B3B3B3; }
.footer .copyright { width: 100%; justify-content: center; color: #B3B3B3; font-size: 14px; text-align: center }



.banner { width: 100%; position: relative; overflow: hidden; }
    .banner .bannerimg { width: 100%; line-height: 0; }
        .banner .bannerimg img { width: 100%; }



    .banner .sloganwrap { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; align-items: center }
    .banner .slogan { font-size: 18px; color: #FFF; flex-flow: column nowrap }
        .banner .slogan .line { width: 80px; height: 0px; display: block; border-top: 0px solid #f49928 }
    .banner .csite { position: absolute; left: 0px; top: 0px; background: rgba(47,47,47,.8) }

    .banner .bannerimgbg { width: 100%; height: 250px; background-size: cover; background-position: center center; background-repeat: no-repeat }
    .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 }


.collegeslogan { width: 100%; background-color: #2e2e2e; padding-top: 80px; padding-bottom: 80px; justify-content: center }
    .collegeslogan .con { font-size: 20px; line-height: 2em; color: #FFF; flex-flow: column nowrap; position: relative; justify-content: center; text-align: center }
        .collegeslogan .con .loganicon { position: absolute; top: -20px; right: -100px }

.infowrap { width: 100%; flex-flow: column nowrap; flex: none }
    .infowrap .singlerow { background-color: #2f2f2f; color: #FFF; flex-flow: column nowrap }
    .infowrap .doublerow { background-color: #FFF; color: #1a1a1a; flex-flow: column nowrap }
.infobox { width: 100%; flex-flow: column nowrap; padding-top: 80px; flex: none }

.infomark { width: 100%; position: relative; }
.infomarkimg { width: 100%; padding: 40px 60px; max-width: 1240px; margin: 0 auto; background-color: #f3be1b; position: relative; z-index: 2 }
    .infomarkimg img { width: 100%; }
.infomarkbg { width: 100%; position: absolute; left: 0; top: 0; height: 100%; }
    .infomarkbg .a { width: 50%; height: 100%; z-index: 1 }
    .infomarkbg .b { width: 50%; height: 100%; background-color: #f3be1b; }
.infomarkmark { width: 100%; justify-content: flex-end; position: absolute; right: 60px; bottom: -35px; z-index: 3 }
    .infomarkmark img { width: 35% }

.info1 { flex-flow: column nowrap }
    .info1 ul { width: 100%; justify-content: center; margin-top: 15px; margin-bottom: 45px; }
        .info1 ul li { width: 90px; height: 90px; margin-left: 50px; margin-right: 50px; position: relative; align-items: center; justify-content: center; text-align: center; color: #2F2F2F; font-size: 14px; }
            .info1 ul li .ling { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; border-radius: 5px; border: 1px solid #f49928; transform: rotate(45deg) }
    .info1 .content { font-size: 16px; color: #2F2F2F; line-height: 1.5em; justify-content: center; text-align: center }

.info2 { padding-bottom: 80px; flex-flow: column nowrap }
    .info2 ul { width: 100%; justify-content: space-between; }
        .info2 ul li { width: 30%; max-width: 300px; }
            .info2 ul li dl { width: 100%; flex-flow: column nowrap }
                .info2 ul li dl dt { width: 100%; color: #FFF; font-size: 18px; margin-bottom: 25px; height: 30px; line-height: 30px; background-color: #f49928; text-align: center; justify-content: center }
                .info2 ul li dl dd { width: 100%; color: #FFF; font-size: 14px; line-height: 2em }

.info3 { width: 100%; position: relative; flex-flow: column nowrap; flex: none }
    .info3 .content { padding-bottom: 40px; font-size: 16px; color: #2F2F2F }
    .info3 .swiperarrow { width: 100%; height: 50px; position: absolute; left: 0px; top: -50px; justify-content: center }
        .info3 .swiperarrow dl { width: 100%; max-width: 1240px; padding-left: 20px; padding-right: 20px; justify-content: flex-end }
            .info3 .swiperarrow dl dd { margin-left: 5px; }
                .info3 .swiperarrow dl dd a { display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #f49928 }
                .info3 .swiperarrow dl dd .iconfont { font-size: 20px; color: #FFF }
    .info3 .swiper { width: 100%; overflow: hidden }

.info4 { padding-bottom: 80px; position: relative; justify-content: space-between }
    .info4 .content { width: 40%; font-size: 16px; color: #FFF; line-height: 1.5em }
    .info4 .imgbox { width: 55%; padding-left: 30px; padding-right: 30px; position: relative; margin-top: -20px }
    .info4 .swiperarrow { width: 100%; height: 40px; position: absolute; left: 0px; top: 50%; margin-top: -20px; justify-content: center }
        .info4 .swiperarrow dl { width: 100%; height: 40px; justify-content: space-between; background-color: #f49928 }
            .info4 .swiperarrow dl dd a { display: inline-block; width: 30px; height: 40px; line-height: 40px; text-align: center; background-color: #f49928 }
            .info4 .swiperarrow dl dd .iconfont { font-size: 20px; color: #FFF }
    .info4 .swiper { width: 100%; overflow: hidden }
        .info4 .swiper .item { width: 100%; padding-left: 15px; padding-right: 15px; }
            .info4 .swiper .item dl { width: 100%; justify-content: space-between }
                .info4 .swiper .item dl dd { width: 30%; }
                    .info4 .swiper .item dl dd img { width: 100%; flex: 0 0 auto }

.info5 { padding-bottom: 80px; flex-flow: column nowrap }
    .info5 ul { width: 100%; justify-content: space-between }
        .info5 ul li { width: 33%; background-color: #666; height: 150px; justify-content: center; align-items: center }
            .info5 ul li img { width: 60%; max-width: 150px; flex: 0 0 auto }

.infomentor { padding-bottom: 80px; position: relative; flex-flow: column nowrap }
    .infomentor .mentor { width: 100%; margin-bottom: 60px; flex-flow: row nowrap; overflow: hidden; position: relative }

        .infomentor .mentor .swiperarrow { width: 35%; height: 43px; position: absolute; left: 0px; bottom: 0px; }
            .infomentor .mentor .swiperarrow dl { width: 100%; border-bottom: 3px solid #f49928 }
                .infomentor .mentor .swiperarrow dl dd { margin-right: 5px; }
                    .infomentor .mentor .swiperarrow dl dd a { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: #f49928 }
                    .infomentor .mentor .swiperarrow dl dd .iconfont { font-size: 20px; color: #FFF }
        .infomentor .mentor .swiper { width: 100%; overflow: hidden }

        .infomentor .mentor .item { width: 100%; height: 100%; position: relative; flex: 0 0 auto }
            .infomentor .mentor .item .intro { width: 35%; height: 100%; padding-bottom: 50px; background-color: #3d3d3d; position: absolute; left: 0px; top: 0px; }
                .infomentor .mentor .item .intro dl { width: 100%; flex-flow: column nowrap; justify-content: center }
                    .infomentor .mentor .item .intro dl dt { width: 100%; text-align: center; justify-content: center }
                    .infomentor .mentor .item .intro dl .a { width: 100%; text-align: center; justify-content: center; margin-top: 20px; margin-bottom: 60px; font-size: 20px; color: #FFF; }
                    .infomentor .mentor .item .intro dl .b { width: 100%; text-align: center; justify-content: center; font-size: 16px; color: #FFF; line-height: 2em; display: block }
            .infomentor .mentor .item .img { width: 100%; padding-left: 35%; align-items: center; background-color: #FFF; }
                .infomentor .mentor .item .img img { width: 100%; flex: 0 0 auto }

    .infomentor .wall { width: 100%; }
        .infomentor .wall img { width: 100%; flex: 0 0 auto }


.infocollege { padding-bottom: 80px; }
    .infocollege ul { width: 100%; flex-flow: row nowrap; justify-content: space-between }
        .infocollege ul li { max-width: 360px; flex: 1 1 auto; position: relative }
            .infocollege ul li a { color: #FFF; display: inline-block; width: 100%; text-align: center; font-size: 18px; line-height: 18px; color: #FFF }
                .infocollege ul li a:hover { color: #f49928 }
                .infocollege ul li a img { width: 100%; flex: 0 0 auto; margin-bottom: 35px; }
                .infocollege ul li a .icon { position: absolute; width: 100%; height: 40px; left: 0px; bottom: 33px; justify-content: center; }
                    .infocollege ul li a .icon .iconfont { display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background-color: #f49928; text-align: center; font-size: 20px; color: #FFF; box-shadow: 0 3px 6px 0 rgba(222,222,222,0.3); }
        .infocollege ul .b { margin-left: 20px; }


.project { align-items: stretch; }
.infobox:last-child .project { padding-bottom: 80px }
.project .levellist { width: 300px; min-height: 450px; flex: 0 0 auto; flex-flow: column nowrap; background: #f49928 url(images/treepic.png) no-repeat center bottom; }
    .project .levellist ul { width: 100%; height: 100%; padding-top: 60px; justify-content: flex-start; flex-flow: column nowrap }
        .project .levellist ul li { display: inline-block; width: 100%; color: #FACC94; padding-left: 60px; padding-bottom: 60px; font-size: 24px; line-height: 1.5em; }
            .project .levellist ul li dl { width: 100%; align-items: center; cursor: pointer; justify-content: space-between }
                .project .levellist ul li dl dt { width: 12px; height: 12px; margin-right: 10px; flex: none }
                .project .levellist ul li dl .a { width: calc(100% - 60px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block !important }
                .project .levellist ul li dl .b { width: 0px; height: 0px; border: 12px solid #f49928; flex: none }
                .project .levellist ul li .cs, .project .levellist ul li dl:hover { color: #FFF }
                    .project .levellist ul li .cs dt { background: #FFF; border-radius: 50%; }
                    .project .levellist ul li .cs .b { border-left: 0px; border-right: 24px solid #FFF }

.project .courselist { width: 100%; padding-left: 60px; padding-right: 60px; padding-bottom: 20px; background-color: #F4F4F4; flex-flow: column nowrap }
    .project .courselist a { display: flex; width: 100%; flex: none }
    .project .courselist dl { width: 100%; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #ebebeb; align-items: center }
        .project .courselist dl dt { width: 30px; font-size: 24px; color: #333; position: relative; justify-content: center; text-align: center }
            .project .courselist dl dt .word { position: relative; z-index: 2 }
            .project .courselist dl dt .line { display: block; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 14px; background-color: #f49928; z-index: 1 }
        .project .courselist dl .a { width: 120px; margin-left: 30px; margin-right: 40px; }
            .project .courselist dl .a img { width: 100%; flex: 0 0 auto }
        .project .courselist dl .b { width: calc(100% - 320px ); color: #333; font-size: 15px; }
        .project .courselist dl .c { width: 100px; height: 36px; }
            .project .courselist dl .c span { display: inline-block; text-align: center; width: 100%; height: 100%; line-height: 34px; border-radius: 18px; border: 1px solid #f49928; font-size: 14px; color: #f49928 }

.coursetop { width: 100%; background-color: #3D3D3D; padding-bottom: 50px; }
    .coursetop .realwrap { flex-flow: column nowrap }
    .coursetop .topinfo { width: 100%; align-items: stretch; justify-content: space-between }
        .coursetop .topinfo .mainimg { width: calc(100% - 400px) }
            .coursetop .topinfo .mainimg img { width: 100%; flex: 0 0 auto }
        .coursetop .topinfo .simple { width: 370px; padding: 30px; background-color: #2F2F2F; flex-flow: column nowrap; color: #FFF; position: relative; }
            .coursetop .topinfo .simple .fav { position: absolute; top: 10px; right: 10px; }
                .coursetop .topinfo .simple .fav .iconfont { font-size: 25px; color: #ff0700 }
            .coursetop .topinfo .simple .mentor { width: 100%; margin-bottom: 30px; }
                .coursetop .topinfo .simple .mentor dl { width: 100%; }
                    .coursetop .topinfo .simple .mentor dl dt { width: 80px; margin-right: 20px; align-items: center }
                        .coursetop .topinfo .simple .mentor dl dt img { width: 100%; height: 80px; border-radius: 50%; }
                    .coursetop .topinfo .simple .mentor dl dd { flex-flow: column nowrap; justify-content: center }
                        .coursetop .topinfo .simple .mentor dl dd span { display: block }
                        .coursetop .topinfo .simple .mentor dl dd .a { font-size: 16px; }
                        .coursetop .topinfo .simple .mentor dl dd .b { font-size: 12px; margin-top: 15px; }
            .coursetop .topinfo .simple .info { width: 100%; padding-bottom: 25px; }
                .coursetop .topinfo .simple .info dl { width: 100%; }
                .coursetop .topinfo .simple .info .tool { align-items: center }
                .coursetop .topinfo .simple .info dl dt { width: 80px; flex: 0 0 auto }
                .coursetop .topinfo .simple .info dl dd { margin-left: 10px; }

            .coursetop .topinfo .simple .infobtn { width: 100%; padding-bottom: 25px; justify-content: flex-end; flex: none }

.coursebody { width: 100%; background: #eff5ff; padding-top: 30px; padding-bottom: 50px; }
    .coursebody .realwrap { width: 100%; flex-flow: column nowrap; background: #FFF }
    .coursebody .courseintro { padding-top: 50px; padding-bottom: 30px; flex-flow: column nowrap }
        .coursebody .courseintro .con { width: 100%; padding-left: 50px; padding-right: 50px; font-size: 16px; color: #2F2F2F; line-height: 1.5em }
    .coursebody .coursetopic { width: 100%; padding-top: 50px; flex-flow: column nowrap; padding-bottom: 50px; }
        .coursebody .coursetopic .list { width: 100%; flex-flow: column nowrap }
        .coursebody .coursetopic .laster { border-bottom: 1px dotted #CCC; padding-bottom: 10px; margin-bottom: 10px; }
        .coursebody .coursetopic .list a { font-size: 18px; color: #666 }
            .coursebody .coursetopic .list a:hover { background: #dce9fd; }
        .coursebody .coursetopic .list dl { width: 100%; height: 40px; line-height: 40px; padding-left: 50px; padding-right: 50px; }
            .coursebody .coursetopic .list dl dt { width: 50px; justify-content: center }
            .coursebody .coursetopic .list dl .a { width: calc(100% - 200px) }
            .coursebody .coursetopic .list dl .b { width: 150px; justify-content: flex-end }

        .coursebody .coursetopic .more { width: 100%; padding-top: 30px; justify-content: center; font-size: 14px; color: #B3B3B3; text-align: center; }
            .coursebody .coursetopic .more .iconfont { margin-top: 10px; color: #f49928 }

    .coursebody .coursementor { width: 100%; padding-top: 50px; padding-bottom: 30px; background: #2E2E2E; flex-flow: column nowrap; color: #FFF; font-size: 16px; }
        .coursebody .coursementor .subtitle .word { color: #FFF }
        .coursebody .coursementor .mentorface { width: 100%; flex-flow: column nowrap; align-items: center; justify-content: center; text-align: center; margin-bottom: 20px; }
            .coursebody .coursementor .mentorface img { width: 110px; height: 110px; border-radius: 50%; margin-bottom: 15px; }
        .coursebody .coursementor .con { width: 100%; padding-left: 50px; padding-right: 50px; }
        .coursebody .coursementor .authorwrap { width: 100%; padding: 50px; flex-flow: column wrap }
        .coursebody .coursementor .author { width: 100%; align-items: center }
            .coursebody .coursementor .author .swiperarrow { width: 30px; }
                .coursebody .coursementor .author .swiperarrow a i { font-size: 30px; font-weight: bold; color: #FFF; }
            .coursebody .coursementor .author .swiper { width: calc(100% - 60px); }
                .coursebody .coursementor .author .swiper .item { width: 100%; padding-left: 30px; padding-right: 30px; }
                    .coursebody .coursementor .author .swiper .item dl { width: 100%; justify-content: space-between }
                        .coursebody .coursementor .author .swiper .item dl dd { width: 30%; }
                            .coursebody .coursementor .author .swiper .item dl dd img { width: 100%; flex: 0 0 auto }

.learnwrap { width: 100%; height: 100%; padding-bottom: 20px; padding-top: 20px; }
.learnmainwrap { width: 100%; height: 100%; }
.learnmp4 { width: 100%; height: 100%; }
    .learnmp4 video { width: 100%; height: 100%; }

.learnmainwrap .learnmain { width: 100%; height: 100%; position: relative; }
.learnvideo { width: 100%; }
.winmask { position: absolute; width: 100%; height: 100%; background: #000; top: 0px; left: 0px; z-index: 9999 }

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

            .learnside .learnsideinfo .infocon .list { width: 100%; flex-flow: column nowrap }
                .learnside .learnsideinfo .infocon .list a { font-size: 14px; color: #FFF }
                    .learnside .learnsideinfo .infocon .list a:hover, .learnside .learnsideinfo .infocon .list a.cs { background: #595959; }
                .learnside .learnsideinfo .infocon .list dl { width: 100%; height: 40px; line-height: 40px; }
                    .learnside .learnsideinfo .infocon .list dl dt { width: 50px; justify-content: center }
                    .learnside .learnsideinfo .infocon .list dl .a { width: calc(100% - 150px); overflow: hidden }
                    .learnside .learnsideinfo .infocon .list dl .b { width: 80px; justify-content: flex-end }


.loginbody { position: fixed; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; align-items: center; }
.loginwrap { width: 100%; max-width: 1200px; margin: 0 auto; border-radius: 20px; overflow: hidden; background: #FFF; align-items: center; position: relative }
.loginhome { position: absolute; right: 15px; top: 15px; z-index: 99 }
.loginbg { width: 58%; }
    .loginbg img { width: 100%; flex: none }
.loginlayer { width: 42%; height: 100%; position: relative; z-index: 1 }
    .loginlayer .loginarrow { width: 0px; height: 0px; border-top: 25px solid transparent; border-left: 0px solid transparent; border-bottom: 25px solid transparent; border-right: 60px solid #FFF; position: absolute; top: 50%; margin-top: -25px; left: -60px; }

    .loginlayer a { color: #ff8d01 }
    .loginlayer .loginform { width: 90%; max-width: 290px; margin: 0 auto; flex-flow: column nowrap; font-size: 14px; }
        .loginlayer .loginform .logintitle { width: 100%; padding-bottom: 40px; font-size: 24px; color: #666666; justify-content: center; }
        .loginlayer .loginform .logininput { width: 100%; align-items: center }
            .loginlayer .loginform .logininput i { width: 20px; font-size: 16px; margin-right: 10px; }
            .loginlayer .loginform .logininput .txt { width: calc(100% - 30px); border: 0px solid #FFF; border: none; border-bottom: 1px solid #cccccc; font-size: 14px; height: 30px; line-height: 30px; }
            .loginlayer .loginform .logininput .txt2 { width: calc(100% - 140px); border: 0px solid #FFF; border: none; border-bottom: 1px solid #cccccc; font-size: 14px; height: 30px; line-height: 30px; }
            .loginlayer .loginform .logininput .btnsms { font-size: 14px; display: inline-block; width: 100px; margin-left: 10px; border: 1px solid #ff8d01; border-radius: 5px; line-height: 25px; text-align: center }
        .loginlayer .loginform .loginmsg { width: 100%; height: 20px; line-height: 20px; color: #F00; padding-left: 30px; }
        .loginlayer .loginform .logincheck { padding-top: 10px; font-size: 12px; line-height: 12px; align-items: center }
            .loginlayer .loginform .logincheck .el-checkbox__label { font-size: 12px; }
        .loginlayer .loginform .loginbtn { width: 100%; padding-top: 10px; }
            .loginlayer .loginform .loginbtn a { display: inline-block; width: 100%; height: 35px; line-height: 35px; font-size: 16px; color: #FFF; border-radius: 5px; background: #ff8d01; text-align: center }
        .loginlayer .loginform .loginlink { width: 100%; padding-top: 20px; justify-content: space-between }
        .loginlayer .loginform .loginlink2 { width: 100%; padding-top: 20px; justify-content: flex-end }




.memwrap { width: 100%; padding-top: 20px; padding-bottom: 40px; background: #eff5ff; justify-content: center; }
.membody { width: 100%; flex-flow: column nowrap }
.memtop { width: 100%; height: 160px; justify-content: space-between; align-items: center; background: #FFF; margin-bottom: 20px; }
    .memtop .topleft { height: 80px; align-items: center; padding-left: 50px; }
        .memtop .topleft .avator { width: 80px; height: 80px; border-radius: 50%; overflow: hidden }
            .memtop .topleft .avator img { width: 100%; height: 100%; }
        .memtop .topleft .basicinfo { padding-left: 30px; }
            .memtop .topleft .basicinfo dl { flex-flow: column nowrap }
                .memtop .topleft .basicinfo dl dt { line-height: 30px }
                    .memtop .topleft .basicinfo dl dt a { font-size: 18px; color: #333; line-height: 30px }
                .memtop .topleft .basicinfo dl dd { line-height: 30px; font-size: 14px; color: #4c4c4c }
                    .memtop .topleft .basicinfo dl dd span { display: inline-block; padding-right: 50px }
                    .memtop .topleft .basicinfo dl dd a { color: #4c4c4c }
                        .memtop .topleft .basicinfo dl dd a:hover { color: #f49928 }
    .memtop .topright dl dd { margin-right: 50px; }
        .memtop .topright dl dd a { display: flex; flex-flow: column nowrap; justify-content: center; text-align: center; font-size: 16px; }
        .memtop .topright dl dd .iconfont { display: inline-block; color: #f49928; margin-bottom: 5px; font-size: 18px; }

.myavator { width: 400px; height: 350px; flex-flow: column nowrap; align-items: center }
    .myavator .title { width: 100%; height: 50px; line-height: 50px; background: #f49928; color: #FFF; font-size: 18px; justify-content: center }
    .myavator .con { width: 200px; height: 200px; margin-top: 50px; margin-bottom: 50px; }
.memmain { width: 100%; }
    .memmain .memnav { width: 240px; padding-top: 40px; padding-bottom: 40px; background: #FFF; min-height: 500px; }
        .memmain .memnav dl { width: 100%; flex-flow: column nowrap }
            .memmain .memnav dl dd { width: 100%; padding-top: 2px; padding-bottom: 2px; }
                .memmain .memnav dl dd a { display: inline-block; width: 100%; height: 48px; line-height: 48px; padding-left: 50px; color: #4c4c4c }
                    .memmain .memnav dl dd a .iconfont { display: inline-block; font-size: 16px; padding-right: 10px; }
                    .memmain .memnav dl dd a.cs, .memmain .memnav dl dd a:hover { color: #e3aa24 }

    .memmain .memcon { width: calc(100% - 260px); margin-left: 20px; background: #FFF; padding: 40px; flex-flow: column nowrap }
        .memmain .memcon .memsubnav { width: 100%; margin-bottom: 20px; position: relative; z-index: 11; flex-flow: column nowrap; }
            .memmain .memcon .memsubnav .navbtn { position: absolute; right: 20px; top: 13px; }
                .memmain .memcon .memsubnav .navbtn a { display: inline-block; padding-left: 25px; padding-right: 25px; height: 30px; line-height: 30px; background: #f49928; color: #FFF; font-size: 14px; border-radius: 5px }
            .memmain .memcon .memsubnav .navarrow { position: absolute; right: 0px; top: 18px; }
                .memmain .memcon .memsubnav .navarrow a { display: inline-block; width: 20px; height: 20px; line-height: 20px; background: #f49928; color: #FFF; border-radius: 4px; margin-left: 2px; text-align: center; }
                    .memmain .memcon .memsubnav .navarrow a .iconfont { font-size: 16px; }
            .memmain .memcon .memsubnav .navline { width: 100%; height: 51px; border-bottom: 1px solid #e6e6e6; position: absolute; left: 0px; top: 0px; z-index: -1 }
            .memmain .memcon .memsubnav .memsubproject { width: calc(100% - 80px); min-height: 51px; overflow: hidden; flex: none; }
                .memmain .memcon .memsubnav .memsubproject dl { min-height: 51px; flex: none; }
                    .memmain .memcon .memsubnav .memsubproject dl dd { padding-right: 40px; align-items: center; flex: none }
                        .memmain .memcon .memsubnav .memsubproject dl dd:first-child { background: transparent }
                        .memmain .memcon .memsubnav .memsubproject dl dd a, .memmain .memcon .memsubnav .memsubproject dl dd span { display: inline-block; padding-left: 5px; padding-right: 5px; height: 50px; line-height: 50px; font-size: 1em; color: #999; }
                        .memmain .memcon .memsubnav .memsubproject dl dd .cs, .memmain .memcon .memsubna .memsubprojectv dl dd a:hover { color: #4C4C4C; border-bottom: 3px solid #e3aa24 }
                        .memmain .memcon .memsubnav .memsubproject dl dd .iconfont { font-size: 14px; margin-right: 5px; margin-left: 5px; }

            .memmain .memcon .memsubnav .memsubproject2 { width: 100%; height: 51px; line-height: 50px; }
                .memmain .memcon .memsubnav .memsubproject2 .iconfont { font-size: 14px; }
                .memmain .memcon .memsubnav .memsubproject2 .m2select { display: inline-block; padding-left: 10px; padding-right: 10px; height: 50px; line-height: 50px; font-size: 1em; color: #e3aa24; }
                    .memmain .memcon .memsubnav .memsubproject2 .m2select .iconfont { font-size: 16px; margin-right: 5px; }

                .memmain .memcon .memsubnav .memsubproject2 .m2item { position: relative; }
.memmainnavmore { min-width: 200px; position: absolute; left: 0px; top: 52px; z-index: 10001; background-color: #FFF; box-shadow: 0 8px 16px 0 #666; padding-bottom: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
    .memmainnavmore dl { width: 100%; flex-flow: column nowrap; height: auto; padding-bottom: 10px; padding-top: 10px; }
        .memmainnavmore dl dd { width: 100%; padding: 5px 10px; }
            .memmainnavmore dl dd a { display: inline-block; padding-right: 10px; height: 25px; line-height: 25px; font-size: 0.875em; white-space: nowrap }
            .memmainnavmore dl dd .iconfont { font-size: 16px; margin-right: 10px }
            .memmainnavmore dl dd a.cs, .memmainnavmore dl dd a:hover { color: #e3aa24; border-bottom: 0px solid #e3aa24 }

.memsubnavmore { min-width: 160px; position: absolute; left: 14px; top: 52px; z-index: 10001; background-color: #FFF; box-shadow: 0 8px 16px 0 #666; padding-bottom: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
    .memsubnavmore dl { width: 100%; flex-flow: column nowrap; height: auto; padding-bottom: 10px; padding-top: 10px; }
        .memsubnavmore dl dd { width: 100%; padding: 5px 10px; }
            .memsubnavmore dl dd a { display: inline-block; padding-left: 10px; padding-right: 10px; height: 25px; line-height: 25px; font-size: 0.875em; white-space: nowrap; }
                .memsubnavmore dl dd a.cs, .memsubnavmore dl dd a:hover { color: #e3aa24; border-bottom: 0px solid #e3aa24 }


.memcon .memsearch { padding-top: 20px; }
.memsearch { width: 100%; justify-content: space-between; flex: none }
    .memsearch .memselect { max-width: 40%; margin-left: 10px; }
        .memsearch .memselect:first-child { margin-left: 0px; }
    .memsearch .left { width: 50%; flex: auto }
    .memsearch .right { padding-left: 10px; flex: none }



.memmain .memcon .courselevel { width: 100%; flex-flow: row wrap }
    .memmain .memcon .courselevel a { display: inline-block; height: 24px; line-height: 24px; font-size: 12px; color: #f49928; border: 1px solid #f49928; border-radius: 12px; padding-left: 16px; padding-right: 16px; margin-right: 16px; margin-top: 5px; margin-bottom: 5px; }
        .memmain .memcon .courselevel a:hover, .memmain .memcon .courselevel a.cs { color: #FFF; background: #f49928 }
.memmain .memcon .memcourse { width: 100%; flex-flow: column nowrap; }
    .memmain .memcon .memcourse .list { width: 100%; flex-flow: row wrap; justify-content: space-between; padding-top: 30px; padding-bottom: 10px; border-top: 1px dashed #e6e6e6 }
        .memmain .memcon .memcourse .list:first-child { border-top: 0px dashed #e6e6e6; padding-top: 10px; }
        .memmain .memcon .memcourse .list dl { width: 30%; padding-bottom: 20px; overflow: hidden; flex-flow: column nowrap }
        .memmain .memcon .memcourse .list .placeholder { height: 0px; padding-bottom: 0px; }
        .memmain .memcon .memcourse .list dl dt { width: 100%; text-align: center; overflow: hidden; position: relative }
            .memmain .memcon .memcourse .list dl dt span { position: absolute; left: 0; bottom: 0; width: 100%; padding-right: 10px; height: 24px; line-height: 24px; background-color: rgba(0,0,0,.6); text-align: right }
                .memmain .memcon .memcourse .list dl dt span .iconfont { font-size: 16px; color: #FFF }
            .memmain .memcon .memcourse .list dl dt a { display: inline-block; width: 100%; }
            .memmain .memcon .memcourse .list dl dt img { width: 100%; display: block }
        .memmain .memcon .memcourse .list dl dd { width: 100%; text-align: center; padding-top: 10px; flex-flow: row nowrap; justify-content: space-between }
            .memmain .memcon .memcourse .list dl dd a { font-size: 14px; color: #4c4c4c; max-width: calc(100% - 60px) }
            .memmain .memcon .memcourse .list dl dd .b { display: inline-block; font-size: 12px; padding: 0px 8px; height: 16px; line-height: 16px; color: #FFF; border-radius: 8px; }
            .memmain .memcon .memcourse .list dl dd .b1 { background: #ffc309; }
            .memmain .memcon .memcourse .list dl dd .b2 { background: #37bd73; }
            .memmain .memcon .memcourse .list dl dd .b3 { background: #496af7; }

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

.memmain .memcon .account { width: 100%; flex-flow: column nowrap; }
    .memmain .memcon .account .part { width: 100%; justify-content: space-between; align-items: center; padding-top: 30px; padding-bottom: 30px; border-top: 1px dashed #e6e6e6 }
        .memmain .memcon .account .part:first-child { border-top: 0px dashed #e6e6e6 }
        .memmain .memcon .account .part .left dl { align-items: center }
            .memmain .memcon .account .part .left dl dt { width: 60px; height: 60px; border-radius: 50%; background: #61c408; justify-content: center; align-items: center }
                .memmain .memcon .account .part .left dl dt .iconfont { color: #FFF; font-size: 30px; }
            .memmain .memcon .account .part .left dl dd { padding-left: 20px; font-size: 16px; color: #4D4D4D; flex-flow: column nowrap }
                .memmain .memcon .account .part .left dl dd .a { display: inline-block; }
                    .memmain .memcon .account .part .left dl dd .a .a1 { display: inline-block; padding-right: 30px; }
                .memmain .memcon .account .part .left dl dd .b { display: inline-block; font-size: 12px; color: #999; margin-top: 10px; }
        .memmain .memcon .account .part .right a { display: inline-block; padding-left: 30px; padding-right: 30px; height: 35px; line-height: 35px; border: 1px solid #f49928; color: #f49928; font-size: 14px; border-radius: 5px }

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

    .memmain .memcon .account .mobiletop { width: 100%; max-width: 540px; margin: 0 auto; padding-top: 60px; padding-bottom: 50px; flex-flow: column nowrap; }
        .memmain .memcon .account .mobiletop ul { width: 100%; font-size: 16px; justify-content: space-between; padding-bottom: 30px; border-bottom: 3px solid #f49928 }
            .memmain .memcon .account .mobiletop ul li { flex-flow: column nowrap; text-align: center; align-items: center; position: relative; }
                .memmain .memcon .account .mobiletop ul li span { display: block; width: 24px; height: 24px; border-radius: 50%; color: #808080; border: 1px solid #808080; text-align: center; line-height: 22px; margin-bottom: 10px; }
            .memmain .memcon .account .mobiletop ul .cs li i { width: 0; height: 0; line-height: 0 }
            .memmain .memcon .account .mobiletop ul .cs { color: #f49928; }
                .memmain .memcon .account .mobiletop ul .cs span { color: #f49928; border: 1px solid #f49928 }
                .memmain .memcon .account .mobiletop ul .cs i { position: absolute; bottom: -30px; left: 50%; margin-left: -15px; border: 15px solid #FFF; border-bottom: 15px solid #f49928; }


    .memmain .memcon .account .mymobile { width: 100%; max-width: 360px; margin: 0 auto; flex-flow: column nowrap; padding-top: 20px; }
.myinput input, .myinput2 input { border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.mytip { width: 100%; font-size: 14px; color: #808080; padding-bottom: 20px; justify-content: center }
.mysuccess { width: 50px; height: 50px; margin: 0 auto; border-radius: 50%; background: #61c408; justify-content: center; align-items: center; margin-bottom: 30px; }
    .mysuccess .iconfont { color: #FFF; font-size: 24px; }
.myinput { margin-bottom: 20px }
    .myinput .txt { width: 100%; border: 1px solid #808080; font-size: 14px; height: 40px; line-height: 40px; margin: 0px; padding: 0px 15px; border-radius: 5px; color: #808080 }
.myinput2 { margin-bottom: 20px; justify-content: space-between }
    .myinput2 .txt { width: 58%; border: 1px solid #808080; font-size: 14px; height: 40px; line-height: 40px; margin: 0px; padding: 0px 15px; border-radius: 5px; color: #808080 }
    .myinput2 .btnsms { font-size: 14px; display: inline-block; width: 36%; border: 1px solid #f49928; border-radius: 5px; color: #f49928; line-height: 40px; text-align: center }
.mybtn { width: 100%; padding-top: 20px; }
    .mybtn a { display: inline-block; width: 100%; height: 40px; line-height: 40px; background: #f49928; color: #FFF; text-align: center; border-radius: 5px; }


.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: 100%; padding-bottom: 30px; flex-flow: column nowrap }
    .mylist dl { width: 100%; padding-bottom: 10px; padding-top: 10px; }
    .mylist .listheader { font-weight: bold; line-height: 20px; margin-bottom: 20px; background: #9ac0ff; color: #FFF; 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: #f49928 }
    .mylist .listinfo dl:nth-child(2n) { background-color: #f5f5f5; }
    .mylist dl dd { justify-content: center; align-items: center; flex: auto }
        .mylist dl dd span { display: inline-block }
    .mylist .ffpage { margin-top: 30px; }

    .mylist .avg dt, .mylist .avg dd { width: 150px; justify-content: stretch; text-align: center; height: 24px; line-height: 24px; flex-flow: column nowrap; overflow: hidden; padding-left: 5px; padding-right: 5px; }
    .mylist .avg .progress { flex-flow: row nowrap; justify-content: center; position: relative }
    .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 .info { width: 30px; justify-content: flex-end; font-size: 14px; align-items: center; height: 100%; }
    .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; margin-top: 30px; }
    .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: #174bf3; 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 }




.hwdetail { width: 100%; padding: 50px 60px; height: 100%; flex-flow: column nowrap; color: #4c4c4c; font-size: 16px; line-height: 1.5em; position: relative }
    .hwdetail .title { width: 100%; height: 24px; line-height: 24px; margin-bottom: 26px; padding-left: 16px; border-left: 8px solid #f49928; color: #f49928; font-size: 24px; }
    .hwdetail .con { width: 100%; height: calc(100% - 50px) }
    .hwdetail .linkright { width: 100%; justify-content: flex-end; margin-top: 20px; }
        .hwdetail .linkright .upbtn { display: inline-block; padding: 0px 30px; font-size: 16px; line-height: 40px; color: #FFF; background: #f49928; border-radius: 5px }
    .hwdetail .linesp { width: 100%; border-bottom: 1px dotted #7f7f7f; height: 20px; margin-bottom: 20px; }
    .hwdetail .attach { width: 100%; align-items: center }
        .hwdetail .attach a { display: flex; align-items: center; color: #4c4c4c }
        .hwdetail .attach .icon { width: 40px; height: 40px; margin-right: 30px; }
    .hwdetail .hwbacktitle { width: 100%; margin-top: 50px; margin-bottom: 10px; font-size: 16px; color: #f49928 }
    .hwdetail .hwback { display: block; width: 100%; padding: 30px; border-radius: 5px; color: #FFF; font-size: 14px; line-height: 1.5em; background: #595959 }

    .hwdetail .input { width: 100%; justify-content: center }
        .hwdetail .input textarea { width: 80%; height: 150px; padding: 10px; border-radius: 10px; }
    .hwdetail .inputbtn { width: 80%; margin-left: 10%; justify-content: flex-end; padding-top: 20px; }



.pagemain { width: 100%; max-width: 1240px; padding-left: 20px; padding-right: 20px; margin: 0 auto; padding-top: 80px; flex: 0 0 auto }
.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% }

    .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; }



.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 }


.demandwrap { flex-flow: column nowrap; padding-top: 10px; padding-bottom: 40px; }
.demandlist { width: 100%; flex-flow: row wrap; justify-content: space-between; margin-bottom: 20px; }
.demanditem { width: 30%; flex-flow: column nowrap; cursor: pointer; }
.demanditemborder { border: 1px solid #e5e5e5; margin-top: 20px; margin-bottom: 20px; padding-bottom: 20px; }
.demanditem dt { width: 100%; }
    .demanditem dt img { width: 100%; }
.demanditem dd { width: 100%; padding-top: 10px; padding-left: 16px; padding-right: 16px; }

.demandoptionwrap { width: 100%; padding-top: 40px; padding-bottom: 40px; background-color: #f1f9fc }
.demandoption { flex-flow: row nowrap }
    .demandoption .doct { flex: none; width: 70px; }
        .demandoption .doct dl { width: 100%; flex-flow: column nowrap }
            .demandoption .doct dl dd { width: 100% }
                .demandoption .doct dl dd a { font-size: 20px; line-height: 40px; color: #999999 }
                    .demandoption .doct dl dd a:hover, .demandoption .doct dl dd a.cs { color: #000 }
    .demandoption .dosp { flex: none; margin-left: 20px; margin-right: 20px; width: 4px; background-color: #f3be1b; border-radius: 2px; }
    .demandoption .dock { width: 50%; flex: auto; }
        .demandoption .dock dl { width: 100%; flex-flow: row nowrap; justify-content: space-between }
            .demandoption .dock dl dd { width: 120px; height: 120px; padding: 10px; }
                .demandoption .dock dl dd a { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #FFF; border: 2px solid #FFF; border-radius: 8px; text-align: center; color: #4c4c4c }
                    .demandoption .dock dl dd a.cs, .demandoption .dock dl dd a:hover { border: 2px solid #f3be1b }
                    .demandoption .dock dl dd a img { display: block; width: 100%; max-width: 50px }
.demandmain { width: 100%; flex-flow: column nowrap; background-color: #eff1f4 }

.demandsearch { width: 100%; justify-content: flex-end; padding-top: 30px; }
    .demandsearch .optioninput { width: 100%; max-width: 450px; border: 2px solid #f49928; border-radius: 20px; overflow: hidden }
        .demandsearch .optioninput input { border: none }
        .demandsearch .optioninput .el-input-group__append { background-color: #f49928; border: none; flex: none; width: 100px; text-align: center; justify-content: center }
            .demandsearch .optioninput .el-input-group__append a { font-size: 18px; color: #FFF; line-height: 40px; }

.infopage { width: 100%; flex-flow: column nowrap }
    .infopage .infowrap .infobox { padding: 0 }
    .infopage .infowrap .singlerow .subtitle .word { color: #FFF; }
    .infopage .infowrap .singlerow .editor2 { color: #FFF }
    .infopage .infowrap .singlerow .infosub { flex-flow: row-reverse nowrap }
    .infopage .infowrap .doublerow .infosub { flex-flow: row nowrap }
.infopage2 .infopage .infowrap .singlerow .infosub { flex-flow: row nowrap }
.infopage2 .infopage .infowrap .doublerow .infosub { flex-flow: row-reverse nowrap }

.infosub { justify-content: space-between }



    .infosub .editor2 { font-size: 1em; line-height: 1.5em; color: #1a1a1a }
    .infosub .infosub1 { width: 48%; flex-flow: column nowrap; padding-top: 80px; padding-bottom: 80px; }
        .infosub .infosub1 .editor2 { line-height: 2em }
            .infosub .infosub1 .editor2 a { color: #f49928 }
    .infosub .infosubcontact { width: 48%; flex-flow: column nowrap; padding-top: 80px; padding-bottom: 80px; }
        .infosub .infosubcontact .editor2 { line-height: 2.5em }
            .infosub .infosubcontact .editor2 .iconfont { margin-right: 10px; }
    .infosub .infosub2 { width: 48%; flex-flow: column nowrap; margin-top: 60px; margin-bottom: 60px; overflow: hidden; flex: none }
        .infosub .infosub2 .infosub2img { width: 100%; }
        .infosub .infosub2 iframe { position: relative; margin-top: -50px; }
    .infosub .infosub3 { width: 100%; flex-flow: column nowrap; padding-top: 80px; padding-bottom: 80px; }
    .infosub .infosubmore { width: 100%; padding-top: 30px; padding-bottom: 30px; justify-content: flex-end }

.infoacad1 { width: 100%; margin-top: 80px; margin-bottom: 40px }
    .infoacad1 .infoacadsubitem { width: 50%; }
        .infoacad1 .infoacadsubitem img { width: 100% }
.infoacad2 { width: 100%; position: absolute; left: 0; top: 0; justify-content: space-between; }
    .infoacad2 .infoacadsubitem { width: calc(50% - 20px); padding-top: 40px; padding-bottom: 40px; position: relative; z-index: 2 }
        .infoacad2 .infoacadsubitem img { width: 100%; line-height: 0; display: block }

.infoacad3 .infoacad2a { width: 100%; background-color: #f3be1b; position: absolute; top: 50%; left: 0; transform: translateY(-50%); align-items: center; justify-content: space-between; z-index: 0 }
    .infoacad3 .infoacad2a .infoacadsubiteminfo { width: calc(50% - 20px); padding-top: 40px; padding-bottom: 40px; color: #FFF; font-size: 18px; line-height: 1.5em; align-content: center }
        .infoacad3 .infoacad2a .infoacadsubiteminfo img { width: 100%; line-height: 0; display: block }

.infoacad3 { width: 100%; position: relative; justify-content: space-between; flex-flow: row wrap; margin-bottom: 80px; }
    .infoacad3 .infoacadsubitem { width: calc(50% - 20px); padding-top: 40px; }
        .infoacad3 .infoacadsubitem img { width: 100%; line-height: 0; display: block }

.infoacadsub { flex-flow: row wrap; justify-content: space-between }

.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 }
        .infosubnews .a .iconfont { font-size: 12px; margin-right: 8px; }
    .infosubnews .b { padding-left: 20px; font-size: 16px; color: #999999 }
    .infosubnews .c { padding-left: 20px; font-size: 16px; color: #1a1a1a; line-height: 2em; min-height: 80px; align-items: flex-start }
    .infosubnews .d { padding-left: 20px; justify-content: flex-end }
        .infosubnews .d a { font-size: 16px; color: #f49928 }

.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; }


.singlerow .infosubnews .a { color: #FFF }
    .singlerow .infosubnews .a a { color: #FFF; width: calc(100% - 30px) }
.singlerow .infosubnews .b { color: #FFF }
.singlerow .infosubnews .c { color: #FFF; }

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



.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 }

    .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; }

.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 }

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


@media screen and (max-width: 1200px) {
    .banner .slogan { font-size: 18px; line-height: 36px; 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; }
    .banner .slogan { font-size: 14px; line-height: 28px; padding: 20px 30px }
    .project .levellist { width: 200px; min-height: 150px; }
        .project .levellist ul { padding-top: 30px; }
            .project .levellist ul li { padding-bottom: 30px; padding-left: 10px; font-size: 14px; word-break: break-all }

    .memmain .memnav { display: none }
    .memmain .memcon { width: 100%; margin-left: 0px; padding: 10px; }
        .memmain .memcon .memsubnav { overflow: visible }
    .memtop .topleft .basicinfo dl dd .basicinfomore { display: none }


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

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

    .loginbg { width: 65%; }
    .loginlayer { width: 35%; }
        .loginlayer .loginform { max-width: 250px; }

    .infomarkimg { padding: 30px 40px; }
    .infomarkmark { right: 40px; bottom: -25px }


    .infoacad3 .infoacad2a .infoacadsubiteminfo { padding-top: 20px; padding-bottom: 20px; font-size: 16px; }

    .infoblank { height: 60px }
    .infoacad1 { margin-top: 60px; margin-bottom: 30px }
    .pagemain { padding-top: 60px }
    .pagecontact { padding-bottom: 60px; }
    .infobox:last-child .project { padding-bottom: 60px }
    .infocollege { padding-bottom: 60px; }
    .infomentor { padding-bottom: 60px; }
    .info5 { padding-bottom: 60px; }
    .info4 { padding-bottom: 60px; }
    .info2 { padding-bottom: 60px; }
    .infobox { padding-top: 60px; }
    .pagenews { padding-bottom: 60px; }
    .infosub .infosub1 { padding-top: 60px; padding-bottom: 60px; }
    .infosub .infosubcontact { padding-top: 60px; padding-bottom: 60px; }
        .infosub .infosubcontact .editor2 { line-height: 2.5em }
    .infosub .infosub3 { padding-top: 60px; padding-bottom: 60px; }
    .infosub .infosub2 { margin-top: 40px; margin-bottom: 40px; }
    .infosub .infosubmewswrap { padding-top: 40px; padding-bottom: 40px; }
    .infoacad3 { margin-bottom: 60px; }


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


    .demandoption .doct { width: 50px; }
        .demandoption .doct dl dd a { font-size: 16px; line-height: 32px; }
    .demandoption .dock dl dd { width: 90px; height: 90px; }
        .demandoption .dock dl dd a { font-size: 12px }
            .demandoption .dock dl dd a img { max-width: 40px; }
}

@media screen and (max-width: 800px) {
    .maintitle { margin-bottom: 30px !important; }
        .maintitle .word { font-size: 20px; line-height: 20px; }
    .subtitle { margin-bottom: 15px; }
        .subtitle .word { font-size: 18px; line-height: 24px; }
    .thirdtitle { margin-bottom: 15px; }
        .thirdtitle dl dt { width: 80px; height: 12px; background-color: #f49928 }
        .thirdtitle dl dd { padding-left: 20px; font-size: 14px; color: #f49928 }

    .banner .slogan { font-size: 12px; line-height: 20px; padding: 10px }

    .maintitle .word { font-size: 20px; }

    .info1 ul { justify-content: space-around; margin-top: 15px; margin-bottom: 25px; }
        .info1 ul li { width: 70px; height: 70px; margin-left: 20px; margin-right: 20px; font-size: 14px; }
    .info1 .content { font-size: 12px; }

    .info2 { padding-bottom: 20px; }
        .info2 ul { justify-content: space-around; flex-flow: row wrap }
            .info2 ul li { width: 100%; max-width: 100%; margin-bottom: 20px; }
                .info2 ul li dl dt { font-size: 14px; margin-bottom: 15px; }
                .info2 ul li dl dd { font-size: 12px; line-height: 1.5em }

    .info3 .swiperarrow { height: 24px; top: -24px; }
        .info3 .swiperarrow dl dd a { width: 24px; height: 24px; line-height: 24px; }
        .info3 .swiperarrow dl dd .iconfont { font-size: 16px; }


    .info4 { flex-flow: row wrap }

        .info4 .content { width: 100%; font-size: 14px; }
        .info4 .imgbox { width: 100%; padding-left: 25px; padding-right: 25px; margin-top: 20px }
        .info4 .swiperarrow { height: 40px; position: absolute; left: 0px; top: 50%; margin-top: -20px; justify-content: center }
            .info4 .swiperarrow dl dd a { width: 25px; }
            .info4 .swiperarrow dl dd .iconfont { font-size: 16px; }

    .infocollege ul { flex-flow: row wrap; justify-content: center }
        .infocollege ul li { max-width: 70%; width: 70%; margin-bottom: 20px; margin-top: 10px; }
            .infocollege ul li a { font-size: 16px; }

        .infocollege ul .b { margin-left: 0px; }

    .infomentor .mentor { width: 100%; margin-bottom: 30px; flex-flow: row nowrap; overflow: hidden; position: relative }
        .infomentor .mentor .swiperarrow { height: 23px; }
            .infomentor .mentor .swiperarrow dl dd a { width: 20px; height: 20px; line-height: 20px; }
            .infomentor .mentor .swiperarrow dl dd .iconfont { font-size: 16px; }
        .infomentor .mentor .item .intro { padding-bottom: 30px; }
            .infomentor .mentor .item .intro dl dt img { width: 30px; }
            .infomentor .mentor .item .intro dl .a { margin-top: 10px; margin-bottom: 0px; font-size: 14px; }
            .infomentor .mentor .item .intro dl .b { display: none }

    .banner .csite { display: none }
    .collegeslogan { padding-top: 10px; padding-bottom: 10px; }
        .collegeslogan .con .icon { top: -5px; right: -30px; }


    .project .courselist { padding-left: 30px; padding-right: 30px; padding-bottom: 20px; }
        .project .courselist dl { padding-top: 20px; padding-bottom: 10px; border-bottom: 1px solid #ebebeb; align-items: center; flex-flow: column nowrap }
            .project .courselist dl dt { display: none }
            .project .courselist dl .a { width: 120px; margin: 0 }
            .project .courselist dl .b { width: 100%; color: #333; font-size: 12px; justify-content: center; margin-top: 10px; text-align: center }
            .project .courselist dl .c { display: none }

    .smallcsite { width: 100%; padding-top: 6px; padding-bottom: 6px; font-size: 16px; line-height: 24px; color: #FFF; height: 36px; overflow: hidden }

    .coursetop .topinfo { flex-flow: column nowrap }
        .coursetop .topinfo .mainimg { width: 100%; }
        .coursetop .topinfo .simple { width: 100%; }
            .coursetop .topinfo .simple .fav { position: absolute; top: 10px; right: 10px; }
                .coursetop .topinfo .simple .fav .iconfont { font-size: 25px; color: #ff0700 }
            .coursetop .topinfo .simple .mentor dl dd .a { font-size: 14px; }
            .coursetop .topinfo .simple .info { font-size: 12px; }
                .coursetop .topinfo .simple .info dl dt { width: 60px; }

    .coursebody .courseintro { padding-top: 20px; padding-bottom: 40px; }
        .coursebody .courseintro .con { padding-left: 20px; padding-right: 20px; font-size: 14px; }
    .coursebody .coursetopic { flex-flow: column nowrap; padding-bottom: 20px; }

        .coursebody .coursetopic .list a { font-size: 14px; }
        .coursebody .coursetopic .list dl { height: auto; line-height: 24px; padding-left: 0px; padding-right: 0px; padding-bottom: 10px; }
            .coursebody .coursetopic .list dl dt { width: 40px; justify-content: flex-start }
            .coursebody .coursetopic .list dl .a { width: calc(100% - 40px) }
            .coursebody .coursetopic .list dl .b { display: none }
        .coursebody .coursetopic .more { padding-top: 10px; }


    .coursebody .coursementor { padding-top: 20px; padding-bottom: 20px; font-size: 14px; }
        .coursebody .coursementor .con { padding-left: 10px; padding-right: 10px; }
        .coursebody .coursementor .authorwrap { padding: 10px; }
        .coursebody .coursementor .author .swiperarrow { width: 20px; }
            .coursebody .coursementor .author .swiperarrow a i { font-size: 16px; }
        .coursebody .coursementor .author .swiper { width: calc(100% - 40px); }
            .coursebody .coursementor .author .swiper .item { padding-left: 10px; padding-right: 10px; }


    .loginlayer .loginform { padding-top: 20px; padding-bottom: 20px; }

    .myavator { width: 280px; height: 250px; }
        .myavator .con { width: 180px; height: 180px; margin-top: 10px; margin-bottom: 10px; }

    .memtop { width: 100%; height: 160px; justify-content: space-between; align-items: center; background: #FFF; margin-bottom: 20px; }
        .memtop .topleft { height: 80px; align-items: center; padding-left: 10px; }
            .memtop .topleft .avator { width: 80px; height: 80px; }
            .memtop .topleft .basicinfo { display: none; }

        .memtop .topright { width: calc(100% - 100px); }
            .memtop .topright dl { width: 100%; flex-flow: row wrap }
                .memtop .topright dl dd { width: 50%; justify-content: center; margin-right: 0px; margin-bottom: 10px; margin-top: 10px; }


    .memsearch { width: 100%; padding-top: 20px; justify-content: space-between }
    .calevel .el-cascader-menu { width: 100px; min-width: 100px !important }


    .memmain .memcon .memcourse .list dl { width: 45% }

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


    .memmain .memcon .account .part .left dl dt { display: none }
    .memmain .memcon .account .part .left dl dd { padding-left: 10px; font-size: 14px; }
        .memmain .memcon .account .part .left dl dd .a .a1 { padding-right: 15px; }
    .memmain .memcon .account .part .right a { padding-left: 10px; padding-right: 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: 24px; font-size: 12px; }

        .mylist .avg .progress { justify-content: flex-start; max-width: 300px; }

    .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; }

    .learnvideo { width: 100%; height: auto }
        .learnvideo video { width: 100%; height: auto }


    .learnside { width: 100%; height: 50%; flex: auto; padding-left: 0px; flex-flow: column nowrap }
        .learnside .learnsidebtn { width: 100%; height: 75px; }
            .learnside .learnsidebtn ul { flex-flow: row nowrap; justify-content: space-around; background: #919395; }
                .learnside .learnsidebtn ul li { width: 50px; flex-flow: column nowrap; margin-bottom: 10px; margin-top: 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 a.cs { background-color: #f49928 }

        .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; }


    .demanditem { width: 45%; }

    .infomarkimg { padding: 20px 30px; }
    .infomarkmark { right: 30px; bottom: -20px }

    .infoacad3 .infoacad2a .infoacadsubiteminfo { padding-top: 20px; padding-bottom: 20px; font-size: 12px; }

    .infoblank { height: 40px }
    .infoacad1 { margin-top: 40px; margin-bottom: 20px }
    .pagemain { padding-top: 40px }
    .pagecontact { padding-bottom: 40px; }
    .infobox:last-child .project { padding-bottom: 40px }
    .infocollege { padding-bottom: 40px; }
    .infomentor { padding-bottom: 40px; }
    .info5 { padding-bottom: 40px; }
    .info4 { padding-bottom: 40px; }
    .info2 { padding-bottom: 40px; }
    .infobox { padding-top: 40px; }
    .pagenews { padding-bottom: 40px; }
    .infosub .infosub1 { padding-top: 40px; padding-bottom: 40px; }
    .infosub .infosubcontact { padding-top: 40px; padding-bottom: 40px; }
        .infosub .infosubcontact .editor2 { line-height: 2.5em }
    .infosub .infosub3 { padding-top: 40px; padding-bottom: 40px; }
    .infosub .infosub2 { margin-top: 30px; margin-bottom: 30px; }
    .infoacad3 { margin-bottom: 40px; }


    .infosubmewswrap .subtitle { margin-bottom: 20px; }

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

    .infopage .infowrap .infosub.infosubcontactwrap { flex-flow: column nowrap }
    .infopage .infowrap .infosub .infosubcontact { width: 100%; padding-bottom: 0px; }
    .infopage .infowrap .infosub .infosubmap { width: 100%; max-width: 500px; margin: 20px auto; }
    .infosub .infosub1 { width: 100% }
    .infosub .infosubimg { display: none }


    .demandoption { flex-flow: column nowrap }
        .demandoption .doct { width: 100%; }
            .demandoption .doct dl { width: auto; flex-flow: row nowrap }
                .demandoption .doct dl dd { width: auto; margin-right: 40px; }
        .demandoption .dosp { flex: none; margin-left: 0px; margin-right: 0px; margin-top: 10px; margin-bottom: 10px; width: 100px; height: 4px; background-color: #f3be1b; border-radius: 2px; }
        .demandoption .dock { width: 100%; flex: none; }
            .demandoption .dock dl dd { width: 80px; height: 80px; }

    .pagenews .listwrap, .pagenews .info { width: 100%; }
    .pagenews .top { display: none }
}

@media screen and (max-width: 600px) {
    .banner .slogan { font-size: 10px; }
    .project .levellist { width: 150px; }

    .infocollege ul li { max-width: 90%; width: 90%; }
    .info1 ul li { width: 50px; height: 50px; margin-left: 10px; margin-right: 10px; font-size: 12px; }
    .loginbody { align-items: flex-start; }
    .loginwrap { border-radius: 0px; flex-flow: column nowrap }
    .loginhome { position: absolute; right: 15px; top: 15px; }
        .loginhome a .iconfont { font-size: 20px; color: #FFF }
    .loginbg { width: 100% }
        .loginbg img { width: 100%; flex: none }
    .loginlayer { width: 100%; height: auto; }
        .loginlayer .loginarrow { display: none }

        .loginlayer a { color: #ff8d01 }
        .loginlayer .loginform { padding-top: 30px; padding-bottom: 30px; }

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

    .demandoptionwrap { padding-top: 10px; padding-bottom: 10px; }

    .demanditem { width: 100%; }

    .infomarkmark { bottom: -15px }


    .infoacad2 { width: 100%; position: relative; left: 0; top: 0; justify-content: space-between; }
        .infoacad2 .infoacad2aholder { display: none }

    .infoacad3 .infoacad2a { width: 100%; position: relative; top: 0; left: 0; transform: translateY(0); align-items: center; justify-content: space-between; z-index: 0 }
        .infoacad3 .infoacad2a .infoacadsubiteminfo { width: 100%; padding-top: 20px; padding-bottom: 20px; color: #FFF; font-size: 14px; line-height: 1.5em; align-content: center }

    .infoacad3 { width: 100%; position: relative; justify-content: space-between; flex-flow: row wrap; margin-bottom: 80px; }
        .infoacad3 .infoacadsubitem { width: 100%; padding-top: 40px; }
            .infoacad3 .infoacadsubitem:first-child { display: none }
            .infoacad3 .infoacadsubitem img { width: 100%; line-height: 0; display: block }

    .infoacadsub { flex-flow: row wrap; justify-content: space-between }
    .infosub .infosubnewsimg { width: 0%; display: none; }
    .infosub .infosubmewswrap { width: 100%; }

    .infosubnewsmore { padding: 0 }
    .infosubnewsmorewrap .infosubmewswrap { width: 100%; padding-bottom: 20px; }
    .infosubmewswrap .subtitle { margin-bottom: 40px; }

    .demandoption .dock dl { flex-flow: row wrap }
        .demandoption .dock dl dd { width: calc(25% - 10px); height: 100px; }
            .demandoption .dock dl dd a { font-size: 14px; }
                .demandoption .dock dl dd a img { max-width: 50px }

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


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

@media screen and (max-width: 480px) {
    .banner .slogan { font-size: 6px; }
    .project .levellist { width: 120px; }

    .memmain .memcon .memcourse .list dl { width: 100%; }

    .infomarkmark { bottom: -10px }


    .demandoption .dock dl dd { width: calc(25% - 4px); padding: 4px; height: 90px; }
        .demandoption .dock dl dd a { font-size: 12px; }
            .demandoption .dock dl dd a img { max-width: 40px }
}


.swiperwrap { width: 100%; position: relative; }
    .swiperwrap ul { width: 100%; flex-flow: row nowrap; overflow: hidden }
        .swiperwrap ul li { width: 100%; flex: 0 0 auto; }
            .swiperwrap ul li .swiperimg { width: 100%; }
    .swiperwrap .swiperbg { opacity: 0 }
    .swiperwrap .swiperbox { position: absolute; height: 100%; left: 0px; top: 0px; }
        .swiperwrap .swiperbox li { position: absolute; left: 0px; top: 0px; height: 100%; align-items: center }
.swiperpoint { position: absolute; left: 0px; bottom: 30px; justify-content: center; width: 100%; }
    .swiperpoint a { display: inline-block; margin-left: 5px; margin-right: 5px; width: 16px; height: 16px; border-radius: 50%; background-color: #205471 }
        .swiperpoint a.cs, .swiperpoint a:hover { background-color: #e16f10 }

.swiperleft-enter { transform: translateX(100%) }
.swiperleft-enter-to, .swiperleft-leave { transform: translateX(0) }
.swiperleft-leave-to { transform: translateX(-100%) }
.swiperleft-enter-active, .swiperleft-leave-active { transition: all .8s ease; }

.swiperright-enter { transform: translateX(-100%) }
.swiperright-enter-to, .swiperright-leave { transform: translateX(0) }
.swiperright-leave-to { transform: translateX(100%) }
.swiperright-enter-active, .swiperright-leave-active { transition: all .8s ease; }

.swiperup-enter { transform: translateY(100%) }
.swiperup-enter-to, .swiperup-leave { transform: translateY(0) }
.swiperup-leave-to { transform: translateY(-100%) }
.swiperup-enter-active, .swiperup-leave-active { transition: all .8s ease; }

.swiperdown-enter { transform: translateY(-100%) }
.swiperdown-enter-to, .swiperdown-leave { transform: translateY(0) }
.swiperdown-leave-to { transform: translateY(100%) }
.swiperdown-enter-active, .swiperdown-leave-active { transition: all .8s ease; }

.swiperwrapimg { width: 100%; position: relative; }
    .swiperwrapimg ul { width: 100%; flex-flow: row nowrap; overflow: hidden }
        .swiperwrapimg ul li { align-items: center; padding-left: 20px; padding-right: 20px; flex: 0 0 auto }
            .swiperwrapimg ul li .swiperimg { width: 100%; flex: 0 0 auto }
    .swiperwrapimg .swiperbg { opacity: 0 }
    .swiperwrapimg .swiperbox { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; flex-flow: row nowrap; overflow: hidden; }
        .swiperwrapimg .swiperbox li { height: 100%; align-items: center; padding-left: 20px; padding-right: 20px; flex: 0 0 auto }
            .swiperwrapimg .swiperbox li .swiperimg { width: 100%; flex: 0 0 auto }

.swiperimgleft-enter, .swiperimgleft-leave { transform: translateX(0) }
.swiperimgleft-enter-to, .swiperimgleft-leave-to { transform: translateX(-100%) }
.swiperimgleft-enter-active, .swiperimgleft-leave-active { transition: all 1s ease; }

.swiperhorsewait { transform: translateX(-100%) }
.swiperhorseleft { animation: myhorseleft 1s ease; animation-fill-mode: forwards }
.swiperhorseright { animation: myhorseright 1s ease; animation-fill-mode: forwards }


@keyframes myhorseleft {
    from { transform: translateX(-100%) }
    to { transform: translateX(-200%) }
}

@keyframes myhorseright {
    from { transform: translateX(-100%) }
    to { transform: translateX(0) }
}