.video-header {}

.video-header .v-bdr {
    border-radius: calc(1.05rem * var(--text-multiplier, 0.85));
    overflow: hidden;
    position: relative
}

.video-header .t-content {
    position: absolute;
    width: 100%
}

@media (min-width:992px) {
    .video-header .t-content {
        top: 50%;
        transform: translate(0, -50%);
        left: 0
    }
}

@media (max-width:991px) {
    .video-header .v-bdr {
        height: 60vh
    }

    .video-header .t-content {
        background-image: linear-gradient(transparent, #FF6624);
        padding-top: 20px;
        padding-bottom: 9%;
        bottom: 0;
        left: 0
    }

    .video-header .t-content h2.sublarge {
        font-size: 26px
    }
}

.pop-summary.cus-01 {
    background-color: #FFFFFF;
    width: 100%;
    top: auto
}

@media (min-width:992px) {
    .pop-summary.cus-01.affix-top {
        position: static;
        padding-bottom: 0.1rem
    }

    .pop-summary.cus-01.affix {
        position: fixed;
        top: 110px;
        z-index: 10
    }

    .pop-summary.cus-01.affix-bottom,
    .pop-summary.cus-01.affix {
        width: 356px;
    }
}

@media(min-width:992px) and (max-width:1200px) {

    .pop-summary.cus-01.affix-bottom,
    .pop-summary.cus-01.affix {
        width: 296px
    }
}

@media (max-width:991px) {

    .pop-summary.cus-01,
    .pop-summary.cus-01.affix,
    .pop-summary.cus-01.affix-bottom,
    .pop-summary.cus-01.affix-top {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        top: auto !important;
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2)
    }

    .pop-summary.cus-01 .card-header {
        background-color: #ffffff
    }

    .pop-summary.cus-01 .p-bar .arrow {
        width: 16px;
        height: 9px;
        background-image: url(../img/recommend/vector/arrow-down.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center right;
    }

    .pop-summary.cus-01 .p-bar.collapsed .arrow {
        background-image: url(../img/recommend/vector/arrow-up.svg);
    }

    .pop-summary.cus-01 .p-bar .p-ttl {
        display: none
    }

    .pop-summary.cus-01 .p-bar.collapsed .p-ttl {
        display: flex
    }

    .pop-summary.cus-01 .pack.cus-01 {
        font-size: calc(14px * var(--text-multiplier, 0.83));
        line-height: 1.2
    }

    .pop-summary.cus-01 .pack.cus-01 span {
        font-size: calc(20px * var(--text-multiplier, 0.83));
        color: #FF561C
    }
}

/*
.affix {
  position: fixed;
  top: 1rem;
}*/

#msform1 a.btn-secondary.cus-01 {
    color: #FF6624;
    background-image: url(../img/vector/icon-retake.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center right 30px !important;
    background-size: 23px !important
}

@media (max-width:991px) {
    #msform1 a.btn-secondary.cus-01 {
        width: 200px;
        padding-left: 20px;
        padding-right: 20px;
        background-position: center right 20px !important;
    }
}

.btn-secondary.cus-01.sm-ps {
    margin: 40px 15px -60px 15px
}

.one-mth-free {
    background-color: #FFC132;
    border-radius: 20px;
    padding: 15px 30px;
    color: #000000;
    line-height: 1.4
}

.recommend-sec {
    position: relative;
    color: #ffffff
}

.recommend-sec .bdr-01 {
    border-radius: 20px
}

.recommend-sec .bn-content {
    position: absolute;
    left: 0;
    width: 100%;
}

@media (min-width:992px) {
    .recommend-sec .bn-content {
        top: 50%;
        transform: translate(0, -50%)
    }
}

@media (max-width:991px) {
    .recommend-sec .bn-content {
        position: absolute;
        bottom: 30px;
        left: 0;
    }
}

@media (min-width: 992px) {
    .mp-ar .collapse {
        display: block !important;
    }
}

.plan-result {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 25px;
    font-size: calc(13px * var(--text-multiplier, 0.83));
}

@media (min-width:992px) {
    .plan-result .plan-ttl {
        margin-top: -50px
    }
}

.plan-result .plan-ttl .is {
    font-size: calc(53px * var(--text-multiplier, 0.83));
    line-height: 1.2
}

.plan-result .plan-ttl .is span {
    font-size: calc(27px * var(--text-multiplier, 0.83))
}

.plan-result .plan-ttl .free {
    color: #1156A2
}

.plan-result .pr-info {
    background-color: #F7EEEA;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    z-index: 3;
    line-height: 1.3
}

.plan-result .pr-info .tag {
    background-color: #1567FF;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 5px;
    display: inline-block
}

.plan-result .pr-info .tag img {
    vertical-align: top;
}

.plan-result .pr-info .price {
    font-size: calc(33px * var(--text-multiplier, 0.83))
}

.plan-result .pr-info .price span {
    font-size: calc(17px * var(--text-multiplier, 0.83))
}

.plan-result .pr-info .contract {
    font-size: calc(14px * var(--text-multiplier, 0.83))
}

.plan-result .panel-heading .panel-title.collapsed {
    background-image: url(../img/recommend/vector/arrow-down.svg);
}

.plan-result .panel-heading .panel-title {
    background-image: url(../img/recommend/vector/arrow-up.svg);
    background-size: 16px 9px;
    background-repeat: no-repeat;
    background-position: center right;
    border-bottom: 1px solid rgba(112, 112, 112, 0.5)
}

.plan-result .voucher {
    margin-left: -10px;
    margin-top: 5px;
    max-width: 233px
}

.unifi-lady {
    position: relative
}

.unifi-lady::after {
    content: '';
    position: absolute;
    z-index: 2;
    background-image: url(../img/recommend/unifi-lady-hand.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 73px;
    height: 28px;
    animation: glide 1s ease-in-out alternate infinite;
}

@keyframes glide {
    from {
        left: -25px;
        bottom: -15px;
        transform: rotate(0) translate(-70%, 0%)
    }

    to {
        left: -15px;
        bottom: -9px;
        transform: rotate(15deg) translate(-70%, 0%)
    }
}

@media (max-width:991px) {
    .plan-result {
        padding: 25px 15px
    }

    .unifi-lady {
        max-width: 120px;
        margin-left: auto
    }

    .unifi-lady img {
        width: 100%
    }

    .unifi-lady::after {
        width: 60px;
        height: 25px;
        margin-left: 5px
    }

    .plan-result .panel-heading .panel-title {
        background-size: 13px 9px;
    }

    .plan-result .plan-ttl .is {
        font-size: calc(43px * var(--text-multiplier, 0.83));
        line-height: 1.2
    }

    .plan-result .plan-ttl .is span {
        font-size: calc(22px * var(--text-multiplier, 0.83))
    }
}

.audio-btn{
    position: absolute;
    right: 15px;
    bottom: 15px
}

.audio-btn label{
    cursor: pointer
}

.audio-btn input + label .unmute,
.audio-btn input:checked + label .mute{
    display: none
}

.audio-btn input:checked + label .unmute,
.audio-btn input + label .mute{
    display: block
}
    
@media (max-width:991px){
    .audio-btn img{
        width: 30px
    }
}