.comPos {
    --comRevealProgress: 0;
    position: relative;
    font-family: OPPOSans;
    color: #fff;
    overflow: hidden;
}
.comPos > img,
.comPos > picture img {
    display: block;
    width: 100%;
    filter: brightness(calc(1 - (var(--comRevealProgress) * 0.65)));
    will-change: filter;
}
.comPosGrid {
    position: absolute;
    top: 15.88vw;
    left: 50%;
    transform: translate(-50%, calc(2.8vw * (1 - var(--comRevealProgress))));
    opacity: var(--comRevealProgress);
    display: grid;
    justify-items: center;
    grid-gap: 0.75vw;
    width: 100%;
    padding: 0 4vw;
    will-change: transform, opacity;
}
.comPosTit {
    font-size: 2.47vw;
    line-height: 2.47vw;
    font-weight: bold;
}
.comPosSub {
    text-align: center;
    font-weight: normal;
    font-size: 1.43vw;
    line-height: 1.63vw;
}
.comCon {
    position: relative;
    padding: 3.85vw 25vw 7.99vw;
    background-color: #fffef2;
    font-family: OPPOSans;
}
.comDecor06,
.comDecor07 {
    position: absolute;
    display: block;
    pointer-events: none;
}
.comDecor06 {
    top: 3.9vw;
    left: 0;
    width: 22.65vw;
}
.comDecor07 {
    right: 0;
    bottom: 13.8vw;
    width: 19.79vw;
}
.comRole {
    display: grid;
    justify-items: center;
    row-gap: 1.66vw;
}
.comRoleTitle {
    font-size: 3.12vw;
    line-height: 3.12vw;
    font-weight: bold;
    color: #eba047;
}
.comRoleSwitch {
    width: 100%;
}
.comRoleInput {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.comRoleBtns {
    display: flex;
    justify-content: center;
    gap: 1.06vw;
    padding: 0 4.03vw;
    width: 100%;
}
.comRoleBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.17vw;
    padding: 0.7vw 2.24vw;
    border-radius: 999px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    box-sizing: border-box;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.comRoleBtn img {
    width: 2.24vw;
    height: 2.24vw;
    object-fit: contain;
    flex-shrink: 0;
}
.comRoleBtn span {
    font-size: 1.56vw;
    line-height: 1.56vw;
    font-weight: bold;
    white-space: nowrap;
}
.comRoleBtnConsumer {
    background-image: url('/wp-content/uploads/2026/03/com_03.webp');
}
.comRoleBtnStore {
    background-image: url('/wp-content/uploads/2026/03/com_05.webp');
}
#comRoleConsumer:checked ~ .comRoleBtns .comRoleBtnConsumer,
#comRoleStore:checked ~ .comRoleBtns .comRoleBtnStore {
    opacity: 1;
}
.comPanels {
    margin-top: 2.03vw;
}
.comPanel {
    display: none;
}
#comRoleConsumer:checked ~ .comPanels .comPanelConsumer,
#comRoleStore:checked ~ .comPanels .comPanelStore {
    display: block;
}
.comForm {
    display: grid;
    row-gap: 1.92vw;
}
.comFormTitle {
    font-size: 1.56vw;
    line-height: 1.56vw;
    font-weight: bold;
    margin-bottom: 1.3vw;
}
.comField {
    display: grid;
    row-gap: 0.78vw;
}
.comField span {
    font-size: 1.04vw;
    line-height: 1.04vw;
    color: #707070;
    font-weight: 300;
}
.comField b {
    color: #ff4d30;
    font-weight: normal;
}
.comField input,
.comField select {
    width: 100%;
    height: 2.34vw;
    padding: 0 1.3vw;
    border: 0.05vw solid #9b9b9b;
    border-radius: 0.32vw;
    background-color: #fff;
    font-size: 1.06vw;
    color: #2a180d;
    box-sizing: border-box;
}
.comInputWithBtn {
    display: grid;
    grid-template-columns: 1fr 16.3vw;
    gap: 0.62vw;
}
.comVerifyBtn {
    border: none;
    border-radius: 0.32vw;
    color: #fff;
    font-size: 1.04vw;
    line-height: 1.04vw;
    font-weight: bold;
    cursor: pointer;
}
#comRoleConsumer:checked ~ .comPanels .comPanelConsumer .comVerifyBtn {
    background: #e9c147;
}
#comRoleStore:checked ~ .comPanels .comPanelStore .comVerifyBtn {
    background: #57ddd0;
}
.comVerifyBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.comSubmit {
    width: 100%;
    border: none;
    border-radius: 0.32vw;
    background-color: #57ddd0;
    font-size: 1.44vw;
    line-height: 1.44vw;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}
.comSubmit:hover, .comVerifyBtn:hover {
    color: #fff !important;
}
#comRoleConsumer:checked ~ .comPanels .comPanelConsumer .comSubmit {
    background-color: #e9c147;
}
.comTips {
    font-size: 1.3vw;
    line-height: 1.3vw;
    color: #261606;
    font-weight: 300;
    margin: 1.66vw 0 0.18vw 0;
}
.comTips img {
    width: 0.93vw;
}
.comSuccessCode {
    position: absolute;
    right: 11.04vw;
    bottom: 7.99vw;
    width: 10.41vw;
    display: block;
    z-index: 2;
}

