@charset "utf-8";

/* layout */
.inner {	width: 100%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto; }
.s-inner {	width:92%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto; }


@media all and (max-width:1280px) {
	body#wrap { font-size: 15px; }
}

/* 타블렛 가로 미만 ~ 모바일 */
@media all and (max-width:976px) {
	body#wrap { font-size: 14px; }
}

@media all and (max-width:568px) {
	body#wrap { font-size: 0.75rem; }
}


#header { position:absolute; top:0; width:100%; box-sizing:border-box; z-index:300; margin: 0 auto; text-align: center;
               padding: 1em 0; background-color: #c81313;}
#header.header{background-color: #c81313;}
#header::after { display: none !important; }

#header .member { position: absolute; right: 20px; top: 1em; }
#header .member li { position:relative; float: left; padding: 0 15px; line-height: 80px; }
#header .member li::before { content:''; width:1px; height: 12px; position: absolute; left:0; top: 50%; margin-top: -6px;
                             background: #fff; opacity: 0.2; }
#header .member li:first-child::before { display: none; }
#header .member li a { color:#fff; font-family:'NEXON Lv2 Gothic'; font-size: 0.875em }

#gnb_pc { position: relative; width:100%;  }
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative; }
#gnb_pc > ul > li > div {display:block; font-size:1.375em; color:#212121; line-height:70px; position:relative; width: auto; padding: 0 40px; cursor: pointer; }
#gnb_pc > ul > li > div > a { color:#212121; }
.header #gnb_pc > ul > li > div > a { color:#fff; }
#gnb_pc > ul > li > ul { display: none; width:180px; background:rgba(34, 24, 20, 0.9); position: absolute; top: 70px; left: 50%; margin-left: -90px; }
#gnb_pc > ul > li > ul > li > a {display:block; width:100%; font-size:1em; color:#fff; padding:1em 12px; line-height: 1.4em; border-bottom:1px solid rgba(255,255,255,0.2); box-sizing: border-box; }
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}
#gnb_pc > ul > li:hover > div { background: ;  }
#gnb_pc > ul > li > ul > li > a:hover { color:#fbc510; }

