.app-detail-page .app-detail-banner {
    margin-top: 2rem;
    position: relative;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 2.5rem 1.5rem;
    z-index: 1;
}

.app-detail-page .app-detail-banner .openFeedback {
    position: absolute;
    top: 0;
    right: 0;
    width: 7.938rem;
    height: 3.875rem;
    line-height: 2.9rem;
    text-align: center;
    font-size: 1.5rem;
    color: #FFFFFF;
    padding-left: 3rem;
    background-image: url(../images/feedbackBg.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.app-detail-page .app-detail-banner .openFeedback::before {
    content: "";
    position: absolute;
    left: 2.45rem;
    top: 33%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.5rem;
    background-image: url(../images/feedbackIcon.webp);
    background-size: contain;
    background-repeat: no-repeat;
}

.app-detail-page .app-detail-banner .topWrap {
    display: flex;
    align-items: flex-start;
    column-gap: 1.375rem;
}

.app-detail-page .app-detail-banner .topWrap .imgWrap {
    position: relative;
    width: 8.75rem;
    height: 8.75rem;
    flex: 0 0 8.75rem;
    max-width: 8.75rem;
}

.app-detail-page .app-detail-banner .topWrap .imgWrap>img {
    width: 100%;
    height: 100%;
    border-radius: 2rem;
}

.app-detail-page .app-detail-banner .topWrap .imgWrap .rateWrap {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    padding: 0 0.75rem;
    transform: translateX(-50%);
    height: 2.25rem;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, rgb(255, 193, 61) 0%, rgb(255, 132, 61) 100%);
}

.app-detail-page .app-detail-banner .topWrap .imgWrap .rateWrap span {
    font-size: 1.5rem;
    color: #ffffff;
}

.app-detail-page .app-detail-banner .topWrap .imgWrap .rateWrap img {
    width: 1.375rem;
    height: 1.25rem;
    object-fit: contain;
    object-position: center;
}

.app-detail-page .app-detail-banner .topWrap .detailWrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    row-gap: 1.5rem;
}

.app-detail-page .app-detail-banner .topWrap .detailWrap h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #140402;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-detail-page .app-detail-banner .topWrap .detailWrap .infoWrap {
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
}

.app-detail-page .app-detail-banner .topWrap .detailWrap .infoWrap .info-column {
    display: flex;
    flex-direction: column;
    row-gap: 0.625rem;
    width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
}

