.menuArea{
	position:fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	/*transform:translateX(-100%);*/
	transition: all .7s;
    opacity:0;
    display:none;
    padding-top:150px;
    align-items:flex-start;
}

.menuArea.active{
	animation-name:menuActive; 
    animation-iteration-count: 1;
    animation-duration: .5s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    display:flex;
}



@keyframes menuActive{
    0%{}
    100%{ opacity:1}
}




.menuImg{
    position:relative;
    width:55%;
    height:700px;
    
}

.menuImg aside{
    position:absolute;left:0;top:0;
    width:100%;height:100%;
    opacity:0;
    transition:.5s;
}

.menuImg aside.active{
    opacity:1;
}

.menuImg aside img{
    object-fit:cover;
    width:100%;height:100%;
}

.menuList{
    flex:1;
    padding-left:150px;
}

.menuList li{padding:20px 0}
.menuList li h3{
    font-size:42px;
    color:var(--brown2);
    margin-bottom:.2em;
}

.menuList li h4{
    font-size:25px;
    color:var(--blue);
}

.menuList li a:after{
    width: 0px;
    height:2px;
    content:"";
    display:block;
    background:var(--blue);
    margin:20px 0;
    transition:.5s;
}

.menuList li a:hover:after
{
    width: 20px;
}

.block{
    width:100%;
    height:100%;
    background:#fff;
    opacity:0;
    transition:.5s;
    position:fixed;
    z-index: -1;
    left:0;
    top:0;
}

.block.active{opacity:1}


header .btnMenu{}
header .btnMenu hr {width:30px;height:3px;margin:0;border:none;background:#fff;margin-bottom:5px;transition:.5s}
header .btnMenu hr:first-child{width:15px}
header a.btnMenu:hover hr{width:30px;}

header.active  .btnMenu hr {background:var(--blue);}

header .btnMenu.active hr.hr2{width:0;opacity:0;}

header .btnMenu.active hr.hr1{transform: rotate(-45deg);width:20px;margin-bottom:2px;}
header .btnMenu.active hr.hr3{transform: rotate( 45deg);width:20px;}

body.freeze::-webkit-scrollbar{
   display:none;
}




/*PC-S*/
@media  (max-width:1200px) {
    .menuList{padding-left:50px;}

}

@media  (max-width:768px){

    .menuImg aside{display:none;}
	.menuArea{padding-top: 120px;}
    .menuArea.active{display:block;}

     .menuList li{padding:0;}

     .menuList li h3{
        font-size:30px;
    }

    .menuList li h4{
        font-size:18px;
    }

    .mobileFooter{
        position: fixed;
        bottom: 0;
        left:0;
        width: 100%;
        z-index: 99999;
        /*background:#fff;*/
        padding:15px;
        display:none;
    }

     .mobileFooter.active{
        display:block
     }

    .recommendLink{color:var(--blue);flex:1;padding-left:10px;text-decoration:underline;}
    .mobileFooter .footerNav a img{height:30px;}

}

@media  (min-width:767px){
    .mobileFooter{display:none;}
}