.no-scroll {overflow: hidden; height: 100%;}

/* header */
#header {transition: all 0.5s; height: 10rem; z-index: 99;}
#header .in_header {max-width: 157.8rem;}
#header .logo {display: block; width: 24.6rem; height: 5.4rem; background-image: url('../img/logo.png'); background-repeat: no-repeat;}
#header .nav {width: 82rem;}
#header.act, #header.sub {background: #fff; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16);}
#header.act .logo, #header.sub .logo {background-image: url('../img/logo_on.png');}
#header.act .nav a, #header.sub .nav a {color: #000000;}

@media screen and (max-width: 880px) {
    #header {height: 6.4rem; padding: 0 3rem;}
    #header .in_header {max-width: 100%;}
    #header .logo {width: 16rem; height: 5rem; background-image: url('../img/logo_mo.png'); background-size: 100%;}
    #header .menu {width: 3rem; height: 2rem; background-image: url('../img/mo_menu.png'); background-repeat: no-repeat; background-size: 100%;}
    #header .mo_nav {z-index: 10; top: 0; right: -30.1rem; width: 30.1rem; height: 100vh; padding: 2.5rem; background: #fff; transition: all 0.3s;}
    #header .mo_nav.on {right: 0;}
    #header .mo_nav .close_btn {margin-bottom: 1.6rem;}
    #header .mo_nav .close_btn img {width: 1.4rem;}
    #header .mo_nav .logo2 {display: block; width: 16rem; height: 5rem; background: url('../img/logo_mo_on.png') no-repeat; background-size: 100%; margin-bottom: 3.4rem;}
    #header .mo_nav .nav li:not(:last-child) {margin-bottom: 3.4rem;}
    #header.act .menu, #header.sub .menu {background-image: url('../img/mo_menu_on.png');}
    #header.act .logo, #header.sub .logo {background-image: url('../img/logo_mo_on.png');}
}