/* ======================================================================================================================================================================== */
/* ============================================================ header style start (yangyunji) =========================================================================== */
/* ======================================================================================================================================================================== */

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


/* ==================================== menu (PC) ============================================= */
#header {position: fixed; z-index: 999999; top: 0; width: 100%; transition: top .5s ease-out; background: #fff; box-shadow: 5px 5px 20px -22px;}
#header img {height: auto;}
.mobile-gnb , #m_logo {display: none;}

/* .on{background: rgba(81,65,67,0.8) !important; box-shadow: 5px 5px 20px -22px;}
.on .menu .dropdown > li > a{color: #fff;}
.on2{background: rgba(81,65,67,0.8) !important; box-shadow: 5px 5px 20px -22px;}
.on2 .menu .dropdown > li > a{color: #fff;}

.menu .dropdown > li > a{color: #fff; transition:0.3s;}
.menu .dropdown ul li a {color: #fff;}
.menu .dropdown > li:hover > a{color: #ec606d !important;}
.menu .dropdown > li:hover{background-color: transparent !important;} */

/* ===================== gnb ===================== */
#pc-gnb {width: 100%;}
#pc-gnb ul {display: flex; justify-content: flex-end; align-items: center; padding: 0.2% 0;}
#pc-gnb ul li:last-child {margin-right: 2%; border-radius: 30px; padding: 0 1%; margin-left: 0.5%; border: 3px solid #ec606d;}
#pc-gnb ul li:last-child a {color: #ec606d; font-size: 17px; font-weight: 500; line-height: 1.5;}
#pc-gnb ul li:last-child:hover {background-color: #ec606d; transition: all 0.3s ease;}
#pc-gnb ul li:last-child:hover a {color: #fff;}
#pc-gnb a {font-size: 14px; display:inline-block; padding:0 10px; color:#555; line-height:35px;}
#pc-gnb a:hover {color:#ec606d; transition: all 0.2s ease;}
#bo_v_info strong a{color: #555;}

/* ===================== menu ===================== */
.menu {display: flex; height: 80px; transition: all ease 0.3s; max-width: 1400px !important;}
.menu:hover {height: 500px; transition: all ease 0.3s;}
#logo {padding: 10px 0; max-height: 100%; margin: 0 auto; /* padding-right: 20px; */ text-align: center;}
#phone-call{position: absolute; top: 22px; left: 15px; display: none;}
#phone-call img{width: 80%;}

