@font-face {
    font-family: 'ProximaNova';
    src: url('/fonts/ProximaNova-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNova';
    src: url('/fonts/ProximaNova-Bold.otf');
    font-weight: bold;
    font-style: normal;
}

* {
    -webkit-font-smoothing: antialiased;
    font-family: 'ProximaNova', sans-serif;
}

body {
    margin: 0 auto;
    background: #bebebe;
}

.page {
    background: none;
}

a:hover {
    text-decoration: none;
}

.fa-font12 {
    font-size: 12px;
}

.fa-font14 {
    font-size: 14px;
}

.fa-font15 {
    font-size: 15px;
}

.fa-font16 {
    font-size: 16px;
}

.fa-font18 {
    font-size: 18px;
}

.fa-font20 {
    font-size: 20px;
}

.fa-font22 {
    font-size: 22px;
}

.fa-font25 {
    font-size: 25px;
}

.fa-font30 {
    font-size: 30px;
}

.fa-font35 {
    font-size: 35px;
}

.fa-font40 {
    font-size: 40px;
}

.fa-magin-fr {
    margin-right: 10px;
    color: #4A4A4A;
}

.margin0 {
    margin: 0 !important;
}

.padding0 {
    padding: 0 !important;
}

.navbar, .toolbar, .load3-pop-fb a, .panel-right .panel-ul .item-title {
    font-size: 14px;
}

.navbar .badge-rounded-square {
    border-radius: 4px;
    background-color: transparent;
    border: 2px solid white;
    margin-right: 10px;
}

.bsd {
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background: #8A572E;
    position: absolute;
    right: -10px;
    top: -5px;
    display: block;
    z-index: 1111;
}

.panel .list-block .item-link:active {
    background: rgba(255, 255, 255, 0.2);
}

.panel .list-block .item-inner {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.panel .content-block, .panel .content-block-title {
    color: #fff;
}

select {
    text-indent: 5px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("../img/arrowicon.png") no-repeat scroll right center transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.total-points-container {
    padding-bottom: 20px;
    border-bottom: 1px solid #c1c1c1;
}

@media screen and (min-width: 800px) {
    .answer_title span.answer-Verify, .answer_title span.answer-Right, .answer_title span.answer-Wrong, .answer_title span.answer-N-Verify-Right {
        font-size: 35px;
        line-height: 35px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .answer_title span.answer-Verify-B, .answer_title span.answer-Right-B, .answer_title span.answer-Wrong-B, .answer_title span.answer-N-Verify-Right-B {
        font-size: 20px;
        line-height: 45px;
    }
}

@media screen and (max-width: 800px) {
    .answer_title span.answer-Verify, .answer_title span.answer-Right, .answer_title span.answer-Wrong, .answer_title span.answer-N-Verify-Right {
        font-size: 25px;
        line-height: 25px;
        margin-bottom: 10px;
    }

    .answer_title span.answer-Verify-B, .answer_title span.answer-Right-B, .answer_title span.answer-Wrong-B, .answer_title span.answer-N-Verify-Right-B {
        font-size: 16px;
        line-height: 16px;
    }

    .total-points-container {
        font-size: 16px;
    }
}

.main_banner {
    width: 100%;
    height: 150px;
}

.main_menu {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
}

.main_menu_button {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 50%;
    height: 140px;
    cursor: pointer;
    position: relative;
    float: left;
}

.main_menu_button.active-state {
    background: #d9d9d9;
}

html:not(.watch-active-state) .main_menu_button:active {
    background: #d9d9d9;
}

.slider-pagination-bullet {
    width: 5px;
    height: 5px;
}

.slider-pagination {
    bottom: 5px;
    text-align: right;
    right: 10px;
}

.slider-pagination-active {
    background: #fff;
}

.margin44 {
    margin: 43px 0 0 0;
}

.main_menu .main_menu_button .main_menu_icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    text-align: center;
    overflow: hidden;
    margin: 20px auto 0 auto;
    font-size: 14px;
    background: #233D74;
}

.main_menu-txt {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #233D74;
    line-height: 24px;
}

.main_menu .main_menu_button .main_menu_icon i {
    color: #fff;
}

.main_menu .main_menu_button p {
    width: 100%;
    padding: 0 0 5px 0;
; margin: 0;
    font-size: 1em;
}

.main_menu .main_menu_button p span {
    font-size: 18px;
    line-height: 30px;
}

.main_menu .main_menu_button .main_menu_pop {
    width: 100%;
    text-align: center;
    font-size: 12px;
    position: absolute;
    line-height: 20px;
    bottom: 5px;
    left: 0;
}

.main_menu .main_menu_button .main_menu_pop i {
    font-size: 12px;
    padding: 0 0 0 3px;
}

.journey_main_menu {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    /* border-top: 1px solid #d7d7d7; */
    border-bottom: 1px solid #d7d7d7;
}

.journey_main_menu .main_menu_button {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 25%;
    height: 56px;
    cursor: pointer;
    position: relative;
    float: left;
    padding: 8px 0;
}

.journey_main_menu.notifications_tabs .main_menu_button {
    width: 50%;
    height: 48px;
}

.journey_main_menu .main_menu_button.current {
    border-bottom: 5px solid #550b40;
}

.journey_main_menu .main_menu_button .main_menu_icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    text-align: center;
    overflow: hidden;
    margin: 20px auto 0 auto;
    font-size: 14px;
    background: #233D74;
}

.journey_main_menu .main_menu-txt {
    width: 100%;
    text-align: center;
    font-size: 12px;
    /*font-weight: bold;*/
    color: #233D74;
    line-height: 14px;
}

.journey_main_menu .main_menu_button .main_menu_icon i {
    color: #fff;
}

.journey_main_menu .main_menu_button p {
    width: 100%;
    padding: 0 0 5px 0;
; margin: 0;
    font-size: 1em;
}

.journey_main_menu.notifications_tabs .main_menu_button p span {
    font-size: 16px;
}

.journey_main_menu .main_menu_button p span {
    font-size: 20px;
    font-weight: bold;
}

#div-mission ul:before {
    height: 0px;
}

/*#div-ranking .rank-co,*/
#div-points li {
    background: white;
}

.content_title {
    padding: 0;
    height: 23px;
    margin: 0;
    line-height: 23px;
    font-size: 16px;
    text-align: center;
    position: relative;
}

.contend_line {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 20px;
    z-index: 1111;
}

.content_title span {
    width: 100px;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 0px;
    z-index: 11111;
    color: white;
}

.item_content_list {
    border-bottom: 1px solid #d7d7d7;
    font-size: 16px;
    line-height: 22px;
}

.iterm_inner_list {
    border: 0 !important;
}

.special_title {
    height: 20px;
    overflow: hidden;
}

.iterm_inner_listti {
    max-height: 40px;
    overflow: hidden;
    line-height: 20px;
}

.iterm_inner_list p {
    width: 100%;
    height: 18px;
    line-height: 20px;
    font-size: 14px;
    color: #666;
    padding: 0;
    overflow: hidden;
    margin: 0;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.iterm_inner_list span {
    width: 100%;
    height: 40px;
    display: block;
    text-align: right;
    line-height: 20px;
    font-size: 12px;
    /*color:#333;*/
    padding: 0;
    overflow: hidden;
}

.rewardList .iterm_inner_list span {
    height: 20px;
}

.iterm_inner_list span i {
    font-style: normal;
}

.iterm_inner_list span i.proportion-i {
    font-style: normal;
    width: 100%;
    float: right;
}

.iterm_inner_list span.notifi-span {
    width: auto;
    height: 24px;
    display: block;
    text-align: center;
    color: #fff;
    float: right;
    line-height: 24px;
    font-size: 12px;
    padding: 0 5px;
    overflow: hidden;
    margin-left: 10px;
    cursor: pointer;
}

.iterm_inner_list p i {
    font-style: normal;
    float: right;
    line-height: 24px;
    color: #736464;
}

.iterm_inner_list p i.red {
    font-style: normal;
    float: right;
    color: #f00
}

.special_list ul {
    border-bottom: 0;
}

.panel_left {
    overflow: hidden;
}

.panel_left .list-block {
    margin: 0;
    overflow: auto;
    height: 100%;
}

/* name */
.panel_name {
    overflow: hidden;
    padding: 35px 10px 15px 15px;
}

.panel_img {
    width: 70px;
    height: 70px;
    float: left;
}

.panel_img img {
    border-radius: 35px;
}

.panel_co {
    width: 130px;
    float: right;
    height: 70px;
    margin: 0 5px;
    color: #fff;
    font-size: 14px;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.75);
}

.panel_co_name {
    width: 100%;
    margin: 10px auto 0 auto;
    font-weight: bold;
}

.panel_co_score {
    width: 100%;
}

.panel_co_mail {
    width: 100%;
    margin: 0 auto;
    font-size: 12px;
}

.panel-fro {
    width: 20px;
    float: right;
    overflow: hidden;
    height: 70px;
}

.panel-fro i {
    font-weight: normal;
    float: right;
    line-height: 70px;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.75);
}

/* nav_left  */
.nav_left ul {
    border: 0;
    margin-bottom: 40px;
}

.list-block ul:after {
    background-color: transparent;
}

/* title */
.fa_position {
    font-size: 19px;
    line-height: 30px;
    position: absolute;
    right: -4px;
    top: 7px;
}

.fa_position span {
    width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
    text-align: center;
    letter-spacing: -1px;
    border-radius: 10px;
    display: block;
    overflow: hidden;
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    color: #fff;
    background: #f00;
}

/*.navbar-inner a{ font-weight:bold!important;}*/
.font_index_center {
    font-size: 17px !important;
    color: #fff;
}

.navbar-inner a {
    min-width: 30px;
}

.panel {
    border-radius: 0;
}

/* login */
.login_form {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.login_form label, .login_form .login_form_label_div, #userPwdChangePage .set-change-pwd label {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #d7d7d7;
    height: 40px;
    display: block;
    position: relative;
}

.login_form .registrationformfields-placeholder-external {
    display: none;
    margin: 0;
}

.login_form .registrationformfields-placeholder-external.anchor-bottom {
    display: block;
    margin-top: -12px;
    margin-bottom: 12px
}

#userPwdChangePage .set-change-pwd label.label {
    height: 45px;
    line-height: 45px;
}

.login_form label span, .login_form .login_form_label_div span, #userPwdChangePage .set-change-pwd label span {
    width: 12%;
    display: block;
    float: left;
    background: #ddd;
    text-align: center;
    height: 38px;
    line-height: 38px;
}

.login_form label span i, .login_form .login_form_label_div span i, #userPwdChangePage .set-change-pwd label span i {
    font-size: 20px;
}

.login_form .login_form_label_div .lfld_div {
    width: calc(100% - 60px);
    display: inline-block;
}

.login_form .login_form_label_div .lfld_div .multi-input-date-selector {
    margin: 0;
    margin-right: -5px;
    margin-top: 4px;
}

.login_form .login_form_label_div .lfld_div .multi-input-date-selector select {
    flex-basis: calc(1/3 * 100% - 10px);
    margin: 0 5px;
}

.login_form label .label_input, #userPwdChangePage .set-change-pwd label .set-input-ol.set-pwd-o {
    width: 70%;
    display: block;
    float: left;
    border: none;
    border-radius: 0;
    height: 26px;
    margin: 6px 0;
    line-height: 26px;
    padding: 0;
    text-indent: 5px;
    font-size: 14px;
}

.login_form label a.search_password {
    width: 24px;
    height: 24px;
    position: absolute;
    display: block;
    right: 5px;
    top: 7px;
    border-radius: 12px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    z-index: 11111;
}

.login_form label.label {
    height: 45px;
    border: 0;
    background: none;
}

.login_form label.label .label_submit, #userPwdChangePage .set-change-pwd label.label .label_submit {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    border-radius: 0;
    border: 0;
    color: #fff;
}

.login_form label.profile2-submit-btn .label_submit {
    width: 70%;
    margin: 0 auto;
    overflow: hidden;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    display: inline-block;
    border-radius: 0;
    border: 0;
    color: #fff;
    float: left;
}

.login_form label.profile2-submit-btn .label_back_profile {
    width: 30%;
    background: #646464;
    display: inline-block;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    float: left;
    border-radius: 0;
    border: 0;
}

.label_captcha {
    overflow: hidden;
    position: relative;
}

.label_captcha img {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 11111;
}

/*.login_form label.label .label_submit.active-state{ box-shadow:2px 2px 5px #666 inset;}
html:not(.watch-active-state) .label_submit:active { box-shadow:2px 2px 5px #666 inset;} */
.login_form .sent-mobile {
    width: 99%;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #d7d7d7;
    height: 40px;
    display: block;
    position: relative;
}

.login_form .sent-mobile span {
    width: 12%;
    display: block;
    float: left;
    background: #ddd;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.login_form .sent-mobile span i {
    font-size: 20px;
}

.login_form .sent-mobile .label_input {
    width: 70%;
    display: block;
    float: left;
    border: none;
    border-radius: 0;
    height: 30px;
    margin: 5px 0;
    line-height: 30px;
    text-indent: 5px;
    font-size: 14px;
}

.other_login {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.other_login_title {
    width: 100%;
    border-bottom: 1px solid #d7d7d7;
    margin: 20px auto 10px auto;
    position: relative;
}

.other_login_title span {
    width: 80px;
    font-size: 14px;
    color: #666;
    position: absolute;
    left: 50%;
    top: -10px;
    background: #fff;
    text-align: center;
    margin-left: -40px;
}

.other_co {
    margin: 20px;
}

.other_co .col-33 {
    border: 0;
}

.other_co a {
    text-align: center;
}

.other_co a img {
    display: block;
    margin: 0 auto;
}

.other_login_block {
    margin: 0 0 10px 0;
}

.margin_bottom {
    margin-bottom: 0;
}

.page_login_bg {
    background: url(../img/footer-img.png) center bottom no-repeat;
    background-size: 100%;
}

/* Registration form fields interstitial */
#userRegistrationFormFields {
}

#userRegistrationFormFields .registrationformFields-container {
    width: 90%;
    margin: auto 5%;
}

#userRegistrationFormFields .registrationformFields-container .login_form_label_div .lfld_div {
    width: calc(100% - 90px);
}

#userRegistrationFormFields .registrationformFields-container .login_form_label_div .lfld_div .multi-input-date-selector {
    padding-left: 2px;
}

#userRegistrationFormFields .registrationformFields-container .registrationformfields-placeholder-external {
    display: none;
}

#userRegistrationFormFields .registrationformFields-container .registrationformfields-placeholder-external.anchor-top {
    display: block;
    margin: 0;
    margin-bottom: 5px;
}

/* End of Registration form fields interstitial */
/*  problem type  */
.problem_type {
    width: 100%;
    height: 40px;
    overflow: hidden;
    margin: 0 auto;
    background: #bebebe;
    font-size: 14px;
    color: #fff;
    line-height: 40px;
}

.problem_type span {
    width: 40px;
    display: block;
    text-align: center;
    font-size: 16px;
}

.problem_type span.pro_points {
    width: 44px;
    background: #F5A623;
    height: 40px;
    float: left;
    border-right: 1px solid #ccc;
}

.problem_type p {
    width: 72%;
    height: 40px;
    text-indent: 5px;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    overflow: hidden;
}

.problem_type p a {
    color: #fff;
}

.problem_co {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.no-lf-padding {
    padding: 0px 0px;
}

/*.collection{ width:39px; display:block; text-align:center; height:30px; float:right;}
.collection i{width: 39px; height: 30px; display: block; line-height: 30px;}
.collection2{ width:39px; display:block; text-align:center; height:24px; float:right; border-left:none;}
.collection2 i{width: 39px; height: 24px; display: block; line-height: 24px;}*/
.problem_title i {
    font-size: 20px;
    line-height: 30px;
}

.problem_co p {
    width: 100%;
    padding: 5px 0;
    margin: 0;
    line-height: 20px;
    color: #646464;
}

.problem_co img {
    width: 100%;
    display: block;
    float: left;
}

.problem_co img.pro_erweima {
    width: 160px;
}

.problem_co img.img_video {
    width: 100%;
}

.problem_bo_list {
    margin: 15px 15px 60px 15px;
}

.pro_img {
    width: 100%;
    display: block;
    position: relative;
}

.big_imgicon {
    width: 10%;
    position: absolute;
    right: 20%;
}

.big_imgicon img {
    width: 100%;
    display: block;
}

.problem_title {
    padding: 5px 15px;
    margin: 0 auto;
    overflow: hidden;
    background: #eee;
}

.problem_title h2 {
    width: 100%;
    float: left;
    line-height: 20px;
    font-size: 18px;
    display: block;
    margin: 0;
    padding: 3px 0;
    overflow: hidden;
    color: black;
    font-weight: bold;
}

.prolem-title-bo {
    width: 100%;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    font-size: 14px;
}

.prolem-title-bo span {
    display: inline-block;
    float: left;
    margin-left: 5px;
    color: #333;
}

.prolem-title-bo img {
    display: inline-block;
    float: left;
    width: 26px;
    height: 26px;
}

.prolem-title-bo span b {
    font-size: 16px;
}

input[type = text], textarea {
    -webkit-appearance: none;
    outline: none
}

textarea {
    resize: none
}

.problem_footer {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: absolute;
    height: 45px;
    left: 50%;
    bottom: 0;
    line-height: 45px;
    font-size: 18px;
    text-align: center;
    z-index: 11111;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
}

.problem_footer a {
    color: #fff;
}

.problem_next {
    width: 30%;
    display: block;
    height: 45px;
    float: left;
    overflow: hidden;
    color: #fff;
}

.problem_submit {
    width: 70%;
    color: #fff;
    font-size: 16px;
    height: 45px;
    display: block;
    float: right;
    display: block;
    border: 0;
    border-radius: 0;
    cursor: pointer
}

.problem_pre {
    width: 15%;
    display: block;
    height: 45px;
    float: left;
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-right: 1px solid #fff;
    background: #646464;
}

.problem_nex {
    width: 15%;
    display: block;
    height: 45px;
    float: left;
    overflow: hidden;
    color: #fff;
    background: #646464;
}

.problem_done {
    width: 70%;
    font-size: 16px;
    height: 45px;
    display: block;
    float: right;
    display: block;
    border: 0;
    border-radius: 0;
    background: url(../img/btn-sub-bg.png) repeat-x;
    background-size: auto 100%;
}

.problem_footer a.problem_done {
    color: #646464;
}

.problem_nx {
    width: 100%;
    display: block;
    height: 45px;
    float: left;
    overflow: hidden;
    color: #fff;
}

.page_logout {
    width: 100%;
    display: block;
    height: 45px;
    float: left;
    overflow: hidden;
    background: #646464;
    color: #fff;
}

.problem_bo_list ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
}

.problem_bo_list ul li {
    list-style: none;
    margin: 0 auto 10px auto;
    overflow: hidden;
    flex: 1 100%;
}

.problem_bo_list ul li span.radio_img {
    width: 15px;
    margin: 0 5px;
    height: 34px;
    display: block;
    background: url(../img/radio.png) center center no-repeat;
    background-size: 100%;
    float: left;
    overflow: hidden;
    text-indent: -9999px;
}

.problem_bo_list ul li span.value {
    width: calc(100% - 45px);
    width: -webkit-calc(100% - 45px);
    width: -moz-calc(100% - 45px);
    margin: 0 5px;
    display: block;
    float: left;
    overflow: hidden;
    line-height: 20px;
    padding: 7px 0;
    color: #646464;
}

.problem_bo_list ul li span.chock_img {
    width: 15px;
    margin: 0 5px;
    height: 34px;
    display: block;
    background: url(../img/chackbox.png) center center no-repeat;
    background-size: 100%;
    float: left;
    overflow: hidden;
    text-indent: -9999px;
}

.problem_bo_list ul li.half-width {
    width: 50%;
    float: left;
}

.problem_bo_list .missionChoice-image-container {
    min-height: 100px;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
    flex: 0 1 calc(50% - 20px);
    border: 0px !important;
}

.problem_bo_list .missionChoice-image {
    position: relative;
    width: 100%;
    height: 240px;
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    transition: background-size 2s ease-in;
    -moz-transition: background-size 2s ease-in;
    -ms-transition: background-size 2s ease-in;
    -o-transition: background-size 2s ease-in;
    -webkit-transition: background-size 2s ease-in;
}

.problem_bo_list .chock_active .missionChoice-image, .problem_bo_list .radio_active .missionChoice-image {
    filter: blur(3px);
}

.problem_bo_list .missionChoice-blur {
    position: absolute;
    top: -15px;
    bottom: -15px;
    left: -15px;
    right: -15px;
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(10px) brightness(0.3);
}

.problem_bo_list .missionChoice-option {
    position: relative;
    width: 100%;
    height: auto;
    display: inline-block;
    background: #f5deb300;
    /* top: 240px; */
    /* bottom: 0px; */
    /* left: 0px; */
    /* right: 0; */
    border-radius: 0 0 20px 20px;
    border-top: solid 1px #ffffff70;
    line-height: 10px;
}

.problem_bo_list .missionChoice-banner {
    position: absolute;
    height: 240px;
    width: 100%;
    top: 0px;
    background-color: #003c4e69;
    opacity: 0;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.21, 0, 0.7, 1.04);
}

