@media screen and (max-width: 500px ){
    .process > div{
        width: 90px !important;
        height:  78px !important;
        background-size: cover;
        background-repeat: unset;
        margin: 12px -5px !important;
        padding: 10px 0;
        overflow: hidden;

    }
    #process1>img{
        display: none;
    }
    #tel1{
        display: none;
    }
    #tel2{
        display: block;
    }
}

@media screen and (max-width: 750px ){
    #title_sub{
        font-size: 16px;
        font-weight: 400;
    }
    .process > div{
        width: 120px;
        height:  100px;
        background-size: cover;
        background-repeat: unset;
        margin: 0 -5px;
        padding: 10px 0;

    }
    .process > div>div{
        font-size: 10px;
    }
    
    #process1{
        padding: 10px 0;
    }
    #process1>img{
        width: 3px;
    }
    #process2 >img{
        width: 20px;
    }
    #process3 >img{
        width: 28px;
    }
    #process4 >img{
        width: 28px;
    }
    
    .title_section{
        height: 350px !important;
        padding-top: 0px !important;
        overflow: hidden;

    }

    .title_section>div{        
        padding: 15px !important;
    }

    .title_section>div:first-child{
        width: 200px !important;
        font-size: 17px !important;           
    }
    
    .title_section>div:last-child{
        font-size: 12px !important;
    }

    .content_section >.content_box{
        padding: 125px 0 !important;
        text-align: center;
        font-size: 15px !important;
    }
    .content_section>img{
        position: absolute;    
        width: 320px !important;
        height: 270px !important;
       
    }

    .section2{
        display: flex;
        flex-direction: column;
      
        height: 500px !important;
    }

    .section2 .inner{
        width: 100% !important;
        height: 300px;   
    }

    .section2 .inner1{
        height: 200px;   
        justify-content: end !important;
    }
    .section2 .inner1 *{      
       font-size: 18px !important;   
       top: 50% !important; 
       margin-right: 6%;      
    }     

    .section2 .inner1::before{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            background-image: url(../image/about/wood.png);
            filter: brightness(35%);
            
    }

    .section2 .inner2{
        display: block;
        overflow: hidden;
        justify-content: start !important;
    }

    .section2 .inner2 div{
        box-sizing: border-box !important;
 
        font-size: 11px !important;
        top:50px !important;
        left: 10px !important;
        width: 100% !important;
        text-align: left;
        padding: 11px !important;
        color: #412D24;
        line-height: 20px !important;
        width: 100% !important;
    }

    .section2 .inner2 div img{
        position: absolute;
        width: 200px !important;
        height: 180px !important;
        top:-30px !important;
        left: 150px !important;
    }



}


@media screen and (max-width: 850px ){
    .map_info_section{
        flex-direction: column-reverse;
        width: 100%;
        height: auto;
        align-items: center;
        margin-top: 50px;
    }

    .map_section{
        margin-top: 60px;
    }
    
    #check_detail{
                
        width: 100% !important;
        box-sizing: border-box;
    }
    #check_detail_content{
        font-size: 11px !important;
    }
}

@media screen and (max-width: 440px ){

    .Request, .map_title_section{
        width: 90vw !important;
    }
    .info_section > .address{
        font-size: 12px !important;
    }

    .info_input, .check_wrap{
        width: 90vw !important;
    }        
   
    .map{
        width: 90vw !important;
        height: 90vw !important;
      

    }
}