[v-cloak] { display: none; }
body { color: #262626; font-size: 14px; font-family: -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-feature-settings: "tnum"; line-height: 1.5715; background-color: #fff; border: none; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
h1, h2, h3, h4, h5 { font-weight: normal; }
em { font-style: normal; color: #597EF7; font-weight: 600; }
p { text-align: justify; }
#full-height-container { padding: 55px 20px 0; }
.quick-panel, .codecamp-main-wrap, .codecamplist-banner { max-width: 1240px; margin: auto; }

.progress-bar { background-color: rgba(132, 132, 132, 0.2); border-radius: 70px; }
.progress-bar .progress-bar-completed { position: relative; background-color: #52C41A; height: 100%;  border-radius: 70px; }
.progress-bar .progress-bar-completed:before { position: absolute; top: 20%; left: 6px; right: 6px; border-radius: inherit; background: rgba(255, 255, 255, 0.2); height: 29%; content: ''; }
.progress-bar .progress-bar-completed .progressbar-rocket { position: absolute; top: -14px; right: -5px; width: 40px; height: 40px; }

.ranking-hundred-people::-webkit-scrollbar { width: 7px; }
.ranking-hundred-people::-webkit-scrollbar-thumb { background-color: #F2F2F2; border-radius: 6px; }

.quick-panel { position: relative; border: 1px solid rgb(204, 204, 204); border-radius: 16px; color: rgb(16, 16, 16); margin: auto; padding: 20px 35px; }
.quick-panel .quick-panel-close { position: absolute; top: -10px; right: -10px; width: 36px; height: 36px; border: 2px solid #ccc; border-radius: 50%; font-size: 20px; color: #ccc; background-color: #fff; box-shadow: 0 0 3px 5px #fff; cursor: pointer; }
.quick-panel .quick-panel-close i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 600; }
.quick-panel .quick-panel-mainWrap { display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: center; display: flex; justify-content: space-between; align-items: center; }
.quick-panel .quick-panel-mainWrap .quick-panel-main { display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: center; display: flex; justify-content: space-between; align-items: center; }
.quick-panel .quick-panel-mainWrap .quick-panel-main .quick-panel-img { width: 140px; height: 73px; text-align: center; }
.quick-panel .quick-panel-mainWrap .quick-panel-main .quick-panel-img img { border-radius: 5px; }
.quick-panel .quick-panel-mainWrap .quick-panel-main .quick-panel-content { padding-left: 6px; font-size: 24px; color: #101010; }
.quick-panel .quick-panel-mainWrap .quick-panel-main .quick-panel-content .panel-content-current { font-size: 18px; margin-top: 10px; }
.quick-panel .quick-panel-mainWrap .quick-panel-main .quick-panel-content p a { color: #597EF7; cursor: pointer; }
.quick-panel .quick-panel-mainWrap .quick-panel-btn { background-color: rgb(89, 126, 247); border-radius: 25px; color: #fff; padding: 12px 44px; font-size: 20px; cursor: pointer; }

.codecamplist-banner { margin-top: 43px; }
.codecamplist-banner .index-wrap { text-align: center; }
.codecamplist-banner .index-wrap .codecamplist-banner-content { font-size: 28px; }
.codecamplist-banner-content .progress { display: -webkit-flex; -webkit-justify-content: center; display: flex; justify-content: center; }
.codecamplist-banner-content span { position: relative; font-size: 16px; color: rgba(121, 121, 121); padding-left: 40px; }
.codecamplist-banner-content span:nth-of-type(1) { padding: 0; }
.codecamplist-banner-content span:after { content: '|'; position: absolute; top: -2px; right: -23px; }
.codecamplist-banner-content span:nth-of-type(3):after, .codecamplist-banner-content span:last-child:after { content: ''; }
.codecamplist-banner-content .progress-reset-btn { display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; font-size: 12px; color: #597EF7; background-color: rgba(240, 245, 255, 100); border-radius: 20px; padding: 6px 10px; margin-left: 13px; cursor: pointer; }

.codecamplist-banner-progressbar {  height: 14px;  margin-top: 23px; }
.codecamplist-banner-progressbar .banner-progressbar-completed { position: relative; min-width: 2.6%; }
.codecamplist-banner-progressbar .banner-progressbar-completed i { position: absolute; top: -3px; right: -10px; font-size: 21px; color: #52C41A; }

.codecamp-main-wrap { display: -webkit-flex; -webkit-justify-content: space-between; display: flex; justify-content: space-between; margin: 42px auto; }
.codecamp-main-wrap .codecamplist-content { flex: 2; }
.codecamp-main-wrap .codecamplist-content .codecamplist-list { margin-top: 33px; }
.codecamp-main-wrap .codecamplist-content .codecamplist-list:first-child { margin-top: 0; }
.codecamp-main-wrap .codecamplist-content .codecamplist-list h2 { position: relative; display: inline-block; background-color: #597EF7; border-radius: 8px; font-size: 18px; color: #fff; padding: 5px 23px; font-weight: 600; text-align: center; min-width: 133px; z-index: 9; }
.codecamp-main-wrap .codecamplist-content .codecamplist-list .codecamplist-catalog { display: -webkit-flex; -webkit-flex-direction: column; margin-top: 9px; }
.codecamplist-catalog .codecamplist-catalog-item { position: relative; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; margin-top: 18px; }
.codecamplist-catalog .codecamplist-catalog-item .catalog-item-flag { width: 30px; }
.codecamplist-catalog .codecamplist-catalog-item .catalog-item-main { width: 100%; margin-left: 10px; padding: 7px 13px; z-index: 9; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0); transition: border 0.14s linear, box-shadow 0.14s linear; }
.codecamplist-catalog .codecamplist-catalog-item .catalog-item-main:hover { border: 1px solid rgb(255, 255, 255); box-shadow: 0px 2px 6px 0px rgba(193, 193, 193, 0.4); border-radius: 16px; box-sizing: border-box; }
.codecamplist-catalog .codecamplist-catalog-item .catalog-item-step { position: absolute; top: -35px; left: 98px; width: 5px; height: 105%; }
.catalog-item-step:before, .catalog-item-step:after { display: inline-block; background-color: #F0F5FF; content: ''; }
.codecamplist-catalog .codecamplist-catalog-item .catalog-item-step:before, .codecamplist-catalog .codecamplist-catalog-item .catalog-item-step:after { width: 5px; height: 106%; }
.step-cancel:after { content: normal; }
.catalog-item-main .catalog-item-order { float: left; background-color: #F0F5FF; color: #85A5FF; border-radius: 20px; text-align: center; padding: 5px 26px; transition: background-color 0.14s linear, color 0.14s linear; width: 100px; }
.codecamplist-catalog .codecamplist-catalog-item:hover .catalog-item-order { background-color: #52C41A; color: #fff; }
.catalog-item-main .catalog-item-title { float: left; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; margin-left: 42px; font-size: 16px; color: #101010; padding: 5px 0; }
.catalog-item-main .catalog-item-state { float: right; font-size: 14px; color: #ACACAC; padding: 5px 0; }
.catalog-item-main .catalog-item-title i { font-size: 20px; margin-right: 8px; }
.catalog-item-main .catalog-item-title .icon-wrap { width: 20px; height: 20px; border: 2px solid #D5D5D5; border-radius: 50%; }
.catalog-item-main .catalog-item-title .w3c-icon-correct { color: #52C41A; }
.catalog-item-main .catalog-item-title .i-icon-lock-o { color: #D5D5D5; }

/*.catalog-item-currunt { border: 1px solid rgb(255, 255, 255); box-shadow: 0px 2px 6px 0px rgba(193, 193, 193, 0.4); border-radius: 16px; }*/
/*.catalog-item-currunt .catalog-item-order { background-color: #52C41A; color: #fff; }*/

.codecamp-main-wrap .codecamp-other { position: relative; flex: 1; margin-left: 55px; }
.codecamp-main-wrap .codecamp-other .codecamp-other-certificate, .codecamplist-other-ranking { border: 1px solid rgb(204, 204, 204); border-radius: 16px; background-color: #fff; min-width: 395px; z-index: 9; }
.codecamp-other-certificate .other-certificate-title, .codecamplist-other-ranking .other-ranking-title { text-align: center; border-bottom: 1px solid rgb(204, 204, 204);padding: 18px 0; font-size: 18px; font-weight: 600; }
.codecamp-other-certificate .other-certificate-main { padding: 27px 12px; }
.codecamp-other-certificate .other-certificate-progress { display: -webkit-flex; display: flex; }
.codecamp-other-certificate .other-certificate-progress .certificate-progress-img { flex-shrink: 0; width: 88px; margin-right: 20px; }
.codecamp-other-certificate .other-certificate-progress .certificate-progress-test { font-size: 16px; }
.codecamp-other-certificate .other-certificate-progress .certificate-progress-test p span { font-weight: 600; }
.codecamp-other-certificate .other-certificate-progress .certificate-progress-test .certificate-progress-experience { font-size: 14px; margin-top: 14px; white-space: nowrap; }
.other-certificate-progress .certificate-progress-test .certificate-progress-experience .progress-experience-thin { font-weight: normal; }
.codecamp-other-certificate .other-certificate-progress .certificate-progress-details { display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: center; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.codecamp-other-certificate .other-certificate-progress .certificate-progress-details .certificate-progressbar { height: 12px; width: 170px; margin-right: 10px; }
.codecamp-other-certificate .other-certificate-progress .certificate-progress-details .certificate-progressbar .certificate-progressbar-completed { min-width: 10%; }
.codecamp-other-certificate .other-certificate-progress .certificate-progress-details .certificate-progress-evolve { font-size: 12px; color: #797979; }
.other-certificate-des { margin-top: 35px; }
.other-certificate-des .certificate-main-describe { display: -webkit-flex; display: flex; margin-top: 26px; }
.other-certificate-des .certificate-des-logo { width: 48px; }
.other-certificate-des .certificate-des-descontent { display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; margin-left: 25px; }
.other-certificate-des .certificate-des-descontent .certificate-des-title { font-size: 16px; }
.other-certificate-des .certificate-des-descontent .certificate-des-content { font-size: 12px; }
.other-certificate-des .certificate-receive-btn { text-align: center; background-color: rgb(89, 126, 247); border-radius: 8px; box-shadow: 0px 2px 6px 0px rgba(151, 151, 151, 0.4); color: #fff; padding: 10px 130px; margin-top: 31px; cursor: pointer; }

.codecamplist-other-ranking { margin-top: 28px; height: 740px;  }
.codecamplist-other-ranking .other-ranking-main { position: relative; }
.codecamplist-other-ranking .other-ranking-main .ranking-hundred-title { display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: baseline; display: flex; justify-content: center; align-items: baseline; color: #C1C1C1; font-size: 14px; margin: 8px 0 14px 0; font-weight: 600; }
.codecamplist-other-ranking .other-ranking-main .ranking-hundred-title span { padding-left: 4px; }
.codecamplist-other-ranking .other-ranking-main .ranking-hundred-people { overflow-y: scroll; height: 618px; }
/*.codecamplist-other-ranking .other-ranking-main .ranking-hundred-people .hundred-people-wrap { overflow-y: scroll; }*/
.codecamplist-other-ranking .other-ranking-main .ranking-main { position: relative; display: -webkit-flex; -webkit-justify-content: flex-start; -webkit-align-items: center; display: flex; justify-content: flex-start; align-items: center; padding: 8px 20px; }
.codecamplist-other-ranking .other-ranking-main .ranking-myself { background-color: #F2F2F2; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-main-wrap { display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; align-items: center; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-myself-rankNum { font-size: 10px; color: #797979;  }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-people-rankNum { position: relative; width: 34px; height: 34px; color: #797979; text-align: center; margin-left: 5px; }
.ranking-people-rankNum .rankingImg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; }
.ranking-people-rankNum .rankingBackground {  border-radius: 50%; background: #EAEAEA; padding: 3px 5px; margin: 3px 3px; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-myself-rankNum p:first-child { font-size: 14px; color: #DB0029; font-weight: 600; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-userinfo { display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: flex; justify-content: center; align-items: center; margin-left: 8px; }
.ranking-hundred-people .ranking-main .ranking-main-wrap .ranking-userinfo { margin-left: 17px; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-userinfo .ranking-userinfo-portrait { width: 36px; height: 36px; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-userinfo .ranking-userinfo-portrait img { border-radius: 50%; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-userinfo .ranking-userinfo-info { margin-left: 7px; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-userinfo .ranking-userinfo-info .ranking-userinfo-name { font-size: 15px; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-userinfo .ranking-userinfo-info .ranking-userinfo-timing { font-size: 12px; color: #797979; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-breakthrough { position: absolute; left: 70%; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: flex; justify-content: center; align-items: center; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-breakthrough .ranking-breakthrough-flag { margin-right: 6px; width: 20px; height: 20px; }
.codecamplist-other-ranking .other-ranking-main .ranking-main .ranking-breakthrough .ranking-breakthrough-num { font-size: 12px; color: #797979; }
.codecamplist-other-ranking .other-ranking-main:last-child { margin-bottom: 14px; }

.ranking-fixed { position: fixed; top: 80px; }
.ranking-absolute { position: absolute; bottom: 0; }

.reset-wrap .reset-mask, .pay-wrap .pay-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color:  rgba(0, 0, 0, 0.4); z-index: 999; }
.reset-wrap .reset-box, .pay-wrap .pay-box-wrap { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 16px; text-align: center; background-color: #fff; z-index: 1000; padding: 0 20px; min-width: 456px; }
.reset-wrap .reset-box .reset-box-head { position: relative; }
.reset-wrap .reset-box .reset-box-head .box-head-close { position: absolute; top: 0; right: -8px; color: #CCCCCC; font-size: 24px; cursor: pointer; transition: color  0.14s linear; }
.reset-wrap .reset-box .reset-box-head .box-head-close:hover { color: #a6a6a6; }
.reset-wrap .reset-box .reset-box-head .box-head-title { display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #597EF7; padding: 29px 0; }
.reset-wrap .reset-box .reset-box-head .box-head-title span { padding-left: 7px; }
.reset-wrap .reset-box .reset-box-main { font-size: 16px; color: #101010; }
.reset-wrap .reset-box .reset-box-main .box-main-remarks { font-size: 14px; color: #797979; margin-top: 13px; }
.reset-wrap .reset-box .reset-box-main p { margin-top: 12px; }
.reset-wrap .reset-box .reset-box-main p:first-child { margin-top: 0; }
.reset-wrap .reset-box .reset-box-btnGroup { display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: center; display: flex; justify-content: space-between; align-items: center; padding: 38px 20px; }
.reset-wrap .reset-box .reset-box-btnGroup .box-btnGroup-cancel, .reset-wrap .reset-box .reset-box-btnGroup .box-btnGroup-confirm { text-align: center; padding: 8px 0; border-radius: 8px; cursor: pointer; border: 1px solid rgb(89, 126, 247); transition: background-color 0.14s linear, color 0.14s linear; }
.reset-wrap .reset-box .reset-box-btnGroup .box-btnGroup-canlcelWrap { flex: 1; padding-right: 13px; }
.reset-wrap .reset-box .reset-box-btnGroup .box-btnGroup-confirmWrap { flex: 1; padding-left: 13px; }
.reset-wrap .reset-box .reset-box-btnGroup .box-btnGroup-cancel { color: #597EF7; }
.reset-wrap .reset-box .reset-box-btnGroup .box-btnGroup-confirm { color: #fff; background-color: #597EF7; }
.reset-wrap .reset-box .reset-box-btnGroup .box-btnGroup-cancel:hover, .reset-wrap .reset-box .reset-box-btnGroup .box-btnGroup-confirm:hover { background-color: #3c68f6; color: #fff; }

.pay-wrap .pay-box-wrap { border-radius: 5px; min-width: 659px; z-index: 97; }
.pay-wrap .pay-mask { z-index: 96; }
.pay-box-wrap .pay-box-head { display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: space-between; display: flex; align-items: center; justify-content: space-between; color: #444444; }
.pay-box-wrap .pay-box-head .box-head-title { position: relative; font-size: 24px; margin: 20px 12px; text-align: left; }
.pay-box-wrap .pay-box-head .box-head-close { font-size: 20px; cursor: pointer; }
.pay-wrap .pay-box-wrap iframe { border: none; width: 100%; min-height: 580px; }

.cert-codecamp .cert-area-main { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1200; overflow-y: scroll!important; }
.cert-codecamp .cert-area-content { position: relative; width: 800px; height: auto; min-height: 430px; margin: 0 auto; overflow: hidden; top: 10%; z-index: 1200; background-color: #fff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.cert-codecamp .cert-area-top { background-color: #fff; border-bottom: 1px solid #e5e5e5; padding: 15px; }
.cert-codecamp .cert-area-title { font-size: 16px; color: #333; }
.cert-codecamp .cert-area-close { float: right; width: 20px; height: 20px; font-weight: 700; text-align: center; color: #9e9e9e; text-shadow: 0 1px 0 #fff; cursor: pointer; transition: all 0.14s linear; }
.cert-codecamp .cert-area-close:hover { color: #808080; }
.cert-codecamp .cert-area-bg { position: relative; width: 800px; height: 1132px; background: url("/statics/images/w3c/codecamp-cert-bg.png") no-repeat; background-size: 800px 1132px; font-family: "SimHei"; }
.cert-codecamp .cert-area-container { position: relative; top: 35%; font-size: 24px; color: #666; text-align: center; }
.cert-codecamp .cert-area-container .cert-uname { font-size: 40px; color: #333; }
.cert-codecamp .cert-area-container .cert-enname { margin-top: 2px; font-size: 24px; }
.cert-codecamp .cert-area-container  .cert-name { margin-top: 25px; font-size: 38px; color: #333; }
.cert-codecamp .cert-area-container .cert-meta { margin-top: 30px; }
.cert-codecamp .cert-name2 { font-size: 15px; }
.cert-codecamp .cert-meta2 { font-size: 13px; }
.cert-codecamp .cert-area-meta { position: absolute; bottom: 7%; left: 10%; }
.cert-codecamp .cert-area-meta p { margin-top: 5px; font-size: 16px; color: #666; }

.box-bottomBorder { border-bottom: 1px solid #F0F0F0; padding-bottom: 11px; }
.box-head-step { position: absolute; top: 5px; left: -11px; width: 3px; height: 70%; }
.box-head-step:after { display: inline-block; background-color: #FF7100; content: ''; width: 100%; height: 100%; }

@media (max-width: 1024px) {
    .codecamp-main-wrap .codecamplist-content { min-width: 478px; }
}
/*.coupon-box-main .main-option-content .option-fr .option-fr-choice { width: 23px; height: 23px; vertical-align: middle; }*/
/*.coupon-box-main .main-option-content .option-fr .option-fr-choice input { width: 100%; height: 100%; border: 1px solid rgb(187, 187, 187); vertical-align: middle; }*/

.morecontent {
	font-size: 16px;
    text-align: center;
    padding: 26px;
    background: #f9f9f9;
    border-radius: 20px;
    margin: 10px 0;
    box-shadow: 3px 2px 6px #ccc;
}