.problem_bo_list .chock_active .missionChoice-banner, .problem_bo_list .radio_active .missionChoice-banner {
    opacity: 1;
}

.problem_bo_list .missionChoice-banner i {
    font-size: 100px;
    color: white;
    line-height: 240px;
}

.problem_bo_list .missionChoice-option span.radio_img, .problem_bo_list .missionChoice-option span.chock_img {
    margin-left: 20px;
}

.problem_bo_list .missionChoice-option span.value {
    display: inline-block;
    color: white;
    text-align: center;
    width: calc(100% - 40px);
    padding: 10px 20px 10px 20px;
    margin: 0;
}

@media screen and (max-width: 800px) {
    .problem_bo_list ul .missionChoice-image-container {
        margin: 5px;
        flex: 0 1 calc(100% - 10px);
    }

    .problem_bo_list .missionChoice-banner i {
        font-size: 50px;
        line-height: 200px;
    }

    .problem_bo_list .missionChoice-image {
        height: 200px;
    }

    .problem_bo_list .missionChoice-option.no-text {
        height: 0px;
        border: none;
        display: none;
    }

    .problem_bo_list .missionChoice-banner {
        bottom: 180px;
        height: 200px;
    }

    .problem_footer {
        position: fixed;
        bottom: 0;
    }

    #rewardDetailPage .problem_footer {
        position: absolute;
    }
}

.problem_bo_list ul li.radio_active span.radio_img {
    background: url(../img/radioHover.png) center center no-repeat;
    background-size: 100%;
}

.problem_bo_list ul li.radio_active span.value {
    color: #fff;
}

.problem_bo_list ul li.chock_active span.chock_img {
    background: url(../img/chackboxHover.png) center center no-repeat;
    background-size: 100%;
}

.problem_bo_list ul li.chock_active span.value {
    color: #fff;
}

.answer {
    width: 100%;
    margin: 0 auto 50px auto;
    overflow: hidden;
}

.answer_title {
    width: 100%;
    text-align: center;
    font-weight: bold;
    margin: 20px 0 20px 0;
    font-size: 16px;
}

.answer_title i {
    line-height: 25px;
}

.answer_title span.sp1 {
    display: inline-block;
}

/* .answer_title span.sp2{display: inline-block;line-height: 25px; font-size:20px;} */
.anser_co {
    margin: 0 15px;
    overflow: hidden;
}

.anser_co_data {
    width: 100%;
    margin: 10px auto 10px auto;
    overflow: hidden;
}

.anser_co_title {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    height: 28px;
}

.anser_co_title span {
    display: block;
    height: 18px;
    padding: 10px 5px 0 5px;
    line-height: 20px;
    font-size: 0.8em;
    color: #646464;
}

.anser_co_title i {
    color: #f4b806;
    font-size: 16px;
    float: left;
    display: block;
    margin: 10px 5px 0 0;
}

