/******************/
/* 119*16=1900px*/
/******************/
@media (min-width:119em){
    .herocontent{
        padding:3rem 2rem 3rem 2rem;
        /* height:100%;
        width:100%; */
    }
    .sectionsignup{
        background-color: #fff;
        padding:5rem 40rem; 
    }
}
/******************/
/* 92*16=1470px*/
/******************/
@media (min-width:92em){
    .sectionsignup{
        background-color: #fff;
        padding:5rem 40rem; 
    }
}
/******************/
/* 82.5*16=1320px*/
/******************/
@media (max-width:82.5em){
    html{
        font-size:60%;
    }
    .sectionapply{
        padding:4rem 1rem;
    }
    .applyimgBox{
        margin-top:8rem;
        width:100%;
    }
}
/******************/
/* 70*16=1107px*/
/******************/
@media (max-width:70em){
    html{
        font-size:57%;
    }
    .herosection {
        padding:2rem 4rem 5rem 4rem;
    }
    .herocontainer{
        grid-template-columns: 1fr;
        gap:3rem;
    }
    .herocontainer{
        width:90%;
    }
    .banner{
        align-self: center;
    }
    .herocontent{
        display: flex;
        flex-direction: column;
        align-items: center;

        transform: translateX(5rem);
    }
    .sectionfuncton{
        padding:5rem 2rem 0 2rem;
    }
    .functioncontainer{
        flex-direction: column-reverse;
        align-items: center;
    }
    .textBox {
        transform: translateX(0);
        width:65%;
    }
    .functionImg{
        width:100%;
    }
    .stepSection {
        padding:2.5rem 5rem;
    }
    .stepBox{
        grid-template-columns: 1fr;
    }
    .box2{
        grid-row: 5/3;
    }
    .box4{
        grid-row: 10/8;
    }
    .sectionapply{
        padding:4rem 0;
    }
    .applyBox{
        width:100%;
        padding:2rem;
    }
    .applyimgBox{
        grid-template-columns: 1fr;
        margin: 0;
    }
    .applytablet{
        width:50%;
        transform: translateX(22rem);
    }
    .applytextBox{
        display: flex;
        justify-content: center;
        gap:2rem;
    }
    .applytextBox div{
        text-align: left;
    }
    .applylistItem{
        margin-bottom: 0;
        padding: 0;
    }
    .sectionfuncton {
        margin-top: 2rem;
    }

    
}
/******************/
/* 57*16=910px*/
/******************/
@media (max-width:57em){
    /* sign up */
    .addressInput{
        width:auto;
    }
    .sectionsignup{
        background-color: #fff;
        padding:5rem 10rem; 
    }
    .sectionPrice{
        padding:3rem 2rem;
    }
    .priceContainer{
        gap:3rem;
    }
    .priceBoxTitle{
        padding:2rem 5rem;
    }
    .priceBoxMoney{
        padding: 2rem 5rem;
    }
}



/******************/
/* 50*16=800px*/
/******************/
@media (max-width:50em){
    .inputBox{
        grid-template-columns: 1fr;
    }
    .inputBox span{
        line-height: 1.3;
    }
    form{
        justify-content: center;
    }
    .logintitle {
        margin-bottom: 4rem;
    }
    .receiptInput{
        width:100%;
    }
    /* sign up */
}
/******************/
/* 47*16=735px*/
/******************/
@media (max-width:47em){
    html{
        font-size:54%;
    }
    .herosection{
        padding:2rem 2rem 3rem 2rem;
    }
    .herocontent span {
        font-size:2.4rem;
    }
    .herocontent div {
        min-width: 30rem;
    }
    .herocontentList{
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .herocontentList li{
        margin:0;
        width:20rem;
        font-size:2.2rem;
        display: inline-block;
        padding:0;
        text-align: left;
    }
    .herocontentList li:last-child{
        margin-bottom:2rem;
    }
    h1{
        font-size:3rem;
    }
    .functonTittle{
        font-size:2.6rem;
        line-height: 1.5;
        text-align: left;
    }
    .deviceImg{
        width:30%;
    }
    .applytitle{
        font-size:3.2rem;
        line-height:1.5;
    }
    .textBox{
        padding:3rem 2rem;
        width:100%;
    }
    .applycontentBox{
        margin:4rem 0 2rem 8rem;
    }
    .applytablet{
        transform: translateX(10rem);
        width:60%;
    }
    .applytextBox{
        flex-direction: column;
        align-items:flex-start;
        transform: translateY(-5rem);
    }
    .applythirdtitle{
        display: inline-block;
    }
    .applylist{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
}
/******************/
/* 47*16=735px*/
/******************/
@media (max-width:47em){
    .herocontent{
        transform: translateX(2.5rem);
    }
    /* sign up */
    .sectionsignup{
        padding:5rem 12rem;
    }
}
/******************/
/* 34*16=550px*/
/******************/
@media (max-width:34em){
    .herocontent span{
        margin-bottom: 1.5rem;
    } 
    .stepBox{
        margin:2rem 3.5rem;
    }
    .stepimg{
        width:100%;
    }
    .stepTitle{
        font-size:8rem;
    }
    .herocontentList li:last-child{
        margin-bottom:3rem;
    }
    .deviceImg{
        width:50%;
    }
    .applyBtn:link,.applyBtn:visited{
        font-size:2.4rem;
        margin-bottom: 6rem;
    }
    .sectionfuncton {
        padding:5rem 3rem 0 3rem;
    }
    .priceContainer{
        flex-direction: column;
        align-items: center;
        gap:2rem;
    }
    .sectionPrice{
        padding:3rem 2rem;
    }
    .priceBoxTitle{
        padding:1.5rem 6rem;
        font-size:2.4rem;
    }
    .priceBoxMoney{
        padding: 1.5rem 6rem;
    }
    /* sign up */
    .sectionsignup{
        padding:5rem;
    }
    .signupBtnBox{
        margin-bottom: 15rem;
    }
}
/******************/
/* 20*16=329px*/
/******************/
@media (max-width:20em){
    html{
        font-size:49%;
    }
}