@charset "utf-8";


/* =================================
   MAIN VISUAL
================================= */


.main-visual{

    width:100%;

    height:100vh;

    min-height:800px;

    position:relative;

    overflow:hidden;

}



.mainSwiper{

    width:100%;

    height:100%;

}



.mainSwiper .swiper-wrapper{

    width:100%;

    height:100%;

}



.mainSwiper .swiper-slide{

    width:100%;

    height:100%;

    position:relative;

}





/* =================================
   BACKGROUND
================================= */


.main-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    background-position:center center;

    background-repeat:no-repeat;

    background-size:cover;

}



.bg01{

    background-image:url("../images/main01.jpg");

}



.bg02{

    background-image:url("../images/main02.jpg");

}



.bg03{

    background-image:url("../images/main03.jpg");

}





.main-bg::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.18);

}







/* =================================
   MAIN COPY
================================= */


.main-copy{

    position:absolute;

    left:13.5%;

    top:34%;

    z-index:2;

    color:#fff;

}



.main-copy span{

    display:block;

    font-size:22px;

    font-weight:500;

    margin-bottom:15px;

}



.main-copy h2{

    font-size:64px;

    font-weight:700;

    line-height:1.2;

    letter-spacing:-0.05em;

    margin-bottom:25px;

}



.main-copy p{

    font-size:23px;

    line-height:1.6;

}







/* =================================
   BUTTON
================================= */


.main-btn{

    display:flex;

    gap:20px;

    margin-top:45px;

}



.main-btn a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:220px;

    height:55px;

    border-radius:6px;

    color:#fff;

    font-size:18px;

    font-weight:500;

    background:linear-gradient(
        90deg,
        #00c8d7,
        #0065c3
    );

    transition:.3s;

}



.main-btn a:hover{

    transform:translateY(-3px);

}



.main-btn a:last-child{

    background:#233f62;

    border:1px solid rgba(255,255,255,.5);

}







/* =================================
   SERVICE MENU
================================= */


.service-menu{

    position:absolute;

    z-index:5;

    left:50%;

    bottom:55px;

    transform:translateX(-50%);

    width:74%;

}



.service-menu ul{

    display:flex;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(5px);

    border-radius:10px;

    overflow:hidden;

}



.service-menu li{

    flex:1;

    min-height:150px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#fff;

    border-right:1px solid rgba(255,255,255,.3);

    transition:.3s;

}



.service-menu li:last-child{

    border-right:0;

}



.service-menu img{

    width:55px;

    height:55px;

    object-fit:contain;

    margin-bottom:15px;

}



.service-menu span{

    font-size:16px;

    line-height:1.5;

}





/* hover */


.service-menu li:hover span{

    color:#00c8d7;

}



.service-menu li:hover img{

    transform:translateY(-5px);

}








/* =================================
   SWIPER
================================= */


.mainSwiper .swiper-pagination{

    bottom:220px;

}



.mainSwiper .swiper-pagination-bullet{

    width:10px;

    height:10px;

    background:#fff;

    opacity:.5;

}



.mainSwiper .swiper-pagination-bullet-active{

    opacity:1;

}







/* =================================
   MAIN CONTENT
================================= */


.main-business{

    padding:120px 0;

}



.main-business .section-title{

    text-align:center;

}



.main-business .section-title h3{

    font-size:38px;

}



.main-business .section-title p{

    margin-top:20px;

    color:#777;

    line-height:1.7;

}







/* =================================
   TABLET
================================= */


@media(max-width:1200px){


    .main-copy{

        left:8%;

    }



    .main-copy h2{

        font-size:52px;

    }



    .main-copy p{

        font-size:20px;

    }



    .service-menu{

        width:85%;

    }


}







/* =================================
   MOBILE
================================= */


@media(max-width:768px){


    .main-visual{

        height:100vh;

        min-height:720px;

    }



    .main-bg{

        background-size:auto 100%;

        background-position:center;

    }





    /* COPY */


    .main-copy{

        left:20px;

        right:20px;

        top:22%;

    }



    .main-copy span{

        font-size:14px;

        margin-bottom:10px;

    }



    .main-copy h2{

        font-size:34px;

        line-height:1.3;

        margin-bottom:18px;

    }



    .main-copy p{

        font-size:15px;

        line-height:1.6;

    }







    /* BUTTON */


    .main-btn{

        margin-top:25px;

        gap:10px;

    }



    .main-btn a{

        width:145px;

        height:45px;

        font-size:14px;

    }







    /* SERVICE MENU */


    .service-menu{

        width:calc(100% - 30px);

        bottom:20px;

    }



    .service-menu ul{

        display:grid;

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

    }



    .service-menu li{

        min-height:85px;

        padding:10px 2px;

    }



    .service-menu img{

        width:28px;

        height:28px;

        margin-bottom:5px;

    }



    .service-menu span{

        font-size:10px;

        line-height:1.3;

    }


}







/* =================================
   SMALL MOBILE
================================= */


@media(max-width:480px){


    .main-copy h2{

        font-size:30px;

    }



    .main-copy p{

        font-size:14px;

    }



    .service-menu{

        bottom:15px;

    }



    .service-menu li{

        min-height:75px;

    }



    .service-menu span{

        font-size:9px;

    }


}