.anser_co_title i.icon-user {
    display: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.anser_co_co {
    width: 100%;
    height: 3px;
    overflow: hidden;
    margin: 0 auto;
    background: #bebebe;
    position: relative;
}

.anser_co_data .anser_co_layer {
    height: 3px;
    position: absolute;
    left: 0;
    top: 0;
    background: #606060;
}

.anser_co_active .anser_co_layer {
    height: 3px;
    position: absolute;
    left: 0;
    top: 0;
    background: #f4b806;
}

.anser_co_active .anser_co_title i.icon-user {
    display: block;
}

.anser_co_data p {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 20px;
    font-size: 1em;
    color: #646464;
}

.examine_span {
    position: relative;
    width: 106px;
    height: 82px;
    padding: 0 !important;
    margin-top: 9px;
    margin-bottom: 10px;
}

.examine_span span.sp1 {
    font-size: 14px;
    width: 106px;
    height: 82px;
    position: absolute;
    left: 0;
    top: 0px;
    background: url(../img/examine-img1.png) 15px 15px no-repeat rgba(0, 0, 0, 0.6);
    background-size: 70%;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.examine_span span.sp2 {
    font-size: 14px;
    width: 106px;
    height: 82px;
    position: absolute;
    left: 0;
    top: 0px;
    background: url(../img/examine-img2.png) 15px 15px no-repeat rgba(0, 0, 0, 0.6);
    background-size: 70%;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.examine_span span.sp3 {
    font-size: 14px;
    width: 106px;
    height: 82px;
    position: absolute;
    left: 0;
    top: 0px;
    background: url(../img/replen-img1.png) 15px 15px no-repeat rgba(0, 0, 0, 0.6);
    background-size: 70%;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.examine_span span.sp4 {
    font-size: 14px;
    width: 106px;
    height: 82px;
    position: absolute;
    left: 0;
    top: 0px;
    background: url(../img/examine-img4.png) 15px 15px no-repeat rgba(0, 0, 0, 0.6);
    background-size: 70%;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.examine_span span.sp5 {
    font-size: 14px;
    width: 106px;
    height: 82px;
    position: absolute;
    left: 0;
    top: 0px;
    background: url(../img/expired.png) 15px 15px no-repeat rgba(0, 0, 0, 0.6);
    background-size: 70%;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.examine_span span.span_myorder1 {
    width: 106px;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0px;
    background: url(../img/order-icon1.png) 0 15px no-repeat rgba(0, 0, 0, 0.6);
    background-size: 100%;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.examine_span span.span_myorder2 {
    width: 106px;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0px;
    background: url(../img/order-icon2.png) 0 15px no-repeat rgba(0, 0, 0, 0.6);
    background-size: 100%;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.examine_span span.span_myorder3 {
    width: 106px;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0px;
    background: url(../img/order-icon3.png) 0 15px no-repeat rgba(0, 0, 0, 0.6);
    background-size: 100%;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.campaignItem .item-media span.sp2 {
    font-size: 14px;
    width: 106px;
    height: 82px;
    position: absolute;
    left: 0;
    top: 0px;
    background: url(../img/examine-img2.png) 15px 15px no-repeat rgba(0, 0, 0, 0.6);
    background-size: 70%;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.campaignItem .item-media span.sp5 {
    font-size: 14px;
    width: 106px;
    height: 82px;
    position: absolute;
    left: 0;
    top: 0px;
    background: url(../img/expired.png) 15px 15px no-repeat rgba(0, 0, 0, 0.6);
    background-size: 70%;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.examine_span span.sp5 {
    display: inline-block;
    height: 16px;
    position: absolute;
    right: -1px;
    top: -1px;
    z-index: 1111;
    background: #fff;
    border: 1px solid #eee;
    line-height: 16px;
    padding: 0 5px;
    font-size: 14px;
}

/*  gift */
.gift {
    margin: 0 auto;
}

.gift ul {
    border: 0 !important;
}

.gift .item-media {
    position: relative;
}

.gift .item-media span {
    width: 100%;
    height: 18px;
    left: 0;
    bottom: 10px;
    color: #646464;
    display: block;
    text-align: center;
    background: #D8D8D8;
    display: block;
    position: absolute;
    font-size: 0.8em;
}

.gift .item-inner h2 {
    width: 90%;
    font-size: 0.9em;
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 24px;
    color: #646464;
}

/*.gift .item-inner h2 .collection{ position:absolute; right:0; top:0;}*/
.gift .item-inner .problem_title h2 {
    width: 76% !important;
    height: 30px;
    overflow: hidden;
    font-size: 0.9em;
    margin: 0;
}

.gift .item-inner p {
    margin: 0;
    padding: 0;
    height: 72px;
    overflow: hidden;
    line-height: 18px;
    font-size: 0.8em;
    color: #646464;
}

.gift .item-inner a {
    height: 20px;
    line-height: 20px;
    font-size: 0.8em;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.gift .item-inner span {
    font-size: 0.8em;
    color: #646464;
    line-height: 18px;
}

.item_gift_bo {
    min-height: 30px !important;
}

.gift_bo {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    text-align: left;
}

.gift_bo a {
    color: #000;
}

.gift_condition {
    width: 100%;
    margin: 0px auto 60px auto;
    overflow: hidden;
}

.gift_condition_title {
    width: 100%;
    margin: 0 auto;
    font-size: 1.1em;
    text-indent: 15px;
    background: #f7f7f7;
    line-height: 30px;
    font-weight: bold;
}

.gift_condition ul {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
}

.gift_condition ul li {
    padding: 8px 15px;
    line-height: 24px;
    font-size: 12px;
    list-style: none;
    border-bottom: 1px solid #f7f7f7;
    color: #646464;
    overflow: hidden;
}

.gift_condition ul li span {
    width: 25%;
    float: left;
    display: block;
    color: #646464;
}

.gift_condition ul li i.fa-pencil {
    width: 15%;
    float: left;
    line-height: 24px;
    font-size: 14px;
    display: block;
    color: #646464;
}

.gift_condition ul li span.sp1 {
    width: 82%;
    float: left;
    overflow: hidden;
}

.gift_condition ul li i.fa-caret-right {
    width: 15%;
    float: left;
    line-height: 24px;
    font-size: 24px;
    text-align: right;
}

.gift_suc {
    width: 100%;
    margin: 0;
}

.gift_suc_bo {
    width: 100%;
    margin: 0 auto;
    padding: 15px 0;
    margin-top: -25px;
}

.gift_suc_bo img {
    display: block;
    margin: 0 auto;
    width: 500px;
}

@media screen and (max-width: 800px) {
    .gift_suc_bo img {
        width: 100%;
    }
}

.gift_suc_bo p {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0px 0px 0px;
    text-align: center;
    font-size: 1.2em;
    color: #646464;
    font-weight: bold;
}

.gift_suc_bo p a {
    text-decoration: underline;
}

.gift_suc_bo span {
    width: 100%;
    display: block;
    text-align: center;
    line-height: 20px;
    font-size: 0.9em;
    color: #646464;
}

/* upload */
.problem_upload {
    padding: 15px 15px 15px 15px;
    margin: 0 auto 0 auto;
; overflow: hidden;
}

.problem_upload_co {
    width: 25%;
    float: left;
    height: 82px;
    position: relative;
    overflow: hidden;
}

.problem_upload_co i {
    font-size: 30px;
    color: #fff;
    width: 100%;
    text-align: center;
    display: block;
    line-height: 70px;
}

.problem_upload_co .input_upload {
    width: 100%;
    width: 100%;
    height: 70px;
    position: absolute;
    left: 0;
    top: 0;
    filter: alpha(opacity=0);
    opacity: 0;
}

.problem_bo_text {
    width: calc(75% - 3px);
    width: -webkit-calc(75% - 2px);
    float: left;
    border: 1px solid #bebebe;
}

.problem_bo_text_no {
    width: 100%;
}

.problem_bo_text .input_tetxarea {
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0px !important;
    height: 80px;
    float: left;
    display: block;
    float: right;
    font-size: 14px;
    color: #000;
    padding: 10px;
    box-sizing: border-box;
}

.problem_bo_text_no .input_tetxarea {
    margin: 0;
    width: 100%;
    border: none;
    padding: 10px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px !important;
    height: 80px;
    float: left;
    display: block;
    float: right;
    font-size: 14px;
    color: #000;
}

.color_white {
    background: #fff;
}

.item_inner_bottom {
    border-bottom: 0 !important;
    position: relative;
    background: none !important;
}

.pro_video {
    width: 100%;
    height: 100%;
    background: #666;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
}

.pro_video_co {
    width: 100%;
    margin-top: 120px;
}

.pro_video_close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999999999;
}

.pro_video_close i {
    font-size: 24px;
    color: #fff;
    text-align: center;
}

.pop_share_lay {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0);
    display: none;
}

.pop_share {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    bottom: -250px;
    left: 0;
    z-index: 9999999;
    background: #999;
}

.pop_share p {
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    padding: 10px 0 10px 0;
    margin: 0 auto;
    display: block;
    color: #fff;
}

.pop_share .pop_sharerow {
    width: 100%;
    display: flex;
}

.pop_share a {
    margin: 0 0 20px 0;
    float: left;
    display: block;
    cursor: pointer
}

.pop_share a:first-child:nth-last-child(1) {
    width: 100%
}

.pop_share a:first-child:nth-last-child(2), .pop_share a:first-child:nth-last-child(2) ~ a {
    width: 50%
}

.pop_share a:first-child:nth-last-child(3), .pop_share a:first-child:nth-last-child(3) ~ a {
    width: 33.33333%
}

.pop_share a:first-child:nth-last-child(4), .pop_share a:first-child:nth-last-child(4) ~ a {
    width: 25%
}

.pop_share a img {
    display: block;
    margin: 0 auto;
}

.share_close {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    line-height: 45px;
    background: #666;
    text-align: center;
    font-size: 18px;
    color: #fff;
    cursor: pointer
}

.pop_share_lay2 {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.8);
    display: none;
}

.bt_share_lay1 {
    width: 30%;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999993;
    margin: 0 auto;
    display: block;
}

.bt_share_lay2 {
    width: 80%;
    position: absolute;
    left: 10%;
    top: 70px;
    z-index: 999992;
    margin: 0 auto;
    display: block;
}

.page_center {
    margin: 0 auto;
}

.page_cenname {
    width: 100%;
    background: url(../img/img-bg.jpg) center center repeat;
    padding: 10px 0;
    position: relative;
}

.page_cenname img {
    display: block;
    margin: 0 auto;
    border-radius: 50px;
}

.page_cenname_co {
    width: 100%;
    padding: 5px 0;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.75);
}

.page_cenname_co h2 {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 20px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.page_cenname_co p {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    color: #fff;
}

.page_cenname_co p i {
    border-radius: 10px;
    font-size: 12px;
}

.page_center ul {
    border: 0;
}

.page_center ul li {
    border-bottom: 1px solid #bebebe;
}

.page_center ul li a i {
    display: block;
    float: left;
    padding: 4px 0 0 0;
    width: 20px;
    margin: 0 10px 0 0;
}

.page_center ul li a p {
    width: 200px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    float: left;
    display: block;
}

.item_inner_bottom span {
    width: 15px;
    height: 15px;
    display: block;
    float: right;
    border-radius: 7px;
    line-height: 15px;
    text-align: center;
    color: #fff;
    margin: 0;
    font-size: 0.8em;
    position: absolute;
    right: 40px;
    top: 15px;
}

.set_icon_new {
    width: 20px;
    height: 20px;
    display: block;
    float: right;
    border-radius: 7px;
    line-height: 15px;
    text-align: center;
    color: #fff;
    margin: 0;
    font-size: 0.8em;
    position: absolute;
    right: 40px;
    top: 12px;
}

.page_set {
    margin: 20px 0 0 0;
    border-top: 1px solid #bebebe;
}

a.page_logout:hover {
    color: #fff;
}

.special_list {
    margin: 20px 0 20px 0;
}

.integral {
    width: 100%;
    margin: 0px auto;
    overflow: hidden;
}

.integral_ti {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.integral_ti p {
    width: 100%;
    margin: 0 auto;
    line-height: 26px;
    text-align: center;
    color: #606060;
}

.integral_to {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    height: 40px;
}

.integral_to a {
    width: 25%;
    float: left;
    display: block;
    line-height: 40px;
    text-align: left;
    font-size: 14px;
}

.integral_to a:nth-child(1) {
    text-align: right;
}

.integral_to a i {
    width: 10px;
}

.integral_to span {
    width: 50%;
    float: left;
    display: block;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    color: #646464;
}

.integral_co {
    width: 100%;
    margin: 0 auto;
    background: #f7f7f7;
    height: 30px;
    font-size: 14px;
    color: #646464;
    font-weight: bold;
    line-height: 30px;
}

.integral_co .col-25 {
    border: 0;
    text-align: center;
}

.integral_co .col-50 {
    border: 0;
    text-align: center;
}

.integral_bo {
    width: 100%;
    margin: 0 auto;
    font-size: 12px;
    color: #646464;
}

.integral_table {
    width: 100%;
    margin: 0 auto;
    border: 0;
}

.integral_table tr {
    width: 100%;
    display: inline-table;
    border-bottom: 1px solid #bebebe;
}

.integral_table tr td {
    font-size: 12px;
}

.integral_table tr td:nth-child(1) {
    width: 25%;
    text-align: center;
}

.integral_table tr td:nth-child(2) {
    width: 50%;
}

.integral_table tr td:nth-child(3) {
    width: 25%;
    text-align: right;
    color: #4a90e2;
}

.integral_table tr td:nth-child(3) span {
    padding: 0 10px 0 0;
}

.page_seted {
    margin: 0 auto 20px auto;
}

.page_setmy {
    width: 100%;
    padding: 10px 0;
    position: relative;
    background-position: center center;
    background-size: 100%;
    background-repeat: repeat;
}

.page_setmy img {
    display: block;
    margin: 0 auto;
    border-radius: 50px;
}

.page_setmy_co {
    width: 100%;
    padding: 5px 0;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.75);
}

.page_setmy_co h2 {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 20px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.page_setmy_co p {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    color: #fff;
}

.page_setmy_co p i {
    border-radius: 10px;
    font-size: 12px;
}

.page_setskin {
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 20px;
    right: 10px;
    z-index: 1111;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 15px;
    cursor: pointer;
}

.page_setskin i {
    width: 30px;
    font-size: 16px;
    color: #666;
    text-align: center;
    line-height: 30px;
}

.page_setmy_infor {
    padding: 0 15px;
    overflow: hidden;
    border-bottom: 1px solid #bebebe;
}

.page_setmy_infor a {
    width: 100%;
    display: block;
    margin: 0 auto;
    color: #646464;
    line-height: 40px;
}

.page_setmy_infor a span {
    width: 30%;
    font-size: 14px;
    float: left;
}

.page_setmy_infor a p {
    width: 60%;
    float: left;
    padding: 0;
    margin: 0;
    height: 40px;
    overflow: hidden;
}

.page_setmy_infor a span.sp1 {
    width: 10%;
    display: block;
    height: 40px;
    float: left;
    text-align: right;
    line-height: 40px;
    background-size: 10px 20px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    text-indent: 99999px;
}

/*profile2*/
.page_setmy_list {
    width: 100%;
    overflow: hidden;
}

.page_setmy_li {
    width: 100%;
    padding: 5px 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    margin: 0;
    color: #646464;
    overflow: hidden;
    line-height: 40px;
    border-bottom: 1px solid #bebebe;
}

.setmy_li_title {
    width: 25%;
    font-size: 12px;
    display: inline-block;
    line-height: initial;
    margin: 0;
    vertical-align: middle;
}

.setmy_li_content {
    width: 75%;
    float: right;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}

.setmy_li_co {
    width: 100%;
    display: block;
    overflow: hidden;
}

.setmy_li_co2 {
    display: none;
}

.setmy_li_co p {
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    float: left;
    padding: 10px 0;
    margin: 0;
    line-height: 20px;
    overflow: hidden;
    position: relative;
}

.setmy_li_co p span {
    display: block;
    float: left;
    height: 20px;
    line-height: 20px;
    width: 100%;
    overflow: hidden;
}

.setmy_li_co p span.email {
    width: 88%;
}

.setmy_li_co p i {
    position: absolute;
    right: 0;
    top: 12px;
    color: #7ED321;
}

.setmy_li_edit {
    width: 40px;
    float: right;
    text-align: right;
    cursor: pointer;
}

/*
.page_setmy_li .fb_connect_div {
    border: 3px #4267b2 solid;
    width: 150px;
    height: 30px;
    float: left;
    margin: 5px;
}

.page_setmy_li .fb_connect_icon {
    float: left;
}

.page_setmy_li .fb_connect_text {
    height: 30px;
    width: 120px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #4267b2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_setmy_li .fb_disconnect_div {
    border: 3px #999 solid;
    width: 150px;
    height: 30px;
    float: left;
    margin: 5px;
}

.page_setmy_li .fb_disconnect_icon {
    float: left;
}

.page_setmy_li .fb_disconnect_text {
    height: 30px;
    width: 120px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_setmy_li .li_connect_div {
    border: 3px #0077b5 solid;
    width: 150px;
    height: 30px;
    float: left;
    margin: 5px;
}

.page_setmy_li .li_connect_icon {
    float: left;
}

.page_setmy_li .li_connect_text {
    height: 30px;
    width: 120px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #0077b5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_setmy_li .li_disconnect_div {
    border: 3px #999 solid;
    width: 150px;
    height: 30px;
    float: left;
    margin: 5px;
}

.page_setmy_li .li_disconnect_icon {
    float: left;
}

.page_setmy_li .li_disconnect_text {
    height: 30px;
    width: 120px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_setmy_li .ig_connect_div {
    border: 3px #0077b5 solid;
    width: 150px;
    height: 30px;
    float: left;
    margin: 5px;
}

.page_setmy_li .ig_connect_icon {
    float: left;
}

.page_setmy_li .ig_connect_text {
    height: 30px;
    width: 120px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #0077b5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_setmy_li .ig_disconnect_div {
    border: 3px #999 solid;
    width: 150px;
    height: 30px;
    float: left;
    margin: 5px;
}

.page_setmy_li .ig_disconnect_icon {
    float: left;
}

.page_setmy_li .ig_disconnect_text {
    height: 30px;
    width: 120px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
}
*/
.setmy_input_list {
    width: 100%;
    overflow: hidden;
    margin: 5px 0;
    position: relative;
}

.setmy_input_conment {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    float: left;
    border: 1px solid #bebebe;
    padding: 0;
    margin: 0;
    font-size: 16px;
    color: #646464;
    text-indent: 5px;
    font-weight: normal;
}

input[type=password].setmy_input_conment {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    float: left;
    border: 1px solid #bebebe;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #646464;
    text-indent: 5px;
    font-weight: normal;
    width: 100%;
    margin: 5px 0;
}

.setmy_input_style1 {
    width: 100%;
}

.setmy_input_style2 {
    width: calc(50% - 7px);
    width: -webkit-calc(50% - 7px);
    width: -moz-calc(50% - 7px);
}

.setmy_input_style2:nth-child(1) {
    float: right;
}

.setmy_input_style3 {
    width: 100%;
    margin: 5px 0;
}

.setmy_li_co .setmy_input_list .stateClass {
    margin-top: 5px;
    border-radius: 0;
    border: 1px solid #d7d7d7;
    color: black;
    padding-left: 5px;
}

.cityClass.setmy_input_conment.setmy_input_style3 {
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 0;
    border: 1px solid #d7d7d7;
    color: black;
    padding-left: 5px;
    font-size: 14px;
}

.page_setmy_li .setmy_li_co .setmy_input_list .countryClass, .page_setmy_li .setmy_li_co .setmy_input_list .stateClass, .page_setmy_li .cityClass.setmy_input_conment.setmy_input_style3 {
    color: #656565;
    padding-left: 10px;
    border: 1px solid #bebebe;
    margin-bottom: 10px;
}

.page_setmy_li .cityClass.setmy_input_conment.setmy_input_style3 {
    margin-bottom: 5px;
    height: 30px;
}

.setmy_input_gender label {
    width: 150px;
    float: left;
    line-height: 30px;
}

.setmy_input_gender label input {
    width: 20px;
    margin-right: 5px;
}

.setmy_emil_footer {
    width: 100%;
    overflow: hidden;
    padding: 8px 0 0 0;
}

.setmy_emil_footer img {
    width: 16px;
    float: left;
}

.setmy_emil_footer span {
    width: calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    display: block;
    font-size: 12px;
    line-height: 16px;
    height: auto;
    float: right;
}

.setmy-birthday {
    width: 100%;
    display: block;
    color: #646464;
    font-weight: bold;
    font-size: 14px;
    overflow: hidden;
    margin: 0px auto;
}

.setmy-birthday select {
    width: 31%;
    background-color: #fff;
    margin-right: 2%;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    border: 1px solid #bebebe;
    font-size: 14px;
    color: #999;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    float: left;
    background: url("../img/arrowicon.png") no-repeat scroll right center transparent;
}

.setmy-birthday select:last-child {
    margin-right: 0;
}

.setmy_input_btn {
    width: 100%;
    overflow: hidden;
    padding: 5px 0 10px 0;
}

.setmy_input_save {
    display: block;
    /*width: 55px;*/
    float: right;
    line-height: 30px;
    background: #2DCBF7;
    box-shadow: 0 0 1px #333;
    color: #fff;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    padding: 0 10px;
}

.setmy_input_save2 {
    display: block;
    width: 55px;
    float: right;
    line-height: 30px;
    background: #2DCBF7;
    box-shadow: 0 0 1px #333;
    color: #fff;
    font-size: 14px;
    text-align: center;
    display: none;
    cursor: pointer;
}

.setmy_input_save2 i {
    animation: moveWindmill 2s linear infinite;
    -webkit-animation: moveWindmill 2s linear infinite;
    -ms-animation: moveWindmill 2s linear infinite;
    -moz-animation: moveWindmill 2s linear infinite;
}

@keyframes moveWindmill /* Firefox */
{
    0% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(180deg)
    }

    75% {
        transform: rotate(270deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-ms-keyframes moveWindmill /* Firefox */
{
    0% {
        -ms-transform: rotate(0deg)
    }

    25% {
        -ms-transform: rotate(90deg)
    }

    50% {
        -ms-transform: rotate(180deg)
    }

    75% {
        -ms-transform: rotate(270deg)
    }

    100% {
        -ms-transform: rotate(360deg)
    }
}

@-webkit-keyframes moveWindmill /* Firefox */
{
    0% {
        -webkit-transform: rotate(0deg)
    }

    25% {
        -webkit-transform: rotate(90deg)
    }

    50% {
        -webkit-transform: rotate(180deg)
    }

    75% {
        -webkit-transform: rotate(270deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes moveWindmill /* Firefox */
{
    0% {
        -moz-transform: rotate(0deg)
    }

    25% {
        -moz-transform: rotate(90deg)
    }

    50% {
        -moz-transform: rotate(180deg)
    }

    75% {
        -moz-transform: rotate(270deg)
    }

    100% {
        -moz-transform: rotate(360deg)
    }
}

.setmy_input_close {
    width: 40px;
    display: block;
    float: right;
    text-align: center;
    background: #9B9B9B;
    line-height: 30px;
    color: #fff;
    margin-right: 10px;
    cursor: pointer;
}

.pop-big-img {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 111111111;
    display: none;
}

.pop_img_close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999999999;
}

.pop_img_close i {
    font-size: 24px;
    color: #fff;
    text-align: center;
}

.pop-big-img img {
    /*position: absolute; left: 50%;top:50%;*/
    display: block;
}

.enter_activity {
    padding: 0 15px;
    margin: 0 auto;
    overflow: hidden;
}

.enter_activity h2 {
    width: 100%;
    text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 30px;
    margin: 30px 0 10px 0;
}

.enter_activity h3 {
    width: 100%;
    text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 30px;
    margin: 0px 0 20px 0;
}

.enter_activity p {
    width: 100%;
    color: #606060;
    text-align: center;
    font-size: 12px;
    padding: 0;
    line-height: 20px;
    margin: 10px 0 20px 0;
}

.enter_activity a {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 20px;
    display: block;
    border-radius: 0;
    border: 0;
    color: #fff;
}

.enter_activity a.active-state {
    box-shadow: 2px 2px 5px #666 inset;
}

html:not(.watch-active-state) .enter_activity a:active {
    box-shadow: 2px 2px 5px #666 inset;
}

.notice_img img {
    border-radius: 40px;
}

.verifi-p {
    width: 100%;
    font-size: 12px;
    line-height: 20px;
    overflow: hidden;
; margin: 0 auto;
    color: #666;
    padding: 0 0 10px 0;
}

.send-verifi {
    -webkit-appearance: none;
    position: absolute;
    margin: 8px 0;
    right: 10px;
    top: 0px;
    border: 2px solid #9BC23B;
    color: #9BC23B;
    font-size: 0.8em;
    text-align: center;
    padding: 0 7px;
    height: 25px;
    background-color: transparent;
    border-radius: 5px;
}

.send-verifi.disable {
    min-width: 40px;
    border: 1px solid red;
    color: red;
    background-color: transparent;
}

.other-verifi-bo {
    padding: 5px 15px 20px 15px;
    margin: 0 auto;
    line-height: 20px;
    font-size: 0.9em;
    overflow: hidden;
; }

.other-verifi-bo-p {
    width: 100%;
    overflow: hidden;
    padding-top: 10px;
    color: #666;
}

.other-verifi-bo span {
    width: 20px;
    border-radius: 10px;
    text-align: center;
; line-height: 20px;
    height: 20px;
    color: #fff;
    background: #666;
    display: block;
    float: left;
}

.other-verifi-bo p {
    width: 90%;
    float: right;
    display: block;
    line-height: 20px;
    color: #666;
    padding: 0;
    margin: 0;
}

.set-input-change {
    padding: 10px 15px 0 15px;
    margin: 0 auto;
    overflow: hidden;
}

.set-input-change label {
    width: 100%;
    height: 40px;
    display: block;
    color: #646464;
    font-weight: bold;
    font-size: 14px;
    overflow: hidden;
    margin: 20px auto;
}

.set-input-change label span {
    width: 12%;
    float: left;
    height: 38px;
    line-height: 38px;
}

.set-input-change label .set-input-o {
    width: 79%;
    height: 35px;
    line-height: 35px;
    float: right;
    border: 1px solid #bebebe;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #646464;
    text-indent: 5px;
}

.set-input-change label .set-input-ol {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 35px;
    line-height: 35px;
    float: right;
    border: 1px solid #bebebe;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #646464;
    text-indent: 5px;
    font-weight: normal;
}

.set-input-change label .label_submit {
    width: 70%;
    margin: 0 auto;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    display: block;
    border-radius: 0;
    border: 0;
    color: #fff;
    font-weight: normal;
    float: left;
}

.set-input-change label .label_back_profile {
    width: 30%;
    background: #646464;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    float: left;
    border-radius: 0;
    border: 0;
    font-weight: normal
}

.set-input-change label .label_submit.active-state {
    box-shadow: 2px 2px 5px #666 inset;
}

html:not(.watch-active-state) .label_submit:active {
    box-shadow: 2px 2px 5px #666 inset;
}

.set-input-change label select {
    width: 79%;
    display: block;
    border-radius: 0;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    border: 1px solid #bebebe;
}

.set-input-change label .set-input-dress {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 35px;
    float: right;
    border: 1px solid #bebebe;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #646464;
    text-indent: 5px;
}

.set-input-change-dress {
    padding: 10px 15px 0 15px;
    margin: 0 auto;
    overflow: hidden;
}

.set-input-change-dress label {
    width: 100%;
    display: block;
    color: #646464;
    font-weight: normal;
    font-size: 12px;
    overflow: hidden;
    margin: 20px auto;
}

.set-input-change-dress label span {
    width: 100%;
    float: left;
    height: 37px;
    line-height: 37px;
}

.set-input-change-dress label select {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    border-radius: 0;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    border: 1px solid #bebebe;
    font-weight: normal;
}

.set-input-change-dress label .set-input-dress {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 35px;
    float: right;
    border: 1px solid #bebebe;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #646464;
    text-indent: 5px;
    font-weight: normal;
}

.set-input-change-dress label .label_submit {
    width: 70%;
    float: left;
    margin: 0 auto;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    display: block;
    border-radius: 0;
    border: 0;
    color: #fff;
    font-weight: normal;
}

.set-input-change-dress label .label_back_profile {
    width: 30%;
    background: #646464;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    float: left;
    border-radius: 0;
    border: 0;
}

.notification-p {
    width: 100%;
    text-align: center;
    margin: 30px 0 0 0;
    font-size: 16px;
    color: #666;
    line-height: 30px;
    color: #999;
}

.send-verifi-active {
    color: #999;
}

.notification-p a {
    font-size: 1.1em;
    color: #646464;
}

.notification-p a.notifi-back {
    width: 90%;
    border-radius: 5px;
    display: block;
    margin: 0px auto;
    line-height: 40px;
    text-align: center;
    color: #fff;
}

.viewedNotificationDiv ul::before {
    background-color: transparent;
}

.set-input-change .set-birthday {
    width: 100%;
    height: 40px;
    display: block;
    color: #646464;
    font-weight: bold;
    font-size: 14px;
    overflow: hidden;
    margin: 20px auto;
}

.set-input-change .set-birthday select {
    width: 31%;
    background-color: #fff;
    margin-right: 2%;
    overflow: hidden;
    height: 35px;
    line-height: 35px;
    border: 1px solid #bebebe;
    font-size: 14px;
    color: #646464;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.set-input-change .set-birthday select:last-child {
    margin-right: 0;
}

.change-sex {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: block;
}

.change-sex li {
    width: 50%;
    display: block;
    height: 35px;
    float: left;
}

.order-list-ti img {
    height: 60px;
    float: left;
    margin: 0 10px 0 0;
    border: 1px solid #eee;
    box-shadow: 0 1px 1px rgba(100, 100, 100, 0.4);
    -webkit-box-shadow: 0 1px 1px rgba(100, 100, 100, 0.4);
    -moz-box-shadow: 0 1px 1px rgba(100, 100, 100, 0.4);
}

.order-ti-t {
    display: block;
    float: left;
    width: -moz-calc(100% - 72px);
    width: -webkit-calc(100% - 72px);
    width: calc(100% - 150px);
}

.change-sex li a {
    color: #fff;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    background: #999;
    display: block;
    margin: 0 auto;
    width: 60%;
    text-align: center;
}

.change-sex li.active a {
    background: #f1592a;
}

.navbar {
    left: 0;
    top: 0;
    border-bottom: none;
}

.swiper-pagination-bullet {
    opacity: 0.6;
    background: #000;
    box-shadow: 0px 0px 1px #000;
}

.swiper-pagination {
    text-align: right;
    right: 10px;
}

.list-block .item-inner:after {
    background: none !important;
}

.box-radio {
    display: none;
}

.box-chock {
    display: none;
}

.box-upload {
    display: none;
}

.box-qrcode {
    display: none;
}

.box-share {
    display: none;
}

.box-video {
    display: none;
}

.box-voice {
    display: none;
}

.box-show {
    display: block;
}

.page_usercenter {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 10px 0;
    background-color: #fff;
    border-bottom: 8px solid #e5e3e2;
    border-top: 8px solid #e5e3e2;
}

.page_usercenter span {
    width: 10%;
    display: block;
    height: 82px;
    text-indent: -9999999px;
    float: right;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E");
    background-size: 10px 20px;
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
}

.page_usercenter img {
    display: block;
    border-radius: 40px;
    float: left;
    margin: 0 20px 0 20px;
    border: 1px solid #999;
}

.page_usercenter_co {
    width: 160px;
    padding: 15px 0;
    text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.75);
    float: left;
}

.page_usercenter_co h2 {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 20px;
    color: #666;
    font-weight: bold;
    font-size: 20px;
}

.page_usercenter_co p {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 30px;
    font-size: 14px;
    color: #666;
}

.page_usercenter_co p i {
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
}

.page-preview {
    padding: 15px;
    overflow: hidden;
}

.preview-co {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.preview-to {
    padding: 35px 0 20px 10px;
    margin: 0px 0 0 35px;
    position: relative;
}

.preview-title {
    width: 70px;
    height: 70px;
    background: #bebebe;
    border-radius: 35px;
    line-height: 70px;
    color: #fff;
    text-align: center;
    position: absolute;
    left: -35px;
    top: 0px;
}

.preview-title b {
    font-size: 20px;
    padding: 15px 5px 0 5px;
}

.preview-txt {
    width: 100%;
    margin: 38px auto 0 auto;
    background: #f7f7f7;
    border-radius: 5px;
}

.preview-txtco {
    padding: 10px 10px;
    overflow: hidden;
    border-bottom: 1px solid #bebebe;
}

.preview-txtco img {
    width: 58px;
    height: 58px;
    float: left;
    display: block;
    border: 1px solid #bebebe;
    margin-right: 10px;
}

.preview-txtfr {
    width: 60%;
    float: left;
}

.preview-txtfr h3 {
    width: 100%;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    color: #666;
    padding: 0;
    margin: 0;
    font-weight: normal;
}

.preview-txtfr h3 span {
    height: 25px;
    display: inline-block;
    background-color: #999;
    border-radius: 3px;
    color: #fff;
    padding: 0 5px;
    overflow: hidden;
    float: left;
}

.preview-txtfr p {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0;
    margin: 0;
    font-weight: bold;
    font-size: 16px;
    overflow: hidden;
}

.preview-txt > div:last-child {
    border-bottom: none;
}

.preview-icon i {
    font-size: 16px;
}

.preview-person {
    width: 100px;
    height: 30px;
    position: absolute;
    left: 35px;
    top: 20px;
    line-height: 30px;
}

.preview-person i {
    font-size: 16px;
    padding: 0 10px;
}

@media screen and (min-width: 300px) and (max-width: 720px) {
    .order-list-ti {
        padding: 0px;
    }

    .order-list-ti img {
        width: 100%;
        height: auto !important;
        margin: 0px !important;
        border: 0px !important;
        box-shadow: none !important;
    }

    .order-ti-t {
        width: calc(100% - 20px);
        padding: 10px;
    }

    .order-list-ti .redemption-time {
        width: calc(100% - 20px);
        padding: 10px;
    }
}

/*.page-content{ padding-bottom: 70px;}*/
.uploadresult {
    margin: 0;
    padding: 20px 15px 20px 15px;
    position: relative;
    overflow: hidden;
    display: none;
}

/*a{text-decoration: none!important;}*/
.journey_mission {
    padding: 12px 15px;
    overflow: hidden;
    border-bottom: 12px solid #f7f7f7;
    border-top: 12px solid #f7f7f7;
}

.journey_mission_co {
    width: 100%;
    overflow: hidden;
}

.journey_mission_fl {
    width: 120px;
    float: left;
    overflow: hidden;
    line-height: 40px;
    font-size: 18px;
}

.journey_mission_fl i {
    padding: 0 5px 0 0;
}

.journey_mission_fr {
    width: 100px;
    padding-right: 15px;
    float: right;
    overflow: hidden;
    line-height: 40px;
    font-size: 12px;
    text-align: right;
}

.journey_mission_fr {
    display: block;
    text-indent: -9999999px;
    float: right;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E");
    background-size: 10px 20px;
    background-repeat: no-repeat;
    background-position: 100% center;
}

.journey_mission_fr i {
    padding: 0 0 0 5px;
    line-height: 40px;
}

.journey_mission_fr b {
    font-size: 18px;
    font-weight: normal;
}

.special_task {
    padding: 5px 18px;
    overflow: hidden;
}

.special_task_title {
    width: 100%;
    overflow: hidden;
    font-weight: bold;
}

.special_title_fl {
    float: left;
    overflow: hidden;
    line-height: 40px;
    font-size: 16px;
}

.special_title_fl i {
    padding: 0 5px 0 0;
}

.special_title_fr {
    width: 100px;
    float: right;
    overflow: hidden;
    line-height: 40px;
    font-size: 12px;
    text-align: right;
    padding-right: 5px;
}

.special_title_fr i {
    padding: 0 0 0 5px;
    line-height: 30px;
}

.special_title_fr b {
    font-size: 16px;
}

.marginbottom {
    margin: 0 0 60px 0;
}

.footer-mi {
    width: 100%;
    height: 60px;
    overflow: hidden;
    background: #f7f7f7;
    margin: 0 auto;
    position: relative;
    left: 0;
    bottom: 60px;
    z-index: 1111;
}

.footer-mi a {
    width: 33.33333%;
    padding: 10px 0;
    height: 40px;
    background: #f7f7f7;
    display: block;
    float: left;
}

.footer-mi-co {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    height: 40px;
    cursor: pointer;
    position: relative;
    float: left;
    border-left: 1px solid #d7d7d7;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.footer-mi-co .main_menu_icon {
    width: 100%;
    text-align: center;
    overflow: hidden;
    padding: 0;
    font-size: 14px;
}

.footer-mi-co .main_menu_icon i {
    padding: 0 5px 0 0;
}

.footer-mi-co p {
    width: 100%;
    padding: 0 0 5px 0;
; margin: 0;
    font-size: 1em;
}

.footer-mi-co p span {
    font-size: 16px;
    line-height: 20px;
}

.page-rank {
    padding: 10px 15px;
    color: #646464;
    border-top: 10px solid #eee;
    border-bottom: 10px solid #eee;
}

.page-rank-to {
    width: 100%;
    overflow: hidden;
    height: auto;
}

.rank-to-fl {
    width: 70%;
    float: left;
    overflow: hidden;
    padding: 10px 0;
}

.rank-to-fl h2 {
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.rank-to-fl p {
    width: 100%;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.rank-to-fr {
    width: 30%;
    float: right;
    border-left: 1px solid #bebebe;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 60px;
    font-size: 16px;
    line-height: 60px;
    text-indent: 10px;
}

.rank-to-fr i {
    line-height: 60px;
}

.rank-to-share {
    width: 100%;
    height: 45px;
    color: #fff;
    line-height: 45px;
    border: 0;
    margin: 0;
    text-align: center;
    font-size: 20px;
}

.page-rank-co {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.rank-co {
    width: 100%;
    border-bottom: 1px solid #d7d7d7;
    height: 70px;
    overflow: hidden;
}

.rank-co1 {
    width: 50px;
    float: left;
    line-height: 70px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-indent: 5px;
}

.rank-co2 {
    line-height: 70px;
    margin-top: 15px;
    width: 42px;
    float: left;
    overflow: hidden;
    height: 40px;
    padding: 5px 0;
}

.rank-co2 img {
    border-radius: 30px;
    margin-top: 10px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border: 1px solid #666;
    display: block;
    margin: 0 auto;
}

.rank-co3 {
    line-height: 70px;
    margin-top: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 10px;
    float: left;
    overflow: hidden;
    height: 60px;
    padding: 15px 0;
    line-height: 20px;
    font-size: 16px;
}

.rank-co3-2 {
    font-size: 12px;
}

.rank-co3-sp1 {
    width: 100%;
    float: left;
}

.rank-co3-sp2 {
    width: 100%;
    float: left;
    line-height: 20px;
    font-size: 12px
}

.rank-co-my .rank-co3-sp2 {
    color: white !important;
}

.rank-co3-sp2 i {
    float: left;
    text-align: left;
    line-height: 20px;
    color: #F6B73F;
}

.rank-co4 {
    /* width: 80px;  */
    float: right;
    overflow: hidden;
    height: 50px;
    padding: 23px 0;
    /*line-height: 25px; text-align: right;*/
    padding-right: 10px;
    text-align: center;
    font-size: 12px;
}

.rank-co4 span {
    font-size: 18px;
}

.rank-co4 b {
    font-size: 18px;
}

.index-nav-icon {
    width: 44px;
    height: 36px;
    margin-top: 6px;
    float: left;
    overflow: hidden;
    position: relative;
    color: #fff;
}

.index-nav-icon span {
    width: 10px;
    text-align: center;
    line-height: 6px;
    display: block;
    position: absolute;
    right: -2px;
    top: 3px;
}

.index-nav-icon img {
    width: 34px;
    height: 34px;
    border: 1px solid #fff;
    border-radius: 17px;
    display: block;
    float: left;
}

.index-icon-letter2 {
    width: 34px;
    display: block;
    float: left;
    height: 34px;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    background: #F3F7F7;
    color: rgba(0, 78, 149, 0.6) !important;
    border-radius: 18px;
    font-weight: bolder;
    float: left;
}

.margintop0 {
    margin-top: 0 !important;
}

.journey-more1 {
    text-align: right;
}

.journey-more2 {
    text-align: right;
}

.pro-bottom {
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 1111111;
    overflow: hidden;
    padding-left: 30px;
}

.pro-bottom img {
    width: 90px;
    height: 30px;
    margin: 5px 10px 0 20px;
    float: left;
}

.pro-bottom p {
    width: 60px;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    float: left;
    padding: 0;
    margin: 5px 0 0 0;
    display: block;
}

.pro-bottom input {
    width: 120px;
    margin: 5px 0 0 0;
    line-height: 30px;
    background: none;
    border: none;
    font-size: 16px;
}

.integral_bo .list-block ul {
    border-bottom: none !important;
}

.integral_bo .list-block li {
    border-bottom: 1px solid #c8c7cc;
}

.integral_bo .list-block .item-inner {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    padding-right: 10px !important;
}

.integral_bo .integral-co, .item-inner .integral-co {
    width: 100%;
    line-height: 20px;
    font-size: 14px;
    max-height: 40px;
    overflow: hidden;
}

.integral-bot {
    width: 100%;
    font-size: 12px;
    text-align: right;
}

.integral-bot span {
    color: #736464;
    line-height: 20px;
    text-align: right;
}

.integral-bot span.integ-point {
    width: 50px;
    height: 16px;
    text-align: right;
    display: inline-block;
    padding: 0 0 0 15px;
    font-size: 16px;
    overflow: hidden;
}

.showMoreLink a.show-journeys, .showMoreLink a.hide-journeys {
    display: inline-block;
    color: #FFF;
    padding: 10px 10px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 12px;
}

.showMoreLink a.hide-journeys {
    display: none;
}

.skin-background-secondary {
    background-color: #bf3143;
}

.my-order {
    margin: 20px 15px;
    background-color: #FFF;
}

.order-list {
    width: 100%;
    /*border: 1px solid #eeeeee;*/
    overflow: hidden;
    /*-moz-box-shadow: 0 1px 1px rgba(100,100,100,0.4);
	-webkit-box-shadow: 0 1px 1px rgba(100,100,100,0.4);
	-o-box-shadow: 0 1px 1px rgba(100,100,100,0.4);
	box-shadow: 0 1px 1px rgba(100,100,100,0.4);*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #646464;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.order-state {
    width: 100px;
    height: 40px;
    padding: 60px 0 0 0;
    font-size: 10px;
    line-height: 40px;
    color: #fff;
    position: absolute;
    right: -50px;
    top: -50px;
    text-align: center;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.order-list-ti {
    padding: 10px 10px 5px 10px;
    border-bottom: 1px solid #ededed;
    overflow: hidden;
}

.order-list-ti img {
    height: 59px;
    float: left;
    margin: 0 10px 0 0;
    border: 1px solid #eee;
    box-shadow: 0 1px 1px rgba(100, 100, 100, 0.4);
    -webkit-box-shadow: 0 1px 1px rgba(100, 100, 100, 0.4);
    -moz-box-shadow: 0 1px 1px rgba(100, 100, 100, 0.4);
}

@media screen and (max-width: 800px) {
    .order-ti-t {
        display: block;
        float: left;
        width: calc(100% - 10px);
        padding-top: 10px;
    }
}

.order-ti-t h2 {
    width: 100%;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    margin: 0;
    margin-bottom: 5px;
    font-size: 16px;
}

.order-ti-t div {
    font-size: 14px;
    margin-bottom: 5px;
    width: 100%;
}

/* .order-ti-t span{width: 100%; display: block; line-height: 20px; font-size: 14px;} */
.order-ti-t span i {
    font-style: normal;
}

.order-list-ti .redemption-time {
    width: 100%;
    height: 18px;
    font-size: 12px;
    text-align: right;
    overflow: hidden;
    padding: 5px 0 0 0;
    margin: 0;
}

.order-list-co {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 5px 5px;
}

.order-list-co p {
    width: 90%;
    line-height: 20px;
    font-size: 13px;
    margin: 0 auto;
    display: block;
    padding: 0;
}

.order-list-ti .additional-info {
    font-size: 12px;
    padding: 0;
    margin: 0;
}

.order-list-ti .additional-info p {
    font-size: 12px;
    padding: 5px 0 0 0;
    margin: 0;
}

.ems-list {
    display: none;
}

.ems-show {
    width: 100px;
    float: right;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    text-align: right;
}

.order-list-bo {
    width: auto;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    padding-bottom: 7px;
    padding: 10px;
}

.order-list-bo span {
    display: block;
    line-height: 1.2;
    font-size: 14px;
    padding: 3px;
}

.order-list-bo p {
    margin: 10px 0;
    line-height: initial;
}

.order-list-bo a {
    color: #646464;
    text-decoration: underline !important;
}

/*.page-content{ padding-bottom: 70px;}*/
.uploadresult {
    margin: 0;
    padding: 20px 15px 20px 15px;
    position: relative;
    overflow: hidden;
    display: none;
}

.uploadresult a.remove-img {
    position: absolute;
    background: #fff;
    left: 10px;
    top: 10px;
    width: 26px;
    text-align: center;
    height: 26px;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
}

.uploadPreview {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.uploadPreview img {
    max-width: 80%;
    max-height: 300px;
    display: block;
    float: left;
}

.anser_up {
    margin: 0 15px;
    overflow: hidden;
}

.anser_up_co {
    width: 100%;
    overflow: hidden;
    margin: 0 0 20px 0;
}

.anser_up_fl {
    width: 30px;
    float: left;
    overflow: hidden;
}

.anser_up_fl i {
    line-height: 24px;
}

.anser_up_fr {
    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: calc(100% - 30px);
    float: right;
    color: #646464;
}

.anser_up_title {
    width: 100%;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
}

.anser_up_to {
    width: 100%;
    overflow: hidden;
}

.anser_up_to p {
    width: 100%;
    padding-bottom: 0;
    margin: 0;
    overflow: hidden;
    line-height: 24px;
}

.anser_up_to img {
    width: 80%;
    display: block;
}

.problem_points span {
    color: white;
    padding: 3px 10px;
}

.panel-overlay {
    background: #333 !important;
}

.integral_bo .item-media {
    padding: 0 0 10px 0 !important;
}

.historyList li a .item-media {
    padding: 0 0 10px 0;
}

.problem-p-txt {
    width: 100%;
    padding: 10px 15px 10px 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    flex-direction: column;
}

.problem-optin-wrapper {
    width: 100%;
    padding: 10px 15px 10px 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 24px;
    display: block;
}

.problem-p-txt p {
    padding: 0px 0 !important;
    line-height: 20px !important;
    font-size: 14px;
    width: 100% !important;
}

.mission-bottom-text .problem-p-txt p {
    margin: auto;
}

.mission-bottom-text .problem-p-txt p img {
    max-width: 100%;
}

.problem-p-txt p span {
    line-height: 20px !important;
    font-size: 14px;
}

.gift_for_fl {
    width: 80px;
    float: left;
}

.gift_for_fl i {
    font-style: normal;
}

.gift_for_fr {
    float: right;
    text-align: right;
}

.gift_for_fr i {
    font-style: normal;
}

.img_border {
    border: 1px solid #eee;
    position: relative;
    width: 106px;
    height: 80px;
    overflow: hidden;
    /*   	box-shadow: 0 1px 1px rgba(100, 100, 100, 0.4);
           -webkit-box-shadow: 0 1px 1px rgba(100, 100, 100, 0.4);
           -moz-box-shadow: 0 1px 1px rgba(100, 100, 100, 0.4);*/
}

.img_border img {
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.list-block li.media-item .item-media img, .list-block.media-list .item-media img {
    border: none;
}

.list-block.media-list .item-media img[src="/img/action_type_scorecard.png"] {
    filter: grayscale(1);
}

.img_border {
    padding-top: 0;
    padding-bottom: 0;
    margin: 9px 0 8px 0;
    height: 80px;
}

.natice_img i {
    margin-top: -25px;
}

.natice_img2, .natice_img2 i {
    color: #666;
}

.i-detail-position {
    width: 100px;
    height: 100px;
    position: relative;
}

.i-detail-position img {
    display: block;
    position: absolute;
    top: -10px;
    left: 0;
}

.position-img {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 15px;
    top: 9px;
    position: absolute;
}

.panel-bottom2 {
    height: 30px;
    position: absolute;
    z-index: 11111;
    left: 0;
    bottom: 0;
    padding: 10px 15px 0 15px;
    width: 100%;
    background: #fff;
}

.panel-bottom2 a {
    color: #000;
}

.panel-bottom2 i {
    color: #000;
}

.paddingRL15 {
    padding: 0 15px;
}

.swiper-slide img {
    display: block;
}

/*nav icon*/
.index-icon-co {
    width: 34px;
    height: 34px;
    margin-left: 9px !important;
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    background: #F3F7F7;
    color: rgba(0, 78, 149, 0.6) !important;
    border-radius: 18px;
}

.index-icon-letter {
    width: 34px;
    display: block;
    margin-left: 8px;
    float: left;
    height: 34px;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    background: #F3F7F7;
    color: rgba(0, 78, 149, 0.6) !important;
    border-radius: 18px;
    font-weight: bolder;
}

.panel-icon-co {
    width: 70px;
    height: 70px;
    font-size: 70px;
    line-height: 70px;
    text-align: center;
    background: #F3F7F7;
    color: rgba(0, 78, 149, 0.6) !important;
    border-radius: 35px;
}

.panel-icon-letter {
    width: 70px;
    height: 70px;
    font-size: 50px;
    line-height: 70px;
    text-align: center;
    background: #F3F7F7;
    color: rgba(0, 78, 149, 0.6) !important;
    border-radius: 35px;
    font-weight: bolder;
}

.rank-icon-co {
    width: 60px;
    height: 60px;
    font-size: 60px;
    line-height: 60px;
    text-align: center;
    background: #F3F7F7;
    color: rgba(0, 78, 149, 0.6) !important;
    border-radius: 30px;
}

.rank-icon-letter {
    width: 30px;
    height: 30px;
    font-size: 28px;
    line-height: 30px;
    text-align: center;
    background: #F3F7F7;
    border: 1px solid #777;
    color: rgba(0, 78, 149, 0.6) !important;
    border-radius: 20px;
    font-weight: bolder;
}

.pop-lock {
    width: 100%;
    position: fixed;
    line-height: 24px;
    padding: 10px 0;
    background: #D2F54A;
    color: #666;
    left: 0;
    display: none;
    bottom: 45px;
    text-align: center;
    z-index: 111111111111;
}

.re-upload {
    overflow: hidden;
}

.re-upload-co {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.re-upload-to {
    padding: 5px 0 20px 22px;
    margin: 0px 0 0 17px;
    border-left: 1px solid #999;
    position: relative;
}

.re-upload-title {
    width: 34px;
    height: 34px;
    background: #bebebe;
    border-radius: 30px;
    overflow: hidden;
    position: absolute;
    left: -18px;
    top: 0px;
    border: 1px solid #666;
}

.re-upload-title img {
    display: block;
}

.re-upload-person {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
}

.re-upload-person span {
    display: inline-block;
    float: left;
}

.re-upload-person span.sp1 {
    font-size: 18px;
    line-height: 30px;
}

.re-upload-person span.sp2 {
    font-size: 12px;
    color: #fff;
    margin: 5px 10px;
    padding: 0 8px;
    line-height: 20px;
}

.re-upload-person span.sp3 {
    font-size: 12px;
    color: #666;
    line-height: 30px;
    float: right;
}

.re-upload-txt {
    width: 100%;
    margin: 5px auto 0 auto;
    border-radius: 5px;
}

.re-upload-txt p {
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
    overflow: hidden;
    font-size: 14px;
    color: #666;
    line-height: 20px;
}

.re-upload-txt img {
    width: 98%;
    display: block;
    margin-top: 10px;
    border: 1px solid #eee;
    padding: 2px;
}

.liner-border {
    width: 100%;
    height: 2px;
    margin: 15px 0 0 0;
    background-image: -webkit-linear-gradient(to left, #D1F54B, #4EDBE2, #2DCCF7, #004E95);
    background-image: linear-gradient(to left, #D1F54B, #4EDBE2, #2DCCF7, #004E95);
}

.liner-border-title {
    font-size: 18px;
    font-weight: normal;
    color: #666;
    width: 100%;
    padding: 5px 15px 5px 15px;
    margin-bottom: 10px;
    color: black;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    line-height: 30px;
    font-weight: bold;
    background-color: #eeeeee;
}

.liner-border-title span {
    display: inline-block;
    float: right;
    font-weight: bold;
}

.rup-icon-letter {
    width: 34px;
    height: 34px;
    font-size: 26px;
    line-height: 34px;
    text-align: center;
    background: #F3F7F7;
    color: rgba(0, 78, 149, 0.6) !important;
    border-radius: 18px;
    font-weight: bolder;
}

.journey-detail {
    width: 100%;
    overflow: hidden;
    background: #eee;
}

.journey-detail img {
    width: 100%;
    display: block;
}

.camapaign-detail .journey-detail-txt {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 15px;
    background: #eee;
}

.journey-detail-txt {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 5px 15px;
    padding-bottom: 0;
    background: #eee;
}

#journeyDetailPage .journey-detail .journey-detail-txt {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 15px;
    text-align: center;
    background-color: #eee;
    background-position: center center;
    background-size: cover;
}

@media screen and (max-width: 768px) {
    .journey-detail-txt {
        padding: 5px 15px;
    }
}

.journey-detail-txt h3 {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    margin: 0;
    padding: 3px 0;
    color: black;
}

#journeyDetailPage .journey-detail-txt h3 {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    margin: 0 10px;
    margin-bottom: 15px;
    padding: 0;
}

.journey-detail-txt h3.center {
    text-align: center;
}

.journey-detail-txt p {
    line-height: 20px;
    font-size: 14px;
    margin-top: 10px;
    color: #333;
    text-align: center;
}

#journeyDetailPage .journey-detail-txt p {
    line-height: 21px;
    font-size: 14px;
    max-width: 450px;
    margin: 15px auto;
}

.camapaign-detail .journey-detail-txt p {
    margin-bottom: 0;
}

.journey-detail-fotter {
    width: 100%;
    overflow: hidden;
    height: 20px;
    margin: 5px 0;
    color: #333;
}

#journeyDetailPage .journey-detail-fotter {
    width: 100%;
    margin: auto;
    height: initial;
    color: #333;
}

.journey-detail-fotter span {
    display: inline-block;
    width: 115px;
    line-height: 20px;
    font-size: 12px;
    color: #333;
}

.journey-detail-fotter span i {
    font-style: normal;
}

.journey-detail-fotter span .icon {
    display: inline-block;
    vertical-align: bottom;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50px;
}

.journey-detail-fotter span img {
    display: inline-block;
    float: left;
    max-width: 20px;
    max-height: 20px;
    padding: 15px;
}

.journey-detail-fotter span .info {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 5px;
}

.journey-detail-fotter span .info b {
    font-size: 16px;
}

.j-detail-list {
    overflow: hidden;
    height: 60px;
    line-height: 20px;
}

.j-detail-list .j-detail-list-ti {
    margin: 0;
    width: 100%;
    max-height: 40px;
    font-size: 16px;
    overflow: hidden;
}

.j-detail-list p {
    margin: 0;
    width: 100%;
    font-size: 14px;
    max-height: 20px;
    overflow: hidden;
    color: #666;
}

.j-detail-list-bo {
    width: 100%;
    height: 20px;
    overflow: hidden;
    color: #333;
}

.j-detail-list-bo .iconfont, .j-detail-list-bo .fa {
    width: 24px;
    height: 24px;
    float: right;
    margin-left: 4px;
    font-size: 20px;
    color: #636363;
}

.j-detail-list-bo span {
    float: right;
    font-size: 12px;
    text-align: right;
    height: 20px;
    line-height: 20px;
}

.j-detail-list-bo span i {
    font-style: normal;
    font-weight: bold;
}

.j-detail-list-bo span.fl {
    float: left;
    font-size: 14px;
    text-align: left;
    height: 20px;
    line-height: 20px;
}

.j-detail-position {
    width: 60px;
    height: 60px;
    position: relative;
}

.j-mission-list .item-media + .item-inner {
    margin-left: 10px;
}

.j-position-img {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 15px;
    top: 10px;
}

.j-position-new {
    width: 10px;
    display: block;
    height: 10px;
    border-radius: 5px;
    background: #f00;
    position: absolute;
    left: 70px;
    top: 10px;
    z-index: 1111;
}

.item-inne-height {
    min-height: 40px;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
}

.rewardList .item-inne-height {
    min-height: 60px;
}

.border0 {
    border: 0;
}

.custommessage img {
    max-width: 100%;
}

.custommessage {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 10px 15px;
    line-height: 20px;
    color: #646464;
    text-align: left;
    font-weight: normal;
    font-size: 14px;
}

.problem-gift {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0 15px;
}

.proportion {
    margin-top: 8px;
    width: 100px;
    height: 8px;
    border: 1px solid #d7d7d7;
    float: right;
    border-radius: 4px;
    background: #d7d7d7;
    -webkit-border-radius: 4px;
    position: relative;
}

.proportion-line {
    position: absolute;
    left: 0;
    top: 0;
    height: 8px;
    border-top-left-radius: 2px;
    -webkit-border-top-left-radius: 3px;
    border-bottom-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
}

.page-content-bg {
    width: 100%;
    overflow: hidden;
}

/* landing page style start */
.welcome-swiper-container .swiper-wrapper .swiper-slide {
    background-color: #3F51B5;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 center;
}

.welcome-swiper-container {
    width: 100%;
    height: 100%;
}

.welcome-swiper-container .swiper-slide {
    background: #fff;
}

.welcome-swiper-container .swiper-slide span {
    text-align: center;
    display: block;
    margin: 20px;
    font-size: 21px;
}

.welcome-swiper-container .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
}

.welcome-swiper-container .swiper-pagination {
    text-align: center;
}

.welcome-swiper-container .swiper-container-horizontal .swiper-pagination {
    bottom: 15px;
}

@media screen and (max-width: 800px) {
    .welcome3-swiper-container {
        display: none;
    }
}

@media screen and (min-width: 800px) {
    .welcome3-swiper-container-2 {
        display: none;
    }
}

/* landing3 page style start */
.welcome3-swiper-container .swiper-wrapper .swiper-slide, .welcome3-swiper-container-2 .swiper-wrapper .swiper-slide {
    width: 100%;
    overflow: hidden;
}

.welcome3-swiper-container, .welcome3-swiper-container-2 {
    width: 100%;
    overflow: hidden;
}

.welcome3-swiper-container .swiper-slide, .welcome3-swiper-container-2 .swiper-slide {
    background: #fff;
}

.welcome3-swiper-container .swiper-slide img, .welcome3-swiper-container-2 .swiper-slide img {
    display: block;
    width: 100%;
}

.welcome3-swiper-container .swiper-slide span, .welcome3-swiper-container-2 .swiper-slide span {
    text-align: center;
    display: block;
    margin: 20px;
    font-size: 21px;
}

.welcome3-swiper-container .swiper-pagination .swiper-pagination-bullet, .welcome3-swiper-container-2 .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
}

.welcome3-swiper-container .swiper-pagination, .welcome3-swiper-container-2 .swiper-pagination {
    text-align: right;
}

.welcome3-swiper-container .swiper-container-horizontal .swiper-pagination, .welcome3-swiper-container-2 .swiper-container-horizontal .swiper-pagination {
    bottom: 15px;
}

.home-sign-button-wrap {
    position: absolute;
    bottom: 60px;
    z-index: 100;
    width: 100%;
}

.home-sign-button-wrap .row {
    width: 80%;
    margin: auto auto;
}

.home-sign-button-wrap .row .button {
    border-radius: 2px;
    border: none;
}

.home-loading3 {
    bottom: 0;
}

.loading3-bo {
    background: #4A4A4A;
    padding: 12px 0;
    margin-top: 15px;
}

.loading3-pop {
    width: 100%;
    height: 100%;
    position: fixed;
    right: 0;
    top: 50px;
    z-index: 1111111;
    display: none;
    background: rgba(0, 0, 0, 0.6);
}

.loading3-pop-lay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.loading3-pop-content {
    width: 100%;
    max-width: 400px;
    position: absolute;
    top: 0px;
    right: 5px;
    overflow: hidden;
    background: #fff;
}

.loading3-pop-btn {
    width: 100%;
    overflow: hidden;
}

.loading3-pop-btn a {
    width: 50%;
    display: block;
    float: left;
    text-align: center;
    line-height: 45px;
    background: #4A4A4A;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.loading3-pop-btn a.active {
    color: #047CFF;
    background: #fff;
}

.load3-pop-title {
    width: 100%;
    overflow: hidden;
}

.layer-scoll .fblogin {
    height: calc(100% - 62px);
}

.load3-pop-fb {
    margin-top: 20px;
    padding: 0 15px;
    overflow: hidden;
}

.load3-pop-fb a {
    position: relative;
    width: 100%;
    display: block;
    line-height: 45px;
    text-align: center;
    background: #3B467B;
    color: #fff;
}

.load3-pop-fb a.ggButtons {
    position: relative;
    width: 100%;
    display: block;
    line-height: 45px;
    text-align: center;
    background: #4885ed;
    color: #fff;
}

.load3-pop-fb a i {
    position: absolute;
    left: 30px;
    top: 12px;
    font-size: 20px;
    color: white;
}

.load3-pop-fb span {
    width: 100%;
    line-height: 20px;
    display: block;
    margin-top: 15px;
}

.load3-pop-fb span img {
    display: block;
    float: left;
    margin-right: 5px;
}

.load3-pop-fb span i {
    display: inline-block;
    float: left;
    width: calc(100% - 25px);
    line-height: 20px;
    font-style: normal;
}

a.btn-input-side.btn-email-otp {
    white-space: nowrap;
    word-break: normal;
}

.load3-bottom {
    width: 100%;
    overflow: hidden;
    font-size: 14px;
}

.load3-bo-signin {
    display: block;
    line-height: 30px;
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
    color: #8D31FF;
    text-align: center;
}

.load3-bo-register {
    width: 100%;
    overflow: hidden;
    line-height: 24px;
}

.load3-bo-register input {
    width: 30px;
    float: left;
    margin: 5px 0 0 0;
}

.load3-bo-register span {
    width: calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: -webkit-calc(100% - 30px);
    display: block;
    float: right;
    font-size: 12px;
    line-height: 18px;
    margin-top: 3px;
}

.load3-bo-register span a {
    color: #8D31FF;
}

.load3-pop {
    width: 100%;
}

.pop-login-reg {
    overflow: auto;
    margin: 0 0 10px 0;
    overflow: hidden;
}

.pop-login-reg .content-block {
    margin: 10px 0 !important;
    overflow: hidden;
}

/* landing page style end */
.u-move-btn {
    position: fixed;
    width: 100%;
    left: 0;
    text-align: center;
    bottom: 30px;
    z-index: 11111;
}

.u-move-btn i {
    font-size: 26px;
    text-shadow: 1px 1px 0 #333;
    color: #fff;
    line-height: 30px;
    -webkit-animation: start 1.5s infinite ease-in-out;
    -moz-animation: start 1.5s infinite ease-in-out;
    animation: start 1.5s infinite ease-in-out;
}

@-webkit-keyframes start {
    0%, 30% {
        opacity: 0;
        -webkit-transform: translate(0, 10px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(0, -8px);
    }
}

@-moz-keyframes start {
    0%, 30% {
        opacity: 0;
        -moz-transform: translate(0, 10px);
    }

    60% {
        opacity: 1;
        -moz-transform: translate(0, 0);
    }

    100% {
        opacity: 0;
        -moz-transform: translate(0, -8px);
    }
}

@keyframes start {
    0%, 30% {
        opacity: 0;
        transform: translate(0, 10px);
    }

    60% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
        transform: translate(0, -8px);
    }
}

.swiper-pagination-bullet-active {
    background: #fff;
    box-shadow: 0px 0px 1px #000;
    opacity: 1;
}

.vipcode-lay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    z-index: 11111;
    display: none;
}

.vipcode-share {
    position: absolute;
    width: 260px;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    border-radius: 5px;
    background: #fff;
    z-index: 111111;
}

.vipcode-co {
    font-size: 16px;
    padding: 10px 0;
    line-height: 30px;
    border-bottom: 1px dashed #999;
}

.vipcode-fo a {
    margin-top: 10px;
    width: 50%;
    float: left;
    display: inline-block;
    color: #646464;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
}

.avatar-img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    border-radius: 50px;
    overflow: hidden;
}

.avatar-img-input {
    display: block;
    position: absolute;
    opacity: 0;
    width: 100px;
    height: 100px;
    border: none;
    left: 0;
    top: 0;
    z-index: 11111111;
}

.avatar-img-upload-trigger {
    background: #00000057;
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: 0;
    text-align: center;
    color: white;
    padding-top: 5px;
    cursor: pointer;
}

.cover-img-input {
    display: block;
    position: absolute;
    opacity: 0;
    width: 30px;
    height: 30px;
    border: none;
    left: 0;
    top: 0;
    z-index: 11111111;
}

.notification-h-p {
    height: auto !important;
}

.loading-footer {
    width: 80%;
    overflow: hidden;
    margin: 0 auto;
    padding: 20px 0 20px 0;
    text-align: center;
}

.loading-footer ul {
    width: auto;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}

.loading-footer ul li {
    padding: 0 6px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-right: 2px solid #f0f0f0;
    text-align: center;
    line-height: 18px;
    display: inline-block;
}

.loading-footer ul li:last-child {
    border: none;
}

.loading-footer ul li a {
    display: inline-block;
    width: 100%;
    height: 18px;
    font-size: 14px;
    color: #fff;
    line-height: 18px;
    text-shadow: 0 0 2px #333;
}

.swiper-button-next, .swiper-button-prev {
    width: 45px;
    height: 55px;
}

.swiper-button-prev {
    background: url(../img/arrow-01.png) center center no-repeat;
    background-size: 100%;
}

.swiper-button-next {
    background: url(../img/arrow-02.png) center center no-repeat;
    background-size: 100%;
}

.swiper-button-disabled {
    opacity: 0 !important;
}

.home-sign-buttom-top {
    position: fixed;
    padding: 4px 0;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1111;
    background: rgba(0, 0, 0, 0.4);
}

.home-sign-buttom-top a {
    width: 80px;
    float: right;
    height: 34px;
    line-height: 34px;
    margin-right: 15px;
    border: none;
}

.emails-checkbox {
    width: 14px;
    height: 14px;
    display: inline-block;
    float: left;
    margin-right: 5px;
    margin-top: 3px;
}

/*profile*/
.profile {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0 15px;
    overflow: hidden;
    background: #fff;
}

.profile-co {
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}

.profile-title {
    width: 100%;
    overflow: hidden;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    padding: 10px 0 10px 0;
}

.profile-name {
    width: 100%;
    overflow: hidden;
}

.profile-name label {
    width: 100%;
    overflow: hidden;
    display: block;
}

.profile-name label:first-child {
    margin-bottom: 15px;
}

.profile-name label span {
    width: 100%;
    line-height: 16px;
    font-size: 14px;
    color: #666;
    display: inline-block;
}

.profile-name label input {
    width: 48%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    float: left;
    border: 1px solid #d7d7d7;
    height: 36px;
    padding: 5px 0;
    line-height: 24px;
    font-size: 16px;
    border-radius: 0;
    text-indent: 10px;
}

.profile-name label input:nth-child(2) {
    margin-left: 4%;
}

.profile-birth {
    width: 100%;
    overflow: hidden;
    height: 36px;
}

.profile-month {
    width: calc(40% - 20px);
    height: 36px;
    line-height: 34px;
    font-size: 16px;
    float: left;
    display: inline-block;
    -webkit-appearance: none;
    border-radius: 0;
    background: #fff;
    border: 1px solid #d7d7d7;
    color: #959595;
    text-indent: 10px;
    background: url("../img/arrowicon2.png") no-repeat scroll right center transparent;
}

.profile-col {
    /*width: calc(40% - 20px);  */
    width: 100%;
    height: 36px;
    line-height: 34px;
    font-size: 16px;
    float: left;
    display: inline-block;
    -webkit-appearance: none;
    border-radius: 0;
    background: #fff;
    border: 1px solid #d7d7d7;
    color: #959595;
    text-indent: 10px;
    background: url("../img/arrowicon2.png") no-repeat scroll right center transparent;
}

.profile-year {
    width: 30%;
    height: 36px;
    line-height: 34px;
    font-size: 16px;
    float: right;
    display: block;
    -webkit-appearance: none;
    border-radius: 0;
    background: #fff;
    border: 1px solid #d7d7d7;
    color: #959595;
    text-indent: 10px;
    background: url("../img/arrowicon2.png") no-repeat scroll right center transparent;
}

.profile-day {
    width: calc(30% - 20px);
    height: 36px;
    line-height: 34px;
    font-size: 16px;
    float: right;
    display: block;
    -webkit-appearance: none;
    border-radius: 0;
    background: #fff;
    border: 1px solid #d7d7d7;
    color: #959595;
    text-indent: 10px;
    background: url("../img/arrowicon2.png") no-repeat scroll right center transparent;
}

.profile-text {
    width: 100%;
    overflow: hidden;
}

.profile-text input {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #d7d7d7;
    height: 36px;
    padding: 5px 0;
    line-height: 24px;
    font-size: 16px;
    border-radius: 0;
    text-indent: 10px;
}

.profile-submit {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    background: #f00;
}

.page-rank-title {
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    /*border-bottom: 1px solid #bebebe;*/
    color: #666;
}

.page-rank-title h2 {
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    margin: 10px auto 0 auto;
    padding: 0;
}

.page-rank-title h3 {
    line-height: 20px;
    text-align: center;
    margin: 10px auto 0 auto;
    padding: 0;
}

.page-rank-title h3 a {
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    text-decoration: underline;
    color: #666;
    margin: 10px auto 0 auto;
    padding: 0;
}

.page-rank-title h3 img {
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    margin-top: -5px;
}

.page-rank-title p {
    font-size: 12px;
    width: 100%;
    overflow: hidden;
    line-height: 20px;
    text-align: center;
    margin: 10px auto;
}

.order-img-pop {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    z-index: 1111111111;
}

.order-img-pop img {
    width: 80%;
    display: block;
    position: absolute;
    left: 10%;
    top: 50%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.download-order {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    bottom: 10px;
    margin-left: -20px;
}

.download-close {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 20px;
    top: 30px;
}

.download-order i {
    font-size: 40px;
    color: #fff;
}

.download-close i {
    font-size: 30px;
    color: #fff;
}

.fb_dialog_advanced {
    position: fixed !important;
}

.page-error {
    padding-top: 80px;
    width: 100%;
    overflow: hidden;
}

.page-error h2 {
    font-size: 30px;
    text-align: center;
    line-height: 30px;
    padding: 20px 0;
    color: #666;
    overflow: hidden;
}

.page-error p {
    font-size: 16px;
    text-align: center;
    line-height: 24px;
    color: #666;
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

.page-error .page-error-btn {
    width: 320px;
    display: block;
    margin: 30px auto;
    border-radius: 3px;
    text-align: center;
    font-size: 16px;
    line-height: 36px;
    color: #fff;
}

.swiper-pagination-bullet {
    cursor: pointer;
    box-shadow: 0px 0px 1px #FFF;
}

.page-content-mb {
    margin-bottom: 44px !important;
}

#div-ifame {
    border: 0;
}

.result-line-div {
    margin: 10px 0;
    width: 100%;
    overflow: hidden;
}

.result-line-co {
    color: #fff;
    width: 165px;
    padding-left: 15px;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    background: url(../img/result-liner-div.png) no-repeat;
    background-size: 100%;
}

.result-line-co i {
    font-size: 18px;
}

.result-line-co span {
    font-size: 18px;
    padding-left: 10px;
}

.result-liner-content {
    width: 100%;
    line-height: 20px;
    padding: 15px 0;
    text-align: center;
    color: #9B9B9B;
}

.navbar .i-center {
    font-size: 17px !important;
    color: #fff;
}

.result-load-btn {
    width: 100%;
    height: 1px;
    display: block;
    overflow: hidden;
}

i.skin-color.fa-font15 {
    font-style: normal;
}

.pending-v-bg {
    background: #F7A837;
}

.rejected-bg {
    background: #f00;
}

.gift_suc_bottom {
    max-width: 100%;
    margin: 0 auto 30px auto;
    overflow: hidden;
    padding: 0px 20px;
    text-align: center;
}

.gift_suc_table {
    border-collapse: collapse;
    margin: auto;
    table-layout: fixed;
    width: calc(100% + 42px);
    margin-left: -21px;
    word-break: break-word;
}

.gift_suc_table, .gift_suc_table th, .gift_suc_table td {
    border: 1px solid #969696;
    padding: 7px 15px;
}

.gift_suc_table td:first-child {
    text-align: right;
}

.gift_suc_table td:last-child {
    text-align: left;
}

.gift_suc_table td:nth-child(2n-1) {
    width: 25%;
}

@media screen and (max-width: 800px) {
    .gift_suc_table td:nth-child(2n-1) {
        width: 35%;
    }
}

.gift_unique_cc_row {
    display: inline-block;
    width: auto;
}

.gift_unique_cc_row .sp1 {
    font-size: 14px;
    margin-top: 20px;
}

.gift_unique_cc_row .sp2 {
    font-size: 25px;
    border: 2px dashed #000000;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
}

.gift_suc_bottom p {
    width: 100%;
    display: block;
    float: left;
    padding: 10px 0;
    margin: 0;
    min-height: 20px;
    line-height: 20px;
}

.gift_suc_bottom p span.sp1 {
    width: 110px;
    float: left;
    display: inline-block;
    font-size: 0.85em;
}

.gift_suc_bottom p span.sp2 {
    width: 200px;
    float: left;
    display: inline-block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gift_suc_bottom p span.sp3 {
    width: 190px;
}

.upload-load {
    padding: 10px 0 5px 0;
    width: 100%;
    overflow: hidden;
    color: #606060;
    display: none;
}

.homepage-share, .homepage-share-ssl, .welcome-page {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 111111111111;
    left: 0;
    top: 0;
    -webkit-transform: translate3d(0, 0, 0) !important;
}

.hp-share-content {
    position: absolute;
    width: 90%;
    max-width: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 111111111111;
    box-shadow: 0 0 7px 3px #00000085;
}

.hp-share-co {
    padding: 15px 15px 20px 15px;
    overflow: hidden;
    background: #2badb5;
}

.hp-share-close, .hp-share-close-ssl {
    width: 30px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    z-index: 111111111112;
}

.hp-share-close-x {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-family: arial;
    font-weight: bold;
    font-size: 17px;
    width: 30px;
}

.hp-share-close-ssl i, .hp-share-close i {
    width: 100%;
    line-height: 30px;
    text-align: center;
}

.hp-share-co h2 {
    width: 100%;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    /* color: #fff; */
}

.hp-share-co p {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0px 0 10px 0;
    font-size: 14px;
    /* color: #fff; */
    line-height: 18px;
    text-align: center;
}

.hp-share-co p b {
    font-size: 18px;
}

.hp-share-url {
    width: 80%;
    margin: auto;
    overflow: hidden;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
    box-shadow: 1px 1px 2px #333;
    margin-top: 8px;
    margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
    .hp-share-url {
        width: 100%;
    }
}

.hp-share-url .copy-content {
    width: 80%;
    height: 26px;
    line-height: 26px;
    float: left;
    padding: 0;
    margin: 0;
    display: block;
    font-size: 14px;
    text-indent: 5px;
    overflow: hidden;
    /*background: #fff;*/
    background-color: #dedede;
    border: none;
    white-space: nowrap
}

.hp-share-url a {
    line-height: 26px;
    text-align: center;
    display: block;
    width: 20%;
    float: right;
    margin: 0;
    padding: 0;
    cursor: pointer;
    color: #fff;
    cursor: pointer;
}

.hp-share-copy {
    background: #2dccf7;
}

.hp-share-bo {
    background: #fff;
    padding: 15px 15px 5px 15px;
    overflow: hidden;
}

.hp-share-bo p {
    width: 100%;
    padding: 0;
    margin: 0;
    /* line-height: 30px; */
    font-size: 14px;
    color: #646464;
    text-align: center;
}

.hp-share-bo ul {
    /*width: 100%;*/
    margin: 20px 0px 0 0px;
    padding: 0;
    overflow: hidden;
    text-align: center;
}

.hp-share-bo ul li {
    cursor: pointer;
    width: 26.3333%;
    display: inline-block;
    overflow: hidden;
    margin: 0 3%;
    text-align: center;
    margin-bottom: 10px;
}

.hp-share-bo ul li .hp-share-icon {
    width: 100%;
    overflow: hidden;
}

.hp-share-bo ul li img {
    width: 45px;
    max-width: 100%;
    margin: 0 auto 0 auto;
}

.hp-share-bo ul li span {
    width: 100%;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: #646464;
}

.hp-share-bo a.hp-share-show {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    text-decoration: underline !important;
    color: #68A5DF;
}

.hp-share-bo a.hp-share-show:hover {
    text-decoration: underline !important;
}

.navbar, .toolbar, .navbar-inner {
    height: 50px;
}

.navbar-inner .left img.small-logo {
    height: 40px;
    margin: 5px 0;
    display: none;
}

.navbar-inner .left img.small-logo-2 {
    height: 40px;
    margin: 5px 0;
    display: none;
}

.navbar-inner .left img.logo-unique {
    height: 40px;
    margin: 5px 0;
    display: none;
}

.navbar-o {
    overflow: hidden;
    margin: 0 auto;
    display: inline-block;
}

.navbar-o ul {
    width: 100%;
    padding: 0;
    margin: 0;
}

.navbar-o ul li {
    display: inline-block;
}

.navbar-o ul li a {
    display: inline-block;
    margin: 0 10px;
    padding: 0 10px;
    line-height: 50px;
    cursor: pointer;
    font-size: 16px;
}

.navbar-o ul li.active {
    background: rgba(255, 255, 255, .25);
}

.page-content-sco {
    width: 100%;
    max-width: 800px;
    min-height: 600px;
    /*min-height: -webkit-calc(100% - 70px);
	min-height: -moz-calc(100% - 70px);
	min-height: -o-calc(100% - 70px);
	min-height: calc(100% - 70px);*/
    overflow: hidden;
    margin: 35px auto;
    padding-bottom: 60px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.50);
    position: relative;
}

.page-content-sco.typeform-iframe-container {
    padding-bottom: 0 !important;
}

.page-content-sco-content-block.typeform-iframe-container {
    max-height: 100% !important;
}

.problem-p-txt.typeform-iframe-container {
    display: block;
    padding: 0;
    /*margin-bottom: 45px;*/
    min-height: 300px;
    height: 300px;
}

.page-content-lco {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    margin: 0 auto;
    position: relative;
}

.panel-right-box {
    height: 1px;
    border-bottom: 1px solid #999;
    margin: 15px;
    width: initial;
    box-sizing: border-box;
    overflow: hidden;
}

.navbar a.link {
    line-height: 50px;
    height: 50px;
    display: inline-block;
}

.navbar a.pop-btn-signin, .navbar a.pop-btn-signup {
    padding: 0 7px;
}

.navbar a.pop-btn-signup {
    margin-left: 10px !important;
}

.navbar a.active {
    background: rgba(255, 255, 255, .25);
}

.page-content-back {
    width: 100%;
    height: 35px;
    line-height: 35px;
    color: #fff;
    font-size: 14px;
    background: #000;
}

.page-content-back a {
    color: #fff;
}

.page-content-back i {
    display: inline-block;
    padding: 0 10px;
    line-height: 35px;
    float: left;
}

.page-content-back a span {
    /*text-decoration: underline;*/
    display: inline-block;
    max-width: calc(100% - 35px);
    height: 35px;
    overflow: hidden;
}

.loading3-pop-content {
    max-height: calc(100% - 50px);
    max-height: -webkit-calc(100% - 50px);
    max-height: -moz-calc(100% - 50px);
    position: absolute;
    top: 0px;
    right: 0px;
    overflow: hidden;
    background: #fff;
    overflow-y: auto;
}

@media screen and (max-width: 800px) {
    .item-inne-height {
        min-height: 40px;
    }

    .rewardList .item-inne-height {
        min-height: 60px;
    }

    .page-content-sco {
        overflow: hidden;
        margin: 0px auto;
        background: #fff;
    }

    .navbar .center {
        display: none;
    }

    .j-detail-list p, .iterm_inner_list p {
        display: none;
    }

    .j-detail-list p.notification-h-p, .iterm_inner_list p.notification-h-p {
        opacity: 1;
    }

    .iterm_inner_list p.notification-h-p {
        opacity: 1;
        display: block;
    }

    .prolem-title-bo span.fr b {
        display: none;
    }

    .loading3-pop-content {
        width: 100%;
        max-width: 100%;
        max-height: calc(100% - 50px);
        max-height: -webkit-calc(100% - 50px);
        max-height: -moz-calc(100% - 50px);
        position: absolute;
        top: 0px;
        right: 0px;
        overflow: hidden;
        background: #fff;
        overflow-y: auto;
    }

    .iterm_inner_list span {
        height: 40px;
        line-height: 20px;
    }

    .rewardList .iterm_inner_list span {
        height: 20px;
    }
}

/** Prevent IOS devices footer obscuring the textareas */
@media screen and (max-width: 800px) {
    /** Mission Detail Page */ #missionDetailPage {
    height: 100% !important;
    max-height: 100%;
    min-height: auto !important;
}

    #missionDetailPage form, #missionDetailPage form .page-content-bg {
        height: 100%;
    }

    #missionDetailPage form .page-content-bg .page-content-sco {
        overflow: auto;
        height: 100%;
        min-height: calc( 100% - 0px ) !important;
        max-height: calc( 100% - 0px ) !important;
        padding-bottom: 0;
        display: flex;
        flex-flow: column nowrap;
        align-content: flex-start;
    }

    #missionDetailPage form .page-content-bg .page-content-sco .page-content-sco-content-block {
        max-height: calc(100% - 45px);
        overflow: scroll;
    }

    #missionDetailPage form .page-content-bg .page-content-sco .page-content-sco-footer-block {
        margin-top: auto;
    }

    #missionDetailPage form .page-content-bg .page-content-sco .problem_footer {
        position: relative;
        margin-top: auto;
    }

    /** Mission Result Page */
    #missionResultPage {
        height: 100% !important;
        max-height: 100%;
        min-height: auto !important;
    }

    #missionResultPage .page-content-bg {
        height: 100%;
    }

    #missionResultPage .page-content-bg .page-content-sco {
        overflow: auto;
        height: 100%;
        min-height: calc( 100% - 0px ) !important;
        max-height: calc( 100% - 0px ) !important;
        padding-bottom: 0;
        display: flex;
        flex-flow: column nowrap;
        align-content: flex-start;
    }

    #missionResultPage .page-content-bg .page-content-sco .page-content-sco-content-block {
        max-height: calc(100% - 45px);
        overflow: scroll;
    }

    #missionResultPage .page-content-bg .page-content-sco .page-content-sco-footer-block {
        margin-top: auto;
    }

    #missionResultPage .page-content-bg .page-content-sco .problem_footer {
        position: relative;
        margin-top: auto;
    }
}

/** End of Prevent IOS devices footer obscuring the textareas */
.panel-overlay {
    opacity: 0.6 !important;
}

.read-notification {
    width: 100%;
    overflow: hidden;
}

.read-notification a {
    margin: 0 15px 15px 15px;
    display: inline-block;
    float: right;
    line-height: 30px;
    text-decoration: underline !important;
}

.prolem-title-bo span {
    display: inline-block;
    float: left;
    font-size: 12px;
    color: #333;
}

.prolem-title-bo span b {
    font-size: 16px;
}

.prolem-title-bo span.fr {
    float: right;
    font-weight: bold;
    font-size: 16px;
}

.prolem-title-bo span.fr b {
    font-weight: normal;
    font-size: 12px;
    color: #333;
}

a.pop-btn-signin, a.pop-btn-signup {
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
}

.content-title {
    background-color: #666;
    color: white;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0px;
    border-bottom: 0px solid #bebebe;
}

.content-title h2 {
    margin: 0;
    line-height: 30px;
    padding: 20px 15px;
    /*text-indent: 15px;*/
    font-size: 20px;
}

.content-title-old {
    background-color: #eee;
    color: #666;
    width: 100%;
}

.content-title-old h2 {
    margin: 0;
    line-height: 40px;
    padding: 0;
    text-indent: 15px;
    font-size: 18px;
    font-weight: normal;
}

.page-r {
    padding: 10px 15px;
    border-bottom: 10px solid #eee;
    overflow: hidden;
}

.page-r-borderTop {
    border-top: 10px solid #eee;
}

.page-r-t {
    width: 500px;
    float: left;
    overflow: hidden;
}

.page-r-t h3 {
    color: #646464;
    line-height: 25px;
    margin: 0;
    margin-top: 10px;
    padding: 0;
}

.page-r-t p {
    color: #646464;
    line-height: 20px;
    padding: 0;
    margin: 0;
    width: 100%;
}

.rank-r-share {
    width: 200px;
    height: 45px;
    color: #fff;
    line-height: 45px;
    border: 0;
    margin: 0;
    text-align: center;
    font-size: 20px;
    float: right;
    cursor: pointer;
}

.load3-pop-fb a.weibobg {
    background: #df3e3e !important;
}

.load3-pop-fb a.wechatbg {
    background: #62b900 !important;
}

.load3-pop-fb a.vkbg {
    background: #5f82a6 !important;
}

.load3-pop-fb a.igbg {
    background: #E1306C !important;
}

.layer-scoll {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-top: 50px;
    background: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.land3-list {
    width: 100%;
    margin: 30px auto 20px auto;
    overflow: hidden;
}

.land3-list ul {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.land3-list ul li {
    width: calc(33.3333% - 16px);
    display: block;
    margin-right: 24px;
    overflow: hidden;
    float: left;
}

.land3-list ul li:last-child {
    margin-right: 0;
}

.land3-list ul li img {
    width: 100%;
    display: block;
}

.land3-list ul li h3 {
    font-size: 18px;
    color: #333;
    line-height: 20px;
    margin: 10px auto;
    padding: 0;
    width: 100%;
}

.land3-list ul li p {
    width: 100%;
    margin: 5px auto;
    line-height: 18px;
    font-size: 14px;
    color: #646464;
}

.page-foo {
    width: 100%;
    padding: 10px 0;
    overflow: hidden;
    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.30);
}

.page-foo ul {
    width: 100%;
    overflow: hidden;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 0;
    text-align: center;
}

.page-foo ul li {
    display: inline-block;
    padding: 5px;
}

.page-foo ul li a {
    display: inline-block;
    line-height: 20px;
    /* color: #fff; */
    font-size: 14px;
}

.page-foo p {
    text-align: center;
    padding: 0 10px;
    line-height: 20px;
    /* color: #fff; */
    font-size: 12px;
}

.page-content {
    width: 100%;
    padding-top: 0 !important;
    overflow: hidden;
    height: auto !important;
    position: relative;
    min-height: -webkit-calc(100% - 97px) !important;
    min-height: -moz-calc(100% - 97px) !important;
    min-height: calc(100% - 97px) !important;
}

.moxie-shim-html5 {
    z-index: 1000 !important;
}

.noshadow {
    box-shadow: none;
}

.page-person {
    overflow: hidden;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 10px 15px;
}

.page-person-co {
    width: 100%;
    overflow: hidden;
}

.page-person-img {
    float: left;
    overflow: hidden;
    padding-right: 15px;
}

.page-person-img img {
    width: 40px;
    height: 40px;
    display: block;
    float: left;
    border-radius: 20px;
    border: 1px solid #646464;
}

.page-person-txt {
    width: calc(100% - 57px);
    width: -webkit-calc(100% - 57px);
    width: -moz-calc(100% - 57px);
    max-width: 320px;
    height: 30px;
    margin: 5px 0;
    float: left;
    background: #646464;
    color: #fff;
    text-indent: 10px;
    line-height: 30px;
    border-radius: 8px;
}

.page-person-name {
    width: 100%;
    line-height: 26px;
    overflow: hidden;
}

.page-person-name span {
    display: inline-block;
    color: #646464;
}

.page-mission-txt {
    overflow: hidden;
    padding: 15px 15px;
}

.page-mission-txt h3 {
    width: 100%;
    margin: 0;
    line-height: 24px;
    font-size: 16px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-mission-txt p {
    font-size: 14px;
    padding: 5px 0;
    line-height: 18px;
    margin: 0;
}

.page-mission-co {
    width: 100%;
    background: #bebebe;
    overflow: hidden;
    padding: 10px 0;
    position: relative;
    box-sizing: border-box;
}

.page-mission-co::after {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -10px;
    content: '';
    width: 0;
    border-left: 10px solid transparent;
    border-top: 10px solid #fff;
    border-right: 10px solid transparent;
}

a.page-mission-btn {
    width: 100%;
    display: block;
    margin: 20px auto;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    background: #2dccf7;
}

.page-mission-img {
    width: 100%;
    overflow: hidden;
}

.page-mission-img img {
    display: block;
    float: left;
}

@media screen and (max-width: 800px) {
    .content-title {
        background-color: #eee;
        border-bottom: none;
        color: #666;
    }

    .content-title h2 {
        /*text-indent: 15px;*/
        padding: 10px;
        font-size: 18px;
        line-height: 26px;
    }

    .page-r-t {
        width: 100%;
        float: none;
    }

    .page-r-t h3, .page-r-t p {
        width: 100%;
        text-align: center;
    }

    .rank-r-share {
        width: 100%;
        height: 45px;
        color: #fff;
        line-height: 45px;
        border: 0;
        margin: 0;
        text-align: center;
        font-size: 20px;
        float: none;
        margin: 10px auto 0 auto;
    }

    /*land3 list*/
    .land3-list ul {
        width: 100%;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    .land3-list ul li {
        width: 100%;
        display: block;
        margin-right: 24px;
        overflow: hidden;
        float: left;
        margin-bottom: 20px;
    }

    .land3-list ul li:last-child {
        margin-right: 0;
    }

    .land3-list ul li img {
        width: 90%;
        margin: 0 auto;
        display: block;
    }

    .land3-list ul li h3 {
        font-size: 16px;
        font-weight: normal;
        color: #333;
        line-height: 20px;
        margin: 10px auto;
        width: 90%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .land3-list ul li p {
        width: 90%;
        margin: 5px auto;
        line-height: 18px;
        font-size: 14px;
        color: #646464;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .page-mission-co {
        padding: 10px 15px;
    }

    .page-foo {
        display: none;
    }
}

.navbar-inner .left img.large-logo {
    max-width: 120px;
    margin-top: 10px;
    height: auto;
    display: none;
    box-shadow: 0 2px 2px #333;
}

.navbar:after {
    display: none;
}

.navbar-inner .left .small-icon {
    text-align: center;
    border-radius: 70px;
    height: 35px;
    width: 35px;
    box-sizing: border-box;
    margin: 7px;
    margin-left: 0;
    line-height: 29px;
    color: #FFF;
    font-weight: normal;
    background-color: #550b4A;
    padding: 3px;
    font-size: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 768px) {
    .navbar-inner .left img.small-logo-2 {
        display: none;
    }

    .navbar-inner .left .small-icon {
        display: block;
    }

    .navbar-inner .left img.large-logo {
        display: none;
    }

    .navbar-inner .left img.logo-unique {
        display: none;
    }

    .navbar-inner .left img.small-logo {
        display: block;
    }

    .swiper-button-next, .swiper-button-prev {
        display: none;
    }
}

@media screen and (min-width: 1050px) {
    .navbar-inner .left img.small-logo-2 {
        display: none;
    }

    .navbar-inner .left .small-icon {
        display: none;
    }

    .navbar-inner .left img.large-logo {
        display: block;
    }

    .navbar-inner .left img.logo-unique {
        display: block;
    }

    .navbar-inner .left img.small-logo {
        display: none;
    }

    .swiper-button-next, .swiper-button-prev {
        display: none;
    }

    .swiper-container:hover .swiper-button-next, .swiper-container:hover .swiper-button-prev {
        display: block;
    }
}

@media screen and (min-width: 768px) and (max-width: 1050px) {
    .swiper-button-next, .swiper-button-prev {
        display: none;
    }

    .navbar-inner .left img.small-logo-2 {
        display: block;
    }

    .navbar-inner .left .small-icon {
        display: none;
    }

    .navbar-inner .left img.large-logo {
        display: none;
    }

    .navbar-inner .left img.logo-unique {
        display: none;
    }

    .navbar-inner .left img.small-logo {
        display: none;
    }
}

.index-invite-btn {
    line-height: 45px;
    height: 45px;
    /* background: #bf3143; */
    color: white;
    margin: 15px 15px 0px 15px;
    border-radius: 3px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    /* border-top: 1px solid #c8c7cc; */
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    display: inline-block;
}

@media screen and (max-width: 800px) {
    .index-invite-btn {
        font-size: 14px;
        width: 45%;
    }
}

@media screen and (max-width: 320px) {
    .index-invite-btn {
        font-size: 14px;
        width: 90%;
    }
}

.index-invite-btn i {
    line-height: 48px;
    padding-right: 10px;
    font-size: 25px;
    margin-bottom: 1px;
    color: white;
}

.bg-white {
    background: #fff;
    width: 100%;
    border-top: #eee 8px solid;
}

.navbar-inner, .toolbar-inner {
    padding: 0 10px;
}

.navbar-inner .right .right-a {
    width: auto;
    text-align: right;
    padding-top: 4px;
    margin-left: 15px;
}

.open-panel {
    padding-left: 5px;
}

.mr5 {
    margin-right: 5px;
}

.span-pts {
    line-height: 30px;
    display: inline-block;
    padding: 0 8px;
    font-size: 15px;
    background: rgba(255, 255, 255, .25);
    border-radius: 5px;
    float: right;
    margin-top: 10px;
}

.navbar {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.50);
    z-index: 2222222;
}

.navbar .left {
    max-width: 150px;
}

.gift_success_bo {
    width: 100%;
    max-width: 420px;
    margin: 10px auto;
    text-align: center;
}

.gift_success_bo p {
    font-size: 14px;
    text-align: center;
}

.gift_success_btn {
    display: flex;
    text-align: center;
    width: 100%;
    justify-content: center;
}

.gift_success_btn a {
    margin: 10px 5px;
    display: flex;
    /* width: 200px; */
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
    text-align: center;
    line-height: 16px;
    font-size: 14px;
    color: #000;
    float: left;
    text-decoration: underline;
    /* background: #2dccf7; */
}

div.old-notification-title {
    background-color: #eee;
    padding: 5px;
    color: #333;
    margin-top: 10px;
}

.old-notification-title h3 {
    margin: 5px 15px;
}

.list-block {
    margin-top: 0px;
}

.my-order {
    margin-top: 20px;
}

@media screen and (max-width: 768px) {
    .gift_success_btn a {
        float: none;
    }
}

#col-selected {
    background-color: white;
    height: 30px;
    line-height: 30px;
    border: 1px solid #bebebe;
    font-size: 14px;
    color: #999;
}

.navbar .right {
    margin-left: 0;
}

.setmy_input_list #mobile_code {
    margin-top: 10px;
}

.setmy_input_list .send-verifi {
    margin: 0;
    top: 1px;
    right: 0px;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
}

.setmy_input_list select {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    border-radius: 0;
    height: 30px;
    line-height: 30px;
    float: left;
    border: 1px solid #bebebe;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #646464;
    text-indent: 5px;
    font-weight: normal;
    margin: 5px 0;
    background: url("../img/arrowicon.png") no-repeat scroll right center transparent;
}

.uploadPreview video, .re-upload-txt video {
    border: 1px solid #ddd;
    width: 99%;
}

.welcome-page .hp-share-bo {
    max-height: 90vh;
    overflow-y: auto;
}

.page-r-t.reward {
    float: left;
    width: 50%;
    text-align: center;
    padding-bottom: 10px;
}

@media screen and (max-width: 600px) {
    .page-r-t.reward {
        width: 100%;
    }
}

.swiper-container.mission-slider {
    width: 100vw;
    max-width: 800px;
    height: 53vw;
    max-height: 425px;
}

.upResTop {
    min-height: 300px;
}

.page-content .list-block .showMoreLink {
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.page-content .list-block .showMoreLink a {
    text-decoration: underline;
    cursor: pointer;
}

.no-in-progress-journy {
    background: #fff;
    overflow: hidden;
    width: 100%;
    border-top: 1px solid #c8c7cc;
    font-weight: bold;
    color: #646464;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .no-in-progress-journy .img {
        padding: 20px 0 0 0;
        width: 100%;
        overflow: hidden;
        display: inline-block;
        text-align: center;
    }

    .no-in-progress-journy .text {
        width: 100%;
        overflow: hidden;
        display: inline-block;
        text-align: center;
        padding-bottom: 10px;
    }
}

@media screen and (min-width: 768px) {
    .no-in-progress-journy {
        padding: 20px 0 10px 0;
        overflow: hidden;
    }

    .no-in-progress-journy .img {
        padding: 0 20px 0 0;
        overflow: hidden;
        display: inline-block;
        font-size: 0;
    }

    .no-in-progress-journy .text {
        display: inline-block;
        overflow: hidden;
        line-height: 40px;
    }
}

#historyList li {
    border-bottom: 1px solid #d7d7d7;
}

ul#historyList:before {
    background: none;
}

/* ========================================================================== */
/* HOMEPAGE */
/* ========================================================================== */
/* Welcome User */
#indexIndexPage .welcome-message {
    display: block;
    font-size: 16px;
    margin: 10px;
    padding: 0;
    font-weight: bold;
}

/* #indexIndexPage .welcome-message .user-name {
  color: #bf3143;
} */
/* Notification Board */
#indexIndexPage .notification-board {
    display: block;
    margin: 10px 0;
    padding: 10px;
    background-color: #bf3143;
    color: #FFF;
    font-size: 16px;
    font-weight: normal;
}

/* Notice Board */
#indexIndexPage .notice-board {
    display: block;
    background-color: #550b4A;
    color: #FFF;
    font-size: 16px;
    font-weight: normal;
    border-bottom: 1px solid #d7d7d7;
    overflow: auto;
}

