.headerbgbox{
    position: absolute;
    width: 100%;
}

.headerbg{
    position: relative;
    background-color: #5479ff;
    height: 40vh;
    max-height: 200px;
    width: 100%;
}

.logobox{
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1140px;
    padding: 5% 0% 0% 0%;
    text-align: right;
}

.logosvg{
    fill: #fff;
    height: 2rem;
}

.headerbgimg{
    position: relative;
    width: 100%;
    margin: -1px 0px 0px 0px;
}

.headertitlebox{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1140px;
    padding: 1% 0% 0% 0%;
}

.headerbox{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1140px;
    padding: 1% 0% 6% 0%;
}

.headercontent{
    width: 55%;
   
}

.headerdectitle{
    color: #fff;
    font-size: 1.5rem;
    line-height: 4rem;
    font-weight: 500;
    background-color: #000;
    border-radius: 80px;
    padding: 3px 15px 6px 15px;
    
}

.outframe{
    position: relative;
    margin-top: 3%;
    border: #fff 1px solid;
    width: 85%;
    color: #fff;
    padding: 20px 15px 8px 15px;
}

.decimg{
    height: 16px;
    line-height: 18px;
}

.outframetitle{
    position: absolute;
    top: -10px;
    background-color: #5479ff;
    padding: 0px 8px 0px 8px;

    font-size: 1.6rem;
    line-height: 1.6rem;
    font-weight: 500;
}

.outframenum{
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 700;
    color: #ffef00;
}

.phoneanim{
    width: 45%;
    
}

.phone_left{
    position: relative;
    top: -12%;
    left: 3%;
    width: 54%;

    /*top: 32%;
    right: 20%;
    width: 22%;*/
}


.phone_right{
    position: relative;
    top: -28%;
    right: 5%;
    width: 46%;

    /*
    top: 18%;
    right: 5%;
    
    width: 20%;*/
}

@media (max-width: 1140px) {

    .headerbg{
        max-height: 800px;
        
    }

    .headertitlebox{
        
        width: 90%;
        max-width: 1140px;
        padding: 1% 0% 0% 0%;
    }

    .headerdectitle{
        padding: 2px 13px 5px 13px;
        
    }
    
    .headerbox{
        width: 90%;  
    }

    .headercontent{
        width: 100%;
        margin-top: 12%;
    }

    .outframe{
        margin-top: 8%;
        border: #000 1px solid;
        width: 100%;
        color: #000;
        padding: 30px 15px 8px 15px;

    }

    .outframetitle{
        top: -20px;
        background-color: #fff3da;

        font-size: 2.5rem;
        line-height: 2.5rem;
    
    }

    .outframenum{
        font-size: 2.8rem;
        line-height: 2.8rem;
        color: #5479ff;
    }

    .logosvg{
        fill: #ff3c00;
    }


    .phoneanim{
        width: 100%;
        order: -1;
    }

    .phone_left{
        top: 16%;
        
    }
    
    
    .phone_right{
        top: 0%;
        
    }
}

@media (max-width: 768px) {
    .logoimg{
        height: 1.6rem;
    }

    .outframe{
        margin-top: 12%;
        padding: 20px 15px 8px 15px;
    }

    .outframetitle{

        font-size: 1.6rem;
        line-height: 1.6rem;
    
    }

    .outframenum{
        font-size: 2rem;
        line-height: 2rem;

    }
    
    .headerdectitle{
        font-size: 1.2rem;
        line-height: 3.3rem;
        
    }

}