/* 모바일 사이즈 -320 */
@media screen and (min-width : 20em){

    body{
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    .hidden{
        opacity:0;
        transform:translateY(25%);
        transition : opacity 1s, transform 1s;
    }

    .visible{
        opacity:1;
        transform:translateY(0);
    }
    .top_bar{
        width:100vw;
        height: 5.6rem;
        position:fixed; 
        top:0;
        display:flex;
        justify-content:space-between;
        align-items:end;
        box-sizing: border-box;
        background-color: var(--color-green02);
        box-shadow: var(--box-shadow-y);
        border-radius: 0 0 1.6rem 1.6rem;
        z-index: 999;
     }

     .logo_home{
        width:7.8rem;
        bottom:0.6rem;
        height:auto;
        position:absolute;
        left:1.6rem;
     }

     .logo_home img{
        width:100%;
        height:100%;
     }

     .menu_container{
        display:none;
     }

     .menu_mobile{
        width:6rem;
        position:absolute;
        right:1.6rem;
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        box-sizing: border-box;
        height:2.2rem;
        bottom:1.2rem;
     }

     .menu_mobile00{
        position:relative;
        width:100%;
        height:0.2rem;
        background-color: var(--color-base);
        transition : all 0.4s ease-in-out;
     }

     .menu_mobile01{
        transform-origin : left top;
     }

     .menu_mobile03{
        transform-origin : left bottom;
     }

     .menu_mobile_container { 
        width:100%;
        height:57.5rem;
        background-color: var(--color-base);
        position:fixed;
        z-index: 998;
        border-radius: 0 0 1.6rem 1.6rem;
        box-shadow: var(--box-shadow-y);
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 7.5rem;
        transform:translateX(100%);
     }

     @keyframes mobile_menu_open{
        from{
            transform:translateX(100%);
        }
        to{
            transform:translateX(0);
        }
     }

     @keyframes mobile_menu_close{
        from{
            transform:translateX(0);
        }
        to{
            transform:translateX(100%);
        }
     }
     

     .menu_mo_li{
        font-size: 2.4rem;
        font-weight: var(--font-semibold);
        text-align: center;
        padding-bottom: 3rem;
     }

     .menu_mobile_contact{
        padding-bottom:0;
     }



     .wrap{
        width:100vw; 
        position:relative;
        height:fit-content;
        display:flex;
        justify-content:center;
        padding-top:5.6rem;
     }
     .container{
        position:relative;
        box-sizing: border-box;
        padding:0 1.6rem;
        width:100%;
     }
 
     .main_home{
        width:100%;
        box-sizing: border-box;
        padding-top:8vh;           
        padding-top:8dvh;
        position:relative; 
        display:grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap:1rem;
        margin-bottom:var(--scroll-space-mobile);
     }

     .green{
        grid-column: 1 / 5;
        grid-row:1;
        display:flex;
        justify-content: flex-start;
     }
     .green img{ 
        width:100%;
        height:auto;
     }

     .main_logo{
        padding-top: 3.6rem;
        grid-column : 1 / 5;
        grid-row : 4;
        width:100%;
        height:fit-content;
     }
     .main_logo img{
        width:100%;
        height:auto;
     } 

    .bow{
        grid-column: 2 / 5;
        grid-row :2;
        padding-top:1rem;
    }
    .bow img{
        width:100%;
        height:auto;
    }

    .main_text{
        grid-column :1/5;
        grid-row :3;
        width:100%;
        font-size:2rem;
        line-height: 2.4rem;
        font-weight:var(--font-medium);
        padding-top: 2.4rem;
        text-align: right;
    }






    .about{
        display:flex;
        flex-direction:column-reverse;
        height:auto;
        position:relative;
        margin-bottom:var(--scroll-space-mobile);
        width:100%;
        padding-top:var(--scroll-space-top-mobile);
        box-sizing: content-box;
    }

    .about_box {
        width:100%;
        display:flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: flex-start;
        box-shadow: var(--box-shadow-y);
        position:relative;
        padding-top:0;
        transition : all 0.4s ease-in-out;
    }

    .about00{
        background-color: var(--color-green02);
        height: 40rem;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .about01{
        background-color: var(--color-green03);
        height:18rem;
    }
    .about02{
        background-color: var(--color-green04);
        height:18rem;
    }
    .about03{
        background-color: var(--color-green05);
        height:18rem;
    }

    .about00_title{
        width:100%;
        display:flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 7.2rem;
        line-height: 7.6rem;
        font-weight:var(--font-bold);
        color:var(--color-base);
        text-align: right;
        position:relative;
        padding-top: 2rem;
        padding-right:1rem;
    }

    .about00_text{
        position:relative;
        padding-left:1rem;
        padding-bottom:2rem;
        width:100%;
        font-size: 1.9rem;
        line-height: 2.4rem;
        font-weight:var(--font-regular);
        color: var(--color-white);
    }

    .about_blur{ 
        width:100%;
        height:18rem;
        position:absolute;
        top:0;
        left:0;
        background-color:rgba(0,0,0,0.5);
        backdrop-filter:blur(5px);
        -webkit-backdrop-filter : blur(5px);
        transition:all 0.4s ease-in-out;
        display:none;
    }


    .about_number{  
        position:relative;
        height:auto;
        font-size: 7.2rem;
        font-weight :var(--font-bold);
        color:var(--color-base);
        color:var(--color-white);
        width:fit-content;
        display:block;
        padding-top: 2rem;
        padding-left:1rem;
        transition:all 0.4s ease-in-out;
    }

 
    .about_title{
        position:absolute;
        width:100%;
        height:18rem;
        display:flex;
        justify-content: center;
        align-items: center;
        font-size:3.2rem;
        font-weight:var(--font-medium);
        line-height: 3.6rem;
        color:var(--color-white);
        padding-left: 25%;
        transition:all 0.4s ease-in-out;
        display:none;
    }

    .about_text{
        transition:all 0.4s ease-in-out;
        display:none;
    }

    .about_icon{
        position:absolute;
        top:3.6rem;
        width:75%;
        right:0;
        display:flex;
        justify-content: center;
        clip-path: inset(0 0 3.6rem 0);
        transition:all 0.4s ease-in-out;
    }
    .about_icon img{
        width:18rem;
        height:18rem;
    }






    .about_li_mo_active{
        height:54rem;
    }


    .about_title_mo_active{
        position:absolute;
        width:100%;
        height:fit-content;
        display:flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size:3.2rem;
        font-weight:var(--font-medium);
        line-height: 3.6rem;
        color:var(--color-white);
        left:1rem;
        top:23.6rem;
        padding-left: 0;
    }

    .about_icon_mo_active{
        clip-path :none;
    }

    .about_text_mo_active{
        position:absolute;
        left:1rem;
        bottom:1rem;
        height:fit-content;
        display:flex;
        align-items: center;
        font-size:1.6rem;
        line-height: 2.2rem;
        font-weight :var(--font-medium);
        color:var(--color-base);
    } 






    .vision{
        width:100%;
        height:fit-content;
        display:flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        padding-bottom:var(--scroll-space-mobile);
        padding-top:var(--scroll-space-top-mobile);
        
    }

    .vision_image{
        width:100%;
        height:fit-content;
    }

    .vision_content{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position:relative;
    }

    .vision_logo{
        width:28.6rem;
        position:relative;
        height:auto;
        padding-bottom: 3.4rem;
    }

    .vision_text{
        width:100%;
        position:relative;
        font-size:2rem;
        line-height:2.6rem;
        font-weight: 650;
        color:var(--color-black);
        text-align:center;
    }





    .mission{
        width:100%;
        height:fit-content;
        display:flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        padding-bottom:var(--scroll-space-mobile);
        padding-top:var(--scroll-space-top-mobile);
    }

    .mission_image{
        width:100%;
        height:fit-content;
    }


    .mission_content{
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width:100%;
        height:100%;
    }

    .mission_logo{
        width:28.6rem;
        height:auto;
        padding-bottom: 3.4rem;
        position:relative;
    }


    .mission_text{
        width:100%;
        position:relative;
        text-align: right;
        font-size: 2rem;
        font-weight:650;
        line-height:2.6rem;
        color:var(--color-black);
        text-align: center;
    }




    .service{
        width:100%;
        position:relative;
        height:fit-content;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-bottom:var(--scroll-space-mobile);
        padding-top:var(--scroll-space-top-mobile);
    }
 
    .service_title{
       font-size: 4.8rem;
       font-weight: var(--font-bold);
       color:#000000;
       padding-bottom: 4rem; 
    }

    .service_container{
        width:100%;
        height:fit-content;
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .service00{
        width:100%;
        height:fit-content;
        display:inline-block;
        padding-bottom: 6rem;
        position:relative;
    }
    .service05{
        padding-bottom:0;
    }


    .service_icon{
        width:10rem;
        position:relative;
        height:fit-content;
    }

    .service_icon img{
        width:10rem;
        height:auto;
    }

    .service_text{
        width:100%;
        height:fit-content;
        position:relative;
        display:flex;
        flex-direction: column;
    }

    .service_text_title{
        width:calc(100% - 10rem);
        font-size: 2.4rem;
        font-weight:var(--font-semibold);
        color:var(--color-black);
        padding-bottom: 1rem;
    }

    .service_text_text{
        width:100%;
        height:fit-content;
        padding:2.4rem 2rem;
        box-sizing: border-box;
        border-radius: 1.5rem;
        box-shadow : inset 3px 3px 5px rgba(0,0,0,0.5);
        font-size:1.8rem;
        line-height: 2.2rem;
        color:var(--color-white);
        font-weight: var(--font-regular);
    }


    .service01_text_text{
        background-color: var(--color-green01);
    }
    .service02_text_text{
        background-color: var(--color-green02);
    }
    .service03_text_text{
        background-color: var(--color-green03);
    }
    .service04_text_text{
        background-color: var(--color-green04);
    }
    .service05_text_text{
        background-color:var(--color-green05);
    }



    .contact{
        position:relative;
        width:100%;
        height:auto; 
        padding-top:var(--scroll-space-top-mobile);
    }

    .contact_container{
        position:relative;
        box-sizing: border-box;
        padding:0 1.6rem;
        width:100%;
        height:auto;
        display:grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .contact_box01{
        grid-column:1/5;
        grid-row:1;
        width:100%;
        height:auto;
        display:flex;
        flex-direction:column;
        justify-content: flex-start;
        margin-bottom:3.6rem;
    }

    .contact_box02{
        grid-column:1/5;
        grid-row:2;
        width:100%;
        height:32.8rem;
        display:flex;
        flex-direction:column;
        justify-content: space-around;
        background-color: var(--color-green02);
        padding:0 1rem;
    }

    .contact_title{
        font-size:6rem;
        font-weight:var(--font-bold);
        color:var(--color-green05);
        padding-bottom:2.4rem;
    }

    .contact_text{
        font-size: 1.6rem;
        line-height: 2.2rem;
        font-weight: var(--font-medium);
        color:var(--color-black);
    }

    .contact_li{
        width:100%;
        height:fit-content;
        display:flex;
        flex-direction: column;
    }

    .contact_li_title{
        font-size:2rem;
        font-weight: var(--font-bold);
        color:var(--color-base);
        padding-bottom:0.8rem;
    }

    .contact_li_text{
        font-size: 1.6rem;
        line-height: 2.2rem;
        font-weight: var(--font-medium);
        color:var(--color-black);
    }


    .footer{
        width:100vw;
        position:relative;
        display:flex;
        justify-content: center;
        height:10rem;
    }

    .footer_container{
        width:100%;
        position:relative;
        padding:0 1.6rem;
        height:100%;
        display:flex;
        align-items: center;
        justify-content: space-between;
    }

    .footer_text{
        width:fit-content;
        display:flex;
        justify-content: center;
        font-size:1.6rem;
        font-weight:var(--font-medium);
        position:absolute;
    }

    .scroll_top{
        position:absolute;
        right:1.6rem;
        display:flex;
        align-items:center;
    }

    .top_text{
        font-size: 1.6rem;
        font-weight: 700;
        color:var(--color-black);
        padding-right: 1rem;
    }

    .top_icon{
        width:4rem;
        height:4rem;
        border-radius: 50%;
        background-color:var(--color-green05) ;
        display:flex;
        justify-content: center;
        align-items: center;
    }

    .top_icon img{
        width:1.8rem;
        height:auto;
    }



}