#indexIndexPage .notice-board > * {
    margin-left: 10px;
    margin-right: 10px;
}

#indexIndexPage .notice-board h1, #indexIndexPage .notice-board h2, #indexIndexPage .notice-board h3, #indexIndexPage .notice-board h4, #indexIndexPage .notice-board h5 {
    margin-top: 10px;
    margin-bottom: 10px;
}

#indexIndexPage .notice-board p {
    margin: 10px
}

#indexIndexPage .notice-board a {
    color: #FFF;
    text-decoration: underline;
}

#indexIndexPage .notice-board img {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Contribution Panels (Numbers) */
#indexIndexPage .contribution-panels-title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 10px;
    border-top: 8px #eee solid;
    border-bottom: 3px #eee solid;
}

#indexIndexPage .contribution-panels {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-top: 8px #eee solid;
}

#indexIndexPage .contribution-panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid #d7d7d7;
    padding-left: 30px;
    padding-right: 30px;
}

#indexIndexPage .contribution-panel .numbers {
    width: 100%;
}

#indexIndexPage .contribution-panel .details {
    float: left;
    width: 100%;
}

#indexIndexPage .contribution-panel .label {
    float: left;
    line-height: 28px;
    font-size: 12px;
}

#indexIndexPage .contribution-panel .label.mobile {
    display: none;
}

