/* ==================================================
   HOMAC FACTORY
   Responsive CSS
================================================== */



/* ==================================================
   Tablet
   1024px 이하
================================================== */


@media(max-width:1024px){


    .inner{

        padding:0 30px;

    }



    /* Header */

    #header .inner{

        height:85px;

    }



    #header nav ul{

        gap:25px;

    }



    #header nav li a{

        font-size:14px;

    }





    /* Hero */


    #visual{

        min-height:750px;

    }



    #visual h2{


        font-size:58px;


    }



    #visual p{


        font-size:18px;


    }



    #visual .image{


        width:400px;


    }





    /* Brand */


    #brand .contents{


        gap:40px;


    }



    #brand .left h3{


        font-size:34px;


    }






    /* Menu */


    .menu-list{


        gap:20px;


    }



    .menu-list article{


        height:420px;


    }





    /* Strength */


    .strength-list{


        grid-template-columns:repeat(2,1fr);


    }





    /* Startup */


    .step div{


        width:150px;

        height:150px;


        font-size:18px;


    }


    .step div:not(:last-child)::after{


        width:50px;

        right:-50px;


    }





    /* Fixed Contact */


    .fixed-contact input{


        width:160px;


    }



    .fixed-contact button{


        width:140px;


    }



}









/* ==================================================
   Mobile
   768px 이하
================================================== */


@media(max-width:768px){



    .inner{


        padding:0 20px;


    }





    /* Header */


    #header .inner{


        height:75px;


    }



    .logo img{


        width:130px;


    }




    #header nav{


        display:none;


    }







    /* Hero */


    #visual{


        height:auto;

        min-height:100vh;


    }



    #visual .inner{


        flex-direction:column;

        justify-content:center;

        text-align:center;


        padding-top:100px;


    }



    #visual .txt{


        padding-top:0;


    }



    #visual .txt span{


        font-size:13px;

        letter-spacing:3px;


    }




    #visual h2{


        font-size:42px;

        letter-spacing:-2px;


    }




    #visual p{


        font-size:16px;

        margin-bottom:35px;


    }




    #visual .image{


        width:280px;

        margin-top:40px;


    }








    /* Section Common */


    section{


        padding:80px 0 !important;


    }



    .title{


        margin-bottom:40px;


    }




    .title h2{


        font-size:32px;

        letter-spacing:-1px;


    }







    /* Brand */


    #brand .contents{


        flex-direction:column;


    }



    #brand .left,
    #brand .right{


        width:100%;


    }




    #brand .left h3{


        font-size:28px;


    }



    #brand .left p{


        font-size:15px;


    }






    /* Menu */


    .menu-list{


        grid-template-columns:1fr;


    }



    .menu-list article{


        height:380px;


    }



    .menu-list h3{


        font-size:28px;


    }







    /* Strength */


    .strength-list{


        grid-template-columns:1fr;


    }



    .strength-list .item{


        height:auto;

        min-height:220px;


    }







    /* Gallery */


    .gallerySwiper .swiper-slide{


        height:350px;


    }








    /* Startup */


    .step{


        flex-direction:column;


        gap:30px;


    }




    .step div{


        width:160px;

        height:160px;


    }




    .step div:not(:last-child)::after{


        display:none;


    }







    /* FAQ */


    #faq li{


        padding:25px;


        font-size:16px;


    }




    #faq li::after{


        right:20px;


    }








    /* Contact */


    #contact form{


        width:100%;


    }



    #contact input{


        height:55px;


    }



    #contact textarea{


        height:130px;


    }








    /* Footer */


    footer{


        padding-bottom:180px;


    }








    /* ==================================
       Mobile Fixed Contact
    ================================== */


    .fixed-contact{


        height:auto;


        padding:15px 0;


    }




    .fixed-contact .inner{


        flex-direction:column;


        gap:10px;


    }



    .fixed-contact input{


        width:100%;


        height:45px;


    }



    .fixed-contact label{


        width:100%;

        justify-content:center;


    }




    .fixed-contact button{


        width:100%;

        height:50px;


    }




}









/* ==================================================
   Small Mobile
   480px 이하
================================================== */


@media(max-width:480px){



    #visual h2{


        font-size:36px;


    }




    #visual .image{


        width:230px;


    }



    .btn{


        width:160px;

        height:55px;


        font-size:15px;


    }



    .menu-list article{


        height:320px;


    }



    .strength-list strong{


        font-size:40px;


    }



    .step div{


        width:140px;

        height:140px;


    }



}