.app-detail-page .app-detail-banner .topWrap .detailWrap .infoWrap .info-column div {
    font-size: 1.5rem;
    color: #4D4D4D;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

.app-detail-page .app-detail-banner .topWrap .detailWrap .infoWrap .info-column div span {
    font-size: 1.5rem;
    color: #999999;
    margin-right: 0.125rem;
    line-height: 1.25;
}

.app-detail-page .app-detail-banner .topWrap .detailWrap .infoWrap .info-column div a {
    color: #57d66b;
}

.app-detail-page .app-detail-banner .tag-list {
    margin-top: 1.875rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.app-detail-page .app-detail-banner .tag-list a {
    font-size: 1.375rem;
    color: #C198FB;
    padding: 0rem 1.25rem;
    border-radius: 1.5rem;
    height: 3rem;
    line-height: 3rem;
    width: fit-content;
    background-color: #F6F0FF;
}

.app-detail-page .app-detail-banner .tag-list a:nth-child(5n + 1) {
    color: #C198FB;
    background-color: #F6F0FF;
}

.app-detail-page .app-detail-banner .tag-list a:nth-child(5n + 2) {
    color: #64CDCD;
    background-color: #EBFFFF;
}

.app-detail-page .app-detail-banner .tag-list a:nth-child(5n + 3) {
    color: #FD9D43;
    background-color: #FFF4EB;
}

.app-detail-page .app-detail-banner .tag-list a:nth-child(5n + 4) {
    color: #09BC92;
    background-color: #EBFFFA;
}

.app-detail-page .app-detail-banner .tag-list a:nth-child(5n + 5) {
    color: #8DBB00;
    background-color: #FAFFEB;
}

.app-detail-page .app-detail-banner .buttonWrap {
    margin-top: 1.875rem;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.app-detail-page .app-detail-banner .buttonWrap a,
.app-detail-page .app-detail-banner .buttonWrap .appointBtn {
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2.5rem;
    column-gap: 0.625rem;
}

.app-detail-page .app-detail-banner .buttonWrap a span,
.app-detail-page .app-detail-banner .buttonWrap .appointBtn span {
    font-size: 1.875rem;
    font-weight: 500;
    color: #ffffff;
    margin-top: -1px;
}

.app-detail-page .app-detail-banner .buttonWrap .appointBtn {
    background: #FF6623;
}

.app-detail-page .app-detail-banner .buttonWrap a.adrBtn,
.app-detail-page .app-detail-banner .buttonWrap a.cloudBtn {
    background: #39D89C;
}

.app-detail-page .app-detail-banner .buttonWrap a.iosBtn {
    background: #19B5FF;
}

.app-detail-page .app-detail-banner .buttonWrap a.pcBtn {
    background: #9822C4;
}

.app-detail-page .app-detail-banner .buttonWrap .appointBtn img {
    width: 2.125rem;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.app-detail-page .app-detail-banner .buttonWrap a.adrBtn img {
    width: 2.125rem;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.app-detail-page .app-detail-banner .buttonWrap a.iosBtn img {
    width: 2.125rem;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.app-detail-page .app-detail-banner .buttonWrap a.pcBtn img {
    width: 2.125rem;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.app-detail-page .app-detail-banner .buttonWrap .reminder {
    font-size: 1.5rem;
    color: #4D4D4D;
    text-align: center;
    font-weight: 400;
    margin-top: 0;
}

.app-detail-page .app-detail-banner .buttonWrap .buttonInner {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.app-detail-page .app-detail-banner .buttonWrap a.cloudBtn img {
    width: 3rem;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.app-detail-page .detail-nav-bar {
    margin-top: 2.25rem;
    position: relative;
    width: 100%;
    height: 4rem;
}

.app-detail-page .detail-nav-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1.125rem;
    height: 1.125rem;
    background-color: #57d66b;
    clip-path: polygon(0 0, 0 100%, 100% 0);
}

.app-detail-page .detail-nav-bar::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1.125rem;
    height: 1.125rem;
    background-color: #57d66b;
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

.app-detail-page .detail-nav-bar .nav-list {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    clip-path: polygon(3.5% 0, 100% 0, 100% 64%, 96.5% 100%, 0 100%, 0 36%);
    border-radius: 0 1rem 0 1rem;
}

.app-detail-page .detail-nav-bar li {
    height: 3.25rem;
    text-align: center;
    padding: 0 1.625rem;
    border-radius: 1.625rem;
    width: fit-content;
    font-size: 1.5rem;
    color: #4D4D4D;
    line-height: 3.25rem;
}

.app-detail-page .detail-nav-bar li.active {
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
}

.section-title {
    position: relative;
    padding-left: 1.5rem;
}

.section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(12deg);
    left: 0;
    width: 0.5rem;
    height: 2.25rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    border-radius: 0.25rem;
}

.section-title h2,
.section-title p {
    font-size: 2.25rem;
    font-weight: bold;
    color: #333333;
}

.app-detail-page .app-intro-panel {
    margin-top: 2.625rem;
}

.app-detail-page .app-intro-panel .app-intro-content {
    margin-top: 1.125rem;
    background-color: #ffffff;
    padding: 2rem 1.5rem 2.5rem;
    border-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    font-size: 1.75rem;
    color: #4D4D4D;
    line-height: 3rem;
}

.app-detail-page .app-intro-panel .app-intro-content p {
    font-size: 1.75rem;
    color: #4D4D4D;
    line-height: 3rem;
}

.app-detail-page .app-intro-panel .app-intro-content img {
    margin: 0 auto;
    max-width: 80%;
    height: auto;
    display: block;
}

.app-detail-page .app-intro-panel .app-intro-content h3 {
    font-size: 2rem;
    color: #333333;
    font-weight: bold;
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.5;
}

.app-detail-page .app-intro-panel .app-intro-content h3::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: 0;
    width: 0.3rem;
    height: 1.75rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    border-radius: 0.25rem;
    transform: rotate(20deg);
}

.app-detail-page .app-intro-panel .app-intro-content h3::after {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: 0.625rem;
    width: 0.3rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    border-radius: 0.25rem;
    transform: rotate(20deg);
}

.app-detail-page .screenshot-panel {
    margin-top: 1.875rem;
}

.app-detail-page .screenshot-panel .screenshot-wrap {
    position: relative;
    height: fit-content;
    overflow: hidden;
    margin-top: 1.25rem;
}

.app-detail-page .screenshot-panel .screenshot-wrap .swiper-slide {
    width: auto;
    height: 21.125rem;
    margin-right: 1.25rem;
}

.app-detail-page .screenshot-panel .screenshot-wrap .swiper-slide img {
    max-height: 21.125rem;
    width: auto;
    cursor: pointer;
    border-radius: 1rem;
}

.app-detail-page .app-info-panel {
    margin-top: 2.75rem;
}

.app-detail-page .app-info-panel .info-list {
    margin-top: 1.25rem;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.25rem;
}

.app-detail-page .app-info-panel .info-list .info-detail-wrap {
    width: 100%;
    height: 4rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background-color: #F7F7F7;
    border-radius: 0.625rem;
    overflow: hidden;
}

.app-detail-page .app-info-panel .info-list .info-detail-wrap .info-detail {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    font-size: 1.75rem;
    color: #4D4D4D;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-detail-page .app-info-panel .info-list .info-detail-wrap .info-detail span {
    color: #999999;
}

.app-detail-page .app-info-panel .info-list .info-detail-wrap>div {
    font-size: 1.75rem;
    line-height: 1.5;
    color: #57d66b;
    cursor: pointer;
}


.app-detail-page .app-version-panel {
    margin-top: 2.75rem;
}

.app-detail-page .app-version-panel .version-list {
    margin-top: 1.25rem;
    background-color: #ffffff;
    padding: 0.625rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap {
    padding: 1.5rem 0;
    border-bottom: 1px solid #EEEEEE;
    display: none;
    align-items: center;
    column-gap: 1.25rem;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap:nth-child(-n+4) {
    display: flex;
}

.app-detail-page .app-version-panel .version-list.show-all .version-detail-wrap {
    display: flex;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .imgWrap {
    width: 7.5rem;
    height: 7.5rem;
    flex: 0 0 7.5rem;
    max-width: 7.5rem;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .imgWrap img {
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    object-fit: cover;
    object-position: center;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .detailWrap {
    display: flex;
    flex-direction: column;
    row-gap: 0.625rem;
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .detailWrap .nameWrap {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    column-gap: 1rem;
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .detailWrap .nameWrap .appName {
    font-size: 1.75rem;
    font-weight: 500;
    color: #140402;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .detailWrap .nameWrap>span {
    font-size: 1.5rem;
    color: #140402;
    max-width: 9rem;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .detailWrap .infoWrap {
    display: flex;
    align-items: center;
    column-gap: 0.875rem;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .detailWrap .infoWrap span {
    font-size: 1.5rem;
    color: #999999;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .detailWrap .infoWrap i {
    width: 2px;
    height: 1.25rem;
    transform: rotate(20deg);
    background-color: #999999;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .detailWrap .dateUpdate {
    font-size: 1.5rem;
    color: #999999;
    line-height: 1.25;
}

.app-detail-page .app-version-panel .version-list .version-detail-wrap .viewBtn {
    width: 6.25rem;
    height: 3rem;
    text-align: center;
    line-height: calc(3rem - 2px);
    border-radius: 1.5rem;
    font-size: 1.5rem;
    margin-left: auto;
    color: #57d66b;
    background: #f5f7fb;
    font-weight: 500;
    transition: all .22s cubic-bezier(.4, 0, .2, 1);
    border: 1px solid #57d66b;
}

.app-detail-page .app-version-panel .version-list .viewAllVersion {
    margin-top: 1.375rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    color: #FF553E;
}

.app-detail-page .type-hot-panel {
    margin-top: 2.625rem;
}

.app-detail-page .type-hot-panel .type-hot-list {
    background-color: #ffffff;
    padding: 2.25rem 1.5rem;
    border-radius: 1rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 1.875rem;
    flex-direction: column;
    height: calc(3 * 7.5rem + 2 * 4.25rem);
    overflow-x: scroll;
    margin-top: 1.25rem;
}

.app-detail-page .type-hot-panel .type-hot-list::-webkit-scrollbar {
    height: 0;
}

.app-detail-page .type-hot-panel .type-hot-list .hot-app-wrap {
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
    width: 23.875rem;
    height: 7.5rem;
    overflow: hidden;
}

.app-detail-page .type-hot-panel .type-hot-list .hot-app-wrap .imgWrap {
    width: 7.5rem;
    flex: 0 0 7.5rem;
    max-width: 7.5rem;
    height: 7.5rem;
}

.app-detail-page .type-hot-panel .type-hot-list .hot-app-wrap .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1.625rem;
}

.app-detail-page .type-hot-panel .type-hot-list .hot-app-wrap .detailWrap {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    overflow: hidden;
    flex: 1;
    flex-shrink: 0;
}

.app-detail-page .type-hot-panel .type-hot-list .hot-app-wrap .detailWrap .appName {
    font-size: 1.75rem;
    font-weight: 500;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-detail-page .type-hot-panel .type-hot-list .hot-app-wrap .detailWrap .infoWrap {
    display: flex;
    align-items: center;
    column-gap: 0.875rem;
    min-width: 0;
    overflow: hidden;
}

.app-detail-page .type-hot-panel .type-hot-list .hot-app-wrap .detailWrap .infoWrap span {
    font-size: 1.5rem;
    color: #999999;
    line-height: 1.5;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-detail-page .type-hot-panel .type-hot-list .hot-app-wrap .detailWrap .infoWrap i {
    width: 2px;
    height: 1.25rem;
    transform: rotate(20deg);
    background-color: #999999;
}

.app-detail-page .type-hot-panel .type-hot-list .hot-app-wrap .detailWrap .dateUpdate {
    font-size: 1.5rem;
    color: #999999;
    line-height: 1.5;
}

.app-detail-page .cnxh-panel {
    margin-top: 2.75rem;
}

.app-detail-page .cnxh-panel .tab-buttons {
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
    overflow-x: scroll;
    flex-wrap: nowrap;
    margin-top: 1.25rem;
}

.app-detail-page .cnxh-panel .tab-buttons::-webkit-scrollbar {
    height: 0;
}

.app-detail-page .cnxh-panel .tab-buttons li {
    width: fit-content;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    border-radius: 1.5rem;
    font-size: 1.5rem;
    color: #999999;
    padding: 0 1.25rem;
    background: #ffffff;
    white-space: nowrap;
}

.app-detail-page .cnxh-panel .tab-buttons li.active {
    color: #ffffff;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
}

.app-detail-page .cnxh-panel .tab-content {
    display: none;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 1rem;
    margin-top: 1.5rem;
}

.app-detail-page .cnxh-panel .tab-content.active {
    display: flex;
}

.app-detail-page .cnxh-panel .cnxh-banner {
    display: flex;
    align-items: flex-start;
    column-gap: 1.625rem;
    position: relative;
    padding: 1.25rem 1.5rem 1.75rem 1.75rem;
    z-index: 1;
}

.app-detail-page .cnxh-panel .cnxh-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 9.375rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    z-index: -1;
}

.app-detail-page .cnxh-panel .cnxh-banner .topicBanner {
    width: 18.125rem;
    flex: 0 0 18.125rem;
    max-width: 18.125rem;
    height: 10rem;
    border-radius: 1rem;
    box-shadow: 0px 3px 6px 0px rgba(102, 34, 24, 0.1);
    background: #ffffff;
    padding: 0.25rem;
}

.app-detail-page .cnxh-panel .cnxh-banner .topicBanner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1rem;
}

.app-detail-page .cnxh-panel .cnxh-banner .detailWrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.app-detail-page .cnxh-panel .cnxh-banner .detailWrap .topicName {
    font-size: 1.75rem;
    font-weight: 500;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.5rem;
}

.app-detail-page .cnxh-panel .cnxh-banner .detailWrap .topic-content {
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.app-detail-page .cnxh-panel .cnxh-banner .detailWrap .bottomWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.app-detail-page .cnxh-panel .cnxh-banner .detailWrap .bottomWrap span {
    font-size: 1.5rem;
    color: #999999;
    line-height: 1.5;
}

.app-detail-page .cnxh-panel .cnxh-banner .detailWrap .bottomWrap span b {
    color: #FF553E;
    font-weight: 400;
}

.app-detail-page .cnxh-panel .related-app-list {
    padding: 0 1.5rem 2rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.875rem;
    row-gap: 1.75rem;
}

.app-detail-page .cnxh-panel .related-app-list .appWrap {
    width: 8.75rem;
    flex: 0 0 8.75rem;
    max-width: 8.75rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.875rem;
}

.app-detail-page .cnxh-panel .related-app-list .appWrap img {
    width: 7.5rem;
    height: 7.5rem;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    border-radius: 1.625rem;
    display: block;
}

.app-detail-page .cnxh-panel .related-app-list .appWrap .appName {
    font-size: 1.75rem;
    color: #333333;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.app-detail-page .latest-app-panel {
    margin-top: 2.75rem;
}

.app-detail-page .latest-app-panel .app-listing {
    margin-top: 1.25rem;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.875rem 1.25rem;
    display: flex;
    flex-direction: column;
    row-gap: 2.25rem;
}

.app-detail-page .latest-app-panel .app-listing .appWrap {
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
}

.app-detail-page .latest-app-panel .app-listing .appWrap .imgWrap {
    width: 7.5rem;
    height: 7.5rem;
    flex: 0 0 7.5rem;
    max-width: 7.5rem;
}

.app-detail-page .latest-app-panel .app-listing .appWrap .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1.5rem;
}

.app-detail-page .latest-app-panel .app-listing .appWrap .detailWrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.app-detail-page .latest-app-panel .app-listing .appWrap .detailWrap .appName {
    font-size: 1.75rem;
    font-weight: 500;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.5rem;
}

.app-detail-page .latest-app-panel .app-listing .appWrap .detailWrap .infoWrap {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
}

.app-detail-page .latest-app-panel .app-listing .appWrap .detailWrap .infoWrap span {
    font-size: 1.5rem;
    color: #999999;
    line-height: 1.5;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-detail-page .latest-app-panel .app-listing .appWrap .detailWrap .infoWrap i {
    width: 2px;
    height: 1.25rem;
    transform: rotate(20deg);
    background-color: #999999;
}

.app-detail-page .latest-app-panel .app-listing .appWrap .detailWrap>span {
    font-size: 1.5rem;
    color: #999999;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-detail-page .latest-app-panel .app-listing .appWrap .viewBtn {
    width: 6.25rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    border-radius: 1.5rem;
    font-size: 1.5rem;
    background: #f5f7fb;
    color: #35c84d;
    box-shadow: 0 4px 12px rgba(87, 214, 107, .12);
    font-weight: 500;
}


.app-detail-page .user-review-panel {
    margin-top: 2.75rem;
}

.app-detail-page .user-review-panel h2 {
    font-size: 2.25rem;
    font-weight: bold;
    color: #333333;
    position: relative;
    padding-left: 1.5rem;
}

.app-detail-page .user-review-panel h2::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(12deg);
    left: 0;
    width: 0.5rem;
    height: 2.25rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    border-radius: 0.25rem;
}

.app-detail-page .user-review-panel .review-wrap {
    margin-top: 1.5rem;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.875rem 1.5rem 2rem;
}

.app-detail-page .user-review-panel .review-rating-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingReviewWrap {
    display: flex;
    flex-direction: column;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingReviewWrap .rating-score {
    text-align: center;
    font-size: 4.5rem;
    font-weight: bold;
    color: #30343F;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingReviewWrap .starWrap .stars {
    display: flex;
    align-items: center;
    column-gap: 0.375rem;
    justify-content: center;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingReviewWrap .starWrap .stars>div {
    width: 1.25rem;
    height: 1.25rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/star-empty.webp);
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingReviewWrap .starWrap .stars>div.star {
    background-image: url(../images/star-fill.webp);
    background-repeat: no-repeat;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingReviewWrap .starWrap .stars>div.star-half {
    background-image: url(../images/star-half.webp);
    background-repeat: no-repeat;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingReviewWrap .starWrap .stars>div.star-empty {
    background-image: url(../images/star-empty.webp);
    background-repeat: no-repeat;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingReviewWrap .totalReview {
    text-align: center;
    margin-top: 0.875rem;
    font-size: 1.5rem;
    color: #999999;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingBarWrap {
    display: flex;
    flex-direction: column;
    row-gap: 0.75rem;
    align-items: flex-end;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingBarWrap .barWrap {
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingBarWrap .barWrap .rateStars {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    width: 5.625rem;
    justify-content: flex-end;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingBarWrap .barWrap .rateStars img {
    width: 0.875rem;
    height: 0.875rem;
    object-fit: contain;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingBarWrap .barWrap .rateBar {
    width: 15rem;
    height: 0.5rem;
    border-radius: 0.25rem;
    background-color: #dfdfdf;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingBarWrap .barWrap .rateBar .bar {
    height: 100%;
    border-radius: 0.25rem;
    background: #14DD94;
    width: 0%;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingBarWrap .barWrap>span {
    font-size: 1.125rem;
    color: #1A1A1A;
    margin-right: 0.25rem;
}

.app-detail-page .user-review-panel .review-rating-wrap .ratingBarWrap .barWrap .percent {
    margin-left: 0.375rem;
    color: #999999;
    width: 2.5rem;
    text-align: center;
    margin-right: 0;
}

.app-detail-page .user-review-panel .comment-field-wrap {
    display: flex;
    flex-direction: column;
    margin-top: 2.25rem;
    border-radius: 1rem;
    border: 1px solid #EEEEEE;
}

.app-detail-page .user-review-panel .comment-field-wrap .inputWrap {
    width: 100%;
    height: 11.125rem;
    padding: 1.125rem 1rem;
    background-color: #F7F7F7;
    position: relative;
    border-radius: 1rem 1rem 0 0;
}

.app-detail-page .user-review-panel .comment-field-wrap .inputWrap textarea {
    background-color: transparent;
    outline: none;
    border: none;
    height: 100%;
    width: 100%;
    color: #000000;
    font-size: 1.5rem;
    resize: none;
}

.app-detail-page .user-review-panel .comment-field-wrap .inputWrap textarea::placeholder {
    color: #CCCCCC;
}

.app-detail-page .user-review-panel .comment-field-wrap .inputWrap .wordCount {
    position: absolute;
    bottom: 0.875rem;
    right: 1.25rem;
    font-size: 1.5rem;
    color: #CCCCCC;
}

.app-detail-page .user-review-panel .comment-field-wrap .actionBottom {
    display: flex;
    align-items: center;
    column-gap: 0.625rem;
    justify-content: space-between;
    height: 3.875rem;
}

.app-detail-page .user-review-panel .comment-field-wrap .actionBottom .post-btn {
    margin-left: auto;
    width: 10rem;
    flex: 0 0 10rem;
    max-width: 10rem;
    height: 4rem;
    border-radius: 0 0 0.75rem 0;
    font-size: 1.5rem;
    color: #ffffff;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    font-weight: 500;
    position: relative;
    padding-left: 3.125rem;
    line-height: 4rem;
}

.app-detail-page .user-review-panel .comment-field-wrap .actionBottom .post-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/commentIcon.webp);
}

.app-detail-page .user-review-panel .rate-for-app {
    display: flex;
    align-items: center;
    column-gap: 0.125rem;
    padding-left: 1.125rem;
}

.app-detail-page .user-review-panel .rate-for-app span {
    font-size: 1.5rem;
    color: #333333;
    line-height: 1;
}

.app-detail-page .user-review-panel .rate-for-app .rateStars {
    display: flex;
    align-items: center;
    column-gap: 0.375rem;
}

.app-detail-page .user-review-panel .rate-for-app .rateStars>div {
    width: 1.25rem;
    height: 1.25rem;
    background-image: url(../images/star-empty.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

.app-detail-page .user-review-panel .rate-for-app .rateStars>div.active {
    background-image: url(../images/star-fill.webp);
}

.app-detail-page .user-review-panel .userEnterWrap {
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
    margin-top: 1.5rem;
}

.app-detail-page .user-review-panel .userEnterWrap .userField {
    width: 11.5rem;
    flex: 0 0 11.5rem;
    max-width: 11.5rem;
    height: 3rem;
    border: 1px solid #BBE6FF;
    border-radius: 0.375rem;
    background-color: #ffffff;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    color: #000000;
    outline: none;
}

.app-detail-page .user-review-panel .userEnterWrap .userField::placeholder {
    color: #cccccc;
}

.app-detail-page .user-review-panel .userEnterWrap .verificationField {
    width: 10rem;
    flex: 0 0 10rem;
    max-width: 10rem;
    height: 3rem;
    border: 1px solid #BBE6FF;
    border-radius: 0.375rem;
    background-color: #ffffff;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    color: #000000;
    outline: none;
}

.app-detail-page .user-review-panel .userEnterWrap .verificationField::placeholder {
    color: #cccccc;
}

.app-detail-page .user-review-panel .userEnterWrap>img {
    width: 10rem;
    flex: 0 0 10rem;
    max-width: 10rem;
    height: 3rem;
    border-radius: 0.375rem;
}


.app-detail-page .comment-list-panel {
    margin-top: 2.75rem;
}

.app-detail-page .comment-list-panel .titleTabWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-detail-page .comment-list-panel .titleTabWrap .comment-tab {
    display: flex;
    align-items: center;
    column-gap: 2.188rem;
}

.app-detail-page .comment-list-panel .titleTabWrap .comment-tab a {
    font-size: 1.5rem;
    color: #212121;
    position: relative;
}

.app-detail-page .comment-list-panel .titleTabWrap .comment-tab a.active {
    color: #FF553E;
    font-weight: 500;
}

.app-detail-page .comment-list-panel .comment-list {
    margin-top: 1.625rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    background-color: #ffffff;
    border-radius: 0.625rem;
    padding: 1.5rem 1.25rem 2.625rem 1.5rem;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap {
    display: flex;
    align-items: flex-start;
    column-gap: 1.5rem;
    width: 100%;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentAvatar {
    width: 5rem;
    height: 5rem;
    flex: 0 0 5rem;
    max-width: 5rem;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-shrink: 0;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .uname {
    font-size: 2rem;
    color: #333333;
    font-weight: 500;
    margin-bottom: 0.625rem;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .reviewDateWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .reviewDateWrap .ratingReviewWrap .rating-score {
    display: none;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .reviewDateWrap .ratingReviewWrap .stars {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .reviewDateWrap .ratingReviewWrap .stars>div {
    width: 1.5rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/star-fill.webp);
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .reviewDateWrap .ratingReviewWrap .stars>div.star {
    background-image: url(../images/star-fill.webp);
    background-repeat: no-repeat;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .reviewDateWrap .ratingReviewWrap .stars>div.star-half {
    background-image: url(../images/star-half.webp);
    background-repeat: no-repeat;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .reviewDateWrap .ratingReviewWrap .stars>div.star-empty {
    background-image: url(../images/star-empty.webp);
    background-repeat: no-repeat;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .reviewDateWrap .datePost {
    font-size: 1.5rem;
    color: #999999;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .commentContent {
    display: flex;
    flex-direction: column;
    row-gap: 0.75rem;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .commentContent>p {
    font-size: 1.75rem;
    color: #333333;
    margin-top: 0.75rem;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .commentContent .likeReplyWrap {
    margin-left: auto;
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
    cursor: pointer;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .commentContent .likeReplyWrap {
    margin-left: auto;
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
    cursor: pointer;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .commentContent .likeReplyWrap .likeIcon {
    font-size: 1.5rem;
    color: #999999;
    position: relative;
    padding-left: 2.25rem;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .commentContent .likeReplyWrap .likeIcon::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 1.5rem;
    height: 1.625rem;
    background-image: url(../images/likeIcon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .commentContent .likeReplyWrap .unlikeIcon {
    font-size: 1.5rem;
    color: #999999;
    position: relative;
    padding-left: 2.25rem;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .commentContent .likeReplyWrap .unlikeIcon::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scaleY(-1);
    left: 0;
    width: 1.5rem;
    height: 1.625rem;
    background-image: url(../images/likeIcon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .commentContent .likeReplyWrap .active::before {
    background-image: url(../images/likeActive.webp);
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .commentContent .likeReplyWrap p {
    font-size: 1.5rem;
    color: #999999;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .replyWrap {
    margin-top: 1rem;
    display: flex;
    column-gap: 1.25rem;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .replyWrap .commentAvatar {
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    max-width: 4rem;
}

.app-detail-page .comment-list-panel .comment-list .commentWrap .commentInfo .replyWrap .uname {
    font-weight: 400;
}

.app-detail-page .comment-list-panel .comment-list .showMoreComment {
    width: 100%;
    height: 4.5rem;
    text-align: center;
    line-height: 4.5rem;
    font-size: 1.875rem;
    color: #FF553E;
    cursor: pointer;
    border-radius: 2.25rem;
    background-color: #FFF1F0;
    margin-top: 1.25rem;
}

.feedback-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.feedback-popup .overlay {
    background: #00000099;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.feedback-popup .feedback-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-radius: 0.625rem;
}

.feedback-popup .feedback-wrap .popupTitle {
    margin-top: 0.5rem;
    height: 4rem;
    width: 100%;
    text-align: center;
    line-height: 4rem;
    border-radius: 0.625rem 0.625rem 0 0;
    font-size: 2.5rem;
    color: #17183A;
    font-weight: bold;
    position: relative;
}

.feedback-popup .feedback-wrap .popupTitle span {
    position: relative;
    width: fit-content;
    display: block;
    text-align: center;
    margin: 0 auto;
    z-index: 1;
}

.feedback-popup .feedback-wrap .feedback-inner {
    background: #ffffff;
    border-radius: 0.625rem;
    position: relative;
    z-index: 1;
    padding: 0 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.75rem;
}

.feedback-popup .feedback-wrap .feedback-inner .feed-sec {
    display: flex;
    flex-direction: column;
    row-gap: 0.75rem;
}

.feedback-popup .feedback-wrap .feedback-inner .feed-sec .innerTitle {
    font-size: 1.75rem;
    color: #484846;
    text-align: left;
    position: relative;
    padding-left: 1.5rem;
}

.feedback-popup .feedback-wrap .feedback-inner .feed-sec .innerTitle::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 0.5rem;
    height: 1.5rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
}

.feedback-popup .feedback-wrap .feedback-inner .type-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 1rem;
}

.feedback-popup .feedback-wrap .feedback-inner .type-list .feedback-reason {
    width: calc(50% - 0.5rem);
    height: 3rem;
    text-align: center;
    padding: 0 0.25rem;
    line-height: 3rem;
    border-radius: 0.625rem;
    background-color: #F4F4F4;
    font-size: 1.5rem;
    color: #17183A;
    cursor: pointer;
    border: 1px solid transparent;
}

.feedback-popup .feedback-wrap .feedback-inner .type-list .feedback-reason.selected {
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    color: #ffffff;
}

.feedback-popup .feedback-wrap .feedback-inner .fieldWrap textarea {
    width: 100%;
    height: 6.25rem;
    padding: 1rem 1.25rem;
    border-radius: 0.625rem;
    background-color: #F4F4F4;
    font-size: 1.25rem;
    color: #000000;
    border: none;
    outline: none;
    resize: none;
}

.feedback-popup .feedback-wrap .feedback-inner .fieldWrap textarea::placeholder {
    color: #A3A3A3;
}

.feedback-popup .feedback-wrap .feedback-inner .feedback-contact input {
    width: 100%;
    height: 3rem;
    border: none;
    outline: none;
    border-radius: 0.625rem;
    line-height: 3rem;
    padding: 1rem 1.25rem;
    background-color: #F4F4F4;
    font-size: 1.25rem;
    color: #000000;
}

.feedback-popup .feedback-wrap .feedback-inner .feedback-contact input::placeholder {
    color: #A3A3A3;
}

.feedback-popup .feedback-wrap .feedback-inner .submitFeedback {
    width: 100%;
    height: 5rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    line-height: 5rem;
    border-radius: 2.813rem;
    text-align: center;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
}

.feedback-popup .feedback-wrap .close-button {
    position: absolute;
    width: 5rem;
    height: 5rem;
    background: #cccccc;
    border-radius: 50%;
    text-align: center;
    line-height: 5rem;
    font-size: 3.5rem;
    color: #ffffff;
    z-index: 1;
    cursor: pointer;
    bottom: -6rem;
    left: 50%;
    transform: translateX(-50%);
}

.app-perimission-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.app-perimission-popup .overlay {
    background: #00000099;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.app-perimission-popup .app-perimission-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-radius: 0.625rem;
}

.app-perimission-popup .app-perimission-wrap .popupTitle {
    margin-top: 0.5rem;
    height: 4rem;
    width: 100%;
    text-align: center;
    line-height: 4rem;
    border-radius: 0.625rem 0.625rem 0 0;
    font-size: 2.5rem;
    color: #17183A;
    font-weight: bold;
    position: relative;
}

.app-perimission-popup .app-perimission-wrap .popupTitle span {
    position: relative;
    width: fit-content;
    display: block;
    text-align: center;
    margin: 0 auto;
    z-index: 1;
}

.app-perimission-popup .app-perimission-wrap .permission-wrap {
    padding: 0 1.25rem 2rem;
    background: #ffffff;
    border-radius: 0.625rem;
    position: relative;
    z-index: 1;
}

.app-perimission-popup .app-perimission-wrap .permission-content {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    max-height: 50vh;
    overflow-y: scroll;
    padding-right: 2rem;
}

.app-perimission-popup .app-perimission-wrap .permission-content .pop-title {
    font-size: 1.5rem;
    line-height: 2rem;
    color: #3D3D3D;
    font-weight: 500;
    text-align: left;
}

.app-perimission-popup .app-perimission-wrap .permission-content .popInnerTitle {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.875rem;
    color: #333333;
    text-align: left;
}

.app-perimission-popup .app-perimission-wrap .permission-content span {
    font-size: 1.25rem;
    line-height: 1.875rem;
    color: #333333;
    text-align: left;
}

.app-perimission-popup .app-perimission-wrap .confirmBtn {
    width: calc(100% - 3.75rem);
    height: 5rem;
    margin: 1.25rem auto 1.875rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    line-height: 5rem;
    border-radius: 2.813rem;
    text-align: center;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
}

.app-perimission-popup .app-perimission-wrap .close-button {
    position: absolute;
    width: 5rem;
    height: 5rem;
    background: #cccccc;
    border-radius: 50%;
    text-align: center;
    line-height: 5rem;
    font-size: 3.5rem;
    color: #ffffff;
    z-index: 1;
    cursor: pointer;
    bottom: -6rem;
    left: 50%;
    transform: translateX(-50%);
}

.app-perimission-popup .app-perimission-wrap .permission-content::-webkit-scrollbar {
    width: 0.75rem;
}

.app-perimission-popup .app-perimission-wrap .permission-content::-webkit-scrollbar-thumb {
    background-color: #D9D9D9;
    border-radius: 2.813rem;
}

.app-perimission-popup .app-perimission-wrap .permission-content::-webkit-scrollbar-track {
    background-color: #ffffff;
    border-radius: 2.813rem;
}

.privacy-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.privacy-popup .overlay {
    background: #00000099;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.privacy-popup .privacy-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-radius: 0.625rem;
}

.privacy-popup .privacy-wrap .popupTitle {
    margin-top: 0.5rem;
    height: 4rem;
    width: 100%;
    text-align: center;
    line-height: 4rem;
    border-radius: 0.625rem 0.625rem 0 0;
    font-size: 2.5rem;
    color: #17183A;
    font-weight: bold;
    position: relative;
}

.privacy-popup .privacy-wrap .popupTitle span {
    position: relative;
    width: fit-content;
    display: block;
    text-align: center;
    margin: 0 auto;
    z-index: 1;
}

.privacy-popup .privacy-wrap .privacy-content-wrap {
    padding: 0 1.25rem 2rem;
    background: #ffffff;
    border-radius: 0.625rem;
    position: relative;
    z-index: 1;
}

.privacy-popup .privacy-wrap .privacy-content {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    max-height: 50vh;
    overflow-y: scroll;
    padding-right: 2rem;
}

.privacy-popup .privacy-wrap .privacy-content .popInnerTitle {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.875rem;
    color: #333333;
    text-align: left;
}

.privacy-popup .privacy-wrap .privacy-content span {
    font-size: 1.25rem;
    line-height: 1.875rem;
    color: #333333;
    text-align: left;
}

.privacy-popup .privacy-wrap .confirmBtn {
    width: calc(100% - 3.75rem);
    height: 5rem;
    margin: 1.25rem auto 1.875rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    line-height: 5rem;
    border-radius: 2.813rem;
    text-align: center;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
}

.privacy-popup .privacy-wrap .close-button {
    position: absolute;
    width: 5rem;
    height: 5rem;
    background: #cccccc;
    border-radius: 50%;
    text-align: center;
    line-height: 5rem;
    font-size: 3.5rem;
    color: #ffffff;
    z-index: 1;
    cursor: pointer;
    bottom: -6rem;
    left: 50%;
    transform: translateX(-50%);
}

.privacy-popup .privacy-wrap .privacy-content::-webkit-scrollbar {
    width: 0.75rem;
}

.privacy-popup .privacy-wrap .privacy-content::-webkit-scrollbar-thumb {
    background-color: #D9D9D9;
    border-radius: 2.813rem;
}

.privacy-popup .privacy-wrap .privacy-content::-webkit-scrollbar-track {
    background-color: #ffffff;
    border-radius: 2.813rem;
}


#modalImage {
    transition: opacity 0.3s ease;
    opacity: 1;
}

#modalImage.fade-out {
    opacity: 0;
}

#imageModal.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

#imageModal .overlay {
    background: #393939D9;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#imageModal.modal .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#imageModal.modal .swiper {
    position: absolute;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

#imageModal.modal .swiper-slide img {
    max-width: 70%;
    max-height: 60%;
    object-fit: contain;
    height: auto;
    width: auto;
    border-radius: 0.625rem;
}

#imageModal .close {
    cursor: pointer;
    font-size: 3rem;
    color: #ffffff;
    z-index: 1;
    font-weight: bold;
}

#imageModal .modalHeader {
    position: absolute;
    top: 4rem;
    right: 4rem;
    z-index: 10;
}

#imageModal .pageNumber {
    margin-top: 2rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    padding: 0 1.25rem;
    border: 1px solid #ffffff;
    border-radius: 2.813rem;
    font-size: 1.75rem;
    color: #FFFFFF;
    width: fit-content;
    margin: 2rem auto 0;
}

#imageModal .modal-swiper-prev,
#imageModal .modal-swiper-next {
    position: absolute;
    top: 47%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    cursor: pointer;
    width: 4rem;
    height: 4rem;
    border: none;
    border-radius: 50%;
    z-index: 99;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}

#imageModal .modal-swiper-prev i {
    width: 0.875rem;
    height: 0.875rem;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    transform: rotate(-135deg);
    margin-right: -0.315rem;
}

#imageModal .modal-swiper-next i {
    width: 0.875rem;
    height: 0.875rem;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    transform: rotate(45deg);
    margin-left: -0.315rem;
}

#imageModal .swiper-button-disabled i {
    opacity: 0.4;
}

#imageModal .modal-swiper-prev {
    left: max(calc(50% - 21.563rem), 1.5rem);
}

#imageModal .modal-swiper-next {
    right: max(calc(50% - 21.563rem), 1.5rem);
}

#imageModal::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(43.125rem, 100%);
    inset: 0;
    pointer-events: none;
}

#imageModal .swiper-wrapper {
    align-items: center;
}

.appointment-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.appointment-popup .overlay {
    background: #00000099;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.appointment-popup .appointment-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-radius: 0.625rem;
}

.appointment-popup .appointment-wrap .popupTitle {
    margin-top: 1rem;
    height: 4rem;
    width: 100%;
    text-align: center;
    line-height: 4rem;
    border-radius: 0.625rem 0.625rem 0 0;
    font-size: 2.5rem;
    color: #17183A;
    font-weight: bold;
    position: relative;
}

.appointment-popup .appointment-wrap .popupTitle span {
    position: relative;
    width: fit-content;
    display: block;
    text-align: center;
    margin: 0 auto;
    z-index: 1;
}

.appointment-popup .appointment-wrap .appointment-inner {
    background: #ffffff;
    border-radius: 0.625rem;
    position: relative;
    z-index: 1;
    padding: 0 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    margin-top: 1rem;
}

.appointment-popup .appointment-wrap .appointment-inner .submitAppointment {
    width: 100%;
    height: 5rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    line-height: 5rem;
    border-radius: 2.813rem;
    text-align: center;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
    margin-top: 1rem;
}

.appointment-popup .appointment-wrap .close-button {
    position: absolute;
    width: 5rem;
    height: 5rem;
    background: #cccccc;
    border-radius: 50%;
    text-align: center;
    line-height: 5rem;
    font-size: 3.5rem;
    color: #ffffff;
    z-index: 1;
    cursor: pointer;
    bottom: -6rem;
    left: 50%;
    transform: translateX(-50%);
}

.appointment-popup .appointment-wrap .appointment-inner .appoint-field input {
    width: 100%;
    height: 3rem;
    border: none;
    outline: none;
    border-radius: 0.625rem;
    line-height: 3rem;
    padding: 1rem 1.25rem;
    background-color: #F4F4F4;
    font-size: 1.25rem;
    color: #000000;
}

.appointment-popup .appointment-wrap .appointment-inner .appoint-field input::placeholder {
    color: #A3A3A3;
}

.appointment-popup .appointment-wrap .appointment-inner>.reminder {
    font-size: 1.75rem;
    color: #17183A;
}

.appointment-popup .appointment-wrap .appointment-inner>.reminder em {
    font-style: normal;
    color: #140402;
}

.appointment-popup .appointment-wrap .appointment-inner>span {
    font-size: 1.5rem;
    color: #999999;
}

.appointment-popup .appointment-wrap .appointment-inner .msg {
    font-size: 1.25rem;
    text-align: left;
    color: red;
    margin-top: 0.5rem;
    width: 100%;
    display: block;
}

.appointment-popup .appointment-wrap .appoint-success {
    display: none;
    flex-direction: column;
    row-gap: 0.5rem;
    padding: 0 1.25rem 2rem;
    margin-top: 1rem;
}

.appointment-popup .appointment-wrap .appoint-success>.icon {
    width: 5rem;
    height: 5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/tickIcon.png);
    margin: 0 auto;
}

.appointment-popup .appointment-wrap .appoint-success strong {
    width: 100%;
    text-align: center;
    color: #140402;
    font-size: 1.875rem;
}

.appointment-popup .appointment-wrap .appoint-success .closePopup {
    width: 100%;
    height: 5rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    line-height: 5rem;
    border-radius: 2.813rem;
    text-align: center;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
    margin-top: 1rem;
}

.appointment-popup .appointment-wrap .appoint-repeat {
    display: none;
    flex-direction: column;
    row-gap: 0.5rem;
    padding: 0 1.25rem 2rem;
    margin-top: 1rem;
}

.appointment-popup .appointment-wrap .appoint-repeat>.icon {
    width: 5rem;
    height: 5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/dupAppointIcon.png);
    margin: 0 auto;
}

.appointment-popup .appointment-wrap .appoint-repeat strong {
    width: 100%;
    text-align: center;
    color: #140402;
    font-size: 1.875rem;
}

.appointment-popup .appointment-wrap .appoint-repeat .closePopup {
    width: 100%;
    height: 5rem;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    line-height: 5rem;
    border-radius: 2.813rem;
    text-align: center;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
    margin-top: 1rem;
}