#indexIndexPage .contribution-panel .score {
    margin-left: 40px;
    font-size: 31px;
    /* color: #C32A41; */
}

#indexIndexPage .contribution-panel .action-button {
    align-self: flex-start;
    margin-left: 10px;
}

#indexIndexPage .contribution-panel .icon {
    float: left;
    width: 30px;
    margin-right: 10px;
}

#indexIndexPage .contribution-panel .icon i {
    font-size: 28px;
    /* color: #550b4A; */
}

#indexIndexPage .community-contribution .icon i {
    text-align: center;
    border-radius: 70px;
    height: 30px;
    width: 30px;
    box-sizing: border-box;
    margin: 0px;
    line-height: 26px;
    color: #FFF;
    font-weight: normal;
    background-color: #550b4A;
    padding: 3px;
    font-size: 20px;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
}

#indexIndexPage .contribution-panel .icon span {
    font-size: 22px;
    margin-left: 10px;
}

#indexIndexPage .contribution-panels .contribution-panel:nth-child(2) {
    border-left: 3px #eee solid;
    border-right: 3px #eee solid;
}

#indexIndexPage .contribution-panels .start {
    /* border: 2px #C32A41 solid; */
    border-width: 2px;
    border-style: solid;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    /* color: #C32A41; */
    display: inline-flex;
    margin-top: 2px;
}

