/* ---------- tableorder bell ----------- */



.tableorder_bell_wrap{
    position: sticky;
    top:-10%;
    background: #f7f7f7;
    text-align: center;
}

.main_sub_title{
    margin-top:30px;
}


.tableorder_bell_wrap ul{
    display: flex;
    width:70%;
    margin:0 auto;
    margin-top:60px;
}


.tableorder_bell_wrap ul li{
    position: relative;
    margin-left:40px;
    width:100%;
    height:480px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 3px 3px 7px rgb(34, 34, 34,0.3);
}

.tableorder_bell_wrap ul li img{
    position: absolute;
    top:7%;
    left:50%;
    transform: translateX(-50%);
}

.tableorder_bell_wrap ul li p{
    position: absolute;
    width:90%;
    bottom:7%;
    left:50%;
    transform: translateX(-50%);
    font-weight: 900;
}





/* ---------- tableorder why ----------- */


.tableorder_why_wrap{
    position: sticky;
    top:-80%;
    width:100%;
    height: auto;
    background: #fff;
}


.tableorder_why_wrap .main_title{
    text-align: center;
}

.tableorder_why_wrap ul{
    width:80%;
    margin:0 auto;
    margin-top:100px;
}

.tableorder_why_wrap ul li{
    display: flex;
    position: relative;
    align-items: center;
    margin-top:60px;
}

.tableorder_why_wrap ul li:nth-child(2){
    text-align: right;
    flex-direction: row-reverse;
}

.tableorder_why_wrap ul li:first-child{
    margin-top:0;
}


.tableorder_why_text_wrap{
    width:100%;
}


.tableorder_why_text_wrap h3{
    font-size: 40px;
}

.tableorder_why_text_wrap p{
    font-size: 25px;
    margin-top:15px;
}


.tableorder_why_img_wrap{
    position: relative;
}




.tableorder_why_wrap ul li:nth-child(1) .tableorder_why_img_wrap img:nth-child(2){
    position: absolute;
    top:0;
    left:-50px;
}

.tableorder_why_wrap ul li:nth-child(1) .tableorder_why_img_wrap img:nth-child(3){
    position: absolute;
    bottom:40px;
    right:-50px;
}


.tableorder_why_wrap ul li:nth-child(2) .tableorder_why_img_wrap img:nth-child(2){
    position: absolute;
    left:-50px;
    bottom:0px;
}


.tableorder_why_wrap ul li:nth-child(3) .tableorder_why_img_wrap img:nth-child(2){
    position: absolute;
    top:150px;
    left:-50px;
}

.tableorder_why_wrap ul li:nth-child(3) .tableorder_why_img_wrap img:nth-child(3){
    position: absolute;
    bottom:40px;
    right:-90px;
}




/* -------- tableorder tablet ---------- */



.tableorder_tablet_wrap{
    position: relative;
    background: #f7f7f7;
}

.tableorder_tablet_wrap .main_title{
    text-align: center;
}


.tableorder_tablet_wrap ul{
    display: flex;
    width:80%;
    margin:0 auto;
    margin-top:100px;
}

.tableorder_tablet_wrap ul li{
    position: relative;
    width:100%;
    text-align: center;
}


.tableorder_tablet_wrap ul li img{
    display: block;
    width:80%;
    margin:0 auto;
}



.tableorder_tablet_wrap ul li h3{
    margin-top:40px;
    font-size: 40px;
}





/* -------tableorder last------- */

.tableorder_last_wrap{
    position: relative;
    width:100%;
    background: #fff;
}

.tableorder_last_wrap .main_title{
    text-align: center;
}



.tableorder_last_logo_wrap{
    margin-top:60px;
}

.tableorder_last_logo{
    display: flex;
    justify-content: center;
    width:50%;
    margin:0 auto;
}




.main_section_input iframe{
    position: relative;
    left:50%;
    transform: translateX(-50%);
    margin-top:100px;
}


/* ------------- max 1500 -------------- */