.menuToggle {display:none; right: 0; top: 0;  width:50px; height:70px;  position:absolute; cursor:pointer;}
.menuToggle span {display:block; width:26px; height:2px; background:#000; position:absolute; left:50%; margin-left: -13px; transition:all 0.5s}
.menuToggle span.t {top:25px;}
.menuToggle span.m {top:50%; margin-top:-1px;}
.menuToggle span.b {bottom:25px;}

#gnb_mo {display:none; position:fixed; top:70px; left:0; width:100%; height:100%; background:rgba(230, 34, 63, 0.9); overflow-y:scroll; padding-bottom:100px; -ms-overflow-style:none;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:1.05em; color:#fff; line-height:50px; border-bottom:1px solid rgba(255,255,255,0.2); box-sizing:border-box; padding:0 2%; position:relative; cursor: pointer; }
#gnb_mo > ul > li > div > a { color:#fff; }
#gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:10px; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:15px; top:50%; margin-top:-6px; transition:all 0.5s;}
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1em; color:#4b4b4b; line-height:50px; padding:0 2%;
                                             border-bottom:1px solid #e1e1e1; background:#f9f9f9; box-sizing:border-box; }

#gnb_mo > ul > li > div.active:before {transform:rotate(90deg)}

#header.mo_on .menuToggle span.t {transform:translateY(9px) rotate(45deg)}
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b {transform:translateY(-9px) rotate(-45deg)}

#header.mo_on #gnb_mo {display:block;}


@media screen and (max-width:1280px){
	#header { height:70px; text-align: left; padding:0  }
  #header #logo {  height:70px; line-height: 70px; vertical-align: middle; margin-left: 2%; }
	#header #logo img { height: 50px; vertical-align: middle; }

  #header .member { right:50px; top:0; }
  #header .member li { padding: 0 7px; line-height: 70px; }

	#gnb_pc {display:none;}
	.menuToggle {display:block;}

  #header.mo_on::before { content:''; width: 100%; height: 70px; background:#fff; position: absolute; left:0; top:0; z-index: -1;}
}

@media screen and (max-width:480px){
  	#header #logo img { height: 42px; }
}



#footer { position: relative; background: #111;  font-family:'NEXON Lv2 Gothic'; z-index:10; }
#footer .s-inner { width: 96%; }
#footer .f-link { border-bottom: 1px solid rgba(255,255,255,0.15); overflow: hidden; line-height: 80px; color:#fff;}

.link-l { float: left; }
.link-l li { float: left; margin-right: 15px; padding-right: 15px; position: relative; }
.link-l li::after { content: ''; width: 1px; height: 16px; background: rgba(255,255,255,0.15); position: absolute; right:0; top: 50%; margin-top: -8px; }
.link-l li:last-child::after { display: none; }
.link-l li a { color:#fff; }
.link-r { float: right; }
.link-r a,
.link-r dl,
.link-r dl dt,
.link-r dl dd { float:left; }
.link-r dl { margin-left: 10px; }
.link-r dl dt { font-size: 1.125em; margin-right: 5px; font-weight: 500; }
.link-r dl dd { color:#c81313; font-size: 1.5em; font-weight: 700; }
.f-sns { display: inline-block; border:1px solid rgba(255,255,255,0.2); border-radius: 100px; width: 40px; height: 40px;  margin: 20px 3px;}
.f-sns img { width: 100%; }


.intranet span { background: #c81313; border-radius: 30px; width: 100%; height: 35px; padding: 8px 15px; color:#212121; font-weight: 500; color: #fff; }


#footer .f-info { padding: 2% 0; overflow: hidden; }
#footer .f-info h1 { float: left; margin-right: 2%;  }
#footer .f-info ul { float: left; max-width: 50%; }
#footer .f-info ul li { float: left; margin-right: 10px; color:rgba(255,255,255,0.4); font-size: 0.875em; line-height: 1.8em; }
#footer .f-info ul li.copy { clear: both; }

@media all and (max-width:1280px){
   #footer .f-info h1 img { width: 80px; }
   #footer .f-info ul { max-width: 55%; }
}


@media all and (max-width:1024px){
   #footer .f-link { font-size: 0.9em; }
}

@media all and (max-width:976px){
   #footer .f-link  { line-height: 60px; font-size: 0.85em; }
   #footer .link-r a { width: 35px; height: 35px; margin: 12.5px 2px;}
   #footer .f-info ul { max-width: calc(98% - 80px); }
}

@media all and (max-width:840px){
   #footer .link-l,
   #footer .link-r { width: 100%; }
   #footer .f-link { line-height: 30px; padding: 3% 0; }
   #footer .link-r a {  width: 30px; height: 30px; margin: 0 2px; }
}

@media all and (max-width:767px){
  #footer .link-l li { margin-right: 10px; padding-right: 10px;  }
  #footer .link-l { margin-bottom: 5px; }
  .intranet span { padding: 8px 10px; }
}

@media all and (max-width:568px){
   #footer .f-link { padding: 0; }
   #footer .f-link .s-inner { width: 100%; }
   #footer .f-link .link-l { line-height: 1.4em; border-bottom: 1px solid rgba(255,255,255,0.15); padding: 3%; margin-bottom:0; }
   #footer .link-l li { margin-right: 10px; padding-right: 0;  }
   #footer .link-l li::after { display: none; }
   #footer .link-r { padding: 5px 2%; }
   #footer .f-info h1 img { width: 50px; }
   #footer .f-info ul { max-width: calc(98% - 50px); }
   #footer .f-info ul li { font-size: 0.8em; }
}

@media all and (max-width:480px){
   #footer .link-l li { margin: 4px 7px 4px 0; }
	 .intranet span { padding: 5px 10px; }
}