#indexIndexPage .contribution-panel .start i {
    line-height: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #indexIndexPage .contribution-panels .action-button {
        display: none;
    }
}

@media screen and (max-width: 620px) {
    #indexIndexPage .contribution-panel .label.mobile {
        display: initial;
    }

    #indexIndexPage .contribution-panel .label.desktop {
        display: none;
    }

    #indexIndexPage .contribution-panel {
        align-items: center;
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
    }

    #indexIndexPage .contribution-panel .details {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #indexIndexPage .contribution-panel .icon {
        margin: 0;
        width: 22px;
    }

    #indexIndexPage .contribution-panel .icon i {
        font-size: 22px;
    }

    #indexIndexPage .contribution-panel .score {
        margin: 0;
        text-align: center;
        font-size: 20px;
    }
}

/* Campaigns Horizontal List */
#indexIndexPage .campaigns-horizontal {
    margin: 0px 0px;
    padding: 10px 3.5px 5px 3.5px;
    background-color: #f5f5f5;
}

#indexIndexPage .campaigns-horizontal .campaigns-title {
    margin: 0 7.5px;
    margin-bottom: 3.5px;
    font-size: 16px;
    font-weight: bold;
}

#indexIndexPage .campaigns-horizontal .campaign-item {
    width: 25%;
    height: initial;
}

