@-webkit-keyframes zoomIn{from{opacity:0.72;-webkit-transform:scale(0.24);transform:scale(0.24)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes zoomIn{from{opacity:0.72;-webkit-transform:scale(0.24);transform:scale(0.24)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes slideUp{from{opacity:0.72;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideUp{from{opacity:0.72;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideDown{from{opacity:0.72;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideDown{from{opacity:0.72;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.fade-enter,.fade-leave-to{opacity:0}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity 0.24s;transition:opacity 0.24s}.fade-enter-to,.fade-leave{opacity:1}.zoomIn-enter-active{-webkit-animation:zoomIn 0.24s ease-out;animation:zoomIn 0.24s ease-out}.zoomIn-leave-active{-webkit-animation:zoomIn 0.24s ease-in reverse;animation:zoomIn 0.24s ease-in reverse}.slideUp-enter-active{-webkit-animation:slideUp 0.24s ease-out;animation:slideUp 0.24s ease-out}.slideUp-leave-active{-webkit-animation:slideUp 0.24s ease-in reverse;animation:slideUp 0.24s ease-in reverse}.slideDown-enter-active{-webkit-animation:slideDown 0.24s ease-out;animation:slideDown 0.24s ease-out}.slideDown-leave-active{-webkit-animation:slideDown 0.24s ease-in reverse;animation:slideDown 0.24s ease-in reverse}@font-face{font-family:"ubuntu-c";src:url("/statics/style/font/ubuntu-c.ttf") format("truetype")}body{min-width:1232px;color:#353535}.layout-container{-webkit-box-sizing:content-box;box-sizing:content-box;min-width:1200px;max-width:1240px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}.primary-btn{padding:8px 24px;font-size:14px;color:#fff;text-align:center;background-image:-webkit-gradient(linear, right top, left top, from(#fa9614), to(#ff8400));background-image:linear-gradient(270deg, #fa9614, #ff8400);border-radius:100px;-webkit-box-shadow:0 0 8px rgba(250,84,28,0.3);box-shadow:0 0 8px rgba(250,84,28,0.3);cursor:pointer}.primary-btn:hover{color:#fff;background-image:-webkit-gradient(linear, right top, left top, from(#ffa940), to(#ffa940));background-image:linear-gradient(270deg, #ffa940, #ffa940)}.primary-btn-lg{padding-top:12px;padding-bottom:12px;min-width:180px;font-size:20px}.primary-btn-sm{padding:8px 24px;font-size:18px}.banner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:1200px;height:20vw;color:#fff;text-align:center;background:url("//7n.w3cschool.cn/statics/images/seniorcourse/frontend/banner-bg.png") no-repeat 50% 0/cover}.banner-title{font-size:3.4vw;font-weight:800;text-shadow:0 0 20px #d4380d}.banner-title .tag{position:absolute;width:122px;margin-left:12px;padding:7px 16px;font-size:18px;font-weight:600;color:#ff652d;text-shadow:none;background-image:linear-gradient(28deg, #fff, #ffd49d);border-radius:15px 2px 15px 2px;-webkit-box-shadow:0 3px 4px #ff4400;box-shadow:0 3px 4px #ff4400}.banner-description{margin-top:1vw;font-size:1.25vw}@media (max-width: 1200px){.banner{height:240px}.banner-title{font-size:40.8px;text-shadow:0 0 12px #d4380d}.banner-description{margin-top:12px;font-size:15px}}.course-tabbar{padding-top:60px}.course-tabbar-gray{background-color:#f7f8fa}.course-tabbar .layout-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.course-tabbar-tab{padding-bottom:10px;font-size:22px;border-bottom:4px solid transparent;cursor:pointer;-webkit-transition:all 0.24s;transition:all 0.24s}.course-tabbar-tab:hover{color:#fa541c}.course-tabbar-tab.active{font-weight:600;border-bottom-color:#fa541c}.course-tabbar-tab+.course-tabbar-tab{margin-left:75px}.radio{position:relative;display:inline-block;vertical-align:sub}.radio-input{position:absolute;top:50%;left:50%;width:14px;height:14px;margin-top:-7px;margin-left:-7px;opacity:1}.radio-inner{position:relative;top:0;left:0;display:block;width:24px;height:24px;background-color:#fff;border:1px solid #d9d9d9;border-radius:50%;-webkit-transition:all 0.24s;transition:all 0.24s}.radio-inner::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;margin-top:-6px;margin-left:-6px;background-color:#fa541c;border-radius:50%;opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.24s cubic-bezier(0.78, 0.14, 0.15, 0.86);transition:all 0.24s cubic-bezier(0.78, 0.14, 0.15, 0.86)}.radio .radio-input:checked+.radio-inner{border-color:#fa541c}.radio .radio-input:checked+.radio-inner::after{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.radio-label{cursor:pointer}.radio-label:hover .radio-inner{border-color:#fa541c}.radio-label-disabled{cursor:not-allowed}.radio-label-disabled .radio-inner{background-color:#f5f5f5}.radio-label-disabled:hover .radio-inner{border-color:#d9d9d9}.popup-mask,.popup-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000}.popup-mask{background-color:rgba(0,0,0,0.45)}.popup-wrap{overflow-y:auto}.popup .modal{padding:30px;background-color:#fff;border-radius:20px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.16);box-shadow:0 0 20px rgba(0,0,0,0.16)}.popup .modal-wrap{position:relative;top:100px;width:768px;max-width:calc(100vw - 32px);margin:0 auto;padding-bottom:32px}.popup .modal-close{position:absolute;top:30px;right:30px;z-index:1;width:30px;height:30px;font-size:18px;font-weight:700;color:#8c8c8c;line-height:30px;text-align:center;-webkit-transition:all 0.24s;transition:all 0.24s;cursor:pointer}.popup .modal-close:hover{color:#262626;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.popup .modal-header{padding-right:30px;font-size:24px;line-height:30px;word-wrap:break-word}.popup .modal-header-with-decorate::before{content:"";display:inline-block;width:5px;height:30px;margin-right:12px;vertical-align:top;background-color:#fa541c;border-radius:20px}.popup .modal-body{margin-top:20px}.popup.zoom-appear{opacity:0;-webkit-transform:none;transform:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup.zoom-enter-active{-webkit-animation:zoomIn 0.36s both running;animation:zoomIn 0.36s both running}.popup.zoom-leave-active{-webkit-animation:zoomIn 0.36s reverse both running;animation:zoomIn 0.36s reverse both running}.layer{padding:80px 0}.layer-title{font-size:32px;font-weight:600;text-align:center}.layer-subtitle{margin-top:12px;font-size:18px;color:#595959;text-align:center}.layer-content{margin-top:42px}.loading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:calc(100vh - 303px);color:#595959}.loading .i-icon{font-size:48px}.loading-tip{margin-top:16px;font-size:24px}.service{position:fixed;right:30px;bottom:10%;z-index:19;cursor:pointer}.service-qrcode{position:absolute;right:0;bottom:60px;z-index:9;width:200px;padding:20px;font-size:14px;text-align:center;background-color:#fff;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1);border-radius:20px 20px 0 20px}.service-qrcode-tip{color:#8c8c8c}.fixed-nav{position:fixed;top:0;left:0;right:0;z-index:19;height:66px;background-color:#fff;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1)}.fixed-nav .layout-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%}.fixed-nav .nav-list{display:-webkit-box;display:-ms-flexbox;display:flex}.fixed-nav .nav-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:22px;cursor:pointer;-webkit-transition:color 0.24s;transition:color 0.24s}.fixed-nav .nav-item:hover{color:#fa541c}.fixed-nav .nav-item+.nav-item{margin-left:60px}.fixed-nav .nav-purchase{display:-webkit-box;display:-ms-flexbox;display:flex}.fixed-nav .nav-purchase .purchase-btn{width:150px;margin:12px 0 12px 30px}.fixed-nav .nav-continue{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fixed-nav .nav-continue-text{color:#8c8c8c}.fixed-nav .nav-continue .primary-btn{margin:12px 0 12px 30px}.checkout-success{position:absolute;top:50%;left:50%;z-index:1;width:520px;padding:46px 46px 24px;background-color:#fff;border-radius:6px;-webkit-box-shadow:0 3px 6px -4px rgba(0,0,0,0.12),0 6px 16px 0 rgba(0,0,0,0.08),0 9px 28px 8px rgba(0,0,0,0.05);box-shadow:0 3px 6px -4px rgba(0,0,0,0.12),0 6px 16px 0 rgba(0,0,0,0.08),0 9px 28px 8px rgba(0,0,0,0.05);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.checkout-success-close{position:absolute;top:8px;right:8px;z-index:1;width:30px;height:30px;font-size:18px;font-weight:700;color:#8c8c8c;line-height:30px;text-align:center;-webkit-transition:all 0.24s;transition:all 0.24s;cursor:pointer}.checkout-success-close:hover{color:#262626;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.checkout-success-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.checkout-success .wechat-qrcode-text{margin-top:8px;font-size:16px;text-align:center}.checkout-success .success-content{-webkit-box-flex:1;-ms-flex:1;flex:1;width:0;margin-left:32px;text-align:center}.checkout-success .success-content-title{font-size:18px}.checkout-success .success-content-title>.i-icon{margin-right:4px;color:#fa541c}.checkout-success .success-content-description{font-size:16px;color:#fa541c;margin-top:8px}.purchase-btn{padding:12px 48px;font-size:20px;text-align:center;color:#fff;background-image:-webkit-gradient(linear, right top, left top, from(#fa9614), to(#ff8400));background-image:linear-gradient(270deg, #fa9614, #ff8400);border-radius:100px;-webkit-box-shadow:0 0 20px rgba(250,84,28,0.3);box-shadow:0 0 20px rgba(250,84,28,0.3);cursor:pointer}.purchase-btn:hover{background-image:-webkit-gradient(linear, right top, left top, from(#ffa940), to(#ffa940));background-image:linear-gradient(270deg, #ffa940, #ffa940)}.purchase-btn-sm{padding:8px 24px;font-size:18px}.purchase-meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;font-size:0}.purchase-meta-cell{margin-left:15px}.purchase-meta-cell:first-child{margin-left:0}.purchase-meta-tip{font-size:20px;color:#fa541c}.purchase-meta-price{margin-left:6px;font-family:ubuntu-c, -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:40px;color:#fa541c}.purchase-meta-preprice{font-size:14px;color:#8c8c8c}.purchase-meta-tag{margin-left:7px;padding:2px 7px;font-size:12px;color:#ff7a45;border:1px solid currentColor;border-radius:100px}.purchase-meta-tag:first-child{margin-left:0}.purchase-bar{position:relative;top:-58px;margin-bottom:-58px;padding:0 16px}.purchase-bar .layout-container{padding:20px 0;background-color:#fff;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2);border-radius:20px}.purchase-bar-tag{display:inline-block;padding:5px 16px 5px 28px;font-size:18px;color:#fff;vertical-align:middle;background-image:-webkit-gradient(linear, right top, left top, from(#ff8400), to(#fa541c));background-image:linear-gradient(270deg, #ff8400, #fa541c);border-top-right-radius:25px;border-bottom-right-radius:25px;-webkit-box-shadow:0 0 20px rgba(250,84,28,0.3);box-shadow:0 0 20px rgba(250,84,28,0.3)}.purchase-bar-main{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:20px;padding:0 70px}.purchase-bar-main .purchase-meta{line-height:1}.purchase-bar-main .purchase-meta-tip{font-size:22px}.purchase-bar-main .purchase-meta-price{font-size:54px}.purchase-bar-main .purchase-meta-preprice{font-size:18px}.purchase-bar-main .purchase-btn-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.purchase-bar-main .purchase-btn-wrap .primary-btn+.primary-btn{margin-left:12px}.purchase-bar-main .purchase-bar-act{position:relative;margin-right:12px;padding:12px 24px;font-size:18px;color:#fa541c;background-color:#fef1e7;border-radius:100px;cursor:pointer}.purchase-bar-main .purchase-bar-act-tooltip{display:none;position:absolute;left:50%;bottom:100%;z-index:1;padding-bottom:24px;-webkit-transform:translateX(-50%);transform:translateX(-50%);cursor:default}.purchase-bar-main .purchase-bar-act-tooltip-inner{width:240px;padding:12px 0;text-align:center;font-size:16px;color:#353535;background-color:#fef1e7;border:1px solid #ffd9cc;border-radius:6px}.purchase-bar-main .purchase-bar-act-tooltip-inner::after{content:"";position:absolute;left:50%;bottom:7px;z-index:1;width:20px;height:20px;background-color:#fef1e7;border-right:1px solid #ffd9cc;border-bottom:1px solid #ffd9cc;-webkit-transform:rotate(45deg) translateX(-50%);transform:rotate(45deg) translateX(-50%)}.purchase-bar-main .purchase-bar-act-tooltip-inner .hl{color:#fa541c}.purchase-bar-main .purchase-bar-act-tooltip-inner>p:nth-child(3){margin-top:8px;font-size:14px;color:#8c8c8c}.purchase-bar-main .purchase-bar-act-tooltip-inner>p:nth-child(3)>img{margin-right:4px}.purchase-bar-main .purchase-bar-act:hover .purchase-bar-act-tooltip{display:block}.purchase-bar-tip{margin-top:10px;padding:0 70px;font-size:0}.purchase-bar-tip .tip-item{font-size:14px;color:#8c8c8c}.purchase-bar-tip .tip-item .i-icon{margin-right:4px}.purchase-bar-tip .tip-item+.tip-item{margin-left:18px}.purchase-modal .purchase-list{width:100%;border:1px solid #f0f0f0;border-spacing:0}.purchase-modal .purchase-list-head{background-color:#f0f0f0}.purchase-modal .purchase-list-head>tr>th{padding:10px 20px;font-size:18px}.purchase-modal .purchase-list-body>tr>td{padding:10px 20px;text-align:center}.purchase-modal .purchase-list-body .product-detail{display:-webkit-box;display:-ms-flexbox;display:flex}.purchase-modal .purchase-list-body .product-detail-cover{margin-right:12px;border-radius:4px}.purchase-modal .purchase-list-body .product-detail-act{padding:0 10px;font-size:16px;color:#fa541c;background-color:#ffede6;border-radius:10px 2px 10px 2px}.purchase-modal .purchase-list-body .product-detail-name{margin-top:8px;font-size:18px}.purchase-modal .purchase-list-body .product-price{font-size:32px;color:#fa541c}.purchase-modal .purchase-list-body .product-preprice{margin-left:12px;font-size:14px;color:#8c8c8c;text-decoration:line-through}.purchase-modal .purchase-paytype{margin-top:30px}.purchase-modal .purchase-paytype-title{color:#8c8c8c}.purchase-modal .purchase-paytype-cell{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:20px;font-size:0}.purchase-modal .purchase-paytype-cell .cell-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.purchase-modal .purchase-paytype-cell .cell-label .i-icon{font-size:35px}.purchase-modal .purchase-paytype-cell .cell-label .i-icon-alipay{color:#1677ff}.purchase-modal .purchase-paytype-cell .cell-label .i-icon-wxpay{color:#09bb07}.purchase-modal .purchase-paytype-cell .cell-label .i-icon-wallet{color:#ff6c48}.purchase-modal .purchase-paytype-cell .cell-label .sep{margin:0 0.4em}.purchase-modal .purchase-paytype-cell .cell-label-name{margin-left:12px;font-size:18px}.purchase-modal .purchase-paytype-cell .cell-label-tip,.purchase-modal .purchase-paytype-cell .cell-label-lighttip{margin-left:12px;font-size:16px}.purchase-modal .purchase-paytype-cell .cell-label-tip{color:#fa541c}.purchase-modal .purchase-paytype-cell .cell-label-lighttip{color:#8c8c8c}.purchase-modal .purchase-paytype-cell .cell-value{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.purchase-modal .purchase-paytype-cell .cell-value .topup{margin-right:16px;padding:2px 10px;font-size:14px;color:#fa541c;background-color:#f0f0f0;border-radius:100px;cursor:pointer}.purchase-modal .purchase-paytype-cell .cell-value .topup:hover+.radio>.radio-inner{border-color:#d9d9d9}.purchase-modal .purchase-checkout{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:30px}.purchase-modal .purchase-checkout-price{font-size:24px}.purchase-modal .purchase-checkout-price>span{color:#fa541c}.purchase-modal .purchase-checkout .purchase-btn{margin-left:20px;border-radius:10px}.purchase-modal .purchase-tips{margin-top:20px;padding-top:20px;font-size:12px;color:#8c8c8c;line-height:1.74;letter-spacing:0.05em;border-top:1px dotted #ccc}.purchase-modal .purchase-tips>ul{padding-left:2em;list-style-type:disc}.stair-nav{position:fixed;top:50%;left:calc(25vw - 310px);z-index:19;overflow:hidden;width:140px;text-align:center;background-color:#fff;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1);border-radius:10px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.stair-nav .stair-step{font-size:14px;text-align:center;cursor:pointer;-webkit-transition:all 0.24s;transition:all 0.24s}.stair-nav .stair-step:hover{background-color:#f0f0f0}.stair-nav .stair-main .stair-step{position:relative;padding:14px 0}.stair-nav .stair-main .stair-step::after{content:'';position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;left:45px;right:45px;bottom:0;border-bottom:1px solid #d9d9d9;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:scaleY(0.5);transform:scaleY(0.5)}.stair-nav .stair-main .stair-step.active{color:#fff;background-color:#fa541c}.stair-nav .back-top{padding:14px 0;color:#ccc}.stair-nav .back-top:hover{background-color:#f0f0f0}@media (max-width: 1600px){.stair-nav{display:none}}.stairSlideUp-enter-active{-webkit-animation:stairSlideUp 0.24s ease-out;animation:stairSlideUp 0.24s ease-out}.stairSlideUp-leave-active{-webkit-animation:stairSlideUp 0.24s ease-in reverse;animation:stairSlideUp 0.24s ease-in reverse}@-webkit-keyframes stairSlideUp{from{opacity:0.72;-webkit-transform:translate(-50%, 100%);transform:translate(-50%, 100%)}to{opacity:1;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}}@keyframes stairSlideUp{from{opacity:0.72;-webkit-transform:translate(-50%, 100%);transform:translate(-50%, 100%)}to{opacity:1;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}}.course-intro .countdown{margin-left:8px}.course-intro .countdown-num{margin:0 0.2em}.course-intro .layer:nth-of-type(2n){background-color:#f7f8fa}.course-intro .first-layer{padding-top:60px;padding-bottom:65px}.course-intro .first-layer .layer-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.course-intro .first-layer .layer-content .card{width:300px;margin:0 24px;padding:16px 0 30px;text-align:center;border-radius:20px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.16);box-shadow:0 0 20px rgba(0,0,0,0.16)}.course-intro .first-layer .layer-content .card-title{margin-top:8px;font-size:20px;font-weight:600}.course-intro .first-layer .layer-content .card-description{margin-top:10px;padding:0 32px;font-size:14px;color:#8c8c8c}.course-intro .second-layer{background:url("//7n.w3cschool.cn/statics/images/seniorcourse/frontend/layer2-bg.png") no-repeat 50% 0/cover}.course-intro .second-layer .layer-content{margin-top:78px}.course-intro .second-layer .layer-content .card-header,.course-intro .second-layer .layer-content .card-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.course-intro .second-layer .layer-content .card-header-item,.course-intro .second-layer .layer-content .card-icon-item{width:380px;margin:0 16px;text-align:center}.course-intro .second-layer .layer-content .card-header-item>img,.course-intro .second-layer .layer-content .card-icon-item>img{max-width:280px}.course-intro .second-layer .layer-content .card-header-item{padding:0 20px;text-align:center;border:10px solid #ffc598;border-radius:100px}.course-intro .second-layer .layer-content .card-header-item .title{position:relative;top:-10px;display:inline-block;padding:10px 20px;font-size:24px;color:#fff;text-align:center;text-shadow:0 3px 6px #d4380d;vertical-align:middle;background-image:-webkit-gradient(linear, left top, left bottom, from(#ff8b63), to(#ff652d));background-image:linear-gradient(180deg, #ff8b63, #ff652d);border:6px solid #f7f8fa;border-radius:20px;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.16);box-shadow:0 0 10px rgba(0,0,0,0.16);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.course-intro .second-layer .layer-content .card-header-item .description{position:relative;top:-25px;font-size:16px;color:#8c8c8c}.course-intro .third-layer .layer-content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:30px 60px;border-radius:20px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1)}.course-intro .third-layer .layer-content .guide-video{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:24px;background-color:#262626;border-radius:20px}.course-intro .third-layer .layer-content .guide-video .video-js{background-color:#262626}.course-intro .third-layer .layer-content .guide-detail{margin-left:40px}.course-intro .third-layer .layer-content .guide-detail-teacher{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.course-intro .third-layer .layer-content .guide-detail-teacher .teacher-avatar{overflow:hidden;width:75px;height:75px;border-radius:50%;-webkit-box-shadow:0 0 6px rgba(0,0,0,0.16);box-shadow:0 0 6px rgba(0,0,0,0.16)}.course-intro .third-layer .layer-content .guide-detail-teacher .teacher-info{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:8px}.course-intro .third-layer .layer-content .guide-detail-teacher .teacher-info-name{font-size:30px}.course-intro .third-layer .layer-content .guide-detail-teacher .teacher-info-description{font-size:18px;color:#8c8c8c}.course-intro .third-layer .layer-content .guide-detail-teacher .teacher-info-description .hl{position:relative}.course-intro .third-layer .layer-content .guide-detail-teacher .teacher-info-description .hl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background-image:-webkit-gradient(linear, right top, left top, from(rgba(250,140,22,0.16)), to(rgba(250,84,28,0.3)));background-image:linear-gradient(270deg, rgba(250,140,22,0.16), rgba(250,84,28,0.3));border-radius:10px}.course-intro .third-layer .layer-content .guide-detail-teacher .teacher-detail{position:absolute;top:100%;left:0;right:0;z-index:1}.course-intro .third-layer .layer-content .guide-detail-highlight{-ms-flex-negative:0;flex-shrink:0;margin-top:30px}.course-intro .third-layer .layer-content .guide-detail-highlight .highlight-title{position:relative;display:inline-block;padding:0 24px;font-size:24px;color:#fa541c;text-shadow:0 1px 2px rgba(250,84,28,0.6);background-color:#fff2e8;border:3px solid #ffe8e3;border-right:none;border-radius:4px}.course-intro .third-layer .layer-content .guide-detail-highlight .highlight-title::after{content:"";position:absolute;top:3px;right:-13px;width:32px;height:32px;background-color:#fff2e8;border-width:5px 5px 0 0;border-style:solid;border-color:#ffe8e3;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px}.course-intro .third-layer .layer-content .guide-detail-highlight .highlight-list{margin-top:30px;font-size:18px;color:#8c8c8c}.course-intro .third-layer .layer-content .guide-detail-highlight .highlight-list li::before{content:"";-webkit-box-sizing:content-box;box-sizing:content-box;display:inline-block;width:10px;height:10px;margin-right:12px;background-color:#fa541c;border:5px solid #ffece5;border-radius:50%;vertical-align:sub}.course-intro .third-layer .layer-content .guide-detail-highlight .highlight-list li+li{margin-top:15px}.course-intro .fourth-layer .layer-with-bg{background:url("//7n.w3cschool.cn/statics/images/seniorcourse/frontend/layer4-bg.png") no-repeat 50% 0/cover}.course-intro .fourth-layer .layer-with-bg .layout-container{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:72px;padding-right:72px}.course-intro .fourth-layer .course-syllabus{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.course-intro .fourth-layer .course-syllabus-line{position:absolute;top:70px;left:0;right:0;z-index:0;height:1px;background-color:#fa541c}.course-intro .fourth-layer .course-syllabus-line::before,.course-intro .fourth-layer .course-syllabus-line::after{position:absolute;top:50%;content:"";width:14px;height:14px;border:2px solid #fa541c;background-color:#fff;-webkit-transform:translateY(-50%);transform:translateY(-50%);border-radius:50%}.course-intro .fourth-layer .course-syllabus-line::before{left:0}.course-intro .fourth-layer .course-syllabus-line::after{right:0}.course-intro .fourth-layer .course-syllabus-column{-webkit-box-flex:1;-ms-flex:1;flex:1;width:0;padding:0 36px}.course-intro .fourth-layer .course-syllabus-column .course{height:100%;padding-top:40px;padding-bottom:75px;background-color:#fff;border-radius:20px;-webkit-box-shadow:0 0 10px rgba(4,4,4,0.1);box-shadow:0 0 10px rgba(4,4,4,0.1)}.course-intro .fourth-layer .course-syllabus-column .course-head{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:61px}.course-intro .fourth-layer .course-syllabus-column .course-head-inner{position:absolute;left:-10px;right:-10px;z-index:1;padding:12px 0;text-align:center;word-break:break-all;background-image:-webkit-gradient(linear, left top, left bottom, from(#ff8b63), to(#ff652d));background-image:linear-gradient(180deg, #ff8b63, #ff652d);border-radius:10px}.course-intro .fourth-layer .course-syllabus-column .course-head-inner .title-name{display:inline;font-size:24px;font-weight:600;color:#fff;text-shadow:0 3px 6px #d4380d}.course-intro .fourth-layer .course-syllabus-column .course-head-inner .title-preview{position:relative;top:-3px;display:inline;margin-left:4px;padding:2px 6px;font-size:12px;color:#fa541c;background-color:#fff;border-radius:100px;cursor:pointer}.course-intro .fourth-layer .course-syllabus-column .course-head-inner .title-preview .i-icon{margin-right:4px}.course-intro .fourth-layer .course-syllabus-column .course-chapters{margin-top:42px}.course-intro .fourth-layer .course-syllabus-column .course-chapters .chapter-item{margin:15px 20px 0;padding:10px 16px;font-size:14px;text-align:center;border:1px solid #f0f0f0;border-radius:100px}.course-intro .fourth-layer .course-syllabus-column .course-chapters .chapter-item:first-child{margin-top:0}.course-intro .fourth-layer .course-syllabus-column .course-more{margin-top:4px;text-align:center}.course-intro .fourth-layer .course-syllabus-column .course-more-icon{display:inline-block;width:16px;height:16px;vertical-align:middle;background:url("//7n.w3cschool.cn/statics/images/seniorcourse/frontend/course-more.png") no-repeat 0 0/contain;-webkit-transform:rotateX(180deg);transform:rotateX(180deg);-webkit-transition:all 0.24s;transition:all 0.24s;cursor:pointer}.course-intro .fourth-layer .course-syllabus-column .course-more-icon.fold{-webkit-transform:rotateX(0);transform:rotateX(0)}.course-intro .fourth-layer .course-syllabus-column .course-codecamp{margin:20px 20px 0;padding:12px 24px;font-size:14px;background-color:#fff2e8;border-radius:20px}.course-intro .fourth-layer .course-syllabus .course-study-before,.course-intro .fourth-layer .course-syllabus .course-study-after{position:absolute;top:120px;z-index:1;width:82px;padding:12px 0;font-size:14px;text-align:center;background-color:#fff2e8;border-radius:10px}.course-intro .fourth-layer .course-syllabus .course-study-before{left:0;-webkit-transform:translateX(-70%);transform:translateX(-70%)}.course-intro .fourth-layer .course-syllabus .course-study-after{right:0;-webkit-transform:translateX(70%);transform:translateX(70%)}.course-intro .fourth-layer .course-count{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:50px;border-radius:20px}.course-intro .fourth-layer .course-count-inner{position:relative;padding:16px 32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:200px}.course-intro .fourth-layer .course-count-inner{border-radius:200px}.course-intro .fourth-layer .course-count-inner::after{content:'';position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;top:-50%;left:-50%;right:-50%;bottom:-50%;border:1px solid #ffd9cc;border-radius:400px;-webkit-transform:scale(0.5);transform:scale(0.5)}.course-intro .fourth-layer .course-count-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:160px;height:160px;margin:0 14px;font-size:20px;color:#ff7a45;background:url("//7n.w3cschool.cn/statics/images/seniorcourse/frontend/course-count-item.png") no-repeat center center/cover}.course-intro .fourth-layer .course-count-item .num{font-size:24px;font-weight:600}.course-intro .fifth-layer .layer-content{position:relative;margin-left:22px;margin-right:22px;border-radius:20px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.16);box-shadow:0 0 20px rgba(0,0,0,0.16)}.course-intro .fifth-layer .swiper-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:40px 60px}.course-intro .fifth-layer .swiper-control-button{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 10px;height:60px;font-size:24px;text-align:center;line-height:60px;background-color:#f0f0f0;border-radius:10px;cursor:pointer;-webkit-transition:all 0.24s;transition:all 0.24s}.course-intro .fifth-layer .swiper-control-button:hover{background-color:#d9d9d9}.course-intro .fifth-layer .swiper-control-button.active{color:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#ff8b63), to(#ff652d));background:linear-gradient(180deg, #ff8b63, #ff652d)}.course-intro .fifth-layer .swiper-slide{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 70px}.course-intro .fifth-layer .swiper-prev,.course-intro .fifth-layer .swiper-next{position:absolute;top:50%;z-index:10;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:80px;height:80px;margin-top:-40px;font-size:28px;color:#d9d9d9;background-color:#fff;border-radius:50%;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.1);box-shadow:0 0 10px rgba(0,0,0,0.1);cursor:pointer}.course-intro .fifth-layer .swiper-prev{left:-22px}.course-intro .fifth-layer .swiper-next{right:-22px}.course-intro .fifth-layer .swiper-pagination-bullets{padding:40px 0;text-align:center;line-height:1}.course-intro .fifth-layer .swiper-pagination-bullet{width:14px;height:14px;margin:0 10px;vertical-align:middle;background:#ebebeb;-webkit-transition:all 0.24s;transition:all 0.24s;opacity:1;cursor:pointer}.course-intro .fifth-layer .swiper-pagination-bullet:hover{background:#bfbfbf}.course-intro .fifth-layer .swiper-pagination-bullet-active{width:35px;background:#fa541c;border-radius:7px}.course-intro .fifth-layer .swiper-pagination-bullet-active:hover{background:#fa541c}.course-intro .fifth-layer .codecamp{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.course-intro .fifth-layer .codecamp-intro{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:32px}.course-intro .fifth-layer .codecamp-intro-item{margin-top:30px}.course-intro .fifth-layer .codecamp-intro-item:first-child{margin-top:0}.course-intro .fifth-layer .codecamp-intro-item .intro-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.course-intro .fifth-layer .codecamp-intro-item .intro-title-icon{width:48px;height:48px;margin-right:12px}.course-intro .fifth-layer .codecamp-intro-item .intro-title-word{font-size:24px;color:#fa541c}.course-intro .fifth-layer .codecamp-intro-item .intro-description{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:16px}.course-intro .fifth-layer .codecamp-intro-item .intro-description-dot{-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:48px;height:28px;margin-right:12px}.course-intro .fifth-layer .codecamp-intro-item .intro-description-dot::after{content:"";-webkit-box-sizing:content-box;box-sizing:content-box;width:6px;height:6px;background-color:#d4380d;border:4px solid #ffece5;border-radius:50%;-webkit-box-shadow:0 0 10px rgba(250,84,28,0.1);box-shadow:0 0 10px rgba(250,84,28,0.1)}.course-intro .fifth-layer .codecamp-intro-item .intro-description-word{font-size:18px;color:#8c8c8c;word-break:break-all}.course-intro .fifth-layer .codecamp-cover{-ms-flex-negative:0;flex-shrink:0;width:664px}.course-intro .sixth-layer{background:url("//7n.w3cschool.cn/statics/images/seniorcourse/frontend/layer6-bg.png") no-repeat 50% 0/cover}.course-intro .sixth-layer .aid{-webkit-box-sizing:border-box;box-sizing:border-box;width:25%;padding:0 42px;margin-top:35px;text-align:center}.course-intro .sixth-layer .aid-grid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:-35px}.course-intro .sixth-layer .aid-icon{display:inline-block;width:100px;height:100px;vertical-align:middle;background:url("//7n.w3cschool.cn/statics/images/seniorcourse/frontend/aid-sprite.png") no-repeat 0 0/400% 200%}.course-intro .sixth-layer .aid-name{font-size:22px}.course-intro .sixth-layer .aid-description{margin-top:8px;padding:0 16px;font-size:16px;color:#8c8c8c}.course-intro .seventh-layer .layer-title .title-icon{margin-left:12px;vertical-align:baseline}.course-intro .seventh-layer .qa{-webkit-box-sizing:border-box;box-sizing:border-box;width:50%;padding:0 42px;margin-top:35px}.course-intro .seventh-layer .qa-list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:-35px}.course-intro .seventh-layer .qa-q{font-size:20px}.course-intro .seventh-layer .qa-a{margin-top:10px;margin-left:42px;font-size:16px;color:#8c8c8c}.course-study .layer{padding-top:60px;padding-bottom:65px;background-color:#f7f8fa}.course-study .study-card{margin:60px 32px 0;padding:18px 0 35px;border-radius:20px;background-color:#fff;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1)}.course-study .study-card:first-child{margin-top:0}.course-study .study-card-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.course-study .study-card-header .header-left,.course-study .study-card-header .header-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.course-study .study-card-header .header-left{position:relative;left:-22px}.course-study .study-card-header .header-title,.course-study .study-card-header .header-right{position:relative;top:-6px}.course-study .study-card-header .header-phase{width:171px;height:72px;font-size:22px;color:#fff;text-align:center;line-height:58px;background:url("//7n.w3cschool.cn/statics/images/seniorcourse/frontend/study-phase-tag.png") no-repeat 0 0/cover}.course-study .study-card-header .header-title{margin-left:20px;font-size:26px;font-weight:700}.course-study .study-card-header .header-progress{font-size:16px}.course-study .study-card-header .header-progress>span{margin-right:4px;color:#fa541c}.course-study .study-card-header .header-study{margin-left:12px;padding:12px 32px;font-size:18px;color:#fff;background-image:-webkit-gradient(linear, right top, left top, from(#ff8400), to(#fa9614));background-image:linear-gradient(270deg, #ff8400, #fa9614);border-radius:100px 0 0 100px;cursor:pointer}.course-study .study-card-header .header-study:hover{background-image:-webkit-gradient(linear, right top, left top, from(#ffa940), to(#ffa940));background-image:linear-gradient(270deg, #ffa940, #ffa940)}.course-study .study-card-header .header-study-disabled{color:#bfbfbf;background:#f5f5f5;cursor:not-allowed}.course-study .study-card-header .header-study-disabled:hover{background:#f5f5f5}.course-study .study-card-detail{margin-top:14px;padding:0 60px;font-size:16px}.course-study .study-card-detail .detail-goal{color:#8c8c8c}.course-study .study-card-detail .detail-meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:8px}.course-study .study-card-detail .detail-meta .sep{margin:0 12px}.course-study .study-card-line{margin:32px 60px 0}.course-study .study-card-line .chapter{position:relative;margin-top:18px}.course-study .study-card-line .chapter:first-child{margin-top:0}.course-study .study-card-line .chapter-dot{position:absolute;top:20px;left:30px;z-index:1;width:20px;height:20px;background-color:#fa541c;border:3px solid #ffebe4;border-radius:50%}.course-study .study-card-line .chapter-tail{position:absolute;top:52px;left:40px;bottom:-32px;z-index:1;width:1px;background-color:#fff2e8;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.course-study .study-card-line .chapter:last-child .chapter-tail{bottom:0}.course-study .study-card-line .chapter-content{margin-left:80px;padding:18px 36px;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.1);box-shadow:0 0 8px rgba(0,0,0,0.1);border-radius:20px}.course-study .study-card-line .chapter-content-title{font-size:16px;font-weight:600}.course-study .study-card-line .chapter-content-session{margin-top:20px;font-size:16px}.course-study .study-card-line .chapter-content-session .sep{margin:20px}.course-study .study-card-line .chapter-content-session .session-item{cursor:pointer}.course-study .study-card-line .chapter-content-session .session-item:hover{color:#fa541c}.course-study .cert-canvas{width:100%}#toolbar{display:none !important}