/* 공통 */
#container {width:100%; min-height:800px; margin:0; overflow: hidden; }
.inner { max-width: 1430px; margin: 0 auto; padding: 0 15px; }
.inner_min { max-width: 1230px; margin: 0 auto; padding: 0 15px; }
.inner_no { padding: 0 70px; }
@media screen and (max-width:800px) {     
    /* 공통 */     
    .inner_no { padding: 0 15px; } 
}


/* header */
#header { position: fixed; display: flex; justify-content: space-between; width: 100%; padding: 40px 70px 0 45px; z-index: 100; }
#header h1 img { width: 60px; }
#header .nav_ul { display: flex; flex-direction: column; gap: 15px; }
#header .nav_ul a { font-weight: 500; font-size: 15px; color: #fff; }
#header .nav_ul a:hover { -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);  -webkit-mask-size: 200%; animation: shine 2s infinite; }
@-webkit-keyframes shine {         
    from {-webkit-mask-position: 150%;}          
    to { -webkit-mask-position: -50%; } }

body.black #header h1 img{filter: invert(100%);}
body.black .menu-trigger-bar{background-color: #000;}
/* body.black .menu-bg{background-color: #000;}
body.black .menu a{color: #fff;}
body.black .menu a:before{background-color:#fff} */

body.black2 #header h1 img{filter: invert(100%);}
body.black2 .menu-trigger-bar{background-color: #000;}
body.black2 #header .nav_ul a { color: #000; font-weight: 600; }


.nav_btn{ position: absolute; top: 40px; right: 70px; transition: opacity 0.5s ease, top 0.5s ease; }
.nav_btn2{ opacity: 0; position: absolute; top: -100px; right: 70px; transition: opacity 0.5s ease, top 0.5s ease; }
.nav_btn2.active{ opacity: 1; top: 0; }
.nav_btn.hide{ /* display: none; */ opacity: 0; top: -400px; }
.nav_menu{ position: fixed; width: 0; height: 100vh; left: 0; top: 0; z-index: 99; }
.nav_menu.on{ z-index: 99; width: 100%; }

.menu-trigger, .close-trigger { position: absolute; top: 40px; right: 0px; display: block; width: 42px; height: 42px; cursor: pointer; z-index: 333; scale: 0.8; }
.menu-trigger:hover .menu-trigger-bar:before, .close-trigger:hover .menu-trigger-bar:before { width: 100%; }
.menu-trigger:hover .close-trigger-bar:before, .close-trigger:hover .close-trigger-bar:before { width: 100%; }

.close-trigger { z-index: 5; top: 42px; }

.menu-trigger-bar { display: block; width: 100%; height: 4px; background-color: white; margin-bottom: 6px; transform: rotate(-45deg); position: relative; }
.menu-trigger-bar:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 0%; height: 100%; background-color: rgba(0, 0, 0, 0.2); transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
.menu-trigger-bar.top { width: 50%; }
.menu-trigger-bar.middle:before { left: auto; right: 0; }
.menu-trigger-bar.bottom { width: 50%; margin-left: 50%; }

.close-trigger-bar { display: block; width: 100%; height: 4px; background-color: #222222; position: relative; }
.close-trigger-bar:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 0%; height: 100%; background-color: rgba(255, 255, 255, 0.2); transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
.close-trigger-bar.left { transform: translateX(100px) translateY(-100px) rotate(-45deg); }
.close-trigger-bar.right { transform: translateX(-100px) translateY(-100px) rotate(45deg); top: -3px; }

.inner-container, 
.menu-container { position: absolute; height: 100%; width: 100%; left: 0; top: 0; }
.inner-container { z-index: 20; }
.menu-container { display: flex; align-items: center; }


.menu { display: block; width: 100%; padding: 20%; }
.menu li { text-align: left; display: block; padding: 15px 0; }
.menu a { position: relative; text-decoration: none; color: #222222; display: inline-block; font-size: 100px; font-weight: 800; }
.menu a:hover:before { opacity: 1; transform: translateX(0px); }
.menu li a:hover { transition: all ease 0.2s; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #212121; }
.menu a:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 30px; height: 6px; opacity: 0; background-color: #222222; transform: translateX(100px); transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }



.menu-bg {   position: absolute;   display: block;   width: 200%;   left: -53%;   top: -25%;   height: 40%;   background-color: white; }
.menu-bg.middle { top: 29%; left: -53%; transform: rotate(0deg) scaleY(0); }
.menu-bg.top { left: -34%; top: 0; transform: rotate(0deg) translateY(-152%); }
.menu-bg.bottom { top: 105%; transform: rotate(0deg) translateY(25%); left: -20%; }

@media screen and (max-width:1024px) {
    /* header */  
    .menu { padding: 10%; }
    .menu a { font-size: 60px; }
}

@media screen and (max-width:800px) {     
    /* header */     
    #header { padding: 20px 30px 0 20px; }     
    #header .nav_ul { gap: 5px; }     
    #header .nav_ul a { font-size: 14px; }  
    .menu a { font-size: 20px; }
    .menu li a:hover { -webkit-text-fill-color: revert; -webkit-text-stroke: 0; }
    .menu a:before { width: 20px; height: 2px; }

    .nav_btn { top: 20px; right: 30px; }
    .menu-trigger, .close-trigger { top: 16px; right: -50px; scale: 0.7; }
}



/* footer */
#footer { position: relative; z-index: 100; background: #fff; clear: both; }
#footer .address { display: flex; align-items: center; justify-content: space-between; height: 130px; color: #111; }
#footer li em { display: block; padding-bottom: 6px; font-size: 15px; font-weight: 900; }
#footer li p { font-size: 14px; font-weight: 600; }
#footer li b { font-size: 30px; font-weight: 700; }

@media screen and (max-width:620px) {     
    /* footer */     
    #footer .address { flex-direction: column; gap: 6px; height: auto; padding: 20px 0 40px; }     
    #footer .address img { padding-bottom: 20px; }     
    #footer .address em { display: none; }     
    #footer li b { font-size: 18px; } 
}