@charset "utf-8";
img {max-width:100%;}

#wrap {overflow:hidden; min-width:320px;}
#header {position:relative;width:1280px; margin:0 auto;}
#header h1 {position:absolute; left:48px; top:27px; transition: all 0.3s;}


#header h1 img {width:60%;}


/*SNS·Î±×ÀÎ*/
.sns_btn {margin-top:15px;padding-top:15px;border-top:1px solid #ddd;}
.sns_btn a {margin:1px 0;}
.bt_naver,
.bt_face,
.bt_kakao {font:400 16px  'Noto Sans KR';height:38px;line-height:38px;padding:0 25px 20 60px;display:block;text-align:center;text-decoration:none !important;position:relative;}
.bt_naver {color:#fff !important;background-color:#1ec800;}
.bt_naver .bt_ic {width:35px;height:35px;background-color:#1ec800;text-align:center;display:inline-block;position:absolute;top:0;left:0;}
.bt_naver .bt_ic:after {width:0;height:35px;border-left:1px solid #1db402;border-right:1px solid #60dc4a;display:inline-block;content:'';position:absolute;top:0;right:0;}
.bt_face {color:#fff !important;background-color:#3b579d;}
.bt_face .bt_ic {width:35px;height:35px;background-color:#3b579d;text-align:center;display:inline-block;position:absolute;top:0;left:0;}
.bt_face .bt_ic:after {width:0;height:35px;border-left:1px solid #314984;border-right:1px solid #516cad;display:inline-block;content:'';position:absolute;top:0;right:0;}
.bt_kakao {color:#381E1E !important;background-color:#F1DC43;}
.bt_kakao .bt_ic {width:35px;height:35px;background-color:#F1DC43;text-align:center;display:inline-block;position:absolute;top:0;left:0;}
.bt_kakao .bt_ic:after {width:0;height:35px;border-left:1px solid #e1cd39;border-right:1px solid #f8e76a;display:inline-block;content:'';position:absolute;top:0;right:0;}
.bt_ic img {margin-top:9px;margin-bottom:2px;}


#gnb {position:absolute; top:30px; right:48px;}

#gnb li a:hover {color:#fff;}
/*
#gnb li {float:left; padding:0 23px;}
#gnb li a {display:block; font-size:16px; color:rgba(255,255,255,0.6); line-height:54px; letter-spacing:0.14em; transition: all 0.3s;}
#gnb .involved a {padding:0 35px; border:1px solid #ffffff; color:#fff; transition: all 0.3s;}
#gnb .involved a:hover {background:rgba(255,255,255,0.2);}
#gnb li a:hover {color:#fff;}
*/
#m_gnb {display:none; position:relative; z-index:100; width:100%; text-align:center; background:#fff;}
#m_gnb:before {display:none; position:fixed; top:0; left:0; right:0; z-index:1; bottom:-500px; background:#fff; content:'';}
#m_gnb h1 {position:absolute; margin-top:10px; margin-left:-30px; z-index:115 !important;}
#m_gnb .gnb_list {position:relative; z-index:6; margin:16px; margin-top:-1000px; padding-top:85px; background:#fff; opacity:0; transition:opacity 0.3s;}
#m_gnb li {margin-top:18px;}
/*#m_gnb ul {margin-top:100px; top:-5000px; transition:margin-top 0.3s;}
#m_gnb ul a {display:block; font-size:24px; line-height:30px; color:#1b1726; font-weight:700;}

#m_gnb .involved {margin-top:0px;}
#m_gnb .involved a {font-size:12px; color:#1b1726; line-height:48px; font-weight:400; letter-spacing:0.14em; background:#fdca40;}
*/
.btn_menu {position:absolute; top:16px; right:16px; z-index:1000; width:40px; height:40px; background:#000;}
.btn_menu span {display:block; position:relative; width:16px; margin:13px 12px;}
.btn_menu .line {display:block; width:16px; height:2px; margin-bottom:4px; background:#fff; transition: background-color 0.25s ease, transform 0.25s ease-in-out; transform-origin: 50% 50%;}


#m_gnb.on:before {display:block;}
#m_gnb.on .gnb_list {margin-top:0; opacity:1;}
#m_gnb.on ul {margin-top:0;}
#m_gnb.on h1 {display:block;}
#m_gnb.on .btn_menu .line {visibility: hidden; background:#fff;}
#m_gnb.on .btn_menu .line.s01 {visibility: visible; transform: rotate(45deg) translate3d(4px,4.5px,0);}
#m_gnb.on .btn_menu .line.s03 {visibility: visible; transform: rotate(-45deg) translate3d(4px,-4.5px,0);}
#main {}

body.on #main {display:none;}


#footer {margin-top:-1px; background:#f7f9fc;}
#footer > div {overflow:hidden; width:90%; max-width:1170px; margin:0 auto; padding:33px 0; font-size:14px; color:#ccc; }
#footer p {float:left;}
#footer .f_btn {float:right;}

@media all and (max-width: 991px) {
	#header {width:100%; padding:0 2%; box-sizing:border-box;}
	#header h1 {left:32px; top:43px; width:127px;}
	#gnb {top:15px; right:10px;border:0px solid yellow;width:130px;}

	#footer > div {padding:4.2% 0; font-size:11px;}
}
@media all and (max-width: 767px) {
	#header h1 {left:16px; top:15px; width:40%}


	#footer .f_btn {float:left;}
	#footer p {width:100%;}


}