@media (max-width:1500px) and (min-width:1024px){

    .main_title{
        font-size: 35px;
    }


    .main_section_wrap{
        padding-top:100px;
        padding-bottom:100px;
    }
    
    .main_sub_title{
        width:90%;
        font-size: 30px;
        margin:0 auto;
    }
    
    .main_section_wrap p{
        font-size: 25px;
        margin-top:20px;
    }


/* ---------- tableorder bell 1500 ----------- */


    
.tableorder_bell_wrap ul{
    width:90%;
    margin-top:60px;
}


.tableorder_bell_wrap ul li{
    position: relative;
    height:360px;
}

.tableorder_bell_wrap ul li img{
    width:68%;
}

.tableorder_bell_wrap ul li p{
    bottom:10%;
}





/* ---------- tableorder why 1500 ----------- */


.tableorder_why_wrap{
    top:-370px;
}


.tableorder_why_wrap ul{
    width:90%;
    margin-top:60px;
}

.tableorder_why_wrap ul li{
    margin-top:30px;
}

.tableorder_why_text_wrap{
    width:100%;
}


.tableorder_why_text_wrap h3{
    font-size: 25px;
}

.tableorder_why_text_wrap p{
    font-size: 20px;
    margin-top:10px;
}


.tableorder_why_img_wrap{
    width:40%;
}


.tableorder_why_img_main img{
    width:100%;
}


.tableorder_why_wrap ul li:nth-child(1) .tableorder_why_img_wrap img:nth-child(2){
    width:70px;
    top:0;
    left:-30px;
}

.tableorder_why_wrap ul li:nth-child(1) .tableorder_why_img_wrap img:nth-child(3){
    width:70px;
    bottom:40px;
    right:-30px;
}


.tableorder_why_wrap ul li:nth-child(2) .tableorder_why_img_wrap img:nth-child(2){
    width:120px;
    left:-30px;
    bottom:0px;
}


.tableorder_why_wrap ul li:nth-child(3) .tableorder_why_img_wrap img:nth-child(2){
    width:70px;
    top:100px;
    left:-30px;
}

.tableorder_why_wrap ul li:nth-child(3) .tableorder_why_img_wrap img:nth-child(3){
    width:70px;
    bottom:40px;
    right:-30px;
}







/* -------- tableorder tablet 1500 ---------- */



.tableorder_tablet_wrap ul{
    width:90%;
    margin-top:60px;
}

.tableorder_tablet_wrap ul li{
    position: relative;
    width:100%;
    text-align: center;
}


.tableorder_tablet_wrap ul li img{
    width:90%;
    margin:0 auto;
}



.tableorder_tablet_wrap ul li h3{
    margin-top:30px;
    font-size: 30px;
}






/* -------tableorder last 1500------- */


.tableorder_last_wrap .main_title{
    text-align: center;
    width:70%;
}



.tableorder_last_logo_wrap{
    margin-top:60px;
}

.tableorder_last_logo{
    display: flex;
    justify-content: center;
    width:60%;
    margin:0 auto;
}


.tableorder_last_logo_wrap img{
    width:50%;
}




}


/* ------------- max 1023 -------------- */



@media (max-width:1023px) and (min-width:501px){

    

    .main_section_wrap{
        padding-top:60px;
        padding-bottom:60px;
    }
    
    .main_title{
        width:90%;
        font-size: 30px;
    }

    
    .main_section_wrap p{
        font-size: 20px;
        margin-top:10px;
    }


/* ---------- tableorder bell 1023 ----------- */


    
.tableorder_bell_wrap ul{
    width:90%;
    margin-top:30px;
}


.tableorder_bell_wrap ul li{
    position: relative;
    height:300px;
    margin-left:20px;
}

.tableorder_bell_wrap ul li:first-child{
    margin-left:0;
}

.tableorder_bell_wrap ul li img{
    width:75%;
}

.tableorder_bell_wrap ul li p{
    bottom:10%;
}



/* ---------- tableorder why 1023 ----------- */


.tableorder_why_wrap ul{
    width:90%;
    margin-top:30px;
}

.tableorder_why_wrap ul li{
    text-align: center;
    display: block;
    margin-top:30px;
}

.tableorder_why_wrap ul li:nth-child(2){
    text-align: center;
}

.tableorder_why_text_wrap{
    width:100%;
}


.tableorder_why_text_wrap h3{
    font-size: 25px;
}

.tableorder_why_text_wrap p{
    margin-top:10px;
}


.tableorder_why_img_wrap{
    width:40%;
    margin:0 auto;
    margin-top:10px;
}


.tableorder_why_img_main img{
    width:100%;
}


.tableorder_why_wrap ul li:nth-child(1) .tableorder_why_img_wrap img:nth-child(2){
    width:70px;
    top:0;
    left:-30px;
}

.tableorder_why_wrap ul li:nth-child(1) .tableorder_why_img_wrap img:nth-child(3){
    width:70px;
    bottom:40px;
    right:-30px;
}


.tableorder_why_wrap ul li:nth-child(2) .tableorder_why_img_wrap img:nth-child(2){
    width:120px;
    left:-30px;
    bottom:0px;
}


.tableorder_why_wrap ul li:nth-child(3) .tableorder_why_img_wrap img:nth-child(2){
    width:70px;
    top:100px;
    left:-30px;
}

.tableorder_why_wrap ul li:nth-child(3) .tableorder_why_img_wrap img:nth-child(3){
    width:70px;
    bottom:40px;
    right:-30px;
}





/* -------- tableorder tablet 1023 ---------- */



.tableorder_tablet_wrap ul{
    width:90%;
    margin-top:30px;
    flex-wrap: wrap;
}

.tableorder_tablet_wrap ul li{
    width:50%;
    margin-top:20px;
}


.tableorder_tablet_wrap ul li img{
    width:80%;
}



.tableorder_tablet_wrap ul li h3{
    margin-top:10px;
    font-size: 25px;
}




/* -------tableorder last 1023------- */


.tableorder_last_wrap .main_title{
    width:70%;
}



.tableorder_last_logo_wrap{
    margin-top:30px;
}

.tableorder_last_logo{
    width:60%;
}


.tableorder_last_logo_wrap img{
    width:50%;
}




}