/* 1depth */
.menu .dropdown {display: flex; width: 100%; overflow: hidden; justify-content: center;}
.menu .dropdown > li {min-width: 20%; text-align: center; position: relative; height: 80px;}
.menu .dropdown > li:hover {background-color: #ec606d; transition: all 0.5s ease; height: 500px;}
.menu .dropdown > li:hover * {color: #fff;}
.menu .dropdown > li > a {line-height: 80px; font-weight: 500;}

/* 2depth */
.menu .dropdown ul li {padding: 4% 0;}
.menu .dropdown ul li a {position: relative;}
.menu .dropdown ul li a::after {content: ''; display: block; width: 0; height: 2px; background-color: #fff; position: absolute; left: 50%; transform: translate(-50%, 0); bottom: -5px;}
.menu .dropdown ul li:hover a::after {width: 100%; transition: all 0.3s ease;}

/* ================== sub-menu ===================== */
/* tab-menu */
.tab-menu-wrap {position:relative; height: 50px;}
.tab-menu {position: absolute; top: 0; width: 100%; z-index: 9999;}
.tab-menu * {font-size: 15px;}
.tab-menu::before {content: ''; background-color: #fff; display: block; width: 100%; position: absolute; height: 50px; z-index: -4; left: 0; top: 0; border-bottom: 1px solid #dcdcdc;}
.tab-menu .home-btn {display:inline-block; padding: 15px 15px; text-align:left; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; height: 50px;} 
.tab-menu .home-btn img {width: 50px;height: auto;}
.tab-menu .inner div p.btn:hover, .tab-menu .home-btn.hover {background-color: #fff !important;}
.tab-menu .inner {display: flex;}
.tab-menu .inner div {width: 100%;}
.tab-menu .inner div ul {cursor:pointer; position:relative; width: 100%;}
.tab-menu .inner div p.btn {min-height: 50px; position: relative !important; color:#333 !important; padding: 14px 10px !important; border-right: 1px solid #dcdcdc !important; cursor: pointer;}
.tab-menu .inner div p.btn::after {transition: all ease 0.5s; transform: translate(0, -50%); content: ''; position: absolute; top:50%; right: 2%; width: 22px; height: 22px; background: url(../img/sub_navi_off.png) 0 0 no-repeat;}
.tab-menu .inner div:hover p.btn::after {background: url(../img/sub_navi_on.png) 0 0 no-repeat; transition: all ease 0.5s;}
.tab-menu .inner div ul {display: none; border: 1px solid #dcdcdc;}
.tab-menu .inner div ul li a {display: block; color: #000; padding: 7px 10px; background-color: #fff;}
.tab-menu .inner div ul li a:hover {background-color: #6aa6e2; color: #fff;}

.head_logo{ border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.head_logo > div{max-width: 1200px; margin: 0 auto; width: 100%; height: 110px; display: flex; align-items: center; width: 100%; justify-content:center;}
.head_logo > div > a{flex:1;}
.head_logo > div > a:first-child{/* padding-left: 20px; */}
.head_logo a:last-child{text-align: right;/* padding-right: 20px; */}
.head_logo a span{display: inline-block; border: 4px solid #ffc90f; border-radius: 40px; padding: 4px 16px; background-color: #fff;}
.head_logo .logo_img{width: 330px;}

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

@media screen and (max-width:1200px){
	
	.head_logo{display: none;}
	#header { background: #fff !important; padding: 0;}
	#pc-gnb {display: none;}
	nav {position: absolute;}
	.menu-wrap{text-align: center;}
	#m_logo {display: inline-block; padding: 20px 0; text-align: center;}
	#m_logo img {width: 235px; padding-right: 0;}
	#logo {display: none;}
	#phone-call{display: block;}
	.menu {display: none; padding: 0 !important;}
	.menu.active {display: block; background: #fff; height: 100%;}
	.menu.active, .dropdown ul.active {max-height: 55em;}

	.head_logo{display: none;}
	/* .on{background-color: #fff !important;}
	.on2{background-color: #fff !important;}
	.on .menu .dropdown > li > a{color: #111;}
	.on2 .menu .dropdown > li > a{color: #111;}
	.menu .dropdown > li > a{color: #333; transition:0.3s;}
	.menu .dropdown ul li a {color: #333;} */
	
	
	/* ==================================== menu (Mobile) ============================================= */
	/* top-menu */
	.mobile-gnb.active {display: flex; background: #525252; color: #fff;}
	.mobile-gnb li {font-size: 15px;  width:50%; text-align: center; height: 45px; line-height: 45px;}
	.mobile-gnb li a {color: #fff;}

	/* menu style all */
	#menu{max-width: 100% !important;}
	#menu:hover {height: 100%;}
	#menu .dropdown {display: block; width: 100%;}
	#menu .dropdown:hover::before {display: none;}
	#menu .dropdown > li {height: 100%;}
	#menu .dropdown > li:hover * {color: #111;}
	#menu .dropdown > li:hover {height: auto; background-color: #fff;}
	#menu .dropdown > li > a {line-height: 1.5; display: block; padding: 2% 0;}
	#menu .dropdown > li > a:after {content: '+'; position: absolute; top: 0; right: 0; display: block; padding: 1.2% 2%; font-size: 25px;}
	#menu .dropdown > li > a.active:after {content: '-'; z-index: 99; padding: 1.2% 2.6%;}
	
	#menu .dropdown ul {border-top: 1px solid #ddd;}
	#menu .dropdown ul li {padding: 0;}
	#menu .dropdown ul li:last-child {border-bottom: 1px solid #ddd;}
	#menu .dropdown ul li a {width: 100%; display: block; height: 100%; padding: 1% 1.5%;}
	#menu .dropdown ul li a::after {display: none;}
	#menu .dropdown ul li:hover a {background: #ec606d; color: #fff; transition: all 0.1s ease;}
	
	/* 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;}
	

	/* menu button style */
	.spinner-master * {transition: all 0.3s; box-sizing: border-box;}
	.spinner-master {position: absolute; margin: 10px; height: 30px; width: 30px; right: 0; top: 20px;}
	.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 : 1024px ============================== */
@media screen and (max-width:1024px){
	.tab-menu .inner {padding: 0;}
}

/* ============================== Mobile size : 769px ============================== */
@media screen and (max-width:769px){
	#quick_menu {display: none;}
	.tab-menu * {font-size: 12px;}
	.tab-menu .inner div p.btn:after {width: 18px; height: 18px; background-size: cover;}
	.tab-menu .inner div:hover p.btn:after {width: 18px; height: 18px; background-size: cover;}
}
@media screen and (max-width:425px){
	#m_logo img{width: 160px;}
	.spinner-master{top: 12px;}
	#phone-call{top: 22px; text-align: left;}
	#phone-call img{width: 60%;}
}