@charset "UTF-8";

/* header */
header{position: fixed; top:0; left:0; width:100%; z-index: 999;}
header .header-inner{max-width:1920px; padding:4rem 6rem; margin:0 auto; display: flex; align-items: center; justify-content: space-between;}
header .header-inner nav ul{display: flex; gap:7.2rem;}
header .header-inner nav ul li a{font-size:1.7rem; font-weight: 600;}
header .header-inner .util{display: flex; gap:0.5rem;}
.mobile-menu{display: none;}

/* footer */
footer .footer-inner{max-width:1920px; padding:0 6rem; margin:0 auto;}
footer .footer-inner .footer-info{padding:6rem 0 7rem; display: flex; align-items: flex-end; justify-content: space-between; border-top:1px solid #444;}
footer .footer-inner .footer-info .footer-l img{margin-bottom:3rem;}
footer .footer-inner .footer-info .footer-l ul{display: flex; flex-direction: column; gap:1.2rem;}
footer .footer-inner .footer-info .footer-l ul li{font-size:1.4rem; color:#787878;}
footer .footer-inner .footer-info .footer-l ul li .division-bar{margin:0 0.5rem;}
footer .footer-inner .footer-info .footer-r p{font-size:1.4rem; color:#787878;}


@media all and (max-width:1400px){    

    /* header */
    header .header-inner{padding:3rem;}
    header .header-inner nav ul{gap:6.2rem;}

    /* footer */
    footer .footer-inner{padding:0 3rem;}
    footer .footer-inner .footer-info{padding:3rem 0 4rem;}

}

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

    /* header */
    header .header-inner nav{display: none;}
    header .header-inner > .util{display: none;}
    .mobile-menu{padding:0.6rem 1.2rem; display: flex; align-items: center; border:1px solid #fff; border-radius:40px;}
    .mobile-menu span{font-size: 1.8rem; color:#fff;}
    .mobile-menu img{margin-left:0.5rem; width:24px}

    /* mobile */
    .mobile-box{position: fixed; top:0; left:0; width: 100%; height:100%; z-index: 999; background-color: rgba(0,0,0,0.7);}
    .mobile-box .mobile-box-inner{padding:3rem 3rem 4rem; background:#1a1a1a;}
    .mobile-box .mobile-box-inner .mobile-top{padding-bottom:3rem; display: flex; align-items: center; justify-content: space-between; border-bottom:1px solid #444;}
    .mobile-box .mobile-box-inner .mobile-top button{padding:0.6rem 1.2rem; display: flex; align-items: center; border:1px solid #fff; border-radius:40px;}
    .mobile-box .mobile-box-inner .mobile-top button span{font-size: 1.8rem; color:#fff;}
    .mobile-box .mobile-box-inner .mobile-top button img{margin-left:0.5rem; width:24px}
    .mobile-box .mobile-box-inner .mobile-list{padding:3.4rem 1.2rem; display: flex; flex-direction: column; gap:3.4rem;}
    .mobile-box .mobile-box-inner .mobile-list li a{font-size:2rem; display: flex; align-items: center;}
    .mobile-box .mobile-box-inner .mobile-list li a img{width:24px; margin-left:0.5rem;}
    .mobile-box .mobile-box-inner .util{padding:4rem 1.2rem 0; gap:0.6rem;}

    /* footer */
    footer .footer-inner .footer-info{flex-direction: column; align-items: flex-start;}
    footer .footer-inner .footer-info .footer-r{margin-top:3rem;}
}

@media all and (max-width:767px){

    /* header */
    header .header-inner{padding:3rem 2rem;}
    header .header-inner h1 img{width:135px;}
    .mobile-menu{border-radius:20px;}
    .mobile-menu span{font-size: 1.2rem;}
    .mobile-menu img{width:16px}

    /* mobile */
    .mobile-box .mobile-box-inner{padding:3rem 2rem 4rem;}
    .mobile-box .mobile-box-inner .mobile-top{padding-bottom:3rem;}
    .mobile-box .mobile-box-inner .mobile-top > img{width: 135px;}
    .mobile-box .mobile-box-inner .mobile-top button{border-radius:20px;}
    .mobile-box .mobile-box-inner .mobile-top button span{font-size: 1.2rem;}
    .mobile-box .mobile-box-inner .mobile-top button img{width:16px}
    .mobile-box .mobile-box-inner .mobile-list{padding:2.4rem 1.2rem; gap:2.4rem;}
    .mobile-box .mobile-box-inner .mobile-list li a{font-size:1.6rem;}
    .mobile-box .mobile-box-inner .mobile-list li a img{width:16px;}
    .mobile-box .mobile-box-inner .util{padding:3rem 1.2rem 0;}

    /* footer */
    footer .footer-inner .footer-info .footer-l img{width:174px; margin-bottom:4rem;}
    footer .footer-inner .footer-info .footer-l ul{gap:1rem;}
    footer .footer-inner .footer-info .footer-l ul li{font-size:1.3rem;}
    footer .footer-inner .footer-info .footer-r p{font-size:1.2rem}
    
}