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


 /* 헤더 */
.header { position:absolute; top:0; left:0; width:100%; z-index:1000; }

.header_in {width:100%;  max-width:1200px; margin:0 auto; padding:0 20px; height:80px; display:flex; align-items:center; justify-content:space-between; box-sizing: border-box; }

.header .logo img { height:50px; }
.header .logo img.color { display: block }
.header .logo img.w { display: none }

.header .nav .gnb { display:flex; gap:80px; }
.header .nav .gnb > li { position:relative; }
.header .nav .gnb > li > a { display:block; font-size:19px; font-weight:600; color:#000; padding:28px 0; transition:0.2s; }
.header .nav .gnb > li:hover > a { color:#000;}

.header .nav .gnb > li > a::after { content:""; display:block; width:0; height:3px; background:var(--sub); transition:0.3s; margin-top:6px; }
.header .nav .gnb > li:hover > a::after { width:100%; }

/* 드롭다운 */
.header  .sub { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.08); padding:17px 0; width:200px; opacity:0; visibility:hidden; transition:0.25s; }
.header  .nav .gnb > li:hover .sub { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* 서브 메뉴 */
.header .sub li a { display:block; padding:5px 20px; font-size:15px; color:#222; font-weight:300; transition:0.2s; }
.header .sub li a:hover {text-decoration:underline}

.ham {width:30px; height:30px; border-radius:5px;  display:flex; align-items:center; justify-content:center; border:1px solid #333; color:#333}



.in {width:100%; margin:0 auto;  max-width:1200px; }
 
@media all and (max-width:1200px) {
  .in {padding:0 4%; box-sizing:border-box }
  .header_in {padding:0 4%; }
  .header .nav .gnb  {margin-right:50px}
}

.arrow { opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: arrowMove 1.8s ease-in-out infinite; }
.arrow.arrow-second { transform: translate(-50%, -70%); animation-delay: 0.3s; }
.arrow:before, .arrow:after { background: #333; content: ""; display: block; height: 3px; position: absolute; left: 0; width: 30px; }
.arrow:before { transform: rotate(45deg) translateX(-23%); transform-origin: top left; }
.arrow:after { transform: rotate(-45deg) translateX(23%); transform-origin: top right; }

.arrow.arrow-second:before, .arrow.arrow-second:after { top: -10px; }

@keyframes arrowMove {
  0% {
    opacity: 0;
    transform: translate(-50%, -90%);
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -20%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 20%);
  }
}
 
 
footer {width:100%; background-color:#fff; display:inline-block;  font-size:16px;  font-weight:300;  padding:50px 0;  box-sizing:border-box; line-height:1.5em;    color:#444; border-top:1px solid #ddd; margin-top:-3px  }
footer div.flex {gap:20px; align-items:center}
footer div.flex > div {  padding:0 4%; box-sizing:border-box; width:100%; display:inline-block  }
footer b {font-weight:500; color:#222}
footer .copy {color:#666; font-size:15.5px}
footer .copy a {color:#333}
footer .flex {gap:15px}
footer .flex li {position:relative; cursor:pointer; padding-right:15px; }
footer .flex li:after {content:''; width:1px; height:10px; background-color:#333; display:inline-block; position:absolute; right:0; top:6px}
footer .flex li:last-child:after {display:none}

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

 @media all and (max-width:800px) {
		.header_in { width: 100%; color: #fff } 
		.nav {display:none}
		footer { font-size: 14px }
		footer .in.flex { flex-wrap: Wrap; gap: 10px 0 }
 }