/*************** 공통 레이아웃 ***************/

.fwrap { position:relative; width:calc(100% - 120px); margin-left:60px; margin-right:60px; }
.swrap { position:relative; width:1400px; margin-left:auto; margin-right:auto; }

#head { width:100%; top:0; left:0; position:fixed; z-index:2000; overflow:hidden; }
#logo { position:absolute; height:100px; line-height:100px; left:0; top:0; z-index:10; }

#top_option { position:absolute; width:200px; height:100px; top:0; right:0; text-align:right; z-index:10; }
#top_option p { display:inline-block; margin-left:30px; }
#top_option .mmenu_btn { width:60px; height:100px; background:url('/images/btn_menu.gif') right center no-repeat; cursor:pointer; }


/*** ALL GNB ***/

#all_gnb:before { position:absolute; width:100%; height:100px; display:block; content:''; background:#fff; z-index:-1; border-bottom:1px solid #ddd; }
#submenu_bg { position:absolute; background:#171776; width:100%; height:0; top:100px; left:0; transition:all .6s; z-index:-1; }

#gnb { text-align:center; padding-left:200px; }
#gnb ul { display:inline-block; }
#gnb ul:after { clear:both; visibility:hidden; display:block; content:''; }
#gnb ul li { float:left; height:100px; width:180px; text-align:center; cursor:pointer; position:relative; }
#gnb > ul > li > a { color:#333; font-size:19px; font-weight:500; line-height:100px; }
#gnb > ul > li:hover > a { color:#171776; }
#gnb > ul > li:hover > .submenu { background:#000; }

.submenu { position:relative; height:0; top:0; overflow:hidden; transition:all .3s; padding-top:20px; transition:all .6s; }
.submenu a { display:block; color:#fff; font-size:14px; font-weight:400; height:30px; text-align:center; line-height:30px; opacity:.75; }
.submenu a:hover { opacity:1; }



#head.gnb2 #logo img { height:46px; }
#head.gnb2 #logo, #head.gnb2 #gnb > ul > li > a { height:76px; line-height:76px; }
#head.gnb2 #top_option, #head.gnb2 #top_option .mmenu_btn, #head.gnb2 #all_gnb:before, #head.gnb2 #gnb ul li { height:76px; }
#head.gnb2 #submenu_bg, #head.gnb2 #gnb ul li p { top:76px; }



/*** BASIC Mobil GNB ***/

#mgnb_back { position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.9; display:none; z-index:19999; transition:none !important; }
.mclose { position:absolute; top:40px; right:60px; cursor:pointer; z-index:20000; }

#mobile_menu, #site_map { position:fixed; width:0; height:0; left:0; top:0; overflow-y:auto; z-index:20000; opacity:0; }

.menu_bg { position:fixed; background:#171776; z-index:-1; }
#mobile_menu.mmenu_view, #site_map.smap_view { width:100%; height:100%; opacity:1; }
#mobile_menu.mmenu_view .menu_bg, #site_map.smap_view .menu_bg { animation-name:menu_bg; animation-duration: 1s; animation-fill-mode:forwards; }

@keyframes menu_bg {
	0% { width:0; height:0; top:80px; right:80px; border-radius:50%; }
	70% { width:3000px; height:3000px; top:-1500px; right:-1000px; border-radius:50%; }
	100% { width:100%; height:100%; top:0; right:0; border-radius:0; }
}


#mobile_menu .m_gnb { margin:40px 0 6px; cursor:pointer; font-size:36px; font-weight:700; font-family:Nanum Gothic; color:#fff; opacity:0; transition:all 2s; }
#mobile_menu .m_gnb:first-child { margin-top:0; }
#mobile_menu.mmenu_view .m_gnb { opacity:1; }

#mobile_menu .m_snb { transition:none !important; }
#mobile_menu .m_snb li { margin-top:15px; cursor:pointer; font-size:17px; }
#mobile_menu .m_snb li a { display:block; color:#fff; font-weight:400; }




/*** BASIC Site Map ***/


#site_map .vm > ul { display:flex !important; width:100% }
#site_map .vm > ul > li { width:100%; position:relative; opacity:0; transition:opacity 1.4s; }
#site_map.smap_view .vm > ul > li { opacity:1; }

#site_map .smap_gnb p { color:#fff; font-size:28px; font-weight:500; }

#site_map .smap_snb { margin-top:30px; }
#site_map .smap_snb li { margin-top:16px; }
#site_map .smap_snb a { color:#fff; font-size:16px; }

#site_map #smap_line { display:flex; position:absolute; width:100%; height:100%; left:0; top:0; opacity:.2; }
#site_map #smap_line li { width:100%; border-left:1px solid #fff; }
#site_map #smap_line li:first-child { border-left:0; }




/***** 하단 *****/

#footer * { letter-spacing:0; }
#footer{ padding: 40px 0 40px; background-color: #393939; }

#footer .f_top::after{ clear:both; visibility:hidden; display:block; content:''; }
#footer .f_top li{ float: left; color: #fff; font-size: 17px; font-weight: 400; }
#footer .f_top li:nth-child(n+2){ margin-left: 35px;}

#footer .line{ margin: 35px 0; border-top: 1px solid#4f4f4f;}

#footer .f_bottom li{ font-size: 16px; font-weight: 400; display: inline-block; color: #969696;  line-height: 170%; margin-right: 30px;}
#footer .f_bottom li span{ color: #c8c8c8; font-weight: 500; margin-right: 5px; }
#footer .f_bottom li:last-child{ margin-right: 0;}

#footer .copy{ font-size: 13.5px; font-weight: 400; color: #969696; }
#footer .sns img{ opacity: .5; }

#footer #page_top { width:81px; height:81px; top:-81px; position:absolute; right:0; border:1px solid rgba(255,255,255,.5); cursor:pointer; background:url('/images/ptop_arrow.png') center no-repeat; }
#footer #page_top:hover { background-color:#fff; background-image:url('/images/ptop_arrow_b.png'); }