.register-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-width: 1230px;
    min-height: 100vh;
    z-index: 999999;
    background-color: rgb(190, 200, 223, 0.8);
    font-family: PingFangSC-Regular, PingFang SC;
}

.register-cover .register-container {
    display: flex;
    position: relative;
    width: 725px;
    /* height: 496px; */
    height: 560px;
    border-radius: 10px;
    background-color: #fff;
}

.register-cover .register-container .close {
    position: absolute;
    right: 14px;
    top: 15px;
    width: 14px;
    height: 14px;
    background-image: url(https://info.compassedu.hk/pc/img/register/close.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 10;
}

.register-cover .register-container .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 238px;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-size: 100% 100%;
    background-image: url(https://info.compassedu.hk/pc/img/register/left-bg.png);
    background-repeat: no-repeat;
}

.register-cover .register-container .left .logo {
    width: 134px;
    height: 19px;
    background-size: 100% 100%;
    background-image: url(https://info.compassedu.hk/mobile/new-logo/26.png);
    background-repeat: no-repeat;
    margin: 67px auto 63px;
}

.register-cover .register-container .left .avatar {
    width: 89px;
    height: 89px;
    background-size: 100% 100%;
    background-image: url(https://info.compassedu.hk/mobile/new-logo/20.png);
    background-repeat: no-repeat;
}

.register-cover .register-container .left .ctx1 {
    width: 180px;
    height: auto;
    color: #fff;
    font-size: 18px;
    line-height: 17px;
    font-weight: 500;
    margin: 21px auto 9px;
    text-align: center;
}

.register-cover .register-container .left .ctx2 {
    width: 204px;
    height: auto;
    color: #D1DAF2;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
}

.register-cover .register-container .right {
    position: relative;
    width: 487px;
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.register-cover .register-container .right .top {
    display: flex;
    width: auto;
    height: 50px;
    margin: 32px 0 0 41px;
}

.register-cover .register-container .right .top .per-step {
    display: flex;
    width: auto;
    height: 100%;
}

.register-cover .register-container .right .top .per-step .step-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 48px;
    height: 100%;
}

.register-cover .register-container .right .top .per-step .step-info .step-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #fff;
    font-size: 12.5px;
    text-align: center;
    border-radius: 50%;
    font-weight: 700;
    background-color: #D3D4D8;
}

.register-cover .register-container .right .top .per-step.active .step-info .step-no {
    background-color: #2F57F7;
    border: 3px solid #e4eaff;
    box-sizing: content-box;
    margin-top: -3px;
}

.register-cover .register-container .right .top .per-step.checked .step-info .step-no {
    width: 22px;
    height: 22px;
    background-color: #2F57F7;
    margin-top: -1px;
    color: transparent;
    font-size: 0;
    background-image: url(https://info.compassedu.hk/pc/img/register/check.png);
    background-size:  14px 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.register-cover .register-container .right .top .per-step .step-info .step-desc {
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: #878787;
}

.register-cover .register-container .right .top .per-step.active .step-info .step-desc,
.register-cover .register-container .right .top .per-step.checked .step-info .step-desc {
    color: #131414;
}

.register-cover .register-container .right .top .per-step .step-line {
    width: 67px;
    height: 1px;
    /**
        to right 渐变色的方向
        #D3D4D8, #D3D4D8 渐变色的颜色数值，
        5px, transparent 5px 虚线的线条渐变的色值的宽度及虚线的宽度，不需要渐变的话这两个值设置成一样就行，就是虚线的宽度
        transparent 8.3px 虚线的间隔
    */
    background: repeating-linear-gradient(to right, #D3D4D8, #D3D4D8 5px, transparent 5px, transparent 8.3px);
    margin: 10px -1px 0px 3px;
}

.register-cover .register-container .right .top .per-step.checked .step-line {
    background: repeating-linear-gradient(to right, #2F57F7, #2F57F7 5px, transparent 5px, transparent 8.3px);
}

.register-cover .register-container .right .step {
    width: 430px;
    height: auto;
    margin: 5px 0 0 30px;
}

.register-cover .register-container .right .step .question-name {
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    line-height: 24px;
    font-weight: 500;
    font-size: 15px;
    text-align: left;
    margin-top: 16px;
}

.register-cover .register-container .right .step .question-name .multi-select {
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 14px;
    font-weight: 400;
    font-size: 10px;
    color: #FF701A;
    background: #FFECE0;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
}

.register-cover .register-container .right .step.step2 .question-option-type {
    font-weight: 400;
    font-size: 13px;
    color: #9A9FA3;
    line-height: 18px;
    margin: 5px 0 -4px;
}

.register-cover .register-container .right .step.step2 .question-option-type.graduate-no22 {
    margin: 10px 0 -4px;
}

.register-cover .register-container .right .step.step2 .question-option-type.active {
    color: #2372FF;
}

.register-cover .register-container .right .step .question-option {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: auto;
    font-weight: 400;
    font-size: 13px;
    color: #4A4E54;
    cursor: pointer;
}

.register-cover .register-container .right .step .question-option .per-option {
    width: 137px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #F5F7FA;
    border-radius: 6px;
    margin-top: 10px;
    color: #4A4E54;
}

.register-cover .register-container .right .step.step2 .question-option .per-option {
    width: 100px!important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-cover .register-container .right .step.step2 .question-option .per-option.active {
    font-size: 15px;
    font-weight: 500;
}

.register-cover .register-container .right .step.step2 .question-option .per-option .enroll-time {
    font-weight: 400;
    font-size: 12px;
    color: #AAACB0;
}

.register-cover .register-container .right .step.step2 .question-option.no21 .per-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px!important;
    height: 40px!important;
}

.register-cover .register-container .right .step.step2 .question-option.no21 .per-option .role-img {
    width: 52px;
    height: 26px;
    margin-right:6px
}

.register-cover .register-container .right .step.step3 .question-option .per-option {
    width: 209px!important;
}

.register-cover .register-container .right .step.step3 .question-input,
.register-cover .register-container .right .step.step1 .question-input
{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 428px;
    height: auto;
    box-sizing: border-box;
}

.register-cover .register-container .right .step.step3 .search-input,
.register-cover .register-container .right .step.step1 .search-input
 {
    width: 428px;
    height: 32px;
    font-size: 12px;
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #D3D4D8;
    margin: 8px 0;
    padding: 7px 12px;
}

.register-cover .register-container .right .step.step3 .search-list-empty,
.register-cover .register-container .right .step.step3 .search-list-loading,
.register-cover .register-container .right .step.step1 .search-area-list-empty,
.register-cover .register-container .right .step.step1 .search-area-list-loading
 {
    color: #8c8c8c;
    font-size: 12px;
}

.register-cover .register-container .right .step.step3 .search-list,
.register-cover .register-container .right .step.step1 .search-area-list {
    position: absolute;
    left: 0;
    top: 40px;
    height: auto;
    width: 100%;
    height: auto;
    max-height: 120px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #4A4E54;
    font-size: 12px;
    background-color: #EEF5FF;
    z-index: 999;
}

.register-cover .register-container .right .step.step3 .search-list .per-item,
.register-cover .register-container .right .step.step1 .search-area-list .per-item
 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.register-cover .register-container .right .step.step3 .search-list.major .per-item {
    height: auto;
    flex-direction: column;
    line-height: initial;
    align-items: flex-start;
}

.register-cover .register-container .right .step.step3 .search-list.major .per-item .major-name {
    font-size: 13px;
    line-height: 13px;
    padding: 10px;
}

.register-cover .register-container .right .step.step3 .search-list.major .per-item .univ-name {
    font-size: 11px;
    line-height: 11px;
    padding: 0 10px 10px;
}

.register-cover .register-container .right .step.step4 .question-option .per-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px!important;
    height: 68px!important;
    font-size: 12px;
    line-height: 13px;
    box-sizing: border-box;
}

.register-cover .register-container .right .step.step4 .question-option .per-option.active {
    background: #EEF5FF;
    border-radius: 6px;
    border: 1px solid #0166FF;
}

.register-cover .register-container .right .step.step4 .question-option .per-option .source {
    width: 35px;
    height: 35px;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 6px;
}

.register-cover .register-container .right .step.step4 .question-option .per-option .source.other-source {
    margin-bottom: 0;
    width: 43px;
    height: 43px;
}

.register-cover .register-container .right .step.step4 .question-option.no41 {
    justify-content: start;
}

.register-cover .register-container .right .step.step4 .question-option.no41 .per-option {
    margin-right: 10px;
}
.register-cover .register-container .right .step.step4 .question-option.no41 .per-option:nth-child(4n) {
    margin-right: 0;
}

.register-cover .register-container .right .step .question-option .per-option.active {
    background: #EEF5FF;
    border: 1px solid #0166FF;
    font-weight: 500;
}

.register-cover .register-container .right .step.step4 .question-input.no41 {
    position: relative;
    margin-top: 4px;
}

.register-cover .register-container .right .step.step4 .question-input.no41::before {
    content: "";
    position: absolute;
    top: 0;
    left: 261px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent #fff transparent;
    z-index: 2;
}
  
.register-cover .register-container .right .step.step4 .question-input.no41::after {
    content: "";
    position: absolute;
    top: -1.5px;
    left: 260px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #D3D4D8 transparent;
    z-index: 0;
}

.register-cover .register-container .right .step.step4 .search-input {
    position: relative;
    width: 426px;
    height: 32px;
    font-size: 12px;
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #D3D4D8;
    margin: 8px 0;
    padding: 7px 52px 7px 20px;
}

.register-cover .register-container .right .step.step4 .search-input::placeholder {
    color: #D3D4D8;
    font-size: 12px;
}

.register-cover .register-container .right .step.step4 .question-input.no41 .tip-icon {
    position: absolute;
    left: 10px;
    top: 15px;
    color: #FD4444;
    font-size: 12px;
}

.register-cover .register-container .right .step.step4 .question-input.no41 #source-text-num {
    position: absolute;
    right: 20px;
    top: 16px;
    font-weight: 400;
    font-size: 12px;
    color: #D3D4D8;
}


.register-cover .register-container .right .btn-area {
    position: absolute;
    left: 0;
    bottom: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
}

.register-cover .register-container .right .btn-area .register-opt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 32px;
    border-radius: 2px;
    font-weight: 400;
    font-size: 14px;
    box-sizing: border-box;
    cursor: pointer;
}

.register-cover .register-container .right .btn-area .register-opt-btn.cancel,
.register-cover .register-container .right .btn-area .register-opt-btn.prev {
    border: 1px solid #2F57F7;
    background-color: #fff;
    color: #2F57F7;
}

.register-cover .register-container .right .btn-area .register-opt-btn.next {
    background-color: #2F57F7;
    margin-left: 12px;
    color: #fff;
}

.register-cover.hide, .register-cover .hide {
    display: none!important;
}

.choose-other-country-box {
  /* margin-top: 8px; */
  font-weight: 500;
  font-size: 12px;
  color: #868B8F;
  line-height: 17px;
  position: relative;
}

.choose-other-country-num-box {
  position: absolute;
}

.choose-other-country-box .choose-other-country-list {
  margin-left: 5px;
}

.choose-other-country-box .choose-other-country-list .per-item {
  padding: 1px 0 1px 6px;
  background: #EEF5FF;
  border-radius: 4px;
  border: 1px solid #2F57F7;
  font-size: 12px;
  color: #2F57F7;
  line-height: 17px;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
}

.choose-other-country-box .choose-other-country-list .per-item:first-child {
  margin-left: 79px;
}

.choose-other-country-box .choose-other-country-list .per-item .delete-icon-box {
  padding-left: 5px;
  padding-right: 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.choose-other-country-box .choose-other-country-list .per-item .delete-icon {
  /* margin-left: 5px; */
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.search-area-list-empty {
  margin-bottom: 8px;
}

.question-option.no12 {
  gap: 0 9px;
  justify-content: flex-start !important;
}

.register-cover .register-container .right .step.step1 .search-input{
  background: url(https://info.compassedu.hk/pc/img/register/input-bg.png) no-repeat;
  background-size: 100% 100%;
  height: 37px;
  border: none;
  padding: 12px 12px 7px 22px;
}

.register-cover .register-container .right .step.step1 .search-input::placeholder {
  color: #D3D4D8;
  margin-left: 10px;
}

.question-input-num {
  font-size: 12px;
  color: #D3D4D8;
  line-height: 18px;
  position: absolute;
  top: 20px;
  right: 12px;
}

.question-input-left-icon {
  position: absolute;
  top: 20px;
  left: 12px;
  color: #FD4444;
  font-size: 12px;
}