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

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

/* ==================================== menu (PC) ============================================= */
#header {position: fixed; z-index: 1000; top: 0; width: 100%; /* transition: 0.5s ease-out; */ background: linear-gradient(to bottom, black, transparent); box-shadow: 5px 5px 20px -22px;}
#header.on,
#header.on2 {background: rgba(0,0,0,0.8);}
#header #logo {position: relative;}
#header #logo::before {position: absolute; content: '수원점';  left: 80%; top: 50%; transform: translateY(-50%); background: #00a6b1; width: 48px; height: 42px; font-size: 15px; border-radius: 3px;
display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; color: #fff; font-weight: 700;}
#header #logo img {width: 220px; height: auto; position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.mobile-gnb , #m_logo {display: none;}

.bon-slogun{
	display: none;
	position: relative;
	right: 10px;
	top: 18px;
	height: 50px;
}

#menu .bon-slogun{
	display: block;
}

/* ===================== menu ===================== */
.menu-wrap {position: relative; /* padding: 10px 0; */}
.menu {position: static !important; display: flex; justify-content: space-between; height: 90px; transition: all ease 0.3s; max-width: 1400px !important;}
#logo {height: 90px; padding: 0 60px 0 20px;}
#phone-call{position: absolute; top: 20px; left: 15px; display: none;}
#phone-call img {max-width: 30px; filter: brightness(100);}


/* 1depth */
.menu .dropdown {display: flex; width: 100%; max-width: 1400px; justify-content: center;}
.menu .dropdown > li {min-width: 16.28%; text-align: center; height: 90px;}
.menu .dropdown > li:hover > a {color: #00a6b2 !important; font-weight: 900;}
.menu .dropdown > li > a {display: inline-block; line-height: 90px; color: #fff;}


/* 2depth */
.menu .dropdown article {position: absolute; left: 0; display: none; width: 100%; background: rgba(0,0,0,0.7);}
.menu .dropdown article.active {display: block;}
.menu .dropdown ul {display: flex; padding: 8px 0; margin: 0 auto; width: 100%; max-width: 1200px;}
.menu .dropdown ul li {padding: 8px; flex: 1;}  /* flex: 1; 추가 */
.menu .dropdown ul li a {position: relative; display: inline-block; color: #fff !important;}
.menu .dropdown ul li a::after {content: ''; display: block; width: 0; height: 1px; background-color: #00a6b2; position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 0;}
.menu .dropdown ul li:hover a {color: #00a6b2 !important; font-weight: 700;}
.menu .dropdown ul li:hover a::after {width: 100%; transition: all 0.5s ease;}

@media screen and (max-width:1400px){
.menu {padding: 0 20px;}
header .numberImp {display: none;}
}


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

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

#header {background: rgba(0,0,0,0.9) !important;}
.menu-wrap{text-align: center; padding: 0;}
#m_logo {position: relative; display: inline-block; padding: 15px 35px 15px 0; text-align: center;}
#m_logo::before {position: absolute; content: '수원점'; left: 0; top: 50%; transform: translateY(-50%); background: #00a6b1; width: 48px; height: 42px; font-size: 15px; border-radius: 3px;
display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; color: #fff; font-weight: 700;}
#m_logo img {width: 130px;}
#logo {display: none;}
#phone-call{display: block;}
.menu {display: none; padding: 0 !important;}
.menu.active {display: block; background: #fff; height: 100%;}
.menu.active, .dropdown article.active .sub-menu {max-height: 55em;}

nav .bon-slogun {
	display: none !important;
}
.menu-wrap .bon-slogun {
	display: inline;
	   position: relative;
	   top: 14px;
	   height: 40px;
}
#m_logo::before {
	left: 140px;
}



/* ==================================== 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:hover {height: 100%;}
#menu .dropdown {display: block; max-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:hover > a {font-weight: 700;}
#menu .dropdown > li > a {position: relative; line-height: 1.5; display: block; padding: 12px 0; color: #333;}
#menu .dropdown > li > a:after {content: '+'; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: block; font-size: 25px;}
#menu .dropdown > li > a.active:after {content: '-'; right: 12px;}

#menu .dropdown article {position: static; display: block;}
#menu .dropdown ul {position: relative; display: block; padding: 0; border-top: 1px solid #ddd;}
#menu .dropdown ul li {padding: 0;}
#menu .dropdown ul li:not(:first-child) {border-top: 1px solid #fff;}
#menu .dropdown ul li:last-child {border-bottom: 1px solid #ddd;}
#menu .dropdown ul li a {width: 100%; display: block; height: 100%; padding: 8px 10px; background: #eee; color: #333 !important; transform: none;}
#menu .dropdown ul li a::after {display: none;}
#menu .dropdown ul li:hover a {background: #00a6b2; color: #fff !important; transition: all 0.1s ease;}

/* 3depth style */
.menu, .dropdown ul {overflow: hidden; max-height: 0;}


/* menu button style */
.spinner-master * {transition: all 0.3s; box-sizing: border-box;}
.spinner-master {position: absolute; top: 20px; right: 10px; height: 30px; width: 30px;}
.spinner-master label {display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%;}
.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);}
.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){
.tab-menu * {font-size: 14px;}
.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:480px){
.menu-wrap {text-align: left;}
#menu .dropdown > li > a {padding: 8px 0;}
#menu .dropdown ul li a {padding: 6px 10px; font-size: 15px;}

#m_logo {padding: 10px 10px 10px 15px;}
#m_logo::before {left: 100%; width: 40px; height: 38px; font-size: 13px;}
#m_logo img {width: 115px;}
#phone-call {display: none;}
.spinner-master {top: 13px;}

.tab-menu * {font-size: 12px;}

.menu-wrap  .bon-slogun {
	position: relative;
	left: 10px;
	top: 10px;
	height: 34px;
}
}

/* ================== sub-menu ===================== */
/* tab-menu */
.tab-menu-wrap {position:relative; height: 50px;}
.tab-menu {position: absolute; top: 0; width: 100%; z-index: 100;}
.tab-menu * {font-size: 15px;}
.tab-menu::before {content: ''; background-color: #f3f7fb; 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: #f3f7fb !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 {display: flex; align-items: center; min-height: 50px; position: relative !important; color:#333 !important; padding: 12px 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: #f3f7fb;}
.tab-menu .inner div ul li a:hover {background-color: #7c97aa; color: #fff;}