@charset "utf-8";

/* 전체 ~ 컨테이너 */
body.lock {overflow:hidden}
#wrap {}
#header {position:fixed; top:20px; left:0; width:100%; z-index:990; transition:all .4s ease}
#header:before, .scroll:before {position:absolute; top:-20px; left:0; width:100%; height:0; content:''; background:#ccc; box-shadow:0 2px 2px rgba(0, 0, 0, .04); z-index:10; transition:all .4s ease}
#header > .inner {position:relative; max-width:1400px; margin:0 auto; padding:0 50px; z-index:30}
#logo {float:left; width:150px; padding-top:10px;margin-bottom:0 !important}
#logo a {color:#fff; font-size:15pt}
#logo a img {display:block; max-width:100%}
#gnb {float:right;background: #000;opacity: 0.7;margin-bottom:0 !important}
#gnb > li {position:relative; display:inline-block; vertical-align:top}
#gnb > li > a {display:block; padding:15px 20px; font-size:15px; color:#fff}
#gnb > li > ul {display:none; position:absolute; top:80px; left:50%; width:180px; margin-left:-90px; padding:0 20px; background:#fff; box-shadow:0 4px 20px rgba(0, 0, 0, .08)}
#gnb > li > ul:before {position:absolute; top:-12px; left:50%; content:''; margin-left:-6px; border-style:solid; border-width:6px; border-color:transparent transparent #fff transparent}
#gnb > li > ul > li {position:relative}
#gnb > li > ul > li > a {position:relative; display:block; padding:15px 0; border-bottom:1px solid #e0e0e0;font-size:13px}
#gnb > li > ul > li:last-child > a {border-bottom:none}
#header.fixed, .scroll {top:0}
#header.fixed #logo a {color:#000}
#header.fixed:before, .scroll:before {top:0; /*height:100%*/height:60px !important}
#header.fixed #gnb > li > a {color:#92bd92}
#header.fixed #gnb > li > a:after {display:none}
#gnbTrigger {display:none; position:fixed; top:0; right:0; width:50px; height:50px; border:none; background:#fff; cursor:pointer; outline:none; z-index:1100}
#gnbTrigger > span {display:block; position:absolute; left:50%; width:30px; height:3px; margin-left:-15px; background:#000; transition:all .3s ease-in-out; transform:rotate(0deg); opacity:1}
#gnbTrigger > .bar1 {top:16px}
#gnbTrigger > .bar2 {top:24px}
#gnbTrigger > .bar3 {top:32px}
#gnbTrigger.open {background:#000}
#gnbTrigger.open > span {background:#fff}
#gnbTrigger.open > .bar1 {top:24px; transform:rotate(135deg)}
#gnbTrigger.open > .bar2 {opacity:0; left:-30px}
#gnbTrigger.open > .bar3 {top:24px; transform:rotate(-135deg)}


body.main #container {margin-top:0 !important}
#container {margin-top:50px}
#container.visual {margin-top:0 !important}
/* 브라우저 업데이트 레이어 */
#browserUpdate {position:fixed; display:none; top:150px; left:0; width:100%; height:auto; text-align:center; color:#fff; padding:80px 0; background:#21bbb1; z-index:1000}
#browserUpdate h2 {font-size:30px; font-weight:400; line-height:1.2; margin-bottom:20px}
#browserUpdate h2:before {font-family:'FontAwesome'; content:'\f071'; margin-right:10px}
#browserUpdate p {font-size:14px; line-height:1.7; color:#fff; margin-bottom:50px}
#browserUpdate a {display:inline-block; margin:0 5px; padding:8px 0; width:200px; color:#fff; border:1px solid #fff}
#browserUpdate a.confirm {color:#21bbb1 !important; background:#fff}
/* 스크롤 버튼 */
#scrollTop {position:fixed; display:none; bottom:30px; left:0; width:100%; height:50px; margin:0 auto; z-index:50}
#scrollTop .inner {margin:0 auto; max-width:1400px; height:100%; padding:0 50px; text-align:right}
#scrollTop a {display:inline-block; width:45px; height:45px; text-align:center; color:#fff; line-height:45px; border-radius:50%; background:#21bbb1}
/* 푸터 */
#footer {clear:both; width:100%; background:#000;}
#footer .inner {position:relative; padding:55px 20px; text-align:center}
#footer .inner .copyright {display:inline-block; font-size:12px; color:#999; padding-left:80px}
#footer .inner ul.sns {display:inline-block; padding-left:30px}
#footer .inner ul.sns li {display:inline-block; padding:0 5px; color:#fff}
#footer .inner ul.sns li a {color:#fff}
#footer .inner address {color:#999;}
#blogo {width:100px; margin:0 auto 15px auto}
#blogo img {display:block; width:100%}

/* 공통 색상 클래스 */
.black {color:#000 !important}
@media screen and (max-width:1024px) {
 /* 헤더 */
 #logo {display:; position:absolute; float:none;left:10px;top:-10px; margin:0px auto 0 auto; padding:0; z-index:1100}
 #gnbWrapper {position:fixed; top:0; right:-100%; width:100%; height:100%; background:#fff; z-index:1010}
 #gnbTrigger {display:block !important}
 #gnb {float:none; margin-top:52px; text-align:center}
 #gnb > li {display:block}
 #gnb > li > a {display:inline-block; font-size:48px; padding:8px 15px !important; color:#333}
 #gnb > li.open > a {color:#fff !important; background:#333}
 #gnb > li > ul {position:static; margin:0 !important; width:auto; text-align:center; background:transparent; box-shadow:none}
 #gnb > li > ul:before {display:none}
 #gnb > li > ul > li > a {font-size:24px; padding:8px 0; border-bottom:none}
}

@media screen and (min-width:1025px) {
 /* 헤더 */
 #gnb > li > a:after {display:none; margin-top:5px; height:1px; content:''; background:#fff}
 #gnb > li.on > a:after, #gnb > li.open > a:after, #gnb > li > a:hover:after {display:block}
 #gnb > li > ul > li > a:hover {color:#92bd92}
 #gnb > li > ul > li:after {position:absolute; bottom:0; left:0; width:0; height:1px; content:'' !important; background:#92bd92; transition:all .4s ease}
 #gnb > li > ul > li:hover:after {width:100%}
 #gnb > li > ul > li:last-child:after {display:none}
 #header.fixed #gnb > li > a:hover, #header.fixed #gnb > li.on > a {color:#92bd92}
}

@media screen and (max-width:768px) {
 /* 헤더 */
 #gnb > li > a {font-size:32px !important}
 #gnb > li > ul > li > a {font-size:18px}
 /* 푸터 */
}

@media screen and (max-width:640px) and (min-width: 100px) {
 #scrollTop .inner {padding:0 30px}
 #footer .inner {padding:30px; text-align:left}
 #footer .inner .copyright {padding:0 50px 0 0}
 #footer .inner ul.sns {position:absolute; bottom:30px; right:30px}
 #blogo {margin:0 0 15px 0}
}