@media (max-width: 768px) {
    .comPosGrid {
        top: 24vw;
        grid-gap: 2.4vw;
        padding: 0 6vw;
    }
    .comPosTit {
        font-size: 7.2vw;
        line-height: 1.2;
        text-align: center;
    }
    .comPosSub {
        font-size: 3.8vw;
        line-height: 1.45;
    }
    .comCon {
        padding: 8vw 4.5vw 14vw;
    }
    .comDecor06,
    .comDecor07 {
        display: none;
    }
    .comRole {
        row-gap: 4vw;
    }
    .comRoleTitle {
        font-size: 8vw;
        line-height: 1.1;
    }
    .comRoleBtns {
        flex-direction: column;
        gap: 2.6vw;
        padding: 0;
    }
    .comRoleBtn {
        width: 100%;
        padding: 2.8vw 4vw;
    }
    .comRoleBtn img {
        width: 6.2vw;
        height: 6.2vw;
    }
    .comRoleBtn span {
        font-size: 4.6vw;
        line-height: 1.2;
    }
    .comPanels {
        margin-top: 5vw;
    }
    .comForm {
        row-gap: 4.2vw;
    }
    .comFormTitle {
        font-size: 5.8vw;
        line-height: 1.2;
        margin-bottom: 3.5vw;
    }
    .comField {
        row-gap: 1.8vw;
    }
    .comField span {
        font-size: 4.2vw;
        line-height: 1.2;
    }
    .comField input,
    .comField select {
        height: 9vw;
        padding: 0 3.5vw;
        border-radius: 1.4vw;
        border-width: 1px;
        font-size: 4vw;
    }
    .comInputWithBtn {
        grid-template-columns: 1fr 28vw;
        gap: 2vw;
    }
    .comVerifyBtn {
        border-radius: 1.4vw;
        font-size: 3.6vw;
        line-height: 3.6vw;
    }
    .comSubmit {
        border-radius: 1.4vw;
        font-size: 6vw;
        line-height: 1.1;
        padding: 2.6vw 0;
        margin-top: 1vw;
    }
    .comTips {
        font-size: 5vw;
        line-height: 1.35;
        margin: 4vw 0 2vw 0;
    }
    .comSuccessCode {
        position: static;
        display: block;
        width: 28vw;
        margin: 5vw auto 0;
    }
    .comAutoDropdown {
        max-height: 45vh;
    }
    .comTips img {
        width: 3.93vw;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .comPosGrid {
        top: 18vw;
        padding: 0 6vw;
    }
    .comPosTit {
        font-size: 4vw;
        line-height: 1.15;
    }
    .comPosSub {
        font-size: 2.2vw;
        line-height: 1.45;
    }
    .comCon {
        padding: 6vw 8vw 10vw;
    }
    .comDecor06 {
        width: 28vw;
    }
    .comDecor07 {
        width: 24vw;
        bottom: 16vw;
    }
    .comRole {
        position: relative;
        z-index: 2;
    }
    .comDecor06,
    .comDecor07 {
        z-index: 1;
    }
    .comRoleTitle {
        font-size: 5vw;
        line-height: 1.1;
    }
    .comRoleBtns {
        gap: 2vw;
        padding: 0;
    }
    .comRoleBtn {
        padding: 1.2vw 3vw;
    }
    .comRoleBtn img {
        width: 3.6vw;
        height: 3.6vw;
    }
    .comRoleBtn span {
        font-size: 2.8vw;
        line-height: 1.2;
    }
    .comPanels {
        margin-top: 3.5vw;
    }
    .comForm {
        row-gap: 2.8vw;
    }
    .comFormTitle {
        font-size: 3.2vw;
        line-height: 1.2;
        margin-bottom: 2.4vw;
    }
    .comField span {
        font-size: 2.2vw;
        line-height: 1.2;
    }
    .comField input,
    .comField select {
        height: 5.8vw;
        padding: 0 2.2vw;
        border-radius: 0.8vw;
        font-size: 2.2vw;
    }
    .comInputWithBtn {
        grid-template-columns: 1fr 22vw;
        gap: 1.2vw;
    }
    .comVerifyBtn {
        font-size: 2.4vw;
        line-height: 2.4vw;
    }
    .comSubmit {
        font-size: 3.2vw;
        line-height: 1.2;
        padding: 1.4vw 0;
    }
    .comTips {
        font-size: 2.4vw;
        line-height: 1.35;
        margin: 2.6vw 0 1vw 0;
    }
    .comSuccessCode {
        position: static;
        display: block;
        width: 16vw;
        margin: 3.5vw auto 0;
    }
    .comAutoDropdown {
        max-height: 36vh;
    }
    .comTips img {
        width: 1.93vw;
    }
}