body {
    background: #aa2821;
}

button {
    font: inherit;
}

.july-special {
    background: #aa2821;
    overflow: hidden;
}

.july-special__hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.july-special__hero img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
}

.july-special__content {
    width: min(100%, 1186px);
    margin: 0 auto;
    padding: 105px 0 153px;
}

.july-panel {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    --card-width: calc(332 / 1186 * 100%);
}

.july-panel + .july-panel {
    margin-top: 46px;
}

.july-panel--deploy {
    aspect-ratio: 1186 / 583;
    background-image: url("../img/julyspecial/deploy-panel.png");
    --card-top: calc(200 / 583 * 100%);
    --card-height: calc(292 / 583 * 100%);
}

.july-panel--member {
    aspect-ratio: 1186 / 546;
    background-image: url("../img/julyspecial/member-panel.png");
    --card-top: calc(172 / 546 * 100%);
    --card-height: calc(292 / 546 * 100%);
}

.july-panel--combo {
    aspect-ratio: 1186 / 546;
    background-image: url("../img/julyspecial/combo-panel.png");
    --card-top: calc(166.5 / 546 * 100%);
    --card-height: calc(292 / 546 * 100%);
}

.july-panel--device {
    aspect-ratio: 1186 / 570;
    background-image: url("../img/julyspecial/device-panel.png");
    --card-top: calc(169.5 / 570 * 100%);
    --card-height: calc(314 / 570 * 100%);
}

.july-panel__copy {
    position: absolute;
    top: calc(149.5 / 583 * 100%);
    left: calc(232.5 / 1186 * 100%);
    width: calc(717 / 1186 * 100%);
    margin: 0;
    color: #fff;
    font-size: clamp(12px, 1.95vw, 23px);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.july-panel__card {
    position: absolute;
    top: var(--card-top);
    width: var(--card-width);
    height: var(--card-height);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.july-panel__card--1 {
    left: calc(68 / 1186 * 100%);
}

.july-panel__card--2 {
    left: calc(427 / 1186 * 100%);
}

.july-panel__card--3 {
    left: calc(786 / 1186 * 100%);
}

.july-panel__card img {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
}

.modal-box-content {
    display: flex;
    flex-direction: column;
    height: 620px;
}

.modal-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 70px;
    padding: 0 15px;
    color: #fff;
    background: linear-gradient(180deg, #191919 0%, #535353 99%);
}

.modal-box-title {
    font-size: 18px;
}

.modal-tabcon {
    display: flex;
    height: 30px;
    overflow: hidden;
    line-height: 30px;
    color: #191919;
    background: #fff;
    border-radius: 5px;
}

.modal-tabcon p {
    padding: 0 10px;
    margin: 0;
    cursor: pointer;
    text-align: center;
}

.modal-tabcon p.active {
    color: #fff;
    background: #286efa;
}

.closeiconchahao {
    padding: 10px;
    cursor: pointer;
}

.modal-box-body {
    flex: 1;
}

.modal-box-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 80px;
    margin: 0 15px;
    border-top: 1px solid #efefef;
}

.modal-box-footer__link {
    color: #286efa;
}

.centersubmitbtn {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
}

.canelmodal {
    color: #999;
    cursor: pointer;
}

.pricebox {
    display: flex;
    justify-content: space-between;
    padding: 20px 15px;
}

.priceitem {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: calc(33% - 10px);
    height: 120px;
    cursor: pointer;
    font-family: "Microsoft YaHei", sans-serif;
    background: linear-gradient(to bottom, #f8f8f8, #f8f8f8);
    border: 2px solid #efefef;
    border-radius: 5px;
}

.priceitem.active {
    border-color: #286efa;
}

.priceitem-time {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
}

.priceitem-num {
    font-size: 28px;
    color: #f36264;
}

.modal-pay-box {
    padding: 15px;
}

.modal-pay-box-tit {
    font-size: 18px;
}

.modal-pay-box-type {
    display: flex;
    margin-top: 15px;
}

.modal-pay-box-type > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 50px;
    margin-right: 15px;
    cursor: pointer;
    border: 1px solid #efefef;
    border-radius: 5px;
}

.modal-pay-box-type > div p {
    margin: 0 0 0 6px;
}

.modal-pay-box-type > div.active {
    background: #e9f0fe;
    border-color: #286efa;
}

.modal-pay-box-total {
    flex: 1;
    justify-content: flex-end !important;
    margin-right: 0 !important;
    border: 0 !important;
    cursor: default !important;
}

.yingfuprice {
    font-size: 22px;
    color: #f36264;
}

#modal-poup-box {
    position: relative;
    height: 616px;
    font-size: 16px !important;
}

.waiclose {
    position: absolute;
    top: 8px;
    right: 15px;
    color: #191919 !important;
}

.login_box {
    font-size: 16px !important;
}

@media screen and (max-width: 768px) {
    .july-special__content {
        width: calc(100% - 24px);
        padding: 40px 0 80px;
    }

    .july-panel + .july-panel {
        margin-top: 24px;
    }

    .july-panel__copy {
        font-size: clamp(10px, 1.8vw, 14px);
    }
}