/* 公共部分 */
.yy-back-cover { border-radius: 5px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); width: 100%; min-height: 10px; background-color: #ffffff; }
.yy-input-box { border-radius: 100px; width: 255px; height: 50px; background-color: #f6f6f6; padding-left: 30px; }
.yy-input-box input { height: 30px; width: 200px; border: 0; outline: none; background: transparent; height: 50px; font-size: 18px; line-height: 21px; color: #000000; }
.yy-logo { height: 50px; }

/* 提示 */
.yy-prompt-view { text-align: center; background-image: url('http://www.yuanyuan.xyz/Application/Coding/Static/Image/home-bg.svg'); background-repeat: no-repeat; background-size: 100%; height: 100%; }
.yy-modal.yy-prompt .mian-view { font-size: 28px; }
.yy-modal.yy-prompt .mian-view h1{ font-size: 128px; }
.yy-modal.yy-prompt .instructions { margin-top: 30px; }
.yy-modal.yy-prompt .jump { font-size: 20px;  margin-top:160px; }


/* 边栏 */
.yy-side-layer { z-index: 2; border-radius: 40px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05); width: 80px; height: 230px; background-color: #ffffff; position: fixed; top: 350px; right: 25px; cursor: pointer; padding: 30px 15px }

/* 登录 */
.yy-modal.yy-login { display: flex; height: 380px;}
.yy-modal.yy-login .registered-view { width: 370px; height: 100%; display: flex; align-items: center; justify-content: center; }
.yy-modal.yy-login .registered-view .registered-bg { border-radius: 5px; width: 335px; height: 415px; background-color: #FBFBFB; text-align: center; }
.yy-modal.yy-login .login-view { width: 370px; height: 100%; display: flex; display: flex; align-items: center; justify-content: center; }
.yy-modal.yy-login .login-view .login-bg { border-radius: 5px; width: 335px; height: 415px; }
.yy-modal.yy-login .qr-code-view { width: 335px; height: 290px; display: flex; flex-direction: column; align-content: flex-end; padding-top: 45px; }
.yy-modal.yy-login .qr-code-view .prompt { font-size: 18px; line-height: 21px; color: #737373; margin-top: 30px; }
.yy-modal.yy-login .qr-code-view .qr-code { text-align: center; }
.yy-modal.yy-login .qr-code-view .qr-code img { width: 190px; height: 190px; }
.yy-modal.yy-login .phone-view { width: 335px; height: 290px; padding: 40px; }
.yy-modal.yy-login .button-view { height: 125px; display: flex; align-items: center; justify-content: center; }
.yy-modal.yy-login .other-operat { text-align: right; margin-top: 20px; }
.yy-modal.yy-login .other-operat span { font-size: 18px; line-height: 21px; color: #9b9b9b; }
.yy-modal.yy-login .input-view  { margin-top: 35px; }

/* 顶部  */
.yy-header-view { width: 100%; height: 100px;  background-image: url('../Image/mini_bg.svg'); background-repeat: no-repeat; background-size: 126%; font-size: 18px; line-height: 25px; color: #ffffff; display: flex; align-items: center; }
.yy-header-view .header-left { display: flex; justify-content: space-between; align-items: center; }
.yy-header-view-el-dropdown-menu.el-dropdown-menu { border-radius: 10px; }
.yy-header-view-el-dropdown-menu.el-dropdown-menu .el-dropdown-menu__item { font-size: 18px; line-height: 25px; color: #616161; padding: 15px 30px; }
.yy-header-view  ul { padding-left: 20px; padding-right: 20px; margin-block-start: 0em; margin-block-end: 0em; padding-inline-start: 0px; height: 25px; }
.yy-header-view  ul li { float: left; list-style: none; margin: 0 20px; font-size: 18px; line-height: 25px; color: #ffffff; font-weight: bold; }
.yy-header-view  ul li .item-nav { font-size: 18px; line-height: 25px; color: #ffffff; font-weight: bold; }
.el-dialog { width: 740px; border-radius: 5px; min-height: 500px; }
.yy-header-view .user-ava { border-radius: 60px; width: 70px; height: 70px; background-color: #FFF;}
.yy-header-view .user-ava img { border-radius: 60px; width: 70px; height: 70px; }

.navigation-content-area { width: 670px; background-color: #ffffff; padding: 10px 20px 0px 20px; }
.navigation-content-layout { display: flex; align-items: center; justify-content: space-between; }
.navigation-content-area .options-item { width: 290px; height: 80px; background-color: #f8f8f878; border-radius: 5px; margin-bottom: 10px; }
.navigation-content-area .divider { width: 1px; height: 301px; background-color: #f6f6f6; }
.navigation-item { display: flex; flex-direction: column; }
.navigation-title { font-size: 24px; line-height: 33px; color: #4a4a4a; margin-bottom: 20px; }



.options-item { display: flex; align-items: center; padding: 15px; }
.options-item:hover { background: #FFF0E6; }
.options-item .options-item-icon { width: 50px; height: 50px; border-radius: 100px; background-color: #FFF; display: flex; align-items: center; justify-content: center; }
.options-item .options-item-title { margin-left: 20px; }
.options-item .options-item-title .item-title { font-size: 18px; line-height: 25px; color: #4a4a4a; }
/*.options-item:hover .options-item-title .item-title { color: #FFF !important; }*/
.options-item .options-item-title .item-info { font-size: 14px; line-height: 20px; color: #9b9b9b; }
/*.options-item:hover .options-item-title .item-info { color: #FFF !important; }*/
.options-item-mini { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 140px; height: 80px; background-color: #f8f8f8; border-radius: 5px; margin-bottom: 10px; text-align: center; }
.options-item-mini:hover { background: #FFF0E6; }
.options-item-mini .options-item-icon { width: 40px; height: 40px; border-radius: 100px; background-color: #FFF; display: flex; align-items: center; justify-content: center;}
.options-item-mini .options-item-title { }
.options-item-mini .options-item-title .item-title { font-size: 14px; line-height: 25px; color: #4a4a4a; margin-top: 2px; }
/*.options-item-mini:hover .options-item-title .item-title { color: #FFF !important; }*/
.options-item-mini .options-item-title .item-info { font-size: 14px; line-height: 20px; color: #9b9b9b; }
/*.options-item-mini:hover .options-item-title .item-info { color: #FFF !important; }*/

/* 底部 */
.yy-footer-view { height: 340px; background: #444; overflow: hidden; padding-top: 40px; }
.yy-footer-view .link { }
.yy-footer-view .link ul { list-style: none; }
.yy-footer-view .link ul li { width: 88px; height: 32px; background: rgba(0, 0, 0, .1); border-radius: 16px; margin-bottom: 10px; font-size: 12px; color: #e6e6e6; line-height: 32px; text-align: center; }
.yy-footer-view .info { font-size: 14px; height: 16px; color: #ccc; line-height: 36px; margin-bottom: 18px; }
.yy-footer-view .msg { color: #666; text-align: center; }
.yy-footer-view .weixin-view { display: flex; justify-content: space-between; width: 240px; }
.yy-footer-view .weixin-view .weixin { width: 100px; height: 100px; background: #fff; border-radius: 6px;    /*border: 1px solid #e6e6e6;*/ color: #999; text-align: center; }
.yy-footer-view .weixin-view .weixin img { width: 100px; height: 100px; background: #fff; border-radius: 6px; border: 1px solid #e6e6e6; }

/* 首页 */
.yy-home .yy-main-hd { }
.yy-home .yy-main-hd .main-hd-content { border-radius: 5px; width: 1180px; height: 540px; background-color: #ffffff; display: flex; }
.yy-home .yy-main-hd .item-wrap { border-top-left-radius: 5px; border-bottom-left-radius: 5px; width: 960px; height: 540px; }
.yy-home .yy-main-hd .item-nav { border-radius: 5px; width: 220px; height: 540px; padding: 15px; }
.yy-home .yy-main-hd .item-nav .item-mask { border-radius: 5px; width: 190px; height: 115px; background-color: #f3f3f3; margin-bottom: 15px; }
.yy-home .yy-main-hd .item-nav .item-mask img { border-radius: 5px; width: 190px; height: 115px; }
.course-public .course-title { margin-bottom: 20px; }
.course-public .course-item { border-radius: 5px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); width: 580px; height: 330px; background-color: #ffffff; margin-bottom: 20px; }
.course-public .course-item .course-top-view { border-radius: 5px 5px 0px 0px; width: 580px; height: 65px; background-color: #f96f01; display: flex; justify-content: space-between; align-items: center; padding-left: 20px; padding-right: 30px; }
.course-public .course-item .course-top-view .course-label { border-radius: 15px; width: 111px; height: 30px; background-color: #ffffff; font-size: 15px; line-height: 21px; color: #fe5f00; }
.course-public .course-item .course-top-view .course-time { font-size: 20px; line-height: 28px; color: #ffffff; }
.course-public .course-name { font-size: 24px; line-height: 33px; color: #4A4A4A; }
.course-public .course-name a { color: #303133 }
.course-public .course-info { padding: 30px 30px 30px 25px }
.course-public .course-teacher-view { margin-top: 30px; height: 60px; }
.course-public .teacher-item { display: flex; align-items: center; }
.course-public .teacher-item .teacher-name { font-size: 16px; line-height: 25px; color: #9b9b9b; margin-left: 10px; }
.course-public .teacher-item .teacher-avatar { width: 60px; height: 60px; border-radius: 60px; }
.course-public .teacher-item .teacher-avatar img { width: 60px; height: 60px; border-radius: 60px; }
.course-public .course-paycount-info { margin-top: 43px; display: flex; justify-content: space-between; align-items: center; }
.course-public .course-paycount-info .course-pay-count { font-size: 15px; line-height: 21px; color: #9b9b9b; }
.course-ordinary .course-title { margin-bottom: 20px; }
.course-ordinary .course-item { border-radius: 5px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); width: 380px; height: 330px; background-color: #ffffff; margin-bottom: 20px; }
.course-ordinary .course-item .course-top-view { border-radius: 5px 5px 0px 0px; height: 65px; background-color: #FFA726; display: flex; justify-content: space-between; align-items: center; padding-left: 20px; padding-right: 20px; }
.course-ordinary .course-item .course-top-view .course-label { border-radius: 15px; width: 111px; height: 30px; background-color: #ffffff; font-size: 15px; line-height: 21px; color: #fe5f00; }
.course-ordinary .course-item .course-top-view .course-time { font-size: 20px; line-height: 28px; color: #ffffff; }
.course-ordinary .course-name { font-size: 24px; line-height: 33px; color: #4A4A4A; height: 66px; }
.course-ordinary .course-name a { color: #303133 }
.course-ordinary .course-info { padding: 25px 20px 30px 20px }
.course-ordinary .course-info .course-content { font-size: 16px; line-height: 26px; color: #6a787c; margin-top: 10px; height: 75px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.course-ordinary .course-teacher-view { margin-top: 20px; height: 60px; }
.course-ordinary .course-teacher-view .teacher-item { display: flex; align-items: center; }
.course-ordinary .course-teacher-view .teacher-item .teacher-name { font-size: 16px; line-height: 25px; color: #9b9b9b; margin-left: 10px; }
.course-ordinary .course-teacher-view .teacher-item .teacher-avatar { width: 50px; height: 50px; border-radius: 50px; }
.course-ordinary .course-teacher-view .teacher-item .teacher-avatar img { width: 50px; height: 50px; border-radius: 50px; }
.course-ordinary .course-paycount-info { margin-top: 25px; display: flex; justify-content: space-between; align-items: center; }
.course-ordinary .course-paycount-info .course-pay-count { font-size: 15px; line-height: 21px; color: #9b9b9b; }
.course-ordinary .course-paycount-info  .course-pay-price { font-size: 25px; color: #f96748; }
.home-news-view { display: flex; justify-content: flex-start; flex-wrap: wrap;  padding: 20px;}
.home-news-item { width: 270px; height: 290px; background-color: #f3f3f38f; margin-right: 20px; border-radius: 5px; margin-bottom:20px; }
.home-news-item:nth-child(4n) { margin-right: 0px; }
.home-news-img { width: 270px; height: 190px; }
.home-news-img img { width: 270px; height: 190px; object-fit: cover; border-radius: 5px 5px 0 0; }
.home-news-title { font-size: 18px; line-height: 25px; color: #4a4a4a; padding: 15px; }


/* 教育计划 */
.yy-education { }
.yy-education .yy-education-bg { background-image: url(../../Image/education-bj.png); height: 380px; color: #FFFFFF; text-align: center; }
.yy-education .propaganda-box { border-color: #42b4d6; background: #FFF; border-radius: 6px; border: solid 2px #e9f0f3; padding: 35px 40px 40px 40px; min-height: 290px; position: relative; overflow: hidden; margin-bottom: 30px; text-align: center; }
.yy-education .propaganda-box img { height: 90px; }
.yy-education .propaganda-box b { font-size: 30px; }
.yy-education .propaganda-box .title { margin-top: 30px; }
.yy-education .propaganda-box .text { color: #B1B1B1; margin-top: 20px; line-height: 28px; }

/* 个人中心 */
.yy-student-center { }
.yy-student-center .user-head { background-color: #FFF; width: 100%; height: 150px; text-align: center; border-radius: 5px; margin-bottom: 20px; padding-top: 35px; padding-bottom: 35px; }
.yy-student-center .user-head .progress-item { float: left; width: 25%; height: 80px; border-right: 1px solid #F1F3F4; }
.yy-student-center .user-head .progress-item .item-title { font-weight: 100; font-size: 18px; color: #616161; letter-spacing: -0.53px; margin-bottom: 5px; margin-top: -15px; }
.yy-student-center .user-head .course-remain { margin-top: 12px; font-size: 16px; color: #636363; letter-spacing: -0.47px; line-height: 38px; margin-left: 35px; margin-right: 35px; }
.yy-student-center .yy-side-menu { border-radius: 5px; width: 170px; height: 507px; background-color: rgba(255, 230, 215, 0.15); padding-top: 25px; }
.yy-student-center .yy-side-menu .user-info { text-align: center; }
.yy-student-center .yy-side-menu .user-info .ava-img { }
.yy-student-center .yy-side-menu .user-info .ava-img img { border-radius: 60px; width: 120px; height: 120px; }
.yy-student-center .yy-side-menu .user-info .user-name { font-size: 18px; line-height: 25px; color: #2c2c2c; margin-top: 20px; }
.yy-student-center .yy-side-menu .menu-list { margin-top: 20px; }
.yy-student-center .yy-side-menu .menu-list .menu-items { width: 170px; height: 40px; font-size: 18px; line-height: 25px; color: #636363; text-align: center; line-height: 40px; margin-bottom: 5px; }
.yy-student-center .yy-side-menu .menu-list .menu-items.menu-items-active { background-color: #ff6d00; color: #ffffff; }
.yy-student-center .yy-manage-item { padding: 40px; }
.yy-student-center .yy-manage-item .header-title { font-size: 28px; line-height: 40px; color: #777777; font-weight: bold; }
.yy-student-center .yy-manage-item .selltab-nav { font-size: 16px; line-height: 22px; color: #777777; margin-top: 20px; }
.yy-student-center .yy-manage-item .selltab-nav span { margin-right: 25px; }
.yy-student-center .yy-manage-item .selltab-nav span.active { color: fe6c00 }
.yy-student-center .yy-manage-item .selltab-nav span.vertical-bar { color: #ebebeb; font-size: 18px; line-height: 18px; }
.yy-student-center .yy-manage-item .content-view { margin-top: 30px; }

/*个人中心  -  我的课程*/
.yy-student-center .my-course { display: flex; justify-content: flex-start; flex-wrap: wrap; min-height: 450px; }
.yy-student-center .my-course .course-list-item { margin-right: 30px; border-radius: 5px; border: 1px solid #f6f6f6; width: 280px; height: 270px; background-color: #ffffff; margin-bottom: 30px; padding: 30px 20px 20px 20px; }
.yy-student-center .my-course .course-list-item:nth-child(3n) { margin-right: 0; }
.yy-student-center .my-course .course-list-item .course-list-title { font-size: 18px; line-height: 25px; color: #fe5f00; height: 50px; }
.yy-student-center .my-course .course-list-item .teachers { height: 40px; margin-top: 30px; }
.yy-student-center .my-course .course-list-item .button-view { height: 70px; border-top: 1px solid #F6F6F6; margin-top: 45px; display: flex; align-items: center; justify-content: center; }

/*个人中心  -  我的订单*/
.yy-student-center .my-order { min-height: 450px; }
.yy-student-center .my-order .goods { background: #FFFFFF; border: 1px solid #FFE6D7; border-radius: 5px; height: 185px; margin: auto; margin-bottom: 20px; }
.yy-student-center .my-order .goods .goods_top { background: #FFE6D7; width: 100%; height: 45px; border-bottom: 1px solid #FFE6D7; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.yy-student-center .my-order .goods .goods_top .left { float: left; font-size: 14px; color: #9B9B9B; line-height: 45px; margin-left: 15px; }
.yy-student-center .my-order .goods .goods_top .right { float: right; font-size: 14px; color: #FF6D00; line-height: 45px; margin-right: 15px; }
.yy-student-center .my-order .goods .details .picture { margin-left: 15px; width: 100px; float: left; }
.yy-student-center .my-order .goods .details .picture img { width: 100px; height: 100px; margin-top: 20px; }
.yy-student-center .my-order .goods .details .content { float: left; margin-left: 25px; width: 740px; }
.yy-student-center .my-order .goods .details .content .introduce { height: 30px; margin-top: 24px; }
.yy-student-center .my-order .goods .details .content .introduce .title { font-size: 20px; color: #FF6D00; float: left; }
.yy-student-center .my-order .goods .details .content .introduce .price { float: right; font-size: 24px; color: #F96748; }
.yy-student-center .my-order .goods .details .content .state { width: 630px; height: 17px; font-size: 14px; color: #848484; margin-top: 10px; }
.yy-student-center .my-order .goods .details .content .operation { text-align: right; margin-top: 5px; }
.yy-student-center .my-order .goods .details .content .operation .el-button { width: 120px; height: 35px; line-height: 10px; }

/*个人中心 - 我的账户*/
.yy-student-center .my-account { }
.yy-student-center .my-account .set-ava-view { border-radius: 185px; width: 185px; height: 185px; background-color: #fff8f3; margin: 0 auto; margin-bottom: 70px;}
.yy-student-center .my-account .set-ava-view img { border-radius: 80px; width: 160px; height: 160px; }
.yy-student-center .my-account .el-input__inner { border-radius: 80px; height: 50px; }
.yy-student-center .my-account .account-set-view { border: 1px solid #e8e8e8; width: 100%; height: 155px; background: #FEFEFE; border-radius: 5px; display: flex; margin-bottom: 20px; }
.yy-student-center .my-account .account-set-view .icon-view { width: 125px; height: 155px; display: flex; }
.yy-student-center .my-account .account-set-view .info-view { width: 550px; height: 155px; }
.yy-student-center .my-account .account-set-view .info-view .main-text { font-size: 26px; line-height: 37px; color: #000000; }
.yy-student-center .my-account .account-set-view .info-view .vice-text { margin-top: 10px; font-size: 16px; line-height: 22px; color: #9B9B9B; }
.yy-student-center .my-account .account-set-view .button-view { width: 205px; height: 155px; }

/*个人中心 - 我的工作台*/
.yy-student-center .my-wordk-bench { }
.yy-student-center .my-wordk-bench .wordk-scratch { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.yy-student-center .my-wordk-bench .wordk-scratch .el-button.el-button--primary { background-color: #67c23a; border-color: #67c23a; }
.yy-student-center .my-wordk-bench .wordk-scratch .wordk-list-item { position: relative; margin-right: 30px; border-radius: 5px; border: 1px solid #f6f6f6; width: 280px; height: 280px; background-color: #ffffff; margin-bottom: 30px; }
.yy-student-center .my-wordk-bench .wordk-scratch .wordk-list-item .add-wordk {  display: flex; align-items: center; justify-content: center; height: 100%; }
.yy-student-center .my-wordk-bench .wordk-scratch .wordk-list-item:nth-child(3n) { margin-right: 0; }
.yy-student-center .my-wordk-bench .wordk-scratch .wordk-list-item .wordk-cover { font-size: 18px; line-height: 25px; color: #fe5f00; width: 100%; height: 210px; }
.yy-student-center .my-wordk-bench .wordk-scratch .wordk-list-item .wordk-cover img { width: 100%; height: 210px; }
.yy-student-center .my-wordk-bench .wordk-scratch .wordk-list-item .wordk-name { min-width: 70px; background: #606266bf; height: 30px; color: #FFF; display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; left: 10px; border-radius: 5px; padding: 0 10px; }
.yy-student-center .my-wordk-bench .wordk-scratch .wordk-list-item .wordk-list-title img { width: 100%; border-radius: 5px 5px 0 0; }
.yy-student-center .my-wordk-bench .wordk-scratch .wordk-list-item .button-view { height: 70px; display: flex; align-items: center; justify-content: center; background: #e6e6e624; }

/* 课程-列表中心 */
.yy-course-map { }
.yy-course-map .map-hr { text-align: center; margin: 20px 0; }
.yy-course-map .map-control-container { padding: 80px 30px; display: flex; }
.yy-course-map .map-info { width: 670px; }
.yy-course-map .title-view { font-size: 36px; line-height: 50px; color: #4a4a4a; }
.yy-course-map .info-view { font-size: 16px; line-height: 30px; color: #9b9b9b; margin-top: 20px; }
.yy-course-map .map-img { margin-left: 75px; }
.yy-course-map .course-title { margin-bottom: 20px; }
.yy-course-map .course-item { border-radius: 5px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); width: 580px; height: 330px; background-color: #ffffff; margin-bottom: 20px; }
.yy-course-map .course-item .course-top-view { border-radius: 5px 5px 0px 0px; width: 580px; height: 65px; background-color: #f96f01; display: flex; justify-content: space-between; align-items: center; padding-left: 20px; padding-right: 30px; }
.yy-course-map .course-item .course-top-view .course-label { border-radius: 15px; width: 111px; height: 30px; background-color: #ffffff; font-size: 15px; line-height: 21px; color: #fe5f00; }
.yy-course-map .course-item .course-top-view .course-time { font-size: 20px; line-height: 28px; color: #ffffff; }
.yy-course-map .course-name { font-size: 24px; line-height: 33px; color: #fe5f00; }
.yy-course-map .course-name a { color: #303133 }
.yy-course-map .course-info { padding: 30px 30px 30px 25px }
.yy-course-map .course-teacher-view { margin-top: 30px; height: 60px; }
.yy-course-map .teacher-item { display: flex; align-items: center; }
.yy-course-map .teacher-item .teacher-name { font-size: 16px; line-height: 25px; color: #9b9b9b; margin-left: 10px; }
.yy-course-map .teacher-item .teacher-avatar { width: 60px; height: 60px; border-radius: 60px; }
.yy-course-map .teacher-item .teacher-avatar img { width: 60px; height: 60px; border-radius: 60px; }
.yy-course-map .course-paycount-info { margin-top: 43px; display: flex; justify-content: space-between; align-items: center; }
.yy-course-map .course-paycount-info .course-pay-count { font-size: 15px; line-height: 21px; color: #9b9b9b; }
.yy-course-map .course-instructions { font-size: 16px; line-height: 30px; color: #9b9b9b; margin-top: 20px; }

/* 课程-列表中心 */
.yy-course-center { }
.yy-course-center .course-center-ad-view { }
.yy-course-center .course-center-ad-view .item-ad-mini { width: 280px; height: 250px; }
.yy-course-center .course-center-ad-view .item-ad-mini img { border-radius: 5px; width: 280px; height: 250px; }
.yy-course-center .course-center-ad-view .item-ad-big { width: 580px; height: 250px; }
.yy-course-center .course-center-ad-view .item-ad-big img { width: 580px; height: 250px; }
.yy-course-center .one-course { box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); width: 180px; height: 120px; margin-bottom: 20px; }
.yy-course-center .one-course .logo-course { border-top-left-radius: 5px; border-top-right-radius: 5px; width: 180px; height: 80px; background-color: #3ab3d7; display: flex; align-items: center; justify-content: center; }
.yy-course-center .one-course .logo-course img { height: 35px; }
.yy-course-center .one-course .text-course { border-radius: 5px; width: 180px; height: 40px; background-color: #ffffff; line-height: 40px; text-align: center; color: #4A4A4A; }
.yy-course-center .el-carousel { border-radius: 5px; }
.yy-course-center .el-carousel__item:nth-child(2n) { background-color: #FFA726; border-radius: 5px; }
.yy-course-center .el-carousel__item:nth-child(2n+1) { background-color: #F96F01; border-radius: 5px; }

/* 论坛与社区 */
.yy-club { }
.yy-club .mn { background: #FFFFFF;     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05); border-radius: 5px; padding: 20px; }
.yy-club .common { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #F4F4F4; height: 100px; }
.yy-club .tl_ct { color: #666666; line-height: 22px; font-size: 20px; width: 560px; }
.yy-club .tl_ct a { color: #666666; }
.yy-club .tl_reply_number { position: relative; }
.yy-club .tl_reply_number .tl_reply_number_text { position: absolute; top: 22px; font-size: 14px; color: #5AC39D; letter-spacing: -0.42px; width: 95%; text-align: center; }
.yy-club .avatarbox { text-align: center; width: 110px; }
.yy-club .avatarbox a { color: #666666; }
.yy-club .user-info { width: 100%; height: 100px; background-color: #fafafa;  margin-top:30px; }
.yy-club { }
.club-thread-view .mn { padding: 60px; }
.club-thread-view .message { font-size: 18px; color: #666; line-height: 40px !important; margin-top: 30px; margin-bottom: 10px; word-wrap: break-word; }
.club-thread-view .return-card-item { display: flex; margin-bottom: 30px; border-bottom: 1px solid #f3f3f3; padding-bottom: 30px; }
.club-thread-view .return-card-item .user-view { width: 80px; }
.club-thread-view .return-card-item .return-card-message { margin-left: 40px; font-size: 18px; color: #666; width: 580px; word-wrap: break-word; }
.club-thread-view .return-card-item .return-card-message .pi .strong { float: right; }
.club-thread-view .return-card-item .return-card-message .pi .strong a {
    height: 18px;
    margin-top: 0;
    padding: 0 15px;
    border: none;
    border-radius: 4px;
    background: #ccc;
    color: #fff;
    font-size: 14px;
}

.yy-club pre{
white-space: pre-wrap!important;
word-wrap: break-word!important;}

/* 课程中心 */
.yy-course-center { }
.yy-course-center .main-box { padding: 50px; }
.yy-course-center .main-box .main-title { font-size: 60px; line-height: 84px; color: #ff6e00; margin-bottom: 35px; }
.yy-course-center .main-box .course-list { }
.yy-course-center .main-box .course-list .chapter-item { margin-bottom: 50px; }
.yy-course-center .main-box .course-list .chapter-item .chapter-name { font-size: 30px; line-height: 42px; color: #4a4a4a; margin-bottom: 10px; }
.yy-course-center .main-box .course-list .chapter-item .chapter-info { font-size: 18px; line-height: 25px; color: #9b9b9b; margin-bottom: 20px; }
.yy-course-center .main-box .course-list .course-item { width: 680px; height: 60px; background-color: #fbfbfb; margin-bottom: 15px; display: flex; align-items: center; padding-left: 25px; }
.yy-course-center .main-box .course-list .course-item .icon-view { width: 16px; height: 17px; margin-right: 15px; }
.yy-course-center .main-box .course-list .course-item .section-name-view { width: 330px; font-size: 18px; line-height: 25px; color: #9b9b9b; margin-right: 20px; }
.yy-course-center .main-box .course-list .course-item .watch-view { width: 10px; height: 10px; border-radius: 20px; background-color: #E5E5E5; margin-right: 35px; }
.yy-course-center .main-box .course-list .course-item .watch-view.learn { background-color: #fe6200; }
.yy-course-center .main-box .course-list .course-item .status-view { font-size: 15px; line-height: 21px; color: #fe6200; margin-right: 40px; }
.yy-course-center .main-box .course-list .course-item .button-view { width: 100px; height: 30px; }
.yy-course-center .main-box .course-list .course-item .button-view .el-button { width: 100px; height: 30px; line-height: 10px; border: 1px solid #FE6200; color: #FE6200; padding: 0px 0px; }
.yy-course-center .course-info-top { height: 380px; }

.yy-course-center .course-info-top .video-container { display: flex; justify-content: space-between; padding: 35px; width: 1180px; height: 370px;  }
.yy-course-center .course-info-top .title-view {    margin-top: 30px; font-size: 28px; line-height: 40px; color: #4A4A4A; }
.yy-course-center .course-info-top .info-view { font-size: 16px; line-height: 32px; color: #9b9b9b; margin-top: 15px; width: 520px; }
.yy-course-center .course-info-top .video { width: 520px; height: 300px; background-color: #0000000a;     border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.yy-course-center .course-info-top .video video{    border-radius: 5px;}


.yy-course-center .show-course-cell .show-course-info {  height: 270px; display: flex; padding: 40px; }
.yy-course-center .show-course-cell .show-course-info .detail-info {  }
.yy-course-center .show-course-cell .show-course-info .cover-img { width: 228px; height: 200px; }
.yy-course-center .show-course-cell .show-course-info .cover-img img { width: 228px; height: 200px; border-radius: 20px; }
.yy-course-center .show-course-cell .show-course-info .course-name { font-size: 24px; line-height: 45px; color: #777777; }
.yy-course-center .show-course-cell .show-course-info .period-validity { font-size: 16px; line-height: 22px; color: #9b9b9b; margin-top: 15px; }



/* 边栏价格 */
.yy-prices-view { padding: 40px; }


.yy-prices-view .price-content { display: flex; flex-direction: row-reverse; margin-top: 30px; align-items: center; }
.yy-prices-view .price-content .charge { color: #fe6101; font-size: 30px; margin-left: 10px; }
.yy-prices-view .price-content .origin-price { font-size: 20px; color: #9d9d9e; text-decoration: line-through; }
.yy-prices-view .prices { margin-top: 20px; border-top: 1px solid #F4F4F4; padding-top: 20px; }
.yy-prices-view .prices .button-view { justify-content:space-between; }
.yy-prices-view .prices .button-view .el-button { width: 140px; font-size: 18px; line-height: 40px; height: 40px; padding: 0px; }

/* 课程播放列表 */
.yy-video-play { }
.yy-video-play .video-view { }
.yy-video-play .video-title { padding-left: 30px;  background-color: #000; height: 60px; width: 100%; color: #fff; font-size: 20px; line-height: 60px; }
.yy-video-play .video-container { width: 1180px; height: 665px; background-color: #000; }
.video-info { border-radius: 5px; border: 1px solid #fdfbf9; width: 100%; min-height: 200px; background-color: #ffffff; padding: 65px 45px; }
.el-tabs__active-bar.is-top { }
.el-tabs .el-tabs__header .el-tabs__item.is-active { font-size: 24px; }
.el-tabs .el-tabs__header .el-tabs__item { font-size: 24px; height: 50px; font-weight: normal; }

/* 课程详情 */
.yy-cell-class { }
.yy-cell-class .main-box { margin-bottom: 20px; padding-bottom: 20px; }
.yy-cell-class .main-box .main-title { font-size: 20px; line-height: 80px; color: #777777; height: 80px; border-bottom: 1px solid #EDEFF0; padding-left: 30px; }
.yy-cell-class .main-box .course-list { margin: 50px; }
.yy-cell-class .main-box .course-list .chapter-item { margin-bottom: 50px; }
.yy-cell-class .main-box .course-list .chapter-item .chapter-name { font-size: 30px; line-height: 42px; color: #4a4a4a; margin-bottom: 10px; }
.yy-cell-class .main-box .course-list .chapter-item .chapter-info { font-size: 18px; line-height: 25px; color: #9b9b9b; margin-bottom: 20px; }
.yy-cell-class .main-box .course-list .course-item { width: 680px; height: 60px; background-color: #fbfbfb; margin-bottom: 15px; display: flex; align-items: center; padding-left: 25px; }
.yy-cell-class .main-box .course-list .course-item .section-name-view { width: 330px; font-size: 18px; line-height: 25px; color: #9b9b9b; margin-right: 20px; }
.yy-cell-class .main-box .course-list .course-item .watch-view { width: 10px; height: 10px; border-radius: 20px; background-color: #E5E5E5; margin-right: 35px; }
.yy-cell-class .main-box .course-list .course-item .status-view { font-size: 15px; line-height: 21px; color: #fe6200; margin-right: 40px; }
.yy-cell-class .main-box .course-list .course-item .button-view { width: 100px; height: 30px; }
.yy-cell-class .main-box .course-list .course-item .button-view .el-button { width: 100px; height: 30px; line-height: 10px; border: 1px solid #FE6200; color: #FE6200; padding: 0px 0px; }
.yy-cell-class .course-info-top { padding: 35px; height: 410px; display: flex; }
.yy-cell-class .detail-info { margin-left: 60px; width: 550px; }
.yy-cell-class .cover-img { width: 470px; height: 340px; }
.yy-cell-class .cover-img img { width: 470px; height: 340px; border-radius: 20px; }
.yy-cell-class .course-name { font-size: 32px; line-height: 45px; color: #777777; margin-bottom: 15px; }
.yy-cell-class .course-name a { color: #303133 }
.yy-cell-class .plan { font-size: 14px; line-height: 20px; color: #A7A7A7; margin-top: }
.yy-cell-class .services { font-size: 14px; line-height: 20px; color: #A7A7A7; margin-top: 5px; }
.yy-cell-class .period-validity { font-size: 16px; line-height: 22px; color: #9b9b9b; margin-top: 15px; }
.yy-cell-class.prices { border-top: 1px solid #F4F4F4; display: flex; align-items: center; justify-content: space-between; padding-top: 25px; }
.yy-cell-class.enroll-count { font-size: 15px; line-height: 21px; color: #9b9b9b; }
.yy-cell-class.prices .button-view .el-button { width: 140px; font-size: 18px; line-height: 40px; height: 40px; padding: 0px; }
.yy-cell-class.teacher-list { margin: 50px; }
.yy-cell-class.teacher-list .teacher-item { display: flex; }
.yy-cell-class.teacher-list .teacher-item .teacher-ava { width: 60px; height: 60px; }
.yy-cell-class.teacher-list .teacher-item .teacher-ava img { width: 60px; height: 60px; border-radius: 60px; }
.yy-cell-class.teacher-detail { margin-left: 30px; }
.yy-cell-class.teacher-name { font-size: 20px; line-height: 28px; color: #ff6600; }
.yy-cell-class.teacher-intro { font-size: 16px; line-height: 22px; color: #777777; margin-top: 10px; }
.yy-cell-class.teacher-intro-img { width: 590px; margin-top: 20px; }
.yy-cell-class.teacher-intro-img  img { width: 590px; border-radius: 15px; }
.yy-cell-class.detail-photo { padding: 15px; }
.yy-cell-class.detail-photo img { }
.yy-cell-class.ad-view { padding: 30px 25px 10px 25px; }
.yy-cell-class.ad-view .title { font-size: 20px; line-height: 28px; color: #777777; margin-bottom: 30px; }
.yy-cell-class.ad-view .ad-list .ad-item { margin-bottom: 20px; }
.yy-cell-class.ad-view .ad-list .ad-item img { width: 330px; height: 240px; border-radius: 10px; }

/* 订单 */
.yy-order { }
.yy-order .course-info-top { padding: 35px 50px; height: 270px; display: flex; }
/*.yy-order .course-info-top .detail-info { margin-left: 45px; }*/
.yy-order .course-info-top .cover-img { width: 228px; height: 200px; }
.yy-order .course-info-top .cover-img img { width: 228px; height: 200px; border-radius: 20px; }
.yy-order .course-info-top .course-name { font-size: 32px; line-height: 45px; color: #777777; }
.yy-order .course-info-top .course-name a { color: #303133 }
.yy-order .course-info-top .info-view { font-size: 16px; line-height: 32px; color: #9b9b9b; margin-top: 15px;  }
.yy-order .course-info-top .period-validity { font-size: 16px; line-height: 22px; color: #9b9b9b; margin-top: 15px; }

/* 确认订单 */
.yy-order .order { }
.yy-order .order.details { height: 220px; }
.yy-order .order.confirm { min-height: 639px; }
.yy-order .order.confirm .address .no_address { width: 210px; margin: 55px auto 38px auto; text-align: center; }
.yy-order .order.confirm .address .no_address img { height: 50px; }
.yy-order .order.confirm .address .no_address span { margin-left: 20px; font-size: 24px; color: #777777; vertical-align: 50% }
.yy-order .order.confirm .price { height: 225px; margin: 0 80px; padding-top: 150px; }
.yy-order .order.goods { overflow: hidden; }
.yy-order .order.goods .goods_picture { margin: 20px; float: left; }
.yy-order .order.goods .goods_picture img { width: 180px; height: 180px; }
.yy-order .order.goods .content { float: left; width: 870px; margin-top: 30px; }
.yy-order .order.goods .content .introduce { border-bottom: 1px solid #F4F4F4; height: 95px; }
.yy-order .order.goods .content .introduce .title { font-size: 32px; color: #777777; }
.yy-order .order.goods .content .introduce .paper { overflow: hidden; margin-top: 6px; }
.yy-order .order.goods .content .introduce .paper .introduction { font-size: 16px; color: #D4D4D4; float: left; }
.yy-order .order.goods .content .introduce .paper .price { font-size: 24px; color: #F96748; float: right; }
.yy-order .order .price .text_info { font-size: 22px; color: #777777; line-height: 50px; }
.yy-order .order .confirm_area { margin: 0 80px; margin-top: 230px; }
.yy-order .order .confirm_area .prompt_pay { font-size: 16px; color: #777777; text-align: right; }
.yy-order .order .confirm_area .price_arae { overflow: hidden; margin-top: 40px; }
.yy-order .order .confirm_area .price_arae .price_text_pay { float: right; font-size: 20px; color: #777777; line-height: 60px; }
.yy-order .order .confirm_area .price_arae .price_pay { float: right; font-size: 36px; color: #F56C00; line-height: 60px; }
.yy-order .order .confirm_area .goods_button_pay { text-align: right; margin-top: 10px; }
.yy-order .order .confirm_area .goods_button_pay  button.ui.button.button-default-84C889.button-default-l { margin-right: 0px; }

/* 正在支付 */
.yy-order .order-pay-view { padding: 40px; height: 815px; }
.yy-order .order-info { border-radius: 5px; width: 100%; height: 60px; background-color: #f8f8f8; font-size: 18px; line-height: 25px; color: #a6a7a7; display: flex; justify-content: space-between; align-items: center; padding-left: 20px; padding-right: 20px; }
.yy-order .order-info span { font-size: 18px; line-height: 25px; color: #ff6600; }

/* 支付页面 */
.yy-order .order-pay-view { }
.yy-order .attention { font-size: 16px; line-height: 30px; color: #838383; }
.yy-order .method-payment { height: 500px; margin-top: 90px; }
.yy-order .method-payment .weixin-logo { height: 60px; text-align: center; }
.yy-order .method-payment .weixin-logo img { height: 60px; }
.yy-order .method-payment .weixin-qr { width: 215px; height: 215px; margin: auto auto; border: 5px solid #4ba575; background-color: #fff; margin-top: 40px; margin-bottom: 25px; padding: 22px; }
.yy-order .method-payment .weixin-info { background-color: #4ba575; width: 215px; height: 50px; margin: auto auto; color: #fff; padding: 5px; }
.yy-order .method-payment .weixin-info .weixin-qr-icon { margin-left: 20px; margin-right: 5px; margin-top: 5px; width: 40px; height: 40px; float: left; }
.yy-order .method-payment .weixin-info .weixin-qr-text { text-align: left; float: left; font-size: 14px; }
.yy-order .method-payment .pay-text { font-size: 16px; color: #838383; letter-spacing: -0.48px; line-height: 30px; padding-top: 42px; padding-bottom: 42px; padding-right: 60px; padding-left: 60px; }
.yy-order .complete { height: 720px; }
.yy-order .complete .shopping_bags { text-align: center; }
.yy-order .complete .shopping_bags img { height: 175px; margin-top: 108px; }
.yy-order .complete .text { text-align: center; font-size: 28px; color: #777777; margin-top: 54px; height: 30px; }
.yy-order .complete .price { text-align: center; font-size: 24px; color: #F96748; margin-top: 20px; }
.yy-order .complete .button-view { text-align: center; margin-top: 130px; }
.yy-order .complete .prompt { text-align: center; font-size: 16px; color: #838383; line-height: 30px; margin-top: 70px; }

/* 编辑器系统 */
.yy-editor { }
.yy-editor-html { height: 100%; overflow: hidden; overflow-x: hidden; overflow-y: hidden }
.yy-editor-body { height: 100%; overflow: hidden; overflow-x: hidden; overflow-y: hidden }
.yy-editor .yy-editor-navigation { width: 100%; height: 45px; background: linear-gradient(90deg, #fc6d3d 0%, #fba852 100%); display: flex; align-items: center; padding-left: 10px; }
.yy-editor .yy-editor-main { position: absolute; top: 45px; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: #F1F; display: flex; }
.yy-editor .coding-view { width: 50%; height: 100%; background-color: #f7f7f7; padding: 10px; position: relative; }
.yy-editor .coding-view  .editor-area { position: absolute; top: 50px; right: 10px; left: 10px; bottom: 10px; }

.yy-editor .preview-view { width: 50%; height: 100%; background-color: #fafafa; padding: 10px; }
.yy-editor .editor-box { width: 100%; height: 70%; background-color: #f5f2f0; border-radius: 8px 8px 0 0; }
.yy-editor .function-box { width: 100%; height: 30%; background-color: #ffffff; border-radius: 0 0 8px 8px; position: relative; }
.yy-editor .function-box .function-nav { color:#AD6F2A; height: 100%; width: 43px; display: flex; flex-direction:column; background-color: #F7F1EB; justify-content:space-between ; border-radius: 0 0 0 8px; }
.yy-editor .function-box .function-nav .fun-item { display: flex; flex-direction:column; align-items: center; justify-content: center; height: 33.33%; }

.yy-editor .web-view { height: 100%; background-color: #ffffff; border-radius: 8px; }
.yy-editor .web-navigation { width: 100%; height: 50px; background-color: #ececec; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: space-between; padding-left: 20px; padding-right: 20px; }
.yy-editor .web-navigation-url { background: #FFFFFF; width: 70%; height: 20px; }
.yy-editor iframe { width: 100%; height: 100%; border-radius: 0 0 8px 8px; }
.yy-editor .pc-browser { height: 100%; }
.yy-editor .web-view { height: 100%; }
.yy-editor #editor { width: 100%; height: 100%; border-radius: 8px 8px 0 0; margin-top: 0px; margin-bottom: 0px; }
.yy-editor .editor-button { border-radius: 20px; width: 70px; height: 30px; background: #CBCBCB; display: flex; align-items: center; justify-content: center; color: #FFF; }
.yy-editor .editor-button-new { background: #32B927; }
.yy-editor .editor-button-save { background: #FC7B42; }
.yy-editor .editor-button-run { background: #487BFF; }
.yy-editor .editor-button-view { display: flex; justify-content: space-between; margin-bottom: 10px; }
.yy-editor .ace_content { height: 100% !important; }
.yy-editor .mobile-view { height: 100%; background-color: #ffffff; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.yy-editor .mobile-view .phone-browser-view { zoom:0.75; position: relative; width: 434px; height: 850px; }
.yy-editor .mobile-view .phone-browser-iframe { width: 375px; height: 667px;  position: absolute;     left: 28px; top: 90px; }

.amplification-view { position: absolute; right: 30px; bottom: 20px;}

/* 辅助代码 */
.yy-editor .code-hint-view { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20px; overflow-y: scroll; }
.yy-editor .code-hint-view::webkit-scrollbar { 
   display: none;
}
.yy-editor .code-hint-view .code-hint-item { display: flex; border-radius: 10px; width: 49%; height: 85px; max-height: 105px; background-color: rgba(253, 246, 227, 0.37); padding: 10px 15px; margin-bottom: 10px }

.yy-editor .code-hint-view .code-hint-item .code-content {letter-spacing : 1px; font-size: 18px; line-height: 25px; color: #ff6363; height: 35px; border-radius: 10px; border-bottom: 1px solid rgba(239, 239, 239, 0.36); margin-bottom: 5px; }
.yy-editor .code-hint-view .code-hint-item .code-prompt { font-size: 14px; line-height: 20px; color: #9b9b9b; }

	/* 编辑器图标 */
	.yy-editor .yy-sprites {  background: url('../Image/sprites-editor.svg') no-repeat;}
	.yy-editor .yy-sprites-logo { background-position: 0 -637px; width: 118px; height: 29px; }
	.yy-editor .yy-sprites-white-new { background-position: 0 0; width: 15px; height: 15px; } /* 添加 */
	.yy-editor .yy-sprites-white-save { background-position: 0 -20px; width: 15px; height: 15px; } /* 保存 */
	.yy-editor .yy-sprites-white-run { background-position: 0 -40px; width: 15px; height: 15px; } /* 运行 */
	.yy-editor .yy-sprites-color-document { background-position: -20px 0; width: 17px; height: 17px; } /* 文档 */
	.yy-editor .yy-sprites-color-code { background-position: -20px -22px; width: 17px; height: 17px; } /* 代码 */
	.yy-editor .yy-sprites-color-help { background-position: -20px -44px; width: 17px; height: 17px; } /* 帮助 */

	.yy-editor .yy-sprites-button-hidden { background-position: -379px 0; width: 30px; height: 24px; } /* 隐藏 */
	.yy-editor .yy-sprites-button-show { background-position: -379px -29px; width: 30px; height: 24px; } /* 显示 */

	.yy-editor .yy-sprites-button-amplification { display:inline-block; background-position: -102px 0; width: 15px; height: 15px; } /* 放大 */
	.yy-editor .yy-sprites-button-narrow { display:inline-block; background-position: -102px -20px; width: 15px; height: 15px; } /* 放大 */


	.yy-editor .yy-sprites-button-web { background-position: -379px -93px; width: 30px; height: 30px; } /* Web端 显示 */
	.yy-editor .yy-sprites-button-mobile { background-position: -379px -58px; width: 30px; height: 30px; } /* 移动端 显示 */
	.yy-editor .yy-sprites-img-browser-button { background-position: 0 -676px; width: 65px; height: 15px;} /* 浏览器三个按钮 */
	.yy-editor .yy-sprites-button-add { display:inline-block; background-position: -42px -125px; width: 20px; height: 20px; }