/* ------------- max 500 -------------- */



@media (max-width:500px){

    

    .main_section_wrap{
        padding-top:60px;
        padding-bottom:60px;
    }
    
    .main_title{
        width:90%;
        font-size: 25px;
    }
    
    .main_section_wrap p{
        font-size: 15px;
        margin-top:10px;
    }


/* ---------- tableorder bell 500 ----------- */


    
.tableorder_bell_wrap ul{
    display: block;
    width:90%;
    margin-top:30px;
}


.tableorder_bell_wrap ul li{
    position: relative;
    display: flex;
    height:150px;
    margin-left:0px;
    margin-top:10px;
}

.tableorder_bell_wrap ul li img{
    right:5%;
    left:auto;
    top:50%;
    transform: translateY(-50%);
    width:40%;
}

.tableorder_bell_wrap ul li p{
    width:auto;
    margin-top:0;
    top:50%;
    transform: translateY(-50%);
    left:5%;
    bottom:auto;
    font-size:20px;
    text-align: left;
}



/* ---------- tableorder why 500 ----------- */


.tableorder_why_wrap{
    top:-500px;
}



.tableorder_why_wrap ul{
    width:90%;
    margin-top:30px;
}

.tableorder_why_wrap ul li{
    text-align: center;
    display: block;
    margin-top:30px;
}

.tableorder_why_wrap ul li:nth-child(2){
    text-align: center;
}

.tableorder_why_text_wrap{
    width:100%;
}


.tableorder_why_text_wrap h3{
    font-size: 25px;
}

.tableorder_why_text_wrap p{
    width:100%;
    margin:0 auto;
    margin-top:10px;
}


.tableorder_why_img_wrap{
    width:60%;
    margin:0 auto;
    margin-top:10px;
}


.tableorder_why_img_main img{
    width:100%;
}


.tableorder_why_wrap ul li:nth-child(1) .tableorder_why_img_wrap img:nth-child(2){
    width:55px;
    top:0;
    left:-30px;
}

.tableorder_why_wrap ul li:nth-child(1) .tableorder_why_img_wrap img:nth-child(3){
    width:55px;
    bottom:40px;
    right:-30px;
}


.tableorder_why_wrap ul li:nth-child(2) .tableorder_why_img_wrap img:nth-child(2){
    width:95px;
    left:-30px;
    bottom:0px;
}


.tableorder_why_wrap ul li:nth-child(3) .tableorder_why_img_wrap img:nth-child(2){
    width:55px;
    top:100px;
    left:-30px;
}

.tableorder_why_wrap ul li:nth-child(3) .tableorder_why_img_wrap img:nth-child(3){
    width:55px;
    top:10px;
    bottom:auto;
    right:-30px;
}





/* -------- tableorder tablet 500 ---------- */



.tableorder_tablet_wrap ul{
    width:90%;
    margin-top:30px;
    flex-wrap: wrap;
}

.tableorder_tablet_wrap ul li{
    width:50%;
    margin-top:20px;
}


.tableorder_tablet_wrap ul li img{
    width:80%;
}



.tableorder_tablet_wrap ul li h3{
    margin-top:10px;
    font-size: 20px;
}




/* -------tableorder last 500 ------- */


.tableorder_last_wrap .main_title{
    width:80%;
}



.tableorder_last_logo_wrap{
    margin-top:30px;
}

.tableorder_last_logo{
    width:90%;
}


.tableorder_last_logo_wrap img{
    width:50%;
}


.float_main_section_input_wrap iframe{
    position: relative;
    width:85%;
    left:50%;
    transform: translateX(-50%);
    margin-top:100px;
}


}