/* ================= header style ======================= */
nav {width: 100%;}
/* quick menu */
#quick_menu{position: absolute; top: 141px; right: 0; z-index: 99999;}
#quick_menu ul li a {display: block;}
#quick_menu ul li img {max-width: 100px; }
#quick_menu .go_top {cursor: pointer;}

/*quick_menu*/
#m_quick_menu {position:fixed; bottom:20px; right:20px; width:70px; z-index:5000; display: none;}
#m_quick_menu img {width: 65px;}
.m_quick_open {width:70px; height:70px; position:relative;}
#m_quick_menu .bt_on {display:none; position:absolute; bottom:0; left:0; cursor: pointer;}
#m_quick_menu .bt_off {display:block; top:0; left:0; cursor: pointer;}
.m_quick_wrap {display:block;}
.m_quick_wrap a img {padding-bottom:5px;}


/* ==================================== menu (PC) ============================================= */
	
	.mobile-menu {display: none;}
	.menu-wrap {display: block;}

	#header {position: relative; z-index: 99999; top: 0; width: 100%; transition: top .5s ease-out; background: #fff; box-shadow: 5px 5px 20px -22px;}
	#header .inner {padding: 0;}

	/* PC 메뉴 */
	#logo {display: block !important; width: 250px; position: absolute; left: 50%; transform: translate(-50%, 0)}
	#logo img {width: 100%;}
	#menu nav {width: 100%; height: auto; transition: all 0.3s ease; display: flex; align-items: center;}
	.dropdown {width: 100%; padding: 0px; margin: 0px; list-style: none; position: relative; display: flex; justify-content: flex-end;}
	.dropdown a {display: block; text-decoration: none; color: #555; font-weight: 600; font-size: 18px;}
	.dropdown > li {position: relative; text-align: center; width: 16%;}
	.dropdown > li > a {color: #222; line-height: 60px;}
	.dropdown > li:hover > a {color: #3d4b6f; transition: all 0.15s ease; }
	.dropdown > li:hover ul {display: block;}
	.dropdown ul {display: none; position: absolute; top: 100%; background: #3d4b6f; width: 100%;}
	.dropdown ul > li {position: relative;}
	.dropdown ul > li a {padding: 10px 15px; height: auto; font-size: 17px; color: #fff; font-weight: 500;}
	.dropdown ul > li:hover a {background: #fff; color: #3d4b6f; transition: all 0.1s ease;}

	/* join, login */
	#gnb {width: 100%; border-bottom: 1px solid #eee; min-height: 80px; padding: 15px 0;}
	#gnb .util_member {display: flex; justify-content: flex-end;}
	#gnb .util_member li:last-child {margin-right: 50px;}
	#gnb h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
	#gnb a {font-size: 14px; display:inline-block; padding:0 10px; color:#555; line-height:45px;}
	#gnb a:focus, #gnb a:hover {color:#3d4b6f;}
	#bo_v_info strong a{color: #555;}

/* ============================== Mobile size : 1200px ============================== */

@media screen and (max-width:1200px){
	#gnb{display: none;}
	.menu-wrap {display: none;}
	#header {box-shadow: none;}

	/* ==================================== menu (모바일) ============================================= */
	
	.menu_bg{display: none;position: fixed;top:62px;left:0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 10000;}

	/* menu-icon */
	#mobile-header {position:fixed;width: 100%;text-align:center;background:#fff;z-index: 999; top: 0; height: 62px; border-bottom: 1px solid #eee;}
	#mobile-header .lbt {position:absolute; top:12px; left:10px;}
	#mobile-header .rbt {position:absolute; top:14px; right:10px;}
	#mobile-header .logo {text-align:center; padding-top:13px;}
	#mobile-header .meunIcon{display: inline-block; cursor: pointer; z-index: 999;}
	#mobile-header .bar1, .bar2, .bar3 {width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s;}
	#mobile-header .change .bar1 {-webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px);}
	#mobile-header .change .bar2 {opacity: 0;}
	#mobile-header .change .bar3 {-webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px);}

	.mobile-menu {display: block; height: 62px;}
	.mobile-menu ul.gnb {padding:0;margin:0;list-style:none;background:#172435;padding:.5em 0 ;text-align:center;}
	.mobile-menu ul.gnb li {display:inline-block;width:12.5%;text-align:center;}
	.mobile-menu ul.gnb li img {width:100%;max-width:62px;}
	.mobile-menu ul.gnb2 {padding:0;margin:0;list-style:none;clear:both;padding:.5em 0;background:#2e676f;text-align:center;}
	.mobile-menu ul.gnb2 li {display:inline-block;width:23.3%;text-align:center;border-right:1px solid #9d9da0;}
	.mobile-menu ul.gnb2 li:last-child {border:none;}
	.mobile-menu ul.gnb2 li img {margin:0 auto;max-width:125px;width:100%;}

	.mobile-menu .menu {position: fixed;left: -100%;width: 80%;height: 100%;max-width: 380px;background: rgba(255,255,255,0.7);z-index: 10001; top: 62px;}
	.m-menu-wrap {margin: 10px;height: 88%;background: #fff;overflow-y: auto;}
	.m-menu-wrap h2{width: 30%;margin: auto;font-weight: normal;font-size: 1.3em;border-bottom: 2px solid #ee7747;padding-bottom: 10px;}
	.top-menu{overflow: hidden;}
	.top-menu li{float: left;width: 50%;padding: 1em;}
	.top-menu li a{display: block;width: 100px;height: 100px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;padding-top: 22px;margin: auto;}
	.top-menu li a span{display: block;font-size: 1.1em;color: #fff;}
	.top-menu li:nth-child(1) a{background: #d71780;}
	.top-menu li:nth-child(2) a{background: #f5cc46;}
	.top-menu li:nth-child(3) a{background: #68be8d;}
	.top-menu li a:hover{text-decoration: none;}
	.top-menu li a img {width: 35%;}

	.sub_menu{width: 90%;margin: 5%;}
	.sub_menu li a{position: relative;display: block;font-size: 1.1em;color: #555;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;padding: 0.5em 0;}
	.sub_menu li a span{position: absolute;right: 10px;}
	.sub_menu li a:hover,.sub_menu li a:focus{text-decoration: none;background: #f3f3f3;}
	.sub_menu > li:first-child{border-top: 1px solid #ccc;}
	.sub_menu ul{display: none;background: #fdf5da;}
	.sub_menu ul a{font-size: .95em;}
}
/* ============================== Mobile size : 640px ============================== */
@media screen and (max-width:640px){
	#quick_menu {display: none;}
	#m_quick_menu {display: block;}
}
