/* Extradiv start */
.extraBox{
    width: 265px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.extraBox:nth-child(2n-1){
    padding-right: 30px;
}
.extraBox:nth-child(2n){
    padding-left: 30px;
    border-left: 1px solid #D3D3D3;
}
.extraImg img{
    width: 64px;
}
.extraItem{
    max-width: 150px;
}
.theme .extraBox .extraItem div{
    font-weight: var(--typography-fontFamilyBodyMixWeight);
}
.extraRedText{
    color: #f00;
}
.theme .handsetPhoneBox .extraSubText{
    color: var(--palette-grey-80);
    font-weight: var(--typography-fontFamilyBodyMixWeight);
}
.extraRedText, .extraSubText{
    font-size: 16px !important;
}
@media (max-width:1024px){
    .extraBox{
        width: 146px;
        flex-wrap: wrap;
    }
}
@media (max-width:767px){
    .extraImg img{
        width: 50px;
    }
    .extraRedText, .extraSubText{
        font-size: 14px !important;
    }
}
/* Extradiv end */

/* Giftdiv start */
.giftConatiner{
    display: flex;
    width: 390px;
    padding: 20px;
    flex-wrap: wrap;
    border: 1px solid #D3D3D3;
    border-radius: 20px;
}
.giftTop{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    position: relative;
}
.giftTop div{
    width: 100%;
    color: #000;
    text-align: center;
    padding-bottom: 9px;
}
.giftTop div::after{
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    border-radius: 5px;
    position: absolute;
    transform: translate(-50%, -50%);
    bottom: 0;
    left: 50%;
    background-color: red;
}
.giftTop img{
    width: 40px;
    height: 40px;
}
.giftItemContainer{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.giftConatiner .giftItem{
    display: flex;
    gap: 20px;
    align-items: center;
}
.giftItemText{
    display: flex;
    flex-wrap: wrap;
}
.giftItemContainer .giftItem .giftItemText div{
    width: 100%;
    font-weight: var(--typography-fontFamilyBodyMixWeight);
}
.giftConatiner .giftItem img{
    height: 40px;
}
@media (max-width:767px){
    .giftConatiner{
        width: 250px;
        padding: 10px 10px;
        /* margin-top: 20px; */
    }
    .giftItemContainer{
        gap: 12px;
    }
    .giftTop img{
        width: 30px;
    }
}
/* Giftdiv end */

/* Handsetphonediv start */
.handsetPhoneContainer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #D3D3D3;
    max-width: 1200px;
    margin: auto;
    gap: 50px;
    padding:40px;
}
.handsetPhoneImg img{
    width: 200px;
}
.handsetPhoneBox{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 16px;
    width: 560px;
}
.handsetPhoneBox .extraSubText{
    margin-bottom: 5px;
}
.theme .handsetPhoneContainer .priceFont, .theme .handsetPhoneName{
    font-family: var(--typography-fontFamilyHeaderMix) !important;
    font-weight: var(--typography-fontFamilyHeaderMixWeight) !important;
}
.saveMoney{
    margin-left: 10px;
}
.speciFicationConatiner{
    display: flex;
}
.handsetPhoneBox .speciFicationConatiner div{
    border: 1px solid #C8C8C8;
    border-right: 0;
    padding: 9px 15px;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -1px;
}
.speciFicationConatiner div:last-child{
    border-right: 1px solid #C8C8C8;
    border-radius: 0 12px 12px 0;
}
.speciFicationConatiner div:first-child{
    border-radius: 12px 0 0 12px;
}
.selectActive{
    border: 1px solid #f00 !important;
    color: #f00;
    z-index: 9;
}
.theme .speciFicationConatiner div span{
    font-family: var(--typography-fontFamilyBodyMix);
    font-weight: var(--typography-fontFamilyBodyMixWeight);
}
.buttonContainer{
    display: flex;
    gap: 10px;
    /* max-width: 550px; */
    flex-wrap: wrap;
}
.buttonContainer button{
    width: auto;
    min-width: 250px !important;
}
.theme .isWsaBtn div button img{
    width: 24px;
    margin-right: 15px;
}
.theme[lang=en-US] .enShow, .theme[lang=zh-HK] .chShow{
    display: unset;
}
.theme[lang=zh-HK] .enShow, .theme[lang=en-US] .chShow{
    display: none;
}
.display_dk{
    display: block;
}
.display_mb{
    display: none;
}
@media (max-width:1024px) {
    .speciFicationConatiner{
        min-width: 420px;
    }
    .moreThanFourContainer{
        max-width: 400px;
    }
}
@media (max-width:767px) {
    .display_dk{
        display: none;
    }
    .display_mb{
        display: block;
    }
    .handsetPhoneContainer{
        flex-direction: column;
        padding: 0px;
        gap: 13px;
        margin-bottom: 50px;
    }
    .handsetPhoneImg{
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .handsetPhoneImg img{
        width: auto;
        max-width: 200px;
    }
    .handsetPhoneBox{
        width: auto;
    }
    .handsetPhoneName{
        width: 100%;
        margin-top: 12px;
    }
    .speciFicationConatiner{
        min-width: auto;
    }
    .moreThanFourContainer{
        flex-wrap: wrap;
        border-radius: 12px;
        /* overflow: hidden; */
        /* border: 1px solid #C8C8C8; */
    }
    .theme .moreThanFourContainer .moreThanFour{
        border-radius: 0;
        padding: 9px 15px;
        width: 166px;
    }
    .speciFicationConatiner div{
        width: 112px;
        box-sizing: border-box;
        margin-bottom: -1px;
    }
    .moreThanFourContainer .moreThanFour:nth-child(1){
        border-radius: 12px 0 0 0;
    }
    .moreThanFourContainer .moreThanFour:nth-child(2){
        border-radius: 0 12px 0 0;
        border-right: 1px solid #C8C8C8;
    }
    .moreThanFourContainer .moreThanFour:nth-child(3){
        border-radius: 0 0 0 12px;
    }
    .moreThanFourContainer .moreThanFour:nth-child(4){
        border-radius: 0 0 12px 0;
    }
    .theme .moreThanFourContainer div{
        width: 134px;
    }
    .selectOfferOption div{
        padding: 5px;
    }
    .buttonContainer{
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        margin: auto;
    }
    .handsetPhoneBox .buttonContainer .button{
        width: 335px;
    }
}
/* Handsetphonediv end */

/* Handsetphonediv_v1 start */
.singleTab{
    border: 0 !important;
    padding: 0px 15px 0 0 !important;
    color: black !important;
    cursor: auto !important;
}
@media (max-width:767px) {
    .singleTab{
        justify-content: flex-start !important;
    }
    .theme[lang=zh-HK] .oneLineHeight{
        height: 60px !important;
    }
    .theme[lang="en-US"] .oneLineHeight{
        height: 70px !important;
    }
}
/* Handsetphonediv_v1 end */

/* Plancard start */
.swiperContainer{
    position: relative;
}
.cardExtraContainer{
    margin: 0 -20px;
    border-radius: 20px 20px 0px 0px;
    border: 2px solid var(--Color-Yellow, #FFB100);
    background: linear-gradient(0deg, rgba(255, 177, 0, 0.15) 0%, rgba(255, 177, 0, 0.15) 100%), #FFF;
    box-shadow: 0px 2px 8px 0px rgba(255, 177, 0, 0.60);
    position: relative;
}
.disneyCardExtraContainer{
    border: 0px;
    background: none;
    box-shadow: none;
    border-radius: 21px 21px 0px 0px;
    margin: 0 -21px;
    position: relative;
}
.extraDescBox{
    border-radius: 20px;
    background-color: red;
    color: white;
    position: absolute;
    top: 0px;
    left: 20px;
    padding: 6px 10px;
    z-index: 999;
}
.extraDescText{
    padding: 16px 10px 12px;
    text-align: center;
    display: flex;
}
.theme .cardExtraContainer .extraDescText span{
    font-family: var(--typography-fontFamilyHeaderMix) !important;
    font-weight: var(--typography-fontFamilyHeaderMixWeight) !important;
}
.cardContainer{
    background: #F6F6F6;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.cardBox{
    width: 360px;
    padding: 0 20px;
    padding-bottom: 20px;
    background: white;
    border-radius: 20px;
    margin: 20px 0 40px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
}
.disneycardBox{
    border-radius: 23px;
    border: 3px solid #019FDB;
    box-shadow: 0px 0px 10px 0px rgba(1, 159, 219, 0.80);
}
.cardHeader{
    padding: 12px 0px;
}
.price_container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cardGrade img{
    width: 80px;
    height: 51px;
}
.price_number{
    font-size: 40px;
}
.selectPlanContainer{
    display: flex;
    gap:8px;
    flex-wrap: wrap;
    margin: 6px auto 12px auto;
}
.theme .selectPlanItem .detailSubDesc{
    font-size: 12px;
}
.selectPlanBox{
    border-radius: 12px;
    border: 1.5px solid var(--palette-grey-80);
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
.selectPlanItem div{
    width: 100%;
}
.planItemBox{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
}
.selectPlanPlace{
    text-align: left;
}
.theme .planItemBox .selectPlanPlace .h7{
    font-family: var(--typography-fontFamilyBodyMix);
}
.selectPlanItem{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    height: 54px;
    padding: 0 20px;
    box-sizing: border-box;
}
.theme .selectPlanItem .h7{
    text-align: right;
    width: 70%;
    font-family: Titling-Gothic-FB-Condensed;
    font-weight: 500;
}
.theme[lang=en-US] .selectPlanItem{
    height: 72px;
}
.selectPlanBoxActive{
    color: var(--palette-primary-main);
    border: 1.5px solid var(--palette-primary-main);
}
.offerContainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.offerContainer .line{
    width: 70%;
}
.theme[lang="en-US"] .offerContainer .line{
    width: 50%;
}
.free_service{
    display: flex;
    margin: 6px auto;
    align-items: center;
}
.free_service .free_cricle{
    width: 32px;
    height: 32px;
    margin-right: 6px;
}
.offerDesc{
    margin-top: 12px;
    height: 21px;
}
.line{
    background:var(--palette-grey-50);
    height: 1px;
}
.dataContainer{
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    border-radius: 12px;
    border: 1px solid #F5E8B7;
    padding: 8px;
    gap:8px;
    background: linear-gradient(90deg, rgba(255, 208, 78, 0.20) 44.44%, rgba(255, 219, 128, 0.20) 86.7%), #FFF;
    box-shadow: 0px 0px 12px 0px #F1C03A;
}
.theme[lang=zh-HK] .dataContainer{
    width: 230px;
}
.theme[lang="en-US"] .dataContainer{
    width: 270px;
}
.dataBox{
    border-radius: 6px;
    background: var(--palette-primary-main);
    padding: 2px 8px;
    width: 46px;
    height: 28px;
    color: white;
}
.giftContainer{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.smartPassContainer{
    position: relative;
    max-width: 1700px;
    margin: auto;
}
.smartPassContainer .giftContainer{
    width: 320px;
}

.cardContainer .giftItem{
    display: flex;
    gap: 8px;
}
.whatsappContainer{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: end;
}
.whatsappBtn{
    width: 100%;
}
.textCenter{
    text-align: center;
}
.normalPlanSwiper{
    position: relative;
}
.vanSwiperContainer{
    margin: auto;
    position: relative;
    overflow: hidden;
}
.van-swipe__track{
    height: auto;
}
.van-swipe{
    cursor: auto;
    user-select: auto;
    overflow: unset;
}
.popupContent{
    width: 360px;
    text-align: center;
    margin-bottom: 10px;
}
.popupIcon{
    margin-left: 4px;
    cursor: pointer;
}
.hotPick{
    position: absolute;
    left: 12px;
    border-radius: 8px 8px 8px 0;
    color: white;
    background: red;
    padding:4px 12px;
}
.giftText{
    display: flex;
    justify-content: center;
    gap: 12px;
}
.whatsappBtnConatiner{
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-bottom: 40px;
    background-color: white;
}
.whatsappBtn img{
    height: 24px;
    width: 24px;
}
.whatsappBtnConatiner .whatsappBtn{
    width: 250px;
}
.whatsappBtnConatiner .whatsappBtn button{
    width: 250px;
    display: flex;
    gap: 15px;
}
.theme .price_container span, .theme .price_container .dollarSymbol{
    font-family: var(--typography-fontFamilyHeaderMix) !important;
    font-weight: var(--typography-fontFamilyHeaderMixWeight) !important;
}
.selectPlanBoxActive .planBoxTitle{
    background-color: red;
}
.planBoxTitle{
    width: 100%;
    border-radius: 10.5px 10.5px 0 0;
    background-color: #9C9C9C;
    color: white;
    padding: 4px 0;
}
.theme[lang=zh-HK] .normalPlanBox .cardBox{
    height: 470px;
}
.theme[lang=en-US] .normalPlanBox .cardBox{
    height: 500px;
}
.localBox{
    display: flex;			
    align-items: center;
    color: black;
}
.localDataContainer{
    display: flex;
    align-items: center;
}
.localDataContainer img:nth-child(1){
    margin-right: 8px;
    margin-bottom: 2px;
    width: 25px;
    height: 28px;
}
.localDataContainer .p4{
    margin-left: 8px;
}
.localDataContainer div{
    margin-bottom: 0 !important;
}
.localDataBox{
    display: flex;
    align-items: baseline;
}
.theme .localDataBox .h5 span{
    font-family: var(--typography-fontFamilyHeaderMix);
    font-weight: var(--typography-fontFamilyHeaderMixWeight);
}
.monthContract{
    margin: 0px auto 12px;
}
.freeBox{
    display: flex;
    gap: 8px;
    align-items: center;
}
.freeBox span, .voucherBox span{
    font-family: var(--typography-fontFamilyHeaderMix) !important;
}
.voucherBox{
    padding-top: 8px;
    border-top: 1px solid #E1D29F;
}
.isSSPText{
    color: var(--palette-primary-main);
}
.whatsappContent{
    background: white;
    text-align: center;
    padding-bottom: 20px;
}
.priceFont{
    font-family: var(--typography-fontFamilyHeaderMix) !important;
    font-weight: var(--typography-fontFamilyHeaderMixWeight) !important;
}
.theme .cardContainer .button{
    width: 100%;
}
.freeExtraTextBox{
    border-radius: 8px;
    background: #EA3323;
    color: white;
    height: 38px;
    padding: 6px;
}
.subscribeNowBtn{
    margin-top: 20px;
}
.planCardWhatsappBtn{
    width: 24px;
    display: block;
    margin-right: 12px;
}
.theme[lang=zh-HK] .h9.detailPlace,.theme[lang=en-US] .h9 {
    font-size: 16px
}
.theme[lang=zh-HK] .localDataBox .h7 span{
    font-family: "titling-gothic-fb-condensed", "sans-serif", '"Helvetica Neue"', "Arial", "sans-serif", '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"';
    font-weight: 500;
}
.planCardGiftTmp{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 8px;
}
.disneyplanCardGift{
    width: 100%;
    display: flex;
    gap: 10px;
    border-radius: 12px;
    background-color: #FFF3D9;
    padding: 12px;
    flex-wrap: nowrap;
    background: url(/mobile_and_price_plans/portin_landing/common/disney_offer_box_desktop.png) center center;
    background-size: cover;
    color: #fff;
    text-align: left;
    align-items: center;
}
.disneyplanCardGift .gift_icon{
    width: 32px;
    height: 32px;
}
.theme[lang=zh-HK] .disneyplanCardGift .h8{
    margin-bottom: 0px;
    white-space: pre;
    color: #fff;
    text-align: left;
}
.planCardGiftItem{
    display: flex;
    gap: 6px;
    align-items: center;
}
.cardHeader .localDataContainer .icon_4_5g{
    width: 46px;
}
.speedRemark .greyText{
    color: #9C9C9C;
}
.priceSubTitle{
    text-align: left;
    color: #9C9C9C;
}
.planCardOrText {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
    padding: 0 20px;
    margin-bottom: 8px;
}
@media (max-width: 1200px){
    .giftPopupContainer{
        overflow: auto;
    }
    .van-popup{
        padding: 20px 20px 0 20px !important;
        width: 90%;
        height: 95%;
    }
}
@media (max-width: 767px){
    .swiperContainer{
        overflow: hidden;
    }
    .cardBox{
        width: 315px;
        margin-bottom: 20px;
    }
    .cardContainer{
        padding-right: 20px;
    }
    .cardContainer:last-child{
        padding-right: 0;
    }
    .vanSwiperContainer{
        max-width: 1200px;
        padding-left: 10px;
    }
    .cardContainer{
        justify-content: left;
    }
    .van-swipe{
        margin-left: 0;
        margin-right: 0;
    }
    .van-swipe__track{
        margin-left: 10px;
    }
    .van-popup{
        padding: 50px 20px 20px 20px !important;
        width: 90%;
        height: auto;
    }
    .popupContent{
        width: 100%;
    }
    .theme[lang=zh-HK] .dataContainer{
        width: 235px;
    }
    .planItemBox{
        padding: 12px 0;
    }
    .planItemBox .selectPlanItem:last-child{
        margin-bottom: 0;
    }
    .theme[lang=zh-HK] .planItemBox .selectPlanItem:nth-child(3) .detailPlace{
        /* width: 80%; */
    }
    .theme[lang=zh-HK] .h9.detailPlace,.theme[lang=en-US] .h9 {
        font-size: 14px
    }
    .free_service{
        margin: 8px auto;
    }
    .free_service .free_cricle{
        width: 28px;
        height: 28px;
        margin-right: 6px;
    }
    .theme[lang=zh-HK] .localDataBox .h7 span{
        font-family: "titling-gothic-fb-condensed", "sans-serif", '"Helvetica Neue"', "Arial", "sans-serif", '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"';
        font-weight: 500;
    }
}
/* Plancard end */

/* vant popup start */
.van-popup{
    padding: 40px 60px;
}
.popupContent{
    width: 360px;
    text-align: center;
    margin-bottom: 10px;
}
.popupIcon{
    margin-left: 4px;
    cursor: pointer;
}
@media (max-width: 767px){
    .popupContent{
        width: 100%;
    }
    #app a{
        width:100%;
        text-align: center;
    }
    .theme[lang=zh-HK] .button.color-green,.theme[lang=en-US] .button.color-green{
        width: 90%;
    }
}
/* vant popup end */


/* Offercardboxdiv start */
.ExclusiveOffersTitle{
    margin: 40px 0;
    text-align: center;
}
.exclusiveOffersContainer{
    display: flex;
    flex-wrap: wrap;
    background: white;
    border-radius: 20px;
    /* padding: 40px; */
    justify-content: center;
    gap: 20px;
    margin: 40px auto;
    max-width: 1200px;
}
.offerSection{
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 40px;
}
.offerItem{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 230px;
    align-items: center;
    color: black;
    gap: 8px;
}
.offerItem img{
    width: 50px;
    height: 50px;
}
.offerItem div{
    width: 100%;
    text-align: center;
}
@media (max-width: 767px){
    .ExclusiveOffersTitle{
        margin: 40px 0 28px;
    }
    .offerSection{
        flex-wrap: wrap;
        justify-content: left;
        gap:16px;
    }
    .offerItem{
        flex-direction: row;
        width: 100%;
        flex-wrap: nowrap;
        gap: 0px;
    }
    .offerItem img{
        width: 30px;
        height: 30px;
    }
    .offerItem div{
        text-align: left;
        margin-left: 12px;
    }
    .theme .offerItem div span.h7{
        font-size: 18px;
    }
    .exclusiveOffersContainer{
        margin: 30px 20px 48px;
        padding:0px;
    }
}
/* Offercardboxdiv end */

/* Plancard Swiper start */
.vanSwiperContainer {
    max-width: 1300px;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.prevBtn{
    position: absolute;
    left: 0%;
    background-image: url('https://www.smartone.com/Home5GBroadband/web/img/icon/Previous_Btn_Red_Pc.png') ;
    width: 74px;
    background-size: cover;
    height: 74px;
    top: 38%;
    cursor: pointer;
}
.nextBtn{
    position: absolute;
    right: 0%;
    top: 38%;
    background-image: url('https://www.smartone.com/Home5GBroadband/web/img/icon/Next_Btn_Red_Pc.png') ;
    width: 74px;
    background-size: cover;
    height: 74px;
    cursor: pointer;
}
.swiperLessThanFour{
    display: flex;
    justify-content: center;
}
@media (max-width: 767px){
    .prevBtn{
        width: 30px;
        height: 67px;
        top: 40%;
        left: -3px;
        background-image: url('/images/common/mobile_tab_arrow_active_L.svg') ;
    }
    .nextBtn{
        width: 30px;
        height: 67px;
        top: 40%;
        right: -3px;
        background-image: url('/images/common/mobile_tab_arrow_active_R.svg') ;
    }
}

/* Plancard Swiper end */

/* fadein animation start */
.slide-up-enter-active, .slide-up-leave-active {
    transition: all 0.2s ease;
}
.slide-up-enter, .slide-up-leave-to /* .slide-up-leave-active in <2.1.8 */ {
    transform: translateY(50%);
    opacity: 0;
}
/* fadein animation end */

/* smartone-undergrad-5g-plans start */
.rglist_box{
    display: flex;
    padding: 18px 12px 12px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
    margin-top: 10px;
    border-radius: 0 12px 12px 12px;
    border: 1px solid #CDCDCD;
    position: relative;
}
.rglist{
    display: flex;
    align-items: center;
    gap: 12px;
}
.rglist img{
    width: 24px;
    height: 24px;
}
.rglist_box_text{
    position: absolute;
    top: -12px;
    left: -2px;
    display: inline-flex;
    padding: 0 10px 5px 0;
    align-items: center;
    gap: 10px;
    z-index: 999;
    background: #FFF;
}
/* smartone-undergrad-5g-plans end */
.new_iphone_img{
    display: flex;
    padding: 2px 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    color: white;
    background: red;
    margin-left: 8px;
}
@media (max-width: 767px){
    .new_iphone_img{
        font-size: 12px!important;;
    }
}