@media screen and (max-width: 1000px) {
    #indexIndexPage .campaigns-horizontal .campaign-item {
        width: 25%;
    }
}

@media screen and (max-width: 768px) {
    #indexIndexPage .campaigns-horizontal .campaign-item {
        width: 33.3333%;
    }
}

@media screen and (max-width: 550px) {
    #indexIndexPage .campaigns-horizontal .campaign-item {
        width: 50%;
    }
}

@media screen and (max-width: 315px) {
    #indexIndexPage .campaigns-horizontal .campaign-item {
        width: 100%;
    }
}

#indexIndexPage .campaigns-horizontal .campaigns-slider {
    overflow: visible;
}

#indexIndexPage .campaigns-horizontal .campaigns-slider .swiper-button {
    background-image: none;
    /* background-color: #C32A41; */
    display: block;
    border-radius: 100px;
    width: 40px;
    height: 40px;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
}

#indexIndexPage .campaigns-horizontal .campaigns-slider .swiper-button i {
    width: 40px;
    height: 40px;
    line-height: 39px;
    color: #FFF;
    font-size: 30px;
    text-align: center;
}

#indexIndexPage .campaigns-horizontal .campaigns-slider .swiper-button.swiper-button-prev {
    left: 0px;
}

#indexIndexPage .campaigns-horizontal .campaigns-slider .swiper-button.swiper-button-next {
    right: 0px;
}

/* ========================================================================== */
/* CAMPAIGN CARD STYLE */
/* ========================================================================== */
.campaign-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 7.5px;
    padding-top: 16.5px;
    background-color: #f5f5f5;
}

.campaign-item {
    width: 25%;
    box-sizing: border-box;
    padding: 7.5px;
    position: relative;
}

.campaign-item .content {
    background-color: #FFF;
    /*box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);*/
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    color: #000;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;
    transition: opacity 0.15s;
}

.campaign-item .content:hover {
    opacity: 0.5;
}

/*.campaign-item .ribbon {
	position: absolute;
	top: 20px;
	right: 0px;
	padding: 5px;
	box-sizing: border-box;
	background-color: #bf3143;
	color: #FFF;
	font-size: 15px;
}
.campaign-item .ribbon::after {
	position: absolute;
	content: '';
	top: 100%;
	right: 0;
	border-style: solid;
	border-width: 0px 0px 8px 8px;
	border-color: transparent;
	border-left-color: #9c2b3a;
	width: 0;
	height: 0;
}*/
.campaign-item .ribbon {
    position: absolute;
    top: 20px;
    left: 0px;
    padding: 5px;
    box-sizing: border-box;
    background-color: #4caf50;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    color: #FFF;
    font-size: 15px;
}

.campaign-item .ribbon::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border-style: solid;
    border-width: 0px 8px 8px 0px;
    border-color: transparent;
    border-right-color: #387b3b;
    width: 0;
    height: 0;
}

.campaign-item .logo {
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.5);
}

.campaign-item .logo img {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.campaign-item .details {
    padding: 15px;
    padding-bottom: 0px;
    flex: 10;
}

.campaign-item .title {
    font-size: 16px;
    text-align: center;
    margin-bottom: 8px;
    font-weight: bold;
}

.campaign-item .description {
    font-size: 12px;
    text-align: left;
}

.campaign-item .brand {
    font-size: 12px;
    text-align: center;
}

.campaign-item .date {
    font-size: 12px;
    text-align: center;
    /* color: #bf3143; */
    margin: 0 15px 15px 15px;
    text-transform: capitalize;
}

@media screen and (max-width: 550px) {
    .campaign-item {
        width: 50%;
    }
}

@media screen and (max-width: 315px) {
    .campaign-item {
        width: 100%;
    }
}

/* ========================================================================== */
/* CAMPAIGNS PAGE */
/* ========================================================================== */
.showMoreLink {
    text-align: center;
}

.show-ended-campaigns {
    display: inline-block;
    width: 100%;
    margin: 0px auto;
    text-align: center;
    background-color: #f5f5f5;
    padding: 10px 0;
}

.show-ended-campaigns a.show-campaigns, .show-ended-campaigns a.hide-campaigns {
    display: inline-block;
    color: #FFF;
    padding: 10px 10px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 12px;
}

.show-ended-campaigns a.hide-campaigns {
    display: none;
}

.skin-btn-bg-color {
    background-color: #bf3143;
}

/* ========================================================================== */
/* CAMPAIGN DETAIL PAGE */
/* ========================================================================== */
.index_slider {
    background: #dddddd;
    display: block;
}

/* .index_slider2{display: none;}
@media screen and (min-width:700px) {
.index_slider{display: none;}
.index_slider2{background: #dddddd;display: block;}
} */
.campaign-detail-slider .swiper-slide {
    /* padding-bottom: 53.125%; */
    height: 425px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    justify-content: center;
}

.campaign-detail-slider .swiper-slide .campaign-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.campaign-detail-slider .swiper-slide .campaign-info img {
    max-width: 200px;
}

.campaign-detail-slider .swiper-slide .campaign-info h3 {
    color: #FFF;
    font-size: 34px;
    text-align: center;
    margin: 20px 20px 10px 20px;
    max-width: 80%;
}

.campaign-detail-slider .swiper-slide .campaign-info .description {
    color: #FFF;
    font-size: 14px;
    /* max-width: 80%; */
    max-width: 70%;
    text-align: center;
    margin: 0 0 15px 0;
    /* display: flex; */
}

.campaign-detail-slider .swiper-slide .campaign-info .description.mobile {
    display: none;
}

.campaign-detail-slider .swiper-slide .campaign-info .description span {
    display: inline-block;
    max-width: calc(100% - 80px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-detail-slider .swiper-slide .campaign-info .description button {
    display: inline-block;
    font-size: 14px;
    color: #FFF;
    text-decoration: underline;
    background-color: transparent;
    border: none;
}

#brandDetailPage .journey-detail-txt {
    background-color: #eee;
    border-bottom: 8px #dedede solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
}

#brandDetailPage .dashboard-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    margin: 5px 5px;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 20px;
}

#brandDetailPage .dashboard-button .dashboard-button-icon-container, #brandDetailPage .dashboard-button .dashboard-button-caption-container {
}

#brandDetailPage .dashboard-button .dashboard-button-icon-container {
}

#brandDetailPage .dashboard-button .dashboard-button-caption-container {
    padding-left: 10px;
}

/*
#brandDetailPage .dashboard-button i {
    padding-right: 10px;
    font-size: 20px;
    vertical-align: middle;
    line-height: 30px;
}
*/
#brandDetailPage .top-info {
    padding: 15px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#brandDetailPage .top-info a {
    font-size: 12px;
    border-radius: 3px;
    padding: 3px 5px;
    border-width: 1px;
    border-style: solid;
}

#brandDetailPage .top-info p {
    font-size: 16px;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 800px) {
    .campaign-detail-slider .swiper-slide {
        height: 60vw;
    }

    .campaign-detail-slider .swiper-slide .campaign-info img {
        max-width: 30%;
    }

    .campaign-detail-slider .swiper-slide .campaign-info h3 {
        font-size: 5vw;
        margin: 10px 10px 5px 10px;
    }

    .campaign-detail-slider .swiper-slide .campaign-info .description.desktop {
        display: none;
    }

    .campaign-detail-slider .swiper-slide .campaign-info .description.mobile {
        display: block;
    }

    #brandDetailPage .dashboard-button {
        padding: 2px 14px;
        font-size: 14px;
        margin: 10px 5px;
    }
}

/* #brandDetailPage .journey_main_menu {
  background-color: #550B40;
}
#brandDetailPage .journey_main_menu .main_menu-txt,
#brandDetailPage .journey_main_menu .main_menu_button p span {
  color: #FFF!important;
}
#brandDetailPage .journey_main_menu .main_menu_button.current {
  border-color: #FFF;
} */
/* ========================================================================== */
/* JOURNEY DETAIL PAGE */
/* ========================================================================== */
#journeyDetailPage .journey-detail-txt h3, #journeyDetailPage .journey-detail-txt p {
    color: #FFF;
}

#journeyDetailPage .list-block.media-list .campaignItem .item-media {
    margin: 0;
    border: 0;
    width: 50px;
    height: initial;
    align-items: flex-start;
}

#journeyDetailPage .list-block .campaignItem a.item-content {
    display: flex;
    align-items: unset;
    border-bottom: 2px solid #d7d7d7;
}

#journeyDetailPage .campaignItem .status-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 2px);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 25px;
    background-color: rgba(190, 190, 190, 0.8);
    color: #FFF;
    text-align: center;
}

#journeyDetailPage .campaignItem .status-layer img {
    max-height: 80%;
}

#journeyDetailPage .campaignItem .status-layer i {
    font-size: 35px;
}

#journeyDetailPage .campaignItem .status-layer span {
    font-size: 16px;
    font-weight: bold;
}

#journeyDetailPage .campaignItem .lineacross {
    position: absolute;
    height: 100%;
    left: 50%;
    width: 2px;
    background-color: #d7d7d7;
}

#journeyDetailPage .campaignItem .circle {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    line-height: 40px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    position: initial;
    background: none;
    background-color: #d7d7d7;
    position: absolute;
    left: calc(50% - 19px);
    margin-top: 10px;
}

#journeyDetailPage .campaignItem .lock {
    color: red;
    display: inline-block;
    font-size: 20px;
    opacity: 1;
}

#journeyDetailPage .campaignItem .lock.blink {
    animation: blinker 1s linear infinite;
}

#journeyDetailPage .campaignItem .j-detail-list {
    height: 40px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* ========================================================================== */
/* RANKING PAGE */
/* ========================================================================== */
#rankingPage .journey_main_menu {
    border-top: 0;
    /* background-color: #550B40;
    color: #FFF; */
}

#rankingPage .journey_main_menu.notifications_tabs .main_menu_button p span {
    /* color: #FFF; */
}

#rankingPage .journey_main_menu .main_menu_button.current {
    border-bottom: 5px solid #FFF;
}

#rankingPage .page-rank-title span {
    /* color: #C32A41; */
}

/* ========================================================================== */
/* NOTIFICATIONS PAGE */
/* ========================================================================== */
#notificationListPage .journey_main_menu {
    border-top: 0;
    /* background-color: #550B40;
    color: #FFF; */
}

#notificationListPage .journey_main_menu.notifications_tabs .main_menu_button p span {
    /* color: #FFF; */
}

#notificationListPage .journey_main_menu .main_menu_button.current {
    border-bottom: 5px solid #FFF;
}

#notificationListPage .page-rank-title span {
    /* color: #C32A41; */
}

/* ========================================================================== */
/* Main Pages Top Area */
/* ========================================================================== */
.top-area {
    display: block;
    overflow: auto;
    /* background-color: #550B40;
    color: #FFF; */
    padding: 0 20px 20px 20px;
    text-align: center;
}

.top-area .top-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0;
    /* margin-top: 5px; */
    line-height: 31px;
}

.top-area .top-title h2 {
    display: inline-block;
    font-size: 20px;
    line-height: 31px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.top-area .top-title strong {
    font-size: 31px;
    margin: 0 10px;
}

.top-area .top-title i, .top-area .top-title em {
    font-size: 28px;
    vertical-align: baseline;
    color: #FFF;
}

.top-area .top-subheadline {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 0;
}

@media screen and (max-width: 600px) {
    .top-area .top-subheadline {
        margin-left: 10px;
        margin-right: 10px;
    }
}

hr.hr-color {
    color: #eee;
}

.bv-submission-container {
    width: 100% !important;
    margin-top: 60px;
}

/* Campaign Detail Page Points - Points HUD */
.points-hud {
    width: 100%;
    text-align: center;
    padding: 15px 0px;
    border-bottom: 1px solid #d7d7d7;
}

.points-hud div {
    display: inline-block;
    width: calc(50% - 5px);
    font-size: 14px;
}

.points-hud div span {
    font-weight: bold;
}

.item-inner.iterm_inner_list {
    width: calc(100% - 121px);
}

campaignlearnmorepopup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 111111111111;
    left: 0;
    top: 0;
}

.intl-tel-input span {
    width: auto !important;
    display: initial !important;
    float: none !important;
    background: initial !important;
    text-align: initial !important;
    height: initial !important;
    line-height: initial !important;
}

.setmy_input_list.multi-input-date-selector {
    display: flex;
    flex-flow: row wrap;
}

.setmy_input_list.multi-input-date-selector select {
    margin-right: 10px;
    flex-basis: calc(1/3 * 100% - 7px);
}

.setmy_input_list.multi-input-date-selector select:last-child {
    margin-right: 0px;
}

@media screen and (max-width: 500px) {
    .setmy_input_list.multi-input-date-selector {
        justify-content: space-between;
    }

    .setmy_input_list.multi-input-date-selector select {
        margin-right: 0px;
    }

    .setmy_input_list.multi-input-date-selector select {
        flex-basis: calc(100% / 3 - 5px);
        width: calc(100% / 3);
    }
}

.iti-mobile .intl-tel-input.iti-container {
    z-index: 5000;
    padding-top: 100%;
}

.copyToClipboardWrapper {
}

.copyToClipboardWrapper p {
    flex-basis: 100%;
    text-align: center;
    color: #686868;
    margin: 5px auto;
}

.copyToClipboardWrapper input, .copyToClipboardWrapper textarea {
    font-size: 14px;
    border-radius: 0 !important;
    border: 1px solid #bbbbbb;
    height: auto;
    padding: 0 5px;
    color: #686868;
    flex-basis: 50%;
    flex-grow: 1;
    line-height: 15px;
}

.copyToClipboardWrapper .textarea {
    font-size: 14px;
    border: 1px solid #bbbbbb;
    padding: 10px;
    padding-right: 90px;
    line-height: 15px;
    position: relative;
    color: #646464;
    word-break: break-word;
}

.copyToClipboardWrapper button {
    background-color: #ececec00;
    font-size: 9pt;
    transition: all 0.25s;
    position: absolute;
    height: 100%;
    min-width: 75px;
    right: -1px;
    top: -1px;
    border: 0;
    border-left: 1px solid #bbbbbb;
}

.copyToClipboardWrapper button:hover {
    background-color: #dcdcdc
}

.copyToClipboardTooltip {
    z-index: 10000;
    background: black;
    color: white;
    padding: 5px 10px;
    margin-top: 5px;
}

.copyToClipboardTooltip:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.copyToClipboardTooltip:before {
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #000000;
    border-width: 5px;
    margin-left: -5px;
}

.answer-Verify-B .answer-Verify-points, .answer-Right-B .answer-R-points, .answer-N-Verify-Right-B .answer-V-N-points {
    font-size: 25px;
}

span .answer-V-N-points.badge-rounded-square {
    padding: 0px 5px;
    color: white !important;
    border-radius: 5px;
}

@media screen and (max-width: 500px) {
    .copyToClipboardWrapper .textarea {
    }
}

.journey_main_menu.journey_main_menu_version_2 {
    border-bottom: 0px;
}

.journey_main_menu.journey_main_menu_version_2 .main_menu_button.current {
    border-bottom: 0px;
    background: #541f4f;
}

.journey_main_menu.journey_main_menu_version_2 .main_menu_button.current:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 0px solid #ffffff00;
    border-top: 12px solid #ffffff;
    position: absolute;
    top: -20px;
    left: 0;
}

.journey_main_menu.journey_main_menu_version_2 .main_menu_button {
    padding-top: 11px;
}

.journey_main_menu.journey_main_menu_version_2 .main_menu_button .main_menu-txt, .journey_main_menu.journey_main_menu_version_2 .main_menu_button p span {
    color: white !important;
    font-size: 18px;
}

.journey_main_menu.journey_main_menu_version_2 .main_menu_button.current .main_menu-txt, .journey_main_menu.journey_main_menu_version_2 .main_menu_button.current p span {
    color: white !important;
    font-size: 18px;
}

.journey_main_menu.journey_main_menu_version_2 .main_menu_button .main_menu-txt, .journey_main_menu.journey_main_menu_version_2 .main_menu_button.current .main_menu-txt {
    font-size: 13px;
}

.campaign-detail-version-2 .campaign-info h3 button {
    vertical-align: top;
    box-shadow: 2px 2px 5px #3e3e3e;
    border-radius: 10px;
    border: 0px solid #fff;
    height: 20px;
    width: 20px;
    padding-top: 3px;
    background-color: white;
}

.campaign-detail-version-2 .campaign-info-tite-container, .campaign-detail-version-2 .campaign-info-recurrent-container {
    display: flex;
    justify-content: center;
    width: 100%;
    text-shadow: 2px 2px 5px #3e3e3e;
}

.campaign-detail-version-2 .campaign-detail-slider .swiper-slide .campaign-info .campaign-info-tite-container h3 {
    margin: auto;
}

#brandDetailPage .campaign-detail-version-2 .dashboard-button {
    background: transparent !important;
    border: 2px solid white;
    padding: 7px 10px;
    font-weight: bold;
    text-shadow: 2px 2px 5px #3e3e3e;
    box-shadow: 2px 2px 5px #3e3e3e38;
}

#brandDetailPage .journey-detail-txt.journey-detail-txt-version-2 {
    background: transparent !important;
    border: 0;
}

.problem_title.problem_title-version-2.active h2, .problem_title.problem_title-version-2.active span, .problem_title.problem_title-version-2.active b {
    color: white !important;
}

@media screen and (max-width: 500px) {
    #brandDetailPage .campaign-detail-version-2 .campaign-info-recurrent-container .dashboard-button {
        min-height: 25px;
        min-width: 25%;
        justify-content: left;
        padding: 5px 10px;
        margin: 5px;
    }
}

.login-redirect-loader {
    width: 60px;
    height: 10px;
    margin: 200px auto;
}

.load3-pop-header-image img {
    width: 55px;
}

.load3-pop-header {
    padding: 15px;
    padding-bottom: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.load3-pop-header-image {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.load3-pop-header-text-1 {
    margin-left: 15px;
    font-size: 1.7em;
}

.load3-pop-header-text-2 {
    width: 100%;
    justify-content: center;
    display: flex;
    margin-top: 15px;
}

.resume-button-container {
    display: flex;
    justify-content: center;
    padding: 15px;
    margin-top: -15px;
}

.resume-button-container a {
    padding: 7px;
    background: #696969;
    flex-grow: 1;
    text-align: center;
    color: white;
    border-radius: 10px;
}

.resume-button-container a i {
    background: white;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1.5em;
    margin-right: 5px;
    border-radius: 100px;
    padding: 3px;
    color: #696969;
}

.resume-button-container a.start {
    background: rgba(71, 179, 83, 1);
}

.resume-button-container a.resume {
    background: rgba(226, 23, 14, 1);
}

.resume-button-container a.start i {
    color: rgba(71, 179, 83, 1);
}

.resume-button-container a.resume i {
    color: rgba(226, 23, 14, 1);
}

.resume-button-container i.fa-play {
    padding-left: 4px;
    padding-right: 2px
}

.modal.modal-frontend {
    opacity: 1;
    outline: none;
    display: flex;
    position: absolute;
    background: #000000b8;
    width: 100%;
    max-width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    margin: 0;
    transform: none;
    z-index: 111111111111;
    box-shadow: 0 0 7px 3px #00000085;
}

.modal.modal-frontend .modal-dialog {
    margin: auto;
    width: 90%;
    height: 70%;
    max-width: 600px;
    position: relative;
    background: white;
    box-shadow: 0 0 7px 3px #00000085;
}

.modal.modal-frontend .modal-header {
    margin: auto;
    height: 100px;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    color: white;
}

.modal.modal-frontend .modal-header .modal-title {
    margin: auto;
}

.modal.modal-frontend .modal-header button {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    background: transparent;
    color: white;
    font-size: 25px;
    font-weight: bold;
    outline: none;
    border: none;
}

.swiper-button-next {
    -webkit-transform: translate3d(0,0,0);
}

.swiper-button-prev {
    -webkit-transform: translate3d(0,0,0);
}

img.rff-icon-img {
    width: calc(100% - 5px);
    height: calc(100% - 20px);
    margin-top: 10px;
    object-fit: contain;
}

.scorecard-wrapper {
    background-color: grey;
    position: relative;
    min-height: 100%;
}

.scorecard-wrapper div.clearfix {
    clear: both;
    display: table;
}

div#scorecard-background {
    height: 100%;
    width: 100%;
    background: #000;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}

.frontend-loading-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000bf;
    z-index: 5000;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.frontend-loading-animation-message {
    color: white;
    text-transform: capitalize;
    padding-left: 10px;
}

.grecaptcha-badge {
    z-index: 10000;
}

/* BazaarVoice */
#bazaarVoicePage .page-content-bg {
    background-color: #0081cd;
}

#bazaarVoicePage .page-content-sco form {
    position: relative;
    text-align: left;
}

#bazaarVoicePage .selectInput {
    position: relative;
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid #d6d6d6;
    display: grid;
    grid-template-columns: auto 30%;
    column-gap: 1rem;
    align-items: center;
    margin-right: 1rem;
}

#bazaarVoicePage label {
    display: block;
    overflow: hidden;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    padding-bottom: 10px;
}

#bazaarVoicePage .selectInput label {
    padding-bottom: 0;
}

