@charset "utf-8";
@import url(media_sub.css);

/**** Media Query *********************************/	

@media (max-width:1720px){
    .header .inner {padding: 0 20px;}
}

@media (max-width:1600px){}

@media (max-width:1440px){
    body {font-size: 15px;}

    .sv_sec .tit_box {padding: 0 20px;}

    .footer .inner {padding: 0 20px;}
}

@media (max-width:1200px){}

@media (max-width:1024px){
    body {font-size: 14px;}

    .header {height: 100px;}
    .header .hd_nav {display: none;}

    .top_btn {right: 10px; bottom: 10px;}
    .top_btn img {width: 40px;}

    .footer .rgt_bx {width: 100%; margin-top: 15px;}
    .footer .rgt_bx p {align-self: flex-start; margin-top: 10px;}
}

@media (max-width:768px){
    body {font-size: 13px;}

    .header {height: 80px;}
    .header .logo a {width: 230px; background-size: contain;}

    .mv_sec {display: flex; align-items: center; justify-content: center; background-color: #232020;}
    .mv_sec .mv_img_pc {display: none;}
    .mv_sec .mv_img_m {display: block; min-width: 400px; width: auto; max-width: 100%;}

    .mv_sec .slogan {top: auto; bottom: 380px;}
    .mv_sec .slogan h2 {font-size: 3em;}
    .mv_sec .slogan h4 {margin-top: 15px;}

    .mv_sec ul {justify-content: flex-start; padding: 0 20px;}
    .mv_sec ul li {width: 32%; margin-right: 2%;}
    .mv_sec ul li:nth-child(3n) {margin-right: 0;}
    .mv_sec ul li:nth-child(n+4) {margin-top: 2%;}
}

@media (max-width:640px){}

@media (max-width:480px){
    body {font-size: 12px;}

    .mv_sec .slogan {bottom: 270px;}
    .mv_sec ul.on {bottom: 20px;}
}

@media (max-width:400px){
    .mv_sec .slogan {bottom: 240px;}
}