/* ================= header style ======================= */

nav {width: 100%;}
.spinner-master input[type=checkbox] {display: none;}

/* quick menu */
#quick_menu{position: absolute; top: 141px; right: 0; z-index: 99999;}
#quick_menu ul li a {display: block;}
#quick_menu ul li {opacity: 0.8;}
#quick_menu ul li:hover {opacity: 1;}
#quick_menu .go_top {cursor: pointer;}


/* ==================================== menu (PC) ============================================= */
#header {position: relative; z-index: 99999; top: 0; width: 100%; transition: top .5s ease-out; background: #fff; box-shadow: 5px 5px 20px -22px;}
.m_util_member , #m_logo {display: none;}
#header .inner {padding: 0;}

/* dropdown */

#menu {display: flex; align-items: center;}
#logo {margin-left: 10px;}

.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-size: 18px; font-weight: 500;}
.dropdown a:hover {color: #f59b90;}
.dropdown > li {position: relative; text-align: center; width: 16%;}
.dropdown > li > a {color: #222; line-height: 105px;}
.dropdown > li:hover > a {color: #f59b90; transition: all 0.15s ease;}
.dropdown > li:hover ul {display: block;}

.dropdown ul {display: none; position: absolute; top: 100%; background: rgba(255,255,255,0.9); border-top: 5px solid #ea908e; border-bottom: 5px solid #f9dcba; width: 100%;}

.dropdown ul > li {position: relative;}
.dropdown ul > li a {padding: 10px 15px; height: auto; font-size: 14px;}
.dropdown ul > li:hover a {background: #f59b90; color: #fff; transition: all 0.1s ease;}

/* join, login */
#gnb {width: 100%; border-bottom: 1px solid #eee;}
#gnb .util_member {display: flex; justify-content: flex-end;}
#gnb .util_member li:last-child {margin-right: 50px;}

#gnb h3:not(:where(.as-h1,.as-h2,.as-h3,.as-h4,.as-h5,.as-h6)) {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb h1:where(.as-h3), #gnb h2:where(.as-h3), #gnb div:where(.as-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:35px;}
#gnb a:focus, #gnb a:hover {color:#f59b90;}
#bo_v_info strong a{color: #555;}




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

@media screen and (max-width:1200px){

	#gnb{display: none;}
	nav {position: absolute;}
	#m_logo{display: block; padding: 16px 0; text-align: center;}
	#logo {display: none;margin-left: 0;}
	#logo img {display: block; margin: 5% auto;}
	#menu {display: block;}
	

	/* join, login */
	.m_util_member.active {display: flex; background: #f29694; color: #fff;}
	.m_util_member li{font-size: 1em;  width:50%; text-align: center; height: 50px; line-height: 50px;}
	.m_util_member li a {color: #fff;}


	/* menu style all */
	.menu.active, .dropdown ul.active {max-height: 55em;}
	.menu li, .dropdown > li, .menu ul ul.sub-menu, .menu > ul > li.align03, .menu ul li.align03 ul.sub-menu{width: 100%; height: auto; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;	box-sizing: border-box; margin: 0;}

	/* 2depth style */
	.dropdown {display: block;}
	.menu > li, .dropdown > li {display: block; margin-right: 0;}
	.dropdown > li > a {color: #222; padding: 0.8em; display: block; line-height: 1em;}
	.dropdown > li:hover > a {color: #f59b90; border-top: none; transition: all 0.1s ease;}
	.dropdown > li > a:after {content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em;}
	.dropdown > li > a.active:after {content: "-";}

	
	/* 3depth style */
	.menu, .dropdown ul {overflow: hidden; max-height: 0; background-color: #fff;}
	.dropdown ul {display: inherit; position: relative; left: auto; top: auto; border: none; padding: 0px;}
	.dropdown ul li:hover a {background: #f59b90; color: #fff; transition: all 0.1s ease;}
	.dropdown ul li a {font-size: 15px; padding: 8px 18px 8px 30px; border-bottom: 1px solid #f2f2f2;}

	
	/* menu button style */
	.spinner-master * {transition: all 0.3s; box-sizing: border-box;}
	.spinner-master {position: relative; margin: 10px; height: 30px; width: 30px; float: right; margin-top: -42px;}
	.spinner-master label {cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 5px; right:0;}
	.spinner-master .spinner {position: absolute; height: 4px; width: 100%; padding: 0; background-color: #ccc;}
	.spinner-master .diagonal.part-1 {position: relative; float: left;}
	.spinner-master .horizontal {position: relative; float: left; margin-top: 4px;}
	.spinner-master .diagonal.part-2 {position: relative; float: left; margin-top: 4px;}
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {opacity: 0;}
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px;}
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: -12px;}	
}
/* ============================== Mobile size : 640px ============================== */
@media screen and (max-width:640px){
	#quick_menu {display: none;}
}