body {height:100%; background-color:#000;   color:#fff }
html {height:100%}

 
#wrap {height:100%; position:relative; width:100%;   display:inline-block; }
  
#container {  width:100%; display:inline-block;  }

header {height:90px; position:fixed; z-index:99999;width:100%;  display:flex; align-items:center;  transition: all 0.3s ease-out;}
header * { transition: all 0.3s ease-out; }
header  h1 {width:200px; line-height:0; cursor:pointer;}

header .flex.in {align-items:center;  box-sizing:border-box; padding:0 3.5%; max-width:100%; justify-content:space-between }

header ul {width:800px; display:flex; align-items:center;  justify-content:space-between;}
header ul li {font-size:21px; cursor:pointer; color:#fff;  width:25%; font-weight:500;  text-align:center; position:relative}
header ul li:after {content:'·'; position:absolute; right:0; }
header ul li:last-child:after {content:' ' }

header div.drop_menu {overflow:hidden;  width:100%; position:absolute; background:rgba(0,0,0,.8);   z-index:999;  top:90px; left:50%; box-sizing:border-box;   transform:translateX(-50%);  height:0;  }
header:hover div.drop_menu  {height:185px; border-top:1px solid rgba(255,255,255,.3); border-bottom:1px solid rgba(255,255,255,.3)}
header div.drop_menu ul {width:800px; border-left:1px solid rgba(255,255,255,.3); margin:0 auto; align-items:stretch; }
header div.drop_menu ul li {width:100%; border-right:1px solid rgba(255,255,255,.3); font-size:16px; font-weight:500;  padding:25px 0 }
header div.drop_menu ul li a {width:100%; color:#fff; font-weight:300;  margin-bottom:8px; display:inline-block; text-align:center }
header div.drop_menu ul li a:hover {text-decoration:underline}
header div.drop_menu ul li:after {display:none}

header div.last_link  {width:200px; text-align:right}
header div.last_link a {display:inline-flex; background-color:#fff; color:#111; align-items:center; padding:8px 18px;  border-radius:50px; font-weight:400;   }
header div.last_link a:hover {background-color:var(--main_c);  color:#fff;   }
 

header.over { background:rgba(0,0,0,.8); }
header:hover { background:rgba(0,0,0,.8); }
 

 
.in {width:100%; margin:0 auto; max-width:1240px; }



.fixed_q.over { opacity:1; right:30px}   
.fixed_q { position:fixed; right:-200px;  bottom:20vh;   z-index:999999999;   opacity:0; transition: all 0.6s ease-out; }
.fixed_q a {  z-index:9999; margin:10px 0; background-color:var(--main_c);  color:#fff; width:80px; height:80px;  display:flex; flex-direction:column;  justify-content: center;   align-items: center; border-radius:10px; text-align:center;  transition: all 0.1s ease-out; }
 



footer {width:100%;  display:inline-block; background-color:#000;    font-size:16px;  font-weight:300;  padding:50px 5%;  box-sizing:border-box; line-height:1.5    }
footer b {font-weight:500; color:#fff}
footer a {color:#fff}
footer .flex {gap:50px }
footer .copy {color:#666; font-size:15.5px}
footer .link {margin-left:auto} 
 footer .copy a {color:#666}
 
 



.mouse-dot{ position: fixed; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; border:2px solid #fff; pointer-events: none;      /* 클릭 방해 X */ z-index: 99999; transform: translate(-50%, -50%); mix-blend-mode: difference; /* 어두운 배경에서 잘 보이게(원하면 제거) */ transition: transform .08s linear; }


 @media all and (max-width:1240px) {
		.in {padding:0 4%; box-sizing:border-box }
 }


@media all and (min-width:1000px) {
  header .ham {display:none}
} 


 @media all and (max-width:1000px) {
 		.fixed_q {display:none}
		header ul {display:none}
		header div.last_link {display:none}
		header div.drop_menu {display:none}
}