#bazaarVoicePage .selectInput select {
    height: 36px;
    line-height: 34px;
    font-size: 16px;
    float: right;
    display: block;
    -webkit-appearance: none;
    border-radius: 0;
    background: #fff;
    border: 1px solid #d7d7d7;
    color: #959595;
    text-indent: 10px;
    background: url(../img/arrowicon2.png) no-repeat scroll right center transparent;
}

#bazaarVoicePage .selectInput select:focus {
    border: 1px solid #0081cd;
}

#bazaarVoicePage .textInput {
    position: relative;
}

#bazaarVoicePage .textInput label {
    width: 100%;
}

#bazaarVoicePage .textInput {
    position: relative;
    padding: 1rem 0;
    border-bottom: 1px solid #d6d6d6;
}

#bazaarVoicePage .textInput input {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #d7d7d7;
    height: 36px;
    padding: 5px 0;
    line-height: 24px;
    font-size: 16px;
    border-radius: 0;
    text-indent: 10px;
    transition: all 450ms ease-out;
}

#bazaarVoicePage .textInput input:focus {
    border: 1px solid #0081cd;
}

#bazaarVoicePage .textInputArea {
    position: relative;
    text-align: left;
    padding: 1rem 0;
    border-bottom: 1px solid #d6d6d6;
}

#bazaarVoicePage textarea {
    border: 1px solid #d7d7d7;
    margin-bottom: 1rem;
    width: 96%;
}

#bazaarVoicePage textarea:focus {
    border: 1px solid #000;
}

#bazaarVoicePage .star_group {
    position: relative;
    padding: 1rem 0;
    border-bottom: 1px solid #d6d6d6;
}

#bazaarVoicePage .star_group .star_group_rating a {
    position: relative;
    transition: all 450 ease-out;
}

#bazaarVoicePage .star_group .star_group_rating a:hover {
    background: #0081cd;
}

#bazaarVoicePage .star_group .star_group_rating a:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 23px;
    height: 22px;
; background-image: url("https://journylab-staging.s3.ap-southeast-1.amazonaws.com/ueditor/20200228/5e58a4c0d7c12-1582867648.png");
    background-size: cover;
}

#bazaarVoicePage .star_group .star_group_rating a.select-star {
    background: #0081cd;
}

#bazaarVoicePage .color-red {
    color: #ff3b30 !important;
}

#bazaarVoicePage .booleanInput {
    position: relative;
    padding: 1rem 0;
    border-bottom: 1px solid #d6d6d6;
    display: flex;
    flex-direction: row;
}

#bazaarVoicePage .booleanInput label {
    padding-bottom: 0;
}

#bazaarVoicePage #bv-field-contextdatavalue_HowLongHaveYouBeenUsingThisProduct {
    border-bottom: none;
    padding-bottom: 2rem;
}

#bazaarVoicePage button {
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
    overflow: hidden;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    border-radius: 0;
    border: 0;
    color: #fff;
    /* background: #0066a1; */
    background: #e26d00;
    margin-top: 1rem;
}

@media screen and (max-width: 768px) {
    #bazaarVoicePage .selectInput {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    #bazaarVoicePage .selectInput label {
        width: 100%;
    }

    #bazaarVoicePage .selectInput select {
        width: 100%;
    }
}

.facebook-sharer-wrapper {
    background: #eee;
    padding: 10px;
}

.facebook-sharer-wrapper > div {
    display: grid;
}

.facebook-sharer-wrapper p {
    margin: 0.5em 0;
}

.facebook-sharer-wrapper i {
    margin-right: 1em;
}

.facebook-sharer-wrapper .sharer-interaction-area {
    grid-row-gap: 1em;
    align-items: center;
}

.facebook-sharer-wrapper .sharer-interaction-area .sharer-link-textarea-container {
    display: grid;
    grid-template-columns: 2em auto;
    align-items: center;
    background: white;
    padding: 0 0.2em 0 1em;
    border: 1px solid #aaa;
    border-radius: 4px;
}

.facebook-sharer-wrapper .sharer-interaction-area .sharer-link-textarea-container textarea {
    border: 0;
    font-size: 15px;
    height: 25px;
    padding: 0.7em 0 0.3em 0;
    text-align: center;
}

.facebook-sharer-wrapper .btn-share-facebook {
    background: #3b5998;
    color: white !important;
    padding: 5px 15px;
    border-radius: 3px;
    margin: auto;
}

.facebook-manual-more-info-modal .desktop, .facebook-manual-more-info-modal .mobile {
    display: grid;
    justify-items: left;
    padding: 1em;
    grid-row-gap: 0.5em;
    text-align: left;
}

.facebook-manual-more-info-modal .mobile {
    display: none;
}

.facebook-manual-more-info-modal .modal-content {
    position: relative;
    height: 100%;
    /* overflow: hidden; */
}

.facebook-manual-more-info-modal .modal-body {
    height: calc(100% - 100px);
    max-height: calc(100% - 100px);
    overflow: scroll;
    background: #ffffffbf;
}

.facebook-manual-more-info-modal .modal-body .step-image {
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .facebook-manual-more-info-modal .desktop {
        display: none;
    }

    .facebook-manual-more-info-modal .mobile {
        display: grid;
    }
}

.registrationformFields-container {
    width: 90%;
    margin: auto;
}

.registrationformFields-container #emailOTPCodeVEBP, #registerWithForm .lable_input_email {
    display: inline-block;
    width: calc(100% - 150px);
}

#layoutSignPage #registerWithForm .lable_input_email {
    width: calc(100% - 100px);
}

.registrationformFields-container a.btn-input-side.btn-email-otp, #registerWithForm a.btn-input-side.btn-email-otp {
    float: right;
    padding-top: 10px;
    padding-right: 5px;
}

/** More info popups */
[data-frontend-more-info-popup] {
    cursor: pointer;
    display: inline-block;
    text-decoration: underline;
}

[data-frontend-more-info-popup] img {
    width: initial;
    height: initial;
}

.frontend-more-info-popup {
}

.frontend-more-info-popup .hp-share-content {
    max-height: 75%;
    overflow: auto;
    background: white;
}

.frontend-more-info-popup .hp-share-content .hp-share-title-icon i {
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    color: #550B40;
    text-align: center;
}

.frontend-more-info-popup .hp-share-content .hp-share-close i {
    color: #550B40;
}

.frontend-more-info-popup .hp-share-content .hp-share-title-text {
    padding: 10px 30px 0 10px;
}

.frontend-more-info-popup[data-frontend-more-info-popup-size='0'] .hp-share-content {
    width: 50%;
    max-width: 300px;
}

.frontend-more-info-popup[data-frontend-more-info-popup-size='1'] .hp-share-content {
    width: 75%;
    max-width: 600px;
}

.frontend-more-info-popup[data-frontend-more-info-popup-size='2'] .hp-share-content {
    width: 85%;
    max-width: 800px;
}

.frontend-more-info-popup .hp-share-content .hp-share-bo {
    padding: 10px 10px 20px 10px;
}

.frontend-more-info-popup .hp-share-content .hp-share-bo p {
    text-align: initial;
}

.frontend-more-info-popup .hp-share-content .hp-share-bo img {
    max-width: 100%;
    height: auto !important;
}

/** Community Profiler Popup */
.community-profiler-modal {
}

.community-profiler-modal .hp-share-content {
    max-height: 75%;
    overflow: auto;
    background: white;
}

.community-profiler-modal .hp-share-content .hp-share-title-icon i {
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    color: #550B40;
    text-align: center;
}

.community-profiler-modal .hp-share-content .hp-share-close i {
    color: #550B40;
}

.community-profiler-modal .hp-share-content .hp-share-title-text {
    padding: 10px 30px 0 10px;
}

.community-profiler-modal .hp-share-content .hp-share-bo {
    padding: 10px 10px 20px 10px;
}

.community-profiler-modal .hp-share-content .hp-share-bo p {
    text-align: initial;
}

.community-profiler-modal .hp-share-content .hp-share-bo img {
    max-width: 100%;
    height: auto !important;
}

.community-profiler-modal .com-profiler {
    display: grid;
    grid-template-columns: minmax(0, 20px) 1fr;
    grid-template-areas: "qno qtext" "... qans";
    grid-gap: 5px;
    margin-bottom: 10px;
}

.community-profiler-modal .com-profiler-qno {
    grid-area: qno;
}

.community-profiler-modal .com-profiler-qtext {
    grid-area: qtext;
}

.community-profiler-modal .com-profiler-qans-wrapper {
    grid-area: qans;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 12px 6px;
}

.community-profiler-modal .com-profiler-answer-option.cpf-single-choice, .community-profiler-modal .com-profiler-answer-option.cpf-multiple-choice {
    display: grid;
    grid-template-columns: 25px 1fr;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    align-items: center;
}

.community-profiler-modal .com-profiler-ao.cpao-input[type='radio'], .community-profiler-modal .com-profiler-ao.cpao-input[type='checkbox'] {
    display: none;
}

.community-profiler-modal .com-profiler-answer-option.active {
    background-color: #aaa;
}

.community-profiler-modal .com-profiler-submit {
    text-align: center;
    padding: 10px 0;
}

.community-profiler-modal .com-profiler-submit .btnSubmitCommunityProfiler {
    background: #C32A41;
}

/** Notifications */
.notifier {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 5000;
    width: 100%;
    height: 100%;
    background: #0000004d;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: right;
}

.notifier .notifier-inner {
    width: 40%;
    max-width: 451px;
}

.notifier .notifier-item {
    display: grid;
    grid-template-columns: 50px auto 30px;
    grid-column-gap: 5px;
    padding: 10px 10px;
    margin: 10px 31px 10px 0px;
    border-radius: 5px;
    background: #fef4ef;
}

.notifier .notifier-item .notifier-icon {
    display: grid;
    align-content: start;
    padding: 10px;
}

.notifier .notifier-item .notifier-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title title" "desc  desc " "more  snooze";
    grid-gap: 5px;
    align-items: center;
}

.notifier .notifier-item .notifier-detail .notifier-header {
    font-weight: bold;
    grid-area: title;
}

.notifier .notifier-item .notifier-detail .notifier-text {
    grid-area: desc;
}

.notifier .notifier-item .notifier-detail .notifier-more {
    padding: 10px 0;
    grid-area: more;
}

.notifier .notifier-item .notifier-detail .notifier-snooze {
    grid-area: snooze;
}

.notifier .notifier-item .notifier-detail .notifier-more .link.external {
    position: relative;
    background: linear-gradient(90deg, #9A2787 0%, #DC1F71 100%);
    border-radius: 0;
    font-size: 14px;
    line-height: 19px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFDFB;
    background: #c33541;
    color: white;
    padding: 7px 10px;
    font-weight: bold;
}

.notifier .notifier-item .notifier-detail .notifier-more .link.external p, .notifier .notifier-item .notifier-detail .notifier-more .link.external span {
    font-family: "OpenSans-SemiBold";
}

.notifier .notifier-item .notifier-detail .notifier-more .link.external:hover {
}

.notifier .notifier-item .notifier-detail .notifier-more .link.external:hover {
}

.notifier .notifier-item .notifier-close div {
    background-image: url(../img/2020-ui-icons-v2/close_popup.svg);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-size: 30px;
    cursor: pointer;
    filter: brightness(0);
    text-align: center;
    display: grid;
    align-items: center;
}

@media (max-width: 768px) {
    .notifier {
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        width: auto;
        min-width: initial;
    }

    .notifier .notifier-inner {
        width: 100%;
        max-width: none;
    }

    .notifier .notifier-item {
        margin: 10px;
    }
}

/** Intro JS */
.introjs-helperNumberLayer {
    display: none;
}

.introjs-helperLayer.ijs-highlight {
    display: none;
    background-color: rgba(255,255,255,.3) !important;
    border: 2px solid white !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.introjs-tooltip.ijs-tooltip {
    padding: 15px;
    border-radius: 0 !important;
    border: 0 !important;
}

.ijs-tooltip .introjs-tooltiptext {
    /*text-align: center !important;*/
    font-size: 16px;
    border-bottom: 1px solid #efefef;
    padding-bottom: 10px;
}

.ijs-tooltip .introjs-skipbutton, .ijs-tooltip .introjs-donebutton, .ijs-tooltip .introjs-skipbutton:focus, .ijs-tooltip .introjs-skipbutton:active, .ijs-tooltip .introjs-nextbutton, .ijs-tooltip .introjs-nextbutton:focus, .ijs-tooltip .introjs-nextbutton:active, .ijs-tooltip .introjs-prevbutton, .ijs-tooltip .introjs-prevbutton:focus, .ijs-tooltip .introjs-prevbutton:active {
    background: #C32A41;
    font-size: 14px;
    border: none;
    text-shadow: none;
    color: white;
    font-weight: bold;
    border-radius: 0;
}

.ijs-tooltip .introjs-nextbutton.introjs-disabled, .ijs-tooltip .introjs-prevbutton.introjs-disabled {
    background: #C32A41 !important;
    color: white;
}

.ijs-tooltip .introjs-nextbutton.introjs-disabled:hover, .ijs-tooltip .introjs-nextbutton.introjs-disabled:focus, .ijs-tooltip .introjs-nextbutton.introjs-disabled:active, .ijs-tooltip .introjs-prevbutton.introjs-disabled:hover, .ijs-tooltip .introjs-prevbutton.introjs-disabled:hover, .ijs-tooltip .introjs-prevbutton.introjs-disabled:active {
    background: #C32A41 !important;
}

.ijs-tooltip .introjs-skipbutton, .ijs-tooltip .introjs-donebutton, .ijs-tooltip .introjs-skipbutton:active, .ijs-tooltip .introjs-donebutton:active {
    background: #9B9B9B;
}

.introjs-fixParent .introjs-showElement {
    background-color: white;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

#brandDetailPage #pagefriends.introjs-showElement {
    background-color: white !important;
    color: black;
}

.frontend-handler-transition {
    -webkit-transition: all 250ms ease-out .5s;
    -moz-transition: all 250ms ease-out .5s;
    -o-transition: all 250ms ease-out .5s;
    transition: all 250ms ease-out .5s;
}

/** Coupon Codes Page **/
.list-block.coupon-container {
    display: grid;
    grid-row-gap: 10px;
    padding: 10px 15px;
    margin: 0;
    border-bottom: 1px solid #d7d7d7;
}

.coupons-list-container {
    display: grid;
    grid-template-columns: auto;
    grid-row-gap: 10px;
    padding: 10px 0;
}

.coupons-list-container div {
    font-size: 12pt;
}

.coup-head {
    display: grid;
    grid-template-columns: 10em auto;
    grid-gap: 5px 10px;
    align-items: center;
}

img.coup-head-img {
    width: 100%;
    height: auto;
    max-height: 100%;
}

.coup-head-text {
    align-self: start;
}

.coup-head-text p {
    margin: auto;
}

.coup-head-text-main {
    margin-bottom: 10px;
}

.coup-code-box {
    position: relative;
    display: block;
    text-align: center;
    margin: auto;
    height: 42px;
}

a.coup-reveal-btn {
    position: absolute;
    background: #550b40;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    border-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
}

a.coup-reveal-btn:after {
    content: "";
    position: absolute;
    top: 0;
    right: -20px;
    border-width: 0 20px 42px 0;
    border-style: solid;
    border-color: #0000 #0000 #550b40 #550b40;
    background: #0000;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    /* Firefox 3.0 damage limitation */
    display: block;
    width: 0;
}

.coup-code-inner {
    /* background: #a27c97; */
    /* border: 3px dashed #550b40; */
    /* border-radius: 10px; */
    /* padding: 7px 20px; */
    /* color: white; */
    font-weight: bold;
}

.coup-head-right-coup-code {
    display: grid;
    grid-template-columns: min-content min-content;
    grid-gap: 10px;
}

.coup-head-right-coup-code-copy-button a {
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    border-radius: 5px;
}

a.coup-terms-reveal-button {
    color: #909090;
    /* font-weight: bold; */
}

.coup-terms-controller {
    /* padding: 5px 0 0 0; */
    /* border-top: 0px solid #eee; */
    /* margin-top: 5px; */
}

.coup-terms-reveal-button i {
    transition: transform 0.25s ease;
    font-size: 10pt;
}

.coup-terms-reveal-button.active i {
    transform: rotate(180deg);
}

.coup-terms-container.hide {
    display: none;
}

.coup-psm-wrapper {
    display: grid;
    grid-auto-columns: auto;
    justify-content: center;
    grid-gap: 10px;
    position: relative;
    margin: 0 auto;
}

.coup-psm-coupon-container {
    height: 160px;
    width: 320px;
    position: relative;
    margin: auto;
}

.coup-background {
    background: url(/img/unique-code-bk-purple.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    width: 320px;
    height: 160px;
}

.user_vip_coupon_scratch .coup-background, .wof-coupon-code .coup-background {
    background: url(/img/scratch-code-bk-purple-2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.coup-psm-wrapper .coup-psm-scratch-inner div {
    text-align: center;
    white-space: nowrap;
}

.coup-psm-wrapper.user_vip_coupon_scratch {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    place-content: center;
    max-width: 500px;
    margin: auto;
}

.coup-scratch-prompt {
    text-align: center;
}

.coup-psm-wrapper.user_vip_coupon_scratch.hide {
    display: none;
}

.coup-psm-wrapper .coup-psm-copy-button {
    text-align: center;
    display: grid;
    justify-content: center;
}

.coup-psm-wrapper.user_vip_coupon_scratch .sc__inner {
    display: grid;
    z-index: 1;
    place-content: center;
    word-break: break-word;
    white-space: break-spaces;
    width: 188px;
    height: 105px;
    position: relative;
    /* background: #cccccc; */
}

.coup-psm-wrapper.user_vip_coupon_scratch .sc__inner .coup-psm-scratch-inner {
    display: grid;
    grid-gap: 7px;
}

.coup-psm-wrapper.user_vip_coupon_scratch .sc__canvas {
    z-index: 2;
    position: absolute;
    cursor: pointer;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.coup-psm-text-code-spsave {
    font-size: 17px;
    padding-right: 4px;
    padding-top: 4px;
}

.coup-psm-text-code-spcode {
    font-size: 10px;
}

.coup-psm-wrapper > strong {
    display: contents;
}

.coup-psm-wrapper .coup-psm-text {
    color: #5a0a56;
    font-weight: bold;
    font-size: 1.2em;
    display: grid;
    position: absolute;
    /* background: #b3b3b3; */
    left: 32%;
    right: 11.5%;
    top: 24.5%;
    bottom: 28%;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.coup-psm-wrapper.user_vip_coupon_scratch .coup-psm-text {
    overflow: hidden;
    left: 30%;
    right: 10%;
    top: 15.5%;
    bottom: 18%;
    align-content: baseline;
}

.coup-psm-wrapper.user_vip_coupon_scratch .coup-psm-text .coup-psm-scratch-inner {
    position: relative;
    width: 188px;
    height: 100px;
}

.coup-psm-wrapper.user_vip_coupon_scratch .coup-psm-text .coup-psm-scratch-inner .coup-psm-text-discount {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60%;
    /* background: aliceblue; */
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.coup-psm-wrapper.user_vip_coupon_scratch .coup-psm-text .coup-psm-scratch-inner .coup-psm-text-code {
    position: absolute;
    top: 43%;
    left: 1%;
    right: 1%;
    bottom: -2%;
    display: grid;
    align-content: center;
    word-break: break-word;
    white-space: break-spaces;
    /* background: #9ebd9e; */
    font-size: 20px;
}

.coup-psm-wrapper .coup-psm-text .coup-psm-text-code {
    position: absolute;
    top: 0;
    left: 1%;
    right: 1%;
    bottom: -2%;
    display: grid;
    align-content: center;
    word-break: break-word;
    white-space: break-spaces;
    /* background: #9ebd9e; */
    font-size: 20px;
}

.coup-psm-wrapper .coup-psm-copy-button a {
    padding: 7px 20px;
    border-radius: 3px;
    color: white;
    font-weight: bold;
    margin: auto;
}

@media screen and (max-width: 800px) {
    .coup-head {
        grid-template-columns: 30% auto;
    }

    .coupons-list-container div {
        font-size: 14px;
    }
}

.wof-wrapper {
    display: grid;
    justify-content: center;
    position: relative;
}

.wof-wrapper .wof-winwheel-win-marker-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: grid;
    align-items: center;
}

.wof-wrapper .wof-winwheel-win-marker {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom: 50px solid #dedede;
    position: absolute;
    left: calc(50% - 10px);
    top: -75px;
}

.wof-winwheel-center-cap {
    width: 50px;
    height: 50px;
    border-radius: 50px !important;
    background: #2d2d2d;
    position: absolute;
    left: calc(50% - 25px);
    top: -25px;
    box-shadow: 0 0 4px 1px #000000ba;
}

.wof-winwheel-win-marker-inner {
    position: relative;
}

.coup-psm-wrapper.wof-coupon-code .coup-psm-text-code-spcode {
    display: none;
}

.coup-psm-wrapper.wof-coupon-code .coup-psm-text .coup-psm-text-code {
    bottom: -62%;
}

.coup-psm-wrapper.wof-coupon-code .coup-psm-text-discount {
    margin-top: -44%;
}

/** Important for switching between old and new ui */
.journy-new-ui {
    display: none !important;
}